Adom Hydrogen (platform base)

@@ -30,20 +30,28 @@ html,body{margin:0;height:100%%;background:transparent;color:#e6ebef;font-family   .mark{width:clamp(10px,55vh,17px);height:clamp(10px,55vh,17px)} } @media (min-height:34px){+  /* Tall: rows stacked. Columns take their natural width (label, value) and the bar takes the+     rest, so nothing is ever clipped whatever the slot width; a long label is trimmed with an+     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}-  .row{display:grid;grid-template-columns:2.8em 1fr 2.6em;gap:5px}-  .lbl{font-size:7.5px}.bar{width:auto;height:5px}.v{font-size:9px}-  .big{font-size:15px}.err{font-size:9px}+  .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}+  .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} }+@media (max-height:33px){ .err{overflow:hidden;text-overflow:ellipsis;max-width:100%%} } </style><body><div class="w"><span class="mark" style="color:%(mark_color)s">%(mark_svg)s</span><div class="rows" id="w">%(title)s…</div></div> <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>`;}-async function tick(){try{const r=await fetch('/data.json',{cache:'no-store'});const d=await r.json();document.getElementById('w').innerHTML=%(render_js)s;}catch(e){document.getElementById('w').innerHTML='<span class="err">no data</span>';}}+function render(d){document.getElementById('w').innerHTML=%(render_js)s;}+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();}}); tick();if(!document.hidden)arm();+/* The slot resizes when the Title Bar goes compact or tall; the iframe's own window gets the resize event and the+   height media queries above re-evaluate. Re-render too, for widgets whose render depends on the size. */+let rz=null;window.addEventListener('resize',()=>{clearTimeout(rz);rz=setTimeout(()=>{if(window.__last)render(window.__last);},80);}); </script></body>"""  def serve(title, data_fn, render_js, refresh_ms=60000, mark=None):

@@ -4,7 +4,7 @@   "type": "bootstrap",   "title": "Adom Hydrogen (platform base)",   "brief": "Layer Hydrogen's workspace onto a standard Adom workstation.",-  "version": "0.5.39",+  "version": "0.5.40",   "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": [

@@ -4,7 +4,7 @@   "type": "bootstrap",   "title": "Adom Hydrogen (platform base)",   "brief": "Layer Hydrogen's workspace onto a standard Adom workstation.",-  "version": "0.5.39",+  "version": "0.5.40",   "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+}

@@ -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.2.0+version: 1.3.0 ---  # hydrogen-widget: small live panels in Hydrogen Desktop's Title Bar@@ -123,6 +123,26 @@ Size your page by its height, never in fixed px: `@media (min-height: 34px)` sta `clamp()` font sizes. Transparent background, no scrollbars. The shipped helper does this; copy it. +### Resizing: who tells the page++Nobody has to. The slot is an iframe; when the Title Bar goes compact or tall, Hydrogen resizes+the slot and the iframe's own `window` gets a normal `resize` event, and any height media+queries re-evaluate by themselves. Hydrogen posts no message on resize. So a page must:++- size itself by its own `innerHeight`/`innerWidth` (or the height media queries above), never+  by fixed pixel widths;+- give every column a natural width and let one flexible column absorb the rest+  (`grid-template-columns: auto minmax(14px, 1fr) auto`), so a value is never clipped when the+  slot is narrow; trim long labels with an ellipsis instead;+- 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 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.+ ### Listing it  - **Your checkout**: any repo under `~/project` (one clone folder down too) with a