feat(ui): refine tool cards and change review

src/apply-patch.test.ts

@@ -191,13 +191,16 @@ assert.throws(
 
 const overwriteRoot = await mkdtemp(join(tmpdir(), "devspace-apply-patch-overwrite-"));
 await writeFile(join(overwriteRoot, "duplicate.txt"), "old content\n");
-await applyPatch(
+const overwriteResult = await applyPatch(
   overwriteRoot,
   `*** Begin Patch
 *** Add File: duplicate.txt
 +new content
 *** End Patch`,
 );
+assert.deepEqual(overwriteResult.files, [
+  { path: "duplicate.txt", operation: "update" },
+]);
 assert.equal(await readFile(join(overwriteRoot, "duplicate.txt"), "utf8"), "new content\n");
 
 await writeFile(join(overwriteRoot, "source.txt"), "from\n");

src/apply-patch.ts

@@ -365,7 +365,7 @@ export async function applyPatch(root: string, patch: string): Promise<ApplyPatc
       const original = await readStagedOptional(absolute, action.path);
       staged.set(absolute, { content: action.content, mode: original?.mode });
       patches.push(unifiedFilePatch(action.path, action.path, original?.content ?? null, action.content));
-      results.push({ path: action.path, operation: "add" });
+      results.push({ path: action.path, operation: original ? "update" : "add" });
       continue;
     }
 

src/server.test.ts

@@ -63,7 +63,6 @@ test("open_workspace keeps lifecycle flags out of model output and preserves com
   assert.ok(Array.isArray(card.skills));
   assert.ok(Array.isArray(card.agentProviders));
   assert.ok(Array.isArray(card.agents));
-  assert.ok(Array.isArray(card.skillDiagnostics));
 });
 
 test("concurrent checkout opens return one full context and one reuse instruction", async (t) => {

src/server.ts

@@ -914,7 +914,6 @@ export function createMcpServer(
             skills: cardSkills,
             agentProviders: cardAgentProviders,
             agents: cardAgents,
-            skillDiagnostics: workspace.skillDiagnostics,
             instruction: cardInstruction,
             summary: {
               mode: workspace.mode,
@@ -923,7 +922,6 @@ export function createMcpServer(
               skills: cardSkills.length,
               agentProviders: cardAgentProviders.length,
               agents: cardAgents.length,
-              skillDiagnostics: workspace.skillDiagnostics.length,
             },
           },
         },

src/ui/card-types.test.ts

@@ -3,6 +3,7 @@ import test from "node:test";
 import {
   isEditTool,
   isExpandableCard,
+  isInitiallyExpandedCard,
   isPatchTool,
   isShellTool,
   isToolName,
@@ -31,6 +32,42 @@ test("a patch card expands only when it contains patch content", () => {
   assert.equal(isExpandableCard({ tool: "apply_patch" }), false);
 });
 
+test("a single-file patch opens immediately", () => {
+  assert.equal(
+    isInitiallyExpandedCard({
+      tool: "apply_patch",
+      files: [{ path: "src/a.ts", operation: "update" }],
+      payload: { patch: "diff --git a/src/a.ts b/src/a.ts" },
+    }),
+    true,
+  );
+});
+
+test("a multi-file patch stays collapsed", () => {
+  assert.equal(
+    isInitiallyExpandedCard({
+      tool: "apply_patch",
+      files: [
+        { path: "src/a.ts", operation: "update" },
+        { path: "src/b.ts", operation: "add" },
+      ],
+      payload: { patch: "diff --git a/src/a.ts b/src/a.ts" },
+    }),
+    false,
+  );
+});
+
+test("show changes still opens immediately", () => {
+  assert.equal(
+    isInitiallyExpandedCard({
+      tool: "show_changes",
+      files: [{ path: "src/a.ts", type: "change" }],
+      payload: { patch: "diff --git a/src/a.ts b/src/a.ts" },
+    }),
+    true,
+  );
+});
+
 test("a workspace card expands when it contains provider metadata", () => {
   assert.equal(
     isExpandableCard({

src/ui/card-types.ts

@@ -17,6 +17,12 @@ export type ToolName =
 export type HostContext = NonNullable<ReturnType<App["getHostContext"]>>;
 
 export type PatchOperation = "add" | "update" | "delete" | "move";
+export type ReviewFileType =
+  | "change"
+  | "rename-pure"
+  | "rename-changed"
+  | "new"
+  | "deleted";
 
 export interface ToolResultCard {
   tool: ToolName;
@@ -41,7 +47,7 @@ export interface ToolResultCard {
     path?: string;
     previousPath?: string;
     operation?: PatchOperation;
-    type?: string;
+    type?: ReviewFileType;
     additions?: number;
     removals?: number;
   }>;
@@ -72,7 +78,6 @@ export interface ToolResultCard {
     providerAvailable?: boolean;
     providerUnavailableReason?: string;
   }>;
-  skillDiagnostics?: unknown[];
   instruction?: string;
 }
 
@@ -165,15 +170,13 @@ export function isExpandableCard(card: ToolResultCard): boolean {
       Number(card.summary?.skills ?? 0) > 0 ||
       Number(card.summary?.agentProviders ?? 0) > 0 ||
       Number(card.summary?.agents ?? 0) > 0 ||
-      Number(card.summary?.skillDiagnostics ?? 0) > 0 ||
       Boolean(card.agentsFiles?.length) ||
       Boolean(card.availableAgentsFiles?.length) ||
       Boolean(card.skills?.length) ||
       Boolean(card.agentProviders?.length) ||
       Boolean(card.agents?.length) ||
       Boolean(card.worktree) ||
-      Boolean(card.instruction) ||
-      Boolean(card.skillDiagnostics?.length)
+      Boolean(card.instruction)
     );
   }
 
@@ -182,3 +185,11 @@ export function isExpandableCard(card: ToolResultCard): boolean {
 
   return Boolean(card.payload);
 }
+
+export function isInitiallyExpandedCard(card: ToolResultCard): boolean {
+  if (isReviewTool(card.tool)) return isExpandableCard(card);
+  if (isPatchTool(card.tool)) {
+    return card.files?.length === 1 && isExpandableCard(card);
+  }
+  return false;
+}

src/ui/heavy-payload.tsx

@@ -12,6 +12,7 @@ import {
   type HostContext,
   type ToolResultCard,
 } from "./card-types.js";
+import { pierrePrettyScrollbarCss } from "./scrollbar.js";
 
 type ThemeType = "light" | "dark";
 
@@ -77,7 +78,7 @@ function HeavyPayload({
     );
   }
 
-  return <pre className={`text-payload ${card.tool}`}>{text}</pre>;
+  return <pre className={`text-payload pretty-scrollbar ${card.tool}`}>{text}</pre>;
 }
 
 function FilePayload({
@@ -100,6 +101,7 @@ function FilePayload({
       },
       themeType,
       overflow: "scroll",
+      unsafeCSS: pierrePrettyScrollbarCss,
     }),
     [themeType],
   );
@@ -134,7 +136,7 @@ function FilePayload({
     };
   }, [fileOptions, path, startLine, text]);
 
-  return <div ref={wrapperRef} className="pierre-file" />;
+  return <div ref={wrapperRef} className="pierre-file pretty-scrollbar" />;
 }
 
 function DiffPayload({
@@ -158,12 +160,13 @@ function DiffPayload({
         hunkSeparators: "line-info",
         lineDiffType: "word-alt",
         overflow: "scroll",
+        unsafeCSS: pierrePrettyScrollbarCss,
         collapsedContextThreshold: 4,
         expansionLineCount: 20,
         stickyHeader: true,
         disableFileHeader: true,
       }}
-      className="pierre-diff"
+      className="pierre-diff pretty-scrollbar"
     />
   );
 }

src/ui/icons.ts

@@ -1,13 +1,21 @@
 import {
+  Blocks,
+  Bot,
   ChevronDown,
+  CircleAlert,
+  Cpu,
   FileDiff,
+  FileCheck2,
   FileMinus,
   FilePenLine,
   FilePlus,
   FileText,
   Files,
+  FolderGit2,
   FolderOpen,
   FolderTree,
+  GitBranch,
+  GitCommitHorizontal,
   LoaderCircle,
   Search,
   SquareTerminal,
@@ -17,18 +25,28 @@ import {
 } from "lucide";
 
 export const toolIcons = {
+  agents: Bot,
+  base: GitCommitHorizontal,
   chevronDown: ChevronDown,
   deleteFile: FileMinus,
   diff: FileDiff,
   editFile: FilePenLine,
   files: Files,
   folderOpen: FolderOpen,
   folderTree: FolderTree,
+  gitBranch: GitBranch,
+  instructions: FileText,
+  instructionAvailable: FileText,
+  instructionLoaded: FileCheck2,
   loading: LoaderCircle,
+  providers: Cpu,
   readFile: FileText,
   search: Search,
+  skills: Blocks,
+  sourceCheckout: FolderGit2,
   terminal: Terminal,
   terminalSquare: SquareTerminal,
+  warning: CircleAlert,
   writeFile: FilePlus,
 } as const satisfies Record<string, IconNode>;