@robota-sdk/agent-ui-web 3.2.1 → 3.3.1

package/src/components/HelpSheet.tsx

@@ -7,7 +7,7 @@ import { Dialog } from './Dialog.js';
 
 import type { TCommandCatalog } from '../hooks/session-client-types.js';
 
-/** One keyboard shortcut this surface answers — #3282 §4e. */
+/** One keyboard shortcut this surface answers */
 interface IShortcut {
   readonly keys: string;
   readonly description: string;
@@ -22,7 +22,7 @@ const SHORTCUTS: readonly IShortcut[] = [
 ];
 
 /**
- * The GUI's Help sheet (#3282 §4e), a `Dialog` opened by `/help` — client-only: `useSessionClient.ts`'s
+ * The GUI's Help sheet, a `Dialog` opened by `/help` — client-only: `useSessionClient.ts`'s
  * `send` catches `/help` before it ever reaches the session and opens this instead, so there is no
  * round trip and nothing terminal-style to replace it with. It lists the same commands and skills the
  * `/` menu offers (`commandMenuFor`, unfiltered by any query — an excluded command has no row here

package/src/components/PermissionPrompt.tsx

@@ -19,19 +19,19 @@ import type { TActionResponse } from '@robota-sdk/agent-interface-transport';
 import type { TDriverId } from '@robota-sdk/agent-interface-session';
 
 /**
- * Renders the owner's pending permission/ask prompts (REMOTE-007/009). Under local == remote the paired
+ * Renders the owner's pending permission/ask prompts. Under local == remote the paired
  * browser owner answers its OWN prompts; the first pending prompt is shown. A gated tool call blocks
  * until answered, so this is on the critical path — not decorative.
  *
  * `modal` covers the page; `dock` sits above the composer, as desktop agent apps place a pending
  * question next to where the answer is typed. Once armed and focused, its keys answer it: 1–9 picks
  * an option, Esc cancels a question or denies a permission — but it never takes that focus away from
- * a field the person is typing in (#3280 §1). A click on a button always answers at once. An ask whose
+ * a field the person is typing in. A click on a button always answers at once. An ask whose
  * request sets `allowFreeText` also shows a text field (masked when `masked` is set); Enter there
- * submits it, and its own keys never reach the prompt's shortcuts (#3280 §3). The field's typed value
+ * submits it, and its own keys never reach the prompt's shortcuts. The field's typed value
  * lives only in `FreeTextField`, keyed by `prompt.id`: a cancelled or answered prompt's text can
  * never reach the next prompt's render, masked or not, because the field is a fresh component
- * instance rather than a value carried over in this component's own state (#3280 §3 follow-up).
+ * instance rather than a value carried over in this component's own state.
  *
  * An ask whose `maxSelect` is above 1 is a multi-select: each option is a toggle (a click or 1–9 ticks
  * it, nothing answers yet), and Submit — or Enter at the prompt, once the selection is allowed —
@@ -43,7 +43,7 @@ interface IPermissionPromptProps {
   prompts: readonly TPendingPrompt[];
   onAnswerPermission: (id: string, result: boolean) => void;
   onAnswerAsk: (id: string, response: TActionResponse) => void;
-  /** This connection's own driver id (§3289 §3): a prompt raised by its own turn shows no requester. */
+  /** This connection's own driver id: a prompt raised by its own turn shows no requester. */
   ownDriverId?: TDriverId | null;
   layout?: 'modal' | 'dock';
   /** How long a new prompt waits before its keys answer it; tests pass their own. */
@@ -72,7 +72,7 @@ function isEditableElement(element: Element | null): boolean {
 }
 
 /**
- * #3282 §2 (part 2) — the one destructive option in the provider profile action menu (the ask built
+ * The one destructive option in the provider profile action menu (the ask built
  * by `askProviderProfileAction` in `agent-command`'s `provider-command-profile.ts`, `request.id`
  * `'provider-profile-action'`): "Delete" answers to no digit and renders apart from Switch/Edit/Test/
  * Duplicate, styled destructive — the exact audited bug ("Delete looks the same as Switch, answers to
@@ -132,7 +132,7 @@ export function PermissionPrompt({
   const promptId = prompt?.id;
   const containerRef = useRef<HTMLDivElement>(null);
   const fieldRef = useRef<HTMLInputElement>(null);
-  // A question with a text field (#3280 §3): the field is the prompt's primary control, so focus goes
+  // A question with a text field: the field is the prompt's primary control, so focus goes
   // there instead of the container wherever this component would otherwise focus the container itself.
   const hasFreeText = prompt?.kind === 'ask' && prompt.request.allowFreeText === true;
   const [armedId, setArmedId] = useState<string | undefined>(undefined);
@@ -162,8 +162,8 @@ export function PermissionPrompt({
   // Answering one prompt renders the next into the same buttons, so a button focused to answer the
   // last one would take Enter, Space or a held key as an answer to this one. Focus goes back to the
   // prompt itself, whose keys wait for the prompt to arm. A reused button is still there to find this
-  // way — but the free-text field is its own component, remounted (not updated) for the new prompt.id
-  // (#3280 §3 follow-up), and removing a focused DOM node drops focus to <body> as an intrinsic side
+  // way — but the free-text field is its own component, remounted (not updated) for the new prompt.id,
+  // and removing a focused DOM node drops focus to <body> as an intrinsic side
   // effect, before this effect ever runs. `pendingFocusReturnRef` (set at answer time, and not yet
   // cleared — the effect that clears it is a passive one, ordered after this layout effect) still
   // remembers that focus was in this prompt, so that case is reclaimed too.
@@ -178,7 +178,7 @@ export function PermissionPrompt({
     }
   }, [promptId]);
   // Once armed the prompt takes focus, so its keys answer it rather than type wherever the person
-  // already is — UNLESS that is an editable field, whose keystrokes must never be stolen (#3280 §1).
+  // already is — UNLESS that is an editable field, whose keystrokes must never be stolen.
   useEffect(() => {
     if (!armed) return;
     if (isEditableElement(document.activeElement)) return;
@@ -199,8 +199,8 @@ export function PermissionPrompt({
   }, [promptId, onFocusReturn]);
   if (!prompt) return null;
 
-  // #3282 §2 (part 2): the provider-delete confirmation (`buildProviderDelete` in agent-command's
-  // `provider-command-profile-lifecycle.ts`) is now built on the shared `ConfirmDialog` (#3331)
+  // The provider-delete confirmation (`buildProviderDelete` in agent-command's
+  // `provider-command-profile-lifecycle.ts`) is now built on the shared `ConfirmDialog`
   // instead of the generic ask grid — a destructive-styled "Delete", Cancel focused by default, and
   // no accidental backdrop-click dismissal. `confirmAction`'s own `CONFIRM_YES`/`CONFIRM_NO` values
   // ('yes'/'no', from `@robota-sdk/agent-core`) are answered directly; this bypasses the rest of this
@@ -220,7 +220,7 @@ export function PermissionPrompt({
     );
   }
 
-  // REMOTE-014 E5 (display-only): the prompt belongs to the driver whose turn raised it. Shown so the owner
+  // Display-only: the prompt belongs to the driver whose turn raised it. Shown so the owner
   // can tell a co-driver's tool-gate from their own — it NEVER changes who is authorized to answer (owner).
   const requesterLabel =
     prompt.requesterDriverId && !isSameSurface(prompt.requesterDriverId, ownDriverId)
@@ -301,7 +301,7 @@ export function PermissionPrompt({
       if (index < 2) answerPermission(prompt.id, index === 0);
       return;
     }
-    // #3282 §2: a destructive option (Delete) is excluded from the digit-answerable list entirely —
+    // A destructive option (Delete) is excluded from the digit-answerable list entirely —
     // no stray digit, including the one it happened to render at before this menu was reordered, can
     // ever answer it.
     const digitOptions = (prompt.request.options ?? []).filter(
@@ -313,7 +313,7 @@ export function PermissionPrompt({
     if (multi) toggleOption(option.value);
     else answerAsk(prompt.id, { type: 'answer', values: [option.value] });
   };
-  // #3288: an Edit/Write request carries the same server-built diff `tool_end` would show.
+  // An Edit/Write request carries the same server-built diff `tool_end` would show.
   const hasDiff = prompt.kind === 'permission' && (prompt.diffLines?.length ?? 0) > 0;
   const shellCommand =
     prompt.kind === 'permission' && typeof prompt.toolArgs['command'] === 'string'
@@ -322,7 +322,7 @@ export function PermissionPrompt({
   const isShellCommand = prompt.kind === 'permission' && prompt.toolName === 'Bash' && shellCommand !== undefined;
   const askRequestId = prompt.kind === 'ask' ? prompt.request.id : undefined;
   const askOptions = prompt.kind === 'ask' ? (prompt.request.options ?? []) : [];
-  // #3282 §2: Delete (in the provider profile action menu) renders apart from the rest, destructive-
+  // Delete (in the provider profile action menu) renders apart from the rest, destructive-
   // styled and with no digit shortcut — every other ask's options are unaffected (`destructiveAskOption`
   // stays undefined, so `primaryAskOptions` is just `askOptions`, same order, same shortcuts).
   const destructiveAskOption = askOptions.find((opt) => isDestructiveAskOption(askRequestId, opt.value));
@@ -381,10 +381,10 @@ export function PermissionPrompt({
                     </>
                   )}
                 </p>
-                {/* #3288 §2: an Edit/Write request with a server-built diff preview shows "Edit
+                {/* An Edit/Write request with a server-built diff preview shows "Edit
                     <path>" (or "Background agent <label> wants to edit <path>") and the diff, in
                     place of "Allow <tool> to run?" and raw arguments.
-                    Issue #3288 §1: a background agent's own request ALWAYS names it — whether or
+                    A background agent's own request ALWAYS names it — whether or
                     not there's a diff to show — so this never reads as an unattributed ask for
                     exactly the riskiest calls (a diff-bearing Edit/Write). */}
                 {prompt.requester?.kind === 'background-agent' ? (
@@ -505,7 +505,7 @@ export function PermissionPrompt({
                   ))}
                 </div>
               )}
-              {/* #3282 §2: Delete sits apart at the bottom, styled destructive, with no digit
+              {/* Delete sits apart at the bottom, styled destructive, with no digit
                   shortcut — the audited bug was that it looked and behaved just like Switch. */}
               {destructiveAskOption && (
                 <div className="flex flex-wrap items-start gap-3">
@@ -579,7 +579,7 @@ const BUTTON =
 const PRIMARY_BUTTON = `${BUTTON} bg-primary text-primary-foreground hover:opacity-90`;
 const SECONDARY_BUTTON = `${BUTTON} bg-raised text-foreground hover:bg-hover`;
 const GHOST_BUTTON = `${BUTTON} text-muted-foreground hover:bg-hover hover:text-foreground`;
-/** #3282 §2: a destructive ask option (Delete) — visually distinct from Switch/Edit/Test/Duplicate. */
+/** A destructive ask option (Delete) — visually distinct from Switch/Edit/Test/Duplicate. */
 const DESTRUCTIVE_BUTTON = `${BUTTON} bg-destructive/12 text-destructive hover:bg-destructive/20`;
 
 /** Imperative escape hatch a parent can use to wipe the field's value without owning it. */
@@ -628,7 +628,7 @@ const FreeTextField = forwardRef<IFreeTextFieldHandle, IFreeTextFieldProps>(func
     onCancel();
   };
   /**
-   * A key that reaches the field types into it — the prompt's own shortcuts never see it (#3280 §3).
+   * A key that reaches the field types into it — the prompt's own shortcuts never see it.
    * The Enter that only finishes an IME composition (Korean/Japanese/Chinese) must not submit the
    * still-uncommitted text — `isComposing` (or `keyCode` 229, on browsers that predate it) marks that
    * Enter; the keystroke is left alone so the browser can commit the composition normally.
@@ -738,7 +738,7 @@ function ToolArgs({ args }: { args: unknown }): React.ReactElement | null {
 }
 
 /**
- * #3288: a Shell request shows just its command — and the working directory only when the server
+ * A Shell request shows just its command — and the working directory only when the server
  * says it differs from the workspace — instead of every raw argument.
  */
 function ShellCommandPreview({

package/src/components/PopupMenu.tsx

@@ -22,7 +22,7 @@ export interface IPopupMenuSection {
 }
 
 /**
- * A HIG pop-up menu (#3282 §2): `role="menu"`, its choices as `menuitemradio` with `aria-checked`
+ * A HIG pop-up menu: `role="menu"`, its choices as `menuitemradio` with `aria-checked`
  * (or `menuitem` for a plain action, e.g. "Manage providers…"), grouped into optional labelled
  * sections. Arrow keys move a roving focus, Enter/Space activates the focused item, and Esc — or a
  * click outside — closes the menu and returns focus to the trigger that opened it, so the person

package/src/components/ProjectPanel.tsx

@@ -13,8 +13,8 @@ import type {
 } from '../hooks/session-client-types.js';
 
 /**
- * #3282 §4c — the Project panel: git status (Changes), one file's diff on click, and project memory as
- * readable text. The owner's design principle 4 (#3277): everything the host implements is usable from
+ * The Project panel: git status (Changes), one file's diff on click, and project memory as
+ * readable text. The owner's design principle 4: everything the host implements is usable from
  * the GUI through organized screens — this is git status/diff and project memory's screen. Checkpoints
  * (rewind) are deliberately absent (see `agent-gui-web/docs/SPEC.md`'s design decisions): edit
  * checkpoints only work on a host that can prove a write stays inside the project

package/src/components/SessionMonitor.tsx

@@ -102,7 +102,7 @@ export function SessionMonitor({ wsUrl, className }: ISessionMonitorProps): Reac
                 ownDriverId={ownDriverId}
               />
             ) : (
-              // #3289 §3 review: this renders in the same slot as `ConversationView` (never
+              // This renders in the same slot as `ConversationView` (never
               // together), so it carries this page's `main` landmark here too — nothing above this
               // slot supplies one.
               <main className="flex h-full items-center justify-center" aria-label="Conversation">

package/src/components/SessionSidebar.tsx

@@ -32,7 +32,7 @@ export function formatUpdatedAt(updatedAt: string, now: number = Date.now()): st
 }
 
 /**
- * A session's title (#3289 §1): its name, else its stable first-message title, else "New session".
+ * A session's title: its name, else its stable first-message title, else "New session".
  * Never `preview` — that field is the raw latest reply, which is what changes every turn and is what
  * this title exists to stop showing.
  */
@@ -75,12 +75,12 @@ interface IMenuAnchor {
 }
 
 /**
- * #3189 — this workspace's sessions on the left of the conversation, as in Claude Code Desktop:
+ * This workspace's sessions on the left of the conversation, as in Claude Code Desktop:
  * start a new one, or click another to make it current. Rows the host could not read are listed,
  * disabled, so a damaged session never looks deleted. A refused switch comes back as a notice.
  * A host that keeps several sessions live marks the rows running now and counts who else is on them.
  *
- * #3289 §1 — each row also carries a "More" menu (or right-click) with Rename (inline) and Delete
+ * Each row also carries a "More" menu (or right-click) with Rename (inline) and Delete
  * (confirmed). Rename on the current row reuses the `/rename` command, which also updates the live
  * session's own name and title bar; rename on any other row writes the stored record directly.
  */
@@ -99,7 +99,7 @@ export function SessionSidebar({
   const unreadable = listing?.unreadableSessionIds ?? [];
   const lockedLine = lockedSessionsLine(listing?.lockedSessionCount);
   const failed = state.sessionsError?.code === 'list_failed' ? state.sessionsError.message : null;
-  // #3282 §2 (part 2): session switching is disabled while disconnected, like the status chips and
+  // Session switching is disabled while disconnected, like the status chips and
   // the `/` command menu — a switch could not reach the host either.
   const connected = state.status === 'connected';
 
@@ -203,7 +203,7 @@ export function SessionSidebar({
             const isCurrent = session.id === current;
             const others = otherClients(session, isCurrent);
             const isRenaming = renamingId === session.id;
-            // #3289 §3 review: the explicit `aria-label` below replaces name-from-content outright, so
+            // The explicit `aria-label` below replaces name-from-content outright, so
             // the live dot's and "N other(s)" span's own text no longer reaches the accessible name —
             // folded back in here as a description instead, alongside the relative time.
             const statusParts = [
@@ -238,12 +238,12 @@ export function SessionSidebar({
                   <button
                     type="button"
                     aria-current={isCurrent ? 'true' : undefined}
-                    // #3289 §3: an explicit name + description — the row's own visible text has no
+                    // An explicit name + description — the row's own visible text has no
                     // whitespace between its parts, so an unlabelled button reads as one run-together
                     // string ("Title validation fixjust now") to a screen reader.
                     aria-label={sessionTitle(session)}
                     aria-describedby={describedBy}
-                    // #3282 §2 (part 2): while disconnected, the tooltip says why instead of previewing.
+                    // While disconnected, the tooltip says why instead of previewing.
                     title={connected ? session.preview || session.id : 'Reconnecting…'}
                     disabled={!connected}
                     onClick={() => {
@@ -409,7 +409,7 @@ export function SessionSidebar({
 
 /** The collapsed sidebar: a narrow rail that opens it again. */
 export function SessionSidebarRail({ state }: { state: IWsSessionState }): React.ReactElement {
-  // #3282 §2 (part 2): starting a session is disabled while disconnected, matching the open sidebar.
+  // Starting a session is disabled while disconnected, matching the open sidebar.
   const connected = state.status === 'connected';
   return (
     <div className="flex w-12 flex-shrink-0 flex-col items-center gap-1 bg-sidebar py-2.5">

package/src/components/SessionSurface.tsx

@@ -38,7 +38,7 @@ const APP_VIEW_HOST_VERSION = '1.0.0';
 
 /**
  * Designed empty state shown before the first turn. Renders in the same slot as `ConversationView`
- * (never together), so it carries the same `main` landmark and label (#3289 §3 review) — nothing
+ * (never together), so it carries the same `main` landmark and label — nothing
  * above this slot supplies one.
  */
 function EmptyState(): React.ReactElement {
@@ -59,14 +59,14 @@ function EmptyState(): React.ReactElement {
 }
 
 /**
- * Issue #3282 §3 — shown in place of the conversation while `sessionStatus.setupRequired` holds: the
+ * Shown in place of the conversation while `sessionStatus.setupRequired` holds: the
  * session is running (the GUI itself connected fine), but has no provider to reply with yet. "Set up
  * provider" runs `/provider add` as a command; its questions dock above where the composer would be
  * (the same `PermissionPrompt` any ask uses), and the panel clears itself once the session reports a
  * real provider, live — no restart, no reload.
  *
  * Renders in the same slot as `ConversationView`/`EmptyState` (never together), so it carries the
- * page's `main` landmark here too (#3289 §3 review) — nothing above this slot supplies one.
+ * page's `main` landmark here too — nothing above this slot supplies one.
  */
 function SetupPanel({
   onSetUp,
@@ -106,7 +106,7 @@ function SetupPanel({
 export function SessionSurface({
   state,
   surface,
-  personalUsageEnabled = false,
+  personalUsageEnabled: personalUsageRequested = false,
   draftMode = 'persistent',
   onReconnect,
   pickFiles,
@@ -121,23 +121,25 @@ export function SessionSurface({
   /** Secure desktop discards unsent text and attachment paths when the session closes. */
   draftMode?: 'persistent' | 'volatile';
   /**
-   * Present only when the host can restart the runtime after the connection is lost for good (issue
-   * #3280 §5, the desktop app); absent in the browser, where the banner says how to reopen it instead.
+   * Present only when the host can restart the runtime after the connection is lost for good (the
+   * desktop app); absent in the browser, where the banner says how to reopen it instead.
    */
   onReconnect?: () => Promise<void>;
-  /** Forwarded to the composer's attach button — present only on the desktop app (#3282 §4d). */
+  /** Forwarded to the composer's attach button — present only on the desktop app. */
   pickFiles?: () => Promise<readonly IPickedFile[]>;
-  /** Forwarded to the composer's drag-and-drop — present only on the desktop app (#3282 §4d). */
+  /** Forwarded to the composer's drag-and-drop — present only on the desktop app. */
   getPathForFile?: (file: File) => string;
   /**
    * The Project panel's memory "Open in editor" action — present only when the host can open a file
-   * in an external editor (the desktop app, #3282 §4c). Absent in the browser, where the action
+   * in an external editor (the desktop app). Absent in the browser, where the action
    * itself is hidden (only shown "if the host supports it").
    */
   onOpenMemoryInEditor?: (path: string) => void;
 
   appViewSandboxUrl?: string;
 }): React.ReactElement {
+  // An observer sees the session but changes nothing; the host stays the authority, this is presentation.
+  const readOnly = state.role === 'observe';
   const [view, setView] = useState<TSessionView>('chat');
   const { identity } = useProductIdentity();
   const appViewHost = useMemo(
@@ -150,11 +152,13 @@ export function SessionSurface({
     }),
     [appViewSandboxUrl, state.readAppView, state.callAppTool, identity.displayName, surface],
   );
+  // The personal usage read is not admitted for an observer.
+  const personalUsageEnabled = personalUsageRequested && !readOnly;
   const composerRef = useRef<IComposerHandle>(null);
   const tasks = state.executionWorkspace?.entries ?? [];
   // The main thread alone is this conversation; the rail earns its width only for work beside it.
   const hasTasks = tasks.some((entry) => entry.kind !== 'main_thread');
-  // #3288 §1: the entry open in the detail sheet, resolved fresh from the live snapshot each render
+  // The entry open in the detail sheet, resolved fresh from the live snapshot each render
   // (so it reflects the entry's own updates, e.g. a Stop taking effect) rather than a stale copy.
   const openEntry = tasks.find((entry) => entry.id === state.openEntryId) ?? null;
   // A loop's `cancel` means "stop the loop" (`/loop stop <id>`) — never cancel-background-task,
@@ -167,9 +171,9 @@ export function SessionSurface({
       state.send({ type: 'cancel-background-task', taskId: entry.sourceId });
     }
   };
-  // #3282 §4 part b-3: the rail also earns its width for a schedule or a goal, even with no running
-  // background task/loop beside the conversation — "Work in progress" covers all four (issue #3282
-  // §4's Expected section), not only execution-workspace entries.
+  // The rail also earns its width for a schedule or a goal, even with no running
+  // background task/loop beside the conversation — "Work in progress" covers all four, not only
+  // execution-workspace entries.
   const currentGoal = state.sessionStatus?.goal ?? null;
   const hasWorkInProgress = hasTasks || state.scheduledTasks.length > 0 || currentGoal !== null;
   const isEmpty =
@@ -177,11 +181,13 @@ export function SessionSurface({
     !state.streamingText &&
     !state.isThinking &&
     state.activeTools.length === 0;
-  // #3282 §3: no provider is configured — the session is running (a placeholder stands in for the
+  // No provider is configured — the session is running (a placeholder stands in for the
   // real one), but there is nothing to reply with yet.
   const setupRequired = state.sessionStatus?.setupRequired === true;
+  // Switching, starting, renaming and deleting sessions are driver actions: an observer has no sidebar.
   const hasSessionList =
-    (state.sessionListing ?? null) !== null || state.sessionsError?.code === 'list_failed';
+    !readOnly &&
+    ((state.sessionListing ?? null) !== null || state.sessionsError?.code === 'list_failed');
   const sidebarOpen = hasSessionList && state.sessionSidebarOpen;
   const usage = personalUsageEnabled && view === 'usage';
   const project = view === 'project';
@@ -189,8 +195,8 @@ export function SessionSurface({
   const currentRow = listing?.sessions.find((session) => session.id === listing.currentSessionId);
   // A rename seen on this page wins; otherwise the host's listing names the current session.
   const title = state.sessionName ?? (currentRow ? sessionTitle(currentRow) : null);
-  // #3289 §2 — below `md` the open sidebar is a sheet over the conversation (the shared `Dialog`,
-  // #3331) rather than a column beside it: a dimmed backdrop, Esc, an outside click or choosing a
+  // Below `md` the open sidebar is a sheet over the conversation (the shared `Dialog`)
+  // rather than a column beside it: a dimmed backdrop, Esc, an outside click or choosing a
   // session all close it again, and it traps Tab inside it while open.
   const isNarrow = useMediaQuery(NARROW_WINDOW_QUERY);
   const sheetActive = sidebarOpen && isNarrow;
@@ -292,24 +298,28 @@ export function SessionSurface({
           <div className="min-h-0 flex-1">
             <PersonalUsageDashboard state={state} />
             {/* A gated turn waits on this answer, so it shows over whatever view is open. */}
-            <PermissionPrompt
-              layout="modal"
-              prompts={state.pendingPrompts}
-              onAnswerPermission={state.answerPermission}
-              onAnswerAsk={state.answerAsk}
-              ownDriverId={state.ownDriverId}
-            />
+            {readOnly ? null : (
+              <PermissionPrompt
+                layout="modal"
+                prompts={state.pendingPrompts}
+                onAnswerPermission={state.answerPermission}
+                onAnswerAsk={state.answerAsk}
+                ownDriverId={state.ownDriverId}
+              />
+            )}
           </div>
         ) : project ? (
           <div className="min-h-0 flex-1">
             <ProjectPanel state={state} onOpenMemoryInEditor={onOpenMemoryInEditor} />
-            <PermissionPrompt
-              layout="modal"
-              prompts={state.pendingPrompts}
-              onAnswerPermission={state.answerPermission}
-              onAnswerAsk={state.answerAsk}
-              ownDriverId={state.ownDriverId}
-            />
+            {readOnly ? null : (
+              <PermissionPrompt
+                layout="modal"
+                prompts={state.pendingPrompts}
+                onAnswerPermission={state.answerPermission}
+                onAnswerAsk={state.answerAsk}
+                ownDriverId={state.ownDriverId}
+              />
+            )}
           </div>
         ) : (
           <div className="flex min-h-0 flex-1">
@@ -320,7 +330,7 @@ export function SessionSurface({
                 onReconnect={onReconnect}
               />
               <div className="min-h-0 flex-1 overflow-hidden">
-                {setupRequired ? (
+                {setupRequired && !readOnly ? (
                   <SetupPanel
                     onSetUp={() => state.send({ type: 'command', name: 'provider', args: 'add' })}
                     disabled={state.status !== 'connected'}
@@ -328,7 +338,7 @@ export function SessionSurface({
                 ) : isEmpty ? (
                   <EmptyState />
                 ) : (
-                  <AppViewHostContext.Provider value={appViewHost}>
+                  <AppViewHostContext.Provider value={readOnly ? null : appViewHost}>
                     <ConversationView
                       messages={state.messages}
                       activeTools={state.activeTools}
@@ -344,19 +354,32 @@ export function SessionSurface({
               >
                 <GoalBar
                   status={state.sessionStatus ?? null}
-                  onStop={() => state.send({ type: 'command', name: 'goal', args: 'cancel' })}
-                />
-                <PermissionPrompt
-                  layout="dock"
-                  prompts={state.pendingPrompts}
-                  onAnswerPermission={state.answerPermission}
-                  onAnswerAsk={state.answerAsk}
-                  ownDriverId={state.ownDriverId}
-                  onFocusReturn={() => composerRef.current?.focus()}
+                  onStop={
+                    readOnly
+                      ? undefined
+                      : () => state.send({ type: 'command', name: 'goal', args: 'cancel' })
+                  }
                 />
-                {/* #3282 §3: hidden while there is no provider to send to — the setup panel's own
+                {readOnly ? null : (
+                  <PermissionPrompt
+                    layout="dock"
+                    prompts={state.pendingPrompts}
+                    onAnswerPermission={state.answerPermission}
+                    onAnswerAsk={state.answerAsk}
+                    ownDriverId={state.ownDriverId}
+                    onFocusReturn={() => composerRef.current?.focus()}
+                  />
+                )}
+                {/* Hidden while there is no provider to send to — the setup panel's own
                     button is the only way in, so nobody types into a composer that goes nowhere. */}
-                {setupRequired ? null : (
+                {readOnly ? (
+                  <p
+                    role="status"
+                    className="rounded-2xl bg-card px-4 py-3 text-center text-[14px] text-muted-foreground"
+                  >
+                    Read-only: you are watching this session.
+                  </p>
+                ) : setupRequired ? null : (
                   <Composer
                     ref={composerRef}
                     draftMode={draftMode}
@@ -380,7 +403,7 @@ export function SessionSurface({
                     modelList={state.modelList}
                     onRequestModelList={() => state.requestModelList()}
                     onSilentCommand={(name, args) => state.sendCommandSilently(name, args)}
-                    // #3282 §4b: "Manage providers…" now opens Settings at the Providers & Models
+                    // "Manage providers…" now opens Settings at the Providers & Models
                     // section, replacing the model menu's former server-driven profile flow.
                     onManageProviders={() => state.openSettings('providers')}
                     onSubmit={(prompt) => {
@@ -409,13 +432,17 @@ export function SessionSurface({
                   selectedEntryId={state.openEntryId ?? undefined}
                   onSelect={(entry) => state.openExecutionDetail(entry.id)}
                   onReturnToConversation={() => state.closeExecutionDetail()}
-                  onStop={stopExecutionEntry}
+                  onStop={readOnly ? undefined : stopExecutionEntry}
                   schedules={state.scheduledTasks}
                   goal={currentGoal}
-                  onPauseSchedule={state.pauseSchedule}
-                  onResumeSchedule={state.resumeSchedule}
-                  onDeleteSchedule={state.deleteSchedule}
-                  onCancelGoal={() => state.send({ type: 'command', name: 'goal', args: 'cancel' })}
+                  onPauseSchedule={readOnly ? undefined : state.pauseSchedule}
+                  onResumeSchedule={readOnly ? undefined : state.resumeSchedule}
+                  onDeleteSchedule={readOnly ? undefined : state.deleteSchedule}
+                  onCancelGoal={
+                    readOnly
+                      ? undefined
+                      : () => state.send({ type: 'command', name: 'goal', args: 'cancel' })
+                  }
                 />
               </aside>
             )}
@@ -428,14 +455,14 @@ export function SessionSurface({
               complete={state.executionDetailComplete}
               onClose={() => state.closeExecutionDetail()}
               onLoadMore={() => state.loadMoreExecutionDetail()}
-              onStop={openEntry ? () => stopExecutionEntry(openEntry) : undefined}
+              onStop={openEntry && !readOnly ? () => stopExecutionEntry(openEntry) : undefined}
               inputState={state.executionDetailInput}
               mode={state.executionDetailMode}
               unreadable={state.executionDetailUnreadable}
               onShowEarlier={state.showEarlierExecutionDetail}
               onShowLive={state.showLiveExecutionDetail}
               onSend={
-                openEntry
+                openEntry && !readOnly
                   ? (prompt) =>
                       state.send({
                         type: 'send-background-task',
@@ -445,7 +472,7 @@ export function SessionSurface({
                   : undefined
               }
               onContinue={
-                openEntry?.resumeSessionId
+                openEntry?.resumeSessionId && !readOnly
                   ? () => {
                       if (openEntry.resumeSessionId) state.switchSession(openEntry.resumeSessionId);
                     }
@@ -457,8 +484,8 @@ export function SessionSurface({
       </div>
 
       <SessionNotices state={state} />
-      <SettingsScreen state={state} />
-      <AgentSwitcherSheet state={state} />
+      {readOnly ? null : <SettingsScreen state={state} />}
+      {readOnly ? null : <AgentSwitcherSheet state={state} />}
       <HelpSheet
         open={state.helpOpen}
         onClose={() => state.closeHelp()}
@@ -470,7 +497,7 @@ export function SessionSurface({
 
 /**
  * A centered chrome frame for the pre-session (loading) and fatal states — reused by app shells. Its
- * content area is this page's `main` landmark (#3289 §3 review): nothing above `CenteredChrome`'s
+ * content area is this page's `main` landmark: nothing above `CenteredChrome`'s
  * three call sites (starting, fatal, the trust question) supplies one, and none of the three ever
  * render alongside `SessionSurface`'s own. `header` stays a sibling of `main`, not inside it, so it
  * keeps its own implicit `banner` role.