Skip to content

Commit 4f6c309

Browse files
cliffhallcliffhall
authored
Merge branch 'main' into fix-reconnect
2 parents 727e075 + a3a1ad4 commit 4f6c309

File tree

3 files changed

+80
-17
lines changed

3 files changed

+80
-17
lines changed

‎client/src/components/JsonView.tsx

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ interface JsonViewProps {
1212
initialExpandDepth?: number;
1313
className?: string;
1414
withCopyButton?: boolean;
15+
isError?: boolean;
1516
}
1617

1718
const JsonView = memo(
@@ -21,6 +22,7 @@ const JsonView = memo(
2122
initialExpandDepth = 3,
2223
className,
2324
withCopyButton = true,
25+
isError = false,
2426
}: JsonViewProps) => {
2527
const { toast } = useToast();
2628
const [copied, setCopied] = useState(false);
@@ -86,6 +88,7 @@ const JsonView = memo(
8688
name={name}
8789
depth={0}
8890
initialExpandDepth={initialExpandDepth}
91+
isError={isError}
8992
/>
9093
</div>
9194
</div>
@@ -100,17 +103,25 @@ interface JsonNodeProps {
100103
name?: string;
101104
depth: number;
102105
initialExpandDepth: number;
106+
isError?: boolean;
103107
}
104108

105109
const JsonNode = memo(
106-
({ data, name, depth = 0, initialExpandDepth }: JsonNodeProps) => {
110+
({
111+
data,
112+
name,
113+
depth = 0,
114+
initialExpandDepth,
115+
isError = false,
116+
}: JsonNodeProps) => {
107117
const [isExpanded, setIsExpanded] = useState(depth < initialExpandDepth);
108118
const [typeStyleMap] = useState<Record<string, string>>({
109119
number: "text-blue-600",
110120
boolean: "text-amber-600",
111121
null: "text-purple-600",
112122
undefined: "text-gray-600",
113-
string: "text-green-600 break-all whitespace-pre-wrap",
123+
string: "text-green-600 group-hover:text-green-500",
124+
error: "text-red-600 group-hover:text-red-500",
114125
default: "text-gray-700",
115126
});
116127
const dataType = getDataType(data);
@@ -214,7 +225,14 @@ const JsonNode = memo(
214225
{name}:
215226
</span>
216227
)}
217-
<pre className={typeStyleMap.string}>"{value}"</pre>
228+
<pre
229+
className={clsx(
230+
typeStyleMap.string,
231+
"break-all whitespace-pre-wrap",
232+
)}
233+
>
234+
"{value}"
235+
</pre>
218236
</div>
219237
);
220238
}
@@ -228,8 +246,8 @@ const JsonNode = memo(
228246
)}
229247
<pre
230248
className={clsx(
231-
typeStyleMap.string,
232-
"cursor-pointer group-hover:text-green-500",
249+
isError ? typeStyleMap.error : typeStyleMap.string,
250+
"cursor-pointer break-all whitespace-pre-wrap",
233251
)}
234252
onClick={() => setIsExpanded(!isExpanded)}
235253
title={isExpanded ? "Click to collapse" : "Click to expand"}

‎client/src/components/Sidebar.tsx

Lines changed: 48 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -103,14 +103,19 @@ const Sidebar = ({
103103
<div className="p-4 flex-1 overflow-auto">
104104
<div className="space-y-4">
105105
<div className="space-y-2">
106-
<label className="text-sm font-medium">Transport Type</label>
106+
<label
107+
className="text-sm font-medium"
108+
htmlFor="transport-type-select"
109+
>
110+
Transport Type
111+
</label>
107112
<Select
108113
value={transportType}
109114
onValueChange={(value: "stdio" | "sse") =>
110115
setTransportType(value)
111116
}
112117
>
113-
<SelectTrigger>
118+
<SelectTrigger id="transport-type-select">
114119
<SelectValue placeholder="Select transport type" />
115120
</SelectTrigger>
116121
<SelectContent>
@@ -123,17 +128,26 @@ const Sidebar = ({
123128
{transportType === "stdio" ? (
124129
<>
125130
<div className="space-y-2">
126-
<label className="text-sm font-medium">Command</label>
131+
<label className="text-sm font-medium" htmlFor="command-input">
132+
Command
133+
</label>
127134
<Input
135+
id="command-input"
128136
placeholder="Command"
129137
value={command}
130138
onChange={(e) => setCommand(e.target.value)}
131139
className="font-mono"
132140
/>
133141
</div>
134142
<div className="space-y-2">
135-
<label className="text-sm font-medium">Arguments</label>
143+
<label
144+
className="text-sm font-medium"
145+
htmlFor="arguments-input"
146+
>
147+
Arguments
148+
</label>
136149
<Input
150+
id="arguments-input"
137151
placeholder="Arguments (space-separated)"
138152
value={args}
139153
onChange={(e) => setArgs(e.target.value)}
@@ -144,8 +158,11 @@ const Sidebar = ({
144158
) : (
145159
<>
146160
<div className="space-y-2">
147-
<label className="text-sm font-medium">URL</label>
161+
<label className="text-sm font-medium" htmlFor="sse-url-input">
162+
URL
163+
</label>
148164
<Input
165+
id="sse-url-input"
149166
placeholder="URL"
150167
value={sseUrl}
151168
onChange={(e) => setSseUrl(e.target.value)}
@@ -157,6 +174,7 @@ const Sidebar = ({
157174
variant="outline"
158175
onClick={() => setShowBearerToken(!showBearerToken)}
159176
className="flex items-center w-full"
177+
aria-expanded={showBearerToken}
160178
>
161179
{showBearerToken ? (
162180
<ChevronDown className="w-4 h-4 mr-2" />
@@ -167,8 +185,14 @@ const Sidebar = ({
167185
</Button>
168186
{showBearerToken && (
169187
<div className="space-y-2">
170-
<label className="text-sm font-medium">Bearer Token</label>
188+
<label
189+
className="text-sm font-medium"
190+
htmlFor="bearer-token-input"
191+
>
192+
Bearer Token
193+
</label>
171194
<Input
195+
id="bearer-token-input"
172196
placeholder="Bearer Token"
173197
value={bearerToken}
174198
onChange={(e) => setBearerToken(e.target.value)}
@@ -187,6 +211,7 @@ const Sidebar = ({
187211
onClick={() => setShowEnvVars(!showEnvVars)}
188212
className="flex items-center w-full"
189213
data-testid="env-vars-button"
214+
aria-expanded={showEnvVars}
190215
>
191216
{showEnvVars ? (
192217
<ChevronDown className="w-4 h-4 mr-2" />
@@ -201,6 +226,7 @@ const Sidebar = ({
201226
<div key={idx} className="space-y-2 pb-4">
202227
<div className="flex gap-2">
203228
<Input
229+
aria-label={`Environment variable key ${idx + 1}`}
204230
placeholder="Key"
205231
value={key}
206232
onChange={(e) => {
@@ -243,6 +269,7 @@ const Sidebar = ({
243269
</div>
244270
<div className="flex gap-2">
245271
<Input
272+
aria-label={`Environment variable value ${idx + 1}`}
246273
type={shownEnvVars.has(key) ? "text" : "password"}
247274
placeholder="Value"
248275
value={value}
@@ -309,6 +336,7 @@ const Sidebar = ({
309336
onClick={() => setShowConfig(!showConfig)}
310337
className="flex items-center w-full"
311338
data-testid="config-button"
339+
aria-expanded={showConfig}
312340
>
313341
{showConfig ? (
314342
<ChevronDown className="w-4 h-4 mr-2" />
@@ -325,7 +353,10 @@ const Sidebar = ({
325353
return (
326354
<div key={key} className="space-y-2">
327355
<div className="flex items-center gap-1">
328-
<label className="text-sm font-medium text-green-600 break-all">
356+
<label
357+
className="text-sm font-medium text-green-600 break-all"
358+
htmlFor={`${configKey}-input`}
359+
>
329360
{configItem.label}
330361
</label>
331362
<Tooltip>
@@ -339,6 +370,7 @@ const Sidebar = ({
339370
</div>
340371
{typeof configItem.value === "number" ? (
341372
<Input
373+
id={`${configKey}-input`}
342374
type="number"
343375
data-testid={`${configKey}-input`}
344376
value={configItem.value}
@@ -365,7 +397,7 @@ const Sidebar = ({
365397
setConfig(newConfig);
366398
}}
367399
>
368-
<SelectTrigger>
400+
<SelectTrigger id={`${configKey}-input`}>
369401
<SelectValue />
370402
</SelectTrigger>
371403
<SelectContent>
@@ -375,6 +407,7 @@ const Sidebar = ({
375407
</Select>
376408
) : (
377409
<Input
410+
id={`${configKey}-input`}
378411
data-testid={`${configKey}-input`}
379412
value={configItem.value}
380413
onChange={(e) => {
@@ -454,14 +487,19 @@ const Sidebar = ({
454487

455488
{loggingSupported && connectionStatus === "connected" && (
456489
<div className="space-y-2">
457-
<label className="text-sm font-medium">Logging Level</label>
490+
<label
491+
className="text-sm font-medium"
492+
htmlFor="logging-level-select"
493+
>
494+
Logging Level
495+
</label>
458496
<Select
459497
value={logLevel}
460498
onValueChange={(value: LoggingLevel) =>
461499
sendLogLevelRequest(value)
462500
}
463501
>
464-
<SelectTrigger>
502+
<SelectTrigger id="logging-level-select">
465503
<SelectValue placeholder="Select logging level" />
466504
</SelectTrigger>
467505
<SelectContent>

‎client/src/components/ToolsTab.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,11 +69,18 @@ const ToolsTab = ({
6969
return (
7070
<>
7171
<h4 className="font-semibold mb-2">
72-
Tool Result: {isError ? "Error" : "Success"}
72+
Tool Result:{" "}
73+
{isError ? (
74+
<span className="text-red-600 font-semibold">Error</span>
75+
) : (
76+
<span className="text-green-600 font-semibold">Success</span>
77+
)}
7378
</h4>
7479
{structuredResult.content.map((item, index) => (
7580
<div key={index} className="mb-2">
76-
{item.type === "text" && <JsonView data={item.text} />}
81+
{item.type === "text" && (
82+
<JsonView data={item.text} isError={isError} />
83+
)}
7784
{item.type === "image" && (
7885
<img
7986
src={`data:${item.mimeType};base64,${item.data}`}

0 commit comments

Comments
 (0)