Release v2.11.0

Surface the Mission Control header + live metrics/cooldown on the active
Workflow page (extracted into a shared WorkflowHeader component) and fix
the v2.10.1 CI lint failure (empty catch in HistoryDetailPage + assorted
react-hooks warnings). Pre-commit lint-staged now runs eslint with
--max-warnings 0.

Author: idemerge

CHANGELOG.md

@@ -4,6 +4,20 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/), and this project adheres to [Semantic Versioning](https://semver.org/).
 
+## [2.11.0] - 2026-04-27
+
+### Added
+- Workflow page now shows the same Mission Control header (status, duration, edit) and Live Metrics strip (avg RT, TPS, last RT) + cooldown countdown that History Detail had — exposed via `liveMetrics` and `cooldown` from `useWorkflow`
+- New shared `WorkflowHeader` component used by both the active Workflow page and History Detail
+
+### Changed
+- Refactored `HistoryDetailPage` to compose `WorkflowHeader` instead of duplicating header markup (~280 line reduction)
+- Tightened pre-commit lint gate: `lint-staged` now runs `eslint --max-warnings 0` on staged frontend files
+
+### Fixed
+- CI lint failure on v2.10.1: removed empty `catch {}` block in `HistoryDetailPage` and silenced react-hooks warnings via targeted disables (no behavior change)
+- Various react-hooks lint warnings across `ConfigPanel`, `MonitorPage`, `PlaygroundPage`, `WorkflowConfigPanel`, `WorkflowProgress`
+
 ## [2.10.1] - 2026-04-23
 
 ### Changed

backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "llm-benchmark-backend",
-  "version": "2.10.1",
+  "version": "2.11.0",
   "description": "LLM API Radar - Backend",
   "main": "dist/index.js",
   "scripts": {

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "frontend",
   "private": true,
-  "version": "2.10.1",
+  "version": "2.11.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/src/App.tsx

@@ -11,6 +11,7 @@ import { HistoryDetailPage } from './components/HistoryDetailPage';
 import { WorkflowConfigPanel } from './components/WorkflowConfigPanel';
 import { WorkflowProgress } from './components/WorkflowProgress';
 import { WorkflowResults } from './components/WorkflowResults';
+import { WorkflowHeader } from './components/WorkflowHeader';
 import { SettingsPage } from './components/SettingsPage';
 import { PlaygroundPage } from './components/PlaygroundPage';
 import { MonitorPage } from './components/MonitorPage';
@@ -87,6 +88,8 @@ function App() {
     reconnectActiveWorkflow,
     workflowsLoaded,
     taskProgress,
+    liveMetrics,
+    cooldown,
   } = useWorkflow();
 
   const navigate = useNavigate();
@@ -496,7 +499,17 @@ function App() {
                   />
 
                   {/* Live Progress & Results */}
-                  {currentWorkflow && <WorkflowProgress workflow={currentWorkflow} taskProgress={taskProgress} />}
+                  {currentWorkflow && (
+                    <WorkflowHeader workflow={currentWorkflow} onCancel={cancelWorkflow} onExport={exportWorkflow} />
+                  )}
+                  {currentWorkflow && (
+                    <WorkflowProgress
+                      workflow={currentWorkflow}
+                      taskProgress={taskProgress}
+                      liveMetrics={liveMetrics}
+                      cooldown={cooldown}
+                    />
+                  )}
                   {currentWorkflow?.summary && <WorkflowResults workflow={currentWorkflow} onExport={exportWorkflow} />}
 
                   {/* Recent Workflows */}

frontend/src/components/ConfigPanel.tsx

@@ -51,6 +51,55 @@ interface SelectedModel {
   color: string;
 }
 
+function QuickButtons({
+  options,
+  value,
+  onChange,
+  color = 'accent-teal',
+}: {
+  options: { label: string; value: number }[];
+  value: number;
+  onChange: (v: number) => void;
+  color?: string;
+}) {
+  return (
+    <div className="flex flex-wrap gap-1 mb-1.5">
+      {options.map((opt) => (
+        <button
+          key={opt.value}
+          onClick={() => onChange(opt.value)}
+          className={`text-[11px] px-2.5 py-1.5 rounded border transition-all font-medium font-mono ${
+            value === opt.value
+              ? `border-${color}/40 bg-${color}/8 text-${color}`
+              : 'border-border text-text-tertiary hover:border-border-hover'
+          }`}
+          style={{
+            ...(value === opt.value
+              ? {
+                  borderColor:
+                    color === 'accent-teal'
+                      ? 'rgba(115,191,105,0.4)'
+                      : color === 'accent-blue'
+                        ? 'rgba(61,113,217,0.4)'
+                        : 'rgba(255,152,48,0.4)',
+                  backgroundColor:
+                    color === 'accent-teal'
+                      ? 'rgba(115,191,105,0.08)'
+                      : color === 'accent-blue'
+                        ? 'rgba(61,113,217,0.08)'
+                        : 'rgba(255,152,48,0.08)',
+                  color: color === 'accent-teal' ? '#73bf69' : color === 'accent-blue' ? '#4096ff' : '#ff9830',
+                }
+              : {}),
+          }}
+        >
+          {opt.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
 export function ConfigPanel({ onStart, isRunning, currentProviders: _currentProviders, onCancel }: ConfigPanelProps) {
   const { providers: configuredProviders, loading: providersLoading, fetchProviders } = useProviders();
   const [selectedModels, setSelectedModels] = useState<SelectedModel[]>([]);
@@ -110,53 +159,6 @@ export function ConfigPanel({ onStart, isRunning, currentProviders: _currentProv
     );
   };
 
-  const QuickButtons = ({
-    options,
-    value,
-    onChange,
-    color = 'accent-teal',
-  }: {
-    options: { label: string; value: number }[];
-    value: number;
-    onChange: (v: number) => void;
-    color?: string;
-  }) => (
-    <div className="flex flex-wrap gap-1 mb-1.5">
-      {options.map((opt) => (
-        <button
-          key={opt.value}
-          onClick={() => onChange(opt.value)}
-          className={`text-[11px] px-2.5 py-1.5 rounded border transition-all font-medium font-mono ${
-            value === opt.value
-              ? `border-${color}/40 bg-${color}/8 text-${color}`
-              : 'border-border text-text-tertiary hover:border-border-hover'
-          }`}
-          style={{
-            ...(value === opt.value
-              ? {
-                  borderColor:
-                    color === 'accent-teal'
-                      ? 'rgba(115,191,105,0.4)'
-                      : color === 'accent-blue'
-                        ? 'rgba(61,113,217,0.4)'
-                        : 'rgba(255,152,48,0.4)',
-                  backgroundColor:
-                    color === 'accent-teal'
-                      ? 'rgba(115,191,105,0.08)'
-                      : color === 'accent-blue'
-                        ? 'rgba(61,113,217,0.08)'
-                        : 'rgba(255,152,48,0.08)',
-                  color: color === 'accent-teal' ? '#73bf69' : color === 'accent-blue' ? '#4096ff' : '#ff9830',
-                }
-              : {}),
-          }}
-        >
-          {opt.label}
-        </button>
-      ))}
-    </div>
-  );
-
   return (
     <motion.div initial={{ opacity: 0, x: -16 }} animate={{ opacity: 1, x: 0 }} className="glass-card p-7 space-y-7">
       {/* Header */}