diff --git a/examples/desktop/scripts/qa-cdp-run-ctx-deep.mjs b/examples/desktop/scripts/qa-cdp-run-ctx-deep.mjs
new file mode 100644
index 0000000000..9219dc0492
--- /dev/null
+++ b/examples/desktop/scripts/qa-cdp-run-ctx-deep.mjs
@@ -0,0 +1,89 @@
+// Real-machine isolated runner for the lane-ctx-deep shots (task #51).
+// Boots Electron on a private CDP port with a private USER_DATA and
+// DSH_DESKTOP_HOME under $TMPDIR (2026-07-18 postmortem — nothing here
+// touches the user's real ~/.dsh-desktop), then invokes the shot script.
+//
+// Usage: node scripts/qa-cdp-run-ctx-deep.mjs
+
+import { spawn } from 'node:child_process'
+import { existsSync, mkdirSync, writeFileSync, rmSync } from 'node:fs'
+import { resolve, join } from 'node:path'
+import { setTimeout as sleep } from 'node:timers/promises'
+import { tmpdir } from 'node:os'
+
+const WORKTREE = resolve(process.env.DSH_WORKTREE || process.cwd())
+const PARENT = resolve(process.env.DSH_REPO || '/Users/ziya/harness/dsh-desktop-demo')
+const ELECTRON = join(PARENT, 'node_modules/.bin/electron')
+const CDP_PORT = Number(process.env.DSH_CTX_DEEP_PORT || 9285)
+const USER_DATA = join(tmpdir(), 'dsh-ctx-deep-userdata')
+const DSH_HOME = join(tmpdir(), 'dsh-ctx-deep-home')
+const OUTDIR = join(WORKTREE, 'docs/demo-shots')
+const SHOOT_SCRIPT = join(WORKTREE, 'scripts/qa-cdp-shoot-ctx-deep.mjs')
+
+if (!existsSync(ELECTRON)) {
+  console.error(`electron binary not found at ${ELECTRON}`)
+  process.exit(2)
+}
+mkdirSync(OUTDIR, { recursive: true })
+for (const dir of [USER_DATA, DSH_HOME]) {
+  try { rmSync(dir, { recursive: true, force: true }) } catch {}
+  mkdirSync(dir, { recursive: true })
+}
+// Seed a minimal config so onboarding modal stays out of the way. Use
+// echo-jsonrpc (jsonrpc-demo bin) — daemon-demo has been renamed to
+// jsonrpc-demo upstream and the daemon-* config still points at the old
+// path, so echo-jsonrpc is the correct keyless profile today.
+writeFileSync(join(DSH_HOME, 'user-overlay.cordis.yml'), [
+  '# ctx-deep QA seed overlay',
+  'plugins:',
+  `  - "@cordisjs/plugin-include":`,
+  `      path: ${join(WORKTREE, 'config/echo-jsonrpc.yml')}`,
+  '',
+].join('\n'))
+writeFileSync(join(DSH_HOME, 'config.json'), JSON.stringify({ role: 'coding', approvalMode: 'never' }))
+writeFileSync(join(DSH_HOME, '.onboarded'), new Date().toISOString())
+
+const child = spawn(ELECTRON, [
+  `--remote-debugging-port=${CDP_PORT}`,
+  `--user-data-dir=${USER_DATA}`,
+  '--disable-gpu',
+  '--no-sandbox',
+  '.',
+], {
+  cwd: WORKTREE,
+  env: {
+    ...process.env,
+    DSH_DESKTOP_HOME: DSH_HOME,
+    DSH_DEV_ROOT: process.env.DSH_DEV_ROOT || '/Users/ziya/harness/deepseek-harness-dev',
+    DSH_MAXIMIZE: '1',
+    DSH_QA: '1',
+  },
+  stdio: ['ignore', 'pipe', 'pipe'],
+})
+const logs = []
+child.stdout.on('data', d => logs.push(String(d)))
+child.stderr.on('data', d => logs.push(String(d)))
+
+let up = false
+for (let i = 0; i < 40; i++) {
+  await sleep(500)
+  try {
+    const r = await fetch(`http://localhost:${CDP_PORT}/json/list`)
+    if (r.ok) { up = true; break }
+  } catch {}
+}
+if (!up) {
+  child.kill('SIGKILL')
+  console.error('electron did not come up on CDP :' + CDP_PORT)
+  console.error(logs.join(''))
+  process.exit(3)
+}
+
+// Run the shot script against our port.
+const shooter = spawn(process.execPath, [SHOOT_SCRIPT, String(CDP_PORT), OUTDIR], {
+  cwd: WORKTREE,
+  stdio: 'inherit',
+})
+const rc = await new Promise((r) => shooter.on('exit', (code) => r(code)))
+child.kill('SIGKILL')
+process.exit(rc || 0)
diff --git a/examples/desktop/scripts/qa-cdp-shoot-ctx-deep.mjs b/examples/desktop/scripts/qa-cdp-shoot-ctx-deep.mjs
new file mode 100644
index 0000000000..bd3c5ebc08
--- /dev/null
+++ b/examples/desktop/scripts/qa-cdp-shoot-ctx-deep.mjs
@@ -0,0 +1,388 @@
+// Shots for lane-ctx-deep (task #51) — four Context-page enhancements.
+// Each shot loads a QA fixture, forces a re-render, then captures the
+// visible chrome for that feature. Real-machine isolated per team-lead:
+// DSH_QA=1 + DSH_DESKTOP_HOME under /tmp/dsh-qa-ctx-deep so nothing here
+// touches the user's live session store.
+//
+// Shots produced (docs/demo-shots/):
+//   ctx-deep-01-window-bar.png     — Context page top strip, window
+//                                     occupancy stacked bar + legend.
+//   ctx-deep-02-intervention.png   — Context page top strip, intervention
+//                                     markers axis.
+//   ctx-deep-03-compact-config.png — Compact card on Chat tab with the
+//                                     new "Config" tab active.
+//   ctx-deep-04-subagent.png       — Subagent card with drill-down tabs
+//                                     (Tool defs / Inbound query).
+
+import { writeFileSync, mkdirSync } from 'node:fs'
+import { resolve } from 'node:path'
+
+const port = process.argv[2] || '9241'
+const outdir = process.argv[3] || 'docs/demo-shots'
+mkdirSync(outdir, { recursive: true })
+
+async function main () {
+  const targets = await (await fetch(`http://localhost:${port}/json/list`)).json()
+  const target = targets.find((t) => t.type === 'page')
+  if (!target) throw new Error('no page target on port ' + port)
+  const ws = new WebSocket(target.webSocketDebuggerUrl)
+  await new Promise((r, x) => { ws.onopen = r; ws.onerror = (e) => x(e) })
+
+  let id = 1
+  const pending = new Map()
+  ws.onmessage = (ev) => {
+    const msg = JSON.parse(typeof ev.data === 'string' ? ev.data : String(ev.data))
+    if (msg.id != null && pending.has(msg.id)) {
+      const [ok, err] = pending.get(msg.id)
+      pending.delete(msg.id)
+      if (msg.error) err(new Error(msg.error.message))
+      else ok(msg.result)
+    }
+  }
+  const call = (m, p = {}, timeoutMs = 20000) => new Promise((ok, err) => {
+    const _id = id++
+    const timer = setTimeout(() => { pending.delete(_id); err(new Error('cdp timeout: ' + m)) }, timeoutMs)
+    pending.set(_id, [(v) => { clearTimeout(timer); ok(v) }, (e) => { clearTimeout(timer); err(e) }])
+    ws.send(JSON.stringify({ id: _id, method: m, params: p }))
+  })
+  const evj = async (expr) => {
+    const r = await call('Runtime.evaluate', {
+      expression: `(async()=>{try{return (${expr})}catch(e){return {__err: String(e)}}})()`,
+      returnByValue: true, awaitPromise: true,
+    })
+    if (r.exceptionDetails) throw new Error(r.exceptionDetails.exception?.description || r.exceptionDetails.text)
+    return r.result?.value
+  }
+  const wait = (ms) => new Promise((r) => setTimeout(r, ms))
+  const shoot = async (name) => {
+    const shot = await call('Page.captureScreenshot', {
+      format: 'png',
+      clip: { x: 0, y: 0, width: 1440, height: 900, scale: 2 },
+    }, 30000)
+    const out = resolve(outdir, name)
+    writeFileSync(out, Buffer.from(shot.data, 'base64'))
+    console.log(out)
+  }
+
+  await call('Page.enable')
+  await evj(`window.dshQa && window.dshQa.revealWindow ? await window.dshQa.revealWindow() : null`)
+  await call('Emulation.setDeviceMetricsOverride', {
+    width: 1440, height: 900, deviceScaleFactor: 2, mobile: false,
+  })
+  // Dismiss onboarding.
+  await evj(`(function(){
+    const btns = Array.from(document.querySelectorAll('button'));
+    const skip = btns.find(b => /skip and use defaults/i.test(b.textContent || ''));
+    if (skip) { skip.click(); }
+    return 'ok';
+  })()`)
+  await wait(300)
+  // Hide devtools drawer.
+  await evj(`(function(){
+    const d = document.querySelector('.devtools-drawer');
+    if (d) d.style.display = 'none';
+    return 'ok';
+  })()`)
+
+  // Fabricate a session directly in renderer state — bypasses the need for
+  // a live runtime, which the desktop demo doesn't need for these shots.
+  // We manufacture a plausible cachedEvents array covering all five window
+  // families + all three intervention kinds + a compact event, then expose
+  // it via a temporary __dshChat.getEventsForActive() override so the
+  // Context page reads the same shape production would.
+  await evj(`(function(){
+    const now = Date.now()
+    const events = []
+    let seq = 1
+    function push(ev){ ev.seq = seq++; ev.time = now + seq*10; events.push(ev) }
+    // system prompt seed
+    push({ type: 'context/message', data: { content: [{type:'text', text: 'You are DSH, an autonomous agent operating in a research environment. Use the tools carefully.'}], source: { kind: 'system' } } })
+    // tool calls (drive the tool_defs slice)
+    push({ type: 'tool/call', data: { name: 'read_file', arguments: '{"path":"a.md"}' } })
+    push({ type: 'tool/call', data: { name: 'search', arguments: '{"q":"context ledger"}' } })
+    // user
+    push({ type: 'user/message', data: { content: [{type:'text', text: 'Show me the ledger'}] } })
+    // reasoning
+    push({ type: 'assistant/reasoning', data: { content: [{type:'text', text: 'The user wants a ledger view. Let me project turns.'}] } })
+    // assistant
+    push({ type: 'assistant/message', data: { content: [{type:'text', text: 'Here is the per-turn ledger with injects and compacts.'}], usage: { inputTokens: 8000, outputTokens: 320, thinking: 180 } } })
+    // steer intervention
+    push({ type: 'steering/message', data: { content: [{type:'text', text: 'Actually skip the recall section.'}] } })
+    // plugin inject
+    push({ type: 'context/message', data: { content: [{type:'text', text: 'time-context: 09:34 UTC'}], source: { kind: 'plugin', plugin: 'time-context' } } })
+    push({ type: 'context/message', data: { content: [{type:'text', text: 'guard hint fired'}], source: { kind: 'plugin', plugin: 'guard' } } })
+    // turn end
+    push({ type: 'turn/end', data: { turn: 1, reason: { kind: 'completed' } } })
+    // edit-rerun intervention on the next turn
+    push({ type: 'user/message', data: { content: [{type:'text', text: 'Show me the ledger and expand turn 1'}], editRerun: { origSeq: 4, reason: 'clarify intent' } } })
+    push({ type: 'assistant/reasoning', data: { content: [{type:'text', text: 'Re-running with expanded turn 1.'}] } })
+    push({ type: 'assistant/message', data: { content: [{type:'text', text: 'Sure. Turn 1 details attached.'}], usage: { inputTokens: 8500, outputTokens: 250, thinking: 90 } } })
+    push({ type: 'compact/summary', data: { summary: [{type:'text', text: 'Turn 1 summary retained.'}], model: 'deepseek-chat', maxTokens: 512, shadowedTokenCount: 6400, shadowedRange: {start:1, end:8} } })
+    push({ type: 'turn/end', data: { turn: 2, reason: { kind: 'completed' } } })
+    // fork intervention
+    push({ type: 'session/forked', data: { parentSeq: 14 } })
+    push({ type: 'context/message', data: { content: [{type:'text', text: 'assistant reloaded'}], source: { kind: 'system' } } })
+    push({ type: 'user/message', data: { content: [{type:'text', text: 'What happened in the fork?'}] } })
+    push({ type: 'assistant/message', data: { content: [{type:'text', text: 'The fork branched at seq 14.'}], usage: { inputTokens: 2100, outputTokens: 90 } } })
+    push({ type: 'turn/end', data: { turn: 3, reason: { kind: 'completed' } } })
+
+    // Install override for the Context page's read path.
+    const sid = 'ctx-deep-demo-session'
+    const chat = window.__dshChat = window.__dshChat || {}
+    const oldGetActive = chat.getActiveSessionId
+    const oldGetEvents = chat.getEventsForActive
+    chat.getActiveSessionId = () => sid
+    chat.getEventsForActive = () => events
+    chat.getSessions = () => [{ id: sid, title: 'ctx-deep demo', running: false }]
+    window.__ctxDeepDemoEvents = events
+    return { sid, count: events.length }
+  })()`)
+  await wait(700)
+
+  // -- SHOT 1 + 2: Context page top strip (window bar + intervention) ------
+  await evj(`(function(){
+    if (window.__dshTabs && window.__dshTabs.switchTo) { window.__dshTabs.switchTo('context'); }
+    return 'switched';
+  })()`)
+  await wait(500)
+  await evj(`window.__dshContextPage && window.__dshContextPage.refresh && window.__dshContextPage.refresh()`)
+  await wait(300)
+
+  const layout = await evj(`(function(){
+    const strip = document.querySelector('[data-context-topstrip]');
+    const bar = document.getElementById('context-window-bar-track');
+    const iv = document.getElementById('context-intervention-track');
+    const pane = document.querySelector('.pane[data-pane="context"]');
+    const chat = window.__dshChat;
+    return {
+      paneHidden: pane ? pane.hidden : 'NO-PANE',
+      paneHtmlLen: pane ? pane.innerHTML.length : 0,
+      paneChildren: pane ? Array.from(pane.children).map(c => c.tagName+':'+(c.className||c.id||'')) : null,
+      documentTitle: document.title,
+      windowLocation: String(window.location),
+      chatKeys: chat ? Object.keys(chat) : null,
+      chatGetEvents: chat && typeof chat.getEventsForActive === 'function',
+      chatGetSid: chat && typeof chat.getActiveSessionId === 'function' ? chat.getActiveSessionId() : null,
+      eventsLen: chat && chat.getEventsForActive ? chat.getEventsForActive().length : -1,
+      stripFound: !!strip,
+      stripHidden: strip ? strip.hidden : null,
+      segCount: bar ? bar.children.length : 0,
+      markerCount: iv ? iv.querySelectorAll('.context-intervention-marker').length : 0,
+      summary: (document.getElementById('context-window-bar-summary')||{}).textContent||'',
+    };
+  })()`)
+  console.error('ctx-deep layout ->', JSON.stringify(layout))
+
+  await shoot('ctx-deep-01-window-bar.png')
+
+  // Highlight the intervention strip: scroll to it if needed and take shot.
+  await evj(`(function(){
+    const strip = document.querySelector('.context-intervention-strip');
+    if (strip && strip.scrollIntoView) strip.scrollIntoView({ block: 'start', behavior: 'auto' });
+    return 'scrolled';
+  })()`)
+  await wait(300)
+  await shoot('ctx-deep-02-intervention.png')
+
+  // -- SHOT 3: Compact card Config tab -------------------------------------
+  // We render the compact card by direct DOM injection into the chat stream:
+  // the compact/summary event we seeded already flows through onSessionEvent
+  // path in real prod, but here we don't have a live session so we build a
+  // standalone compact card via __dshCompactCard.mountTabs.
+  await evj(`(function(){
+    if (window.__dshTabs && window.__dshTabs.switchTo) window.__dshTabs.switchTo('chat');
+    const panes = document.querySelectorAll('.pane[data-pane]');
+    for (const p of panes) p.hidden = (p.getAttribute('data-pane') !== 'chat');
+    const rail = document.getElementById('context-rail'); if (rail) rail.hidden = true;
+    const drawer = document.querySelector('.devtools-drawer'); if (drawer) drawer.style.display = 'none';
+    for (const sel of ['.onboarding','.mock-cards-menu','.dropdown-open','[data-mock-cards]']) {
+      for (const n of document.querySelectorAll(sel)) n.style.display = 'none';
+    }
+    return 'chat';
+  })()`)
+  await wait(400)
+  const compactMount = await evj(`(function(){
+    // Build a full-page overlay to keep the shot focused on the card.
+    const prevOverlay = document.getElementById('ctx-deep-demo-overlay');
+    if (prevOverlay) prevOverlay.remove();
+    const prev = document.getElementById('ctx-deep-demo-compact-card');
+    if (prev) prev.remove();
+    const overlay = document.createElement('div');
+    overlay.id = 'ctx-deep-demo-overlay';
+    overlay.style.cssText = 'position:fixed;left:0;top:0;right:0;bottom:0;background:var(--bg,#fff);z-index:9999;padding:48px 96px;overflow:auto;font-family:inherit;';
+    const heading = document.createElement('h1');
+    heading.style.cssText = 'font-size:24px;margin:0 0 16px 0;';
+    heading.textContent = 'Compact card — Config tab';
+    overlay.appendChild(heading);
+    const sub = document.createElement('div');
+    sub.className = 'muted';
+    sub.style.cssText = 'margin-bottom:24px;color:var(--muted,#5b6b7d);';
+    sub.textContent = 'Read-only view of the current compaction policy, threshold, and distance to next fire.';
+    overlay.appendChild(sub);
+    const stream = overlay;
+    const card = document.createElement('details');
+    card.id = 'ctx-deep-demo-compact-card';
+    card.className = 'compact-card compact-card-demo';
+    card.open = true;
+    card.style.margin = '24px auto';
+    card.style.maxWidth = '760px';
+    const sum = document.createElement('summary');
+    sum.className = 'summary';
+    const badge = document.createElement('span');
+    badge.className = 'compact-badge compact-badge-on-demand';
+    badge.textContent = 'on-demand';
+    sum.appendChild(badge);
+    const label = document.createElement('span');
+    label.textContent = '── context compacted ──';
+    sum.appendChild(label);
+    const tk = document.createElement('span');
+    tk.className = 'tokens'; tk.textContent = '6400 tokens'; sum.appendChild(tk);
+    const evc = document.createElement('span');
+    evc.className = 'events'; evc.textContent = 'compacted 8 events'; sum.appendChild(evc);
+    card.appendChild(sum);
+
+    const data = { model: 'deepseek-chat', maxTokens: 512, shadowedTokenCount: 6400,
+      shadowedRange: { start: 1, end: 8 },
+      summary: [{ type: 'text', text: 'Turn 1 summary retained (system prompt, tool defs, initial query, guardhint).' }],
+    };
+    const events = window.__ctxDeepDemoEvents || [];
+    if (window.__dshCompactCard && window.__dshCompactCard.mountTabs) {
+      window.__dshCompactCard.mountTabs(card, {
+        document,
+        initial: 'config',
+        fillPre(body){ body.textContent = '(see events 1–8; summary compressed to 1 line)'; body.style.padding = '8px'; },
+        fillPost(body){ body.textContent = data.summary[0].text; body.style.padding = '8px'; },
+        fillMeta(body){
+          const dl = document.createElement('dl'); dl.className = 'compact-card-tab-meta';
+          for (const [k,v] of Object.entries({ Trigger: 'on-demand', Model: data.model, 'Summary cap': '≤512 tok', 'Compacted range': 'seq 1–8', 'Compacted volume': '6400 tok' })) {
+            const dt = document.createElement('dt'); dt.textContent = k;
+            const dd = document.createElement('dd'); dd.textContent = v;
+            dl.appendChild(dt); dl.appendChild(dd);
+          }
+          body.appendChild(dl);
+        },
+        fillConfig(body){
+          if (!window.__dshCompactConfigModel) { body.textContent = 'model missing'; return; }
+          const v = window.__dshCompactConfigModel.buildCompactConfigView(events);
+          const dl = document.createElement('dl'); dl.className = 'compact-card-tab-meta compact-config-list';
+          const rows = [
+            ['Threshold', v.thresholdTokens.toLocaleString() + ' tok' + (v.thresholdSource==='assumed'?' (assumed)':'')],
+            ['Strategy', v.strategyName],
+            ['Model', v.model || 'deepseek-chat'],
+            ['Summary cap', v.maxSummaryTokens != null ? '≤' + v.maxSummaryTokens + ' tok' : 'unknown'],
+            ['Triggers fired', v.triggersFired + ' this session'],
+            ['Tokens since last compact', v.tokensSinceLastCompact.toLocaleString() + ' tok'],
+            ['Tokens until next', v.tokensUntilNext.toLocaleString() + ' tok'],
+          ];
+          for (const [k, val] of rows) {
+            const dt = document.createElement('dt'); dt.textContent = k;
+            const dd = document.createElement('dd'); dd.textContent = val;
+            dl.appendChild(dt); dl.appendChild(dd);
+          }
+          body.appendChild(dl);
+          const progWrap = document.createElement('div');
+          progWrap.className = 'compact-config-progress compact-config-progress--' + v.progressLevel;
+          const progHead = document.createElement('div');
+          progHead.className = 'compact-config-progress-head';
+          const pt = document.createElement('span');
+          pt.className = 'compact-config-progress-title'; pt.textContent = 'Progress to next compact';
+          const pp = document.createElement('span');
+          pp.className = 'compact-config-progress-pct muted small'; pp.textContent = Math.min(100, Math.round(v.progressPct)) + '%';
+          progHead.appendChild(pt); progHead.appendChild(pp);
+          const track = document.createElement('div'); track.className = 'compact-config-progress-track';
+          const fill = document.createElement('div'); fill.className = 'compact-config-progress-fill';
+          fill.style.setProperty('--fill-pct', Math.min(100, Math.max(0, v.progressPct)) + '%');
+          track.appendChild(fill); progWrap.appendChild(progHead); progWrap.appendChild(track);
+          body.appendChild(progWrap);
+          const note = document.createElement('div');
+          note.className = 'compact-config-note muted small';
+          note.textContent = 'Read-only view. Adjust in Settings › Compaction (restart-required until session/set-compact-policy lands, gap G2).';
+          body.appendChild(note);
+        },
+      });
+    }
+    stream.appendChild(card);
+    document.body.appendChild(overlay);
+    return 'mounted';
+  })()`)
+  console.error('compact mount ->', compactMount)
+  await wait(400)
+  await shoot('ctx-deep-03-compact-config.png')
+
+  // -- SHOT 4: Subagent drill-down tabs -----------------------------------
+  // Make sure we're on the Chat tab and any drawers/rails are hidden so the
+  // subagent card owns the frame.
+  await evj(`(function(){
+    if (window.__dshTabs && window.__dshTabs.switchTo) window.__dshTabs.switchTo('chat');
+    // Force-show the chat pane and hide every other pane so a mount into
+    // #stream can't land off-screen.
+    const panes = document.querySelectorAll('.pane[data-pane]');
+    for (const p of panes) p.hidden = (p.getAttribute('data-pane') !== 'chat');
+    const rail = document.getElementById('context-rail'); if (rail) rail.hidden = true;
+    const drawer = document.querySelector('.devtools-drawer'); if (drawer) drawer.style.display = 'none';
+    return 'chat-clean';
+  })()`)
+  await wait(400)
+  const subaMount = await evj(`(function(){
+    // Build a full-page overlay that covers the whole viewport with a white
+    // background — this is a demo shot, so we want the subagent trace to be
+    // the whole story. This bypasses any pane routing quirks.
+    const prevOverlay = document.getElementById('ctx-deep-demo-overlay');
+    if (prevOverlay) prevOverlay.remove();
+    const prev = document.getElementById('ctx-deep-demo-subagent');
+    if (prev) prev.remove();
+    const prevCompact = document.getElementById('ctx-deep-demo-compact-card');
+    if (prevCompact) prevCompact.remove();
+
+    const overlay = document.createElement('div');
+    overlay.id = 'ctx-deep-demo-overlay';
+    overlay.style.cssText = 'position:fixed;left:0;top:0;right:0;bottom:0;background:var(--bg,#fff);z-index:9999;padding:48px 96px;overflow:auto;font-family:inherit;';
+    const heading = document.createElement('h1');
+    heading.style.cssText = 'font-size:24px;margin:0 0 16px 0;';
+    heading.textContent = 'Subagent trace — drill-down tabs';
+    overlay.appendChild(heading);
+    const sub = document.createElement('div');
+    sub.className = 'muted';
+    sub.style.cssText = 'margin-bottom:24px;color:var(--muted,#5b6b7d);';
+    sub.textContent = 'Tool defs / Inbound query surface at the foot of every subagent card.';
+    overlay.appendChild(sub);
+    const stream = overlay;
+
+    if (!window.__dshSubagentView || !window.__dshSubagentView.buildInlineSubagentTrace) {
+      return 'no-view';
+    }
+    const now = Date.now();
+    const childEvents = [
+      { type: 'user/message', seq: 1, time: now, data: { content: [{type:'text', text:'Locate a file called ledger.md and summarise sections 2–4.'}], source: { kind: 'plugin', plugin: 'subagent-search' } } },
+      { type: 'tool/call', seq: 2, time: now+10, data: { name: 'read_file', arguments: '{"path":"ledger.md"}' } },
+      { type: 'tool/call', seq: 3, time: now+20, data: { name: 'search', arguments: '{"q":"section 2"}' } },
+      { type: 'tool/call', seq: 4, time: now+30, data: { name: 'read_file', arguments: '{"path":"appendix.md"}' } },
+      { type: 'turn/end', seq: 5, time: now+40, data: { turn: 0, reason: { kind: 'completed' } } },
+    ];
+    const lastAssistantMessage = [{ type: 'text', text: '\`\`\`json\\n{"summary":"sections 2-4 cover the ledger schema","found":3}\\n\`\`\`' }];
+    const spec = {
+      parentSessionId: 'parent-sess-1',
+      childSessionId: 'child-sess-a',
+      status: 'done',
+      provider: 'stdio-echo',
+      stopReason: 'stop',
+      childEvents,
+      lastAssistantMessage,
+    };
+    const trace = window.__dshSubagentView.buildInlineSubagentTrace(document, spec, { collapsed: false });
+    trace.id = 'ctx-deep-demo-subagent';
+    trace.style.margin = '24px auto';
+    trace.style.maxWidth = '760px';
+    stream.appendChild(trace);
+    trace.open = true;
+    // Append the overlay LAST so it sits atop the rest of the page.
+    document.body.appendChild(overlay);
+    return { hasDrilldown: !!trace.querySelector('.subagent-drilldown') };
+  })()`)
+  console.error('subagent mount ->', JSON.stringify(subaMount))
+  await wait(400)
+  await shoot('ctx-deep-04-subagent.png')
+
+  ws.close()
+}
+main().catch((e) => { console.error(e); process.exit(1) })
diff --git a/examples/desktop/src/renderer/compact-card.js b/examples/desktop/src/renderer/compact-card.js
index 169b399ee7..9b3acec8fe 100644
--- a/examples/desktop/src/renderer/compact-card.js
+++ b/examples/desktop/src/renderer/compact-card.js
@@ -176,7 +176,10 @@ function buildDiffModel(data, extractText) {
  * @param {(bodyEl: HTMLElement) => void} [opts.fillPre]
  * @param {(bodyEl: HTMLElement) => void} [opts.fillPost]
  * @param {(bodyEl: HTMLElement) => void} [opts.fillMeta]
- * @returns {{ preBody: HTMLElement, postBody: HTMLElement, metaBody: HTMLElement }}
+ * @param {(bodyEl: HTMLElement) => void} [opts.fillConfig]  lane-ctx-deep F2 —
+ *   optional 4th tab "Config". Omit to keep the pre-fix three-tab shape
+ *   (the strip auto-hides the tab when the fill callback is not passed).
+ * @returns {{ preBody: HTMLElement, postBody: HTMLElement, metaBody: HTMLElement, configBody: HTMLElement|null }}
  */
 function mountTabs(parent, opts) {
   // Resolve doc without touching a bare `document` binding (renderer harness
@@ -193,11 +196,13 @@ function mountTabs(parent, opts) {
   strip.className = 'compact-card-tabstrip'
   strip.setAttribute('role', 'tablist')
   const initial = (opts && opts.initial) || 'post'
+  const hasConfig = opts && typeof opts.fillConfig === 'function'
   const tabs = [
     { id: 'pre',  label: 'Diff' },
     { id: 'post', label: 'Summary' },
     { id: 'meta', label: 'Policy & accounting' },
   ]
+  if (hasConfig) tabs.push({ id: 'config', label: 'Config' })
   const bodies = {}
   const buttons = {}
   for (const t of tabs) {
@@ -232,12 +237,13 @@ function mountTabs(parent, opts) {
     if (!target) return
     const id = target === buttons.pre ? 'pre'
       : target === buttons.post ? 'post'
-      : target === buttons.meta ? 'meta' : null
+      : target === buttons.meta ? 'meta'
+      : (hasConfig && target === buttons.config) ? 'config' : null
     if (id) activate(id)
   })
   strip.addEventListener('keydown', (ev) => {
     if (ev.key !== 'ArrowLeft' && ev.key !== 'ArrowRight') return
-    const order = ['pre', 'post', 'meta']
+    const order = hasConfig ? ['pre', 'post', 'meta', 'config'] : ['pre', 'post', 'meta']
     const active = order.find((id) => buttons[id].getAttribute('aria-selected') === 'true') || 'post'
     const idx = order.indexOf(active)
     const next = ev.key === 'ArrowRight' ? order[(idx + 1) % order.length] : order[(idx + order.length - 1) % order.length]
@@ -249,11 +255,18 @@ function mountTabs(parent, opts) {
   wrap.appendChild(bodies.pre)
   wrap.appendChild(bodies.post)
   wrap.appendChild(bodies.meta)
+  if (hasConfig) wrap.appendChild(bodies.config)
   parent.appendChild(wrap)
   if (opts && typeof opts.fillPre  === 'function') opts.fillPre(bodies.pre)
   if (opts && typeof opts.fillPost === 'function') opts.fillPost(bodies.post)
   if (opts && typeof opts.fillMeta === 'function') opts.fillMeta(bodies.meta)
-  return { preBody: bodies.pre, postBody: bodies.post, metaBody: bodies.meta }
+  if (hasConfig) opts.fillConfig(bodies.config)
+  return {
+    preBody: bodies.pre,
+    postBody: bodies.post,
+    metaBody: bodies.meta,
+    configBody: hasConfig ? bodies.config : null,
+  }
 }
 
 if (typeof module !== 'undefined' && module.exports) {
diff --git a/examples/desktop/src/renderer/compact-config-model.js b/examples/desktop/src/renderer/compact-config-model.js
new file mode 100644
index 0000000000..13f05be0da
--- /dev/null
+++ b/examples/desktop/src/renderer/compact-config-model.js
@@ -0,0 +1,187 @@
+// Pure model for the compact-card "Config" tab (lane-ctx-deep, task #51 F2).
+//
+// The Config tab is an info-only entrance to the compaction policy: it names
+// the current threshold, the strategy, how many times the daemon has fired
+// compact this session, and a "distance to next compact" progress bar. It
+// is *not* an edit surface — a live editor belongs on the Settings page,
+// and the tab tooltip points there ("Adjust in Settings › Compaction").
+//
+// Model shape is a plain object so tests can lock it without a DOM harness.
+// The `buildCompactConfigView` function is the single entry point; it takes
+// a session's cached events and (optionally) a policy override the shell
+// pulls from the Settings profile, and returns:
+//
+//   {
+//     thresholdTokens,       // e.g. 96000 (server-reported) or fallback 96k
+//     thresholdSource,       // 'server'|'assumed'
+//     strategyName,          // e.g. 'summarize-shadowed' / 'unknown'
+//     model,                 // summary model, e.g. 'deepseek-chat' or null
+//     maxSummaryTokens,      // policy cap on the summary output
+//     triggersFired,         // total compact/summary events observed
+//     lastCompactSeq,        // seq of the last compact/summary, or null
+//     currentTokens,         // running tokens at end of stream
+//     tokensSinceLastCompact,// tokens accumulated after the last compact
+//     tokensUntilNext,       // max(threshold − tokensSinceLastCompact, 0)
+//     progressPct,           // tokensSinceLastCompact / threshold × 100
+//     progressLevel,         // 'nominal'|'warn'|'high'|'critical'
+//   }
+//
+// Threshold source: we prefer the wire (`session/list` entry's
+// `context.compact.threshold` if the daemon ever ships one), else fall back
+// to 75% of the model's context window ("industry default"), else a hard
+// fallback of 96000. The `thresholdSource` field marks which path we took
+// so the tab tooltip can be honest.
+
+'use strict'
+
+const DEFAULT_THRESHOLD_TOKENS = 96000
+
+/**
+ * Return the compact threshold (tokens) plus its provenance.
+ * Priority order:
+ *   1. `override.thresholdTokens` (Settings profile / test override).
+ *   2. `budgetTokens * 0.75` when a wire-reported budget is available.
+ *   3. DEFAULT_THRESHOLD_TOKENS (96000).
+ * @param {object} [opts]
+ * @param {number} [opts.thresholdTokens] explicit override
+ * @param {number} [opts.budgetTokens] wire-reported model context window
+ * @returns {{ tokens: number, source: 'server'|'assumed' }}
+ */
+function resolveThreshold(opts) {
+  const explicit = opts && Number.isFinite(opts.thresholdTokens) && opts.thresholdTokens > 0
+  if (explicit) return { tokens: Number(opts.thresholdTokens), source: 'server' }
+  const budget = opts && Number.isFinite(opts.budgetTokens) && opts.budgetTokens > 0
+    ? Number(opts.budgetTokens) : null
+  if (budget) return { tokens: Math.round(budget * 0.75), source: 'assumed' }
+  return { tokens: DEFAULT_THRESHOLD_TOKENS, source: 'assumed' }
+}
+
+/**
+ * Roughly count tokens the same way context-meter's approx mode does:
+ * bytes ÷ 4 over `event.data` JSON. Duplicated here (not imported) so the
+ * config model stays a leaf — importing context-meter would require the
+ * caller to pass a tracker to keep coherent, and every callsite already
+ * has cachedEvents in hand.
+ * @param {object} event
+ * @returns {number}
+ */
+function approxTokensFor(event) {
+  if (!event || typeof event !== 'object') return 0
+  // Precise-mode signal: honour the usage envelope if present.
+  if (event.type === 'assistant/message') {
+    const u = event.data && event.data.usage
+    if (u && typeof u === 'object') {
+      const inp = Number(u.inputTokens)
+      const out = Number(u.outputTokens)
+      const sum = (Number.isFinite(inp) ? inp : 0) + (Number.isFinite(out) ? out : 0)
+      if (sum > 0) return sum
+    }
+  }
+  const payload = event.data !== undefined ? event.data : event
+  try { return Math.round(JSON.stringify(payload).length / 4) } catch (_) { return 0 }
+}
+
+function levelForPct(pct) {
+  if (!Number.isFinite(pct)) return 'nominal'
+  if (pct >= 95) return 'critical'
+  if (pct >= 80) return 'high'
+  if (pct >= 50) return 'warn'
+  return 'nominal'
+}
+
+/**
+ * Build the full config-tab view model.
+ *
+ * @param {Array<object>} events
+ * @param {object} [opts]
+ * @param {number} [opts.thresholdTokens]
+ * @param {number} [opts.budgetTokens]
+ * @param {string} [opts.strategyName]
+ * @returns {{
+ *   thresholdTokens:number,
+ *   thresholdSource:'server'|'assumed',
+ *   strategyName:string,
+ *   model:string|null,
+ *   maxSummaryTokens:number|null,
+ *   triggersFired:number,
+ *   lastCompactSeq:number|null,
+ *   currentTokens:number,
+ *   tokensSinceLastCompact:number,
+ *   tokensUntilNext:number,
+ *   progressPct:number,
+ *   progressLevel:'nominal'|'warn'|'high'|'critical',
+ * }}
+ */
+function buildCompactConfigView(events, opts) {
+  const threshold = resolveThreshold(opts || {})
+
+  let triggers = 0
+  let lastSeq = null
+  let lastPolicy = null
+  let tokensTotal = 0
+  let tokensSinceLast = 0
+
+  if (Array.isArray(events)) {
+    for (const ev of events) {
+      if (!ev || typeof ev !== 'object') continue
+      const tk = approxTokensFor(ev)
+      tokensTotal += tk
+      tokensSinceLast += tk
+      if (ev.type === 'compact/summary') {
+        triggers++
+        if (Number.isFinite(ev.seq)) lastSeq = ev.seq
+        const d = ev.data || {}
+        lastPolicy = {
+          model: typeof d.model === 'string' ? d.model : null,
+          maxTokens: Number.isFinite(d.maxTokens) ? d.maxTokens : null,
+        }
+        // A compact resets the "since last" counter; the shadowed range
+        // just replaced the running budget so tokens after should count
+        // from zero.
+        tokensSinceLast = 0
+      }
+    }
+  }
+
+  const progressPct = threshold.tokens > 0
+    ? Math.round((tokensSinceLast / threshold.tokens) * 1000) / 10
+    : 0
+  const tokensUntilNext = Math.max(0, threshold.tokens - tokensSinceLast)
+
+  const strategyName = (opts && typeof opts.strategyName === 'string' && opts.strategyName)
+    || (lastPolicy ? 'summarize-shadowed' : 'summarize-shadowed (default)')
+
+  return {
+    thresholdTokens: threshold.tokens,
+    thresholdSource: threshold.source,
+    strategyName,
+    model: lastPolicy && lastPolicy.model,
+    maxSummaryTokens: lastPolicy && lastPolicy.maxTokens,
+    triggersFired: triggers,
+    lastCompactSeq: lastSeq,
+    currentTokens: tokensTotal,
+    tokensSinceLastCompact: tokensSinceLast,
+    tokensUntilNext,
+    progressPct: Math.max(0, Math.min(progressPct, 999)),
+    progressLevel: levelForPct(progressPct),
+  }
+}
+
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = {
+    buildCompactConfigView,
+    resolveThreshold,
+    approxTokensFor,
+    levelForPct,
+    DEFAULT_THRESHOLD_TOKENS,
+  }
+}
+if (typeof window !== 'undefined') {
+  window.__dshCompactConfigModel = {
+    buildCompactConfigView,
+    resolveThreshold,
+    approxTokensFor,
+    levelForPct,
+    DEFAULT_THRESHOLD_TOKENS,
+  }
+}
diff --git a/examples/desktop/src/renderer/context-page.js b/examples/desktop/src/renderer/context-page.js
index 4b627060fe..4988c3b914 100644
--- a/examples/desktop/src/renderer/context-page.js
+++ b/examples/desktop/src/renderer/context-page.js
@@ -79,6 +79,13 @@
       saveProfile: pane.querySelector('#context-page-save-profile'),
       loadSample: pane.querySelector('#context-page-load-sample'),
       loadWorkflow: pane.querySelector('#context-page-load-workflow'),
+      // lane-ctx-deep additions:
+      topStrip: pane.querySelector('[data-context-topstrip]'),
+      windowBarTrack: pane.querySelector('#context-window-bar-track'),
+      windowBarLegend: pane.querySelector('#context-window-bar-legend'),
+      windowBarSummary: pane.querySelector('#context-window-bar-summary'),
+      interventionTrack: pane.querySelector('#context-intervention-track'),
+      interventionSummary: pane.querySelector('#context-intervention-summary'),
     }
 
     if (els.openRail) {
@@ -163,6 +170,12 @@
     if (els.body) els.body.classList.remove('is-empty')
     if (els.list) els.list.hidden = false
 
+    // lane-ctx-deep F1 + F3: render the top strip (window bar +
+    // intervention markers) alongside the per-turn rows.
+    renderWindowBar(events)
+    renderInterventionStrip(events)
+    if (els.topStrip) els.topStrip.hidden = false
+
     const rows = model.projectTurnRows(events)
     state.lastRows = rows
     if (els.subtitle) {
@@ -174,8 +187,156 @@
     renderRows(rows, events, model)
   }
 
+  // ---- lane-ctx-deep F1: Window occupancy stacked bar ----------------------
+
+  function renderWindowBar (events) {
+    if (!els || !els.windowBarTrack) return
+    const api = window.__dshContextWindowBreakdown
+    if (!api || typeof api.computeWindowBreakdown !== 'function') return
+    // Pull the wire budget from the active session if we can — mirrors
+    // context-meter's promotion path so the "% of budget" number reads the
+    // same number the statusbar shows.
+    const budgetTokens = readActiveBudgetTokens()
+    const view = api.computeWindowBreakdown(events, budgetTokens ? { budgetTokens } : undefined)
+    const track = els.windowBarTrack
+    track.innerHTML = ''
+    // Render five stacked segments in FAMILY_ORDER — zero-token slices get
+    // a 0-width segment so the CSS grid keeps its shape (helps DOM tests
+    // count the number of segments deterministically).
+    for (const slice of view.slices) {
+      const seg = document.createElement('div')
+      seg.className = `context-window-seg context-window-seg--${slice.family}`
+      seg.style.setProperty('--seg-pct', `${Math.max(0, slice.pct)}%`)
+      seg.dataset.family = slice.family
+      seg.dataset.tokens = String(slice.tokens)
+      seg.dataset.pct = String(slice.pct)
+      const suffix = slice.family === 'tool_defs' && view.toolsFromCalls
+        ? ' (estimated from tool/call names)'
+        : slice.family === 'thinking' && view.mode === 'approx'
+        ? ' (approx)'
+        : ''
+      seg.title = `${slice.label}: ${slice.tokens} tok (${slice.pct}%${suffix})`
+      seg.setAttribute('aria-label', seg.title)
+      track.appendChild(seg)
+    }
+    if (els.windowBarLegend) {
+      els.windowBarLegend.innerHTML = ''
+      for (const slice of view.slices) {
+        const row = document.createElement('span')
+        row.className = `context-window-legend-item context-window-legend-item--${slice.family}`
+        const dot = document.createElement('span')
+        dot.className = `context-window-legend-dot context-window-legend-dot--${slice.family}`
+        const label = document.createElement('span')
+        label.className = 'context-window-legend-label'
+        label.textContent = slice.label
+        const value = document.createElement('span')
+        value.className = 'context-window-legend-value muted'
+        value.textContent = slice.tokens > 0
+          ? `${slice.tokens.toLocaleString()} tok · ${slice.pct}%`
+          : '0'
+        row.appendChild(dot); row.appendChild(label); row.appendChild(value)
+        els.windowBarLegend.appendChild(row)
+      }
+    }
+    if (els.windowBarSummary) {
+      const bs = view.budgetSource === 'server' ? '' : ' (assumed)'
+      const modeTag = view.mode === 'precise' ? '' : ' · approx'
+      els.windowBarSummary.textContent = `${view.totalTokens.toLocaleString()} tok / ${view.budget.toLocaleString()} tok${bs} · ${view.budgetPct}% of budget${modeTag}`
+    }
+  }
+
+  function readActiveBudgetTokens () {
+    const meter = window.__dshContextMeter
+    const chat = window.__dshChat
+    if (!meter || !chat || typeof chat.getActiveSessionId !== 'function') return null
+    const sid = chat.getActiveSessionId()
+    if (!sid) return null
+    // Renderer stores per-session context trackers on the state map; peek at
+    // the snapshot when we can, otherwise fall back to null (which the
+    // model translates to the 128k assumed budget).
+    if (window.__dshRendererState && window.__dshRendererState.sessions) {
+      const meta = window.__dshRendererState.sessions.get(sid)
+      if (meta && meta.contextTracker && typeof meta.contextTracker.snapshot === 'function') {
+        const snap = meta.contextTracker.snapshot()
+        if (snap && snap.budgetSource === 'server' && Number.isFinite(snap.budget)) return snap.budget
+      }
+    }
+    return null
+  }
+
+  // ---- lane-ctx-deep F3: Intervention marker strip ------------------------
+
+  function renderInterventionStrip (events) {
+    if (!els || !els.interventionTrack) return
+    const api = window.__dshInterventionTimeline
+    if (!api || typeof api.collectInterventions !== 'function') return
+    const markers = api.collectInterventions(events)
+    const track = els.interventionTrack
+    track.innerHTML = ''
+
+    if (markers.length === 0) {
+      if (els.interventionSummary) els.interventionSummary.textContent = 'no interventions this session'
+      const empty = document.createElement('div')
+      empty.className = 'context-intervention-empty muted small'
+      empty.textContent = 'No edit-rerun, fork, or steer events yet.'
+      track.appendChild(empty)
+      return
+    }
+
+    // The strip is a timeline: position each marker by its seq relative to
+    // min/max seq so early interventions cluster left and late ones cluster
+    // right. Density permitting, this reads like a Perforce swarm marker
+    // strip — a scannable audit of user overrides.
+    const minSeq = markers[0].seq
+    const maxSeq = markers[markers.length - 1].seq
+    const span = Math.max(1, maxSeq - minSeq)
+
+    for (const m of markers) {
+      const pct = span > 0 ? ((m.seq - minSeq) / span) * 100 : 50
+      const marker = document.createElement('button')
+      marker.type = 'button'
+      marker.className = `context-intervention-marker context-intervention-marker--${m.kind}`
+      marker.style.setProperty('--marker-pos', `${pct}%`)
+      marker.dataset.kind = m.kind
+      marker.dataset.seq = String(m.seq)
+      marker.dataset.turn = String(m.turn)
+      marker.textContent = m.glyph
+      const previewLine = m.preview ? ` — ${m.preview}` : ''
+      marker.title = `${m.label} · turn ${m.turn} · seq ${m.seq}${previewLine}`
+      marker.setAttribute('aria-label', marker.title)
+      marker.addEventListener('click', () => jumpToInterventionSeq(m.seq))
+      track.appendChild(marker)
+    }
+
+    // Summary line — count per kind. Uses the model's summariser so tests
+    // can lock the same shape.
+    if (els.interventionSummary) {
+      const roll = api.summariseInterventions(markers)
+      const parts = roll.map((r) => `${r.count} ${r.label.toLowerCase()}${r.count === 1 ? '' : 's'}`)
+      els.interventionSummary.textContent = parts.length > 0 ? parts.join(' · ') : 'no interventions'
+    }
+  }
+
+  function jumpToInterventionSeq (seq) {
+    // Same pattern as buildJumpBtn — switch to Chat, then scroll to the
+    // stream row with the matching data-seq (or data-first-seq for turn
+    // headers).
+    const tabs = window.__dshTabs
+    if (tabs && typeof tabs.switchTo === 'function') tabs.switchTo('chat')
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      const stream = document.getElementById('stream')
+      if (!stream) return
+      const target = stream.querySelector(`[data-seq="${seq}"]`)
+        || stream.querySelector(`[data-first-seq="${seq}"]`)
+      if (target && typeof target.scrollIntoView === 'function') {
+        target.scrollIntoView({ behavior: 'smooth', block: 'center' })
+      }
+    }))
+  }
+
   function renderEmpty () {
     if (!els) return
+    if (els.topStrip) els.topStrip.hidden = true
     if (els.list) {
       els.list.innerHTML = ''
       // Hide the empty rows container so it doesn't reserve grid track
diff --git a/examples/desktop/src/renderer/context-window-breakdown.js b/examples/desktop/src/renderer/context-window-breakdown.js
new file mode 100644
index 0000000000..3f708aed04
--- /dev/null
+++ b/examples/desktop/src/renderer/context-window-breakdown.js
@@ -0,0 +1,293 @@
+// Context-window family breakdown — pure projections for the Context page
+// occupancy bar (lane-ctx-deep, task #51 F1).
+//
+// The Context page's window-occupancy bar splits the current session's
+// accumulated context into five families and renders their token shares as
+// a stacked horizontal bar with hover tooltips. Because the wire does not
+// (yet) tag each event with its context-family, we run a heuristic
+// classifier over `cachedEvents`:
+//
+//   - system_prompt  — session-start injections and the daemon's own
+//                      system-role seeds (context/message events whose
+//                      source is `{kind:'system'}` or from the compact
+//                      plugin's system seed, plus the running system
+//                      preamble carried by turn/start.data.systemPreamble
+//                      when it lands).
+//   - tool_defs      — the JSON schemas for tool defintions we ship on the
+//                      first turn. Best proxy is turn/start.data.tools (if
+//                      present) or tool/definitions events; otherwise we
+//                      estimate from tool/call event NAMES (schema footprint
+//                      ≈ 400 chars per unique tool, an SDK-typical shape).
+//   - thinking       — assistant/reasoning events. Cost accounting-wise
+//                      these are output tokens the model produced but they
+//                      DO occupy the response prompt on the next turn if
+//                      the adapter round-trips reasoning tokens.
+//   - responses      — assistant/message content the model produced.
+//   - injections     — every OTHER context/message (plugin injects, user
+//                      steer, recall pulls). These are the ones the Context
+//                      Rail already highlights.
+//
+// The `estimateTokens(x)` primitive uses the same heuristic the
+// context-meter approx mode uses (bytes ÷ 4) so a bar whose slices sum to
+// the meter's approx-tokens read matches to the token. When
+// assistant/message events carry a `usage` envelope we honour it — the
+// `responses` slice snaps to precise `outputTokens` and `thinking` to
+// `usage.thinking` if the adapter reports it.
+//
+// Pure module. Tested via node:test. See:
+//   - test/context-window-breakdown.test.js (this task's coverage)
+//   - src/renderer/context-page.js (renders the bar)
+
+'use strict'
+
+// Family palette hints — the CSS owns the actual color tokens; this map
+// exists so the tooltip renderer and legend agree on one label per family.
+const FAMILY_ORDER = ['system_prompt', 'tool_defs', 'thinking', 'responses', 'injections']
+
+const FAMILY_LABELS = Object.freeze({
+  system_prompt: 'System prompt',
+  tool_defs:     'Tool definitions',
+  thinking:      'Reasoning',
+  responses:     'Assistant messages',
+  injections:    'Injections & recall',
+})
+
+// Rough per-tool schema footprint (chars). Copied from a survey of DSH's
+// bundled MCPs — schemas run 300–500 chars per tool once JSON-encoded with
+// description strings and parameter schemas. 400 sits in the middle and
+// keeps the bar honest without pretending we sniffed the actual schema.
+const TOOL_SCHEMA_APPROX_CHARS = 400
+
+/**
+ * Rough byte-count proxy for one event's payload. Mirrors context-meter's
+ * `estimateEventBytes` (private in that module) so bar arithmetic reads the
+ * same as the statusbar meter under approx mode.
+ * @param {object} event
+ * @returns {number}
+ */
+function eventBytes(event) {
+  if (!event || typeof event !== 'object') return 0
+  const payload = event.data !== undefined ? event.data : event
+  try { return JSON.stringify(payload).length } catch (_) { return 0 }
+}
+
+function tokensFromBytes(bytes) {
+  return Math.max(0, Math.round((bytes || 0) / 4))
+}
+
+/**
+ * Extract explicit `usage.outputTokens` when the adapter reports one, else
+ * null. Kept separate from `usage.inputTokens` because outputs are what
+ * `responses` needs — inputs cover the whole running prompt (which is what
+ * ALL our slices combined represent).
+ */
+function outputTokensOf(ev) {
+  if (!ev || ev.type !== 'assistant/message') return null
+  const u = ev.data && ev.data.usage
+  if (!u || typeof u !== 'object') return null
+  const out = Number(u.outputTokens)
+  return Number.isFinite(out) ? out : null
+}
+
+/**
+ * Some adapters split reasoning tokens off in `usage.thinking`. When present
+ * we use it verbatim for the `thinking` slice, otherwise we fall back to
+ * counting bytes of the reasoning event payload.
+ */
+function thinkingTokensOf(ev) {
+  if (!ev || ev.type !== 'assistant/message') return null
+  const u = ev.data && ev.data.usage
+  if (!u || typeof u !== 'object') return null
+  const t = Number(u.thinking) || Number(u.reasoningTokens)
+  return Number.isFinite(t) ? t : null
+}
+
+/**
+ * Classify one event into a context family. Multi-family events (an
+ * assistant/message that carries a usage envelope reporting both output and
+ * reasoning tokens) are handled at the aggregator level — this per-event
+ * classifier returns the *primary* family so the bar's chunking still lines
+ * up with the wire event stream.
+ * @param {object} ev
+ * @returns {'system_prompt'|'tool_defs'|'thinking'|'responses'|'injections'|null}
+ */
+function classifyEventFamily(ev) {
+  if (!ev || typeof ev !== 'object' || typeof ev.type !== 'string') return null
+  const t = ev.type
+  const d = ev.data || {}
+
+  // System-prompt seed. The daemon emits these as context/message with
+  // source={kind:'system'} on session start; a system preamble sometimes
+  // lands as its own event type too.
+  if (t === 'session/start' || t === 'context/system') return 'system_prompt'
+  if (t === 'context/message') {
+    const src = d.source
+    if (src && (src.kind === 'system' || src.kind === 'session-start')) return 'system_prompt'
+    // The compact plugin's own summary re-injection is also a system-level
+    // seed for the next turn — count it against system_prompt rather than
+    // muddying `injections`.
+    if (src && src.kind === 'plugin' && src.plugin === 'compact') return 'system_prompt'
+    return 'injections'
+  }
+  if (t === 'compact/summary') return 'system_prompt'
+  if (t === 'steering/message') return 'injections'
+
+  // Tool definitions arrive with these type names on different adapters.
+  // If nothing ever lands, we synthesize a slice from tool/call event names
+  // in the aggregator (see toolSchemaEstimate).
+  if (t === 'tool/definitions' || t === 'tools/available') return 'tool_defs'
+
+  // Reasoning vs. response.
+  if (t === 'assistant/reasoning') return 'thinking'
+  if (t === 'assistant/message' || t === 'assistant/chunk') return 'responses'
+
+  return null
+}
+
+/**
+ * Estimate tool-def slice from unique tool NAMES seen in tool/call events.
+ * When the wire never ships explicit tool/definitions events, this is the
+ * fairest proxy: N unique tools × 400-char schema each.
+ * @param {Array<object>} events
+ * @returns {number}
+ */
+function toolSchemaEstimate(events) {
+  const seen = new Set()
+  for (const ev of events) {
+    if (ev && ev.type === 'tool/call' && ev.data && typeof ev.data.name === 'string') {
+      seen.add(ev.data.name)
+    }
+  }
+  if (seen.size === 0) return 0
+  return tokensFromBytes(seen.size * TOOL_SCHEMA_APPROX_CHARS)
+}
+
+/**
+ * @typedef {Object} FamilySlice
+ * @property {string} family
+ * @property {string} label
+ * @property {number} tokens
+ * @property {number} eventCount
+ * @property {number} pct
+ */
+
+/**
+ * @typedef {Object} WindowBreakdown
+ * @property {Array<FamilySlice>} slices  Five slices in FAMILY_ORDER.
+ * @property {number} totalTokens         Sum across all slices.
+ * @property {number} budget              Wire-reported context window when known, else 128000.
+ * @property {'server'|'assumed'} budgetSource
+ * @property {number} budgetPct           totalTokens / budget × 100 (clamped 0..999).
+ * @property {'precise'|'approx'} mode    Whether responses/thinking used a usage envelope anywhere.
+ * @property {boolean} toolsFromCalls     True when the tool_defs slice was estimated from tool/call NAMES rather than an explicit tool/definitions event.
+ */
+
+/**
+ * Aggregate cachedEvents into a five-family breakdown with token counts and
+ * percentages. Pure: no DOM, no window.* reads.
+ *
+ * Percentages sum to ≤100 (never > because they normalise against total).
+ * When total is zero we return zeroed slices with pct=0 so the caller can
+ * render the empty bar without divide-by-zero guards.
+ *
+ * @param {Array<object>} events
+ * @param {object} [opts]
+ * @param {number} [opts.budgetTokens]  Wire-reported context window; sets budgetSource='server'.
+ * @returns {WindowBreakdown}
+ */
+function computeWindowBreakdown(events, opts) {
+  const budgetOverride = opts && Number.isFinite(opts.budgetTokens) && opts.budgetTokens > 0
+    ? Number(opts.budgetTokens)
+    : null
+  const budget = budgetOverride || 128000
+  const budgetSource = budgetOverride ? 'server' : 'assumed'
+
+  const totals = { system_prompt: 0, tool_defs: 0, thinking: 0, responses: 0, injections: 0 }
+  const counts = { system_prompt: 0, tool_defs: 0, thinking: 0, responses: 0, injections: 0 }
+  let mode = 'approx'
+  let toolsFromCalls = false
+
+  if (!Array.isArray(events)) events = []
+
+  // Walk events, honouring `usage` envelopes when they land. Multi-family
+  // accounting: an assistant/message with `usage.thinking` splits its
+  // tokens between the thinking slice and the responses slice; otherwise
+  // the whole payload byte-count falls into the primary family.
+  for (const ev of events) {
+    const fam = classifyEventFamily(ev)
+    if (fam === null) continue
+
+    // Precise-mode split for assistant/message: outputTokens → responses,
+    // usage.thinking (or reasoningTokens) → thinking.
+    if (ev && ev.type === 'assistant/message') {
+      const out = outputTokensOf(ev)
+      const think = thinkingTokensOf(ev)
+      if (out !== null || think !== null) {
+        mode = 'precise'
+        if (out !== null) { totals.responses += out; counts.responses++ }
+        if (think !== null) { totals.thinking += think; counts.thinking++ }
+        continue
+      }
+    }
+
+    totals[fam] += tokensFromBytes(eventBytes(ev))
+    counts[fam]++
+  }
+
+  // Tool defs: prefer explicit tool/definitions events (already summed
+  // above). Fall back to the tool-call-name proxy when the wire didn't ship
+  // any. We mark `toolsFromCalls` in the return so the UI's hover tooltip
+  // can honestly say "estimated from N unique tools" instead of "counted".
+  if (totals.tool_defs === 0) {
+    const est = toolSchemaEstimate(events)
+    if (est > 0) {
+      totals.tool_defs = est
+      counts.tool_defs = 1 // synthetic single-blob slice
+      toolsFromCalls = true
+    }
+  }
+
+  const total = FAMILY_ORDER.reduce((s, f) => s + totals[f], 0)
+  const slices = FAMILY_ORDER.map((f) => {
+    const pct = total > 0 ? (totals[f] / total) * 100 : 0
+    return {
+      family: f,
+      label: FAMILY_LABELS[f],
+      tokens: totals[f],
+      eventCount: counts[f],
+      pct: Math.round(pct * 10) / 10, // one decimal so tests can lock a stable shape
+    }
+  })
+
+  const budgetPct = budget > 0 ? Math.round((total / budget) * 100) : 0
+  return {
+    slices,
+    totalTokens: total,
+    budget,
+    budgetSource,
+    budgetPct: Math.max(0, Math.min(budgetPct, 999)),
+    mode,
+    toolsFromCalls,
+  }
+}
+
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = {
+    computeWindowBreakdown,
+    classifyEventFamily,
+    toolSchemaEstimate,
+    FAMILY_ORDER,
+    FAMILY_LABELS,
+    TOOL_SCHEMA_APPROX_CHARS,
+  }
+}
+if (typeof window !== 'undefined') {
+  window.__dshContextWindowBreakdown = {
+    computeWindowBreakdown,
+    classifyEventFamily,
+    toolSchemaEstimate,
+    FAMILY_ORDER,
+    FAMILY_LABELS,
+    TOOL_SCHEMA_APPROX_CHARS,
+  }
+}
diff --git a/examples/desktop/src/renderer/index.html b/examples/desktop/src/renderer/index.html
index 0a474adc23..d9b99ae016 100644
--- a/examples/desktop/src/renderer/index.html
+++ b/examples/desktop/src/renderer/index.html
@@ -1184,6 +1184,26 @@
                top when it shows. The duplicate "No context activity …" head
                was removed — the header subtitle already carries that line
                (see context-page.js renderEmpty()). -->
+        <!-- lane-ctx-deep (task #51 F1): window occupancy stacked bar
+             + F3: intervention marker strip. Both sit above the two-column
+             body so the "at a glance" chrome reads top-down. -->
+        <section class="context-page-topstrip" data-context-topstrip hidden>
+          <div class="context-window-bar" data-context-window-bar aria-label="Context window occupancy by family">
+            <div class="context-window-bar-head">
+              <span class="context-window-bar-title">Window occupancy</span>
+              <span id="context-window-bar-summary" class="context-window-bar-summary muted small"></span>
+            </div>
+            <div id="context-window-bar-track" class="context-window-bar-track" role="img" aria-label="Stacked family proportions"></div>
+            <div id="context-window-bar-legend" class="context-window-bar-legend"></div>
+          </div>
+          <div class="context-intervention-strip" data-context-intervention-strip aria-label="Human intervention markers">
+            <div class="context-intervention-head">
+              <span class="context-intervention-title">Interventions</span>
+              <span id="context-intervention-summary" class="context-intervention-summary muted small">no interventions</span>
+            </div>
+            <div id="context-intervention-track" class="context-intervention-track" role="list"></div>
+          </div>
+        </section>
         <section class="context-page-body" data-context-body>
           <div id="context-page-empty" class="context-page-empty" hidden>
             <div class="context-page-empty-note muted small">Load a sample session to see the page shape, or start a chat from the Chat tab and come back.</div>
@@ -1360,6 +1380,11 @@
   <script src="./context-meter.js"></script>
   <script src="./compact-badge.js"></script>
   <script src="./compact-card.js"></script>
+  <!-- lane-ctx-deep (task #51 F2/F4): compact Config tab + subagent
+       drill-down view models. Loaded before subagent-view.js so
+       buildInlineSubagentTrace can pick up the drill-down helpers. -->
+  <script src="./compact-config-model.js"></script>
+  <script src="./subagent-drilldown.js"></script>
   <script src="./context-rail.js"></script>
   <script src="./workflow-view.js"></script>
   <script src="./subagent-view.js"></script>
@@ -1427,6 +1452,10 @@
        window.__dshInjectFamily; the switchTo('context') hook in
        renderer.js drives its refresh on tab entry. -->
   <script src="./context-page-model.js"></script>
+  <!-- lane-ctx-deep (task #51 F1/F3): window family breakdown +
+       intervention marker projections consumed by context-page.js. -->
+  <script src="./context-window-breakdown.js"></script>
+  <script src="./intervention-timeline.js"></script>
   <script src="./context-page.js"></script>
   <!-- Tracing page (#225). Loads after context-page so it can share the
        __dshChat + __dshTraceAgg + __dshTraceTriView surfaces; the
diff --git a/examples/desktop/src/renderer/intervention-timeline.js b/examples/desktop/src/renderer/intervention-timeline.js
new file mode 100644
index 0000000000..5464c8b004
--- /dev/null
+++ b/examples/desktop/src/renderer/intervention-timeline.js
@@ -0,0 +1,186 @@
+// Human-intervention timeline projections — pure model behind the Context
+// page's intervention marker strip (lane-ctx-deep, task #51 F3).
+//
+// Three intervention kinds surface as markers on the Context page's top
+// axis. Each marker carries an anchor (turn number + first seq) so the UI
+// can jump the Chat stream to the exact turn on click:
+//
+//   - edit-rerun  — a `user/message` event that carries a `data.editRerun`
+//                    envelope (renderer.js seeds this shape when a user hits
+//                    the tool-edit-rerun panel) OR whose plugin source is
+//                    `edit-rerun`. Falls back to a heuristic when the
+//                    envelope's absent: adjacent user/message + user/message
+//                    with identical `data.origSeq` fields.
+//   - fork        — a `session/fork` marker (renderer maintains a
+//                    `forkMarkers` map in state; when the daemon reports
+//                    a fork the event stream carries `context/message` with
+//                    source={kind:'fork', ...}). We also accept the raw
+//                    daemon event type `session/forked` for symmetry.
+//   - steer       — a `steering/message` event.
+//
+// The projection returns markers in seq order — the marker strip renders
+// them left-to-right along a horizontal axis. Multiple markers on the same
+// turn stack into a badge; the UI resolves stacking, this model just emits
+// each marker once.
+//
+// Pure module. Coverage in test/intervention-timeline.test.js.
+
+'use strict'
+
+const KIND_LABELS = Object.freeze({
+  'edit-rerun': 'Edit & re-run',
+  'fork':       'Fork',
+  'steer':      'Steer',
+})
+
+const KIND_GLYPHS = Object.freeze({
+  'edit-rerun': '↺',
+  'fork':       'Y',
+  'steer':      '↷',
+})
+
+/**
+ * @typedef {Object} InterventionMarker
+ * @property {'edit-rerun'|'fork'|'steer'} kind
+ * @property {string} label   Human-readable name.
+ * @property {string} glyph   1-2 character glyph for the marker dot.
+ * @property {number} seq     Event seq the marker anchors on.
+ * @property {number} turn    Turn number the marker belongs to (0 for pre-first-turn).
+ * @property {number} time    Wire event time (ms epoch).
+ * @property {string} preview One-line preview text; empty when nothing sensible to show.
+ */
+
+function isEditRerun(ev) {
+  if (!ev || ev.type !== 'user/message') return false
+  const d = ev.data || {}
+  if (d && d.editRerun) return true
+  const src = d.source
+  if (src && src.kind === 'plugin' && (src.plugin === 'edit-rerun' || src.plugin === 'tool-edit-rerun')) return true
+  return false
+}
+
+function isFork(ev) {
+  if (!ev || typeof ev.type !== 'string') return false
+  if (ev.type === 'session/forked' || ev.type === 'session/fork') return true
+  if (ev.type === 'context/message') {
+    const src = ev.data && ev.data.source
+    if (src && src.kind === 'fork') return true
+    if (src && src.kind === 'plugin' && src.plugin === 'fork') return true
+  }
+  return false
+}
+
+function isSteer(ev) {
+  return !!(ev && ev.type === 'steering/message')
+}
+
+function shortText(blocks) {
+  if (typeof blocks === 'string') return blocks
+  if (!Array.isArray(blocks)) return ''
+  const parts = []
+  for (const b of blocks) {
+    if (b && b.type === 'text' && typeof b.text === 'string') parts.push(b.text)
+  }
+  const joined = parts.join(' ')
+  const trimmed = joined.replace(/\s+/g, ' ').trim()
+  return trimmed.length > 80 ? trimmed.slice(0, 77) + '…' : trimmed
+}
+
+function previewFor(ev, kind) {
+  if (!ev) return ''
+  const d = ev.data || {}
+  if (kind === 'edit-rerun') {
+    if (d.editRerun && typeof d.editRerun.reason === 'string') return d.editRerun.reason
+    if (d.editRerun && typeof d.editRerun.origSeq === 'number') return `orig seq ${d.editRerun.origSeq}`
+    return shortText(d.content)
+  }
+  if (kind === 'fork') {
+    if (typeof d.parentSeq === 'number') return `from seq ${d.parentSeq}`
+    const src = d.source
+    if (src && src.kind === 'fork' && typeof src.parentSeq === 'number') return `from seq ${src.parentSeq}`
+    return shortText(d.content)
+  }
+  if (kind === 'steer') return shortText(d.content)
+  return ''
+}
+
+/**
+ * Compute the sorted marker list for a session's cached events. Every
+ * marker's `turn` field reflects the turn window it belongs to (0 for
+ * events before the first turn/end). The UI uses `turn+firstSeq` to jump
+ * the Chat stream to the right bubble.
+ *
+ * @param {Array<object>} events
+ * @returns {Array<InterventionMarker>}
+ */
+function collectInterventions(events) {
+  if (!Array.isArray(events)) return []
+  const out = []
+  let turn = 0
+  for (const ev of events) {
+    if (!ev || typeof ev !== 'object') continue
+    let kind = null
+    if (isEditRerun(ev)) kind = 'edit-rerun'
+    else if (isFork(ev)) kind = 'fork'
+    else if (isSteer(ev)) kind = 'steer'
+    if (kind) {
+      const seq = Number.isFinite(ev.seq) ? ev.seq : 0
+      const time = Number.isFinite(ev.time) ? ev.time : 0
+      out.push({
+        kind,
+        label: KIND_LABELS[kind],
+        glyph: KIND_GLYPHS[kind],
+        seq,
+        turn,
+        time,
+        preview: previewFor(ev, kind),
+      })
+    }
+    if (ev.type === 'turn/end') {
+      const nextTurn = (ev.data && typeof ev.data.turn === 'number') ? (ev.data.turn + 1) : (turn + 1)
+      turn = nextTurn
+    }
+  }
+  // Deterministic order by seq — assumes cachedEvents is already seq-ordered
+  // (renderer stores them in order), but sort explicitly for safety.
+  out.sort((a, b) => a.seq - b.seq)
+  return out
+}
+
+/**
+ * Roll up the marker list into per-kind totals for a short legend line.
+ * Empty kinds are omitted so the legend doesn't advertise "0 forks".
+ * @param {Array<InterventionMarker>} markers
+ * @returns {Array<{kind:string, label:string, count:number}>}
+ */
+function summariseInterventions(markers) {
+  if (!Array.isArray(markers)) return []
+  const counts = new Map()
+  for (const m of markers) {
+    if (!m) continue
+    counts.set(m.kind, (counts.get(m.kind) || 0) + 1)
+  }
+  const out = []
+  for (const kind of ['edit-rerun', 'fork', 'steer']) {
+    const n = counts.get(kind) || 0
+    if (n > 0) out.push({ kind, label: KIND_LABELS[kind], count: n })
+  }
+  return out
+}
+
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = {
+    collectInterventions,
+    summariseInterventions,
+    isEditRerun, isFork, isSteer,
+    KIND_LABELS, KIND_GLYPHS,
+  }
+}
+if (typeof window !== 'undefined') {
+  window.__dshInterventionTimeline = {
+    collectInterventions,
+    summariseInterventions,
+    isEditRerun, isFork, isSteer,
+    KIND_LABELS, KIND_GLYPHS,
+  }
+}
diff --git a/examples/desktop/src/renderer/renderer.js b/examples/desktop/src/renderer/renderer.js
index 932fb89ccc..82d0c796cc 100644
--- a/examples/desktop/src/renderer/renderer.js
+++ b/examples/desktop/src/renderer/renderer.js
@@ -3543,6 +3543,7 @@ function appendCompactMarker(event, meta, sessionId) {
           }
           bodyEl.appendChild(dl)
         },
+        fillConfig: buildCompactConfigTabFiller(sessionId),
       })
     } else {
       // Fallback: pre-refactor .body + shadowed-expander layout kept alive
@@ -3568,6 +3569,94 @@ function appendCompactMarker(event, meta, sessionId) {
   appendSystem(`${event.type}${suffix}`)
 }
 
+// -- lane-ctx-deep F2: compact-card Config tab filler -----------------------
+//
+// The Config tab is an info-only entrance to compaction policy. Reads from
+// __dshCompactConfigModel and renders threshold + strategy + trigger count
+// + a progress bar showing "tokens until next compact". A footer note
+// points the user at Settings for the actual editor — this surface is a
+// window into the policy, not the editor.
+//
+// Returned callback closes over the sessionId so buildCompactConfigView
+// can walk the right cachedEvents at fill time (compact-card mounts tabs
+// synchronously today; if that shifts to lazy, the closure keeps working).
+
+function buildCompactConfigTabFiller(sessionId) {
+  return function fillConfigTab(bodyEl) {
+    const api = window.__dshCompactConfigModel
+    if (!api || typeof api.buildCompactConfigView !== 'function') {
+      const p = document.createElement('div')
+      p.className = 'compact-card-tab-empty muted small'
+      p.textContent = 'compact-config-model.js failed to load — Config tab is inert.'
+      bodyEl.appendChild(p)
+      return
+    }
+    const events = readSessionEventsSafe(sessionId)
+    const budget = readSessionBudgetSafe(sessionId)
+    const view = api.buildCompactConfigView(events, budget ? { budgetTokens: budget } : undefined)
+
+    // Key/value list, same look as fillMeta so the two tabs read as siblings.
+    const dl = document.createElement('dl')
+    dl.className = 'compact-card-tab-meta compact-config-list'
+    const rows = [
+      { label: 'Threshold', value: `${view.thresholdTokens.toLocaleString()} tok${view.thresholdSource === 'assumed' ? ' (assumed)' : ''}` },
+      { label: 'Strategy',  value: view.strategyName },
+      { label: 'Model',     value: view.model || 'unknown' },
+      { label: 'Summary cap', value: view.maxSummaryTokens != null ? `≤${view.maxSummaryTokens} tok` : 'unknown' },
+      { label: 'Triggers fired', value: `${view.triggersFired} this session` },
+      { label: 'Tokens since last compact', value: `${view.tokensSinceLastCompact.toLocaleString()} tok` },
+      { label: 'Tokens until next', value: `${view.tokensUntilNext.toLocaleString()} tok` },
+    ]
+    for (const row of rows) {
+      const dt = document.createElement('dt'); dt.textContent = row.label
+      const dd = document.createElement('dd'); dd.textContent = row.value
+      dl.appendChild(dt); dl.appendChild(dd)
+    }
+    bodyEl.appendChild(dl)
+
+    // Progress bar: distance to next compact.
+    const progWrap = document.createElement('div')
+    progWrap.className = `compact-config-progress compact-config-progress--${view.progressLevel}`
+    const progHead = document.createElement('div')
+    progHead.className = 'compact-config-progress-head'
+    const progTitle = document.createElement('span')
+    progTitle.className = 'compact-config-progress-title'
+    progTitle.textContent = 'Progress to next compact'
+    const progPct = document.createElement('span')
+    progPct.className = 'compact-config-progress-pct muted small'
+    progPct.textContent = `${Math.min(100, Math.round(view.progressPct))}%`
+    progHead.appendChild(progTitle); progHead.appendChild(progPct)
+    const progTrack = document.createElement('div')
+    progTrack.className = 'compact-config-progress-track'
+    const progFill = document.createElement('div')
+    progFill.className = 'compact-config-progress-fill'
+    progFill.style.setProperty('--fill-pct', `${Math.min(100, Math.max(0, view.progressPct))}%`)
+    progTrack.appendChild(progFill)
+    progWrap.appendChild(progHead)
+    progWrap.appendChild(progTrack)
+    bodyEl.appendChild(progWrap)
+
+    // Footer note: this tab is a window, not an editor.
+    const note = document.createElement('div')
+    note.className = 'compact-config-note muted small'
+    note.textContent = 'Read-only view of the current policy. Adjust in Settings › Compaction (restart-required until session/set-compact-policy lands, gap G2).'
+    bodyEl.appendChild(note)
+  }
+}
+
+function readSessionEventsSafe(sessionId) {
+  const meta = state.sessions && state.sessions.get && state.sessions.get(sessionId)
+  return (meta && Array.isArray(meta.cachedEvents)) ? meta.cachedEvents : []
+}
+function readSessionBudgetSafe(sessionId) {
+  const meta = state.sessions && state.sessions.get && state.sessions.get(sessionId)
+  if (meta && meta.contextTracker && typeof meta.contextTracker.snapshot === 'function') {
+    const snap = meta.contextTracker.snapshot()
+    if (snap && snap.budgetSource === 'server' && Number.isFinite(snap.budget)) return snap.budget
+  }
+  return null
+}
+
 // -- shadowed-events expander -------------------------------
 //
 // DSH's key differentiator on the context-management line (intent doc §2.1):
diff --git a/examples/desktop/src/renderer/style.css b/examples/desktop/src/renderer/style.css
index a620df12ad..315e6e6b3e 100644
--- a/examples/desktop/src/renderer/style.css
+++ b/examples/desktop/src/renderer/style.css
@@ -11626,6 +11626,299 @@ details.devtools-row[open] > .devtools-row-summary::before { transform: rotate(9
 /* once JS finishes booting, but robust against the first-paint race.       */
 .onboarding[hidden] { display: none !important; }
 
+/* ==========================================================================
+   lane-ctx-deep — task #51 Context page deepening (F1–F4).
+   Appended at file tail per team-lead's conflict-face rule; nothing above
+   this comment is touched by lane-ctx-deep so a rebase against test-real
+   collapses to a trailing block only. Rules under each F# group.
+   ========================================================================== */
+
+/* F1 + F3: Top strip shell (window bar + intervention markers). Sits above
+   the two-column body and reads as a "session dashboard" band. */
+.context-page-topstrip {
+  display: grid;
+  grid-template-columns: 1.6fr 1fr;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  border-bottom: 1px solid var(--border);
+  background: var(--surface);
+}
+@media (max-width: 900px) {
+  .context-page-topstrip { grid-template-columns: 1fr; }
+}
+.context-page-topstrip[hidden] { display: none; }
+
+/* --- F1: Window occupancy stacked bar ------------------------------------ */
+
+.context-window-bar {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.context-window-bar-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--space-2);
+}
+.context-window-bar-title {
+  font-weight: 600;
+  font-size: 13px;
+}
+.context-window-bar-summary {
+  font-family: var(--mono);
+  font-size: 11px;
+}
+.context-window-bar-track {
+  display: flex;
+  width: 100%;
+  height: 18px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  overflow: hidden;
+  background: var(--bg-elev);
+}
+.context-window-seg {
+  height: 100%;
+  width: var(--seg-pct, 0%);
+  min-width: 0;
+  transition: width 200ms ease;
+}
+.context-window-seg--system_prompt { background: color-mix(in oklab, var(--tint-purple) 55%, var(--bg-elev)); }
+.context-window-seg--tool_defs     { background: color-mix(in oklab, var(--tint-blue) 55%, var(--bg-elev)); }
+.context-window-seg--thinking      { background: color-mix(in oklab, var(--tint-yellow) 55%, var(--bg-elev)); }
+.context-window-seg--responses     { background: color-mix(in oklab, var(--ok) 55%, var(--bg-elev)); }
+.context-window-seg--injections    { background: color-mix(in oklab, var(--accent) 55%, var(--bg-elev)); }
+.context-window-seg:hover {
+  filter: brightness(1.1);
+  outline: 1px solid var(--text);
+  outline-offset: -1px;
+}
+.context-window-bar-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2) var(--space-3);
+  font-size: 11px;
+}
+.context-window-legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+.context-window-legend-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+  display: inline-block;
+}
+.context-window-legend-dot--system_prompt { background: color-mix(in oklab, var(--tint-purple) 55%, var(--bg-elev)); }
+.context-window-legend-dot--tool_defs     { background: color-mix(in oklab, var(--tint-blue) 55%, var(--bg-elev)); }
+.context-window-legend-dot--thinking      { background: color-mix(in oklab, var(--tint-yellow) 55%, var(--bg-elev)); }
+.context-window-legend-dot--responses     { background: color-mix(in oklab, var(--ok) 55%, var(--bg-elev)); }
+.context-window-legend-dot--injections    { background: color-mix(in oklab, var(--accent) 55%, var(--bg-elev)); }
+.context-window-legend-value {
+  font-family: var(--mono);
+  font-size: 10px;
+}
+
+/* --- F3: Intervention marker strip --------------------------------------- */
+
+.context-intervention-strip {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.context-intervention-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--space-2);
+}
+.context-intervention-title {
+  font-weight: 600;
+  font-size: 13px;
+}
+.context-intervention-track {
+  position: relative;
+  height: 32px;
+  border: 1px dashed var(--border);
+  border-radius: 4px;
+  background: var(--bg-elev);
+}
+.context-intervention-empty {
+  padding: 6px 8px;
+  font-style: italic;
+}
+.context-intervention-marker {
+  position: absolute;
+  top: 50%;
+  left: var(--marker-pos, 50%);
+  transform: translate(-50%, -50%);
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border-radius: 50%;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 100ms ease, box-shadow 100ms ease;
+}
+.context-intervention-marker:hover,
+.context-intervention-marker:focus-visible {
+  transform: translate(-50%, -50%) scale(1.15);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent);
+  z-index: 2;
+}
+.context-intervention-marker--edit-rerun {
+  background: color-mix(in oklab, var(--tint-yellow) 40%, var(--surface));
+  border-color: color-mix(in oklab, var(--tint-yellow) 55%, var(--border));
+}
+.context-intervention-marker--fork {
+  background: color-mix(in oklab, var(--tint-blue) 40%, var(--surface));
+  border-color: color-mix(in oklab, var(--tint-blue) 55%, var(--border));
+}
+.context-intervention-marker--steer {
+  background: color-mix(in oklab, var(--accent) 40%, var(--surface));
+  border-color: color-mix(in oklab, var(--accent) 55%, var(--border));
+}
+
+/* --- F2: Compact card Config tab ---------------------------------------- */
+
+.compact-config-list {
+  margin: 0 0 var(--space-3) 0;
+}
+.compact-config-progress {
+  margin-top: var(--space-2);
+  padding: var(--space-2) var(--space-2);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--bg-elev);
+}
+.compact-config-progress-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 4px;
+}
+.compact-config-progress-title {
+  font-weight: 600;
+  font-size: 12px;
+}
+.compact-config-progress-track {
+  width: 100%;
+  height: 10px;
+  border-radius: 5px;
+  overflow: hidden;
+  background: color-mix(in oklab, var(--muted) 15%, var(--bg-elev));
+}
+.compact-config-progress-fill {
+  height: 100%;
+  width: var(--fill-pct, 0%);
+  transition: width 200ms ease;
+  background: color-mix(in oklab, var(--ok) 55%, var(--bg-elev));
+}
+.compact-config-progress--warn .compact-config-progress-fill {
+  background: color-mix(in oklab, var(--tint-yellow) 65%, var(--bg-elev));
+}
+.compact-config-progress--high .compact-config-progress-fill {
+  background: color-mix(in oklab, var(--warn) 65%, var(--bg-elev));
+}
+.compact-config-progress--critical .compact-config-progress-fill {
+  background: color-mix(in oklab, var(--err) 65%, var(--bg-elev));
+}
+.compact-config-note {
+  margin-top: var(--space-2);
+  padding: var(--space-1) 0;
+  border-top: 1px dashed var(--border);
+  padding-top: var(--space-2);
+}
+
+/* --- F4: Subagent drill-down tabs --------------------------------------- */
+
+.subagent-drilldown {
+  margin-top: var(--space-2);
+  border-top: 1px dashed var(--border);
+  padding-top: var(--space-2);
+}
+.subagent-drilldown-tabstrip {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 4px;
+}
+.subagent-drilldown-tab {
+  padding: 3px 8px;
+  border: 1px solid var(--border);
+  border-bottom: none;
+  border-radius: 4px 4px 0 0;
+  background: var(--bg-elev);
+  color: var(--muted);
+  font-size: 11px;
+  font-family: var(--mono);
+  cursor: pointer;
+}
+.subagent-drilldown-tab[aria-selected="true"] {
+  background: var(--surface);
+  color: var(--text);
+  border-color: var(--border);
+  border-bottom: 1px solid var(--surface);
+  position: relative;
+  z-index: 1;
+}
+.subagent-drilldown-panel {
+  border: 1px solid var(--border);
+  padding: 8px 10px;
+  border-radius: 0 4px 4px 4px;
+  background: var(--surface);
+  font-size: 12px;
+}
+.subagent-drilldown-panel[hidden] { display: none; }
+.subagent-drilldown-head { margin-bottom: 4px; }
+.subagent-drilldown-toollist {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.subagent-drilldown-toolrow {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+}
+.subagent-drilldown-toolname {
+  font-family: var(--mono);
+  color: color-mix(in oklab, blue 60%, var(--text));
+}
+.subagent-drilldown-toolargs {
+  font-family: var(--mono);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.subagent-drilldown-toolseq {
+  font-family: var(--mono);
+  flex: 0 0 auto;
+}
+.subagent-drilldown-query {
+  margin: 0;
+  padding: 6px 10px;
+  border-left: 3px solid var(--accent);
+  background: color-mix(in oklab, var(--accent) 5%, var(--bg-elev));
+  font-family: var(--mono);
+  font-size: 11px;
+  white-space: pre-wrap;
+  color: var(--text);
+}
+
 /* -- Chat triple view: side drawer + view switcher + session graph -------
  * lane-chat-triple. The Chat pane grows a right-side fold-out drawer
  * (turn/session metadata + history list) and a top-level view switcher
diff --git a/examples/desktop/src/renderer/subagent-drilldown.js b/examples/desktop/src/renderer/subagent-drilldown.js
new file mode 100644
index 0000000000..7fdb2657c0
--- /dev/null
+++ b/examples/desktop/src/renderer/subagent-drilldown.js
@@ -0,0 +1,175 @@
+// Pure projections for the subagent drill-down tabs (lane-ctx-deep, F4).
+//
+// Each subagent card gets two tabs at its foot: "Tool defs" (what the
+// child was allowed to call at startup) and "Inbound query" (the seed
+// prompt the parent handed over). The renderer already has both of these
+// buried inside the events array — this module surfaces them as a
+// stable-shape view model the DOM builder plops into a tab shell.
+//
+// Tool defs source order:
+//   1. `spec.toolDefs` — explicit array from a synthetic wire event.
+//   2. Unique names from all `tool/call` events in `spec.childEvents`.
+//      This is what today's fixtures ship; we tag each entry with a
+//      `firstSeq` so a reader can trace where the child first used it.
+//
+// Inbound query source order:
+//   1. `spec.parentQuery` — string or ContentBlock[] passed directly.
+//   2. The first `user/message` in `spec.childEvents` (whose `source` is
+//      `{kind:'plugin', plugin:'subagent-*'}` when the parent auto-seeds
+//      the child; older fixtures just use a plain user/message).
+//
+// The returned shape is:
+//   {
+//     toolDefs: [
+//       { name, firstSeq, sampleArgs, source: 'explicit'|'inferred' }
+//     ],
+//     toolDefsSource: 'explicit'|'inferred'|'empty',
+//     inboundQuery: {
+//       text,               // one-string preview
+//       blocks,             // full ContentBlock[] when available, else null
+//       source: 'explicit'|'seed-event'|'empty',
+//       seq,                // seq of the seed event, or null
+//     },
+//   }
+//
+// Pure module. Tests in test/subagent-drilldown.test.js.
+
+'use strict'
+
+function textFromBlocks(blocks) {
+  if (typeof blocks === 'string') return blocks
+  if (!Array.isArray(blocks)) return ''
+  const parts = []
+  for (const b of blocks) {
+    if (b && b.type === 'text' && typeof b.text === 'string') parts.push(b.text)
+  }
+  return parts.join('\n')
+}
+
+function collectToolDefsFromEvents(childEvents) {
+  const map = new Map()
+  if (!Array.isArray(childEvents)) return { list: [], seen: 0 }
+  for (const ev of childEvents) {
+    if (!ev || ev.type !== 'tool/call') continue
+    const name = ev.data && ev.data.name
+    if (typeof name !== 'string' || !name) continue
+    if (!map.has(name)) {
+      const seq = Number.isFinite(ev.seq) ? ev.seq : 0
+      const args = ev.data.arguments
+      let sample = null
+      if (typeof args === 'string' && args.length > 0) {
+        sample = args.length > 100 ? args.slice(0, 97) + '…' : args
+      } else if (args && typeof args === 'object') {
+        try {
+          const j = JSON.stringify(args)
+          sample = j.length > 100 ? j.slice(0, 97) + '…' : j
+        } catch (_) { sample = null }
+      }
+      map.set(name, { name, firstSeq: seq, sampleArgs: sample, source: 'inferred' })
+    }
+  }
+  return { list: Array.from(map.values()), seen: map.size }
+}
+
+function normaliseExplicitToolDefs(toolDefs) {
+  if (!Array.isArray(toolDefs)) return []
+  const out = []
+  for (const t of toolDefs) {
+    if (typeof t === 'string') {
+      out.push({ name: t, firstSeq: 0, sampleArgs: null, source: 'explicit' })
+    } else if (t && typeof t.name === 'string') {
+      out.push({
+        name: t.name,
+        firstSeq: Number.isFinite(t.firstSeq) ? t.firstSeq : 0,
+        sampleArgs: (typeof t.sampleArgs === 'string' && t.sampleArgs) || null,
+        source: 'explicit',
+      })
+    }
+  }
+  return out
+}
+
+function findSeedUserMessage(childEvents) {
+  if (!Array.isArray(childEvents)) return null
+  // The daemon seeds the child's turn 0 with a user/message whose source is
+  // the parent subagent plugin. Fall back to the FIRST user/message if no
+  // plugin-tagged one exists.
+  let seedPlugin = null
+  let seedFirst = null
+  for (const ev of childEvents) {
+    if (!ev || ev.type !== 'user/message') continue
+    if (seedFirst === null) seedFirst = ev
+    const src = ev.data && ev.data.source
+    if (src && src.kind === 'plugin' && typeof src.plugin === 'string' && src.plugin.startsWith('subagent')) {
+      seedPlugin = ev
+      break
+    }
+  }
+  return seedPlugin || seedFirst
+}
+
+/**
+ * @param {object} spec
+ * @param {Array<object>} [spec.childEvents]
+ * @param {Array<string|{name:string}>} [spec.toolDefs]
+ * @param {string|Array<object>} [spec.parentQuery]
+ * @returns {{
+ *   toolDefs: Array<{name:string, firstSeq:number, sampleArgs:string|null, source:'explicit'|'inferred'}>,
+ *   toolDefsSource: 'explicit'|'inferred'|'empty',
+ *   inboundQuery: { text:string, blocks: Array<object>|null, source: 'explicit'|'seed-event'|'empty', seq: number|null },
+ * }}
+ */
+function buildSubagentDrilldown(spec) {
+  const s = spec || {}
+  let toolDefs = normaliseExplicitToolDefs(s.toolDefs)
+  let toolDefsSource = toolDefs.length > 0 ? 'explicit' : 'empty'
+  if (toolDefs.length === 0) {
+    const { list } = collectToolDefsFromEvents(s.childEvents)
+    if (list.length > 0) {
+      toolDefs = list
+      toolDefsSource = 'inferred'
+    }
+  }
+
+  // Inbound query.
+  let inboundText = ''
+  let inboundBlocks = null
+  let inboundSource = 'empty'
+  let inboundSeq = null
+  if (s.parentQuery !== undefined && s.parentQuery !== null) {
+    if (typeof s.parentQuery === 'string') {
+      inboundText = s.parentQuery
+    } else if (Array.isArray(s.parentQuery)) {
+      inboundBlocks = s.parentQuery
+      inboundText = textFromBlocks(s.parentQuery)
+    }
+    if (inboundText) inboundSource = 'explicit'
+  }
+  if (!inboundText) {
+    const seed = findSeedUserMessage(s.childEvents)
+    if (seed && seed.data) {
+      inboundBlocks = Array.isArray(seed.data.content) ? seed.data.content : null
+      inboundText = textFromBlocks(seed.data.content)
+      inboundSource = 'seed-event'
+      inboundSeq = Number.isFinite(seed.seq) ? seed.seq : null
+    }
+  }
+
+  return {
+    toolDefs,
+    toolDefsSource,
+    inboundQuery: {
+      text: inboundText,
+      blocks: inboundBlocks,
+      source: inboundSource,
+      seq: inboundSeq,
+    },
+  }
+}
+
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { buildSubagentDrilldown, textFromBlocks }
+}
+if (typeof window !== 'undefined') {
+  window.__dshSubagentDrilldown = { buildSubagentDrilldown, textFromBlocks }
+}
diff --git a/examples/desktop/src/renderer/subagent-view.js b/examples/desktop/src/renderer/subagent-view.js
index a0902a4962..42332188ef 100644
--- a/examples/desktop/src/renderer/subagent-view.js
+++ b/examples/desktop/src/renderer/subagent-view.js
@@ -403,11 +403,148 @@ function buildInlineSubagentTrace(doc, spec, opts = {}) {
   body.className = 'subagent-trace-body';
   const card = buildSubagentCard(doc, spec, { ...opts, omitHead: true });
   body.appendChild(card);
+
+  // lane-ctx-deep F4: drill-down tabs (Tool defs / Inbound query). Appended
+  // after the card sections so a reader sees the "how the child was
+  // instrumented" summary at the foot of the subagent trace. Skipped when
+  // the drilldown module isn't loaded (test harness stubs the shell out).
+  appendSubagentDrilldownTabs(doc, body, spec);
+
   wrap.appendChild(body);
 
   return wrap;
 }
 
+/**
+ * Render two tabs — "Tool defs" and "Inbound query" — using the pure
+ * `buildSubagentDrilldown` view model. Exposed for tests via the module
+ * exports so a headless assertion can build the tabs without wrapping the
+ * whole inline trace.
+ */
+function appendSubagentDrilldownTabs(doc, parent, spec) {
+  const api = (typeof window !== 'undefined' && window.__dshSubagentDrilldown)
+    || (typeof require === 'function' ? tryRequireDrilldown() : null);
+  if (!api || typeof api.buildSubagentDrilldown !== 'function') return;
+  const view = api.buildSubagentDrilldown(spec || {});
+
+  // Skip if we have nothing at all to show — an empty view would just add
+  // dead chrome to the subagent card.
+  if (view.toolDefsSource === 'empty' && view.inboundQuery.source === 'empty') return;
+
+  const wrap = doc.createElement('div');
+  wrap.className = 'subagent-drilldown';
+  const strip = doc.createElement('div');
+  strip.className = 'subagent-drilldown-tabstrip';
+  strip.setAttribute('role', 'tablist');
+
+  const tabs = [
+    { id: 'tooldefs', label: `Tool defs (${view.toolDefs.length})` },
+    { id: 'inbound',  label: 'Inbound query' },
+  ];
+  const bodies = {};
+  const buttons = {};
+  for (const t of tabs) {
+    const btn = doc.createElement('button');
+    btn.type = 'button';
+    btn.className = 'subagent-drilldown-tab';
+    btn.textContent = t.label;
+    btn.setAttribute('role', 'tab');
+    btn.dataset.tab = t.id;
+    const isActive = t.id === 'tooldefs';
+    btn.setAttribute('aria-selected', isActive ? 'true' : 'false');
+    btn.tabIndex = isActive ? 0 : -1;
+    strip.appendChild(btn);
+    buttons[t.id] = btn;
+    const body = doc.createElement('div');
+    body.className = 'subagent-drilldown-panel';
+    body.setAttribute('role', 'tabpanel');
+    body.hidden = !isActive;
+    bodies[t.id] = body;
+  }
+
+  // Tool defs panel — list one row per tool. Marks whether the list was
+  // explicitly reported or inferred from tool/call names so a reader knows
+  // whether they're seeing "what the child could do" vs "what it happened
+  // to reach for".
+  const tdBody = bodies.tooldefs;
+  const tdHead = doc.createElement('div');
+  tdHead.className = 'subagent-drilldown-head muted small';
+  tdHead.textContent = view.toolDefsSource === 'explicit'
+    ? `${view.toolDefs.length} tool${view.toolDefs.length === 1 ? '' : 's'} available at start`
+    : view.toolDefsSource === 'inferred'
+    ? `${view.toolDefs.length} tool${view.toolDefs.length === 1 ? '' : 's'} observed (inferred from tool/call events)`
+    : 'no tool activity recorded';
+  tdBody.appendChild(tdHead);
+  if (view.toolDefs.length > 0) {
+    const list = doc.createElement('ul');
+    list.className = 'subagent-drilldown-toollist';
+    for (const t of view.toolDefs) {
+      const li = doc.createElement('li');
+      li.className = 'subagent-drilldown-toolrow';
+      const name = doc.createElement('code');
+      name.className = 'subagent-drilldown-toolname';
+      name.textContent = t.name;
+      li.appendChild(name);
+      if (t.sampleArgs) {
+        const args = doc.createElement('span');
+        args.className = 'subagent-drilldown-toolargs muted small';
+        args.textContent = t.sampleArgs;
+        li.appendChild(args);
+      }
+      if (t.firstSeq) {
+        const seq = doc.createElement('span');
+        seq.className = 'subagent-drilldown-toolseq muted small';
+        seq.textContent = `seq ${t.firstSeq}`;
+        li.appendChild(seq);
+      }
+      list.appendChild(li);
+    }
+    tdBody.appendChild(list);
+  }
+
+  // Inbound query panel — verbatim seed prompt text, plus a hint chip
+  // stating where it came from (explicit spec vs. seed-event mining).
+  const inb = bodies.inbound;
+  const inbHead = doc.createElement('div');
+  inbHead.className = 'subagent-drilldown-head muted small';
+  inbHead.textContent = view.inboundQuery.source === 'explicit'
+    ? 'From parent invocation (explicit)'
+    : view.inboundQuery.source === 'seed-event'
+    ? `From child seed user/message${view.inboundQuery.seq ? ` at seq ${view.inboundQuery.seq}` : ''}`
+    : 'No inbound query recorded';
+  inb.appendChild(inbHead);
+  if (view.inboundQuery.text) {
+    const q = doc.createElement('blockquote');
+    q.className = 'subagent-drilldown-query';
+    q.textContent = view.inboundQuery.text;
+    inb.appendChild(q);
+  }
+
+  const activate = (id) => {
+    for (const t of tabs) {
+      const on = t.id === id;
+      buttons[t.id].setAttribute('aria-selected', on ? 'true' : 'false');
+      buttons[t.id].tabIndex = on ? 0 : -1;
+      bodies[t.id].hidden = !on;
+    }
+  };
+  strip.addEventListener('click', (ev) => {
+    const target = ev && ev.target;
+    if (!target) return;
+    const id = target === buttons.tooldefs ? 'tooldefs' : target === buttons.inbound ? 'inbound' : null;
+    if (id) activate(id);
+  });
+
+  wrap.appendChild(strip);
+  wrap.appendChild(bodies.tooldefs);
+  wrap.appendChild(bodies.inbound);
+  parent.appendChild(wrap);
+}
+
+function tryRequireDrilldown() {
+  try { return require('./subagent-drilldown.js'); } catch (_) { return null; }
+}
+
 // Local name is prefixed to avoid the load-time `const api` collision
 // with sibling non-IIFE renderer modules (test/renderer-collisions.test.js
 // keeps a static gate).
@@ -419,6 +556,7 @@ const subagentViewApi = {
   buildInlineSubagentTrace,
   renderStatusToken,
   subagentLastMessagePreview,
+  appendSubagentDrilldownTabs,
 };
 if (typeof module !== 'undefined' && module.exports) module.exports = subagentViewApi;
 if (typeof window !== 'undefined') window.__dshSubagentView = subagentViewApi;
diff --git a/examples/desktop/test/compact-config-model.test.js b/examples/desktop/test/compact-config-model.test.js
new file mode 100644
index 0000000000..5dba3fb213
--- /dev/null
+++ b/examples/desktop/test/compact-config-model.test.js
@@ -0,0 +1,112 @@
+'use strict'
+
+const test = require('node:test')
+const assert = require('node:assert/strict')
+
+const M = require('../src/renderer/compact-config-model.js')
+
+let _seq = 0
+function nextSeq() { _seq += 1; return _seq }
+function reset() { _seq = 0 }
+
+function userMsg(text = 'hi') {
+  return { type: 'user/message', seq: nextSeq(), data: { content: [{ type: 'text', text }] } }
+}
+function assistantMsg(text = 'ok', usage = null) {
+  const ev = { type: 'assistant/message', seq: nextSeq(), data: { content: [{ type: 'text', text }] } }
+  if (usage) ev.data.usage = usage
+  return ev
+}
+function compact(model = 'deepseek-chat', maxTokens = 512) {
+  return {
+    type: 'compact/summary',
+    seq: nextSeq(),
+    data: { summary: [{ type: 'text', text: 's' }], model, maxTokens, shadowedTokenCount: 8000 },
+  }
+}
+
+test('resolveThreshold: explicit override → server source', () => {
+  const r = M.resolveThreshold({ thresholdTokens: 50000 })
+  assert.equal(r.tokens, 50000)
+  assert.equal(r.source, 'server')
+})
+
+test('resolveThreshold: budget → 0.75 × budget, assumed source', () => {
+  const r = M.resolveThreshold({ budgetTokens: 128000 })
+  assert.equal(r.tokens, 96000)
+  assert.equal(r.source, 'assumed')
+})
+
+test('resolveThreshold: no info → default 96000', () => {
+  const r = M.resolveThreshold({})
+  assert.equal(r.tokens, M.DEFAULT_THRESHOLD_TOKENS)
+  assert.equal(r.source, 'assumed')
+})
+
+test('buildCompactConfigView: counts triggersFired from compact events', () => {
+  reset()
+  const events = [userMsg(), assistantMsg(), compact(), userMsg(), assistantMsg(), compact()]
+  const view = M.buildCompactConfigView(events)
+  assert.equal(view.triggersFired, 2)
+})
+
+test('buildCompactConfigView: lastCompactSeq points at final compact event', () => {
+  reset()
+  const events = [userMsg(), compact(), userMsg(), assistantMsg()]
+  const cLast = compact()
+  events.push(cLast)
+  const view = M.buildCompactConfigView(events)
+  assert.equal(view.lastCompactSeq, cLast.seq)
+})
+
+test('buildCompactConfigView: tokensSinceLastCompact resets on compact', () => {
+  reset()
+  const events = [userMsg('x'.repeat(4000)), compact(), userMsg('y'.repeat(400))]
+  const view = M.buildCompactConfigView(events)
+  assert.ok(view.tokensSinceLastCompact < 500, 'reset means we count only tokens after the compact')
+  assert.ok(view.tokensSinceLastCompact > 0, 'post-compact user msg still counted')
+})
+
+test('buildCompactConfigView: progressPct + level scale with threshold', () => {
+  reset()
+  const bigMsg = { type: 'user/message', seq: nextSeq(), data: { content: [{ type: 'text', text: 'x'.repeat(400000) }] } }
+  const view = M.buildCompactConfigView([bigMsg], { thresholdTokens: 96000 })
+  assert.ok(view.progressPct >= 95, `expected critical level, got ${view.progressPct}%`)
+  assert.equal(view.progressLevel, 'critical')
+})
+
+test('buildCompactConfigView: tokensUntilNext floors at 0', () => {
+  reset()
+  const bigMsg = { type: 'user/message', seq: nextSeq(), data: { content: [{ type: 'text', text: 'x'.repeat(500000) }] } }
+  const view = M.buildCompactConfigView([bigMsg], { thresholdTokens: 96000 })
+  assert.equal(view.tokensUntilNext, 0)
+})
+
+test('buildCompactConfigView: empty events → zeroed view', () => {
+  const view = M.buildCompactConfigView([])
+  assert.equal(view.triggersFired, 0)
+  assert.equal(view.currentTokens, 0)
+  assert.equal(view.lastCompactSeq, null)
+  assert.equal(view.progressLevel, 'nominal')
+})
+
+test('buildCompactConfigView: strategy override wins over inferred default', () => {
+  const view = M.buildCompactConfigView([], { strategyName: 'sliding-window' })
+  assert.equal(view.strategyName, 'sliding-window')
+})
+
+test('buildCompactConfigView: last policy carries model + maxSummaryTokens', () => {
+  reset()
+  const events = [compact('deepseek-chat-v3', 1024)]
+  const view = M.buildCompactConfigView(events)
+  assert.equal(view.model, 'deepseek-chat-v3')
+  assert.equal(view.maxSummaryTokens, 1024)
+})
+
+test('levelForPct thresholds', () => {
+  assert.equal(M.levelForPct(0), 'nominal')
+  assert.equal(M.levelForPct(49), 'nominal')
+  assert.equal(M.levelForPct(50), 'warn')
+  assert.equal(M.levelForPct(80), 'high')
+  assert.equal(M.levelForPct(95), 'critical')
+})
diff --git a/examples/desktop/test/context-window-breakdown.test.js b/examples/desktop/test/context-window-breakdown.test.js
new file mode 100644
index 0000000000..afff4d1127
--- /dev/null
+++ b/examples/desktop/test/context-window-breakdown.test.js
@@ -0,0 +1,131 @@
+'use strict'
+
+const test = require('node:test')
+const assert = require('node:assert/strict')
+
+const M = require('../src/renderer/context-window-breakdown.js')
+
+let _seq = 0
+function nextSeq() { _seq += 1; return _seq }
+function reset() { _seq = 0 }
+
+function sysMsg(text = 'you are a helpful assistant', size = null) {
+  return {
+    type: 'context/message',
+    seq: nextSeq(),
+    time: 1_700_000_000_000 + _seq * 1000,
+    data: {
+      content: [{ type: 'text', text: size ? 'x'.repeat(size) : text }],
+      source: { kind: 'system' },
+    },
+  }
+}
+function injectMsg(plugin = 'foo', text = 'inject') {
+  return {
+    type: 'context/message',
+    seq: nextSeq(),
+    time: 1_700_000_000_000 + _seq * 1000,
+    data: { content: [{ type: 'text', text }], source: { kind: 'plugin', plugin } },
+  }
+}
+function assistantMsg(usage = null, text = 'ok') {
+  const ev = {
+    type: 'assistant/message',
+    seq: nextSeq(),
+    time: 1_700_000_000_000 + _seq * 1000,
+    data: { content: [{ type: 'text', text }] },
+  }
+  if (usage) ev.data.usage = usage
+  return ev
+}
+function reasoning(text = 'thinking about...') {
+  return {
+    type: 'assistant/reasoning',
+    seq: nextSeq(),
+    time: 1_700_000_000_000 + _seq * 1000,
+    data: { content: [{ type: 'text', text }] },
+  }
+}
+function toolCall(name = 'search') {
+  return {
+    type: 'tool/call',
+    seq: nextSeq(),
+    time: 1_700_000_000_000 + _seq * 1000,
+    data: { name, arguments: JSON.stringify({ q: 'x' }) },
+  }
+}
+
+test('computeWindowBreakdown: returns 5 slices in stable order', () => {
+  reset()
+  const result = M.computeWindowBreakdown([sysMsg(), injectMsg(), reasoning(), assistantMsg()])
+  assert.equal(result.slices.length, 5)
+  assert.deepEqual(result.slices.map((s) => s.family), M.FAMILY_ORDER)
+})
+
+test('computeWindowBreakdown: percentages sum to <= 100', () => {
+  reset()
+  const events = [sysMsg('sys'), injectMsg('plugin', 'inj'), reasoning('r'), assistantMsg(null, 'a'), toolCall('search'), toolCall('read')]
+  const result = M.computeWindowBreakdown(events)
+  const sum = result.slices.reduce((s, sl) => s + sl.pct, 0)
+  assert.ok(sum <= 100.5, `slice pct sum ${sum} should be <= 100 (allowing ≤0.5 rounding drift)`)
+  assert.ok(sum > 0, 'slice pct sum should be > 0 for a non-empty session')
+})
+
+test('computeWindowBreakdown: system_prompt family catches system + compact re-inject', () => {
+  reset()
+  const evSys = sysMsg()
+  const evCompactInject = {
+    type: 'context/message',
+    seq: nextSeq(),
+    data: { content: [{ type: 'text', text: 'summary' }], source: { kind: 'plugin', plugin: 'compact' } },
+  }
+  const result = M.computeWindowBreakdown([evSys, evCompactInject])
+  const sys = result.slices.find((s) => s.family === 'system_prompt')
+  assert.equal(sys.eventCount, 2)
+  assert.ok(sys.tokens > 0)
+})
+
+test('computeWindowBreakdown: tool_defs inferred from tool/call names when no explicit event', () => {
+  reset()
+  const result = M.computeWindowBreakdown([toolCall('search'), toolCall('read'), toolCall('search')])
+  const td = result.slices.find((s) => s.family === 'tool_defs')
+  assert.ok(td.tokens > 0, 'tool_defs slice populated from unique tool names')
+  assert.equal(result.toolsFromCalls, true)
+})
+
+test('computeWindowBreakdown: usage envelope promotes to precise mode + splits thinking/responses', () => {
+  reset()
+  const result = M.computeWindowBreakdown([
+    assistantMsg({ inputTokens: 1000, outputTokens: 400, thinking: 150 }),
+  ])
+  assert.equal(result.mode, 'precise')
+  const thinking = result.slices.find((s) => s.family === 'thinking')
+  const responses = result.slices.find((s) => s.family === 'responses')
+  assert.equal(thinking.tokens, 150)
+  assert.equal(responses.tokens, 400)
+})
+
+test('computeWindowBreakdown: empty events → zeroed slices, pct=0', () => {
+  const result = M.computeWindowBreakdown([])
+  assert.equal(result.totalTokens, 0)
+  for (const s of result.slices) {
+    assert.equal(s.tokens, 0)
+    assert.equal(s.pct, 0)
+  }
+})
+
+test('computeWindowBreakdown: honours budgetTokens override → server source', () => {
+  const result = M.computeWindowBreakdown([sysMsg()], { budgetTokens: 200000 })
+  assert.equal(result.budget, 200000)
+  assert.equal(result.budgetSource, 'server')
+})
+
+test('classifyEventFamily: correctly bins every family', () => {
+  assert.equal(M.classifyEventFamily({ type: 'assistant/reasoning', data: {} }), 'thinking')
+  assert.equal(M.classifyEventFamily({ type: 'assistant/message', data: {} }), 'responses')
+  assert.equal(M.classifyEventFamily({ type: 'steering/message', data: {} }), 'injections')
+  assert.equal(M.classifyEventFamily({ type: 'context/message', data: { source: { kind: 'plugin', plugin: 'foo' } } }), 'injections')
+  assert.equal(M.classifyEventFamily({ type: 'context/message', data: { source: { kind: 'system' } } }), 'system_prompt')
+  assert.equal(M.classifyEventFamily({ type: 'tool/definitions', data: {} }), 'tool_defs')
+  assert.equal(M.classifyEventFamily({ type: 'tool/result', data: {} }), null)
+})
diff --git a/examples/desktop/test/intervention-timeline.test.js b/examples/desktop/test/intervention-timeline.test.js
new file mode 100644
index 0000000000..0fa699b57d
--- /dev/null
+++ b/examples/desktop/test/intervention-timeline.test.js
@@ -0,0 +1,122 @@
+'use strict'
+
+const test = require('node:test')
+const assert = require('node:assert/strict')
+
+const M = require('../src/renderer/intervention-timeline.js')
+
+let _seq = 0
+function nextSeq() { _seq += 1; return _seq }
+function reset() { _seq = 0 }
+
+function userMsg(extra = {}) {
+  return {
+    type: 'user/message',
+    seq: nextSeq(),
+    time: 1_700_000_000_000 + _seq * 1000,
+    data: { content: [{ type: 'text', text: 'hi' }], ...extra },
+  }
+}
+function steer(text = 'no wait') {
+  return {
+    type: 'steering/message',
+    seq: nextSeq(),
+    time: 1_700_000_000_000 + _seq * 1000,
+    data: { content: [{ type: 'text', text }] },
+  }
+}
+function fork(parentSeq = 5) {
+  return {
+    type: 'session/forked',
+    seq: nextSeq(),
+    time: 1_700_000_000_000 + _seq * 1000,
+    data: { parentSeq },
+  }
+}
+function editRerun(origSeq = 3) {
+  return {
+    type: 'user/message',
+    seq: nextSeq(),
+    time: 1_700_000_000_000 + _seq * 1000,
+    data: {
+      content: [{ type: 'text', text: 'redone' }],
+      editRerun: { origSeq, reason: 'typo fix' },
+    },
+  }
+}
+function turnEnd(turn) {
+  return {
+    type: 'turn/end',
+    seq: nextSeq(),
+    time: 1_700_000_000_000 + _seq * 1000,
+    data: { turn, reason: { kind: 'completed' } },
+  }
+}
+
+test('collectInterventions: detects all three kinds', () => {
+  reset()
+  const events = [userMsg(), turnEnd(1), editRerun(1), steer(), fork(2), turnEnd(2)]
+  const markers = M.collectInterventions(events)
+  const kinds = markers.map((m) => m.kind).sort()
+  assert.deepEqual(kinds, ['edit-rerun', 'fork', 'steer'])
+})
+
+test('collectInterventions: sorts by seq', () => {
+  reset()
+  const events = [fork(1), steer(), editRerun(2)]
+  const markers = M.collectInterventions(events)
+  for (let i = 1; i < markers.length; i++) {
+    assert.ok(markers[i].seq >= markers[i - 1].seq, 'markers seq-ordered')
+  }
+})
+
+test('collectInterventions: turn tracking increments on turn/end', () => {
+  reset()
+  const events = [steer(), turnEnd(1), fork(1)]
+  const markers = M.collectInterventions(events)
+  assert.equal(markers[0].kind, 'steer')
+  assert.equal(markers[0].turn, 0, 'steer before first turn/end lands in turn 0')
+  assert.equal(markers[1].kind, 'fork')
+  assert.equal(markers[1].turn, 2, 'fork after turn/end 1 anchors turn 2 (next-turn window)')
+})
+
+test('collectInterventions: fork marker via context/message with fork source', () => {
+  reset()
+  const events = [{
+    type: 'context/message',
+    seq: nextSeq(),
+    data: { content: [{ type: 'text', text: 'forked' }], source: { kind: 'fork', parentSeq: 7 } },
+  }]
+  const markers = M.collectInterventions(events)
+  assert.equal(markers.length, 1)
+  assert.equal(markers[0].kind, 'fork')
+  assert.match(markers[0].preview, /seq 7/)
+})
+
+test('collectInterventions: edit-rerun via plugin source too', () => {
+  reset()
+  const events = [{
+    type: 'user/message',
+    seq: nextSeq(),
+    data: { content: [{ type: 'text', text: 're' }], source: { kind: 'plugin', plugin: 'edit-rerun' } },
+  }]
+  const markers = M.collectInterventions(events)
+  assert.equal(markers.length, 1)
+  assert.equal(markers[0].kind, 'edit-rerun')
+})
+
+test('collectInterventions: empty stream → []', () => {
+  assert.deepEqual(M.collectInterventions([]), [])
+  assert.deepEqual(M.collectInterventions(null), [])
+})
+
+test('summariseInterventions: rolls up per-kind counts, omits zero', () => {
+  reset()
+  const events = [steer(), steer(), fork(1)]
+  const markers = M.collectInterventions(events)
+  const roll = M.summariseInterventions(markers)
+  const map = new Map(roll.map((r) => [r.kind, r.count]))
+  assert.equal(map.get('steer'), 2)
+  assert.equal(map.get('fork'), 1)
+  assert.equal(map.has('edit-rerun'), false)
+})
diff --git a/examples/desktop/test/lane-ctx-deep-dom.test.js b/examples/desktop/test/lane-ctx-deep-dom.test.js
new file mode 100644
index 0000000000..3d95608e23
--- /dev/null
+++ b/examples/desktop/test/lane-ctx-deep-dom.test.js
@@ -0,0 +1,199 @@
+// DOM-shape tests for the four lane-ctx-deep enhancements (task #51).
+//
+// These assert on the rendered element trees without booting jsdom or the
+// Electron shell. Each test mocks the minimal DOM surface each builder
+// touches (createElement + appendChild + attribute + dataset), running
+// through the same code paths the production shell exercises.
+//
+// The four features covered:
+//   F1 — window occupancy bar: renders 5 stacked segments.
+//   F2 — compact-card 4th tab "Config": strip includes a `Config` button
+//        AND the config body is populated with threshold+progress rows.
+//   F3 — intervention marker strip: emits one marker per intervention.
+//   F4 — subagent drill-down tabs: emits `Tool defs (N)` + `Inbound query`
+//        strip and populated bodies.
+
+'use strict'
+
+const test = require('node:test')
+const assert = require('node:assert/strict')
+
+// --- Handroll DOM stub ---------------------------------------------------
+//
+// The builders under test never touch layout, only tree structure + a few
+// attrs/dataset entries + textContent + eventListeners. This stub covers
+// exactly that.
+
+function makeEl(tag) {
+  return {
+    tagName: String(tag).toUpperCase(),
+    className: '',
+    textContent: '',
+    hidden: false,
+    tabIndex: 0,
+    style: (function () {
+      const map = {}
+      return {
+        setProperty(k, v) { map[k] = v },
+        getPropertyValue(k) { return map[k] },
+      }
+    })(),
+    dataset: {},
+    _attrs: {},
+    _listeners: {},
+    _children: [],
+    ownerDocument: null, // set below
+    appendChild(c) { this._children.push(c); return c },
+    append(...kids) { for (const k of kids) this._children.push(k) },
+    setAttribute(k, v) { this._attrs[k] = String(v) },
+    getAttribute(k) { return this._attrs[k] },
+    addEventListener(type, fn) {
+      (this._listeners[type] = this._listeners[type] || []).push(fn)
+    },
+    querySelector() { return null },
+    remove() { /* no-op */ },
+  }
+}
+
+function makeDoc() {
+  const doc = {
+    createElement(tag) {
+      const el = makeEl(tag)
+      el.ownerDocument = doc
+      return el
+    },
+    body: null,
+    getElementById() { return null },
+  }
+  doc.body = doc.createElement('body')
+  return doc
+}
+
+// Recursively find children matching a class prefix.
+function findAllByClass(root, cls, out) {
+  out = out || []
+  if (!root) return out
+  if (root.className && String(root.className).split(/\s+/).includes(cls)) out.push(root)
+  for (const c of root._children || []) findAllByClass(c, cls, out)
+  return out
+}
+function findFirstByClass(root, cls) {
+  const all = findAllByClass(root, cls, [])
+  return all[0] || null
+}
+
+// --- F2: compact-card 4-tab shell ----------------------------------------
+
+test('F2: mountTabs with fillConfig adds a Config tab and populates its body', () => {
+  const { mountTabs } = require('../src/renderer/compact-card.js')
+  const doc = makeDoc()
+  const parent = doc.createElement('div')
+
+  let filledConfig = null
+  mountTabs(parent, {
+    document: doc,
+    initial: 'post',
+    fillPre: (body) => { body.textContent = 'pre' },
+    fillPost: (body) => { body.textContent = 'post' },
+    fillMeta: (body) => { body.textContent = 'meta' },
+    fillConfig: (body) => { body.textContent = 'CONFIG_HERE'; filledConfig = body },
+  })
+
+  // Tab buttons: expect four in the strip.
+  const strip = findFirstByClass(parent, 'compact-card-tabstrip')
+  assert.ok(strip, 'tabstrip mounted')
+  const tabButtons = strip._children.filter((c) => c.tagName === 'BUTTON')
+  assert.equal(tabButtons.length, 4, 'expect 4 tabs when fillConfig is provided')
+  const labels = tabButtons.map((b) => b.textContent)
+  assert.deepEqual(labels, ['Diff', 'Summary', 'Policy & accounting', 'Config'])
+
+  // Config body populated.
+  assert.equal(filledConfig.textContent, 'CONFIG_HERE')
+})
+
+test('F2: mountTabs without fillConfig stays a 3-tab shell (back-compat)', () => {
+  const { mountTabs } = require('../src/renderer/compact-card.js')
+  const doc = makeDoc()
+  const parent = doc.createElement('div')
+  const out = mountTabs(parent, {
+    document: doc,
+    fillPre() {}, fillPost() {}, fillMeta() {},
+  })
+  const strip = findFirstByClass(parent, 'compact-card-tabstrip')
+  const tabButtons = strip._children.filter((c) => c.tagName === 'BUTTON')
+  assert.equal(tabButtons.length, 3)
+  assert.equal(out.configBody, null)
+})
+
+// --- F4: subagent drill-down tabs ---------------------------------------
+
+test('F4: appendSubagentDrilldownTabs emits both panels with correct labels', () => {
+  const { appendSubagentDrilldownTabs } = require('../src/renderer/subagent-view.js')
+  const doc = makeDoc()
+  const parent = doc.createElement('div')
+  const spec = {
+    childEvents: [
+      { type: 'user/message', seq: 1, data: { content: [{ type: 'text', text: 'seed' }], source: { kind: 'plugin', plugin: 'subagent-search' } } },
+      { type: 'tool/call', seq: 2, data: { name: 'search', arguments: '{"q":"x"}' } },
+      { type: 'tool/call', seq: 3, data: { name: 'read_file', arguments: '{"path":"a"}' } },
+    ],
+  }
+  appendSubagentDrilldownTabs(doc, parent, spec)
+  // Two tab buttons expected.
+  const strip = findFirstByClass(parent, 'subagent-drilldown-tabstrip')
+  assert.ok(strip, 'drilldown tabstrip mounted')
+  const buttons = strip._children.filter((c) => c.tagName === 'BUTTON')
+  assert.equal(buttons.length, 2)
+  const btnLabels = buttons.map((b) => b.textContent)
+  assert.match(btnLabels[0], /Tool defs \(2\)/)
+  assert.equal(btnLabels[1], 'Inbound query')
+  // Tool list should have two entries.
+  const toolRows = findAllByClass(parent, 'subagent-drilldown-toolrow', [])
+  assert.equal(toolRows.length, 2)
+  // Inbound query blockquote should carry the seed text.
+  const query = findFirstByClass(parent, 'subagent-drilldown-query')
+  assert.ok(query, 'inbound query rendered')
+  assert.match(query.textContent, /seed/)
+})
+
+test('F4: appendSubagentDrilldownTabs skips entirely on empty spec', () => {
+  const { appendSubagentDrilldownTabs } = require('../src/renderer/subagent-view.js')
+  const doc = makeDoc()
+  const parent = doc.createElement('div')
+  appendSubagentDrilldownTabs(doc, parent, {})
+  assert.equal(parent._children.length, 0, 'no drilldown wrapper for empty spec')
+})
+
+// --- F1 + F3 model-shape sanity ----------------------------------------
+// (Full DOM wire-up of context-page.js is exercised by the four real-machine
+// screenshots at task-end. Here we lock the shapes the DOM depends on.)
+
+test('F1 model: computeWindowBreakdown returns 5 slices in FAMILY_ORDER', () => {
+  const M = require('../src/renderer/context-window-breakdown.js')
+  const events = [
+    { type: 'context/message', seq: 1, data: { content: [{ type: 'text', text: 'sys' }], source: { kind: 'system' } } },
+    { type: 'assistant/message', seq: 2, data: { content: [{ type: 'text', text: 'ok' }], usage: { inputTokens: 100, outputTokens: 40 } } },
+    { type: 'assistant/reasoning', seq: 3, data: { content: [{ type: 'text', text: 'thinking' }] } },
+  ]
+  const view = M.computeWindowBreakdown(events)
+  assert.equal(view.slices.length, 5)
+  const totalPct = view.slices.reduce((s, sl) => s + sl.pct, 0)
+  assert.ok(totalPct <= 100.5, `sum ${totalPct} <= 100`)
+})
+
+test('F3 model: collectInterventions preserves seq order + kind counts', () => {
+  const M = require('../src/renderer/intervention-timeline.js')
+  const events = [
+    { type: 'steering/message', seq: 5, data: { content: [{ type: 'text', text: 'a' }] } },
+    { type: 'session/forked', seq: 10, data: { parentSeq: 8 } },
+    { type: 'user/message', seq: 15, data: { content: [{ type: 'text', text: 'r' }], editRerun: { origSeq: 12 } } },
+  ]
+  const markers = M.collectInterventions(events)
+  assert.equal(markers.length, 3)
+  assert.deepEqual(markers.map((m) => m.kind), ['steer', 'fork', 'edit-rerun'])
+  const roll = M.summariseInterventions(markers)
+  const rollMap = new Map(roll.map((r) => [r.kind, r.count]))
+  assert.equal(rollMap.get('steer'), 1)
+  assert.equal(rollMap.get('fork'), 1)
+  assert.equal(rollMap.get('edit-rerun'), 1)
+})
diff --git a/examples/desktop/test/renderer-collisions.test.js b/examples/desktop/test/renderer-collisions.test.js
index a3119aa0f1..52f3bd3331 100644
--- a/examples/desktop/test/renderer-collisions.test.js
+++ b/examples/desktop/test/renderer-collisions.test.js
@@ -134,6 +134,15 @@ const NON_IIFE_ALLOWLIST = new Set([
   // for renderer). Same shape as inject-family.js / raw-inject.js — just
   // one `wireDetailsAria(details, summary)` helper, no functions collide.
   'details-aria.js',
+  // lane-ctx-deep (task #51, 2026-07-19) Context-page deepening. Four
+  // dual-exported pure modules — same shape as inject-family.js /
+  // context-page-model.js. CommonJS require for node --test,
+  // `window.__dsh*` handle for the renderer. No top-level function names
+  // collide with the shared renderer scope.
+  'context-window-breakdown.js',
+  'intervention-timeline.js',
+  'compact-config-model.js',
+  'subagent-drilldown.js',
 ])
 
 function listRendererScripts() {
diff --git a/examples/desktop/test/subagent-drilldown.test.js b/examples/desktop/test/subagent-drilldown.test.js
new file mode 100644
index 0000000000..fee462f7d5
--- /dev/null
+++ b/examples/desktop/test/subagent-drilldown.test.js
@@ -0,0 +1,87 @@
+'use strict'
+
+const test = require('node:test')
+const assert = require('node:assert/strict')
+
+const M = require('../src/renderer/subagent-drilldown.js')
+
+test('buildSubagentDrilldown: infers tool defs from child tool/call events', () => {
+  const events = [
+    { type: 'user/message', seq: 1, data: { content: [{ type: 'text', text: 'go' }] } },
+    { type: 'tool/call', seq: 2, data: { name: 'read_file', arguments: '{"path":"a.md"}' } },
+    { type: 'tool/call', seq: 3, data: { name: 'search',    arguments: '{"q":"hello"}' } },
+    { type: 'tool/call', seq: 4, data: { name: 'read_file', arguments: '{"path":"b.md"}' } },
+  ]
+  const v = M.buildSubagentDrilldown({ childEvents: events })
+  assert.equal(v.toolDefs.length, 2)
+  assert.equal(v.toolDefsSource, 'inferred')
+  const names = v.toolDefs.map((t) => t.name).sort()
+  assert.deepEqual(names, ['read_file', 'search'])
+  // firstSeq should be the first occurrence.
+  const rf = v.toolDefs.find((t) => t.name === 'read_file')
+  assert.equal(rf.firstSeq, 2)
+})
+
+test('buildSubagentDrilldown: explicit toolDefs override inferred', () => {
+  const v = M.buildSubagentDrilldown({
+    toolDefs: ['read_file', 'bash', 'search'],
+    childEvents: [{ type: 'tool/call', seq: 1, data: { name: 'other' } }],
+  })
+  assert.equal(v.toolDefsSource, 'explicit')
+  assert.deepEqual(v.toolDefs.map((t) => t.name), ['read_file', 'bash', 'search'])
+})
+
+test('buildSubagentDrilldown: inboundQuery from parent-seed user/message', () => {
+  const events = [
+    { type: 'user/message', seq: 1,
+      data: {
+        content: [{ type: 'text', text: 'go find X for the parent' }],
+        source: { kind: 'plugin', plugin: 'subagent-search' },
+      } },
+    { type: 'tool/call', seq: 2, data: { name: 'search' } },
+  ]
+  const v = M.buildSubagentDrilldown({ childEvents: events })
+  assert.equal(v.inboundQuery.source, 'seed-event')
+  assert.match(v.inboundQuery.text, /find X/)
+  assert.equal(v.inboundQuery.seq, 1)
+})
+
+test('buildSubagentDrilldown: explicit parentQuery wins', () => {
+  const v = M.buildSubagentDrilldown({ parentQuery: 'summarise these docs' })
+  assert.equal(v.inboundQuery.source, 'explicit')
+  assert.equal(v.inboundQuery.text, 'summarise these docs')
+})
+
+test('buildSubagentDrilldown: falls back to first user/message when no plugin-tagged seed', () => {
+  const v = M.buildSubagentDrilldown({
+    childEvents: [{ type: 'user/message', seq: 5, data: { content: [{ type: 'text', text: 'raw seed' }] } }],
+  })
+  assert.equal(v.inboundQuery.source, 'seed-event')
+  assert.equal(v.inboundQuery.text, 'raw seed')
+})
+
+test('buildSubagentDrilldown: empty spec → empty view', () => {
+  const v = M.buildSubagentDrilldown({})
+  assert.equal(v.toolDefs.length, 0)
+  assert.equal(v.toolDefsSource, 'empty')
+  assert.equal(v.inboundQuery.source, 'empty')
+  assert.equal(v.inboundQuery.text, '')
+})
+
+test('buildSubagentDrilldown: parentQuery accepts ContentBlock[] and preserves blocks', () => {
+  const blocks = [{ type: 'text', text: 'A' }, { type: 'text', text: 'B' }]
+  const v = M.buildSubagentDrilldown({ parentQuery: blocks })
+  assert.equal(v.inboundQuery.source, 'explicit')
+  assert.equal(v.inboundQuery.text, 'A\nB')
+  assert.equal(v.inboundQuery.blocks, blocks)
+})
+
+test('buildSubagentDrilldown: preserves seq of the seed event when inferring', () => {
+  const v = M.buildSubagentDrilldown({
+    childEvents: [
+      { type: 'assistant/chunk', seq: 5, data: { content: [{ type: 'text', text: 'hello' }] } },
+      { type: 'user/message', seq: 7, data: { content: [{ type: 'text', text: 'seed' }] } },
+    ],
+  })
+  assert.equal(v.inboundQuery.seq, 7)
+})