agent-nuvira 2.7.0 → 2.7.2

package/dist/web-dashboard/src/components/BedrockOnboarding.js

@@ -0,0 +1,320 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = BedrockOnboarding;
+const react_1 = require("react");
+const api_1 = require("../api");
+// ─── Constants ──────────────────────────────────────────────────────────────
+const BEDROCK_REGIONS = [
+    { value: 'us-east-1', label: 'us-east-1 (N. Virginia) — most models' },
+    { value: 'us-west-2', label: 'us-west-2 (Oregon) — most models' },
+    { value: 'eu-west-1', label: 'eu-west-1 (Ireland) — EU coverage' },
+    { value: 'ap-southeast-1', label: 'ap-southeast-1 (Singapore)' },
+    { value: 'ap-northeast-1', label: 'ap-northeast-1 (Tokyo)' },
+];
+const MODEL_FAMILIES = [
+    { name: 'Anthropic Claude', models: ['claude-haiku-4.5', 'claude-sonnet-4.6', 'claude-fable-5', 'claude-opus-4.6'], checked: true },
+    { name: 'Meta Llama', models: ['llama3-1-8b', 'llama3-1-70b', 'llama3-3-70b', 'llama4-scout', 'llama4-maverick'], checked: true },
+    { name: 'Mistral AI', models: ['mistral-large-3', 'devstral-2', 'ministral-3'], checked: false },
+    { name: 'DeepSeek', models: ['deepseek-v3.2', 'deepseek-r1'], checked: false },
+    { name: 'Amazon Nova', models: ['nova-pro', 'nova-lite'], checked: false },
+    { name: 'OpenAI on Bedrock', models: ['gpt-5.6-terra', 'gpt-oss-120b'], checked: false },
+    { name: 'Qwen', models: ['qwen3-coder-next', 'qwen3-32b'], checked: false },
+    { name: 'Google Gemma', models: ['gemma-3-12b'], checked: false },
+    { name: 'xAI', models: ['grok-4.6'], checked: false },
+];
+// ─── Main Component ─────────────────────────────────────────────────────────
+function BedrockOnboarding({ canWrite, sessionExpired }) {
+    const [status, setStatus] = (0, react_1.useState)(null);
+    const [probeResults, setProbeResults] = (0, react_1.useState)(null);
+    const [probing, setProbing] = (0, react_1.useState)(false);
+    const [step, setStep] = (0, react_1.useState)('overview');
+    const mounted = (0, react_1.useRef)(true);
+    // Setup wizard state
+    const [authMethod, setAuthMethod] = (0, react_1.useState)('bearer');
+    const [apiKey, setApiKey] = (0, react_1.useState)('');
+    const [accessKeyId, setAccessKeyId] = (0, react_1.useState)('');
+    const [secretAccessKey, setSecretAccessKey] = (0, react_1.useState)('');
+    const [region, setRegion] = (0, react_1.useState)('us-east-1');
+    const [selectedFamilies, setSelectedFamilies] = (0, react_1.useState)(MODEL_FAMILIES.filter(f => f.checked).map(f => f.name));
+    const [saving, setSaving] = (0, react_1.useState)(false);
+    const [saveResult, setSaveResult] = (0, react_1.useState)(null);
+    const refresh = (0, react_1.useCallback)(async () => {
+        const s = await api_1.dashboardAPI.getBedrockStatus();
+        if (mounted.current)
+            setStatus(s);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        void refresh();
+        return () => { mounted.current = false; };
+    }, [refresh]);
+    const runProbe = async () => {
+        setProbing(true);
+        setProbeResults(null);
+        try {
+            const result = await api_1.dashboardAPI.probeBedrock(status?.region || 'us-east-1');
+            if (!mounted.current)
+                return;
+            if (result.ok && result.models) {
+                setProbeResults(result.models);
+                setStep('test');
+            }
+        }
+        catch {
+            // ignore
+        }
+        finally {
+            if (mounted.current)
+                setProbing(false);
+        }
+    };
+    const saveSetup = async () => {
+        setSaving(true);
+        setSaveResult(null);
+        try {
+            const envVars = { BEDROCK_REGION: region };
+            if (authMethod === 'bearer' && apiKey) {
+                envVars.AWS_BEARER_TOKEN = apiKey;
+            }
+            else if (authMethod === 'iam') {
+                if (accessKeyId)
+                    envVars.AWS_ACCESS_KEY_ID = accessKeyId;
+                if (secretAccessKey)
+                    envVars.AWS_SECRET_ACCESS_KEY = secretAccessKey;
+            }
+            const result = await api_1.dashboardAPI.setupBedrock(envVars);
+            if (!mounted.current)
+                return;
+            if (result.ok) {
+                setSaveResult({ kind: 'ok', text: '✅ Configuration saved! Running connectivity test…' });
+                setStep('overview');
+                await refresh();
+                // Auto-probe after save
+                setTimeout(() => void runProbe(), 500);
+            }
+            else {
+                setSaveResult({ kind: 'err', text: result.error || 'Save failed' });
+            }
+        }
+        catch {
+            if (mounted.current)
+                setSaveResult({ kind: 'err', text: 'Could not reach the dashboard server.' });
+        }
+        finally {
+            if (mounted.current)
+                setSaving(false);
+        }
+    };
+    if (status === null) {
+        return <div className="empty-state">Loading Bedrock status…</div>;
+    }
+    // ── Render ──────────────────────────────────────────────────────────────
+    return (<div className="bedrock-onboarding">
+      <h2 className="section-title">🟠 AWS Bedrock</h2>
+      <p className="admin-subtitle">
+        Bedrock gives you access to Claude, Llama, Mistral, DeepSeek, and more — all through a single AWS account.
+        Unlike other providers, Bedrock requires a <strong>region</strong>, <strong>AWS credentials</strong>, and explicit <strong>model access approval</strong>.
+      </p>
+
+      {saveResult ? (<div className={`admin-row-msg${saveResult.kind === 'ok' ? '' : ' admin-row-msg-err'}`}>{saveResult.text}</div>) : null}
+
+      {/* ── Status Bar ─────────────────────────────────────────────────── */}
+      <div className="bedrock-status-bar">
+        <div className="bedrock-status-item">
+          <span className={`status-dot ${status.configured ? 'connected' : 'reconnecting'}`}/>
+          <span>{status.configured ? 'Configured' : 'Not configured'}</span>
+        </div>
+        <div className="bedrock-status-item">
+          <span className="bedrock-status-label">Region:</span>
+          <code>{status.region}</code>
+        </div>
+        <div className="bedrock-status-item">
+          <span className="bedrock-status-label">Auth:</span>
+          <code>{status.authMethod === 'bearer' ? 'API Key' : status.authMethod === 'iam' ? 'IAM' : 'None'}</code>
+        </div>
+        <div className="bedrock-status-actions">
+          {canWrite ? (<button type="button" className="admin-refresh-btn" onClick={() => setStep(step === 'setup' ? 'overview' : 'setup')}>
+              {step === 'setup' ? '✕ Cancel' : '⚙ Setup Wizard'}
+            </button>) : null}
+          {status.configured ? (<button type="button" className="admin-refresh-btn" onClick={() => void runProbe()} disabled={probing}>
+              {probing ? '⏳ Probing…' : '🔍 Test Models'}
+            </button>) : null}
+        </div>
+      </div>
+
+      {/* ── Setup Wizard ──────────────────────────────────────────────── */}
+      {step === 'setup' && (<div className="bedrock-setup-wizard">
+          <h3 className="section-subtitle">🚀 Bedrock Setup Wizard</h3>
+
+          {/* Step 1: Auth Method */}
+          <div className="bedrock-wizard-step">
+            <h4>Step 1: Authentication</h4>
+            <div className="bedrock-auth-options">
+              <label className={`bedrock-auth-option ${authMethod === 'bearer' ? 'selected' : ''}`}>
+                <input type="radio" name="authMethod" checked={authMethod === 'bearer'} onChange={() => setAuthMethod('bearer')}/>
+                <div>
+                  <strong>Bedrock API Key</strong>
+                  <span>Simpler — get from Bedrock → Settings → API keys</span>
+                </div>
+              </label>
+              <label className={`bedrock-auth-option ${authMethod === 'iam' ? 'selected' : ''}`}>
+                <input type="radio" name="authMethod" checked={authMethod === 'iam'} onChange={() => setAuthMethod('iam')}/>
+                <div>
+                  <strong>IAM Credentials</strong>
+                  <span>Full AWS SDK auth — AWS_ACCESS_KEY_ID + AWS_SECRET_ACCESS_KEY</span>
+                </div>
+              </label>
+            </div>
+
+            {authMethod === 'bearer' ? (<div className="bedrock-wizard-fields">
+                <div className="bedrock-setup-hint">
+                  <strong>How to get a Bedrock API key:</strong>
+                  <ol>
+                    <li>Open <a href="https://console.aws.amazon.com/bedrock/" target="_blank" rel="noopener noreferrer">AWS Bedrock Console</a></li>
+                    <li>Go to <strong>Settings</strong> → <strong>API keys</strong></li>
+                    <li>Create a new key and paste it below</li>
+                  </ol>
+                </div>
+                <label className="hub-send-target">
+                  <span className="admin-hint">Bedrock API Key (Bearer token)</span>
+                  <input type="password" value={apiKey} onChange={(e) => setApiKey(e.target.value)} placeholder="••••••••••••" autoComplete="off" spellCheck={false}/>
+                </label>
+              </div>) : (<div className="bedrock-wizard-fields">
+                <div className="bedrock-setup-hint">
+                  <strong>IAM credentials</strong> give full AWS SDK access. Create an IAM user with Bedrock permissions.
+                </div>
+                <label className="hub-send-target">
+                  <span className="admin-hint">AWS_ACCESS_KEY_ID</span>
+                  <input type="text" value={accessKeyId} onChange={(e) => setAccessKeyId(e.target.value)} placeholder="AKIA..." autoComplete="off" spellCheck={false}/>
+                </label>
+                <label className="hub-send-target">
+                  <span className="admin-hint">AWS_SECRET_ACCESS_KEY</span>
+                  <input type="password" value={secretAccessKey} onChange={(e) => setSecretAccessKey(e.target.value)} placeholder="••••••••••••" autoComplete="off" spellCheck={false}/>
+                </label>
+              </div>)}
+          </div>
+
+          {/* Step 2: Region */}
+          <div className="bedrock-wizard-step">
+            <h4>Step 2: AWS Region</h4>
+            <p className="admin-hint">
+              Models vary by region. <strong>us-east-1</strong> and <strong>us-west-2</strong> have the most models.
+              ⚠️ Do NOT use eu-north-1 unless models are explicitly enabled there.
+            </p>
+            <select className="bedrock-region-select" value={region} onChange={(e) => setRegion(e.target.value)}>
+              {BEDROCK_REGIONS.map((r) => (<option key={r.value} value={r.value}>{r.label}</option>))}
+            </select>
+          </div>
+
+          {/* Step 3: Model Access */}
+          <div className="bedrock-wizard-step">
+            <h4>Step 3: Model Access</h4>
+            <p className="admin-hint">
+              Bedrock requires you to request access for each model family.
+            </p>
+            <div className="bedrock-model-access-hint">
+              <a href={`https://console.aws.amazon.com/bedrock/home?region=${region}#/modelaccess`} target="_blank" rel="noopener noreferrer" className="admin-mini-btn">
+                📖 Open Model Access in AWS Console
+              </a>
+            </div>
+            <div className="bedrock-family-grid">
+              {MODEL_FAMILIES.map((family) => (<label key={family.name} className={`bedrock-family-card ${selectedFamilies.includes(family.name) ? 'selected' : ''}`}>
+                  <input type="checkbox" checked={selectedFamilies.includes(family.name)} onChange={(e) => {
+                    if (e.target.checked) {
+                        setSelectedFamilies((prev) => [...prev, family.name]);
+                    }
+                    else {
+                        setSelectedFamilies((prev) => prev.filter((f) => f !== family.name));
+                    }
+                }}/>
+                  <div>
+                    <strong>{family.name}</strong>
+                    <span>{family.models.length} model(s)</span>
+                  </div>
+                </label>))}
+            </div>
+            <p className="admin-hint" style={{ marginTop: 8 }}>
+              In the AWS Console, select the families above and submit. Approval is usually instant for Anthropic and Meta models.
+            </p>
+          </div>
+
+          {/* Save Button */}
+          <div className="bedrock-wizard-actions">
+            <button type="button" className="admin-refresh-btn" onClick={() => void saveSetup()} disabled={saving || (authMethod === 'bearer' && !apiKey) || (authMethod === 'iam' && (!accessKeyId || !secretAccessKey))}>
+              {saving ? '⏳ Saving…' : '💾 Save & Test'}
+            </button>
+            <button type="button" className="admin-mini-btn" onClick={() => setStep('overview')}>
+              Cancel
+            </button>
+          </div>
+        </div>)}
+
+      {/* ── Probe Results ──────────────────────────────────────────────── */}
+      {step === 'test' && probeResults && (<div className="bedrock-probe-results">
+          <h3 className="section-subtitle">🔍 Model Probe Results ({status.region})</h3>
+          <div className="bedrock-probe-grid">
+            {probeResults.map((r) => (<div key={r.modelId} className={`bedrock-probe-card bedrock-probe-${r.status}`}>
+                <span className={`bedrock-probe-icon`}>
+                  {r.status === 'accessible' ? '✅' : r.status === 'permission-denied' ? '🔒' : r.status === 'not-found' ? '⚫' : '❌'}
+                </span>
+                <span className="bedrock-probe-id">{r.modelId}</span>
+                <span className="bedrock-probe-status">
+                  {r.status === 'accessible' ? 'Ready' :
+                    r.status === 'permission-denied' ? `Need access (HTTP ${r.httpStatus})` :
+                        r.status === 'not-found' ? 'Not in this region' : 'Error'}
+                </span>
+              </div>))}
+          </div>
+          {probeResults.some((r) => r.status === 'permission-denied') && (<div className="bedrock-probe-action">
+              <p>Some models exist in {status.region} but access is not approved.</p>
+              <a href={`https://console.aws.amazon.com/bedrock/home?region=${status.region}#/modelaccess`} target="_blank" rel="noopener noreferrer" className="admin-mini-btn">
+                🔓 Request Model Access in AWS Console →
+              </a>
+            </div>)}
+          <button type="button" className="admin-mini-btn" onClick={() => setStep('overview')} style={{ marginTop: 12 }}>
+            ← Back
+          </button>
+        </div>)}
+
+      {/* ── Getting Started Guide (when not configured) ──────────────── */}
+      {!status.configured && step === 'overview' && (<div className="bedrock-getting-started">
+          <h3 className="section-subtitle">📋 Getting Started with Bedrock</h3>
+          <div className="bedrock-steps">
+            <div className="bedrock-step">
+              <span className="bedrock-step-num">1</span>
+              <div>
+                <strong>Create an AWS account</strong> (or use existing)
+                <span>New to AWS? Sign up at <a href="https://aws.amazon.com/" target="_blank" rel="noopener noreferrer">aws.amazon.com</a></span>
+              </div>
+            </div>
+            <div className="bedrock-step">
+              <span className="bedrock-step-num">2</span>
+              <div>
+                <strong>Get Bedrock API key</strong>
+                <span>Bedrock → Settings → API keys → Create key</span>
+              </div>
+            </div>
+            <div className="bedrock-step">
+              <span className="bedrock-step-num">3</span>
+              <div>
+                <strong>Request model access</strong>
+                <span>Bedrock → Model access → Select Claude, Llama, etc. → Submit</span>
+              </div>
+            </div>
+            <div className="bedrock-step">
+              <span className="bedrock-step-num">4</span>
+              <div>
+                <strong>Configure in this wizard</strong>
+                <span>Click "Setup Wizard" above to enter your credentials</span>
+              </div>
+            </div>
+          </div>
+        </div>)}
+
+      {/* ── Quick Status (when configured) ──────────────────────────── */}
+      {status.configured && step === 'overview' && !probeResults && (<div className="bedrock-quick-status">
+          <p className="admin-hint">
+            Bedrock is configured. Click <strong>🔍 Test Models</strong> to verify connectivity and discover which models are accessible in {status.region}.
+          </p>
+        </div>)}
+    </div>);
+}

package/dist/web-dashboard/src/components/BenchmarkCharts.js

@@ -0,0 +1,228 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = BenchmarkCharts;
+const recharts_1 = require("recharts");
+function formatCost(usd) {
+    if (usd === undefined || usd === null)
+        return '$0.00';
+    return '$' + usd.toFixed(6);
+}
+function formatPercent(value) {
+    if (value === undefined || value === null)
+        return '0%';
+    return (value * 100).toFixed(1) + '%';
+}
+function BenchmarkCharts({ data }) {
+    if (!data) {
+        return <div className="loading-state"><p>Loading benchmark data...</p></div>;
+    }
+    const { benchmarks, evals } = data;
+    const latest = benchmarks.latest;
+    const runs = benchmarks.runs || [];
+    // ── Evaluation framework data (end-to-end agent tasks) ────────────────
+    const evalRuns = evals?.runs || [];
+    const latestEval = evals?.latest || null;
+    const evalChartData = evalRuns.map((run) => ({
+        name: run.model.length > 12 ? run.model.slice(0, 10) + '..' : run.model,
+        score: Math.round(run.summary.avgCompositeScore * 100),
+        completion: Math.round(run.summary.completionRate * 100),
+        tests: Math.round(run.summary.testPassRate * 100),
+        recovery: Math.round(run.summary.recoveryRate * 100),
+        efficiency: Math.round(run.summary.avgTokenEfficiency * 100),
+        fullModel: run.model,
+        provider: run.provider,
+    })).reverse();
+    // Build chart data from historical runs
+    const passRateData = runs.map((run) => ({
+        name: run.model.length > 12 ? run.model.slice(0, 10) + '..' : run.model,
+        passRate: run.summary.totalTasks > 0 ? Math.round((run.summary.tasksPassed / run.summary.totalTasks) * 100) : 0,
+        quality: Math.round(run.summary.avgQualityScore * 100),
+        latency: run.summary.medianLatencyMs,
+        cost: run.summary.totalCostUsd,
+        fullModel: run.model,
+        provider: run.provider,
+    })).reverse();
+    return (<>
+      <h2 className="section-title">📈 Benchmark Results</h2>
+
+      {/* Latest Run */}
+      <div className="benchmark-latest">
+        {latest ? (<>
+            <div className="benchmark-header">
+              <strong>Latest Run:</strong> {latest.provider}/{latest.model}
+            </div>
+            <div className="benchmark-stats">
+              <div className="benchmark-stat pass">
+                <div className="benchmark-stat-value">{latest.summary.tasksPassed}/{latest.summary.totalTasks}</div>
+                <div className="benchmark-stat-label">Passed</div>
+              </div>
+              <div className="benchmark-stat quality">
+                <div className="benchmark-stat-value">{formatPercent(latest.summary.avgQualityScore)}</div>
+                <div className="benchmark-stat-label">Quality</div>
+              </div>
+              <div className="benchmark-stat latency">
+                <div className="benchmark-stat-value">{latest.summary.medianLatencyMs}ms</div>
+                <div className="benchmark-stat-label">Latency</div>
+              </div>
+              <div className="benchmark-stat fail">
+                <div className="benchmark-stat-value">{formatCost(latest.summary.totalCostUsd)}</div>
+                <div className="benchmark-stat-label">Cost</div>
+              </div>
+            </div>
+          </>) : (<div className="empty-state">No benchmark runs yet. Run <code>buff benchmark</code> to start.</div>)}
+      </div>
+
+      {/* Pass Rate Chart */}
+      {passRateData.length > 1 && (<>
+          <h3 className="section-subtitle">Pass Rate by Model</h3>
+          <div className="chart-container">
+            <recharts_1.ResponsiveContainer width="100%" height={260}>
+              <recharts_1.BarChart data={passRateData} margin={{ top: 20, right: 20, left: 10, bottom: 40 }}>
+                <recharts_1.CartesianGrid strokeDasharray="3 3" stroke="#21262d"/>
+                <recharts_1.XAxis dataKey="name" tick={{ fill: '#8b949e', fontSize: 11 }} axisLine={{ stroke: '#30363d' }}/>
+                <recharts_1.YAxis domain={[0, 100]} tick={{ fill: '#8b949e', fontSize: 11 }} axisLine={{ stroke: '#30363d' }} tickFormatter={(v) => v + '%'}/>
+                <recharts_1.Tooltip contentStyle={{ background: '#161b22', border: '1px solid #30363d', borderRadius: 8 }} labelStyle={{ color: '#e6edf3' }} formatter={(value) => [value + '%', 'Pass Rate']}/>
+                <recharts_1.Bar dataKey="passRate" radius={[4, 4, 0, 0]}>
+                  {passRateData.map((entry, i) => (<recharts_1.Cell key={i} fill={entry.passRate >= 80 ? '#3fb950' : entry.passRate >= 50 ? '#d29922' : '#f85149'} fillOpacity={0.8}/>))}
+                </recharts_1.Bar>
+              </recharts_1.BarChart>
+            </recharts_1.ResponsiveContainer>
+          </div>
+
+          {/* Latency Chart */}
+          <h3 className="section-subtitle">Latency by Model</h3>
+          <div className="chart-container">
+            <recharts_1.ResponsiveContainer width="100%" height={260}>
+              <recharts_1.BarChart data={passRateData} margin={{ top: 20, right: 20, left: 10, bottom: 40 }}>
+                <recharts_1.CartesianGrid strokeDasharray="3 3" stroke="#21262d"/>
+                <recharts_1.XAxis dataKey="name" tick={{ fill: '#8b949e', fontSize: 11 }} axisLine={{ stroke: '#30363d' }}/>
+                <recharts_1.YAxis tick={{ fill: '#8b949e', fontSize: 11 }} axisLine={{ stroke: '#30363d' }} tickFormatter={(v) => v + 'ms'}/>
+                <recharts_1.Tooltip contentStyle={{ background: '#161b22', border: '1px solid #30363d', borderRadius: 8 }} labelStyle={{ color: '#e6edf3' }} formatter={(value) => [value + 'ms', 'Latency']}/>
+                <recharts_1.Bar dataKey="latency" fill="#d29922" radius={[4, 4, 0, 0]} fillOpacity={0.8}/>
+              </recharts_1.BarChart>
+            </recharts_1.ResponsiveContainer>
+          </div>
+
+          {/* Cost Chart */}
+          <h3 className="section-subtitle">Cost by Model</h3>
+          <div className="chart-container">
+            <recharts_1.ResponsiveContainer width="100%" height={260}>
+              <recharts_1.BarChart data={passRateData} margin={{ top: 20, right: 20, left: 10, bottom: 40 }}>
+                <recharts_1.CartesianGrid strokeDasharray="3 3" stroke="#21262d"/>
+                <recharts_1.XAxis dataKey="name" tick={{ fill: '#8b949e', fontSize: 11 }} axisLine={{ stroke: '#30363d' }}/>
+                <recharts_1.YAxis tick={{ fill: '#8b949e', fontSize: 11 }} axisLine={{ stroke: '#30363d' }} tickFormatter={(v) => '$' + v.toFixed(6)}/>
+                <recharts_1.Tooltip contentStyle={{ background: '#161b22', border: '1px solid #30363d', borderRadius: 8 }} labelStyle={{ color: '#e6edf3' }} formatter={(value) => ['$' + value.toFixed(6), 'Cost']}/>
+                <recharts_1.Bar dataKey="cost" fill="#bc8cff" radius={[4, 4, 0, 0]} fillOpacity={0.8}/>
+              </recharts_1.BarChart>
+            </recharts_1.ResponsiveContainer>
+          </div>
+        </>)}
+
+      {/* ═══ Evaluation Framework Section ═══ */}
+      <h2 className="section-title" style={{ marginTop: 32 }}>🎯 Agent Evaluation</h2>
+      <p className="section-hint" style={{ color: '#8b949e', fontSize: 12, marginBottom: 16 }}>
+        End-to-end coding tasks run through the full agent pipeline — measures if the agent is actually improving.
+      </p>
+
+      {/* Latest Eval Run */}
+      <div className="benchmark-latest">
+        {latestEval ? (<>
+            <div className="benchmark-header">
+              <strong>Latest Eval Run:</strong> {latestEval.provider}/{latestEval.model}
+            </div>
+            <div className="benchmark-stats">
+              <div className="benchmark-stat pass">
+                <div className="benchmark-stat-value">{latestEval.summary.tasksPassed}/{latestEval.summary.totalTasks}</div>
+                <div className="benchmark-stat-label">Tests Passed</div>
+              </div>
+              <div className="benchmark-stat quality">
+                <div className="benchmark-stat-value">{formatPercent(latestEval.summary.avgCompositeScore)}</div>
+                <div className="benchmark-stat-label">Composite Score</div>
+              </div>
+              <div className="benchmark-stat latency">
+                <div className="benchmark-stat-value">{formatPercent(latestEval.summary.recoveryRate)}</div>
+                <div className="benchmark-stat-label">Recovery Rate</div>
+              </div>
+              <div className="benchmark-stat fail">
+                <div className="benchmark-stat-value">{latestEval.summary.totalRollbacks}</div>
+                <div className="benchmark-stat-label">Rollbacks</div>
+              </div>
+              <div className="benchmark-stat deps">
+                <div className="benchmark-stat-value">{formatPercent(latestEval.summary.dependencyInstallRate)}</div>
+                <div className="benchmark-stat-label">Deps Installed</div>
+              </div>
+            </div>
+          </>) : (<div className="empty-state">No eval runs yet. Run <code>buff eval run</code> to measure the agent end-to-end.</div>)}
+      </div>
+
+      {/* Eval Composite Score Chart */}
+      {evalChartData.length > 1 && (<>
+          <h3 className="section-subtitle">Composite Score by Model</h3>
+          <div className="chart-container">
+            <recharts_1.ResponsiveContainer width="100%" height={260}>
+              <recharts_1.BarChart data={evalChartData} margin={{ top: 20, right: 20, left: 10, bottom: 40 }}>
+                <recharts_1.CartesianGrid strokeDasharray="3 3" stroke="#21262d"/>
+                <recharts_1.XAxis dataKey="name" tick={{ fill: '#8b949e', fontSize: 11 }} axisLine={{ stroke: '#30363d' }}/>
+                <recharts_1.YAxis domain={[0, 100]} tick={{ fill: '#8b949e', fontSize: 11 }} axisLine={{ stroke: '#30363d' }} tickFormatter={(v) => v + '%'}/>
+                <recharts_1.Tooltip contentStyle={{ background: '#161b22', border: '1px solid #30363d', borderRadius: 8 }} labelStyle={{ color: '#e6edf3' }} formatter={(value) => [value + '%', 'Composite Score']}/>
+                <recharts_1.Bar dataKey="score" radius={[4, 4, 0, 0]}>
+                  {evalChartData.map((entry, i) => (<recharts_1.Cell key={i} fill={entry.score >= 80 ? '#3fb950' : entry.score >= 50 ? '#d29922' : '#f85149'} fillOpacity={0.8}/>))}
+                </recharts_1.Bar>
+              </recharts_1.BarChart>
+            </recharts_1.ResponsiveContainer>
+          </div>
+
+          {/* Eval Metrics Breakdown Chart */}
+          <h3 className="section-subtitle">Metric Breakdown (completion / tests / recovery / token efficiency)</h3>
+          <div className="chart-container">
+            <recharts_1.ResponsiveContainer width="100%" height={260}>
+              <recharts_1.BarChart data={evalChartData} margin={{ top: 20, right: 20, left: 10, bottom: 40 }}>
+                <recharts_1.CartesianGrid strokeDasharray="3 3" stroke="#21262d"/>
+                <recharts_1.XAxis dataKey="name" tick={{ fill: '#8b949e', fontSize: 11 }} axisLine={{ stroke: '#30363d' }}/>
+                <recharts_1.YAxis domain={[0, 100]} tick={{ fill: '#8b949e', fontSize: 11 }} axisLine={{ stroke: '#30363d' }} tickFormatter={(v) => v + '%'}/>
+                <recharts_1.Tooltip contentStyle={{ background: '#161b22', border: '1px solid #30363d', borderRadius: 8 }} labelStyle={{ color: '#e6edf3' }}/>
+                <recharts_1.Legend wrapperStyle={{ color: '#8b949e' }}/>
+                <recharts_1.Bar dataKey="completion" name="Completion" fill="#3fb950" radius={[4, 4, 0, 0]} fillOpacity={0.8}/>
+                <recharts_1.Bar dataKey="tests" name="Tests" fill="#58a6ff" radius={[4, 4, 0, 0]} fillOpacity={0.8}/>
+                <recharts_1.Bar dataKey="recovery" name="Recovery" fill="#d29922" radius={[4, 4, 0, 0]} fillOpacity={0.8}/>
+                <recharts_1.Bar dataKey="efficiency" name="Token Eff." fill="#bc8cff" radius={[4, 4, 0, 0]} fillOpacity={0.8}/>
+              </recharts_1.BarChart>
+            </recharts_1.ResponsiveContainer>
+          </div>
+        </>)}
+
+      {/* Eval Run History */}
+      <h3 className="section-subtitle">Eval Run History</h3>
+      <div className="benchmark-list">
+        {evalRuns.length === 0 ? (<div className="empty-state">No eval runs yet. Run <code>buff eval run</code> to start.</div>) : (evalRuns.map((run) => {
+            const score = Math.round(run.summary.avgCompositeScore * 100);
+            const scoreClass = score >= 80 ? 'high' : score >= 50 ? 'medium' : 'low';
+            return (<div className="benchmark-item" key={run.id}>
+                <span className="benchmark-date">
+                  {new Date(run.startedAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
+                </span>
+                <span className="benchmark-model">{run.provider}/{run.model}</span>
+                <span className={`benchmark-score ${scoreClass}`}>{score}%</span>
+              </div>);
+        }))}
+      </div>
+
+      {/* Run History */}
+      <h3 className="section-subtitle">Run History</h3>
+      <div className="benchmark-list">
+        {runs.length === 0 ? (<div className="empty-state">No benchmark runs yet. Run <code>buff benchmark</code> to start.</div>) : (runs.map((run) => {
+            const passRate = run.summary.totalTasks > 0
+                ? Math.round((run.summary.tasksPassed / run.summary.totalTasks) * 100)
+                : 0;
+            const scoreClass = passRate >= 80 ? 'high' : passRate >= 50 ? 'medium' : 'low';
+            return (<div className="benchmark-item" key={run.id}>
+                <span className="benchmark-date">
+                  {new Date(run.startedAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
+                </span>
+                <span className="benchmark-model">{run.provider}/{run.model}</span>
+                <span className={`benchmark-score ${scoreClass}`}>{passRate}%</span>
+              </div>);
+        }))}
+      </div>
+    </>);
+}