@leftoff/cli 0.8.7 → 0.8.9

package/mod/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "leftoff",
-  "version": "0.8.7",
+  "version": "0.8.9",
   "description": "Leftoff (formerly Checkpoints): WTF was I working on? Tracks every Claude Code session on this machine, writes a 3-line checkpoint when one goes quiet, and adds /cp (checkpoint now), /cp-name and a /leftoff pane. Talks to the local Leftoff daemon on 127.0.0.1:7429 and falls back to writing markdown in ~/checkpoints.",
   "author": {
     "name": "Joel"

package/mod/hooks/core.js

@@ -298,7 +298,8 @@ const CP_ORDER = ['id', 'session_id', 'session_title', 'created_at', 'trigger',
 export function resumeCommand(session) {
   const id = session.id || session.sessionId
   const cwd = resumeDir(session)
-  return (cwd ? 'cd ' + shArg(cwd) + ' && ' : '') + (isCodex(session) ? codexInvocation(id) : claudeInvocation(session, ['--resume', id]))
+  const wt = resumeWorktreeName(session)
+  return (cwd ? 'cd ' + shArg(cwd) + ' && ' : '') + (isCodex(session) ? codexInvocation(id) : claudeInvocation(session, [...(wt ? ['--worktree', wt] : []), '--resume', id]))
 }
 
 // 0.8.0: a Codex session (its rollout under ~/.codex/sessions) resumes with `codex resume <id>`.
@@ -308,9 +309,24 @@ export function codexInvocation(id) { return 'codex resume ' + shArg(id) }
 // 0.7.1: where to run `claude --resume`: the session's folder, or, inside a git
 // worktree, that worktree's own top folder (Claude Code declines to re-enter a
 // `git worktree add` worktree from one of its subfolders; code.claude.com/docs/en/worktrees).
+//
+// 0.8.8: a worktree Claude Code made (<repo>/.claude/worktrees/<name>, from
+// `claude --worktree` or EnterWorktree) is resumed the way Claude Code itself
+// prints on exit: from the main checkout, `claude --worktree <name> --resume <id>`.
+// On exit Claude Code moves the session back to where it was launched and
+// clears its worktree binding, so --worktree is what puts it back in there.
+// Not when the worktree is gone (folderGone): --worktree would make a new one.
+export function resumeWorktreeName(session) {
+  const wt = session && session.repo && session.repo.worktree
+  const root = session && session.repo && session.repo.root
+  if (!wt || !root || typeof wt !== 'string' || session.folderGone || isCodex(session)) return null
+  const c = claudeWorktreeOf(wt)
+  return c && trimSlash(c.root) === trimSlash(root) && trimSlash(c.path) === trimSlash(wt) ? c.name : null
+}
 export function resumeDir(session) {
   const cwd = session && session.cwd
   const wt = session && session.repo && session.repo.worktree
+  if (resumeWorktreeName(session)) return session.repo.root
   if (cwd && wt && typeof wt === 'string' && (cwd === wt || String(cwd).startsWith(wt.replace(/\/+$/, '') + '/'))) return wt
   return cwd || null
 }
@@ -821,9 +837,14 @@ export function applyEvent(s, ev) {
   // replayed older events (a Codex rollout read again) don't.
   if (s.parked && ms(at) > ms(s.parked.at) && unparks(s, ev, d)) delete s.parked
   switch (ev.type) {
-    case 'session.parked':
+    case 'session.parked': {
+      const prevLock = s.parked && s.parked.worktreeLock // parked again: the lock it already holds stays on record
       s.parked = { at, note: d.note ? clip(String(d.note).replace(/\s+/g, ' ').trim(), 300) || null : null, checkpoint: d.checkpoint ? String(d.checkpoint) : null, by: d.by ? String(d.by) : null }
+      // 0.8.8: the worktree /cp-park (or Park) locked, so it can be unlocked later
+      if (d.worktreeLock && typeof d.worktreeLock === 'object' && typeof d.worktreeLock.path === 'string' && typeof d.worktreeLock.reason === 'string') s.parked.worktreeLock = { path: d.worktreeLock.path, root: typeof d.worktreeLock.root === 'string' ? d.worktreeLock.root : null, reason: d.worktreeLock.reason }
+      else if (prevLock) s.parked.worktreeLock = prevLock
       break
+    }
     case 'session.unparked':
       delete s.parked
       break
@@ -912,6 +933,137 @@ export function parseParkArgs(args) {
   return { note: note ? clip(note, 300) : null }
 }
 
+// ------------------------------------------------------------ parked worktrees (0.8.8)
+// Claude Code removes a session's worktree when the session exits and the
+// worktree has no changes (code.claude.com/docs/en/worktrees, "Clean up
+// worktrees"), and /cp-park exits. So in a linked git worktree, park first
+// locks it (`git worktree lock --reason …`). Claude Code's exit cleanup keeps a
+// worktree locked with a reason it didn't write, and its stale-lock sweep only
+// releases its own "claude agent|session … (pid N)" locks, so the reason must
+// never start with "claude ". Resume, Done with it, or the session coming back
+// unlocks it. Only a lock with this exact session's reason is ever unlocked.
+// run(argv) -> { code | exitCode, stdout, stderr }: $.process.run in the mod,
+// execFile in the daemon, a fake in tests. Nothing here deletes anything.
+export const PARK_LOCK_PREFIX = 'leftoff: parked session '
+export function parkLockReason(sessionId) {
+  return PARK_LOCK_PREFIX + String(sessionId || '') + ' (resume it, or press Done with it on the board, to unlock)'
+}
+// a lock reason -> the session id Leftoff parked, or null for any other lock
+export function parkLockSession(reason) {
+  const m = /^leftoff: parked session ([A-Za-z0-9-]{4,80})(?: |$)/.exec(String(reason == null ? '' : reason))
+  return m ? m[1] : null
+}
+
+// `git worktree list --porcelain` -> [{ path, branch, bare, detached, locked: null | reason ('' when none given) }]
+export function parseWorktreeList(text) {
+  const out = []
+  let cur = null
+  for (const raw of String(text || '').split('\n')) {
+    const line = raw.replace(/\r$/, '')
+    if (line.startsWith('worktree ')) { cur = { path: line.slice(9), branch: null, bare: false, detached: false, locked: null }; out.push(cur); continue }
+    if (!cur) continue
+    if (line.startsWith('branch ')) cur.branch = line.slice(7).replace(/^refs\/heads\//, '')
+    else if (line === 'bare') cur.bare = true
+    else if (line === 'detached') cur.detached = true
+    else if (line === 'locked') cur.locked = ''
+    else if (line.startsWith('locked ')) cur.locked = line.slice(7)
+  }
+  return out
+}
+
+const runCode = (r) => (r == null ? null : r.code != null ? r.code : r.exitCode != null ? r.exitCode : null)
+const trimSlash = (p) => String(p || '').replace(/\/+$/, '') || '/'
+const firstLine = (s) => String(s || '').trim().split('\n')[0].slice(0, 200)
+// a path inside Claude Code's own worktrees folder: <repo>/.claude/worktrees/<name>[/…]
+export function claudeWorktreeOf(dir) {
+  const m = /^(.*)\/\.claude\/worktrees\/([^/]+)(?:\/.*)?$/.exec(trimSlash(dir))
+  return m ? { root: m[1] || '/', name: m[2], path: m[1] + '/.claude/worktrees/' + m[2] } : null
+}
+
+// Is dir in a linked git worktree? -> { kind: 'worktree', top, root, gitDir, commonDir }
+// | { kind: 'none' } (not in git, or the main checkout) | { kind: 'unknown', why }
+export async function worktreeAt(run, dir) {
+  if (!dir) return { kind: 'unknown', why: 'no folder on record' }
+  let r
+  try { r = await run(['git', '-C', dir, 'rev-parse', '--path-format=absolute', '--git-dir', '--git-common-dir', '--show-toplevel']) } catch (e) { return { kind: 'unknown', why: 'git didn’t run (' + firstLine(e && e.message) + ')' } }
+  if (runCode(r) !== 0) {
+    if (/not a git repository/i.test(String(r && r.stderr))) return claudeWorktreeOf(dir) ? { kind: 'unknown', why: 'git doesn’t see a repository there' } : { kind: 'none' }
+    return { kind: 'unknown', why: 'git: ' + (firstLine(r && r.stderr) || 'exit ' + runCode(r)) }
+  }
+  const [gitDir, commonDir, top] = String(r.stdout || '').trim().split('\n').map((x) => trimSlash(x.trim()))
+  if (!gitDir || !commonDir || !top) return { kind: 'unknown', why: 'git gave no answer' }
+  if (gitDir === commonDir) return { kind: 'none' } // the main checkout (or a submodule, its own repo)
+  return { kind: 'worktree', top, gitDir, commonDir, root: /\/\.git$/.test(commonDir) ? commonDir.slice(0, -5) || '/' : commonDir }
+}
+
+function findEntry(list, path, reason) {
+  const p = trimSlash(path)
+  return list.find((e) => trimSlash(e.path) === p) || (reason ? list.find((e) => e.locked === reason) : null) || null
+}
+
+// /cp-park (and Park on the board): lock the worktree dir is in, then read it
+// back. -> { worktree: null } (not a worktree: nothing to protect)
+//  | { worktree, root, locked: true, reason } (locked and checked)
+//  | { worktree, root?, locked: false, why } (not protected: don't exit for them)
+export async function lockForPark(run, dir, sessionId) {
+  const w = await worktreeAt(run, dir)
+  if (w.kind === 'none') return { worktree: null }
+  if (w.kind === 'unknown') { const g = claudeWorktreeOf(dir); return { worktree: g ? g.path : null, locked: false, why: w.why, unsure: true } }
+  const reason = parkLockReason(sessionId)
+  let lockErr = ''
+  try { const r = await run(['git', '-C', w.top, 'worktree', 'lock', '--reason', reason, w.top]); if (runCode(r) !== 0) lockErr = firstLine(r && r.stderr) || 'exit ' + runCode(r) } catch (e) { lockErr = firstLine(e && e.message) }
+  let list = null
+  try { const l = await run(['git', '-C', w.top, 'worktree', 'list', '--porcelain']); if (runCode(l) === 0) list = parseWorktreeList(l.stdout) } catch {}
+  const base = { worktree: w.top, root: w.root }
+  if (!list) return { ...base, locked: false, why: 'couldn’t read the lock back' + (lockErr ? ' (' + lockErr + ')' : '') }
+  const e = findEntry(list, w.top, reason)
+  if (e && e.locked === reason) return { ...base, locked: true, reason }
+  if (e && e.locked != null) return { ...base, locked: false, why: 'it’s already locked' + (e.locked ? ' (“' + clip(e.locked, 80) + '”)' : ''), foreign: true }
+  return { ...base, locked: false, why: lockErr || 'the lock didn’t take' }
+}
+
+// Is the lock still there, with our reason? (checked again right before /exit)
+export async function parkLockHeld(run, path, reason) {
+  try {
+    const l = await run(['git', '-C', path, 'worktree', 'list', '--porcelain'])
+    if (runCode(l) !== 0) return false
+    const e = findEntry(parseWorktreeList(l.stdout), path, reason)
+    return !!(e && e.locked === reason)
+  } catch { return false }
+}
+
+// Unlock what Leftoff locked for this session: every worktree of the repo at
+// dir whose lock reason is this session's park reason. Any other lock (yours,
+// Claude Code's) is left alone. -> { unlocked: [path], failed: [{ path, why }], error? }
+export async function unlockParkLocks(run, dir, sessionId) {
+  const out = { unlocked: [], failed: [] }
+  if (!dir || !sessionId) return out
+  let list
+  try {
+    const l = await run(['git', '-C', dir, 'worktree', 'list', '--porcelain'])
+    if (runCode(l) !== 0) return { ...out, error: firstLine(l && l.stderr) || 'git worktree list failed' }
+    list = parseWorktreeList(l.stdout)
+  } catch (e) { return { ...out, error: firstLine(e && e.message) } }
+  for (const e of list) {
+    if (e.locked == null || parkLockSession(e.locked) !== String(sessionId)) continue
+    try {
+      const r = await run(['git', '-C', dir, 'worktree', 'unlock', e.path])
+      if (runCode(r) === 0) out.unlocked.push(e.path)
+      else out.failed.push({ path: e.path, why: firstLine(r && r.stderr) || 'exit ' + runCode(r) })
+    } catch (err) { out.failed.push({ path: e.path, why: firstLine(err && err.message) }) }
+  }
+  return out
+}
+
+// What /cp-park says about the worktree. res: lockForPark's answer.
+export function parkWorktreeText(res) {
+  if (!res || !res.worktree && !res.unsure) return ''
+  if (!res.worktree && !res.locked) return ' Leftoff couldn’t tell whether this is a worktree session (' + (res.why || 'no answer') + '), so it didn’t close it. If it is one, lock it first (`git worktree lock <worktree>`) or choose Keep if Claude Code asks: on /exit, Claude Code removes a worktree that has no changes.'
+  if (res.locked) return ' This is a worktree session, so Leftoff locked the worktree first: Claude Code will say it kept it (“could not be removed”). Resume or Done with it unlocks it.'
+  const where = res.worktree ? ' ' + shArg(res.worktree) : ''
+  return ' This is a worktree session and Leftoff couldn’t lock it (' + (res.why || 'no answer') + '), so it didn’t close the session: on /exit, Claude Code removes a worktree that has no changes. To keep it, run `git worktree lock' + (where || ' <worktree>') + '` first, or choose Keep if Claude Code asks.'
+}
+
 // The question Claude ended its turn on, if it ended on one: the last paragraph
 // of the answer when its last sentence ends with "?" (markdown and closing
 // quotes ignored). Code blocks don't count. -> string or null

package/mod/hooks/register.js

@@ -19,7 +19,7 @@ import {
   shortId, formatTabTitle, parseTabTitle, detectTerminal, parseProcLine, trailingQuestion,
   parseCheckpointArgs, SUMMARY_LENGTHS, parseBulletList, parseCatchupArgs,
   listHintFrom, extractChecklists, parseTodoArgs, parseDoneArgs, detectBackend, parseParkArgs,
-  boardLinkLines, isNonInteractive,
+  boardLinkLines, isNonInteractive, lockForPark, parkLockHeld, unlockParkLocks, parkWorktreeText,
 } from './core.js'
 
 const PANE_ID = 'checkpoints'
@@ -28,7 +28,7 @@ const END_TIMEOUT_MS = 1000
 const MODEL_TIMEOUT_MS = 20000
 
 // Module state. $.state is not used: the pane redraws with $.ui.invalidate.
-const MOD_VERSION = '0.8.7' // keep in step with .claude-plugin/plugin.json
+const MOD_VERSION = '0.8.9' // keep in step with .claude-plugin/plugin.json
 
 const st = {
   internal: false,
@@ -278,17 +278,45 @@ async function boardLinks($) {
 // only runs once Claude is done with the turn). If that's refused, it says to
 // type /exit. Nothing is ever killed.
 const PARK_FALLBACK = 'Parked. Type /exit when you\'re ready, and it\'ll stay on your board.'
+const PARK_LOCK_LOST = 'Parked, but not closed: the worktree lock Leftoff took is gone, and on /exit Claude Code removes a worktree that has no changes. Lock it again (git worktree lock), or choose Keep if Claude Code asks.'
+// 0.8.8: argv -> { exitCode, stdout, stderr } for the worktree helpers in core.js
+async function gitFor($, argv) { return $.process.run(argv, { timeoutMs: 5000 }) }
 async function parkCommand($, args) {
   if (st.internal || !st.sessionId) return { text: 'Leftoff: not in a tracked session.' }
   const a = parseParkArgs(args)
+  // 0.8.8: in a git worktree, lock it first: Claude Code's exit removes a worktree
+  // with no changes, and parking means coming back. No lock, no automatic /exit.
+  let cwd = null
+  try { cwd = await $.session.cwd() } catch {}
+  cwd = cwd || (st.record && st.record.cwd) || null
+  const run = (argv) => gitFor($, argv)
+  const wt = cwd ? await lockForPark(run, cwd, st.sessionId).catch((e) => ({ worktree: null, locked: false, unsure: true, why: String(e && e.message) })) : { worktree: null, locked: false, unsure: true, why: 'no folder on record' }
   const cp = await makeCheckpoint($, 'park', a.note, null, { next: a.note })
-  if (!cp) return { text: 'Leftoff: a checkpoint is already being made. Try /cp-park again in a moment.' }
-  await sendOrSpool($, 'session.parked', { note: a.note, checkpoint: cp.id || null, by: 'command' })
-  // After this command returns, not inside it: the built-in /exit.
+  if (!cp) {
+    if (wt.locked) await unlockParkLocks(run, wt.root || wt.worktree, st.sessionId).catch(() => null) // not parked after all
+    return { text: 'Leftoff: a checkpoint is already being made. Try /cp-park again in a moment.' }
+  }
+  const worktreeLock = wt.locked ? { path: wt.worktree, root: wt.root || null, reason: wt.reason } : null
+  await sendOrSpool($, 'session.parked', { note: a.note, checkpoint: cp.id || null, by: 'command', ...(worktreeLock ? { worktreeLock } : {}) })
+  const head = 'Parked' + (a.note ? ': ' + clip(a.note, 120) : '') + '.'
+  if (wt.worktree || wt.unsure) {
+    if (!wt.locked) return { text: head + parkWorktreeText(wt) }
+  }
+  // After this command returns, not inside it: the built-in /exit (in a worktree, only while our lock still holds).
   $.clock.after(400, async () => {
+    if (worktreeLock && !(await parkLockHeld(run, worktreeLock.path, worktreeLock.reason))) { try { $.ui.toast(PARK_LOCK_LOST, { timeoutMs: 12000 }) } catch {} return }
     try { await $.command.run({ command: 'exit' }) } catch { try { $.ui.toast(PARK_FALLBACK, { timeoutMs: 8000 }) } catch {} }
   })
-  return { text: 'Parked' + (a.note ? ': ' + clip(a.note, 120) : '') + '. Closing this session; it stays on your board under Parked.' }
+  return { text: head + ' Closing this session; it stays on your board under Parked.' + parkWorktreeText(wt) }
+}
+
+// 0.8.8: this session is back (claude --resume, or --worktree <name> --resume):
+// unlock any worktree Leftoff locked when it was parked. Only its own lock.
+async function unlockOwnParkLocks($, cwd) {
+  if (st.internal || !st.sessionId || !cwd) return
+  try {
+    await unlockParkLocks((argv) => gitFor($, argv), cwd, st.sessionId)
+  } catch {}
 }
 
 // ------------------------------------------------------------ lists (v0.5.1)
@@ -901,6 +929,7 @@ export function register(on, options) {
       st.backend = await readBackend($, model)
       st.hello = { cwd, repo, model, backend: st.backend, surface, proc: st.proc ? { ...st.proc, source: 'mod' } : null, term: st.term }
       await sendOrSpool($, 'session.opened', st.hello)
+      if (repo) await unlockOwnParkLocks($, cwd) // 0.8.8
       if (st.heartbeat) st.heartbeat.cancel()
       st.heartbeat = $.clock.every(60000, () => { heartbeat($).catch(() => {}); startReplyLoop($) })
       st.ready = true
@@ -923,6 +952,7 @@ export function register(on, options) {
         st.lastCheckpoint = null
         st.titleSoon = false
         st.daemonTitle = null
+        if (e.source === 'resume' && e.cwd) await unlockOwnParkLocks($, e.cwd) // 0.8.8: /resume of a parked worktree session
       }
       if (!st.sessionId) st.sessionId = e.session_id
       await sendOrSpool($, 'session.started', {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leftoff/cli",
-  "version": "0.8.7",
+  "version": "0.8.9",
   "description": "Leftoff: WTF was I working on? Tracks every Claude Code session, writes a 3-line checkpoint when one goes quiet, and gives you a daily digest and a board, on your Mac and (optionally) your phone.",
   "keywords": [
     "claude",

package/ui/app.css

@@ -110,6 +110,14 @@ h2 .count { color: var(--faint); font-weight: 500; }
 .card .row1 { display: flex; align-items: flex-start; gap: 10px; }
 .card .title { font-size: 15px; font-weight: 600; line-height: 1.35; flex: 1; }
 .card .title a:hover { text-decoration: underline; text-decoration-color: var(--faint); }
+.s-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
+.s-title h1 { min-width: 0; }
+.s-title-text { cursor: text; border-radius: 6px; outline-offset: 2px; }
+.s-title-text:hover { background: var(--subtle); box-shadow: 0 0 0 4px var(--subtle); }
+.s-title .rename-pen { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--muted); cursor: pointer; }
+.s-title .rename-pen:hover, .s-title .rename-pen:focus-visible { color: var(--accent); border-color: var(--line); background: var(--bg2); }
+.s-title .rename-pen svg { width: 16px; height: 16px; }
+.s-title input { flex: 1 1 auto; width: min(560px, calc(100vw - 80px)); min-width: 0; font-family: inherit; font-weight: 700; font-size: 22px; line-height: 1.25; color: var(--text); background: var(--field); border: 1px solid var(--accent); border-radius: 8px; padding: 4px 8px; margin: 6px 0; }
 .card .title input { width: 100%; background: var(--bg); border: 1px solid var(--accent); border-radius: 6px; color: var(--text); padding: 3px 6px; font: inherit; }
 .mt { margin-top: 20px; }
 .icon { background: none; border: 0; color: var(--faint); cursor: pointer; padding: 0 4px; margin-left: 4px; font-size: 13px; opacity: 0; transition: opacity .15s; }
@@ -1432,6 +1440,17 @@ a.cpr:hover { border-color: var(--line-strong); }
 .prs-q { width: 100%; max-width: 480px; font-size: 16px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); }
 .prs-chips { margin-top: 8px; }
 .prs-chips .rchip.ck .rl::before { content: '◇ '; color: var(--faint); }
+/* 0.8.9: the buckets, each with its color dot (chips) and heading color (groups) */
+.prs-buckets .rchip .rl::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--b, var(--gray)); }
+.prs-buckets .rchip { font-family: inherit; }
+.rchip.b-review, .prgroup.b-review { --b: var(--accent); }
+.rchip.b-fix, .prgroup.b-fix { --b: var(--red); }
+.rchip.b-ready, .prgroup.b-ready { --b: var(--green); }
+.rchip.b-waiting, .prgroup.b-waiting { --b: var(--yellow); }
+.rchip.b-merged, .prgroup.b-merged { --b: var(--machine); }
+.rchip.b-closed, .prgroup.b-closed { --b: var(--gray); }
+.prgroup[class*="b-"] > h2 { color: var(--b); }
+.prgroup[class*="b-"] > h2::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; background: var(--b); }
 .pr-why { color: var(--muted); }
 .prrow { cursor: pointer; }
 .prrow.open { border-color: var(--line-strong); }
@@ -1556,30 +1575,97 @@ ul.files-list li + li { border-top: 1px solid var(--line); }
 .doc-viewer { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.55); display: flex; align-items: stretch; justify-content: center; padding: max(16px, env(safe-area-inset-top)) 12px 12px; }
 .doc-viewer[hidden] { display: none; }
 html.dv-open, html.dv-open body { overflow: hidden; }
-.dv-sheet { width: 100%; max-width: 820px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; }
-.dv-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
+.dv-sheet { width: min(1100px, 92vw); max-width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--toast-shadow); }
+.dv-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line); }
 .dv-title { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dv-x { flex: none; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; }
-.dv-sub { padding: 6px 14px 0; font-size: 12px; }
-.dv-body { flex: 1; overflow: auto; padding: 8px 16px 24px; -webkit-overflow-scrolling: touch; }
-.doc-md { font-size: 15px; line-height: 1.55; color: var(--text2); overflow-wrap: anywhere; }
-.doc-md h2, .doc-md h3, .doc-md h4 { color: var(--text); margin: 18px 0 8px; }
-.doc-md h2, .doc-md h3, .doc-md h4 { text-transform: none; letter-spacing: normal; }
-.doc-md h2 { font-size: 20px; } .doc-md h3 { font-size: 17px; } .doc-md h4 { font-size: 15px; }
-.doc-md code { font-family: var(--mono); font-size: 13px; background: var(--bg2); border-radius: 5px; padding: 1px 5px; }
-.doc-md pre.doc-code, .doc-pre { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; overflow: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.45; white-space: pre; }
-.doc-md pre.doc-code code { background: none; padding: 0; }
-.doc-md blockquote { margin: 10px 0; padding: 2px 12px; border-left: 3px solid var(--line-strong); color: var(--muted); }
+.dv-dl { flex: none; display: inline-flex; align-items: center; gap: 6px; }
+.dv-dl svg { width: 15px; height: 15px; }
+.dv-dl .chev { font-size: 10px; opacity: .7; margin-left: 1px; }
+.dv-dl.copied { color: var(--green); border-color: var(--green); }
+.dv-ptitle { display: none; }
+.dv-sub { padding: 6px 16px 0; font-size: 12px; }
+.dv-body { flex: 1; overflow: auto; padding: 10px 24px 32px; -webkit-overflow-scrolling: touch; }
+/* 0.8.9: a phone gets the whole screen (a sheet), not a card with margins */
+@media (max-width: 599.98px) {
+  .doc-viewer { padding: 0; }
+  .dv-sheet { width: 100%; border: 0; border-radius: 0; box-shadow: none; padding-top: env(safe-area-inset-top); }
+  .dv-head { padding: 8px 8px 8px 14px; }
+  .dv-body { padding: 8px 16px calc(28px + env(safe-area-inset-bottom)); }
+  .dv-sub { padding: 6px 14px 0; }
+  .dv-dl .dl-word { display: none; }
+}
+html.dv-open .lo-backdrop { z-index: 61; }
+html.dv-open .lo-menu { z-index: 62; }
+
+/* The rendered markdown (0.8.9: colors). Prose keeps a reading measure (~80
+   characters); tables and code blocks may use the whole width. */
+.doc-md { font-size: 15px; line-height: 1.6; color: var(--text2); overflow-wrap: anywhere; }
+.doc-md > p, .doc-md > ul, .doc-md > ol, .doc-md > blockquote, .doc-md > h2, .doc-md > h3, .doc-md > h4, .doc-md > h5, .doc-md > h6 { max-width: 80ch; }
+.doc-md p { margin: 0 0 12px; }
+.doc-md h2, .doc-md h3, .doc-md h4, .doc-md h5, .doc-md h6 { text-transform: none; letter-spacing: normal; line-height: 1.3; }
+.doc-md h2 { font-size: 24px; font-weight: 700; color: var(--text); margin: 22px 0 12px; padding-bottom: 8px; border-bottom: 2px solid color-mix(in srgb, var(--accent) 45%, var(--line)); }
+.doc-md h2:first-child { margin-top: 6px; }
+.doc-md h3 { font-size: 19px; font-weight: 650; color: var(--accent); margin: 22px 0 8px; }
+.doc-md h4 { font-size: 16px; font-weight: 650; color: var(--cyan); margin: 18px 0 6px; }
+.doc-md h5, .doc-md h6 { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 16px 0 6px; }
+.doc-md b, .doc-md strong { color: var(--text); font-weight: 650; }
+.doc-md em { font-style: italic; }
+.doc-md del { color: var(--muted); }
+.doc-md a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset: 2px; }
+.doc-md a:hover { text-decoration-color: var(--accent); }
+.doc-md code { font-family: var(--mono); font-size: .87em; color: var(--you); background: var(--tint-red); border-radius: 5px; padding: 1px 5px; }
+.doc-md pre.doc-code, .doc-pre { background: var(--card2); border: 1px solid var(--line); border-left: 3px solid color-mix(in srgb, var(--accent) 55%, var(--line)); border-radius: 10px; padding: 12px 14px; margin: 0 0 14px; overflow: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.5; white-space: pre; color: var(--text); }
+.doc-md pre.doc-code code { background: none; padding: 0; color: inherit; font-size: inherit; }
+.doc-md .tk-c { color: var(--faint); font-style: italic; }
+.doc-md .tk-s { color: var(--green); }
+.doc-md .tk-n { color: var(--yellow); }
+.doc-md .tk-k { color: var(--accent); font-weight: 600; }
+.doc-md .tk-add { color: var(--green); background: var(--tint-green); display: inline-block; min-width: 100%; }
+.doc-md .tk-del { color: var(--red); background: var(--tint-red); display: inline-block; min-width: 100%; }
+.doc-md blockquote { margin: 12px 0; padding: 8px 14px; border-left: 3px solid var(--accent); background: var(--tint-accent); border-radius: 0 8px 8px 0; color: var(--text2); }
+.doc-md blockquote > :last-child { margin-bottom: 0; }
+.doc-md ul, .doc-md ol { margin: 0 0 12px; padding-left: 22px; }
+.doc-md li { margin: 3px 0; }
+.doc-md li::marker { color: var(--accent); }
+.doc-md ol > li::marker { font-weight: 600; }
 .doc-md li.sub { margin-left: 18px; }
 .doc-md li.task { list-style: none; margin-left: -18px; }
 .doc-page { max-width: 760px; padding-bottom: 32px; } /* 0.8.1: #/docs/<name> */
-.doc-md .tbox { display: inline-block; width: 13px; height: 13px; border: 1.5px solid var(--line-strong); border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
+.doc-md .tbox { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border: 1.5px solid var(--line-strong); border-radius: 4px; margin-right: 8px; vertical-align: -2px; background: var(--field); }
 .doc-md .tbox.on { background: var(--green); border-color: var(--green); }
-.doc-table { overflow-x: auto; }
-.doc-md table { border-collapse: collapse; font-size: 13.5px; }
+.doc-md .tbox.on::after { content: ''; width: 4px; height: 8px; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
+.doc-md li.task:has(.tbox.on) { color: var(--muted); }
+.doc-md hr { border: 0; height: 2px; margin: 22px 0; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 10%, transparent)); opacity: .55; }
+.doc-table { overflow-x: auto; margin: 0 0 14px; border: 1px solid var(--line); border-radius: 10px; }
+.doc-md table { border-collapse: collapse; font-size: 13.5px; width: max-content; min-width: 100%; }
 .doc-md table { overflow-wrap: normal; word-break: normal; }
 .doc-md th { white-space: nowrap; }
-.doc-md th, .doc-md td { border: 1px solid var(--line); padding: 5px 8px; text-align: left; }
+.doc-md th, .doc-md td { border-bottom: 1px solid var(--line); padding: 7px 12px; text-align: left; vertical-align: top; }
+.doc-md th + th, .doc-md td + td { border-left: 1px solid var(--line); }
+.doc-md thead th { background: var(--tint-accent); color: var(--text); font-weight: 650; border-bottom: 2px solid color-mix(in srgb, var(--accent) 40%, var(--line)); }
+.doc-md tbody tr:nth-child(even) td { background: var(--bg2); }
+.doc-md tbody tr:last-child td { border-bottom: 0; }
+
+/* 0.8.9: Download as PDF prints just the file (the browser's "Save as PDF"):
+   white paper, the light theme's colors, no modal around it. */
+@media print {
+  html.dv-printing body > *:not(#docViewer) { display: none !important; }
+  html.dv-printing, html.dv-printing body { overflow: visible !important; height: auto !important; background: #fff !important; }
+  html.dv-printing #docViewer { position: static !important; display: block !important; background: none !important; padding: 0 !important; }
+  html.dv-printing .dv-sheet { display: block; width: auto; max-width: none; border: 0; border-radius: 0; box-shadow: none; background: #fff; overflow: visible; }
+  html.dv-printing .dv-head, html.dv-printing .dv-sub, html.dv-printing .lo-menu, html.dv-printing .lo-backdrop { display: none !important; }
+  html.dv-printing .dv-ptitle { display: block; font: 600 12px/1.4 var(--mono); color: #687185; border-bottom: 1px solid #e1e5ed; padding-bottom: 6px; margin-bottom: 14px; }
+  html.dv-printing .dv-body { overflow: visible; padding: 0; }
+  html.dv-printing .doc-md { font-size: 11.5pt; }
+  html.dv-printing .doc-md > * { max-width: none; }
+  html.dv-printing .doc-md pre.doc-code, html.dv-printing .doc-pre { white-space: pre-wrap; overflow: visible; break-inside: avoid; }
+  html.dv-printing .doc-table { overflow: visible; }
+  html.dv-printing .doc-md table { width: 100%; }
+  html.dv-printing .doc-md tr, html.dv-printing .doc-md blockquote { break-inside: avoid; }
+  html.dv-printing .doc-md h2, html.dv-printing .doc-md h3, html.dv-printing .doc-md h4 { break-after: avoid; }
+  html.dv-printing * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+}
 .doc-img { text-align: center; padding-top: 10px; }
 .doc-img img { max-width: 100%; height: auto; border-radius: 8px; background: #fff; }