Summary
Display the web client's version — the version field from clients/web/package.json — in the lower-right corner of the web UI, in grey (subdued/dimmed) text. This matches what the CLI and TUI already show and gives web users an at-a-glance build identifier.
Background
The CLI and TUI both surface their version by reading their own package.json at runtime:
- CLI —
clients/cli/src/cli.ts reads ../package.json for the client identity (name/version).
- TUI —
clients/tui/src/App.tsx reads package.json and renders v{packageJson.version} in its header.
The web client shows no version today. There is no shared core/ helper that reads a version — each client does its own ad-hoc read — so we either add a small shared reader or (simpler) have the web backend read it and hand the value to the browser.
Suggested approach (backend reads, passes to client)
The browser can't read the filesystem, so the natural path is to have the Node backend read clients/web/package.json (as CLI/TUI do) and pass the version through the existing initial-config channel:
- Add
version?: string to InitialConfigPayload (core/mcp/remote/node/server.ts) — the shape returned by GET /api/config.
- Populate it in the backend.
webServerConfigToInitialPayload() in clients/web/server/web-server-config.ts builds that payload; have it (or its caller in server.ts / vite-hono-plugin.ts) read the web package.json version and set it. Reading it there keeps the fs access on the Node side, mirroring the CLI/TUI reads.
- Optional cleanup: factor the "read a client's package.json version" logic into a tiny shared helper (e.g. under
core/) that CLI, TUI, and the web backend all use, instead of three separate reads. Nice-to-have, not required.
- Consume it in the browser. The app already reads
GET /api/config (see useServerListWritable / useSandboxUrl). Expose version the same way and render it.
UI
- Position: fixed lower-right corner of the screen.
- Style: grey / dimmed, small — unobtrusive. Use an
--inspector-* text token (e.g. a muted/secondary text color), not a raw hex/rgba literal, per the Mantine styling rules in AGENTS.md. Prefer a Mantine Text with theme props over a CSS class.
- Content: e.g.
v2.0.0 (or v{version}).
- Must not overlap/obscure interactive controls; should sit above content but out of the way.
Acceptance
- The web UI shows the
clients/web/package.json version in the lower-right corner, in grey.
- The value is sourced from the real
package.json version (not hard-coded), surfaced via the backend → GET /api/config → browser path (or an agreed equivalent).
- Styling uses Mantine props +
--inspector-* tokens (no raw color literals, no inline styles).
- Tests cover the new payload field and the rendered version (unit/Storybook as appropriate), keeping the per-file ≥90% coverage gate.
Summary
Display the web client's version — the
versionfield fromclients/web/package.json— in the lower-right corner of the web UI, in grey (subdued/dimmed) text. This matches what the CLI and TUI already show and gives web users an at-a-glance build identifier.Background
The CLI and TUI both surface their version by reading their own
package.jsonat runtime:clients/cli/src/cli.tsreads../package.jsonfor the client identity (name/version).clients/tui/src/App.tsxreadspackage.jsonand rendersv{packageJson.version}in its header.The web client shows no version today. There is no shared
core/helper that reads a version — each client does its own ad-hoc read — so we either add a small shared reader or (simpler) have the web backend read it and hand the value to the browser.Suggested approach (backend reads, passes to client)
The browser can't read the filesystem, so the natural path is to have the Node backend read
clients/web/package.json(as CLI/TUI do) and pass the version through the existing initial-config channel:version?: stringtoInitialConfigPayload(core/mcp/remote/node/server.ts) — the shape returned byGET /api/config.webServerConfigToInitialPayload()inclients/web/server/web-server-config.tsbuilds that payload; have it (or its caller inserver.ts/vite-hono-plugin.ts) read the webpackage.jsonversionand set it. Reading it there keeps the fs access on the Node side, mirroring the CLI/TUI reads.core/) that CLI, TUI, and the web backend all use, instead of three separate reads. Nice-to-have, not required.GET /api/config(seeuseServerListWritable/useSandboxUrl). Exposeversionthe same way and render it.UI
--inspector-*text token (e.g. a muted/secondary text color), not a raw hex/rgbaliteral, per the Mantine styling rules inAGENTS.md. Prefer a MantineTextwith theme props over a CSS class.v2.0.0(orv{version}).Acceptance
clients/web/package.jsonversion in the lower-right corner, in grey.package.jsonversion (not hard-coded), surfaced via the backend →GET /api/config→ browser path (or an agreed equivalent).--inspector-*tokens (no raw color literals, no inline styles).