samagotchi 0.42.0 → 0.44.0

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

@@ -21,7 +21,10 @@ import {
   addContext,
 } from "./data.js";
 import { createContextChips } from "./context_chips.js";
-import { chipHtml as llmContextChipHtml, createLlmContextControl } from "./llm_context_chip.js";
+import {
+  chipHtml as llmContextChipHtml, chipModel as llmContextChipModel, choiceWords, createLlmContextControl, NEW_CHAT,
+  withChoice,
+} from "./llm_context_chip.js";
 import { renderStable } from "./stable_html.js";
 import { createShownTexts } from "./shown_texts.js";
 import { MODEL_KEY } from "./model_pick.js";
@@ -39,7 +42,7 @@ import { parsePresets } from "./annotate_presets.js";
 import { createAnnotateBar } from "./annotate_bar.js";
 import { COPY_SOURCE_ATTR, copySource, copyText, installCopy, showsAnswer } from "./copy.js";
 import { routeChunk } from "./chunk_router.js";
-import { extractCtxPct, savedCtxPct, cardCtxText, generationTokens, lastSpeedText, speedText, tokensTipText } from "./ctx.js";
+import { extractCtxPct, savedCtxPct, cardCtxText, ctxBarText, generationTokens, lastSpeedText, speedText, tokensTipText } from "./ctx.js";
 import { createQuestionCards } from "./question_cards.js";
 import { cardClass, cardInnerHtml, cardPlace, isCard, isNoticeCard, noticeInnerHtml, shownElsewhere, splitSnapshotCards, turnNoticePlace } from "./card.js";
 import { PROMPT_LINE_PX, PROMPT_MIN_PX, gripFloor, promptHeight } from "./composer_size.js";
@@ -57,7 +60,7 @@ import {
 } from "./timing.js";
 import { createLiveTurn } from "./live_turn.js";
 import { DONE_MS, applyInitEvent, dropDone, initRowHtml, newInitTasks, seedInitTasks } from "./init_row.js";
-import { clientLabel, commandView, isReportClient, displayWait, dropEarlyRestores, emptyRetryLine, hookNoticeLabel, initWaitLine, isOwn, sessionCommandLine, keepEarlyRestore, newClientId, noticeLine, promptOps, reminderText, restoreAction, composerAfterAck, restoreOnAck, replaysDrawnTurn, retryStatusLine, snapshotEvents, steerCutLine, startPageReplyOrHint, turnOutput, unknownCommandHint, webLocalReply, workerGoneText } from "./turn_events.js";
+import { clientLabel, commandView, isReportClient, displayWait, dropEarlyRestores, emptyRetryLine, hookNoticeLabel, initWaitLine, isOwn, llmContextHover, llmContextLine, sessionCommandLine, keepEarlyRestore, newClientId, noticeLine, promptOps, reminderText, restoreAction, composerAfterAck, restoreOnAck, replaysDrawnTurn, retryStatusLine, snapshotEvents, steerCutLine, startPageReplyOrHint, turnOutput, unknownCommandHint, webLocalReply, workerGoneText } from "./turn_events.js";
 
 const $ = (s) => document.querySelector(s);
 const topStripEl = $("#topStrip");
@@ -86,6 +89,36 @@ const llmContextControl = createLlmContextControl({
   running: () => liveTurn.running,
   run: (line) => runSessionCommand(line),
 });
+// The start page's LLM context chip, beside the model picker: the picked
+// model's values, and a choice for the next new chat only (sent with its
+// create, then dropped; never remembered: a reload or opening a session
+// drops it too, a failed create keeps it).
+const llmContextNewEl = $("#llmContextNew");
+let newChatLlmContext = null;
+const newChatLlmSummary = () => (modelPickEl.hidden ? null : modelPicker.chosenRow()?.llm_context || null);
+const llmContextNewControl = createLlmContextControl({
+  el: llmContextNewEl,
+  escapeHtml,
+  summary: newChatLlmSummary,
+  kind: NEW_CHAT,
+  choice: () => newChatLlmContext,
+  choose: (next) => {
+    newChatLlmContext = next;
+    renderNewChatLlmContext();
+    promptEl.focus();
+  },
+  id: "llmContextNewPopover",
+  anchor: "#llmContextNew",
+});
+// Hidden without the model's values (the list not in, an older server).
+function renderNewChatLlmContext() {
+  const chip = llmContextChipModel(withChoice(newChatLlmSummary(), newChatLlmContext), { kind: NEW_CHAT });
+  llmContextNewEl.hidden = !chip;
+  if (!chip) return llmContextNewControl.close();
+  llmContextNewEl.textContent = chip.text;
+  llmContextNewEl.title = chip.title;
+  llmContextNewEl.classList.toggle("own", chip.own);
+}
 const markdownWarningEl = $("#markdownWarning");
 // What the page renders that a notice may stand in for (the server's
 // Web::Capabilities, next to markdown_warning); a notice it names isn't
@@ -908,7 +941,15 @@ function updateComposerMode() {
     hadSession = !hadSession;
     fitPrompt();
   }
-  if (selected) modelPicker.close();
+  if (selected) {
+    modelPicker.close();
+    llmContextNewControl.close();
+    // The start page's choice was for a new chat: opening a session drops it.
+    if (newChatLlmContext) {
+      newChatLlmContext = null;
+      renderNewChatLlmContext();
+    }
+  }
   const running = liveTurn.running && !!selected;
   cancelBtn.style.display = running ? "" : "none";
   if (running) {
@@ -1121,7 +1162,10 @@ function renderSessionView(data) {
   // next turn (a running turn's replay below streams over it).
   const savedPct = savedCtxPct(data.timing?.context);
   if (savedPct !== null) current.ctxPct = savedPct;
-  if (data.timing?.context?.window_tokens) current.ctxWindow = data.timing.context.window_tokens;
+  if (data.timing?.context?.window_tokens) {
+    current.ctxWindow = data.timing.context.window_tokens;
+    current.ctxWindowSource = data.timing.context.window_source || null;
+  }
   current.firstPreview = s.first_preview || previewForCard(s);
   current.usedMemories = s.used_memory_names || [];
   current.preloadedMemories = s.preloaded_memory_names || [];
@@ -1483,11 +1527,17 @@ function showSteers(steers) {
   }
 }
 
+// A ✂ row's notice data (turnDom.notice, placeTurnNotice).
+function llmContextNotice(data) {
+  return { line: llmContextLine(data), cls: "llm-context", title: llmContextHover(data) };
+}
+
 function showHookNotice(data, { before = null } = {}) {
   removeHintIfEmpty();
   const el = document.createElement("div");
-  el.className = "bubble hook-notice" + (data.level === "warn" ? " warn" : "");
+  el.className = "bubble hook-notice" + (data.level === "warn" ? " warn" : "") + (data.cls ? ` ${data.cls}` : "");
   el.textContent = data.line || `${hookNoticeLabel(data.hook)}: ${data.text || ""}`;
+  if (data.title) el.title = data.title;
   const follow = isNearBottom();
   if (before) historyEl.insertBefore(el, before);
   else appendToHistory(el);
@@ -1579,18 +1629,20 @@ function placeSnapshotCards(entries) {
 // plain answer, a step the history doesn't have) a bubble before the
 // turn's answer, or before its timing line when it has none.
 function placeTurnNotice(entry, before) {
+  const extra = entry.type === "llm_context_edited" ? llmContextNotice(entry) : {};
   const line = noticeLine(entry);
   const turnEls = reloadedTurnEls(before);
   const place = turnNoticePlace(entry);
   const block = turnEls.find((el) => el.matches(".turn-work"));
   const step = place && block ? block.querySelectorAll(":scope > .gen")[place.step] : null;
   if (!step) {
-    showHookNotice({ ...entry, line }, { before: turnAnswerEl(turnEls) || before });
+    showHookNotice({ ...entry, ...extra, line }, { before: turnAnswerEl(turnEls) || before });
     return;
   }
   const el = document.createElement("div");
-  el.className = "hook-notice" + (entry.level === "warn" ? " warn" : "");
+  el.className = "hook-notice" + (entry.level === "warn" ? " warn" : "") + (extra.cls ? ` ${extra.cls}` : "");
   el.textContent = line;
+  if (extra.title) el.title = extra.title;
   let body = step.querySelector(":scope > .activity-body");
   if (!body) {
     body = document.createElement("div");
@@ -1766,9 +1818,10 @@ function updateInfoBar() {
   if (stopBtn) stopBtn.style.display = canStopSession({ owner: current.owner, streaming: !!streamControl }) ? "" : "none";
   const idShort = selected.slice(0,8);
   const memText = current.usedMemories.length ? current.usedMemories.join(", ") : "—";
-  const ctxText = current.ctxPct !== null ? `ctx ${Math.round(current.ctxPct)}%` : "";
+  const ctxText = ctxBarText(current.ctxPct, current.ctxWindowSource);
   const tokens = current.timing.tokens;
-  const ctxTip = tokensTipText(tokens, undefined, current.timing.memoryIndex);
+  const ctxTip = tokensTipText(tokens, undefined, current.timing.memoryIndex,
+                               { tokens: current.ctxWindow, source: current.ctxWindowSource, pct: current.ctxPct });
   const speedTextNow = lastSpeedText(tokens);
   const avgSpeed = speedText(tokens?.avg_decode_tps, tokens?.tps_source);
   const speedTip = `Decode speed of the last generation${avgSpeed ? `; session average ${avgSpeed}` : ""}`;
@@ -1939,7 +1992,10 @@ const streamHandlers = {
     }
   },
   generation_started: (data) => {
-    if (data?.context_window_tokens) current.ctxWindow = data.context_window_tokens;
+    if (data?.context_window_tokens) {
+      current.ctxWindow = data.context_window_tokens;
+      current.ctxWindowSource = data.context_window_source || null;
+    }
     liveTurn.timing.setNote("");
     turnDom.generationStarted(data || {});
   },
@@ -2143,6 +2199,9 @@ const streamHandlers = {
   // (a reload puts it back from the snapshot's cards).
   empty_answer_retry: (data) => { turnDom.notice({ line: emptyRetryLine(data) }); },
   steer_cut: (data) => { turnDom.notice({ line: steerCutLine(data) }); },
+  // A batch of LLM context edits the server applied: a ✂ row of the
+  // current step, its hover listing the outputs.
+  llm_context_edited: (data) => { turnDom.notice(llmContextNotice(data)); },
   // The provider is asked again after an error, or the turn waits for
   // plugins' setup: a note on the live timing line until it streams.
   generation_retrying: (data) => liveTurn.timing.setNote(retryStatusLine(data)),
@@ -2226,7 +2285,11 @@ async function handleSendTurn() {
     }
     actionBtn.disabled = true;
     try {
-      const s = await createIdleSession({ dir: scope.dir, model: chosenModel(), preview: prompt });
+      const s = await createIdleSession({ dir: scope.dir, model: chosenModel(), preview: prompt,
+                                          llm_context: choiceWords(newChatLlmContext) });
+      // The choice was for this chat only.
+      newChatLlmContext = null;
+      renderNewChatLlmContext();
       addCreatedSession(s);
       await select(s.id);
     } catch (e) {
@@ -2439,7 +2502,10 @@ const modelPicker = createModelPicker({
   list: $("#modelList"),
   composer: $("#composer"),
   center: $("#center"),
-  onPick: () => promptEl.focus(),
+  onPick: () => {
+    renderNewChatLlmContext();
+    promptEl.focus();
+  },
 });
 async function loadModels() {
   let payload;
@@ -2453,6 +2519,7 @@ async function loadModels() {
   if (!modelPicker.setModels(payload, stored)) return;
   modelPickEl.title = payload.warning ? `The model the new chat starts on · ${payload.warning}` : "The model the new chat starts on";
   modelPickEl.hidden = false;
+  renderNewChatLlmContext();
 }
 // The picker's choice for a create request; nothing (the server's default)
 // while the list is not in.

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

@@ -91,14 +91,39 @@ export function memoryIndexText(memoryIndex) {
   return `~${countK(total)} tokens in this session's prompt (${scopes.map(([scope, tokens]) => `${scope} ${countK(tokens)}`).join(", ")})`;
 }
 
+// The info bar's ctx: "ctx 12%", "ctx ~12%" when the window is chi's
+// default (no server, model list or setting gave one, so the percent is of
+// a guess); "" without a pct.
+export function ctxBarText(pct, windowSource = null) {
+  if (num(pct) === null) return "";
+  return `ctx ${windowSource === "default" ? "~" : ""}${Math.round(pct)}%`;
+}
+
+// The ctx tooltip's window line ({tokens:, source:, pct:} the session's
+// window, where it came from and the meter's value): "context: ~41.0k of
+// 128.0k tokens (server)", as /stats names the source; "" without a window.
+export function ctxWindowText(window) {
+  const tokens = num(window?.tokens);
+  if (!tokens || tokens <= 0) return "";
+  const pct = num(window.pct);
+  const used = pct === null ? "" : `~${countK((pct / 100) * tokens)} of `;
+  const source = window.source === "default"
+    ? "chi's default, a guess: set window_tokens for this model"
+    : window.source;
+  return `context: ${used}${countK(tokens)} tokens${source ? ` (${source})` : ""}`;
+}
+
 // The ctx tooltip (info bar and card): +title+, then the session's tokens
 // (in summed over every request, cached with its share, out with the
 // reasoning part) and its cost, when it has any, and the memory indexes
-// its prompt holds (+memoryIndex+, the snapshot's memory_index). A
+// its prompt holds (+memoryIndex+, the snapshot's memory_index); with
+// +window+ (ctxWindowText's) the window line under the title. A
 // delegated session keeps its own metrics, so these are this session's only.
-export function tokensTipText(tokens, title = "Context used after the last turn", memoryIndex = null) {
+export function tokensTipText(tokens, title = "Context used after the last turn", memoryIndex = null, window = null) {
   const memory = memoryIndexText(memoryIndex);
   const memoryLine = memory ? `\nmemory index: ${memory}` : "";
+  const windowText = ctxWindowText(window);
+  if (windowText) title = `${title}\n${windowText}`;
   const prompt = num(tokens?.prompt_sum) || 0;
   const completion = num(tokens?.completion_sum) || 0;
   if (!prompt && !completion) return `${title}${memoryLine}`;

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

@@ -30,9 +30,12 @@ export function listSessions(sort, order, { dir, ...opts } = {}) {
 // as a turn (with its images, once they are uploaded). dir: the folder the
 // chat starts in; model: the model it starts on (as GET /api/models spells
 // it); either left out means the server's default. preview: that message,
-// which names the session until its turn is saved.
-export function createIdleSession({ dir, model, preview, ...opts } = {}) {
-  const body = { idle: true, ...(dir ? { dir } : {}), ...(model ? { model } : {}), ...(preview ? { preview } : {}) };
+// which names the session until its turn is saved. llm_context: the
+// session's own LLM context words ({strategy, apply, budget}), when the
+// start page's chip set some.
+export function createIdleSession({ dir, model, preview, llm_context: llmContext, ...opts } = {}) {
+  const body = { idle: true, ...(dir ? { dir } : {}), ...(model ? { model } : {}), ...(preview ? { preview } : {}),
+                 ...(llmContext ? { llm_context: llmContext } : {}) };
   return api("/api/sessions", { method: "POST", body: JSON.stringify(body), ...opts });
 }
 

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

@@ -172,6 +172,8 @@ button.task-stop:hover:not(:disabled){background:var(--danger-bg-dim);filter:non
 .activity-output{flex:1 1 100%;min-width:0}
 /* An edit/write's change: a closed "diff +3 −1" under the output, lined up with it. */
 .activity-diff{flex:1 1 100%;min-width:0;margin:2px 0 2px var(--row-gutter)}
+/* A reloaded row's ✂ mark (an LLM context edit on its output), one line above the output. */
+.activity-edit{flex:1 1 100%;min-width:0;margin:2px 0 0 var(--row-gutter);font-size:12px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:help}
 .activity-diff>summary{cursor:pointer;font-size:12px;color:var(--text-muted);width:max-content;font-variant-numeric:tabular-nums}
 .activity-diff>summary:hover{color:var(--text-2)}
 .activity-diff[open]>summary{margin-bottom:4px}
@@ -212,6 +214,7 @@ button.task-stop:hover:not(:disabled){background:var(--danger-bg-dim);filter:non
   .activity-params{flex:1 1 0}
   .activity-output{margin-left:0}
   .activity-diff{margin-left:0}
+  .activity-edit{margin-left:0}
   .activity-row>.activity-command{margin-left:0}
 }
 .bubble.thinking{border-left:3px solid var(--think);background:color-mix(in srgb,var(--think) 6%,var(--bg-panel));padding:8px 12px}
@@ -374,6 +377,7 @@ button.task-stop:hover:not(:disabled){background:var(--danger-bg-dim);filter:non
 .gen .hook-notice{font-size:13px;color:var(--text-3);padding:5px 2px 5px 8px;border-top:1px solid var(--border);border-left:2px solid var(--text-faint);white-space:pre-wrap;word-break:break-word}
 .gen .activity-body>.hook-notice:first-child{border-top:none}
 .gen .hook-notice.warn{border-left-color:var(--warn);color:var(--warn-text)}
+.hook-notice.llm-context{border-left-style:dashed;cursor:help}
 /* A plugin's steer (a nudge into the running turn): a row of its step, or a bubble; its text collapsed. */
 .steer-row{font-size:13px;color:var(--text-3);border-left:2px solid var(--accent-border)}
 .steer-row>summary{cursor:pointer;list-style:none;font-style:italic}
@@ -491,6 +495,13 @@ body.has-session #composer .actions-col{flex-wrap:nowrap;flex-shrink:0}
 .model-pick::after{content:"";position:absolute;right:9px;top:50%;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg);pointer-events:none;transition:transform .12s ease}
 .model-pick[aria-expanded="true"]::after{transform:translateY(-20%) rotate(225deg)}
 @media(max-width:600px){#composer .actions-col .model-pick{max-width:60%}}
+/* The new chat's LLM context chip, after the picker: as quiet as it; accent once a choice is set (the info bar chip's .own). */
+#composer .actions-col .llmctx-new{order:0;flex:0 1 auto;min-width:0;max-width:min(40%,260px);height:24px;min-height:24px;line-height:22px;padding:0 6px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--text-muted);font-size:11px;font-weight:400;overflow:hidden;text-overflow:ellipsis}
+#composer .actions-col .llmctx-new:hover{filter:none;color:var(--text);border-color:var(--accent-border);background:var(--accent-bg)}
+#composer .actions-col .llmctx-new.own{color:var(--accent);border-color:var(--accent-border)}
+#composer .actions-col .llmctx-new[hidden],body.has-session #composer .actions-col .llmctx-new{display:none}
+/* Phones: picker · chip · Start on one row (the key hint is gone there); names cut short rather than wrapping, the chip first. */
+@media(max-width:600px){#composer .actions-col:has(.llmctx-new:not([hidden])){flex-wrap:nowrap}#composer .actions-col .model-pick{flex:0 1 auto;min-width:0}#composer .actions-col .llmctx-new{max-width:45%;flex-shrink:4}}
 /* The model search: opaque like #commandList (a list over the conversation
    must stay readable), above the composer, or below it (.down) when the
    start page leaves no room above, or over the composer (.over) when
@@ -1005,6 +1016,7 @@ a{color:var(--accent)}
         </div>
         <div class="actions-col">
           <button type="button" id="modelPick" class="model-pick" title="The model the new chat starts on" aria-label="Model for the new chat" aria-haspopup="listbox" aria-expanded="false" hidden><span class="model-pick-name"></span></button>
+          <button type="button" id="llmContextNew" class="llmctx-new" aria-haspopup="dialog" hidden></button>
           <div id="composeHint">Enter to start · Shift+Enter for a newline</div>
           <button id="cancelBtn" title="Cancel the running turn, whoever sent it" style="display:none">Cancel</button>
           <div class="split">

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

@@ -6,6 +6,11 @@
 // the session's llm_context (LLMContextStrategy::Explained#summary: the
 // worker's snapshot, a command_ran, or the server's own reading of the
 // session file).
+//
+// The start page has one too (kind "new chat"): it shows the picked
+// model's values (GET /api/models' llm_context) and its form keeps a
+// choice for the next create only (POST /api/sessions' llm_context), never
+// remembered: nothing is sent unless the user sets one.
 
 export const STRATEGIES = [
   { value: "none", label: "none" },
@@ -13,6 +18,8 @@ export const STRATEGIES = [
   { value: "stale,forget", label: "stale + forget (experimental)" },
 ];
 export const APPLIES = ["payoff", "next_request", "turn_end"];
+export const SESSION = "session";
+export const NEW_CHAT = "new chat";
 
 const DEFAULT = "default";
 const LAYER_ORDER = ["stale", "forget"];
@@ -33,15 +40,34 @@ export function ownValues(summary) {
   return { strategy, apply: own.apply || DEFAULT, budget };
 }
 
-// The chip: its text, tooltip and whether the session set its own; null
-// without a summary (an older worker).
-export function chipModel(summary) {
+// The start page's choice for the new chat ({strategy: [layers], apply,
+// budget_tokens}, the session file's shape; 0 is off) laid over the
+// model's summary: what the chip shows, with the chosen fields' source
+// "session" ("the new chat"). The model's own summary without a choice.
+export function withChoice(summary, choice) {
+  if (!summary || !choice) return summary;
+  const merged = { ...summary, own: choice };
+  // (the budget's source and where are budget_source / budget_where)
+  const set = (field, key, value) => Object.assign(merged, { [key]: value, [`${field}_source`]: SESSION,
+                                                            [`${field}_where`]: "the new chat" });
+  if (Array.isArray(choice.strategy)) set("strategy", "strategy", strategyValue(choice.strategy));
+  if (choice.apply) set("apply", "apply", choice.apply);
+  if (typeof choice.budget_tokens === "number") {
+    set("budget", "budget_tokens", choice.budget_tokens > 0 ? choice.budget_tokens : null);
+  }
+  return merged;
+}
+
+// The chip: its text, tooltip and whether the session (or the new chat)
+// set its own; null without a summary (an older worker).
+export function chipModel(summary, { kind = SESSION } = {}) {
   if (!summary || !summary.strategy) return null;
   const own = summary.strategy_source === "session" || !!summary.own;
   const budget = summary.budget_tokens ? `${summary.budget_tokens} tokens` : "off";
+  const what = kind === NEW_CHAT ? "the new chat" : "this session";
   const title = `LLM context strategy: ${summary.strategy} (${summary.strategy_where}); apply ${summary.apply} ` +
-    `(${summary.apply_where}); budget ${budget} (${summary.budget_where}). Click to change it for this session.`;
-  return { text: `llm ctx ${summary.strategy}${own ? " · session" : ""}`, title, own };
+    `(${summary.apply_where}); budget ${budget} (${summary.budget_where}). Click to change it for ${what}.`;
+  return { text: `llm ctx ${summary.strategy}${own ? ` · ${kind}` : ""}`, title, own };
 }
 
 export function chipHtml(summary, escapeHtml) {
@@ -65,6 +91,54 @@ export function commandLine({ strategy = DEFAULT, apply = DEFAULT, budget = "" }
   return `/llm-context ${fields.map((field) => `${field} ${words[field]}`).join(" ")}`;
 }
 
+// A budget as typed ("64000", "64k", "off", "0") in tokens, 0 for off;
+// null when it isn't one or is out of chi's range (LLMContextOverride).
+export function parseBudget(text) {
+  const word = String(text).trim().toLowerCase();
+  if (word === "off" || word === "0") return 0;
+  const match = /^(\d[\d_]*)(k)?$/.exec(word);
+  if (!match) return null;
+  const tokens = Number(match[1].replace(/_/g, "")) * (match[2] ? 1000 : 1);
+  if (tokens === 0) return 0; // "00", "0k": off, as chi reads them
+  return tokens >= 4000 && tokens <= 10_000_000 ? tokens : null;
+}
+
+// The new chat's choice after a Set: +choice+ with the fields the user
+// changed (vs +initial+, the values the form opened with) applied, a field
+// set back to default dropped; null when nothing is left. Throws on a
+// budget that isn't one.
+export function mergeChoice(choice, { strategy = DEFAULT, apply = DEFAULT, budget = "" } = {}, initial = null) {
+  const next = { ...(choice || {}) };
+  const words = { strategy, apply, budget: String(budget).trim() || DEFAULT };
+  const was = initial && { strategy: initial.strategy, apply: initial.apply, budget: String(initial.budget).trim() || DEFAULT };
+  const key = { strategy: "strategy", apply: "apply", budget: "budget_tokens" };
+  for (const field of Object.keys(words)) {
+    if (was && words[field] === was[field]) continue;
+    const word = words[field];
+    if (word === DEFAULT) { delete next[key[field]]; continue; }
+    if (field === "strategy") next.strategy = word === "none" ? [] : word.split(/[\s,|]+/).filter(Boolean);
+    else if (field === "apply") next.apply = word;
+    else {
+      const tokens = parseBudget(word);
+      if (tokens === null) throw new Error("A budget is a number of tokens from 4000 (4k) to 10000000, or off.");
+      next.budget_tokens = tokens;
+    }
+  }
+  return Object.keys(next).length ? next : null;
+}
+
+// The choice as POST /api/sessions' llm_context words it ({strategy:
+// "stale,forget"|"none", apply, budget: "64000"|"off"}, the set fields);
+// undefined without one, so the request has none.
+export function choiceWords(choice) {
+  if (!choice) return undefined;
+  const words = {};
+  if (Array.isArray(choice.strategy)) words.strategy = strategyValue(choice.strategy);
+  if (choice.apply) words.apply = choice.apply;
+  if (typeof choice.budget_tokens === "number") words.budget = choice.budget_tokens > 0 ? String(choice.budget_tokens) : "off";
+  return Object.keys(words).length ? words : undefined;
+}
+
 // The strategy list, with the session's own value when it isn't one of them
 // (forget alone, a newer chi's layer).
 export function strategyOptions(chosen) {
@@ -84,11 +158,16 @@ export function nowText(summary) {
     `budget ${budget} (${summary.budget_where})`;
 }
 
-export function formHtml(summary, escapeHtml, { running = false } = {}) {
-  const own = ownValues(summary);
+// For the new chat (kind NEW_CHAT), +summary+ is the model's and +choice+
+// the values the form shows.
+export function formHtml(summary, escapeHtml, { running = false, kind = SESSION, choice = null } = {}) {
+  const fresh = kind === NEW_CHAT;
+  const own = fresh ? ownValues({ own: choice }) : ownValues(summary);
   const follow = (field) => (summary[`${field}_source`] === "session" ? "follow the model" : `follow the model (${summary[field]})`);
+  const when = fresh ? "For the new chat's first turn on; not remembered for the next one."
+    : "From the next turn's start. Turning forget on or off re-reads the whole prompt once.";
   return `<form class="llmctx-form"><div class="ctx-pop-head"><strong>LLM context</strong>` +
-    `<span class="ctx-pop-kind">this session</span>` +
+    `<span class="ctx-pop-kind">${fresh ? NEW_CHAT : "this session"}</span>` +
     `<button type="button" class="ctx-pop-close" data-act="close" aria-label="Close">×</button></div>` +
     `<div class="ctx-pop-meta llmctx-now">${escapeHtml(nowText(summary))}</div>` +
     `<label class="llmctx-field"><span>Strategy</span><select name="strategy">` +
@@ -99,20 +178,44 @@ export function formHtml(summary, escapeHtml, { running = false } = {}) {
     APPLIES.map((a) => option(a, a, own.apply, escapeHtml)).join("") + `</select></label>` +
     `<label class="llmctx-field"><span>Budget</span><input name="budget" type="text" inputmode="numeric" autocomplete="off" ` +
     `placeholder="follow the model (64000, 64k or off)" value="${escapeHtml(own.budget)}"></label>` +
-    `<div class="ctx-pop-meta">From the next turn's start. Turning forget on or off re-reads the whole prompt once.` +
-    `${running ? " A turn is running: set it when it ends." : ""}</div>` +
+    `<div class="ctx-pop-error llmctx-error" hidden></div>` +
+    `<div class="ctx-pop-meta">${when}${running ? " A turn is running: set it when it ends." : ""}</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"${running ? " disabled" : ""}>Set</button></div></form>`;
 }
 
+const EDGE = 16;
+const GAP = 8;
+
+// Where the popover goes for the chip's +rect+: above it, or below when
+// the room above is short of its height and below has more; capped to the
+// room on that side (it scrolls), never past the window's edges.
+// @return {{left, top?, bottom?, maxHeight?}}
+export function popoverPlace(rect, { width, height, innerWidth, innerHeight }) {
+  const left = Math.max(EDGE, Math.min(rect.left, innerWidth - width - EDGE));
+  const above = rect.top - GAP - EDGE;
+  const below = innerHeight - rect.bottom - GAP - EDGE;
+  const down = height > above && below > above;
+  const room = Math.max(0, down ? below : above);
+  const place = down ? { left, top: rect.bottom + GAP } : { left, bottom: Math.max(EDGE, innerHeight - rect.top + GAP) };
+  return height > room ? { ...place, maxHeight: room } : place;
+}
+
 // The chip's popover. el: where the chip is drawn (#infoText, redrawn every
 // tick: clicks are delegated); summary(): the open session's llm_context;
 // session(): the open session's id; running(): a turn runs; run(line):
 // sends the command.
+// The start page's (kind NEW_CHAT): summary() is the picked model's,
+// choice() the pending choice, and choose(next) takes a Set's (null for
+// "follow the model") instead of a command running. id and anchor (the
+// chip's selector) keep the two controls apart.
 export function createLlmContextControl({ el, escapeHtml, summary, session = () => null, running = () => false, run,
+                                          kind = SESSION, choice = () => null, choose = null,
+                                          id = "llmContextPopover", anchor: anchorSel = ".llmctx-chip",
                                           doc = document, win = window }) {
+  const fresh = kind === NEW_CHAT;
   const pop = doc.createElement("div");
-  pop.id = "llmContextPopover";
+  pop.id = id;
   pop.className = "ctx-popover llmctx-popover";
   pop.setAttribute("role", "dialog");
   pop.hidden = true;
@@ -122,19 +225,23 @@ export function createLlmContextControl({ el, escapeHtml, summary, session = ()
   let openFor = null;
 
   function place(anchor) {
-    const rect = anchor.getBoundingClientRect();
     const width = Math.min(360, win.innerWidth - 32);
     pop.style.width = `${width}px`;
-    pop.style.left = `${Math.max(16, Math.min(rect.left, win.innerWidth - width - 16))}px`;
-    pop.style.bottom = `${Math.max(16, win.innerHeight - rect.top + 8)}px`;
+    pop.style.maxHeight = "";
+    const at = popoverPlace(anchor.getBoundingClientRect(), { width, height: pop.offsetHeight,
+                                                              innerWidth: win.innerWidth, innerHeight: win.innerHeight });
+    pop.style.left = `${at.left}px`;
+    pop.style.top = at.top === undefined ? "" : `${at.top}px`;
+    pop.style.bottom = at.bottom === undefined ? "" : `${at.bottom}px`;
+    if (at.maxHeight !== undefined) pop.style.maxHeight = `${at.maxHeight}px`;
   }
 
   function open(anchor) {
     const data = summary();
     if (!data) return;
-    initial = ownValues(data);
+    initial = fresh ? ownValues({ own: choice() }) : ownValues(data);
     openFor = session();
-    pop.innerHTML = formHtml(data, escapeHtml, { running: running() });
+    pop.innerHTML = formHtml(data, escapeHtml, { running: running(), kind, choice: choice() });
     pop.hidden = false;
     place(anchor);
   }
@@ -161,17 +268,39 @@ export function createLlmContextControl({ el, escapeHtml, summary, session = ()
   }
 
   el.addEventListener("click", (e) => {
-    const anchor = e.target.closest(".llmctx-chip");
+    const anchor = e.target.closest(anchorSel);
     if (!anchor) return;
     e.stopPropagation();
     if (isOpen()) close();
     else open(anchor);
   });
+  // An edit makes an error the last Set showed stale.
+  const clearError = () => {
+    const error = pop.querySelector(".llmctx-error");
+    if (error && !error.hidden) { error.hidden = true; error.textContent = ""; }
+  };
+  pop.addEventListener("input", clearError);
+  pop.addEventListener("change", clearError);
   pop.addEventListener("submit", (e) => {
     e.preventDefault();
     const form = e.target;
-    const line = commandLine({ strategy: form.elements.strategy.value, apply: form.elements.apply.value,
-                               budget: form.elements.budget.value }, initial);
+    const values = { strategy: form.elements.strategy.value, apply: form.elements.apply.value,
+                     budget: form.elements.budget.value };
+    if (fresh) {
+      let next;
+      try {
+        next = mergeChoice(choice(), values, initial);
+      } catch (err) {
+        const error = pop.querySelector(".llmctx-error");
+        error.textContent = err.message;
+        error.hidden = false;
+        return;
+      }
+      close();
+      choose(next);
+      return;
+    }
+    const line = commandLine(values, initial);
     close();
     if (line) run(line);
   });
@@ -180,11 +309,12 @@ export function createLlmContextControl({ el, escapeHtml, summary, session = ()
     if (act === "close") close();
     else if (act === "reset") {
       close();
-      run(commandLine());
+      if (fresh) choose(null);
+      else run(commandLine());
     }
   });
   doc.addEventListener("click", (e) => {
-    if (isOpen() && !pop.contains(e.target) && !e.target.closest?.(".llmctx-chip")) close();
+    if (isOpen() && !pop.contains(e.target) && !e.target.closest?.(anchorSel)) close();
   });
   doc.addEventListener("keydown", (e) => {
     if (e.key === "Escape" && isOpen()) close();

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

@@ -19,7 +19,8 @@ export const RECENT_KEY = "chi_model_recent";
 
 // The payload's models as rows: {name, host, id, isDefaultHost}, and
 // sampling (the configured request parameters as /model words them) when
-// the model has some. The
+// the model has some, and llm_context (the LLM context it starts under,
+// LLMContextStrategy::Explained#summary) when the server sent one. The
 // default host's names are bare (name == id); the server's own default,
 // unshifted when no host lists it, has no host and goes with them, shown
 // by its name.
@@ -33,6 +34,7 @@ export function modelRows(payload) {
       const id = host ? String(m.id || name) : name;
       const row = { name, host, id, isDefaultHost: !host || name === id };
       if (m.sampling) row.sampling = String(m.sampling);
+      if (m.llm_context && typeof m.llm_context === "object") row.llm_context = m.llm_context;
       return row;
     });
 }

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

@@ -219,6 +219,8 @@ export function createModelPicker({ button, panel, input, list, composer, center
       return true;
     },
     chosen: () => chosen,
+    // The picked model's row (its llm_context too); null before the list.
+    chosenRow: () => rows.find((r) => r.name === chosen) || null,
     close,
     isOpen,
   };

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

@@ -22,6 +22,8 @@ export function emptySessionState() {
     ctxPct: null,
     // Window the kernel resolved for the running generation (:generation_started).
     ctxWindow: null,
+    // Where it came from ("server", "config", … "default": chi's guess).
+    ctxWindowSource: null,
     status: "",
     model: "",
     // What the worker's server said it served for a model name: [served, asked].