@jungjaehoon/mama-os 0.61.2 → 0.63.0

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

@@ -1,47 +1,68 @@
 /**
- * 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, } from '../utils/api.js';
+import { API } from '../utils/api.js';
 import { renderSafeMarkdown } from '../utils/markdown.js';
 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 = {
+    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 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;
+}
 /**
  * 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);
-    };
+    centerId = null;
+    // A slower earlier read must not draw or describe a record the owner has moved away from.
+    recordRequest = 0;
+    detailRequest = 0;
     nodeColors = {
         decision: '#60A5FA',
         preference: '#C084FC',
         constraint: '#FB7185',
         lesson: '#FBBF24',
+        workflow: '#F472B6',
         fact: '#2DD4BF',
         commitment: '#FB923C',
         observation: '#94A3B8',
@@ -54,35 +75,39 @@ 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 = { limit: INITIAL_GRAPH_LIMIT }) {
+    async showRecord(id) {
+        const request = ++this.recordRequest;
+        const empty = getElementByIdOrNull('graph-empty');
+        const loading = getElementByIdOrNull('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;
+            const data = (await API.getGraphNeighbors(id));
+            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);
         }
-        catch (error) {
-            logger.error('Failed to fetch graph:', error);
-            throw error;
+        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) {
         const container = getElementByIdOrNull('graph-canvas');
@@ -90,33 +115,30 @@ 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;
-        // 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
+        this.network?.destroy?.();
+        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,
+            };
+        });
         const edges = data.edges.map((e) => {
             const style = this.getEdgeStyle(e.relationship);
             return {
@@ -125,180 +147,95 @@ 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,
-            },
+        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: -6000,
+                    centralGravity: 0.4,
+                    springLength: 140,
                     springConstant: 0.04,
                     damping: 0.09,
                     avoidOverlap: 1,
                 },
-                stabilization: {
-                    enabled: true,
-                    iterations: data.nodes.length > 500 ? 100 : 200,
-                    updateInterval: 25,
-                },
-            },
-            interaction: {
-                hover: true,
-                tooltipDelay: 100,
-                zoomView: true,
-                dragView: true,
+                stabilization: { enabled: true, iterations: 200, updateInterval: 25 },
             },
-        };
-        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('click', (params) => {
+            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) => {
-            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) => {
+            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('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();
+        const legend = getElementByIdOrNull('legend-panel');
+        legend?.classList.add('visible');
         const stats = getElementByIdOrNull('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') {
         return this.nodeColors[kind] ?? '#CBD5E1';
     }
-    /** Count the displayed data, excluding nodes hidden by filters and their edges. */
+    getEdgeStyle(relationship) {
+        return (this.edgeStyles[relationship ?? 'default'] ?? { color: '#4a4a6a', dashes: false, width: 2 });
+    }
+    kindLabel(kind) {
+        return KIND_LABELS[kind] ?? kind;
+    }
+    relationLabel(relationship) {
+        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 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 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 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),
             })),
@@ -311,785 +248,60 @@ 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', 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';
-    }
-    /**
-     * 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;
+            container.textContent = 'Nothing drawn';
     }
-    /**
-     * 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 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)}`;
     }
     // =============================================
     // 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() {
         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 = 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 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(String(node.id));
+            if (request !== this.detailRequest)
                 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() {
-        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);
+            const detailNode = detail.node;
+            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');
-                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)
+            if (request !== this.detailRequest)
                 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();
     }
 }