refactor(app): centralize tool call presentation (#853)

* refactor(app): centralize tool call presentation

* test(app): inject tool call presentation icons

packages/app/src/tool-calls/presentation.test.ts

@@ -0,0 +1,94 @@
+import type { ToolCallDetail } from "@server/server/agent/agent-sdk-types";
+import { describe, expect, it } from "vitest";
+
+import { buildToolCallPresentation, type ToolCallPresentationIcon } from "./presentation";
+
+const fakeIcons = {
+  brain: (() => null) as ToolCallPresentationIcon,
+  eye: (() => null) as ToolCallPresentationIcon,
+  wrench: (() => null) as ToolCallPresentationIcon,
+};
+
+function fakeResolveIcon(
+  toolName: string,
+  detail: ToolCallDetail | undefined,
+): ToolCallPresentationIcon {
+  if (detail?.type === "plan") {
+    return fakeIcons.brain;
+  }
+  if (detail?.type === "read") {
+    return fakeIcons.eye;
+  }
+  if (toolName === "exec_command") {
+    return fakeIcons.wrench;
+  }
+  return fakeIcons.wrench;
+}
+
+describe("tool-call presentation", () => {
+  it("builds badge, detail, icon, and file-open policy in one model", () => {
+    const presentation = buildToolCallPresentation({
+      toolName: "read_file",
+      status: "completed",
+      error: null,
+      cwd: "/tmp/repo",
+      detail: {
+        type: "read",
+        filePath: "/tmp/repo/src/index.ts",
+        content: "console.log('hi');",
+      },
+      resolveIcon: fakeResolveIcon,
+    });
+
+    expect(presentation).toMatchObject({
+      displayName: "Read",
+      summary: "src/index.ts",
+      icon: fakeIcons.eye,
+      isLoadingDetails: false,
+      hasDetails: true,
+      canOpenDetails: true,
+      openFilePath: "/tmp/repo/src/index.ts",
+      isPlan: false,
+    });
+  });
+
+  it("marks running calls without meaningful detail as loading details", () => {
+    const presentation = buildToolCallPresentation({
+      toolName: "exec_command",
+      status: "running",
+      error: null,
+      detail: {
+        type: "unknown",
+        input: {},
+        output: null,
+      },
+      resolveIcon: fakeResolveIcon,
+    });
+
+    expect(presentation).toMatchObject({
+      displayName: "Exec Command",
+      icon: fakeIcons.wrench,
+      isLoadingDetails: true,
+      hasDetails: false,
+      canOpenDetails: true,
+      openFilePath: null,
+      isPlan: false,
+    });
+  });
+
+  it("keeps plan calls out of the expandable badge path", () => {
+    const presentation = buildToolCallPresentation({
+      toolName: "ExitPlanMode",
+      status: "completed",
+      error: null,
+      detail: {
+        type: "plan",
+        text: "1. Do the thing",
+      },
+      resolveIcon: fakeResolveIcon,
+    });
+
+    expect(presentation.isPlan).toBe(true);
+    expect(presentation.icon).toBe(fakeIcons.brain);
+  });
+});

packages/app/src/tool-calls/presentation.ts

@@ -0,0 +1,79 @@
+import type { ComponentType } from "react";
+import type { ToolCallDetail } from "@server/server/agent/agent-sdk-types";
+import type { ToolCallDisplayInput } from "@/utils/tool-call-display";
+import { buildToolCallDisplayModel } from "@/utils/tool-call-display";
+import { extractToolCallFilePath } from "@/utils/extract-tool-call-file-path";
+import {
+  hasMeaningfulToolCallDetail,
+  isPendingToolCallDetail,
+} from "@/utils/tool-call-detail-state";
+
+type ToolCallStatus = "executing" | "running" | "completed" | "failed" | "canceled";
+export type ToolCallPresentationIcon = ComponentType<{ size?: number; color?: string }>;
+
+interface BuildToolCallPresentationInput {
+  toolName: string;
+  status: ToolCallStatus;
+  error: unknown;
+  detail?: ToolCallDetail;
+  cwd?: string;
+  metadata?: Record<string, unknown>;
+  resolveIcon: ToolCallIconResolver;
+}
+
+export interface ToolCallPresentation {
+  displayName: string;
+  summary?: string;
+  errorText?: string;
+  icon: ToolCallPresentationIcon;
+  isLoadingDetails: boolean;
+  hasDetails: boolean;
+  canOpenDetails: boolean;
+  openFilePath: string | null;
+  isPlan: boolean;
+}
+
+export type ToolCallIconResolver = (
+  toolName: string,
+  detail: ToolCallDetail | undefined,
+) => ToolCallPresentationIcon;
+
+function displayStatus(status: ToolCallStatus): ToolCallDisplayInput["status"] {
+  return status === "executing" ? "running" : status;
+}
+
+function displayDetail(detail: ToolCallDetail | undefined): ToolCallDetail {
+  return detail ?? { type: "unknown", input: null, output: null };
+}
+
+export function buildToolCallPresentation(
+  input: BuildToolCallPresentationInput,
+): ToolCallPresentation {
+  const detailForDisplay = displayDetail(input.detail);
+  const displayModel = buildToolCallDisplayModel({
+    name: input.toolName,
+    status: displayStatus(input.status),
+    error: input.error ?? null,
+    detail: detailForDisplay,
+    metadata: input.metadata,
+    cwd: input.cwd,
+  });
+  const isLoadingDetails = isPendingToolCallDetail({
+    detail: input.detail,
+    status: input.status,
+    error: input.error,
+  });
+  const hasDetails = Boolean(input.error) || hasMeaningfulToolCallDetail(input.detail);
+
+  return {
+    displayName: displayModel.displayName,
+    summary: displayModel.summary,
+    errorText: displayModel.errorText,
+    icon: input.resolveIcon(input.toolName, input.detail),
+    isLoadingDetails,
+    hasDetails,
+    canOpenDetails: hasDetails || isLoadingDetails,
+    openFilePath: extractToolCallFilePath(input.detail),
+    isPlan: input.detail?.type === "plan",
+  };
+}