🤖 Create shared ToolIcon component for consistent emoji + tooltip pattern

- Add ToolIcon component in shared/ToolIcon.tsx
- Update all tool components to use ToolIcon (except GenericToolCall)
  - BashToolCall: 🔧 bash
  - FileReadToolCall: 📖 file_read
  - FileListToolCall: 📖 file_list (changed from 📋)
  - FileEditToolCall: ✏️ file_edit_*
  - TodoToolCall: 📋 todo_write
  - ProposePlanToolCall: 📋 propose_plan (added tooltip)
- GenericToolCall remains unchanged (text-only fallback)
- Consistent tooltip pattern: hover over emoji shows full tool name

This abstracts the emoji+tooltip pattern into a single reusable component,
ensures consistency across all specialized tool displays, and unifies the
file_read and file_list emojis to 📖.

Author: ammar-agent

src/components/tools/BashToolCall.tsx

@@ -14,7 +14,7 @@ import {
   LoadingDots,
 } from "./shared/ToolPrimitives";
 import { useToolExpansion, getStatusDisplay, type ToolStatus } from "./shared/toolUtils";
-import { TooltipWrapper, Tooltip } from "../Tooltip";
+import { ToolIcon } from "./shared/ToolIcon";
 
 // Bash-specific styled components
 
@@ -123,10 +123,7 @@ export const BashToolCall: React.FC<BashToolCallProps> = ({
     <ToolContainer expanded={expanded}>
       <ToolHeader onClick={toggleExpanded}>
         <ExpandIcon expanded={expanded}>▶</ExpandIcon>
-        <TooltipWrapper inline>
-          <span>🔧</span>
-          <Tooltip>bash</Tooltip>
-        </TooltipWrapper>
+        <ToolIcon emoji="🔧" toolName="bash" />
         <ScriptPreview>{args.script}</ScriptPreview>
         <TimeoutInfo status={isPending ? status : undefined}>
           timeout: {args.timeout_secs ?? BASH_DEFAULT_TIMEOUT_SECS}s

src/components/tools/FileEditToolCall.tsx

@@ -21,7 +21,7 @@ import {
   HeaderButton,
 } from "./shared/ToolPrimitives";
 import { useToolExpansion, getStatusDisplay, type ToolStatus } from "./shared/toolUtils";
-import { TooltipWrapper, Tooltip } from "../Tooltip";
+import { ToolIcon } from "./shared/ToolIcon";
 
 // File edit specific styled components
 
@@ -290,10 +290,7 @@ export const FileEditToolCall: React.FC<FileEditToolCallProps> = ({
       <StyledToolHeader>
         <LeftContent onClick={toggleExpanded}>
           <ExpandIcon expanded={expanded}>▶</ExpandIcon>
-          <TooltipWrapper inline>
-            <span>✏️</span>
-            <Tooltip>{toolName}</Tooltip>
-          </TooltipWrapper>
+          <ToolIcon emoji="✏️" toolName={toolName} />
           <FilePath>{filePath}</FilePath>
         </LeftContent>
         {!(result && result.success && result.diff) && (

src/components/tools/FileListToolCall.tsx

@@ -12,6 +12,7 @@ import {
   LoadingDots,
 } from "./shared/ToolPrimitives";
 import { useToolExpansion, getStatusDisplay, ToolStatus } from "./shared/toolUtils";
+import { ToolIcon } from "./shared/ToolIcon";
 
 // FileList-specific styled components
 
@@ -107,7 +108,7 @@ export const FileListToolCall: React.FC<FileListToolCallProps> = ({ args, result
     <ToolContainer expanded={expanded}>
       <ToolHeader onClick={toggleExpanded}>
         <ExpandIcon expanded={expanded}>▶</ExpandIcon>
-        <span>📋 file_list</span>
+        <ToolIcon emoji="📖" toolName="file_list" />
         <PathText>{args.path}</PathText>
         {paramStr && <ParamsText>{paramStr}</ParamsText>}
         {isComplete && result && result.success && (

src/components/tools/FileReadToolCall.tsx

@@ -13,7 +13,7 @@ import {
   LoadingDots,
 } from "./shared/ToolPrimitives";
 import { useToolExpansion, getStatusDisplay, type ToolStatus } from "./shared/toolUtils";
-import { TooltipWrapper, Tooltip } from "../Tooltip";
+import { ToolIcon } from "./shared/ToolIcon";
 
 // FileRead-specific styled components
 
@@ -165,10 +165,7 @@ export const FileReadToolCall: React.FC<FileReadToolCallProps> = ({
     <ToolContainer expanded={expanded}>
       <ToolHeader onClick={toggleExpanded}>
         <ExpandIcon expanded={expanded}>▶</ExpandIcon>
-        <TooltipWrapper inline>
-          <span>📖</span>
-          <Tooltip>file_read</Tooltip>
-        </TooltipWrapper>
+        <ToolIcon emoji="📖" toolName="file_read" />
         <FilePathText>{filePath}</FilePathText>
         {result && result.success && parsedContent && (
           <MetadataText>

src/components/tools/ProposePlanToolCall.tsx

@@ -10,6 +10,7 @@ import {
   ToolDetails,
 } from "./shared/ToolPrimitives";
 import { useToolExpansion, getStatusDisplay, type ToolStatus } from "./shared/toolUtils";
+import { ToolIcon } from "./shared/ToolIcon";
 import { MarkdownRenderer } from "../Messages/MarkdownRenderer";
 import { formatKeybind, KEYBINDS } from "@/utils/ui/keybinds";
 import { useStartHere } from "@/hooks/useStartHere";
@@ -285,7 +286,7 @@ export const ProposePlanToolCall: React.FC<ProposePlanToolCallProps> = ({
     <ToolContainer expanded={expanded}>
       <ToolHeader onClick={toggleExpanded}>
         <ExpandIcon expanded={expanded}>▶</ExpandIcon>
-        <ToolName>propose_plan</ToolName>
+        <ToolIcon emoji="📋" toolName="propose_plan" />
         <StatusIndicator status={status}>{statusDisplay}</StatusIndicator>
       </ToolHeader>
 

src/components/tools/TodoToolCall.tsx

@@ -8,7 +8,7 @@ import {
   ToolDetails,
 } from "./shared/ToolPrimitives";
 import { useToolExpansion, getStatusDisplay, type ToolStatus } from "./shared/toolUtils";
-import { TooltipWrapper, Tooltip } from "../Tooltip";
+import { ToolIcon } from "./shared/ToolIcon";
 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/components/tools/shared/ToolIcon.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { TooltipWrapper, Tooltip } from "../../Tooltip";
+
+interface ToolIconProps {
+  emoji: string;
+  toolName: string;
+}
+
+/**
+ * Shared component for displaying tool emoji with tooltip showing the full tool name.
+ * Used consistently across all tool components in ToolHeader.
+ */
+export const ToolIcon: React.FC<ToolIconProps> = ({ emoji, toolName }) => {
+  return (
+    <TooltipWrapper inline>
+      <span>{emoji}</span>
+      <Tooltip>{toolName}</Tooltip>
+    </TooltipWrapper>
+  );
+};
+