@leftoff/cli 0.9.9-beta.6 → 0.9.9-beta.8

package/docs/SECURITY.md

@@ -113,7 +113,8 @@ Live link is opt-in, per session: only sessions started with `leftoff live` have
 - **This Mac's own board** starts it at once. **A phone or another Mac** may start one only when that Mac has *Allow starting sessions from other devices* on (Settings → Privacy & security, off by default) **and** *Trust my paired devices* is on. The switch is kept on that Mac (`~/.config/checkpoints/local/`, not the synced folder, so turning it on one Mac never turns it on another) and only that Mac's own browser can change it (loopback; a phone, the relay or a peer gets 403). Every start from another device shows a notification on the Mac. With the switch off, the request waits up to 5 minutes for a yes on that Mac's board, like Remote Restore. At most 3 wait at once; 3 starts at once, then 1 a minute.
 - **The repo list is folders that Mac has already run Claude Code in** (from its session records; no typed paths). A headless run loads a repo's hooks and `.mcp.json` without the trust dialog, so a folder Claude Code never ran in is treated as a first time:
   - **Other folder…** browses that Mac's folders: names only (never a file or what's in one), inside your home by real path (a symlink out of home is refused or left out), never the synced Leftoff folder or anything in it, no hidden folders, `node_modules` or `Library`, at most 500 per listing. Another Mac's are read over the peer link (`fs.dirs`, not an open action, the same as any read), a phone's through the relay. Nothing is written.
-  - **A first time starts at once only from that Mac's own board** (loopback, or your hosted board open on it): you are the trust prompt. From a phone or another Mac it **always** waits for a yes on that Mac's board, even with *Allow starting sessions from other devices* on, and the ask and the notification say "first time in <folder>; this runs its hooks". After one run it's in the list like the rest. Home itself is refused; a folder that isn't a git repo can't get a new worktree.
+  - **A first time starts at once only from that Mac's own board** (loopback, or your hosted board open on it): you are the trust prompt. From a phone or another Mac it waits for a yes on that Mac's board, even with *Allow starting sessions from other devices* on (unless it's inside an approved folder, below), and the ask and the notification say "first time in <folder>; this runs its hooks". After one run it's in the list like the rest. Home itself is refused; a folder that isn't a git repo can't get a new worktree.
+  - **Approved folders** (per Mac, 0.9.9): with the switch on, a first time inside a folder you approved on that Mac starts from another device without the ask (and notifies that Mac, like any remote start). They're kept in that Mac's own local file (`~/.config/checkpoints/local/`, not `config.json`, never synced), stored as real paths inside your home; home itself, the synced Leftoff folder (or anything inside it), hidden folders and links out of home are refused. A start counts by the folder's real path, so a link that only looks inside an approved folder doesn't. They're added and removed only at the Mac itself: Settings (locked elsewhere), "Always allow in <folder>" on the first-time ask (the folder above it that holds the repos that Mac knows, or its parent; never home), or `leftoff starts allow|disallow <folder>`.
 - **Permission mode `default`, always passed.** Reads in the repo run; every edit and command becomes a Needs-you request (here, the phone, any board; first answer wins) and waits for it, with no 9.5-minute cap since nobody is at a terminal. A request settled any other way is a no. Never `bypassPermissions` or `auto`. AskUserQuestion is answered "ask in words", so Claude asks in plain text and you reply in Live.
 - **Other Macs** reach it over the signed, encrypted peer link (`session.start`, `session.start.get`, `session.headless`, `fs.dirs`; not open actions, so the target Mac's *Allow other machines* applies too).
 - **Nothing new in the folder.** The card, its title and checkpoints as for any session, plus `startedFrom` (device and how it came, not the prompt) and the run's state. Stream output, stdin and stderr stay in the daemon's memory; Claude's transcript stays in `~/.claude` on that Mac; the Live thread and attachments stay where Live keeps them (`~/.config/checkpoints`).

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

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

@@ -1509,13 +1509,48 @@ export function fallbackTitle(session) {
   return repoName(session) + (branch ? '@' + branch : '') + (words ? ' · ' + words : '')
 }
 
-export const TITLE_SYSTEM = 'Write a title of at most 6 words for a coding session, based on its first prompt. Reply with the title only, no quotes, no punctuation at the end.'
+// 0.9.9: the title is in the language the user writes in (English when unsure),
+// one language, one script: a small local model once named an English session
+// "Ants README笑话" ("joke" in Chinese).
+export const TITLE_LANGUAGE = 'Write it in the same language as the user\'s own messages (English if unsure), in one language only: never mix in words or characters from another language.'
+export const TITLE_SYSTEM = 'Write a title of at most 6 words for a coding session, based on its first prompt. ' + TITLE_LANGUAGE + ' Reply with the title only, no quotes, no punctuation at the end.'
 
 export function cleanTitle(text) {
-  const t = String(text || '').split('\n').map((l) => l.trim()).find(Boolean) || ''
+  const t = String(text || '').replace(/<think>[\s\S]*?<\/think>/gi, '').split('\n').map((l) => l.trim()).find(Boolean) || ''
   return clip(t.replace(/^title\s*:\s*/i, '').replace(/^["'`*]+|["'`*.]+$/g, ''), 60)
 }
 
+// The writing systems in a text's letters (digits, punctuation and emoji have none).
+// Chinese and Japanese characters count as one ("han").
+const SCRIPTS = [
+  ['latin', /\p{Script=Latin}/u], ['han', /[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Bopomofo}]/u], ['hangul', /\p{Script=Hangul}/u],
+  ['cyrillic', /\p{Script=Cyrillic}/u], ['greek', /\p{Script=Greek}/u], ['arabic', /\p{Script=Arabic}/u], ['hebrew', /\p{Script=Hebrew}/u],
+  ['thai', /\p{Script=Thai}/u], ['devanagari', /\p{Script=Devanagari}/u],
+]
+export function scriptsOf(text) {
+  const out = new Set()
+  for (const ch of String(text || '')) {
+    if (!/\p{L}/u.test(ch)) continue
+    const hit = SCRIPTS.find(([, re]) => re.test(ch))
+    out.add(hit ? hit[0] : 'other')
+  }
+  return out
+}
+// Does a generated title keep to the user's writing? Every script in it must
+// be one the user wrote in; Latin letters are always fine (file names, code,
+// "README"). A title that brings in another script is dropped for the fallback.
+export function titleFitsUser(title, userText) {
+  const mine = scriptsOf(userText)
+  for (const sc of scriptsOf(title)) if (sc !== 'latin' && !mine.has(sc)) return false
+  return true
+}
+// The line under a title prompt that pins the language: written in Latin
+// letters only, the title is too (what small models drift from).
+export function titleLanguageLine(userText) {
+  const mine = scriptsOf(userText)
+  return [...mine].some((sc) => sc !== 'latin') ? 'Title language: the language of the messages above.' : 'Title language: the language of the messages above (English if unsure), Latin letters only.'
+}
+
 // ---------------------------------------------------------------- catch me up (v0.5.0)
 
 // A model reply -> its bullet lines (at most max), or null when fewer than two.

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.9-beta.6' // keep in step with .claude-plugin/plugin.json
+const MOD_VERSION = '0.9.9-beta.8' // 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.9-beta.6",
+  "version": "0.9.9-beta.8",
   "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

@@ -182,6 +182,20 @@ h2 .count { color: var(--faint); font-weight: 500; }
 .fact { background: var(--card); box-shadow: var(--card-shadow); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-width: 0; }
 .fact .k { color: var(--faint); font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; }
 .fact .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fact .k, .fact .v { display: block; }
+/* 0.9.9: a card with an id or a path is a button: tap copies the whole value, which is its tip */
+.fact.copyable { position: relative; width: 100%; min-height: 44px; text-align: left; cursor: pointer; font: inherit; color: inherit; outline: none; -webkit-tap-highlight-color: transparent; transition: border-color .12s, background .12s; }
+.fact.copyable .k { display: flex; align-items: center; gap: 6px; }
+.fact-ic { display: inline-grid; margin-left: auto; color: var(--faint); opacity: .55; transition: opacity .12s, color .12s; }
+.fact-ic svg { width: 13px; height: 13px; }
+@media (hover: hover) { .fact.copyable:hover { border-color: var(--line-strong); } .fact.copyable:hover .fact-ic { opacity: 1; color: var(--text2); } }
+.fact.copyable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.fact.copyable:focus-visible .fact-ic { opacity: 1; }
+.fact.copyable.copied { border-color: var(--accent); }
+.fact.copyable.copied .fact-ic { opacity: 1; color: var(--accent); }
+.fact.copyable[data-tip]::after { content: attr(data-tip); display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; padding: 4px 8px; border-radius: 7px; background: var(--card2); border: 1px solid var(--line-strong); box-shadow: var(--toast-shadow); color: var(--text2); font: 500 12px/1.35 var(--mono); text-transform: none; letter-spacing: normal; white-space: normal; overflow-wrap: anywhere; pointer-events: none; }
+@media (hover: hover) { .fact.copyable[data-tip]:hover::after { display: block; } }
+.fact.copyable[data-tip]:focus-visible::after, .fact.copyable.copied[data-tip]::after { display: block; }
 .strip { display: flex; gap: 3px; margin: 8px 0 4px; flex-wrap: wrap; }
 .strip span { font-size: 11px; padding: 2px 8px; border-radius: 6px; }
 .timeline { position: relative; margin-left: 8px; padding-left: 22px; border-left: 2px solid var(--line); }
@@ -2100,6 +2114,16 @@ mark.tx, .co-snip mark, .tx-snip mark, .tx-msg-text mark { background: var(--tx-
 .lv-tick { margin-top: 4px; font-size: 11.5px; color: var(--muted); text-align: right; }
 .lv-tick.got span { color: var(--accent); letter-spacing: -2px; padding-right: 2px; }
 .lv-tick.bad { color: var(--red); text-align: left; }
+/* 0.9.9 Queued: sent while Claude works, not taken in yet: dimmed, a dashed edge, Queued (not Working) */
+.lv-you.lv-queued { background: transparent; border-style: dashed; border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
+.lv-you.lv-queued .lv-text, .lv-you.lv-queued .lv-who, .lv-you.lv-queued .att-bubble { opacity: .62; }
+.lv-q { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 8px; margin-top: 6px; font-size: 12px; color: var(--muted); }
+.lv-q-tag { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; letter-spacing: .01em; color: var(--muted); }
+.lv-q-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; }
+.lv-q-hint { color: var(--muted); }
+.lv-q-acts { display: inline-flex; gap: 6px; }
+.lv-q-btn { min-height: 44px; min-width: 64px; padding: 0 14px; font-size: 14px; }
+.lv-q-btn:focus:not(:focus-visible) { outline: none; }
 .lv-working .lvs-line { margin-top: 0; }
 .lv-pending .lv-working { margin-top: 4px; }
 .lvs-sep { color: var(--faint); }
@@ -2874,6 +2898,29 @@ del.gd-x { background: var(--gd-del-word); }
 .headless-bar.running { border-color: var(--green); background: var(--tint-green); }
 .headless-bar.paused { border-color: var(--yellow); background: var(--tint-yellow); }
 .headless-bar .btn { min-height: 44px; }
+/* 0.9.9 Permissions: the New session choice, the session page's switch and its pill beside Live */
+.start-mode { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.start-mode .start-opt-sub { white-space: normal; }
+.headless-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: -4px 0 10px; }
+.headless-mode .hm-l { font-size: 12.5px; font-weight: 600; color: var(--muted); }
+.hm-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: visible; background: var(--card); }
+.hm-opt { position: relative; min-height: 44px; min-width: 44px; padding: 0 14px; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--text2); font: inherit; font-size: 13.5px; cursor: pointer; }
+.hm-opt:first-child { border-left: 0; border-radius: 10px 0 0 10px; }
+.hm-opt:last-child { border-radius: 0 10px 10px 0; }
+.hm-opt[aria-checked="true"] { background: var(--tint-accent); color: var(--text); font-weight: 600; box-shadow: inset 0 0 0 1px var(--accent); }
+.hm-opt:disabled { opacity: .55; cursor: default; }
+.hm-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; z-index: 1; }
+.hm-opt[data-tip]::after, .mode-pill[data-tip]::after { content: attr(data-tip); display: none; position: absolute; top: calc(100% + 4px); left: 0; width: max-content; max-width: min(280px, 80vw); 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.35; font-weight: 500; text-align: left; white-space: normal; pointer-events: none; z-index: 20; }
+@media (hover: hover) { .hm-opt[data-tip]:hover::after, .mode-pill[data-tip]:hover::after { display: block; animation: tip-in .12s ease-out .35s both; } }
+.hm-opt[data-tip]:focus-visible::after, .mode-pill[data-tip]:focus-visible::after { display: block; }
+.hm-hint { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--muted); }
+.mode-pill { position: relative; display: inline-block; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg2); color: var(--text2); font-size: 11.5px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
+.mode-pill.m-auto { border-color: var(--accent); background: var(--tint-accent); color: var(--text); }
+.mode-pill.m-acceptEdits { border-color: var(--yellow); background: var(--tint-yellow); color: var(--text); }
+@media (max-width: 640px) {
+  .hm-seg { display: flex; width: 100%; }
+  .hm-opt { flex: 1 1 0; padding: 0 6px; }
+}
 .headless-err { margin: -4px 0 10px; padding: 8px 12px; border-radius: 8px; background: var(--tint-red); color: var(--text2); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 9em; overflow: auto; }
 @media (max-width: 640px) {
   .start-opts { grid-template-columns: 1fr; }
@@ -2951,3 +2998,95 @@ del.gd-x { background: var(--gd-del-word); }
 /* 0.9.9 asked at pairing time: may other devices start sessions here? */
 .pair-ask .grow { min-width: 0; }
 @media (pointer: coarse) { .pair-ask > .btn { min-height: 44px; } }
+
+/* 0.9.9 a setting that saves on change says so beside it, then fades */
+.saved-mark { display: inline-block; margin-left: 10px; font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--green, var(--accent)); transition: opacity .35s ease; }
+.saved-mark.bad { color: var(--red); font-weight: 400; white-space: normal; }
+.saved-mark.gone { opacity: 0; }
+@media (prefers-reduced-motion: reduce) { .saved-mark { transition: none; } }
+
+/* 0.9.9 settings kept on one Mac only: "🖥️ studio only" beside the label (a styled tip,
+   never title=), and a locked control (a lock, aria-disabled) when you're not at that Mac */
+.local-pill { position: relative; display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg2); color: var(--text2); font-size: 11.5px; font-weight: 500; line-height: 1.5; white-space: nowrap; vertical-align: 1px; cursor: default; }
+.local-pill::after { content: attr(data-tip); display: none; position: absolute; top: calc(100% + 4px); left: 0; width: max-content; max-width: min(240px, 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; white-space: normal; pointer-events: none; z-index: 20; }
+@media (hover: hover) { .local-pill:hover::after { display: block; animation: tip-in .12s ease-out .35s both; } }
+.local-pill.show::after { display: block; }
+@media (prefers-reduced-motion: reduce) { .local-pill::after { animation: none !important; } }
+.local-pill .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.form label.check.locked { color: var(--muted); cursor: not-allowed; }
+.form label.check.locked input { cursor: not-allowed; }
+.form label.check .lock { display: inline-flex; color: var(--muted); }
+.form label.check .lock .ic { width: 14px; height: 14px; }
+/* 0.9.9 Settings → Approved folders: a list with Remove, and an add field (16px) */
+.form label[for="f-start-approve"] { align-self: start; padding-top: 12px; }
+.approved { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
+.approved-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
+.approved-list li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 4px 4px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg2); }
+.approved-path { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--text); font-size: 13px; }
+.approved .mono, .start-ask-banner .mono { font-family: var(--mono); }
+.approved-x { flex: none; min-height: 44px; min-width: 44px; justify-content: center; gap: 4px; }
+.approved-x .ic { width: 14px; height: 14px; }
+.approved-none { color: var(--faint); font-size: 13px; }
+.approved-add { display: flex; gap: 8px; align-items: center; }
+.form .approved-add input { flex: 1; min-width: 0; height: 44px; font-size: 16px; }
+.approved-add .btn { min-height: 44px; flex: none; }
+.approved.locked .approved-add input, .approved.locked .approved-add .btn { cursor: not-allowed; }
+.approved .lock { display: inline-flex; color: var(--muted); }
+.approved .lock .ic { width: 14px; height: 14px; }
+.approved-err { color: var(--red); font-size: 12.5px; overflow-wrap: anywhere; }
+.start-ask-banner .btn.approve { max-width: 100%; }
+.start-ask-banner .btn.approve .mono { overflow-wrap: anywhere; white-space: normal; text-align: left; }
+@media (max-width: 640px) {
+  .start-ask-banner > .btn.approve { order: 1; flex: 1 1 100%; }
+}
+
+/* 0.9.9 the ask in Live: a waiting permission prompt (or question) takes the
+   composer's place at the bottom of Live, and stays in reach while you read the
+   thread (sticky inside the Live box, above the phone's tab bar and the home
+   indicator); the thread keeps a short row for each ask where it happened. */
+.ask-dock-wrap { position: sticky; bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px)); z-index: 6; margin-top: 10px; }
+.need.ask-dock { gap: 10px; padding: 12px 14px; border-radius: 16px; border-color: color-mix(in srgb, var(--red) 50%, var(--line)); background: var(--card); box-shadow: 0 8px 28px rgba(15, 20, 35, .14), 0 1px 3px rgba(15, 20, 35, .08); }
+[data-theme="dark"] .need.ask-dock { background: var(--card2); box-shadow: 0 8px 28px rgba(0, 0, 0, .45); }
+.ask-dock .need-head { font-size: 13px; }
+.ask-count { font-size: 12px; font-weight: 600; color: var(--text2); background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
+.ask-what { display: grid; gap: 6px; min-width: 0; }
+.ask-verb { font-weight: 600; font-size: 15px; color: var(--text); }
+.ask-detail { display: block; font-family: var(--mono); font-size: 13px; line-height: 1.5; background: var(--field); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; max-height: 40vh; overflow: auto; }
+.ask-detail.long { max-height: calc(3 * 1.5em + 12px); overflow: hidden; }
+.ask-detail.long.open { max-height: 40vh; overflow: auto; }
+.ask-more, .ask-reply-instead { justify-self: start; min-height: 44px; padding: 0 2px; margin: -6px 0 -8px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent; }
+.ask-reply-instead { color: var(--muted); }
+.ask-more:hover, .ask-reply-instead:hover { text-decoration: underline; }
+.ask-more:focus-visible, .ask-reply-instead:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
+.ask-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
+.ask-actions .btn, .ask-dock .deny-form .btn { min-height: 44px; font-size: 14px; padding: 8px 16px; justify-content: center; white-space: nowrap; }
+.ask-actions .btn.ask-allow { min-width: 120px; font-size: 15px; }
+.ask-dock .deny-form .deny-note { flex: 1 1 220px; min-width: 0; min-height: 44px; box-sizing: border-box; font-size: 16px; }
+@media (max-width: 699.98px) {
+  .ask-dock-wrap { bottom: calc(var(--bar-h) + 8px + env(safe-area-inset-bottom)); }
+  body.nav-hidden .ask-dock-wrap { bottom: max(10px, calc(env(safe-area-inset-bottom) + 6px)); }
+  .need.ask-dock { padding: 12px; }
+  .ask-actions .btn { flex: 1 1 calc(50% - 4px); font-size: 15px; min-height: 48px; }
+  .ask-actions .btn.ask-allow, .ask-actions .btn.ask-deny { flex-basis: 100%; }
+  .ask-actions .always-wrap { flex: 1 1 calc(50% - 4px); }
+  .ask-actions .always-wrap .btn { flex: 1 1 auto; width: 100%; }
+  .ask-dock .deny-form .btn { flex: 1 1 calc(50% - 4px); min-height: 48px; }
+  .ask-dock .deny-form .deny-note { flex-basis: 100%; }
+}
+/* after "Reply instead": one line above the composer, Answer brings the card back */
+.ask-slim { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 4px 4px 4px 12px; border: 1px solid color-mix(in srgb, var(--red) 40%, var(--line)); border-radius: 12px; background: var(--tint-red); font-size: 13px; min-width: 0; }
+.ask-slim .need-dot { background: var(--red); }
+.ask-slim-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text2); }
+.ask-slim .btn { flex: none; min-height: 44px; min-width: 44px; justify-content: center; }
+/* the row in the thread: what it asked, and how it was answered */
+.lv-ask { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; margin: 0 0 8px; padding: 6px 10px; border-left: 3px solid var(--line-strong); border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--muted) 7%, transparent); font-size: 12.5px; color: var(--text2); min-width: 0; }
+.lv-ask .lva-what { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
+.lv-ask .lva-verb { font-weight: 600; }
+.lv-ask code { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
+.lv-ask .lva-state { flex: none; max-width: 100%; font-weight: 600; font-size: 12px; overflow-wrap: anywhere; }
+.lv-ask.t-ok { border-left-color: var(--green); } .lv-ask.t-ok .lva-state { color: var(--green); }
+.lv-ask.t-auto { border-left-color: var(--accent); } .lv-ask.t-auto .lva-state { color: var(--accent); }
+.lv-ask.t-no { border-left-color: var(--red); } .lv-ask.t-no .lva-state { color: var(--red); }
+.lv-ask.t-wait { border-left-color: var(--red); background: var(--tint-red); } .lv-ask.t-wait .lva-state { color: var(--red); }
+.ask-note { color: var(--muted); font-size: 13px; margin-top: -4px; }
+.lv-ask .lva-what { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }