TargetBay

One server name patched to several builds (local, staging, prod); the cable sits in the build that answers. The jacks are a radio group, so it works without JavaScript.

DataServer-rendered

Examples

Three builds with a panel each

Pick a jack (click or arrow keys): CSS moves the cable and shows that build's panel. Without :has the default build stays patched. Side by side from 1180px; stacked on phones.

Light

Your agent calls my-server__get_forecast. Pick the build that answers.

Your agentSwitchboardmy-server

local127.0.0.1:3000Answeringstagingstaging.example.devAnsweringprodmcp.example.devAnswering

sb dev

$ sb dev my-server --port 3000

sb use

$ sb use my-server staging
Refreshing staging…
✓ my-server now answers from staging · 9 tools (+1, −0)
  + get_alerts

sb use

$ sb use my-server prod

Dark

Your agent calls my-server__get_forecast. Pick the build that answers.

Your agentSwitchboardmy-server

local127.0.0.1:3000Answeringstagingstaging.example.devAnsweringprodmcp.example.devAnswering

sb dev

$ sb dev my-server --port 3000

sb use

$ sb use my-server staging
Refreshing staging…
✓ my-server now answers from staging · 9 tools (+1, −0)
  + get_alerts

sb use

$ sb use my-server prod

Example

Wrap

<TargetBay
  server="my-server"
  active="staging"
  legend="Pick the build that answers."
  targets={[
    { name: 'local', host: '127.0.0.1:3000', panel: <Terminal … /> },
    { name: 'staging', host: 'staging.example.dev', panel: <Terminal … /> },
    { name: 'prod', host: 'mcp.example.dev' },
  ]}
/>

Usage

Wrap

import { TargetBay } from '@switchboard/ui'

<TargetBay server="my-server" legend="…" targets={[{ name, host, panel? }]} active?="staging" agent?={{ name, icon? }} activeLabel?="Answering" />

Props

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

`TargetBay`

TargetBay props
Prop	Type	Default	Description
server*	string	–	The name the agent uses; shown under the Switchboard tile.
targets*	{ name; host; panel?: RemixNode }[]	–	Builds, top to bottom (left to right on phones). panel shows while that build is chosen.
legend*	RemixNode	–	Visible legend of the radio group: what choosing does.
active	string	–	Target chosen on load and without :has. Default: the first.
agent	{ name: string; icon?: IconName }	{ name: "Your agent", icon: "terminal" }	Left end of the board.
activeLabel	string	"Answering"	Text on the chosen jack.

Also accepts every <div> attribute. Up to four targets.

Accessibility

A <fieldset> with a visible <legend>; each jack is a <label> around a native radio (arrow keys move between builds, focus ring on the jack).
The drawing (tiles, cables) is aria-hidden; the chosen build is the checked radio, and its "Answering" text is visibility-hidden on the others.
Cables fade in and out (no movement); the global reduced-motion rule makes it instant.

TargetBay

Examples

Three builds with a panel each

Usage

Props

`TargetBay`

Accessibility

Guidance

Do

Don’t