@jungjaehoon/mama-os 0.62.0 → 0.64.0

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

@@ -0,0 +1,216 @@
+/**
+ * Memory Timeline Module - what was saved, and when
+ * @module modules/memory-timeline
+ *
+ * The memory view's list: a period (today, 7 days, 30 days or one day), then by day, then by
+ * kind, then by work item and its updates. Every filter is a server read, so the list and the
+ * counts on the kind chips always describe the same records.
+ */
+/* eslint-env browser */
+import { escapeAttr, escapeHtml, debounce, getElementByIdOrNull } from '../utils/dom.js';
+import { API, } from '../utils/api.js';
+/** The groups the server names first, in its order, with the words and colours the list shows. */
+const GROUPS = {
+    owner_rule: {
+        label: 'Owner rules',
+        hint: 'Rules the owner set in their own chat',
+        color: '#FB7185',
+    },
+    learned: {
+        label: 'Learned rules',
+        hint: 'Lessons, preferences, constraints and workflows learned in other turns',
+        color: '#FBBF24',
+    },
+    decision: { label: 'Decisions', hint: 'Decisions recorded', color: '#60A5FA' },
+    fact: { label: 'Facts', hint: 'Facts recorded', color: '#2DD4BF' },
+    work: { label: 'Work updates', hint: 'Work items opened or updated', color: '#FB923C' },
+};
+const VIA_LABELS = {
+    owner_chat: 'owner chat',
+    source_delta: 'source update',
+    report: 'report',
+};
+const OPERATION_LABELS = {
+    create: 'opened',
+    revise: 'updated',
+    withdraw: 'withdrawn',
+};
+export function groupInfo(group) {
+    return GROUPS[group] ?? { label: group, hint: `Records of kind ${group}`, color: '#CBD5E1' };
+}
+function dayLabel(day) {
+    return new Intl.DateTimeFormat(undefined, {
+        weekday: 'short',
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        timeZone: 'UTC',
+    }).format(new Date(`${day}T00:00:00Z`));
+}
+export class MemoryTimelineModule {
+    hooks;
+    period = '7d';
+    day = null;
+    query = '';
+    groups = new Set();
+    selectedId = null;
+    request = 0;
+    bound = false;
+    debouncedLoad = debounce(() => void this.load(), 300);
+    constructor(hooks) {
+        this.hooks = hooks;
+    }
+    /** Wire the controls once, then read the current period. */
+    async init() {
+        if (!this.bound) {
+            this.bind();
+            this.bound = true;
+        }
+        await this.load();
+    }
+    bind() {
+        document.querySelectorAll('[data-memory-period]').forEach((button) => {
+            button.addEventListener('click', () => {
+                this.period = button.dataset.memoryPeriod ?? '7d';
+                this.day = null;
+                const dayInput = getElementByIdOrNull('memory-day');
+                if (dayInput)
+                    dayInput.value = '';
+                void this.load();
+            });
+        });
+        getElementByIdOrNull('memory-day')?.addEventListener('change', (event) => {
+            const value = event.target.value;
+            this.day = value === '' ? null : value;
+            void this.load();
+        });
+        getElementByIdOrNull('memory-timeline-search')?.addEventListener('input', (event) => {
+            this.query = event.target.value.trim();
+            this.debouncedLoad();
+        });
+        getElementByIdOrNull('memory-group-chips')?.addEventListener('click', (event) => {
+            const chip = event.target.closest('[data-group]');
+            if (!chip?.dataset.group)
+                return;
+            const group = chip.dataset.group;
+            if (this.groups.has(group))
+                this.groups.delete(group);
+            else
+                this.groups.add(group);
+            void this.load();
+        });
+        getElementByIdOrNull('memory-timeline')?.addEventListener('click', (event) => {
+            const row = event.target.closest('[data-record-id]');
+            if (!row?.dataset.recordId)
+                return;
+            this.select(row.dataset.recordId);
+        });
+    }
+    select(id) {
+        this.selectedId = id;
+        document.querySelectorAll('#memory-timeline .mt-row.selected').forEach((row) => {
+            row.classList.remove('selected');
+        });
+        document
+            .querySelector(`#memory-timeline [data-record-id="${CSS.escape(id)}"]`)
+            ?.classList.add('selected');
+        this.hooks.onSelect(id);
+    }
+    params() {
+        return {
+            ...(this.day === null ? { period: this.period } : { from: this.day, to: this.day }),
+            ...(this.query === '' ? {} : { q: this.query }),
+            ...(this.groups.size === 0 ? {} : { groups: [...this.groups].join(',') }),
+        };
+    }
+    async load() {
+        const list = getElementByIdOrNull('memory-timeline');
+        if (!list)
+            return;
+        const request = ++this.request;
+        list.setAttribute('aria-busy', 'true');
+        try {
+            const data = await API.getMemoryTimeline(this.params());
+            // 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(error instanceof Error ? error.message : String(error))}</div>`;
+        }
+        finally {
+            if (request === this.request)
+                list.removeAttribute('aria-busy');
+        }
+    }
+    render(data) {
+        document.querySelectorAll('[data-memory-period]').forEach((button) => {
+            button.setAttribute('aria-pressed', String(this.day === null && button.dataset.memoryPeriod === this.period));
+        });
+        const range = getElementByIdOrNull('memory-timeline-range');
+        if (range) {
+            range.textContent =
+                data.from === data.to
+                    ? dayLabel(data.from)
+                    : `${dayLabel(data.from)} – ${dayLabel(data.to)}`;
+        }
+        const count = getElementByIdOrNull('memory-timeline-count');
+        if (count)
+            count.textContent = `${data.total} saved`;
+        this.renderChips(data.counts);
+        const list = getElementByIdOrNull('memory-timeline');
+        if (!list)
+            return;
+        if (data.days.length === 0) {
+            list.innerHTML = `<div class="mt-empty">Nothing saved${this.query === '' ? '' : ` matching “${escapeHtml(this.query)}”`} in this period.</div>`;
+            return;
+        }
+        list.innerHTML = data.days
+            .map((day) => `<section class="mt-day"><h3 class="mt-day-head"><span>${escapeHtml(dayLabel(day.day))}</span><span class="mt-count">${day.total}</span></h3>${day.groups
+            .map((group) => this.renderGroup(group))
+            .join('')}</section>`)
+            .join('');
+        if (this.selectedId !== null) {
+            document
+                .querySelector(`#memory-timeline [data-record-id="${CSS.escape(this.selectedId)}"]`)
+                ?.classList.add('selected');
+        }
+    }
+    renderChips(counts) {
+        const container = getElementByIdOrNull('memory-group-chips');
+        if (!container)
+            return;
+        container.innerHTML = Object.entries(counts)
+            .filter(([group, count]) => count > 0 || this.groups.has(group))
+            .map(([group, count]) => {
+            const info = groupInfo(group);
+            return `<button type="button" class="memory-chip" data-group="${escapeAttr(group)}" aria-pressed="${this.groups.has(group)}" title="${escapeAttr(info.hint)}"><span class="mt-dot" style="background:${info.color}"></span>${escapeHtml(info.label)} <span class="mt-count">${count}</span></button>`;
+        })
+            .join('');
+    }
+    renderGroup(group) {
+        const info = groupInfo(group.group);
+        const body = group.items !== undefined
+            ? group.items.map((item) => this.renderItem(item)).join('')
+            : (group.records ?? []).map((record) => this.renderRecord(record)).join('');
+        return `<details class="mt-group" open><summary class="mt-group-head" title="${escapeAttr(info.hint)}"><span class="mt-dot" style="background:${info.color}"></span>${escapeHtml(info.label)}<span class="mt-count">${group.count}</span></summary>${body}</details>`;
+    }
+    renderRecord(record) {
+        const via = record.via === null ? '' : (VIA_LABELS[record.via] ?? record.via);
+        const status = record.status === null || record.status === 'active'
+            ? ''
+            : `<span class="mt-badge">${escapeHtml(record.status)}</span>`;
+        return `<button type="button" class="mt-row" data-record-id="${escapeAttr(record.id)}"><span class="mt-time">${escapeHtml(record.time)}</span><span class="mt-body"><span class="mt-topic">${escapeHtml(record.topic)}${status}</span><span class="mt-summary">${escapeHtml(record.summary)}</span>${via === '' ? '' : `<span class="mt-via">from ${escapeHtml(via)}</span>`}</span></button>`;
+    }
+    renderItem(item) {
+        const latest = item.revisions[0];
+        const updates = item.revisions.length;
+        return `<details class="mt-item"><summary class="mt-item-head"><span class="mt-time">${escapeHtml(latest?.time ?? '')}</span><span class="mt-body"><span class="mt-topic">${escapeHtml(item.title ?? item.topic)}</span><span class="mt-summary">${escapeHtml(latest?.summary ?? '')}</span></span><span class="mt-count">${updates} ${updates === 1 ? 'update' : 'updates'}</span></summary>${item.revisions
+            .map((revision) => `<button type="button" class="mt-row mt-revision" data-record-id="${escapeAttr(revision.id)}"><span class="mt-time">${escapeHtml(revision.time)}</span><span class="mt-body"><span class="mt-op">${escapeHtml(OPERATION_LABELS[revision.operation ?? ''] ?? revision.operation ?? '')}${revision.revision === null ? '' : ` · revision ${revision.revision}`}</span><span class="mt-summary">${escapeHtml(revision.summary)}</span></span></button>`)
+            .join('')}</details>`;
+    }
+}

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,36 +124,17 @@ export class API {
     // =============================================
     // Graph API
     // =============================================
-    /**
-     * Get graph data
-     * @param {Object} params - Query parameters
-     * @returns {Promise<Object>} Graph data
-     */
-    static async getGraph(params = {}) {
-        // cluster: false by default to avoid slow embedding calculations
-        return this.get('/graph', { cluster: 'false', ...params });
+    /** 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) {
+        return this.get('/api/memory/timeline', params);
     }
     static async getGraphDetail(nodeId) {
         return this.get('/graph/detail', { id: nodeId });
     }
-    /**
-     * Get similar decisions for a node
-     * @param {string} nodeId - Node ID
-     * @returns {Promise<Object>} Similar decisions
-     */
-    static async getSimilarDecisions(nodeId) {
-        return this.get('/graph/similar', { id: nodeId });
-    }
-    /**
-     * Update decision outcome
-     * @param {string} id - Decision ID
-     * @param {string} outcome - Outcome value
-     * @param {string} reason - Optional reason
-     * @returns {Promise<Object>} Update result
-     */
-    static async updateOutcome(id, outcome, reason = null) {
-        return this.post('/graph/update', { id, outcome, reason });
-    }
     // =============================================
     // Checkpoint API
     // =============================================