fix(messages): show searching state and preserve web search status

Author: Dimillian

src/features/messages/components/MessageRows.tsx

@@ -262,7 +262,7 @@ function toolIconForSummary(
   if (label === "read") {
     return FileText;
   }
-  if (label === "searched") {
+  if (label === "searched" || label === "searching") {
     return Search;
   }
 

src/features/messages/utils/messageRenderUtils.test.ts

@@ -0,0 +1,44 @@
+import { describe, expect, it } from "vitest";
+import type { ConversationItem } from "../../../types";
+import { buildToolSummary, statusToneFromText } from "./messageRenderUtils";
+
+function makeToolItem(
+  overrides: Partial<Extract<ConversationItem, { kind: "tool" }>>,
+): Extract<ConversationItem, { kind: "tool" }> {
+  return {
+    id: "tool-1",
+    kind: "tool",
+    toolType: "webSearch",
+    title: "Web search",
+    detail: "codex monitor",
+    status: "completed",
+    output: "",
+    ...overrides,
+  };
+}
+
+describe("messageRenderUtils", () => {
+  it("renders web search as searching while in progress", () => {
+    const summary = buildToolSummary(makeToolItem({ status: "inProgress" }), "");
+    expect(summary.label).toBe("searching");
+    expect(summary.value).toBe("codex monitor");
+  });
+
+  it("renders mcp search calls as searching while in progress", () => {
+    const summary = buildToolSummary(
+      makeToolItem({
+        toolType: "mcpToolCall",
+        title: "Tool: web / search_query",
+        detail: '{\n  "query": "codex monitor"\n}',
+        status: "inProgress",
+      }),
+      "",
+    );
+    expect(summary.label).toBe("searching");
+    expect(summary.value).toBe("codex monitor");
+  });
+
+  it("classifies camelCase inProgress as processing", () => {
+    expect(statusToneFromText("inProgress")).toBe("processing");
+  });
+});

src/features/messages/utils/messageRenderUtils.ts

@@ -289,8 +289,8 @@ export function buildToolSummary(
 
   if (item.toolType === "webSearch") {
     return {
-      label: "searched",
-      value: item.detail || "",
+      label: statusToneFromText(item.status) === "processing" ? "searching" : "searched",
+      value: item.detail || "the web",
     };
   }
 
@@ -307,7 +307,7 @@ export function buildToolSummary(
     const args = parseToolArgs(item.detail);
     if (toolName.toLowerCase().includes("search")) {
       return {
-        label: "searched",
+        label: statusToneFromText(item.status) === "processing" ? "searching" : "searched",
         value:
           firstStringField(args, ["query", "pattern", "text"]) || item.detail,
       };
@@ -353,7 +353,7 @@ export function statusToneFromText(status?: string): StatusTone {
   if (/(fail|error)/.test(normalized)) {
     return "failed";
   }
-  if (/(pending|running|processing|started|in_progress)/.test(normalized)) {
+  if (/(pending|running|processing|started|in[_\s-]?progress)/.test(normalized)) {
     return "processing";
   }
   if (/(complete|completed|success|done)/.test(normalized)) {

src/features/threads/hooks/useThreadItemEvents.test.ts

@@ -164,6 +164,33 @@ describe("useThreadItemEvents", () => {
     );
   });
 
+  it("adds lifecycle status for web search items", () => {
+    const { result } = makeOptions();
+    const item: ItemPayload = { type: "webSearch", id: "search-1", query: "codex monitor" };
+
+    act(() => {
+      result.current.onItemStarted("ws-1", "thread-1", item);
+    });
+    expect(buildConversationItem).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: "webSearch",
+        id: "search-1",
+        status: "inProgress",
+      }),
+    );
+
+    act(() => {
+      result.current.onItemCompleted("ws-1", "thread-1", item);
+    });
+    expect(buildConversationItem).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: "webSearch",
+        id: "search-1",
+        status: "completed",
+      }),
+    );
+  });
+
   it("notifies when a user message is created", () => {
     const onUserMessageCreated = vi.fn();
     vi.mocked(buildConversationItem).mockReturnValue({

src/features/threads/hooks/useThreadItemEvents.ts

@@ -64,7 +64,7 @@ export function useThreadItemEvents({
         }
       }
       const itemForDisplay =
-        itemType === "contextCompaction"
+        itemType === "contextCompaction" || itemType === "webSearch"
           ? ({
               ...item,
               status: shouldMarkProcessing ? "inProgress" : "completed",

src/utils/threadItems.test.ts

@@ -458,6 +458,20 @@ describe("threadItems", () => {
     }
   });
 
+  it("defaults web search items to completed status", () => {
+    const item = buildConversationItem({
+      type: "webSearch",
+      id: "web-1",
+      query: "codex monitor",
+    });
+    expect(item).not.toBeNull();
+    if (item && item.kind === "tool") {
+      expect(item.toolType).toBe("webSearch");
+      expect(item.status).toBe("completed");
+      expect(item.detail).toBe("codex monitor");
+    }
+  });
+
   it("merges thread items preferring non-empty remote tool output", () => {
     const remote: ConversationItem = {
       id: "tool-2",
@@ -512,6 +526,33 @@ describe("threadItems", () => {
     }
   });
 
+  it("keeps local tool status when remote status is empty", () => {
+    const remote: ConversationItem = {
+      id: "tool-remote-status",
+      kind: "tool",
+      toolType: "webSearch",
+      title: "Web search",
+      detail: "query",
+      status: "",
+      output: "",
+    };
+    const local: ConversationItem = {
+      id: "tool-remote-status",
+      kind: "tool",
+      toolType: "webSearch",
+      title: "Web search",
+      detail: "query",
+      status: "completed",
+      output: "",
+    };
+    const merged = mergeThreadItems([remote], [local]);
+    expect(merged).toHaveLength(1);
+    expect(merged[0].kind).toBe("tool");
+    if (merged[0].kind === "tool") {
+      expect(merged[0].status).toBe("completed");
+    }
+  });
+
   it("preserves streamed plan output when completion item has empty output", () => {
     const existing: ConversationItem = {
       id: "plan-1",

src/utils/threadItems.ts

@@ -755,13 +755,14 @@ export function buildConversationItem(
     };
   }
   if (type === "webSearch") {
+    const status = asString(item.status ?? "").trim();
     return {
       id,
       kind: "tool",
       toolType: type,
       title: "Web search",
       detail: asString(item.query ?? ""),
-      status: "",
+      status: status || "completed",
       output: "",
     };
   }
@@ -931,19 +932,21 @@ function chooseRicherItem(remote: ConversationItem, local: ConversationItem) {
     const remoteOutput = remote.output ?? "";
     const localOutput = local.output ?? "";
     const hasRemoteOutput = remoteOutput.trim().length > 0;
+    const remoteStatus = remote.status?.trim();
     return {
       ...remote,
-      status: remote.status ?? local.status,
+      status: remoteStatus ? remote.status : local.status,
       output: hasRemoteOutput ? remoteOutput : localOutput,
       changes: remote.changes ?? local.changes,
     };
   }
   if (remote.kind === "diff" && local.kind === "diff") {
     const useLocal = local.diff.length > remote.diff.length;
+    const remoteStatus = remote.status?.trim();
     return {
       ...remote,
       diff: useLocal ? local.diff : remote.diff,
-      status: remote.status ?? local.status,
+      status: remoteStatus ? remote.status : local.status,
     };
   }
   return remote;