fix(chat): improve tool-call display for read and search results

- render read tool results as highlighted file content in ToolCallGroup
- simplify search command titles to show scope path only
- wrap accordion title in span for proper tooltip overflow handling
- map OpenCode `search` tool to canonical search kind with locations
- fix image tool detection to avoid false positives on search patterns

Author: SDSLeon

src/renderer/components/thread/ChatPane/parts/items/ChatItemAccordion.tsx

@@ -115,12 +115,14 @@ export function ChatItemAccordion({
   );
 
   const titleNode = (
-    <Tooltip delay={300} isDisabled={!isOverflowing || !titleString}>
-      <Tooltip.Trigger className="min-w-0 flex-1">{titleContent}</Tooltip.Trigger>
-      <Tooltip.Content placement="top" className="max-w-[80vw] break-all">
-        {titleString}
-      </Tooltip.Content>
-    </Tooltip>
+    <span className="min-w-0 flex-1">
+      <Tooltip delay={300} isDisabled={!isOverflowing || !titleString}>
+        <Tooltip.Trigger className="block min-w-0 w-full">{titleContent}</Tooltip.Trigger>
+        <Tooltip.Content placement="top" className="max-w-[80vw] break-all">
+          {titleString}
+        </Tooltip.Content>
+      </Tooltip>
+    </span>
   );
 
   if (!hasBody) {

src/renderer/components/thread/ChatPane/parts/items/ToolCallGroup.test.tsx

@@ -164,6 +164,21 @@ describe("ToolCallGroup", () => {
     expect(screen.queryByText("result")).not.toBeInTheDocument();
   });
 
+  it("renders read tool-call results as highlighted file content", async () => {
+    const threadId = "thread-1";
+    const item = makeReadToolItem("tool-read");
+    seedThread(threadId, [item]);
+
+    renderToolCallGroup(threadId, [item.id]);
+    fireEvent.click(screen.getByText("source.ts"));
+
+    await waitFor(() => {
+      expect(document.body).toHaveTextContent(/export const value = 1/);
+    });
+    expect(screen.queryByText("args")).not.toBeInTheDocument();
+    expect(screen.queryByText("result")).not.toBeInTheDocument();
+  });
+
   it("renders changes-array creates as highlighted file content", async () => {
     const threadId = "thread-1";
     const item = makeChangesArrayFileChangeItem("file-changes-array-create", "create");
@@ -200,9 +215,8 @@ describe("ToolCallGroup", () => {
     );
 
     expect(document.body).toHaveTextContent("View 1:24: src/supervisor/runtime.test.ts");
-    expect(
-      screen.getByText('Search files: "vitest.mjs" in node_modules/.pnpm'),
-    ).toBeInTheDocument();
+    expect(document.body).toHaveTextContent("Search:");
+    expect(document.body).toHaveTextContent(/node_modules.*pnpm/);
     expect(screen.getByText("Git: git diff -- src/supervisor/runtime.ts")).toBeInTheDocument();
     expect(screen.getByText("Check: pnpm run test")).toBeInTheDocument();
     expect(screen.getByText("Install packages: pnpm install")).toBeInTheDocument();
@@ -378,6 +392,24 @@ function makeApplyPatchToolItem(id: string): RuntimeChatItem {
   };
 }
 
+function makeReadToolItem(id: string): RuntimeChatItem {
+  return {
+    id,
+    type: "tool_call",
+    state: "completed",
+    payload: {
+      name: "src/source.ts",
+      title: "src/source.ts",
+      kind: "read",
+      locations: [{ path: "src/source.ts" }],
+      args: { filePath: "src/source.ts" },
+      result: "export const value = 1;\n",
+      status: "success",
+    },
+    streams: {},
+  };
+}
+
 function makeFileChangeItem(
   id: string,
   diffSummary: { added: number; removed: number } = { added: 1, removed: 1 },

src/renderer/components/thread/ChatPane/parts/items/ToolCallGroup.tsx

@@ -360,10 +360,21 @@ function getToolCallRow(item: RuntimeChatItem, isExpanded: boolean): InlineRow |
   const diffPart = isEditLikeToolPayload(payload) ? extractAcpDiffResultPart(payload) : undefined;
   const diffText = diffPart?.text || undefined;
   const lazyReadPath = pickLazyReadPath(payload);
+  const readText = payload.kind === "read" && !lazyReadPath ? extractAcpResultText(payload) : "";
+  const readPath =
+    payload.kind === "read"
+      ? display.parts?.filePath
+        ? display.parts.path
+        : pickFirstLocationPath(payload)
+      : undefined;
   const hasDetails =
-    payload.args !== undefined || payload.result !== undefined || !!diffText || !!lazyReadPath;
+    payload.args !== undefined ||
+    payload.result !== undefined ||
+    !!diffText ||
+    !!lazyReadPath ||
+    readText.length > 0;
   const sections: ToolCallSection[] =
-    isExpanded && hasDetails && !diffText && !lazyReadPath
+    isExpanded && hasDetails && !diffText && !lazyReadPath && readText.length === 0
       ? [
           { label: "args", part: extractAcpArgsPart(payload) },
           { label: "result", part: extractAcpResultPart(payload) },
@@ -387,9 +398,10 @@ function getToolCallRow(item: RuntimeChatItem, isExpanded: boolean): InlineRow |
     rightLabelClassName: isError ? "text-danger" : "text-[color:var(--muted)]",
     hasDetails,
     sections,
-    bodyText: isExpanded ? diffText : undefined,
+    bodyText: isExpanded ? (diffText ?? (readText.length > 0 ? readText : undefined)) : undefined,
+    bodyLanguage: readPath ? detectLanguageFromPath(readPath) : undefined,
     bodyKind: diffText ? "diff" : "text",
-    bodyFilePath: display.parts?.filePath ? display.parts.path : undefined,
+    bodyFilePath: display.parts?.filePath ? display.parts.path : readPath,
     fetchPath: lazyReadPath,
   };
 }
@@ -406,6 +418,10 @@ function pickLazyReadPath(payload: ToolCallPayload): string | undefined {
   return payload.locations?.find((location) => location.path.length > 0)?.path;
 }
 
+function pickFirstLocationPath(payload: ToolCallPayload): string | undefined {
+  return payload.locations?.find((location) => location.path.length > 0)?.path;
+}
+
 function isEditLikeToolPayload(payload: ToolCallPayload): boolean {
   switch (payload.kind) {
     case "edit":

src/renderer/components/thread/ChatPane/parts/items/commandSummary.test.ts

@@ -96,22 +96,25 @@ describe("humanIntentTitle", () => {
 
   it("describes ripgrep commands as searches", () => {
     const full = `/bin/zsh -lc 'rg -n "agent status|AgentStatus" src/main src/supervisor src/shared -S'`;
-    expect(humanIntentTitle(full)).toBe(
-      'Search: "agent status|AgentStatus" in src/main src/supervisor src/shared',
-    );
+    expect(humanIntentTitle(full)).toBe("Search: src/main src/supervisor src/shared");
     expect(commandIntentDisplay(full).kind).toBe("search");
+    expect(commandIntentDisplay(full).parts).toEqual({
+      prefix: "Search: ",
+      path: "src/main src/supervisor src/shared",
+    });
   });
 
   it("describes plain grep commands as searches", () => {
     const full = `grep -n "toastId" src/renderer/notifications.ts`;
-    expect(humanIntentTitle(full)).toBe('Search: "toastId" in src/renderer/notifications.ts');
+    expect(humanIntentTitle(full)).toBe("Search: src/renderer/notifications.ts");
     expect(commandIntentDisplay(full).kind).toBe("search");
   });
 
   it("describes recursive grep with multiple paths as a search", () => {
     const full = `grep -rn "filteredCommands" src/renderer src/shared`;
     expect(commandIntentDisplay(full)).toEqual({
-      title: 'Search: "filteredCommands" in src/renderer src/shared',
+      title: "Search: src/renderer src/shared",
+      parts: { prefix: "Search: ", path: "src/renderer src/shared" },
       kind: "search",
     });
   });
@@ -123,7 +126,7 @@ describe("humanIntentTitle", () => {
 
   it("handles grep -e PATTERN form", () => {
     const full = `grep -rn -e "needle" src`;
-    expect(humanIntentTitle(full)).toBe('Search: "needle" in src');
+    expect(humanIntentTitle(full)).toBe("Search: src");
   });
 
   it("describes cat piped through sed as viewed lines", () => {
@@ -148,8 +151,12 @@ describe("humanIntentTitle", () => {
 
   it("describes find commands as searches", () => {
     const full = `find node_modules/.pnpm -maxdepth 4 -type f -name 'vitest.mjs' | sed -n '1,80p'`;
-    expect(humanIntentTitle(full)).toBe('Search files: "vitest.mjs" in node_modules/.pnpm');
+    expect(humanIntentTitle(full)).toBe("Search: node_modules/.pnpm");
     expect(commandIntentDisplay(full).kind).toBe("search");
+    expect(commandIntentDisplay(full).parts).toEqual({
+      prefix: "Search: ",
+      path: "node_modules/.pnpm",
+    });
   });
 
   it("describes directory listings and package manager commands", () => {

src/renderer/components/thread/ChatPane/parts/items/commandSummary.ts

@@ -181,20 +181,26 @@ function intentFromSummarizedCommand(t: string): CommandIntentDisplay | null {
 
   const grepLike = parseGrepLikeSearch(trimmed);
   if (grepLike) {
+    if (grepLike.scope) {
+      const prefix = "Search: ";
+      return {
+        title: `${prefix}${grepLike.scope}`,
+        parts: { prefix, path: grepLike.scope },
+        kind: "search",
+      };
+    }
     return {
-      title: grepLike.scope
-        ? `Search: "${grepLike.pattern}" in ${grepLike.scope}`
-        : `Search: "${grepLike.pattern}"`,
+      title: `Search: "${grepLike.pattern}"`,
       kind: "search",
     };
   }
 
   const findSearch = parseFindSearch(trimmed);
   if (findSearch) {
+    const prefix = "Search: ";
     return {
-      title: findSearch.pattern
-        ? `Search files: "${findSearch.pattern}" in ${findSearch.scope}`
-        : `Search files: ${findSearch.scope}`,
+      title: `${prefix}${findSearch.scope}`,
+      parts: { prefix, path: findSearch.scope },
       kind: "search",
     };
   }

src/renderer/components/thread/ChatPane/parts/items/toolDisplay.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { Eye, Pencil, SearchCode, Terminal } from "lucide-react";
+import { Eye, ImageIcon, Pencil, SearchCode, Terminal } from "lucide-react";
 import type { ToolCallPayload } from "@/shared/contracts";
 import { deriveToolDisplay, isSubAgentTool } from "./toolDisplay";
 
@@ -78,7 +78,7 @@ describe("deriveToolDisplay", () => {
     expect(display.Icon).toBe(Pencil);
   });
 
-  it("labels ACP local search tools with the query and scope", () => {
+  it("labels ACP local search tools with only the scope", () => {
     const display = deriveToolDisplay(
       makePayload({
         name: "'attachment' in src/renderer/**",
@@ -88,14 +88,45 @@ describe("deriveToolDisplay", () => {
       }),
     );
 
-    expect(display.title).toBe('Search: "attachment" in src/renderer/**');
+    expect(display.title).toBe("Search: src/renderer/**");
     expect(display.parts).toEqual({
-      prefix: 'Search: "attachment" in ',
+      prefix: "Search: ",
       path: "src/renderer/**",
     });
     expect(display.Icon).toBe(SearchCode);
   });
 
+  it("does not treat search patterns containing image as image tools", () => {
+    const display = deriveToolDisplay(
+      makePayload({
+        name: String.raw`\"document\"|\"image\"|\"other\" in src`,
+        title: String.raw`\"document\"|\"image\"|\"other\" in src`,
+        kind: "search",
+        args: { pattern: String.raw`\"document\"|\"image\"|\"other\"`, path: "src" },
+      }),
+    );
+
+    expect(display.title).toBe("Search: src");
+    expect(display.parts).toEqual({
+      prefix: "Search: ",
+      path: "src",
+    });
+    expect(display.Icon).toBe(SearchCode);
+  });
+
+  it("still labels explicit image tools as image rows", () => {
+    const display = deriveToolDisplay(
+      makePayload({
+        name: "ViewImage",
+        args: { path: "screen.png" },
+      }),
+    );
+
+    expect(display.title).toBe("Image: screen.png");
+    expect(display.parts).toEqual({ prefix: "Image: ", path: "screen.png", filePath: true });
+    expect(display.Icon).toBe(ImageIcon);
+  });
+
   it("normalizes Claude raw read tools to view file displays", () => {
     const display = deriveToolDisplay(
       makePayload({

src/renderer/components/thread/ChatPane/parts/items/toolDisplay.ts

@@ -133,12 +133,13 @@ function mapClaudeRawTool(
       return { title: titleWithValue("Task output", args, "id"), Icon: Terminal };
     case "TaskStop":
       return { title: titleWithValue("Stop task", args, "id"), Icon: Trash2 };
+    case "ViewImage":
+    case "Image":
+      return withPath("Image", args, ["path", "file_path", "image_path", "source"], ImageIcon, {
+        filePath: true,
+      });
     default:
-      return name.toLowerCase().includes("image")
-        ? withPath("Image", args, ["path", "file_path", "image_path", "source"], ImageIcon, {
-            filePath: true,
-          })
-        : null;
+      return null;
   }
 }
 
@@ -392,7 +393,7 @@ function formatAcpSearchDisplay(
   const scope = readScope(args) ?? locationPath;
   const searchTerm = query ?? pattern;
   if (searchTerm && scope) {
-    const prefix = `Search: "${searchTerm}" in `;
+    const prefix = "Search: ";
     return {
       title: `${prefix}${scope}`,
       Icon: SearchCode,

src/supervisor/agents/opencode/sdkCanonicalMapping.test.ts

@@ -552,6 +552,42 @@ describe("sdkCanonicalMapping — tool parts", () => {
     });
   });
 
+  it("maps OpenCode local search tools as canonical search tool calls", () => {
+    const state = createOpenCodeMapperState("thread-1");
+    const args = {
+      pattern: String.raw`\"document\"|\"image\"|\"other\"`,
+      include: "*.ts",
+      path: "/repo/src",
+    };
+    const events = mapOpenCodeEvent(
+      toolPartUpdatedEvent({
+        id: "prt_search",
+        sessionID: "ses_test",
+        messageID: "msg_1",
+        type: "tool",
+        tool: "search",
+        callID: "call_search",
+        state: {
+          status: "running",
+          input: args,
+          time: { start: 0 },
+        },
+      }),
+      state,
+    );
+
+    expect(events.find((e) => e.type === "item.started")).toMatchObject({
+      itemType: "tool_call",
+      payload: {
+        kind: "search",
+        title: `"${args.pattern}" in /repo/src`,
+        locations: [{ path: "/repo/src" }],
+        args,
+        status: "running",
+      },
+    });
+  });
+
   it("maps OpenCode task tools to sub-agent tool calls", () => {
     const state = createOpenCodeMapperState("thread-1");
     const events = mapOpenCodeEvent(

src/supervisor/agents/opencode/sdkCanonicalMapping.ts

@@ -78,7 +78,7 @@ function classifyToolItemType(toolName: string): CanonicalItemType {
   if (/(^|[_-])(create|edit|write|patch|multiedit)($|[_-])/.test(n)) {
     return "file_change";
   }
-  if (/(^|[_-])(webfetch|websearch|search)($|[_-])/.test(n)) {
+  if (/(^|[_-])(webfetch|websearch)($|[_-])/.test(n)) {
     return "web_search";
   }
   return "tool_call";
@@ -172,6 +172,7 @@ function openCodeToolKind(
       return "read";
     case "glob":
     case "grep":
+    case "search":
       return "search";
     case "webfetch":
       return "fetch";
@@ -199,11 +200,12 @@ function openCodeToolTitle(
       return readOpenCodePath(input) ?? "Read";
     case "glob":
       return readStringField(input, "pattern", "glob") ?? "Glob";
+    case "search":
     case "grep": {
       const pattern = readStringField(input, "pattern", "query", "needle");
-      const scope = readStringField(input, "path", "glob");
+      const scope = readStringField(input, "path", "glob", "include");
       if (pattern && scope) return `"${pattern}" in ${scope}`;
-      return pattern ?? "Grep";
+      return pattern ?? (normalizeToolName(toolName) === "search" ? "Search" : "Grep");
     }
     case "webfetch":
       return readStringField(input, "url") ?? "Fetch";
@@ -225,7 +227,7 @@ function openCodeToolLocations(
     const path = readOpenCodePath(input);
     return path ? [{ path }] : undefined;
   }
-  if (n === "grep") {
+  if (n === "grep" || n === "search") {
     const path = readStringField(input, "path");
     return path ? [{ path }] : undefined;
   }