@jungjaehoon/mama-os 0.62.0 → 0.64.0

package/public/viewer/js/modules/graph.js

@@ -1,304 +1,301 @@
 /**
- * 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, } from '../utils/api.js';
+import { API } from '../utils/api.js';
 import { renderSafeMarkdown } from '../utils/markdown.js';
+import { groupInfo } from './memory-timeline.js';
 const logger = new DebugLogger('Graph');
-const INITIAL_GRAPH_LIMIT = 2000;
+/** What a record's stored kind is called in the detail panel. */
+export const KIND_LABELS = {
+    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 = {
+    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 OUTSIDE_COLOR = '#D1D5DB';
+const LABEL_LENGTH = 40;
+function shortLabel(text) {
+    const flat = text.replace(/\s+/g, ' ').trim();
+    return flat.length > LABEL_LENGTH ? `${flat.slice(0, LABEL_LENGTH - 1)}…` : flat;
+}
+/**
+ * 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, links) {
+    const nodes = new Map();
+    const recordNode = {};
+    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) => {
+        const listed = recordNode[ref];
+        if (listed !== undefined)
+            return listed;
+        const commitmentId = links.nodes[ref].commitmentId;
+        return commitmentId === null ? ref : `item:${commitmentId}`;
+    };
+    const edges = [];
+    const seen = new Set();
+    const outside = [];
+    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],
+        ]) {
+            if (nodes.has(dot))
+                continue;
+            const node = {
+                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 = null;
-    graphData = { nodes: [], edges: [], meta: {} };
-    currentNodeId = null;
-    adjacencyList = new Map();
-    searchMatches = [];
-    currentSearchIndex = 0;
-    debouncedSearch = debounce(() => this.search(), 300);
-    similarDecisionClickHandler = (event) => {
-        const target = event.target;
-        const btn = target.closest('.similar-decision-btn');
-        if (!btn || !btn.dataset.nodeId) {
-            return;
-        }
-        this.navigateToNode(btn.dataset.nodeId);
-    };
-    nodeColors = {
-        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 = { nodes: [], edges: [], recordNode: {} };
+    // The links between records do not depend on the filter: read once per page load.
+    links = null;
+    // A slower earlier read must not draw or describe what the owner has moved away from.
+    drawRequest = 0;
+    detailRequest = 0;
     edgeStyles = {
         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 = { limit: INITIAL_GRAPH_LIMIT }) {
-        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) {
+        const request = ++this.drawRequest;
+        // A failed read is not kept: the next filter change reads the links again.
+        this.links ??= API.getMemoryLinks().catch((error) => {
+            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) {
+    focusRecord(recordId) {
+        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) {
         const container = getElementByIdOrNull('graph-canvas');
         if (!container) {
             logger.error('graph-canvas element not found');
             return;
         }
-        // Ensure container has dimensions for vis-network
-        if (container.offsetHeight === 0) {
-            container.style.minHeight = '400px';
+        this.graph = graph;
+        this.network?.destroy?.();
+        const empty = getElementByIdOrNull('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 {
-                from: e.from,
-                to: e.to,
+                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: 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,
-            },
+        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: {
-                // The initial layout always runs; the stabilized handler turns physics off afterwards.
                 enabled: true,
                 barnesHut: {
-                    gravitationalConstant: -8000,
-                    centralGravity: 0.3,
-                    springLength: 150,
+                    gravitationalConstant: -4000,
+                    centralGravity: 0.5,
+                    springLength: 120,
                     springConstant: 0.04,
                     damping: 0.09,
-                    avoidOverlap: 1,
-                },
-                stabilization: {
-                    enabled: true,
-                    iterations: data.nodes.length > 500 ? 100 : 200,
-                    updateInterval: 25,
+                    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) => {
-            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) => {
-            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) => {
-            try {
-                networkData.nodes.update({
-                    id: params.node,
-                    font: { color: '#131313', size: 14, vadjust: -2 },
-                });
-            }
-            catch {
-                /* ignore */
-            }
+        this.network.on('click', (params) => {
+            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('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('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();
-        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('legend-panel')?.classList.add('visible');
         const stats = getElementByIdOrNull('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') {
-        return this.nodeColors[kind] ?? '#CBD5E1';
+    getEdgeStyle(relationship) {
+        return (this.edgeStyles[relationship ?? 'default'] ?? { color: '#4a4a6a', dashes: false, width: 2 });
+    }
+    kindLabel(kind) {
+        return kind === null ? KIND_LABELS.memory : (KIND_LABELS[kind] ?? kind);
+    }
+    relationLabel(relationship) {
+        return RELATION_LABELS[relationship] ?? relationship;
     }
-    /** Count the displayed data, excluding nodes hidden by filters and their edges. */
+    /** 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();
+        const groups = new Map();
         const relations = new Map();
-        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,
+            nodes: [...groups].map(([group, count]) => ({
+                group,
+                label: group === 'outside' ? 'Linked, outside this filter' : groupInfo(group).label,
                 count,
-                color: this.getNodeColor(kind),
+                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),
             })),
@@ -311,785 +308,62 @@ export class GraphModule {
         const entries = this.getLegendEntries();
         const section = (title, rows) => rows.length === 0
             ? ''
-            : `<div><div class="text-[10px] font-semibold text-gray-600 uppercase tracking-wide mb-1.5">${title}</div>${rows.join('')}</div>`;
-        const row = (sample, label, count) => `<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><div class="legend-heading">${title}</div>${rows.join('')}</div>`;
+        const row = (sample, label, count) => `<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))) +
-                section('Relationships', entries.edges.map(({ relationship, count, color, dashes, width }) => {
+            section('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('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, count);
+                    return row(`<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';
+            container.textContent = 'Nothing drawn';
     }
-    /**
-     * Get border color based on outcome
-     */
-    getOutcomeBorderColor(outcome, fallback = '#4a4a6a') {
-        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) {
-        return (this.edgeStyles[relationship || 'default'] || { color: '#4a4a6a', dashes: false, width: 2 });
-    }
-    /**
-     * Get node size based on connection count
-     */
-    getNodeSize(connectionCount) {
-        if (connectionCount <= 2) {
-            return 12;
-        }
-        if (connectionCount <= 5) {
-            return 18;
-        }
-        if (connectionCount <= 10) {
-            return 24;
-        }
-        return 30;
-    }
-    /**
-     * Create node tooltip
-     */
     createNodeTooltip(node) {
-        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) {
-        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, edges) {
-        const counts = {};
-        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
-    // =============================================
-    /**
-     * Get connected node IDs using BFS
-     */
-    getConnectedNodeIds(nodeId, maxDepth = 3) {
-        const visited = new Set();
-        const queue = [{ 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) {
-        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() {
-        if (!this.network) {
-            return;
-        }
-        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,
-        })));
+        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}`;
     }
     // =============================================
     // Detail Panel
     // =============================================
-    /**
-     * Show node detail panel
-     */
-    async showDetail(node) {
-        try {
-            logger.debug('showDetail called with node:', node);
-            this.currentNodeId = String(node.id);
-            const panel = getElementByIdOrNull('decision-detail-modal');
-            if (!panel) {
-                logger.error('decision-detail-modal element not found');
-                return;
-            }
-            // Update existing DOM elements with markdown rendering
-            const topicEl = getElementByIdOrNull('detail-topic');
-            const decisionEl = getElementByIdOrNull('detail-decision');
-            const reasoningEl = getElementByIdOrNull('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('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('outcome-status');
-            if (outcomeStatus) {
-                outcomeStatus.textContent = '';
-                outcomeStatus.className = '';
-            }
-            const confidenceEl = getElementByIdOrNull('detail-confidence');
-            if (confidenceEl) {
-                confidenceEl.textContent = node.confidence ? `${(node.confidence * 100).toFixed(0)}%` : '-';
-            }
-            const createdEl = getElementByIdOrNull('detail-created');
-            if (createdEl) {
-                createdEl.textContent = node.created_at ? new Date(node.created_at).toLocaleString() : '-';
-            }
-            // Reset reasoning toggle
-            const reasoningArrow = getElementByIdOrNull('reasoning-arrow');
-            if (reasoningArrow) {
-                reasoningArrow.textContent = '▶';
-            }
-            reasoningEl.classList.add('hidden');
-            // Show loading state for similar decisions
-            const similarEl = getElementByIdOrNull('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) {
-        const outcomeMap = {
-            pending: 'clock',
-            success: 'check-circle',
-            failed: 'x-circle',
-            partial: 'alert-circle',
-        };
-        return outcomeMap[(outcome || 'pending').toLowerCase()] || 'clock';
-    }
-    /**
-     * Toggle reasoning full text
-     */
-    toggleReasoning() {
-        const arrow = getElementByIdOrNull('reasoning-arrow');
-        const content = getElementByIdOrNull('detail-reasoning');
-        if (arrow && content) {
-            const isHidden = content.classList.contains('hidden');
-            content.classList.toggle('hidden');
-            arrow.textContent = isHidden ? '▼' : '▶';
-        }
-    }
-    /**
-     * Close detail panel
-     */
-    closeDetail() {
+    async showDetail(target) {
         const panel = getElementByIdOrNull('decision-detail-modal');
-        if (panel) {
-            panel.classList.remove('visible');
-        }
-        this.currentNodeId = null;
-        this.resetNodeHighlight();
-    }
-    /**
-     * Fetch similar decisions
-     */
-    async fetchSimilarDecisions(nodeId) {
-        logger.debug('fetchSimilarDecisions called for node:', nodeId);
-        const container = getElementByIdOrNull('detail-similar');
-        if (!container) {
-            logger.warn('detail-similar element not found');
+        const topicEl = getElementByIdOrNull('detail-topic');
+        const kindEl = getElementByIdOrNull('detail-kind');
+        const decisionEl = getElementByIdOrNull('detail-decision');
+        const reasoningEl = getElementByIdOrNull('detail-reasoning');
+        const createdEl = getElementByIdOrNull('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 request = ++this.detailRequest;
         try {
-            logger.info('Calling API.getSimilarDecisions...');
-            const data = await API.getSimilarDecisions(nodeId);
-            logger.debug('Similar decisions received:', data);
-            const similar = (data.similar || []);
-            if (similar.length === 0) {
-                logger.debug('[MAMA] No similar decisions found');
-                container.innerHTML = '<span style="color:#666">No similar decisions found</span>';
+            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();
             }
-            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() {
-        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('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);
+            decisionEl.innerHTML = renderSafeMarkdown(String(detailNode.decision || detailNode.decision_preview || '-'));
+            reasoningEl.innerHTML = renderSafeMarkdown(String(detailNode.reasoning || '-'));
         }
         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) {
-        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('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');
+            if (request !== this.detailRequest)
                 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) {
-        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) {
-        const datalist = getElementByIdOrNull('topic-filter-list');
-        if (!datalist) {
-            // Fallback for old select element
-            const select = getElementByIdOrNull('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) {
-        const listEl = getElementByIdOrNull('decision-list');
-        const countEl = getElementByIdOrNull('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) => {
-            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) => {
-            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) {
-        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) {
-        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) {
-        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() {
-        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('search-count');
-        if (countEl) {
-            countEl.style.display = 'none';
-        }
-        this.renderLegend();
-        logger.debug('[MAMA] All filters cleared');
-    }
-    // =============================================
-    // Search
-    // =============================================
-    /**
-     * Perform search
-     */
-    search() {
-        const queryInput = getElementByIdOrNull('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) {
-        if (event.key === 'Enter' && this.searchMatches.length > 0) {
-            this.nextSearchResult();
-        }
-        else {
-            this.debouncedSearch();
-        }
-    }
-    /**
-     * Navigate to next search result
-     */
-    nextSearchResult() {
-        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() {
-        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() {
-        const countEl = getElementByIdOrNull('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() {
-        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() {
-        this.searchMatches = [];
-        this.currentSearchIndex = 0;
-        this.resetNodeHighlight();
-        const countEl = getElementByIdOrNull('search-count');
-        if (countEl) {
-            countEl.style.display = 'none';
-        }
-    }
-    /**
-     * Open search panel
-     */
-    openSearch() {
-        const searchContainer = getElementByIdOrNull('search-container');
-        const searchInput = getElementByIdOrNull('search-input');
-        if (!searchContainer || !searchInput) {
-            return;
-        }
-        searchContainer.style.display = 'flex';
-        searchInput.focus();
-    }
-    /**
-     * Close search panel
-     */
-    closeSearch() {
-        const searchContainer = getElementByIdOrNull('search-container');
-        if (!searchContainer) {
-            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();
     }
 }