pilotswarm 0.5.23 → 0.5.25

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

@@ -210,12 +210,39 @@ function normalizeProfileSettings(settings) {
         const id = candidate.activeSessionId == null ? null : String(candidate.activeSessionId).trim();
         normalized.activeSessionId = id || null;
     }
-    if (candidate.chatViewMode === "summary" || candidate.chatViewMode === "transcript" || candidate.chatViewMode === "rich") {
+    if (isChatViewMode(candidate.chatViewMode)) {
         normalized.chatViewMode = candidate.chatViewMode;
     }
+    // Phones and desktops keep SEPARATE view preferences: rich prose reads well
+    // on a wide transcript and poorly in a 390px column, so a single shared
+    // value would have each device overwriting the other's choice.
+    if (isChatViewMode(candidate.chatViewModeMobile)) {
+        normalized.chatViewModeMobile = candidate.chatViewModeMobile;
+    }
     return normalized;
 }
 
+function isChatViewMode(value) {
+    return value === "summary" || value === "transcript" || value === "rich";
+}
+
+/** True on phone-sized viewports — the device class that owns the mobile slot. */
+function isNarrowViewport() {
+    return typeof window !== "undefined"
+        && typeof window.matchMedia === "function"
+        && window.matchMedia("(max-width: 920px)").matches;
+}
+
+/** Profile key this device reads and writes. */
+function chatViewModeKey() {
+    return isNarrowViewport() ? "chatViewModeMobile" : "chatViewMode";
+}
+
+/** The key belonging to the OTHER device class. */
+function otherChatViewModeKey() {
+    return isNarrowViewport() ? "chatViewMode" : "chatViewModeMobile";
+}
+
 function normalizeStoredCollapsedSessionIdsToArray(value) {
     if (value instanceof Set) {
         const out = [];
@@ -243,7 +270,7 @@ function hasOwn(value, key) {
     return Boolean(value && typeof value === "object" && Object.prototype.hasOwnProperty.call(value, key));
 }
 
-function profileSettingsFromViewState(state) {
+function profileSettingsFromViewState(state, preservedOtherChatViewMode = null) {
     return normalizeProfileSettings({
         themeId: state.themeId,
         sessionOwnerFilter: state.ownerFilter,
@@ -256,11 +283,17 @@ function profileSettingsFromViewState(state) {
         pinnedSessionIds: state.pinnedIds,
         collapsedSessionIds: state.collapsedSessionIds,
         activeSessionId: state.activeSessionId,
-        chatViewMode: state.chatViewMode,
+        [chatViewModeKey()]: state.chatViewMode,
+        // setCurrentUserProfileSettings REPLACES the settings object, so the
+        // other device class's slot has to be written back verbatim or saving
+        // from a desktop would wipe the phone's preference (and vice versa).
+        ...(isChatViewMode(preservedOtherChatViewMode)
+            ? { [otherChatViewModeKey()]: preservedOtherChatViewMode }
+            : {}),
     });
 }
 
-function buildDefaultProfileSettingsFromState(state) {
+function buildDefaultProfileSettingsFromState(state, preservedOtherChatViewMode = null) {
     return normalizeProfileSettings({
         themeId: state?.ui?.themeId,
         // Derive the owner-filter default from the RESOLVED principal, never a
@@ -274,7 +307,10 @@ function buildDefaultProfileSettingsFromState(state) {
         pinnedSessionIds: state?.sessions?.pinnedIds,
         collapsedSessionIds: state?.sessions?.collapsedIds,
         activeSessionId: state?.sessions?.activeSessionId,
-        chatViewMode: state?.ui?.chatViewMode,
+        [chatViewModeKey()]: state?.ui?.chatViewMode,
+        ...(isChatViewMode(preservedOtherChatViewMode)
+            ? { [otherChatViewModeKey()]: preservedOtherChatViewMode }
+            : {}),
     });
 }
 
@@ -307,8 +343,11 @@ function materializeProfileSettings(remoteSettings, defaults) {
         ...(hasOwn(normalizedRemote, "activeSessionId")
             ? { activeSessionId: normalizedRemote.activeSessionId }
             : {}),
-        ...(hasOwn(normalizedRemote, "chatViewMode")
-            ? { chatViewMode: normalizedRemote.chatViewMode }
+        // Apply only the slot this device owns. The other is preserved by the
+        // save path (see profileSettingsFromViewState), not applied here — it
+        // describes a screen size we are not on.
+        ...(hasOwn(normalizedRemote, chatViewModeKey())
+            ? { chatViewMode: normalizedRemote[chatViewModeKey()] }
             : {}),
     });
 }
@@ -389,10 +428,15 @@ function computeStateLayout(state) {
 }
 
 function getPortalInspectorContentWidth(paneWidth, inspectorTab) {
-    // Sequence uses preserved-width lines inside padded, scroll-synced containers.
-    // Reserve a few extra columns so content that fits visually does not trip a cosmetic x-scrollbar.
-    const overflowGuardColumns = inspectorTab === "sequence" ? 3 : 0;
-    return Math.max(20, paneWidth - 4 - overflowGuardColumns);
+    // The sequence view once reserved 3 extra columns here so that "content
+    // that fits visually does not trip a cosmetic x-scrollbar". That was a
+    // fudge for a real bug: every sequence line was padded to the full width,
+    // including the final column whose trailing spaces align nothing, so with
+    // white-space:pre the content box always measured exactly the pane width
+    // and any rounding tipped it into a permanent scrollbar. The padding is now
+    // trimmed at the source (see trimTrailingRunPad in ui-core selectors), so
+    // the guard would only throw away 3 usable columns.
+    return Math.max(20, paneWidth - 4);
 }
 
 function normalizeLines(lines) {
@@ -549,6 +593,10 @@ function applyDocumentTheme(themeId) {
     root.style.setProperty("--ps-modal-selected-background", theme.page.modalSelectedBackground);
     root.style.setProperty("--ps-modal-selected-border", theme.page.modalSelectedBorder);
     root.style.setProperty("--ps-modal-selected-foreground", theme.page.modalSelectedForeground);
+    // Expose the theme id so a theme can carry CHROME, not just colours. Win95
+    // is defined by its bevels — raised faces, inset wells, square corners —
+    // and none of that is expressible as a palette entry.
+    root.dataset.psTheme = theme.id;
 }
 
 function useMeasuredViewport(ref) {
@@ -697,6 +745,10 @@ function useScrollSync(ref, lines, scrollOffset, scrollMode, paneKey, controller
         };
     }, [normalizedLines, ref, scrollMode, scrollOffset, stickyBottom, viewportRevision]);
 
+    const dispatchScrollOffset = useFrameCoalescedCallback((offset) => {
+        controller.dispatch({ type: "ui/scroll", pane: paneKey, offset });
+    });
+
     const onScroll = React.useCallback(() => {
         const node = ref.current;
         if (!node || !paneKey) return;
@@ -731,15 +783,14 @@ function useScrollSync(ref, lines, scrollOffset, scrollMode, paneKey, controller
             ? Math.max(0, maxScroll - node.scrollTop)
             : Math.max(0, node.scrollTop);
         userScrollRef.current.lastDispatchedOffset = pixels / SCROLL_ROW_HEIGHT;
-        controller.dispatch({
-            type: "ui/scroll",
-            pane: paneKey,
-            offset: pixels / SCROLL_ROW_HEIGHT,
-        });
+        // One dispatch per frame. A scroll gesture fires far more events than
+        // the browser paints, and every dispatch notifies each subscriber —
+        // the offset the user actually sees is the last one in the frame.
+        dispatchScrollOffset(pixels / SCROLL_ROW_HEIGHT);
         if (paneKey === "chat" && scrollMode === "bottom" && node.scrollTop <= PROGRAMMATIC_SCROLL_TOLERANCE_PX) {
             controller.armChatTopHistoryLoad?.();
         }
-    }, [controller, paneKey, ref, scrollMode, stickyBottom]);
+    }, [controller, dispatchScrollOffset, paneKey, ref, scrollMode, stickyBottom]);
 
     const onWheel = React.useCallback((event) => {
         const node = ref.current;
@@ -796,8 +847,32 @@ function Runs({ runs, theme }) {
                 fontWeight: run.bold ? 700 : 400,
                 textDecoration: run.underline ? "underline" : "none",
             };
+            // A run flagged trailingRule renders its text then a CSS rule that
+            // fills the remaining width — see selectors.js for why this is not
+            // a repeated box-drawing character.
+            if (run?.trailingRule) {
+                return React.createElement("span", {
+                    key: `${index}:rule`,
+                    className: "ps-line-trailing-rule",
+                    style,
+                }, run.text || "");
+            }
             const href = String(run?.href || "").trim();
             const isExternalHref = /^https?:\/\//i.test(href);
+            // artifact:// links used to render as an inert span — the only
+            // affordance was "press a to download", which is the wrong verb
+            // for a patch you want to READ. They now open the Files tab with
+            // the artifact selected and previewed.
+            const artifactRef = parseArtifactHref(href);
+
+            if (artifactRef) {
+                return React.createElement(ArtifactLink, {
+                    key: `${index}:${run.text || ""}`,
+                    label: run.text || "",
+                    artifactRef,
+                    style,
+                });
+            }
 
             return isExternalHref
                 ? React.createElement("a", {
@@ -830,7 +905,45 @@ function SystemNoticeLine({ line, theme }) {
             : null);
 }
 
-function Line({ line, theme, className = "" }) {
+/**
+ * Coalesce high-frequency dispatches to one per animation frame.
+ *
+ * pointermove and scroll fire many times per frame, and each dispatch
+ * notifies every subscriber, so a loaded transcript re-renders repeatedly
+ * between two painted frames — work that is thrown away before it is ever
+ * seen. Collapsing to one dispatch per frame keeps the interaction
+ * responsive without changing what the state ends up as: the LAST value in
+ * the frame wins, which is the one the user is actually looking at.
+ */
+function useFrameCoalescedCallback(fn) {
+    const frameRef = React.useRef(0);
+    const argsRef = React.useRef(null);
+    const fnRef = React.useRef(fn);
+    fnRef.current = fn;
+
+    React.useEffect(() => () => {
+        if (frameRef.current) cancelAnimationFrame(frameRef.current);
+    }, []);
+
+    return React.useCallback((...args) => {
+        argsRef.current = args;
+        if (frameRef.current) return;
+        frameRef.current = requestAnimationFrame(() => {
+            frameRef.current = 0;
+            const pending = argsRef.current;
+            argsRef.current = null;
+            if (pending) fnRef.current(...pending);
+        });
+    }, []);
+}
+
+/**
+ * Rendering a transcript is proportional to its length, so it must not repeat
+ * for state changes that do not alter the lines — scroll offset and pane
+ * resize both notify every subscriber. Memoizing on the line object keeps
+ * React from reconciling thousands of rows on every scroll event.
+ */
+const Line = React.memo(function Line({ line, theme, className = "" }) {
     const lineClassName = className ? `ps-line ${className}` : "ps-line";
     if (!line) {
         return React.createElement("div", { className: lineClassName }, " ");
@@ -851,7 +964,7 @@ function Line({ line, theme, className = "" }) {
             textDecoration: line.underline ? "underline" : "none",
         },
     }, line.text || " ");
-}
+});
 
 function lineText(line) {
     if (!line) return "";
@@ -865,7 +978,12 @@ function usePanePixelScroll(ref, scrollOffset, paneKey, controller) {
 
     React.useLayoutEffect(() => {
         const node = ref.current;
-        if (!node) return;
+        // No paneKey means nobody is driving this pane's offset, so leave the
+        // scroller entirely alone. Writing scrollTop back during a touch fling
+        // interrupts momentum every frame — which is why the preview felt
+        // stiff next to the transcript — and the SCROLL_ROW_HEIGHT
+        // quantization makes it snap as well.
+        if (!node || !paneKey) return;
         const maxScroll = Math.max(0, node.scrollHeight - node.clientHeight);
         const nextScrollTop = Math.min(maxScroll, Math.max(0, Number(scrollOffset) || 0) * SCROLL_ROW_HEIGHT);
         if (Math.abs(node.scrollTop - nextScrollTop) > 2) {
@@ -875,12 +993,19 @@ function usePanePixelScroll(ref, scrollOffset, paneKey, controller) {
                 programmaticScrollRef.current = false;
             });
         }
-    }, [ref, scrollOffset]);
+    }, [ref, scrollOffset, paneKey]);
 
-    return React.useCallback(() => {
+    return React.useCallback((event) => {
         if (programmaticScrollRef.current) return;
         const node = ref.current;
         if (!node || !paneKey) return;
+        // React simulates bubbling for onScroll, so scrolling a code block or
+        // table INSIDE the document also fires this handler. Acting on it
+        // recorded the pane offset from an inner element's scroll state and
+        // then wrote it back to the outer scroller — horizontally scrolling a
+        // fenced code block snapped the whole markdown preview to the top.
+        // Only the pane's own scroller may drive the pane's offset.
+        if (event && event.target !== node) return;
         // See useScrollSync — ignore browser auto-clamp during a
         // transient empty/loading body.
         if (node.scrollHeight <= node.clientHeight) return;
@@ -912,6 +1037,163 @@ const CODE_LANGUAGE_ALIASES = {
     css: "css", scss: "css",
 };
 
+// ── Diff blocks ───────────────────────────────────────────────────────────
+// A ```diff fence is line-oriented, not token-oriented: running it through
+// the generic tokenizer colored Rust/JS keywords inside the payload while
+// leaving the +/- semantics — the only thing that matters in a diff — as
+// undifferentiated text. Diffs are classified per line instead.
+
+const DIFF_LANGUAGES = new Set(["diff", "patch", "udiff"]);
+
+/**
+ * Diff-shaped artifacts. Recognized by extension AND by content type, because
+ * an agent may write either `.patch`/`.diff` or a text/x-patch blob under some
+ * other name.
+ */
+const DIFF_ARTIFACT_RE = /\.(patch|diff)$/i;
+const IMAGE_CONTENT_TYPE_RE = /^image\/(png|jpe?g|gif|webp|avif|bmp|svg\+xml|x-icon|vnd\.microsoft\.icon)$/i;
+const IMAGE_FILENAME_RE = /\.(png|jpe?g|gif|webp|avif|bmp|svg|ico)$/i;
+
+/** Map an artifact filename to a highlighter language, or null for plain text. */
+const CODE_ARTIFACT_LANGUAGES = {
+    js: "javascript", mjs: "javascript", cjs: "javascript", jsx: "javascript",
+    ts: "typescript", tsx: "typescript", json: "json", jsonl: "json",
+    py: "python", rs: "rust", go: "go", java: "java", rb: "ruby",
+    sh: "bash", bash: "bash", zsh: "bash", yml: "yaml", yaml: "yaml",
+    toml: "toml", sql: "sql", css: "css", html: "html", xml: "xml",
+};
+
+/**
+ * Strip a leading YAML frontmatter block from markdown.
+ *
+ * The renderer has no concept of frontmatter, so `---\ntitle: x\n---` was
+ * collapsed into a paragraph and rendered as prose above the document — which
+ * read as the title being duplicated, since the doc's own H1 follows it.
+ * Document viewers hide frontmatter; only strip a block that starts on line 1
+ * and closes, so a document opening with a thematic break is untouched.
+ */
+function stripYamlFrontmatter(content) {
+    const text = String(content || "");
+    if (!/^---[ \t]*\r?\n/.test(text)) return text;
+    const close = /\r?\n---[ \t]*(\r?\n|$)/.exec(text.slice(3));
+    if (!close) return text;
+    return text.slice(3 + close.index + close[0].length);
+}
+
+function codeLanguageForArtifact(filename) {
+    const ext = /\.([A-Za-z0-9]+)$/.exec(String(filename || ""));
+    if (!ext) return null;
+    return CODE_ARTIFACT_LANGUAGES[ext[1].toLowerCase()] || null;
+}
+
+function isDiffArtifact(filename, contentType) {
+    if (DIFF_ARTIFACT_RE.test(String(filename || ""))) return true;
+    return /^text\/x-(patch|diff)$/i.test(String(contentType || "").trim());
+}
+
+/** Parse an `artifact://<sessionId>/<filename>` href. */
+function parseArtifactHref(href) {
+    const match = /^artifact:\/\/([^/]+)\/(.+)$/i.exec(String(href || "").trim());
+    if (!match) return null;
+    try {
+        return { sessionId: match[1], filename: decodeURIComponent(match[2]) };
+    } catch {
+        return { sessionId: match[1], filename: match[2] };
+    }
+}
+
+/**
+ * Controller access for deeply-nested renderers.
+ *
+ * The markdown/run renderers are called from many places and never took a
+ * controller — threading one through every call site to make a single link
+ * type clickable would touch far more code than the feature is worth.
+ */
+const ControllerContext = React.createContext(null);
+
+function ArtifactLink({ label, artifactRef, style }) {
+    const controller = React.useContext(ControllerContext);
+    const diff = isDiffArtifact(artifactRef.filename);
+    const onOpen = React.useCallback((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!controller?.revealArtifact) return;
+        // On a phone the preview takes the whole pane — a list/detail split has
+        // no room to be useful at 390px.
+        const fullscreen = typeof window !== "undefined"
+            && typeof window.matchMedia === "function"
+            && window.matchMedia("(max-width: 920px)").matches;
+        Promise.resolve(controller.revealArtifact(artifactRef.sessionId, artifactRef.filename, { fullscreen }))
+            .catch(() => {});
+    }, [controller, artifactRef.sessionId, artifactRef.filename]);
+
+    return React.createElement("button", {
+        type: "button",
+        className: `ps-artifact-link${diff ? " is-diff" : ""}`,
+        onClick: onOpen,
+        title: diff
+            ? `Open ${artifactRef.filename} as a diff`
+            : `Open ${artifactRef.filename} in Files`,
+        style,
+    },
+    diff ? React.createElement("span", { className: "ps-artifact-link-glyph", "aria-hidden": "true" }, "±") : null,
+    React.createElement("span", { className: "ps-artifact-link-label" }, label || artifactRef.filename));
+}
+
+function isDiffLanguage(language) {
+    return DIFF_LANGUAGES.has(String(language || "").trim().toLowerCase());
+}
+
+// File/meta headers are matched BEFORE +/- so "--- a/x" and "+++ b/x" are not
+// mistaken for removed/added lines.
+const DIFF_META_PATTERN = /^(?:diff --git |index |--- |\+\+\+ |new file mode|deleted file mode|old mode|new mode|similarity index|dissimilarity index|rename (?:from|to) |copy (?:from|to) |Binary files |GIT binary patch|\\)/;
+
+function classifyDiffLine(line) {
+    if (DIFF_META_PATTERN.test(line)) return "meta";
+    if (line.startsWith("@@")) return "hunk";
+    if (line.startsWith("+")) return "add";
+    if (line.startsWith("-")) return "del";
+    return "context";
+}
+
+const DIFF_LINE_COLORS = { add: "green", del: "red", hunk: "cyan", meta: "gray" };
+
+function renderDiffCode(content, theme) {
+    const lines = String(content || "").replace(/\n$/, "").split("\n");
+    return lines.map((line, index) => {
+        const kind = classifyDiffLine(line);
+        const color = DIFF_LINE_COLORS[kind];
+        // Payload lines carry their +/-/space in column 1. Split it off into
+        // a gutter (GitHub/GitLab/VS Code all do this) so the marker stops
+        // colliding with the code, wrapped lines hang under the text column
+        // instead of under the marker, and a copied selection yields clean
+        // code — the gutter is user-select:none. Meta/hunk lines have no
+        // marker but keep the empty gutter so every line stays aligned.
+        // Only strip column 1 when it really IS a marker. "context" is the
+        // fallback for every unrecognized line, so slicing it unconditionally
+        // ate the first real character of anything that is not a unified-diff
+        // body line — GIT binary patch payload ("delta 142", "zcmV;91Ru…"),
+        // format-patch commit prose, mbox headers. Real context lines start
+        // with a space; those still get their marker split off.
+        const hasMarker = kind === "add" || kind === "del"
+            || (kind === "context" && line.startsWith(" "));
+        const marker = hasMarker ? line.slice(0, 1) : "";
+        const text = hasMarker ? line.slice(1) : line;
+        return React.createElement("span", {
+            key: `d:${index}`,
+            className: `ps-diff-line is-${kind}`,
+            style: color ? { color: resolveColor(theme, color) || undefined } : undefined,
+        },
+            React.createElement("span", {
+                className: "ps-diff-marker",
+                // Decorative: the tint already carries the meaning visually,
+                // and the row is announced by its text.
+                "aria-hidden": "true",
+            }, marker.trim()),
+            React.createElement("span", { className: "ps-diff-text" }, text));
+    });
+}
+
 function isMermaidLanguage(language) {
     return String(language || "").trim().toLowerCase() === "mermaid";
 }
@@ -1174,6 +1456,25 @@ function renderInlineMarkdown(source, theme, keyPrefix = "md") {
             return React.createElement("em", { key, className: "ps-md-em" }, renderInlineMarkdown(token.text, theme, `${key}:em`));
         }
         if (token.type === "link") {
+            const artifactRef = parseArtifactHref(token.href);
+            if (artifactRef) {
+                return React.createElement(ArtifactLink, {
+                    key,
+                    label: token.text,
+                    artifactRef,
+                    style: { color: resolveColor(theme, "cyan") },
+                });
+            }
+            // Only http(s) becomes a navigable anchor. Anything else — an
+            // unknown scheme, or a malformed href from a bad transform — would
+            // resolve RELATIVE to the portal and navigate the SPA away on
+            // click, losing all session state. Render it as inert text instead.
+            if (!/^https?:\/\//i.test(String(token.href || "").trim())) {
+                return React.createElement("span", {
+                    key,
+                    style: { color: resolveColor(theme, "cyan") },
+                }, token.text);
+            }
             return React.createElement("a", {
                 key,
                 className: "ps-md-link",
@@ -1457,10 +1758,16 @@ function MarkdownPreviewContent({ content, theme }) {
                 }, renderInlineMarkdown(block.text, theme, `heading:${index}`));
             }
             if (block.type === "code") {
-                const codeSection = React.createElement("section", { key: `block:${index}`, className: "ps-md-code-block" },
+                const isDiff = isDiffLanguage(block.language);
+                const codeSection = React.createElement("section", {
+                    key: `block:${index}`,
+                    className: `ps-md-code-block${isDiff ? " is-diff" : ""}`,
+                },
                     React.createElement("div", { className: "ps-md-code-header" }, block.language || "text"),
                     React.createElement("pre", { className: "ps-md-code-pre" },
-                        React.createElement("code", null, renderHighlightedCode(block.content, block.language, theme))));
+                        React.createElement("code", null, isDiff
+                            ? renderDiffCode(block.content, theme)
+                            : renderHighlightedCode(block.content, block.language, theme))));
                 if (isMermaidLanguage(block.language)) {
                     return React.createElement(MermaidDiagram, {
                         key: `block:${index}`,
@@ -1548,7 +1855,42 @@ function MarkdownPreviewContent({ content, theme }) {
         }));
 }
 
-function MarkdownPreviewPanel({ controller, title, color, focused, scrollOffset = 0, paneKey, theme, content }) {
+/**
+ * Preview panel for pre-rendered content (diff, highlighted code).
+ *
+ * Shares MarkdownPreviewPanel's scroll wiring rather than being a plain
+ * overflow:auto div: without the pane hookup the keyboard scroll commands
+ * have nothing to drive, so these previews could only ever be scrolled with
+ * the mouse — the global key handler swallows the arrows before the browser
+ * would scroll them natively.
+ */
+function RenderedPreviewPanel({ controller, title, color, focused, scrollOffset = 0, paneKey, theme, className = "", focusRegion = null, children }) {
+    const ref = React.useRef(null);
+    const onScroll = usePanePixelScroll(ref, scrollOffset, paneKey, controller);
+    // Mouse only. On touch this fired on every tap, and setFocus runs the
+    // region through normalizeFocusRegion, which rewrites a region missing
+    // from the current layout to order[0] — so tapping the chat on a phone
+    // was silently reassigning focus to the inspector and jumping to the
+    // artifact list. Keyboard scroll targeting is meaningless on touch anyway.
+    const claimFocus = React.useCallback(() => {
+        const region = focusRegionForPaneKey(paneKey, focusRegion);
+        if (region && controller?.setFocus) controller.setFocus(region);
+    }, [controller, paneKey, focusRegion]);
+
+    return React.createElement(Panel, { title, color, focused, theme },
+        React.createElement("div", {
+            ref,
+            className: `ps-scroll-panel is-preview ${className}`.trim(),
+            onScroll,
+            onMouseDown: claimFocus,
+        }, children));
+}
+
+function MarkdownPreviewPanel({ controller, title, color, focused, scrollOffset = 0, paneKey, theme, content, focusRegion = null }) {
+    const claimMarkdownFocus = React.useCallback(() => {
+        const region = focusRegionForPaneKey(paneKey, focusRegion);
+        if (region && controller?.setFocus) controller.setFocus(region);
+    }, [controller, paneKey, focusRegion]);
     const ref = React.useRef(null);
     const onScroll = usePanePixelScroll(ref, scrollOffset, paneKey, controller);
 
@@ -1557,6 +1899,7 @@ function MarkdownPreviewPanel({ controller, title, color, focused, scrollOffset
             ref,
             className: "ps-scroll-panel ps-markdown-scroll",
             onScroll,
+            onMouseDown: claimMarkdownFocus,
         }, React.createElement(MarkdownPreviewContent, { content, theme })));
 }
 
@@ -1587,9 +1930,14 @@ function BinaryArtifactPreviewPanel({ title, color, focused, theme, filename, co
         })
         : "";
 
-    // Raster images render inline (authenticated fetch → object URL). Other
-    // binary types keep the download-only card.
-    const isRasterImage = /^image\/(png|jpeg|gif|webp)$/i.test(String(contentType || ""));
+    // Images render inline (authenticated fetch → object URL). Other binary
+    // types keep the download-only card.
+    //
+    // SVG goes through the SAME object-URL <img> path rather than being
+    // inlined as markup: an artifact is untrusted content, and <img> does not
+    // execute script inside an SVG the way inline markup would.
+    const isRasterImage = IMAGE_CONTENT_TYPE_RE.test(String(contentType || ""))
+        || IMAGE_FILENAME_RE.test(String(filename || ""));
     const [imageUrl, setImageUrl] = React.useState(null);
     React.useEffect(() => {
         setImageUrl(null);
@@ -2119,10 +2467,16 @@ function StructuredBlockList({ blocks, theme, controller = null }) {
             }
 
             if (block.type === "code") {
-                const chatCodeSection = React.createElement("section", { key: `code:${index}`, className: "ps-md-code-block ps-chat-code-block" },
+                const chatIsDiff = isDiffLanguage(block.language);
+                const chatCodeSection = React.createElement("section", {
+                    key: `code:${index}`,
+                    className: `ps-md-code-block ps-chat-code-block${chatIsDiff ? " is-diff" : ""}`,
+                },
                     React.createElement("div", { className: "ps-md-code-header" }, block.language || "text"),
                     React.createElement("pre", { className: "ps-md-code-pre" },
-                        React.createElement("code", null, renderHighlightedCode(block.content || "", block.language, theme))));
+                        React.createElement("code", null, chatIsDiff
+                            ? renderDiffCode(block.content || "", theme)
+                            : renderHighlightedCode(block.content || "", block.language, theme))));
                 if (isMermaidLanguage(block.language)) {
                     return React.createElement(MermaidDiagram, {
                         key: `code:${index}`,
@@ -2232,11 +2586,19 @@ function unbracketTitleRuns(runs) {
 
 function Panel({ title, titleRight = null, color = "gray", focused = false, actions = null, children, theme, className = "" }) {
     const accent = resolveColor(theme, color);
+    // A panel with nothing to put in its header should not render one. Nested
+    // panels (the artifact list and preview inside Files) were spending a full
+    // header row restating what the enclosing pane already said.
+    const hasHeader = Boolean(
+        (Array.isArray(title) ? title.length > 0 : String(title ?? "").trim())
+        || titleRight
+        || actions,
+    );
     return React.createElement("section", {
-        className: `ps-panel${focused ? " is-focused" : ""}${className ? ` ${className}` : ""}`,
+        className: `ps-panel${focused ? " is-focused" : ""}${hasHeader ? "" : " is-chromeless"}${className ? ` ${className}` : ""}`,
         style: { "--ps-panel-accent": accent || "var(--ps-border)" },
     },
-    React.createElement("header", { className: "ps-panel-header" },
+    hasHeader ? React.createElement("header", { className: "ps-panel-header" },
         React.createElement("div", { className: "ps-panel-title" },
             Array.isArray(title)
                 ? React.createElement(Runs, { runs: title, theme })
@@ -2252,7 +2614,7 @@ function Panel({ title, titleRight = null, color = "gray", focused = false, acti
                 actions ? React.createElement("div", { className: "ps-panel-actions" }, actions) : null,
             )
             : null,
-    ),
+    ) : null,
     React.createElement("div", { className: "ps-panel-body" }, children));
 }
 
@@ -2355,7 +2717,33 @@ function PortalSequenceLines({ lines, theme, completionByTurn }) {
 }
 
 
-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 }) {
+/**
+ * Which focus region owns a scrollable pane.
+ *
+ * Keyboard scrolling already routes through focusRegion
+ * (controller.getScrollablePaneForFocus), but nothing set the focus when you
+ * CLICKED a pane — so the scroll keys kept acting on whatever was focused
+ * last. Clicking into a scrollable pane now claims the keys for it.
+ */
+const PANE_KEY_FOCUS_REGIONS = {
+    chat: "chat",
+    activity: "activity",
+    inspector: "inspector",
+    // The preview is reached through the inspector's Files tab, and the
+    // controller maps inspector-focus + files-tab back to filePreview.
+    filePreview: "inspector",
+};
+
+function focusRegionForPaneKey(paneKey, override = null) {
+    // The DETACHED preview sits in the activity slot, so clicking it must claim
+    // activity focus — that is what distinguishes "clicked the preview" from
+    // "clicked the artifact list", which keeps inspector focus and drives the
+    // selection with the same keys.
+    if (override) return override;
+    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 }) {
     const themeId = useControllerSelector(controller, (state) => state.ui.themeId);
     const theme = getTheme(themeId);
     const ref = React.useRef(null);
@@ -2366,6 +2754,19 @@ function ScrollLinesPanel({ title, titleRight = null, color, focused, actions, l
     const normalizedBottomSticky = React.useMemo(() => normalizeLines(bottomStickyLines), [bottomStickyLines]);
     const preserveHorizontalScroll = className.includes("is-preserve") && panelClassName.includes("has-preserved-sticky");
 
+    // Clicking (or touching) a scrollable pane makes the keyboard scroll keys
+    // act on THAT pane. Fires on mousedown rather than click so a drag-select
+    // inside the pane claims focus too.
+    // Mouse only. On touch this fired on every tap, and setFocus runs the
+    // region through normalizeFocusRegion, which rewrites a region missing
+    // from the current layout to order[0] — so tapping the chat on a phone
+    // was silently reassigning focus to the inspector and jumping to the
+    // artifact list. Keyboard scroll targeting is meaningless on touch anyway.
+    const claimFocus = React.useCallback(() => {
+        const region = focusRegionForPaneKey(paneKey, focusRegion);
+        if (region && controller?.setFocus) controller.setFocus(region);
+    }, [controller, paneKey, focusRegion]);
+
     const syncScrollLeft = React.useCallback((source, target) => {
         if (!source || !target) return;
         if (Math.abs((target.scrollLeft || 0) - (source.scrollLeft || 0)) <= 1) return;
@@ -2413,7 +2814,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, className: `ps-scroll-panel ${className}${scrollShadow.down ? " is-scrolled-down" : ""}${scrollShadow.up ? " is-scrolled-up" : ""}`.trim(), onScroll: handleBodyScroll, onWheel, onTouchStart, onTouchMove, onTouchEnd, onTouchCancel: onTouchEnd },
+        React.createElement("div", { ref, className: `ps-scroll-panel ${className}${scrollShadow.down ? " is-scrolled-down" : ""}${scrollShadow.up ? " is-scrolled-up" : ""}`.trim(), onScroll: handleBodyScroll, onMouseDown: claimFocus, onTouchStart, onWheel, onTouchMove, onTouchEnd, onTouchCancel: onTouchEnd },
             typeof renderBody === "function"
                 ? renderBody(normalizedLines, theme)
                 : structuredBlocks
@@ -2524,6 +2925,36 @@ function SessionRowContent({ row, theme, structured = false }) {
             : null);
 }
 
+/**
+ * Reuse the previous value when a freshly computed one is deep-equal.
+ *
+ * The session poll rebuilds sessions.byId whenever ANY session's updatedAt or
+ * iteration count moves, which invalidates every downstream memo and re-renders
+ * the whole list — visibly, every poll — even though the rows that are actually
+ * displayed did not change. Comparing the rendered result and keeping the old
+ * reference stops the churn at the render boundary, without having to chase
+ * which upstream field ticked.
+ *
+ * Sized for lists of tens of rows: the comparison is far cheaper than the
+ * reconciliation it avoids.
+ */
+function useStableValue(value) {
+    const ref = React.useRef(value);
+    const previousJson = React.useRef(null);
+    const nextJson = React.useMemo(() => {
+        try {
+            return JSON.stringify(value);
+        } catch {
+            return null;   // unserializable: never claim equality
+        }
+    }, [value]);
+    if (nextJson === null || previousJson.current !== nextJson) {
+        previousJson.current = nextJson;
+        ref.current = value;
+    }
+    return ref.current;
+}
+
 function SessionPane({ controller, actions = null, panelClassName = "", structuredRows = false }) {
     const themeId = useControllerSelector(controller, (state) => state.ui.themeId);
     const theme = getTheme(themeId);
@@ -2547,7 +2978,7 @@ function SessionPane({ controller, actions = null, panelClassName = "", structur
         // ever wanted independently.
         rich: state.ui.chatViewMode === "rich",
     }), shallowEqualObject);
-    const rows = React.useMemo(() => selectSessionRows({
+    const computedRows = React.useMemo(() => selectSessionRows({
         sessions: {
             activeSessionId: viewState.activeSessionId,
             byId: viewState.sessionsById,
@@ -2563,6 +2994,8 @@ function SessionPane({ controller, actions = null, panelClassName = "", structur
             mode: viewState.connectionMode,
         },
     }), [viewState.activeSessionId, viewState.auth, viewState.connectionMode, viewState.filterQuery, viewState.ownerFilter, viewState.pinnedIds, viewState.selectedIds, viewState.selectMode, viewState.sessionsById, viewState.sessionsFlat]);
+    // Hold the previous rows when a poll produced identical output.
+    const rows = useStableValue(computedRows);
     const activeSession = viewState.activeSessionId
         ? viewState.sessionsById[viewState.activeSessionId] || null
         : null;
@@ -2869,7 +3302,7 @@ function SessionLinkModal({ url, warn, onCopyAgain, onClose }) {
         React.createElement("div", { className: "ps-link-modal", onClick: stop },
             React.createElement("div", { className: "ps-share-modal-head" },
                 React.createElement("span", null, "Link copied"),
-                React.createElement("button", { className: "ps-modal-close", onClick: onClose }, "✕")),
+                React.createElement("button", { className: "ps-modal-close", onClick: onClose, "aria-label": "Close", title: "Close" }, "✕")),
             React.createElement("div", { className: "ps-share-section-sub" },
                 "Copied to your clipboard — anyone with access can open the session from this link."),
             React.createElement("div", { className: "ps-link-row" },
@@ -3106,7 +3539,7 @@ function SessionModifyModal({ controller, sessionId, initialTitle, currentModel,
         React.createElement("div", { className: "ps-share-modal", onClick: stop },
             React.createElement("div", { className: "ps-share-modal-head" },
                 React.createElement("span", null, "Manage session"),
-                React.createElement("button", { className: "ps-modal-close", onClick: onClose }, "✕")),
+                React.createElement("button", { className: "ps-modal-close", onClick: onClose, "aria-label": "Close", title: "Close" }, "✕")),
 
             // ── Tab bar ───────────────────────────────────────────────
             React.createElement("div", { className: "ps-manage-tabs", role: "tablist" },
@@ -3393,6 +3826,79 @@ function ChatPane({ controller, mobile = false, fullWidth = false, showComposer
     });
 }
 
+/**
+ * Mobile artifact viewer — a genuine full-viewport overlay, not a pane.
+ *
+ * Rendered OUTSIDE the workspace and fixed to the viewport, so the portal
+ * header, session list and composer are all covered: opening an artifact on a
+ * phone should feel like pushing a detail screen, the way a native app does,
+ * not like shrinking content into one more box. Desktop never mounts this.
+ */
+function MobileArtifactOverlay({ controller }) {
+    const view = useControllerSelector(controller, (state) => {
+        const id = state.files.selectedArtifactId || "";
+        const filename = id ? id.slice(id.indexOf("/") + 1) : "";
+        return {
+            filename,
+            origin: state.files.previewOrigin || null,
+            canPrev: controller.canStepArtifactPreview(-1),
+            canNext: controller.canStepArtifactPreview(1),
+        };
+    }, shallowEqualObject);
+
+    // Wrap toggle applies to CODE only. Markdown always wraps — prose in a
+    // horizontal scroller is unreadable — and its fenced blocks keep their own
+    // behavior. Images have nothing to wrap.
+    const isCode = Boolean(codeLanguageForArtifact(view.filename))
+        || isDiffArtifact(view.filename);
+    const [contentWidth, setContentWidth] = React.useState(false);
+    React.useEffect(() => { setContentWidth(false); }, [view.filename]);
+
+    const step = React.useCallback((delta) => {
+        controller.stepArtifactPreview(delta).catch(() => {});
+    }, [controller]);
+
+    return React.createElement("div", { className: "ps-artifact-overlay" },
+        React.createElement("header", { className: "ps-artifact-overlay-bar" },
+            React.createElement("button", {
+                type: "button",
+                className: "ps-artifact-overlay-btn",
+                onClick: () => controller.closeArtifactPreview().catch(() => {}),
+                "aria-label": view.origin === "chat" ? "Close, back to chat" : "Close, back to artifacts",
+            }, "✕"),
+            React.createElement("span", { className: "ps-artifact-overlay-title" }, view.filename || "Artifact"),
+            isCode
+                ? React.createElement("button", {
+                    type: "button",
+                    className: `ps-artifact-overlay-btn${contentWidth ? " is-active" : ""}`,
+                    onClick: () => setContentWidth((v) => !v),
+                    "aria-label": contentWidth ? "Wrap lines" : "Show full lines",
+                    title: contentWidth ? "Wrap to screen width" : "Full line width (scroll horizontally)",
+                }, contentWidth ? "⇥" : "↔")
+                : null,
+            React.createElement("button", {
+                type: "button",
+                className: "ps-artifact-overlay-btn",
+                disabled: !view.canPrev,
+                onClick: () => step(-1),
+                "aria-label": "Previous artifact",
+            }, "‹"),
+            React.createElement("button", {
+                type: "button",
+                className: "ps-artifact-overlay-btn",
+                disabled: !view.canNext,
+                onClick: () => step(1),
+                "aria-label": "Next artifact",
+            }, "›")),
+        // No swipe handlers: horizontal drag belongs to the content, so a wide
+        // code line can be scrolled without also changing which file you are on.
+        React.createElement("div", {
+            className: `ps-artifact-overlay-body${contentWidth ? " is-content-width" : ""}`,
+        }, React.createElement(FilesPane, {
+            controller, focused: true, mobile: true, previewOnly: true, nativeScroll: true,
+        })));
+}
+
 function MobileWorkspace({ controller }) {
     // The session list is always shown; use the toolbar Focus button to give
     // the chat the full screen (the old Show/Hide toggle was redundant with it).
@@ -3424,7 +3930,11 @@ function InspectorTabs({ activeTab, controller }) {
         })));
 }
 
-function FilesPane({ controller, focused, mobile = false }) {
+// `previewOnly` renders JUST the artifact preview panel, so the desktop layout
+// can host it in the activity slot where it gets the existing row resizer.
+// Detached this way the preview is resizable; nested inside the inspector it
+// could only ever have half of a pane.
+function FilesPane({ controller, focused, mobile = false, previewOnly = false, nativeScroll = false }) {
     const themeId = useControllerSelector(controller, (state) => state.ui.themeId);
     const theme = getTheme(themeId);
     const fileInputRef = React.useRef(null);
@@ -3441,6 +3951,8 @@ function FilesPane({ controller, focused, mobile = false }) {
             filesBySessionId: state.files.bySessionId,
             filesFilter: state.files.filter,
             selectedArtifactId: state.files.selectedArtifactId,
+            markedIds: state.files.markedIds || [],
+            previewOrigin: state.files.previewOrigin || null,
             focused,
             previewScroll: state.ui.scroll.filePreview,
             fullscreen: Boolean(state.files.fullscreen),
@@ -3502,7 +4014,35 @@ function FilesPane({ controller, focused, mobile = false }) {
         }
     }, [controller, viewState.canBrowserUpload, viewState.canPathUpload]);
 
+    // Declared BEFORE panelActions, which reads it. When this sat further down
+    // the component it was a temporal dead zone violation: panelActions threw
+    // "Cannot access 'markedSet' before initialization" during render, React
+    // unmounted the whole tree, and the portal went blank on opening Artifacts.
+    const markedSet = React.useMemo(() => new Set(viewState.markedIds || []), [viewState.markedIds]);
+
     const panelActions = React.createElement(React.Fragment, null,
+        // Bulk actions only appear once something is marked, so the header
+        // stays quiet in the common single-selection case.
+        markedSet.size > 0
+            ? React.createElement(React.Fragment, null,
+                React.createElement("span", {
+                    className: "ps-mini-button-label",
+                    style: { padding: "0 6px", opacity: 0.85 },
+                    title: "Cmd/Ctrl-click to mark, Shift-click for a range",
+                }, `${markedSet.size} marked`),
+                viewState.canDeleteArtifacts
+                    ? React.createElement(IconButton, {
+                        icon: "🗑",
+                        label: `Delete ${markedSet.size} marked`,
+                        onClick: () => controller.deleteMarkedArtifacts().catch(() => {}),
+                    })
+                    : null,
+                React.createElement(IconButton, {
+                    icon: "✕",
+                    label: "Clear marks",
+                    onClick: () => controller.clearArtifactMarks(),
+                }))
+            : null,
         React.createElement("input", {
             ref: fileInputRef,
             type: "file",
@@ -3544,12 +4084,26 @@ function FilesPane({ controller, focused, mobile = false }) {
             label: "Filter",
             onClick: () => controller.handleCommand(UI_COMMANDS.OPEN_FILES_FILTER).catch(() => {}),
         }),
+        // Desktop keeps the plain fullscreen toggle it has always had. The
+        // back affordance belongs to the mobile overlay, which renders its own
+        // top bar — putting it here too would change desktop behavior.
         React.createElement(IconButton, {
             icon: viewState.fullscreen ? "⇱" : "⛶",
             label: viewState.fullscreen ? "Exit fullscreen" : "Fullscreen",
             onClick: () => controller.handleCommand(UI_COMMANDS.TOGGLE_FILE_PREVIEW_FULLSCREEN).catch(() => {}),
         }));
 
+    // Keyboard selection has to drag the viewport with it, exactly as the
+    // session list does — otherwise j/k walks the selection straight out of
+    // view and the list appears frozen.
+    const selectedItemRef = React.useRef(null);
+    React.useEffect(() => {
+        const node = selectedItemRef.current;
+        if (node && typeof node.scrollIntoView === "function") {
+            node.scrollIntoView({ block: "nearest" });
+        }
+    }, [filesView.selectedIndex, viewState.selectedArtifactId]);
+
     const listContent = items.length === 0
         ? normalizeLines(filesView.listBodyLines || []).map((line, index) => React.createElement(Line, {
             key: `empty:${index}`,
@@ -3559,34 +4113,114 @@ function FilesPane({ controller, focused, mobile = false }) {
         : items.map((item, index) => React.createElement("button", {
             key: item.id,
             type: "button",
-            className: `ps-list-button${index === filesView.selectedIndex ? " is-selected" : ""}`,
-            onClick: () => {
+            ref: index === filesView.selectedIndex ? selectedItemRef : null,
+            className: `ps-list-button${index === filesView.selectedIndex ? " is-selected" : ""}`
+                + (markedSet.has(item.id) ? " is-marked" : ""),
+            onClick: (event) => {
                 controller.setFocus("inspector");
-                controller.selectFileBrowserItem(item).catch(() => {});
+                // Cmd/Ctrl toggles one, Shift extends a run, plain click
+                // selects and drops the marks — the usual list conventions.
+                if (event.metaKey || event.ctrlKey) {
+                    controller.toggleArtifactMark(item);
+                    return;
+                }
+                if (event.shiftKey) {
+                    controller.markArtifactRange(item);
+                    return;
+                }
+                controller.clearArtifactMarks();
+                controller.selectFileBrowserItem(item)
+                    .then(() => { if (mobile) controller.handleCommand(UI_COMMANDS.TOGGLE_FILE_PREVIEW_FULLSCREEN).catch(() => {}); })
+                    .catch(() => {});
             },
         }, React.createElement(Line, {
             line: normalizeLines([filesView.listBodyLines?.[index]])[0],
             theme,
         })));
 
-    const previewPane = filesView.previewRenderMode === "markdown"
+    // A .patch/.diff artifact is rendered AS a diff — gutter markers, add/remove
+    // tinting — rather than as undifferentiated grey text. This is the whole
+    // point of clicking through from the transcript.
+    const previewReady = !filesView.previewLoading && !filesView.previewError;
+    const previewIsDiff = previewReady
+        && isDiffArtifact(filesView.selectedFilename, filesView.previewContentType)
+        && !filesView.previewIsBinary
+        && Boolean(filesView.previewContent);
+
+    // Images are routed by content type OR extension, and go to the binary
+    // panel even when the payload is text (SVG) — it owns the authenticated
+    // fetch → object URL path that renders an artifact safely.
+    const previewIsImage = previewReady
+        && (IMAGE_CONTENT_TYPE_RE.test(String(filesView.previewContentType || ""))
+            || IMAGE_FILENAME_RE.test(String(filesView.selectedFilename || "")));
+
+    // Source files get real syntax highlighting instead of undifferentiated
+    // grey text — the same highlighter the chat code blocks use.
+    const previewCodeLanguage = previewReady
+        && !filesView.previewIsBinary
+        && !previewIsDiff
+        && filesView.previewRenderMode !== "markdown"
+        && Boolean(filesView.previewContent)
+        ? codeLanguageForArtifact(filesView.selectedFilename)
+        : null;
+
+    // Detached (desktop) => the preview is its own pane in the activity slot and
+    // claims activity focus, so arrows/j/k/PgUp scroll IT. Inline (mobile) it is
+    // part of the inspector and keeps inspector focus.
+    const previewFocusRegion = previewOnly ? "activity" : null;
+    // In the mobile overlay the browser owns scrolling outright.
+    const previewPaneKey = nativeScroll ? null : "filePreview";
+
+    const previewPane = previewIsImage
+        ? React.createElement(BinaryArtifactPreviewPanel, {
+            title: null,
+            color: "cyan",
+            focused: false,
+            theme,
+            filename: filesView.selectedFilename,
+            contentType: filesView.previewContentType,
+            sizeBytes: filesView.previewSizeBytes,
+            source: filesView.previewSource,
+            uploadedAt: filesView.previewUploadedAt,
+            controller,
+            sessionId: filesView.selectedSessionId,
+        })
+        : previewCodeLanguage
+        ? React.createElement(RenderedPreviewPanel, {
+            controller, title: null, color: "cyan", focused: false, theme,
+            paneKey: previewPaneKey, scrollOffset: viewState.previewScroll,
+            className: "ps-diff-preview", focusRegion: previewFocusRegion,
+        },
+            React.createElement("pre", { className: "ps-md-code-pre" },
+                React.createElement("code", null,
+                    renderHighlightedCode(filesView.previewContent, previewCodeLanguage, theme))))
+        : previewIsDiff
+        ? React.createElement(RenderedPreviewPanel, {
+            controller, title: null, color: "cyan", focused: false, theme,
+            paneKey: previewPaneKey, scrollOffset: viewState.previewScroll,
+            className: "ps-diff-preview", focusRegion: previewFocusRegion,
+        },
+            React.createElement("pre", { className: "ps-md-code-pre is-diff" },
+                React.createElement("code", null, renderDiffCode(filesView.previewContent, theme))))
+        : filesView.previewRenderMode === "markdown"
         && !filesView.previewLoading
         && !filesView.previewError
         ? React.createElement(MarkdownPreviewPanel, {
             controller,
-            title: filesView.previewTitle,
+            title: null,
             color: "cyan",
             focused: false,
             scrollOffset: viewState.previewScroll,
-            paneKey: "filePreview",
+            paneKey: previewPaneKey,
             theme,
-            content: filesView.previewContent || "",
+            focusRegion: previewFocusRegion,
+            content: stripYamlFrontmatter(filesView.previewContent || ""),
         })
         : filesView.previewIsBinary
             && !filesView.previewLoading
             && !filesView.previewError
             ? React.createElement(BinaryArtifactPreviewPanel, {
-                title: filesView.previewTitle,
+                title: null,
                 color: "cyan",
                 focused: false,
                 theme,
@@ -3600,17 +4234,20 @@ function FilesPane({ controller, focused, mobile = false }) {
             })
         : React.createElement(ScrollLinesPanel, {
             controller,
-            title: filesView.previewTitle,
+            title: null,
             color: "cyan",
             focused: false,
             lines: filesView.previewLines,
             scrollOffset: viewState.previewScroll,
             scrollMode: "top",
-            paneKey: "filePreview",
+            paneKey: previewPaneKey,
+            focusRegion: previewFocusRegion,
             className: "is-preview is-wrapped",
         });
     const view = viewState;
 
+    if (previewOnly) return previewPane;
+
     return React.createElement(Panel, {
         title: view.fullscreen
             ? filesView.fullscreenTitle
@@ -3626,10 +4263,16 @@ function FilesPane({ controller, focused, mobile = false }) {
     // Fullscreen files mode shows only the preview pane; the list stays hidden.
     view.fullscreen
         ? previewPane
-        : React.createElement("div", { className: "ps-files-grid" },
-            React.createElement(Panel, { title: filesView.listTitle, color: "cyan", theme },
-                React.createElement("div", { className: "ps-action-list" }, listContent)),
-            previewPane,
+        : React.createElement("div", {
+            // The pane is a LIST, full stop. Desktop detaches the preview into
+            // the activity slot; mobile opens the full-screen overlay on tap.
+            // Neither wants a cramped preview stacked under the list.
+            className: "ps-files-grid is-list-only",
+        },
+            // No nested panel: the enclosing Files pane is already the box, and
+            // a second border + header inside it only ate vertical space to
+            // restate what the pane title says.
+            React.createElement("div", { className: "ps-action-list ps-files-list" }, listContent),
         ));
 }
 
@@ -3868,9 +4511,11 @@ function ChatFocusOverlay({ controller, pane, onClose, mobile = false }) {
             structuredRows: mobile,
             actions: React.createElement("button", {
                 type: "button",
-                className: "ps-mini-button",
+                className: "ps-mini-button ps-overlay-close",
                 onClick: onClose,
-            }, "Close"),
+                "aria-label": "Close",
+                title: "Close",
+            }, "✕"),
         });
     } else if (pane === "inspector") {
         content = React.createElement(InspectorPane, {
@@ -3879,9 +4524,11 @@ function ChatFocusOverlay({ controller, pane, onClose, mobile = false }) {
             panelClassName: "ps-chat-focus-pane",
             extraActions: React.createElement("button", {
                 type: "button",
-                className: "ps-mini-button",
+                className: "ps-mini-button ps-overlay-close",
                 onClick: onClose,
-            }, "Close"),
+                "aria-label": "Close",
+                title: "Close",
+            }, "✕"),
         });
     } else if (pane === "activity") {
         content = React.createElement(ActivityPane, {
@@ -3889,9 +4536,11 @@ function ChatFocusOverlay({ controller, pane, onClose, mobile = false }) {
             panelClassName: "ps-chat-focus-pane",
             extraActions: React.createElement("button", {
                 type: "button",
-                className: "ps-mini-button",
+                className: "ps-mini-button ps-overlay-close",
                 onClick: onClose,
-            }, "Close"),
+                "aria-label": "Close",
+                title: "Close",
+            }, "✕"),
         });
     }
 
@@ -4422,7 +5071,11 @@ function Toolbar({ controller, mobile, chatFocusMode = false, onToggleChatFocus
     const [headerSlot, setHeaderSlot] = React.useState(null);
     React.useEffect(() => {
         if (typeof document === "undefined") return;
-        setHeaderSlot(richUi && !mobile ? document.getElementById("ps-header-toolbar-slot") : null);
+        // Desktop centres the toolbar in the portal header regardless of chat
+        // view — the terminal view was spending a whole strip on it while the
+        // rich view had already handed that row back to the panes. Mobile keeps
+        // the inline strip; there is no header room for it on a phone.
+        setHeaderSlot(!mobile ? document.getElementById("ps-header-toolbar-slot") : null);
     }, [richUi, mobile]);
     const adminVisible = useControllerSelector(controller, (state) => Boolean(state.admin?.visible));
     const chatView = useControllerSelector(controller, (state) => ({
@@ -4539,21 +5192,35 @@ function ColumnResizeHandle({ controller, paneAdjust = 0 }) {
             document.body.classList.remove("is-resizing-pane-x");
         };
 
-        const onPointerMove = (event) => {
+        // Apply at most one adjustment per frame. A drag emits pointermove far
+        // faster than the browser paints, and each adjust re-renders every
+        // pane — so most of that work was discarded before being displayed,
+        // which is what made dragging a loaded layout feel heavy.
+        let movePending = 0;
+        let pendingClientX = 0;
+        const applyMove = () => {
+            movePending = 0;
             const dragState = dragStateRef.current;
             if (!dragState) return;
-            const deltaCells = Math.round((event.clientX - dragState.startX) / GRID_CELL_WIDTH);
+            const deltaCells = Math.round((pendingClientX - dragState.startX) / GRID_CELL_WIDTH);
             const deltaIncrement = deltaCells - dragState.appliedCells;
             if (!deltaIncrement) return;
             controller.adjustPaneSplit(deltaIncrement);
             dragState.appliedCells = deltaCells;
         };
+        const onPointerMove = (event) => {
+            if (!dragStateRef.current) return;
+            pendingClientX = event.clientX;
+            if (movePending) return;
+            movePending = requestAnimationFrame(applyMove);
+        };
 
         window.addEventListener("pointermove", onPointerMove);
         window.addEventListener("pointerup", stopDragging);
         window.addEventListener("pointercancel", stopDragging);
 
         return () => {
+            if (movePending) { cancelAnimationFrame(movePending); movePending = 0; }
             window.removeEventListener("pointermove", onPointerMove);
             window.removeEventListener("pointerup", stopDragging);
             window.removeEventListener("pointercancel", stopDragging);
@@ -4997,7 +5664,7 @@ function ModalLayer({ controller }) {
         React.createElement("div", { className: `ps-modal${modal.type === "themePicker" ? " is-theme-picker" : ""}`, onClick: (event) => event.stopPropagation() },
             React.createElement("div", { className: "ps-modal-header" },
                 React.createElement("div", { className: "ps-modal-title" }, presentation.title),
-                React.createElement("button", { type: "button", className: "ps-modal-close", onClick: close }, "Close"),
+                React.createElement("button", { type: "button", className: "ps-modal-close", onClick: close, "aria-label": "Close", title: "Close" }, "✕"),
             ),
             React.createElement("div", { className: "ps-modal-grid" },
                 React.createElement("div", { ref: listModalRef, className: "ps-modal-list" },
@@ -5029,7 +5696,7 @@ function ModalLayer({ controller }) {
             React.createElement("div", { className: "ps-modal is-narrow", onClick: (event) => event.stopPropagation() },
                 React.createElement("div", { className: "ps-modal-header" },
                     React.createElement("div", { className: "ps-modal-title" }, modalState.confirm.title),
-                    React.createElement("button", { type: "button", className: "ps-modal-close", onClick: close }, "Close"),
+                    React.createElement("button", { type: "button", className: "ps-modal-close", onClick: close, "aria-label": "Close", title: "Close" }, "✕"),
                 ),
                 React.createElement("div", { className: "ps-modal-body", style: { padding: "16px 20px" } },
                     React.createElement("p", { style: { color: "#94a3b8", margin: 0 } }, modalState.confirm.message),
@@ -5048,6 +5715,9 @@ function ModalLayer({ controller }) {
                                 React.createElement("option", { value: "deterministic" }, "Fast (no LLM — tail + pointers)"),
                             ),
                         ),
+                        (extras.distillMode || "llm") === "llm"
+                            ? React.createElement(DistillerModelPickers, { controller, extras })
+                            : null,
                         (extras.distillMode || "llm") === "llm"
                             ? React.createElement("textarea", {
                                 className: "ps-modal-input",
@@ -5100,7 +5770,7 @@ function ModalLayer({ controller }) {
             React.createElement("div", { className: "ps-modal", onClick: (event) => event.stopPropagation() },
                 React.createElement("div", { className: "ps-modal-header" },
                     React.createElement("div", { className: "ps-modal-title" }, presentation.title),
-                    React.createElement("button", { type: "button", className: "ps-modal-close", onClick: close }, "Close"),
+                    React.createElement("button", { type: "button", className: "ps-modal-close", onClick: close, "aria-label": "Close", title: "Close" }, "✕"),
                 ),
                 React.createElement("div", { className: "ps-modal-grid" },
                     React.createElement("div", { ref: listModalRef, className: "ps-modal-list" },
@@ -5132,7 +5802,7 @@ function ModalLayer({ controller }) {
             React.createElement("div", { className: "ps-modal is-narrow", onClick: (event) => event.stopPropagation() },
                 React.createElement("div", { className: "ps-modal-header" },
                     React.createElement("div", { className: "ps-modal-title" }, modalState.renameSession.title),
-                    React.createElement("button", { type: "button", className: "ps-modal-close", onClick: close }, "Close"),
+                    React.createElement("button", { type: "button", className: "ps-modal-close", onClick: close, "aria-label": "Close", title: "Close" }, "✕"),
                 ),
                 React.createElement("input", {
                     ref: renameInputRef,
@@ -5165,7 +5835,7 @@ function ModalLayer({ controller }) {
             React.createElement("div", { className: "ps-modal is-narrow", onClick: (event) => event.stopPropagation() },
                 React.createElement("div", { className: "ps-modal-header" },
                     React.createElement("div", { className: "ps-modal-title" }, modalState.sessionGroupName.title),
-                    React.createElement("button", { type: "button", className: "ps-modal-close", onClick: close }, "Close"),
+                    React.createElement("button", { type: "button", className: "ps-modal-close", onClick: close, "aria-label": "Close", title: "Close" }, "✕"),
                 ),
                 React.createElement("input", {
                     ref: groupNameInputRef,
@@ -5210,7 +5880,7 @@ function ModalLayer({ controller }) {
             React.createElement("div", { className: "ps-modal is-narrow", onClick: (event) => event.stopPropagation() },
                 React.createElement("div", { className: "ps-modal-header" },
                     React.createElement("div", { className: "ps-modal-title" }, modal.title || "Session Lifecycle"),
-                    React.createElement("button", { type: "button", className: "ps-modal-close", onClick: close }, "Close"),
+                    React.createElement("button", { type: "button", className: "ps-modal-close", onClick: close, "aria-label": "Close", title: "Close" }, "✕"),
                 ),
                 React.createElement("div", { className: "ps-modal-body", style: { padding: "12px 16px 4px" } },
                     React.createElement("p", { style: { color: "#94a3b8", margin: 0 } }, bodyText)),
@@ -5255,7 +5925,7 @@ function ModalLayer({ controller }) {
             React.createElement("div", { className: "ps-modal is-narrow", onClick: (event) => event.stopPropagation() },
                 React.createElement("div", { className: "ps-modal-header" },
                     React.createElement("div", { className: "ps-modal-title" }, modalState.artifactUpload.title),
-                    React.createElement("button", { type: "button", className: "ps-modal-close", onClick: close }, "Close"),
+                    React.createElement("button", { type: "button", className: "ps-modal-close", onClick: close, "aria-label": "Close", title: "Close" }, "✕"),
                 ),
                 React.createElement("input", {
                     className: "ps-modal-input",
@@ -5289,7 +5959,7 @@ function ModalLayer({ controller }) {
             React.createElement("div", { className: "ps-modal is-wide", onClick: (event) => event.stopPropagation() },
                 React.createElement("div", { className: "ps-modal-header" },
                     React.createElement("div", { className: "ps-modal-title" }, filterPresentation.title),
-                    React.createElement("button", { type: "button", className: "ps-modal-close", onClick: close }, "Close"),
+                    React.createElement("button", { type: "button", className: "ps-modal-close", onClick: close, "aria-label": "Close", title: "Close" }, "✕"),
                 ),
                 React.createElement("div", { className: "ps-filter-grid" },
                     (modal.items || []).map((item, itemIndex) => {
@@ -5327,6 +5997,75 @@ function ModalLayer({ controller }) {
     return null;
 }
 
+// Distiller model / effort / context-tier pickers for the regenerate confirm.
+// The distiller runs on deployment machinery config rather than the served
+// session's model, so these are explicit choices; empty means "deployment
+// default". Effort and tier lists follow the SELECTED model, so an
+// unsupported combination cannot be submitted.
+function DistillerModelPickers({ controller, extras }) {
+    const options = Array.isArray(extras.distillerModelOptions) ? extras.distillerModelOptions : [];
+    const selected = options.find((m) => m.qualifiedName === extras.distillerModel) || null;
+    const efforts = selected?.supportedReasoningEfforts || [];
+    const tiers = selected?.supportedContextTiers || [];
+    const labelStyle = { color: "#94a3b8", fontSize: "12px", display: "flex", alignItems: "center", gap: 8 };
+    const selectStyle = { flex: "1", padding: "4px 8px" };
+
+    const pick = (patch) => controller.updateConfirmExtras(patch);
+
+    return React.createElement(React.Fragment, null,
+        React.createElement("label", { style: labelStyle },
+            "Distiller model",
+            React.createElement("select", {
+                className: "ps-modal-input",
+                style: selectStyle,
+                value: extras.distillerModel || "",
+                // Switching model clears effort/tier: the previous values may
+                // not exist on the new model.
+                onChange: (event) => pick({
+                    distillerModel: event.currentTarget.value,
+                    distillerEffort: "",
+                    distillerContextTier: "",
+                }),
+            },
+                React.createElement("option", { value: "" }, "Deployment default"),
+                options.map((m) => React.createElement("option", {
+                    key: m.qualifiedName,
+                    value: m.qualifiedName,
+                }, m.qualifiedName)),
+            ),
+        ),
+        efforts.length > 0
+            ? React.createElement("label", { style: labelStyle },
+                "Reasoning",
+                React.createElement("select", {
+                    className: "ps-modal-input",
+                    style: selectStyle,
+                    value: extras.distillerEffort || "",
+                    onChange: (event) => pick({ distillerEffort: event.currentTarget.value }),
+                },
+                    React.createElement("option", { value: "" }, "Model default"),
+                    efforts.map((e) => React.createElement("option", { key: e, value: e }, e)),
+                ),
+            )
+            : null,
+        tiers.length > 0
+            ? React.createElement("label", { style: labelStyle },
+                "Context",
+                React.createElement("select", {
+                    className: "ps-modal-input",
+                    style: selectStyle,
+                    value: extras.distillerContextTier || "",
+                    onChange: (event) => pick({ distillerContextTier: event.currentTarget.value }),
+                },
+                    React.createElement("option", { value: "" }, "Model default"),
+                    tiers.map((t) => React.createElement("option", { key: t, value: t },
+                        t === "long_context" ? "long context (fits a larger transcript)" : t)),
+                ),
+            )
+            : null,
+    );
+}
+
 function useKeyboardShortcuts(controller, mobile) {
     React.useEffect(() => {
         const handler = (event) => {
@@ -5595,6 +6334,23 @@ function useKeyboardShortcuts(controller, mobile) {
                 controller.handleCommand(UI_COMMANDS.FOCUS_RIGHT).catch(() => {});
                 return;
             }
+            // The Files tab is a LIST, so arrows/j/k must move the selection
+            // there the same way they do in the session list — otherwise they
+            // fall through to the generic scroll below and the artifact list
+            // cannot be driven from the keyboard at all. Must precede the
+            // scroll fallback.
+            if (!mobile && focusRegion === "inspector" && currentInspectorTab === "files"
+                && (event.key === "ArrowUp" || event.key === "k")) {
+                event.preventDefault();
+                controller.handleCommand(UI_COMMANDS.MOVE_FILE_UP).catch(() => {});
+                return;
+            }
+            if (!mobile && focusRegion === "inspector" && currentInspectorTab === "files"
+                && (event.key === "ArrowDown" || event.key === "j")) {
+                event.preventDefault();
+                controller.handleCommand(UI_COMMANDS.MOVE_FILE_DOWN).catch(() => {});
+                return;
+            }
             if (!mobile && (event.key === "ArrowUp" || event.key === "k")) {
                 event.preventDefault();
                 controller.handleCommand(UI_COMMANDS.SCROLL_UP).catch(() => {});
@@ -5756,9 +6512,17 @@ function AdminConsolePanel({ controller }) {
 
 export function createWebPilotSwarmController({ transport, mode = "remote", branding = null } = {}) {
     clearBrowserPreferenceCache();
+    // Rich prose is the right default on a desktop transcript; on a phone the
+    // terminal view fits far more per screen and does not reflow wide content.
+    // This is only the DEFAULT — a stored profile preference still wins once
+    // settings load, so an explicit choice is never overridden.
+    const isNarrowViewport = typeof window !== "undefined"
+        && typeof window.matchMedia === "function"
+        && window.matchMedia("(max-width: 920px)").matches;
     const store = createStore(appReducer, createInitialState({
         mode,
         branding,
+        chatViewMode: isNarrowViewport ? "transcript" : "rich",
     }));
     return new PilotSwarmUiController({ store, transport });
 }
@@ -5835,10 +6599,15 @@ export function PilotSwarmWebApp({ controller }) {
         focusRegion: rootState.ui.focusRegion,
         inspectorTab: rootState.ui.inspectorTab,
         filesFullscreen: Boolean(rootState.files.fullscreen),
+        selectedArtifactId: rootState.files.selectedArtifactId || null,
         adminVisible: Boolean(rootState.admin?.visible),
     }), shallowEqualObject);
     const profileSettingsHydratedRef = React.useRef(false);
     const lastProfileSettingsJsonRef = React.useRef(null);
+    // Last-known value of the OTHER device class's chat-view slot. The save
+    // endpoint replaces the whole settings object, so this is what keeps a
+    // desktop save from erasing the phone's preference.
+    const otherChatViewModeRef = React.useRef(null);
     const profileSettingsSaveTimerRef = React.useRef(null);
     const profileSettingsPollTimerRef = React.useRef(null);
     const profileSettingsPollInFlightRef = React.useRef(false);
@@ -5892,13 +6661,21 @@ export function PilotSwarmWebApp({ controller }) {
                 // the principal is resolved by now (it was likely null at mount),
                 // so the "no persisted filter" fallback becomes the correct
                 // principal-scoped default (Me+System) instead of {all:true}.
-                defaultProfileSettingsRef.current = buildDefaultProfileSettingsFromState(controller.getState());
+                const remoteNormalized = normalizeProfileSettings(profile?.profileSettings);
+                if (isChatViewMode(remoteNormalized[otherChatViewModeKey()])) {
+                    otherChatViewModeRef.current = remoteNormalized[otherChatViewModeKey()];
+                }
+                defaultProfileSettingsRef.current = buildDefaultProfileSettingsFromState(
+                    controller.getState(), otherChatViewModeRef.current,
+                );
                 const settings = materializeProfileSettings(
                     profile?.profileSettings,
                     defaultProfileSettingsRef.current,
                 );
                 const settingsJson = JSON.stringify(settings);
-                const currentSettingsBeforeApply = profileSettingsFromViewState(controller.getState());
+                const currentSettingsBeforeApply = profileSettingsFromViewState(
+                    controller.getState(), otherChatViewModeRef.current,
+                );
                 const currentSettingsBeforeApplyJson = JSON.stringify(currentSettingsBeforeApply);
                 const hasUnpersistedLocalChange = profileSettingsHydratedRef.current
                     && lastProfileSettingsJsonRef.current != null
@@ -5911,7 +6688,9 @@ export function PilotSwarmWebApp({ controller }) {
                     appliedProfileSettingsJsonRef.current = settingsJson;
                 }
 
-                const currentSettings = profileSettingsFromViewState(controller.getState());
+                const currentSettings = profileSettingsFromViewState(
+                    controller.getState(), otherChatViewModeRef.current,
+                );
                 lastProfileSettingsJsonRef.current = JSON.stringify(currentSettings);
                 profileSettingsHydratedRef.current = true;
             } catch {
@@ -5943,7 +6722,7 @@ export function PilotSwarmWebApp({ controller }) {
 
     React.useEffect(() => {
         if (!profileSettingsHydratedRef.current) return undefined;
-        const settings = profileSettingsFromViewState(state);
+        const settings = profileSettingsFromViewState(state, otherChatViewModeRef.current);
         const settingsJson = JSON.stringify(settings);
         if (lastProfileSettingsJsonRef.current === settingsJson) return undefined;
         lastProfileSettingsJsonRef.current = settingsJson;
@@ -5966,7 +6745,19 @@ export function PilotSwarmWebApp({ controller }) {
         applyDocumentTheme(state.themeId);
     }, [state.themeId]);
 
+    // Follow focus only on an actual TRANSITION, never on the first run.
+    //
+    // The default focus is "sessions", but the mobile layout has no sessions
+    // region, so normalizeFocusRegion rewrites it to order[0] — the inspector.
+    // Syncing that initial value made a plain page load open the inspector on
+    // its default (sequence) tab instead of the chat. A real focus change, e.g.
+    // tapping the mobile nav, still switches panes.
+    const lastFocusRef = React.useRef(null);
     React.useEffect(() => {
+        const previous = lastFocusRef.current;
+        lastFocusRef.current = state.focusRegion;
+        if (previous === null) return;
+        if (previous === state.focusRegion) return;
         if (mobile && state.focusRegion !== "prompt") {
             setMobilePane(state.focusRegion === "activity"
                 ? "activity"
@@ -5988,6 +6779,12 @@ export function PilotSwarmWebApp({ controller }) {
         [gridViewport, state.activityPaneAdjust, state.paneAdjust, effectivePromptRows, state.sessionPaneAdjust],
     );
     const filesFullscreenActive = state.filesFullscreen && state.inspectorTab === "files";
+    // Preview detaches into the activity slot only while the Files tab is open
+    // AND something is selected — otherwise Activity keeps the slot. Fullscreen
+    // is excluded because it already shows the preview alone.
+    const artifactPreviewDetached = state.inspectorTab === "files"
+        && Boolean(state.selectedArtifactId)
+        && !filesFullscreenActive;
 
     React.useEffect(() => {
         if (!filesFullscreenActive || !chatFocusMode) return;
@@ -6077,7 +6874,12 @@ export function PilotSwarmWebApp({ controller }) {
         className: "ps-workspace-pane-slot",
         style: { gridRow: "3" },
     },
-        !layout.activityHidden ? React.createElement(ActivityPane, { controller }) : null)));
+        // The artifact preview takes over the activity slot while an artifact
+        // is selected, so it inherits the row resizer and can be sized freely.
+        // It yields back to Activity the moment the selection clears.
+        artifactPreviewDetached
+            ? React.createElement(FilesPane, { controller, focused: false, previewOnly: true })
+            : (!layout.activityHidden ? React.createElement(ActivityPane, { controller }) : null))));
     const chatFocusWorkspace = React.createElement(ChatFocusWorkspace, {
         controller,
         openPane: chatFocusPane,
@@ -6089,7 +6891,9 @@ export function PilotSwarmWebApp({ controller }) {
         React.createElement(InspectorPane, { controller, mobile: false }));
 
     let mobileContent = null;
-    if (filesFullscreenActive) mobileContent = React.createElement("div", { className: "ps-mobile-pane-fill" },
+    // Mobile gets the overlay below instead of an in-pane fullscreen view; the
+    // workspace keeps rendering underneath so backing out restores it intact.
+    if (filesFullscreenActive && !mobile) mobileContent = React.createElement("div", { className: "ps-mobile-pane-fill" },
         React.createElement(InspectorPane, { controller, mobile: true }));
     else if (mobilePane === "inspector") mobileContent = React.createElement("div", { className: "ps-mobile-pane-fill" },
         React.createElement(InspectorPane, { controller, mobile: true }));
@@ -6097,7 +6901,8 @@ export function PilotSwarmWebApp({ controller }) {
         React.createElement(ActivityPane, { controller }));
     else mobileContent = React.createElement(MobileWorkspace, { controller });
 
-    return React.createElement("div", { ref: viewportRef, className: "ps-web-shell" },
+    return React.createElement(ControllerContext.Provider, { value: controller },
+        React.createElement("div", { ref: viewportRef, className: "ps-web-shell" },
         // Hide the top toolbar on mobile inspector/activity panes (and in
         // chat-focus mode). Those panes are pure read-only surfaces;
         // session/model/theme actions stay reachable from the Main pane,
@@ -6122,5 +6927,8 @@ export function PilotSwarmWebApp({ controller }) {
                         ? chatFocusWorkspace
                         : (mobile ? mobileContent : desktopWorkspace)))),
         mobile && !chatFocusMode ? React.createElement(MobileNav, { activePane: mobilePane, setActivePane: setMobilePane, controller }) : null,
-        React.createElement(ModalLayer, { controller }));
+        mobile && filesFullscreenActive
+            ? React.createElement(MobileArtifactOverlay, { controller })
+            : null,
+        React.createElement(ModalLayer, { controller })));
 }