@leftoff/cli 0.6.9 → 0.7.0

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

@@ -1,6 +1,6 @@
 {
   "name": "leftoff",
-  "version": "0.6.9",
+  "version": "0.7.0",
   "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

@@ -494,7 +494,7 @@ const SESSION_ORDER = ['id', 'title', 'title_source', 'machine', 'cwd', 'repo',
 export const SESSION_EXTRA = ['inTurn', 'needsInput', 'backgroundTasks', 'turnsSinceCheckpoint', 'dormantStretch',
   'finalCheckpointDone', 'firstPrompt', 'lastPreview', 'lastNotification', 'lastEventAt', 'statusChanges', 'folder',
   'pid', 'tty', 'pidStartedAt', 'pidSource', 'term', 'closedAt', 'answers', 'lastNotificationMessage', 'needsInputAt', 'question', 'questionAt',
-  'startSource', 'historyTurns', 'healedAt', 'healedVia', 'archivedReason', 'backend', 'prLinks', 'prUnlinked']
+  'startSource', 'historyTurns', 'healedAt', 'healedVia', 'archivedReason', 'backend', 'prLinks', 'prUnlinked', 'todos', 'files']
 
 export const SESSION_FIELDS = ['id', 'title', 'titleSource', 'machine', 'cwd', 'repo', 'transcriptPath', 'model', 'surface', 'capture',
   'status', 'startedAt', 'lastActivityAt', 'lastHeartbeatAt', 'endedAt', 'endReason', 'turns', 'lastCheckpointId',

package/mod/hooks/register.js

@@ -27,7 +27,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.6.9' // keep in step with .claude-plugin/plugin.json
+const MOD_VERSION = '0.7.0' // keep in step with .claude-plugin/plugin.json
 
 const st = {
   internal: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leftoff/cli",
-  "version": "0.6.9",
+  "version": "0.7.0",
   "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

@@ -1441,3 +1441,81 @@ a.cpr:hover { border-color: var(--line-strong); }
 .stat.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), var(--card-shadow); background: color-mix(in srgb, var(--accent) 12%, var(--card)); }
 .stat.on .n { color: var(--accent); }
 .stat.on .k { color: var(--text); }
+
+/* ---- To do and Files (0.7.0) ---- */
+.todo-subcount { font-size: 13px; font-weight: 500; color: var(--yellow); background: var(--tint-yellow); border-radius: 999px; padding: 2px 9px; margin-left: 6px; vertical-align: middle; }
+.stat .todo-subn { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 500; color: var(--yellow); vertical-align: middle; white-space: nowrap; }
+.todos-sec { margin-top: 18px; }
+.todo-head h2 { color: var(--yellow); }
+.todo-head .count { background: var(--yellow); color: #1a1405; }
+.todo-group { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-top: 10px; }
+.todo-sess { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
+.todo-sess a { color: var(--text2); text-decoration: none; font-weight: 600; }
+ul.todos { list-style: none; margin: 0; padding: 0; }
+li.todo { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); }
+.todo-group li.todo:first-child, .stodos li.todo:first-child { border-top: 0; }
+li.todo.ticked { opacity: .45; }
+li.todo.ticked .todo-text { text-decoration: line-through; }
+.todo-check { position: relative; flex: none; width: 24px; height: 24px; margin-top: 1px; cursor: pointer; }
+.todo-check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
+.todo-check .box { display: block; width: 22px; height: 22px; border: 2px solid var(--line-strong); border-radius: 6px; background: var(--field); }
+.todo-check input:checked + .box { background: var(--green); border-color: var(--green); }
+.todo-check input:focus-visible + .box { box-shadow: 0 0 0 3px var(--focus); }
+.todo-main { min-width: 0; flex: 1; }
+.todo-text { color: var(--text); font-size: 14.5px; line-height: 1.4; overflow-wrap: anywhere; }
+.todo-text code, .todo-code code { font-family: var(--mono); font-size: 12.5px; }
+.todo-codes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
+.todo-code { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; color: var(--text2); cursor: pointer; font: inherit; }
+.todo-code code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.todo-code .todo-cp { flex: none; font-size: 11.5px; color: var(--accent); }
+.todo-meta { margin-top: 3px; font-size: 12px; color: var(--faint); }
+.todo-add { display: flex; gap: 8px; margin-top: 10px; }
+.todo-add input { flex: 1; min-width: 0; font-size: 16px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--field); color: var(--text); }
+.todo-add input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
+.handoff-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
+.handoff-chips .chip { text-decoration: none; }
+.chip.todochip { color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 35%, transparent); background: var(--tint-yellow); }
+.chip.fileschip { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 35%, transparent); background: var(--tint-cyan); }
+.closed-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.chip.docs-filter { cursor: pointer; font: inherit; font-size: 13px; padding: 5px 12px; }
+.chip.docs-filter[aria-pressed="true"] { color: var(--cyan); border-color: var(--cyan); background: var(--tint-cyan); }
+ul.files-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; }
+ul.files-list li + li { border-top: 1px solid var(--line); }
+.f-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; background: none; border: 0; color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
+.f-row:hover { background: var(--subtle); }
+.f-ic { flex: none; min-width: 38px; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .03em; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 3px 4px; }
+.f-ic.art { color: var(--accent); font-size: 13px; padding: 1px 4px; }
+.f-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
+.f-name.mono { font-family: var(--mono); font-size: 13px; }
+.f-kind { flex: none; font-size: 12px; color: var(--muted); }
+.f-kind.new { color: var(--green); }
+.f-at { flex: none; font-size: 12px; color: var(--faint); }
+.f-code { margin: 8px 2px 0; font-size: 13px; }
+.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-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); }
+.doc-md li.sub { margin-left: 18px; }
+.doc-md li.task { list-style: none; margin-left: -18px; }
+.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.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 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-img { text-align: center; padding-top: 10px; }
+.doc-img img { max-width: 100%; height: auto; border-radius: 8px; background: #fff; }

package/ui/app.js

@@ -9,6 +9,7 @@ import { needsItems, needsStrip, needPanel, agentNeedPanel, httpsOnly, agentRepl
 import { SUMMARY_EXAMPLES, LENGTH_CHOICES } from './summary-examples.js'
 import { mdInline, renderSection } from './changelog-md.js'
 import { cardPrsHtml, sessionPrsSection, prsPageHtml } from './prs.js'
+import { todosSection, sessionTodosSection, cardHandoffChips, sessionFilesSection, docViewerBody, docDownloadHref } from './handoffs.js'
 const $app = document.getElementById('app')
 const state = { sessions: [], health: null, cfg: null, route: null, machine: localStorage.getItem('cp.machine') || '', drafts: {}, pendingAsk: {}, mayAnswer: true, needOpen: {}, needTurns: {} }
 const multi = () => !!(state.health && state.health.machines && state.health.machines.length > 1)
@@ -298,7 +299,7 @@ function card(s) {
     '</div>' + pill(s.status) + '</div>' +
     '<div class="meta">' + spaceChip(s) + where(s) + (ln ? '<span class="livenote ' + esc(s.live) + '">' + esc(ln) + '</span>' : '') + (endedNote ? '<span>' + esc(endedNote) + '</span>' : '') + '<span>·</span><span>' + esc(s.turns) + (s.turns === 1 ? ' turn' : ' turns') + (s.historyTurns ? ' · resumed (' + esc(s.historyTurns) + ' before)' : s.startSource === 'resume' && !s.turns ? ' · resumed' : s.empty && s.live !== 'closed' ? ' · no prompt yet' : '') + '</span>' +
       (s.needsInput && s.lastNotification && !s.needsYou ? '<span class="chip">' + esc(s.lastNotification.replace(/_/g, ' ')) + '</span>' : '') + '</div>' +
-    cardPrsHtml(s.prs) + listChips(s) + nb + cpBlock(s.latestCheckpoint) +
+    cardPrsHtml(s.prs) + listChips(s) + cardHandoffChips(s) + nb + cpBlock(s.latestCheckpoint) +
     '<a class="cplink" href="#/s/' + encodeURIComponent(s.id) + '">' + (s.checkpointCount ? s.checkpointCount + (s.checkpointCount === 1 ? ' checkpoint' : ' checkpoints') : 'Session history') + ' →</a>' +
     '<div class="actions-row">' + goButton(s) +
       '<button type="button" class="btn" data-action="resume">Copy resume</button>' +
@@ -371,7 +372,7 @@ function chipBar(chips, selected, allCount, emptyNote) {
 async function viewBoard() {
   if (!state.health) await refreshHealth()
   if (state.health && state.health.update && state.health.update.available && !state.updates) { try { state.updates = await api('GET', '/v1/updates') } catch {} }
-  const { sessions, viewer, closedCount } = await api('GET', '/v1/sessions?limit=200' + (state.machine ? '&machine=' + encodeURIComponent(state.machine) : ''))
+  const { sessions, viewer, closedCount, todoCount } = await api('GET', '/v1/sessions?limit=200' + (state.machine ? '&machine=' + encodeURIComponent(state.machine) : ''))
   state.sessions = sessions
   state.viewerLocal = viewer ? viewer.local !== false : true
   state.ghostty = viewer ? viewer.ghostty === true : false
@@ -414,8 +415,10 @@ async function viewBoard() {
   // Needs you (v0.4.4): every session waiting on you, whatever the filters, longest wait first.
   const needs = needsItems(sessions)
   html += needsStrip(needs, needOpts())
+  // 0.7.0: open to-dos are their own sub-count, not part of the Needs you number
+  const todoN = f.repos.length || sp ? inRepos.reduce((n, s) => n + ((s.todos && s.todos.length) || 0), 0) : (todoCount || 0)
   html += '<div class="stats">' + Object.entries(FILTERS).map(([k, fl]) =>
-    '<button type="button" class="stat' + (filter === k ? ' on' : '') + '" data-action="filter" data-filter="' + k + '" aria-pressed="' + (filter === k) + '" title="' + esc(filter === k ? 'Showing ' + fl.label.toLowerCase() + ' · tap to show all' : 'Show ' + fl.label.toLowerCase()) + '"><div class="n">' + count(k) + '</div><div class="k"><span class="pill ' + fl.cls + '" aria-hidden="true"></span>' + esc(fl.label) + '</div></button>').join('') + '</div>'
+    '<button type="button" class="stat' + (filter === k ? ' on' : '') + '" data-action="filter" data-filter="' + k + '" aria-pressed="' + (filter === k) + '" title="' + esc(filter === k ? 'Showing ' + fl.label.toLowerCase() + ' · tap to show all' : 'Show ' + fl.label.toLowerCase()) + '"><div class="n">' + count(k) + (k === 'needs' && todoN ? '<span class="todo-subn" title="To-dos handed back to you (not counted as waiting)">' + todoN + (todoN === 1 ? ' to-do' : ' to-dos') + '</span>' : '') + '</div><div class="k"><span class="pill ' + fl.cls + '" aria-hidden="true"></span>' + esc(fl.label) + '</div></button>').join('') + '</div>'
   html += spaceTabs(spaces, sp, spCounts, 'board-space', allShown.length)
   if (filter === 'closed') {
     html += await closedSection(f, sp)
@@ -443,10 +446,11 @@ async function viewBoard() {
 // a search box and Show more. Each card has its last checkpoint and Resume,
 // which reopens it in a new Ghostty tab (claude --resume) on the Mac that owns it.
 const CLOSED_PAGE = 30
-const closedUi = { q: '', limit: CLOSED_PAGE, data: null, seq: 0, timer: null, busy: new Set() }
+const closedUi = { q: '', limit: CLOSED_PAGE, data: null, seq: 0, timer: null, busy: new Set(), docs: false }
 function closedQuery(f, sp) {
   const qs = new URLSearchParams({ limit: String(closedUi.limit) })
   if (closedUi.q.trim()) qs.set('q', closedUi.q.trim())
+  if (closedUi.docs) qs.set('docs', '1')
   if (state.machine) qs.set('machine', state.machine)
   if (f.repos.length) qs.set('repo', f.repos.join(','))
   if (sp) qs.set('space', sp)
@@ -461,12 +465,14 @@ async function closedFetch(f, sp) {
 async function closedSection(f, sp) {
   const r = await closedFetch(f, sp)
   return chipBar(r.repos.map((c) => ({ ...c, count: c.total })), f.repos, r.total, 'nothing closed yet') +
-    '<div class="closed-head"><div class="set-search closed-search">' + icon('search') + '<input id="closedQ" type="search" placeholder="Search closed sessions" aria-label="Search closed sessions" autocomplete="off" autocapitalize="off" spellcheck="false" value="' + esc(closedUi.q) + '"></div></div>' +
+    '<div class="closed-head"><div class="set-search closed-search">' + icon('search') + '<input id="closedQ" type="search" placeholder="Search closed sessions" aria-label="Search closed sessions" autocomplete="off" autocapitalize="off" spellcheck="false" value="' + esc(closedUi.q) + '"></div>' +
+      '<button type="button" class="chip docs-filter" data-action="closed-docs" aria-pressed="' + closedUi.docs + '" title="Only sessions that made docs, plans or artifacts">' + (closedUi.docs ? '✓ ' : '') + 'Docs &amp; artifacts</button></div>' +
     '<div id="closedList">' + closedListHtml(r, f, sp) + '</div>'
 }
 function closedListHtml(r, f, sp) {
   if (!r.sessions.length) {
     const inWhat = (f.repos.length ? ' in ' + f.repos.join(', ') : '') + (sp ? ' in ' + sp : '')
+    if (closedUi.docs && !closedUi.q.trim()) return '<div class="empty mt">No closed sessions with docs or artifacts' + esc((f.repos.length ? ' in ' + f.repos.join(', ') : '') + (sp ? ' in ' + sp : '')) + ' yet. <button type="button" class="linkish" data-action="closed-clear">Clear</button></div>'
     return '<div class="empty mt">' + (closedUi.q.trim() ? 'No closed sessions match “' + esc(closedUi.q.trim()) + '”' + esc(inWhat) + '.' : 'No closed sessions' + esc(inWhat) + ' yet.') +
       (f.repos.length || sp || closedUi.q ? ' <button type="button" class="linkish" data-action="closed-clear">Clear</button>' : '') + '</div>'
   }
@@ -497,7 +503,7 @@ function closedCard(s, viewer) {
       '<button type="button" class="chip mono repo-link" data-action="repo" data-repo="' + esc(label) + '" data-key="' + esc(s.repoKey || '') + '" title="' + esc((s.repoKey || label) + ' · show only this repo') + '">' + esc(label) + (branch ? ' · ' + esc(branch) : '') + '</button>' +
       '<span class="chip machine' + (s.isLocal ? '' : ' remote') + '" title="' + (s.isLocal ? 'this machine' : 'another machine') + '">⌂ ' + esc(s.machine) + '</span>' + modelChip(s) +
       '<span title="' + esc(clock(s.endedAt)) + '">ended ' + esc(ago(s.endedAt)) + '</span><span>·</span><span>' + esc(s.turns) + (s.turns === 1 ? ' turn' : ' turns') + '</span></div>' +
-    cpBlock(s.latestCheckpoint, { showWhen: false }) +
+    cardHandoffChips(s) + cpBlock(s.latestCheckpoint, { showWhen: false }) +
     '<div class="actions-row">' + resumeButton(s, viewer) +
       '<button type="button" class="btn" data-action="resume" data-id="' + esc(s.id) + '">Copy resume</button>' +
       '<a class="btn" href="' + href + '">' + (s.checkpointCount ? s.checkpointCount + (s.checkpointCount === 1 ? ' checkpoint' : ' checkpoints') : 'Details') + ' →</a>' +
@@ -614,11 +620,14 @@ async function viewWaiting() {
   const f = boardFilter()
   const shownSessions = applyFilter(all.map((n) => n.session), { repos: f.repos })
   const items = all.filter((n) => shownSessions.includes(n.session))
-  let html = '<div class="pagehead"><div><h1>Needs you</h1><div class="sub">Permission prompts and questions waiting on you, longest wait first. Answer here, or Go to the terminal.' +
+  const todoOv = needs.todos || { open: [], done: [] }
+  const nTodos = (todoOv.open || []).length
+  let html = '<div class="pagehead"><div><h1>Needs you' + (nTodos ? ' <span class="todo-subcount">' + nTodos + (nTodos === 1 ? ' to-do' : ' to-dos') + '</span>' : '') + '</h1><div class="sub">Permission prompts and questions waiting on you, longest wait first. Answer here, or Go to the terminal.' +
     (state.mayAnswer ? '' : ' Answering from this device is off.') + '</div></div></div>'
   html += chipBar(repoChips(all.map((n) => n.session)), f.repos, all.length, 'nothing waiting')
   if (!items.length) html += '<div class="empty mt"><p><strong>Nothing waiting on you.</strong></p><p>When a session asks for permission or asks you a question, it shows up here and at the top of the board.' + (f.repos.length && all.length ? ' (' + all.length + ' in other repos. <button type="button" class="linkish" data-action="clear-filters">Show all</button>)' : '') + '</p></div>'
   else html += '<section class="needs-strip quiet mt" aria-label="Waiting"><div class="needs-list">' + items.map((n) => needPanel(n, needOpts())).join('') + '</div></section>'
+  html += todosSection(todoOv, { agoFn: ago, mayEdit: state.mayAnswer !== false, doneOpen: !!state.todoDoneOpen, repos: f.repos })
   const recent = needs.recent || []
   html += '<details class="recent"' + (state.recentOpen !== false ? ' open' : '') + '><summary>Recently answered <span class="count">' + recent.length + '</span></summary>' +
     (recent.length ? '<ul>' + recent.map((r) => '<li><span class="t" title="' + esc(r.at) + '">' + esc(ago(r.at)) + '</span><a href="#/s/' + encodeURIComponent(r.session.id) + '">' + esc(r.session.title || 'Untitled session') + '</a>' +
@@ -630,8 +639,10 @@ async function viewWaiting() {
   html += dismissedHtml(needs.dismissed || [], { open: !!state.dismissedOpen, agoFn: ago })
   $app.innerHTML = banners() + html
   // Open/closed survives live repaints (0.6.5).
-  const dz = $app.querySelector('details.dismissed')
+  const dz = $app.querySelector('details.dismissed:not(.todo-done-list)')
   if (dz) dz.addEventListener('toggle', () => { state.dismissedOpen = dz.open })
+  const td = $app.querySelector('details.todo-done-list')
+  if (td) td.addEventListener('toggle', () => { state.todoDoneOpen = td.open })
   const rc = $app.querySelector('details.recent')
   if (rc) rc.addEventListener('toggle', () => { state.recentOpen = rc.open })
 }
@@ -748,6 +759,9 @@ async function viewSession(id) {
     fact('Terminal', (s.terminal ? s.terminal.label : '—') + (s.tty ? ' · ' + s.tty.replace('/dev/', '') : '') + ' · tab cp:' + (s.shortId || '')) + '</div>'
   html += spacePicker(s, spv, 'session', s.id)
   html += '<section class="sprs" id="prs">' + sessionPrsSection(s, { mayEdit: !s.agent }) + '</section>'
+  // 0.7.0: steps handed back to you, and the docs, plans and artifacts it made
+  html += '<section class="stodos" id="todos">' + sessionTodosSection(s, { agoFn: ago, mayEdit: state.mayAnswer !== false }) + '</section>'
+  html += '<section class="sfiles" id="files">' + sessionFilesSection(s, { agoFn: ago }) + '</section>'
   if (s.needsYou) html += '<section class="needs-strip one" aria-label="Needs you"><div class="needs-head"><h2>Needs you</h2></div><div class="needs-list">' + needPanel({ ...s.needsYou, session: s }, needOpts({ compact: true })) + '</div></section>'
   if (s.statusChanges && s.statusChanges.length) {
     html += '<div class="striplabel">Status history</div><div class="strip">' + s.statusChanges.slice(-24).map((c) => '<span class="s-' + esc(c.status) + '" title="' + esc(clock(c.at)) + '">' + esc(LABEL[c.status] || c.status) + '</span>').join('') + '</div>'
@@ -2957,6 +2971,15 @@ document.addEventListener('click', async (ev) => {
     if (action === 'quick-reply') return quickReplyClick(btn)
     if (action === 'need-more') return needMoreClick(btn)
     if (action === 'need-dismiss') return needDismissClick(btn)
+    // ---- To do and Files (0.7.0)
+    if (action === 'todo-restore' || action === 'todo-restore-all') {
+      btn.disabled = true
+      state.todoDoneOpen = true
+      try { await api('POST', '/v1/todos/restore', action === 'todo-restore-all' ? { all: true } : { key: btn.dataset.todo }) } catch (e) { toast(e.message, 5000) }
+      return render()
+    }
+    if (action === 'file-open') return openDoc(btn.dataset.session, { path: btn.dataset.path, plan: btn.dataset.plan })
+    if (action === 'doc-close') return closeDoc()
     if (action === 'need-restore' || action === 'need-restore-all') {
       btn.disabled = true
       state.dismissedOpen = true
@@ -2966,7 +2989,9 @@ document.addEventListener('click', async (ev) => {
     if (action === 'go') return goClick(btn, id, s)
     if (action === 'resume-open') return resumeOpen(btn, btn.dataset.id || id)
     if (action === 'closed-more') { closedUi.limit += CLOSED_PAGE; btn.disabled = true; try { await closedFetch(state.boardFilter || { repos: [] }, state.boardSpace); closedRepaint() } catch (e) { toast(e.message, 5000) } return }
-    if (action === 'closed-clear') { closedUi.q = ''; closedUi.limit = CLOSED_PAGE; state.boardSpace = null; saveSpace(null); return setBoardFilter({ repos: [], status: 'closed' }) }
+    // 0.7.0: only sessions with docs, plans or artifacts
+    if (action === 'closed-docs') { closedUi.docs = !closedUi.docs; closedUi.limit = CLOSED_PAGE; btn.setAttribute('aria-pressed', String(closedUi.docs)); btn.textContent = (closedUi.docs ? '✓ ' : '') + 'Docs & artifacts'; try { await closedFetch(state.boardFilter || { repos: [] }, state.boardSpace); closedRepaint() } catch (e) { toast(e.message, 5000) } return }
+    if (action === 'closed-clear') { closedUi.docs = false; closedUi.q = ''; closedUi.limit = CLOSED_PAGE; state.boardSpace = null; saveSpace(null); return setBoardFilter({ repos: [], status: 'closed' }) }
     if (action && action.startsWith('st-')) return stAction(action, btn)
     if (action && action.startsWith('sync-') || action === 'peer-trust') return syncAction(action, btn)
     if (action === 'resume') {
@@ -3109,6 +3134,65 @@ async function needMoreClick(btn) {
   paint()
 }
 
+// Tick a to-do (0.7.0): done on every board at once, kept in the folder, Undo for 5 s.
+async function todoDoneChange(cb) {
+  const key = cb.dataset.todoDone
+  if (!key || !cb.checked) return
+  const li = cb.closest('li.todo')
+  if (li) li.classList.add('ticked')
+  try { await api('POST', '/v1/todos/done', { key }) } catch (e) { cb.checked = false; if (li) li.classList.remove('ticked'); toast('Couldn’t tick it: ' + e.message, 5000); return }
+  for (const s of state.sessions || []) if (s.todos) s.todos = s.todos.filter((t) => t.key !== key)
+  toastUndo('Done', async () => {
+    try { await api('POST', '/v1/todos/restore', { key }) } catch (e) { toast(e.message, 5000) }
+    render()
+  })
+  setTimeout(() => { if (!busy()) render() }, 400)
+}
+
+// The in-app viewer (0.7.0): a doc or plan a session wrote, read from the Mac
+// that owns it (through another Mac or the relay from a phone). Markdown is
+// rendered from escaped text; HTML files show as source; anything else downloads.
+function docViewerEl() {
+  let el = document.getElementById('docViewer')
+  if (el) return el
+  el = document.createElement('div')
+  el.id = 'docViewer'
+  el.className = 'doc-viewer'
+  el.hidden = true
+  el.setAttribute('role', 'dialog')
+  el.setAttribute('aria-modal', 'true')
+  el.setAttribute('aria-labelledby', 'docViewerTitle')
+  el.innerHTML = '<div class="dv-sheet"><div class="dv-head"><div class="dv-title" id="docViewerTitle"></div><a class="btn sm dv-dl" hidden>Download</a><button type="button" class="dv-x" data-action="doc-close" aria-label="Close">×</button></div><div class="dv-sub faint"></div><div class="dv-body"></div></div>'
+  el.addEventListener('click', (ev) => { if (ev.target === el) closeDoc() })
+  document.body.appendChild(el)
+  return el
+}
+function closeDoc() { const el = document.getElementById('docViewer'); if (el) { el.hidden = true; el.querySelector('.dv-body').innerHTML = '' } document.documentElement.classList.remove('dv-open') }
+document.addEventListener('keydown', (ev) => { if (ev.key === 'Escape' && document.getElementById('docViewer') && !document.getElementById('docViewer').hidden) closeDoc() })
+async function openDoc(sessionId, { path, plan } = {}) {
+  if (!sessionId || (!path && !plan)) return
+  const el = docViewerEl()
+  const name = plan ? 'Plan' : String(path).split('/').pop()
+  el.querySelector('.dv-title').textContent = name
+  el.querySelector('.dv-sub').textContent = ''
+  el.querySelector('.dv-body').innerHTML = '<div class="empty">Opening…</div>'
+  const dl = el.querySelector('.dv-dl'); dl.hidden = true; dl.removeAttribute('href')
+  el.hidden = false
+  document.documentElement.classList.add('dv-open')
+  const qs = new URLSearchParams(plan ? { plan } : { path })
+  try {
+    const r = await api('GET', '/v1/sessions/' + encodeURIComponent(sessionId) + '/file?' + qs)
+    if (el.hidden) return
+    el.querySelector('.dv-title').textContent = r.name || name
+    el.querySelector('.dv-sub').textContent = [r.plan ? 'Plan' : r.kind === 'new' ? 'New' : r.kind === 'edited' ? 'Edited' : '', r.size ? (r.size < 1024 ? r.size + ' B' : Math.round(r.size / 1024) + ' KB') : '', r.peer ? 'from ' + r.peer : ''].filter(Boolean).join(' · ')
+    el.querySelector('.dv-body').innerHTML = docViewerBody(r)
+    const href = docDownloadHref(r)
+    if (href) { dl.href = href; dl.download = String(r.name || name).split('/').pop() + (r.plan ? '.md' : ''); dl.hidden = false }
+  } catch (e) {
+    el.querySelector('.dv-body').innerHTML = '<div class="empty">' + esc(e.message) + '</div>'
+  }
+}
+
 // Dismiss a need (0.6.5): gone from every card and count at once, kept on
 // the daemon (so your other devices and the relay see it too), Undo for 5 s.
 async function needDismissClick(btn) {
@@ -3138,6 +3222,16 @@ function goClick(btn, id, s) {
 }
 
 document.addEventListener('submit', async (ev) => {
+  if (ev.target.dataset && ev.target.dataset.todoAdd) {
+    ev.preventDefault()
+    const input = ev.target.querySelector('input[name=todo]')
+    const text = input.value.trim()
+    if (!text) { input.focus(); return }
+    const sid = ev.target.dataset.todoAdd === '-' ? null : ev.target.dataset.todoAdd
+    const b = ev.target.querySelector('button'); if (b) b.disabled = true
+    try { await api('POST', '/v1/todos', { text, sessionId: sid }); input.value = ''; input.blur(); toast('Added to your to-dos'); await render() } catch (e) { toast(e.message, 5000) } finally { if (b) b.disabled = false }
+    return
+  }
   if (ev.target.dataset && ev.target.dataset.prLink) {
     ev.preventDefault()
     const input = ev.target.querySelector('input[name=ref]')
@@ -3204,7 +3298,7 @@ document.addEventListener('submit', async (ev) => {
 
 // Live updates over SSE; re-render the current view, at most every 800 ms.
 let pending = null
-const busy = () => !!document.querySelector('.lo-menu, .title input, .repomore[open], .need .deny-form:not([hidden])') || !!(document.activeElement && document.activeElement.closest && document.activeElement.closest('.addform') && document.activeElement.value) || !!(document.activeElement && document.activeElement.closest && document.activeElement.closest('.need') && /^(INPUT|TEXTAREA)$/.test(document.activeElement.tagName))
+const busy = () => !!document.querySelector('.doc-viewer:not([hidden]), .lo-menu, .title input, .repomore[open], .need .deny-form:not([hidden])') || !!(document.activeElement && document.activeElement.closest && document.activeElement.closest('.addform') && document.activeElement.value) || !!(document.activeElement && document.activeElement.closest && document.activeElement.closest('.need') && /^(INPUT|TEXTAREA)$/.test(document.activeElement.tagName))
 // Settings isn't redrawn by live updates: it would wipe what you're editing,
 // and the QR code you're scanning (v0.4.6). Its sections fetch their own state.
 function soon() { if (pending) return; pending = setTimeout(() => { pending = null; if (!busy() && !(state.route && state.route.name === 'settings') && !(state.route && state.route.name === 'catchup' && cuUi.open)) render(); refreshHealth() }, 800) }
@@ -3223,6 +3317,7 @@ function connect() {
 }
 
 document.addEventListener('change', async (ev) => {
+  if (ev.target.dataset && ev.target.dataset.todoDone) return todoDoneChange(ev.target)
   // Spaces (v0.5.8): a session's or agent's own space, a Mac's default.
   if (ev.target.dataset && ev.target.dataset.spaceKind) {
     const sel = ev.target

package/ui/handoffs.js

@@ -0,0 +1,184 @@
+// To do and Files (0.7.0). Pure HTML builders over what the daemon sends:
+// /v1/needs .todos ({ open, done }) and a session's todos / files / filesSummary.
+// app.js does the fetching and wires the clicks. renderDoc is the viewer's
+// Markdown: everything is escaped first, so raw HTML in a doc shows as text and
+// never runs; links open only for https. Unit tests: test/unit/handoffs-ui.test.mjs.
+import { mdInline } from './changelog-md.js'
+
+const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c])
+const plural = (n, one, many) => n + ' ' + (n === 1 ? one : many || one + 's')
+const safeArtifact = (u) => (/^https:\/\/claude\.ai\/code\/artifact\/[A-Za-z0-9_-]{4,80}$/.test(String(u || '')) ? String(u) : '')
+
+// ------------------------------------------------------------------ to-dos
+
+export function todoRow(t, { agoFn = null, mayEdit = true } = {}) {
+  const codes = (t.codes || []).map((c) => '<button type="button" class="todo-code" data-action="copy-cmd" data-cmd="' + esc(c) + '" title="Copy"><code>' + esc(c.length > 60 ? c.slice(0, 57) + '…' : c) + '</code><span class="todo-cp" aria-hidden="true">Copy</span></button>').join('')
+  const meta = [t.manual ? 'you added' : null, agoFn && t.at ? agoFn(t.at) : null].filter(Boolean).join(' · ')
+  return '<li class="todo" data-todo="' + esc(t.key) + '"><label class="todo-check"><input type="checkbox" data-todo-done="' + esc(t.key) + '"' + (mayEdit ? '' : ' disabled') + ' aria-label="Done: ' + esc(t.text) + '"><span class="box" aria-hidden="true"></span></label>' +
+    '<div class="todo-main"><div class="todo-text">' + mdInline(t.text) + '</div>' + (codes ? '<div class="todo-codes">' + codes + '</div>' : '') + (meta ? '<div class="todo-meta">' + esc(meta) + '</div>' : '') + '</div></li>'
+}
+
+export function todoAddForm(sessionId = '') {
+  return '<form class="todo-add addform" data-todo-add="' + esc(sessionId || '-') + '" autocomplete="off"><input type="text" name="todo" maxlength="200" placeholder="Add a to-do" aria-label="Add a to-do" enterkeyhint="done"><button type="submit" class="btn sm">Add</button></form>'
+}
+
+// Open to-dos grouped by session (your own, with no session, last).
+export function groupTodos(open = []) {
+  const groups = new Map()
+  for (const t of open) {
+    const id = (t.session && t.session.id) || ''
+    if (!groups.has(id)) groups.set(id, { session: t.session || null, items: [] })
+    groups.get(id).items.push(t)
+  }
+  return [...groups.values()].sort((a, b) => (!a.session) - (!b.session) || String(b.items[b.items.length - 1].at || '').localeCompare(String(a.items[a.items.length - 1].at || '')))
+}
+
+export function doneTodosHtml(done = [], { open = false, agoFn = null } = {}) {
+  if (!done.length) return ''
+  return '<details class="dismissed todo-done-list"' + (open ? ' open' : '') + '><summary>Done (' + done.length + ')</summary><ul>' +
+    done.slice(0, 100).map((d) => '<li><div class="dl-main"><span class="dl-title">' + mdInline(d.text) + '</span>' + (d.session ? '<span class="dl-line">' + esc(d.session.title) + '</span>' : '') +
+      (agoFn && d.doneAt ? '<span class="dl-at">done ' + esc(agoFn(d.doneAt)) + '</span>' : '') + '</div>' +
+      '<button type="button" class="btn sm" data-action="todo-restore" data-todo="' + esc(d.key) + '">Restore</button></li>').join('') +
+    '</ul>' + (done.length > 1 ? '<button type="button" class="linkish" data-action="todo-restore-all">Restore all</button>' : '') + '</details>'
+}
+
+// The Needs view's "To do" section.
+export function todosSection(ov, { agoFn = null, mayEdit = true, doneOpen = false, repos = [] } = {}) {
+  const open = ((ov && ov.open) || []).filter((t) => !repos.length || (t.session && repos.includes(t.session.repoLabel)) || !t.session)
+  const head = '<div class="needs-head todo-head"><h2>To do <span class="count">' + open.length + '</span></h2><span class="sub">Steps sessions handed back to you, and your own</span></div>'
+  const body = open.length
+    ? groupTodos(open).map((g) => '<div class="todo-group">' + (g.session ? '<div class="todo-sess"><a href="#/s/' + encodeURIComponent(g.session.id) + '">' + esc(g.session.title) + '</a>' + (g.session.repoLabel ? '<span class="chip mono">' + esc(g.session.repoLabel) + '</span>' : '') + '</div>' : '<div class="todo-sess"><span>Your to-dos</span></div>') +
+      '<ul class="todos">' + g.items.map((t) => todoRow(t, { agoFn, mayEdit })).join('') + '</ul></div>').join('')
+    : '<div class="nocp">No to-dos. When a session says you need to do something yourself (run a command, set a secret, add DNS records), it shows up here.</div>'
+  return '<section class="todos-sec mt" aria-label="To do">' + head + (mayEdit ? todoAddForm('') : '') + body + doneTodosHtml((ov && ov.done) || [], { open: doneOpen, agoFn }) + '</section>'
+}
+
+// A session page's to-dos.
+export function sessionTodosSection(s, { agoFn = null, mayEdit = true } = {}) {
+  const list = s.todos || []
+  if (!list.length && !mayEdit) return ''
+  return '<h2>To do <span class="count">' + list.length + '</span></h2>' +
+    (list.length ? '<ul class="todos">' + list.map((t) => todoRow(t, { agoFn, mayEdit })).join('') + '</ul>' : '') + (mayEdit ? todoAddForm(s.id) : '')
+}
+
+// ------------------------------------------------------------------ chips
+
+export function filesChipLabel(fs, { compact = false } = {}) {
+  if (!fs) return ''
+  const parts = []
+  const docs = (fs.docs || 0) + (fs.plans || 0)
+  if (docs) parts.push(compact ? docs + (docs === 1 ? ' doc' : ' docs') : plural(docs, 'doc'))
+  if (fs.artifacts) parts.push(plural(fs.artifacts, 'artifact'))
+  return parts.join(' · ')
+}
+// The card's small chips: "2 to-dos" and "2 docs · 1 artifact".
+export function cardHandoffChips(s) {
+  const n = (s.todos || []).length
+  const fl = filesChipLabel(s.filesSummary)
+  if (!n && !fl) return ''
+  const href = '#/s/' + encodeURIComponent(s.id)
+  return '<div class="handoff-chips">' + (n ? '<a class="chip todochip" href="' + href + '" title="Steps handed back to you">☐ ' + esc(plural(n, 'to-do')) + '</a>' : '') +
+    (fl ? '<a class="chip fileschip" href="' + href + '" title="Docs and artifacts from this session">' + esc(fl) + '</a>' : '') + '</div>'
+}
+
+// ------------------------------------------------------------------ files
+
+const TYPE_ICON = { markdown: 'MD', image: 'IMG', pdf: 'PDF', html: 'HTML', text: 'TXT', other: 'FILE' }
+export function sessionFilesSection(s, { agoFn = null } = {}) {
+  const f = s.files
+  if (!f) return ''
+  const arts = (f.artifacts || []).filter((a) => safeArtifact(a.url))
+  const plans = f.plans || []
+  const docs = f.docs || []
+  if (!arts.length && !plans.length && !docs.length && !f.code) return ''
+  const when = (at) => (agoFn && at ? '<span class="f-at">' + esc(agoFn(at)) + '</span>' : '')
+  let h = '<h2>Files</h2><ul class="files-list">'
+  for (const a of arts) h += '<li class="f-art"><a class="f-row" href="' + esc(safeArtifact(a.url)) + '" target="_blank" rel="noopener noreferrer"><span class="f-ic art" aria-hidden="true">◆</span><span class="f-name">' + esc(a.title) + '</span><span class="f-kind">Artifact ↗</span>' + when(a.at) + '</a></li>'
+  for (const p of plans) h += '<li><button type="button" class="f-row" data-action="file-open" data-plan="' + esc(p.id) + '" data-session="' + esc(s.id) + '"><span class="f-ic" aria-hidden="true">PLAN</span><span class="f-name">' + esc(p.title) + '</span><span class="f-kind">Plan</span>' + when(p.at) + '</button></li>'
+  for (const d of docs) h += '<li><button type="button" class="f-row" data-action="file-open" data-path="' + esc(d.path) + '" data-session="' + esc(s.id) + '"><span class="f-ic" aria-hidden="true">' + (d.plan ? 'PLAN' : TYPE_ICON[d.type] || 'FILE') + '</span><span class="f-name mono">' + esc(d.name) + '</span><span class="f-kind ' + (d.kind === 'new' ? 'new' : '') + '">' + (d.plan ? 'Plan' : d.kind === 'new' ? 'new' : 'edited') + '</span>' + when(d.at) + '</button></li>'
+  h += '</ul>'
+  if (f.code) h += '<div class="f-code faint">' + esc(plural(f.code, 'code file')) + ' changed</div>'
+  return h
+}
+
+// ------------------------------------------------------------------ viewer
+
+// Markdown -> safe HTML: headings, paragraphs, lists, task boxes, quotes,
+// fenced code, tables, rules. Inline markup via mdInline (escaped; https links only).
+export function renderDoc(md) {
+  const lines = String(md == null ? '' : md).replace(/\r\n?/g, '\n').replace(/^---\n[\s\S]*?\n---\n/, '').split('\n')
+  const out = []
+  let i = 0
+  const para = []
+  const flush = () => { if (para.length) { out.push('<p>' + para.map((x) => mdInline(x)).join('<br>') + '</p>'); para.length = 0 } }
+  while (i < lines.length) {
+    const ln = lines[i]
+    let m
+    if ((m = ln.match(/^\s*(```|~~~)\s*([\w+-]*)/))) {
+      flush()
+      const fence = m[1]; const body = []
+      i++
+      while (i < lines.length && !lines[i].trim().startsWith(fence)) body.push(lines[i++])
+      i++
+      out.push('<pre class="doc-code"><code>' + esc(body.join('\n')) + '</code></pre>')
+      continue
+    }
+    if (!ln.trim()) { flush(); i++; continue }
+    if ((m = ln.match(/^(#{1,6})\s+(.*)$/))) { flush(); const n = Math.min(6, m[1].length + 1); out.push('<h' + n + '>' + mdInline(m[2].replace(/\s+#+\s*$/, '')) + '</h' + n + '>'); i++; continue }
+    if (/^\s*([-*_])(\s*\1){2,}\s*$/.test(ln)) { flush(); out.push('<hr>'); i++; continue }
+    if (/^\s*>/.test(ln)) {
+      flush(); const q = []
+      while (i < lines.length && /^\s*>/.test(lines[i])) q.push(lines[i++].replace(/^\s*>\s?/, ''))
+      out.push('<blockquote>' + renderDoc(q.join('\n')) + '</blockquote>'); continue
+    }
+    if (/^\s*\|.*\|\s*$/.test(ln) && i + 1 < lines.length && /^\s*\|?\s*:?-{2,}/.test(lines[i + 1])) {
+      flush()
+      const cells = (r) => r.trim().replace(/^\||\|$/g, '').split('|').map((c) => c.trim())
+      const head = cells(ln); i += 2
+      const rows = []
+      while (i < lines.length && /^\s*\|.*\|\s*$/.test(lines[i])) rows.push(cells(lines[i++]))
+      out.push('<div class="doc-table"><table><thead><tr>' + head.map((c) => '<th>' + mdInline(c) + '</th>').join('') + '</tr></thead><tbody>' + rows.map((r) => '<tr>' + r.map((c) => '<td>' + mdInline(c) + '</td>').join('') + '</tr>').join('') + '</tbody></table></div>')
+      continue
+    }
+    if (/^\s*(?:[-*+]|\d{1,3}[.)])\s+/.test(ln)) {
+      flush()
+      const ordered = /^\s*\d/.test(ln)
+      const items = []
+      while (i < lines.length && (/^\s*(?:[-*+]|\d{1,3}[.)])\s+/.test(lines[i]) || (/^\s{2,}\S/.test(lines[i]) && items.length))) {
+        const l = lines[i++]
+        const mm = l.match(/^(\s*)(?:[-*+]|\d{1,3}[.)])\s+(.*)$/)
+        if (mm) items.push({ depth: Math.floor(mm[1].replace(/\t/g, '  ').length / 2), text: mm[2] })
+        else items[items.length - 1].text += ' ' + l.trim()
+      }
+      const li = (t) => { const tm = t.match(/^\[([ xX])\]\s+(.*)$/); return tm ? '<li class="task"><span class="tbox' + (tm[1] !== ' ' ? ' on' : '') + '" aria-hidden="true"></span>' + mdInline(tm[2]) + '</li>' : '<li>' + mdInline(t) + '</li>' }
+      out.push('<' + (ordered ? 'ol' : 'ul') + '>' + items.map((it) => (it.depth ? li(it.text).replace('<li', '<li class="sub"') : li(it.text))).join('') + '</' + (ordered ? 'ol' : 'ul') + '>')
+      continue
+    }
+    para.push(ln.trim()); i++
+  }
+  flush()
+  return out.join('\n')
+}
+
+// The viewer's body for a file from GET /v1/sessions/:id/file.
+export function docViewerBody(r) {
+  if (!r) return ''
+  if (r.missing) return '<div class="empty">File no longer exists</div>'
+  if (r.tooBig) return '<div class="empty">' + esc(r.message || 'Too big to open here.') + '</div>'
+  if (r.type === 'markdown') return '<article class="doc-md">' + renderDoc(r.text || '') + '</article>'
+  if (r.type === 'image') {
+    const src = r.base64 ? 'data:' + (/^image\/(png|jpeg|gif|webp)$/.test(r.mime) ? r.mime : 'application/octet-stream') + ';base64,' + r.base64
+      : r.mime === 'image/svg+xml' && typeof r.text === 'string' ? 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(r.text) : ''
+    return src ? '<div class="doc-img"><img alt="' + esc(r.name) + '" src="' + esc(src) + '"></div>' : '<div class="empty">Can’t show this image.</div>'
+  }
+  if (r.type === 'text' || r.type === 'html') return '<pre class="doc-pre">' + esc(r.text || '') + '</pre>'
+  return '<div class="empty">No preview for this kind of file.</div>'
+}
+// A download for anything (an HTML file is offered as a file, never rendered live).
+export function docDownloadHref(r) {
+  if (!r || r.missing || r.tooBig) return ''
+  const mime = r.type === 'html' ? 'text/plain' : r.mime || 'application/octet-stream'
+  if (typeof r.base64 === 'string') return 'data:' + mime + ';base64,' + r.base64
+  if (typeof r.text === 'string') return 'data:' + mime + ';charset=utf-8,' + encodeURIComponent(r.text)
+  return ''
+}