# Switchyard — AI Agent Dashboard Template Next.js

> For teams running multi-agent products: an AI agent dashboard template Nextjs developers get as one console: workflows, runs, approvals and evals. 20 routes.

- Price: $39, one-time
- License: Standard
- Version: 1.7.2
- Category: Dashboard
- Editions: React, HTML
- Dark mode: Yes
- Stack: Next.js >=15 <17, React >=19 <20, Tailwind CSS >=4 <5
- Dependencies: `lucide-react`, `recharts`

## What's inside

- 20 pages
- 47 components
- 79 design tokens plus 79 dark overrides

## Pages

| Path | Sections |
| --- | --- |
| `/` | `app-shell`, `operations-overview`, `workflow-stitch-preview`, `safety-summary` |
| `/workflows` | `app-shell`, `workflow-browser` |
| `/workflow` | `app-shell`, `workflow-canvas` |
| `/templates` | `app-shell`, `template-library` |
| `/runs` | `app-shell`, `run-ledger` |
| `/run` | `app-shell`, `execution-trace` |
| `/approvals` | `app-shell`, `approval-queue` |
| `/chat` | `app-shell`, `chat-workspace` |
| `/agents` | `app-shell`, `agent-roster` |
| `/agent` | `app-shell`, `agent-config` |
| `/evals` | `app-shell`, `eval-suite` |
| `/eval` | `app-shell`, `eval-header`, `score-comparison`, `failure-clusters`, `eval-case-table`, `revision-diff`, `promotion-decision` |
| `/tools` | `app-shell`, `tool-catalog` |
| `/knowledge` | `app-shell`, `knowledge-library` |
| `/guardrails` | `app-shell`, `guardrail-bench` |
| `/activity` | `app-shell`, `activity-log` |
| `/usage` | `app-shell`, `usage-report` |
| `/api-keys` | `app-shell`, `api-key-console` |
| `/settings` | `app-shell`, `settings-console` |
| `/components` | `app-shell`, `operations-overview`, `workflow-stitch-preview`, `safety-summary`, `workflow-browser`, `workflow-canvas`, `template-library`, `run-ledger`, `execution-trace`, `approval-queue`, `chat-workspace`, `agent-roster`, `agent-config`, `eval-suite`, `eval-header`, `score-comparison`, `failure-clusters`, `eval-case-table`, `revision-diff`, `promotion-decision`, `tool-catalog`, `knowledge-library`, `guardrail-bench`, `activity-log`, `usage-report`, `api-key-console`, `settings-console`, `ui` |

## Components

| Name | What it renders |
| --- | --- |
| `app-shell` | Product navigation composed through the shared dashboard-layout boundary: labelled 216px rail, responsive disclosure, workflow context, fixture status, page heading, actions, and footer. |
| `operations-overview` | Active-run hero, derived operating measures, and the human attention queue with explicit running and waiting states. |
| `workflow-stitch-preview` | Compact execution stitch derived from canonical Wire nodes, with a running position, stable node types, and text alternative. |
| `safety-summary` | Boundary report for blocking tests, human decisions, unconfirmed writes, and the next guardrail fixture. |
| `workflow-browser` | Filterable workflow register with revision, state, run count, pass rate, change time, and honest local actions. |
| `workflow-canvas` | Canonical Wire canvas with selectable nodes, branches, evidence loop, canvas and JSON views, inspector tabs, validation, and local viewport controls. |
| `template-library` | Workflow recipe library naming included gates, tools, and node count with preview and local-draft actions. |
| `run-ledger` | Status-filtered run table with request, current node, elapsed time, steps, cost, designed empty state, and route links. |
| `execution-trace` | Chronological reading of the canonical topology with expandable step evidence, timing, cost, human review, and write confirmation. |
| `approval-queue` | Human decision queue with policy evidence, spend threshold, operator note, and local approval or return previews that preserve the blocked fixture. |
| `chat-workspace` | Evidence-backed message history, tool-boundary context, composer, and local preview-response interaction. |
| `agent-roster` | Six-agent operational roster with model, readiness, tools, latency, success rate, spend, and configuration links. |
| `agent-config` | Selected agent identity, lifted Wire node, model and runtime controls, prompt, tools, knowledge, guardrails, and local draft status. |
| `eval-suite` | Evaluation register and local fixture runner with target agent, evaluated/expected coverage, joined score delta, preview outcome, detail link, and designed idle state. |
| `eval-header` | EV-11 identity, explicit model revisions, provenance-derived current/stale/superseded metadata and read-only language, run evidence, and the unique blocker count as the sole oversized number. |
| `score-comparison` | Matched-case pass comparison, independent latency and cost pair cohorts, separate 24/24 versus 23/24 coverage, derived narrative, truthful Recharts, and a captioned exact table. |
| `failure-clusters` | Baseline-to-candidate unresolved counts only with explicit side provenance, signed deltas, direct labels, non-color cues, linked exact IDs, and an actual empty variant; access review stays separate. |
| `eval-case-table` | Permission-projected captioned cases with neutral sort cues, instance-local search, sticky mobile identity, 25-row pagination, page-aware hash focus across a real 500-row specimen, protected redaction, and recovery. |
| `revision-diff` | Permission-aware baseline and candidate prompt, explicit model revision, tool, and guardrail comparison with changed, unchanged, partial, and denied variants. |
| `promotion-decision` | Set-derived blocker rules and default note, local receipt and focus recovery, disabled error submission, denied decisions, and stale or superseded read-only states returning to the register. |
| `tool-catalog` | Ten-tool connector catalog showing normalized IDs, read, write, and confirmation boundaries, connection state, agent consumers, and fixture tests. |
| `knowledge-library` | Retrieval collections with source, document count, freshness, agent access, search preview, and an empty-result state. |
| `guardrail-bench` | Policy list and local fixture bench for blocking, routing, and flagging rules with redundant test outcomes. |
| `activity-log` | Searchable and filterable workspace audit ledger for draft, fixture, policy, and access events with desktop table and mobile list. |
| `usage-report` | Seven-day authored usage figure for runs, tokens, and cost with semantic SVG marks, generated text alternative, and an equivalent table twin. |
| `api-key-console` | Masked API key register with scope badges and local-only create, revoke, and reset previews that never generate or reveal a secret. |
| `settings-console` | Model routing, fallback order, token and spend budgets, environment selection, review defaults, and local draft save. |
| `ui/button` | Shared primitive: Button and ButtonLink in primary, secondary and ghost, sized from the buttonClasses helper so a link and a button are the same object. |
| `ui/badge` | Shared primitives: Badge pill across its tones, StatusBadge for run and policy outcomes, and the Eyebrow label that opens a panel. |
| `ui/panel` | Shared primitive: Panel container with PanelHeader and PanelFooter — the console's only grouping device. |
| `ui/fields` | Shared form primitives: Field wrapper, Input, Select, Textarea and Toggle, carrying the label, description and invalid treatments the console's forms are built from. |
| `ui/metric` | Shared primitive: the Metric figure — one number, its label and its qualifier, set in tabular numerals. |
| `ui/dashboard-layout` | Shared primitive: the DashboardLayout boundary every application route mounts inside, owning the rail, the header and the scroll region. |
| `ui/mode-toggle` | Shared primitive: the ModeToggle control that switches light and dark and persists the choice. |
| `ui/brand` | Shared primitive: the SwitchyardMark brand-mark, the one place the product's identity is drawn. |
| `ui/dialog` | Shared primitive: the modal Dialog and its flat DialogPanel, on the tt-ui layer — Escape closes, focus is trapped and returned, the scrim is a named dismissal target and the panel is the console’s own card. |
| `ui/confirm-dialog` | Shared primitive: the alertdialog behind every irreversible preview — the consequence sentence is what aria-describedby names, and the cancel control holds focus on open. |
| `ui/dropdown-menu` | Shared primitive: the 40px row menu with roving arrow keys, Home and End, a mono qualifier column, and card ink even when the trigger sits in the dark rail. |
| `ui/tooltip` | Shared primitive: the flat arrowless bubble behind an 80ms intent gate, described rather than expanded, dismissed by Escape through the layer stack. |
| `ui/toast` | Shared primitive: the bottom-right receipt stub — a bordered tone pill carrying a glyph and a word, a capped polite queue, and a named dismiss on every card. |
| `ui/skeleton` | Shared primitive: the placeholder block, the line stack and the busy region that speaks its wait once, going solid rather than still under reduced motion. |
| `ui/progress` | Shared primitive: the Progress meter with role="progressbar", its printed value and a tone derived from the fixture rather than decoration. |
| `ui/tabs` | Shared primitive: Tabs and TabPanel in underline and segmented appearances, with roving tabindex and arrow, Home and End keys. |
| `ui/date-picker` | Shared primitive: the DatePicker field and its Calendar surface, keyboard navigable and opened on the value it was handed rather than on today. |
| `ui/rail-workspace` | Shared primitive: the navigation rail's workspace trigger and the menu of workspace-scoped routes it opens. |
| `ui/sort-head` | Shared primitive: the sortable column head with neutral arrows, a spoken sort hint, and aria-sort on the ordered column only. |
| `ui/pagination` | Shared primitive: the ends-only page strip over a bounded fixture set, printing the row range beside the two controls. |
## Design tokens

| Token | Light | Dark override |
| --- | --- | --- |
| `--background` | `#f4f5f6` | `#0b0c0e` |
| `--foreground` | `#17181b` | `#e5e7eb` |
| `--card` | `#ffffff` | `#16181b` |
| `--card-foreground` | `#17181b` | `#e5e7eb` |
| `--primary` | `#07527e` | `#71b7e6` |
| `--primary-foreground` | `#f5f9ff` | `#06131b` |
| `--primary-hover` | `#003f63` | `#8acbf2` |
| `--primary-active` | `#002f4b` | `#a4dafe` |
| `--primary-soft` | `#dbeaf2` | `#102b3b` |
| `--primary-border` | `#7699b1` | `#315c73` |
| `--secondary` | `#e4e6e9` | `#22252a` |
| `--secondary-foreground` | `#292b2f` | `#d6d9de` |
| `--muted` | `#edeff1` | `#111316` |
| `--muted-foreground` | `#5c626a` | `#9ca3ad` |
| `--accent` | `#4f3476` | `#bb9af4` |
| `--accent-foreground` | `#f5f4fd` | `#110c1a` |
| `--accent-hover` | `#3f275f` | `#c9adf8` |
| `--accent-active` | `#311c4c` | `#d8c1fb` |
| `--accent-soft` | `#eee8f5` | `#2b1f3b` |
| `--accent-border` | `#b9a5cd` | `#685286` |
| `--border` | `#d1d5da` | `#30343a` |
| `--ring` | `#07527e` | `#71b7e6` |
| `--control-border` | `#b3b9c1` | `#474d55` |
| `--control-border-strong` | `#818892` | `#616872` |
| `--field` | `#fafafa` | `#101215` |
| `--field-border` | `#cdd3d9` | `#2f343b` |
| `--surface-tint` | `#daecfb` | `#1a3345` |
| `--selection` | `#e1e4e8` | `#24282d` |
| `--selection-border` | `#737b84` | `#737b84` |
| `--rail` | `#11161c` | `#080a0c` |
| `--rail-foreground` | `#f1f3f5` | `#eef0f2` |
| `--rail-muted` | `#a3abb4` | `#9da4ad` |
| `--rail-card` | `#1a2027` | `#14181d` |
| `--rail-plate-border` | `#303842` | `#2e3640` |
| `--rail-border` | `#4a545f` | `#47505b` |
| `--rail-hover` | `#202730` | `#1c2228` |
| `--rail-selection` | `#26313b` | `#222c34` |
| `--rail-selection-border` | `#6d8294` | `#657d91` |
| `--rail-primary` | `#86c9f1` | `#86c9f1` |
| `--shadow-color` | `#090b0e` | `#000000` |
| `--positive` | `#1f5a32` | `#79c98c` |
| `--positive-foreground` | `#f2fff5` | `#06170a` |
| `--positive-soft` | `#e6f2e9` | `#122a1a` |
| `--positive-border` | `#97b7a0` | `#3d7048` |
| `--warning` | `#714000` | `#f0b65b` |
| `--warning-foreground` | `#fff8e9` | `#211300` |
| `--warning-soft` | `#fbefd9` | `#30230e` |
| `--warning-border` | `#c7a36a` | `#806335` |
| `--critical` | `#7b2638` | `#f19aae` |
| `--critical-foreground` | `#fff5f7` | `#240711` |
| `--critical-soft` | `#f7e7ea` | `#32151d` |
| `--critical-border` | `#c79aa4` | `#7d4654` |
| `--radius` | `0.375rem` | `0.375rem` |
| `--display-weight` | `580` | `580` |
| `--text-caption` | `0.75rem` | `0.75rem` |
| `--leading-caption` | `1.4` | `1.4` |
| `--text-small` | `0.875rem` | `0.875rem` |
| `--leading-small` | `1.45` | `1.45` |
| `--text-body` | `1rem` | `1rem` |
| `--leading-body` | `1.55` | `1.55` |
| `--text-lead` | `1.125rem` | `1.125rem` |
| `--leading-lead` | `1.55` | `1.55` |
| `--text-d1` | `1.5rem` | `1.5rem` |
| `--leading-d1` | `1.22` | `1.22` |
| `--text-d2` | `1.8rem` | `1.8rem` |
| `--leading-d2` | `1.16` | `1.16` |
| `--text-d3` | `clamp(2rem, 1.9rem + 0.43vw, 2.16rem)` | `clamp(2rem, 1.9rem + 0.43vw, 2.16rem)` |
| `--leading-d3` | `1.1` | `1.1` |
| `--text-d4` | `clamp(2.35rem, 2.2rem + 0.65vw, 2.592rem)` | `clamp(2.35rem, 2.2rem + 0.65vw, 2.592rem)` |
| `--leading-d4` | `1.04` | `1.04` |
| `--tracking-d1` | `-0.01em` | `-0.01em` |
| `--tracking-d2` | `-0.015em` | `-0.015em` |
| `--tracking-d3` | `-0.02em` | `-0.02em` |
| `--tracking-d4` | `-0.025em` | `-0.025em` |
| `--tracking-label` | `0.09em` | `0.09em` |
| `--font-display` | `var(--font-switchyard-text), ui-sans-serif, system-ui, sans-serif` | `var(--font-switchyard-text), ui-sans-serif, system-ui, sans-serif` |
| `--font-text` | `var(--font-switchyard-text), ui-sans-serif, system-ui, sans-serif` | `var(--font-switchyard-text), ui-sans-serif, system-ui, sans-serif` |
| `--font-sans` | `var(--font-text)` | `var(--font-text)` |
| `--font-mono` | `var(--font-switchyard-mono), ui-monospace, monospace` | `var(--font-switchyard-mono), ui-monospace, monospace` |
## Use it

- Registry: `bunx shadcn add https://tailthemes.com/r/switchyard.json`
- MCP: [https://tailthemes.com/api/mcp](https://tailthemes.com/api/mcp)
- Download: [https://tailthemes.com/api/download/switchyard](https://tailthemes.com/api/download/switchyard)

## Links

- Product page: [https://tailthemes.com/themes/switchyard](https://tailthemes.com/themes/switchyard)
- Live preview: [https://tailthemes.com/preview/switchyard](https://tailthemes.com/preview/switchyard)
- Docs: [https://tailthemes.com/docs/switchyard](https://tailthemes.com/docs/switchyard)
- Manifest JSON: [https://tailthemes.com/api/themes/switchyard](https://tailthemes.com/api/themes/switchyard)
- Registry item: [https://tailthemes.com/r/switchyard.json](https://tailthemes.com/r/switchyard.json)