samagotchi 0.170.0 → 0.171.0

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

@@ -47,13 +47,14 @@ import { createSessionStore } from "./session_store.js";
 import { createFeatureGates } from "./feature_gates.js";
 import { stillOn } from "./latest.js";
 import { normalize, cantText } from "./format.js";
-import { turnHistoryNodes } from "./turn_block.js";
 import { elementOf } from "./turn_html.js";
 import { createBubbles } from "./bubbles.js";
 import { createCardsPlace } from "./cards_place.js";
 import { createStageView } from "./stage_view.js";
 import { createReloadCheck } from "./reload_check.js";
+import { placeCardsOffscreen } from "./cards_offscreen.js";
 import { createWorkingSet } from "./working_set_view.js";
+import { createWorkingSetPreview } from "./ws_reader.js";
 import { createObjectives } from "./objectives_wiring.js";
 import { trackWorkerUnavailable } from "./objectives_track.js";
 import { createGapClock } from "./time_gaps.js";
@@ -124,7 +125,11 @@ import { createSendTurn } from "./send_turn.js";
 import { createSessionSync } from "./session_sync.js";
 import { createSessionView } from "./session_view.js";
 import { createMarkdownTip } from "./markdown_tip.js";
+import { IMAGES_NOT_HERE } from "./images.js";
 import { withoutStaleParams } from "./stale_params.js";
+import { createViewer } from "./viewer.js";
+import { createParticipantMain } from "./participant_main.js";
+import { PARTICIPANT_REVISE_UNAVAILABLE, participantMayRevise, participantReviseUnavailable } from "./participant_revise.js";
 
 // A link's #code= (behind an auth proxy): traded for the cookie before
 // anything else runs; the page reloads without it.
@@ -141,6 +146,8 @@ const authLost = createAuthLost();
 onAuthLost(authLost);
 
 const $ = (s) => document.querySelector(s);
+// Who looks and what they may do (viewer.js): every owner-only control and call asks it.
+const viewer = createViewer(document.body);
 const topStripEl = $("#topStrip");
 const allListEl = $("#allList");
 const historyEl = $("#history");
@@ -150,36 +157,38 @@ const composerEl = $("#composer");
 // shows it; the tab's base ("Chi · <project>"), set by renderScope.
 const sessionTitleEl = $("#sessionTitle");
 const sessionTitleRowEl = $("#sessionTitleRow");
-const titleRenameBtn = $("#titleRenameBtn");
+const titleRenameBtn = viewer.control($("#titleRenameBtn"), "rename");
 let tabBase = null;
 let tabShown = null;
 const infoTextEl = $("#infoText");
 // The open session's attached context, in its own row of the session bar
 // (updateInfoBar redraws #infoText every tick; the chips keep their popover).
-const contextChips = createContextChips({
+const contextChips = viewer.can("context") ? createContextChips({
   el: $("#contextChips"),
   api: { list: listContext, show: getContext, detach: detachContext },
   toast: (text) => showToast(text),
-});
+}) : null;
 // The open session's ⚙ chip in the info bar, and its panel (thinking,
 // reasoning history, LLM context): a pick runs its command in the session's
 // worker.
-const settingsControl = createSettingsControl({
+const settingsControl = viewer.can("session_controls") ? createSettingsControl({
   el: infoTextEl,
   summaries: () => (store.selected ? { thinking: store.current.thinking, reasoningHistory: store.current.reasoningHistory,
                                        llmContext: store.current.llmContext } : null),
   session: () => store.selected,
   running: () => liveTurn.running,
   run: (line) => runSessionCommand(line),
-});
-// ⋯ on the info bar, and its menu: the chips and buttons the row has no room for.
-const moreSheet = createMoreSheet({ el: $("#infoBar"), button: $("#infoMoreBtn"), session: () => store.selected, hash: sessionHash });
+}) : null;
+// ⋯ on the info bar, and its menu: the chips and buttons the row has no room for; and the bar's other buttons.
+const [continueBtn, archiveBtn, stopBtn, deleteBtn, moreBtn] = viewer.controls(
+  ["#infoContinueBtn", "#infoArchiveBtn", "#infoStopBtn", "#infoDeleteBtn", "#infoMoreBtn"].map($), "session_controls");
+const moreSheet = moreBtn ? createMoreSheet({ el: $("#infoBar"), button: moreBtn, session: () => store.selected, hash: sessionHash }) : null;
 // The bar's fold (bar_fold.js): one row, what doesn't fit folded into ⋯. A
 // resize, the fonts or a zoom refolds it by itself: ⋯ follows on the redraw.
 const barFold = createBarFold({ barEl: $("#infoBar"), keysFor: barItemKeys, onChange: () => store.touch("infoBar") });
 // The open session's participants chip in the info bar, and its panel
 // (Invite, revoke, caps, the participant view).
-const participantsControl = createParticipantsControl({
+const participantsControl = viewer.can("participants_admin") ? createParticipantsControl({
   el: infoTextEl,
   session: () => store.selected,
   api: { list: listParticipants, invite: inviteParticipant, revoke: revokeParticipant, cap: setParticipantCap },
@@ -195,7 +204,7 @@ const participantsControl = createParticipantsControl({
   },
   onChange: () => store.touch("infoBar"),
   toast: (text, action, options) => showToast(text, action, options),
-});
+}) : null;
 // The start page's model picker, its ⚙ panel and 🧰 list with the override chips
 // (start_page.js); a fresh chain link's picker too.
 const startPage = createStartPage({
@@ -226,15 +235,14 @@ const markdownTip = createMarkdownTip($("#markdownTip"));
 // What the page renders that a notice may stand in for (the server's
 // Web::Capabilities, next to markdown_warning); a notice it names isn't
 // drawn (shownElsewhere). An older server sends none: every notice shows.
-// And what this viewer can do (editor: open a path in this machine's
-// editor; per request), with the editor's URL template (editor_url) next
-// to it: refs.js's actions read both (pageViewer).
+// And whether this request's viewer can open a path in this machine's
+// editor (per request), with the editor's URL template (editor_url) next
+// to it: refs.js's actions read both (refEditor).
 let pageCapabilities = {};
 let pageEditorUrl = null;
 const promptEl = $("#prompt");
 const actionBtn = $("#actionBtn");
-const attachBtn = $("#attachBtn");
-const attachInput = $("#attachInput");
+const [attachBtn, attachInput] = viewer.controls([$("#attachBtn"), $("#attachInput")], "images");
 const composeHintEl = $("#composeHint");
 
 // The open session (store.selected), its fields (store.current: session_state.js;
@@ -244,6 +252,12 @@ const composeHintEl = $("#composeHint");
 // the page's first draw); an input the store doesn't hold calls
 // store.touch(name).
 const store = createSessionStore({ initial: emptySessionState() });
+// An invited person's link: their session, name, bottom row and limits (participant_main.js).
+const participant = viewer.kind() === "participant" ? createParticipantMain({ body: document.body, topBar: $("#topBar"), infoBar: $("#infoBar"),
+  composer: $("#composer"), store, running: () => liveTurn.running, stage: { redraw: () => turnDom.redraw?.() }, read: (id) => getSession(id),
+  onClosed: () => reviseStacks?.decorate() }) : null;
+// Revise's worker gate and its words: a participant's own (participant_revise.js).
+const [reviseGate, reviseOffText] = participant ? [participantReviseUnavailable, PARTICIPANT_REVISE_UNAVAILABLE] : [reviseWorkerUnavailable, undefined];
 // The page actions the open session's worker must support (feature_gates.js),
 // the store's featureGates redraw: a gate's redraw runs when its answer
 // flips (a restart brings the feature, the worker goes). forgetSession and
@@ -258,7 +272,7 @@ const featureGates = createFeatureGates([
   // Revise on an answer and the composer's Revising chip (revise_stack.js).
   {
     name: "revise",
-    unavailable: (cur) => reviseWorkerUnavailable(cur.workerFeatures, cur.bridgeUp),
+    unavailable: (cur) => reviseGate(cur.workerFeatures, cur.bridgeUp),
     redraw: () => redrawRevise(),
   },
   // The objectives' Where are we? (objectives_track.js).
@@ -274,11 +288,11 @@ const openId = () => store.selected;
 let pendingReviseAnchor = null;
 let reviseStacks = null;
 const reviseChipEl = $("#reviseChip");
-const reviseUnavailable = () => reviseWorkerUnavailable(store.current.workerFeatures, store.current.bridgeUp);
+const reviseUnavailable = () => reviseGate(store.current.workerFeatures, store.current.bridgeUp);
 function redrawRevise() {
   if (reviseChipEl) {
     render(reviseChipTemplate(pendingReviseAnchor, {
-      unavailable: reviseUnavailable(),
+      unavailable: reviseUnavailable(), text: reviseOffText,
       onClear: () => { setReviseAnchor(null); focusPrompt(); },
     }), reviseChipEl);
     reviseChipEl.hidden = !pendingReviseAnchor;
@@ -314,7 +328,7 @@ let eventsControl = null;
 const shownTexts = createShownTexts();
 const markdownPlace = createMarkdownPlace({
   capabilities: () => pageCapabilities,
-  renderText,
+  renderText: viewer.can("render") ? renderText : null,
   roots: () => turnRoots(),
   touchedFiles,
   currentDir: () => store.current.dir,
@@ -331,14 +345,17 @@ const { renderMarkdown, pairRefsIn, linkRefsIn, applyFinalMarkdown } = markdownP
 // what each turn brought into context, in a rail in the stage, a footprint
 // under each finished turn and a "set N" chip in the mem chip's place
 // (working_set_view.js).
-const workingSet = document.body.dataset.workingSet === "1"
+const wsLine = viewer.can("session_controls") ? (line) => (store.selected ? sendCommand(store.selected, line, { clientId }) : null) : null;
+// What chi has of an item (the owner's): the rows' peek and the reader over the stage (ws_reader.js).
+const wsPreview = document.body.dataset.workingSet === "1" && viewer.can("working_set_items")
+  ? createWorkingSetPreview({ centerEl: $("#center"), session: () => store.selected, state: () => store.current, sendLine: wsLine }) : null;
+const workingSet = document.body.dataset.workingSet === "1" && viewer.can("working_set")
   ? createWorkingSet({
     historyEl, stageRoot: () => turnDom.root, state: () => store.current, session: () => store.selected, infoEl: infoTextEl,
-    onChange: () => store.touch("infoBar"), getWorkingSet,
-    // A drop or undrop from the list: the session's command, as typed.
-    sendLine: (line) => (store.selected ? sendCommand(store.selected, line, { clientId }) : null),
+    onChange: () => store.touch("infoBar"), getWorkingSet, sendLine: wsLine, peek: wsPreview?.peek ?? null, onTimeline: wsPreview?.open ?? null,
   })
   : null;
+wsPreview?.attach(workingSet);
 document.body.classList.toggle("working-set", !!workingSet);
 // The running turn's DOM: the stage pinned above the composer
 // (stage_view.js), the turn block (turn_block.js) in its cloud.
@@ -349,14 +366,15 @@ const turnDom = createStageView({
   sessionId: () => store.selected,
   // The stop-task button on a running task_wait, for a worker that has
   // the route (its sidecar features).
-  taskStop: createTaskStopper({ sessionId: () => store.selected, features: () => store.current.workerFeatures }),
+  taskStop: viewer.can("session_controls") ? createTaskStopper({ sessionId: () => store.selected, features: () => store.current.workerFeatures }) : null,
   dockEl: $("#dock"),
   centerEl: $("#center"),
   renderMarkdown,
   linkRefs: linkRefsIn,
   workingSet,
   // Stop turn in its status row (disabled until the request settles).
-  onCancel: () => handleCancel(),
+  onCancel: viewer.can("stop_any_turn") || viewer.can("stop_own_turn") ? () => handleCancel() : null,
+  canCancel: () => !participant || participant.canCancel(), ownerWait: () => participant?.ownerWait() ?? null,
   onHandedOff: (handed) => reloadCheck.handedOff(handed),
   // The quiet signal (stage_stall.js): the stream, what the turn waits on, a joiner's step clock.
   streamLive: () => sessionSync.streamLive(), timingNote: () => liveTurn.timing.note, serverGen: () => liveTurn.serverGen,
@@ -364,11 +382,13 @@ const turnDom = createStageView({
 // The opt-in reload check (web.reload_check): a handed-off turn against a
 // reload of it, the counts to chi web (reload_check.js).
 const reloadCheck = createReloadCheck({
-  enabled: () => document.body.dataset.reloadCheck === "1",
+  enabled: () => document.body.dataset.reloadCheck === "1" && viewer.can("session_controls"),
   sessionId: () => store.selected,
   running: () => liveTurn.running,
   read: (id) => getSession(id),
-  render: (data) => turnHistoryNodes(data.messages || [], normalizeTiming(data.timing), historyOpts(data)),
+  render: (data) => sessionView.reloadRender(data),
+  place: (holder, entries) => placeCardsOffscreen(holder, entries, { capabilities: pageCapabilities, answers: viewer.can("answer_cards") }),
+  capabilities: () => pageCapabilities,
   post: (id, body) => api(`/api/sessions/${id}/reload_check`, { method: "POST", body: JSON.stringify(body) }),
 });
 // The history's bottom reserve and the toast's place follow the composer
@@ -388,7 +408,7 @@ function turnRoots() {
   return [historyEl, turnDom.root];
 }
 const systemOneWrongAction = createSystemOneWrongAction({ sessionId: () => store.selected });
-turnRoots().forEach((root) => root.addEventListener("click", systemOneWrongAction));
+if (viewer.can("answer_cards")) turnRoots().forEach((root) => root.addEventListener("click", systemOneWrongAction));
 function findInTurnRoots(selector) {
   return turnRoots().flatMap((root) => [...root.querySelectorAll(selector)]);
 }
@@ -425,10 +445,11 @@ const deliveryControl = createDeliveryControl({
       serverGen: liveTurn.serverGen,
       canQueue: store.current.workerFeatures.includes("delivery"),
       model: store.current.model,
-      participantTurn: !!liveTurn.participantTurn,
+      participantTurn: !!liveTurn.participantTurn, viewerTurn: participant?.deliveryTurn() ?? null,
     };
   },
   composerEmpty: () => !composer.hasDraft(),
+  history: viewer.can("prompt_history"),
   send: (delivery) => handleSendTurn({ delivery }),
   session: () => store.selected,
 });
@@ -445,6 +466,7 @@ const objectives = createObjectives({
 const questionCards = createQuestionCards({
   sessionId: () => store.selected,
   clientId,
+  answers: viewer.can("answer_cards"),
   place: (card) => appendToHistory(card),
   isNearBottom: () => isNearBottom(),
   scrollToEnd: () => { historyEl.scrollTop = historyEl.scrollHeight; },
@@ -498,9 +520,10 @@ turnRoots().forEach((root) => root.addEventListener("click", cards.onCardAction)
 // the ones made later come in as getters, and each reaches the other lazily.
 const sessionView = createSessionView({
   store, historyEl, getSession,
-  liveTurn, turnDom, questionCards, shownTexts, objectives, featureGates, markdownTip, workingSet, gapClock,
+  liveTurn, turnDom, questionCards, shownTexts, objectives, featureGates, markdownTip, workingSet, wsPreview, gapClock,
   bubbles, cards, markdown: markdownPlace,
   capabilities: () => pageCapabilities,
+  can: viewer.can,
   page: {
     setReviseAnchor, renderInitRow, setMarkdownWarning, setCapabilities, findInTurnRoots, appendToHistory,
     setTurnRunning, mergeTurnTiming, applySessionPayload, turnEndStatus, replaceSelectedCard,
@@ -510,7 +533,7 @@ const sessionView = createSessionView({
     commandList: () => commandList, initTasks: () => initTasks, resetTurnView: () => sessionSync.resetTurnView(),
   },
 });
-const { forgetSession, historyOpts, readTurnEnd, endTurnView } = sessionView;
+const { forgetSession, readTurnEnd, endTurnView } = sessionView;
 const sessionSync = createSessionSync({
   store, historyEl, emptyEl, getSession, openStream,
   liveTurn, turnDom, questionCards, contextChips, participantsControl,
@@ -555,9 +578,10 @@ function sweepFoldsOnce() {
 // The list by fetching: the fallback when there is no events stream (a
 // chi web without a hub, or ?dir the server refused: the 400 is read here).
 async function refresh() {
+  if (!viewer.can("sessions")) return;
   try {
     store.update({ sessions: await listSessions("updated_at", "desc", { dir: scope.dir }) });
-    notifications.noticeList(store.sessions);
+    notifications?.noticeList(store.sessions);
     sweepFoldsOnce();
   } catch (e) {
     if (e.status !== 400 || !scope.dir) throw e;
@@ -571,6 +595,7 @@ async function refresh() {
 // (re)connect, then upserts and removals. The selected session's owner and
 // worker follow its events (a new worker's bridge_up reconnects the stream).
 function openSessionEvents() {
+  if (!viewer.can("sessions")) return;
   eventsControl = openEvents({
     // The list redraws the lists and the bar (its children chip, its chain's
     // ← → links): store.update({sessions}).
@@ -578,19 +603,19 @@ function openSessionEvents() {
       versionNotices.notice(data);
       versionNotices.reconnected(data.version);
       if (data.chi_update) versionNotices.frame(data.chi_update, { snapshot: true });
-      notifications.noticeSessions("snapshot", data);
+      notifications?.noticeSessions("snapshot", data);
       store.update({ sessions: applySessionEvent(store.sessions, "snapshot", data) });
       sweepFoldsOnce();
       const sess = store.sessions.find((s) => s.id === store.selected);
       if (sess) followSelectedSession(sess);
     }),
     session: (data) => store.batch(() => {
-      notifications.noticeSessions("session", data);
+      notifications?.noticeSessions("session", data);
       store.update({ sessions: applySessionEvent(store.sessions, "session", data) });
       if (data.session && data.session.id === store.selected) followSelectedSession(data.session);
     }),
     session_gone: (data) => {
-      notifications.noticeSessions("session_gone", data);
+      notifications?.noticeSessions("session_gone", data);
       lists.forget(data.id);
       store.update({ sessions: applySessionEvent(store.sessions, "session_gone", data) });
       leaveGoneSession(data.id, "deleted");
@@ -621,17 +646,19 @@ const EVENTS_REOPEN_MS = 3000;
 // to the same place without ?dir); "all projects" otherwise, with where a
 // new session starts on the start page.
 function renderScope() {
-  const el = $("#scope");
-  render(scopeTemplate(scope, { error: scopeError, where: () => ({ hash: location.hash }) }), el);
-  el.hidden = false;
+  const el = viewer.control($("#scope"), "sessions");
+  if (el) {
+    render(scopeTemplate(scope, { error: scopeError, where: () => ({ hash: location.hash }) }), el);
+    el.hidden = false;
+  }
   // The tab: "<session title> · Chi · <project>" (updateSessionTitle).
   tabBase = scope.projectName ? `Chi · ${scope.projectName}` : "Chi";
   updateSessionTitle();
 }
 
-createProjectPicker({
-  el: $("#scope"), scope, scopeError: () => scopeError, api,
-});
+if (viewer.can("sessions")) createProjectPicker({ el: $("#scope"), scope, scopeError: () => scopeError, api });
+// The strip, its pill and grip: the session list's (lists_view.js draws into the hidden strip all the same).
+viewer.controls([topStripEl, $("#stripStatus"), $("#stripGrip")], "sessions");
 
 // The session lists (lists_view.js): the strip, all sessions, their cards,
 // select mode, the family and chain popovers.
@@ -713,7 +740,7 @@ const rename = createRename({
   onClose: () => queueMicrotask(() => lists.catchUp()),
   run: (line) => runSessionCommand(line),
 });
-titleRenameBtn.addEventListener("click", () => rename.open());
+titleRenameBtn?.addEventListener("click", () => rename.open());
 document.addEventListener("scroll", () => rename.reposition(), true);
 window.addEventListener("resize", () => rename.reposition());
 
@@ -723,7 +750,7 @@ const { confirmDelete, leaveGoneSession, continueSelected, archiveOne, setArchiv
 // leaves it. Opened from the page, it closes with history.back().
 let allViewPushed = false;
 function allViewOpen() {
-  return location.hash === ALL_SESSIONS_HASH;
+  return !participant && location.hash === ALL_SESSIONS_HASH;
 }
 function openAllView() {
   if (allViewOpen()) return;
@@ -763,7 +790,8 @@ function setSessionHash(id) {
 function selectFromHash() {
   const claim = claimFromHash(location.hash);
   if (claim) ownerClaim.pending(claim);
-  const intent = hashIntent(location.hash, { selected: store.selected, claim });
+  // A participant's page has one session, whatever the hash names.
+  const intent = participant ? { kind: "session", id: participant.sessionId } : hashIntent(location.hash, { selected: store.selected, claim });
   if (intent.kind === "session" && intent.id !== store.selected) select(intent.id);
   else if (claim) ownerClaim.showPending();
   else if (intent.kind === "start") clearSelection();
@@ -771,7 +799,7 @@ function selectFromHash() {
 // The page's claim links (owner_claim.js): one opened here, once drawn, and
 // annotate's Copy link.
 const ownerClaim = createOwnerClaim({
-  historyEl, store, claimTarget: () => participantsControl.claimTarget(),
+  historyEl, store, claimTarget: () => participantsControl?.claimTarget() ?? null,
   toast: (...args) => showToast(...args), copyText, allViewOpen, home: document.body.dataset.home || "",
 });
 function applyView() {
@@ -807,7 +835,7 @@ window.addEventListener("hashchange", () => {
 const composerMode = createComposerMode({
   els: { body: document.body, prompt: promptEl, hint: composeHintEl, button: actionBtn, attach: attachBtn, empty: emptyEl,
          history: historyEl },
-  store, liveTurn, startPage, deliveryControl, fitPrompt, placeToast,
+  store, liveTurn, startPage, deliveryControl, fitPrompt, placeToast, steers: () => !participant || participant.deliveryTurn().steer,
 });
 
 function setTurnRunning(running) {
@@ -863,8 +891,8 @@ function clearSelection() {
     store.update({ selected: null });
     setSessionHash(null);
     forgetSession();
-    contextChips.clear();
-    participantsControl.load(null);
+    contextChips?.clear();
+    participantsControl?.load(null);
   });
   focusPrompt();
 }
@@ -901,22 +929,26 @@ function setMarkdownWarning(warning) {
   markdownWarningEl.hidden = false;
 }
 
-// Both from one payload, together; the body's has-editor class follows.
-function setCapabilities(capabilities, editorUrl) {
+// Both from one payload, together; the body's has-editor class follows. A
+// show's viewer narrows the page's (viewer.js); none read (forgetSession) is the stamp's again.
+function setCapabilities(capabilities, editorUrl, shownViewer = null) {
   pageCapabilities = capabilities && typeof capabilities === "object" ? capabilities : {};
   pageEditorUrl = pageCapabilities.editor === true && typeof editorUrl === "string" && editorUrl ? editorUrl : null;
   document.body.classList.toggle("has-editor", pageEditorUrl !== null);
+  if (shownViewer) viewer.update(shownViewer);
+  else if (!capabilities) viewer.reset();
+  participant?.shown(shownViewer);
 }
 
-// What this viewer can do with a ref (refs.js REF_ACTIONS).
-function pageViewer() {
+// Where this page can open a ref (refs.js REF_ACTIONS): not the viewer's capabilities (viewer.js).
+function refEditor() {
   return { editor: pageCapabilities.editor === true, editorUrl: pageEditorUrl };
 }
 
 // Refs anywhere on the page (a tool row's file, its diff lines, an
 // answer's path:line): one listener set; "Copy path" says so in a toast.
-installRefClicks(document.body, pageViewer, {
-  copy: async (text) => showToast((await copyText(text)) ? "Path copied" : "Couldn't copy the path"),
+installRefClicks(document.body, refEditor, {
+  copy: async (text) => showToast((await copyText(text)) ? "Path copied" : "Couldn't copy the path"), whatChiHas: wsPreview?.whatChiHas ?? null,
 });
 
 // Sticky-follow scroll: only auto-scroll to the bottom while the user is
@@ -963,7 +995,7 @@ const ownerVerify = createOwnerVerify({
 
 // Apply: the owner's Apply turn into the composer, after what is typed
 // there; never sent from here.
-historyEl.addEventListener("click", async (e) => {
+if (viewer.can("apply")) historyEl.addEventListener("click", async (e) => {
   const button = e.target.closest(".review-apply-btn");
   if (!button || !store.selected) return;
   const id = store.selected;
@@ -992,15 +1024,12 @@ function sessionWaits() {
 }
 function updateInfoBar() {
   annotateBar?.refresh();
+  if (participant) return [participant.drawBar(), updateSessionTitle()];
   const { buttons, bar } = sessionBar({
     id: store.selected, state: store.current, sessions: store.sessions, versions: versionNotices.versions(), cardTitle: (s) => lists.cardTitle(s),
     continuing: sessionActions.continuing, restarting: versionNotices.restarting, streaming: sessionSync.hasStream(), running: liveTurn.running, waiting: sessionWaits(),
-    workingSet: workingSet ? workingSet.chip() : undefined, participants: participantsControl.chip(),
+    workingSet: workingSet ? workingSet.chip() : undefined, participants: participantsControl?.chip() ?? null,
   });
-  const stopBtn = document.getElementById("infoStopBtn");
-  const deleteBtn = document.getElementById("infoDeleteBtn");
-  const archiveBtn = document.getElementById("infoArchiveBtn");
-  const continueBtn = document.getElementById("infoContinueBtn");
   if (continueBtn) {
     continueBtn.style.display = buttons.continue.shown ? "" : "none";
     continueBtn.disabled = buttons.continue.disabled;
@@ -1016,6 +1045,8 @@ function updateInfoBar() {
     archiveBtn.title = buttons.archive.title;
   }
   if (stopBtn) stopBtn.style.display = buttons.stop.shown ? "" : "none";
+  // The ⚙ chip only with its panel (session_controls, viewer.js).
+  if (bar && !settingsControl) bar.settings = null;
   drawFoldControls();
   // No session: the start page hides the info bar (the storage path is on
   // #/sessions). The session clock ticks every second while a turn runs:
@@ -1023,7 +1054,7 @@ function updateInfoBar() {
   // mid-press) stay.
   renderInfoBar(infoTextEl, bar);
   const { folded } = barFold.update({ bar, buttons });
-  moreSheet.update({ bar, buttons, folded });
+  moreSheet?.update({ bar, buttons, folded });
   updateSessionTitle();
   // A fresh link's picker follows what the bar follows: its model, its
   // owner, a next link continued from elsewhere.
@@ -1035,6 +1066,7 @@ function updateInfoBar() {
 // browser tab names it too. It follows the card's (openTitle): a chain link
 // reads its card's title (cardTitle), whatever opener it was sent.
 function shownTitle() {
+  if (participant) return participant.title();
   const shown = store.selected ? lists.sessionsById().get(store.selected) : null;
   const first = store.current.firstPreview || "";
   const raw = !store.selected ? "" : openTitle({ shown, first, cardTitle: (s) => lists.cardTitle(s) });
@@ -1053,13 +1085,14 @@ function updateSessionTitle() {
   if (sessionTitleEl.textContent !== text) sessionTitleEl.textContent = text;
   if (sessionTitleRowEl.hidden !== !text) sessionTitleRowEl.hidden = !text;
   const renamable = !!text && renameShown(store.current.owner);
-  if (titleRenameBtn.hidden !== !renamable) titleRenameBtn.hidden = !renamable;
+  if (titleRenameBtn && titleRenameBtn.hidden !== !renamable) titleRenameBtn.hidden = !renamable;
   const tip = text ? title : "";
   if (sessionTitleEl.title !== tip) sessionTitleEl.title = tip;
   const tab = tabBase === null ? null : tabTitle({ title, base: tabBase });
   if (tab !== null && tab !== tabShown) {
     tabShown = tab;
-    notifications.setBaseTitle(tab);
+    if (notifications) notifications.setBaseTitle(tab);
+    else document.title = tab;
   }
   rename.follow(store.selected);
   rename.reposition();
@@ -1139,7 +1172,7 @@ function turnEndStatus(data) {
 
 // The stream's event handlers (stream_handlers.js); renderSessionView
 // replays a snapshot through them too.
-const streamHandlers = createStreamHandlers({
+const streamHandlers = (participant ? participant.wrapHandlers : (handlers) => handlers)(createStreamHandlers({
   selected: () => store.selected,
   store,
   clientId,
@@ -1152,7 +1185,7 @@ const streamHandlers = createStreamHandlers({
   contextChips,
   workingSet,
   participantsControl,
-  placeApply,
+  placeApply: viewer.can("apply") ? placeApply : null,
   placeVerdict: ownerVerify.placeVerdict,
   restoreVerify: (anchor) => ownerVerify.set(anchor),
   restoreRevise,
@@ -1191,7 +1224,7 @@ const streamHandlers = createStreamHandlers({
   syncModelPick: startPage.commandRan,
   objectivesUpdated: (data) => objectives.update(data),
   cardActionFailed: cards.actionFailed,
-});
+}));
 
 async function refreshTimingFromSession() {
   if (!store.selected) return;
@@ -1216,7 +1249,7 @@ function addCreatedSession(created) {
 
 // /model, !ls … from the composer, and a control's command (the llm ctx
 // and thinking chips): composer.js.
-const composerCommands = createComposerCommands({
+const composerCommands = viewer.can("session_controls") ? createComposerCommands({
   session: () => store.selected,
   clientId,
   sendCommand,
@@ -1239,7 +1272,7 @@ const composerCommands = createComposerCommands({
       focusPrompt({ open: false });
     },
   },
-});
+}) : null;
 
 // The composer's send (send_turn.js): a line into the open session, or a
 // new session first on the start page.
@@ -1283,7 +1316,8 @@ const sendTurnControl = createSendTurn({
   followWokenWorker,
   refreshHistory,
   leaveGoneSession,
-  runCommand: (command) => composerCommands.send(command),
+  closesOn: participant?.refused ?? null,
+  runCommand: composerCommands ? (command) => composerCommands.send(command) : null,
   toast: showToast,
 });
 // +delivery+: the composer's choice for a running turn (Alt+Enter: queue;
@@ -1293,7 +1327,7 @@ function handleSendTurn({ delivery = null } = {}) {
 }
 
 function runSessionCommand(line) {
-  return composerCommands.run(line);
+  return composerCommands?.run(line);
 }
 
 function clearComposer() {
@@ -1321,7 +1355,7 @@ async function handleCancel() {
 // session (from all sessions too).
 // The typed draft stays in the composer: paste in a session, then + new session
 // starts from it (with the model picker). clearSelection leaves #prompt alone.
-$("#newBtn").addEventListener("click", () => {
+viewer.control($("#newBtn"), "sessions")?.addEventListener("click", () => {
   if (allViewOpen()) leaveAllView("");
   clearSelection();
   startPage.loadModels({ asked: true });
@@ -1347,7 +1381,8 @@ const composer = mountComposer({
   toast: (text) => showToast(text),
   onWrite: () => noteDraft(),
   // ↑/↓: the prompt history shared with the TUI.
-  loadHistory: fetchHistory,
+  loadHistory: viewer.can("prompt_history") ? fetchHistory : null,
+  imagesOff: viewer.can("images") ? null : IMAGES_NOT_HERE,
   // Alt/Option+Enter: queued for after the running turn (D6), only to a
   // worker that queues (else it would steer): the text stays, a note says why.
   send: ({ queue }) => {
@@ -1412,19 +1447,19 @@ document.addEventListener("keydown", (e) => {
 const commandList = createCommandList({
   list: $("#commandList"),
   prompt: promptEl,
-  commands: () => (store.selected && store.current.owner !== "tui" ? store.current.commands : []),
+  commands: () => (viewer.can("session_controls") && store.selected && store.current.owner !== "tui" ? store.current.commands : []),
   afterPick: () => {
     noteDraft();
     fitPrompt();
   },
 });
 
-$("#infoStopBtn").addEventListener("click", () => sessionActions.stopSelected());
-$("#infoDeleteBtn").addEventListener("click", () => {
+stopBtn?.addEventListener("click", () => sessionActions.stopSelected());
+deleteBtn?.addEventListener("click", () => {
   if (store.selected) confirmDelete(store.selected);
 });
-$("#infoContinueBtn").addEventListener("click", () => continueSelected());
-$("#infoArchiveBtn").addEventListener("click", () => sessionActions.toggleArchiveSelected());
+continueBtn?.addEventListener("click", () => continueSelected());
+archiveBtn?.addEventListener("click", () => sessionActions.toggleArchiveSelected());
 
 // The new link's composer: the opener (openerText: the previous link's own,
 // else the constant). A draft written in this session (or the new link, or
@@ -1457,6 +1492,7 @@ function restoreDraft(draft, opener) {
 const toasts = createToasts({ el: $("#toast"), onChange: placeToast });
 // chi's versions, the update sheet and the worker Restart (version_notices.js).
 // After toasts: openSessionEvents, its first caller, runs at boot.
+if (participant) onAuthLost(participant.linkEnded);
 const versionNotices = createVersionNotices({
   store, toasts, dialog: $("#updateSheet"), loadedVersion: document.body.dataset.version,
   api: { updateChi, restartWorkers, restartWeb, restartSession },
@@ -1515,7 +1551,7 @@ turnRoots().forEach((root) => installCopy(root));
 // chi-ui blocks (inline_widgets.js) are a core drawer, ahead of the bundles'
 // renderers; a picks' Fill reply only fills the composer.
 const widgets = createWidgetDrawer({ roots: turnRoots(), composerText: () => promptEl.value, fillComposer });
-createBlockHost({ roots: turnRoots(), sessionId: () => store.selected, drawers: [widgets] });
+createBlockHost({ roots: turnRoots(), sessionId: () => store.selected, drawers: [widgets], renderers: viewer.can("block_renderers") });
 // A steps block, a thinking block and the recap open and close by hand
 // with their height animated (details_motion.js), in the history and on
 // the stage.
@@ -1528,34 +1564,34 @@ installAnswerFold({
 });
 // Revise stacks (revise_stack.js): the superseded versions fold to stubs,
 // the top answer gets its version chip, a final answer its Revise button.
-reviseStacks = installReviseStacks({
+reviseStacks = viewer.can("revise") || viewer.can("revise_own_turn") ? installReviseStacks({
   historyEl,
   sessionId: () => store.selected,
   projectRoot: () => store.sessions.find((s) => s.id === store.selected)?.project_root ?? null,
   running: () => (liveTurn.running ? { turnId: liveTurn.timing.turnId || null } : null),
   verifyTurn: (turnId) => (store.current.verdicts || []).some((v) => v.check_turn_id === turnId),
-  unavailable: reviseUnavailable,
-  armed: () => pendingReviseAnchor?.turn_id ?? null,
+  unavailable: reviseUnavailable, unavailableText: reviseOffText,
+  armed: () => pendingReviseAnchor?.turn_id ?? null, mayRevise: participant ? participantMayRevise(participant.closed) : undefined,
   onRevise: (anchor) => {
     setReviseAnchor(anchor);
     openForVisit();
     focusPrompt();
   },
-});
+}) : null;
 
 // Notifications (notifications.js): an OS notification and a title count
 // when a session needs the user while this tab is not in front. On a
 // project's page the Home Screen app's device tidy-up still covers every
 // project: it gets a stream of every session of its own (allEvents).
-const notifications = createNotifications({
+const notifications = viewer.can("push") ? createNotifications({
   button: $("#notifyBtn"),
   scoped: !!scope.dir,
   allEvents: (handlers, opts) => openEvents(handlers, opts),
-});
+}) : null;
 
 // The strip hidden or shown (strip_hidden.js): its grip, the saved choice and
 // the short window's rule; applied now.
-createStripHidden({
+if (viewer.can("sessions")) createStripHidden({
   gripEl: $("#stripGrip"), body: document.body, onApply: () => updateSessionTitle(),
   closeFamilyPop: () => lists.familyPop.close(),
 });
@@ -1575,7 +1611,7 @@ document.addEventListener("keydown", (e) => {
 // before it (none at load) would redraw nothing.
 store.on("lists", () => lists.render());
 store.on("paintActive", () => lists.paintActive());
-store.on("settingsPanel", () => settingsControl.refresh());
+store.on("settingsPanel", () => settingsControl?.refresh());
 // The working set's list offers pin only under forget.
 store.on("workingSetStrategy", () => workingSet?.strategyChanged());
 store.on("featureGates", () => featureGates.check(store.current));
@@ -1583,7 +1619,7 @@ store.on("composer", composerMode.update);
 store.on("composer", () => objectives.redraw());
 // The answers' Revise buttons follow liveTurn.running too (none on the
 // running turn's answer), which touches the composer.
-store.on("composer", () => reviseStacks.decorate());
+store.on("composer", () => reviseStacks?.decorate());
 store.on("infoBar", updateInfoBar);
 
 applyView();
@@ -1599,7 +1635,7 @@ store.batch(() => {
   store.touch("composer");
   store.touch("infoBar");
 });
-startPage.loadModels();
+if (viewer.can("models")) startPage.loadModels();
 // The list: the hub's stream when the browser has EventSource, else fetched.
 if (typeof globalThis.EventSource === "function") openSessionEvents();
 else refresh();