@monoes/monomindcli 2.7.2 → 2.7.4

package/dist/src/ui/dashboard.html

@@ -234,6 +234,58 @@ html, body { height: 100%; background: var(--bg); color: var(--text-hi); font-fa
 .chunk-excerpt { font-size: 12px; color: var(--text-hi); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
 .chunk-footer { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
 .chunk-ns { font-size: 10px; padding: 1px 6px; border-radius: 8px; background: var(--surface-hi); color: var(--text-lo); }
+/* injection analytics */
+.sb-analytics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
+.sb-metric { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
+.sb-metric-val { font-size: 20px; font-weight: 700; color: var(--text-hi); font-family: var(--mono); }
+.sb-metric-lbl { font-size: 10px; color: var(--text-lo); text-transform: uppercase; letter-spacing: 0.07em; }
+.sb-metric-sub { font-size: 10px; color: var(--text-xs); font-family: var(--mono); }
+.sb-sparkline { display: flex; align-items: flex-end; gap: 2px; height: 32px; }
+.sb-spark-bar { min-width: 4px; flex: 1; border-radius: 2px 2px 0 0; transition: height 0.2s; }
+.sb-spark-bar.hit { background: oklch(72% 0.18 145); }
+.sb-spark-bar.miss { background: oklch(55% 0.08 60 / 0.4); }
+.sb-method-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin-top: 4px; }
+.sb-method-seg { transition: width 0.3s; }
+.sb-score-dist { display: flex; align-items: flex-end; gap: 2px; height: 24px; }
+.sb-score-bar { flex: 1; border-radius: 2px 2px 0 0; background: oklch(72% 0.18 75); min-width: 12px; }
+/* document cards */
+.sb-doc-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 6px; display: flex; align-items: center; gap: 10px; }
+.sb-doc-card:hover { border-color: oklch(72% 0.18 75 / 0.5); }
+.sb-config-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; }
+.sb-config-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
+.sb-config-row:last-child { margin-bottom: 0; }
+.sb-config-label { font-size: 11px; color: var(--text-lo); min-width: 120px; }
+.sb-config-input { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 3px 8px; font-size: 12px; color: var(--text-hi); font-family: var(--mono); width: 80px; }
+.sb-config-hint { font-size: 10px; color: var(--text-xs); flex: 1; }
+.sb-tune-badge { display: inline-block; font-size: 10px; padding: 2px 8px; border-radius: 10px; background: oklch(72% 0.18 145 / 0.12); color: oklch(72% 0.18 145); cursor: pointer; }
+.sb-ingest-feed { max-height: 240px; overflow-y: auto; font-size: 11px; }
+.sb-ingest-item { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-bottom: 1px solid var(--border); animation: sb-fade-in 0.3s ease; }
+.sb-ingest-item.injection { background: oklch(72% 0.18 145 / 0.04); }
+@keyframes sb-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
+.sb-ingest-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
+.sb-ingest-dot.ingest { background: oklch(72% 0.18 200); }
+.sb-ingest-dot.injection { background: oklch(72% 0.18 145); }
+.sb-ingest-dot.miss { background: oklch(72% 0.18 25); }
+.sb-ingest-time { font-size: 9px; color: var(--text-xs); font-family: var(--mono); min-width: 48px; }
+.sb-live-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; color: oklch(72% 0.18 145); text-transform: uppercase; letter-spacing: 0.07em; }
+.sb-live-dot { width: 5px; height: 5px; border-radius: 50%; background: oklch(72% 0.18 145); animation: sb-pulse 1.5s infinite; }
+@keyframes sb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
+.sb-kg-triplet { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--border); font-size: 12px; }
+.sb-kg-triplet:hover { background: oklch(72% 0.02 200 / 0.05); }
+.sb-kg-entity { padding: 2px 8px; border-radius: 10px; font-family: var(--mono); font-size: 11px; cursor: pointer; white-space: nowrap; }
+.sb-kg-entity.subject { background: oklch(72% 0.18 200 / 0.12); color: oklch(72% 0.18 200); }
+.sb-kg-entity.object { background: oklch(72% 0.18 145 / 0.12); color: oklch(72% 0.18 145); }
+.sb-kg-rel { font-size: 10px; color: var(--text-lo); font-style: italic; min-width: 60px; text-align: center; }
+.sb-kg-tag { display: inline-block; padding: 1px 6px; border-radius: 8px; font-size: 10px; cursor: pointer; background: var(--surface); border: 1px solid var(--border); color: var(--text-lo); }
+.sb-kg-tag:hover { border-color: var(--accent); color: var(--accent); }
+.sb-doc-icon { font-size: 18px; flex-shrink: 0; width: 28px; text-align: center; }
+.sb-doc-info { flex: 1; min-width: 0; }
+.sb-doc-name { font-size: 12px; font-weight: 600; color: var(--text-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sb-doc-path { font-size: 10px; color: var(--text-lo); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sb-doc-meta { display: flex; gap: 8px; margin-top: 3px; }
+.sb-doc-badge { font-size: 10px; padding: 1px 6px; border-radius: 8px; background: var(--surface-hi); color: var(--text-lo); }
+.sb-doc-badge.global { background: oklch(72% 0.12 200 / 0.15); color: oklch(72% 0.12 200); }
+.sb-doc-badge.missing { background: oklch(60% 0.18 25 / 0.15); color: oklch(60% 0.18 25); }
 /* chunk edit modal */
 #chunk-modal { display: none; position: fixed; inset: 0; z-index: 3000; background: oklch(0% 0 0 / 0.65); align-items: center; justify-content: center; }
 #chunk-modal.open { display: flex; }
@@ -1555,10 +1607,6 @@ select.pb-cfg-inp { padding: 4px 7px; cursor: pointer; }
           <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 class="nav-item" data-view="tokens">
           <span class="ico">$</span><span class="lbl">Tokens</span>
         </div>
@@ -1849,42 +1897,44 @@ select.pb-cfg-inp { padding: 4px 7px; cursor: pointer; }
           <span id="sess-filter-count"></span>
         </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>
-        <input id="loop-list-filter" class="filter-input" placeholder="Filter loops…" oninput="filterLoopList(this.value)" style="margin-bottom:10px;width:100%;max-width:380px">
-        <button id="btn-new-loop" onclick="showLoopForm()">+ New Loop</button>
-        <div id="loop-create-form" style="display:none">
-          <div class="lcf-title">Create Loop</div>
-          <div class="lcf-row">
-            <label class="lcf-label">Prompt</label>
-            <textarea class="lcf-textarea" id="lcf-prompt" placeholder="What should the agent do each iteration?"></textarea>
+        <!-- Loops (merged into Sessions) -->
+        <div style="margin-top:24px;border-top:1px solid var(--border);padding-top:16px">
+          <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;cursor:pointer" onclick="toggleLoopsSection()">
+            <span id="loops-chevron" style="font-size:10px;transition:transform .15s">▶</span>
+            <span style="font-size:13px;font-weight:600;letter-spacing:0.01em">Loops</span>
+            <span class="bdg" id="bdg-loops" style="font-size:10px">—</span>
           </div>
-          <div class="lcf-row">
-            <label class="lcf-label">Name (optional)</label>
-            <input class="lcf-input" id="lcf-name" type="text" placeholder="My loop">
-          </div>
-          <div class="lcf-row-inline">
-            <div class="lcf-row">
-              <label class="lcf-label">Interval</label>
-              <input class="lcf-input" id="lcf-interval" type="text" placeholder="1h" value="1h">
-            </div>
-            <div class="lcf-row">
-              <label class="lcf-label">Max reps (blank = ∞)</label>
-              <input class="lcf-input" id="lcf-maxreps" type="number" placeholder="∞" min="1">
+          <div id="loops-section" style="display:none">
+            <input id="loop-list-filter" class="filter-input" placeholder="Filter loops…" oninput="filterLoopList(this.value)" style="margin-bottom:10px;width:100%;max-width:380px">
+            <button id="btn-new-loop" onclick="showLoopForm()">+ New Loop</button>
+            <div id="loop-create-form" style="display:none">
+              <div class="lcf-title">Create Loop</div>
+              <div class="lcf-row">
+                <label class="lcf-label">Prompt</label>
+                <textarea class="lcf-textarea" id="lcf-prompt" placeholder="What should the agent do each iteration?"></textarea>
+              </div>
+              <div class="lcf-row">
+                <label class="lcf-label">Name (optional)</label>
+                <input class="lcf-input" id="lcf-name" type="text" placeholder="My loop">
+              </div>
+              <div class="lcf-row-inline">
+                <div class="lcf-row">
+                  <label class="lcf-label">Interval</label>
+                  <input class="lcf-input" id="lcf-interval" type="text" placeholder="1h" value="1h">
+                </div>
+                <div class="lcf-row">
+                  <label class="lcf-label">Max reps (blank = ∞)</label>
+                  <input class="lcf-input" id="lcf-maxreps" type="number" placeholder="∞" min="1">
+                </div>
+              </div>
+              <div class="lcf-actions">
+                <button class="lcf-cancel" onclick="hideLoopForm()">Cancel</button>
+                <button class="lcf-submit" onclick="createLoop()">Create Loop</button>
+              </div>
             </div>
-          </div>
-          <div class="lcf-actions">
-            <button class="lcf-cancel" onclick="hideLoopForm()">Cancel</button>
-            <button class="lcf-submit" onclick="createLoop()">Create Loop</button>
+            <div id="loops-content" class="loop-list"><div class="loading-txt">Loading…</div></div>
           </div>
         </div>
-        <div id="loops-content" class="loop-list"><div class="loading-txt">Loading…</div></div>
       </div>
     </div>
 
@@ -1905,6 +1955,7 @@ select.pb-cfg-inp { padding: 4px 7px; cursor: pointer; }
           <canvas id="tok-chart" height="100" style="width:100%;display:block"></canvas>
         </div>
         <div id="tok-table" style="margin-top:18px"></div>
+        <div id="tok-usage-breakdown" style="margin-top:18px"></div>
       </div>
     </div>
 
@@ -1915,12 +1966,8 @@ select.pb-cfg-inp { padding: 4px 7px; cursor: pointer; }
         <div class="pg-sub">Knowledge palace — stored facts, graph, identity</div>
         <div class="mem-tab-bar" style="display:flex;gap:4px;margin-bottom:14px;border-bottom:1px solid var(--border);padding-bottom:6px">
           <button class="odt-btn active" data-memtab="memories" onclick="switchMemTab('memories')">Memories</button>
-          <button class="odt-btn" data-memtab="routing" onclick="switchMemTab('routing')">Routing</button>
-          <button class="odt-btn" data-memtab="usage" onclick="switchMemTab('usage')">Usage</button>
           <button class="odt-btn" data-memtab="adrs" onclick="switchMemTab('adrs')">ADRs</button>
-          <button class="odt-btn" data-memtab="swarm" onclick="switchMemTab('swarm')">Swarm</button>
           <button class="odt-btn" data-memtab="chunks" onclick="switchMemTab('chunks')">Chunks</button>
-          <button class="odt-btn" data-memtab="agent-graph" onclick="switchMemTab('agent-graph')">Agent Graph</button>
         </div>
         <div id="mem-tab-memories">
           <div class="mem-split" id="mem-split">
@@ -1933,28 +1980,52 @@ select.pb-cfg-inp { padding: 4px 7px; cursor: pointer; }
           </div>
           <div style="margin-top:10px"><button class="btn" onclick="openNewMemModal()">+ New Memory</button></div>
         </div>
-        <div id="mem-tab-routing" style="display:none"><div class="loading-txt">Loading…</div></div>
-        <div id="mem-tab-usage" style="display:none"><div class="loading-txt">Loading…</div></div>
         <div id="mem-tab-adrs" style="display:none">
           <div class="filter-bar" style="margin-bottom:10px">
             <input class="filter-input" id="adr-filter" type="text" placeholder="Filter ADRs…" oninput="filterADRs(this.value)">
           </div>
-          <div id="adr-content"><div class="loading-txt">Loading…</div></div>
-        </div>
-        <div id="mem-tab-swarm" style="display:none">
-          <div style="display:flex;height:380px;gap:0">
-            <div id="swarm-run-list" style="width:200px;flex-shrink:0;border-right:1px solid var(--border);overflow-y:auto;padding:6px"></div>
-            <div id="swarm-run-detail" style="flex:1;padding:14px;overflow-y:auto">
-              <div style="color:var(--text-lo);font-size:13px">Select a swarm run</div>
+          <div style="display:flex;gap:0;min-height:340px">
+            <div id="adr-content" style="width:280px;flex-shrink:0;overflow-y:auto;border-right:1px solid var(--border);padding-right:8px"><div class="loading-txt">Loading…</div></div>
+            <div id="adr-viewer" style="flex:1;padding:0 14px;overflow-y:auto">
+              <div style="color:var(--text-lo);font-size:13px;padding:20px 0">Select an ADR to view</div>
             </div>
           </div>
-          <button class="btn" style="margin-top:10px;color:var(--red);border-color:var(--red)" onclick="cleanSwarmData()">&#x232B; Clean Data</button>
         </div>
         <div id="mem-tab-chunks" style="display:none">
+          <div id="sb-analytics" class="sb-analytics" style="display:none">
+            <div class="sb-metric">
+              <div class="sb-metric-val" id="sb-hit-rate">—</div>
+              <div class="sb-metric-lbl">Hit Rate</div>
+              <div class="sb-metric-sub" id="sb-hit-detail"></div>
+            </div>
+            <div class="sb-metric">
+              <div class="sb-metric-val" id="sb-method-val">—</div>
+              <div class="sb-metric-lbl">Method</div>
+              <div class="sb-method-bar" id="sb-method-bar"></div>
+              <div class="sb-metric-sub" id="sb-method-detail"></div>
+            </div>
+            <div class="sb-metric">
+              <div class="sb-metric-val" id="sb-avg-score">—</div>
+              <div class="sb-metric-lbl">Avg Relevance</div>
+              <div class="sb-score-dist" id="sb-score-dist"></div>
+            </div>
+            <div class="sb-metric">
+              <div class="sb-metric-lbl" style="margin-bottom:2px">Injections (24h)</div>
+              <div class="sb-sparkline" id="sb-sparkline"></div>
+              <div class="sb-metric-sub" id="sb-spark-detail"></div>
+            </div>
+            <div class="sb-metric" id="sb-overrides-card" style="display:none">
+              <div class="sb-metric-val" id="sb-overrides-val">0</div>
+              <div class="sb-metric-lbl">Misroutes</div>
+              <div class="sb-metric-sub" id="sb-overrides-detail"></div>
+            </div>
+          </div>
           <div class="chunk-stats-bar" id="chunk-stats-bar">
             <div class="chunk-stat"><div class="chunk-stat-val" id="chunk-count-val">—</div><div class="chunk-stat-lbl">Chunks</div></div>
             <div class="chunk-stat"><div class="chunk-stat-val" id="chunk-skills-val">—</div><div class="chunk-stat-lbl">Skills</div></div>
             <div class="chunk-stat"><div class="chunk-stat-val" id="chunk-ns-val">—</div><div class="chunk-stat-lbl">Namespaces</div></div>
+            <div class="chunk-stat"><div class="chunk-stat-val" id="chunk-global-val">—</div><div class="chunk-stat-lbl">Global Brain</div></div>
+            <div class="chunk-stat"><div class="chunk-stat-val" id="chunk-docs-val">—</div><div class="chunk-stat-lbl">Documents</div></div>
             <button class="btn chunk-build-btn" id="btn-build-docs" onclick="buildKnowledgeDocs()" title="Index .md/.mdx/.txt/.rst files">⊕ Build Docs</button>
             <span class="chunk-build-status" id="chunk-build-status"></span>
           </div>
@@ -1969,20 +2040,74 @@ select.pb-cfg-inp { padding: 4px 7px; cursor: pointer; }
             <button class="btn" onclick="secondBrainSearch()" title="Semantic search (warm local model)">⌕ Search</button>
           </div>
           <div id="sb-search-results" style="display:none;margin-bottom:12px"></div>
-          <div class="filter-bar">
-            <input class="filter-input" type="text" placeholder="Filter chunks…" oninput="filterChunks(this.value)">
-            <button class="btn" onclick="_chunksLoaded=false;loadChunksTab()" title="Refresh">↺</button>
+          <div style="display:flex;gap:6px;margin-bottom:8px;align-items:center">
+            <button class="btn" id="sb-view-chunks" onclick="switchSBView('chunks')" style="font-size:11px;font-weight:600;border-color:var(--accent);color:var(--accent)">Chunks</button>
+            <button class="btn" id="sb-view-docs" onclick="switchSBView('docs')" style="font-size:11px;opacity:0.6">Documents</button>
+            <button class="btn" id="sb-view-monitor" onclick="switchSBView('monitor')" style="font-size:11px;opacity:0.6">Live Monitor</button>
+            <button class="btn" id="sb-view-config" onclick="switchSBView('config')" style="font-size:11px;opacity:0.6">Config</button>
+            <button class="btn" id="sb-view-kg" onclick="switchSBView('kg')" style="font-size:11px;opacity:0.6">Knowledge Graph</button>
           </div>
-          <div id="chunks-grid"></div>
-        </div>
-        <div id="mem-tab-agent-graph" style="display:none">
-          <div id="ag-summary-bar" style="display:flex;gap:20px;flex-wrap:wrap;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border)"></div>
-          <div style="display:flex;gap:0;min-height:280px">
-            <div id="ag-sess-list" style="width:190px;flex-shrink:0;overflow-y:auto;border-right:1px solid var(--border);padding-right:8px"></div>
-            <div id="ag-detail" style="flex:1;padding:0 14px;overflow-y:auto">
-              <div style="color:var(--text-lo);font-size:13px;padding:20px 0">Select a session</div>
+          <div id="sb-view-chunks-pane">
+            <div class="filter-bar">
+              <input class="filter-input" type="text" placeholder="Filter chunks…" oninput="filterChunks(this.value)">
+              <button class="btn" onclick="_chunksLoaded=false;loadChunksTab()" title="Refresh">↺</button>
+            </div>
+            <div id="chunks-grid"></div>
+          </div>
+          <div id="sb-view-docs-pane" style="display:none">
+            <div class="filter-bar" style="margin-bottom:8px">
+              <input class="filter-input" id="sb-docs-filter" type="text" placeholder="Filter documents…" oninput="filterSBDocs(this.value)">
+              <button class="btn" onclick="_sbDocsLoaded=false;loadSBDocs()" title="Refresh">↺</button>
+            </div>
+            <div id="sb-docs-grid"></div>
+          </div>
+          <div id="sb-view-monitor-pane" style="display:none">
+            <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px">
+              <span class="sb-live-badge" id="sb-live-badge"><span class="sb-live-dot"></span> connecting…</span>
+              <span style="font-size:10px;color:var(--text-xs)" id="sb-monitor-count">0 events</span>
+              <button class="btn" style="margin-left:auto;font-size:10px;padding:2px 8px" onclick="clearIngestFeed()">Clear</button>
+            </div>
+            <div class="sb-ingest-feed" id="sb-ingest-feed">
+              <div style="color:var(--text-xs);font-size:11px;padding:12px;text-align:center">Waiting for ingest or injection events…</div>
             </div>
           </div>
+          <div id="sb-view-config-pane" style="display:none">
+            <div class="sb-config-panel">
+              <div style="font-size:12px;font-weight:600;color:var(--text-hi);margin-bottom:10px">Second Brain Configuration</div>
+              <div class="sb-config-row">
+                <span class="sb-config-label">Relevance Floor</span>
+                <input class="sb-config-input" id="sb-cfg-floor" type="number" step="0.05" min="0" max="1" value="0.35">
+                <span class="sb-config-hint">Minimum score for injection (0–1). Lower = more results, higher = stricter.</span>
+              </div>
+              <div class="sb-config-row">
+                <span class="sb-config-label">Injection Limit</span>
+                <input class="sb-config-input" id="sb-cfg-limit" type="number" step="1" min="1" max="20" value="3">
+                <span class="sb-config-hint">Max chunks injected per prompt.</span>
+              </div>
+              <div class="sb-config-row">
+                <button class="btn" onclick="saveSBConfig()" style="font-size:11px">Save</button>
+                <span id="sb-cfg-status" style="font-size:10px;color:var(--text-xs)"></span>
+                <span id="sb-cfg-suggestion" style="margin-left:auto"></span>
+              </div>
+            </div>
+            <div class="sb-config-panel" style="margin-top:10px">
+              <div style="font-size:12px;font-weight:600;color:var(--text-hi);margin-bottom:6px">Auto-Tune</div>
+              <div style="font-size:11px;color:var(--text-lo);margin-bottom:8px">Based on telemetry analysis of your injection history.</div>
+              <div id="sb-tune-result" style="font-size:11px;color:var(--text-xs)">Loading…</div>
+            </div>
+          </div>
+          <div id="sb-view-kg-pane" style="display:none">
+            <div style="display:flex;gap:10px;margin-bottom:10px;align-items:center">
+              <div style="font-size:10px;text-transform:uppercase;letter-spacing:0.07em;color:var(--text-xs)">Entities: <span id="sb-kg-nodes" style="color:var(--text-hi)">—</span> &nbsp; Triplets: <span id="sb-kg-edges" style="color:var(--text-hi)">—</span></div>
+            </div>
+            <div class="filter-bar" style="margin-bottom:8px">
+              <input class="filter-input" id="sb-kg-search" type="text" placeholder="Search entities or relationships…" onkeydown="if(event.key==='Enter')loadSBKnowledgeGraph(this.value)">
+              <button class="btn" onclick="loadSBKnowledgeGraph(document.getElementById('sb-kg-search').value)" title="Search">⌕</button>
+              <button class="btn" onclick="document.getElementById('sb-kg-search').value='';loadSBKnowledgeGraph()" title="Show all">↺</button>
+            </div>
+            <div id="sb-kg-glossary" style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px"></div>
+            <div id="sb-kg-triplets" style="max-height:360px;overflow-y:auto"><div class="loading-txt">Loading…</div></div>
+          </div>
         </div>
       </div>
     </div>
@@ -2080,7 +2205,6 @@ select.pb-cfg-inp { padding: 4px 7px; cursor: pointer; }
           <button class="odt-btn active" data-mgtab="overview" onclick="mgSwitchTab('overview')">Overview</button>
           <button class="odt-btn" data-mgtab="graph" onclick="mgSwitchTab('graph')">Graph</button>
           <button class="odt-btn" data-mgtab="analyze" onclick="mgSwitchTab('analyze')">Analyze</button>
-          <button class="odt-btn" data-mgtab="query" onclick="mgSwitchTab('query')">Query</button>
           <button class="odt-btn" data-mgtab="export" onclick="mgSwitchTab('export')">Export</button>
           <button class="odt-btn" data-mgtab="report" onclick="mgSwitchTab('report')">Report</button>
           <button class="odt-btn" data-mgtab="wiki" onclick="mgSwitchTab('wiki')">Wiki</button>
@@ -2132,96 +2256,6 @@ select.pb-cfg-inp { padding: 4px 7px; cursor: pointer; }
           </div>
         </div>
 
-        <!-- TAB 4: QUERY -->
-        <div class="mg-pane" id="mg-tab-query">
-          <div class="mg-query-section">
-            <div class="mqs-title">Search nodes</div>
-            <div class="mg-query-row">
-              <input type="text" id="mg-q-search" placeholder="Node label or name…" style="flex:1;min-width:160px" oninput="mgQuerySearch(this.value)">
-            </div>
-            <div id="mg-q-search-result" class="mg-query-result" style="display:none"></div>
-          </div>
-          <div class="mg-query-section">
-            <div class="mqs-title">Impact analysis</div>
-            <div class="mg-query-row">
-              <input type="text" id="mg-q-impact-node" placeholder="Node ID / name…" style="flex:1;min-width:140px" onkeydown="if(event.key==='Enter')mgQueryImpact()">
-              <select id="mg-q-impact-dir" style="width:120px">
-                <option value="both">Both</option>
-                <option value="upstream">Upstream</option>
-                <option value="downstream">Downstream</option>
-              </select>
-              <button class="btn" onclick="mgQueryImpact()">Run</button>
-            </div>
-            <div id="mg-q-impact-result" class="mg-query-result" style="display:none"></div>
-          </div>
-          <div class="mg-query-section">
-            <div class="mqs-title">Context</div>
-            <div class="mg-query-row">
-              <input type="text" id="mg-q-ctx-node" placeholder="Node ID / file path…" style="flex:1;min-width:200px" onkeydown="if(event.key==='Enter')mgQueryContext()">
-              <button class="btn" onclick="mgQueryContext()">Run</button>
-            </div>
-            <div id="mg-q-ctx-result" class="mg-query-result" style="display:none"></div>
-          </div>
-          <div class="mg-query-section">
-            <div class="mqs-title">Shortest path</div>
-            <div class="mg-query-row">
-              <input type="text" id="mg-q-path-from" placeholder="From node…" style="flex:1;min-width:120px" onkeydown="if(event.key==='Enter')mgQueryPath()">
-              <input type="text" id="mg-q-path-to" placeholder="To node…" style="flex:1;min-width:120px">
-              <button class="btn" onclick="mgQueryPath()">Run</button>
-            </div>
-            <div id="mg-q-path-result" class="mg-query-result" style="display:none"></div>
-          </div>
-          <div class="mg-query-section">
-            <div class="mqs-title">Cypher query</div>
-            <div class="mg-query-row" style="flex-direction:column;align-items:stretch">
-              <textarea id="mg-q-cypher" placeholder="MATCH (n) RETURN n.name LIMIT 20"></textarea>
-              <button class="btn" style="align-self:flex-end;margin-top:6px" onclick="mgQueryCypher()">Run</button>
-            </div>
-            <div id="mg-q-cypher-result" class="mg-query-result" style="display:none"></div>
-          </div>
-          <div class="mg-query-section">
-            <div class="mqs-title">Ask the graph</div>
-            <div class="mg-query-row">
-              <input type="text" id="mg-q-ask" placeholder="Question or keyword…" style="flex:1;min-width:180px" onkeydown="if(event.key==='Enter')mgQueryAsk()">
-              <select id="mg-q-ask-mode" style="width:110px">
-                <option value="search">Search</option>
-                <option value="explain">Explain</option>
-                <option value="neighbors">Neighbors</option>
-              </select>
-              <select id="mg-q-ask-budget" style="width:80px">
-                <option value="100">100</option>
-                <option value="500">500</option>
-                <option value="1000">1000</option>
-              </select>
-              <button class="btn" onclick="mgQueryAsk()">Ask</button>
-            </div>
-            <div id="mg-q-ask-result" class="mg-query-result" style="display:none"></div>
-          </div>
-          <div class="mg-query-section">
-            <div class="mqs-title">Ripple impact <span style="font-size:10px;color:var(--text-xs);font-weight:400">multi-hop cascade</span></div>
-            <div class="mg-query-row">
-              <input type="text" id="mg-q-ripple-node" placeholder="Node name or file…" style="flex:1;min-width:160px">
-              <select id="mg-q-ripple-hops" style="width:80px" title="Max hops">
-                <option value="2">2 hops</option>
-                <option value="3" selected>3 hops</option>
-                <option value="4">4 hops</option>
-                <option value="5">5 hops</option>
-              </select>
-              <button class="btn" onclick="mgQueryRipple()">Run</button>
-            </div>
-            <div id="mg-q-ripple-result" class="mg-query-result" style="display:none"></div>
-          </div>
-          <div class="mg-query-section">
-            <div class="mqs-title">Import chain <span style="font-size:10px;color:var(--text-xs);font-weight:400">all paths A → B</span></div>
-            <div class="mg-query-row">
-              <input type="text" id="mg-q-chain-from" placeholder="From node…" style="flex:1;min-width:120px" onkeydown="if(event.key==='Enter')mgQueryImportChain()">
-              <input type="text" id="mg-q-chain-to" placeholder="To node…" style="flex:1;min-width:120px" onkeydown="if(event.key==='Enter')mgQueryImportChain()">
-              <button class="btn" onclick="mgQueryImportChain()">Run</button>
-            </div>
-            <div id="mg-q-chain-result" class="mg-query-result" style="display:none"></div>
-          </div>
-        </div>
-
         <!-- TAB 5: EXPORT -->
         <div class="mg-pane" id="mg-tab-export">
           <div class="mg-export-grid" id="mg-export-cards">
@@ -2503,10 +2537,10 @@ function switchView(v, { updateHash = true } = {}) {
     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', tokens:'Tokens', memory:'Memory', orgs:'Orgs', monograph:'Monograph', global:'Global Feed', 'global-tokens':'Global Tokens', 'global-orgs':'All Orgs', humaninput:'Human Input' };
+  const titles = { now:'Now', projects:'Projects', sessions:'Sessions', tokens:'Tokens', memory:'Memory', orgs:'Orgs', monograph:'Monograph', global:'Global Feed', 'global-tokens':'Global Tokens', 'global-orgs':'All Orgs', humaninput:'Human Input' };
   document.getElementById('view-title').textContent = titles[v] || v;
   const PROJECT = DIR ? shortPath(DIR) : 'monomind';
-  const VIEW_LABELS = { now: 'Now', sessions: 'Sessions', projects: 'Projects', loops: 'Loops', tokens: 'Tokens', memory: 'Memory', orgs: 'Orgs', monograph: 'Monograph', global: 'Global Feed', 'global-tokens': 'Global Tokens', 'global-orgs': 'All Orgs', humaninput: 'Human Input' };
+  const VIEW_LABELS = { now: 'Now', sessions: 'Sessions', projects: 'Projects', tokens: 'Tokens', memory: 'Memory', orgs: 'Orgs', monograph: 'Monograph', global: 'Global Feed', 'global-tokens': 'Global Tokens', 'global-orgs': 'All Orgs', humaninput: 'Human Input' };
   document.title = `monomind · ${PROJECT} · ${VIEW_LABELS[v] || v}`;
   if (updateHash) _pushHash();
   // Projects always re-fetches so onclick paths in cards stay current
@@ -2536,6 +2570,7 @@ function _restoreFromHash() {
   const parts = raw.split('/');
   const view = parts[0];
   if (!view) return;
+  if (view === 'loops') { switchView('sessions', { updateHash: true }); toggleLoopsSection(); return; }
   if (view === 'orgs') {
     switchView('orgs', { updateHash: false });
     const orgName = parts[1] ? decodeURIComponent(parts[1]) : null;
@@ -2559,8 +2594,7 @@ function _restoreFromHash() {
 function renderView(v) {
   if (v === 'now') { refreshNow(); return; }
   if (v === 'projects') renderProjects();
-  if (v === 'sessions') renderSessions();
-  if (v === 'loops') renderLoops();
+  if (v === 'sessions') { renderSessions(); renderLoops(); }
   if (v === 'tokens') loadTokensView();
   if (v === 'memory') renderMemory();
   if (v === 'orgs') renderOrgs();
@@ -3307,11 +3341,59 @@ async function loadTokensView() {
         '</tbody></table></div>';
     } else { table.innerHTML = ''; }
     markLiveGlow('view-tokens');
+    loadTokenUsageBreakdown('today');
   } catch (_) {
     cards.innerHTML = '<div class="loading-txt" style="color:var(--text-lo)">No token data available</div>';
   }
 }
 
+async function loadTokenUsageBreakdown(period) {
+  var el = document.getElementById('tok-usage-breakdown');
+  if (!el) return;
+  try {
+    var data = await apiFetch('/api/token-usage?period=' + enc(period || 'today') + '&dir=' + enc(DIR));
+    var s = data?.summary || data?.tokens?.summary || {};
+    var models = Array.isArray(data?.models) ? data.models : (data?.byModel || []);
+    var tools = Array.isArray(data?.tools) ? data.tools : (data?.topTools || []);
+    var mcps = Array.isArray(data?.mcpServers) ? data.mcpServers : (data?.mcp || []);
+    var categories = Array.isArray(data?.categories) ? data.categories : (data?.activity || []);
+    var projects = Array.isArray(data?.projects) ? data.projects : (data?.topProjects || []);
+    var projRows = projects.map(function(p) {
+      var raw = (p.project && p.project !== '?') ? p.project : (p.name && p.name !== '?' ? p.name : '');
+      var base = String(p.dir || p.path || '').split('/').filter(Boolean).pop() || '';
+      return Object.assign({}, p, { project: raw || base || 'unknown' });
+    });
+    function usageBar(items, valKey, labelKey, color, maxItems) {
+      if (!items.length) return '';
+      var maxVal = Math.max.apply(null, items.slice(0, maxItems).map(function(x) { return Number(x[valKey] || 0); }).concat([0.0001]));
+      return items.slice(0, maxItems).map(function(item) {
+        var pct = Math.round((Number(item[valKey] || 0) / maxVal) * 100);
+        var label = esc(String(item[labelKey] || '—').slice(0, 24));
+        var val = typeof item[valKey] === 'number' && valKey === 'cost' ? '$' + Number(item[valKey]).toFixed(4) : String(item[valKey] || 0);
+        return '<div style="display:flex;align-items:center;gap:8px;padding:3px 0;font-size:12px">' +
+          '<div style="width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-hi);font-family:var(--mono);font-size:11px">' + label + '</div>' +
+          '<div style="flex:1;height:7px;background:var(--border);border-radius:2px;overflow:hidden"><div style="width:' + pct + '%;height:100%;background:' + color + ';border-radius:2px"></div></div>' +
+          '<div style="width:60px;text-align:right;color:var(--text-lo);font-size:11px;font-family:var(--mono)">' + esc(val) + '</div></div>';
+      }).join('');
+    }
+    var cacheEff = s.cacheTokens ? Math.min(100, Math.round(s.cacheTokens / (s.cacheTokens + (Number(s.totalTokensIn) || 0)) * 100)) : null;
+    var html = '';
+    if (cacheEff !== null || s.totalTokensIn != null) {
+      html += '<div style="display:flex;gap:16px;flex-wrap:wrap;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border)">';
+      if (s.totalTokensIn != null) html += '<div class="chunk-stat"><div class="chunk-stat-val">' + Number(s.totalTokensIn).toLocaleString() + '</div><div class="chunk-stat-lbl">Tokens In</div></div>';
+      if (s.totalTokensOut != null) html += '<div class="chunk-stat"><div class="chunk-stat-val">' + Number(s.totalTokensOut).toLocaleString() + '</div><div class="chunk-stat-lbl">Tokens Out</div></div>';
+      if (cacheEff !== null) html += '<div class="chunk-stat"><div class="chunk-stat-val" style="color:var(--green)">' + cacheEff + '%</div><div class="chunk-stat-lbl">Cache Eff.</div></div>';
+      html += '</div>';
+    }
+    if (models.length) html += '<div class="m-group-title" style="margin-bottom:6px">Models</div><div style="margin-bottom:14px">' + usageBar(models, 'cost', 'model', 'oklch(65% 0.13 290)', 8) + '</div>';
+    if (categories.length) html += '<div class="m-group-title" style="margin-bottom:6px">Activity</div><div style="margin-bottom:14px">' + usageBar(categories, 'turns', 'category', 'var(--accent)', 8) + '</div>';
+    if (tools.length) html += '<div class="m-group-title" style="margin-bottom:6px">Top Tools</div><div style="margin-bottom:14px">' + usageBar(tools, 'count', 'tool', 'oklch(72% 0.18 75)', 10) + '</div>';
+    if (mcps.length) html += '<div class="m-group-title" style="margin-bottom:6px">MCP Servers</div><div style="margin-bottom:14px">' + usageBar(mcps, 'count', 'server', 'oklch(70% 0.18 60)', 8) + '</div>';
+    if (projRows.length) html += '<div class="m-group-title" style="margin-bottom:6px">Projects</div><div style="margin-bottom:14px">' + usageBar(projRows, 'cost', 'project', 'oklch(65% 0.15 150)', 5) + '</div>';
+    el.innerHTML = html || '';
+  } catch (_) { el.innerHTML = ''; }
+}
+
 function renderTokChart(daily, animated = true) {
   const canvas = document.getElementById('tok-chart');
   if (!canvas || !daily.length) return;
@@ -3437,6 +3519,7 @@ async function setTokPeriod(btn, period) {
         '</tbody></table></div>';
     } else if (table) { table.innerHTML = ''; }
     markLiveGlow('view-tokens');
+    loadTokenUsageBreakdown(period);
     // Update topbar badge when showing today's data
     if (period === 'today') {
       const badge = document.getElementById('topbar-cost');
@@ -3463,17 +3546,13 @@ function switchMemTab(tab) {
   _currentMemTab = tab;
   document.querySelectorAll('.mem-tab-bar .odt-btn').forEach(b =>
     b.classList.toggle('active', b.dataset.memtab === tab));
-  ['memories','routing','usage','adrs','swarm','chunks','agent-graph'].forEach(t => {
+  ['memories','adrs','chunks'].forEach(t => {
     const el = document.getElementById('mem-tab-' + t);
     if (el) el.style.display = t === tab ? '' : 'none';
   });
   if (tab === 'memories') loadMemoriesTab();
-  else if (tab === 'routing') loadMemRouting();
-  else if (tab === 'usage') loadMemUsage();
   else if (tab === 'adrs') loadMemADRs();
-  else if (tab === 'swarm') loadSwarmTab();
   else if (tab === 'chunks') loadChunksTab();
-  else if (tab === 'agent-graph') loadAgentGraphTab();
 }
 
 async function loadMemRouting() {
@@ -3635,12 +3714,12 @@ function renderADRs(list) {
   const pane = document.getElementById('adr-content');
   if (!pane) return;
   if (!list.length) { pane.innerHTML = '<div class="empty">No ADRs found</div>'; return; }
-  pane.innerHTML = list.slice(0, 50).map(a => `<div style="padding:8px 0;border-bottom:1px solid var(--border)">
+  pane.innerHTML = list.slice(0, 50).map((a, i) => `<div class="adr-item" style="padding:8px 4px;border-bottom:1px solid var(--border);cursor:pointer;border-radius:4px" onclick="viewADR(${i})" onmouseenter="this.style.background='oklch(72% 0.02 200 / 0.06)'" onmouseleave="this.style.background=''">
     <div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:3px">
-      <span style="color:var(--text-hi);font-size:12px;font-family:monospace">${esc(a.id || a.title || '—')}</span>
-      <span class="ss-pill ${a.status === 'accepted' ? 'on' : a.status === 'deprecated' ? 'warn' : ''}">${esc(a.status || '?')}</span>
+      <span style="color:var(--text-hi);font-size:11px;font-family:monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px">${esc(a.number || a.id || a.title || '—')}</span>
+      <span class="ss-pill ${a.status === 'accepted' || a.status === 'Accepted' ? 'on' : a.status === 'deprecated' || a.status === 'Deprecated' ? 'warn' : ''}" style="font-size:9px">${esc(a.status || '?')}</span>
     </div>
-    <div style="font-size:11px;color:var(--text-lo)">${esc((a.context || a.summary || '').slice(0, 120))}</div>
+    <div style="font-size:10px;color:var(--text-lo);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(a.title || '')}</div>
   </div>`).join('');
 }
 
@@ -3654,6 +3733,65 @@ function filterADRs(q) {
   renderADRs(filtered);
 }
 
+async function viewADR(idx) {
+  var adr = _allADRs[idx];
+  if (!adr || !adr.file) return;
+  var viewer = document.getElementById('adr-viewer');
+  if (!viewer) return;
+  viewer.innerHTML = '<div class="loading-txt">Loading…</div>';
+  // Highlight selected
+  document.querySelectorAll('#adr-content .adr-item').forEach(function(el, i) {
+    el.style.background = i === idx ? 'oklch(72% 0.02 200 / 0.08)' : '';
+    el.style.borderLeft = i === idx ? '2px solid var(--accent)' : '';
+  });
+  try {
+    var data = await apiFetch('/api/adr-file?file=' + enc(adr.file) + '&dir=' + enc(DIR));
+    var md = data.content || '';
+    viewer.innerHTML = '<div style="font-family:var(--mono);font-size:12px;line-height:1.7;white-space:pre-wrap;color:var(--text-hi);overflow-x:auto">' + _renderMd(md) + '</div>';
+  } catch (e) {
+    viewer.innerHTML = '<div class="empty">Failed: ' + esc(e.message) + '</div>';
+  }
+}
+
+function _renderMd(md) {
+  var lines = md.split('\n');
+  var html = [];
+  var inCode = false, codeLang = '';
+  for (var i = 0; i < lines.length; i++) {
+    var line = lines[i];
+    if (line.startsWith('```')) {
+      if (!inCode) { inCode = true; codeLang = line.slice(3).trim(); html.push('<div style="background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:8px 10px;margin:6px 0;overflow-x:auto;font-size:11px">'); continue; }
+      else { inCode = false; html.push('</div>'); continue; }
+    }
+    if (inCode) { html.push(esc(line) + '\n'); continue; }
+    if (/^#{1,6}\s/.test(line)) {
+      var lvl = line.match(/^(#{1,6})/)[1].length;
+      var text = line.replace(/^#{1,6}\s+/, '');
+      var sizes = { 1: '16px', 2: '14px', 3: '13px', 4: '12px', 5: '12px', 6: '11px' };
+      html.push('<div style="font-size:' + (sizes[lvl] || '12px') + ';font-weight:700;color:var(--accent);margin:' + (lvl <= 2 ? '16px' : '10px') + ' 0 4px 0">' + esc(text) + '</div>');
+    } else if (/^\|/.test(line)) {
+      if (/^\|[\s-:|]+\|$/.test(line)) continue;
+      var cells = line.split('|').slice(1, -1).map(function(c) { return c.trim(); });
+      html.push('<div style="display:flex;gap:0;border-bottom:1px solid var(--border)">' + cells.map(function(c) {
+        return '<div style="flex:1;padding:2px 6px;font-size:11px">' + esc(c) + '</div>';
+      }).join('') + '</div>');
+    } else if (/^[-*]\s/.test(line)) {
+      var indent = line.match(/^(\s*)/)[1].length;
+      html.push('<div style="padding-left:' + (indent + 12) + 'px;position:relative"><span style="position:absolute;left:' + indent + 'px;color:var(--text-xs)">•</span>' + esc(line.replace(/^\s*[-*]\s/, '')) + '</div>');
+    } else if (/^\d+\.\s/.test(line)) {
+      var num = line.match(/^(\d+)\./)[1];
+      html.push('<div style="padding-left:16px;position:relative"><span style="position:absolute;left:0;color:var(--text-xs)">' + num + '.</span>' + esc(line.replace(/^\d+\.\s/, '')) + '</div>');
+    } else if (line.trim() === '') {
+      html.push('<div style="height:6px"></div>');
+    } else {
+      var styled = esc(line).replace(/\*\*([^*]+)\*\*/g, '<b style="color:var(--text-hi)">$1</b>').replace(/`([^`]+)`/g, '<code style="background:var(--bg);padding:1px 4px;border-radius:3px;font-size:11px">$1</code>');
+      html.push('<div>' + styled + '</div>');
+    }
+  }
+  if (inCode) html.push('</div>');
+  return html.join('\n');
+}
+
 function renderMiniSessions(sessions) {
   if (!sessions.length) return;
   const items = sessions.map((s, i) => `
@@ -5152,7 +5290,7 @@ async function renderLoops() {
         </div>`;
     }).join('');
     startCountdowns();
-    markLiveGlow('view-loops');
+    markLiveGlow('loops-section');
   } catch (err) {
     el.innerHTML = '<div class="empty">Could not load loops: ' + esc(err.message) + '</div>';
   }
@@ -5171,6 +5309,14 @@ function toggleLoop(row) {
   row.classList.toggle('open');
 }
 
+function toggleLoopsSection() {
+  var sec = document.getElementById('loops-section');
+  var chev = document.getElementById('loops-chevron');
+  var open = sec.style.display === 'none';
+  sec.style.display = open ? '' : 'none';
+  chev.style.transform = open ? 'rotate(90deg)' : '';
+}
+
 function showLoopForm() {
   document.getElementById('loop-create-form').style.display = 'block';
   document.getElementById('btn-new-loop').style.display = 'none';
@@ -9452,7 +9598,7 @@ function cmdSearch(q) {
     { label: 'Open Monograph', action: () => { const l = document.querySelector('.nav-item[data-view="monograph"]'); if (l) l.click(); } },
     { label: 'Refresh Dashboard', action: () => refreshCurrent() },
     { label: 'Toggle Compact View', action: () => toggleDensity() },
-    { label: 'Open Loops', action: () => { const l = document.querySelector('.nav-item[data-view="loops"]'); if (l) l.click(); } },
+    { label: 'Open Loops', action: () => { switchView('sessions'); toggleLoopsSection(); } },
   ].filter(a => !lq || a.label.toLowerCase().includes(lq));
 
   // TABS group — only if org room is open
@@ -13476,27 +13622,55 @@ async function secondBrainSearch() {
   box.innerHTML = '<div class="loading-txt">Searching…</div>';
   try {
     const scopeSel = document.getElementById('sb-search-scope');
-    const r = await fetch('/api/knowledge/search', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ query: q, limit: 5, scope: scopeSel ? scopeSel.value : 'all' }),
-    });
+    const [r, routeR] = await Promise.all([
+      fetch('/api/knowledge/search', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ query: q, limit: 5, scope: scopeSel ? scopeSel.value : 'all' }),
+      }),
+      fetch('/api/second-brain-route', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ query: q }),
+      }).catch(function() { return null; }),
+    ]);
     if (!r.ok) throw new Error('HTTP ' + r.status);
     const data = await r.json();
+    var routeData = null;
+    if (routeR && routeR.ok) { try { routeData = await routeR.json(); } catch(_) {} }
     const results = data.results || [];
+    // Route inspector bar
+    var routeHtml = '';
+    if (routeData && routeData.route) {
+      var rd = routeData.route;
+      var surfaces = ['chunks', 'kg', 'rules', 'memory'];
+      var surfaceColors = { chunks: 'oklch(72% 0.18 145)', kg: 'oklch(72% 0.18 280)', rules: 'oklch(72% 0.18 75)', memory: 'oklch(72% 0.18 30)' };
+      routeHtml = '<div style="background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin-bottom:8px">' +
+        '<div style="font-size:10px;letter-spacing:0.07em;text-transform:uppercase;color:var(--text-xs);margin-bottom:5px">Route Decision' +
+          (rd.confident ? ' <span style="color:oklch(72% 0.18 145)">confident</span>' : ' <span style="color:oklch(72% 0.18 75)">low-confidence (all surfaces queried)</span>') +
+        '</div>' +
+        '<div style="display:flex;gap:8px;flex-wrap:wrap">' +
+        surfaces.map(function(s) {
+          var score = rd.scores[s] || 0;
+          var active = rd.surfaces.indexOf(s) !== -1;
+          return '<div style="font-size:11px;padding:3px 8px;border-radius:6px;border:1px solid ' +
+            (active ? surfaceColors[s] : 'var(--border)') + ';color:' +
+            (active ? surfaceColors[s] : 'var(--text-lo)') + ';background:' +
+            (active ? surfaceColors[s].replace(')', ' / 0.1)') : 'transparent') + '">' +
+            s + ' <span style="font-family:var(--mono);font-weight:600">' + score.toFixed(1) + '</span></div>';
+        }).join('') +
+        '</div></div>';
+    }
     if (!results.length) {
-      box.innerHTML = '<div class="empty" style="padding:10px">No matches (' + esc(data.method || '?') + '). Ingest documents with: <code>monomind doc ingest ./path</code></div>';
+      box.innerHTML = routeHtml + '<div class="empty" style="padding:10px">No matches (' + esc(data.method || '?') + '). Ingest documents with: <code>monomind doc ingest ./path</code></div>';
       return;
     }
-    box.innerHTML =
+    box.innerHTML = routeHtml +
       '<div style="font-size:10px;letter-spacing:0.07em;text-transform:uppercase;color:var(--text-xs);margin-bottom:6px">' +
         results.length + ' result(s) · ' + esc(data.method || '') + '</div>' +
       results.map(function (res) {
         var srcTag = (res.tags || []).find(function (t) { return t.indexOf('src:') === 0; });
         var label = srcTag ? srcTag.slice(4).split('/').slice(-2).join('/') : (res.key || '');
-        // Surface badge: the endpoint fuses chunks + KG triplets + rules +
-        // pattern memories (RRF); show non-chunk kinds so users see where a
-        // hit came from.
         var kindBadge = res.triplet ? 'kg' : (res.rule ? 'rule' : (res.memory ? 'memory' : ''));
         return '<div style="border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin-bottom:6px">' +
           '<div style="font-size:10px;color:var(--text-lo);margin-bottom:3px">' + esc(label) +
@@ -13516,6 +13690,7 @@ async function loadChunksTab() {
   const grid = document.getElementById('chunks-grid');
   if (!grid) return;
   grid.innerHTML = '<div class="loading-txt">Loading…</div>';
+  loadSBAnalytics();
   try {
     const data = await apiFetch('/api/section?name=knowledge&full=1&dir=' + enc(DIR));
     // /api/section returns {"knowledge":{"chunks":N,"allChunks":[...]}} — extract the array
@@ -13531,6 +13706,310 @@ async function loadChunksTab() {
   }
 }
 
+async function loadSBAnalytics() {
+  // Populate global brain & doc counts in parallel
+  try {
+    var docsData = await apiFetch('/api/second-brain-docs');
+    var gEl = document.getElementById('chunk-global-val');
+    var dEl = document.getElementById('chunk-docs-val');
+    if (gEl) gEl.textContent = (docsData.globalCount || 0).toLocaleString();
+    if (dEl) dEl.textContent = (docsData.totalDocs || 0).toLocaleString();
+  } catch (_) {}
+  try {
+    const data = await apiFetch('/api/second-brain-metrics');
+    if (!data || data.total === 0) return;
+    const el = document.getElementById('sb-analytics');
+    if (el) el.style.display = '';
+    // Hit rate
+    const hrEl = document.getElementById('sb-hit-rate');
+    if (hrEl) hrEl.textContent = (data.hitRate * 100).toFixed(1) + '%';
+    const hdEl = document.getElementById('sb-hit-detail');
+    if (hdEl) hdEl.textContent = data.injected + '/' + data.total + ' prompts';
+    // Method distribution
+    const mvEl = document.getElementById('sb-method-val');
+    const mbEl = document.getElementById('sb-method-bar');
+    const mdEl = document.getElementById('sb-method-detail');
+    const methods = data.methods || {};
+    const semCount = methods.semantic || 0;
+    const kwCount = methods.keyword || 0;
+    const totalMethods = semCount + kwCount + (methods.unknown || 0) + (methods.mixed || 0);
+    if (mvEl) mvEl.textContent = totalMethods > 0 && semCount > kwCount ? 'Semantic' : (kwCount > 0 ? 'Keyword' : '—');
+    if (mbEl && totalMethods > 0) {
+      const semPct = (semCount / totalMethods * 100).toFixed(0);
+      const kwPct = (kwCount / totalMethods * 100).toFixed(0);
+      mbEl.innerHTML = '<div class="sb-method-seg" style="width:' + semPct + '%;background:oklch(72% 0.18 145)" title="Semantic ' + semPct + '%"></div>' +
+        '<div class="sb-method-seg" style="width:' + kwPct + '%;background:oklch(72% 0.18 75)" title="Keyword ' + kwPct + '%"></div>';
+    }
+    if (mdEl) mdEl.textContent = semCount + ' semantic · ' + kwCount + ' keyword';
+    // Average score
+    const asEl = document.getElementById('sb-avg-score');
+    if (asEl) asEl.textContent = data.avgScore > 0 ? data.avgScore.toFixed(2) : '—';
+    // Score distribution
+    const sdEl = document.getElementById('sb-score-dist');
+    if (sdEl && data.scoreBuckets) {
+      const maxB = Math.max(...data.scoreBuckets, 1);
+      const labels = ['<0.3', '0.3–0.5', '0.5–0.7', '0.7–0.9', '0.9+'];
+      sdEl.innerHTML = data.scoreBuckets.map(function(v, i) {
+        return '<div class="sb-score-bar" style="height:' + Math.max(2, v / maxB * 24) + 'px" title="' + labels[i] + ': ' + v + '"></div>';
+      }).join('');
+    }
+    // Sparkline
+    const slEl = document.getElementById('sb-sparkline');
+    if (slEl && data.sparkline && data.sparkline.length > 0) {
+      const maxS = Math.max(...data.sparkline.map(function(b) { return b.total; }), 1);
+      slEl.innerHTML = data.sparkline.map(function(b) {
+        if (b.total === 0) return '<div class="sb-spark-bar" style="height:1px;background:var(--border)"></div>';
+        var hitH = Math.max(2, b.injected / maxS * 32);
+        var missH = Math.max(0, (b.total - b.injected) / maxS * 32);
+        return '<div style="display:flex;flex-direction:column;gap:1px;flex:1;align-items:stretch">' +
+          (missH > 0 ? '<div class="sb-spark-bar miss" style="height:' + missH + 'px"></div>' : '') +
+          '<div class="sb-spark-bar hit" style="height:' + hitH + 'px"></div></div>';
+      }).join('');
+    }
+    const spEl = document.getElementById('sb-spark-detail');
+    if (spEl) {
+      var recent24 = data.sparkline ? data.sparkline.reduce(function(a, b) { return { total: a.total + b.total, injected: a.injected + b.injected }; }, { total: 0, injected: 0 }) : { total: 0, injected: 0 };
+      spEl.textContent = recent24.injected + ' hits / ' + recent24.total + ' queries';
+    }
+    // Route overrides (misroutes)
+    var overrides = data.routeOverrides || {};
+    var overrideKeys = Object.keys(overrides);
+    if (overrideKeys.length > 0) {
+      var ocEl = document.getElementById('sb-overrides-card');
+      var ovEl = document.getElementById('sb-overrides-val');
+      var odEl = document.getElementById('sb-overrides-detail');
+      if (ocEl) ocEl.style.display = '';
+      var totalOverrides = overrideKeys.reduce(function(s, k) { return s + overrides[k]; }, 0);
+      if (ovEl) ovEl.textContent = totalOverrides;
+      if (odEl) odEl.textContent = overrideKeys.slice(0, 3).map(function(k) { return k + ': ' + overrides[k]; }).join(', ');
+    }
+  } catch (_) {}
+}
+
+var _sbDocsLoaded = false;
+var _sbDocs = [];
+function switchSBView(view) {
+  var panes = ['chunks', 'docs', 'monitor', 'config', 'kg'];
+  panes.forEach(function(p) {
+    var pane = document.getElementById('sb-view-' + p + '-pane');
+    var btn = document.getElementById('sb-view-' + p);
+    if (pane) pane.style.display = p === view ? '' : 'none';
+    if (btn) {
+      if (p === view) { btn.style.borderColor = 'var(--accent)'; btn.style.color = 'var(--accent)'; btn.style.opacity = '1'; btn.style.fontWeight = '600'; }
+      else { btn.style.borderColor = ''; btn.style.color = ''; btn.style.opacity = '0.6'; btn.style.fontWeight = ''; }
+    }
+  });
+  if (view === 'docs') loadSBDocs();
+  if (view === 'monitor') startIngestStream();
+  if (view === 'config') loadSBConfig();
+  if (view === 'kg') loadSBKnowledgeGraph();
+}
+
+async function loadSBDocs() {
+  if (_sbDocsLoaded) return;
+  var grid = document.getElementById('sb-docs-grid');
+  if (!grid) return;
+  grid.innerHTML = '<div class="loading-txt">Loading…</div>';
+  try {
+    var data = await apiFetch('/api/second-brain-docs');
+    _sbDocs = data.docs || [];
+    _sbDocsLoaded = true;
+    _renderSBDocs(_sbDocs);
+  } catch (e) {
+    grid.innerHTML = '<div class="empty">Failed: ' + esc(e.message) + '</div>';
+  }
+}
+
+function _renderSBDocs(list) {
+  var grid = document.getElementById('sb-docs-grid');
+  if (!grid) return;
+  if (!list.length) {
+    grid.innerHTML = '<div class="empty">No documents indexed.<br><span style="font-size:11px;color:var(--text-xs)">Run <code>monomind doc ingest ./path</code> to add documents.</span></div>';
+    return;
+  }
+  var extIcons = { '.pdf': '\u{1F4C4}', '.md': '\u{1F4DD}', '.txt': '\u{1F4C3}', '.docx': '\u{1F4D1}', '.mdx': '\u{1F4DD}', '.rst': '\u{1F4C3}' };
+  grid.innerHTML = '<div style="font-size:10px;letter-spacing:0.07em;text-transform:uppercase;color:var(--text-xs);margin-bottom:6px">' + list.length + ' document(s)</div>' +
+    list.map(function(d) {
+      var ext = (d.filePath || '').split('.').pop();
+      var icon = extIcons['.' + ext] || '\u{1F4C4}';
+      var size = d.size > 1048576 ? (d.size / 1048576).toFixed(1) + ' MB' : (d.size > 1024 ? (d.size / 1024).toFixed(0) + ' KB' : d.size + ' B');
+      var ago = d.indexedAt ? _timeAgo(d.indexedAt) : '';
+      return '<div class="sb-doc-card" data-search="' + esc((d.name + ' ' + d.filePath).toLowerCase()) + '">' +
+        '<div class="sb-doc-icon">' + icon + '</div>' +
+        '<div class="sb-doc-info">' +
+          '<div class="sb-doc-name">' + esc(d.name || '—') + '</div>' +
+          '<div class="sb-doc-path">' + esc(d.filePath || '') + '</div>' +
+          '<div class="sb-doc-meta">' +
+            '<span class="sb-doc-badge">' + d.chunkCount + ' chunks</span>' +
+            '<span class="sb-doc-badge">' + size + '</span>' +
+            (d.brainScope === 'global' ? '<span class="sb-doc-badge global">global</span>' : '') +
+            (!d.exists ? '<span class="sb-doc-badge missing">file missing</span>' : '') +
+            (ago ? '<span class="sb-doc-badge">' + ago + '</span>' : '') +
+          '</div>' +
+        '</div></div>';
+    }).join('');
+}
+
+function _timeAgo(iso) {
+  var diff = Date.now() - new Date(iso).getTime();
+  if (diff < 3600000) return Math.floor(diff / 60000) + 'm ago';
+  if (diff < 86400000) return Math.floor(diff / 3600000) + 'h ago';
+  return Math.floor(diff / 86400000) + 'd ago';
+}
+
+function filterSBDocs(val) {
+  var cards = document.querySelectorAll('#sb-docs-grid .sb-doc-card');
+  var q = (val || '').toLowerCase();
+  cards.forEach(function(c) { c.style.display = !q || (c.dataset.search || '').includes(q) ? '' : 'none'; });
+}
+
+// --- Live Ingest Monitor (SSE) ---
+var _ingestStream = null;
+var _ingestEventCount = 0;
+function startIngestStream() {
+  if (_ingestStream) return;
+  var badge = document.getElementById('sb-live-badge');
+  try {
+    _ingestStream = window.mmEventSource ? window.mmEventSource('/api/second-brain-ingest-stream') : new EventSource('/api/second-brain-ingest-stream');
+    _ingestStream.onopen = function() { if (badge) badge.innerHTML = '<span class="sb-live-dot"></span> live'; };
+    _ingestStream.onmessage = function(ev) {
+      try {
+        var d = JSON.parse(ev.data);
+        if (d.type === 'connected') { if (badge) badge.innerHTML = '<span class="sb-live-dot"></span> live'; return; }
+        _ingestEventCount++;
+        var countEl = document.getElementById('sb-monitor-count');
+        if (countEl) countEl.textContent = _ingestEventCount + ' events';
+        var feed = document.getElementById('sb-ingest-feed');
+        if (!feed) return;
+        if (_ingestEventCount === 1) feed.innerHTML = '';
+        var item = document.createElement('div');
+        item.className = 'sb-ingest-item' + (d.type === 'injection' ? ' injection' : '');
+        var now = new Date();
+        var timeStr = now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0') + ':' + now.getSeconds().toString().padStart(2, '0');
+        if (d.type === 'ingest') {
+          item.innerHTML = '<span class="sb-ingest-dot ingest"></span><span class="sb-ingest-time">' + timeStr + '</span>' +
+            '<span style="flex:1">' + esc(d.doc.name || '—') + ' <span style="color:var(--text-xs)">' + (d.doc.chunkCount || '?') + ' chunks</span></span>' +
+            (d.doc.brainScope === 'global' ? '<span class="sb-doc-badge global" style="font-size:9px">global</span>' : '');
+        } else if (d.type === 'injection') {
+          var iev = d.event || {};
+          item.innerHTML = '<span class="sb-ingest-dot ' + (iev.injected ? 'injection' : 'miss') + '"></span><span class="sb-ingest-time">' + timeStr + '</span>' +
+            '<span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">' + (iev.injected ? 'Injected' : 'Miss') + ' — ' + esc((iev.terms || []).join(' ').slice(0, 60)) + '</span>' +
+            '<span style="font-family:var(--mono);font-size:10px;color:var(--text-xs)">' + (iev.topScore != null ? iev.topScore.toFixed(2) : '—') + '</span>' +
+            '<span style="font-size:9px;padding:1px 5px;border-radius:8px;background:oklch(72% 0.18 ' + (iev.method === 'semantic' ? '145' : '75') + ' / 0.1);color:oklch(72% 0.18 ' + (iev.method === 'semantic' ? '145' : '75') + ')">' + (iev.method || '?') + '</span>';
+        }
+        feed.prepend(item);
+        while (feed.children.length > 100) feed.removeChild(feed.lastChild);
+      } catch (_) {}
+    };
+    _ingestStream.onerror = function() { if (badge) badge.innerHTML = '<span class="sb-live-dot" style="background:oklch(72% 0.18 25)"></span> disconnected'; };
+  } catch (_) { if (badge) badge.innerHTML = 'unavailable'; }
+}
+function clearIngestFeed() {
+  _ingestEventCount = 0;
+  var feed = document.getElementById('sb-ingest-feed');
+  if (feed) feed.innerHTML = '<div style="color:var(--text-xs);font-size:11px;padding:12px;text-align:center">Waiting for ingest or injection events…</div>';
+  var countEl = document.getElementById('sb-monitor-count');
+  if (countEl) countEl.textContent = '0 events';
+}
+
+// --- Config / Auto-Tune Panel ---
+var _sbConfigLoaded = false;
+async function loadSBConfig() {
+  if (_sbConfigLoaded) return;
+  try {
+    var data = await apiFetch('/api/second-brain-config');
+    _sbConfigLoaded = true;
+    var cfg = data.config || {};
+    var floorEl = document.getElementById('sb-cfg-floor');
+    var limitEl = document.getElementById('sb-cfg-limit');
+    if (floorEl) floorEl.value = cfg.relevanceFloor != null ? cfg.relevanceFloor : 0.35;
+    if (limitEl) limitEl.value = cfg.injectionLimit != null ? cfg.injectionLimit : 5;
+    var tuneEl = document.getElementById('sb-tune-result');
+    if (data.suggestion) {
+      var s = data.suggestion;
+      if (tuneEl) tuneEl.innerHTML = '<span class="sb-tune-badge" onclick="applySBSuggestion(' + s.floor + ')" title="Click to apply">Suggested floor: ' + s.floor + '</span> ' +
+        '<span style="color:var(--text-lo);margin-left:6px">' + esc(s.reason) + '</span>';
+    } else {
+      if (tuneEl) tuneEl.textContent = 'Not enough data for a suggestion (need 20+ entries) or current settings are optimal.';
+    }
+  } catch (e) {
+    var tuneErr = document.getElementById('sb-tune-result');
+    if (tuneErr) tuneErr.textContent = 'Failed: ' + e.message;
+  }
+}
+function applySBSuggestion(floor) {
+  var el = document.getElementById('sb-cfg-floor');
+  if (el) el.value = floor;
+  saveSBConfig();
+}
+async function saveSBConfig() {
+  var statusEl = document.getElementById('sb-cfg-status');
+  var floor = parseFloat(document.getElementById('sb-cfg-floor').value);
+  var limit = parseInt(document.getElementById('sb-cfg-limit').value, 10);
+  if (isNaN(floor) || floor < 0 || floor > 1) { if (statusEl) statusEl.textContent = 'Invalid floor (0–1)'; return; }
+  if (isNaN(limit) || limit < 1) { if (statusEl) statusEl.textContent = 'Invalid limit'; return; }
+  try {
+    if (statusEl) statusEl.textContent = 'Saving…';
+    var resp = await fetch('/api/second-brain-config', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ relevanceFloor: floor, injectionLimit: limit })
+    });
+    if (!resp.ok) throw new Error('HTTP ' + resp.status);
+    if (statusEl) statusEl.textContent = 'Saved ✓';
+    _sbConfigLoaded = false;
+    setTimeout(function() { if (statusEl) statusEl.textContent = ''; }, 2000);
+  } catch (e) {
+    if (statusEl) statusEl.textContent = 'Error: ' + e.message;
+  }
+}
+
+// --- Knowledge Graph Explorer ---
+async function loadSBKnowledgeGraph(query) {
+  var tripletsEl = document.getElementById('sb-kg-triplets');
+  if (!tripletsEl) return;
+  tripletsEl.innerHTML = '<div class="loading-txt">Loading…</div>';
+  try {
+    var url = '/api/second-brain-kg?limit=100';
+    if (query) url += '&q=' + encodeURIComponent(query);
+    var data = await apiFetch(url);
+    var nodesEl = document.getElementById('sb-kg-nodes');
+    var edgesEl = document.getElementById('sb-kg-edges');
+    if (nodesEl) nodesEl.textContent = (data.stats.nodes || 0).toLocaleString();
+    if (edgesEl) edgesEl.textContent = (data.stats.edges || 0).toLocaleString();
+    // Glossary tags
+    var glossEl = document.getElementById('sb-kg-glossary');
+    if (glossEl && data.glossary && data.glossary.length > 0) {
+      glossEl.innerHTML = data.glossary.map(function(g) {
+        var name = typeof g === 'string' ? g : (g.name || g.entity || '');
+        var safe = esc(JSON.stringify(name));
+        return '<span class="sb-kg-tag" onclick="var n=' + safe + ';document.getElementById(\'sb-kg-search\').value=n;loadSBKnowledgeGraph(n)">' + esc(name) + '</span>';
+      }).join('');
+    }
+    // Triplets
+    var triplets = data.triplets || [];
+    if (!triplets.length) {
+      tripletsEl.innerHTML = '<div class="empty">No triplets found.' + (query ? ' Try a different search.' : ' Ingest documents to build the knowledge graph.') + '</div>';
+      return;
+    }
+    tripletsEl.innerHTML = triplets.map(function(t) {
+      var s = t.subject || t.s || t.head || '?';
+      var r = t.predicate || t.relation || t.p || t.rel || '→';
+      var o = t.object || t.o || t.tail || '?';
+      var safeS = esc(JSON.stringify(s));
+      var safeO = esc(JSON.stringify(o));
+      return '<div class="sb-kg-triplet">' +
+        '<span class="sb-kg-entity subject" onclick="var n=' + safeS + ';document.getElementById(\'sb-kg-search\').value=n;loadSBKnowledgeGraph(n)">' + esc(s) + '</span>' +
+        '<span class="sb-kg-rel">' + esc(r) + '</span>' +
+        '<span class="sb-kg-entity object" onclick="var n=' + safeO + ';document.getElementById(\'sb-kg-search\').value=n;loadSBKnowledgeGraph(n)">' + esc(o) + '</span>' +
+        (t.confidence ? '<span style="font-size:9px;color:var(--text-xs);margin-left:auto;font-family:var(--mono)">' + (t.confidence * 100).toFixed(0) + '%</span>' : '') +
+      '</div>';
+    }).join('');
+  } catch (e) {
+    tripletsEl.innerHTML = '<div class="empty">Failed: ' + esc(e.message) + '</div>';
+  }
+}
+
 function _renderChunkStats(list) {
   const countEl = document.getElementById('chunk-count-val');
   const skillsEl = document.getElementById('chunk-skills-val');
@@ -13558,15 +14037,25 @@ function _renderChunks(list) {
   // leaked markup) whenever the text contained quotes.
   const shown = list.slice(0, 200);
   window._chunksShown = shown;
+  // Compute chunk size distribution for quality signals
+  var sizes = shown.map(function(c) { return (c.content || c.text || c.body || '').length; });
+  var avgSize = sizes.length > 0 ? sizes.reduce(function(a, b) { return a + b; }, 0) / sizes.length : 0;
   grid.innerHTML = shown.map((c, i) => {
     const src = (c.source || c.file || '').split('/').slice(-2).join('/');
     const excerpt = (c.content || c.text || c.body || '').slice(0, 220);
     const ns = c.namespace || c.type || '';
+    const cLen = (c.content || c.text || c.body || '').length;
+    var sizeNote = '';
+    if (cLen < 50) sizeNote = '<span class="chunk-ns" style="color:oklch(72% 0.18 75);background:oklch(72% 0.18 75 / 0.1)" title="Very short chunk — may be noise">tiny</span>';
+    else if (cLen > 4000) sizeNote = '<span class="chunk-ns" style="color:oklch(72% 0.18 280);background:oklch(72% 0.18 280 / 0.1)" title="Large chunk — may be imprecise for retrieval">large</span>';
+    var idxNote = typeof c.chunkIndex === 'number' ? '<span class="chunk-ns" title="Chunk index within document">#' + c.chunkIndex + '</span>' : '';
     return '<div class="chunk-card" data-search="' + esc((src + ' ' + excerpt + ' ' + ns).toLowerCase()) + '">' +
       '<div class="chunk-src">' + esc(src || '—') + '</div>' +
       '<div class="chunk-excerpt">' + esc(excerpt) + '</div>' +
       '<div class="chunk-footer">' +
         (ns ? '<span class="chunk-ns">' + esc(ns) + '</span>' : '') +
+        idxNote + sizeNote +
+        '<span class="chunk-ns" style="opacity:0.5" title="Character count">' + cLen + ' chars</span>' +
         '<button class="btn" style="margin-left:auto;font-size:10px;padding:1px 7px" onclick="openChunkEditAt(' + i + ')">✎ Edit</button>' +
         '<button class="btn" style="font-size:10px;padding:1px 7px;color:var(--red);border-color:var(--red)" onclick="deleteChunkAt(' + i + ')">✕</button>' +
       '</div>' +