samagotchi 0.78.0 → 0.80.0

data/lib/samagotchi/version.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Samagotchi
-  VERSION = "0.78.0"
+  VERSION = "0.80.0"
   # Sent as the User-Agent of every HTTP request chi makes.
   USER_AGENT = "chi/#{VERSION}"
 end

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

@@ -24,7 +24,7 @@ import {
 } from "./data.js";
 import { createContextChips } from "./context_chips.js";
 import {
-  chipModel as llmContextChipModel, choiceWords, createLlmContextControl, NEW_CHAT,
+  chipModel as llmContextChipModel, choiceWords, createLlmContextControl, NEW_SESSION,
   withChoice,
 } from "./llm_context_chip.js";
 import {
@@ -38,7 +38,7 @@ import { createShownTexts } from "./shown_texts.js";
 import { MODEL_KEY } from "./model_pick.js";
 import { emptySessionState, sessionStateFrom } from "./session_state.js";
 import { createModelPicker } from "./model_picker.js";
-import { chipName, chipsTemplate, imageFiles, restoredChips, thumbsTemplate, turnRefs, turnText, uploadChips } from "./images.js";
+import { admitImages, chipName, chipsTemplate, imageFiles, restoredChips, thumbsTemplate, turnRefs, turnText, uploadChips } from "./images.js";
 import { normalize, firstPreview, failedTurnText, deleteConfirmText, goneSessionNotice, cantText, withLiveStatus, withoutWorker } from "./format.js";
 import { createTurnView, turnHistoryNodes } from "./turn_view.js";
 import { elementOf, emptyAnswerTemplate } from "./turn_html.js";
@@ -56,7 +56,9 @@ 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 { GRIP_OPEN_PX, PROMPT_LINE_PX, PROMPT_MIN_PX, gripFloor, gripFolds, promptHeight } from "./composer_size.js";
+import { PROMPT_LINE_PX, PROMPT_MIN_PX, promptHeight } from "./composer_size.js";
+import { GRIP_KEY, createComposerGrip } from "./composer_grip.js";
+import { readStored, writeStored } from "./storage.js";
 import { createCommandList } from "./command_list.js";
 import { createPromptHistory } from "./prompt_history.js";
 import { ALL_SESSIONS_HASH, sessionHash, sessionIdFromHash } from "./route.js";
@@ -64,7 +66,7 @@ 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 { createStripGrip } from "./strip_grip.js";
 import { waitingOn } from "./notify.js";
 import { applySessionEvent, inTree, sortedByUpdated } from "./sessions_list.js";
 import { createNotifications } from "./notifications.js";
@@ -120,7 +122,7 @@ const llmContextControl = createLlmContextControl({
   run: (line) => runSessionCommand(line),
 });
 // The start page's LLM context chip, beside the model picker: the picked
-// model's values, and a choice for the next new chat only (sent with its
+// model's values, and a choice for the next new session only (sent with its
 // create, then dropped; never remembered: a reload or opening a session
 // drops it too, a failed create keeps it).
 const llmContextNewEl = $("#llmContextNew");
@@ -129,7 +131,7 @@ const newChatLlmSummary = () => (selected || modelPickEl.hidden ? null : modelPi
 const llmContextNewControl = createLlmContextControl({
   el: llmContextNewEl,
   summary: newChatLlmSummary,
-  kind: NEW_CHAT,
+  kind: NEW_SESSION,
   choice: () => newChatLlmContext,
   choose: (next) => {
     newChatLlmContext = next;
@@ -158,14 +160,14 @@ const reasoningHistoryControl = createReasoningHistoryControl({
   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).
+// for the next new session only (sent with its create, then dropped).
 const thinkingNewEl = $("#thinkingNew");
 let newChatThinking = null;
 const newChatThinkingSummary = () => (selected || modelPickEl.hidden ? null : modelPicker.chosenRow()?.thinking || null);
 const thinkingNewControl = createThinkingControl({
   el: thinkingNewEl,
   summary: newChatThinkingSummary,
-  kind: NEW_CHAT,
+  kind: NEW_SESSION,
   choice: () => newChatThinking,
   choose: (next) => {
     newChatThinking = next;
@@ -176,7 +178,7 @@ const thinkingNewControl = createThinkingControl({
   anchor: "#thinkingNew",
 });
 function renderNewChatThinking() {
-  const chip = thinkingChipModel(withThinkingChoice(newChatThinkingSummary(), newChatThinking), { kind: NEW_CHAT });
+  const chip = thinkingChipModel(withThinkingChoice(newChatThinkingSummary(), newChatThinking), { kind: NEW_SESSION });
   thinkingNewEl.hidden = !chip;
   if (!chip) return thinkingNewControl.close();
   thinkingNewEl.textContent = chip.text;
@@ -185,7 +187,7 @@ function renderNewChatThinking() {
 }
 // Hidden without the model's values (the list not in, an older server).
 function renderNewChatLlmContext() {
-  const chip = llmContextChipModel(withChoice(newChatLlmSummary(), newChatLlmContext), { kind: NEW_CHAT });
+  const chip = llmContextChipModel(withChoice(newChatLlmSummary(), newChatLlmContext), { kind: NEW_SESSION });
   llmContextNewEl.hidden = !chip;
   if (!chip) return llmContextNewControl.close();
   llmContextNewEl.textContent = chip.text;
@@ -204,19 +206,9 @@ 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 attachBtn = $("#attachBtn");
+const attachInput = $("#attachInput");
 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");
 
@@ -368,7 +360,7 @@ const sentIds = new Set();
 const earlyRestores = new Map();
 
 // The page's scope (scope.js): ?dir= is the folder a project view came
-// from (new chats start there); the server names its project, if any.
+// from (new sessions start there); the server names its project, if any.
 const scope = {
   dir: scopeDir(location.search),
   projectName: document.body.dataset.projectName || null,
@@ -478,7 +470,7 @@ function followSelectedSession(sess) {
 
 // The header's scope chip: "<project> · all" in a project view (all links
 // to the same place without ?dir); "all projects" otherwise, with where a
-// new chat starts on the start page.
+// new session starts on the start page.
 function renderScope() {
   const el = $("#scope");
   render(scopeTemplate(scope, { error: scopeError, where: () => ({ hash: location.hash, search: location.search }) }), el);
@@ -511,7 +503,6 @@ const lists = createListsView({
   allViewOpen: () => allViewOpen(),
   openAllView: () => openAllView(),
   leaveAllView: (hash) => leaveAllView(hash),
-  setStripHidden: (hidden) => setStripHidden(hidden),
 });
 
 // Delete a session (the info bar's button, an all-sessions card's ✕) after
@@ -555,7 +546,7 @@ function closeAllView() {
     leaveAllView(sessionHash(selected));
   }
 }
-// Leave all sessions for a place of our own (a picked session, a new chat):
+// Leave all sessions for a place of our own (a picked session, a new session):
 // replace its history entry, since history.back() would come back later
 // with the session the view was opened from.
 function leaveAllView(hash) {
@@ -631,7 +622,7 @@ function updateComposerMode() {
   syncModelPick();
   if (selected) {
     llmContextNewControl.close();
-    // The start page's choice was for a new chat: opening a session drops it.
+    // The start page's choice was for a new session: opening a session drops it.
     if (newChatLlmContext) {
       newChatLlmContext = null;
       renderNewChatLlmContext();
@@ -644,6 +635,9 @@ function updateComposerMode() {
   }
   const running = liveTurn.running && !!selected;
   cancelBtn.style.display = running ? "" : "none";
+  // No images for a session a terminal owns (it takes no message from here);
+  // on a phone none while a turn runs either: Stop turn needs the row's room.
+  attachBtn.hidden = (!!selected && current.owner === "tui") || (running && narrowScreen.matches);
   syncDeliveryLine();
   if (running) {
     setPlaceholder("Running… a message goes in at the next step · Enter to send · Alt+Enter queues", "Steer the turn…");
@@ -754,8 +748,7 @@ function clearSelection() {
   closeStream();
   setMarkdownWarning(null);
   setCapabilities(null, null);
-  foldVisit = newFoldVisit();
-  applyComposerFolded();
+  composerGrip.newVisit();
   updateComposerMode();
   updateInfoBar();
   focusPrompt();
@@ -791,8 +784,7 @@ async function select(id) {
   closeStream();
   resetSessionState();
   resetTurnView();
-  foldVisit = newFoldVisit();
-  applyComposerFolded();
+  composerGrip.newVisit();
   updateInfoBar();
   contextChips.load(id);
   updateComposerMode();
@@ -837,11 +829,7 @@ async function resync({ endText = null } = {}) {
     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();
-    }
+    composerGrip.decideVisit(data.session?.archived);
     const kept = keptCommandBubbles(historyEl, id);
     resetTurnView();
     renderSessionView(data, { kept });
@@ -1552,7 +1540,7 @@ async function handleCancel() {
 
 // The chi logo: back to the empty start, where the composer makes a new
 // session (from all sessions too).
-// The typed draft stays in the composer: paste in a session, then + new chat
+// The typed draft stays in the composer: paste in a session, then + new session
 // starts from it (with the model picker). clearSelection leaves #prompt alone.
 $("#newBtn").addEventListener("click", () => {
   if (allViewOpen()) leaveAllView("");
@@ -1570,7 +1558,7 @@ $("#newBtn").addEventListener("click", () => {
 // tooltip; a route that fails leaves the picker hidden and the server's
 // default in charge. The search list itself is model_picker.js'; a pick
 // sends the focus to the message box.
-const START_PICK_TITLE = "The model the new chat starts on";
+const START_PICK_TITLE = "The model the new session starts on";
 let startPickTitle = START_PICK_TITLE;
 // The fresh link the picker shows (null: the start page, or a session it
 // is hidden in), and a link pick's /model still in flight (a send waits).
@@ -1641,14 +1629,12 @@ function syncModelPick() {
     modelPickEl.setAttribute("aria-label", "Model this link starts on");
   } else {
     modelPickEl.title = startPickTitle;
-    modelPickEl.setAttribute("aria-label", "Model for the new chat");
+    modelPickEl.setAttribute("aria-label", "Model for the new session");
   }
 }
 // Leaving a session: the start page's remembered model again (no fetch).
 function restoreStartPick() {
-  let stored = null;
-  try { stored = localStorage.getItem(MODEL_KEY); } catch (_) {}
-  modelPicker.restore(stored);
+  modelPicker.restore(readStored(MODEL_KEY));
   renderNewChatLlmContext();
   renderNewChatThinking();
 }
@@ -1659,8 +1645,7 @@ async function loadModels() {
   } catch (_) {
     return;
   }
-  let stored = null;
-  try { stored = localStorage.getItem(MODEL_KEY); } catch (_) {}
+  const stored = readStored(MODEL_KEY);
   if (!modelPicker.setModels(payload, stored)) return;
   startPickTitle = payload.warning ? `${START_PICK_TITLE} · ${payload.warning}` : START_PICK_TITLE;
   modelPickEl.hidden = false;
@@ -1700,9 +1685,14 @@ function clearChips() {
   setChips([]);
 }
 
+// A paste's, a drop's or the image button's files: the images the message
+// may still take become chips (images.js admitImages); a toast says why the
+// rest stayed out. Whether any went in.
 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) });
+  const { take, refused } = admitImages(files, chips.length);
+  if (refused) showToast(refused);
+  if (!take.length) return false;
+  for (const file of take) chips.push({ file, name: chipName(file, chips.length), src: URL.createObjectURL(file) });
   renderChips();
   focusPrompt();
   return true;
@@ -1715,10 +1705,15 @@ chipsEl.addEventListener("click", (e) => {
   if (chip?.file && chip.src) URL.revokeObjectURL(chip.src);
   renderChips();
 });
+// The image button: the file picker's images join the chips. Its value is
+// cleared after each pick, so the same file can be picked again.
+attachBtn.addEventListener("click", () => attachInput.click());
+attachInput.addEventListener("change", () => {
+  addImageFiles([...attachInput.files]);
+  attachInput.value = "";
+});
 // ── Composer height: grows with the text; the top-edge grip sets a floor ───
-const GRIP_KEY = "chi_composer_floor";
-let promptFloor = null;
-try { promptFloor = Number(localStorage.getItem(GRIP_KEY)) || null; } catch (_) {}
+let promptFloor = Number(readStored(GRIP_KEY)) || null;
 
 // The empty box: one line in a session, three on the start page.
 function promptMinPx() {
@@ -1733,95 +1728,6 @@ function fitPrompt() {
   promptEl.style.overflowY = scrolls ? "auto" : "hidden";
 }
 
-// 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 tapY = e.clientY;
-  let startY = tapY;
-  let startH = promptEl.offsetHeight;
-  let opened = false;
-  const move = (ev) => {
-    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 end = () => {
-    composeGrip.classList.remove("dragging");
-    composeGrip.removeEventListener("pointermove", move);
-    composeGrip.removeEventListener("pointerup", up);
-    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", 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();
@@ -1906,102 +1812,27 @@ document.addEventListener("keydown", (e) => {
 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 composer's grip and fold (composer_grip.js).
+const composerGrip = createComposerGrip({
+  composeGrip: $("#composeGrip"),
+  promptEl,
+  infoCancelBtn,
+  infoBarEl: $("#infoBar"),
+  session: () => selected,
+  fitPrompt,
+  promptMinPx,
+  floor: () => promptFloor,
+  setFloor: (px) => { promptFloor = px; },
+  draft: () => !!(promptEl.value.trim() || chips.length),
+  waiting: () => !!(waitingOn(allSessions.find((s) => s.id === selected)) || questionCards.pendingQuestion()),
+  turnRunning: () => liveTurn.running,
+  allViewOpen,
+  lightboxOpen: () => !lightboxEl.hidden,
+  imageFiles,
+  addImageFiles,
 });
+// Bound here, not hoisted: no top-level code above this line may call them.
+const { openForVisit, focusPrompt, drawFoldControls } = composerGrip;
 // The / autocomplete (command_list.js): the session's commands while the
 // composer holds one "/word".
 const commandList = createCommandList({
@@ -2275,28 +2106,33 @@ const notifications = createNotifications({ button: $("#notifyBtn") });
 // The latest-sessions strip can be hidden for more chat room; the choice
 // stays per browser (it replaced zen mode, so a zen user starts hidden).
 function stripHiddenSaved() {
-  try {
-    const saved = localStorage.getItem("chi_strip_hidden");
-    return saved === null ? localStorage.getItem("chi_zen") === "1" : saved === "1";
-  } catch (_) {
-    return false;
-  }
+  const saved = readStored("chi_strip_hidden");
+  return saved === null ? readStored("chi_zen") === "1" : saved === "1";
 }
 // A short window hides the strip by itself, so the stage keeps room for a
-// card that waits (its question and choices); the sessions pill brings it
-// back until the window is tall again. Not saved: the saved choice is the
-// user's own hide ▴ / show.
+// card that waits (its question and choices); the grip brings it back
+// until the window is tall again. Not saved: the saved choice is the
+// user's own hide or show.
 const shortWindow = window.matchMedia(SHORT_WINDOW_QUERY);
 let stripShownWhileShort = false;
+// The strip's grip (strip_grip.js): the handle on the edge between the strip
+// and the chat. It is given the hidden state and the toggle; it speaks its own
+// title and aria-expanded, refreshed below after every change.
+const stripGripRefresh = createStripGrip({
+  gripEl: $("#stripGrip"),
+  isHidden: () => document.body.classList.contains("strip-hidden"),
+  setHidden: (hidden) => setStripHidden(hidden),
+});
 function applyStripHidden() {
   document.body.classList.toggle("strip-hidden", stripAutoHidden({
     saved: stripHiddenSaved(), short: shortWindow.matches, shownWhileShort: stripShownWhileShort,
   }));
+  stripGripRefresh();
   updateSessionTitle();
 }
 function setStripHidden(hidden) {
   if (hidden) lists.familyPop.close();
-  try { localStorage.setItem("chi_strip_hidden", hidden ? "1" : "0"); } catch (_) {}
+  writeStored("chi_strip_hidden", hidden ? "1" : "0");
   stripShownWhileShort = !hidden && shortWindow.matches;
   applyStripHidden();
 }
@@ -2305,8 +2141,6 @@ shortWindow.addEventListener("change", () => {
   if (!shortWindow.matches) stripShownWhileShort = false;
   applyStripHidden();
 });
-$("#stripShow").addEventListener("click", () => setStripHidden(false));
-$("#stripHideTop").addEventListener("click", () => setStripHidden(true));
 
 // Esc leaves select mode first, then the all-sessions view.
 document.addEventListener("keydown", (e) => {