pilotswarm 0.5.60 → 0.5.62

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

@@ -36,6 +36,7 @@ import {
     selectArtifactPickerModal,
     selectArtifactUploadModal,
     selectLiveActivityLines,
+    selectActiveOutboxMessages,
     selectChatLines,
     selectChatPaneChrome,
     selectOutboxOverlayLines,
@@ -606,12 +607,8 @@ function materializeProfileSettings(remoteSettings, defaults) {
         // synthesizing one here would let a poll clobber a fresh local toggle.
         ...(hasOwn(normalizedRemote, touchScaleKey())
             ? { touchScale: normalizedRemote[touchScaleKey()] }
-            // Profiles written before the per-device split carry a single
-            // `touchScale`, which IS the desktop key — so only a phone needs to
-            // inherit it, and only until it saves a slot of its own.
-            : (isNarrowViewport() && hasOwn(normalizedRemote, "touchScale")
-                ? { touchScale: normalizedRemote.touchScale }
-                : {})),
+            // Never inherit the other device class's preference.
+            : {}),
         // Read back for the same reason as touchScale above: written but never
         // merged means the fold state resets on every reload. No default here
         // either — absent must stay absent so a poll cannot overwrite a toggle
@@ -1330,6 +1327,22 @@ function SystemNoticeLine({ line, theme }) {
             : null);
 }
 
+function ChatCallLine({ line }) {
+    const [open, setOpen] = React.useState(false);
+    return React.createElement("details", {
+        className: "ps-system-notice ps-chat-call",
+        "data-call-id": line.callKey,
+        onToggle: event => setOpen(event.currentTarget.open),
+    },
+    React.createElement("summary", { className: "ps-system-notice-summary ps-chat-call-summary" },
+        React.createElement("span", { className: "ps-chat-call-tag" }, line.category || "Tool"),
+        React.createElement("span", { className: "ps-system-notice-summary-text" }, line.text),
+        line.status ? React.createElement("span", { className: `ps-chat-call-status${line.status === "Failed" ? " is-failed" : ""}` }, line.status) : null),
+    open ? React.createElement("div", { className: "ps-system-notice-body" },
+        line.time ? React.createElement("div", { className: "ps-chat-call-time" }, line.time) : null,
+        React.createElement("pre", { className: "ps-chat-call-payload" }, line.body)) : null);
+}
+
 /**
  * A canvas action is a button press inside the drawn page, not something the
  * viewer typed. Printing the raw `[canvas-action] {…}` JSON as a chat message
@@ -3229,6 +3242,13 @@ function parseStructuredChatBlocks(lines = []) {
     for (let index = 0; index < lines.length;) {
         const currentLine = lines[index];
 
+        if (currentLine?.kind === "chatCall" || currentLine?.callPreview !== undefined) {
+            blocks.push({ type: "chatCall", line: currentLine.callPreview !== undefined
+                ? { ...currentLine, text: currentLine.callPreview, category: "Agent" } : currentLine });
+            index += 1;
+            continue;
+        }
+
         if (currentLine?.kind === "assistantPreview") {
             blocks.push({ type: "assistantPreview", line: currentLine });
             index += 1;
@@ -3654,6 +3674,9 @@ const AssistantPreviewCard = React.memo(function AssistantPreviewCard({ line, th
 function StructuredBlockList({ blocks, theme, controller = null }) {
     return React.createElement(React.Fragment, null,
         (blocks || []).map((block, index) => {
+            if (block.type === "chatCall") {
+                return React.createElement(ChatCallLine, { key: block.line.callKey, line: block.line });
+            }
             if (block.type === "assistantPreview") {
                 return React.createElement(AssistantPreviewCard, {
                     key: block.line.previewKey,
@@ -3979,7 +4002,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);
@@ -4098,9 +4121,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 })),
             )
@@ -4215,7 +4238,7 @@ export function waitReasonLabel(session) {
     return session?.cronActive === true ? "On wake" : "Waiting";
 }
 
-function SessionDetailBox({ session, childCount = 0, pause = null, controller = null, collapsed = false, onToggle = null }) {
+function SessionDetailBox({ session, childCount = 0, pause = null, controller = null, collapsed = false, onToggle = null, onOpenBudget = null }) {
     // EVERY field renders on EVERY selection, empty ones as an em dash. The box
     // is a fixed grid of rows, so moving through the list cannot change its
     // height — a box that grew and shrank would shove the list under the
@@ -4312,12 +4335,12 @@ function SessionDetailBox({ session, childCount = 0, pause = null, controller =
         pause && pause.clears
             ? React.createElement("span", { className: "ps-session-detail-clears" }, pause.clears)
             : null,
-        pause && controller ? React.createElement("button", {
+        pause && (controller || onOpenBudget) ? React.createElement("button", {
             type: "button", className: "ps-budget-link",
             title: pause.provider
                 ? `Open ${pause.provider} in Providers & Budgets`
                 : "Open providers and budgets",
-            onClick: () => controller.openBudget(
+            onClick: () => (onOpenBudget || (options => controller.openBudget(options)))(
                 pause.provider ? { provider: pause.provider } : {},
             ).catch(() => {}),
         }, pause.provider ? `Open ${pause.provider}` : "Open providers and budgets") : null));
@@ -6407,7 +6430,7 @@ function SessionModifyModal({ controller, sessionId, initialTitle, currentModel,
             error ? React.createElement("div", { className: "ps-share-error" }, error) : null));
 }
 
-function SessionComposer({ controller, onReadOnlyFocus = null }) {
+function SessionComposer({ controller, onReadOnlyFocus = null, mobile = false, compact = false, autoFocus = !mobile }) {
     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);
@@ -6418,10 +6441,30 @@ function SessionComposer({ controller, onReadOnlyFocus = null }) {
         ? 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: false, active: true }));
-}
-
-function ChatPane({ controller, mobile = false, fullWidth = false, showComposer = true }) {
+        : React.createElement(PromptComposer, { controller, mobile, compact, autoFocus, 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) => {
@@ -6532,6 +6575,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
@@ -6587,11 +6634,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",
@@ -6941,7 +6989,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",
@@ -6949,7 +6997,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" },
@@ -6962,7 +7010,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. */
@@ -8688,7 +8736,7 @@ function formatAttachmentSize(sizeBytes) {
     return `${bytes} B`;
 }
 
-function PromptComposer({ controller, mobile, active = true, onAfterSend = null, autoFocus = true }) {
+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;
@@ -8720,7 +8768,7 @@ function PromptComposer({ controller, mobile, active = true, onAfterSend = null,
     const selectedQueued = promptState.selectedOutboxPhase === "queued";
     const selectedCancelling = promptState.selectedOutboxPhase === "cancelling";
     const selectedReadOnly = selectedQueued || selectedCancelling;
-    const placeholder = promptState.answerMode
+    const placeholder = mobile && !promptState.editingPending ? (promptState.answerMode ? "Answer…" : "Message…") : promptState.answerMode
         ? "Type an answer and press Enter"
         : promptState.editingPending
             ? selectedCancelling
@@ -8824,7 +8872,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;
+            if (!autoFocus || (typeof autoFocus === "function" && !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;
@@ -8883,7 +8931,7 @@ function PromptComposer({ controller, mobile, active = true, onAfterSend = null,
             : "❯";
 
     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")) {
@@ -9001,7 +9049,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,
@@ -9038,7 +9086,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" : ""}`,
@@ -9094,14 +9142,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) => {
@@ -9366,7 +9429,7 @@ function Toolbar({ controller, mobile, moa = null, canvasPaneOpen = false, onTog
         }]),
     ];
 
-    if (!mobile && moa?.desktop) buttonDefs.push({
+    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,
@@ -9430,8 +9493,9 @@ function Toolbar({ controller, mobile, moa = null, canvasPaneOpen = false, onTog
         ];
         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),
@@ -10229,32 +10293,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. */
@@ -10264,15 +10326,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,
         }));
 }
 
@@ -10810,7 +10875,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";
@@ -10954,10 +11019,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
@@ -11743,6 +11811,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(() => {
@@ -11753,11 +11824,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) => {
@@ -11770,7 +11844,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.
@@ -11855,13 +11929,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",
@@ -14249,6 +14324,9 @@ export function createWebPilotSwarmController({ transport, mode = "remote", bran
         branding,
         docs,
     }));
+    // Only the initial device default. A saved value for this device wins
+    // when the profile loads, including an explicit mobile opt-out.
+    store.dispatch({ type: "ui/touchScale", enabled: isNarrowViewport });
     return new PilotSwarmUiController({ store, transport });
 }
 
@@ -14994,7 +15072,7 @@ export function PilotSwarmWebApp({ controller, suspended = false, moa = null })
     // 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
@@ -15058,4 +15136,4 @@ export function PilotSwarmWebApp({ controller, suspended = false, moa = null })
 }
 
 // Browser hosts may compose these existing surfaces with isolated controllers.
-export { ChatPane, CanvasFrame, SessionPane, SessionRowContent, SessionDetailBox, SessionComposer, ScopedModalLayer, ControllerContext };
+export { SessionHeaderStatus, ChatPane, CanvasFrame, SessionPane, SessionRowContent, SessionDetailBox, SessionComposer, ScopedModalLayer, ControllerContext };

package/web/dist/assets/{abnfDiagram-VRR7QNED-CXEHJkTQ.js → abnfDiagram-VRR7QNED-DAiG41W-.js}

@@ -1 +1 @@
-import{g as p,r as u,d as a}from"./chunk-MOJQB5TN-D5GeF8ZZ.js";import{p as f}from"./chunk-JWPE2WC7-C_Fv9QUd.js";import{_ as n,l as o}from"./mermaid.core-DNmC5O4Y.js";import{M as c,b as d}from"./cynefin-VYW2F7L2-CUy2C8UT.js";import"./pilotswarm-493nqGmy.js";var v=d().RailroadAbnf.parser.LangiumParser,i=n(e=>{const r=e.alternatives.map(g);return r.length===1?r[0]:{type:"choice",alternatives:r}},"transformAlternation"),g=n(e=>{const r=e.elements.map(y);return r.length===1?r[0]:{type:"sequence",elements:r}},"transformConcatenation"),b=n(e=>{if(e.includes("*")){const[t,s]=e.split("*"),l=t?parseInt(t,10):0,m=s?parseInt(s,10):1/0;return{min:l,max:m}}const r=parseInt(e,10);return{min:r,max:r}},"parseRepeat"),y=n(e=>{const r=A(e.primary);if(!e.repeat)return r;const{min:t,max:s}=b(e.repeat);return t===0&&s===1?{type:"optional",element:r}:{type:"repetition",element:r,min:t,max:s}},"transformElement"),A=n(e=>{switch(e.$type){case"AbnfStringLiteral":return{type:"terminal",value:e.value};case"AbnfNumVal":return{type:"terminal",value:e.value};case"AbnfRuleName":return{type:"nonterminal",name:e.name};case"AbnfGroup":return i(e.element);case"AbnfOptionalGroup":return{type:"optional",element:i(e.element)};default:throw new Error(`Unsupported ABNF primary node: ${e.$type}`)}},"transformPrimary"),P=n(e=>({name:e.name,definition:i(e.definition)}),"transformRule"),h=n(e=>{f(e,a),e.title&&a.setTitle(e.title),e.rules.map(r=>a.addRule(P(r)))},"populateDb"),R={parse:n(e=>{a.clear(),o.debug("[ABNF Parser] Starting Langium parse");const r=v.parse(e);if(r.lexerErrors.length>0||r.parserErrors.length>0)throw new c(r);const t=r.value;o.debug("[ABNF Parser] Parsed rules:",t.rules.length),h(t),o.debug("[ABNF Parser] Parse complete")},"parse"),parser:{yy:a}},B={parser:R,db:a,renderer:u,styles:p};export{B as diagram};
+import{g as p,r as u,d as a}from"./chunk-MOJQB5TN-l907LpMA.js";import{p as f}from"./chunk-JWPE2WC7-Cj5lvEfN.js";import{_ as n,l as o}from"./mermaid.core-B5elhUtV.js";import{M as c,b as d}from"./cynefin-VYW2F7L2-CminxBoG.js";import"./pilotswarm-Di5s6c69.js";var v=d().RailroadAbnf.parser.LangiumParser,i=n(e=>{const r=e.alternatives.map(g);return r.length===1?r[0]:{type:"choice",alternatives:r}},"transformAlternation"),g=n(e=>{const r=e.elements.map(y);return r.length===1?r[0]:{type:"sequence",elements:r}},"transformConcatenation"),b=n(e=>{if(e.includes("*")){const[t,s]=e.split("*"),l=t?parseInt(t,10):0,m=s?parseInt(s,10):1/0;return{min:l,max:m}}const r=parseInt(e,10);return{min:r,max:r}},"parseRepeat"),y=n(e=>{const r=A(e.primary);if(!e.repeat)return r;const{min:t,max:s}=b(e.repeat);return t===0&&s===1?{type:"optional",element:r}:{type:"repetition",element:r,min:t,max:s}},"transformElement"),A=n(e=>{switch(e.$type){case"AbnfStringLiteral":return{type:"terminal",value:e.value};case"AbnfNumVal":return{type:"terminal",value:e.value};case"AbnfRuleName":return{type:"nonterminal",name:e.name};case"AbnfGroup":return i(e.element);case"AbnfOptionalGroup":return{type:"optional",element:i(e.element)};default:throw new Error(`Unsupported ABNF primary node: ${e.$type}`)}},"transformPrimary"),P=n(e=>({name:e.name,definition:i(e.definition)}),"transformRule"),h=n(e=>{f(e,a),e.title&&a.setTitle(e.title),e.rules.map(r=>a.addRule(P(r)))},"populateDb"),R={parse:n(e=>{a.clear(),o.debug("[ABNF Parser] Starting Langium parse");const r=v.parse(e);if(r.lexerErrors.length>0||r.parserErrors.length>0)throw new c(r);const t=r.value;o.debug("[ABNF Parser] Parsed rules:",t.rules.length),h(t),o.debug("[ABNF Parser] Parse complete")},"parse"),parser:{yy:a}},B={parser:R,db:a,renderer:u,styles:p};export{B as diagram};

package/web/dist/assets/{arc-lInHlEVm.js → arc-CN_GY3DG.js}

@@ -1 +1 @@
-import{Y as ln,$ as an,a0 as F,a1 as q,a2 as j,a3 as un,a4 as y,a5 as tn,a6 as J,a7 as _,a8 as rn,a9 as o,aa as on,ab as sn,ac as fn}from"./mermaid.core-DNmC5O4Y.js";function cn(l){return l.innerRadius}function yn(l){return l.outerRadius}function gn(l){return l.startAngle}function dn(l){return l.endAngle}function mn(l){return l&&l.padAngle}function pn(l,h,I,D,v,A,z,a){var O=I-l,i=D-h,n=z-v,d=a-A,u=d*O-n*i;if(!(u*u<y))return u=(n*(h-A)-d*(l-v))/u,[l+u*O,h+u*i]}function U(l,h,I,D,v,A,z){var a=l-I,O=h-D,i=(z?A:-A)/J(a*a+O*O),n=i*O,d=-i*a,u=l+n,s=h+d,f=I+n,c=D+d,B=(u+f)/2,t=(s+c)/2,m=f-u,g=c-s,R=m*m+g*g,T=v-A,P=u*c-f*s,S=(g<0?-1:1)*J(on(0,T*T*R-P*P)),Y=(P*g-m*S)/R,$=(-P*m-g*S)/R,w=(P*g+m*S)/R,p=(-P*m+g*S)/R,x=Y-B,e=$-t,r=w-B,C=p-t;return x*x+e*e>r*r+C*C&&(Y=w,$=p),{cx:Y,cy:$,x01:-n,y01:-d,x11:Y*(v/T-1),y11:$*(v/T-1)}}function hn(){var l=cn,h=yn,I=j(0),D=null,v=gn,A=dn,z=mn,a=null,O=ln(i);function i(){var n,d,u=+l.apply(this,arguments),s=+h.apply(this,arguments),f=v.apply(this,arguments)-un,c=A.apply(this,arguments)-un,B=rn(c-f),t=c>f;if(a||(a=n=O()),s<u&&(d=s,s=u,u=d),!(s>y))a.moveTo(0,0);else if(B>tn-y)a.moveTo(s*F(f),s*q(f)),a.arc(0,0,s,f,c,!t),u>y&&(a.moveTo(u*F(c),u*q(c)),a.arc(0,0,u,c,f,t));else{var m=f,g=c,R=f,T=c,P=B,S=B,Y=z.apply(this,arguments)/2,$=Y>y&&(D?+D.apply(this,arguments):J(u*u+s*s)),w=_(rn(s-u)/2,+I.apply(this,arguments)),p=w,x=w,e,r;if($>y){var C=sn($/u*q(Y)),K=sn($/s*q(Y));(P-=C*2)>y?(C*=t?1:-1,R+=C,T-=C):(P=0,R=T=(f+c)/2),(S-=K*2)>y?(K*=t?1:-1,m+=K,g-=K):(S=0,m=g=(f+c)/2)}var G=s*F(m),H=s*q(m),L=u*F(T),M=u*q(T);if(w>y){var N=s*F(g),Q=s*q(g),V=u*F(R),W=u*q(R),E;if(B<an)if(E=pn(G,H,V,W,N,Q,L,M)){var X=G-E[0],Z=H-E[1],b=N-E[0],k=Q-E[1],nn=1/q(fn((X*b+Z*k)/(J(X*X+Z*Z)*J(b*b+k*k)))/2),en=J(E[0]*E[0]+E[1]*E[1]);p=_(w,(u-en)/(nn-1)),x=_(w,(s-en)/(nn+1))}else p=x=0}S>y?x>y?(e=U(V,W,G,H,s,x,t),r=U(N,Q,L,M,s,x,t),a.moveTo(e.cx+e.x01,e.cy+e.y01),x<w?a.arc(e.cx,e.cy,x,o(e.y01,e.x01),o(r.y01,r.x01),!t):(a.arc(e.cx,e.cy,x,o(e.y01,e.x01),o(e.y11,e.x11),!t),a.arc(0,0,s,o(e.cy+e.y11,e.cx+e.x11),o(r.cy+r.y11,r.cx+r.x11),!t),a.arc(r.cx,r.cy,x,o(r.y11,r.x11),o(r.y01,r.x01),!t))):(a.moveTo(G,H),a.arc(0,0,s,m,g,!t)):a.moveTo(G,H),!(u>y)||!(P>y)?a.lineTo(L,M):p>y?(e=U(L,M,N,Q,u,-p,t),r=U(G,H,V,W,u,-p,t),a.lineTo(e.cx+e.x01,e.cy+e.y01),p<w?a.arc(e.cx,e.cy,p,o(e.y01,e.x01),o(r.y01,r.x01),!t):(a.arc(e.cx,e.cy,p,o(e.y01,e.x01),o(e.y11,e.x11),!t),a.arc(0,0,u,o(e.cy+e.y11,e.cx+e.x11),o(r.cy+r.y11,r.cx+r.x11),t),a.arc(r.cx,r.cy,p,o(r.y11,r.x11),o(r.y01,r.x01),!t))):a.arc(0,0,u,T,R,t)}if(a.closePath(),n)return a=null,n+""||null}return i.centroid=function(){var n=(+l.apply(this,arguments)+ +h.apply(this,arguments))/2,d=(+v.apply(this,arguments)+ +A.apply(this,arguments))/2-an/2;return[F(d)*n,q(d)*n]},i.innerRadius=function(n){return arguments.length?(l=typeof n=="function"?n:j(+n),i):l},i.outerRadius=function(n){return arguments.length?(h=typeof n=="function"?n:j(+n),i):h},i.cornerRadius=function(n){return arguments.length?(I=typeof n=="function"?n:j(+n),i):I},i.padRadius=function(n){return arguments.length?(D=n==null?null:typeof n=="function"?n:j(+n),i):D},i.startAngle=function(n){return arguments.length?(v=typeof n=="function"?n:j(+n),i):v},i.endAngle=function(n){return arguments.length?(A=typeof n=="function"?n:j(+n),i):A},i.padAngle=function(n){return arguments.length?(z=typeof n=="function"?n:j(+n),i):z},i.context=function(n){return arguments.length?(a=n??null,i):a},i}export{hn as d};
+import{Y as ln,$ as an,a0 as F,a1 as q,a2 as j,a3 as un,a4 as y,a5 as tn,a6 as J,a7 as _,a8 as rn,a9 as o,aa as on,ab as sn,ac as fn}from"./mermaid.core-B5elhUtV.js";function cn(l){return l.innerRadius}function yn(l){return l.outerRadius}function gn(l){return l.startAngle}function dn(l){return l.endAngle}function mn(l){return l&&l.padAngle}function pn(l,h,I,D,v,A,z,a){var O=I-l,i=D-h,n=z-v,d=a-A,u=d*O-n*i;if(!(u*u<y))return u=(n*(h-A)-d*(l-v))/u,[l+u*O,h+u*i]}function U(l,h,I,D,v,A,z){var a=l-I,O=h-D,i=(z?A:-A)/J(a*a+O*O),n=i*O,d=-i*a,u=l+n,s=h+d,f=I+n,c=D+d,B=(u+f)/2,t=(s+c)/2,m=f-u,g=c-s,R=m*m+g*g,T=v-A,P=u*c-f*s,S=(g<0?-1:1)*J(on(0,T*T*R-P*P)),Y=(P*g-m*S)/R,$=(-P*m-g*S)/R,w=(P*g+m*S)/R,p=(-P*m+g*S)/R,x=Y-B,e=$-t,r=w-B,C=p-t;return x*x+e*e>r*r+C*C&&(Y=w,$=p),{cx:Y,cy:$,x01:-n,y01:-d,x11:Y*(v/T-1),y11:$*(v/T-1)}}function hn(){var l=cn,h=yn,I=j(0),D=null,v=gn,A=dn,z=mn,a=null,O=ln(i);function i(){var n,d,u=+l.apply(this,arguments),s=+h.apply(this,arguments),f=v.apply(this,arguments)-un,c=A.apply(this,arguments)-un,B=rn(c-f),t=c>f;if(a||(a=n=O()),s<u&&(d=s,s=u,u=d),!(s>y))a.moveTo(0,0);else if(B>tn-y)a.moveTo(s*F(f),s*q(f)),a.arc(0,0,s,f,c,!t),u>y&&(a.moveTo(u*F(c),u*q(c)),a.arc(0,0,u,c,f,t));else{var m=f,g=c,R=f,T=c,P=B,S=B,Y=z.apply(this,arguments)/2,$=Y>y&&(D?+D.apply(this,arguments):J(u*u+s*s)),w=_(rn(s-u)/2,+I.apply(this,arguments)),p=w,x=w,e,r;if($>y){var C=sn($/u*q(Y)),K=sn($/s*q(Y));(P-=C*2)>y?(C*=t?1:-1,R+=C,T-=C):(P=0,R=T=(f+c)/2),(S-=K*2)>y?(K*=t?1:-1,m+=K,g-=K):(S=0,m=g=(f+c)/2)}var G=s*F(m),H=s*q(m),L=u*F(T),M=u*q(T);if(w>y){var N=s*F(g),Q=s*q(g),V=u*F(R),W=u*q(R),E;if(B<an)if(E=pn(G,H,V,W,N,Q,L,M)){var X=G-E[0],Z=H-E[1],b=N-E[0],k=Q-E[1],nn=1/q(fn((X*b+Z*k)/(J(X*X+Z*Z)*J(b*b+k*k)))/2),en=J(E[0]*E[0]+E[1]*E[1]);p=_(w,(u-en)/(nn-1)),x=_(w,(s-en)/(nn+1))}else p=x=0}S>y?x>y?(e=U(V,W,G,H,s,x,t),r=U(N,Q,L,M,s,x,t),a.moveTo(e.cx+e.x01,e.cy+e.y01),x<w?a.arc(e.cx,e.cy,x,o(e.y01,e.x01),o(r.y01,r.x01),!t):(a.arc(e.cx,e.cy,x,o(e.y01,e.x01),o(e.y11,e.x11),!t),a.arc(0,0,s,o(e.cy+e.y11,e.cx+e.x11),o(r.cy+r.y11,r.cx+r.x11),!t),a.arc(r.cx,r.cy,x,o(r.y11,r.x11),o(r.y01,r.x01),!t))):(a.moveTo(G,H),a.arc(0,0,s,m,g,!t)):a.moveTo(G,H),!(u>y)||!(P>y)?a.lineTo(L,M):p>y?(e=U(L,M,N,Q,u,-p,t),r=U(G,H,V,W,u,-p,t),a.lineTo(e.cx+e.x01,e.cy+e.y01),p<w?a.arc(e.cx,e.cy,p,o(e.y01,e.x01),o(r.y01,r.x01),!t):(a.arc(e.cx,e.cy,p,o(e.y01,e.x01),o(e.y11,e.x11),!t),a.arc(0,0,u,o(e.cy+e.y11,e.cx+e.x11),o(r.cy+r.y11,r.cx+r.x11),t),a.arc(r.cx,r.cy,p,o(r.y11,r.x11),o(r.y01,r.x01),!t))):a.arc(0,0,u,T,R,t)}if(a.closePath(),n)return a=null,n+""||null}return i.centroid=function(){var n=(+l.apply(this,arguments)+ +h.apply(this,arguments))/2,d=(+v.apply(this,arguments)+ +A.apply(this,arguments))/2-an/2;return[F(d)*n,q(d)*n]},i.innerRadius=function(n){return arguments.length?(l=typeof n=="function"?n:j(+n),i):l},i.outerRadius=function(n){return arguments.length?(h=typeof n=="function"?n:j(+n),i):h},i.cornerRadius=function(n){return arguments.length?(I=typeof n=="function"?n:j(+n),i):I},i.padRadius=function(n){return arguments.length?(D=n==null?null:typeof n=="function"?n:j(+n),i):D},i.startAngle=function(n){return arguments.length?(v=typeof n=="function"?n:j(+n),i):v},i.endAngle=function(n){return arguments.length?(A=typeof n=="function"?n:j(+n),i):A},i.padAngle=function(n){return arguments.length?(z=typeof n=="function"?n:j(+n),i):z},i.context=function(n){return arguments.length?(a=n??null,i):a},i}export{hn as d};