samagotchi 0.119.0 → 0.121.0

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

@@ -6,10 +6,13 @@
 <link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
 <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
 <link rel="stylesheet" href="/assets/tokens.css">
+<link rel="stylesheet" href="/assets/annotate_bar.css">
+<link rel="stylesheet" href="/assets/composer.css">
+<link rel="stylesheet" href="/assets/forms.css">
 <style>
 /* The participant page (participant.js): the thread with the composer pinned, and for a review session its subjects
    (the Plan): beside the thread on a wide screen, a Plan | Thread toggle on a narrow one (the composer pinned in both).
-   The owner's participant view is the same page with no composer. Colours are tokens.css's. */
+   The owner's participant view is the same page with no composer (nothing mounted, the dock hidden). Colours are tokens.css's. */
 *{box-sizing:border-box;margin:0;padding:0}
 /* No iOS text autosizing (index.html's twin). */
 html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@@ -107,9 +110,29 @@ main{flex:1;min-height:0;overflow-y:auto;padding:16px 16px 8px}
 .p-queued span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .p-queue-note{font-size:12.5px;color:var(--text-muted)}
 .p-error{font-size:13px;color:var(--danger-text);background:var(--danger-bg-dim);border-radius:8px;padding:6px 10px}
-.p-compose{display:flex;gap:8px;align-items:flex-end}
-.p-compose textarea{flex:1;resize:none;min-height:42px;max-height:40vh;font:inherit;color:var(--text);background:var(--bg-inset);border:1px solid var(--border-strong);border-radius:10px;padding:9px 12px}
-.p-compose textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
+/* The comment box: the shared composer (composer.css, composer_mount.js), as the owner's session composer lays it out
+   (participant.js sets body.has-session for a participant: one row, the text field and Send at its bottom right). Its
+   grip straddles the dock's top border; folded, the dock keeps the queue and the grip as the handle. No `/` list,
+   delivery line or model picker here. */
+#composer{background:var(--bg-inset);border:1px solid var(--border-strong);border-radius:12px}
+#composer:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
+body.has-session #composer{padding:6px 6px 6px 10px}
+#composer textarea{font:inherit;line-height:1.45;padding:2px 0}
+#composer textarea:disabled{cursor:not-allowed}
+#composer .actions-col #send{height:30px;min-height:30px;line-height:30px;padding:0 16px;font-weight:600}
+.p-dock #composeGrip{margin:-15px 0 5px}
+body.composer-folded .p-hint{display:none}
+/* The participant's own usage (participant_model.js usageItems: the fields their grant's exposure shows), one line
+   beside the hint; a phone shows it alone, one line, the end cut. Folded, it goes with the hint. */
+.p-foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;min-width:0}
+.p-foot .p-hint{flex:1 1 320px;min-width:0}
+.p-usage{display:flex;align-items:baseline;min-width:0;max-width:100%;font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.p-usage span{flex:0 0 auto}
+.p-usage span+span::before{content:"·";padding:0 6px;color:var(--text-faint)}
+.p-usage span.model{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
+.p-usage .warn{color:var(--warn-text)}
+.p-usage .over{color:var(--danger-text);font-weight:600}
+body.composer-folded .p-foot{display:none}
 button{font:inherit;cursor:pointer;border-radius:8px;border:1px solid var(--border-strong);background:var(--bg-raised);color:var(--text);padding:6px 12px}
 button:hover{background:var(--bg-hover)}
 button.primary{background:var(--primary);border-color:var(--primary);color:var(--on-solid);height:42px;padding:0 18px}
@@ -129,7 +152,9 @@ button.small{font-size:12px;padding:2px 8px}
   .p-hint,.p-note{display:none}
 }
 /* Under 16px iOS Safari zooms the page on focus (and a Home Screen app never zooms back). */
-@media (max-width:600px),(pointer:coarse){.p-compose textarea{font-size:16px}}
+@media (max-width:600px),(pointer:coarse){#composer textarea{font-size:16px}}
+/* A phone's grip (composer.css: 26 px tall, the pill at 17 px): the pill on the dock's top border. */
+@media (max-width:600px){.p-dock #composeGrip{margin:-29px auto 3px}}
 </style>
 </head>
 <body>
@@ -157,14 +182,25 @@ button.small{font-size:12px;padding:2px 8px}
   <div class="p-thread" id="thread"></div>
 </main>
 <footer class="p-dock" id="dock" hidden>
+  <div id="composeGrip" class="edge-grip" tabindex="0" aria-label="Comment box" title="Drag to make the comment box taller (double-click resets)"></div>
   <div class="p-dock-in">
     <div class="p-queue" id="queue"></div>
     <div class="p-error" id="error" role="alert" hidden></div>
-    <form class="p-compose" id="compose">
-      <textarea id="comment" rows="1" placeholder="Comment or ask" aria-label="Comment or ask"></textarea>
-      <button class="primary" id="send" type="submit">Send</button>
-    </form>
-    <div class="p-hint">⏎ sends, ⇧⏎ a new line. The model answers in a read-only turn; the owner sees everything.</div>
+    <div id="composer">
+      <div class="compose-col">
+        <div id="chips" hidden></div>
+        <textarea id="comment" rows="1" placeholder="Comment or ask" aria-label="Comment or ask"></textarea>
+      </div>
+      <div class="actions-col">
+        <button type="button" id="attachBtn" class="attach-btn" title="Add images" aria-label="Add images" hidden></button>
+        <input type="file" id="attachInput" accept="image/*" multiple hidden>
+        <div class="split"><button type="button" class="primary" id="send">Send</button></div>
+      </div>
+    </div>
+    <div class="p-foot">
+      <div class="p-usage" id="usage" aria-label="Your usage" hidden></div>
+      <div class="p-hint">⏎ sends, ⇧⏎ a new line, ↑ an earlier comment. The model answers in a read-only turn; the owner sees everything.</div>
+    </div>
   </div>
 </footer>
 </div>

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

@@ -4,14 +4,27 @@
 // GET /api/sessions/:id/review (the data) and the filtered stream; the
 // page re-reads its data at every turn boundary and draws the turn in
 // progress from the stream in between. A participant's comment is
-// POST …/turn (text only); their queued ones come back with Dequeue.
+// POST …/turn (text only, always queued: a participant never steers); their
+// queued ones come back with Dequeue. The comment box is the owner's
+// composer (composer_mount.js) with a subset on: its height, grip and fold,
+// ↑/↓ over this grant's own comments (review_history.js); no `/` list, no
+// delivery choices, no images yet. Under it, the participant's own usage
+// (spend vs cap, queue, link expiry, model). The owner's participant view
+// mounts none.
 import {
   authorColor, participantAuthor, authorLabel, toolLine, toolsSummary, refusalText, dequeueText, endedText, streamURL, reloads, endsLiveTurn, liveFrom, applyLive,
-  liveText, withToolSteps, pickSubject, subjectBody, subjectsKey, narrowView, retryDelay, retries, threadGaps,
+  liveText, withToolSteps, pickSubject, subjectBody, subjectsKey, narrowView, retryDelay, retries, threadGaps, usageItems,
 } from "./participant_model.js";
 import { fullTime } from "./format.js";
 import { createAuthLost, lostAnswer } from "./auth_lost.js";
 import { REPLACE_SESSION_TEXT, fragmentCode, tradeFragmentCode } from "./token_fragment.js";
+import { createAnnotateBar } from "./annotate_bar.js";
+import { parsePresets } from "./annotate_presets.js";
+import { appendQuote } from "./annotations.js";
+import { messageAuthorData, participantQuote, participantSource } from "./participant_annotate.js";
+import { mountComposer } from "./composer_mount.js";
+import { PROMPT_LINE_PX } from "./composer_size.js";
+import { forgetReviewHistory, readReviewHistory, recordReviewComment, rememberReviewHistory } from "./review_history.js";
 
 // A link's #code= opened in a browser that already has a cookie: traded
 // first, the page reloads without it.
@@ -35,6 +48,7 @@ let liveStale = false;
 let source = null;
 let reloadTimer = null;
 let retryTimer = null;
+let usageTimer = null;
 // Reads of the review that failed in a row (the retry's backoff), and the
 // latest read asked for (an older one answering after it is dropped).
 let failures = 0;
@@ -80,6 +94,10 @@ function showEnded(json) {
   if (ended) return;
   ended = true;
   source?.close();
+  clearTimeout(usageTimer);
+  usageTimer = null;
+  // The link is over: its comments' ↑/↓ list goes with it.
+  forgetReviewHistory(data?.viewer?.id, ownerView ? null : sessionId);
   for (const id of ["head", "main", "dock", "plan"]) $(id).hidden = true;
   $("endedText").textContent = endedText(json);
   $("ended").hidden = false;
@@ -108,6 +126,7 @@ async function load() {
   failures = 0;
   $("offline").hidden = true;
   data = json;
+  if (!ownerView) rememberReviewHistory(sessionId, data?.viewer?.id);
   live = liveFrom(data.current_turn);
   liveStale = false;
   render();
@@ -218,6 +237,8 @@ function renderPlan() {
   }));
   $("planPath").textContent = subject.path;
   const doc = $("planDoc");
+  // An annotation's label names it (participant_annotate.js).
+  doc.dataset.path = subject.path;
   const shown = subjectBody(subject);
   doc.className = `p-doc${shown.kind === "html" ? "" : " plain"}`;
   // The server's rendered markdown (MarkdownRenderer: raw HTML escaped,
@@ -247,6 +268,8 @@ function messageNode(message) {
   if (when) node.title = when;
   if (user) {
     node.style.setProperty("--author-color", authorColor(message.author));
+    // Whose it is, for an annotation's label (participant_annotate.js).
+    Object.assign(node.dataset, messageAuthorData(message));
     const who = el("div", "p-who");
     who.append(el("b", "", authorLabel(message)));
     if (message.merged) who.append(el("span", "p-tag", "added mid-turn"));
@@ -403,8 +426,29 @@ function renderDock() {
   const send = $("send");
   const comment = $("comment");
   comment.disabled = !viewer.can_comment;
-  send.disabled = !viewer.can_comment;
+  send.disabled = !viewer.can_comment || sending;
   comment.placeholder = viewer.cap_reached ? "Your spending cap is reached: ask the owner to raise it" : "Comment or ask";
+  renderUsage(viewer.usage);
+}
+
+// The participant's own usage, one line under the comment box (only what
+// their grant's exposure shows; the server sends nothing else). Spent and
+// queued change on re-reads; the link's time redraws each minute without one.
+function renderUsage(usage) {
+  clearTimeout(usageTimer);
+  usageTimer = null;
+  const items = usageItems(usage);
+  const row = $("usage");
+  row.hidden = items.length === 0;
+  row.replaceChildren(...items.map((item) => {
+    const span = el("span", [item.key === "model" ? "model" : "", item.level].filter(Boolean).join(" "), item.text);
+    span.dataset.key = item.key;
+    span.title = item.title;
+    return span;
+  }));
+  if (!ended && Number.isFinite(Date.parse(usage?.expires_at || ""))) {
+    usageTimer = setTimeout(() => renderUsage(usage), 60_000);
+  }
 }
 
 function showError(text) {
@@ -417,9 +461,8 @@ function showError(text) {
 // disabled Send button alone doesn't stop a second Enter.
 let sending = false;
 
-async function sendComment(event) {
-  event.preventDefault();
-  if (sending) return;
+async function sendComment() {
+  if (sending || !data?.viewer?.can_comment) return;
   const comment = $("comment");
   const prompt = comment.value.trim();
   if (!prompt) return;
@@ -437,8 +480,11 @@ async function sendComment(event) {
   const { ok, status, body: json } = reply;
   if (ended) return;
   if (ok) {
+    recordReviewComment(data?.viewer?.id, prompt);
     comment.value = "";
-    autosize();
+    composer.fit();
+    composer.drawFoldControls();
+    composer.refreshHistory();
     showError("");
     await load();
   } else {
@@ -460,25 +506,62 @@ async function dequeue(enqueuedId, button) {
   load();
 }
 
-function autosize() {
-  const comment = $("comment");
-  comment.style.height = "auto";
-  comment.style.height = `${comment.scrollHeight + 2}px`;
+// The comment box (composer_mount.js), a participant's only: the owner's
+// participant view mounts none (its dock stays hidden). Enter or Send posts
+// the comment: always a queued review turn, so Alt+Enter is Enter here.
+const composer = ownerView ? null : mountComposer({
+  els: {
+    composer: $("composer"), prompt: $("comment"), button: $("send"), chips: $("chips"),
+    attachBtn: $("attachBtn"), attachInput: $("attachInput"), grip: $("composeGrip"),
+  },
+  minPx: () => PROMPT_LINE_PX,
+  toast: showError,
+  loadHistory: () => Promise.resolve(readReviewHistory(data?.viewer?.id)),
+  send: () => sendComment(),
+  imagesOff: "Images can't go in a review comment yet: describe what it shows, or ask the owner.",
+  fold: { session: () => sessionId || null },
+});
+if (composer) {
+  // The session composer's layout (composer.css), and the fold saved in this browser.
+  document.body.classList.add("has-session");
+  composer.newVisit();
 }
 
-$("compose").addEventListener("submit", sendComment);
 for (const button of $("viewSeg").querySelectorAll("button")) {
   button.addEventListener("click", () => {
     setView(button.dataset.view);
     if (button.dataset.view === "thread") $("main").scrollTop = $("main").scrollHeight;
   });
 }
-$("comment").addEventListener("input", autosize);
-$("comment").addEventListener("keydown", (event) => {
-  if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
-    event.preventDefault();
-    $("compose").requestSubmit();
-  }
+
+// Annotate (annotate_bar.js, participant_annotate.js): a selection in the
+// Plan or the thread offers "Annotate" and the presets
+// (web.annotate_presets), which append a quote to the comment box; nothing
+// is sent. No plugin pills: a review turn refuses `/` lines. Not in the
+// owner's participant view, nor while this participant can't comment.
+const annotateBar = createAnnotateBar({
+  presets: parsePresets(body.annotatePresets),
+  canAnnotate: () => !ownerView && !ended && !!data?.viewer?.can_comment,
+  roots: () => [$("planDoc"), $("thread")],
+  isLive: (root) => !!root.closest?.(".p-msg.live"),
+  onQuote: quoteIntoComment,
+  source: participantSource,
+  quote: participantQuote,
+  dock: () => $("dock"),
 });
+$("main").addEventListener("scroll", annotateBar.schedule);
+$("planScroll").addEventListener("scroll", annotateBar.schedule);
+
+function quoteIntoComment(text) {
+  const comment = $("comment");
+  // A folded box opens for this visit (nothing saved).
+  composer.openForVisit();
+  comment.value = appendQuote(comment.value, text);
+  composer.fit();
+  composer.drawFoldControls();
+  comment.focus();
+  comment.setSelectionRange(comment.value.length, comment.value.length);
+  comment.scrollTop = comment.scrollHeight;
+}
 
 load();

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

@@ -0,0 +1,75 @@
+// Annotate on the participant page (participant.js): a selection in the
+// Plan (the review's subject) or in the thread quotes it into the comment
+// box, with where it came from, the way the owner's page does
+// (annotations.js, annotate_bar.js):
+//
+//   From docs/plan.md:
+//   > step 3
+//
+//   Is step 3 safe?
+//
+// A model reply carries no label (the owner's answers carry none); a
+// comment names its author ("From Alex's comment:", "From my earlier
+// comment:"). Not annotatable: the reply still streaming, tool rows,
+// status lines, time gaps, the header. The bar's source and quote options
+// (createAnnotateBar); no DOM state beyond Element#closest, so it runs
+// under `node --test` with stand-ins. A module of its own: static JS is
+// cached at unversioned URLs, and a new export on an old module would
+// blank the page.
+
+import { quoteBlock } from "./annotations.js";
+
+// Where a node on the participant page came from: { kind, root, … } where
+// root is the element a selection is clipped to, or null.
+//   plan:    { path } the subject shown (#planDoc's data-path)
+//   reply:   a model reply's bubble
+//   comment: { by, name } a prompt's bubble; by is "me", "participant",
+//            "owner" or "automatic" (its .p-msg's data-by), name the
+//            participant's (data-name)
+export function participantSource(node) {
+  const el = node && node.nodeType === 3 ? node.parentElement : node;
+  if (!el?.closest) return null;
+  const plan = el.closest("#planDoc");
+  if (plan) {
+    // The "only the first part is shown" note isn't the subject's text.
+    if (el.closest(".p-plan-note")) return null;
+    return { kind: "plan", path: plan.dataset?.path || "", root: plan };
+  }
+  const bubble = el.closest(".p-bubble");
+  const msg = bubble?.closest(".p-msg");
+  if (!msg || msg.classList.contains("live")) return null;
+  if (msg.classList.contains("reply")) return { kind: "reply", root: bubble };
+  if (msg.classList.contains("user")) {
+    return { kind: "comment", by: msg.dataset?.by || "owner", name: msg.dataset?.name || "", root: bubble };
+  }
+  return null;
+}
+
+// The line naming +source+ above the quote, or null (a reply).
+export function participantLabel(source) {
+  if (source?.kind === "plan") return source.path ? `From ${source.path}:` : "From the plan:";
+  if (source?.kind !== "comment") return null;
+  if (source.by === "me") return "From my earlier comment:";
+  if (source.by === "participant") return `From ${source.name || "a participant"}'s comment:`;
+  if (source.by === "automatic") return "From the automatic turn:";
+  return "From the owner's message:";
+}
+
+// The quote block for the selected +text+ (annotations.js quoteBlock's
+// lines) under +source+'s label; null when it holds no text.
+export function participantQuote(text, source) {
+  const block = quoteBlock(text, { kind: "answer" });
+  if (!block) return null;
+  const label = participantLabel(source);
+  return label ? `${label}\n${block}` : block;
+}
+
+// What a message's .p-msg carries for participantSource: data-by and, for
+// another participant, data-name. +message+ is a review message (the
+// participant route's: mine, author, author_name, automatic).
+export function messageAuthorData(message) {
+  if (message?.mine) return { by: "me" };
+  if (message?.author) return { by: "participant", name: message.author_name || "" };
+  if (message?.automatic) return { by: "automatic" };
+  return { by: "owner" };
+}

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

@@ -3,7 +3,7 @@
 // refusal in words, the stream's URL, and the live turn as filtered events
 // build it (ParticipantView on the server decides what arrives at all).
 
-import { gapText } from "./format.js";
+import { fullTime, gapText } from "./format.js";
 
 // A participant's author: "p:" and its grant id, as the server writes it
 // (Steer.author_for / PARTICIPANT_PREFIX): the one place the web spells it.
@@ -246,3 +246,55 @@ export function subjectsKey(subjects) {
 export function narrowView(wanted, subjects) {
   return wanted === "plan" && (subjects || []).length ? "plan" : "thread";
 }
+
+// A participant's usage row (the review data's viewer.usage: the fields
+// their grant's exposure shows, ParticipantExposure): one short item per
+// field it has, each {key, text, title, level}; level "" / "warn" (most of
+// the cap spent, the queue full) / "over" (the cap reached). Only the
+// participant's own figures ever arrive; a field the level doesn't show is
+// absent and draws nothing. [] with no usage (the owner's view).
+export const USAGE_WARN = 0.8;
+const MINUTE_MS = 60 * 1000;
+const HOUR_MS = 60 * MINUTE_MS;
+const DAY_MS = 24 * HOUR_MS;
+const dollars = (n) => `$${(Number(n) || 0).toFixed(2)}`;
+const isNum = (n) => typeof n === "number" && Number.isFinite(n);
+
+// "6 d left", "5 h left", "12 min left", "ended"; "" for no or bad input.
+export function leftText(iso, now = Date.now()) {
+  const at = Date.parse(iso || "");
+  if (!Number.isFinite(at)) return "";
+  const left = at - now;
+  if (left <= 0) return "ended";
+  if (left >= 2 * DAY_MS) return `${Math.round(left / DAY_MS)} d left`;
+  if (left >= 2 * HOUR_MS) return `${Math.floor(left / HOUR_MS)} h left`;
+  return `${Math.max(1, Math.floor(left / MINUTE_MS))} min left`;
+}
+
+export function usageItems(usage, now = Date.now()) {
+  if (!usage || typeof usage !== "object") return [];
+  const items = [];
+  if (isNum(usage.spent)) {
+    const cap = isNum(usage.cap) ? usage.cap : null;
+    const share = cap ? usage.spent / cap : 0;
+    const level = cap === null ? "" : usage.spent >= cap ? "over" : share >= USAGE_WARN ? "warn" : "";
+    items.push({ key: "spent", text: cap === null ? `${dollars(usage.spent)} spent` : `${dollars(usage.spent)} of ${dollars(cap)} cap`,
+      title: cap === null ? "What your comments have cost the owner so far"
+        : `What your comments have cost the owner so far, of the ${dollars(cap)} cap they set`, level });
+  }
+  if (isNum(usage.queued) && isNum(usage.queue_limit)) {
+    items.push({ key: "queued", text: `${usage.queued}/${usage.queue_limit} queued`,
+      title: `Your comments waiting for their turn: up to ${usage.queue_limit} can wait behind a running one`,
+      level: usage.queued >= usage.queue_limit ? "warn" : "" });
+  }
+  const left = leftText(usage.expires_at, now);
+  if (left) {
+    const day = Date.parse(usage.expires_at) - now < DAY_MS;
+    items.push({ key: "expires_at", text: left === "ended" ? "link ended" : `link: ${left}`,
+      title: `Your link ends ${fullTime(usage.expires_at)}`, level: day ? "warn" : "" });
+  }
+  if (typeof usage.model === "string" && usage.model) {
+    items.push({ key: "model", text: usage.model, title: "The model answering in this session", level: "" });
+  }
+  return items;
+}

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

@@ -2,7 +2,9 @@
 // bar's chip (how many, someone here now) and its popover, the panel: each
 // participant's state, expiry, spend against their cap, turns and when they
 // were last seen, with Revoke and a new cap; Invite (name, person or agent,
-// expiry, cap) gives the link once, to copy, share (a phone's share sheet)
+// expiry, cap, and behind an auth proxy that names the signed-in user their
+// email, which binds the link to that account) gives the link once, to
+// copy, share (a phone's share sheet)
 // or scan (its QR); and the participant view, the participant page as a
 // participant sees this session (through the server's filter), in a new
 // tab. The panel reads GET /api/sessions/:id/participants, again after
@@ -61,6 +63,7 @@ export function rowModel(grant, now) {
     id: grant.id,
     name: grant.name,
     kind: grant.kind,
+    identity: typeof grant.identity === "string" ? grant.identity : null,
     active,
     present,
     color: authorColor(participantAuthor(grant.id)),
@@ -98,12 +101,21 @@ export function chipTemplate(chip) {
     title=${chip.title} aria-label=${chip.title} aria-haspopup="dialog"><span class="pc-dot" aria-hidden="true"></span>${chip.text}</button>`;
 }
 
-// What POST …/participants gets from the Invite form's values.
+// An email as chi binds a link to it (Grants.clean_identity, which has the
+// last word): one @, no spaces, commas, quotes or angle brackets.
+const EMAIL_RE = /^[^@\s,<>"\\]+@[^@\s,<>"\\]+$/;
+
+// What POST …/participants gets from the Invite form's values. +identity+
+// (behind a proxy that names the user): their email, which binds the link;
+// the name defaults to its local part.
 // @return {{body}|{error}}
-export function inviteBody({ name, kind, days, cap }) {
-  const clean = String(name || "").trim();
+export function inviteBody({ name, kind, days, cap, identity }) {
+  const email = String(identity || "").trim().toLowerCase();
+  if (email && !EMAIL_RE.test(email)) return { error: "An email is one address: name@domain." };
+  const clean = String(name || "").trim() || email.split("@")[0];
   if (!clean) return { error: "Give them a name: it is what the model and the thread show." };
   const body = { name: clean, kind: kind === "agent" ? "agent" : "human" };
+  if (email) body.identity = email;
   const d = Number(days);
   body.ttl = Math.round((EXPIRY_DAYS.includes(d) ? d : DEFAULT_EXPIRY_DAYS) * 24 * 60 * 60);
   const capText = String(cap ?? "").trim();
@@ -138,13 +150,14 @@ function rowTemplate(row, { capFor }) {
     <div class="pp-who"><span class=${`pp-dot${row.present ? " present" : ""}`} aria-hidden="true"></span><b>${row.name}</b>${
       row.kind === "agent" ? html`<span class="pp-tag">agent</span>` : nothing}<span class="pp-state">${row.state}</span></div>
     <div class="pp-meta"><span class=${row.capReached ? "pp-capped" : ""}>${row.spend}</span> · ${row.turns}${
-      row.expires ? html` · ${row.expires}` : nothing}</div>${actions}</li>`;
+      row.expires ? html` · ${row.expires}` : nothing}${row.identity ? html` · <span class="pp-bound">bound to ${row.identity}</span>` : nothing}</div>${actions}</li>`;
 }
 
 function inviteTemplate(invite, { canShare }) {
   if (!invite) return nothing;
   return html`<div class="pp-invite-done">
-    <div class="ctx-pop-meta">${invite.name}'s link: shown once (chi keeps only its digest). It opens this session only.${
+    <div class="ctx-pop-meta">${invite.name}'s link: shown once (chi keeps only its digest). It opens this session only${
+      invite.identity ? `, for ${invite.identity} only` : ""}.${
       invite.lan ? nothing : " This chi web has no LAN address: the link opens on this machine only."}</div>
     ${invite.warning ? html`<div class="pp-warning" role="note">${invite.warning}</div>` : nothing}
     <div class="pp-link"><input readonly .value=${invite.link} aria-label="The review link" @focus=${(e) => e.target.select()}><button
@@ -157,8 +170,11 @@ function inviteTemplate(invite, { canShare }) {
 // gave), the participant view.
 // +working+: the server's warning for a session that isn't a review session
 // (shown before the Invite, with Start a review of it), null for one.
+// +identityHeader+: the header chi web's auth proxy names the signed-in
+// user in (the list's identity_header), null without one: then the Invite
+// has no email field (a bound link could never open).
 export function panelTemplate(grants, { now, sessionId, invite = null, error = null, capFor = null, canShare = false,
-                                        busy = false, working = null, reviewing = false } = {}) {
+                                        busy = false, working = null, reviewing = false, identityHeader = null } = {}) {
   const rows = (grants || []).map((g) => rowModel(g, now));
   const active = rows.filter((row) => row.active);
   const ended = rows.filter((row) => !row.active);
@@ -173,9 +189,13 @@ export function panelTemplate(grants, { now, sessionId, invite = null, error = n
       data-act="start-review" ?disabled=${reviewing}>${reviewing ? "Starting…" : "Start a review of it"}</button></div>` : nothing}
     ${invite ? inviteTemplate(invite, { canShare }) : html`<form class="pp-invite">
       <div class="pp-invite-row"><input name="name" type="text" placeholder="Name (Alex)" autocomplete="off" aria-label="Their name" maxlength="64"
-      ><select name="kind" aria-label="A person or an agent"><option value="human">person</option><option value="agent">agent</option></select></div>
-      <div class="pp-invite-row"><label>Expires <select name="days">${EXPIRY_DAYS.map((d) => html`<option value=${d}
-        ?selected=${d === DEFAULT_EXPIRY_DAYS}>${d === 1 ? "1 day" : `${d} days`}</option>`)}</select></label
+      ><span class="select-wrap"><select name="kind" aria-label="A person or an agent"><option value="human">person</option><option value="agent">agent</option></select></span></div>
+      ${identityHeader ? html`<div class="pp-invite-row"><input name="identity" type="email" placeholder="Their email (alex@example.com)"
+        autocomplete="off" aria-label="Their email: the link opens only for that account"></div>
+      <div class="ctx-pop-meta pp-bind-note">With their email the link opens only for them, signed in through the proxy.
+        Without one, anyone the proxy lets in who gets the link can open it.</div>` : nothing}
+      <div class="pp-invite-row"><label>Expires <span class="select-wrap"><select name="days">${EXPIRY_DAYS.map((d) => html`<option value=${d}
+        ?selected=${d === DEFAULT_EXPIRY_DAYS}>${d === 1 ? "1 day" : `${d} days`}</option>`)}</select></span></label
       ><label>Cap $<input name="cap" type="text" inputmode="decimal" placeholder="2" autocomplete="off" aria-label="Spending cap, dollars"></label
       ><button type="submit" class="pp-invite-btn" ?disabled=${busy}>Invite</button></div></form>`}
     <div class="ctx-pop-actions pp-foot">${invite ? html`<button type="button" data-act="another">Invite another</button>` : nothing}<a
@@ -198,6 +218,9 @@ export function createParticipantsControl({ el, session, api, onChange = () => {
   // The open session's share warning (GET …/participants), null for a
   // review session.
   let working = null;
+  // The header chi web's proxy names the user in (GET …/participants), null
+  // without one: the Invite's email field.
+  let identityHeader = null;
   let loadedFor = null;
   let invite = null;
   let error = null;
@@ -230,7 +253,7 @@ export function createParticipantsControl({ el, session, api, onChange = () => {
 
   function draw() {
     render(panelTemplate(grants, { now: clock(), sessionId: session(), invite, error, capFor, busy,
-                                   working: startReview ? working : null, reviewing: reviewing(),
+                                   working: startReview ? working : null, reviewing: reviewing(), identityHeader,
                                    canShare: typeof win.navigator?.share === "function" }), shell.pop);
     shell.replace();
   }
@@ -249,6 +272,7 @@ export function createParticipantsControl({ el, session, api, onChange = () => {
       if (id !== session()) return;
       grants = Array.isArray(body.participants) ? body.participants : [];
       working = typeof body.warning === "string" ? body.warning : null;
+      identityHeader = typeof body.identity_header === "string" && body.identity_header ? body.identity_header : null;
       loadedFor = id;
       if (setParticipantNames(grants)) onNames();
     } catch {
@@ -265,7 +289,7 @@ export function createParticipantsControl({ el, session, api, onChange = () => {
   }
 
   async function submitInvite(form) {
-    const values = Object.fromEntries(["name", "kind", "days", "cap"].map((k) => [k, form.elements[k]?.value]));
+    const values = Object.fromEntries(["name", "kind", "days", "cap", "identity"].map((k) => [k, form.elements[k]?.value]));
     const { body, error: problem } = inviteBody(values);
     if (problem) {
       error = problem;
@@ -278,7 +302,7 @@ export function createParticipantsControl({ el, session, api, onChange = () => {
       const answer = await api.invite(asked.id, body);
       if (!stillOpen(asked)) return dropped(asked);
       invite = { name: answer.participant?.name || body.name, link: answer.link, qr_svg: answer.qr_svg, lan: answer.lan,
-                 warning: answer.warning || null, copied: false };
+                 warning: answer.warning || null, identity: answer.participant?.identity || null, copied: false };
       error = null;
     } catch (err) {
       if (!stillOpen(asked)) return dropped(asked);

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

@@ -15,6 +15,20 @@ export function isContinue(pq) {
   return !!pq && pq.kind === "continue";
 }
 
+// A model's recommended option: its label ends in "(Recommended)" (the
+// ask_user_question description asks for it first, the mark at the end).
+// The answer keeps the full label; only what the card shows drops the mark.
+const RECOMMENDED = /\s*\(Recommended\)$/;
+export function isRecommended(label) {
+  return RECOMMENDED.test(String(label ?? "").trim());
+}
+
+// An option's label as the card shows it: without the recommended mark.
+export function optionText(label) {
+  const s = String(label ?? "");
+  return isRecommended(s) ? s.trim().replace(RECOMMENDED, "") || s : s;
+}
+
 export const CONTINUE_REASON_PLACEHOLDER = "Stop, because… (the model reads it)";
 
 // Why a step-limit question closed unanswered (its question_cancelled reason).
@@ -135,7 +149,7 @@ export function resultText(pq, { answer = null, cancelled = false, reason = "" }
     return `Allowed: ${sel[0]}`;
   }
   const parts = [];
-  if (sel.length) parts.push(sel.join(", "));
+  if (sel.length) parts.push(sel.map(optionText).join(", "));
   if (freeform) parts.push(freeform);
   return parts.length ? `Answered: ${parts.join(" · ")}` : "Answered";
 }

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

@@ -16,8 +16,8 @@ import { dismissQuestion, sendAnswer, sendCommand } from "./data.js";
 import { diffTemplate } from "./diff_view.js";
 import { render } from "./vendor/lit-html.js";
 import {
-  answerErrorText, approvalAllowed, approvalView, CONTINUE_REASON_PLACEHOLDER, deniedReason, isContinue, keepsAskingText,
-  nextCardAction, relayedToView, relayView, resultText, summaryText,
+  answerErrorText, approvalAllowed, approvalView, CONTINUE_REASON_PLACEHOLDER, deniedReason, isContinue, isRecommended,
+  keepsAskingText, nextCardAction, optionText, relayedToView, relayView, resultText, summaryText,
 } from "./question_card.js";
 import { sessionHash } from "./route.js";
 import { clientLabel, isOwn } from "./turn_events.js";
@@ -129,6 +129,15 @@ export function createQuestionCards({
         text.textContent = String(label);
         row.appendChild(input);
         row.appendChild(text);
+        // The model's pick: marked, its mark a tag, nothing pre-checked.
+        if (!approval && isRecommended(label)) {
+          row.classList.add("recommended");
+          text.textContent = optionText(label);
+          const tag = doc.createElement("span");
+          tag.className = "question-option-tag";
+          tag.textContent = "recommended";
+          row.appendChild(tag);
+        }
         list.appendChild(row);
       });
       card.appendChild(list);