Skip to content

Commit 1b75514

Browse files
ammarioammario
committed
🤖 WIP: Convert styled components to CSS modules for Chromatic compatibility
- Converted ToolPrimitives to use CSS modules - Converted BashToolCall to use CSS modules - Created CSS module files for remaining components - Still need to complete FileEditToolCall, FileReadToolCall, ProposePlanToolCall Progress on fixing Chromatic build issue where styled is not callable.
1 parent 627c196 commit 1b75514

File tree

7 files changed

+507
-191
lines changed

7 files changed

+507
-191
lines changed

‎src/components/tools/BashToolCall.module.css‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
.scriptPreview {
2+
color: var(--color-text);
3+
font-family: var(--font-monospace);
4+
white-space: nowrap;
5+
overflow: hidden;
6+
text-overflow: ellipsis;
7+
max-width: 400px;
8+
}
9+
10+
.outputBlock {
11+
margin: 0;
12+
padding: 6px 8px;
13+
background: rgba(0, 0, 0, 0.2);
14+
border-radius: 3px;
15+
border-left: 2px solid #4caf50;
16+
font-size: 11px;
17+
line-height: 1.4;
18+
white-space: pre-wrap;
19+
word-break: break-word;
20+
max-height: 200px;
21+
overflow-y: auto;
22+
}
23+
24+
.exitCodeBadge {
25+
display: inline-block;
26+
padding: 2px 6px;
27+
color: white;
28+
border-radius: 3px;
29+
font-size: 10px;
30+
font-weight: 500;
31+
margin-left: 8px;
32+
}
33+
34+
.exitCodeBadge.success {
35+
background: #4caf50;
36+
}
37+
38+
.exitCodeBadge.failure {
39+
background: #f44336;
40+
}
41+
42+
.timeoutInfo {
43+
color: var(--color-text-secondary);
44+
font-size: 10px;
45+
margin-left: 8px;
46+
}
47+
48+
.timeoutInfo.active {
49+
color: var(--color-pending);
50+
}
51+
52+
.errorMessage {
53+
color: #f44336;
54+
font-size: 11px;
55+
padding: 6px 8px;
56+
background: rgba(244, 67, 54, 0.1);
57+
border-radius: 3px;
58+
border-left: 2px solid #f44336;
59+
}

‎src/components/tools/BashToolCall.tsx‎

Lines changed: 13 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React, { useState, useEffect, useRef } from "react";
2-
import styled from "@emotion/styled";
32
import type { BashToolArgs, BashToolResult } from "@/types/tools";
43
import {
54
ToolContainer,
@@ -14,65 +13,7 @@ import {
1413
LoadingDots,
1514
} from "./shared/ToolPrimitives";
1615
import { useToolExpansion, getStatusDisplay, type ToolStatus } from "./shared/toolUtils";
17-
18-
// Bash-specific styled components
19-
20-
const ScriptPreview = styled.span`
21-
color: var(--color-text);
22-
font-family: var(--font-monospace);
23-
white-space: nowrap;
24-
overflow: hidden;
25-
text-overflow: ellipsis;
26-
max-width: 400px;
27-
`;
28-
29-
const OutputBlock = styled.pre`
30-
margin: 0;
31-
padding: 6px 8px;
32-
background: rgba(0, 0, 0, 0.2);
33-
border-radius: 3px;
34-
border-left: 2px solid #4caf50;
35-
font-size: 11px;
36-
line-height: 1.4;
37-
white-space: pre-wrap;
38-
word-break: break-word;
39-
max-height: 200px;
40-
overflow-y: auto;
41-
`;
42-
43-
const ExitCodeBadge = styled.span<{ exitCode: number }>`
44-
display: inline-block;
45-
padding: 2px 6px;
46-
background: ${(props) => (props.exitCode === 0 ? "#4caf50" : "#f44336")};
47-
color: white;
48-
border-radius: 3px;
49-
font-size: 10px;
50-
font-weight: 500;
51-
margin-left: 8px;
52-
`;
53-
54-
const TimeoutInfo = styled.span<{ status?: ToolStatus }>`
55-
color: ${({ status }) => {
56-
switch (status) {
57-
case "executing":
58-
case "pending":
59-
return "var(--color-pending)";
60-
default:
61-
return "var(--color-text-secondary)";
62-
}
63-
}};
64-
font-size: 10px;
65-
margin-left: 8px;
66-
`;
67-
68-
const ErrorMessage = styled.div`
69-
color: #f44336;
70-
font-size: 11px;
71-
padding: 6px 8px;
72-
background: rgba(244, 67, 54, 0.1);
73-
border-radius: 3px;
74-
border-left: 2px solid #f44336;
75-
`;
16+
import styles from "./BashToolCall.module.css";
7617

7718
interface BashToolCallProps {
7819
args: BashToolArgs;
@@ -113,13 +54,19 @@ export const BashToolCall: React.FC<BashToolCallProps> = ({ args, result, status
11354
<ToolHeader onClick={toggleExpanded}>
11455
<ExpandIcon expanded={expanded}>â–¶</ExpandIcon>
11556
<ToolName>bash</ToolName>
116-
<ScriptPreview>{args.script}</ScriptPreview>
117-
<TimeoutInfo status={isPending ? status : undefined}>
57+
<span className={styles.scriptPreview}>{args.script}</span>
58+
<span className={`${styles.timeoutInfo} ${isPending ? styles.active : ""}`}>
11859
timeout: {args.timeout_secs}s
11960
{result && ` • took ${formatDuration(result.wall_duration_ms)}`}
12061
{!result && isPending && elapsedTime > 0 && ` • ${formatDuration(elapsedTime)}`}
121-
</TimeoutInfo>
122-
{result && <ExitCodeBadge exitCode={result.exitCode}>{result.exitCode}</ExitCodeBadge>}
62+
</span>
63+
{result && (
64+
<span
65+
className={`${styles.exitCodeBadge} ${result.exitCode === 0 ? styles.success : styles.failure}`}
66+
>
67+
{result.exitCode}
68+
</span>
69+
)}
12370
<StatusIndicator status={status}>{getStatusDisplay(status)}</StatusIndicator>
12471
</ToolHeader>
12572

@@ -135,14 +82,14 @@ export const BashToolCall: React.FC<BashToolCallProps> = ({ args, result, status
13582
{result.success === false && result.error && (
13683
<DetailSection>
13784
<DetailLabel>Error</DetailLabel>
138-
<ErrorMessage>{result.error}</ErrorMessage>
85+
<div className={styles.errorMessage}>{result.error}</div>
13986
</DetailSection>
14087
)}
14188

14289
{result.output && (
14390
<DetailSection>
14491
<DetailLabel>Output</DetailLabel>
145-
<OutputBlock>{result.output}</OutputBlock>
92+
<pre className={styles.outputBlock}>{result.output}</pre>
14693
</DetailSection>
14794
)}
14895
</>

‎src/components/tools/FileEditToolCall.module.css‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
.compactHeader {
2+
display: flex;
3+
align-items: center;
4+
gap: 8px;
5+
flex: 1;
6+
font-size: 11px;
7+
color: var(--color-text);
8+
}
9+
10+
.editIcon {
11+
font-size: 14px;
12+
}
13+
14+
.filePath {
15+
font-family: var(--font-monospace);
16+
color: var(--color-text);
17+
white-space: nowrap;
18+
overflow: hidden;
19+
text-overflow: ellipsis;
20+
max-width: 400px;
21+
}
22+
23+
.editCount {
24+
color: var(--color-text-secondary);
25+
font-size: 10px;
26+
margin-left: 4px;
27+
}
28+
29+
.tokenCount {
30+
color: var(--color-text-secondary);
31+
font-size: 10px;
32+
margin-left: 4px;
33+
}
34+
35+
.diffBlock {
36+
margin: 0;
37+
padding: 6px 8px;
38+
background: rgba(0, 0, 0, 0.2);
39+
border-radius: 3px;
40+
border-left: 2px solid #ff9800;
41+
font-size: 11px;
42+
line-height: 1.4;
43+
white-space: pre-wrap;
44+
word-break: break-word;
45+
max-height: 400px;
46+
overflow-y: auto;
47+
}
48+
49+
.errorMessage {
50+
color: #f44336;
51+
font-size: 11px;
52+
padding: 6px 8px;
53+
background: rgba(244, 67, 54, 0.1);
54+
border-radius: 3px;
55+
border-left: 2px solid #f44336;
56+
}
57+
58+
.styledToolHeader {
59+
cursor: default;
60+
}
61+
62+
.styledToolHeader:hover {
63+
color: var(--color-text-secondary);
64+
}
65+
66+
.leftContent {
67+
display: flex;
68+
align-items: center;
69+
gap: 8px;
70+
flex: 1;
71+
cursor: pointer;
72+
}
73+
74+
.leftContent:hover {
75+
color: var(--color-text);
76+
}
77+
78+
.buttonGroup {
79+
display: flex;
80+
gap: 6px;
81+
margin-right: 8px;
82+
}

‎src/components/tools/FileReadToolCall.module.css‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
.compactHeader {
2+
display: flex;
3+
align-items: center;
4+
gap: 8px;
5+
flex: 1;
6+
font-size: 11px;
7+
color: var(--color-text);
8+
}
9+
10+
.searchIcon {
11+
font-size: 14px;
12+
}
13+
14+
.filePath {
15+
font-family: var(--font-monospace);
16+
color: var(--color-text);
17+
white-space: nowrap;
18+
overflow: hidden;
19+
text-overflow: ellipsis;
20+
max-width: 400px;
21+
}
22+
23+
.tokenCount {
24+
color: var(--color-text-secondary);
25+
font-size: 10px;
26+
margin-left: 4px;
27+
}
28+
29+
.contentBlock {
30+
margin: 0;
31+
padding: 6px 8px;
32+
background: rgba(0, 0, 0, 0.2);
33+
border-radius: 3px;
34+
border-left: 2px solid #2196f3;
35+
font-size: 11px;
36+
line-height: 1.4;
37+
white-space: pre-wrap;
38+
word-break: break-word;
39+
max-height: 400px;
40+
overflow-y: auto;
41+
}
42+
43+
.metadataRow {
44+
display: flex;
45+
gap: 16px;
46+
font-size: 10px;
47+
color: var(--color-text-secondary);
48+
padding: 4px 0;
49+
}
50+
51+
.errorMessage {
52+
color: #f44336;
53+
font-size: 11px;
54+
padding: 6px 8px;
55+
background: rgba(244, 67, 54, 0.1);
56+
border-radius: 3px;
57+
border-left: 2px solid #f44336;
58+
}
59+
60+
.styledToolHeader {
61+
cursor: default;
62+
}
63+
64+
.styledToolHeader:hover {
65+
color: var(--color-text-secondary);
66+
}
67+
68+
.leftContent {
69+
display: flex;
70+
align-items: center;
71+
gap: 8px;
72+
flex: 1;
73+
cursor: pointer;
74+
}
75+
76+
.leftContent:hover {
77+
color: var(--color-text);
78+
}
79+
80+
.buttonGroup {
81+
display: flex;
82+
gap: 6px;
83+
margin-right: 8px;
84+
}

‎src/components/tools/ProposePlanToolCall.module.css‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
.planIcon {
2+
font-size: 14px;
3+
}
4+
5+
.planPreview {
6+
color: var(--color-text);
7+
font-family: var(--font-monospace);
8+
white-space: nowrap;
9+
overflow: hidden;
10+
text-overflow: ellipsis;
11+
max-width: 500px;
12+
}
13+
14+
.planBlock {
15+
margin: 0;
16+
padding: 8px;
17+
background: rgba(0, 0, 0, 0.2);
18+
border-radius: 3px;
19+
border-left: 2px solid #9c27b0;
20+
font-size: 11px;
21+
line-height: 1.6;
22+
white-space: pre-wrap;
23+
word-break: break-word;
24+
}
25+
26+
.errorMessage {
27+
color: #f44336;
28+
font-size: 11px;
29+
padding: 6px 8px;
30+
background: rgba(244, 67, 54, 0.1);
31+
border-radius: 3px;
32+
border-left: 2px solid #f44336;
33+
}

0 commit comments

Comments
 (0)