Multi-Agent Trace

1"use client";
2
3import * as React from "react";
4
5interface MultiAgentTraceProps {
6  variant?: string;
7}
8
9export default function MultiAgentTrace({ variant = "Concurrent" }: MultiAgentTraceProps) {
10  const [activeTab, setActiveTab] = React.useState<"all" | "active" | "completed">("all");
11
12  const agents = [
13    {
14      id: "planner",
15      name: "Lead Planner Agent",
16      role: "Decomposition & DAG Scheduling",
17      status: "completed",
18      progress: 100,
19      duration: "1.2s",
20      tokens: "842 tok",
21      model: "Claude 3.5 Sonnet",
22      output: "Partitioned migration into 4 parallel workstreams.",
23    },
24    {
25      id: "researcher",
26      name: "Schema Auditor",
27      role: "Postgres Index Introspection",
28      status: "running",
29      progress: 68,
30      duration: "3.4s",
31      tokens: "2.1k tok",
32      model: "GPT-4o",
33      output: "Scanned 14 tables. Found missing composite B-Tree on (org_id, created_at).",
34    },
35    {
36      id: "coder",
37      name: "Migration Synthesizer",
38      role: "SQL DDL & Prisma Schema Patching",
39      status: "running",
40      progress: 42,
41      duration: "2.8s",
42      tokens: "1.9k tok",
43      model: "DeepSeek R1",
44      output: "Drafting concurrent index creation statements with zero-lock downtime.",
45    },
46    {
47      id: "critic",
48      name: "Safety & Regression Critic",
49      role: "Lock Contention Verification",
50      status: "pending",
51      progress: 0,
52      duration: "Queued",
53      tokens: "—",
54      model: "Gemini 1.5 Pro",
55      output: "Waiting for migration draft synthesis to complete…",
56    },
57  ];
58
59  const filtered = agents.filter((a) => {
60    if (activeTab === "active") return a.status === "running";
61    if (activeTab === "completed") return a.status === "completed";
62    return true;
63  });
64
65  return (
66    <div className="w-full max-w-110 overflow-hidden rounded-card bg-surface shadow-card border border-line">
67      {/* Header */}
68      <div className="primitive-card-bar flex items-center justify-between border-b border-line bg-surface/80 px-3.5 py-2.5">
69        <div className="flex items-center gap-2">
70          <span className="size-2 rounded-full bg-accent animate-pulse" />
71          <span className="font-display font-semibold text-[13.5px] text-ink">
72            Multi-Agent Swarm Orchestration
73          </span>
74        </div>
75        <div className="flex items-center gap-1">
76          <span className="font-mono text-[11px] text-accent bg-accent/10 px-2 py-0.5 rounded-full">
77            2 Active
78          </span>
79          <span className="font-mono text-[11px] text-ink-3">4.8k tokens</span>
80        </div>
81      </div>
82
83      {/* Filter Tabs */}
84      <div className="flex items-center gap-1 border-b border-line bg-inset/50 px-3 py-1.5 text-[11.5px]">
85        {(["all", "active", "completed"] as const).map((tab) => (
86          <button
87            key={tab}
88            onClick={() => setActiveTab(tab)}
89            className={`rounded-chip px-2 py-0.5 font-medium capitalize transition-colors ${
90              activeTab === tab ? "bg-surface text-ink shadow-btn font-semibold" : "text-ink-3 hover:text-ink-2"
91            }`}
92          >
93            {tab}
94          </button>
95        ))}
96      </div>
97
98      {/* Agents List */}
99      <div className="divide-y divide-line/60">
100        {filtered.map((agent) => (
101          <div key={agent.id} className="p-3 transition-colors hover:bg-hover/40">
102            <div className="flex items-start justify-between gap-2">
103              <div className="flex items-center gap-2">
104                <span
105                  className={`size-2 rounded-full ${
106                    agent.status === "completed"
107                      ? "bg-green"
108                      : agent.status === "running"
109                      ? "bg-accent animate-ping"
110                      : "bg-ink-3/40"
111                  }`}
112                />
113                <h4 className="text-[13px] font-semibold text-ink font-display">{agent.name}</h4>
114                <span className="rounded-[4px] bg-field px-1.5 py-0.2 font-mono text-[10px] text-ink-3">
115                  {agent.model}
116                </span>
117              </div>
118              <span className="font-mono text-[10.5px] text-ink-3">{agent.duration}</span>
119            </div>
120
121            <p className="mt-1 text-[11.5px] text-ink-2 font-body">{agent.role}</p>
122
123            {/* Live Progress Bar */}
124            <div className="mt-2 flex items-center gap-2">
125              <div className="h-1.5 flex-1 overflow-hidden rounded-full bg-field">
126                <div
127                  className="h-full rounded-full transition-all duration-500"
128                  style={{
129                    width: `${agent.progress}%`,
130                    background:
131                      agent.status === "completed"
132                        ? "var(--green)"
133                        : agent.status === "running"
134                        ? "var(--accent)"
135                        : "var(--line)",
136                  }}
137                />
138              </div>
139              <span className="font-mono text-[10.5px] text-ink-3 w-8 text-right">
140                {agent.progress}%
141              </span>
142            </div>
143
144            {/* Output Snippet */}
145            <p className="mt-2 rounded-[6px] bg-inset p-1.5 font-mono text-[11px] text-ink-2/90 leading-relaxed">
146              {agent.output}
147            </p>
148          </div>
149        ))}
150      </div>
151
152      {/* Footer */}
153      <div className="flex items-center justify-between border-t border-line bg-inset/40 px-3.5 py-2 font-mono text-[11px] text-ink-3">
154        <span>DAG Topology: Parallel 2×2</span>
155        <button className="text-accent hover:underline">Inspect Merged Diff →</button>
156      </div>
157    </div>
158  );
159}
160