diff --git a/agent-evolution/index.html b/agent-evolution/index.html
index 5510124..f0d8fde 100644
--- a/agent-evolution/index.html
+++ b/agent-evolution/index.html
@@ -5,6 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>APAW Agent Evolution Dashboard</title>
     <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0"></script>
     <style>
         :root {
             --bg-deep: #0a0f1a;
@@ -608,8 +610,9 @@
         .chart-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 24px; }
         .chart-title { font-size: 1.1em; font-weight: 700; margin-bottom: 16px; }
         .chart-sub { font-size: 0.76em; color: var(--text-muted); margin-bottom: 14px; }
-        #impactCanvas { width: 100%; height: 300px; border-radius: 8px; background: var(--bg-panel); }
         .chart-placeholder { text-align: center; padding: 60px 20px; color: var(--text-muted); font-size: 0.95em; }
+        .chart-container { position:relative; height:280px; width:100%; }
+        .chart-container-sm { position:relative; height:240px; width:100%; }
 
         /* Recommendation Cards */
         .rec-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; transition: all 0.3s; margin-bottom: 16px; }
@@ -848,39 +851,26 @@
     <!-- Impact Tab -->
     <div id="tab-impact" class="tab-panel">
         <div class="stats-row" id="impactStats"></div>
-
-        <!-- Agent Score Bar Chart -->
+        
+        <!-- Chart 1: Agent Performance Scores -->
         <div class="chart-wrap">
             <div class="chart-title">Agent Performance Scores</div>
-            <div class="chart-sub">Current fit score per agent — sorted descending</div>
-            <canvas id="historyScoreCanvas" width="900" height="260" style="width:100%;height:260px;border-radius:8px;background:var(--bg-panel)"></canvas>
-            <div id="historyPlaceholder" class="chart-placeholder" style="display:none">No agent score data available.</div>
+            <div class="chart-sub">Composite score per agent based on model benchmarks</div>
+            <div class="chart-container"><canvas id="agentScoreChart"></canvas></div>
         </div>
-
-        <!-- Model Distribution -->
-        <div class="chart-wrap">
-            <div class="chart-title">Model Distribution</div>
-            <div class="chart-sub">Current models across all agents</div>
-            <canvas id="modelDistCanvas" width="900" height="280" style="width:100%;height:280px;border-radius:8px;background:var(--bg-panel)"></canvas>
-            <div id="modelDistPlaceholder" class="chart-placeholder" style="display:none">No model data available</div>
-        </div>
-
-        <!-- Migration Impact Bars -->
-        <div class="chart-wrap">
-            <div class="chart-title">Migration Impact</div>
-            <div class="chart-sub">Agents with model history — current score vs estimated previous model score</div>
-            <canvas id="impactCanvas" width="900" height="340" style="width:100%;height:340px;border-radius:8px;background:var(--bg-panel)"></canvas>
-            <div id="impactPlaceholder" class="chart-placeholder" style="display:none">No migration data yet</div>
-        </div>
-
-        <!-- Sync Note -->
-        <div id="impactSyncNote" class="chart-wrap" style="display:none;text-align:center;padding:40px;">
-            <div style="font-size:1.2em;color:var(--text-secondary);margin-bottom:12px">📊 Data not synced</div>
-            <div style="color:var(--text-muted);margin-bottom:16px">Run the synchronization script to collect agent performance data.</div>
-            <button class="action-btn primary" onclick="runSync()">
-                <span>🔄</span> Sync Evolution Data
-            </button>
-            <pre style="margin-top:12px;color:var(--text-muted);font-size:.8em;font-family:JetBrains Mono,monospace">bun run agent-evolution/scripts/sync-agent-history.ts</pre>
+        
+        <!-- Chart 2 & 3 side by side -->
+        <div style="display:grid;grid-template-columns:1fr 1.5fr;gap:20px;margin-bottom:24px">
+            <div class="chart-wrap">
+                <div class="chart-title">Model Distribution</div>
+                <div class="chart-sub">Agents per model</div>
+                <div class="chart-container-sm"><canvas id="modelDistChart"></canvas></div>
+            </div>
+            <div class="chart-wrap">
+                <div class="chart-title">Migration Impact</div>
+                <div class="chart-sub">Before vs after model change score</div>
+                <div class="chart-container-sm"><canvas id="migrationImpactChart"></canvas></div>
+            </div>
         </div>
     </div>
 </div>
@@ -1005,6 +995,11 @@
 // Supports both server and file:// mode
 let agentData = {};
 
+// Set Chart.js dark theme defaults
+Chart.defaults.color = '#8ba3c0';
+Chart.defaults.borderColor = '#1e2d45';
+Chart.defaults.font.family = "'Inter', sans-serif";
+
 // Inline recommendation data fallback (from model-research-latest.json)
 const INLINE_RECOMMENDATIONS = [
     { agent: "frontend-developer", current_model_in_agent_versions: "ollama-cloud/qwen3-coder:480b", source_of_truth_model: "ollama-cloud/minimax-m2.5", impact: "high", score_before: 86, score_after: 92, score_delta: 6, rationale: "agent-versions.json is stale. kilo-meta.json (source of truth) already has minimax-m2.5. Matrix score for frontend-dev on M2.5 = 92 (highest!)." },
@@ -1718,290 +1713,258 @@ function renderModelsTab(agent) {
 }
 
 // Compute score for any model name using benchmark lookup + fallback
-function getModelScore(modelName, defaultScore) {
-    // Try exact match first
+function computeAgentScore(modelName) {
     const bm = (agentData.model_benchmarks || {});
-    let score = null;
-    if (bm[modelName]) {
-        score = (bm[modelName].if_score || 70) * 0.6 + (bm[modelName].swe_bench || 0) * 0.3;
-        const ctx = bm[modelName].context_window || 128;
-        const ctxScore = ctx >= 1000 ? 15 : ctx >= 256 ? 8 : 4;
-        score += ctxScore;
+    const key = Object.keys(bm).find(k => modelName.includes(k)) || '';
+    if (bm[key]) {
+        const m = bm[key];
+        let score = (m.if_score || 70) * 0.6 + (m.swe_bench || 0) * 0.3;
+        const ctx = m.context_window || 128;
+        score += ctx >= 1000 ? 15 : ctx >= 256 ? 8 : 4;
+        return Math.round(score);
     }
-    if (score) return Math.round(score);
-    // Fallback: hash-based deterministic score from model name
     const hash = modelName.split('').reduce((a, c) => a + c.charCodeAt(0), 0);
-    return defaultScore || 50 + (hash % 35);
+    return 50 + (hash % 35);
 }
 
-// Render Impact Tab - horizontal score bars + donut + before/after bars  
-function renderImpact() {
-    const allAgents = Object.entries(agentData.agents);
-    const modelCounts = {};
-    let totalScore = 0, agentsWithScore = 0;
-    let bestModel = { name: '', score: 0 };
-    let worstModel = { name: '', score: 100 };
-    // Pre-compute all agent scores
-    const scoredAgents = [];
+// Chart 1: Agent Score Bar Chart
+function drawAgentScoreChart(scoredAgents) {
+    const ctx = document.getElementById('agentScoreChart')?.getContext('2d');
+    if (!ctx) return;
     
-    allAgents.forEach(([name, agent]) => {
-        const model = agent.current?.model || 'unknown';
-        modelCounts[model] = (modelCounts[model] || 0) + 1;
-        const score = getModelScore(model, 70);
-        scoredAgents.push({ name, model, score, history: agent.history || [] });
-        totalScore += score;
-        agentsWithScore++;
-        if (score > bestModel.score) bestModel = { name: model, score };
-        if (score < worstModel.score) worstModel = { name: model, score };
-    });
+    const labels = scoredAgents.map(a => a.name);
+    const data = scoredAgents.map(a => a.score);
+    const bgColors = scoredAgents.map(a => 
+        a.score >= 85 ? '#00ff94' : a.score >= 70 ? '#00d4ff' : a.score >= 55 ? '#a855f7' : '#ff4757'
+    );
     
-    scoredAgents.sort((a, b) => b.score - a.score);
-    const totalAgents = allAgents.length;
-    const avgSystemScore = agentsWithScore > 0 ? (totalScore / agentsWithScore).toFixed(1) : 0;
-    const changesMade = allAgents.reduce((sum, [_, a]) => sum + ((a.history || []).length || 0), 0);
-    
-    // Stats row
-    document.getElementById('impactStats').innerHTML = `
-        <div class="stat-card"><div class="stat-label">Total Agents</div><div class="stat-value grad-cyan">${totalAgents}</div><div class="stat-sub">in system</div></div>
-        <div class="stat-card"><div class="stat-label">Avg System Score</div><div class="stat-value grad-green">${avgSystemScore}</div><div class="stat-sub">composite</div></div>
-        <div class="stat-card"><div class="stat-label">Best Model</div><div class="stat-value grad-purple">${bestModel.name.split('/').pop()}</div><div class="stat-sub">score: ${bestModel.score}</div></div>
-        <div class="stat-card"><div class="stat-label">Worst Model</div><div class="stat-value grad-orange">${worstModel.name.split('/').pop()}</div><div class="stat-sub">score: ${worstModel.score}</div></div>
-        <div class="stat-card"><div class="stat-label">Changes Made</div><div class="stat-value grad-cyan">${changesMade}</div><div class="stat-sub">total migrations</div></div>
-    `;
-    
-    // Draw all 3 charts
-    drawAgentScoreBars(scoredAgents);
-    drawModelDistributionDonut(modelCounts);
-    drawMigrationImpactBarsFromHistory(scoredAgents);
-}
-
-// 1. Agent Score Bar Chart — horizontal bars sorted descending
-function drawAgentScoreBars(scoredAgents) {
-    const canvas = document.getElementById('historyScoreCanvas');
-    if (!canvas) return;
-    const ctx = canvas.getContext('2d');
-    
-    const w = 900, h = 260;
-    canvas.width = w; canvas.height = h;
-    ctx.clearRect(0, 0, w, h);
-    
-    if (scoredAgents.length === 0) {
-        document.getElementById('historyPlaceholder').style.display = 'block';
-        return;
-    }
-    document.getElementById('historyPlaceholder').style.display = 'none';
-    
-    const padding = { top: 20, right: 40, bottom: 10, left: 140 };
-    const barH = Math.min(28, (h - padding.top - padding.bottom) / scoredAgents.length);
-    const maxScore = Math.max(...scoredAgents.map(a => a.score), 100);
-    const chartW = w - padding.left - padding.right;
-    
-    scoredAgents.forEach((ag, i) => {
-        const barW = (ag.score / maxScore) * chartW;
-        const y = padding.top + i * barH;
-        const x = padding.left;
-        const color = ag.score >= 85 ? 'rgba(0,255,148,.7)' : ag.score >= 70 ? 'rgba(0,212,255,.65)' : ag.score >= 55 ? 'rgba(168,85,247,.55)' : 'rgba(255,71,87,.5)';
-        
-        // Bar
-        ctx.fillStyle = color;
-        ctx.beginPath();
-        ctx.roundRect(x, y + 3, barW, barH - 6, 4);
-        ctx.fill();
-        
-        // Agent name (left)
-        ctx.fillStyle = '#e8f1ff';
-        ctx.font = '12px Inter';
-        ctx.textAlign = 'right';
-        ctx.textBaseline = 'middle';
-        ctx.fillText(ag.name, x - 8, y + barH / 2);
-        
-        // Score (right of bar)
-        ctx.fillStyle = '#e8f1ff';
-        ctx.textAlign = 'left';
-        ctx.font = 'bold 11px JetBrains Mono';
-        ctx.fillText(ag.score.toString(), x + barW + 8, y + barH / 2);
-        
-        // Model short name inside bar if enough space
-        if (barW > 120) {
-            ctx.fillStyle = '#0e1219';
-            ctx.font = '9px JetBrains Mono';
-            ctx.textAlign = 'left';
-            ctx.fillText(ag.model.split('/').pop().substring(0, 16), x + 8, y + barH / 2);
+    window._agentScoreChart = new Chart(ctx, {
+        type: 'bar',
+        data: {
+            labels,
+            datasets: [{
+                label: 'Composite Score',
+                data,
+                backgroundColor: bgColors,
+                borderRadius: 6,
+                borderSkipped: false,
+            }]
+        },
+        options: {
+            indexAxis: 'y',
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: { display: false },
+                tooltip: {
+                    backgroundColor: '#0f1525',
+                    titleColor: '#e8f1ff',
+                    bodyColor: '#8ba3c0',
+                    borderColor: '#1e2d45',
+                    borderWidth: 1,
+                    callbacks: {
+                        label: (item) => `${item.raw} — ${scoredAgents[item.dataIndex].model.split('/').pop()}`
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    grid: { color: '#1e2d45' },
+                    ticks: { color: '#5a7090', font: { family: 'JetBrains Mono', size: 10 } }
+                },
+                y: {
+                    grid: { display: false },
+                    ticks: { color: '#8ba3c0', font: { family: 'JetBrains Mono', size: 11 } }
+                }
+            }
         }
     });
 }
 
-// 2. Model Distribution Donut Chart
-function drawModelDistributionDonut(modelCounts) {
-    const canvas = document.getElementById('modelDistCanvas');
-    if (!canvas) return;
-    const ctx = canvas.getContext('2d');
+// Chart 2: Model Distribution (Doughnut)
+function drawModelDistChart(modelCounts) {
+    const ctx = document.getElementById('modelDistChart')?.getContext('2d');
+    if (!ctx) return;
     
-    const w = 900, h = 280;
-    canvas.width = w; canvas.height = h;
+    const entries = Object.entries(modelCounts).filter(([_, c]) => c > 0);
+    const labels = entries.map(([m, _]) => m.split('/').pop());
+    const data = entries.map(([_, c]) => c);
+    const colors = ['#00ff94','#00d4ff','#a855f7','#ff9f43','#ff4757','#3b82f6','#facc15','#e879f9'];
     
-    const modelEntries = Object.entries(modelCounts).filter(([_, c]) => c > 0);
-    if (modelEntries.length === 0) {
-        document.getElementById('modelDistPlaceholder').style.display = 'block';
-        return;
-    }
-    document.getElementById('modelDistPlaceholder').style.display = 'none';
-    ctx.clearRect(0, 0, w, h);
-    
-    const centerX = w / 2 - 120;
-    const centerY = h / 2;
-    const outerRadius = Math.min(w, h) / 2 - 30;
-    const innerRadius = outerRadius * 0.58;
-    const colors = ['#00ff94','#00d4ff','#a855f7','#ff9f43','#ff4757','#3b82f6','#facc15','#e879f9','#4ade80','#fb7185'];
-    const total = modelEntries.reduce((s, [_, c]) => s + c, 0);
-    let startAngle = -Math.PI / 2;
-    
-    modelEntries.forEach(([model, count], idx) => {
-        const sliceAngle = (count / total) * Math.PI * 2;
-        const color = colors[idx % colors.length];
-        ctx.beginPath();
-        ctx.arc(centerX, centerY, outerRadius, startAngle, startAngle + sliceAngle);
-        ctx.arc(centerX, centerY, innerRadius, startAngle + sliceAngle, startAngle, true);
-        ctx.closePath();
-        ctx.fillStyle = color;
-        ctx.fill();
-        startAngle += sliceAngle;
-    });
-    
-    // Center text
-    ctx.fillStyle = '#e8f1ff';
-    ctx.font = 'bold 28px Inter';
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
-    ctx.fillText(total.toString(), centerX, centerY - 6);
-    ctx.fillStyle = '#8ba3c0';
-    ctx.font = '12px Inter';
-    ctx.fillText('agents', centerX, centerY + 18);
-    
-    // Legend on right
-    let legendY = centerY - (modelEntries.length * 22) / 2;
-    const legendX = centerX + outerRadius + 30;
-    modelEntries.forEach(([model, count], idx) => {
-        const color = colors[idx % colors.length];
-        const short = model.split('/').pop();
-        ctx.fillStyle = color;
-        ctx.fillRect(legendX, legendY, 10, 10);
-        ctx.fillStyle = '#e8f1ff';
-        ctx.font = '12px Inter';
-        ctx.textAlign = 'left';
-        ctx.textBaseline = 'middle';
-        ctx.fillText(`${short} — ${count}`, legendX + 16, legendY + 5);
-        const pct = ((count / total) * 100).toFixed(0);
-        ctx.fillStyle = '#5a7090';
-        ctx.font = '10px JetBrains Mono';
-        ctx.fillText(`${pct}%`, legendX + 200, legendY + 5);
-        legendY += 24;
+    window._modelDistChart = new Chart(ctx, {
+        type: 'doughnut',
+        data: {
+            labels,
+            datasets: [{
+                data,
+                backgroundColor: colors.slice(0, entries.length),
+                borderColor: '#141c2e',
+                borderWidth: 2,
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            cutout: '60%',
+            plugins: {
+                legend: {
+                    position: 'right',
+                    labels: { color: '#8ba3c0', font: { family: 'JetBrains Mono', size: 11 } }
+                },
+                tooltip: {
+                    backgroundColor: '#0f1525',
+                    titleColor: '#e8f1ff',
+                    bodyColor: '#8ba3c0',
+                    borderColor: '#1e2d45',
+                    borderWidth: 1,
+                    callbacks: {
+                        label: (item) => ` ${item.label}: ${item.raw} agents (${((item.raw/data.reduce((s,c)=>s+c,0))*100).toFixed(0)}%)`
+                    }
+                }
+            }
+        }
     });
 }
 
-// 3. Migration Impact Bars — compare current model vs previous model from history
-function drawMigrationImpactBarsFromHistory(scoredAgents) {
-    const canvas = document.getElementById('impactCanvas');
-    if (!canvas) return;
-    const ctx = canvas.getContext('2d');
+// Chart 3: Migration Impact (Grouped Bar)
+function drawMigrationChart(scoredAgents) {
+    const ctx = document.getElementById('migrationImpactChart')?.getContext('2d');
+    if (!ctx) return;
     
-    const w = 900, h = 340;
-    canvas.width = w; canvas.height = h;
-    
-    // Build impact data: agents with history showing current vs previous model score
+    // Build before/after data from agents with history
     const impactData = [];
     scoredAgents.forEach(ag => {
-        if (ag.history && ag.history.length > 0) {
+        if (ag.history.length > 0) {
             const latest = ag.history[ag.history.length - 1];
             if (latest.to && latest.from) {
-                const after = ag.score; // current score
-                // Estimate "before" score from previous model name
-                const before = getModelScore(latest.from, after - 5);
+                const after = ag.score;
+                const before = computeAgentScore(latest.from);
                 impactData.push({
-                    agent: ag.name,
-                    before: before,
-                    after: after,
+                    name: ag.name.split('-').map(s => s[0]?.toUpperCase() + s.slice(1)).join('-'),
+                    before, after, 
                     delta: after - before,
-                    fromModel: (latest.from || '').split('/').pop() || 'unknown',
-                    toModel: ag.model.split('/').pop()
+                    from: latest.from.split('/').pop(),
+                    to: ag.model.split('/').pop()
                 });
             }
         }
     });
     
     if (impactData.length === 0) {
-        document.getElementById('impactPlaceholder').style.display = 'block';
+        // No history — show single bars for all agents
+        window._migrationChart = new Chart(ctx, {
+            type: 'bar',
+            data: {
+                labels: scoredAgents.slice(0, 20).map(a => a.name),
+                datasets: [{
+                    label: 'Current Score',
+                    data: scoredAgents.slice(0, 20).map(a => a.score),
+                    backgroundColor: '#00ff94',
+                    borderRadius: 4
+                }]
+            },
+            options: {
+                responsive: true, maintainAspectRatio: false,
+                plugins: { legend: { display: false } },
+                scales: {
+                    x: { grid: { display: false }, ticks: { color: '#5a7090', font: { size: 9 }, maxRotation: 45 } },
+                    y: { grid: { color: '#1e2d45' }, ticks: { color: '#5a7090' } }
+                }
+            }
+        });
         return;
     }
-    document.getElementById('impactPlaceholder').style.display = 'none';
-    ctx.clearRect(0, 0, w, h);
     
-    const padding = { top: 30, right: 40, bottom: 50, left: 45 };
-    const chartW = w - padding.left - padding.right;
-    const chartH = h - padding.top - padding.bottom;
-    const maxScore = Math.max(...impactData.map(d => Math.max(d.before, d.after)), 100);
-    const barGroupW = chartW / impactData.length;
-    const barW = Math.min(22, barGroupW * 0.35);
-    const scaleY = chartH / maxScore;
-    
-    // Grid + labels
-    ctx.strokeStyle = '#1e2d45';
-    ctx.lineWidth = 1;
-    ctx.fillStyle = '#5a7090';
-    ctx.textAlign = 'right';
-    ctx.font = '10px JetBrains Mono';
-    for (let i = 0; i <= 4; i++) {
-        const y = padding.top + (i * chartH / 4);
-        const val = Math.round(maxScore - (i * maxScore / 4));
-        ctx.beginPath(); ctx.moveTo(padding.left, y); ctx.lineTo(w - padding.right, y); ctx.stroke();
-        ctx.fillText(val.toString(), padding.left - 8, y + 4);
-    }
-    
-    impactData.forEach((d, i) => {
-        const cx = padding.left + i * barGroupW + barGroupW / 2;
-        
-        // Before bar (dim red)
-        const bh = d.before * scaleY;
-        const by = padding.top + chartH - bh;
-        ctx.fillStyle = 'rgba(255,71,87,.45)';
-        ctx.fillRect(cx - barW - 3, by, barW, bh);
-        
-        // After bar (green if improved, red if regressed)
-        const ah = d.after * scaleY;
-        const ay = padding.top + chartH - ah;
-        ctx.fillStyle = d.delta >= 0 ? 'rgba(0,255,148,.75)' : 'rgba(255,71,87,.75)';
-        ctx.fillRect(cx + 3, ay, barW, ah);
-        
-        // Delta label
-        if (Math.abs(d.delta) >= 1) {
-            ctx.fillStyle = d.delta >= 0 ? '#00ff94' : '#ff4757';
-            ctx.font = 'bold 9px JetBrains Mono';
-            ctx.textAlign = 'center';
-            const dy = Math.min(ay, by) - 10;
-            ctx.fillText((d.delta >= 0 ? '+' : '') + d.delta, cx, dy);
+    window._migrationChart = new Chart(ctx, {
+        type: 'bar',
+        data: {
+            labels: impactData.map(d => d.name),
+            datasets: [
+                {
+                    label: 'Before',
+                    data: impactData.map(d => d.before),
+                    backgroundColor: 'rgba(255,71,87,.6)',
+                    borderRadius: 4
+                },
+                {
+                    label: 'After',
+                    data: impactData.map(d => d.after),
+                    backgroundColor: impactData.map(d => d.delta >= 0 ? 'rgba(0,255,148,.6)' : 'rgba(255,71,87,.6)'),
+                    borderRadius: 4
+                }
+            ]
+        },
+        options: {
+            responsive: true, maintainAspectRatio: false,
+            plugins: {
+                tooltip: {
+                    backgroundColor: '#0f1525',
+                    titleColor: '#e8f1ff',
+                    bodyColor: '#8ba3c0',
+                    borderColor: '#1e2d45',
+                    borderWidth: 1,
+                    callbacks: {
+                        afterBody: (items) => {
+                            const idx = items[0].dataIndex;
+                            const d = impactData[idx];
+                            return `Change: ${d.from} → ${d.to}\nDelta: ${d.delta >= 0 ? '+' : ''}${d.delta}`;
+                        }
+                    }
+                }
+            },
+            scales: {
+                x: { grid: { display: false }, ticks: { color: '#5a7090', font: { size: 9 }, maxRotation: 45 } },
+                y: { grid: { color: '#1e2d45' }, ticks: { color: '#5a7090' } }
+            }
         }
-        
-        // Agent label (rotated)
-        ctx.save();
-        ctx.translate(cx, h - padding.bottom + 18);
-        ctx.rotate(-0.35);
-        ctx.fillStyle = '#8ba3c0';
-        ctx.font = '9px Inter';
-        ctx.textAlign = 'left';
-        const label = d.agent.length > 12 ? d.agent.substring(0, 10) + '..' : d.agent;
-        ctx.fillText(label, 0, 0);
-        ctx.restore();
     });
-    
-    // Legend
-    const ly = 12;
-    ctx.fillStyle = 'rgba(255,71,87,.45)'; ctx.fillRect(padding.left, ly, 12, 10);
-    ctx.fillStyle = '#e8f1ff'; ctx.font = '10px Inter'; ctx.textAlign = 'left'; ctx.fillText('Before', padding.left + 18, ly + 9);
-    ctx.fillStyle = 'rgba(0,255,148,.75)'; ctx.fillRect(padding.left + 70, ly, 12, 10);
-    ctx.fillStyle = '#e8f1ff'; ctx.fillText('After', padding.left + 88, ly + 9);
 }
 
-// Sync button handler
+// Render Impact Tab - Chart.js based
+function renderImpact() {
+    const allAgents = Object.entries(agentData.agents);
+    const modelCounts = {};
+    const scoredAgents = [];
+    
+    // Compute scores for all agents
+    allAgents.forEach(([name, agent]) => {
+        const model = agent.current?.model || 'unknown';
+        modelCounts[model] = (modelCounts[model] || 0) + 1;
+        const score = computeAgentScore(model);
+        scoredAgents.push({ name, model, score, history: agent.history || [] });
+    });
+    
+    // Sort by score descending
+    scoredAgents.sort((a, b) => b.score - a.score);
+    
+    // Stats row
+    const totalAgents = allAgents.length;
+    const avgScore = scoredAgents.length > 0 
+        ? (scoredAgents.reduce((s, a) => s + a.score, 0) / scoredAgents.length).toFixed(1) 
+        : 0;
+    const best = scoredAgents[0] || { name: 'N/A', score: 0 };
+    const worst = scoredAgents[scoredAgents.length - 1] || { name: 'N/A', score: 0 };
+    const changes = allAgents.reduce((sum, [_, a]) => sum + ((a.history || []).length), 0);
+    
+    document.getElementById('impactStats').innerHTML = `
+        <div class="stat-card"><div class="stat-label">Total Agents</div><div class="stat-value grad-cyan">${totalAgents}</div><div class="stat-sub">in system</div></div>
+        <div class="stat-card"><div class="stat-label">Avg Score</div><div class="stat-value grad-green">${avgScore}</div><div class="stat-sub">composite</div></div>
+        <div class="stat-card"><div class="stat-label">Best Model</div><div class="stat-value grad-purple">${best.model.split('/').pop()}</div><div class="stat-sub">score: ${best.score}</div></div>
+        <div class="stat-card"><div class="stat-label">Worst Model</div><div class="stat-value grad-orange">${worst.model.split('/').pop()}</div><div class="stat-sub">score: ${worst.score}</div></div>
+        <div class="stat-card"><div class="stat-label">Changes Made</div><div class="stat-value grad-cyan">${changes}</div><div class="stat-sub">total migrations</div></div>
+    `;
+    
+    // Destroy old charts before creating new ones
+    if (window._agentScoreChart) window._agentScoreChart.destroy();
+    if (window._modelDistChart) window._modelDistChart.destroy();
+    if (window._migrationChart) window._migrationChart.destroy();
+    
+    drawAgentScoreChart(scoredAgents);
+    drawModelDistChart(modelCounts);
+    drawMigrationChart(scoredAgents);
+}
+
+// Filter Agents
 function runSync() {
     const btn = document.querySelector('#impactSyncNote button');
     if (btn) btn.textContent = '⏳ Running...';