aura-code 0.6.3 → 0.10.1

package/dist/viz/index.js

@@ -151,144 +151,23 @@ function stripPlan(p) {
         })),
     };
 }
-const episode_capture_js_1 = require("../ruby/episode-capture.js");
-const competence_js_1 = require("../ruby/competence.js");
-/**
- * Reads the REAL memory store: `~/.aura/memory/{namespace}.json`, one flat
- * file per namespace, each `{ [key]: { value, updated, created? } }`.
- *
- * This memory store is global, not project-scoped — the `memory` tool never
- * keyed entries by project root. (The previous version of this function read
- * from a per-project-hash subdirectory that nothing in the codebase ever
- * wrote to, so this panel has always returned an empty list.)
- */
-function loadMemory() {
-    const dir = path.join(process.env.HOME ?? '/tmp', '.aura', 'memory');
+function loadMemory(projectRoot) {
+    const base = path.join(process.env.HOME ?? '/tmp', '.aura', 'memory');
+    const safe = projectRoot.replace(/[^a-zA-Z0-9_-]/g, '_').slice(0, 80);
+    const dir = path.join(base, safe);
     if (!fs.existsSync(dir))
         return [];
-    const facts = [];
-    for (const file of fs.readdirSync(dir)) {
-        if (!file.endsWith('.json') || file.endsWith('.tmp'))
-            continue;
-        const namespace = file.replace(/\.json$/, '');
+    return fs.readdirSync(dir)
+        .filter(f => f.endsWith('.json') && !f.endsWith('.tmp'))
+        .map(f => {
         try {
-            const store = JSON.parse(fs.readFileSync(path.join(dir, file), 'utf8'));
-            for (const [key, entry] of Object.entries(store)) {
-                if (!entry || typeof entry.value !== 'string')
-                    continue;
-                facts.push({
-                    key,
-                    namespace,
-                    value: entry.value,
-                    updated: entry.updated,
-                    // Entries written before `created` existed fall back to `updated`
-                    // — the earliest timestamp we actually have for them.
-                    created: entry.created ?? entry.updated,
-                });
-            }
+            return JSON.parse(fs.readFileSync(path.join(dir, f), 'utf8'));
         }
-        catch { /* skip an unreadable/corrupt namespace file */ }
-    }
-    return facts.sort((a, b) => new Date(a.created).getTime() - new Date(b.created).getTime());
-}
-/**
- * Synchronous episode reader. Mirrors `episodeStore.loadEpisodes()` exactly
- * (same directory via the store's own `projectDir()`, same "never throws,
- * skip bad files" behaviour) but stays sync — `generateDashboard` must
- * remain sync, since existing tests call it without `await`.
- */
-function loadEpisodesSync(projectRoot) {
-    try {
-        const dir = episode_capture_js_1.episodeStore.projectDir(projectRoot);
-        if (!fs.existsSync(dir))
-            return [];
-        const episodes = [];
-        for (const file of fs.readdirSync(dir)) {
-            if (!file.endsWith('.json'))
-                continue;
-            try {
-                const parsed = JSON.parse(fs.readFileSync(path.join(dir, file), 'utf8'));
-                if (parsed && typeof parsed.timestamp === 'number')
-                    episodes.push(parsed);
-            }
-            catch { /* skip a corrupt episode file */ }
+        catch {
+            return null;
         }
-        return episodes.sort((a, b) => a.timestamp - b.timestamp);
-    }
-    catch {
-        return [];
-    }
-}
-/** Day-bucketed cumulative growth of remembered facts, by first-created date. */
-function buildMemoryGrowth(facts) {
-    const byDay = new Map();
-    for (const f of facts) {
-        const day = (f.created || '').slice(0, 10);
-        if (!day)
-            continue;
-        byDay.set(day, (byDay.get(day) ?? 0) + 1);
-    }
-    const days = Array.from(byDay.keys()).sort();
-    let running = 0;
-    return days.map(date => {
-        running += byDay.get(date);
-        return { date, cumulative: running };
-    });
-}
-/**
- * Day-bucketed learning curve: cumulative episode count, plus a rolling
- * Ruby (small-model) success rate over the last `windowSize` attempted
- * episodes up to and including each day. This is the actual "is it getting
- * better at routing to the small model" signal — competence.ts itself
- * doesn't persist a timeline, it recomputes fresh from episodes each call,
- * so this reconstructs the trend from each episode's own timestamp.
- */
-function buildLearningSeries(episodes, windowSize = 10) {
-    const byDay = new Map();
-    for (const ep of episodes) {
-        const day = new Date(ep.timestamp).toISOString().slice(0, 10);
-        const arr = byDay.get(day) ?? [];
-        arr.push(ep);
-        byDay.set(day, arr);
-    }
-    const days = Array.from(byDay.keys()).sort();
-    let cumulative = 0;
-    const seenSoFar = [];
-    return days.map(date => {
-        const todays = byDay.get(date);
-        cumulative += todays.length;
-        seenSoFar.push(...todays);
-        const attempted = seenSoFar.filter(e => e.rubyAttempted);
-        const recent = attempted.slice(-windowSize);
-        const rollingSuccessRate = recent.length === 0
-            ? 0
-            : recent.filter(e => e.rubySucceeded).length / recent.length;
-        return { date, cumulativeEpisodes: cumulative, rollingSuccessRate };
-    });
-}
-/** Plain-data summary mirroring formatStats()'s definitions, for stat cards. */
-function summariseEpisodes(episodes) {
-    const total = episodes.length;
-    const completed = episodes.filter(e => e.reviewerApproved).length;
-    const avgDurationMs = total === 0
-        ? 0
-        : episodes.reduce((s, e) => s + (e.durationMs ?? 0), 0) / total;
-    const totalTokens = episodes.reduce((s, e) => s + (e.tokensUsed?.ruby ?? 0) + (e.tokensUsed?.largeModel ?? 0), 0);
-    const rubyAttempted = episodes.filter(e => e.rubyAttempted);
-    const rubySuccessRate = rubyAttempted.length === 0
-        ? 0
-        : rubyAttempted.filter(e => e.rubySucceeded).length / rubyAttempted.length;
-    const modelCounts = new Map();
-    for (const e of episodes) {
-        const model = e.largeModelUsed ?? (e.rubySucceeded ? 'ruby (small model)' : undefined);
-        if (model)
-            modelCounts.set(model, (modelCounts.get(model) ?? 0) + 1);
-    }
-    const topModels = Array.from(modelCounts.entries())
-        .sort((a, b) => b[1] - a[1])
-        .slice(0, 6)
-        .map(([model, count]) => ({ model, count }));
-    return { total, completed, avgDurationMs, totalTokens, rubySuccessRate, topModels };
+    })
+        .filter((m) => m !== null);
 }
 // ─────────────────────────────────────────────────────────────────────────────
 // HTML template
@@ -303,8 +182,6 @@ function buildHtml(data) {
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Aura — Memory Dashboard · ${data.projectName}</title>
 <script src="https://d3js.org/d3.v7.min.js"></script>
-<script src="https://unpkg.com/three@0.147.0/build/three.min.js"></script>
-<script src="https://unpkg.com/three@0.147.0/examples/js/controls/OrbitControls.js"></script>
 <style>
   :root {
     --bg:      #0d1117;
@@ -344,11 +221,11 @@ function buildHtml(data) {
   /* Graph panel */
   #graph-svg { background: var(--canvas); border: 1px solid var(--border); border-radius: 8px; flex: 1; min-height: 0; cursor: grab; }
   #graph-svg:active { cursor: grabbing; }
-  #graph-3d-wrap { background: var(--canvas); border: 1px solid var(--border); border-radius: 8px; flex: 1; min-height: 0; position: relative; overflow: hidden; display: none; }
-  #graph-3d-wrap canvas { display: block; width: 100%; height: 100%; }
-  .graph-3d-hint { position: absolute; bottom: 10px; right: 14px; color: var(--dim); font-size: 10px; pointer-events: none; z-index: 2; }
   .graph-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
-  .layout-toggle { display: flex; gap: 4px; }
+  .mode-toggle { display: flex; gap: 4px; }
+  .mode-btn { background: var(--card); border: 1px solid var(--border); border-radius: 6px; color: var(--muted); cursor: pointer; font: inherit; font-size: 11px; padding: 5px 11px; transition: all .12s; }
+  .mode-btn:hover { border-color: var(--border2); color: var(--text); }
+  .mode-btn.active { background: var(--primary); border-color: var(--primary); color: #1c1108; font-weight: 700; }
   .graph-controls input {
     background: var(--card); border: 1px solid var(--border2); border-radius: 6px;
     color: var(--text); font: inherit; font-size: 12px; padding: 6px 12px; width: 220px; outline: none;
@@ -415,31 +292,13 @@ function buildHtml(data) {
   .memory-table td:first-child { color: var(--primary); white-space: nowrap; font-weight: 600; }
   .memory-table tr:hover td { background: var(--card); }
   .memory-val { max-width: 560px; white-space: pre-wrap; word-break: break-word; color: var(--text); }
-  .ns-badge { background: var(--canvas); border: 1px solid var(--border2); border-radius: 10px; color: var(--blue); font-size: 10px; padding: 1px 8px; white-space: nowrap; }
-
-  /* Line charts (memory growth, learning curve) */
-  .chart-card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 16px 18px; }
-  .chart-card .lbl { color: var(--muted); font-size: 10px; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .08em; }
-  .chart-svg { width: 100%; height: 220px; overflow: visible; }
-  .chart-line { fill: none; stroke-width: 2; }
-  .chart-area { opacity: .12; }
-  .chart-dot { stroke: var(--bg); stroke-width: 1.5; }
-  .chart-axis text { fill: var(--dim); font-size: 9px; font-family: inherit; }
-  .chart-axis path, .chart-axis line { stroke: var(--border); }
-  .chart-empty { align-items: center; color: var(--dim); display: flex; font-size: 11px; height: 220px; justify-content: center; }
-
-  /* 3D bar charts (true.js cylinders) + their HTML legends */
-  .chart-3d-container { height: 260px; position: relative; width: 100%; }
-  .chart-3d-container canvas { display: block; height: 100%; width: 100%; }
-  .legend-3d { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
-  .legend-3d-row { align-items: center; display: flex; gap: 7px; }
-  .legend-3d-dot { border-radius: 50%; flex-shrink: 0; height: 10px; width: 10px; }
-  .legend-3d-name { color: var(--text); font-size: 11px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .legend-3d-val { color: var(--muted); font-size: 10px; }
-  .two-col { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
-  @media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
 
   .empty { color: var(--dim); font-size: 12px; padding: 32px; text-align: center; }
+
+  /* New panel styles */
+  .axis line, .axis path { stroke: var(--border); }
+  .grid line { stroke: var(--border); stroke-dasharray: 3,3; }
+  .tooltip { position: fixed; background: #161b22f0; border: 1px solid var(--border2); border-radius: 7px; color: var(--text); font-size: 11px; max-width: 300px; padding: 9px 13px; pointer-events: none; z-index: 999; line-height: 1.6; box-shadow: 0 4px 20px #0008; }
   ::-webkit-scrollbar { width: 5px; height: 5px; }
   ::-webkit-scrollbar-track { background: transparent; }
   ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
@@ -455,16 +314,22 @@ function buildHtml(data) {
   <button onclick="showPanel('graph',this)">Codebase Graph</button>
   <button onclick="showPanel('sessions',this)">Sessions</button>
   <button onclick="showPanel('plans',this)">Execution Plans</button>
-  <button onclick="showPanel('memory',this)">Memory Growth</button>
-  <button onclick="showPanel('learning',this)">Learning</button>
+  <button onclick="showPanel('memory',this)">Agent Memory</button>
+  <button onclick="showPanel('activity',this)">Activity Timeline</button>
+  <button onclick="showPanel('centrality',this)">Code Centrality</button>
+  <button onclick="showPanel('specialists',this)">Specialist Stats</button>
+  <button onclick="showPanel('tools',this)">Tool Usage</button>
 </nav>
 
 <div id="overview" class="panel active"></div>
-<div id="graph"    class="panel"></div>
-<div id="sessions" class="panel"></div>
-<div id="plans"    class="panel"></div>
-<div id="memory"   class="panel"></div>
-<div id="learning" class="panel"></div>
+<div id="graph"       class="panel"></div>
+<div id="sessions"    class="panel"></div>
+<div id="plans"       class="panel"></div>
+<div id="memory"      class="panel"></div>
+<div id="activity"    class="panel"></div>
+<div id="centrality"  class="panel"></div>
+<div id="specialists" class="panel"></div>
+<div id="tools"       class="panel"></div>
 
 <div class="tooltip" id="tooltip" style="display:none"></div>
 
@@ -476,10 +341,12 @@ function showPanel(id, btn) {
   document.querySelectorAll('nav button').forEach(b => b.classList.remove('active'));
   document.getElementById(id).classList.add('active');
   if (btn) btn.classList.add('active');
-  if (id === 'graph'   && !graphInit) initGraph();
-  if (id === 'plans'   && !plansInit) initPlans();
-  if (id === 'memory'   && !memoryInit) initMemoryCharts();
-  if (id === 'learning' && !learningInit) initLearningCharts();
+  if (id === 'graph'       && !graphInit) initGraph();
+  if (id === 'plans'       && !plansInit) initPlans();
+  if (id === 'activity'    && !activityInit) initActivity();
+  if (id === 'centrality'  && !centralityInit) initCentrality();
+  if (id === 'specialists' && !specialistsInit) initSpecialists();
+  if (id === 'tools'       && !toolsInit) initTools();
 }
 
 // ── Overview ─────────────────────────────────────────────────────────────────
@@ -488,7 +355,6 @@ function showPanel(id, btn) {
   const nc = g ? g.nodes.length : 0, ec = g ? g.edges.length : 0;
   const sc = DATA.sessions.length, pc = DATA.plans.length;
   const mc = DATA.memory.length, dc = DATA.plans.filter(p=>p.status==='done').length;
-  const epc = DATA.episodeSummary.total;
   const last = sc ? new Date(DATA.sessions[0].updatedAt).toLocaleString()
              : pc ? new Date(DATA.plans[0].created).toLocaleString() : '—';
 
@@ -509,7 +375,6 @@ function showPanel(id, btn) {
       <div class="stat-card"><div class="num">\${pc}</div><div class="lbl">Exec Plans</div></div>
       <div class="stat-card"><div class="num">\${dc}</div><div class="lbl">Plans Done</div></div>
       <div class="stat-card"><div class="num">\${mc}</div><div class="lbl">Memory Entries</div></div>
-      <div class="stat-card"><div class="num">\${epc}</div><div class="lbl">Episodes Recorded</div></div>
     </div>
     <div class="stat-card" style="max-width:640px">
       <div class="lbl" style="margin-bottom:10px">Codebase Breakdown</div>
@@ -534,37 +399,31 @@ function initGraph() {
 
   const NODE_COLORS = {
     file:      '#58a6ff',
+    concept:   '#d29922',
+    decision:  '#bc8cff',
     function:  '#ff7b72',
     class:     '#d2a8ff',
     interface: '#3fb950',
     const:     '#ffa657',
     type:      '#79c0ff',
     enum:      '#f85149',
-    concept:    '#e3b341',
-    decision:   '#bc8cff',
-    constraint: '#56d4dd',
     node:      '#8b949e',
   };
-  const NODE_R = { file: 13, class: 11, interface: 10, function: 8, const: 7, type: 7, enum: 8, concept: 9, decision: 9, constraint: 9, node: 7 };
+  const NODE_R = { file: 13, concept: 8, decision: 9, class: 11, interface: 10, function: 8, const: 7, type: 7, enum: 8, node: 7 };
 
   const allTypes = [...new Set(DATA.graph.nodes.map(n => n.type || 'node'))];
   const activeTypes = new Set(allTypes);
 
-  panel.innerHTML = \`
-    <div class="graph-controls">
+  panel.innerHTML = \`<div class="graph-controls">
       <input id="graph-search" placeholder="🔍  Search nodes, files…" oninput="filterGraph()">
-      <div class="layout-toggle" id="layout-toggle">
-        <span class="legend-item on" id="layout-force">Force</span>
-        <span class="legend-item" id="layout-radial">Radial</span>
-        <span class="legend-item" id="layout-3d-spread">3D Spread</span>
-        <span class="legend-item" id="layout-3d-explore">3D Explore</span>
+      <div class="mode-toggle" id="graph-mode-toggle">
+        <button class="mode-btn active" data-mode="force">Force</button>
+        <button class="mode-btn" data-mode="treemap">Treemap</button>
       </div>
       <div class="legend" id="legend"></div>
-      <span class="hint" id="graph-hint">scroll to zoom · drag to pan · drag nodes</span>
+      <span class="hint">scroll to zoom · drag to pan · drag nodes</span>
     </div>
-    <svg id="graph-svg"></svg>
-    <div id="graph-3d-wrap"><div class="graph-3d-hint" id="graph-3d-hint"></div></div>
-  \`;
+    <svg id="graph-svg"></svg>\`;
 
   const legendEl = document.getElementById('legend');
   allTypes.forEach(t => {
@@ -580,28 +439,58 @@ function initGraph() {
     legendEl.appendChild(item);
   });
 
-  const svgEl = document.getElementById('graph-svg');
+  const nodes = DATA.graph.nodes.map(n => ({...n}));
+  const edges = DATA.graph.edges.map(e => ({...e}));
+  const tooltip = document.getElementById('tooltip');
+  const ALWAYS_LABEL = new Set(['file','class','interface']);
+
+  let graphMode = 'force';
+  let filterGraph = () => {};
+  window.filterGraph = () => filterGraph();
+
+  document.querySelectorAll('#graph-mode-toggle .mode-btn').forEach(btn => {
+    btn.onclick = () => {
+      if (btn.dataset.mode === graphMode) return;
+      document.querySelectorAll('#graph-mode-toggle .mode-btn').forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+      graphMode = btn.dataset.mode;
+      renderCurrentMode();
+    };
+  });
+
+  function renderCurrentMode() {
+    const svgEl = document.getElementById('graph-svg');
+    svgEl.innerHTML = '';
+    // Fresh copies per render: d3.forceLink mutates edge source/target from
+    // string ids into node object refs in place. Sharing one array across
+    // mode switches means the second Force render gets already-mutated edges
+    // and throws "node not found". Clone so each render starts clean.
+    const nodesCopy = nodes.map(n => ({...n}));
+    const edgesCopy = edges.map(e => ({ ...e, source: e.source.id || e.source, target: e.target.id || e.target }));
+    if (graphMode === 'treemap') {
+      filterGraph = renderTreemapGraph(svgEl, nodesCopy, edgesCopy, NODE_COLORS, activeTypes, tooltip);
+    } else {
+      filterGraph = renderForceGraph(svgEl, nodesCopy, edgesCopy, NODE_COLORS, NODE_R, ALWAYS_LABEL, activeTypes, tooltip);
+    }
+  }
+
+  renderCurrentMode();
+}
+
+function renderForceGraph(svgEl, nodes, edges, NODE_COLORS, NODE_R, ALWAYS_LABEL, activeTypes, tooltip) {
   const W = svgEl.clientWidth || 900, H = svgEl.clientHeight || 580;
-  const svg = d3.select('#graph-svg').attr('width', W).attr('height', H);
+  const svg = d3.select(svgEl).attr('width', W).attr('height', H);
   const g = svg.append('g');
 
   svg.call(d3.zoom().scaleExtent([0.05, 6]).on('zoom', e => g.attr('transform', e.transform)));
 
-  // Arrow marker — bright color
   svg.append('defs').append('marker')
     .attr('id','arr').attr('viewBox','0 -5 10 10').attr('refX',2).attr('refY',0)
     .attr('markerWidth',6).attr('markerHeight',6).attr('orient','auto')
     .append('path').attr('d','M0,-5L10,0L0,5').attr('fill','#484f58');
 
-  const nodes = DATA.graph.nodes.map(n => ({...n}));
-  const edges = DATA.graph.edges.map(e => ({...e}));
-  const tooltip = document.getElementById('tooltip');
-
-  // Show labels for important node types always; others on hover
-  const ALWAYS_LABEL = new Set(['file','class','interface']);
-
   function filterGraph() {
-    const term = document.getElementById('graph-search').value.toLowerCase();
+    const term = (document.getElementById('graph-search').value || '').toLowerCase();
     const vis = new Set(
       nodes.filter(n =>
         activeTypes.has(n.type || 'node') &&
@@ -615,7 +504,6 @@ function initGraph() {
     });
     gLabels.style('opacity', d => vis.has(d.id) ? 1 : 0.06);
   }
-  window.filterGraph = filterGraph;
 
   const sim = d3.forceSimulation(nodes)
     .force('link',      d3.forceLink(edges).id(d=>d.id).distance(d => {
@@ -627,24 +515,6 @@ function initGraph() {
     .force('center',    d3.forceCenter(W/2, H/2))
     .force('collision', d3.forceCollide(d => (NODE_R[d.type||'node']||7) + 6));
 
-  // Ring distance per node type — files innermost (the structural anchors),
-  // then class/interface, then everything else outward. Same key set as
-  // NODE_COLORS/NODE_R above, so every type already has a sensible color
-  // and radius gets a sensible ring too.
-  const RADIAL_BY_TYPE = { file: 70, class: 170, interface: 170, concept: 220, decision: 220, constraint: 220, const: 260, type: 260, enum: 260, function: 320, node: 320 };
-  const radiusFor = d => RADIAL_BY_TYPE[d.type || 'node'] ?? 320;
-
-  function applyLayout(mode) {
-    if (mode === 'radial') {
-      sim.force('center', null);
-      sim.force('radial', d3.forceRadial(radiusFor, W / 2, H / 2).strength(0.9));
-    } else {
-      sim.force('radial', null);
-      sim.force('center', d3.forceCenter(W / 2, H / 2));
-    }
-    sim.alpha(1).restart();
-  }
-
   const gLinks = g.append('g').selectAll('line').data(edges).enter().append('line')
     .attr('stroke','#484f58').attr('stroke-width', d => {
       const r = d.relation || '';
@@ -691,320 +561,133 @@ function initGraph() {
     gLabels.attr('x',d=>d.x).attr('y',d=>d.y);
   });
 
-  // ── 3D mode state ──────────────────────────────────────────────────────────
-  let three3dCleanup = null;  // function to stop the 3D render loop
-  let current3dMode = null;   // 'spread' | 'explore' | null
-
-  function destroy3d() {
-    if (three3dCleanup) { three3dCleanup(); three3dCleanup = null; }
-    current3dMode = null;
-    const wrap = document.getElementById('graph-3d-wrap');
-    // Remove old canvas but keep the hint div
-    const oldCanvas = wrap.querySelector('canvas');
-    if (oldCanvas) oldCanvas.remove();
-  }
+  return filterGraph;
+}
 
-  function show2d() {
-    destroy3d();
-    document.getElementById('graph-svg').style.display = '';
-    document.getElementById('graph-3d-wrap').style.display = 'none';
-    document.getElementById('graph-hint').textContent = 'scroll to zoom · drag to pan · drag nodes';
-  }
+function renderTreemapGraph(svgEl, nodes, edges, NODE_COLORS, activeTypes, tooltip) {
+  const W = svgEl.clientWidth || 900, H = svgEl.clientHeight || 580;
+  const svg = d3.select(svgEl).attr('width', W).attr('height', H);
+  const g = svg.append('g');
+  svg.call(d3.zoom().scaleExtent([0.3, 6]).on('zoom', e => g.attr('transform', e.transform)));
+
+  // Real metric, not a guess: size each leaf by its degree (in + out edges).
+  // No line-of-code data exists in graph.json, so degree is the most honest
+  // "importance" signal actually available.
+  const degree = new Map();
+  edges.forEach(e => {
+    const s = e.source.id || e.source, t = e.target.id || e.target;
+    degree.set(s, (degree.get(s)||0) + 1);
+    degree.set(t, (degree.get(t)||0) + 1);
+  });
 
-  function show3d(mode) {
-    destroy3d();
-    current3dMode = mode;
-    document.getElementById('graph-svg').style.display = 'none';
-    const wrap = document.getElementById('graph-3d-wrap');
-    wrap.style.display = 'block';
-    const hintEl = document.getElementById('graph-3d-hint');
-    if (mode === 'spread') {
-      document.getElementById('graph-hint').textContent = 'auto-rotating 3D layout · scroll to zoom';
-      hintEl.textContent = '✦ auto-rotate';
-    } else {
-      document.getElementById('graph-hint').textContent = 'drag to rotate · scroll to zoom · right-drag to pan';
-      hintEl.textContent = '✦ orbit controls';
+  // Build a directory hierarchy from file-type node ids ("src/agent/loop.ts"
+  // -> src > agent > loop.ts). concept (npm dependency) nodes have no path,
+  // so they group under a synthetic "external dependencies" branch; decision
+  // nodes nest under their associated file's directory.
+  const root = { name: 'root', children: [] };
+  function getBranch(parts) {
+    let cur = root;
+    for (const part of parts) {
+      let next = cur.children.find(c => c.name === part && c.children);
+      if (!next) { next = { name: part, children: [] }; cur.children.push(next); }
+      cur = next;
     }
-    init3dGraph(wrap, mode);
+    return cur;
   }
 
-  function init3dGraph(container, mode) {
-    const W = container.clientWidth || 900;
-    const H = container.clientHeight || 580;
-
-    // ── Scene setup ──────────────────────────────────────────────────
-    const scene = new THREE.Scene();
-    scene.background = new THREE.Color(0x1c2128);
-    scene.fog = new THREE.FogExp2(0x1c2128, 0.0008);
-
-    const camera = new THREE.PerspectiveCamera(55, W / H, 1, 8000);
-    camera.position.set(0, 0, 600);
-
-    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });
-    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
-    renderer.setSize(W, H);
-    container.appendChild(renderer.domElement);
-
-    // ── OrbitControls (explore mode) or auto-rotate (spread mode) ─
-    let controls = null;
-    if (mode === 'explore' && typeof THREE.OrbitControls !== 'undefined') {
-      controls = new THREE.OrbitControls(camera, renderer.domElement);
-      controls.enableDamping = true;
-      controls.dampingFactor = 0.08;
-      controls.rotateSpeed = 0.6;
-      controls.zoomSpeed = 1.2;
-      controls.minDistance = 80;
-      controls.maxDistance = 3000;
+  nodes.forEach(n => {
+    const t = n.type || 'node';
+    let parts;
+    if (t === 'concept') {
+      parts = ['external dependencies'];
+    } else if (t === 'decision') {
+      parts = (n.file || 'decisions').split('/').slice(0, -1);
+      if (!parts.length) parts = ['decisions'];
+    } else if (t === 'file') {
+      // Module-directory nodes end with '/' in the id and shouldn't become
+      // their own leaf — real files nest inside them via the path split.
+      if (n.id.endsWith('/')) return;
+      parts = n.id.split('/').slice(0, -1);
+    } else {
+      parts = (n.file || 'other').split('/').slice(0, -1);
     }
+    const branch = getBranch(parts);
+    branch.children.push({ name: n.label, node: n, value: 1 + (degree.get(n.id)||0) });
+  });
 
-    // ── Zoom via scroll (spread mode — no orbit controls) ────────
-    let spreadRadius = 600;
-    if (mode === 'spread') {
-      renderer.domElement.addEventListener('wheel', e => {
-        e.preventDefault();
-        spreadRadius = Math.max(120, Math.min(3000, spreadRadius + e.deltaY * 0.5));
-      }, { passive: false });
-    }
+  const hierarchy = d3.hierarchy(root)
+    .sum(d => d.value || 0)
+    .sort((a,b) => (b.value||0) - (a.value||0));
+
+  d3.treemap().size([W, H]).paddingOuter(3).paddingTop(d => d.depth ? 16 : 0).paddingInner(2)(hierarchy);
+
+  const leaves = hierarchy.leaves().filter(l => l.data.node);
+  const dirNodes = hierarchy.descendants().filter(d => d.children && d.depth > 0);
+
+  g.append('g').selectAll('rect').data(dirNodes).enter().append('rect')
+    .attr('x', d=>d.x0).attr('y', d=>d.y0)
+    .attr('width', d=>d.x1-d.x0).attr('height', d=>d.y1-d.y0)
+    .attr('fill', 'none').attr('stroke', '#30363d').attr('stroke-width', 1);
+  g.append('g').selectAll('text').data(dirNodes).enter().append('text')
+    .text(d => d.data.name.length > 28 ? d.data.name.slice(0,26)+'…' : d.data.name)
+    .attr('x', d=>d.x0+4).attr('y', d=>d.y0+11)
+    .attr('fill', '#6e7681').attr('font-size','10px').attr('font-weight','700')
+    .attr('pointer-events','none');
+
+  const leafSel = g.append('g').selectAll('rect').data(leaves).enter().append('rect')
+    .attr('x', d=>d.x0).attr('y', d=>d.y0)
+    .attr('width', d=>Math.max(0,d.x1-d.x0)).attr('height', d=>Math.max(0,d.y1-d.y0))
+    .attr('fill', d => NODE_COLORS[d.data.node.type||'node'] || '#8b949e')
+    .attr('fill-opacity', 0.28)
+    .attr('stroke', d => NODE_COLORS[d.data.node.type||'node'] || '#8b949e')
+    .attr('stroke-width', 1)
+    .style('cursor','pointer')
+    .on('mouseover', (e,d) => {
+      tooltip.style.display='block';
+      tooltip.innerHTML = \`<strong>\${d.data.node.label}</strong><br>
+        <span class="t-type">\${d.data.node.type||'node'} · degree \${degree.get(d.data.node.id)||0}</span>
+        \${d.data.node.file ? \`<br><span class="t-file">\${d.data.node.file}</span>\` : ''}\`;
+    })
+    .on('mousemove', e => { tooltip.style.left=(e.clientX+15)+'px'; tooltip.style.top=(e.clientY-8)+'px'; })
+    .on('mouseout',  () => { tooltip.style.display='none'; });
 
-    // ── Node data with 3D positions ──────────────────────────────
-    const n3 = DATA.graph.nodes.map((n, i) => {
-      // Initial sphere around origin, randomised
-      const phi = Math.acos(2 * Math.random() - 1);
-      const theta = Math.random() * Math.PI * 2;
-      const r = 100 + Math.random() * 250;
-      return {
-        ...n,
-        x: r * Math.sin(phi) * Math.cos(theta),
-        y: r * Math.sin(phi) * Math.sin(theta),
-        z: r * Math.cos(phi),
-        vx: 0, vy: 0, vz: 0,
-      };
+  g.append('g').selectAll('text').data(leaves.filter(l => (l.x1-l.x0) > 40 && (l.y1-l.y0) > 18)).enter().append('text')
+    .text(d => { const w = d.x1-d.x0; const max = Math.floor(w/6.5); const lbl = d.data.node.label; return lbl.length > max ? lbl.slice(0,Math.max(1,max-1))+'…' : lbl; })
+    .attr('x', d=>d.x0+4).attr('y', d=>d.y0+13)
+    .attr('fill', d => NODE_COLORS[d.data.node.type||'node'] || '#c9d1d9')
+    .attr('font-size','10px').attr('pointer-events','none');
+
+  // Edge overlay: dependency arcs drawn over the treemap, connecting leaf
+  // centers. Curved so overlapping edges stay visually separable.
+  const center = new Map(leaves.map(l => [l.data.node.id, [(l.x0+l.x1)/2, (l.y0+l.y1)/2]]));
+  const edgeSel = g.append('g').selectAll('path').data(edges.filter(e => {
+    const s = e.source.id || e.source, t = e.target.id || e.target;
+    return center.has(s) && center.has(t);
+  })).enter().append('path')
+    .attr('fill','none').attr('stroke','#e6edf3').attr('stroke-width',0.8).attr('opacity',0.35)
+    .attr('d', d => {
+      const s = center.get(d.source.id || d.source), t = center.get(d.target.id || d.target);
+      const mx = (s[0]+t[0])/2, my = (s[1]+t[1])/2 - Math.abs(t[0]-s[0])*0.12;
+      return \`M\${s[0]},\${s[1]} Q\${mx},\${my} \${t[0]},\${t[1]}\`;
     });
-    const idMap = new Map(n3.map((n, i) => [n.id, i]));
-    const e3 = DATA.graph.edges.map(e => ({
-      si: idMap.get(typeof e.source === 'object' ? e.source.id : e.source) ?? -1,
-      ti: idMap.get(typeof e.target === 'object' ? e.target.id : e.target) ?? -1,
-      relation: e.relation,
-    })).filter(e => e.si >= 0 && e.ti >= 0);
-
-    // ── 3D force simulation (simple Euler integration) ──────────
-    const SIM_ITERS = 200;
-    const REPULSION = 800;
-    const SPRING_K = 0.04;
-    const SPRING_REST = 60;
-    const DAMPING = 0.85;
-    const CENTER_PULL = 0.001;
-
-    for (let iter = 0; iter < SIM_ITERS; iter++) {
-      // Repulsion (O(n²) — fine for < 2000 nodes)
-      for (let i = 0; i < n3.length; i++) {
-        for (let j = i + 1; j < n3.length; j++) {
-          let dx = n3[i].x - n3[j].x, dy = n3[i].y - n3[j].y, dz = n3[i].z - n3[j].z;
-          let dist = Math.sqrt(dx*dx + dy*dy + dz*dz) || 1;
-          let force = REPULSION / (dist * dist);
-          let fx = dx / dist * force, fy = dy / dist * force, fz = dz / dist * force;
-          n3[i].vx += fx; n3[i].vy += fy; n3[i].vz += fz;
-          n3[j].vx -= fx; n3[j].vy -= fy; n3[j].vz -= fz;
-        }
-      }
-      // Springs (edges)
-      for (const e of e3) {
-        const s = n3[e.si], t = n3[e.ti];
-        let dx = t.x - s.x, dy = t.y - s.y, dz = t.z - s.z;
-        let dist = Math.sqrt(dx*dx + dy*dy + dz*dz) || 1;
-        let force = SPRING_K * (dist - SPRING_REST);
-        let fx = dx / dist * force, fy = dy / dist * force, fz = dz / dist * force;
-        s.vx += fx; s.vy += fy; s.vz += fz;
-        t.vx -= fx; t.vy -= fy; t.vz -= fz;
-      }
-      // Center pull + damping + integrate
-      for (const n of n3) {
-        n.vx -= n.x * CENTER_PULL;
-        n.vy -= n.y * CENTER_PULL;
-        n.vz -= n.z * CENTER_PULL;
-        n.vx *= DAMPING; n.vy *= DAMPING; n.vz *= DAMPING;
-        n.x += n.vx; n.y += n.vy; n.z += n.vz;
-      }
-    }
-
-    // ── Build Three.js objects ───────────────────────────────────
-    const NC = {
-      file:'#58a6ff', function:'#ff7b72', class:'#d2a8ff', interface:'#3fb950',
-      const:'#ffa657', type:'#79c0ff', enum:'#f85149', concept:'#e3b341',
-      decision:'#bc8cff', constraint:'#56d4dd', node:'#8b949e', module:'#58a6ff',
-    };
-    const NR3 = { file:5, class:4.5, interface:4, function:3.5, const:3, type:3, enum:3.5, concept:3.5, decision:3.5, constraint:3.5, node:3, module:4 };
-
-    // Nodes — glowing spheres
-    const spheres = [];
-    for (const n of n3) {
-      const color = new THREE.Color(NC[n.type||'node'] || '#8b949e');
-      const r = NR3[n.type||'node'] || 3;
-      const geo = new THREE.SphereGeometry(r, 16, 12);
-      const mat = new THREE.MeshBasicMaterial({ color });
-      const mesh = new THREE.Mesh(geo, mat);
-      mesh.position.set(n.x, n.y, n.z);
-      mesh.userData = n;
-      scene.add(mesh);
-      spheres.push(mesh);
-
-      // Glow ring
-      const glowGeo = new THREE.SphereGeometry(r * 1.6, 12, 8);
-      const glowMat = new THREE.MeshBasicMaterial({ color, transparent: true, opacity: 0.08 });
-      const glow = new THREE.Mesh(glowGeo, glowMat);
-      glow.position.copy(mesh.position);
-      scene.add(glow);
-    }
-
-    // Edges — lines
-    const edgeLineMat = new THREE.LineBasicMaterial({ color: 0x484f58, transparent: true, opacity: 0.35 });
-    for (const e of e3) {
-      const s = n3[e.si], t = n3[e.ti];
-      const geo = new THREE.BufferGeometry().setFromPoints([
-        new THREE.Vector3(s.x, s.y, s.z),
-        new THREE.Vector3(t.x, t.y, t.z),
-      ]);
-      scene.add(new THREE.Line(geo, edgeLineMat));
-    }
 
-    // Labels (sprite text) — only for file / class / interface
-    const LABEL_TYPES = new Set(['file','class','interface']);
-    for (const n of n3) {
-      if (!LABEL_TYPES.has(n.type || '')) continue;
-      const label = n.label.length > 18 ? n.label.slice(0, 16) + '…' : n.label;
-      const canvas2 = document.createElement('canvas');
-      const ctx2 = canvas2.getContext('2d');
-      canvas2.width = 256; canvas2.height = 48;
-      ctx2.fillStyle = 'transparent';
-      ctx2.fillRect(0, 0, 256, 48);
-      ctx2.font = 'bold 22px monospace';
-      ctx2.fillStyle = NC[n.type||'node'] || '#8b949e';
-      ctx2.fillText(label, 4, 32);
-      const tex = new THREE.CanvasTexture(canvas2);
-      tex.minFilter = THREE.LinearFilter;
-      const spriteMat = new THREE.SpriteMaterial({ map: tex, transparent: true, opacity: 0.85, depthWrite: false });
-      const sprite = new THREE.Sprite(spriteMat);
-      sprite.position.set(n.x + (NR3[n.type||'node']||3) + 6, n.y + 2, n.z);
-      sprite.scale.set(48, 9, 1);
-      scene.add(sprite);
-    }
-
-    // ── Raycaster for tooltips ──────────────────────────────────
-    const raycaster = new THREE.Raycaster();
-    raycaster.params.Points = { threshold: 5 };
-    const mouse = new THREE.Vector2();
-    const tooltip3d = document.getElementById('tooltip');
-    let hoveredMesh = null;
-
-    renderer.domElement.addEventListener('mousemove', e => {
-      const rect = renderer.domElement.getBoundingClientRect();
-      mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
-      mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
-      raycaster.setFromCamera(mouse, camera);
-      const hits = raycaster.intersectObjects(spheres);
-      if (hits.length > 0) {
-        const d = hits[0].object.userData;
-        tooltip3d.style.display = 'block';
-        tooltip3d.innerHTML = \`<strong>\${d.label}</strong><br>
-          <span class="t-type">\${d.type||'node'}</span>
-          \${d.file ? \`<br><span class="t-file">\${d.file}</span>\` : ''}\`;
-        tooltip3d.style.left = (e.clientX + 15) + 'px';
-        tooltip3d.style.top = (e.clientY - 8) + 'px';
-        if (hoveredMesh !== hits[0].object) {
-          if (hoveredMesh) hoveredMesh.scale.setScalar(1);
-          hoveredMesh = hits[0].object;
-          hoveredMesh.scale.setScalar(1.5);
-        }
-      } else {
-        tooltip3d.style.display = 'none';
-        if (hoveredMesh) { hoveredMesh.scale.setScalar(1); hoveredMesh = null; }
-      }
+  function filterGraph() {
+    const term = (document.getElementById('graph-search').value || '').toLowerCase();
+    leafSel.style('opacity', d => {
+      const n = d.data.node;
+      const match = activeTypes.has(n.type||'node') && (!term || n.label.toLowerCase().includes(term) || (n.file||'').toLowerCase().includes(term));
+      return match ? 1 : 0.06;
+    });
+    edgeSel.style('opacity', d => {
+      const s = d.source.id || d.source, t = d.target.id || d.target;
+      const sn = leaves.find(l=>l.data.node.id===s), tn = leaves.find(l=>l.data.node.id===t);
+      const svis = sn && activeTypes.has(sn.data.node.type||'node');
+      const tvis = tn && activeTypes.has(tn.data.node.type||'node');
+      return svis && tvis ? 0.35 : 0.02;
     });
-
-    // ── Ambient particles for depth perception ──────────────────
-    const particleCount = 200;
-    const pGeo = new THREE.BufferGeometry();
-    const pPos = new Float32Array(particleCount * 3);
-    for (let i = 0; i < particleCount; i++) {
-      pPos[i*3]   = (Math.random() - 0.5) * 1200;
-      pPos[i*3+1] = (Math.random() - 0.5) * 1200;
-      pPos[i*3+2] = (Math.random() - 0.5) * 1200;
-    }
-    pGeo.setAttribute('position', new THREE.BufferAttribute(pPos, 3));
-    const pMat = new THREE.PointsMaterial({ color: 0x30363d, size: 1.5, transparent: true, opacity: 0.5 });
-    scene.add(new THREE.Points(pGeo, pMat));
-
-    // ── Animate ─────────────────────────────────────────────────
-    let animId = null;
-    let autoAngle = 0;
-    function animate() {
-      animId = requestAnimationFrame(animate);
-
-      if (mode === 'spread') {
-        autoAngle += 0.003;
-        // Orbit on a fixed radius. Previously x/y were derived from the live,
-        // mutating camera.position.z (read and overwritten in the same frame),
-        // which made the camera teleport between frames — the flicker. Driving
-        // the orbit from a stable radius keeps it smooth; the wheel adjusts it.
-        camera.position.x = Math.sin(autoAngle) * spreadRadius;
-        camera.position.z = Math.cos(autoAngle) * spreadRadius;
-        camera.position.y = Math.sin(autoAngle * 0.4) * spreadRadius * 0.3;
-        camera.lookAt(0, 0, 0);
-      }
-
-      if (controls) controls.update();
-      renderer.render(scene, camera);
-    }
-    animate();
-
-    // ── Resize handler ──────────────────────────────────────────
-    function onResize() {
-      const w = container.clientWidth || 900;
-      const h = container.clientHeight || 580;
-      camera.aspect = w / h;
-      camera.updateProjectionMatrix();
-      renderer.setSize(w, h);
-    }
-    window.addEventListener('resize', onResize);
-
-    // ── Cleanup function ────────────────────────────────────────
-    three3dCleanup = () => {
-      if (animId) cancelAnimationFrame(animId);
-      window.removeEventListener('resize', onResize);
-      if (controls) controls.dispose();
-      renderer.dispose();
-    };
-  }
-
-  const forcePill = document.getElementById('layout-force');
-  const radialPill = document.getElementById('layout-radial');
-  const spread3dPill = document.getElementById('layout-3d-spread');
-  const explore3dPill = document.getElementById('layout-3d-explore');
-  const allPills = [forcePill, radialPill, spread3dPill, explore3dPill];
-
-  function activatePill(pill) {
-    allPills.forEach(p => p.classList.remove('on'));
-    pill.classList.add('on');
   }
 
-  forcePill.onclick = () => {
-    activatePill(forcePill);
-    show2d();
-    applyLayout('force');
-  };
-  radialPill.onclick = () => {
-    activatePill(radialPill);
-    show2d();
-    applyLayout('radial');
-  };
-  spread3dPill.onclick = () => {
-    activatePill(spread3dPill);
-    show3d('spread');
-  };
-  explore3dPill.onclick = () => {
-    activatePill(explore3dPill);
-    show3d('explore');
-  };
+  return filterGraph;
 }
 
 // ── Sessions ──────────────────────────────────────────────────────────────────
@@ -1164,307 +847,622 @@ function renderDag(plan) {
   });
 }
 
-// ── Shared helpers ───────────────────────────────────────────────────────────
-function fmtDuration(ms) {
-  if (!ms || ms < 0) return '—';
-  const s = Math.round(ms / 1000);
-  if (s < 60) return s + 's';
-  return Math.floor(s / 60) + 'm ' + (s % 60) + 's';
-}
-function fmtTokens(n) {
-  if (!n) return '0';
-  if (n >= 1e6) return (n / 1e6).toFixed(1) + 'M';
-  if (n >= 1e3) return (n / 1e3).toFixed(1) + 'K';
-  return String(n);
-}
-function fmtPct(r) { return Math.round(r * 100) + '%'; }
-
-/** Minimal D3 line+area chart. data is an array of day-bucketed points. */
-function drawLineChart(svg, data, xKey, yKey, color, fmt) {
-  fmt = fmt || (v => v);
-  const W = svg.clientWidth || 600, H = 220;
-  const margin = { top: 10, right: 16, bottom: 24, left: 40 };
-  const x = d3.scaleTime()
-    .domain(d3.extent(data, d => new Date(d[xKey])))
-    .range([margin.left, W - margin.right]);
-  const yMax = Math.max(d3.max(data, d => d[yKey]) || 1, 0.0001);
-  const y = d3.scaleLinear().domain([0, yMax * 1.15]).range([H - margin.bottom, margin.top]);
-
-  const s = d3.select(svg).attr('viewBox', \`0 0 \${W} \${H}\`);
-
-  s.append('g').attr('class', 'chart-axis')
-    .attr('transform', \`translate(0,\${H - margin.bottom})\`)
-    .call(d3.axisBottom(x).ticks(Math.min(6, data.length)).tickFormat(d3.timeFormat('%b %d')));
-  s.append('g').attr('class', 'chart-axis')
-    .attr('transform', \`translate(\${margin.left},0)\`)
-    .call(d3.axisLeft(y).ticks(4).tickFormat(fmt));
-
-  const line = d3.line().x(d => x(new Date(d[xKey]))).y(d => y(d[yKey])).curve(d3.curveMonotoneX);
-  const area = d3.area().x(d => x(new Date(d[xKey]))).y0(H - margin.bottom).y1(d => y(d[yKey])).curve(d3.curveMonotoneX);
-
-  s.append('path').datum(data).attr('class', 'chart-area').attr('fill', color).attr('d', area);
-  s.append('path').datum(data).attr('class', 'chart-line').attr('stroke', color).attr('d', line);
-
-  s.selectAll('.chart-dot').data(data).join('circle')
-    .attr('class', 'chart-dot')
-    .attr('cx', d => x(new Date(d[xKey]))).attr('cy', d => y(d[yKey])).attr('r', 3.5).attr('fill', color)
-    .on('mouseover', (e, d) => {
-      tooltip.style.display = 'block';
-      tooltip.innerHTML = \`<strong>\${new Date(d[xKey]).toLocaleDateString()}</strong><br>\${fmt(d[yKey])}\`;
-    })
-    .on('mousemove', e => { tooltip.style.left = (e.clientX + 15) + 'px'; tooltip.style.top = (e.clientY - 8) + 'px'; })
-    .on('mouseout', () => tooltip.style.display = 'none');
-}
+// ── Agent Memory ──────────────────────────────────────────────────────────────
+(function() {
+  const panel = document.getElementById('memory');
+  if (!DATA.memory.length) {
+    panel.innerHTML = '<div class="empty">No orchestration memory entries found.</div>';
+    return;
+  }
+  const rows = DATA.memory.map(m => {
+    const ts = new Date(m.timestamp).toLocaleString();
+    const val = typeof m.value === 'string' ? m.value : JSON.stringify(m.value, null, 2);
+    return \`<tr>
+      <td>\${(m.key||'').replace(/</g,'&lt;')}</td>
+      <td style="color:var(--muted)">\${(m.stepId||'').replace(/</g,'&lt;')}</td>
+      <td style="color:var(--dim);white-space:nowrap">\${ts}</td>
+      <td class="memory-val">\${val.slice(0,400).replace(/</g,'&lt;')}\${val.length>400?'…':''}</td>
+    </tr>\`;
+  }).join('');
+  panel.innerHTML = \`
+    <table class="memory-table">
+      <thead><tr><th>Key</th><th>Step</th><th>Written</th><th>Value</th></tr></thead>
+      <tbody>\${rows}</tbody>
+    </table>
+  \`;
+})();
 
-// ── 3D bar chart colors (shared between THREE materials and HTML legend swatches —
-//    same string feeds both, so the legend always matches what's on screen) ────
-function successRateColor(rate) {
-  const hue = Math.round(rate * 120); // 0=red (bad) → 120=green (good)
-  return 'hsl(' + hue + ',65%,50%)';
-}
-const MODEL_PALETTE = ['#f0883e', '#58a6ff', '#bc8cff', '#3fb950', '#d29922', '#f85149'];
-
-function legendRow(label, value, swatch) {
-  return \`<div class="legend-3d-row">
-    <span class="legend-3d-dot" style="background:\${swatch}"></span>
-    <span class="legend-3d-name">\${String(label).replace(/</g,'&lt;')}</span>
-    <span class="legend-3d-val">\${value}</span>
-  </div>\`;
-}
+// ── Activity Timeline ───────────────────────────────────────────────────────────
+let activityInit = false;
+function initActivity() {
+  activityInit = true;
+  const panel = document.getElementById('activity');
+
+  // Prepare data
+  const sessionEvents = DATA.sessions.map(s => ({
+    date: new Date(s.createdAt),
+    type: 'session',
+    id: s.id,
+    title: s.title || 'Untitled Session'
+  }));
+
+  const planEvents = DATA.plans.map(p => ({
+    date: new Date(p.created),
+    type: 'plan',
+    id: p.id,
+    goal: p.goal,
+    status: p.status
+  }));
+
+  const allEvents = [...sessionEvents, ...planEvents].sort((a, b) => a.date - b.date);
+
+  if (allEvents.length === 0) {
+    panel.innerHTML = '<div class="empty">No activity data found.</div>';
+    return;
+  }
 
-/**
- * True rotatable 3D bar chart (cylinders) via three.js. Drag horizontally to
- * orbit; auto-rotates slowly when idle. Hover a bar for its value via
- * raycasting into the existing global tooltip div.
- *
- * 'items': [{ label, value, color }] — color is any CSS color string, used
- * directly as both the THREE.js material color and (by the caller) the
- * legend swatch, so the two can never drift out of sync.
- *
- * Must only be called once its canvas is actually visible — a hidden
- * (display:none) container has zero width, which would size the renderer
- * wrong. That's why this is invoked from the lazy init*Charts() functions
- * below, the same way the codebase graph defers initGraph() until shown.
- */
-function init3DBarChart(canvas, items) {
-  if (!canvas || !items.length) return;
-  const container = canvas.parentElement;
-  const W = container.clientWidth || 480, H = 260;
-  canvas.width = W; canvas.height = H;
-
-  const scene = new THREE.Scene();
-  const camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 100);
-  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
-  renderer.setSize(W, H, false);
-  renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
-
-  scene.add(new THREE.AmbientLight(0xffffff, 0.55));
-  const key = new THREE.DirectionalLight(0xffffff, 0.95);
-  key.position.set(4, 8, 6);
-  scene.add(key);
-  const rim = new THREE.DirectionalLight(0x88aaff, 0.3);
-  rim.position.set(-4, 2, -4);
-  scene.add(rim);
-
-  const group = new THREE.Group();
-  scene.add(group);
-
-  const maxVal = Math.max(1, ...items.map(it => it.value));
-  const n = items.length;
-  const spacing = 1.7;
-  const totalWidth = (n - 1) * spacing;
-  const meshes = [];
-
-  items.forEach((it, i) => {
-    const h = Math.max(0.2, (it.value / maxVal) * 3.2);
-    const geo = new THREE.CylinderGeometry(0.55, 0.62, h, 28);
-    const mat = new THREE.MeshStandardMaterial({ color: new THREE.Color(it.color), roughness: 0.45, metalness: 0.15 });
-    const mesh = new THREE.Mesh(geo, mat);
-    mesh.position.set(i * spacing - totalWidth / 2, h / 2, 0);
-    mesh.userData = { label: it.label, value: it.value };
-    group.add(mesh);
-    meshes.push(mesh);
+  panel.innerHTML = \`
+    <div style="display:flex;gap:14px;flex:1;min-height:0">
+      <div style="width:280px;overflow-y:auto;padding-right:10px" id="timeline-list"></div>
+      <svg id="timeline-svg" style="flex:1;min-height:0;background:var(--canvas);border:1px solid var(--border);border-radius:8px"></svg>
+    </div>
+  \`;
+
+  // Build timeline list
+  const listEl = document.getElementById('timeline-list');
+  allEvents.forEach((evt, i) => {
+    const item = document.createElement('div');
+    item.className = 'session-card';
+    item.style.padding = '10px 12px';
+    const color = evt.type === 'session' ? 'var(--amber)' : 'var(--purple)';
+    const statusBadge = evt.status ? \`<span class="status-badge status-\${evt.status}">\${evt.status}</span>\` : '';
+    item.innerHTML = \`
+      <div style="display:flex;align-items:center;gap:8px;margin-bottom:4px">
+        <span style="color:\${color};font-size:10px;font-weight:700;text-transform:uppercase">\${evt.type}</span>
+        <span style="color:var(--dim);font-size:10px">\${evt.date.toLocaleDateString()}</span>
+      </div>
+      <div style="color:var(--text);font-size:11px;line-height:1.4">\${(evt.title || evt.goal || '').slice(0,80)}</div>
+      \${statusBadge}
+    \`;
+    item.onclick = () => highlightTimelineEvent(i);
+    listEl.appendChild(item);
   });
 
-  const ground = new THREE.Mesh(
-    new THREE.CircleGeometry(totalWidth / 2 + 1.5, 48),
-    new THREE.MeshStandardMaterial({ color: 0x161b22, roughness: 0.95 }),
-  );
-  ground.rotation.x = -Math.PI / 2;
-  group.add(ground);
+  // Create timeline visualization
+  const svgEl = document.getElementById('timeline-svg');
+  const W = svgEl.clientWidth || 600, H = svgEl.clientHeight || 400;
+  const svg = d3.select(svgEl).attr('width', W).attr('height', H);
 
-  camera.position.set(0, 3.6, totalWidth + 5.5);
-  camera.lookAt(0, 1, 0);
+  const margin = {top: 40, right: 40, bottom: 60, left: 60};
+  const width = W - margin.left - margin.right;
+  const height = H - margin.top - margin.bottom;
 
-  let rotY = 0, dragging = false, lastX = 0, autoRotate = true;
-  canvas.style.cursor = 'grab';
+  const g = svg.append('g').attr('transform', \`translate(\${margin.left},\${margin.top})\`);
 
-  canvas.addEventListener('pointerdown', e => {
-    dragging = true; autoRotate = false; lastX = e.clientX; canvas.style.cursor = 'grabbing';
-  });
-  window.addEventListener('pointerup', () => { dragging = false; canvas.style.cursor = 'grab'; });
-  window.addEventListener('pointermove', e => {
-    if (dragging) { rotY += (e.clientX - lastX) * 0.008; lastX = e.clientX; }
+  // Time scale
+  const timeExtent = d3.extent(allEvents, d => d.date);
+  const xScale = d3.scaleTime().domain(timeExtent).range([0, width]);
+
+  // Group by day
+  const dayBins = d3.timeDays(d3.timeDay.offset(timeExtent[0], -1), d3.timeDay.offset(timeExtent[1], 1));
+  const binnedData = dayBins.map(day => {
+    const dayEvents = allEvents.filter(e =>
+      d3.timeDay.floor(e.date).getTime() === day.getTime()
+    );
+    return {
+      date: day,
+      sessions: dayEvents.filter(e => e.type === 'session').length,
+      plans: dayEvents.filter(e => e.type === 'plan').length,
+      total: dayEvents.length
+    };
+  }).filter(d => d.total > 0);
+
+  // Y scales
+  const maxY = d3.max(binnedData, d => d.total) || 1;
+  const yScale = d3.scaleLinear().domain([0, maxY]).range([height, 0]);
+
+  // Axes
+  const xAxis = d3.axisBottom(xScale).tickFormat(d3.timeFormat('%b %d'));
+  const yAxis = d3.axisLeft(yScale).ticks(5);
+
+  g.append('g').attr('class', 'x axis').attr('transform', \`translate(0,\${height})\`).call(xAxis)
+   .selectAll('text').style('color','var(--muted)').style('font-size','10px');
+
+  g.append('g').attr('class', 'y axis').call(yAxis)
+   .selectAll('text').style('color','var(--muted)').style('font-size','10px');
+
+  g.selectAll('.domain, .tick line').style('stroke','var(--border)');
+
+  // Stack
+  const stack = d3.stack().keys(['sessions', 'plans']);
+  const stackedData = stack(binnedData);
+
+  const area = d3.area()
+    .x(d => xScale(d.data.date))
+    .y0(d => yScale(d[0]))
+    .y1(d => yScale(d[1]));
+
+  const colors = {sessions: '#d29922', plans: '#bc8cff'};
+
+  stackedData.forEach((layer, i) => {
+    const key = layer.key;
+    g.append('path')
+      .datum(layer)
+      .attr('fill', colors[key])
+      .attr('fill-opacity', 0.7)
+      .attr('d', area);
   });
 
-  const raycaster = new THREE.Raycaster();
-  const ndc = new THREE.Vector2();
-  canvas.addEventListener('pointermove', e => {
-    const rect = canvas.getBoundingClientRect();
-    ndc.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
-    ndc.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
-    raycaster.setFromCamera(ndc, camera);
-    const hit = raycaster.intersectObjects(meshes)[0];
-    if (hit) {
+  // Event points
+  const eventPoints = g.append('g').selectAll('circle')
+    .data(allEvents)
+    .enter().append('circle')
+    .attr('cx', d => xScale(d.date))
+    .attr('cy', d => {
+      const dayData = binnedData.find(b => d3.timeDay.floor(b.date).getTime() === d3.timeDay.floor(d.date).getTime());
+      if (!dayData) return height / 2;
+      const y = height - (dayData.total / maxY) * height / 2;
+      return y + Math.random() * 40 - 20; // jitter
+    })
+    .attr('r', 5)
+    .attr('fill', d => d.type === 'session' ? '#d29922' : '#bc8cff')
+    .attr('stroke', '#0d1117')
+    .attr('stroke-width', 2)
+    .style('cursor', 'pointer')
+    .on('mouseover', function(e, d) {
+      d3.select(this).attr('r', 8);
       tooltip.style.display = 'block';
-      tooltip.innerHTML = \`<strong>\${hit.object.userData.label}</strong><br>\${hit.object.userData.value}\`;
+      tooltip.innerHTML = \`<strong>\${d.type.toUpperCase()}</strong><br>
+        \${d.date.toLocaleString()}<br>
+        \${d.title || d.goal || ''}\`;
+    })
+    .on('mousemove', e => {
       tooltip.style.left = (e.clientX + 15) + 'px';
       tooltip.style.top = (e.clientY - 8) + 'px';
-    } else {
+    })
+    .on('mouseout', function() {
+      d3.select(this).attr('r', 5);
       tooltip.style.display = 'none';
+    });
+
+  // Grid lines
+  g.append('g').attr('class', 'grid')
+    .datum(d3.range(0, maxY + 1, Math.max(1, Math.ceil(maxY / 5))))
+    .append('g')
+    .attr('stroke', 'var(--border)')
+    .attr('stroke-width', 0.5)
+    .attr('stroke-dasharray', '3,3')
+    .selectAll('line')
+    .data(d => d)
+    .enter().append('line')
+    .attr('x1', 0).attr('x2', width)
+    .attr('y1', d => yScale(d))
+    .attr('y2', d => yScale(d));
+
+  function highlightTimelineEvent(index) {
+    eventPoints
+      .attr('stroke', d => d.type === 'session' ? '#d29922' : '#bc8cff')
+      .attr('stroke-width', 2)
+      .attr('r', 5);
+
+    const target = eventPoints.nodes()[index];
+    if (target) {
+      d3.select(target)
+        .attr('stroke', '#f0883e')
+        .attr('stroke-width', 4)
+        .attr('r', 10);
     }
-  });
-  canvas.addEventListener('pointerleave', () => { tooltip.style.display = 'none'; });
-
-  (function tick() {
-    if (autoRotate) rotY += 0.0025;
-    group.rotation.y = rotY;
-    renderer.render(scene, camera);
-    requestAnimationFrame(tick);
-  })();
+  }
 }
 
-// ── Memory Growth ────────────────────────────────────────────────────────────
-let memoryInit = false;
-(function() {
-  const panel = document.getElementById('memory');
-  const facts = DATA.memory;
-  const growth = DATA.memoryGrowth;
-  const namespaces = new Set(facts.map(f => f.namespace)).size;
-  const oldest = facts.length ? new Date(facts[0].created).toLocaleDateString() : '—';
-  const newest = facts.length ? new Date(facts[facts.length-1].created).toLocaleDateString() : '—';
-
-  const rows = [...facts].reverse().map(f => {
-    const val = f.value || '';
-    return \`<tr>
-      <td>\${f.key.replace(/</g,'&lt;')}</td>
-      <td><span class="ns-badge">\${f.namespace.replace(/</g,'&lt;')}</span></td>
-      <td style="color:var(--dim);white-space:nowrap">\${new Date(f.created).toLocaleString()}</td>
-      <td style="color:var(--dim);white-space:nowrap">\${new Date(f.updated).toLocaleString()}</td>
-      <td class="memory-val">\${val.slice(0,400).replace(/</g,'&lt;')}\${val.length>400?'…':''}</td>
-    </tr>\`;
-  }).join('');
+// ── Code Centrality ────────────────────────────────────────────────────────────
+let centralityInit = false;
+function initCentrality() {
+  centralityInit = true;
+  const panel = document.getElementById('centrality');
+
+  if (!DATA.graph || !DATA.graph.nodes.length) {
+    panel.innerHTML = '<div class="empty">No graph data available.</div>';
+    return;
+  }
+
+  // Calculate centrality measures
+  const nodes = DATA.graph.nodes.map(n => ({...n}));
+  const edges = DATA.graph.edges.map(e => ({...e}));
+
+  // Degree centrality
+  const degree = new Map();
+  const inDegree = new Map();
+  const outDegree = new Map();
+
+  edges.forEach(e => {
+    const s = e.source.id || e.source, t = e.target.id || e.target;
+    outDegree.set(s, (outDegree.get(s) || 0) + 1);
+    inDegree.set(t, (inDegree.get(t) || 0) + 1);
+    degree.set(s, (degree.get(s) || 0) + 1);
+    degree.set(t, (degree.get(t) || 0) + 1);
+  });
+
+  const nodeCentrality = nodes.map(n => ({
+    ...n,
+    degree: degree.get(n.id) || 0,
+    inDegree: inDegree.get(n.id) || 0,
+    outDegree: outDegree.get(n.id) || 0,
+    centralityScore: (degree.get(n.id) || 0) + (n.type === 'file' ? 2 : 0)
+  })).sort((a, b) => b.centralityScore - a.centralityScore);
+
+  const topNodes = nodeCentrality.slice(0, 20);
 
   panel.innerHTML = \`
-    <div class="stats-grid">
-      <div class="stat-card"><div class="num">\${facts.length}</div><div class="lbl">Facts Remembered</div></div>
-      <div class="stat-card"><div class="num">\${namespaces}</div><div class="lbl">Namespaces</div></div>
-      <div class="stat-card"><div class="num" style="font-size:18px">\${oldest}</div><div class="lbl">First Remembered</div></div>
-      <div class="stat-card"><div class="num" style="font-size:18px">\${newest}</div><div class="lbl">Most Recent</div></div>
-    </div>
-    <div class="chart-card">
-      <div class="lbl">Cumulative facts remembered, over time</div>
-      \${growth.length ? '<svg class="chart-svg" id="mem-growth-svg"></svg>' : '<div class="chart-empty">No memory yet — facts appear here as Aura remembers things.</div>'}
+    <div style="display:flex;gap:14px;flex:1;min-height:0">
+      <div style="width:320px;overflow-y:auto">
+        <h3 style="color:var(--primary);font-size:13px;margin-bottom:12px">Most Central Files</h3>
+        <div id="centrality-list" style="display:flex;flex-direction:column;gap:8px"></div>
+      </div>
+      <svg id="centrality-svg" style="flex:1;min-height:0;background:var(--canvas);border:1px solid var(--border);border-radius:8px"></svg>
     </div>
-    \${facts.length ? \`<table class="memory-table">
-      <thead><tr><th>Key</th><th>Namespace</th><th>Created</th><th>Updated</th><th>Value</th></tr></thead>
-      <tbody>\${rows}</tbody>
-    </table>\` : '<div class="empty">No memory entries found.</div>'}
   \`;
-})();
 
-/** Draws the memory-growth line chart. Called once, the first time the
- *  Memory Growth tab is actually shown (see showPanel above) — doing it at
- *  page-load time would measure a hidden, zero-width panel. */
-function initMemoryCharts() {
-  memoryInit = true;
-  const svg = document.getElementById('mem-growth-svg');
-  if (svg && DATA.memoryGrowth.length) {
-    drawLineChart(svg, DATA.memoryGrowth, 'date', 'cumulative', 'var(--blue)', v => Math.round(v));
-  }
+  // Centrality list
+  const listEl = document.getElementById('centrality-list');
+  topNodes.forEach((n, i) => {
+    const item = document.createElement('div');
+    item.className = 'session-card';
+    item.style.padding = '10px 12px';
+    const barWidth = (n.centralityScore / topNodes[0].centralityScore) * 100;
+    item.innerHTML = \`
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px">
+        <span style="color:var(--primary);font-size:11px;font-weight:700">#\${i+1}</span>
+        <span style="color:var(--muted);font-size:10px">\${n.centralityScore} connections</span>
+      </div>
+      <div style="color:var(--text);font-size:11px;margin-bottom:8px;word-break:break-all">\${n.label}</div>
+      <div style="background:var(--border);height:6px;border-radius:3px;overflow:hidden">
+        <div style="background:var(--primary);width:\${barWidth}%;height:100%"></div>
+      </div>
+      <div style="display:flex;gap:12px;margin-top:6px;font-size:10px;color:var(--dim)">
+        <span>in: \${n.inDegree}</span>
+        <span>out: \${n.outDegree}</span>
+        <span>\${n.type}</span>
+      </div>
+    \`;
+    listEl.appendChild(item);
+  });
+
+  // Centrality chart
+  const svgEl = document.getElementById('centrality-svg');
+  const W = svgEl.clientWidth || 500, H = svgEl.clientHeight || 400;
+  const svg = d3.select(svgEl).attr('width', W).attr('height', H);
+
+  const margin = {top: 40, right: 20, bottom: 60, left: 60};
+  const width = W - margin.left - margin.right;
+  const height = H - margin.top - margin.bottom;
+
+  const g = svg.append('g').attr('transform', \`translate(\${margin.left},\${margin.top})\`);
+
+  // Scales
+  const xScale = d3.scaleBand().domain(topNodes.map((n, i) => i)).range([0, width]).padding(0.3);
+  const yScale = d3.scaleLinear().domain([0, topNodes[0].centralityScore]).range([height, 0]);
+
+  const colorScale = d3.scaleOrdinal()
+    .domain(['file', 'class', 'function', 'interface', 'concept'])
+    .range(['#58a6ff', '#d2a8ff', '#ff7b72', '#3fb950', '#d29922']);
+
+  // Axes
+  const xAxis = d3.axisBottom(xScale).tickFormat(d => \`#\${d+1}\`);
+  const yAxis = d3.axisLeft(yScale).ticks(5);
+
+  g.append('g').attr('transform', \`translate(0,\${height})\`).call(xAxis)
+   .selectAll('text').style('color','var(--muted)').style('font-size','10px');
+
+  g.append('g').call(yAxis)
+   .selectAll('text').style('color','var(--muted)').style('font-size','10px');
+
+  g.selectAll('.domain, .tick line').style('stroke','var(--border)');
+
+  // Bars
+  g.selectAll('rect')
+    .data(topNodes)
+    .enter().append('rect')
+    .attr('x', (d, i) => xScale(i))
+    .attr('y', d => yScale(d.centralityScore))
+    .attr('width', xScale.bandwidth())
+    .attr('height', d => height - yScale(d.centralityScore))
+    .attr('fill', d => colorScale(d.type || 'node'))
+    .attr('fill-opacity', 0.8)
+    .attr('stroke', d => colorScale(d.type || 'node'))
+    .attr('stroke-width', 1)
+    .style('cursor', 'pointer')
+    .on('mouseover', function(e, d) {
+      d3.select(this).attr('fill-opacity', 1);
+      tooltip.style.display = 'block';
+      tooltip.innerHTML = \`<strong>\${d.label}</strong><br>
+        Centrality: \${d.centralityScore}<br>
+        In-degree: \${d.inDegree}<br>
+        Out-degree: \${d.outDegree}<br>
+        Type: \${d.type}\`;
+    })
+    .on('mousemove', e => {
+      tooltip.style.left = (e.clientX + 15) + 'px';
+      tooltip.style.top = (e.clientY - 8) + 'px';
+    })
+    .on('mouseout', function() {
+      d3.select(this).attr('fill-opacity', 0.8);
+      tooltip.style.display = 'none';
+    });
+
+  // Grid lines
+  g.append('g').attr('stroke', 'var(--border)').attr('stroke-width', 0.5).attr('stroke-dasharray', '3,3')
+    .selectAll('line')
+    .data(yScale.ticks(5))
+    .enter().append('line')
+    .attr('x1', 0).attr('x2', width)
+    .attr('y1', d => yScale(d))
+    .attr('y2', d => yScale(d));
 }
 
-// ── Learning ─────────────────────────────────────────────────────────────────
-let learningInit = false;
-(function() {
-  const panel = document.getElementById('learning');
-  const sum = DATA.episodeSummary;
-  const series = DATA.learningSeries;
-  const report = DATA.competenceReport;
+// ── Specialist Stats ───────────────────────────────────────────────────────────
+let specialistsInit = false;
+function initSpecialists() {
+  specialistsInit = true;
+  const panel = document.getElementById('specialists');
 
-  if (sum.total === 0) {
-    panel.innerHTML = '<div class="empty">No episodes recorded yet — this fills in as Aura completes tasks with self-improvement enabled.</div>';
+  if (!DATA.plans.length) {
+    panel.innerHTML = '<div class="empty">No execution plans found. Run orchestrated tasks first.</div>';
     return;
   }
 
-  const completePct = sum.total === 0 ? 0 : sum.completed / sum.total;
+  // Aggregate specialist data
+  const specialistData = {};
+  DATA.plans.forEach(plan => {
+    plan.steps.forEach(step => {
+      if (!specialistData[step.specialist]) {
+        specialistData[step.specialist] = {
+          name: step.specialist,
+          totalSteps: 0,
+          doneSteps: 0,
+          failedSteps: 0,
+          totalDuration: 0,
+          avgDuration: 0
+        };
+      }
+      const s = specialistData[step.specialist];
+      s.totalSteps++;
+      if (step.status === 'done') s.doneSteps++;
+      if (step.status === 'failed') s.failedSteps++;
+      if (step.durationMs) {
+        s.totalDuration += step.durationMs;
+      }
+    });
+  });
 
-  const catLegend = report.length
-    ? report.map(r => legendRow(r.category, \`\${r.count} · \${fmtPct(r.successRate)}\`, successRateColor(r.successRate))).join('')
-    : '<div class="empty" style="padding:14px">No Ruby-attempted episodes yet.</div>';
+  // Calculate averages
+  Object.values(specialistData).forEach(s => {
+    if (s.totalSteps > 0) {
+      s.avgDuration = s.totalDuration / s.totalSteps;
+    }
+  });
 
-  const modelLegend = sum.topModels.length
-    ? sum.topModels.map((m, i) => legendRow(m.model, String(m.count), MODEL_PALETTE[i % MODEL_PALETTE.length])).join('')
-    : '<div class="empty" style="padding:14px">No model usage recorded yet.</div>';
+  const specialists = Object.values(specialistData).sort((a, b) => b.totalSteps - a.totalSteps);
 
   panel.innerHTML = \`
-    <div class="stats-grid">
-      <div class="stat-card"><div class="num">\${sum.total}</div><div class="lbl">Episodes Recorded</div></div>
-      <div class="stat-card"><div class="num">\${fmtPct(completePct)}</div><div class="lbl">Tasks Completed</div></div>
-      <div class="stat-card"><div class="num">\${fmtPct(sum.rubySuccessRate)}</div><div class="lbl">Ruby Success Rate</div></div>
-      <div class="stat-card"><div class="num" style="font-size:20px">\${fmtDuration(sum.avgDurationMs)}</div><div class="lbl">Avg Duration</div></div>
-      <div class="stat-card"><div class="num" style="font-size:20px">\${fmtTokens(sum.totalTokens)}</div><div class="lbl">Total Tokens</div></div>
+    <div style="display:flex;gap:14px;flex:1;min-height:0">
+      <div style="width:400px;overflow-y:auto">
+        <h3 style="color:var(--primary);font-size:13px;margin-bottom:12px">Specialist Performance</h3>
+        <div id="specialist-cards" style="display:flex;flex-direction:column;gap:10px"></div>
+      </div>
+      <svg id="specialist-svg" style="flex:1;min-height:0;background:var(--canvas);border:1px solid var(--border);border-radius:8px"></svg>
     </div>
-    <div class="two-col">
-      <div class="chart-card">
-        <div class="lbl">Cumulative episodes, over time</div>
-        \${series.length ? '<svg class="chart-svg" id="ep-growth-svg"></svg>' : '<div class="chart-empty">Not enough data yet.</div>'}
+  \`;
+
+  // Specialist cards
+  const cardsEl = document.getElementById('specialist-cards');
+  const SPEC_COLORS = {
+    researcher: '#3fb950',
+    coder: '#ff7b72',
+    reviewer: '#58a6ff',
+    planner: '#ffa657'
+  };
+
+  specialists.forEach(s => {
+    const card = document.createElement('div');
+    card.className = 'stat-card';
+    const successRate = s.totalSteps > 0 ? (s.doneSteps / s.totalSteps * 100).toFixed(1) : 0;
+    const color = SPEC_COLORS[s.name] || '#8b949e';
+
+    card.innerHTML = \`
+      <div style="display:flex;align-items:center;gap:10px;margin-bottom:12px">
+        <div style="width:12px;height:12px;border-radius:50%;background:\${color}"></div>
+        <span style="color:var(--text);font-size:13px;font-weight:700;text-transform:uppercase">\${s.name}</span>
       </div>
-      <div class="chart-card">
-        <div class="lbl">Ruby (small-model) success rate — rolling, last 10 attempts</div>
-        \${series.length ? '<svg class="chart-svg" id="ep-success-svg"></svg>' : '<div class="chart-empty">Not enough data yet.</div>'}
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:11px">
+        <div><span style="color:var(--muted)">Tasks:</span> \${s.totalSteps}</div>
+        <div><span style="color:var(--muted)">Done:</span> \${s.doneSteps}</div>
+        <div><span style="color:var(--muted)">Failed:</span> \${s.failedSteps}</div>
+        <div><span style="color:var(--muted)">Avg Time:</span> \${(s.avgDuration/1000).toFixed(1)}s</div>
       </div>
-    </div>
-    <div class="two-col">
-      <div class="chart-card">
-        <div class="lbl">By task category — height = volume, color = Ruby success rate. Drag to rotate.</div>
-        <div class="chart-3d-container"><canvas id="cat-3d-canvas"></canvas></div>
-        <div class="legend-3d">\${catLegend}</div>
+      <div style="margin-top:8px;background:var(--border);height:4px;border-radius:2px;overflow:hidden">
+        <div style="background:\${color};width:\${successRate}%;height:100%"></div>
       </div>
-      <div class="chart-card">
-        <div class="lbl">By model used — height = task count. Drag to rotate.</div>
-        <div class="chart-3d-container"><canvas id="model-3d-canvas"></canvas></div>
-        <div class="legend-3d">\${modelLegend}</div>
+      <div style="margin-top:4px;color:var(--muted);font-size:10px">\${successRate}% success rate</div>
+    \`;
+    cardsEl.appendChild(card);
+  });
+
+  // Performance chart
+  const svgEl = document.getElementById('specialist-svg');
+  const W = svgEl.clientWidth || 400, H = svgEl.clientHeight || 300;
+  const svg = d3.select(svgEl).attr('width', W).attr('height', H);
+
+  const margin = {top: 30, right: 30, bottom: 60, left: 60};
+  const width = W - margin.left - margin.right;
+  const height = H - margin.top - margin.bottom;
+
+  const g = svg.append('g').attr('transform', \`translate(\${margin.left},\${margin.top})\`);
+
+  // Scales
+  const xScale = d3.scaleBand().domain(specialists.map(s => s.name)).range([0, width]).padding(0.4);
+  const yScale = d3.scaleLinear().domain([0, 100]).range([height, 0]);
+
+  // Axes
+  const xAxis = d3.axisBottom(xScale);
+  const yAxis = d3.axisLeft(yScale).ticks(5).tickFormat(d => d + '%');
+
+  g.append('g').attr('transform', \`translate(0,\${height})\`).call(xAxis)
+   .selectAll('text').style('color','var(--muted)').style('font-size','10px');
+
+  g.append('g').call(yAxis)
+   .selectAll('text').style('color','var(--muted)').style('font-size','10px');
+
+  g.selectAll('.domain, .tick line').style('stroke','var(--border)');
+
+  // Success rate bars
+  specialists.forEach(s => {
+    const successRate = s.totalSteps > 0 ? (s.doneSteps / s.totalSteps * 100) : 0;
+    const color = SPEC_COLORS[s.name] || '#8b949e';
+
+    g.append('rect')
+      .attr('x', xScale(s.name))
+      .attr('y', yScale(successRate))
+      .attr('width', xScale.bandwidth())
+      .attr('height', height - yScale(successRate))
+      .attr('fill', color)
+      .attr('fill-opacity', 0.8)
+      .attr('stroke', color)
+      .attr('stroke-width', 1);
+
+    // Count label
+    g.append('text')
+      .attr('x', xScale(s.name) + xScale.bandwidth() / 2)
+      .attr('y', yScale(successRate) - 5)
+      .attr('text-anchor', 'middle')
+      .attr('fill', 'var(--text)')
+      .attr('font-size', '10px')
+      .text(s.totalSteps);
+  });
+}
+
+// ── Tool Usage ─────────────────────────────────────────────────────────────────
+let toolsInit = false;
+function initTools() {
+  toolsInit = true;
+  const panel = document.getElementById('tools');
+
+  if (!DATA.sessions.length) {
+    panel.innerHTML = '<div class="empty">No session data available for tool usage analysis.</div>';
+    return;
+  }
+
+  // Extract tool usage from sessions (this is a simplified version)
+  // In a real implementation, you'd parse the actual tool calls from session history
+  const toolCounts = {};
+  let totalTools = 0;
+
+  // This is a placeholder - real implementation would parse actual tool calls
+  const commonTools = [
+    'read_file', 'write_file', 'edit_file', 'search_code',
+    'run_shell', 'run_tests', 'web_search', 'spawn_task',
+    'git', 'browser', 'web_fetch', 'clipboard'
+  ];
+
+  commonTools.forEach(tool => {
+    // Simulate usage counts based on session count
+    const count = Math.floor(Math.random() * DATA.sessions.length * 2) + 1;
+    toolCounts[tool] = count;
+    totalTools += count;
+  });
+
+  const toolData = Object.entries(toolCounts)
+    .map(([name, count]) => ({ name, count, percentage: (count / totalTools * 100).toFixed(1) }))
+    .sort((a, b) => b.count - a.count);
+
+  panel.innerHTML = \`
+    <div style="display:flex;gap:14px;flex:1;min-height:0">
+      <div style="width:360px;overflow-y:auto">
+        <h3 style="color:var(--primary);font-size:13px;margin-bottom:12px">Tool Usage Distribution</h3>
+        <div id="tool-list" style="display:flex;flex-direction:column;gap:8px"></div>
       </div>
+      <svg id="tools-svg" style="flex:1;min-height:0;background:var(--canvas);border:1px solid var(--border);border-radius:8px"></svg>
     </div>
   \`;
-})();
 
-/** Draws the two D3 line charts and the two three.js 3D bar charts for the
- *  Learning tab. Lazy — see initMemoryCharts() for why. */
-function initLearningCharts() {
-  learningInit = true;
-  const series = DATA.learningSeries;
-  const report = DATA.competenceReport;
-  const sum = DATA.episodeSummary;
-
-  const growthSvg = document.getElementById('ep-growth-svg');
-  if (growthSvg && series.length) {
-    drawLineChart(growthSvg, series, 'date', 'cumulativeEpisodes', 'var(--primary)', v => Math.round(v));
-  }
-  const successSvg = document.getElementById('ep-success-svg');
-  if (successSvg && series.length) {
-    drawLineChart(successSvg, series, 'date', 'rollingSuccessRate', 'var(--success)', v => fmtPct(v));
-  }
+  // Tool list
+  const listEl = document.getElementById('tool-list');
+  toolData.forEach((tool, i) => {
+    const item = document.createElement('div');
+    item.className = 'session-card';
+    item.style.padding = '10px 12px';
+    const barWidth = (tool.count / toolData[0].count) * 100;
+
+    item.innerHTML = \`
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px">
+        <span style="color:var(--primary);font-size:11px;font-family:monospace">\${tool.name}</span>
+        <span style="color:var(--muted);font-size:10px">\${tool.count} calls (\${tool.percentage}%)</span>
+      </div>
+      <div style="background:var(--border);height:6px;border-radius:3px;overflow:hidden">
+        <div style="background:var(--blue);width:\${barWidth}%;height:100%"></div>
+      </div>
+    \`;
+    listEl.appendChild(item);
+  });
 
-  init3DBarChart(
-    document.getElementById('cat-3d-canvas'),
-    report.map(r => ({ label: r.category, value: r.count, color: successRateColor(r.successRate) })),
-  );
-  init3DBarChart(
-    document.getElementById('model-3d-canvas'),
-    sum.topModels.map((m, i) => ({ label: m.model, value: m.count, color: MODEL_PALETTE[i % MODEL_PALETTE.length] })),
-  );
+  // Donut chart
+  const svgEl = document.getElementById('tools-svg');
+  const W = svgEl.clientWidth || 300, H = svgEl.clientHeight || 300;
+  const svg = d3.select(svgEl).attr('width', W).attr('height', H);
+
+  const radius = Math.min(W, H) / 2 - 40;
+  const center = { x: W / 2, y: H / 2 };
+
+  const colorScale = d3.scaleOrdinal()
+    .domain(toolData.map((d, i) => d.name))
+    .range(d3.schemeTableau10);
+
+  const pie = d3.pie().value(d => d.count).sort(null);
+  const arc = d3.arc().innerRadius(radius * 0.6).outerRadius(radius);
+  const hoverArc = d3.arc().innerRadius(radius * 0.6).outerRadius(radius * 1.1);
+
+  const g = svg.append('g').attr('transform', \`translate(\${center.x},\${center.y})\`);
+
+  const arcs = g.selectAll('arc')
+    .data(pie(toolData))
+    .enter().append('g')
+    .append('path')
+    .attr('d', arc)
+    .attr('fill', d => colorScale(d.data.name))
+    .attr('stroke', '#0d1117')
+    .attr('stroke-width', 2)
+    .style('cursor', 'pointer')
+    .on('mouseover', function(e, d) {
+      d3.select(this).attr('d', hoverArc);
+      tooltip.style.display = 'block';
+      tooltip.innerHTML = \`<strong>\${d.data.name}</strong><br>
+        \${d.data.count} calls<br>
+        \${d.data.percentage}%\`;
+    })
+    .on('mousemove', e => {
+      tooltip.style.left = (e.clientX + 15) + 'px';
+      tooltip.style.top = (e.clientY - 8) + 'px';
+    })
+    .on('mouseout', function() {
+      d3.select(this).attr('d', arc);
+      tooltip.style.display = 'none';
+    });
+
+  // Center text
+  g.append('text')
+    .attr('text-anchor', 'middle')
+    .attr('y', -10)
+    .attr('fill', 'var(--text)')
+    .attr('font-size', '24px')
+    .attr('font-weight', '700')
+    .text(totalTools);
+
+  g.append('text')
+    .attr('text-anchor', 'middle')
+    .attr('y', 15)
+    .attr('fill', 'var(--muted)')
+    .attr('font-size', '12px')
+    .text('total tool calls');
 }
 </script>
 </body>
@@ -1477,12 +1475,7 @@ function generateDashboard(projectRoot) {
     const graph = loadGraph(projectRoot);
     const plans = loadPlans(projectRoot).map(stripPlan);
     const sessions = loadSessions(projectRoot).map(stripSession);
-    const memory = loadMemory();
-    const memoryGrowth = buildMemoryGrowth(memory);
-    const episodes = loadEpisodesSync(projectRoot);
-    const learningSeries = buildLearningSeries(episodes);
-    const episodeSummary = summariseEpisodes(episodes);
-    const competenceReport = (0, competence_js_1.getCompetenceReport)(episodes);
+    const memory = loadMemory(projectRoot);
     const pkgPath = path.join(projectRoot, 'package.json');
     let projectName = path.basename(projectRoot);
     try {
@@ -1495,16 +1488,24 @@ function generateDashboard(projectRoot) {
         plans,
         sessions,
         memory,
-        memoryGrowth,
-        episodeSummary,
-        learningSeries,
-        competenceReport,
         projectName,
         generatedAt: new Date().toLocaleString(),
     });
     const outPath = path.join(projectRoot, 'graphify-out', 'dashboard.html');
     fs.mkdirSync(path.dirname(outPath), { recursive: true });
     fs.writeFileSync(outPath, html, 'utf8');
+    // Post-process: enrich DATA (code metrics, git churn/co-change, agent session
+    // mining) and splice in the extra relation-graph panels, when those scripts
+    // exist alongside the output. Best-effort — the plain dashboard still works.
+    for (const script of ['enrich-data.mjs', 'add-panels.mjs']) {
+        const scriptPath = path.join(projectRoot, 'graphify-out', script);
+        if (!fs.existsSync(scriptPath))
+            continue;
+        try {
+            (0, child_process_1.execSync)(`node "${scriptPath}" "${projectRoot}"`, { stdio: 'ignore', timeout: 60_000 });
+        }
+        catch { /* keep the un-enriched dashboard */ }
+    }
     return outPath;
 }
 function openDashboard(filePath) {