samagotchi 0.61.0 → 0.62.0

data/lib/samagotchi/web/public/families_view.js

@@ -1,23 +1,44 @@
 // A parent's card with its delegates folded in (docs/sessions.md, the web):
-// the chip that opens the family's list, and the list's rows. Pure string
-// builders; app.js places them (inline in all sessions, a popover over the
-// strip) and binds the clicks.
-import { escapeHtml, ownerBadge, previewForCard, relativeTime } from "./format.js";
+// the chip that opens the family's list, and the list's rows, as lit-html
+// templates; lists_view.js places them (inline in all sessions, a popover
+// over the strip) and binds the clicks. Attributes after a bound one are
+// bound too, so they keep their order in the markup (lit sets bound ones
+// after the static ones).
+import { ownerBadge, previewForCard, relativeTime } from "./format.js";
 import { familySummary, stoppedBadge, waitingBadge } from "./sessions_list.js";
+import { html, nothing, render } from "./vendor/lit-html.js";
+import { keepFocus } from "./keep_focus.js";
 
 // The chip in a parent's meta row: "▸ 3 delegates · ● 1 live · 1 waiting"
 // (a waiting one in the attention colour), its tooltip the delegates by
-// state. "" for a family with no members.
+// state. nothing for a family with no members.
 // @param open whether the list is open (aria-expanded; the arrow turns)
-export function familyChipHtml(f, { open = false } = {}) {
+export function familyChipTemplate(f, { open = false } = {}) {
   const sum = familySummary(f);
-  if (!sum) return "";
+  if (!sum) return nothing;
   const waiting = sum.counts.waiting;
-  const liveHtml = sum.live ? `<span class="fc-live"> · <span class="live-dot" aria-hidden="true"></span>${sum.live} live</span>` : "";
-  const waitingHtml = waiting ? ` · <span class="fc-waiting">${waiting} waiting</span>` : "";
-  return `<button type="button" class="family-chip${waiting ? " waiting" : ""}" aria-expanded="${open ? "true" : "false"}" title="${escapeHtml(sum.title)}"><span class="fc-arrow" aria-hidden="true">▸</span>${sum.total} ${sum.total === 1 ? "delegate" : "delegates"}${liveHtml}${waitingHtml}</button>`;
+  const live = sum.live ? html`<span class="fc-live"> · <span class="live-dot" aria-hidden="true"></span>${sum.live} live</span>` : nothing;
+  const waitingT = waiting ? html` · <span class="fc-waiting">${waiting} waiting</span>` : nothing;
+  return html`<button type="button" class=${`family-chip${waiting ? " waiting" : ""}`} aria-expanded=${open ? "true" : "false"}
+    title=${sum.title}><span class="fc-arrow" aria-hidden="true">▸</span>${sum.total} ${sum.total === 1 ? "delegate" : "delegates"}${
+    live}${waitingT}</button>`;
 }
 
+// A row's status dot (a family's or a chain's): the waiting title over the
+// status when the session waits on the user.
+export function rowDotTemplate(s, waiting) {
+  const word = (waiting ? waiting.title : s.status) || "";
+  return html`<span class=${`status dot ${s.status || ""}${waiting ? " waiting" : ""}`} title=${word} aria-label=${word}></span>`;
+}
+
+// A row's waiting or stopped badge, and the archived one.
+export function rowBadgesTemplate(waiting, stopped) {
+  return html`${waiting ? html`<span class=${`attn attn-${waiting.kind}`} title=${waiting.title}>${waiting.text}</span>` : nothing}${
+    stopped ? html`<span class="stopped-badge" title=${stopped.title}>${stopped.text}</span>` : nothing}`;
+}
+
+export const archivedBadge = html`<span class="archived-badge" title="Archived: hidden from the lists, kept for good">archived</span>`;
+
 // The family's list: one row per member, depth first, indented one step
 // per depth (--depth): status dot, preview, time, the waiting / stopped
 // badge, the owner badge, archived. A row's click opens that session.
@@ -25,7 +46,7 @@ export function familyChipHtml(f, { open = false } = {}) {
 // @param matchIds a search's matching members (.match; the rest .dim), or
 //   null without a search
 // @param archivable an archive button per row (all sessions, not in select mode)
-export function familyRowsHtml(f, { activeId = null, matchIds = null, archivable = false, now = Date.now() } = {}) {
+export function familyRowsTemplate(f, { activeId = null, matchIds = null, archivable = false, now = Date.now() } = {}) {
   const rows = f.members.map(({ session: s, depth }) => {
     const cls = ["family-row"];
     if (activeId && s.id === activeId) cls.push("active");
@@ -36,23 +57,17 @@ export function familyRowsHtml(f, { activeId = null, matchIds = null, archivable
     const stopped = waiting ? null : stoppedBadge(s);
     const owner = ownerBadge(s.owner, s.id);
     const ago = relativeTime(ts, now);
-    const dotWord = waiting ? waiting.title : s.status;
-    const parts = [
-      `<span class="status dot ${escapeHtml(s.status || "")}${waiting ? " waiting" : ""}" title="${escapeHtml(dotWord || "")}" aria-label="${escapeHtml(dotWord || "")}"></span>`,
-      `<span class="fr-preview">${escapeHtml(previewForCard(s))}</span>`,
-      waiting ? `<span class="attn attn-${waiting.kind}" title="${escapeHtml(waiting.title)}">${escapeHtml(waiting.text)}</span>` : "",
-      stopped ? `<span class="stopped-badge" title="${escapeHtml(stopped.title)}">${escapeHtml(stopped.text)}</span>` : "",
-      ago ? `<span class="time">${escapeHtml(ago)}</span>` : "",
-      owner ? `<span class="owner ${owner.kind}" title="${escapeHtml(owner.title)}">${escapeHtml(owner.text)}</span>` : "",
-      s.archived ? `<span class="archived-badge" title="Archived: hidden from the lists, kept for good">archived</span>` : "",
-    ].join("");
-    const short = escapeHtml(s.short_id || String(s.id).slice(0, 8));
-    const arch = !archivable ? "" : s.archived
-      ? `<button type="button" class="card-arch" data-arch="${escapeHtml(s.id)}" title="Unarchive: back to the lists" aria-label="Unarchive session ${short}"></button>`
-      : `<button type="button" class="card-arch" data-arch="${escapeHtml(s.id)}" title="Archive: hide from the lists, keep for good" aria-label="Archive session ${short}"></button>`;
-    return `<div class="${cls.join(" ")}" data-id="${escapeHtml(s.id)}" style="--depth:${depth}" role="listitem"><button type="button" class="fr-open" title="${escapeHtml(`${s.id} · ${s.status || ""}`)}">${parts}</button>${arch}</div>`;
+    const short = s.short_id || String(s.id).slice(0, 8);
+    const arch = !archivable ? nothing : s.archived
+      ? html`<button type="button" class="card-arch" data-arch=${s.id} title=${"Unarchive: back to the lists"} aria-label=${`Unarchive session ${short}`}></button>`
+      : html`<button type="button" class="card-arch" data-arch=${s.id} title=${"Archive: hide from the lists, keep for good"} aria-label=${`Archive session ${short}`}></button>`;
+    return html`<div class=${cls.join(" ")} data-id=${s.id} style=${`--depth:${depth}`} role=${"listitem"}><button type="button" class="fr-open"
+      title=${`${s.id} · ${s.status || ""}`}>${rowDotTemplate(s, waiting)}<span class="fr-preview">${previewForCard(s)}</span>${
+      rowBadgesTemplate(waiting, stopped)}${ago ? html`<span class="time">${ago}</span>` : nothing}${
+      owner ? html`<span class=${`owner ${owner.kind}`} title=${owner.title}>${owner.text}</span>` : nothing}${
+      s.archived ? archivedBadge : nothing}</button>${arch}</div>`;
   });
-  return `<div class="family-rows" role="list">${rows.join("")}</div>`;
+  return html`<div class="family-rows" role="list">${rows}</div>`;
 }
 
 // The widest window index.html lays out as a phone (@media (max-width:600px)).
@@ -61,11 +76,13 @@ export const PHONE_MAX_PX = 600;
 // The strip's family popover: one #familyPop in body (position: fixed, so
 // the strip's sideways scroll on a phone doesn't clip it), under the chip
 // it was opened from and as wide as that card (300 px at least, inside the
-// window; on a phone, the window less 16 px gutters). The strip draws again on every hub event: refresh() then finds
-// the new chip for the same head, rewrites the rows only when they changed,
+// window; on a phone, the window less 16 px gutters). The strip draws again
+// on every hub event: refresh() then finds the new chip for the same head,
+// draws the rows again (lit writes only what changed: a row keeps its
+// nodes, reused by position, so keepFocus keeps the focus on its session)
 // and closes when the family is gone.
-// @param rowsFor (headId) → the rows' html, or null when the family has no
-//   members (any more)
+// @param rowsFor (headId) → the rows' template, or null when the family
+//   has no members (any more)
 // @param anchorFor (headId) → its chip in the strip, or null
 // @param onPick (id) a row's click
 // @param onClose () after it closed (the strip's held order catches up)
@@ -73,7 +90,6 @@ export const PHONE_MAX_PX = 600;
 export function createFamilyPop({ id = "familyPop", doc, win, rowsFor, anchorFor, onPick, onClose = () => {} }) {
   let el = null;
   let headId = null;
-  let html = "";
 
   const element = () => {
     if (el) return el;
@@ -110,10 +126,8 @@ export function createFamilyPop({ id = "familyPop", doc, win, rowsFor, anchorFor
       close();
       return false;
     }
-    if (rows !== html) {
-      el.innerHTML = rows;
-      html = rows;
-    }
+    // A row inserted before the focused one: the focus stays on its session.
+    keepFocus(el, "data-id", () => render(rows, el));
     anchor.setAttribute("aria-expanded", "true");
     place(anchor);
     return true;
@@ -123,7 +137,6 @@ export function createFamilyPop({ id = "familyPop", doc, win, rowsFor, anchorFor
     if (headId && headId !== id) close();
     headId = id;
     element().hidden = false;
-    html = "";
     draw();
   }
 
@@ -131,9 +144,8 @@ export function createFamilyPop({ id = "familyPop", doc, win, rowsFor, anchorFor
     if (!headId) return;
     anchorFor(headId)?.setAttribute("aria-expanded", "false");
     headId = null;
-    html = "";
     el.hidden = true;
-    el.innerHTML = "";
+    render(nothing, el);
     onClose();
   }
 

data/lib/samagotchi/web/public/index.html

@@ -283,6 +283,15 @@ button.task-stop:hover:not(:disabled){background:var(--danger-bg-dim);filter:non
 .gen details.thinking summary.thinking-fade{animation:thinking-fade 120ms ease-out}
 @keyframes thinking-fade{from{opacity:.4}to{opacity:1}}
 @media (prefers-reduced-motion:reduce){.gen details.thinking summary.thinking-fade{animation:none}}
+/* A finished block's outline (turn_view.js outlineBlock): open on its narrated steps' rows; a run of steps that said
+   nothing is one "· N steps" fold, a row like a step's, that shows them. */
+.turn-work.outline{--step-indent:14px}
+.turn-work.outline>.gen.folded:not(.unfolded){display:none}
+.outline-fold{margin-top:8px;padding-top:6px;padding-left:var(--step-indent);border-top:1px solid var(--border);font-size:12px;font-weight:500;color:var(--text-faint);cursor:pointer;user-select:none;border-radius:4px}
+.outline-fold::before{content:"· "}
+.outline-fold.open::before{content:"▾ "}
+.outline-fold:hover{color:var(--text-muted)}
+.turn-work.outline>.gen.folded.unfolded{margin-left:var(--step-indent)}
 .gen-text{margin-top:6px;white-space:pre-wrap;word-break:break-word;font-size:15px;line-height:1.55}
 /* The live step's narration box: the complete sentences so far, one per line, three visual lines high (3 × the 1.55 line-height), scrolled to the newest; each new line fades in. */
 .gen-text.streaming>.narration{max-height:4.65em;overflow:auto;scrollbar-width:thin;white-space:normal}
@@ -310,6 +319,12 @@ button.task-stop:hover:not(:disabled){background:var(--danger-bg-dim);filter:non
 .bubble.question>summary::-webkit-details-marker{display:none}
 .bubble.question>summary::before{content:"▸ ";color:var(--warn)}
 .bubble.question[open]>summary::before{content:"▾ "}
+/* An answered card keeps the reply that asked it (question_cards.js): muted under its "Q → A" line, two lines while
+   closed (newlines as spaces); open, the summary's copy goes and the body's starts the card, whole, as written and
+   selectable. */
+.bubble.question>summary .question-said{max-width:72ch;margin:2px 0 1px 1.05em;font-size:12.5px;font-weight:400;line-height:1.5;color:var(--text-muted);white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
+.bubble.question[open]>summary .question-said{display:none}
+.question-said-full{margin:4px 0 6px;font-size:13px;line-height:1.55;color:var(--text-muted);white-space:pre-wrap;overflow-wrap:anywhere}
 .bubble.command{border-left:3px solid var(--text-faint);background:var(--bg-panel);font-size:13px}
 .bubble.note{border-left:3px dotted var(--text-faint);background:transparent;font-size:12px;color:var(--text-muted);opacity:.85}
 .note-line{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-faint);margin-bottom:2px}
@@ -336,7 +351,8 @@ button.task-stop:hover:not(:disabled){background:var(--danger-bg-dim);filter:non
 .bubble.question.answered{border-left-color:var(--ok)}
 .bubble.question.cancelled{border-left-color:var(--text-muted);opacity:.75}
 /* A settled card stops floating: the highlight stays, the drop shadow goes. */
-.bubble.question.answered,.bubble.question.cancelled{box-shadow:inset 0 1px 0 var(--glass-highlight)}
+/* Closed, it is a bare line (no card to light): wider with its kept reply, a highlight would read as a stray rule. */
+.bubble.question.answered[open],.bubble.question.cancelled[open]{box-shadow:inset 0 1px 0 var(--glass-highlight)}
 .question-text{font-size:14px;color:var(--text);margin-bottom:8px;white-space:pre-wrap}
 .question-options{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
 .question-option{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--text-2);padding:6px 8px;border:1px solid var(--border);border-radius:8px;cursor:pointer}
@@ -394,6 +410,8 @@ button.task-stop:hover:not(:disabled){background:var(--danger-bg-dim);filter:non
 .ref-more[hidden]{display:none}
 /* A ref makes room after itself for its ▾ while it shows (ref_menu.js), and keeps its hover look (its ↗ too) until the ▾ goes: the ▾ never covers what follows it. */
 .ref[data-ref-more]{padding-right:19px}
+/* …unless the room would push it onto the next line: it ends its line, and the ▾ goes past its end. */
+.ref[data-ref-more="end"]{padding-right:0}
 .ref-more:hover{color:var(--accent);border-color:var(--accent)}
 .ref-menu{position:fixed;z-index:61;min-width:160px;max-width:calc(100vw - 16px);padding:4px;border:1px solid var(--border-strong);border-radius:8px;background:var(--bg-panel);box-shadow:var(--toast-shadow);animation:fadeIn .12s ease-out}
 .ref-menu [role="menuitem"]{display:block;width:100%;padding:6px 10px;border:0;border-radius:5px;background:none;color:var(--text);font:inherit;font-size:13px;text-align:left;cursor:pointer;white-space:nowrap}
@@ -594,7 +612,13 @@ body.has-session #composer .actions-col{flex-wrap:nowrap;flex-shrink:0}
 body.stage-view #dock,body.stage-view #dock:focus-within{background:transparent;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;gap:10px}
 .dock-card{display:flex;flex-direction:column;border-radius:16px;position:relative;transition:border-color .12s ease,box-shadow .12s ease}
 .dock-card:focus-within{border-color:color-mix(in srgb,var(--accent) 70%,transparent);box-shadow:0 0 0 3px var(--accent-ring),var(--glass-shadow)}
+/* The live slots' heights (headline, tool row, trail); --ts-live-h is their running height with the two 8 px gaps. */
+.turn-stage{--ts-head-h:42px;--ts-now-h:32px;--ts-trail-h:18px;--ts-live-h:calc(var(--ts-head-h) + var(--ts-now-h) + var(--ts-trail-h) + 16px)}
 .turn-stage{display:flex;flex-direction:column;min-height:0;max-height:var(--stage-max,60vh);border-left:3px solid var(--accent);border-radius:14px;overflow:hidden}
+/* Out of the dock's flow: it floats 10 px above the composer card, so its rise, growth and leaving never move #dock (a
+   bottom-pinned box changing height is a layout shift, animated or not). Painted before .dock-card (no z-index): the command
+   list (z-index 20 inside .dock-card) opens over its lower edge. The history's bottom reserve counts it (app.js, --dock-h). */
+body.stage-view .turn-stage{position:absolute;left:0;right:0;bottom:100%;margin-bottom:10px}
 .turn-stage[hidden]{display:none}
 .turn-stage.ended{border-left-color:var(--border-strong)}
 .turn-stage[data-phase="answered"]{border-left-color:var(--ok)}
@@ -603,7 +627,10 @@ body.stage-view #dock,body.stage-view #dock:focus-within{background:transparent;
 .turn-stage[data-phase="no answer"]{border-left-color:var(--warn)}
 .turn-stage.enter{animation:ts-rise .35s cubic-bezier(.3,.7,.2,1)}
 @keyframes ts-rise{from{opacity:0;transform:translateY(14px)}}
-.turn-stage.leaving{transition:height .4s cubic-bezier(.3,.7,.2,1),opacity .3s ease;opacity:0}
+/* The hand-off: the stage slides away under the composer still drawn (a transform: nothing moves; stage_view.js handOff),
+   then the turn arrives in the history. Meanwhile the history's bottom reserve eases down (app.js). */
+.turn-stage.leaving{transition:transform .42s cubic-bezier(.4,0,.6,1),opacity .42s ease-in;transform:translateY(40px);opacity:0;pointer-events:none}
+#center.reserve-easing #history{transition:padding-bottom .42s cubic-bezier(.4,0,.6,1)}
 .ts-arrive{animation:ts-arrive .5s cubic-bezier(.3,.7,.2,1)}
 @keyframes ts-arrive{from{opacity:0;transform:translateY(60px)}}
 .ts-status{flex:none;display:flex;align-items:center;gap:8px;min-width:0;padding:8px 8px 0 14px;font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
@@ -640,20 +667,24 @@ body.stage-view #dock,body.stage-view #dock:focus-within{background:transparent;
 .ts-prompt:not(.full) .user-message blockquote{display:inline;border:0;padding:0;margin:0}
 /* The live slots: fixed heights (two headline lines, one tool row, one trail line). */
 .ts-live{display:flex;flex-direction:column;gap:8px}
-.ts-headline{height:42px;font-size:14px;line-height:21px;color:var(--narr);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;cursor:pointer;border-radius:6px}
+.ts-headline{height:var(--ts-head-h);font-size:14px;line-height:21px;color:var(--narr);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;cursor:pointer;border-radius:6px}
 .ts-headline:hover{background:var(--bg-hover)}
 .ts-headline:not(.thinking)::before{content:"\203A";color:var(--accent);font-weight:700;margin-right:7px}
 .ts-headline.thinking{font-size:13.5px;font-style:italic;color:var(--text-muted)}
 .ts-think-tag{font-style:normal;font-size:12.5px;color:var(--think-text);margin-right:6px}
 .ts-headline.fresh{animation:ts-fade .3s ease}
+/* While a question or approval waits: the whole reply that asked it, raw as a closed step's text, in the headline's
+   place; capped so the card keeps its room, read from the top (stage_view.js drawAsking). */
+.ts-asking{max-height:calc(var(--stage-max,60vh) * .35);overflow:auto;scrollbar-width:thin;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.55;color:var(--narr);border-left:2px solid var(--border-strong);padding-left:10px}
+.turn-stage.asking .ts-headline{display:none}
 @keyframes ts-fade{from{opacity:.35}}
-.ts-now{height:32px;display:flex;align-items:center;gap:8px;min-width:0;padding:0 9px;border-radius:8px;background:var(--accent-tint);font-size:13px}
+.ts-now{height:var(--ts-now-h);display:flex;align-items:center;gap:8px;min-width:0;padding:0 9px;border-radius:8px;background:var(--accent-tint);font-size:13px}
 .ts-spin{flex:none;width:11px;height:11px;border:2px solid var(--warn);border-right-color:transparent;border-radius:50%;animation:init-spin .8s linear infinite}
 .ts-idle{flex:none;width:11px;height:11px;border:2px solid var(--border-strong);border-radius:50%}
 .ts-tool{flex:none;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:600;color:var(--accent)}
 .ts-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--text-2)}
 .ts-title.quiet{font-family:inherit;font-style:italic;color:var(--text-faint)}
-.ts-trail{height:18px;display:flex;gap:10px;overflow:hidden;font-size:12px;line-height:18px;color:var(--text-faint);white-space:nowrap}
+.ts-trail{height:var(--ts-trail-h);display:flex;gap:10px;overflow:hidden;font-size:12px;line-height:18px;color:var(--text-faint);white-space:nowrap}
 .ts-trail-item{flex:none;max-width:36ch;overflow:hidden;text-overflow:ellipsis}
 .ts-trail-item:is(.error,.blocked){color:var(--danger-text)}
 .ts-trail-item.warn{color:var(--warn-text)}
@@ -664,7 +695,14 @@ body.stage-view #dock,body.stage-view #dock:focus-within{background:transparent;
 .turn-stage.waiting .ts-now,.turn-stage.waiting .ts-trail{display:none}
 /* Rows that arrive during the turn (cards, queued prompts, commands, notes) and after its end (the end line): capped, own scroll. */
 .ts-extras,.ts-tail{display:flex;flex-direction:column;gap:8px;max-height:calc(var(--stage-max,60vh) * .4);overflow:auto;scrollbar-width:thin}
-.turn-stage.waiting .ts-extras{max-height:calc(var(--stage-max,60vh) * .7)}
+.turn-stage.held-wait .ts-extras{max-height:calc(var(--stage-max,60vh) * .7)}
+/* The card under the live slots stays put from its arrival to the next step: waiting, the slots keep at least their running
+   height (the asking text in the headline's place, the tool row's and the trail's room left blank); answered, the height
+   they had while waiting (stage_view.js). */
+.turn-stage.waiting .ts-live{min-height:var(--ts-live-h)}
+.turn-stage.held-wait:not(.waiting) .ts-live{min-height:max(var(--ts-live-h),var(--live-held,0px))}
+/* A 1 px mark at the tallest content's end, so the scroll extent never drops while a turn runs (stage_view.js fitFrame). */
+.ts-hold{position:absolute;left:0;top:0;width:1px;height:1px;visibility:hidden;pointer-events:none}
 .ts-extras>*,.ts-tail>*{flex-shrink:0}
 .ts-extras>.bubble.user{max-width:none;margin:0;padding:4px 10px;font-size:13px;line-height:1.45;background:transparent;color:var(--text-2)}
 .ts-extras>.bubble.user>.copy-btn{display:none}
@@ -678,12 +716,14 @@ body.stage-view #dock,body.stage-view #dock:focus-within{background:transparent;
 .ts-answer>.bubble.output{border-left:0;background:transparent;border:0;padding:0}
 .ts-answer>.bubble.output>.copy-btn{top:0;right:0}
 /* The cloud: one chip (steps, calls, a tick per call), the turn view's block behind it. */
-.ts-cloud{display:flex;flex-direction:column;gap:6px}
+/* The footer: the chip at the stage's bottom edge (the cloud's steps open above it, the scroller's last slot). */
+.ts-foot{flex:none;padding:0 14px 10px}
+.ts-foot[hidden],.turn-stage.collapsed .ts-foot{display:none}
 .ts-chip{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;width:100%;padding:6px 10px;border:1px solid var(--border);border-radius:9px;background:transparent;color:var(--text-muted);text-align:left}
 .ts-chip:hover:not(:disabled){filter:none;background:var(--bg-hover)}
 .ts-chip-label{font-size:12.5px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
 .ts-chip-label::before{content:"\25B8  ";color:var(--accent)}
-.ts-cloud.open .ts-chip-label::before{content:"\25BE  "}
+.ts-foot.open .ts-chip-label::before{content:"\25BE  "}
 /* One row whatever the count (the stage's height stays): the newest ticks show, the oldest are cut on the left. */
 .ts-ticks{display:flex;flex-wrap:nowrap;justify-content:flex-end;overflow:hidden;gap:2px;flex:0 1 auto;min-width:0}
 .ts-tick{flex:none}
@@ -702,14 +742,18 @@ body.stage-view #dock,body.stage-view #dock:focus-within{background:transparent;
 .ts-cloud-body[hidden]{display:none}
 .turn-stage .turn-work{border:0;background:transparent;padding:0;border-radius:0}
 .turn-stage .turn-work>summary{display:none}
+/* The ended turn's cloud shows every step: no folds there. */
+.turn-stage .outline-fold{display:none}
+.turn-stage .turn-work.outline>.gen.folded{display:block}
 .turn-stage .ts-cloud-body .gen:first-of-type{margin-top:0;border-top:0}
 @media(max-width:600px){
   .ts-status{padding-left:10px}
   .ts-scroll{padding:8px 10px 10px}
+  .ts-foot{padding:0 10px 10px}
   .ts-defer{display:none}
   .ts-trail-item{max-width:24ch}
 }
-@media (prefers-reduced-motion:reduce){.turn-stage.enter,.ts-arrive,.ts-headline.fresh,.ts-tick.running,.ts-mark,.turn-work:not(.done) .activity-status.running::before{animation:none}.turn-stage.leaving{transition:none}}
+@media (prefers-reduced-motion:reduce){.turn-stage.enter,.ts-arrive,.ts-headline.fresh,.ts-tick.running,.ts-mark,.turn-work:not(.done) .activity-status.running::before{animation:none}.turn-stage.leaving,#center.reserve-easing #history{transition:none}}
 #infoBar{display:flex;padding:8px 14px 10px;border-top:1px solid var(--glass-border);background:transparent;border-radius:0 0 16px 16px;color:var(--text-2);gap:10px;align-items:flex-start;flex-wrap:wrap;flex-shrink:0;transition:opacity 280ms ease}
 #infoBar.visible{display:flex}
 #infoBar .info{flex:1;min-width:0;font-size:13px;line-height:1.4;word-break:break-word;display:flex;flex-direction:column;gap:2px}
@@ -863,10 +907,17 @@ body.has-session #scope .scope-where{display:none}
 /* The open session's title, when no strip card in sight shows it (session_title.js): the bar's middle, cut with an ellipsis; the whole first message in its tooltip. */
 #sessionTitle{flex:1;min-width:0;font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #sessionTitle[hidden]{display:none}
-/* A phone: the title is its own row under the bar, so "chi + · pill · bell" stay one line. */
+/* A phone: the title is its own row under the bar, so "chi + · pill · bell" stay one line. Nothing on that line wraps to a
+   row of its own when the pill's text grows mid-turn ("· 1 waiting"): the scope chip and the pill have a base size of 0 (what
+   a wrapping line counts) and grow to their text, the pill first; the scope chip cuts with an ellipsis before the pill does.
+   The pill drops its session count while it says live or waiting, so the scope chip keeps its words. */
 @media(max-width:600px){
   #topBar{flex-wrap:wrap;row-gap:2px}
   #sessionTitle{flex-basis:100%;order:10;font-size:12px}
+  #scope,#stripShow{flex:1 1 0;min-width:0;max-width:max-content}
+  #stripShow{flex-grow:1000;overflow:hidden;text-overflow:ellipsis}
+  #scope .scope-name{flex-shrink:1;min-width:0}
+  #stripShow:has(.live,.waiting) .pill-count{display:none}
 }
 #notifyBtn{margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;min-height:0;background:transparent;border:1px solid transparent;border-radius:999px;color:var(--text-muted)}
 #notifyBtn[hidden]{display:none}

data/lib/samagotchi/web/public/keep_focus.js

@@ -0,0 +1,24 @@
+// lit reuses a list's nodes by position (vendor/lit-html.js has no keyed
+// repeat): after an item is inserted before the focused one, the focused
+// node holds another item. keepFocus draws with +draw+ and puts the focus
+// back on the item it was on, by its +attr+ (data-id, data-name): the same
+// node inside it (by class), the item itself else; blurred when the item is
+// gone, so no other item keeps it. Nothing is done when the focus wasn't
+// inside +root+.
+export function keepFocus(root, attr, draw) {
+  const doc = root.ownerDocument;
+  const itemOf = (node) => (node && node !== root && root.contains(node) ? node.closest(`[${attr}]`) : null);
+  const was = doc.activeElement;
+  const item = itemOf(was);
+  const key = item && root.contains(item) ? item.getAttribute(attr) : null;
+  const inner = item && was !== item ? was.className : null;
+  draw();
+  if (key === null || itemOf(doc.activeElement)?.getAttribute(attr) === key) return;
+  const target = [...root.querySelectorAll(`[${attr}]`)].find((el) => el.getAttribute(attr) === key);
+  if (!target) {
+    if (root.contains(doc.activeElement)) doc.activeElement.blur?.();
+    return;
+  }
+  const same = inner && [...target.querySelectorAll("*")].find((el) => el.className === inner);
+  (same || target).focus();
+}

data/lib/samagotchi/web/public/lists_view.js

@@ -24,14 +24,13 @@
 //   setStripHidden(hidden)
 
 import { ownerBadge, relativeTime, delegatedBy } from "./format.js";
-import { htmlElement } from "./turn_html.js";
 import { html, nothing, render } from "./vendor/lit-html.js";
 import { cardCtxText, ctxBarTip } from "./ctx.js";
 import { allScopeHref, cardFolder } from "./scope.js";
 import { sessionHash } from "./route.js";
 import { stripColumns, stripShowParts } from "./strip.js";
-import { createFamilyPop, familyChipHtml, familyRowsHtml } from "./families_view.js";
-import { allViewChains, chainChipHtml, chainRowsHtml, chainTitle, foldChains } from "./chains.js";
+import { createFamilyPop, familyChipTemplate, familyRowsTemplate } from "./families_view.js";
+import { allViewChains, chainChipTemplate, chainRowsTemplate, chainTitle, foldChains } from "./chains.js";
 import {
   batchCounts, batchTargets, batchToastText, families, familyId, familyOpen, familyWaits, filterFamilies, heldOrder,
   listedSessions, rangeIds, runBatch, stoppedBadge, waitingBadge, waitingFirst, waitingSearchText,
@@ -122,11 +121,10 @@ export function cardTemplate(s, { deletable = false, archivable = false, selecta
   const pick = selectable ? html`<input type="checkbox" class="card-pick" aria-label=${`Select session ${s.short_id}`} ?checked=${picked}>` : nothing;
   const skip = skipReason ? html`<div class="skip-reason">skipped: ${skipReason}</div>` : nothing;
   const familyWaiting = !!family && familyWaits(family);
-  // The family and chain chips and rows are families_view.js's and
-  // chains.js's string builders (not lit yet): one element each, as nodes.
-  const chain = family?.chain ? htmlElement(chainChipHtml(family, { open: chainOpen })) : nothing;
-  const kids = fam ? htmlElement(familyChipHtml(fam, { open })) : nothing;
-  const famRows = fam && rows && open ? htmlElement(familyRowsHtml(fam, { activeId, matchIds, archivable: !selectable })) : nothing;
+  // The family and chain chips and rows (families_view.js, chains.js).
+  const chain = family?.chain ? chainChipTemplate(family, { open: chainOpen }) : nothing;
+  const kids = fam ? familyChipTemplate(fam, { open }) : nothing;
+  const famRows = fam && rows && open ? familyRowsTemplate(fam, { activeId, matchIds, archivable: !selectable }) : nothing;
   // Its delegates and its chain's other links: the card is .contains-active while one is open.
   const memberIds = [...(fam ? fam.members.map((m) => m.session.id) : []),
     ...(family?.chain ? family.chain.links.map((x) => x.id).filter((id) => id !== s.id) : [])];
@@ -165,10 +163,12 @@ export function stripTileTemplate(count) {
 
 // The hidden strip's pill: "▾ 5 sessions · ● 1 live · ● 1 waiting"
 // (strip.js stripShowParts).
+// The count (and the dot after it) in its own span: a phone's narrow top
+// bar drops it when live or waiting shows (index.html).
 export function stripPillTemplate({ count, live, waiting }) {
-  const liveT = live ? html` · <span class="live"><span class="live-dot" aria-hidden="true"></span>${live}</span>` : nothing;
-  const waitingT = waiting ? html` · <span class="waiting"><span class="waiting-dot" aria-hidden="true"></span>${waiting}</span>` : nothing;
-  return html`<span class="pill-arrow" aria-hidden="true">\u25BE</span> ${count}${liveT}${waitingT}`;
+  const liveT = live ? html`<span class="live"><span class="live-dot" aria-hidden="true"></span>${live}</span>` : nothing;
+  const waitingT = waiting ? html`${live ? " · " : ""}<span class="waiting"><span class="waiting-dot" aria-hidden="true"></span>${waiting}</span>` : nothing;
+  return html`<span class="pill-arrow" aria-hidden="true">\u25BE</span> <span class="pill-count">${count}${live || waiting ? " · " : ""}</span>${liveT}${waitingT}`;
 }
 
 // Draws +template+ into +el+ as new nodes, as an innerHTML write did: no
@@ -274,7 +274,7 @@ export function createListsView(deps) {
     win,
     rowsFor: (id) => {
       const f = stripFamilies.get(id);
-      return f && f.members.length ? familyRowsHtml(f, { activeId: selected() }) : null;
+      return f && f.members.length ? familyRowsTemplate(f, { activeId: selected() }) : null;
     },
     anchorFor: (id) => [...topStripEl.querySelectorAll(".card[data-id] .family-chip")].find((chip) => chip.closest(".card").dataset.id === id) || null,
     onPick: (id) => {
@@ -302,7 +302,7 @@ export function createListsView(deps) {
     win,
     rowsFor: (id) => {
       const f = chainFamilies.get(id);
-      return f?.chain ? chainRowsHtml(f, { activeId: selected() }) : null;
+      return f?.chain ? chainRowsTemplate(f, { activeId: selected() }) : null;
     },
     anchorFor: (id) => (chainFrom ? [...chainFrom.querySelectorAll(".card[data-id] .chain-chip")].find((chip) => chip.closest(".card").dataset.id === id) || null : null),
     onPick: (id) => {

data/lib/samagotchi/web/public/llm_context_chip.js

@@ -12,7 +12,7 @@
 // choice for the next create only (POST /api/sessions' llm_context), never
 // remembered: nothing is sent unless the user sets one.
 
-import { html, nothing } from "./vendor/lit-html.js";
+import { html, nothing, render } from "./vendor/lit-html.js";
 
 export const STRATEGIES = [
   { value: "none", label: "none" },
@@ -149,9 +149,7 @@ export function strategyOptions(chosen) {
   return [...STRATEGIES, { value: chosen, label: chosen }];
 }
 
-function option(value, label, chosen, escapeHtml) {
-  return `<option value="${escapeHtml(value)}"${value === chosen ? " selected" : ""}>${escapeHtml(label)}</option>`;
-}
+const option = (value, label) => html`<option value=${value}>${label}</option>`;
 
 // The popover's form: the values now (each with its source), and the
 // session's own to change.
@@ -161,30 +159,46 @@ export function nowText(summary) {
     `budget ${budget} (${summary.budget_where})`;
 }
 
-// For the new chat (kind NEW_CHAT), +summary+ is the model's and +choice+
-// the values the form shows.
-export function formHtml(summary, escapeHtml, { running = false, kind = SESSION, choice = null } = {}) {
+// The popover's form (a lit-html template). For the new chat (kind
+// NEW_CHAT), +summary+ is the model's and +choice+ the values the form
+// shows; +now+ is the summary its "Now:" line reads (refresh passes a newer
+// one, the rest stays as the form opened, so lit leaves what the user typed
+// alone); +error+ a failed Set's message. The selects take their value as
+// a property (.value), set after their options: +unset+ draws the options
+// alone, the first pass renderForm makes.
+export function formTemplate(summary, { running = false, kind = SESSION, choice = null, now = summary, error = null,
+                                        unset = false } = {}) {
   const fresh = kind === NEW_CHAT;
   const own = fresh ? ownValues({ own: choice }) : ownValues(summary);
   const follow = (field) => (summary[`${field}_source`] === "session" ? "follow the model" : `follow the model (${summary[field]})`);
   const when = fresh ? "For the new chat's first turn on; not remembered for the next one."
     : "From the next turn's start. Turning forget on or off re-reads the whole prompt once.";
-  return `<form class="llmctx-form"><div class="ctx-pop-head"><strong>LLM context</strong>` +
-    `<span class="ctx-pop-kind">${fresh ? NEW_CHAT : "this session"}</span>` +
-    `<button type="button" class="ctx-pop-close" data-act="close" aria-label="Close">×</button></div>` +
-    `<div class="ctx-pop-meta llmctx-now">${escapeHtml(nowText(summary))}</div>` +
-    `<label class="llmctx-field"><span>Strategy</span><select name="strategy">` +
-    option(DEFAULT, follow("strategy"), own.strategy, escapeHtml) +
-    strategyOptions(own.strategy).map((s) => option(s.value, s.label, own.strategy, escapeHtml)).join("") + `</select></label>` +
-    `<label class="llmctx-field"><span>Apply</span><select name="apply">` +
-    option(DEFAULT, follow("apply"), own.apply, escapeHtml) +
-    APPLIES.map((a) => option(a, a, own.apply, escapeHtml)).join("") + `</select></label>` +
-    `<label class="llmctx-field"><span>Budget</span><input name="budget" type="text" inputmode="numeric" autocomplete="off" ` +
-    `placeholder="follow the model (64000, 64k or off)" value="${escapeHtml(own.budget)}"></label>` +
-    `<div class="ctx-pop-error llmctx-error" hidden></div>` +
-    `<div class="ctx-pop-meta">${when}${running ? " A turn is running: it applies after this turn." : ""}</div>` +
-    `<div class="ctx-pop-actions"><button type="button" class="ctx-pop-detach" data-act="reset">follow the model</button>` +
-    `<button type="submit" class="llmctx-set">Set</button></div></form>`;
+  const chosen = (value) => (unset ? nothing : value);
+  return html`<form class="llmctx-form"><div class="ctx-pop-head"><strong>LLM context</strong
+    ><span class="ctx-pop-kind">${fresh ? NEW_CHAT : "this session"}</span
+    ><button type="button" class="ctx-pop-close" data-act="close" aria-label="Close">×</button></div
+    ><div class="ctx-pop-meta llmctx-now">${nowText(now)}</div
+    ><label class="llmctx-field"><span>Strategy</span><select name="strategy" .value=${chosen(own.strategy)}>${
+      option(DEFAULT, follow("strategy"))}${strategyOptions(own.strategy).map((s) => option(s.value, s.label))}</select></label
+    ><label class="llmctx-field"><span>Apply</span><select name="apply" .value=${chosen(own.apply)}>${
+      option(DEFAULT, follow("apply"))}${APPLIES.map((a) => option(a, a))}</select></label
+    ><label class="llmctx-field"><span>Budget</span><input name="budget" type="text" inputmode="numeric" autocomplete="off"
+      placeholder="follow the model (64000, 64k or off)" .value=${own.budget}></label
+    ><div class="ctx-pop-error llmctx-error" ?hidden=${!error}>${error || ""}</div
+    ><div class="ctx-pop-meta">${when}${running ? " A turn is running: it applies after this turn." : ""}</div
+    ><div class="ctx-pop-actions"><button type="button" class="ctx-pop-detach" data-act="reset">follow the model</button
+    ><button type="submit" class="llmctx-set">Set</button></div></form>`;
+}
+
+// Draws the form into +target+ (formTemplate's options). A first draw (no
+// form there yet) makes two passes, the options and then the selects'
+// values: lit sets an element's own bindings before its children, so a
+// select's .value would land before its options exist. A later draw is
+// one pass, and lit writes only what changed since the last (the "Now:"
+// line, the error), never a value the user changed.
+export function renderForm(target, summary, opts = {}) {
+  if (!target.firstElementChild) render(formTemplate(summary, { ...opts, unset: true }), target);
+  render(formTemplate(summary, opts), target);
 }
 
 const EDGE = 16;
@@ -212,7 +226,7 @@ export function popoverPlace(rect, { width, height, innerWidth, innerHeight }) {
 // choice() the pending choice, and choose(next) takes a Set's (null for
 // "follow the model") instead of a command running. id and anchor (the
 // chip's selector) keep the two controls apart.
-export function createLlmContextControl({ el, escapeHtml, summary, session = () => null, running = () => false, run,
+export function createLlmContextControl({ el, summary, session = () => null, running = () => false, run,
                                           kind = SESSION, choice = () => null, choose = null,
                                           id = "llmContextPopover", anchor: anchorSel = ".llmctx-chip",
                                           doc = document, win = window }) {
@@ -226,6 +240,14 @@ export function createLlmContextControl({ el, escapeHtml, summary, session = ()
   // The values the form opened with, and the session it is for.
   let initial = null;
   let openFor = null;
+  // What the open form was drawn from: the summary, the form's options and
+  // the summary its "Now:" line reads. A closed popover is empty, so each
+  // open draws a fresh form (unsent edits are gone).
+  let shown = null;
+  const draw = (changes = {}) => {
+    shown = { ...shown, ...changes };
+    renderForm(pop, shown.data, { ...shown.opts, now: shown.now, error: shown.error });
+  };
 
   function place(anchor) {
     const width = Math.min(360, win.innerWidth - 32);
@@ -244,7 +266,8 @@ export function createLlmContextControl({ el, escapeHtml, summary, session = ()
     if (!data) return;
     initial = fresh ? ownValues({ own: choice() }) : ownValues(data);
     openFor = session();
-    pop.innerHTML = formHtml(data, escapeHtml, { running: running(), kind, choice: choice() });
+    shown = { data, opts: { running: running(), kind, choice: choice() } };
+    draw({ now: data, error: null });
     pop.hidden = false;
     place(anchor);
   }
@@ -253,19 +276,20 @@ export function createLlmContextControl({ el, escapeHtml, summary, session = ()
     pop.hidden = true;
     initial = null;
     openFor = null;
+    shown = null;
+    render(nothing, pop);
   }
 
   function isOpen() { return !pop.hidden; }
 
   // A new summary (a command_ran, a re-read): an open form keeps what the
-  // user typed; only its "Now:" line and Set's state follow. Another
-  // session closes it.
+  // user typed; only its "Now:" line follows (the same template again: lit
+  // writes that line alone). Another session closes it.
   function refresh() {
     if (!isOpen()) return;
     const data = summary();
     if (!data || session() !== openFor) return close();
-    const now = pop.querySelector(".llmctx-now");
-    if (now) now.textContent = nowText(data);
+    draw({ now: data });
   }
 
   el.addEventListener("click", (e) => {
@@ -277,8 +301,7 @@ export function createLlmContextControl({ el, escapeHtml, summary, session = ()
   });
   // An edit makes an error the last Set showed stale.
   const clearError = () => {
-    const error = pop.querySelector(".llmctx-error");
-    if (error && !error.hidden) { error.hidden = true; error.textContent = ""; }
+    if (shown?.error) draw({ error: null });
   };
   pop.addEventListener("input", clearError);
   pop.addEventListener("change", clearError);
@@ -292,9 +315,7 @@ export function createLlmContextControl({ el, escapeHtml, summary, session = ()
       try {
         next = mergeChoice(choice(), values, initial);
       } catch (err) {
-        const error = pop.querySelector(".llmctx-error");
-        error.textContent = err.message;
-        error.hidden = false;
+        draw({ error: err.message });
         return;
       }
       close();

data/lib/samagotchi/web/public/question_card.js

@@ -102,6 +102,17 @@ function relayClosedText(relay, reason) {
   return reason ? `Left open in ${relay.who} (${reason})` : `Left open in ${relay.who}`;
 }
 
+// Whether the card keeps the reply that asked it once resolved: the model's
+// own question and an own approval (their call ran in the asking step). Not
+// the step limit (asked between turns), a hook's question (not asked by a
+// call) or a delegate's relayed approval (the parent's text is about its
+// own call, the card's delegate line says what the child asks).
+export function keepsAskingText(pq) {
+  if (!pq) return false;
+  if (isApproval(pq)) return !relayView(pq);
+  return !pq.kind || pq.kind === "question";
+}
+
 // The line a resolved card shows.
 export function resultText(pq, { answer = null, cancelled = false, reason = "" } = {}) {
   const approval = isApproval(pq);