@jungjaehoon/mama-os 0.62.0 → 0.63.0

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

@@ -1,43 +1,24 @@
 /**
- * Graph Module - Decision Graph Visualization
+ * Graph Module - one memory record and what it links to
  * @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 picks a record from the saved timeline. This draws that record with its direct
+ * links (the source messages it rests on, what it builds on, what it replaced), names every colour
+ * and line in plain words, and shows the detail of whichever dot is clicked.
  */
 
 /* 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 GraphNode, type GraphEdge } 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;
 };
 
@@ -52,12 +33,6 @@ type EdgeStyle = {
   width: number;
 };
 
-type ConnectedEdges = {
-  outgoing: GraphEdgeRecord[];
-  incoming: GraphEdgeRecord[];
-  all: GraphEdgeRecord[];
-};
-
 type GraphInput = {
   nodes: GraphNodeRecord[];
   edges: GraphEdgeRecord[];
@@ -65,7 +40,44 @@ type GraphInput = {
 };
 
 const logger = new DebugLogger('Graph');
-const INITIAL_GRAPH_LIMIT = 2000;
+
+/** What each dot colour stands for, in the words the legend shows. */
+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',
+};
+
+/** 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 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;
+}
 
 /**
  * Graph Module Class
@@ -73,24 +85,16 @@ const INITIAL_GRAPH_LIMIT = 2000;
 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);
-  };
+  centerId: string | null = null;
+  // A slower earlier read must not draw or describe a record the owner has moved away from.
+  private recordRequest = 0;
+  private detailRequest = 0;
   nodeColors: Record<string, string> = {
     decision: '#60A5FA',
     preference: '#C084FC',
     constraint: '#FB7185',
     lesson: '#FBBF24',
+    workflow: '#F472B6',
     fact: '#2DD4BF',
     commitment: '#FB923C',
     observation: '#94A3B8',
@@ -103,39 +107,35 @@ export class GraphModule {
     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 a record and its direct links, then show its detail.
    */
-  async fetchData(params: QueryParams = { limit: INITIAL_GRAPH_LIMIT }): Promise<GraphInput> {
+  async showRecord(id: string): Promise<void> {
+    const request = ++this.recordRequest;
+    const empty = getElementByIdOrNull<HTMLElement>('graph-empty');
+    const loading = getElementByIdOrNull<HTMLElement>('graph-loading');
+    if (empty) empty.style.display = 'none';
+    if (loading) loading.style.display = 'flex';
     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);
-      throw error;
+      const data = (await API.getGraphNeighbors(id)) as GraphInput;
+      if (request !== this.recordRequest) return;
+      this.centerId = id;
+      this.init(data);
+      const center = data.nodes.find((node) => String(node.id) === id);
+      if (center) void this.showDetail(center);
+    } finally {
+      if (loading && request === this.recordRequest) loading.style.display = 'none';
     }
   }
 
-  // =============================================
-  // Graph Initialization
-  // =============================================
-
   /**
-   * Initialize vis-network
+   * Initialize vis-network over one record's neighbourhood.
    */
   init(data: GraphInput): void {
     const container = getElementByIdOrNull<HTMLDivElement>('graph-canvas');
@@ -143,40 +143,33 @@ export class GraphModule {
       logger.error('graph-canvas element not found');
       return;
     }
-
-    // Ensure container has dimensions for vis-network
-    if (container.offsetHeight === 0) {
-      container.style.minHeight = '400px';
-    }
-
-    logger.debug('Graph canvas dimensions:', container.offsetWidth, 'x', container.offsetHeight);
-
     this.graphData = data;
+    this.network?.destroy?.();
 
-    // 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,
-    }));
+    const nodes = data.nodes.map((n) => {
+      const kind = n.kind ?? 'memory';
+      const center = String(n.id) === this.centerId;
+      const color = this.getNodeColor(kind);
+      return {
+        id: n.id,
+        // Source messages stay unlabelled dots: their time and text are on hover and click.
+        label:
+          kind === 'observation' && !center
+            ? undefined
+            : shortLabel(String(n.decision_preview ?? n.decision ?? n.topic ?? n.id)),
+        title: this.createNodeTooltip(n),
+        color: {
+          background: color,
+          border: center ? '#131313' : color,
+          highlight: { background: color, border: '#131313' },
+        },
+        size: center ? 22 : kind === 'observation' ? 9 : 14,
+        borderWidth: center ? 3 : 1,
+        font: { color: '#131313', size: center ? 15 : 13 },
+        data: n,
+      };
+    });
 
-    // Map edges to vis-network format
     const edges = data.edges.map((e) => {
       const style = this.getEdgeStyle(e.relationship);
       return {
@@ -185,190 +178,108 @@ export class GraphModule {
         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(e.relationship),
       };
     });
 
-    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: -6000,
+            centralGravity: 0.4,
+            springLength: 140,
+            springConstant: 0.04,
+            damping: 0.09,
+            avoidOverlap: 1,
+          },
+          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);
-        }
+        interaction: { hover: true, tooltipDelay: 100, zoomView: true, dragView: true },
       }
-    });
+    );
 
-    // 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('click', (params: { nodes: Array<string | number> }) => {
+      const targetId = params.nodes[0];
+      if (targetId === undefined) return;
+      const node = data.nodes.find((n) => String(n.id) === String(targetId));
+      if (node) void this.showDetail(node);
     });
-    this.network.on('blurNode', (params: { node: string | number }) => {
-      try {
-        networkData.nodes.update({
-          id: params.node,
-          font: { color: '#131313', size: 14, vadjust: -2 },
-        });
-      } catch {
-        /* ignore */
+    // Stepping to a linked record redraws the graph around it.
+    this.network.on('doubleClick', (params: { nodes: Array<string | number> }) => {
+      const targetId = params.nodes[0];
+      if (targetId !== undefined && String(targetId) !== this.centerId) {
+        void this.showRecord(String(targetId));
       }
     });
-
-    // 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();
-
+    const legend = getElementByIdOrNull<HTMLElement>('legend-panel');
+    legend?.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' : ''}`;
+      stats.style.display = '';
+      stats.textContent = `${data.nodes.length} records and source messages · ${data.edges.length} links · click a dot for its detail, double-click to step to it`;
     }
-
-    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';
   }
 
-  /** Count the displayed data, excluding nodes hidden by filters and their edges. */
-  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))
+  getEdgeStyle(relationship?: string): EdgeStyle {
+    return (
+      this.edgeStyles[relationship ?? 'default'] ?? { color: '#4a4a6a', dashes: false, width: 2 }
     );
+  }
+
+  kindLabel(kind: string): string {
+    return KIND_LABELS[kind] ?? kind;
+  }
+
+  relationLabel(relationship?: string): string {
+    return relationship === undefined ? 'link' : (RELATION_LABELS[relationship] ?? relationship);
+  }
+
+  /** Count what is drawn, by kind and by relationship, with the words the legend shows. */
+  getLegendEntries() {
     const kinds = 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 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);
     }
     return {
       nodes: [...kinds]
-        .sort(([a], [b]) => a.localeCompare(b))
+        .sort(([, a], [, b]) => b - a)
         .map(([kind, count]) => ({
           kind,
+          label: this.kindLabel(kind),
           count,
           color: this.getNodeColor(kind),
         })),
       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 +293,75 @@ 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',
+        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 }
-    );
+    if (entries.nodes.length === 0) container.textContent = 'Nothing drawn';
   }
 
-  /**
-   * 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)}%
-    `;
+    const kind = this.kindLabel(node.kind ?? 'memory');
+    const text = String(node.decision_preview ?? node.decision ?? '');
+    return `${kind}${node.topic ? ` · ${node.topic}` : ''}\n${text.slice(0, 160)}`;
   }
 
   // =============================================
-  // 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');
-  }
-
-  /**
-   * 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;
-  }
-
-  // =============================================
-  // 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) {
+  async showDetail(node: GraphNodeRecord): 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;
     }
-
-    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) {
-      return;
+    if (topicEl) topicEl.textContent = node.topic || this.kindLabel(node.kind ?? 'memory');
+    if (kindEl) kindEl.textContent = this.kindLabel(node.kind ?? 'memory');
+    if (createdEl) {
+      createdEl.textContent = node.created_at ? new Date(node.created_at).toLocaleString() : '-';
     }
+    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 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);
-      }
-
+      if (request !== this.detailRequest) return;
+      const detailNode = detail.node;
       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();
   }
 }