samagotchi 0.66.0 → 0.68.0

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

@@ -0,0 +1,179 @@
+// The stage view's cap and frame (stage_view.js): the one place that
+// writes the stage's height, and the stage's own scrolls. The cap: at most
+// ~60% of the page (~80% with the cloud open), and never above the session
+// panel. The frame: held and grow-only while the stage holds a turn
+// (stage_model.js frameTarget), its growth eased. The stage's state comes
+// in as getters (+isHolding+, +isCollapsed+, +isCloudOpen+); what the stage
+// changes of the frame's goes through resetHeld and forgetContent.
+import { frameTarget } from "./stage_model.js";
+import { easeScrollTo } from "./scroll.js";
+
+// The stage grows (a card, the long answer, the cloud opening) with a short
+// ease: deliberate, never a snap.
+const GROW_MS = 180;
+const GROW_EASE = "cubic-bezier(.2,.7,.3,1)";
+// The room between the stage and the composer card (index.html's margin-bottom).
+const STAGE_GAP = 10;
+
+export function reducedMotion() {
+  return matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+// +observed+: the elements whose size changes refit the frame (the stage's
+// slots, in the order they are observed).
+export function createStageFrame({ stage, scroller, status, cloud, queuedSlot, holdEl, asking, extras, dockEl, centerEl, composerEl, observed, isHolding, isCollapsed, isCloudOpen }) {
+  // The frame (fitFrame): the height held while the turn runs and the
+  // tallest content seen.
+  let held = null;
+  let maxContent = 0;
+  let growth = null; // the running ease of the frame's growth (an Animation)
+  let growthTo = 0; // its end height
+
+  // The stage's own scrolls, eased (instant with reduced motion).
+  function easeStage(top) {
+    if (Math.abs(top - scroller.scrollTop) < 1) return;
+    easeScrollTo(scroller, top, { reduce: reducedMotion() });
+  }
+
+  // +fn+ once the frame has grown for a change made now: two frames on (the
+  // ResizeObserver starts the ease in the frame after the change), then at
+  // the ease's end.
+  function afterGrowth(fn) {
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      if (growth?.playState === "running") growth.finished.then(fn, fn);
+      else fn();
+    }));
+  }
+
+  // ── the cap: at most ~60% of the page (~80% with the cloud open), and
+  // never above the session panel (the dock is absolute: a tall composer or
+  // a phone's keyboard would push the stage's top out) ────────────────────
+
+  // Where the stage's scroll goes so +slot+ (the scroller's child) shows:
+  // its end in sight, and the asking text's top too when it and the slot
+  // (a waiting card) fit together (the reply reads from its start, the card
+  // still in sight). null: nothing to show.
+  function revealTop(slot) {
+    if (stage.hidden || slot.hidden) return null;
+    let top = Math.max(scroller.scrollTop, slot.offsetTop + slot.offsetHeight - scroller.clientHeight);
+    if (!asking.hidden && asking.offsetTop < top && slot.offsetTop + slot.offsetHeight - asking.offsetTop <= scroller.clientHeight) top = asking.offsetTop;
+    return top;
+  }
+
+  // Scrolls the stage to show +slot+: eased, or at once (+now+: the cap
+  // dropped under it).
+  function reveal(slot, { now = false } = {}) {
+    const top = revealTop(slot);
+    if (top === null) return;
+    if (now) scroller.scrollTop = top;
+    else easeStage(top);
+  }
+
+  function fitCap() {
+    if (stage.hidden) return;
+    // The composer card and the gap above it (the stage floats over them,
+    // out of the dock's flow).
+    const rest = dockEl.offsetHeight + STAGE_GAP;
+    const room = centerEl.clientHeight - rest - 32;
+    const share = window.innerHeight * (isCloudOpen() ? 0.8 : 0.6);
+    const cap = Math.max(96, Math.round(Math.min(share, room)));
+    const was = capPx();
+    if (cap === was) return;
+    stage.style.setProperty("--stage-max", `${cap}px`);
+    fitFrame();
+    // A smaller cap (a phone's keyboard came up) keeps a waiting card in
+    // sight: the asking text above it would push it out. A larger one
+    // leaves the reader's scroll alone.
+    if (cap < was && stage.classList.contains("waiting")) {
+      requestAnimationFrame(() => reveal(extras, { now: true }));
+    }
+  }
+  new ResizeObserver(() => fitCap()).observe(centerEl);
+  new ResizeObserver(() => fitCap()).observe(composerEl);
+  window.addEventListener("resize", fitCap);
+
+  // ── the frame: the one place that writes the stage's height ────────────
+  // Nothing in the stage view jumps. The rules: the stage is out of the
+  // dock's flow (index.html), so its height never moves the composer; while
+  // it holds a turn its height is held and grow-only (frameTarget), so a
+  // content change happens inside it; growth eases (frameTo); the chip is a
+  // footer no content can push; the hand-off releases the turn at once
+  // (releaseTurn) and empties the stage only after it slid away under the
+  // composer (a transform, then finishFold/clearStage).
+
+  // The stage's height, +px+. +animate+: a growth eases (GROW_MS, Web
+  // Animations: the running ease is +growth+), unless motion is reduced or
+  // the stage is hidden or collapsed; a shrink (the cap dropped) is at once.
+  function frameTo(px, { animate = false } = {}) {
+    const from = stage.offsetHeight;
+    stage.style.height = `${px}px`;
+    if (px === from) return;
+    const ease = animate && px > from && !isCollapsed() && !stage.hidden && !document.hidden && !reducedMotion();
+    if (growth && (!ease || growth.playState !== "running" || growthTo !== px)) {
+      growth.cancel();
+      growth = null;
+    }
+    if (!ease || growth) return;
+    growth = stage.animate([{ height: `${from}px` }, { height: `${px}px` }], { duration: GROW_MS, easing: GROW_EASE });
+    growthTo = px;
+    const run = growth;
+    run.finished.then(() => { if (growth === run) growth = null; }, () => {});
+  }
+
+  // Back to the content's own height (under the cap).
+  function frameFree() {
+    growth?.cancel();
+    growth = null;
+    stage.style.height = "";
+  }
+
+  function capPx() {
+    return parseFloat(stage.style.getPropertyValue("--stage-max")) || Infinity;
+  }
+
+  // The scroller's content height: its last shown slot's end (offsetTop is
+  // the scroller's own, whatever its scroll) and its bottom padding.
+  function contentHeight() {
+    const css = getComputedStyle(scroller);
+    let end = parseFloat(css.paddingTop) || 0;
+    for (const el of scroller.children) {
+      if (el === holdEl || el.hidden || !el.getClientRects().length) continue;
+      end = el.offsetTop + el.offsetHeight;
+    }
+    return end + (parseFloat(css.paddingBottom) || 0);
+  }
+
+  // Holds the frame while the stage holds a turn (stage_model.js
+  // frameTarget: grow-only, clamped by the cap; free when collapsed or
+  // released). Run from a ResizeObserver on the slots (after layout, before
+  // paint: no frame shows the content's own height) and when the cap moves.
+  function fitFrame() {
+    if (stage.hidden || stage.classList.contains("leaving")) return;
+    const content = scroller.hidden ? 0 : contentHeight();
+    const holding = isHolding();
+    const collapsed = isCollapsed();
+    const holds = holding && !collapsed;
+    maxContent = holds ? Math.max(maxContent, content) : 0;
+    const mark = `${Math.max(0, Math.round(maxContent) - 1)}px`;
+    if (holdEl.style.top !== mark) holdEl.style.top = mark;
+    const natural = (stage.offsetHeight - stage.clientHeight) + status.offsetHeight + content + (cloud.hidden || collapsed ? 0 : cloud.offsetHeight)
+      + queuedSlot.offsetHeight;
+    held = frameTarget({ natural, held, cap: capPx(), holding, collapsed });
+    if (held === null) frameFree();
+    else frameTo(held, { animate: true });
+  }
+  const frameObserver = new ResizeObserver(() => fitFrame());
+  for (const el of observed) frameObserver.observe(el);
+
+  return {
+    fitCap,
+    frameFree,
+    afterGrowth,
+    easeStage,
+    reveal,
+    // A new turn, or none: no height held yet.
+    resetHeld: () => { held = null; },
+    // The tallest content seen is forgotten (a new turn, the cloud closed by hand).
+    forgetContent: () => { maxContent = 0; },
+  };
+}

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

@@ -15,9 +15,9 @@ const FILE_TOOLS = new Set(["read", "edit", "write"]);
 const TASK_TOOLS = new Set(["task_wait", "task_get", "task_stop"]);
 const TRAIL = 3;
 // The hand-off waits this long after the stage was last in use.
-export const QUIET_MS = 1500;
+const QUIET_MS = 1500;
 // A touch, wheel or scroll counts as use this long (phones have no hover).
-export const TOUCH_MS = 4000;
+const TOUCH_MS = 4000;
 
 // One headline sentence as plain text: the markdown a streaming answer
 // carries (headings, quotes, bullets, table pipes, emphasis, code ticks,
@@ -124,6 +124,39 @@ export function trailFlashText(flash, mark) {
   return { text, hover: text };
 }
 
+// The status row's mark for an ended turn's phase (liveSlots), none while
+// it runs.
+export const MARKS = { answered: "✓", "no answer": "∅", canceled: "■", failed: "✕" };
+// The mark of a flash in the trail: a warn notice, a hook's info notice,
+// an applied LLM context edit (✂), a steer-cut row and a plugin's nudge (↪).
+export const FLASH_MARKS = { warn: "⚠", info: "ℹ", edit: "✂", steer: "↪" };
+
+// "1 step", "3 steps".
+export function stepsText(n) {
+  return `${n} step${n === 1 ? "" : "s"}`;
+}
+
+// The chip's label: the steps, the calls, and the turn's time when the
+// status row's timing line isn't there to say it (+elapsed+, "" for none).
+export function chipLabelText({ steps, calls, elapsed = "" }) {
+  return `${stepsText(steps)} · ${calls} tool call${calls === 1 ? "" : "s"}${elapsed ? ` · ${elapsed}` : ""}`;
+}
+
+// The status row's step: running, the step it is on; ended, the count,
+// unless the chip says it (+chipHidden+: no chip shows).
+export function stepSlotText({ step, ended, chipHidden }) {
+  return !ended ? `step ${step}` : chipHidden ? stepsText(step) : "";
+}
+
+// The collapsed stage's mini tool in the status row: the running call's
+// name and title, its full command as the hover; "" for both otherwise.
+export function miniToolText({ collapsed, tool }) {
+  return {
+    text: collapsed && tool ? `${tool.name} ${tool.title}` : "",
+    title: (collapsed && tool?.command) || "",
+  };
+}
+
 // While the first step has no thinking and no tool rows the turn is plain:
 // its text streams in the stage's answer slot, as the turn view's
 // chrome-less block streams like a bubble.

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

@@ -0,0 +1,130 @@
+// The stage view's live slots (stage_view.js): the headline, the asking
+// text, the "now" row, the trail and the chip's ticks, each drawn from
+// liveSlots (stage_model.js) and patched only when what it shows changes
+// (+shown+), so an unchanged slot keeps its nodes: a selection in it
+// survives, and its animations never restart (the ticks' blink; the
+// headline's fade restarts on purpose at a new text).
+import { FLASH_MARKS, trailFlashText, trailItemText, trailTone } from "./stage_model.js";
+import { taskCommand, taskStopButton } from "./task_stop.js";
+
+// The stage's one element helper (stage_view.js builds its skeleton with it).
+export function node(tag, cls, parent = null) {
+  const el = document.createElement(tag);
+  if (cls) el.className = cls;
+  if (parent) parent.appendChild(el);
+  return el;
+}
+
+// +headline+, +asking+, +now+, +trail+, +ticks+: the slots' elements.
+// +taskStop+: the page's stopper (task_stop.js), for the stop-task button
+// on a running task_wait; +gens()+ the running turn's gens (the button's
+// command, read at its click); +onChange+ redraws (the stage's
+// scheduleRefresh).
+export function createStageSlots({ headline, asking, now, trail, ticks, taskStop = null, gens, onChange }) {
+  // What each slot shows, so an unchanged slot is left alone.
+  const shown = { headline: null, now: null, trail: null, asking: null };
+
+  function drawHeadline({ text, thinking }) {
+    const key = `${thinking ? "t" : "n"}|${text}`;
+    if (shown.headline === key) return;
+    shown.headline = key;
+    headline.replaceChildren();
+    headline.classList.toggle("thinking", thinking);
+    if (thinking) {
+      const tag = node("span", "ts-think-tag", headline);
+      tag.textContent = "thinking";
+    }
+    headline.appendChild(document.createTextNode(text));
+    headline.classList.remove("fresh");
+    void headline.offsetWidth;
+    headline.classList.add("fresh");
+  }
+
+  // Patched only when the text changes (a late chunk to the closed gen
+  // rewrites the same text): a selection in it survives. A new text reads
+  // from its top.
+  function drawAsking(text) {
+    asking.hidden = !text;
+    if (shown.asking === text) return;
+    shown.asking = text;
+    asking.textContent = text;
+    asking.scrollTop = 0;
+  }
+
+  function drawNow(tool, quiet) {
+    // A task_wait's stop button, as the row's (task_stop.js): in the key
+    // with its in-flight state, so a redraw keeps a clicked one disabled.
+    const stopId = tool?.taskId && taskStop?.target({ tool: "task_wait", status: "running", view: { task_id: tool.taskId } });
+    const stopKey = stopId ? `|stop:${tool.key}:${taskStop.busy(stopId)}` : "";
+    const key = tool ? `run|${tool.name}|${tool.title}|${tool.command || ""}${stopKey}` : `quiet|${quiet}`;
+    if (shown.now === key) return;
+    shown.now = key;
+    now.replaceChildren();
+    now.classList.toggle("running", !!tool);
+    node("span", tool ? "ts-spin" : "ts-idle", now);
+    if (tool) {
+      const name = node("span", `ts-tool ${tool.kind}`, now);
+      name.textContent = tool.name;
+      const title = node("span", "ts-title", now);
+      title.textContent = tool.title;
+      // The full command when the call has one (the title is its first step +N).
+      title.title = tool.command || tool.title;
+      if (stopId) {
+        const command = () => taskCommand(gens(), stopId);
+        now.appendChild(taskStopButton(taskStop, stopId, { command, onChange }));
+      }
+    } else if (quiet) {
+      const word = node("span", "ts-title quiet", now);
+      word.textContent = quiet;
+    }
+  }
+
+  // +flash+: the trail's flash ({ kind, text, until }), shown ahead of the
+  // calls until its time is up.
+  function drawTrail(items, flash) {
+    const flashing = flash && flash.until > Date.now() ? flash : null;
+    const key = JSON.stringify([flashing?.kind, flashing?.text, items]);
+    if (shown.trail === key) return;
+    shown.trail = key;
+    trail.replaceChildren();
+    if (flashing) {
+      const flash = trailFlashText(flashing, FLASH_MARKS[flashing.kind]);
+      const el = node("span", `ts-trail-item ${flashing.kind}`, trail);
+      el.textContent = flash.text;
+      el.title = flash.hover;
+    }
+    for (const item of items) {
+      const tone = trailTone(item.status);
+      const el = node("span", `ts-trail-item${tone ? ` ${tone}` : ""}`, trail);
+      const { text, hover } = trailItemText(item);
+      el.textContent = text;
+      el.title = hover;
+    }
+    if (!flashing && !items.length) node("span", "ts-trail-item none", trail).textContent = "no tool calls yet";
+  }
+
+  function drawTicks(list) {
+    list.forEach((tick, i) => {
+      let el = ticks.children[i];
+      if (!el) {
+        el = node("span", "", ticks);
+        el.setAttribute("role", "button");
+      }
+      const cls = `ts-tick ${tick.kind} ${tick.status}`;
+      if (el.className !== cls) el.className = cls;
+      el.dataset.step = String(tick.step);
+      el.title = `step ${tick.step + 1}`;
+    });
+    while (ticks.children.length > list.length) ticks.lastChild.remove();
+  }
+
+  // A new turn (or none): the slots empty, the asking text hidden, the next
+  // draw of each slot a fresh one.
+  function reset() {
+    for (const slot of [headline, asking, now, trail, ticks]) slot.replaceChildren();
+    asking.hidden = true;
+    shown.headline = shown.now = shown.trail = shown.asking = null;
+  }
+
+  return { drawHeadline, drawAsking, drawNow, drawTrail, drawTicks, reset };
+}