feat(ui): consume the design tokens and publish the tool surface

[ribdsp]

Two changes that could not be separated: the WebMCP registration fix and the UI work both land in app/tool-surface.tsx.

The bug this fixes

Per the W3C spec (webmachinelearning/webmcp, index.bs:605) registerTool returns Promise<undefined> and reports every failure by rejecting, not throwing:

• SecurityError — document is not origin-keyed
• NotAllowedError — the tools permission policy forbids it
• rejection for a duplicate name, an empty description, or an invalid schema

The synchronous try/catch around it caught none of those. All sixteen names were recorded as registered regardless, and the banner could report "WebMCP live · 16 tools" over a page with nothing agent-callable — the exact failure next.config.mjs warns about, in the one place that could not detect it.

Registration is now awaited, and a name is recorded only once its promise resolves. ToolSurface guards React 19's double mount so the aborted first pass cannot overwrite the second pass's real result.

types/webmcp.d.ts is widened to the spec: getTools(), the second options argument on execute, title, and annotations. Ten tools carry annotations — readOnlyHint where a tool only reads, untrustedContentHint where its result carries text or DOM taken from the recording, which is content we do not control.

Design tokens

tailwind.config.ts defined a palette with a rationale per choice and zero consumers; 22 files used raw zinc-* / amber-* instead, which is why the UI read as generic grey rather than deliberate near-black. Migrated call site by call site rather than swept, since zinc-800 was a fill in some places and a border in others.

human and agent stay authorship-only, so a control either party drives gets ink plus a non-colour affordance instead of a tint.

Hierarchy and icons

New SectionHeading with three ranks. The headings were text-muted, dimmer than their own body copy; they now outrank it. Icons normalised to size={12}, strokeWidth={1.5}, one glyph per severity, and omitted wherever a glyph would only be decoration.

WebMCP panel

New WebMcpBadge, docked bottom-right above the timeline, following the pattern OpenAI's own WebMCP showcases use: a one-line definition, an access statement, a grid of tool cards, and "Try asking" prompts a judge can paste into ChatGPT's in-app browser.

The list comes from document.modelContext.getTools() and re-reads on toolchange, so it reflects the host rather than our own array. Degraded states render as a div rather than a button, so amber and red cannot be dismissed.

Verification

npx tsc --noEmit    clean
npm test            23 files, 289 passed (289)

No assertion weakened, no test skipped.

Test plan

• Open traces.ribdsp.com in ChatGPT Desktop's in-app browser and confirm 16 tools
• Confirm the badge panel lists all 16 with correct names from the host
• Confirm the collapsed badge cannot hide an amber or red state
• Confirm no scrolling at 1280×720

Known, not fixed here

• npm run lint is unusable: next lint is deprecated in Next 15.5 and there is no ESLint config. Pre-existing; the fix lives in package.json.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
traces	Ready	Preview	Aug 28, 2026 5:58pm