PatchPanel

Upstream servers patched into one MCP URL. The landing hero's one visual; not used anywhere else.

DataServer-rendered

Examples

Example workspace

Live lines have solid cables; a line that needs sign-in is dashed and says so next to its name.

Light

Upstream serversExample workspace

ConnectedGitHubapi.githubcopilot.com/mcp
ConnectedLinearmcp.linear.app/mcp
Sign-in neededNotionmcp.notion.com/mcp

Your agents connect toServinghttps://switchboard.example.com/mcp

Dark

Upstream serversExample workspace

ConnectedGitHubapi.githubcopilot.com/mcp
ConnectedLinearmcp.linear.app/mcp
Sign-in neededNotionmcp.notion.com/mcp

Your agents connect toServinghttps://switchboard.example.com/mcp

Example

Wrap

<PatchPanel
  note="Example workspace"
  url="https://switchboard.example.com/mcp"
  lines={[
    { name: 'GitHub', host: 'api.githubcopilot.com/mcp', state: 'live', status: 'Connected' },
    { name: 'Notion', host: 'mcp.notion.com/mcp', state: 'warn', status: 'Sign-in needed' },
  ]}
/>

Usage

Wrap

import { PatchPanel } from '@switchboard/ui'

<PatchPanel lines={[{ name, host?, state, status }]} url={mcpUrl} note?="Example workspace" />

Props

Every component also takes mix, for css() and mixins applied after its own style.

`PatchPanel`

PatchPanel props
Prop	Type	Default	Description
lines*	{ name; host?; state: LampState; status: string }[]	–	Upstream lines, top to bottom. `status` is the Lamp text.
url*	string	–	The one MCP URL the lines feed (InlineCode).
caption	RemixNode	"Upstream servers"	Figure caption; also names the list.
note	RemixNode	–	Quiet note at the right of the caption.
urlLabel	RemixNode	"Your agents connect to"	Text before the URL.
urlState	LampState	'routed'	Lamp on the output; `routed` glows once on load.
urlStatus	string	"Serving"	The output Lamp's announced text.

Also accepts every <figure> attribute.

Accessibility

A <figure> with a <figcaption>; the lines are a <ul> named by the caption, so each server is announced with its Lamp status.
Cables, jacks and the bus are CSS on aria-hidden spans: nothing decorative is announced.
Static markup. The only motion is the output Lamp's one-shot glow, which is off under prefers-reduced-motion.