← Commit history

0.5.43: widget helper posts its width; skill 1.5.0

John Lauer ·d0638ce7e4 ·1mo ago ·parent 269a225
4 files changed +24−9
bin/hydrogen-widget-lib.py+9−2
@@ -35,7 +35,7 @@ html,body{margin:0;height:100%%;background:transparent;color:#e6ebef;font-family      ellipsis instead of pushing the value out of view. */   .w{font-size:9px;line-height:1;padding:2px 6px}   .rows{flex-direction:column;align-items:stretch;justify-content:center;gap:2px;min-width:0}-  .row{display:grid;grid-template-columns:auto minmax(14px,1fr) auto;align-items:center;gap:4px;min-width:0}+  .row{display:grid;grid-template-columns:auto minmax(56px,1fr) auto;align-items:center;gap:4px;min-width:0}   .lbl{font-size:7.5px;max-width:5.5em;overflow:hidden;text-overflow:ellipsis}.bar{width:auto;height:5px}.v{font-size:9px;min-width:0}   .big{font-size:15px}.err{font-size:9px;white-space:normal;line-height:1.1} }@@ -44,7 +44,14 @@ html,body{margin:0;height:100%%;background:transparent;color:#e6ebef;font-family <script> const R=%(refresh_ms)d; function bar(l,p,sev){const c=(sev==='critical'||p>=90)?'hot':(sev==='warning'||p>=70)?'warn':'';return `<span class="row"><span class="lbl">${l}</span><span class="bar ${c}"><i style="width:${Math.max(0,Math.min(100,p))}%%"></i></span><span class="v">${Math.round(p)}%%</span></span>`;}-function render(d){document.getElementById('w').innerHTML=%(render_js)s;}+function render(d){document.getElementById('w').innerHTML=%(render_js)s;postWidth();}+/* THE WIDGET DECIDES ITS WIDTH: measure the content in the current layout (tall rows are narrow,+   the compact row is wide) and ask the host for that width. Never fixed px; the host clamps. */+function postWidth(){try{const w=document.querySelector('.w');const rows=document.getElementById('w');if(!w||!rows)return;+  let need=0;for(const r of rows.children){need=Math.max(need,r.scrollWidth);}+  const mark=w.querySelector('.mark');const cs=getComputedStyle(w);+  const total=Math.ceil(need+(mark?mark.getBoundingClientRect().width+parseFloat(cs.gap||'0'):0)+parseFloat(cs.paddingLeft)+parseFloat(cs.paddingRight)+2);+  if(total>0&&window.parent!==window)window.parent.postMessage({hdWidget:{width:total}},'*');}catch(e){}} async function tick(){try{const r=await fetch('/data.json',{cache:'no-store'});const d=await r.json();window.__last=d;render(d);}catch(e){document.getElementById('w').innerHTML='<span class="err">no data</span>';}} let tm=null;function arm(){if(tm)return;tm=setInterval(tick,R);}function disarm(){if(tm){clearInterval(tm);tm=null;}} document.addEventListener('visibilitychange',()=>{if(document.hidden)disarm();else{tick();arm();}});
package.json+1−1
@@ -4,7 +4,7 @@   "type": "bootstrap",   "title": "Adom Hydrogen (platform base)",   "brief": "Layer Hydrogen's workspace onto a standard Adom workstation.",-  "version": "0.5.42",+  "version": "0.5.43",   "description": "Hydrogen's PLATFORM-GENERIC workspace layer on top of adom/core. Installs adom/core for the full Adom ecosystem, then adds everything common to running inside Hydrogen on ANY platform: the runtime-neutral hydrogen-* skills and the generic editor configuration (Claude Code CLI + extension, VS Code settings, trusted domains). Platform-specific layers depend on THIS: adom/hydrogen-windows-bootstrap (WSL2), adom/hydrogen-mac-bootstrap, adom/hydrogen-ubuntu-bootstrap. The reference design other orgs copy to build their own bootstrap on adom/core.",   "org": "adom",   "tags": [
page.json+2−2
@@ -4,7 +4,7 @@   "type": "bootstrap",   "title": "Adom Hydrogen (platform base)",   "brief": "Layer Hydrogen's workspace onto a standard Adom workstation.",-  "version": "0.5.42",+  "version": "0.5.43",   "description": "Hydrogen's PLATFORM-GENERIC workspace layer on top of adom/core. Installs adom/core for the full Adom ecosystem, then adds everything common to running inside Hydrogen on ANY platform: the runtime-neutral hydrogen-* skills and the generic editor configuration (Claude Code CLI + extension, VS Code settings, trusted domains). Platform-specific layers depend on THIS: adom/hydrogen-windows-bootstrap (WSL2), adom/hydrogen-mac-bootstrap, adom/hydrogen-ubuntu-bootstrap. The reference design other orgs copy to build their own bootstrap on adom/core.",   "org": "adom",   "tags": [@@ -49,4 +49,4 @@     "hydrogen editor configuration",     "where do hydrogen skills come from"   ]-}\ No newline at end of file+}
skills/hydrogen-widget/SKILL.md+12−4
@@ -1,7 +1,7 @@ --- name: hydrogen-widget description: "Build, list, open and drive Hydrogen Widgets: small live panels in Hydrogen Desktop's Title Bar (Claude usage, Codex usage, a clock, or your own), each served by a binary inside the workspace and mounted in a sandboxed slot. Covers the hydrogen-widget.json facet a wiki repo carries (alone, or next to its dock manifest and project workspace), the per-widget page the pulldown links to, the launch contract (HYDROGEN_WIDGET_ID / _PORT / _SLOT / HYDROGEN_PROXY_PORT, the health URL, the explicit takeover, stop-first relaunch), the tall and compact layouts, vendor marks, private repos (read with the user's session), the curated list on adom/hydrogen-bootstrap, the Hydrogen Widgets pulldown, and the control API (GET /widgets, POST /widgets/open|close|navigate|refresh|menu, GET /widgets/status) so an AI can do all of it with no mouse. Trigger words: hydrogen widget, hydrogen-widget, title bar widget, widgets pulldown, widget slot, claude usage widget, codex usage widget, tokens left widget, usage meter in the title bar, hydrogen-widget.json, /widgets/open, make a widget, add a widget to hydrogen, private widget, widget SDK."-version: 1.4.0+version: 1.5.0 ---  # hydrogen-widget: small live panels in Hydrogen Desktop's Title Bar@@ -91,7 +91,11 @@ and a `hydrogen/workspace.json`, or be the whole repo. One widget: } ``` -Several in one repo: `{"widgets": [ {...}, {...} ]}`.+Several in one repo: `{"widgets": [ {...}, {...} ]}`. Each entry has its own `id`, name, mark,+launch command and port; they share the repo's package (`install`) and page (`docs`). The curated+list names a Hydrogen Widget by repo plus id, so each is its own row in the pulldown and opens and+closes on its own. adom/adom-vscode ships Claude usage and Codex usage this way because both read+an AI sign-in that lives next to the editor extension; a repo with one thing to show ships one.  | field | meaning | |---|---|@@ -151,8 +155,12 @@ queries re-evaluate by themselves. Hydrogen posts no message on resize. So a pag - re-render on `resize` if its render depends on the size (the shipped helper keeps the last   data and re-renders after 80 ms of quiet, no refetch). -The width Hydrogen gives you is `width_tall` in the full Title Bar and 80 percent of `width`-in the compact one; set both in the manifest to what your rows need. The shipped widgets are+The page decides its own width per layout: after every render and resize, measure your content+and post `window.parent.postMessage({hdWidget: {width: <px>}}, '*')`; Hydrogen sizes the slot to+it (clamped 48..320) and knows which slot from the frame that sent it. The manifest's `width`+(compact) and `width_tall` (full) are only the first guess before your page has measured. So a+tall layout can be narrow (rows stacked) and the compact one wide (one row), which is what the+shipped helper does. The shipped widgets are the reference: adom/adom-vscode `widgets/bin/hydrogen-widget-lib.py` is the page and layout, `hydrogen-widget-claude-usage` and `hydrogen-widget-codex-usage` the data feeds, and adom/hydrogen-bootstrap `bin/hydrogen-widget-clock` the smallest one.