samagotchi 0.79.0 → 0.81.0

data/lib/samagotchi/version.rb

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

data/lib/samagotchi/web/app.rb

@@ -1798,7 +1798,10 @@ module Samagotchi
           # model_segments; none with one model, or from an older file).
           model_segments: Array(source["model_segments"]),
           # The memory indexes the session's prompt holds (the ctx tooltip).
-          memory_index: source["memory_index"]
+          memory_index: source["memory_index"],
+          # The side requests (recap, /btw, ctx.ask_model), apart from the
+          # tokens: the ctx tooltip's own line (nil without any).
+          side: source["side"]
         }
       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";
@@ -66,6 +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 { createStripGrip } from "./strip_grip.js";
 import { waitingOn } from "./notify.js";
 import { applySessionEvent, inTree, sortedByUpdated } from "./sessions_list.js";
 import { createNotifications } from "./notifications.js";
@@ -121,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");
@@ -130,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;
@@ -159,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;
@@ -177,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;
@@ -186,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;
@@ -205,6 +206,8 @@ let pageEditorUrl = null;
 const promptEl = $("#prompt");
 const actionBtn = $("#actionBtn");
 const cancelBtn = $("#cancelBtn");
+const attachBtn = $("#attachBtn");
+const attachInput = $("#attachInput");
 const infoCancelBtn = $("#infoCancelBtn");
 const modelPickEl = $("#modelPick");
 const composeHintEl = $("#composeHint");
@@ -357,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,
@@ -467,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);
@@ -500,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
@@ -544,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) {
@@ -620,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();
@@ -633,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…");
@@ -1535,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("");
@@ -1553,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).
@@ -1624,7 +1629,7 @@ 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).
@@ -1680,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;
@@ -1695,6 +1705,13 @@ 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 ───
 let promptFloor = Number(readStored(GRIP_KEY)) || null;
 
@@ -2093,15 +2110,24 @@ function stripHiddenSaved() {
   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) {
@@ -2115,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) => {

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

@@ -142,14 +142,19 @@ export function ctxBarText(pct, windowSource = null) {
 // bar's; a /model whose new window didn't resolve, no request since:
 // Engine#announce_switched_context! sent usage null) adds "until the next
 // request", which asks for it again.
-export function ctxBarTip(tokens, memoryIndex, window, segments = null) {
+// +side+ (the timing's side block) adds the side requests' line, in the
+// "No request in this session yet" answer too (a /btw before any turn).
+export function ctxBarTip(tokens, memoryIndex, window, segments = null, side = null) {
   if (num(window?.pct) === null) {
-    if (!num(tokens?.prompt_sum) && !num(tokens?.completion_sum)) return "No request in this session yet";
+    if (!num(tokens?.prompt_sum) && !num(tokens?.completion_sum)) {
+      const sideText = sideRequestsText(side);
+      return `No request in this session yet${sideText ? `\nside requests: ${sideText}` : ""}`;
+    }
     const why = window?.afterSwitch ? "Context window unknown until the next request" : "Context window unknown";
-    return tokensTipText(tokens, why, memoryIndex, null, segments);
+    return tokensTipText(tokens, why, memoryIndex, null, segments, side);
   }
 
-  return tokensTipText(tokens, undefined, memoryIndex, window, segments);
+  return tokensTipText(tokens, undefined, memoryIndex, window, segments, side);
 }
 
 // The ctx tooltip's window line ({tokens:, source:, pct:, budget:} the
@@ -198,6 +203,24 @@ export function modelSegmentCostText(row) {
   return [costText(row?.cost_sum), costText(row?.cost_estimate_sum, { estimate: true })].filter(Boolean).join(" + ");
 }
 
+// "3 (recap 2, btw 1) · 14.2k in / 380 out · $0.0012 + ~$0.0009": the
+// session's side requests (the timing's side block: the idle recap, /btw and
+// other ctx.ask_model calls, apart from its turns' totals), the kinds in
+// first-seen order (one kind: its name alone), then the model rows' tokens
+// and cost words on the block; "" without any (the line is hidden). As
+// Formatting#side_requests_text (spec/shared/labels_matrix.json side_requests).
+export function sideRequestsText(side) {
+  if (!side || typeof side !== "object") return "";
+  const requests = num(side.requests) || 0;
+  if (requests <= 0) return "";
+  const kinds = side.by_kind && typeof side.by_kind === "object" ? Object.entries(side.by_kind) : [];
+  const names = kinds.length === 1
+    ? kinds[0][0]
+    : kinds.map(([kind, row]) => `${kind} ${Math.round(num(row?.requests) || 0)}`).join(", ");
+  const head = names ? `${Math.round(requests)} (${names})` : String(Math.round(requests));
+  return [head, modelSegmentTokensText(side), modelSegmentCostText(side)].filter(Boolean).join(" · ");
+}
+
 // "switch prefill 3.0k uncached prompt ≈$0.0060": what the switch to the
 // row's model prefilled (its cost an estimate from the configured price,
 // left out without one); "" for none.
@@ -246,14 +269,16 @@ function modelSegmentLines(segments) {
 // totals. A delegated session keeps its own metrics, so these are this
 // session's only.
 export function tokensTipText(tokens, title = "Context used after the last turn", memoryIndex = null, window = null,
-                              segments = null) {
+                              segments = null, side = null) {
   const memory = memoryIndexText(memoryIndex);
   const memoryLine = memory ? `\nmemory index: ${memory}` : "";
+  const sideText = sideRequestsText(side);
+  const sideLine = sideText ? `side requests: ${sideText}` : "";
   const windowText = ctxWindowText(window);
   if (windowText) title = `${title}\n${windowText}`;
   const prompt = num(tokens?.prompt_sum) || 0;
   const completion = num(tokens?.completion_sum) || 0;
-  if (!prompt && !completion) return `${title}${memoryLine}`;
+  if (!prompt && !completion) return `${title}${sideLine ? `\n${sideLine}` : ""}${memoryLine}`;
   const cached = num(tokens.cached_sum) || 0;
   const reasoning = num(tokens.reasoning_sum) || 0;
   const parts = [`in ${count(prompt)}`];
@@ -262,6 +287,7 @@ export function tokensTipText(tokens, title = "Context used after the last turn"
   const lines = [title, ...modelSegmentLines(segments), `tokens: ${parts.join(" · ")}`];
   const cost = costLine(tokens);
   if (cost) lines.push(cost);
+  if (sideLine) lines.push(sideLine);
   lines.push("this session only, all requests");
   return `${lines.join("\n")}${memoryLine}`;
 }

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)}
+/* 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%}}
@@ -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/info_bar_model.js

@@ -68,7 +68,7 @@ export function infoBarModel({ id, state, sessions, chain, cardTitle, badge, res
   const ctxTip = ctxBarTip(tokens, state.timing.memoryIndex,
                            { tokens: state.ctxWindow, source: state.ctxWindowSource, pct: state.ctxPct,
                              budget: state.llmContext?.budget_tokens, afterSwitch: state.ctxUnknownAfterSwitch },
-                           state.timing.modelSegments);
+                           state.timing.modelSegments, state.timing.side);
   const speedTextNow = lastSpeedText(tokens);
   const avgSpeed = speedText(tokens?.avg_decode_tps, tokens?.tps_source);
   const sessionDuration = sessionDurationNow(state.timing, running);