bootstrap
Adom Hydrogen (platform base)
Public Made by Adomby adom
Layer Hydrogen's workspace onto a standard Adom workstation.
← Commit history
0.5.48: narrow tall layout, no empty mark span, clock pictures
6 files changed
+13−10
bin/hydrogen-widget-lib.py+9−6@@ -33,14 +33,17 @@ html,body{margin:0;height:100%%;background:transparent;color:#e6ebef;font-family /* 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}+ /* Narrow on purpose (John 2026-09-14: "make this 1/3rd the width"): the bar is a short gauge,+ not a ruler; the label and value carry the number. About 90 px for three rows with a mark. */+ .w{font-size:8px;line-height:1;padding:1px 4px;gap:4px}+ .mark{width:13px;height:13px} .rows{flex-direction:column;align-items:stretch;justify-content:center;gap:2px;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}.row .lbl{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;max-width:130px}+ .row{display:grid;grid-template-columns:auto minmax(18px,1fr) auto;align-items:center;gap:3px;min-width:0}+ .lbl{font-size:6.5px}.row .lbl{max-width:4.2em;overflow:hidden;text-overflow:ellipsis}.bar{width:auto;height:4px}.v{font-size:8px;min-width:0}+ .big{font-size:14px}.err{font-size:8px;white-space:normal;line-height:1.1;max-width:96px} } @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>+</style><body><div class="w">%(mark_html)s<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>`;}@@ -104,7 +107,7 @@ def serve(title, data_fn, render_js, refresh_ms=60000, mark=None): 'const f=document.getElementById("w");f.dataset.w=m.width;if(!fixed)f.style.width=Math.max(48,Math.min(640,m.width))+"px";});</script></body>') % (title, w, h, 'true' if fixed else 'false') self._send(200, 'text/html; charset=utf-8', page.encode()) elif self.path.startswith('/health'): self._send(200, 'application/json', b'{"ok":true}')- else: self._send(200, 'text/html; charset=utf-8', (PAGE % {'title': title, 'refresh_ms': refresh_ms, 'render_js': render_js, 'mark_svg': ('<svg viewBox="0 0 16 16">' + mark['svg'] + '</svg>') if mark['svg'] else '', 'mark_color': mark['color']}).encode())+ else: self._send(200, 'text/html; charset=utf-8', (PAGE % {'title': title, 'refresh_ms': refresh_ms, 'render_js': render_js, 'mark_html': ('<span class="mark" style="color:%s"><svg viewBox="0 0 16 16">%s</svg></span>' % (mark['color'], mark['svg'])) if (mark and mark.get('svg')) else ''}).encode()) # Bind with retries: a previous instance Hydrogen just stopped may still be releasing the # port for a moment. Ten tries over five seconds, then give up loudly (the log says why). ThreadingHTTPServer.allow_reuse_address = True
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.47",+ "version": "0.5.48", "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.47",+ "version": "0.5.48", "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" ]-}+}
widgets/README.md+1−1@@ -21,7 +21,7 @@ widgets/README.md this page (linked from the pulldown row) ## How it sizes itself -The helper's page has two layouts chosen by the slot's height (stacked above 33 px, one row below), and after every render it measures itself on a hidden copy laid out at max-content and posts `{hdWidget:{width}}` to Hydrogen, which resizes the slot. The pictures above are that measurement: the clock asks for about 84 px tall and 106 px compact. The helper also serves `/preview?h=38` and `/preview?h=20`, its own page in a frame that follows the requested width; the pictures were made from those with headless Chrome at three times scale.+The helper's page has two layouts chosen by the slot's height (stacked above 33 px, one row below), and after every render it measures itself on a hidden copy laid out at max-content and posts `{hdWidget:{width}}` to Hydrogen, which resizes the slot. The pictures above are that measurement: the clock asks for about 55 px tall and 90 px compact. The helper also serves `/preview?h=38` and `/preview?h=20`, its own page in a frame that follows the requested width; the pictures were made from those with headless Chrome at three times scale. ## Copy it
widgets/docs/clock-compact.png⋯ 1 unchanged line ⋯
widgets/docs/clock.png⋯ 1 unchanged line ⋯