@jungjaehoon/mama-os 0.62.0 → 0.63.0

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

@@ -0,0 +1,272 @@
+/**
+ * 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,
+  type MemoryTimelineResponse,
+  type TimelineGroup,
+  type TimelineItem,
+  type TimelineRecord,
+} from '../utils/api.js';
+
+/** The groups the server names first, in its order, with the words and colours the list shows. */
+const GROUPS: Record<string, { label: string; hint: string; color: string }> = {
+  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: Record<string, string> = {
+  owner_chat: 'owner chat',
+  source_delta: 'source update',
+  report: 'report',
+};
+
+const OPERATION_LABELS: Record<string, string> = {
+  create: 'opened',
+  revise: 'updated',
+  withdraw: 'withdrawn',
+};
+
+function groupInfo(group: string): { label: string; hint: string; color: string } {
+  return GROUPS[group] ?? { label: group, hint: `Records of kind ${group}`, color: '#CBD5E1' };
+}
+
+function dayLabel(day: string): string {
+  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 {
+  period = '7d';
+  day: string | null = null;
+  query = '';
+  groups = new Set<string>();
+  selectedId: string | null = null;
+  private request = 0;
+  private bound = false;
+  private debouncedLoad = debounce(() => void this.load(), 300);
+
+  constructor(private readonly onSelect: (id: string) => void) {}
+
+  /** Wire the controls once, then read the current period. */
+  async init(): Promise<void> {
+    if (!this.bound) {
+      this.bind();
+      this.bound = true;
+    }
+    await this.load();
+  }
+
+  private bind(): void {
+    document.querySelectorAll<HTMLButtonElement>('[data-memory-period]').forEach((button) => {
+      button.addEventListener('click', () => {
+        this.period = button.dataset.memoryPeriod ?? '7d';
+        this.day = null;
+        const dayInput = getElementByIdOrNull<HTMLInputElement>('memory-day');
+        if (dayInput) dayInput.value = '';
+        void this.load();
+      });
+    });
+    getElementByIdOrNull<HTMLInputElement>('memory-day')?.addEventListener('change', (event) => {
+      const value = (event.target as HTMLInputElement).value;
+      this.day = value === '' ? null : value;
+      void this.load();
+    });
+    getElementByIdOrNull<HTMLInputElement>('memory-timeline-search')?.addEventListener(
+      'input',
+      (event) => {
+        this.query = (event.target as HTMLInputElement).value.trim();
+        this.debouncedLoad();
+      }
+    );
+    getElementByIdOrNull<HTMLElement>('memory-group-chips')?.addEventListener('click', (event) => {
+      const chip = (event.target as HTMLElement).closest<HTMLButtonElement>('[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<HTMLElement>('memory-timeline')?.addEventListener('click', (event) => {
+      const row = (event.target as HTMLElement).closest<HTMLElement>('[data-record-id]');
+      if (!row?.dataset.recordId) return;
+      this.select(row.dataset.recordId);
+    });
+  }
+
+  private select(id: string): void {
+    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.onSelect(id);
+  }
+
+  private params(): Record<string, string> {
+    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(): Promise<void> {
+    const list = getElementByIdOrNull<HTMLElement>('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);
+    } 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: MemoryTimelineResponse): void {
+    document.querySelectorAll<HTMLButtonElement>('[data-memory-period]').forEach((button) => {
+      button.setAttribute(
+        'aria-pressed',
+        String(this.day === null && button.dataset.memoryPeriod === this.period)
+      );
+    });
+    const range = getElementByIdOrNull<HTMLElement>('memory-timeline-range');
+    if (range) {
+      range.textContent =
+        data.from === data.to
+          ? dayLabel(data.from)
+          : `${dayLabel(data.from)} – ${dayLabel(data.to)}`;
+    }
+    const count = getElementByIdOrNull<HTMLElement>('memory-timeline-count');
+    if (count) count.textContent = `${data.total} saved`;
+    this.renderChips(data.counts);
+
+    const list = getElementByIdOrNull<HTMLElement>('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');
+    }
+  }
+
+  private renderChips(counts: Record<string, number>): void {
+    const container = getElementByIdOrNull<HTMLElement>('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('');
+  }
+
+  private renderGroup(group: TimelineGroup): string {
+    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>`;
+  }
+
+  private renderRecord(record: TimelineRecord): string {
+    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>`;
+  }
+
+  private renderItem(item: TimelineItem): string {
+    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/src/types/global.d.ts

@@ -79,7 +79,7 @@ declare global {
 
   interface VisNetwork {
     on(
-      event: 'click' | 'stabilized' | 'stabilizationIterationsDone',
+      event: 'click' | 'doubleClick' | '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

@@ -50,22 +50,45 @@ export interface GraphDetailResponse {
   [key: string]: unknown;
 }
 
-export interface SimilarDecision {
-  id?: string | number;
-  topic?: string;
-  decision?: string;
-  reasoning?: string;
-  relationship?: string;
-  similarity?: number;
-  [key: string]: unknown;
+export interface TimelineRecord {
+  id: string;
+  kind: string | null;
+  status: string | null;
+  topic: string;
+  summary: string;
+  time: string;
+  via: string | null;
 }
 
-export interface SimilarDecisionsResponse {
-  similar: SimilarDecision[];
-  [key: string]: unknown;
+export interface TimelineItem {
+  commitmentId: string;
+  title: string | null;
+  topic: string;
+  revisions: Array<{
+    id: string;
+    revision: number | null;
+    operation: string | null;
+    status: string | null;
+    summary: string;
+    time: string;
+  }>;
+}
+
+export interface TimelineGroup {
+  group: string;
+  count: number;
+  records?: TimelineRecord[];
+  items?: TimelineItem[];
 }
 
-export type GraphSimilarResponse = GraphResponse & SimilarDecisionsResponse;
+export interface MemoryTimelineResponse {
+  from: string;
+  to: string;
+  timeZone: string;
+  total: number;
+  counts: Record<string, number>;
+  days: Array<{ day: string; total: number; groups: TimelineGroup[] }>;
+}
 
 export interface CheckpointSummary {
   id?: string;
@@ -660,45 +683,18 @@ export class API {
   // Graph API
   // =============================================
 
-  /**
-   * Get graph data
-   * @param {Object} params - Query parameters
-   * @returns {Promise<Object>} Graph data
-   */
-  static async getGraph(params: QueryParams = {}): Promise<GraphResponse> {
-    // cluster: false by default to avoid slow embedding calculations
-    return this.get<GraphResponse>('/graph', { cluster: 'false', ...params });
+  /** 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 });
   }
 
-  static async getGraphDetail(nodeId: string): Promise<GraphDetailResponse> {
-    return this.get<GraphDetailResponse>('/graph/detail', { id: nodeId });
+  /** What was saved in a period, by day, kind and item. */
+  static async getMemoryTimeline(params: QueryParams): Promise<MemoryTimelineResponse> {
+    return this.get<MemoryTimelineResponse>('/api/memory/timeline', params);
   }
 
-  /**
-   * Get similar decisions for a node
-   * @param {string} nodeId - Node ID
-   * @returns {Promise<Object>} Similar decisions
-   */
-  static async getSimilarDecisions(nodeId: string): Promise<GraphSimilarResponse> {
-    return this.get<GraphSimilarResponse>('/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: string,
-    outcome: string,
-    reason: string | null = null
-  ): Promise<JsonRecord> {
-    return this.post<JsonRecord, { id: string; outcome: string; reason: string | null }>(
-      '/graph/update',
-      { id, outcome, reason }
-    );
+  static async getGraphDetail(nodeId: string): Promise<GraphDetailResponse> {
+    return this.get<GraphDetailResponse>('/graph/detail', { id: nodeId });
   }
 
   // =============================================

package/public/viewer/viewer.css

@@ -115,16 +115,16 @@ button:not([class*="p-"]):not([class*="px-"]):not([class*="py-"]) { padding: 6px
     max-width: 100% !important;
     border-right: none;
     border-bottom: 1px solid #e5e7eb;
-    max-height: 35vh;
+    max-height: 55vh;
   }
   #sidebar-resize-handle {
     display: none;
   }
   #graph-container {
-    min-height: 45vh;
+    min-height: 40vh;
   }
   #graph-canvas {
-    min-height: 45vh;
+    min-height: 40vh;
   }
 }
 @keyframes float {
@@ -255,14 +255,264 @@ button:not([class*="p-"]):not([class*="px-"]):not([class*="py-"]) { padding: 6px
   flex-wrap: wrap;
 }
 
-.memory-controls #topic-filter {
+.memory-controls #memory-timeline-search {
   min-width: 0;
-  flex: 0 1 10rem;
+  flex: 1 1 12rem;
+}
+
+/* ============================================================================
+   MEMORY TIMELINE - period, kinds, then day > kind > item > update
+   ============================================================================ */
+
+.memory-periods,
+.memory-groups {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+}
+
+.memory-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 10px;
+  border: 1px solid #e5e1d8;
+  border-radius: 9999px;
+  background: #fff;
+  color: #3f3a35;
+  font-size: 12px;
+  line-height: 18px;
+  cursor: pointer;
 }
 
-.memory-controls #search-input {
+.memory-chip:hover {
+  background: #fffaf0;
+}
+
+.memory-chip[aria-pressed='true'] {
+  background: #131313;
+  border-color: #131313;
+  color: #fff;
+}
+
+.memory-chip[aria-pressed='true'] .mt-count {
+  color: #d4d0c8;
+}
+
+.memory-day {
+  padding: 2px 6px;
+  border: 1px solid #e5e1d8;
+  border-radius: 6px;
+  font-size: 12px;
+  color: #3f3a35;
+}
+
+.mt-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 12px;
+  border-bottom: 1px solid #ede9e1;
+}
+
+.mt-range {
+  font-size: 13px;
+  font-weight: 600;
+  color: #1a1a1a;
+}
+
+.mt-total,
+.mt-count {
+  font-size: 12px;
+  color: #8a847c;
+  font-variant-numeric: tabular-nums;
+}
+
+.mt-empty {
+  padding: 24px 16px;
+  text-align: center;
+  font-size: 13px;
+  color: #8a847c;
+}
+
+.mt-error {
+  color: #b42318;
+}
+
+#memory-timeline[aria-busy='true'] {
+  opacity: 0.6;
+}
+
+.mt-day-head {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 12px;
+  background: #f7f5f0;
+  border-bottom: 1px solid #ede9e1;
+  font-size: 13px;
+  font-weight: 600;
+  color: #1a1a1a;
+}
+
+.mt-group-head,
+.mt-item-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  list-style: none;
+}
+
+.mt-group-head::-webkit-details-marker,
+.mt-item-head::-webkit-details-marker {
+  display: none;
+}
+
+.mt-group-head {
+  padding: 6px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #3f3a35;
+}
+
+.mt-group-head .mt-count {
+  margin-left: auto;
+}
+
+.mt-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 9999px;
+  flex-shrink: 0;
+}
+
+.mt-row,
+.mt-item-head {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  width: 100%;
+  padding: 6px 12px 6px 30px;
+  border: 0;
+  border-bottom: 1px solid #f5f2ed;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+}
+
+.mt-row:hover,
+.mt-item-head:hover {
+  background: #fffdf5;
+}
+
+.mt-row.selected {
+  background: #fff4cc;
+}
+
+.mt-revision {
+  padding-left: 54px;
+}
+
+.mt-time {
+  flex-shrink: 0;
+  width: 40px;
+  font-size: 12px;
+  color: #8a847c;
+  font-variant-numeric: tabular-nums;
+}
+
+.mt-body {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
   min-width: 0;
-  flex: 1 1 12rem;
+  flex: 1;
+}
+
+.mt-topic,
+.mt-op {
+  font-size: 13px;
+  font-weight: 600;
+  color: #1a1a1a;
+  overflow-wrap: anywhere;
+}
+
+.mt-op {
+  font-weight: 500;
+  color: #6b6560;
+}
+
+.mt-summary {
+  font-size: 12px;
+  line-height: 1.45;
+  color: #4a4540;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.mt-via {
+  font-size: 11px;
+  color: #8a847c;
+}
+
+.mt-badge {
+  margin-left: 6px;
+  padding: 0 6px;
+  border-radius: 9999px;
+  background: #f1eee8;
+  font-size: 11px;
+  font-weight: 500;
+  color: #6b6560;
+}
+
+.mt-item-head .mt-count {
+  flex-shrink: 0;
+}
+
+.graph-empty-text {
+  max-width: 320px;
+  text-align: center;
+  font-size: 14px;
+  color: #8a847c;
+}
+
+.legend-heading {
+  margin-bottom: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #3f3a35;
+}
+
+.legend-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+  font-size: 13px;
+  color: #1a1a1a;
+}
+
+.legend-label {
+  flex: 1;
+}
+
+.legend-count {
+  color: #8a847c;
+  font-variant-numeric: tabular-nums;
+}
+
+.legend-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 9999px;
+  flex-shrink: 0;
 }
 
 /* ============================================================================