Skip to content

Commit c26f91a

Browse files
ethanndicksonethanndickson
committed
refactor: extract shared tool primitives (ToolIcon, ErrorBox, OutputPaths, formatDuration)
DRY up tool components by extracting common patterns: - ToolIcon: emoji + tooltip wrapper used in all tools - ErrorBox: danger-styled error display box - OutputPaths: stdout/stderr file path display - formatDuration: human-readable time formatting (ms/s/m/h) Net reduction of ~39 lines in new components while improving consistency.
1 parent 0a76e44 commit c26f91a

File tree

5 files changed

+88
-49
lines changed

5 files changed

+88
-49
lines changed

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

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -12,24 +12,23 @@ import {
1212
ToolDetails,
1313
DetailSection,
1414
LoadingDots,
15+
ToolIcon,
16+
ErrorBox,
1517
} from "./shared/ToolPrimitives";
16-
import { useToolExpansion, getStatusDisplay, type ToolStatus } from "./shared/toolUtils";
18+
import {
19+
useToolExpansion,
20+
getStatusDisplay,
21+
formatDuration,
22+
type ToolStatus,
23+
} from "./shared/toolUtils";
1724
import { cn } from "@/common/lib/utils";
18-
import { TooltipWrapper, Tooltip } from "../Tooltip";
1925

2026
interface BashBackgroundListToolCallProps {
2127
args: BashBackgroundListArgs;
2228
result?: BashBackgroundListResult;
2329
status?: ToolStatus;
2430
}
2531

26-
function formatUptime(ms: number): string {
27-
if (ms < 1000) return `${Math.round(ms)}ms`;
28-
if (ms < 60000) return `${Math.round(ms / 1000)}s`;
29-
if (ms < 3600000) return `${Math.round(ms / 60000)}m`;
30-
return `${Math.round(ms / 3600000)}h`;
31-
}
32-
3332
function getProcessStatusStyle(status: BashBackgroundListProcess["status"]) {
3433
switch (status) {
3534
case "running":
@@ -56,10 +55,7 @@ export const BashBackgroundListToolCall: React.FC<BashBackgroundListToolCallProp
5655
<ToolContainer expanded={expanded}>
5756
<ToolHeader onClick={toggleExpanded}>
5857
<ExpandIcon expanded={expanded}>▶</ExpandIcon>
59-
<TooltipWrapper inline>
60-
<span>📋</span>
61-
<Tooltip>bash_background_list</Tooltip>
62-
</TooltipWrapper>
58+
<ToolIcon emoji="📋" toolName="bash_background_list" />
6359
<span className="text-text-secondary">
6460
{result?.success
6561
? processCount === 0
@@ -74,9 +70,7 @@ export const BashBackgroundListToolCall: React.FC<BashBackgroundListToolCallProp
7470
<ToolDetails>
7571
{result?.success === false && (
7672
<DetailSection>
77-
<div className="text-danger bg-danger-overlay border-danger rounded border-l-2 px-2 py-1.5 text-[11px]">
78-
{result.error}
79-
</div>
73+
<ErrorBox>{result.error}</ErrorBox>
8074
</DetailSection>
8175
)}
8276

@@ -102,7 +96,7 @@ export const BashBackgroundListToolCall: React.FC<BashBackgroundListToolCallProp
10296
{proc.exitCode !== undefined && ` (${proc.exitCode})`}
10397
</span>
10498
<span className="text-text-secondary ml-auto">
105-
{formatUptime(proc.uptime_ms)}
99+
{formatDuration(proc.uptime_ms)}
106100
</span>
107101
</div>
108102
<div className="text-text-secondary truncate font-mono" title={proc.script}>

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

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,8 @@ import type {
33
BashBackgroundTerminateArgs,
44
BashBackgroundTerminateResult,
55
} from "@/common/types/tools";
6-
import { ToolContainer, ToolHeader, StatusIndicator } from "./shared/ToolPrimitives";
6+
import { ToolContainer, ToolHeader, StatusIndicator, ToolIcon } from "./shared/ToolPrimitives";
77
import { getStatusDisplay, type ToolStatus } from "./shared/toolUtils";
8-
import { TooltipWrapper, Tooltip } from "../Tooltip";
98

109
interface BashBackgroundTerminateToolCallProps {
1110
args: BashBackgroundTerminateArgs;
@@ -23,10 +22,7 @@ export const BashBackgroundTerminateToolCall: React.FC<BashBackgroundTerminateTo
2322
return (
2423
<ToolContainer expanded={false}>
2524
<ToolHeader>
26-
<TooltipWrapper inline>
27-
<span>⏹️</span>
28-
<Tooltip>bash_background_terminate</Tooltip>
29-
</TooltipWrapper>
25+
<ToolIcon emoji="⏹️" toolName="bash_background_terminate" />
3026
<span className="text-text font-mono">
3127
{result?.success === true ? (result.display_name ?? args.process_id) : args.process_id}
3228
</span>

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

Lines changed: 12 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,17 @@ import {
1111
DetailLabel,
1212
DetailContent,
1313
LoadingDots,
14+
ToolIcon,
15+
ErrorBox,
16+
OutputPaths,
1417
} from "./shared/ToolPrimitives";
15-
import { useToolExpansion, getStatusDisplay, type ToolStatus } from "./shared/toolUtils";
18+
import {
19+
useToolExpansion,
20+
getStatusDisplay,
21+
formatDuration,
22+
type ToolStatus,
23+
} from "./shared/toolUtils";
1624
import { cn } from "@/common/lib/utils";
17-
import { TooltipWrapper, Tooltip } from "../Tooltip";
1825

1926
interface BashToolCallProps {
2027
args: BashToolArgs;
@@ -23,13 +30,6 @@ interface BashToolCallProps {
2330
startedAt?: number;
2431
}
2532

26-
function formatDuration(ms: number): string {
27-
if (ms < 1000) {
28-
return `${Math.round(ms)}ms`;
29-
}
30-
return `${Math.round(ms / 1000)}s`;
31-
}
32-
3333
export const BashToolCall: React.FC<BashToolCallProps> = ({
3434
args,
3535
result,
@@ -65,10 +65,7 @@ export const BashToolCall: React.FC<BashToolCallProps> = ({
6565
<ToolContainer expanded={expanded}>
6666
<ToolHeader onClick={toggleExpanded}>
6767
<ExpandIcon expanded={expanded}>▶</ExpandIcon>
68-
<TooltipWrapper inline>
69-
<span>🔧</span>
70-
<Tooltip>bash</Tooltip>
71-
</TooltipWrapper>
68+
<ToolIcon emoji="🔧" toolName="bash" />
7269
<span className="text-text font-monospace max-w-96 truncate">{args.script}</span>
7370
{isBackground ? (
7471
// Background mode: show background badge and optional display name
@@ -115,26 +112,15 @@ export const BashToolCall: React.FC<BashToolCallProps> = ({
115112
{result.success === false && result.error && (
116113
<DetailSection>
117114
<DetailLabel>Error</DetailLabel>
118-
<div className="text-danger bg-danger-overlay border-danger rounded border-l-2 px-2 py-1.5 text-[11px]">
119-
{result.error}
120-
</div>
115+
<ErrorBox>{result.error}</ErrorBox>
121116
</DetailSection>
122117
)}
123118

124119
{"backgroundProcessId" in result ? (
125120
// Background process: show file paths
126121
<DetailSection>
127122
<DetailLabel>Output Files</DetailLabel>
128-
<div className="bg-code-bg space-y-1 rounded px-2 py-1.5 font-mono text-[11px]">
129-
<div>
130-
<span className="text-text-secondary">stdout:</span>{" "}
131-
<span className="text-text">{result.stdout_path}</span>
132-
</div>
133-
<div>
134-
<span className="text-text-secondary">stderr:</span>{" "}
135-
<span className="text-text">{result.stderr_path}</span>
136-
</div>
137-
</div>
123+
<OutputPaths stdout={result.stdout_path} stderr={result.stderr_path} />
138124
</DetailSection>
139125
) : (
140126
// Normal process: show output

‎src/browser/components/tools/shared/ToolPrimitives.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from "react";
22
import { cn } from "@/common/lib/utils";
3+
import { TooltipWrapper, Tooltip } from "../../Tooltip";
34

45
/**
56
* Shared styled components for tool UI
@@ -157,3 +158,55 @@ export const HeaderButton: React.FC<HeaderButtonProps> = ({ active, className, .
157158
{...props}
158159
/>
159160
);
161+
162+
/**
163+
* Tool icon with tooltip showing tool name
164+
*/
165+
interface ToolIconProps {
166+
emoji: string;
167+
toolName: string;
168+
}
169+
170+
export const ToolIcon: React.FC<ToolIconProps> = ({ emoji, toolName }) => (
171+
<TooltipWrapper inline>
172+
<span>{emoji}</span>
173+
<Tooltip>{toolName}</Tooltip>
174+
</TooltipWrapper>
175+
);
176+
177+
/**
178+
* Error display box with danger styling
179+
*/
180+
export const ErrorBox: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
181+
className,
182+
...props
183+
}) => (
184+
<div
185+
className={cn(
186+
"text-danger bg-danger-overlay border-danger rounded border-l-2 px-2 py-1.5 text-[11px]",
187+
className
188+
)}
189+
{...props}
190+
/>
191+
);
192+
193+
/**
194+
* Output file paths display (stdout/stderr)
195+
*/
196+
interface OutputPathsProps {
197+
stdout: string;
198+
stderr: string;
199+
}
200+
201+
export const OutputPaths: React.FC<OutputPathsProps> = ({ stdout, stderr }) => (
202+
<div className="bg-code-bg space-y-1 rounded px-2 py-1.5 font-mono text-[11px]">
203+
<div>
204+
<span className="text-text-secondary">stdout:</span>{" "}
205+
<span className="text-text">{stdout}</span>
206+
</div>
207+
<div>
208+
<span className="text-text-secondary">stderr:</span>{" "}
209+
<span className="text-text">{stderr}</span>
210+
</div>
211+
</div>
212+
);

‎src/browser/components/tools/shared/toolUtils.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,3 +64,13 @@ export function formatValue(value: unknown): string {
6464
return "[Complex Object - Cannot Stringify]";
6565
}
6666
}
67+
68+
/**
69+
* Format duration in human-readable form (ms, s, m, h)
70+
*/
71+
export function formatDuration(ms: number): string {
72+
if (ms < 1000) return `${Math.round(ms)}ms`;
73+
if (ms < 60000) return `${Math.round(ms / 1000)}s`;
74+
if (ms < 3600000) return `${Math.round(ms / 60000)}m`;
75+
return `${Math.round(ms / 3600000)}h`;
76+
}

0 commit comments

Comments
 (0)