typebulb 0.10.7 → 0.11.0

package/bulbs/claude.bulb.md

@@ -1,3345 +0,0 @@
----
-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 { launchBulbServer, listBulbServers, stopBulbServer, readServerLog, listBulbFiles as listProjectBulbFiles, slugifyBulbName, isBulbTrusted, setBulbTrusted, predictBulbTrust, openInEditor } 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,
-]
-function isInternal(text: string): boolean {
-  const t = text.trim()
-  return !!t && INTERNAL_PATTERNS.some(p => p.test(t))
-}
-
-// IDE-injected context (opened-file, selection, …) the editor integration splices into the user's
-// text block — sometimes as the whole block, often inline beside what the user typed. Unlike the
-// envelopes above it can't be anchored start-to-end, so strip the tag spans wherever they sit; what
-// the user actually typed survives. A wholly-IDE block strips to '' and drops out entirely.
-const IDE_CONTEXT = /<ide_[a-z_]+>[\s\S]*?<\/ide_[a-z_]+>/gi
-function stripIdeContext(text: string): string {
-  return text.replace(IDE_CONTEXT, '')
-}
-
-// The display-ready text of a user message: IDE context stripped out, internal/synthetic noise
-// reduced to ''. Empty ⇒ nothing human-authored to show. Shared by applyEntry (the transcript), the
-// queued-command path, and readPreview (the picker) — so an "<ide_opened_file>" block is neither
-// rendered nor mistaken for the kickoff prompt.
-function cleanUserText(text: string): string {
-  const t = stripIdeContext(text).trim()
-  return t && !isInternal(t) ? t : ''
-}
-// Same, for an array-shaped `type:'text'` block; '' for non-text blocks.
-function userTextBlock(b: ContentBlock | undefined): string {
-  return b?.type === 'text' && typeof b.text === 'string' ? cleanUserText(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') {
-      const text = cleanUserText(content)
-      if (text) s.buffer.push({ type: 'user', text })
-    } 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 {
-          const text = userTextBlock(b)
-          if (text) s.buffer.push({ type: 'user', 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 = cleanUserText(toText(entry.attachment.prompt))   // string in current CC; toText also tolerates older array shapes
-    if (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') {
-        extracted = cleanUserText(content)
-      } else if (Array.isArray(content)) {
-        // Concatenate the real user-text blocks; userTextBlock strips IDE context / drops internal
-        // ones so an "<ide_opened_file>" entry isn't mistaken for the kickoff prompt — we fall through.
-        extracted = content.map(userTextBlock).filter(Boolean).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) {
-  // The detached spawn + editor resolution is the typebulb capability (openInEditor); the host
-  // owns only the policy that a relative-path citation routes here (onMarkdownClick in code.tsx).
-  openInEditor(filePath, line)
-  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 (listProjectBulbFiles) is the typebulb
-// capability; it already excludes the package built-ins — claude.bulb.md and every copy of it — at the
-// source, via the one registry that defines them (builtins.ts), so there is no self-exclusion to
-// re-derive here. The host only overlays each bulb's remembered trust tier from the store.
-export async function listBulbFiles() {
-  return listProjectBulbFiles(state.cwd)
-    .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
-  // Only a real boolean is an explicit decision. `undefined` (no decision) crosses the tb.server
-  // JSON boundary as `null`, so guard on `!= null` — a bare launch must NOT clobber the store.
-  if (trust != null) setBulbTrusted(file, trust)
-  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.
-// A hover-revealed copy pill for a rendered fence. Every fenced block — code, svg, mermaid, an
-// unrecognised language — flows through the fence rule below, and the thing worth copying is always
-// its raw body, so one primitive covers them all. The source rides the button's own data-src
-// (escaped going in; getAttribute auto-unescapes coming out, so multi-line bodies round-trip), which
-// decouples the delegated handler from each block's container structure. `.copyable` is the shared
-// marker the rule stamps on every block so one CSS rule can reveal the pill on hover.
-function copyButton(src: string): string {
-  return `<button class="overlay-pill copy-src" type="button" title="Copy source" data-src="${md.utils.escapeHtml(src)}">copy</button>`
-}
-
-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()
-  // Live embeds (svg, mermaid) are an assistant medium — they render only in assistant turns. In a
-  // user turn (env.userMessage, set by userMarkdown) they fall through to a plain source code block:
-  // the svg chop and the mermaid lane-breakout both assume the transparent assistant flow and clash
-  // with the opaque, padded, rounded user card, and a user's pasted/quoted markup reads better as its
-  // literal source anyway. KaTeX/@mentions/links still render in user turns (those aren't gated here).
-  const live = !(env as { userMessage?: boolean })?.userMessage
-  // 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' && live) {
-    const safe = DOMPurify.sanitize(t.content, { USE_PROFILES: { svg: true, svgFilters: true } })
-    return `<div class="embed svg-embed copyable">${safe}${copyButton(t.content)}</div>`
-  }
-  if (lang === 'mermaid' && live) {
-    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 copyable">${svg}${copyButton(t.content)}</div>`
-    } catch { /* fall through to a plain code block */ }
-  }
-  // Every other fence (code, an unrecognised language, or a non-live svg/mermaid in a user turn) is a
-  // copyable source block: the default <pre><code> wrapped so it gets the same hover copy pill. The
-  // wrapper — not the <pre> — is the `.md` flow child now; see `.code-block` CSS for the rhythm.
-  return `<div class="code-block copyable">${defaultFence(tokens, idx, opts, env, self)}${copyButton(t.content)}</div>`
-}
-
-// 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))`)
-    }
-  }
-}
-
-// Fit each raw ```svg``` embed to its content. A raw <svg> with only a viewBox has NO intrinsic size,
-// so it defaults to width:100% and stretches to fill the column — which both makes the container's
-// justify-content:center moot (where the art sits *inside* the viewBox is all that positions it, so a
-// drawing parked off-centre in an oversized box reads as left/right-aligned) and blows a small drawing
-// up to a column-wide wall. Two coupled steps fix both: (1) tighten the viewBox to the content's bbox,
-// then (2) set the display width to that bbox's user-unit extent as px (1 unit ≈ 1px), capped by the
-// CSS max-width:100%. Now it renders small when small (and the now-narrower svg actually centres), and
-// a genuinely large drawing still caps at the column. getBBox is geometry-only — it ignores stroke,
-// which paints up to half its width *outside* the geometry — so the viewBox is padded by the largest
-// painted half-stroke (clipping depends on stroke width, not drawing size; a fixed % loses to a thick
-// stroke on a small drawing). The +1 is a hairline guard for anti-aliasing / curve overshoot; pad is 0
-// when nothing strokes (fills never overflow). Skips a node that isn't measurable (zero-area, or laid
-// out inside a collapsed turn → getBBox throws / returns 0), leaving it as authored.
-function fitSvgEmbeds(root: Element) {
-  for (const svg of root.querySelectorAll<SVGSVGElement>('.svg-embed svg')) {
-    try {
-      const b = svg.getBBox()
-      if (!b.width || !b.height) continue
-      let half = 0
-      for (const el of svg.querySelectorAll<SVGElement>('*')) {
-        const cs = getComputedStyle(el)                      // computed, so it catches attribute, CSS, and inherited widths
-        if (cs.stroke && cs.stroke !== 'none') half = Math.max(half, parseFloat(cs.strokeWidth) / 2)
-      }
-      const pad = half ? half + 1 : 0
-      svg.setAttribute('viewBox', `${b.x - pad} ${b.y - pad} ${b.width + pad * 2} ${b.height + pad * 2}`)
-      svg.style.width = `${b.width + pad * 2}px`              // natural size (units≈px); max-width:100% caps it, height:auto keeps ratio
-    } catch { /* not laid out / unmeasurable — leave the authored viewBox */ }
-  }
-}
-
-// 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) {
-  // Per-fence copy: the source is on the button's own data-src (see copyButton), so no container walk.
-  const copyBtn = (e.target as Element | null)?.closest<HTMLButtonElement>('.copy-src')
-  if (copyBtn) {
-    e.preventDefault()
-    navigator.clipboard?.writeText(copyBtn.dataset.src ?? '')
-    copyBtn.classList.add('done')
-    copyBtn.textContent = 'copied'
-    setTimeout(() => { copyBtn.classList.remove('done'); copyBtn.textContent = 'copy' }, 1200)
-    return
-  }
-  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, env?: { userMessage?: boolean }) => (el: Element) => {
-  try {
-    el.innerHTML = md.render(text, env)
-    themeMermaidNodes(el)
-    fitSvgEmbeds(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, { userMessage: true })
-}
-
-// 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 = ['embed', '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; padding-right: 4px; }
-.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.
-     Gutters are symmetric: the turn stripe is absolutely positioned, so it claims no layout
-     width and the left gutter needs no extra room for it (see Invariants). The bottom is
-     larger 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.75rem 2.5rem 1.75rem;
-  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. */
-  /* Stripe hugs the column (1rem into the left gutter); absolute, so it consumes no layout width —
-     which is why the gutters can be symmetric (no asymmetric padding needed to "make room"), and
-     thus why breakouts need no nudge. - var(--border-w): a user bubble's 1px border pushes the
-     padding edge (the abs-pos anchor) 1px right, so without it that stripe sits 1px right of the
-     assistant bubbles' — compensate. */
-  left: calc(-1rem - var(--border-w));
-  top: calc(-.5rem - var(--border-w));
-  bottom: calc(-.5rem - var(--border-w));
-  width: 1px;
-  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; }
-
-/* The full-lane breakout geometry, defined ONCE and shared by the two breakouts (the mermaid
-   embed and a spread bulb). `100%` in --lane-ml resolves against each user's own containing block
-   (prose width) at point of use, so both centre on the column axis — which is the viewport centre,
-   since the gutters are symmetric. One home so the geometry can't drift between the two (the bug
-   that let an off-centre nudge survive in one rule after being removed from the other). */
-.md { --lane-w: calc(100vw - 2rem); --lane-ml: calc((100% - var(--lane-w)) / 2); }
-
-/* Full-lane breakout — the mermaid embed (whole element) and a SPREAD bulb's iframe step out of
-   the prose column to the transcript width so wide content gets room. Both use --lane-w/--lane-ml
-   and extend symmetrically from the column, which is viewport-centred (symmetric gutters), so
-   neither needs an off-centre nudge (see Invariants in Specs-Bulbs/Claude-Bulb/Claude-Bulb.md). A
-   bulb's *wrapper* never breaks out — only its inner surface does — so the wrapper and its controls
-   stay at prose-right. position + z-index:0 lift the box over the turn stripe it crosses; the
-   mermaid SVG is transparent so a bg backs it, the bulb iframe is opaque so it occludes the stripe. */
-.md .mermaid {
-  width: var(--lane-w);
-  margin: .6rem 0;
-  margin-left: var(--lane-ml);
-  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. They
-   share the `.embed` stripe-chop below (a drawing earns its own row like a bulb). */
-.md .svg-embed { 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). */
-/* The stripe-chop, shared by every opaque in-column visual artifact (the inline bulb and a raw
-   `svg` — each opts in by carrying `.embed`). An opaque bg over position:relative + z-index:0
-   paints above .bubble::before; a -1rem left extension reaches the stripe in the gutter without a
-   full breakout (padding-left:1rem keeps the content in the prose column, and the box's right edge
-   stays at prose-right, so a bulb's controls anchored there don't move). The vertical gap is opaque
-   padding, not margin: it occludes the stripe top and bottom so the cut is flush with the prose (no
-   stub in a transparent gap), symmetric above/below to separate the artifact from surrounding text.
-   margin top/bottom are zeroed — and the abutting prose margins too (below) — so the gap butts the
-   text. Mermaid is NOT on this path: it's transparent and breaks out, occluding via box-shadow.
-   Per-artifact layout (flex direction, centring) lives on .bulb-embed / .svg-embed. */
-.md .embed {
-  display: flex;
-  position: relative;
-  z-index: 0;
-  background: var(--bg);
-  margin: 0 0 0 -1rem;
-  padding: 1.1rem 0 1.1rem 1rem;
-}
-/* A bulb stacks its controls/frame/code vertically; in spread mode the inner iframe's own
-   breakout covers the stripe too (the wrapper still chops in column). */
-.md .bulb-embed { flex-direction: column; }
-/* 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 (live iframe, or the code view behind the toggle) breaks out to the
-   lane while the wrapper stays in the prose column, so the controls hold at prose-right. Shares the
-   --lane-* geometry; centred on the column axis so toggling spread doesn't shift a column-fitting
-   bulb sideways. `width !important` beats createBulbFrame's inline width:100% on the iframe
-   (harmless on the code view, which has none); both 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: var(--lane-w) !important;
-  margin-left: var(--lane-ml);
-  margin-right: auto;
-  position: relative;
-  z-index: 0;
-}
-/* Kill the transparent margin between an embed and the prose it abuts (top and bottom):
-   the embed'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(+ .embed) { margin-bottom: 0; }
-.md .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); }
-
-/* Per-fence copy pill (code / svg / mermaid) — one reveal rule for every copyable block, since the
-   fence rule stamps `.copyable` on each. The svg/mermaid containers are already position:relative for
-   the chop/breakout; the code-block wrapper needs it for the absolute pill. The pill is positioned
-   (absolute), so it paints over the static fence content regardless of DOM order. */
-.md .copyable { position: relative; }
-.md .copyable:hover .copy-src,
-.md .copy-src:focus-visible { opacity: 1; }
-.md .copy-src.done { color: var(--accent); border-color: var(--accent); }
-/* The wrapper carries the code block's vertical rhythm (it, not the <pre>, is the `.md` flow child
-   now, so the first/last-child margin resets land on it); the <pre> sits flush inside. */
-.md .code-block { margin: .6rem 0; }
-.md .code-block pre { margin: 0; }
-
-/* 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.10.7"
-  }
-}
-```