samagotchi 0.119.0 → 0.120.0

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

@@ -0,0 +1,196 @@
+import { render } from "./vendor/lit-html.js";
+import { admitImages, chipName, chipsTemplate, imageFiles } from "./images.js";
+import { promptHeight } from "./composer_size.js";
+import { GRIP_KEY, createComposerGrip } from "./composer_grip.js";
+import { createPromptHistory } from "./prompt_history.js";
+import { readStored } from "./storage.js";
+
+// The composer, mounted on a page's markup (composer.css): the message box,
+// its height (it grows with the text; the grip sets a floor), its image
+// chips (paste, drop and the image button), the grip and fold
+// (composer_grip.js), ↑/↓ over the prompt history (prompt_history.js) and
+// its keys. What a page sends, and how, stays the page's: the owner's page
+// (app.js) hands the result to send_turn.js as its composer.
+//
+// +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}.
+// 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
+// paste, drop or pick of one toasts it and adds no chip; null takes them.
+// +fold+: createComposerGrip's page hooks (session, waiting, turnRunning,
+// allViewOpen, lightboxOpen, infoCancelBtn, infoBarEl, typeAnywhere).
+// @return {el, button, chips(), setChips(list), addImageFiles(files), fit(),
+// hasDraft(), refreshHistory(), and the grip's isComposerFolded,
+// openForVisit, focusPrompt, drawFoldControls, newVisit, decideVisit}
+export function mountComposer({
+  els, minPx, toast, onWrite = () => {}, loadHistory = null, send, keyFirst = () => false, escape = () => false,
+  imagesOff = null, fold, win = globalThis.window, createObjectURL = (f) => URL.createObjectURL(f),
+  revokeObjectURL = (src) => URL.revokeObjectURL(src),
+}) {
+  const { composer: composerEl, prompt: promptEl, button, chips: chipsEl, attachBtn, attachInput, grip } = els;
+
+  // ── Images: paste or drop into the composer, chips until sent ─────────────
+  let chips = [];
+  // Bound once the grip is made (below); a chip drawn before that has no fold to redraw.
+  let drawFoldControls = () => {};
+
+  function renderChips() {
+    render(chipsTemplate(chips), chipsEl);
+    chipsEl.hidden = !chips.length;
+    drawFoldControls();
+  }
+
+  // A chip that goes frees its preview; one kept in +list+ keeps it.
+  function setChips(list) {
+    for (const c of chips) if (c.file && c.src && !list.includes(c)) revokeObjectURL(c.src);
+    chips = list;
+    renderChips();
+  }
+
+  // A paste's, a drop's or the image button's files: the images the message
+  // may still take become chips (images.js admitImages); a toast says why the
+  // rest stayed out. Whether any went in.
+  function addImageFiles(files) {
+    if (imagesOff) {
+      if (files.length) toast(imagesOff);
+      return false;
+    }
+    const { take, refused } = admitImages(files, chips.length);
+    if (refused) toast(refused);
+    if (!take.length) return false;
+    for (const file of take) chips.push({ file, name: chipName(file, chips.length), src: createObjectURL(file) });
+    renderChips();
+    focusPrompt();
+    return true;
+  }
+
+  chipsEl.addEventListener("click", (e) => {
+    const btn = e.target.closest(".chip-remove");
+    if (!btn) return;
+    const [chip] = chips.splice(Number(btn.dataset.index), 1);
+    if (chip?.file && chip.src) revokeObjectURL(chip.src);
+    renderChips();
+  });
+  // 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", () => {
+    addImageFiles([...attachInput.files]);
+    attachInput.value = "";
+  });
+
+  // ── Height: grows with the text; the top-edge grip sets a floor ───────────
+  // The floor is saved as it was set; fit holds it to half the window it is
+  // drawn in (composer_size.js), so a floor saved in a bigger window fits this one
+  // and comes back when the window is big again.
+  let floor = Number(readStored(GRIP_KEY)) || null;
+
+  function fit() {
+    const borders = promptEl.offsetHeight - promptEl.clientHeight;
+    promptEl.style.height = "0px";
+    const { height, scrolls } = promptHeight({ contentPx: promptEl.scrollHeight + borders, floorPx: floor, viewportPx: win.innerHeight, minPx: minPx() });
+    promptEl.style.height = `${height}px`;
+    promptEl.style.overflowY = scrolls ? "auto" : "hidden";
+  }
+
+  promptEl.addEventListener("input", fit);
+  win.addEventListener("resize", fit);
+  fit();
+
+  promptEl.addEventListener("paste", (e) => {
+    const files = imageFiles(e.clipboardData);
+    // Text pasted along with an image still lands in the textarea.
+    if (addImageFiles(files) && !e.clipboardData.getData("text/plain")) e.preventDefault();
+  });
+  composerEl.addEventListener("dragover", (e) => {
+    if (![...(e.dataTransfer?.types || [])].includes("Files")) return;
+    e.preventDefault();
+    composerEl.classList.add("dropping");
+  });
+  composerEl.addEventListener("dragleave", () => composerEl.classList.remove("dropping"));
+  composerEl.addEventListener("drop", (e) => {
+    composerEl.classList.remove("dropping");
+    const files = imageFiles(e.dataTransfer);
+    if (!files.length) return;
+    e.preventDefault();
+    addImageFiles(files);
+  });
+
+  const hasDraft = () => !!(promptEl.value.trim() || chips.length);
+
+  // ── The grip and fold (composer_grip.js) ──────────────────────────────────
+  const composerGrip = createComposerGrip({
+    ...fold,
+    composeGrip: grip,
+    promptEl,
+    fitPrompt: fit,
+    promptMinPx: minPx,
+    floor: () => floor,
+    setFloor: (px) => { floor = px; },
+    draft: hasDraft,
+    imageFiles,
+    addImageFiles,
+    win,
+  });
+  const { focusPrompt } = composerGrip;
+  ({ drawFoldControls } = composerGrip);
+
+  // ── ↑/↓: the prompt history (prompt_history.js) ───────────────────────────
+  // From a copy fetched on focus and after each send (keydown can't wait for one).
+  const promptHistory = createPromptHistory();
+  function refreshHistory() {
+    if (!loadHistory) return;
+    loadHistory().then((entries) => promptHistory.setEntries(entries), () => {});
+  }
+  promptEl.addEventListener("focus", refreshHistory);
+  function historyKey(e) {
+    if (e.isComposing || e.shiftKey || e.altKey || e.ctrlKey || e.metaKey) return false;
+    const step = e.key === "ArrowUp" ? promptHistory.up : e.key === "ArrowDown" ? promptHistory.down : null;
+    const recalled = step?.({ value: promptEl.value, start: promptEl.selectionStart, end: promptEl.selectionEnd });
+    if (!recalled) return false;
+    e.preventDefault();
+    promptEl.value = recalled.value;
+    onWrite();
+    promptEl.setSelectionRange(recalled.caret, recalled.caret);
+    fit();
+    return true;
+  }
+
+  promptEl.addEventListener("keydown", (e) => {
+    if (keyFirst(e)) return;
+    if (historyKey(e)) return;
+    if (e.key === "Escape" && escape()) {
+      e.preventDefault();
+      return;
+    }
+    // An IME's Enter picks the composition, it doesn't send.
+    if (e.key === "Enter" && !e.shiftKey && !e.isComposing) {
+      e.preventDefault();
+      send({ queue: e.altKey });
+    }
+  });
+  button.addEventListener("click", () => send({ queue: false }));
+
+  return {
+    el: promptEl,
+    button,
+    chips: () => chips,
+    setChips,
+    addImageFiles,
+    fit,
+    hasDraft,
+    refreshHistory,
+    isComposerFolded: composerGrip.isComposerFolded,
+    openForVisit: composerGrip.openForVisit,
+    focusPrompt,
+    drawFoldControls: composerGrip.drawFoldControls,
+    newVisit: composerGrip.newVisit,
+    decideVisit: composerGrip.decideVisit,
+  };
+}

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

@@ -10,9 +10,10 @@
 <meta name="apple-mobile-web-app-title" content="Chi">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <link rel="stylesheet" href="/assets/tokens.css">
+<link rel="stylesheet" href="/assets/annotate_bar.css">
+<link rel="stylesheet" href="/assets/composer.css">
 <style>
-/* Icon masks shared by the phone info bar, the all view's cards and the composer's image button (the stroke only shapes the mask; the icon takes currentColor). */
-:root{--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")}
+/* 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")}
 *{box-sizing:border-box;margin:0;padding:0}
 /* No iOS text autosizing: it grows text in a box sized for the text as written (it clipped the session cards). */
@@ -543,22 +544,6 @@ button.system-one-wrong:hover:not(:disabled){background:var(--bg-hover);color:va
 /* In a step: a row, lighter (no float), like the step's notices. */
 .gen .bubble.plugin-card{margin:6px 0 4px;box-shadow:inset 0 1px 0 var(--glass-highlight);padding:8px 10px}
 .hint{color:var(--text-muted);font-size:13px;padding:12px}
-/* The selection bubble (app.js Annotate): Annotate + the presets (web.annotate_presets), small pills with a gap (they wrap on a narrow page). */
-#annotateBar{position:fixed;z-index:20;display:flex;flex-wrap:wrap;gap:4px;max-width:calc(100vw - 16px)}
-#annotateBar[hidden]{display:none}
-#annotateBar button{font-size:12px;padding:4px 10px;border-radius:999px;box-shadow:0 2px 8px var(--shadow-strong)}
-/* A bundle's pills (chi.annotation) after a thin separator; beyond 3, "⋯" opens the rest in a list under it. */
-#annotateBar .annotate-actions{display:flex;flex-wrap:wrap;gap:4px;align-items:center;position:relative}
-#annotateBar .annotate-actions[hidden]{display:none}
-#annotateBar .annotate-sep{width:1px;align-self:stretch;margin:3px 2px;background:var(--border-strong)}
-#annotateBar .annotate-action,#annotateBar .annotate-more{background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-border);padding:3px 10px;max-width:32ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-#annotateBar .annotate-action:disabled{opacity:.5;cursor:not-allowed}
-#annotateBar .annotate-action[data-sends]::after{content:"↗";margin-left:4px;opacity:.75}
-#annotateBar .annotate-more-list{position:absolute;top:calc(100% + 4px);right:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
-#annotateBar.docked{right:8px;justify-content:center}
-@media (pointer:coarse){#annotateBar button{font-size:14px;padding:8px 14px}}
-#annotateBar .annotate-more-list[hidden]{display:none}
-#annotateBar .annotate-preset{background:var(--bg-raised);color:var(--text-2);border:1px solid var(--border-strong);padding:3px 10px;max-width:32ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 /* Copy buttons (copy.js): top-right in an answer and a code block, left of a prompt (its right edge is the page's); shown on hover or focus, always (dim) on touch. They hold no text: "copied ✓" is CSS content. */
 .bubble.output,.bubble.user{position:relative}
 .copy-btn{position:absolute;top:6px;right:6px;z-index:1;display:inline-flex;align-items:center;justify-content:center;height:24px;min-width:24px;padding:0 5px;border-radius:6px;background:var(--bg-raised);border:1px solid var(--border-strong);color:var(--text-muted);font-size:11px;line-height:1;white-space:nowrap;user-select:none;-webkit-user-select:none;opacity:0;transition:opacity .12s ease,color .12s ease}
@@ -586,9 +571,6 @@ body.no-glass.has-session #center{background:var(--bg);border-color:var(--border
 body.has-session #dock{position:absolute;left:16px;right:16px;bottom:16px;margin:0;z-index:3}
 body.has-session #history{padding-bottom:calc(var(--dock-h,160px) + 32px)}
 #dock:focus-within{border-color:color-mix(in srgb,var(--accent) 70%,transparent);box-shadow:0 0 0 3px var(--accent-ring),var(--glass-shadow)}
-#composer{display:flex;flex-direction:column;gap:8px;padding:14px 14px 10px}
-#composer .compose-col{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
-#composer.dropping{outline:2px dashed var(--accent);outline-offset:-4px}
 /* The delivery line (delivery_line.js): a session's row above the text field, always there so the composer never changes height: the key hint while idle; while a turn runs, where a message typed now goes in, then the cut and queue links. One quiet row, ellipsised; a phone gets the short text and chips. */
 #deliveryLine{display:flex;align-items:center;gap:10px;min-width:0;flex:1 0 100%;height:20px;padding:0 2px;overflow:hidden;font-size:12px;line-height:18px;color:var(--text-muted);user-select:none}
 #deliveryLine[hidden]{display:none}
@@ -602,8 +584,6 @@ body.has-session #history{padding-bottom:calc(var(--dock-h,160px) + 32px)}
 #deliveryLine .delivery-link:focus-visible{outline:2px solid var(--accent-ring);outline-offset:1px}
 #deliveryLine .delivery-link:disabled{color:var(--text-faint);opacity:1;cursor:default}
 #deliveryLine .delivery-link.armed{color:var(--on-solid);background:var(--accent-strong);padding:0 6px}
-/* In a session the composer is a row: the line's row wraps above the text field and the buttons. */
-body.has-session #composer{flex-wrap:wrap;row-gap:6px}
 @media(max-width:600px){
   #deliveryLine .long,#deliveryLine .delivery-sep{display:none}
   #deliveryLine .short{display:inline}
@@ -613,12 +593,6 @@ body.has-session #composer{flex-wrap:wrap;row-gap:6px}
 }
 /* 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}
-#chips{display:flex;flex-wrap:wrap;gap:6px}
-#chips[hidden]{display:none}
-.chip{display:inline-flex;align-items:center;gap:6px;background:var(--accent-bg);border:1px solid var(--border-strong);border-radius:8px;padding:3px 4px 3px 3px;font-size:12px;max-width:220px}
-.chip img{width:32px;height:32px;object-fit:cover;border-radius:5px}
-.chip .chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.chip .chip-remove{background:transparent;color:var(--text-3);padding:0 6px;min-height:0;font-size:14px}
 .thumbs{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
 .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)}
@@ -626,56 +600,6 @@ body.has-session #composer{flex-wrap:wrap;row-gap:6px}
 #lightbox{position:fixed;inset:0;z-index:50;background:var(--backdrop);display:flex;align-items:center;justify-content:center;cursor:zoom-out}
 #lightbox[hidden]{display:none}
 #lightbox img{max-width:96vw;max-height:94vh;border-radius:6px}
-#composer textarea{flex:1 1 auto;min-height:72px;resize:none;background:transparent;border:0;color:var(--text);padding:2px;border-radius:0;font-size:15px;line-height:1.45}
-/* An edge grip: the thin handle on an edge between two panes (the composer's,
-   the latest-sessions strip's). The pill is the handle's look, a 36×4 px bar
-   centred on the edge, drawn on hover, while dragging or focused; the id
-   rules hold each grip's own box: height and margins (they depend on the flex
-   gap around it: none for the composer's, main's 16 px for the strip's) and
-   its own states. */
-.edge-grip{position:relative;z-index:2;cursor:ns-resize;touch-action:none}
-.edge-grip::after{content:"";position:absolute;left:50%;top:3px;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--border-strong);opacity:0;transition:opacity .12s ease}
-.edge-grip:hover::after,.edge-grip.dragging::after{opacity:1}
-.edge-grip:hover::after,.edge-grip.dragging::after{background:var(--accent)}
-.edge-grip:focus-visible{outline:none}
-.edge-grip:focus-visible::after{opacity:1;box-shadow:0 0 0 2px var(--accent-ring)}
-#composeGrip{height:10px;margin:-5px 0}
-#composeGrip:has(+ #composer:hover)::after{opacity:1}
-/* Folded (composer_grip.js, composer_fold.js): the grip is the handle on the info bar's top edge, drawn always, wider so it reads as a control;
-   draft = the accent, waiting = the attention colour; .will-fold = a drag past the fold threshold (released it hides the box). */
-body.has-session.composer-folded #composeGrip::after{opacity:1;width:48px;margin-left:-24px}
-#composeGrip.draft::after{background:var(--accent)}
-#composeGrip.waiting::after{background:var(--warn)}
-#composeGrip.will-fold::after{opacity:1;background:var(--accent)}
-/* A phone has no hover: the pill is always there and the hit zone is taller, ~96 px wide and centred (full width would cover the
-   info bar's buttons while folded, the stage card's bottom in the stage view); it reaches 7 px below the edge, the info bar's
-   border and padding, so it never covers a button of the bar. */
-@media(max-width:600px){
-  #composeGrip{width:96px;height:26px;margin:-19px auto -7px}
-  #composeGrip::after{top:17px;opacity:1}
-}
-#composer textarea::placeholder{color:var(--text-faint)}
-/* Key hint: its line is always reserved, so focusing never shifts the layout. */
-#composeHint{order:1;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;line-height:14px;color:var(--text-faint);padding-left:2px;opacity:0;transition:opacity .12s ease;user-select:none}
-#composer:focus-within #composeHint:not(:empty){opacity:1}
-#composer textarea:focus{outline:none}
-/* The toolbar row: model picker · hint · Cancel · Send (the JS display toggles decide what shows). */
-#composer .actions-col{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}
-#composer .actions-col button{white-space:nowrap;font-size:12px;padding:0 12px;height:28px;min-height:28px;line-height:28px}
-#composer .actions-col .split{order:3;display:flex;gap:4px;margin-left:auto}
-#composer #actionBtn{min-width:64px;font-weight:600}
-/* The image button (app.js: a click opens #attachInput, the hidden file picker; a phone's offers the camera and the photo library):
-   an icon just left of Start / Send, quiet like the model picker; hidden in a session a terminal owns, and on a phone while a turn runs. */
-#composer .actions-col .attach-btn{order:2;flex:none;width:28px;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--text-muted)}
-#composer .actions-col .attach-btn::before{content:"";display:block;width:16px;height:16px;margin:auto;background:currentColor;-webkit-mask:var(--icon-image) center/contain no-repeat;mask:var(--icon-image) center/contain no-repeat}
-#composer .actions-col .attach-btn:hover{filter:none;color:var(--text);background:color-mix(in srgb,var(--bg-hover) 75%,transparent)}
-#composer .actions-col .attach-btn[hidden]{display:none}
-/* In a session the composer is one row: the text field (one line, growing with its text; fitPrompt sets its height)
-   and Cancel · Send at its bottom right. The key hint is in the placeholder there, so its row goes. */
-body.has-session #composer{flex-direction:row;align-items:flex-end;padding:10px}
-body.has-session #composer textarea{min-height:0}
-body.has-session #composeHint{display:none}
-body.has-session #composer .actions-col{flex-wrap:nowrap;flex-shrink:0}
 /* The model picker (the start page, and a fresh chain link: start_page.js syncModelPick): reads as a label, "host:model ▾", left of Start; a button under a drawn caret that opens a searchable list (model_picker.js). Its name ellipsizes within max-width. */
 #composer .actions-col .model-pick{order:0;position:relative;display:inline-block;max-width:min(50%,380px);height:28px;min-height:28px;padding:0 22px 0 8px;border-radius:8px;overflow:hidden;background:transparent;color:var(--text-muted);font-size:12px;line-height:28px;text-align:left;text-overflow:ellipsis;transition:background .12s ease,color .12s ease}
 #composer .actions-col .model-pick:hover,#composer .actions-col .model-pick[aria-expanded="true"]{filter:none;background:color-mix(in srgb,var(--bg-hover) 75%,transparent);color:var(--text-2)}
@@ -1115,9 +1039,9 @@ button.ws-row:hover:not(:disabled){filter:none;background:var(--bg-hover)}
 #infoBar #infoArchiveBtn:hover{color:var(--text);background:var(--bg-hover)}
 #infoBar #infoDeleteBtn{background:transparent;color:var(--text-muted);border:1px solid transparent}
 #infoBar #infoDeleteBtn:hover{color:var(--on-solid);background:var(--danger-bg);border-color:var(--danger-bg)}
-/* The composer folded away (composer_grip.js: the grip dragged down, Enter/Space on it): the info bar is the page's bottom edge.
+/* The composer folded away (composer_grip.js, composer.css): the info bar is the page's bottom edge; the plugins' setup row folds with it.
    Stop turn comes into the bar while folded and a turn runs. */
-body.has-session.composer-folded #composer,body.has-session.composer-folded #initRow{display:none}
+body.has-session.composer-folded #initRow{display:none}
 body.has-session.composer-folded #infoBar{border-top-color:transparent}
 #infoBar #infoCancelBtn{background:var(--bg-raised);color:var(--danger-text);border:1px solid color-mix(in srgb,var(--danger) 55%,transparent)}
 #infoBar #infoCancelBtn:hover:not(:disabled){color:var(--on-solid);background:var(--danger-bg);border-color:var(--danger-bg)}
@@ -1187,6 +1111,8 @@ body.has-session.composer-folded #infoBar{border-top-color:transparent}
 .participants-popover input,.participants-popover select{font:inherit;font-size:12.5px;color:var(--text);background:var(--bg-inset);border:1px solid var(--border-strong);border-radius:6px;padding:3px 7px}
 .pp-invite input[name=name]{flex:1;min-width:120px}
 .pp-invite input[name=cap]{width:52px}
+.pp-invite input[name=identity]{flex:1;min-width:160px}
+.pp-bound{color:var(--text-2)}
 .pp-invite .pp-invite-btn{margin-left:auto;background:var(--primary);border-color:var(--primary);color:var(--on-solid);font-weight:600}
 .pp-invite-done{display:flex;flex-direction:column;gap:6px;padding-top:6px;border-top:1px solid var(--border)}
 .pp-warning{font-size:12px;line-height:1.45;color:var(--warn-text);background:var(--warn-bg);border:1px solid var(--warn-border);border-radius:6px;padding:5px 8px}
@@ -1270,8 +1196,6 @@ body.has-session.composer-folded #infoBar{border-top-color:transparent}
 .ctx-pop-actions .ctx-pop-detach:hover{color:var(--danger-text);border-color:color-mix(in srgb,var(--danger) 55%,transparent)}
 /* Phones: the footer is one line; its meta scrolls sideways (all of it stays reachable). */
 @media(max-width:600px){
-  /* The key hint: cut off at this width, and phones have no Shift+Enter. */
-  #composeHint{display:none}
   #infoBar{flex-wrap:nowrap;align-items:center;gap:6px;padding:6px 10px 8px}
   /* No terminal on a phone to attach from. */
   #infoBar .meta .copy-attach{display:none}

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

@@ -12,7 +12,10 @@
 // leaves the bell as it is in a tab. With the bell on, the app also tidies
 // the device (syncDevice): it closes the pushed notifications whose
 // question or card isn't open any more and sets the app's badge, as chi
-// web sends no close push (WebKit's silent-push quota). There the bell
+// web sends no close push (WebKit's silent-push quota). The device's
+// notifications are every project's, so on a project's page (?dir=, or
+// the bare page on chi web's start project) the tidy-up follows a stream
+// of every session of its own (watchAll), not the page's. There the bell
 // opens the notifications sheet (push_devices.js): this device's switch,
 // the other devices with their "long turns done" switch and Remove.
 //
@@ -104,8 +107,12 @@ function defaultChannel() {
 // @param gateOptions passed to createNotifyGate (specs: schedule, now)
 // @param nav the navigator (serviceWorker; push.js pushSupported)
 // @param api (method, path, body) => Promise of chi web's JSON
-// @param scoped the page shows one project's sessions (?dir=): it never
-//   tidies the device, as it doesn't see the others'
+// @param scoped the page shows one project's sessions (?dir=, or the
+//   start project): the device's tidy-up follows every session through
+//   allEvents instead of the page's frames
+// @param allEvents (handlers, {onError, onClosed}) => {close()}: a stream
+//   of every session's hub frames (app.js: data.js openEvents without a
+//   dir); null: a project's page never tidies the device
 // @param now () => ms (the service worker update's spacing, presence's
 //   touch; specs)
 // @param sendPresence (body, leaving) => void (presenceSender's by default)
@@ -125,6 +132,7 @@ export function createNotifications({
   nav = globalThis.navigator,
   api = defaultApi,
   scoped = false,
+  allEvents = null,
   now = () => Date.now(),
   sendPresence = presenceSender({ nav, api }),
   every = (fn, ms) => setInterval(fn, ms),
@@ -132,6 +140,10 @@ export function createNotifications({
   devices = (hooks) => createPushDevices({ ...hooks, doc, win }),
 }) {
   let attention = initialAttentionState();
+  // A project's page with the bell on in the app: what is open across
+  // every project (the device's notifications are), from allEvents.
+  let allAttention = initialAttentionState();
+  let allStream = null;
   // Web Push in the Home Screen app: null until chi web says it pushes
   // ({reg, key, on}), and for good in a tab or without push.
   let push = null;
@@ -219,6 +231,7 @@ export function createNotifications({
         // for the next subscribe to replace.
         if (had) store(PUSH_DEVICE_KEY, null);
         push.on = false;
+        unwatchAll();
         setDeviceBadge(0);
       } else if (NotificationApi.permission === "granted" || (await NotificationApi.requestPermission()) === "granted") {
         const replaces = stored(PUSH_DEVICE_KEY);
@@ -229,6 +242,7 @@ export function createNotifications({
         if (answer?.id) store(PUSH_DEVICE_KEY, answer.id);
         push.on = true;
         api("POST", "/api/push/test", { endpoint: subscription.endpoint }).catch(() => {});
+        watchAll();
         syncDevice();
       }
     } catch (e) {
@@ -261,6 +275,7 @@ export function createNotifications({
       swCheckedAt = now();
       renderNotifyBtn();
     } catch (_) {}
+    watchAll();
     syncDevice();
   }
 
@@ -282,14 +297,48 @@ export function createNotifications({
     } catch (_) {}
   }
 
+  // What the device's tidy-up goes by: the page's own frames, or on a
+  // project's page every session's (allEvents).
+  const deviceAttention = () => (scoped ? allAttention : attention);
+
+  // A project's page in the app with the bell on: a stream of every
+  // session, for the tidy-up only (the page's list and badges stay the
+  // project's). One at a time; a stream that ended is opened again the
+  // next time the page comes back in front.
+  function watchAll() {
+    if (!scoped || !allEvents || !push?.on || allStream) return;
+    allAttention = initialAttentionState();
+    const frame = (type) => (data) => {
+      allAttention = trackAttention(allAttention, type, data).state;
+      if (doc.visibilityState === "visible") syncDevice();
+    };
+    const ended = () => {
+      allStream = null;
+      allAttention = initialAttentionState();
+    };
+    try {
+      allStream = allEvents({ snapshot: frame("snapshot"), session: frame("session"), session_gone: frame("session_gone") },
+        { onError: ended, onClosed: ended });
+    } catch (_) {
+      allStream = null;
+    }
+  }
+
+  function unwatchAll() {
+    try { allStream?.close(); } catch (_) {}
+    allStream = null;
+    allAttention = initialAttentionState();
+  }
+
   // The Home Screen app with the bell on: closes the pushed notifications
   // whose question or card isn't open (chi's own, chi:test, and a failed
   // or done turn's stay) and sets the
-  // app's badge. Never before the first snapshot (an empty byId would close
-  // them all) nor on a project's page (its byId lacks the others). One at a
-  // time; asked again meanwhile, it runs once more after.
+  // app's badge. Never before the first snapshot of every session (an
+  // empty byId would close them all): the page's own, or on a project's
+  // page allEvents'. One at a time; asked again meanwhile, it runs once
+  // more after.
   function syncDevice() {
-    if (!push || !push.on || scoped || !attention.seeded) return syncing;
+    if (!push || !push.on || !deviceAttention().seeded) return syncing;
     if (syncing) {
       syncAgain = true;
       return syncing;
@@ -297,7 +346,7 @@ export function createNotifications({
     syncing = (async () => {
       do {
         syncAgain = false;
-        const open = new Set(openPushKeys(attention.byId));
+        const open = new Set(openPushKeys(deviceAttention().byId));
         try {
           const shown = await push.reg.getNotifications();
           for (const n of shown || []) if (isWaitingTag(n.tag) && !open.has(n.tag)) n.close();
@@ -368,6 +417,7 @@ export function createNotifications({
   function backInFront() {
     if (doc.visibilityState !== "visible") return;
     clearBadge();
+    watchAll();
     syncDevice();
     updateWorker();
   }

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

@@ -6,10 +6,12 @@
 <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">
 <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 +109,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 +151,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 +181,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>