pilotswarm 0.5.59 → 0.5.61

package/ui/react/src/web-app.js

@@ -6,6 +6,7 @@ import React from "react";
 import { createPortal } from "react-dom";
 import { appendAnimatedDotsToRuns, useAnimatedDots, useSpinnerFrame } from "./chat-status.js";
 import {
+    normalizeMoa,
     UI_COMMANDS,
     INSPECTOR_TABS,
     ARTIFACT_DOWNLOAD_HINT,
@@ -35,6 +36,7 @@ import {
     selectArtifactPickerModal,
     selectArtifactUploadModal,
     selectLiveActivityLines,
+    selectActiveOutboxMessages,
     selectChatLines,
     selectChatPaneChrome,
     selectOutboxOverlayLines,
@@ -286,6 +288,7 @@ function clearBrowserPreferenceCache() {
 function normalizeProfileSettings(settings) {
     const candidate = settings && typeof settings === "object" && !Array.isArray(settings) ? settings : {};
     const normalized = {};
+    if (hasOwn(candidate, "moa")) normalized.moa = normalizeMoa(candidate.moa);
     if (typeof candidate.themeId === "string" && candidate.themeId.trim()) {
         normalized.themeId = candidate.themeId.trim();
     }
@@ -431,8 +434,18 @@ function hasOwn(value, key) {
     return Boolean(value && typeof value === "object" && Object.prototype.hasOwnProperty.call(value, key));
 }
 
+function profileViewState(root) {
+    return {
+        ...root.ui, ...root.ui.layout,
+        ownerFilter: root.sessions.ownerFilter, pinnedIds: root.sessions.pinnedIds,
+        manualOrder: root.sessions.manualOrder, collapsedSessionIds: root.sessions.collapsedIds,
+        activeSessionId: root.sessions.activeSessionId, canvasPrefs: root.canvas?.prefs,
+    };
+}
+
 function profileSettingsFromViewState(state, preservedOtherTouchScale = null, preservedRightPaneMode = null, preservedDesktopPanes = null) {
     return normalizeProfileSettings({
+        ...(state.moa ? { moa: state.moa } : {}),
         themeId: state.themeId,
         [touchScaleKey()]: state.touchScale,
         sessionDetailCollapsed: state.sessionDetailCollapsed,
@@ -498,6 +511,7 @@ function profileSettingsFromViewState(state, preservedOtherTouchScale = null, pr
 
 function buildDefaultProfileSettingsFromState(state, preservedOtherTouchScale = null, preservedRightPaneMode = null) {
     return normalizeProfileSettings({
+        ...(state?.ui?.moa ? { moa: state.ui.moa } : {}),
         themeId: state?.ui?.themeId,
         [touchScaleKey()]: state?.ui?.touchScale,
         sessionDetailCollapsed: state?.ui?.sessionDetailCollapsed,
@@ -541,6 +555,7 @@ function materializeProfileSettings(remoteSettings, defaults) {
     // the server has not persisted yet. An omitted key leaves the
     // profileSettings/apply guards preserving the current value.
     return normalizeProfileSettings({
+        ...(hasOwn(normalizedRemote, "moa") ? { moa: normalizedRemote.moa } : {}),
         themeId: hasOwn(normalizedRemote, "themeId")
             ? normalizedRemote.themeId
             : normalizedDefaults.themeId,
@@ -611,11 +626,18 @@ function materializeProfileSettings(remoteSettings, defaults) {
     });
 }
 
+const profileSaveQueues = new WeakMap();
 async function saveProfileSettings(controller, settings) {
     if (typeof controller?.transport?.setCurrentUserProfileSettings !== "function") return null;
-    return controller.transport.setCurrentUserProfileSettings({
+    // Whole-document writes must arrive in edit order. A slow earlier request
+    // must never land after a newer layout and erase it.
+    const previous = profileSaveQueues.get(controller) || Promise.resolve();
+    const next = previous.catch(() => {}).then(() => controller.transport.setCurrentUserProfileSettings({
         settings: normalizeProfileSettings(settings),
-    });
+    }));
+    profileSaveQueues.set(controller, next);
+    try { return await next; }
+    finally { if (profileSaveQueues.get(controller) === next) profileSaveQueues.delete(controller); }
 }
 
 function getVisibleInspectorTabs(controller) {
@@ -993,10 +1015,11 @@ function applyDocumentTheme(themeId) {
     root.dataset.psTheme = theme.id;
 }
 
-function useMeasuredViewport(ref) {
+function useMeasuredViewport(ref, suspended = false) {
     const [viewport, setViewport] = React.useState({ width: 0, height: 0 });
 
     React.useLayoutEffect(() => {
+        if (suspended) return undefined;
         const element = ref.current;
         if (!element) return undefined;
 
@@ -1015,7 +1038,7 @@ function useMeasuredViewport(ref) {
             observer.disconnect();
             window.removeEventListener("resize", update);
         };
-    }, [ref]);
+    }, [ref, suspended]);
 
     return viewport;
 }
@@ -2862,7 +2885,7 @@ function useElementBox(ref) {
     return box;
 }
 
-function fetchArtifactHtmlObjectUrl(controller, sessionId, filename) {
+function fetchArtifactHtmlObjectUrl(controller, sessionId, filename, panelKeys = false) {
     const downloadResponse = controller?.transport?.api?.downloadArtifactResponse;
     if (typeof downloadResponse !== "function") {
         return Promise.reject(new Error("artifact download unavailable"));
@@ -2875,7 +2898,18 @@ function fetchArtifactHtmlObjectUrl(controller, sessionId, filename) {
             // would otherwise make the iframe offer a download instead of
             // rendering, and a missing charset would mojibake UTF-8 content.
             const bytes = await response.arrayBuffer();
-            return URL.createObjectURL(new Blob([bytes], { type: "text/html;charset=utf-8" }));
+            // Only MoA canvases opt into panel navigation. Ordinary canvases
+            // retain native Tab behavior and their exact document bytes.
+            const bridge = panelKeys ? `<script>window.addEventListener('keydown',function(e){if(e.isTrusted&&!e.altKey&&!e.metaKey&&!e.ctrlKey&&(e.key==='Tab'||e.key==='Escape')){e.preventDefault();e.stopImmediatePropagation();parent.postMessage({type:'moa-panel-key',key:e.key,backwards:e.shiftKey},'*')}},true);</script>` : "";
+            let parts = [bytes];
+            if (panelKeys) {
+                const html = new TextDecoder().decode(bytes);
+                // Keep the doctype first so panel navigation cannot change
+                // the canvas from standards mode into quirks mode.
+                const prolog = /^(?:\uFEFF|\s|<!--[\s\S]*?-->)*<!doctype[^>]*>/i.exec(html)?.[0] || "";
+                parts = [html.slice(0, prolog.length), bridge, html.slice(prolog.length)];
+            }
+            return URL.createObjectURL(new Blob(parts, { type: "text/html;charset=utf-8" }));
         });
 }
 
@@ -3571,15 +3605,14 @@ const AssistantPreviewCard = React.memo(function AssistantPreviewCard({ line, th
         ? React.createElement(Runs, { runs: line.headerRuns, theme })
         : React.createElement(React.Fragment, null,
             React.createElement("span", { className: "ps-canvas-action-tag" }, "Agent"),
-            React.createElement("span", { className: "ps-system-notice-summary-text" }, "Message preview"),
-            React.createElement("span", { className: "ps-preview-status" },
-                line.isLive ? (line.body ? "Responding" : "Thinking") : "Saved"))),
+            React.createElement("span", { className: "ps-system-notice-summary-text" }, line.text),
+            line.statusText ? React.createElement("span", { className: "ps-preview-status" }, line.statusText) : null)),
     React.createElement("div", {
         ref: viewportRef,
         className: "ps-assistant-preview-viewport",
         tabIndex: expanded && !line.final ? 0 : undefined,
         role: line.final ? undefined : "region",
-        "aria-label": line.final ? undefined : "Agent message preview",
+        "aria-label": line.final ? undefined : line.text,
         onScroll: (event) => {
             if (!line.final) {
                 event.stopPropagation();
@@ -3947,7 +3980,7 @@ function focusRegionForPaneKey(paneKey, override = null) {
     return PANE_KEY_FOCUS_REGIONS[String(paneKey || "")] || null;
 }
 
-function ScrollLinesPanel({ title, titleRight = null, color, focused, actions, lines, stickyLines = [], bottomStickyLines = [], scrollOffset = 0, scrollMode = "top", paneKey, controller, className = "", panelClassName = "", topContent = null, bottomContent = null, structuredBlocks = false, stickyBottom = false, renderBody = null, focusRegion = null, panelRef = null, ariaLive = null }) {
+function ScrollLinesPanel({ title, titleRight = null, color, focused, actions, lines, stickyLines = [], bottomStickyLines = [], reserveBottomSticky = false, scrollOffset = 0, scrollMode = "top", paneKey, controller, className = "", panelClassName = "", topContent = null, bottomContent = null, structuredBlocks = false, stickyBottom = false, renderBody = null, focusRegion = null, panelRef = null, ariaLive = null }) {
     const themeId = useControllerSelector(controller, (state) => state.ui.themeId);
     const theme = getTheme(themeId);
     const ref = React.useRef(null);
@@ -4066,9 +4099,9 @@ function ScrollLinesPanel({ title, titleRight = null, color, focused, actions, l
                 ? React.createElement(StructuredChatBlocks, { lines: normalizedLines, theme, controller })
                 : normalizedLines.map((line, index) => React.createElement(Line, { key: `line:${index}`, line, theme })),
         ),
-        normalizedBottomSticky.length > 0
+        (normalizedBottomSticky.length > 0 || reserveBottomSticky)
             ? React.createElement("div", {
-                className: "ps-panel-bottom-sticky",
+                className: `ps-panel-bottom-sticky${reserveBottomSticky ? " is-reserved" : ""}`,
             },
                 normalizedBottomSticky.map((line, index) => React.createElement(Line, { key: `bottom-sticky:${index}`, line, theme })),
             )
@@ -4868,7 +4901,7 @@ function useAxisLockedPan(ref, enabled = true) {
     }, [ref, enabled]);
 }
 
-function SessionPane({ controller, actions = null, panelClassName = "", structuredRows = false, showDetailBox = null }) {
+function SessionPane({ controller, actions = null, panelClassName = "", structuredRows = false, showDetailBox = null, selection = null, actionsOnly = false, actionsHost = null, onAction = null, onDialogChange = null }) {
     // Mobile keeps its inline detail line and normally gets no detail box — a
     // reserved footer would eat a meaningful slice of a phone screen. The
     // sessions-ONLY layout is the exception: it has the whole screen and the
@@ -4894,23 +4927,23 @@ function SessionPane({ controller, actions = null, panelClassName = "", structur
     const sessionButtonRefs = React.useRef(new Map());
     const viewState = useControllerSelector(controller, (state) => ({
         branding: state.branding,
-        activeSessionId: state.sessions.activeSessionId,
+        activeSessionId: selection ? selection.sessionId : state.sessions.activeSessionId,
         sessionsById: state.sessions.byId,
         sessionsFlat: state.sessions.flat,
-        filterQuery: state.sessions.filterQuery || "",
+        filterQuery: selection ? selection.query || "" : state.sessions.filterQuery || "",
         ownerFilter: state.sessions.ownerFilter,
         pinnedIds: state.sessions.pinnedIds,
         manualOrder: state.sessions.manualOrder,
-        selectedIds: state.sessions.selectedIds,
-        selectMode: state.sessions.selectMode,
+        selectedIds: selection ? [] : state.sessions.selectedIds,
+        selectMode: selection ? false : state.sessions.selectMode,
         auth: state.auth,
         connectionMode: state.connection?.mode || "local",
         modalOpen: Boolean(state.ui.modal),
-        focused: state.ui.focusRegion === "sessions",
+        focused: selection ? true : state.ui.focusRegion === "sessions",
         // Clicking empty space clears the list highlight; the row VM reads it,
         // so the reconstruction below must carry it or the click does nothing
         // visible (the same omission that blinded the Node Map).
-        listDeselected: Boolean(state.sessions.listDeselected),
+        listDeselected: selection ? !selection.sessionId : Boolean(state.sessions.listDeselected),
         // The canvas markers read these. This synthetic state is exactly the
         // trap the branding comment below describes: omit a slice here and
         // every row computes as if it were empty — the markers were null on
@@ -4983,6 +5016,7 @@ function SessionPane({ controller, actions = null, panelClassName = "", structur
             setManageOpen(true);
         }
     }, [modelFlowOpen]);
+    React.useEffect(() => { onDialogChange?.(manageOpen || Boolean(linkModal) || modelFlowOpen); }, [manageOpen, linkModal, modelFlowOpen, onDialogChange]);
     const requestSwitchModel = () => {
         reopenManageRef.current = true;
         setManageOpen(false);
@@ -5076,7 +5110,7 @@ function SessionPane({ controller, actions = null, panelClassName = "", structur
     // rows/viewState from a ref that is refreshed on every render instead of
     // closing over them.
     const clickEnv = React.useRef(null);
-    clickEnv.current = { rows, viewState, controller };
+    clickEnv.current = { rows, viewState, controller, selection };
     // ── Drag sessions into / out of groups ────────────────────────────
     // Pointer-driven so it works from <button> rows, can render a collection
     // ghost for a multi-selection, and can highlight the destination folder.
@@ -5401,7 +5435,12 @@ function SessionPane({ controller, actions = null, panelClassName = "", structur
     }), [dragState.dragging, dragState.overGroupId, dragState.insertBeforeId, dragState.insertAfterId]);
 
     const handleRowClick = React.useCallback((event, row) => {
-        const { rows: currentRows, viewState: current, controller: ctl } = clickEnv.current;
+        const { rows: currentRows, viewState: current, controller: ctl, selection: pick } = clickEnv.current;
+        if (pick) {
+            if (row.isGroup || (row.hasChildren && row.active)) ctl.dispatch({ type: row.collapsed ? "sessions/expand" : "sessions/collapse", sessionId: row.sessionId });
+            if (!row.isGroup) pick.onSelect(row.sessionId);
+            return;
+        }
         // Cmd/Ctrl-click toggles multi-selection (any row).
         if (event.metaKey || event.ctrlKey) {
             event.preventDefault();
@@ -5516,14 +5555,14 @@ function SessionPane({ controller, actions = null, panelClassName = "", structur
     }, [activeRowRevealKey, viewState.activeSessionId, viewState.focused, viewState.modalOpen, viewState.sessionsFlat]);
 
     const panelActions = React.createElement(React.Fragment, null,
-        isBulkSelection
+        !actionsOnly && isBulkSelection
             ? React.createElement("span", {
                 className: "ps-mini-button-label",
                 style: { padding: "0 6px", fontSize: "12px", opacity: 0.85 },
                 title: "Multiple sessions selected. Move to group or cancel selected sessions; click Clear to exit.",
             }, `${selectedCount} selected`)
             : null,
-        isBulkSelection
+        !actionsOnly && (isBulkSelection
             ? React.createElement(IconButton, {
                 className: "ps-mini-button",
                 icon: "✕",
@@ -5539,8 +5578,8 @@ function SessionPane({ controller, actions = null, panelClassName = "", structur
                 label: canPinActiveSession
                     ? (isActivePinned ? "Unpin this session" : "Pin this session to the top of the list")
                     : "Only top-level non-system sessions can be pinned",
-            }),
-        React.createElement(IconButton, {
+            })),
+        !actionsOnly && React.createElement(IconButton, {
             className: "ps-mini-button",
             icon: groupableIds.length > 1
                 ? React.createElement("span", { className: "ps-icon-badge" },
@@ -5581,9 +5620,9 @@ function SessionPane({ controller, actions = null, panelClassName = "", structur
                         ? "Rename folder"
                         : !canModifyActiveSession
                             ? "Only this session's owner or an admin can manage it"
-                            : "Manage session — rename, switch model, and sharing",
+                            : actionsOnly ? "Manage session — rename and switch model" : "Manage session — rename, switch model, and sharing",
         }),
-        React.createElement(IconButton, {
+        !actionsOnly && React.createElement(IconButton, {
             className: "ps-mini-button",
             icon: React.createElement(LinkGlyph),
             onClick: () => {
@@ -5643,16 +5682,31 @@ function SessionPane({ controller, actions = null, panelClassName = "", structur
 
     return React.createElement(React.Fragment, null,
     dragGhost,
-    React.createElement(Panel, {
+    actionsOnly ? (actionsHost ? createPortal(React.createElement("div", { className: "ps-moa-control-actions", onClick: onAction }, panelActions), actionsHost) : null) : React.createElement(Panel, {
         title: [{ text: "Sessions", color: "yellow", bold: true }],
         color: "yellow",
         focused: viewState.focused,
         theme,
-        actions: panelActions,
+        actions: selection ? React.createElement(React.Fragment, null,
+            selection.onCreate ? React.createElement(IconButton, {
+                className: "ps-mini-button", icon: React.createElement(PlusGlyph),
+                label: "Create New Session", onClick: selection.onCreate,
+            }) : null, actions) : panelActions,
         className: combinedPanelClassName,
     },
+    selection ? React.createElement("input", { className: "ps-modal-input", "aria-label": "Find a session", placeholder: "Find a session…", value: selection.query || "", onChange: e => selection.onQuery?.(e.target.value) }) : null,
     React.createElement("div", {
         ref: sessionListRef,
+        onKeyDown: selection ? event => {
+            if (!["ArrowUp", "ArrowDown", "Home", "End"].includes(event.key) || event.altKey || event.ctrlKey || event.metaKey) return;
+            const buttons = [...sessionListRef.current.querySelectorAll(".ps-session-list-button")];
+            const current = buttons.indexOf(event.target.closest(".ps-session-list-button"));
+            const next = event.key === "Home" ? 0 : event.key === "End" ? buttons.length - 1 : Math.max(0, Math.min(buttons.length - 1, current + (event.key === "ArrowUp" ? -1 : 1)));
+            const button = buttons[next]; if (!button) return;
+            event.preventDefault(); event.stopPropagation();
+            if (button.dataset.sessionId) selection.onSelect(button.dataset.sessionId);
+            button.focus();
+        } : undefined,
         className: `ps-action-list ps-session-list${dragState.dragging ? " is-dragging" : ""}`,
         // Clicking empty space below the rows clears the list selection while
         // the other panes keep showing the session. With nothing selected the
@@ -5661,9 +5715,11 @@ function SessionPane({ controller, actions = null, panelClassName = "", structur
             // Empty space only: a click that lands on a row bubbles here too.
             const onRow = event.target instanceof Element && event.target.closest(".ps-session-list-button");
             if (onRow) return;
-            controller.dispatch({ type: "sessions/listDeselect" });
+            if (selection) selection.onSelect(null);
+            else controller.dispatch({ type: "sessions/listDeselect" });
         },
     },
+
         rows.length === 0
             ? React.createElement("div", { className: "ps-empty-state" }, viewState.filterQuery
                 ? `No sessions matched "@@${viewState.filterQuery}".`
@@ -5678,7 +5734,7 @@ function SessionPane({ controller, actions = null, panelClassName = "", structur
                 setRef: setSessionButtonRef,
                 // Drag-to-folder is a fine-pointer gesture: arming it on
                 // touch hijacks the finger that should be scrolling the list.
-                drag: touchInput ? null : dragHandlers,
+                drag: selection || touchInput ? null : dragHandlers,
             }))),
     (showDetailBox === null ? !isMobilePane : showDetailBox)
         ? React.createElement(SessionDetailBox, {
@@ -5700,6 +5756,7 @@ function SessionPane({ controller, actions = null, panelClassName = "", structur
             controller,
             sessionId: activeSession.sessionId,
             initialTitle: activeSession.title || "",
+            allowSharing: !actionsOnly,
             currentModel: activeSession.model || "",
             currentReasoningEffort: activeSession.reasoningEffort || "",
             principal: viewState.auth?.principal || null,
@@ -5898,6 +5955,13 @@ function SidebarGlyph() {
 // icon size without a label.
 // The Main pane, whatever layout it is in: a frame with a list rail and a
 // conversation beside it. Constant across the three-way cycle.
+// A tiled command surface: one tall pane beside two stacked panes.
+function MoaGlyph() {
+    return React.createElement(Glyph, null,
+        React.createElement("rect", { x: 3, y: 4, width: 7, height: 16, rx: 1 }),
+        React.createElement("rect", { x: 13, y: 4, width: 8, height: 6.5, rx: 1 }),
+        React.createElement("rect", { x: 13, y: 13.5, width: 8, height: 6.5, rx: 1 }));
+}
 function MainLayoutGlyph() {
     return React.createElement(Glyph, null,
     React.createElement("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2" }),
@@ -6082,7 +6146,7 @@ function useActiveSessionAccess(controller, activeSessionId, isGroup) {
 // rename, copy link, plus (for the owner/admin) sharing — visibility +
 // per-person grants. Fetches its own access snapshot so callers only pass the
 // session id + current title.
-function SessionModifyModal({ controller, sessionId, initialTitle, currentModel, currentReasoningEffort, principal, onClose, onSwitchModel, onChanged }) {
+function SessionModifyModal({ controller, sessionId, initialTitle, currentModel, currentReasoningEffort, principal, onClose, onSwitchModel, onChanged, allowSharing = true }) {
     const [tab, setTab] = React.useState("general");
     const [access, setAccess] = React.useState(null);
     const [title, setTitle] = React.useState(initialTitle || "");
@@ -6101,20 +6165,20 @@ function SessionModifyModal({ controller, sessionId, initialTitle, currentModel,
             .then((a) => { if (!cancelled && a) { setAccess(a); setVisibility(a.visibility || "private"); } })
             .catch(() => {});
         // Member directory for name autocomplete (excludes synthetic principals).
-        if (typeof controller.transport.listKnownUsers === "function") {
+        if (allowSharing && typeof controller.transport.listKnownUsers === "function") {
             controller.transport.listKnownUsers({ limit: 500 })
                 .then((users) => { if (!cancelled) setDirectory(Array.isArray(users) ? users : []); })
                 .catch(() => {});
         }
         return () => { cancelled = true; };
-    }, [controller, sessionId]);
+    }, [controller, sessionId, allowSharing]);
 
     const loadShares = React.useCallback(() => {
         controller.transport.listSessionShares(sessionId)
             .then((rows) => { const list = Array.isArray(rows) ? rows : []; setShares(list); setDraftShares(list); })
             .catch(() => { setShares([]); setDraftShares([]); });
     }, [controller, sessionId]);
-    React.useEffect(() => { loadShares(); }, [loadShares]);
+    React.useEffect(() => { if (allowSharing) loadShares(); }, [loadShares, allowSharing]);
 
     const run = async (fn) => {
         setBusy(true); setError(null);
@@ -6220,7 +6284,7 @@ function SessionModifyModal({ controller, sessionId, initialTitle, currentModel,
     // only rename/switch model on their own session.
     const tabs = [
         { id: "general", label: "General" },
-        ...(canManage ? [{ id: "access", label: "Access" }] : []),
+        ...(allowSharing && canManage ? [{ id: "access", label: "Access" }] : []),
     ];
     const activeTab = tabs.some((t) => t.id === tab) ? tab : "general";
     // Regenerate is a change-this-session action, so it belongs here rather
@@ -6344,7 +6408,41 @@ function SessionModifyModal({ controller, sessionId, initialTitle, currentModel,
             error ? React.createElement("div", { className: "ps-share-error" }, error) : null));
 }
 
-function ChatPane({ controller, mobile = false, fullWidth = false, showComposer = true }) {
+function SessionComposer({ controller, onReadOnlyFocus = null, mobile = false, compact = false }) {
+    const modal = useControllerSelector(controller, state => state.ui.modal);
+    const session = useControllerSelector(controller, state => state.sessions.byId[state.sessions.activeSessionId]);
+    const { access } = useActiveSessionAccess(controller, session?.sessionId, session?.isGroup);
+    const readOnly = session?.serviceKind || access?.canWrite === false;
+    React.useLayoutEffect(() => { if (readOnly && !modal) onReadOnlyFocus?.(); }, [readOnly, modal, onReadOnlyFocus]);
+    if (!session || session.isGroup || modal) return null;
+    return React.createElement("div", { className: "ps-chat-composer" }, readOnly
+        ? React.createElement("div", { className: "ps-composer-readonly" }, session.serviceKind
+            ? "⚗ Service session — runtime machinery. Its transcript is a read-only trace; it does not accept messages."
+            : `You have view access to this session. Ask ${access.owner?.displayName || access.owner?.email || "the owner"} for write access to participate.`)
+        : React.createElement(PromptComposer, { controller, mobile, compact, autoFocus: !mobile, active: true }));
+}
+
+// The compact focus views use their existing header for activity. The same
+// selector powers the desktop footer, so stale-status and elapsed-time rules
+// remain identical; queued prompt bodies stay readable in the transcript.
+function SessionHeaderStatus({ controller }) {
+    const state = useControllerSelector(controller, s => s);
+    const session = state.sessions.byId[state.sessions.activeSessionId];
+    const spinnerFrame = useSpinnerFrame(session?.status === "running");
+    const activity = selectLiveActivityLines(state, { spinnerFrame, maxWidth: 120 });
+    const status = activity[0]?.map(run => run.text || "").join("")
+        || (session ? String(session.status || "idle").replace(/^./, c => c.toUpperCase()) : "");
+    const messages = selectActiveOutboxMessages(state);
+    const queue = ["pending", "queued", "cancelling", "rejected"].map(phase => {
+        const count = messages.filter(message => message.pendingPhase === phase).length;
+        return count ? `${count} ${phase}` : "";
+    }).filter(Boolean).join(" · ");
+    return React.createElement("div", { className: "ps-mobile-session-status", "aria-label": "Session status" },
+        React.createElement("span", { className: "ps-mobile-activity", title: status }, status),
+        queue ? React.createElement("span", { className: "ps-mobile-queue", title: queue }, queue) : null);
+}
+
+function ChatPane({ controller, mobile = false, fullWidth = false, showComposer = true, onEnterZen = null, activityInHeader = false }) {
     const themeId = useControllerSelector(controller, (state) => state.ui.themeId);
     const theme = getTheme(themeId);
     const viewState = useControllerSelector(controller, (state) => {
@@ -6455,6 +6553,10 @@ function ChatPane({ controller, mobile = false, fullWidth = false, showComposer
         () => (pinnedActivityLines.length > 0 ? [...outboxLines, ...pinnedActivityLines] : outboxLines),
         [outboxLines, pinnedActivityLines],
     );
+    const transcriptLines = React.useMemo(
+        () => activityInHeader && outboxLines.length ? [...lines, ...outboxLines] : lines,
+        [activityInHeader, lines, outboxLines],
+    );
     // Read-only gating: a view-only viewer (shared_read / read grant, no write)
     // gets an explanatory notice instead of the composer. The visibility chip
     // and Share affordance now live in the session list "Modify" modal and the
@@ -6510,11 +6612,12 @@ function ChatPane({ controller, mobile = false, fullWidth = false, showComposer
         titleRight: mobile && titleRight ? compactTitleRuns(titleRight, 18) : titleRight,
         // Chat/Summary toggling lives on the top toolbar so the pane chrome
         // stays clean. The toolbar button is disabled for group sessions.
-        actions: null,
+        actions: mobile && onEnterZen ? React.createElement(IconButton, { className: "ps-mini-button", icon: React.createElement(ExpandGlyph), label: "Enter mobile zen", onClick: onEnterZen }) : null,
         color: chrome.color,
         focused: viewState.focused,
-        lines,
-        bottomStickyLines: stickyBottom,
+        lines: transcriptLines,
+        bottomStickyLines: activityInHeader ? EMPTY_ARRAY : stickyBottom,
+        reserveBottomSticky: !activityInHeader,
         scrollOffset: viewState.scroll,
         scrollMode: "bottom",
         paneKey: "chat",
@@ -6864,7 +6967,7 @@ function useKeyboardTakeover(enabled) {
  * detail sub-panel). This replaced chat-focus mode, which was a second way to
  * say "chat only" with its own chrome and its own exit.
  */
-function MobileWorkspace({ controller, layout = "split" }) {
+function MobileWorkspace({ controller, layout = "split", onEnterZen }) {
     const sessionPane = React.createElement(SessionPane, {
         controller,
         panelClassName: "ps-mobile-session-pane",
@@ -6872,7 +6975,7 @@ function MobileWorkspace({ controller, layout = "split" }) {
     if (layout === "chat") {
         return React.createElement("div", { className: "ps-mobile-workspace is-chat-only" },
             React.createElement("div", { className: "ps-mobile-chat-pane" },
-                React.createElement(ChatPane, { controller, mobile: true, fullWidth: true })));
+                React.createElement(ChatPane, { controller, mobile: true, fullWidth: true, onEnterZen })));
     }
     if (layout === "sessions") {
         return React.createElement("div", { className: "ps-mobile-workspace is-sessions-only" },
@@ -6885,7 +6988,7 @@ function MobileWorkspace({ controller, layout = "split" }) {
     return React.createElement("div", { className: "ps-mobile-workspace" },
         sessionPane,
         React.createElement("div", { className: "ps-mobile-chat-pane" },
-            React.createElement(ChatPane, { controller, mobile: true, fullWidth: true })));
+            React.createElement(ChatPane, { controller, mobile: true, fullWidth: true, onEnterZen })));
 }
 
 /** Frame-and-easel glyph for the Canvas toggle. */
@@ -7233,7 +7336,9 @@ function RestoreGlyph() {
  * loads hidden-but-painted behind the live frame and is promoted on load, so
  * a live redraw is a composite swap of something already drawn.
  */
-function CanvasFrame({ controller, sessionId, slot = 1, latestRev, zoom, visible = true, focusOnPromote = false, dataRev = 0, dataPayload = null, dataPatch = null }) {
+function CanvasFrame({ controller, sessionId, slot = 1, latestRev, zoom, visible = true, focusOnPromote = false, dataRev = 0, dataPayload = null, dataPatch = null, onPanelKey = null }) {
+    const panelKeyRef = React.useRef(onPanelKey); panelKeyRef.current = onPanelKey;
+    const panelKeys = Boolean(onPanelKey);
     const [live, setLive] = React.useState(null);       // { url, rev }
     const [staging, setStaging] = React.useState(null); // { url, rev }
     const [loadError, setLoadError] = React.useState(null); // { rev }
@@ -7285,9 +7390,13 @@ function CanvasFrame({ controller, sessionId, slot = 1, latestRev, zoom, visible
             // window that asked). Writes and actions stay live-frame only.
             const fromStaging = Boolean(stagingIframeElRef.current && event.source === stagingIframeElRef.current.contentWindow);
             if (!fromLive && !fromStaging) return;
+            if (payload.type === "moa-panel-key") {
+                if (fromLive && document.activeElement === frameEl && ["Tab", "Escape"].includes(payload.key)) panelKeyRef.current?.(payload.key, payload.backwards === true);
+                return;
+            }
             if (payload.type === "canvas-action") {
                 if (!fromLive) return;
-                controller.submitCanvasAction(sessionId, payload).then((result) => {
+                controller.submitCanvasAction(sessionId, payload, slot).then((result) => {
                     if (result && result.ok === false && typeof console !== "undefined") {
                         console.warn(`canvas action rejected: ${result.reason}`);
                     }
@@ -7372,7 +7481,7 @@ function CanvasFrame({ controller, sessionId, slot = 1, latestRev, zoom, visible
         if (!controller || !sessionId || !latestRev) return undefined;
         let cancelled = false;
         let retryTimer = null;
-        fetchArtifactHtmlObjectUrl(controller, sessionId, slot <= 1 ? "canvas.html" : `canvas${slot}.html`)
+        fetchArtifactHtmlObjectUrl(controller, sessionId, slot <= 1 ? "canvas.html" : `canvas${slot}.html`, panelKeys)
             .then((url) => {
                 if (cancelled) { URL.revokeObjectURL(url); return; }
                 // A staging revision that never loaded is superseded here —
@@ -7400,7 +7509,7 @@ function CanvasFrame({ controller, sessionId, slot = 1, latestRev, zoom, visible
             cancelled = true;
             if (retryTimer) clearTimeout(retryTimer);
         };
-    }, [controller, sessionId, slot, latestRev, retryTick]);
+    }, [controller, sessionId, slot, latestRev, retryTick, panelKeys]);
 
     // Session switch / unmount: drop both frames — a different session is a
     // different document, and showing the old canvas under a new session is a
@@ -8605,7 +8714,7 @@ function formatAttachmentSize(sizeBytes) {
     return `${bytes} B`;
 }
 
-function PromptComposer({ controller, mobile, active = true, onAfterSend = null }) {
+function PromptComposer({ controller, mobile, compact = false, active = true, onAfterSend = null, autoFocus = true }) {
     const promptState = useControllerSelector(controller, (state) => {
         const activeSessionId = state.sessions.activeSessionId;
         const activeSession = activeSessionId ? state.sessions.byId[activeSessionId] || null : null;
@@ -8634,6 +8743,20 @@ function PromptComposer({ controller, mobile, active = true, onAfterSend = null
     const inputRef = React.useRef(null);
     const attachInputRef = React.useRef(null);
     const [dragOver, setDragOver] = React.useState(false);
+    const selectedQueued = promptState.selectedOutboxPhase === "queued";
+    const selectedCancelling = promptState.selectedOutboxPhase === "cancelling";
+    const selectedReadOnly = selectedQueued || selectedCancelling;
+    const placeholder = mobile && !promptState.editingPending ? (promptState.answerMode ? "Answer…" : "Message…") : promptState.answerMode
+        ? "Type an answer and press Enter"
+        : promptState.editingPending
+            ? selectedCancelling
+                ? "Cancellation requested"
+                : selectedQueued
+                    ? "Queued message selected"
+                    : "Edit the pending message, then send or cancel it"
+            : promptState.hasOutbox
+                ? "Type a message and press Enter to queue it behind the pending batch"
+                : "Type a message and press Enter";
 
     // Auto-grow: one line idle, sized to the RENDERED content (scrollHeight
     // sees soft wrap; counting "\n" does not). CSS max-height provides the
@@ -8661,7 +8784,10 @@ function PromptComposer({ controller, mobile, active = true, onAfterSend = null
         const mayHaveShrunk = length <= lastPromptLengthRef.current;
         lastPromptLengthRef.current = length;
         growInput(mayHaveShrunk || length === 0);
-    }, [growInput, promptState.value]);
+        // Empty textareas measure their placeholder too. Send briefly shows
+        // the long outbox hint; acknowledgement shortens it without changing
+        // the value or width, so neither input nor ResizeObserver will fire.
+    }, [growInput, promptState.value, placeholder]);
     React.useEffect(() => {
         // Width changes re-wrap the content; re-measure on viewport resizes
         // (covers rotation and the on-screen keyboard shrinking the pane).
@@ -8724,6 +8850,7 @@ function PromptComposer({ controller, mobile, active = true, onAfterSend = null
         const inputNode = inputRef.current;
         if (!active || promptState.modalOpen || !promptState.focused || !inputNode) return;
         if (document.activeElement !== inputNode) {
+            if (!autoFocus) return;
             // Programmatic focus pops the on-screen keyboard on touch devices;
             // there, focus only ever comes from the user's own tap.
             if (mobile) return;
@@ -8743,7 +8870,7 @@ function PromptComposer({ controller, mobile, active = true, onAfterSend = null
         if (inputNode.value === promptState.value && inputNode.selectionStart !== promptState.cursor) {
             inputNode.setSelectionRange(promptState.cursor, promptState.cursor);
         }
-    }, [active, mobile, promptState.cursor, promptState.value, promptState.focused, promptState.modalOpen]);
+    }, [active, mobile, autoFocus, promptState.cursor, promptState.value, promptState.focused, promptState.modalOpen]);
 
     const sendPrompt = React.useCallback(() => {
         controller.handleCommand(UI_COMMANDS.SEND_PROMPT)
@@ -8780,12 +8907,9 @@ function PromptComposer({ controller, mobile, active = true, onAfterSend = null
         : promptState.hasOutbox
             ? "+"
             : "❯";
-    const selectedQueued = promptState.selectedOutboxPhase === "queued";
-    const selectedCancelling = promptState.selectedOutboxPhase === "cancelling";
-    const selectedReadOnly = selectedQueued || selectedCancelling;
 
     return React.createElement("div", {
-        className: `ps-prompt-shell${mobile ? " is-mobile" : ""}${dragOver ? " is-drag-over" : ""}`,
+        className: `ps-prompt-shell${compact ? " is-compact" : ""}${mobile ? " is-mobile" : ""}${dragOver ? " is-drag-over" : ""}`,
         ...(canAttachImages ? {
             onDragOver: (event) => {
                 if (event.dataTransfer?.types?.includes?.("Files")) {
@@ -8852,17 +8976,7 @@ function PromptComposer({ controller, mobile, active = true, onAfterSend = null
             rows: 1,
             value: promptState.value,
             readOnly: selectedReadOnly,
-            placeholder: promptState.answerMode
-                ? "Type an answer and press Enter"
-                : promptState.editingPending
-                    ? selectedCancelling
-                        ? "Cancellation requested"
-                        : selectedQueued
-                        ? "Queued message selected"
-                        : "Edit the pending message, then send or cancel it"
-                    : promptState.hasOutbox
-                        ? "Type a message and press Enter to queue it behind the pending batch"
-                : "Type a message and press Enter",
+            placeholder,
             // On touch, Enter inserts a newline (the chevron sends) — the
             // keyboard must not advertise a send that will not happen.
             enterKeyHint: mobile ? "enter" : "send",
@@ -8913,7 +9027,7 @@ function PromptComposer({ controller, mobile, active = true, onAfterSend = null
             // pointerdown preventDefault on every action keeps focus in the
             // textarea — on a phone, tapping Send must not collapse the
             // keyboard between messages.
-            canAttachImages
+            canAttachImages && !compact
                 ? React.createElement(React.Fragment, null,
                     React.createElement("input", {
                         ref: attachInputRef,
@@ -8950,7 +9064,7 @@ function PromptComposer({ controller, mobile, active = true, onAfterSend = null
                     onClick: cancelPending,
                 }, selectedQueued ? "Delete" : "Cancel")
                 : null,
-            promptState.canStopTurn || stoppingTurn
+            !compact && (promptState.canStopTurn || stoppingTurn)
                 ? React.createElement("button", {
                     type: "button",
                     className: `ps-stop-button${stoppingTurn ? " is-stopping" : ""}`,
@@ -9006,14 +9120,29 @@ function IconButton({ icon, label, onClick, disabled = false, active = false, cl
     const timerRef = React.useRef(null);
     const longPressRef = React.useRef(false);
 
-    // Keep the tooltip within the viewport horizontally — the leftmost/rightmost
-    // buttons would otherwise clip off the edge (the tooltip is center-anchored).
+    // Measure wrapped text against the visual viewport, including the keyboard.
     React.useLayoutEffect(() => {
-        if (!tip || !tipRef.current || typeof window === "undefined") return;
-        const half = tipRef.current.offsetWidth / 2;
-        const margin = 6;
-        const clampedX = Math.max(half + margin, Math.min(tip.x, window.innerWidth - half - margin));
-        tipRef.current.style.left = `${clampedX}px`;
+        if (!tip || !tipRef.current || !btnRef.current) return;
+        const el = tipRef.current, viewport = window.visualViewport;
+        const update = () => {
+        const left = viewport?.offsetLeft || 0, top = viewport?.offsetTop || 0;
+        const width = viewport?.width || window.innerWidth, height = viewport?.height || window.innerHeight;
+        const margin = 6, r = btnRef.current.getBoundingClientRect();
+        el.style.width = "max-content";
+        el.style.maxWidth = `${Math.min(220, width - 2 * margin)}px`;
+        el.style.maxHeight = `${height - 2 * margin}px`;
+        const box = el.getBoundingClientRect();
+        let below = tip.placement === "below";
+        if (!below && r.top - box.height - margin < top) below = true;
+        if (below && r.bottom + box.height + margin > top + height && r.top - box.height - margin >= top) below = false;
+        const x = Math.max(left + margin, Math.min(r.left + r.width / 2 - box.width / 2, left + width - box.width - margin));
+        const y = Math.max(top + margin, Math.min(below ? r.bottom + margin : r.top - box.height - margin, top + height - box.height - margin));
+        el.style.transform = "none";
+        el.style.left = `${x}px`; el.style.top = `${y}px`;
+        };
+        update(); viewport?.addEventListener("resize", update); viewport?.addEventListener("scroll", update);
+        window.addEventListener("resize", update);
+        return () => { viewport?.removeEventListener("resize", update); viewport?.removeEventListener("scroll", update); window.removeEventListener("resize", update); };
     }, [tip]);
 
     const reveal = (preferAbove = false) => {
@@ -9135,7 +9264,7 @@ function IconButton({ icon, label, onClick, disabled = false, active = false, cl
     tooltipNode);
 }
 
-function Toolbar({ controller, mobile, canvasPaneOpen = false, onToggleCanvasPane = null, mobilePane = "workspace", onSelectMobilePane = null, mobileMainLayout = "split" }) {
+function Toolbar({ controller, mobile, moa = null, canvasPaneOpen = false, onToggleCanvasPane = null, mobilePane = "workspace", onSelectMobilePane = null, mobileMainLayout = "split" }) {
     const [headerSlot, setHeaderSlot] = React.useState(null);
     React.useEffect(() => {
         if (typeof document === "undefined") return;
@@ -9274,10 +9403,21 @@ function Toolbar({ controller, mobile, canvasPaneOpen = false, onToggleCanvasPan
             icon: React.createElement(MainLayoutGlyph),
             label: "Workspace — sessions, chat and panels",
             onClick: () => controller.handleCommand(UI_COMMANDS.OPEN_WORKSPACE).catch(() => {}),
-            active: !adminVisible && !budgetOpen,
+            active: !moa?.active && !adminVisible && !budgetOpen,
         }]),
     ];
 
+    if (moa) buttonDefs.push({
+        key: "moa", icon: React.createElement(MoaGlyph),
+        label: moa.returnTo ? "Back to MoA — Master of Agents" : "Master of Agents",
+        active: moa.active, disabled: !moa.loaded,
+        onClick: () => {
+            controller.dispatch({ type: "ui/canvasMaximized", on: false });
+            controller.handleCommand(UI_COMMANDS.OPEN_WORKSPACE).catch(() => {});
+            moa.open();
+        },
+    });
+
     const renderButton = (def) => {
         const button = React.createElement(IconButton, {
             key: def.badge ? undefined : def.key,
@@ -9331,8 +9471,9 @@ function Toolbar({ controller, mobile, canvasPaneOpen = false, onToggleCanvasPan
         ];
         return React.createElement("div", { className: "ps-toolbar is-mobile" },
             React.createElement("div", { className: "ps-toolbar-row ps-toolbar-row-primary" },
-                React.createElement("div", { className: "ps-toolbar-row-actions" }, buttonDefs.map(renderButton)),
+                React.createElement("div", { className: "ps-toolbar-row-actions" }, buttonDefs.filter(def => def.key !== "moa").map(renderButton)),
                 React.createElement("div", { className: "ps-toolbar-row-actions is-panes" },
+                    ...buttonDefs.filter(def => def.key === "moa").map(renderButton),
                     paneDefs.map((def) => React.createElement(IconButton, {
                         key: def.id === "workspace" ? "workspace" : "diagnostics",
                         icon: React.createElement(def.icon),
@@ -9355,10 +9496,10 @@ function Toolbar({ controller, mobile, canvasPaneOpen = false, onToggleCanvasPan
     // mode. Budget and the Admin Console replace the workspace; nothing on
     // the left applies there. Modes are exclusive (the controller closes one
     // when the other opens) and the Workspace button is the way back.
-    const mode = adminVisible ? "admin" : (budgetOpen ? "budget" : "workspace");
+    const mode = moa?.active ? "moa" : adminVisible ? "admin" : (budgetOpen ? "budget" : "workspace");
     const ACTIONS = ["new", "filter"];
     const PANELS = ["canvas", "diagnostics"];
-    const MODES = ["workspace", "budget", "admin"];
+    const MODES = ["workspace", "moa", "budget", "admin"];
 
     // While the canvas is full screen, ANY other button first drops full
     // screen and then does its own job. Pressing Filter and watching nothing
@@ -9366,10 +9507,11 @@ function Toolbar({ controller, mobile, canvasPaneOpen = false, onToggleCanvasPan
     // it — is the confusing half of every full-screen mode. The Canvas toggle
     // is exempt: it already means "put the canvas away", and closing drops
     // the flag in the reducer.
-    const withRestore = (def) => (!canvasMaximized || def.key === "canvas" ? def : {
+    const withRestore = (def) => ((!canvasMaximized || def.key === "canvas") && !(moa?.active && ["workspace", "budget", "admin"].includes(def.key)) ? def : {
         ...def,
         onClick: (...args) => {
             controller.dispatch({ type: "ui/canvasMaximized", on: false });
+            if (moa?.active && ["workspace", "budget", "admin"].includes(def.key)) moa.leave();
             return def.onClick?.(...args);
         },
     });
@@ -9390,14 +9532,14 @@ function Toolbar({ controller, mobile, canvasPaneOpen = false, onToggleCanvasPan
         ...pick(["theme"]),
     ];
 
-    const toolbar = React.createElement("div", { className: "ps-toolbar" },
+    const toolbar = React.createElement("div", { className: `ps-toolbar${moa?.active ? " is-moa" : ""}` },
         // Three columns: left rail | main controls | right rail. Full-screen
         // canvas uses the otherwise-empty left rail for the normal actions so
         // they do not crowd the canvas metadata and controls across the top.
         React.createElement("div", { className: "ps-toolbar-side is-left" },
-            canvasMaximized ? leftCluster : null),
+            moa?.active ? React.createElement("div", { id: "ps-moa-status-slot" }) : canvasMaximized ? leftCluster : null),
         React.createElement("div", { className: "ps-toolbar-actions" },
-            canvasMaximized ? null : leftCluster),
+            moa?.active ? React.createElement("div", { id: "ps-moa-header-slot" }) : canvasMaximized ? null : leftCluster),
         React.createElement("div", { className: "ps-toolbar-side is-right" },
             // The portal header parks its version/status meta here, LEFT of
             // the tool buttons, and its sign-out glyph in the slot after
@@ -10129,32 +10271,30 @@ function budgetPlural(n, one, many) {
     return `${n} ${n === 1 ? one : many}`;
 }
 
-/**
- * A model reference a session can run: `<provider>:<model>`.
- *
- * The catalog's `providerId` is the TYPE ("azure-openai"); a provider is an
- * instance of that type with a name of its own, and both a model-scoped limit
- * and a default tuple are refused by the database unless the model half names
- * the provider it belongs to.
- */
-function budgetModelsForProvider(models, provider) {
-    if (!provider?.typeId) return [];
-    return models
-        .filter((model) => model.providerId === provider.typeId)
-        .map((model) => ({
-            qualifiedName: `${provider.name}:${model.modelName}`,
-            modelName: model.modelName,
-        }));
-}
-
-/** The provider TYPES this deployment can instantiate, from its model catalog. */
-function budgetProviderTypes(models) {
-    const seen = new Map();
+/** Runtime catalogs name a pool; type catalogs name a provider template. */
+function budgetModelsForProvider(models, provider, rawRows = []) {
+    if (!provider?.name) return [];
+    const choices = new Map();
     for (const model of models) {
-        if (!model.providerId || seen.has(model.providerId)) continue;
-        seen.set(model.providerId, { id: model.providerId, type: model.providerType || model.providerId });
+        const matches = model.catalogKind === "runtime_provider"
+            ? model.providerId === provider.name
+            : model.catalogKind === "provider_type"
+                ? model.providerId === provider.typeId
+                : model.providerId === provider.name || model.providerId === provider.typeId;
+        if (!matches) continue;
+        const qualifiedName = `${provider.name}:${model.modelName}`;
+        choices.set(qualifiedName, { qualifiedName, modelName: model.modelName });
+    }
+    // Existing caps remain editable even when the catalog is unavailable or a
+    // model was retired. Never borrow a model reference from another pool.
+    for (const row of rawRows) {
+        if (row.providerName !== provider.name || row.rowKind !== "model"
+            || !String(row.scope || "").startsWith(`${provider.name}:`)) continue;
+        choices.set(row.scope, {
+            qualifiedName: row.scope, modelName: row.scope.slice(provider.name.length + 1),
+        });
     }
-    return [...seen.values()].sort((a, b) => a.id.localeCompare(b.id));
+    return [...choices.values()];
 }
 
 /** listModels() is flat on the web transport and grouped on the direct one. */
@@ -10164,15 +10304,18 @@ function budgetNormalizeModels(raw) {
         : (Array.isArray(raw?.providers) ? raw.providers : (Array.isArray(raw?.models) ? raw.models : []));
     const flat = top.flatMap((entry) => (
         Array.isArray(entry?.models)
-            ? entry.models.map((model) => ({ ...model, providerId: model.providerId || entry.providerId }))
+            ? entry.models.map((model) => ({
+                ...model, providerId: model.providerId || entry.providerId,
+                catalogKind: model.catalogKind || entry.catalogKind,
+            }))
             : [entry]
     ));
     return flat
         .filter((model) => model && (model.modelName || model.qualifiedName))
         .map((model) => ({
-            modelName: model.modelName || String(model.qualifiedName).split(":").pop(),
+            modelName: model.modelName || String(model.qualifiedName).split(":").slice(1).join(":"),
             providerId: model.providerId || "",
-            providerType: model.providerType || model.providerId || "",
+            catalogKind: model.catalogKind || null,
         }));
 }
 
@@ -10710,7 +10853,7 @@ function ProviderSystemSpend({ view }) {
  * reachable.
  */
 function EditProviderSheet({
-    row, rawRows, models, isAdmin, busy, error, onCancel, onRun,
+    row, rawRows, models, modelsLoading, modelsError, onRetryModels, isAdmin, busy, error, onCancel, onRun,
     initialPeriod = "day", initialScope = "*",
 }) {
     const shared = row.class === "shared";
@@ -10854,10 +10997,13 @@ function EditProviderSheet({
                 className: "ps-budget-input", "aria-label": "Model this limit applies to",
                 value: model, onChange: (event) => setModel(event.target.value),
             }, models.length === 0
-                ? React.createElement("option", { value: "" }, "No models are listed for this provider's type")
+                ? React.createElement("option", { value: "" }, modelsLoading ? "Loading models…" : modelsError ? "Model catalog unavailable" : "No models listed for this provider")
                 : models.map((option) => React.createElement("option", {
                     key: option.qualifiedName, value: option.qualifiedName,
-                }, option.qualifiedName))) : null),
+                }, option.qualifiedName))) : null,
+            modelsError ? React.createElement("div", { className: "ps-budget-note is-warn", role: "status" },
+                "Could not load the model catalog. Existing model limits remain editable. ",
+                React.createElement("button", { type: "button", onClick: onRetryModels, disabled: modelsLoading }, "Retry")) : null),
         React.createElement(SheetField, {
             label: "Tokens",
             hint: parsed
@@ -11643,6 +11789,9 @@ function ProviderBudgetView({ controller }) {
     // a failure is not fatal — the controls that need it say they have nothing
     // to offer.
     const [models, setModels] = React.useState([]);
+    const [modelsLoading, setModelsLoading] = React.useState(true);
+    const [modelsError, setModelsError] = React.useState(false);
+    const [modelsRequest, setModelsRequest] = React.useState(0);
     const [providerTypes, setProviderTypes] = React.useState(new Map());
     const [defaults, setDefaults] = React.useState(null);
     const readDefaults = React.useCallback(() => {
@@ -11653,11 +11802,14 @@ function ProviderBudgetView({ controller }) {
     }, [controller]);
     React.useEffect(() => {
         let live = true;
-        if (typeof controller.transport.listModels === "function") {
-            Promise.resolve(controller.transport.listModels())
-                .then((rows) => { if (live) setModels(budgetNormalizeModels(rows)); })
-                .catch(() => {});
-        }
+        setModelsLoading(true);
+        Promise.resolve().then(() => {
+            if (typeof controller.transport.listModels !== "function") throw new Error("Model catalog unavailable");
+            return controller.transport.listModels();
+        }).then((rows) => {
+            if (live) { setModels(budgetNormalizeModels(rows)); setModelsError(false); }
+        }).catch(() => { if (live) setModelsError(true); })
+            .finally(() => { if (live) setModelsLoading(false); });
         if (typeof controller.transport.listProviders === "function") {
             Promise.resolve(controller.transport.listProviders())
                 .then((rows) => {
@@ -11670,7 +11822,7 @@ function ProviderBudgetView({ controller }) {
         }
         readDefaults();
         return () => { live = false; };
-    }, [controller, readDefaults]);
+    }, [controller, readDefaults, modelsRequest]);
 
     // Opened by the toolbar, which loads it. Mounting with nothing behind it —
     // a restored state, a second mount — reads once rather than showing zeros.
@@ -11755,13 +11907,14 @@ function ProviderBudgetView({ controller }) {
     const modelsForSelected = selected
         ? budgetModelsForProvider(models, {
             name: selected.providerName, typeId: providerTypes.get(selected.providerName) || "",
-        })
+        }, rawRows)
         : [];
 
     let sheetEl = null;
     if (sheet?.kind === "edit" && selectedProvider) {
         sheetEl = React.createElement(EditProviderSheet, {
             row: selectedProvider, rawRows, models: modelsForSelected, isAdmin: view.isAdmin,
+            modelsLoading, modelsError, onRetryModels: () => setModelsRequest((value) => value + 1),
             // MAJOR 17: the sheet opens on the limit the reader was standing
             // on, rather than always on Daily / all models.
             initialPeriod: sheet.period || "day",
@@ -12596,8 +12749,17 @@ function DistillerModelPickers({ controller, extras }) {
     );
 }
 
-function useKeyboardShortcuts(controller, mobile) {
+function ScopedModalLayer({ controller }) {
+    const modal = useControllerSelector(controller, state => state.ui.modal);
+    // Isolated MoA controllers own keyboard commands only while their dialog
+    // is open. They must never install normal-workspace shortcuts globally.
+    useKeyboardShortcuts(controller, false, !modal);
+    return React.createElement(ModalLayer, { controller });
+}
+
+function useKeyboardShortcuts(controller, mobile, suspended = false) {
     React.useEffect(() => {
+        if (suspended) return undefined;
         const handler = (event) => {
             // A focused control that handled the key owns it. The diagnostics
             // seam answers ArrowUp/ArrowDown itself; letting the same keydown
@@ -12942,7 +13104,7 @@ function useKeyboardShortcuts(controller, mobile) {
 
         window.addEventListener("keydown", handler);
         return () => window.removeEventListener("keydown", handler);
-    }, [controller, mobile]);
+    }, [controller, mobile, suspended]);
 }
 
 function formatAdminPrincipalLabel(principal) {
@@ -14143,11 +14305,11 @@ export function createWebPilotSwarmController({ transport, mode = "remote", bran
     return new PilotSwarmUiController({ store, transport });
 }
 
-export function PilotSwarmWebApp({ controller }) {
+export function PilotSwarmWebApp({ controller, suspended = false, moa = null }) {
     const viewportRef = React.useRef(null);
     const mainGridRef = React.useRef(null);
-    const viewport = useMeasuredViewport(viewportRef);
-    const mainGridViewport = useMeasuredViewport(mainGridRef);
+    const viewport = useMeasuredViewport(viewportRef, suspended);
+    const mainGridViewport = useMeasuredViewport(mainGridRef, suspended);
     const gridViewport = computeGridViewport(viewport);
 
     // Publish the real viewport in character cells. Without this the ui-core
@@ -14209,6 +14371,7 @@ export function PilotSwarmWebApp({ controller }) {
     // toolbar button). Desktop has real columns and needs no such cycle.
     const [mobileMainLayout, setMobileMainLayout] = React.useState("split");
     const state = useControllerSelector(controller, (rootState) => ({
+        moa: rootState.ui.moa,
         themeId: rootState.ui.themeId,
         touchScale: Boolean(rootState.ui.touchScale),
         sessionDetailCollapsed: Boolean(rootState.ui.sessionDetailCollapsed),
@@ -14224,6 +14387,7 @@ export function PilotSwarmWebApp({ controller }) {
         // Conversion to a sorted array happens inside `normalizeProfileSettings`.
         collapsedSessionIds: rootState.sessions.collapsedIds,
         activeSessionId: rootState.sessions.activeSessionId || null,
+        revealedCreatedSessionId: rootState.ui.revealedCreatedSessionId || null,
         promptRows: getStatePromptRows(rootState),
         rightPaneMode: rootState.ui.rightPaneMode || "panes",
         // The two optional desktop columns, independent of each other.
@@ -14278,7 +14442,21 @@ export function PilotSwarmWebApp({ controller }) {
     const readOnlyChatPane = state.activeSessionIsGroup;
     const effectivePromptRows = readOnlyChatPane ? 0 : state.promptRows;
 
-    useKeyboardShortcuts(controller, mobile);
+    useKeyboardShortcuts(controller, mobile, suspended);
+
+    const lastCreatedSessionRef = React.useRef(state.revealedCreatedSessionId);
+    React.useEffect(() => {
+        if (lastCreatedSessionRef.current === state.revealedCreatedSessionId) return;
+        lastCreatedSessionRef.current = state.revealedCreatedSessionId;
+        if (!state.revealedCreatedSessionId || state.activeSessionId !== state.revealedCreatedSessionId) return;
+        if (mobile) {
+            setMobilePane("workspace");
+            setMobileMainLayout("chat");
+        }
+        // Creation opens the ordinary session workspace, without modifying
+        // any of the user's saved Master of Agents panels.
+        if (moa?.active) moa.leave();
+    }, [state.revealedCreatedSessionId, state.activeSessionId, mobile, moa]);
 
     // Tell the reducer which device slot of the per-session views this tab
     // owns. Only a desktop applies and records them; a phone keeps its
@@ -14440,7 +14618,7 @@ export function PilotSwarmWebApp({ controller }) {
                 );
                 const settingsJson = JSON.stringify(settings);
                 const currentSettingsBeforeApply = profileSettingsFromViewState(
-                    controller.getState(), otherTouchScaleRef.current, desktopRightPaneModeRef.current, desktopPanesRef.current,
+                    profileViewState(controller.getState()), otherTouchScaleRef.current, desktopRightPaneModeRef.current, desktopPanesRef.current,
                 );
                 const currentSettingsBeforeApplyJson = JSON.stringify(currentSettingsBeforeApply);
                 const hasUnpersistedLocalChange = profileSettingsHydratedRef.current
@@ -14448,7 +14626,8 @@ export function PilotSwarmWebApp({ controller }) {
                     && currentSettingsBeforeApplyJson !== lastProfileSettingsJsonRef.current;
                 const hasPendingLocalWrite = Boolean(profileSettingsSaveTimerRef.current)
                     || profileSettingsSaveInFlightRef.current
-                    || hasUnpersistedLocalChange;
+                    || hasUnpersistedLocalChange
+                    || controller.getState().ui.moaDirty === true;
                 if (!hasPendingLocalWrite && appliedProfileSettingsJsonRef.current !== settingsJson) {
                     controller.dispatch({ type: "profileSettings/apply", settings });
                     appliedProfileSettingsJsonRef.current = settingsJson;
@@ -14483,7 +14662,7 @@ export function PilotSwarmWebApp({ controller }) {
                 // remote state by definition and there is nothing to lose).
                 if (!profileSettingsHydratedRef.current || !hasPendingLocalWrite) {
                     const currentSettings = profileSettingsFromViewState(
-                        controller.getState(), otherTouchScaleRef.current, desktopRightPaneModeRef.current, desktopPanesRef.current,
+                        profileViewState(controller.getState()), otherTouchScaleRef.current, desktopRightPaneModeRef.current, desktopPanesRef.current,
                     );
                     lastProfileSettingsJsonRef.current = JSON.stringify(currentSettings);
                 }
@@ -14527,14 +14706,20 @@ export function PilotSwarmWebApp({ controller }) {
         profileSettingsSaveTimerRef.current = setTimeout(() => {
             profileSettingsSaveTimerRef.current = null;
             profileSettingsSaveInFlightRef.current = true;
+            const moaRevision = controller.getState().ui.moaRevision;
+            controller.dispatch({ type: "ui/moaSaveStatus", status: "saving" });
             saveProfileSettings(controller, settings)
-                .catch(() => {})
+                .then(() => controller.dispatch({ type: "ui/moaSaveStatus", status: "saved", revision: moaRevision }))
+                .catch(() => {
+                    lastProfileSettingsJsonRef.current = null;
+                    controller.dispatch({ type: "ui/moaSaveStatus", status: "error" });
+                })
                 .finally(() => {
                     profileSettingsSaveInFlightRef.current = false;
                 });
         }, 400);
         return undefined;
-    }, [controller, state.activeSessionId, state.activityPaneAdjust, state.agentPickerUsage, state.canvasOpen, state.canvasPaneAdjust, state.canvasPrefs, state.canvasZen, state.collapsedSessionIds, state.diagnosticsOpen, state.diagnosticsPaneAdjust, state.diagnosticsSplitAdjust, state.ownerFilter, state.paneAdjust, state.manualOrder, state.pinnedIds, state.portalSessionColumnAdjust, state.rightPaneMode, state.sessionDetailCollapsed, state.sessionPaneAdjust, state.sessionViews, state.themeId, state.touchScale]);
+    }, [controller, state.moa, state.activeSessionId, state.activityPaneAdjust, state.agentPickerUsage, state.canvasOpen, state.canvasPaneAdjust, state.canvasPrefs, state.canvasZen, state.collapsedSessionIds, state.diagnosticsOpen, state.diagnosticsPaneAdjust, state.diagnosticsSplitAdjust, state.ownerFilter, state.paneAdjust, state.manualOrder, state.pinnedIds, state.portalSessionColumnAdjust, state.rightPaneMode, state.sessionDetailCollapsed, state.sessionPaneAdjust, state.sessionViews, state.themeId, state.touchScale]);
 
     React.useEffect(() => {
         applyDocumentTheme(state.themeId);
@@ -14645,7 +14830,7 @@ export function PilotSwarmWebApp({ controller }) {
         Number(state.canvasPrefs?.[state.activeSessionId]?.zenRailPx) || 380));
     // Escape steps down one rung: full screen -> zen -> normal workspace.
     React.useEffect(() => {
-        if (!canvasMaximized && !zenActive) return undefined;
+        if (suspended || (!canvasMaximized && !zenActive)) return undefined;
         const onKey = (e) => {
             if (e.key !== "Escape") return;
             controller.dispatch(canvasMaximized
@@ -14654,7 +14839,7 @@ export function PilotSwarmWebApp({ controller }) {
         };
         window.addEventListener("keydown", onKey);
         return () => window.removeEventListener("keydown", onKey);
-    }, [controller, canvasMaximized, zenActive]);
+    }, [controller, canvasMaximized, zenActive, suspended]);
 
     // The right block is exactly as wide as the columns in it. Pixels, not a
     // share of the window: when a column closes, its pixels go to chat and
@@ -14862,7 +15047,7 @@ export function PilotSwarmWebApp({ controller }) {
     // it — the layer below is a SIBLING of this content and covers it. Drawing
     // a pane here would only be invisible work.
     else if (mobilePane === "canvas") mobileContent = null;
-    else mobileContent = React.createElement(MobileWorkspace, { controller, layout: mobileMainLayout });
+    else mobileContent = React.createElement(MobileWorkspace, { controller, layout: mobileMainLayout, onEnterZen: moa?.openMobileZen });
 
     // The phone's canvas layer: a sibling of the content region's pane, NOT a
     // child of any pane. That is deliberate — panes mount and unmount as the
@@ -14877,13 +15062,16 @@ export function PilotSwarmWebApp({ controller }) {
         })
         : null;
 
+    if (suspended) return React.createElement(ControllerContext.Provider, { value: controller },
+        React.createElement(Toolbar, { controller, mobile: false, moa }),
+        React.createElement(ModalLayer, { controller }));
     return React.createElement(ControllerContext.Provider, { value: controller },
         React.createElement("div", { ref: viewportRef, className: "ps-web-shell" },
         // The phone's toolbar carries its NAVIGATION (the three view modes,
         // plus the Main layout cycle), so it renders on every pane — hiding it
         // anywhere would trap the user with no way back.
         React.createElement(Toolbar, {
-            controller,
+            controller, moa,
             mobile,
             canvasPaneOpen: mobileCanvasOpen,
             onToggleCanvasPane: toggleMobileCanvas,
@@ -14921,3 +15109,6 @@ export function PilotSwarmWebApp({ controller }) {
             : null,
         React.createElement(ModalLayer, { controller })));
 }
+
+// Browser hosts may compose these existing surfaces with isolated controllers.
+export { SessionHeaderStatus, ChatPane, CanvasFrame, SessionPane, SessionRowContent, SessionDetailBox, SessionComposer, ScopedModalLayer, ControllerContext };