samagotchi 0.170.0 → 0.171.0

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

@@ -16,12 +16,14 @@
 //   liveTurn, turnDom, questionCards, shownTexts, objectives, featureGates, markdownTip
 //                         the page's views
 //   workingSet            the stage view's working set (web.working_set), null when off
+//   wsPreview             its reader and peek (ws_reader.js), null without them: reset with the session
 //   gapClock              the page's last activity (time_gaps.js createGapClock)
 //   bubbles, cards        bubbles.js, cards_place.js
 //   markdown              markdown_place.js (linkTextRefs, applyFinalMarkdown)
 //   capabilities()        the page's capabilities (card.js shownElsewhere, the history's cards)
+//   can(name)             the viewer's (viewer.js): the history's Apply row needs apply
 //   page: {setReviseAnchor(anchor), renderInitRow(), setMarkdownWarning(warning),
-//          setCapabilities(capabilities, editorUrl), findInTurnRoots(selector), appendToHistory(el),
+//          setCapabilities(capabilities, editorUrl, viewer), findInTurnRoots(selector), appendToHistory(el),
 //          setTurnRunning(running), mergeTurnTiming(id, timing), applySessionPayload(data, opts),
 //          turnEndStatus(data), replaceSelectedCard(change)}  the page's hooks
 //   later: {handlers(), composer(), ownerVerify(), commandList(), initTasks(), resetTurnView()}
@@ -35,7 +37,7 @@ import { seedInitTasks } from "./init_row.js";
 import { restoreCommandBubbles } from "./commands.js";
 import { failedTurnText, normalize } from "./format.js";
 import { splitSnapshotCards } from "./card.js";
-import { turnGroups } from "./timing.js";
+import { turnGroups, normalizeTiming } from "./timing.js";
 import { groupItems } from "./working_set_view.js";
 import { thumbsTemplate } from "./images.js";
 import { hintEl, outputBubbleTemplate } from "./bubbles.js";
@@ -47,8 +49,8 @@ import { stillOn } from "./latest.js";
 export function createSessionView(deps) {
   const {
     store, historyEl, getSession,
-    liveTurn, turnDom, questionCards, shownTexts, objectives, featureGates, markdownTip, workingSet = null, gapClock,
-    bubbles, cards, markdown, capabilities, page, later,
+    liveTurn, turnDom, questionCards, shownTexts, objectives, featureGates, markdownTip, workingSet = null, wsPreview = null, gapClock,
+    bubbles, cards, markdown, capabilities, can = () => true, page, later,
   } = deps;
   const { makeUserBubble, addEndBubble, showGuardrailWarning, showRecap } = bubbles;
   const { placeSnapshotCards, upsertCard } = cards;
@@ -84,6 +86,9 @@ export function createSessionView(deps) {
     markdownTip.show(null);
     setCapabilities(null, null);
     later.composer().newVisit();
+    // The reader and the peek are the session's: another one (or none, the
+    // start page) never finds them over #center, the composer inert under it.
+    if (!keepVerify) wsPreview?.reset();
   }
 
   // A session view: its messages, then the turn in progress and the queued
@@ -92,7 +97,7 @@ export function createSessionView(deps) {
   function renderSessionView(data, { kept = [] } = {}) {
     setMarkdownWarning(data.markdown_warning);
     markdownTip.show(data.markdown_tip);
-    setCapabilities(data.capabilities, data.editor_url);
+    setCapabilities(data.capabilities, data.editor_url, data.viewer);
     // The saved fill (when there is one) goes in here too, so a reloaded or
     // stopped session shows it before its next turn (a running turn's replay
     // below streams over it).
@@ -195,7 +200,12 @@ export function createSessionView(deps) {
   // (its prompt has no drawing yet: a plain row, no miss).
   const historyOpts = (data = {}) => ({ thumbs: (images) => thumbsTemplate(store.selected, images), workingSet: !!workingSet,
     drawings: data.turn_drawings || null, cards: data.cards || null, capabilities: capabilities(),
-    runningTurnId: data.current_turn?.turn_id || null });
+    runningTurnId: data.current_turn?.turn_id || null, apply: can("apply") });
+
+  // A read drawn the way a reload draws it: the turn blocks only, nothing
+  // placed after them (the opt-in reload check, reload_check.js, compares
+  // this with what the page has, offscreen).
+  const reloadRender = (data = {}) => turnHistoryNodes(data.messages || [], normalizeTiming(data.timing), historyOpts(data));
 
   function renderHistory(items, data = {}) {
     gapClock.seed(null);
@@ -275,5 +285,5 @@ export function createSessionView(deps) {
     if (questionCards.pendingQuestion()) questionCards.resolveQuestion(questionCards.pendingQuestion().id, { cancelled: true, reason: "turn ended" });
   }
 
-  return { forgetSession, renderSessionView, historyOpts, readTurnEnd, endTurnView };
+  return { forgetSession, renderSessionView, historyOpts, reloadRender, readTurnEnd, endTurnView };
 }

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

@@ -43,10 +43,12 @@ export function createStageAsking({
   // A ref's "show in turn" opened a collapsed stage (not kept).
   let revealed = false;
   // The docked card's fold is +waiting+'s (fold, trackFold): the waiting
-  // card the user folded, by its key. For that card only, never saved: the
-  // next one arrives open, and when the docked card goes the stage is as the
-  // choice and +revealed+ say. One more card waiting since the fold (an
-  // approval, a relayed or hook question) drops it, so the stage opens on it.
+  // card the user folded, by its key — kept for this tab (stage_waiting.js,
+  // chi_asking_fold:<session>), so a reload or a resync mid-turn folds that
+  // card again. For that card only: the next one arrives open, and when the
+  // docked card goes the stage is as the choice and +revealed+ say. One more
+  // card waiting since the fold (an approval, a relayed or hook question)
+  // drops it, so the stage opens on it.
 
   // ── the docked card ──────────────────────────────────────────────────────
 

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

@@ -0,0 +1,35 @@
+// The stage's look while a participant's view of the running turn waits for
+// the owner (the participant main page, scene 3): the status row says
+// "waiting for the owner" and one line under the live slots names what
+// kind of thing they are asked (an approval, a question, a continue
+// offer), never its content; no card. chi web sends the kind alone
+// (ParticipantView.waiting_kind: question_requested / continue_offered's
+// `kind`, the show's current_turn and viewer.waiting_for_owner).
+// stage_view.js draws it at each refresh from its +ownerWait+ hook; the
+// owner's page passes none (its cards are the waiting look).
+
+export const OWNER_WAIT_STATUS = "waiting for the owner";
+
+// The line per kind; a kind the page doesn't know reads as a question.
+export const OWNER_WAIT_TEXT = Object.freeze({
+  approval: "chi wants to run a command that needs the owner's approval. The turn continues when they answer.",
+  question: "chi asked the owner a question. The turn continues when they answer.",
+  continue: "chi asks the owner whether to go on. The turn continues when they answer.",
+});
+
+export const ownerWaitText = (kind) => OWNER_WAIT_TEXT[kind] || OWNER_WAIT_TEXT.question;
+
+// +stage+ the stage's root, +line+ the line's node (stage_view.js makes it
+// after the live slots), +phaseEl+ the status row's phase.
+// @return draw(kind): kind null (not waiting) puts the stage back
+export function createOwnerWait({ stage, line, phaseEl }) {
+  line.hidden = true;
+  return function draw(kind) {
+    stage.classList.toggle("owner-wait", !!kind);
+    line.hidden = !kind;
+    if (!kind) return;
+    phaseEl.textContent = OWNER_WAIT_STATUS;
+    const text = ownerWaitText(kind);
+    if (line.textContent !== text) line.textContent = text;
+  };
+}

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

@@ -39,6 +39,7 @@ import { ASKS, PENDING } from "./stage_cards.js";
 import { createStageAsking } from "./stage_asking.js";
 import { cardIn, createStageWaiting, isApprovalCard, isBlocking, waitingKey, waitingKind } from "./stage_waiting.js";
 import { stampRows } from "./working_set_view.js";
+import { createOwnerWait } from "./stage_owner_wait.js";
 
 // The turn-end read (markdown, answer_display) settles within this, or the
 // hand-off stops waiting for it.
@@ -71,10 +72,14 @@ const OPENING = "[data-turn-id], [data-opening-id]";
 // The quiet signal's inputs (stage_stall.js): +clock+() the page's time,
 // +streamLive+() the session's stream is open, +timingNote+() what the turn
 // waits on (live_timing.js note), +serverGen+() a joiner's generation.
+// +canCancel+() whether this turn's Stop turn shows (a participant's own
+// turn only); +ownerWait+() the kind a participant's view waits for the
+// owner on, or null (stage_owner_wait.js).
 export function createStageView({
   historyEl, isNearBottom: historyNearBottom, sawText, sessionId, dockEl, centerEl, taskStop = null,
   renderMarkdown, linkRefs, workingSet = null, onCancel = null, onHandedOff = null,
   clock = () => Date.now(), streamLive = () => true, timingNote = () => "", serverGen = () => null,
+  canCancel = () => true, ownerWait = () => 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).
@@ -135,6 +140,8 @@ export function createStageView({
   headline.tabIndex = 0;
   headline.setAttribute("role", "button");
   headline.title = "Show this step's reasoning";
+  // A participant's turn waiting for the owner: one line under the headline, no card.
+  const drawOwnerWait = createOwnerWait({ stage, line: node("div", "ts-owner-wait", live), phaseEl });
   const now = node("div", "ts-now", live);
   const trail = node("div", "ts-trail", live);
   // The working set's rail: out of the live slots' flow on their right (a
@@ -259,8 +266,9 @@ export function createStageView({
   });
 
   // The cards that wait in the stage, as data (stage_waiting.js): the
-  // docked card, its fold, what blocks, the approval's cap read them.
-  const waiting = createStageWaiting();
+  // docked card, its fold, what blocks, the approval's cap read them. The
+  // fold of the asking card is this tab's own, kept per session.
+  const waiting = createStageWaiting({ sessionId });
   let dockedAtLastRefresh = [];
   // The asking form and the stage's fold (stage_asking.js).
   const ask = createStageAsking({
@@ -415,7 +423,7 @@ export function createStageView({
     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;
+    cancel.hidden = !onCancel || !canCancel() || !!endKind;
     stage.classList.toggle("waiting", blocked);
     if (!blocked && wasWaiting) settleAnsweredCard();
     if (answeredWithCardLeft && !blocked) releaseHeldWait();
@@ -427,6 +435,7 @@ export function createStageView({
     const asksFront = !!asking && !blocked && !endKind && waiting.get(waiting.front())?.kind === "asks";
     const streaming = asksFront ? liveSlots(turn).phase : "";
     phaseEl.textContent = phaseLabel({ phase: slots.phase, asksFront, streaming });
+    drawOwnerWait(endKind ? null : ownerWait());
     stage.classList.toggle("asks-live", asksFront);
     drawAsksText(asksFront && gen?.text && !gen.answer ? String(gen.text).trim() : "");
 
@@ -820,6 +829,9 @@ export function createStageView({
     // history is as tall as it gets, room to keep the reader's rows in
     // place): each answered card's clamp says it now, as the turn reloads.
     opener.end();
+    // The asking card's fold is this turn's: with the turn handed off, there
+    // is nothing for a reload to bring back.
+    waiting.clearFold();
     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,
@@ -1100,7 +1112,7 @@ export function createStageView({
       stage.classList.add("bare");
       stage.dataset.phase = "running";
       phaseEl.textContent = "running";
-      cancel.hidden = !onCancel;
+      cancel.hidden = !onCancel || !canCancel();
       show();
     },
     // The page's clock ticks (app.js, the live timing's 200 ms / 1 s): the
@@ -1110,6 +1122,8 @@ export function createStageView({
       if (holding && asksCard() && liveSlots(view.current().turn).tool?.startedAt != null) scheduleRefresh();
     },
     callClockActive: () => holding && asksCard() && !!liveSlots(view.current().turn).tool,
+    // An input of the hooks changed (a participant's ownerWait, canCancel).
+    redraw: () => scheduleRefresh(),
     handOff,
     // A card stopped waiting (stage_waiting.js keys; +only+: when it is that
     // kind): question_cards.js's resolve path, cards_place.js upsertCard.

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

@@ -25,8 +25,12 @@
 // a reload agree whatever order the replay brings them in. One docked card
 // shows at a time (+shown+: the one the pager is on, else the first). The
 // fold (the docked card's own, stage_asking.js) is the folded card's key and
-// how many cards waited when it was folded.
+// how many cards waited when it was folded. That fold is this tab's own: it
+// is kept in sessionStorage (one entry per session) so a reload or a resync
+// mid-turn draws the card as the user left it, and it goes when the card is
+// answered or cancelled, when the fold drops, and when the turn hands off.
 import { ASKS, PENDING, WARN_CARD } from "./stage_cards.js";
+import { readSession, removeSession, writeSession } from "./storage.js";
 
 // The kinds: what blocks the turn (BLOCKING), a running turn's card with
 // actions (check-in: "asks"), a plugin's warning ("warn": stays in sight,
@@ -46,6 +50,20 @@ export const CONTINUE_KEY = "continue";
 export const questionKey = (qid) => (qid == null ? null : `q:${qid}`);
 export const pluginCardKey = (id) => (id == null || id === "" ? null : `c:${id}`);
 
+// The asking card's fold, kept for this tab (docs/internals/web-frontend.md
+// Storage keys): one entry per session, JSON {key, with}.
+export const FOLD_PREFIX = "chi_asking_fold:";
+export const foldKey = (sessionId) => (sessionId ? `${FOLD_PREFIX}${sessionId}` : null);
+
+// The fold's storage: the guarded sessionStorage (storage.js); the specs
+// inject their own, so one test's fold is not another's (they all use session
+// s1 and the same question ids).
+const tabStorage = {
+  read: (key) => readSession(key),
+  write: (key, value) => writeSession(key, value),
+  remove: (key) => removeSession(key),
+};
+
 // +el+'s key, null: not a card the stage keeps.
 export function waitingKey(el) {
   if (!el?.matches) return null;
@@ -79,13 +97,19 @@ export function cardIn(root, key) {
 // +kind+'s rank in the stage's order: blocking cards before the rest.
 const rank = (kind) => (BLOCKING.has(kind) ? 0 : 1);
 
-export function createStageWaiting() {
+// +sessionId+: the open session (a getter, as app.js and the harnesses pass
+// it); +storage+: the fold's read/write/remove, guarded (the specs inject
+// their own).
+export function createStageWaiting({ sessionId = null, storage = tabStorage } = {}) {
   const cards = new Map();
   let seq = 0;
   let folded = null;
   let foldedWith = 0;
   // The docked card the pager is on (null: the first).
   let paged = null;
+  // The key this session's fold is stored under (null: no session, nothing
+  // to keep).
+  const at = () => foldKey(typeof sessionId === "function" ? sessionId() : sessionId);
 
   const entries = () => [...cards.entries()].sort((a, b) => rank(a[1].kind) - rank(b[1].kind) || a[1].order - b[1].order);
   const dockedKeys = () => entries().filter(([, e]) => e.docked).map(([key]) => key);
@@ -98,6 +122,28 @@ export function createStageWaiting() {
     return n;
   }
 
+  // The fold this tab kept for the open session: {key, with}, or null (no
+  // fold, nothing stored, or storage that can't be read).
+  function storedFold() {
+    const key = at();
+    if (!key) return null;
+    try {
+      const value = JSON.parse(storage.read(key) || "null");
+      return typeof value?.key === "string" ? { key: value.key, with: Number(value.with) || 0 } : null;
+    } catch (_) {
+      return null;
+    }
+  }
+
+  // The stored fold says what the fold is: written with the count it was
+  // made at, removed when there is no fold.
+  function keepFold() {
+    const key = at();
+    if (!key) return;
+    if (folded) storage.write(key, JSON.stringify({ key: folded, with: foldedWith }));
+    else storage.remove(key);
+  }
+
   return {
     // +key+ came to the stage (again: its kind and flags change, its place in
     // the order stays).
@@ -117,7 +163,9 @@ export function createStageWaiting() {
       cards.delete(key);
       return true;
     },
-    // The stage let its turn go: nothing waits, nothing is folded.
+    // The stage let its turn go: nothing waits, nothing is folded — the
+    // stored fold stays: a resync replays the same turn, and the fold is the
+    // user's.
     reset() {
       cards.clear();
       seq = 0;
@@ -161,20 +209,40 @@ export function createStageWaiting() {
     // Every entry in the stage's order (the tests' and the harness's read).
     list: () => entries().map(([key, e]) => ({ key, ...e })),
     // The asking form's fold: +key+ folded by hand (null: unfolded), with
-    // the blocking cards that wait now.
+    // the blocking cards that wait now. Kept for this tab, so the same card
+    // is folded again after a reload or a resync.
     fold(key) {
       folded = key ?? null;
       foldedWith = count();
+      keepFold();
     },
     // The fold as it stands with +asking+ (the asking form's card key) now:
     // a card answered meanwhile lowers the mark, one more waiting than at
-    // the fold drops it, and so does another form. The folded key, or null.
+    // the fold drops it, and so does another form. The replay drew the card
+    // the tab folded: with nothing folded in memory, that fold comes back.
+    // The folded key, or null.
     trackFold(asking) {
       const now = count();
+      // Nothing folded in memory and the replay drew the card this tab
+      // folded (a reload, or a resync mid-turn): take that fold back.
+      if (!folded) {
+        const stored = storedFold();
+        if (stored?.key === asking) { folded = stored.key; foldedWith = stored.with; }
+      }
       foldedWith = Math.min(foldedWith, now);
-      if (folded && (folded !== asking || now > foldedWith)) folded = null;
+      if (folded && (folded !== asking || now > foldedWith)) {
+        folded = null;
+        // Live unfolded it: a reload must not fold it again.
+        keepFold();
+      }
       return folded;
     },
+    // The folded card is done for good (answered, cancelled, the turn handed
+    // off): there is no fold to bring back.
+    clearFold() {
+      const key = at();
+      if (key) storage.remove(key);
+    },
     folded: () => folded,
   };
 }

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

@@ -4,6 +4,28 @@
 // globalThis.localStorage at each call, never at import (the specs install
 // their own).
 
+// The same guards on sessionStorage: this tab only, so a reload or a resync
+// of it keeps what is written, and another tab or device never sees it.
+// Reads globalThis.sessionStorage at each call (the specs install their own).
+
+// The stored string, or +fallback+ when there is none or it can't be read.
+export function readSession(key, fallback = null) {
+  try {
+    const value = globalThis.sessionStorage?.getItem(key);
+    return value == null ? fallback : value;
+  } catch (_) {
+    return fallback;
+  }
+}
+
+export function writeSession(key, value) {
+  try { globalThis.sessionStorage?.setItem(key, value); } catch (_) {}
+}
+
+export function removeSession(key) {
+  try { globalThis.sessionStorage?.removeItem(key); } catch (_) {}
+}
+
 // The stored string, or +fallback+ when there is none or it can't be read.
 export function readStored(key, fallback = null) {
   try {

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

@@ -19,6 +19,7 @@
 //   capabilities()        the page's capabilities (card.js shownElsewhere)
 //   historyEl             the history element (keepFollowing, the failed-turn redraw)
 //   liveTurn, turnDom, shownTexts, questionCards, contextChips  the page's views
+//                         (contextChips null for a viewer without them, viewer.js)
 //   workingSet            the stage view's working set (web.working_set),
 //                         null when off
 //   participantsControl   the owner's participants panel (participants_panel.js),
@@ -370,7 +371,7 @@ export function createStreamHandlers(deps) {
       gapBefore(at);
       addNoteBubble({ label: data.label, content: data.text || "", at, objectives: data.objectives });
       // An attached context source's note: its chip changed.
-      if (data.context_source) contextChips.refresh();
+      if (data.context_source) contextChips?.refresh();
     },
     // The session's list changed (objectives_strip.js): an edit waiting, a
     // list note in, a turn's moves.

data/lib/samagotchi/web/public/tokens.css

@@ -1,4 +1,4 @@
-/* The web UI's colour tokens, shared by the owner's page (index.html) and the participant page (participant.html): the dark :root (the default) and the light set under prefers-color-scheme: light. Everything else reads them through var(). */
+/* The web UI's colour tokens, read by the page (index.html, every viewer's): the dark :root (the default) and the light set under prefers-color-scheme: light. Everything else reads them through var(). */
 :root{color-scheme:dark;--bg:#0b0d11;--bg-top:#131d29;--bg-panel:#151821;--bg-inset:#0f1115;--bg-raised:#22262f;--bg-hover:#1b1f27;--border:#1f232b;--border-strong:#2d333f;--text:#e6e8eb;--text-bright:#f0f3f6;--text-2:#c9d1d9;--text-3:#9aa4b2;--text-muted:#8b949e;--text-faint:#6e7681;--accent:#5aa9ff;--accent-strong:#0071e3;--accent-bg:#0f2340;--accent-ring:rgba(90,169,255,.18);--primary:#0071e3;--ok:#3fb950;--ok-text:#7ee787;--ok-bg:#1a2e1a;--warn:#d29922;--warn-text:#e3b341;--warn-bright:#f2cc60;--warn-bg:#2b2108;--warn-border:#6b5416;--danger:#f85149;--danger-bg:#da3633;--danger-text:#ff7b72;--danger-bg-dim:#3d1f1f;--think:#8957e5;--think-text:#d2a8ff;--accent-border:#1a3458;--pick-border:#79c0ff;--accent-tint:color-mix(in srgb,var(--accent) 7%,transparent);--narr:color-mix(in srgb,var(--accent) 38%,var(--text-muted));
   --glass-bg:color-mix(in srgb,var(--bg-panel) 70%,transparent);--glass-border:rgba(255,255,255,.08);--glass-highlight:rgba(255,255,255,.05);--glass-shadow:0 8px 30px rgba(0,0,0,.35);
   --diff-add-bg:rgba(63,185,80,.14);--diff-add-text:#aff5b4;--diff-del-bg:rgba(248,81,73,.14);--diff-del-text:#ffc1bc;

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

@@ -978,8 +978,9 @@ function pairStepTexts(els, group, items) {
 // turn's footprint on its summary line.
 // +cards+ the snapshot's cards (a drawn card's body), +capabilities+ the
 // page's (a notice shown elsewhere).
+// +apply+: false for a viewer without the owner's Apply (viewer.js): no Apply row.
 export function turnHistoryNodes(items, timing, { thumbs, workingSet = false, now = Date.now(), drawings = null, cards = null, capabilities = {},
-  runningTurnId = null }) {
+  runningTurnId = null, apply = true }) {
   const timingTemplate = (group) => {
     const record = group.record;
     // Numbered by its place in the turn records, as live (a failed turn
@@ -1026,7 +1027,7 @@ export function turnHistoryNodes(items, timing, { thumbs, workingSet = false, no
       blockTurns.push(ordinal);
     }
     const lineKey = (i) => (items[i]?.source === "delegate_report" ? `${group.turnId}:input:${i - (group.user ?? i)}` : null);
-    const reviewer = group.answer !== null && prompt?.turn_id && prompt.participant_mode !== PAIR ? authorBadge(prompt.author, prompt.author_name) : null;
+    const reviewer = apply && group.answer !== null && prompt?.turn_id && prompt.participant_mode !== PAIR ? authorBadge(prompt.author, prompt.author_name) : null;
     const pieces = turnPieces({
       prompt: prompt ? (prompt.role === "note" ? noteBubbleTemplate(prompt) : userTemplate(prompt)) : null,
       block: drawn.block,

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

@@ -2,6 +2,7 @@
 // stay thin and the logic runs under `node --test`.
 
 import { authorBadge } from "./participant_names.js";
+import { isViewerClient } from "./viewer_self.js";
 
 // Read turn_summary.output; Bridge::ClientEvent omits result for clients.
 export function turnOutput(data) {
@@ -107,8 +108,10 @@ function writeClientId(storage, id) {
   }
 }
 
+// This tab's own (+myId+), or the participant viewer's (viewer_self.js:
+// chi web gives their turns one client id, whichever tab sent them).
 export function isOwn(clientId, myId) {
-  return clientId != null && clientId === myId;
+  return clientId != null && (clientId === myId || isViewerClient(clientId));
 }
 
 // As the TUI labels them (Formatting::CLIENT_LABELS); this file's label
@@ -302,6 +305,9 @@ export function promptOps(event, { myId, known, unmatchedMerge = false, wakeStar
   switch (event.type) {
     case "turn_enqueued": {
       const id = event.enqueued_id;
+      // Someone else's queued turn as a participant gets it (bare: chi web
+      // sends no prompt or id of it): nothing to draw.
+      if (!id && !event.prompt) return [];
       // Queued for after the running turn (delivery queue): its bubble says so.
       const delivery = event.delivery ? { delivery: event.delivery } : {};
       if (isOwn(event.client_id, myId)) return [withImages({ op: "tag", enqueuedId: id, prompt: event.prompt, ...delivery }, event.images)];
@@ -312,10 +318,12 @@ export function promptOps(event, { myId, known, unmatchedMerge = false, wakeStar
       if (event.continue || !event.prompt) return [];
       const origin = event.origin || {};
       const id = origin.enqueued_id || null;
-      if ((id && known(id)) || isOwn(origin.client_id, myId)) {
+      // A participant's own turn (+mine+: chi web names no origin to them)
+      // starts their queued bubble, matched by its text.
+      if ((id && known(id)) || isOwn(origin.client_id, myId) || event.mine) {
         // Images too: a resync can have wiped the own echo, and the page then
         // draws the bubble from this.
-        return [withImages({ op: "start", enqueuedId: id, prompt: event.prompt }, event.images)];
+        return [withImages({ op: "start", enqueuedId: id, prompt: event.prompt, ...(event.mine ? { mine: true } : {}) }, event.images)];
       }
       return [withImages({ op: "add", enqueuedId: id, prompt: event.prompt, state: "started", label: clientLabel(origin.client_id), ...authorOf(event.author || origin.author, event.author_name, event.participant_mode) }, event.images)];
     }
@@ -349,8 +357,9 @@ export function replaysDrawnTurn(event, turnRecords = []) {
   return turnRecords.some((record) => record.id === event.turn_id);
 }
 
-// +object+ with `images` when there are any (the shapes stay as they were
-// for a turn without).
+// +object+ with `images` when there are any, refs or a count (another
+// participant's, ParticipantView). The shapes stay as they were for a turn
+// without.
 export function withImages(object, images) {
-  return images?.length ? { ...object, images } : object;
+  return images?.length || images > 0 ? { ...object, images } : object;
 }

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

@@ -13,10 +13,12 @@ import { activityDiffTemplate } from "./diff_view.js";
 import { clip, fullTime, steerSender } from "./format.js";
 import { rowTitleRef } from "./refs.js";
 import { readLinesTemplate } from "./read_view.js";
+import { wayInTemplate } from "./ws_way_in.js";
 import { handedOverId } from "./task_stop.js";
 import { STOPPED_LINE_CLASS, cancelLineText, formatDuration } from "./timing.js";
 import { emptyAnswerLine } from "./turn_events.js";
-import { authorBadgeText, authorBadgeTitle } from "./participant_names.js";
+import { authorBadge, authorBadgeText, authorBadgeTitle } from "./participant_names.js";
+import { ownerLabel, viewerSelf } from "./viewer_self.js";
 
 // A row's status (live, or a saved tool record's on reload): running,
 // error, stopped (a task_wait the user's Stop ended), blocked (a guardrail
@@ -183,7 +185,7 @@ export function toolRowInnerTemplate(row, { thumbs = () => nothing, stop = nothi
     ? html`<div class=${tailMode(row.tool, full) ? "activity-output tail" : "activity-output"} title=${full}>${inlineOutput(row.tool, full)}</div>`
     : nothing;
   const status = statusParts(row.status, { noMatch: !!row.no_match });
-  return html`${statusMarkTemplate(status)}<span class="activity-tool">${toolName(row)}</span>${params}${stop}${alias}${statusWordTemplate(status)}${auto}${wrong}${duration ? html`<span class="activity-duration">${duration}</span>` : nothing}${commandBlockTemplate(row.view, row.title)}${llmEditTemplate(row)}${output}${full ? readLinesTemplate(row) : nothing}${row.images?.length ? thumbs(row.images) : nothing}${row.diff ? activityDiffTemplate(row.diff) : nothing}`;
+  return html`${statusMarkTemplate(status)}<span class="activity-tool">${toolName(row)}</span>${params}${stop}${alias}${statusWordTemplate(status)}${row.status === "ok" ? wayInTemplate(row) : nothing}${auto}${wrong}${duration ? html`<span class="activity-duration">${duration}</span>` : nothing}${commandBlockTemplate(row.view, row.title)}${llmEditTemplate(row)}${output}${full ? readLinesTemplate(row) : nothing}${row.images?.length ? thumbs(row.images) : nothing}${row.diff ? activityDiffTemplate(row.diff) : nothing}`;
 }
 
 // A prompt bubble's states and their badges: queued (waiting for its
@@ -320,7 +322,12 @@ export function steerRowTemplate({ source, text } = {}, { bubble = false } = {})
 // +message.source+ (a delegate report's "delegate_report") is its
 // data-source; +lineKey+, a merged line's fold key (answer_fold.js:
 // data-line-key, the reload's "<turn id>:input:<place>").
+// For a participant looking (viewer_self.js) their own echo carries their
+// badge, and a prompt with neither badge nor label is the owner's ("owner").
 export function userBubbleTemplate(message, { label = null, state = null, step = null, thumbs = nothing, own = false, enqueuedId = null, key = null, delivery = null, author = null, lineKey = null } = {}) {
+  const self = viewerSelf();
+  if (own && !author && self) author = authorBadge(self.author, self.name, self.mode);
+  if (!author && !label) label = ownerLabel();
   const named = BADGES[state] ? state : null;
   const from = author
     ? html`<span class="origin-label author-badge" title=${authorBadgeTitle(author.name, author.mode)} data-unnamed=${author.unnamed ? "1" : nothing}>${authorBadgeText(author.name, author.mode)}</span>`

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

@@ -9,8 +9,7 @@
 // its own: static JS is cached at unversioned URLs, and a new export on an
 // old module would blank the page.
 
-// The owner's page: a context note ends a turn. The participant page has
-// none (its rule passes null).
+// A context note ends a turn.
 export const NOTE_BOUNDARY = ".bubble.note";
 
 // The elements of the turn +opening+ starts (the [data-turn-id] element, or

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

@@ -1,4 +1,4 @@
-// Where the Verify preset is offered (verify_preset.js), on both pages: only
+// Where the Verify preset is offered (verify_preset.js): only
 // on text in an ended turn's final answer, the one place the server takes a
 // claim from. TurnStages::VerifyAnchors#verified records a Verify turn's card only when
 // its quote is in the last answer of the source turn (AnswerTail.answer?:
@@ -25,8 +25,6 @@ const PRECEDING = 2;
 // a turn shows before its answer); a context note ends a turn's elements
 // (a wake turn starts with one, and its bubble carries no turn id).
 export const OWNER_FINAL = Object.freeze({ answers: ".bubble.output:not(.report-reply)", boundary: NOTE_BOUNDARY });
-// The participant page: a reply's bubble.
-export const PARTICIPANT_FINAL = Object.freeze({ answers: ".p-msg.reply > .p-bubble", boundary: null });
 
 // The turn opening +node+ is in (the last [data-turn-id] at or before it in
 // +container+) and whether it is the newest one: {anchor, last}, or null.
@@ -55,7 +53,7 @@ function finalAnswer(container, anchor, { answers, boundary }) {
 // The turn id Verify anchors to for a selection in +root+ (the annotate
 // source's root) in +container+, or null where Verify isn't offered: not in
 // a turn, not in its final answer, or in the running turn. +rule+:
-// OWNER_FINAL or PARTICIPANT_FINAL. +running+: null when no turn runs, else
+// OWNER_FINAL. +running+: null when no turn runs, else
 // {turnId} (the running turn's id; null when unknown, then the newest turn
 // counts as the running one) — a running turn's answer isn't final yet.
 export function verifyTurnOf(container, root, rule, { running = null } = {}) {

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

@@ -0,0 +1,59 @@
+// The viewer: who looks at this page and what they may do on it (chi web's
+// Web::Viewer). chi web stamps it on <body> (data-viewer-kind, and
+// data-viewer-can: the capability names, space-separated), read once here at
+// boot; a session's show carries it as `viewer` too. The page draws a
+// control, and makes a call, only when viewer.can(name) says so: a control
+// the viewer may not use is not created and not wired (the null-control
+// idiom), and its static element stays hidden (control(): hidden and
+// data-withheld, which index.html's CSS never shows). No 403 is a way
+// of gating. See docs/internals/web-frontend.md (The viewer).
+//
+// Not app.js's refEditor() (where this page can open a ref: the editor) nor
+// the show's capabilities (what the page renders): those are per request.
+//
+// A show's viewer narrows the stamp, never widens it: the boot's controls
+// were made from the stamp. Leaving a session (forgetSession) goes back to
+// the stamp. A page with no stamp may do nothing (it fails closed).
+
+// The names in a stamp's or a show's list, as a Set.
+function namesOf(list) {
+  const names = Array.isArray(list) ? list : String(list || "").split(/\s+/);
+  return new Set(names.filter((name) => typeof name === "string" && name));
+}
+
+// @param body the page's <body> (its data-viewer-kind, data-viewer-can)
+// @return {can(name), kind(), update(viewer), reset(), control(el, name), controls(els, name)}
+export function createViewer(body) {
+  const data = body?.dataset || {};
+  const stamped = { kind: data.viewerKind || null, can: namesOf(data.viewerCan) };
+  let current = stamped;
+
+  const can = (name) => current.can.has(name);
+  return {
+    can,
+    kind: () => current.kind,
+    // A show's +viewer+ ({kind, can}); anything else keeps what is there.
+    update(viewer) {
+      if (!viewer || typeof viewer !== "object" || !Array.isArray(viewer.can)) return;
+      const shown = namesOf(viewer.can);
+      current = { kind: stamped.kind, can: new Set([...stamped.can].filter((name) => shown.has(name))) };
+    },
+    reset() {
+      current = stamped;
+    },
+    // +el+ when the viewer may use +name+; else +el+ hidden, and null (the
+    // page wires nothing to it). data-withheld keeps it hidden whatever its
+    // own CSS display says (index.html's [data-withheld] rule).
+    control(el, name) {
+      if (can(name)) return el;
+      if (el) {
+        el.hidden = true;
+        el.dataset.withheld = "";
+      }
+      return null;
+    },
+    controls(els, name) {
+      return els.map((el) => this.control(el, name));
+    },
+  };
+}