@leftoff/cli 0.8.8 → 0.8.9

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

@@ -1,6 +1,6 @@
 {
   "name": "leftoff",
-  "version": "0.8.8",
+  "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/register.js

@@ -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.8' // 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,

package/package.json

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

package/ui/app.js

@@ -11,7 +11,7 @@ import { mdInline, renderSection } from './changelog-md.js'
 import { cardPrsHtml, sessionPrsSection, prsPageHtml, prsBodyHtml, prRowHtml, prRows, readPrFilter, prsHash } from './prs.js'
 import { wantsSetupBanner, setupCandidate, localLeftoffAnswers, thisOneSuffix } from './viewer.js'
 import { defaultEmoji, PICKER_SET, isEmoji } from './machines.js'
-import { todosSection, sessionTodosSection, cardHandoffChips, sessionFilesSection, docViewerBody, docDownloadHref } from './handoffs.js'
+import { todosSection, sessionTodosSection, cardHandoffChips, sessionFilesSection, docViewerBody, docDownloadHref, docMenuItems, docFileName } 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)
@@ -996,7 +996,11 @@ async function viewSession(id) {
   const branch = s.repo && s.repo.branch
   const spv = await api('GET', '/v1/spaces').catch(() => null)
   let html = '<a class="back" href="#/">← All sessions</a>'
-  html += '<div class="pagehead"><div><h1>' + esc(s.title || 'Untitled session') + '</h1><div class="sub">' + pill(s.status) + ' ' + spaceChip(s, { force: true }) + wtChips(s) + ' &nbsp;' + esc(s.titleSource ? s.titleSource + ' title' : '') + '</div></div>' +
+  // 0.8.9: rename in place: tap the title or the pencil (this Mac's sessions; like /cp-name, your name wins over automatic ones)
+  const canRename = s.isLocal !== false && !s.agent && !/^agent:/.test(String(s.id || ''))
+  html += '<div class="pagehead"><div>' + (canRename
+    ? '<div class="title s-title" data-id="' + esc(s.id) + '"><h1><span class="s-title-text" role="button" tabindex="0" data-action="rename" data-id="' + esc(s.id) + '" data-title="' + esc(s.title || '') + '" title="Rename">' + esc(s.title || 'Untitled session') + '</span></h1><button type="button" class="icon rename-pen" data-action="rename" data-id="' + esc(s.id) + '" data-title="' + esc(s.title || '') + '" aria-label="Rename" title="Rename">' + icon('pencil') + '</button></div>'
+    : '<h1>' + esc(s.title || 'Untitled session') + '</h1>') + '<div class="sub">' + pill(s.status) + ' ' + spaceChip(s, { force: true }) + wtChips(s) + ' &nbsp;' + esc(s.titleSource ? s.titleSource + ' title' : '') + '</div></div>' +
     '<div class="actions">' + goButton(s) + (s.status === 'ended' || s.live === 'closed' ? resumeButton(s, s.viewer || { local: state.viewerLocal !== false, ghostty: !!state.ghostty }) : '') + '<a class="btn" href="#/timeline?session=' + encodeURIComponent(s.id) + '">' + icon('history') + 'Open in Timeline</a><button type="button" class="btn" data-action="resume" data-id="' + esc(s.id) + '">Copy resume</button>' + (s.isLocal ? '<button type="button" class="btn primary" data-action="checkpoint" data-id="' + esc(s.id) + '">Checkpoint now</button>' : '') + '</div></div>'
   html += '<div class="facts">' +
     fact('Machine', mEmoji(s.machine) + ' ' + s.machine + (thisOneSuffix(s.machine, state.health) || (s.isLocal ? '' : ' (synced)'))) + fact('Repo', (s.repoName || '—') + (branch ? ' · ' + branch : '')) + (s.worktree ? fact('Worktree', '⑂ ' + s.worktree.name + (s.worktree.branch ? ' · ' + s.worktree.branch : ''), 'wrap') : '') + (s.startedIn ? fact('Started in', s.startedIn) : '') + fact('Directory', s.cwd || '—') + fact('Last activity', ago(s.lastActivityAt)) + fact('Started', clock(s.startedAt)) +
@@ -1102,7 +1106,7 @@ async function togglePr(url, { retry = false } = {}) {
     const d = prsUi.data[prsUi.view]
     const r = prRows(d).find((x) => x.pr.url === url)
     const el = [...document.querySelectorAll('article.prrow[data-pr]')].find((a) => a.dataset.pr === url)
-    if (el && r) el.outerHTML = prRowHtml(r, { ...prsOpts(prsUi.view, prsUi.filter), team: prsUi.view === 'team', now: Date.now(), showMachine: !!d.multiMachine, open: prsUi.open.has(url), detail: prsUi.details[url] })
+    if (el && r) el.outerHTML = prRowHtml(r, { ...prsOpts(prsUi.view, prsUi.filter), team: prsUi.view === 'team', now: Date.now(), showMachine: !!d.multiMachine, me: d.me || null, open: prsUi.open.has(url), detail: prsUi.details[url] })
   }
   const have = prsUi.details[url]
   if (!prsUi.open.has(url) || (have && !retry && (have.loading || (have.ok && Date.now() - have.at < 60000)))) return repaint()
@@ -1199,7 +1203,7 @@ function renderMd(md, { spaces = [] } = {}) {
     }
     if (/^\s{2,}\S/.test(line) && inList) {
       // "Stopped at: … Next: …" is two lines, each with its label.
-      const t = line.trim(), sm = t.match(/^(Stopped at|Next|Last reply|Doing|Latest|Needs you): ([\s\S]*?)(?: (Next): ([\s\S]*))?$/)
+      const t = line.trim(), sm = t.match(/^(Stopped at|Next|Last reply|Doing|Latest|Needs you|Merged|Commits): ([\s\S]*?)(?: (Next): ([\s\S]*))?$/)
       if (sm) out.push('<span class="sub"><span class="k">' + sm[1] + '</span> ' + inline(sm[2]) + '</span>' + (sm[3] ? '<span class="sub"><span class="k">' + sm[3] + '</span> ' + inline(sm[4]) + '</span>' : ''))
       else out.push('<span class="sub">' + inline(t) + '</span>')
       continue
@@ -3022,6 +3026,8 @@ document.addEventListener('input', (ev) => {
 document.addEventListener('keydown', (ev) => { if (ev.target.id === 'prs-q' && ev.key === 'Escape' && ev.target.value) { ev.preventDefault(); ev.target.value = ''; ev.target.dispatchEvent(new Event('input', { bubbles: true })) } })
 
 window.addEventListener('hashchange', () => closeActionMenu())
+// 0.8.9: a session page's title is a button too (Enter or Space renames it)
+document.addEventListener('keydown', (e) => { const t = e.target; if ((e.key === 'Enter' || e.key === ' ') && t && t.matches && t.matches('.s-title-text[role="button"]')) { e.preventDefault(); t.click() } })
 // 0.8.7: a card's ⋯ opens from the keyboard with the arrows too (Enter and Space click it).
 document.addEventListener('keydown', (ev) => {
   const b = ev.target && ev.target.closest && ev.target.closest('[data-action="card-more"]')
@@ -3045,7 +3051,7 @@ document.addEventListener('click', async (ev) => {
     if (action === 'prs-filter') {
       const f = { ...prsUi.filter }, k = btn.dataset.k, v = btn.dataset.v || ''
       if (k === 'repo') f.repos = v ? toggleRepo(f.repos || [], { key: btn.dataset.key || v, label: v }, ev.shiftKey || ev.metaKey || ev.ctrlKey) : []
-      else if (k === 'state' || k === 'checks') f[k] = f[k] === v ? null : v
+      else if (k === 'state') f.state = f.state === v ? null : v
       return setPrsFilter(f)
     }
     if (action === 'prs-clear') { const q = document.getElementById('prs-q'); if (q) q.value = ''; return setPrsFilter({}) }
@@ -3327,6 +3333,8 @@ document.addEventListener('click', async (ev) => {
     }
     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 === 'doc-dl') { ev.preventDefault(); return openDocMenu(btn) }
+    if (action === 'doc-copy' || action === 'doc-download' || action === 'doc-pdf') return docAction(action.slice(4))
     if (action === 'need-restore' || action === 'need-restore-all') {
       btn.disabled = true
       state.dismissedOpen = true
@@ -3370,8 +3378,8 @@ document.addEventListener('click', async (ev) => {
     } else if (action === 'rename') {
       const box = btn.closest('.title')
       if (!box || box.querySelector('input')) return
-      const current = s ? s.title || '' : ''
-      box.innerHTML = '<input value="' + esc(current) + '" aria-label="Session title">'
+      const current = s ? s.title || '' : btn.dataset.title || ''
+      box.innerHTML = '<input value="' + esc(current) + '" aria-label="Session title" maxlength="120" enterkeyhint="done">'
       const input = box.querySelector('input')
       input.focus(); input.select()
       let finished = false
@@ -3379,12 +3387,14 @@ document.addEventListener('click', async (ev) => {
         if (finished) return
         finished = true
         if (save && input.value.trim() && input.value.trim() !== current) {
-          await api('PATCH', '/v1/sessions/' + encodeURIComponent(id), { title: input.value.trim() })
-          toast('Renamed. With the mod, the session and its tab title follow within a minute')
+          try {
+            await api('PATCH', '/v1/sessions/' + encodeURIComponent(id), { title: input.value.trim() })
+            toast('Renamed. With the mod, the session and its tab title follow within a minute')
+          } catch (e) { toast(e.message, 5000) }
         }
         render()
       }
-      input.addEventListener('keydown', (e) => { if (e.key === 'Enter') done(true); if (e.key === 'Escape') done(false) })
+      input.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); done(true) } if (e.key === 'Escape') { e.stopPropagation(); done(false) } })
       input.addEventListener('blur', () => done(true))
     }
   } catch (e) { toast(e.message); btn.disabled = false }
@@ -3507,6 +3517,7 @@ async function todoDoneChange(cb) {
 // 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.
+const docUi = { r: null, name: '', printing: null }
 function docViewerEl() {
   let el = document.getElementById('docViewer')
   if (el) return el
@@ -3517,12 +3528,15 @@ function docViewerEl() {
   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>'
+  // 0.8.9: Download is a small menu (Copy / Download as Markdown / Download as PDF…), our own, not a native one
+  el.innerHTML = '<div class="dv-sheet"><div class="dv-head"><div class="dv-title" id="docViewerTitle"></div>' +
+    '<button type="button" class="btn sm dv-dl" data-action="doc-dl" aria-haspopup="menu" aria-expanded="false" hidden>' + icon('download') + '<span class="dl-word">Download</span><span class="chev" aria-hidden="true">▾</span></button>' +
+    '<button type="button" class="dv-x" data-action="doc-close" aria-label="Close">×</button></div><div class="dv-sub faint"></div><div class="dv-ptitle" aria-hidden="true"></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') }
+function closeDoc() { closeActionMenu(); endDocPrint(); const el = document.getElementById('docViewer'); if (el) { el.hidden = true; el.querySelector('.dv-body').innerHTML = '' } docUi.r = null; 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
@@ -3531,7 +3545,8 @@ async function openDoc(sessionId, { path, plan } = {}) {
   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')
+  const dl = el.querySelector('.dv-dl'); dl.hidden = true
+  docUi.r = null; docUi.name = name
   el.hidden = false
   document.documentElement.classList.add('dv-open')
   const qs = new URLSearchParams(plan ? { plan } : { path })
@@ -3541,12 +3556,88 @@ async function openDoc(sessionId, { path, plan } = {}) {
     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 }
+    el.querySelector('.dv-ptitle').textContent = docFileName(r, name)
+    docUi.r = r; docUi.name = name
+    const items = docMenuItems(r)
+    if (items.length) {
+      dl.hidden = false
+      const menu = items.length > 1
+      dl.setAttribute('aria-haspopup', menu ? 'menu' : 'false')
+      dl.querySelector('.chev').hidden = !menu
+      dl.title = menu ? 'Copy or download' : 'Download ' + docFileName(r, name)
+      dl.setAttribute('aria-label', menu ? 'Copy or download' : 'Download')
+    }
   } catch (e) {
     el.querySelector('.dv-body').innerHTML = '<div class="empty">' + esc(e.message) + '</div>'
   }
 }
+function openDocMenu(btn) {
+  const r = docUi.r
+  const items = docMenuItems(r)
+  if (!items.length) return
+  if (items.length === 1) return docAction(items[0].key)
+  const ic = { copy: 'copy', download: 'download', pdf: 'file-text' }
+  openActionMenu(btn, items.map((it) => ({ label: it.label, icon: icon(ic[it.key] || 'download'), attrs: { 'data-action': 'doc-' + it.key, title: it.title } })), { title: docFileName(r, docUi.name) })
+}
+async function copyRaw(text) {
+  if (await clipWrite(text)) return true
+  const ta = document.createElement('textarea')
+  ta.value = text; ta.setAttribute('readonly', ''); ta.style.cssText = 'position:fixed;top:0;left:0;opacity:0;font-size:16px'
+  document.body.appendChild(ta); ta.select()
+  let ok = false
+  try { ok = document.execCommand('copy') } catch {}
+  ta.remove()
+  return ok
+}
+async function docAction(key) {
+  const r = docUi.r
+  if (!r) return
+  const btn = document.querySelector('#docViewer .dv-dl')
+  if (key === 'copy') {
+    const ok = await copyRaw(String(r.text || ''))
+    if (!ok) { toast('Couldn’t copy here. Download it instead.', 4000); return }
+    toast('Copied ' + docFileName(r, docUi.name))
+    if (btn) {
+      const word = btn.querySelector('.dl-word')
+      btn.classList.add('copied'); if (word) word.textContent = 'Copied'
+      clearTimeout(docUi.copiedTimer)
+      docUi.copiedTimer = setTimeout(() => { btn.classList.remove('copied'); if (word) word.textContent = 'Download' }, 1500)
+    }
+    return
+  }
+  if (key === 'download') {
+    const a = document.createElement('a')
+    a.href = docDownloadHref(r); a.download = docFileName(r, docUi.name); a.rel = 'noopener'
+    document.body.appendChild(a); a.click(); a.remove()
+    return
+  }
+  if (key === 'pdf') return printDoc()
+}
+// Download as PDF: the browser's print dialog over just this file (print
+// styles in app.css), in the light theme, titled with the file's name, so
+// "Save as PDF" makes a clean PDF. No PDF library.
+function printDoc() {
+  const r = docUi.r
+  if (!r || r.type !== 'markdown') return
+  endDocPrint()
+  const root = document.documentElement
+  docUi.printing = { title: document.title, theme: root.getAttribute('data-theme') }
+  root.setAttribute('data-theme', 'light')
+  root.classList.add('dv-printing')
+  document.title = docFileName(r, docUi.name).replace(/\.(md|markdown)$/i, '')
+  window.addEventListener('afterprint', endDocPrint, { once: true })
+  toast('Choose “Save as PDF” in the print dialog', 5000)
+  setTimeout(() => { try { window.print() } catch { endDocPrint() } }, 60)
+}
+function endDocPrint() {
+  const p = docUi.printing
+  if (!p) return
+  docUi.printing = null
+  const root = document.documentElement
+  root.classList.remove('dv-printing')
+  if (p.theme) root.setAttribute('data-theme', p.theme); else root.removeAttribute('data-theme')
+  document.title = p.title
+}
 
 // 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.

package/ui/changelog-md.js

@@ -15,11 +15,13 @@ const anchor = (href, inner) => '<a href="' + esc(href) + '" target="_blank" rel
 const docLink = (u) => /^#\/docs\/[a-z-]+$/.test(String(u || '').trim())
 
 // One line of inline markdown -> HTML. Everything that isn't markup is escaped.
-export function mdInline(s, { links = true } = {}) {
+export function mdInline(s, { links = true, em = false } = {}) {
   const held = []
   const hold = (html) => '\u0000' + (held.push(html) - 1) + '\u0000'
   const back = (t) => t.replace(/\u0000(\d+)\u0000/g, (_, i) => held[Number(i)])
-  const marks = (t) => esc(t).replace(/\*\*(.+?)\*\*/g, '<b>$1</b>')
+  // 0.8.9 (em: the file viewer): *italic*, _italic_ (not inside snake_case) and ~~struck~~ too
+  const emph = (t) => !em ? t : t.replace(/~~([^~\s][^~]*?)~~/g, '<del>$1</del>').replace(/(^|[^\w*])\*([^*\s][^*]*?)\*(?![\w*])/g, '$1<em>$2</em>').replace(/(^|[^\w])_([^_\s][^_]*?)_(?!\w)/g, '$1<em>$2</em>')
+  const marks = (t) => emph(esc(t).replace(/\*\*(.+?)\*\*/g, '<b>$1</b>'))
   let t = String(s == null ? '' : s)
   // `code` first, so nothing inside it is read as markup.
   t = t.replace(/`([^`]+)`/g, (_, c) => hold('<code>' + esc(c) + '</code>'))
@@ -28,6 +30,8 @@ export function mdInline(s, { links = true } = {}) {
     const inner = back(marks(text))
     return hold(links && httpsUrl(url) ? anchor(url, inner) : links && docLink(url) ? '<a href="' + esc(url.trim()) + '">' + inner + '</a>' : inner)
   })
+  // with em on, bare links are held first so an _ or * in a URL stays a URL
+  if (links && em) t = t.replace(/(^|[\s(])(https?:\/\/[^\s<)\u0000]+[^\s<).,\u0000])/g, (_, pre, url) => pre + hold(anchor(url, esc(url))))
   t = marks(t)
   if (links) t = t.replace(/(^|[\s(])(https?:\/\/[^\s<)\u0000]+[^\s<).,\u0000])/g, (_, pre, url) => pre + anchor(url.replace(/&amp;/g, '&'), url))
   return back(t)

package/ui/handoffs.js

@@ -103,14 +103,52 @@ export function sessionFilesSection(s, { agoFn = null } = {}) {
 
 // ------------------------------------------------------------------ viewer
 
+// 0.8.9: a light tint for code blocks, not a real highlighter: comments,
+// strings, numbers and common keywords get a class (.tk-c/.tk-s/.tk-n/.tk-k),
+// everything escaped. Plain text, diffs and unknown languages: diff lines
+// tinted, nothing else.
+const KEYWORDS = new Set(('if else for while do switch case break continue return function const let var class new this import export from default async await try catch finally throw typeof instanceof in of yield ' +
+  'def lambda elif pass with as is not and or None True False self raise except global nonlocal ' +
+  'fn pub mut impl struct enum trait match use mod crate where loop ' +
+  'func package type interface go defer chan select range map ' +
+  'true false null undefined nil void public private protected static final extends implements ' +
+  'echo then fi esac done local export readonly ' +
+  'SELECT FROM WHERE JOIN LEFT RIGHT INNER OUTER ON GROUP BY ORDER LIMIT INSERT INTO VALUES UPDATE SET DELETE CREATE TABLE INDEX AND OR NOT AS WITH').split(' '))
+const PROSE_LANGS = new Set(['', 'text', 'txt', 'plain', 'plaintext', 'markdown', 'md', 'output', 'console', 'log'])
+export function tintCode(code, lang = '') {
+  const src = String(code == null ? '' : code)
+  lang = String(lang || '').toLowerCase()
+  if (lang === 'diff' || lang === 'patch') return src.split('\n').map((l) => /^\+(?!\+\+)/.test(l) ? '<span class="tk-add">' + esc(l) + '</span>' : /^-(?!--)/.test(l) ? '<span class="tk-del">' + esc(l) + '</span>' : /^@@/.test(l) ? '<span class="tk-k">' + esc(l) + '</span>' : esc(l)).join('\n')
+  if (PROSE_LANGS.has(lang)) return esc(src)
+  const hash = /^(sh|bash|zsh|shell|py|python|rb|ruby|yaml|yml|toml|ini|conf|dockerfile|make|makefile|r|perl|pl|elixir|ex)$/.test(lang)
+  const dash = /^(sql|lua|haskell|hs)$/.test(lang)
+  const re = new RegExp([
+    hash ? '(#[^\\n]*)' : dash ? '(--[^\\n]*)' : '(\\/\\/[^\\n]*|\\/\\*[\\s\\S]*?\\*\\/)',
+    '("(?:[^"\\\\\\n]|\\\\.)*"|\'(?:[^\'\\\\\\n]|\\\\.)*\'|`(?:[^`\\\\]|\\\\.)*`)',
+    '\\b(\\d+(?:\\.\\d+)?)\\b',
+    '\\b([A-Za-z_][A-Za-z0-9_]*)\\b',
+  ].join('|'), 'g')
+  let out = '', last = 0, m
+  while ((m = re.exec(src))) {
+    out += esc(src.slice(last, m.index))
+    if (m[1] != null) out += '<span class="tk-c">' + esc(m[1]) + '</span>'
+    else if (m[2] != null) out += '<span class="tk-s">' + esc(m[2]) + '</span>'
+    else if (m[3] != null) out += '<span class="tk-n">' + esc(m[3]) + '</span>'
+    else out += KEYWORDS.has(m[4]) ? '<span class="tk-k">' + esc(m[4]) + '</span>' : esc(m[4])
+    last = re.lastIndex
+  }
+  return out + esc(src.slice(last))
+}
+
 // Markdown -> safe HTML: headings, paragraphs, lists, task boxes, quotes,
 // fenced code, tables, rules. Inline markup via mdInline (escaped; https links only).
+const mdi = (t) => mdInline(t, { em: true })
 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 } }
+  const flush = () => { if (para.length) { out.push('<p>' + para.map((x) => mdi(x)).join('<br>') + '</p>'); para.length = 0 } }
   while (i < lines.length) {
     const ln = lines[i]
     let m
@@ -120,11 +158,12 @@ export function renderDoc(md) {
       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>')
+      const lang = (m[2] || '').toLowerCase()
+      out.push('<pre class="doc-code"' + (lang ? ' data-lang="' + esc(lang) + '"' : '') + '><code>' + tintCode(body.join('\n'), lang) + '</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 ((m = ln.match(/^(#{1,6})\s+(.*)$/))) { flush(); const n = Math.min(6, m[1].length + 1); out.push('<h' + n + '>' + mdi(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 = []
@@ -137,7 +176,7 @@ export function renderDoc(md) {
       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>')
+      out.push('<div class="doc-table"><table><thead><tr>' + head.map((c) => '<th>' + mdi(c) + '</th>').join('') + '</tr></thead><tbody>' + rows.map((r) => '<tr>' + r.map((c) => '<td>' + mdi(c) + '</td>').join('') + '</tr>').join('') + '</tbody></table></div>')
       continue
     }
     if (/^\s*(?:[-*+]|\d{1,3}[.)])\s+/.test(ln)) {
@@ -150,7 +189,7 @@ export function renderDoc(md) {
         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>' }
+      const li = (t) => { const tm = t.match(/^\[([ xX])\]\s+(.*)$/); return tm ? '<li class="task"><span class="tbox' + (tm[1] !== ' ' ? ' on' : '') + '" aria-hidden="true"></span>' + mdi(tm[2]) + '</li>' : '<li>' + mdi(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
     }
@@ -174,6 +213,24 @@ export function docViewerBody(r) {
   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>'
 }
+// 0.8.9: what the viewer's Download menu offers for a file: Copy (the raw text),
+// the file itself, and for markdown a PDF (the browser's print dialog, "Save as
+// PDF"). Images and other binaries keep a plain Download (no menu).
+export const PDF_HINT = 'Opens the print dialog: choose “Save as PDF”'
+export function docMenuItems(r) {
+  if (!r || r.missing || r.tooBig || !docDownloadHref(r)) return []
+  const text = typeof r.text === 'string' && !r.base64 && r.type !== 'image'
+  const items = []
+  if (text) items.push({ key: 'copy', label: r.type === 'markdown' ? 'Copy' : 'Copy text', title: 'Copy the file’s text' })
+  items.push({ key: 'download', label: r.type === 'markdown' ? 'Download as Markdown' : 'Download', title: 'Save ' + docFileName(r) })
+  if (r.type === 'markdown') items.push({ key: 'pdf', label: 'Download as PDF…', title: PDF_HINT })
+  return items
+}
+// The name a download is saved as (a plan has no extension of its own).
+export function docFileName(r, fallback = 'file') {
+  const n = String((r && r.name) || fallback).split('/').pop() || fallback
+  return r && r.plan && !/\.md$/i.test(n) ? n + '.md' : n
+}
 // 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 ''

package/ui/icons.js

@@ -32,6 +32,8 @@ export const ICONS = {
   "chevron-left": "<path d=\"m15 18-6-6 6-6\"/>",
   "mail": "<rect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\"/> <path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7\"/>",
   "search": "<circle cx=\"11\" cy=\"11\" r=\"8\"/> <path d=\"m21 21-4.3-4.3\"/>",
+  "file-text": "<path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\"/> <path d=\"M14 2v4a2 2 0 0 0 2 2h4\"/> <path d=\"M10 9H8\"/> <path d=\"M16 13H8\"/> <path d=\"M16 17H8\"/>",
+  "pencil": "<path d=\"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z\"/> <path d=\"m15 5 4 4\"/>",
   "copy": "<rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"/> <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"/>",
   "ellipsis": "<circle cx=\"12\" cy=\"12\" r=\"1\"/> <circle cx=\"19\" cy=\"12\" r=\"1\"/> <circle cx=\"5\" cy=\"12\" r=\"1\"/>",
   "pin": "<path d=\"M12 17v5\"/> <path d=\"M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z\"/>",