Skip to content

Commit 4b6a753

Browse files
idemergeidemerge
committed
Release v2.9.0
Visual redesign of WorkflowConfigPanel with mission-control aesthetic: - Section headers with colored left accent bars (Core Params / Tuning / Options) - Monospace uppercase param-chip-labels for all parameter controls - Refined QuickButtons with transparent inactive state and subtle active highlight - New task cloning inherits previous task config instead of defaults
1 parent f325243 commit 4b6a753

4 files changed

Lines changed: 106 additions & 35 deletions

File tree

‎backend/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "llm-benchmark-backend",
3-
"version": "2.8.0",
3+
"version": "2.9.0",
44
"description": "LLM API Radar - Backend",
55
"main": "dist/index.js",
66
"scripts": {

‎frontend/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "frontend",
33
"private": true,
4-
"version": "2.8.0",
4+
"version": "2.9.0",
55
"type": "module",
66
"scripts": {
77
"dev": "vite",

‎frontend/src/components/WorkflowConfigPanel.tsx‎

Lines changed: 44 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -391,26 +391,24 @@ export function WorkflowConfigPanel({
391391
color?: string;
392392
}) => (
393393
<div className="flex flex-wrap gap-1 mb-1.5">
394-
{options.map((opt) => (
395-
<button
396-
key={opt.value}
397-
onClick={() => onChange(opt.value)}
398-
className={`text-[10px] px-2 py-1 rounded border transition-all font-medium font-mono ${
399-
value === opt.value ? '' : 'border-border text-text-tertiary hover:border-border-hover'
400-
}`}
401-
style={{
402-
...(value === opt.value
403-
? {
404-
borderColor: `${color}66`,
405-
backgroundColor: `${color}14`,
406-
color,
407-
}
408-
: {}),
409-
}}
410-
>
411-
{opt.label}
412-
</button>
413-
))}
394+
{options.map((opt) => {
395+
const active = value === opt.value;
396+
return (
397+
<button
398+
key={opt.value}
399+
onClick={() => onChange(opt.value)}
400+
className="text-[10px] px-2 py-0.5 rounded font-mono transition-all"
401+
style={{
402+
fontWeight: active ? 600 : 400,
403+
border: active ? `1px solid ${color}50` : '1px solid transparent',
404+
backgroundColor: active ? `${color}18` : 'transparent',
405+
color: active ? color : 'rgba(255,255,255,0.35)',
406+
}}
407+
>
408+
{opt.label}
409+
</button>
410+
);
411+
})}
414412
</div>
415413
);
416414

@@ -484,10 +482,14 @@ export function WorkflowConfigPanel({
484482

485483
{/* Row 2: Preset Prompt Buttons */}
486484
<div className="space-y-2">
487-
<label className="text-[11px] text-text-secondary font-medium">Preset Prompts</label>
488-
<Tooltip title="Click a preset to fill the prompt field with a pre-configured test prompt">
489-
<InfoCircleOutlined className="text-[10px] text-text-tertiary cursor-help ml-1" />
490-
</Tooltip>
485+
<div className="flex items-center gap-1">
486+
<span className="text-[10px] font-mono font-semibold uppercase tracking-wider text-text-tertiary">
487+
Preset Prompts
488+
</span>
489+
<Tooltip title="Click a preset to fill the prompt field with a pre-configured test prompt">
490+
<InfoCircleOutlined className="text-[9px] text-text-tertiary cursor-help" />
491+
</Tooltip>
492+
</div>
491493
<div className="flex flex-wrap gap-1.5">
492494
{PRESET_PROMPTS.map((preset) => (
493495
<button
@@ -652,10 +654,13 @@ export function WorkflowConfigPanel({
652654
</div>
653655

654656
{/* Row 4: Core Parameters with QuickButtons */}
657+
<div className="section-header" data-color="teal">
658+
Core Parameters
659+
</div>
655660
<div className="grid grid-cols-3 gap-4">
656661
<div className="space-y-2">
657662
<div className="flex items-center gap-1">
658-
<label className="text-[11px] text-text-secondary font-medium">Max Tokens</label>
663+
<label className="param-chip-label">Max Tokens</label>
659664
<Tooltip title="Maximum number of tokens in the model's response (50–32000)">
660665
<InfoCircleOutlined className="text-[10px] text-text-tertiary cursor-help" />
661666
</Tooltip>
@@ -686,7 +691,7 @@ export function WorkflowConfigPanel({
686691
</div>
687692
<div className="space-y-2">
688693
<div className="flex items-center gap-1">
689-
<label className="text-[11px] text-text-secondary font-medium">Concurrency</label>
694+
<label className="param-chip-label">Concurrency</label>
690695
<Tooltip title="Number of parallel requests per iteration (1–200). Higher = more load.">
691696
<InfoCircleOutlined className="text-[10px] text-text-tertiary cursor-help" />
692697
</Tooltip>
@@ -710,7 +715,7 @@ export function WorkflowConfigPanel({
710715
</div>
711716
<div className="space-y-2">
712717
<div className="flex items-center gap-1">
713-
<label className="text-[11px] text-text-secondary font-medium">Iterations</label>
718+
<label className="param-chip-label">Iterations</label>
714719
<Tooltip title="Number of times to repeat the benchmark (1–2000). More iterations = more reliable averages.">
715720
<InfoCircleOutlined className="text-[10px] text-text-tertiary cursor-help" />
716721
</Tooltip>
@@ -735,10 +740,13 @@ export function WorkflowConfigPanel({
735740
</div>
736741

737742
{/* Advanced Parameters */}
743+
<div className="section-header" data-color="amber">
744+
Tuning
745+
</div>
738746
<div className="grid grid-cols-3 gap-4">
739747
<div className="space-y-2">
740748
<div className="flex items-center gap-1">
741-
<label className="text-[11px] text-text-secondary font-medium">Warmup Runs</label>
749+
<label className="param-chip-label">Warmup Runs</label>
742750
<Tooltip title="Number of warmup requests before measuring (0–5). Discarded from results.">
743751
<InfoCircleOutlined className="text-[10px] text-text-tertiary cursor-help" />
744752
</Tooltip>
@@ -762,7 +770,7 @@ export function WorkflowConfigPanel({
762770
</div>
763771
<div className="space-y-2">
764772
<div className="flex items-center gap-1">
765-
<label className="text-[11px] text-text-secondary font-medium">Request Interval (ms)</label>
773+
<label className="param-chip-label">Interval (ms)</label>
766774
<Tooltip title="Delay between consecutive requests in ms (0–10000). Helps avoid rate limiting.">
767775
<InfoCircleOutlined className="text-[10px] text-text-tertiary cursor-help" />
768776
</Tooltip>
@@ -786,7 +794,7 @@ export function WorkflowConfigPanel({
786794
</div>
787795
<div className="space-y-2">
788796
<div className="flex items-center gap-1">
789-
<label className="text-[11px] text-text-secondary font-medium">Max QPS</label>
797+
<label className="param-chip-label">Max QPS</label>
790798
<Tooltip title="Global token bucket: max requests per second across all concurrent slots. 0 = unlimited.">
791799
<InfoCircleOutlined className="text-[10px] text-text-tertiary cursor-help" />
792800
</Tooltip>
@@ -813,10 +821,13 @@ export function WorkflowConfigPanel({
813821
</div>
814822

815823
{/* Streaming + Cache Hit Rate + Custom Providers dropdown — one row */}
824+
<div className="section-header" data-color="violet">
825+
Options
826+
</div>
816827
<div className="flex items-center gap-6 flex-wrap">
817828
<div className="flex items-center gap-2">
818829
<div className="flex items-center gap-1">
819-
<span className="text-[11px] text-text-secondary font-medium">Streaming</span>
830+
<span className="param-chip-label">Streaming</span>
820831
<Tooltip title="Use streaming API for real-time token delivery. Recommended for accuracy.">
821832
<InfoCircleOutlined className="text-[10px] text-text-tertiary cursor-help" />
822833
</Tooltip>
@@ -834,7 +845,7 @@ export function WorkflowConfigPanel({
834845
size="small"
835846
/>
836847
<div className="flex items-center gap-1">
837-
<span className="text-[11px] text-text-secondary font-medium">Cache Hit Rate</span>
848+
<span className="param-chip-label">Cache Hit Rate</span>
838849
<Tooltip title="Prepends a unique UUID to each request to control prefix-cache hit rate. K = iterations × (1 − rate) unique variants are generated and cycled round-robin.">
839850
<InfoCircleOutlined className="text-[10px] text-text-tertiary cursor-help" />
840851
</Tooltip>
@@ -935,7 +946,7 @@ export function WorkflowConfigPanel({
935946
{(task.config.requestInterval ?? 0) > 0 && (
936947
<div className="flex items-center gap-2">
937948
<div className="flex items-center gap-1">
938-
<span className="text-[11px] text-text-secondary font-medium">Randomize Interval</span>
949+
<span className="param-chip-label">Randomize Interval</span>
939950
<Tooltip title="Add random jitter to the request interval (±50%) to simulate realistic traffic">
940951
<InfoCircleOutlined className="text-[10px] text-text-tertiary cursor-help" />
941952
</Tooltip>

‎frontend/src/index.css‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,66 @@ h6 {
133133
border-color: var(--color-border-hover);
134134
}
135135

136+
/* ==========================================
137+
Section Headers — instrument panel style
138+
========================================== */
139+
140+
.section-header {
141+
display: flex;
142+
align-items: center;
143+
gap: 8px;
144+
font-family: 'JetBrains Mono', monospace;
145+
font-size: 10px;
146+
font-weight: 600;
147+
text-transform: uppercase;
148+
letter-spacing: 0.08em;
149+
color: var(--color-text-tertiary);
150+
padding-bottom: 6px;
151+
border-bottom: 1px solid var(--color-border);
152+
margin-bottom: 12px;
153+
}
154+
155+
.section-header::before {
156+
content: '';
157+
display: inline-block;
158+
width: 3px;
159+
height: 12px;
160+
border-radius: 1px;
161+
background: var(--color-accent-blue);
162+
}
163+
164+
.section-header[data-color="teal"]::before {
165+
background: var(--color-accent-teal);
166+
}
167+
.section-header[data-color="amber"]::before {
168+
background: var(--color-accent-amber);
169+
}
170+
.section-header[data-color="violet"]::before {
171+
background: var(--color-accent-violet);
172+
}
173+
.section-header[data-color="rose"]::before {
174+
background: var(--color-accent-rose);
175+
}
176+
177+
/* ==========================================
178+
Parameter Chip — compact param display
179+
========================================== */
180+
181+
.param-chip {
182+
display: flex;
183+
flex-direction: column;
184+
gap: 4px;
185+
}
186+
187+
.param-chip-label {
188+
font-family: 'JetBrains Mono', monospace;
189+
font-size: 10px;
190+
font-weight: 500;
191+
color: var(--color-text-tertiary);
192+
text-transform: uppercase;
193+
letter-spacing: 0.05em;
194+
}
195+
136196
/* ==========================================
137197
Typography & Data
138198
========================================== */

0 commit comments

Comments
 (0)