refactor(dashboard): remove the dead tools box from the chat sidebar (#51737)

The dashboard chat sidebar's tool-call activity card was disabled in the
product — both ChatPage mounts passed showTools={false} (since #49077),
so the box never rendered. The sidebar still subscribed to tool.* events
and accumulated them in state for a panel nobody saw.

Remove the tools card, the showTools prop, the tool.* event handling and
state, and the now-orphaned ToolCall component. The /api/events
subscription stays for session.info (live title) and
dashboard.new_session_requested. The sidebar is now just the model
selector box; the session list (ChatSessionList) is unchanged.

No behavior change in the live dashboard — the tools box was already
hidden.

web/src/components/ChatSidebar.tsx

@@ -14,11 +14,10 @@
  *
  *   2. **Event subscriber** (/api/events?channel=…) — passive, receives
  *      every dispatcher emit from the PTY-side `tui_gateway.entry` that
- *      the dashboard fanned out.  This is how `tool.start/progress/
- *      complete` from the agent loop reach the sidebar even though the
- *      PTY child runs three processes deep from us.  The `channel` id
- *      ties this listener to the same chat tab's PTY child — see
- *      `ChatPage.tsx` for where the id is generated.
+ *      the dashboard fanned out.  The sidebar uses it for `session.info`
+ *      (live chat title) and `dashboard.new_session_requested`.  The
+ *      `channel` id ties this listener to the same chat tab's PTY child —
+ *      see `ChatPage.tsx` for where the id is generated.
  *
  * Best-effort throughout: WS failures show in the badge / banner, the
  * terminal pane keeps working unimpaired.
@@ -31,7 +30,6 @@ import { Card } from "@nous-research/ui/ui/components/card";
 import { ModelPickerDialog } from "@/components/ModelPickerDialog";
 import { ModelReloadConfirm } from "@/components/ModelReloadConfirm";
 import { ReasoningPicker } from "@/components/ReasoningPicker";
-import { ToolCall, type ToolEntry } from "@/components/ToolCall";
 import { GatewayClient, type ConnectionState } from "@/lib/gatewayClient";
 import { api, HERMES_BASE_PATH, buildWsAuthParam } from "@/lib/api";
 import { titleFromSessionInfoPayload } from "@/lib/chat-title";
@@ -53,8 +51,6 @@ interface RpcEnvelope {
   params?: { type?: string; payload?: unknown };
 }
 
-const TOOL_LIMIT = 20;
-
 const STATE_LABEL: Record<ConnectionState, string> = {
   idle: "idle",
   connecting: "connecting",
@@ -81,12 +77,6 @@ interface ChatSidebarProps {
   className?: string;
   onDashboardNewSessionRequest?: () => void;
   onSessionTitleChange?: (title: string | null) => void;
-  /**
-   * Render the tool-call activity card. Defaults to true. The dashboard Chat
-   * tab sets this false so the right rail stays a thin model + session-list
-   * column; the model picker and its event plumbing are unaffected.
-   */
-  showTools?: boolean;
 }
 
 export function ChatSidebar({
@@ -95,7 +85,6 @@ export function ChatSidebar({
   className,
   onDashboardNewSessionRequest,
   onSessionTitleChange,
-  showTools = true,
 }: ChatSidebarProps) {
   // `version` bumps on reconnect; gw is derived so we never call setState
   // for it inside an effect (React 19's set-state-in-effect rule). The
@@ -107,7 +96,6 @@ export function ChatSidebar({
 
   const [state, setState] = useState<ConnectionState>("idle");
   const [info, setInfo] = useState<SessionInfo>({});
-  const [tools, setTools] = useState<ToolEntry[]>([]);
   const [modelOpen, setModelOpen] = useState(false);
   const [error, setError] = useState<string | null>(null);
   // The badge shows config.yaml's main model (`model.default`) via
@@ -163,7 +151,6 @@ export function ChatSidebar({
     if (prevScopeKey.current === scopeKey) return;
     prevScopeKey.current = scopeKey;
     setError(null);
-    setTools([]);
     setVersion((v) => v + 1);
   }, [scopeKey]);
 
@@ -291,74 +278,6 @@ export function ChatSidebar({
           }
         } else if (type === "dashboard.new_session_requested") {
           onDashboardNewSessionRequest?.();
-        } else if (type === "tool.start") {
-          const p = payload as
-            | { tool_id?: string; name?: string; context?: string }
-            | undefined;
-          const toolId = p?.tool_id;
-
-          if (!toolId) {
-            return;
-          }
-
-          setTools((prev) =>
-            [
-              ...prev,
-              {
-                kind: "tool" as const,
-                id: `tool-${toolId}-${prev.length}`,
-                tool_id: toolId,
-                name: p?.name ?? "tool",
-                context: p?.context,
-                status: "running" as const,
-                startedAt: Date.now(),
-              },
-            ].slice(-TOOL_LIMIT),
-          );
-        } else if (type === "tool.progress") {
-          const p = payload as
-            | { name?: string; preview?: string }
-            | undefined;
-
-          if (!p?.name || !p.preview) {
-            return;
-          }
-
-          setTools((prev) =>
-            prev.map((t) =>
-              t.status === "running" && t.name === p.name
-                ? { ...t, preview: p.preview }
-                : t,
-            ),
-          );
-        } else if (type === "tool.complete") {
-          const p = payload as
-            | {
-                tool_id?: string;
-                summary?: string;
-                error?: string;
-                inline_diff?: string;
-              }
-            | undefined;
-
-          if (!p?.tool_id) {
-            return;
-          }
-
-          setTools((prev) =>
-            prev.map((t) =>
-              t.tool_id === p.tool_id
-                ? {
-                    ...t,
-                    status: p.error ? "error" : "done",
-                    summary: p.summary,
-                    error: p.error,
-                    inline_diff: p.inline_diff,
-                    completedAt: Date.now(),
-                  }
-                : t,
-            ),
-          );
         }
       });
     })();
@@ -377,7 +296,6 @@ export function ChatSidebar({
 
   const reconnect = useCallback(() => {
     setError(null);
-    setTools([]);
     setModelNotice(null);
     setPendingReloadModel(null);
     setVersion((v) => v + 1);
@@ -472,24 +390,6 @@ export function ChatSidebar({
         </Card>
       )}
 
-      {showTools && (
-        <Card className="flex min-h-0 flex-none flex-col px-2 py-2">
-          <div className="text-display px-1 pb-2 text-xs tracking-wider text-text-tertiary">
-            tools
-          </div>
-
-          <div className="flex min-h-0 flex-col gap-1.5">
-            {tools.length === 0 ? (
-              <div className="px-2 py-4 text-center text-xs text-text-secondary">
-                no tool calls yet
-              </div>
-            ) : (
-              tools.map((t) => <ToolCall key={t.id} tool={t} />)
-            )}
-          </div>
-        </Card>
-      )}
-
       {modelOpen && (
         <ModelPickerDialog
           // Same path the Models page uses (REST /api/model/set), not the

web/src/components/ToolCall.tsx

@@ -1,228 +0,0 @@
-import { ListItem } from "@nous-research/ui/ui/components/list-item";
-import {
-  AlertCircle,
-  Check,
-  ChevronDown,
-  ChevronRight,
-  Zap,
-} from "lucide-react";
-import { useEffect, useState } from "react";
-
-/**
- * Expandable tool call row — the web equivalent of Ink's ToolTrail node.
- *
- * Renders one `tool.start` + `tool.complete` pair (plus any `tool.progress`
- * in between) as a single collapsible item in the transcript:
- *
- *   ▸ ● read_file(path=/foo)                         2.3s
- *
- * Click the header to reveal a preformatted body with context (args), the
- * streaming preview (while running), and the final summary or error. Error
- * rows auto-expand so failures aren't silently collapsed.
- */
-
-export interface ToolEntry {
-  kind: "tool";
-  id: string;
-  tool_id: string;
-  name: string;
-  context?: string;
-  preview?: string;
-  summary?: string;
-  error?: string;
-  inline_diff?: string;
-  status: "running" | "done" | "error";
-  startedAt: number;
-  completedAt?: number;
-}
-
-const STATUS_TONE: Record<ToolEntry["status"], string> = {
-  running: "border-primary/40 bg-primary/[0.04]",
-  done: "border-border bg-muted/20",
-  error: "border-destructive/50 bg-destructive/[0.04]",
-};
-
-const BULLET_TONE: Record<ToolEntry["status"], string> = {
-  running: "text-primary",
-  done: "text-primary/80",
-  error: "text-destructive",
-};
-
-const TICK_MS = 500;
-
-export function ToolCall({ tool }: { tool: ToolEntry }) {
-  // `open` is derived: errors default-expanded, everything else collapsed.
-  // `null` means "follow the default"; any explicit bool is the user's override.
-  // This lets a running tool flip to expanded automatically when it errors,
-  // without mirroring state in an effect.
-  const [userOverride, setUserOverride] = useState<boolean | null>(null);
-  const open = userOverride ?? tool.status === "error";
-
-  // Tick `now` while the tool is running so the elapsed label updates live.
-  const [now, setNow] = useState(() => Date.now());
-  useEffect(() => {
-    if (tool.status !== "running") return;
-    const id = window.setInterval(() => setNow(() => Date.now()), TICK_MS);
-    return () => window.clearInterval(id);
-  }, [tool.status]);
-
-  // Historical tools (hydrated from session.resume) signal missing timestamps
-  // with `startedAt === 0`; we hide the elapsed badge for those rather than
-  // rendering a misleading "0ms".
-  const hasTimestamps = tool.startedAt > 0;
-  const elapsed = hasTimestamps
-    ? fmtElapsed((tool.completedAt ?? now) - tool.startedAt)
-    : null;
-
-  const hasBody = !!(
-    tool.context ||
-    tool.preview ||
-    tool.summary ||
-    tool.error ||
-    tool.inline_diff
-  );
-
-  const Chevron = open ? ChevronDown : ChevronRight;
-
-  return (
-    <div
-      className={`rounded-md border overflow-hidden ${STATUS_TONE[tool.status]}`}
-    >
-      <ListItem
-        onClick={() => setUserOverride(!open)}
-        disabled={!hasBody}
-        aria-expanded={open}
-        className="px-2.5 py-1.5 text-xs hover:bg-foreground/2 disabled:cursor-default"
-      >
-        {hasBody ? (
-          <Chevron className="h-3 w-3 shrink-0 text-muted-foreground" />
-        ) : (
-          <span className="w-3 shrink-0" />
-        )}
-
-        <Zap className={`h-3 w-3 shrink-0 ${BULLET_TONE[tool.status]}`} />
-
-        <span className="font-mono font-medium shrink-0">{tool.name}</span>
-
-        <span className="font-mono text-text-secondary truncate min-w-0 flex-1">
-          {tool.context ?? ""}
-        </span>
-
-        {tool.status === "running" && (
-          <span
-            className="inline-block h-2 w-2 rounded-full bg-primary animate-pulse shrink-0"
-            title="running"
-          />
-        )}
-        {tool.status === "error" && (
-          <AlertCircle
-            className="h-3 w-3 shrink-0 text-destructive"
-            aria-label="error"
-          />
-        )}
-        {tool.status === "done" && (
-          <Check
-            className="h-3 w-3 shrink-0 text-primary/80"
-            aria-label="done"
-          />
-        )}
-
-        {elapsed && (
-          <span className="font-mono text-xs text-text-tertiary tabular-nums shrink-0">
-            {elapsed}
-          </span>
-        )}
-      </ListItem>
-
-      {open && hasBody && (
-        <div className="border-t border-border/60 px-3 py-2 space-y-2 text-xs font-mono">
-          {tool.context && <Section label="context">{tool.context}</Section>}
-
-          {tool.preview && tool.status === "running" && (
-            <Section label="streaming">
-              {tool.preview}
-              <span className="inline-block w-1.5 h-3 align-middle bg-foreground/40 ml-0.5 animate-pulse" />
-            </Section>
-          )}
-
-          {tool.inline_diff && (
-            <Section label="diff">
-              <pre className="whitespace-pre overflow-x-auto text-[0.7rem] leading-snug">
-                {colorizeDiff(tool.inline_diff)}
-              </pre>
-            </Section>
-          )}
-
-          {tool.summary && (
-            <Section label="result">
-              <span className="text-foreground/90 whitespace-pre-wrap">
-                {tool.summary}
-              </span>
-            </Section>
-          )}
-
-          {tool.error && (
-            <Section label="error" tone="error">
-              <span className="text-destructive whitespace-pre-wrap">
-                {tool.error}
-              </span>
-            </Section>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function Section({
-  label,
-  children,
-  tone,
-}: {
-  label: string;
-  children: React.ReactNode;
-  tone?: "error";
-}) {
-  return (
-    <div className="flex gap-3">
-      <span
-        className={`text-display font-mondwest tracking-wider text-xs shrink-0 w-20 pt-0.5 ${
-          tone === "error" ? "text-destructive" : "text-text-tertiary"
-        }`}
-      >
-        {label}
-      </span>
-
-      <div className="flex-1 min-w-0 text-muted-foreground">{children}</div>
-    </div>
-  );
-}
-
-function fmtElapsed(ms: number): string {
-  const sec = Math.max(0, ms) / 1000;
-  if (sec < 1) return `${Math.round(ms)}ms`;
-  if (sec < 10) return `${sec.toFixed(1)}s`;
-  if (sec < 60) return `${Math.round(sec)}s`;
-
-  const m = Math.floor(sec / 60);
-  const s = Math.round(sec % 60);
-  return s ? `${m}m ${s}s` : `${m}m`;
-}
-
-/** Colorize unified-diff lines for the inline diff section. */
-function colorizeDiff(diff: string): React.ReactNode {
-  return diff.split("\n").map((line, i) => (
-    <div key={i} className={diffLineClass(line)}>
-      {line || "\u00A0"}
-    </div>
-  ));
-}
-
-function diffLineClass(line: string): string {
-  if (line.startsWith("+") && !line.startsWith("+++"))
-    return "text-success";
-  if (line.startsWith("-") && !line.startsWith("---"))
-    return "text-destructive";
-  if (line.startsWith("@@")) return "text-primary";
-  return "text-text-secondary";
-}

web/src/pages/ChatPage.tsx

@@ -964,7 +964,6 @@ export default function ChatPage({ isActive = true }: { isActive?: boolean }) {
                 profile={scopedProfile}
                 onDashboardNewSessionRequest={startFreshDashboardChat}
                 onSessionTitleChange={handleSessionTitleChange}
-                showTools={false}
               />
             </div>
             <ChatSessionList
@@ -1057,14 +1056,13 @@ export default function ChatPage({ isActive = true }: { isActive?: boolean }) {
             aria-label={modelToolsLabel}
             className="flex min-h-0 shrink-0 flex-col gap-3 overflow-hidden lg:h-full lg:w-60"
           >
-            {/* Model picker (tools card hidden — keeps the rail thin). */}
+            {/* Model picker — keeps the rail thin. */}
             <div className="shrink-0">
               <ChatSidebar
                 channel={channel}
                 profile={scopedProfile}
                 onDashboardNewSessionRequest={startFreshDashboardChat}
                 onSessionTitleChange={handleSessionTitleChange}
-                showTools={false}
               />
             </div>