@monoes/monomindcli 1.10.32 → 1.10.34

package/dist/src/ui/dashboard-v2.html

@@ -74,7 +74,7 @@ html, body { height: 100%; background: var(--bg); color: var(--text-hi); font-fa
 #feed-sess-nav { margin-left: auto; display: flex; gap: 6px; align-items: center; }
 .sess-btn { font-size: 11px; color: var(--text-lo); background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px; cursor: pointer; transition: color 0.1s; line-height: 1.4; }
 .sess-btn:hover { color: var(--text-hi); }
-#feed-scroll { flex: 1; overflow-y: auto; }
+#feed-scroll { flex: 1; overflow-y: auto; min-width: 0; }
 #feed-scroll::-webkit-scrollbar { width: 3px; }
 #feed-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
 
@@ -425,6 +425,133 @@ html, body { height: 100%; background: var(--bg); color: var(--text-hi); font-fa
 .ph-mid { background:oklch(72% 0.18 75 / 0.15); color:oklch(78% 0.18 75); }
 .ph-lo { background:oklch(60% 0.18 25 / 0.12); color:oklch(70% 0.18 25); }
 
+/* ── ambient mode ────────────────────────────────────────── */
+#app.ambient #sidebar,
+#app.ambient #topbar,
+#app.ambient #alerts-rail,
+#app.ambient #feed-head,
+#app.ambient #feed-time-filter,
+#app.ambient #metrics-pane,
+#app.ambient #replay-bar,
+#app.ambient #feed-recap,
+#app.ambient #feed-timeline,
+#app.ambient #digest-card { display:none !important; }
+#app.ambient #main { background:var(--bg); }
+#app.ambient #view-now { height:100vh; }
+#app.ambient #feed-pane { border:none; }
+#app.ambient .feed-entry { padding: 6px 22px; }
+#app.ambient .feed-lbl { font-size:14px; }
+#app-ambient-hint { display:none; position:fixed; bottom:16px; right:16px; font-size:11px; color:var(--text-xs); z-index:300; pointer-events:none; }
+#app.ambient #app-ambient-hint { display:block; }
+
+/* ── minimap scrubber ─────────────────────────────────────── */
+#feed-minimap { position:absolute; top:0; right:0; width:8px; height:100%; z-index:10; cursor:pointer; }
+#feed-minimap-track { position:absolute; inset:0; }
+.mm-pip { position:absolute; right:1px; width:6px; border-radius:3px; min-height:3px; opacity:0.55; transition:opacity 0.1s; }
+.mm-pip:hover { opacity:1; }
+.mm-pip.mp-file  { background:oklch(60% 0.12 220); }
+.mm-pip.mp-bash  { background:oklch(72% 0.18 75); }
+.mm-pip.mp-agent { background:oklch(70% 0.15 300); }
+.mm-pip.mp-mcp   { background:oklch(65% 0.15 200); }
+.mm-pip.mp-err   { background:var(--red); opacity:0.8; }
+.mm-pip.mp-user  { background:var(--text-xs); }
+.mm-pip.mp-other { background:var(--surface-hi); }
+#mm-thumb { position:absolute; right:0; width:8px; background:oklch(100% 0 0 / 0.08); border-radius:4px; pointer-events:none; transition:top 0.05s; }
+#feed-scroll-wrap { position:relative; flex:1; overflow:hidden; display:flex; }
+#feed-scroll { flex:1; }
+
+/* ── daily digest ─────────────────────────────────────────── */
+#digest-card { display:none; flex-shrink:0; border-bottom:1px solid var(--border); background:oklch(13.5% 0.009 55); padding:10px 18px; }
+#digest-card.show { display:block; }
+.digest-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
+.digest-title { font-size:11px; font-weight:600; letter-spacing:0.07em; text-transform:uppercase; color:var(--text-lo); margin-bottom:6px; display:flex; align-items:center; gap:8px; }
+.digest-close { margin-left:auto; background:none; border:none; color:var(--text-xs); cursor:pointer; font-size:13px; line-height:1; padding:0; }
+.digest-close:hover { color:var(--text-lo); }
+.digest-stat { display:inline-flex; align-items:center; gap:4px; font-size:11px; padding:2px 8px; border-radius:8px; background:var(--surface-hi); color:var(--text-mid); white-space:nowrap; }
+
+/* ── cost leaderboard ────────────────────────────────────── */
+.lb-toggle { font-size:11px; color:var(--text-lo); background:transparent; border:1px solid transparent; border-radius:8px; padding:2px 9px; cursor:pointer; transition:color 0.1s, background 0.1s; font-family:var(--sans); }
+.lb-toggle:hover { color:var(--text-hi); }
+.lb-toggle.on { background:oklch(72% 0.18 75 / 0.1); color:var(--accent); border-color:oklch(72% 0.18 75 / 0.3); }
+.lb-table { width:100%; border-collapse:collapse; margin-top:4px; }
+.lb-table th { font-size:10px; letter-spacing:0.07em; text-transform:uppercase; color:var(--text-xs); padding:4px 6px; text-align:left; border-bottom:1px solid var(--border); }
+.lb-table td { font-size:12px; padding:7px 6px; border-bottom:1px solid oklch(25% 0.008 55 / 0.5); color:var(--text-mid); vertical-align:top; cursor:pointer; }
+.lb-table tr:hover td { background:var(--surface-hi); color:var(--text-hi); }
+.lb-rank { font-family:var(--mono); color:var(--text-xs); width:22px; }
+.lb-cost { font-family:var(--mono); color:oklch(78% 0.18 75); white-space:nowrap; }
+.lb-dur  { font-family:var(--mono); color:var(--text-lo); white-space:nowrap; }
+.lb-prompt { max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+
+/* ── session diff ─────────────────────────────────────────── */
+.diff-toggle { font-size:11px; color:var(--text-lo); background:transparent; border:1px solid transparent; border-radius:8px; padding:2px 9px; cursor:pointer; transition:color 0.1s, background 0.1s; font-family:var(--sans); }
+.diff-toggle:hover { color:var(--text-hi); }
+.diff-toggle.on { background:oklch(60% 0.12 220 / 0.1); color:oklch(65% 0.12 220); border-color:oklch(60% 0.12 220 / 0.3); }
+#diff-panel { display:none; border:1px solid var(--border); border-radius:8px; margin-bottom:16px; overflow:hidden; }
+#diff-panel.show { display:block; }
+.diff-header { display:flex; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid var(--border); background:oklch(14% 0.009 55); }
+.diff-title { font-size:11px; font-weight:600; letter-spacing:0.07em; text-transform:uppercase; color:var(--text-lo); flex:1; }
+.diff-clear { background:none; border:none; color:var(--text-xs); cursor:pointer; font-size:12px; }
+.diff-cols { display:grid; grid-template-columns:1fr 1fr; }
+.diff-col { padding:10px 14px; }
+.diff-col + .diff-col { border-left:1px solid var(--border); }
+.diff-col-title { font-size:11px; font-weight:600; color:var(--text-mid); margin-bottom:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.diff-row { display:flex; justify-content:space-between; gap:8px; padding:3px 0; border-bottom:1px solid oklch(25% 0.008 55 / 0.4); }
+.diff-row:last-child { border-bottom:none; }
+.diff-k { font-size:11px; color:var(--text-xs); }
+.diff-v { font-size:11px; font-family:var(--mono); color:var(--text-mid); }
+.diff-v.diff-hi { color:oklch(78% 0.18 75); }
+.diff-v.diff-lo { color:var(--red); }
+.diff-hint { font-size:11px; color:var(--text-xs); padding:8px 12px; text-align:center; }
+.sess-row.diff-sel-a { background:oklch(60% 0.12 220 / 0.08); outline:1px solid oklch(60% 0.12 220 / 0.3); }
+.sess-row.diff-sel-b { background:oklch(72% 0.18 75 / 0.06); outline:1px solid oklch(72% 0.18 75 / 0.3); }
+
+/* ── burn rate gauge ─────────────────────────────────────── */
+.burn-gauge-wrap { margin-top:6px; }
+.burn-gauge-row { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
+.burn-gauge-label { font-size:10px; color:var(--text-lo); width:60px; flex-shrink:0; }
+.burn-gauge-track { flex:1; height:6px; background:var(--surface-hi); border-radius:3px; overflow:hidden; }
+.burn-gauge-fill { height:100%; border-radius:3px; transition:width 0.4s, background 0.4s; }
+.burn-val { font-size:10px; font-family:var(--mono); color:var(--text-xs); white-space:nowrap; }
+.burn-rate-ok   { background:oklch(65% 0.15 150); }
+.burn-rate-warn { background:oklch(72% 0.18 75); }
+.burn-rate-hot  { background:oklch(60% 0.18 25); }
+
+/* ── swimlane timeline ────────────────────────────────────── */
+#swimlane-wrap { padding:4px 0; }
+.sw-row { display:flex; align-items:center; gap:6px; margin-bottom:3px; height:14px; }
+.sw-lbl { font-size:10px; color:var(--text-xs); width:60px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right; cursor:pointer; }
+.sw-lbl:hover { color:var(--text-lo); }
+.sw-track { flex:1; height:10px; background:var(--surface-hi); border-radius:3px; position:relative; overflow:hidden; }
+.sw-bar { position:absolute; top:0; height:100%; border-radius:2px; opacity:0.8; }
+.sw-gap { position:absolute; top:0; height:100%; background:var(--bg); width:2px; }
+
+/* ── focus mode ──────────────────────────────────────────── */
+#feed-pane.focus-mode .feed-entry.k-tool:not(.errored) { display:none; }
+#feed-pane.focus-mode .feed-group { display:none; }
+.focus-btn { font-size:10px; color:var(--text-lo); background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:2px 7px; cursor:pointer; transition:color 0.15s, border-color 0.15s; line-height:1.4; white-space:nowrap; }
+.focus-btn:hover { color:var(--text-hi); }
+.focus-btn.on { color:oklch(60% 0.12 220); border-color:oklch(60% 0.12 220 / 0.5); }
+
+/* ── session notes ───────────────────────────────────────── */
+.sess-notes-wrap { margin-top:8px; }
+.sess-notes-toggle { font-size:11px; color:var(--text-xs); background:none; border:none; cursor:pointer; padding:0; display:flex; align-items:center; gap:5px; }
+.sess-notes-toggle:hover { color:var(--text-lo); }
+.sess-notes-toggle.has-note { color:oklch(72% 0.14 220); }
+.sess-notes-area { display:none; margin-top:6px; }
+.sess-notes-area.open { display:block; }
+textarea.sess-note-input { width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); color:var(--text-mid); font-size:12px; font-family:var(--sans); padding:6px 8px; resize:vertical; min-height:56px; outline:none; transition:border-color 0.1s; }
+textarea.sess-note-input:focus { border-color:var(--accent); }
+.sess-note-saved { font-size:10px; color:var(--text-xs); margin-top:3px; height:14px; }
+
+/* ── export button ───────────────────────────────────────── */
+.sess-copy-btn.dl { }
+
+/* ── loop run history sparkline ──────────────────────────── */
+.loop-sparkline { display:flex; gap:2px; align-items:flex-end; height:20px; margin-top:4px; }
+.lsp-bar { width:5px; border-radius:2px 2px 0 0; background:var(--accent); opacity:0.6; min-height:3px; }
+.lsp-bar.err { background:var(--red); opacity:0.8; }
+.le-spark { display:flex; align-items:center; gap:8px; }
+
 /* ── budget cap ──────────────────────────────────────────── */
 #budget-modal { display:none; position:fixed; inset:0; z-index:200; background:oklch(5% 0 0 / 0.6); align-items:center; justify-content:center; }
 #budget-modal.open { display:flex; }
@@ -533,6 +660,8 @@ html, body { height: 100%; background: var(--bg); color: var(--text-hi); font-fa
             <button class="live-tail-btn" id="btn-live-tail" onclick="toggleLiveTail()" title="Toggle live tail (auto-scroll + 5s refresh)">⬤ Tail</button>
             <button class="sess-copy-btn" id="btn-replay" onclick="replayToggle()" title="Replay session event-by-event">⏵ Replay</button>
             <button class="sess-copy-btn" id="btn-copy-sess" onclick="copySession()" title="Copy session as markdown">⎘ Copy</button>
+            <button class="sess-copy-btn" id="btn-export-sess" onclick="exportSession()" title="Download session as .md file">⬇ Export</button>
+            <button class="focus-btn" id="btn-focus" onclick="toggleFocusMode()" title="Focus mode: show only user messages + errors">⊡ Focus</button>
             <button class="density-btn" id="btn-density" onclick="toggleDensity()" title="Toggle compact view">⊟</button>
             <button class="sess-btn" onclick="toggleFeedSearch()" title="Search in feed (/)">⌕</button>
             <button class="sess-btn" id="btn-prev-sess" onclick="prevSession()" title="Older session">‹</button>
@@ -566,10 +695,20 @@ html, body { height: 100%; background: var(--bg); color: var(--text-hi); font-fa
           <button class="tf-btn" data-tf="1h" onclick="setFeedTimeFilter('1h')">1h</button>
           <button class="tf-btn" data-tf="6h" onclick="setFeedTimeFilter('6h')">6h</button>
           <button class="tf-btn" data-tf="24h" onclick="setFeedTimeFilter('24h')">24h</button>
-          <span class="kb-hint"><kbd>J</kbd><kbd>K</kbd> navigate &nbsp;<kbd>↵</kbd> detail &nbsp;<kbd>/</kbd> find &nbsp;<kbd>G</kbd> live &nbsp;<kbd>⌘K</kbd> search</span>
+          <span class="kb-hint"><kbd>J</kbd><kbd>K</kbd> navigate &nbsp;<kbd>↵</kbd> detail &nbsp;<kbd>/</kbd> find &nbsp;<kbd>G</kbd> live &nbsp;<kbd>A</kbd> ambient &nbsp;<kbd>⌘K</kbd> search</span>
+        </div>
+        <div id="digest-card">
+          <div class="digest-title">Today's Digest <button class="digest-close" onclick="dismissDigest()" title="Dismiss">✕</button></div>
+          <div class="digest-row" id="digest-stats"></div>
         </div>
-        <div id="feed-scroll">
-          <div id="feed-content"><div class="loading-txt">Loading activity…</div></div>
+        <div id="feed-scroll-wrap">
+          <div id="feed-scroll">
+            <div id="feed-content"><div class="loading-txt">Loading activity…</div></div>
+          </div>
+          <div id="feed-minimap" title="Click to jump · events map">
+            <div id="feed-minimap-track"></div>
+            <div id="mm-thumb"></div>
+          </div>
         </div>
       </div>
 
@@ -599,6 +738,14 @@ html, body { height: 100%; background: var(--bg); color: var(--text-hi); font-fa
           <div class="m-group-title">Tool Usage</div>
           <div class="loading-txt">—</div>
         </div>
+        <div id="m-burn">
+          <div class="m-group-title">Burn Rate</div>
+          <div class="loading-txt">—</div>
+        </div>
+        <div id="m-swimlane">
+          <div class="m-group-title">Session Lanes</div>
+          <div class="loading-txt">—</div>
+        </div>
       </div>
     </div>
 
@@ -617,11 +764,23 @@ html, body { height: 100%; background: var(--bg); color: var(--text-hi); font-fa
     <!-- SESSIONS -->
     <div class="view" id="view-sessions">
       <div class="vscroll">
-        <div style="display:flex;align-items:baseline;gap:10px;margin-bottom:4px">
+        <div style="display:flex;align-items:center;gap:8px;margin-bottom:4px;flex-wrap:wrap">
           <div class="pg-title" style="margin-bottom:0">Sessions</div>
           <button id="sess-star-filter" onclick="toggleSessStarFilter()" title="Show only bookmarked sessions">☆ Starred</button>
+          <button class="lb-toggle" id="btn-leaderboard" onclick="toggleLeaderboard()" title="Cost leaderboard">⬆ Leaderboard</button>
+          <button class="diff-toggle" id="btn-diff" onclick="toggleDiffMode()" title="Compare two sessions">⇄ Compare</button>
         </div>
         <div class="pg-sub" id="sess-pg-sub">Recent Claude Code sessions for this project</div>
+        <div id="diff-panel">
+          <div class="diff-header"><span class="diff-title">Session Comparison</span><button class="diff-clear" onclick="clearDiff()" title="Clear">✕</button></div>
+          <div class="diff-hint" id="diff-hint">Click two sessions below to compare them</div>
+          <div class="diff-cols" id="diff-cols" style="display:none"></div>
+        </div>
+        <div id="lb-panel" style="display:none;margin-bottom:16px">
+          <table class="lb-table"><thead><tr>
+            <th class="lb-rank">#</th><th>Session</th><th class="lb-cost">Cost</th><th class="lb-dur">Duration</th>
+          </tr></thead><tbody id="lb-body"></tbody></table>
+        </div>
         <div id="sess-content" class="sess-list"><div class="loading-txt">Loading…</div></div>
       </div>
     </div>
@@ -670,6 +829,7 @@ html, body { height: 100%; background: var(--bg); color: var(--text-hi); font-fa
 
   </div><!-- /view-wrap -->
 </div><!-- /main -->
+<div id="app-ambient-hint">Press A to exit ambient mode</div>
 </div><!-- /app -->
 
 <!-- budget modal (fixed overlay, outside app) -->
@@ -978,7 +1138,9 @@ function renderFeedEvents(events, silent) {
 
   // update timeline + breakdown with all original events (before time-filter)
   buildTimeline(filtered);
-  buildBreakdown(filtered);
+  buildBreakdownByName(filtered);
+  buildMinimap(filtered);
+  updateBurnRate(filtered);
   // session recap card
   buildRecap(filtered, allSessions[sessionIdx]);
 }
@@ -1280,6 +1442,7 @@ function renderMiniSessions(sessions) {
       <div class="ms-meta">${relTime(s.lastTs || s.mtime)}</div>
     </div>`).join('');
   document.getElementById('m-sessions').innerHTML = `<div class="m-group-title">Recent Sessions</div>${items}`;
+  buildSwimlane();
 }
 
 // ── projects ───────────────────────────────────────────────
@@ -1287,8 +1450,8 @@ async function renderProjects() {
   const el = document.getElementById('proj-content');
   el.innerHTML = '<div class="loading-txt">Loading…</div>';
   try {
-    const data = await apiFetch('/api/data?dir=' + enc(ORIGINAL_DIR));
-    allProjects = data?.allProjects || [];
+    const data = await apiFetch('/api/projects');
+    allProjects = data?.projects || [];
     document.getElementById('bdg-projects').textContent = allProjects.length || '—';
     document.getElementById('proj-pg-sub').textContent =
       allProjects.length + ' project' + (allProjects.length !== 1 ? 's' : '') + ' found';
@@ -1351,7 +1514,8 @@ async function renderSessions() {
       el.innerHTML = '<div class="empty"><div class="empty-ico">☆</div><div>No bookmarked sessions</div></div>';
       return;
     }
-    el.innerHTML = toShow.map(s => {
+    const sessData = JSON.stringify(toShow).replace(/'/g, '&#39;');
+    el.innerHTML = toShow.map((s, idx) => {
       const dur  = s.totalDurationMs ? fmtDur(s.totalDurationMs) : '';
       const msgs = s.totalMessages ? s.totalMessages + ' msg' : '';
       const cost = typeof s.totalCost === 'number' ? '$' + s.totalCost.toFixed(2)
@@ -1360,7 +1524,10 @@ async function renderSessions() {
       const summaries = (s.summaries || []).slice(0, 2).map(sm => { const t = typeof sm === 'string' ? sm : (sm.summary || sm.text || String(sm)); return `<span class="sr-tag">${esc(t.slice(0, 40))}</span>`; }).join('');
       const autoTags = (allTags.sessionTags.get(s.id) || []).map(t => `<span class="sr-autotag">${esc(t)}</span>`).join('');
       const isStarred = bookmarks.has(s.id);
-      return `<div class="sess-row" onclick="jumpToSession('${esc(s.id)}')">
+      const sData = JSON.stringify(s).replace(/'/g, '&#39;');
+      const note = getSessNote(s.id);
+      const hasNote = !!note;
+      return `<div class="sess-row" data-sess-idx="${idx}" onclick="diffMode ? diffSelectSession(JSON.parse(this.dataset.sessData || '{}'), this) : jumpToSession('${esc(s.id)}')" data-sess-data='${sData}'>
         <div class="sr-top">
           <div class="sr-prompt">${esc(s.lastPrompt || s.id)}</div>
           <div class="sr-time">${relTime(s.lastTs || s.mtime)}</div>
@@ -1369,12 +1536,21 @@ async function renderSessions() {
         </div>
         <div class="sr-meta">${esc(meta)}</div>
         ${(summaries || autoTags) ? `<div class="sr-tags">${summaries}${autoTags}</div>` : ''}
+        <div class="sess-notes-wrap" onclick="event.stopPropagation()">
+          <button class="sess-notes-toggle${hasNote ? ' has-note' : ''}" onclick="toggleSessNote('${esc(s.id)}',this)">✎ ${hasNote ? 'Note' : 'Add note'}</button>
+          <div class="sess-notes-area" id="snote-${esc(s.id)}">
+            <textarea class="sess-note-input" rows="2" placeholder="Session note…" oninput="saveSessNote('${esc(s.id)}',this.value,this.closest('.sess-notes-wrap').querySelector('.sess-notes-toggle'),this.closest('.sess-row').querySelector('.sess-note-saved'))">${esc(note)}</textarea>
+            <div class="sess-note-saved"></div>
+          </div>
+        </div>
       </div>`;
     }).join('');
     // prepend tag filter bar if there are common tags
     if (allTags.common.size > 1) {
       el.innerHTML = buildTagFilterBar(toShow) + el.innerHTML;
     }
+    buildDigest();
+    if (leaderboardOpen) renderLeaderboard();
   } catch (err) {
     el.innerHTML = '<div class="empty">Could not load sessions: ' + esc(err.message) + '</div>';
   }
@@ -1492,9 +1668,9 @@ async function renderGlobalFeed() {
   const el = document.getElementById('gf-content');
   el.innerHTML = '<div class="loading-txt">Loading all projects…</div>';
   try {
-    // fetch project list using ORIGINAL_DIR
-    const data = await apiFetch('/api/data?dir=' + enc(ORIGINAL_DIR));
-    const projects = (data?.allProjects || []).slice(0, 8);
+    // fetch project list
+    const data = await apiFetch('/api/projects');
+    const projects = (data?.projects || []).slice(0, 8);
     if (!projects.length) {
       el.innerHTML = '<div class="empty"><div class="empty-ico">⊕</div><div>No projects found</div></div>';
       return;
@@ -1695,6 +1871,423 @@ function healthClass(score) {
   return 'ph-lo';
 }
 
+// ── feature 7: tool call frequency chart (by name) ─────────
+function buildBreakdownByName(events) {
+  const counts = {};
+  for (const ev of events) {
+    if (ev.kind !== 'tool') continue;
+    const name = (ev.name || ev.cat || 'other').replace(/^mcp__.*$/, 'MCP').replace(/^m__.*$/, 'MCP');
+    counts[name] = (counts[name] || 0) + 1;
+  }
+  const total = Object.values(counts).reduce((a, b) => a + b, 0);
+  if (!total) {
+    document.getElementById('m-breakdown').innerHTML =
+      '<div class="m-group-title">Tool Usage</div><div class="loading-txt" style="padding:6px 0">—</div>';
+    return;
+  }
+  const CAT_COLOR = { Bash:'oklch(72% 0.18 75)', Read:'oklch(60% 0.12 220)', Edit:'oklch(65% 0.15 160)', Write:'oklch(65% 0.15 160)', Agent:'oklch(70% 0.15 300)', Task:'oklch(65% 0.15 280)', MCP:'oklch(65% 0.15 200)', WebFetch:'oklch(60% 0.12 195)', WebSearch:'oklch(60% 0.12 195)' };
+  const getColor = n => CAT_COLOR[n] || 'var(--text-xs)';
+  const sorted = Object.entries(counts).sort((a, b) => b[1] - a[1]).slice(0, 8);
+  const rows = sorted.map(([name, cnt]) => {
+    const pct = Math.round(cnt / total * 100);
+    return `<div class="tb-row">
+      <div class="tb-lbl" style="width:54px" title="${esc(name)}">${esc(name.length > 8 ? name.slice(0,7)+'…' : name)}</div>
+      <div class="tb-bar-wrap"><div class="tb-bar" style="width:${pct}%;background:${getColor(name)}"></div></div>
+      <div class="tb-count">${cnt}</div>
+    </div>`;
+  }).join('');
+  document.getElementById('m-breakdown').innerHTML =
+    `<div class="m-group-title">Tool Usage <span style="font-size:10px;color:var(--text-xs);font-weight:400">${total} calls</span></div><div class="m-breakdown">${rows}</div>`;
+}
+
+// ── feature 8: ambient mode ────────────────────────────────
+function toggleAmbient() {
+  document.getElementById('app').classList.toggle('ambient');
+}
+
+// ── feature 9: daily digest ────────────────────────────────
+const DIGEST_DISMISSED_KEY = 'mm-digest-dismissed';
+
+function buildDigest() {
+  const todayKey = new Date().toISOString().slice(0, 10);
+  if (localStorage.getItem(DIGEST_DISMISSED_KEY) === todayKey) return;
+  if (!allSessions.length) return;
+
+  const todayStart = new Date(); todayStart.setHours(0, 0, 0, 0);
+  const todaySessions = allSessions.filter(s => {
+    const t = s.lastTs || s.mtime;
+    return t && new Date(typeof t === 'number' ? t : t).getTime() >= todayStart.getTime();
+  });
+  if (!todaySessions.length) return;
+
+  const totalCost = todaySessions.reduce((a, s) => a + (s.totalCost || 0), 0);
+  const totalTools = todaySessions.reduce((a, s) => a + (s.toolCalls || 0), 0);
+  const totalMsgs = todaySessions.reduce((a, s) => a + (s.userMessages || 0), 0);
+  const longestMs = Math.max(...todaySessions.map(s => s.totalDurationMs || 0));
+
+  // top tags from today's sessions using the auto-tag system
+  const tagFreq = {};
+  for (const s of todaySessions) {
+    for (const t of (allTags.sessionTags.get(s.id) || [])) tagFreq[t] = (tagFreq[t] || 0) + 1;
+  }
+  const themes = Object.entries(tagFreq).sort((a,b) => b[1]-a[1]).slice(0, 3).map(e => e[0]);
+
+  const stats = [
+    `${todaySessions.length} session${todaySessions.length > 1 ? 's' : ''}`,
+    totalCost > 0 ? `$${totalCost.toFixed(2)} spent` : null,
+    totalTools > 0 ? `${totalTools} tool calls` : null,
+    totalMsgs > 0 ? `${totalMsgs} messages` : null,
+    longestMs > 0 ? `${fmtDur(longestMs)} longest` : null,
+    ...themes.map(t => `#${t}`),
+  ].filter(Boolean);
+
+  document.getElementById('digest-stats').innerHTML =
+    stats.map(s => `<span class="digest-stat">${esc(s)}</span>`).join('');
+  document.getElementById('digest-card').classList.add('show');
+}
+
+function dismissDigest() {
+  const todayKey = new Date().toISOString().slice(0, 10);
+  localStorage.setItem(DIGEST_DISMISSED_KEY, todayKey);
+  document.getElementById('digest-card').classList.remove('show');
+}
+
+// ── feature 10: minimap scrubber ──────────────────────────
+function buildMinimap(events) {
+  const track = document.getElementById('feed-minimap-track');
+  const thumb = document.getElementById('mm-thumb');
+  const scroll = document.getElementById('feed-scroll');
+  if (!track || !thumb || !scroll) return;
+
+  // feed renders newest-first (reversed), so reverse events to match visual order
+  const tools = [...events].reverse().filter(ev => ev.kind === 'tool' || ev.kind === 'user');
+  if (!tools.length) { track.innerHTML = ''; return; }
+
+  const CAT_CLS = { file:'mp-file', bash:'mp-bash', agent:'mp-agent', mcp:'mp-mcp', user:'mp-user' };
+  const H = scroll.clientHeight || 400;
+  const N = tools.length;
+  track.innerHTML = tools.map((ev, i) => {
+    const top = Math.round((i / N) * H);
+    const h = Math.max(3, Math.round((1 / N) * H * 0.7));
+    const cls = ev._errored ? 'mp-err' : (ev.kind === 'user' ? 'mp-user' : (CAT_CLS[ev.cat] || 'mp-other'));
+    return `<div class="mm-pip ${cls}" style="top:${top}px;height:${h}px" onclick="minimapJump(${i},${N})"></div>`;
+  }).join('');
+
+  // sync thumb
+  const updateThumb = () => {
+    const ratio = scroll.scrollHeight > H ? scroll.scrollTop / (scroll.scrollHeight - H) : 0;
+    const thH = Math.max(20, Math.round(H * (H / Math.max(scroll.scrollHeight, H + 1))));
+    thumb.style.height = thH + 'px';
+    thumb.style.top = Math.round(ratio * (H - thH)) + 'px';
+  };
+  scroll.removeEventListener('scroll', scroll._mmListener || (() => {}));
+  scroll._mmListener = updateThumb;
+  scroll.addEventListener('scroll', scroll._mmListener);
+  updateThumb();
+}
+
+function minimapJump(idx, total) {
+  const scroll = document.getElementById('feed-scroll');
+  if (!scroll) return;
+  scroll.scrollTop = Math.round((idx / total) * scroll.scrollHeight);
+}
+
+// ── feature 11: cost leaderboard ──────────────────────────
+let leaderboardOpen = false;
+
+function toggleLeaderboard() {
+  leaderboardOpen = !leaderboardOpen;
+  document.getElementById('btn-leaderboard').classList.toggle('on', leaderboardOpen);
+  const panel = document.getElementById('lb-panel');
+  panel.style.display = leaderboardOpen ? 'block' : 'none';
+  if (leaderboardOpen) renderLeaderboard();
+}
+
+function renderLeaderboard() {
+  const sorted = [...allSessions]
+    .filter(s => typeof s.totalCost === 'number' && s.totalCost > 0)
+    .sort((a, b) => b.totalCost - a.totalCost)
+    .slice(0, 15);
+  const body = document.getElementById('lb-body');
+  if (!sorted.length) { body.innerHTML = '<tr><td colspan="4" style="text-align:center;color:var(--text-xs);padding:12px">No cost data yet</td></tr>'; return; }
+  body.innerHTML = sorted.map((s, i) => {
+    const cost = '$' + s.totalCost.toFixed(2);
+    const dur = s.totalDurationMs ? fmtDur(s.totalDurationMs) : '—';
+    const prompt = s.lastPrompt || s.id;
+    return `<tr onclick="jumpToSession('${esc(s.id)}')" title="${esc(prompt)}">
+      <td class="lb-rank">${i + 1}</td>
+      <td class="lb-prompt">${esc(prompt.slice(0, 60))}</td>
+      <td class="lb-cost">${cost}</td>
+      <td class="lb-dur">${dur}</td>
+    </tr>`;
+  }).join('');
+}
+
+// ── feature 12: session diff ──────────────────────────────
+let diffMode = false;
+let diffSelA = null; let diffSelB = null;
+
+function toggleDiffMode() {
+  diffMode = !diffMode;
+  document.getElementById('btn-diff').classList.toggle('on', diffMode);
+  const panel = document.getElementById('diff-panel');
+  panel.classList.toggle('show', diffMode);
+  if (!diffMode) clearDiff();
+}
+
+function clearDiff() {
+  diffSelA = null; diffSelB = null;
+  document.getElementById('diff-hint').style.display = '';
+  document.getElementById('diff-cols').style.display = 'none';
+  document.getElementById('diff-cols').innerHTML = '';
+  document.querySelectorAll('.sess-row.diff-sel-a, .sess-row.diff-sel-b').forEach(el => {
+    el.classList.remove('diff-sel-a', 'diff-sel-b');
+  });
+}
+
+function diffSelectSession(sess, el) {
+  if (!diffMode) return;
+  if (diffSelA && diffSelA.id === sess.id) {
+    diffSelA = null;
+    el.classList.remove('diff-sel-a');
+    document.getElementById('diff-hint').style.display = '';
+    document.getElementById('diff-cols').style.display = 'none';
+    return;
+  }
+  if (diffSelB && diffSelB.id === sess.id) {
+    diffSelB = null;
+    el.classList.remove('diff-sel-b');
+    renderDiff();
+    return;
+  }
+  if (!diffSelA) {
+    diffSelA = sess;
+    el.classList.add('diff-sel-a');
+  } else if (!diffSelB) {
+    diffSelB = sess;
+    el.classList.add('diff-sel-b');
+  } else {
+    // replace B with new selection
+    document.querySelectorAll('.sess-row.diff-sel-b').forEach(e => e.classList.remove('diff-sel-b'));
+    diffSelB = sess;
+    el.classList.add('diff-sel-b');
+  }
+  if (diffSelA && diffSelB) {
+    renderDiff();
+  } else {
+    document.getElementById('diff-hint').textContent = diffSelA ? 'Now click a second session to compare' : 'Click two sessions below to compare them';
+    document.getElementById('diff-hint').style.display = '';
+    document.getElementById('diff-cols').style.display = 'none';
+  }
+}
+
+function renderDiff() {
+  if (!diffSelA || !diffSelB) return;
+  document.getElementById('diff-hint').style.display = 'none';
+  const cols = document.getElementById('diff-cols');
+  cols.style.display = '';
+  const fmt = (a, b, key, prefix = '') => {
+    const va = a[key], vb = b[key];
+    if (va == null && vb == null) return '';
+    const fa = prefix + (va != null ? va : '—');
+    const fb = prefix + (vb != null ? vb : '—');
+    const hiA = va != null && vb != null && va > vb ? ' diff-hi' : (va != null && vb != null && va < vb ? ' diff-lo' : '');
+    const hiB = va != null && vb != null && vb > va ? ' diff-hi' : (va != null && vb != null && vb < va ? ' diff-lo' : '');
+    return [fa, hiA, fb, hiB];
+  };
+
+  const diffCol = (s) => {
+    const cost = typeof s.totalCost === 'number' ? '$' + s.totalCost.toFixed(2) : '—';
+    const dur = s.totalDurationMs ? fmtDur(s.totalDurationMs) : '—';
+    const tools = s.toolCalls != null ? s.toolCalls : '—';
+    const msgs = s.userMessages != null ? s.userMessages : '—';
+    const errs = s.errors != null ? s.errors : '—';
+    const prompt = (s.lastPrompt || s.id || '').slice(0, 50);
+    return { cost, dur, tools, msgs, errs, prompt, s };
+  };
+
+  const a = diffCol(diffSelA), b = diffCol(diffSelB);
+  const rows = [
+    ['Cost', a.cost, b.cost, typeof diffSelA.totalCost === 'number' && typeof diffSelB.totalCost === 'number' ? (diffSelA.totalCost > diffSelB.totalCost ? ['diff-hi','diff-lo'] : diffSelA.totalCost < diffSelB.totalCost ? ['diff-lo','diff-hi'] : ['','']) : ['','']],
+    ['Duration', a.dur, b.dur, ['','']],
+    ['Tool calls', a.tools, b.tools, typeof a.tools === 'number' && typeof b.tools === 'number' ? (a.tools > b.tools ? ['diff-hi','diff-lo'] : a.tools < b.tools ? ['diff-lo','diff-hi'] : ['','']) : ['','']],
+    ['Messages', a.msgs, b.msgs, ['','']],
+    ['Errors', a.errs, b.errs, ['','']],
+  ];
+
+  const colHtml = (idx) => `<div class="diff-col">
+    <div class="diff-col-title">${esc(idx === 0 ? a.prompt : b.prompt)}</div>
+    ${rows.map(([k, va, vb, cls]) => `<div class="diff-row">
+      <span class="diff-k">${k}</span>
+      <span class="diff-v ${cls[idx]}">${esc(idx === 0 ? va : vb)}</span>
+    </div>`).join('')}
+  </div>`;
+
+  cols.innerHTML = colHtml(0) + colHtml(1);
+}
+
+// ── feature 13: export session as .md file ────────────────
+async function exportSession() {
+  const btn = document.getElementById('btn-export-sess');
+  const sess = allSessions[sessionIdx];
+  if (!sess?.file) return;
+  try {
+    btn.textContent = '…';
+    const data = await apiFetch('/api/session?dir=' + enc(DIR) + '&file=' + enc(sess.file) + '&limit=300');
+    const events = data.events || [];
+    const lines = [
+      `# Session: ${sess.lastPrompt || sess.id}`,
+      `> ${new Date(sess.lastTs || sess.mtime).toLocaleString()}`,
+      sess.totalCost != null ? `> Cost: $${sess.totalCost.toFixed(2)}` : '',
+      sess.totalDurationMs ? `> Duration: ${fmtDur(sess.totalDurationMs)}` : '',
+      '',
+    ].filter(s => s !== null);
+    for (const ev of events) {
+      if (ev.kind === 'user' && ev.text?.trim()) {
+        lines.push(`\n## ${ev.text.trim().slice(0, 80)}`);
+        if (ev.ts) lines.push(`_${new Date(ev.ts).toLocaleTimeString()}_`);
+      } else if (ev.kind === 'tool') {
+        const label = ev.label || ev.name || ev.cat;
+        lines.push(`- \`${ev.name || ev.cat}\`${label ? ': ' + label : ''}${ev._errored ? ' ⚠ error' : ''}`);
+      }
+    }
+    lines.push('', `---`, `_Exported from monomind dashboard_`);
+    const blob = new Blob([lines.join('\n')], { type: 'text/markdown' });
+    const a = document.createElement('a');
+    a.href = URL.createObjectURL(blob);
+    a.download = `session-${sess.id.slice(0, 8)}.md`;
+    a.click();
+    URL.revokeObjectURL(a.href);
+    btn.textContent = '✓ Saved';
+    setTimeout(() => { btn.textContent = '⬇ Export'; }, 1800);
+  } catch (err) {
+    btn.textContent = '✕ Error';
+    setTimeout(() => { btn.textContent = '⬇ Export'; }, 1500);
+  }
+}
+
+// ── feature 14: focus mode ────────────────────────────────
+let focusMode = false;
+function toggleFocusMode() {
+  focusMode = !focusMode;
+  document.getElementById('feed-pane').classList.toggle('focus-mode', focusMode);
+  document.getElementById('btn-focus').classList.toggle('on', focusMode);
+  document.getElementById('btn-focus').title = focusMode ? 'Exit focus mode' : 'Focus mode: user messages + errors only';
+}
+
+// ── feature 15: session notes ─────────────────────────────
+const NOTES_KEY = 'mm-sess-notes';
+function getAllNotes() {
+  try { return JSON.parse(localStorage.getItem(NOTES_KEY) || '{}'); } catch { return {}; }
+}
+function getSessNote(id) { return getAllNotes()[id] || ''; }
+function saveSessNote(id, text, toggleBtn, savedEl) {
+  const all = getAllNotes();
+  if (text.trim()) all[id] = text; else delete all[id];
+  localStorage.setItem(NOTES_KEY, JSON.stringify(all));
+  if (toggleBtn) {
+    toggleBtn.classList.toggle('has-note', !!text.trim());
+    toggleBtn.textContent = '✎ ' + (text.trim() ? 'Note' : 'Add note');
+  }
+  if (savedEl) {
+    savedEl.textContent = 'Saved';
+    clearTimeout(savedEl._t);
+    savedEl._t = setTimeout(() => { savedEl.textContent = ''; }, 1200);
+  }
+}
+function toggleSessNote(id, btn) {
+  const area = document.getElementById('snote-' + id);
+  if (!area) return;
+  const open = area.classList.toggle('open');
+  if (open) { const ta = area.querySelector('textarea'); if (ta) { ta.focus(); ta.setSelectionRange(ta.value.length, ta.value.length); } }
+}
+
+// ── feature 16: burn rate gauge ───────────────────────────
+let burnRateEvents = [];
+let burnRateTimer = null;
+
+function updateBurnRate(events) {
+  burnRateEvents = events;
+  renderBurnGauge();
+}
+
+function renderBurnGauge() {
+  const el = document.getElementById('m-burn');
+  if (!el) return;
+  const tools = burnRateEvents.filter(ev => ev.kind === 'tool' && ev.ts);
+  if (tools.length < 2) {
+    el.innerHTML = '<div class="m-group-title">Burn Rate</div><div class="loading-txt" style="padding:4px 0">—</div>';
+    return;
+  }
+  const now = Date.now();
+  // calls in last 5 min, 15 min, 60 min
+  const t5  = tools.filter(e => now - new Date(e.ts).getTime() < 300000).length;
+  const t15 = tools.filter(e => now - new Date(e.ts).getTime() < 900000).length;
+  const t60 = tools.filter(e => now - new Date(e.ts).getTime() < 3600000).length;
+  const rate5  = (t5  / 5).toFixed(1);   // calls/min
+  const rate15 = (t15 / 15).toFixed(1);
+  const rate60 = (t60 / 60).toFixed(1);
+  const maxRate = 20; // calls/min considered "hot"
+  const pct = v => Math.min(100, Math.round((parseFloat(v) / maxRate) * 100));
+  const cls = v => parseFloat(v) < 4 ? 'burn-rate-ok' : parseFloat(v) < 10 ? 'burn-rate-warn' : 'burn-rate-hot';
+  el.innerHTML = `<div class="m-group-title">Burn Rate <span style="font-size:10px;color:var(--text-xs);font-weight:400">calls/min</span></div>
+  <div class="burn-gauge-wrap">
+    <div class="burn-gauge-row"><div class="burn-gauge-label">5 min</div><div class="burn-gauge-track"><div class="burn-gauge-fill ${cls(rate5)}" style="width:${pct(rate5)}%"></div></div><div class="burn-val">${rate5}</div></div>
+    <div class="burn-gauge-row"><div class="burn-gauge-label">15 min</div><div class="burn-gauge-track"><div class="burn-gauge-fill ${cls(rate15)}" style="width:${pct(rate15)}%"></div></div><div class="burn-val">${rate15}</div></div>
+    <div class="burn-gauge-row"><div class="burn-gauge-label">60 min</div><div class="burn-gauge-track"><div class="burn-gauge-fill ${cls(rate60)}" style="width:${pct(rate60)}%"></div></div><div class="burn-val">${rate60}</div></div>
+  </div>`;
+}
+
+// ── feature 17: session swimlane ──────────────────────────
+function buildSwimlane() {
+  const el = document.getElementById('m-swimlane');
+  if (!el) return;
+  const recent = allSessions.slice(0, 8);
+  if (!recent.length) { el.innerHTML = '<div class="m-group-title">Session Lanes</div><div class="loading-txt" style="padding:4px 0">—</div>'; return; }
+  const now = Date.now();
+  const DAY = 86400000;
+  const windowMs = DAY; // 24-hour window
+  const windowStart = now - windowMs;
+  // hues spread across sessions for visual distinction
+  const LANE_HUES = [75, 200, 300, 150, 25, 220, 340, 120];
+  const rows = recent.map((s, si) => {
+    const start = s.startTs || s.mtime || now;
+    const startMs = typeof start === 'number' ? start : new Date(start).getTime();
+    const dur = s.totalDurationMs || 60000;
+    const endMs = startMs + dur;
+    const leftPct  = Math.max(0, Math.min(100, ((startMs - windowStart) / windowMs) * 100));
+    const rightPct = Math.max(0, Math.min(100, ((now - endMs)            / windowMs) * 100));
+    const widthPct = Math.max(2, 100 - leftPct - rightPct);
+    const hue = LANE_HUES[si % LANE_HUES.length];
+    const color = `oklch(65% 0.14 ${hue})`;
+    const name = (s.lastPrompt || s.id).slice(0, 16);
+    return `<div class="sw-row">
+      <div class="sw-lbl" onclick="jumpToSession('${esc(s.id)}')" title="${esc(s.lastPrompt || s.id)}">${esc(name)}</div>
+      <div class="sw-track">
+        <div class="sw-bar" style="left:${leftPct}%;width:${widthPct}%;background:${color}" title="${esc(name)} · ${fmtDur(dur)}"></div>
+      </div>
+    </div>`;
+  }).join('');
+  el.innerHTML = `<div class="m-group-title">Session Lanes <span style="font-size:10px;color:var(--text-xs);font-weight:400">24h</span></div><div id="swimlane-wrap">${rows}</div>`;
+}
+
+// ── feature 18: loop run history ──────────────────────────
+function buildLoopSparkline(l) {
+  // Synthesize a run history from runCount + startedAt if actual history unavailable
+  const runHistory = l.runHistory || [];
+  if (!runHistory.length && l.runCount) {
+    for (let i = 0; i < Math.min(l.runCount, 10); i++) {
+      runHistory.push({ ok: true });
+    }
+  }
+  if (!runHistory.length) return '';
+  const bars = runHistory.slice(-10).map(r => {
+    const h = r.durationMs ? Math.max(4, Math.min(20, Math.round(r.durationMs / 2000))) : 10;
+    return `<div class="lsp-bar${r.error || r.ok === false ? ' err' : ''}" style="height:${h}px" title="${r.error ? 'error' : 'ok'}${r.durationMs ? ' · ' + fmtDur(r.durationMs) : ''}"></div>`;
+  }).join('');
+  return `<div class="le-spark"><span style="font-size:10px;color:var(--text-xs)">last ${runHistory.slice(-10).length} runs</span><div class="loop-sparkline">${bars}</div></div>`;
+}
+
 // ── loops ──────────────────────────────────────────────────
 async function renderLoops() {
   const el = document.getElementById('loops-content');
@@ -1730,6 +2323,7 @@ async function renderLoops() {
           <div class="le-row"><div class="le-lbl">Started</div><div class="le-val mono">${esc(startedAt)}</div></div>
           <div class="le-row"><div class="le-lbl">Last run</div><div class="le-val">${esc(lastRun)}</div></div>
           <div class="le-row"><div class="le-lbl">Run count</div><div class="le-val">${esc(String(runs))}</div></div>
+          ${buildLoopSparkline(l)}
         </div>`;
     }).join('');
   } catch (err) {
@@ -1869,38 +2463,6 @@ function buildTimeline(events) {
   tl.innerHTML = segs.join('');
 }
 
-// ── tool breakdown ──────────────────────────────────────────
-const TB_COLORS = TL_COLORS;
-const TB_ORDER  = ['file','bash','mcp','agent','search','skill','task','mem','other'];
-
-function buildBreakdown(events) {
-  const counts = {};
-  for (const ev of events) {
-    if (ev.kind !== 'tool') continue;
-    const c = ev.cat || 'other';
-    counts[c] = (counts[c] || 0) + 1;
-  }
-  const total = Object.values(counts).reduce((a, b) => a + b, 0);
-  if (!total) {
-    document.getElementById('m-breakdown').innerHTML =
-      '<div class="m-group-title">Tool Usage</div><div class="loading-txt" style="padding:6px 0">—</div>';
-    return;
-  }
-  const rows = TB_ORDER.filter(c => counts[c])
-    .sort((a, b) => counts[b] - counts[a])
-    .map(c => {
-      const pct = Math.round(counts[c] / total * 100);
-      const color = TB_COLORS[c] || TB_COLORS.other;
-      return `<div class="tb-row">
-        <div class="tb-lbl">${c}</div>
-        <div class="tb-bar-wrap"><div class="tb-bar" style="width:${pct}%;background:${color}"></div></div>
-        <div class="tb-count">${counts[c]}</div>
-      </div>`;
-    }).join('');
-  document.getElementById('m-breakdown').innerHTML =
-    `<div class="m-group-title">Tool Usage</div><div class="m-breakdown">${rows}</div>`;
-}
-
 // ── error jump ──────────────────────────────────────────────
 function jumpToErrors() {
   // find first errored feed entry and scroll to it
@@ -2193,7 +2755,8 @@ document.addEventListener('keydown', e => {
   if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
   if (document.getElementById('cmd-palette').classList.contains('open')) return;
 
-  if (e.key === 'Escape') { closeDetail(); closeCmdPalette(); }
+  if (e.key === 'Escape') { closeDetail(); closeCmdPalette(); if (document.getElementById('app').classList.contains('ambient')) toggleAmbient(); }
+  if (e.key === 'a' || e.key === 'A') { if (currentView === 'now') { e.preventDefault(); toggleAmbient(); } }
 
   if (currentView === 'now') {
     if (e.key === '/') { e.preventDefault(); toggleFeedSearch(); }