samagotchi 0.76.0 → 0.78.0

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

@@ -45,6 +45,7 @@ import { elementOf, emptyAnswerTemplate } from "./turn_html.js";
 import { createBubbles, hintEl, outputBubbleTemplate, setBubbleDelivery } from "./bubbles.js";
 import { createCardsPlace } from "./cards_place.js";
 import { createStageView, FOLD_MS } from "./stage_view.js";
+import { createMarkdownPlace } from "./markdown_place.js";
 import { reducedMotion, STAGE_GAP } from "./stage_frame.js";
 import { chainNeighbours, continueRefusal, continuedText, freshLink, openChildrenTemplate, openerText, openTitle } from "./chains.js";
 import { createTaskStopper } from "./task_stop.js";
@@ -55,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";
@@ -63,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";
@@ -86,6 +89,7 @@ import { liveSlots } from "./stage_model.js";
 import { currentGen } from "./turn_model.js";
 import { toolName } from "./activity.js";
 import { toastBottom } from "./toast_place.js";
+import { createToasts } from "./toasts.js";
 
 const $ = (s) => document.querySelector(s);
 const topStripEl = $("#topStrip");
@@ -130,7 +134,7 @@ const llmContextNewControl = createLlmContextControl({
   choose: (next) => {
     newChatLlmContext = next;
     renderNewChatLlmContext();
-    promptEl.focus();
+    focusPrompt();
   },
   id: "llmContextNewPopover",
   anchor: "#llmContextNew",
@@ -166,7 +170,7 @@ const thinkingNewControl = createThinkingControl({
   choose: (next) => {
     newChatThinking = next;
     renderNewChatThinking();
-    promptEl.focus();
+    focusPrompt();
   },
   id: "thinkingNewPopover",
   anchor: "#thinkingNew",
@@ -200,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");
 
@@ -231,26 +248,25 @@ const viewArgs = {
   // the route (its sidecar features).
   taskStop: createTaskStopper({ sessionId: () => selected, features: () => current.workerFeatures }),
 };
+const markdownPlace = createMarkdownPlace({
+  capabilities: () => pageCapabilities,
+  renderText,
+  roots: () => turnRoots(),
+  touchedFiles,
+  currentDir: () => current.dir,
+  linkRefs,
+  applyFinalAnswer,
+  findInTurnRoots: (selector) => findInTurnRoots(selector),
+  normalize,
+  pairAnswerRefs,
+});
+const { renderMarkdown, linkRefsIn, applyFinalMarkdown, linkTextRefs } = markdownPlace;
 const turnDom = view === "stage"
   ? createStageView({
     ...viewArgs, isNearBottom: () => atHistoryEnd(), dockEl: $("#dock"), centerEl: $("#center"), composerEl,
     renderMarkdown, linkRefs: linkRefsIn,
   })
   : createTurnView(viewArgs);
-// A text the page already shows as its markdown HTML (POST /api/render,
-// sanitised there), or null: markdown off here (no request), or a failed
-// read (the raw text stays).
-function renderMarkdown(text) {
-  if (pageCapabilities.display !== true) return Promise.resolve(null);
-  return renderText(text)
-    .then((d) => (typeof d?.html === "string" && d.html ? d.html : null))
-    .catch(() => null);
-}
-// The `path:line` refs in one rendered text (the stage's asking slot, a
-// kept reply), as linkTextRefs links the answers'.
-function linkRefsIn(el) {
-  linkRefs(el, touchedFiles(turnRoots()), current.dir);
-}
 // Where a running turn's rows can be: the history, and the stage while it
 // holds a turn (lookups by id, copy, annotate, card actions).
 function turnRoots() {
@@ -738,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
@@ -773,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.
@@ -814,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 });
@@ -978,32 +1006,6 @@ async function readTurnEnd() {
   } catch(_){}
 }
 
-// The turn's answer as its rendered markdown and with its plugin refs,
-// once it is final (the turn-end read, an answer_display re-read:
-// answer_refs.js applyFinalAnswer); then the refs.
-function applyFinalMarkdown(messages) {
-  applyFinalAnswer(messages, findInTurnRoots(".bubble.output"), normalize);
-  linkTextRefs();
-}
-
-// The refs on the answers' and closed steps' texts, on this page: first
-// each answer's own (a plugin's, answer_refs.js), then the `path:line`
-// refs that name a file the session's rows (and cards) touched
-// (ref_scan.js), which leave a plugin's alone. Not mid-stream: at a
-// turn's end and after a reload's render. A ref already made stays as it
-// is.
-function linkTextRefs() {
-  const roots = turnRoots();
-  const touched = touchedFiles(roots);
-  for (const root of roots) {
-    for (const el of root.querySelectorAll(".bubble.output")) pairAnswerRefs(el);
-  }
-  if (!touched.size) return;
-  for (const root of roots) {
-    for (const el of root.querySelectorAll(".bubble.output, .gen:not(.live) > .gen-text")) linkRefs(el, touched, current.dir);
-  }
-}
-
 function seedSeenFromDom() {
   shownTexts.seed(findInTurnRoots(".bubble").map((b) => normalize(b.textContent)));
 }
@@ -1114,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
@@ -1285,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();
     },
@@ -1452,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();
@@ -1488,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();
   }
 }
 
@@ -1513,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 });
     },
   },
 });
@@ -1530,6 +1538,7 @@ function clearComposer() {
 async function handleCancel() {
   if (!selected) return;
   cancelBtn.disabled = true;
+  infoCancelBtn.disabled = true;
   try {
     await cancelTurn(selected);
   } catch (e) {
@@ -1537,6 +1546,7 @@ async function handleCancel() {
     if (e.code !== "not_running") alert(e.message);
   } finally {
     cancelBtn.disabled = false;
+    infoCancelBtn.disabled = false;
   }
 }
 
@@ -1585,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
@@ -1677,6 +1687,7 @@ let chips = [];
 function renderChips() {
   render(chipsTemplate(chips), chipsEl);
   chipsEl.hidden = !chips.length;
+  drawFoldControls();
 }
 
 function setChips(list) {
@@ -1693,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;
 }
 
@@ -1722,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();
@@ -1831,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({
@@ -1959,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);
 }
 
@@ -2053,33 +2225,21 @@ function placeToast() {
     else root.removeProperty("--toast-bottom");
   }
 }
+const toasts = createToasts({ el: $("#toast"), onChange: placeToast });
 // The model panel opening, closing or changing height (its list filters).
 new ResizeObserver(() => placeToast()).observe(document.getElementById("modelPanel"));
 
-// sticky: stays until its action or its ✕ (else gone after 6 s). +text+:
-// words, or a template (chains.js openChildrenTemplate: a link in it, a
-// delegate a continue waits for, opens that session and hides the toast).
-let toastTimer = null;
-function showToast(text, action = null, { sticky = false } = {}) {
-  const el = $("#toast");
-  const hide = () => { el.hidden = true; };
-  render(html`<span @click=${(e) => { if (e.target.closest?.("a[href]")) hide(); }}>${text}</span>${action
-    ? html`<button type="button" class="toast-action" @click=${() => { hide(); action.run(); }}>${action.label}</button>`
-    : nothing}${sticky ? html`<button type="button" class="toast-close" title="Dismiss" aria-label="Dismiss" @click=${hide}>✕</button>` : nothing}`, el);
-  el.hidden = false;
-  placeToast();
-  clearTimeout(toastTimer);
-  if (!sticky) toastTimer = setTimeout(hide, 6000);
-}
+function showToast(text, action = null, options = {}) { toasts.show(text, action, options); }
 
 // Annotate (annotate_bar.js): a selection in the conversation offers
 // "Annotate" and the presets, which append a quote to the composer, and the
 // 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/ctx.js

@@ -208,6 +208,17 @@ export function modelSegmentPrefillText(row) {
   return `switch prefill ${countK(tokens)} uncached prompt${cost ? ` ≈${cost}` : ""}`;
 }
 
+// A ref past +max+ characters with its middle cut to one "…":
+// the tooltip is a native title, which grows as wide as its longest line.
+// The host's start and the model's end stay; the model chip has the full ref.
+const TIP_REF_MAX = 40;
+export function shortRef(text, max = TIP_REF_MAX) {
+  const chars = [...text];
+  if (chars.length <= max) return text;
+  const head = Math.floor((max - 1) / 3);
+  return `${chars.slice(0, head).join("")}…${chars.slice(chars.length - (max - 1 - head)).join("")}`;
+}
+
 // The tooltip's rows per model, with ≥ 2 (one model: none): "model ·
 // turns · in / out · cost", a switch's prefill under its row.
 function modelSegmentLines(segments) {
@@ -215,7 +226,7 @@ function modelSegmentLines(segments) {
   const lines = ["per model:"];
   for (const row of segments) {
     const turns = num(row.turns) || 0;
-    const parts = [modelSegmentLabel(row), `${turns} ${turns === 1 ? "turn" : "turns"}`, modelSegmentTokensText(row)];
+    const parts = [shortRef(modelSegmentLabel(row)), `${turns} ${turns === 1 ? "turn" : "turns"}`, modelSegmentTokensText(row)];
     const cost = modelSegmentCostText(row);
     if (cost) parts.push(cost);
     lines.push(`  ${parts.join(" · ")}`);