SageOx·MCP catalog
v0 snapshot — sourced from the 2026-05-31 mockups. This catalog is hand-seeded from the design explorations, not yet the registry-backed export. The authoritative version is generated in sageox-mono from the live <MCPCardShell> component registry and replaces this page when its publish-design-catalog.sh ships. Rationale + the cross-repo contract: DDR-005.

MCP — SageOx inside other AI tools

The MCP surface is unlike every other SageOx catalog: its components render inside foreign host chrome — ChatGPT, Claude Desktop, VS Code Copilot, Goose — not on a SageOx-owned screen. An MCP App card is a self-contained ui:// asset the host paints; SageOx owns the card, the host owns the frame around it.

Everything here rides the shared <MCPCardShell> Preact pipeline: one chrome (header identity + Open in SageOx escape hatch), semantic tokens, light/dark via data-mode, the same self-healing state set on every card.

host-rendered chatgpt · claude · vs code · goose Preact · ui:// assets source: sageox-mono PR #1494 / #1496

Surfaces

Whole flows as they render. Full-frame captures of the four shipped explorations — the console-side connect hub, the fullscreen control surface, the card gallery, and the persistent PiP launcher.

Connect hub

/connect/mcp

Console surface that gets AI tools talking to SageOx. A featured Best-experience row promotes hosts that render interactive cards (objective capability, not a cohort guess), with an inline Decision Ledger preview, Shiki-highlighted config snippets, and per-client provisioning chips.

MCP connect hub — Best-experience row of card-capable client tiles beside a live Decision Ledger card preview, then effort-grouped tiles below.
Implementor note: the connect hub is a console surface (it lives in apps/web), but it owns MCP-specific components (McpAppCardPreview, ClientTile, the Admin provisioning chip) — they catalog here, not under console.

Session Control Surface — Alt C (canonical)

ui:// · fullscreen

The canonical control surface for an agentic session: read from many sources, write to one, capture to the ledger. Selected sources show as removable chips; ＋ Add source opens a type-to-filter palette, so it never renders dozens of rows. Privacy lock on private KBs; write-target visibility tier spelled out.

Session Control Surface — left rail reads from many KBs and teams via checkboxes, right rail writes to one team via radio, with privacy locks and visibility tiers; below it the in-thread strip, PiP, and every state.
Implementor note: read≠write is the load-bearing distinction — many-select vs one-select is encoded in the control type (multi-select chips/palette vs a single write dropdown), not just labels. Earlier two-rail and owner-grouped studies were removed; Alt C is canonical. Every state (pending / empty / error / abort-confirm) renders below on the live page.

PiP pill launcher

ADR-052 §12

Persistent session anchor: a picture-in-picture pill that holds recording status + the control surface + tools + earned attention. Section C pops the Alt C scope card on launch.

PiP pill launcher — a persistent recording pill that expands to the control surface, tool list, and attention items.
Implementor note: the pill is the one always-present element across a session; everything else is summoned from it. Earned-attention badges follow the DDR-004 Attention Tray severity vocabulary.

Components — shells & surfaces

The reusable frames. Each is host-rendered and rides the shared pipeline.

ComponentKindWhat it is
MCPCardShellshellThe chrome every card inherits: SageOx | <title> header, Open in SageOx ↗ escape hatch, semantic-token theming, data-mode light/dark. Cards supply only their body.
Session Control SurfaceshellTwo-Rail read/write/capture surface for an agentic session. Read rail = multi-select checkboxes; write rail = single-select radio; capture commits to the ledger.
In-thread stripshellAuto-surfaced inline strip (session-start + periodic reminder). The lowest-footprint way a session announces itself in the host thread.
PiP pill launchershellPersistent picture-in-picture anchor holding recording status, the control surface, tools, and earned attention. Everything else summons from it.
McpAppCardPreviewshellConsole-side live preview of a card inside the connect hub — shows, rather than tells, what a card-capable host renders.
ClientTile / ClientBrandIconshellPer-host tile in the connect hub (VS Code, Claude Desktop, ChatGPT, Goose, Copilot Studio) with brand icon, capability copy, and provisioning Admin chip.

Components — app cards

The six shipping cards. Each is a self-contained ui:// asset paintable by any card-capable host.

CardKindSurfaces
Recording InsightscardPer-recording highlights: key moments, decisions, action items — the resting summary of a captured session.
Decision LedgercardInline decision list grounded to timestamps, with AI / Human / owner attribution chips. The card the connect hub previews.
Chapter ScrubbercardTimeline scrub across a recording's chapters — jump to a moment without leaving the host.
RecordingscardList of recordings in scope, each a deep-link into SageOx.
Attention TraycardThe DDR-004 tray as a card: consolidated "what needs my attention," severity-ordered, keyboard-iterable.
Team murmurscardLightweight async signals from teammates surfaced in-session.

Components — card states

Every card and the control surface render the same honest, self-healing state set (DESIGN.md §11.11). No card invents its own.

StateBehavior
pendingWork in flight. Skeleton or progress, never a dead spinner with no end.
emptyNothing yet — says what would fill it and offers the next move, not a blank.
errorHonest failure in user voice with a retry / recover affordance; never a technical stack string.
abort-confirmDestructive / interrupting action gated by an inline confirm, reversible where possible.

Tokens — card palette

The MCP card tokens mirror sageox-design/tokens/colors.yaml (Sage / Copper / Charcoal). Cards ship light + dark; swatches below show the current mode.