feat(tool-call-cards): polish responsive headers and expanded details

2 files changed, 112 insertions, 28 deletions

diff --git a/src/features/chat/logic/tool-summary.test.ts b/src/features/chat/logic/tool-summary.test.ts
index 5caa1f1..381842a 100644
--- a/src/features/chat/logic/tool-summary.test.ts
+++ b/src/features/chat/logic/tool-summary.test.ts
@@ -69,7 +69,10 @@ describe("tool summaries", () => {
   it("formats edit call badges and old/new details without hiding multiline text", () => {
     const input = { path: "a.ts", oldString: "a\nb\n", newString: "x\ny\nz\n" };
     const card = view("edit_file", input);
-    expect(card.callBadges).toEqual(["+3 −2"]);
+    expect(card.callBadges).toEqual([
+      { label: "+3", tone: "success" },
+      { label: "−2", tone: "error" },
+    ]);
     expect(card.callDetail).toEqual({
       kind: "edit",
       path: "a.ts",
@@ -77,7 +80,8 @@ describe("tool summaries", () => {
       newText: input.newString,
     });
     expect(view("edit_file", { path: "a", oldString: "", newString: "x" }).callBadges).toEqual([
-      "+1 −0",
+      { label: "+1", tone: "success" },
+      { label: "−0", tone: "error" },
     ]);
     expect(view("edit_file", { path: "a" }).callBadges).toEqual([]);
   });
@@ -97,6 +101,33 @@ describe("tool summaries", () => {
       ],
     });
   });
+  it("formats short scalar arrays inline, retaining quotes, escapes, nulls and empty arrays", () => {
+    expect(
+      view("mcp", {
+        labels: ["ui", "chat"],
+        scalars: [1, true, null],
+        empty: [],
+        escaped: ["a\nb"],
+      }).callDetail,
+    ).toEqual({
+      kind: "fields",
+      fields: [
+        { key: "labels", value: '["ui", "chat"]', multiline: false },
+        { key: "scalars", value: "[1, true, null]", multiline: false },
+        { key: "empty", value: "[]", multiline: false },
+        { key: "escaped", value: '["a\\nb"]', multiline: false },
+      ],
+    });
+  });
+  it("keeps long arrays and nested structures pretty-printed and complete", () => {
+    const input = { long: ["x".repeat(80)], nested: [{ a: 1 }], mixed: [1, { a: 1 }] };
+    const card = view("mcp", input);
+    if (card.callDetail.kind !== "fields") throw new Error("expected fields");
+    expect(card.callDetail.fields.map((field) => field.multiline)).toEqual([true, true, true]);
+    expect(card.callDetail.fields.map((field) => JSON.parse(field.value))).toEqual(
+      Object.values(input),
+    );
+  });
   it.each([
     "command",
     "path",
@@ -192,14 +223,12 @@ describe("tool summaries", () => {
     expect(viewToolEntry(e)).toMatchObject({
       name: "read_file",
       status: "ok",
-      callSummary: "call unavailable",
+      callSummary: "Call in earlier history",
       resultSummary: "1 line",
     });
     expect(viewToolEntry(e).callDetail).toEqual({
-      kind: "fields",
-      fields: [
-        { key: "call", value: "Call unavailable (earlier history unloaded)", multiline: false },
-      ],
+      kind: "unavailable",
+      text: "The call is in earlier, unloaded history. Its response is shown below.",
     });
   });
 });
@@ -213,14 +242,15 @@ describe("tool response facts", () => {
     ["mcp", "", false, "no output"],
     ["mcp", " \n\t", false, "no output"],
     ["mcp", "a short response", false, "a short response"],
+    ["mcp", "A successful response with more than forty characters of text", false, "1 line"],
     ["mcp", "x".repeat(200), false, "1 line"],
     ["web_search", "a\nb\nc", false, "3 lines"],
     ["run_shell", "", true, "failed"],
-    ["mcp", "Permission denied", true, "failed · Permission denied"],
-    ["run_shell", "error\ndetail", true, "failed · 2 lines"],
+    ["mcp", "Permission denied", true, "failed"],
+    ["run_shell", "error\ndetail", true, "failed"],
     ["run_shell", "partial\n\n[Command timed out]", true, "timed out"],
     ["run_shell", "[Output truncated: 12000 bytes]", false, "1 line · truncated"],
-    ["run_shell", "bad\n[Output truncated: 12000 bytes]", true, "failed · 2 lines · truncated"],
+    ["run_shell", "bad\n[Output truncated: 12000 bytes]", true, "failed · truncated"],
     ["edit_file", 'Replaced 1 occurrence(s) in "a.ts".', false, "1 replacement"],
     [
       "edit_file",
@@ -237,6 +267,28 @@ describe("tool response facts", () => {
     expect(card.status).toBe(isError ? "error" : "ok");
     expect(card.output?.isError).toBe(isError);
   });
+  it.each([
+    ["run_shell", "oops\ndetails", true, "failed"],
+    ["run_shell", "partial\n[Command timed out]", true, "timed out"],
+    ["write_file", 'Created "a.ts" (4200 bytes).', false, "created"],
+    ["write_file", 'Overwrote "a.ts" (10 bytes).', false, "overwrote"],
+    ["edit_file", 'Replaced 3 occurrences in "a.ts".\nDiagnostics: warning', false, "replaced"],
+    ["run_shell", "a\nb\nc\nd", false, "4 lines"],
+    ["mcp", "Created issue #42", false, "1 line"],
+    ["mcp", "", false, "no output"],
+    ["read_file", "(empty file: a.ts)", false, "empty file"],
+  ])("%s supplies a complete compact response fact", (name, content, isError, expected) => {
+    expect(view(name, {}, content, isError).compactResultSummary).toBe(expected);
+  });
+  it("never puts error content in header summaries, but retains it verbatim in output", () => {
+    const content = 'Error: oldString not found in content of "src/missing.ts".';
+    const card = view("edit_file", { path: "src/missing.ts" }, content, true);
+    expect(card.resultSummary).toBe("failed");
+    expect(card.compactResultSummary).toBe("failed");
+    expect(card.output).toEqual({ kind: "full", lines: [content], isError: true });
+    expect(card.callSummary).toBe("src/missing.ts");
+    expect(view("mcp", {}, null).compactResultSummary).toBeNull();
+  });
   it("does not infer success on an error that resembles a write result", () => {
     expect(view("write_file", {}, 'Created "a.ts" (10 bytes).', true).resultSummary).toMatch(
       /^failed/,
diff --git a/src/features/chat/logic/tool-summary.ts b/src/features/chat/logic/tool-summary.ts
index 3b75a6b..2e7680c 100644
--- a/src/features/chat/logic/tool-summary.ts
+++ b/src/features/chat/logic/tool-summary.ts
@@ -4,9 +4,14 @@ export interface ToolCardView {
   readonly name: string;
   readonly status: "pending" | "ok" | "error";
   readonly callSummary: string;
-  readonly callBadges: readonly string[];
+  readonly callBadges: readonly {
+    readonly label: string;
+    readonly tone: "success" | "error";
+  }[];
   readonly resultSummary: string | null;
+  readonly compactResultSummary: string | null;
   readonly callDetail:
+    | { readonly kind: "unavailable"; readonly text: string }
     | { readonly kind: "command"; readonly text: string }
     | {
         readonly kind: "edit";
@@ -68,6 +73,22 @@ function serialize(input: unknown, pretty = false): string {
   }
 }
 
+/** Small scalar arrays are easier to scan inline; nested/long values stay pretty JSON. */
+function fieldValue(value: unknown): string {
+  if (
+    Array.isArray(value) &&
+    value.every((item) => item === null || ["string", "number", "boolean"].includes(typeof item))
+  ) {
+    try {
+      const inline = `[${value.map((item) => JSON.stringify(item)).join(", ")}]`;
+      if (inline.length <= 80) return inline;
+    } catch {
+      // Non-wire values still use the safe serializer below.
+    }
+  }
+  return serialize(value, true);
+}
+
 function arg(args: Args, ...keys: string[]): string {
   for (const key of keys) {
     const value = Object.hasOwn(args, key) ? args[key] : undefined;
@@ -146,7 +167,7 @@ function detail(name: string, input: unknown, args: Args): ToolCardView["callDet
   return {
     kind: "fields",
     fields: (entries.length > 0 ? entries : [["input", input]]).map(([key, value]) => {
-      const text = serialize(value, true);
+      const text = fieldValue(value);
       return { key: String(key), value: text, multiline: text.includes("\n") };
     }),
   };
@@ -166,8 +187,7 @@ function responseSummary(name: string, content: string, isError: boolean): strin
   const truncated = /\[Output truncated[^\]]*\]/i.test(content);
   let summary: string;
   if (timeout) summary = "timed out";
-  else if (isError)
-    summary = `failed${lines.length > 1 ? ` · ${count}` : first ? ` · ${first}` : ""}`;
+  else if (isError) summary = "failed";
   else if (!content.trim()) summary = "no output";
   else if (/^\(empty file\b/i.test(content)) summary = "empty file";
   else {
@@ -189,7 +209,19 @@ function responseSummary(name: string, content: string, isError: boolean): strin
       summary = count;
     } else summary = first;
   }
-  return oneLine(`${summary}${truncated ? " · truncated" : ""}`, 96);
+  const label = `${summary}${truncated ? " · truncated" : ""}`;
+  // Even the wide header must leave room for the call; prefer a whole short
+  // fact over chopping an arbitrary one-line response halfway through a word.
+  return label.length <= 40 ? label : compactResponseSummary(label, lines.length);
+}
+
+/** Never CSS-clip response facts: swap to a whole short fact when space is scarce. */
+function compactResponseSummary(summary: string, count: number): string {
+  const fact = summary.split(" · ")[0] ?? summary;
+  if (/^(failed|timed out|no output|empty file|created|overwrote|\d+ lines?)$/.test(fact))
+    return fact;
+  if (/^\d+ replacements?$/.test(fact)) return "replaced";
+  return `${count} ${count === 1 ? "line" : "lines"}`;
 }
 
 export function viewToolEntry(entry: ToolEntry): ToolCardView {
@@ -216,16 +248,21 @@ export function viewToolEntry(entry: ToolEntry): ToolCardView {
   const builtInSummary = summarize?.(args).trim();
   const callSummary =
     entry.call === null
-      ? "call unavailable"
+      ? "Call in earlier history"
       : oneLine(builtInSummary || generic || serialize(input));
-  const callBadges: string[] = [];
+  const callBadges: ToolCardView["callBadges"][number][] = [];
   if (entry.toolName === "edit_file" && entry.call !== null) {
     if (typeof args.oldString === "string" && typeof args.newString === "string") {
-      callBadges.push(`+${lineCount(args.newString)} −${lineCount(args.oldString)}`);
+      callBadges.push(
+        { label: `+${lineCount(args.newString)}`, tone: "success" },
+        { label: `−${lineCount(args.oldString)}`, tone: "error" },
+      );
     }
   }
   const result = entry.result;
   const lines = result === null ? [] : outputLines(result.content);
+  const resultSummary =
+    result === null ? null : responseSummary(entry.toolName, result.content, result.isError);
   return {
     name: entry.toolName,
     status: result === null ? "pending" : result.isError ? "error" : "ok",
@@ -234,18 +271,13 @@ export function viewToolEntry(entry: ToolEntry): ToolCardView {
     callDetail:
       entry.call === null
         ? {
-            kind: "fields",
-            fields: [
-              {
-                key: "call",
-                value: "Call unavailable (earlier history unloaded)",
-                multiline: false,
-              },
-            ],
+            kind: "unavailable",
+            text: "The call is in earlier, unloaded history. Its response is shown below.",
           }
         : detail(entry.toolName, input, args),
-    resultSummary:
-      result === null ? null : responseSummary(entry.toolName, result.content, result.isError),
+    resultSummary,
+    compactResultSummary:
+      resultSummary === null ? null : compactResponseSummary(resultSummary, lines.length),
     output:
       result === null
         ? null