@leftoff/cli 0.9.18-beta.9 → 0.9.18

package/ui/app.css

@@ -435,6 +435,29 @@ h2 .count { color: var(--faint); font-weight: 500; }
   .pagehead .actions { flex-wrap: wrap; }
 }
 .digest-meta { color: var(--faint); font-size: 12.5px; margin: -2px 0 12px; }
+/* 2026-11-06: the digest's versions (ui/digest-versions.js): quiet, one line, a list on tap */
+.dv-line { margin: -10px 0 8px; }
+.dv { position: relative; display: inline-block; }
+.dv-btn { min-height: 44px; padding: 0 10px; margin: 0 0 0 -10px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; border-radius: 8px; -webkit-tap-highlight-color: transparent; }
+.dv-btn:hover, .dv-btn[aria-expanded="true"] { color: var(--text2); background: var(--bg2); }
+.dv-btn:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: 1px; }
+.dv-list { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 190px; margin: 0; padding: 4px; list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--card-shadow); }
+.dv-list[hidden] { display: none; }
+.dv-list a { display: flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 7px; color: var(--text2); text-decoration: none; font-size: 13px; white-space: nowrap; }
+.dv-list a:hover { background: var(--bg2); }
+.dv-list a[aria-current="page"] { color: var(--text); font-weight: 600; }
+.dv-old .btn { min-height: 44px; }
+/* Settings → Digest → Let Claude search your notes (ui/mcp-setup.js) */
+.form .full.mcp-box { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; justify-content: stretch; min-width: 0; }
+.mcp-row { position: relative; display: flex; align-items: center; gap: 6px; padding: 6px 4px 6px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); }
+.mcp-row code { flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; font-size: 12.5px; border: 0; background: transparent; padding: 0; }
+.mcp-row .copy-float { flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
+.mcp-row .copy-float:hover, .mcp-row .copy-float.copied { color: var(--text); background: var(--card); }
+.mcp-row .copy-float svg { width: 16px; height: 16px; }
+.mcp-codex summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--text2); font-size: 13px; }
+.mcp-codex pre { margin: 6px 0 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); font-size: 12px; overflow-x: auto; }
+.mcp-states { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--text2); }
+.mcp-state.ok { color: var(--text); }
 @media (max-width: 640px) {
   /* the five status counts as one compact row that scrolls, not a 3-row grid */
   .stats { display: flex; overflow-x: auto; scrollbar-width: none; gap: 8px; margin: 14px -14px 0; padding: 2px 14px; }
@@ -1578,6 +1601,7 @@ a.cpr:hover { border-color: var(--line-strong); }
 .pr-ic[data-tip]::after { content: attr(data-tip); display: none; position: absolute; top: calc(100% - 4px); right: 0; width: max-content; max-width: min(260px, 70vw); padding: 4px 8px; border-radius: 7px; background: var(--card2); border: 1px solid var(--line-strong); box-shadow: var(--toast-shadow); color: var(--text2); font-size: 12px; line-height: 1.3; font-weight: 500; text-align: left; white-space: nowrap; letter-spacing: normal; pointer-events: none; z-index: 30; }
 @media (hover: hover) and (pointer: fine) { .pr-ic[data-tip]:hover::after { display: block; animation: tip-in .12s ease-out .35s both; } }
 .pr-ic[data-tip]:focus-visible::after, .pr-ic.copied[data-tip]::after { display: block; }
+.pr-ic[aria-expanded="true"][data-tip]::after { display: none !important; } /* 2026-11-06 Open's menu is up: its tip would cover the title */
 @media (hover: hover) and (pointer: fine) { .pr-ic.copied[data-tip]:hover::after { animation: none; } }
 @media (prefers-reduced-motion: reduce) { .pr-ic[data-tip]::after { animation: none !important; } }
 .prlist { margin-bottom: 8px; }
@@ -1641,6 +1665,9 @@ a.cpr:hover { border-color: var(--line-strong); }
   .prrow .pr-line1 { padding-right: 124px; min-height: 24px; }
   .prrow:not(:has(.pr-unlink)) .pr-line1 { padding-right: 80px; }
   .prrow:not(:has(.pr-ic)) .pr-line1 { padding-right: 0; }
+  /* a closed compact row (the session panel) keeps its glyphs in the row, after the one-line title */
+  .pr-compact .prrow:not(.open) .pr-actions { position: static; margin: 0 -2px 0 0; }
+  .pr-compact .prrow:not(.open) { align-items: center; }
   .pr-actions, .prrow.open .pr-actions { position: absolute; top: 0; right: 2px; margin: 0; }
 }
 
@@ -1751,6 +1778,34 @@ html.dv-open, html.dv-open body { overflow: hidden; }
   .dv-sub { padding: 6px 14px 0; }
   .dv-dl .dl-word { display: none; }
 }
+/* 2026-11-06 An HTML file: Preview · Code (ui/html-preview.js). Preview fills the sheet with the
+   sandboxed page on white (a page with no background of its own is drawn on white, as in a browser);
+   a line under the switch says what remote resources were blocked, with Show and Allow. */
+.hp-bar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding-bottom: 10px; }
+.hp-remote { display: flex; align-items: center; gap: 8px; flex: 1 1 320px; min-width: 0; font-size: 12.5px; color: var(--text2); }
+.hp-ric { flex: none; width: 15px; height: 15px; color: var(--muted); }
+.hp-remote.on .hp-ric { color: var(--accent); }
+.hp-rw { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.hp-rw b { font-weight: 600; color: var(--text); }
+.hp-remote .btn { flex: none; }
+.hp-remote.hp-words { margin-top: -4px; }
+.hp-list { flex-basis: 100%; margin: 0; padding: 8px 10px; list-style: none; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); max-height: 160px; overflow: auto; display: grid; gap: 4px; }
+.hp-list li { display: flex; gap: 8px; align-items: baseline; min-width: 0; font-size: 12px; }
+.hp-list code { font: 12px/1.4 var(--mono); color: var(--text); overflow-wrap: anywhere; }
+.hp-kind { flex: none; min-width: 42px; font-size: 11px; color: var(--muted); }
+.hp-note { flex-basis: 100%; margin: 0; font-size: 12px; }
+.dv-body.dv-hpv { display: flex; flex-direction: column; overflow: hidden; }
+.dv-hpv .hp-main { flex: 1; min-height: 0; display: flex; }
+.dv-hpv .hp-stopped { flex: 1; justify-content: center; }
+.hp-stopped .btn { margin-top: 10px; }
+.hp-frame { flex: 1; width: 100%; min-height: 0; border: 1px solid var(--line); border-radius: 10px; background: #fff; color-scheme: light; }
+@media (max-width: 599.98px) {
+  .hp-seg { flex: 1 1 100%; display: flex; }
+  .hp-seg button { flex: 1 1 0; height: 44px; }
+  .hp-remote { flex-basis: 100%; }
+  .hp-remote .btn { min-height: 44px; }
+  .hp-hosts { display: none; }
+}
 html.dv-open .lo-backdrop { z-index: 61; }
 html.dv-open .lo-menu { z-index: 62; }
 
@@ -2491,6 +2546,20 @@ mark.tx, .co-snip mark, .tx-snip mark, .tx-msg-text mark { background: var(--tx-
 
 /* 0.9.8 attachments: a paperclip beside ↑, chips above the words inside the box, thumbnails in your bubble */
 .composer { flex-wrap: wrap; }
+/* "/" commands (ui/slash.js): a list above the composer; options 44px tall */
+.composer .slash-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 30; max-height: min(320px, 50vh); overflow-y: auto; overscroll-behavior: contain; padding: 4px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--card); box-shadow: 0 8px 24px rgba(0,0,0,.22); cursor: default; }
+.slash-h { padding: 6px 10px 2px; font: 600 11.5px/1.4 var(--mono); color: var(--muted); }
+.slash-opt { display: flex; align-items: baseline; gap: 10px; min-height: 44px; box-sizing: border-box; padding: 11px 10px; border-radius: 10px; cursor: pointer; }
+.slash-opt[aria-selected="true"] { background: var(--bg2); }
+@media (hover: hover) { .slash-opt:hover { background: var(--bg2); } }
+.slash-opt.off { cursor: not-allowed; opacity: .6; }
+.slash-l { flex: none; font: 500 13.5px/1.5 var(--mono); color: var(--text); }
+.slash-hint { color: var(--muted); font-weight: 400; }
+.slash-w { min-width: 0; font-size: 13px; line-height: 1.5; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* a slash command's bubble: the command in mono, then what Claude Code printed */
+.lv-cmd code { font-size: 13.5px; background: none; border: 0; padding: 0; }
+.lv-cmd-out { margin: 6px 0 0; padding: 0; font: 12.5px/1.5 var(--mono); color: var(--text2); white-space: pre-wrap; overflow-wrap: anywhere; background: none; border: 0; max-height: 240px; overflow-y: auto; }
+.lv-cmd-done { font-family: inherit; color: var(--muted); }
 .composer .att-chips { flex: 0 0 100%; order: -1; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 8px 2px 0; margin-left: -6px; }
 .composer .att-chips[hidden] { display: none; }
 .composer.att-drop { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); background: color-mix(in srgb, var(--accent) 7%, var(--card2)); }
@@ -2842,7 +2911,18 @@ mark.tx, .co-snip mark, .tx-snip mark, .tx-msg-text mark { background: var(--tx-
   .tab:hover { color: var(--text); }
   .tab:focus-visible, .tab-x:focus-visible, .tab-all:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
   .tab-board { flex: none; border-right: 1px solid var(--line); }
-  .tab-cell { position: relative; flex: 0 1 200px; min-width: 120px; display: flex; align-items: stretch; border-right: 1px solid var(--line); }
+  .tab-cell { position: relative; flex: 0 1 200px; min-width: 140px; display: flex; align-items: stretch; border-right: 1px solid var(--line); }
+  /* 0.9.18 a busy strip: the tab you're on keeps its full width (only the others shrink), the rest
+     keep 140px and the strip scrolls with a fade at the edge that has more (ui/chip-fade.js);
+     a pinned tab is its pin and its status shape, the name in its tip and label. */
+  .tab-cell.on { flex-shrink: 0; }
+  .tab-cell.pinned { flex: none; min-width: 0; }
+  .tab-cell.pinned .tab-s { padding-right: 12px; }
+  .tab-cell.pinned .tab-t { display: none; }
+  .tab-cell.pinned .tab-pin { margin-right: 0; }
+  #tabStrip .tab-scroll.fade-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
+  #tabStrip .tab-scroll.fade-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent); }
+  #tabStrip .tab-scroll.fade-l.fade-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
   .tab-s { flex: 1; min-width: 0; padding-right: 0; }
   .tab.on, .tab-cell.on { color: var(--text); background: var(--card); }
   .tab-board.on, .tab-cell.on { box-shadow: inset 0 -2px 0 var(--accent); }
@@ -3075,6 +3155,26 @@ html.pv-open, html.pv-open body { overflow: hidden; }
 .md .bi-title:hover { text-decoration: underline; text-underline-offset: 2px; }
 .md .bi-tag { color: var(--faint); font-size: 12px; }
 .md section.start-sec + .digest-hint, .md p.lede + .digest-hint { margin-top: 14px; }
+/* 2026-11-06: What you got done: per project, one fact a line, each led by a shape and its word (never colour alone) */
+.md section.done-sec { margin: 16px 0 4px; padding: 10px 14px 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg2); }
+.md section.done-sec h2 { margin: 2px 0 2px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
+.md section.done-sec h3 { margin: 12px 0 4px; font-size: 14px; color: var(--text); }
+.md ul.done, .cp ul:has(> li.dn) { list-style: none; margin: 0; padding: 0; }
+.md li.dn, .cp li.dn { position: relative; padding: 3px 0 3px 22px; line-height: 1.45; color: var(--text2); overflow-wrap: anywhere; }
+.md li.dn b { color: var(--text); font-weight: 600; }
+.md li.dn a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
+.md li.dn::before, .cp li.dn::before { position: absolute; left: 2px; top: 3px; width: 16px; text-align: center; font-weight: 700; color: var(--muted); }
+li.dn-merged::before { content: '✓'; }
+li.dn-opened::before { content: '○'; }
+li.dn-commit::before, li.dn-push::before { content: '•'; }
+li.dn-pass::before { content: '✓'; }
+li.dn-fail::before { content: '✗'; }
+li.dn-decided::before { content: '◆'; font-size: 11px; }
+li.dn-you::before { content: '!'; }
+li.dn-open::before { content: '→'; }
+li.dn-more::before { content: '+'; }
+.cp dd.cp-done { margin-bottom: 6px; }
+@media (max-width: 600px) { .md section.done-sec { padding: 8px 12px 4px; margin-left: -4px; margin-right: -4px; } }
 .md section.start-sec ~ #digestSpaces { margin-top: 16px; }
 .md .bi-say { display: block; color: var(--text2); line-height: 1.45; margin-top: 1px; }
 .md details.fin { margin: 10px 0 4px; }
@@ -3573,11 +3673,16 @@ del.gd-x { background: var(--gd-del-word); }
 
 html.live-full, html.live-full body { overflow: hidden; overscroll-behavior: none; }
 .live-box.full { --lf-pl: max(12px, env(safe-area-inset-left)); --lf-pr: max(12px, env(safe-area-inset-right)); position: fixed; z-index: 32; left: 0; right: 0; top: var(--lf-top, 0); height: var(--lf-h, 100vh); height: var(--lf-h, 100dvh); margin: 0; border: 0; border-radius: 0; padding: 0 var(--lf-pr) max(10px, env(safe-area-inset-bottom)) var(--lf-pl); display: flex; flex-direction: column; background: var(--bg); box-sizing: border-box; }
-html.lf-kb .live-box.full { padding-bottom: 8px; }
+html.lf-kb .live-box.full { padding-bottom: 8px; } /* 2026-11-07: nothing kept for the keyboard's ^ v ✓ bar, it sits below the visual viewport (ui/viewport-fit.js) */
 .live-box.full > * { flex: none; width: 100%; max-width: 860px; margin-left: auto; margin-right: auto; box-sizing: border-box; }
 .live-fbar { display: flex; align-items: center; gap: 6px; min-height: 52px; padding-top: env(safe-area-inset-top); border-bottom: 1px solid var(--line); }
 .live-box.full > .live-fbar { max-width: none; margin: 0 calc(-1 * var(--lf-pr)) 0 calc(-1 * var(--lf-pl)); width: auto; padding-left: max(4px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); background: var(--bg); }
 .live-fs-x { margin-left: 0; }
+/* 2026-11-05 session titles: the name on line one, folder@branch muted under it */
+.live-fbar .lf-tt { display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; min-width: 0; gap: 1px; }
+.live-fbar .lf-where { display: block; min-width: 0; font-size: 12px; line-height: 1.25; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.live-fbar .lf-where:empty { display: none; }
+.s-where { margin-top: 2px; font-size: 12px; line-height: 1.3; color: var(--muted); overflow-wrap: anywhere; }
 .live-fbar .lf-title { display: block; flex: 1 1 auto; min-width: 0; margin: 0; font-size: 15px; font-weight: 650; line-height: 1.3; color: var(--text); text-transform: none; letter-spacing: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .lf-pills { flex: none; display: inline-flex; align-items: center; gap: 6px; }
 .lf-stop { flex: none; min-height: 36px; }
@@ -4513,15 +4618,32 @@ html:not(.live-full) .fs-side { display: none; }
   html.live-full.fs-on .live-box.full { height: calc(var(--lf-h, 100vh) - var(--fs-peek, 56px)); height: calc(var(--lf-h, 100dvh) - 56px - env(safe-area-inset-bottom)); padding-bottom: 6px; }
   html.live-full.lf-kb .fs-side { display: none; }
   html.live-full.lf-kb.fs-on .live-box.full { height: var(--lf-h, 100dvh); }
+  /* 2026-11-06 typing outside the sheet: it steps aside whether or not a keyboard's height was measured (app.js fitSheetAside) */
+  html.live-full.lf-typing .fs-side { display: none; }
+  html.live-full.lf-typing.fs-on .live-box.full { height: var(--lf-h, 100dvh); }
+  /* the sheet follows a finger (app.js); its peek is the handle, its content scrolls natively */
+  .fs-side.dragging { transition: none; }
+  .fs-peek { touch-action: none; }
 }
 @media (prefers-reduced-motion: reduce) { .fs-side { transition: none; } }
 /* the tab strip: pinned tabs at the left (a pin), each tab's status as a shape AND a word, + New session */
-.tab-cell.pinned .tab-t { max-width: 10em; }
 .tab-pin { display: inline-flex; flex: none; margin-right: 5px; color: var(--text2); }
 .tab-pin .ic { width: 12px; height: 12px; }
 .lf-tab .tab-pin { margin-right: 2px; }
 .tab-st { display: inline-flex; align-items: center; gap: 3px; flex: none; margin-left: 6px; }
 .tab-w { font-size: 11.5px; font-weight: 550; color: var(--text2); white-space: nowrap; }
+/* 0.9.18 the strip: a closable tab's shape sits in the ×'s place; the × on hover or keyboard focus.
+   A pinned tab and a touch screen (no hover) keep the shape beside the title. */
+.tab-st:empty, .tab-st-touch { display: none; }
+.tab-x .tab-xsg { position: absolute; left: 50%; top: 50%; margin: -7px 0 0 -7px; }
+.tab-x.has-st .ic { opacity: 0; }
+.tab-cell:hover .tab-x.has-st .ic, .tab-x.has-st:focus-visible .ic { opacity: 1; }
+.tab-cell:hover .tab-x .tab-xsg, .tab-x:focus-visible .tab-xsg { visibility: hidden; }
+@media (hover: none), (pointer: coarse) {
+  .tab-st-touch:not(:empty) { display: inline-flex; }
+  .tab-x .tab-xsg { display: none; }
+  .tab-x.has-st .ic { opacity: 1; }
+}
 .tab-new { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; color: var(--text2); border-radius: 8px; }
 .tab-new .ic { width: 16px; height: 16px; }
 @media (hover: hover) { .tab-new:hover { color: var(--text); background: var(--card2); } }
@@ -4589,6 +4711,7 @@ html:not(.live-full) .fs-side { display: none; }
 .wt-seg::-webkit-scrollbar { display: none; }
 .wt-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 1px 14px 0; box-sizing: border-box; border: 0; border-radius: 8px; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 550; line-height: 1; white-space: nowrap; cursor: pointer; }
 .wt-seg button .ic { width: 14px; height: 14px; margin-top: -1px; }
+.wt-seg button .wt-seg-chev { width: 12px; height: 12px; margin: -1px -4px 0 -2px; opacity: .7; }
 .wt-seg button[aria-pressed="true"] { background: var(--card2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
 .wt-seg button:disabled { opacity: .45; cursor: default; }
 .wt-seg-sm button { height: 34px; padding: 1px 12px 0; }
@@ -4757,6 +4880,13 @@ details[open] > summary .wt-g-chev { transform: rotate(90deg); }
 .wt-ask:has(.wt-ask-in:focus-visible) { border-color: var(--text2); }
 .wt-ask-b { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 10px; background: var(--card2); color: var(--text2); cursor: pointer; }
 .wt-pnav { display: none; }
+/* 2026-11-06 the long page has a bar too when there's a spot to jump to (Next spot stays on screen) */
+.wt-pnav:has(.wt-spot) { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 14px; border-top: 1px solid var(--line); background: var(--bg); }
+.wt-pnav:has(.wt-spot) .btn { min-height: 32px; padding: 0 12px; display: inline-flex; align-items: center; gap: 4px; }
+/* the finish: every step reviewed, said on the overview */
+.wt-alldone { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text); font-size: 13.5px; font-weight: 600; }
+.wt-alldone[hidden] { display: none; }
+.wt-alldone .ic { width: 16px; height: 16px; color: var(--green); }
 .wt :is(button, a, summary):focus-visible, .fs-wt:focus-visible, .wt-since:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 @media (prefers-reduced-motion: no-preference) { .wt-st { transition: border-color .15s, box-shadow .15s; } details[open] > summary .wt-g-chev { transition: transform .12s; } }
 @media (max-width: 1100px) { .wt.wt-big .wt-hw { grid-template-columns: minmax(0, 1fr); } .wt.wt-big .wt-fm { display: none; } .wt-big .wt-in { padding-left: 28px; } }
@@ -5199,6 +5329,14 @@ html.nav-drawer-open, html.nav-drawer-open body { overflow: hidden; }
 .pr-compact .pr-title-btn { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; font-weight: 500; color: var(--text); }
 .pr-compact .pr-meta { margin-top: 2px; font-size: 12px; }
 .pr-compact .pr-actions { margin: 0 -2px 0 0; }
+/* open: the actions sit at the top right beside the title line, so the details below take the panel's full width */
+.pr-compact .prrow.open { position: relative; }
+.pr-compact .prrow.open.pr-acts-1 .pr-c1 { padding-right: 48px; }
+.pr-compact .prrow.open.pr-acts-2 .pr-c1 { padding-right: 92px; }
+.pr-compact .prrow.open.pr-acts-3 .pr-c1 { padding-right: 136px; }
+.pr-compact .prrow.open.pr-acts-4 .pr-c1 { padding-right: 180px; }
+.pr-compact .prrow.open .pr-actions { position: absolute; top: 8px; right: 4px; margin: 0; }
+@media (pointer: fine) { .pr-compact .prrow.open.pr-acts-1 .pr-c1 { padding-right: 40px; } .pr-compact .prrow.open.pr-acts-2 .pr-c1 { padding-right: 72px; } .pr-compact .prrow.open.pr-acts-3 .pr-c1 { padding-right: 104px; } .pr-compact .prrow.open.pr-acts-4 .pr-c1 { padding-right: 136px; } }
 @media (pointer: fine) { .pr-compact .pr-actions .pr-ic { width: 32px; height: 32px; } }
 .sprs .pr-unfold { margin: 0 0 8px; }
 .sprs .pr-unfold > .pr-unsum { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; line-height: 1; padding: 0 10px; border: 1px dashed var(--line-strong); border-radius: 999px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
@@ -5345,8 +5483,23 @@ code .file-ref-off { font-size: inherit; }
 .wt-spot .ic { width: 15px; height: 15px; }
 .wt-spot-n { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
 .wt-gd .wt-spot-on { position: relative; box-shadow: inset 4px 0 0 var(--text), inset 0 0 0 1px var(--line-strong); }
-.wt-spot-tag { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); z-index: 1; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 1px 7px 0; box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--card); color: var(--text); font-family: var(--sans, inherit); font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap; pointer-events: none; }
-.wt-spot-tag .ic { width: 11px; height: 11px; }
+/* 2026-11-06 every spot's chip at its line, all the time; the one Next spot is on is solid. The chip
+   is a .tip-btn (ui/tips.js): hover, focus or a tap explains why it's a spot. A 20px pill in a hit
+   area as tall as the row (44px on touch, by its padding) */
+.wt-spot-tag { position: absolute; right: 6px; top: 0; bottom: 0; z-index: 1; display: flex; align-items: center; pointer-events: none; }
+.wt-gd [data-ri]:has(> .wt-spot-tag) { position: relative; }
+.wt-spot-tag .tip-btn.wt-spot-chip { position: static; width: auto; height: 20px; display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px 0; box-sizing: border-box; border: 1px dashed var(--line-strong); border-radius: 10px; background: var(--card); color: var(--muted); font-family: var(--sans, inherit); font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: help; pointer-events: auto; }
+.wt-spot-tag.cur .tip-btn.wt-spot-chip { border-style: solid; color: var(--text); }
+.wt-spot-tag .tip-btn.wt-spot-chip:hover, .wt-spot-tag .tip-btn.wt-spot-chip[aria-expanded="true"] { color: var(--text); background: var(--card2); }
+.wt-spot-tag .tip-btn.wt-spot-chip .ic { width: 11px; height: 11px; }
+.wt-spot-tag .tip { font-family: var(--sans, system-ui, sans-serif); font-weight: 400; white-space: normal; pointer-events: auto; }
+@media (pointer: coarse) { .wt-spot-tag .tip-btn.wt-spot-chip { height: 28px; padding: 1px 9px 0; border-radius: 14px; } .wt-spot-tag .tip-btn.wt-spot-chip::after { content: ''; position: absolute; inset: -8px -4px; } .wt-spot-tag .tip-btn.wt-spot-chip { position: relative; } }
+/* Next spot in the bar under the reading (slides, and the long page) */
+.wt-dnav .btn.wt-spot { height: 44px; }
+@media (pointer: fine) { .wt-dnav .btn.wt-spot { height: 30px; min-height: 30px; } }
+@media (max-width: 699.98px) { .wt-dnav .btn.wt-spot { width: auto; padding: 0 10px; gap: 4px; } .wt-dnav .wt-spot-l { display: none; } }
+.wt-pnav .wt-spot { margin-left: auto; }
+.wt-pnav .wt-spot + .btn { margin-left: 0; }
 /* the file list: folds to a slim rail, its edge drags */
 .wt-railt { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin-left: auto; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
 .wt-railt .ic { width: 16px; height: 16px; }
@@ -5457,6 +5610,24 @@ a.dec-rc:hover .dec-rc-w { text-decoration: underline; }
 .dec-given-how { color: var(--text2); }
 .dec-given code { font-size: 12px; }
 .dec-open { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; }
+/* the panel's list: one quiet line (status · id · source), the decision, why; a hairline between rows */
+.dec-list { gap: 0; }
+.dec-list > .dec-row { padding: 10px 0; border-top: 1px solid var(--line); }
+.dec-list > .dec-row:first-child { border-top: 0; padding-top: 2px; }
+.dec-row-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2px; font-size: 11.5px; line-height: 1.5; color: var(--text2); }
+.dec-row-h .dec-st { margin-left: 0; font-size: 11.5px; color: var(--text); }
+.dec-row-h .dec-id { font: 500 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text2); opacity: .85; }
+.dec-row-h .dec-src { margin-top: 0; font-size: 11.5px; }
+.dec-auto { font-size: 11.5px; color: var(--text2); }
+.dec-dot { color: var(--text2); opacity: .6; }
+.dec-list .dec-text { font-size: 14px; font-weight: 500; line-height: 1.4; margin-top: 2px; overflow-wrap: anywhere; }
+.dec-row-rejected .dec-text { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--text2); }
+.dec-row-superseded .dec-text { color: var(--text2); }
+.dec-list .dec-why, .dec-list .dec-alt { font-size: 12.5px; line-height: 1.4; }
+/* compact buttons: a small pill inside a 44px hit area */
+.dec-acts-panel { gap: 6px; margin-top: 8px; }
+.dec-acts.dec-acts-panel .btn { position: relative; min-height: 0; height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 7px; }
+.dec-acts.dec-acts-panel .btn::after { content: ''; position: absolute; inset: -8px -3px; }
 
 .dec-page .dec-head h1 { margin: 4px 0 2px; }
 .dec-tl { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; }
@@ -5496,6 +5667,7 @@ a.dec-rc:hover .dec-rc-w { text-decoration: underline; }
 .dec-flash { background: color-mix(in srgb, var(--text2) 10%, transparent); transition: background .6s; }
 @media (prefers-reduced-motion: reduce) { .dec-flash { transition: none; } }
 .dec-proj p { margin: 4px 0 10px; }
+.dec-empty { margin: 6px 0 10px; } .dec-empty p, .dec-proj .dec-empty p { margin: 0 0 4px; max-width: 64ch; } /* 2026-11-05 where decisions come from, on an empty log */
 
 .wt-decs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
 .wt-dec { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; padding: 4px 8px; font-weight: 400; }
@@ -5566,3 +5738,30 @@ a.tp-cite::after { content: ''; position: absolute; inset: -10px -4px; }
 .prs-picks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px; margin: 0 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
 .prs-picks .btn, .prs-picks .linkish { min-height: 44px; }
 .wt-dec .wt-dec-id { white-space: nowrap; flex: none; }
+
+/* 2026-11-06 the quiet "Updated" after the board catches up on return (ui/app.js caughtUpCue): a check
+   and a word, out of the way under the top row, no spinner; no slide under reduced motion */
+.caught-up { position: fixed; top: calc(var(--lf-top, 0px) + env(safe-area-inset-top, 0px) + 56px); left: 50%; transform: translate(-50%, -4px); z-index: 60; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line, rgba(127,127,127,.3)); background: var(--card, var(--bg, #fff)); color: var(--muted, inherit); font-size: 12.5px; pointer-events: none; opacity: 0; transition: opacity .2s ease, transform .2s ease; }
+.caught-up[hidden] { display: none; }
+.caught-up .ic { width: 14px; height: 14px; }
+.caught-up.in { opacity: 1; transform: translate(-50%, 0); }
+.caught-up.out { opacity: 0; }
+@media (prefers-reduced-motion: reduce) { .caught-up { transition: none; transform: translate(-50%, 0); } }
+
+/* 2026-11-06 subagents working (ui/subagents-view.js): a spinner shape and words, in the status pill
+   and as Live's line under the thread; the spinner stands still under reduced motion */
+.sub-spin { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; margin-right: 5px; vertical-align: -1px; animation: sub-spin 1s linear infinite; flex: none; }
+@keyframes sub-spin { to { transform: rotate(360deg); } }
+.lv-subs { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 6px 0 2px; padding: 6px 10px; border: 1px dashed var(--line-strong, var(--line)); border-radius: 10px; color: var(--text); font-size: 13px; }
+.lv-subs-what { display: flex; flex-direction: column; min-width: 0; flex: 1; }
+.lv-subs-step { color: var(--muted); font-family: var(--mono); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.lv-subs-when { font-size: 12px; flex: none; }
+@media (prefers-reduced-motion: reduce) { .sub-spin { animation: none; border-right-color: currentColor; border-style: dotted; } }
+
+/* 2026-11-06 Save as HTML (digest, decision log; the walkthrough's is in its header): a quiet button,
+   44px to a finger. The file is one self-contained .html (ui/render-export.js). */
+.digest-save { display: flex; justify-content: flex-end; margin: -8px 0 8px; }
+.btn.save-html { background: none; box-shadow: none; color: var(--muted); }
+.btn.save-html:hover { color: var(--text); }
+@media (pointer: coarse) { .btn.save-html { min-height: 44px; padding: 0 12px; } }
+@media (max-width: 600px) { .digest-save { justify-content: flex-start; margin: -6px 0 10px; } .btn.save-html { min-height: 44px; } }