Show full tool call content with show-more toggle (#594)

## Summary

- Remove the 200-character truncation on tool call parameter values in
`generateFallbackContent()` so the full content is always available in
the DOM
- Add a Bash-specific display branch that shows `description` and
`command` fields with full content (also handles Gemini's `run_command`
tool name)
- Cap all fallback content at 200 lines (instead of 200 chars) to
prevent DOM bloat on very large outputs
- Add a show-more/less toggle in `ToolBlock.svelte` that previews the
first 20 lines with a button to expand — works for both the `content`
and `fallbackContent` paths
- Auto-expand content fully when a search match highlights inside a
truncated block
- Deduplicate show-more button markup between content paths

## Motivation

Tool calls with long content (e.g. Bash heredocs writing files, large
Write operations) were truncated at 200 characters in the UI with no way
to see the full content, even though the raw JSONL and SQLite DB store
everything. This made it impossible to inspect what an agent actually
did.

## Test plan

- [x] 8 new tests in `tool-params.test.ts` covering Bash fallback,
`run_command` routing, no-truncation of long values, and line-count
capping
- [x] 3 new tests in `ToolBlock.test.ts` covering show-more button
visibility, expand/collapse behavior, and short-content no-button case
- [x] All 66 tests in tool-params and 36 tests in ToolBlock pass
- [x] Manual verification: dev server shows full tool call content with
working show-more toggle

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Nat Torkington <gnat@Nats-MacBook-Pro.local>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Wes McKinney <wesmckinn+git@gmail.com>

Author: 4 people

frontend/src/lib/components/content/ToolBlock.svelte

@@ -55,12 +55,13 @@
     if (!hq.trim()) {
       searchExpandedInput = false;
       searchExpandedOutput = false;
+      contentFullyExpanded = false;
       prevQuery = hq;
       return;
     }
     const q = hq.toLowerCase();
     const inputText = (
-      taskPrompt ?? content ?? fallbackContent ?? ""
+      taskPrompt ?? fallbackContent ?? content ?? ""
     ).toLowerCase();
     const historyText = (
       toolCall?.result_events?.map((event) => event.content).join("\n\n") ?? ""
@@ -71,6 +72,7 @@
     searchExpandedInput = inputText.includes(q);
     searchExpandedOutput = outputText.includes(q);
     searchExpandedHistory = historyText.includes(q);
+    if (searchExpandedInput) contentFullyExpanded = true;
     if (hq !== prevQuery) {
       userOverride = false;
       userOutputOverride = false;
@@ -274,6 +276,24 @@
   let subagentSessionId = $derived(
     isTask ? toolCall?.subagent_session_id ?? null : null,
   );
+  const CONTENT_PREVIEW_LINES = 20;
+  let contentFullyExpanded: boolean = $state(false);
+
+  let displayContent = $derived.by(() => {
+    const raw = fallbackContent ?? content ?? "";
+    if (!raw) return { text: "", isLong: false };
+    const lines = raw.split("\n");
+    const isLong = lines.length > CONTENT_PREVIEW_LINES;
+    if (isLong && !contentFullyExpanded) {
+      return {
+        text: lines.slice(0, CONTENT_PREVIEW_LINES).join("\n"),
+        isLong: true,
+        totalLines: lines.length,
+      };
+    }
+    return { text: raw, isLong, totalLines: lines.length };
+  });
+
   let isDiff = $derived.by(() => {
     const text = fallbackContent ?? content ?? "";
     return text.startsWith("--- a/") || text.startsWith("@@");
@@ -294,6 +314,7 @@
       if (sel && sel.toString().length > 0) return;
       userCollapsed = !userCollapsed;
       userOverride = true;
+      if (userCollapsed) contentFullyExpanded = false;
     }}
   >
     <span class="tool-chevron" class:open={!collapsed}>
@@ -328,16 +349,25 @@
     {/if}
     {#if taskPrompt}
       <pre class="tool-content" use:applyHighlight={{ q: highlightQuery, current: isCurrentHighlight, content: taskPrompt }}>{@html escapeHTML(taskPrompt)}</pre>
-    {:else if content}
-      <pre class="tool-content" use:applyHighlight={{ q: highlightQuery, current: isCurrentHighlight, content }}>{@html escapeHTML(content)}</pre>
     {:else if fallbackContent && isDiff}
       <div class="diff-view">
         {#each diffLines as line}
           <div class="diff-line {line.startsWith('@@') ? 'diff-hunk' : line.startsWith('+') ? 'diff-add' : line.startsWith('-') ? 'diff-del' : 'diff-ctx'}">{line}</div>
         {/each}
       </div>
-    {:else if fallbackContent}
-      <pre class="tool-content" use:applyHighlight={{ q: highlightQuery, current: isCurrentHighlight, content: fallbackContent }}>{@html escapeHTML(fallbackContent)}</pre>
+    {:else if displayContent.text}
+      <pre class="tool-content" use:applyHighlight={{ q: highlightQuery, current: isCurrentHighlight, content: displayContent.text }}>{@html escapeHTML(displayContent.text)}</pre>
+      {#if displayContent.isLong}
+        <button
+          class="show-more-btn"
+          onclick={(e) => {
+            e.stopPropagation();
+            contentFullyExpanded = !contentFullyExpanded;
+          }}
+        >
+          {contentFullyExpanded ? "show less" : `show all ${displayContent.totalLines} lines`}
+        </button>
+      {/if}
     {/if}
     {#if toolCall?.result_content}
       <button
@@ -525,6 +555,22 @@
     font-weight: 500;
   }
 
+  .show-more-btn {
+    display: block;
+    width: 100%;
+    padding: 4px 14px;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--accent-blue, #58a6ff);
+    text-align: left;
+    border-top: 1px solid var(--border-muted);
+    transition: background 0.1s;
+  }
+
+  .show-more-btn:hover {
+    background: var(--bg-surface-hover);
+  }
+
   .tool-content {
     padding: 8px 14px 10px;
     font-family: var(--font-mono);

frontend/src/lib/components/content/ToolBlock.test.ts

@@ -373,6 +373,111 @@ describe("ToolBlock fallback content", () => {
   });
 });
 
+describe("ToolBlock show-more for long content", () => {
+  let component: ReturnType<typeof mount>;
+
+  afterEach(() => {
+    if (component) unmount(component);
+    document.body.innerHTML = "";
+  });
+
+  it("shows 'show all' button for long Bash fallback content", async () => {
+    const longCommand = Array.from({ length: 30 }, (_, i) => `echo line${i}`).join("\n");
+    const toolCall: ToolCall = {
+      tool_name: "Bash",
+      category: "Bash",
+      input_json: JSON.stringify({ command: longCommand }),
+    };
+    component = mount(ToolBlock, {
+      target: document.body,
+      props: { content: "", toolCall },
+    });
+    await tick();
+
+    document.querySelector<HTMLButtonElement>(".tool-header")!.click();
+    await tick();
+
+    const showMoreBtn = document.querySelector(".show-more-btn");
+    expect(showMoreBtn).not.toBeNull();
+    expect(showMoreBtn!.textContent).toContain("show all");
+  });
+
+  it("expands to full content when 'show all' is clicked", async () => {
+    const longCommand = Array.from({ length: 30 }, (_, i) => `echo line${i}`).join("\n");
+    const toolCall: ToolCall = {
+      tool_name: "Bash",
+      category: "Bash",
+      input_json: JSON.stringify({ command: longCommand }),
+    };
+    component = mount(ToolBlock, {
+      target: document.body,
+      props: { content: "", toolCall },
+    });
+    await tick();
+
+    document.querySelector<HTMLButtonElement>(".tool-header")!.click();
+    await tick();
+
+    const contentBefore = document.querySelector(".tool-content")!.textContent!;
+    expect(contentBefore).not.toContain("echo line29");
+
+    document.querySelector<HTMLButtonElement>(".show-more-btn")!.click();
+    await tick();
+
+    const contentAfter = document.querySelector(".tool-content")!.textContent!;
+    expect(contentAfter).toContain("echo line29");
+
+    const showMoreBtn = document.querySelector(".show-more-btn");
+    expect(showMoreBtn!.textContent).toContain("show less");
+  });
+
+  it("does not show 'show all' button for short content", async () => {
+    const toolCall: ToolCall = {
+      tool_name: "Bash",
+      category: "Bash",
+      input_json: JSON.stringify({ command: "npm test" }),
+    };
+    component = mount(ToolBlock, {
+      target: document.body,
+      props: { content: "", toolCall },
+    });
+    await tick();
+
+    document.querySelector<HTMLButtonElement>(".tool-header")!.click();
+    await tick();
+
+    expect(document.querySelector(".show-more-btn")).toBeNull();
+  });
+
+  it("auto-expands hidden Bash fallback content on search match", async () => {
+    const longCommand = Array.from(
+      { length: 30 },
+      (_, i) => `echo hidden-line-${i}`,
+    ).join("\n");
+    const toolCall: ToolCall = {
+      tool_name: "Bash",
+      category: "Bash",
+      input_json: JSON.stringify({ command: longCommand }),
+    };
+    component = mount(ToolBlock, {
+      target: document.body,
+      props: {
+        content: "",
+        toolCall,
+        highlightQuery: "hidden-line-29",
+      },
+    });
+    await tick();
+
+    const toolContent = document.querySelector(".tool-content");
+    expect(toolContent).not.toBeNull();
+    expect(toolContent!.textContent).toContain("hidden-line-29");
+    expect(document.querySelector(".show-more-btn")!.textContent).toContain(
+      "show less",
+    );
+  });
+});
+
 describe("ToolBlock collapsed preview", () => {
   let component: ReturnType<typeof mount>;
 

frontend/src/lib/utils/tool-params.test.ts

@@ -539,6 +539,107 @@ describe("generateFallbackContent", () => {
   });
 });
 
+describe("generateFallbackContent - Bash", () => {
+  it("shows full command for Bash tool", () => {
+    const result = generateFallbackContent("Bash", {
+      command: "npm test",
+    });
+    expect(result).toBe("command: npm test");
+  });
+
+  it("shows description and command for Bash tool", () => {
+    const result = generateFallbackContent("Bash", {
+      command: "npm test",
+      description: "Run test suite",
+    });
+    expect(result).toBe("description: Run test suite\ncommand: npm test");
+  });
+
+  it("shows remaining visible params after Bash command", () => {
+    const result = generateFallbackContent("Bash", {
+      command: "npm test",
+      description: "Run test suite",
+      workdir: "/repo/frontend",
+      timeout: 120000,
+      env: { CI: "true" },
+      agent__intent: "internal note",
+    });
+    expect(result).toBe(
+      [
+        "description: Run test suite",
+        "command: npm test",
+        "workdir: /repo/frontend",
+        "timeout: 120000",
+        'env: {"CI":"true"}',
+      ].join("\n"),
+    );
+  });
+
+  it("shows full multiline heredoc command without truncation", () => {
+    const heredoc = [
+      'cd /project && PYTHONIOENCODING=utf-8 python - <<\'PY\'',
+      "import json",
+      'F="data.jsonl"',
+      "rows=[json.loads(l) for l in open(F,encoding='utf-8')]",
+      "for r in rows:",
+      "    print(r)",
+      "PY",
+    ].join("\n");
+    const result = generateFallbackContent("Bash", {
+      command: heredoc,
+      description: "Inspect data",
+    });
+    expect(result).toContain("import json");
+    expect(result).toContain("for r in rows:");
+    expect(result).not.toContain("…");
+  });
+
+  it("caps Bash commands at MAX_DIFF_LINES", () => {
+    const longCommand = Array.from({ length: 250 }, (_, i) => `echo ${i}`).join("\n");
+    const result = generateFallbackContent("Bash", {
+      command: longCommand,
+    })!;
+    expect(result).toContain("lines total)");
+    const lines = result.split("\n");
+    expect(lines.length).toBeLessThanOrEqual(202);
+  });
+
+  it("handles run_command tool name (Gemini)", () => {
+    const result = generateFallbackContent("run_command", {
+      command: "go test ./...",
+    });
+    expect(result).toBe("command: go test ./...");
+  });
+
+  it("uses cmd param for codex exec_command", () => {
+    const result = generateFallbackContent("Bash", {
+      cmd: "ls -la /tmp",
+    });
+    expect(result).toBe("command: ls -la /tmp");
+  });
+});
+
+describe("generateFallbackContent - generic no-truncation", () => {
+  it("shows full long values without character truncation", () => {
+    const longValue = "x".repeat(500);
+    const result = generateFallbackContent("CustomTool", {
+      data: longValue,
+    })!;
+    expect(result).toBe(`data: ${longValue}`);
+    expect(result).not.toContain("…");
+  });
+
+  it("caps generic content at line count", () => {
+    const longValue = Array.from({ length: 250 }, (_, i) => `line ${i}`).join("\n");
+    const result = generateFallbackContent("CustomTool", {
+      data: longValue,
+    })!;
+    expect(result).toContain("lines total)");
+    const lines = result.split("\n");
+    expect(lines.length).toBeLessThanOrEqual(202);
+  });
+});
+
 describe("generateFallbackContent - agent__intent filtering", () => {
   it("does not include agent__intent in generic key-value output", () => {
     const result = generateFallbackContent("CustomTool", {
@@ -554,9 +655,8 @@ describe("generateFallbackContent - agent__intent filtering", () => {
       command: "npm test",
       agent__intent: "Running test suite",
     });
-    // Bash has no special handler for command; falls to generic loop
-    // agent__intent must not appear; command may appear
     expect(result).not.toContain("agent__intent");
+    expect(result).toBe("command: npm test");
   });
 
   it("does not include agent__intent for read tool (generic path)", () => {