samagotchi 0.143.0 → 0.145.0

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

@@ -1,12 +1,13 @@
 // 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, 85% for the rest of a turn
-// whose question got the question room), 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
+// ~60% of the page (~80% with the cloud open, 85% from a card that needs the
+// room until the next step: a long reply's question, a tall approval), 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 next
+// step after an answered card lets it go once (forgetContent). The stage's state comes
 // in as getters (+isHolding+, +isCollapsed+, +isCloudOpen+, +isRoomCap+);
 // what the stage changes of the frame's goes through resetHeld and
-// forgetContent.
+// forgetContent. +waitingCard+: the card blocking the turn, or null.
 import { frameTarget } from "./stage_model.js";
 import { easeScrollTo } from "./scroll.js";
 
@@ -21,6 +22,11 @@ export const STAGE_GAP = 10;
 const SHARE = 0.6;
 const CLOUD_SHARE = 0.8;
 const ROOM_SHARE = 0.85;
+// A waiting card read from its top sits this far under the scroller's edge
+// (the scroller's own top padding).
+const CARD_TOP_GAP = 8;
+// A card this much in the stage's view counts as in sight.
+const CARD_SEEN = 40;
 
 export function reducedMotion() {
   return matchMedia("(prefers-reduced-motion: reduce)").matches;
@@ -28,7 +34,7 @@ export function reducedMotion() {
 
 // +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, observed, isHolding, isCollapsed, isCloudOpen, isRoomCap = () => false }) {
+export function createStageFrame({ stage, scroller, status, cloud, queuedSlot, holdEl, asking, extras, dockEl, centerEl, observed, isHolding, isCollapsed, isCloudOpen, isRoomCap = () => false, waitingCard = () => null }) {
   // The frame (fitFrame): the height held while the turn runs and the
   // tallest content seen.
   let held = null;
@@ -53,7 +59,7 @@ export function createStageFrame({ stage, scroller, status, cloud, queuedSlot, h
   }
 
   // ── the cap: at most ~60% of the page (~80% with the cloud open, 85%
-  // once the turn's question got the room), and never above the session
+  // while a card has the room), 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) ──────────────────────────────────────
 
@@ -62,11 +68,16 @@ export function createStageFrame({ stage, scroller, status, cloud, queuedSlot, h
   // (a waiting card) fit together (the reply reads from its start, the card
   // still in sight). +fromStart+ (the question room's arrival): the asking
   // text's top even when they don't (the card is reached by the stage's
-  // jump pill, stage_view.js). null: nothing to show.
+  // jump pill, stage_view.js). A waiting card in +slot+ taller than the
+  // view reads from its top, never from its options: the question and what
+  // it approves are what the answer is about; the options are a scroll away.
+  // null: nothing to show.
   function revealTop(slot, { fromStart = false } = {}) {
     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 && (fromStart || slot.offsetTop + slot.offsetHeight - asking.offsetTop <= scroller.clientHeight)) top = asking.offsetTop;
+    const card = waitingCard();
+    if (card && slot.contains(card)) top = Math.min(top, Math.max(0, card.offsetTop - CARD_TOP_GAP));
     return top;
   }
 
@@ -81,6 +92,36 @@ export function createStageFrame({ stage, scroller, status, cloud, queuedSlot, h
     else easeStage(top);
   }
 
+  // Some of the waiting card shows in the stage's view (no card: nothing
+  // says otherwise).
+  function cardInSight() {
+    const card = waitingCard();
+    if (!card) return true;
+    const top = scroller.scrollTop;
+    return card.offsetTop + CARD_SEEN <= top + scroller.clientHeight && card.offsetTop + card.offsetHeight - CARD_SEEN >= top;
+  }
+
+  // The cap dropped under a waiting card in sight (a phone's keyboard, a
+  // rotation): it stays in sight. Someone typing in it keeps their field;
+  // while some of it still shows, the reader's scroll is left alone.
+  function keepCardInSight() {
+    const card = waitingCard();
+    const field = document.activeElement;
+    if (card?.contains(field) && field.matches('textarea, input:not([type="radio"], [type="checkbox"])')) {
+      field.scrollIntoView({ block: "nearest" });
+      return;
+    }
+    if (!card || !cardInSight()) reveal(card?.parentElement ?? extras, { now: true });
+  }
+
+  // +card+ fits the stage's view at the cap now: it, the scroller's padding
+  // and the stage's rows around the scroller.
+  function fitsCap(card) {
+    const css = getComputedStyle(scroller);
+    const around = stage.offsetHeight - scroller.offsetHeight + (parseFloat(css.paddingTop) || 0) + (parseFloat(css.paddingBottom) || 0);
+    return card.offsetHeight + around <= capPx();
+  }
+
   function fitCap() {
     if (stage.hidden) return;
     // The composer card and the gap above it (the stage floats over them,
@@ -91,14 +132,15 @@ export function createStageFrame({ stage, scroller, status, cloud, queuedSlot, h
     const cap = Math.max(96, Math.round(Math.min(share, room)));
     const was = capPx();
     if (cap === was) return;
+    // Read before the cap changes the view. A reader who scrolled away from
+    // the card isn't brought back to it.
+    const keep = cap < was && stage.classList.contains("waiting") && cardInSight();
     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 }));
-    }
+    if (keep) requestAnimationFrame(keepCardInSight);
   }
   // The whole dock, not only its composer card: the info bar under it
   // fills and wraps after a load (the session's facts arrive), and a cap
@@ -111,7 +153,8 @@ export function createStageFrame({ stage, scroller, status, cloud, queuedSlot, h
   // 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
+  // content change happens inside it (the next step after an answered card
+  // lets it go once: forgetContent); 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).
@@ -182,6 +225,7 @@ export function createStageFrame({ stage, scroller, status, cloud, queuedSlot, h
 
   return {
     fitCap,
+    fitsCap,
     frameFree,
     afterGrowth,
     easeStage,
@@ -189,7 +233,8 @@ export function createStageFrame({ stage, scroller, status, cloud, queuedSlot, h
     // A new turn, or none: no height held yet.
     resetHeld: () => { held = null; },
     // The tallest content seen and the height held for it are forgotten (a
-    // new turn, the cloud closed by hand): the frame refits to what shows now.
+    // new turn, the cloud closed by hand, the next step after an answered
+    // card): the frame refits to what shows now.
     forgetContent: () => {
       maxContent = 0;
       held = null;

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

@@ -198,7 +198,8 @@ export function liveSlots(turn, { narration = "", thinking = "", pending = false
 
 // The stage's frame height (px) while it holds a turn: grow-only, so a
 // content change inside it (the plain flip, an answered card, a short
-// answer) never moves its top edge. +natural+: its content's own height;
+// answer) never moves its top edge. (Its one shrink forgets +held+: the next
+// step after an answered card, stage_view.js releaseHeldWait.) +natural+: its content's own height;
 // +held+: the height it holds (null: none yet); +cap+: --stage-max. A lower
 // cap (a phone's keyboard) clamps it at once and the clamp is the new held
 // height: a cap that rises again doesn't bring the old one back, only new

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

@@ -36,6 +36,10 @@ const FLASH_MS = 4000;
 const ANSWER_SEEN = 72;
 // A short answer cut by less than this at its foot isn't scrolled to.
 const ANSWER_CUT = 12;
+// An answered card's one line.
+const ANSWERED_LINE = 40;
+// That line brought back sits this far under the scroller's edge.
+const ANSWERED_GAP = 8;
 const PENDING = ".bubble.question:not(.answered):not(.cancelled), .bubble.continue:not(.resolved)";
 // A running turn's card with actions (check-in's Nudge / Keep going / Stop)
 // asks the user too, but the turn goes on: it waits only while the turn runs
@@ -45,6 +49,9 @@ const ASKS = ".plugin-card[data-in-turn] .card-action";
 // the step limit, a hook's question or a delegate's relayed one): the one
 // card whose long asking text gets the question room.
 const ASK_CARD = '.bubble.question[data-kind="question"]:not([data-relay])';
+// A blocking approval, a delegate's relayed one too: too tall for the stage's
+// view, it gets the question room's raised cap (raiseForApproval).
+const APPROVAL_CARD = '.bubble.question[data-kind="approval"]';
 
 function readCollapsed() {
   return readStored(COLLAPSE_KEY) === "1";
@@ -188,8 +195,9 @@ export function createStageView({
   let bare = false;
   let foldTimer = null;
   // The question room (drawRoom): the pending ask card whose asking text
-  // overflowed its cap, and the turn's raised cap (stage_frame.js; kept
-  // until the next turn: the frame is grow-only).
+  // overflowed its cap; and the raised cap (stage_frame.js), which an
+  // approval too tall for the stage gets too (raiseForApproval), kept until
+  // the next step (releaseHeldWait).
   let roomCard = null;
   let roomCap = false;
   // What the overflow was measured for ({ card, text }): measured once the
@@ -256,8 +264,8 @@ export function createStageView({
   // The question room: while a model's own question waits and its asking
   // text didn't fit its cap, the slot loses its cap and the stage's one
   // scroll reads the whole reply (index.html .question-room); the cap rises
-  // for the rest of the turn. The card keeps the room until it stops
-  // pending (+text+: the asking text drawn).
+  // until the next step. The card keeps the room until it stops pending
+  // (+text+: the asking text drawn).
   function drawRoom(blocked, text) {
     const ask = blocked ? askCard() : null;
     if (roomCard && ask === roomCard) return;
@@ -290,6 +298,18 @@ export function createStageView({
     }
   }
 
+  // A blocking approval too tall for the stage's view: the same raised cap,
+  // the stage takes what the page has. The card still opens at its question
+  // and command (stage_frame.js revealTop), so no room class and no pill. The
+  // cap is a ceiling: a card that fits never gets here.
+  function raiseForApproval(blocked) {
+    if (!blocked || roomCap) return;
+    const card = extras.querySelector(PENDING) || tail.querySelector(PENDING);
+    if (!card?.matches(APPROVAL_CARD) || frame.fitsCap(card)) return;
+    roomCap = true;
+    frame.fitCap();
+  }
+
   // The pill: the room's card out of the stage's view, once its arrival
   // reveal has run, the stage open.
   function drawPill() {
@@ -338,13 +358,13 @@ export function createStageView({
     const wasWaiting = stage.classList.contains("waiting");
     if (blocked && !wasWaiting) {
       stage.classList.add("held-wait");
-      live.style.minHeight = "";
     }
     if (!blocked && wasWaiting) stage.style.setProperty("--live-held", `${live.offsetHeight}px`);
     stage.classList.toggle("plain", plain);
     stage.classList.toggle("ended", !!endKind);
     cancel.hidden = !onCancel || !!endKind;
     stage.classList.toggle("waiting", blocked);
+    if (!blocked && wasWaiting) settleAnsweredCard();
     stage.classList.toggle("asking", !!slots.asking);
     stage.dataset.phase = slots.phase;
     mark.textContent = MARKS[slots.phase] || "";
@@ -353,6 +373,7 @@ export function createStageView({
     slotsView.drawHeadline(slots.headline);
     slotsView.drawAsking(slots.asking, slots.askingRefs);
     drawRoom(blocked, slots.asking);
+    raiseForApproval(blocked);
     drawPill();
     slotsView.drawNow(slots.tool, slots.quiet);
     slotsView.drawTrail(slots.trail, flash);
@@ -386,6 +407,20 @@ export function createStageView({
     tail.hidden = !tail.firstChild;
   }
 
+  // A card stopped waiting and its slot has its cap and own scroll again: the
+  // slot's end shows (the answered card's line). The stage's scroll stays, so
+  // nothing moves at the tap (the frame holds, and the blank goes at the next
+  // step), unless the reader had scrolled down the tall card past its line:
+  // then the line comes back, to the view's top and no further.
+  function settleAnsweredCard() {
+    const slot = tail.firstChild ? tail : extras;
+    if (!slot.firstChild) return;
+    slot.scrollTop = slot.scrollHeight;
+    const end = slot.offsetTop + slot.offsetHeight;
+    if (scroller.scrollTop <= end - ANSWERED_LINE) return;
+    scroller.scrollTop = Math.max(0, Math.min(slot.lastElementChild.offsetTop, end - ANSWERED_LINE) - ANSWERED_GAP);
+  }
+
   // The prompt's first words (the working set's session tags say whose
   // turn a step was).
   function promptWords() {
@@ -393,23 +428,18 @@ export function createStageView({
     return text.length > 60 ? `${text.slice(0, 59)}\u2026` : text;
   }
 
-  // The next step: the live slots' waiting height is let go. In a turn
-  // with the question room that height was the whole reply's: it goes as
-  // far as the stage's scroll absorbs it (the scroll moves up by as much,
-  // in the same task: the card in view stays put), the rest kept as the
-  // live slots' least height until the next wait or turn.
+  // The next step after a blocking card's answer: the one time a turn's
+  // frame shrinks (stage_frame.js forgetContent; grow-only otherwise). What
+  // the wait held goes together: the live slots' waiting height, a raised
+  // cap, the tallest content seen. +held-wait+ says it is due, so a later
+  // step, or a generation with the card still waiting, changes nothing.
   function releaseHeldWait() {
-    const held = roomCap && stage.classList.contains("held-wait") && !stage.classList.contains("waiting");
-    const before = held ? live.offsetHeight : 0;
-    const top = scroller.scrollTop;
+    if (!stage.classList.contains("held-wait") || stage.classList.contains("waiting")) return;
     stage.classList.remove("held-wait");
     stage.style.removeProperty("--live-held");
-    live.style.minHeight = "";
-    if (!held) return;
-    const after = live.offsetHeight;
-    const absorbed = Math.min(Math.max(0, before - after), top);
-    if (before - absorbed > after) live.style.minHeight = `${before - absorbed}px`;
-    if (absorbed) scroller.scrollTop = top - absorbed;
+    roomCap = false;
+    frame.fitCap();
+    frame.forgetContent();
   }
 
   // One line in the trail for FLASH_MS, ahead of the calls (a newer flash
@@ -451,6 +481,8 @@ export function createStageView({
     revealed = false;
     writeStored(COLLAPSE_KEY, value ? "1" : "0");
     applyCollapsed();
+    // Opened on a waiting card: it shows as it does on arrival.
+    if (!value && pendingCard()) frame.afterGrowth(() => frame.reveal(tail.querySelector(PENDING) ? tail : extras));
   }
 
   function setCloud(open) {
@@ -546,6 +578,7 @@ export function createStageView({
     isCollapsed: () => collapsed,
     isCloudOpen: () => cloudOpen,
     isRoomCap: () => roomCap,
+    waitingCard: () => (stage.classList.contains("waiting") ? extras.querySelector(PENDING) || tail.querySelector(PENDING) : null),
   });
 
   // The in-use watch (stage_watch.js): an ended turn hands off once the
@@ -608,7 +641,6 @@ export function createStageView({
     setCloud(false);
     stage.classList.remove("plain", "ended", "waiting", "held-wait", "asking", "in-use", "question-room");
     stage.style.removeProperty("--live-held");
-    live.style.minHeight = "";
   }
 
   // The turn leaves the stage's care (the hand-off's start, a reset, a new

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

@@ -45,6 +45,9 @@ import { groupGaps, timeGapTemplate } from "./time_gaps.js";
 
 // ---- The templates: one step, its thinking, its label ----
 
+// Streaming text reaches the page at most this often (docs/internals/web-frontend.md, Frames).
+const FLUSH_MS = 100;
+
 // A closed step's summary (model.genLabel). When its head is the words the
 // body starts with (the narration's first line, the first call's title)
 // and it has calls, the summary is marked .repeats and its parts are
@@ -218,7 +221,11 @@ export function createTurnBlock({
   // Steer rows waiting for the step that answers them (steer()).
   let pendingSteers = [];
   const dirty = new Set();
+  // A flush is pending: a timer running (flushTimer) or a frame requested.
   let rafPending = false;
+  let flushTimer = null;
+  // When the last flush wrote something (performance.now()).
+  let lastFlushAt = -Infinity;
 
   function removeHint() {
     const hint = historyEl.querySelector(".hint");
@@ -388,9 +395,26 @@ export function createTurnBlock({
     else addSentences(entry, entry.feed.feed(gen.text));
   }
 
+  function cancelTimer() {
+    clearTimeout(flushTimer);
+    flushTimer = null;
+  }
+
+  // Nothing pending from here on. A frame already requested can't be taken
+  // back this way: it runs flush with nothing to write.
+  function cancelFlush() {
+    cancelTimer();
+    dirty.clear();
+    rafPending = false;
+  }
+
   function flush() {
     rafPending = false;
-    // Runs every animation frame while streaming — must not yank a user who
+    cancelTimer();
+    // A late frame with nothing to write (a direct flush, a turn's end came
+    // first) doesn't count: it would hold back the next first token.
+    if (dirty.size) lastFlushAt = performance.now();
+    // Runs up to every FLUSH_MS while streaming — must not yank a user who
     // scrolled up to read; only follow when they were already near the bottom.
     const stick = isNearBottom();
     for (const gen of dirty) writeGen(gen, { follow: true });
@@ -403,7 +427,16 @@ export function createTurnBlock({
     dirty.add(gen);
     if (rafPending) return;
     rafPending = true;
-    requestAnimationFrame(flush);
+    const wait = lastFlushAt + FLUSH_MS - performance.now();
+    if (wait <= 0) {
+      requestAnimationFrame(flush);
+      return;
+    }
+    // Still on a frame after the timer: a hidden tab's flush pauses, as it always did.
+    flushTimer = setTimeout(() => {
+      flushTimer = null;
+      requestAnimationFrame(flush);
+    }, wait);
   }
 
   // A closed gen: its final text, collapsed to its label (unless the user
@@ -626,8 +659,7 @@ export function createTurnBlock({
       }
       kept.forEach((el) => el.remove());
     }
-    dirty.clear();
-    rafPending = false;
+    cancelFlush();
     onChange();
     return kept;
   }
@@ -655,8 +687,8 @@ export function createTurnBlock({
     for (const entry of genEls.values()) stopTicker(entry);
     genEls.clear();
     pendingSteers = [];
-    dirty.clear();
-    rafPending = false;
+    cancelFlush();
+    lastFlushAt = -Infinity;
   }
 
   return {
@@ -682,7 +714,9 @@ export function createTurnBlock({
       if (!text && !thinking) return;
       if (!turn) this.turnStarted({});
       const r = model.chunk(turn, { text, thinking, iteration, now });
-      apply(r);
+      // A step's edge shows now; the text, and the stage's refresh that goes
+      // with it, wait for the flush (apply's onChange would refresh per frame).
+      if (r.opened || r.closed) apply(r);
       scheduleFlush(r.gen);
     },
     // A dropped stream's step asked again (generation_retrying with
@@ -704,8 +738,8 @@ export function createTurnBlock({
       if (!turn) return;
       const r = model.generationCompleted(turn);
       if (!r) return;
-      // The text lands on the next animation frame; a generation can end
-      // before one runs (a burst of frames, a hidden tab).
+      // The text lands at the next flush; a generation can end before one
+      // runs (inside FLUSH_MS, a hidden tab).
       writeGen(r.gen);
       // The remainder is the step's last line: narration without a final
       // period ("Let me check the shell first") would otherwise never show.

data/lib/samagotchi/worker.rb

@@ -81,8 +81,11 @@ module Samagotchi
     # gets it over the Bridge a moment after it starts, and that message's
     # turn goes first (the reports join it).
     WAKE_START_GRACE = 2.0
-    # How much of a command's output goes into its :command_ran.
-    COMMAND_OUTPUT_LIMIT = 4096
+    # How much of a command's output goes into its :command_ran, in chars.
+    # Room for a real listing (/guardrails with a bundle's rules, /models):
+    # the event lives only in the Bridge's ring (256 events, in memory) and
+    # on the streams, a session file doesn't hold it.
+    COMMAND_OUTPUT_LIMIT = 64 * 1024
     BUSY_OUTPUT = "busy: wait for the turn to end"
     # /exit held by background tasks a finish wake waits for: how to end them.
     TASK_STOP_HINT = "stop one with the web's stop-task button or by asking for task_stop"
@@ -1211,8 +1214,10 @@ module Samagotchi
     #   line that applies it (the TUI's prefill, the web's Apply button)
     def announce_command(command, status:, output:, changed:, anytime: false, confirm: nil)
       TurnCheckpoint.record_command_outcome(@session_dir, command.enqueued_id, status: status)
-      text = output.to_s
-      event = { type: :command_ran, **command.event_fields, status: status, output: text[0, COMMAND_OUTPUT_LIMIT],
+      # Any bytes (a !cmd's): one that JSON can't take would end every stream
+      # that reaches this event, for as long as the ring holds it.
+      text = output.to_s.scrub("?")
+      event = { type: :command_ran, **command.event_fields, status: status, output: command_output_shown(text),
                 changed: changed.map(&:to_s), model_name: @engine.effective_model_name }
       event[:anytime] = true if anytime
       # The session's title after /title (nil: cleared), for the TUIs' row.
@@ -1228,6 +1233,18 @@ module Samagotchi
       @engine.announce(event)
     end
 
+    # +text+ as its :command_ran carries it: over the limit, its head to a
+    # line's end (one long line is cut where it must be), then a line that
+    # says so: every UI prints this text as it is.
+    def command_output_shown(text)
+      return text if text.length <= COMMAND_OUTPUT_LIMIT
+
+      kept = text[0, COMMAND_OUTPUT_LIMIT]
+      line_end = kept.rindex("\n")
+      kept = kept[0, line_end] if line_end && line_end > COMMAND_OUTPUT_LIMIT / 2
+      "#{kept}\n[cut: #{kept.length} of #{text.length} chars: a command's output stops here]"
+    end
+
     # One Engine turn, the same for a prompt, a reminder and a continue:
     # the session shows as running to readers of the file (the web's
     # session list; the Engine resets it to idle when it ends), commands

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: samagotchi
 version: !ruby/object:Gem::Version
-  version: 0.143.0
+  version: 0.145.0
 platform: ruby
 authors:
 - Dmitry Dedov
@@ -682,6 +682,7 @@ files:
 - lib/samagotchi/testing.rb
 - lib/samagotchi/testing/boundary.rb
 - lib/samagotchi/testing/bundle.rb
+- lib/samagotchi/testing/env_not_shown.rb
 - lib/samagotchi/testing/fake_executable.rb
 - lib/samagotchi/testing/fake_executable_launcher
 - lib/samagotchi/testing/fake_http.rb
@@ -865,6 +866,7 @@ files:
 - lib/samagotchi/web/public/method_api.js
 - lib/samagotchi/web/public/model_pick.js
 - lib/samagotchi/web/public/model_picker.js
+- lib/samagotchi/web/public/more_sheet.js
 - lib/samagotchi/web/public/notice_links.js
 - lib/samagotchi/web/public/notifications.js
 - lib/samagotchi/web/public/notify.js