refactor: migrate existing tool components to shared primitives

Update FileReadToolCall, FileEditToolCall, WebFetchToolCall,
StatusSetToolCall, and TodoToolCall to use ToolIcon and ErrorBox
primitives instead of duplicated TooltipWrapper/Tooltip and
manual error styling.

Net removal of ~26 lines while ensuring consistent styling.

Author: ethanndickson

src/browser/components/tools/FileEditToolCall.tsx

@@ -18,10 +18,11 @@ import {
   DetailSection,
   DetailLabel,
   LoadingDots,
+  ToolIcon,
+  ErrorBox,
 } from "./shared/ToolPrimitives";
 import { useToolExpansion, getStatusDisplay, type ToolStatus } from "./shared/toolUtils";
 import { useCopyToClipboard } from "@/browser/hooks/useCopyToClipboard";
-import { TooltipWrapper, Tooltip } from "../Tooltip";
 import { DiffContainer, DiffRenderer, SelectableDiffRenderer } from "../shared/DiffRenderer";
 import { KebabMenu, type KebabMenuItem } from "../KebabMenu";
 
@@ -84,11 +85,7 @@ function renderDiff(
       </React.Fragment>
     ));
   } catch (error) {
-    return (
-      <div className="text-danger bg-danger-overlay border-danger rounded border-l-2 px-2 py-1.5 text-[11px]">
-        Failed to parse diff: {String(error)}
-      </div>
-    );
+    return <ErrorBox>Failed to parse diff: {String(error)}</ErrorBox>;
   }
 }
 
@@ -135,10 +132,7 @@ export const FileEditToolCall: React.FC<FileEditToolCallProps> = ({
           className="hover:text-text flex flex-1 cursor-pointer items-center gap-2"
         >
           <ExpandIcon expanded={expanded}>▶</ExpandIcon>
-          <TooltipWrapper inline>
-            <span>✏️</span>
-            <Tooltip>{toolName}</Tooltip>
-          </TooltipWrapper>
+          <ToolIcon emoji="✏️" toolName={toolName} />
           <div className="text-text flex max-w-96 min-w-0 items-center gap-1.5">
             <FileIcon filePath={filePath} className="text-[15px] leading-none" />
             <span className="font-monospace truncate">{filePath}</span>
@@ -161,9 +155,7 @@ export const FileEditToolCall: React.FC<FileEditToolCallProps> = ({
               {result.success === false && result.error && (
                 <DetailSection>
                   <DetailLabel>Error</DetailLabel>
-                  <div className="text-danger bg-danger-overlay border-danger rounded border-l-2 px-2 py-1.5 text-[11px]">
-                    {result.error}
-                  </div>
+                  <ErrorBox>{result.error}</ErrorBox>
                 </DetailSection>
               )}
 

src/browser/components/tools/FileReadToolCall.tsx

@@ -11,9 +11,10 @@ import {
   DetailLabel,
   DetailContent,
   LoadingDots,
+  ToolIcon,
+  ErrorBox,
 } from "./shared/ToolPrimitives";
 import { useToolExpansion, getStatusDisplay, type ToolStatus } from "./shared/toolUtils";
-import { TooltipWrapper, Tooltip } from "../Tooltip";
 
 interface FileReadToolCallProps {
   args: FileReadToolArgs;
@@ -79,10 +80,7 @@ export const FileReadToolCall: React.FC<FileReadToolCallProps> = ({
     <ToolContainer expanded={expanded} className="@container">
       <ToolHeader onClick={toggleExpanded}>
         <ExpandIcon expanded={expanded}>▶</ExpandIcon>
-        <TooltipWrapper inline>
-          <span>📖</span>
-          <Tooltip>file_read</Tooltip>
-        </TooltipWrapper>
+        <ToolIcon emoji="📖" toolName="file_read" />
         <div className="text-text flex max-w-96 min-w-0 items-center gap-1.5">
           <FileIcon filePath={filePath} className="text-[15px] leading-none" />
           <span className="font-monospace truncate">{filePath}</span>
@@ -125,9 +123,7 @@ export const FileReadToolCall: React.FC<FileReadToolCallProps> = ({
               {result.success === false && result.error && (
                 <DetailSection>
                   <DetailLabel>Error</DetailLabel>
-                  <div className="text-danger bg-danger-overlay border-danger rounded border-l-2 px-2 py-1.5 text-[11px]">
-                    {result.error}
-                  </div>
+                  <ErrorBox>{result.error}</ErrorBox>
                 </DetailSection>
               )}
 

src/browser/components/tools/StatusSetToolCall.tsx

@@ -1,8 +1,7 @@
 import React from "react";
 import type { StatusSetToolArgs, StatusSetToolResult } from "@/common/types/tools";
-import { ToolContainer, ToolHeader, StatusIndicator } from "./shared/ToolPrimitives";
+import { ToolContainer, ToolHeader, StatusIndicator, ToolIcon } from "./shared/ToolPrimitives";
 import { getStatusDisplay, type ToolStatus } from "./shared/toolUtils";
-import { TooltipWrapper, Tooltip } from "../Tooltip";
 
 interface StatusSetToolCallProps {
   args: StatusSetToolArgs;
@@ -26,10 +25,7 @@ export const StatusSetToolCall: React.FC<StatusSetToolCallProps> = ({
   return (
     <ToolContainer expanded={false}>
       <ToolHeader>
-        <TooltipWrapper inline>
-          <span>{args.emoji}</span>
-          <Tooltip>status_set</Tooltip>
-        </TooltipWrapper>
+        <ToolIcon emoji={args.emoji} toolName="status_set" />
         <span className="text-muted-foreground italic">{args.message}</span>
         {errorMessage && <span className="text-error-foreground">({errorMessage})</span>}
         <StatusIndicator status={status}>{statusDisplay}</StatusIndicator>

src/browser/components/tools/TodoToolCall.tsx

@@ -6,9 +6,9 @@ import {
   ExpandIcon,
   StatusIndicator,
   ToolDetails,
+  ToolIcon,
 } from "./shared/ToolPrimitives";
 import { useToolExpansion, getStatusDisplay, type ToolStatus } from "./shared/toolUtils";
-import { TooltipWrapper, Tooltip } from "../Tooltip";
 import { TodoList } from "../TodoList";
 
 interface TodoToolCallProps {
@@ -29,10 +29,7 @@ export const TodoToolCall: React.FC<TodoToolCallProps> = ({
     <ToolContainer expanded={expanded}>
       <ToolHeader onClick={toggleExpanded}>
         <ExpandIcon expanded={expanded}>▶</ExpandIcon>
-        <TooltipWrapper inline>
-          <span>📋</span>
-          <Tooltip>todo_write</Tooltip>
-        </TooltipWrapper>
+        <ToolIcon emoji="📋" toolName="todo_write" />
         <StatusIndicator status={status}>{statusDisplay}</StatusIndicator>
       </ToolHeader>
 

src/browser/components/tools/WebFetchToolCall.tsx

@@ -9,9 +9,10 @@ import {
   DetailSection,
   DetailLabel,
   LoadingDots,
+  ToolIcon,
+  ErrorBox,
 } from "./shared/ToolPrimitives";
 import { useToolExpansion, getStatusDisplay, type ToolStatus } from "./shared/toolUtils";
-import { TooltipWrapper, Tooltip } from "../Tooltip";
 import { MarkdownRenderer } from "../Messages/MarkdownRenderer";
 
 interface WebFetchToolCallProps {
@@ -51,10 +52,7 @@ export const WebFetchToolCall: React.FC<WebFetchToolCallProps> = ({
     <ToolContainer expanded={expanded} className="@container">
       <ToolHeader onClick={toggleExpanded}>
         <ExpandIcon expanded={expanded}>▶</ExpandIcon>
-        <TooltipWrapper inline>
-          <span>🌐</span>
-          <Tooltip>web_fetch</Tooltip>
-        </TooltipWrapper>
+        <ToolIcon emoji="🌐" toolName="web_fetch" />
         <div className="text-text flex max-w-96 min-w-0 items-center gap-1.5">
           <span className="font-monospace truncate">{domain}</span>
         </div>
@@ -96,9 +94,7 @@ export const WebFetchToolCall: React.FC<WebFetchToolCallProps> = ({
               {result.success === false && result.error && (
                 <DetailSection>
                   <DetailLabel>Error</DetailLabel>
-                  <div className="text-danger bg-danger-overlay border-danger rounded border-l-2 px-2 py-1.5 text-[11px]">
-                    {result.error}
-                  </div>
+                  <ErrorBox>{result.error}</ErrorBox>
                 </DetailSection>
               )}