@jungjaehoon/mama-os 0.63.0 → 0.65.0

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

@@ -1,10 +1,11 @@
 /**
- * Graph Module - one memory record and what it links to
+ * Graph Module - the filtered memory as a graph
  * @module modules/graph
  *
- * 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.
+ * 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 */
@@ -12,20 +13,9 @@
 
 import { escapeHtml, getElementByIdOrNull } from '../utils/dom.js';
 import { DebugLogger } from '../utils/debug-logger.js';
-import { API, type GraphNode, type GraphEdge } from '../utils/api.js';
+import { API, type MemoryLinks, type MemoryTimelineResponse } from '../utils/api.js';
 import { renderSafeMarkdown } from '../utils/markdown.js';
-
-type GraphNodeRecord = GraphNode & {
-  topic?: string;
-  decision?: string;
-  reasoning?: string;
-  created_at?: string | number;
-};
-
-type GraphEdgeRecord = GraphEdge & {
-  from: GraphNodeRecord['id'];
-  to: GraphNodeRecord['id'];
-};
+import { groupInfo } from './memory-timeline.js';
 
 type EdgeStyle = {
   color: string;
@@ -33,15 +23,9 @@ type EdgeStyle = {
   width: number;
 };
 
-type GraphInput = {
-  nodes: GraphNodeRecord[];
-  edges: GraphEdgeRecord[];
-  meta?: Record<string, unknown>;
-};
-
 const logger = new DebugLogger('Graph');
 
-/** What each dot colour stands for, in the words the legend shows. */
+/** What a record's stored kind is called in the detail panel. */
 export const KIND_LABELS: Record<string, string> = {
   decision: 'Decision',
   preference: 'Preference',
@@ -72,6 +56,7 @@ export const RELATION_LABELS: Record<string, string> = {
   blocks: 'blocks',
 };
 
+const OUTSIDE_COLOR = '#D1D5DB';
 const LABEL_LENGTH = 40;
 
 function shortLabel(text: string): string {
@@ -79,28 +64,121 @@ function shortLabel(text: string): string {
   return flat.length > LABEL_LENGTH ? `${flat.slice(0, LABEL_LENGTH - 1)}…` : flat;
 }
 
+export interface FilterGraphNode {
+  id: string;
+  /** The timeline group of a selected dot, or `outside` for a linked record the filter left out. */
+  group: string;
+  kind: string | null;
+  label: string;
+  /** The record whose detail a click opens: the record itself, or a work item's latest update. */
+  detailId: string;
+  /** Updates of a work item inside the period. */
+  updates: number;
+  outside: boolean;
+}
+
+export interface FilterGraph {
+  nodes: FilterGraphNode[];
+  edges: Array<{ from: string; to: string; relation: string }>;
+  /** Which dot each listed record is drawn as: a work update is drawn as its item. */
+  recordNode: Record<string, string>;
+}
+
+/**
+ * The graph of what the filters selected. A work item is one dot for all its updates; a link
+ * between two updates of one item is not drawn, and a link that touches nothing selected is left
+ * out. Days arrive newest first, so an item's first update seen is its latest.
+ */
+export function composeFilterGraph(
+  timeline: MemoryTimelineResponse,
+  links: MemoryLinks
+): FilterGraph {
+  const nodes = new Map<string, FilterGraphNode>();
+  const recordNode: Record<string, string> = {};
+  for (const day of timeline.days) {
+    for (const group of day.groups) {
+      for (const record of group.records ?? []) {
+        nodes.set(record.id, {
+          id: record.id,
+          group: group.group,
+          kind: record.kind,
+          label: record.topic,
+          detailId: record.id,
+          updates: 0,
+          outside: false,
+        });
+        recordNode[record.id] = record.id;
+      }
+      for (const item of group.items ?? []) {
+        const id = `item:${item.commitmentId}`;
+        const node = nodes.get(id) ?? {
+          id,
+          group: 'work',
+          kind: 'commitment',
+          label: item.title ?? item.topic,
+          detailId: item.revisions[0].id,
+          updates: 0,
+          outside: false,
+        };
+        node.updates += item.revisions.length;
+        nodes.set(id, node);
+        for (const revision of item.revisions) recordNode[revision.id] = id;
+      }
+    }
+  }
+  // Links name both ends with a node; a work update outside the filter is drawn as its item.
+  const dotFor = (ref: string): string => {
+    const listed = recordNode[ref];
+    if (listed !== undefined) return listed;
+    const commitmentId = links.nodes[ref].commitmentId;
+    return commitmentId === null ? ref : `item:${commitmentId}`;
+  };
+  const edges: FilterGraph['edges'] = [];
+  const seen = new Set<string>();
+  const outside: FilterGraphNode[] = [];
+  for (const link of links.edges) {
+    const from = dotFor(link.from);
+    const to = dotFor(link.to);
+    const key = `${from}\0${to}\0${link.relation}`;
+    if (from === to || seen.has(key) || (!nodes.has(from) && !nodes.has(to))) continue;
+    seen.add(key);
+    edges.push({ from, to, relation: link.relation });
+    for (const [dot, ref] of [
+      [from, link.from],
+      [to, link.to],
+    ] as const) {
+      if (nodes.has(dot)) continue;
+      const node: FilterGraphNode = {
+        id: dot,
+        group: 'outside',
+        kind: links.nodes[ref].kind,
+        label: links.nodes[ref].label,
+        detailId: ref,
+        updates: 0,
+        outside: true,
+      };
+      nodes.set(dot, node);
+      outside.push(node);
+    }
+  }
+  return {
+    nodes: [...nodes.values()].filter((node) => !node.outside).concat(outside),
+    edges,
+    recordNode,
+  };
+}
+
 /**
  * Graph Module Class
  */
 export class GraphModule {
   network: VisNetwork | null = null;
-  graphData: GraphInput = { nodes: [], edges: [], meta: {} };
-  centerId: string | null = null;
-  // A slower earlier read must not draw or describe a record the owner has moved away from.
-  private recordRequest = 0;
+  graph: FilterGraph = { nodes: [], edges: [], recordNode: {} };
+  // The links between records do not depend on the filter: read once per page load.
+  private links: Promise<MemoryLinks> | null = null;
+  // A slower earlier read must not draw or describe what the owner has moved away from.
+  private drawRequest = 0;
   private detailRequest = 0;
-  nodeColors: Record<string, string> = {
-    decision: '#60A5FA',
-    preference: '#C084FC',
-    constraint: '#FB7185',
-    lesson: '#FBBF24',
-    workflow: '#F472B6',
-    fact: '#2DD4BF',
-    commitment: '#FB923C',
-    observation: '#94A3B8',
-    memory: '#CBD5E1', // Legacy memories may have no stored classification.
-    registry: '#A3E635',
-  };
   edgeStyles: Record<string, EdgeStyle> = {
     supersedes: { color: '#666666', dashes: false, width: 2 },
     mentions: { color: '#6B4C9A', dashes: false, width: 2 },
@@ -114,72 +192,77 @@ export class GraphModule {
   };
 
   /**
-   * Draw a record and its direct links, then show its detail.
+   * Draw what the filters selected, from the same timeline answer the list shows.
    */
-  async showRecord(id: string): Promise<void> {
-    const request = ++this.recordRequest;
-    const empty = getElementByIdOrNull<HTMLElement>('graph-empty');
-    const loading = getElementByIdOrNull<HTMLElement>('graph-loading');
-    if (empty) empty.style.display = 'none';
-    if (loading) loading.style.display = 'flex';
-    try {
-      const data = (await API.getGraphNeighbors(id)) as GraphInput;
-      if (request !== this.recordRequest) return;
-      this.centerId = id;
-      this.init(data);
-      const center = data.nodes.find((node) => String(node.id) === id);
-      if (center) void this.showDetail(center);
-    } finally {
-      if (loading && request === this.recordRequest) loading.style.display = 'none';
-    }
+  async showSelection(timeline: MemoryTimelineResponse): Promise<void> {
+    const request = ++this.drawRequest;
+    // A failed read is not kept: the next filter change reads the links again.
+    this.links ??= API.getMemoryLinks().catch((error: unknown) => {
+      this.links = null;
+      throw error;
+    });
+    const links = await this.links;
+    if (request !== this.drawRequest) return;
+    this.init(composeFilterGraph(timeline, links));
   }
 
   /**
-   * Initialize vis-network over one record's neighbourhood.
+   * A listed record was picked: select its dot and open the record's own detail.
    */
-  init(data: GraphInput): void {
+  focusRecord(recordId: string): void {
+    const dot = this.graph.recordNode[recordId];
+    const node = this.graph.nodes.find((candidate) => candidate.id === dot);
+    if (this.network && dot !== undefined) {
+      this.network.selectNodes([dot]);
+      this.network.focus(dot, { scale: 1.2, animation: { duration: 400 } });
+    }
+    void this.showDetail({
+      detailId: recordId,
+      label: node?.label ?? recordId,
+      kind: node?.kind ?? null,
+    });
+  }
+
+  init(graph: FilterGraph): void {
     const container = getElementByIdOrNull<HTMLDivElement>('graph-canvas');
     if (!container) {
       logger.error('graph-canvas element not found');
       return;
     }
-    this.graphData = data;
+    this.graph = graph;
     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);
+    const empty = getElementByIdOrNull<HTMLElement>('graph-empty');
+    if (empty) {
+      empty.style.display = graph.nodes.length === 0 ? '' : 'none';
+      empty.textContent = 'Nothing saved for this filter.';
+    }
+
+    const nodes = graph.nodes.map((node) => {
+      const color = node.outside ? OUTSIDE_COLOR : groupInfo(node.group).color;
       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),
+        id: node.id,
+        label: shortLabel(node.label),
+        title: this.createNodeTooltip(node),
         color: {
           background: color,
-          border: center ? '#131313' : color,
+          border: 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,
+        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 = data.edges.map((e) => {
-      const style = this.getEdgeStyle(e.relationship);
+    const edges = graph.edges.map((edge) => {
+      const style = this.getEdgeStyle(edge.relation);
       return {
-        from: e.from,
-        to: e.to,
+        from: edge.from,
+        to: edge.to,
         arrows: { to: { enabled: true, scaleFactor: 0.5 } },
         color: style.color,
         dashes: style.dashes,
         width: style.width,
-        title: this.relationLabel(e.relationship),
+        title: this.relationLabel(edge.relation),
       };
     });
 
@@ -192,43 +275,36 @@ export class GraphModule {
         physics: {
           enabled: true,
           barnesHut: {
-            gravitationalConstant: -6000,
-            centralGravity: 0.4,
-            springLength: 140,
+            gravitationalConstant: -4000,
+            centralGravity: 0.5,
+            springLength: 120,
             springConstant: 0.04,
             damping: 0.09,
-            avoidOverlap: 1,
+            avoidOverlap: 0.6,
           },
           stabilization: { enabled: true, iterations: 200, updateInterval: 25 },
         },
         interaction: { hover: true, tooltipDelay: 100, zoomView: true, dragView: true },
       }
     );
-
     this.network.on('click', (params: { nodes: Array<string | number> }) => {
-      const targetId = params.nodes[0];
-      if (targetId === undefined) return;
-      const node = data.nodes.find((n) => String(n.id) === String(targetId));
+      const node = graph.nodes.find((candidate) => candidate.id === String(params.nodes[0]));
       if (node) void this.showDetail(node);
     });
-    // Stepping to a linked record redraws the graph around it.
-    this.network.on('doubleClick', (params: { nodes: Array<string | number> }) => {
-      const targetId = params.nodes[0];
-      if (targetId !== undefined && String(targetId) !== this.centerId) {
-        void this.showRecord(String(targetId));
-      }
-    });
     this.network.on('stabilizationIterationsDone', () => {
       this.network?.setOptions?.({ physics: { enabled: false } });
     });
 
     this.renderLegend();
-    const legend = getElementByIdOrNull<HTMLElement>('legend-panel');
-    legend?.classList.add('visible');
+    getElementByIdOrNull<HTMLElement>('legend-panel')?.classList.add('visible');
     const stats = getElementByIdOrNull<HTMLElement>('graph-stats');
     if (stats) {
+      const selected = graph.nodes.filter((node) => !node.outside).length;
+      const outside = graph.nodes.length - selected;
       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`;
+      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`;
     }
   }
 
@@ -236,45 +312,37 @@ export class GraphModule {
   // Styling and legend
   // =============================================
 
-  getNodeColor(kind = 'memory'): string {
-    return this.nodeColors[kind] ?? '#CBD5E1';
-  }
-
   getEdgeStyle(relationship?: string): EdgeStyle {
     return (
       this.edgeStyles[relationship ?? 'default'] ?? { color: '#4a4a6a', dashes: false, width: 2 }
     );
   }
 
-  kindLabel(kind: string): string {
-    return KIND_LABELS[kind] ?? kind;
+  kindLabel(kind: string | null): string {
+    return kind === null ? KIND_LABELS.memory : (KIND_LABELS[kind] ?? kind);
   }
 
-  relationLabel(relationship?: string): string {
-    return relationship === undefined ? 'link' : (RELATION_LABELS[relationship] ?? relationship);
+  relationLabel(relationship: string): string {
+    return RELATION_LABELS[relationship] ?? relationship;
   }
 
-  /** Count what is drawn, by kind and by relationship, with the words the legend shows. */
+  /** Count what is drawn, by group and by relationship, with the words the legend shows. */
   getLegendEntries() {
-    const kinds = new Map<string, number>();
+    const groups = new Map<string, number>();
     const relations = new Map<string, number>();
-    for (const node of this.graphData.nodes) {
-      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) {
-      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]) => b - a)
-        .map(([kind, count]) => ({
-          kind,
-          label: this.kindLabel(kind),
-          count,
-          color: this.getNodeColor(kind),
-        })),
+      nodes: [...groups].map(([group, count]) => ({
+        group,
+        label: group === 'outside' ? 'Linked, outside this filter' : groupInfo(group).label,
+        count,
+        color: group === 'outside' ? OUTSIDE_COLOR : groupInfo(group).color,
+      })),
       edges: [...relations]
         .sort(([, a], [, b]) => b - a)
         .map(([relationship, count]) => ({
@@ -298,7 +366,7 @@ export class GraphModule {
       `<div class="legend-row">${sample}<span class="legend-label">${escapeHtml(label)}</span><span class="legend-count">${count}</span></div>`;
     container.innerHTML =
       section(
-        'Dots',
+        '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)
         )
@@ -317,17 +385,17 @@ export class GraphModule {
     if (entries.nodes.length === 0) container.textContent = 'Nothing drawn';
   }
 
-  createNodeTooltip(node: GraphNodeRecord): string {
-    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)}`;
+  createNodeTooltip(node: FilterGraphNode): string {
+    const group = node.outside ? 'Linked, outside this filter' : groupInfo(node.group).label;
+    const updates = node.updates > 0 ? `\n${node.updates} updates in this period` : '';
+    return `${group} · ${this.kindLabel(node.kind)}\n${node.label.slice(0, 160)}${updates}`;
   }
 
   // =============================================
   // Detail Panel
   // =============================================
 
-  async showDetail(node: GraphNodeRecord): Promise<void> {
+  async showDetail(target: Pick<FilterGraphNode, 'detailId' | 'label' | 'kind'>): Promise<void> {
     const panel = getElementByIdOrNull<HTMLDivElement>('decision-detail-modal');
     const topicEl = getElementByIdOrNull<HTMLElement>('detail-topic');
     const kindEl = getElementByIdOrNull<HTMLElement>('detail-kind');
@@ -338,20 +406,21 @@ export class GraphModule {
       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() : '-';
-    }
+    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 {
-      const detail = await API.getGraphDetail(String(node.id));
+      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();
+      }
       decisionEl.innerHTML = renderSafeMarkdown(
         String(detailNode.decision || detailNode.decision_preview || '-')
       );

package/public/viewer/src/modules/memory-timeline.ts

@@ -47,7 +47,7 @@ const OPERATION_LABELS: Record<string, string> = {
   withdraw: 'withdrawn',
 };
 
-function groupInfo(group: string): { label: string; hint: string; color: string } {
+export function groupInfo(group: string): { label: string; hint: string; color: string } {
   return GROUPS[group] ?? { label: group, hint: `Records of kind ${group}`, color: '#CBD5E1' };
 }
 
@@ -71,7 +71,14 @@ export class MemoryTimelineModule {
   private bound = false;
   private debouncedLoad = debounce(() => void this.load(), 300);
 
-  constructor(private readonly onSelect: (id: string) => void) {}
+  constructor(
+    private readonly hooks: {
+      /** A listed record was picked. */
+      onSelect: (id: string) => void;
+      /** The list now shows this answer; the graph draws the same records. */
+      onRender: (data: MemoryTimelineResponse) => void;
+    }
+  ) {}
 
   /** Wire the controls once, then read the current period. */
   async init(): Promise<void> {
@@ -127,7 +134,7 @@ export class MemoryTimelineModule {
     document
       .querySelector(`#memory-timeline [data-record-id="${CSS.escape(id)}"]`)
       ?.classList.add('selected');
-    this.onSelect(id);
+    this.hooks.onSelect(id);
   }
 
   private params(): Record<string, string> {
@@ -148,6 +155,7 @@ export class MemoryTimelineModule {
       // A slower earlier read must not overwrite the answer to the latest filter.
       if (request !== this.request) return;
       this.render(data);
+      this.hooks.onRender(data);
     } catch (error) {
       if (request !== this.request) return;
       list.innerHTML = `<div class="mt-empty mt-error">Could not read what was saved: ${escapeHtml(

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

@@ -180,11 +180,11 @@ export class WikiModule {
 
     document.getElementById('wiki-new-btn')?.addEventListener('click', () => this.promptNewPage());
 
-    // Auto-open index page only on initial load (no page selected yet)
+    // Auto-open the agent's table of contents only on initial load (no page selected yet)
     if (!this.currentPath) {
-      const indexNode = tree.find((n) => n.name === 'index.md');
-      if (!mobile && indexNode) {
-        this.openPage(indexNode.path);
+      const homeNode = tree.find((n) => n.name === 'Home.md');
+      if (!mobile && homeNode) {
+        this.openPage(homeNode.path);
       }
     }
   }

package/public/viewer/src/types/global.d.ts

@@ -79,7 +79,7 @@ declare global {
 
   interface VisNetwork {
     on(
-      event: 'click' | 'doubleClick' | 'stabilized' | 'stabilizationIterationsDone',
+      event: 'click' | 'stabilized' | 'stabilizationIterationsDone',
       handler: (params: { nodes: Array<string | number> }) => void
     ): void;
     on(event: 'hoverNode' | 'blurNode', handler: (params: { node: string | number }) => void): void;

package/public/viewer/src/utils/api.ts

@@ -81,6 +81,11 @@ export interface TimelineGroup {
   items?: TimelineItem[];
 }
 
+export interface MemoryLinks {
+  edges: Array<{ from: string; to: string; relation: string }>;
+  nodes: Record<string, { kind: string; label: string; commitmentId: string | null }>;
+}
+
 export interface MemoryTimelineResponse {
   from: string;
   to: string;
@@ -683,9 +688,9 @@ export class API {
   // Graph API
   // =============================================
 
-  /** One record and the records and source messages it links to directly. */
-  static async getGraphNeighbors(id: string): Promise<GraphResponse> {
-    return this.get<GraphResponse>('/api/graph/neighbors', { id });
+  /** Every link between records, with each end's kind, label and work item. */
+  static async getMemoryLinks(): Promise<MemoryLinks> {
+    return this.get<MemoryLinks>('/api/memory/links');
   }
 
   /** What was saved in a period, by day, kind and item. */

package/public/viewer/viewer.css

@@ -476,8 +476,8 @@ button:not([class*="p-"]):not([class*="px-"]):not([class*="py-"]) { padding: 6px
   flex-shrink: 0;
 }
 
-.graph-empty-text {
-  max-width: 320px;
+#graph-empty {
+  padding: 0 24px;
   text-align: center;
   font-size: 14px;
   color: #8a847c;

package/public/viewer/viewer.html

@@ -520,9 +520,7 @@
                   ></div>
 
                   <div class="absolute inset-0 flex items-center justify-center" id="graph-empty">
-                    <span class="graph-empty-text"
-                      >Pick a saved record on the left to see what it rests on and links to.</span
-                    >
+                    Reading what was saved...
                   </div>
 
                   <div
@@ -1069,15 +1067,17 @@ export MAMA_AUTH_TOKEN="your-secure-token-here"</pre
 
       const memory = new MemoryModule();
       const graph = new GraphModule();
-      const timeline = new MemoryTimelineModule((id) => {
-        graph.showRecord(id).catch((error) => {
-          console.error('[MAMA] Failed to draw the record:', error);
-          const empty = document.getElementById('graph-empty');
-          if (empty) {
-            empty.style.display = '';
-            empty.textContent = `Could not read this record's links: ${error.message}`;
-          }
-        });
+      const timeline = new MemoryTimelineModule({
+        onSelect: (id) => graph.focusRecord(id),
+        onRender: (data) =>
+          graph.showSelection(data).catch((error) => {
+            console.error('[MAMA] Failed to draw the memory graph:', error);
+            const empty = document.getElementById('graph-empty');
+            if (empty) {
+              empty.style.display = '';
+              empty.textContent = `Could not read the links between records: ${error.message}`;
+            }
+          }),
       });
       const wiki = new WikiModule();