typebulb 0.9.5 → 0.9.7

package/dist/bulbs/claude.bulb.md

@@ -0,0 +1,3262 @@
+---
+format: typebulb/v1
+name: Claude Bulb
+---
+
+**server.ts**
+
+```ts
+import { existsSync, openSync, readSync, closeSync, statSync, readdirSync, watchFile, unwatchFile, mkdirSync, writeFileSync, readFileSync, unlinkSync } from 'fs'
+import { join } from 'path'
+import { homedir } from 'os'
+import { spawn } from 'child_process'
+import { launchBulbServer, listBulbServers, stopBulbServer, readServerLog, listBulbFiles as listProjectBulbFiles, slugifyBulbName, bulbName, isBulbTrusted, setBulbTrusted, predictBulbTrust } from 'typebulb/servers'
+
+function errorMessage(err: unknown): string {
+  return (err as Error)?.message ?? String(err)
+}
+
+// The bulb tails CC's on-disk JSONL transcript and renders it; it drives nothing.
+// Native only: it mirrors the real ~/.claude transcripts your terminal CC writes.
+// See Specs-Bulbs/Claude-Bulb/Claude-Bulb.md for the architecture.
+
+// Only the fields we read; real lines carry many more.
+interface JsonlEntry {
+  uuid: string
+  type: string
+  isSidechain?: boolean
+  parentUuid?: string
+  timestamp?: string
+  sessionId?: string
+  aiTitle?: string
+  customTitle?: string
+  message?: {
+    id?: string
+    model?: string
+    content?: string | ContentBlock[]
+    usage?: TokenUsage
+  }
+  usage?: TokenUsage
+  // A message queued while CC was mid-turn: stored as type 'attachment' with
+  // the text under attachment.prompt (a string), never re-emitted as a user turn.
+  attachment?: { type?: string; prompt?: unknown; commandMode?: string }
+}
+
+interface ContentBlock {
+  type: string
+  text?: string
+  thinking?: string
+  id?: string
+  name?: string
+  input?: Record<string, unknown>
+  tool_use_id?: string
+  content?: unknown
+  is_error?: boolean
+}
+
+interface TokenUsage {
+  input_tokens?: number
+  output_tokens?: number
+  cache_read_input_tokens?: number
+  cache_creation_input_tokens?: number
+}
+
+type Event =
+  | { type: 'session'; sessionId: string }
+  | { type: 'user'; text: string }
+  | { type: 'assistant'; text: string; thinking: string; tools: { id: string; name: string; input: Record<string, unknown> }[]; live: boolean }
+  | { type: 'tool_result'; id: string; content: string; isError: boolean }
+  | { type: 'cleared' }
+  | { type: 'usage'; in: number; out: number; cached: number; cacheCreate: number }
+
+// Mirror sessionStoragePortable.sanitizePath: non-alphanumeric → '-'.
+// (CC also appends a hash for very long paths; short cwds don't need it.)
+function sanitizePath(p: string): string {
+  return p.replace(/[^a-zA-Z0-9]/g, '-')
+}
+
+// Native only: transcripts come from the real ~/.claude. Everything the bulb
+// writes itself (per-session locks) lives under <cwd>/.claude-bulb/.
+const RUNTIME_DIR = '.claude-bulb'
+const PROJECTS_DIR = join(homedir(), '.claude', 'projects')
+
+const projectDir = (cwd: string) => join(PROJECTS_DIR, sanitizePath(cwd))
+
+type SessionFile = { sessionId: string; file: string; mtime: number }
+
+// The .jsonl session files CC has written for this cwd.
+function sessionFiles(cwd: string): SessionFile[] {
+  const dir = projectDir(cwd)
+  if (!existsSync(dir)) return []
+  let entries: string[]
+  try { entries = readdirSync(dir) } catch { return [] }
+  const out: SessionFile[] = []
+  for (const name of entries) {
+    if (!name.endsWith('.jsonl')) continue
+    const file = join(dir, name)
+    try {
+      const s = statSync(file)
+      if (s.isFile()) out.push({ sessionId: name.slice(0, -'.jsonl'.length), file, mtime: s.mtimeMs })
+    } catch { /* races / permissions — skip */ }
+  }
+  return out
+}
+
+// Multi-bulb mutual exclusion: each bulb heartbeats a per-session lock file
+// (mtime touched every poll) so two bulbs on the same cwd don't both attach to
+// the newest .jsonl. Selection skips sessions with a live foreign-PID lock.
+const LOCKS_DIR = `${RUNTIME_DIR}/locks`
+const LOCK_TTL_MS = 5000                          // claim valid for 5s of mtime staleness
+const LOCK_SWEEP_AGE_MS = 60_000                  // anything older than 1min on boot is junk
+
+function locksDir(cwd: string): string {
+  return join(cwd, LOCKS_DIR)
+}
+function lockPath(cwd: string, sessionId: string): string {
+  return join(locksDir(cwd), `${sessionId}.lock`)
+}
+function isLockLive(cwd: string, sessionId: string): boolean {
+  try {
+    const p = lockPath(cwd, sessionId)
+    if (Date.now() - statSync(p).mtimeMs >= LOCK_TTL_MS) return false
+    // Our own PID doesn't block us: hot-reload wipes state but keeps the PID, so
+    // the prior lock is still "ours" — without this we'd skip our own session.
+    try {
+      const pid = parseInt(readFileSync(p, 'utf8').trim(), 10)
+      if (pid === process.pid) return false
+    } catch { /* unreadable lock body — fall through to "live" */ }
+    return true
+  } catch { return false }                        // missing → not live
+}
+// Synchronous, so we own the lock the instant we decide to attach.
+function claimLock(cwd: string, sessionId: string) {
+  if (!sessionId) return
+  try {
+    mkdirSync(locksDir(cwd), { recursive: true })
+    writeFileSync(lockPath(cwd, sessionId), String(process.pid))
+  } catch (err: unknown) {
+    console.error('[lock] claim failed:', errorMessage(err))
+  }
+}
+// Boot housekeeping: drop dead lock files (liveness is the mtime check at runtime).
+function sweepStaleLocks(cwd: string) {
+  const dir = locksDir(cwd)
+  if (!existsSync(dir)) return
+  let names: string[]
+  try { names = readdirSync(dir) } catch { return }
+  const now = Date.now()
+  for (const n of names) {
+    if (!n.endsWith('.lock')) continue
+    const p = join(dir, n)
+    try {
+      const stat = statSync(p)
+      if (now - stat.mtimeMs > LOCK_SWEEP_AGE_MS) unlinkSync(p)
+    } catch { /* races / permissions — skip */ }
+  }
+}
+
+function toText(content: unknown): string {
+  if (typeof content === 'string') return content
+  if (Array.isArray(content)) {
+    return content.map(b => (typeof b === 'string' ? b : (b as ContentBlock)?.text ?? (b as ContentBlock)?.content ?? JSON.stringify(b))).join('\n')
+  }
+  return content == null ? '' : JSON.stringify(content)
+}
+
+// The bulb never creates sessions — it only tails what the terminal writes.
+// Attachment: fresh boot (nothing attached yet → auto-attach the newest
+// unclaimed .jsonl) / attached (file present, heartbeating) / lost (the file
+// vanished → stay put, never hop to a different live session). Invariant: file
+// and sessionId are always both set or both empty.
+interface State {
+  cwd: string
+  file?: string
+  sessionId: string
+  sessionStartMs: number                   // bulb start time; events newer than this are "live this session"
+  buffer: Event[]
+  partial: string                          // tail leftover (incomplete trailing line)
+  offset: number                           // last byte offset read from `file`
+  totals: { in: number; out: number; cached: number; cacheCreate: number }
+  everAttached: boolean                    // we've committed to ≥1 session; gates the fresh-boot auto-attach
+  // The JSONL is a tree (parentUuid); the live chain is the walk from the latest
+  // leaf to root. entries indexes uuid→entry; chainLastUuid is the last-emitted
+  // leaf, so a drain can tell extension (append) from divergence (rewind, re-emit).
+  entries: Map<string, JsonlEntry>
+  chainLastUuid?: string
+}
+
+// One live instance, constructed eagerly at module load so the rest of the module reads `state`
+// directly with no undefined guard. The side-effecting boot (lock sweep + initial attach) runs at
+// the very bottom of the module instead — it transitively reaches consts declared further down
+// (e.g. INTERNAL_PATTERNS, via the attach drain), which are still in their TDZ up here.
+const state: State = {
+  cwd: process.cwd(),
+  sessionId: '',
+  sessionStartMs: Date.now(),
+  buffer: [],
+  partial: '',
+  offset: 0,
+  totals: { in: 0, out: 0, cached: 0, cacheCreate: 0 },
+  everAttached: false,
+  entries: new Map(),
+}
+
+// existsSync collapses every error to "absent" — a transient Windows stat
+// failure (sharing violation, AV/indexer lock) on a perfectly live file would
+// then read as deletion. Only a confirmed ENOENT counts as gone; any other
+// error keeps the current attachment.
+function fileGone(file: string): boolean {
+  try { statSync(file); return false }
+  catch (err: unknown) { return (err as { code?: string }).code === 'ENOENT' }
+}
+
+// If attached and the file is still there, stay put and heartbeat the lock —
+// never auto-flip to a newer sibling (that independence is the whole point, and
+// it's also how two bulbs would otherwise hijack each other). Otherwise consult
+// nextFileToAttach. Runs on every poll.
+function refreshActive() {
+  const s = state
+  if (s.file && !fileGone(s.file)) {
+    claimLock(s.cwd, s.sessionId)
+    return
+  }
+  const found = nextFileToAttach(s)
+  if (found) attachTo(found)
+}
+
+function nextFileToAttach(s: State): SessionFile | undefined {
+  // Auto-attach ONLY on a fresh boot. Once we've ever attached, a vanished file
+  // means stay put — we never silently hop to a different live session, whether
+  // the attachment was boot-blank or picked.
+  if (s.everAttached) return undefined
+  // A hot reload (watch is on by default — every edit to this bulb reloads it)
+  // or a same-PID restart wipes `state` back to a fresh boot. Without this, boot
+  // re-picks the *newest* file, which is whichever sibling session most recently
+  // wrote — so a result landing in another session silently steals the view. Our
+  // prior incarnation still holds a freshly-heartbeated lock on the session we
+  // were pinned to, so resume that. A genuine relaunch is a new PID with no own
+  // lock and correctly falls through to the newest unclaimed pick.
+  return ownPinnedSession(s.cwd) ?? pickUnclaimedJsonl(s.cwd, () => true)
+}
+
+// The session this PID was pinned to before a state reset: the freshest lock
+// whose body is our own PID and whose mtime is still within LOCK_TTL (so it's a
+// live prior incarnation, not a stale leftover) and whose .jsonl still exists.
+// undefined ⇒ no such pin (true fresh launch, or the pinned file is gone).
+function ownPinnedSession(cwd: string): SessionFile | undefined {
+  const dir = locksDir(cwd)
+  if (!existsSync(dir)) return undefined
+  let names: string[]
+  try { names = readdirSync(dir) } catch { return undefined }
+  let best: { sessionId: string; mtime: number } | undefined
+  for (const n of names) {
+    if (!n.endsWith('.lock')) continue
+    try {
+      const st = statSync(join(dir, n))
+      if (Date.now() - st.mtimeMs >= LOCK_TTL_MS) continue           // stale ⇒ not a live prior incarnation
+      if (parseInt(readFileSync(join(dir, n), 'utf8').trim(), 10) !== process.pid) continue
+      if (!best || st.mtimeMs > best.mtime) best = { sessionId: n.slice(0, -'.lock'.length), mtime: st.mtimeMs }
+    } catch { /* races / unreadable — skip */ }
+  }
+  if (!best) return undefined
+  const file = join(projectDir(cwd), `${best.sessionId}.jsonl`)
+  if (fileGone(file)) return undefined
+  return { sessionId: best.sessionId, file, mtime: best.mtime }
+}
+
+// Newest .jsonl with no live lock that also passes `extra`.
+function pickUnclaimedJsonl(cwd: string, extra: (f: SessionFile) => boolean): SessionFile | undefined {
+  return sessionFiles(cwd)
+    .sort((a, b) => b.mtime - a.mtime)
+    .find(f => !isLockLive(cwd, f.sessionId) && extra(f))
+}
+
+// Single chokepoint for committing to a session file: resets per-session tail
+// state and starts watching. Every path to ATTACHED funnels through here.
+function attachTo(found: { sessionId: string; file: string }) {
+  const s = state
+  if (s.file) { try { unwatchFile(s.file) } catch {} }
+  s.file = found.file
+  s.sessionId = found.sessionId
+  s.everAttached = true
+  s.partial = ''
+  s.offset = 0
+  s.totals = { in: 0, out: 0, cached: 0, cacheCreate: 0 }
+  s.entries = new Map()
+  s.chainLastUuid = undefined
+  s.buffer.push({ type: 'cleared' })
+  s.buffer.push({ type: 'session', sessionId: found.sessionId })
+  claimLock(s.cwd, found.sessionId)        // claim before the drain so siblings skip us
+  drainFile()
+  try { unwatchFile(found.file) } catch {}   // drop a stale watcher from a prior hot-reload import (server.ts re-imports same-PID; else listeners pile up → MaxListeners leak)
+  watchFile(found.file, { interval: 200 }, () => drainFile())
+}
+
+function drainFile() {
+  const s = state
+  if (!s.file) return
+  let size: number
+  try { size = statSync(s.file).size } catch { return }
+  if (size <= s.offset) return
+  let fd: number
+  try { fd = openSync(s.file, 'r') } catch { return }
+  try {
+    const len = size - s.offset
+    const buf = Buffer.alloc(len)
+    let read = 0
+    while (read < len) {
+      const n = readSync(fd, buf, read, len - read, s.offset + read)
+      if (!n) break
+      read += n
+    }
+    s.offset += read
+    s.partial += buf.subarray(0, read).toString('utf8')
+  } finally { closeSync(fd) }
+  // Index the whole batch first (no events yet) so we can find the latest leaf,
+  // then chain-walk to decide extension vs divergence.
+  let latestUuid: string | undefined
+  let nl: number
+  while ((nl = s.partial.indexOf('\n')) >= 0) {
+    const line = s.partial.slice(0, nl)
+    s.partial = s.partial.slice(nl + 1)
+    if (!line.trim()) continue
+    let entry: JsonlEntry
+    try { entry = JSON.parse(line) } catch { continue }
+    if (!entry) continue
+    if (entry.uuid) {
+      s.entries.set(entry.uuid, entry)
+      // Sidechains (sub-agent threads) are their own chains — only main-thread
+      // entries can be the latest leaf.
+      if (!entry.isSidechain) latestUuid = entry.uuid
+    }
+  }
+  if (!latestUuid) return
+  // Walk parentUuid leaf→root. If we pass chainLastUuid, the new entries extend
+  // what we've emitted (common case). If not, a terminal /rewind forked off our
+  // leaf — clear and re-emit so the UI matches CC.
+  const walked: JsonlEntry[] = []                           // leaf → root order
+  let cur: JsonlEntry | undefined = s.entries.get(latestUuid)
+  let foundPrev = false
+  while (cur) {
+    walked.push(cur)
+    if (cur.uuid === s.chainLastUuid) { foundPrev = true; break }
+    cur = cur.parentUuid ? s.entries.get(cur.parentUuid) : undefined
+  }
+  if (foundPrev) {
+    // walked[last] is the prior leaf, already emitted; the rest is new (root→leaf).
+    for (let i = walked.length - 2; i >= 0; i--) processEntry(walked[i])
+  } else {
+    // Divergence — clear so we don't show dead branches / double-count. Skip on
+    // the first drain after attach (attachTo already pushed a cleared).
+    if (s.chainLastUuid !== undefined) {
+      s.buffer.push({ type: 'cleared' })
+      s.buffer.push({ type: 'session', sessionId: s.sessionId })
+      s.totals = { in: 0, out: 0, cached: 0, cacheCreate: 0 }
+    }
+    for (let i = walked.length - 1; i >= 0; i--) processEntry(walked[i])
+  }
+  s.chainLastUuid = latestUuid
+}
+
+// Harness noise to hide from the chat. Status-line markers stay unanchored — they
+// surface wrapped, e.g. "Error: …". The structural envelope tags anchor to the block
+// start: a genuine injection opens with the tag, so a reply that merely quotes one
+// mid-prose isn't dropped whole.
+const INTERNAL_PATTERNS = [
+  /\[Request interrupted by user\b/i,
+  /\[Tool use was interrupted\]/i,
+  /Claude Code returned an error/i,
+  /\[ede_diagnostic\]/i,
+  /^No response requested\.?$/i,
+  /^<task-notification\b/i,                // harness protocol envelopes, not human-facing
+  /^<system-reminder\b/i,
+  /^<ide_[a-z_]+>[\s\S]*<\/ide_[a-z_]+>$/i, // whole IDE-injected context block (opened-file, selection, …)
+]
+function isInternal(text: string): boolean {
+  const t = text.trim()
+  return !!t && INTERNAL_PATTERNS.some(p => p.test(t))
+}
+
+// A real user-authored text block: a `type:'text'` block surviving isInternal — drops synthetic /
+// IDE-context blocks (e.g. <ide_opened_file>) so they're neither rendered nor mistaken for the
+// kickoff prompt. The string-content case (one whole block) is a plain isInternal check at the use
+// site; this is the array shape, shared by applyEntry (the transcript) and readPreview (the picker).
+function isUserTextBlock(b: ContentBlock | undefined): b is ContentBlock & { text: string } {
+  return !!b && b.type === 'text' && typeof b.text === 'string' && !!b.text && !isInternal(b.text)
+}
+
+// Guard the per-entry dispatch: it runs inside the watchFile callback, so an
+// unhandled throw on one malformed entry would crash the whole node process
+// (not just the turn). Skip the bad entry, keep draining the rest of the batch.
+function processEntry(entry: JsonlEntry) {
+  try { applyEntry(entry) }
+  catch (err) { console.error('[claude-bulb] skipped malformed entry:', errorMessage(err)) }
+}
+
+function applyEntry(entry: JsonlEntry) {
+  if (entry.isSidechain) return                   // skip sub-agent threads in the same file
+  const s = state
+  if (entry.type === 'user') {
+    const content = entry.message?.content
+    if (typeof content === 'string') {
+      if (!isInternal(content)) {
+        s.buffer.push({ type: 'user', text: content })
+      }
+    } else if (Array.isArray(content)) {
+      for (const b of content) {
+        if (b?.type === 'tool_result') {
+          s.buffer.push({ type: 'tool_result', id: b.tool_use_id ?? '', content: toText(b.content), isError: !!b.is_error })
+        } else if (isUserTextBlock(b)) {
+          s.buffer.push({ type: 'user', text: b.text })
+        }
+      }
+    }
+  } else if (entry.type === 'attachment' && entry.attachment?.type === 'queued_command') {
+    // A message the user queued while CC was mid-turn. CC records it here, not as
+    // a user turn, and never re-emits it — so without this branch it's lost from
+    // the view. (Other attachment subtypes, e.g. 'selection', stay hidden.)
+    const text = toText(entry.attachment.prompt)   // string in current CC; toText also tolerates older array shapes
+    if (text && !isInternal(text)) {
+      s.buffer.push({ type: 'user', text })
+    }
+  } else if (entry.type === 'assistant') {
+    const content = entry.message?.content
+    const blocks: ContentBlock[] = Array.isArray(content) ? content : []
+    const text = blocks
+      .filter(b => b.type === 'text')
+      .map(b => b.text ?? '')
+      .filter(t => !isInternal(t))                               // drop synthetic / internal blocks
+      .join('')
+    const thinking = blocks.filter(b => b.type === 'thinking').map(b => b.thinking ?? '').join('\n')
+    const tools = blocks
+      .filter(b => b.type === 'tool_use')
+      .map(b => ({ id: b.id ?? '', name: b.name ?? '', input: b.input ?? {} }))
+    if (text || thinking || tools.length) {
+      // live = newer than bulb start; drives auto-expand of fresh edits.
+      const ts = Date.parse(entry.timestamp ?? '')
+      const live = !isNaN(ts) && ts >= s.sessionStartMs
+      s.buffer.push({ type: 'assistant', text, thinking, tools, live })
+    }
+    const usage = entry.message?.usage ?? entry.usage
+    if (usage) {
+      s.totals.in += usage.input_tokens ?? 0
+      s.totals.out += usage.output_tokens ?? 0
+      s.totals.cached += usage.cache_read_input_tokens ?? 0
+      s.totals.cacheCreate += usage.cache_creation_input_tokens ?? 0
+      s.buffer.push({ type: 'usage', ...s.totals })
+    }
+  }
+  // Ignore: mode, permission-mode, file-history-snapshot, system metadata, summary, etc.
+}
+
+// ---- exported RPC surface (callable from the browser as tb.server.<name>) ----
+
+export async function info() {
+  const s = state
+  // pid lets the breakouts UI exclude this host's own running server from the list. (Excluding our
+  // own *file* row from the launcher is done in listBulbFiles, by content — see there.)
+  return { cwd: s.cwd, pid: process.pid }
+}
+
+export async function poll(cursor: number) {
+  const s = state
+  refreshActive()
+  return { events: s.buffer.slice(cursor), cursor: s.buffer.length, working: chainWorking(s) }
+}
+
+// "CC is mid-turn" — derived purely from the live chain, no timing heuristics.
+// Judged from the last *conversational* entry, skipping CC's bookkeeping lines
+// (queue-operation etc. carry a uuid and can briefly be the literal leaf). It's
+// a user entry through the whole frozen-buffering window (CC flushes your prompt
+// but not its own work yet — see the spec's flush note), and an assistant entry
+// stays "working" while a tool_use has no matching tool_result. It goes idle
+// only once an assistant entry has every tool resolved — the final answer landed.
+function chainWorking(s: State): boolean {
+  let leaf: JsonlEntry | undefined           // entries is insertion- (= file-) ordered
+  for (const e of s.entries.values()) if (e.type === 'user' || e.type === 'assistant') leaf = e
+  if (!leaf) return false
+  if (leaf.type === 'user') return true
+  const blocks = Array.isArray(leaf.message?.content) ? leaf.message!.content as ContentBlock[] : []
+  const toolUseIds = blocks.filter(b => b.type === 'tool_use').map(b => b.id)
+  if (toolUseIds.length === 0) return false
+  const resolved = new Set<string>()
+  for (const e of s.entries.values()) {
+    const c = e.message?.content
+    if (Array.isArray(c)) for (const b of c) if (b.type === 'tool_result' && b.tool_use_id) resolved.add(b.tool_use_id)
+  }
+  return toolUseIds.some(id => id && !resolved.has(id))
+}
+
+// ---- session picker ----
+
+// The session's display title for the dropdown / tab. Mirrors Claude Code's own precedence: a user
+// rename (`custom-title`) beats the Haiku-generated `ai-title`, which beats the kickoff user prompt.
+// CC appends a fresh ai-title as the session evolves (never rewrites), so the latest wins — read the
+// tail (most recent) before the head, then fall back to the first user prompt. Read-only: CC writes
+// these entries; we only prefer reading them — no inference here (Invariant 1).
+function readPreview(file: string): string {
+  let fd: number
+  try { fd = openSync(file, 'r') } catch { return '' }
+  try {
+    const CAP = 64 * 1024
+    let size = CAP
+    try { size = statSync(file).size } catch {}
+    const readChunk = (pos: number, len: number): string => {
+      if (len <= 0) return ''
+      const buf = Buffer.alloc(len)
+      const n = readSync(fd, buf, 0, len, pos)
+      return buf.subarray(0, n).toString('utf8')
+    }
+    // Latest non-empty title of `type` in a chunk (last wins, since CC only appends). The substring
+    // pre-check skips JSON.parse on the message lines that dominate the window.
+    const lastTitle = (text: string, type: string, field: 'aiTitle' | 'customTitle'): string => {
+      let found = ''
+      for (const line of text.split('\n')) {
+        if (!line.includes(`"${type}"`)) continue
+        let e: JsonlEntry
+        try { e = JSON.parse(line) } catch { continue }
+        const v = e?.[field]
+        if (e?.type === type && typeof v === 'string' && v) found = v
+      }
+      return found
+    }
+    // Head holds the kickoff prompt + an early title; the tail holds the most recent title (it can
+    // sit past the head in a long session). The tail read is skipped when the file fits one window.
+    const head = readChunk(0, Math.min(CAP, size))
+    const tail = size > CAP ? readChunk(size - CAP, CAP) : ''
+    const title =
+      lastTitle(tail, 'custom-title', 'customTitle') || lastTitle(head, 'custom-title', 'customTitle') ||
+      lastTitle(tail, 'ai-title', 'aiTitle') || lastTitle(head, 'ai-title', 'aiTitle')
+    if (title) return title.replace(/\s+/g, ' ').trim().slice(0, 200)
+    // No title yet (a short or older session): fall back to the first real user turn from the head.
+    for (const line of head.split('\n')) {
+      if (!line.trim()) continue
+      let e: JsonlEntry
+      try { e = JSON.parse(line) } catch { continue }
+      if (!e || e.isSidechain || e.type !== 'user') continue
+      const content = e.message?.content
+      let extracted = ''
+      if (typeof content === 'string') {
+        if (!isInternal(content)) extracted = content
+      } else if (Array.isArray(content)) {
+        // Concatenate the real user-text blocks; isUserTextBlock drops synthetic/IDE-context ones so
+        // an "<ide_opened_file>" entry isn't mistaken for the kickoff prompt — we fall through to it.
+        extracted = content.filter(isUserTextBlock).map(b => b.text).join(' ')
+      }
+      const cleaned = extracted.replace(/\s+/g, ' ').trim()
+      // Strip the fixed reincarnation lead-in so those sessions surface their distinctive summary.
+      if (cleaned) {
+        const stripped = cleaned.replace(/^Continuing from a prior session\. Here is the summary of our work so far:\s*/i, '').trim()
+        return (stripped || cleaned).slice(0, 200)
+      }
+    }
+    return ''
+  } finally { closeSync(fd) }
+}
+
+export async function listSessions() {
+  return sessionFiles(state.cwd)
+    .sort((a, b) => b.mtime - a.mtime)
+    .map(({ sessionId, file, mtime }) => ({ sessionId, mtime, preview: readPreview(file) }))
+}
+
+export async function attach(sessionId: string) {
+  const s = state
+  const file = join(projectDir(s.cwd), `${sessionId}.jsonl`)
+  if (!existsSync(file)) return { ok: false, error: 'session not found' }
+  if (file === s.file) return { ok: true }
+  attachTo({ sessionId, file })
+  return { ok: true }
+}
+
+// ---- editor integration ----
+
+export async function openFile(filePath: string, line?: number) {
+  // shell:true so Windows resolves `code.cmd`; detached+unref so the editor
+  // doesn't tie to the bulb's lifetime. `-g file:line` jumps to a cited line.
+  const args = line ? ['-g', `${filePath}:${line}`] : [filePath]
+  const proc = spawn('code', args, { shell: true, detached: true, stdio: 'ignore' })
+  proc.on('error', err => console.error('[claude-bulb] code launch failed:', err?.message ?? err))
+  proc.unref()
+  return { ok: true }
+}
+
+// ---- breakout: promote an embedded bulb to a standalone file + launch it ----
+
+// The filename comes from the bulb's own `name:` frontmatter, slugified (slugifyBulbName,
+// the typebulb capability) — no prompt, no guess. The host owns only *where* the file lands.
+export async function breakout(source: string) {
+  const cwd = state.cwd
+  // Bulbs land in a `typebulbs/` folder (created on demand), keeping the project
+  // root clean and mirroring the repo's own convention.
+  const dir = join(cwd, 'typebulbs')
+  mkdirSync(dir, { recursive: true })
+  const slug = slugifyBulbName(source)
+  // Never clobber a file we didn't write: an identical existing file is reused
+  // (idempotent relaunch); a name clash with different content takes the next -N.
+  let file = `${slug}.bulb.md`
+  for (let n = 2; existsSync(join(dir, file)) && readFileSync(join(dir, file), 'utf8') !== source; n++) {
+    file = `${slug}-${n}.bulb.md`
+  }
+  const path = join(dir, file)
+  if (!existsSync(path)) writeFileSync(path, source)
+  const rel = join('typebulbs', file)
+  // The launch itself — cross-platform detached spawn, idempotency (one server per file,
+  // so a repeated breakout re-attaches instead of double-spawning), and registration so
+  // listBreakouts/stopBreakout can find and stop it — is the typebulb capability. The host
+  // owns only the file policy above. cwd = project root so the bulb resolves its rel path.
+  const server = await launchBulbServer(rel, { cwd, open: true })
+  return { ok: true, file: rel, pid: server.pid, url: server.url }
+}
+
+// The running bulb dev servers for the status-bar pill — scoped to *this project* (state.cwd), the
+// same project whose sessions and files we mirror. The registry is machine-global, but a viewer for
+// one CC project shouldn't surface another project's bulbs (or another project's claude.bulb); the
+// cwd scope mirrors the file walk and keeps projects from bleeding into each other. listBulbServers
+// prunes dead entries on read; the UI still drops this host's own pid (see info()).
+export async function listBreakouts() {
+  return listBulbServers(state.cwd)
+}
+
+// Stop one by pid (SIGTERM + deregister). Idempotent — an already-gone pid is a no-op.
+export async function stopBreakout(pid: number) {
+  await stopBulbServer(pid)
+  return { ok: true }
+}
+
+// ---- launcher: the project's .bulb.md files, launchable from the status bar ----
+
+// ---- per-bulb trust memory ----
+//
+// Trust memory now lives in the CLI's store (isBulbTrusted/setBulbTrusted from typebulb/servers),
+// not here — so the launcher toggle, a bare `typebulb <file>`, and `typebulb trust` all share one
+// source of truth (Specs/Typebulb-CLI-Trust.md). The launcher just reads/writes that store; it no
+// longer keeps its own `.claude-bulb/trust.json`.
+
+// The project's *.bulb.md candidates for the launcher. The walk + name extraction is the typebulb
+// capability (listProjectBulbFiles); the host overlays each bulb's remembered tier from the store.
+//
+// We drop the mirror itself and any copy of it (the monorepo carries a built dist/ snapshot beside
+// the source, and the walk finds both) by matching our own frontmatter *name*. Name beats path or
+// content here: it's stale-proof (survives source edits the dist/ copy hasn't caught up to) and is
+// exactly what the walk already extracts. The CLI hands us our path in TYPEBULB_BULB_PATH; bulbName
+// reads our title from it. A user's own, differently-named bulb still lists.
+export async function listBulbFiles() {
+  const cwd = state.cwd
+  const self = process.env.TYPEBULB_BULB_PATH
+  let selfName: string | undefined
+  try { if (self) selfName = bulbName(readFileSync(self, 'utf8').slice(0, 1024)) } catch { /* unnamed/unreadable ⇒ exclude nothing */ }
+  return listProjectBulbFiles(cwd)
+    .filter(f => !selfName || f.name !== selfName)
+    .map(f => ({ ...f, trusted: isBulbTrusted(f.path) }))
+}
+
+// Launch (or re-attach to) a dev server for an existing project bulb — the same node capability
+// breakout uses, minus the file write. Idempotent per file. `trust` is the explicit choice (the
+// elevation modal / toggle); passing it persists the decision to the CLI store. When omitted, the
+// spawned server resolves the remembered tier itself (its main() consults the same store) — so the
+// effective-tier decision lives in one place; we just report the tier it actually came up in.
+export async function launchBulb(file: string, trust?: boolean) {
+  const cwd = state.cwd
+  if (trust !== undefined) setBulbTrusted(file, trust)        // explicit decision persists
+  const server = await launchBulbServer(file, { cwd, open: true, trust })
+  return { ok: true, file: server.file, pid: server.pid, url: server.url, trust: !!server.trust }
+}
+
+// Scan a bulb for privileged tb.* usage BEFORE launching, so the launcher can raise the trust
+// offer at the decision point rather than after the spawned server registers (Specs/Typebulb-CLI-
+// Trust.md "Proactive prediction"). Returns a capability label or undefined; a hint, never a gate.
+export async function predictTrustOf(file: string) {
+  return { cap: await predictBulbTrust(file) }
+}
+
+// Set (or clear) a bulb's remembered trust decision (the launcher's trust toggle) — delegates to the
+// CLI's shared store. Writing the memory only takes effect on the next launch; a running server's tier
+// is fixed at process start, so to apply it now the launcher stops and relaunches that server itself.
+export async function setBulbTrust(file: string, trust: boolean) {
+  setBulbTrusted(file, trust)
+  return { ok: true }
+}
+
+// Tail a running server's console (its `<pid>.log`). New bytes since `offset`; the server
+// writes the file, any host reads it — the same drain-from-offset shape as the transcript.
+export async function readBulbLog(pid: number, offset: number) {
+  return readServerLog(pid, offset)
+}
+
+// Boot housekeeping, run once after the whole module is initialised (so the attach drain can reach
+// every const it needs): clear crashed-bulb lock claims, then attach to the newest session. A hot
+// reload re-imports the module and re-runs this fresh boot (see nextFileToAttach for what it picks).
+sweepStaleLocks(state.cwd)
+refreshActive()
+```
+
+**code.tsx**
+
+```tsx
+import MarkdownIt from 'markdown-it'
+import katex from 'katex'
+import DOMPurify from 'dompurify'
+import { renderMermaidSVG } from 'beautiful-mermaid'
+import { createBulbFrame, stripFrontmatter } from 'typebulb'
+import hljs from 'highlight.js/lib/core'
+import hljsTypescript from 'highlight.js/lib/languages/typescript'
+import hljsXml from 'highlight.js/lib/languages/xml'
+import hljsCss from 'highlight.js/lib/languages/css'
+import hljsJson from 'highlight.js/lib/languages/json'
+import hljsMarkdown from 'highlight.js/lib/languages/markdown'
+import hljsPlaintext from 'highlight.js/lib/languages/plaintext'
+import {
+  App, Component, div, span, a, button, pre, details, summary, inputText, svg, path, rect,
+} from 'domeleon'
+
+const md = new MarkdownIt({ html: false, linkify: true, breaks: true })
+
+// Syntax highlighting for the code view: a custom hljs core build registering only
+// the grammars a bulb actually uses — keeps the dep to ~tens of KB vs hljs's full
+// ~1MB bundle. All imports are bare specifiers, so they resolve through typebulb's
+// import map and the CLI's disk-cached proxy; nothing hits esm.sh directly. No hljs
+// theme stylesheet either — token colors come from our own CSS vars (.bulb-code
+// .hljs-*) so they follow the host light/dark theme instead of baking a palette.
+hljs.registerLanguage('typescript', hljsTypescript)
+hljs.registerLanguage('xml', hljsXml)
+hljs.registerLanguage('css', hljsCss)
+hljs.registerLanguage('json', hljsJson)
+hljs.registerLanguage('markdown', hljsMarkdown)
+hljs.registerLanguage('plaintext', hljsPlaintext)
+
+// Fence tag → registered grammar. tsx/ts fold into typescript (covers the TS
+// superset; JSX is close enough for a read view), html into xml. Anything unknown
+// or absent falls back to escaped plaintext (always registered, so never throws).
+const HLJS_LANG: Record<string, string> = {
+  ts: 'typescript', tsx: 'typescript', typescript: 'typescript',
+  html: 'xml', xml: 'xml',
+  css: 'css', json: 'json',
+  md: 'markdown', markdown: 'markdown',
+  text: 'plaintext', txt: 'plaintext', plaintext: 'plaintext',
+}
+function highlightCode(code: string, lang: string): string {
+  const name = HLJS_LANG[(lang || '').toLowerCase()] ?? 'plaintext'
+  return `<pre class="hljs"><code>${hljs.highlight(code, { language: name }).value}</code></pre>`
+}
+
+// Plain markdown for the code view: renders a bulb's .bulb.md source (file labels +
+// fenced code) with NONE of md's custom fence rules — crucially not the ````bulb````
+// rule, which would mount a live sub-bulb inside a *code* view (bulb-in-bulb is real).
+// Defaults plus the hljs highlight hook above.
+const mdPlain = new MarkdownIt({ html: false, linkify: false, breaks: false, highlight: highlightCode })
+
+// markdown-it v14 ships no type declarations, so rather than `any` everywhere we type just the
+// renderer surface our rules touch: the token fields/methods they read, the inline-state methods
+// mathRule drives, and the renderer's renderToken. `env`/`opts` stay opaque (`unknown`) — the rules
+// only ever pass them through, never inspect them.
+interface MdToken { info?: string; content: string; markup?: string; meta?: { display?: boolean }; attrSet(name: string, value: string): void }
+interface MdRenderer { renderToken(tokens: MdToken[], idx: number, opts: unknown): string }
+interface MdInlineState { src: string; pos: number; push(type: string, tag: string, nesting: number): MdToken }
+type MdRenderRule = (tokens: MdToken[], idx: number, opts: unknown, env: unknown, self: MdRenderer) => string
+
+// Links open in a new tab: the bulb is a dashboard, in-place nav would lose
+// scroll / session. rel=noopener is standard tab-napping hygiene.
+const defaultLinkOpen: MdRenderRule = md.renderer.rules.link_open
+  ?? ((tokens, idx, opts, _env, self) => self.renderToken(tokens, idx, opts))
+md.renderer.rules.link_open = (tokens: MdToken[], idx: number, opts: unknown, env: unknown, self: MdRenderer) => {
+  tokens[idx].attrSet('target', '_blank')
+  tokens[idx].attrSet('rel', 'noopener noreferrer')
+  return defaultLinkOpen(tokens, idx, opts, env, self)
+}
+
+// Math is a markdown-it inline rule registered BEFORE `escape` — it must claim
+// the raw TeX before markdown-it strips the \( \) \[ \] backslashes or mangles
+// `\\` / `_` / `*` inside the formula. Code/fenced spans are already tokenized, so
+// math inside them is skipped for free.
+const MATH_DELIMS = [
+  { open: '$$', close: '$$', display: true },
+  { open: '$', close: '$', display: false },
+  { open: '\\[', close: '\\]', display: true },
+  { open: '\\(', close: '\\)', display: false },
+]
+
+function mathRule(state: MdInlineState, silent: boolean): boolean {
+  const src = state.src
+  const start = state.pos
+  for (const d of MATH_DELIMS) {
+    if (!src.startsWith(d.open, start)) continue
+    const from = start + d.open.length
+    const to = src.indexOf(d.close, from)
+    if (to < 0) continue
+    const content = src.slice(from, to)
+    if (!content.trim()) continue
+    // Bare-`$` currency guard: skip "$5 and $6" — opener not followed by space,
+    // closer not preceded by space, and no digit immediately after the close.
+    if (d.open === '$' &&
+        (/\s/.test(src[from] ?? '') || /\s/.test(src[to - 1] ?? '') || /\d/.test(src[to + 1] ?? ''))) continue
+    if (!silent) {
+      const token = state.push('math', 'span', 0)
+      token.content = content
+      token.markup = d.open
+      token.meta = { display: d.display }
+    }
+    state.pos = to + d.close.length
+    return true
+  }
+  return false
+}
+md.inline.ruler.before('escape', 'math', mathRule)
+md.renderer.rules.math = (tokens: MdToken[], idx: number) => {
+  const t = tokens[idx]
+  try { return katex.renderToString(t.content, { displayMode: !!t.meta?.display, throwOnError: false }) }
+  catch { return md.utils.escapeHtml(t.markup + t.content + t.markup) }
+}
+
+// beautiful-mermaid decodes only XML + numeric entities (decodeXML), so named HTML
+// entities — &nbsp;, &mdash;, … — survive undecoded and then render as literal
+// text. Decode the full named set first; the library's pass is then a no-op.
+function decodeHtmlEntities(s: string): string {
+  const ta = document.createElement('textarea')
+  ta.innerHTML = s
+  return ta.value
+}
+
+// ```mermaid``` fences render to inline SVG. A parse error falls through to the
+// default code-block rendering, so an unsupported diagram degrades to readable
+// source rather than a broken message.
+const defaultFence: MdRenderRule = md.renderer.rules.fence
+  ?? ((tokens, idx, opts, _env, self) => self.renderToken(tokens, idx, opts))
+md.renderer.rules.fence = (tokens: MdToken[], idx: number, opts: unknown, env: unknown, self: MdRenderer) => {
+  const t = tokens[idx]
+  const lang = (t.info ?? '').trim().toLowerCase()
+  // Note: no `bulb` case here. Live embeds are split out of the text before markdown runs
+  // (splitBulbSegments → BulbEmbed), so a ````bulb```` fence reaching markdown is illustrative
+  // source — it falls through to defaultFence like any other unrecognised fence.
+  // ```svg``` fences embed raw SVG. Same trust level as the rest of the assistant
+  // markdown we render, but raw SVG can carry <script>/onload/<foreignObject>, so
+  // it goes through DOMPurify's svg profile first — geometry survives, the script
+  // surface is stripped. Lets the agent draw anything (smiley, plot from an
+  // equation) without an iframe, since it's static markup, not executed code.
+  if (lang === 'svg') {
+    return `<div class="svg-embed">${DOMPurify.sanitize(t.content, { USE_PROFILES: { svg: true, svgFilters: true } })}</div>`
+  }
+  if (lang === 'mermaid') {
+    try {
+      // The library's internal theme vars share names with the bulb's (--fg/--bg/
+      // --muted/--border/--accent), so passing var(--fg) here would emit a
+      // self-referential `--fg: var(--fg)` on the SVG — a CSS cycle that resolves
+      // to invalid. The --mm-* aliases (styles.css) break the cycle, still themed.
+      const svg = renderMermaidSVG(decodeHtmlEntities(t.content), {
+        // bg backs the label mask-rects (edge/loop labels); without it they default
+        // to white and wash out in dark mode. transparent keeps the canvas clear.
+        bg: 'var(--mm-bg)',
+        fg: 'var(--mm-fg)',
+        line: 'var(--mm-line)',
+        accent: 'var(--mm-accent)',
+        muted: 'var(--mm-muted)',
+        surface: 'var(--mm-surface)',
+        border: 'var(--mm-border)',
+        font: 'system-ui, -apple-system, "Segoe UI", sans-serif',
+        transparent: true,
+      })
+      return `<div class="mermaid">${svg}</div>`
+    } catch { /* fall through to a plain code block */ }
+  }
+  return defaultFence(tokens, idx, opts, env, self)
+}
+
+// Author classDef/style colors render as literal fill/stroke/color that override
+// the theme, freezing a light-mode palette into dark mode. The library has no flag
+// to suppress this, and its prop parser splits on every comma, so a color-mix() fed
+// through the source is shredded — we have to blend post-render instead. The
+// library's own colors are var(--_…), which the literal-color test skips.
+const isLiteralColor = (v: string | null): v is string =>
+  !!v && !v.startsWith('var(') && !v.startsWith('url(') && v !== 'none' && v !== 'transparent'
+
+function themeMermaidNodes(root: Element) {
+  for (const el of root.querySelectorAll<SVGElement>('.mermaid g.node [fill], .mermaid g.node [stroke]')) {
+    const fill = el.getAttribute('fill')
+    if (isLiteralColor(fill)) {
+      // Text → themed fg for legibility; shape → keep the hue, mixed mostly into bg.
+      el.setAttribute('fill', el.tagName.toLowerCase() === 'text'
+        ? 'var(--mm-fg)'
+        : `color-mix(in srgb, ${fill} 25%, var(--mm-bg))`)
+    }
+    const stroke = el.getAttribute('stroke')
+    if (isLiteralColor(stroke)) {
+      el.setAttribute('stroke', `color-mix(in srgb, ${stroke} 55%, var(--mm-fg))`)
+    }
+  }
+}
+
+// A relative-path link in assistant markdown is a local file citation (optionally
+// with a #Lnnn line anchor): open it in the editor, not the browser — the bulb is
+// served from the project root, so the browser would GET the path and 404. Links
+// with a scheme (http, mailto, …) fall through to the default new-tab behavior.
+function onMarkdownClick(e: Event) {
+  const anchor = (e.target as Element | null)?.closest('a')
+  if (!anchor) return
+  const href = anchor.getAttribute('href') ?? ''
+  if (!href || href.includes('://') || href.startsWith('//') || href.startsWith('#') || /^(mailto|tel):/i.test(href)) return
+  e.preventDefault()
+  const hashAt = href.indexOf('#')
+  const path = hashAt >= 0 ? href.slice(0, hashAt) : href
+  const lineMatch = hashAt >= 0 ? /^L(\d+)/.exec(href.slice(hashAt + 1)) : null
+  tb.server.openFile(decodeURIComponent(path), lineMatch ? parseInt(lineMatch[1], 10) : undefined)
+}
+
+// Render markdown into the element via innerHTML. The click handler is bound natively here, not via
+// domeleon's `onClick`: the anchors are raw innerHTML the vdom never sees, so a delegated handler
+// wouldn't fire. onMarkdownClick is a stable ref, so re-mounts don't stack duplicate listeners.
+const renderMarkdown = (text: string) => (el: Element) => {
+  try {
+    el.innerHTML = md.render(text)
+    themeMermaidNodes(el)
+  } catch {
+    ;(el as HTMLElement).textContent = text
+  }
+  el.addEventListener('click', onMarkdownClick)
+}
+
+// A user prompt's @mentions become clickable links. The lookbehind requires a word
+// boundary before the @ so an email's @ (foo@bar.com) isn't mistaken for a mention.
+// `:` is in the class so Windows drive paths (@C:\dir\file) match instead of stopping
+// at the colon. atMentionLink then routes each match.
+const AT_MENTION = /(?<=^|\s)@[\w./\\:-]+/g
+
+// A path separator or dot means file citation (relative-path link → editor, via
+// onMarkdownClick). A bare word matching X's handle grammar ([A-Za-z0-9_], ≤15) goes
+// to x.com — for this tool's users a plain @name is far more often a handle than an
+// extensionless filename. The ://-bearing x.com link falls through to the new-tab rule.
+const atMentionLink = (m: string): string => {
+  const body = m.slice(1)
+  if (/^[A-Za-z0-9_]{1,15}$/.test(body)) return `[${m}](https://x.com/${body})`
+  return `[${m}](${body})`
+}
+
+// User prompts render as markdown, same as the assistant. Two pre-passes first:
+// @mentions are rewritten to links (see atMentionLink), and merged consecutive sends
+// (see applyUser) are joined by a thematic break so the bubble still reads as one turn.
+const userMarkdown = (msg: Msg) => {
+  const segs = msg.segments ?? [msg.text]
+  const src = segs.join('\n\n---\n\n').replace(AT_MENTION, atMentionLink)
+  return renderMarkdown(src)
+}
+
+// Split an assistant message into ordered markdown chunks and live ````bulb```` sources, using
+// markdown-it's own parser (md.parse) rather than a hand-rolled fence regex — the same tokenizer
+// that renders the prose, so nested ``` fences and fence-length rules are handled for free. A
+// `fence` token tagged `bulb` carries its body in `token.content`; `token.map` gives its line span
+// so the surrounding prose slices out cleanly. The caller turns each bulb source into a BulbEmbed.
+type BulbSegment = { kind: 'md'; text: string } | { kind: 'bulb'; source: string }
+function splitBulbSegments(text: string): BulbSegment[] {
+  const lines = text.split('\n')
+  const segs: BulbSegment[] = []
+  let cursor = 0
+  for (const t of md.parse(text, {})) {
+    if (t.type === 'fence' && (t.info ?? '').trim().toLowerCase() === 'bulb' && t.map) {
+      const [start, end] = t.map
+      if (start > cursor) segs.push({ kind: 'md', text: lines.slice(cursor, start).join('\n') })
+      segs.push({ kind: 'bulb', source: t.content })
+      cursor = end
+    }
+  }
+  if (cursor < lines.length) segs.push({ kind: 'md', text: lines.slice(cursor).join('\n') })
+  return segs
+}
+
+// Mirror of the server's Event union (the RPC boundary is untyped). Keep in sync.
+type ServerEvent =
+  | { type: 'session'; sessionId: string }
+  | { type: 'user'; text: string }
+  | { type: 'assistant'; text: string; thinking: string; tools: { id: string; name: string; input: Record<string, unknown> }[]; live: boolean }
+  | { type: 'tool_result'; id: string; content: string; isError: boolean }
+  | { type: 'cleared' }
+  | { type: 'usage'; in: number; out: number; cached: number; cacheCreate: number }
+
+interface Tool { id: string; name: string; input: Record<string, unknown>; result?: string; isError: boolean }
+// `segments` is set only when consecutive user sends are merged into one bubble. `body` is set
+// only when an assistant message contains live ````bulb```` embeds: the text split into markdown
+// chunks (string) and BulbEmbed components, rendered in order in place of the single markdown div.
+interface Msg { id: number; role: 'user' | 'assistant'; text: string; thinking: string; tools: Tool[]; copy?: CopyButton; segments?: string[]; body?: (string | BulbEmbed)[] }
+
+// Tool inputs are heterogeneous JSON; narrow to string at the point of use.
+const asStr = (v: unknown): string | undefined => (typeof v === 'string' ? v : undefined)
+
+function toolSummary(input: Record<string, unknown>): string {
+  if (!input || typeof input !== 'object') return ''
+  return asStr(input.command) ?? asStr(input.file_path) ?? asStr(input.path) ?? asStr(input.pattern) ?? asStr(input.query) ?? asStr(input.url) ?? asStr(input.skill) ?? asStr(input.description) ?? ''
+}
+
+// File-aware tools whose path should open in VS Code / Cursor on click.
+const FILE_TOOLS = new Set(['Read', 'Edit', 'Write', 'MultiEdit', 'NotebookEdit', 'Glob', 'Grep'])
+
+// Edit tools whose diff is interesting enough to auto-expand in the live session.
+const EDIT_TOOLS = new Set(['Edit', 'Write', 'MultiEdit', 'NotebookEdit'])
+
+function filePathOf(toolName: string, input: Record<string, unknown>): string | undefined {
+  if (!FILE_TOOLS.has(toolName) || !input || typeof input !== 'object') return undefined
+  return (asStr(input.file_path) ?? asStr(input.path)) || undefined
+}
+
+// Normalize each edit tool's input to (old → new) hunks. undefined = no diff view.
+type Hunk = { old?: string; new?: string }
+function diffHunks(t: Tool): Hunk[] | undefined {
+  const i = t.input ?? {}
+  switch (t.name) {
+    case 'Edit':         return [{ old: asStr(i.old_string), new: asStr(i.new_string) }]
+    case 'Write':        return [{ new: asStr(i.content) }]
+    case 'NotebookEdit': return [{ new: asStr(i.new_source) }]
+    case 'MultiEdit':    return Array.isArray(i.edits)
+      ? i.edits.map((e: { old_string?: string; new_string?: string }) => ({ old: e?.old_string, new: e?.new_string }))
+      : undefined
+    default:             return undefined
+  }
+}
+
+const TURN_PALETTE_SIZE = 5
+const turnClassFor = (i: number) => `turn-${i % TURN_PALETTE_SIZE}`
+
+// One-line summary of a turn's collapsed (intermediate) bubbles: step count +
+// tool tally, e.g. "5 steps · Read, Edit ×2, Bash". Pure data, no inference.
+function summarizeSteps(msgs: Msg[]): string {
+  const counts = new Map<string, number>()
+  for (const m of msgs) for (const t of m.tools) counts.set(t.name, (counts.get(t.name) ?? 0) + 1)
+  const tally = [...counts].map(([n, c]) => (c > 1 ? `${n} ×${c}` : n)).join(', ')
+  const n = msgs.length
+  return `${n} step${n === 1 ? '' : 's'}${tally ? ` · ${tally}` : ''}`
+}
+
+function relTime(ms: number): string {
+  const d = Math.max(0, Date.now() - ms)
+  if (d < 60_000) return 'now'
+  if (d < 3_600_000) return `${Math.floor(d / 60_000)}m`
+  if (d < 86_400_000) return `${Math.floor(d / 3_600_000)}h`
+  if (d < 7 * 86_400_000) return `${Math.floor(d / 86_400_000)}d`
+  return new Date(ms).toLocaleDateString()
+}
+
+function formatTokens(n: number): string {
+  if (n < 1000) return `${n}`
+  if (n < 10_000) return `${(n / 1000).toFixed(1)}k`
+  if (n < 1_000_000) return `${Math.round(n / 1000)}k`
+  return `${(n / 1_000_000).toFixed(1)}M`
+}
+
+function truncate(s: string, max: number): string {
+  return s.length > max ? s.slice(0, max).trimEnd() + '…' : s
+}
+
+// Shared filter input + clear (×) for the bulb launcher and the session picker — one copy of the
+// filter chrome (the bulb-local analogue of client's uiHelpers/searchBox; the bulb can't import
+// that). The host owns the value (it drives the filtered list + highlight) and the key handling
+// (Enter/highlight semantics differ per menu), so those come in as props.
+function searchFilter(opts: {
+  target: Component
+  prop: () => string
+  id: string
+  placeholder: string
+  hasValue: boolean
+  onKeyDown: (e: KeyboardEvent) => void
+  onClear: () => void
+}) {
+  return div({ class: 'bulb-filter-control' },
+    inputText({
+      target: opts.target,
+      prop: opts.prop,
+      id: opts.id,
+      // Keydown (not keyup) so arrows can preventDefault and repeat; the host decides what each does.
+      attrs: { class: 'bulb-filter', placeholder: opts.placeholder, ariaLabel: opts.placeholder, onKeyDown: opts.onKeyDown },
+    }),
+    opts.hasValue
+      ? button({ class: 'bulb-filter-clear', type: 'button', title: 'Clear filter', ariaLabel: 'Clear filter',
+          onClick: (e: MouseEvent) => { e.stopPropagation(); opts.onClear() } }, '×')
+      : null,
+  )
+}
+
+// Outside-click closer. Deferred via setTimeout so the opening click doesn't
+// immediately fire it; `armed` covers disarm racing ahead of the addEventListener.
+function armOutsideClose(keepOpenSelector: string, onOutside: () => void): () => void {
+  let armed = true
+  const handler = (e: MouseEvent) => {
+    if ((e.target as Element | null)?.closest(keepOpenSelector)) return
+    onOutside()
+  }
+  setTimeout(() => { if (armed) document.addEventListener('click', handler) }, 0)
+  return () => { armed = false; document.removeEventListener('click', handler) }
+}
+
+// ---- status-bar pill base classes ----
+
+// A status-bar chip that toggles one upward popover. Centralises the popup lifecycle the three pills
+// share: single-popup coordination (closePopups dismisses the others as one opens) and the deferred
+// outside-click closer. Subclasses own the chip + popover view and set keepOpenSelector (the wrapper
+// the outside-click closer treats as "inside"); they reset per-open state in onClosed.
+abstract class StatusPill extends Component {
+  open = false
+  #disarm?: (() => void)
+  protected abstract keepOpenSelector: string
+
+  get parent() { return this.ctx.parent as unknown as Root }
+
+  // Common open prologue: dismiss any sibling popup, then mark open. A subclass's show() calls this,
+  // adds its own focus / data load, then calls armClose() once it's ready for the outside-click closer.
+  protected beginOpen() {
+    this.parent.closePopups(this)
+    this.open = true
+  }
+
+  // Arm (or re-arm) the deferred outside-click closer for this pill's wrapper.
+  protected armClose() {
+    this.#disarm?.()
+    this.#disarm = armOutsideClose(this.keepOpenSelector, () => this.close())
+  }
+
+  close() {
+    this.#disarm?.(); this.#disarm = undefined
+    if (!this.open) return
+    this.open = false
+    this.onClosed()
+    this.update()
+  }
+
+  // Reset per-open state on close (filter / highlight / drilled-in views). Default: nothing.
+  protected onClosed() {}
+}
+
+// A StatusPill whose popover is a filter box over a keyboard-navigable list (the session picker and
+// the bulb launcher). Owns the filter text, the highlight cursor, and the shared combobox key
+// handling; subclasses supply the list (itemCount/listEl), the activation action (onActivate), and
+// the filter input's id (filterId).
+abstract class ComboboxPill extends StatusPill {
+  filter = ''
+  highlighted = 0                          // keyboard cursor into the filtered list (arrows move it, Enter activates)
+
+  protected abstract filterId: string
+  protected abstract itemCount(): number
+  protected abstract listEl(): Element | null
+  protected abstract onActivate(index: number): void
+
+  protected override onClosed() {
+    this.filter = ''
+    this.highlighted = 0
+  }
+
+  protected focusFilter() {
+    setTimeout(() => document.getElementById(this.filterId)?.focus())
+  }
+
+  clearFilter() {
+    this.filter = ''
+    this.highlighted = 0
+    this.update()
+    this.focusFilter()
+  }
+
+  // Combobox cursor: move the highlight within the current list and scroll it into view (the one
+  // leaky DOM touch — the VDOM owns the class, but scrollIntoView needs the real node).
+  moveHighlight(delta: number) {
+    const n = this.itemCount()
+    if (!n) return
+    this.highlighted = Math.max(0, Math.min(this.highlighted + delta, n - 1))
+    this.update()
+    setTimeout(() => (this.listEl()?.children[this.highlighted] as HTMLElement | undefined)?.scrollIntoView({ block: 'nearest' }))
+  }
+
+  activateHighlighted() {
+    const n = this.itemCount()
+    if (n) this.onActivate(Math.max(0, Math.min(this.highlighted, n - 1)))
+  }
+
+  // Filter-input keys: nav keys move/activate the highlight, Escape closes; any other key falls
+  // through to edit the filter, restarting the highlight at the top.
+  protected onFilterKey(e: KeyboardEvent) {
+    if (e.key === 'Escape') this.close()
+    else if (e.key === 'ArrowDown') { e.preventDefault(); this.moveHighlight(1) }
+    else if (e.key === 'ArrowUp') { e.preventDefault(); this.moveHighlight(-1) }
+    else if (e.key === 'Enter') { e.preventDefault(); this.activateHighlighted() }
+    else this.highlighted = 0
+  }
+}
+
+// Sessions chip + dropdown. Owns the session list; reaches up to Root for sessionId/cwd and
+// updateTitle/stickToBottomNextRender. Opens on the attached session so the highlight starts where
+// you are; the `.active` row is the keyboard cursor.
+class SessionPicker extends ComboboxPill {
+  sessions: { sessionId: string; mtime: number; preview: string }[] = []
+  protected keepOpenSelector = '.sid-wrap'
+  protected filterId = 'session-filter'
+
+  protected itemCount() { return this.filtered().length }
+  protected listEl() { return document.getElementById('session-list') }
+  protected onActivate(i: number) { const s = this.filtered()[i]; if (s) this.pick(s.sessionId) }
+
+  // The (possibly filtered) sessions the dropdown shows — matches preview text, case-insensitive.
+  filtered() {
+    const q = this.filter.trim().toLowerCase()
+    return q ? this.sessions.filter(s => s.preview.toLowerCase().includes(q)) : this.sessions
+  }
+
+  // Index of the currently-attached session in the filtered list (0 if it isn't listed yet).
+  currentIndex(): number {
+    const list = this.filtered()
+    const i = list.findIndex(s => s.sessionId === this.parent.sessionId)
+    return i < 0 ? 0 : i
+  }
+
+  override onAttached() {
+    // Silent failure: the picker stays empty until the user reopens it (retries).
+    tb.server.listSessions().then(ss => {
+      this.sessions = ss
+      this.parent.updateTitle()
+      this.update()
+    }).catch(() => {})
+  }
+
+  // Preview for the attached session (drives the tab title); empty until loaded.
+  currentPreview(): string {
+    return this.sessions.find(s => s.sessionId === this.parent.sessionId)?.preview?.trim() ?? ''
+  }
+
+  async show() {
+    this.beginOpen()
+    this.highlighted = this.currentIndex()
+    this.update()
+    // Focus the filter input so it captures typing + arrow/Enter/Esc; domeleon patches
+    // #session-filter in place across the reload below, so focus survives without re-focusing.
+    this.focusFilter()
+    try {
+      this.sessions = await tb.server.listSessions()
+      this.highlighted = this.currentIndex()
+      this.parent.updateTitle()
+      this.update()
+    } catch (err) {
+      console.error('[claude-bulb] listSessions failed', err)
+    }
+    // Armed after the load, not before: the list is in place, matching the prior behaviour.
+    this.armClose()
+  }
+
+  async pick(sessionId: string) {
+    this.close()
+    // Land at the bottom of the new session, not the old scroll position.
+    this.parent.messageList.stickToBottomNextRender()
+    await tb.server.attach(sessionId)
+  }
+
+  view() {
+    const p = this.parent
+    if (!p.sessionId) return div({ class: 'sid-wrap' })
+    const raw = this.currentPreview() || 'current'
+    const label = truncate(raw, 25)
+    const tip = `${p.cwd}\nSession: ${p.sessionId}`   // cwd on hover, not in the bar
+    return div({ class: 'sid-wrap' },
+      button({
+        class: 'pill',
+        title: tip,
+        onClick: (e: MouseEvent) => { e.stopPropagation(); this.open ? this.close() : this.show() },
+      }, label),
+      this.open ? this.picker() : null,
+    )
+  }
+
+  picker() {
+    const sessions = this.filtered()
+    return div({ class: 'picker' },
+      // Reuses the launcher's filter chrome; the host owns the value + key handling.
+      searchFilter({
+        target: this,
+        prop: () => this.filter,
+        id: 'session-filter',
+        placeholder: 'Filter sessions…',
+        hasValue: !!this.filter,
+        onKeyDown: (e: KeyboardEvent) => this.onFilterKey(e),
+        onClear: () => this.clearFilter(),
+      }),
+      sessions.length === 0
+        ? div({ class: 'picker-empty' }, this.filter ? 'No match.' : 'No sessions yet — start one in your terminal.')
+        : div({ id: 'session-list', class: 'picker-list' }, sessions.map((s, i) => this.pickerRow(s, i))),
+    )
+  }
+
+  pickerRow(s: { sessionId: string; mtime: number; preview: string }, i: number) {
+    const current = s.sessionId === this.parent.sessionId
+    return div({
+      // `.active` is the keyboard cursor; `.current` marks the attached session so it stays
+      // identifiable when the cursor moves off it.
+      class: ['picker-row', i === this.highlighted ? 'active' : '', current ? 'current' : ''],
+      onMouseEnter: () => { if (this.highlighted !== i) { this.highlighted = i; this.update() } },
+      onClick: () => this.pick(s.sessionId),
+    },
+      span({ class: 'picker-dot' }),
+      span({ class: 'picker-preview' }, s.preview || '(no preview)'),
+      span({ class: 'picker-time' }, relTime(s.mtime)),
+    )
+  }
+}
+
+// Token counter chip + click popup. Reaches up to Root for `tokens` (already
+// accumulated from the JSONL `usage` events — no extra server call). The popup
+// breaks the count down into cached / new input and output. No cost — public
+// pricing is notional on a subscription.
+class TokenPill extends StatusPill {
+  protected keepOpenSelector = '.token-wrap'
+
+  show() {
+    this.beginOpen()
+    this.update()
+    this.armClose()
+  }
+
+  view() {
+    const t = this.parent.tokens
+    // Headline = output only — the one number that's purely "what the model
+    // produced." Input detail (incl. cache split) lives in the popup.
+    if (t.in + t.out + t.cached + t.cacheCreate <= 0) return div({ class: 'token-wrap' })
+    return div({ class: 'token-wrap' },
+      button({
+        class: 'pill',
+        onClick: (e: MouseEvent) => { e.stopPropagation(); this.open ? this.close() : this.show() },
+      }, `${formatTokens(t.out)} tokens`),
+      this.open ? this.popup(t) : null,
+    )
+  }
+
+  popup(t: { in: number; out: number; cached: number; cacheCreate: number }) {
+    // Three flat numbers, each a token count with a plain label. No total, no
+    // grouping — input/output (and cached/uncached input) are priced differently,
+    // so they stay separate rather than summed. Cached vs uncached input is the
+    // cache-health signal.
+    return div({ class: 'token-pop' },
+      this.line('Cache', t.cached, 'input tokens reused from cache'),
+      this.line('Input', t.in + t.cacheCreate, 'new input tokens sent to model'),
+      this.line('Output', t.out, 'tokens output by model'),
+    )
+  }
+  line(title: string, n: number, label: string) {
+    return div({ class: 'token-line' },
+      div({ class: 'token-line-left' },
+        span({ class: 'token-line-title' }, title),
+        span({ class: 'token-line-lbl' }, label),
+      ),
+      span({ class: 'token-line-num' }, formatTokens(n)),
+    )
+  }
+}
+
+interface RunningServer { pid: number; port: number; url: string; file: string; startedAt: number; trust?: boolean; predicted?: string; denied?: string }
+interface BulbFile { path: string; name: string; mtime: number; trusted?: boolean }
+// One launcher row: a project bulb and/or a running server, merged by path. `running`
+// present ⇒ live (open link + stop); absent ⇒ stopped (launch). `recent` = MRU sort key.
+// `trusted` = a remembered trust decision (applies to the next launch).
+interface BulbRow { path: string; name: string; recent: number; trusted?: boolean; running?: RunningServer }
+
+// Inline SVG play/stop icons for the launch/stop controls (the pattern from
+// typebulbs/xor-x-ray.bulb.md): font glyphs centre unpredictably across platforms, a fixed
+// viewBox is reliable, and currentColor lets the button's own colour flow through.
+const btnIcon = (...shapes: unknown[]) => svg({ viewBox: '0 0 16 16', width: '13', height: '13', class: 'btn-icon' }, ...shapes as never[])
+// Triangle nudged ~2px right of centre: a right-pointing triangle's visual mass sits left of its
+// bounding box, so geometric centring reads as too-far-left in the round button.
+const iconPlay = () => btnIcon(path({ d: 'M5.5 2 L15.5 8 L5.5 14 Z', fill: 'currentColor' }))
+const iconStop = () => btnIcon(rect({ x: 3, y: 3, width: 10, height: 10, fill: 'currentColor' }))
+
+// Match a globbed file path (join) against a registry path (resolve) across the abs/case
+// gap: lowercased, forward-slashed. Windows paths are case-insensitive; the row keeps the
+// original path for launch + display, this is only the key.
+function pathKey(p: string): string { return p.replace(/\\/g, '/').toLowerCase() }
+
+// Last path segment, trailing separators trimmed — the file or directory name ('' for an empty path).
+function basename(p: string): string {
+  return p.replace(/[/\\]+$/, '').split(/[/\\]/).pop() ?? ''
+}
+// A bulb's display name from its path: the basename minus the `.bulb.md` suffix.
+function bulbBasename(p: string): string {
+  return basename(p).replace(/\.bulb\.md$/, '')
+}
+
+// Status-bar bulb launcher + off-switch. Lists every *.bulb.md in the project (MRU-first,
+// type to filter) so a bulb you just authored is one click from running — no trip to the
+// terminal — and overlays the machine-global running-server registry so the same menu
+// stops them. A broken-out/launched server is detached and outlives this page (surviving
+// every hot-reload), so without this the only way to stop one is the OS. The bulb drives
+// nothing except launching (Invariant 2) — the same deliberate exception as breakout.
+//
+// The host's own file (the mirror you're looking through) is dropped — no relaunching
+// yourself — identified by *pid*, not filename, so it survives a rename and doesn't hide a
+// second, unrelated mirror. Polls on a lazy cadence: the set changes on a launch / stop /
+// breakout / edit, not per-frame.
+class BulbsPill extends ComboboxPill {
+  files: BulbFile[] = []
+  servers: RunningServer[] = []
+  protected keepOpenSelector = '.servers-wrap'
+  protected filterId = 'bulb-filter'
+  // Bulb paths (pathKey) mid-launch — a transient in-memory state (NO persistence): launchBulbServer
+  // doesn't resolve until the server registers (~2s), so the play button shimmers until then.
+  launching = new Set<string>()
+  // Denials (by pid) the user chose to keep restricted, so the elevation modal doesn't
+  // nag again for the same running bulb. Resets when that bulb stops (new pid).
+  dismissedDenials = new Set<number>()
+  // A stopped bulb the proactive scan thinks needs trust, awaiting the user's launch-tier choice.
+  // Set by launch() before anything spawns, so the offer precedes the tab opening (not after the
+  // server registers). Cleared on choice or dismiss.
+  pendingLaunch?: { path: string; name: string; cap: string }
+  // The bulb whose console is being tailed, if any (one at a time).
+  openLog?: { pid: number; name: string; text: string; offset: number }
+  #logTimer?: ReturnType<typeof setInterval>
+
+  protected itemCount() { return this.rows().length }
+  protected listEl() { return document.querySelector('.bulb-list') }
+  // Enter on the highlighted row: open a running server's tab, or launch a stopped bulb.
+  protected onActivate(i: number) {
+    const r = this.rows()[i]
+    if (r) r.running ? window.open(r.running.url, '_blank', 'noopener') : this.launch(r.path)
+  }
+
+  override onAttached() {
+    this.refresh()
+    // The running registry is cheap (reads one dir) and carries the time-critical signal —
+    // a denial flag that must raise the elevation modal promptly — so poll it fast. The file
+    // walk is heavier (recursive project scan) and only changes on author/launch, so it stays
+    // lazy. Splitting them keeps the modal near-instant without re-walking the tree every tick.
+    setInterval(() => this.refreshServers(), 800)
+    setInterval(() => this.refreshFiles(), 3000)
+    // breakout resolves only after the new server has self-registered, so this nudge
+    // refreshes immediately rather than waiting for the next backstop tick.
+    window.addEventListener('tb-breakout', () => this.refreshServers())
+  }
+
+  refresh() { return Promise.all([this.refreshServers(), this.refreshFiles()]) }
+
+  // Running registry only. Re-render on any change that the UI shows — count, identity, AND
+  // the per-server flags the rows/modal key off (`denied`/`predicted` drive the elevation modal;
+  // `trust` drives the badge). Omitting the flags is why the modal used to lag seconds behind a
+  // denial: it changes neither count nor pid, so the old check stayed false and skipped update().
+  async refreshServers() {
+    try {
+      const servers = await tb.server.listBreakouts() as RunningServer[]
+      const changed =
+        servers.length !== this.servers.length ||
+        servers.some((s, i) =>
+          s.pid !== this.servers[i]?.pid ||
+          s.denied !== this.servers[i]?.denied ||
+          s.predicted !== this.servers[i]?.predicted ||
+          s.trust !== this.servers[i]?.trust)
+      this.servers = servers
+      if (changed) this.update()
+    } catch (err) {
+      console.error('[claude-bulb] server list refresh failed', err)
+    }
+  }
+
+  // Project *.bulb.md files (the heavier recursive walk). Re-render only on a real change so
+  // the lazy tick is otherwise invisible.
+  async refreshFiles() {
+    try {
+      const files = await tb.server.listBulbFiles() as BulbFile[]
+      const changed =
+        files.length !== this.files.length ||
+        files.some((f, i) => f.path !== this.files[i]?.path || f.mtime !== this.files[i]?.mtime)
+      this.files = files
+      if (changed) this.update()
+    } catch (err) {
+      console.error('[claude-bulb] bulb list refresh failed', err)
+    }
+  }
+
+  // Project files ∪ running servers, keyed by path. The host's own file (and byte-identical copies)
+  // are already dropped server-side in listBulbFiles; its own running server is dropped here by pid.
+  // A running server outside the project still shows so the off-switch stays unified. MRU = max(file
+  // mtime, server startedAt), so just-edited and just-launched both float up. Filter matches name + path.
+  rows(): BulbRow[] {
+    const byKey = new Map<string, BulbRow>()
+    for (const f of this.files) {
+      byKey.set(pathKey(f.path), { path: f.path, name: f.name, recent: f.mtime, trusted: f.trusted })
+    }
+    for (const s of this.servers) {
+      if (s.pid === this.parent.ownPid) continue
+      const k = pathKey(s.file)
+      const base = bulbBasename(s.file) || s.file
+      const row = byKey.get(k) ?? { path: s.file, name: base, recent: 0 }
+      row.running = s
+      row.recent = Math.max(row.recent, s.startedAt)
+      byKey.set(k, row)
+    }
+    const q = this.filter.trim().toLowerCase()
+    let rows = [...byKey.values()]
+    if (q) rows = rows.filter(r => r.name.toLowerCase().includes(q) || r.path.toLowerCase().includes(q))
+    return rows.sort((a, b) => b.recent - a.recent)
+  }
+
+  show() {
+    this.beginOpen()
+    this.highlighted = 0
+    this.refresh()
+    this.update()
+    this.armClose()
+    this.focusFilter()
+  }
+
+  protected override onClosed() {
+    super.onClosed()
+    this.closeLog()
+  }
+
+  // Launch a stopped bulb — but PROBE TRUST FIRST so the offer precedes the tab. A
+  // remembered-trusted bulb (its tier already decided) and a bulb the scan reads as benign both
+  // launch straight away; only a fresh bulb the scan flags raises the pre-launch modal, and the
+  // spawn waits for the user's tier choice. (A scan miss still falls through to the runtime gate's
+  // reactive modal — see pendingDenial.)
+  async launch(path: string) {
+    const trusted = this.files.find(f => pathKey(f.path) === pathKey(path))?.trusted
+    if (!trusted) {
+      let cap: string | undefined
+      try { cap = (await tb.server.predictTrustOf(path) as { cap?: string }).cap }
+      catch (err) { console.error('[claude-bulb] predictTrustOf failed', err) }
+      if (cap) { this.pendingLaunch = { path, name: this.displayName(path), cap }; this.update(); return }
+    }
+    await this.doLaunch(path)
+  }
+
+  // The actual spawn. `trust` true → launch trusted + remember it (the pre-launch "Launch Trusted"
+  // choice, parallel to elevate); omitted → the server resolves the remembered tier itself.
+  // `suppressNag` records the new pid as already-dismissed so a deliberate Restricted launch isn't
+  // re-prompted the instant it trips the gate (elevate later via the row's trust toggle).
+  async doLaunch(path: string, trust?: boolean, suppressNag = false) {
+    // Mark launching so the play button stays visible + shimmers for the ~2s until the server
+    // registers (else the click feels dead). Transient, in-memory; cleared when refresh flips the
+    // row to running (which renders a stop button instead).
+    const key = pathKey(path)
+    this.launching.add(key); this.update()
+    let pid: number | undefined
+    try { pid = (await tb.server.launchBulb(path, trust) as { pid?: number }).pid }
+    catch (err) { console.error('[claude-bulb] launchBulb failed', err) }
+    finally { this.launching.delete(key) }
+    if (suppressNag && pid) this.dismissedDenials.add(pid)
+    await this.refresh()
+  }
+
+  // Bulb's frontmatter name when known (nicer than the filename), else the basename sans extension.
+  displayName(path: string): string {
+    const f = this.files.find(x => pathKey(x.path) === pathKey(path))
+    return f?.name || bulbBasename(path) || path
+  }
+
+  // Pre-launch modal actions.
+  launchTrusted() { const p = this.pendingLaunch; this.pendingLaunch = undefined; if (p) this.doLaunch(p.path, true) }
+  launchRestricted() { const p = this.pendingLaunch; this.pendingLaunch = undefined; if (p) this.doLaunch(p.path, undefined, true) }
+  cancelLaunch() { this.pendingLaunch = undefined; this.update() }
+
+  async stop(pid: number) {
+    if (this.openLog?.pid === pid) this.closeLog()
+    this.dismissedDenials.delete(pid)
+    try { await tb.server.stopBreakout(pid) }
+    catch (err) { console.error('[claude-bulb] stopBreakout failed', err) }
+    await this.refresh()
+  }
+
+  // A running untrusted bulb that actually tripped the gate (`denied`), awaiting an elevation
+  // decision. This is the REACTIVE path — the proactive offer happens before launch (see launch()),
+  // so here `denied` is either a deliberate-Restricted bulb the user let trip, or a scan MISS (the
+  // bulb reached a capability its source didn't visibly use — the suspicious case, flagged in the
+  // modal via `denied` without `predicted`). Surfaced even when the popover is closed; skips ones
+  // the user already dismissed (by pid).
+  pendingDenial(): RunningServer | undefined {
+    return this.servers.find(s => s.denied && s.pid !== this.parent.ownPid && !this.dismissedDenials.has(s.pid))
+  }
+
+  // Elevate: stop the untrusted server, relaunch it trusted (explicit trust → the host
+  // remembers it). Trust is fixed at process start, so this is a restart, not an in-place flip.
+  async elevate(s: RunningServer) {
+    this.dismissedDenials.add(s.pid)
+    if (this.openLog?.pid === s.pid) this.closeLog()
+    try {
+      await tb.server.stopBreakout(s.pid)
+      await tb.server.launchBulb(s.file, true)
+    } catch (err) { console.error('[claude-bulb] elevate failed', err) }
+    await this.refresh()
+  }
+
+  dismissDenial(pid: number) { this.dismissedDenials.add(pid); this.update() }
+
+  // Flip a bulb's trust tier. Always updates the remembered decision; for a running server the
+  // tier is fixed at process start, so apply it now by stopping and relaunching in the new tier
+  // (so the toggle reflects reality rather than only the next launch).
+  async toggleTrust(r: BulbRow) {
+    const next = !(r.running ? !!r.running.trust : !!r.trusted)
+    try {
+      await tb.server.setBulbTrust(r.path, next)
+      if (r.running) {
+        if (this.openLog?.pid === r.running.pid) this.closeLog()
+        await tb.server.stopBreakout(r.running.pid)
+        await tb.server.launchBulb(r.path, next)
+      }
+    } catch (err) { console.error('[claude-bulb] toggleTrust failed', err) }
+    await this.refresh()
+  }
+
+  // Tail a running server's console: poll readBulbLog from a byte offset and append, the
+  // same drain pattern as the transcript. Display is capped to recent output so a chatty
+  // server doesn't bloat the DOM. One log open at a time.
+  showLog(s: RunningServer, name: string) {
+    if (this.openLog?.pid === s.pid) { this.closeLog(); return }
+    this.closeLog()
+    this.openLog = { pid: s.pid, name, text: '', offset: 0 }
+    this.update()
+    setTimeout(() => document.getElementById('bulb-console')?.focus())   // so Esc returns to the list
+    this.#pollLog()
+    this.#logTimer = setInterval(() => this.#pollLog(), 700)
+  }
+  closeLog() {
+    if (this.#logTimer) { clearInterval(this.#logTimer); this.#logTimer = undefined }
+    if (!this.openLog) return
+    this.openLog = undefined
+    this.update()
+  }
+  async #pollLog() {
+    const log = this.openLog
+    if (!log) return
+    try {
+      const { text, offset } = await tb.server.readBulbLog(log.pid, log.offset) as { text: string; offset: number }
+      if (this.openLog !== log) return                 // closed/switched mid-await
+      if (text) {
+        log.text = (log.text + text).slice(-50_000)    // keep the recent tail
+        log.offset = offset
+        this.update()
+      } else if (offset !== log.offset) {
+        log.offset = offset                            // file trimmed/rotated — resync silently
+      }
+    } catch (err) {
+      console.error('[claude-bulb] readBulbLog failed', err)
+    }
+  }
+
+  view() {
+    const running = this.servers.filter(s => s.pid !== this.parent.ownPid).length
+    const launchable = this.files.length > 0   // self + byte-identical copies already dropped in listBulbFiles
+    if (!launchable && running === 0) return div({ class: 'servers-wrap' })   // nothing to do → no chip
+    const label = running > 0 ? `${running} running` : 'bulbs'
+    const denial = this.pendingDenial()
+    return div({ class: 'servers-wrap' },
+      button({
+        class: 'pill',
+        title: 'Launch a project bulb · stop a running one',
+        onClick: (e: MouseEvent) => { e.stopPropagation(); this.open ? this.close() : this.show() },
+      }, label),
+      this.open ? this.popup() : null,
+      // Pre-launch offer (proactive) wins the slot if present — it's the one blocking a launch;
+      // the reactive denial modal handles an already-running bulb that tripped the gate.
+      this.pendingLaunch ? this.launchModal(this.pendingLaunch) : denial ? this.denialModal(denial) : null,
+    )
+  }
+
+  // Shared modal chrome for both trust prompts (Specs/Typebulb-CLI-Trust.md). It lives here, in the
+  // launcher — a surface the launched bulb's page can't script — so a bulb can trigger a prompt but
+  // never self-grant (Trust spec Invariant 3). Backdrop click runs onDismiss.
+  trustModal(cfg: { heading: string; body: string; warn: string; noLabel: string; yesLabel: string; onNo: () => void; onYes: () => void; onDismiss: () => void }) {
+    return div({ class: 'trust-back', onClick: (e: MouseEvent) => { e.stopPropagation(); cfg.onDismiss() } },
+      div({ class: 'trust-modal', onClick: (e: MouseEvent) => e.stopPropagation() },
+        div({ class: 'trust-modal-h' }, cfg.heading),
+        div({ class: 'trust-modal-b' }, cfg.body),
+        div({ class: 'trust-modal-warn' }, cfg.warn),
+        div({ class: 'trust-modal-acts' },
+          button({ class: 'trust-no', onClick: (e: MouseEvent) => { e.stopPropagation(); cfg.onNo() } }, cfg.noLabel),
+          button({ class: 'trust-yes', onClick: (e: MouseEvent) => { e.stopPropagation(); cfg.onYes() } }, cfg.yesLabel),
+        ),
+      ),
+    )
+  }
+
+  // Proactive (pre-launch): the scan thinks this bulb needs a capability; choose its tier before it
+  // opens. "Launch Restricted" still launches — the user may want the sandboxed run — just without
+  // trust, and without an instant re-nag when it trips (doLaunch suppressNag).
+  launchModal(p: { path: string; name: string; cap: string }) {
+    return this.trustModal({
+      heading: `“${p.name}” will likely need access`,
+      body: `It looks like it uses ${p.cap}, which is blocked unless you launch it Trusted. Launch Trusted to allow filesystem / AI / server.ts?`,
+      warn: 'Only trust bulbs you wrote or have read — be careful with anything off the internet.',
+      noLabel: 'Launch restricted',
+      yesLabel: 'Launch trusted',
+      onNo: () => this.launchRestricted(),
+      onYes: () => this.launchTrusted(),
+      onDismiss: () => this.cancelLaunch(),
+    })
+  }
+
+  // Reactive (post-launch): a running bulb tripped the gate. With the proactive offer now made
+  // before launch, this fires for a deliberate-Restricted bulb the user let trip, or — the
+  // interesting case — a scan MISS: a bulb that reached a capability its source never visibly used
+  // (`denied` without `predicted`), which is exactly what dynamic access / a raw fetch('/__fs')
+  // looks like, so it's headlined and warned harder. "Trust & relaunch" remembers the decision.
+  denialModal(s: RunningServer) {
+    const name = bulbBasename(s.file) || s.file
+    const suspicious = !s.predicted
+    return this.trustModal({
+      heading: suspicious ? `“${name}” reached for access it didn't declare` : `“${name}” wants more access`,
+      body: suspicious
+        ? `It tried to use ${s.denied} at runtime, though nothing in its code obviously needed it. Relaunch it Trusted to allow filesystem / AI / server.ts?`
+        : `It tried to use ${s.denied}, blocked while it's restricted. Relaunch it Trusted to allow filesystem / AI / server.ts?`,
+      warn: suspicious
+        ? 'Code that reaches for capabilities it never visibly uses can be hiding something — only continue if you wrote this bulb or have read it.'
+        : 'Only trust bulbs you wrote or have read — be careful with anything off the internet.',
+      noLabel: 'Keep restricted',
+      yesLabel: 'Trust & relaunch',
+      onNo: () => this.dismissDenial(s.pid),
+      onYes: () => this.elevate(s),
+      onDismiss: () => this.dismissDenial(s.pid),
+    })
+  }
+
+  popup() {
+    // Drill-in: a running row's `logs` button flips the whole popover to that server's
+    // console; ← back flips home. The launcher list and a streaming console are different
+    // surfaces — one narrow and transient, one tall and kept open while you poke the bulb —
+    // so they take turns in the popover rather than the console hiding below a scrolling list.
+    if (this.openLog) return this.consoleView(this.openLog)
+    const rows = this.rows()
+    return div({ class: 'servers-pop' },
+      // Nav keys move the highlight; any other key edits the filter, which refilters the list — so
+      // restart the highlight at the top (applied on the input event's re-render, no extra update).
+      searchFilter({
+        target: this,
+        prop: () => this.filter,
+        id: 'bulb-filter',
+        placeholder: 'Filter bulbs…',
+        hasValue: !!this.filter,
+        onKeyDown: (e: KeyboardEvent) => this.onFilterKey(e),
+        onClear: () => this.clearFilter(),
+      }),
+      rows.length === 0
+        ? div({ class: 'picker-empty' }, this.filter ? 'No match.' : 'No bulbs in this project yet.')
+        : div({ class: 'bulb-list' }, rows.map((r, i) => this.row(r, i))),
+    )
+  }
+
+  // The drilled-in console for one running server: takes over the whole popover (wider +
+  // taller than the list — a console wants room) with a back affordance to the list.
+  // Esc or the ← button returns; closeLog stops the tail.
+  consoleView(log: { name: string; text: string }) {
+    return div({ id: 'bulb-console', class: 'servers-pop log-mode', tabIndex: 0,
+        onKeyDown: (e: KeyboardEvent) => { if (e.key === 'Escape') { e.stopPropagation(); this.closeLog() } } },
+      // Header content is right-aligned, back button rightmost.
+      div({ class: 'bulb-log-head' },
+        span({ class: 'bulb-log-name' }, `console · ${log.name}`),
+        button({ class: 'bulb-log-back', title: 'Back to the bulb list', onClick: (e: MouseEvent) => { e.stopPropagation(); this.closeLog() } }, '← bulbs'),
+      ),
+      // Top-anchored: output reads from the first line down (a short log sits at the top,
+      // not floated to the bottom of the tall box).
+      pre({ class: 'bulb-log-body' }, span({ class: 'bulb-log-text' }, log.text || '(no output yet)')),
+    )
+  }
+
+  row(r: BulbRow, i: number) {
+    const s = r.running
+    const showing = s && this.openLog?.pid === s.pid
+    // Running tier is authoritative; otherwise the remembered decision the next launch uses.
+    const trusted = s ? !!s.trust : !!r.trusted
+    // Layout: the action button + name read together on the LEFT (▶/■ Title); the metadata/controls
+    // form a right-aligned cluster of fixed-width columns (trust · logs · time/port) that line up
+    // row-to-row. Right-anchored, so the rightmost column (time/port) always aligns; the others
+    // stack inward from it.
+    return div({ class: ['server-row', i === this.highlighted ? 'active' : ''],
+        onMouseEnter: () => { if (this.highlighted !== i) { this.highlighted = i; this.update() } } },
+      s
+        ? button({ class: 'server-stop', title: 'Stop this server', ariaLabel: 'Stop', onClick: (e: MouseEvent) => { e.stopPropagation(); this.stop(s.pid) } }, iconStop())
+        : button({ class: ['bulb-launch', this.launching.has(pathKey(r.path)) ? 'launching' : ''], title: trusted ? 'Launch (trusted — remembered)' : 'Launch (restricted)', ariaLabel: 'Launch', onClick: (e: MouseEvent) => { e.stopPropagation(); this.launch(r.path) } }, iconPlay()),
+      // The name opens the bulb's .bulb.md in the editor (running or stopped). The live app is
+      // reachable separately via the :port link; the play button launches. Not a launch trigger.
+      span({ class: ['server-name', s ? '' : 'stopped'], title: `Open ${r.path}`, onClick: (e: MouseEvent) => { e.stopPropagation(); tb.server.openFile(r.path) } }, r.name),
+      // Trust toggle. Shown for a running server (the live tier matters) or a trusted-remembered
+      // stopped bulb; a plain restricted stopped bulb shows an empty cell — "restricted" is the
+      // implicit default and repeating it down every row is noise — but the cell still holds its grid
+      // column, so the trust/logs/time columns stay aligned row-to-row.
+      (s || trusted) ? this.trustToggle(r, trusted) : span({ class: 'cell-empty' }),
+      // Logs: a link (not a button) that flips the popover to this server's console.
+      s
+        ? a({ class: ['server-logs', showing ? 'on' : ''], title: 'Show this server’s console', onClick: (e: MouseEvent) => { e.stopPropagation(); this.showLog(s, r.name) } }, 'logs')
+        : span({ class: 'cell-empty' }),
+      s
+        ? a({ class: 'server-port', href: s.url, target: '_blank', rel: 'noopener noreferrer', title: `Open ${s.url}` }, `:${s.port}`)
+        : span({ class: 'bulb-time' }, relTime(r.recent)),
+    )
+  }
+
+  // Trust toggle: one button showing the *current* tier (one word; clicking flips it). Shares the
+  // row-button style — accent when trusted (an active control), muted when restricted. For a running
+  // server the flip is a stop + relaunch (toggleTrust).
+  trustToggle(r: BulbRow, trusted: boolean) {
+    return button({
+      class: ['trust-toggle', trusted ? 'on' : ''],
+      title: `${trusted ? 'Trusted' : 'Restricted'} — click to switch to ${trusted ? 'restricted' : 'trusted'}` + (r.running ? ' (stops + relaunches it)' : ''),
+      onClick: (e: MouseEvent) => { e.stopPropagation(); this.toggleTrust(r) },
+    }, trusted ? 'trusted' : 'restricted')
+  }
+}
+
+// A live ````bulb```` embed: a sandboxed nested app plus its controls. createBulbFrame (the
+// typebulb package) compiles the source into an auto-sizing iframe and owns sandbox policy,
+// host-theme inheritance, and runtime-error forwarding; we own placement and the inline⇄spread /
+// code⇄run / copy / breakout controls. The iframe is parented once via onMounted — moving an
+// <iframe> in the DOM reloads it — and the source listing is markdown rendered through innerHTML.
+class BulbEmbed extends Component {
+  spread = false
+  showingCode = false
+  copied = false
+  #breakoutResult = ''                                 // 'launched <file>' / 'breakout failed', shown while state === 'done'
+  #source: string
+  #key: string
+  #frame?: HTMLElement
+  #compileError?: string
+  #runtimeError?: string
+  #breakoutState: 'idle' | 'busy' | 'done' = 'idle'   // busy: shimmer+disabled; done: result shown, still disabled
+
+  constructor(source: string, key: string) {
+    super()
+    this.#source = source
+    this.#key = key
+  }
+
+  // Compile once, when first attached to the tree. A post-mount runtime throw arrives via onError
+  // and surfaces as a strip under the still-running embed; a compile failure rejects to the fallback.
+  override onAttached() {
+    createBulbFrame(this.#source, { onError: (m: string) => { this.#runtimeError = m; this.update() } })
+      .then(frame => { this.#frame = frame; this.update() })
+      .catch((err: unknown) => { this.#compileError = err instanceof Error ? err.message : String(err); this.update() })
+  }
+
+  view() {
+    const cls = ['bulb-embed', this.spread ? 'spread' : 'inline', this.showingCode ? 'code-open' : '', this.#compileError ? 'err' : '']
+    const inner =
+      this.#compileError ? [`bulb: ${this.#compileError}`]
+      : !this.#frame ? ['compiling bulb…']
+      : [
+          this.#controls(),
+          // Frame host: display:contents (see CSS) so the iframe lays out as a direct child of
+          // .bulb-embed — the sizing / spread-breakout rules target it — while domeleon owns this
+          // node. onMounted parents the iframe exactly once; the code-open class hides it.
+          div({ class: 'bulb-frame', key: 'frame', onMounted: (el: Element) => { if (this.#frame) el.replaceChildren(this.#frame) } }),
+          this.showingCode ? this.#codeView() : null,
+          this.#runtimeError ? div({ class: 'bulb-err-strip', key: 'err' }, `⚠ ${this.#runtimeError}`) : null,
+        ]
+    // Wrapped in `.md` so the embed's CSS (`.md .bulb-embed …`) applies as a bubble sibling.
+    return div({ class: 'md', key: this.#key }, div({ class: cls }, ...inner))
+  }
+
+  #controls() {
+    const breakoutLabel = this.#breakoutState === 'done' ? this.#breakoutResult : 'breakout ↗'
+    return div({ class: 'bulb-controls', key: 'controls' },
+      this.#pill('bulb-view', this.spread ? 'inline' : 'spread',
+        this.spread ? 'Fit into the conversation column' : 'Spread to the full transcript width and height',
+        () => { this.spread = !this.spread; this.update() }),
+      this.#pill('bulb-toggle', this.showingCode ? 'run' : 'code',
+        this.showingCode ? 'Back to the running bulb' : "View this bulb's source",
+        () => { this.showingCode = !this.showingCode; this.update() }),
+      this.#pill(['bulb-copy', this.copied ? 'done' : ''], this.copied ? 'copied' : 'copy',
+        "Copy this bulb's full source", () => this.#copy()),
+      button({ class: ['overlay-pill', 'bulb-breakout', this.#breakoutState === 'busy' ? 'launching' : ''], type: 'button',
+        disabled: this.#breakoutState !== 'idle', title: 'Save as a standalone .bulb.md and open it with typebulb',
+        onClick: (e: MouseEvent) => { e.stopPropagation(); this.#breakout() } }, breakoutLabel),
+    )
+  }
+
+  #pill(extra: string | string[], label: string, title: string, onClick: () => void) {
+    const extras = Array.isArray(extra) ? extra : [extra]
+    return button({ class: ['overlay-pill', ...extras], type: 'button', title,
+      onClick: (e: MouseEvent) => { e.stopPropagation(); onClick() } }, label)
+  }
+
+  #copy() {
+    navigator.clipboard?.writeText(this.#source)
+    this.copied = true
+    this.update()
+    setTimeout(() => { this.copied = false; this.update() }, 1200)
+  }
+
+  // Write this bulb to a standalone <name>.bulb.md and launch it — the graduation path from an
+  // inline experiment to a real bulb. Shimmers through the ~2s write+spawn, stays disabled through
+  // the result window so a stray double-click can't launch twice.
+  async #breakout() {
+    if (this.#breakoutState !== 'idle') return
+    this.#breakoutState = 'busy'
+    this.update()
+    try {
+      const { file } = await tb.server.breakout(this.#source)
+      this.#breakoutResult = `launched ${file}`
+      // breakout resolves only once the new server has registered — nudge the status-bar pill now.
+      window.dispatchEvent(new CustomEvent('tb-breakout'))
+    } catch (err) {
+      this.#breakoutResult = 'breakout failed'
+      console.error('[claude-bulb] breakout failed', err)
+    }
+    this.#breakoutState = 'done'               // resolved — stop the shimmer, show the result, stay disabled
+    this.update()
+    setTimeout(() => { this.#breakoutState = 'idle'; this.update() }, 2500)
+  }
+
+  // Source listing behind the code toggle: the .bulb.md (minus frontmatter) rendered as markdown
+  // via the plain instance — file-label bars + fenced code.
+  #codeView() {
+    return div({ class: ['bulb-code', 'md'], key: 'code', tabIndex: 0,
+      // Ctrl/⌘-A scopes select-all to the code (a focusable div, so it claims the key).
+      onKeyDown: (e: KeyboardEvent) => {
+        if (!((e.ctrlKey || e.metaKey) && (e.key === 'a' || e.key === 'A'))) return
+        e.preventDefault()
+        const sel = getSelection()
+        if (!sel) return
+        const range = document.createRange()
+        range.selectNodeContents(e.currentTarget as HTMLElement)
+        sel.removeAllRanges()
+        sel.addRange(range)
+      },
+      onMounted: (el: Element) => { el.innerHTML = mdPlain.render(stripFrontmatter(this.#source)) } })
+  }
+}
+
+// Copy-to-clipboard button with a brief "copied" colour flash. Its own Component so domeleon keeps
+// its DOM node stable across re-renders — that stability is what lets the CSS colour transition run.
+// Instances live in MessageList.copyButtons (a public array) so domeleon discovers them; an inline
+// button() re-emitted each render would be recreated and couldn't transition.
+class CopyButton extends Component {
+  done = false
+  #text: string
+
+  constructor(text: string) {
+    super()
+    this.#text = text
+  }
+
+  setText(text: string) { this.#text = text }
+
+  flash() {
+    navigator.clipboard?.writeText(this.#text)
+    this.done = true
+    this.update()
+    setTimeout(() => { this.done = false; this.update() }, 600)
+  }
+
+  view() {
+    return button({
+      class: ['overlay-pill', 'copy', this.done ? 'done' : ''],
+      onClick: (e: MouseEvent) => { e.stopPropagation(); this.flash() },
+    }, this.done ? 'copied' : 'copy')
+  }
+}
+
+// Messages panel: scrolling area, bubbles, expanded-tool set, sticky-bottom.
+// No optimistic render — the bulb drives nothing; turns appear only once CC
+// writes them to the JSONL.
+class MessageList extends Component {
+  messages: Msg[] = []
+  openTools = new Set<string>()                    // tool ids whose body is expanded
+  expandedTurns = new Set<number>()                // turn indices the user expanded past the collapsed summary
+  copyButtons: CopyButton[] = []                   // public so domeleon discovers these child components
+  bulbEmbeds: BulbEmbed[] = []                      // ditto — one per live ````bulb```` embed across the transcript
+  scrollEl?: HTMLElement
+
+  #idSeq = 0
+  #embedSeq = 0
+  #stuckToBottom = true
+
+  get parent() { return this.ctx.parent as unknown as Root }
+
+  // ===== Public mutators called by Root =====
+
+  clear() {
+    this.messages = []
+    this.expandedTurns.clear()
+    this.copyButtons = []
+    this.bulbEmbeds = []
+  }
+
+  // A copy button registered in copyButtons so domeleon discovers/manages it.
+  #makeCopy(text: string): CopyButton {
+    const copy = new CopyButton(text)
+    this.copyButtons.push(copy)
+    return copy
+  }
+
+  // Build a Msg with its own copy button (when there's text to copy).
+  #addMessage(m: Omit<Msg, 'copy'>): Msg {
+    const msg: Msg = { ...m, copy: m.text ? this.#makeCopy(m.text) : undefined }
+    this.messages.push(msg)
+    return msg
+  }
+
+  // Set right before navigating to a new chat (session-switch) so the
+  // next render lands at the bottom of the new transcript rather than carrying
+  // over the previous scroll position.
+  stickToBottomNextRender() {
+    this.#stuckToBottom = true
+  }
+
+  // ===== apply() dispatch =====
+
+  applyUser(e: Extract<ServerEvent, { type: 'user' }>) {
+    // Consecutive user sends (no assistant turn between) are one intent split
+    // across messages — fold into a single bubble (segments, divided by a rule in
+    // userMarkdown), not a stack of turns. An assistant message between resets it.
+    const prev = this.messages[this.messages.length - 1]
+    if (prev && prev.role === 'user') {
+      prev.segments = [...(prev.segments ?? [prev.text]), e.text]
+      prev.text = prev.segments.join('\n\n')
+      if (prev.copy) prev.copy.setText(prev.text)
+      else if (prev.text) prev.copy = this.#makeCopy(prev.text)
+      return
+    }
+    this.#addMessage({ id: ++this.#idSeq, role: 'user', text: e.text, thinking: '', tools: [] })
+  }
+
+  applyAssistant(e: Extract<ServerEvent, { type: 'assistant' }>) {
+    const msg = this.#addMessage({
+      id: ++this.#idSeq,
+      role: 'assistant',
+      text: e.text,
+      thinking: e.thinking,
+      tools: e.tools.map(t => ({ ...t, isError: false })),
+    })
+    this.#attachEmbeds(msg, e.text)
+    // Auto-expand live edits; leave historical (replayed) ones collapsed.
+    if (e.live) {
+      for (const t of e.tools) {
+        if (EDIT_TOOLS.has(t.name)) this.openTools.add(t.id)
+      }
+    }
+  }
+
+  // Live ````bulb```` embeds: split the text into markdown chunks + bulb sources, turning each
+  // source into a BulbEmbed registered in bulbEmbeds (so domeleon manages it) and stored on
+  // msg.body for #renderBody. Only messages with a bulb fence get a body; the rest stay plain.
+  #attachEmbeds(msg: Msg, text: string) {
+    const segs = splitBulbSegments(text)
+    if (!segs.some(s => s.kind === 'bulb')) return
+    msg.body = segs.map(s => {
+      if (s.kind === 'md') return s.text
+      const embed = new BulbEmbed(s.source, `embed-${this.#embedSeq++}`)
+      this.bulbEmbeds.push(embed)
+      return embed
+    })
+  }
+
+  applyToolResult(e: Extract<ServerEvent, { type: 'tool_result' }>) {
+    const t = this.#findTool(e.id)
+    if (t) { t.result = e.content; t.isError = e.isError }
+  }
+
+  #findTool(id: string): Tool | undefined {
+    return this.messages.flatMap(m => m.tools).find(t => t.id === id)
+  }
+
+  // ===== Scroll behavior =====
+
+  scrollSoon() {
+    requestAnimationFrame(() => {
+      if (this.scrollEl && this.#stuckToBottom) this.scrollEl.scrollTop = this.scrollEl.scrollHeight
+    })
+  }
+
+  // Sticky-bottom: a scroll-up past 50px from the bottom disengages autoscroll
+  // until the user scrolls back within it. Programmatic scrolls land at
+  // scrollHeight, so they keep stuck=true.
+  onScroll() {
+    const el = this.scrollEl
+    if (!el) return
+    this.#stuckToBottom = el.scrollHeight - (el.scrollTop + el.clientHeight) < 50
+  }
+
+  // ===== Views =====
+
+  view() {
+    return div({
+      class: 'messages',
+      onScroll: () => this.onScroll(),
+      // onMounted only to capture the element — scrollSoon() needs the real node to drive scrollTop.
+      onMounted: (el: Element) => { this.scrollEl = el as HTMLElement },
+    },
+      this.parent.ready ? this.renderMessages() : div({ class: 'note' }, 'Connecting…'),
+    )
+  }
+
+  // Group the flat list into turns (a user message + the assistant bubbles that
+  // follow it), then render each. The turn index cycles a palette CSS class for
+  // the left-edge stripe.
+  renderMessages() {
+    const groups: { idx: number; msgs: Msg[] }[] = []
+    let turn = -1
+    for (const msg of this.messages) {
+      if (msg.role === 'user' || groups.length === 0) {
+        if (msg.role === 'user') turn++
+        groups.push({ idx: Math.max(0, turn), msgs: [msg] })   // clamp orphan-assistant to slot 0
+      } else {
+        groups[groups.length - 1]!.msgs.push(msg)
+      }
+    }
+    return groups.flatMap((g, gi) => this.renderTurn(g.msgs, g.idx, gi === groups.length - 1))
+  }
+
+  // A completed turn collapses its intermediate assistant bubbles (everything
+  // but the final answer) under a one-line summary; the user prompt and the last
+  // assistant message stay expanded. The in-flight (last) turn never collapses —
+  // you're watching it stream — and a turn the user clicked open expands fully.
+  // Rationale: the agent's final message already IS its own summary of the turn,
+  // so surfacing it (free, exact) beats any generated paraphrase. See the spec.
+  renderTurn(msgs: Msg[], turnIdx: number, isLast: boolean) {
+    const assistants = msgs.filter(m => m.role === 'assistant')
+    if (isLast || assistants.length < 2) return msgs.map(m => this.bubble(m, turnIdx))
+
+    const expanded = this.expandedTurns.has(turnIdx)
+    const hidden = assistants.slice(0, -1)
+    const last = assistants[assistants.length - 1]!
+    const out = msgs.filter(m => m.role === 'user').map(m => this.bubble(m, turnIdx))
+    out.push(this.turnSummary(hidden, turnIdx, expanded))
+    if (expanded) for (const m of hidden) out.push(this.bubble(m, turnIdx))
+    out.push(this.bubble(last, turnIdx))
+    return out
+  }
+
+  // Collapsed-turn header: caret + data-derived step tally, click to toggle.
+  // It's a .bubble so it inherits the turn stripe and keeps the color continuous.
+  turnSummary(hidden: Msg[], turnIdx: number, expanded: boolean) {
+    return div({ class: ['bubble', 'assistant', turnClassFor(turnIdx)], key: `summary-${turnIdx}` },
+      div({
+        class: 'turn-summary',
+        onClick: () => {
+          if (expanded) this.expandedTurns.delete(turnIdx); else this.expandedTurns.add(turnIdx)
+          this.update()
+        },
+      },
+        span({ class: 'tool-caret' }, expanded ? '▾' : '▸'),
+        span({ class: 'turn-summary-text' }, summarizeSteps(hidden)),
+      ),
+    )
+  }
+
+  bubble(msg: Msg, turnIdx: number) {
+    // Tools-only bubbles sit tighter (CSS adjacent-sibling rule) so a chain of
+    // tool steps doesn't waste vertical space.
+    const toolsOnly = msg.role === 'assistant' && !msg.text && !msg.thinking && msg.tools.length > 0
+    return div({ class: ['bubble', msg.role, toolsOnly ? 'tools-only' : '', turnClassFor(turnIdx)], key: msg.id },
+      msg.thinking ? details({ class: 'thinking' }, summary('thinking'), pre(msg.thinking)) : null,
+      this.#renderBody(msg),
+      msg.tools.map(t => this.tool(t)),
+      msg.copy ? msg.copy.view() : null,
+    )
+  }
+
+  // The message body. With live ````bulb```` embeds it's an ordered run of markdown chunks and
+  // BulbEmbed components (msg.body); otherwise the single markdown div — user prompts through
+  // userMarkdown (clickable @mentions, merged sends), assistant text through renderMarkdown.
+  #renderBody(msg: Msg) {
+    if (msg.body) {
+      return msg.body.map((seg, i) =>
+        typeof seg === 'string'
+          ? (seg.trim() ? this.#mdDiv(`md-${msg.id}-${i}`, renderMarkdown(seg)) : null)
+          : seg.view())
+    }
+    if (!msg.text) return null
+    return this.#mdDiv(`md-${msg.id}`, msg.role === 'user' ? userMarkdown(msg) : renderMarkdown(msg.text))
+  }
+
+  #mdDiv(key: string, mount: (el: Element) => void) {
+    return div({ class: 'md', key, onMounted: mount })
+  }
+
+  tool(t: Tool) {
+    const open = this.openTools.has(t.id)
+    const filePath = filePathOf(t.name, t.input)
+    const sum = filePath ?? toolSummary(t.input)
+    // Hand-rolled toggle, not <details>/<summary>: Chrome swallows custom-scheme
+    // (vscode://) anchor clicks inside <summary>.
+    return div({ class: ['tool', t.isError ? 'err' : '', open ? 'open' : ''] },
+      div({
+        class: 'tool-head',
+        onClick: () => {
+          if (open) this.openTools.delete(t.id); else this.openTools.add(t.id)
+          this.update()
+        },
+      },
+        span({ class: 'tool-caret' }, open ? '▾' : '▸'),
+        // Verb + summary wrap together so inline flow baseline-aligns them across
+        // their two fonts (see .tool-label).
+        div({ class: 'tool-label' },
+          span({ class: 'tool-name' }, t.name),
+          sum
+            ? (filePath
+                ? a({
+                    class: 'tool-sum link',
+                    title: filePath,
+                    onClick: (e: MouseEvent) => {
+                      e.preventDefault()
+                      e.stopPropagation()                            // don't toggle row
+                      tb.server.openFile(filePath)
+                    },
+                  }, filePath)
+                : span({ class: 'tool-sum' }, sum))
+            : null,
+        ),
+        t.result === undefined ? span({ class: 'tool-run' }, '…') : null,
+      ),
+      open ? this.toolBody(t) : null,
+      open && t.result !== undefined ? pre({ class: 'tool-out' }, t.result.slice(0, 4000)) : null,
+    )
+  }
+
+  // Diff view for editing tools; JSON for everything else.
+  toolBody(t: Tool) {
+    const hunks = diffHunks(t)
+    if (!hunks) return pre({ class: 'tool-in' }, JSON.stringify(t.input, null, 2))
+    return div({ class: 'diff' },
+      ...hunks.flatMap((h, i) => [
+        hunks.length > 1 ? div({ class: 'diff-step' }, `edit ${i + 1}/${hunks.length}`) : null,
+        h.old ? pre({ class: 'diff-old' }, String(h.old)) : null,
+        h.new ? pre({ class: 'diff-new' }, String(h.new)) : null,
+      ]),
+    )
+  }
+}
+
+class Root extends Component {
+  ready = false
+  cwd = ''
+  sessionId = ''
+  sessionPicker = new SessionPicker()
+  tokenPill = new TokenPill()
+  bulbsPill = new BulbsPill()
+  messageList = new MessageList()
+  tokens = { in: 0, out: 0, cached: 0, cacheCreate: 0 }
+  working = false                           // CC is mid-turn (live-chain leaf unresolved); from poll()
+  ownPid = 0                                // this host server's pid; the bulbs pill excludes it
+
+  #cursor = 0
+  #polling = false
+  #started = false
+
+  override onAttached() {
+    if (this.#started) return
+    this.#started = true
+    this.init()
+  }
+
+  // Only one status-bar popup open at a time: a pill calls this as it opens so any other
+  // open popup is dismissed (each pill's onClick stops propagation, so the rivals' outside-
+  // click closers never fire on their own).
+  closePopups(except?: unknown) {
+    if (this.sessionPicker !== except) this.sessionPicker.close()
+    if (this.tokenPill !== except) this.tokenPill.close()
+    if (this.bulbsPill !== except) this.bulbsPill.close()
+  }
+
+  async init() {
+    const i = await tb.server.info()
+    this.cwd = i.cwd
+    this.ownPid = i.pid ?? 0
+    this.ready = true
+    this.updateTitle()
+    this.update()
+    this.pump()
+  }
+
+  // Tab title "<session preview> — <cwd basename>" so multiple bulbs are
+  // distinguishable; falls back to the cwd basename, then "Claude Bulb".
+  updateTitle() {
+    const base = basename(this.cwd)
+    const preview = this.sessionPicker.currentPreview()
+    const short = truncate(preview, 40)
+    document.title = short && base ? `${short} — ${base}`
+      : short ? short
+      : base ? `Claude Bulb — ${base}`
+      : 'Claude Bulb'
+  }
+
+  // Poll the buffer every 600ms; the terminal drives turns, so entries pop in
+  // whenever CC flushes a line (no live streaming signal to chase).
+  pump() {
+    if (this.#polling) return
+    this.#polling = true
+    const tick = async () => {
+      try {
+        const { events, cursor, working } = await tb.server.poll(this.#cursor)
+        this.#cursor = cursor
+        for (const e of events) this.apply(e)
+        const workingChanged = working !== this.working
+        this.working = working
+        if (events.length || workingChanged) this.update()
+        if (events.length) this.messageList.scrollSoon()
+      } catch (err) {
+        console.error('[claude-bulb] poll failed', err)
+      }
+      setTimeout(tick, 600)
+    }
+    tick()
+  }
+
+  apply(e: ServerEvent) {
+    switch (e.type) {
+      case 'cleared':
+        this.messageList.clear()
+        this.tokens = { in: 0, out: 0, cached: 0, cacheCreate: 0 }
+        break
+      case 'session': this.sessionId = e.sessionId; this.updateTitle(); break
+      case 'user': this.messageList.applyUser(e); break
+      case 'assistant': this.messageList.applyAssistant(e); break
+      case 'tool_result': this.messageList.applyToolResult(e); break
+      case 'usage': this.tokens = { in: e.in, out: e.out, cached: e.cached, cacheCreate: e.cacheCreate }; break
+    }
+  }
+
+  view() {
+    return div({ class: 'app' },
+      this.messageList.view(),
+      this.statusbar(),
+    )
+  }
+
+  // Bottom strip: a right-aligned cluster of working indicator, session switcher,
+  // token count (working sits leftmost of the three).
+  statusbar() {
+    return div({ class: 'statusbar' },
+      div({ class: 'statusbar-actions' },
+        this.working ? div({ class: 'working' }, span({ class: 'working-dot' }), 'working…') : null,
+        this.bulbsPill.view(),
+        this.sessionPicker.view(),
+        this.tokenPill.view(),
+      ),
+    )
+  }
+}
+
+// Override the CLI's `<name> - typebulb` default tab title.
+document.title = 'Claude Bulb'
+
+new App({ root: new Root(), id: 'app' })
+```
+
+**styles.css**
+
+```css
+:root {
+  /* Light is the default; data-theme="dark" is set by the host (typebulb.com
+     or the typebulb CLI, sourced from prefers-color-scheme). */
+  --bg: rgb(255, 255, 255);
+  --fg: rgb(28, 28, 30);
+  --muted: rgb(96, 98, 106);
+  --panel: rgb(248, 249, 251);
+  --border: rgb(224, 224, 228);
+  --accent: rgb(58, 125, 232);
+  --user-bg: rgb(243, 243, 245);
+  --tool-bg: rgb(245, 246, 248);
+  --err: rgb(206, 60, 60);
+  --diff-add: rgb(40, 140, 70);
+  /* Prose measure for text (bubbles + notes) — kept to a readable line length.
+     Diagrams break out wider than this; see .md .mermaid. */
+  --content-max: 800px;
+  color-scheme: light;
+}
+
+html[data-theme="dark"] {
+  --bg: rgb(20, 20, 22);
+  --fg: rgb(232, 232, 236);
+  --muted: rgb(150, 152, 160);
+  --panel: rgb(30, 30, 32);
+  --border: rgb(54, 54, 60);
+  --accent: rgb(122, 162, 250);
+  --user-bg: rgb(40, 40, 44);
+  --tool-bg: rgb(30, 31, 36);
+  --err: rgb(240, 120, 120);
+  --diff-add: rgb(120, 210, 140);
+  color-scheme: dark;
+}
+
+/* Aliases for beautiful-mermaid, indirecting around a var-name collision with the
+   bulb's theme (see the renderMermaidSVG call). They still resolve to the live
+   theme at the use site. */
+:root {
+  --mm-bg: var(--bg);
+  --mm-fg: var(--fg);
+  --mm-line: var(--muted);
+  --mm-accent: var(--accent);
+  --mm-muted: var(--muted);
+  --mm-surface: var(--tool-bg);
+  --mm-border: var(--border);
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  height: 100vh;
+  overflow: hidden;
+  color: var(--fg);
+  background: var(--bg);
+  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+  font-size: 15px;
+  line-height: 1.55;
+}
+
+/* position:relative anchors the overlaid (absolute) statusbar to the viewport box. */
+.app { position: relative; display: flex; flex-direction: column; height: 100vh; }
+
+/* Bottom status strip, overlaid (not in flow) on the chat — which runs
+   full-height to the very bottom. The strip itself has NO fill, so the message
+   text shows through everywhere, right to the bottom edge. Only the items (the
+   pills) are opaque, so they overlay the text with visual precedence rather than
+   the strip cutting it off with a band. No border — the typebulb host's rounded
+   card is the only frame. */
+.statusbar {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  gap: .65rem;
+  /* .4rem inset on top/left/bottom; the right is larger to clear the scrollbar
+     the statusbar overlays — so the *visible* gap to the content edge matches the
+     other sides instead of the pills sitting flush against the scrollbar. */
+  padding: .4rem 1.35rem .4rem .4rem;
+  font-size: .8rem;
+  /* Drop the inherited 1.55 line-height so the bar's own strut doesn't add
+     phantom ascender/descender room above the pills. Everything in the bar
+     is a fixed-height pill or a shimmer text line — both look right at 1. */
+  line-height: 1;
+  min-width: 0;
+}
+.statusbar-actions {
+  margin-left: auto;
+  display: flex;
+  gap: .4rem;
+  align-items: center;
+}
+/* Chip shape shared by the status-bar pills (interactive: session chip, token
+   counter) and the working indicator (passive). One rule = one source of vertical
+   alignment, no element-type drift between siblings; inline-flex + line-height:1
+   + fixed height centers the glyph run by the box, not by the inherited line-box.
+   Opaque so they read cleanly over the message text the transparent strip lets
+   through. */
+.pill, .working {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  height: 1.7rem;
+  padding: 0 .7rem;
+  border-radius: 7px;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  color: var(--muted);
+  font-size: .8rem;
+  white-space: nowrap;
+  user-select: none;
+}
+/* Pills are <button>s: reset UA chrome (font/appearance/margin) and add the
+   interactive affordance. Slightly larger text than the passive indicator. */
+.pill {
+  font: inherit;
+  font-size: .85rem;
+  appearance: none;
+  margin: 0;
+  cursor: pointer;
+}
+.pill:hover { border-color: var(--accent); color: var(--accent); }
+
+/* The two status-bar chips each anchor an upward popover (token breakdown /
+   session list). Wrap = positioning context; the popover anchors bottom/right and
+   grows up-and-left — the chips sit in the right-aligned cluster, so left:0 would
+   run them off the viewport's right edge. */
+.token-wrap, .sid-wrap, .servers-wrap { position: relative; display: inline-block; }
+/* Each pill renders its wrap unconditionally, emitting an empty div when it has
+   nothing to show (no tokens / no session / nothing running). An empty wrap is
+   still a flex child, so .statusbar-actions' gap lands on both its sides —
+   doubling the visible gap between its neighbours. Collapse the empties so the
+   cluster spaces evenly regardless of which pills are present. */
+.token-wrap:empty, .sid-wrap:empty, .servers-wrap:empty { display: none; }
+.token-pop, .picker, .servers-pop {
+  position: absolute;
+  bottom: calc(100% + .35rem);
+  right: 0;
+  z-index: 10;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
+}
+.token-pop {
+  min-width: 360px;
+  max-width: 92vw;
+  padding: .35rem;
+  font-size: .85rem;
+}
+/* Each row: left text block, number pushed to the right edge. Sizing/rhythm matches .picker-row
+   (font .85rem, row padding .45rem .55rem) so the three status-bar popovers read as one family. */
+.token-line {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: .6rem;
+  padding: .45rem .55rem;
+}
+.token-line-title { font-weight: 600; color: var(--fg); margin-right: .5rem; }
+.token-line-lbl { color: var(--muted); font-size: .72rem; }
+.token-line-num { color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
+
+/* "working…" indicator: CC is mid-turn. Passive — driven by the live-chain leaf,
+   not a live token stream (the JSONL is flushed in batches, so this can sit lit
+   through a multi-minute buffering window). Shares the chip shape above; only adds
+   room for the pulsing dot. Non-interactive — no cursor / hover accent. */
+.working { gap: .45rem; }
+.working-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--accent);
+  animation: working-pulse 1.4s ease-in-out infinite;
+}
+@keyframes working-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
+@media (prefers-reduced-motion: reduce) { .working-dot { animation: none; opacity: .8; } }
+
+/* Session list — shares the popover chrome (.token-pop, .picker above); these are
+   just its own dimensions. */
+.picker {
+  width: min(440px, calc(100vw - 2rem));
+  max-height: 60vh;
+  overflow: hidden;
+  padding: .35rem;
+  display: flex;
+  flex-direction: column;
+  gap: .15rem;
+}
+/* The filter (.bulb-filter-control) pins at the top; the row list scrolls inside the capped box —
+   same shape as the launcher's .servers-pop / .bulb-list. */
+.picker-list { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-height: 0; overflow-y: auto; }
+.picker-empty { padding: .8rem; color: var(--muted); font-size: .85rem; text-align: center; }
+.picker-row {
+  display: flex;
+  gap: .6rem;
+  align-items: baseline;
+  padding: .45rem .55rem;
+  border-radius: 6px;
+  cursor: pointer;
+  border: 1px solid transparent;
+  font-size: .85rem;
+}
+.picker:focus { outline: none; }   /* the list owns its own highlight; no focus ring */
+.picker-row:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
+/* Keyboard cursor (arrow keys / hover) — matches the bulb picker's .active row. */
+.picker-row.active {
+  background: color-mix(in srgb, var(--accent) 18%, transparent);
+  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
+}
+/* The attached session — a leading accent dot in its own gutter slot, reserved (transparent) on
+   every row so titles align whether or not it's shown, and filled only on the attached row so it
+   reads as "you are here" even when the cursor has moved off. */
+.picker-dot {
+  flex: none;
+  align-self: center;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: transparent;
+}
+.picker-row.current .picker-dot { background: var(--accent); }
+.picker-preview {
+  flex: 1; min-width: 0;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  color: var(--fg);
+}
+.picker-time {
+  color: var(--muted);
+  font-size: .72rem;
+  min-width: 2.6rem; text-align: right;
+}
+
+/* Running-breakouts list — shares the popover chrome (.servers-pop above); its own dimensions +
+   per-row layout: the play/stop button + name read together on the left (▶/■ Title, name flex:1),
+   and the metadata/controls form a right-aligned cluster of fixed-width columns (logs · trust ·
+   time/port) that line up row-to-row — right-anchored, so the rightmost (time/port) always aligns and
+   the rest stack inward (logs and time/port share a width; trust is wider, to fit "restricted"). The
+   box is a FIXED size shared with the drilled-in console (.log-mode below): flipping list⇄console
+   swaps only the contents, not the frame, so it doesn't jump. The filter pins to the top and the list
+   scrolls inside (see .bulb-list). */
+.servers-pop {
+  width: min(560px, calc(100vw - 2rem));
+  height: min(66vh, 560px);
+  overflow: hidden;
+  padding: .35rem;
+  display: flex;
+  flex-direction: column;
+  gap: .15rem;
+}
+.server-row {
+  /* Subgrid: all rows share ONE set of column tracks (defined on .bulb-list). A per-row grid sizes
+     its columns independently — which is exactly what broke alignment (a stopped row with no
+     logs/port sized its tracks differently and its trust toggle drifted right). Spanning the parent's
+     tracks instead makes trust/logs/time line up row-to-row, while the parent's auto columns size to
+     the widest content so the cluster stays tight (no reserved min-width slack). Absent trust/logs
+     render an empty cell that still holds its column. */
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+  align-items: center;
+  /* Inset rounded highlight, matching the session picker. The background is the subgrid track area
+     (not bled out to the edge — that ran it under the scrollbar on the right while staying clear on
+     the left, an asymmetry). Text gets its breathing room inside the highlight via end-item margins
+     (.server-stop/.bulb-launch on the left, .server-port/.bulb-time on the right) rather than row
+     padding, which would shift the subgrid tracks and break alignment. */
+  padding: .15rem 0;
+  border-radius: 6px;
+  font-size: .85rem;
+}
+.server-row:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
+/* Keyboard-highlighted row (arrow-key cursor) — a touch stronger than hover so it stands out. */
+.server-row.active { background: color-mix(in srgb, var(--accent) 16%, transparent); }
+.server-name {
+  flex: 1; min-width: 0;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  color: var(--accent); text-decoration: none; cursor: pointer;
+}
+.server-name:hover { text-decoration: underline; }
+/* Port is a link to the running server (localhost:<port>), same target as the name. */
+.server-port { color: var(--muted); font-size: .76rem; font-variant-numeric: tabular-nums; text-decoration: none; text-align: right; margin-right: .4rem; }
+a.server-port:hover { color: var(--accent); text-decoration: underline; }
+/* Logs reads like a link (flips to this server's console), not a button. */
+.server-logs { color: var(--muted); font-size: .76rem; text-decoration: none; cursor: pointer; margin-left: .5rem; }
+.server-logs:hover, .server-logs.on { color: var(--accent); text-decoration: underline; }
+/* Launcher filter box — pinned above the list; type to narrow (matches name + path). The control
+   wrapper pins to the top and anchors the clear (×) at the far right (position:relative + the
+   input's right padding reserves its room). */
+.bulb-filter-control { position: relative; flex: none; margin-bottom: .35rem; }
+.bulb-filter {
+  font: inherit;
+  font-size: .82rem;
+  width: 100%;
+  box-sizing: border-box;
+  padding: .35rem 1.7rem .35rem .5rem;
+  border-radius: 6px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  color: var(--fg);
+}
+.bulb-filter::placeholder { color: var(--muted); }
+.bulb-filter:focus { outline: none; border-color: var(--accent); }
+/* Clear (×) — only rendered when the filter is non-empty; wipes it and refocuses the box. */
+.bulb-filter-clear {
+  position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
+  appearance: none; border: none; background: transparent; cursor: pointer;
+  color: var(--muted); font-size: 1.05rem; line-height: 1; padding: 0 .3rem; border-radius: 4px;
+}
+.bulb-filter-clear:hover { color: var(--accent); }
+/* Scrolls within the fixed-height popover so the filter stays put and the box never grows. */
+/* The shared grid for the launcher rows: each .server-row is a subgrid spanning these tracks, so
+   columns line up row-to-row. auto cols size to their widest content (tight, no slack); 1fr is the
+   name. A small right padding keeps the selected-row highlight off the scrollbar. */
+.bulb-list { display: grid; grid-template-columns: auto 1fr auto auto auto; column-gap: .6rem; row-gap: .05rem; align-items: center; align-content: start; padding-right: 4px; flex: 1; min-height: 0; overflow-y: auto; }
+/* A stopped bulb's name isn't a link (no running URL), so it stays plain foreground. */
+.server-name.stopped { color: var(--fg); }
+.bulb-time { color: var(--muted); font-size: .72rem; font-variant-numeric: tabular-nums; text-align: right; margin-right: .4rem; }
+/* The row's chrome buttons share one reset; sizing + colour differ below. Play/stop are round icon
+   buttons (friendlier, space-economic); the trust switch is text. Logs is a link, not a button
+   (see .server-logs above), so it's not in this group. */
+.server-stop, .bulb-launch, .trust-toggle {
+  font: inherit; appearance: none; margin: 0; cursor: pointer; box-sizing: border-box;
+  background: transparent; border: 1px solid var(--border); border-radius: 5px;
+  height: 1.7rem; display: inline-flex; align-items: center; justify-content: center;
+}
+.trust-toggle { font-size: .76rem; padding: 0 .5rem; color: var(--muted); justify-self: center; }
+.trust-toggle:hover, .trust-toggle.on { color: var(--accent); border-color: var(--accent); }
+.server-stop, .bulb-launch { width: 1.7rem; padding: 0; border-radius: 50%; margin-left: .4rem; }
+.btn-icon { display: block; }
+/* A stopped bulb's play button is dormant — the title is the primary launch target — so it's
+   hidden until the row is hovered or keyboard-selected. visibility (not display) reserves its slot,
+   so the name column doesn't shift when it appears. */
+.bulb-launch { color: var(--accent); visibility: hidden; }
+.server-row:hover .bulb-launch, .server-row.active .bulb-launch { visibility: visible; }
+.bulb-launch:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
+/* Launching: stays visible (hover-independent) and shimmers until the row flips to a stop button,
+   so the ~2s wait reads as "working" rather than a dead click. Transient — driven by the in-memory
+   launching set, never persisted. */
+.bulb-launch.launching {
+  visibility: visible; border-color: var(--accent);
+  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--accent) 35%, transparent) 50%, transparent 70%);
+  background-size: 250% 100%;
+  animation: bulb-shimmer 1.1s linear infinite;
+}
+@keyframes bulb-shimmer { from { background-position: 250% 0; } to { background-position: -250% 0; } }
+@media (prefers-reduced-motion: reduce) {
+  .bulb-launch.launching { animation: none; background: color-mix(in srgb, var(--accent) 18%, transparent); }
+}
+.server-stop { color: var(--muted); }
+.server-stop:hover { color: var(--err); border-color: var(--err); }
+/* Elevation prompt (VS-Code-Workspace-Trust style) — a modal over the whole view, since a
+   denied capability is worth interrupting for. Backdrop dims; the card holds the choice. */
+.trust-back {
+  position: fixed; inset: 0; z-index: 50;
+  background: rgba(0, 0, 0, .5);
+  display: flex; align-items: center; justify-content: center;
+  padding: 1rem;
+}
+.trust-modal {
+  width: min(420px, 100%);
+  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
+  box-shadow: 0 12px 48px rgba(0, 0, 0, .5);
+  padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .6rem;
+}
+.trust-modal-h { font-size: 1rem; font-weight: 600; color: var(--fg); }
+.trust-modal-b { font-size: .85rem; color: var(--fg); line-height: 1.45; }
+.trust-modal-warn { font-size: .78rem; color: var(--muted); line-height: 1.4; }
+.trust-modal-acts { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .2rem; }
+.trust-no, .trust-yes {
+  font: inherit; font-size: .82rem; appearance: none; margin: 0; cursor: pointer;
+  padding: .35rem .8rem; border-radius: 7px; border: 1px solid var(--border); background: transparent; color: var(--fg);
+}
+.trust-no:hover { border-color: var(--fg); }
+.trust-yes {
+  color: var(--accent);
+  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
+  background: color-mix(in srgb, var(--accent) 14%, transparent);
+}
+.trust-yes:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
+/* Drilled-in streaming console for one running server. It takes over the whole bulbs
+   popover (the list flips to it; ← back flips home), so it's wider than the list and its
+   body fills the popover's height. overflow:hidden lets the rounded popover border clip the
+   square head/body; the body scrolls internally. */
+.servers-pop.log-mode {
+  padding: 0;   /* same fixed width/height as the list (.servers-pop); only the chrome differs */
+}
+.servers-pop.log-mode:focus { outline: none; }
+.bulb-log-head {
+  display: flex; align-items: center; justify-content: flex-end; gap: .5rem;
+  padding: .3rem .5rem; background: var(--panel);
+  border-bottom: 1px solid var(--border);
+}
+.bulb-log-back {
+  font: inherit; font-size: .76rem; appearance: none; margin: 0;
+  padding: .15rem .5rem; border-radius: 5px;
+  background: transparent; border: 1px solid var(--border);
+  color: var(--muted); cursor: pointer; white-space: nowrap;
+}
+.bulb-log-back:hover { color: var(--accent); border-color: var(--accent); }
+.bulb-log-name { min-width: 0; color: var(--muted); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.bulb-log-body {
+  flex: 1; min-height: 0;
+  margin: 0; padding: .5rem .6rem;
+  overflow: auto;                                  /* top-anchored normal flow — output reads top→down */
+  background: var(--bg);
+  font: .72rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  color: var(--fg);
+}
+.bulb-log-text { white-space: pre-wrap; word-break: break-word; }
+/* messages */
+.messages {
+  flex: 1;
+  overflow-y: auto;
+  /* Content runs under the overlaid statusbar rather than stopping above it.
+     Left padding is larger to clear the turn stripe in the left gutter; the
+     bottom is larger still to clear the overlaid statusbar pills (~2.1rem:
+     .4rem inset + 1.7rem pill) so the last line isn't hidden behind them. */
+  padding: 1.25rem 1.25rem 2.5rem 2.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.note {
+  display: flex;
+  align-items: baseline;
+  gap: .5rem;
+  color: var(--muted);
+  font-size: .9rem;
+  max-width: var(--content-max);
+  width: 100%;
+  margin: 0 auto;
+}
+.bubble {
+  position: relative;
+  max-width: var(--content-max);
+  width: 100%;
+  margin: 0 auto;
+}
+.bubble.user {
+  background: var(--user-bg);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: .7rem .9rem;
+}
+/* Consecutive tool-only bubbles sit tight via negative margin (flex `gap`
+   can't be overridden per sibling pair). The adjacent-sibling selector leaves
+   the first tools-only bubble's gap intact, preserving the turn boundary. */
+.bubble.tools-only + .bubble.tools-only { margin-top: -.9rem; }
+
+/* Turn stripe — a 2px colored bar to the left of each bubble. All bubbles in
+   one user→assistant turn share a color; the palette cycles through 5 so
+   adjacent turns are visually distinct when scrolling. Sits outside the
+   bubble's left edge in the messages container's padding gutter.
+   By default top/bottom extend half a gap beyond the bubble so same-turn
+   neighbours' stripes meet seamlessly across the 1rem flex gap. The two
+   turn-boundary overrides below clip those extensions so a turn's stripe
+   starts at the top of its user bubble and ends at the bottom of its last
+   bubble — leaving the full 2rem inter-turn gap stripe-free as a separator.
+   --border-w compensates the 1px padding-edge offset that user bubbles' border
+   would otherwise introduce — without it, stripes alternate 1px inset between
+   user/assistant rows. */
+.bubble { --border-w: 0px; }
+.bubble.user { --border-w: 1px; }
+.bubble::before {
+  content: '';
+  position: absolute;
+  /* Offsets subtract --border-w: absolute positioning anchors to the
+     padding-edge (inside the border), so a user bubble's 1px border would
+     otherwise shave 1px off each stripe edge. */
+  left: calc(-1rem - var(--border-w));
+  top: calc(-.5rem - var(--border-w));
+  bottom: calc(-.5rem - var(--border-w));
+  width: 2px;
+  background: var(--turn-color, transparent);
+}
+/* Clip stripe at turn boundaries. A user bubble always starts a turn → no
+   upward extension. A bubble followed by a user bubble is the last of its
+   turn → no downward extension. Same for the very last bubble in the list
+   (an in-flight turn whose last assistant message is the end of the stream).
+   Same `0 - var(--border-w)` form as the default top/bottom so user bubbles'
+   1px border still aligns with the stripe edge. */
+.bubble.user::before { top: calc(0px - var(--border-w)); }
+.bubble:has(+ .bubble.user)::before,
+.bubble:last-child::before { bottom: calc(0px - var(--border-w)); }
+/* Extra gap before each new turn (user bubble preceded by anything). Combined
+   with the container's 1rem gap → ~2rem visible between turns vs ~1rem within
+   a turn. Doesn't fire on the very first bubble (no preceding sibling). */
+.bubble + .bubble.user { margin-top: 1rem; }
+.bubble.turn-0 { --turn-color: #4cb35a; }   /* green */
+.bubble.turn-1 { --turn-color: #e89a3c; }   /* amber */
+.bubble.turn-2 { --turn-color: #d36b9a; }   /* pink */
+.bubble.turn-3 { --turn-color: #9970d6; }   /* purple */
+.bubble.turn-4 { --turn-color: #3cb8b3; }   /* teal */
+
+/* rendered markdown */
+.md { word-break: break-word; }
+/* Markdown links (often many file:line citations per message) — restrained like
+   the rest of the bulb's links: accent, no persistent underline, reveal it only
+   on hover. Without this they'd carry the browser-default underline-on-every-one. */
+.md a { color: var(--accent); text-decoration: none; }
+.md a:hover { text-decoration: underline; }
+.md :first-child { margin-top: 0; }
+.md :last-child { margin-bottom: 0; }
+.md p { margin: .5rem 0; }
+/* Thematic break — also the divider between merged consecutive user sends (see
+   applyUser); faint so the bubble still reads as one turn. */
+.md hr {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: .55rem 0;
+  opacity: .5;
+}
+.md pre {
+  background: var(--tool-bg);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: .7rem .85rem;
+  overflow-x: auto;
+}
+/* Blockquote: left bar + faint tint + muted text — a quiet "quoted" callout. The bar
+   is mixed toward --border so it stays distinct from the bright turn stripe in the
+   gutter, and the tint is light enough not to read as a code/output panel. */
+.md blockquote {
+  margin: .5rem 0;
+  padding: .35rem .85rem;
+  border-left: 3px solid color-mix(in srgb, var(--accent) 50%, var(--border));
+  background: color-mix(in srgb, var(--accent) 6%, transparent);
+  border-radius: 0 6px 6px 0;
+  color: var(--muted);
+}
+.md blockquote :first-child { margin-top: 0; }
+.md blockquote :last-child { margin-bottom: 0; }
+.md code {
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: .88em;
+}
+.md :not(pre) > code {
+  background: var(--tool-bg);
+  padding: .1em .35em;
+  border-radius: 5px;
+}
+.md table { border-collapse: collapse; }
+.md th, .md td { border: 1px solid var(--border); padding: .3rem .55rem; }
+
+/* Full-lane breakout — a mermaid diagram (the whole element) and a SPREAD bulb's iframe step
+   out of the narrow prose column to the transcript width so wide content (a flowchart, a data
+   table) gets room instead of being squeezed. The bulb's *wrapper* never breaks out — only
+   its iframe does (see `.bulb-embed.spread > iframe` below), so the wrapper and the controls
+   anchored to it stay put in the prose column; the geometry here is the shared lane the iframe
+   reuses. Same lane width, same off-centre nudge (the messages gutter is 1rem wider on the left
+   for the turn stripe, so a plain centre would sit right-of-centre). position + z-index:0 lift
+   the box above the turn stripe (.bubble::before) the breakout crosses — it's later in tree order
+   — but below later-in-tree pills; the mermaid SVG is transparent so a bg backs it, the bulb's
+   iframe is opaque so it occludes the stripe itself. */
+.md .mermaid {
+  width: calc(100vw - 2rem);
+  margin: .6rem 0;
+  margin-left: calc((100% - (100vw - 2rem)) / 2 - .5rem);
+  margin-right: auto;
+  position: relative;
+  z-index: 0;
+  background: var(--bg);
+}
+
+/* Diagram specifics: scroll when wider than the lane; `safe center` centres one that fits and
+   left-aligns one that overflows, so a wide flowchart scrolls from its start node. The SVG is
+   transparent, so the turn stripe the breakout crosses shows through it — a bg box-shadow backs
+   the diagram to occlude it (and clears the h-scrollbar edge). The bulb embed is opaque (its
+   iframe fills the box), so it occludes the stripe itself and gets NO shadow — a shadow there
+   would paint its 1rem ring over the half-line of prose just above the embed (the gap is .6rem). */
+.md .mermaid {
+  overflow-x: auto;
+  display: flex;
+  justify-content: safe center;
+  box-shadow: 0 0 0 1rem var(--bg);
+}
+/* flex-shrink:0: otherwise the SVG shrinks to the flex container and its viewBox
+   scales it down — no overflow, no scrollbar. Natural width is what scrolls. */
+.md .mermaid svg { max-width: none; height: auto; flex: 0 0 auto; }
+
+/* Raw ```svg``` embeds: no breakout — these are drawings (smiley, plot), not wide
+   diagrams, so keep them in the prose column, centred and capped at its width. */
+.md .svg-embed { margin: .6rem 0; display: flex; justify-content: center; }
+.md .svg-embed svg { max-width: 100%; height: auto; }
+
+/* ````bulb```` embeds: a sandboxed nested app. createBulbFrame owns the iframe (auto-height,
+   borderless). No frame of our own — like the mermaid/svg embeds, it sits in the flow rather
+   than in a box, so it reads as part of the transcript; the rounded clip just tidies the corners
+   of a bulb that paints its own background. `inline` (default) keeps it in the prose column and
+   caps its height (below); `spread` adds full-lane breakout + spacing from the shared rule above.
+   position:relative anchors the controls overlay in BOTH modes (spread re-declares it for the
+   z-index lift). .err is the compile-failure fallback; .bulb-err-strip is a runtime-error strip
+   under a live embed (both monospace, muted red). */
+.md .bulb-embed {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  z-index: 0;
+  /* Always cut the turn stripe, both modes: an opaque bg over position:relative + z-index:0
+     paints above .bubble::before, and a -1rem left extension reaches the stripe in the gutter
+     without a full breakout (padding-left:1rem keeps the content in the prose column; the box's
+     right edge stays at prose-right, so the controls anchored there don't move). In spread mode the
+     iframe's own breakout covers the stripe too. */
+  background: var(--bg);
+  margin-left: -1rem;
+  padding-left: 1rem;
+  /* Symmetric vertical gap as opaque padding, not margin: it occludes the stripe top and bottom
+     so it's cut flush with the prose (no stub in a transparent gap), and is the same amount above
+     and below to separate the bulb from surrounding text. margin top/bottom are zeroed — and the
+     abutting prose margins too (below) — so the gap butts against the text. */
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: 1.1rem;
+  padding-bottom: 1.1rem;
+}
+/* Inline (default): cap the embed's height so a tall bulb doesn't run away down the transcript.
+   Past the cap the embed scrolls internally (its own overflow, set by the host↔embed protocol —
+   the iframe element can't scroll its srcdoc from out here). spread removes the cap. */
+.md .bulb-embed.inline iframe { max-height: 80dvh; }
+/* The frame host is a layout-less wrapper (domeleon owns the node; we parent the live iframe into
+   it once) — display:contents lifts the iframe to be a flex child of .bulb-embed, so the sizing and
+   spread-breakout rules target it directly, exactly as when it was appended as a direct child. The
+   code toggle hides it via .code-open rather than unmounting, so the bulb keeps its state. */
+.bulb-frame { display: contents; }
+.md .bulb-embed.code-open .bulb-frame { display: none; }
+/* Spread: the inner surface — the live iframe OR the code view behind the toggle, whichever is
+   shown — breaks out to the full lane, while the wrapper stays in the prose column (so the
+   controls anchored to it hold at prose-right, not the lane's hard-right edge). Spread is an
+   embed-level state, so both surfaces honour it. Same lane geometry as `.mermaid` above; 100%
+   here resolves against the prose-width wrapper. `width !important` beats createBulbFrame's
+   inline `width:100%` on the iframe (harmless on the code view, which has no inline width); both
+   are opaque, so position/z-index:0 lift them over the turn stripe they now cross. */
+.md .bulb-embed.spread iframe,
+.md .bulb-embed.spread > .bulb-code {
+  width: calc(100vw - 2rem) !important;
+  margin-left: calc((100% - (100vw - 2rem)) / 2 - .5rem);
+  margin-right: auto;
+  position: relative;
+  z-index: 0;
+}
+/* Kill the transparent margin between the bulb and the prose it abuts (top and bottom):
+   the bulb's own opaque padding is the gap, and a leftover prose margin would let the
+   turn stripe show through it as a stub past the last/next line of text. */
+.md :has(+ .bulb-embed) { margin-bottom: 0; }
+.md .bulb-embed + * { margin-top: 0; }
+/* The rounded clip lives on the inner surfaces, not the embed (whose padding is now the
+   gap), so the bulb's own card — the iframe, or the code view behind the toggle — is
+   what carries the corners. */
+.md .bulb-embed iframe,
+.md .bulb-embed > .bulb-code {
+  border-radius: 8px;
+}
+/* Overlay pill: a small hover-revealed control floated at a container's
+   bottom-right, shared by the embed breakout button and the message copy button.
+   Muted at rest, accent on hover (instant, matching the status pills). The
+   container supplies the reveal; per-button bits layer on top. */
+.overlay-pill {
+  position: absolute;
+  bottom: .5rem;
+  right: .5rem;
+  font: inherit;
+  font-size: .72rem;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--muted);
+  padding: .12rem .45rem;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity .2s ease;
+}
+.overlay-pill:hover { color: var(--accent); border-color: var(--accent); }
+
+/* Controls (code ⇄ run, then copy, then breakout) — a centered overlay straddling the
+   bulb's top edge: clear of the running bulb below, free to overlap the prose above.
+   Absolute, so toggling run↔code (which resizes the bulb below) never moves it, and so
+   the bulb's vertical gap stays small. Revealed on embed-hover or focus; inside the row
+   the shared .overlay-pill drops its own corner-anchoring. */
+.md .bulb-controls {
+  position: absolute;
+  top: 0;
+  right: .5rem;
+  z-index: 2;
+  display: flex;
+  gap: .4rem;
+  transform: translateY(-50%);
+}
+.md .bulb-controls .overlay-pill { position: static; }
+.md .bulb-embed:hover .bulb-controls .overlay-pill,
+.md .bulb-controls .overlay-pill:focus-visible { opacity: 1; }
+.md .bulb-breakout:disabled { cursor: default; opacity: 1; }
+/* Breakout in flight: shimmer through the ~2s write+spawn wait so the click reads as "working"
+   rather than dead — the same treatment (and shared keyframes) as the launcher's play button
+   (.bulb-launch.launching). :disabled already keeps it visible if the pointer leaves. */
+.md .bulb-breakout.launching {
+  color: var(--accent); border-color: var(--accent);
+  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--accent) 35%, transparent) 50%, transparent 70%);
+  background-size: 250% 100%;
+  animation: bulb-shimmer 1.1s linear infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .md .bulb-breakout.launching { animation: none; background: color-mix(in srgb, var(--accent) 18%, transparent); }
+}
+/* Copy pill "copied" flash — mirrors the message .copy.done accent cue, scoped to the
+   embed control so it doesn't pick up the bubble-hover reveal. */
+.md .bulb-copy.done { color: var(--accent); border-color: var(--accent); }
+/* Source view behind the toggle — the bulb's .bulb.md rendered as markdown (file
+   labels + fenced code panels via the shared .md rules). Just a scroll container
+   here, capped so a long bulb doesn't blow out the transcript. No `display` — the
+   [hidden] attribute the toggle flips drives visibility. */
+/* Code view: a streamlined source listing — one labeled bar per file with the code
+   flush beneath, not a stack of bordered panels. The container is just the scroll box;
+   the file-label bar is the only fill (overriding .md pre's panel chrome below). */
+.md .bulb-code {
+  margin: 0;
+  padding: 0;
+  max-height: 480px;
+  overflow: auto;
+  font-size: .85rem;
+  /* A distinct surface from the transcript: the live bulb blends into the flow, but the
+     code view reads as an inspector panel. Code panels (.md pre below) are transparent, so
+     they show this through. */
+  background: var(--tool-bg);
+}
+/* **file.ext** labels render as <p><strong>…</strong></p>; a bulb's source has no other
+   top-level prose, so styling the paragraph as a header bar only ever hits a label. */
+.md .bulb-code p {
+  margin: 0;
+  padding: .3rem .85rem;
+  /* A touch darker than the code surface so the file-label header stays distinct now
+     that the whole code view shares one background. */
+  background: color-mix(in srgb, var(--fg) 6%, var(--tool-bg));
+  border-top: 1px solid var(--border);
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: .78rem;
+  color: var(--muted);
+}
+.md .bulb-code p:first-child { border-top: none; }
+.md .bulb-code p strong { font-weight: 600; color: var(--fg); }
+/* Code flush on the embed bg — drop the inherited .md pre box (border/bg/radius). */
+.md .bulb-code pre {
+  margin: 0;
+  padding: .5rem .85rem .85rem;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  overflow-x: auto;
+}
+/* hljs token colors for the code view, mapped to the bulb's own theme vars (no hljs
+   theme stylesheet) so highlighting follows light/dark rather than baking a palette
+   that would clash in dark mode. Minimal token set — enough for legible TS/HTML/CSS/
+   JSON/markdown without chasing every grammar scope. */
+.bulb-code .hljs-comment, .bulb-code .hljs-quote { color: var(--muted); font-style: italic; }
+.bulb-code .hljs-keyword, .bulb-code .hljs-literal, .bulb-code .hljs-built_in { color: var(--accent); }
+.bulb-code .hljs-tag, .bulb-code .hljs-name, .bulb-code .hljs-selector-tag { color: var(--accent); }
+.bulb-code .hljs-string, .bulb-code .hljs-regexp, .bulb-code .hljs-meta .hljs-string {
+  color: color-mix(in srgb, var(--diff-add) 85%, var(--fg));
+}
+.bulb-code .hljs-number { color: color-mix(in srgb, var(--accent) 55%, var(--fg)); }
+.bulb-code .hljs-attr, .bulb-code .hljs-attribute, .bulb-code .hljs-property, .bulb-code .hljs-type {
+  color: color-mix(in srgb, var(--accent) 75%, var(--fg));
+}
+.bulb-code .hljs-title, .bulb-code .hljs-title.function_, .bulb-code .hljs-section {
+  color: var(--fg); font-weight: 600;
+}
+.bulb-code .hljs-symbol, .bulb-code .hljs-bullet, .bulb-code .hljs-punctuation { color: var(--muted); }
+.md .bulb-embed.err {
+  padding: .6rem .8rem;
+  font-family: ui-monospace, monospace;
+  font-size: .85em;
+  color: color-mix(in srgb, #e23 70%, var(--fg));
+  white-space: pre-wrap;
+}
+.md .bulb-err-strip {
+  padding: .45rem .7rem;
+  border-top: 1px solid var(--border);
+  background: color-mix(in srgb, #e23 8%, var(--bg));
+  font-family: ui-monospace, monospace;
+  font-size: .8em;
+  color: color-mix(in srgb, #e23 75%, var(--fg));
+  white-space: pre-wrap;
+}
+
+/* tool calls */
+/* Closed tool: just a single-line row, no chrome — a tool-only turn stays a
+   tight list, not N stacked panels. Open tools get the panel treatment below. */
+.tool {
+  font-size: .85rem;
+}
+/* Clickable caret row, shared by tool heads and the collapsed-turn summary: a flex
+   row that's an unselectable click target. align-items:center centers the caret
+   against the label box (verb↔summary alignment is handled inside .tool-label). */
+.tool-head, .turn-summary {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  padding: .15rem 0;
+  cursor: pointer;
+  user-select: none;
+}
+.tool.open {
+  margin-top: .55rem;
+  background: var(--tool-bg);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+}
+.tool.open .tool-head {
+  padding: .4rem .6rem;
+}
+/* line-height: 1 keeps the oversized caret's box from inflating the row height. */
+.tool-caret { color: var(--muted); font-size: 1.4rem; line-height: 1; width: 1ch; }
+.tool-name { font-weight: 600; color: var(--accent); }
+/* Errors here are routine (a first-read miss the retry fixes), so a failed tool
+   recolors just its verb rather than boxing the whole row — a quiet signal. */
+.tool.err .tool-name { color: var(--err); }
+
+/* Collapsed-turn summary strip (intermediate steps hidden behind the final
+   answer). Same caret/row shape as a tool head, italic muted label. */
+.turn-summary { color: var(--muted); font-size: .85rem; }
+.turn-summary-text { font-style: italic; }
+.turn-summary:hover .turn-summary-text { color: var(--fg); }
+/* Verb + summary are inline siblings sharing one line box and font, so they sit
+   on a common baseline. Ellipsis truncation lives on the wrapper, not the
+   children — overflow:hidden on the summary itself skews its baseline. */
+.tool-label {
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.tool-sum {
+  margin-left: .5rem;
+  color: var(--muted);
+  /* Re-enable selection the .tool-head blankets off: the verb/caret stay an
+     unselectable click target, but the summary is real data (path, pattern,
+     command) worth copying. A drag selects; a plain click still toggles. */
+  user-select: text;
+}
+.tool-run { color: var(--muted); }
+
+/* Code-display panels inside an open tool card: raw input/output (.tool-in,
+   .tool-out) and per-hunk diff halves (.diff-old, .diff-new). All four share
+   the same monospace block geometry — padding, max-height with scroll,
+   pre-wrap with word-break, top-divider — so consolidating here means edits
+   to "how a code panel looks" land in one place. Color treatment is the only
+   per-variant difference. */
+.tool-in, .tool-out, .diff-old, .diff-new {
+  margin: 0;
+  padding: .55rem .7rem;
+  border-top: 1px solid var(--border);
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: ui-monospace, Menlo, monospace;
+  font-size: .8rem;
+  max-height: 320px;
+  overflow: auto;
+}
+.tool-out { color: var(--muted); }
+.diff-old {
+  background: color-mix(in srgb, var(--err) 14%, transparent);
+  color: var(--err);
+}
+.diff-new {
+  background: color-mix(in srgb, var(--diff-add) 16%, transparent);
+  color: var(--diff-add);
+}
+
+/* Path link: plain accent, underline only on hover. skip-ink:none so the
+   underline stays solid under a path's descenders and slashes. */
+.tool-sum.link {
+  color: var(--accent);
+  text-decoration: none;
+}
+.tool-sum.link:hover { text-decoration: underline; text-decoration-skip-ink: none; }
+
+.diff { display: flex; flex-direction: column; }
+.diff-step {
+  padding: .35rem .7rem;
+  border-top: 1px solid var(--border);
+  color: var(--muted);
+  font-size: .72rem;
+  text-transform: uppercase;
+  letter-spacing: .06em;
+}
+
+.thinking { margin-bottom: .4rem; font-size: .82rem; color: var(--muted); }
+.thinking pre { white-space: pre-wrap; }
+
+/* Copy button: an .overlay-pill revealed on bubble-hover. */
+.bubble:hover .copy { opacity: 1; }
+/* "copied" flash: eases into accent on click (CopyButton is a Component, so its
+   node persists across re-renders and the transition actually runs). The color
+   transition lives only on .done, not the base pill, so hover stays instant — the
+   trade is the revert snaps back rather than easing out. */
+.copy.done {
+  opacity: 1;
+  color: var(--accent);
+  border-color: var(--accent);
+  transition: opacity .2s ease, color .5s ease, border-color .5s ease;
+}
+/* Assistant bubbles carry no padding, so the shared .5rem bottom would float the
+   pill above the last line — pin it to the text's bottom edge. */
+.bubble.assistant .copy { bottom: 0; }
+```
+
+**index.html**
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.css">
+<div id="app"></div>
+```
+
+**config.json**
+
+```json
+{
+  "description": "Read-only browser mirror of your project's Claude Code session: rendered markdown and math, collapsible tools and diffs, a session picker and token counter. Tails the on-disk transcript and drives nothing.",
+  "dependencies": {
+    "domeleon": "^0.6.0",
+    "markdown-it": "^14.1.0",
+    "katex": "^0.16.22",
+    "beautiful-mermaid": "^1.1.3",
+    "dompurify": "^3.2.6",
+    "highlight.js": "^11.10.0",
+    "typebulb": "^0.9.7"
+  }
+}
+```