samagotchi 0.134.0 → 0.136.0

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

@@ -0,0 +1,212 @@
+// The session bar's ⚙ chip and its panel: the open session's thinking,
+// reasoning history and LLM context in one place, as the start page's ⚙
+// panel has them for a new session (settings_panel.js draws both). The chip
+// reads "⚙" alone while the session follows the model for all three, else
+// "⚙" and the session's own in the start page's words ("⚙ think low · ctx
+// stale"; class own, the accent). A pick in the panel runs that row's
+// command with --yes in the session's worker at once (one reply line in the
+// conversation, like a typed /thinking low) and the panel stays open; the
+// pressed segment follows the session's summary when the reply's command_ran
+// lands, never the tap. The summaries are the session's thinking,
+// reasoning_history and llm_context (SettingExplained#summary,
+// LLMContextStrategy::Explained#summary: the worker's snapshot, a
+// command_ran, or the server's own reading of the session file).
+//
+// A new module: the page's modules are cached at unversioned URLs, and a
+// new export of an old module would leave a cached copy without it.
+
+import { createChipPopover, SHEET_TALL } from "./chip_popover.js";
+import { DEFAULT, commandLine as levelLine, segments } from "./level_chip.js";
+import { BUDGET_ERROR, commandLine as contextLine, ownValues, parseBudget } from "./llm_context_chip.js";
+import { CONFIG as REASONING } from "./reasoning_history_chip.js";
+import { contextSegments, contextWords, settingsPanelTemplate } from "./settings_panel.js";
+import { CONFIG as THINKING } from "./thinking_chip.js";
+import { html, nothing, render } from "./vendor/lit-html.js";
+
+export const PANEL_LABEL = "Session settings";
+export const NOTE = "From the next turn's start.";
+export const RUNNING_NOTE = "A turn is running: it applies after this turn.";
+const CONTEXT_COST = "Turning forget on or off re-reads the whole prompt once.";
+
+// A level's own value ("low"), null when it follows the model.
+const levelOwn = (summary) => summary?.own || null;
+
+// The context's own values in a few words ("stale · budget 64000"), null
+// when the session has none.
+const contextOwn = (summary) => (summary?.own ? contextWords(summary.own) : null);
+
+function levelTitle(cfg, summary) {
+  return `${cfg.name}: ${summary.level} (${summary.own ? "this session" : summary.source || "the model's own"})`;
+}
+
+function contextTitle(summary) {
+  const budget = summary.budget_tokens ? `${summary.budget_tokens} tokens` : "off";
+  return `LLM context: ${summary.strategy} (${summary.strategy_where}); apply ${summary.apply} (${summary.apply_where}); ` +
+    `budget ${budget} (${summary.budget_where})`;
+}
+
+// The chip for +summaries+ ({thinking, reasoningHistory, llmContext}, each
+// a summary or null): {text (the own values past ⚙, "" for none), own,
+// title (each value and where it comes from), label (the accessible name:
+// the panel and what is set, settingsLabel's shape)}; null without any
+// summary (an older worker: no chip).
+export function chipModel({ thinking = null, reasoningHistory = null, llmContext = null } = {}) {
+  const think = thinking?.level ? thinking : null;
+  const rh = reasoningHistory?.level ? reasoningHistory : null;
+  const ctx = llmContext?.strategy ? llmContext : null;
+  if (!think && !rh && !ctx) return null;
+  const set = [
+    levelOwn(think) && `${THINKING.prefix} ${levelOwn(think)}`,
+    levelOwn(rh) && `${REASONING.prefix} ${levelOwn(rh)}`,
+    contextOwn(ctx) && `ctx ${contextOwn(ctx)}`,
+  ].filter(Boolean);
+  const lines = [think && levelTitle(THINKING, think), rh && levelTitle(REASONING, rh), ctx && contextTitle(ctx)].filter(Boolean);
+  return {
+    text: set.join(" · "),
+    own: set.length > 0,
+    title: `${lines.join(". ")}. Click to change them for this session.`,
+    label: set.length ? `${PANEL_LABEL}: ${set.join(", ")}` : PANEL_LABEL,
+  };
+}
+
+// The session bar's chip (a lit-html template; info_bar.js), nothing
+// without a summary. ⚙ is drawn as the start page's settings icon (the
+// glyph stays the text); the own values are a span of their own: a phone
+// shows ⚙ with a dot instead (index.html's CSS).
+export function chipTemplate(summaries) {
+  const chip = summaries && chipModel(summaries);
+  if (!chip) return nothing;
+  return html`<button type="button" class=${`model settings-chip${chip.own ? " own" : ""}`} title=${chip.title}
+    aria-label=${chip.label} aria-haspopup="dialog" data-settings-chip><span class="chip-icon sc-gear" aria-hidden="true">⚙</span>${
+    chip.text ? html`<span class="sc-own"> ${chip.text}</span>` : nothing}</button>`;
+}
+
+// The panel's note: when a change applies (after the running turn, while
+// one runs) and what each drawn row's change costs.
+export function noteText({ thinking, reasoningHistory, llmContext, running = false }) {
+  return [NOTE, running ? RUNNING_NOTE : null, thinking ? THINKING.cost : null, reasoningHistory ? REASONING.cost : null,
+          llmContext ? CONTEXT_COST : null].filter(Boolean).join(" ");
+}
+
+// The panel (settings_panel.js settingsPanelTemplate) over the session's
+// summaries: the Thinking row, the Reasoning history row (a chat host's
+// only), the Context row with its Apply and budget disclosure; each row's
+// pressed segment the session's own. +more+: the disclosure open; +error+:
+// its Set's.
+export function panelTemplate({ thinking = null, reasoningHistory = null, llmContext = null, running = false,
+                                more = false, error = null }) {
+  const think = segments(THINKING, thinking, levelOwn(thinking));
+  const rh = segments(REASONING, reasoningHistory, levelOwn(reasoningHistory));
+  const ctx = contextSegments(llmContext, llmContext?.own || null);
+  return settingsPanelTemplate({
+    heading: PANEL_LABEL,
+    kind: "this session",
+    rows: [
+      think ? { name: "think", label: THINKING.name, segments: think, act: "think" } : null,
+      // "Reasoning", the chip's word: "Reasoning history" wraps in the label's column.
+      rh ? { name: "rh", label: "Reasoning", segments: rh, act: "reasoning" } : null,
+      ctx ? { name: "ctx", label: "Context", segments: ctx, act: "ctx",
+              more: { open: more, summary: llmContext, choice: llmContext.own || null, error } } : null,
+    ],
+    note: noteText({ thinking: think, reasoningHistory: rh, llmContext: ctx, running }),
+  });
+}
+
+// What a pick (+act+, a segment's data-act: "think:low", "reasoning:all",
+// "ctx:stale", "ctx:default") runs for +summaries+: the line, or null (the
+// segment pressed already). One field alone (D2): a strategy tap sends the
+// strategy only, the session's own apply and budget stay; the Context
+// row's default is the reset (strategy, apply and budget follow the model
+// again), only when the session has any of its own.
+export function actLine(act, { thinking = null, reasoningHistory = null, llmContext = null } = {}) {
+  const [what, value] = act.split(/:(.*)/s);
+  if (what === "think") return levelLine(THINKING, value, levelOwn(thinking) || DEFAULT);
+  if (what === "reasoning") return levelLine(REASONING, value, levelOwn(reasoningHistory) || DEFAULT);
+  if (what !== "ctx") return null;
+  if (value === DEFAULT) return llmContext?.own ? contextLine() : null;
+  const initial = ownValues(llmContext);
+  return contextLine({ ...initial, strategy: value }, initial);
+}
+
+// The disclosure's Set: the apply rule and the budget as typed, against the
+// session's own; only the field that changed goes. {line} (null: nothing
+// changed) or {error} (a budget chi wouldn't take).
+export function moreLine({ apply, budget }, llmContext) {
+  const typed = String(budget ?? "").trim();
+  if (typed && parseBudget(typed) === null) return { error: BUDGET_ERROR };
+  const initial = ownValues(llmContext);
+  return { line: contextLine({ ...initial, apply, budget: typed }, initial) };
+}
+
+// The chip's panel on chip_popover.js' shell (a bottom sheet on a phone).
+// el: where the chip is drawn (#infoText, info_bar.js: clicks are
+// delegated); summaries(): the open session's {thinking, reasoningHistory,
+// llmContext} (null: no session); session(): its id; running(): a turn
+// runs; run(line): sends the command.
+// @return {close, refresh, open}
+export function createSettingsControl({ el, summaries, session = () => null, running = () => false, run,
+                                        id = "settingsPopover", anchor = "[data-settings-chip]",
+                                        doc = document, win = window }) {
+  // The summaries the open panel is drawn from (each refresh's newer ones),
+  // the disclosure and its Set's error.
+  let shown = null;
+  let more = false;
+  let error = null;
+
+  function draw() {
+    render(panelTemplate({ ...shown, running: running(), more, error }), shell.pop);
+    shell.replace();
+  }
+
+  function show(data, opening) {
+    shown = data;
+    if (opening) {
+      const own = data.llmContext?.own;
+      more = !!(own?.apply || typeof own?.budget_tokens === "number");
+      error = null;
+    }
+    draw();
+  }
+
+  function act(name) {
+    if (name === "ctx-more") {
+      more = !more;
+      return draw();
+    }
+    const line = actLine(name, shown);
+    if (line) run(line);
+  }
+
+  function submit(form) {
+    if (!form.classList.contains("sset-ctx-form")) return;
+    const result = moreLine({ apply: form.elements.apply.value, budget: form.elements.budget.value }, shown.llmContext);
+    error = result.error || null;
+    draw();
+    if (result.line) run(result.line);
+  }
+
+  // Focus inside on open (the popover sits at the end of <body>): the
+  // pressed segment of the first row.
+  function focusInside() {
+    shell.pop.querySelector(".sset-seg [aria-pressed=true]")?.focus();
+  }
+
+  const present = () => {
+    const data = summaries();
+    return data && chipModel(data) ? data : null;
+  };
+  const shell = createChipPopover({
+    id, className: "ctx-popover start-settings session-settings", width: 440, el, anchor, summary: present, session,
+    show, sheet: true, sheetShare: SHEET_TALL, modal: true, label: PANEL_LABEL, onOpen: focusInside,
+    onClose: () => { shown = null; error = null; }, onSubmit: submit, onAct: act, doc, win,
+  });
+  // An edit makes the disclosure Set's error stale.
+  shell.pop.addEventListener("input", (e) => {
+    if (error && e.target.closest(".sset-ctx-form")) {
+      error = null;
+      draw();
+    }
+  });
+
+  return { close: shell.close, refresh: shell.refresh, get open() { return shell.isOpen(); } };
+}

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

@@ -0,0 +1,121 @@
+// The settings panel's rows, drawn by the start page's ⚙ panel
+// (start_settings.js) over a new session's choices and by the session bar's
+// (settings_chip.js) over the open session's own: rows of segments
+// (Thinking, Context), the Context row's Apply and budget disclosure, a
+// line for a choice whose row is hidden, the review files' line. The caller
+// passes the rows it draws (settingsPanelTemplate's +rows+) and applies the
+// picks itself; the segments' data-act ("think:low", "ctx:stale",
+// "ctx-more") is the same for every caller.
+
+import { APPLIES, choiceWords, ownValues, strategyValue } from "./llm_context_chip.js";
+import { DEFAULT, followSegment, segments } from "./level_chip.js";
+import { reviewChipModel } from "./review_start.js";
+import { CONFIG as THINKING } from "./thinking_chip.js";
+import { html, nothing } from "./vendor/lit-html.js";
+
+export { DEFAULT };
+
+const STRATEGIES = [
+  { value: "none", label: "none" },
+  { value: "stale", label: "stale" },
+  { value: "stale,forget", label: "stale + forget", title: "stale + forget (experimental)" },
+];
+
+// The Thinking row's segments (level_chip.js segments over thinking_chip.js'
+// levels): the model's own level first ("default (high)"; "default" while
+// the session has its own), then the levels;
+// the pressed one is the choice. null without the model's thinking (the row
+// is hidden).
+export function thinkingSegments(summary, choice) {
+  return segments(THINKING, summary, choice);
+}
+
+// Whether the summary's +field+ (strategy, apply, budget) is the session's
+// own: the value in force is then not the model's, so a default label
+// doesn't name it.
+const ownField = (summary, field) => summary?.[`${field}_source`] === "session";
+
+// The Context row's segments over the strategies (a choice that isn't one
+// of them, a newer chi's layer, is added); null without the model's
+// llm_context (the row is hidden).
+export function contextSegments(summary, choice) {
+  if (!summary?.strategy) return null;
+  const pressed = Array.isArray(choice?.strategy) ? strategyValue(choice.strategy) : DEFAULT;
+  const list = STRATEGIES.some((s) => s.value === pressed) || pressed === DEFAULT ? STRATEGIES
+    : [...STRATEGIES, { value: pressed, label: pressed }];
+  return [followSegment(summary.strategy, ownField(summary, "strategy")), ...list]
+    .map((s) => ({ ...s, pressed: s.value === pressed }));
+}
+
+// The context choice in a few words ("stale · budget 64000"), or null.
+export function contextWords(choice) {
+  const words = choiceWords(choice);
+  if (!words) return null;
+  return [words.strategy, words.apply && `apply ${words.apply}`, words.budget && `budget ${words.budget}`]
+    .filter(Boolean).join(" · ");
+}
+
+export const segmentsTemplate = (name, label, segs, 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`}>${
+  segs.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>`;
+
+const option = (value, label, chosen) => html`<option value=${value} ?selected=${value === chosen}>${label}</option>`;
+
+// The disclosure's fields: the apply rule and the budget, with their own
+// Set (a typed budget needs a commit) and mergeChoice's error under them.
+// Each default names the model's value, unless the session set its own
+// (the summary's value is the session's then).
+export function contextMoreTemplate(summary, choice, error) {
+  const own = ownValues({ own: choice });
+  const budget = summary.budget_tokens ? String(summary.budget_tokens) : "off";
+  const apply = ownField(summary, "apply") ? DEFAULT : `${DEFAULT} (${summary.apply})`;
+  const budgetDefault = ownField(summary, "budget") ? DEFAULT : `${DEFAULT} (${budget})`;
+  return html`<form class="sset-ctx-form"><label class="llmctx-field"><span>Apply</span><span class="select-wrap"><select
+    name="apply">${option(DEFAULT, 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=${`${budgetDefault}: 64000, 64k or off`} .value=${own.budget}></label
+    ><div class="ctx-pop-error" role="alert" ?hidden=${!error}>${error || ""}</div
+    ><div class="ctx-pop-actions"><button type="submit" class="llmctx-set">Set</button></div></form>`;
+}
+
+// A choice whose row is hidden (the picked model has no values for it).
+export 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>`;
+
+// One of the panel's rows, null drawing nothing:
+//   {name, label, segments, act}: a row of segments (segmentsTemplate);
+//     with +more+ ({open, summary, choice, error}) the Apply and budget
+//     disclosure under it, its fields while open (contextMoreTemplate)
+//   {anyway, act}: the line for a choice whose row is hidden, its Clear
+//     button's data-act (sentAnywayTemplate)
+function rowTemplate(row) {
+  if (!row) return nothing;
+  if (row.anyway) return sentAnywayTemplate(row.anyway, row.act);
+  const { more } = row;
+  return html`${segmentsTemplate(row.name, row.label, row.segments, row.act)}${more ? html`<div class="sset-ctx-more"
+    ><button type="button" class="sset-link" data-act="ctx-more" aria-expanded=${more.open ? "true" : "false"}>Apply and budget ${
+      more.open ? "▾" : "▸"}</button></div>${more.open ? contextMoreTemplate(more.summary, more.choice, more.error) : nothing}`
+    : nothing}`;
+}
+
+// The review files' line: the files set (Edit, Remove), else Review files….
+function reviewTemplate(review, ruled) {
+  const chip = review.length ? reviewChipModel(review) : null;
+  return html`${ruled ? html`<hr class="sset-rule">` : nothing}<div class="sset-review">${chip
+    ? html`<span class="sset-review-set" title=${chip.title}>Review: ${chip.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="sset-link" data-act="review" title=${reviewChipModel([]).title}>Review files…</button>`}</div>`;
+}
+
+// The panel: its heading (+kind+ beside it, or none) and close button, the
+// +rows+ (rowTemplate's), the review files' line when +review+ is a list
+// (null: no review line; a rule above it when a row of segments is drawn),
+// and the +note+.
+export function settingsPanelTemplate({ heading, kind = null, rows = [], review = null, note }) {
+  const segmented = rows.some((row) => row?.segments);
+  return html`<div class="ctx-pop-head"><strong>${heading}</strong>${kind ? html`<span class="ctx-pop-kind">${kind}</span>` : nothing
+    }<button type="button" class="ctx-pop-close" data-act="close" aria-label="Close">×</button></div
+    >${rows.map(rowTemplate)}${review ? reviewTemplate(review, segmented) : nothing}<div class="ctx-pop-meta">${note}</div>`;
+}

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

@@ -0,0 +1,26 @@
+// A `!cmd`'s saved user message: the worker appends "!(<command>)\n<output>"
+// for the next turn (session_commands.rb, no turn id, no time). The history
+// draws it as its command bubble (turn_html.js) and the reload's turns
+// leave it out (timing.js turnGroups: a group of its own, no steps, no
+// timing). Pure, no imports: timing.js and turn_html.js both read it, and
+// turn_html.js imports timing.js. A module of its own: static JS is cached
+// at unversioned URLs, and a new export on an old module would blank the
+// page.
+
+// Its command line and its output, or null when the content is any other
+// message. The command sits on the first line inside `!(` `)`; the output
+// is everything after that first newline. A message that merely starts
+// with "!" or "!(" without the newline shape is a plain message.
+export function shellCommandMessage(content) {
+  const text = String(content ?? "");
+  const match = text.match(/^!\((.*)\)\n([\s\S]*)$/);
+  if (!match) return null;
+  return { line: `!${match[1]}`, text: match[2] };
+}
+
+// A history item that is a `!cmd`'s record, not a prompt: a user message of
+// that shape with no turn id (a prompt saves its turn's; session_chain.rb
+// reads the record the same way).
+export function isShellCommandItem(item) {
+  return item?.role === "user" && !item.turn_id && shellCommandMessage(item.content) !== null;
+}

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

@@ -1,4 +1,4 @@
-// The stage view's pure parts (web.view: stage): what the live slots show
+// The stage's pure parts (stage_view.js): what the live slots show
 // for a turn (turn_model.js's), when a finished turn hands off into the
 // history, and in what order its pieces go there. No DOM, so `node --test`
 // covers the rules; stage_view.js draws them.
@@ -128,7 +128,7 @@ export function miniToolText({ collapsed, tool }) {
 }
 
 // While the first step has no thinking and no tool rows the turn is plain:
-// its text streams in the stage's answer slot, as the turn view's
+// its text streams in the stage's answer slot, as the turn block's
 // chrome-less block streams like a bubble.
 export function isPlain(turn) {
   if (!turn || turn.ended || turn.gens.length > 1) return false;
@@ -137,7 +137,7 @@ export function isPlain(turn) {
 }
 
 const END_PHASES = { completed: "answered", canceled: "canceled" };
-// A completed turn whose model returned nothing (the turn view's notice).
+// A completed turn whose model returned nothing (the turn block's notice).
 const NO_ANSWER = "no answer";
 
 // What the live slots show for +turn+:
@@ -224,7 +224,7 @@ export function handOffDue({ ended, pending, inUse, quietSinceMs, nowMs }) {
   return { due: nowMs - since >= QUIET_MS, quietSinceMs: since };
 }
 
-// A handed-off turn's nodes in the order the turn view leaves them: the
+// A handed-off turn's nodes in the order the turn block leaves them: the
 // prompt bubble (none for a reminder turn), the block, its working set's
 // footprint line (web.working_set), the extras in arrival order, the
 // answer's pieces, the timing line, the end line, the kept cards, then the

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

@@ -1,21 +1,20 @@
-// The stage view of a running turn (web.view: stage): the active turn pinned
+// The stage of a running turn (the page's view of it): the active turn pinned
 // above the composer, its own card floating over the dock's (out of the
 // dock's flow: its height never moves the composer). It shows only
 // what happens now in fixed slots (a status row, the prompt, a two-line
 // headline, the running tool, a one-line trail of the last calls), the
 // cards and rows that arrive meanwhile in their own capped scroller, the
 // answer, and a chip with one tick per tool call, the stage's footer (no
-// content above it can push it away): the "cloud", the turn view's block
-// (turn_view.js) reused as is, opens above it as the scroller's last slot,
+// content above it can push it away): the "cloud", the turn block
+// (turn_block.js) reused as is, opens above it as the scroller's last slot,
 // newest step first while the turn runs. When the turn has ended and the stage is not
-// in use, everything moves into the history in the turn view's order (the
-// hand-off), so a handed-off turn reads like the turn view's and like its
-// reload. Slots are patched in place, never rebuilt from HTML: a selection
+// in use, everything moves into the history in the turn block's order (the
+// hand-off), so a handed-off turn reads like its reload. Slots are patched in place, never rebuilt from HTML: a selection
 // and annotate survive. The rules are pure in stage_model.js; the live
 // slots are drawn by stage_slots.js, the cap and the held height are
 // stage_frame.js's, and the in-use watch that times the hand-off is
 // stage_watch.js's.
-import { createTurnView } from "./turn_view.js";
+import { createTurnBlock } from "./turn_block.js";
 import { chipLabelText, flashOf, handOffDue, handOffOrder, headlineOf, isPlain, liveSlots, MARKS, miniToolText, placeFor, placeKind, QUEUED_CHILDREN, stepSlotText } from "./stage_model.js";
 import { createStageSlots, node } from "./stage_slots.js";
 import { createStageFrame, reducedMotion } from "./stage_frame.js";
@@ -60,7 +59,7 @@ function readCollapsed() {
 // page's working set (working_set_view.js, web.working_set; null: off): its
 // rail in the live slots, its footprint at the hand-off.
 export function createStageView({
-  historyEl, appendToHistory, isNearBottom: historyNearBottom, sawText, sessionId, dockEl, centerEl, taskStop = null,
+  historyEl, isNearBottom: historyNearBottom, sawText, sessionId, dockEl, centerEl, taskStop = null,
   renderMarkdown, linkRefs, workingSet = null,
 }) {
   // The dock becomes a clear column: the stage's card, then the composer's
@@ -182,9 +181,8 @@ export function createStageView({
   let arrived = null;
   let cardInSight = true;
 
-  const view = createTurnView({
+  const view = createTurnBlock({
     historyEl,
-    appendToHistory,
     sawText,
     sessionId,
     // The newest step is on top of the cloud: "near the bottom" is near its top.
@@ -199,8 +197,6 @@ export function createStageView({
       answer.append(...pieces);
       showAnswerTop();
     },
-    useHold: false,
-    newestFirst: true,
     taskStop,
     onChange: () => scheduleRefresh(),
     onThinkingLine: (text) => {
@@ -305,7 +301,7 @@ export function createStageView({
       const host = plain ? answer : cloudBody;
       if (blockEl.parentNode !== host) host.appendChild(blockEl);
     }
-    // The turn view closes its block at the end; the cloud shows its steps.
+    // The turn block closes at the end; the cloud shows its steps.
     if (blockEl && blockEl.parentNode === cloudBody) blockEl.open = true;
     const narration = gen?.text ? headlineOf(gen.text, gen.textDone || gen.closed) : "";
     const thinking = thinkingLine && thinkingLine.step === turn.gens.length ? thinkingLine.text : "";
@@ -626,7 +622,7 @@ export function createStageView({
   }
 
   // The hand-off: everything the stage holds goes into the history's end in
-  // the turn view's order (prompt, block (chronological; its outline open,
+  // the turn block's order (prompt, block (chronological; its outline open,
   // else collapsed), extras, answer, timing line, then the end line and
   // what came after the end). The turn is released at once; the stage
   // slides away under the composer still drawn (a transform: nothing on the
@@ -668,7 +664,7 @@ export function createStageView({
     const fold = folding;
     if (!fold) return;
     folding = null;
-    // Closed, unless it is an outline (turn_view.js outlineBlock): the
+    // Closed, unless it is an outline (turn_block.js outlineBlock): the
     // history reads its narrated steps without a click.
     if (fold.block) fold.block.open = fold.block.classList.contains("outline");
     historyEl.querySelector(":scope > .hint")?.remove();
@@ -764,7 +760,6 @@ export function createStageView({
     answerReady() {
       settled = true;
       clearTimeout(settleTimer);
-      view.answerReady();
     },
     containsLive: (el) => view.containsLive(el),
     askingText: () => view.askingText(),

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

@@ -11,57 +11,21 @@
 // instead (settingsLabel()).
 
 import { createChipPopover, SHEET_TALL } from "./chip_popover.js";
-import { APPLIES, choiceWords, mergeChoice, ownValues, strategyValue } from "./llm_context_chip.js";
+import { mergeChoice, ownValues } from "./llm_context_chip.js";
 import { readSubjects, reviewChipModel, reviewFormTemplate } from "./review_start.js";
-import { LEVELS } from "./thinking_chip.js";
-import { html, nothing, render } from "./vendor/lit-html.js";
-
-export const DEFAULT = "default";
+import {
+  contextSegments, contextWords, DEFAULT, settingsPanelTemplate, thinkingSegments,
+} from "./settings_panel.js";
+import { render } from "./vendor/lit-html.js";
+
+// The panel's rows (settings_panel.js), named here too: the start page and
+// its specs read them from this module.
+export { contextSegments, contextWords, DEFAULT, thinkingSegments };
 export const NOTE = "For this new session only.";
 export const PANEL_LABEL = "Session settings";
 const NO_THINKING = "the picked model has no thinking setting; it is sent anyway";
 const NO_LLM_CONTEXT = "the picked model has no LLM context values; it is sent anyway";
 
-const STRATEGIES = [
-  { value: "none", label: "none" },
-  { value: "stale", label: "stale" },
-  { value: "stale,forget", label: "stale + forget", title: "stale + forget (experimental)" },
-];
-
-// The first segment: follow the model, its value in brackets ("default
-// (high)"; a model with no level of its own, "default" alone).
-const followSegment = (value) => ({ value: DEFAULT, label: value === DEFAULT ? DEFAULT : `${DEFAULT} (${value})`,
-                                    title: `Follow the model (${value})` });
-
-// The Thinking row's segments: the model's own level first ("default
-// (high)"), then the levels; the pressed one is the choice. null without
-// the model's thinking (the row is hidden).
-export function thinkingSegments(summary, choice) {
-  if (!summary?.level) return null;
-  const pressed = choice || DEFAULT;
-  return [followSegment(summary.level),
-    ...LEVELS.map((level) => ({ value: level, label: level }))].map((s) => ({ ...s, pressed: s.value === pressed }));
-}
-
-// The Context row's segments over the strategies (a choice that isn't one
-// of them, a newer chi's layer, is added); null without the model's
-// llm_context (the row is hidden).
-export function contextSegments(summary, choice) {
-  if (!summary?.strategy) return null;
-  const pressed = Array.isArray(choice?.strategy) ? strategyValue(choice.strategy) : DEFAULT;
-  const list = STRATEGIES.some((s) => s.value === pressed) || pressed === DEFAULT ? STRATEGIES
-    : [...STRATEGIES, { value: pressed, label: pressed }];
-  return [followSegment(summary.strategy), ...list].map((s) => ({ ...s, pressed: s.value === pressed }));
-}
-
-// The context choice in a few words ("stale · budget 64000"), or null.
-export function contextWords(choice) {
-  const words = choiceWords(choice);
-  if (!words) return null;
-  return [words.strategy, words.apply && `apply ${words.apply}`, words.budget && `budget ${words.budget}`]
-    .filter(Boolean).join(" · ");
-}
-
 // The row's override chips: what is set for the new session, each
 // {text, title} or null. A choice the picked model shows no row for (its
 // summary is null) stays, its title saying it is sent anyway.
@@ -92,53 +56,26 @@ 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="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>`;
-
-const option = (value, label, chosen) => html`<option value=${value} ?selected=${value === chosen}>${label}</option>`;
-
-// The disclosure's fields: the apply rule and the budget, with their own
-// Set (a typed budget needs a commit) and mergeChoice's error under them.
-function contextMoreTemplate(summary, choice, error) {
-  const own = ownValues({ own: choice });
-  const budget = summary.budget_tokens ? String(summary.budget_tokens) : "off";
-  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
-    ><div class="ctx-pop-error" role="alert" ?hidden=${!error}>${error || ""}</div
-    ><div class="ctx-pop-actions"><button type="submit" class="llmctx-set">Set</button></div></form>`;
-}
-
-// A choice whose row is hidden (the picked model has no values for it).
-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
-// open, error: the context Set's}.
+// The main view (settings_panel.js settingsPanelTemplate over the new
+// session's choices). +state+: {thinking: {summary, choice}, llmContext:
+// {summary, choice}, review: subjects or null (no review row), more: the
+// disclosure open, error: the context Set's}.
 export function panelTemplate({ thinking, llmContext, review = null, more = false, error = null }) {
   const think = thinkingSegments(thinking.summary, thinking.choice);
   const ctx = contextSegments(llmContext.summary, llmContext.choice);
   const ctxAnyway = !ctx && contextWords(llmContext.choice);
-  const reviewChip = review?.length ? reviewChipModel(review) : null;
-  return html`<div class="ctx-pop-head"><strong>New session</strong
-    ><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="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="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="sset-link" data-act="review" title=${reviewChipModel([]).title}>Review files…</button>`}</div>`
-      : nothing
-    }<div class="ctx-pop-meta">${NOTE}</div>`;
+  return settingsPanelTemplate({
+    heading: "New session",
+    rows: [
+      think ? { name: "think", label: "Thinking", segments: think, act: "think" } : null,
+      !think && thinking.choice ? { anyway: `Thinking ${thinking.choice}: ${NO_THINKING}.`, act: "think-clear" } : null,
+      ctx ? { name: "ctx", label: "Context", segments: ctx, act: "ctx",
+              more: { open: more, summary: llmContext.summary, choice: llmContext.choice, error } } : null,
+      ctxAnyway ? { anyway: `Context ${ctxAnyway}: ${NO_LLM_CONTEXT}.`, act: "ctx-clear" } : null,
+    ],
+    review,
+    note: NOTE,
+  });
 }
 
 // The panel on chip_popover.js' shell, a bottom sheet on a phone. +el+: