samagotchi 0.170.0 → 0.171.0

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

@@ -7,7 +7,7 @@ export const CLAIM_ROOTS = ".bubble.output, .bubble.user .user-message, .gen-tex
 // The owner page's claim links (used by app.js; claim_link.js does the text
 // and DOM work): a claim link opened on this page (#/s/<id>?t=…&q=…, or the
 // participant's #s=<id>&t=… opened in this browser) shown once its session is
-// drawn, and annotate's "Copy link" for a selection. The participant page has
+// drawn, and annotate's "Copy link" for a selection. A participant's page has
 // its own copies on purpose (docs/internals/web-frontend.md, Two pages).
 //
 // +historyEl+: #history. +store+: the page's session store (selected,
@@ -22,7 +22,7 @@ export function createOwnerClaim({
   // A claim link waiting for its session to be drawn (selectFromHash sets it).
   let pendingClaim = null;
 
-  // How the participant page shows this page's text (claim_link.js).
+  // How a participant's page shows this page's text (claim_link.js).
   function opts() {
     return { home, cwd: store.current.dir || "" };
   }
@@ -50,7 +50,7 @@ export function createOwnerClaim({
   }
 
   // Annotate's "Copy link" for a selection in a turn's answer, step or own
-  // message: the participant page's link when the session has a person
+  // message: a participant's page's link when the session has a person
   // active (it opens in the browser their review link was opened in: one
   // link per browser, the cookie), else this page's own.
   function linkFor(source, range) {

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

@@ -12,8 +12,6 @@ import { OWNER_FINAL, verifyTurnOf } from "./verify_target.js";
 // verdict's card (verdict_fresh.js), Verify's claim from a selection, and
 // the composer's armed claim (anchor/set/clear: the one holder; the next
 // send makes it a Verify turn).
-// The participant page has its own copies on purpose
-// (docs/internals/web-frontend.md, Two pages).
 //
 // +historyEl+: #history. +store+: the page's session store (it writes
 // current.verdicts and current.verifyFresh through store.update; reads

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

@@ -0,0 +1,108 @@
+// What the main page shows a participant in the owner's bar's places
+// (the participant main page, scenes 1-5), as data and lit views, no page
+// state: participant_main.js feeds it.
+//
+//   the top row   their name ("Alex · invited") and, on a desktop, when the
+//                 link ends ("link ends 20 Nov")
+//   the bottom    the composer card's footer: the status, context %, the
+//   row           speed (the turn's time while one runs), their spending
+//                 ("$0.42 of $2.00 used"), and on a desktop what their
+//                 turns may do ("chi acts under the owner's rules")
+//   the closed    the composer given way to one line: their limit reached,
+//   line          the session stopped, the link ended
+//
+// Never the owner's cost, memories, the model or a path: only what the
+// show's viewer (ParticipantShow#participant_main_viewer) and the
+// session's numbers carry. See docs/internals/web-frontend.md (The
+// participant's page).
+import { html, nothing } from "./vendor/lit-html.js";
+import { ctxBarText, speedText, costText } from "./ctx.js";
+import { formatDuration } from "./timing.js";
+
+// "20 Nov" (the viewer's locale's day and month) of an ISO time; "" when
+// it doesn't parse.
+export function endsText(iso) {
+  const at = Date.parse(iso || "");
+  if (!Number.isFinite(at)) return "";
+  return new Date(at).toLocaleDateString(undefined, { day: "numeric", month: "short" });
+}
+
+// "$0.42 of $2.00 used", "$0.42 used" without a cap; "" when their grant's
+// exposure doesn't show the spend.
+export function spentText(usage) {
+  const spent = Number(usage?.spent);
+  if (usage?.spent == null || !Number.isFinite(spent)) return "";
+  const shown = spent > 0 ? costText(spent) : "$0.00";
+  const cap = Number(usage?.cap);
+  return usage?.cap != null && Number.isFinite(cap) ? `${shown} of ${money(cap)} used` : `${shown} used`;
+}
+
+const money = (value) => `$${Number(value).toFixed(2)}`;
+
+// What their turns may do, by the grant's mode (pair: they act; review:
+// they only read).
+export const RULES_TEXT = { pair: "chi acts under the owner's rules", review: "your turns only read" };
+
+// The bottom row's items: [{key, text, tip}].
+//   status   "idle" | "running" | "waiting"
+//   ctxPct   the context's fill (store.current.ctxPct), windowSource its window's source
+//   speed    {decode_tps, source} of the last generation, or null
+//   turnMs   the running turn's time so far, or null
+//   usage    the show's viewer.usage
+//   mode     the show's viewer.mode
+export function barItems({ status, ctxPct = null, windowSource = null, speed = null, turnMs = null, usage = null, mode = null }) {
+  const items = [{ key: "status", text: status, tip: STATUS_TIPS[status] || "" }];
+  items.push({ key: "ctx", text: ctxBarText(ctxPct, windowSource), tip: "How full the session's context is" });
+  if (turnMs != null) items.push({ key: "time", text: formatDuration(turnMs), tip: "This turn's time so far" });
+  else {
+    const tps = speedText(speed?.decode_tps, speed?.source);
+    if (tps) items.push({ key: "speed", text: tps, tip: "Decode speed of the last generation" });
+  }
+  const spent = spentText(usage);
+  if (spent) items.push({ key: "spent", text: spent, tip: "What your turns have cost, of the limit the owner set for you" });
+  const rules = RULES_TEXT[mode] || "";
+  return { items, rules };
+}
+
+const STATUS_TIPS = {
+  idle: "No turn runs now",
+  running: "A turn runs now",
+  waiting: "The running turn waits for the owner",
+};
+
+export function barTemplate({ items, rules }) {
+  return html`${items.map((item) => html`<span class=${`pb-pill pp-${item.key}`} data-key=${item.key} title=${item.tip || nothing}>${item.text}</span>`)}<span class="pb-gap"></span>${rules ? html`<span class="pb-rules">${rules}</span>` : nothing}`;
+}
+
+// The top row's chip and the link's end.
+// +color+: their author colour (participant_model.js authorColor), as their badges.
+export function whoTemplate({ name, endsAt, color = null }) {
+  const ends = endsText(endsAt);
+  return html`<span class="pb-who" title="You were invited to this session by its owner" style=${color ? `--who-color:${color}` : nothing}><b>${name || "you"}</b> · invited</span>${ends ? html`<span class="pb-ends" title=${`This link stops working on ${ends}`}>link ends ${ends}</span>` : nothing}`;
+}
+
+// The closed composer's line, or null when the composer stays:
+//   capReached  the show's viewer.cap_reached (or a send refused for it)
+//   usage       the show's viewer.usage (the cap's amount)
+//   refusal     {code, text}: the server's words for a send refused as
+//               session_stopped, or the link that ended (token_revoked,
+//               token_expired): shown as they are
+// → {kind, title, text}
+export function closedLine({ capReached = false, usage = null, refusal = null } = {}) {
+  if (refusal?.text) {
+    const text = String(refusal.text);
+    return { kind: refusal.code || "refused", title: `${text[0].toUpperCase()}${text.slice(1)}${/[.!?]$/.test(text) ? "" : "."}`, text: "You can keep reading." };
+  }
+  if (!capReached) return null;
+  const cap = Number(usage?.cap);
+  const amount = usage?.cap != null && Number.isFinite(cap) ? `the ${money(cap)}` : "the limit";
+  return { kind: "cap_reached", title: `You have used ${amount} the owner set for you.`, text: "You can keep reading. Ask the owner to raise the limit to send more." };
+}
+
+export function closedTemplate(line) {
+  return html`<b>${line.title}</b>${line.text}`;
+}
+
+// The codes of a refused send that close the composer (the rest are a
+// toast with the server's words): their state, not this message's.
+export const CLOSING_CODES = Object.freeze(["cap_reached", "session_stopped", "token_revoked", "token_expired"]);

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

@@ -0,0 +1,289 @@
+// The main page for a participant (an invited person's link): what is
+// theirs on the owner's page, wired from app.js in a few lines. The
+// owner's page never makes it (app.js: viewer.kind() is "participant").
+//
+//   - The grant's session (<body data-session>) is the page's one session,
+//     whatever the hash says; no start page, no list.
+//   - Who they are (viewer_self.js), from each show's `viewer`: their own
+//     turns and prompts, the owner's labelled "owner".
+//   - The top row's name and the link's end, the bottom row in the bar's
+//     place, the closed composer (participant_bar.js).
+//   - The running turn: whose it is (turn_started's author and `mine`), so
+//     Stop turn shows on their own only and the delivery line says where a
+//     message goes; and whether it waits for the owner (question_requested
+//     / continue_offered's `kind`; stage_owner_wait.js draws it).
+//   - Their usage and limit, read again from the show at each turn's end
+//     (the light re-reads carry no viewer).
+//   - A link that ended mid-session (a 401 from chi web): the composer gives
+//     way to the server's sentence, instead of the owner's signed-out banner.
+//
+// See docs/internals/web-frontend.md (The participant's page).
+import { render } from "./vendor/lit-html.js";
+import { setViewerSelf } from "./viewer_self.js";
+import { authorColor, participantAuthor } from "./participant_model.js";
+import { barItems, barTemplate, CLOSING_CODES, closedLine, closedTemplate, whoTemplate } from "./participant_bar.js";
+
+// The worker features a participant's composer reads: their message goes
+// into their own running turn at its next step (Delivery::OWN_TURN_STEER_FEATURE).
+export const PARTICIPANT_STEER = "participant_steer";
+// A 401 whose words the page couldn't read (an auth proxy's own answer).
+export const LINK_ENDED = "this link no longer opens the session";
+
+// The events that end a turn: whose turn it was and its wait go, and the
+// viewer is read again (their spend moved).
+const TURN_ENDS = ["turn_completed", "turn_canceled", "turn_failed"];
+// The owner's question, approval or Continue offer, and their answers:
+// chi web sends a participant the kind alone, never a card's content.
+const WAITS = ["question_requested", "continue_offered"];
+const WAIT_ENDS = ["question_answered", "question_cancelled", "continue_resolved"];
+
+// @param body       the page's <body> (data-session, data-session-title)
+// @param topBar     #topBar: the logo, title, their name, the link's end
+// @param infoBar    #infoBar: the bottom row takes its place
+// @param composer   #composer: given way to the closed line
+// @param store      the session store (store.current: ctxPct, timing, workerFeatures)
+// @param running()  a turn runs (liveTurn.running)
+// @param stage      the stage view (turnDom): redraw()
+// @param read(id)   the session's show (data.js getSession)
+// @param probe(id)  a fetch Response of the session's brief read, whose 401 carries the ended link's words
+// @param onClosed() the composer closed or opened again (the Revise buttons follow)
+export function createParticipantMain({ body, topBar, infoBar, composer, store, running, stage, read, onClosed = () => {},
+  probe = (id) => fetch(`/api/sessions/${encodeURIComponent(id)}?brief=1`, { headers: { Accept: "application/json" } }) }) {
+  const sessionId = body.dataset.session || null;
+  let viewer = null;
+  // The running turn's author: {author, name, mine}; null between turns.
+  let turnBy = null;
+  // What the running turn waits for the owner on (a kind), or null.
+  let waitKind = null;
+  // The last generation's speed ({decode_tps, source}).
+  let speed = null;
+  // A refusal that closed the composer ({code, text}).
+  let refusal = null;
+  let reading = null;
+  // A second turn ended while a re-read was out: one more after it.
+  let readAgain = false;
+  // What the last show said the session waits for the owner on: a reload
+  // or a resync mid-wait gets no question event (no cards for them), only
+  // this; the replay's turn_started keeps it.
+  let showWait = null;
+  // Live turn starts so far: a re-read begun before one is stale about the wait.
+  let starts = 0;
+  // The session's title as the last show read it (chi web's participant title).
+  let title = null;
+
+  // The top row: a plain logo (not the owner's new-session button), their
+  // name and the link's end after the title.
+  const logo = document.createElement("span");
+  logo.className = "brand plain-brand";
+  logo.textContent = "chi";
+  topBar.prepend(logo);
+  const who = document.createElement("span");
+  who.id = "participantWho";
+  topBar.querySelector("#sessionTitleRow")?.after(who);
+  // The bottom row, in the owner's info line's place.
+  const row = document.createElement("div");
+  row.id = "participantBar";
+  infoBar.prepend(row);
+  infoBar.querySelector("#infoText")?.setAttribute("hidden", "");
+  const closed = document.createElement("div");
+  closed.id = "participantClosed";
+  closed.hidden = true;
+  composer.after(closed);
+  body.classList.add("participant-view");
+
+  const redraw = () => store.touch("infoBar");
+
+  function drawTop() {
+    const color = viewer?.id ? authorColor(participantAuthor(viewer.id)) : null;
+    render(whoTemplate({ name: viewer?.name, endsAt: viewer?.usage?.expires_at, color }), who);
+  }
+
+  function drawClosed() {
+    const line = closedLine({ capReached: !!viewer?.cap_reached, usage: viewer?.usage, refusal });
+    const flips = closed.hidden === !!line;
+    closed.hidden = !line;
+    composer.hidden = !!line;
+    body.classList.toggle("participant-closed", !!line);
+    if (line) {
+      closed.dataset.kind = line.kind;
+      render(closedTemplate(line), closed);
+    }
+    if (flips) onClosed();
+  }
+
+  // A show's viewer: who they are, their usage, whether the session waits.
+  // +fresh+ false: a re-read a turn started after (its wait is stale).
+  function shown(next, { fresh = true } = {}) {
+    if (!next || next.kind !== "participant") return;
+    viewer = next;
+    setViewerSelf(next);
+    // A session the owner started again (it runs, or was read not stopped)
+    // takes the stopped line back.
+    if (refusal?.code === "session_stopped" && !next.session_stopped) refusal = null;
+    if (fresh) {
+      showWait = next.waiting_for_owner || null;
+      if (running()) waitKind = showWait;
+    }
+    drawTop();
+    drawClosed();
+    stage.redraw?.();
+    redraw();
+  }
+
+  // The viewer again from the show (its usage moved, or its cap).
+  async function reread() {
+    if (!sessionId) return null;
+    if (reading) {
+      readAgain = true;
+      return reading;
+    }
+    const at = starts;
+    reading = read(sessionId).then((data) => {
+      if (typeof data?.session?.title === "string" && data.session.title) title = data.session.title;
+      shown(data?.viewer, { fresh: at === starts });
+    }, () => {}).finally(() => {
+      reading = null;
+      if (readAgain) {
+        readAgain = false;
+        reread();
+      }
+    });
+    return reading;
+  }
+
+  function started(data) {
+    turnBy = { author: data?.author || null, name: data?.author_name || null, mine: !!data?.mine };
+    // A replayed start (a load or resync mid-turn) is the turn the show read:
+    // its wait stands. A live one starts unwaited.
+    if (data?.replayed) waitKind = showWait;
+    else {
+      starts += 1;
+      waitKind = null;
+      showWait = null;
+    }
+    if (refusal?.code === "session_stopped") {
+      refusal = null;
+      drawClosed();
+    }
+  }
+
+  // The stream's handlers (stream_handlers.js) with a participant's own
+  // reading of the events chi web sends them bare or cut down.
+  function wrapHandlers(handlers) {
+    const wrapped = { ...handlers };
+    wrapped.turn_started = (data) => {
+      started(data);
+      handlers.turn_started?.(data);
+      stage.redraw?.();
+    };
+    for (const type of TURN_ENDS) {
+      wrapped[type] = (data) => {
+        waitKind = null;
+        if (!data?.replayed) showWait = null;
+        const out = handlers[type]?.(data);
+        turnBy = null;
+        reread();
+        redraw();
+        return out;
+      };
+    }
+    // No card: the stage's waiting look says for what kind of thing.
+    for (const type of WAITS) {
+      wrapped[type] = (data) => {
+        waitKind = data?.kind || "question";
+        stage.redraw?.();
+        redraw();
+      };
+    }
+    for (const type of WAIT_ENDS) {
+      wrapped[type] = (data) => {
+        waitKind = null;
+        if (!data?.replayed) showWait = null;
+        stage.redraw?.();
+        redraw();
+      };
+    }
+    wrapped.generation_completed = (data) => {
+      if (data?.speed && Number.isFinite(Number(data.speed.decode_tps))) speed = data.speed;
+      return handlers.generation_completed?.(data);
+    };
+    return wrapped;
+  }
+
+  function lastSpeed() {
+    if (speed) return speed;
+    const records = store.current.timing?.turnRecords || [];
+    const last = [...records].reverse().find((r) => Number(r.decode_tps) > 0);
+    return last ? { decode_tps: last.decode_tps, source: last.tps_source } : null;
+  }
+
+  function drawBar() {
+    const isRunning = running();
+    const status = isRunning ? (waitKind ? "waiting" : "running") : "idle";
+    const startedAt = Date.parse(store.current.timing?.activeTurn?.started_at || "");
+    const turnMs = isRunning && Number.isFinite(startedAt) ? Math.max(0, Date.now() - startedAt) : null;
+    render(barTemplate(barItems({
+      status, ctxPct: store.current.ctxPct, windowSource: store.current.ctxWindowSource, speed: lastSpeed(), turnMs,
+      usage: viewer?.usage, mode: viewer?.mode,
+    })), row);
+  }
+
+  // A refused send (send_turn.js): the codes that close the composer
+  // close it (the cap: from the show read again); @return whether it was one.
+  function refused(error) {
+    const code = error?.code;
+    if (!CLOSING_CODES.includes(code)) return false;
+    if (code === "cap_reached") {
+      viewer = viewer ? { ...viewer, cap_reached: true } : viewer;
+      drawClosed();
+      reread();
+      return true;
+    }
+    refusal = { code, text: error.body?.detail || error.message };
+    drawClosed();
+    return true;
+  }
+
+  // chi web refused the page's credential (data.js onAuthLost): their link
+  // ended. The server's sentence: a refused send's own (refused), else the
+  // 401 of a brief read.
+  let ended = false;
+  async function linkEnded() {
+    if (ended) return;
+    ended = true;
+    let found = null;
+    try {
+      const res = await probe(sessionId);
+      const answer = await res.json();
+      if (res.status === 401 && answer?.detail) found = { code: answer.error || "token_revoked", text: answer.detail };
+    } catch (_) { /* unreachable or not JSON: the words below */ }
+    if (refusal?.code?.startsWith("token_")) return;
+    refusal = found || { code: "token_revoked", text: LINK_ENDED };
+    drawClosed();
+  }
+
+  return {
+    sessionId,
+    shown,
+    wrapHandlers,
+    drawBar,
+    refused,
+    linkEnded,
+    // The session title the top row shows: the one chi web gave the page.
+    title: () => title || body.dataset.sessionTitle || "",
+    // Whether their composer is closed (no Revise then: participant_revise.js).
+    closed: () => !closed.hidden,
+    // Stop turn: on their own turn only.
+    canCancel: () => !!turnBy?.mine,
+    // What the stage's waiting look says, while a turn runs.
+    ownerWait: () => (running() ? waitKind : null),
+    // The delivery line's input (delivery_line.js viewerTurn): whose turn
+    // runs, and whether a message goes into it (their own, on a worker that
+    // takes it).
+    deliveryTurn: () => ({
+      own: !!turnBy?.mine,
+      steer: !!turnBy?.mine && (store.current.workerFeatures || []).includes(PARTICIPANT_STEER),
+      by: turnBy?.author && !turnBy.mine ? turnBy.name || "another participant" : null,
+    }),
+  };
+}