samagotchi 0.78.0 → 0.80.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/images.js

@@ -15,6 +15,39 @@ export function imageFiles(dataTransfer) {
   return files.filter((f) => /^image\//.test(f?.type || ""));
 }
 
+// The server's caps, mirrored so the composer refuses at once what a send
+// would (spec/web/images_spec.rb pins both): ImageStore::MAX_TURN_REFS
+// images a message, Web::App::MAX_IMAGE_UPLOAD_BYTES a file.
+export const MAX_TURN_IMAGES = 20;
+export const MAX_IMAGE_MB = 20;
+const MAX_IMAGE_BYTES = MAX_IMAGE_MB * 1024 * 1024;
+
+function filesText(n) {
+  return n === 1 ? "1 file" : `${n} files`;
+}
+
+// What the composer takes of +files+ (a paste's, a drop's or the image
+// button's picks) while it holds +held+ chips: images only, none over
+// MAX_IMAGE_MB, and no more than MAX_TURN_IMAGES in all. +refused+ says
+// why the rest stayed out, for a toast ("" when none did).
+export function admitImages(files, held = 0) {
+  const take = [];
+  let notImage = 0;
+  let tooBig = 0;
+  let overCap = 0;
+  for (const file of files || []) {
+    if (!/^image\//.test(file?.type || "")) notImage += 1;
+    else if ((file.size || 0) > MAX_IMAGE_BYTES) tooBig += 1;
+    else if (held + take.length >= MAX_TURN_IMAGES) overCap += 1;
+    else take.push(file);
+  }
+  const why = [];
+  if (overCap) why.push(`${filesText(overCap)} not added: at most ${MAX_TURN_IMAGES} images a message`);
+  if (tooBig) why.push(`${filesText(tooBig)} not added: over ${MAX_IMAGE_MB} MB`);
+  if (notImage) why.push(`${filesText(notImage)} not added: not an image`);
+  return { take, refused: why.join(" · ") };
+}
+
 // A pasted screenshot is often called "image.png": number it so the chips
 // (and what the model reads) tell them apart.
 export function chipName(file, index) {

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

@@ -17,7 +17,8 @@
   --diff-add-bg:rgba(26,127,55,.12);--diff-add-text:#116329;--diff-del-bg:rgba(207,34,46,.10);--diff-del-text:#82071e;
   --code-text:#1f2328;--code-keyword:#cf222e;--code-string:#0a3069;--code-comment:#57606a;--code-constant:#0550ae;--code-func:#8250df;--code-type:#953800;
   --card-hover-border:rgba(31,35,40,.18);--on-solid:#fff;--on-warn:#1f2328;--text-hover:#0d1117;--badge-bg:rgba(31,35,40,.06);--badge-ring:rgba(31,35,40,.15);--shadow-strong:rgba(31,35,40,.18);--backdrop:rgba(13,17,23,.85);--toast-shadow:0 6px 24px rgba(31,35,40,.14)}}
-/* Icon masks shared by the phone info bar and the all view's cards (the stroke only shapes the mask; the icon takes currentColor). */
+/* Icon masks shared by the phone info bar, the all view's cards and the composer's image button (the stroke only shapes the mask; the icon takes currentColor). */
+:root{--icon-image: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='2' y='2.75' width='12' height='10.5' rx='1.5'/%3E%3Ccircle cx='5.75' cy='6.25' r='1.1'/%3E%3Cpath d='m2.5 12.5 3.75-3.75 2.5 2.5 1.75-1.75 3 3'/%3E%3C/svg%3E")}
 :root{--icon-archive: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='2' y='2.75' width='12' height='3.5' rx='1'/%3E%3Cpath d='M3.25 6.25v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1v-6M6.5 9h3'/%3E%3C/svg%3E");--icon-unarchive: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='2' y='2.75' width='12' height='3.5' rx='1'/%3E%3Cpath d='M3.25 6.25v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1v-6M8 11.5V8.25M6.5 9.75 8 8.25l1.5 1.5'/%3E%3C/svg%3E")}
 *{box-sizing:border-box;margin:0;padding:0}
 body{font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:radial-gradient(1100px 700px at 8% 0%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 70%),radial-gradient(900px 700px at 100% 100%,color-mix(in srgb,var(--think) 9%,transparent),transparent 70%),var(--bg);background-attachment:fixed;color:var(--text);height:100vh;display:flex;flex-direction:column}
@@ -590,18 +591,26 @@ 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: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}
-#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;
+/* An edge grip: the thin handle on an edge between two panes (the composer's,
+   the latest-sessions strip's). The pill is the handle's look, a 36×4 px bar
+   centred on the edge, drawn on hover, while dragging or focused; the id
+   rules hold each grip's own box: height and margins (they depend on the flex
+   gap around it: none for the composer's, main's 16 px for the strip's) and
+   its own states. */
+.edge-grip{position:relative;z-index:2;cursor:ns-resize;touch-action:none}
+.edge-grip::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}
+.edge-grip:hover::after,.edge-grip.dragging::after{opacity:1}
+.edge-grip:hover::after,.edge-grip.dragging::after{background:var(--accent)}
+.edge-grip:focus-visible{outline:none}
+.edge-grip:focus-visible::after{opacity:1;box-shadow:0 0 0 2px var(--accent-ring)}
+#composeGrip{height:10px;margin:-5px 0}
+#composeGrip:has(+ #composer:hover)::after{opacity:1}
+/* 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)}
 #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. */
@@ -619,6 +628,12 @@ body.has-session.composer-folded #composeGrip::after{opacity:1;width:48px;margin
 #composer .actions-col button{white-space:nowrap;font-size:12px;padding:0 12px;height:28px;min-height:28px;line-height:28px}
 #composer .actions-col .split{order:3;display:flex;gap:4px;margin-left:auto}
 #composer #actionBtn{min-width:64px;font-weight:600}
+/* The image button (app.js: a click opens #attachInput, the hidden file picker; a phone's offers the camera and the photo library):
+   an icon just left of Start / Send, quiet like the model picker; hidden in a session a terminal owns, and on a phone while a turn runs. */
+#composer .actions-col .attach-btn{order:2;flex:none;width:28px;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--text-muted)}
+#composer .actions-col .attach-btn::before{content:"";display:block;width:16px;height:16px;margin:auto;background:currentColor;-webkit-mask:var(--icon-image) center/contain no-repeat;mask:var(--icon-image) center/contain no-repeat}
+#composer .actions-col .attach-btn:hover{filter:none;color:var(--text);background:color-mix(in srgb,var(--bg-hover) 75%,transparent)}
+#composer .actions-col .attach-btn[hidden]{display:none}
 /* In a session the composer is one row: the text field (one line, growing with its text; fitPrompt sets its height)
    and Cancel · Send at its bottom right. The key hint is in the placeholder there, so its row goes. */
 body.has-session #composer{flex-direction:row;align-items:flex-end;padding:10px}
@@ -636,12 +651,12 @@ body.has-session #composer .actions-col{flex-wrap:nowrap;flex-shrink:0}
 /* A fresh link's (body.fresh-link): the session composer is one row and .actions-col is content-sized there, so a px cap keeps the text field's room and Send in view. :not([hidden]) keeps a failed /api/models' hide (this selector outranks the [hidden] one). */
 body.has-session.fresh-link #composer .actions-col .model-pick:not([hidden]){display:inline-block;flex:0 1 auto;min-width:0;max-width:200px}
 @media(max-width:600px){body.has-session.fresh-link #composer .actions-col .model-pick:not([hidden]){max-width:100px}}
-/* The new chat's LLM context chip, after the picker: as quiet as it; accent once a choice is set (the info bar chip's .own). */
+/* The new session's LLM context chip, after the picker: as quiet as it; accent once a choice is set (the info bar chip's .own). */
 #composer .actions-col .llmctx-new{order:0;flex:0 1 auto;min-width:0;max-width:min(40%,260px);height:24px;min-height:24px;line-height:22px;padding:0 6px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--text-muted);font-size:11px;font-weight:400;overflow:hidden;text-overflow:ellipsis}
 #composer .actions-col .llmctx-new:hover{filter:none;color:var(--text);border-color:var(--accent-border);background:var(--accent-bg)}
 #composer .actions-col .llmctx-new.own{color:var(--accent);border-color:var(--accent-border)}
 #composer .actions-col .llmctx-new[hidden],body.has-session #composer .actions-col .llmctx-new{display:none}
-/* The new chat's thinking chip, after it: shorter text, so a smaller share of the row. */
+/* The new session's thinking chip, after it: shorter text, so a smaller share of the row. */
 #composer .actions-col .think-new{max-width:min(25%,140px)}
 /* Phones (the key hint is gone there): the chips keep their whole text and the row wraps, Start staying right (its margin-left:auto) on the last line; only a model name wider than the row ellipsizes. */
 @media(max-width:600px){#composer .actions-col .model-pick{flex:0 1 auto;min-width:0;max-width:100%}#composer .actions-col .llmctx-new,#composer .actions-col .think-new{flex:0 0 auto;max-width:100%}}
@@ -866,7 +881,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}
@@ -975,8 +990,7 @@ body.has-session #notice{display:none}
 #newBtn .brand-new{font-size:12px;color:var(--text-muted);display:none}
 body.has-session #newBtn .brand-new{display:inline}
 #newBtn:hover .brand-new{color:var(--text-2)}
-.strip-side{display:flex;flex-direction:column;gap:6px;min-width:0}
-/* The scope chip: "<project> · all", or "all projects" and where a new chat starts (start page only). */
+/* The scope chip: "<project> · all", or "all projects" and where a new session starts (start page only). */
 #scope{display:inline-flex;align-items:center;gap:8px;min-width:0;font-size:12px;color:var(--text-muted)}
 #scope[hidden]{display:none}
 #scope .scope-name{flex-shrink:0;padding:2px 9px;border:1px solid var(--border-strong);border-radius:999px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
@@ -989,7 +1003,7 @@ body.has-session #newBtn .brand-new{display:inline}
 body.has-session #scope .scope-where{display:none}
 /* A phone has no room for both; the hidden strip's pill (count, live) wins. */
 @media(max-width:600px){body.strip-hidden #scope .scope-where{display:none}}
-/* A phone's top bar stays one row: "chi +" (the rest of "+ new chat" goes),
+/* A phone's top bar stays one row: "chi +" (the rest of "+ new session" goes),
    tighter gaps, nothing wraps, and the "← project" link cuts with an
    ellipsis before the pill does. */
 @media(max-width:600px){
@@ -998,11 +1012,9 @@ body.has-session #scope .scope-where{display:none}
   #newBtn .brand-new-word{display:none}
   #newBtn .brand-new,#scope .scope-back{white-space:nowrap}
   #scope .scope-back{min-width:0;overflow:hidden;text-overflow:ellipsis}
-  #stripShow{padding:3px 8px}
+  #stripStatus{padding:3px 8px}
   #newBtn .brand-new{font-size:16px}
 }
-/* The ▾ glyph draws tiny at the pill's 11 px: at 20 px it is about as tall
-   as the pill text's capitals (phone and desktop alike). */
 /* The bell (notifications): quiet at the top bar's right end; filled in the accent when on, struck through when the browser blocks it. */
 /* The open session's title, when no strip card in sight shows it (session_title.js): the bar's middle, cut with an ellipsis; the whole first message in its tooltip. */
 #sessionTitle{flex:1;min-width:0;font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@@ -1014,10 +1026,10 @@ body.has-session #scope .scope-where{display:none}
 @media(max-width:600px){
   #topBar{flex-wrap:wrap;row-gap:2px}
   #sessionTitle{flex-basis:100%;order:10;font-size:12px}
-  #scope,#stripShow{flex:1 1 0;min-width:0;max-width:max-content}
-  #stripShow{flex-grow:1000;overflow:hidden;text-overflow:ellipsis}
+  #scope,#stripStatus{flex:1 1 0;min-width:0;max-width:max-content}
+  #stripStatus{flex-grow:1000;overflow:hidden;text-overflow:ellipsis}
   #scope .scope-name{flex-shrink:1;min-width:0}
-  #stripShow:has(.live,.waiting) .pill-count{display:none}
+  #stripStatus:has(.live,.waiting) .pill-count{display:none}
 }
 #notifyBtn{margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;min-height:0;background:transparent;border:1px solid transparent;border-radius:999px;color:var(--text-muted)}
 #notifyBtn[hidden]{display:none}
@@ -1028,7 +1040,6 @@ body.has-session #scope .scope-where{display:none}
 #notifyBtn[data-state="on"] .bell{fill:currentColor;fill-opacity:.22}
 #notifyBtn[data-state="denied"]{color:var(--text-faint)}
 #notifyBtn[data-state="denied"] .slash{display:inline}
-#stripShow .pill-arrow{font-size:20px;line-height:0;vertical-align:-3px}
 .card .folder{font-family:ui-monospace,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;color:var(--text-3)}
 .card .parent{font-family:ui-monospace,monospace;white-space:nowrap;color:var(--text-3)}
 #infoBar .meta a.parent{text-decoration:none}
@@ -1098,22 +1109,42 @@ body.no-glass :is(#familyPop,#chainPop){background:var(--bg-panel);-webkit-backd
 .scope-error{grid-column:1/-1;font-size:13px;color:var(--warn-text)}
 .strip-toggle{font-size:11px;padding:3px 10px;background:transparent;color:var(--text-muted);border:1px solid var(--border);border-radius:999px}
 .strip-toggle:hover{color:var(--text-2);border-color:var(--border-strong)}
-#stripShow{display:none;white-space:nowrap;flex-shrink:0}
-#stripShow .live{color:var(--ok-text);white-space:nowrap}
-#stripShow .live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:4px;vertical-align:1px}
-#stripShow .waiting{color:var(--warn-text);white-space:nowrap}
-#stripShow .waiting-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--warn);margin-right:4px;vertical-align:1px}
-#stripHide{align-self:flex-end;border:0;padding:0 2px;border-radius:4px}
-#stripHide:hover{text-decoration:underline;color:var(--text-2)}
-/* A narrow window's strip scrolls sideways, which puts its own "hide ▴" out of sight: the top bar has it instead, where the pill comes back, with a finger-sized target. */
-#stripHideTop{display:none;white-space:nowrap;flex-shrink:0}
+#stripStatus{display:none;white-space:nowrap;flex-shrink:0}
+#stripStatus .live{color:var(--ok-text);white-space:nowrap}
+#stripStatus .live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:4px;vertical-align:1px}
+#stripStatus .waiting{color:var(--warn-text);white-space:nowrap}
+#stripStatus .waiting-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--warn);margin-right:4px;vertical-align:1px}
+/* A narrow window's strip scrolls sideways, and the grip's own target there is thin: the status pill gets a finger-sized one. */
 @media(max-width:900px){
-  body:not(.strip-hidden):not(.all-view) #stripHideTop{display:block}
-  #stripHide{display:none}
-  #stripHideTop,#stripShow{min-height:30px;padding:4px 12px;font-size:12px}
+  #stripStatus{min-height:30px;padding:4px 12px;font-size:12px}
+}
+body.strip-hidden #stripStatus{display:block}
+body.strip-hidden #topStrip, body.all-view #stripStatus{display:none}
+/* The strip's grip (strip_grip.js, app.js): the handle on the edge between the
+   strip and the chat, the composer's twin (the shared .edge-grip look, its own
+   10 px box). Its box is centred on #center's top edge: main's 16 px gap stands
+   on both sides because the box's height and margins add up to -26 px, so the
+   distances stay what they were without it (strip → chat 16 px; hidden, bar →
+   chat 10 px). While the strip shows, the pill is drawn on a hover of the strip
+   or of the grip itself, as the composer's is of its box; hidden, it is the
+   always-on handle that brings the strip back (48 px, as the folded composer's,
+   since it is a control then and not only a hint). */
+#stripGrip{height:10px;margin:-5px 0 -21px}
+#topStrip:hover + #stripGrip::after{opacity:1}
+#stripGrip.will-toggle::after{opacity:1;background:var(--accent)}
+body.strip-hidden #stripGrip::after{opacity:1;width:48px;margin-left:-24px}
+body.all-view #stripGrip{display:none}
+/* A phone has no hover: the pill is always drawn, and the hit zone is 28 px
+   tall, ~96 px wide and centred on the edge (main's gap plus the box: the
+   margins add up to -(28+16)) — the mirror of the composer's phone grip: it
+   reaches 7 px over its own side (below the cards; it never covers one) and
+   21 px into the transcript, with the pill on #center's top edge. The grip sits
+   under the strip, outside its sideways scroller, so a swipe on the cards stays
+   a scroll (touch-action:none is the grip's box, not the strip's). */
+@media(max-width:600px){
+  #stripGrip{width:96px;height:28px;margin:-7px auto -37px}
+  #stripGrip::after{top:5px;opacity:1}
 }
-body.strip-hidden #stripShow{display:block}
-body.strip-hidden #topStrip, body.all-view #stripShow{display:none}
 #allTile{flex:1;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;color:var(--text-2);font-size:13px;font-weight:600;width:100%}
 #allTile .count{font-size:11px;font-weight:400;color:var(--text-muted)}
 #allView{display:none;flex:1;min-height:0;flex-direction:column;gap:12px}
@@ -1213,14 +1244,14 @@ a{color:var(--accent)}
 <body>
 <main>
   <div id="topBar">
-    <button type="button" id="newBtn" class="brand" title="New chat"><span class="brand-name">chi</span><span class="brand-new">+<span class="brand-new-word"> new chat</span></span></button>
+    <button type="button" id="newBtn" class="brand" title="New session"><span class="brand-name">chi</span><span class="brand-new">+<span class="brand-new-word"> new session</span></span></button>
     <div id="scope" hidden></div>
-    <button type="button" class="strip-toggle" id="stripShow" title="Show the latest sessions"><span class="pill-arrow" aria-hidden="true">▾</span> sessions</button>
-    <button type="button" class="strip-toggle" id="stripHideTop" title="Hide the latest sessions"><span class="pill-arrow" aria-hidden="true">▴</span> hide</button>
+    <button type="button" class="strip-toggle" id="stripStatus" title="All sessions, with search"><span class="pill-count">sessions</span></button>
     <span id="sessionTitle" hidden></span>
     <button type="button" id="notifyBtn" aria-label="Notifications" aria-pressed="false" hidden><svg viewBox="0 0 16 16" width="15" height="15" aria-hidden="true"><path class="bell" d="M8 1.75a4 4 0 0 0-4 4v2.6L2.75 10.6v.9h10.5v-.9L12 8.35v-2.6a4 4 0 0 0-4-4Z"/><path class="clapper" d="M6.5 13a1.5 1.5 0 0 0 3 0"/><path class="slash" d="M2.5 2.5l11 11"/></svg></button>
   </div>
   <section id="topStrip" aria-label="Latest sessions" class="loading"><div class="card skeleton"><div class="line long"></div><div class="meta"><span class="line tiny" style="display:inline-block"></span></div></div><div class="card skeleton"><div class="line long"></div><div class="meta"><span class="line tiny" style="display:inline-block"></span></div></div><div class="card skeleton"><div class="line long"></div><div class="meta"><span class="line tiny" style="display:inline-block"></span></div></div></section>
+  <div id="stripGrip" class="edge-grip" tabindex="0" role="button" aria-controls="topStrip" aria-label="Latest sessions" title="Drag up or click to hide the latest sessions"></div>
   <section id="center">
     <div id="stage">
       <div id="markdownWarning" class="markdown-warning" hidden></div>
@@ -1231,7 +1262,7 @@ 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="composeGrip" class="edge-grip" 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>
@@ -1244,11 +1275,13 @@ a{color:var(--accent)}
           <textarea id="prompt" placeholder="Ask chi anything…" aria-controls="commandList" aria-autocomplete="list" aria-expanded="false"></textarea>
         </div>
         <div class="actions-col">
-          <button type="button" id="modelPick" class="model-pick" title="The model the new chat starts on" aria-label="Model for the new chat" aria-haspopup="listbox" aria-expanded="false" hidden><span class="model-pick-name"></span></button>
+          <button type="button" id="modelPick" class="model-pick" title="The model the new session starts on" aria-label="Model for the new session" aria-haspopup="listbox" aria-expanded="false" hidden><span class="model-pick-name"></span></button>
           <button type="button" id="thinkingNew" class="llmctx-new think-new" aria-haspopup="dialog" hidden></button>
           <button type="button" id="llmContextNew" class="llmctx-new" aria-haspopup="dialog" hidden></button>
           <div id="composeHint">Enter to start · Shift+Enter for a newline</div>
           <button id="cancelBtn" title="Cancel the running turn, whoever sent it" style="display:none">Stop turn</button>
+          <button type="button" id="attachBtn" class="attach-btn" title="Add images (or paste or drop them here)" aria-label="Add images" hidden></button>
+          <input type="file" id="attachInput" accept="image/*" multiple hidden>
           <div class="split">
             <button id="actionBtn">Start</button>
           </div>

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

@@ -17,25 +17,25 @@
 //   formClass, popoverClass, nowClass   the form's, popover's and "Now:"
 //            line's own classes
 //   when(fresh)   the form's note on when it applies (fresh: the start
-//            page's new chat, thinking only)
+//            page's new session, thinking only)
 //
-// The start page's new chat (kind NEW_CHAT) has a thinking chip only
+// The start page's new session (kind NEW_SESSION) has a thinking chip only
 // (thinking_chip.js keeps its choice): the form shows the model's level and
 // takes a choice for the next create.
 
 import { createChipPopover } from "./chip_popover.js";
-import { NEW_CHAT, SESSION } from "./llm_context_chip.js";
+import { NEW_SESSION, SESSION } from "./llm_context_chip.js";
 import { html, render } from "./vendor/lit-html.js";
 
 export const DEFAULT = "default";
 
-// The chip: its text, tooltip and whether the session (or the new chat)
+// The chip: its text, tooltip and whether the session (or the new session)
 // set its own; null without a summary (an older worker, or a host the
 // setting means nothing on).
 export function chipModel(cfg, summary, { kind = SESSION } = {}) {
   if (!summary || !summary.level) return null;
   const own = !!summary.own;
-  const what = kind === NEW_CHAT ? "the new chat" : "this session";
+  const what = kind === NEW_SESSION ? "the new session" : "this session";
   const from = own ? what : summary.source || "the model's own";
   const title = `${cfg.name}: ${summary.level} (${from}). Click to change it for ${what}.`;
   return { text: `${cfg.prefix} ${summary.level}${own ? ` · ${kind}` : ""}`, title, own };
@@ -57,16 +57,16 @@ export function nowText(summary) {
 
 const option = (value, label, chosen) => html`<option value=${value} ?selected=${value === chosen}>${label}</option>`;
 
-// The popover's form (a lit-html template). For the new chat (kind
-// NEW_CHAT), +summary+ is the model's and +choice+ the level the form
+// The popover's form (a lit-html template). For the new session (kind
+// NEW_SESSION), +summary+ is the model's and +choice+ the level the form
 // shows; +now+ is the summary its "Now:" line reads (refresh passes a
 // newer one, the rest stays as the form opened).
 export function formTemplate(cfg, summary, { running = false, kind = SESSION, choice = null, now = summary } = {}) {
-  const fresh = kind === NEW_CHAT;
+  const fresh = kind === NEW_SESSION;
   const chosen = (fresh ? choice : summary.own) || DEFAULT;
   const follow = summary.own && !fresh ? "follow the model" : `follow the model (${summary.level})`;
   return html`<form class=${`${cfg.formClass} llmctx-form`}><div class="ctx-pop-head"><strong>${cfg.name}</strong
-    ><span class="ctx-pop-kind">${fresh ? NEW_CHAT : "this session"}</span
+    ><span class="ctx-pop-kind">${fresh ? NEW_SESSION : "this session"}</span
     ><button type="button" class="ctx-pop-close" data-act="close" aria-label="Close">×</button></div
     ><div class=${`ctx-pop-meta ${cfg.nowClass}`}>${nowText(now)}</div
     ><label class="llmctx-field"><span>Level</span><select name="level">${option(DEFAULT, follow, chosen)}${
@@ -79,7 +79,7 @@ export function formTemplate(cfg, summary, { running = false, kind = SESSION, ch
 // el is where the chip is drawn (clicks are delegated: #infoText,
 // info_bar.js); summary(): the open session's summary; session(): its id;
 // running(): a turn runs; run(line): sends the command. The start page's
-// (kind NEW_CHAT): summary() is the picked model's, choice() the pending
+// (kind NEW_SESSION): summary() is the picked model's, choice() the pending
 // level and choose(next) takes a Set's (null for "follow the model"). id
 // and anchor (the chip's selector, by default its data attribute) keep it
 // apart from the other controls on the same element (the anchor defaults
@@ -88,7 +88,7 @@ export function createLevelControl({ cfg, el, summary, session = () => null, run
                                      kind = SESSION, choice = () => null, choose = null,
                                      id, anchor = cfg.anchor,
                                      doc = document, win = window }) {
-  const fresh = kind === NEW_CHAT;
+  const fresh = kind === NEW_SESSION;
   let initial = null;
   // What the open form was drawn from: the model's or session's summary
   // and the form's options.