@agentmemory/agentmemory 0.9.1 → 0.9.3

package/dist/viewer/index.html

@@ -9,6 +9,7 @@
     :root {
       --bg: #F9F9F7;
       --bg-alt: #F0F0EC;
+      --bg-subtle: #F4F4F0;
       --bg-inset: #E8E8E3;
       --border: #111111;
       --border-light: #D4D4CF;
@@ -43,6 +44,7 @@
     html[data-theme="dark"] {
       --bg: #1a1a1e;
       --bg-alt: #232328;
+      --bg-subtle: #1f1f24;
       --bg-inset: #2a2a30;
       --border: #444;
       --border-light: #3a3a42;
@@ -77,6 +79,8 @@
       line-height: 1.6;
       overflow: hidden;
       height: 100vh;
+      display: flex;
+      flex-direction: column;
       background-image: radial-gradient(circle, #D4D4CF 0.5px, transparent 0.5px);
       background-size: 16px 16px;
     }
@@ -168,7 +172,7 @@
       border-bottom-color: var(--accent);
     }
 
-    .view { display: none; height: calc(100vh - 90px); overflow-y: auto; padding: 24px; }
+    .view { display: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 24px; }
     .view.active { display: block; }
 
     .stats-grid {
@@ -576,6 +580,81 @@
     }
     .empty-state .empty-icon { font-size: 36px; margin-bottom: 10px; opacity: 0.4; }
     .empty-state p { font-size: 14px; font-family: var(--font-body); font-style: italic; }
+    .empty-state .empty-title { font-size: 16px; font-weight: 600; font-style: normal; color: var(--ink-muted); margin-bottom: 8px; }
+    .empty-state .empty-lead { font-style: normal; font-size: 14px; color: var(--ink-muted); max-width: 520px; margin: 0 auto 14px; line-height: 1.5; }
+    .empty-state pre.empty-cmd {
+      display: inline-block; margin: 10px auto 12px; padding: 10px 14px;
+      background: var(--bg-alt); border: 1px solid var(--border);
+      border-radius: 4px; font-family: var(--font-mono); font-size: 12px;
+      color: var(--ink); text-align: left; font-style: normal; white-space: pre;
+    }
+    .empty-state .empty-link { color: var(--accent); text-decoration: underline; font-size: 13px; font-style: normal; }
+
+    /* Feature flag banner system — compact collapsed by default */
+    .flag-banners { padding: 0 0 10px 0; }
+    button.flag-summary {
+      display: flex; align-items: center; gap: 12px;
+      padding: 8px 14px; border-radius: 4px;
+      border: 1px solid var(--border);
+      background: var(--bg-subtle);
+      font-family: var(--font-ui); font-size: 12px;
+      color: var(--ink-muted);
+      cursor: pointer; user-select: none;
+      width: 100%; text-align: left;
+      appearance: none;
+    }
+    button.flag-summary:hover,
+    button.flag-summary:focus-visible { background: var(--bg-alt); outline: 2px solid var(--border); outline-offset: 1px; }
+    .flag-summary .flag-count { color: var(--ink); font-weight: 600; }
+    .flag-summary .flag-pill {
+      display: inline-block; padding: 1px 8px; border-radius: 10px;
+      background: #f59e0b20; color: #d97706; font-size: 11px; font-weight: 600;
+      margin-right: 6px;
+    }
+    .flag-summary .flag-pill.info { background: var(--border-light); color: var(--ink-muted); }
+    .flag-summary .flag-toggle { margin-left: auto; font-size: 11px; opacity: 0.7; }
+    .flag-list {
+      display: none; flex-direction: column; gap: 6px;
+      margin-top: 6px;
+    }
+    .flag-list.open { display: flex; }
+    .flag-banner {
+      display: flex; align-items: flex-start; gap: 10px;
+      padding: 10px 14px; border-radius: 3px;
+      border: 1px solid var(--border);
+      background: var(--bg-subtle);
+      font-family: var(--font-ui); font-size: 12px;
+    }
+    .flag-banner.warn { border-left: 3px solid #f59e0b; }
+    .flag-banner.info { border-left: 3px solid var(--ink-muted); }
+    .flag-banner .flag-icon { flex-shrink: 0; font-size: 14px; line-height: 1.3; }
+    .flag-banner .flag-body { flex: 1; min-width: 0; }
+    .flag-banner .flag-title { font-weight: 600; color: var(--ink); margin-bottom: 2px; font-size: 12px; }
+    .flag-banner .flag-title code { font-family: var(--font-mono); font-size: 10px; color: var(--ink-muted); font-weight: 400; margin-left: 4px; }
+    .flag-banner .flag-desc { color: var(--ink-muted); margin-bottom: 4px; line-height: 1.4; font-size: 12px; }
+    .flag-banner .flag-enable {
+      display: block; margin-top: 2px; padding: 5px 8px;
+      background: var(--bg); border: 1px solid var(--border); border-radius: 3px;
+      font-family: var(--font-mono); font-size: 10px; color: var(--ink);
+      white-space: pre-wrap; word-break: break-all;
+    }
+    .flag-banner .flag-close {
+      background: none; border: none; color: var(--ink-faint); cursor: pointer;
+      font-size: 16px; line-height: 1; padding: 0 4px; font-family: inherit;
+    }
+    .flag-banner .flag-close:hover { color: var(--ink); }
+
+    /* Viewer footer */
+    .viewer-footer {
+      margin-top: 48px; padding: 16px 0 24px;
+      border-top: 1px solid var(--border-light);
+      display: flex; align-items: center; gap: 10px;
+      font-family: var(--font-ui); font-size: 11px;
+      color: var(--ink-faint); letter-spacing: 0.05em;
+    }
+    .viewer-footer a { color: var(--ink-muted); text-decoration: none; }
+    .viewer-footer a:hover { color: var(--ink); text-decoration: underline; }
+    .viewer-footer .footer-sep { color: var(--ink-faint); opacity: 0.5; }
 
     .loading { color: var(--ink-faint); padding: 20px; text-align: center; font-style: italic; font-family: var(--font-body); }
     .empty { color: var(--ink-muted); padding: 24px; text-align: center; font-family: var(--font-body); font-style: italic; border: 1px dashed var(--border); }
@@ -814,6 +893,8 @@
     <button data-tab="replay">Replay</button>
   </div>
 
+  <div id="flag-banners" class="flag-banners"></div>
+
   <div id="view-dashboard" class="view active"></div>
   <div id="view-graph" class="view"></div>
   <div id="view-memories" class="view"></div>
@@ -831,6 +912,16 @@
     <div class="modal" id="modal"></div>
   </div>
 
+  <footer id="viewer-footer" class="viewer-footer">
+    <span>agentmemory viewer · <span id="footer-version">loading...</span></span>
+    <span class="footer-sep">·</span>
+    <a href="https://github.com/rohitg00/agentmemory" target="_blank" rel="noopener">github</a>
+    <span class="footer-sep">·</span>
+    <a href="https://github.com/rohitg00/agentmemory#readme" target="_blank" rel="noopener">docs</a>
+    <span class="footer-sep">·</span>
+    <a id="footer-feedback" href="#" target="_blank" rel="noopener">report issue &rarr;</a>
+  </footer>
+
   <script nonce="__AGENTMEMORY_VIEWER_NONCE__">
     var params = new URLSearchParams(window.location.search);
     var viewerPort = params.get('port') || window.location.port || '3113';
@@ -900,9 +991,10 @@
       activity: { loaded: false, observations: [], sessions: [], typeFilter: '' },
       lessons: { loaded: false, items: [], search: '' },
       actions: { loaded: false, items: [], frontier: [], statusFilter: '', search: '' },
-      crystals: { loaded: false, items: [], search: '' },
+      crystals: { loaded: false, items: [], search: '', lessonMap: {} },
       profile: { loaded: false, projects: [], selectedProject: '', data: null },
       replay: { loaded: false, sessions: [], selectedId: '', timeline: null, cursor: 0, playing: false, speed: 1, timer: null, startAt: 0, offsetAt: 0 },
+      flagsConfig: null,
       ws: null
     };
 
@@ -1034,13 +1126,24 @@
       var dotClass = healthStatus === 'healthy' ? 'healthy' : healthStatus === 'degraded' ? 'degraded' : healthStatus === 'critical' ? 'critical' : '';
       var activeSessions = d.sessions.filter(function(s) { return s.status === 'active'; }).length;
       var gs = d.graphStats || {};
-      var nodeCount = (gs.nodes !== undefined) ? gs.nodes : (gs.nodeCount || 0);
-      var edgeCount = (gs.edges !== undefined) ? gs.edges : (gs.edgeCount || 0);
+      var nodeCount = gs.totalNodes !== undefined ? gs.totalNodes : (gs.nodes !== undefined ? gs.nodes : (gs.nodeCount || 0));
+      var edgeCount = gs.totalEdges !== undefined ? gs.totalEdges : (gs.edges !== undefined ? gs.edges : (gs.edgeCount || 0));
       var fMetrics = h.functionMetrics || [];
       var cb = h.circuitBreaker || null;
       var workers = snap.workers || [];
 
-      var html = '<div class="stats-grid">';
+      var html = '';
+      // First-run hero: empty dashboard = guided next step
+      if (d.sessions.length === 0) {
+        html += '<div class="card" style="margin-bottom:14px;padding:24px 28px;background:var(--bg-subtle);border-left:3px solid var(--accent);">' +
+          '<div style="font-family:var(--font-ui);font-size:11px;letter-spacing:0.15em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:8px;">First run &rarr; magical moment in 10 seconds</div>' +
+          '<div style="font-family:var(--font-display,Lora,Georgia,serif);font-size:22px;font-weight:700;color:var(--ink);margin-bottom:8px;">Seed sample data + prove semantic recall works</div>' +
+          '<div style="font-size:13px;color:var(--ink-muted);margin-bottom:12px;line-height:1.5;max-width:640px;">agentmemory is running but hasn&rsquo;t seen any sessions yet. Run the demo command in a second terminal: it seeds 3 realistic coding sessions and proves the hybrid search finds semantically-related memories that keyword search would miss.</div>' +
+          '<pre style="display:inline-block;margin:0;padding:10px 14px;background:var(--bg);border:1px solid var(--border);border-radius:4px;font-family:var(--font-mono);font-size:12px;color:var(--ink);">npx @agentmemory/agentmemory demo</pre>' +
+          '<div style="margin-top:10px;"><a class="empty-link" href="https://github.com/rohitg00/agentmemory#quick-start" target="_blank" rel="noopener" style="font-size:12px;">Or: wire up your real agent &rarr;</a></div>' +
+          '</div>';
+      }
+      html += '<div class="stats-grid">';
       html += '<div class="stat-card"><div class="label">Sessions</div><div class="value">' + d.sessions.length + '</div><div class="sub">' + activeSessions + ' active</div></div>';
       html += '<div class="stat-card"><div class="label">Memories</div><div class="value">' + d.memories.length + '</div><div class="sub">latest versions</div></div>';
       var lessonCount = (d.lessons || []).length;
@@ -1078,7 +1181,8 @@
           var heapTotal = Math.round((snap.memory.heapTotal || 0) / 1024 / 1024);
           var rss = Math.round((snap.memory.rss || 0) / 1024 / 1024);
           var heapPct = heapTotal > 0 ? Math.round((heapUsed / heapTotal) * 100) : 0;
-          var heapColor = heapPct > 80 ? 'var(--red)' : heapPct > 60 ? 'var(--yellow)' : 'var(--green)';
+          var rssAboveFloor = rss >= 512;
+          var heapColor = (heapPct > 80 && rssAboveFloor) ? 'var(--red)' : (heapPct > 60 && rssAboveFloor) ? 'var(--yellow)' : 'var(--green)';
           html += '<div class="gauge"><span class="gauge-label">Heap</span><div class="gauge-bar"><div class="gauge-fill" style="width:' + heapPct + '%;background:' + heapColor + '"></div></div><span class="gauge-value">' + heapUsed + ' / ' + heapTotal + ' MB</span></div>';
           html += '<div class="gauge"><span class="gauge-label">RSS</span><div class="gauge-bar"><div class="gauge-fill" style="width:' + Math.min(100, Math.round(rss / 512 * 100)) + '%;background:var(--blue)"></div></div><span class="gauge-value">' + rss + ' MB</span></div>';
           if (snap.memory.external) {
@@ -1113,6 +1217,14 @@
         html += '</div>';
       }
 
+      if (snap.notes && snap.notes.length > 0) {
+        html += '<div class="card" style="margin-bottom:16px;"><div class="card-title" style="color:var(--ink-muted);">Notes (' + snap.notes.length + ')</div>';
+        snap.notes.forEach(function(n) {
+          html += '<div style="font-size:12px;color:var(--ink-muted);padding:4px 0;border-bottom:1px solid var(--border-light);font-family:var(--font-ui);">' + esc(n) + '</div>';
+        });
+        html += '</div>';
+      }
+
       html += '<div class="two-col">';
 
       html += '<div class="card"><div class="card-title">Recent Sessions</div>';
@@ -1272,6 +1384,7 @@
     function startDashboardAutoRefresh() {
       if (dashboardTimer) clearInterval(dashboardTimer);
       dashboardTimer = setInterval(function() {
+        if (pollTimer) return;
         if (state.activeTab === 'dashboard') refreshDashboard();
       }, 30000);
     }
@@ -1326,8 +1439,8 @@
       var sb = document.getElementById('graph-sidebar');
       if (!sb) return;
       var gs = state.graph.stats || {};
-      var nodeCount = gs.nodes !== undefined ? gs.nodes : (gs.nodeCount || state.graph.nodes.length);
-      var edgeCount = gs.edges !== undefined ? gs.edges : (gs.edgeCount || state.graph.edges.length);
+      var nodeCount = gs.totalNodes !== undefined ? gs.totalNodes : (gs.nodes !== undefined ? gs.nodes : (gs.nodeCount || state.graph.nodes.length));
+      var edgeCount = gs.totalEdges !== undefined ? gs.totalEdges : (gs.edges !== undefined ? gs.edges : (gs.edgeCount || state.graph.edges.length));
 
       var html = '<input type="text" class="graph-search" id="graph-search" placeholder="Search nodes...">';
 
@@ -1936,7 +2049,13 @@
       items.forEach(function(m) { types[m.type] = true; });
       var typeOptions = Object.keys(types).sort();
 
-      var html = '<div class="toolbar">';
+      var html = '<div class="card" style="margin-bottom:12px;padding:12px;background:var(--bg-subtle);">';
+      html += '<div style="font-size:13px;color:var(--ink-muted);line-height:1.5;">';
+      html += '<strong>Memories</strong> are durable facts, architecture notes, conventions, and lessons saved via <code>memory_remember</code> MCP tool or the <code>/agentmemory/remember</code> endpoint. They survive across sessions and supersede each other as v1, v2, etc. ';
+      html += '<span style="color:var(--ink-faint);">Shown: ' + items.length + ' total.</span>';
+      html += '</div></div>';
+
+      html += '<div class="toolbar">';
       html += '<input type="text" id="mem-search" placeholder="Search memories..." value="' + esc(state.memories.search) + '">';
       html += '<select id="mem-type-filter"><option value="">All types</option>';
       typeOptions.forEach(function(t) {
@@ -1945,12 +2064,20 @@
       html += '</select></div>';
 
       if (filtered.length === 0) {
-        html += '<div class="empty-state"><div class="empty-icon">&#128218;</div><p>No memories found</p></div>';
+        html += '<div class="empty-state">' +
+          '<div class="empty-icon">&#128218;</div>' +
+          '<div class="empty-title">No memories yet</div>' +
+          '<div class="empty-lead">Memories are the distilled facts agentmemory keeps across sessions &mdash; things like file paths, architectural decisions, and user preferences. Hooks capture them automatically during coding sessions; you can also save one directly.</div>' +
+          '<pre class="empty-cmd">memory_remember {\n  title: "auth uses jose middleware",\n  content: "src/middleware/auth.ts handles JWT validation",\n  type: "architecture"\n}</pre>' +
+          '<div><a class="empty-link" href="https://github.com/rohitg00/agentmemory#memories" target="_blank" rel="noopener">Memory types &rarr;</a></div>' +
+          '</div>';
       } else {
         html += '<table><tr><th>Title</th><th>Type</th><th>Strength</th><th>Version</th><th>Updated</th><th>Actions</th></tr>';
         filtered.forEach(function(m) {
           var badgeClass = TYPE_BADGES[m.type] || 'badge-muted';
-          var strength = Math.round((m.strength || 0) * 100);
+          var rawStrength = m.strength || 0;
+          var strength = Math.round(rawStrength <= 1 ? rawStrength * 100 : rawStrength * 10);
+          if (strength > 100) strength = 100;
           var barColor = strength > 70 ? 'var(--green)' : strength > 40 ? 'var(--yellow)' : 'var(--red)';
           html += '<tr>';
           var preview = (m.content || '').split('\n').slice(0, 2).join(' ').trim();
@@ -2399,6 +2526,10 @@
           html += '<div class="session-item' + (selected ? ' selected' : '') + '" data-action="select-session" data-session-id="' + esc(s.id) + '">';
           html += '<div class="session-top"><span class="session-project">' + esc(s.project ? s.project.split('/').pop() : 'Unknown') + '</span>';
           html += '<span class="badge ' + statusBadge + '">' + esc(s.status) + '</span></div>';
+          var preview = s.firstPrompt || s.summary || '';
+          if (preview) {
+            html += '<div class="session-preview" style="font-size:13px;color:var(--ink);margin:4px 0;line-height:1.4;">' + esc(truncate(preview, 140)) + '</div>';
+          }
           html += '<div class="session-meta">' + esc(s.id.slice(0, 12)) + ' &middot; ' + esc(formatTime(s.startedAt));
           html += ' &middot; ' + (s.observationCount || 0) + ' obs';
           if (s.model) html += ' &middot; ' + esc(s.model);
@@ -2417,24 +2548,96 @@
       renderSessions();
     }
 
-    function renderSessionDetail() {
+    async function renderSessionDetail() {
       var panel = document.getElementById('session-detail');
       if (!panel) return;
       var s = state.sessions.items.find(function(x) { return x.id === state.sessions.selectedId; });
       if (!s) { panel.innerHTML = ''; return; }
 
-      var html = '<div class="detail-panel"><h3>Session Details</h3>';
-      html += '<div class="detail-row"><div class="dl">Session ID</div><div class="dv" style="font-family:var(--font-mono);font-size:12px;">' + esc(s.id) + '</div></div>';
-      html += '<div class="detail-row"><div class="dl">Project</div><div class="dv">' + esc(s.project) + '</div></div>';
-      html += '<div class="detail-row"><div class="dl">Working Dir</div><div class="dv" style="font-family:var(--font-mono);font-size:12px;">' + esc(s.cwd) + '</div></div>';
-      html += '<div class="detail-row"><div class="dl">Status</div><div class="dv">' + esc(s.status) + '</div></div>';
-      html += '<div class="detail-row"><div class="dl">Started</div><div class="dv" style="font-family:var(--font-mono);font-size:12px;">' + esc(formatTime(s.startedAt)) + '</div></div>';
-      if (s.endedAt) html += '<div class="detail-row"><div class="dl">Ended</div><div class="dv" style="font-family:var(--font-mono);font-size:12px;">' + esc(formatTime(s.endedAt)) + '</div></div>';
-      html += '<div class="detail-row"><div class="dl">Observations</div><div class="dv" style="font-family:var(--font-mono);">' + (s.observationCount || 0) + '</div></div>';
-      if (s.model) html += '<div class="detail-row"><div class="dl">Model</div><div class="dv">' + esc(s.model) + '</div></div>';
-      if (s.tags && s.tags.length) html += '<div class="detail-row"><div class="dl">Tags</div><div class="dv">' + s.tags.map(function(t) { return '<span class="badge badge-muted" style="margin-right:4px;">' + esc(t) + '</span>'; }).join('') + '</div></div>';
-
-      html += '<div style="margin-top:16px;display:flex;gap:8px;">';
+      panel.innerHTML = '<div class="detail-panel"><h3>Loading session details…</h3></div>';
+
+      var obsRes = await apiGet('observations?sessionId=' + encodeURIComponent(s.id));
+      var obs = (obsRes && obsRes.observations) || [];
+
+      var typeCounts = {};
+      var toolCounts = {};
+      var fileSet = new Set();
+      var firstPromptFromObs = '';
+      obs.forEach(function(o) {
+        var t = o.type || o.hookType || 'other';
+        typeCounts[t] = (typeCounts[t] || 0) + 1;
+        var tool = o.title || o.toolName;
+        if (tool && t !== 'conversation') toolCounts[tool] = (toolCounts[tool] || 0) + 1;
+        (o.files || []).forEach(function(f) { fileSet.add(f); });
+        if (!firstPromptFromObs && (o.userPrompt || (o.type === 'conversation' && o.narrative))) {
+          firstPromptFromObs = o.userPrompt || o.narrative || '';
+        }
+      });
+
+      var durationMs = s.endedAt ? new Date(s.endedAt).getTime() - new Date(s.startedAt).getTime() : 0;
+      var durationLabel = durationMs > 0 ? (durationMs < 60000 ? (durationMs / 1000).toFixed(1) + 's' : (durationMs / 60000).toFixed(1) + 'm') : '-';
+
+      var preview = s.firstPrompt || s.summary || firstPromptFromObs || '';
+
+      var html = '<div class="detail-panel">';
+      html += '<div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;">';
+      html += '<h3 style="margin:0;">Session · ' + esc(s.project || 'Unknown') + '</h3>';
+      html += '<span class="badge ' + (s.status === 'active' ? 'badge-green' : 'badge-blue') + '">' + esc(s.status) + '</span>';
+      html += '</div>';
+
+      if (preview) {
+        html += '<div style="padding:10px 12px;margin-bottom:12px;background:var(--bg-alt);border-left:3px solid var(--accent);font-size:13px;line-height:1.5;color:var(--ink);">' + esc(truncate(preview, 600)) + '</div>';
+      }
+
+      html += '<div style="display:grid;grid-template-columns:repeat(4, 1fr);gap:10px;margin-bottom:14px;">';
+      html += '<div class="card" style="padding:10px;"><div style="font-size:10px;letter-spacing:0.08em;color:var(--ink-muted);">OBSERVATIONS</div><div style="font-size:20px;font-weight:600;">' + obs.length + '</div></div>';
+      html += '<div class="card" style="padding:10px;"><div style="font-size:10px;letter-spacing:0.08em;color:var(--ink-muted);">TOOLS USED</div><div style="font-size:20px;font-weight:600;">' + Object.keys(toolCounts).length + '</div></div>';
+      html += '<div class="card" style="padding:10px;"><div style="font-size:10px;letter-spacing:0.08em;color:var(--ink-muted);">FILES TOUCHED</div><div style="font-size:20px;font-weight:600;">' + fileSet.size + '</div></div>';
+      html += '<div class="card" style="padding:10px;"><div style="font-size:10px;letter-spacing:0.08em;color:var(--ink-muted);">DURATION</div><div style="font-size:20px;font-weight:600;">' + esc(durationLabel) + '</div></div>';
+      html += '</div>';
+
+      var topTools = Object.keys(toolCounts).sort(function(a, b) { return toolCounts[b] - toolCounts[a]; }).slice(0, 10);
+      if (topTools.length > 0) {
+        var maxC = toolCounts[topTools[0]] || 1;
+        html += '<div class="card" style="margin-bottom:12px;"><div class="card-title">Tool Invocations</div>';
+        html += '<div class="bar-chart" style="margin-top:8px;">';
+        topTools.forEach(function(t) {
+          var pct = Math.round((toolCounts[t] / maxC) * 100);
+          html += '<div class="bar-row"><span class="bar-label" style="font-family:var(--font-mono);">' + esc(t) + '</span><div class="bar-track"><div class="bar-fill" style="width:' + pct + '%;background:var(--accent);"></div></div><span class="bar-value">' + toolCounts[t] + '</span></div>';
+        });
+        html += '</div></div>';
+      }
+
+      var typeKeys = Object.keys(typeCounts).sort(function(a, b) { return typeCounts[b] - typeCounts[a]; });
+      if (typeKeys.length > 0) {
+        html += '<div class="card" style="margin-bottom:12px;"><div class="card-title">Activity Breakdown</div>';
+        html += '<div style="display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;">';
+        typeKeys.forEach(function(t) {
+          html += '<span class="badge badge-muted" style="font-family:var(--font-mono);">' + esc(t.replace(/_/g, ' ')) + ' · ' + typeCounts[t] + '</span>';
+        });
+        html += '</div></div>';
+      }
+
+      if (fileSet.size > 0) {
+        var filesArr = Array.from(fileSet).slice(0, 30);
+        html += '<div class="card" style="margin-bottom:12px;"><div class="card-title">Files</div>';
+        html += '<div style="font-size:12px;font-family:var(--font-mono);line-height:1.6;margin-top:8px;">';
+        filesArr.forEach(function(f) { html += '<div>&#8226; ' + esc(f) + '</div>'; });
+        if (fileSet.size > 30) html += '<div style="color:var(--ink-faint);">+' + (fileSet.size - 30) + ' more</div>';
+        html += '</div></div>';
+      }
+
+      html += '<div class="card" style="margin-bottom:12px;"><div class="card-title">Metadata</div>';
+      html += '<div style="font-size:12px;font-family:var(--font-mono);margin-top:8px;line-height:1.7;">';
+      html += '<div><span style="color:var(--ink-muted);">id:</span> ' + esc(s.id) + '</div>';
+      html += '<div><span style="color:var(--ink-muted);">cwd:</span> ' + esc(s.cwd || '-') + '</div>';
+      html += '<div><span style="color:var(--ink-muted);">started:</span> ' + esc(formatTime(s.startedAt)) + '</div>';
+      if (s.endedAt) html += '<div><span style="color:var(--ink-muted);">ended:</span> ' + esc(formatTime(s.endedAt)) + '</div>';
+      if (s.model) html += '<div><span style="color:var(--ink-muted);">model:</span> ' + esc(s.model) + '</div>';
+      if (s.tags && s.tags.length) html += '<div><span style="color:var(--ink-muted);">tags:</span> ' + s.tags.map(esc).join(', ') + '</div>';
+      html += '</div></div>';
+
+      html += '<div style="display:flex;gap:8px;">';
       if (s.status === 'active') {
         html += '<button class="btn btn-danger" data-action="end-session" data-session-id="' + esc(s.id) + '">End Session</button>';
       }
@@ -2478,13 +2681,24 @@
         });
       }
 
-      var html = '<div style="display:flex;gap:8px;margin-bottom:12px;">';
+      var html = '<div class="card" style="margin-bottom:12px;padding:12px;background:var(--bg-subtle);">';
+      html += '<div style="font-size:13px;color:var(--ink-muted);line-height:1.5;">';
+      html += '<strong>Lessons</strong> are portable heuristics — short imperative rules (always/never/prefer/avoid) extracted from past work. Auto-surface from JSONL imports (low confidence, tag <code>auto-import</code>), get reinforced when the agent applies them, and decay if unused. Higher confidence = more battle-tested.';
+      html += '</div></div>';
+
+      html += '<div style="display:flex;gap:8px;margin-bottom:12px;">';
       html += '<input class="search-input" type="text" placeholder="Search lessons..." value="' + esc(state.lessons.search) + '" oninput="state.lessons.search=this.value;renderLessons()" style="flex:1" />';
       html += '<span style="font-size:12px;color:var(--ink-faint);align-self:center;">' + items.length + ' lessons</span>';
       html += '</div>';
 
       if (items.length === 0) {
-        html += '<div class="empty-state"><div class="empty-icon">&#128161;</div><p>No lessons yet</p><p style="font-size:12px;color:var(--ink-faint);font-style:italic;">Lessons are extracted from crystals or saved manually via memory_lesson_save.</p></div>';
+        html += '<div class="empty-state">' +
+          '<div class="empty-icon">&#128161;</div>' +
+          '<div class="empty-title">No lessons yet</div>' +
+          '<div class="empty-lead">Lessons are confidence-scored pattern observations &mdash; things you corrected once that the agent should never do again. They persist across projects.</div>' +
+          '<pre class="empty-cmd"># Save a lesson explicitly\nmemory_lesson_save { rule, reason, confidence }\n\n# Or: Replay tab &rarr; Import JSONL auto-extracts lessons\n# from your past Claude Code sessions</pre>' +
+          '<div><a class="empty-link" href="https://github.com/rohitg00/agentmemory#lessons" target="_blank" rel="noopener">Lesson decay &amp; scoring &rarr;</a></div>' +
+          '</div>';
       } else {
         html += '<table><thead><tr><th>Lesson</th><th>Confidence</th><th>Reinforcements</th><th>Source</th><th>Project</th><th>Updated</th></tr></thead><tbody>';
         items.forEach(function(l) {
@@ -2510,7 +2724,7 @@
       el.innerHTML = '<div class="loading">Loading actions...</div>';
       var results = await Promise.all([apiGet('actions'), apiGet('frontier')]);
       state.actions.items = (results[0] && results[0].actions) || [];
-      state.actions.frontier = (results[1] && results[1].actions) || [];
+      state.actions.frontier = (results[1] && (results[1].frontier || results[1].actions)) || [];
       state.actions.loaded = true;
       renderActions();
     }
@@ -2543,7 +2757,14 @@
       html += '</div>';
 
       if (items.length === 0) {
-        html += '<div class="empty-state"><div class="empty-icon">&#9745;</div><p>No actions yet</p><p style="font-size:12px;color:var(--ink-faint);font-style:italic;">Create actions via memory_action_create MCP tool or POST /agentmemory/actions</p></div>';
+        html += '<div class="empty-state">' +
+          '<div class="empty-icon">&#9745;</div>' +
+          '<div class="empty-title">No actions tracked yet</div>' +
+          '<div class="empty-lead">Actions are follow-ups the agent surfaced during a session: <em>decisions to revisit</em>, <em>files to inspect</em>, <em>tasks blocked on input</em>. They show up here with status pending &rarr; active &rarr; done/blocked so nothing slips through between sessions.</div>' +
+          '<div class="empty-lead" style="margin-top:0;">Three ways to create them:</div>' +
+          '<pre class="empty-cmd"># 1. MCP tool (from any agent)\nmemory_action_create { title, description, priority }\n\n# 2. Curl\ncurl -X POST http://localhost:3111/agentmemory/actions \\\n  -H \'Content-Type: application/json\' \\\n  -d \'{"title":"ship v1","priority":"high"}\'\n\n# 3. Hooks auto-extract from long session bodies</pre>' +
+          '<div><a class="empty-link" href="https://github.com/rohitg00/agentmemory#actions" target="_blank" rel="noopener">Action lifecycle docs &rarr;</a></div>' +
+          '</div>';
       } else {
         html += '<table><thead><tr><th>Title</th><th>Status</th><th>Priority</th><th>Tags</th><th>Frontier</th><th>Updated</th></tr></thead><tbody>';
         items = items.slice().sort(function(a, b) { return (b.priority || 0) - (a.priority || 0); });
@@ -2569,15 +2790,13 @@
 
     async function loadCrystals() {
       var el = document.getElementById('view-crystals');
-      if (state.dashboard.loaded && state.dashboard.crystals.length) {
-        state.crystals.items = state.dashboard.crystals;
-        state.crystals.loaded = true;
-        renderCrystals();
-        return;
-      }
       el.innerHTML = '<div class="loading">Loading crystals...</div>';
-      var result = await apiGet('crystals');
-      state.crystals.items = (result && result.crystals) || [];
+      var results = await Promise.all([apiGet('crystals'), apiGet('lessons')]);
+      state.crystals.items = (results[0] && results[0].crystals) || [];
+      var lessonMap = {};
+      var lessons = (results[1] && results[1].lessons) || [];
+      lessons.forEach(function(l) { if (l && l.id) lessonMap[l.id] = l; });
+      state.crystals.lessonMap = lessonMap;
       state.crystals.loaded = true;
       renderCrystals();
     }
@@ -2586,54 +2805,89 @@
       var el = document.getElementById('view-crystals');
       var items = state.crystals.items;
       var search = state.crystals.search.toLowerCase();
+      var lessonMap = state.crystals.lessonMap || {};
 
       if (search) {
         items = items.filter(function(c) {
-          return ((c.narrative || '') + ' ' + (c.keyOutcomes || []).join(' ') + ' ' + (c.lessons || []).join(' ')).toLowerCase().indexOf(search) >= 0;
+          var lessonText = (c.lessons || [])
+            .map(function(lid) {
+              var l = lessonMap[lid];
+              return l && typeof l.content === 'string' ? l.content : lid;
+            })
+            .join(' ');
+          var filesText = (c.filesAffected || []).join(' ');
+          var haystack = [
+            c.narrative || '',
+            (c.keyOutcomes || []).join(' '),
+            lessonText,
+            filesText,
+            c.project || '',
+          ].join(' ').toLowerCase();
+          return haystack.indexOf(search) >= 0;
         });
       }
 
-      var html = '<div style="display:flex;gap:8px;margin-bottom:12px;">';
+      var html = '<div class="card" style="margin-bottom:12px;padding:12px;background:var(--bg-subtle);">';
+      html += '<div style="font-size:13px;color:var(--ink-muted);line-height:1.5;">';
+      html += '<strong>Crystals</strong> are frozen snapshots of completed work. Each crystal captures one session\'s narrative, the tools invoked (key outcomes), files touched, and lessons surfaced — a replayable summary you keep after raw observations are pruned. Auto-created on JSONL import or via <code>memory_crystallize</code>.';
+      html += '</div></div>';
+
+      html += '<div style="display:flex;gap:8px;margin-bottom:12px;">';
       html += '<input class="search-input" type="text" placeholder="Search crystals..." value="' + esc(state.crystals.search) + '" oninput="state.crystals.search=this.value;renderCrystals()" style="flex:1" />';
       html += '<span style="font-size:12px;color:var(--ink-faint);align-self:center;">' + items.length + ' crystals</span>';
       html += '</div>';
 
       if (items.length === 0) {
-        html += '<div class="empty-state"><div class="empty-icon">&#128142;</div><p>No crystals yet</p><p style="font-size:12px;color:var(--ink-faint);font-style:italic;">Crystals are created by compressing completed action chains via memory_crystallize.</p></div>';
+        html += '<div class="empty-state">' +
+          '<div class="empty-icon">&#128142;</div>' +
+          '<div class="empty-title">No crystals yet</div>' +
+          '<div class="empty-lead">Crystals are compressed action digests &mdash; the 3-line summary of what happened in a session. Generated from long conversations to give the next session fast context without re-reading everything.</div>' +
+          '<pre class="empty-cmd"># Auto: import a JSONL transcript\n#   Replay tab &rarr; Import JSONL\n\n# Manual: crystallize a specific session\nmemory_crystallize { sessionId }</pre>' +
+          '<div><a class="empty-link" href="https://github.com/rohitg00/agentmemory#crystals" target="_blank" rel="noopener">Crystal pipeline &rarr;</a></div>' +
+          '</div>';
       } else {
         items.forEach(function(c) {
-          html += '<div class="card" style="margin-bottom:12px;">';
-          html += '<div class="card-title" style="display:flex;justify-content:space-between;">';
-          html += '<span>' + esc(truncate(c.narrative, 100)) + '</span>';
-          html += '<span style="font-size:11px;color:var(--ink-faint);">' + formatTime(c.createdAt) + '</span>';
+          html += '<div class="card" style="margin-bottom:12px;border-left:3px solid var(--accent);">';
+          html += '<div style="display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:8px;">';
+          html += '<div style="flex:1;font-size:14px;font-weight:600;color:var(--ink);line-height:1.4;">' + esc(truncate(c.narrative || 'Untitled crystal', 300)) + '</div>';
+          html += '<div style="font-size:10px;color:var(--ink-faint);font-family:var(--font-mono);white-space:nowrap;">' + esc(formatTime(c.createdAt)) + '</div>';
           html += '</div>';
 
+          var pillRow = [];
+          if (c.project) pillRow.push('<span class="badge badge-muted">' + esc(c.project) + '</span>');
+          if (c.sessionId) pillRow.push('<span class="badge badge-blue" style="font-family:var(--font-mono);">' + esc(c.sessionId.slice(0, 14)) + '</span>');
+          if (c.keyOutcomes && c.keyOutcomes.length) pillRow.push('<span style="font-size:11px;color:var(--ink-muted);">' + c.keyOutcomes.length + ' tools</span>');
+          if (c.filesAffected && c.filesAffected.length) pillRow.push('<span style="font-size:11px;color:var(--ink-muted);">' + c.filesAffected.length + ' files</span>');
+          if (c.lessons && c.lessons.length) pillRow.push('<span style="font-size:11px;color:var(--ink-muted);">' + c.lessons.length + ' lessons</span>');
+          if (pillRow.length) html += '<div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;">' + pillRow.join('') + '</div>';
+
           if (c.keyOutcomes && c.keyOutcomes.length > 0) {
-            html += '<div style="margin:8px 0;"><strong style="font-size:11px;color:var(--ink-muted);">KEY OUTCOMES</strong>';
+            html += '<div style="margin:10px 0;"><div style="font-size:10px;letter-spacing:0.08em;color:var(--ink-muted);margin-bottom:4px;">TOOLS USED</div>';
+            html += '<div style="display:flex;gap:4px;flex-wrap:wrap;">';
             c.keyOutcomes.forEach(function(o) {
-              html += '<div style="font-size:12px;padding:2px 0;color:var(--ink);">&#8226; ' + esc(o) + '</div>';
+              html += '<span class="badge" style="background:var(--bg-alt);color:var(--ink);font-family:var(--font-mono);">' + esc(o) + '</span>';
             });
-            html += '</div>';
-          }
-
-          if (c.lessons && c.lessons.length > 0) {
-            html += '<div style="margin:8px 0;"><strong style="font-size:11px;color:var(--ink-muted);">LESSONS</strong>';
-            c.lessons.forEach(function(l) {
-              html += '<div style="font-size:12px;padding:2px 0;color:var(--ink);">&#128161; ' + esc(l) + '</div>';
-            });
-            html += '</div>';
+            html += '</div></div>';
           }
 
           if (c.filesAffected && c.filesAffected.length > 0) {
-            html += '<div style="margin:8px 0;font-size:11px;color:var(--ink-muted);">Files: <span style="font-family:var(--font-mono);">' + c.filesAffected.map(esc).join(', ') + '</span></div>';
-          }
-
-          if (c.sourceActionIds && c.sourceActionIds.length > 0) {
-            html += '<div style="font-size:11px;color:var(--ink-faint);">Source actions: ' + c.sourceActionIds.map(esc).join(', ') + '</div>';
+            html += '<div style="margin:10px 0;"><div style="font-size:10px;letter-spacing:0.08em;color:var(--ink-muted);margin-bottom:4px;">FILES TOUCHED</div>';
+            html += '<div style="font-size:12px;font-family:var(--font-mono);color:var(--ink);line-height:1.6;">';
+            c.filesAffected.slice(0, 10).forEach(function(f) {
+              html += '<div>&#8226; ' + esc(f) + '</div>';
+            });
+            if (c.filesAffected.length > 10) html += '<div style="color:var(--ink-faint);">+' + (c.filesAffected.length - 10) + ' more</div>';
+            html += '</div></div>';
           }
 
-          if (c.project) {
-            html += '<div style="font-size:11px;color:var(--ink-faint);margin-top:4px;">Project: ' + esc(c.project) + '</div>';
+          if (c.lessons && c.lessons.length > 0) {
+            html += '<div style="margin:10px 0;"><div style="font-size:10px;letter-spacing:0.08em;color:var(--ink-muted);margin-bottom:4px;">LESSONS SURFACED</div>';
+            c.lessons.slice(0, 8).forEach(function(lid) {
+              var content = lessonMap[lid] ? lessonMap[lid].content : lid;
+              html += '<div style="font-size:12px;padding:4px 8px;margin:2px 0;background:var(--bg-alt);border-radius:3px;color:var(--ink);line-height:1.4;">&#128161; ' + esc(content) + '</div>';
+            });
+            if (c.lessons.length > 8) html += '<div style="font-size:11px;color:var(--ink-faint);margin-top:4px;">+' + (c.lessons.length - 8) + ' more lessons</div>';
+            html += '</div>';
           }
 
           html += '</div>';
@@ -2825,13 +3079,66 @@
 
     var wsReconnectTimer = null;
     var wsRetries = 0;
-    var WS_MAX_RETRIES = 10;
+    var WS_MAX_RETRIES = 4;
     var directFailed = false;
     var directFailures = 0;
     var DIRECT_FAILURE_THRESHOLD = 2;
+    var pollTimer = null;
+    var POLL_INTERVAL_MS = 10000;
+
+    function setWsStatus(text, cls) {
+      var el = document.getElementById('ws-status');
+      if (!el) return;
+      el.textContent = text;
+      el.className = 'ws-status ' + cls;
+    }
+
+    var WS_REPROBE_EVERY_TICKS = 6;
+
+    function startPolling() {
+      if (pollTimer) return;
+      setWsStatus('polling · ' + (POLL_INTERVAL_MS / 1000) + 's', 'disconnected');
+      var tick = 0;
+      pollTimer = setInterval(function() {
+        tick++;
+        if (state.activeTab === 'dashboard') {
+          state.dashboard.loaded = false;
+          loadDashboard();
+        } else if (state.activeTab === 'memories') {
+          state.memories.loaded = false;
+          loadMemories();
+        } else if (state.activeTab === 'sessions') {
+          state.sessions.loaded = false;
+          loadSessions();
+        } else if (state.activeTab === 'activity') {
+          state.activity.loaded = false;
+          loadActivity();
+        }
+        if (tick % WS_REPROBE_EVERY_TICKS === 0) {
+          var ws = state.ws;
+          if (!ws || ws.readyState !== WebSocket.OPEN) {
+            wsRetries = 0;
+            directFailures = 0;
+            directFailed = false;
+            connectWs();
+          }
+        }
+      }, POLL_INTERVAL_MS);
+    }
+
+    function stopPolling() {
+      if (!pollTimer) return;
+      clearInterval(pollTimer);
+      pollTimer = null;
+    }
+
+    var WS_CONNECT_TIMEOUT_MS = 5000;
 
     function connectWs() {
-      if (wsRetries >= WS_MAX_RETRIES) return;
+      if (wsRetries >= WS_MAX_RETRIES) {
+        startPolling();
+        return;
+      }
       var useDirect = !directFailed;
       var ws;
       try {
@@ -2841,10 +3148,17 @@
         ws = new WebSocket(WS_URL);
         ws.__direct = false;
       }
+      var connectTimer = setTimeout(function() {
+        if (ws.readyState === WebSocket.CONNECTING) {
+          try { ws.close(); } catch {}
+        }
+      }, WS_CONNECT_TIMEOUT_MS);
       try {
         ws.onopen = function() {
+          clearTimeout(connectTimer);
           if (state.ws !== ws) return;
           wsRetries = 0;
+          stopPolling();
           if (ws.__direct) {
             directFailures = 0;
             directFailed = false;
@@ -2859,8 +3173,7 @@
               }
             }));
           }
-          document.getElementById('ws-status').textContent = 'live';
-          document.getElementById('ws-status').className = 'ws-status connected';
+          setWsStatus('live', 'connected');
         };
         ws.onmessage = function(e) {
           if (state.ws !== ws) return;
@@ -2874,6 +3187,7 @@
           } catch {}
         };
         ws.onclose = function() {
+          clearTimeout(connectTimer);
           if (state.ws !== ws) return;
           if (ws.__direct) {
             directFailures += 1;
@@ -2881,13 +3195,12 @@
               directFailed = true;
             }
           }
-          document.getElementById('ws-status').textContent = 'reconnecting...';
-          document.getElementById('ws-status').className = 'ws-status disconnected';
           wsRetries++;
           if (wsRetries < WS_MAX_RETRIES) {
+            setWsStatus('connecting...', 'disconnected');
             wsReconnectTimer = setTimeout(connectWs, 2000 + Math.min(wsRetries * 1000, 8000));
           } else {
-            document.getElementById('ws-status').textContent = 'disconnected';
+            startPolling();
           }
         };
         ws.onerror = function() {
@@ -2899,6 +3212,8 @@
         wsRetries++;
         if (wsRetries < WS_MAX_RETRIES) {
           wsReconnectTimer = setTimeout(connectWs, 2000 + Math.min(wsRetries * 1000, 8000));
+        } else {
+          startPolling();
         }
       }
     }
@@ -2966,6 +3281,151 @@
         switchTab(e.target.dataset.tab);
       }
     });
+
+    // --- Feature flag banners ---------------------------------------------
+    var FLAG_DISMISS_KEY = 'agentmemory.viewer.flags.dismissed.v1';
+    function loadDismissedFlags() {
+      try {
+        var raw = localStorage.getItem(FLAG_DISMISS_KEY);
+        return raw ? JSON.parse(raw) : {};
+      } catch (_) { return {}; }
+    }
+    function saveDismissedFlags(d) {
+      try { localStorage.setItem(FLAG_DISMISS_KEY, JSON.stringify(d)); } catch (_) {}
+    }
+    function renderFlagBanners(cfg) {
+      var host = document.getElementById('flag-banners');
+      if (!host) return;
+      var dismissed = loadDismissedFlags();
+      var banners = [];
+      // Per-flag banner (only for off flags, affecting current tab or dashboard)
+      (cfg.flags || []).forEach(function(f) {
+        if (f.enabled) return;
+        if (dismissed[f.key]) return;
+        var tabsAffected = (f.affects || []).map(function(t) { return t.toLowerCase(); });
+        if (tabsAffected.length && tabsAffected.indexOf(state.activeTab) === -1 && state.activeTab !== 'dashboard') return;
+        banners.push({
+          kind: 'warn',
+          icon: '&#9888;',
+          title: f.label,
+          keyLabel: f.key,
+          desc: f.description + (f.needsLlm ? ' Requires an LLM provider key (ANTHROPIC_API_KEY, GEMINI_API_KEY, etc.).' : ''),
+          enable: f.enableHow,
+          docs: f.docsHref,
+          dismissKey: f.key,
+        });
+      });
+      if (cfg.provider === 'noop' && !dismissed['__provider_noop']) {
+        banners.unshift({
+          kind: 'warn',
+          icon: '&#128274;',
+          title: 'No LLM provider key set',
+          keyLabel: 'ANTHROPIC_API_KEY',
+          desc: 'Compression, summarization, and graph extraction stay disabled until a key is provided.',
+          enable: 'export ANTHROPIC_API_KEY=sk-ant-...\n# then restart: npx @agentmemory/agentmemory',
+          docs: 'https://github.com/rohitg00/agentmemory#quick-start',
+          dismissKey: '__provider_noop',
+        });
+      }
+      if (cfg.embeddingProvider === 'none' && !dismissed['__embedding_none']) {
+        banners.push({
+          kind: 'info',
+          icon: '&#9881;',
+          title: 'Running in BM25-only mode',
+          keyLabel: 'OPENAI_API_KEY',
+          desc: 'Semantic vector search is off. BM25 keyword search is active and good for exact matches.',
+          enable: 'export OPENAI_API_KEY=sk-...\n# or VOYAGE_API_KEY, COHERE_API_KEY, OLLAMA_HOST',
+          docs: 'https://github.com/rohitg00/agentmemory#embedding-providers',
+          dismissKey: '__embedding_none',
+        });
+      }
+      if (banners.length === 0) { host.innerHTML = ''; return; }
+      var warnCount = banners.filter(function(b) { return b.kind === 'warn'; }).length;
+      var infoCount = banners.filter(function(b) { return b.kind === 'info'; }).length;
+      var expanded = host.getAttribute('data-expanded') === '1';
+      var pills = '';
+      if (warnCount) pills += '<span class="flag-pill">' + warnCount + ' off</span>';
+      if (infoCount) pills += '<span class="flag-pill info">' + infoCount + ' note</span>';
+      var escHtml = function(s) {
+        return String(s).replace(/[<>&"]/g, function(c) {
+          return { '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;' }[c];
+        });
+      };
+      var listHtml = banners.map(function(b) {
+        return '<div class="flag-banner ' + b.kind + '" data-flag="' + b.dismissKey + '">' +
+          '<span class="flag-icon">' + b.icon + '</span>' +
+          '<div class="flag-body">' +
+            '<div class="flag-title">' + b.title + ' <code>' + b.keyLabel + '</code></div>' +
+            '<div class="flag-desc">' + escHtml(b.desc) + '</div>' +
+            '<code class="flag-enable">' + escHtml(b.enable) + '</code>' +
+            (b.docs ? ' <a class="empty-link" href="' + b.docs + '" target="_blank" rel="noopener">Learn more &rarr;</a>' : '') +
+          '</div>' +
+          '<button class="flag-close" data-dismiss-flag="' + b.dismissKey + '" aria-label="Dismiss">&times;</button>' +
+        '</div>';
+      }).join('');
+      host.innerHTML = '<button type="button" class="flag-summary" data-action="toggle-flags" aria-expanded="' + (expanded ? 'true' : 'false') + '" aria-controls="flag-list">' +
+          pills +
+          '<span class="flag-count">Feature flags</span>' +
+          '<span style="color:var(--ink-faint);">— click to ' + (expanded ? 'collapse' : 'expand') + '</span>' +
+          '<span class="flag-toggle" aria-hidden="true">' + (expanded ? '&#9650;' : '&#9660;') + '</span>' +
+        '</button>' +
+        '<div class="flag-list' + (expanded ? ' open' : '') + '" id="flag-list">' + listHtml + '</div>';
+    }
+    async function fetchFlags() {
+      var res = await apiGet('config/flags');
+      if (!res) return;
+      state.flagsConfig = res;
+      renderFlagBanners(res);
+      updateFooter(res);
+    }
+    function updateFooter(cfg) {
+      var vEl = document.getElementById('footer-version');
+      if (vEl) vEl.textContent = 'v' + (cfg.version || '?');
+      var fbEl = document.getElementById('footer-feedback');
+      if (fbEl) {
+        var flagSummary = (cfg.flags || []).map(function(f) { return f.key + '=' + (f.enabled ? 'on' : 'off'); }).join(', ');
+        var body = encodeURIComponent(
+          '**Version:** ' + (cfg.version || '?') + '\n' +
+          '**Provider:** ' + (cfg.provider || '?') + '\n' +
+          '**Embedding:** ' + (cfg.embeddingProvider || '?') + '\n' +
+          '**Flags:** ' + flagSummary + '\n' +
+          '**User agent:** ' + navigator.userAgent + '\n\n' +
+          '### What went wrong\n\n' +
+          '(describe the issue)\n\n' +
+          '### Steps to reproduce\n\n' +
+          '1. \n2. \n3. \n'
+        );
+        fbEl.href = 'https://github.com/rohitg00/agentmemory/issues/new?title=' +
+          encodeURIComponent('[viewer] ') + '&body=' + body;
+      }
+    }
+    document.addEventListener('click', function(e) {
+      if (!(e.target instanceof Element)) return;
+      var btn = e.target.closest('[data-dismiss-flag]');
+      if (btn) {
+        e.stopPropagation();
+        var key = btn.getAttribute('data-dismiss-flag');
+        var d = loadDismissedFlags();
+        d[key] = true;
+        saveDismissedFlags(d);
+        if (state.flagsConfig) renderFlagBanners(state.flagsConfig);
+        return;
+      }
+      var toggle = e.target.closest('[data-action="toggle-flags"]');
+      if (toggle) {
+        var host = document.getElementById('flag-banners');
+        var cur = host.getAttribute('data-expanded') === '1';
+        host.setAttribute('data-expanded', cur ? '0' : '1');
+        if (state.flagsConfig) renderFlagBanners(state.flagsConfig);
+      }
+    });
+    // Re-render banners when switching tabs so tab-specific banners appear
+    var _origSwitchTab = switchTab;
+    switchTab = function(tab) {
+      _origSwitchTab(tab);
+      if (state.flagsConfig) renderFlagBanners(state.flagsConfig);
+    };
+    fetchFlags();
     document.addEventListener('click', function(e) {
       if (!(e.target instanceof Element)) return;
       var target = e.target.closest('[data-action]');