Align tool cards with Codex UI

package.json

@@ -28,7 +28,7 @@
     "dev": "node scripts/dev-server.mjs",
     "postinstall": "node scripts/fix-node-pty-permissions.mjs",
     "start": "node dist/cli.js serve",
-    "test": "tsx src/config.test.ts && tsx src/ui/card-types.test.ts && tsx src/ui/patch-display.test.ts && tsx src/apply-patch.test.ts && tsx src/process-platform.test.ts && tsx src/process-sessions.test.ts && tsx src/local-agent-runtime.test.ts && tsx src/local-agent-adapters.test.ts && tsx src/local-agent-availability.test.ts && tsx src/local-agent-profiles.test.ts && tsx src/local-agent-targets.test.ts && tsx src/local-agent-store.test.ts && tsx src/roots.test.ts && tsx src/skills.test.ts && tsx src/workspaces.test.ts && tsx src/review-checkpoints.test.ts && tsx src/oauth-store.test.ts && tsx src/cli.test.ts",
+    "test": "tsx src/config.test.ts && tsx src/ui/card-types.test.ts && tsx src/ui/patch-display.test.ts && tsx src/ui/tool-display.test.ts && tsx src/apply-patch.test.ts && tsx src/process-platform.test.ts && tsx src/process-sessions.test.ts && tsx src/local-agent-runtime.test.ts && tsx src/local-agent-adapters.test.ts && tsx src/local-agent-availability.test.ts && tsx src/local-agent-profiles.test.ts && tsx src/local-agent-targets.test.ts && tsx src/local-agent-store.test.ts && tsx src/roots.test.ts && tsx src/skills.test.ts && tsx src/workspaces.test.ts && tsx src/review-checkpoints.test.ts && tsx src/oauth-store.test.ts && tsx src/cli.test.ts",
     "typecheck": "tsc -p tsconfig.json --noEmit"
   },
   "keywords": [],
@@ -48,6 +48,7 @@
     "diff": "^8.0.3",
     "drizzle-orm": "^0.45.2",
     "express": "^5.2.1",
+    "lucide": "^1.24.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "semver": "^7.8.4",

src/server.ts

@@ -856,6 +856,7 @@ function createMcpServer(
             root: workspace.root,
             path: workspace.root,
             summary: {
+              mode: workspace.mode,
               agentsFiles: loadedAgentsFiles.length,
               availableAgentsFiles: availableAgentsFileOutputs.length,
               skills: visibleSkills.length,
@@ -1206,6 +1207,7 @@ function createMcpServer(
                 additions: applied.additions,
                 removals: applied.removals,
               },
+              files: applied.files,
               payload: { patch: applied.patch },
             },
           },

src/ui/icons.ts

@@ -0,0 +1,42 @@
+import {
+  ChevronDown,
+  FileDiff,
+  FileMinus,
+  FilePenLine,
+  FilePlus,
+  FileText,
+  Files,
+  FolderOpen,
+  FolderTree,
+  LoaderCircle,
+  Search,
+  SquareTerminal,
+  Terminal,
+  createElement,
+  type IconNode,
+} from "lucide";
+
+export const toolIcons = {
+  chevronDown: ChevronDown,
+  deleteFile: FileMinus,
+  diff: FileDiff,
+  editFile: FilePenLine,
+  files: Files,
+  folderOpen: FolderOpen,
+  folderTree: FolderTree,
+  loading: LoaderCircle,
+  readFile: FileText,
+  search: Search,
+  terminal: Terminal,
+  terminalSquare: SquareTerminal,
+  writeFile: FilePlus,
+} as const satisfies Record<string, IconNode>;
+
+export type ToolIcon = IconNode;
+
+export function renderIcon(icon: ToolIcon, className = "icon-svg"): SVGElement {
+  return createElement(icon, {
+    class: className,
+    "aria-hidden": "true",
+  });
+}

src/ui/patch-display.test.ts

@@ -2,14 +2,14 @@ import assert from "node:assert/strict";
 import { getPatchDisplayParts } from "./patch-display.js";
 
 assert.deepEqual(getPatchDisplayParts({}), {
-  title: "Apply Patch",
+  title: "Applied patch",
   tone: "edit",
 });
 
 assert.deepEqual(
   getPatchDisplayParts({ files: [{ path: "created.ts", operation: "add" }] }),
   {
-    title: "Write File",
+    title: "Added 1 file",
     iconOperation: "add",
     tone: "write",
   },
@@ -23,7 +23,7 @@ assert.deepEqual(
     ],
   }),
   {
-    title: "Write Files",
+    title: "Added 2 files",
     iconOperation: "add",
     tone: "write",
   },
@@ -37,7 +37,7 @@ assert.deepEqual(
     ],
   }),
   {
-    title: "Write & Edit Files",
+    title: "Changed 2 files",
     tone: "edit",
   },
 );
@@ -50,7 +50,7 @@ assert.deepEqual(
     ],
   }),
   {
-    title: "Write & Edit File",
+    title: "Changed 1 file",
     tone: "edit",
   },
 );
@@ -64,7 +64,7 @@ assert.deepEqual(
     ],
   }),
   {
-    title: "Edit, Move & Delete Files",
+    title: "Changed 3 files",
     tone: "edit",
   },
 );

src/ui/patch-display.ts

@@ -7,18 +7,18 @@ export interface PatchDisplayParts {
 }
 
 const patchOperationLabels: Record<PatchOperation, string> = {
-  add: "Write",
-  update: "Edit",
-  delete: "Delete",
-  move: "Move",
+  add: "Added",
+  update: "Edited",
+  delete: "Deleted",
+  move: "Moved",
 };
 
 export function getPatchDisplayParts(card: Pick<ToolResultCard, "files">): PatchDisplayParts {
   const files = card.files ?? [];
   const operations = patchOperations(files);
 
   if (operations.length === 0) {
-    return { title: "Apply Patch", tone: "edit" };
+    return { title: "Applied patch", tone: "edit" };
   }
 
   const singleOperation = operations.length === 1 ? operations[0] : undefined;
@@ -57,18 +57,12 @@ function countChangedFiles(files: NonNullable<ToolResultCard["files"]>): number
 
 function patchTitle(operations: PatchOperation[], fileCount: number): string {
   if (operations.length === 1) {
-    return `${patchOperationLabels[operations[0]]} ${fileNoun(fileCount)}`;
+    return `${patchOperationLabels[operations[0]]} ${fileCount} ${fileNoun(fileCount)}`;
   }
 
-  return `${joinTitleParts(operations.map((operation) => patchOperationLabels[operation]))} ${fileNoun(fileCount)}`;
+  return `Changed ${fileCount} ${fileNoun(fileCount)}`;
 }
 
-function fileNoun(fileCount: number): "File" | "Files" {
-  return fileCount === 1 ? "File" : "Files";
-}
-
-function joinTitleParts(parts: string[]): string {
-  if (parts.length <= 1) return parts[0] ?? "";
-  if (parts.length === 2) return `${parts[0]} & ${parts[1]}`;
-  return `${parts.slice(0, -1).join(", ")} & ${parts.at(-1)}`;
+function fileNoun(fileCount: number): "file" | "files" {
+  return fileCount === 1 ? "file" : "files";
 }

src/ui/tool-display.test.ts

@@ -0,0 +1,129 @@
+import assert from "node:assert/strict";
+import type { ToolResultCard } from "./card-types.js";
+import { toolIcons } from "./icons.js";
+import { getToolDisplay, getToolHeaderSummary } from "./tool-display.js";
+
+const displayCases: Array<[ToolResultCard, { title: string; tone: string }]> = [
+  [{ tool: "open_workspace", root: "/tmp/project" }, { title: "Opened workspace", tone: "workspace" }],
+  [{ tool: "read", path: "src/read.ts" }, { title: "Read file", tone: "read" }],
+  [{ tool: "write", path: "src/write.ts" }, { title: "Wrote file", tone: "write" }],
+  [{ tool: "edit", path: "src/edit.ts" }, { title: "Edited file", tone: "edit" }],
+  [{
+    tool: "apply_patch",
+    files: [{ path: "src/new.ts", operation: "add" }],
+  }, { title: "Added 1 file", tone: "write" }],
+  [{
+    tool: "grep",
+    summary: { pattern: "needle", scope: "src" },
+  }, { title: "Searched files", tone: "search" }],
+  [{ tool: "ls", path: "src" }, { title: "Listed directory", tone: "directory" }],
+  [{ tool: "bash", summary: { command: "npm test", exitCode: 0 } }, { title: "Ran command", tone: "shell" }],
+];
+
+for (const [card, expected] of displayCases) {
+  assert.deepEqual(pickDisplay(getToolDisplay(card)), expected);
+}
+
+assert.equal(getToolDisplay({ tool: "open_workspace", root: "/tmp/project" }).label, "/tmp/project");
+assert.equal(
+  getToolDisplay({ tool: "grep", summary: { pattern: "needle", scope: "src" } }).label,
+  "needle in src",
+);
+
+assert.deepEqual(
+  pickDisplay(getToolDisplay({
+    tool: "show_changes",
+    files: [
+      { path: "src/a.ts", operation: "update" },
+      { path: "src/b.ts", operation: "update" },
+    ],
+  })),
+  { title: "Edited 2 files", tone: "review" },
+);
+
+assert.deepEqual(
+  pickDisplay(getToolDisplay({
+    tool: "show_changes",
+    files: [
+      { path: "src/a.ts", operation: "add" },
+      { path: "src/b.ts", operation: "update" },
+    ],
+  })),
+  { title: "Changed 2 files", tone: "review" },
+);
+
+assert.equal(
+  getToolDisplay({ tool: "exec_command", summary: { running: true, command: "npm test" } }).title,
+  "Command running",
+);
+assert.equal(
+  getToolDisplay({ tool: "exec_command", summary: { running: false, exitCode: 1 } }).title,
+  "Command failed",
+);
+assert.equal(
+  getToolDisplay({ tool: "write_stdin", summary: { running: false, exitCode: 0 } }).title,
+  "Process finished",
+);
+
+assert.deepEqual(
+  pickDisplay(getToolDisplay({ tool: "glob", summary: { lines: 1, pattern: "**/*.ts" } })),
+  { title: "Found files", tone: "search" },
+);
+
+assert.deepEqual(
+  getToolHeaderSummary({ tool: "glob", summary: { lines: 1 } }),
+  { kind: "empty" },
+);
+
+assert.equal(
+  getToolDisplay({
+    tool: "apply_patch",
+    files: [{ path: "src/removed.ts", operation: "delete" }],
+  }).icon,
+  toolIcons.deleteFile,
+);
+
+assert.deepEqual(
+  getToolHeaderSummary({ tool: "show_changes", summary: { additions: 14, removals: 1 } }),
+  { kind: "diff", additions: 14, removals: 1 },
+);
+
+assert.deepEqual(
+  getToolHeaderSummary({
+    tool: "open_workspace",
+    summary: { mode: "worktree", agentsFiles: 1, skills: 4 },
+  }),
+  { kind: "text", text: "worktree · 1 instruction · 4 skills" },
+);
+
+assert.deepEqual(
+  getToolHeaderSummary({ tool: "exec_command", summary: { lines: 3, wallTimeMs: 1_500 } }),
+  { kind: "text", text: "3 lines · 1.5s" },
+);
+
+assert.deepEqual(
+  getToolHeaderSummary({ tool: "grep", summary: { lines: 2 } }),
+  { kind: "text", text: "2 lines" },
+);
+
+assert.deepEqual(
+  getToolHeaderSummary({ tool: "read", summary: { lines: 1 } }),
+  { kind: "text", text: "1 line" },
+);
+
+assert.deepEqual(
+  getToolHeaderSummary({ tool: "ls", summary: { lines: 0 } }),
+  { kind: "text", text: "0 lines" },
+);
+
+assert.deepEqual(
+  getToolHeaderSummary({ tool: "open_workspace" }),
+  { kind: "empty" },
+);
+
+function pickDisplay(display: ReturnType<typeof getToolDisplay>) {
+  return {
+    title: display.title,
+    tone: display.tone,
+  };
+}