feat(web): add the Agents panel

Surfaces the subagent data the previous PRs record. A new right-panel
tab lists every subagent on the thread with its role, model, status,
token usage, recent activity, and the runs it has been activated for.

Grouping lives in client-runtime rather than the component so it stays
testable: workflow coordinators own their phases, phase status derives
from its members, and members orphaned by a missing coordinator fall
back to the flat list rather than disappearing.

A coordinator is an agent in its own right, so it renders as a card
rather than a bare heading — it has a model, usage and activations, and
before its members are spawned it is the only row on the thread. It is
counted in the tallies for the same reason, but only while it has no
members, since afterwards they represent the same work and counting both
double-reports it. Without that, a thread running a workflow showed
"0 active" with nothing listed and unexplained tokens in the header.

Usage follows the same rule: the total keeps whatever the members did
not account for. Dropping the coordinator outright erased the whole
workflow whenever a provider reported workflow usage but omitted
per-agent tokens, and the header read "Usage unavailable" for a workflow
that had spent thousands.

Read-only: this only renders what the projection already contains.

Author: shivamhwp

apps/web/src/components/AgentsPanelV2.test.tsx

@@ -0,0 +1,143 @@
+import {
+  NodeId,
+  ProviderDriverKind,
+  ProviderInstanceId,
+  RunId,
+  ThreadId,
+  type OrchestrationV2Subagent,
+} from "@t3tools/contracts";
+import * as DateTime from "effect/DateTime";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vite-plus/test";
+
+import { AgentsPanelV2 } from "./AgentsPanelV2";
+import { makeThreadProjectionFixture } from "../test-fixtures";
+
+const now = DateTime.makeUnsafe("2026-07-26T00:00:00.000Z");
+const workflowId = NodeId.make("workflow-1");
+
+const agent = (id: string, input: Partial<OrchestrationV2Subagent> = {}): OrchestrationV2Subagent =>
+  ({
+    id: NodeId.make(id),
+    threadId: ThreadId.make("thread-test"),
+    runId: RunId.make("run-test"),
+    parentNodeId: NodeId.make("root-node"),
+    origin: "provider_native",
+    createdBy: "agent",
+    driver: ProviderDriverKind.make("claudeAgent"),
+    providerInstanceId: ProviderInstanceId.make("claudeAgent"),
+    providerThreadId: null,
+    childThreadId: null,
+    nativeTaskRef: null,
+    prompt: "Work",
+    title: id,
+    model: "claude-opus-4-1",
+    kind: "subagent",
+    role: { name: "general-purpose", source: "provider" },
+    status: "running",
+    result: null,
+    usage: null,
+    currentActivationId: null,
+    activationCount: 1,
+    workflow: null,
+    workflowMembership: null,
+    recentActivity: [],
+    startedAt: now,
+    completedAt: null,
+    updatedAt: now,
+    ...input,
+  }) as OrchestrationV2Subagent;
+
+const renderPanel = (subagents: ReadonlyArray<OrchestrationV2Subagent>) =>
+  renderToStaticMarkup(
+    <AgentsPanelV2 projection={{ ...makeThreadProjectionFixture(), subagents }} />,
+  );
+
+describe("AgentsPanelV2", () => {
+  it("renders a workflow coordinator as a card before its members exist", () => {
+    // The Claude-only workflow path. A coordinator arrives before any member
+    // does, so rendering it as a bare heading left the panel showing a title,
+    // no rows, and "0 active" while the workflow was running.
+    const markup = renderPanel([
+      agent("workflow-1", {
+        kind: "workflow",
+        title: "Refactor sweep",
+        role: { name: "workflow-coordinator", source: "app_default" },
+        status: "running",
+        usage: { totalTokens: 5000 },
+        workflow: { phases: [{ index: 0, title: "Research" }] },
+      }),
+    ]);
+
+    expect(markup).toContain("Refactor sweep");
+    expect(markup).toContain("workflow-coordinator");
+    // Its own model and usage only appear if it rendered as a card.
+    expect(markup).toContain("claude-opus-4-1");
+    expect(markup).toContain("5k tokens");
+    expect(markup).toContain("1 active");
+    expect(markup).toContain("Research");
+  });
+
+  it("renders workflow members under their phase", () => {
+    const markup = renderPanel([
+      agent("workflow-1", {
+        kind: "workflow",
+        title: "Refactor sweep",
+        status: "running",
+        workflow: {
+          phases: [
+            { index: 0, title: "Research" },
+            { index: 1, title: "Implement" },
+          ],
+        },
+      }),
+      agent("researcher", {
+        kind: "workflow_agent",
+        title: "researcher",
+        status: "completed",
+        workflowMembership: {
+          workflowSubagentId: workflowId,
+          agentIndex: 0,
+          phaseIndex: 0,
+          attempt: 1,
+        },
+      }),
+      agent("implementer", {
+        kind: "workflow_agent",
+        title: "implementer",
+        status: "running",
+        workflowMembership: {
+          workflowSubagentId: workflowId,
+          agentIndex: 0,
+          phaseIndex: 1,
+          attempt: 1,
+        },
+      }),
+    ]);
+
+    expect(markup).toContain("Research");
+    expect(markup).toContain("Implement");
+    expect(markup).toContain("researcher");
+    expect(markup).toContain("implementer");
+    // Members represent the coordinator's work, so only they are tallied.
+    expect(markup).toContain("1 active");
+    expect(markup).toContain("1 settled");
+  });
+
+  it("keeps a member visible when its coordinator is missing", () => {
+    const markup = renderPanel([
+      agent("orphan", {
+        kind: "workflow_agent",
+        title: "orphaned-worker",
+        workflowMembership: {
+          workflowSubagentId: workflowId,
+          agentIndex: 0,
+          phaseIndex: 0,
+          attempt: 1,
+        },
+      }),
+    ]);
+
+    expect(markup).toContain("orphaned-worker");
+  });
+});