samagotchi 0.50.0 → 0.52.0

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

@@ -26,14 +26,18 @@ import {
   chipHtml as llmContextChipHtml, chipModel as llmContextChipModel, choiceWords, createLlmContextControl, NEW_CHAT,
   withChoice,
 } from "./llm_context_chip.js";
+import {
+  chipHtml as thinkingChipHtml, chipModel as thinkingChipModel, createThinkingControl,
+  withChoice as withThinkingChoice,
+} from "./thinking_chip.js";
 import { renderStable } from "./stable_html.js";
 import { createShownTexts } from "./shown_texts.js";
 import { MODEL_KEY } from "./model_pick.js";
 import { emptySessionState } from "./session_state.js";
 import { createModelPicker } from "./model_picker.js";
 import { chipName, chipsHtml, imageFiles, restoredChips, thumbsHtml, turnRefs, turnText } from "./images.js";
-import { escapeHtml, memChipText, memChipTitle, noteHtml, normalize, steerRowHtml, ownerBadge, previewForCard, relativeTime, failedTurnText, modelLabel, deleteConfirmText, recapLabel, canStopSession, goneSessionNotice, withLiveStatus, withoutWorker, recapPlace, delegatedBy, childrenSummary, promptNotesChip } from "./format.js";
-import { createTurnView, turnHistoryHtml } from "./turn_view.js";
+import { escapeHtml, memChipText, memChipTitle, noteHtml, normalize, steerRowHtml, ownerBadge, previewForCard, firstPreview, relativeTime, failedTurnText, modelLabel, deleteConfirmText, recapLabel, canStopSession, goneSessionNotice, withLiveStatus, withoutWorker, recapPlace, delegatedBy, childrenSummary, promptNotesChip } from "./format.js";
+import { createTurnView, turnHistoryNodes } from "./turn_view.js";
 import { BADGES, emptyAnswerHtml, htmlElement, stateBadgeHtml, userBubbleHtml } from "./turn_html.js";
 import { createStageView } from "./stage_view.js";
 import { createFamilyPop, familyChipHtml, familyRowsHtml } from "./families_view.js";
@@ -56,13 +60,15 @@ import { shouldFollowScroll, keepFollowing } from "./scroll.js";
 import { SHORT_WINDOW_QUERY, stripAutoHidden, stripColumns, stripShowParts } from "./strip.js";
 import { applySessionEvent, batchCounts, batchTargets, batchToastText, families, familyId, familyOpen, familyWaits, filterFamilies, flattenFamilies, heldOrder, inTree, rangeIds, runBatch, listedSessions, sortedByUpdated, stoppedBadge, waitingBadge, waitingFirst, waitingSearchText } from "./sessions_list.js";
 import { createNotifications } from "./notifications.js";
+import { tabTitle, topBarTitle } from "./session_title.js";
 import { restartConfirmText, versionNotice, workerBadge } from "./update_notice.js";
+import { anchorInsertIndex, commandAnchor, isShellCommandLine, keepsCommandBubble } from "./kept_commands.js";
 import {
-  appendAboveLiveTiming, cancelLineText, elapsedSince, formatDuration, mergeTiming, normalizeTiming, STOPPED_LINE_CLASS,
+  appendAboveLiveTiming, cancelLineText, formatDuration, mergeTiming, normalizeTiming, sessionDurationNow, STOPPED_LINE_CLASS,
 } 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, historyHasCommandBubble, 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";
+import { clientLabel, commandView, isReportClient, displayWait, dropEarlyRestores, emptyRetryLine, historyHasCommandBubble, hookNoticeLabel, initWaitLine, isOwn, llmContextHover, llmContextLine, sessionCommandLine, keepEarlyRestore, newClientId, noticeLine, promptOps, reminderText, restoreAction, composerAfterAck, restoreOnAck, replaysDrawnTurn, retryStatusLine, snapshotEvents, steerChoiceRoute, steerCutLine, startPageReplyOrHint, turnOutput, unknownCommandHint, webLocalReply, workerGoneText } from "./turn_events.js";
 
 const $ = (s) => document.querySelector(s);
 const topStripEl = $("#topStrip");
@@ -71,7 +77,11 @@ const historyEl = $("#history");
 const emptyEl = $("#empty");
 const composerEl = $("#composer");
 const infoBarEl = $("#infoBar");
-const firstPeekEl = $("#firstPeek");
+// The open session's title in the top bar, when no strip card in sight
+// shows it; the tab's base ("Chi · <project>"), set by renderScope.
+const sessionTitleEl = $("#sessionTitle");
+let tabBase = null;
+let tabShown = null;
 const infoTextEl = $("#infoText");
 // The open session's attached context, in its own row of the session bar
 // (updateInfoBar redraws #infoText every tick; the chips keep their popover).
@@ -112,6 +122,43 @@ const llmContextNewControl = createLlmContextControl({
   id: "llmContextNewPopover",
   anchor: "#llmContextNew",
 });
+// The open session's thinking chip, beside the llm ctx one: /thinking runs
+// in the session's worker.
+const thinkingControl = createThinkingControl({
+  el: infoTextEl,
+  escapeHtml,
+  summary: () => (selected ? current.thinking : null),
+  session: () => selected,
+  running: () => liveTurn.running,
+  run: (line) => runSessionCommand(line),
+});
+// The start page's thinking chip: the picked model's level, and a level
+// for the next new chat only (sent with its create, then dropped).
+const thinkingNewEl = $("#thinkingNew");
+let newChatThinking = null;
+const newChatThinkingSummary = () => (modelPickEl.hidden ? null : modelPicker.chosenRow()?.thinking || null);
+const thinkingNewControl = createThinkingControl({
+  el: thinkingNewEl,
+  escapeHtml,
+  summary: newChatThinkingSummary,
+  kind: NEW_CHAT,
+  choice: () => newChatThinking,
+  choose: (next) => {
+    newChatThinking = next;
+    renderNewChatThinking();
+    promptEl.focus();
+  },
+  id: "thinkingNewPopover",
+  anchor: "#thinkingNew",
+});
+function renderNewChatThinking() {
+  const chip = thinkingChipModel(withThinkingChoice(newChatThinkingSummary(), newChatThinking), { kind: NEW_CHAT });
+  thinkingNewEl.hidden = !chip;
+  if (!chip) return thinkingNewControl.close();
+  thinkingNewEl.textContent = chip.text;
+  thinkingNewEl.title = chip.title;
+  thinkingNewEl.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_CHAT });
@@ -342,7 +389,9 @@ function renderScope() {
     el.innerHTML = `<span class="scope-name" title="Sessions of every project">all projects</span>${backLink}${where ? `<span class="scope-where" title="New chats start in ${escapeHtml(where)}">new chat in<span class="path"><bdi>${escapeHtml(where)}</bdi></span></span>` : ""}`;
   }
   el.hidden = false;
-  notifications.setBaseTitle(scope.projectName ? `Chi · ${scope.projectName}` : "Chi");
+  // The tab: "<session title> · Chi · <project>" (updateSessionTitle).
+  tabBase = scope.projectName ? `Chi · ${scope.projectName}` : "Chi";
+  updateSessionTitle();
   // The links follow the hash (an open session, the all-sessions view).
   el.querySelector(".scope-all:not(.scope-back)")?.addEventListener("click", (e) => {
     e.currentTarget.href = allScopeHref(location.hash, scope.dir, location.search);
@@ -642,6 +691,8 @@ function paintActive() {
   document.querySelectorAll(".family-row[data-id]").forEach((el) => {
     el.classList.toggle("active", !!selected && el.dataset.id === selected);
   });
+  // The open session's card may have come into the strip or left it.
+  updateSessionTitle();
 }
 
 // The latest sessions (as many as fit, a family one card), then the way
@@ -693,11 +744,11 @@ function noteChainFamilies(fams) {
 }
 
 // The hidden strip's pill: "▾ 5 sessions · ● 1 live · ● 1 waiting",
-// following the list: its cards (a family is one), the live and waiting
-// sessions (a waiting delegate too).
+// following the list: its sessions, the number the All sessions tile
+// shows, and the live and waiting ones (a waiting delegate too).
 function renderStripShow() {
   const shown = shownSessions();
-  const { count, live, waiting } = stripShowParts(shown, { cards: foldChains(families(shown), allSessions).length });
+  const { count, live, waiting } = stripShowParts(shown);
   const liveHtml = live ? ` · <span class="live"><span class="live-dot" aria-hidden="true"></span>${escapeHtml(live)}</span>` : "";
   const waitingHtml = waiting ? ` · <span class="waiting"><span class="waiting-dot" aria-hidden="true"></span>${escapeHtml(waiting)}</span>` : "";
   $("#stripShow").innerHTML = `<span class="pill-arrow" aria-hidden="true">\u25BE</span> ${escapeHtml(count)}${liveHtml}${waitingHtml}`;
@@ -999,6 +1050,7 @@ function applyView() {
     topStripEl.scrollLeft = 0; // a phone's strip scrolls sideways to the tile
   }
   document.body.classList.toggle("all-view", open);
+  updateSessionTitle();
   // Its chip was in the list just hidden (the strip, or all sessions).
   chainPop.close();
   if (open) {
@@ -1037,6 +1089,7 @@ function updateComposerMode() {
   if (document.body.classList.toggle("has-session", !!selected) !== hadSession) {
     hadSession = !hadSession;
     fitPrompt();
+    placeToast();
   }
   if (selected) {
     modelPicker.close();
@@ -1046,6 +1099,11 @@ function updateComposerMode() {
       newChatLlmContext = null;
       renderNewChatLlmContext();
     }
+    thinkingNewControl.close();
+    if (newChatThinking) {
+      newChatThinking = null;
+      renderNewChatThinking();
+    }
   }
   const running = liveTurn.running && !!selected;
   cancelBtn.style.display = running ? "" : "none";
@@ -1148,7 +1206,6 @@ function clearSelection() {
   setCapabilities(null);
   updateComposerMode();
   updateInfoBar();
-  updateFirstPeek();
   promptEl.focus();
 }
 
@@ -1182,7 +1239,6 @@ async function select(id) {
   closeStream();
   resetSessionState();
   resetTurnView();
-  updateFirstPeek();
   updateInfoBar();
   contextChips.load(id);
   updateComposerMode();
@@ -1224,8 +1280,9 @@ async function resync({ endText = null } = {}) {
       return;
     }
     if (id !== selected) return;
+    const kept = keptCommandBubbles(id);
     resetTurnView();
-    renderSessionView(data);
+    renderSessionView(data, { kept });
     // Preview is read-only: a worker is woken only by POST /turn, so attach
     // only when a live bridge exists.
     selectSeq = typeof data.last_event_seq === "number" ? (data.last_event_id || data.last_event_seq) : null;
@@ -1240,10 +1297,45 @@ async function resync({ endText = null } = {}) {
   }
 }
 
+// The prompt and command bubbles in the history, in order, by kind
+// (kept_commands.js): a prompt, a `!cmd`'s (saved, so redrawn) or another.
+function historyAnchors() {
+  const els = [...historyEl.querySelectorAll(".bubble.user, .bubble.command")];
+  const kinds = els.map((el) => {
+    if (el.classList.contains("user")) return "user";
+    const line = el.querySelector(":scope > .command-line")?.textContent;
+    return !el.classList.contains("failed") && isShellCommandLine(line) ? "shell" : "other";
+  });
+  return { els, kinds };
+}
+
+// This session's own command bubbles (/help, /model …: drawn by this page,
+// never saved) with their anchors, before a resync redraws the history.
+// In-flight ones (busy, queued) are left out: the snapshot draws them again.
+function keptCommandBubbles(id) {
+  const { els, kinds } = historyAnchors();
+  return els
+    .map((el, i) => ({ el, anchor: commandAnchor(kinds, i) }))
+    .filter(({ el }) => el.dataset.keptFor === id && !el.classList.contains("busy") && !el.classList.contains("queued"))
+    .filter(({ el }) => keepsCommandBubble(el.querySelector(":scope > .command-line")?.textContent));
+}
+
+// The kept bubbles back into the redrawn history, each after its turn.
+function restoreCommandBubbles(kept) {
+  if (!kept.length) return;
+  historyEl.querySelector(".hint")?.remove();
+  kept.forEach(({ el, anchor }) => {
+    const { els, kinds } = historyAnchors();
+    const at = anchorInsertIndex(kinds, anchor);
+    if (at < els.length) els[at].before(el);
+    else historyEl.appendChild(el);
+  });
+}
+
 // A session view: its messages, then the turn in progress and the queued
 // prompts (a live worker's snapshot) replayed through the stream handlers,
 // then a pending question.
-function renderSessionView(data) {
+function renderSessionView(data, { kept = [] } = {}) {
   const s = data.session;
   setMarkdownWarning(data.markdown_warning);
   setCapabilities(data.capabilities);
@@ -1270,20 +1362,23 @@ function renderSessionView(data) {
   current.promptNotes = Array.isArray(s.prompt_notes) ? s.prompt_notes : [];
   current.llmContext = s.llm_context || null;
   llmContextControl.refresh();
+  current.thinking = s.thinking || null;
+  thinkingControl.refresh();
   current.parentId = s.parent_id || null;
   current.continues = s.continues || null;
   current.commands = Array.isArray(data.commands) ? data.commands : [];
   if (data.messages && data.messages.length) {
     const first = data.messages.find((m) => m.role === "user");
-    if (first && first.content) current.firstPreview = normalize(first.content).slice(0,80) + (normalize(first.content).length>80?"…":"");
+    if (first && first.content) current.firstPreview = firstPreview(first.content);
     renderHistory(data.messages);
   } else {
     renderHistory(data.history || []);
     if (!current.firstPreview && data.history && data.history.length) {
-      const txt = normalize(String(data.history[0]||"")).slice(0,80);
-      if(txt) current.firstPreview = txt;
+      const txt = firstPreview(data.history[0]);
+      if (txt) current.firstPreview = txt;
     }
   }
+  restoreCommandBubbles(kept);
   // A failed turn's prompt went back to the user: shown after the
   // conversation, marked failed, as it was live (prompt_restored).
   if (data.failed_turn) {
@@ -1334,7 +1429,6 @@ function renderSessionView(data) {
   // A turn ran out of iterations and waits for a yes or no.
   if (data.continue_offer) questionCards.renderContinue(data.continue_offer);
   updateInfoBar();
-  updateFirstPeek();
   updateComposerMode();
 }
 
@@ -1344,7 +1438,7 @@ function renderHistory(items) {
     return;
   }
   if (typeof items[0] === "object" && items[0].role) {
-    historyEl.innerHTML = turnHistoryHtml(items, current.timing, { thumbs: (images) => thumbsHtml(selected, images) });
+    historyEl.replaceChildren(turnHistoryNodes(items, current.timing, { thumbs: (images) => thumbsHtml(selected, images) }));
   } else {
     historyEl.innerHTML = items.map((c) => `<div class="bubble output">${escapeHtml(c)}</div>`).join("");
   }
@@ -1922,11 +2016,11 @@ function updateInfoBar() {
     renderStable(infoTextEl, "");
     infoTextEl.title = "";
     if (stopBtn) stopBtn.style.display = "none";
+    updateSessionTitle();
     return;
   }
   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 = ctxBarText(current.ctxPct, current.ctxWindowSource);
   const tokens = current.timing.tokens;
   const ctxTip = tokensTipText(tokens, undefined, current.timing.memoryIndex,
@@ -1957,16 +2051,38 @@ function updateInfoBar() {
   const attachCmd = `chi --attach ${selected}`;
   const copied = Date.now() - attachCopiedAt < 2000;
   const copyHtml = `<button type="button" class="copy-attach" title="Copy &quot;${escapeHtml(attachCmd)}&quot; to attach a terminal">${copied ? "copied ✓" : "copy chi --attach"}</button>`;
-  const metaHtml = `<div class="meta"><span class="id" title="${escapeHtml(selected)}">${escapeHtml(idShort)}</span>${copyHtml}<span class="${statusClass}">${escapeHtml(current.status||"")}</span><span class="model${label.mismatch ? " served-mismatch" : ""}" title="${escapeHtml(label.title)}">${escapeHtml(label.text)}</span>${chainHtml}${parentHtml}${kidsHtml}${llmContextChipHtml(current.llmContext, escapeHtml)}${notesHtml}${current.usedMemories.length ? `<span class="model mem-chip" title="${escapeHtml(memChipTitle(current.usedMemories))}">${escapeHtml(memChipText(current.usedMemories))}</span>` : ""}<span class="dir" title="${escapeHtml(current.dir||"")}"><bdi>${escapeHtml(current.dir||"")}</bdi></span>${ctxText ? `<span class="model ctx" title="${escapeHtml(ctxTip)}">${escapeHtml(ctxText)}</span>` : ""}${speedTextNow ? `<span class="model speed" title="${escapeHtml(speedTip)}">${escapeHtml(speedTextNow)}</span>` : ""}${timingText ? `<span class="model session-time"></span>` : ""}${workerBadgeHtml()}</div>`;
-  // The title line follows the card's: a chain link opened with the opener
-  // reads its chain's first link's title (cardTitle).
-  const shown = sessionsById().get(selected);
-  const titleText = shown && isOpener(current.firstPreview) ? cardTitle(shown) : current.firstPreview;
-  const previewHtml = `<div class="preview-line"><span class="preview">${escapeHtml(titleText || "—")}</span> · <span class="mem" title="${escapeHtml(current.usedMemories.join(", "))}">mem: ${escapeHtml(memText)}</span></div>`;
+  const metaHtml = `<div class="meta"><span class="id" title="${escapeHtml(selected)}">${escapeHtml(idShort)}</span>${copyHtml}<span class="${statusClass}">${escapeHtml(current.status||"")}</span><span class="model${label.mismatch ? " served-mismatch" : ""}" title="${escapeHtml(label.title)}">${escapeHtml(label.text)}</span>${chainHtml}${parentHtml}${kidsHtml}${llmContextChipHtml(current.llmContext, escapeHtml)}${thinkingChipHtml(current.thinking, escapeHtml)}${notesHtml}${current.usedMemories.length ? `<span class="model mem-chip" title="${escapeHtml(memChipTitle(current.usedMemories))}">${escapeHtml(memChipText(current.usedMemories))}</span>` : ""}<span class="dir" title="${escapeHtml(current.dir||"")}"><bdi>${escapeHtml(current.dir||"")}</bdi></span>${ctxText ? `<span class="model ctx" title="${escapeHtml(ctxTip)}">${escapeHtml(ctxText)}</span>` : ""}${speedTextNow ? `<span class="model speed" title="${escapeHtml(speedTip)}">${escapeHtml(speedTextNow)}</span>` : ""}${timingText ? `<span class="model session-time"></span>` : ""}${workerBadgeHtml()}</div>`;
   // The session clock ticks every second while a turn runs: only its text
   // changes, the bar's other nodes (a tooltip, a button mid-press) stay.
-  renderStable(infoTextEl, metaHtml + previewHtml, { ".session-time": timingText });
+  renderStable(infoTextEl, metaHtml, { ".session-time": timingText });
   infoTextEl.title = memoriesTooltip(current.usedMemories, current.preloadedMemories, current.mutedMemories);
+  updateSessionTitle();
+}
+
+// The open session's title, once on screen (session_title.js): its strip
+// card says it when the strip is shown and has one; else the top bar. The
+// browser tab names it too. It follows the card's: a chain link opened with
+// the opener reads its chain's first link's title (cardTitle).
+function updateSessionTitle() {
+  const shown = selected ? sessionsById().get(selected) : null;
+  const first = current.firstPreview || "";
+  const raw = !selected ? "" : (shown && isOpener(first) ? cardTitle(shown) : first);
+  const title = raw === "\u2014" ? "" : raw; // "—": no first message yet
+  const text = topBarTitle({
+    title,
+    cardShown: !!topStripEl.querySelector(".card.active"),
+    stripHidden: document.body.classList.contains("strip-hidden"),
+    allView: allViewOpen(),
+  });
+  if (sessionTitleEl.textContent !== text) sessionTitleEl.textContent = text;
+  if (sessionTitleEl.hidden !== !text) sessionTitleEl.hidden = !text;
+  const tip = text ? title : "";
+  if (sessionTitleEl.title !== tip) sessionTitleEl.title = tip;
+  const tab = tabBase === null ? null : tabTitle({ title, base: tabBase });
+  if (tab !== null && tab !== tabShown) {
+    tabShown = tab;
+    notifications.setBaseTitle(tab);
+  }
 }
 
 // The info bar's ← / → link to a chain's link (chains.js chainNeighbours):
@@ -1990,10 +2106,7 @@ function memoriesTooltip(used, preloaded, muted) {
 }
 
 function currentSessionDuration() {
-  if (liveTurn.running && current.timing.startedAt) {
-    return elapsedSince(current.timing.startedAt);
-  }
-  return current.timing.sessionDurationMs;
+  return sessionDurationNow(current.timing, liveTurn.running);
 }
 
 // The stage takes a running turn's rows (its extras); else the history.
@@ -2024,16 +2137,6 @@ async function mergeTurnTiming(id, data) {
   return true;
 }
 
-function updateFirstPeek() {
-  if (current.ctxPct !== null && current.ctxPct > 20 && current.firstPreview) {
-    firstPeekEl.textContent = current.firstPreview;
-    firstPeekEl.classList.add("visible");
-  } else {
-    firstPeekEl.textContent = "";
-    firstPeekEl.classList.remove("visible");
-  }
-}
-
 function setUsedMemories(names) {
   current.usedMemories = names.slice();
   updateInfoBar();
@@ -2119,7 +2222,6 @@ const streamHandlers = {
     if (pct !== null && !Number.isNaN(pct)) {
       current.ctxPct = pct;
       updateInfoBar();
-      updateFirstPeek();
     }
   },
   generation_started: (data) => {
@@ -2262,6 +2364,12 @@ const streamHandlers = {
       updateInfoBar();
       llmContextControl.refresh();
     }
+    // /thinking (or /model) changed the level the next turn runs at.
+    if (data.thinking) {
+      current.thinking = data.thinking;
+      updateInfoBar();
+      thinkingControl.refresh();
+    }
     if (view.resync) await resync();
     // A card's action that isn't anytime (the step-limit question's
     // /continue) has no bubble: nothing to remove. An anytime or queued
@@ -2308,7 +2416,6 @@ const streamHandlers = {
     if (pct !== null) {
       current.ctxPct = pct;
       updateInfoBar();
-      updateFirstPeek();
     }
   },
   question_requested: (data) => {
@@ -2415,10 +2522,27 @@ function handleCreate() {
 
 async function handleSendTurn() {
   if (current.owner === "tui") return;
-  const prompt = turnText(promptEl.value, chips);
+  let prompt = turnText(promptEl.value, chips);
   if (!prompt) return;
   // An image-only send's text is its placeholders: not for ↑.
   const typed = promptEl.value.trim() !== "";
+  // /cut TEXT and /queue TEXT (the terminals' words for a delivery): the
+  // text as a cut, or the page's own answer (/queue, the bare word).
+  let delivery = null;
+  const choice = steerChoiceRoute(prompt, { running: liveTurn.running && !!selected });
+  if (choice?.reply) {
+    if (selected) addCommandBubble({ label: null, line: prompt, text: choice.reply });
+    else showNotice(choice.reply);
+    promptEl.value = "";
+    fitPrompt();
+    return;
+  }
+  // The composer holds the line as typed until the ack (composerAfterAck).
+  const line = prompt;
+  if (choice) {
+    prompt = choice.send;
+    delivery = choice.delivery || null;
+  }
   if (!selected) {
     // The start page's own reply (a web-local command) or the hint for a
     // typo: neither needs a session, so none is made for it (2.29).
@@ -2432,10 +2556,13 @@ async function handleSendTurn() {
     actionBtn.disabled = true;
     try {
       const s = await createIdleSession({ dir: scope.dir, model: chosenModel(), preview: prompt,
-                                          llm_context: choiceWords(newChatLlmContext) });
+                                          llm_context: choiceWords(newChatLlmContext),
+                                          thinking: newChatThinking || undefined });
       // The choice was for this chat only.
       newChatLlmContext = null;
       renderNewChatLlmContext();
+      newChatThinking = null;
+      renderNewChatThinking();
       addCreatedSession(s);
       await select(s.id);
     } catch (e) {
@@ -2467,16 +2594,15 @@ async function handleSendTurn() {
   const echo = makeUserBubble(prompt, { state: "queued", own: true, images: sending });
   if (!turnDom.holds?.()) historyEl.scrollTop = historyEl.scrollHeight;
   if (!current.firstPreview || current.firstPreview==="—") {
-    current.firstPreview = normalize(prompt).slice(0,80) + (normalize(prompt).length>80?"…":"");
+    current.firstPreview = firstPreview(prompt);
     updateInfoBar();
-    updateFirstPeek();
   }
   actionBtn.disabled = true;
   try {
     for (const chip of sending) {
       if (!chip.ref) chip.ref = await uploadImage(selected, chip.file, chip.name);
     }
-    const ack = await sendTurn(selected, prompt, { clientId, images: turnRefs(sending), history: typed });
+    const ack = await sendTurn(selected, prompt, { clientId, images: turnRefs(sending), history: typed, delivery });
     if (ack?.command_id) {
       // The worker knew it as a command (its list was newer than ours):
       // its command_ran shows it, not a prompt bubble.
@@ -2492,7 +2618,7 @@ async function handleSendTurn() {
     // (and images) go back into the composer, without replacing text typed
     // since (4.13). The composer still holds the text just sent: it goes.
     const restored = restoreOnAck(ack?.enqueued_id, earlyRestores, { myId: clientId, sentIds });
-    promptEl.value = composerAfterAck({ sent: prompt, current: promptEl.value, refill: restored?.refill || "" });
+    promptEl.value = composerAfterAck({ sent: line, current: promptEl.value, refill: restored?.refill || "" });
     fitPrompt();
     clearChips();
     if (restored?.images?.length) setChips(restoredChips(selected, restored.images));
@@ -2572,6 +2698,8 @@ async function runSessionCommand(line) {
 function addCommandBubble(view) {
   removeHintIfEmpty();
   const div = document.createElement("div");
+  // Page-only: kept across a resync of this session (keptCommandBubbles).
+  if (selected) div.dataset.keptFor = selected;
   drawCommandBubble(div, view);
   const follow = isNearBottom();
   appendToHistory(div);
@@ -2650,6 +2778,7 @@ const modelPicker = createModelPicker({
   center: $("#center"),
   onPick: () => {
     renderNewChatLlmContext();
+    renderNewChatThinking();
     promptEl.focus();
   },
 });
@@ -2666,6 +2795,7 @@ async function loadModels() {
   modelPickEl.title = payload.warning ? `The model the new chat starts on · ${payload.warning}` : "The model the new chat starts on";
   modelPickEl.hidden = false;
   renderNewChatLlmContext();
+  renderNewChatThinking();
 }
 // The picker's choice for a create request; nothing (the server's default)
 // while the list is not in.
@@ -2771,7 +2901,9 @@ new ResizeObserver(() => {
   const follow = atHistoryEnd();
   centerEl.style.setProperty("--dock-h", `${dockEl.offsetHeight}px`);
   if (follow) historyEl.scrollTop = historyEl.scrollHeight;
+  placeToast();
 }).observe(dockEl);
+window.addEventListener("resize", () => placeToast());
 
 promptEl.addEventListener("paste", (e) => {
   const files = imageFiles(e.clipboardData);
@@ -2981,6 +3113,23 @@ async function setArchived(id, archive, { undo = true } = {}) {
   showToast(`${what} ${short}`, undo ? { label: "Undo", run: () => setArchived(id, !archive, { undo: false }) } : null);
 }
 
+// The toast sits above the session's composer card (measured: it grows with
+// a wrapping footer or a taller box), so it never covers the card's
+// controls; with no card in sight (the start page, all sessions) the CSS's
+// 24 px from the bottom.
+function placeToast() {
+  const gap = 12;
+  const dock = document.getElementById("dock");
+  const r = dock.getBoundingClientRect();
+  const over = document.body.classList.contains("has-session") && r.height > 0;
+  const bottom = over ? `${Math.round(window.innerHeight - r.top + gap)}px` : "";
+  const root = document.documentElement.style;
+  if (root.getPropertyValue("--toast-bottom") !== bottom) {
+    if (bottom) root.setProperty("--toast-bottom", bottom);
+    else root.removeProperty("--toast-bottom");
+  }
+}
+
 // sticky: stays until its action or its ✕ (else gone after 6 s).
 let toastTimer = null;
 // html: +text+ is markup this page built (its parts escaped), not words.
@@ -2988,6 +3137,7 @@ function showToast(text, action = null, { sticky = false, html = false } = {}) {
   const el = $("#toast");
   el.innerHTML = `<span>${html ? text : escapeHtml(text)}</span>${action ? `<button type="button" class="toast-action">${escapeHtml(action.label)}</button>` : ""}` +
     (sticky ? `<button type="button" class="toast-close" title="Dismiss" aria-label="Dismiss">✕</button>` : "");
+  placeToast();
   el.hidden = false;
   el.querySelector(".toast-action")?.addEventListener("click", () => {
     el.hidden = true;
@@ -3047,6 +3197,7 @@ function applyStripHidden() {
   document.body.classList.toggle("strip-hidden", stripAutoHidden({
     saved: stripHiddenSaved(), short: shortWindow.matches, shownWhileShort: stripShownWhileShort,
   }));
+  updateSessionTitle();
 }
 function setStripHidden(hidden) {
   if (hidden) familyPop.close();

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

@@ -35,10 +35,11 @@ export function listSessions(sort, order, { dir, ...opts } = {}) {
 // it); either left out means the server's default. preview: that message,
 // 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 } = {}) {
+// start page's chip set some; thinking: its own level ("low"), when the
+// start page's think chip set one.
+export function createIdleSession({ dir, model, preview, llm_context: llmContext, thinking, ...opts } = {}) {
   const body = { idle: true, ...(dir ? { dir } : {}), ...(model ? { model } : {}), ...(preview ? { preview } : {}),
-                 ...(llmContext ? { llm_context: llmContext } : {}) };
+                 ...(llmContext ? { llm_context: llmContext } : {}), ...(thinking ? { thinking } : {}) };
   return api("/api/sessions", { method: "POST", body: JSON.stringify(body), ...opts });
 }
 
@@ -90,9 +91,12 @@ export function getSession(id, { tail, recent, turnId, timing, parts, cards, ...
 // opts.images: refs ({file, name}) to images uploaded into the session.
 // history: false keeps the prompt out of the shared prompt history (an
 // image-only send, whose text is only its [image: …] placeholders).
-export function sendTurn(id, prompt, { clientId, images, history = true, ...opts } = {}) {
+// delivery: what the message does to a running turn ("cut": /cut TEXT);
+// none = the server's default (the next step).
+export function sendTurn(id, prompt, { clientId, images, history = true, delivery = null, ...opts } = {}) {
   const body = clientId ? { prompt, client_id: clientId } : { prompt };
   if (images?.length) body.images = images;
+  if (delivery) body.delivery = delivery;
   if (history === false) body.history = false;
   return api(`/api/sessions/${id}/turn`, {
     method: "POST",

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

@@ -94,13 +94,17 @@ export function previewOf(lastPrompt) {
   return normalized;
 }
 
+// A session's first message as the info bar's title: whitespace collapsed,
+// cut at FIRST_PREVIEW_CHARS with an ellipsis ("" for none).
+export function firstPreview(text) {
+  const n = normalize(text);
+  return n.length > FIRST_PREVIEW_CHARS ? `${n.slice(0, FIRST_PREVIEW_CHARS)}\u2026` : n;
+}
+
 export function previewForCard(session) {
   // Unified card preview: first message (80) else previewOf(last_prompt)
   const raw = session.first_preview || session.last_prompt || "";
-  const n = normalize(raw);
-  if (!n) return "\u2014";
-  if (n.length > FIRST_PREVIEW_CHARS) return `${n.slice(0, FIRST_PREVIEW_CHARS)}\u2026`;
-  return n;
+  return firstPreview(raw) || "\u2014";
 }
 
 const DELETE_PREVIEW_CHARS = 40;