@brainpilot/web 0.0.10 → 0.0.11

package/src/components/settings/SettingsDialog.tsx

@@ -6,6 +6,7 @@ import { useAuth } from "../../contexts/AuthContext";
 import { usePreferences } from "../../contexts/PreferencesContext";
 import { useT } from "../../i18n/useT";
 import { api } from "../../utils/api";
+import { runtimeConfig } from "../../config";
 import { EXAMPLE_MODEL } from "@brainpilot/protocol";
 import { CustomSelect } from "../primitives/CustomSelect";
 import { IconButton } from "../primitives/IconButton";
@@ -18,7 +19,7 @@ type SettingsDialogProps = {
   onClose: () => void;
 };
 
-const tabs: Array<{ id: SettingsTab; labelKey: string; icon: LucideIcon }> = [
+const ALL_TABS: Array<{ id: SettingsTab; labelKey: string; icon: LucideIcon }> = [
   { id: "account", labelKey: "settings.tab.account", icon: UserRound },
   { id: "providers", labelKey: "settings.tab.providers", icon: SlidersHorizontal },
   { id: "mcp", labelKey: "settings.tab.mcp", icon: Plug },
@@ -26,6 +27,12 @@ const tabs: Array<{ id: SettingsTab; labelKey: string; icon: LucideIcon }> = [
   { id: "preferences", labelKey: "settings.tab.preferences", icon: Settings },
 ];
 
+// Local single-user mode has no host-managed identity — the account tab would
+// only show placeholder "local / local / 1970" values, so drop it entirely.
+const tabs = runtimeConfig.localMode
+  ? ALL_TABS.filter((tab) => tab.id !== "account")
+  : ALL_TABS;
+
 const DEFAULT_PROVIDER_FORM = {
   name: "",
   baseUrl: "https://api.anthropic.com",
@@ -59,7 +66,7 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
   const { user } = useAuth();
   const preferences = usePreferences();
   const t = useT();
-  const [activeTab, setActiveTab] = useState<SettingsTab>("account");
+  const [activeTab, setActiveTab] = useState<SettingsTab>(tabs[0].id);
   const [providers, setProviders] = useState<ProviderProfile[]>([]);
   const [mcpServers, setMcpServers] = useState<McpServerEntry[]>([]);
   const [providerForm, setProviderForm] = useState(DEFAULT_PROVIDER_FORM);
@@ -367,7 +374,6 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
                   </div>
                 </dl>
                 <p className="settings-note">{t("settings.account.managedByHost")}</p>
-                {version ? <span className="settings-version">{version}</span> : null}
               </section>
             ) : null}
 
@@ -443,6 +449,19 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
                     </article>
                   );
 
+                  if (providers.length === 0) {
+                    return (
+                      <div className="settings-empty">
+                        <SlidersHorizontal size={22} />
+                        <strong>{t("settings.providers.empty")}</strong>
+                        <p>{t("settings.providers.emptyHint")}</p>
+                        <button className="settings-button" onClick={openProviderForm} type="button">
+                          {t("settings.providers.add")}
+                        </button>
+                      </div>
+                    );
+                  }
+
                   return (
                     <>
                       {sharedProviders.length > 0 ? (
@@ -478,21 +497,34 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
                     {t("settings.mcp.addServer")}
                   </button>
                 </div>
-                <div className="settings-list">
-                  {mcpServers.map((server) => (
-                    <article className="settings-list-item" key={server.name}>
-                      <div>
-                        <strong>{server.name}</strong>
-                        <span>{server.type === "stdio" ? [server.command, ...(server.args || [])].filter(Boolean).join(" ") : server.url}</span>
-                        <small>{server.type}</small>
-                      </div>
-                      <div className="settings-list-item__actions mcp-actions">
-                        <button onClick={() => editMcpServer(server)} type="button">{t("settings.mcp.edit")}</button>
-                        <button onClick={() => void removeMcpServer(server.name)} type="button">{t("settings.mcp.remove")}</button>
-                      </div>
-                    </article>
-                  ))}
-                </div>
+                {mcpServers.length === 0 ? (
+                  <div className="settings-empty">
+                    <Plug size={22} />
+                    <strong>{t("settings.mcp.empty")}</strong>
+                    <p>{t("settings.mcp.emptyHint")}</p>
+                    <button className="settings-button" onClick={openMcpForm} type="button">
+                      {t("settings.mcp.addServer")}
+                    </button>
+                  </div>
+                ) : (
+                  <div className="settings-list">
+                    {mcpServers.map((server) => (
+                      <article className="settings-list-item" key={server.name}>
+                        <div>
+                          <strong>
+                            {server.name}
+                            <span className={`mcp-transport-chip mcp-transport-chip--${server.type}`}>{server.type}</span>
+                          </strong>
+                          <span>{server.type === "stdio" ? [server.command, ...(server.args || [])].filter(Boolean).join(" ") : server.url}</span>
+                        </div>
+                        <div className="settings-list-item__actions mcp-actions">
+                          <button onClick={() => editMcpServer(server)} type="button">{t("settings.mcp.edit")}</button>
+                          <button onClick={() => void removeMcpServer(server.name)} type="button">{t("settings.mcp.remove")}</button>
+                        </div>
+                      </article>
+                    ))}
+                  </div>
+                )}
               </section>
             ) : null}
 
@@ -501,51 +533,77 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
             {activeTab === "preferences" ? (
               <section className="settings-section">
                 <h3>{t("settings.prefs.title")}</h3>
-                <div className="settings-field">
-                  <span>{t("settings.prefs.theme")}</span>
-                  <CustomSelect
-                    ariaLabel={t("settings.prefs.theme")}
-                    onChange={(value) => preferences.setTheme(value as typeof preferences.theme)}
-                    options={[
-                      { label: t("settings.prefs.themeLight"), value: "light" },
-                      { label: t("settings.prefs.themeDark"), value: "dark" },
-                      { label: t("settings.prefs.themeSystem"), value: "system" },
-                    ]}
-                    value={preferences.theme}
-                  />
+
+                <div className="settings-group">
+                  <h4 className="settings-group__title">{t("settings.prefs.groupAppearance")}</h4>
+                  <div className="settings-field settings-field--split">
+                    <div className="settings-field__label">
+                      <span>{t("settings.prefs.theme")}</span>
+                      <small>{t("settings.prefs.themeDesc")}</small>
+                    </div>
+                    <CustomSelect
+                      ariaLabel={t("settings.prefs.theme")}
+                      onChange={(value) => preferences.setTheme(value as typeof preferences.theme)}
+                      options={[
+                        { label: t("settings.prefs.themeLight"), value: "light" },
+                        { label: t("settings.prefs.themeDark"), value: "dark" },
+                        { label: t("settings.prefs.themeSystem"), value: "system" },
+                      ]}
+                      value={preferences.theme}
+                    />
+                  </div>
+                  <div className="settings-field settings-field--split">
+                    <div className="settings-field__label">
+                      <span>{t("settings.prefs.language")}</span>
+                      <small>{t("settings.prefs.languageDesc")}</small>
+                    </div>
+                    <CustomSelect
+                      ariaLabel={t("settings.prefs.language")}
+                      onChange={(value) => preferences.setLanguage(value as typeof preferences.language)}
+                      options={[
+                        { label: "简体中文", value: "zh-CN" },
+                        { label: "English", value: "en-US" },
+                      ]}
+                      value={preferences.language}
+                    />
+                  </div>
                 </div>
-                <div className="settings-field">
-                  <span>{t("settings.prefs.language")}</span>
-                  <CustomSelect
-                    ariaLabel={t("settings.prefs.language")}
-                    onChange={(value) => preferences.setLanguage(value as typeof preferences.language)}
-                    options={[
-                      { label: "简体中文", value: "zh-CN" },
-                      { label: "English", value: "en-US" },
-                    ]}
-                    value={preferences.language}
-                  />
+
+                <div className="settings-group">
+                  <h4 className="settings-group__title">{t("settings.prefs.groupBehavior")}</h4>
+                  <label className="settings-toggle-row">
+                    <span className="settings-toggle-row__text">
+                      <span>{t("settings.prefs.confirmDangerous")}</span>
+                      <small>{t("settings.prefs.confirmDangerousDesc")}</small>
+                    </span>
+                    <input
+                      checked={preferences.security.confirmDangerousActions}
+                      onChange={(event) => preferences.setSecurity({ ...preferences.security, confirmDangerousActions: event.target.checked })}
+                      type="checkbox"
+                    />
+                  </label>
+                  <label className="settings-toggle-row">
+                    <span className="settings-toggle-row__text">
+                      <span>{t("settings.prefs.notifyDone")}</span>
+                      <small>{t("settings.prefs.notifyDoneDesc")}</small>
+                    </span>
+                    <input
+                      checked={preferences.notifications.agentDone}
+                      onChange={(event) => preferences.setNotifications({ ...preferences.notifications, agentDone: event.target.checked })}
+                      type="checkbox"
+                    />
+                  </label>
                 </div>
-                <label className="settings-check">
-                  <input
-                    checked={preferences.security.confirmDangerousActions}
-                    onChange={(event) => preferences.setSecurity({ ...preferences.security, confirmDangerousActions: event.target.checked })}
-                    type="checkbox"
-                  />
-                  <span>{t("settings.prefs.confirmDangerous")}</span>
-                </label>
-                <label className="settings-check">
-                  <input
-                    checked={preferences.notifications.agentDone}
-                    onChange={(event) => preferences.setNotifications({ ...preferences.notifications, agentDone: event.target.checked })}
-                    type="checkbox"
-                  />
-                  <span>{t("settings.prefs.notifyDone")}</span>
-                </label>
               </section>
             ) : null}
           </div>
         </div>
+
+        {version ? (
+          <footer className="settings-modal__footer">
+            <span className="settings-version">{version}</span>
+          </footer>
+        ) : null}
       </section>
 
       {isProviderFormOpen ? (

package/src/components/shell/SandboxStatus.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from "react";
+import { Radio, Server } from "lucide-react";
 import { useSandbox } from "../../contexts/SandboxContext";
 import { useSessions } from "../../contexts/SessionContext";
 import { useT } from "../../i18n/useT";
@@ -24,6 +25,13 @@ function formatBytes(bytes?: number) {
   return `${value >= 10 ? value.toFixed(0) : value.toFixed(1)} ${units[index]}`;
 }
 
+/** Clamp a percentage into [0, 100] and pick a severity band for the meter fill. */
+function meterLevel(percent?: number): { pct: number; level: "ok" | "warning" | "critical" } {
+  const pct = Math.max(0, Math.min(100, Math.round(percent ?? 0)));
+  const level = pct >= 90 ? "critical" : pct >= 75 ? "warning" : "ok";
+  return { pct, level };
+}
+
 function getConnectionState(status: string, isConnected: boolean): SandboxConnectionState {
   if (status === "running" && isConnected) {
     return "connected";
@@ -64,6 +72,7 @@ function getStatusKey(status: string, isConnected: boolean) {
 export function SandboxStatus() {
   const [isOpen, setIsOpen] = useState(false);
   const [logs, setLogs] = useState("");
+  const [showLogs, setShowLogs] = useState(false);
   const [health, setHealth] = useState<Record<string, unknown> | null>(null);
   const [detailsLoading, setDetailsLoading] = useState(false);
   const rootRef = useRef<HTMLDivElement | null>(null);
@@ -157,98 +166,119 @@ export function SandboxStatus() {
         id="sandbox-status-popover"
         role="dialog"
       >
-        <div className="sandbox-status__header">
-          <span className="sandbox-status__eyebrow">Sandbox</span>
-          <strong>{t(connectionLabelKey[connection])}</strong>
+        <div className={`sandbox-status__hero sandbox-status__hero--${connection}`}>
+          <span className="sandbox-status__hero-dot" aria-hidden="true" />
+          <div className="sandbox-status__hero-text">
+            <strong>{t(connectionLabelKey[connection])}</strong>
+            <span className={isLoading ? "is-loading" : ""}>
+              {(() => {
+                const notice = getStatusKey(effectiveStatus, isConnected);
+                return t(notice.key, notice.vars);
+              })()}
+            </span>
+          </div>
         </div>
-
-        <p className={`sandbox-status__notice ${isLoading ? "is-loading" : ""}`}>
-          {(() => {
-            const notice = getStatusKey(effectiveStatus, isConnected);
-            return t(notice.key, notice.vars);
-          })()}
-        </p>
         {error ? <p className="sandbox-status__empty">{error}</p> : null}
 
         {hasSandbox ? (
           <>
-            <dl className="sandbox-status__grid">
-              <div>
-                <dt>{t("sandbox.label.name")}</dt>
-                <dd>{currentSandbox.name}</dd>
-              </div>
-              <div>
-                <dt>{t("sandbox.label.id")}</dt>
-                <dd>{currentSandbox.id}</dd>
-              </div>
-              <div>
-                <dt>{t("sandbox.label.container")}</dt>
-                <dd>{currentSandbox.containerName || "-"}</dd>
-              </div>
-              <div>
-                <dt>{t("sandbox.label.hostApi")}</dt>
-                <dd>{currentSandbox.hostApiUrl || "-"}</dd>
-              </div>
-              <div>
-                <dt>{t("sandbox.label.port")}</dt>
-                <dd>{currentSandbox.port ?? "-"}</dd>
-              </div>
-              <div>
-                <dt>{t("sandbox.label.created")}</dt>
-                <dd>{new Date(currentSandbox.createdAt).toLocaleString()}</dd>
-              </div>
-            </dl>
-
-            <div className="sandbox-status__metrics">
-              <div>
-                <span>{t("sandbox.label.memory")}</span>
-                <strong>
-                  {formatBytes(stats?.memory.usedBytes)} / {formatBytes(stats?.memory.limitBytes)}
-                </strong>
-                <small>{stats?.memory.percent ?? 0}%</small>
-              </div>
-              <div>
-                <span>{t("sandbox.label.cpu")}</span>
-                <strong>{t("sandbox.cpuUsed", { percent: stats?.cpu.usedPercent ?? 0 })}</strong>
-                <small>
-                  {t("sandbox.cpuQuota", { quota: stats?.cpu.quotaPercent ?? 0, cpus: stats?.cpu.onlineCpus ?? 0 })}
-                </small>
-              </div>
-              <div>
-                <span>{t("sandbox.label.pids")}</span>
-                <strong>
-                  {stats?.pids.current ?? 0} / {stats?.pids.limit ?? t("sandbox.unlimited")}
-                </strong>
-              </div>
-              <div>
-                <span>{t("sandbox.label.disk")}</span>
-                <strong>
-                  {formatBytes(stats?.disk.workspaceUsedBytes)} / {formatBytes(stats?.disk.quotaBytes)}
-                </strong>
-                <small>{stats?.disk.percentOfQuota ?? 0}%</small>
-              </div>
+            <div className="sandbox-status__meters">
+              {(() => {
+                const rows: Array<{ label: string; percent?: number; detail: string }> = [
+                  {
+                    label: t("sandbox.label.memory"),
+                    percent: stats?.memory.percent,
+                    detail: `${formatBytes(stats?.memory.usedBytes)} / ${formatBytes(stats?.memory.limitBytes)}`,
+                  },
+                  {
+                    label: t("sandbox.label.disk"),
+                    percent: stats?.disk.percentOfQuota,
+                    detail: `${formatBytes(stats?.disk.workspaceUsedBytes)} / ${formatBytes(stats?.disk.quotaBytes)}`,
+                  },
+                  {
+                    label: t("sandbox.label.cpu"),
+                    percent: stats?.cpu.usedPercent,
+                    detail: t("sandbox.cpuQuota", { quota: stats?.cpu.quotaPercent ?? 0, cpus: stats?.cpu.onlineCpus ?? 0 }),
+                  },
+                ];
+                return rows.map((row) => {
+                  const { pct, level } = meterLevel(row.percent);
+                  return (
+                    <div className="sandbox-meter" key={row.label}>
+                      <div className="sandbox-meter__head">
+                        <span>{row.label}</span>
+                        <strong>{pct}%</strong>
+                      </div>
+                      <div className="sandbox-meter__track" aria-hidden="true">
+                        <span className={`sandbox-meter__fill sandbox-meter__fill--${level}`} style={{ width: `${pct}%` }} />
+                      </div>
+                      <small>{row.detail}</small>
+                    </div>
+                  );
+                });
+              })()}
             </div>
 
-            <div className="sandbox-status__health">
-              <div>
-                <span>{t("sandbox.label.health")}</span>
-                <strong>{String(health?.status ?? (detailsLoading ? t("sandbox.health.checking") : t("sandbox.health.unknown")))}</strong>
-              </div>
-              <div>
-                <span>{t("sandbox.label.runtime")}</span>
-                <strong>{health?.agent_runtime === false ? t("sandbox.health.offline") : health?.agent_runtime ? t("sandbox.health.online") : "-"}</strong>
-              </div>
-              <div>
-                <span>{t("sandbox.label.sse")}</span>
-                <strong>{isConnected ? t("sandbox.health.connected") : t("sandbox.health.offline")}</strong>
-              </div>
-              <div>
-                <span>{t("sandbox.label.checked")}</span>
-                <strong>{health?.checked_at ? new Date(String(health.checked_at)).toLocaleTimeString() : "-"}</strong>
-              </div>
+            <div className="sandbox-status__chips">
+              {(() => {
+                const runtimeOnline = health?.agent_runtime !== false && !!health?.agent_runtime;
+                const runtimeKnown = health?.agent_runtime !== undefined;
+                return (
+                  <span className={`sandbox-chip sandbox-chip--${runtimeKnown ? (runtimeOnline ? "ok" : "off") : "unknown"}`}>
+                    <Server size={13} />
+                    {t("sandbox.label.runtime")}
+                    <i className="sandbox-chip__dot" aria-hidden="true" />
+                  </span>
+                );
+              })()}
+              <span className={`sandbox-chip sandbox-chip--${isConnected ? "ok" : "off"}`}>
+                <Radio size={13} />
+                {t("sandbox.label.sse")}
+                <i className="sandbox-chip__dot" aria-hidden="true" />
+              </span>
             </div>
 
-            <pre className="sandbox-status__logs">{detailsLoading ? t("sandbox.logs.loading") : logs || t("sandbox.logs.empty")}</pre>
+            <details className="sandbox-status__details">
+              <summary>{t("sandbox.details.more")}</summary>
+              <dl className="sandbox-status__grid">
+                <div>
+                  <dt>{t("sandbox.label.name")}</dt>
+                  <dd>{currentSandbox.name}</dd>
+                </div>
+                <div>
+                  <dt>{t("sandbox.label.id")}</dt>
+                  <dd>{currentSandbox.id}</dd>
+                </div>
+                <div>
+                  <dt>{t("sandbox.label.container")}</dt>
+                  <dd>{currentSandbox.containerName || "-"}</dd>
+                </div>
+                <div>
+                  <dt>{t("sandbox.label.hostApi")}</dt>
+                  <dd>{currentSandbox.hostApiUrl || "-"}</dd>
+                </div>
+                <div>
+                  <dt>{t("sandbox.label.port")}</dt>
+                  <dd>{currentSandbox.port ?? "-"}</dd>
+                </div>
+                <div>
+                  <dt>{t("sandbox.label.pids")}</dt>
+                  <dd>{stats?.pids.current ?? 0} / {stats?.pids.limit ?? t("sandbox.unlimited")}</dd>
+                </div>
+                <div>
+                  <dt>{t("sandbox.label.created")}</dt>
+                  <dd>{new Date(currentSandbox.createdAt).toLocaleString()}</dd>
+                </div>
+                <div>
+                  <dt>{t("sandbox.label.checked")}</dt>
+                  <dd>{health?.checked_at ? new Date(String(health.checked_at)).toLocaleTimeString() : "-"}</dd>
+                </div>
+              </dl>
+            </details>
+
+            {showLogs ? (
+              <pre className="sandbox-status__logs">{detailsLoading ? t("sandbox.logs.loading") : logs || t("sandbox.logs.empty")}</pre>
+            ) : null}
           </>
         ) : (
           <p className="sandbox-status__empty">{t("sandbox.empty")}</p>
@@ -263,7 +293,21 @@ export function SandboxStatus() {
               <button disabled={isLoading} onClick={() => void refresh()} type="button">
                 {t("sandbox.action.refresh")}
               </button>
-              <button disabled={detailsLoading} onClick={() => void loadDetails()} type="button">
+              <button
+                aria-pressed={showLogs}
+                className={showLogs ? "is-active" : ""}
+                disabled={detailsLoading}
+                onClick={() => {
+                  setShowLogs((current) => {
+                    const next = !current;
+                    if (next) {
+                      void loadDetails();
+                    }
+                    return next;
+                  });
+                }}
+                type="button"
+              >
                 {t("sandbox.action.logs")}
               </button>
               <button

package/src/contexts/messageGroups.ts

@@ -2,12 +2,17 @@ import { ChatMessage } from "../contracts/backend";
 
 /**
  * A unit of rendering in the chat stream. Either a single standalone message
- * (user prompt, assistant text, error, hook note) or an "activity" group that
- * folds adjacent reasoning and tool calls/results into one collapsible block.
+ * (user prompt, assistant text, error, hook note), an "activity" group that
+ * folds adjacent reasoning and tool calls/results into one collapsible block,
+ * or (#219) an "expertGroup" that folds a run of non-PI (specialist) agent
+ * render items behind one more level of disclosure so the PI narrative reads
+ * cleanly by default. An expertGroup nests already-built single/activity items
+ * so the reasoning/tool folds inside it are preserved when expanded.
  */
 export type RenderItem =
   | { type: "single"; message: ChatMessage }
-  | { type: "activity"; id: string; steps: ChatMessage[]; streaming: boolean };
+  | { type: "activity"; id: string; steps: ChatMessage[]; streaming: boolean }
+  | { type: "expertGroup"; id: string; agents: string[]; items: RenderItem[]; streaming: boolean };
 
 /**
  * #134 — tool visibility model. Internal tools are part of the agent's plumbing
@@ -101,6 +106,7 @@ function isStandalone(message: ChatMessage): boolean {
 export function buildRenderItems(
   messages: ChatMessage[],
   runningAgents?: ReadonlySet<string>,
+  groupExpert = false,
 ): RenderItem[] {
   const items: RenderItem[] = [];
   // #134 — internal tools (trace bookkeeping) are hidden from the chat UI.
@@ -129,5 +135,105 @@ export function buildRenderItems(
     }
   }
   flush();
-  return items;
+  // #219 — second pass: fold consecutive specialist (non-PI) items into
+  // collapsible expert groups. Off by default (demo replay / legacy callers).
+  return groupExpert ? groupExpertItems(items, runningAgents) : items;
+}
+
+/* -------------------------------------------------------------------------- *
+ * #219 — expert-agent activity grouping.
+ * -------------------------------------------------------------------------- */
+
+/** The principal (PI) agent name; unattributed items default to it. */
+const PRINCIPAL = "principal";
+
+/**
+ * Important events stay visible even when they come from a specialist agent —
+ * they must never be buried inside a collapsed group (issue #219 UX goal:
+ * "avoid hiding important failures, blockers, or user-action-required events").
+ * Errors, approval/user-input requests, and warning+ system messages / hooks
+ * escape grouping and render standalone.
+ */
+function isImportantEvent(message: ChatMessage): boolean {
+  if (message.kind === "error" || message.kind === "ask_user") return true;
+  if (message.kind === "system_message") {
+    const level = message.systemMessage?.level;
+    return level === "warning" || level === "error" || level === "fatal";
+  }
+  if (message.kind === "hook") {
+    return message.hookLevel === "warning" || message.hookLevel === "error";
+  }
+  return false;
+}
+
+/** Owning agent of a render item: the message's agent, or the activity's first step. */
+function itemAgent(item: RenderItem): string {
+  if (item.type === "single") return item.message.agent ?? PRINCIPAL;
+  if (item.type === "activity") return item.steps[0]?.agent ?? PRINCIPAL;
+  return PRINCIPAL;
+}
+
+/**
+ * A render item is a foldable specialist item when it belongs to a non-PI agent
+ * AND (for singles) is not an important event that must stay surfaced. User
+ * prompts and PI/unattributed items always break the run.
+ */
+function isFoldableExpertItem(item: RenderItem): boolean {
+  if (itemAgent(item) === PRINCIPAL) return false;
+  if (item.type === "single") {
+    if (item.message.role === "user") return false;
+    if (isImportantEvent(item.message)) return false;
+  }
+  return true;
+}
+
+function itemStreaming(item: RenderItem, runningAgents?: ReadonlySet<string>): boolean {
+  if (item.type === "activity") return item.streaming;
+  if (item.type === "single") {
+    return !!item.message.streaming || (runningAgents?.has(itemAgent(item)) ?? false);
+  }
+  return false;
+}
+
+/** Fold consecutive foldable specialist items into one expertGroup each. */
+function groupExpertItems(items: RenderItem[], runningAgents?: ReadonlySet<string>): RenderItem[] {
+  const out: RenderItem[] = [];
+  let run: RenderItem[] = [];
+  const flushRun = () => {
+    if (run.length === 0) return;
+    // A lone expert `activity` item is already collapsed on its own — wrapping
+    // it in a second disclosure level just makes the user click twice. Leave it.
+    // A lone expert `single` (standalone text) still gets grouped so specialist
+    // chatter is collapsed by default (issue #219 acceptance criteria).
+    if (run.length === 1 && run[0].type === "activity") {
+      out.push(run[0]);
+      run = [];
+      return;
+    }
+    const agents = Array.from(new Set(run.map(itemAgent)));
+    out.push({
+      type: "expertGroup",
+      id: `expert-${idOf(run[0])}`,
+      agents,
+      items: run,
+      streaming: run.some((it) => itemStreaming(it, runningAgents)),
+    });
+    run = [];
+  };
+  for (const item of items) {
+    if (isFoldableExpertItem(item)) {
+      run.push(item);
+    } else {
+      flushRun();
+      out.push(item);
+    }
+  }
+  flushRun();
+  return out;
+}
+
+/** Stable id for a render item (drives <details> DOM reuse across re-renders). */
+function idOf(item: RenderItem): string {
+  if (item.type === "single") return item.message.id;
+  return item.id;
 }

package/src/contexts/messageReducer.ts

@@ -338,7 +338,17 @@ export function reduceMessagesForEvent(existing: ChatMessage[], event: WebSocket
 
     // 修正6 — system_message: 4-level styled bubble in the conversation stream.
     case "system_message": {
-      return [...existing, systemMessageToChatMessage(event)];
+      const msg = systemMessageToChatMessage(event);
+      // #167: coalesce by stable id — a repeated system_message carrying an id
+      // that already exists (e.g. an agent's retry warning ticking n/N) updates
+      // the existing bubble in place instead of stacking a new one. Messages
+      // without a stable id (random-id path) always append, as before.
+      const e = event as Record<string, unknown>;
+      const hasStableId = typeof (e.id ?? e.messageId) === "string";
+      if (hasStableId && existing.some((m) => m.id === msg.id)) {
+        return existing.map((m) => (m.id === msg.id ? msg : m));
+      }
+      return [...existing, msg];
     }
 
     // 修正6 — user_input_request (ask_user): interactive card. Keyed by