@jungjaehoon/mama-os 0.62.0 → 0.64.0

package/public/viewer/src/modules/graph.ts

@@ -1,50 +1,21 @@
 /**
- * Graph Module - Decision Graph Visualization
+ * Graph Module - the filtered memory as a graph
  * @module modules/graph
- * @version 1.0.0
  *
- * Handles Graph visualization using vis.js:
- * - Network initialization and rendering
- * - Node/edge styling and clustering
- * - Search and filter functionality
- * - Detail panel for node information
- * - BFS traversal for connected nodes
+ * The memory view's list and graph show the same records: whatever the period, kind and search
+ * select. One dot per record, one per work item for its updates in the period, and faded dots for
+ * the records they link to outside the filter. Lines are the links between records; the source
+ * messages a record rests on are listed in its detail.
  */
 
 /* eslint-env browser */
 /* global vis */
 
-import {
-  escapeHtml,
-  escapeAttr,
-  debounce,
-  showToast,
-  getElementByIdOrNull,
-  getErrorMessage,
-} from '../utils/dom.js';
+import { escapeHtml, getElementByIdOrNull } from '../utils/dom.js';
 import { DebugLogger } from '../utils/debug-logger.js';
-import {
-  API,
-  type GraphNode,
-  type GraphEdge,
-  type SimilarDecision,
-  type QueryParams,
-} from '../utils/api.js';
+import { API, type MemoryLinks, type MemoryTimelineResponse } from '../utils/api.js';
 import { renderSafeMarkdown } from '../utils/markdown.js';
-
-type GraphNodeRecord = GraphNode & {
-  topic?: string;
-  outcome?: string;
-  decision?: string;
-  reasoning?: string;
-  confidence?: number;
-  created_at?: string | number;
-};
-
-type GraphEdgeRecord = GraphEdge & {
-  from: GraphNodeRecord['id'];
-  to: GraphNodeRecord['id'];
-};
+import { groupInfo } from './memory-timeline.js';
 
 type EdgeStyle = {
   color: string;
@@ -52,323 +23,331 @@ type EdgeStyle = {
   width: number;
 };
 
-type ConnectedEdges = {
-  outgoing: GraphEdgeRecord[];
-  incoming: GraphEdgeRecord[];
-  all: GraphEdgeRecord[];
+const logger = new DebugLogger('Graph');
+
+/** What a record's stored kind is called in the detail panel. */
+export const KIND_LABELS: Record<string, string> = {
+  decision: 'Decision',
+  preference: 'Preference',
+  constraint: 'Constraint',
+  lesson: 'Lesson',
+  workflow: 'Workflow',
+  fact: 'Fact',
+  commitment: 'Work update',
+  observation: 'Source message',
+  memory: 'Memory without a kind',
+  registry: 'Registered name',
 };
 
-type GraphInput = {
-  nodes: GraphNodeRecord[];
-  edges: GraphEdgeRecord[];
-  meta?: Record<string, unknown>;
+/** Every relation the engine stores, read from the record that holds the link. */
+export const RELATION_LABELS: Record<string, string> = {
+  derived_from: 'rests on (evidence)',
+  mentions: 'mentions',
+  builds_on: 'builds on',
+  amends: 'amends',
+  refines: 'refines',
+  supersedes: 'replaces',
+  contradicts: 'contradicts',
+  debates: 'argues with',
+  synthesizes: 'combines',
+  case_member: 'belongs to case',
+  alias_of: 'another name for',
+  next_action_for: 'next step for',
+  blocks: 'blocks',
 };
 
-const logger = new DebugLogger('Graph');
-const INITIAL_GRAPH_LIMIT = 2000;
+const OUTSIDE_COLOR = '#D1D5DB';
+const LABEL_LENGTH = 40;
+
+function shortLabel(text: string): string {
+  const flat = text.replace(/\s+/g, ' ').trim();
+  return flat.length > LABEL_LENGTH ? `${flat.slice(0, LABEL_LENGTH - 1)}…` : flat;
+}
+
+export interface FilterGraphNode {
+  id: string;
+  /** The timeline group of a selected dot, or `outside` for a linked record the filter left out. */
+  group: string;
+  kind: string | null;
+  label: string;
+  /** The record whose detail a click opens: the record itself, or a work item's latest update. */
+  detailId: string;
+  /** Updates of a work item inside the period. */
+  updates: number;
+  outside: boolean;
+}
+
+export interface FilterGraph {
+  nodes: FilterGraphNode[];
+  edges: Array<{ from: string; to: string; relation: string }>;
+  /** Which dot each listed record is drawn as: a work update is drawn as its item. */
+  recordNode: Record<string, string>;
+}
+
+/**
+ * The graph of what the filters selected. A work item is one dot for all its updates; a link
+ * between two updates of one item is not drawn, and a link that touches nothing selected is left
+ * out. Days arrive newest first, so an item's first update seen is its latest.
+ */
+export function composeFilterGraph(
+  timeline: MemoryTimelineResponse,
+  links: MemoryLinks
+): FilterGraph {
+  const nodes = new Map<string, FilterGraphNode>();
+  const recordNode: Record<string, string> = {};
+  for (const day of timeline.days) {
+    for (const group of day.groups) {
+      for (const record of group.records ?? []) {
+        nodes.set(record.id, {
+          id: record.id,
+          group: group.group,
+          kind: record.kind,
+          label: record.topic,
+          detailId: record.id,
+          updates: 0,
+          outside: false,
+        });
+        recordNode[record.id] = record.id;
+      }
+      for (const item of group.items ?? []) {
+        const id = `item:${item.commitmentId}`;
+        const node = nodes.get(id) ?? {
+          id,
+          group: 'work',
+          kind: 'commitment',
+          label: item.title ?? item.topic,
+          detailId: item.revisions[0].id,
+          updates: 0,
+          outside: false,
+        };
+        node.updates += item.revisions.length;
+        nodes.set(id, node);
+        for (const revision of item.revisions) recordNode[revision.id] = id;
+      }
+    }
+  }
+  // Links name both ends with a node; a work update outside the filter is drawn as its item.
+  const dotFor = (ref: string): string => {
+    const listed = recordNode[ref];
+    if (listed !== undefined) return listed;
+    const commitmentId = links.nodes[ref].commitmentId;
+    return commitmentId === null ? ref : `item:${commitmentId}`;
+  };
+  const edges: FilterGraph['edges'] = [];
+  const seen = new Set<string>();
+  const outside: FilterGraphNode[] = [];
+  for (const link of links.edges) {
+    const from = dotFor(link.from);
+    const to = dotFor(link.to);
+    const key = `${from}\0${to}\0${link.relation}`;
+    if (from === to || seen.has(key) || (!nodes.has(from) && !nodes.has(to))) continue;
+    seen.add(key);
+    edges.push({ from, to, relation: link.relation });
+    for (const [dot, ref] of [
+      [from, link.from],
+      [to, link.to],
+    ] as const) {
+      if (nodes.has(dot)) continue;
+      const node: FilterGraphNode = {
+        id: dot,
+        group: 'outside',
+        kind: links.nodes[ref].kind,
+        label: links.nodes[ref].label,
+        detailId: ref,
+        updates: 0,
+        outside: true,
+      };
+      nodes.set(dot, node);
+      outside.push(node);
+    }
+  }
+  return {
+    nodes: [...nodes.values()].filter((node) => !node.outside).concat(outside),
+    edges,
+    recordNode,
+  };
+}
 
 /**
  * Graph Module Class
  */
 export class GraphModule {
   network: VisNetwork | null = null;
-  graphData: GraphInput = { nodes: [], edges: [], meta: {} };
-  currentNodeId: string | null = null;
-  adjacencyList: Map<string, string[]> = new Map();
-  searchMatches: GraphNodeRecord[] = [];
-  currentSearchIndex = 0;
-  debouncedSearch = debounce(() => this.search(), 300);
-  private similarDecisionClickHandler = (event: Event): void => {
-    const target = event.target as HTMLElement;
-    const btn = target.closest('.similar-decision-btn') as HTMLElement | null;
-    if (!btn || !btn.dataset.nodeId) {
-      return;
-    }
-    this.navigateToNode(btn.dataset.nodeId);
-  };
-  nodeColors: Record<string, string> = {
-    decision: '#60A5FA',
-    preference: '#C084FC',
-    constraint: '#FB7185',
-    lesson: '#FBBF24',
-    fact: '#2DD4BF',
-    commitment: '#FB923C',
-    observation: '#94A3B8',
-    memory: '#CBD5E1', // Legacy memories may have no stored classification.
-    registry: '#A3E635',
-  };
+  graph: FilterGraph = { nodes: [], edges: [], recordNode: {} };
+  // The links between records do not depend on the filter: read once per page load.
+  private links: Promise<MemoryLinks> | null = null;
+  // A slower earlier read must not draw or describe what the owner has moved away from.
+  private drawRequest = 0;
+  private detailRequest = 0;
   edgeStyles: Record<string, EdgeStyle> = {
     supersedes: { color: '#666666', dashes: false, width: 2 },
     mentions: { color: '#6B4C9A', dashes: false, width: 2 },
     derived_from: { color: '#3A9E7E', dashes: false, width: 2 },
     amends: { color: '#2563EB', dashes: [8, 4], width: 2 },
     refines: { color: '#B8860B', dashes: false, width: 2 },
-    builds_on: { color: '#B8860B', dashes: [5, 5], width: 2.5 }, // dark goldenrod
-    debates: { color: '#DC143C', dashes: [5, 5], width: 2.5 }, // crimson
-    synthesizes: { color: '#6B4C9A', width: 3, dashes: false }, // dark purple
+    builds_on: { color: '#B8860B', dashes: [5, 5], width: 2.5 },
+    contradicts: { color: '#DC143C', dashes: false, width: 2.5 },
+    debates: { color: '#DC143C', dashes: [5, 5], width: 2.5 },
+    synthesizes: { color: '#6B4C9A', width: 3, dashes: false },
   };
 
-  constructor() {
-    // Network state
-  }
-
-  // =============================================
-  // Data Loading
-  // =============================================
-
   /**
-   * Fetch graph data from API
+   * Draw what the filters selected, from the same timeline answer the list shows.
    */
-  async fetchData(params: QueryParams = { limit: INITIAL_GRAPH_LIMIT }): Promise<GraphInput> {
-    try {
-      this.graphData = await API.getGraph(params);
-      logger.info('Graph data loaded:', this.graphData.meta);
-      return this.graphData;
-    } catch (error) {
-      logger.error('Failed to fetch graph:', error);
+  async showSelection(timeline: MemoryTimelineResponse): Promise<void> {
+    const request = ++this.drawRequest;
+    // A failed read is not kept: the next filter change reads the links again.
+    this.links ??= API.getMemoryLinks().catch((error: unknown) => {
+      this.links = null;
       throw error;
-    }
+    });
+    const links = await this.links;
+    if (request !== this.drawRequest) return;
+    this.init(composeFilterGraph(timeline, links));
   }
 
-  // =============================================
-  // Graph Initialization
-  // =============================================
-
   /**
-   * Initialize vis-network
+   * A listed record was picked: select its dot and open the record's own detail.
    */
-  init(data: GraphInput): void {
+  focusRecord(recordId: string): void {
+    const dot = this.graph.recordNode[recordId];
+    const node = this.graph.nodes.find((candidate) => candidate.id === dot);
+    if (this.network && dot !== undefined) {
+      this.network.selectNodes([dot]);
+      this.network.focus(dot, { scale: 1.2, animation: { duration: 400 } });
+    }
+    void this.showDetail({
+      detailId: recordId,
+      label: node?.label ?? recordId,
+      kind: node?.kind ?? null,
+    });
+  }
+
+  init(graph: FilterGraph): void {
     const container = getElementByIdOrNull<HTMLDivElement>('graph-canvas');
     if (!container) {
       logger.error('graph-canvas element not found');
       return;
     }
+    this.graph = graph;
+    this.network?.destroy?.();
 
-    // Ensure container has dimensions for vis-network
-    if (container.offsetHeight === 0) {
-      container.style.minHeight = '400px';
+    const empty = getElementByIdOrNull<HTMLElement>('graph-empty');
+    if (empty) {
+      empty.style.display = graph.nodes.length === 0 ? '' : 'none';
+      empty.textContent = 'Nothing saved for this filter.';
     }
 
-    logger.debug('Graph canvas dimensions:', container.offsetWidth, 'x', container.offsetHeight);
-
-    this.graphData = data;
-
-    // Build adjacency list for BFS
-    this.buildAdjacencyList(data.edges);
-
-    // Calculate connection counts for sizing
-    const connectionCounts = this.calculateConnectionCounts(data.nodes, data.edges);
-
-    // Map nodes to vis-network format
-    const nodes = data.nodes.map((n) => ({
-      id: n.id,
-      label: n.label || n.topic || String(n.id).substring(0, 20),
-      title: this.createNodeTooltip(n),
-      color: {
-        background: this.getNodeColor(n.kind),
-        // Only a recorded outcome draws a ring; otherwise the kind colour stays visible.
-        border: this.getOutcomeBorderColor(n.outcome, this.getNodeColor(n.kind)),
-        highlight: { background: this.getNodeColor(n.kind), border: '#fff' },
-      },
-      size: this.getNodeSize(connectionCounts[String(n.id)] || 0),
-      font: { color: '#131313', size: 14, vadjust: -2 },
-      borderWidth: n.outcome ? 3 : 1,
-      data: n,
-    }));
-
-    // Map edges to vis-network format
-    const edges = data.edges.map((e) => {
-      const style = this.getEdgeStyle(e.relationship);
+    const nodes = graph.nodes.map((node) => {
+      const color = node.outside ? OUTSIDE_COLOR : groupInfo(node.group).color;
+      return {
+        id: node.id,
+        label: shortLabel(node.label),
+        title: this.createNodeTooltip(node),
+        color: {
+          background: color,
+          border: color,
+          highlight: { background: color, border: '#131313' },
+        },
+        size: node.outside ? 7 : node.updates > 0 ? 10 + Math.min(node.updates, 20) / 2 : 11,
+        font: { color: node.outside ? '#9CA3AF' : '#131313', size: 12 },
+      };
+    });
+    const edges = graph.edges.map((edge) => {
+      const style = this.getEdgeStyle(edge.relation);
       return {
-        from: e.from,
-        to: e.to,
+        from: edge.from,
+        to: edge.to,
         arrows: { to: { enabled: true, scaleFactor: 0.5 } },
         color: style.color,
         dashes: style.dashes,
-        width: style.width || 2,
-        title: e.relationship,
+        width: style.width,
+        title: this.relationLabel(edge.relation),
       };
     });
 
-    const networkData = {
-      nodes: new vis.DataSet(nodes),
-      edges: new vis.DataSet(edges),
-    };
-
-    const options = {
-      nodes: {
-        shape: 'dot',
-        scaling: {
-          min: 10,
-          max: 30,
-          label: { enabled: true, min: 12, max: 22, maxVisible: 22, drawThreshold: 8 },
-        },
-      },
-      edges: {
-        smooth: { type: 'continuous', roundness: 0.5 },
-        width: 2,
-      },
-      physics: {
-        // The initial layout always runs; the stabilized handler turns physics off afterwards.
-        enabled: true,
-        barnesHut: {
-          gravitationalConstant: -8000,
-          centralGravity: 0.3,
-          springLength: 150,
-          springConstant: 0.04,
-          damping: 0.09,
-          avoidOverlap: 1,
-        },
-        stabilization: {
+    this.network = new vis.Network(
+      container,
+      { nodes: new vis.DataSet(nodes), edges: new vis.DataSet(edges) },
+      {
+        nodes: { shape: 'dot' },
+        edges: { smooth: { type: 'continuous', roundness: 0.5 }, width: 2 },
+        physics: {
           enabled: true,
-          iterations: data.nodes.length > 500 ? 100 : 200,
-          updateInterval: 25,
+          barnesHut: {
+            gravitationalConstant: -4000,
+            centralGravity: 0.5,
+            springLength: 120,
+            springConstant: 0.04,
+            damping: 0.09,
+            avoidOverlap: 0.6,
+          },
+          stabilization: { enabled: true, iterations: 200, updateInterval: 25 },
         },
-      },
-      interaction: {
-        hover: true,
-        tooltipDelay: 100,
-        zoomView: true,
-        dragView: true,
-      },
-    };
-
-    this.network = new vis.Network(container, networkData, options);
-
-    // Event handlers
-    this.network.on('click', (params: { nodes: Array<string | number> }) => {
-      try {
-        if (params.nodes.length > 0) {
-          const nodeId = params.nodes[0];
-          const targetId = String(nodeId);
-          const node = data.nodes.find((n) => String(n.id) === targetId);
-          if (node) {
-            logger.debug('Node clicked:', nodeId, node);
-            this.showDetail(node);
-            this.highlightConnectedNodes(targetId);
-          }
-        } else {
-          this.closeDetail();
-          this.resetNodeHighlight();
-        }
-      } catch (error) {
-        logger.error('Error handling click:', error);
-        if (error instanceof Error && error.stack) {
-          logger.error('Error stack:', error.stack);
-        }
-      }
-    });
-
-    // Hover: show label at fixed visual size regardless of zoom (Obsidian style)
-    this.network.on('hoverNode', (params: { node: string | number }) => {
-      try {
-        const scale = this.network?.getScale() || 1;
-        const targetVisualSize = 16; // px on screen
-        const fontSize = Math.round(targetVisualSize / scale);
-        networkData.nodes.update({
-          id: params.node,
-          font: { color: '#131313', size: Math.max(fontSize, 14), vadjust: -2 },
-        });
-      } catch {
-        /* ignore */
-      }
-    });
-    this.network.on('blurNode', (params: { node: string | number }) => {
-      try {
-        networkData.nodes.update({
-          id: params.node,
-          font: { color: '#131313', size: 14, vadjust: -2 },
-        });
-      } catch {
-        /* ignore */
+        interaction: { hover: true, tooltipDelay: 100, zoomView: true, dragView: true },
       }
+    );
+    this.network.on('click', (params: { nodes: Array<string | number> }) => {
+      const node = graph.nodes.find((candidate) => candidate.id === String(params.nodes[0]));
+      if (node) void this.showDetail(node);
     });
-
-    // A large graph may never reach vis-network's 'stabilized'; stop when the bounded iterations end.
     this.network.on('stabilizationIterationsDone', () => {
       this.network?.setOptions?.({ physics: { enabled: false } });
     });
 
-    this.network.on('stabilized', () => {
-      const loadingEl = getElementByIdOrNull<HTMLElement>('graph-loading');
-      if (loadingEl) {
-        loadingEl.style.display = 'none';
-      }
-      // Disable physics after initial layout to free CPU
-      this.network?.setOptions?.({ physics: { enabled: false } });
-      logger.info('Graph stabilized, physics disabled');
-    });
-
-    // Backup: hide loading after 3 seconds even if stabilization doesn't complete
-    setTimeout(() => {
-      const loadingEl = getElementByIdOrNull<HTMLElement>('graph-loading');
-      if (loadingEl && loadingEl.style.display !== 'none') {
-        loadingEl.style.display = 'none';
-        logger.warn('Graph loading hidden by timeout');
-      }
-    }, 3000);
-
-    // Populate topic filter — sorted by most recent created_at (newest first)
-    const topicLatest = new Map<string, number>();
-    for (const n of data.nodes) {
-      const t = n.topic || '';
-      const ts = typeof n.created_at === 'number' ? n.created_at : 0;
-      if (!topicLatest.has(t) || ts > topicLatest.get(t)!) {
-        topicLatest.set(t, ts);
-      }
-    }
-    const topics = [...topicLatest.entries()].sort((a, b) => b[1] - a[1]).map(([topic]) => topic);
-    this.populateTopicFilter(topics);
-    this.populateDecisionList(data.nodes);
     this.renderLegend();
-
+    getElementByIdOrNull<HTMLElement>('legend-panel')?.classList.add('visible');
     const stats = getElementByIdOrNull<HTMLElement>('graph-stats');
     if (stats) {
-      stats.textContent = `${data.nodes.length} nodes · ${data.edges.length} edges${data.meta?.partial ? ' · partial' : ''}`;
+      const selected = graph.nodes.filter((node) => !node.outside).length;
+      const outside = graph.nodes.length - selected;
+      stats.style.display = '';
+      stats.textContent = `${selected} records and work items · ${graph.edges.length} links${
+        outside === 0 ? '' : ` · ${outside} linked records outside this filter, faded`
+      } · click a dot for its detail`;
     }
-
-    logger.info('Graph initialized with', nodes.length, 'nodes and', edges.length, 'edges');
   }
 
   // =============================================
-  // Styling Utilities
+  // Styling and legend
   // =============================================
 
-  getNodeColor(kind = 'memory'): string {
-    return this.nodeColors[kind] ?? '#CBD5E1';
+  getEdgeStyle(relationship?: string): EdgeStyle {
+    return (
+      this.edgeStyles[relationship ?? 'default'] ?? { color: '#4a4a6a', dashes: false, width: 2 }
+    );
+  }
+
+  kindLabel(kind: string | null): string {
+    return kind === null ? KIND_LABELS.memory : (KIND_LABELS[kind] ?? kind);
   }
 
-  /** Count the displayed data, excluding nodes hidden by filters and their edges. */
+  relationLabel(relationship: string): string {
+    return RELATION_LABELS[relationship] ?? relationship;
+  }
+
+  /** Count what is drawn, by group and by relationship, with the words the legend shows. */
   getLegendEntries() {
-    const visible = new Set(
-      (this.network ? this.network.body.data.nodes.get() : this.graphData.nodes)
-        .filter((node) => !node.hidden)
-        .map((node) => String(node.id))
-    );
-    const kinds = new Map<string, number>();
+    const groups = new Map<string, number>();
     const relations = new Map<string, number>();
-    for (const node of this.graphData.nodes) {
-      if (!visible.has(String(node.id))) continue;
-      const kind = node.kind ?? 'memory';
-      kinds.set(kind, (kinds.get(kind) ?? 0) + 1);
+    for (const node of this.graph.nodes) {
+      groups.set(node.group, (groups.get(node.group) ?? 0) + 1);
     }
-    for (const edge of this.graphData.edges) {
-      if (!visible.has(String(edge.from)) || !visible.has(String(edge.to))) continue;
-      const relation = edge.relationship ?? 'default';
-      relations.set(relation, (relations.get(relation) ?? 0) + 1);
+    for (const edge of this.graph.edges) {
+      relations.set(edge.relation, (relations.get(edge.relation) ?? 0) + 1);
     }
     return {
-      nodes: [...kinds]
-        .sort(([a], [b]) => a.localeCompare(b))
-        .map(([kind, count]) => ({
-          kind,
-          count,
-          color: this.getNodeColor(kind),
-        })),
+      nodes: [...groups].map(([group, count]) => ({
+        group,
+        label: group === 'outside' ? 'Linked, outside this filter' : groupInfo(group).label,
+        count,
+        color: group === 'outside' ? OUTSIDE_COLOR : groupInfo(group).color,
+      })),
       edges: [...relations]
-        .sort(([a], [b]) => a.localeCompare(b))
+        .sort(([, a], [, b]) => b - a)
         .map(([relationship, count]) => ({
           relationship,
+          label: this.relationLabel(relationship),
           count,
           ...this.getEdgeStyle(relationship),
         })),
@@ -382,933 +361,76 @@ export class GraphModule {
     const section = (title: string, rows: string[]) =>
       rows.length === 0
         ? ''
-        : `<div><div class="text-[10px] font-semibold text-gray-600 uppercase tracking-wide mb-1.5">${title}</div>${rows.join('')}</div>`;
+        : `<div><div class="legend-heading">${title}</div>${rows.join('')}</div>`;
     const row = (sample: string, label: string, count: number) =>
-      `<div class="flex items-center gap-2 text-xs text-gray-700 mb-1">${sample}<span class="flex-1">${escapeHtml(label)}</span><span class="tabular-nums">${count}</span></div>`;
+      `<div class="legend-row">${sample}<span class="legend-label">${escapeHtml(label)}</span><span class="legend-count">${count}</span></div>`;
     container.innerHTML =
       section(
-        'Node kinds',
-        entries.nodes.map(({ kind, count, color }) =>
-          row(
-            `<span class="w-3 h-3 rounded-full shrink-0" style="background:${color}"></span>`,
-            kind,
-            count
-          )
+        'Dots (a work item is one dot for its updates)',
+        entries.nodes.map(({ label, count, color }) =>
+          row(`<span class="legend-dot" style="background:${color}"></span>`, label, count)
         )
       ) +
       section(
-        'Relationships',
-        entries.edges.map(({ relationship, count, color, dashes, width }) => {
+        'Lines (arrow points at what the record links to)',
+        entries.edges.map(({ label, count, color, dashes, width }) => {
           const dash = Array.isArray(dashes) ? dashes.join(' ') : dashes ? '5 5' : 'none';
           return row(
-            `<svg width="24" height="10" class="shrink-0" aria-hidden="true"><line x1="0" y1="5" x2="24" y2="5" stroke="${color}" stroke-width="${width}" stroke-dasharray="${dash}" /></svg>`,
-            relationship,
+            `<svg width="28" height="10" class="shrink-0" aria-hidden="true"><line x1="0" y1="5" x2="28" y2="5" stroke="${color}" stroke-width="${width}" stroke-dasharray="${dash}" /></svg>`,
+            label,
             count
           );
         })
       );
-    if (entries.nodes.length === 0) container.textContent = 'No visible nodes';
-  }
-
-  /**
-   * Get border color based on outcome
-   */
-  getOutcomeBorderColor(outcome?: string, fallback = '#4a4a6a'): string {
-    switch (outcome?.toLowerCase()) {
-      case 'success':
-        return '#22c55e';
-      case 'failed':
-        return '#ef4444';
-      case 'partial':
-        return '#f59e0b';
-      default:
-        return fallback;
-    }
-  }
-
-  /**
-   * Get edge style by relationship type
-   */
-  getEdgeStyle(relationship?: string): EdgeStyle {
-    return (
-      this.edgeStyles[relationship || 'default'] || { color: '#4a4a6a', dashes: false, width: 2 }
-    );
-  }
-
-  /**
-   * Get node size based on connection count
-   */
-  getNodeSize(connectionCount: number): number {
-    if (connectionCount <= 2) {
-      return 12;
-    }
-    if (connectionCount <= 5) {
-      return 18;
-    }
-    if (connectionCount <= 10) {
-      return 24;
-    }
-    return 30;
-  }
-
-  /**
-   * Create node tooltip
-   */
-  createNodeTooltip(node: GraphNodeRecord): string {
-    return `
-      <strong>${escapeHtml(node.topic || 'Unknown')}</strong><br>
-      Decision: ${escapeHtml((node.decision || '').substring(0, 100))}...<br>
-      ${node.outcome ? `Outcome: ${escapeHtml(node.outcome)}<br>` : ''}
-      Confidence: ${Math.round((node.confidence || 0) * 100)}%
-    `;
-  }
-
-  // =============================================
-  // Data Processing
-  // =============================================
-
-  /**
-   * Build adjacency list for BFS
-   */
-  buildAdjacencyList(edges: GraphEdgeRecord[]): void {
-    this.adjacencyList = new Map();
-
-    edges.forEach((edge) => {
-      const from = String(edge.from);
-      const to = String(edge.to);
-
-      if (!this.adjacencyList.has(from)) {
-        this.adjacencyList.set(from, []);
-      }
-      if (!this.adjacencyList.has(to)) {
-        this.adjacencyList.set(to, []);
-      }
-      this.adjacencyList.get(from).push(to);
-      this.adjacencyList.get(to).push(from);
-    });
-
-    logger.debug('Adjacency list built with', this.adjacencyList.size, 'nodes');
+    if (entries.nodes.length === 0) container.textContent = 'Nothing drawn';
   }
 
-  /**
-   * Calculate connection count for each node
-   */
-  calculateConnectionCounts(
-    nodes: GraphNodeRecord[],
-    edges: GraphEdgeRecord[]
-  ): Record<string, number> {
-    const counts: Record<string, number> = {};
-    nodes.forEach((n) => {
-      counts[String(n.id)] = 0;
-    });
-
-    edges.forEach((edge) => {
-      const from = String(edge.from);
-      const to = String(edge.to);
-      if (counts[from] !== undefined) {
-        counts[from]++;
-      }
-      if (counts[to] !== undefined) {
-        counts[to]++;
-      }
-    });
-
-    return counts;
+  createNodeTooltip(node: FilterGraphNode): string {
+    const group = node.outside ? 'Linked, outside this filter' : groupInfo(node.group).label;
+    const updates = node.updates > 0 ? `\n${node.updates} updates in this period` : '';
+    return `${group} · ${this.kindLabel(node.kind)}\n${node.label.slice(0, 160)}${updates}`;
   }
 
   // =============================================
-  // Graph Traversal & Highlighting
+  // Detail Panel
   // =============================================
 
-  /**
-   * Get connected node IDs using BFS
-   */
-  getConnectedNodeIds(nodeId: string, maxDepth = 3): string[] {
-    const visited = new Set<string>();
-    const queue: { id: string; depth: number }[] = [{ id: nodeId, depth: 0 }];
-    visited.add(nodeId);
-
-    while (queue.length > 0) {
-      const next = queue.shift();
-      if (!next) {
-        continue;
-      }
-      const { id, depth } = next;
-
-      if (depth >= maxDepth) {
-        continue;
-      }
-
-      const neighbors = this.adjacencyList.get(id) || [];
-      neighbors.forEach((neighborId) => {
-        if (!visited.has(neighborId)) {
-          visited.add(neighborId);
-          queue.push({ id: neighborId, depth: depth + 1 });
-        }
-      });
-    }
-
-    return Array.from(visited);
-  }
-
-  /**
-   * Highlight connected nodes
-   */
-  highlightConnectedNodes(nodeId: string | number): void {
-    const targetId = String(nodeId);
-    if (!this.network) {
-      return;
-    }
-
-    const connectedIds = this.getConnectedNodeIds(targetId, 3);
-    const allNodes = this.network.body.data.nodes.get();
-    const nodeUpdates = allNodes.map((node) => {
-      const isConnected = connectedIds.includes(String(node.id));
-      const opacity = isConnected ? 1.0 : 0.2;
-      return {
-        id: node.id,
-        opacity: opacity,
-        font: { ...node.font, color: isConnected ? '#131313' : '#999' },
-      };
-    });
-    this.network.body.data.nodes.update(nodeUpdates);
-
-    const allEdges = this.network.body.data.edges.get();
-    const edgeUpdates = allEdges.map((edge) => {
-      const isConnected =
-        connectedIds.includes(String(edge.from)) && connectedIds.includes(String(edge.to));
-      return {
-        id: edge.id,
-        opacity: isConnected ? 1.0 : 0.1,
-      };
-    });
-    this.network.body.data.edges.update(edgeUpdates);
-  }
-
-  /**
-   * Reset node highlight
-   */
-  resetNodeHighlight(): void {
-    if (!this.network) {
+  async showDetail(target: Pick<FilterGraphNode, 'detailId' | 'label' | 'kind'>): Promise<void> {
+    const panel = getElementByIdOrNull<HTMLDivElement>('decision-detail-modal');
+    const topicEl = getElementByIdOrNull<HTMLElement>('detail-topic');
+    const kindEl = getElementByIdOrNull<HTMLElement>('detail-kind');
+    const decisionEl = getElementByIdOrNull<HTMLElement>('detail-decision');
+    const reasoningEl = getElementByIdOrNull<HTMLElement>('detail-reasoning');
+    const createdEl = getElementByIdOrNull<HTMLElement>('detail-created');
+    if (!panel || !decisionEl || !reasoningEl) {
+      logger.error('Detail panel elements missing');
       return;
     }
+    if (topicEl) topicEl.textContent = target.label;
+    if (kindEl) kindEl.textContent = this.kindLabel(target.kind);
+    if (createdEl) createdEl.textContent = '-';
+    decisionEl.innerHTML = '<span class="loading-similar">Loading details...</span>';
+    reasoningEl.innerHTML = '';
+    panel.classList.add('visible');
 
-    const allNodes = this.network.body.data.nodes.get();
-    this.network.body.data.nodes.update(
-      allNodes.map((node) => ({
-        id: node.id,
-        opacity: 1.0,
-        font: { ...node.font, color: '#131313' },
-      }))
-    );
-
-    const allEdges = this.network.body.data.edges.get();
-    this.network.body.data.edges.update(
-      allEdges.map((edge) => ({
-        id: edge.id,
-        opacity: 1.0,
-      }))
-    );
-  }
-
-  // =============================================
-  // Detail Panel
-  // =============================================
-
-  /**
-   * Show node detail panel
-   */
-  async showDetail(node: GraphNodeRecord): Promise<void> {
+    const request = ++this.detailRequest;
     try {
-      logger.debug('showDetail called with node:', node);
-      this.currentNodeId = String(node.id);
-      const panel = getElementByIdOrNull<HTMLDivElement>('decision-detail-modal');
-
-      if (!panel) {
-        logger.error('decision-detail-modal element not found');
-        return;
-      }
-
-      // Update existing DOM elements with markdown rendering
-      const topicEl = getElementByIdOrNull<HTMLElement>('detail-topic');
-      const decisionEl = getElementByIdOrNull<HTMLElement>('detail-decision');
-      const reasoningEl = getElementByIdOrNull<HTMLElement>('detail-reasoning');
-      if (!decisionEl || !reasoningEl) {
-        logger.error('Required detail elements missing');
-        return;
-      }
-      if (topicEl) {
-        topicEl.textContent = node.topic || 'Unknown Topic';
-      }
-
-      decisionEl.innerHTML = '<span class="loading-similar">Loading details...</span>';
-      reasoningEl.innerHTML = '<span class="loading-similar">Loading details...</span>';
-
-      const outcomeSelect = getElementByIdOrNull<HTMLSelectElement>('detail-outcome-select');
-      if (outcomeSelect) {
-        outcomeSelect.value = node.outcome ? node.outcome.toUpperCase() : '';
-        outcomeSelect.disabled = Boolean(
-          (node.kind && node.kind !== 'memory') || (node.state && node.state !== 'current')
-        );
-      }
-
-      // Clear outcome status
-      const outcomeStatus = getElementByIdOrNull<HTMLElement>('outcome-status');
-      if (outcomeStatus) {
-        outcomeStatus.textContent = '';
-        outcomeStatus.className = '';
+      const detail = await API.getGraphDetail(target.detailId);
+      if (request !== this.detailRequest) return;
+      const detailNode = detail.node;
+      if (createdEl && detailNode.created_at) {
+        createdEl.textContent = new Date(detailNode.created_at).toLocaleString();
       }
-
-      const confidenceEl = getElementByIdOrNull<HTMLElement>('detail-confidence');
-      if (confidenceEl) {
-        confidenceEl.textContent = node.confidence ? `${(node.confidence * 100).toFixed(0)}%` : '-';
-      }
-
-      const createdEl = getElementByIdOrNull<HTMLElement>('detail-created');
-      if (createdEl) {
-        createdEl.textContent = node.created_at ? new Date(node.created_at).toLocaleString() : '-';
-      }
-
-      // Reset reasoning toggle
-      const reasoningArrow = getElementByIdOrNull<HTMLElement>('reasoning-arrow');
-      if (reasoningArrow) {
-        reasoningArrow.textContent = '▶';
-      }
-      reasoningEl.classList.add('hidden');
-
-      // Show loading state for similar decisions
-      const similarEl = getElementByIdOrNull<HTMLElement>('detail-similar');
-      if (similarEl) {
-        similarEl.innerHTML = '<span class="loading-similar">Searching...</span>';
-      }
-
-      // Show panel
-      panel.classList.add('visible');
-
-      const detail = await API.getGraphDetail(String(node.id));
-      const detailNode = detail.node || node;
-      const localNode = this.graphData.nodes.find((n) => String(n.id) === String(node.id));
-      if (localNode) {
-        Object.assign(localNode, detailNode);
-      }
-
       decisionEl.innerHTML = renderSafeMarkdown(
         String(detailNode.decision || detailNode.decision_preview || '-')
       );
       reasoningEl.innerHTML = renderSafeMarkdown(String(detailNode.reasoning || '-'));
-
-      // Canonical graph relations are already visible as edges. The old
-      // vector-similarity endpoint only understands legacy decision ids.
-      if (node.kind) {
-        if (similarEl) similarEl.textContent = 'Related records are shown as graph edges.';
-      } else {
-        void this.fetchSimilarDecisions(String(node.id));
-      }
-      logger.debug('showDetail completed successfully');
     } catch (error) {
-      logger.error('Error in showDetail:', error);
-      if (error instanceof Error && error.stack) {
-        logger.error('Error stack:', error.stack);
-      }
-      logger.error('Node data:', node);
-    }
-  }
-
-  /**
-   * Get outcome icon name
-   */
-  getOutcomeIcon(outcome?: string): string {
-    const outcomeMap = {
-      pending: 'clock',
-      success: 'check-circle',
-      failed: 'x-circle',
-      partial: 'alert-circle',
-    };
-    return outcomeMap[(outcome || 'pending').toLowerCase()] || 'clock';
-  }
-
-  /**
-   * Toggle reasoning full text
-   */
-  toggleReasoning(): void {
-    const arrow = getElementByIdOrNull<HTMLElement>('reasoning-arrow');
-    const content = getElementByIdOrNull<HTMLElement>('detail-reasoning');
-    if (arrow && content) {
-      const isHidden = content.classList.contains('hidden');
-      content.classList.toggle('hidden');
-      arrow.textContent = isHidden ? '▼' : '▶';
-    }
-  }
-
-  /**
-   * Close detail panel
-   */
-  closeDetail(): void {
-    const panel = getElementByIdOrNull<HTMLDivElement>('decision-detail-modal');
-    if (panel) {
-      panel.classList.remove('visible');
-    }
-    this.currentNodeId = null;
-    this.resetNodeHighlight();
-  }
-
-  /**
-   * Fetch similar decisions
-   */
-  async fetchSimilarDecisions(nodeId: string): Promise<void> {
-    logger.debug('fetchSimilarDecisions called for node:', nodeId);
-    const container = getElementByIdOrNull<HTMLElement>('detail-similar');
-
-    if (!container) {
-      logger.warn('detail-similar element not found');
-      return;
-    }
-
-    try {
-      logger.info('Calling API.getSimilarDecisions...');
-      const data = await API.getSimilarDecisions(nodeId);
-      logger.debug('Similar decisions received:', data);
-
-      const similar = (data.similar || []) as SimilarDecision[];
-
-      if (similar.length === 0) {
-        logger.debug('[MAMA] No similar decisions found');
-        container.innerHTML = '<span style="color:#666">No similar decisions found</span>';
-        return;
-      }
-
-      logger.debug('[MAMA] Building similar decisions HTML for', similar.length, 'items');
-      const html = similar
-        .map(
-          (s) => `
-          <button class="similar-decision-btn w-full text-left p-2 mb-2 bg-gray-100 dark:bg-gray-800 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 border border-gray-200 dark:border-gray-700 rounded-lg transition-colors" data-node-id="${escapeAttr(String(s.id))}">
-            <div class="text-xs font-semibold text-indigo-600 dark:text-indigo-400">${escapeHtml(
-              String(s.topic || '')
-            )}</div>
-            <div class="text-xs text-gray-600 dark:text-gray-400 mt-1 line-clamp-2">${escapeHtml(
-              String(s.decision || '').substring(0, 80)
-            )}...</div>
-            <div class="text-xs text-gray-500 mt-1">${Math.round((s.similarity || 0) * 100)}% match</div>
-          </button>
-        `
-        )
-        .join('');
-
-      logger.debug('[MAMA] Setting similar decisions HTML');
-      container.innerHTML = html;
-
-      // Bind click handler once to avoid duplicate listeners.
-      container.removeEventListener('click', this.similarDecisionClickHandler);
-      container.addEventListener('click', this.similarDecisionClickHandler);
-      logger.debug('[MAMA] fetchSimilarDecisions completed');
-    } catch (error) {
-      const message = getErrorMessage(error);
-      logger.error('[MAMA] Failed to fetch similar decisions:', message, error);
-      if (error instanceof Error && error.stack) {
-        logger.error('Error stack:', error.stack);
-      }
-      container.innerHTML = '<span style="color:#f66">Failed to load</span>';
-    }
-  }
-
-  /**
-   * Save outcome for current node
-   */
-  async saveOutcome(): Promise<void> {
-    const current = this.graphData.nodes.find((node) => String(node.id) === this.currentNodeId);
-    if (
-      (current?.kind && current.kind !== 'memory') ||
-      (current?.state && current.state !== 'current')
-    )
-      return;
-    const select = getElementByIdOrNull<HTMLSelectElement>('detail-outcome-select');
-    if (!select) {
-      return;
-    }
-    const newOutcome = select.value;
-
-    if (!this.currentNodeId || !newOutcome) {
-      return;
-    }
-
-    try {
-      await API.updateOutcome(this.currentNodeId, newOutcome);
-
-      // Update local data
-      const node = this.graphData.nodes.find((n) => String(n.id) === this.currentNodeId);
-      if (node) {
-        node.outcome = newOutcome.toUpperCase();
-
-        // Update visualization
-        this.network.body.data.nodes.update({
-          id: this.currentNodeId,
-          color: {
-            border: this.getOutcomeBorderColor(newOutcome),
-          },
-        });
-
-        // Refresh detail panel
-        this.showDetail(node);
-      }
-
-      logger.debug('[MAMA] Outcome updated:', this.currentNodeId, newOutcome);
-    } catch (error) {
-      const message = getErrorMessage(error);
-      logger.error('[MAMA] Failed to update outcome:', message);
-      alert(`Failed to update outcome: ${message}`);
-    }
-  }
-
-  // =============================================
-  // Navigation
-  // =============================================
-
-  /**
-   * Navigate to specific node
-   */
-  async navigateToNode(nodeId: string | number): Promise<void> {
-    if (!this.network) {
-      return;
-    }
-
-    let nodeIdString = String(nodeId);
-
-    // Try exact match first
-    let node = this.graphData.nodes.find((n) => String(n.id) === nodeIdString);
-
-    // If not found, try partial match (for short IDs from checkpoints)
-    if (!node) {
-      logger.debug('[MAMA] Exact match not found, trying partial match for:', nodeIdString);
-      node = this.graphData.nodes.find((n) => String(n.id).startsWith(nodeIdString));
-
-      if (node) {
-        logger.debug('[MAMA] Found node via partial match:', node.id);
-        nodeIdString = String(node.id); // Update to the full ID
-      }
-    }
-
-    // If node not in current graph, reload without filters
-    if (!node) {
-      logger.warn('[MAMA] Node not in current graph, reloading all nodes...');
-
-      // Reset topic filter
-      const topicFilter = getElementByIdOrNull<HTMLSelectElement>('topic-filter');
-      if (topicFilter) {
-        topicFilter.value = '';
-      }
-
-      // Reload graph: fetch fresh data and reinitialize
-      await this.fetchData({ full: true });
-      this.init(this.graphData);
-
-      // Try exact match again
-      node = this.graphData.nodes.find((n) => String(n.id) === nodeIdString);
-
-      // If still not found, try partial match
-      if (!node) {
-        node = this.graphData.nodes.find((n) => String(n.id).startsWith(nodeIdString));
-        if (node) {
-          logger.debug('[MAMA] Found node via partial match after reload:', node.id);
-          nodeIdString = String(node.id);
-        }
-      }
-
-      if (!node) {
-        logger.warn('[MAMA] Node not found even after reload:', nodeIdString);
-        showToast('⚠️ Decision not found in graph');
-        return;
-      }
-    }
-
-    // Focus on node (use resolved nodeIdString, not original nodeId)
-    this.network.focus(nodeIdString, {
-      scale: 1.5,
-      animation: { duration: 500, easingFunction: 'easeInOutQuad' },
-    });
-
-    // Select node (triggers click event)
-    this.network.selectNodes([nodeIdString]);
-
-    // Show detail
-    this.showDetail(node);
-    this.highlightConnectedNodes(nodeIdString);
-  }
-
-  /**
-   * Get connected edge types
-   */
-  getConnectedEdges(nodeId: string): ConnectedEdges {
-    const edges = this.graphData.edges.filter(
-      (e) => String(e.from) === nodeId || String(e.to) === nodeId
-    );
-
-    const outgoing = edges.filter((e) => String(e.from) === nodeId);
-    const incoming = edges.filter((e) => String(e.to) === nodeId);
-
-    return { outgoing, incoming, all: edges };
-  }
-
-  // =============================================
-  // Filtering
-  // =============================================
-
-  /**
-   * Populate topic filter dropdown
-   */
-  populateTopicFilter(topics: string[]): void {
-    const datalist = getElementByIdOrNull<HTMLDataListElement>('topic-filter-list');
-    if (!datalist) {
-      // Fallback for old select element
-      const select = getElementByIdOrNull<HTMLSelectElement>('topic-filter');
-      if (!select) return;
-      select.innerHTML = '<option value="">All Topics</option>';
-      topics.forEach((topic) => {
-        const option = document.createElement('option');
-        option.value = topic;
-        option.textContent = topic;
-        select.appendChild(option);
-      });
-      return;
-    }
-
-    datalist.innerHTML = '';
-    topics.forEach((topic) => {
-      const option = document.createElement('option');
-      option.value = topic;
-      datalist.appendChild(option);
-    });
-  }
-
-  /**
-   * Populate left-side decision list (time-sorted, newest first)
-   */
-  populateDecisionList(nodes: GraphNodeRecord[]): void {
-    const listEl = getElementByIdOrNull<HTMLElement>('decision-list');
-    const countEl = getElementByIdOrNull<HTMLElement>('decision-list-count');
-    if (!listEl) return;
-
-    const sorted = [...nodes].sort((a, b) => {
-      const ta = typeof a.created_at === 'number' ? a.created_at : 0;
-      const tb = typeof b.created_at === 'number' ? b.created_at : 0;
-      return tb - ta;
-    });
-
-    if (countEl) countEl.textContent = String(sorted.length);
-
-    if (sorted.length === 0) {
-      listEl.innerHTML =
-        '<div style="padding:16px;text-align:center;color:#9E9891;font-size:11px">No decisions yet</div>';
-      return;
-    }
-
-    const formatTime = (ts: number | string | undefined): string => {
-      if (!ts) return '';
-      const d = new Date(typeof ts === 'number' ? ts : parseInt(String(ts), 10));
-      const now = Date.now();
-      const diffH = Math.floor((now - d.getTime()) / 3600000);
-      if (diffH < 1) return 'just now';
-      if (diffH < 24) return `${diffH}h ago`;
-      const diffD = Math.floor(diffH / 24);
-      return `${diffD}d ago`;
-    };
-
-    const topicLabel = (topic: string): string => {
-      const parts = topic.split('/').filter(Boolean);
-      return parts[parts.length - 1] || topic;
-    };
-
-    listEl.innerHTML = sorted
-      .map((n) => {
-        const preview = escapeHtml((n.decision_preview || n.decision || '').slice(0, 80));
-        const topic = escapeHtml(topicLabel(n.topic || ''));
-        const time = formatTime(n.created_at);
-        const id = escapeAttr(String(n.id));
-        return `<div class="mama-decision-item" data-node-id="${id}" onclick="window.graphModule?.focusNode('${id}')" style="padding:6px 8px;border-bottom:1px solid #F5F2ED;cursor:pointer;transition:background 0.1s" onmouseover="this.style.background='#FFFDF5'" onmouseout="this.style.background=''"><div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:2px"><span style="font-size:11px;font-weight:600;color:#1A1A1A;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px">${topic}</span><span style="font-size:9px;color:#9E9891;flex-shrink:0;font-variant-numeric:tabular-nums">${time}</span></div><div style="font-size:10px;color:#6B6560;line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical">${preview}</div></div>`;
-      })
-      .join('');
-  }
-
-  /**
-   * Focus a specific node in the graph (called from decision list click)
-   */
-  focusNode(nodeId: string): void {
-    if (!this.network) return;
-    try {
-      this.network.selectNodes([nodeId]);
-      this.network.focus(nodeId, {
-        scale: 1.5,
-        animation: { duration: 300, easingFunction: 'easeInOutQuad' },
-      });
-      // Trigger the detail panel
-      const nodeData = this.graphData.nodes.find((n) => String(n.id) === nodeId);
-      if (nodeData) {
-        this.showDetail(nodeData);
-      }
-    } catch (err) {
-      logger.warn('focusNode failed:', err);
-    }
-  }
-
-  /**
-   * Filter by topic
-   */
-  filterByTopic(topic: string): void {
-    if (!this.network) {
-      return;
-    }
-
-    const allNodes = this.network.body.data.nodes.get();
-
-    if (!topic) {
-      // Show all
-      allNodes.forEach((node) => {
-        this.network.body.data.nodes.update({
-          id: node.id,
-          hidden: false,
-        });
-      });
-    } else {
-      // Filter — supports exact match from datalist or partial substring match from typing
-      const lowerTopic = topic.toLowerCase();
-      allNodes.forEach((node) => {
-        const nodeData = this.graphData.nodes.find((n) => String(n.id) === String(node.id));
-        const nodeTopic = nodeData?.topic || '';
-        const matches = nodeTopic === topic || nodeTopic.toLowerCase().includes(lowerTopic);
-        this.network.body.data.nodes.update({
-          id: node.id,
-          hidden: !matches,
-        });
-      });
-    }
-
-    this.renderLegend();
-    logger.debug('[MAMA] Filtered by topic:', topic || 'all');
-  }
-
-  /**
-   * Filter by outcome
-   */
-  filterByOutcome(outcome: string): void {
-    if (!this.network) {
-      return;
-    }
-
-    const allNodes = this.network.body.data.nodes.get();
-
-    if (!outcome) {
-      // Show all
-      allNodes.forEach((node) => {
-        this.network.body.data.nodes.update({
-          id: node.id,
-          hidden: false,
-        });
-      });
-    } else {
-      // Filter by outcome
-      allNodes.forEach((node) => {
-        const nodeData = this.graphData.nodes.find((n) => String(n.id) === String(node.id));
-        const nodeOutcome = (nodeData?.outcome || '').toLowerCase();
-        this.network.body.data.nodes.update({
-          id: node.id,
-          hidden: nodeOutcome !== outcome.toLowerCase(),
-        });
-      });
-    }
-
-    this.renderLegend();
-    logger.debug('[MAMA] Filtered by outcome:', outcome || 'all');
-  }
-
-  /**
-   * Clear all filters
-   */
-  clearFilters(): void {
-    if (!this.network) {
-      return;
-    }
-
-    // Show all nodes
-    const allNodes = this.network.body.data.nodes.get();
-    allNodes.forEach((node) => {
-      this.network.body.data.nodes.update({
-        id: node.id,
-        hidden: false,
-        opacity: 1.0,
-        font: { ...node.font, color: '#131313' },
-      });
-    });
-
-    // Show all edges
-    const allEdges = this.network.body.data.edges.get();
-    allEdges.forEach((edge) => {
-      this.network.body.data.edges.update({
-        id: edge.id,
-        opacity: 1.0,
-      });
-    });
-
-    // Clear search state
-    this.searchMatches = [];
-    this.currentSearchIndex = 0;
-
-    const countEl = getElementByIdOrNull<HTMLElement>('search-count');
-    if (countEl) {
-      countEl.style.display = 'none';
-    }
-
-    this.renderLegend();
-    logger.debug('[MAMA] All filters cleared');
-  }
-
-  // =============================================
-  // Search
-  // =============================================
-
-  /**
-   * Perform search
-   */
-  search(): void {
-    const queryInput = getElementByIdOrNull<HTMLInputElement>('search-input');
-    const query = queryInput ? queryInput.value.trim().toLowerCase() : '';
-
-    if (!query) {
-      this.clearSearch();
-      return;
-    }
-
-    // Search in topic, decision, and reasoning
-    this.searchMatches = this.graphData.nodes.filter(
-      (node) =>
-        (node.topic || '').toLowerCase().includes(query) ||
-        (node.decision || '').toLowerCase().includes(query) ||
-        (node.reasoning || '').toLowerCase().includes(query)
-    );
-
-    this.currentSearchIndex = 0;
-    this.updateSearchResults();
-
-    if (this.searchMatches.length > 0) {
-      this.highlightSearchResults();
-      this.navigateToNode(String(this.searchMatches[0].id));
-    }
-
-    logger.debug('[MAMA] Search:', query, '- Found', this.searchMatches.length, 'matches');
-  }
-
-  /**
-   * Handle search input
-   */
-  handleSearchInput(event: KeyboardEvent): void {
-    if (event.key === 'Enter' && this.searchMatches.length > 0) {
-      this.nextSearchResult();
-    } else {
-      this.debouncedSearch();
-    }
-  }
-
-  /**
-   * Navigate to next search result
-   */
-  nextSearchResult(): void {
-    if (this.searchMatches.length === 0) {
-      return;
-    }
-
-    this.currentSearchIndex = (this.currentSearchIndex + 1) % this.searchMatches.length;
-    this.navigateToNode(this.searchMatches[this.currentSearchIndex].id);
-    this.updateSearchResults();
-  }
-
-  /**
-   * Navigate to previous search result
-   */
-  prevSearchResult(): void {
-    if (this.searchMatches.length === 0) {
-      return;
-    }
-
-    this.currentSearchIndex =
-      (this.currentSearchIndex - 1 + this.searchMatches.length) % this.searchMatches.length;
-    this.navigateToNode(this.searchMatches[this.currentSearchIndex].id);
-    this.updateSearchResults();
-  }
-
-  /**
-   * Update search count display
-   */
-  updateSearchResults(): void {
-    const countEl = getElementByIdOrNull<HTMLElement>('search-count');
-    if (!countEl) {
-      return;
-    }
-
-    if (this.searchMatches.length > 0) {
-      countEl.textContent = `${this.currentSearchIndex + 1} / ${this.searchMatches.length}`;
-      countEl.style.display = 'inline';
-    } else {
-      countEl.textContent = 'No results';
-      countEl.style.display = 'inline';
-    }
-  }
-
-  /**
-   * Highlight search results
-   */
-  highlightSearchResults(): void {
-    if (!this.network) {
-      return;
-    }
-
-    const matchIds = this.searchMatches.map((n) => n.id);
-    const allNodes = this.network.body.data.nodes.get();
-
-    allNodes.forEach((node) => {
-      const isMatch = matchIds.includes(String(node.id));
-      this.network.body.data.nodes.update({
-        id: node.id,
-        opacity: isMatch ? 1.0 : 0.2,
-        font: { ...node.font, color: isMatch ? '#131313' : '#999' },
-      });
-    });
-  }
-
-  /**
-   * Clear search
-   */
-  clearSearch(): void {
-    this.searchMatches = [];
-    this.currentSearchIndex = 0;
-    this.resetNodeHighlight();
-
-    const countEl = getElementByIdOrNull<HTMLElement>('search-count');
-    if (countEl) {
-      countEl.style.display = 'none';
-    }
-  }
-
-  /**
-   * Open search panel
-   */
-  openSearch(): void {
-    const searchContainer = getElementByIdOrNull<HTMLElement>('search-container');
-    const searchInput = getElementByIdOrNull<HTMLInputElement>('search-input');
-
-    if (!searchContainer || !searchInput) {
-      return;
-    }
-    searchContainer.style.display = 'flex';
-    searchInput.focus();
-  }
-
-  /**
-   * Close search panel
-   */
-  closeSearch(): void {
-    const searchContainer = getElementByIdOrNull<HTMLElement>('search-container');
-    if (!searchContainer) {
-      return;
+      if (request !== this.detailRequest) return;
+      logger.error('Failed to read record detail:', error);
+      decisionEl.textContent = `Could not read this record: ${
+        error instanceof Error ? error.message : String(error)
+      }`;
     }
-    searchContainer.style.display = 'none';
-    this.clearSearch();
   }
 }