pilotswarm 0.5.57 → 0.5.59

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

@@ -1,7 +1,8 @@
 import React from "react";
-// createPortal is only invoked when an IconButton tooltip renders (portal only,
-// never in the TUI); the import itself is side-effect-free and react-dom is a
-// dependency wherever this file loads, so it is safe in the shared module.
+// createPortal is only invoked by browser-only surfaces (tooltips, toolbar
+// slots, and viewport-level dialogs); the import itself is side-effect-free
+// and react-dom is a dependency wherever this file loads, so it is safe in the
+// shared module.
 import { createPortal } from "react-dom";
 import { appendAnimatedDotsToRuns, useAnimatedDots, useSpinnerFrame } from "./chat-status.js";
 import {
@@ -25,6 +26,7 @@ import {
     isThemeLight,
     normalizeStoredCanvasPrefs,
     parseTerminalMarkupRuns,
+    parseMarkdownLines,
     PilotSwarmUiController,
     tokenizeInlineMarkdown,
     selectActivityPane,
@@ -818,6 +820,12 @@ function normalizeLines(lines) {
     };
 
     for (const line of lines || []) {
+        if (line?.kind === "assistantPreview") {
+            // Preserve selector-cache identity so another stream's ticks don't
+            // rerender every completed response or recreate its scroll observer.
+            normalized.push(line);
+            continue;
+        }
         if (line?.kind === "markup") {
             // Markup lines carry preformatted art (splash screens). Tag them
             // so the chat renderer keeps each line intact: the pane's
@@ -1255,7 +1263,7 @@ function Runs({ runs, theme }) {
 
             if (artifactRef) {
                 return React.createElement(ArtifactLink, {
-                    key: `${index}:${run.text || ""}`,
+                    key: index,
                     artifactRef,
                     style,
                 });
@@ -1268,7 +1276,7 @@ function Runs({ runs, theme }) {
 
             return isExternalHref
                 ? React.createElement("a", {
-                    key: `${index}:${run.text || ""}`,
+                    key: index,
                     className: "ps-md-link",
                     href,
                     target: "_blank",
@@ -1276,7 +1284,8 @@ function Runs({ runs, theme }) {
                     style,
                 }, text)
                 : React.createElement("span", {
-                    key: `${index}:${run.text || ""}`,
+                    key: index,
+                    className: run?.role === "streamingCaret" ? "ps-streaming-caret" : undefined,
                     style,
                 }, text);
         }),
@@ -1284,14 +1293,16 @@ function Runs({ runs, theme }) {
 }
 
 function SystemNoticeLine({ line, theme }) {
+    const [open, setOpen] = React.useState(false);
     const body = String(line?.body || "").trim();
-    return React.createElement("details", { className: "ps-system-notice" },
+    const className = `ps-system-notice${line?.liveReasoning || line?.streamReasoning ? " is-live-reasoning" : ""}`;
+    return React.createElement("details", { className, onToggle: (event) => setOpen(event.currentTarget.open) },
         React.createElement("summary", {
             className: "ps-system-notice-summary",
             style: { color: resolveColor(theme, line?.color) || "var(--ps-muted)" },
         },
         React.createElement("span", { className: "ps-system-notice-summary-text" }, line?.text || "System notice")),
-        body
+        body && open
             ? React.createElement("div", { className: "ps-system-notice-body" },
                 React.createElement(MarkdownPreviewContent, { content: body, theme }))
             : null);
@@ -3185,6 +3196,12 @@ function parseStructuredChatBlocks(lines = []) {
     for (let index = 0; index < lines.length;) {
         const currentLine = lines[index];
 
+        if (currentLine?.kind === "assistantPreview") {
+            blocks.push({ type: "assistantPreview", line: currentLine });
+            index += 1;
+            continue;
+        }
+
         // Preformatted markup lines (splash art) bypass box/table/card
         // detection entirely and render as one preserve block, so no line
         // ever rewraps or gets reinterpreted as a structured element.
@@ -3216,6 +3233,7 @@ function parseStructuredChatBlocks(lines = []) {
             }
             blocks.push({
                 type: "card",
+                cardKey: currentLine.cardKey || null,
                 headerRuns: Array.isArray(currentLine.runs) ? currentLine.runs : [],
                 borderColor: currentLine.borderColor || "gray",
                 blocks: parseStructuredChatBlocks(innerLines),
@@ -3489,12 +3507,129 @@ function ArtifactImageStrip({ controller, sessionId, attachments }) {
         }));
 }
 
+const PreviewMessageContent = React.memo(function PreviewMessageContent({ content, width, theme, controller }) {
+    const lines = React.useMemo(
+        () => normalizeLines(parseMarkdownLines(content, { width, tableMode: "sentinel" })),
+        [content, width],
+    );
+    return React.createElement(StructuredChatBlocks, { lines, theme, controller });
+});
+
+const AssistantPreviewCard = React.memo(function AssistantPreviewCard({ line, theme, controller }) {
+    const [open, setOpen] = React.useState(false);
+    const [revealed, setRevealed] = React.useState(
+        !line.liveStartedAt || Date.now() - line.liveStartedAt >= 200,
+    );
+    const viewportRef = React.useRef(null);
+    const contentRef = React.useRef(null);
+    const followRef = React.useRef(true);
+    const snapshotRef = React.useRef(null);
+    const expanded = open || line.final;
+    // Keep already-mounted markdown/disclosures when closed, but don't parse
+    // new hidden deltas. Reopening catches up in a single render.
+    if (expanded) snapshotRef.current = line;
+    const snapshot = snapshotRef.current;
+
+    React.useEffect(() => {
+        if (line.final || revealed) return undefined;
+        const timer = setTimeout(() => setRevealed(true), Math.max(0, Math.min(200, 200 - (Date.now() - line.liveStartedAt))));
+        return () => clearTimeout(timer);
+    }, [line.final, line.liveStartedAt, revealed]);
+
+    React.useLayoutEffect(() => {
+        if (!expanded || line.final) return undefined;
+        const follow = () => {
+            const viewport = viewportRef.current;
+            if (viewport && line.isLive && followRef.current) viewport.scrollTop = viewport.scrollHeight;
+        };
+        follow();
+        // Images, tables and an opened reasoning disclosure may resize after
+        // the delta render. Only the inner viewport follows their growth.
+        const observer = new ResizeObserver(follow);
+        if (contentRef.current) observer.observe(contentRef.current);
+        return () => observer.disconnect();
+    }, [expanded, line.final, line.isLive, snapshot]);
+
+    // A fast durable answer can beat the preview reveal too. Never flash a
+    // one-frame "Saved" card between its last delta and turn completion.
+    if (!line.final && !revealed) return null;
+
+    return React.createElement("details", {
+        className: `ps-system-notice ps-assistant-preview${line.final ? " is-final" : ""}`,
+        open: expanded,
+        onToggle: (event) => {
+            if (event.target === event.currentTarget && !line.final) setOpen(event.currentTarget.open);
+        },
+    },
+    React.createElement("summary", {
+        className: "ps-system-notice-summary ps-canvas-action-summary",
+        // The completed answer is ordinary transcript, not a collapsible
+        // preview. Keep this same shell/body mounted through promotion.
+        tabIndex: line.final ? -1 : undefined,
+        onClick: (event) => { if (line.final) event.preventDefault(); },
+    }, line.final
+        ? 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("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",
+        onScroll: (event) => {
+            if (!line.final) {
+                event.stopPropagation();
+                followRef.current = getScrollDistanceToBottom(event.currentTarget) <= 24;
+            }
+        },
+        onWheel: (event) => {
+            if (!line.final) {
+                event.stopPropagation();
+                if (event.deltaY < 0) followRef.current = false;
+            }
+        },
+        onTouchStart: (event) => {
+            if (!line.final) { event.stopPropagation(); followRef.current = false; }
+        },
+        onTouchMove: (event) => { if (!line.final) event.stopPropagation(); },
+        onTouchEnd: (event) => { if (!line.final) event.stopPropagation(); },
+        onKeyDown: (event) => {
+            if (!line.final && ["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", " "].includes(event.key)) {
+                event.stopPropagation();
+                if (["ArrowUp", "PageUp", "Home"].includes(event.key)) followRef.current = false;
+            }
+        },
+    }, React.createElement("div", { ref: contentRef, className: "ps-assistant-preview-content" },
+        snapshot?.reasoningText ? React.createElement(SystemNoticeLine, {
+            key: "reasoning",
+            line: { text: line.isLive ? "Thinking" : "Thought", body: snapshot.reasoningText, streamReasoning: true },
+            theme,
+        }) : null,
+        snapshot?.body ? React.createElement(PreviewMessageContent, {
+            key: "message", content: snapshot.body, width: snapshot.width, theme, controller,
+        }) : null,
+        snapshot?.truncated && line.isLive
+            ? React.createElement("div", { className: "ps-preview-status" }, "Preview paused — the full answer will appear when complete.")
+            : null)));
+});
 // Renders parsed chat blocks; sentinel card blocks recurse through this list
 // so structured content (box/markdown tables, code fences) inside a card
 // renders exactly the same as it does at top level.
 function StructuredBlockList({ blocks, theme, controller = null }) {
     return React.createElement(React.Fragment, null,
         (blocks || []).map((block, index) => {
+            if (block.type === "assistantPreview") {
+                return React.createElement(AssistantPreviewCard, {
+                    key: block.line.previewKey,
+                    line: block.line,
+                    theme,
+                    controller,
+                });
+            }
             if (block.type === "imageAttachments") {
                 return React.createElement(ArtifactImageStrip, {
                     key: `imageAttachments:${index}`,
@@ -3538,7 +3673,7 @@ function StructuredBlockList({ blocks, theme, controller = null }) {
 
             if (block.type === "card") {
                 return React.createElement("section", {
-                    key: `card:${index}`,
+                    key: `card:${block.cardKey || index}`,
                     className: "ps-chat-card",
                     style: { "--ps-chat-card-accent": resolveColor(theme, block.borderColor) || "var(--ps-border)" },
                 },
@@ -3812,7 +3947,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 }) {
+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 }) {
     const themeId = useControllerSelector(controller, (state) => state.ui.themeId);
     const theme = getTheme(themeId);
     const ref = React.useRef(null);
@@ -3924,7 +4059,7 @@ function ScrollLinesPanel({ title, titleRight = null, color, focused, actions, l
                 normalizedSticky.map((line, index) => React.createElement(Line, { key: `sticky:${index}`, line, theme })),
             )
             : null,
-        React.createElement("div", { ref: setPanelNode, className: `ps-scroll-panel ${className}${scrollShadow.down ? " is-scrolled-down" : ""}${scrollShadow.up ? " is-scrolled-up" : ""}`.trim(), "data-session-scroll": focusRegion === "sessions" ? "1" : undefined, onScroll: handleBodyScroll, onMouseDown: claimFocus, onTouchStart, onWheel, onTouchMove, onTouchEnd, onTouchCancel: onTouchEnd },
+        React.createElement("div", { ref: setPanelNode, className: `ps-scroll-panel ${className}${scrollShadow.down ? " is-scrolled-down" : ""}${scrollShadow.up ? " is-scrolled-up" : ""}`.trim(), "data-session-scroll": focusRegion === "sessions" ? "1" : undefined, "aria-live": ariaLive || undefined, "aria-atomic": ariaLive ? "false" : undefined, onScroll: handleBodyScroll, onMouseDown: claimFocus, onTouchStart, onWheel, onTouchMove, onTouchEnd, onTouchCancel: onTouchEnd },
             typeof renderBody === "function"
                 ? renderBody(normalizedLines, theme)
                 : structuredBlocks
@@ -4422,13 +4557,48 @@ function StatusDot({ color, node = false }) {
  * person cannot look like two different people in two panes.
  */
 function OwnerAvatar({ badge, size = "sm" }) {
+    // The full name on hover, drawn the way the toolbar tooltips are (a
+    // fixed-position label portalled to the body) rather than the browser's
+    // native title: that one is slow to appear, easy to miss, and styled by
+    // the OS rather than the app.
+    const [tip, setTip] = React.useState(null);
+    const ref = React.useRef(null);
+    const tipRef = React.useRef(null);
+    React.useLayoutEffect(() => {
+        if (!tip || !tipRef.current || typeof window === "undefined") return;
+        const half = tipRef.current.offsetWidth / 2;
+        const margin = 6;
+        tipRef.current.style.left = `${Math.max(half + margin, Math.min(tip.x, window.innerWidth - half - margin))}px`;
+    }, [tip]);
     if (!badge) return null;
-    return React.createElement("span", {
-        className: `ps-owner-avatar is-${size}${badge.isMine ? " is-mine" : ""}`,
-        "data-owner-hue": String(badge.hue ?? 0),
-        title: badge.isMine ? `${badge.name} (you)` : badge.name,
-        "aria-label": badge.name,
-    }, badge.initials);
+    const label = badge.isMine ? `${badge.name} (you)` : badge.name;
+    const show = () => {
+        const el = ref.current;
+        if (!el || typeof window === "undefined") return;
+        const r = el.getBoundingClientRect();
+        const below = r.bottom + 44 < window.innerHeight;
+        setTip({ x: r.left + r.width / 2, y: below ? r.bottom + 6 : r.top - 6, placement: below ? "below" : "above" });
+    };
+    const hide = () => setTip(null);
+    return React.createElement(React.Fragment, null,
+        React.createElement("span", {
+            ref,
+            className: `ps-owner-avatar is-${size}${badge.isMine ? " is-mine" : ""}`,
+            "data-owner-hue": String(badge.hue ?? 0),
+            "aria-label": label,
+            onMouseEnter: show,
+            onMouseLeave: hide,
+            onFocus: show,
+            onBlur: hide,
+        }, badge.initials),
+        tip && typeof document !== "undefined"
+            ? createPortal(React.createElement("span", {
+                ref: tipRef,
+                className: `ps-icon-tooltip is-${tip.placement}`,
+                role: "tooltip",
+                style: { top: `${tip.y}px` },
+            }, label), document.body)
+            : null);
 }
 
 /** Drop the TUI-only text chip; the portal draws OwnerAvatar instead. */
@@ -4550,17 +4720,14 @@ function useStableValue(value) {
  * vote on the diagonal. Vertical stays the default: sideways has to be asked
  * for, by a drag that beats vertical by PAN_HORIZONTAL_RATIO.
  *
- * Driving the scroll ourselves means we also own the part the browser was
- * doing for free, so a flick decays under `releaseFling` instead of stopping
- * dead under the finger. CSS keeps `touch-action: pan-y` as a floor: if these
+ * The list tracks the finger and stops on release: no inertial fling. Chat
+ * and canvas scrolling are independent and keep their native behavior.
+ * CSS keeps `touch-action: pan-y` as a floor: if these
  * listeners ever fail to attach, the list still scrolls vertically the native
  * way rather than becoming inert.
  */
 const PAN_COMMIT_PX = 10;      // ignore the first few px — every swipe starts noisy
 const PAN_HORIZONTAL_RATIO = 1.6;   // |dx| must beat |dy| by this much to go sideways
-const FLING_MIN_VELOCITY = 0.05;    // px/ms below which a lift is a stop, not a flick
-const FLING_FRICTION = 0.95;        // per frame; ~0.35s of glide from a brisk flick
-const FLING_MAX_VELOCITY = 4;       // px/ms ceiling, so a fast flick stays catchable
 
 /**
  * Which axis does this gesture own? Pure, and exported so the rule can be
@@ -4594,38 +4761,20 @@ function useAxisLockedPan(ref, enabled = true) {
         let startY = 0;
         let lastX = 0;
         let lastY = 0;
-        let lastT = 0;
-        let velocity = 0;   // px/ms along the committed axis, sign follows the finger
         let axis = null;    // null = undecided, "x" | "y" = committed, "done" = not ours
-        let flingFrame = null;
         let swallowClick = false;
-
-        const stopFling = () => {
-            if (flingFrame !== null) {
-                cancelAnimationFrame(flingFrame);
-                flingFrame = null;
-            }
-        };
-
-        const now = () => (typeof performance !== "undefined" ? performance.now() : Date.now());
         const canScroll = (which) => (which === "x"
             ? el.scrollWidth > el.clientWidth + 1
             : el.scrollHeight > el.clientHeight + 1);
 
         const onTouchStart = (event) => {
-            // A tap that lands while the list is still gliding is "stop", not
-            // "open whatever is passing under my finger". Native momentum never
-            // opened a row on the arresting tap; ours must not either.
-            swallowClick = flingFrame !== null;
-            stopFling();
+            swallowClick = false;
             // targetTouches, not touches: a thumb resting elsewhere on the page
             // is not part of this gesture. Two fingers HERE is a pinch.
             if (event.targetTouches.length !== 1) { axis = "done"; return; }
             const touch = event.targetTouches[0];
             startX = lastX = touch.clientX;
             startY = lastY = touch.clientY;
-            lastT = now();
-            velocity = 0;
             axis = null;
         };
 
@@ -4668,7 +4817,8 @@ function useAxisLockedPan(ref, enabled = true) {
                 // Measure from here, so the slop we ignored is not also applied.
                 lastX = touch.clientX;
                 lastY = touch.clientY;
-                lastT = now();
+                // A drag must not select whichever row ends up under the thumb.
+                swallowClick = true;
             }
 
             // Ours: stop the browser doing it as well. A repeat of the
@@ -4678,39 +4828,12 @@ function useAxisLockedPan(ref, enabled = true) {
 
             const stepX = touch.clientX - lastX;
             const stepY = touch.clientY - lastY;
-            const t = now();
-            const elapsed = Math.max(1, t - lastT);
-            const step = axis === "x" ? stepX : stepY;
 
             if (axis === "x") el.scrollLeft -= stepX;
             else el.scrollTop -= stepY;
 
-            // Exponential smoothing: one jittery sample should not decide the
-            // whole flick, and a finger that stops before lifting should decay
-            // to zero rather than fling on a stale reading.
-            const sample = Math.max(-FLING_MAX_VELOCITY, Math.min(FLING_MAX_VELOCITY, step / elapsed));
-            velocity = velocity * 0.7 + sample * 0.3;
-
             lastX = touch.clientX;
             lastY = touch.clientY;
-            lastT = t;
-        };
-
-        const releaseFling = (committed) => {
-            if (Math.abs(velocity) < FLING_MIN_VELOCITY) return;
-            let v = velocity;
-            const tick = () => {
-                v *= FLING_FRICTION;
-                if (Math.abs(v) < FLING_MIN_VELOCITY) { flingFrame = null; return; }
-                const before = committed === "x" ? el.scrollLeft : el.scrollTop;
-                if (committed === "x") el.scrollLeft -= v * 16;
-                else el.scrollTop -= v * 16;
-                const after = committed === "x" ? el.scrollLeft : el.scrollTop;
-                // Hit an end stop — no point animating against it.
-                if (after === before) { flingFrame = null; return; }
-                flingFrame = requestAnimationFrame(tick);
-            };
-            flingFrame = requestAnimationFrame(tick);
         };
 
         const onTouchEnd = (event) => {
@@ -4718,16 +4841,13 @@ function useAxisLockedPan(ref, enabled = true) {
             // its start point belongs to a different gesture, and the commit
             // would land on a large bogus delta. Stay out until all lift.
             if (event.targetTouches.length > 0) { axis = "done"; return; }
-            const committed = axis;
             axis = null;
-            if (committed === "x" || committed === "y") releaseFling(committed);
-            velocity = 0;
         };
 
-        const onTouchCancel = () => { axis = null; velocity = 0; stopFling(); };
+        const onTouchCancel = () => { axis = "done"; };
 
         const onClickCapture = (event) => {
-            if (!swallowClick) return;
+            if (!swallowClick || event.detail === 0) return;
             swallowClick = false;
             event.preventDefault();
             event.stopPropagation();
@@ -4739,7 +4859,6 @@ function useAxisLockedPan(ref, enabled = true) {
         el.addEventListener("touchcancel", onTouchCancel, { passive: true });
         el.addEventListener("click", onClickCapture, true);
         return () => {
-            stopFling();
             el.removeEventListener("touchstart", onTouchStart);
             el.removeEventListener("touchmove", onTouchMove);
             el.removeEventListener("touchend", onTouchEnd);
@@ -4886,6 +5005,7 @@ function SessionPane({ controller, actions = null, panelClassName = "", structur
     const authPrincipal = viewState.auth?.principal || null;
     const viewerRole = viewState.auth?.authorization?.role;
     const isAdminViewer = viewerRole === "admin" || viewerRole === "anonymous";
+    const resourceAdminViewer = isAdminViewer && viewState.auth?.adminScope !== "cluster";
     const ownsActiveSession = Boolean(
         activeSession?.owner
         && authPrincipal
@@ -4906,7 +5026,7 @@ function SessionPane({ controller, actions = null, panelClassName = "", structur
         activeSession && !activeSession.isGroup
         && (activeSession.isSystem
             ? isAdminViewer
-            : (isAdminViewer || ownsActiveSession)),
+            : (resourceAdminViewer || ownsActiveSession)),
     );
     const selectedCount = Array.isArray(viewState.selectedIds) ? viewState.selectedIds.length : 0;
     const isBulkSelection = selectedCount > 1;
@@ -6398,6 +6518,7 @@ function ChatPane({ controller, mobile = false, fullWidth = false, showComposer
         scrollOffset: viewState.scroll,
         scrollMode: "bottom",
         paneKey: "chat",
+        ariaLive: "polite",
         className: "is-wrapped",
         panelClassName: "ps-chat-panel",
         panelRef,
@@ -6877,8 +6998,19 @@ function CanvasShareDialog({ controller, sessionId, slot, onClose }) {
     // the policy, so the control is disabled for everyone else rather than
     // letting them pick a value and then showing a refusal.
     const [kvMe, setKvMe] = React.useState(null);
+    // Off by default: every link this dialog has ever produced opened the full
+    // workspace, and a share option that silently changed that for existing
+    // habits would be a surprise. Checked, the link carries `show_chrome=false`
+    // and lands on the canvas alone.
+    //
+    // Presentation only. It hides the portal header; it does NOT make the
+    // canvas read-only, because a query parameter is not a permission — the
+    // recipient can simply delete it. What a viewer may change inside the app
+    // stays governed by the KV policy below, and the strip is worded so it
+    // never implies otherwise.
+    const [hideChrome, setHideChrome] = React.useState(false);
     const transport = controller.transport;
-    const sessionLink = `${window.location.origin}/?session=${encodeURIComponent(sessionId)}&view=canvas&slot=${slot}&max=1`;
+    const sessionLink = `${window.location.origin}/?session=${encodeURIComponent(sessionId)}&view=canvas&slot=${slot}&max=1${hideChrome ? "&show_chrome=false" : ""}`;
     // The token variants all resolve the same hashed row: one token, N doors,
     // single-switch revocation whichever door the bearer uses.
     const linkRows = (url, keyPrefix) => React.createElement(MultiOriginLinkRows, {
@@ -6933,7 +7065,7 @@ function CanvasShareDialog({ controller, sessionId, slot, onClose }) {
             .finally(() => setBusy(false));
     };
 
-    return React.createElement("div", { className: "ps-canvas-share-overlay", onClick: onClose },
+    const overlay = React.createElement("div", { className: "ps-canvas-share-overlay", onClick: onClose },
         React.createElement("div", { className: "ps-canvas-share-dialog", onClick: (e) => e.stopPropagation(), role: "dialog", "aria-label": "Share canvas" },
             React.createElement("div", { className: "ps-canvas-share-title" },
                 "Share this canvas",
@@ -6965,6 +7097,13 @@ function CanvasShareDialog({ controller, sessionId, slot, onClose }) {
                 },
                     React.createElement("div", { className: "ps-canvas-share-sub" }, "Opens the portal signed in, canvas full screen. Session visibility rules apply."),
                     linkRows(sessionLink, "session"),
+                    React.createElement("label", { className: "ps-canvas-share-check" },
+                        React.createElement("input", {
+                            type: "checkbox",
+                            checked: hideChrome,
+                            onChange: (event) => setHideChrome(event.target.checked),
+                        }),
+                        "Hide page chrome"),
                     // Who may WRITE the app's shared state. Stated in words:
                     // "readers" reaches everyone the session is read-shared
                     // with, which a dialog that only says "link" hides.
@@ -7016,6 +7155,16 @@ function CanvasShareDialog({ controller, sessionId, slot, onClose }) {
                             ? React.createElement("button", { type: "button", className: "ps-mini-button", disabled: busy, onClick: remove }, "Remove link")
                             : null))),
             error ? React.createElement("div", { className: "ps-canvas-share-error" }, error) : null));
+
+    // CanvasPane lives inside `.ps-canvas-layer`, which is a z-indexed
+    // stacking context below the pane resizers. A fixed overlay left inside
+    // that tree cannot out-rank a sibling resizer regardless of its own
+    // z-index, so the divider used to paint straight through this dialog.
+    // Put viewport chrome at the document root; React keeps context and event
+    // bubbling intact across the portal.
+    return typeof document !== "undefined" && document.body
+        ? createPortal(overlay, document.body)
+        : overlay;
 }
 
 /**
@@ -12888,7 +13037,8 @@ function AdminConsolePanel({ controller, mobile = false }) {
     // the way out is the toolbar's Mode cluster (Workspace) \u2014 a \u2715 here was a
     // second, unlabelled way to do the same thing.
     const header = React.createElement("header", { className: "ps-admin-console__header" },
-        React.createElement("h2", null, view.isAdmin ? "Admin Console" : "Settings"));
+        React.createElement("h2", null, view.isAdmin ? "Admin Console" : "Settings"),
+        view.isAdmin ? React.createElement("small", null, view.adminPolicyLabel) : null);
 
     const providerSection = React.createElement(AdminModelProvidersSection, {
         controller,