refactor(chat): show browser chip as icon-only and search by query

- Render Browser MCP chip as compact icon with aria-label instead of text
- Prefer search query/pattern over scope path in command and tool summaries

Author: SDSLeon

src/renderer/components/composer/AttachmentBar.tsx

@@ -7,9 +7,13 @@ import type { Attachment } from "./useAttachments";
 export function BrowserChip(props: { onRemove?: (() => void) | undefined; title?: string }) {
   const { onRemove, title = "Browser MCP enabled for this thread" } = props;
   return (
-    <div className="lightcode-attachment-chip lightcode-browser-chip" title={title}>
-      <Globe className="size-3 text-muted" />
-      <span className="lightcode-attachment-chip__name">Browser</span>
+    <div
+      className="lightcode-attachment-chip lightcode-browser-chip"
+      title={title}
+      aria-label={title}
+      role={onRemove ? "group" : "img"}
+    >
+      <Globe className="size-3 text-muted" aria-hidden="true" />
       {onRemove ? (
         <button
           type="button"

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

@@ -215,8 +215,7 @@ describe("ToolCallGroup", () => {
     );
 
     expect(document.body).toHaveTextContent("View 1:24: src/supervisor/runtime.test.ts");
-    expect(document.body).toHaveTextContent("Search:");
-    expect(document.body).toHaveTextContent(/node_modules.*pnpm/);
+    expect(screen.getByText('Search: "vitest.mjs"')).toBeInTheDocument();
     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();

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

@@ -96,25 +96,21 @@ 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: src/main src/supervisor src/shared");
+    expect(humanIntentTitle(full)).toBe('Search: "agent status|AgentStatus"');
     expect(commandIntentDisplay(full).kind).toBe("search");
-    expect(commandIntentDisplay(full).parts).toEqual({
-      prefix: "Search: ",
-      path: "src/main src/supervisor src/shared",
-    });
+    expect(commandIntentDisplay(full).parts).toBeUndefined();
   });
 
   it("describes plain grep commands as searches", () => {
     const full = `grep -n "toastId" src/renderer/notifications.ts`;
-    expect(humanIntentTitle(full)).toBe("Search: src/renderer/notifications.ts");
+    expect(humanIntentTitle(full)).toBe('Search: "toastId"');
     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: src/renderer src/shared",
-      parts: { prefix: "Search: ", path: "src/renderer src/shared" },
+      title: 'Search: "filteredCommands"',
       kind: "search",
     });
   });
@@ -126,7 +122,7 @@ describe("humanIntentTitle", () => {
 
   it("handles grep -e PATTERN form", () => {
     const full = `grep -rn -e "needle" src`;
-    expect(humanIntentTitle(full)).toBe("Search: src");
+    expect(humanIntentTitle(full)).toBe('Search: "needle"');
   });
 
   it("describes cat piped through sed as viewed lines", () => {
@@ -151,12 +147,9 @@ 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: node_modules/.pnpm");
+    expect(humanIntentTitle(full)).toBe('Search: "vitest.mjs"');
     expect(commandIntentDisplay(full).kind).toBe("search");
-    expect(commandIntentDisplay(full).parts).toEqual({
-      prefix: "Search: ",
-      path: "node_modules/.pnpm",
-    });
+    expect(commandIntentDisplay(full).parts).toBeUndefined();
   });
 
   it("describes directory listings and package manager commands", () => {

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

@@ -181,14 +181,6 @@ 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: `Search: "${grepLike.pattern}"`,
       kind: "search",
@@ -197,10 +189,14 @@ function intentFromSummarizedCommand(t: string): CommandIntentDisplay | null {
 
   const findSearch = parseFindSearch(trimmed);
   if (findSearch) {
-    const prefix = "Search: ";
+    if (findSearch.pattern) {
+      return {
+        title: `Search: "${findSearch.pattern}"`,
+        kind: "search",
+      };
+    }
     return {
-      title: `${prefix}${findSearch.scope}`,
-      parts: { prefix, path: findSearch.scope },
+      title: `Search: ${findSearch.scope}`,
       kind: "search",
     };
   }

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

@@ -78,7 +78,7 @@ describe("deriveToolDisplay", () => {
     expect(display.Icon).toBe(Pencil);
   });
 
-  it("labels ACP local search tools with only the scope", () => {
+  it("labels ACP local search tools with only the query", () => {
     const display = deriveToolDisplay(
       makePayload({
         name: "'attachment' in src/renderer/**",
@@ -88,11 +88,8 @@ describe("deriveToolDisplay", () => {
       }),
     );
 
-    expect(display.title).toBe("Search: src/renderer/**");
-    expect(display.parts).toEqual({
-      prefix: "Search: ",
-      path: "src/renderer/**",
-    });
+    expect(display.title).toBe('Search: "attachment"');
+    expect(display.parts).toBeUndefined();
     expect(display.Icon).toBe(SearchCode);
   });
 
@@ -106,11 +103,8 @@ describe("deriveToolDisplay", () => {
       }),
     );
 
-    expect(display.title).toBe("Search: src");
-    expect(display.parts).toEqual({
-      prefix: "Search: ",
-      path: "src",
-    });
+    expect(display.title).toBe(String.raw`Search: "\"document\"|\"image\"|\"other\""`);
+    expect(display.parts).toBeUndefined();
     expect(display.Icon).toBe(SearchCode);
   });
 

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

@@ -392,14 +392,6 @@ function formatAcpSearchDisplay(
   const pattern = readStr(args, "pattern");
   const scope = readScope(args) ?? locationPath;
   const searchTerm = query ?? pattern;
-  if (searchTerm && scope) {
-    const prefix = "Search: ";
-    return {
-      title: `${prefix}${scope}`,
-      Icon: SearchCode,
-      parts: { prefix, path: scope },
-    };
-  }
   if (searchTerm) return { title: `Search: "${searchTerm}"`, Icon: SearchCode };
   if (scope) return withTarget("Search", scope, SearchCode);
   return title.toLowerCase().startsWith("search")

src/renderer/components/thread/ThreadView.test.tsx

@@ -73,7 +73,7 @@ describe("ThreadView", () => {
     });
   });
 
-  it("renders Browser MCP as a removable header chip", () => {
+  it("renders Browser MCP as a removable header icon", () => {
     const onConfigChange = vi.fn<(config: ThreadConfig) => void>();
 
     renderThreadView({
@@ -123,11 +123,10 @@ describe("ThreadView", () => {
       onSubmitInput: async () => undefined,
     });
 
-    const browserLabels = screen.getAllByText("Browser");
-    expect(browserLabels).toHaveLength(1);
-    expect(
-      hasAncestorWithClassFragment(browserLabels[0]!, "lightcode-overlay-header__controls"),
-    ).toBe(true);
+    const browserIcon = screen.getByLabelText("Browser MCP enabled for this thread");
+    expect(hasAncestorWithClassFragment(browserIcon, "lightcode-overlay-header__controls")).toBe(
+      true,
+    );
 
     fireEvent.click(screen.getByLabelText("Disable Browser MCP"));
 
@@ -137,7 +136,7 @@ describe("ThreadView", () => {
     });
   });
 
-  it("renders OpenCode Browser MCP as a read-only header chip when provider setting is enabled", () => {
+  it("renders OpenCode Browser MCP as a read-only header icon when provider setting is enabled", () => {
     const onConfigChange = vi.fn<(config: ThreadConfig) => void>();
 
     renderThreadView({
@@ -186,7 +185,7 @@ describe("ThreadView", () => {
       onSubmitInput: async () => undefined,
     });
 
-    expect(screen.getByText("Browser")).toBeInTheDocument();
+    expect(screen.getByLabelText("Browser MCP enabled for OpenCode")).toBeInTheDocument();
     expect(screen.queryByLabelText("Disable Browser MCP")).toBeNull();
     expect(onConfigChange).not.toHaveBeenCalled();
   });

src/renderer/styles.css

@@ -1891,8 +1891,11 @@ html[data-platform="darwin"] .lightcode-content-over-drag-region--drag {
 }
 
 .lightcode-browser-chip {
-  gap: 0.25rem;
-  padding: 0.12rem 0.38rem;
+  justify-content: center;
+  width: 1.35rem;
+  height: 1.35rem;
+  gap: 0;
+  padding: 0;
   border-radius: 0.35rem;
   font-size: 0.6875rem;
   line-height: 1.25;