ConnectionPlate
The picture at the top of the OAuth pages: an app patched into Switchboard, with the cable between them.
Examples
Asking to connect (consent)
The cable draws itself once, then the lamp lights. Instant under reduced motion.
Light
CClaude CodeSwitchboard
Dark
CClaude CodeSwitchboard
<ConnectionPlate from={{ name: details.clientName, logo }} state="pending" label="… asks to connect to Switchboard" />Connected and not connected
live: the popup result after a server sign-in. broken: OAuth errors; the cable is dashed and pulled apart.
Light
LinearSwitchboard
Your agentSwitchboard
Dark
LinearSwitchboard
Your agentSwitchboard
<ConnectionPlate from={{ name: 'Your server', icon: 'server' }} state="live" label="…" />
<ConnectionPlate from={{ name: 'Your agent', icon: 'terminal' }} state="broken" label="…" />Usage
import { ConnectionPlate } from '@switchboard/ui'
import { ConnectionPlate } from '@switchboard/ui'Props
Every component also takes mix, for css() and mixins applied after its own style.
ConnectionPlate
| Prop | Type | Default | Description |
|---|---|---|---|
| from* | { name, logo?, icon? } | – | The app. No logo or icon: a monogram of its name. |
| to | { name, logo?, icon? } | – | The far end. Default: Switchboard’s jack field. |
| state* | 'pending' | 'live' | 'broken' | – | Lamp color and cable style. |
| label* | string | – | What the picture says, for screen readers. |
Also accepts every <div> attribute except role.
Accessibility
- One role="img" with an aria-label; the parts inside are presentational.
- The page heading still says it in words.
Guidance
Do
- Pass a logo only for a verified (CIMD) client.
Don’t
- Use it as decoration on pages that do not connect anything.