npm - @monoes/monomindcli - Versions diffs - 1.10.29 → 1.10.31 - Mend

@monoes/monomindcli 1.10.29 → 1.10.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (111) hide show

package/.claude/helpers/auto-memory-hook.mjs +39 -4
package/.claude/helpers/handlers/adr-draft-handler.cjs +64 -0
package/.claude/helpers/handlers/agent-start-handler.cjs +99 -0
package/.claude/helpers/handlers/edit-handler.cjs +145 -0
package/.claude/helpers/handlers/graph-status-handler.cjs +38 -0
package/.claude/helpers/handlers/route-handler.cjs +393 -0
package/.claude/helpers/handlers/session-handler.cjs +167 -0
package/.claude/helpers/handlers/session-restore-handler.cjs +348 -0
package/.claude/helpers/handlers/task-handler.cjs +329 -0
package/.claude/helpers/hook-handler.cjs +120 -2431
package/.claude/helpers/intelligence.cjs +21 -2
package/.claude/helpers/learning-service.mjs +166 -8
package/.claude/helpers/memory-palace.cjs +72 -12
package/.claude/helpers/router.cjs +79 -5
package/.claude/helpers/statusline.cjs +193 -399
package/.claude/helpers/utils/micro-agents.cjs +338 -0
package/.claude/helpers/utils/monograph.cjs +349 -0
package/.claude/helpers/utils/telemetry.cjs +144 -0
package/.claude/skills/agent-browser-testing/SKILL.md +3 -2
package/.claude/skills/monomind/browse-agentcore.md +116 -0
package/.claude/skills/monomind/browse-electron.md +189 -0
package/.claude/skills/monomind/browse-qa.md +229 -0
package/.claude/skills/monomind/browse-references/authentication.md +162 -0
package/.claude/skills/monomind/browse-references/trust-boundaries.md +41 -0
package/.claude/skills/monomind/browse-references/video-recording.md +84 -0
package/.claude/skills/monomind/browse-slack.md +189 -0
package/.claude/skills/monomind/browse-vercel.md +240 -0
package/.claude/skills/monomind/browse.md +724 -0
package/dist/src/browser/actions.d.ts +28 -0
package/dist/src/browser/actions.d.ts.map +1 -0
package/dist/src/browser/actions.js +292 -0
package/dist/src/browser/actions.js.map +1 -0
package/dist/src/browser/batch.d.ts +13 -0
package/dist/src/browser/batch.d.ts.map +1 -0
package/dist/src/browser/batch.js +11 -0
package/dist/src/browser/batch.js.map +1 -0
package/dist/src/browser/browser.d.ts +14 -0
package/dist/src/browser/browser.d.ts.map +1 -0
package/dist/src/browser/browser.js +198 -0
package/dist/src/browser/browser.js.map +1 -0
package/dist/src/browser/cdp.d.ts +17 -0
package/dist/src/browser/cdp.d.ts.map +1 -0
package/dist/src/browser/cdp.js +106 -0
package/dist/src/browser/cdp.js.map +1 -0
package/dist/src/browser/console-log.d.ts +22 -0
package/dist/src/browser/console-log.d.ts.map +1 -0
package/dist/src/browser/console-log.js +55 -0
package/dist/src/browser/console-log.js.map +1 -0
package/dist/src/browser/dialog.d.ts +11 -0
package/dist/src/browser/dialog.d.ts.map +1 -0
package/dist/src/browser/dialog.js +36 -0
package/dist/src/browser/dialog.js.map +1 -0
package/dist/src/browser/emulation.d.ts +15 -0
package/dist/src/browser/emulation.d.ts.map +1 -0
package/dist/src/browser/emulation.js +62 -0
package/dist/src/browser/emulation.js.map +1 -0
package/dist/src/browser/find.d.ts +21 -0
package/dist/src/browser/find.d.ts.map +1 -0
package/dist/src/browser/find.js +118 -0
package/dist/src/browser/find.js.map +1 -0
package/dist/src/browser/index.d.ts +18 -0
package/dist/src/browser/index.d.ts.map +1 -0
package/dist/src/browser/index.js +18 -0
package/dist/src/browser/index.js.map +1 -0
package/dist/src/browser/network.d.ts +11 -0
package/dist/src/browser/network.d.ts.map +1 -0
package/dist/src/browser/network.js +81 -0
package/dist/src/browser/network.js.map +1 -0
package/dist/src/browser/pdf.d.ts +15 -0
package/dist/src/browser/pdf.d.ts.map +1 -0
package/dist/src/browser/pdf.js +27 -0
package/dist/src/browser/pdf.js.map +1 -0
package/dist/src/browser/screenshot.d.ts +15 -0
package/dist/src/browser/screenshot.d.ts.map +1 -0
package/dist/src/browser/screenshot.js +36 -0
package/dist/src/browser/screenshot.js.map +1 -0
package/dist/src/browser/session.d.ts +8 -0
package/dist/src/browser/session.d.ts.map +1 -0
package/dist/src/browser/session.js +50 -0
package/dist/src/browser/session.js.map +1 -0
package/dist/src/browser/snapshot.d.ts +12 -0
package/dist/src/browser/snapshot.d.ts.map +1 -0
package/dist/src/browser/snapshot.js +147 -0
package/dist/src/browser/snapshot.js.map +1 -0
package/dist/src/browser/storage.d.ts +11 -0
package/dist/src/browser/storage.d.ts.map +1 -0
package/dist/src/browser/storage.js +43 -0
package/dist/src/browser/storage.js.map +1 -0
package/dist/src/browser/tabs.d.ts +8 -0
package/dist/src/browser/tabs.d.ts.map +1 -0
package/dist/src/browser/tabs.js +25 -0
package/dist/src/browser/tabs.js.map +1 -0
package/dist/src/browser/types.d.ts +109 -0
package/dist/src/browser/types.d.ts.map +1 -0
package/dist/src/browser/types.js +16 -0
package/dist/src/browser/types.js.map +1 -0
package/dist/src/browser/wait.d.ts +4 -0
package/dist/src/browser/wait.d.ts.map +1 -0
package/dist/src/browser/wait.js +122 -0
package/dist/src/browser/wait.js.map +1 -0
package/dist/src/commands/browse.d.ts +8 -0
package/dist/src/commands/browse.d.ts.map +1 -0
package/dist/src/commands/browse.js +1494 -0
package/dist/src/commands/browse.js.map +1 -0
package/dist/src/commands/index.d.ts.map +1 -1
package/dist/src/commands/index.js +2 -0
package/dist/src/commands/index.js.map +1 -1
package/dist/src/ui/dashboard-v2.html +1857 -0
package/dist/src/ui/server.mjs +71 -1
package/dist/tsconfig.tsbuildinfo +1 -1
package/package.json +2 -1

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

@@ -0,0 +1,1857 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>monomind</title>
+<style>
+:root {
+  --bg:          oklch(11% 0.009 55);
+  --surface:     oklch(15% 0.009 55);
+  --surface-hi:  oklch(18% 0.009 55);
+  --border:      oklch(25% 0.008 55);
+  --accent:      oklch(72% 0.18 75);
+  --accent-dim:  oklch(72% 0.18 75 / 0.12);
+  --text-hi:     oklch(93% 0.008 75);
+  --text-mid:    oklch(65% 0.006 75);
+  --text-lo:     oklch(42% 0.006 75);
+  --text-xs:     oklch(32% 0.005 75);
+  --green:       oklch(65% 0.15 150);
+  --red:         oklch(60% 0.18 25);
+  --sans:        'Inter', system-ui, -apple-system, sans-serif;
+  --mono:        'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
+  --r:           6px;
+  --sidebar-w:   196px;
+}
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html, body { height: 100%; background: var(--bg); color: var(--text-hi); font-family: var(--sans); font-size: 13px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
+/* ── layout ──────────────────────────────────────────────── */
+#app { display: flex; height: 100vh; overflow: hidden; }
+/* ── sidebar ─────────────────────────────────────────────── */
+#sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
+#sb-logo { padding: 18px 16px 14px; border-bottom: 1px solid var(--border); }
+#sb-logo .mark { font-size: 13px; font-weight: 600; letter-spacing: 0.05em; color: var(--text-hi); }
+#sb-logo .proj { font-size: 11px; color: var(--accent); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
+#sb-nav { flex: 1; padding: 10px 8px; overflow-y: auto; }
+.nav-sect { margin-bottom: 8px; }
+.nav-lbl { font-size: 10px; letter-spacing: 0.08em; color: var(--text-xs); padding: 8px 8px 4px; text-transform: uppercase; }
+.nav-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--r); cursor: pointer; color: var(--text-mid); transition: background 0.1s, color 0.1s; user-select: none; }
+.nav-item:hover { background: var(--surface-hi); color: var(--text-hi); }
+.nav-item.active { background: var(--accent-dim); color: var(--accent); }
+.nav-item .ico { width: 14px; text-align: center; flex-shrink: 0; font-size: 12px; }
+.nav-item .lbl { font-size: 13px; }
+.nav-item .bdg { margin-left: auto; font-size: 10px; background: var(--surface-hi); color: var(--text-lo); border-radius: 8px; padding: 1px 6px; min-width: 18px; text-align: center; }
+.nav-item.active .bdg { background: var(--accent-dim); color: var(--accent); }
+#sb-footer { padding: 10px 14px; border-top: 1px solid var(--border); }
+#sb-user { font-size: 12px; font-weight: 500; color: var(--text-mid); }
+#sb-path { font-size: 10px; color: var(--text-lo); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); }
+/* ── main ────────────────────────────────────────────────── */
+#main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
+#topbar { height: 46px; border-bottom: 1px solid var(--border); padding: 0 18px; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
+#view-title { font-size: 14px; font-weight: 600; color: var(--text-hi); }
+.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-lo); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 2px 8px; }
+.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: blink 2s ease-in-out infinite; }
+@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.35} }
+@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
+#tb-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
+.btn { font-size: 11px; color: var(--text-lo); background: transparent; border: 1px solid var(--border); border-radius: var(--r); padding: 4px 10px; cursor: pointer; transition: color 0.1s, border-color 0.1s; }
+.btn:hover { color: var(--text-hi); border-color: var(--text-lo); }
+#view-wrap { flex: 1; overflow: hidden; }
+.view { display: none; height: 100%; overflow: hidden; }
+.view.active { display: flex; }
+/* ── NOW view ────────────────────────────────────────────── */
+#view-now { flex-direction: row; position: relative; }
+/* feed pane */
+#feed-pane { flex: 1; display: flex; flex-direction: column; border-right: 1px solid var(--border); overflow: hidden; min-width: 0; }
+#feed-head { padding: 10px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
+#feed-head h2 { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-lo); }
+#feed-sess { font-size: 11px; font-family: var(--mono); color: var(--text-xs); }
+#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::-webkit-scrollbar { width: 3px; }
+#feed-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
+/* feed entries */
+.feed-entry { display: flex; align-items: flex-start; gap: 10px; padding: 5px 18px; cursor: pointer; transition: background 0.08s; }
+.feed-entry:hover { background: var(--surface-hi); }
+.feed-entry.selected { background: var(--accent-dim); }
+.feed-ico { width: 20px; height: 20px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; margin-top: 1px; }
+.feed-body { flex: 1; min-width: 0; }
+.feed-lbl { font-size: 13px; color: var(--text-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.feed-detail { font-size: 11px; color: var(--text-lo); margin-top: 1px; font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.feed-ts { font-size: 10px; color: var(--text-xs); white-space: nowrap; flex-shrink: 0; margin-top: 3px; font-family: var(--mono); }
+.feed-entry.k-user .feed-lbl { color: var(--text-mid); font-style: italic; }
+.feed-entry.errored .feed-lbl { color: var(--red); }
+.feed-entry.errored .feed-ico { background: oklch(60% 0.18 25 / 0.14); color: oklch(60% 0.18 25); }
+/* group row */
+.feed-group { display: flex; align-items: center; gap: 8px; padding: 3px 18px 3px 48px; cursor: pointer; }
+.feed-group:hover .fg-label { color: var(--text-mid); }
+.fg-label { font-size: 11px; color: var(--text-lo); }
+.fg-expand { font-size: 10px; color: var(--text-xs); margin-left: 4px; }
+/* category icon colors */
+.cat-file   { background: oklch(65% 0.15 150 / 0.14); color: oklch(65% 0.15 150); }
+.cat-bash   { background: oklch(65% 0.12 240 / 0.14); color: oklch(65% 0.12 240); }
+.cat-agent  { background: oklch(65% 0.13 290 / 0.14); color: oklch(65% 0.13 290); }
+.cat-mcp    { background: oklch(65% 0.12 195 / 0.14); color: oklch(65% 0.12 195); }
+.cat-search { background: oklch(65% 0.14 35 / 0.14);  color: oklch(65% 0.14 35); }
+.cat-skill  { background: oklch(72% 0.18 75 / 0.14);  color: oklch(72% 0.18 75); }
+.cat-task   { background: oklch(62% 0.12 55 / 0.14);  color: oklch(72% 0.12 55); }
+.cat-mem    { background: oklch(62% 0.11 160 / 0.14); color: oklch(68% 0.11 160); }
+.cat-user   { background: oklch(55% 0.08 75 / 0.12);  color: oklch(62% 0.06 75); }
+.cat-other  { background: var(--surface-hi); color: var(--text-lo); }
+.feed-divider { height: 1px; background: var(--border); margin: 2px 18px; opacity: 0.4; }
+.feed-empty { padding: 40px 18px; color: var(--text-lo); font-size: 13px; }
+/* ── detail panel ─────────────────────────────────────────── */
+#detail-panel {
+  position: absolute; top: 0; right: 252px; bottom: 0;
+  width: 0; overflow: hidden;
+  background: oklch(13% 0.009 55);
+  border-left: 1px solid var(--border);
+  border-right: 1px solid var(--border);
+  transition: width 0.22s cubic-bezier(0.16, 1, 0.3, 1);
+  display: flex; flex-direction: column; z-index: 10;
+}
+#detail-panel.open { width: 280px; }
+#detail-head { padding: 12px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
+#detail-head h3 { font-size: 12px; font-weight: 600; color: var(--text-hi); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+#detail-close { font-size: 14px; color: var(--text-lo); background: none; border: none; cursor: pointer; padding: 0 2px; line-height: 1; }
+#detail-close:hover { color: var(--text-hi); }
+#detail-body { flex: 1; overflow-y: auto; padding: 12px 14px; }
+#detail-body::-webkit-scrollbar { width: 3px; }
+#detail-body::-webkit-scrollbar-thumb { background: var(--border); }
+.d-cat-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; border-radius: 10px; padding: 2px 8px; margin-bottom: 10px; }
+.d-row { margin-bottom: 10px; }
+.d-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-lo); margin-bottom: 3px; }
+.d-val { font-size: 12px; color: var(--text-hi); word-break: break-word; }
+.d-val.mono { font-family: var(--mono); font-size: 11px; }
+.d-val.error { color: var(--red); }
+/* ── metrics pane ────────────────────────────────────────── */
+#metrics-pane { width: 252px; flex-shrink: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 18px; }
+#metrics-pane::-webkit-scrollbar { width: 3px; }
+#metrics-pane::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
+.m-group-title { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-lo); padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
+.m-row { display: flex; align-items: baseline; justify-content: space-between; padding: 3px 0; }
+.m-name { font-size: 12px; color: var(--text-mid); }
+.m-val { font-size: 13px; font-weight: 600; color: var(--text-hi); font-family: var(--mono); }
+.m-val.gold { color: var(--accent); }
+.mini-loop { padding: 6px 0; border-bottom: 1px solid var(--border); }
+.mini-loop:last-child { border-bottom: none; }
+.ml-name { font-size: 12px; color: var(--text-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ml-meta { font-size: 11px; color: var(--text-lo); margin-top: 1px; display: flex; align-items: center; gap: 5px; }
+.ml-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; background: var(--green); }
+.mini-sess { padding: 5px 0; cursor: pointer; border-bottom: 1px solid var(--border); }
+.mini-sess:last-child { border-bottom: none; }
+.mini-sess:hover .ms-prompt { color: var(--accent); }
+.ms-prompt { font-size: 12px; color: var(--text-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.1s; }
+.ms-meta { font-size: 11px; color: var(--text-lo); margin-top: 1px; }
+/* ── views with scroll ───────────────────────────────────── */
+.vscroll { flex: 1; overflow-y: auto; padding: 22px 24px; }
+.vscroll::-webkit-scrollbar { width: 4px; }
+.vscroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
+.pg-title { font-size: 18px; font-weight: 600; color: var(--text-hi); margin-bottom: 4px; }
+.pg-sub { font-size: 13px; color: var(--text-lo); margin-bottom: 22px; }
+/* filter bar */
+.filter-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
+.filter-input { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 6px 10px; font-size: 12px; color: var(--text-hi); font-family: var(--sans); outline: none; transition: border-color 0.1s; }
+.filter-input::placeholder { color: var(--text-lo); }
+.filter-input:focus { border-color: var(--accent); }
+/* projects */
+.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
+.proj-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; cursor: pointer; transition: border-color 0.12s, background 0.12s; position: relative; }
+.proj-card:hover { border-color: var(--accent); background: var(--surface-hi); }
+.proj-card.current { border-color: var(--accent); }
+.proj-card-badge { position: absolute; top: 10px; right: 10px; font-size: 10px; background: var(--accent-dim); color: var(--accent); border-radius: 8px; padding: 1px 7px; }
+.proj-card-name { font-size: 14px; font-weight: 500; color: var(--text-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 4px; }
+.proj-card-path { font-size: 10px; color: var(--text-lo); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 10px; }
+.proj-card-stats { display: flex; gap: 14px; }
+.ps-v { font-size: 16px; font-weight: 700; color: var(--text-hi); }
+.ps-l { font-size: 10px; color: var(--text-lo); margin-top: 1px; }
+/* sessions */
+.sess-list { display: flex; flex-direction: column; gap: 6px; }
+.sess-row { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 11px 14px; cursor: pointer; transition: border-color 0.12s, background 0.12s; }
+.sess-row:hover { border-color: var(--accent); background: var(--surface-hi); }
+.sr-top { display: flex; align-items: baseline; gap: 10px; }
+.sr-prompt { font-size: 13px; color: var(--text-hi); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sr-time { font-size: 11px; color: var(--text-lo); white-space: nowrap; font-family: var(--mono); }
+.sr-meta { font-size: 11px; color: var(--text-lo); margin-top: 3px; }
+/* loops */
+.loop-list { display: flex; flex-direction: column; gap: 8px; }
+.loop-row { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 11px 14px; display: flex; align-items: center; gap: 12px; }
+.loop-ico { width: 30px; height: 30px; border-radius: 6px; background: var(--accent-dim); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--accent); flex-shrink: 0; }
+.loop-body { flex: 1; min-width: 0; }
+.loop-name { font-size: 13px; color: var(--text-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.loop-meta { font-size: 11px; color: var(--text-lo); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.loop-status { font-size: 11px; padding: 2px 8px; border-radius: 10px; flex-shrink: 0; }
+.loop-status.active { background: oklch(65% 0.15 150 / 0.12); color: var(--green); }
+.loop-status.stopped { background: var(--surface-hi); color: var(--text-lo); }
+/* memory */
+.mem-section { margin-bottom: 22px; }
+.mem-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-lo); margin-bottom: 10px; }
+.drawer-item { padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; margin-bottom: 4px; }
+.dr-key { font-size: 12px; color: var(--accent); font-family: var(--mono); }
+.dr-val { font-size: 12px; color: var(--text-hi); margin-top: 2px; word-break: break-word; }
+.dr-ts { font-size: 10px; color: var(--text-lo); margin-top: 2px; }
+.drawer-item.hidden { display: none; }
+/* orgs */
+.org-list { display: flex; flex-direction: column; gap: 6px; }
+.org-row { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 11px 14px; cursor: pointer; transition: border-color 0.12s; }
+.org-row:hover { border-color: var(--accent); }
+.org-name { font-size: 13px; color: var(--text-hi); font-weight: 500; }
+.org-meta { font-size: 11px; color: var(--text-lo); margin-top: 3px; }
+/* ── alerts rail ─────────────────────────────────────────── */
+#alerts-rail { display: none; flex-shrink: 0; border-bottom: 1px solid var(--border); padding: 0 16px; min-height: 36px; flex-direction: row; gap: 8px; align-items: center; overflow-x: auto; }
+#alerts-rail.has-alerts { display: flex; }
+.alert-item { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 4px 10px; border-radius: 10px; cursor: default; white-space: nowrap; user-select: none; }
+.alert-item:hover .al-x { opacity: 1; }
+.alert-warn { background: oklch(72% 0.18 75 / 0.1); color: oklch(78% 0.18 75); border: 1px solid oklch(72% 0.18 75 / 0.25); }
+.alert-crit { background: oklch(60% 0.18 25 / 0.12); color: oklch(70% 0.18 25); border: 1px solid oklch(60% 0.18 25 / 0.3); }
+.al-ico { font-size: 10px; }
+.al-x { opacity: 0; transition: opacity 0.1s; cursor: pointer; font-size: 10px; margin-left: 2px; color: inherit; }
+/* ── session context bar ─────────────────────────────────── */
+#sess-ctx { display: none; flex-shrink: 0; align-items: center; gap: 8px; padding: 5px 18px; border-bottom: 1px solid var(--border); background: oklch(72% 0.18 75 / 0.06); }
+#sess-ctx.show { display: flex; }
+.sctx-back { font-size: 11px; color: var(--accent); background: none; border: none; cursor: pointer; padding: 0; white-space: nowrap; }
+.sctx-back:hover { text-decoration: underline; }
+.sctx-sep { color: var(--text-xs); font-size: 11px; }
+.sctx-label { font-size: 12px; color: var(--text-hi); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sctx-live { font-size: 11px; color: var(--text-lo); background: none; border: 1px solid var(--border); border-radius: var(--r); padding: 2px 9px; cursor: pointer; white-space: nowrap; transition: color 0.1s, border-color 0.1s; }
+.sctx-live:hover { color: var(--green); border-color: var(--green); }
+/* enhanced session row → view affordance */
+.sr-top { position: relative; }
+.sr-view { position: absolute; right: 0; top: 0; font-size: 11px; color: var(--accent); opacity: 0; transition: opacity 0.1s; }
+.sess-row:hover .sr-view { opacity: 1; }
+.sr-tags { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
+.sr-tag { font-size: 10px; padding: 1px 6px; border-radius: 8px; background: var(--surface-hi); color: var(--text-lo); }
+.sr-tag.err { background: oklch(60% 0.18 25 / 0.1); color: oklch(70% 0.18 25); }
+/* loops detail expand */
+.loop-row { cursor: pointer; }
+.loop-row:hover { background: var(--surface-hi); }
+.loop-row.open { border-color: var(--accent); }
+.loop-expand { display: none; padding: 10px 14px 12px 56px; background: oklch(14% 0.009 55); border-top: 1px solid var(--border); border-radius: 0 0 6px 6px; }
+.loop-row.open + .loop-expand { display: block; }
+.le-row { display: flex; gap: 10px; margin-bottom: 6px; }
+.le-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-lo); min-width: 70px; flex-shrink: 0; padding-top: 1px; }
+.le-val { font-size: 12px; color: var(--text-hi); word-break: break-all; }
+.le-val.mono { font-family: var(--mono); font-size: 11px; }
+/* 7-day sparkline */
+.spark-wrap { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
+.spark-lbl { font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-lo); margin-bottom: 6px; }
+.sparkline { display: flex; align-items: flex-end; gap: 3px; height: 24px; }
+.spark-bar { flex: 1; border-radius: 2px 2px 0 0; background: oklch(72% 0.18 75 / 0.25); min-height: 2px; transition: background 0.1s; }
+.spark-bar.spark-today { background: oklch(72% 0.18 75 / 0.75); }
+.spark-bar:hover { background: oklch(72% 0.18 75 / 0.6); }
+/* shared */
+.empty { padding: 44px 18px; color: var(--text-lo); text-align: center; }
+.empty-ico { font-size: 22px; margin-bottom: 10px; }
+.loading-txt { padding: 18px; color: var(--text-lo); font-size: 12px; }
+::-webkit-scrollbar { width: 4px; height: 4px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
+/* ── command palette ─────────────────────────────────────── */
+#cmd-backdrop { display:none; position:fixed; inset:0; z-index:100; background: oklch(5% 0 0 / 0.6); backdrop-filter:blur(2px); }
+#cmd-backdrop.open { display:block; }
+#cmd-palette { display:none; position:fixed; top:18%; left:50%; transform:translateX(-50%); width:540px; max-width:90vw; background: oklch(16% 0.009 55); border:1px solid oklch(32% 0.008 55); border-radius:10px; z-index:101; box-shadow:0 24px 60px oklch(5% 0 0 / 0.7); overflow:hidden; flex-direction:column; }
+#cmd-palette.open { display:flex; }
+#cmd-input-wrap { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--border); }
+#cmd-ico { font-size:13px; color:var(--text-lo); flex-shrink:0; }
+#cmd-input { flex:1; background:transparent; border:none; font-size:14px; color:var(--text-hi); font-family:var(--sans); outline:none; }
+#cmd-input::placeholder { color:var(--text-lo); }
+#cmd-results { max-height:340px; overflow-y:auto; padding:4px 0; }
+.cmd-group-lbl { font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-xs); padding:8px 14px 3px; }
+.cmd-item { display:flex; align-items:center; gap:10px; padding:8px 14px; cursor:pointer; transition:background 0.07s; }
+.cmd-item:hover, .cmd-item.focused { background:var(--accent-dim); }
+.cmd-item .ci-ico { width:20px; text-align:center; color:var(--text-lo); flex-shrink:0; font-size:12px; }
+.cmd-item-body { flex:1; min-width:0; }
+.cmd-item .ci-title { font-size:13px; color:var(--text-hi); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.cmd-item .ci-sub { font-size:11px; color:var(--text-lo); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.cmd-item.focused .ci-title { color:var(--accent); }
+.cmd-empty { padding:28px 16px; text-align:center; color:var(--text-lo); font-size:13px; }
+.cmd-footer { padding:6px 14px; border-top:1px solid var(--border); display:flex; gap:16px; }
+.cmd-key { font-size:10px; color:var(--text-xs); display:flex; align-items:center; gap:4px; }
+.cmd-key kbd { background:var(--surface-hi); border:1px solid var(--border); border-radius:3px; padding:1px 5px; font-family:var(--mono); font-size:10px; color:var(--text-lo); }
+/* ── feed time filter ────────────────────────────────────── */
+#feed-time-filter { display:flex; gap:4px; padding:5px 18px; border-bottom:1px solid var(--border); flex-shrink:0; align-items:center; }
+.tf-lbl { font-size:10px; color:var(--text-xs); letter-spacing:0.06em; margin-right:4px; }
+.tf-btn { font-size:11px; padding:2px 9px; background:transparent; border:1px solid transparent; border-radius:8px; color:var(--text-lo); cursor:pointer; transition:color 0.1s, background 0.1s; font-family:var(--sans); }
+.tf-btn:hover { color:var(--text-hi); }
+.tf-btn.active { background:var(--accent-dim); color:var(--accent); border-color:oklch(72% 0.18 75 / 0.3); }
+/* ── keyboard hint ───────────────────────────────────────── */
+.kb-hint { margin-left:auto; font-size:10px; color:var(--text-xs); display:flex; align-items:center; gap:6px; }
+.kb-hint kbd { background:var(--surface-hi); border:1px solid var(--border); border-radius:3px; padding:1px 5px; font-family:var(--mono); font-size:10px; }
+/* ── topbar cost badge ───────────────────────────────────── */
+#topbar-cost { font-size:11px; color:var(--accent); font-family:var(--mono); font-weight:600; opacity:0; transition:opacity 0.3s; }
+#topbar-cost.loaded { opacity:1; }
+/* ── feed search bar ─────────────────────────────────────── */
+#feed-search { display:none; flex-shrink:0; padding:4px 18px; border-bottom:1px solid var(--border); align-items:center; gap:8px; }
+#feed-search.open { display:flex; }
+#feed-search-input { flex:1; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:4px 10px; font-size:12px; color:var(--text-hi); font-family:var(--sans); outline:none; transition:border-color 0.1s; }
+#feed-search-input::placeholder { color:var(--text-lo); }
+#feed-search-input:focus { border-color:var(--accent); }
+#feed-search-count { font-size:11px; color:var(--text-lo); white-space:nowrap; font-family:var(--mono); }
+#feed-search-close { font-size:12px; color:var(--text-lo); background:none; border:none; cursor:pointer; padding:0 2px; }
+#feed-search-close:hover { color:var(--text-hi); }
+/* ── memory namespace tabs ───────────────────────────────── */
+#mem-ns-tabs { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:14px; }
+.ns-tab { font-size:11px; padding:3px 10px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--text-lo); cursor:pointer; font-family:var(--sans); transition:color 0.1s, background 0.1s; }
+.ns-tab:hover { color:var(--text-hi); }
+.ns-tab.active { background:var(--accent-dim); color:var(--accent); border-color:oklch(72% 0.18 75 / 0.3); }
+/* ── copy session button ─────────────────────────────────── */
+.sess-copy-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.1s; line-height:1.4; white-space:nowrap; }
+.sess-copy-btn:hover { color:var(--text-hi); }
+.sess-copy-btn.copied { color:var(--green); border-color:var(--green); }
+/* ── session timeline bar ────────────────────────────────── */
+#feed-timeline { height:6px; flex-shrink:0; display:flex; overflow:hidden; border-bottom:1px solid var(--border); }
+.tl-seg { height:100%; flex-shrink:0; transition:opacity 0.1s; }
+.tl-seg:hover { opacity:0.7; }
+/* ── feed density toggle ─────────────────────────────────── */
+#feed-pane.compact .feed-entry { padding: 2px 18px; }
+#feed-pane.compact .feed-lbl { font-size:12px; }
+#feed-pane.compact .feed-detail { display:none; }
+#feed-pane.compact .feed-ico { width:16px; height:16px; font-size:9px; }
+.density-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.1s; line-height:1.4; white-space:nowrap; }
+.density-btn:hover { color:var(--text-hi); }
+.density-btn.compact-on { color:var(--accent); border-color:oklch(72% 0.18 75 / 0.5); }
+/* ── tool usage breakdown ────────────────────────────────── */
+.m-breakdown { margin-top:4px; }
+.tb-row { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
+.tb-lbl { font-size:10px; color:var(--text-lo); width:44px; flex-shrink:0; text-align:right; }
+.tb-bar-wrap { flex:1; height:5px; background:var(--surface-hi); border-radius:3px; overflow:hidden; }
+.tb-bar { height:100%; border-radius:3px; }
+.tb-count { font-size:10px; color:var(--text-xs); font-family:var(--mono); width:22px; text-align:right; }
+/* ── week-over-week delta ────────────────────────────────── */
+.wow-delta { font-size:11px; margin-left:6px; }
+.wow-up   { color:oklch(60% 0.18 25); }
+.wow-down { color:oklch(65% 0.15 150); }
+.wow-flat { color:var(--text-lo); }
+/* ── live tail ───────────────────────────────────────────── */
+.live-tail-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; }
+.live-tail-btn:hover { color:var(--text-hi); }
+.live-tail-btn.on { color:var(--green); border-color:oklch(65% 0.15 150 / 0.5); }
+@keyframes live-pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
+#btn-live-tail.on { animation: live-pulse 2s ease-in-out infinite; }
+@media (prefers-reduced-motion: reduce) { #btn-live-tail.on { animation:none; } }
+/* ── calendar heatmap ────────────────────────────────────── */
+.cal-grid { display:grid; grid-template-rows:repeat(7,9px); grid-auto-flow:column; grid-auto-columns:9px; gap:2px; margin-top:6px; }
+.cal-cell { border-radius:2px; background:var(--surface-hi); }
+.cal-cell.cal-1 { background:oklch(72% 0.18 75 / 0.22); }
+.cal-cell.cal-2 { background:oklch(72% 0.18 75 / 0.42); }
+.cal-cell.cal-3 { background:oklch(72% 0.18 75 / 0.65); }
+.cal-cell.cal-4 { background:oklch(72% 0.18 75 / 0.85); }
+.cal-cell.cal-today { outline:1px solid var(--accent); outline-offset:-1px; }
+/* ── session bookmark ────────────────────────────────────── */
+.sess-star { font-size:13px; background:none; border:none; cursor:pointer; color:var(--text-xs); padding:0 2px; transition:color 0.1s; line-height:1; flex-shrink:0; }
+.sess-star:hover { color:var(--text-lo); }
+.sess-star.on { color:oklch(78% 0.18 75); }
+.sr-starred { font-size:10px; color:oklch(78% 0.18 75); margin-left:auto; }
+#sess-star-filter { 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); margin-left:auto; }
+#sess-star-filter:hover { color:var(--text-hi); }
+#sess-star-filter.on { background:oklch(72% 0.18 75 / 0.1); color:oklch(78% 0.18 75); border-color:oklch(72% 0.18 75 / 0.3); }
+/* ── forecast row ────────────────────────────────────────── */
+.m-val.forecast { color:var(--text-lo); font-size:11px; font-weight:500; }
+</style>
+</head>
+<body>
+<div id="app">
+<!-- ── Sidebar ─────────────────────────────────────────── -->
+<nav id="sidebar">
+  <div id="sb-logo">
+    <div class="mark">monomind</div>
+    <div class="proj" id="sb-proj">—</div>
+  </div>
+  <div id="sb-nav">
+    <div class="nav-sect">
+      <div class="nav-item active" data-view="now">
+        <span class="ico">◉</span><span class="lbl">Now</span>
+      </div>
+    </div>
+    <div class="nav-sect">
+      <div class="nav-lbl">Workspace</div>
+      <div class="nav-item" data-view="projects">
+        <span class="ico">⊞</span><span class="lbl">Projects</span>
+        <span class="bdg" id="bdg-projects">—</span>
+      </div>
+      <div class="nav-item" data-view="sessions">
+        <span class="ico">◫</span><span class="lbl">Sessions</span>
+        <span class="bdg" id="bdg-sessions">—</span>
+      </div>
+      <div class="nav-item" data-view="loops">
+        <span class="ico">↺</span><span class="lbl">Loops</span>
+        <span class="bdg" id="bdg-loops">—</span>
+      </div>
+    </div>
+    <div class="nav-sect">
+      <div class="nav-lbl">Intelligence</div>
+      <div class="nav-item" data-view="memory">
+        <span class="ico">◈</span><span class="lbl">Memory</span>
+      </div>
+      <div class="nav-item" data-view="orgs">
+        <span class="ico">⬡</span><span class="lbl">Orgs</span>
+      </div>
+    </div>
+  </div>
+  <div id="sb-footer">
+    <div id="sb-user">—</div>
+    <div id="sb-path">—</div>
+  </div>
+</nav>
+<!-- ── Main ────────────────────────────────────────────── -->
+<div id="main">
+  <div id="topbar">
+    <span id="view-title">Now</span>
+    <span class="pill"><span class="live-dot"></span> live</span>
+    <span id="topbar-cost"></span>
+    <div id="tb-right">
+      <button class="btn" onclick="openCmdPalette()">⌕ Search <kbd style="font-size:10px;opacity:0.6;margin-left:3px">⌘K</kbd></button>
+      <button class="btn" onclick="refreshCurrent()">↺ Refresh</button>
+    </div>
+  </div>
+  <div id="alerts-rail"></div>
+  <!-- command palette -->
+  <div id="cmd-backdrop" onclick="closeCmdPalette()"></div>
+  <div id="cmd-palette" role="dialog" aria-label="Command palette">
+    <div id="cmd-input-wrap">
+      <span id="cmd-ico">⌕</span>
+      <input id="cmd-input" type="text" placeholder="Search sessions, memory, projects…" oninput="cmdSearch(this.value)" onkeydown="cmdKey(event)" autocomplete="off" spellcheck="false">
+    </div>
+    <div id="cmd-results"></div>
+    <div class="cmd-footer">
+      <span class="cmd-key"><kbd>↑↓</kbd> navigate</span>
+      <span class="cmd-key"><kbd>↵</kbd> select</span>
+      <span class="cmd-key"><kbd>></kbd> search all sessions</span>
+      <span class="cmd-key"><kbd>esc</kbd> close</span>
+    </div>
+  </div>
+  <div id="view-wrap">
+    <!-- NOW -->
+    <div class="view active" id="view-now">
+      <div id="feed-pane">
+        <div id="feed-head">
+          <h2>Live Feed</h2>
+          <span id="feed-sess">—</span>
+          <div id="feed-sess-nav">
+            <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-copy-sess" onclick="copySession()" title="Copy session as markdown">⎘ Copy</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>
+            <button class="sess-btn" id="btn-next-sess" onclick="nextSession()" title="Newer session">›</button>
+          </div>
+        </div>
+        <div id="feed-search">
+          <input id="feed-search-input" type="text" placeholder="Search feed…" oninput="filterFeed(this.value)" onkeydown="if(event.key==='Escape')closeFeedSearch()">
+          <span id="feed-search-count"></span>
+          <button id="feed-search-close" onclick="closeFeedSearch()">✕</button>
+        </div>
+        <div id="sess-ctx">
+          <button class="sctx-back" onclick="switchView('sessions')">← Sessions</button>
+          <span class="sctx-sep">/</span>
+          <span class="sctx-label" id="sctx-label"></span>
+          <button class="sctx-live" onclick="goLive()">⬤ Go live</button>
+        </div>
+        <div id="feed-timeline" title="Session tool activity timeline"></div>
+        <div id="feed-time-filter">
+          <span class="tf-lbl">Range</span>
+          <button class="tf-btn active" data-tf="all" onclick="setFeedTimeFilter('all')">All</button>
+          <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>
+        </div>
+        <div id="feed-scroll">
+          <div id="feed-content"><div class="loading-txt">Loading activity…</div></div>
+        </div>
+      </div>
+      <!-- detail panel (slides in over feed) -->
+      <div id="detail-panel">
+        <div id="detail-head">
+          <h3 id="detail-title">Detail</h3>
+          <button id="detail-close" onclick="closeDetail()">✕</button>
+        </div>
+        <div id="detail-body"></div>
+      </div>
+      <div id="metrics-pane">
+        <div id="m-today">
+          <div class="m-group-title">Today</div>
+          <div class="loading-txt">Loading…</div>
+        </div>
+        <div id="m-loops">
+          <div class="m-group-title">Active Loops</div>
+          <div class="loading-txt">Loading…</div>
+        </div>
+        <div id="m-sessions">
+          <div class="m-group-title">Recent Sessions</div>
+          <div class="loading-txt">Loading…</div>
+        </div>
+        <div id="m-breakdown">
+          <div class="m-group-title">Tool Usage</div>
+          <div class="loading-txt">—</div>
+        </div>
+      </div>
+    </div>
+    <!-- PROJECTS -->
+    <div class="view" id="view-projects">
+      <div class="vscroll">
+        <div class="pg-title">Projects</div>
+        <div class="pg-sub" id="proj-pg-sub">All monomind-enabled Claude Code projects</div>
+        <div class="filter-bar">
+          <input class="filter-input" id="proj-filter" type="text" placeholder="Filter projects…" oninput="filterProjects(this.value)">
+        </div>
+        <div id="proj-content" class="proj-grid"><div class="loading-txt">Loading…</div></div>
+      </div>
+    </div>
+    <!-- SESSIONS -->
+    <div class="view" id="view-sessions">
+      <div class="vscroll">
+        <div style="display:flex;align-items:baseline;gap:10px;margin-bottom:4px">
+          <div class="pg-title" style="margin-bottom:0">Sessions</div>
+          <button id="sess-star-filter" onclick="toggleSessStarFilter()" title="Show only bookmarked sessions">☆ Starred</button>
+        </div>
+        <div class="pg-sub" id="sess-pg-sub">Recent Claude Code sessions for this project</div>
+        <div id="sess-content" class="sess-list"><div class="loading-txt">Loading…</div></div>
+      </div>
+    </div>
+    <!-- LOOPS -->
+    <div class="view" id="view-loops">
+      <div class="vscroll">
+        <div class="pg-title">Loops</div>
+        <div class="pg-sub">Scheduled automation loops</div>
+        <div id="loops-content" class="loop-list"><div class="loading-txt">Loading…</div></div>
+      </div>
+    </div>
+    <!-- MEMORY -->
+    <div class="view" id="view-memory">
+      <div class="vscroll">
+        <div class="pg-title">Memory</div>
+        <div class="pg-sub">Knowledge palace — stored facts, graph, identity</div>
+        <div class="filter-bar">
+          <input class="filter-input" id="mem-filter" type="text" placeholder="Search memory…" oninput="filterMemory(this.value)">
+        </div>
+        <div id="mem-ns-tabs"></div>
+        <div id="mem-content"><div class="loading-txt">Loading…</div></div>
+      </div>
+    </div>
+    <!-- ORGS -->
+    <div class="view" id="view-orgs">
+      <div class="vscroll">
+        <div class="pg-title">Orgs</div>
+        <div class="pg-sub">MASTERMIND organizations and swarms</div>
+        <div id="orgs-content"><div class="loading-txt">Loading…</div></div>
+      </div>
+    </div>
+  </div><!-- /view-wrap -->
+</div><!-- /main -->
+</div><!-- /app -->
+<script>
+// ── state ──────────────────────────────────────────────────
+let DIR = '';
+let ORIGINAL_DIR = '';
+let gitUser = {};
+let currentView = 'now';
+let allSessions = [];
+let allProjects = [];
+let sessionIdx = 0;
+let pollTimer = null;
+let viewRendered = {};
+let userScrolled = false;
+let selectedEntryId = null;
+let allDrawers = [];
+let dismissedAlerts = new Set();
+let alertState = { todayCost: 0, errorCount: 0, longLoops: [], anomaly: null };
+let feedTimeFilter = 'all';
+let cmdFocusIdx = 0;
+let cmdItems = [];
+let liveTailMode = false;
+let liveTailTimer = null;
+let bookmarks = new Set(JSON.parse(localStorage.getItem('mm-bookmarks') || '[]'));
+let showStarredOnly = false;
+// ── nav ────────────────────────────────────────────────────
+document.querySelectorAll('.nav-item[data-view]').forEach(el => {
+  el.addEventListener('click', () => switchView(el.dataset.view));
+});
+document.getElementById('feed-scroll').addEventListener('scroll', () => {
+  userScrolled = document.getElementById('feed-scroll').scrollTop > 50;
+});
+function switchView(v) {
+  currentView = v;
+  document.querySelectorAll('.nav-item[data-view]').forEach(el =>
+    el.classList.toggle('active', el.dataset.view === v));
+  document.querySelectorAll('.view').forEach(el =>
+    el.classList.toggle('active', el.id === 'view-' + v));
+  const titles = { now:'Now', projects:'Projects', sessions:'Sessions', loops:'Loops', memory:'Memory', orgs:'Orgs' };
+  document.getElementById('view-title').textContent = titles[v] || v;
+  if (!viewRendered[v]) { renderView(v); viewRendered[v] = true; }
+}
+function renderView(v) {
+  if (v === 'now') { refreshNow(); return; }
+  if (v === 'projects') renderProjects();
+  if (v === 'sessions') renderSessions();
+  if (v === 'loops') renderLoops();
+  if (v === 'memory') renderMemory();
+  if (v === 'orgs') renderOrgs();
+}
+function refreshCurrent() {
+  viewRendered[currentView] = false;
+  renderView(currentView);
+}
+// ── init ───────────────────────────────────────────────────
+async function init() {
+  try {
+    const gu = await apiFetch('/api/git-user');
+    DIR = gu.cwd || '';
+    ORIGINAL_DIR = DIR;
+    gitUser = gu;
+    document.getElementById('sb-user').textContent = gu.name || gu.email || '—';
+    document.getElementById('sb-path').textContent = DIR;
+    document.getElementById('sb-proj').textContent = DIR.split('/').filter(Boolean).pop() || '—';
+  } catch (_) {}
+  viewRendered['now'] = true; // prevents switchView from re-rendering NOW on jumpToSession
+  await refreshNow();
+  startPolling();
+}
+function startPolling() {
+  clearInterval(pollTimer);
+  pollTimer = setInterval(() => { if (currentView === 'now') refreshNowSilent(); }, 30000);
+}
+async function apiFetch(url) {
+  const r = await fetch(url);
+  if (!r.ok) throw new Error(r.status);
+  return r.json();
+}
+// ── project switching ──────────────────────────────────────
+function switchProject(path) {
+  if (DIR === path) { switchView('sessions'); return; }
+  DIR = path;
+  document.getElementById('sb-proj').textContent = path.split('/').filter(Boolean).pop() || '—';
+  document.getElementById('sb-path').textContent = path;
+  viewRendered = {};
+  allSessions = [];
+  closeDetail();
+  switchView('sessions');
+}
+// ── NOW view ───────────────────────────────────────────────
+async function refreshNow() {
+  userScrolled = false;
+  await Promise.allSettled([loadFeed(), loadMetrics()]);
+}
+async function refreshNowSilent() {
+  if (liveTailMode) { userScrolled = false; sessionIdx = 0; }
+  await Promise.allSettled([loadFeedSilent(), loadMetrics()]);
+}
+// ── live tail ──────────────────────────────────────────────
+function toggleLiveTail() {
+  liveTailMode = !liveTailMode;
+  const btn = document.getElementById('btn-live-tail');
+  btn.classList.toggle('on', liveTailMode);
+  btn.title = liveTailMode ? 'Live tail ON — click to disable' : 'Toggle live tail (5s refresh + auto-scroll)';
+  clearInterval(liveTailTimer);
+  if (liveTailMode) {
+    // jump to newest session and start fast polling
+    if (sessionIdx !== 0 && allSessions.length) { sessionIdx = 0; userScrolled = false; loadFeedForSession(allSessions[0]); }
+    liveTailTimer = setInterval(() => { if (currentView === 'now') refreshNowSilent(); }, 5000);
+  } else {
+    startPolling();
+  }
+}
+// session nav
+function prevSession() {
+  if (sessionIdx < allSessions.length - 1) { sessionIdx++; userScrolled = false; loadFeedForSession(allSessions[sessionIdx]); }
+}
+function nextSession() {
+  if (sessionIdx > 0) { sessionIdx--; userScrolled = false; loadFeedForSession(allSessions[sessionIdx]); }
+}
+async function loadFeed() {
+  if (!DIR) return;
+  try {
+    const { sessions = [] } = await apiFetch('/api/session-journal?dir=' + enc(DIR));
+    allSessions = sessions;
+    document.getElementById('bdg-sessions').textContent = sessions.length || '—';
+    if (!sessions.length) {
+      setFeedContent('<div class="feed-empty">No sessions yet in this project.</div>');
+      return;
+    }
+    sessionIdx = 0;
+    await loadFeedForSession(sessions[0]);
+    renderMiniSessions(sessions.slice(0, 6));
+    // patch sparkline now that allSessions is populated
+    const todayEl = document.getElementById('m-today');
+    const sparkWrap = todayEl?.querySelector('.spark-wrap');
+    if (sparkWrap) sparkWrap.outerHTML = buildSparkline();
+    detectAnomalies();
+  } catch (err) {
+    setFeedContent('<div class="feed-empty">Could not load feed: ' + esc(err.message) + '</div>');
+  }
+}
+async function loadFeedSilent() {
+  if (!DIR || !allSessions.length) return;
+  try {
+    const { sessions = [] } = await apiFetch('/api/session-journal?dir=' + enc(DIR));
+    allSessions = sessions;
+    if (!sessions.length) return;
+    const currentSess = allSessions[sessionIdx] || sessions[0];
+    if (!currentSess?.file) return;
+    const data = await apiFetch('/api/session?dir=' + enc(DIR) + '&file=' + enc(currentSess.file) + '&limit=120');
+    renderFeedEvents(data.events || [], true);
+  } catch (_) {}
+}
+async function loadFeedForSession(sess) {
+  if (!sess) return;
+  document.getElementById('feed-sess').textContent = sess.id.slice(0, 8) + '…';
+  document.getElementById('btn-prev-sess').style.opacity = sessionIdx < allSessions.length - 1 ? '1' : '0.3';
+  document.getElementById('btn-next-sess').style.opacity = sessionIdx > 0 ? '1' : '0.3';
+  showSessCtx(sess);
+  if (!sess.file) { setFeedContent('<div class="feed-empty">Session file path unavailable.</div>'); return; }
+  try {
+    const data = await apiFetch('/api/session?dir=' + enc(DIR) + '&file=' + enc(sess.file) + '&limit=120');
+    renderFeedEvents(data.events || [], false);
+  } catch (err) {
+    setFeedContent('<div class="feed-empty">Could not load session: ' + esc(err.message) + '</div>');
+  }
+}
+// ── feed rendering ─────────────────────────────────────────
+// pre-pass: mark tool events as errored based on their tool_result
+function annotateErrors(events) {
+  const byId = new Map();
+  events.forEach((ev, i) => { if (ev.kind === 'tool' && ev.id) byId.set(ev.id, i); });
+  events.forEach(ev => {
+    if (ev.kind === 'tool_result' && ev.isError && ev.tool_use_id) {
+      const idx = byId.get(ev.tool_use_id);
+      if (idx != null) events[idx]._errored = true;
+    }
+  });
+}
+// group consecutive same-cat tool events (threshold: 3+)
+function groupEvents(events) {
+  const out = [];
+  let i = 0;
+  while (i < events.length) {
+    const ev = events[i];
+    if (ev.kind !== 'tool') { out.push(ev); i++; continue; }
+    // look ahead for same cat run
+    let j = i + 1;
+    while (j < events.length && events[j].kind === 'tool' && events[j].cat === ev.cat && !events[j]._errored && !ev._errored) j++;
+    const run = j - i;
+    if (run >= 3) {
+      out.push({ kind: '_group', cat: ev.cat, count: run, label: catLabel(ev.cat), ts: ev.ts, items: events.slice(i, j) });
+      i = j;
+    } else {
+      out.push(ev); i++;
+    }
+  }
+  return out;
+}
+function catLabel(c) {
+  const m = { file:'file operations', bash:'shell commands', agent:'agent spawns', mcp:'MCP calls', search:'searches', skill:'skills', task:'task writes', mem:'memory ops', other:'tool calls' };
+  return m[c] || 'tool calls';
+}
+function renderFeedEvents(events, silent) {
+  if (!events.length) {
+    if (!silent) setFeedContent('<div class="feed-empty">No events in this session yet.</div>');
+    return;
+  }
+  annotateErrors(events);
+  // filter: only tool + user, skip text/thinking/tool_result and hook system messages
+  const HOOK_RE = /^<(local-command-|command-name>|command-message>|local-command-caveat>)/;
+  const filtered = events.filter(ev =>
+    ev.kind === 'tool' ||
+    (ev.kind === 'user' && ev.text?.trim() && !HOOK_RE.test(ev.text.trim())));
+  // apply time-range filter
+  let visible = filtered;
+  if (feedTimeFilter !== 'all') {
+    const ms = { '1h': 3600000, '6h': 21600000, '24h': 86400000 }[feedTimeFilter] || 0;
+    const cutoff = Date.now() - ms;
+    visible = filtered.filter(ev => !ev.ts || new Date(ev.ts).getTime() >= cutoff);
+  }
+  // update error alert state
+  alertState.errorCount = visible.filter(ev => ev._errored).length;
+  updateAlerts();
+  // reverse (newest first), then group
+  const reversed = [...visible].reverse();
+  const grouped = groupEvents(reversed);
+  const parts = [];
+  let prevKind = null;
+  for (const item of grouped) {
+    if (item.kind === '_group') {
+      parts.push(renderGroupRow(item));
+      prevKind = 'tool';
+      continue;
+    }
+    if (prevKind === 'user' && item.kind === 'tool') {
+      parts.push('<div class="feed-divider"></div>');
+    } else if (prevKind === 'tool' && item.kind === 'user') {
+      parts.push('<div class="feed-divider"></div>');
+    }
+    parts.push(renderFeedEntry(item));
+    prevKind = item.kind;
+  }
+  const newHtml = parts.join('');
+  if (silent) {
+    const el = document.getElementById('feed-content');
+    if (el.innerHTML === newHtml) return;
+    const wasAtTop = !userScrolled;
+    el.innerHTML = newHtml;
+    if (wasAtTop) document.getElementById('feed-scroll').scrollTop = 0;
+  } else {
+    setFeedContent(newHtml);
+    if (!userScrolled) document.getElementById('feed-scroll').scrollTop = 0;
+  }
+  // update timeline + breakdown with all original events (before time-filter)
+  buildTimeline(filtered);
+  buildBreakdown(filtered);
+}
+function renderGroupRow(g) {
+  const { ico, catCls } = toolStyle(g.cat, '');
+  const itemsData = JSON.stringify(g.items).replace(/'/g, '&#39;');
+  return `<div class="feed-group" data-items='${itemsData}' onclick="expandGroup(this)">
+    <div class="feed-ico ${catCls}" style="font-size:9px">${ico}</div>
+    <span class="fg-label">${g.count} ${esc(g.label)}</span>
+    <span class="fg-expand">▸ expand</span>
+  </div>`;
+}
+function expandGroup(el) {
+  const items = JSON.parse(el.dataset.items);
+  const html = items.map(renderFeedEntry).join('');
+  el.outerHTML = html;
+  // re-apply active feed search to newly injected entries
+  const q = document.getElementById('feed-search-input')?.value || '';
+  if (feedSearchActive && q) filterFeed(q);
+}
+function renderFeedEntry(ev) {
+  const ts = ev.ts ? relTime(ev.ts) : '';
+  let lbl = '', detail = '', id = ev.id || ev.uuid || '';
+  let catCls, ico;
+  if (ev.kind === 'tool') {
+    ({ ico, catCls } = toolStyle(ev.cat, ev.name));
+    lbl = esc(ev.label || ev.name || 'tool');
+    if (ev.subagent) detail = esc(ev.subagent);
+  } else {
+    ico = '↵'; catCls = 'cat-user';
+    const t = (ev.text || '').trim();
+    lbl = esc(t.length > 90 ? t.slice(0, 90) + '…' : t);
+  }
+  const errClass = ev._errored ? ' errored' : '';
+  const selClass = selectedEntryId && selectedEntryId === id ? ' selected' : '';
+  const evData = JSON.stringify(ev).replace(/'/g, '&#39;');
+  return `<div class="feed-entry k-${ev.kind}${errClass}${selClass}" data-ev='${evData}' onclick="openDetail(this.dataset.ev)">
+    <div class="feed-ico ${catCls}">${ico}</div>
+    <div class="feed-body">
+      <div class="feed-lbl">${lbl}</div>
+      ${detail ? `<div class="feed-detail">${detail}</div>` : ''}
+    </div>
+    <div class="feed-ts">${ts}</div>
+  </div>`;
+}
+function toolStyle(cat, name) {
+  const map = {
+    file:   { ico: '◧', catCls: 'cat-file' },
+    bash:   { ico: '$', catCls: 'cat-bash' },
+    agent:  { ico: '→', catCls: 'cat-agent' },
+    mcp:    { ico: '⬡', catCls: 'cat-mcp' },
+    search: { ico: '/', catCls: 'cat-search' },
+    skill:  { ico: '◆', catCls: 'cat-skill' },
+    task:   { ico: '☑', catCls: 'cat-task' },
+    mem:    { ico: '◈', catCls: 'cat-mem' },
+  };
+  if (name === 'Skill') return { ico: '◆', catCls: 'cat-skill' };
+  return map[cat] || { ico: '·', catCls: 'cat-other' };
+}
+function setFeedContent(html) {
+  document.getElementById('feed-content').innerHTML = html;
+}
+// ── detail panel ───────────────────────────────────────────
+function openDetail(evJson) {
+  const ev = JSON.parse(evJson);
+  selectedEntryId = ev.id || ev.uuid || '';
+  const panel = document.getElementById('detail-panel');
+  panel.classList.add('open');
+  let title = '';
+  let bodyHtml = '';
+  if (ev.kind === 'tool') {
+    const { catCls } = toolStyle(ev.cat, ev.name);
+    title = ev.name || 'Tool';
+    bodyHtml = `
+      <div class="d-cat-pill ${catCls}" style="font-size:11px">${esc(ev.cat || 'other')}</div>
+      <div class="d-row"><div class="d-lbl">Label</div><div class="d-val">${esc(ev.label || ev.name)}</div></div>
+      ${ev.subagent ? `<div class="d-row"><div class="d-lbl">Subagent</div><div class="d-val">${esc(ev.subagent)}</div></div>` : ''}
+      ${ev._errored ? `<div class="d-row"><div class="d-lbl">Status</div><div class="d-val error">Error</div></div>` : ''}
+      <div class="d-row"><div class="d-lbl">Time</div><div class="d-val">${ev.ts ? new Date(ev.ts).toLocaleTimeString() : '—'}</div></div>
+      <div class="d-row"><div class="d-lbl">Tool ID</div><div class="d-val mono">${esc((ev.id || '').slice(0, 24))}</div></div>
+    `;
+  } else if (ev.kind === 'user') {
+    title = 'User message';
+    bodyHtml = `
+      <div class="d-row"><div class="d-lbl">Time</div><div class="d-val">${ev.ts ? new Date(ev.ts).toLocaleTimeString() : '—'}</div></div>
+      <div class="d-row"><div class="d-lbl">Message</div><div class="d-val" style="white-space:pre-wrap">${esc(ev.text || '')}</div></div>
+    `;
+  }
+  document.getElementById('detail-title').textContent = title;
+  document.getElementById('detail-body').innerHTML = bodyHtml;
+}
+function closeDetail() {
+  document.getElementById('detail-panel').classList.remove('open');
+  selectedEntryId = null;
+}
+// ── 12-week calendar heatmap ───────────────────────────────
+function buildSparkline() {
+  const DAY = 86400000;
+  const now = Date.now();
+  const WEEKS = 12;
+  const DAYS = WEEKS * 7; // 84 days
+  const buckets = new Array(DAYS).fill(0);
+  for (const s of allSessions) {
+    const ts = s.lastTs || s.mtime;
+    if (!ts) continue;
+    const age = now - (typeof ts === 'number' ? ts : new Date(ts).getTime());
+    const idx = DAYS - 1 - Math.floor(age / DAY);
+    if (idx >= 0 && idx < DAYS) buckets[idx]++;
+  }
+  const max = Math.max(...buckets, 1);
+  // offset so first cell starts on Monday of the week 12 weeks ago
+  const todayDow = new Date().getDay(); // 0=Sun
+  // pad start so column 0 begins on Monday
+  const startOffset = todayDow === 0 ? 6 : todayDow - 1;
+  const cells = buckets.map((v, i) => {
+    const isToday = i === DAYS - 1;
+    const level = v === 0 ? 0 : Math.min(4, Math.ceil(v / max * 4));
+    const d = new Date(now - (DAYS - 1 - i) * DAY);
+    const label = d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+    const title = `${label}: ${v} session${v !== 1 ? 's' : ''}`;
+    return `<div class="cal-cell cal-${level}${isToday ? ' cal-today' : ''}" title="${title}"></div>`;
+  });
+  return `<div class="spark-wrap"><div class="spark-lbl">12-week activity ${buildWowDelta()}</div><div class="cal-grid">${cells.join('')}</div></div>`;
+}
+// ── alerts rail ────────────────────────────────────────────
+function updateAlerts() {
+  const rail = document.getElementById('alerts-rail');
+  const all = [];
+  if (alertState.todayCost > 50) {
+    all.push({ id: 'cost-crit', cls: 'alert-crit', ico: '⚑', msg: `Critical spend: $${alertState.todayCost.toFixed(2)} today` });
+  } else if (alertState.todayCost > 20) {
+    all.push({ id: 'cost-warn', cls: 'alert-warn', ico: '⚠', msg: `High spend: $${alertState.todayCost.toFixed(2)} today` });
+  }
+  if (alertState.errorCount >= 3) {
+    all.push({ id: 'feed-errors', cls: 'alert-warn', ico: '⚠', msg: `${alertState.errorCount} errors in current session`, action: 'jumpToErrors()' });
+  }
+  if (alertState.anomaly) {
+    all.push({ id: 'anomaly-sess', cls: 'alert-warn', ico: '◎', msg: alertState.anomaly });
+  }
+  for (const l of alertState.longLoops) {
+    all.push({ id: 'loop-' + l, cls: 'alert-warn', ico: '↺', msg: `Long-running loop: ${l}` });
+  }
+  const visible = all.filter(a => !dismissedAlerts.has(a.id));
+  if (!visible.length) {
+    rail.className = '';
+    rail.innerHTML = '';
+    return;
+  }
+  rail.className = 'has-alerts';
+  rail.innerHTML = visible.map(a =>
+    `<div class="alert-item ${a.cls}" data-alert-id="${a.id}"${a.action ? ` onclick="${a.action}" style="cursor:pointer"` : ''}>
+      <span class="al-ico">${a.ico}</span>${esc(a.msg)}<span class="al-x" onclick="event.stopPropagation();dismissAlert('${a.id}')">✕</span>
+    </div>`).join('');
+}
+function dismissAlert(id) {
+  dismissedAlerts.add(id);
+  updateAlerts();
+}
+// ── anomaly detection ──────────────────────────────────────
+function detectAnomalies() {
+  const withCost = allSessions.filter(s => typeof (s.totalCost ?? s.cost) === 'number');
+  if (withCost.length < 3) { alertState.anomaly = null; updateAlerts(); return; }
+  const avg = withCost.reduce((sum, s) => sum + (s.totalCost ?? s.cost ?? 0), 0) / withCost.length;
+  const curr = allSessions[sessionIdx];
+  const currCost = typeof curr?.totalCost === 'number' ? curr.totalCost : (typeof curr?.cost === 'number' ? curr.cost : null);
+  if (currCost !== null && avg > 0.05 && currCost > avg * 2.5 && currCost > 0.5) {
+    alertState.anomaly = `Session unusually costly: $${currCost.toFixed(2)} vs $${avg.toFixed(2)} avg`;
+  } else {
+    alertState.anomaly = null;
+  }
+  updateAlerts();
+}
+// ── session context bar ────────────────────────────────────
+function showSessCtx(sess) {
+  const bar = document.getElementById('sess-ctx');
+  const isLive = !sess || !allSessions.length || allSessions[0]?.id === sess.id;
+  if (isLive) {
+    bar.classList.remove('show');
+    return;
+  }
+  document.getElementById('sctx-label').textContent = sess.lastPrompt || sess.id.slice(0, 16) + '…';
+  bar.classList.add('show');
+}
+function goLive() {
+  if (!allSessions.length) return;
+  sessionIdx = 0;
+  userScrolled = false;
+  loadFeedForSession(allSessions[0]);
+}
+// ── metrics ────────────────────────────────────────────────
+async function loadMetrics() {
+  if (!DIR) return;
+  await Promise.allSettled([loadTodayMetrics(), loadLoopMetrics()]);
+}
+async function loadTodayMetrics() {
+  try {
+    const data = await apiFetch('/api/section?name=tokens&dir=' + enc(DIR));
+    const s = data?.tokens?.summary || {};
+    alertState.todayCost = typeof s.todayCost === 'number' ? s.todayCost : 0;
+    updateAlerts();
+    // topbar cost badge
+    const badge = document.getElementById('topbar-cost');
+    if (badge && typeof s.todayCost === 'number') {
+      badge.textContent = '$' + s.todayCost.toFixed(2) + ' today';
+      badge.classList.add('loaded');
+    }
+    const cost  = typeof s.todayCost  === 'number' ? '$' + s.todayCost.toFixed(2)  : '—';
+    const calls = s.todayCalls != null ? s.todayCalls : '—';
+    const moCost = typeof s.monthCost === 'number' ? '$' + s.monthCost.toFixed(2) : '—';
+    // cost forecast: project monthly spend from daily average
+    let forecast = '';
+    if (typeof s.monthCost === 'number' && s.monthCost > 0) {
+      const day = new Date().getDate();
+      const daysInMonth = new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).getDate();
+      const projected = (s.monthCost / day) * daysInMonth;
+      forecast = `<div class="m-row"><span class="m-name">Month forecast</span><span class="m-val forecast">~$${projected.toFixed(2)}</span></div>`;
+    }
+    document.getElementById('m-today').innerHTML = `
+      <div class="m-group-title">Today</div>
+      <div class="m-row"><span class="m-name">API cost</span><span class="m-val gold">${cost}</span></div>
+      <div class="m-row"><span class="m-name">API calls</span><span class="m-val">${calls}</span></div>
+      <div class="m-row"><span class="m-name">Month total</span><span class="m-val">${moCost}</span></div>
+      ${forecast}
+      ${buildSparkline()}
+    `;
+  } catch (_) {
+    document.getElementById('m-today').innerHTML = `<div class="m-group-title">Today</div><div class="loading-txt">—</div>`;
+  }
+}
+async function loadLoopMetrics() {
+  try {
+    const data = await apiFetch('/api/loops?dir=' + enc(DIR));
+    const loops = Array.isArray(data) ? data : (data.loops || []);
+    document.getElementById('bdg-loops').textContent = loops.length || '—';
+    // alert on loops running > 2h
+    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)
+      .map(l => (l.name || l.prompt || 'loop').split('--')[0].trim().slice(0, 30));
+    updateAlerts();
+    if (!loops.length) {
+      document.getElementById('m-loops').innerHTML = `<div class="m-group-title">Active Loops</div><div class="loading-txt" style="padding:8px 0">None</div>`;
+      return;
+    }
+    const items = loops.slice(0, 5).map(l => {
+      const name = (l.name || l.prompt || 'loop').split('--')[0].trim().slice(0, 36);
+      return `<div class="mini-loop">
+        <div class="ml-name">${esc(name)}</div>
+        <div class="ml-meta"><span class="ml-dot"></span>${esc(l.interval || l.schedule || 'running')}</div>
+      </div>`;
+    }).join('');
+    document.getElementById('m-loops').innerHTML = `<div class="m-group-title">Active Loops</div>${items}`;
+  } catch (_) {
+    document.getElementById('m-loops').innerHTML = `<div class="m-group-title">Active Loops</div><div class="loading-txt">—</div>`;
+  }
+}
+function renderMiniSessions(sessions) {
+  if (!sessions.length) return;
+  const items = sessions.map((s, i) => `
+    <div class="mini-sess" onclick="sessionIdx=${i};userScrolled=false;loadFeedForSession(allSessions[${i}])">
+      <div class="ms-prompt">${esc(s.lastPrompt || s.id.slice(0, 8))}</div>
+      <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}`;
+}
+// ── projects ───────────────────────────────────────────────
+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 || [];
+    document.getElementById('bdg-projects').textContent = allProjects.length || '—';
+    document.getElementById('proj-pg-sub').textContent =
+      allProjects.length + ' project' + (allProjects.length !== 1 ? 's' : '') + ' found';
+    renderProjectGrid(allProjects, '');
+  } catch (err) {
+    el.innerHTML = '<div class="empty">Could not load projects: ' + esc(err.message) + '</div>';
+  }
+}
+function renderProjectGrid(projects, query) {
+  const el = document.getElementById('proj-content');
+  const filtered = query ? projects.filter(p =>
+    (p.name || p.slug || '').toLowerCase().includes(query.toLowerCase()) ||
+    (p.path || '').toLowerCase().includes(query.toLowerCase())) : projects;
+  if (!filtered.length) {
+    el.innerHTML = '<div class="empty"><div class="empty-ico">⊞</div><div>No projects match</div></div>';
+    return;
+  }
+  el.className = 'proj-grid';
+  el.innerHTML = filtered.map(p => {
+    const isCurrent = p.path === DIR;
+    return `<div class="proj-card${isCurrent ? ' current' : ''}" onclick="switchProject('${esc(p.path || '')}')">
+      ${isCurrent ? '<div class="proj-card-badge">active</div>' : ''}
+      <div class="proj-card-name">${esc(p.name || p.slug)}</div>
+      <div class="proj-card-path">${esc(p.path || '')}</div>
+      <div class="proj-card-stats">
+        <div class="proj-stat"><div class="ps-v">${p.sessionCount || 0}</div><div class="ps-l">sessions</div></div>
+        <div class="proj-stat"><div class="ps-v">${p.memoryCount || 0}</div><div class="ps-l">memories</div></div>
+        ${p.lastActivity ? `<div class="proj-stat"><div class="ps-v" style="font-size:12px">${relTime(p.lastActivity)}</div><div class="ps-l">last active</div></div>` : ''}
+      </div>
+    </div>`;
+  }).join('');
+}
+function filterProjects(q) {
+  renderProjectGrid(allProjects, q);
+}
+// ── sessions ───────────────────────────────────────────────
+async function renderSessions() {
+  const el = document.getElementById('sess-content');
+  el.innerHTML = '<div class="loading-txt">Loading…</div>';
+  try {
+    const { sessions = [] } = await apiFetch('/api/session-journal?dir=' + enc(DIR));
+    allSessions = sessions; // always sync — stale ordering breaks jumpToSession
+    document.getElementById('bdg-sessions').textContent = sessions.length || '—';
+    document.getElementById('sess-pg-sub').textContent =
+      sessions.length + ' session' + (sessions.length !== 1 ? 's' : '') + ' · ' + (DIR.split('/').pop() || DIR);
+    if (!sessions.length) {
+      el.innerHTML = '<div class="empty"><div class="empty-ico">◫</div><div>No sessions yet</div></div>';
+      return;
+    }
+    const toShow = showStarredOnly ? sessions.filter(s => bookmarks.has(s.id)) : sessions;
+    if (!toShow.length) {
+      el.innerHTML = '<div class="empty"><div class="empty-ico">☆</div><div>No bookmarked sessions</div></div>';
+      return;
+    }
+    el.innerHTML = toShow.map(s => {
+      const dur  = s.totalDurationMs ? fmtDur(s.totalDurationMs) : '';
+      const msgs = s.totalMessages ? s.totalMessages + ' msg' : '';
+      const cost = typeof s.totalCost === 'number' ? '$' + s.totalCost.toFixed(2)
+                 : typeof s.cost === 'number' ? '$' + s.cost.toFixed(2) : '';
+      const meta = [dur, msgs, cost].filter(Boolean).join(' · ') || s.id.slice(0, 16);
+      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 isStarred = bookmarks.has(s.id);
+      return `<div class="sess-row" onclick="jumpToSession('${esc(s.id)}')">
+        <div class="sr-top">
+          <div class="sr-prompt">${esc(s.lastPrompt || s.id)}</div>
+          <div class="sr-time">${relTime(s.lastTs || s.mtime)}</div>
+          <button class="sess-star${isStarred ? ' on' : ''}" data-sid="${esc(s.id)}" onclick="toggleBookmark('${esc(s.id)}',event)" title="${isStarred ? 'Remove bookmark' : 'Bookmark session'}">${isStarred ? '★' : '☆'}</button>
+          <span class="sr-view">→ view</span>
+        </div>
+        <div class="sr-meta">${esc(meta)}</div>
+        ${summaries ? `<div class="sr-tags">${summaries}</div>` : ''}
+      </div>`;
+    }).join('');
+  } catch (err) {
+    el.innerHTML = '<div class="empty">Could not load sessions: ' + esc(err.message) + '</div>';
+  }
+}
+function jumpToSession(id) {
+  switchView('now');
+  setTimeout(() => {
+    const i = allSessions.findIndex(x => x.id === id);
+    if (i >= 0) { sessionIdx = i; userScrolled = false; loadFeedForSession(allSessions[i]); }
+  }, 80);
+}
+// ── session bookmarks ──────────────────────────────────────
+function toggleBookmark(id, e) {
+  e.stopPropagation();
+  if (bookmarks.has(id)) bookmarks.delete(id);
+  else bookmarks.add(id);
+  localStorage.setItem('mm-bookmarks', JSON.stringify([...bookmarks]));
+  document.querySelectorAll('.sess-star[data-sid="' + id + '"]').forEach(el => {
+    const on = bookmarks.has(id);
+    el.classList.toggle('on', on);
+    el.textContent = on ? '★' : '☆';
+    el.title = on ? 'Remove bookmark' : 'Bookmark session';
+  });
+}
+function toggleSessStarFilter() {
+  showStarredOnly = !showStarredOnly;
+  const btn = document.getElementById('sess-star-filter');
+  btn.classList.toggle('on', showStarredOnly);
+  // re-render with filter
+  viewRendered['sessions'] = false;
+  renderSessions();
+  viewRendered['sessions'] = true;
+}
+// ── loops ──────────────────────────────────────────────────
+async function renderLoops() {
+  const el = document.getElementById('loops-content');
+  el.innerHTML = '<div class="loading-txt">Loading…</div>';
+  try {
+    const data = await apiFetch('/api/loops?dir=' + enc(DIR));
+    const loops = Array.isArray(data) ? data : (data.loops || []);
+    document.getElementById('bdg-loops').textContent = loops.length || '—';
+    if (!loops.length) {
+      el.innerHTML = '<div class="empty"><div class="empty-ico">↺</div><div>No loops scheduled</div></div>';
+      return;
+    }
+    el.innerHTML = loops.map((l, idx) => {
+      const running = l.running !== false;
+      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 : '—';
+      return `<div class="loop-row" onclick="toggleLoop(this)">
+          <div class="loop-ico">↺</div>
+          <div class="loop-body">
+            <div class="loop-name">${esc(name)}</div>
+            <div class="loop-meta">${esc([interval, l.description].filter(Boolean).join(' · ').slice(0, 80))}</div>
+          </div>
+          <div class="loop-status ${running ? 'active' : 'stopped'}">${running ? 'active' : 'stopped'}</div>
+        </div>
+        <div class="loop-expand">
+          ${fullPrompt ? `<div class="le-row"><div class="le-lbl">Prompt</div><div class="le-val mono">${esc(fullPrompt.slice(0, 300))}</div></div>` : ''}
+          <div class="le-row"><div class="le-lbl">Interval</div><div class="le-val">${esc(interval || '—')}</div></div>
+          <div class="le-row"><div class="le-lbl">Status</div><div class="le-val">${running ? '● running' : '○ stopped'}</div></div>
+          <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>
+        </div>`;
+    }).join('');
+  } catch (err) {
+    el.innerHTML = '<div class="empty">Could not load loops: ' + esc(err.message) + '</div>';
+  }
+}
+function toggleLoop(row) {
+  row.classList.toggle('open');
+}
+// ── memory ─────────────────────────────────────────────────
+async function renderMemory() {
+  activeMemNs = 'All'; // reset on every render so stale filter doesn't persist
+  const el = document.getElementById('mem-content');
+  el.innerHTML = '<div class="loading-txt">Loading…</div>';
+  try {
+    const data = await apiFetch('/api/palace?dir=' + enc(DIR));
+    allDrawers = data.drawers || [];
+    const identity = data.identity || '';
+    let html = '';
+    if (identity) {
+      html += `<div class="mem-section">
+        <div class="mem-title">Identity</div>
+        <div class="drawer-item"><div class="dr-val" style="white-space:pre-wrap">${esc(identity.slice(0, 1200))}</div></div>
+      </div>`;
+    }
+    if (allDrawers.length) {
+      // build namespace tabs
+      const namespaces = ['All', ...new Set(allDrawers.map(d => d.namespace || 'default').filter(Boolean))];
+      const tabsEl = document.getElementById('mem-ns-tabs');
+      if (tabsEl) {
+        tabsEl.innerHTML = namespaces.map((ns, i) =>
+          `<button class="ns-tab${i === 0 ? ' active' : ''}" data-ns="${esc(ns)}" onclick="filterMemoryNs('${esc(ns)}')">${esc(ns)}</button>`
+        ).join('');
+      }
+      const items = allDrawers.map((d, i) =>
+        `<div class="drawer-item" data-idx="${i}" data-ns="${esc(d.namespace || 'default')}">
+          <div class="dr-key">${esc(d.key || d.namespace || '—')}</div>
+          <div class="dr-val">${esc(String(d.value || d.text || '').slice(0, 300))}</div>
+          ${d.timestamp ? `<div class="dr-ts">${relTime(d.timestamp)}</div>` : ''}
+        </div>`).join('');
+      html += `<div class="mem-section" id="drawers-section">
+        <div class="mem-title">Drawers (${allDrawers.length})</div>
+        <div id="drawers-list">${items}</div>
+      </div>`;
+    }
+    if (!html) html = '<div class="empty"><div class="empty-ico">◈</div><div>Memory palace is empty</div></div>';
+    el.innerHTML = html;
+  } catch (err) {
+    el.innerHTML = '<div class="empty">Could not load memory: ' + esc(err.message) + '</div>';
+  }
+}
+let activeMemNs = 'All';
+function filterMemory(q) {
+  const items = document.querySelectorAll('#drawers-list .drawer-item');
+  const lq = q.toLowerCase();
+  items.forEach(item => {
+    const key = (item.querySelector('.dr-key')?.textContent || '').toLowerCase();
+    const val = (item.querySelector('.dr-val')?.textContent || '').toLowerCase();
+    const nsMatch = activeMemNs === 'All' || (item.dataset.ns === activeMemNs);
+    item.classList.toggle('hidden', !nsMatch || (!!lq && !key.includes(lq) && !val.includes(lq)));
+  });
+}
+function filterMemoryNs(ns) {
+  activeMemNs = ns;
+  document.querySelectorAll('.ns-tab').forEach(t => t.classList.toggle('active', t.dataset.ns === ns));
+  filterMemory(document.getElementById('mem-filter')?.value || '');
+}
+// ── orgs ───────────────────────────────────────────────────
+async function renderOrgs() {
+  const el = document.getElementById('orgs-content');
+  el.innerHTML = '<div class="loading-txt">Loading…</div>';
+  try {
+    const data = await apiFetch('/api/orgs');
+    const orgs = Array.isArray(data) ? data : (data.orgs || []);
+    if (!orgs.length) {
+      el.innerHTML = '<div class="empty"><div class="empty-ico">⬡</div><div>No MASTERMIND orgs found</div></div>';
+      return;
+    }
+    el.innerHTML = '<div class="org-list">' + orgs.map(o =>
+      `<div class="org-row">
+        <div class="org-name">${esc(o.name || o.id || '—')}</div>
+        <div class="org-meta">${esc(o.description || (o.agents != null ? o.agents + ' agents' : ''))}</div>
+      </div>`).join('') + '</div>';
+  } catch (err) {
+    el.innerHTML = '<div class="empty">Could not load orgs: ' + esc(err.message) + '</div>';
+  }
+}
+// ── density toggle ─────────────────────────────────────────
+let compactMode = false;
+function toggleDensity() {
+  compactMode = !compactMode;
+  const pane = document.getElementById('feed-pane');
+  const btn  = document.getElementById('btn-density');
+  pane.classList.toggle('compact', compactMode);
+  btn.classList.toggle('compact-on', compactMode);
+  btn.title = compactMode ? 'Switch to comfortable view' : 'Toggle compact view';
+}
+// ── session timeline ────────────────────────────────────────
+const TL_COLORS = {
+  file:   'oklch(65% 0.15 150)',
+  bash:   'oklch(65% 0.12 240)',
+  agent:  'oklch(65% 0.13 290)',
+  mcp:    'oklch(65% 0.12 195)',
+  search: 'oklch(65% 0.14 35)',
+  skill:  'oklch(72% 0.18 75)',
+  task:   'oklch(62% 0.12 55)',
+  mem:    'oklch(62% 0.11 160)',
+  user:   'oklch(55% 0.08 75 / 0.5)',
+  other:  'oklch(32% 0.005 75)',
+};
+function buildTimeline(events) {
+  const tl = document.getElementById('feed-timeline');
+  if (!tl) return;
+  // Only tool + user events with timestamps
+  const stamped = events.filter(ev => ev.ts && (ev.kind === 'tool' || ev.kind === 'user'));
+  if (stamped.length < 2) { tl.innerHTML = ''; return; }
+  const times = stamped.map(ev => new Date(ev.ts).getTime());
+  const tMin = Math.min(...times), tMax = Math.max(...times);
+  const span = tMax - tMin || 1;
+  const segs = stamped.map(ev => {
+    const pct = ((new Date(ev.ts).getTime() - tMin) / span * 100).toFixed(2);
+    const cat = ev.kind === 'user' ? 'user' : (ev.cat || 'other');
+    const color = TL_COLORS[cat] || TL_COLORS.other;
+    const label = ev.kind === 'user' ? 'user message' : (ev.label || ev.name || cat);
+    return `<div class="tl-seg" style="flex:${pct > 0 ? pct : 0.5};background:${color}" title="${esc(label)}"></div>`;
+  });
+  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
+  const first = document.querySelector('#feed-content .feed-entry.errored');
+  if (!first) return;
+  first.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  first.style.outline = '1px solid var(--red)';
+  setTimeout(() => { first.style.outline = ''; }, 1800);
+  // highlight all errored entries briefly
+  document.querySelectorAll('#feed-content .feed-entry.errored').forEach(el => {
+    el.style.background = 'oklch(60% 0.18 25 / 0.08)';
+    setTimeout(() => { el.style.background = ''; }, 1800);
+  });
+}
+// ── week-over-week delta ────────────────────────────────────
+function buildWowDelta() {
+  // Compare this week (last 7 days) vs prior week (8–14 days ago)
+  const DAY = 86400000;
+  const now = Date.now();
+  let thisWeek = 0, lastWeek = 0;
+  for (const s of allSessions) {
+    const ts = s.lastTs || s.mtime;
+    if (!ts) continue;
+    const age = now - (typeof ts === 'number' ? ts : new Date(ts).getTime());
+    if (age < 7 * DAY) thisWeek++;
+    else if (age < 14 * DAY) lastWeek++;
+  }
+  if (!lastWeek) return '';
+  const delta = Math.round((thisWeek - lastWeek) / lastWeek * 100);
+  if (delta > 0)  return `<span class="wow-delta wow-up" title="vs prior 7 days">↑${delta}%</span>`;
+  if (delta < 0)  return `<span class="wow-delta wow-down" title="vs prior 7 days">↓${Math.abs(delta)}%</span>`;
+  return `<span class="wow-delta wow-flat" title="vs prior 7 days">→ flat</span>`;
+}
+// ── feed search ────────────────────────────────────────────
+let feedSearchActive = false;
+function toggleFeedSearch() {
+  const bar = document.getElementById('feed-search');
+  if (feedSearchActive) { closeFeedSearch(); return; }
+  feedSearchActive = true;
+  bar.classList.add('open');
+  requestAnimationFrame(() => document.getElementById('feed-search-input').focus());
+}
+function closeFeedSearch() {
+  feedSearchActive = false;
+  document.getElementById('feed-search').classList.remove('open');
+  document.getElementById('feed-search-input').value = '';
+  filterFeed('');
+}
+function filterFeed(q) {
+  const lq = q.toLowerCase().trim();
+  let visible = 0;
+  // individual entries
+  document.querySelectorAll('#feed-content .feed-entry').forEach(el => {
+    const text = (el.querySelector('.feed-lbl')?.textContent || '') + ' ' +
+                 (el.querySelector('.feed-detail')?.textContent || '');
+    const show = !lq || text.toLowerCase().includes(lq);
+    el.style.display = show ? '' : 'none';
+    if (show) visible++;
+  });
+  // collapsed group rows
+  document.querySelectorAll('#feed-content .feed-group').forEach(el => {
+    const text = el.querySelector('.fg-label')?.textContent || '';
+    const show = !lq || text.toLowerCase().includes(lq);
+    el.style.display = show ? '' : 'none';
+    if (show) visible++;
+  });
+  const countEl = document.getElementById('feed-search-count');
+  if (countEl) countEl.textContent = lq ? `${visible} match${visible !== 1 ? 'es' : ''}` : '';
+}
+// ── copy session as markdown ───────────────────────────────
+async function copySession() {
+  const btn = document.getElementById('btn-copy-sess');
+  const sess = allSessions[sessionIdx];
+  if (!sess?.file) return;
+  try {
+    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()}`, ''];
+    for (const ev of events) {
+      if (ev.kind === 'user' && ev.text?.trim()) {
+        lines.push('**User:** ' + ev.text.trim().replace(/\n/g, ' '));
+      } else if (ev.kind === 'tool') {
+        lines.push(`- \`${ev.name || ev.cat}\`: ${ev.label || ''}`);
+      }
+    }
+    await navigator.clipboard.writeText(lines.join('\n'));
+    btn.textContent = '✓ Copied';
+    btn.classList.add('copied');
+    setTimeout(() => { btn.textContent = '⎘ Copy'; btn.classList.remove('copied'); }, 2000);
+  } catch (err) {
+    btn.textContent = '✕ Error';
+    setTimeout(() => { btn.textContent = '⎘ Copy'; }, 1500);
+  }
+}
+// ── feed time filter ───────────────────────────────────────
+function setFeedTimeFilter(f) {
+  feedTimeFilter = f;
+  document.querySelectorAll('.tf-btn').forEach(b => b.classList.toggle('active', b.dataset.tf === f));
+  if (!allSessions.length) return;
+  const sess = allSessions[sessionIdx] || allSessions[0];
+  if (sess) loadFeedForSession(sess);
+}
+// ── command palette ────────────────────────────────────────
+function openCmdPalette() {
+  document.getElementById('cmd-backdrop').classList.add('open');
+  document.getElementById('cmd-palette').classList.add('open');
+  const inp = document.getElementById('cmd-input');
+  inp.value = '';
+  cmdSearch('');
+  requestAnimationFrame(() => inp.focus());
+}
+function closeCmdPalette() {
+  document.getElementById('cmd-backdrop').classList.remove('open');
+  document.getElementById('cmd-palette').classList.remove('open');
+}
+function cmdSearch(q) {
+  cmdItems = [];
+  const lq = q.toLowerCase().trim();
+  const results = document.getElementById('cmd-results');
+  // ">" prefix = cross-session full-text search
+  if (q.startsWith('>')) {
+    const sq = q.slice(1).trim();
+    results.innerHTML = sq.length >= 2
+      ? '<div class="cmd-empty">Searching sessions…</div>'
+      : '<div class="cmd-empty">Type at least 2 chars after &gt; to search all sessions</div>';
+    if (sq.length >= 2) searchSessions(sq);
+    return;
+  }
+  const sessMatches = allSessions
+    .filter(s => !lq || (s.lastPrompt || s.id).toLowerCase().includes(lq))
+    .slice(0, 5);
+  const memMatches = allDrawers
+    .filter(d => !lq || (d.key || '').toLowerCase().includes(lq) ||
+      String(d.value || d.text || '').toLowerCase().includes(lq))
+    .slice(0, 3);
+  const projMatches = allProjects
+    .filter(p => !lq || (p.name || p.slug || '').toLowerCase().includes(lq) ||
+      (p.path || '').toLowerCase().includes(lq))
+    .slice(0, 3);
+  if (!sessMatches.length && !memMatches.length && !projMatches.length) {
+    results.innerHTML = '<div class="cmd-empty">No results</div>';
+    cmdItems = [];
+    return;
+  }
+  let html = '';
+  if (sessMatches.length) {
+    html += '<div class="cmd-group-lbl">Sessions</div>';
+    sessMatches.forEach(s => {
+      const idx = cmdItems.length;
+      cmdItems.push({ type: 'session', data: s });
+      html += `<div class="cmd-item" data-ci="${idx}">
+        <span class="ci-ico">◫</span>
+        <div class="cmd-item-body">
+          <div class="ci-title">${esc(s.lastPrompt || s.id.slice(0, 32))}</div>
+          <div class="ci-sub">${relTime(s.lastTs || s.mtime)}</div>
+        </div>
+      </div>`;
+    });
+  }
+  if (memMatches.length) {
+    html += '<div class="cmd-group-lbl">Memory</div>';
+    memMatches.forEach(d => {
+      const idx = cmdItems.length;
+      cmdItems.push({ type: 'memory', data: d });
+      html += `<div class="cmd-item" data-ci="${idx}">
+        <span class="ci-ico">◈</span>
+        <div class="cmd-item-body">
+          <div class="ci-title">${esc(d.key || d.namespace || '—')}</div>
+          <div class="ci-sub">${esc(String(d.value || d.text || '').slice(0, 60))}</div>
+        </div>
+      </div>`;
+    });
+  }
+  if (projMatches.length) {
+    html += '<div class="cmd-group-lbl">Projects</div>';
+    projMatches.forEach(p => {
+      const idx = cmdItems.length;
+      cmdItems.push({ type: 'project', data: p });
+      html += `<div class="cmd-item" data-ci="${idx}">
+        <span class="ci-ico">⊞</span>
+        <div class="cmd-item-body">
+          <div class="ci-title">${esc(p.name || p.slug)}</div>
+          <div class="ci-sub">${esc(p.path || '')}</div>
+        </div>
+      </div>`;
+    });
+  }
+  results.innerHTML = html;
+  cmdFocusIdx = 0;
+  updateCmdFocus();
+  results.querySelectorAll('.cmd-item').forEach(el => {
+    el.addEventListener('click', () => {
+      cmdFocusIdx = parseInt(el.dataset.ci);
+      executeCmdItem();
+    });
+  });
+}
+function updateCmdFocus() {
+  const items = document.querySelectorAll('#cmd-results .cmd-item');
+  items.forEach((el, i) => el.classList.toggle('focused', i === cmdFocusIdx));
+}
+function cmdKey(e) {
+  const items = document.querySelectorAll('#cmd-results .cmd-item');
+  if (e.key === 'ArrowDown') { e.preventDefault(); cmdFocusIdx = Math.min(cmdFocusIdx + 1, items.length - 1); updateCmdFocus(); }
+  else if (e.key === 'ArrowUp') { e.preventDefault(); cmdFocusIdx = Math.max(cmdFocusIdx - 1, 0); updateCmdFocus(); }
+  else if (e.key === 'Enter') { e.preventDefault(); executeCmdItem(); }
+  else if (e.key === 'Escape') { closeCmdPalette(); }
+}
+function executeCmdItem() {
+  const item = cmdItems[cmdFocusIdx];
+  if (!item) return;
+  closeCmdPalette();
+  if (item.type === 'session') jumpToSession(item.data.id);
+  else if (item.type === 'memory') switchView('memory');
+  else if (item.type === 'project') switchProject(item.data.path);
+}
+// ── cross-session search ───────────────────────────────────
+async function searchSessions(q) {
+  const resultsEl = document.getElementById('cmd-results');
+  try {
+    const data = await apiFetch('/api/search-sessions?dir=' + enc(DIR) + '&q=' + enc(q));
+    if (!data.results?.length) {
+      resultsEl.innerHTML = '<div class="cmd-empty">No matches found across sessions</div>';
+      return;
+    }
+    cmdItems = [];
+    let html = '<div class="cmd-group-lbl">Matches across sessions</div>';
+    data.results.forEach(r => {
+      const idx = cmdItems.length;
+      cmdItems.push({ type: 'session', data: { id: r.id, lastPrompt: r.lastPrompt, lastTs: r.mtime } });
+      const snippet = r.matches[0]?.text?.replace(/\s+/g, ' ').trim() || '';
+      html += `<div class="cmd-item" data-ci="${idx}">
+        <span class="ci-ico">◫</span>
+        <div class="cmd-item-body">
+          <div class="ci-title">${esc(r.lastPrompt || r.id.slice(0, 32))}</div>
+          <div class="ci-sub">${esc(snippet.length > 70 ? snippet.slice(0, 70) + '…' : snippet)}</div>
+        </div>
+      </div>`;
+    });
+    resultsEl.innerHTML = html;
+    cmdFocusIdx = 0;
+    updateCmdFocus();
+    resultsEl.querySelectorAll('.cmd-item').forEach(el => {
+      el.addEventListener('click', () => { cmdFocusIdx = parseInt(el.dataset.ci); executeCmdItem(); });
+    });
+  } catch (_) {
+    resultsEl.innerHTML = '<div class="cmd-empty">Search error — is the server running?</div>';
+  }
+}
+// ── keyboard shortcuts ─────────────────────────────────────
+document.addEventListener('keydown', e => {
+  // ⌘K / Ctrl+K — command palette
+  if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+    e.preventDefault();
+    const open = document.getElementById('cmd-palette').classList.contains('open');
+    if (open) closeCmdPalette(); else openCmdPalette();
+    return;
+  }
+  // ignore when typing in inputs
+  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 (currentView === 'now') {
+    if (e.key === '/') { e.preventDefault(); toggleFeedSearch(); }
+    if (e.key === 'g' || e.key === 'G') { e.preventDefault(); goLive(); }
+    if (e.key === 'r' || e.key === 'R') { e.preventDefault(); refreshCurrent(); }
+    if (e.key === 'j' || e.key === 'k') {
+      e.preventDefault();
+      const entries = [...document.querySelectorAll('#feed-content .feed-entry')];
+      if (!entries.length) return;
+      let cur = entries.findIndex(el => el.classList.contains('selected'));
+      if (e.key === 'j') cur = cur < 0 ? 0 : Math.min(cur + 1, entries.length - 1);
+      else cur = cur < 0 ? 0 : Math.max(cur - 1, 0);
+      entries.forEach((el, i) => el.classList.toggle('selected', i === cur));
+      entries[cur].scrollIntoView({ block: 'nearest' });
+      selectedEntryId = entries[cur].dataset.ev
+        ? (JSON.parse(entries[cur].dataset.ev).id || '')
+        : '';
+    }
+    if (e.key === 'Enter') {
+      const sel = document.querySelector('#feed-content .feed-entry.selected');
+      if (sel) openDetail(sel.dataset.ev);
+    }
+  }
+});
+// ── helpers ────────────────────────────────────────────────
+function enc(s) { return encodeURIComponent(s); }
+function esc(s) {
+  return String(s || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;');
+}
+function relTime(ts) {
+  if (!ts) return '';
+  const diff = Date.now() - (typeof ts === 'number' ? ts : new Date(ts).getTime());
+  const s = Math.floor(diff / 1000);
+  if (s < 5)  return 'now';
+  if (s < 60) return s + 's';
+  const m = Math.floor(s / 60);
+  if (m < 60) return m + 'm';
+  const h = Math.floor(m / 60);
+  if (h < 24) return h + 'h';
+  return Math.floor(h / 24) + 'd';
+}
+function fmtDur(ms) {
+  const s = Math.floor(ms / 1000);
+  if (s < 60) return s + 's';
+  const m = Math.floor(s / 60);
+  if (m < 60) return m + 'm';
+  return Math.floor(m / 60) + 'h ' + (m % 60) + 'm';
+}
+init();
+</script>
+</body>
+</html>