{"slug":"switchyard","name":"Switchyard","version":"1.7.2","category":"dashboard","priceCents":3900,"description":"An AI agent dashboard template for Next.js that makes multi-agent work inspectable instead of decorative. Switchyard ships twenty routes for workflow browsing and editing, canonical Wire Diagram topology, run filtering and execution traces, human approvals, an evidence-backed chat workspace, six agent profiles, joined evaluation comparisons, API keys, tool permissions, retrieval collections, guardrail fixtures, activity, usage, model routing, budgets, environments, and a living component guide. The Commonwell Housing fiction follows one repair request from resident message to classified urgency, cited policy, human spend approval, confirmed vendor write, and resident update. The execution stitch is the signature: one graph becomes the editable canvas, chronological run tape, and agent boundary ledger without duplicating node facts. Evaluation detail compares only same-case measured outcomes, keeps coverage separate, derives baseline-to-candidate clusters and unique blockers, charts exact data with a table alternative, projects restricted access safely, and records permission-aware local decisions without claiming promotion. Working local controls cover node selection, inspector tabs, run filters, expandable steps, case sorting, filtering and pagination, chat composition, fixture tests, approval previews, masked key previews, agent settings, and draft saves. Actions are honest simulations and previews; backend orchestration, secrets, auth, and persistence remain buyer integration points. Light mode uses a neutral gray canvas, white cards, subtle borders, and a custom dark rail; dark mode becomes a near-black control room. Inter and JetBrains Mono ship locally, every color routes through semantic tokens, both modes meet computed WCAG AA, and motion respects reduced-motion preferences. All twenty routes also ship as a framework-free HTML template, compiled to standalone documents with local fonts and vanilla JavaScript, and no build step between the download and a static host.","summary":"For teams running multi-agent products: an AI agent dashboard template Nextjs developers get as one console: workflows, runs, approvals and evals. 20 routes.","tags":["ai agent dashboard template nextjs","agent workflow dashboard template","tailwind ai admin dashboard","multi agent workflow ui","wire diagram","tailwind-v4"],"palette":{"bg":"#f4f5f6","surface":"#ffffff","accent":"#07527e","text":"#17181b","line":"#d1d5da"},"darkMode":true,"pages":[{"path":"/","title":"Overview","sections":["app-shell","operations-overview","workflow-stitch-preview","safety-summary"]},{"path":"/workflows","title":"Workflows","sections":["app-shell","workflow-browser"]},{"path":"/workflow","title":"Workflow editor","sections":["app-shell","workflow-canvas"]},{"path":"/templates","title":"Templates","sections":["app-shell","template-library"]},{"path":"/runs","title":"Runs","sections":["app-shell","run-ledger"]},{"path":"/run","title":"Run detail","sections":["app-shell","execution-trace"]},{"path":"/approvals","title":"Approvals","sections":["app-shell","approval-queue"]},{"path":"/chat","title":"Chat","sections":["app-shell","chat-workspace"]},{"path":"/agents","title":"Agents","sections":["app-shell","agent-roster"]},{"path":"/agent","title":"Agent configuration","sections":["app-shell","agent-config"]},{"path":"/evals","title":"Evaluations","sections":["app-shell","eval-suite"]},{"path":"/eval","title":"Evaluation detail","sections":["app-shell","eval-header","score-comparison","failure-clusters","eval-case-table","revision-diff","promotion-decision"]},{"path":"/tools","title":"Tools","sections":["app-shell","tool-catalog"]},{"path":"/knowledge","title":"Knowledge","sections":["app-shell","knowledge-library"]},{"path":"/guardrails","title":"Guardrails","sections":["app-shell","guardrail-bench"]},{"path":"/activity","title":"Activity","sections":["app-shell","activity-log"]},{"path":"/usage","title":"Usage","sections":["app-shell","usage-report"]},{"path":"/api-keys","title":"API keys","sections":["app-shell","api-key-console"]},{"path":"/settings","title":"Settings","sections":["app-shell","settings-console"]},{"path":"/components","title":"Components","sections":["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":"app-shell","file":"src/components/app-shell.tsx","renders":"Product navigation composed through the shared dashboard-layout boundary: labelled 216px rail, responsive disclosure, workflow context, fixture status, page heading, actions, and footer."},{"name":"operations-overview","file":"src/components/operations-overview.tsx","renders":"Active-run hero, derived operating measures, and the human attention queue with explicit running and waiting states."},{"name":"workflow-stitch-preview","file":"src/components/operations-overview.tsx","renders":"Compact execution stitch derived from canonical Wire nodes, with a running position, stable node types, and text alternative."},{"name":"safety-summary","file":"src/components/operations-overview.tsx","renders":"Boundary report for blocking tests, human decisions, unconfirmed writes, and the next guardrail fixture."},{"name":"workflow-browser","file":"src/components/workflow-browser.tsx","renders":"Filterable workflow register with revision, state, run count, pass rate, change time, and honest local actions."},{"name":"workflow-canvas","file":"src/components/workflow-canvas.tsx","renders":"Canonical Wire canvas with selectable nodes, branches, evidence loop, canvas and JSON views, inspector tabs, validation, and local viewport controls."},{"name":"template-library","file":"src/components/template-library.tsx","renders":"Workflow recipe library naming included gates, tools, and node count with preview and local-draft actions."},{"name":"run-ledger","file":"src/components/run-ledger.tsx","renders":"Status-filtered run table with request, current node, elapsed time, steps, cost, designed empty state, and route links."},{"name":"execution-trace","file":"src/components/execution-trace.tsx","renders":"Chronological reading of the canonical topology with expandable step evidence, timing, cost, human review, and write confirmation."},{"name":"approval-queue","file":"src/components/approval-queue.tsx","renders":"Human decision queue with policy evidence, spend threshold, operator note, and local approval or return previews that preserve the blocked fixture."},{"name":"chat-workspace","file":"src/components/chat-workspace.tsx","renders":"Evidence-backed message history, tool-boundary context, composer, and local preview-response interaction."},{"name":"agent-roster","file":"src/components/agent-roster.tsx","renders":"Six-agent operational roster with model, readiness, tools, latency, success rate, spend, and configuration links."},{"name":"agent-config","file":"src/components/agent-config.tsx","renders":"Selected agent identity, lifted Wire node, model and runtime controls, prompt, tools, knowledge, guardrails, and local draft status."},{"name":"eval-suite","file":"src/components/eval-suite.tsx","renders":"Evaluation register and local fixture runner with target agent, evaluated/expected coverage, joined score delta, preview outcome, detail link, and designed idle state."},{"name":"eval-header","file":"src/components/eval-header.tsx","renders":"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."},{"name":"score-comparison","file":"src/components/score-comparison.tsx","renders":"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."},{"name":"failure-clusters","file":"src/components/failure-clusters.tsx","renders":"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."},{"name":"eval-case-table","file":"src/components/eval-case-table.tsx","renders":"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."},{"name":"revision-diff","file":"src/components/revision-diff.tsx","renders":"Permission-aware baseline and candidate prompt, explicit model revision, tool, and guardrail comparison with changed, unchanged, partial, and denied variants."},{"name":"promotion-decision","file":"src/components/promotion-decision.tsx","renders":"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."},{"name":"tool-catalog","file":"src/components/tool-catalog.tsx","renders":"Ten-tool connector catalog showing normalized IDs, read, write, and confirmation boundaries, connection state, agent consumers, and fixture tests."},{"name":"knowledge-library","file":"src/components/knowledge-library.tsx","renders":"Retrieval collections with source, document count, freshness, agent access, search preview, and an empty-result state."},{"name":"guardrail-bench","file":"src/components/guardrail-bench.tsx","renders":"Policy list and local fixture bench for blocking, routing, and flagging rules with redundant test outcomes."},{"name":"activity-log","file":"src/components/activity-log.tsx","renders":"Searchable and filterable workspace audit ledger for draft, fixture, policy, and access events with desktop table and mobile list."},{"name":"usage-report","file":"src/components/usage-report.tsx","renders":"Seven-day authored usage figure for runs, tokens, and cost with semantic SVG marks, generated text alternative, and an equivalent table twin."},{"name":"api-key-console","file":"src/components/api-key-console.tsx","renders":"Masked API key register with scope badges and local-only create, revoke, and reset previews that never generate or reveal a secret."},{"name":"settings-console","file":"src/components/settings-console.tsx","renders":"Model routing, fallback order, token and spend budgets, environment selection, review defaults, and local draft save."},{"name":"ui/button","file":"src/components/ui/button.tsx","renders":"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."},{"name":"ui/badge","file":"src/components/ui/badge.tsx","renders":"Shared primitives: Badge pill across its tones, StatusBadge for run and policy outcomes, and the Eyebrow label that opens a panel."},{"name":"ui/panel","file":"src/components/ui/panel.tsx","renders":"Shared primitive: Panel container with PanelHeader and PanelFooter — the console's only grouping device."},{"name":"ui/fields","file":"src/components/ui/fields.tsx","renders":"Shared form primitives: Field wrapper, Input, Select, Textarea and Toggle, carrying the label, description and invalid treatments the console's forms are built from."},{"name":"ui/metric","file":"src/components/ui/metric.tsx","renders":"Shared primitive: the Metric figure — one number, its label and its qualifier, set in tabular numerals."},{"name":"ui/dashboard-layout","file":"src/components/ui/dashboard-layout.tsx","renders":"Shared primitive: the DashboardLayout boundary every application route mounts inside, owning the rail, the header and the scroll region."},{"name":"ui/mode-toggle","file":"src/components/ui/mode-toggle.tsx","renders":"Shared primitive: the ModeToggle control that switches light and dark and persists the choice."},{"name":"ui/brand","file":"src/components/ui/brand.tsx","renders":"Shared primitive: the SwitchyardMark brand-mark, the one place the product's identity is drawn."},{"name":"ui/dialog","file":"src/components/ui/dialog.tsx","renders":"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."},{"name":"ui/confirm-dialog","file":"src/components/ui/confirm-dialog.tsx","renders":"Shared primitive: the alertdialog behind every irreversible preview — the consequence sentence is what aria-describedby names, and the cancel control holds focus on open."},{"name":"ui/dropdown-menu","file":"src/components/ui/menu.tsx","renders":"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."},{"name":"ui/tooltip","file":"src/components/ui/tooltip.tsx","renders":"Shared primitive: the flat arrowless bubble behind an 80ms intent gate, described rather than expanded, dismissed by Escape through the layer stack."},{"name":"ui/toast","file":"src/components/ui/toast.tsx","renders":"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."},{"name":"ui/skeleton","file":"src/components/ui/skeleton.tsx","renders":"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."},{"name":"ui/progress","file":"src/components/ui/progress.tsx","renders":"Shared primitive: the Progress meter with role=\"progressbar\", its printed value and a tone derived from the fixture rather than decoration."},{"name":"ui/tabs","file":"src/components/ui/tabs.tsx","renders":"Shared primitive: Tabs and TabPanel in underline and segmented appearances, with roving tabindex and arrow, Home and End keys."},{"name":"ui/date-picker","file":"src/components/ui/date-picker.tsx","renders":"Shared primitive: the DatePicker field and its Calendar surface, keyboard navigable and opened on the value it was handed rather than on today."},{"name":"ui/rail-workspace","file":"src/components/ui/rail-workspace.tsx","renders":"Shared primitive: the navigation rail's workspace trigger and the menu of workspace-scoped routes it opens."},{"name":"ui/sort-head","file":"src/components/ui/sort-head.tsx","renders":"Shared primitive: the sortable column head with neutral arrows, a spoken sort hint, and aria-sort on the ordered column only."},{"name":"ui/pagination","file":"src/components/ui/pagination.tsx","renders":"Shared primitive: the ends-only page strip over a bounded fixture set, printing the row range beside the two controls."}],"accent_mode":"second-hue","tokens":{"--background":"#f4f5f6","--foreground":"#17181b","--card":"#ffffff","--card-foreground":"#17181b","--primary":"#07527e","--primary-foreground":"#f5f9ff","--primary-hover":"#003f63","--primary-active":"#002f4b","--primary-soft":"#dbeaf2","--primary-border":"#7699b1","--secondary":"#e4e6e9","--secondary-foreground":"#292b2f","--muted":"#edeff1","--muted-foreground":"#5c626a","--accent":"#4f3476","--accent-foreground":"#f5f4fd","--accent-hover":"#3f275f","--accent-active":"#311c4c","--accent-soft":"#eee8f5","--accent-border":"#b9a5cd","--border":"#d1d5da","--ring":"#07527e","--control-border":"#b3b9c1","--control-border-strong":"#818892","--field":"#fafafa","--field-border":"#cdd3d9","--surface-tint":"#daecfb","--selection":"#e1e4e8","--selection-border":"#737b84","--rail":"#11161c","--rail-foreground":"#f1f3f5","--rail-muted":"#a3abb4","--rail-card":"#1a2027","--rail-plate-border":"#303842","--rail-border":"#4a545f","--rail-hover":"#202730","--rail-selection":"#26313b","--rail-selection-border":"#6d8294","--rail-primary":"#86c9f1","--shadow-color":"#090b0e","--positive":"#1f5a32","--positive-foreground":"#f2fff5","--positive-soft":"#e6f2e9","--positive-border":"#97b7a0","--warning":"#714000","--warning-foreground":"#fff8e9","--warning-soft":"#fbefd9","--warning-border":"#c7a36a","--critical":"#7b2638","--critical-foreground":"#fff5f7","--critical-soft":"#f7e7ea","--critical-border":"#c79aa4","--radius":"0.375rem","--display-weight":"580","--text-caption":"0.75rem","--leading-caption":"1.4","--text-small":"0.875rem","--leading-small":"1.45","--text-body":"1rem","--leading-body":"1.55","--text-lead":"1.125rem","--leading-lead":"1.55","--text-d1":"1.5rem","--leading-d1":"1.22","--text-d2":"1.8rem","--leading-d2":"1.16","--text-d3":"clamp(2rem, 1.9rem + 0.43vw, 2.16rem)","--leading-d3":"1.1","--text-d4":"clamp(2.35rem, 2.2rem + 0.65vw, 2.592rem)","--leading-d4":"1.04","--tracking-d1":"-0.01em","--tracking-d2":"-0.015em","--tracking-d3":"-0.02em","--tracking-d4":"-0.025em","--tracking-label":"0.09em","--font-display":"var(--font-switchyard-text), ui-sans-serif, system-ui, sans-serif","--font-text":"var(--font-switchyard-text), ui-sans-serif, system-ui, sans-serif","--font-sans":"var(--font-text)","--font-mono":"var(--font-switchyard-mono), ui-monospace, monospace"},"tokensDark":{"--background":"#0b0c0e","--foreground":"#e5e7eb","--card":"#16181b","--card-foreground":"#e5e7eb","--primary":"#71b7e6","--primary-foreground":"#06131b","--primary-hover":"#8acbf2","--primary-active":"#a4dafe","--primary-soft":"#102b3b","--primary-border":"#315c73","--secondary":"#22252a","--secondary-foreground":"#d6d9de","--muted":"#111316","--muted-foreground":"#9ca3ad","--accent":"#bb9af4","--accent-foreground":"#110c1a","--accent-hover":"#c9adf8","--accent-active":"#d8c1fb","--accent-soft":"#2b1f3b","--accent-border":"#685286","--border":"#30343a","--ring":"#71b7e6","--control-border":"#474d55","--control-border-strong":"#616872","--field":"#101215","--field-border":"#2f343b","--surface-tint":"#1a3345","--selection":"#24282d","--selection-border":"#737b84","--rail":"#080a0c","--rail-foreground":"#eef0f2","--rail-muted":"#9da4ad","--rail-card":"#14181d","--rail-plate-border":"#2e3640","--rail-border":"#47505b","--rail-hover":"#1c2228","--rail-selection":"#222c34","--rail-selection-border":"#657d91","--rail-primary":"#86c9f1","--shadow-color":"#000000","--positive":"#79c98c","--positive-foreground":"#06170a","--positive-soft":"#122a1a","--positive-border":"#3d7048","--warning":"#f0b65b","--warning-foreground":"#211300","--warning-soft":"#30230e","--warning-border":"#806335","--critical":"#f19aae","--critical-foreground":"#240711","--critical-soft":"#32151d","--critical-border":"#7d4654","--radius":"0.375rem","--display-weight":"580","--text-caption":"0.75rem","--leading-caption":"1.4","--text-small":"0.875rem","--leading-small":"1.45","--text-body":"1rem","--leading-body":"1.55","--text-lead":"1.125rem","--leading-lead":"1.55","--text-d1":"1.5rem","--leading-d1":"1.22","--text-d2":"1.8rem","--leading-d2":"1.16","--text-d3":"clamp(2rem, 1.9rem + 0.43vw, 2.16rem)","--leading-d3":"1.1","--text-d4":"clamp(2.35rem, 2.2rem + 0.65vw, 2.592rem)","--leading-d4":"1.04","--tracking-d1":"-0.01em","--tracking-d2":"-0.015em","--tracking-d3":"-0.02em","--tracking-d4":"-0.025em","--tracking-label":"0.09em","--font-display":"var(--font-switchyard-text), ui-sans-serif, system-ui, sans-serif","--font-text":"var(--font-switchyard-text), ui-sans-serif, system-ui, sans-serif","--font-sans":"var(--font-text)","--font-mono":"var(--font-switchyard-mono), ui-monospace, monospace"},"compatibility":{"next":">=15 <17","react":">=19 <20","tailwind":">=4 <5"},"dependencies":["lucide-react","recharts"],"editions":{"react":{"source":"src","runtime":"react"},"html":{"source":"html/src","output":"html/dist","engine":"nunjucks","runtime":"vanilla","buildRequired":false}},"ui_library":{"version":"1.5.2","files":["src/components/ui/_tt/anchor.ts","src/components/ui/_tt/confirm-dialog.axes.ts","src/components/ui/_tt/confirm-dialog.fixtures.ts","src/components/ui/_tt/confirm-dialog.tsx","src/components/ui/_tt/dialog.axes.ts","src/components/ui/_tt/dialog.fixtures.ts","src/components/ui/_tt/dialog.tsx","src/components/ui/_tt/dropdown-menu.axes.ts","src/components/ui/_tt/dropdown-menu.fixtures.ts","src/components/ui/_tt/dropdown-menu.tsx","src/components/ui/_tt/focusables.ts","src/components/ui/_tt/host.ts","src/components/ui/_tt/ids.ts","src/components/ui/_tt/layer.ts","src/components/ui/_tt/layout-effect.ts","src/components/ui/_tt/pagination.axes.ts","src/components/ui/_tt/pagination.fixtures.ts","src/components/ui/_tt/pagination.tsx","src/components/ui/_tt/presence.ts","src/components/ui/_tt/recipe.ts","src/components/ui/_tt/reduced-motion.ts","src/components/ui/_tt/roving.ts","src/components/ui/_tt/skeleton.axes.ts","src/components/ui/_tt/skeleton.fixtures.ts","src/components/ui/_tt/skeleton.tsx","src/components/ui/_tt/sort-head.axes.ts","src/components/ui/_tt/sort-head.fixtures.ts","src/components/ui/_tt/sort-head.tsx","src/components/ui/_tt/table-sort.ts","src/components/ui/_tt/toast-queue.ts","src/components/ui/_tt/toast.axes.ts","src/components/ui/_tt/toast.fixtures.ts","src/components/ui/_tt/toast.tsx","src/components/ui/_tt/tooltip.axes.ts","src/components/ui/_tt/tooltip.fixtures.ts","src/components/ui/_tt/tooltip.tsx"]},"license":"standard","design":{"typefaces":{"display":"Inter","text":"Inter","mono":"JetBrains Mono"},"typeRatio":1.2,"signature":"The execution stitch: one canonical Wire topology becomes an editable canvas, chronological run tape, and agent configuration boundary","surface_kind":"console","built_against":"2026-08-23","levers":{"theme":"paper","density":"compact","accent_mode":"single-saturated","motion":"mechanical","borders":"hairline","radius":"small","texture":"none","shadow":"none"},"icons":{"set":"lucide","stroke":2,"ladder":["size-3.5","size-4","size-5"],"contexts":{"nav":"glyph","panel_header":"mark","fact_row":"none","feature_grid":"none"}},"disclosure":{"helper_line":"one-clause","sentence":"hint","paragraph":"details","parallel_views":"tabs","secondary_object":"drawer"},"colour_budget":{"brand_max_pct":10,"concentration_pct":70,"regions":[]}}}