samagotchi 0.77.0 → 0.78.0

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

@@ -56,7 +56,7 @@ import { actionLine, annotationActions, composerWithAction } from "./annotate_ac
 import { copyText, installCopy } from "./copy.js";
 import { createQuestionCards } from "./question_cards.js";
 import { splitSnapshotCards } from "./card.js";
-import { PROMPT_LINE_PX, PROMPT_MIN_PX, gripFloor, promptHeight } from "./composer_size.js";
+import { GRIP_OPEN_PX, PROMPT_LINE_PX, PROMPT_MIN_PX, gripFloor, gripFolds, promptHeight } from "./composer_size.js";
 import { createCommandList } from "./command_list.js";
 import { createPromptHistory } from "./prompt_history.js";
 import { ALL_SESSIONS_HASH, sessionHash, sessionIdFromHash } from "./route.js";
@@ -64,6 +64,8 @@ import { scopeDir, scopeTemplate } from "./scope.js";
 import { html, nothing, render } from "./vendor/lit-html.js";
 import { easeScrollTo, FOLLOW_MS, shouldFollowScroll } from "./scroll.js";
 import { SHORT_WINDOW_QUERY, stripAutoHidden } from "./strip.js";
+import { COMPOSER_FOLD_KEY, composerFolded, foldHandle, opensOnKey } from "./composer_fold.js";
+import { waitingOn } from "./notify.js";
 import { applySessionEvent, inTree, sortedByUpdated } from "./sessions_list.js";
 import { createNotifications } from "./notifications.js";
 import { tabTitle, topBarTitle } from "./session_title.js";
@@ -132,7 +134,7 @@ const llmContextNewControl = createLlmContextControl({
   choose: (next) => {
     newChatLlmContext = next;
     renderNewChatLlmContext();
-    promptEl.focus();
+    focusPrompt();
   },
   id: "llmContextNewPopover",
   anchor: "#llmContextNew",
@@ -168,7 +170,7 @@ const thinkingNewControl = createThinkingControl({
   choose: (next) => {
     newChatThinking = next;
     renderNewChatThinking();
-    promptEl.focus();
+    focusPrompt();
   },
   id: "thinkingNewPopover",
   anchor: "#thinkingNew",
@@ -202,6 +204,19 @@ let pageEditorUrl = null;
 const promptEl = $("#prompt");
 const actionBtn = $("#actionBtn");
 const cancelBtn = $("#cancelBtn");
+// The composer's fold (composer_fold.js): the grip, which is the handle
+// while folded, and the info bar's Stop turn while folded (the composer's
+// #cancelBtn is folded away then). +gripWillFold+: the drag in progress is
+// past the fold threshold.
+const composeGrip = $("#composeGrip");
+const gripStartTitle = composeGrip.title;
+let gripWillFold = false;
+const infoCancelBtn = $("#infoCancelBtn");
+// This visit's state (a visit is one select() call): opened by the page
+// (a focus, a restored line), archived (decided once, from the visit's
+// first getSession answer).
+const newFoldVisit = () => ({ open: false, archived: false, decided: false });
+let foldVisit = newFoldVisit();
 const modelPickEl = $("#modelPick");
 const composeHintEl = $("#composeHint");
 
@@ -739,9 +754,11 @@ function clearSelection() {
   closeStream();
   setMarkdownWarning(null);
   setCapabilities(null, null);
+  foldVisit = newFoldVisit();
+  applyComposerFolded();
   updateComposerMode();
   updateInfoBar();
-  promptEl.focus();
+  focusPrompt();
 }
 
 // A short line on the start page (the open session went away); gone at the
@@ -774,11 +791,14 @@ async function select(id) {
   closeStream();
   resetSessionState();
   resetTurnView();
+  foldVisit = newFoldVisit();
+  applyComposerFolded();
   updateInfoBar();
   contextChips.load(id);
   updateComposerMode();
   await resync();
-  promptEl.focus();
+  // A folded composer stays folded: typing on the page opens it.
+  focusPrompt({ open: false });
 }
 
 // Clear everything that belongs to one turn's rendering.
@@ -815,6 +835,13 @@ async function resync({ endText = null } = {}) {
       return;
     }
     if (id !== selected) return;
+    // An archived session opens folded: decided once per visit, from its
+    // first answer (the list may not hold it yet, or ever under ?dir).
+    if (!foldVisit.decided) {
+      foldVisit.decided = true;
+      foldVisit.archived = !!data.session?.archived;
+      applyComposerFolded();
+    }
     const kept = keptCommandBubbles(historyEl, id);
     resetTurnView();
     renderSessionView(data, { kept });
@@ -1089,6 +1116,7 @@ function updateInfoBar() {
     archiveBtn.title = buttons.archive.title;
   }
   if (stopBtn) stopBtn.style.display = buttons.stop.shown ? "" : "none";
+  drawFoldControls();
   // No session: the start page hides the info bar (the storage path is on
   // #/sessions). The session clock ticks every second while a turn runs:
   // lit writes its text alone, the bar's other nodes (a tooltip, a button
@@ -1260,6 +1288,8 @@ const streamHandlers = createStreamHandlers({
   composer: {
     empty: () => !promptEl.value.trim() && !chips.length,
     refill: (text) => {
+      // A failed turn's line back: seen, so the composer opens (this visit).
+      openForVisit();
       promptEl.value = text;
       fitPrompt();
     },
@@ -1427,6 +1457,8 @@ async function handleSendTurn({ delivery: chosen = null } = {}) {
     // (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 });
+    // A restored line must be seen: the composer opens for this visit.
+    if (restored?.refill && sentTo === selected) openForVisit();
     promptEl.value = composerAfterAck({ sent: line, current: promptEl.value, refill: restored?.refill || "" });
     fitPrompt();
     clearChips();
@@ -1463,7 +1495,7 @@ async function handleSendTurn({ delivery: chosen = null } = {}) {
     showToast(cantText("send", e), null, { sticky: true });
   } finally {
     actionBtn.disabled = current.owner === "tui";
-    promptEl.focus();
+    focusPrompt();
   }
 }
 
@@ -1488,7 +1520,8 @@ const composerCommands = createComposerCommands({
     clear: () => clearComposer(),
     done: () => {
       actionBtn.disabled = current.owner === "tui";
-      promptEl.focus();
+      // A chip's command (the info bar) leaves a folded composer folded.
+      focusPrompt({ open: false });
     },
   },
 });
@@ -1505,6 +1538,7 @@ function clearComposer() {
 async function handleCancel() {
   if (!selected) return;
   cancelBtn.disabled = true;
+  infoCancelBtn.disabled = true;
   try {
     await cancelTurn(selected);
   } catch (e) {
@@ -1512,6 +1546,7 @@ async function handleCancel() {
     if (e.code !== "not_running") alert(e.message);
   } finally {
     cancelBtn.disabled = false;
+    infoCancelBtn.disabled = false;
   }
 }
 
@@ -1560,7 +1595,7 @@ const modelPicker = createModelPicker({
       renderNewChatLlmContext();
       renderNewChatThinking();
     }
-    promptEl.focus();
+    focusPrompt();
   },
 });
 // A pick on a fresh link: /model in its worker (its command bubble and the
@@ -1652,6 +1687,7 @@ let chips = [];
 function renderChips() {
   render(chipsTemplate(chips), chipsEl);
   chipsEl.hidden = !chips.length;
+  drawFoldControls();
 }
 
 function setChips(list) {
@@ -1668,7 +1704,7 @@ function addImageFiles(files) {
   if (!files.length) return false;
   for (const file of files) chips.push({ file, name: chipName(file, chips.length), src: URL.createObjectURL(file) });
   renderChips();
-  promptEl.focus();
+  focusPrompt();
   return true;
 }
 
@@ -1697,33 +1733,95 @@ function fitPrompt() {
   promptEl.style.overflowY = scrolls ? "auto" : "hidden";
 }
 
-const composeGrip = $("#composeGrip");
+// A drag down past the box folds the composer on release (a session only: the
+// start page's grip only resizes); from folded, a pull up opens it and the box
+// follows the pointer in the same gesture, a tap opens it and focuses the box.
+// No click listener: a click still fires after pointerdown's preventDefault
+// and would toggle twice.
 composeGrip.addEventListener("pointerdown", (e) => {
   e.preventDefault();
   composeGrip.setPointerCapture(e.pointerId);
   composeGrip.classList.add("dragging");
-  const startY = e.clientY;
-  const startH = promptEl.offsetHeight;
+  const tapY = e.clientY;
+  let startY = tapY;
+  let startH = promptEl.offsetHeight;
+  let opened = false;
   const move = (ev) => {
-    promptFloor = gripFloor(startH + (startY - ev.clientY), window.innerHeight, promptMinPx());
+    if (selected && isComposerFolded()) {
+      if (startY - ev.clientY < GRIP_OPEN_PX) return;
+      setComposerFolded(false);
+      opened = true;
+      // Re-based after the unfold (its fitPrompt sized the box: the minimum
+      // when empty, the text's height with a draft).
+      startH = promptEl.offsetHeight;
+      startY = ev.clientY;
+      return;
+    }
+    const requested = startH + (startY - ev.clientY);
+    promptFloor = gripFloor(requested, window.innerHeight, promptMinPx());
     fitPrompt();
+    const willFold = !!selected && gripFolds({ requestedPx: requested, shownPx: promptEl.offsetHeight });
+    if (willFold !== gripWillFold) {
+      gripWillFold = willFold;
+      composeGrip.classList.toggle("will-fold", willFold);
+      drawFoldControls();
+    }
   };
-  const up = () => {
+  const end = () => {
     composeGrip.classList.remove("dragging");
     composeGrip.removeEventListener("pointermove", move);
     composeGrip.removeEventListener("pointerup", up);
-    composeGrip.removeEventListener("pointercancel", up);
-    try { localStorage.setItem(GRIP_KEY, String(promptFloor || "")); } catch (_) {}
+    composeGrip.removeEventListener("pointercancel", cancel);
+    const folds = gripWillFold;
+    gripWillFold = false;
+    composeGrip.classList.remove("will-fold");
+    return folds;
+  };
+  const up = (ev) => {
+    const folds = end();
+    if (folds) {
+      // The next opening starts at the minimum (or the text's height).
+      promptFloor = null;
+      try { localStorage.removeItem(GRIP_KEY); } catch (_) {}
+      setComposerFolded(true);
+    } else if (selected && isComposerFolded()) {
+      if (Math.abs(ev.clientY - tapY) < GRIP_OPEN_PX) {
+        setComposerFolded(false);
+        promptEl.focus();
+      }
+    } else {
+      try { localStorage.setItem(GRIP_KEY, String(promptFloor || "")); } catch (_) {}
+      // A pull that opened the box leaves the focus in it, as a tap does.
+      if (opened) promptEl.focus();
+    }
+    drawFoldControls();
+  };
+  const cancel = () => {
+    end();
+    drawFoldControls();
   };
   composeGrip.addEventListener("pointermove", move);
   composeGrip.addEventListener("pointerup", up);
-  composeGrip.addEventListener("pointercancel", up);
+  composeGrip.addEventListener("pointercancel", cancel);
 });
 composeGrip.addEventListener("dblclick", () => {
+  if (selected && isComposerFolded()) return;
   promptFloor = null;
   try { localStorage.removeItem(GRIP_KEY); } catch (_) {}
   fitPrompt();
 });
+// Enter or Space on the focused handle folds, or opens and focuses the box
+// (a session only; preventDefault: Space would scroll the page).
+composeGrip.addEventListener("keydown", (e) => {
+  if (!selected || (e.key !== "Enter" && e.key !== " ")) return;
+  e.preventDefault();
+  if (isComposerFolded()) {
+    setComposerFolded(false);
+    promptEl.focus();
+  } else {
+    setComposerFolded(true);
+  }
+});
 promptEl.addEventListener("input", fitPrompt);
 window.addEventListener("resize", fitPrompt);
 fitPrompt();
@@ -1806,6 +1904,104 @@ document.addEventListener("keydown", (e) => {
   if (e.key === "Escape" && !lightboxEl.hidden) lightboxEl.hidden = true;
 });
 cancelBtn.addEventListener("click", () => handleCancel());
+infoCancelBtn.addEventListener("click", () => handleCancel());
+
+// ── Composer fold (composer_fold.js) ───────────────────────────────────────
+// Dragging the composer's grip down folds the session's composer away; the
+// grip, now the handle on the info bar's top edge, pulled up or clicked, or
+// typing on the page, brings it back. The user's own choice is saved per
+// browser; an archived session opens folded for its visit, and expanding
+// there saves nothing. The page's own focus or a restored line opens it
+// for the visit only. The start page never folds.
+function composerFoldSaved() {
+  try {
+    return localStorage.getItem(COMPOSER_FOLD_KEY) === "1";
+  } catch (_) {
+    return false;
+  }
+}
+function isComposerFolded() {
+  return !!selected && composerFolded({ saved: composerFoldSaved(), archivedVisit: foldVisit.archived, visitOpen: foldVisit.open });
+}
+function applyComposerFolded() {
+  const folded = isComposerFolded();
+  const was = document.body.classList.contains("composer-folded");
+  document.body.classList.toggle("composer-folded", folded);
+  // Its height was measured while hidden.
+  if (was && !folded) fitPrompt();
+  drawFoldControls();
+}
+// The user's own fold or unfold (the grip, typing): saved, unless this
+// is an archived visit (both are for the visit then).
+function setComposerFolded(folded) {
+  if (foldVisit.archived) {
+    foldVisit.open = !folded;
+  } else {
+    try { localStorage.setItem(COMPOSER_FOLD_KEY, folded ? "1" : "0"); } catch (_) {}
+    foldVisit.open = false;
+  }
+  applyComposerFolded();
+}
+// The page opens it for this visit: nothing saved.
+function openForVisit() {
+  if (!isComposerFolded()) return;
+  foldVisit.open = true;
+  applyComposerFolded();
+}
+// Every focus of the message box: in a session it opens a folded composer
+// for the visit first (+open+ false: only when it shows already).
+function focusPrompt({ open = true } = {}) {
+  if (selected && isComposerFolded()) {
+    if (!open) return;
+    openForVisit();
+  }
+  promptEl.focus();
+}
+// The grip as the fold's handle (its title, marks, aria-expanded) and Stop turn
+// while folded. The start page's grip only resizes: no role, no fold state.
+function drawFoldControls() {
+  const folded = isComposerFolded();
+  infoCancelBtn.style.display = folded && liveTurn.running ? "" : "none";
+  if (!selected) {
+    composeGrip.removeAttribute("role");
+    composeGrip.removeAttribute("aria-expanded");
+    composeGrip.title = gripStartTitle;
+    for (const c of ["folded", "draft", "waiting"]) composeGrip.classList.remove(c);
+    return;
+  }
+  const id = selected;
+  const waiting = folded && !!(waitingOn(allSessions.find((s) => s.id === id)) || questionCards.pendingQuestion());
+  const h = foldHandle({ folded, draft: !!(promptEl.value.trim() || chips.length), waiting });
+  composeGrip.title = gripWillFold ? "Release to hide the message box" : h.title;
+  composeGrip.setAttribute("role", "button");
+  composeGrip.setAttribute("aria-expanded", folded ? "false" : "true");
+  composeGrip.classList.toggle("folded", h.folded);
+  composeGrip.classList.toggle("draft", h.draft);
+  composeGrip.classList.toggle("waiting", h.waiting);
+}
+promptEl.addEventListener("input", () => drawFoldControls());
+// Typing on the page opens a folded composer: the key lands in the box
+// (the class goes before the focus, so the browser types it there).
+document.addEventListener("keydown", (e) => {
+  if (!isComposerFolded()) return;
+  if (!opensOnKey(e, { active: document.activeElement, allView: allViewOpen(), lightbox: !lightboxEl.hidden })) return;
+  setComposerFolded(false);
+  promptEl.focus();
+});
+// A file dropped on the folded info bar: open (for the visit), then add it.
+const infoBarEl = $("#infoBar");
+infoBarEl.addEventListener("dragover", (e) => {
+  if (!isComposerFolded() || ![...(e.dataTransfer?.types || [])].includes("Files")) return;
+  e.preventDefault();
+});
+infoBarEl.addEventListener("drop", (e) => {
+  if (!isComposerFolded()) return;
+  const files = imageFiles(e.dataTransfer);
+  if (!files.length) return;
+  e.preventDefault();
+  openForVisit();
+  addImageFiles(files);
+});
 // The / autocomplete (command_list.js): the session's commands while the
 // composer holds one "/word".
 const commandList = createCommandList({
@@ -1934,9 +2130,10 @@ async function continueSelected() {
 // continue's 201.
 function fillOpener(created) {
   if (promptEl.value.trim() || chips.length) return;
+  openForVisit();
   promptEl.value = openerText(created);
   fitPrompt();
-  promptEl.focus();
+  focusPrompt();
   promptEl.setSelectionRange(promptEl.value.length, promptEl.value.length);
 }
 
@@ -2039,9 +2236,10 @@ function showToast(text, action = null, options = {}) { toasts.show(text, action
 // session's plugins' pills (chi.annotation, annotate_actions.js), which fill
 // the composer with their command line and the quote, or send it at once.
 function fillComposer(text) {
+  openForVisit();
   promptEl.value = text;
   fitPrompt();
-  promptEl.focus();
+  focusPrompt();
   promptEl.setSelectionRange(promptEl.value.length, promptEl.value.length);
   promptEl.scrollTop = promptEl.scrollHeight;
 }

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

@@ -0,0 +1,58 @@
+// The session's composer can fold away for room to read (the info bar under
+// it stays and becomes the page's bottom edge). The user's own fold or
+// unfold is saved per browser (chi_composer_collapsed); an archived
+// session opens folded for that visit; the page expanding it by itself (a
+// focus, a restored line, a quote) opens it for the visit only. A visit is
+// one select() call.
+
+export const COMPOSER_FOLD_KEY = "chi_composer_collapsed";
+
+// Whether the composer is folded: the saved choice or an archived visit,
+// unless this visit opened it.
+export function composerFolded({ saved, archivedVisit, visitOpen }) {
+  if (visitOpen) return false;
+  return !!saved || !!archivedVisit;
+}
+
+// The composer's grip while it is the fold's handle. Expanded it only says
+// how to resize and hide; folded it is drawn as the handle on the info
+// bar's top edge, pulled up or clicked to open, and marked: `draft` (the
+// box holds text or images: folding never clears them: the accent),
+// `waiting` (the attention colour: the session waits on the user, and its
+// card may not take the focus while a draft is there). The title carries
+// the words.
+// @return {title, folded, draft, waiting}
+export function foldHandle({ folded, draft, waiting }) {
+  if (!folded) {
+    return { title: "Drag to make the message box taller, down to hide it (double-click resets)", folded: false, draft: false, waiting: false };
+  }
+  const marked = !!draft;
+  let title = "Pull up or click to write";
+  if (marked) title += " · a draft is in it";
+  if (waiting) title += " · the session waits on you";
+  return { title, folded: true, draft: marked, waiting: !!waiting };
+}
+
+// Whether a key pressed on the page (the composer folded) opens it and
+// lands in the message box: a printable character, not Space (it scrolls,
+// and the turn marker and the stage headline use it), no Ctrl/Meta/Alt,
+// not taken already, not mid-composition, and not while the focus is in a
+// field of its own (an input, textarea, select or contenteditable), the
+// all-sessions view or the lightbox is open. An IME's first key arrives as
+// "Process": it doesn't open it.
+// +active+: document.activeElement.
+export function opensOnKey(e, { active, allView, lightbox }) {
+  if (!e || e.defaultPrevented || e.isComposing) return false;
+  if (e.ctrlKey || e.metaKey || e.altKey) return false;
+  const key = typeof e.key === "string" ? e.key : "";
+  if ([...key].length !== 1 || key === " ") return false;
+  if (allView || lightbox) return false;
+  return !editable(active);
+}
+
+function editable(el) {
+  if (!el) return false;
+  if (el.isContentEditable) return true;
+  const tag = (el.tagName || "").toUpperCase();
+  return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT";
+}

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

@@ -4,6 +4,8 @@ export const PROMPT_MIN_PX = 72; // about three lines of the 15 px field: the st
 export const PROMPT_LINE_PX = 26; // one line (15 px × 1.45 + 4 padding): in a session
 const PROMPT_CAP_SHARE = 0.35; // of the window's height, for growing with text
 const PROMPT_GRIP_SHARE = 0.5; // of the window's height, for the grip
+export const GRIP_FOLD_PX = 32; // a drag down this far past what the box shows folds the composer (on release)
+export const GRIP_OPEN_PX = 8; // a drag up this far from the folded handle opens it; less is a tap
 
 // contentPx: the text's height (scrollHeight plus borders); floorPx: the
 // grip's height, or null; minPx: the empty box's height.
@@ -18,3 +20,11 @@ export function promptHeight({ contentPx, floorPx = null, viewportPx, minPx = PR
 export function gripFloor(px, viewportPx, minPx = PROMPT_MIN_PX) {
   return Math.round(Math.min(Math.max(px, minPx), viewportPx * PROMPT_GRIP_SHARE));
 }
+
+// Whether a grip drag asks to fold the composer: it wants the box at least
+// GRIP_FOLD_PX less than the box actually shows (+shownPx+, after the box
+// fitted itself: with text in it the content sets the height, so measuring
+// against the floor would fold a tall box on a short pull).
+export function gripFolds({ requestedPx, shownPx }) {
+  return shownPx - requestedPx >= GRIP_FOLD_PX;
+}

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

@@ -590,10 +590,25 @@ body.has-session #composer{flex-wrap:wrap;row-gap:6px}
 #lightbox[hidden]{display:none}
 #lightbox img{max-width:96vw;max-height:94vh;border-radius:6px}
 #composer textarea{flex:1 1 auto;min-height:72px;resize:none;background:transparent;border:0;color:var(--text);padding:2px;border-radius:0;font-size:15px;line-height:1.45}
-#composeGrip{position:absolute;left:0;right:0;top:-5px;height:10px;cursor:ns-resize;z-index:2;touch-action:none}
+#composeGrip{position:relative;height:10px;margin:-5px 0;cursor:ns-resize;z-index:2;touch-action:none}
 #composeGrip::after{content:"";position:absolute;left:50%;top:3px;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--border-strong);opacity:0;transition:opacity .12s ease}
-#composer:hover #composeGrip::after,#composeGrip.dragging::after{opacity:1}
+#composeGrip:hover::after,#composeGrip:has(+ #composer:hover)::after,#composeGrip.dragging::after{opacity:1}
 #composeGrip:hover::after,#composeGrip.dragging::after{background:var(--accent)}
+/* Folded (app.js, composer_fold.js): the grip is the handle on the info bar's top edge, drawn always, wider so it reads as a control;
+   draft = the accent, waiting = the attention colour; .will-fold = a drag past the fold threshold (released it hides the box). */
+body.has-session.composer-folded #composeGrip::after{opacity:1;width:48px;margin-left:-24px}
+#composeGrip.draft::after{background:var(--accent)}
+#composeGrip.waiting::after{background:var(--warn)}
+#composeGrip.will-fold::after{opacity:1;background:var(--accent)}
+#composeGrip:focus-visible{outline:none}
+#composeGrip:focus-visible::after{opacity:1;box-shadow:0 0 0 2px var(--accent-ring)}
+/* A phone has no hover: the pill is always there and the hit zone is taller, ~96 px wide and centred (full width would cover the
+   info bar's buttons while folded, the stage card's bottom in the stage view); it reaches 7 px below the edge, the info bar's
+   border and padding, so it never covers a button of the bar. */
+@media(max-width:600px){
+  #composeGrip{width:96px;height:26px;margin:-19px auto -7px}
+  #composeGrip::after{top:17px;opacity:1}
+}
 #composer textarea::placeholder{color:var(--text-faint)}
 /* Key hint: its line is always reserved, so focusing never shifts the layout. */
 #composeHint{order:1;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;line-height:14px;color:var(--text-faint);padding-left:2px;opacity:0;transition:opacity .12s ease;user-select:none}
@@ -851,6 +866,12 @@ body.stage-view .turn-stage{position:absolute;left:0;right:0;bottom:100%;margin-
 #infoBar #infoArchiveBtn:hover{color:var(--text);background:var(--bg-hover)}
 #infoBar #infoDeleteBtn{background:transparent;color:var(--text-muted);border:1px solid transparent}
 #infoBar #infoDeleteBtn:hover{color:var(--on-solid);background:var(--danger-bg);border-color:var(--danger-bg)}
+/* The composer folded away (composer_fold.js, the fold button): the info bar is the page's bottom edge.
+   Stop turn comes into the bar while folded and a turn runs. */
+body.has-session.composer-folded #composer,body.has-session.composer-folded #initRow{display:none}
+body.has-session.composer-folded #infoBar{border-top-color:transparent}
+#infoBar #infoCancelBtn{background:var(--bg-raised);color:var(--danger-text);border:1px solid color-mix(in srgb,var(--danger) 55%,transparent)}
+#infoBar #infoCancelBtn:hover:not(:disabled){color:var(--on-solid);background:var(--danger-bg);border-color:var(--danger-bg)}
 /* The LLM context and thinking chips (llm_context_chip.js, thinking_chip.js): model-like chips that open their popovers; accent when the session set its own. */
 #infoBar .meta .llmctx-chip,#infoBar .meta .think-chip,#infoBar .meta .rh-chip{padding:2px 6px;border-radius:6px;font-size:11px;font-weight:400;border:1px solid transparent;cursor:pointer;font-family:inherit;white-space:nowrap}
 #infoBar .meta .llmctx-chip:hover,#infoBar .meta .think-chip:hover,#infoBar .meta .rh-chip:hover{color:var(--text);border-color:var(--accent-border);background:var(--accent-bg)}
@@ -932,6 +953,8 @@ body.stage-view .turn-stage{position:absolute;left:0;right:0;bottom:100%;margin-
   #infoBar>button::before{content:"";display:block;width:14px;height:14px;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
   #infoBar #infoArchiveBtn{--icon:var(--icon-archive)}
   #infoBar #infoArchiveBtn.archived{--icon:var(--icon-unarchive)}
+  #infoBar #infoContinueBtn{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h9M8.5 4.5 12 8l-3.5 3.5'/%3E%3C/svg%3E")}
+  #infoBar #infoCancelBtn{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='8' height='8' rx='1.5'/%3E%3C/svg%3E")}
   #infoBar #infoStopBtn{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v5.5M4.6 4.4a5 5 0 1 0 6.8 0'/%3E%3C/svg%3E")}
   #infoBar #infoDeleteBtn{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5h11M6 4.5V2.75h4V4.5M4 4.5l.7 8.6a1 1 0 0 0 1 .9h4.6a1 1 0 0 0 1-.9l.7-8.6M6.75 7.25v4.5M9.25 7.25v4.5'/%3E%3C/svg%3E")}
 }
@@ -1208,13 +1231,13 @@ a{color:var(--accent)}
     <div id="lightbox" hidden><img alt=""></div>
     <div id="dock">
       <div id="initRow" role="status" aria-live="polite" hidden></div>
+      <div id="composeGrip" tabindex="0" aria-label="Message box" title="Drag to make the message box taller (double-click resets)"></div>
       <div id="composer" style="position:relative">
         <div id="commandList" role="listbox" aria-label="Commands" hidden></div>
         <div id="modelPanel" hidden>
           <label class="model-search"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><circle cx="7" cy="7" r="4.5"/><path d="M10.5 10.5 14 14" stroke-linecap="round"/></svg><input id="modelSearch" type="text" placeholder="Search models" autocomplete="off" spellcheck="false" role="combobox" aria-label="Search models" aria-autocomplete="list" aria-controls="modelList" aria-expanded="false"></label>
           <div id="modelList" role="listbox" aria-label="Models"></div>
         </div>
-        <div id="composeGrip" title="Drag to make the message box taller (double-click resets)"></div>
         <div id="deliveryLine" aria-live="off" hidden></div>
         <div class="compose-col">
           <div id="chips" hidden></div>
@@ -1234,6 +1257,7 @@ a{color:var(--accent)}
       <div id="infoBar">
         <div class="info" id="infoText"></div>
         <div id="contextChips" aria-label="Attached context" hidden></div>
+        <button class="ghost" id="infoCancelBtn" title="Cancel the running turn, whoever sent it" style="display:none">Stop turn</button>
         <button class="ghost" id="infoContinueBtn" title="Continue: start the next link of this session's chain from its recap (this one is archived)" style="display:none">continue →</button>
         <button class="ghost" id="infoArchiveBtn" title="Archive: hide from the lists, keep for good" style="display:none">archive</button>
         <button class="ghost" id="infoStopBtn" title="Stop session (terminate worker)" style="display:none">stop session</button>

data/lib/samagotchi/worker.rb

@@ -4,6 +4,7 @@ require "fileutils"
 
 require_relative "client_id"
 require_relative "config"
+require_relative "engine"
 require_relative "events"
 require_relative "session"
 require_relative "session_inbox"

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: samagotchi
 version: !ruby/object:Gem::Version
-  version: 0.77.0
+  version: 0.78.0
 platform: ruby
 authors:
 - Dmitry Dedov
@@ -594,6 +594,7 @@ files:
 - lib/samagotchi/web/public/command_view.js
 - lib/samagotchi/web/public/commands.js
 - lib/samagotchi/web/public/composer.js
+- lib/samagotchi/web/public/composer_fold.js
 - lib/samagotchi/web/public/composer_size.js
 - lib/samagotchi/web/public/context_chips.js
 - lib/samagotchi/web/public/copy.js