samagotchi 0.42.0 → 0.43.0

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].

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: samagotchi
 version: !ruby/object:Gem::Version
-  version: 0.42.0
+  version: 0.43.0
 platform: ruby
 authors:
 - Dmitry Dedov