@leftoff/cli 0.9.7 → 0.9.8-beta.2

package/docs/SECURITY.md

@@ -96,6 +96,16 @@ When your hosted board is open on a Mac that runs Leftoff, the page sends the sa
 
 Since 0.9.7 the page also tries `https://leftoff.localhost/v1/relay/direct` (Leftoff's own Caddy from `leftoff setup`, bound to loopback; it rewrites Host, drops X-Forwarded-*, and passes the page's Origin through), since Safari won't let an https page call plain `http://127.0.0.1`. A request that came in through this door came from a browser on this Mac, from your own board's origin, sealed with a paired key, so it may also do the one thing only this Mac's own browser may do: **Restore** (`POST /v1/restore`, which opens Ghostty tabs here). The daemon marks such requests with a second in-memory secret that only the door sets; a sealed request can't carry it, and every other endpoint treats a direct request exactly like the relay (a paired remote device). Through the relay, from a phone or another Mac, Restore stays off.
 
+### Live link (0.9.8 beta)
+
+Live link is opt-in, per session: only sessions started with `leftoff live` have a channel. It adds:
+
+- **The channel** is a stdio MCP server that Claude Code starts. It opens no port. It talks to the daemon on 127.0.0.1 with the board's token, and the daemon accepts its calls (hello, next message, ack, reply, permission) from loopback only. A channel is tied to the session whose process started it, so the daemon only writes into sessions on its own Mac. Other Macs go through the peer link.
+- **Prompts from the board or a phone** reach Claude exactly like typed input, so they follow the same rule as answering a permission: a phone needs *Trust my paired devices*, and they're rate-limited and written to the session's audit trail. Anyone who can send prompts can make Claude act, so treat trusting your paired devices as giving them your keyboard.
+- **Permission relay** never allows anything on its own. A prompt waits for Allow once or Deny. With no answer the terminal dialog stays and decides, and an answer in the terminal wins. Live link answers one call at a time and never adds session-wide rules. **Always allow here** (0.9.8) is a click that writes the exact rule its ⓘ tooltip and label show into that project's `.claude/settings.local.json` (the file Claude Code's own option writes), only for shapes an exact rule can pin down. A broken settings file is never overwritten.
+- **Outside events** need this Mac's event key (`~/.config/checkpoints/secrets/live-events`, mode 600, made by `leftoff live key`, replaced with `--new`). Locally that's a Bearer key. Through the relay only an HMAC signature is accepted (5-minute window, replays refused), so the relay can pass an event along but can't read the key, forge an event or change one. Both the relay and the Mac rate-limit, and bodies are capped at 16 KB. Claude's instructions call an event information, not a command, but it is still text Claude reads: anyone with the key can put words in front of your session. Keep the key in your CI's secrets.
+- **Remote Restore** opens Ghostty tabs, so a phone or another Mac can only ask. The Mac shows a notification and a card, and only that Mac's own browser can confirm. Requests expire after 5 minutes, at most 3 wait at once, and they're rate-limited.
+
 ### Logging
 
 The Worker never logs request or response bodies (it can't read them anyway) and stores only what's listed above, in your Durable Object. `wrangler.toml` turns Workers observability (request logs) off. Cloudflare's edge keeps its usual metadata for any site (IP, hostname, path such as `/_relay/api`, status), under its own policies.

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

@@ -1,6 +1,6 @@
 {
   "name": "leftoff",
-  "version": "0.9.7",
+  "version": "0.9.8-beta.2",
   "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

@@ -547,7 +547,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', 'todos', 'files', 'startRepo', 'editedRepos', 'parked', 'nonInteractive', 'transcriptCwd', 'doubtedCheckpoints']
+  'startSource', 'historyTurns', 'healedAt', 'healedVia', 'archivedReason', 'backend', 'prLinks', 'prUnlinked', 'todos', 'files', 'startRepo', 'editedRepos', 'parked', 'nonInteractive', 'transcriptCwd', 'doubtedCheckpoints', 'liveLink']
 
 export const SESSION_FIELDS = ['id', 'title', 'titleSource', 'machine', 'cwd', 'repo', 'transcriptPath', 'model', 'surface', 'capture',
   'status', 'startedAt', 'lastActivityAt', 'lastHeartbeatAt', 'endedAt', 'endReason', 'turns', 'lastCheckpointId',
@@ -876,7 +876,7 @@ export function applyEvent(s, ev) {
         s.needsInput = false
         s.question = null
         s.lastNotification = null
-        if (d.prompt && !s.firstPrompt) s.firstPrompt = clip(d.prompt, 300)
+        if (d.prompt && !s.firstPrompt) s.firstPrompt = clip(String(d.prompt).replace(/^\s*<channel\b[^>]*>([\s\S]*?)<\/channel>\s*$/, '$1').trim(), 300) // 0.9.8: a Live link message, without its wrapper
         if (d.countTurn === true) s.turns = (s.turns || 0) + 1 // 0.8.1: Codex counts a turn at its prompt when no task_started came first
         if (s.capture === 'hooks') { s.inTurn = true; s.activeSince = s.activeSince || at }
       }

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.9.7' // keep in step with .claude-plugin/plugin.json
+const MOD_VERSION = '0.9.8-beta.2' // keep in step with .claude-plugin/plugin.json
 
 const st = {
   internal: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leftoff/cli",
-  "version": "0.9.7",
+  "version": "0.9.8-beta.2",
   "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

@@ -507,6 +507,22 @@ h2 .count { color: var(--faint); font-weight: 500; }
 .btn.allow:hover { filter: brightness(1.08); }
 .btn.deny { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, var(--line)); }
 .btn.deny:hover { background: var(--tint-red); }
+/* Always allow here (0.9.8): one line like the rest, green outline, an ⓘ inside it with the rule in a tooltip */
+.always-wrap { position: relative; display: inline-flex; max-width: 100%; }
+.btn.always { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, var(--btn-line)); font-weight: 600; white-space: nowrap; padding-right: 34px; }
+.btn.always:hover { background: var(--tint-green, color-mix(in srgb, var(--green) 10%, transparent)); color: var(--green); }
+.tip-btn { position: absolute; top: 0; right: 0; bottom: 0; width: 32px; display: grid; place-items: center; padding: 0; margin: 0; border: 0; background: none; color: color-mix(in srgb, var(--green) 75%, var(--muted)); cursor: help; border-radius: 0 8px 8px 0; }
+.tip-btn .ic { width: 15px; height: 15px; }
+.tip-btn:hover, .tip-btn[aria-expanded="true"] { color: var(--green); background: var(--tint-green, color-mix(in srgb, var(--green) 10%, transparent)); }
+.tip-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.btn.always:disabled + .tip-btn { color: var(--muted); }
+@media (pointer: coarse) { .btn.always { padding-right: 46px; } .tip-btn { width: 44px; } } /* the ⓘ is its own 44px target on touch */
+.tip { position: fixed; z-index: 70; max-width: 320px; padding: 9px 11px; border-radius: 10px; background: var(--card2); border: 1px solid var(--line-strong); box-shadow: var(--toast-shadow); color: var(--text2); font-size: 12.5px; line-height: 1.45; font-weight: 400; text-align: left; white-space: normal; overflow-wrap: anywhere; }
+.tip[hidden] { display: none; }
+.tip code { font: 11.5px/1.4 var(--mono); color: var(--text); background: var(--bg2); border: 1px solid var(--line); border-radius: 5px; padding: 0 4px; }
+.tip b { color: var(--text); font-weight: 600; }
+.need-actions .btn { white-space: nowrap; }
+.need.k-permission .need-actions .btn, .need.k-permission .deny-form .btn { min-height: 44px; }
 .deny-form { display: flex; gap: 6px; flex-wrap: wrap; }
 .deny-form[hidden] { display: none; }
 .deny-form input, .need .qother, .reply-text { flex: 1 1 220px; min-width: 0; background: var(--field); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 7px 9px; font: inherit; font-size: 13px; }
@@ -541,6 +557,10 @@ h2 .count { color: var(--faint); font-weight: 500; }
 @media (max-width: 640px) {
   .needs-strip { padding: 10px; margin-left: -4px; margin-right: -4px; }
   .need-actions .btn, .deny-form .btn { flex: 1 1 auto; justify-content: center; }
+  .need.k-permission .need-actions { flex-direction: column; align-items: stretch; } /* Allow / Always / Deny stack on a phone */
+  .need.k-permission .need-actions .btn { width: 100%; }
+  .need.k-permission .need-actions .always-wrap { width: 100%; }
+  .need.k-permission .need-actions .btn.always { padding-left: 46px; padding-right: 46px; } /* the label stays centred beside the ⓘ */
   .need-wait { margin-left: 0; }
   .answered .where, .recent .where { margin-left: 0; width: 100%; }
 }
@@ -2015,3 +2035,204 @@ mark.tx, .co-snip mark, .tx-snip mark, .tx-msg-text mark { background: var(--tx-
   .wz-cmd { width: 100%; }
   .wz-nav .btn { padding: 8px 16px; }
 }
+
+/* 0.9.8 Live link: the Live badge, and the session page's message box with its delivery states */
+.pill.live-pill { color: var(--green); background: var(--tint-green); font-weight: 600; } /* not .live: that class is the open/closed dot */
+.live-box { margin: 16px 0 18px; border: 1px solid color-mix(in srgb, var(--green) 35%, var(--line)); background: linear-gradient(180deg, var(--tint-green), transparent 70%), var(--card); border-radius: var(--radius); padding: 12px 14px 14px; }
+.live-box.off { border-color: var(--line); background: var(--card); }
+.live-box.off p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; }
+.live-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
+.live-head h2 { margin: 0; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }
+.live-head .faint { font-size: 12.5px; }
+/* 0.9.8 polish: a plain block list (a flex column squeezed its bubbles and clipped long ones), scrolling inside */
+.live-thread { position: relative; }
+.live-log { list-style: none; margin: 8px 0 10px; padding: 0 2px 0 0; display: block; max-height: min(62vh, 560px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scroll-padding-bottom: 8px; }
+.live-log:empty { display: none; }
+.lv { display: block; border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; background: var(--card); margin: 0 0 8px; min-width: 0; }
+.lv:last-child { margin-bottom: 0; }
+.lv-you, .lv-event { width: fit-content; max-width: 88%; margin-left: auto; }
+.lv-you { background: var(--tint-accent); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
+.lv-event { background: var(--tint-yellow); border-color: color-mix(in srgb, var(--yellow) 35%, var(--line)); }
+.lv-claude { width: auto; max-width: 100%; }
+.lv-who { font-size: 11.5px; color: var(--muted); display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
+.lv-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.5; color: var(--text); margin-top: 2px; }
+.lv-text.lv-md { white-space: normal; }
+.lv-md > :first-child { margin-top: 0; }
+.lv-md > :last-child { margin-bottom: 0; }
+.lv-md p { margin: 0 0 8px; }
+.lv-md ul, .lv-md ol { margin: 4px 0 8px; padding-left: 22px; }
+.lv-md li { margin: 2px 0; }
+.lv-md h2, .lv-md h3, .lv-md h4, .lv-md h5, .lv-md h6 { font-size: 14px; font-weight: 700; margin: 10px 0 4px; color: var(--text); text-transform: none; letter-spacing: normal; border: 0; padding: 0; }
+.lv-md b, .lv-md strong { font-weight: 650; color: var(--text); }
+.lv-md code { font-family: var(--mono); font-size: .88em; background: var(--card2); border: 1px solid var(--line); border-radius: 5px; padding: 0 4px; }
+.lv-md pre { background: var(--card2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 6px 0 8px; overflow-x: auto; white-space: pre; font-size: 12.5px; }
+.lv-md pre code { background: none; border: 0; padding: 0; }
+.lv-md a { color: var(--accent); text-decoration: underline; }
+.lv-md blockquote { margin: 6px 0; padding-left: 10px; border-left: 3px solid var(--line); color: var(--muted); }
+.lv-note { margin-top: 6px; font-size: 12px; color: var(--muted); }
+/* the status line under a message: Sent → Received → Working → Replied, with a spinner and the time */
+.lv-status { margin-top: 6px; font-size: 12px; color: var(--muted); }
+.lvs-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
+.lvs-step { color: var(--faint); }
+.lvs-step.done { color: var(--green); }
+.lvs-step.now { color: var(--text); font-weight: 650; }
+.lvs-step.bad { color: var(--red); font-weight: 650; }
+.lvs-arrow { color: var(--faint); }
+.lvs-line { display: flex; align-items: center; gap: 6px; margin-top: 2px; color: var(--text2); }
+.lv-status.warn .lvs-line { color: var(--yellow); }
+.lv-status.bad .lvs-line { color: var(--red); }
+.lv-status.good .lvs-line { color: var(--green); }
+.lvs-steps .lvs-time { padding-left: 8px; }
+.lvs-time { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); }
+.lv-spin { width: 12px; height: 12px; flex: none; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); animation: spin .8s linear infinite; }
+@media (prefers-reduced-motion: reduce) { .lv-spin { animation: none; border-top-color: color-mix(in srgb, var(--accent) 25%, transparent); background: var(--accent); transform: scale(.6); } }
+.live-jump { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid var(--btn-line); background: var(--card); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; box-shadow: 0 4px 14px rgba(0,0,0,.18); cursor: pointer; z-index: 2; }
+.live-jump:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.live-jump-n { font-weight: 500; color: var(--muted); }
+.live-empty { margin: 6px 0 10px; font-size: 13px; }
+.live-err { color: var(--red); font-size: 13px; }
+.live-row .live-text { min-height: 44px; }
+/* Chat on a live card: straight to the Live box */
+.btn.chat-btn { position: relative; color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, var(--btn-line)); font-weight: 600; }
+.chat-btn .unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); position: absolute; top: -3px; right: -3px; box-shadow: 0 0 0 2px var(--card); }
+.restore-ask .rs-m { color: var(--muted); font-size: 12.5px; }
+.rs-note.rs-ask.ok { color: var(--green); }
+.rs-note.rs-ask.warn { color: var(--red); }
+@media (pointer: coarse), (max-width: 600px) {
+  .live-row .btn, .restore-ask .btn, .btn.chat-btn { min-height: 44px; min-width: 44px; }
+  .need-actions .btn, .deny-form .btn { min-height: 44px; } /* Allow / Deny from the phone */
+  .live-box { padding: 10px; margin-left: -4px; margin-right: -4px; }
+  .lv-you, .lv-event { max-width: 92%; }
+  .live-log { max-height: 60vh; max-height: 60dvh; }
+}
+
+/* ------------------------------------------------------------ the sidebar rail (0.9.8)
+   From 820px up: a narrow rail on the left. The Leftoff mark at the top, then
+   the sections as an icon over a small label, the current one in a soft pill,
+   a red count on Needs you; search, What's new, Settings and this Mac's status
+   (the Mac switcher) at the bottom. Under 820px: the mark, search and status in
+   a slim top row, and a bottom tab bar (Board, Needs you, Lists, PRs, More). */
+:root { --rail-w: 84px; --rail-on: color-mix(in srgb, var(--accent) 13%, transparent); --bar-h: 58px; }
+.tab-more { display: none; }
+.moredot { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--header-bg); }
+.moredot.warn { background: var(--yellow); }
+.moredot[hidden] { display: none; }
+.iconbtn .lbl { display: none; }
+.tabs a, .tab-more { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
+@media (min-width: 820px) {
+  body { padding-left: calc(var(--rail-w) + env(safe-area-inset-left)); }
+  .top { position: fixed !important; top: 0; bottom: 0; left: 0; width: calc(var(--rail-w) + env(safe-area-inset-left)); z-index: 20; /* !important: the rail never joins the page flow */
+    flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 6px; min-height: 0;
+    padding: max(14px, env(safe-area-inset-top)) 8px max(12px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
+    border-bottom: 0; border-right: 1px solid var(--line); overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
+  .brand { order: 0; justify-content: center; padding: 2px 0 10px; border-radius: 12px; }
+  .brand .logo { width: 30px; height: 30px; }
+  .brand span { display: none; }
+  .tabs { order: 0; flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin: 0; }
+  .tabs a, .topright .searchbtn, .topright .iconbtn, .topright .health {
+    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
+    width: auto; min-width: 0; height: auto; min-height: 54px; margin: 0; padding: 7px 2px 6px; border: 0; border-radius: 12px; background: none;
+    color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.15; text-align: center; white-space: nowrap; box-shadow: none; }
+  .tabs a .ic, .topright .ic { width: 20px; height: 20px; opacity: 1; }
+  .tabs a .lbl, .topright .lbl, .topright .sb-lbl, .topright .health .label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; flex: none; text-align: center; }
+  .tabs .lbl-short, .topright .sb-kbd { display: none; }
+  .tabs a:hover, .topright .searchbtn:hover, .topright .iconbtn:hover, .topright .health:hover, .topright .health[aria-expanded="true"] { color: var(--text); background: var(--bg2); }
+  .tabs a.on, .topright .iconbtn.on { color: var(--text); background: var(--rail-on); box-shadow: none; }
+  .tabs a.on .ic, .topright .iconbtn.on .ic { color: var(--accent); }
+  .tabs a#needsTab.has-needs .ic { color: var(--red); }
+  .navcount { position: absolute; top: 3px; left: calc(50% + 3px); min-width: 18px; height: 18px; line-height: 18px; font-size: 10.5px; padding: 0 5px; box-shadow: 0 0 0 2px var(--bg); }
+  .topright { order: 0; margin: auto 0 0; padding-top: 8px; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
+  .topright .health { order: 9; max-width: none; gap: 6px; }
+  .topright .health .dot { width: 9px; height: 9px; margin: 5px 0 1px; }
+  .newdot, .topdot { top: 8px; right: calc(50% - 15px); box-shadow: 0 0 0 2px var(--bg); }
+  .set-nav { top: 24px; }
+}
+@media (min-width: 820px) and (max-height: 640px) {
+  .tabs a, .topright .searchbtn, .topright .iconbtn, .topright .health { min-height: 46px; padding: 4px 2px; gap: 2px; }
+  .brand { padding-bottom: 4px; }
+}
+@media (max-width: 819.98px) {
+  .top { flex-wrap: nowrap; gap: 8px; min-height: 52px; padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 6px; background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
+  .brand { order: 1; }
+  .topright { order: 2; margin-left: auto; gap: 2px; }
+  .topright #wnTab, .topright #setTab { display: none; }
+  .searchbtn { width: 44px; height: 44px; }
+  .health { height: 44px; }
+  .tabs { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; order: 3; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px;
+    padding: 4px max(6px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
+    background: var(--header-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
+  .tabs .tab-extra { display: none; }
+  .tabs a, .tab-more { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: auto; min-height: 50px; padding: 5px 2px 4px;
+    border: 0; border-radius: 12px; background: none; color: var(--muted); font: inherit; font-size: 11px; font-weight: 500; line-height: 1.1; text-align: center; white-space: nowrap; box-shadow: none; cursor: pointer; }
+  .tabs a .ic, .tab-more .ic { width: 22px; height: 22px; opacity: 1; }
+  .tabs #needsTab .lbl { display: block; }
+  .tabs #needsTab .lbl-short { display: none; }
+  .tabs a.on, .tab-more.on { color: var(--text); background: none; box-shadow: none; }
+  .tabs a:hover, .tab-more:hover { background: none; color: var(--text); }
+  .tabs a.on .ic, .tab-more.on .ic { color: var(--accent); }
+  .tabs a.on::before, .tab-more.on::before { content: ''; position: absolute; top: 4px; left: 50%; width: 46px; height: 28px; transform: translateX(-50%); border-radius: 14px; background: var(--rail-on); z-index: -1; }
+  .tabs a, .tab-more { isolation: isolate; }
+  .tab-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+  .navcount { position: absolute; top: 2px; left: calc(50% + 4px); right: auto; min-width: 17px; height: 17px; line-height: 17px; font-size: 10.5px; padding: 0 4px; box-shadow: 0 0 0 2px var(--bg); }
+  .moredot { top: 6px; left: calc(50% + 8px); }
+  main { padding-bottom: calc(var(--bar-h) + 40px + env(safe-area-inset-bottom)); }
+  .toast { bottom: calc(var(--bar-h) + 14px + env(safe-area-inset-bottom)); }
+}
+/* More (phones): the rest of the sections, above the bar */
+.moremenu { position: fixed; z-index: 45; right: max(8px, env(safe-area-inset-right)); bottom: calc(var(--bar-h) + 8px + env(safe-area-inset-bottom)); width: 230px; max-width: calc(100vw - 16px);
+  display: flex; flex-direction: column; padding: 6px; background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px rgba(15, 20, 35, .18), 0 2px 6px rgba(15, 20, 35, .08); animation: lo-in .12s ease-out; }
+[data-theme="dark"] .moremenu { background: var(--card2); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
+.moremenu[hidden] { display: none; }
+.moremenu a { position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: 15px; }
+.moremenu a .ic { width: 20px; height: 20px; color: var(--muted); flex: none; }
+.moremenu a:hover, .moremenu a:focus-visible { background: var(--bg2); outline: none; }
+.moremenu a:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
+.moremenu a.on { background: var(--rail-on); }
+.moremenu a.on .ic { color: var(--accent); }
+.moremenu .newdot, .moremenu .topdot { position: static; margin-left: auto; box-shadow: none; }
+@media (min-width: 820px) { .moremenu { display: none !important; } }
+/* Quick look on Needs you (0.9.8) */
+.quicklook { position: fixed; z-index: 45; width: 360px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow-y: auto; overscroll-behavior: contain;
+  background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px rgba(15, 20, 35, .18), 0 2px 6px rgba(15, 20, 35, .08); padding: 12px 12px 8px; font-size: 13.5px; animation: lo-in .12s ease-out; }
+[data-theme="dark"] .quicklook { background: var(--card2); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
+.quicklook[hidden] { display: none; }
+.ql-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 10px; border-bottom: 1px solid var(--line); }
+.ql-head h2 { margin: 0; font-size: 15px; font-weight: 650; text-transform: none; letter-spacing: 0; color: var(--text); }
+.ql-list { list-style: none; margin: 0; padding: 0; }
+.ql-item { display: flex; align-items: center; gap: 8px; padding: 9px 4px; border-bottom: 1px solid var(--line); min-width: 0; }
+.ql-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--text); text-decoration: none; border-radius: 8px; }
+.ql-main:hover .ql-t { color: var(--accent); }
+.ql-main:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.ql-t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ql-what { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ql-meta { color: var(--faint); font: 11.5px/1.3 var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ql-item.blocking .ql-t::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin: 0 6px 1px 0; vertical-align: middle; }
+.ql-actions { display: flex; gap: 6px; flex: none; }
+.ql-actions .btn { min-height: 44px; padding: 0 11px; font-size: 13px; justify-content: center; }
+.ql-item.has-always { flex-wrap: wrap; } /* three buttons: their own row under the item */
+.ql-item.has-always .ql-main { flex: 1 1 100%; }
+.ql-item.has-always .ql-actions { flex: 1 1 100%; }
+.ql-item.has-always .ql-actions .btn, .ql-item.has-always .ql-actions .always-wrap { flex: 1 1 0; min-width: 0; }
+.ql-actions .always-wrap .btn.always { width: 100%; padding-right: 34px; }
+@media (pointer: coarse) { .ql-actions .always-wrap .btn.always { padding-right: 46px; } }
+.ql-empty, .ql-more { color: var(--muted); margin: 0; padding: 12px 4px; font-size: 13px; }
+.ql-more { padding: 8px 4px 0; }
+.ql-foot { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: 44px; padding: 0 6px; margin-top: 2px; color: var(--accent); font-weight: 600; text-decoration: none; border-radius: 8px; }
+.ql-foot:hover { text-decoration: underline; }
+.ql-foot:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+@media (pointer: coarse), (max-width: 819.98px) { .ql-actions .btn { min-height: 44px; min-width: 64px; } .ql-main { min-height: 44px; justify-content: center; } }
+@media (max-width: 819.98px) { .quicklook { left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); width: auto; max-width: none; bottom: calc(var(--bar-h) + 8px + env(safe-area-inset-bottom)); max-height: calc(100vh - var(--bar-h) - 80px); } }
+@media (prefers-reduced-motion: reduce) { .quicklook, .moremenu { animation: none; } }
+
+/* Pull to refresh (phones, 0.9.8): the spinner comes down from under the top row */
+.ptr { position: fixed; z-index: 19; left: 50%; top: calc(env(safe-area-inset-top) + 8px); width: 38px; height: 38px; margin-top: -8px; transform: translate(-50%, 0); display: grid; place-items: center;
+  border-radius: 50%; background: var(--card); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(15, 20, 35, .16); color: var(--muted); pointer-events: none; }
+[data-theme="dark"] .ptr { background: var(--card2); box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
+.ptr[hidden] { display: none; }
+.ptr-ring { display: grid; place-items: center; transform: rotate(var(--ptr-turn, 0deg)); }
+.ptr-ring svg { width: 19px; height: 19px; }
+.ptr.armed { color: var(--accent); }
+.ptr.busy .ptr-ring { animation: spin .8s linear infinite; }
+@media (pointer: coarse) and (max-width: 819.98px) { html, body { overscroll-behavior-y: contain; } }
+@media (prefers-reduced-motion: reduce) { .ptr-ring { transform: none; } .ptr.busy .ptr-ring { animation: lo-pulse 1.2s ease-in-out infinite; } }
+@keyframes lo-pulse { 50% { opacity: .35; } }