samagotchi 0.131.0 → 0.133.0

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

@@ -1,12 +1,10 @@
-import {
-  chipModel as llmContextChipModel, choiceWords, createLlmContextControl, NEW_SESSION, withChoice,
-} from "./llm_context_chip.js";
-import { chipModel as thinkingChipModel, createThinkingControl, withChoice as withThinkingChoice } from "./thinking_chip.js";
+import { choiceWords } from "./llm_context_chip.js";
 import { MODEL_KEY, modelsFailedText } from "./model_pick.js";
 import { createModelPicker } from "./model_picker.js";
 import { chainNeighbours, freshLink } from "./chains.js";
 import { readStored } from "./storage.js";
-import { createReviewStartControl, reviewChipModel } from "./review_start.js";
+import { createStartSettings, overrides, settingsLabel } from "./start_settings.js";
+import { createStartToolkit, toolkitLabel, toolkitOverride } from "./start_toolkit.js";
 
 // ── The start page's model picker ──────────────────────────────────────────
 // The hosts' models from GET /api/models, the choice this browser made last
@@ -19,22 +17,29 @@ import { createReviewStartControl, reviewChipModel } from "./review_start.js";
 // default in charge. The search list itself is model_picker.js'; a pick
 // sends the focus to the message box.
 //
-// Beside it, the start page's LLM context and thinking chips: the picked
-// model's values, and a choice for the next new session only (sent with its
-// create, then dropped; never remembered: a reload or opening a session
-// drops it too, a failed create keeps it).
+// Beside it, the start page's ⚙ panel (start_settings.js): thinking, LLM
+// context and review files, each a choice for the next new session only
+// (sent with its create, then dropped; never remembered: a reload or opening
+// a session drops it too, a failed create keeps it). What is set shows as
+// override chips on the row, each opening the panel (a dot on ⚙ on a phone).
+// And its 🧰 list (start_toolkit.js): the new session's toolkit, the same
+// kind of choice (Auto, nothing sent, by default), with its own override
+// chip and dot; hidden without GET /api/models' toolkits.
 export const START_PICK_TITLE = "The model the new session starts on";
 
 // Used by app.js. Elements: +pickEl+ (the picker's button), +panelEl+,
 // +searchEl+, +listEl+, +composerEl+, +centerEl+ (model_picker.js'),
-// +llmContextEl+ / +thinkingEl+ (the two chips).
+// +settingsEl+ (⚙), +thinkingEl+ / +llmContextEl+ / +reviewEl+ (the override
+// chips; no +reviewEl+: no review files), +toolkitBtnEl+ (🧰) and
+// +toolkitEl+ (its override chip; both optional).
 // Hooks: +selected()+ the open session's id or null; +state()+ the open
 // session's fields (session_state.js: model, continues…); +running()+ a turn
 // runs; +sessions()+ the list; +run(line)+ a session command from a control
 // (resolves true once the worker took it); +focusPrompt()+; +toast(text)+;
 // +listModels()+ GET /api/models (data.js). +win+: the page's unload events.
 export function createStartPage({
-  pickEl, panelEl, searchEl, listEl, composerEl, centerEl, llmContextEl, thinkingEl, reviewEl,
+  pickEl, panelEl, searchEl, listEl, composerEl, centerEl, settingsEl, llmContextEl, thinkingEl, reviewEl = null,
+  toolkitBtnEl = null, toolkitEl = null,
   selected, state, running, sessions, run, focusPrompt, toast, listModels,
   doc = globalThis.document, win = globalThis.window,
 }) {
@@ -43,6 +48,10 @@ export function createStartPage({
   let newChatThinking = null;
   // The files that make the new session a review session ([]: an ordinary one).
   let newChatReview = [];
+  // The kit the new session starts on (null: Auto, nothing sent), and the
+  // models payload's toolkits (null: no 🧰).
+  let newChatToolkit = null;
+  let toolkits = null;
   let startPickTitle = START_PICK_TITLE;
   // The fresh link the picker shows (null: the start page, or a session it
   // is hidden in), and a link pick's /model still in flight (a send waits).
@@ -57,65 +66,79 @@ export function createStartPage({
   let pageLeaving = false;
 
   const newChatLlmSummary = () => (selected() || pickEl.hidden ? null : modelPicker.chosenRow()?.llm_context || null);
-  const llmContextNewControl = createLlmContextControl({
-    el: llmContextEl,
-    summary: newChatLlmSummary,
-    kind: NEW_SESSION,
-    choice: () => newChatLlmContext,
-    choose: (next) => {
-      newChatLlmContext = next;
-      renderNewChatLlmContext();
-      focusPrompt();
-    },
-    id: "llmContextNewPopover",
-    anchor: "#llmContextNew",
-  });
   const newChatThinkingSummary = () => (selected() || pickEl.hidden ? null : modelPicker.chosenRow()?.thinking || null);
-  const thinkingNewControl = createThinkingControl({
-    el: thinkingEl,
-    summary: newChatThinkingSummary,
-    kind: NEW_SESSION,
-    choice: () => newChatThinking,
-    choose: (next) => {
-      newChatThinking = next;
-      renderNewChatThinking();
-      focusPrompt();
+  // A pick in the panel keeps the focus there (it stays open; the prompt's
+  // focus would raise a phone's keyboard behind the sheet).
+  const settings = createStartSettings({
+    el: settingsEl,
+    button: settingsEl,
+    openers: [settingsEl, thinkingEl, llmContextEl, reviewEl].filter(Boolean).map((e) => `#${e.id}`).join(", "),
+    thinking: {
+      summary: newChatThinkingSummary,
+      choice: () => newChatThinking,
+      choose: (next) => { newChatThinking = next; renderOverrides(); },
     },
-    id: "thinkingNewPopover",
-    anchor: "#thinkingNew",
-  });
-  const reviewNewControl = reviewEl ? createReviewStartControl({
-    el: reviewEl,
-    choice: () => newChatReview,
-    choose: (next) => {
-      newChatReview = next;
-      renderNewChatReview();
-      focusPrompt();
+    llmContext: {
+      summary: newChatLlmSummary,
+      choice: () => newChatLlmContext,
+      choose: (next) => { newChatLlmContext = next; renderOverrides(); },
     },
+    review: reviewEl ? {
+      choice: () => newChatReview,
+      choose: (next) => { newChatReview = next; renderOverrides(); },
+    } : null,
+    doc,
+    win,
+  });
+  thinkingEl.addEventListener("click", () => settings.toggle("main"));
+  llmContextEl.addEventListener("click", () => settings.toggle("main"));
+  reviewEl?.addEventListener("click", () => settings.toggle("review"));
+  const toolkitList = toolkitBtnEl ? createStartToolkit({
+    el: toolkitBtnEl,
+    button: toolkitBtnEl,
+    openers: [toolkitBtnEl, toolkitEl].filter(Boolean).map((e) => `#${e.id}`).join(", "),
+    toolkits: () => toolkits,
+    choice: () => newChatToolkit,
+    choose: (next) => { newChatToolkit = next; renderOverrides(); },
+    review: () => newChatReview.length > 0,
+    doc,
+    win,
   }) : null;
-  function renderNewChatReview() {
-    if (!reviewEl) return;
-    const chip = reviewChipModel(newChatReview);
-    reviewEl.textContent = chip.text;
-    reviewEl.title = chip.title;
-    reviewEl.classList.toggle("own", chip.own);
-  }
-  function renderNewChatThinking() {
-    const chip = thinkingChipModel(withThinkingChoice(newChatThinkingSummary(), newChatThinking), { kind: NEW_SESSION });
-    thinkingEl.hidden = !chip;
-    if (!chip) return thinkingNewControl.close();
-    thinkingEl.textContent = chip.text;
-    thinkingEl.title = chip.title;
-    thinkingEl.classList.toggle("own", chip.own);
-  }
-  // Hidden without the model's values (the list not in, an older server).
-  function renderNewChatLlmContext() {
-    const chip = llmContextChipModel(withChoice(newChatLlmSummary(), newChatLlmContext), { kind: NEW_SESSION });
-    llmContextEl.hidden = !chip;
-    if (!chip) return llmContextNewControl.close();
-    llmContextEl.textContent = chip.text;
-    llmContextEl.title = chip.title;
-    llmContextEl.classList.toggle("own", chip.own);
+  toolkitEl?.addEventListener("click", () => toolkitList?.toggle());
+  // 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() {
+    const thinkingSummary = newChatThinkingSummary();
+    const llmContextSummary = newChatLlmSummary();
+    const over = overrides({ thinking: newChatThinking, llmContext: newChatLlmContext, review: newChatReview,
+                             thinkingSummary, llmContextSummary });
+    const paint = (chipEl, chip) => {
+      if (!chipEl) return;
+      chipEl.hidden = !chip;
+      chipEl.textContent = chip?.text || "";
+      chipEl.title = chip?.title || "";
+    };
+    paint(thinkingEl, over.thinking);
+    paint(llmContextEl, over.llmContext);
+    paint(reviewEl, over.review);
+    const label = settingsLabel(over);
+    settingsEl.hidden = !(thinkingSummary || llmContextSummary || reviewEl || label.set);
+    settingsEl.classList.toggle("set", label.set);
+    settingsEl.title = label.label;
+    settingsEl.setAttribute("aria-label", label.label);
+    if (settingsEl.hidden) settings.close();
+    else settings.refresh();
+    if (!toolkitBtnEl) return;
+    // 🧰 needs the list; a kit picked before it went (a failed reload of
+    // the models) still shows as its chip, and is still sent.
+    const kit = toolkitLabel(newChatToolkit);
+    paint(toolkitEl, toolkitOverride(newChatToolkit));
+    toolkitBtnEl.hidden = !toolkits;
+    toolkitBtnEl.classList.toggle("set", kit.set);
+    toolkitBtnEl.title = kit.label;
+    toolkitBtnEl.setAttribute("aria-label", kit.label);
+    if (toolkitBtnEl.hidden) toolkitList.close();
+    else toolkitList.refresh();
   }
 
   const modelPicker = createModelPicker({
@@ -129,8 +152,8 @@ export function createStartPage({
     onPick: (name) => {
       if (selected()) pickForLink(name);
       else {
-        renderNewChatLlmContext();
-        renderNewChatThinking();
+        renderOverrides();
+        syncStartPickLabel();
       }
       focusPrompt();
     },
@@ -154,6 +177,12 @@ export function createStartPage({
     pendingPickId = id;
     pickRanEarly = false;
   }
+  function syncStartPickLabel() {
+    const fullName = modelPicker.chosen() || "";
+    pickEl.title = fullName ? `${startPickTitle} · ${fullName}` : startPickTitle;
+    pickEl.setAttribute("aria-label", fullName
+      ? `Model for the new session: ${fullName}` : "Model for the new session");
+  }
   // The button's name, tooltip and label for what the page shows: a fresh
   // link's model, else the start page's (whose choice stays as it is).
   // Toggles the fresh-link class (the CSS shows the button in a session
@@ -179,8 +208,12 @@ export function createStartPage({
       pickEl.title = "The model this link starts on";
       pickEl.setAttribute("aria-label", "Model this link starts on");
     } else {
-      pickEl.title = startPickTitle;
-      pickEl.setAttribute("aria-label", "Model for the new session");
+      if (open) {
+        pickEl.title = startPickTitle;
+        pickEl.setAttribute("aria-label", "Model for the new session");
+      } else {
+        syncStartPickLabel();
+      }
     }
   }
   // A command_ran with a model (stream_handlers.js): while a pick is in
@@ -192,8 +225,8 @@ export function createStartPage({
   // Leaving a session: the start page's remembered model again (no fetch).
   function restoreStartPick() {
     modelPicker.restore(readStored(MODEL_KEY));
-    renderNewChatLlmContext();
-    renderNewChatThinking();
+    syncStartPickLabel();
+    renderOverrides();
   }
   win.addEventListener("beforeunload", () => { pageLeaving = true; });
   win.addEventListener("pagehide", () => { pageLeaving = true; });
@@ -206,53 +239,44 @@ export function createStartPage({
     } catch (e) {
       const text = modelsFailedText(e, { startPage: !selected(), asked, leaving: pageLeaving });
       if (text) toast(text);
+      // ⚙ without the model's rows (its review files only), no 🧰.
+      toolkits = null;
+      renderOverrides();
       return;
     }
+    toolkits = payload?.toolkits?.kits?.length ? payload.toolkits : null;
     const stored = readStored(MODEL_KEY);
-    if (!modelPicker.setModels(payload, stored)) return;
+    if (!modelPicker.setModels(payload, stored)) return renderOverrides();
     startPickTitle = payload.warning ? `${START_PICK_TITLE} · ${payload.warning}` : START_PICK_TITLE;
     pickEl.hidden = false;
     // A fresh link open meanwhile shows its own model again, not the stored one.
     syncModelPick();
-    renderNewChatLlmContext();
-    renderNewChatThinking();
+    renderOverrides();
   }
   // The picker's choice for a create request; nothing (the server's default)
   // while the list is not in.
   function chosenModel() {
     return pickEl.hidden ? undefined : modelPicker.chosen() || undefined;
   }
-  // The create request's own choices (the chips').
+  // The create request's own choices (the ⚙ panel's).
   function newChoices() {
     return { llm_context: choiceWords(newChatLlmContext), thinking: newChatThinking || undefined,
-             review: newChatReview.length ? { subjects: newChatReview } : undefined };
+             review: newChatReview.length ? { subjects: newChatReview } : undefined,
+             toolkit: newChatToolkit || undefined };
   }
   // The choices were for that new session only: a create took them.
   function clearChoices() {
     newChatLlmContext = null;
-    renderNewChatLlmContext();
     newChatThinking = null;
-    renderNewChatThinking();
     newChatReview = [];
-    renderNewChatReview();
+    newChatToolkit = null;
+    renderOverrides();
   }
   // A session opened: the start page's choices were for a new session, they go.
   function dropChoices() {
-    llmContextNewControl.close();
-    if (newChatLlmContext) {
-      newChatLlmContext = null;
-      renderNewChatLlmContext();
-    }
-    thinkingNewControl.close();
-    if (newChatThinking) {
-      newChatThinking = null;
-      renderNewChatThinking();
-    }
-    reviewNewControl?.close();
-    if (newChatReview.length) {
-      newChatReview = [];
-      renderNewChatReview();
-    }
+    settings.close();
+    toolkitList?.close();
+    clearChoices();
   }
 
   return {
@@ -261,11 +285,19 @@ export function createStartPage({
     pendingPick: () => pendingPick,
     // The start page's review files ([]: the new session isn't a review).
     reviewSubjects: () => newChatReview,
-    // Start refused them (400 invalid_review): said in the review form, opened
-    // again. @return whether it was said there
+    // Start refused them (400 invalid_review): said in the ⚙ panel's review
+    // view, opened again. @return whether it was said there
     reviewRefused: (message) => {
-      if (!reviewNewControl || !newChatReview.length) return false;
-      reviewNewControl.refuse(message);
+      if (!reviewEl || !newChatReview.length) return false;
+      settings.refuse(message);
+      return true;
+    },
+    // Start refused the picked kit (400 toolkit_refused): said in the 🧰
+    // list, opened again. Without a pick it is config.yml's default that
+    // is broken: @return false (the caller's alert).
+    toolkitRefused: (message) => {
+      if (!toolkitList || !newChatToolkit || !toolkits) return false;
+      toolkitList.refuse(message);
       return true;
     },
   };

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

@@ -0,0 +1,298 @@
+// The start page's ⚙ panel: the new session's rarely used settings in one
+// place (thinking, LLM context, review files), each a choice for the next
+// create only (start_page.js keeps them; never remembered). A pick applies
+// at once and the panel stays open; a typed budget has its own Set. Rows
+// the picked model has no values for are hidden, but a choice already made
+// is still sent: the panel says so and offers to clear it. The review files
+// are a view of their own (‹ back to the settings).
+//
+// Beside ⚙ on the row, override chips name what is set (overrides(): "think
+// high", "ctx stale", "review: README.md"); on a phone ⚙ carries a dot
+// instead (settingsLabel()).
+
+import { createChipPopover } 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";
+import { html, nothing, render } from "./vendor/lit-html.js";
+
+export const DEFAULT = "default";
+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.
+export function overrides({ thinking = null, llmContext = null, review = [], thinkingSummary = null,
+                            llmContextSummary = null } = {}) {
+  const ctx = contextWords(llmContext);
+  return {
+    thinking: thinking ? {
+      text: `think ${thinking}`,
+      title: thinkingSummary
+        ? `Thinking: ${thinking} for the new session (the model's: ${thinkingSummary.level}). Click to change it.`
+        : `Thinking: ${thinking} for the new session: ${NO_THINKING}. Click to change it.`,
+    } : null,
+    llmContext: ctx ? {
+      text: `ctx ${ctx}`,
+      title: llmContextSummary
+        ? `LLM context: ${ctx} for the new session (the model's: ${llmContextSummary.strategy}). Click to change it.`
+        : `LLM context: ${ctx} for the new session: ${NO_LLM_CONTEXT}. Click to change it.`,
+    } : null,
+    review: review?.length ? reviewChipModel(review) : null,
+  };
+}
+
+// ⚙'s state: whether anything is set (its dot on a phone) and its tooltip
+// and accessible name, which list what is.
+export function settingsLabel(over) {
+  const set = [over.thinking, over.llmContext, over.review].filter(Boolean);
+  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`}>${
+  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="ss-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="ss-anyway ctx-pop-meta">${text}
+  <button type="button" class="ss-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}.
+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="ss-more"><button type="button" class="ss-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"
+        data-act="review-clear">Remove</button>`
+      : html`<button type="button" class="ss-link" data-act="review" title=${reviewChipModel([]).title}>Review files…</button>`}</div>`
+      : nothing
+    }<div class="ctx-pop-meta">${NOTE}</div>`;
+}
+
+// The panel on chip_popover.js' shell, a bottom sheet on a phone. +el+:
+// where ⚙ is (its clicks are delegated); +button+: ⚙ (the panel opens at it,
+// and focus goes back to it whichever opener was clicked); +openers+: the
+// selector of every element that opens it (⚙ and the override chips: a click
+// there is not a click outside). +thinking+ / +llmContext+: {summary(),
+// choice(), choose(next)}; +review+: {choice(), choose(subjects)}, or null
+// (no review row).
+// @return {open(view), toggle(view), close, refresh, refuse(message), isOpen}
+export function createStartSettings({ el, button, openers = `#${button.id}`, thinking, llmContext, review = null,
+                                      doc = document, win = window }) {
+  // "main" or "review"; the disclosure; the context Set's error; the review
+  // form's error and text as typed.
+  let view = "main";
+  let more = false;
+  let error = null;
+  let reviewError = null;
+  let reviewText = null;
+
+  function draw() {
+    if (view === "review") {
+      render(reviewFormTemplate(review.choice(), { error: reviewError, text: reviewText, back: true }), shell.pop);
+    } else {
+      render(panelTemplate({
+        thinking: { summary: thinking.summary(), choice: thinking.choice() },
+        llmContext: { summary: llmContext.summary(), choice: llmContext.choice() },
+        review: review ? review.choice() : null, more, error,
+      }), shell.pop);
+    }
+    shell.replace();
+  }
+
+  // Focus inside on open (the popover sits at the end of <body>, so Tab
+  // from ⚙ wouldn't reach it): the pressed segment of the first row, else
+  // the first button; the review view's text field.
+  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");
+    at?.focus();
+  }
+
+  function switchTo(next) {
+    view = next;
+    draw();
+    if (next === "review") focusInside();
+    else shell.pop.querySelector("[data-act=review]")?.focus();
+  }
+
+  function pickContext(changes) {
+    const initial = ownValues({ own: llmContext.choice() });
+    let next;
+    try {
+      next = mergeChoice(llmContext.choice(), { ...initial, ...changes }, initial);
+    } catch (err) {
+      error = err.message;
+      return draw();
+    }
+    error = null;
+    llmContext.choose(next);
+    draw();
+  }
+
+  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);
+    else if (what === "ctx") return pickContext({ strategy: value });
+    else if (what === "ctx-clear") llmContext.choose(null);
+    else if (what === "ctx-more") more = !more;
+    else if (what === "review") return switchTo("review");
+    else if (what === "back") {
+      reviewError = null;
+      reviewText = null;
+      return switchTo("main");
+    } else if (what === "review-clear" || what === "clear") {
+      review.choose([]);
+      reviewError = null;
+      reviewText = null;
+      if (view === "review") return switchTo("main");
+    } else return;
+    draw();
+  }
+
+  function submit(form) {
+    if (form.classList.contains("ss-ctx-form")) {
+      return pickContext({ apply: form.elements.apply.value, budget: form.elements.budget.value });
+    }
+    const typed = form.elements.subjects?.value || "";
+    const read = readSubjects(typed);
+    if (read.error) {
+      reviewError = read.error;
+      reviewText = typed;
+      return draw();
+    }
+    review.choose(read.subjects);
+    reviewError = null;
+    reviewText = null;
+    switchTo("main");
+  }
+
+  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,
+    show: (_data, opening) => {
+      if (opening) {
+        const choice = llmContext.choice();
+        more = !!(choice?.apply || typeof choice?.budget_tokens === "number");
+      }
+      draw();
+    },
+    onOpen: focusInside,
+    onClose: () => {
+      view = "main";
+      error = null;
+      reviewError = null;
+      reviewText = null;
+    },
+    onSubmit: submit,
+    onAct: act,
+  });
+  // An edit makes the context Set's error stale.
+  shell.pop.addEventListener("input", (e) => {
+    if (error && e.target.closest(".ss-ctx-form")) {
+      error = null;
+      draw();
+    }
+  });
+
+  function open(at = "main") {
+    view = review ? at : "main";
+    if (shell.isOpen()) {
+      draw();
+      focusInside();
+    } else {
+      shell.open(button);
+    }
+  }
+
+  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)),
+    close: () => shell.close(),
+    isOpen: () => shell.isOpen(),
+    // The picked model changed (its default labels, which rows show).
+    refresh: () => { if (shell.isOpen()) draw(); },
+    // Start refused the review files (400 invalid_review): said in the
+    // review view, opened at the files chosen.
+    refuse: (message) => {
+      reviewError = message;
+      reviewText = null;
+      open("review");
+    },
+  };
+}