Adom Hydrogen
Public Made by Adomby adom
The whole Adom experience as one signed native app: your editor, your AI agent, and the full electronics design toolchain, running locally on your own machine.
| Name | Last updated |
|---|---|
| README.md | 8d ago |
| title-bar-compact.png | 1mo ago |
| title-bar-widgets.png | 1mo ago |
| who-draws-what.svg | 8d ago |
| widgets-pulldown.png | 1mo ago |
Hydrogen Widgets: small live panels in the Title Bar
Compact Title Bar, one row per Hydrogen Widget:
The Hydrogen Widgets pulldown:
The bar across the top of the Hydrogen window is the Title Bar (the Adom menu, the meters, the Hydrogen Widgets, the bell, your avatar and the window controls); the chevron at the top edge makes it the compact Title Bar. Left of the bell there is a puzzle-piece icon, Hydrogen Widgets. Open one from that pulldown and a small panel appears in the Title Bar, served by a program running inside your workspace and shown in a sandboxed slot sized to the bar, full or compact. It stays open across restarts, per user, and closes from the same pulldown or the small x that appears when you hover it. The last row of the pulldown, "Make your own Hydrogen Widget", opens this page.
Each slot is exactly as wide as its Hydrogen Widget asks for in that layout: the page measures its own content after every render and tells Hydrogen, so a stacked Claude usage is about 90 px in the full Title Bar and one row of it about 240 px in the compact one, with no empty space either side.
The Claude and Codex Hydrogen Widgets carry their vendor marks, the same artwork the editor's AI launch bar uses, so you can tell whose numbers you are looking at.
The three that ship
| Hydrogen Widget | Shows | Where the numbers come from |
|---|---|---|
| Claude usage | your 5-hour session, your weekly limit, and the weekly model bucket that applies, as percent used | the Claude Code sign-in in your workspace, the same numbers Claude Code shows in /usage |
| Codex usage | your plan's rate-limit window as percent used, plus a secondary window when the plan has one | the Codex sign-in in your workspace, what Codex shows in /status |
| Clock | the time and date | the workspace clock; the smallest possible Hydrogen Widget, the one to copy |
A Hydrogen Widget with nothing to show says so in its slot ("sign in to Codex in this workspace") rather than staying blank.
Driving it from an AI
Nothing in the pulldown needs a mouse. On Hydrogen's control API:
| Route | What it does |
|---|---|
GET /widgets |
the list, with open, status (closed, installing, starting, live, failed) and url per Hydrogen Widget |
POST /widgets/open {"id":"claude-usage"} |
mounts the slot, installs the Hydrogen Widget's package, launches it, hands the slot over when its page answers |
POST /widgets/close {"id":"..."} |
unmounts the slot and stops the program |
POST /widgets/navigate {"id":"...","url":"..."} |
points an open slot at a page yourself |
POST /widgets/refresh |
re-reads the list from the wiki and your checkout |
POST /widgets/menu {"open":true} |
shows or hides the pulldown |
GET /widgets/status |
open ids, each Hydrogen Widget's status and url, the pulldown state |
UI-bus commands widgets.menu.open and widgets.menu.close do the same as the pulldown click.
Each Hydrogen Widget's own page
Every row in the Hydrogen Widgets pulldown links to that Hydrogen Widget's page on its wiki repo (the docs field in its
manifest, widgets/README.md by default): a picture of it in the full and compact Title Bar, what
it shows and where the numbers come from, how often it asks, the files in the repo that make it a
Hydrogen Widget, and a link to the SDK. The shipped ones: Claude and Codex usage
and Clock.
Private Hydrogen Widgets
Hydrogen reads the Hydrogen Widget list and every manifest with your own sign-in, so a Hydrogen Widget on a private
wiki repo shows for the people the page is shared with and nobody else. Keep a repo private with
adom-wiki page create --private and share it with adom-wiki page share; a private Hydrogen Widget comes
from your checkout or your own list, not from the curated one.
Several Hydrogen Widgets from one repo
A repo's hydrogen-widget.json is either one Hydrogen Widget or {"widgets": [ ... ]} with
several, each with its own id, name, mark, launch command and port, sharing the repo's package
and page. adom/adom-vscode ships Claude usage and Codex usage that way; the curated list names
each by repo plus id, so they are separate rows in the pulldown and open and close on their own.
Who draws what: the widget's two canvases
A Hydrogen Widget has two canvases, and everything inside them is yours. Everything around them is Hydrogen's.
| Part | Who draws it | How you control it |
|---|---|---|
| Slot canvas (everything inside the slot) | your widget | your page at launch.port; draw anything |
| Slot width | your widget | postMessage({hdWidget: {width}}) after each render, 48 to 320 px; the manifest's width / width_tall are only the first guess |
| Slot height | Hydrogen | 38 px in the full Title Bar, 20 px compact; pick your layout by height |
| Slot edge, close button | Hydrogen | |
| Card canvas (the live view in the hover card) | your widget | postMessage({hdWidget: {expand: {width, height, path}}}), 280 to 720 by 120 to 600 px; the card loads a second copy of your page, or the page at path on your own origin, and your page picks its big layout by height |
Card body with no expand |
Hydrogen | shows your brief as text |
| Card frame, header (name and icon), pin, Details | Hydrogen | filled from your name, icon, about, refresh, docs; Details adds the port, the log and the links |
| When the card shows | Hydrogen | 1.2 s of hover, click to pin, Escape or click outside to close; forward Escape from inside your page with {hdWidget: {collapse: true}} |
| Pulldown row | Hydrogen | your name, icon, brief, docs |
| Install, launch, health, restart | Hydrogen | your install, launch and health |
The rule: anything inside a canvas changes the moment you publish your package, with no Hydrogen release. Anything outside one changes only with a Hydrogen release, which is why it is kept to chrome that every widget shares.
Before Hydrogen 1.0.609 the card did not load its own copy: it moved the slot's frame into the card, so the slot was left empty and Hydrogen drew a stand-in there ("Codex usage / Expanded below"), clipped in a narrow slot. From 1.0.609 the slot always shows your page, and Hydrogen draws nothing inside either canvas.
Making your own
A Hydrogen Widget is a facet a wiki repo carries: a hydrogen-widget.json at its root, next to its dock
manifest or its project workspace, or on its own. Any repo in your checkout with that file
shows up in the pulldown at once, marked "(checkout)", so you can build one without publishing.
To put it in front of everyone: publish the repo, then file an issue on the
adom/hydrogen-bootstrap page titled
List widget: <owner>/<repo> with a line about what it shows and a picture of the slot (its
/preview?h=38). The maintainers add it to widgets/widgets.json, the curated list every
Hydrogen reads, and it appears in every user's pulldown at their next refresh. Your AI can file
that issue for you (adom-wiki issue create adom/hydrogen-bootstrap --title "List widget: <owner>/<repo>").
The hydrogen-widget skill
has the manifest fields, the launch contract (HYDROGEN_WIDGET_ID, HYDROGEN_WIDGET_PORT,
HYDROGEN_WIDGET_SLOT, the health URL and the explicit takeover) and the fifty-line clock to
copy. Your AI already has that skill.
Why the name
wiki-widget is the component-page kind, and other surfaces will get their own (kicad-widget, fusion-widget). A Hydrogen Widget is only ever the Title Bar.