Design System

Agent Dashboard Block

EntitySelector + StageTimeline + agent profile card composed into a workflow dashboard.

Agents

KN

Knowledge Architect

claude-opus-4-5-20251101

Master architect of the codebase knowledge system. Owns /docs, /.claude, and all README navigation files.

diagram_creationskill_authoringdocumentation_architecturepattern_extraction

Sales RFP Workflow

Research & Discovery
Knowledge Architect
8.5s92%completed
Needs Analysis
Navigator
12.3s87%completed
Proposal Generation
Orchestrator
22.1s85%completed
Quality Review
Knowledge Architect
6.2s94%completed
Total Cost
$0.15699,600in / 16,500out

Session Summary

Workflows

2

Completed

1

Total Cost

$0.1569

Data Contracts

StageCardData

PropTypeDefaultDescription
id*string—Unique stage ID
name*string—Stage name
status*'pending' | 'running' | 'completed' | 'failed' | 'skipped'—Current status
agentstring—Assigned agent
durationMsnumber—Duration in ms
confidencenumber—Confidence 0-1

EntityItem

PropTypeDefaultDescription
id*string—Unique entity ID
name*string—Display name
descriptionstring—Short description
badgesstring[]—Capability tags

Copy This Block

import { EntitySelector } from '@stackmates/ui-interactive/molecules';
import { StageTimeline } from '@stackmates/ui-interactive/organisms';
import { CostDisplay } from '@stackmates/ui-interactive/atoms';

<div className="flex min-h-[500px]">
  <div className="w-64 shrink-0 border-r p-3">
    <EntitySelector entities={agents} selectedId={id} onSelect={setId} />
  </div>
  <div className="flex-1 space-y-6 p-6">
    <StageTimeline stages={stages} totalCostUsd={cost} totalTokens={tokens} />
    <CostDisplay costUsd={totalCost} />
  </div>
</div>