@jhizzard/termdeck 0.11.0 → 0.13.0

package/packages/client/public/flashback-history.js

@@ -0,0 +1,258 @@
+// flashback-history.js — Sprint 43 T2 audit dashboard.
+//
+// Renders the durable flashback_events table (SQLite-backed) plus the
+// click-through funnel aggregate. Reads from GET /api/flashback/history.
+// Filter: time-window selector (1d / 7d / 30d / all). One round-trip per
+// view; the server returns events + funnel in one response.
+//
+// Zero-state handling is intentional and prominent: an empty table after
+// 7+ days of normal use IS the diagnostic signal Joshua needs (he's been
+// flashback-blind in past sprints; "0 fires" tells him to investigate the
+// PTY → analyzer → bridge → emit pipeline, not silently degrade).
+//
+// Vanilla JS, no framework — matches the rest of public/.
+
+(() => {
+  const API = window.location.origin;
+
+  const els = {
+    windowSel: document.getElementById('fbWindow'),
+    refreshBtn: document.getElementById('fbRefresh'),
+    errorBanner: document.getElementById('fbErrorBanner'),
+    content: document.getElementById('fbContent'),
+    barFires: document.getElementById('fbBarFires'),
+    barDismissed: document.getElementById('fbBarDismissed'),
+    barClicked: document.getElementById('fbBarClicked'),
+    countFires: document.getElementById('fbCountFires'),
+    countDismissed: document.getElementById('fbCountDismissed'),
+    countClicked: document.getElementById('fbCountClicked'),
+    pctDismissed: document.getElementById('fbPctDismissed'),
+    pctClicked: document.getElementById('fbPctClicked'),
+  };
+
+  // URL state: ?window=7d persists across reload.
+  function loadStateFromUrl() {
+    const qs = new URLSearchParams(window.location.search);
+    const win = qs.get('window');
+    if (win && ['1d', '7d', '30d', 'all'].includes(win)) {
+      els.windowSel.value = win;
+    }
+  }
+  function writeStateToUrl() {
+    const qs = new URLSearchParams(window.location.search);
+    qs.set('window', els.windowSel.value);
+    const next = `${window.location.pathname}?${qs.toString()}`;
+    window.history.replaceState(null, '', next);
+  }
+
+  // Compute ISO timestamp for the "since" filter from the window selector.
+  // Returns null for "all time" (no filter).
+  function sinceFromWindow(key) {
+    const now = Date.now();
+    const ms = {
+      '1d': 24 * 60 * 60 * 1000,
+      '7d': 7 * 24 * 60 * 60 * 1000,
+      '30d': 30 * 24 * 60 * 60 * 1000,
+    }[key];
+    if (!ms) return null;
+    return new Date(now - ms).toISOString();
+  }
+
+  function escapeHtml(s) {
+    if (s == null) return '';
+    return String(s)
+      .replace(/&/g, '&')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;');
+  }
+
+  function fmtTime(iso) {
+    if (!iso) return '—';
+    try {
+      const d = new Date(iso);
+      const now = Date.now();
+      const diffMs = now - d.getTime();
+      const diffSec = Math.floor(diffMs / 1000);
+      if (diffSec < 60) return `${diffSec}s ago`;
+      const diffMin = Math.floor(diffSec / 60);
+      if (diffMin < 60) return `${diffMin}m ago`;
+      const diffHr = Math.floor(diffMin / 60);
+      if (diffHr < 24) return `${diffHr}h ago`;
+      const diffDay = Math.floor(diffHr / 24);
+      if (diffDay < 7) return `${diffDay}d ago`;
+      // Older than a week: show the date.
+      return d.toISOString().slice(0, 10);
+    } catch {
+      return iso;
+    }
+  }
+
+  function fmtScore(score) {
+    if (score == null || !Number.isFinite(score)) return '—';
+    return `${(score * 100).toFixed(0)}%`;
+  }
+
+  function renderFunnel(funnel) {
+    const fires = Number(funnel?.fires || 0);
+    const dismissed = Number(funnel?.dismissed || 0);
+    const clicked = Number(funnel?.clicked_through || 0);
+
+    els.countFires.textContent = String(fires);
+    els.countDismissed.textContent = String(dismissed);
+    els.countClicked.textContent = String(clicked);
+
+    // Bar widths: fires is always 100% (the cohort baseline); dismissed and
+    // clicked are proportions of fires. Ratio out of fires (not out of
+    // dismissed) keeps the funnel-shape visual intuitive.
+    els.barFires.style.width = fires > 0 ? '100%' : '0%';
+    if (fires > 0) {
+      els.barDismissed.style.width = `${(dismissed / fires) * 100}%`;
+      els.barClicked.style.width = `${(clicked / fires) * 100}%`;
+      els.pctDismissed.textContent = ` · ${Math.round((dismissed / fires) * 100)}%`;
+      els.pctClicked.textContent = ` · ${Math.round((clicked / fires) * 100)}%`;
+    } else {
+      els.barDismissed.style.width = '0%';
+      els.barClicked.style.width = '0%';
+      els.pctDismissed.textContent = '';
+      els.pctClicked.textContent = '';
+    }
+  }
+
+  function renderZeroState(windowKey) {
+    const windowLabel = {
+      '1d': 'the last 24 hours',
+      '7d': 'the last 7 days',
+      '30d': 'the last 30 days',
+      'all': 'recorded history',
+    }[windowKey] || 'the selected window';
+
+    els.content.innerHTML = `
+      <div class="fb-zero">
+        <h3>0 fires in ${escapeHtml(windowLabel)}</h3>
+        <p>Flashback might not be firing at all — or the underlying RAG isn't returning hits. Investigate the pipeline:</p>
+        <p>
+          <code>GET /api/flashback/diag?eventType=pattern_match</code> —
+          are PTY errors being detected?
+        </p>
+        <p>
+          <code>GET /api/flashback/diag?eventType=bridge_query</code> —
+          are queries reaching Mnestra?
+        </p>
+        <p>
+          <code>GET /api/flashback/diag?eventType=proactive_memory_emit</code> —
+          are emits being attempted, and what's the outcome?
+        </p>
+        <p>
+          A populated <code>diag</code> ring with no <code>flashback_events</code>
+          rows means the WS send is failing or the toast is being dropped on
+          the client side. An empty <code>diag</code> ring means the
+          analyzer never even matched.
+        </p>
+      </div>
+    `;
+  }
+
+  function renderTable(events) {
+    const rows = events.map((e) => {
+      const projectCell = e.project
+        ? `<span class="fb-cell-project">${escapeHtml(e.project)}</span>`
+        : `<span class="fb-cell-project" style="color:var(--tg-text-dim)">—</span>`;
+
+      const statusPills = [];
+      if (e.clicked_through) {
+        statusPills.push(`<span class="fb-pill fb-pill-clicked">clicked</span>`);
+      } else if (e.dismissed_at) {
+        statusPills.push(`<span class="fb-pill fb-pill-dismissed">dismissed</span>`);
+      } else {
+        statusPills.push(`<span class="fb-pill fb-pill-pending">pending</span>`);
+      }
+
+      const errorPreview = (e.error_text || '').slice(0, 200);
+
+      return `
+        <tr>
+          <td class="fb-cell-time" title="${escapeHtml(e.fired_at || '')}">${escapeHtml(fmtTime(e.fired_at))}</td>
+          <td>${projectCell}</td>
+          <td class="fb-cell-error" title="${escapeHtml(e.error_text || '')}">${escapeHtml(errorPreview)}</td>
+          <td class="fb-cell-hits">${escapeHtml(String(e.hits_count ?? 0))}</td>
+          <td class="fb-cell-score">${escapeHtml(fmtScore(e.top_hit_score))}</td>
+          <td class="fb-cell-status">${statusPills.join('')}</td>
+        </tr>
+      `;
+    }).join('');
+
+    els.content.innerHTML = `
+      <div class="fb-table-wrap">
+        <table class="fb-table">
+          <thead>
+            <tr>
+              <th>When</th>
+              <th>Project</th>
+              <th>Search context</th>
+              <th style="text-align:right">Hits</th>
+              <th style="text-align:right">Score</th>
+              <th>Status</th>
+            </tr>
+          </thead>
+          <tbody>${rows}</tbody>
+        </table>
+      </div>
+    `;
+  }
+
+  function showError(msg) {
+    els.errorBanner.hidden = false;
+    els.errorBanner.textContent = msg;
+  }
+  function clearError() {
+    els.errorBanner.hidden = true;
+    els.errorBanner.textContent = '';
+  }
+
+  async function refresh() {
+    clearError();
+    els.content.innerHTML = `<div class="fb-loading">Loading flashback history…</div>`;
+
+    const winKey = els.windowSel.value || '7d';
+    const since = sinceFromWindow(winKey);
+    const qs = new URLSearchParams();
+    if (since) qs.set('since', since);
+    qs.set('limit', '200');
+
+    let data;
+    try {
+      const res = await fetch(`${API}/api/flashback/history?${qs.toString()}`);
+      if (!res.ok) {
+        throw new Error(`HTTP ${res.status}`);
+      }
+      data = await res.json();
+    } catch (err) {
+      showError(`Failed to load flashback history: ${err.message}`);
+      els.content.innerHTML = '';
+      renderFunnel({ fires: 0, dismissed: 0, clicked_through: 0 });
+      return;
+    }
+
+    renderFunnel(data.funnel || { fires: 0, dismissed: 0, clicked_through: 0 });
+
+    if (!Array.isArray(data.events) || data.events.length === 0) {
+      renderZeroState(winKey);
+      return;
+    }
+
+    renderTable(data.events);
+  }
+
+  // Wire controls
+  els.windowSel.addEventListener('change', () => {
+    writeStateToUrl();
+    refresh();
+  });
+  els.refreshBtn.addEventListener('click', () => refresh());
+
+  // Boot
+  loadStateFromUrl();
+  refresh();
+})();

package/packages/client/public/graph-controls.js

@@ -0,0 +1,217 @@
+/* TermDeck — Knowledge Graph view-controls (Sprint 43 T1)
+ *
+ * Pure functions for filtering and laying out the D3 force-directed graph.
+ * Extracted from graph.js so the filter logic can be unit-tested under
+ * `node --test` without a bundler.
+ *
+ * Dual-export pattern: in Node, `module.exports` returns the API object; in
+ * the browser, the same API attaches to `window.GraphControls`. graph.html
+ * loads this file with a plain <script> tag BEFORE graph.js so the IIFE in
+ * graph.js can read `window.GraphControls.applyControls(...)`.
+ *
+ * The four user-visible controls are:
+ *   1. hide-isolated  — drop nodes with degree 0
+ *   2. min-degree     — keep nodes with degree >= N (N ∈ {0,1,2,3,5})
+ *   3. time-window    — keep nodes with createdAt within last N days
+ *   4. layout         — 'force' (default) | 'hierarchical' | 'radial'
+ *
+ * Filter precedence inside applyControls:
+ *   time-window ⇒ degree.  Time-window first because dropping nodes by age
+ *   also drops their edges, which changes the degree count for the survivors.
+ */
+
+(function (root) {
+  'use strict';
+
+  const WINDOW_DAYS = { '7d': 7, '30d': 30, '90d': 90 };
+  const LAYOUTS = ['force', 'hierarchical', 'radial'];
+  const VALID_WINDOWS = ['all', '7d', '30d', '90d'];
+
+  function edgeEndpointId(end) {
+    return (end && typeof end === 'object') ? end.id : end;
+  }
+
+  function computeDegrees(nodes, edges) {
+    const deg = new Map();
+    for (const n of nodes) deg.set(n.id, 0);
+    for (const e of edges) {
+      const sId = edgeEndpointId(e.source);
+      const tId = edgeEndpointId(e.target);
+      // Only count edges where BOTH endpoints are in the node set; a half-known
+      // edge is "broken" and shouldn't bump the survivor's degree.
+      if (!deg.has(sId) || !deg.has(tId)) continue;
+      deg.set(sId, deg.get(sId) + 1);
+      deg.set(tId, deg.get(tId) + 1);
+    }
+    return deg;
+  }
+
+  function windowMinTime(windowKey, now) {
+    const days = WINDOW_DAYS[windowKey];
+    if (!days) return null;
+    const ref = (typeof now === 'number' && Number.isFinite(now)) ? now : Date.now();
+    return ref - days * 86_400_000;
+  }
+
+  function filterEdgesByNodeSet(edges, idSet) {
+    const out = [];
+    for (const e of edges) {
+      const sId = edgeEndpointId(e.source);
+      const tId = edgeEndpointId(e.target);
+      if (idSet.has(sId) && idSet.has(tId)) out.push(e);
+    }
+    return out;
+  }
+
+  function applyControls(nodes, edges, controls, now) {
+    const c = controls || {};
+    let outNodes = Array.isArray(nodes) ? nodes.slice() : [];
+    let outEdges = Array.isArray(edges) ? edges.slice() : [];
+
+    const minTime = windowMinTime(c.window, now);
+    if (minTime != null) {
+      outNodes = outNodes.filter((n) => {
+        if (!n.createdAt) return false;
+        const t = Date.parse(n.createdAt);
+        return Number.isFinite(t) && t >= minTime;
+      });
+      outEdges = filterEdgesByNodeSet(outEdges, new Set(outNodes.map((n) => n.id)));
+    }
+
+    const minDegreeRaw = Number.isFinite(c.minDegree) ? c.minDegree : 0;
+    const minDegree = Math.max(0, Math.floor(minDegreeRaw));
+    const hideIsolated = !!c.hideIsolated;
+    const threshold = Math.max(minDegree, hideIsolated ? 1 : 0);
+
+    if (threshold > 0) {
+      const deg = computeDegrees(outNodes, outEdges);
+      outNodes = outNodes.filter((n) => (deg.get(n.id) || 0) >= threshold);
+      outEdges = filterEdgesByNodeSet(outEdges, new Set(outNodes.map((n) => n.id)));
+    }
+
+    return { nodes: outNodes, edges: outEdges };
+  }
+
+  function defaultControls() {
+    return { hideIsolated: false, minDegree: 0, window: 'all', layout: 'force' };
+  }
+
+  function normalizeControls(c) {
+    const def = defaultControls();
+    const out = Object.assign({}, def, c || {});
+    out.hideIsolated = !!out.hideIsolated;
+    const md = Number(out.minDegree);
+    out.minDegree = Number.isFinite(md) && md > 0 ? Math.max(0, Math.floor(md)) : 0;
+    if (!VALID_WINDOWS.includes(out.window)) out.window = 'all';
+    if (!LAYOUTS.includes(out.layout)) out.layout = 'force';
+    return out;
+  }
+
+  function encodeControls(qs, controls) {
+    const c = normalizeControls(controls);
+    if (c.hideIsolated) qs.set('hideIsolated', '1');
+    else qs.delete('hideIsolated');
+    if (c.minDegree > 0) qs.set('minDegree', String(c.minDegree));
+    else qs.delete('minDegree');
+    if (c.window !== 'all') qs.set('window', c.window);
+    else qs.delete('window');
+    if (c.layout !== 'force') qs.set('layout', c.layout);
+    else qs.delete('layout');
+    return qs;
+  }
+
+  function decodeControls(qs) {
+    const out = defaultControls();
+    if (qs.get('hideIsolated') === '1') out.hideIsolated = true;
+    const md = parseInt(qs.get('minDegree'), 10);
+    if (Number.isFinite(md) && md > 0) out.minDegree = md;
+    const win = qs.get('window');
+    if (win && VALID_WINDOWS.includes(win)) out.window = win;
+    const lay = qs.get('layout');
+    if (lay && LAYOUTS.includes(lay)) out.layout = lay;
+    return out;
+  }
+
+  // Hierarchical layering — assigns each node a "level" by BFS from roots
+  // (nodes with no incoming `supersedes` / `caused_by` edges). Used by the
+  // hierarchical layout to map level → y position. Falls back to a single
+  // level when no directional edges are present.
+  function computeHierarchyLevels(nodes, edges) {
+    const directional = new Set(['supersedes', 'caused_by', 'blocks']);
+    const incoming = new Map();
+    const outgoing = new Map();
+    for (const n of nodes) {
+      incoming.set(n.id, []);
+      outgoing.set(n.id, []);
+    }
+    for (const e of edges) {
+      if (!directional.has(e.kind)) continue;
+      const sId = edgeEndpointId(e.source);
+      const tId = edgeEndpointId(e.target);
+      if (incoming.has(tId)) incoming.get(tId).push(sId);
+      if (outgoing.has(sId)) outgoing.get(sId).push(tId);
+    }
+    const levels = new Map();
+    const roots = [];
+    for (const n of nodes) {
+      if ((incoming.get(n.id) || []).length === 0) {
+        roots.push(n.id);
+        levels.set(n.id, 0);
+      }
+    }
+    if (roots.length === 0) {
+      for (const n of nodes) levels.set(n.id, 0);
+      return levels;
+    }
+    const queue = roots.slice();
+    while (queue.length) {
+      const id = queue.shift();
+      const cur = levels.get(id) || 0;
+      for (const next of (outgoing.get(id) || [])) {
+        const prev = levels.get(next);
+        const candidate = cur + 1;
+        if (prev == null || candidate > prev) {
+          levels.set(next, candidate);
+          queue.push(next);
+        }
+      }
+    }
+    for (const n of nodes) {
+      if (!levels.has(n.id)) levels.set(n.id, 0);
+    }
+    return levels;
+  }
+
+  // Radial radius helper — high degree → small radius (center). Returns a
+  // function that takes a node and returns a target radius (0 < r ≤ rMax).
+  function radialRadiusFn(degreesMap, rMax) {
+    let maxDeg = 0;
+    for (const v of degreesMap.values()) if (v > maxDeg) maxDeg = v;
+    if (maxDeg === 0) return () => rMax * 0.5;
+    return (n) => {
+      const deg = degreesMap.get(n.id) || 0;
+      const t = 1 - (deg / maxDeg);
+      return rMax * (0.15 + 0.75 * t);
+    };
+  }
+
+  const api = {
+    LAYOUTS,
+    VALID_WINDOWS,
+    computeDegrees,
+    windowMinTime,
+    applyControls,
+    defaultControls,
+    normalizeControls,
+    encodeControls,
+    decodeControls,
+    computeHierarchyLevels,
+    radialRadiusFn,
+  };
+
+  if (typeof module !== 'undefined' && module.exports) {
+    module.exports = api;
+  } else {
+    root.GraphControls = api;
+  }
+})(typeof window !== 'undefined' ? window : globalThis);

package/packages/client/public/graph.html

@@ -42,6 +42,41 @@
 
   <div class="graph-filters" id="graphFilters" role="toolbar" aria-label="Edge type filters"></div>
 
+  <div class="graph-filters graph-filters-row2" id="graphControls" role="toolbar" aria-label="Graph view controls">
+    <label class="graph-control graph-control-toggle" title="Drop nodes with zero edges">
+      <input type="checkbox" id="ctlHideIsolated">
+      <span>hide isolated</span>
+    </label>
+    <label class="graph-control" title="Keep nodes with at least N edges">
+      <span>min degree</span>
+      <select id="ctlMinDegree">
+        <option value="0">all</option>
+        <option value="1">≥ 1</option>
+        <option value="2">≥ 2</option>
+        <option value="3">≥ 3</option>
+        <option value="5">≥ 5</option>
+      </select>
+    </label>
+    <label class="graph-control" title="Keep nodes created within window">
+      <span>window</span>
+      <select id="ctlWindow">
+        <option value="all">all time</option>
+        <option value="7d">last 7 days</option>
+        <option value="30d">last 30 days</option>
+        <option value="90d">last 90 days</option>
+      </select>
+    </label>
+    <label class="graph-control" title="Force algorithm used to position nodes">
+      <span>layout</span>
+      <select id="ctlLayout">
+        <option value="force">force-directed</option>
+        <option value="hierarchical">hierarchical</option>
+        <option value="radial">radial</option>
+      </select>
+    </label>
+    <span class="graph-control-stat" id="ctlVisibleStat" aria-live="polite"></span>
+  </div>
+
   <main class="graph-stage" id="graphStage">
     <div class="graph-loading" id="graphLoading">
       <div class="graph-loading-spinner" aria-hidden="true"></div>
@@ -100,6 +135,7 @@
   </main>
 
   <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
+  <script src="graph-controls.js"></script>
   <script src="graph.js" defer></script>
 </body>
 </html>