@jungjaehoon/mama-os 0.63.0 → 0.64.0

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

@@ -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 */
 /* global vis */
@@ -12,8 +13,9 @@ import { escapeHtml, getElementByIdOrNull } from '../utils/dom.js';
 import { DebugLogger } from '../utils/debug-logger.js';
 import { API } from '../utils/api.js';
 import { renderSafeMarkdown } from '../utils/markdown.js';
+import { groupInfo } from './memory-timeline.js';
 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 = {
     decision: 'Decision',
     preference: 'Preference',
@@ -42,33 +44,107 @@ export const RELATION_LABELS = {
     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: {} };
-    centerId = null;
-    // A slower earlier read must not draw or describe a record the owner has moved away from.
-    recordRequest = 0;
+    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;
-    nodeColors = {
-        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 = {
         supersedes: { color: '#666666', dashes: false, width: 2 },
         mentions: { color: '#6B4C9A', dashes: false, width: 2 },
@@ -81,74 +157,74 @@ export class GraphModule {
         synthesizes: { color: '#6B4C9A', width: 3, dashes: false },
     };
     /**
-     * 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) {
-        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 {
-            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);
-        }
-        finally {
-            if (loading && request === this.recordRequest)
-                loading.style.display = 'none';
-        }
+    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));
     }
     /**
-     * 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) {
+    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;
         }
-        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('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),
             };
         });
         this.network = new vis.Network(container, { nodes: new vis.DataSet(nodes), edges: new vis.DataSet(edges) }, {
@@ -157,79 +233,63 @@ 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) => {
-            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) => {
-            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('legend-panel');
-        legend?.classList.add('visible');
+        getElementByIdOrNull('legend-panel')?.classList.add('visible');
         const stats = getElementByIdOrNull('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`;
         }
     }
     // =============================================
     // 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_LABELS[kind] ?? kind;
+        return kind === null ? KIND_LABELS.memory : (KIND_LABELS[kind] ?? kind);
     }
     relationLabel(relationship) {
-        return relationship === undefined ? 'link' : (RELATION_LABELS[relationship] ?? relationship);
+        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();
+        const groups = new Map();
         const relations = new Map();
-        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),
+            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]) => b - a)
@@ -251,7 +311,7 @@ export class GraphModule {
             : `<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('Dots', entries.nodes.map(({ label, count, color }) => row(`<span class="legend-dot" style="background:${color}"></span>`, label, count))) +
+            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="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);
@@ -260,14 +320,14 @@ export class GraphModule {
             container.textContent = 'Nothing drawn';
     }
     createNodeTooltip(node) {
-        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)}`;
+        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) {
+    async showDetail(target) {
         const panel = getElementByIdOrNull('decision-detail-modal');
         const topicEl = getElementByIdOrNull('detail-topic');
         const kindEl = getElementByIdOrNull('detail-kind');
@@ -279,21 +339,23 @@ export class GraphModule {
             return;
         }
         if (topicEl)
-            topicEl.textContent = node.topic || this.kindLabel(node.kind ?? 'memory');
+            topicEl.textContent = target.label;
         if (kindEl)
-            kindEl.textContent = this.kindLabel(node.kind ?? 'memory');
-        if (createdEl) {
-            createdEl.textContent = node.created_at ? new Date(node.created_at).toLocaleString() : '-';
-        }
+            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 || '-'));
             reasoningEl.innerHTML = renderSafeMarkdown(String(detailNode.reasoning || '-'));
         }

package/public/viewer/js/modules/memory-timeline.js

@@ -35,7 +35,7 @@ const OPERATION_LABELS = {
     revise: 'updated',
     withdraw: 'withdrawn',
 };
-function groupInfo(group) {
+export function groupInfo(group) {
     return GROUPS[group] ?? { label: group, hint: `Records of kind ${group}`, color: '#CBD5E1' };
 }
 function dayLabel(day) {
@@ -48,7 +48,7 @@ function dayLabel(day) {
     }).format(new Date(`${day}T00:00:00Z`));
 }
 export class MemoryTimelineModule {
-    onSelect;
+    hooks;
     period = '7d';
     day = null;
     query = '';
@@ -57,8 +57,8 @@ export class MemoryTimelineModule {
     request = 0;
     bound = false;
     debouncedLoad = debounce(() => void this.load(), 300);
-    constructor(onSelect) {
-        this.onSelect = onSelect;
+    constructor(hooks) {
+        this.hooks = hooks;
     }
     /** Wire the controls once, then read the current period. */
     async init() {
@@ -114,7 +114,7 @@ export class MemoryTimelineModule {
         document
             .querySelector(`#memory-timeline [data-record-id="${CSS.escape(id)}"]`)
             ?.classList.add('selected');
-        this.onSelect(id);
+        this.hooks.onSelect(id);
     }
     params() {
         return {
@@ -135,6 +135,7 @@ export class MemoryTimelineModule {
             if (request !== this.request)
                 return;
             this.render(data);
+            this.hooks.onRender(data);
         }
         catch (error) {
             if (request !== this.request)

package/public/viewer/js/modules/wiki.js

@@ -154,11 +154,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/js/utils/api.js

@@ -124,9 +124,9 @@ export class API {
     // =============================================
     // Graph API
     // =============================================
-    /** One record and the records and source messages it links to directly. */
-    static async getGraphNeighbors(id) {
-        return this.get('/api/graph/neighbors', { id });
+    /** Every link between records, with each end's kind, label and work item. */
+    static async getMemoryLinks() {
+        return this.get('/api/memory/links');
     }
     /** What was saved in a period, by day, kind and item. */
     static async getMemoryTimeline(params) {