samagotchi 0.156.0 → 0.158.0

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

@@ -0,0 +1,220 @@
+// The history's shape: what a reader sees of the conversation, as a list of
+// small records, so a turn drawn live and the same turn after a reload can be
+// compared (live is the truth: a reload that reads otherwise is the bug).
+// A pure DOM read with no app imports: the e2e reload checks
+// (spec/e2e/support/history_shape.js) import it into the page, and chi web's
+// opt-in reload check (reload_check.js) uses the same normalizer and
+// allowlist.
+//
+// historyShape(historyEl) → [{kind, cls, text}], in order: each child of
+// #history, and inside a turn block each step and each step's rows and
+// notices. Kinds come from KINDS only (the server logs them, nothing else).
+// `cls` is a kind's own modifier (a row's status, a warn notice, a report
+// reply), `text` what it says, whitespace collapsed. Left out: lit's
+// comments, the copy button, the quiet-stretch dividers (`.time-gap`), and
+// view state (folds, stacks, the motion classes): nothing a reader would
+// call a different turn.
+//
+// compareShapes(a, b, {allow}) → {same, kinds, excused, explained}: the two lists aligned
+// (their longest common run), each leftover item, or pair of same-kind
+// items at one place, a difference, unless an ACCEPTED entry named in
+// +allow+ matches it. `kinds`: the differing items' kinds, sorted, unique.
+
+// The kinds a shape item can have (a closed list: reload_check's log line
+// carries only these, and chi web drops any other token).
+export const KINDS = Object.freeze([
+  "prompt", "steered", "note", "command", "recap", "block", "step", "steer", "row", "notice", "card", "question",
+  "thinking", "answer", "empty-answer", "timing", "cancel", "failed", "other",
+]);
+
+// The live/reload divergences that stay, each with why: the deliberate ones
+// of section 1 of ~/.claude/plans/arch-turn-records.md (the bugs turn
+// drawings closed are gone: a drawn turn reloads as live drew it). A
+// difference one of them matches is not one: +a+ live, +b+ reloaded (either
+// may be null: the item is on one side only), +shapes+ the two whole lists
+// ({live, reloaded}). A caller names the ones its scenario has (`allow`);
+// the opt-in reload check allows none and logs which would excuse a
+// difference (`excused`).
+export const ACCEPTED = Object.freeze([
+  {
+    id: "command-bubble",
+    reason: "a command's reply bubble (/help, /model, a queued one) is saved nowhere: a reload drops it "
+      + "(deliberate until a display journal; a !cmd is saved and stays)",
+    match: (a, b) => b === null && a?.kind === "command",
+  },
+  {
+    id: "edit-mark",
+    reason: "a reloaded row shows the ✂ mark an LLM context edit later saved on its output: later state, "
+      + "an overlay as a card's latest body is",
+    match: (a, b) => a?.kind === "row" && b?.kind === "row" && sameBut(a, b, "edit"),
+  },
+]);
+
+function sameBut(a, b, key) {
+  const strip = ({ [key]: _drop, ...rest }) => rest;
+  return JSON.stringify(strip(a)) === JSON.stringify(strip(b));
+}
+
+// What a reader reads of +el+: its text, without the copy button and the
+// time dividers, whitespace collapsed.
+function textOf(el) {
+  if (!el) return "";
+  const copy = el.cloneNode(true);
+  copy.querySelectorAll(".copy-btn, .time-gap").forEach((node) => node.remove());
+  return copy.textContent.replace(/\s+/g, " ").trim();
+}
+
+function item(kind, text = "", cls = "") {
+  return { kind, cls, text };
+}
+
+// A tool row: its status mark, then tool, title, the word an exception
+// shows, its duration (formatDuration's text); its output, its diff's
+// summary and its ✂ mark.
+function rowItem(el) {
+  const status = [...(el.querySelector(".activity-status")?.classList || [])].filter((c) => c !== "activity-status").join(" ");
+  const text = [".activity-tool", ".activity-params", ".activity-state", ".activity-duration"]
+    .map((sel) => textOf(el.querySelector(`:scope > ${sel}`))).filter(Boolean).join(" · ");
+  const row = item("row", text, status);
+  // Its output as the hover has it (the inline text is its start or end),
+  // and the summary of an edit's diff.
+  const output = el.querySelector(":scope > .activity-output")?.getAttribute("title");
+  if (output) row.output = output;
+  const diff = textOf(el.querySelector(":scope > .activity-diff > summary"));
+  if (diff) row.diff = diff;
+  const edit = textOf(el.querySelector(":scope > .activity-edit"));
+  if (edit) row.edit = edit;
+  return row;
+}
+
+function cardItem(el) {
+  return item("card", `${el.dataset.cardId || ""} ${textOf(el.querySelector(".card-title"))}`.trim());
+}
+
+function questionItem(el) {
+  return item("question", textOf(el.querySelector(":scope > summary")));
+}
+
+function noticeItem(el) {
+  return item("notice", textOf(el), el.classList.contains("warn") ? "warn" : "");
+}
+
+// A step's own items, in order: the steers it answered, then its rows,
+// notices and cards.
+function stepItems(gen) {
+  const out = [item("step", textOf(gen.querySelector(":scope > summary")))];
+  for (const steer of gen.querySelectorAll(":scope > .steer-row")) out.push(item("steer", textOf(steer.querySelector("summary"))));
+  for (const el of gen.querySelectorAll(":scope > .activity-body > *")) {
+    if (el.matches(".activity-row")) out.push(rowItem(el));
+    else if (el.matches(".hook-notice")) out.push(noticeItem(el));
+    else if (el.matches(".plugin-card")) out.push(cardItem(el));
+    else if (el.matches(".bubble.question")) out.push(questionItem(el));
+    else out.push(otherItem(el));
+  }
+  return out;
+}
+
+// The classes that are view state, not what the element is.
+const VIEW_CLASSES = new Set(["open", "folded", "unfolded", "outline", "live", "done", "entering", "card-updated",
+  "stack-hidden", "stack-swapped", "stack-view", "streaming"]);
+
+function otherItem(el) {
+  const cls = [...el.classList].filter((c) => !VIEW_CLASSES.has(c)).sort().join(" ");
+  return item("other", "", cls || el.tagName.toLowerCase());
+}
+
+// One child of #history as its items (a turn block's are several; a time
+// divider none).
+function childItems(el) {
+  if (el.matches(".time-gap, .copy-btn")) return [];
+  if (el.matches(".turn-work")) {
+    return [item("block", textOf(el.querySelector(":scope > summary .turn-steps"))),
+      ...[...el.querySelectorAll(":scope > .gen")].flatMap(stepItems)];
+  }
+  if (el.matches(".bubble.user")) {
+    const kind = el.classList.contains("steered") ? "steered" : "prompt";
+    return [item(kind, textOf(el.querySelector(":scope > .user-message")))];
+  }
+  if (el.matches(".bubble.note")) return [item("note", textOf(el))];
+  if (el.matches(".bubble.command")) return [item("command", textOf(el.querySelector(".command-line")))];
+  if (el.matches(".bubble.recap")) return [item("recap", textOf(el.querySelector(".recap-body")))];
+  if (el.matches(".empty-answer")) return [item("empty-answer", textOf(el))];
+  if (el.matches(".hook-notice")) return [noticeItem(el)];
+  if (el.matches(".bubble.thinking")) return [item("thinking")];
+  if (el.matches(".bubble.output")) return [item("answer", textOf(el), el.classList.contains("report-reply") ? "report-reply" : "")];
+  if (el.matches(".turn-timing")) return [item("timing", textOf(el))];
+  if (el.matches(".bubble.cancel")) return [item(el.classList.contains("stopped") ? "cancel" : "failed", textOf(el))];
+  if (el.matches(".bubble.question")) return [questionItem(el)];
+  if (el.matches(".plugin-card")) return [cardItem(el)];
+  if (el.matches(".steer-row")) return [item("steer", textOf(el.querySelector("summary")))];
+  return [otherItem(el)];
+}
+
+// +root+'s shape: #history, or a fragment of a turn's elements (the reload
+// check's offscreen render), or a list of elements.
+export function historyShape(root) {
+  const els = Array.isArray(root) ? root : [...(root?.children || [])];
+  return els.flatMap(childItems);
+}
+
+const key = (it) => JSON.stringify(it);
+
+// The longest common run of +a+ and +b+ by their items' text: the index
+// pairs, in order.
+function commonRun(a, b) {
+  const n = a.length;
+  const m = b.length;
+  const len = Array.from({ length: n + 1 }, () => new Array(m + 1).fill(0));
+  for (let i = n - 1; i >= 0; i--) {
+    for (let j = m - 1; j >= 0; j--) {
+      len[i][j] = key(a[i]) === key(b[j]) ? len[i + 1][j + 1] + 1 : Math.max(len[i + 1][j], len[i][j + 1]);
+    }
+  }
+  const pairs = [];
+  let i = 0;
+  let j = 0;
+  while (i < n && j < m) {
+    if (key(a[i]) === key(b[j])) { pairs.push([i, j]); i++; j++; } else if (len[i + 1][j] >= len[i][j + 1]) i++; else j++;
+  }
+  return pairs;
+}
+
+// The differences of +a+ and +b+: between two common items, a same-kind pair
+// at one place is one change ([a, b]), the rest one-sided ([a, null],
+// [null, b]).
+function differences(a, b) {
+  const out = [];
+  const gap = (as, bs) => {
+    const rest = [...bs];
+    for (const x of as) {
+      const at = rest.findIndex((y) => y.kind === x.kind);
+      if (at >= 0) out.push([x, rest.splice(at, 1)[0]]);
+      else out.push([x, null]);
+    }
+    rest.forEach((y) => out.push([null, y]));
+  };
+  let i = 0;
+  let j = 0;
+  for (const [pi, pj] of [...commonRun(a, b), [a.length, b.length]]) {
+    gap(a.slice(i, pi), b.slice(j, pj));
+    i = pi + 1;
+    j = pj + 1;
+  }
+  return out;
+}
+
+// +a+ (live) against +b+ (reloaded), +allow+ the ids of the ACCEPTED entries
+// that may explain a difference. Besides the verdict on what is left: which
+// ACCEPTED entries (any, allowed or not) would excuse a difference left
+// (`excused`, sorted ids) and whether every one left has such an entry
+// (`explained`): the opt-in reload check allows none and logs these, so each
+// class is counted apart.
+export function compareShapes(a, b, { allow = [] } = {}) {
+  const accepted = ACCEPTED.filter((entry) => allow.includes(entry.id));
+  const shapes = { live: a, reloaded: b };
+  const left = differences(a, b).filter(([x, y]) => !accepted.some((entry) => entry.match(x, y, shapes)));
+  const kinds = [...new Set(left.map(([x, y]) => (x || y).kind))].sort();
+  const excusing = left.map(([x, y]) => ACCEPTED.filter((entry) => entry.match(x, y, shapes)).map((entry) => entry.id));
+  const excused = [...new Set(excusing.flat())].sort();
+  return { same: left.length === 0, kinds, excused, explained: excusing.every((ids) => ids.length > 0), differences: left };
+}

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

@@ -1488,6 +1488,11 @@ body.has-session #newBtn .brand-new{display:inline}
 .project-all::before{content:"";position:absolute;left:-1px;right:-1px;top:-9px;height:1px;background:var(--border);pointer-events:none}
 .project-note{padding:5px 2px;color:var(--text-muted);font-size:12px}
 .project-error{color:var(--warn-text)}
+.project-picker .project-new{width:100%;text-align:left;background:var(--bg-inset);color:var(--accent)}
+.project-create{display:grid;gap:8px;padding:8px 2px}
+.project-create label{color:var(--text-muted);font-size:12px}
+.project-create input{width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg-inset);color:var(--text)}
+.project-create-actions{display:flex;justify-content:flex-end;gap:8px}
 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}}
@@ -1780,7 +1785,7 @@ a{color:var(--accent)}
 @media (max-width:600px),(pointer:coarse){
   #composer textarea,.question-freeform,.continue-reason,.participants-popover input,.participants-popover select,
   .rs-form textarea,.pp-link input,.llmctx-field select,.llmctx-field input,.ws-add-in,.rename-input,
-  #modelSearch{font-size:16px}
+  #modelSearch,.project-create input{font-size:16px}
 }
 </style>
 </head>

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

@@ -24,10 +24,19 @@ function projectRow(row) {
   </a>`;
 }
 
+function projectParent(rootLabel) {
+  if (typeof rootLabel !== "string" || !rootLabel) return "~/";
+  const slash = rootLabel.lastIndexOf("/");
+  if (slash < 0) return "~/";
+  const parent = rootLabel.slice(0, slash);
+  return parent ? `${parent.replace(/\/$/, "")}/` : "/";
+}
+
 // +rows+ is the API's ordered list. When there is no project scope, the
 // all-projects row is current; a bad ?dir= has no current project to mark.
 export function pickerTemplate({ rows = [], loading = false, error = "", currentDir = null,
-                                 allCurrent = false } = {}) {
+                                 allCurrent = false, createOpen = false, createPath = "~/", creating = false,
+                                 createError = "", onPathInput = () => {} } = {}) {
   const allHref = allScopeHref("", currentDir);
   return html`<div class="ctx-pop-head"><strong>Projects</strong><button type="button" class="ctx-pop-close"
       data-act="close" aria-label="Close">×</button></div>
@@ -39,7 +48,15 @@ export function pickerTemplate({ rows = [], loading = false, error = "", current
         <span class="project-main"><span class="project-name">All projects</span
           ><span class="project-hint">Every session</span></span>
         ${allCurrent ? html`<span class="project-check" aria-hidden="true">✓</span>` : nothing}
-      </a>
+      </a>${createOpen ? html`<form class="project-create" aria-busy=${creating}>
+        <label for="projectCreatePath">Folder path</label>
+        <input id="projectCreatePath" name="dir" type="text" autocomplete="off" .value=${createPath}
+          aria-invalid=${createError ? "true" : "false"} aria-describedby=${createError ? "projectCreateError" : nothing}
+          @input=${onPathInput}>
+        ${createError ? html`<div class="project-note project-error" id="projectCreateError" role="alert">${createError}</div>` : nothing}
+        <div class="project-create-actions"><button type="submit">${creating ? "Creating…" : "Create"}</button>
+          <button type="button" class="ghost" data-act="cancel-new">Cancel</button></div>
+      </form>` : html`<button type="button" class="project-row project-new" data-act="new-project">New project…</button>`}
     </nav>`;
 }
 
@@ -51,6 +68,12 @@ export function createProjectPicker({ el, scope, scopeError = () => null, api,
   let error = "";
   // Only the newest read is drawn; a close drops the one out (latest.js).
   const latest = createLatest();
+  // Creating a project must not invalidate an in-flight list read.
+  const createLatestAnswer = createLatest();
+  let createOpen = false;
+  let createPath = "~/";
+  let creating = false;
+  let createError = "";
 
   const currentDir = () => scopeError() ? null : scope.dir || null;
   const paint = (focus = false) => {
@@ -58,6 +81,8 @@ export function createProjectPicker({ el, scope, scopeError = () => null, api,
     render(pickerTemplate({
       rows, loading, error, currentDir: currentDir(),
       allCurrent: !scope.dir && !failedScope,
+      createOpen, createPath, creating, createError,
+      onPathInput: (event) => { createPath = event.currentTarget.value; },
     }), shell.pop);
     if (focus) {
       const target = shell.pop.querySelector('.project-row[aria-current="page"]') ||
@@ -89,11 +114,53 @@ export function createProjectPicker({ el, scope, scopeError = () => null, api,
     if (!fresh()) return;
     loading = false;
     if (shell.isOpen()) {
-      paint(focus);
+      // An open form keeps the caret: a late list must not pull focus to a row.
+      paint(focus && !createOpen);
       shell.replace();
     }
   }
 
+  async function submitProject() {
+    if (creating) return;
+    const fresh = createLatestAnswer.begin();
+    creating = true;
+    createError = "";
+    paint();
+    shell.replace();
+    try {
+      const answer = await api("/api/projects", { method: "POST", body: JSON.stringify({ dir: createPath }) });
+      if (!fresh()) return;
+      win.location.assign(projectScopeHref(answer.dir, ""));
+    } catch (e) {
+      if (!fresh()) return;
+      createError = e?.body?.detail || e?.message || String(e);
+      creating = false;
+      paint();
+      shell.replace();
+    }
+  }
+
+  function openCreateForm() {
+    createOpen = true;
+    createPath = projectParent(rows.find((row) => row.default)?.root_label);
+    createError = "";
+    creating = false;
+    paint();
+    shell.replace();
+    const input = shell.pop.querySelector("#projectCreatePath");
+    input?.focus();
+    input?.setSelectionRange(input.value.length, input.value.length);
+  }
+
+  function closeCreateForm() {
+    createLatestAnswer.drop();
+    createOpen = false;
+    creating = false;
+    createError = "";
+    paint();
+    shell.replace();
+  }
+
   const shell = createChipPopover({
     id: "projectPicker", className: "ctx-popover project-picker", width: 380, el, anchor: "#scopePick",
     summary: () => ({}), sheet: true, label: "Projects", doc, win,
@@ -101,10 +168,25 @@ export function createProjectPicker({ el, scope, scopeError = () => null, api,
       rows = [];
       loading = true;
       error = "";
+      createOpen = false;
+      createPath = "~/";
+      creating = false;
+      createError = "";
       paint();
       void load(true);
     },
-    onClose: () => { latest.drop(); },
+    onSubmit: () => { void submitProject(); },
+    onAct: (name) => {
+      if (name === "new-project") openCreateForm();
+      else if (name === "cancel-new") closeCreateForm();
+    },
+    onClose: () => {
+      latest.drop();
+      createLatestAnswer.drop();
+      createOpen = false;
+      creating = false;
+      createError = "";
+    },
   });
 
   return { pop: shell.pop, isOpen: shell.isOpen, load };

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

@@ -0,0 +1,17 @@
+// Where a saved recap goes by its stamp: the id of the last turn opening it
+// covers (+openingId+, RecapPlace.opening_id: a prompt's turn_id, a wake
+// note's, /continue no's reason line's own id), as a snapshot's card goes
+// (card_stamps.js). It sits before the opening after that one's bubble, or
+// at the end. No counting, so a rollback or a check-in can't put it a turn
+// off. Without a stamp (an older worker's recap) or when the page doesn't
+// draw that opening, it falls back to its count (format.js recapPlace).
+// A new module: the static JS is unversioned (docs/internals/web-frontend.md).
+import { stampedOpening } from "./card_stamps.js";
+import { recapPlace } from "./format.js";
+
+// The bubble the recap goes before (null: the end).
+export function recapStampPlace(userBubbles, openingId, turnsSince) {
+  const at = stampedOpening(userBubbles, openingId);
+  if (at < 0) return recapPlace(userBubbles, turnsSince);
+  return userBubbles[at + 1] || null;
+}

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

@@ -0,0 +1,71 @@
+// The opt-in reload check (web.reload_check; <body data-reload-check="1">):
+// once a finished turn's pieces have reached the history (the stage's
+// hand-off), the page reads the session again as a reload would, draws the
+// turn offscreen (turnHistoryNodes, a reload's renderer) and compares the
+// two (history_shape.js) strictly: no ACCEPTED entry excuses a difference,
+// so `same` is false for a known divergence too, and `excused` names the
+// entries that would explain the differences (`explained`: all of them
+// have one), so chi web's log counts each class apart (the bugs turn
+// drawings close, the deliberate ones). It posts the counts, never
+// content: {turn_id, same, kinds, excused, explained, drawn}; chi web logs
+// them (reload_checked, reload_mismatch). Fire-and-forget: no toast, no
+// store write, a failure is dropped.
+//
+// Cards are left out on both sides: a reload places them after the render
+// (CardStore's stamps, cards_place.js), which the offscreen render doesn't
+// run; the e2e reload checks compare them.
+import { compareShapes, historyShape } from "./history_shape.js";
+import { turnElements } from "./turn_range.js";
+
+// The opening of a turn: its prompt, a wake's note, /continue no's line.
+const OPENING = "[data-turn-id], [data-opening-id]";
+// Not the turn's: the lines queued for after it (they open the next turns).
+const NOT_THE_TURNS = ".bubble.user.queued, .bubble.command.queued";
+
+function openingId(el) {
+  return el?.dataset?.turnId || el?.dataset?.openingId || null;
+}
+
+function withoutCards(shape) {
+  return shape.filter((item) => item.kind !== "card");
+}
+
+// @param enabled () => whether the check is on (the body's attribute)
+// @param sessionId () => the open session's id
+// @param running () => whether a turn runs now (liveTurn.running: a queued
+//   turn started streaming)
+// @param read (id) => the session as a reload reads it (GET ?parts=1)
+// @param render (data) => that read drawn as a reload draws it (a fragment)
+// @param post (id, body) => the counts to chi web
+export function createReloadCheck({ enabled, sessionId, running, read, render, post }) {
+  // The hand-off's pieces (stage_view.js onHandedOff), in their order;
+  // +immediate+: another turn took the stage at once.
+  async function handedOff({ pieces = [], immediate = false } = {}) {
+    if (!enabled() || immediate || running()) return;
+    const [opening, ...rest] = pieces;
+    const turnId = openingId(opening?.matches?.(OPENING) ? opening : null);
+    if (!turnId) return;
+    const id = sessionId();
+    try {
+      const data = await read(id);
+      if (sessionId() !== id || running()) return;
+      // The live pieces as they read now, after the read: a canceled or
+      // failed turn hands off at once, and its timing line takes the turn
+      // record's figure when its own re-read lands (refreshTimingFromSession),
+      // which started at the turn's end, before this one.
+      const live = withoutCards(historyShape(rest.filter((el) => !el.matches?.(NOT_THE_TURNS))));
+      const holder = document.createElement("div");
+      holder.append(render(data));
+      const reopened = [...holder.querySelectorAll(OPENING)].find((el) => openingId(el) === turnId);
+      const reloaded = reopened ? withoutCards(historyShape(turnElements(reopened, { container: holder }))) : [];
+      const { same, kinds, excused, explained } = reopened ? compareShapes(live, reloaded)
+        : { same: false, kinds: ["prompt"], excused: [], explained: false };
+      // Whether the read had a drawing for the turn (turn drawings, P2).
+      const drawn = !!data?.turn_drawings?.[turnId];
+      await post(id, { turn_id: turnId, same, kinds, excused, explained, drawn });
+    } catch (_) {
+      // Fire-and-forget: a failed read or post is no finding.
+    }
+  }
+  return { handedOff };
+}

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

@@ -8,6 +8,7 @@ import { steerSender } from "./format.js";
 import { hookNoticeLabel } from "./turn_events.js";
 import { askingRefs, askingText } from "./turn_model.js";
 import { plainLine } from "./plain_line.js";
+import { turnPieces } from "./turn_pieces.js";
 
 const READ_LIKE = new Set(["read", "memory_read", "web_fetch", "task_get", "task_list", "list_sessions"]);
 const EDITS = new Set(["edit", "write", "memory_write"]);
@@ -225,12 +226,13 @@ export function handOffDue({ ended, pending, inUse, quietSinceMs, nowMs }) {
   return { due: nowMs - since >= QUIET_MS, quietSinceMs: since };
 }
 
-// A handed-off turn's nodes in the order the turn block leaves them: the
-// prompt bubble (none for a reminder turn), the block, the extras in arrival
-// order, the answer's pieces, the timing line, the end line, the kept cards,
-// then the lines queued for after the turn (they run next).
+// A handed-off turn's nodes in the order the turn block leaves them, the
+// order a reload draws (turn_pieces.js turnPieces): the prompt bubble (none
+// for a reminder turn), the block, the extras in arrival order, the answer's
+// pieces, the timing line, the end line, the kept cards, then the lines
+// queued for after the turn (they run next).
 export function handOffOrder({ prompt = null, block = null, extras = [], answer = [], timing = null, end = null, kept = [], queued = [] }) {
-  return [prompt, block, ...extras, ...answer, timing, end, ...kept, ...queued].filter(Boolean);
+  return turnPieces({ prompt, block, merged: extras, answer, timing, end, kept, queued });
 }
 
 // The rows that wait for the running turn's end to run as their own: a

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

@@ -67,10 +67,11 @@ function readCollapsed() {
 // page's working set (working_set_view.js, web.working_set; null: off): its
 // rail in the live slots, its footprint at the hand-off. +onCancel+: the
 // status row's Stop turn (a promise of the cancel request; the button is
-// disabled until it settles); null: no Stop turn.
+// disabled until it settles); null: no Stop turn. +onHandedOff+({pieces,
+// immediate}): a turn's pieces reached the history (reload_check.js).
 export function createStageView({
   historyEl, isNearBottom: historyNearBottom, sawText, sessionId, dockEl, centerEl, taskStop = null,
-  renderMarkdown, linkRefs, workingSet = null, onCancel = null,
+  renderMarkdown, linkRefs, workingSet = null, onCancel = null, onHandedOff = null,
 }) {
   // The dock becomes a clear column: the stage's card, then the composer's
   // (its rows moved into .dock-card, which wears the glass and the focus ring).
@@ -709,7 +710,7 @@ export function createStageView({
       queued: [...queuedSlot.children],
     });
     const animate = !immediate && !reducedMotion() && !document.hidden && !collapsed;
-    folding = { pieces, block: blockEl, endKind, wasAtEnd: historyNearBottom(), animate };
+    folding = { pieces, block: blockEl, endKind, wasAtEnd: historyNearBottom(), animate, immediate };
     releaseTurn();
     if (!animate) return finishFold();
     stage.classList.add("leaving");
@@ -735,6 +736,9 @@ export function createStageView({
     }
     clearStage();
     if (fold.wasAtEnd) easeScrollTo(historyEl, () => historyEl.scrollHeight - historyEl.clientHeight, { reduce: !fold.animate || reducedMotion() });
+    // The turn's pieces are in the history now (the opt-in reload check,
+    // reload_check.js); +immediate+: another turn took the stage.
+    onHandedOff?.({ pieces: fold.pieces, immediate: fold.immediate });
   }
 
   function dropBare() {

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

@@ -257,9 +257,13 @@ export function createStreamHandlers(deps) {
       activityEnded();
       const text = failedTurnText(data);
       // Only a rolled-back turn's line waits for its prompt_restored.
-      liveTurn.failedText = Number.isInteger(data.kept_steps) ? null : text;
+      const kept = Number.isInteger(data.kept_steps);
+      liveTurn.failedText = kept ? null : text;
       endTurnView("failed", text);
       setLiveStatus("idle");
+      // A kept turn's timing line from its record, as a canceled one's and a
+      // reload's (a rolled-back one is drawn again by prompt_restored's resync).
+      if (kept) refreshTimingFromSession();
     },
     // The rolled-back turn left the session: render it from the server again,
     // then show the prompt once more, marked failed (with why). This tab's own
@@ -355,7 +359,9 @@ export function createStreamHandlers(deps) {
     // Due reminders went into the turn (a reminder turn has no prompt bubble).
     reminder_injected: (data) => {
       gapBefore(data.at);
-      addCommandBubble({ label: null, line: reminderText(data), text: "", at: data.at });
+      // Its turn's id: a resync that draws the turn from its drawing (which
+      // has the reminder) drops this kept bubble (commands.js).
+      addCommandBubble({ label: null, line: reminderText(data), text: "", at: data.at, turnId: liveTurn.timing.turnId || null });
     },
     // A context note joined the conversation (between turns; no turn runs).
     // A note is activity of its own: it starts nothing, so it ends there too.

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

@@ -1,4 +1,5 @@
 import { isShellCommandItem } from "./shell_command.js";
+import { drawingTurn, drawnKind } from "./turn_drawing.js";
 
 export function formatDuration(milliseconds) {
   const ms = Number(milliseconds);
@@ -190,12 +191,35 @@ export function timedTurnIndexes(items) {
 // prompts, as timedTurnIndexes does. The
 // user's lines merged into the running turn (`merged`, the server's
 // Steer::INPUT_KIND) stay in it: the turn's `merged` list.
-export function turnGroups(items, timing) {
+// +drawings+ (chi web's turn_drawings, {turn_id: {events, end}}): the items
+// stamped with a drawn turn's id (`drawn`) are that turn's group (`drawn`,
+// its `drawing`), whether or not they start with an opening (a reminder
+// turn has none; a wake's note, outside the range, opens it by its id); its
+// steps are the drawing's (turn_drawing.js), and an unstamped item after it
+// starts no part of it.
+export function turnGroups(items, timing, { drawings = null } = {}) {
   const groups = [];
   let turnIndex = -1;
   let turn = null;
   items.forEach((item, i) => {
-    if (item?.role === "note" && !startsTurn(item)) {
+    const drawn = drawings && typeof item?.drawn === "string" && drawings[item.drawn] ? item.drawn : null;
+    const looseNote = item?.role === "note" && !startsTurn(item);
+    if (turn?.drawn && !drawn && !looseNote) turn = null;
+    // An opening just before the range with the drawn turn's id (a wake's
+    // note, added before the turn began): the drawn turn's own.
+    if (drawn && turn && !turn.drawn && turn.turnId === drawn && turn.texts.length === 0) turn.drawn = drawn;
+    if (drawn && turn?.drawn !== drawn && !looseNote) {
+      turnIndex += 1;
+      turn = { kind: "turn", turnIndex, turnId: drawn, drawn, user: startsTurn(item) ? i : null, texts: [], steers: [], merged: [] };
+      groups.push(turn);
+      if (startsTurn(item)) return;
+    } else if (drawn && turn?.drawn === drawn && startsTurn(item) && !item.merged && item.role === "user") {
+      // A second opening line of the drawn turn (a wake turn's report after
+      // its note): one of its lines, as live drew it.
+      turn.merged.push(i);
+      return;
+    }
+    if (looseNote) {
       groups.push({ kind: "note", i });
     } else if (isShellCommandItem(item)) {
       // A `!cmd`'s record: its bubble alone, between the turns.
@@ -219,6 +243,7 @@ export function turnGroups(items, timing) {
   });
   return groups.map((g) => {
     if (g.kind !== "turn") return g;
+    if (g.drawn) return drawnGroup(g, items, timing, drawings[g.drawn]);
     const group = withSteers(turnGroup(g, items, timing), g.steers, items);
     // A turn that ended with no answer: its notice (the item's index) in
     // the answer's place.
@@ -232,6 +257,22 @@ export function turnGroups(items, timing) {
   });
 }
 
+// A drawn turn's group: its record by id, its steps the drawing's gens
+// (the rows the working set and the footprint read, as live), its answer
+// the last text of a completed turn that had one, and its items (the
+// opening, merged lines, the empty answer) by index.
+function drawnGroup(g, items, timing, drawing) {
+  const record = (timing?.turnRecords || []).find((r) => r.id === g.drawn) || null;
+  const steps = drawingTurn(drawing).gens.map((gen, k) => ({ i: null, iteration: k + 1, thinking: gen.thinking, tools: gen.tools }));
+  const last = g.texts[g.texts.length - 1];
+  const answered = drawnKind(drawing.end) === "completed" && g.emptyAnswer == null && last != null && String(items[last]?.content ?? "") !== "";
+  const group = { kind: "turn", turnIndex: g.turnIndex, user: g.user, turnId: g.drawn, drawn: g.drawn, drawing, record, steps,
+    texts: g.texts, answer: answered ? last : null, steers: [] };
+  if (g.emptyAnswer != null) group.emptyAnswer = g.emptyAnswer;
+  if (g.merged.length) group.merged = g.merged;
+  return group;
+}
+
 // A turn's steers (a plugin's nudges) into its steps: each goes to the step
 // that answered it (`step`: the server counts the model messages since the
 // prompt, plus one). One whose step isn't there (the answer, which leaves