@jungjaehoon/mama-os 0.62.0 → 0.64.0

package/public/viewer/viewer.html

@@ -427,7 +427,7 @@
 
           <div class="tab-content" id="tab-memory">
             <div class="flex-1 flex flex-col min-h-0">
-              <!-- Compact Filter Bar (full width, top) -->
+              <!-- Period, kinds and search: every control is a server read of the saved timeline -->
               <div
                 class="memory-controls flex items-center gap-2 px-3 py-2 border-b border-gray-200 bg-white"
               >
@@ -436,7 +436,7 @@
                   id="checkpoint-sidebar-toggle"
                   class="w-7 h-7 bg-white border border-gray-200 rounded flex items-center justify-center text-gray-500 hover:bg-gray-100 hover:text-gray-700"
                   onclick="toggleCheckpointSidebar()"
-                  title="Toggle Decision List"
+                  title="Show or hide the saved list"
                   aria-controls="checkpoint-sidebar"
                   aria-expanded="true"
                 >
@@ -456,129 +456,29 @@
                     <line x1="9" y1="21" x2="9" y2="9" />
                   </svg>
                 </button>
-                <!-- Stats (compact inline) -->
-                <span
-                  id="memory-stats-total"
-                  style="
-                    font-family: Inter, 'Noto Sans KR', sans-serif;
-                    font-size: 13px;
-                    font-weight: 600;
-                    color: #1a1a1a;
-                  "
-                  >-</span
-                >
-                <span style="font-size: 11px; color: #9e9891">decisions</span>
-                <span style="color: #ede9e1">|</span>
-                <span id="memory-stats-week" style="font-size: 11px; color: #6b6560"
-                  >- this week</span
-                >
-                <!-- Spacer -->
-                <div style="flex: 1"></div>
-                <!-- Topic filter -->
-                <input
-                  list="topic-filter-list"
-                  class="px-2 py-1 bg-white border border-gray-200 rounded text-xs focus:outline-none focus:ring-1 focus:ring-yellow-400"
-                  id="topic-filter"
-                  placeholder="Filter topics..."
-                  oninput="filterByTopic(this.value)"
-                />
-                <datalist id="topic-filter-list"></datalist>
-                <select
-                  class="px-2 py-1 bg-white border border-gray-200 rounded text-xs focus:outline-none focus:ring-1 focus:ring-yellow-400"
-                  id="outcome-filter"
-                  onchange="filterByOutcome(this.value)"
-                  style="display: none"
-                >
-                  <option value="">All Outcomes</option>
-                  <option value="success">Success</option>
-                  <option value="failed">Failed</option>
-                  <option value="partial">Partial</option>
-                  <option value="pending">Pending</option>
-                </select>
-                <!-- Search -->
+                <div class="memory-periods" role="group" aria-label="Period">
+                  <button type="button" class="memory-chip" data-memory-period="today">
+                    Today
+                  </button>
+                  <button type="button" class="memory-chip" data-memory-period="7d">7 days</button>
+                  <button type="button" class="memory-chip" data-memory-period="30d">
+                    30 days
+                  </button>
+                  <input type="date" id="memory-day" class="memory-day" aria-label="One day" />
+                </div>
+                <div
+                  id="memory-group-chips"
+                  class="memory-groups"
+                  role="group"
+                  aria-label="Kinds"
+                ></div>
                 <input
-                  type="text"
+                  type="search"
+                  id="memory-timeline-search"
                   class="px-2 py-1 bg-white border border-gray-200 rounded text-xs placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-yellow-400"
-                  id="search-input"
-                  placeholder="Search content..."
-                  onkeyup="handleGraphSearch(event)"
+                  placeholder="Search saved text..."
+                  aria-label="Search saved text"
                 />
-                <button
-                  onclick="clearFilters()"
-                  class="px-2 py-1 text-[10px] text-gray-400 hover:text-gray-600"
-                >
-                  Clear
-                </button>
-                <!-- Export (collapsed) -->
-                <details style="position: relative">
-                  <summary
-                    style="
-                      font-size: 10px;
-                      color: #9e9891;
-                      cursor: pointer;
-                      padding: 4px 8px;
-                      border: 1px solid #ede9e1;
-                      border-radius: 4px;
-                    "
-                  >
-                    Export
-                  </summary>
-                  <div
-                    style="
-                      position: absolute;
-                      right: 0;
-                      top: 100%;
-                      background: #fff;
-                      border: 1px solid #ede9e1;
-                      border-radius: 4px;
-                      padding: 4px;
-                      z-index: 10;
-                      display: flex;
-                      gap: 4px;
-                      margin-top: 2px;
-                    "
-                  >
-                    <button
-                      onclick="exportDecisions('json')"
-                      style="
-                        font-size: 10px;
-                        padding: 2px 8px;
-                        background: #f5f2ed;
-                        border: none;
-                        border-radius: 2px;
-                        cursor: pointer;
-                      "
-                    >
-                      JSON
-                    </button>
-                    <button
-                      onclick="exportDecisions('markdown')"
-                      style="
-                        font-size: 10px;
-                        padding: 2px 8px;
-                        background: #f5f2ed;
-                        border: none;
-                        border-radius: 2px;
-                        cursor: pointer;
-                      "
-                    >
-                      MD
-                    </button>
-                    <button
-                      onclick="exportDecisions('csv')"
-                      style="
-                        font-size: 10px;
-                        padding: 2px 8px;
-                        background: #f5f2ed;
-                        border: none;
-                        border-radius: 2px;
-                        cursor: pointer;
-                      "
-                    >
-                      CSV
-                    </button>
-                  </div>
-                </details>
               </div>
 
               <!-- Main content area: Sidebar + Graph -->
@@ -586,25 +486,15 @@
                 <!-- Decision List Sidebar -->
                 <aside
                   id="checkpoint-sidebar"
-                  class="checkpoint-sidebar w-64 border-r border-gray-200 bg-white flex flex-col min-h-0 overflow-hidden"
-                  style="min-width: 180px; max-width: 400px"
+                  class="checkpoint-sidebar w-96 border-r border-gray-200 bg-white flex flex-col min-h-0 overflow-hidden"
+                  style="min-width: 240px; max-width: 640px"
                 >
-                  <div class="p-2 border-b border-gray-200 flex items-center justify-between">
-                    <span
-                      style="
-                        font-family: Inter, 'Noto Sans KR', sans-serif;
-                        font-size: 12px;
-                        font-weight: 600;
-                        color: #1a1a1a;
-                      "
-                      >Decisions</span
-                    >
-                    <span id="decision-list-count" style="font-size: 10px; color: #9e9891">0</span>
+                  <div class="mt-head">
+                    <span id="memory-timeline-range" class="mt-range">Saved</span>
+                    <span id="memory-timeline-count" class="mt-total"></span>
                   </div>
-                  <div class="flex-1 overflow-y-auto" id="decision-list" style="padding: 4px">
-                    <div style="padding: 16px; text-align: center; color: #9e9891; font-size: 11px">
-                      Loading decisions...
-                    </div>
+                  <div class="flex-1 overflow-y-auto" id="memory-timeline">
+                    <div class="mt-empty">Reading what was saved...</div>
                   </div>
                 </aside>
 
@@ -629,18 +519,23 @@
                     style="background: #fafafa"
                   ></div>
 
+                  <div class="absolute inset-0 flex items-center justify-center" id="graph-empty">
+                    Reading what was saved...
+                  </div>
+
                   <div
                     class="absolute inset-0 flex flex-col items-center justify-center bg-white/95"
                     id="graph-loading"
+                    style="display: none"
                   >
                     <div
                       class="w-6 h-6 border-2 border-gray-400 border-t-transparent rounded-full animate-spin"
                     ></div>
-                    <span class="mt-2 text-xs text-gray-500">Loading graph...</span>
+                    <span class="mt-2 text-xs text-gray-500">Reading links...</span>
                   </div>
 
                   <div
-                    class="legend-panel absolute bottom-16 right-4 w-64 bg-white/95 backdrop-blur-sm border border-gray-200 rounded-lg shadow-lg p-3 z-10"
+                    class="legend-panel absolute bottom-16 right-4 w-80 bg-white/95 backdrop-blur-sm border border-gray-200 rounded-lg shadow-lg p-3 z-10"
                     id="legend-panel"
                   >
                     <button
@@ -662,9 +557,7 @@
                         <line x1="6" y1="6" x2="18" y2="18" />
                       </svg>
                     </button>
-                    <h4
-                      class="text-xs font-semibold text-gray-700 text-gray-700 flex items-center gap-1.5 mb-3"
-                    >
+                    <h4 class="text-sm font-semibold text-gray-700 flex items-center gap-1.5 mb-3">
                       <svg
                         xmlns="http://www.w3.org/2000/svg"
                         width="14"
@@ -680,11 +573,11 @@
                         <line x1="12" y1="16" x2="12" y2="12" />
                         <line x1="12" y1="8" x2="12.01" y2="8" />
                       </svg>
-                      Legend
+                      What the dots and lines mean
                     </h4>
                     <div
                       id="graph-legend-content"
-                      class="legend-content space-y-3 max-h-64 overflow-y-auto"
+                      class="legend-content space-y-3 max-h-80 overflow-y-auto"
                     ></div>
                   </div>
                   <button
@@ -725,7 +618,7 @@
               id="detail-modal-header"
             >
               <h3 class="text-sm font-semibold text-gray-900 truncate flex-1" id="detail-topic">
-                Decision Detail
+                Record
               </h3>
               <button
                 class="p-1 rounded hover:bg-gray-200 transition-colors text-gray-500 hover:text-gray-700 ml-2"
@@ -747,9 +640,12 @@
                 </svg>
               </button>
             </div>
-            <div class="flex-1 p-3 overflow-y-auto space-y-3 text-xs">
+            <div class="flex-1 p-3 overflow-y-auto space-y-3 text-sm">
+              <div class="flex gap-4 text-xs text-gray-500">
+                <span id="detail-kind"></span>
+                <span>Saved <span id="detail-created"></span></span>
+              </div>
               <div>
-                <div class="font-semibold text-gray-500 uppercase tracking-wide mb-1">Decision</div>
                 <div
                   class="text-gray-900 leading-relaxed markdown-content"
                   id="detail-decision"
@@ -757,55 +653,16 @@
               </div>
               <div>
                 <div
-                  class="font-semibold text-gray-500 uppercase tracking-wide mb-1 cursor-pointer hover:text-gray-700"
+                  class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1 cursor-pointer hover:text-gray-700"
                   onclick="toggleReasoning()"
                 >
-                  <span id="reasoning-arrow">▶</span> Reasoning
+                  <span id="reasoning-arrow">▶</span> Reasoning and evidence
                 </div>
                 <div
                   class="text-gray-900 leading-relaxed markdown-content hidden"
                   id="detail-reasoning"
                 ></div>
               </div>
-              <div class="flex items-center gap-3">
-                <div class="flex items-center gap-2">
-                  <span class="font-semibold text-gray-500 uppercase">Outcome:</span>
-                  <select
-                    class="px-1.5 py-0.5 bg-white border border-gray-200 rounded text-xs focus:outline-none focus:ring-1 focus:ring-yellow-400"
-                    id="detail-outcome-select"
-                  >
-                    <option value="PENDING">PENDING</option>
-                    <option value="SUCCESS">SUCCESS</option>
-                    <option value="FAILED">FAILED</option>
-                    <option value="PARTIAL">PARTIAL</option>
-                  </select>
-                  <button
-                    class="px-1.5 py-0.5 bg-gray-100 hover:bg-gray-200 rounded transition-colors"
-                    onclick="saveOutcome()"
-                  >
-                    Save
-                  </button>
-                  <span id="outcome-status"></span>
-                </div>
-              </div>
-              <div class="flex gap-4">
-                <div>
-                  <span class="font-semibold text-gray-500 uppercase">Confidence:</span>
-                  <span class="text-gray-900" id="detail-confidence"></span>
-                </div>
-                <div>
-                  <span class="font-semibold text-gray-500 uppercase">Created:</span>
-                  <span class="text-gray-900" id="detail-created"></span>
-                </div>
-              </div>
-              <div>
-                <div class="font-semibold text-gray-500 uppercase tracking-wide mb-1">
-                  Similar Decisions
-                </div>
-                <div class="text-gray-900" id="detail-similar">
-                  <span class="text-gray-400">Searching...</span>
-                </div>
-              </div>
             </div>
             <div
               id="decision-resize-handle"
@@ -1202,6 +1059,7 @@ export MAMA_AUTH_TOKEN="your-secure-token-here"</pre
 
     <script type="module">
       import { GraphModule } from '/viewer/js/modules/graph.js';
+      import { MemoryTimelineModule } from '/viewer/js/modules/memory-timeline.js';
       import { MemoryModule } from '/viewer/js/modules/memory.js';
       import { WikiModule } from '/viewer/js/modules/wiki.js';
       import { renderRuntimeView, renderConnectorsView } from '/viewer/js/modules/system.js';
@@ -1209,6 +1067,18 @@ export MAMA_AUTH_TOKEN="your-secure-token-here"</pre
 
       const memory = new MemoryModule();
       const graph = new GraphModule();
+      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();
 
       // Exposed for inline handlers and debugging.
@@ -1368,7 +1238,6 @@ export MAMA_AUTH_TOKEN="your-secure-token-here"</pre
         route: DEFAULT_ROUTE,
         routeKey: null,
         theme: 'light',
-        graphLoaded: false,
       };
 
       async function applyRoute(route) {
@@ -1400,22 +1269,7 @@ export MAMA_AUTH_TOKEN="your-secure-token-here"</pre
 
         if (route.view === 'memory') {
           updateCheckpointSidebarForScreenSize();
-          updateMemoryStats();
-          if (!STATE.graphLoaded) {
-            try {
-              const data = await graph.fetchData();
-              graph.init(data);
-              STATE.graphLoaded = true;
-              const loadingEl = document.getElementById('graph-loading');
-              if (loadingEl) loadingEl.style.display = 'none';
-            } catch (error) {
-              console.error('[MAMA] Failed to load graph:', error);
-              const loadingEl = document.getElementById('graph-loading');
-              if (loadingEl) {
-                loadingEl.innerHTML = '<span class="text-red-500">Failed to load graph data</span>';
-              }
-            }
-          }
+          await timeline.init();
           return;
         }
 
@@ -1668,9 +1522,9 @@ export MAMA_AUTH_TOKEN="your-secure-token-here"</pre
         const isExpanding = sidebar.classList.contains('collapsed');
         if (isExpanding) {
           sidebar.classList.remove('collapsed');
-          sidebar.style.width = '224px'; // w-56 = 14rem = 224px
+          sidebar.style.width = '';
           if (toggleBtn) {
-            toggleBtn.title = 'Hide Checkpoints';
+            toggleBtn.title = 'Hide the saved list';
             toggleBtn.setAttribute('aria-expanded', 'true');
           }
           if (handle) handle.style.display = '';
@@ -1678,7 +1532,7 @@ export MAMA_AUTH_TOKEN="your-secure-token-here"</pre
           sidebar.classList.add('collapsed');
           sidebar.style.width = '0';
           if (toggleBtn) {
-            toggleBtn.title = 'Show Checkpoints';
+            toggleBtn.title = 'Show the saved list';
             toggleBtn.setAttribute('aria-expanded', 'false');
           }
           if (handle) handle.style.display = 'none';
@@ -1696,17 +1550,18 @@ export MAMA_AUTH_TOKEN="your-secure-token-here"</pre
           // Mobile: stack layout with resizable height
           sidebar.classList.remove('collapsed');
           sidebar.style.width = '100%';
-          sidebar.style.height = '30vh';
+          sidebar.style.height = '55vh';
           if (handle) {
             handle.style.display = '';
             handle.classList.add('sidebar-resize-handle--row');
           }
           if (toggleBtn) toggleBtn.setAttribute('aria-expanded', 'true');
         } else {
-          // Desktop: expand if was collapsed due to mobile
+          // Desktop: the stacked layout's full width and any collapse give way to the class width.
+          if (sidebar.style.width === '100%') sidebar.style.width = '';
           if (sidebar.classList.contains('collapsed')) {
             sidebar.classList.remove('collapsed');
-            sidebar.style.width = '224px';
+            sidebar.style.width = '';
           }
           sidebar.style.height = '';
           if (handle) {
@@ -1846,79 +1701,6 @@ export MAMA_AUTH_TOKEN="your-secure-token-here"</pre
           .catch(() => (result.innerHTML = '<span class="text-red-500">Connection failed</span>'));
       }
 
-      function filterByTopic(topic) {
-        graph.filterByTopic && graph.filterByTopic(topic);
-      }
-
-      function filterByOutcome(outcome) {
-        graph.filterByOutcome && graph.filterByOutcome(outcome);
-      }
-
-      // Clear is scoped to the Graph module instance that owns the filters. Each
-      // control is looked up defensively: the bar is markup that can be edited,
-      // and one missing input must not take the whole Clear action down.
-      function clearFilters() {
-        const topicFilter = document.getElementById('topic-filter');
-        const outcomeFilter = document.getElementById('outcome-filter');
-        const searchInput = document.getElementById('search-input');
-        if (topicFilter) topicFilter.value = '';
-        if (outcomeFilter) outcomeFilter.value = '';
-        if (searchInput) searchInput.value = '';
-        graph?.clearFilters?.();
-      }
-
-      async function exportDecisions(format) {
-        try {
-          const response = await fetch(`/api/memory/export?format=${format}`);
-          if (!response.ok) throw new Error('Export failed');
-
-          const blob = await response.blob();
-          const filename =
-            response.headers.get('Content-Disposition')?.match(/filename="(.+)"/)?.[1] ||
-            `mama-export.${format}`;
-
-          const url = URL.createObjectURL(blob);
-          const a = document.createElement('a');
-          a.href = url;
-          a.download = filename;
-          document.body.appendChild(a);
-          a.click();
-          document.body.removeChild(a);
-          URL.revokeObjectURL(url);
-        } catch (error) {
-          console.error('[Export] Error:', error);
-          alert('Export failed: ' + error.message);
-        }
-      }
-
-      async function updateMemoryStats() {
-        try {
-          const data = await API.get('/api/dashboard/status');
-          const memory = data.memory || {};
-          const totalEl = document.getElementById('memory-stats-total');
-          const weekEl = document.getElementById('memory-stats-week');
-          if (totalEl) totalEl.textContent = memory.total || 0;
-          if (weekEl) weekEl.textContent = `${memory.thisWeek || 0} this week`;
-        } catch (error) {
-          console.error('[MemoryStats] Error:', error);
-        }
-      }
-
-      function handleGraphSearch(event) {
-        if (event.key === 'Enter') {
-          graph.search && graph.search();
-        }
-      }
-
-      function saveOutcome() {
-        const select = document.getElementById('detail-outcome-select');
-        const outcome = select.value;
-        const nodeId = graph.currentNodeId;
-        if (nodeId && outcome) {
-          graph.updateOutcome && graph.updateOutcome(nodeId, outcome);
-        }
-      }
-
       // Expose to window for onclick handlers
       window.switchTab = switchTab;
       window.toggleTheme = toggleTheme;
@@ -1931,12 +1713,6 @@ export MAMA_AUTH_TOKEN="your-secure-token-here"</pre
       window.hideSaveDecisionForm = hideSaveDecisionForm;
       window.submitSaveDecision = submitSaveDecision;
       window.testConnection = testConnection;
-      window.filterByOutcome = filterByOutcome;
-      window.clearFilters = clearFilters;
-      window.exportDecisions = exportDecisions;
-      window.filterByTopic = filterByTopic;
-      window.handleGraphSearch = handleGraphSearch;
-      window.saveOutcome = saveOutcome;
 
       document.addEventListener('DOMContentLoaded', () => {
         const userLang = navigator.language || navigator.userLanguage;