samagotchi 0.170.0 → 0.171.0

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

@@ -393,12 +393,15 @@ export function createFrameDrawer({
 //   limit what they hold (docs/internals/block-renderers.md, residual risk)
 // @param drawers core drawers, asked before the bundle renderers
 // The rest are seams for the specs.
-export function createBlockHost({ roots, sessionId, drawers = [], copy = copyText, watch = null, win = window, ...frameOpts }) {
-  const frames = createFrameDrawer({ roots, win, ...frameOpts });
-  const watcher = createBlockWatch({ roots, sessionId, drawers: [...drawers, frames], watch, copy, win });
+// +renderers+: false for a viewer without the bundles' renderers (viewer.js):
+// the core +drawers+ only, and GET /api/block_renderers is never asked.
+export function createBlockHost({ roots, sessionId, drawers = [], copy = copyText, watch = null, win = window, renderers = true,
+  ...frameOpts }) {
+  const frames = renderers ? createFrameDrawer({ roots, win, ...frameOpts }) : null;
+  const watcher = createBlockWatch({ roots, sessionId, drawers: frames ? [...drawers, frames] : drawers, watch, copy, win });
   // A system theme change redraws through the figure (needsDraw's theme check).
   win.matchMedia?.("(prefers-color-scheme: dark)").addEventListener?.("change", () => {
     for (const root of roots) watcher.scan(root);
   });
-  return { scan: watcher.scan, dropFrames: frames.dropFrames };
+  return { scan: watcher.scan, dropFrames: frames ? frames.dropFrames : () => {} };
 }

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

@@ -195,6 +195,14 @@ export function createBubbles({
     return echoes.find((el) => el.dataset.userContent === text) || echoes[0] || null;
   }
 
+  // A participant's own queued bubble for their turn's start (+mine+: no
+  // origin names its enqueued id), the oldest, preferring one with the same text.
+  function queuedOwnBubble(prompt) {
+    const queued = findInTurnRoots(".bubble.user.queued[data-own][data-enqueued-id]");
+    const text = normalize(prompt || "");
+    return queued.find((el) => el.dataset.userContent === text) || queued[0] || null;
+  }
+
   // The running wake turn's id (a turn chi ran for reports), for its report's bubble.
   let wakeTurnId = null;
 
@@ -229,7 +237,7 @@ export function createBubbles({
         // Re-rendered from a snapshot: the echo is gone, the prompt still queued.
         else makeUserBubble(op.prompt, { state: "queued", own: true, enqueuedId: op.enqueuedId, images: op.images, delivery: op.delivery });
       } else if (op.op === "start") {
-        const bubble = bubbleById(op.enqueuedId) || untaggedOwnBubble(op.prompt);
+        const bubble = bubbleById(op.enqueuedId) || untaggedOwnBubble(op.prompt) || (op.mine ? queuedOwnBubble(op.prompt) : null);
         // A resync (a new worker woken by this page's send) re-rendered the
         // history and took the echo with it: draw the prompt again.
         if (!bubble) started = makeUserBubble(op.prompt, { own: true, enqueuedId: op.enqueuedId, images: op.images });

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

@@ -0,0 +1,69 @@
+// A snapshot's cards placed into a holder that is not the page (cards_offscreen.js):
+// the opt-in reload check (reload_check.js) draws a handed-off turn offscreen and
+// compares it with what the page has. A reload's render (turnHistoryNodes) doesn't
+// run the placement (cards_place.js placeSnapshotCards), so the check needs its own.
+//
+// It is the real placer, not a copy: createCardsPlace, createBubbles and
+// createQuestionCards over a detached holder, with every page hook made inert:
+// no stage (turnDom answers "nothing holds it", and has no settleFold/settleWaiting
+// — cards_place.js calls those with `?.`), no scroll, no hint, no info bar, no
+// session id, no api. Nothing outside +holder+ is read or written; the page's
+// questionCards, its turnDom and its appendToHistory are never touched.
+import { createBubbles } from "./bubbles.js";
+import { createCardsPlace } from "./cards_place.js";
+import { createQuestionCards } from "./question_cards.js";
+import { splitSnapshotCards } from "./card.js";
+
+// +cards+ the read's snapshot (data.cards); +capabilities+ the page's, for the
+// notices it shows elsewhere (splitSnapshotCards); +answers+ whether this viewer
+// may answer cards at all (viewer.js answer_cards).
+export function placeCardsOffscreen(holder, cards, { capabilities = null, answers = true, doc = globalThis.document } = {}) {
+  const shared = {
+    historyEl: holder,
+    findInTurnRoots: (selector) => [...holder.querySelectorAll(selector)],
+    isNearBottom: () => false,
+    selected: () => null,
+    clientId: null,
+  };
+  // No running turn here: nothing holds a piece, nothing takes a card or a steer.
+  const turnDom = { card: () => false, steer: () => false, holds: () => false };
+  const bubbles = createBubbles({
+    ...shared,
+    appendToHistory: (el) => holder.appendChild(el),
+    turnDom,
+    shownTexts: { shows: () => false },
+    liveTurn: { timing: { el: null } },
+  });
+  const questionCards = createQuestionCards({
+    ...shared,
+    sessionId: () => null,
+    place: (card) => { holder.appendChild(card); return false; },
+    scrollToEnd: () => {},
+    removeHintIfEmpty: () => {},
+    askingText: () => "",
+    renderMarkdown: () => Promise.resolve(null),
+    onPending: () => {},
+    onSettled: () => {},
+    answers,
+    doc,
+    // A card's button is inert here: a placed card is a comparison, not a live ask.
+    api: {
+      sendAnswer: () => Promise.reject(new Error("offscreen card")),
+      dismissQuestion: () => Promise.reject(new Error("offscreen card")),
+      sendCommand: () => Promise.reject(new Error("offscreen card")),
+    },
+  });
+  const place = createCardsPlace({
+    ...shared,
+    turnDom,
+    questionCards,
+    bubbles,
+    followWokenWorker: () => {},
+    api: {
+      getSession: () => Promise.reject(new Error("offscreen card")),
+      sendCommand: () => Promise.reject(new Error("offscreen card")),
+    },
+  });
+  place.placeSnapshotCards(splitSnapshotCards(cards, capabilities).placed, { before: null });
+  return holder;
+}

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

@@ -60,7 +60,8 @@ function shownAnchor(anchor, doc) {
   return standIn?.getClientRects().length ? standIn : anchor;
 }
 
-// id, className: the popover's; width: its widest (px); el: where the chip
+// id, className: the popover's; width: its widest (px, or a function of
+// none read at each placing: the working set's grows while a row peeks); el: where the chip
 // is drawn; anchor: the chip's selector; openers: the selector of every
 // element that opens it (a click there is not a click outside; default the
 // anchor's); summary(anchor): what the form is drawn from (null: nothing
@@ -72,7 +73,7 @@ function shownAnchor(anchor, doc) {
 // dialog's accessible name (aria-label), none by default. onOpen(): after
 // an open has shown and placed it (where focus can go into it: show runs
 // while it is still hidden). sheetShare: the share of a phone's window the
-// sheet takes at most (SHEET_SHARE). Always a modal dialog (modalDialog);
+// sheet takes at most (SHEET_SHARE; a function of none is read at each placing). Always a modal dialog (modalDialog);
 // the opener clicked (and the anchor it is placed at) carries aria-expanded
 // "true" while it is open, "false" once closed: a lit-drawn chip writes
 // aria-expanded="false" as a static attribute (lit leaves it to the shell).
@@ -106,7 +107,7 @@ export function createChipPopover({ id, className, width: widest, el, anchor: an
     if (narrow) {
       const vv = win.visualViewport;
       const at = sheetPlace({ innerWidth: win.innerWidth, innerHeight: win.innerHeight },
-                            { share: sheetShare, viewport: vv ? { height: vv.height, offsetTop: vv.offsetTop } : null });
+                            { share: typeof sheetShare === "function" ? sheetShare() : sheetShare, viewport: vv ? { height: vv.height, offsetTop: vv.offsetTop } : null });
       pop.style.width = `${at.width}px`;
       pop.style.left = `${at.left}px`;
       pop.style.top = "";
@@ -118,7 +119,7 @@ export function createChipPopover({ id, className, width: widest, el, anchor: an
       pop.style.maxHeight = `${at.maxHeight}px`;
       return;
     }
-    const width = Math.min(widest, win.innerWidth - 32);
+    const width = Math.min(typeof widest === "function" ? widest() : widest, win.innerWidth - 32);
     pop.style.width = `${width}px`;
     pop.style.maxHeight = "";
     const at = popoverPlace(shownAnchor(anchor, doc).getBoundingClientRect(), { width, height: pop.offsetHeight,

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

@@ -1,7 +1,7 @@
 // A link to a claim (docs/internals/participants.md, Deep links): one turn
 // of a session and a quote in it, on either page.
 //
-//   participant page:  <chi web>/#s=<id>&t=<turn8>&q=<quote>&p=<prefix>
+//   participant's page:<chi web>/#s=<id>&t=<turn8>&q=<quote>&p=<prefix>
 //   owner's page:      #/s/<id>?t=<turn8>&q=<quote>&p=<prefix>
 //
 // t is the turn's id, its first 8 characters (a turn-opening message's
@@ -11,7 +11,7 @@
 // when there are none). URLSearchParams encodes both, so a link is
 // URL-safe and a space is one "+".
 //
-// Normalized: whitespace collapsed, and what the participant page shows
+// Normalized: whitespace collapsed, and what a participant's page shows
 // instead (Samagotchi::Redact): secret shapes "[redacted]" (so a link
 // never carries one, and matches the participant's redacted text), and on
 // the owner's page the session's folder relative ("<cwd>/x" → "x",
@@ -85,7 +85,7 @@ function secretSpans(raw) {
   return spans;
 }
 
-// The spans of +raw+ that read differently on the participant page:
+// The spans of +raw+ that read differently on a participant's page:
 // [{start, end, text}], in order, not overlapping. Secrets first, then
 // the session's folder (it is usually under home), as Redact.text.
 function replacements(raw, { home = "", cwd = "" } = {}) {
@@ -191,7 +191,7 @@ export function claimParams({ turnId = "", q = "", p = "" } = {}) {
   return params.toString();
 }
 
-// The participant page's link: +base+ the participant link's origin
+// A participant's page's link: +base+ the participant link's origin
 // ("https://chi.example/", "http://192.168.1.5:4567/"), no token.
 export function participantClaimLink(base, sessionId, claim) {
   const params = claimParams(claim);

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

@@ -1,15 +1,13 @@
 /* The composer (composer_mount.js): the message box, its image chips, grip and fold, its key hint and its toolbar row
-   (the image button, Send). Shared by the owner's page (index.html) and the participant page (participant.html);
-   linked after tokens.css and before a page's own <style>, so a page's rules of the same weight win. The owner's
+   (the image button, Send). Linked by index.html after tokens.css and before a page's own <style>, so a page's rules of the same weight win. The owner's
    own parts stay in index.html: the card's placing (#dock), the delivery line's links, the start page's picker and chips,
    the / list, and the 16px text fields for iOS. */
 /* The image button's icon mask (the stroke only shapes the mask; the icon takes currentColor); index.html's phone info
    bar and all view's cards use it too. */
 :root{--icon-toolkit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.75' y='5.25' width='12.5' height='8' rx='1.5'/%3E%3Cpath d='M5.75 5.25v-1.5a1 1 0 0 1 1-1h2.5a1 1 0 0 1 1 1v1.5M1.75 8.75h12.5M7 8.75v1.5h2v-1.5'/%3E%3C/svg%3E");--icon-settings:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M12.75 6.14L14.45 6.59L14.45 9.41L12.75 9.86L12.67 10.04L13.56 11.56L11.56 13.56L10.04 12.67L9.86 12.75L9.41 14.45L6.59 14.45L6.14 12.75L5.96 12.67L4.44 13.56L2.44 11.56L3.33 10.04L3.25 9.86L1.55 9.41L1.55 6.59L3.25 6.14L3.33 5.96L2.44 4.44L4.44 2.44L5.96 3.33L6.14 3.25L6.59 1.55L9.41 1.55L9.86 3.25L10.04 3.33L11.56 2.44L13.56 4.44L12.67 5.96Z'/%3E%3Ccircle cx='8' cy='8' r='2.1'/%3E%3C/svg%3E");--icon-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2.75' width='12' height='10.5' rx='1.5'/%3E%3Ccircle cx='5.75' cy='6.25' r='1.1'/%3E%3Cpath d='m2.5 12.5 3.75-3.75 2.5 2.5 1.75-1.75 3 3'/%3E%3C/svg%3E")}
-/* The composer card: the glass card both pages' composers sit in (the owner's #dock, the stage view's .dock-card, the
-   participant page's .p-card), with its focus ring; its footer (the owner's info bar, the participant's usage) under
-   a hairline; and the composer's line, the quiet row above the text field (the owner's delivery line, the
-   participant's key hint). A page's own rules only place the card. */
+/* The composer card: the glass card the composer sits in (#dock, the stage view's .dock-card), with its focus ring;
+   its footer (the info bar, a participant's bottom row) under a hairline; and the composer's line, the quiet row above
+   the text field (the delivery line). A page's own rules only place the card. */
 .composer-card{display:flex;flex-direction:column;border-radius:16px;position:relative;background:var(--glass-bg);-webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 var(--glass-highlight),var(--glass-shadow);transition:border-color .12s ease,box-shadow .12s ease}
 .composer-card:focus-within{border-color:color-mix(in srgb,var(--accent) 70%,transparent);box-shadow:0 0 0 3px var(--accent-ring),var(--glass-shadow)}
 @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.composer-card{background:var(--bg-panel)}}

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

@@ -15,12 +15,15 @@ export const SEND_HINT = "Enter to send · Shift+Enter for a newline · ↑ hist
 // start page), +owner+ its owner, +running+ whether its turn runs, +narrow+ a
 // phone's width. While a turn runs, Send still sends: the prompt merges into
 // the turn at its next step (steering); Cancel is its own button then.
+// +steers+ false: a message sent now doesn't go into the running turn (a
+// participant's into someone else's): the plain placeholder, the delivery
+// line says where it goes.
 // @return {placeholder, hint, button, disabled, empty, clearHistory,
 //   attachHidden, delivery}: +disabled+ undefined while a turn runs (the
 //   button keeps whatever a send in flight set); +empty+ the start page's
 //   empty state shown, +clearHistory+ #history emptied (the start page only);
 //   +delivery+ the delivery line's mode (delivery_line.js show).
-export function composerMode({ selected, owner, running, narrow }) {
+export function composerMode({ selected, owner, running, narrow, steers = true }) {
   const session = !!selected;
   const tui = session && owner === "tui";
   const live = !!running && session;
@@ -34,7 +37,7 @@ export function composerMode({ selected, owner, running, narrow }) {
   // composer is off, so is its row.
   const delivery = !session || tui ? "off" : running ? "running" : "idle";
   const base = { attachHidden, delivery, empty: false, clearHistory: false };
-  if (live) {
+  if (live && steers) {
     return {
       ...base,
       placeholder: pick("Running… a message goes in at the next step · Enter to send · Alt+Enter queues", "Steer the turn…"),
@@ -56,7 +59,7 @@ export function composerMode({ selected, owner, running, narrow }) {
     };
   }
   // The keys are in the delivery line's row above.
-  return { ...base, placeholder: "Message chi…", hint: SEND_HINT, button: "Send", disabled: false };
+  return { ...base, placeholder: "Message chi…", hint: SEND_HINT, button: "Send", disabled: live ? undefined : false };
 }
 
 // The composer's mode drawn: update() is the store's `composer` redraw, and a
@@ -68,9 +71,10 @@ export function composerMode({ selected, owner, running, narrow }) {
 // live_turn.js's (running). +startPage+: start_page.js's (restoreStartPick,
 // syncModelPick, dropChoices). +deliveryControl+: delivery_line.js's.
 // +fitPrompt()+,
-// +placeToast()+: the page's. +win+: the window (matchMedia).
+// +placeToast()+: the page's. +win+: the window (matchMedia). +steers()+:
+// whether a message now goes into the running turn (composerMode's).
 export function createComposerMode({
-  els, store, liveTurn, startPage, deliveryControl, fitPrompt, placeToast, win = globalThis,
+  els, store, liveTurn, startPage, deliveryControl, fitPrompt, placeToast, win = globalThis, steers = () => true,
 }) {
   const narrowScreen = win.matchMedia(NARROW_QUERY);
   let hadSession = false;
@@ -89,8 +93,9 @@ export function createComposerMode({
     if (store.selected) startPage.dropChoices();
     const mode = composerMode({
       selected: store.selected, owner: store.current.owner, running: liveTurn.running, narrow: narrowScreen.matches,
+      steers: steers(),
     });
-    els.attach.hidden = mode.attachHidden;
+    if (els.attach) els.attach.hidden = mode.attachHidden;
     deliveryControl.show(mode.delivery);
     els.prompt.placeholder = mode.placeholder;
     els.hint.textContent = mode.hint;

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

@@ -14,14 +14,14 @@ import { readStored } from "./storage.js";
 //
 // +els+: {composer (the card's box, where files drop), prompt (the text box),
 // button (Send/Start), chips (the chips' row), attachBtn, attachInput (the
-// hidden file picker), grip}.
+// hidden file picker; both null: no image button, viewer.js), grip}.
 // Hooks: +minPx()+ the empty box's height; +toast(text)+ why images stayed
 // out; +onWrite()+ the composer wrote the text itself (a recalled entry);
 // +loadHistory()+ a promise of the ↑/↓ entries (oldest first; none: no
 // history); +send({queue})+ Enter (+queue+: with Alt/Option) or the button;
 // +keyFirst(e)+ a key the page takes before the history's (true: taken);
 // +escape()+ Esc, true when it let go of something. +imagesOff+: why this
-// page takes no images (the participant page, until its upload path): a
+// page takes no images (a participant's page, until its upload path): a
 // paste, drop or pick of one toasts it and adds no chip; null takes them.
 // +fold+: createComposerGrip's page hooks (session, waiting, allViewOpen,
 // lightboxOpen, infoBarEl, typeAnywhere).
@@ -79,8 +79,8 @@ export function mountComposer({
   });
   // The image button: the file picker's images join the chips. Its value is
   // cleared after each pick, so the same file can be picked again.
-  attachBtn.addEventListener("click", () => attachInput.click());
-  attachInput.addEventListener("change", () => {
+  attachBtn?.addEventListener("click", () => attachInput.click());
+  attachInput?.addEventListener("change", () => {
     addImageFiles([...attachInput.files]);
     attachInput.value = "";
   });

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

@@ -124,10 +124,14 @@ export function ctxBarText(pct, windowSource = null) {
 // page isn't told context.status is off, so "?" never means 0); after one,
 // "Context window unknown" over the session's tokens and per-model rows with
 // no window line (a window lookup that failed; a model list without a context
-// length still falls back to context.window_tokens or chi's default). +window.afterSwitch+ (the info
+// length still falls back to context.window_tokens or chi's default), or,
+// when the window is known but no count has come yet, "No context count yet:
+// the next request counts it". +window.afterSwitch+ (the info
 // bar's; a /model whose new window didn't resolve, no request since:
 // Engine#announce_switched_context! sent usage null) adds "until the next
 // request", which asks for it again.
+// +window.running+ (the info bar's own running flag) makes the title of a
+// turn in flight: "Context in use (this turn so far)".
 // +side+ (the timing's side block) adds the side requests' line, in the
 // "No request in this session yet" answer too (a /btw before any turn).
 export function ctxBarTip(tokens, memoryIndex, window, segments = null, side = null) {
@@ -136,11 +140,16 @@ export function ctxBarTip(tokens, memoryIndex, window, segments = null, side = n
       const sideText = sideRequestsText(side);
       return `No request in this session yet${sideText ? `\nside requests: ${sideText}` : ""}`;
     }
-    const why = window?.afterSwitch ? "Context window unknown until the next request" : "Context window unknown";
+    const why = window?.afterSwitch
+      ? "Context window unknown until the next request"
+      : num(window?.tokens) > 0
+        ? "No context count yet: the next request counts it"
+        : "Context window unknown";
     return tokensTipText(tokens, why, memoryIndex, null, segments, side);
   }
 
-  return tokensTipText(tokens, undefined, memoryIndex, window, segments, side);
+  return tokensTipText(tokens, window?.running ? "Context in use (this turn so far)" : undefined,
+                       memoryIndex, window, segments, side);
 }
 
 // The ctx tooltip's window line ({tokens:, source:, pct:, budget:} the

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

@@ -29,6 +29,11 @@
 // asks (never a steer or a cut into their turn): Enter queues, no cut is
 // offered, and the line says so.
 //
+// A participant looking (the participant main page: +viewerTurn+) gets no
+// cut and no links: in their own turn the message goes in at its next step
+// (Alt+Enter queues it), on a worker that takes it; in anyone else's it
+// runs as their own turn afterwards (the worker queues it).
+//
 // deliveryLine is pure (node tests); deliveryLineTemplate is its lit view.
 import { html, nothing, render } from "./vendor/lit-html.js";
 
@@ -50,8 +55,17 @@ export const APPLY_CANT_QUEUE = "your Apply turn can't queue on this worker (res
 // mode: review or pair.
 export const PARTICIPANT_TURN_QUEUES = "goes in as your own turn after this participant's turn";
 export const PARTICIPANT_TURN_QUEUES_SHORT = "after their turn";
+// A participant's line: their own turn, the owner's, another participant's.
+export const OWN_TURN_STEERS = "goes in at the next step · Alt+Enter keeps it for after the turn";
+export const OWN_TURN_STEERS_SHORT = "goes in at the next step";
+export const OWN_TURN_QUEUES = "goes in as your own turn after this one";
+export const AFTER_OWNER = "Your message goes in as your own turn after the owner's";
+export const afterTheirs = (name) => `Your message goes in as your own turn after ${name}'s`;
+export const AFTER_SHORT = "after this turn";
 // The idle row: the keys (the placeholder's hint before the row existed).
 export const IDLE_HINT = "Enter to send · Shift+Enter newline · ↑ history";
+// The same for a viewer without the prompt history (a participant).
+export const IDLE_HINT_NO_HISTORY = "Enter to send · Shift+Enter newline";
 
 // m:ss (h:mm:ss past an hour) of +seconds+; "" when unknown.
 export function clockText(seconds) {
@@ -106,6 +120,9 @@ function thinkingOnly(gen, serverGen) {
 //              cut still wins)
 //   participantTurn  the running turn is a participant's: Enter queues,
 //              no cut (the worker queues the owner's input behind it)
+//   viewerTurn  a participant looks: {own, steer, by} (their own turn, it
+//              takes their message at its next step, its author's name or
+//              null for the owner's); null on the owner's page
 // → {text, short, cut: {enabled, shown, reason, label, short}, queue:
 //    {enabled, shown, label, short}, armed, enter}: short is the phone's text;
 //    armed is what is still armed (a cut no longer possible disarms); enter
@@ -113,7 +130,8 @@ function thinkingOnly(gen, serverGen) {
 //    cutting off the cut link goes (the text says why); without the
 //    feature the queue link goes.
 export function deliveryLine({ phase = "thinking", gen = null, tool = null, cutAfter = null, serverGen = null, now = Date.now(),
-  armed = null, canQueue = true, model = "", held = false, participantTurn = false } = {}) {
+  armed = null, canQueue = true, model = "", held = false, participantTurn = false, viewerTurn = null } = {}) {
+  if (viewerTurn) return viewerLine(viewerTurn);
   const cutOff = cutAfter === 0 || (cutAfter != null && cutAfter < 0);
   const thinking = phase === "thinking" && thinkingOnly(gen, serverGen);
   const age = genAge(gen, serverGen, now);
@@ -177,6 +195,16 @@ export function deliveryLine({ phase = "thinking", gen = null, tool = null, cutA
   };
 }
 
+// A participant's line (deliveryLine's +viewerTurn+): no links; Enter
+// steers only into their own turn on a worker that takes it.
+function viewerLine({ own = false, steer = false, by = null } = {}) {
+  const none = { enabled: false, shown: false, reason: "", label: QUEUE_LABEL, short: QUEUE_SHORT };
+  const line = (text, short, enter) => ({ text, short, cut: { ...none, label: CUT_LABEL, short: CUT_SHORT }, queue: none, armed: null, enter });
+  if (own && steer) return line(`\u21B3 ${OWN_TURN_STEERS}`, `\u21B3 ${OWN_TURN_STEERS_SHORT}`, null);
+  if (own) return line(`\u21B3 ${OWN_TURN_QUEUES}`, `\u21B3 ${AFTER_SHORT}`, "queue");
+  return line(by ? afterTheirs(by) : AFTER_OWNER, `\u21B3 after ${by ? `${by}'s` : "the owner's"} turn`, "queue");
+}
+
 // The line's view: +line+ is deliveryLine's; +onCut+ / +onQueue+ the
 // links' clicks. A disabled cut stays in place, its reason on hover.
 export function deliveryLineTemplate(line, { onCut, onQueue } = {}) {
@@ -191,8 +219,8 @@ export function deliveryLineTemplate(line, { onCut, onQueue } = {}) {
 }
 
 // The idle row: the key hint (none on a phone: no keyboard keys there).
-function idleTemplate() {
-  return html`<span class="delivery-where idle"><span class="long">${IDLE_HINT}</span><span class="short"></span></span>`;
+function idleTemplate(hint = IDLE_HINT) {
+  return html`<span class="delivery-where idle"><span class="long">${hint}</span><span class="short"></span></span>`;
 }
 
 // The row on the page: the key hint while idle, the line while the turn
@@ -205,7 +233,8 @@ function idleTemplate() {
 //   session()        the open session's id: an Apply hold is that session's
 const TICK_MS = 500;
 
-export function createDeliveryControl({ el, read, composerEmpty, send, session = () => null, now = () => Date.now(),
+// +history+: the viewer walks a prompt history with ↑ (the idle hint says so).
+export function createDeliveryControl({ el, read, composerEmpty, send, session = () => null, now = () => Date.now(), history = true,
   setTimer = (fn, ms) => setInterval(fn, ms), clearTimer = (t) => clearInterval(t) }) {
   // "off" (no session: the row is gone), "idle" or "running".
   let mode = "off";
@@ -239,7 +268,7 @@ export function createDeliveryControl({ el, read, composerEmpty, send, session =
   function refresh() {
     if (mode !== "running") {
       mark();
-      if (mode === "idle") render(idleTemplate(), el);
+      if (mode === "idle") render(idleTemplate(history ? IDLE_HINT : IDLE_HINT_NO_HISTORY), el);
       return;
     }
     line = deliveryLine({ ...read(), now: now(), armed, held: held() });

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

@@ -88,7 +88,11 @@ function rowItem(el) {
 }
 
 function cardItem(el) {
-  return item("card", `${el.dataset.cardId || ""} ${textOf(el.querySelector(".card-title"))}`.trim());
+  const card = item("card", `${el.dataset.cardId || ""} ${textOf(el.querySelector(".card-title"))}`.trim());
+  // Its id on its own (already in the text): the reload check keeps a turn's
+  // own cards by it and drops the rest (reload_check.js).
+  card.id = el.dataset.cardId || "";
+  return card;
 }
 
 function questionItem(el) {

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

@@ -19,6 +19,9 @@ export function imageFiles(dataTransfer) {
 // would (spec/web/images_spec.rb pins both): ImageStore::MAX_TURN_REFS
 // images a message, Web::App::MAX_IMAGE_UPLOAD_BYTES a file.
 export const MAX_TURN_IMAGES = 20;
+// Why the composer takes no image (composer_mount.js imagesOff) for a viewer
+// without images (viewer.js): a paste, drop or pick toasts it.
+export const IMAGES_NOT_HERE = "Images can't go in from here yet: describe what the image shows.";
 export const MAX_IMAGE_MB = 20;
 const MAX_IMAGE_BYTES = MAX_IMAGE_MB * 1024 * 1024;
 
@@ -75,8 +78,11 @@ export function imageUrl(sessionId, ref) {
 
 // Thumbnails for a bubble or a tool row; nothing for none. `src` may be
 // given (a blob: URL while the upload is on its way). A redraw with the
-// same images keeps the <img> elements (no reload).
+// same images keeps the <img> elements (no reload). A number is a count of
+// images the viewer gets no refs to (another participant's: chi web's
+// ParticipantView): a muted "N images" line instead.
 export function thumbsTemplate(sessionId, images) {
+  if (typeof images === "number") return images > 0 ? html`<div class="thumbs-hidden">${images === 1 ? "1 image" : `${images} images`}</div>` : nothing;
   const list = (images || []).filter((i) => i && (i.src || i.file));
   if (!list.length) return nothing;
   const thumbs = list.map((img) => {

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

@@ -24,6 +24,7 @@
 <link rel="stylesheet" href="/assets/forms.css">
 <link rel="stylesheet" href="/assets/objectives.css">
 <link rel="stylesheet" href="/assets/block_renderers.css">
+<link rel="stylesheet" href="/assets/ws_preview.css">
 <style>
 /* Icon masks shared by the phone info bar and the all view's cards (the stroke only shapes the mask; the icon takes currentColor); the image icon is composer.css's. */
 :root{--icon-archive:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2.75' width='12' height='3.5' rx='1'/%3E%3Cpath d='M3.25 6.25v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1v-6M6.5 9h3'/%3E%3C/svg%3E");--icon-unarchive:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2.75' width='12' height='3.5' rx='1'/%3E%3Cpath d='M3.25 6.25v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1v-6M8 11.5V8.25M6.5 9.75 8 8.25l1.5 1.5'/%3E%3C/svg%3E")}
@@ -40,6 +41,8 @@ body{font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetic
    (the gradient covers the body): it is the body's background-color, which is what iOS 26's Home Screen app paints
    the status bar strip in (not theme-color, not html's background; with no colour the strip is black). */
 @media(max-width:600px){body{background:linear-gradient(var(--bg-top),var(--bg) 420px),var(--bg-top)}}
+/* iOS 26 blurs the Home Screen app's top band under the clock; measured 28px total is needed, and a fixed element does not help. */
+@media (display-mode:standalone) and (max-width:600px){body{padding-top:12px}}
 /* Glass: the composer card, the strip cards, the all-sessions cards and the question cards (by selector, so app.js is untouched). */
 .turn-stage,#topStrip .card,#allList .card,.bubble.question,.bubble.plugin-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 var(--glass-highlight),var(--glass-shadow)}
 @media(hover:hover){#topStrip .card:hover,#allList .card:hover{background:color-mix(in srgb,var(--bg-hover) 75%,transparent);border-color:var(--card-hover-border)}}
@@ -184,6 +187,8 @@ main{flex:1;display:flex;flex-direction:column;gap:16px;padding:max(16px,var(--s
 /* Plugins' slow setup (chi.init, init_row.js): a quiet line per task over the composer. */
 #initRow{display:flex;flex-direction:column;gap:2px;padding:6px 12px 2px;font-size:12px;line-height:1.4;color:var(--text-3)}
 #initRow[hidden]{display:none}
+/* A control the viewer may not use (viewer.js control): hidden whatever its own display rule says. */
+[data-withheld]{display:none!important}
 .init-task{display:flex;align-items:center;gap:7px;min-width:0;transition:opacity .4s ease}
 .init-task.fading{opacity:0}
 .init-bundle{flex:none;padding:0 5px;border:1px solid var(--border-strong);border-radius:4px;font-size:11px;color:var(--text-muted)}
@@ -759,6 +764,7 @@ body.has-session #history{padding-bottom:calc(var(--dock-h,160px) + 16px + var(-
 /* A line queued for after the running turn: a dashed bubble, a turn of its own to come. */
 .bubble.user.queued[data-delivery="queue"]{border:1px dashed var(--accent-border);border-left:3px dashed var(--accent);background:transparent}
 .thumbs{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
+.thumbs-hidden{margin-top:6px;font-size:12px;color:var(--text-muted)}
 .thumb{max-height:120px;max-width:200px;border-radius:6px;border:1px solid var(--border-strong);cursor:zoom-in;object-fit:contain;background:var(--bg)}
 .activity-row .thumbs{flex-basis:100%;margin-left:var(--row-gutter)}
 @media(max-width:600px){.activity-row .thumbs{margin-left:0}}
@@ -1355,8 +1361,8 @@ body.has-session.composer-folded #infoBar{border-top-color:transparent}
 .pp-list{list-style:none;display:flex;flex-direction:column;gap:8px;margin:2px 0}
 .pp-row{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:6px 8px;border-radius:8px;background:var(--bg-inset);border-left:3px solid var(--author-color)}
 .pp-row.ended{opacity:.7}
-.pp-who{display:flex;align-items:center;gap:6px;min-width:0;color:var(--text)}
-.pp-who b{color:var(--author-color);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.pb-who{display:flex;align-items:center;gap:6px;min-width:0;color:var(--text)}
+.pb-who b{color:var(--author-color);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .pp-dot{width:7px;height:7px;border-radius:50%;background:var(--text-faint);flex-shrink:0}
 .pp-dot.present{background:var(--ok)}
 .pp-tag{font-size:10.5px;padding:0 6px;border-radius:999px;background:var(--bg-raised);color:var(--text-3)}
@@ -1435,8 +1441,6 @@ body.has-session.composer-folded #infoBar{border-top-color:transparent}
 /* On a phone the panel is a sheet: the link goes out by Share or Copy, not by scanning this screen. */
 .participants-popover.sheet .pp-qr{display:none}
 .pp-foot{display:flex;align-items:center;gap:8px;justify-content:flex-end;padding-top:4px}
-.pp-view{font-size:12px;color:var(--accent);text-decoration:none}
-@media(hover:hover){.pp-view:hover{text-decoration:underline}}
 /* The Home Screen app's notifications sheet (push_devices.js): the bell opens it; a bottom sheet on a phone. */
 .push-devices .ctx-pop-head strong{font-family:inherit}
 .push-devices.sheet{border-radius:14px;padding:14px 16px;font-size:14px}
@@ -2018,6 +2022,38 @@ a{color:var(--accent)}
   .rs-form textarea,.pp-link input,.llmctx-field select,.llmctx-field input,.ws-add-in,.rename-input,
   #modelSearch,.project-create input{font-size:16px}
 }
+/* A participant's page (participant_main.js): a plain logo, their name and the link's end in the top row; the bottom row in
+   the info line's place; the composer given way to one line (their limit, a stopped session, an ended link); the stage's
+   look while their turn waits for the owner (stage_owner_wait.js). */
+.plain-brand{font-size:18px;font-weight:700;letter-spacing:.02em;color:var(--accent);padding:1px 4px 2px}
+#participantWho{display:flex;align-items:baseline;gap:12px;flex:1 1 auto;min-width:0;white-space:nowrap}
+body.participant-view #sessionTitleRow{flex:0 1 auto}
+#participantWho .pb-ends{margin-left:auto}
+.pb-who{display:inline-flex;align-items:center;gap:5px;padding:1px 9px;border-radius:999px;border:1px solid var(--border-strong);background:var(--bg-panel);font-size:12px;color:var(--text-2)}
+.pb-who b{color:var(--who-color,var(--author-5));font-weight:600}
+.pb-ends{color:var(--text-faint);font-size:12px}
+#participantBar{flex:1 1 100%;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--text-3);padding:2px 0}
+.pb-pill{display:inline-flex;align-items:center;padding:1px 8px;border-radius:999px;background:var(--bg-raised);color:var(--text-3);white-space:nowrap}
+.pb-status[data-key]{color:var(--text-2)}
+.pb-gap{flex:1}
+.pb-rules{color:var(--text-faint);white-space:nowrap}
+#participantClosed{padding:12px 14px;color:var(--text-2);font-size:13px;line-height:1.45}
+#participantClosed b{display:block;color:var(--text);font-weight:600}
+body.participant-closed :is(#composeGrip,#deliveryLine,#composer,#infoBar){display:none!important}
+body.participant-view .bubble.user:not(.by-participant)>.origin-label{color:var(--author-owner);text-transform:none;letter-spacing:0;font-weight:600}
+.ts-owner-wait{margin:4px 0 6px;padding:6px 9px;border-radius:6px;background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--warn-text);font-size:12.5px;line-height:1.4}
+.ts-owner-wait[hidden]{display:none}
+.turn-stage.owner-wait{border-left-color:var(--warn)}
+.turn-stage.owner-wait :is(.ts-now,.ts-trail){display:none}
+.turn-stage.owner-wait .ts-phase{color:var(--warn-text)}
+.turn-stage.owner-wait .ts-mark{background:var(--warn);animation:none}
+@media(max-width:600px){
+  body.participant-view .plain-brand,body.participant-view .pb-ends,body.participant-view .pb-rules{display:none}
+  body.participant-view #sessionTitleRow{flex-basis:auto;order:0}
+  body.participant-view #topBar{flex-wrap:nowrap;align-items:center}
+  /* Their delivery line is its own row over the text field (no session bar's left to lie over). */
+  body.participant-view #deliveryLine.running:not([hidden]){display:flex!important;position:static!important;height:auto!important;padding:6px 2px 0!important}
+}
 </style>
 </head>
 <body>

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

@@ -142,7 +142,8 @@ export function infoBarModel({ id, state, sessions, chain, cardTitle, badge, res
   const tokens = state.timing.tokens;
   const ctxTip = ctxBarTip(tokens, state.timing.memoryIndex,
                            { tokens: state.ctxWindow, source: state.ctxWindowSource, pct: state.ctxPct,
-                             budget: state.llmContext?.budget_tokens, afterSwitch: state.ctxUnknownAfterSwitch },
+                             budget: state.llmContext?.budget_tokens, afterSwitch: state.ctxUnknownAfterSwitch,
+                             running },
                            state.timing.modelSegments, state.timing.side);
   const speedTextNow = lastSpeedText(tokens);
   const avgSpeed = speedText(tokens?.avg_decode_tps, tokens?.tps_source);

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

@@ -18,10 +18,11 @@ export function createMarkdownPlace({
   const waiting = new WeakSet();
 
   // A text the page already shows as its markdown HTML (POST /api/render,
-  // sanitised there), or null: markdown off here (no request), or a failed
-  // read (the raw text stays).
+  // sanitised there), or null: markdown off here or no +renderText+ (a
+  // viewer without render, viewer.js: no request), or a failed read (the
+  // raw text stays).
   function renderMarkdown(text) {
-    if (capabilities().display !== true) return Promise.resolve(null);
+    if (!renderText || capabilities().display !== true) return Promise.resolve(null);
     return renderText(text)
       .then((d) => (typeof d?.html === "string" && d.html ? d.html : null))
       .catch(() => null);
@@ -79,7 +80,7 @@ export function createMarkdownPlace({
   // on the swap, then the `path:line` ones (linkRefsIn). A null render
   // keeps the text, and the next open asks again.
   function renderStepTexts() {
-    if (capabilities().display !== true) return;
+    if (!renderText || capabilities().display !== true) return;
     for (const root of roots()) {
       for (const el of root.querySelectorAll(RAW_STEPS)) {
         const step = el.parentElement;