claude-finops 0.10.1 → 0.12.0

package/README.md

@@ -318,6 +318,11 @@ agents listed under Multi-agent.
 server binds to `127.0.0.1` only, but treat the database and any export you
 generate as sensitive.
 
+**Hide prompts** (the eye icon in the top bar) hides prompt text and session titles as dots,
+for when you share your screen. Session titles fall back to their short id. The
+setting is remembered in that browser. It only changes what the page shows: the
+database and exports still contain the full text.
+
 The app makes exactly one outbound request of its own: once a day it asks
 `registry.npmjs.org` what the latest `claude-finops` version is, so it can tell
 you when an upgrade is out (npm has no way to push one at you). It sends nothing
@@ -359,7 +364,8 @@ files on Windows.
 
 ## Actions (these change your machine, and only when you click)
 
-- **⟳ Sync** (top bar) re-reads `~/.claude` and swaps in fresh data without restarting.
+- **Sync** (top bar, database icon) re-reads `~/.claude` and swaps in fresh data without restarting.
+  The circular-arrow **Reload** next to it only redraws the page from the data already loaded.
 - **Free models** adds a launcher such as `claude-qwen` in `~/.local/bin` that runs Claude Code
   on a free model (Ollama locally, or OpenRouter). It lists every step first, and asks before it
   installs Ollama or downloads a model. Your normal `claude` is unchanged. Edit the list in
@@ -367,12 +373,17 @@ files on Windows.
 - **Skills & MCP** suggests MCP servers and skills from work you repeat, with the evidence.
   "Add" runs `claude mcp add -s user …`; "Create skill" writes `~/.claude/skills/<name>/SKILL.md`.
   The strongest skill suggestions also appear in **⚡ Act now** on the overview.
-- **Compact** (Running sessions, Act now, session rows) types `/compact` into that session's
+- **Compact** (Running sessions, Recent, Act now, session rows) types `/compact` into that session's
   terminal: tmux, Terminal.app, iTerm2 or the Windows console. Anywhere else it copies the
   command for you to paste. It asks you to click twice.
 - **Hand over / split** (Running sessions) writes a brief of the session to
   `~/.claude/finops-handoffs/` and opens fresh session(s) in new terminals, one per sub-task if
   you list them; it can close the old session (resumable).
+- **Recent** (clock icon in the top bar, or press `R`) opens a side panel on any page: running sessions first,
+  with Resume, Compact and Stop (Interrupt), then past sessions newest first. Click a session to
+  list its prompts, and click a prompt for its full details. Search matches your prompt text.
+  It covers all dates but keeps the agent and project filters. Close and Force kill stay on
+  Running sessions.
 - **Interrupt / Close / Force kill** (Running sessions) send the session's process a signal.
   Each asks you to click twice. Interrupt is macOS/Linux only: on Windows there is no way to
   interrupt one console process without hitting the others in its window.

package/finops/act_now.py

@@ -33,6 +33,8 @@ def build(live, skills, memory, statusline):
             "kind": "session", "severity": x["severity"], "pid": x.get("pid"),
             "session_id": x.get("session_id"), "hosts_dashboard": bool(x.get("hosts_dashboard")),
             "title": f"{x.get('name') or 'A session'} is carrying {_k(x['context'])} tokens of context",
+            # the part of the title that comes from the user's prompts, for the privacy mask
+            "private": x.get("name"),
             "detail": f"{x.get('project') or ''} · every message re-reads all of it. "
                       + ("Hand it over to a fresh session." if x["severity"] == "high"
                          else "Compact it at the next break."),
@@ -52,6 +54,7 @@ def build(live, skills, memory, statusline):
         items.append({
             "kind": "memory",
             "title": f"You keep re-typing instructions about: {m['text']}",
+            "private": m["text"],
             "detail": f"Seen in {m['sessions']} sessions. Put it in {m['target']} once instead.",
         })
     if statusline is None:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-finops",
-  "version": "0.10.1",
+  "version": "0.12.0",
   "description": "Local FinOps dashboard for Claude Code: what you used, what it cost, why it cost that much, and what to change. Reads your own transcripts, no API key, no data leaves the machine.",
   "bin": {
     "claude-finops": "bin/claude-finops.js"

package/web/app.js

@@ -21,6 +21,15 @@ const h = (html) => { const t = document.createElement('template');
 const esc = s => String(s ?? '').replace(/[&<>"']/g, c =>
   ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
 
+/* ---------- privacy mask ----------
+   For screen-sharing: prompt text and session titles (written from your prompts)
+   render as dots. Only the page changes; the warehouse and exports are untouched. */
+const MASK_KEY = 'finops-mask-prompts';
+let MASKED = false;
+try { MASKED = localStorage.getItem(MASK_KEY) === '1'; } catch (_) {}
+const pt = t => MASKED && t ? String(t).replace(/\S/g, '•') : t;
+const stitle = x => (!MASKED && x.title) || shortId(x.session_id);
+
 const qs = () => {
   const f = S.filter, p = new URLSearchParams();
   if (f.start) p.set('start', f.start);
@@ -82,7 +91,7 @@ const vsYesterday = o => {
 };
 function kpi(label, value, detail, opts = {}) {
   const na = value == null;
-  return `<div class="kpi${na ? ' na' : ''}">
+  return `<div class="kpi${na ? ' na' : ''}${opts.tone && !na ? ' tone-' + opts.tone : ''}"${opts.title ? ` title="${esc(opts.title)}"` : ''}>
     <div class="l">${esc(label)}${opts.badge ? ' ' + opts.badge : ''}</div>
     <div class="v${opts.small ? ' sm' : ''}">${na ? esc(naLabel()) : value}</div>
     ${detail ? `<div class="d">${detail}</div>` : ''}</div>`;
@@ -152,6 +161,31 @@ const NAV = [
   ]],
 ];
 
+// Toolbar icons: 24px line icons drawn in currentColor, so they follow the theme.
+const toolIcon = d => `<svg viewBox="0 0 24 24" aria-hidden="true">${d}</svg>`;
+const ICON = {
+  tour: toolIcon('<circle cx="12" cy="12" r="10"/><path d="m16.2 7.8-2.1 6.3-6.3 2.1 2.1-6.3z"/>'),
+  recent: toolIcon('<path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l3 2"/>'),
+  eye: toolIcon('<path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/>'),
+  eyeOff: toolIcon('<path d="M10.7 5.1A10.4 10.4 0 0 1 12 5c6.4 0 10 7 10 7a18 18 0 0 1-2.2 3.2"/><path d="M6.6 6.6A17.6 17.6 0 0 0 2 12s3.6 7 10 7a9.7 9.7 0 0 0 5.4-1.6"/><path d="M9.9 9.9a3 3 0 0 0 4.2 4.2"/><path d="m2 2 20 20"/>'),
+  moon: toolIcon('<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/>'),
+  sun: toolIcon('<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/>'),
+  reload: toolIcon('<path d="M21 12a9 9 0 1 1-2.6-6.4L21 8"/><path d="M21 3v5h-5"/>'),
+  // Sync pulls transcripts into the warehouse: a database with an arrow going in.
+  sync: toolIcon('<ellipse cx="11" cy="5" rx="7" ry="3"/><path d="M4 5v6c0 1.66 3.13 3 7 3"/><path d="M4 11v6c0 1.66 3.13 3 7 3"/><path d="M18 5v5"/><path d="M19 13v8"/><path d="m16 18 3 3 3-3"/>'),
+};
+
+// The theme button shows the theme it switches to: a moon in light mode, a sun in dark.
+function themeLabel() {
+  const b = $('#theme'); if (!b) return;
+  const cur = document.documentElement.getAttribute('data-theme')
+    || (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+  const to = cur === 'dark' ? 'light' : 'dark';
+  b.innerHTML = to === 'dark' ? ICON.moon : ICON.sun;
+  b.title = `Switch to ${to} theme`;
+  b.setAttribute('aria-label', b.title);
+}
+
 function shell() {
   document.body.innerHTML = `<div class="app">
     <aside class="sidebar">
@@ -166,16 +200,21 @@ function shell() {
     <div class="main">
       <header class="topbar">
         <div class="r1">
-          <h1 id="ttl">Executive overview</h1>
-          <div class="crumbs" id="crumbs"></div>
+          <div class="ttl-block"><h1 id="ttl">Executive overview</h1>
+            <div class="crumbs" id="crumbs"></div></div>
+          <div class="scope" id="scope" aria-label="Totals for the current filters"></div>
           <span class="spacer"></span>
           <div class="search"><span class="mag">⌕</span>
-            <input id="gsearch" placeholder="Search prompts, sessions, models, dates…"></div>
+            <input id="gsearch" placeholder="Search prompts, sessions, models…"></div>
           <button class="iconbtn upd" id="upd" hidden></button>
-          <button class="iconbtn" id="tour-btn" title="Walk through this dashboard">? Tour</button>
-          <button class="iconbtn" id="theme" title="Toggle theme">◐</button>
-          <button class="iconbtn" id="refresh" title="Reload data">↻</button>
-          <button class="act" id="sync" title="Re-read every agent's local data so the dashboard is current">⟳ Sync</button>
+          <div class="tools">
+            <button class="iconbtn" id="tour-btn" title="Walk through this dashboard">${ICON.tour}Tour</button>
+            <button class="iconbtn sq" id="recent-btn" title="Recent sessions and prompts, from any page (R)" aria-label="Recent">${ICON.recent}</button>
+            <button class="iconbtn sq" id="mask"></button>
+            <button class="iconbtn sq" id="theme"></button>
+            <button class="iconbtn sq" id="refresh" title="Reload this page's numbers from the warehouse. To pick up new sessions, use Sync" aria-label="Reload view">${ICON.reload}</button>
+          </div>
+          <button class="act sync" id="sync" title="Re-read every agent's transcripts from disk into the warehouse">${ICON.sync}Sync</button>
         </div>
         <div class="filters" id="filters"></div>
       </header>
@@ -191,9 +230,19 @@ function shell() {
       : (matchMedia('(prefers-color-scheme: dark)').matches ? 'light' : 'dark');
     document.documentElement.setAttribute('data-theme', next);
     localStorage.setItem('finops-theme', next);
+    themeLabel();
     render();
   };
+  themeLabel();
   $('#refresh').onclick = () => { bust(); render(); };
+  maskLabel();
+  $('#mask').onclick = () => {
+    MASKED = !MASKED;
+    try { localStorage.setItem(MASK_KEY, MASKED ? '1' : '0'); } catch (_) {}
+    maskLabel(); closeDrawer(); render();
+    if (RECENT.open) { RECENT.offset = 0; renderRecent(); }
+  };
+  $('#recent-btn').onclick = () => toggleRecent();
   updateChip();
   $('#sync').onclick = runSync;
   syncLabel();
@@ -203,6 +252,77 @@ function shell() {
       else if (S.view === 'search') go('overview'); }, 260); };
 }
 
+// The page loader: a skeleton in the shape of a dashboard (KPI row, two charts, a table)
+// so the layout doesn't jump when data lands, plus a status line that says what is
+// happening and, on a slow query, how long it has taken.
+const LOADER_STEPS = ['Reading the warehouse', 'Pricing every request', 'Adding up tokens and cache',
+  'Grouping by session and project', 'Drawing the charts'];
+const LOADER_TIPS = ['Press R anywhere to open Recent sessions.',
+  'Click any row in a table to open its details.',
+  'The eye button hides prompt text before you share your screen.',
+  '"Actual" numbers come from transcripts; "Estimated" ones use list prices.',
+  'Tour walks you through whichever dashboard you are on.'];
+function pageLoader() {
+  const bone = (w, h = 10) => `<i class="bone" style="width:${w};height:${h}px"></i>`;
+  const bars = [38, 62, 45, 80, 56, 90, 70, 48, 66, 84, 58, 74]
+    .map((v, i) => `<i style="height:${v}%;animation-delay:${i * 70}ms"></i>`).join('');
+  return `<div class="pl" role="status" aria-live="polite">
+    <div class="pl-status"><span class="pl-mark"><i></i><i></i><i></i></span>
+      <span class="pl-msg">${LOADER_STEPS[0]}…</span><span class="pl-time"></span></div>
+    <div class="grid g4">${Array.from({length: 4}, () =>
+      `<div class="kpi skel">${bone('55%', 8)}${bone('45%', 22)}${bone('70%', 8)}</div>`).join('')}</div>
+    <div class="grid g2">
+      <div class="card skel"><div class="body">${bone('35%', 10)}<div class="pl-bars">${bars}</div></div></div>
+      <div class="card skel"><div class="body">${bone('30%', 10)}<div class="pl-bars alt">${bars}</div></div></div>
+    </div>
+    <div class="card skel"><div class="body">${bone('25%', 10)}
+      ${Array.from({length: 4}, (_, i) => `<div class="pl-row">${bone(`${60 - i * 8}%`)}${bone('12%')}${bone('9%')}</div>`).join('')}
+    </div></div>
+    <div class="pl-tip">Tip: ${esc(LOADER_TIPS[Math.floor(Math.random() * LOADER_TIPS.length)])}</div>
+  </div>`;
+}
+function loaderTicker(page) {
+  const t0 = Date.now();
+  let i = 0;
+  const id = setInterval(() => {
+    const msg = page.querySelector('.pl-msg');
+    if (!msg || !page.isConnected) return clearInterval(id);   // the view has rendered
+    i = Math.min(i + 1, LOADER_STEPS.length - 1);
+    msg.textContent = LOADER_STEPS[i] + '…';
+    const s = Math.round((Date.now() - t0) / 1000);
+    if (s >= 3) page.querySelector('.pl-time').textContent = `${s}s · large ranges take a little longer`;
+  }, 1100);
+}
+
+// Headline totals for whatever the filters select, on every page, so a number
+// on the page can always be read against the whole it came from.
+async function scopeStrip() {
+  const el = $('#scope'); if (!el) return;
+  const key = qs();
+  el.dataset.key = key;
+  let o;
+  try { o = await api('overview'); } catch { el.innerHTML = ''; return; }
+  if (el.dataset.key !== key) return;   // the filters moved on while this loaded
+  const cell = (l, v, t) => `<div class="sc"${t ? ` title="${esc(t)}"` : ''}><span>${l}</span><b>${v}</b></div>`;
+  el.innerHTML =
+    cell('Est. spend', fmtUSD(o.est_cost_usd), 'Estimated at list prices for the current filters') +
+    cell('Sessions', fmtInt(o.sessions)) +
+    cell('Prompts', fmtInt(o.prompts)) +
+    cell('Requests', fmtNum(o.requests), fmtInt(o.requests) + ' model requests') +
+    cell('Active days', fmtInt(o.active_days));
+}
+
+function maskLabel() {
+  const b = $('#mask');
+  // The icon shows the current state: an open eye while prompts are visible.
+  b.innerHTML = MASKED ? ICON.eyeOff : ICON.eye;
+  b.title = MASKED ? 'Prompt text is hidden. Click to show it'
+    : 'Hide prompt text and session titles, e.g. before sharing your screen';
+  b.setAttribute('aria-label', MASKED ? 'Show prompts' : 'Hide prompts');
+  b.setAttribute('aria-pressed', MASKED);
+  b.classList.toggle('on', MASKED);
+}
+
 /* ---------- update notice ----------
    npm cannot push a new release at anyone, so the server asks the registry once
    a day and we surface the answer here. Silent when you are current, when the
@@ -247,14 +367,13 @@ function filterBar() {
   const nSel = a => a.length ? `<span class="n">${a.length}</span>` : '';
   const ag = o.agents || [];
   $('#filters').innerHTML = `
-    ${ag.length > 1 ? `<span class="note" style="margin-right:2px">Agent</span>
-      ${ag.map(a => `<button class="chip ${f.agents.includes(a.id) ? 'on' : ''}" data-agent="${esc(a.id)}"
-        title="${esc(a.note)}${a.requests ? '' : ' (no usage recorded)'}">${esc(a.name)}${a.requests ? '' : ' ·'}</button>`).join('')}
-      <button class="chip ${f.agents.length === ag.length ? 'on' : ''}" data-agent="*" title="Every agent together">All</button>
-      <span class="divider"></span>` : ''}
-    ${RANGES.map(([k, l]) => `<button class="chip ${S.range === k ? 'on' : ''}"
-      data-range="${k}">${l}</button>`).join('')}
-    <span class="divider"></span>
+    ${ag.length > 1 ? `<div class="seg" role="group" aria-label="Agent"><span class="seg-l">Agent</span>
+      ${ag.map(a => `<button class="${f.agents.includes(a.id) ? 'on' : ''}" data-agent="${esc(a.id)}"
+        title="${esc(a.note)}${a.requests ? '' : ' (no usage recorded)'}. Cmd/Shift-click to combine">${esc(a.name)}${a.requests ? '' : ' ·'}</button>`).join('')}
+      <button class="${f.agents.length === ag.length ? 'on' : ''}" data-agent="*" title="Every agent together">All</button></div>` : ''}
+    <div class="seg" role="group" aria-label="Date range"><span class="seg-l">Range</span>
+    ${RANGES.map(([k, l]) => `<button class="${S.range === k ? 'on' : ''}"
+      data-range="${k}">${l}</button>`).join('')}</div>
     <div class="chipsel"><button class="chip ${f.models.length ? 'on' : ''}" data-pop="models">
       Model ${nSel(f.models)} ▾</button></div>
     <div class="chipsel"><button class="chip ${f.projects.length ? 'on' : ''}" data-pop="projects">
@@ -263,13 +382,14 @@ function filterBar() {
       Category ${nSel(f.categories)} ▾</button></div>
     <div class="chipsel"><button class="chip ${(f.min_cost || f.min_tokens) ? 'on' : ''}"
       data-pop="thresholds">Thresholds ▾</button></div>
-    <button class="chip ${f.include_sandbox ? '' : 'on'}" id="sbx">
-      ${f.include_sandbox ? 'Including' : 'Excluding'} sandbox agents</button>
+    <button class="chip toggle ${f.include_sandbox ? '' : 'on'}" id="sbx" role="switch" aria-checked="${!f.include_sandbox}"
+      title="Sandbox agents are throwaway projects. ${f.include_sandbox ? 'They are included; click to leave them out' : 'They are left out; click to include them'}">
+      <i></i>Hide sandbox</button>
     ${(f.models.length || f.projects.length || f.categories.length || f.min_cost || f.min_tokens)
-      ? '<button class="chip" id="clr">Clear ✕</button>' : ''}
+      ? '<button class="chip clr" id="clr">Clear filters ✕</button>' : ''}
     <span class="spacer"></span>
-    <span class="note">${o.date_range.first} → ${o.date_range.last} ·
-      ${esc(o.meta.transcript_files)} transcripts · built ${esc((o.meta.built_at||'').slice(0,16).replace('T',' '))}</span>`;
+    <span class="coverage" title="Data in the warehouse · last rebuilt ${esc((o.meta.built_at||'').slice(0,16).replace('T',' '))}">
+      ${esc(o.meta.transcript_files)} transcripts · since ${esc(o.date_range.first)}</span>`;
 
   $('#filters').querySelectorAll('[data-range]').forEach(b =>
     b.onclick = () => { if (b.dataset.range === 'custom') return openCustom(b);
@@ -367,7 +487,13 @@ function drawer(title, bodyHtml, sub) {
   document.body.append(scrim, d);
   return d;
 }
-document.addEventListener('keydown', e => { if (e.key === 'Escape') closeDrawer(); });
+document.addEventListener('keydown', e => {
+  // Esc closes the top-most layer: a detail drawer first, then the Recent panel.
+  if (e.key === 'Escape') { if ($('.drawer')) closeDrawer(); else if (RECENT.open) toggleRecent(false); return; }
+  const typing = /^(INPUT|TEXTAREA|SELECT)$/.test(e.target.tagName) || e.target.isContentEditable;
+  if (!typing && !e.metaKey && !e.ctrlKey && !e.altKey && e.key.toLowerCase() === 'r' && !$('.drawer'))
+    toggleRecent();
+});
 
 async function openPrompt(id) {
   const d = drawer('Prompt detail', '<div class="loading">Loading…</div>');
@@ -379,11 +505,11 @@ async function openPrompt(id) {
       ${kpi('Output tokens', fmtInt(p.output_tokens))}
       ${kpi('Peak context', fmtInt(p.max_context_tokens))}
     </div>
-    ${card('Prompt', `<div class="prompt-text">${esc(p.text)}</div>
+    ${card('Prompt', `<div class="prompt-text">${esc(pt(p.text))}</div>
       <div class="mt" style="margin-top:8px;display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--muted)">
         <span>${esc(p.ts || '')}</span><span class="pill">${esc(p.category)}</span>
         <span>confidence ${(100*(p.category_confidence||0)).toFixed(0)}%</span>
-        ${(p.category_evidence||[]).length ? `<span>matched: ${esc(p.category_evidence.join(', '))}</span>` : ''}
+        ${(p.category_evidence||[]).length ? `<span>matched: ${esc(pt(p.category_evidence.join(', ')))}</span>` : ''}
         <span>${fmtInt(p.char_len)} chars · ${fmtInt(p.word_len)} words</span>
         ${p.source ? `<span class="pill">${esc(p.source)}</span>` : ''}
       </div>`, {badge: BADGE.actual})}
@@ -411,7 +537,7 @@ async function openPrompt(id) {
         : '<div class="na">No files touched</div>', {badge: BADGE.actual})}
     </div>
     ${card('Context', `<dl class="kv">
-      <dt>Session</dt><dd><a data-sess="${esc(p.session_id)}">${esc(p.session_title || shortId(p.session_id))}</a></dd>
+      <dt>Session</dt><dd><a data-sess="${esc(p.session_id)}">${esc((!MASKED && p.session_title) || shortId(p.session_id))}</a></dd>
       <dt>Project</dt><dd>${esc(p.project)}</dd>
       <dt>Git branch</dt><dd>${p.git_branch ? esc(p.git_branch) : NA()}</dd>
       <dt>Models</dt><dd>${esc(p.models || '—')}</dd>
@@ -443,7 +569,7 @@ async function openSession(id) {
       hint: 'context tokens actual, cost estimated'})}
     ${card('Prompts in this session', table([
       {h: 'Time', f: r => `<span class="mono">${esc((r.ts||'').slice(11,16))}</span>`},
-      {h: 'Prompt', trunc: 1, title: r => r.preview, f: r => esc(r.preview)},
+      {h: 'Prompt', trunc: 1, title: r => pt(r.preview), f: r => esc(pt(r.preview))},
       {h: 'Category', f: r => `<span class="pill">${esc(r.category)}</span>`},
       {h: 'Tools', num: 1, f: r => fmtInt(r.tool_calls)},
       {h: 'Peak ctx', num: 1, f: r => fmtInt(r.max_context)},
@@ -462,7 +588,7 @@ async function openSession(id) {
       ${s.resume ? `<dt>Resume</dt><dd><span class="mono">${esc(s.resume)}</span>
         <button class="btn pb-copy" id="sess-resume" data-copy="${esc(s.resume)}">Copy</button></dd>` : ''}
       <dt>Session ID</dt><dd class="mono">${esc(s.id)}</dd>
-      <dt>Title</dt><dd>${s.title ? esc(s.title) : NA()}</dd>
+      <dt>Title</dt><dd>${s.title ? esc(pt(s.title)) : NA()}</dd>
       <dt>Project</dt><dd>${esc(s.project)}</dd>
       <dt>Git branch</dt><dd>${s.git_branch ? esc(s.git_branch) : NA()}</dd>
       <dt>CLI version</dt><dd>${s.cli_version ? esc(s.cli_version) : NA()}</dd>
@@ -650,7 +776,7 @@ VIEWS.overview = async (page) => {
   const lp = leaderboards.most_expensive.slice(0, 10);
   $('#topprompts', page).innerHTML = table([
     {h: '#', num: 1, f: (r) => lp.indexOf(r) + 1},
-    {h: 'Prompt', trunc: 1, title: r => r.preview, f: r => esc(r.preview)},
+    {h: 'Prompt', trunc: 1, title: r => pt(r.preview), f: r => esc(pt(r.preview))},
     {h: 'Category', f: r => `<span class="pill">${esc(r.category)}</span>`},
     {h: 'Tokens', num: 1, f: r => fmtNum(r.ptokens)},
     {h: 'Est. cost', num: 1, f: r => fmtUSD(r.pcost)},
@@ -660,7 +786,7 @@ VIEWS.overview = async (page) => {
   const ls = (await api('sessions', '&limit=10&order=cost')).rows;
   $('#topsessions', page).innerHTML = table([
     {h: 'Session', trunc: 1, title: r => r.session_id,
-     f: r => esc(r.title || shortId(r.session_id))},
+     f: r => esc(stitle(r))},
     {h: 'Project', f: r => esc(r.project)},
     {h: 'Prompts', num: 1, f: r => fmtInt(r.prompts)},
     {h: 'Tokens', num: 1, f: r => fmtNum(r.tokens)},
@@ -711,7 +837,7 @@ function actNowStrip(items) {
       <span class="note">one click each · nothing changes until you click</span></div>
     ${items.map((it, i) => `<div class="actnow-it" data-i="${i}">
       <span class="ai">${ACT_ICON[it.kind] || '•'}</span>
-      <div class="ft"><b>${codeTicks(it.title)}</b><div class="note">${esc(it.detail)}</div></div>
+      <div class="ft"><b>${codeTicks(MASKED && it.private ? it.title.split(it.private).join(pt(it.private)) : it.title)}</b><div class="note">${esc(it.detail)}</div></div>
       <div class="live-actions">${btn(it)}<span class="live-msg"></span></div></div>`).join('')}</section>`;
 }
 function wireActNow(root, items) {
@@ -1201,13 +1327,13 @@ VIEWS.sessions = async (page) => {
       </div>`, {badge: BADGE.estimated, hint: 'click a row to open the session'})}
     <div class="grid g2">
       ${card('Lowest output yield', table([
-        {h: 'Session', trunc: 1, f: r => esc(r.title || shortId(r.session_id))},
+        {h: 'Session', trunc: 1, f: r => esc(stitle(r))},
         {h: 'Output share', num: 1, f: r => fmtPct(r.output_ratio * 100, 2)},
         {h: 'Tokens', num: 1, f: r => fmtNum(r.tokens)},
         {h: 'Est. cost', num: 1, f: r => fmtUSD(r.cost)},
       ], eff.low_efficiency_sessions, {onRow: 1}), {badge: BADGE.estimated, hint: 'low efficiency'})}
       ${card('Highest output yield', table([
-        {h: 'Session', trunc: 1, f: r => esc(r.title || shortId(r.session_id))},
+        {h: 'Session', trunc: 1, f: r => esc(stitle(r))},
         {h: 'Output share', num: 1, f: r => fmtPct(r.output_ratio * 100, 2)},
         {h: 'Tokens', num: 1, f: r => fmtNum(r.tokens)},
         {h: 'Est. cost', num: 1, f: r => fmtUSD(r.cost)},
@@ -1219,7 +1345,7 @@ VIEWS.sessions = async (page) => {
   if (sessMore) sessMore.onclick = () => { sp.offset += sp.limit; bust(); render(); };
   $('#st', page).innerHTML = table([
     {h: 'Session', trunc: 1, title: r => r.session_id,
-     f: r => `${r.tokens > avgTok * 3 ? '🔴 ' : ''}${esc(r.title || shortId(r.session_id))}
+     f: r => `${r.tokens > avgTok * 3 ? '🔴 ' : ''}${esc(stitle(r))}
        <div class="sub mono">${esc(shortId(r.session_id))}</div>`},
     {h: '', f: r => rowActs(r, live)},
     {h: 'Project', f: r => esc(r.project)},
@@ -1249,7 +1375,7 @@ VIEWS.sessions = async (page) => {
   wireTable(effCards[1], eff.high_efficiency_sessions, r => openSession(r.session_id));
   addChart(page, 'Top sessions by estimated cost', el => C.barsH(el, {
     rows: [...rows].sort((a, b) => b.cost - a.cost).slice(0, 12),
-    label: r => clip(r.title || shortId(r.session_id), 42), value: r => r.cost,
+    label: r => clip(stitle(r), 42), value: r => r.cost,
     sub: r => `<div class="row"><span class="k">Project</span><span class="v">${esc(r.project)}</span></div>
       <div class="row"><span class="k">Tokens</span><span class="v">${fmtNum(r.tokens)}</span></div>
       <div class="row"><span class="k">Prompts</span><span class="v">${fmtInt(r.prompts)}</span></div>`,
@@ -1289,12 +1415,12 @@ VIEWS.prompts = async (page) => {
   if (promptMore) promptMore.onclick = () => { pp.offset += pp.limit; bust(); render(); };
   $('#pt', page).innerHTML = table([
     {h: 'When', f: r => `<span class="mono">${esc((r.ts || '').slice(0, 16).replace('T', ' '))}</span>`},
-    {h: 'Prompt', trunc: 1, title: r => r.preview, f: r => esc(r.preview)},
+    {h: 'Prompt', trunc: 1, title: r => pt(r.preview), f: r => esc(pt(r.preview))},
     {h: 'Category', f: r => `<span class="pill" title="confidence ${(100*(r.category_confidence||0)).toFixed(0)}%${
       r.category_evidence?.length ? ' · matched: ' + esc(r.category_evidence.join(', ')) : ''}">${esc(r.category)}</span>`},
     {h: 'Project', f: r => esc(r.project)},
     {h: 'Session', trunc: 1, title: r => r.session_id,
-     f: r => `<span class="mono sub">${esc(r.session_title || shortId(r.session_id))}</span>`},
+     f: r => `<span class="mono sub">${esc((!MASKED && r.session_title) || shortId(r.session_id))}</span>`},
     {h: 'Models', f: r => (r.models || '').split(',').map(m =>
       `<span class="swatch" title="${esc(modelName(m))}" style="background:${modelColor(m)}"></span>`).join('')},
     {h: 'Chars', num: 1, f: r => fmtInt(r.char_len)},
@@ -1334,7 +1460,7 @@ VIEWS.rankings = async (page) => {
     S.rankTab = b.dataset.rt; render(); });
   const cols = isSess ? [
     {h: '#', num: 1, f: r => rows.indexOf(r) + 1},
-    {h: 'Session', trunc: 1, f: r => esc(r.title || shortId(r.session_id))},
+    {h: 'Session', trunc: 1, f: r => esc(stitle(r))},
     {h: '', f: r => rowActs(r, live)},
     {h: 'Project', f: r => esc(r.project)},
     {h: 'Duration', num: 1, f: r => dur(r.duration_s)},
@@ -1345,7 +1471,7 @@ VIEWS.rankings = async (page) => {
     {h: 'Start', f: r => `<span class="mono">${esc((r.started_at || '').slice(0, 16).replace('T', ' '))}</span>`},
   ] : [
     {h: '#', num: 1, f: r => rows.indexOf(r) + 1},
-    {h: 'Prompt', trunc: 1, title: r => r.preview, f: r => esc(r.preview)},
+    {h: 'Prompt', trunc: 1, title: r => pt(r.preview), f: r => esc(pt(r.preview))},
     {h: 'Category', f: r => `<span class="pill">${esc(r.category)}</span>`},
     {h: 'Models', f: r => (r.models || '').split(',').map(m =>
       `<span class="swatch" title="${esc(modelName(m))}" style="background:${modelColor(m)}"></span>`).join('')},
@@ -1353,7 +1479,7 @@ VIEWS.rankings = async (page) => {
     {h: 'Output', num: 1, f: r => fmtNum(r.output_tokens)},
     {h: 'Tok eff', num: 1, f: r => fmtPct(r.efficiency * 100, 2)},
     {h: 'Est. cost', num: 1, f: r => fmtUSD(r.pcost)},
-    {h: 'Session', trunc: 1, f: r => esc(r.session_title || shortId(r.session_id))},
+    {h: 'Session', trunc: 1, f: r => esc((!MASKED && r.session_title) || shortId(r.session_id))},
     {h: '', f: r => rowActs(r, live)},
     {h: 'Date', f: r => esc(r.day)},
   ];
@@ -1361,7 +1487,7 @@ VIEWS.rankings = async (page) => {
   wireTable($('#rt', page), rows, r => isSess ? openSession(r.session_id) : openPrompt(r.prompt_id));
   wireRowActs($('#rt', page));
   addChart(page, 'Top 12 prompts by estimated cost', el => C.barsH(el, {
-    rows: (lb.most_expensive || []).slice(0, 12), label: r => clip(r.preview, 46), value: r => r.pcost,
+    rows: (lb.most_expensive || []).slice(0, 12), label: r => clip(pt(r.preview), 46), value: r => r.pcost,
     sub: r => `<div class="row"><span class="k">Project</span><span class="v">${esc(r.project)}</span></div>
       <div class="row"><span class="k">Tokens</span><span class="v">${fmtNum(r.ptokens)}</span></div>`}),
     {badge: BADGE.estimated, after: '.nothing'});
@@ -1416,6 +1542,12 @@ VIEWS.hygiene = async (page) => {
   const T = hy.thresholds.map(String), kT = String(hy.rank_threshold);
   const K = t => `${Math.round(+t / 1000)}K`;
   const ab = t => hy.above[t];
+  // Colour grade by how much of the spend went to re-sending a large prefix. The bands are
+  // a reading aid, not a verdict: long agentic work legitimately runs at high context.
+  const grade = (v, bands) => v == null ? null
+    : v < bands[0] ? 'good' : v < bands[1] ? 'warning' : v < bands[2] ? 'serious' : 'critical';
+  const SHARE = [25, 50, 75], FIT = [5, 15, 30];
+  const bandTip = b => `Green under ${b[0]}%, amber ${b[0]}–${b[1]}%, orange ${b[1]}–${b[2]}%, red ${b[2]}% and up`;
   page.innerHTML = `
     <div class="note" style="margin:0 0 10px">Everything on this page is observed from your transcripts.
       It shows where spend sat while a large prefix was being re-sent on every turn. It does
@@ -1425,16 +1557,18 @@ VIEWS.hygiene = async (page) => {
       recorded and also counts.</div>
     <div class="grid g4">
       ${T.map(t => kpi(`Spend in requests ≥ ${K(t)} context`, fmtPct(ab(t).share_pct),
-        `${fmtUSD(ab(t).cost_usd)} · ${fmtInt(ab(t).requests)} requests`, {badge: BADGE.actual})).join('')}
+        `${fmtUSD(ab(t).cost_usd)} · ${fmtInt(ab(t).requests)} requests`,
+        {badge: BADGE.actual, tone: grade(ab(t).share_pct, SHARE), title: bandTip(SHARE)})).join('')}
       ${T.map(t => kpi(`Spend after a session first crossed ${K(t)}`, fmtPct(ab(t).share_after_first_cross_pct),
-        `${fmtInt(ab(t).sessions)} of ${fmtInt(hy.sessions)} sessions crossed it`, {badge: BADGE.actual})).join('')}
+        `${fmtInt(ab(t).sessions)} of ${fmtInt(hy.sessions)} sessions crossed it`,
+        {badge: BADGE.actual, tone: grade(ab(t).share_after_first_cross_pct, SHARE), title: bandTip(SHARE)})).join('')}
     </div>
     <div class="grid g3">
       ${kpi('Spend near or over the context window', fmtPct(fit.near_or_over_cost_pct),
         `≥ ${fit.threshold_pct}% of the window in use · ${fmtInt(fit.near_requests + fit.over_requests)} requests`,
-        {badge: BADGE.actual})}
-      ${kpi('Sessions in range', fmtInt(hy.sessions), `${fmtInt(hy.requests)} main-thread requests`, {badge: BADGE.actual})}
-      ${kpi('Spend in range', fmtUSD(hy.cost_usd), 'subagent turns excluded (own prefix)', {badge: BADGE.estimated})}
+        {badge: BADGE.actual, tone: grade(fit.near_or_over_cost_pct, FIT), title: bandTip(FIT)})}
+      ${kpi('Sessions in range', fmtInt(hy.sessions), `${fmtInt(hy.requests)} main-thread requests`, {badge: BADGE.actual, tone: 'info'})}
+      ${kpi('Spend in range', fmtUSD(hy.cost_usd), 'subagent turns excluded (own prefix)', {badge: BADGE.estimated, tone: 'info'})}
     </div>
     ${card('Context per request, most expensive session after ' + K(kT), '<div class="chart" id="hy-traj"></div>',
       {badge: BADGE.actual, hint: 'prompt-side tokens on each request, in order · click a row below to change session'})}
@@ -1448,13 +1582,13 @@ VIEWS.hygiene = async (page) => {
       series: [{key: 'ctx', label: 'Context tokens', color: seriesVar(0)}],
       xLabel: v => `#${v}`});
     $('#hy-traj', page).insertAdjacentHTML('beforeend',
-      `<div class="note" style="margin-top:6px">${esc(s.title || shortId(s.session_id))} — ${fmtInt(s.requests)} requests,
+      `<div class="note" style="margin-top:6px">${esc(stitle(s))} — ${fmtInt(s.requests)} requests,
        ${fmtUSD(s.cost_usd)}. Crossed ${K(kT)} at request #${s.ever_crossed[kT] ? s.first_cross_idx[kT] + 1 : '—'};
        ${fmtPct(s.cost_after_pct[kT])} of its spend came after that.</div>`);
   };
   const rows = hy.sessions_ranked;
   $('#hy-sess', page).innerHTML = table([
-    {h: 'Session', trunc: 1, f: r => esc(r.title || shortId(r.session_id))},
+    {h: 'Session', trunc: 1, f: r => esc(stitle(r))},
     {h: 'Project', trunc: 1, f: r => esc(r.project || '')},
     {h: 'Context', f: r => `<span class="spk" data-i="${rows.indexOf(r)}" style="display:inline-block;width:110px"></span>`},
     {h: 'Requests', num: 1, f: r => fmtInt(r.requests)},
@@ -1599,7 +1733,7 @@ VIEWS.context = async (page) => {
     {k: 'With caching (your actual usage)', v: ca.cost_with_cache}],
     label: r => r.k, value: r => r.v, color: (r, i) => i ? seriesVar(2) : seriesVar(1), height: 60});
   $('#hs', page).innerHTML = table([
-    {h: 'Session', trunc: 1, f: r => esc(r.title || shortId(r.session_id))},
+    {h: 'Session', trunc: 1, f: r => esc(stitle(r))},
     {h: 'Project', f: r => esc(r.project)},
     {h: 'Requests', num: 1, f: r => fmtInt(r.requests)},
     {h: 'Avg context', num: 1, f: r => fmtNum(r.avg_context)},
@@ -1653,14 +1787,14 @@ VIEWS.waste = async (page) => {
     const f = all.find(x => x.kind === host.dataset.kind);
     const isSess = !!f.evidence[0]?.session_id && !f.evidence[0]?.prompt_id;
     const cols = isSess ? [
-      {h: 'Session', trunc: 1, f: r => esc(r.title || shortId(r.session_id))},
+      {h: 'Session', trunc: 1, f: r => esc(stitle(r))},
       {h: 'Project', f: r => esc(r.project || '—')},
       {h: 'Requests', num: 1, f: r => fmtInt(r.requests)},
       {h: 'Tokens', num: 1, f: r => fmtNum(r.tokens ?? r.reads)},
       {h: 'Est. cost', num: 1, f: r => fmtUSD(r.cost)},
       {h: 'Est. excess', num: 1, f: r => fmtUSD(r.excess)},
     ] : [
-      {h: 'Prompt', trunc: 1, title: r => r.preview, f: r => esc(r.preview)},
+      {h: 'Prompt', trunc: 1, title: r => pt(r.preview), f: r => esc(pt(r.preview))},
       {h: 'Detail', f: r => r.n ? `repeated ${r.n}×` : r.char_len ? fmtInt(r.char_len) + ' chars'
         : r.tools ? fmtInt(r.tools) + ' tool calls'
         : r.out_tokens != null ? fmtInt(r.out_tokens) + ' output tokens' : '—'},
@@ -1719,7 +1853,7 @@ VIEWS.attribution = async (page) => {
     ${b.configured_unused_mcp.length ? `<div class="note">Configured but never called: <b>${esc(b.configured_unused_mcp.join(', '))}</b>. Their tool definitions still load into every session. Remove them with <code>claude mcp remove &lt;name&gt;</code>.</div>` : ''}`;
   const put = (id, cols, rows, onRow) => { const el = $(id, page); el.innerHTML = table(cols, rows, {onRow: !!onRow}); wireTable(el, rows, onRow); };
   put('#at-sess', [
-    {h: 'Session', trunc: 1, title: r => r.session_id, f: r => esc(r.title || shortId(r.session_id))},
+    {h: 'Session', trunc: 1, title: r => r.session_id, f: r => esc(stitle(r))},
     {h: 'Project', f: r => esc(r.project)},
     {h: 'Main agent', num: 1, f: r => fmtNum(r.main_tokens)},
     {h: 'Subagents', num: 1, f: r => r.sub_tokens ? `${fmtNum(r.sub_tokens)} (${r.subagents})` : '—'},
@@ -1822,7 +1956,7 @@ VIEWS.live = async (page) => {
       <div class="item sev-${sevOf(x)}" data-i="${i}">
         <div class="hd">${x.status === 'busy' ? '<span class="live-dot"></span>' : '<span class="idle-dot"></span>'}
           <span class="pill">${esc(agentName(x.agent))}</span>
-          ${esc(x.name || shortId(x.session_id))} <span class="note">· ${esc(x.project)}${x.pid ? ` · pid ${x.pid}` : ''}${x.model ? ` · ${esc(x.model)}` : ''}</span>
+          ${esc((!MASKED && x.name) || shortId(x.session_id))} <span class="note">· ${esc(x.project)}${x.pid ? ` · pid ${x.pid}` : ''}${x.model ? ` · ${esc(x.model)}` : ''}</span>
           ${x.hosts_dashboard ? '<span class="status high">runs this dashboard</span>' : ''}
           <span class="spacer"></span>
           <span style="font-variant-numeric:tabular-nums">${x.context == null ? 'context not recorded' : fmtNum(x.context) + ' context'} · ${fmtInt(x.steps)} steps${x.est_cost_usd == null ? '' : ' · ' + fmtUSD(x.est_cost_usd)}</span></div>
@@ -1958,7 +2092,7 @@ VIEWS.diagnose = async (page) => {
     <div id="dx-live"></div>${card('Running now', d.live_sessions.length ? `<div class="stack">${d.live_sessions.map(x => `
       <div class="item sev-${x.severity === 'ok' ? 'low' : x.severity}">
         <div class="hd">${x.severity === 'high' ? '🔴' : x.severity === 'medium' ? '🟡' : '🟢'}
-          ${esc(x.title || shortId(x.session_id))} <span class="note">· ${esc(x.project)}</span><span class="spacer"></span>
+          ${esc(stitle(x))} <span class="note">· ${esc(x.project)}</span><span class="spacer"></span>
           <span style="font-variant-numeric:tabular-nums">${fmtNum(x.context)} context · ${fmtInt(x.steps)} steps</span></div>
         <div class="dt">${esc(x.advice)} <span class="note">Last write ${x.idle_min} min ago; context grew
           ${fmtNum(x.start_context)} → ${fmtNum(x.context)}.</span></div>${pb(x.playbook)}</div>`).join('')}</div>`
@@ -1966,7 +2100,7 @@ VIEWS.diagnose = async (page) => {
       {badge: BADGE.actual, hint: 'Read live from transcripts on each load'})}
     <div id="dx-past"></div>${card('Past sessions that carried too much context', `<div class="stack">${d.session_health.map(x => `
       <div class="item sev-${x.peak >= 300000 ? 'high' : 'medium'}">
-        <div class="hd"><a href="#" class="sess-link" data-sess="${esc(x.session_id)}">${esc(x.title || shortId(x.session_id))}</a>
+        <div class="hd"><a href="#" class="sess-link" data-sess="${esc(x.session_id)}">${esc(stitle(x))}</a>
           <span class="note">· ${esc(x.project)}</span><span class="spacer"></span>
           <span style="font-variant-numeric:tabular-nums">peak ${fmtNum(x.peak)} · ${fmtUSD(x.cost)} ·
             ~${fmtNum(x.tokens_above_100k)} tokens re-read above 100K (not a saving)</span></div>
@@ -1976,12 +2110,12 @@ VIEWS.diagnose = async (page) => {
     <div id="dx-mem"></div>${card(`Add to ${md}${isCl ? ' / memory' : ''} (from your past prompts)`, `<div class="stack">${d.memory_suggestions.map(x => `
       <div class="item sev-${x.kind === 'security' ? 'high' : x.already_saved ? 'low' : 'medium'}">
         <div class="hd">${x.kind === 'security' ? '🔐' : x.kind === 'template' ? '⚙' : x.kind === 'reference' ? '🔗' : '📝'}
-          ${esc(x.text.slice(0, 140))}${x.already_saved ? ' <span class="na">already saved</span>' : ''}
+          ${esc(pt(x.text.slice(0, 140)))}${x.already_saved ? ' <span class="na">already saved</span>' : ''}
           <span class="spacer"></span><span class="note">${fmtInt(x.sessions)} sessions</span></div>
         <div class="dt">${esc(x.why)}</div>
         <div class="dt"><b>Put it in:</b> ${esc(x.target)}</div>
         ${(x.examples || []).length ? `<details><summary style="cursor:pointer;font-size:11.5px">Examples</summary>
-          ${x.examples.map(e => `<div class="dt note">“${esc(e)}”</div>`).join('')}</details>` : ''}${pb(x.playbook)}</div>`).join('')
+          ${x.examples.map(e => `<div class="dt note">“${esc(pt(e))}”</div>`).join('')}</details>` : ''}${pb(x.playbook)}</div>`).join('')
       || '<div class="empty">No repeated instructions found</div>'}</div>`,
       {badge: BADGE.recommendation, hint: 'Mined from non-sandbox prompts; secrets masked'})}
     ${card('Why consumption is high', `<div class="stack">${d.drivers.map(x => `
@@ -2325,7 +2459,7 @@ VIEWS.search = async (page) => {
   if (r.prompts.length) {
     $('#sp', page).innerHTML = table([
       {h: 'When', f: x => `<span class="mono">${esc((x.ts || '').slice(0, 16).replace('T', ' '))}</span>`},
-      {h: 'Prompt', trunc: 1, title: x => x.preview, f: x => esc(x.preview)},
+      {h: 'Prompt', trunc: 1, title: x => pt(x.preview), f: x => esc(pt(x.preview))},
       {h: 'Category', f: x => `<span class="pill">${esc(x.category)}</span>`},
       {h: 'Tokens', num: 1, f: x => fmtNum(x.billable_tokens)},
       {h: 'Est. cost', num: 1, f: x => fmtUSD(x.est_cost_usd)},
@@ -2334,7 +2468,7 @@ VIEWS.search = async (page) => {
   }
   if (r.sessions.length) {
     $('#ss', page).innerHTML = table([
-      {h: 'Session', trunc: 1, f: x => esc(x.title || shortId(x.session_id))},
+      {h: 'Session', trunc: 1, f: x => esc(stitle(x))},
       {h: 'Project', f: x => esc(x.project)},
       {h: 'Branch', f: x => x.git_branch ? `<span class="mono">${esc(x.git_branch)}</span>` : '—'},
       {h: 'Tokens', num: 1, f: x => fmtNum(x.billable_tokens)},
@@ -2574,7 +2708,9 @@ async function render() {
   if (!f.include_sandbox) bits.push('excl. sandbox');
   $('#crumbs').innerHTML = bits.join(' <span style="opacity:.4">·</span> ');
   filterBar();
-  page.innerHTML = '<div class="loading">Computing…</div>';
+  scopeStrip();
+  page.innerHTML = pageLoader();
+  loaderTicker(page);
   updateNavBadges();
   try {
     await (VIEWS[S.view] || VIEWS.overview)(page);
@@ -2585,6 +2721,154 @@ async function render() {
   }
 }
 
+/* ---------- Recent panel ----------
+   Past sessions and their prompts from any page, without leaving it. Resume and
+   stop act on sessions, so the list is grouped by session; running ones sit on
+   top. Close and Force kill stay on Running sessions, one click away from here. */
+const RECENT = {open: false, offset: 0, limit: 30, q: '', open_ids: new Set()};
+// Recent means all time: keep agent/project filters, drop the date range and thresholds.
+const recentQs = () => { const p = new URLSearchParams(qs());
+  ['start', 'end', 'min_cost', 'min_tokens'].forEach(k => p.delete(k)); return p.toString(); };
+const fmtWhen = iso => iso ? `${ago(iso)} · ${esc(iso.slice(0, 16).replace('T', ' '))}` : '';
+
+function toggleRecent(force) {
+  RECENT.open = force ?? !RECENT.open;
+  document.querySelectorAll('.recent,.recent-scrim').forEach(e => e.remove());
+  $('#recent-btn')?.classList.toggle('on', RECENT.open);
+  if (!RECENT.open) return;
+  const scrim = h('<div class="recent-scrim"></div>');
+  const p = h(`<aside class="recent" aria-label="Recent sessions"><header>
+      <h2>Recent</h2><span class="note">all time · agent &amp; project filters apply</span>
+      <span class="spacer"></span><button class="iconbtn" data-x>Close ✕</button></header>
+    <div class="recent-search"><span class="mag">⌕</span>
+      <input id="recent-q" placeholder="Search your prompts…" value="${esc(RECENT.q)}"></div>
+    <div class="content"><div class="loading">Loading…</div></div></aside>`);
+  scrim.onclick = () => toggleRecent(false);
+  p.querySelector('[data-x]').onclick = () => toggleRecent(false);
+  let t;
+  p.querySelector('#recent-q').oninput = e => { clearTimeout(t);
+    t = setTimeout(() => { RECENT.q = e.target.value.trim(); RECENT.offset = 0; renderRecent(); }, 260); };
+  document.body.append(scrim, p);
+  RECENT.offset = 0;
+  renderRecent();
+}
+
+async function renderRecent() {
+  const box = $('.recent .content');
+  if (!box) return;
+  const more = RECENT.offset > 0;
+  const [live, res] = await Promise.all([
+    more || RECENT.q ? null : fetch('/api/live?agents=' + encodeURIComponent(S.filter.agents.join(',')))
+      .then(r => r.json()).catch(() => ({sessions: []})),
+    RECENT.q
+      ? fetch(`/api/prompts?${recentQs()}&order=recent&limit=${RECENT.limit}&offset=${RECENT.offset}&q=${encodeURIComponent(RECENT.q)}`).then(r => r.json())
+      : fetch(`/api/sessions?${recentQs()}&order=recent&limit=${RECENT.limit}&offset=${RECENT.offset}`).then(r => r.json())]);
+  if (!$('.recent')) return;   // closed while loading
+  const rows = res.rows || [];
+  const liveIds = new Set(((live || {}).sessions || RECENT.live || []).map(x => x.session_id));
+  if (live) RECENT.live = live.sessions || [];
+  const html = RECENT.q ? recentPrompts(rows) : recentSessions(rows, liveIds);
+  const shown = RECENT.offset + rows.length;
+  const moreBtn = shown < (res.total || 0)
+    ? `<button class="btn pb-copy recent-more">Load more (${fmtInt(shown)} of ${fmtInt(res.total)})</button>` : '';
+  if (more) { box.querySelector('.recent-more')?.remove(); box.insertAdjacentHTML('beforeend', html + moreBtn); }
+  else box.innerHTML = (RECENT.q ? '' : recentLive(RECENT.live || [])) + html + moreBtn
+    || '<div class="empty">Nothing found</div>';
+  if (!rows.length && !more && RECENT.q) box.innerHTML = '<div class="empty">No prompt matches</div>';
+  wireRecent(box);
+}
+
+const recentLive = list => !list.length ? '' : `<div class="recent-hd">Running now
+    <span class="spacer"></span><a href="#" data-go-live>Close or kill ›</a></div>
+  ${list.map((x, i) => `<div class="item recent-it sev-${x.severity === 'high' ? 'high' : x.severity === 'medium' ? 'medium' : 'low'}" data-live="${i}">
+    <div class="hd"><span class="live-dot ${x.status === 'busy' ? 'busy' : ''}" title="${esc(x.status)}"></span>
+      <span class="recent-title">${esc((!MASKED && x.name) || shortId(x.session_id))}</span>
+      <span class="spacer"></span><span class="note">${esc(x.status || '')}</span></div>
+    <div class="mt"><span>${esc(x.project || '')}</span>
+      ${x.context ? `<span>${fmtNum(x.context)} context</span>` : ''}
+      ${x.est_cost_usd != null ? `<span>${fmtUSD(x.est_cost_usd)}</span>` : ''}</div>
+    <div class="live-actions">
+      ${x.resume ? `<button class="act ghost" data-resume="${esc(x.resume)}" title="Copy: ${esc(x.resume)}">⧉ Resume</button>` : ''}
+      ${x.signalable && x.agent === 'claude' ? '<button class="act" data-la="compact" title="Types /compact into that session\'s terminal">🗜 Compact</button>' : ''}
+      ${x.signalable ? `<button class="act warn" data-la="interrupt" ${x.status !== 'busy' ? 'disabled title="Nothing running"' : 'title="Stops the current turn, like pressing Esc"'}>⏸ Stop</button>` : ''}
+      ${x.session_id ? `<button class="act ghost" data-open-sess="${esc(x.session_id)}">Details</button>` : ''}
+      <span class="live-msg"></span></div></div>`).join('')}
+  <div class="recent-hd">Past sessions</div>`;
+
+const recentSessions = (rows, liveIds) => rows.map(r => `
+  <div class="item recent-it clickable${RECENT.open_ids.has(r.session_id) ? ' open' : ''}" data-sess="${esc(r.session_id)}">
+    <div class="hd">${liveIds.has(r.session_id) ? '<span class="live-dot" title="Running now"></span>' : ''}
+      <span class="recent-title">${esc(stitle(r))}</span><span class="spacer"></span>
+      <span class="note">${fmtUSD(r.cost)}</span></div>
+    <div class="mt"><span>${esc(r.project || '')}</span><span>${fmtInt(r.prompts)} prompts</span>
+      <span>${fmtWhen(r.started_at)}</span></div>
+    <div class="live-actions">
+      ${r.resume ? `<button class="act ghost" data-resume="${esc(r.resume)}" title="Copy: ${esc(r.resume)}">⧉ Resume</button>` : ''}
+      <button class="act ghost" data-open-sess="${esc(r.session_id)}">Details</button>
+      <span class="spacer"></span><span class="note recent-caret">${RECENT.open_ids.has(r.session_id) ? '▾' : '▸'} prompts</span></div>
+    <div class="recent-prompts"${RECENT.open_ids.has(r.session_id) ? '' : ' hidden'}></div></div>`).join('')
+  || '<div class="empty">No sessions for these filters</div>';
+
+const promptLine = x => `<a href="#" class="recent-p" data-prompt="${x.prompt_id}" title="${esc(pt(x.preview))}">
+  <span class="mono sub">${esc((x.ts || '').slice(5, 16).replace('T', ' '))}</span>
+  <span class="recent-pv">${esc(pt(x.preview) || '—')}</span>
+  <span class="note">${fmtUSD(x.pcost ?? x.est_cost_usd)}</span></a>`;
+
+const recentPrompts = rows => rows.map(x => `<div class="item recent-it">
+    ${promptLine(x)}
+    <div class="mt"><span>${esc((!MASKED && x.session_title) || shortId(x.session_id))}</span>
+      <span>${esc(x.project || '')}</span>
+      <a href="#" data-open-sess="${esc(x.session_id)}">Session ›</a></div></div>`).join('');
+
+async function loadSessionPrompts(host, sid) {
+  host.innerHTML = '<div class="note">Loading…</div>';
+  try {
+    const s = await fetch(`/api/session/${encodeURIComponent(sid)}`).then(r => r.json());
+    const ps = s.prompts || [];
+    host.innerHTML = ps.length ? ps.map(promptLine).join('') : '<div class="note">No prompts recorded</div>';
+    wireRecent(host);
+  } catch (e) { host.innerHTML = `<div class="live-msg err">${esc(e.message)}</div>`; }
+}
+
+function wireRecent(root) {
+  wireRowActs(root);   // Resume: copy command
+  root.querySelectorAll('[data-open-sess]').forEach(a => a.onclick = e => {
+    e.preventDefault(); e.stopPropagation(); openSession(a.dataset.openSess); });
+  root.querySelectorAll('[data-prompt]').forEach(a => a.onclick = e => {
+    e.preventDefault(); e.stopPropagation(); openPrompt(+a.dataset.prompt); });
+  root.querySelectorAll('[data-go-live]').forEach(a => a.onclick = e => {
+    e.preventDefault(); toggleRecent(false); go('live'); });
+  root.querySelector('.recent-more')?.addEventListener('click', () => {
+    RECENT.offset += RECENT.limit; renderRecent(); });
+  root.querySelectorAll('.item[data-sess]').forEach(it => {
+    const host = it.querySelector('.recent-prompts'), sid = it.dataset.sess;
+    if (!host.hidden && !host.childElementCount) loadSessionPrompts(host, sid);
+    it.onclick = e => {
+      if (e.target.closest('button, a, .recent-prompts')) return;
+      host.hidden = !host.hidden;
+      it.classList.toggle('open', !host.hidden);
+      it.querySelector('.recent-caret').textContent = (host.hidden ? '▸' : '▾') + ' prompts';
+      host.hidden ? RECENT.open_ids.delete(sid) : RECENT.open_ids.add(sid);
+      if (!host.hidden && !host.childElementCount) loadSessionPrompts(host, sid);
+    };
+  });
+  root.querySelectorAll('.item[data-live]').forEach(it => {
+    const x = RECENT.live[+it.dataset.live], msg = it.querySelector('.live-msg');
+    it.querySelectorAll('[data-la]').forEach(b => b.onclick = async e => {
+      e.stopPropagation();
+      if (!armed(b)) return;   // two clicks, like Running sessions
+      b.disabled = true;
+      try {
+        const r = await sessionAction(x.pid, b.dataset.la, {agent: x.agent});
+        if (!r.ok && r.copy) { try { await navigator.clipboard.writeText(r.copy); } catch {} }
+        msg.textContent = r.ok ? r.message : `Failed: ${r.error}`;
+        msg.className = 'live-msg ' + (r.ok ? 'ok' : 'err');
+      } catch (err) { msg.textContent = 'Failed: ' + err.message; msg.className = 'live-msg err'; }
+      setTimeout(() => { b.disabled = false; }, 2500);
+    });
+  });
+}
+
 /* ============================ boot ============================ */
 (async function boot() {
   const saved = localStorage.getItem('finops-theme');
@@ -2710,12 +2994,13 @@ async function syncLabel() {
   const b = $('#sync'); if (!b) return;
   const d = await fetch('/api/sync').then(r => r.json()).catch(() => ({}));
   if (d.job && d.job.state === 'running') return runSync();
-  b.title = `Last synced ${ago(d.built_at)}. Re-read every agent's local data so the dashboard is current`;
-  b.textContent = `⟳ Sync · ${ago(d.built_at)}`;
+  b.title = `Last synced ${ago(d.built_at)}. Re-read every agent's transcripts from disk into the warehouse`;
+  b.classList.remove('busy');
+  b.innerHTML = `${ICON.sync}Sync <span class="ago">· ${ago(d.built_at)}</span>`;
 }
 async function runSync() {
   const b = $('#sync');
-  b.disabled = true; b.textContent = '⟳ Syncing…';
+  b.disabled = true; b.classList.add('busy'); b.innerHTML = `${ICON.sync}Syncing…`;
   try {
     const {job} = await doAction('sync');
     const j = await followJob(job);
@@ -3123,7 +3408,15 @@ const TOURS = {
     {el: 'card:MCP servers', t: 'MCP servers', see: 'Each configured server, whether it was ever called, and its context cost.', get: 'Tool definitions loaded on every request for nothing.', act: 'Remove servers that are configured but never called.'},
     {el: 'card:Connectors', t: 'Connectors', see: 'claude.ai connectors and their share of context.', get: 'The same check for connectors as for MCP servers.', act: 'Disconnect what you don\'t use from this machine.'}],
   hygiene: [
-    {el: 'kpis', t: 'Where spend sat', see: 'The share of spend in requests above each context size, and the share that came after a session first crossed it.', get: 'How much of the bill was re-sending a large prefix.', act: 'A high "after crossing" share means the expensive part of a session was its tail.'},
+    {el: 'kpis', t: 'Where spend sat', see: 'Headline shares of your spend, colour-graded: green is low, amber and orange are rising, red means most of the bill sat there. Hover a card for its bands.', get: 'How much of the bill was re-sending a large prefix.', act: 'Walk through each card with Next; the colour is a reading aid, not a verdict.'},
+    {el: 'kpi:Spend in requests ≥ 100K', t: 'Spend in requests ≥ 100K context', see: 'The share of spend on requests whose prompt side (context re-sent to the model) was 100K tokens or more.', get: 'How much you paid while carrying a big conversation. Every turn re-sends it, so large context costs on every request.', act: 'Red here with a red "after crossing" card means sessions keep going long after they got big.'},
+    {el: 'kpi:Spend in requests ≥ 150K', t: 'Spend in requests ≥ 150K context', see: 'The same share, but for requests at 150K tokens or more.', get: 'The heaviest tier: close to where auto-compaction kicks in.', act: 'Compare with the 100K card: a small gap means sessions that pass 100K usually keep growing to 150K.'},
+    {el: 'kpi:Spend after a session first crossed 100K', t: 'Spend after first crossing 100K', see: 'The share of spend that came after a session first reached 100K, even if a later /compact brought it back down. The detail line counts how many sessions ever crossed it.', get: 'How much of your bill is the long tail of big sessions.', act: 'If this is much higher than the "requests ≥ 100K" card, compaction is working but sessions still run long afterwards.'},
+    {el: 'kpi:Spend after a session first crossed 150K', t: 'Spend after first crossing 150K', see: 'The same, measured from the first time a session reached 150K.', get: 'Spend in sessions that went all the way to the heavy end.', act: 'Few sessions but a high share? Open them in the ranked list below.'},
+    {el: 'kpi:Spend near or over the context window', t: 'Near or over the context window', see: 'The share of spend on requests using 90% or more of the model\'s context window, or going over it.', get: 'Turns that risk truncation or a forced compaction mid-task.', act: 'Anything above amber is worth a look: a /compact or fresh session before you hit the wall keeps the answer quality up.'},
+    {el: 'kpi:Sessions in range', t: 'Sessions in range', see: 'How many sessions and main-thread requests the page is based on (blue: context, not graded).', get: 'The sample size behind the percentages.', act: 'Widen the date range if this is small; a handful of sessions makes the shares jumpy.'},
+    {el: 'kpi:Spend in range', t: 'Spend in range', see: 'Total estimated main-thread spend the shares are taken from. Subagent turns are left out because they run on their own prefix.', get: 'The dollar base: multiply any share above by this to get dollars.', act: 'Marked Estimated because it uses list prices, not your invoice.'},
+    {el: 'card:Context per request', t: 'Context per request', see: 'Prompt-side tokens on every request of one session, in order.', get: 'Where a session grew, and where compaction dropped it back.', act: 'Click a row in the ranked list below to switch session.'},
     {el: 'card:Sessions ranked', t: 'Sessions', see: 'Each session\'s context trajectory and what it spent after crossing the threshold.', get: 'The sessions where a fresh start would have mattered most.', act: 'Click a row for its trajectory; alt-click to open the session.'}],
   waste: [
     {el: 'kpis', t: 'Waste headlines', see: 'Estimated excess, exposed spend, and how many prompts, sessions and rules are involved.', get: 'An honest estimate of avoidable spend.', act: '<b>Exposed</b> is what flagged work cost in total; <b>excess</b> is how much more than a fair baseline.'},
@@ -3181,6 +3474,13 @@ function tourTarget(el) {
   const page = $('#page');
   if (!el) return null;
   if (el === 'kpis') return page?.querySelector('.kpi')?.closest('.grid') || null;
+  // 'kpi:Label start' — one KPI card, matched by the start of its label (badge text ignored).
+  if (el.startsWith('kpi:')) {
+    const want = el.slice(4).trim().toLowerCase();
+    for (const k of page?.querySelectorAll('.kpi') || [])
+      if ((k.querySelector('.l')?.firstChild?.textContent || '').trim().toLowerCase().startsWith(want)) return k;
+    return null;
+  }
   const m = /^card(\d+)$/.exec(el);
   if (m) return page?.querySelectorAll('.card')[+m[1]] || null;
   // 'card:Some title' — match a card by the start of its heading, so a step keeps

package/web/styles.css

@@ -101,14 +101,28 @@ button, input, select { font: inherit; color: inherit; }
 
 /* ---------- header ---------- */
 .topbar { position:sticky; top:0; z-index:40; background: var(--surface);
-          border-bottom:1px solid var(--border); padding:10px 20px; }
-.topbar .r1 { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
-.topbar h1 { font-size:16px; margin:0; font-weight:640; letter-spacing:-0.01em; }
-.crumbs { color:var(--muted); font-size:11.5px; display:flex; gap:6px; align-items:center; }
-.crumbs b { color: var(--text-2); font-weight:560; }
+          border-bottom:1px solid var(--border); padding:10px 20px 9px; }
+.topbar .r1 { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
+.ttl-block { display:flex; flex-direction:column; gap:1px; min-width:0; }
+.topbar h1 { font-size:16px; margin:0; font-weight:640; letter-spacing:-0.01em; line-height:1.2; }
+.crumbs { color:var(--muted); font-size:11px; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
+.crumbs b { color: var(--text-2); font-weight:560; font-variant-numeric: tabular-nums; }
 .spacer { flex:1; }
+
+/* Headline totals for the current filters. */
+.scope { display:flex; align-items:stretch; margin-left:6px; padding-left:14px;
+         border-left:1px solid var(--border); min-height:30px; }
+.scope:empty { display:none; }
+.scope .sc { display:flex; flex-direction:column; justify-content:center; padding:0 12px; gap:1px;
+             border-right:1px solid var(--border); }
+.scope .sc:first-child { padding-left:0; }
+.scope .sc:last-child { border-right:0; }
+.scope .sc span { font-size:9px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted);
+                  font-weight:620; white-space:nowrap; }
+.scope .sc b { font-size:13.5px; font-weight:650; font-variant-numeric: tabular-nums; white-space:nowrap; }
+
 .search { position:relative; }
-.search input { width:270px; padding:6px 10px 6px 28px; border-radius:8px; font-size:12.5px;
+.search input { width:230px; padding:6px 10px 6px 28px; border-radius:8px; font-size:12.5px;
                 border:1px solid var(--border); background:var(--surface-2); }
 .search input:focus { outline:2px solid var(--s1); outline-offset:-1px; border-color:transparent; }
 .search .mag { position:absolute; left:9px; top:50%; transform:translateY(-50%);
@@ -116,9 +130,48 @@ button, input, select { font: inherit; color: inherit; }
 .iconbtn { border:1px solid var(--border); background:var(--surface-2); border-radius:8px;
            padding:6px 10px; cursor:pointer; font-size:12px; color:var(--text-2); }
 .iconbtn:hover { background: var(--surface-3); color:var(--text); }
+/* One joined toolbar instead of five loose buttons. */
+.tools { display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden;
+         background:var(--surface-2); }
+.tools .iconbtn { border:0; border-radius:0; border-right:1px solid var(--border); background:transparent;
+                  height:30px; line-height:1; }
+.tools .iconbtn:last-child { border-right:0; }
+.tools .iconbtn.sq { width:32px; padding:0; font-size:13px; }
+.tools .iconbtn { display:inline-flex; align-items:center; justify-content:center; gap:6px; }
+.tools svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.9;
+             stroke-linecap:round; stroke-linejoin:round; flex:none; }
+.tools .iconbtn.on { background: var(--surface-3); color:var(--s1); box-shadow: inset 0 -2px 0 var(--s1); }
+.act.sync { height:30px; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
+.act.sync svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.9;
+                stroke-linecap:round; stroke-linejoin:round; flex:none; }
+.act.sync .ago { color:var(--muted); font-weight:450; }
+/* While syncing, the arrow into the database pulses so the button reads as working. */
+.act.sync.busy svg path:nth-last-child(-n+2) { animation: sync-in 1s ease-in-out infinite; }
+@keyframes sync-in { 0%,100% { opacity:1; transform:translateY(0); } 50% { opacity:.35; transform:translateY(-2px); } }
+@media (prefers-reduced-motion: reduce) { .act.sync.busy svg path { animation:none; } }
 
 /* ---------- filter bar ---------- */
-.filters { display:flex; gap:7px; align-items:center; flex-wrap:wrap; margin-top:9px; }
+.filters { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:9px; }
+/* Segmented control: a labelled group of mutually exclusive choices. */
+.seg { display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:8px;
+       background:var(--surface-2); padding:2px; gap:1px; }
+.seg .seg-l { font-size:9.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted);
+              font-weight:620; padding:0 7px 0 6px; }
+.seg button { border:0; background:transparent; border-radius:6px; padding:3px 9px; font-size:11.5px;
+              color:var(--text-2); cursor:pointer; white-space:nowrap; }
+.seg button:hover { background:var(--surface-3); color:var(--text); }
+.seg button.on { background:var(--s1); color:#fff; font-weight:550; }
+.chip.toggle i { width:22px; height:12px; border-radius:99px; background:var(--border-strong);
+                 position:relative; display:inline-block; transition:background .15s; }
+.chip.toggle i::after { content:''; position:absolute; top:2px; left:2px; width:8px; height:8px;
+                        border-radius:50%; background:#fff; transition:left .15s; }
+.chip.toggle.on { background:var(--surface-2); border-color:var(--border); color:var(--text); font-weight:500; }
+.chip.toggle.on i { background:var(--s1); }
+.chip.toggle.on i::after { left:12px; }
+.chip.clr { color:var(--critical-ink); border-color:color-mix(in srgb, var(--critical) 35%, var(--border)); }
+.coverage { font-size:10.5px; color:var(--muted); white-space:nowrap; font-variant-numeric: tabular-nums; }
+@media (max-width: 1450px) { .scope .sc:nth-child(n+4) { display:none; } }
+@media (max-width: 1150px) { .scope, .coverage { display:none; } }
 .chipsel { position:relative; }
 .chip { border:1px solid var(--border); background:var(--surface-2); border-radius:99px;
         padding:4px 11px; font-size:11.5px; cursor:pointer; color:var(--text-2);
@@ -194,6 +247,17 @@ button, input, select { font: inherit; color: inherit; }
 .kpi .d { font-size:11px; color:var(--text-2); }
 .kpi .d .up { color:var(--critical-ink); font-weight:600; }
 .kpi .d .down { color:var(--good-ink); font-weight:600; }
+/* Colour-graded KPI: a tinted surface, a left stripe and a tinted value. */
+.kpi[class*="tone-"] { border-left-width:4px; }
+.kpi.tone-good     { border-left-color:var(--good);     background:color-mix(in srgb, var(--good) 6%, var(--surface)); }
+.kpi.tone-warning  { border-left-color:var(--warning);  background:color-mix(in srgb, var(--warning) 8%, var(--surface)); }
+.kpi.tone-serious  { border-left-color:var(--serious);  background:color-mix(in srgb, var(--serious) 8%, var(--surface)); }
+.kpi.tone-critical { border-left-color:var(--critical); background:color-mix(in srgb, var(--critical) 7%, var(--surface)); }
+.kpi.tone-info     { border-left-color:var(--s1); }
+.kpi.tone-good .v     { color:var(--good-ink); }
+.kpi.tone-warning .v  { color:var(--warning-ink); }
+.kpi.tone-serious .v  { color:var(--serious-ink); }
+.kpi.tone-critical .v { color:var(--critical-ink); }
 .kpi.na .v { font-size:12px; font-weight:500; color:var(--muted); font-style:italic; }
 
 /* ---------- table ---------- */
@@ -284,7 +348,47 @@ table.tbl .sub { font-size:10.5px; color:var(--muted); }
 .pill { display:inline-block; font-size:10.5px; padding:1px 7px; border-radius:99px;
         background:var(--surface-3); color:var(--text-2); border:1px solid var(--border); }
 .empty { padding:26px 10px; text-align:center; color:var(--muted); font-size:12px; }
-.loading { padding:40px; text-align:center; color:var(--muted); font-size:12px; }
+.loading { padding:40px; text-align:center; color:var(--muted); font-size:12px;
+            display:flex; align-items:center; justify-content:center; gap:9px; }
+.loading::before { content:''; width:14px; height:14px; border-radius:50%; flex:none;
+                   border:2px solid color-mix(in srgb, var(--s1) 22%, transparent); border-top-color:var(--s1);
+                   animation: spin .8s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* ---------- page loader: dashboard-shaped skeleton + live status ---------- */
+.pl { display:flex; flex-direction:column; gap:12px; }
+.pl-status { display:flex; align-items:center; gap:10px; align-self:flex-start; padding:6px 12px 6px 8px;
+             border:1px solid color-mix(in srgb, var(--s1) 30%, var(--border)); border-radius:99px;
+             background:color-mix(in srgb, var(--s1) 7%, var(--surface)); font-size:12px; color:var(--text-2); }
+.pl-mark { display:inline-flex; align-items:flex-end; gap:2px; height:14px; width:16px; }
+.pl-mark i { width:4px; border-radius:1.5px; background:var(--s1); animation: pl-eq 0.9s ease-in-out infinite; }
+.pl-mark i:nth-child(2) { background:var(--s2); animation-delay:.15s; }
+.pl-mark i:nth-child(3) { background:var(--s3); animation-delay:.3s; }
+@keyframes pl-eq { 0%,100% { height:30%; } 50% { height:100%; } }
+.pl-msg { font-weight:560; color:var(--text); }
+.pl-time { color:var(--muted); font-size:11px; font-variant-numeric: tabular-nums; }
+.pl-time:empty { display:none; }
+.pl-tip { align-self:center; font-size:11.5px; color:var(--muted); padding:4px 0 8px; }
+.skel { box-shadow:none; gap:8px; }
+.kpi.skel { gap:9px; }
+.bone { display:block; border-radius:5px; background:var(--surface-3); position:relative; overflow:hidden; }
+.bone::after, .pl-bars i::after { content:''; position:absolute; inset:0; transform:translateX(-100%);
+  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 70%, transparent), transparent);
+  animation: shimmer 1.4s ease-in-out infinite; }
+@keyframes shimmer { to { transform:translateX(100%); } }
+.pl-bars { display:flex; align-items:flex-end; gap:6px; height:130px; margin-top:14px;
+           border-bottom:1px solid var(--grid); }
+.pl-bars i { flex:1; border-radius:4px 4px 0 0; position:relative; overflow:hidden;
+             background:color-mix(in srgb, var(--s1) 16%, var(--surface-3));
+             animation: pl-grow 1.6s ease-in-out infinite alternate; transform-origin:bottom; }
+.pl-bars.alt i { background:color-mix(in srgb, var(--s3) 16%, var(--surface-3)); }
+@keyframes pl-grow { from { transform:scaleY(.55); } to { transform:scaleY(1); } }
+.pl-row { display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid var(--grid); }
+.pl-row:last-child { border-bottom:0; }
+@media (prefers-reduced-motion: reduce) {
+  .bone::after, .pl-bars i::after, .pl-bars i, .pl-mark i, .loading::before { animation:none; }
+  .pl-mark i { height:70%; }
+}
 .tabs { display:flex; gap:3px; border-bottom:1px solid var(--border); margin-bottom:2px;
         overflow-x:auto; }
 .tabs button { background:none; border:none; padding:7px 12px; font-size:12px; cursor:pointer;
@@ -457,3 +561,32 @@ table.tbl .sub { font-size:10.5px; color:var(--muted); }
 .brand .ver { font-size: 9.5px; font-weight: 600; color: var(--muted);
               border: 1px solid var(--border); border-radius: 99px;
               padding: 1px 5px; margin-left: 5px; letter-spacing: .01em; }
+.iconbtn.on { background: var(--surface-3); color:var(--text); border-color: var(--s1); }
+
+/* ---------- Recent panel: sits under the detail drawer so a click opens on top ---------- */
+.recent-scrim { position:fixed; inset:0; background:rgba(11,11,11,.18); z-index:98; }
+.recent { position:fixed; top:0; right:0; bottom:0; width:min(440px, 100vw); background:var(--plane);
+          z-index:99; box-shadow:-8px 0 40px rgba(0,0,0,.18); display:flex; flex-direction:column; }
+.recent > header { padding:13px 16px; background:var(--surface); border-bottom:1px solid var(--border);
+          display:flex; align-items:center; gap:10px; }
+.recent > header h2 { margin:0; font-size:14.5px; font-weight:640; }
+.recent-search { position:relative; padding:10px 16px 0; }
+.recent-search input { width:100%; box-sizing:border-box; padding:7px 10px 7px 28px; border-radius:8px;
+          font-size:12.5px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); }
+.recent-search .mag { position:absolute; left:26px; top:calc(50% + 5px); transform:translateY(-50%);
+          color:var(--muted); font-size:12px; pointer-events:none; }
+.recent .content { overflow-y:auto; padding:10px 16px 40px; display:flex; flex-direction:column; gap:8px; }
+.recent-hd { display:flex; align-items:center; font-size:11px; font-weight:640; text-transform:uppercase;
+          letter-spacing:.04em; color:var(--muted); margin-top:4px; }
+.recent-hd a { text-transform:none; letter-spacing:0; font-weight:500; }
+.recent-it { display:flex; flex-direction:column; gap:5px; }
+.recent-it .live-actions { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
+.recent-it .act { padding:2px 8px; font-size:11px; }
+.recent-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
+.recent-prompts { display:flex; flex-direction:column; border-top:1px solid var(--border); padding-top:4px; }
+.recent-p { display:flex; gap:8px; align-items:baseline; padding:4px 2px; border-radius:5px;
+          color:var(--text); text-decoration:none; font-size:12px; }
+.recent-p:hover { background:var(--surface-3); }
+.recent-pv { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.live-dot { width:8px; height:8px; border-radius:50%; background:var(--axis); flex:none; }
+.live-dot.busy, .recent-it .hd > .live-dot[title="Running now"] { background:var(--s1); }