samagotchi 0.133.0 → 0.134.0

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

@@ -60,6 +60,17 @@ main{flex:1;display:flex;flex-direction:column;gap:16px;padding:16px;overflow:au
 .bubble.output.boxed{overflow:hidden;transition:max-height 360ms ease}
 .bubble.output.revealing>:not(.copy-btn){animation:fadeIn 240ms ease}
 @media (prefers-reduced-motion:reduce){.bubble.output.boxed{transition:none}.bubble.output.revealing>:not(.copy-btn){animation:none}}
+/* A long answer folded by hand (answer_fold.js): the row is the bubble's sibling just before it, styled as a closed turn's steps; folded, the bubble is hidden and the row reads its first line and size; unfolded, a slim "▾ N lines" header close above it. */
+.bubble.output.folded{display:none}
+.answer-fold{display:flex;align-items:baseline;gap:0;align-self:flex-start;max-width:100%;min-width:0;margin:0;padding:3px 10px;font:inherit;font-size:12px;font-weight:500;line-height:1.4;color:var(--text-muted);text-align:left;cursor:pointer;user-select:none;background:transparent;border:1px solid transparent;border-left:3px solid var(--accent-strong);border-radius:6px;transition:background .12s ease}
+.answer-fold:hover{background:var(--bg-panel)}
+.answer-fold:focus-visible{outline:2px solid var(--accent-ring);outline-offset:1px}
+.answer-fold::before{content:"▾\00a0";color:var(--accent);flex:none}
+.answer-fold.folded::before{content:"▸\00a0"}
+.answer-fold:not(.folded){margin-bottom:-8px;padding-top:1px;padding-bottom:1px;border-left-color:transparent}
+.answer-fold-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2);font-size:13px}
+.answer-fold-label:empty{display:none}
+.answer-fold-size{flex:none;white-space:nowrap;font-variant-numeric:tabular-nums}
 /* A gap divider (time_gaps.js): one centred dim line where a quiet stretch passed, never wrapped (a phone at 360 px keeps it on one line). Not a .bubble. */
 .time-gap{align-self:stretch;text-align:center;color:var(--time-gap);font-size:12px;line-height:1.4;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:2px 0;user-select:none}
 .turn-timing{margin-top:8px;color:var(--text-muted);font-size:11px;font-variant-numeric:tabular-nums}
@@ -1121,36 +1132,39 @@ body.has-session.composer-folded #infoBar{border-top-color:transparent}
 .pp-working button{font:inherit;font-size:12px;padding:3px 10px;border-radius:6px;cursor:pointer;background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-border)}
 .pp-working button:disabled{opacity:.7;cursor:progress}
 .pp-link{display:flex;gap:4px}
-/* The start page's ⚙ panel (start_settings.js): rows of segments (a label, then pill buttons with aria-pressed), the context's Apply and budget disclosure, the review row; a bottom sheet on a phone. */
+/* The start page's ⚙ panel (start_settings.js): rows of segments (a label, then pill buttons with aria-pressed), the context's Apply and budget disclosure, the review row; a bottom sheet on a phone. Its classes are sset- (the Stop sheet's are ss-). */
 .start-settings{gap:10px}
 .start-settings .ctx-pop-head strong{font-family:inherit}
-.ss-row{display:flex;align-items:flex-start;gap:10px}
-.ss-label{flex:0 0 64px;font-size:12px;line-height:26px;color:var(--text-muted)}
-.ss-seg{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:4px}
-.ss-seg button{height:26px;min-height:26px;padding:0 9px;border:1px solid var(--border-strong);border-radius:7px;background:transparent;color:var(--text-2);font-size:12px;line-height:24px;white-space:nowrap}
-.ss-seg button:hover{filter:none;color:var(--text);border-color:var(--accent-border)}
-.ss-seg button[aria-pressed="true"]{background:var(--accent-bg);color:var(--accent);border-color:var(--accent-border)}
-.ss-seg button:focus-visible,.ss-link:focus-visible,.ss-back:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
-.ss-more{margin:-4px 0 0 74px}
-.ss-link{padding:2px 4px;border:0;border-radius:5px;background:transparent;color:var(--accent);font-size:12px}
-.ss-link:hover{filter:none;background:var(--accent-bg)}
-.ss-ctx-form{display:flex;flex-direction:column;gap:8px;margin:0 0 0 74px}
-.ss-anyway{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px}
-.ss-rule{width:100%;margin:0;border:0;border-top:1px solid var(--border)}
-.ss-review{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px}
-.ss-review>.ss-link:first-child{margin-left:-4px}
-.ss-review-set{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-size:12.5px}
-.ss-back{margin:0 2px 0 -6px;padding:0 6px;border:0;border-radius:5px;background:transparent;color:var(--text-muted);font-size:18px;line-height:1}
-.ss-back:hover{filter:none;color:var(--text);background:var(--bg-hover)}
+.sset-row{display:flex;align-items:flex-start;gap:10px}
+.sset-label{flex:0 0 64px;font-size:12px;line-height:26px;color:var(--text-muted)}
+.sset-seg{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:4px}
+.sset-seg button{height:26px;min-height:26px;padding:0 9px;border:1px solid var(--border-strong);border-radius:7px;background:transparent;color:var(--text-2);font-size:12px;line-height:24px;white-space:nowrap}
+.sset-seg button:hover{filter:none}
+.sset-seg button[aria-pressed="true"]{background:var(--accent-bg);color:var(--accent);border-color:var(--accent-border)}
+.sset-seg button:focus-visible,.sset-link:focus-visible,.sset-back:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
+.sset-ctx-more{margin:-4px 0 0 74px}
+.sset-link{padding:2px 4px;border:0;border-radius:5px;background:transparent;color:var(--accent);font-size:12px}
+.sset-link:hover{filter:none}
+.sset-ctx-form{display:flex;flex-direction:column;gap:8px;margin:0 0 0 74px}
+.sset-anyway{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px}
+.sset-rule{width:100%;margin:0;border:0;border-top:1px solid var(--border)}
+.sset-review{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px}
+.sset-review>.sset-link:first-child{margin-left:-4px}
+.sset-review-set{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-size:12.5px}
+.sset-back{margin:0 2px 0 -6px;padding:0 6px;border:0;border-radius:5px;background:transparent;color:var(--text-muted);font-size:18px;line-height:1}
+.sset-back:hover{filter:none}
 .start-settings.sheet{border-radius:14px;padding:14px 16px}
-@media(max-width:400px){.ss-row{flex-direction:column;gap:4px}.ss-label{flex:none;line-height:1.4}.ss-more,.ss-ctx-form{margin-left:0}}
-@media(pointer:coarse){.ss-seg button{height:36px;min-height:36px;line-height:34px;padding:0 12px;font-size:13px}.ss-link,.ss-back{min-height:36px}.ss-label{line-height:36px}}
+/* Tints only where a pointer hovers: on a touch screen a tapped control would keep it (the ⚙/🧰 panels' rows and links;
+   older popovers' :hover rules aren't gated yet). */
+@media(hover:hover){.sset-seg button:hover{color:var(--text);border-color:var(--accent-border)}.sset-link:hover{background:var(--accent-bg)}.sset-back:hover{color:var(--text);background:var(--bg-hover)}.st-row:hover{color:var(--text);background:var(--bg-hover)}}
+@media(max-width:400px){.sset-row{flex-direction:column;gap:4px}.sset-label{flex:none;line-height:1.4}.sset-ctx-more,.sset-ctx-form{margin-left:0}}
+@media(pointer:coarse){.sset-seg button{height:36px;min-height:36px;line-height:34px;padding:0 12px;font-size:13px}.sset-link,.sset-back{min-height:36px}.sset-label{line-height:36px}}
 /* The start page's 🧰 list (start_toolkit.js): a row per kit (a check, its name, a muted detail), the checked one accent; a bottom sheet on a phone. */
 .start-toolkit{gap:8px}
 .start-toolkit .ctx-pop-head strong{font-family:inherit}
 .st-rows{display:flex;flex-direction:column;gap:2px;margin:0 -6px}
 .st-row{display:flex;align-items:baseline;gap:8px;width:100%;min-height:30px;padding:5px 8px 5px 6px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--text-2);font-size:13px;text-align:left}
-.st-row:hover{filter:none;color:var(--text);background:var(--bg-hover)}
+.st-row:hover{filter:none}
 .st-row[aria-pressed="true"]{color:var(--accent);background:var(--accent-bg);border-color:var(--accent-border)}
 .st-row:focus-visible{outline:2px solid var(--accent);outline-offset:-1px}
 .st-check{flex:0 0 14px;text-align:center}
@@ -1239,6 +1253,8 @@ body.has-session.composer-folded #infoBar{border-top-color:transparent}
 .ctx-pop-kind{font-size:11px;color:var(--text-muted)}
 .ctx-pop-close{margin-left:auto;padding:0 6px;border:none;background:transparent;color:var(--text-muted);font-size:16px;line-height:1}
 .ctx-pop-close:hover{color:var(--text)}
+/* A finger's × (the other sheet controls are 36-40 px): the negative margins keep the head's height. */
+@media(pointer:coarse){.ctx-pop-close{min-width:36px;min-height:36px;margin:-10px -10px -10px auto;font-size:18px}}
 .ctx-pop-why{color:var(--text)}
 .ctx-pop-hint{font-size:12px;color:var(--accent);word-break:break-all}
 .ctx-pop-summary{padding:6px 8px;border-radius:8px;background:var(--bg-inset);border-left:3px solid var(--accent-border)}
@@ -1644,13 +1660,13 @@ a{color:var(--accent)}
         <div class="actions-col">
           <button type="button" id="modelPick" class="model-pick" title="The model the new session starts on" aria-label="Model for the new session" aria-haspopup="listbox" aria-expanded="false" hidden><span class="model-pick-name"></span></button>
           <div id="composeHint">Enter to start · Shift+Enter for a newline</div>
-          <button type="button" id="thinkingNew" class="llmctx-new think-new" aria-haspopup="dialog" hidden></button>
-          <button type="button" id="llmContextNew" class="llmctx-new" aria-haspopup="dialog" hidden></button>
-          <button type="button" id="reviewNew" class="llmctx-new review-new" aria-haspopup="dialog" hidden></button>
-          <button type="button" id="toolkitNew" class="llmctx-new toolkit-new" aria-haspopup="dialog" hidden></button>
+          <button type="button" id="thinkingNew" class="llmctx-new think-new" aria-haspopup="dialog" aria-expanded="false" hidden></button>
+          <button type="button" id="llmContextNew" class="llmctx-new" aria-haspopup="dialog" aria-expanded="false" hidden></button>
+          <button type="button" id="reviewNew" class="llmctx-new review-new" aria-haspopup="dialog" aria-expanded="false" hidden></button>
+          <button type="button" id="toolkitNew" class="llmctx-new toolkit-new" aria-haspopup="dialog" aria-expanded="false" hidden></button>
           <button id="cancelBtn" title="Cancel the running turn, whoever sent it" style="display:none">Stop turn</button>
-          <button type="button" id="settingsNew" class="icon-btn settings-btn" title="Session settings" aria-label="Session settings" aria-haspopup="dialog" hidden></button>
-          <button type="button" id="toolkitBtn" class="icon-btn toolkit-btn" title="Toolkit" aria-label="Toolkit" aria-haspopup="dialog" hidden></button>
+          <button type="button" id="settingsNew" class="icon-btn settings-btn" title="Session settings" aria-label="Session settings" aria-haspopup="dialog" aria-expanded="false" hidden></button>
+          <button type="button" id="toolkitBtn" class="icon-btn toolkit-btn" title="Toolkit" aria-label="Toolkit" aria-haspopup="dialog" aria-expanded="false" hidden></button>
           <button type="button" id="attachBtn" class="attach-btn" title="Add images (or paste or drop them here)" aria-label="Add images" hidden></button>
           <input type="file" id="attachInput" accept="image/*" multiple hidden>
           <div class="split">

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

@@ -142,10 +142,9 @@ export function nowText(summary) {
 
 // The popover's form (a lit-html template). +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
+// so lit leaves what the user typed alone). 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, now = summary, error = null, unset = false } = {}) {
+export function formTemplate(summary, { running = false, now = summary, unset = false } = {}) {
   const own = ownValues(summary);
   const follow = (field) => (summary[`${field}_source`] === "session" ? "follow the model" : `follow the model (${summary[field]})`);
   const when = "From the next turn's start. Turning forget on or off re-reads the whole prompt once.";
@@ -160,7 +159,6 @@ export function formTemplate(summary, { running = false, now = summary, error =
       option(DEFAULT, follow("apply"))}${APPLIES.map((a) => option(a, a))}</select></span></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>`;
@@ -171,7 +169,7 @@ export function formTemplate(summary, { running = false, now = summary, error =
 // 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.
+// line), 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);
@@ -192,7 +190,7 @@ export function createLlmContextControl({ el, summary, session = () => null, run
   let shown = null;
   const draw = (changes = {}) => {
     shown = { ...shown, ...changes };
-    renderForm(shell.pop, shown.data, { ...shown.opts, now: shown.now, error: shown.error });
+    renderForm(shell.pop, shown.data, { ...shown.opts, now: shown.now });
   };
 
   // A refresh (a newer summary): an open form keeps what the user typed;
@@ -202,7 +200,7 @@ export function createLlmContextControl({ el, summary, session = () => null, run
     if (!opening) return draw({ now: data });
     initial = ownValues(data);
     shown = { data, opts: { running: running() } };
-    draw({ now: data, error: null });
+    draw({ now: data });
   }
 
   function submit(form) {
@@ -223,12 +221,6 @@ export function createLlmContextControl({ el, summary, session = () => null, run
     id, className: "ctx-popover llmctx-popover", width: 360, el, anchor, summary, session, show,
     onClose: () => { initial = null; shown = null; }, onSubmit: submit, onAct: act, doc, win,
   });
-  // An edit makes an error the last Set showed stale.
-  const clearError = () => {
-    if (shown?.error) draw({ error: null });
-  };
-  shell.pop.addEventListener("input", clearError);
-  shell.pop.addEventListener("change", clearError);
 
   return { close: shell.close, refresh: shell.refresh, get open() { return shell.isOpen(); } };
 }

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

@@ -23,6 +23,7 @@
 import { escapeHtml } from "./format.js";
 import { copyText } from "./copy.js";
 import { createRefMenu } from "./ref_menu.js";
+import { revealInHistory } from "./history_reveal.js";
 
 // The data attributes a ref's element carries (its tab stop comes from
 // syncRefTabs, for the viewer).
@@ -416,10 +417,10 @@ export function showInTurn(target, { behavior = smoothScroll() } = {}) {
   return showRow(row, { line: target.line, behavior });
 }
 
-// Shows a tool row: what hides it opened (its step, its turn's block; a
-// view that hides its rows its own way opens on the row's ref:reveal
-// event), its diff (or the read showing +line+) opened, scrolled to the
-// line (else the row) and both flashed. The working set's step tags jump
+// Shows a tool row: what hides it opened (history_reveal.js: its step, its
+// turn's block; a view that hides its rows its own way opens on the row's
+// ref:reveal event), its diff (or the read showing +line+) opened, scrolled
+// to the line (else the row) and both flashed. The working set's step tags jump
 // here. The row.
 export function showRow(row, { line: lineNo = null, behavior = smoothScroll() } = {}) {
   const view = row.ownerDocument.defaultView || globalThis;
@@ -427,9 +428,7 @@ export function showRow(row, { line: lineNo = null, behavior = smoothScroll() }
   row.dispatchEvent(reveal);
   const line = lineNo ? lineIn(row, lineNo) : null;
   const fold = line?.closest("details.activity-diff, details.activity-read") || row.querySelector("details.activity-diff");
-  for (let details = (line || fold || row).closest("details"); details; details = details.parentElement?.closest("details")) {
-    details.open = true;
-  }
+  revealInHistory(line || fold || row);
   if (fold) fold.open = true;
   const scroll = () => (line || row).scrollIntoView?.({ block: "center", behavior });
   if (reveal.detail?.until) reveal.detail.until.then(scroll);

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

@@ -41,7 +41,7 @@ export function reviewChipModel(subjects) {
 // +back+: a ‹ before the heading (data-act="back": the start page's ⚙
 // panel, start_settings.js, whose view this is).
 export function reviewFormTemplate(subjects, { error = null, text = null, back = false } = {}) {
-  return html`<div class="ctx-pop-head">${back ? html`<button type="button" class="ss-back" data-act="back"
+  return html`<div class="ctx-pop-head">${back ? html`<button type="button" class="sset-back" data-act="back"
     aria-label="Back to the settings" title="Back to the settings">‹</button>` : nothing}<strong>Review</strong><span class="ctx-pop-kind">new session</span
     ><button type="button" class="ctx-pop-close" data-act="close" aria-label="Close">×</button></div>
     <div class="ctx-pop-meta" id="reviewNewHelp">The files participants read beside the thread: project paths, relative to this folder,

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

@@ -90,9 +90,9 @@ export function createStartPage({
     doc,
     win,
   });
-  thinkingEl.addEventListener("click", () => settings.toggle("main"));
-  llmContextEl.addEventListener("click", () => settings.toggle("main"));
-  reviewEl?.addEventListener("click", () => settings.toggle("review"));
+  thinkingEl.addEventListener("click", () => settings.toggle("main", thinkingEl));
+  llmContextEl.addEventListener("click", () => settings.toggle("main", llmContextEl));
+  reviewEl?.addEventListener("click", () => settings.toggle("review", reviewEl));
   const toolkitList = toolkitBtnEl ? createStartToolkit({
     el: toolkitBtnEl,
     button: toolkitBtnEl,
@@ -104,7 +104,7 @@ export function createStartPage({
     doc,
     win,
   }) : null;
-  toolkitEl?.addEventListener("click", () => toolkitList?.toggle());
+  toolkitEl?.addEventListener("click", () => toolkitList?.toggle(toolkitEl));
   // The override chips (only what is set) and ⚙: its dot and label say
   // what is set; hidden with nothing to show (no model values, no review).
   function renderOverrides() {

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

@@ -10,7 +10,7 @@
 // high", "ctx stale", "review: README.md"); on a phone ⚙ carries a dot
 // instead (settingsLabel()).
 
-import { createChipPopover } from "./chip_popover.js";
+import { createChipPopover, SHEET_TALL } from "./chip_popover.js";
 import { APPLIES, choiceWords, mergeChoice, ownValues, strategyValue } from "./llm_context_chip.js";
 import { readSubjects, reviewChipModel, reviewFormTemplate } from "./review_start.js";
 import { LEVELS } from "./thinking_chip.js";
@@ -92,8 +92,8 @@ export function settingsLabel(over) {
   return { set: set.length > 0, label: set.length ? `${PANEL_LABEL}: ${set.map((o) => o.text).join(", ")}` : PANEL_LABEL };
 }
 
-const segmentsTemplate = (name, label, segments, act) => html`<div class="ss-row"><span class="ss-label"
-  id=${`ss-${name}-label`}>${label}</span><div class="ss-seg" role="group" aria-labelledby=${`ss-${name}-label`}>${
+const segmentsTemplate = (name, label, segments, act) => html`<div class="sset-row"><span class="sset-label"
+  id=${`sset-${name}-label`}>${label}</span><div class="sset-seg" role="group" aria-labelledby=${`sset-${name}-label`}>${
   segments.map((s) => html`<button type="button" data-act=${`${act}:${s.value}`} aria-pressed=${s.pressed ? "true" : "false"}
     title=${s.title || nothing}>${s.label}</button>`)}</div></div>`;
 
@@ -104,7 +104,7 @@ const option = (value, label, chosen) => html`<option value=${value} ?selected=$
 function contextMoreTemplate(summary, choice, error) {
   const own = ownValues({ own: choice });
   const budget = summary.budget_tokens ? String(summary.budget_tokens) : "off";
-  return html`<form class="ss-ctx-form"><label class="llmctx-field"><span>Apply</span><span class="select-wrap"><select
+  return html`<form class="sset-ctx-form"><label class="llmctx-field"><span>Apply</span><span class="select-wrap"><select
     name="apply">${option(DEFAULT, `${DEFAULT} (${summary.apply})`, own.apply)}${APPLIES.map((a) => option(a, a, own.apply))}</select
     ></span></label><label class="llmctx-field"><span>Budget</span><input name="budget" type="text" inputmode="numeric"
     autocomplete="off" placeholder=${`${DEFAULT} (${budget}): 64000, 64k or off`} .value=${own.budget}></label
@@ -113,8 +113,8 @@ function contextMoreTemplate(summary, choice, error) {
 }
 
 // A choice whose row is hidden (the picked model has no values for it).
-const sentAnywayTemplate = (text, act) => html`<div class="ss-anyway ctx-pop-meta">${text}
-  <button type="button" class="ss-link" data-act=${act}>Clear</button></div>`;
+const sentAnywayTemplate = (text, act) => html`<div class="sset-anyway ctx-pop-meta">${text}
+  <button type="button" class="sset-link" data-act=${act}>Clear</button></div>`;
 
 // The main view. +state+: {thinking: {summary, choice}, llmContext: {summary,
 // choice}, review: subjects or null (no review row), more: the disclosure
@@ -128,15 +128,15 @@ export function panelTemplate({ thinking, llmContext, review = null, more = fals
     ><button type="button" class="ctx-pop-close" data-act="close" aria-label="Close">×</button></div
     >${think ? segmentsTemplate("think", "Thinking", think, "think") : nothing
     }${!think && thinking.choice ? sentAnywayTemplate(`Thinking ${thinking.choice}: ${NO_THINKING}.`, "think-clear") : nothing
-    }${ctx ? html`${segmentsTemplate("ctx", "Context", ctx, "ctx")}<div class="ss-more"><button type="button" class="ss-link"
+    }${ctx ? html`${segmentsTemplate("ctx", "Context", ctx, "ctx")}<div class="sset-ctx-more"><button type="button" class="sset-link"
       data-act="ctx-more" aria-expanded=${more ? "true" : "false"}>Apply and budget ${more ? "▾" : "▸"}</button></div
       >${more ? contextMoreTemplate(llmContext.summary, llmContext.choice, error) : nothing}` : nothing
     }${ctxAnyway ? sentAnywayTemplate(`Context ${ctxAnyway}: ${NO_LLM_CONTEXT}.`, "ctx-clear") : nothing
-    }${review ? html`${think || ctx ? html`<hr class="ss-rule">` : nothing}<div class="ss-review">${reviewChip
-      ? html`<span class="ss-review-set" title=${reviewChip.title}>Review: ${reviewChip.text.replace(/^review: /, "")}</span
-        ><button type="button" class="ss-link" data-act="review">Edit</button><button type="button" class="ss-link"
+    }${review ? html`${think || ctx ? html`<hr class="sset-rule">` : nothing}<div class="sset-review">${reviewChip
+      ? html`<span class="sset-review-set" title=${reviewChip.title}>Review: ${reviewChip.text.replace(/^review: /, "")}</span
+        ><button type="button" class="sset-link" data-act="review">Edit</button><button type="button" class="sset-link"
         data-act="review-clear">Remove</button>`
-      : html`<button type="button" class="ss-link" data-act="review" title=${reviewChipModel([]).title}>Review files…</button>`}</div>`
+      : html`<button type="button" class="sset-link" data-act="review" title=${reviewChipModel([]).title}>Review files…</button>`}</div>`
       : nothing
     }<div class="ctx-pop-meta">${NOTE}</div>`;
 }
@@ -178,7 +178,7 @@ export function createStartSettings({ el, button, openers = `#${button.id}`, thi
   function focusInside() {
     const pop = shell.pop;
     const at = view === "review" ? pop.querySelector("textarea")
-      : pop.querySelector(".ss-seg [aria-pressed=true]") || pop.querySelector(".ss-link, .ss-seg button");
+      : pop.querySelector(".sset-seg [aria-pressed=true]") || pop.querySelector(".sset-link, .sset-seg button");
     at?.focus();
   }
 
@@ -203,10 +203,18 @@ export function createStartSettings({ el, button, openers = `#${button.id}`, thi
     draw();
   }
 
+  function clearContext() {
+    error = null;
+    llmContext.choose(null);
+  }
+
   function act(name) {
     const [what, value] = name.split(/:(.*)/s);
     if (what === "think") thinking.choose(value === DEFAULT ? null : value);
     else if (what === "think-clear") thinking.choose(null);
+    // "default" follows the model for the whole context, apply and budget
+    // too (as Thinking's does): the pressed segment and the chip agree.
+    else if (what === "ctx" && value === DEFAULT) clearContext();
     else if (what === "ctx") return pickContext({ strategy: value });
     else if (what === "ctx-clear") llmContext.choose(null);
     else if (what === "ctx-more") more = !more;
@@ -225,7 +233,7 @@ export function createStartSettings({ el, button, openers = `#${button.id}`, thi
   }
 
   function submit(form) {
-    if (form.classList.contains("ss-ctx-form")) {
+    if (form.classList.contains("sset-ctx-form")) {
       return pickContext({ apply: form.elements.apply.value, budget: form.elements.budget.value });
     }
     const typed = form.elements.subjects?.value || "";
@@ -243,7 +251,9 @@ export function createStartSettings({ el, button, openers = `#${button.id}`, thi
 
   const shell = createChipPopover({
     id: "startSettingsPopover", className: "ctx-popover start-settings", width: 440, el, anchor: `#${button.id}`, openers,
-    summary: () => ({}), sheet: true, label: PANEL_LABEL, doc, win,
+    // Taller than a plain sheet: the Apply and budget fields or the review
+    // form would push the note under the edge of a 60 % one.
+    summary: () => ({}), sheet: true, sheetShare: SHEET_TALL, expands: true, modal: true, label: PANEL_LABEL, doc, win,
     show: (_data, opening) => {
       if (opening) {
         const choice = llmContext.choice();
@@ -263,26 +273,27 @@ export function createStartSettings({ el, button, openers = `#${button.id}`, thi
   });
   // An edit makes the context Set's error stale.
   shell.pop.addEventListener("input", (e) => {
-    if (error && e.target.closest(".ss-ctx-form")) {
+    if (error && e.target.closest(".sset-ctx-form")) {
       error = null;
       draw();
     }
   });
 
-  function open(at = "main") {
+  // +from+: the opener clicked (focus goes back to it), ⚙ by default.
+  function open(at = "main", from = button) {
     view = review ? at : "main";
     if (shell.isOpen()) {
       draw();
       focusInside();
     } else {
-      shell.open(button);
+      shell.open(button, { from });
     }
   }
 
   return {
     open,
     // An override chip's click: opens the panel (on +at+'s view), or closes it.
-    toggle: (at = "main") => (shell.isOpen() ? shell.close() : open(at)),
+    toggle: (at = "main", from = button) => (shell.isOpen() ? shell.close() : open(at, from)),
     close: () => shell.close(),
     isOpen: () => shell.isOpen(),
     // The picked model changed (its default labels, which rows show).

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

@@ -109,7 +109,7 @@ export function createStartToolkit({ el, button, openers = `#${button.id}`, tool
 
   const shell = createChipPopover({
     id: "startToolkitPopover", className: "ctx-popover start-toolkit", width: 380, el, anchor: `#${button.id}`, openers,
-    summary: () => toolkits(), sheet: true, label: LIST_LABEL, doc, win,
+    summary: () => toolkits(), sheet: true, expands: true, modal: true, label: LIST_LABEL, doc, win,
     show: () => draw(),
     onOpen: focusInside,
     onClose: () => { error = null; },
@@ -131,19 +131,20 @@ export function createStartToolkit({ el, button, openers = `#${button.id}`, tool
     rows[Math.max(0, Math.min(rows.length - 1, at + (e.key === "ArrowDown" ? 1 : -1)))].focus();
   });
 
-  function open() {
+  // +from+: the opener clicked (focus goes back to it), 🧰 by default.
+  function open(from = button) {
     if (shell.isOpen()) {
       draw();
       focusInside();
     } else {
-      shell.open(button);
+      shell.open(button, { from });
     }
   }
 
   return {
     open,
     // The override chip's click: opens the list, or closes it.
-    toggle: () => (shell.isOpen() ? shell.close() : open()),
+    toggle: (from = button) => (shell.isOpen() ? shell.close() : open(from)),
     close: () => shell.close(),
     isOpen: () => shell.isOpen(),
     refresh: () => { if (shell.isOpen()) draw(); },

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

@@ -213,8 +213,12 @@ export function turnGroups(items, timing) {
     // A turn that ended with no answer: its notice (the item's index) in
     // the answer's place.
     const ended = g.emptyAnswer == null ? group : { ...group, emptyAnswer: g.emptyAnswer };
+    // Its opening's turn id (a prompt's, or a wake turn's note's): its
+    // answer's key (data-answer-turn). A turn saved before turn ids keeps
+    // its shape.
+    const keyed = typeof g.turnId === "string" && g.turnId ? { ...ended, turnId: g.turnId } : ended;
     // A turn with no merged lines keeps its shape.
-    return g.merged.length ? { ...ended, merged: g.merged } : ended;
+    return g.merged.length ? { ...keyed, merged: g.merged } : keyed;
   });
 }
 

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

@@ -263,21 +263,27 @@ export function userBodyTemplate(content) {
 }
 
 // An answer's bubble (+cls+: a report reply's; +at+: its message's index,
-// data-answer-at): an assistant's rendered markdown (the server's html,
-// sanitized there) set as it is, as the live turn end sets it
+// data-answer-at; +turnId+: its turn's id, data-answer-turn, the key that
+// stays; +replyKey+: a report reply's own key, data-reply-key; a hook's
+// display shown in its place marks it data-answer-display): an
+// assistant's rendered markdown (the server's html, sanitized there) set
+// as it is, as the live turn end sets it
 // (answer_refs.js applyFinalAnswer), else its text, set whole (no lit
 // markers inside: the bubble's nodes are the live one's). Its markdown
 // source is kept for the copy button when it shows rendered html.
-export function answerBubbleTemplate(message, { cls = "", at = null } = {}) {
+export function answerBubbleTemplate(message, { cls = "", at = null, turnId = null, replyKey = null } = {}) {
   const rendered = message?.role === "assistant" && typeof message.html === "string";
   const user = !rendered && message?.role === "user";
   const klass = `bubble output${cls}${rendered ? " markdown" : ""}`;
   const answerAt = at ?? nothing;
   const source = rendered || user ? copySource(message) : nothing;
   const title = timeTitle(message?.at);
-  if (rendered) return html`<div class=${klass} title=${title} data-answer-at=${answerAt} data-copy-source=${source} .innerHTML=${message.html}></div>`;
-  if (user) return html`<div class=${klass} title=${title} data-answer-at=${answerAt} data-copy-source=${source}>${userBodyTemplate(message.content)}</div>`;
-  return html`<div class=${klass} title=${title} data-answer-at=${answerAt} data-copy-source=${source} .textContent=${String(message?.content ?? "")}></div>`;
+  const turn = turnId || nothing;
+  const reply = replyKey || nothing;
+  const display = rendered && typeof message.display === "string" ? "1" : nothing;
+  if (rendered) return html`<div class=${klass} title=${title} data-answer-at=${answerAt} data-answer-turn=${turn} data-reply-key=${reply} data-answer-display=${display} data-copy-source=${source} .innerHTML=${message.html}></div>`;
+  if (user) return html`<div class=${klass} title=${title} data-answer-at=${answerAt} data-answer-turn=${turn} data-reply-key=${reply} data-copy-source=${source}>${userBodyTemplate(message.content)}</div>`;
+  return html`<div class=${klass} title=${title} data-answer-at=${answerAt} data-answer-turn=${turn} data-reply-key=${reply} data-copy-source=${source} .textContent=${String(message?.content ?? "")}></div>`;
 }
 
 // A context note's bubble (background the user or another session pushed

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

@@ -0,0 +1,32 @@
+// A turn's elements in the history, as the page groups them: the siblings
+// after its opening ([data-turn-id], the prompt bubble) up to the next
+// opening, or a context note before it (a wake turn starts with one, and
+// its bubble carries no turn id: what follows it isn't the turn before's).
+// A gap divider just before that end belongs to the next group. One rule
+// for every walker of a turn (verdict_card.js, verify_target.js).
+//
+// Pure DOM reads, so it runs under `node --test` with happy-dom. A module of
+// its own: static JS is cached at unversioned URLs, and a new export on an
+// old module would blank the page.
+
+// The owner's page: a context note ends a turn. The participant page has
+// none (its rule passes null).
+export const NOTE_BOUNDARY = ".bubble.note";
+
+// The elements of the turn +opening+ starts (the [data-turn-id] element, or
+// one inside it), at +container+'s level (default: the opening's parent),
+// in order; a +boundary+ element ends them too. [] when the opening isn't
+// in +container+ or its turn has nothing after it.
+export function turnElements(opening, { container = opening?.parentElement, boundary = NOTE_BOUNDARY } = {}) {
+  let top = opening;
+  while (top && top.parentElement !== container) top = top.parentElement;
+  if (!top) return [];
+  const elements = [];
+  for (let next = top.nextElementSibling; next; next = next.nextElementSibling) {
+    if (next.matches("[data-turn-id]") || next.querySelector("[data-turn-id]")) break;
+    if (boundary && next.matches(boundary)) break;
+    elements.push(next);
+  }
+  while (elements.at(-1)?.classList.contains("time-gap")) elements.pop();
+  return elements;
+}

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

@@ -584,8 +584,9 @@ export function createTurnView({
   // bubble is held at that height, scrolled to its tail, until answerReady()
   // (the rendered markdown landed) or 1.5 s reveals it.
   // +endNote+: the notice of a turn that ended with no answer (app.js
-  // builds it), placed where the answer bubble would go.
-  function promote(gen, { heldHeight = 0, endNote = null } = {}) {
+  // builds it), placed where the answer bubble would go. +turnId+: a
+  // completed turn's id, the bubble's data-answer-turn as a reload's.
+  function promote(gen, { heldHeight = 0, endNote = null, turnId = null } = {}) {
     const entry = genEls.get(gen);
     // No text (an empty answer): no bubble.
     let bubble = null;
@@ -593,6 +594,7 @@ export function createTurnView({
       bubble = document.createElement("div");
       bubble.className = "bubble output";
       bubble.textContent = gen.text;
+      if (turnId) bubble.dataset.answerTurn = turnId;
     }
     // A hidden tab gets no pop: nobody sees it, and its timers are throttled.
     const holding = useHold && heldHeight > 0 && !!bubble && !document.hidden;
@@ -638,8 +640,11 @@ export function createTurnView({
   // Returns the cards that left the block (card.js leavesBlock), detached:
   // app.js puts them after the turn's end line. +endNote+ (a completed turn
   // with no answer): its notice, in the answer's place; left unplaced
-  // with no turn to end (app.js then shows it itself).
-  function turnEnded({ kind, endNote = null }) {
+  // with no turn to end (app.js then shows it itself). +turnId+: the
+  // turn's id (app.js: the live timing's, from turn_started), the key of a
+  // completed turn's answer; the bubble keeps it through the stage's
+  // hand-off (the same node moves).
+  function turnEnded({ kind, endNote = null, turnId = null }) {
     // Once per turn: a second end (a re-dispatched event) would promote again.
     if (!turn || turn.ended) return [];
     const last = model.currentGen(turn);
@@ -656,7 +661,7 @@ export function createTurnView({
     const heldHeight = box ? box.getBoundingClientRect().height : 0;
     if (pendingSteers.length) flushSteers();
     apply(model.turnEnded(turn));
-    if (promoting) promote(last, { heldHeight, endNote });
+    if (promoting) promote(last, { heldHeight, endNote, turnId: kind === "completed" ? turnId : null });
     else if (endNote) placeAnswer([endNote], { plain: false, blockEl });
     const kept = [];
     if (blockEl) {
@@ -859,11 +864,13 @@ export function turnHistoryNodes(items, timing, { thumbs, workingSet = false, no
       : nothing;
   };
   // An answer's bubble; +at+, the message's index, is for its refs
-  // (data-answer-at, gone before the nodes are returned).
-  const answerBubble = (at, cls = "") => answerBubbleTemplate(items[at], { cls, at });
+  // (data-answer-at, gone before the nodes are returned); +turnId+, its
+  // turn's (data-answer-turn: a turn's answer only, not a report reply);
+  // +replyKey+, a report reply's (data-reply-key).
+  const answerBubble = (at, cls = "", turnId = null, replyKey = null) => answerBubbleTemplate(items[at], { cls, at, turnId, replyKey });
   // The timing line after the bubble, not in it: where the live view
   // leaves it at the turn's end.
-  const answerTemplate = (at, timing) => html`${answerBubble(at)}${timing}`;
+  const answerTemplate = (at, timing, turnId = null) => html`${answerBubble(at, "", turnId)}${timing}`;
   // A user's line, labelled when chi brought it in (a delegate report). A
   // `!cmd`'s saved message (the worker's "!(<command>)\n<output>") renders
   // as its command bubble, as live does — not as a user bubble.
@@ -873,12 +880,15 @@ export function turnHistoryNodes(items, timing, { thumbs, workingSet = false, no
     return userBubbleTemplate(m, { label: sourceLabel(m?.source), thumbs: thumbs(m.images), author: authorBadge(m?.author, m?.author_name, m?.participant_mode), ...opts });
   };
   // The first text after a delegate report merged mid-turn, unless it is
-  // the turn's answer (shown anyway).
+  // the turn's answer (shown anyway). Its key (answer_fold.js): the turn's
+  // id and the report's place after the turn's opening (the history only
+  // grows); none in a turn saved before turn ids.
   const reportReplyTemplate = (i, group) => {
     if (items[i]?.source !== "delegate_report") return nothing;
     const j = items.findIndex((m, k) => k > i && m?.role === "assistant" && String(m.content ?? "").trim());
     if (j < 0 || j === group.answer || items.slice(i + 1, j).some((m) => m?.role === "user" && !m.merged)) return nothing;
-    return answerBubble(j, " report-reply");
+    const replyKey = group.turnId ? `${group.turnId}:report:${i - group.user}` : null;
+    return answerBubble(j, " report-reply", null, replyKey);
   };
   const steerTemplate = (i, bubble) => steerRowTemplate({ source: items[i].source, text: items[i].content }, { bubble });
   const parts = [];
@@ -944,7 +954,7 @@ export function turnHistoryNodes(items, timing, { thumbs, workingSet = false, no
     // A turn with no answer (canceled, or running: no record yet) shows its
     // timing after its prompt and steps, where the live view leaves it.
     else if (group.answer === null) parts.push(timingTemplate(group));
-    else parts.push(answerTemplate(group.answer, timingTemplate(group)));
+    else parts.push(answerTemplate(group.answer, timingTemplate(group), group.turnId));
     // A participant's review turn with a reply: Apply under it (the owner's
     // page only: the participant page has its own view). Not under a pair
     // turn: it acted itself.