lore-memory 0.2.0 → 0.3.0

package/bin/lore.js

@@ -10,6 +10,9 @@ program
   .description('Persistent project memory for developers')
   .version('0.1.0')
   .action(async () => {
+    // Only launch the interactive menu if strictly NO arguments were provided
+    if (process.argv.length !== 2) return;
+
     const inquirer = require('inquirer');
     const chalk = require('chalk');
     const { execSync } = require('child_process');
@@ -36,6 +39,7 @@ program
           { name: '👀 Review pending drafts (lore drafts)', value: 'drafts' },
           { name: '📊 View project health (lore score)', value: 'score' },
           { name: '🔍 Search knowledge base (lore search)', value: 'search' },
+          { name: '🌐 Open Local Web Dashboard (lore ui)', value: 'ui' },
           { name: '⚙️  Start background watcher (lore watch --daemon)', value: 'watch --daemon' },
           new inquirer.Separator(),
           { name: '❓ Show Help', value: 'help' },
@@ -192,4 +196,10 @@ program
   .option('--build', 'Rebuild the full graph from source')
   .action(require('../src/commands/graph'));
 
+program
+  .command('ui')
+  .description('Start the local Lore web dashboard')
+  .option('-p, --port <port>', 'Port to run the UI server on', '3333')
+  .action(require('../src/commands/ui'));
+
 program.parse(process.argv);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lore-memory",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Persistent project memory for developers. Captures decisions, invariants, gotchas, and graveyard entries — automatically and manually — and injects them into AI coding sessions.",
   "main": "bin/lore.js",
   "bin": {
@@ -43,11 +43,13 @@
     "chalk": "^4",
     "chokidar": "^3.6.0",
     "commander": "^11",
+    "express": "^5.2.1",
     "fs-extra": "^11",
     "glob": "^10.5.0",
     "inquirer": "^8",
     "js-yaml": "^4",
     "natural": "^6.12.0",
-    "ollama": "^0.6.3"
+    "ollama": "^0.6.3",
+    "open": "^11.0.0"
   }
 }

package/src/commands/mine.js

@@ -6,7 +6,7 @@ const fs = require('fs-extra');
 const { mineFile, mineDirectory } = require('../watcher/comments');
 const { requireInit } = require('../lib/guard');
 
-function mine(targetPath) {
+async function mine(targetPath) {
   requireInit();
   const projectRoot = process.cwd();
   const target = targetPath || '.';
@@ -18,10 +18,11 @@ function mine(targetPath) {
 
     if (stat.isDirectory()) {
       console.log(chalk.cyan(`📖 Mining comments in ${target} ...`));
-      count = mineDirectory(abs, projectRoot);
+      count = await mineDirectory(abs, projectRoot);
     } else {
       console.log(chalk.cyan(`📖 Mining comments in ${target} ...`));
-      count = mineFile(abs, projectRoot).length;
+      const drafts = await mineFile(abs, projectRoot);
+      count = drafts.length;
     }
 
     if (count === 0) {

package/src/commands/ui.js

@@ -0,0 +1,171 @@
+'use strict';
+
+const express = require('express');
+const path = require('path');
+const chalk = require('chalk');
+const { requireInit } = require('../lib/guard');
+const { readIndex, LORE_DIR } = require('../lib/index');
+const { readEntry } = require('../lib/entries');
+const { computeScore } = require('../lib/scorer');
+const { listDrafts, acceptDraft, deleteDraft } = require('../lib/drafts');
+
+// Only load 'open' dynamically to avoid overhead on other CLI commands if not needed
+async function openBrowser(url) {
+    const open = (await import('open')).default;
+    await open(url);
+}
+
+function ui(options) {
+    requireInit();
+
+    const app = express();
+    const PORT = options.port || 3333;
+
+    app.use(express.json());
+
+    // CORS for local dev
+    app.use((req, res, next) => {
+        res.header('Access-Control-Allow-Origin', '*');
+        res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
+        res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
+        next();
+    });
+
+    // API Endpoints
+
+    app.get('/api/stats', (req, res) => {
+        try {
+            const scoreData = computeScore();
+            const drafts = listDrafts();
+
+            const index = readIndex();
+            const counts = { decision: 0, invariant: 0, graveyard: 0, gotcha: 0 };
+            for (const entryPath of Object.values(index.entries)) {
+                const entry = readEntry(entryPath);
+                if (entry && counts[entry.type] !== undefined) counts[entry.type]++;
+            }
+
+            res.json({
+                score: scoreData,
+                counts,
+                draftCount: drafts.length,
+                totalEntries: Object.keys(index.entries).length
+            });
+        } catch (e) {
+            res.status(500).json({ error: e.message });
+        }
+    });
+
+    app.get('/api/entries', (req, res) => {
+        try {
+            const index = readIndex();
+            const entries = [];
+            for (const entryPath of Object.values(index.entries)) {
+                const entry = readEntry(entryPath);
+                if (entry) entries.push(entry);
+            }
+            // Sort newest first
+            entries.sort((a, b) => new Date(b.date) - new Date(a.date));
+            res.json(entries);
+        } catch (e) {
+            res.status(500).json({ error: e.message });
+        }
+    });
+
+    app.get('/api/drafts', (req, res) => {
+        try {
+            const drafts = listDrafts();
+            res.json(drafts);
+        } catch (e) {
+            res.status(500).json({ error: e.message });
+        }
+    });
+
+    app.post('/api/drafts/:id/accept', (req, res) => {
+        try {
+            const entry = acceptDraft(req.params.id);
+            res.json({ success: true, entry });
+        } catch (e) {
+            res.status(500).json({ error: e.message });
+        }
+    });
+
+    app.delete('/api/drafts/:id', (req, res) => {
+        try {
+            deleteDraft(req.params.id);
+            res.json({ success: true });
+        } catch (e) {
+            res.status(500).json({ error: e.message });
+        }
+    });
+
+    app.get('/api/graph', (req, res) => {
+        try {
+            const { loadGraph, saveGraph } = require('../lib/graph');
+            let g = loadGraph();
+
+            if (Object.keys(g.imports).length === 0) {
+                const { buildFullGraph } = require('../watcher/graph');
+                g = buildFullGraph(process.cwd());
+                saveGraph(g);
+            }
+
+            const nodesSet = new Set();
+            const edges = [];
+            for (const [file, deps] of Object.entries(g.imports)) {
+                nodesSet.add(file);
+                for (const dep of deps) {
+                    nodesSet.add(dep);
+                    edges.push({ from: file, to: dep });
+                }
+            }
+
+            const nodes = Array.from(nodesSet).map(id => ({ id, label: id }));
+            res.json({ nodes, edges });
+        } catch (e) {
+            res.status(500).json({ error: e.message });
+        }
+    });
+
+    // Handle unmapped API routes with 404 JSON (instead of serving index.html)
+    app.use('/api', (req, res) => {
+        res.status(404).json({ error: 'API route not found' });
+    });
+
+    // Serve the frontend application
+    const uiPath = path.join(__dirname, '..', 'ui', 'public');
+    app.use(express.static(uiPath));
+
+    // Catch-all to serve index.html for SPA routing
+    app.use((req, res) => {
+        res.sendFile(path.join(uiPath, 'index.html'));
+    });
+
+    const server = app.listen(PORT, () => {
+        const url = `http://localhost:${PORT}`;
+        console.log(chalk.green(`\n🚀 Lore UI Dashboard running at ${chalk.bold(url)}\n`));
+        console.log(chalk.cyan(`  Press Ctrl+C to stop the server.`));
+
+        // Use native exec to open browser to avoid ESM import issues with 'open'
+        const { exec } = require('child_process');
+        const startPath = process.platform === 'darwin' ? 'open' : process.platform === 'win32' ? 'start' : 'xdg-open';
+        exec(`${startPath} ${url}`, (err) => {
+            if (err) {
+                console.log(chalk.dim(`  (Could not open browser automatically. Please visit ${url} manually)`));
+            }
+        });
+    });
+
+    server.on('error', (e) => {
+        if (e.code === 'EADDRINUSE') {
+            console.error(chalk.red(`\nPort ${PORT} is already in use by another process.`));
+            console.error(chalk.yellow(`Use 'lore ui --port <number>' to specify a different port.\n`));
+            process.exit(1);
+        } else {
+            console.error(chalk.red(`\nFailed to start server: ${e.message}\n`));
+            process.exit(1);
+        }
+    });
+}
+
+module.exports = ui;

package/src/ui/public/app.js

@@ -0,0 +1,286 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // --- Security ---
+    function escapeHtml(unsafe) {
+        if (!unsafe) return '';
+        return unsafe.toString()
+            .replace(/&/g, "&")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;")
+            .replace(/"/g, "&quot;")
+            .replace(/'/g, "&#039;");
+    }
+
+    // --- Navigation ---
+    const navLinks = document.querySelectorAll('.nav-links a');
+    const views = document.querySelectorAll('.view');
+
+    function showView(targetId) {
+        navLinks.forEach(l => l.classList.remove('active'));
+        document.querySelector(`[data-target="${targetId}"]`).classList.add('active');
+
+        views.forEach(v => v.classList.remove('active'));
+        document.getElementById(`view-${targetId}`).classList.add('active');
+
+        if (targetId === 'graph') {
+            loadGraph();
+        }
+    }
+
+    navLinks.forEach(link => {
+        link.addEventListener('click', (e) => {
+            e.preventDefault();
+            showView(e.target.dataset.target);
+        });
+    });
+
+    // --- Toast Notifications ---
+    function showToast(msg) {
+        const toast = document.getElementById('toast');
+        toast.textContent = msg;
+        toast.classList.remove('hidden');
+        setTimeout(() => toast.classList.add('hidden'), 3000);
+    }
+
+    // --- Data Loading ---
+    async function loadStats() {
+        try {
+            const res = await fetch('/api/stats');
+            const data = await res.json();
+
+            // Dashboard
+            document.getElementById('score-value').textContent = data.score.score;
+            document.getElementById('stat-coverage').textContent = `${data.score.coverage}%`;
+            document.getElementById('fill-coverage').style.width = `${data.score.coverage}%`;
+            document.getElementById('stat-freshness').textContent = `${data.score.freshness}%`;
+            document.getElementById('fill-freshness').style.width = `${data.score.freshness}%`;
+            document.getElementById('stat-depth').textContent = `${data.score.depth}%`;
+            document.getElementById('fill-depth').style.width = `${data.score.depth}%`;
+
+            // Tips
+            const tipsUl = document.getElementById('score-tips');
+            tipsUl.innerHTML = '';
+            if (data.score.topUnlogged && data.score.topUnlogged.length > 0) {
+                const top = data.score.topUnlogged[0];
+                const li = document.createElement('li');
+                li.textContent = `CRITICAL: Unlogged high-activity module [${top.module}] (${top.commits} commits)`;
+                tipsUl.appendChild(li);
+            } else {
+                tipsUl.innerHTML = '<li>System nominal. All core modules documented.</li>';
+            }
+
+            // Nav Badge
+            document.getElementById('nav-draft-count').textContent = data.draftCount;
+
+        } catch (e) {
+            console.error('Failed to load stats', e);
+        }
+    }
+
+    let allEntries = [];
+
+    async function loadEntries() {
+        try {
+            const res = await fetch('/api/entries');
+            allEntries = await res.json();
+            renderEntries(allEntries);
+        } catch (e) {
+            console.error('Failed to load entries', e);
+        }
+    }
+
+    function renderEntries(entries) {
+        const container = document.getElementById('kb-list');
+        container.innerHTML = '';
+
+        if (entries.length === 0) {
+            container.innerHTML = '<p class="muted">No knowledge entries found in memory banks.</p>';
+            return;
+        }
+
+        entries.forEach(entry => {
+            const card = document.createElement('div');
+            card.className = 'entry-card';
+
+            const badgeClass = `type-${entry.type.toLowerCase()}`;
+
+            let filesHtml = '';
+            if (entry.files && entry.files.length > 0) {
+                filesHtml = `<div class="entry-meta">Files: ${escapeHtml(entry.files.join(', '))}</div>`;
+            }
+
+            let tagsHtml = '';
+            if (entry.tags && entry.tags.length > 0) {
+                tagsHtml = `<div class="entry-meta">Tags: ${escapeHtml(entry.tags.join(', '))}</div>`;
+            }
+
+            card.innerHTML = `
+                <div class="entry-header">
+                    <span class="type-badge ${escapeHtml(badgeClass)}">[${escapeHtml(entry.type).toUpperCase()}]</span>
+                    <span class="entry-date muted">${escapeHtml(entry.date.split('T')[0])}</span>
+                </div>
+                <div class="entry-title">${escapeHtml(entry.title)}</div>
+                <div class="entry-context">${escapeHtml(entry.context)}</div>
+                ${filesHtml}
+                ${tagsHtml}
+            `;
+            container.appendChild(card);
+        });
+    }
+
+    // Knowledge Base Filter & Search
+    document.getElementById('kb-search').addEventListener('input', (e) => {
+        const query = e.target.value.toLowerCase();
+        const typeMode = document.getElementById('kb-filter').value;
+        const filtered = allEntries.filter(e => {
+            const matchQuery = e.title.toLowerCase().includes(query) || e.context.toLowerCase().includes(query);
+            const matchType = typeMode === 'all' || e.type === typeMode;
+            return matchQuery && matchType;
+        });
+        renderEntries(filtered);
+    });
+
+    document.getElementById('kb-filter').addEventListener('change', (e) => {
+        const typeMode = e.target.value;
+        const query = document.getElementById('kb-search').value.toLowerCase();
+        const filtered = allEntries.filter(e => {
+            const matchQuery = e.title.toLowerCase().includes(query) || e.context.toLowerCase().includes(query);
+            const matchType = typeMode === 'all' || e.type === typeMode;
+            return matchQuery && matchType;
+        });
+        renderEntries(filtered);
+    });
+
+    // Drafts
+    async function loadDrafts() {
+        try {
+            const res = await fetch('/api/drafts');
+            const drafts = await res.json();
+
+            const container = document.getElementById('drafts-list');
+            container.innerHTML = '';
+
+            if (drafts.length === 0) {
+                container.innerHTML = '<p class="muted">All drafts have been processed.</p>';
+                return;
+            }
+
+            drafts.forEach(draft => {
+                const confPercent = Math.round((draft.confidence || 0) * 100);
+                const card = document.createElement('div');
+                card.className = 'entry-card';
+                card.id = `draft-${draft.draftId}`;
+
+                const badgeClass = `type-${draft.suggestedType.toLowerCase()}`;
+
+                let filesHtml = '';
+                if (draft.files && draft.files.length > 0) {
+                    filesHtml = `<div class="entry-meta">Linked File: ${escapeHtml(draft.files[0])}</div>`;
+                }
+
+                card.innerHTML = `
+                    <div class="entry-header">
+                        <span class="type-badge ${escapeHtml(badgeClass)}">SUGGESTED: [${escapeHtml(draft.suggestedType).toUpperCase()}]</span>
+                        <span class="entry-date muted">Confidence: ${confPercent}%</span>
+                    </div>
+                    <div class="entry-title">${escapeHtml(draft.suggestedTitle)}</div>
+                    <div class="entry-context">Evidence: ${escapeHtml(draft.evidence)}</div>
+                    ${filesHtml}
+                    <div class="draft-actions">
+                        <button class="btn btn-accept" onclick="acceptDraft('${escapeHtml(draft.draftId)}')">Accept</button>
+                        <button class="btn btn-delete" onclick="deleteDraft('${escapeHtml(draft.draftId)}')">Delete</button>
+                    </div>
+                `;
+                container.appendChild(card);
+            });
+
+        } catch (e) {
+            console.error('Failed to load drafts', e);
+        }
+    }
+
+    // Expose actions to global scope for inline handlers
+    window.acceptDraft = async (id) => {
+        try {
+            const res = await fetch(`/api/drafts/${id}/accept`, { method: 'POST' });
+            if (res.ok) {
+                document.getElementById(`draft-${id}`).remove();
+                showToast('Draft Accepted into Memory');
+                loadStats(); // update count
+                loadEntries(); // refresh KB
+            }
+        } catch (e) { }
+    };
+
+    window.deleteDraft = async (id) => {
+        try {
+            const res = await fetch(`/api/drafts/${id}`, { method: 'DELETE' });
+            if (res.ok) {
+                document.getElementById(`draft-${id}`).remove();
+                showToast('Draft Deleted');
+                loadStats();
+            }
+        } catch (e) { }
+    };
+
+    // Graph
+    let network = null;
+    async function loadGraph() {
+        if (network) return; // already loaded
+
+        try {
+            const res = await fetch('/api/graph');
+            const graphData = await res.json();
+
+            const container = document.getElementById('network-container');
+
+            const options = {
+                layout: {
+                    hierarchical: {
+                        enabled: true,
+                        direction: 'UD',          // Up-Down
+                        sortMethod: 'directed',   // Follows dependency arrows
+                        levelSeparation: 150,     // Space between tiers
+                        nodeSpacing: 250,
+                        treeSpacing: 400,
+                    }
+                },
+                interaction: {
+                    hover: true,
+                    tooltipDelay: 200,
+                    hideEdgesOnDrag: true
+                },
+                nodes: {
+                    shape: 'dot',
+                    size: 16,
+                    font: { color: '#00FF41', face: 'monospace', size: 12 },
+                    color: {
+                        background: '#050505',
+                        border: '#008F11',
+                        highlight: { background: '#00FF41', border: '#FFFFFF' },
+                        hover: { background: '#008F11', border: '#00FF41' }
+                    },
+                    shadow: { enabled: true, color: 'rgba(0, 255, 65, 0.4)', size: 10, x: 0, y: 0 }
+                },
+                edges: {
+                    color: { color: '#004F09', highlight: '#00FF41', hover: '#008F11' },
+                    arrows: { to: { enabled: true, scaleFactor: 0.5 } },
+                    smooth: { type: 'cubicBezier', forceDirection: 'vertical', roundness: 0.4 }
+                },
+                physics: {
+                    enabled: false // Physics usually conflicts with strict hierarchical layouts
+                }
+            };
+
+            network = new vis.Network(container, graphData, options);
+
+        } catch (e) {
+            console.error('Failed to load graph', e);
+            document.getElementById('network-container').innerHTML = '<p class="muted" style="padding: 20px;">Could not render graph data.</p>';
+        }
+    }
+
+    // Init
+    loadStats();
+    loadEntries();
+    loadDrafts();
+});

package/src/ui/public/index.html

@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lore Dashboard</title>
+    <!-- Retro Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Fira+Code:wght@400;600&display=swap" rel="stylesheet">
+    <!-- Vis Network for Graphs -->
+    <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="crt-overlay"></div>
+    
+    <div class="layout">
+        <!-- Sidebar Navigation -->
+        <nav class="sidebar">
+            <div class="logo">
+                <pre>
+██╗      ██████╗ ██████╗ ███████╗
+██║     ██╔═══██╗██╔══██╗██╔════╝
+██║     ██║   ██║██████╔╝█████╗  
+██║     ██║   ██║██╔══██╗██╔══╝  
+███████╗╚██████╔╝██║  ██║███████╗
+╚══════╝ ╚═════╝ ╚═╝  ╚═╝╚══════╝
+                </pre>
+                <div class="subtitle">PROJECT MEMORY</div>
+            </div>
+            
+            <ul class="nav-links">
+                <li><a href="#" class="active" data-target="dashboard">Dashboard</a></li>
+                <li><a href="#" data-target="knowledge">Knowledge Base</a></li>
+                <li><a href="#" data-target="drafts">Pending Drafts (<span id="nav-draft-count">0</span>)</a></li>
+                <li><a href="#" data-target="graph">Dependency Graph</a></li>
+            </ul>
+        </nav>
+
+        <!-- Main Content Area -->
+        <main class="content">
+            
+            <!-- Dashboard View -->
+            <section id="view-dashboard" class="view active">
+                <h1 class="glitch" data-text="LORE SCORE">LORE SCORE</h1>
+                <div class="score-card">
+                    <div class="main-score">
+                        <span id="score-value">--</span><span class="muted">/100</span>
+                    </div>
+                </div>
+
+                <div class="metrics-grid">
+                    <div class="metric">
+                        <h3>COVERAGE</h3>
+                        <div class="progress-bar"><div class="fill" id="fill-coverage"></div></div>
+                        <p class="stats" id="stat-coverage">--%</p>
+                    </div>
+                    <div class="metric">
+                        <h3>FRESHNESS</h3>
+                        <div class="progress-bar"><div class="fill" id="fill-freshness"></div></div>
+                        <p class="stats" id="stat-freshness">--%</p>
+                    </div>
+                    <div class="metric">
+                        <h3>DEPTH</h3>
+                        <div class="progress-bar"><div class="fill" id="fill-depth"></div></div>
+                        <p class="stats" id="stat-depth">--%</p>
+                    </div>
+                </div>
+
+                <div class="tips-container">
+                    <h3>SYSTEM ALERTS</h3>
+                    <ul id="score-tips" class="terminal-list">
+                        <li>Loading heuristics...</li>
+                    </ul>
+                </div>
+            </section>
+
+            <!-- Knowledge Base View -->
+            <section id="view-knowledge" class="view">
+                <h1>KNOWLEDGE BASE</h1>
+                <div class="controls">
+                    <input type="text" id="kb-search" placeholder="Search memory..._">
+                    <select id="kb-filter">
+                        <option value="all">ALL TYPES</option>
+                        <option value="decision">DECISIONS</option>
+                        <option value="invariant">INVARIANTS</option>
+                        <option value="gotcha">GOTCHAS</option>
+                        <option value="graveyard">GRAVEYARD</option>
+                    </select>
+                </div>
+                <div id="kb-list" class="entries-grid">
+                    <!-- Entries injected here by JS -->
+                </div>
+            </section>
+
+            <!-- Drafts View -->
+            <section id="view-drafts" class="view">
+                <h1>PENDING DRAFTS</h1>
+                <p class="subtitle">Awaiting human approval.</p>
+                <div id="drafts-list" class="drafts-container">
+                    <!-- Drafts injected here by JS -->
+                </div>
+            </section>
+
+            <!-- Graph View -->
+            <section id="view-graph" class="view">
+                <h1>DEPENDENCY GRAPH</h1>
+                <div id="network-container"></div>
+            </section>
+
+        </main>
+    </div>
+
+    <!-- Modals / Tooltips -->
+    <div id="toast" class="toast hidden">Action successful</div>
+
+    <script src="app.js"></script>
+</body>
+</html>

package/src/ui/public/style.css

@@ -0,0 +1,321 @@
+:root {
+  --bg-color: #050505;
+  --panel-bg: #111111;
+  --text-main: #00FF41; /* CRT Green */
+  --text-muted: #008F11;
+  --accent-decision: #00FFFF; /* Cyan */
+  --accent-invariant: #FF003C; /* Red */
+  --accent-gotcha: #FFB000; /* Amber */
+  --accent-graveyard: #555555;
+  --border: 1px solid #008F11;
+  --font-pixel: 'Press Start 2P', cursive;
+  --font-code: 'Fira Code', 'Courier New', monospace;
+  --glitch-offset: 2px;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-color: var(--bg-color);
+  color: var(--text-main);
+  font-family: var(--font-code);
+  font-size: 14px;
+  line-height: 1.6;
+  overflow: hidden; /* App feels like a terminal */
+}
+
+/* CRT Scanline Overlay Effect */
+.crt-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
+  background-size: 100% 4px, 3px 100%;
+  pointer-events: none;
+  z-index: 999;
+}
+
+/* Layout */
+.layout {
+  display: flex;
+  height: 100vh;
+}
+
+/* Sidebar */
+.sidebar {
+  width: 350px;
+  background-color: var(--panel-bg);
+  border-right: var(--border);
+  padding: 30px;
+  display: flex;
+  flex-direction: column;
+}
+
+.logo pre {
+  font-family: monospace;
+  color: var(--text-main);
+  font-size: 8px; /* Fit the ASCII art */
+  white-space: pre;
+  margin-bottom: 5px;
+  line-height: 1.2;
+}
+
+.subtitle {
+  font-family: var(--font-code);
+  color: var(--text-muted);
+  font-size: 12px;
+  letter-spacing: 2px;
+  margin-bottom: 40px;
+  text-align: center;
+}
+
+.nav-links {
+  list-style: none;
+}
+
+.nav-links li {
+  margin-bottom: 15px;
+}
+
+.nav-links a {
+  color: var(--text-muted);
+  text-decoration: none;
+  font-family: var(--font-pixel);
+  font-size: 10px;
+  display: block;
+  padding: 10px;
+  border: 1px solid transparent;
+  transition: all 0.2s ease;
+}
+
+.nav-links a:hover, .nav-links a.active {
+  color: var(--bg-color);
+  background-color: var(--text-main);
+  border: 1px solid var(--text-main);
+  box-shadow: 0 0 10px var(--text-main);
+}
+
+/* Main Content Area */
+.content {
+  flex: 1;
+  padding: 40px;
+  overflow-y: auto;
+  position: relative;
+}
+
+.view {
+  display: none;
+  animation: flicker 0.15s ease-in 1;
+}
+
+.view.active {
+  display: block;
+}
+
+h1 {
+  font-family: var(--font-pixel);
+  font-size: 24px;
+  margin-bottom: 30px;
+  color: var(--text-main);
+  text-shadow: 0 0 5px var(--text-main);
+}
+
+/* Dashboard Score Components */
+.score-card {
+  border: var(--border);
+  padding: 40px;
+  text-align: center;
+  margin-bottom: 30px;
+  background: repeating-linear-gradient(
+    45deg,
+    transparent,
+    transparent 10px,
+    rgba(0, 143, 17, 0.05) 10px,
+    rgba(0, 143, 17, 0.05) 20px
+  );
+}
+
+.main-score {
+  font-family: var(--font-pixel);
+  font-size: 64px;
+  text-shadow: 0 0 15px var(--text-main);
+}
+
+.muted {
+  font-size: 24px;
+  color: var(--text-muted);
+}
+
+.metrics-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 20px;
+  margin-bottom: 40px;
+}
+
+.metric h3 {
+  font-family: var(--font-pixel);
+  font-size: 10px;
+  margin-bottom: 15px;
+  color: var(--text-muted);
+}
+
+.progress-bar {
+  height: 20px;
+  border: var(--border);
+  padding: 2px;
+  margin-bottom: 10px;
+}
+
+.progress-bar .fill {
+  height: 100%;
+  background-color: var(--text-main);
+  width: 0%;
+  transition: width 1s ease-out;
+}
+
+.tips-container {
+  border-top: var(--border);
+  padding-top: 20px;
+}
+
+.terminal-list {
+  list-style: none;
+}
+.terminal-list li::before {
+  content: "> ";
+  color: var(--accent-gotcha);
+}
+
+/* Knowledge Base Entries */
+.controls {
+  display: flex;
+  gap: 15px;
+  margin-bottom: 20px;
+}
+
+input, select, button {
+  background: var(--bg-color);
+  color: var(--text-main);
+  border: var(--border);
+  padding: 10px;
+  font-family: var(--font-code);
+  font-size: 14px;
+}
+
+input:focus, select:focus {
+  outline: none;
+  box-shadow: 0 0 8px var(--text-muted);
+}
+
+.entries-grid, .drafts-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.entry-card {
+  border: var(--border);
+  padding: 20px;
+  background-color: rgba(17, 17, 17, 0.8);
+}
+
+.entry-header {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px dashed var(--text-muted);
+  padding-bottom: 10px;
+  margin-bottom: 15px;
+}
+
+.type-badge {
+  font-family: var(--font-pixel);
+  font-size: 10px;
+  padding: 4px 8px;
+}
+
+.type-decision { color: var(--bg-color); background-color: var(--accent-decision); }
+.type-invariant { color: var(--bg-color); background-color: var(--accent-invariant); }
+.type-gotcha { color: var(--bg-color); background-color: var(--accent-gotcha); }
+.type-graveyard { color: var(--text-main); background-color: var(--accent-graveyard); }
+
+.entry-title {
+  font-weight: bold;
+  font-size: 16px;
+  margin-bottom: 10px;
+}
+
+.entry-meta {
+  color: var(--text-muted);
+  font-size: 12px;
+  margin-top: 15px;
+}
+
+/* Draft Specifics */
+.draft-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 15px;
+}
+
+.btn {
+  cursor: pointer;
+  font-family: var(--font-pixel);
+  font-size: 8px;
+  text-transform: uppercase;
+  transition: all 0.2s;
+}
+
+.btn-accept {
+  border-color: var(--text-main);
+  color: var(--text-main);
+}
+.btn-accept:hover { background: var(--text-main); color: var(--bg-color); }
+
+.btn-delete {
+  border-color: var(--accent-invariant);
+  color: var(--accent-invariant);
+}
+.btn-delete:hover { background: var(--accent-invariant); color: var(--bg-color); }
+
+/* Graph Container */
+#network-container {
+  width: 100%;
+  height: 600px;
+  border: var(--border);
+  background-color: var(--panel-bg);
+}
+
+/* Animations */
+@keyframes flicker {
+  0% { opacity: 0; }
+  10% { opacity: 0.5; }
+  20% { opacity: 0; }
+  50% { opacity: 1; }
+  60% { opacity: 0.8; }
+  100% { opacity: 1; }
+}
+
+.toast {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background-color: var(--text-main);
+  color: var(--bg-color);
+  padding: 15px 30px;
+  font-family: var(--font-code);
+  font-weight: bold;
+  border: 1px solid white;
+  z-index: 1000;
+  transition: opacity 0.3s;
+}
+.toast.hidden {
+  opacity: 0;
+  pointer-events: none;
+}

package/src/watcher/comments.js

@@ -92,7 +92,7 @@ async function mineFile(absFilePath, projectRoot) {
  * @param {string[]} ignore
  * @returns {number} total drafts created
  */
-function mineDirectory(absDirPath, projectRoot, ignore) {
+async function mineDirectory(absDirPath, projectRoot, ignore) {
   const { globSync } = require('glob');
   const ignoreList = ignore || ['node_modules', 'dist', '.git', '.lore', 'coverage'];
   const ignorePats = ignoreList.map(i => `${i}/**`);
@@ -105,7 +105,8 @@ function mineDirectory(absDirPath, projectRoot, ignore) {
 
   let total = 0;
   for (const file of files) {
-    total += mineFile(file, projectRoot).length;
+    const drafts = await mineFile(file, projectRoot);
+    total += drafts.length;
   }
   return total;
 }