milens 0.6.2 → 0.6.4

package/dist/cli.js

@@ -25,6 +25,7 @@ program
     .option('--skills-claude', 'Generate skill files for Claude Code only')
     .option('--skills-agents', 'Generate skill files for AGENTS.md only')
     .option('--skills-windsurf', 'Generate config for Windsurf only')
+    .option('--embeddings', 'Generate vector embeddings for semantic search')
     .action(async (opts) => {
     const rootPath = resolve(opts.path);
     const outDir = opts.output ?? join(rootPath, '.milens');
@@ -39,6 +40,7 @@ program
         verbose: opts.verbose,
         force: opts.force,
         aliases,
+        embeddings: opts.embeddings,
     });
     // Register in global registry
     const contentHash = createHash('sha256').update(JSON.stringify(stats)).digest('hex').slice(0, 12);
@@ -240,6 +242,7 @@ program
     .command('dashboard')
     .description('Open usage analytics dashboard in your browser')
     .option('--port <port>', 'Port for the dashboard server', '3200')
+    .option('-p, --path <path>', 'Repository root path for annotation data')
     .action(async (opts) => {
     const { join: joinPath } = await import('node:path');
     const { homedir: getHomedir } = await import('node:os');
@@ -252,13 +255,55 @@ program
     }
     const { Database } = await import('./store/db.js');
     const db = new Database(trackDbPath);
-    const stats = db.getToolUsageStats();
+    // Determine repo filter from --path
+    let repoFilter;
+    if (opts.path) {
+        repoFilter = resolve(opts.path);
+    }
+    const stats = db.getToolUsageStats(repoFilter);
     db.close();
     if (stats.totalCalls === 0) {
-        console.log('No usage data yet. Use milens MCP tools first, then check back.');
+        if (repoFilter) {
+            console.log(`No usage data for ${repoFilter}. Use milens MCP tools with this repo first.`);
+            console.log(`Tip: run 'milens dashboard' without --path to see all repos.`);
+        }
+        else {
+            console.log('No usage data yet. Use milens MCP tools first, then check back.');
+        }
         return;
     }
-    const html = generateDashboardHtml(stats);
+    let annotationStats;
+    if (opts.path) {
+        try {
+            const { RepoRegistry } = await import('./store/registry.js');
+            const projDbPath = new RepoRegistry().findDbPath(resolve(opts.path));
+            if (projDbPath) {
+                const projDb = new Database(projDbPath);
+                const { AnnotationStore } = await import('./store/annotations.js');
+                const aStore = new AnnotationStore(projDb.connection);
+                const allAnn = aStore.recall({ limit: 10000 });
+                const bands = [0, 0, 0, 0];
+                for (const a of allAnn) {
+                    if (a.confidence < 0.4)
+                        bands[0]++;
+                    else if (a.confidence < 0.7)
+                        bands[1]++;
+                    else if (a.confidence < 0.9)
+                        bands[2]++;
+                    else
+                        bands[3]++;
+                }
+                annotationStats = {
+                    total: allAnn.length,
+                    confidenceBands: bands,
+                    recent: allAnn.slice(-10).reverse().map(a => ({ symbol: a.symbol, key: a.key, confidence: a.confidence, createdAt: a.createdAt })),
+                };
+                projDb.close();
+            }
+        }
+        catch { /* annotation data is optional */ }
+    }
+    const html = generateDashboardHtml(stats, annotationStats, repoFilter);
     const port = parseInt(opts.port);
     const server = createHttpServer((req, res) => {
         if (req.url === '/' || req.url === '/dashboard') {
@@ -266,10 +311,10 @@ program
             res.end(html);
         }
         else if (req.url === '/api/stats') {
-            // Live refresh endpoint — re-read DB
+            // Live refresh endpoint — re-read DB with repo filter
             try {
                 const liveDb = new Database(trackDbPath);
-                const liveStats = liveDb.getToolUsageStats();
+                const liveStats = liveDb.getToolUsageStats(repoFilter);
                 liveDb.close();
                 res.writeHead(200, { 'Content-Type': 'application/json' });
                 res.end(JSON.stringify(liveStats));
@@ -305,6 +350,677 @@ program
         catch { /* browser open is best-effort */ }
     });
 });
+program
+    .command('evolve')
+    .description('Promote high-confidence annotations to rules/skills, flag stale patterns')
+    .option('-p, --path <path>', 'Repository root path', '.')
+    .option('-s, --schedule <action>', 'daily|weekly|install|uninstall|status')
+    .action(async (opts) => {
+    const { Database } = await import('./store/db.js');
+    const { RepoRegistry } = await import('./store/registry.js');
+    const { AnnotationStore } = await import('./store/annotations.js');
+    const { runDecayPass } = await import('./store/confidence.js');
+    const { join: pathJoin } = await import('node:path');
+    const { existsSync, mkdirSync, writeFileSync } = await import('node:fs');
+    const dbPath = new RepoRegistry().findDbPath(resolve(opts.path));
+    if (!dbPath) {
+        console.error('Not indexed. Run `milens analyze` first.');
+        process.exit(1);
+    }
+    const db = new Database(dbPath);
+    const store = new AnnotationStore(db.connection);
+    // Handle scheduled evolve
+    if (opts.schedule) {
+        const { execSync } = await import('node:child_process');
+        const { homedir } = await import('node:os');
+        const { join, dirname } = await import('node:path');
+        const milensBin = process.argv[1] || 'milens';
+        switch (opts.schedule) {
+            case 'install': {
+                const scheduleType = opts.scheduleType || 'weekly';
+                const cmd = `node ${process.argv[1]} evolve -p "${resolve(opts.path)}"`;
+                if (process.platform === 'win32') {
+                    // Windows Scheduled Task
+                    const taskName = 'MilensEvolve';
+                    const scriptPath = join(homedir(), '.milens', 'evolve.bat');
+                    try {
+                        mkdirSync(dirname(scriptPath), { recursive: true });
+                        writeFileSync(scriptPath, `@echo off\ncd /d "${resolve(opts.path)}"\n${cmd}\n`);
+                        const interval = scheduleType === 'daily' ? 'DAILY' : 'WEEKLY';
+                        execSync(`schtasks /Create /SC ${interval} /TN "${taskName}" /TR "${scriptPath}" /F`, { stdio: 'pipe' });
+                        console.log(`✓ Scheduled task "${taskName}" created (${scheduleType})`);
+                    }
+                    catch (e) {
+                        console.error(`✗ Failed to create scheduled task: ${e.message}`);
+                        console.log('  You can manually run: milens evolve');
+                    }
+                }
+                else {
+                    // Linux/macOS cron
+                    const cronSchedule = scheduleType === 'daily' ? '0 6 * * *' : '0 6 * * 1';
+                    const cronEntry = `${cronSchedule} cd "${resolve(opts.path)}" && ${cmd} >> ~/.milens/evolve.log 2>&1`;
+                    try {
+                        const current = execSync('crontab -l 2>/dev/null || echo ""', { encoding: 'utf-8' }).trim();
+                        const newCron = current ? `${current}\n${cronEntry}` : cronEntry;
+                        const tmpFile = join(homedir(), '.milens', 'crontab.tmp');
+                        mkdirSync(dirname(tmpFile), { recursive: true });
+                        writeFileSync(tmpFile, newCron + '\n');
+                        execSync(`crontab "${tmpFile}"`, { stdio: 'pipe' });
+                        console.log(`✓ Cron job installed (${scheduleType})`);
+                    }
+                    catch (e) {
+                        console.error(`✗ Failed to install cron job: ${e.message}`);
+                        console.log('  Add this to your crontab:');
+                        console.log(`  ${cronEntry}`);
+                    }
+                }
+                break;
+            }
+            case 'uninstall': {
+                if (process.platform === 'win32') {
+                    try {
+                        execSync('schtasks /Delete /TN "MilensEvolve" /F', { stdio: 'pipe' });
+                        console.log('✓ Scheduled task "MilensEvolve" removed');
+                    }
+                    catch {
+                        console.log('No scheduled task found.');
+                    }
+                }
+                else {
+                    try {
+                        const current = execSync('crontab -l 2>/dev/null || echo ""', { encoding: 'utf-8' });
+                        const filtered = current.split('\n').filter(line => !line.includes('milens evolve')).join('\n');
+                        const tmpFile = join(homedir(), '.milens', 'crontab.tmp');
+                        writeFileSync(tmpFile, filtered);
+                        execSync(`crontab "${tmpFile}"`, { stdio: 'pipe' });
+                        console.log('✓ Milens cron job removed');
+                    }
+                    catch {
+                        console.log('No cron job found.');
+                    }
+                }
+                break;
+            }
+            case 'status': {
+                if (process.platform === 'win32') {
+                    try {
+                        const result = execSync('schtasks /Query /TN "MilensEvolve"', { encoding: 'utf-8' });
+                        console.log('Scheduled task: ACTIVE');
+                        console.log(result.split('\n').slice(2).join('\n'));
+                    }
+                    catch {
+                        console.log('No scheduled task configured.');
+                        console.log('Run: milens evolve --schedule install');
+                    }
+                }
+                else {
+                    try {
+                        const cron = execSync('crontab -l 2>/dev/null || echo ""', { encoding: 'utf-8' });
+                        const milensLines = cron.split('\n').filter(l => l.includes('milens evolve'));
+                        if (milensLines.length > 0) {
+                            console.log('Scheduled cron jobs:');
+                            milensLines.forEach(l => console.log(`  ${l}`));
+                        }
+                        else {
+                            console.log('No cron job configured.');
+                            console.log('Run: milens evolve --schedule install');
+                        }
+                    }
+                    catch {
+                        console.log('No cron job configured.');
+                    }
+                }
+                break;
+            }
+            default:
+                console.log(`Unknown schedule action: ${opts.schedule}`);
+                console.log('Use: install, uninstall, status');
+        }
+        // Don't run evolve after schedule management
+        db.close();
+        return;
+    }
+    // 1. Run decay pass
+    const { decayed, archived } = runDecayPass(store);
+    if (decayed > 0 || archived > 0) {
+        console.log(`Decayed: ${decayed} | Archived: ${archived}`);
+    }
+    // 2. Find promotable annotations (confidence >= 0.8)
+    const promotable = store.getPromotableAnnotations();
+    if (promotable.length === 0) {
+        console.log('No annotations ready for promotion.');
+        db.close();
+        return;
+    }
+    // 3. Group by key
+    const groups = new Map();
+    for (const ann of promotable) {
+        const arr = groups.get(ann.key) ?? [];
+        arr.push(ann);
+        groups.set(ann.key, arr);
+    }
+    // 4. Generate rule/skill files
+    let promoted = 0;
+    for (const [key, anns] of groups) {
+        const lines = [
+            `# Milens Evolved ${key.toUpperCase()} Rules`,
+            `# Auto-generated from ${anns.length} high-confidence annotations`,
+            '',
+        ];
+        for (const a of anns) {
+            lines.push(`- **${a.symbol}**: ${a.value}`);
+        }
+        // Write to .agents/skills/{key}.md
+        const skillDir = pathJoin(resolve(opts.path), '.agents', 'skills', `milens-${key}`);
+        if (!existsSync(skillDir))
+            mkdirSync(skillDir, { recursive: true });
+        writeFileSync(pathJoin(skillDir, 'SKILL.md'), lines.join('\n'));
+        // Log promotion
+        for (const a of anns) {
+            store.logEvolutionEvent(a.id, 'promoted', '', skillDir);
+        }
+        promoted += anns.length;
+    }
+    // 5. Find stale annotations (old + low confidence)
+    const stale = store.getStaleAnnotations(30, 0.5);
+    if (stale.length > 0) {
+        console.log(`Flagged stale: ${stale.length} annotations (30+ days, low confidence)`);
+    }
+    console.log(`\nMilens Evolution Report:`);
+    console.log(`  Promoted to rules:  ${promoted} patterns (from ${groups.size} categories)`);
+    console.log(`  Flagged stale:      ${stale.length} annotations`);
+    console.log(`  Archived (decayed): ${archived} annotations`);
+    db.close();
+});
+program
+    .command('metrics')
+    .description('Compute code quality and efficiency metrics')
+    .option('-p, --path <path>', 'Repository root path', '.')
+    .action(async (opts) => {
+    const { Database } = await import('./store/db.js');
+    const { RepoRegistry } = await import('./store/registry.js');
+    const { computeMetrics, formatMetricsReport } = await import('./metrics.js');
+    const dbPath = new RepoRegistry().findDbPath(resolve(opts.path));
+    if (!dbPath) {
+        console.error('Not indexed. Run `milens analyze` first.');
+        process.exit(1);
+    }
+    const db = new Database(dbPath);
+    const metrics = computeMetrics(db);
+    console.log(formatMetricsReport(metrics));
+    db.close();
+});
+program
+    .command('workflow <name>')
+    .description('Run a predefined milens workflow')
+    .option('-p, --path <path>', 'Repository root path', '.')
+    .option('--format <format>', 'Output format: table|json|markdown', 'table')
+    .action(async (name, opts) => {
+    const { Database } = await import('./store/db.js');
+    const { RepoRegistry } = await import('./store/registry.js');
+    const { AnnotationStore } = await import('./store/annotations.js');
+    const dbPath = new RepoRegistry().findDbPath(resolve(opts.path));
+    if (!dbPath) {
+        console.error('Not indexed. Run `milens analyze` first.');
+        process.exit(1);
+    }
+    const db = new Database(dbPath);
+    const root = resolve(opts.path);
+    switch (name) {
+        case 'tdd': {
+            const coverage = db.getTestCoverage();
+            console.log(`Test Coverage Gaps:`);
+            console.log(`  Exported: ${coverage.exportedProductionSymbols} | Tested: ${coverage.testedSymbols} | Coverage: ${Math.round(coverage.testedSymbols / Math.max(1, coverage.exportedProductionSymbols) * 100)}%`);
+            console.log(`\nRun test_coverage_gaps() via MCP for prioritized list.`);
+            break;
+        }
+        case 'review': {
+            console.log('PR Review Report:');
+            try {
+                const { execSync } = await import('node:child_process');
+                const diff = execSync('git diff --name-only HEAD', { cwd: root, encoding: 'utf-8' }).trim();
+                const changedFiles = diff ? diff.split('\n').filter(Boolean) : [];
+                if (changedFiles.length === 0) {
+                    console.log('  No changed files detected.');
+                }
+                else {
+                    console.log(`  ${changedFiles.length} changed files`);
+                    for (const file of changedFiles.slice(0, 15)) {
+                        const syms = db.getSymbolsByFile(file);
+                        if (syms.length > 0) {
+                            for (const sym of syms.slice(0, 5)) {
+                                const incoming = db.getIncomingLinks(sym.id).filter((l) => l.type !== 'contains');
+                                const depsCount = incoming.length;
+                                const heat = sym.heat ?? 0;
+                                const hasTest = db.getSymbolTestCoverage(sym.id);
+                                const score = Math.round((heat / 100) * 40 + Math.min(depsCount / 10, 1) * 35 + (hasTest ? 0 : 25));
+                                let level = 'LOW';
+                                if (score > 75)
+                                    level = 'CRITICAL';
+                                else if (score > 50)
+                                    level = 'HIGH';
+                                else if (score > 25)
+                                    level = 'MEDIUM';
+                                console.log(`    ${sym.name} [${sym.kind}] ${file} — heat:${heat} deps:${depsCount} → ${level}(${score})`);
+                            }
+                        }
+                    }
+                }
+            }
+            catch {
+                console.log('  review_pr requires MCP server. Use milens serve and call via MCP.');
+            }
+            break;
+        }
+        case 'plan': {
+            const summary = db.getCodebaseSummary();
+            console.log(`Codebase Summary: ${summary.symbols} symbols, ${summary.links} links, ${summary.files} files`);
+            if (summary.domains.length > 0) {
+                console.log(`Domains: ${summary.domains.map((d) => `${d.domain}(${d.symbols}s)`).join(', ')}`);
+            }
+            if (summary.topHubs.length > 0) {
+                console.log(`Top hubs: ${summary.topHubs.map((h) => `${h.name}(${h.kind},heat:${h.heat})`).join(', ')}`);
+            }
+            break;
+        }
+        case 'onboard': {
+            const summary = db.getCodebaseSummary();
+            console.log(`Milens Onboarding Report:`);
+            console.log(`  Symbols: ${summary.symbols} | Links: ${summary.links} | Files: ${summary.files}`);
+            console.log(`  Coverage: ${summary.coveragePct}%`);
+            console.log(`\nSession startup — call:`);
+            console.log(`  1. session_start() → codebase_summary() → recall()`);
+            break;
+        }
+        default:
+            console.log(`Unknown workflow: ${name}`);
+            console.log(`Available: tdd, review, plan, onboard, security-scan, refactor, handoff`);
+    }
+    db.close();
+});
+program
+    .command('init')
+    .description('Bootstrap milens for a project: index + AGENTS.md + skills + hooks')
+    .option('-p, --path <path>', 'Repository root path', '.')
+    .option('--profile <profile>', 'minimal|standard|full', 'standard')
+    .option('--with <modules>', 'Comma-separated extra modules (security,ci,hooks)')
+    .option('--interactive', 'Interactive install mode')
+    .action(async (opts) => {
+    const root = resolve(opts.path);
+    // Interactive install mode
+    if (opts.interactive) {
+        const { createInterface } = await import('node:readline');
+        const rl = createInterface({ input: process.stdin, output: process.stdout });
+        const ask = (q) => new Promise(resolve => rl.question(q, resolve));
+        console.log('\n╔══════════════════════════════════════╗');
+        console.log('║   Milens Interactive Installer       ║');
+        console.log('╚══════════════════════════════════════╝\n');
+        // Profile selection
+        console.log('Choose a profile:');
+        console.log('  1. minimal  — Core tools only (10 tools, ~500 token overhead)');
+        console.log('  2. standard — Full vibe coding toolkit (25 tools) [Recommended]');
+        console.log('  3. full     — Everything including experimental features (33 tools)');
+        const profileChoice = await ask('\nProfile [2]: ');
+        const profileMap = { '1': 'minimal', '2': 'standard', '3': 'full', '': 'standard' };
+        opts.profile = profileMap[profileChoice.trim()] || 'standard';
+        // Security rules
+        const securityChoice = await ask('Include security scanning rules? [Y/n]: ');
+        opts.with = opts.with || '';
+        if (securityChoice.trim().toLowerCase() !== 'n') {
+            opts.with += (opts.with ? ',' : '') + 'security';
+        }
+        // CI/CD templates
+        const ciChoice = await ask('Include CI/CD templates (GitHub Actions)? [Y/n]: ');
+        if (ciChoice.trim().toLowerCase() !== 'n') {
+            opts.with += (opts.with ? ',' : '') + 'ci';
+        }
+        // Git hooks
+        const hooksChoice = await ask('Install pre-commit hooks? [Y/n]: ');
+        if (hooksChoice.trim().toLowerCase() !== 'n') {
+            opts.with += (opts.with ? ',' : '') + 'hooks';
+        }
+        // Harness adapters
+        console.log('\nTarget harnesses (comma-separated):');
+        console.log('  claude-code, opencode, codex, cursor, copilot, gemini, zed, all');
+        const harnessChoice = await ask('Harnesses [all]: ');
+        const harnesses = harnessChoice.trim() || 'all';
+        // Generate command
+        const withFlags = opts.with ? `--with ${opts.with}` : '';
+        const harnessFlag = harnesses === 'all' ? '' : `--target ${harnesses}`;
+        console.log(`\nGenerated install command:`);
+        console.log(`  npx milens init --profile ${opts.profile} ${withFlags} ${harnessFlag}`.trim());
+        const confirm = await ask('\nProceed with install? [Y/n]: ');
+        if (confirm.trim().toLowerCase() === 'n') {
+            console.log('Install cancelled. Run the command above when ready.');
+            rl.close();
+            process.exit(0);
+        }
+        rl.close();
+        console.log();
+        // Continue with normal init flow...
+    }
+    const { Database } = await import('./store/db.js');
+    const { RepoRegistry } = await import('./store/registry.js');
+    console.log(`Milens init — bootstrapping ${opts.profile} profile for ${root}`);
+    const { execSync } = await import('node:child_process');
+    console.log('Step 1/4: Analyzing codebase...');
+    const milensBin = process.argv[1] || 'npx milens';
+    try {
+        const cmd = process.argv[0].includes('node')
+            ? `node ${process.argv[1]} analyze -p "${root}" --force`
+            : `npx milens analyze -p "${root}" --force`;
+        execSync(cmd, { stdio: 'pipe', cwd: root });
+    }
+    catch (e) {
+        console.log('  (run `milens analyze -p . --force` manually if this fails)');
+    }
+    console.log('Step 2/4: Generating AGENTS.md...');
+    try {
+        const dbPath = new RepoRegistry().findDbPath(root);
+        if (dbPath) {
+            const db = new Database(dbPath);
+            const { generateAgentsMd } = await import('./agents-md.js');
+            const agentsMd = generateAgentsMd(db, root);
+            const { writeFileSync, mkdirSync, existsSync } = await import('node:fs');
+            if (!existsSync(root))
+                mkdirSync(root, { recursive: true });
+            writeFileSync(resolve(root, 'AGENTS.md'), agentsMd);
+            console.log('  ✓ AGENTS.md created');
+            db.close();
+        }
+    }
+    catch (e) {
+        console.log(`  ⚠ AGENTS.md generation skipped: ${e.message}`);
+    }
+    if (opts.profile !== 'minimal') {
+        console.log('Step 3/4: Installing skill files...');
+        try {
+            const { cpSync, existsSync, mkdirSync } = await import('node:fs');
+            const { join: pathJoin } = await import('node:path');
+            const { fileURLToPath } = await import('node:url');
+            const skillSrc = pathJoin(resolve(fileURLToPath(import.meta.url), '..', '..'), '.agents', 'skills');
+            const skillDst = pathJoin(root, '.agents', 'skills');
+            if (existsSync(skillSrc)) {
+                if (!existsSync(skillDst))
+                    mkdirSync(skillDst, { recursive: true });
+                cpSync(skillSrc, skillDst, { recursive: true });
+                console.log('  ✓ Skill files installed');
+            }
+            else {
+                console.log('  ⚠ Skill template not found (run from milens repo)');
+            }
+        }
+        catch (e) {
+            console.log(`  ⚠ Skill install skipped: ${e.message}`);
+        }
+    }
+    if (opts.profile === 'full' || (opts.with && opts.with.includes('hooks'))) {
+        console.log('Step 4/4: Installing git hooks...');
+        try {
+            const { writeFileSync, existsSync, mkdirSync, chmodSync } = await import('node:fs');
+            const hooksDir = resolve(root, '.git', 'hooks');
+            if (!existsSync(hooksDir)) {
+                mkdirSync(hooksDir, { recursive: true });
+            }
+            const preCommitContent = `#!/bin/bash
+# Auto-installed by milens init
+echo "Milens: Pre-commit check..."
+npx milens workflow review --path . 2>&1 || true
+echo "Milens: Done."
+`;
+            writeFileSync(resolve(hooksDir, 'pre-commit'), preCommitContent);
+            try {
+                chmodSync(resolve(hooksDir, 'pre-commit'), 0o755);
+            }
+            catch { }
+            console.log('  ✓ Pre-commit hook installed');
+        }
+        catch (e) {
+            console.log(`  ⚠ Hook install skipped: ${e.message}`);
+        }
+    }
+    console.log(`\n✓ Milens ${opts.profile} profile bootstrapped for ${root}`);
+    console.log('Next steps:');
+    console.log('  1. Open project in your AI coding agent (Claude Code, OpenCode, etc.)');
+    console.log('  2. AGENTS.md auto-loads with codebase context');
+    console.log('  3. Start a session: session_start({agent: "your-agent-name"})');
+});
+program
+    .command('hooks <action>')
+    .description('Manage milens hook system')
+    .option('-p, --path <path>', 'Repository root path', '.')
+    .option('--hook <hook>', 'Hook name (sessionStart, sessionEnd, preCommit, fileChange, preCompact, postCompact)')
+    .action(async (action, opts) => {
+    const { HookManager } = await import('./server/hooks.js');
+    const manager = new HookManager();
+    const projectPath = resolve(opts.path);
+    switch (action) {
+        case 'enable': {
+            if (opts.hook) {
+                manager.enableHook(opts.hook, projectPath);
+                console.log(`Hook "${opts.hook}" enabled for ${projectPath}`);
+            }
+            else {
+                const cfg = manager.loadConfig(projectPath);
+                cfg.enabled = true;
+                manager.saveConfig(cfg, projectPath);
+                console.log(`All hooks enabled for ${projectPath}`);
+            }
+            break;
+        }
+        case 'disable': {
+            if (opts.hook) {
+                manager.disableHook(opts.hook, projectPath);
+                console.log(`Hook "${opts.hook}" disabled for ${projectPath}`);
+            }
+            else {
+                const cfg = manager.loadConfig(projectPath);
+                cfg.enabled = false;
+                manager.saveConfig(cfg, projectPath);
+                console.log(`All hooks disabled for ${projectPath}`);
+            }
+            break;
+        }
+        case 'list': {
+            const cfg = manager.loadConfig(projectPath);
+            console.log(`Hook configuration for ${projectPath}:`);
+            console.log(`  enabled: ${cfg.enabled}`);
+            console.log(`  onSessionStart: ${cfg.onSessionStart}`);
+            console.log(`  onSessionEnd: ${cfg.onSessionEnd}`);
+            console.log(`  onFileChange: ${cfg.onFileChange}`);
+            console.log(`  onPreCommit: ${cfg.onPreCommit}`);
+            console.log(`  onPreCompact: ${cfg.onPreCompact}`);
+            console.log(`  onPostCompact: ${cfg.onPostCompact}`);
+            break;
+        }
+        case 'profile': {
+            const profileName = opts.hook || 'standard';
+            const cfg = manager.loadConfig(projectPath);
+            cfg.enabled = true;
+            if (profileName === 'minimal') {
+                cfg.onSessionStart = false;
+                cfg.onSessionEnd = false;
+                cfg.onFileChange = false;
+                cfg.onPreCommit = true;
+                cfg.onPreCompact = false;
+                cfg.onPostCompact = false;
+            }
+            else if (profileName === 'strict') {
+                cfg.onSessionStart = true;
+                cfg.onSessionEnd = true;
+                cfg.onFileChange = true;
+                cfg.onPreCommit = true;
+                cfg.onPreCompact = true;
+                cfg.onPostCompact = true;
+            }
+            else {
+                cfg.onSessionStart = true;
+                cfg.onSessionEnd = true;
+                cfg.onFileChange = false;
+                cfg.onPreCommit = true;
+                cfg.onPreCompact = false;
+                cfg.onPostCompact = false;
+            }
+            manager.saveConfig(cfg, projectPath);
+            console.log(`Hook profile set to "${profileName}" for ${projectPath}`);
+            break;
+        }
+        default:
+            console.log(`Unknown action: ${action}. Use: enable, disable, list, profile`);
+    }
+});
+const securityCmd = program
+    .command('security')
+    .description('Security scanning and dependency audit');
+securityCmd
+    .command('scan')
+    .description('Scan project for security vulnerabilities')
+    .option('-p, --path <path>', 'Repository root path', '.')
+    .option('--scope <scope>', 'all|secrets|injection|unicode|dangerous|config|data-leak|crypto|auth|file-access', 'all')
+    .option('--severity <severity>', 'CRITICAL|HIGH|MEDIUM|LOW')
+    .option('--format <format>', 'table|json|markdown', 'table')
+    .action(async (opts) => {
+    const root = resolve(opts.path);
+    const { loadRules } = await import('./security/rules.js');
+    const { readFileSync, existsSync, readdirSync } = await import('node:fs');
+    const { join: pathJoin, relative: pathRelative } = await import('node:path');
+    const rules = loadRules();
+    const filtered = rules.filter(r => {
+        if (opts.scope !== 'all' && r.category !== opts.scope)
+            return false;
+        if (opts.severity) {
+            const sevOrder = { CRITICAL: 4, HIGH: 3, MEDIUM: 2, LOW: 1 };
+            if ((sevOrder[r.severity] || 0) < (sevOrder[opts.severity] || 0))
+                return false;
+        }
+        return r.enabled;
+    });
+    console.log(`Security Scan — ${filtered.length} active rules, scope: ${opts.scope}\n`);
+    const findings = [];
+    const walkDir = (dir) => {
+        try {
+            for (const entry of readdirSync(dir, { withFileTypes: true })) {
+                const fullPath = pathJoin(dir, entry.name);
+                if (entry.isDirectory()) {
+                    if (['node_modules', '.git', 'dist', 'build', '.next'].includes(entry.name))
+                        continue;
+                    walkDir(fullPath);
+                }
+                else if (entry.isFile()) {
+                    const ext = entry.name.split('.').pop() || '';
+                    if (!['ts', 'js', 'tsx', 'jsx', 'py', 'go', 'rs', 'java', 'rb', 'php', 'sql', 'sh', 'yaml', 'yml', 'json', 'html', 'css'].includes(ext))
+                        continue;
+                    try {
+                        const content = readFileSync(fullPath, 'utf-8');
+                        const lines = content.split('\n');
+                        for (const rule of filtered) {
+                            for (const pattern of rule.patterns) {
+                                pattern.lastIndex = 0;
+                                let match;
+                                while ((match = pattern.exec(content)) !== null) {
+                                    const lineNum = content.substring(0, match.index).split('\n').length;
+                                    findings.push({
+                                        rule: rule.id,
+                                        severity: rule.severity,
+                                        category: rule.category,
+                                        owasp: rule.owasp,
+                                        file: pathRelative(root, fullPath),
+                                        line: lineNum,
+                                        match: match[0].length > 80 ? match[0].slice(0, 77) + '...' : match[0],
+                                        fix: rule.fix,
+                                    });
+                                }
+                            }
+                        }
+                    }
+                    catch { }
+                }
+            }
+        }
+        catch { }
+    };
+    walkDir(root);
+    const bySev = {};
+    for (const f of findings) {
+        bySev[f.severity] = (bySev[f.severity] || 0) + 1;
+    }
+    console.log(`Total findings: ${findings.length}`);
+    for (const [s, c] of Object.entries(bySev)) {
+        console.log(`  ${s}: ${c}`);
+    }
+    console.log();
+    for (const f of findings.slice(0, 30)) {
+        console.log(`[${f.severity}] ${f.rule} ${f.file}:${f.line} — ${f.match}`);
+    }
+});
+securityCmd
+    .command('deps')
+    .description('Audit dependencies for known vulnerabilities')
+    .option('-p, --path <path>', 'Repository root path', '.')
+    .action(async (opts) => {
+    const root = resolve(opts.path);
+    const { auditDependencies } = await import('./security/deps.js');
+    const result = auditDependencies(root);
+    console.log(`Dependency Audit — ${result.ecosystem}`);
+    console.log(`  Total: ${result.totalDependencies} | Vulnerable: ${result.vulnerableDependencies}\n`);
+    for (const v of result.findings.slice(0, 20)) {
+        console.log(`[${v.severity}] ${v.package} — ${v.id}${v.cve ? ` (${v.cve})` : ''}`);
+        console.log(`  Affected: ${v.affectedVersions} | Fixed: ${v.fixedVersion || 'N/A'}`);
+        console.log(`  ${v.description}`);
+        console.log();
+    }
+});
+program
+    .command('watch')
+    .description('Watch files for changes and auto re-index')
+    .option('-p, --path <path>', 'Repository root path', '.')
+    .option('--debounce <ms>', 'Debounce time in ms', '1000')
+    .option('--ignore <glob>', 'Files to ignore (comma-separated)')
+    .action(async (opts) => {
+    const root = resolve(opts.path);
+    const { watch, existsSync } = await import('node:fs');
+    const { join: pathJoin } = await import('node:path');
+    console.log(`Watching ${root} for changes... (Ctrl+C to stop)`);
+    let timer = null;
+    const changedFiles = new Set();
+    const debounceMs = parseInt(opts.debounce) || 1000;
+    const ignoreList = opts.ignore ? opts.ignore.split(',') : ['node_modules', '.git', 'dist'];
+    const triggerRebuild = async () => {
+        if (changedFiles.size === 0)
+            return;
+        const files = [...changedFiles];
+        changedFiles.clear();
+        console.log(`\nRe-indexing ${files.length} changed file(s)...`);
+        const { execSync } = await import('node:child_process');
+        try {
+            execSync(`npx milens analyze -p "${root}" --force`, { stdio: 'pipe', cwd: root });
+            console.log(`✓ Index updated`);
+        }
+        catch {
+            console.log(`⚠ Re-index failed — run manually: milens analyze -p . --force`);
+        }
+    };
+    try {
+        const watcher = watch(root, { recursive: true }, (eventType, filename) => {
+            if (!filename)
+                return;
+            if (ignoreList.some((i) => filename.includes(i)))
+                return;
+            changedFiles.add(filename);
+            if (timer)
+                clearTimeout(timer);
+            timer = setTimeout(triggerRebuild, debounceMs);
+        });
+        process.on('SIGINT', () => {
+            console.log('\nWatch stopped.');
+            watcher.close();
+            process.exit(0);
+        });
+    }
+    catch {
+        console.error('File watching failed. Use `milens analyze -p . --force` to manually re-index.');
+    }
+});
 program.parse();
 // ── Helpers ──
 function deleteIndex(dbPath) {
@@ -321,7 +1037,7 @@ function deleteIndex(dbPath) {
         }
     }
 }
-function generateDashboardHtml(stats) {
+function generateDashboardHtml(stats, annotationStats, repoFilter) {
     const byToolJson = JSON.stringify(stats.byTool);
     const byDayJson = JSON.stringify(stats.byDay);
     const recentJson = JSON.stringify(stats.recentCalls);
@@ -329,401 +1045,476 @@ function generateDashboardHtml(stats) {
         ? Math.round((stats.totalTokensSaved / (stats.totalTokensOut + stats.totalTokensSaved)) * 100)
         : 0;
     const fmtNum = (n) => n >= 1_000_000 ? (n / 1_000_000).toFixed(1) + 'M' : n >= 1_000 ? (n / 1_000).toFixed(1) + 'K' : String(n);
-    return `<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>milens Dashboard</title>
-<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
-<style>
-  :root {
-    --bg: #0a0e14; --surface: #12171e; --card: #161d27; --card-hover: #1a2332;
-    --border: #1e2a3a; --border-light: #2a3a4e;
-    --text: #e2e8f0; --text-secondary: #94a3b8; --text-muted: #64748b;
-    --accent: #60a5fa; --accent-dim: #60a5fa22;
-    --green: #34d399; --green-dim: #34d39915;
-    --orange: #fbbf24; --orange-dim: #fbbf2415;
-    --purple: #a78bfa; --purple-dim: #a78bfa15;
-    --red: #f87171;
-    --radius: 16px; --radius-sm: 10px;
-  }
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-  body {
-    background: var(--bg); color: var(--text);
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    line-height: 1.5; min-height: 100vh;
-  }
-
-  /* ── Layout ── */
-  .wrapper { max-width: 1400px; margin: 0 auto; padding: 32px 24px 80px; }
-
-  /* ── Header ── */
-  .header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
-  .header-left { display: flex; align-items: center; gap: 14px; }
-  .logo { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--accent), var(--purple)); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; color: #fff; }
-  .header h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }
-  .header h1 span { color: var(--text-muted); font-weight: 400; font-size: 14px; margin-left: 8px; }
-  .header-right { display: flex; align-items: center; gap: 12px; }
-  .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
-  @keyframes pulse { 0%,80%,100% { opacity: 1; } 40% { opacity: 0.4; } }
-  .status-text { font-size: 12px; color: var(--text-muted); }
-  .refresh-btn {
-    background: var(--accent-dim); color: var(--accent); border: 1px solid var(--border);
-    border-radius: var(--radius-sm); padding: 8px 16px; cursor: pointer;
-    font-weight: 500; font-size: 13px; transition: all 0.2s;
-  }
-  .refresh-btn:hover { background: var(--accent); color: #0a0e14; }
-
-  /* ── KPI Cards ── */
-  .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
-  .kpi {
-    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
-    padding: 24px; position: relative; overflow: hidden; transition: border-color 0.2s;
-  }
-  .kpi:hover { border-color: var(--border-light); }
-  .kpi-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 16px; }
-  .kpi-icon.blue { background: var(--accent-dim); }
-  .kpi-icon.green { background: var(--green-dim); }
-  .kpi-icon.purple { background: var(--purple-dim); }
-  .kpi-icon.orange { background: var(--orange-dim); }
-  .kpi .value { font-size: 32px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
-  .kpi .value.blue { color: var(--accent); }
-  .kpi .value.green { color: var(--green); }
-  .kpi .value.purple { color: var(--purple); }
-  .kpi .value.orange { color: var(--orange); }
-  .kpi .label { color: var(--text-muted); font-size: 13px; margin-top: 6px; font-weight: 500; }
-  .kpi .sub { color: var(--text-secondary); font-size: 12px; margin-top: 4px; }
-  .kpi-glow {
-    position: absolute; top: -40px; right: -40px; width: 120px; height: 120px;
-    border-radius: 50%; opacity: 0.06; pointer-events: none;
-  }
-  .kpi-glow.blue { background: var(--accent); }
-  .kpi-glow.green { background: var(--green); }
-  .kpi-glow.purple { background: var(--purple); }
-  .kpi-glow.orange { background: var(--orange); }
-
-  /* ── Charts ── */
-  .grid-2 { display: grid; grid-template-columns: 5fr 7fr; gap: 16px; margin-bottom: 16px; }
-  .grid-full { margin-bottom: 16px; }
-  .card {
-    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
-    padding: 24px; transition: border-color 0.2s;
-  }
-  .card:hover { border-color: var(--border-light); }
-  .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
-  .card-title { font-size: 14px; font-weight: 600; color: var(--text); }
-  .card-subtitle { font-size: 12px; color: var(--text-muted); }
-
-  /* ── Chart containers ── */
-  .chart-container { position: relative; width: 100%; }
-  .chart-container.h-280 { height: 280px; }
-  .chart-container.h-300 { height: 300px; }
-
-  /* ── Top Tools Bar ── */
-  .tool-bars { display: flex; flex-direction: column; gap: 10px; }
-  .tool-bar-row { display: flex; align-items: center; gap: 12px; }
-  .tool-bar-name { width: 140px; font-size: 12px; font-family: 'SF Mono', 'Fira Code', monospace; color: var(--text-secondary); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-  .tool-bar-track { flex: 1; height: 28px; background: var(--surface); border-radius: 6px; overflow: hidden; position: relative; }
-  .tool-bar-fill { height: 100%; border-radius: 6px; display: flex; align-items: center; padding: 0 10px; font-size: 11px; font-weight: 600; color: #fff; min-width: fit-content; transition: width 0.6s ease; }
-  .tool-bar-count { font-size: 12px; color: var(--text-muted); min-width: 36px; text-align: right; }
-
-  /* ── Recent Table ── */
-  .table-wrapper { max-height: 400px; overflow-y: auto; border-radius: var(--radius-sm); }
-  .table-wrapper::-webkit-scrollbar { width: 6px; }
-  .table-wrapper::-webkit-scrollbar-track { background: transparent; }
-  .table-wrapper::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }
-  table { width: 100%; border-collapse: collapse; font-size: 13px; }
-  thead { position: sticky; top: 0; z-index: 1; }
-  th {
-    text-align: left; color: var(--text-muted); font-weight: 500; padding: 10px 16px;
-    background: var(--card); border-bottom: 1px solid var(--border); font-size: 11px;
-    text-transform: uppercase; letter-spacing: 0.5px;
-  }
-  td { padding: 10px 16px; border-bottom: 1px solid var(--border); }
-  tr:hover td { background: var(--surface); }
-  .tool-badge {
-    display: inline-flex; align-items: center; gap: 4px;
-    background: var(--accent-dim); color: var(--accent); padding: 3px 10px;
-    border-radius: 6px; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 11px; font-weight: 500;
-  }
-  .when-text { color: var(--text-muted); }
-  .duration-text { color: var(--text-secondary); font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; }
-  .saved-text { color: var(--green); font-weight: 600; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; }
-
-  /* ── Footer ── */
-  .footer { text-align: center; padding: 24px 0 0; color: var(--text-muted); font-size: 12px; }
-
-  /* ── Responsive ── */
-  @media (max-width: 1024px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } .grid-2 { grid-template-columns: 1fr; } }
-  @media (max-width: 640px) { .kpi-grid { grid-template-columns: 1fr; } .wrapper { padding: 16px 12px 80px; } }
-</style>
-</head>
-<body>
-<div class="wrapper">
-
-  <!-- Header -->
-  <div class="header">
-    <div class="header-left">
-      <div class="logo">m</div>
-      <h1>milens <span>dashboard</span></h1>
-    </div>
-    <div class="header-right">
-      <div class="status-dot"></div>
-      <span class="status-text">Live</span>
-      <button class="refresh-btn" onclick="refreshData()">&#8635; Refresh</button>
-    </div>
-  </div>
-
-  <!-- KPIs -->
-  <div class="kpi-grid">
-    <div class="kpi">
-      <div class="kpi-icon blue">&#9881;</div>
-      <div class="value blue" id="kpi-calls">${fmtNum(stats.totalCalls)}</div>
-      <div class="label">Tool Calls</div>
-      <div class="sub" id="kpi-calls-sub">${stats.totalCalls.toLocaleString()} total invocations</div>
-      <div class="kpi-glow blue"></div>
-    </div>
-    <div class="kpi">
-      <div class="kpi-icon green">&#9889;</div>
-      <div class="value green" id="kpi-saved">${fmtNum(stats.totalTokensSaved)}</div>
-      <div class="label">Tokens Saved</div>
-      <div class="sub" id="kpi-saved-sub">${stats.totalTokensSaved.toLocaleString()} tokens not wasted</div>
-      <div class="kpi-glow green"></div>
-    </div>
-    <div class="kpi">
-      <div class="kpi-icon purple">&#9733;</div>
-      <div class="value purple" id="kpi-pct">${savingsPercent}%</div>
-      <div class="label">Token Efficiency</div>
-      <div class="sub">${fmtNum(stats.totalTokensOut)} returned vs ${fmtNum(stats.totalTokensSaved)} saved</div>
-      <div class="kpi-glow purple"></div>
-    </div>
-    <div class="kpi">
-      <div class="kpi-icon orange">&#9201;</div>
-      <div class="value orange" id="kpi-avg">${stats.totalCalls > 0 ? Math.round(stats.totalDurationMs / stats.totalCalls) : 0}ms</div>
-      <div class="label">Avg Response Time</div>
-      <div class="sub">${(stats.totalDurationMs / 1000).toFixed(1)}s total processing</div>
-      <div class="kpi-glow orange"></div>
-    </div>
-  </div>
-
-  <!-- Charts Row -->
-  <div class="grid-2">
-    <div class="card">
-      <div class="card-header">
-        <div>
-          <div class="card-title">Top Tools</div>
-          <div class="card-subtitle">By number of calls</div>
-        </div>
-      </div>
-      <div id="toolBars" class="tool-bars"></div>
-    </div>
-    <div class="card">
-      <div class="card-header">
-        <div>
-          <div class="card-title">Daily Activity</div>
-          <div class="card-subtitle">Calls &amp; tokens saved over the last 30 days</div>
-        </div>
-      </div>
-      <div class="chart-container h-280"><canvas id="dayChart"></canvas></div>
-    </div>
-  </div>
-
-  <!-- Savings Distribution -->
-  <div class="grid-2" style="grid-template-columns: 7fr 5fr;">
-    <div class="card">
-      <div class="card-header">
-        <div>
-          <div class="card-title">Recent Tool Calls</div>
-          <div class="card-subtitle">Last 50 invocations</div>
-        </div>
-      </div>
-      <div class="table-wrapper">
-        <table>
-          <thead><tr><th>Tool</th><th>When</th><th>Duration</th><th style="text-align:right">Tokens Saved</th></tr></thead>
-          <tbody id="recentBody"></tbody>
-        </table>
-      </div>
-    </div>
-    <div class="card">
-      <div class="card-header">
-        <div>
-          <div class="card-title">Savings by Tool</div>
-          <div class="card-subtitle">Token savings distribution</div>
-        </div>
-      </div>
-      <div class="chart-container h-300"><canvas id="savingsChart"></canvas></div>
-    </div>
-  </div>
-
-  <div class="footer">milens &middot; auto-refreshes every 30s</div>
-</div>
-
-<script>
-const COLORS = ['#60a5fa','#34d399','#fbbf24','#a78bfa','#f87171','#2dd4bf','#818cf8','#fb923c','#e879f9','#38bdf8','#4ade80','#facc15','#f472b6','#22d3ee','#a3e635','#c084fc'];
-const BAR_COLORS = ['#60a5fa','#34d399','#fbbf24','#a78bfa','#f87171','#2dd4bf','#818cf8','#fb923c','#e879f9','#38bdf8'];
-let byTool = ${byToolJson};
-let byDay = ${byDayJson};
-
-function fmtK(n) { return n >= 1e6 ? (n/1e6).toFixed(1)+'M' : n >= 1e3 ? (n/1e3).toFixed(1)+'K' : n; }
-
-/* ── Top Tools Horizontal Bars ── */
-function renderToolBars() {
-  const el = document.getElementById('toolBars');
-  const sorted = [...byTool].sort((a,b) => b.calls - a.calls).slice(0, 10);
-  const maxCalls = sorted[0]?.calls || 1;
-  el.innerHTML = sorted.map((t, i) => {
-    const pct = Math.max(8, (t.calls / maxCalls) * 100);
-    const col = BAR_COLORS[i % BAR_COLORS.length];
-    return \`<div class="tool-bar-row">
-      <span class="tool-bar-name">\${t.tool}</span>
-      <div class="tool-bar-track">
-        <div class="tool-bar-fill" style="width:\${pct}%;background:linear-gradient(90deg,\${col}dd,\${col}88)">\${t.calls}</div>
-      </div>
-      <span class="tool-bar-count">\${fmtK(t.tokensSaved)}</span>
-    </div>\`;
-  }).join('');
-}
-
-/* ── Daily Activity Chart ── */
-let dayChartInstance = null;
-function renderDayChart() {
-  if (dayChartInstance) dayChartInstance.destroy();
-  const ctx = document.getElementById('dayChart');
-  const labels = byDay.map(d => {
-    const parts = d.date.split('-');
-    return parts[1] + '/' + parts[2];
-  });
-  dayChartInstance = new Chart(ctx, {
-    type: 'bar',
-    data: {
-      labels,
-      datasets: [
-        {
-          label: 'Calls', data: byDay.map(d => d.calls),
-          backgroundColor: '#60a5fa44', hoverBackgroundColor: '#60a5fa88',
-          borderRadius: 4, borderSkipped: false, yAxisID: 'y', barPercentage: 0.7,
-        },
-        {
-          label: 'Tokens Saved', data: byDay.map(d => d.tokensSaved),
-          type: 'line', borderColor: '#34d399', pointBackgroundColor: '#34d399',
-          pointRadius: 2, pointHoverRadius: 5, borderWidth: 2.5,
-          yAxisID: 'y1', tension: 0.4, fill: { target: 'origin', above: '#34d39910' },
-        },
-      ],
-    },
-    options: {
-      responsive: true, maintainAspectRatio: false,
-      interaction: { mode: 'index', intersect: false },
-      scales: {
-        x: {
-          ticks: { color: '#64748b', font: { size: 11 }, maxRotation: 0, autoSkip: true, maxTicksLimit: 15 },
-          grid: { display: false },
-        },
-        y: {
-          position: 'left', ticks: { color: '#60a5fa', font: { size: 11 } },
-          grid: { color: '#1e2a3a' }, title: { display: true, text: 'Calls', color: '#60a5fa', font: { size: 11 } },
-        },
-        y1: {
-          position: 'right', ticks: { color: '#34d399', font: { size: 11 }, callback: v => fmtK(v) },
-          grid: { drawOnChartArea: false }, title: { display: true, text: 'Tokens Saved', color: '#34d399', font: { size: 11 } },
-        },
-      },
-      plugins: {
-        legend: { labels: { color: '#94a3b8', boxWidth: 12, usePointStyle: true, padding: 16 } },
-        tooltip: {
-          backgroundColor: '#1e293b', borderColor: '#334155', borderWidth: 1, titleColor: '#e2e8f0',
-          bodyColor: '#94a3b8', cornerRadius: 8, padding: 12,
-          callbacks: { label: ctx => ctx.dataset.label + ': ' + (ctx.datasetIndex === 1 ? fmtK(ctx.raw) : ctx.raw) },
-        },
-      },
-    },
-  });
-}
-
-/* ── Savings Doughnut ── */
-function renderSavingsChart() {
-  const ctx = document.getElementById('savingsChart');
-  const sorted = [...byTool].sort((a,b) => b.tokensSaved - a.tokensSaved);
-  const top = sorted.slice(0, 8);
-  const rest = sorted.slice(8);
-  if (rest.length) top.push({ tool: 'others', tokensSaved: rest.reduce((s,t) => s + t.tokensSaved, 0), calls: 0 });
-  new Chart(ctx, {
-    type: 'doughnut',
-    data: {
-      labels: top.map(t => t.tool),
-      datasets: [{
-        data: top.map(t => t.tokensSaved),
-        backgroundColor: top.map((_, i) => COLORS[i]),
-        borderWidth: 0, hoverOffset: 6,
-      }],
-    },
-    options: {
-      responsive: true, cutout: '68%',
-      plugins: {
-        legend: { position: 'right', labels: { color: '#94a3b8', font: { size: 12 }, padding: 8, usePointStyle: true, pointStyleWidth: 10 } },
-        tooltip: {
-          backgroundColor: '#1e293b', borderColor: '#334155', borderWidth: 1, titleColor: '#e2e8f0',
-          bodyColor: '#94a3b8', cornerRadius: 8, padding: 12,
-          callbacks: { label: ctx => ' ' + ctx.label + ': ' + fmtK(ctx.raw) + ' tokens' },
-        },
-      },
-    },
-  });
-}
-
-/* ── Recent Calls Table ── */
-function renderRecent(data) {
-  const tbody = document.getElementById('recentBody');
-  tbody.innerHTML = data.map(r => {
-    const ago = timeAgo(r.calledAt);
-    return \`<tr>
-      <td><span class="tool-badge">\${r.tool}</span></td>
-      <td class="when-text">\${ago}</td>
-      <td class="duration-text">\${r.durationMs}ms</td>
-      <td class="saved-text" style="text-align:right">+\${r.tokensSaved.toLocaleString()}</td>
-    </tr>\`;
-  }).join('');
-}
-
-function timeAgo(iso) {
-  const d = new Date(iso.includes('T') ? iso : iso + 'Z');
-  const s = Math.floor((Date.now() - d.getTime()) / 1000);
-  if (s < 0) return 'just now';
-  if (s < 60) return s + 's ago';
-  if (s < 3600) return Math.floor(s/60) + 'm ago';
-  if (s < 86400) return Math.floor(s/3600) + 'h ago';
-  return Math.floor(s/86400) + 'd ago';
-}
-
-/* ── Refresh ── */
-async function refreshData() {
-  const btn = document.querySelector('.refresh-btn');
-  btn.textContent = '⟳ Loading...';
-  try {
-    const res = await fetch('/api/stats');
-    const data = await res.json();
-    byTool = data.byTool; byDay = data.byDay;
-    document.getElementById('kpi-calls').textContent = fmtK(data.totalCalls);
-    document.getElementById('kpi-calls-sub').textContent = data.totalCalls.toLocaleString() + ' total invocations';
-    document.getElementById('kpi-saved').textContent = fmtK(data.totalTokensSaved);
-    document.getElementById('kpi-saved-sub').textContent = data.totalTokensSaved.toLocaleString() + ' tokens not wasted';
-    const pct = data.totalTokensOut > 0 ? Math.round((data.totalTokensSaved / (data.totalTokensOut + data.totalTokensSaved)) * 100) : 0;
-    document.getElementById('kpi-pct').textContent = pct + '%';
-    document.getElementById('kpi-avg').textContent = (data.totalCalls > 0 ? Math.round(data.totalDurationMs / data.totalCalls) : 0) + 'ms';
-    renderToolBars(); renderDayChart(); renderRecent(data.recentCalls);
-  } catch(e) { console.error('Refresh failed', e); }
-  btn.innerHTML = '&#8635; Refresh';
-}
-
-/* ── Init ── */
-renderToolBars();
-renderDayChart();
-renderSavingsChart();
-renderRecent(${recentJson});
-setInterval(refreshData, 30000);
-</script>
-</body>
+    const confBars = annotationStats ? renderConfBars(annotationStats.confidenceBands, annotationStats.total) : '';
+    const recentAnnots = annotationStats ? annotationStats.recent.map(a => `
+          <li>
+            <div><span class="annot-sym">${a.symbol}</span><span class="annot-key">${a.key}</span></div>
+            <span class="annot-conf ${a.confidence >= 0.7 ? 'hi' : a.confidence >= 0.4 ? 'md' : 'lo'}">${(a.confidence * 100).toFixed(0)}%</span>
+          </li>`).join('') : '';
+    const learningStats = annotationStats ? `
+    <div class="card learning-section">
+      <div class="card-header">
+        <div><div class="card-title">Confidence Distribution</div><div class="card-subtitle">${annotationStats.total} total annotations</div></div>
+      </div>
+      <div class="tool-bars">${confBars}</div>
+    </div>
+    <div class="card learning-section">
+      <div class="card-header">
+        <div><div class="card-title">Recent Annotations</div><div class="card-subtitle">Last ${annotationStats.recent.length}</div></div>
+      </div>
+      <ul class="annot-list">${recentAnnots}</ul>
+    </div>
+  ` : '';
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>milens Dashboard</title>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
+<style>
+  :root {
+    --bg: #0a0e14; --surface: #12171e; --card: #161d27; --card-hover: #1a2332;
+    --border: #1e2a3a; --border-light: #2a3a4e;
+    --text: #e2e8f0; --text-secondary: #94a3b8; --text-muted: #64748b;
+    --accent: #60a5fa; --accent-dim: #60a5fa22;
+    --green: #34d399; --green-dim: #34d39915;
+    --orange: #fbbf24; --orange-dim: #fbbf2415;
+    --purple: #a78bfa; --purple-dim: #a78bfa15;
+    --red: #f87171;
+    --radius: 16px; --radius-sm: 10px;
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    background: var(--bg); color: var(--text);
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    line-height: 1.5; min-height: 100vh;
+  }
+
+  /* ── Layout ── */
+  .wrapper { max-width: 1400px; margin: 0 auto; padding: 32px 24px 80px; }
+
+  /* ── Header ── */
+  .header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
+  .header-left { display: flex; align-items: center; gap: 14px; }
+  .logo { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--accent), var(--purple)); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; color: #fff; }
+  .header h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }
+  .header h1 span { color: var(--text-muted); font-weight: 400; font-size: 14px; margin-left: 8px; }
+  .header-right { display: flex; align-items: center; gap: 12px; }
+  .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
+  @keyframes pulse { 0%,80%,100% { opacity: 1; } 40% { opacity: 0.4; } }
+  .status-text { font-size: 12px; color: var(--text-muted); }
+  .refresh-btn {
+    background: var(--accent-dim); color: var(--accent); border: 1px solid var(--border);
+    border-radius: var(--radius-sm); padding: 8px 16px; cursor: pointer;
+    font-weight: 500; font-size: 13px; transition: all 0.2s;
+  }
+  .refresh-btn:hover { background: var(--accent); color: #0a0e14; }
+
+  /* ── KPI Cards ── */
+  .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
+  .kpi {
+    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
+    padding: 24px; position: relative; overflow: hidden; transition: border-color 0.2s;
+  }
+  .kpi:hover { border-color: var(--border-light); }
+  .kpi-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 16px; }
+  .kpi-icon.blue { background: var(--accent-dim); }
+  .kpi-icon.green { background: var(--green-dim); }
+  .kpi-icon.purple { background: var(--purple-dim); }
+  .kpi-icon.orange { background: var(--orange-dim); }
+  .kpi .value { font-size: 32px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
+  .kpi .value.blue { color: var(--accent); }
+  .kpi .value.green { color: var(--green); }
+  .kpi .value.purple { color: var(--purple); }
+  .kpi .value.orange { color: var(--orange); }
+  .kpi .label { color: var(--text-muted); font-size: 13px; margin-top: 6px; font-weight: 500; }
+  .kpi .sub { color: var(--text-secondary); font-size: 12px; margin-top: 4px; }
+  .kpi-glow {
+    position: absolute; top: -40px; right: -40px; width: 120px; height: 120px;
+    border-radius: 50%; opacity: 0.06; pointer-events: none;
+  }
+  .kpi-glow.blue { background: var(--accent); }
+  .kpi-glow.green { background: var(--green); }
+  .kpi-glow.purple { background: var(--purple); }
+  .kpi-glow.orange { background: var(--orange); }
+
+  /* ── Charts ── */
+  .grid-2 { display: grid; grid-template-columns: 5fr 7fr; gap: 16px; margin-bottom: 16px; }
+  .grid-full { margin-bottom: 16px; }
+  .card {
+    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
+    padding: 24px; transition: border-color 0.2s;
+  }
+  .card:hover { border-color: var(--border-light); }
+  .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
+  .card-title { font-size: 14px; font-weight: 600; color: var(--text); }
+  .card-subtitle { font-size: 12px; color: var(--text-muted); }
+
+  /* ── Chart containers ── */
+  .chart-container { position: relative; width: 100%; }
+  .chart-container.h-280 { height: 280px; }
+  .chart-container.h-300 { height: 300px; }
+
+  /* ── Top Tools Bar ── */
+  .tool-bars { display: flex; flex-direction: column; gap: 10px; }
+  .tool-bar-row { display: flex; align-items: center; gap: 12px; }
+  .tool-bar-name { width: 140px; font-size: 12px; font-family: 'SF Mono', 'Fira Code', monospace; color: var(--text-secondary); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .tool-bar-track { flex: 1; height: 28px; background: var(--surface); border-radius: 6px; overflow: hidden; position: relative; }
+  .tool-bar-fill { height: 100%; border-radius: 6px; display: flex; align-items: center; padding: 0 10px; font-size: 11px; font-weight: 600; color: #fff; min-width: fit-content; transition: width 0.6s ease; }
+  .tool-bar-count { font-size: 12px; color: var(--text-muted); min-width: 36px; text-align: right; }
+
+  /* ── Recent Table ── */
+  .table-wrapper { max-height: 400px; overflow-y: auto; border-radius: var(--radius-sm); }
+  .table-wrapper::-webkit-scrollbar { width: 6px; }
+  .table-wrapper::-webkit-scrollbar-track { background: transparent; }
+  .table-wrapper::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }
+  table { width: 100%; border-collapse: collapse; font-size: 13px; }
+  thead { position: sticky; top: 0; z-index: 1; }
+  th {
+    text-align: left; color: var(--text-muted); font-weight: 500; padding: 10px 16px;
+    background: var(--card); border-bottom: 1px solid var(--border); font-size: 11px;
+    text-transform: uppercase; letter-spacing: 0.5px;
+  }
+  td { padding: 10px 16px; border-bottom: 1px solid var(--border); }
+  tr:hover td { background: var(--surface); }
+  .tool-badge {
+    display: inline-flex; align-items: center; gap: 4px;
+    background: var(--accent-dim); color: var(--accent); padding: 3px 10px;
+    border-radius: 6px; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 11px; font-weight: 500;
+  }
+  .when-text { color: var(--text-muted); }
+  .duration-text { color: var(--text-secondary); font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; }
+  .saved-text { color: var(--green); font-weight: 600; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; }
+
+  /* ── Footer ── */
+  .footer { text-align: center; padding: 24px 0 0; color: var(--text-muted); font-size: 12px; }
+
+  /* ── Tabs ── */
+  .tab-nav { display: flex; gap: 4px; margin-bottom: 28px; border-bottom: 2px solid var(--border); padding-bottom: 0; }
+  .tab { padding: 10px 24px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.2s; background: none; border-top: none; border-left: none; border-right: none; outline: none; }
+  .tab:hover { color: var(--text-secondary); }
+  .tab.active { color: var(--accent); border-bottom-color: var(--accent); }
+  .tab-content { display: none; }
+  .tab-content.active { display: block; }
+
+  /* ── Learning ── */
+  .suggestion-box { background: var(--accent-dim); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 20px; text-align: center; margin-bottom: 20px; }
+  .suggestion-box code { background: var(--surface); padding: 2px 8px; border-radius: 4px; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 13px; color: var(--accent); }
+  .learning-section { margin-bottom: 16px; }
+  .annot-list { list-style: none; padding: 0; }
+  .annot-list li { padding: 10px 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
+  .annot-list li:last-child { border-bottom: none; }
+  .annot-sym { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 13px; color: var(--accent); }
+  .annot-key { font-size: 11px; color: var(--text-muted); background: var(--surface); padding: 2px 8px; border-radius: 4px; margin-left: 8px; }
+  .annot-conf { font-size: 12px; font-weight: 600; }
+  .annot-conf.hi { color: var(--green); }
+  .annot-conf.md { color: var(--orange); }
+  .annot-conf.lo { color: var(--red); }
+
+  /* ── Responsive ── */
+  @media (max-width: 1024px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } .grid-2 { grid-template-columns: 1fr; } }
+  @media (max-width: 640px) { .kpi-grid { grid-template-columns: 1fr; } .wrapper { padding: 16px 12px 80px; } }
+</style>
+</head>
+<body>
+<div class="wrapper">
+
+  <!-- Header -->
+  <div class="header">
+    <div class="header-left">
+      <div class="logo">m</div>
+      <h1>milens <span>dashboard</span></h1>
+    </div>
+    <div class="header-right">
+      <span class="repo-badge" style="background:rgba(88,166,255,0.12);color:#58a6ff;border:1px solid rgba(88,166,255,0.25);border-radius:20px;padding:4px 12px;font-size:0.78em;font-weight:600;margin-right:12px;">${repoFilter ? repoFilter.replace(/\\\\/g, '/').split('/').pop() || repoFilter : 'All Repos'}</span>
+      <div class="status-dot"></div>
+      <span class="status-text">Live</span>
+      <button class="refresh-btn" onclick="refreshData()">&#8635; Refresh</button>
+    </div>
+  </div>
+
+  <!-- Tab Navigation -->
+  <div class="tab-nav">
+    <button class="tab active" data-tab="usage" onclick="switchTab('usage')">Usage Analytics</button>
+    <button class="tab" data-tab="learning" onclick="switchTab('learning')">Learning</button>
+  </div>
+
+  <div id="tab-usage" class="tab-content active">
+
+  <!-- KPIs -->
+  <div class="kpi-grid">
+    <div class="kpi">
+      <div class="kpi-icon blue">&#9881;</div>
+      <div class="value blue" id="kpi-calls">${fmtNum(stats.totalCalls)}</div>
+      <div class="label">Tool Calls</div>
+      <div class="sub" id="kpi-calls-sub">${stats.totalCalls.toLocaleString()} total invocations</div>
+      <div class="kpi-glow blue"></div>
+    </div>
+    <div class="kpi">
+      <div class="kpi-icon green">&#9889;</div>
+      <div class="value green" id="kpi-saved">${fmtNum(stats.totalTokensSaved)}</div>
+      <div class="label">Tokens Saved</div>
+      <div class="sub" id="kpi-saved-sub">${stats.totalTokensSaved.toLocaleString()} tokens not wasted</div>
+      <div class="kpi-glow green"></div>
+    </div>
+    <div class="kpi">
+      <div class="kpi-icon purple">&#9733;</div>
+      <div class="value purple" id="kpi-pct">${savingsPercent}%</div>
+      <div class="label">Token Efficiency</div>
+      <div class="sub">${fmtNum(stats.totalTokensOut)} returned vs ${fmtNum(stats.totalTokensSaved)} saved</div>
+      <div class="kpi-glow purple"></div>
+    </div>
+    <div class="kpi">
+      <div class="kpi-icon orange">&#9201;</div>
+      <div class="value orange" id="kpi-avg">${stats.totalCalls > 0 ? Math.round(stats.totalDurationMs / stats.totalCalls) : 0}ms</div>
+      <div class="label">Avg Response Time</div>
+      <div class="sub">${(stats.totalDurationMs / 1000).toFixed(1)}s total processing</div>
+      <div class="kpi-glow orange"></div>
+    </div>
+  </div>
+
+  <!-- Charts Row -->
+  <div class="grid-2">
+    <div class="card">
+      <div class="card-header">
+        <div>
+          <div class="card-title">Top Tools</div>
+          <div class="card-subtitle">By number of calls</div>
+        </div>
+      </div>
+      <div id="toolBars" class="tool-bars"></div>
+    </div>
+    <div class="card">
+      <div class="card-header">
+        <div>
+          <div class="card-title">Daily Activity</div>
+          <div class="card-subtitle">Calls &amp; tokens saved over the last 30 days</div>
+        </div>
+      </div>
+      <div class="chart-container h-280"><canvas id="dayChart"></canvas></div>
+    </div>
+  </div>
+
+  <!-- Savings Distribution -->
+  <div class="grid-2" style="grid-template-columns: 7fr 5fr;">
+    <div class="card">
+      <div class="card-header">
+        <div>
+          <div class="card-title">Recent Tool Calls</div>
+          <div class="card-subtitle">Last 50 invocations</div>
+        </div>
+      </div>
+      <div class="table-wrapper">
+        <table>
+          <thead><tr><th>Tool</th><th>When</th><th>Duration</th><th style="text-align:right">Tokens Saved</th></tr></thead>
+          <tbody id="recentBody"></tbody>
+        </table>
+      </div>
+    </div>
+    <div class="card">
+      <div class="card-header">
+        <div>
+          <div class="card-title">Savings by Tool</div>
+          <div class="card-subtitle">Token savings distribution</div>
+        </div>
+      </div>
+      <div class="chart-container h-300"><canvas id="savingsChart"></canvas></div>
+    </div>
+  </div>
+
+  <div class="footer">milens &middot; auto-refreshes every 30s</div>
+</div><!-- /tab-usage -->
+
+<div id="tab-learning" class="tab-content">
+  <div class="suggestion-box">
+    <h3 style="margin-bottom:8px;font-weight:600;">Metrics &amp; Insights</h3>
+    <p style="color:var(--text-secondary);font-size:13px;">Run <code>milens metrics</code> for a full code-quality metrics report.</p>
+  </div>
+  ${learningStats}
+</div>
+
+</div><!-- /wrapper -->
+
+<script>
+const COLORS = ['#60a5fa','#34d399','#fbbf24','#a78bfa','#f87171','#2dd4bf','#818cf8','#fb923c','#e879f9','#38bdf8','#4ade80','#facc15','#f472b6','#22d3ee','#a3e635','#c084fc'];
+const BAR_COLORS = ['#60a5fa','#34d399','#fbbf24','#a78bfa','#f87171','#2dd4bf','#818cf8','#fb923c','#e879f9','#38bdf8'];
+let byTool = ${byToolJson};
+let byDay = ${byDayJson};
+
+function fmtK(n) { return n >= 1e6 ? (n/1e6).toFixed(1)+'M' : n >= 1e3 ? (n/1e3).toFixed(1)+'K' : n; }
+
+/* ── Top Tools Horizontal Bars ── */
+function renderToolBars() {
+  const el = document.getElementById('toolBars');
+  const sorted = [...byTool].sort((a,b) => b.calls - a.calls).slice(0, 10);
+  const maxCalls = sorted[0]?.calls || 1;
+  el.innerHTML = sorted.map((t, i) => {
+    const pct = Math.max(8, (t.calls / maxCalls) * 100);
+    const col = BAR_COLORS[i % BAR_COLORS.length];
+    return \`<div class="tool-bar-row">
+      <span class="tool-bar-name">\${t.tool}</span>
+      <div class="tool-bar-track">
+        <div class="tool-bar-fill" style="width:\${pct}%;background:linear-gradient(90deg,\${col}dd,\${col}88)">\${t.calls}</div>
+      </div>
+      <span class="tool-bar-count">\${fmtK(t.tokensSaved)}</span>
+    </div>\`;
+  }).join('');
+}
+
+/* ── Daily Activity Chart ── */
+let dayChartInstance = null;
+function renderDayChart() {
+  if (dayChartInstance) dayChartInstance.destroy();
+  const ctx = document.getElementById('dayChart');
+  const labels = byDay.map(d => {
+    const parts = d.date.split('-');
+    return parts[1] + '/' + parts[2];
+  });
+  dayChartInstance = new Chart(ctx, {
+    type: 'bar',
+    data: {
+      labels,
+      datasets: [
+        {
+          label: 'Calls', data: byDay.map(d => d.calls),
+          backgroundColor: '#60a5fa44', hoverBackgroundColor: '#60a5fa88',
+          borderRadius: 4, borderSkipped: false, yAxisID: 'y', barPercentage: 0.7,
+        },
+        {
+          label: 'Tokens Saved', data: byDay.map(d => d.tokensSaved),
+          type: 'line', borderColor: '#34d399', pointBackgroundColor: '#34d399',
+          pointRadius: 2, pointHoverRadius: 5, borderWidth: 2.5,
+          yAxisID: 'y1', tension: 0.4, fill: { target: 'origin', above: '#34d39910' },
+        },
+      ],
+    },
+    options: {
+      responsive: true, maintainAspectRatio: false,
+      interaction: { mode: 'index', intersect: false },
+      scales: {
+        x: {
+          ticks: { color: '#64748b', font: { size: 11 }, maxRotation: 0, autoSkip: true, maxTicksLimit: 15 },
+          grid: { display: false },
+        },
+        y: {
+          position: 'left', ticks: { color: '#60a5fa', font: { size: 11 } },
+          grid: { color: '#1e2a3a' }, title: { display: true, text: 'Calls', color: '#60a5fa', font: { size: 11 } },
+        },
+        y1: {
+          position: 'right', ticks: { color: '#34d399', font: { size: 11 }, callback: v => fmtK(v) },
+          grid: { drawOnChartArea: false }, title: { display: true, text: 'Tokens Saved', color: '#34d399', font: { size: 11 } },
+        },
+      },
+      plugins: {
+        legend: { labels: { color: '#94a3b8', boxWidth: 12, usePointStyle: true, padding: 16 } },
+        tooltip: {
+          backgroundColor: '#1e293b', borderColor: '#334155', borderWidth: 1, titleColor: '#e2e8f0',
+          bodyColor: '#94a3b8', cornerRadius: 8, padding: 12,
+          callbacks: { label: ctx => ctx.dataset.label + ': ' + (ctx.datasetIndex === 1 ? fmtK(ctx.raw) : ctx.raw) },
+        },
+      },
+    },
+  });
+}
+
+/* ── Savings Doughnut ── */
+function renderSavingsChart() {
+  const ctx = document.getElementById('savingsChart');
+  const sorted = [...byTool].sort((a,b) => b.tokensSaved - a.tokensSaved);
+  const top = sorted.slice(0, 8);
+  const rest = sorted.slice(8);
+  if (rest.length) top.push({ tool: 'others', tokensSaved: rest.reduce((s,t) => s + t.tokensSaved, 0), calls: 0 });
+  new Chart(ctx, {
+    type: 'doughnut',
+    data: {
+      labels: top.map(t => t.tool),
+      datasets: [{
+        data: top.map(t => t.tokensSaved),
+        backgroundColor: top.map((_, i) => COLORS[i]),
+        borderWidth: 0, hoverOffset: 6,
+      }],
+    },
+    options: {
+      responsive: true, cutout: '68%',
+      plugins: {
+        legend: { position: 'right', labels: { color: '#94a3b8', font: { size: 12 }, padding: 8, usePointStyle: true, pointStyleWidth: 10 } },
+        tooltip: {
+          backgroundColor: '#1e293b', borderColor: '#334155', borderWidth: 1, titleColor: '#e2e8f0',
+          bodyColor: '#94a3b8', cornerRadius: 8, padding: 12,
+          callbacks: { label: ctx => ' ' + ctx.label + ': ' + fmtK(ctx.raw) + ' tokens' },
+        },
+      },
+    },
+  });
+}
+
+/* ── Recent Calls Table ── */
+function renderRecent(data) {
+  const tbody = document.getElementById('recentBody');
+  tbody.innerHTML = data.map(r => {
+    const ago = timeAgo(r.calledAt);
+    return \`<tr>
+      <td><span class="tool-badge">\${r.tool}</span></td>
+      <td class="when-text">\${ago}</td>
+      <td class="duration-text">\${r.durationMs}ms</td>
+      <td class="saved-text" style="text-align:right">+\${r.tokensSaved.toLocaleString()}</td>
+    </tr>\`;
+  }).join('');
+}
+
+function timeAgo(iso) {
+  const d = new Date(iso.includes('T') ? iso : iso + 'Z');
+  const s = Math.floor((Date.now() - d.getTime()) / 1000);
+  if (s < 0) return 'just now';
+  if (s < 60) return s + 's ago';
+  if (s < 3600) return Math.floor(s/60) + 'm ago';
+  if (s < 86400) return Math.floor(s/3600) + 'h ago';
+  return Math.floor(s/86400) + 'd ago';
+}
+
+/* ── Refresh ── */
+async function refreshData() {
+  const btn = document.querySelector('.refresh-btn');
+  btn.textContent = '⟳ Loading...';
+  try {
+    const res = await fetch('/api/stats');
+    const data = await res.json();
+    byTool = data.byTool; byDay = data.byDay;
+    document.getElementById('kpi-calls').textContent = fmtK(data.totalCalls);
+    document.getElementById('kpi-calls-sub').textContent = data.totalCalls.toLocaleString() + ' total invocations';
+    document.getElementById('kpi-saved').textContent = fmtK(data.totalTokensSaved);
+    document.getElementById('kpi-saved-sub').textContent = data.totalTokensSaved.toLocaleString() + ' tokens not wasted';
+    const pct = data.totalTokensOut > 0 ? Math.round((data.totalTokensSaved / (data.totalTokensOut + data.totalTokensSaved)) * 100) : 0;
+    document.getElementById('kpi-pct').textContent = pct + '%';
+    document.getElementById('kpi-avg').textContent = (data.totalCalls > 0 ? Math.round(data.totalDurationMs / data.totalCalls) : 0) + 'ms';
+    renderToolBars(); renderDayChart(); renderRecent(data.recentCalls);
+  } catch(e) { console.error('Refresh failed', e); }
+  btn.innerHTML = '&#8635; Refresh';
+}
+
+/* ── Tab Switching ── */
+function switchTab(tab) {
+  document.querySelectorAll('.tab').forEach(t => t.classList.toggle('active', t.dataset.tab === tab));
+  document.querySelectorAll('.tab-content').forEach(c => c.classList.toggle('active', c.id === 'tab-' + tab));
+}
+
+/* ── Init ── */
+renderToolBars();
+renderDayChart();
+renderSavingsChart();
+renderRecent(${recentJson});
+setInterval(refreshData, 30000);
+</script>
+</body>
 </html>`;
 }
+function renderConfBars(bands, total) {
+    const labels = ['0.0–0.4', '0.4–0.7', '0.7–0.9', '0.9–1.0'];
+    const colors = ['#f87171', '#fbbf24', '#60a5fa', '#34d399'];
+    return labels.map((label, i) => {
+        const pct = total > 0 ? (bands[i] / total) * 100 : 0;
+        return '<div class="tool-bar-row"><span class="tool-bar-name">' + label + '</span><div class="tool-bar-track"><div class="tool-bar-fill" style="width:' + Math.max(4, pct) + '%;background:' + colors[i] + 'dd">' + bands[i] + '</div></div></div>';
+    }).join('');
+}
 //# sourceMappingURL=cli.js.map