samagotchi 0.78.0 → 0.79.0

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

@@ -0,0 +1,231 @@
+import { GRIP_OPEN_PX, gripFloor, gripFolds } from "./composer_size.js";
+import { COMPOSER_FOLD_KEY, composerFolded, foldHandle, opensOnKey } from "./composer_fold.js";
+import { readStored, removeStored, writeStored } from "./storage.js";
+
+// The composer's grip and fold (used by app.js): the grip's drag, tap and keys, the
+// fold's state per visit and its page-wide listeners. app.js keeps the box's
+// height (fitPrompt) and the grip's floor (+floor+ / +setFloor+), which
+// fitPrompt reads; the floor is saved under GRIP_KEY.
+export const GRIP_KEY = "chi_composer_floor";
+
+// +session+: the open session's id, or null (the start page). +draft+,
+// +waiting+, +turnRunning+, +allViewOpen+, +lightboxOpen+: what the page
+// shows now. +imageFiles+ / +addImageFiles+: a drop's images and the chips.
+export function createComposerGrip({
+  composeGrip, promptEl, infoCancelBtn, infoBarEl,
+  session, fitPrompt, promptMinPx, floor, setFloor,
+  draft, waiting, turnRunning, allViewOpen, lightboxOpen,
+  imageFiles, addImageFiles,
+  doc = globalThis.document, win = globalThis.window,
+}) {
+  // 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 gripStartTitle = composeGrip.title;
+  let gripWillFold = false;
+  // 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();
+
+  // 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 (session() && 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);
+      setFloor(gripFloor(requested, win.innerHeight, promptMinPx()));
+      fitPrompt();
+      const willFold = !!session() && 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).
+        setFloor(null);
+        removeStored(GRIP_KEY);
+        setComposerFolded(true);
+      } else if (session() && isComposerFolded()) {
+        if (Math.abs(ev.clientY - tapY) < GRIP_OPEN_PX) {
+          setComposerFolded(false);
+          promptEl.focus();
+        }
+      } else {
+        writeStored(GRIP_KEY, String(floor() || ""));
+        // 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 (session() && isComposerFolded()) return;
+    setFloor(null);
+    removeStored(GRIP_KEY);
+    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 (!session() || (e.key !== "Enter" && e.key !== " ")) return;
+    e.preventDefault();
+    if (isComposerFolded()) {
+      setComposerFolded(false);
+      promptEl.focus();
+    } else {
+      setComposerFolded(true);
+    }
+  });
+
+  // ── 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() {
+    return readStored(COMPOSER_FOLD_KEY) === "1";
+  }
+  function isComposerFolded() {
+    return !!session() && composerFolded({ saved: composerFoldSaved(), archivedVisit: foldVisit.archived, visitOpen: foldVisit.open });
+  }
+  function applyComposerFolded() {
+    const folded = isComposerFolded();
+    const was = doc.body.classList.contains("composer-folded");
+    doc.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 {
+      writeStored(COMPOSER_FOLD_KEY, folded ? "1" : "0");
+      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 (session() && 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 && turnRunning() ? "" : "none";
+    if (!session()) {
+      composeGrip.removeAttribute("role");
+      composeGrip.removeAttribute("aria-expanded");
+      composeGrip.title = gripStartTitle;
+      for (const c of ["folded", "draft", "waiting"]) composeGrip.classList.remove(c);
+      return;
+    }
+    const h = foldHandle({ folded, draft: draft(), waiting: folded && 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).
+  doc.addEventListener("keydown", (e) => {
+    if (!isComposerFolded()) return;
+    if (!opensOnKey(e, { active: doc.activeElement, allView: allViewOpen(), lightbox: lightboxOpen() })) return;
+    setComposerFolded(false);
+    promptEl.focus();
+  });
+  // A file dropped on the folded info bar: open (for the visit), then add it.
+  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);
+  });
+
+  return {
+    isComposerFolded,
+    openForVisit,
+    focusPrompt,
+    drawFoldControls,
+    // A new visit (select(), the start page): nothing opened, not decided.
+    newVisit() {
+      foldVisit = newFoldVisit();
+      applyComposerFolded();
+    },
+    // The visit's first getSession answer: an archived session opens folded.
+    decideVisit(archived) {
+      if (foldVisit.decided) return;
+      foldVisit.decided = true;
+      foldVisit.archived = !!archived;
+      applyComposerFolded();
+    },
+  };
+}

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

@@ -594,7 +594,7 @@ body.has-session #composer{flex-wrap:wrap;row-gap:6px}
 #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}
 #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;
+/* Folded (composer_grip.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)}
@@ -866,7 +866,7 @@ 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.
+/* The composer folded away (composer_grip.js: the grip dragged down, Enter/Space on it): 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}

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

@@ -10,6 +10,7 @@
 // ↑/↓ PageUp/PageDown move, ⏎ picks, Esc and Tab close without a change.
 
 import { moveSelection } from "./command_complete.js";
+import { readStored, writeStored } from "./storage.js";
 import {
   MODEL_KEY, RECENT_KEY, groupRows, matchModels, modelRows, pickModel, pushRecent, recentRows, rowNote, rowTitle,
 } from "./model_pick.js";
@@ -39,7 +40,7 @@ function headTemplate(label, note = "") {
 
 function readRecent() {
   try {
-    const list = JSON.parse(localStorage.getItem(RECENT_KEY) || "[]");
+    const list = JSON.parse(readStored(RECENT_KEY) || "[]");
     return Array.isArray(list) ? list : [];
   } catch (_) {
     return [];
@@ -163,10 +164,8 @@ export function createModelPicker({ button, panel, input, list, composer, center
     if (!row) return;
     setChosen(row.name);
     if (remember()) {
-      try {
-        localStorage.setItem(MODEL_KEY, row.name);
-        localStorage.setItem(RECENT_KEY, JSON.stringify(pushRecent(readRecent(), row.name)));
-      } catch (_) {}
+      writeStored(MODEL_KEY, row.name);
+      writeStored(RECENT_KEY, JSON.stringify(pushRecent(readRecent(), row.name)));
     }
     close();
     onPick?.(row.name);

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

@@ -22,6 +22,7 @@ import { createStageFrame, reducedMotion } from "./stage_frame.js";
 import { createInUseWatch } from "./stage_watch.js";
 import { formatDuration } from "./timing.js";
 import { easeScrollTo } from "./scroll.js";
+import { readStored, writeStored } from "./storage.js";
 
 const COLLAPSE_KEY = "chi_stage_collapsed";
 // The turn-end read (markdown, answer_display) settles within this, or the
@@ -41,7 +42,7 @@ const PENDING = ".bubble.question:not(.answered):not(.cancelled), .bubble.contin
 const ASKS = ".plugin-card[data-in-turn] .card-action";
 
 function readCollapsed() {
-  try { return localStorage.getItem(COLLAPSE_KEY) === "1"; } catch (_) { return false; }
+  return readStored(COLLAPSE_KEY) === "1";
 }
 
 // +historyNearBottom+: the history's own follow check (the hand-off scrolls
@@ -289,7 +290,7 @@ export function createStageView({
   function setCollapsed(value) {
     collapsed = value;
     revealed = false;
-    try { localStorage.setItem(COLLAPSE_KEY, value ? "1" : "0"); } catch (_) {}
+    writeStored(COLLAPSE_KEY, value ? "1" : "0");
     applyCollapsed();
   }
 

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

@@ -0,0 +1,23 @@
+// The page's per-browser choices in localStorage, guarded: storage can be
+// missing or throw (a private window, blocked site data, a full quota), and
+// a choice that can't be read or written is just not remembered. Reads
+// globalThis.localStorage at each call, never at import (the specs install
+// their own).
+
+// The stored string, or +fallback+ when there is none or it can't be read.
+export function readStored(key, fallback = null) {
+  try {
+    const value = globalThis.localStorage.getItem(key);
+    return value === null ? fallback : value;
+  } catch (_) {
+    return fallback;
+  }
+}
+
+export function writeStored(key, value) {
+  try { globalThis.localStorage.setItem(key, value); } catch (_) {}
+}
+
+export function removeStored(key) {
+  try { globalThis.localStorage.removeItem(key); } catch (_) {}
+}

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

@@ -37,7 +37,7 @@ export function createToasts({ el, onChange = () => {}, doc = globalThis.documen
   }
 
   function show(text, action = null, { sticky = false } = {}) {
-    const candidate = { el: doc.createElement("div"), timer: null, sticky, key: null };
+    const candidate = { el: doc.createElement("div"), timer: null, sticky, action, key: null };
     candidate.el.className = "toast-item";
     draw(candidate, text, action, sticky);
     candidate.key = candidate.el.querySelector(".toast-message").textContent;
@@ -46,12 +46,13 @@ export function createToasts({ el, onChange = () => {}, doc = globalThis.documen
     if (duplicate) {
       if (duplicate.timer !== null) clearTimeout(duplicate.timer);
       duplicate.timer = null;
-      duplicate.sticky = sticky;
+      duplicate.sticky = sticky || duplicate.sticky;
+      duplicate.action = action || duplicate.action;
       duplicate.key = candidate.key;
-      draw(duplicate, text, action, sticky);
+      draw(duplicate, text, duplicate.action, duplicate.sticky);
       entries.push(...entries.splice(entries.indexOf(duplicate), 1));
       el.appendChild(duplicate.el);
-      if (!sticky) duplicate.timer = setTimeout(() => remove(duplicate), TOAST_MS);
+      if (!duplicate.sticky) duplicate.timer = setTimeout(() => remove(duplicate), TOAST_MS);
       sync();
       return;
     }

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: samagotchi
 version: !ruby/object:Gem::Version
-  version: 0.78.0
+  version: 0.79.0
 platform: ruby
 authors:
 - Dmitry Dedov
@@ -337,6 +337,7 @@ files:
 - lib/samagotchi/llm/adapter_common.rb
 - lib/samagotchi/llm/adapters.rb
 - lib/samagotchi/llm/anthropic_assembly.rb
+- lib/samagotchi/llm/anthropic_binding_recovery.rb
 - lib/samagotchi/llm/anthropic_messages.rb
 - lib/samagotchi/llm/anthropic_wire.rb
 - lib/samagotchi/llm/api_key.rb
@@ -595,6 +596,7 @@ files:
 - lib/samagotchi/web/public/commands.js
 - lib/samagotchi/web/public/composer.js
 - lib/samagotchi/web/public/composer_fold.js
+- lib/samagotchi/web/public/composer_grip.js
 - lib/samagotchi/web/public/composer_size.js
 - lib/samagotchi/web/public/context_chips.js
 - lib/samagotchi/web/public/copy.js
@@ -647,6 +649,7 @@ files:
 - lib/samagotchi/web/public/stage_slots.js
 - lib/samagotchi/web/public/stage_view.js
 - lib/samagotchi/web/public/stage_watch.js
+- lib/samagotchi/web/public/storage.js
 - lib/samagotchi/web/public/stream_handlers.js
 - lib/samagotchi/web/public/strip.js
 - lib/samagotchi/web/public/tally.js