npm - @brainpilot/web - Versions diffs - 0.0.9 → 0.0.11 - Mend

@brainpilot/web 0.0.9 → 0.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (28) hide show

package/dist/assets/index-DkoqxJfs.css +1 -0
package/dist/assets/index-DtLW483q.js +451 -0
package/dist/index.html +2 -2
package/package.json +2 -2
package/src/__tests__/api.test.ts +49 -1
package/src/__tests__/messageGroups.test.ts +150 -0
package/src/__tests__/newUiEvents.test.ts +32 -0
package/src/__tests__/runningScripts.test.ts +139 -0
package/src/components/chat/MessageStream.tsx +103 -43
package/src/components/chat/PromptComposer.tsx +28 -10
package/src/components/chat/RunningScriptsPanel.tsx +118 -0
package/src/components/chat/runningScripts.ts +88 -0
package/src/components/demo/DemoView.tsx +1 -1
package/src/components/session/AgentTraceViews.tsx +5 -9
package/src/components/settings/KnowledgeBasePanel.tsx +758 -0
package/src/components/settings/SettingsDialog.tsx +127 -61
package/src/components/shell/SandboxStatus.tsx +128 -84
package/src/contexts/messageGroups.ts +110 -4
package/src/contexts/messageReducer.ts +11 -1
package/src/i18n/messages/chat.ts +14 -0
package/src/i18n/messages/sandbox.ts +3 -0
package/src/i18n/messages/settings.ts +93 -0
package/src/i18n/messages/trace.ts +0 -2
package/src/styles/global.css +970 -80
package/src/utils/api.ts +188 -3
package/src/utils/format.ts +9 -0
package/dist/assets/index-CJNvdeGz.js +0 -445
package/dist/assets/index-DWOsU22G.css +0 -1

package/dist/index.html CHANGED Viewed

@@ -5,8 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="color-scheme" content="light dark" />
     <title>BrainPilot</title>
-    <script type="module" crossorigin src="/assets/index-CJNvdeGz.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DWOsU22G.css">
+    <script type="module" crossorigin src="/assets/index-DtLW483q.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DkoqxJfs.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@brainpilot/web",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "engines": {
     "node": ">=22"
   },
@@ -31,7 +31,7 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@brainpilot/protocol": "^0.0.9",
+    "@brainpilot/protocol": "^0.0.11",
     "@fontsource-variable/geist": "^5.2.9",
     "@fontsource-variable/geist-mono": "^5.2.8",
     "@types/react": "^18.3.12",

package/src/__tests__/api.test.ts CHANGED Viewed

@@ -183,12 +183,17 @@ describe("api.sessions.getHistory — persisted events.jsonl rehydration", () =>
     expect(url).toContain("/sessions/s1/history?limit=42");
   });
-  it("returns the empty envelope on a non-ok response", async () => {
+  it("returns the empty envelope on a 404 (session has no transcript)", async () => {
     fetchMock.mockResolvedValueOnce(makeResponse({ ok: false, status: 404 }));
     const out = await api.sessions.getHistory("s1");
     expect(out).toEqual({ events: [], total: 0, truncated: false });
   });
+  it("throws on a non-404 failure instead of masking it as empty (#223)", async () => {
+    fetchMock.mockResolvedValueOnce(makeResponse({ ok: false, status: 500 }));
+    await expect(api.sessions.getHistory("s1")).rejects.toThrow(/history fetch failed: 500/);
+  });
   it("returns the empty envelope when the body is null", async () => {
     fetchMock.mockResolvedValueOnce(makeResponse({ contentType: "application/json", json: null }));
     const out = await api.sessions.getHistory("s1");
@@ -260,3 +265,46 @@ describe("api.sandbox.uploadFile — #47 base64 upload to the workspace", () =>
     await expect(api.sandbox.uploadFile("s1", "big.bin", new Blob(["hi"]))).rejects.toThrow("file too large");
   });
 });
+// #206: parseError previously read only `detail`, so the backend's Zod shape
+// `{ error, details }` and bare `{ error }` (e.g. 409) degraded to the generic
+// "Request failed (...)". Driven through api.providers.create (handleJson path).
+describe("#206 parseError surfaces { error, details }", () => {
+  const validCreate = { name: "x", baseUrl: "https://x", apiKey: "k", models: ["m"] } as never;
+  it("renders field-level Zod issues from { error, details }", async () => {
+    fetchMock.mockResolvedValueOnce(
+      makeResponse({
+        ok: false,
+        status: 400,
+        contentType: "application/json",
+        json: {
+          error: "invalid provider profile",
+          details: [{ path: ["base_url"], message: "must be a valid URL" }],
+        },
+      }),
+    );
+    await expect(api.providers.create(validCreate)).rejects.toThrow(
+      "invalid provider profile (base_url: must be a valid URL)",
+    );
+  });
+  it("surfaces a bare { error } (409 conflict) message", async () => {
+    fetchMock.mockResolvedValueOnce(
+      makeResponse({
+        ok: false,
+        status: 409,
+        contentType: "application/json",
+        json: { error: 'a provider named "sqz" already exists' },
+      }),
+    );
+    await expect(api.providers.create(validCreate)).rejects.toThrow('a provider named "sqz" already exists');
+  });
+  it("still prefers a plain { detail } string", async () => {
+    fetchMock.mockResolvedValueOnce(
+      makeResponse({ ok: false, status: 400, contentType: "application/json", json: { detail: "nope" } }),
+    );
+    await expect(api.providers.create(validCreate)).rejects.toThrow("nope");
+  });
+});

package/src/__tests__/messageGroups.test.ts CHANGED Viewed

@@ -78,3 +78,153 @@ describe("buildRenderItems — activity block run-active awareness", () => {
     expect(activities[1]).toMatchObject({ streaming: true });
   });
 });
+/* -------------------------------------------------------------------------- *
+ * #219 — expert-agent activity grouping (groupExpert=true, 3rd arg).
+ * -------------------------------------------------------------------------- */
+// A standalone assistant text row for an agent.
+function text(over: Partial<ChatMessage> = {}): ChatMessage {
+  return {
+    id: over.id ?? `t-${Math.random().toString(36).slice(2)}`,
+    role: "assistant",
+    content: over.content ?? "hello",
+    createdAt: new Date().toISOString(),
+    agent: over.agent ?? "principal",
+    streaming: false,
+    kind: "text",
+    ...over,
+  };
+}
+describe("buildRenderItems — #219 expert grouping", () => {
+  it("legacy: default (groupExpert off) never emits an expertGroup", () => {
+    const items = buildRenderItems(
+      [text({ agent: "analyst" }), text({ agent: "analyst", id: "a2" })],
+      undefined,
+    );
+    expect(items.some((i) => i.type === "expertGroup")).toBe(false);
+  });
+  it("folds a consecutive run of specialist text into one expertGroup", () => {
+    const items = buildRenderItems(
+      [
+        text({ id: "p1", agent: "principal", content: "PI intro" }),
+        text({ id: "a1", agent: "analyst" }),
+        text({ id: "a2", agent: "analyst" }),
+        text({ id: "p2", agent: "principal", content: "PI wrap" }),
+      ],
+      undefined,
+      true,
+    );
+    // principal / group / principal
+    expect(items.map((i) => i.type)).toEqual(["single", "expertGroup", "single"]);
+    const group = items.find((i) => i.type === "expertGroup")!;
+    expect(group).toMatchObject({ type: "expertGroup", agents: ["analyst"] });
+    expect((group as { items: unknown[] }).items).toHaveLength(2);
+  });
+  it("PI item breaks the specialist run into separate groups", () => {
+    const items = buildRenderItems(
+      [
+        text({ id: "a1", agent: "analyst" }),
+        text({ id: "a2", agent: "analyst" }),
+        text({ id: "p1", agent: "principal" }),
+        text({ id: "w1", agent: "writer" }),
+        text({ id: "w2", agent: "writer" }),
+      ],
+      undefined,
+      true,
+    );
+    expect(items.filter((i) => i.type === "expertGroup")).toHaveLength(2);
+  });
+  it("important events from a specialist escape the group and stay standalone", () => {
+    const err: ChatMessage = text({ id: "e1", agent: "analyst", kind: "error", content: "boom" });
+    const ask: ChatMessage = {
+      ...text({ id: "q1", agent: "analyst" }),
+      kind: "ask_user",
+      askUser: { requestId: "r1", agent: "analyst", question: "?" } as never,
+    };
+    const items = buildRenderItems(
+      [text({ id: "a1", agent: "analyst" }), err, ask, text({ id: "a2", agent: "analyst" })],
+      undefined,
+      true,
+    );
+    // error + ask_user MUST render standalone (never buried in a collapsed group).
+    const singleIds = items
+      .filter((i) => i.type === "single")
+      .map((i) => (i as { message: ChatMessage }).message.id);
+    expect(singleIds).toContain("e1");
+    expect(singleIds).toContain("q1");
+    // the escapes are NOT swallowed into any group
+    const groupedIds = items
+      .filter((i) => i.type === "expertGroup")
+      .flatMap((i) => (i as { items: { type: string; message?: ChatMessage; id: string }[] }).items)
+      .map((it) => (it.type === "single" ? it.message!.id : it.id));
+    expect(groupedIds).not.toContain("e1");
+    expect(groupedIds).not.toContain("q1");
+  });
+  it("warning+ system_message from a specialist escapes; info-level folds in", () => {
+    const warn: ChatMessage = {
+      ...text({ id: "sw", agent: "analyst" }),
+      kind: "system_message",
+      systemMessage: { level: "warning", message: "heads up", recoverable: true } as never,
+    };
+    const info: ChatMessage = {
+      ...text({ id: "si", agent: "analyst" }),
+      kind: "system_message",
+      systemMessage: { level: "info", message: "fyi", recoverable: true } as never,
+    };
+    const items = buildRenderItems(
+      [info, text({ id: "a1", agent: "analyst" }), warn],
+      undefined,
+      true,
+    );
+    // info + a1 fold together; warning stays standalone.
+    const group = items.find((i) => i.type === "expertGroup") as { items: RenderItemLike[] } | undefined;
+    expect(group).toBeTruthy();
+    expect(items.some((i) => i.type === "single" && (i as { message: ChatMessage }).message.id === "sw")).toBe(true);
+  });
+  it("principal items never fold into a group", () => {
+    const items = buildRenderItems(
+      [text({ id: "p1", agent: "principal" }), text({ id: "p2", agent: "principal" })],
+      undefined,
+      true,
+    );
+    expect(items.every((i) => i.type === "single")).toBe(true);
+  });
+  it("a lone specialist activity is left as-is (no double wrapper)", () => {
+    const items = buildRenderItems(
+      [step({ id: "a1", agent: "analyst", kind: "tool" })],
+      undefined,
+      true,
+    );
+    expect(items).toHaveLength(1);
+    expect(items[0].type).toBe("activity");
+  });
+  it("multi-agent run dedups agent names and sets streaming from running set", () => {
+    const items = buildRenderItems(
+      [
+        text({ id: "a1", agent: "analyst" }),
+        text({ id: "w1", agent: "writer" }),
+        text({ id: "a2", agent: "analyst" }),
+      ],
+      new Set(["writer"]),
+      true,
+    );
+    const group = items.find((i) => i.type === "expertGroup") as
+      | { agents: string[]; streaming: boolean }
+      | undefined;
+    expect(group).toBeTruthy();
+    expect(group!.agents.sort()).toEqual(["analyst", "writer"]);
+    expect(group!.streaming).toBe(true);
+  });
+});
+// Minimal structural alias for readability in the escape test above.
+type RenderItemLike = { type: string };

package/src/__tests__/newUiEvents.test.ts CHANGED Viewed

@@ -56,6 +56,38 @@ describe("system_message mapping", () => {
     expect(out[0].systemMessage?.level).toBe("warning");
     expect(out[0].content).toBe("watch out");
   });
+  it("#167: coalesces repeated system_messages sharing a stable id (retry ticks)", () => {
+    const mk = (attempt: number) =>
+      ({
+        type: "system_message",
+        id: "retry-librarian-run_1",
+        level: "warning",
+        message: `retrying (${attempt}/3)`,
+        agent: "librarian",
+      }) as WebSocketEvent;
+    let msgs = reduceMessagesForEvent([], mk(1));
+    msgs = reduceMessagesForEvent(msgs, mk(2));
+    msgs = reduceMessagesForEvent(msgs, mk(3));
+    // One bubble, updated in place to the latest attempt.
+    expect(msgs).toHaveLength(1);
+    expect(msgs[0].id).toBe("retry-librarian-run_1");
+    expect(msgs[0].content).toBe("retrying (3/3)");
+  });
+  it("#167: system_messages without a stable id still append", () => {
+    let msgs = reduceMessagesForEvent([], {
+      type: "system_message",
+      level: "warning",
+      message: "one",
+    } as WebSocketEvent);
+    msgs = reduceMessagesForEvent(msgs, {
+      type: "system_message",
+      level: "warning",
+      message: "two",
+    } as WebSocketEvent);
+    expect(msgs).toHaveLength(2);
+  });
 });
 describe("ask_user mapping + submit + reducer round-trip", () => {

package/src/__tests__/runningScripts.test.ts ADDED Viewed

@@ -0,0 +1,139 @@
+import { describe, it, expect } from "vitest";
+import {
+  extractCommand,
+  isBashTool,
+  selectActiveScripts,
+} from "../components/chat/runningScripts";
+import type { ChatMessage } from "../contracts/backend";
+function bashCall(over: Partial<ChatMessage> = {}): ChatMessage {
+  return {
+    id: over.id ?? "call-1",
+    role: "assistant",
+    content: "Tool: bash",
+    createdAt: "2026-07-01T00:00:00.000Z",
+    agent: over.agent ?? "principal",
+    kind: "tool",
+    toolName: "bash",
+    streaming: true,
+    toolInput: JSON.stringify({ command: "pytest -x tests/unit" }),
+    ...over,
+  };
+}
+describe("isBashTool", () => {
+  it("matches the bare bash tool", () => {
+    expect(isBashTool("bash")).toBe(true);
+  });
+  it("matches the mcp-namespaced bash tool", () => {
+    expect(isBashTool("mcp__local__bash")).toBe(true);
+  });
+  it("does not match other tool names", () => {
+    expect(isBashTool("read")).toBe(false);
+    expect(isBashTool("mcp__local__read")).toBe(false);
+    expect(isBashTool("bash_history")).toBe(false); // suffix match required
+    expect(isBashTool(undefined)).toBe(false);
+  });
+});
+describe("extractCommand", () => {
+  it("pulls `command` out of a fully-formed JSON args string", () => {
+    expect(extractCommand('{"command":"ls -la"}')).toBe("ls -la");
+  });
+  it("falls back to `cmd`/`script`/`shell` keys", () => {
+    expect(extractCommand('{"cmd":"echo hi"}')).toBe("echo hi");
+    expect(extractCommand('{"script":"./run.sh"}')).toBe("./run.sh");
+    expect(extractCommand('{"shell":"bash -c foo"}')).toBe("bash -c foo");
+  });
+  it("returns the raw string when the JSON is still partial", () => {
+    // TOOL_CALL_ARGS deltas may arrive as `{"comm` before the full JSON has
+    // buffered. Better to show *something* than to render an empty row.
+    expect(extractCommand('{"command":"pyt')).toBe('{"command":"pyt');
+  });
+  it("returns empty for non-strings and empty strings", () => {
+    expect(extractCommand(undefined)).toBe("");
+    expect(extractCommand(null)).toBe("");
+    expect(extractCommand("")).toBe("");
+    expect(extractCommand({ command: "not a string" })).toBe("");
+  });
+});
+describe("selectActiveScripts", () => {
+  it("returns empty when there are no tool messages", () => {
+    expect(selectActiveScripts([])).toEqual([]);
+    expect(
+      selectActiveScripts([
+        {
+          id: "t1",
+          role: "assistant",
+          content: "hello",
+          createdAt: "",
+          kind: "text",
+        },
+      ]),
+    ).toEqual([]);
+  });
+  it("returns only streaming bash calls, ignoring completed ones", () => {
+    const active = bashCall({ id: "a", streaming: true });
+    const done = bashCall({ id: "b", streaming: false });
+    const result = selectActiveScripts([active, done]);
+    expect(result.map((s) => s.id)).toEqual(["a"]);
+  });
+  it("ignores non-bash tool calls even when they are streaming", () => {
+    const bash = bashCall({ id: "a", streaming: true });
+    const read = bashCall({
+      id: "b",
+      streaming: true,
+      toolName: "read",
+      toolInput: JSON.stringify({ file: "foo.txt" }),
+    });
+    const trace = bashCall({
+      id: "c",
+      streaming: true,
+      toolName: "mcp__brainpilot__record_trace",
+      toolInput: "{}",
+    });
+    const result = selectActiveScripts([bash, read, trace]);
+    expect(result.map((s) => s.id)).toEqual(["a"]);
+  });
+  it("preserves arrival order across multiple concurrent bash calls", () => {
+    const first = bashCall({
+      id: "first",
+      agent: "principal",
+      toolInput: JSON.stringify({ command: "pytest" }),
+    });
+    const second = bashCall({
+      id: "second",
+      agent: "engineer",
+      toolInput: JSON.stringify({ command: "npm test" }),
+    });
+    const result = selectActiveScripts([first, second]);
+    expect(result).toEqual([
+      expect.objectContaining({ id: "first", agent: "principal", command: "pytest" }),
+      expect.objectContaining({ id: "second", agent: "engineer", command: "npm test" }),
+    ]);
+  });
+  it("defaults the agent name to 'principal' when unattributed", () => {
+    const noAgent = bashCall({ id: "a", agent: undefined });
+    const [row] = selectActiveScripts([noAgent]);
+    expect(row.agent).toBe("principal");
+  });
+  it("shows the raw arg fragment while args are still streaming", () => {
+    const partial = bashCall({
+      id: "a",
+      toolInput: '{"command":"pyt', // TOOL_CALL_ARGS half-arrived
+    });
+    const [row] = selectActiveScripts([partial]);
+    expect(row.command).toBe('{"command":"pyt');
+  });
+});

package/src/components/chat/MessageStream.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Check, ChevronDown, Copy } from "lucide-react";
+import { Check, ChevronDown, Copy, Users } from "lucide-react";
 import { memo, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import type { ChatMessage } from "../../contracts/backend";
 import { buildRenderItems } from "../../contexts/messageGroups";
@@ -8,6 +8,7 @@ import { SystemMessageBubble } from "./SystemMessageBubble";
 import { AskUserCard } from "./AskUserCard";
 import { AutoRetryIndicator } from "./AutoRetryIndicator";
 import { formatToolName, formatPayload } from "../../utils/toolDisplay";
+import { formatElapsed } from "../../utils/format";
 import { getChatScroll, setChatScroll, resolveScrollTop } from "./chatScrollMemory";
 interface MessageStreamProps {
@@ -45,6 +46,12 @@ interface MessageStreamProps {
    * (demo replay), where messages are already terminal.
    */
   runningAgents?: ReadonlySet<string>;
+  /**
+   * #219 — fold non-PI (specialist) agent activity into collapsible per-run
+   * groups so the Principal narrative reads cleanly by default. Off by default
+   * so demo replay keeps its flat, curated presentation.
+   */
+  groupExpertActivity?: boolean;
 }
 // Whether this message participates in same-agent avatar merging. User
@@ -60,17 +67,6 @@ function mergeName(message: ChatMessage): string {
   return message.agent || (message.role === "system" ? "system" : "principal");
 }
-// Compact elapsed formatter: "3.2s" under a minute, "1m 05s" above.
-function formatElapsed(ms: number): string {
-  if (ms < 0) ms = 0;
-  const totalSeconds = ms / 1000;
-  if (totalSeconds < 60) {
-    return `${totalSeconds.toFixed(1)}s`;
-  }
-  const minutes = Math.floor(totalSeconds / 60);
-  const seconds = Math.floor(totalSeconds % 60);
-  return `${minutes}m ${String(seconds).padStart(2, "0")}s`;
-}
 /**
  * Presentational chat message stack — message bubbles, agent rows, hook notes,
@@ -90,15 +86,24 @@ function MessageStreamImpl({
   onAskUserSubmit,
   onRetryCancel,
   runningAgents,
+  groupExpertActivity = false,
 }: MessageStreamProps) {
   const t = useT();
   const [copiedId, setCopiedId] = useState<string | null>(null);
+  // #219 — audit mode: force every specialist group open (reasoning/tool folds
+  // inside stay independent, per issue).
+  const [expandAll, setExpandAll] = useState(false);
   const stackRef = useRef<HTMLDivElement | null>(null);
   const isPinnedRef = useRef(true);
   const renderItems = useMemo(
-    () => buildRenderItems(messages, runningAgents),
-    [messages, runningAgents],
+    () => buildRenderItems(messages, runningAgents, groupExpertActivity),
+    [messages, runningAgents, groupExpertActivity],
+  );
+  const hasExpertGroup = useMemo(
+    () => renderItems.some((item) => item.type === "expertGroup"),
+    [renderItems],
   );
   // Avatar merging: a mergeable assistant/system row whose immediately
@@ -108,17 +113,26 @@ function MessageStreamImpl({
   const continuationIds = useMemo(() => {
     const set = new Set<string>();
     let prevName: string | null = null;
-    for (const item of renderItems) {
-      if (item.type === "single" && isMergeable(item.message)) {
-        const name = mergeName(item.message);
-        if (prevName === name) {
-          set.add(item.message.id);
+    const walk = (items: typeof renderItems) => {
+      for (const item of items) {
+        if (item.type === "single" && isMergeable(item.message)) {
+          const name = mergeName(item.message);
+          if (prevName === name) {
+            set.add(item.message.id);
+          }
+          prevName = name;
+        } else if (item.type === "expertGroup") {
+          // A group is its own merge scope: the first row inside always shows
+          // its avatar, and the group boundary breaks the outer run.
+          prevName = null;
+          walk(item.items);
+          prevName = null;
+        } else {
+          prevName = null;
         }
-        prevName = name;
-      } else {
-        prevName = null;
       }
-    }
+    };
+    walk(renderItems);
     return set;
   }, [renderItems]);
@@ -462,6 +476,58 @@ function MessageStreamImpl({
     return t("chat.thinking");
   };
+  // A folded reasoning/tool activity block. Extracted so it renders identically
+  // at the top level and nested inside an expert group (#219).
+  const renderActivityBlock = (id: string, steps: ChatMessage[], streaming: boolean) => (
+    <div className="activity-block" key={id}>
+      <details>
+        <summary className="activity-summary" aria-label={t("chat.aria.expandThinking")}>
+          {streaming ? <span className="activity-summary__dot" /> : null}
+          <ChevronDown size={14} className="activity-summary__chevron" aria-hidden="true" />
+          <span className="activity-summary__subtitle">{activitySubtitle(steps, streaming)}</span>
+        </summary>
+        <div className="activity-steps">{steps.map(renderActivityStep)}</div>
+      </details>
+    </div>
+  );
+  // Render one top-level or nested render item (single row or activity block).
+  // expertGroup is handled by renderExpertGroup, not here.
+  const renderItem = (item: (typeof renderItems)[number]) => {
+    if (item.type === "single") {
+      return renderSingle(item.message, continuationIds.has(item.message.id));
+    }
+    if (item.type === "activity") {
+      return renderActivityBlock(item.id, item.steps, item.streaming);
+    }
+    return null;
+  };
+  // #219 — a collapsed run of specialist-agent activity. Summary names the
+  // agent(s) and item count; the body reuses the normal single/activity
+  // renderers so reasoning/tool folds inside are preserved. `expandAll` (audit
+  // mode) forces every group open.
+  const renderExpertGroup = (item: Extract<(typeof renderItems)[number], { type: "expertGroup" }>) => {
+    const count = item.items.length;
+    const summary =
+      item.agents.length === 1
+        ? t("chat.expertGroup.summary", { agent: item.agents[0], count })
+        : t("chat.expertGroup.summaryMulti", { n: item.agents.length, count });
+    return (
+      <div className="expert-group" key={item.id}>
+        <details open={expandAll || undefined}>
+          <summary className="expert-group__summary" aria-label={t("chat.aria.expandExpert")}>
+            {item.streaming ? <span className="activity-summary__dot" /> : null}
+            <ChevronDown size={14} className="activity-summary__chevron" aria-hidden="true" />
+            <Users size={13} className="expert-group__icon" aria-hidden="true" />
+            <span className="activity-summary__subtitle">{summary}</span>
+          </summary>
+          <div className="expert-group__body">{item.items.map(renderItem)}</div>
+        </details>
+      </div>
+    );
+  };
   return (
     <div
       className={`message-stack ${className ?? ""}`}
@@ -469,30 +535,24 @@ function MessageStreamImpl({
       onScroll={handleScroll}
       ref={stackRef}
     >
-      {showToolbarCount ? (
+      {showToolbarCount || hasExpertGroup ? (
         <div className="message-stack__toolbar">
-          <span>{t("chat.messageCount", { count: messages.length })}</span>
+          {showToolbarCount ? <span>{t("chat.messageCount", { count: messages.length })}</span> : <span />}
+          {hasExpertGroup ? (
+            <button
+              className={`message-stack__audit-toggle ${expandAll ? "is-active" : ""}`}
+              onClick={() => setExpandAll((v) => !v)}
+              type="button"
+              aria-pressed={expandAll}
+            >
+              <Users size={12} aria-hidden="true" />
+              {expandAll ? t("chat.expertGroup.collapseAll") : t("chat.expertGroup.expandAll")}
+            </button>
+          ) : null}
         </div>
       ) : null}
       {renderItems.map((item) =>
-        item.type === "single" ? (
-          renderSingle(item.message, continuationIds.has(item.message.id))
-        ) : (
-          <div className="activity-block" key={item.id}>
-            <details>
-              <summary className="activity-summary" aria-label={t("chat.aria.expandThinking")}>
-                {item.streaming ? <span className="activity-summary__dot" /> : null}
-                <ChevronDown size={14} className="activity-summary__chevron" aria-hidden="true" />
-                <span className="activity-summary__subtitle">
-                  {activitySubtitle(item.steps, item.streaming)}
-                </span>
-              </summary>
-              <div className="activity-steps">
-                {item.steps.map(renderActivityStep)}
-              </div>
-            </details>
-          </div>
-        ),
+        item.type === "expertGroup" ? renderExpertGroup(item) : renderItem(item),
       )}
       {showTiming && turnTiming && turnTiming.elapsedMs !== null ? (
         <div className="message-stack__total" role="status">