Skip to content

Commit d8dc85b

Browse files
ethanndicksonethanndickson
committed
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.
1 parent 1eade3f commit d8dc85b

6 files changed

Lines changed: 22 additions & 53 deletions

File tree

‎src/browser/components/tools/BashToolCall.tsx‎

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -117,19 +117,11 @@ export const BashToolCall: React.FC<BashToolCallProps> = ({
117117
)}
118118

119119
{"backgroundProcessId" in result ? (
120-
// Background process: show process ID and file paths
121-
<>
122-
<DetailSection>
123-
<DetailLabel>Process ID</DetailLabel>
124-
<div className="bg-code-bg rounded px-2 py-1.5 font-mono text-[11px]">
125-
{result.backgroundProcessId}
126-
</div>
127-
</DetailSection>
128-
<DetailSection>
129-
<DetailLabel>Output Files</DetailLabel>
130-
<OutputPaths stdout={result.stdout_path} stderr={result.stderr_path} />
131-
</DetailSection>
132-
</>
120+
// Background process: show file paths
121+
<DetailSection>
122+
<DetailLabel>Output Files</DetailLabel>
123+
<OutputPaths stdout={result.stdout_path} stderr={result.stderr_path} />
124+
</DetailSection>
133125
) : (
134126
// Normal process: show output
135127
result.output && (

‎src/browser/components/tools/FileEditToolCall.tsx‎

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,11 @@ import {
1818
DetailSection,
1919
DetailLabel,
2020
LoadingDots,
21+
ToolIcon,
22+
ErrorBox,
2123
} from "./shared/ToolPrimitives";
2224
import { useToolExpansion, getStatusDisplay, type ToolStatus } from "./shared/toolUtils";
2325
import { useCopyToClipboard } from "@/browser/hooks/useCopyToClipboard";
24-
import { TooltipWrapper, Tooltip } from "../Tooltip";
2526
import { DiffContainer, DiffRenderer, SelectableDiffRenderer } from "../shared/DiffRenderer";
2627
import { KebabMenu, type KebabMenuItem } from "../KebabMenu";
2728

@@ -84,11 +85,7 @@ function renderDiff(
8485
</React.Fragment>
8586
));
8687
} catch (error) {
87-
return (
88-
<div className="text-danger bg-danger-overlay border-danger rounded border-l-2 px-2 py-1.5 text-[11px]">
89-
Failed to parse diff: {String(error)}
90-
</div>
91-
);
88+
return <ErrorBox>Failed to parse diff: {String(error)}</ErrorBox>;
9289
}
9390
}
9491

@@ -135,10 +132,7 @@ export const FileEditToolCall: React.FC<FileEditToolCallProps> = ({
135132
className="hover:text-text flex flex-1 cursor-pointer items-center gap-2"
136133
>
137134
<ExpandIcon expanded={expanded}>▶</ExpandIcon>
138-
<TooltipWrapper inline>
139-
<span>✏️</span>
140-
<Tooltip>{toolName}</Tooltip>
141-
</TooltipWrapper>
135+
<ToolIcon emoji="✏️" toolName={toolName} />
142136
<div className="text-text flex max-w-96 min-w-0 items-center gap-1.5">
143137
<FileIcon filePath={filePath} className="text-[15px] leading-none" />
144138
<span className="font-monospace truncate">{filePath}</span>
@@ -161,9 +155,7 @@ export const FileEditToolCall: React.FC<FileEditToolCallProps> = ({
161155
{result.success === false && result.error && (
162156
<DetailSection>
163157
<DetailLabel>Error</DetailLabel>
164-
<div className="text-danger bg-danger-overlay border-danger rounded border-l-2 px-2 py-1.5 text-[11px]">
165-
{result.error}
166-
</div>
158+
<ErrorBox>{result.error}</ErrorBox>
167159
</DetailSection>
168160
)}
169161

‎src/browser/components/tools/FileReadToolCall.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,10 @@ import {
1111
DetailLabel,
1212
DetailContent,
1313
LoadingDots,
14+
ToolIcon,
15+
ErrorBox,
1416
} from "./shared/ToolPrimitives";
1517
import { useToolExpansion, getStatusDisplay, type ToolStatus } from "./shared/toolUtils";
16-
import { TooltipWrapper, Tooltip } from "../Tooltip";
1718

1819
interface FileReadToolCallProps {
1920
args: FileReadToolArgs;
@@ -79,10 +80,7 @@ export const FileReadToolCall: React.FC<FileReadToolCallProps> = ({
7980
<ToolContainer expanded={expanded} className="@container">
8081
<ToolHeader onClick={toggleExpanded}>
8182
<ExpandIcon expanded={expanded}>▶</ExpandIcon>
82-
<TooltipWrapper inline>
83-
<span>📖</span>
84-
<Tooltip>file_read</Tooltip>
85-
</TooltipWrapper>
83+
<ToolIcon emoji="📖" toolName="file_read" />
8684
<div className="text-text flex max-w-96 min-w-0 items-center gap-1.5">
8785
<FileIcon filePath={filePath} className="text-[15px] leading-none" />
8886
<span className="font-monospace truncate">{filePath}</span>
@@ -125,9 +123,7 @@ export const FileReadToolCall: React.FC<FileReadToolCallProps> = ({
125123
{result.success === false && result.error && (
126124
<DetailSection>
127125
<DetailLabel>Error</DetailLabel>
128-
<div className="text-danger bg-danger-overlay border-danger rounded border-l-2 px-2 py-1.5 text-[11px]">
129-
{result.error}
130-
</div>
126+
<ErrorBox>{result.error}</ErrorBox>
131127
</DetailSection>
132128
)}
133129

‎src/browser/components/tools/StatusSetToolCall.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import React from "react";
22
import type { StatusSetToolArgs, StatusSetToolResult } from "@/common/types/tools";
3-
import { ToolContainer, ToolHeader, StatusIndicator } from "./shared/ToolPrimitives";
3+
import { ToolContainer, ToolHeader, StatusIndicator, ToolIcon } from "./shared/ToolPrimitives";
44
import { getStatusDisplay, type ToolStatus } from "./shared/toolUtils";
5-
import { TooltipWrapper, Tooltip } from "../Tooltip";
65

76
interface StatusSetToolCallProps {
87
args: StatusSetToolArgs;
@@ -26,10 +25,7 @@ export const StatusSetToolCall: React.FC<StatusSetToolCallProps> = ({
2625
return (
2726
<ToolContainer expanded={false}>
2827
<ToolHeader>
29-
<TooltipWrapper inline>
30-
<span>{args.emoji}</span>
31-
<Tooltip>status_set</Tooltip>
32-
</TooltipWrapper>
28+
<ToolIcon emoji={args.emoji} toolName="status_set" />
3329
<span className="text-muted-foreground italic">{args.message}</span>
3430
{errorMessage && <span className="text-error-foreground">({errorMessage})</span>}
3531
<StatusIndicator status={status}>{statusDisplay}</StatusIndicator>

‎src/browser/components/tools/TodoToolCall.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ import {
66
ExpandIcon,
77
StatusIndicator,
88
ToolDetails,
9+
ToolIcon,
910
} from "./shared/ToolPrimitives";
1011
import { useToolExpansion, getStatusDisplay, type ToolStatus } from "./shared/toolUtils";
11-
import { TooltipWrapper, Tooltip } from "../Tooltip";
1212
import { TodoList } from "../TodoList";
1313

1414
interface TodoToolCallProps {
@@ -29,10 +29,7 @@ export const TodoToolCall: React.FC<TodoToolCallProps> = ({
2929
<ToolContainer expanded={expanded}>
3030
<ToolHeader onClick={toggleExpanded}>
3131
<ExpandIcon expanded={expanded}>▶</ExpandIcon>
32-
<TooltipWrapper inline>
33-
<span>📋</span>
34-
<Tooltip>todo_write</Tooltip>
35-
</TooltipWrapper>
32+
<ToolIcon emoji="📋" toolName="todo_write" />
3633
<StatusIndicator status={status}>{statusDisplay}</StatusIndicator>
3734
</ToolHeader>
3835

‎src/browser/components/tools/WebFetchToolCall.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,10 @@ import {
99
DetailSection,
1010
DetailLabel,
1111
LoadingDots,
12+
ToolIcon,
13+
ErrorBox,
1214
} from "./shared/ToolPrimitives";
1315
import { useToolExpansion, getStatusDisplay, type ToolStatus } from "./shared/toolUtils";
14-
import { TooltipWrapper, Tooltip } from "../Tooltip";
1516
import { MarkdownRenderer } from "../Messages/MarkdownRenderer";
1617

1718
interface WebFetchToolCallProps {
@@ -51,10 +52,7 @@ export const WebFetchToolCall: React.FC<WebFetchToolCallProps> = ({
5152
<ToolContainer expanded={expanded} className="@container">
5253
<ToolHeader onClick={toggleExpanded}>
5354
<ExpandIcon expanded={expanded}>▶</ExpandIcon>
54-
<TooltipWrapper inline>
55-
<span>🌐</span>
56-
<Tooltip>web_fetch</Tooltip>
57-
</TooltipWrapper>
55+
<ToolIcon emoji="🌐" toolName="web_fetch" />
5856
<div className="text-text flex max-w-96 min-w-0 items-center gap-1.5">
5957
<span className="font-monospace truncate">{domain}</span>
6058
</div>
@@ -96,9 +94,7 @@ export const WebFetchToolCall: React.FC<WebFetchToolCallProps> = ({
9694
{result.success === false && result.error && (
9795
<DetailSection>
9896
<DetailLabel>Error</DetailLabel>
99-
<div className="text-danger bg-danger-overlay border-danger rounded border-l-2 px-2 py-1.5 text-[11px]">
100-
{result.error}
101-
</div>
97+
<ErrorBox>{result.error}</ErrorBox>
10298
</DetailSection>
10399
)}
104100

0 commit comments

Comments
 (0)