@agilsee/mcp-orchestrator 0.5.0

package/dist/server/web-server.js

@@ -0,0 +1,574 @@
+/**
+ * Web Server — Memory Dashboard + REST API
+ * Port: 37800
+ *
+ * Features mirrored from claude-mem:
+ * - Real-time memory viewer
+ * - Timeline sessions
+ * - Search endpoint
+ * - Stats dashboard
+ * - REST API (CRUD)
+ */
+import { createServer } from "http";
+import { readFileSync, existsSync } from "fs";
+import { join } from "path";
+import { URL } from "url";
+const PORT = 37800;
+const CLAUDE_HOME = process.env.CLAUDE_HOME ?? join(process.env.USERPROFILE ?? process.env.HOME ?? "", ".claude");
+const MEMORY_DB = join(CLAUDE_HOME, "data", "memory.json");
+const COUNTER_FILE = join(CLAUDE_HOME, "data", ".edit-counter");
+// ─── Helpers ───
+function readDb() {
+    if (!existsSync(MEMORY_DB))
+        return { entries: [], raw: null };
+    try {
+        const raw = JSON.parse(readFileSync(MEMORY_DB, "utf8"));
+        const col = raw.collections?.find((c) => c.name === "memories");
+        return { entries: col?.data || [], raw };
+    }
+    catch {
+        return { entries: [], raw: null };
+    }
+}
+function readRegistry() {
+    const regPath = join(CLAUDE_HOME, "project-registry.json");
+    if (!existsSync(regPath))
+        return {};
+    try {
+        return JSON.parse(readFileSync(regPath, "utf8"));
+    }
+    catch {
+        return {};
+    }
+}
+function readEditCounter() {
+    if (!existsSync(COUNTER_FILE))
+        return 0;
+    try {
+        const data = JSON.parse(readFileSync(COUNTER_FILE, "utf8"));
+        return data.count || 0;
+    }
+    catch {
+        return 0;
+    }
+}
+function readProjectDocs(slug, file) {
+    const p = join(CLAUDE_HOME, "project-docs", slug, file);
+    if (!existsSync(p))
+        return "";
+    try {
+        return readFileSync(p, "utf8");
+    }
+    catch {
+        return "";
+    }
+}
+function cors(res) {
+    res.setHeader("Access-Control-Allow-Origin", "*");
+    res.setHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, OPTIONS");
+    res.setHeader("Access-Control-Allow-Headers", "Content-Type");
+}
+function json(res, data, status = 200) {
+    cors(res);
+    res.writeHead(status, { "Content-Type": "application/json" });
+    res.end(JSON.stringify(data));
+}
+function html(res, content) {
+    cors(res);
+    res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+    res.end(content);
+}
+// ─── REST API Routes ───
+function handleApi(req, res, url) {
+    const path = url.pathname;
+    // GET /api/stats
+    if (path === "/api/stats" && req.method === "GET") {
+        const { entries } = readDb();
+        const reg = readRegistry();
+        const projects = Object.keys(reg.projects || {});
+        const activeProjects = Object.entries(reg.projects || {}).filter(([_, p]) => p.status === "active").length;
+        const byType = {};
+        const byProject = {};
+        entries.forEach((e) => {
+            byType[e.type] = (byType[e.type] || 0) + 1;
+            if (e.project)
+                byProject[e.project] = (byProject[e.project] || 0) + 1;
+        });
+        const lastEntry = entries.sort((a, b) => (b.created_at || "").localeCompare(a.created_at || ""))[0];
+        return json(res, {
+            total_memories: entries.length,
+            by_type: byType,
+            by_project: byProject,
+            total_projects: projects.length,
+            active_projects: activeProjects,
+            last_updated: lastEntry?.created_at || null,
+            current_session_edits: readEditCounter(),
+        });
+    }
+    // GET /api/memories?type=&project=&limit=&offset=
+    if (path === "/api/memories" && req.method === "GET") {
+        const { entries } = readDb();
+        let filtered = [...entries];
+        const type = url.searchParams.get("type");
+        const project = url.searchParams.get("project");
+        if (type)
+            filtered = filtered.filter((e) => e.type === type);
+        if (project)
+            filtered = filtered.filter((e) => e.project === project);
+        filtered.sort((a, b) => (b.created_at || "").localeCompare(a.created_at || ""));
+        const limit = parseInt(url.searchParams.get("limit") || "50");
+        const offset = parseInt(url.searchParams.get("offset") || "0");
+        return json(res, {
+            memories: filtered.slice(offset, offset + limit),
+            total: filtered.length,
+            limit,
+            offset,
+        });
+    }
+    // GET /api/search?q=&type=&project=
+    if (path === "/api/search" && req.method === "GET") {
+        const q = (url.searchParams.get("q") || "").toLowerCase();
+        if (!q)
+            return json(res, { results: [], total: 0 });
+        const { entries } = readDb();
+        const keywords = q.split(/\s+/).filter((w) => w.length > 1);
+        const scored = entries.map((e) => {
+            const text = `${e.title} ${e.content} ${(e.tags || []).join(" ")}`.toLowerCase();
+            let score = 0;
+            keywords.forEach((kw) => {
+                if (text.includes(kw))
+                    score += 1;
+                if (e.title?.toLowerCase().includes(kw))
+                    score += 2; // title boost
+                if ((e.tags || []).some((t) => t.toLowerCase().includes(kw)))
+                    score += 1.5; // tag boost
+            });
+            return { ...e, score };
+        }).filter((e) => e.score > 0);
+        scored.sort((a, b) => b.score - a.score);
+        const type = url.searchParams.get("type");
+        const project = url.searchParams.get("project");
+        let results = scored;
+        if (type)
+            results = results.filter((e) => e.type === type);
+        if (project)
+            results = results.filter((e) => e.project === project);
+        return json(res, {
+            results: results.slice(0, 20),
+            total: results.length,
+            query: q,
+        });
+    }
+    // GET /api/timeline
+    if (path === "/api/timeline" && req.method === "GET") {
+        const { entries } = readDb();
+        const sorted = [...entries].sort((a, b) => (b.created_at || "").localeCompare(a.created_at || ""));
+        // Group by date
+        const grouped = {};
+        sorted.forEach((e) => {
+            const date = e.created_at?.substring(0, 10) || "unknown";
+            if (!grouped[date])
+                grouped[date] = [];
+            grouped[date].push({
+                id: e.id,
+                type: e.type,
+                project: e.project,
+                title: e.title,
+                tags: e.tags,
+                created_at: e.created_at,
+            });
+        });
+        return json(res, { timeline: grouped });
+    }
+    // GET /api/projects
+    if (path === "/api/projects" && req.method === "GET") {
+        const reg = readRegistry();
+        const projects = Object.entries(reg.projects || {}).map(([slug, p]) => ({
+            slug,
+            name: p.name,
+            status: p.status,
+            group: p.group,
+            stack: p.stack,
+            mistakes_count: readProjectDocs(slug, "MISTAKES.md").split("\n## [").length - 1,
+        }));
+        return json(res, { projects });
+    }
+    // GET /api/memory/:id
+    const memMatch = path.match(/^\/api\/memory\/(.+)$/);
+    if (memMatch && req.method === "GET") {
+        const id = memMatch[1];
+        const { entries } = readDb();
+        const entry = entries.find((e) => e.id === id);
+        if (!entry)
+            return json(res, { error: "Not found" }, 404);
+        return json(res, entry);
+    }
+    return json(res, { error: "Not found" }, 404);
+}
+// ─── Dashboard HTML ───
+function getDashboardHtml() {
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>MCP Memory Dashboard — ASAP Orchestrator</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  :root {
+    --bg: #0d1117; --surface: #161b22; --border: #30363d;
+    --text: #c9d1d9; --text-muted: #8b949e; --accent: #58a6ff;
+    --green: #3fb950; --orange: #d29922; --red: #f85149; --purple: #bc8cff;
+  }
+  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); }
+
+  .header { background: var(--surface); border-bottom: 1px solid var(--border); padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; }
+  .header h1 { font-size: 18px; color: var(--accent); }
+  .header .subtitle { color: var(--text-muted); font-size: 13px; }
+  .header .live-dot { width: 8px; height: 8px; background: var(--green); border-radius: 50%; display: inline-block; margin-right: 6px; animation: pulse 2s infinite; }
+  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
+
+  .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
+
+  .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 24px; }
+  .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px; }
+  .stat-card .label { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
+  .stat-card .value { font-size: 28px; font-weight: 600; margin-top: 4px; }
+  .stat-card .value.accent { color: var(--accent); }
+  .stat-card .value.green { color: var(--green); }
+  .stat-card .value.orange { color: var(--orange); }
+  .stat-card .value.purple { color: var(--purple); }
+
+  .tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
+  .tab { padding: 10px 16px; cursor: pointer; color: var(--text-muted); border-bottom: 2px solid transparent; font-size: 14px; transition: all 0.2s; }
+  .tab:hover { color: var(--text); }
+  .tab.active { color: var(--accent); border-bottom-color: var(--accent); }
+
+  .search-bar { margin-bottom: 16px; display: flex; gap: 8px; }
+  .search-bar input { flex: 1; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 14px; outline: none; }
+  .search-bar input:focus { border-color: var(--accent); }
+  .search-bar select { padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 13px; }
+
+  .panel { display: none; }
+  .panel.active { display: block; }
+
+  .memory-list { display: flex; flex-direction: column; gap: 8px; }
+  .memory-item { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; cursor: pointer; transition: border-color 0.2s; }
+  .memory-item:hover { border-color: var(--accent); }
+  .memory-item .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
+  .memory-item .title { font-weight: 600; font-size: 14px; }
+  .memory-item .meta { color: var(--text-muted); font-size: 12px; }
+  .memory-item .content { color: var(--text-muted); font-size: 13px; margin-top: 6px; line-height: 1.5; }
+  .memory-item .tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
+  .memory-item .tag { background: rgba(88,166,255,0.1); color: var(--accent); padding: 2px 8px; border-radius: 12px; font-size: 11px; }
+
+  .type-badge { padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 500; }
+  .type-session_summary { background: rgba(63,185,80,0.15); color: var(--green); }
+  .type-decision { background: rgba(188,140,255,0.15); color: var(--purple); }
+  .type-bug { background: rgba(248,81,73,0.15); color: var(--red); }
+  .type-context { background: rgba(88,166,255,0.15); color: var(--accent); }
+  .type-insight { background: rgba(210,153,34,0.15); color: var(--orange); }
+  .type-user_note { background: rgba(201,209,217,0.1); color: var(--text-muted); }
+
+  .timeline-date { color: var(--accent); font-size: 14px; font-weight: 600; margin: 16px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
+  .timeline-item { display: flex; gap: 12px; padding: 8px 0 8px 16px; border-left: 2px solid var(--border); margin-left: 8px; }
+  .timeline-item .dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
+  .timeline-item .info .title { font-size: 13px; }
+  .timeline-item .info .meta { color: var(--text-muted); font-size: 11px; }
+
+  .project-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; margin-bottom: 8px; }
+  .project-card .name { font-weight: 600; font-size: 15px; }
+  .project-card .details { color: var(--text-muted); font-size: 12px; margin-top: 4px; }
+  .project-card .stack-tags { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
+  .project-card .stack-tag { background: rgba(210,153,34,0.1); color: var(--orange); padding: 2px 8px; border-radius: 12px; font-size: 11px; }
+
+  .status-active { color: var(--green); }
+  .status-maintenance { color: var(--orange); }
+
+  .detail-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); z-index: 100; justify-content: center; align-items: center; }
+  .detail-modal.show { display: flex; }
+  .detail-content { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px; max-width: 700px; width: 90%; max-height: 80vh; overflow-y: auto; }
+  .detail-content .close { float: right; cursor: pointer; color: var(--text-muted); font-size: 20px; }
+  .detail-content h2 { font-size: 18px; margin-bottom: 12px; }
+  .detail-content pre { background: var(--bg); padding: 12px; border-radius: 6px; font-size: 13px; white-space: pre-wrap; word-break: break-word; margin-top: 12px; line-height: 1.6; }
+
+  .empty { text-align: center; padding: 40px; color: var(--text-muted); }
+
+  footer { text-align: center; padding: 20px; color: var(--text-muted); font-size: 12px; border-top: 1px solid var(--border); margin-top: 40px; }
+</style>
+</head>
+<body>
+
+<div class="header">
+  <div>
+    <h1><span class="live-dot"></span>MCP Memory Dashboard</h1>
+    <div class="subtitle">MCP Orchestrator — Memory Layer for Claude Code</div>
+  </div>
+  <div style="text-align:right">
+    <div style="color:var(--text-muted);font-size:12px" id="lastUpdate"></div>
+    <div style="color:var(--green);font-size:13px;font-weight:600" id="statusLine">Loading...</div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="stats-grid" id="statsGrid"></div>
+
+  <div class="tabs">
+    <div class="tab active" data-tab="memories">Memories</div>
+    <div class="tab" data-tab="timeline">Timeline</div>
+    <div class="tab" data-tab="projects">Projects</div>
+    <div class="tab" data-tab="search">Search</div>
+  </div>
+
+  <div class="panel active" id="panel-memories">
+    <div class="search-bar">
+      <select id="filterType" onchange="loadMemories()">
+        <option value="">All Types</option>
+        <option value="session_summary">Session Summary</option>
+        <option value="decision">Decision</option>
+        <option value="bug">Bug</option>
+        <option value="context">Context</option>
+        <option value="insight">Insight</option>
+        <option value="user_note">User Note</option>
+      </select>
+      <select id="filterProject" onchange="loadMemories()">
+        <option value="">All Projects</option>
+      </select>
+    </div>
+    <div id="memoryList" class="memory-list"></div>
+  </div>
+
+  <div class="panel" id="panel-timeline">
+    <div id="timelineList"></div>
+  </div>
+
+  <div class="panel" id="panel-projects">
+    <div id="projectList"></div>
+  </div>
+
+  <div class="panel" id="panel-search">
+    <div class="search-bar">
+      <input type="text" id="searchInput" placeholder="Search memories... (supports typo/fuzzy)" onkeyup="if(event.key==='Enter')doSearch()">
+      <button onclick="doSearch()" style="padding:10px 20px;background:var(--accent);color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:600">Search</button>
+    </div>
+    <div id="searchResults" class="memory-list"></div>
+  </div>
+</div>
+
+<div class="detail-modal" id="detailModal" onclick="if(event.target===this)closeDetail()">
+  <div class="detail-content">
+    <span class="close" onclick="closeDetail()">&times;</span>
+    <div id="detailBody"></div>
+  </div>
+</div>
+
+<footer>
+  @agilsee/mcp-orchestrator v0.5.0 | Memory Layer: Loki.js + MiniSearch | Port ${PORT}
+</footer>
+
+<script>
+const API = '';
+
+async function fetchJson(url) {
+  const r = await fetch(url);
+  return r.json();
+}
+
+// ─── Stats ───
+async function loadStats() {
+  const s = await fetchJson(API + '/api/stats');
+  document.getElementById('statusLine').textContent = s.total_memories + ' memories stored';
+  document.getElementById('lastUpdate').textContent = s.last_updated ? 'Last: ' + new Date(s.last_updated).toLocaleString() : '';
+
+  const grid = document.getElementById('statsGrid');
+  grid.innerHTML = \`
+    <div class="stat-card"><div class="label">Total Memories</div><div class="value accent">\${s.total_memories}</div></div>
+    <div class="stat-card"><div class="label">Session Summaries</div><div class="value green">\${s.by_type?.session_summary || 0}</div></div>
+    <div class="stat-card"><div class="label">Bugs Recorded</div><div class="value" style="color:var(--red)">\${s.by_type?.bug || 0}</div></div>
+    <div class="stat-card"><div class="label">Decisions</div><div class="value purple">\${s.by_type?.decision || 0}</div></div>
+    <div class="stat-card"><div class="label">Active Projects</div><div class="value orange">\${s.active_projects}</div></div>
+    <div class="stat-card"><div class="label">Session Edits</div><div class="value">\${s.current_session_edits}</div></div>
+  \`;
+
+  // Populate project filter
+  const sel = document.getElementById('filterProject');
+  const existing = sel.options.length;
+  if (existing <= 1 && s.by_project) {
+    Object.keys(s.by_project).forEach(p => {
+      const opt = document.createElement('option');
+      opt.value = p; opt.textContent = p + ' (' + s.by_project[p] + ')';
+      sel.appendChild(opt);
+    });
+  }
+}
+
+// ─── Memories ───
+async function loadMemories() {
+  const type = document.getElementById('filterType').value;
+  const project = document.getElementById('filterProject').value;
+  let url = API + '/api/memories?limit=50';
+  if (type) url += '&type=' + type;
+  if (project) url += '&project=' + project;
+
+  const data = await fetchJson(url);
+  const list = document.getElementById('memoryList');
+
+  if (!data.memories.length) {
+    list.innerHTML = '<div class="empty">No memories found. Use save_memory MCP tool to start.</div>';
+    return;
+  }
+
+  list.innerHTML = data.memories.map(m => \`
+    <div class="memory-item" onclick="showDetail('\${m.id}')">
+      <div class="top">
+        <span class="title">\${esc(m.title)}</span>
+        <span class="type-badge type-\${m.type}">\${m.type.replace('_',' ')}</span>
+      </div>
+      <div class="meta">\${m.project ? '[' + m.project + '] ' : ''}\${m.created_at ? new Date(m.created_at).toLocaleString() : ''}</div>
+      <div class="content">\${esc((m.content || '').substring(0, 200))}\${(m.content||'').length > 200 ? '...' : ''}</div>
+      \${(m.tags||[]).length ? '<div class="tags">' + m.tags.map(t => '<span class="tag">' + esc(t) + '</span>').join('') + '</div>' : ''}
+    </div>
+  \`).join('');
+}
+
+// ─── Timeline ───
+async function loadTimeline() {
+  const data = await fetchJson(API + '/api/timeline');
+  const list = document.getElementById('timelineList');
+
+  const dates = Object.keys(data.timeline).sort().reverse();
+  if (!dates.length) {
+    list.innerHTML = '<div class="empty">No timeline data yet.</div>';
+    return;
+  }
+
+  const typeColors = { session_summary: 'var(--green)', decision: 'var(--purple)', bug: 'var(--red)', context: 'var(--accent)', insight: 'var(--orange)', user_note: 'var(--text-muted)' };
+
+  list.innerHTML = dates.map(date => \`
+    <div class="timeline-date">\${date}</div>
+    \${data.timeline[date].map(e => \`
+      <div class="timeline-item" onclick="showDetail('\${e.id}')" style="cursor:pointer">
+        <div class="dot" style="background:\${typeColors[e.type] || 'var(--text-muted)'}"></div>
+        <div class="info">
+          <div class="title"><span class="type-badge type-\${e.type}">\${e.type.replace('_',' ')}</span> \${esc(e.title)}</div>
+          <div class="meta">\${e.project ? e.project + ' · ' : ''}\${e.created_at ? new Date(e.created_at).toLocaleTimeString() : ''}</div>
+        </div>
+      </div>
+    \`).join('')}
+  \`).join('');
+}
+
+// ─── Projects ───
+async function loadProjects() {
+  const data = await fetchJson(API + '/api/projects');
+  const list = document.getElementById('projectList');
+
+  list.innerHTML = data.projects.map(p => \`
+    <div class="project-card">
+      <div style="display:flex;justify-content:space-between;align-items:center">
+        <span class="name">\${esc(p.name)}</span>
+        <span class="status-\${p.status}" style="font-size:12px;font-weight:600">\${p.status}</span>
+      </div>
+      <div class="details">\${p.slug} · Group: \${p.group || '-'} · Bugs recorded: \${p.mistakes_count}</div>
+      <div class="stack-tags">\${(p.stack||[]).map(s => '<span class="stack-tag">' + s + '</span>').join('')}</div>
+    </div>
+  \`).join('');
+}
+
+// ─── Search ───
+async function doSearch() {
+  const q = document.getElementById('searchInput').value.trim();
+  if (!q) return;
+
+  const data = await fetchJson(API + '/api/search?q=' + encodeURIComponent(q));
+  const list = document.getElementById('searchResults');
+
+  if (!data.results.length) {
+    list.innerHTML = '<div class="empty">No results for "' + esc(q) + '"</div>';
+    return;
+  }
+
+  list.innerHTML = '<div style="color:var(--text-muted);font-size:13px;margin-bottom:12px">' + data.total + ' results for "' + esc(q) + '"</div>' +
+    data.results.map(m => \`
+    <div class="memory-item" onclick="showDetail('\${m.id}')">
+      <div class="top">
+        <span class="title">\${esc(m.title)}</span>
+        <div><span style="color:var(--orange);font-size:12px;margin-right:8px">score: \${m.score.toFixed(1)}</span><span class="type-badge type-\${m.type}">\${m.type.replace('_',' ')}</span></div>
+      </div>
+      <div class="meta">\${m.project ? '[' + m.project + '] ' : ''}\${m.created_at ? new Date(m.created_at).toLocaleString() : ''}</div>
+      <div class="content">\${esc((m.content || '').substring(0, 200))}</div>
+    </div>
+  \`).join('');
+}
+
+// ─── Detail Modal ───
+async function showDetail(id) {
+  const m = await fetchJson(API + '/api/memory/' + id);
+  if (m.error) return;
+
+  document.getElementById('detailBody').innerHTML = \`
+    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
+      <span class="type-badge type-\${m.type}" style="font-size:13px;padding:4px 12px">\${m.type.replace('_',' ')}</span>
+      <span style="color:var(--text-muted);font-size:12px">\${m.id}</span>
+    </div>
+    <h2>\${esc(m.title)}</h2>
+    <div style="color:var(--text-muted);font-size:13px;margin-bottom:8px">
+      \${m.project ? 'Project: <strong>' + m.project + '</strong> · ' : ''}
+      Created: \${m.created_at ? new Date(m.created_at).toLocaleString() : '-'}
+      \${m.updated_at && m.updated_at !== m.created_at ? ' · Updated: ' + new Date(m.updated_at).toLocaleString() : ''}
+    </div>
+    \${(m.tags||[]).length ? '<div class="tags" style="margin-bottom:12px">' + m.tags.map(t => '<span class="tag">' + esc(t) + '</span>').join('') + '</div>' : ''}
+    <pre>\${esc(m.content)}</pre>
+  \`;
+  document.getElementById('detailModal').classList.add('show');
+}
+
+function closeDetail() {
+  document.getElementById('detailModal').classList.remove('show');
+}
+
+// ─── Tabs ───
+document.querySelectorAll('.tab').forEach(tab => {
+  tab.addEventListener('click', () => {
+    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+    document.querySelectorAll('.panel').forEach(p => p.classList.remove('active'));
+    tab.classList.add('active');
+    document.getElementById('panel-' + tab.dataset.tab).classList.add('active');
+
+    if (tab.dataset.tab === 'timeline') loadTimeline();
+    if (tab.dataset.tab === 'projects') loadProjects();
+  });
+});
+
+function esc(s) { if (!s) return ''; const d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
+
+// ─── Init ───
+loadStats();
+loadMemories();
+
+// Auto-refresh every 30s
+setInterval(() => { loadStats(); }, 30000);
+</script>
+</body>
+</html>`;
+}
+// ─── Server ───
+const server = createServer((req, res) => {
+    const url = new URL(req.url || "/", `http://localhost:${PORT}`);
+    // CORS preflight
+    if (req.method === "OPTIONS") {
+        cors(res);
+        res.writeHead(204);
+        return res.end();
+    }
+    // API routes
+    if (url.pathname.startsWith("/api/")) {
+        return handleApi(req, res, url);
+    }
+    // Dashboard
+    return html(res, getDashboardHtml());
+});
+server.listen(PORT, () => {
+    console.log(`[MCP Memory Dashboard] Running at http://localhost:${PORT}`);
+    console.log(`[MCP Memory Dashboard] CLAUDE_HOME=${CLAUDE_HOME}`);
+});

package/dist/tools/aggregate-patterns.js

@@ -0,0 +1,101 @@
+import { readFile, readdir } from "fs/promises";
+import { join } from "path";
+/**
+ * Scan MISTAKES.md dari semua project, cari pattern yang muncul
+ * di lebih dari 1 project (cross-project pattern detection).
+ *
+ * Juga bisa search by keyword untuk cek apakah bug tertentu
+ * sudah pernah terjadi di project lain.
+ */
+export async function aggregatePatterns(claudeHome, keyword) {
+    const docsRoot = join(claudeHome, "project-docs");
+    let slugs;
+    try {
+        const entries = await readdir(docsRoot, { withFileTypes: true });
+        slugs = entries.filter((e) => e.isDirectory()).map((e) => e.name);
+    }
+    catch {
+        return { error: "Cannot read project-docs directory" };
+    }
+    const allMatches = [];
+    const projectMistakes = {};
+    for (const slug of slugs) {
+        try {
+            const path = join(docsRoot, slug, "MISTAKES.md");
+            const content = await readFile(path, "utf-8");
+            const sections = content.split(/(?=^##\s)/m).filter((s) => s.trim());
+            const titles = [];
+            for (const section of sections) {
+                const titleMatch = section.match(/^##\s+\[.*?\]\s*—\s*(.+)$/m);
+                const title = titleMatch ? titleMatch[1].trim() : "";
+                titles.push(title);
+                // If keyword provided, filter
+                if (keyword) {
+                    const lower = keyword.toLowerCase();
+                    if (section.toLowerCase().includes(lower)) {
+                        allMatches.push({
+                            project: slug,
+                            title,
+                            preview: section.slice(0, 500),
+                        });
+                    }
+                }
+            }
+            projectMistakes[slug] = titles;
+        }
+        catch {
+            // skip projects without MISTAKES.md
+        }
+    }
+    // Cross-project pattern detection: find similar titles across projects
+    const crossPatterns = [];
+    if (!keyword) {
+        const allTitles = Object.entries(projectMistakes);
+        for (let i = 0; i < allTitles.length; i++) {
+            for (let j = i + 1; j < allTitles.length; j++) {
+                const [slugA, titlesA] = allTitles[i];
+                const [slugB, titlesB] = allTitles[j];
+                for (const titleA of titlesA) {
+                    if (!titleA)
+                        continue;
+                    for (const titleB of titlesB) {
+                        if (!titleB)
+                            continue;
+                        if (fuzzyMatch(titleA, titleB)) {
+                            crossPatterns.push({
+                                pattern: titleA,
+                                found_in: [slugA, slugB],
+                            });
+                        }
+                    }
+                }
+            }
+        }
+    }
+    return {
+        projects_scanned: slugs.length,
+        keyword: keyword ?? null,
+        matches: keyword ? allMatches : undefined,
+        cross_patterns: crossPatterns.length > 0 ? crossPatterns : undefined,
+        projects_with_mistakes: Object.keys(projectMistakes),
+        summary: keyword
+            ? `Found ${allMatches.length} matches for "${keyword}" across ${slugs.length} projects`
+            : `Scanned ${slugs.length} projects, found ${crossPatterns.length} cross-project patterns`,
+    };
+}
+/**
+ * Simple fuzzy match: check if 50%+ of words overlap
+ */
+function fuzzyMatch(a, b) {
+    const wordsA = new Set(a.toLowerCase().split(/\s+/).filter((w) => w.length > 3));
+    const wordsB = new Set(b.toLowerCase().split(/\s+/).filter((w) => w.length > 3));
+    if (wordsA.size === 0 || wordsB.size === 0)
+        return false;
+    let overlap = 0;
+    for (const w of wordsA) {
+        if (wordsB.has(w))
+            overlap++;
+    }
+    const minSize = Math.min(wordsA.size, wordsB.size);
+    return overlap / minSize >= 0.5;
+}