@monoes/monomindcli 1.10.33 → 1.10.35

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

@@ -434,7 +434,8 @@ html, body { height: 100%; background: var(--bg); color: var(--text-hi); font-fa
 #app.ambient #metrics-pane,
 #app.ambient #replay-bar,
 #app.ambient #feed-recap,
-#app.ambient #feed-timeline { display:none !important; }
+#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; }
@@ -504,6 +505,53 @@ html, body { height: 100%; background: var(--bg); color: var(--text-hi); font-fa
 .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; }
@@ -612,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>
@@ -688,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>
 
@@ -1082,6 +1140,7 @@ function renderFeedEvents(events, silent) {
   buildTimeline(filtered);
   buildBreakdownByName(filtered);
   buildMinimap(filtered);
+  updateBurnRate(filtered);
   // session recap card
   buildRecap(filtered, allSessions[sessionIdx]);
 }
@@ -1354,7 +1413,7 @@ async function loadLoopMetrics() {
     const TWO_HOURS = 2 * 3600 * 1000;
     const now = Date.now();
     alertState.longLoops = loops
-      .filter(l => l.running !== false && l.startedAt && (now - new Date(l.startedAt).getTime()) > TWO_HOURS)
+      .filter(l => l.status !== 'stopped' && l.status !== 'paused' && l.startedAt && (now - new Date(l.startedAt).getTime()) > TWO_HOURS)
       .map(l => (l.name || l.prompt || 'loop').split('--')[0].trim().slice(0, 30));
     updateAlerts();
 
@@ -1383,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 ───────────────────────────────────────────────
@@ -1465,6 +1525,8 @@ async function renderSessions() {
       const autoTags = (allTags.sessionTags.get(s.id) || []).map(t => `<span class="sr-autotag">${esc(t)}</span>`).join('');
       const isStarred = bookmarks.has(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>
@@ -1474,6 +1536,13 @@ 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
@@ -1856,8 +1925,12 @@ function buildDigest() {
   const totalMsgs = todaySessions.reduce((a, s) => a + (s.userMessages || 0), 0);
   const longestMs = Math.max(...todaySessions.map(s => s.totalDurationMs || 0));
 
-  // gather top tools from today's sessions' tag keywords as themes
-  const themes = [...new Set(todaySessions.flatMap(s => s._tags || []))].slice(0, 3);
+  // 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' : ''}`,
@@ -1886,7 +1959,8 @@ function buildMinimap(events) {
   const scroll = document.getElementById('feed-scroll');
   if (!track || !thumb || !scroll) return;
 
-  const tools = events.filter(ev => ev.kind === 'tool' || ev.kind === 'user');
+  // 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' };
@@ -2052,6 +2126,168 @@ function renderDiff() {
   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.firstTs || 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 currentRep if actual history unavailable
+  const runHistory = l.runHistory || [];
+  if (!runHistory.length && l.currentRep) {
+    for (let i = 0; i < Math.min(l.currentRep, 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');
@@ -2065,13 +2301,13 @@ async function renderLoops() {
       return;
     }
     el.innerHTML = loops.map((l, idx) => {
-      const running = l.running !== false;
+      const running = l.status !== 'stopped' && l.status !== 'paused';
       const name = l.name || (l.prompt || 'loop').split('--')[0].trim().slice(0, 60);
       const interval = l.interval || l.schedule || '';
       const fullPrompt = l.prompt || l.command || '';
       const startedAt = l.startedAt ? new Date(l.startedAt).toLocaleString() : '—';
-      const lastRun = l.lastRun ? relTime(l.lastRun) : (l.startedAt ? relTime(l.startedAt) : '—');
-      const runs = l.runCount != null ? l.runCount : '—';
+      const lastRun = l.lastRunAt ? relTime(l.lastRunAt) : (l.startedAt ? relTime(l.startedAt) : '—');
+      const runs = l.currentRep != null ? l.currentRep : '—';
       return `<div class="loop-row" onclick="toggleLoop(this)">
           <div class="loop-ico">↺</div>
           <div class="loop-body">
@@ -2087,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) {
@@ -2226,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