samagotchi 0.136.0 → 0.136.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 12638807efa522a91eb43ef7934f29aa0a4473d48da39897d6244b755eafdfdc
-  data.tar.gz: e4dbe2698ef9517d9ccbacbd6e216720d8f0ce8e75bef8974f05951b7e1d2bfd
+  metadata.gz: a5dbc0c078bedf4518127ba59fef2277480193f98de99dcbd8983bb79a3802d2
+  data.tar.gz: e352d50d3b09a5e2f2a3ddd8dda3b79461e76c7e4743c306fc885e78fa670100
 SHA512:
-  metadata.gz: 605c9b52f0d2b949e2f875ef939ba01401def71fb879ef78affe5e97b9f04ba2c761e48e17c801525617a87cfb4f7bed2d5b64045080f6408974e97a7e8f3f07
-  data.tar.gz: c8d922fa4080f5b098ad953859506cfded71dc2be9038f836e88f53c288abca31265df0acdda01d3b945e43107d5c41b6ab9d5e2c3fa9196d4be284654e9d8e9
+  metadata.gz: c48493b22b5916b579d1f1fd386f0169f8a26ea71a29f5c77a567045e422f115b8b3ec421cb6f0499e0fc584da7e08840eeebf2650ad5d9bd75a61c41dc34c89
+  data.tar.gz: b9e9e2c78d869fe803ac6dbf54fcacc305b60c4b4ccd354d78b0967d340ad54cbf3f18357bb24c26050d96e4cff3899e90755857979fd9ec6680cc9fd730f46a

data/CHANGELOG.md

@@ -7,6 +7,18 @@ and commands may change between minor versions. How releases are made:
 [docs/releasing.md](docs/releasing.md).
 ## [Unreleased]
 
+## [0.136.1] - 2026-10-30
+
+### Changed
+
+- Web: collapsibles keep their shape. A steps block, a thinking block, the recap and a long answer's fold are the
+  same box open or closed (the bar, the border, the width); a click changes the height, animated unless the system
+  prefers reduced motion. A closed answer fold is its box's one line, "▸ first line · N lines"; open, the row is the
+  box's top edge, "▾ N lines", and no longer repeats the answer's first line above the answer (a delegate report's
+  likewise, in the report's tint).
+
+Update with `chi update`, then restart `chi web`. `chi home doctor` says what else to do.
+
 ## [0.136.0] - 2026-10-30
 
 ### Changed
@@ -5218,7 +5230,8 @@ and long-lived sessions.
 - A macOS desktop helper (`chi desktop install`): a "Send to chi" Service and a
   hotkey panel that send selected text or the clipboard to your sessions.
 
-[Unreleased]: https://github.com/dm1try/samagotchi/compare/v0.136.0...HEAD
+[Unreleased]: https://github.com/dm1try/samagotchi/compare/v0.136.1...HEAD
+[0.136.1]: https://github.com/dm1try/samagotchi/compare/v0.136.0...v0.136.1
 [0.136.0]: https://github.com/dm1try/samagotchi/compare/v0.135.0...v0.136.0
 [0.135.0]: https://github.com/dm1try/samagotchi/compare/v0.134.0...v0.135.0
 [0.134.0]: https://github.com/dm1try/samagotchi/compare/v0.133.0...v0.134.0

data/docs/cli.md

@@ -1026,8 +1026,9 @@ copies its Markdown source, not the rendered text; a code block copies just
 its code; a prompt copies the text as you typed it.
 
 A long answer (over 25 lines or 2,000 characters of its text) can be folded
-by hand: a slim "▾ N lines" row sits just above it once its turn has ended.
-Click it and the answer folds to one row, "▸ its first line · N lines" (the
+by hand: a "▾ N lines" row is its top edge once its turn has ended. Click
+it and the answer closes to one line in its own box,
+"▸ its first line · N lines" (the
 first line of what a hook presented in its place, else its first heading,
 else its first line); click again to unfold. A delegate report's reply
 folds the same way. Folding is this browser's choice, kept per session in

data/docs/internals/web-frontend.md

@@ -17,7 +17,7 @@ on an existing module, imported by a new version of another, then finds the old
 page. A factory dep a new version stops passing is the same hazard the other way round: the store's redraws took
 `updateInfoBar` and the chip controls out of `stream_handlers.js`'s deps (and `updateInfoBar`/`updateComposerMode`
 out of `send_turn.js`, `session_actions.js` and `lists_view.js`); a page loaded before keeps all its old modules
-until a reload, so the risk is a mixed cache, not an open tab. `answer_fold.js`,
+until a reload, so the risk is a mixed cache, not an open tab. `answer_fold.js`, `details_motion.js`,
 `turn_range.js`, `history_reveal.js`, `latest.js`, `session_payload.js`, `method_api.js`, `session_store.js`,
 `session_fields.js`, `feature_gates.js`, `revise_stack.js` and `shell_command.js` are new modules for that reason.
 

data/lib/samagotchi/bundles/system/manifest.yml

@@ -1,6 +1,6 @@
 ---
 name: samagotchi-system
-version: 0.136.0
+version: 0.136.1
 scope: system
 description: Default system memories — identity, self map, config modification protocol, memory guide and the delegated-session rules
 files:

data/lib/samagotchi/version.rb

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

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

@@ -3,9 +3,11 @@
 // gets a fold row: a sibling just before the bubble, never inside it (the
 // bubble's copy text, its claims and a live end's innerHTML stay the
 // bubble's own). Folded, the bubble has the class `.folded` (CSS hides it;
-// no inline style); the row reads its first line and its size, "▸
-// ‹first line› · N lines", folded or not: unfolded it is the bubble's header,
-// flush on top of it, its bar the bubble's.
+// no inline style) and the row is the answer's box closed: "▸ ‹first
+// line› · N lines" in the bubble's shape; unfolded, the row is that box's
+// top edge, "▾ N lines", the bubble its rest (CSS joins the two). The box
+// never changes shape, a click changes its height, animated
+// (details_motion.js animateHeight) unless the viewer prefers no motion.
 //
 // A delegate report (a user line chi brought in, data-source
 // "delegate_report") gets the same row, folded by default (it is written
@@ -30,6 +32,7 @@
 // A module of its own: static JS is cached at unversioned URLs, and a new
 // export on an old module would blank the page.
 import { bubbleCopyText } from "./copy.js";
+import { animateHeight, canAnimate } from "./details_motion.js";
 import { clip } from "./format.js";
 import { readStored, removeStored, storedKeys, writeStored } from "./storage.js";
 
@@ -80,12 +83,13 @@ export function foldLabel(text, { display = false } = {}) {
   return clip(plainLine(heading ?? texts[0] ?? ""), LABEL_CHARS);
 }
 
-// The row's words, folded or not: the label and the size (an open row is
-// the answer's header, as an open steps block keeps its summary).
-// +label+: the row's own (a report's, reportLabel), else the answer's.
-export function foldRowText(text, { display = false, label = foldLabel(text, { display }) } = {}) {
+// The row's words: folded, the label and the size; unfolded, the size
+// alone (the content is right under it). +label+: the row's own (a
+// report's, reportLabel), else the answer's.
+export function foldRowText(text, { display = false, folded = true, label = foldLabel(text, { display }) } = {}) {
   const n = lineCount(text);
   const size = `${n} line${n === 1 ? "" : "s"}`;
+  if (!folded) return { label: "", size };
   return { label, size: label ? `\u00a0\u00b7 ${size}` : size };
 }
 
@@ -205,7 +209,7 @@ function drawRow(row, bubble) {
   const text = answerText(bubble);
   const report = isReport(bubble);
   const own = report ? { label: reportLabel(text, bubble.querySelector(":scope > .origin-label")?.textContent || "") } : {};
-  const { label, size } = foldRowText(text, { display: bubble.hasAttribute("data-answer-display"), ...own });
+  const { label, size } = foldRowText(text, { display: bubble.hasAttribute("data-answer-display"), folded, ...own });
   const what = report ? "report" : "answer";
   row.setAttribute("aria-expanded", folded ? "false" : "true");
   row.title = folded ? `Show the ${what}` : `Fold the ${what}`;
@@ -245,8 +249,9 @@ export function keepRowInView(scroller, row, mutate) {
 // @param historyEl the history (#history), also its scroller
 // @param sessionId () => the open session's id
 // @param projectRoot () => the open session's project root, or null
+// @param motion (bubble) => whether a fold or unfold animates (canAnimate)
 // @return {decorate(root)} (the observer runs it; specs call it)
-export function installAnswerFold({ historyEl, sessionId, projectRoot = () => null }) {
+export function installAnswerFold({ historyEl, sessionId, projectRoot = () => null, motion = canAnimate }) {
   // Each bubble's row, and each row's bubble.
   const rows = new WeakMap();
   const bubbleOf = new WeakMap();
@@ -318,10 +323,16 @@ export function installAnswerFold({ historyEl, sessionId, projectRoot = () => nu
     if (!bubble) return;
     e.preventDefault();
     const folded = !bubble.classList.contains("folded");
-    keepRowInView(historyEl, row, () => {
+    const settle = () => keepRowInView(historyEl, row, () => {
       bubble.classList.toggle("folded", folded);
       drawRow(row, bubble);
     });
+    if (!motion(bubble)) settle();
+    else if (folded) animateHeight(bubble, bubble.offsetHeight, 0, { fade: true }).then(settle);
+    else {
+      settle();
+      animateHeight(bubble, 0, bubble.offsetHeight, { fade: true });
+    }
     // An answer's choice is its fold, a report's its unfold (D2: the default differs).
     if (isReport(bubble)) writeOpened(sessionId(), answerKey(bubble), !folded, { root: projectRoot() });
     else writeFold(sessionId(), answerKey(bubble), folded, { root: projectRoot() });

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

@@ -72,6 +72,7 @@ import { OWNER_FINAL, verifyTurnOf } from "./verify_target.js";
 import { actionLine, annotationActions, composerWithAction } from "./annotate_actions.js";
 import { copyText, installCopy } from "./copy.js";
 import { installAnswerFold, sweepAnswerFolds } from "./answer_fold.js";
+import { installDetailsMotion } from "./details_motion.js";
 import { answerLabel, installReviseStacks, reviseChipTemplate, reviseWorkerUnavailable } from "./revise_stack.js";
 import { createQuestionCards } from "./question_cards.js";
 import { splitSnapshotCards } from "./card.js";
@@ -2085,6 +2086,10 @@ historyEl.addEventListener("click", (e) => {
 });
 turnDom.scrollEl.addEventListener("scroll", annotateBar.schedule, true);
 turnRoots().forEach((root) => installCopy(root));
+// A steps block, a thinking block and the recap open and close by hand
+// with their height animated (details_motion.js), in the history and on
+// the stage.
+installDetailsMotion({ root: document.body, selector: ".turn-work, .bubble.thinking, .bubble.recap" });
 // Long answers fold by hand (answer_fold.js), per viewer and session.
 installAnswerFold({
   historyEl,

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

@@ -0,0 +1,74 @@
+// Collapsibles keep their shape: a steps block, a thinking block, the recap
+// and the answer fold are the same box open or closed (the bar, the border,
+// the width), and a click only changes the height. This module is the
+// motion: a click on one of their summaries animates the height between the
+// two states (Web Animations, MOTION_MS) instead of snapping, and the
+// answer fold borrows animateHeight for its bubble. Nothing moves when the
+// viewer prefers reduced motion or the element cannot animate (an old
+// engine, a spec's DOM): the click is the native toggle then.
+//
+// Only a hand's click animates: the page's own opens and closes (a turn's
+// end closing a block, a reload drawing the outline) stay instant, as they
+// are not a change the viewer watches.
+//
+// A module of its own: static JS is cached at unversioned URLs, and a new
+// export on an old module would blank the page.
+
+export const MOTION_MS = 220;
+
+// Whether +el+ can animate for this viewer.
+export function canAnimate(el) {
+  if (typeof el?.animate !== "function") return false;
+  const win = el.ownerDocument?.defaultView;
+  return !win?.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches;
+}
+
+// Animates +el+'s height from +from+ to +to+ (px), its overflow clipped
+// meanwhile; +fade+ fades it with the height. Resolves when the animation
+// is over (or canceled).
+export async function animateHeight(el, from, to, { fade = false, ms = MOTION_MS } = {}) {
+  const at = (h, o) => (fade ? { height: `${h}px`, opacity: String(o) } : { height: `${h}px` });
+  const anim = el.animate([at(from, from ? 1 : 0), at(to, to ? 1 : 0)], { duration: ms, easing: "ease" });
+  el.style.overflow = "hidden";
+  try {
+    await anim.finished;
+  } catch {
+    // canceled: the element is where its class puts it
+  } finally {
+    el.style.overflow = "";
+  }
+}
+
+// A <details>' height closed: its summary and its own padding and borders.
+function closedHeight(details, summary) {
+  const win = details.ownerDocument?.defaultView;
+  const cs = win?.getComputedStyle?.(details);
+  const px = (v) => Number.parseFloat(v) || 0;
+  const frame = cs ? px(cs.paddingTop) + px(cs.paddingBottom) + px(cs.borderTopWidth) + px(cs.borderBottomWidth) : 0;
+  return summary.offsetHeight + frame;
+}
+
+// Installs the motion on +root+ for the <details> matching +selector+ whose
+// own summary is clicked. +motion+: whether to animate +el+ (canAnimate).
+export function installDetailsMotion({ root, selector, motion = canAnimate }) {
+  const busy = new WeakSet();
+  root.addEventListener("click", (e) => {
+    const summary = e.target.closest?.("summary");
+    const details = summary?.parentElement;
+    if (!details || !details.matches?.(selector) || summary.parentElement !== details) return;
+    if (e.target.closest("a, button, input, label") !== null && e.target !== summary) return;
+    if (!motion(details)) return;
+    e.preventDefault();
+    if (busy.has(details)) return;
+    busy.add(details);
+    const done = () => busy.delete(details);
+    if (details.open) {
+      const from = details.offsetHeight;
+      animateHeight(details, from, closedHeight(details, summary)).then(() => { details.open = false; done(); });
+    } else {
+      const from = closedHeight(details, summary);
+      details.open = true;
+      animateHeight(details, from, details.offsetHeight).then(done);
+    }
+  });
+}

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

@@ -57,24 +57,25 @@ main{flex:1;display:flex;flex-direction:column;gap:16px;padding:16px;overflow:au
 /* A generation opens its answer bubble empty: hidden until text streams (the thinking box shows progress meanwhile). */
 .bubble.output.streaming:empty{display:none}
 /* The answer's pop: the promoted bubble is held at the narration box's height (inline max-height, scrolled to its tail) until the rendered markdown lands, then grows to its content while the content fades in; both classes go 400 ms later. */
-/* A long answer folded by hand (answer_fold.js): the row is the bubble's sibling just before it, styled as a closed turn's steps, reading the answer's first line and size; folded, the bubble is hidden; unfolded, the row is the bubble's header. */
+/* A long answer folded by hand (answer_fold.js): the row is the bubble's sibling just before it, in the bubble's own shape. Folded, the row is the answer's box closed ("▸ first line · N lines") and the bubble is hidden; unfolded, the row is that box's top edge ("▾ N lines") and the bubble its rest, the two one block. The shape never changes; a click changes the height (details_motion.js). */
 /* Folded: the bubble hidden, an answer or a delegate report (#history's: outranks .bubble.user's display). */
 #history>.bubble.folded{display:none}
-.answer-fold{display:flex;align-items:baseline;gap:0;align-self:flex-start;max-width:100%;min-width:0;margin:0;padding:3px 10px;font:inherit;font-size:12px;font-weight:500;line-height:1.4;color:var(--text-muted);text-align:left;cursor:pointer;user-select:none;background:transparent;border:1px solid transparent;border-left:3px solid var(--accent-strong);border-radius:6px;transition:background .12s ease}
-.answer-fold:hover{background:var(--bg-panel)}
+.answer-fold{display:flex;align-items:baseline;gap:0;align-self:stretch;max-width:100%;min-width:0;margin:0;padding:12px 14px;font:inherit;font-size:13px;font-weight:600;line-height:1.5;color:var(--text-muted);text-align:left;cursor:pointer;user-select:none;background:var(--bg-panel);border:1px solid var(--border);border-left:3px solid var(--accent-strong);border-radius:12px}
+.answer-fold:hover .answer-fold-size{color:var(--text-2)}
 .answer-fold:focus-visible{outline:2px solid var(--accent-ring);outline-offset:1px}
 .answer-fold::before{content:"▾\00a0";color:var(--accent);flex:none}
 .answer-fold.folded::before{content:"▸\00a0"}
-/* Open: the bubble's header, flush on top of it (-12px: #history's gap), its bar running on into the bubble's. */
-.answer-fold:not(.folded){margin-bottom:-12px;border-bottom-left-radius:0}
-/* A delegate report's row: where the report sits (right, the user accent; dashed when merged mid-turn). Open, the row and
-   the report share one width, so the row's bar runs on into the report's. */
-.answer-fold.report{align-self:flex-end;max-width:85%;border-left-color:var(--accent)}
+/* Open: the box's top edge (-12px: #history's gap), the bubble under it its rest. */
+.answer-fold:not(.folded){margin-bottom:-12px;padding-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
+.answer-fold:not(.folded)+.bubble{border-top:0;border-top-left-radius:0;border-top-right-radius:0;padding-top:8px}
+/* A delegate report's row: the report's box (right, its tint, the user accent; dashed when merged mid-turn), closed or
+   its top edge. */
+.answer-fold.report{align-self:flex-end;width:85%;background:var(--accent-bg);border-left-color:var(--accent)}
 .answer-fold.report.steered{border-left-style:dashed}
-.answer-fold.report:not(.folded),.answer-fold.report:not(.folded)+.bubble.user{width:85%}
+.answer-fold.report:not(.folded)+.bubble.user{width:85%}
 .answer-fold-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2);font-size:13px}
 .answer-fold-label:empty{display:none}
-.answer-fold-size{flex:none;white-space:nowrap;font-variant-numeric:tabular-nums}
+.answer-fold-size{flex:none;white-space:nowrap;font-variant-numeric:tabular-nums;transition:color .12s ease}
 /* Revise stacks (revise_stack.js): a superseded version folds to its stub; the Revise row under a final answer
    (zero height: its button sits on the bubble's bottom edge, clear of the copy button, shown on hover) and a stack
    top's version chip. */
@@ -320,11 +321,10 @@ button.system-one-wrong:hover:not(:disabled){background:var(--bg-hover);color:va
   .activity-row>.activity-command{margin-left:0}
 }
 .bubble.thinking{border-left:3px solid var(--think);background:color-mix(in srgb,var(--think) 6%,var(--bg-panel));padding:8px 12px}
-.bubble.thinking:not([open]),.bubble.activity:not([open]){padding:3px 10px;background:transparent;border-color:transparent;align-self:flex-start;border-radius:6px;transition:background .12s ease}
-.bubble.thinking:not([open]){border-left-color:var(--think)}
+.bubble.activity:not([open]){padding:3px 10px;background:transparent;border-color:transparent;align-self:flex-start;border-radius:6px;transition:background .12s ease}
 .bubble.activity:not([open]){border-left-color:var(--accent)}
-.bubble.thinking:not([open]):hover,.bubble.activity:not([open]):hover{background:var(--bg-panel)}
-.bubble.thinking:not([open])>summary,.bubble.activity:not([open])>summary{font-size:12px;font-weight:500}
+.bubble.activity:not([open]):hover{background:var(--bg-panel)}
+.bubble.activity:not([open])>summary{font-size:12px;font-weight:500}
 .bubble.thinking>summary{cursor:pointer;color:var(--text-muted);font-size:13px;font-weight:600;font-style:italic;user-select:none;list-style:none}
 .bubble.thinking>summary::-webkit-details-marker{display:none}
 .bubble.thinking>summary::before{content:"▸ ";color:var(--think)}
@@ -336,9 +336,7 @@ button.system-one-wrong:hover:not(:disabled){background:var(--bg-hover);color:va
 .turn-work>summary::-webkit-details-marker{display:none}
 .turn-work>summary::before{content:"▸ ";color:var(--accent)}
 .turn-work[open]>summary::before{content:"▾ "}
-.turn-work:not([open]){padding:3px 10px;background:transparent;border-color:transparent;border-left-color:var(--accent);align-self:flex-start;border-radius:6px;transition:background .12s ease}
-.turn-work:not([open]):hover{background:var(--bg-panel)}
-.turn-work:not([open])>summary{font-size:12px;font-weight:500}
+/* Closed, a block keeps its box (the bar, the border, the width): a click changes its height only (details_motion.js); thinking and the recap the same. */
 /* A step's body (thinking, narration, rows, cards) sits --step-indent right of its summary, so the thinking
    chevron and the row marks share one column under the step's own chevron. The summary takes it back with a
    negative margin: a child's own margin shorthand can't undo the padding. */

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: samagotchi
 version: !ruby/object:Gem::Version
-  version: 0.136.0
+  version: 0.136.1
 platform: ruby
 authors:
 - Dmitry Dedov
@@ -802,6 +802,7 @@ files:
 - lib/samagotchi/web/public/ctx.js
 - lib/samagotchi/web/public/data.js
 - lib/samagotchi/web/public/delivery_line.js
+- lib/samagotchi/web/public/details_motion.js
 - lib/samagotchi/web/public/diff_view.js
 - lib/samagotchi/web/public/dock_reserve.js
 - lib/samagotchi/web/public/families_view.js