feat(FN-2902): merge fusion/fn-2902

- feat(FN-2902): complete Step 6 — address review feedback
- test(FN-2902): stabilize bundle-output assertions for pi-claude-cli
- test(FN-2902): complete Step 4 — cover grouped tool-call rendering
- feat(FN-2902): complete Step 3 — add grouped tool-call styles
- feat(FN-2902): complete Step 2 — group multiple tool calls in QuickChatFAB
- feat(FN-2902): complete Step 1 — group multiple tool calls in ChatView
- chore(release): v0.8.3
- Update changeset
- fix(tui): swap 3/4 panel hotkeys so they match the help text
- fix(tui): always show auth token and report accurate macOS memory usage
- chore(release): v0.8.2
- feat(FN-2895): merge fusion/fn-2895
- fix(cli): validate agentId in fn_task_create/update and unblock bundle tests

Fusion-Task-Id: FN-2902

packages/dashboard/app/components/ChatView.tsx

@@ -14,7 +14,6 @@ import {
   ChevronLeft,
   Bot,
   Square,
-  Wrench,
   Eye,
   EyeOff,
 } from "lucide-react";
@@ -29,6 +28,7 @@ import { AgentMentionPopup } from "./AgentMentionPopup";
 import { FileMentionPopup } from "./FileMentionPopup";
 import { useFileMention } from "../hooks/useFileMention";
 import { useMobileKeyboard } from "../hooks/useMobileKeyboard";
+import { ChatToolCalls } from "./ChatToolCalls";
 
 export interface ChatViewProps {
   projectId?: string;
@@ -117,109 +117,8 @@ function formatModelTag(provider?: string | null, modelId?: string | null): stri
   return formatted.length > 30 ? formatted.slice(0, 30) + "…" : formatted;
 }
 
-function truncateValue(value: string, maxLength: number): string {
-  return value.length > maxLength ? `${value.slice(0, maxLength)}…` : value;
-}
-
-function formatToolArgsSummary(args?: Record<string, unknown>): string | null {
-  if (!args) return null;
-
-  const entries = Object.entries(args);
-  if (entries.length === 0) return null;
-
-  return entries
-    .map(([key, value]) => {
-      let stringValue = "";
-      if (typeof value === "string") {
-        stringValue = value;
-      } else {
-        try {
-          stringValue = JSON.stringify(value);
-        } catch {
-          stringValue = String(value);
-        }
-      }
-      return `${key}=${truncateValue(stringValue, 50)}`;
-    })
-    .join(", ");
-}
-
-function formatToolResultSummary(result: unknown): string | null {
-  if (result === undefined) {
-    return null;
-  }
-
-  if (typeof result === "string") {
-    return truncateValue(result, 200);
-  }
-
-  try {
-    return truncateValue(JSON.stringify(result), 200);
-  } catch {
-    return truncateValue(String(result), 200);
-  }
-}
-
 function renderToolCalls(toolCalls?: ToolCallInfo[]): ReactNode {
-  if (!toolCalls || toolCalls.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className="chat-tool-calls" data-testid="chat-tool-calls">
-      <div className="chat-tool-calls-header">
-        <Wrench size={12} aria-hidden="true" />
-        <span>Tool calls</span>
-      </div>
-      {toolCalls.map((toolCall, index) => {
-        const isRunning = toolCall.status === "running";
-        const isError = toolCall.status === "completed" && toolCall.isError;
-        const argsSummary = formatToolArgsSummary(toolCall.args);
-        const resultSummary = formatToolResultSummary(toolCall.result);
-        const summaryPreview = isRunning
-          ? argsSummary
-          : resultSummary
-            ? `result: ${resultSummary}`
-            : argsSummary
-              ? `args: ${argsSummary}`
-              : null;
-        const statusLabel = isRunning ? "running" : isError ? "error" : "completed";
-
-        return (
-          <details
-            key={`${toolCall.toolName}-${index}`}
-            className={`chat-tool-call${isRunning ? " chat-tool-call--running" : ""}${isError ? " chat-tool-call--error" : ""}`}
-            open={isRunning}
-          >
-            <summary>
-              <span className="chat-tool-call-status-dot" aria-hidden="true" />
-              <span className="chat-tool-call-name">{toolCall.toolName}</span>
-              {summaryPreview && (
-                <span className="chat-tool-call-preview" title={summaryPreview}>
-                  {summaryPreview}
-                </span>
-              )}
-              <span className="chat-tool-call-status-text">{statusLabel}</span>
-            </summary>
-            <div className="chat-tool-call-content">
-              {argsSummary && (
-                <div className="chat-tool-call-row">
-                  <span className="chat-tool-call-label">args</span>
-                  <span className="chat-tool-call-value">{argsSummary}</span>
-                </div>
-              )}
-              {resultSummary && (
-                <div className={`chat-tool-call-row${isError ? " chat-tool-call-row--error" : ""}`}>
-                  <span className="chat-tool-call-label">result</span>
-                  <span className="chat-tool-call-value">{resultSummary}</span>
-                </div>
-              )}
-            </div>
-          </details>
-        );
-      })}
-    </div>
-  );
+  return <ChatToolCalls toolCalls={toolCalls} />;
 }
 
 const chatMarkdownComponents: Components = {