pilotswarm 0.5.22 → 0.5.24

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

@@ -14,6 +14,7 @@ import {
     createStore,
     getPromptInputRows,
     getTheme,
+    isThemeLight,
     parseTerminalMarkupRuns,
     PilotSwarmUiController,
     tokenizeInlineMarkdown,
@@ -22,6 +23,7 @@ import {
     selectArtifactPickerModal,
     selectArtifactUploadModal,
     selectLiveActivityLines,
+    selectChatBlocks,
     selectChatLines,
     selectChatPaneChrome,
     selectOutboxOverlayLines,
@@ -208,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") {
+    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 = [];
@@ -241,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,
@@ -254,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
@@ -272,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 }
+            : {}),
     });
 }
 
@@ -305,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()] }
             : {}),
     });
 }
@@ -387,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) {
@@ -547,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) {
@@ -796,6 +846,20 @@ function Runs({ runs, theme }) {
             };
             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", {
@@ -863,7 +927,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) {
@@ -873,12 +942,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;
@@ -890,6 +966,432 @@ function usePanePixelScroll(ref, scrollOffset, paneKey, controller) {
     }, [controller, paneKey, ref]);
 }
 
+// ── Code syntax highlighting ──────────────────────────────────────────────
+// A dependency-free tokenizer. Vendoring a real highlighter (highlight.js,
+// prism) is not worth the offline-vendor cost for what fenced blocks in a
+// chat transcript need: comments, strings, numbers, keywords, and call
+// targets. Token colors resolve through the active THEME (same path as
+// markdown links), so every theme — light or dark — stays coherent.
+
+const CODE_LANGUAGE_ALIASES = {
+    js: "js", jsx: "js", mjs: "js", cjs: "js", javascript: "js",
+    ts: "js", tsx: "js", typescript: "js",
+    json: "json", jsonc: "json",
+    py: "python", python: "python",
+    sh: "shell", bash: "shell", zsh: "shell", shell: "shell", console: "shell",
+    sql: "sql", postgres: "sql", postgresql: "sql", psql: "sql",
+    rs: "rust", rust: "rust",
+    go: "go", golang: "go",
+    yaml: "yaml", yml: "yaml",
+    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";
+}
+
+const CODE_KEYWORDS = {
+    js: new Set(["async", "await", "break", "case", "catch", "class", "const", "continue", "default", "delete", "do", "else", "export", "extends", "finally", "for", "from", "function", "if", "import", "in", "instanceof", "let", "new", "of", "return", "static", "super", "switch", "this", "throw", "try", "typeof", "var", "void", "while", "yield", "true", "false", "null", "undefined", "interface", "type", "enum", "implements", "readonly", "public", "private", "protected"]),
+    python: new Set(["and", "as", "assert", "async", "await", "break", "class", "continue", "def", "del", "elif", "else", "except", "finally", "for", "from", "global", "if", "import", "in", "is", "lambda", "None", "nonlocal", "not", "or", "pass", "raise", "return", "True", "False", "try", "while", "with", "yield", "self"]),
+    shell: new Set(["if", "then", "else", "elif", "fi", "for", "while", "do", "done", "case", "esac", "in", "function", "return", "export", "local", "set", "echo", "cd", "sudo", "source"]),
+    sql: new Set(["select", "from", "where", "insert", "into", "values", "update", "set", "delete", "create", "table", "alter", "drop", "index", "join", "left", "right", "inner", "outer", "on", "group", "order", "by", "having", "limit", "offset", "and", "or", "not", "null", "as", "distinct", "union", "all", "case", "when", "then", "else", "end", "with", "returning", "primary", "key", "foreign", "references", "default", "constraint", "begin", "commit", "rollback"]),
+    rust: new Set(["as", "async", "await", "break", "const", "continue", "crate", "dyn", "else", "enum", "extern", "false", "fn", "for", "if", "impl", "in", "let", "loop", "match", "mod", "move", "mut", "pub", "ref", "return", "self", "Self", "static", "struct", "super", "trait", "true", "type", "unsafe", "use", "where", "while"]),
+    go: new Set(["break", "case", "chan", "const", "continue", "default", "defer", "else", "fallthrough", "for", "func", "go", "goto", "if", "import", "interface", "map", "package", "range", "return", "select", "struct", "switch", "type", "var", "nil", "true", "false"]),
+    json: new Set(["true", "false", "null"]),
+    yaml: new Set(["true", "false", "null", "yes", "no"]),
+    css: new Set(["important", "media", "keyframes", "import", "supports"]),
+};
+
+// Scanner rules per family. Order matters: comments and strings first so a
+// `#` or quote inside them never re-enters another rule. Sticky (`y`) so a
+// rule only ever matches at the current cursor.
+function codeScannerRules(lang) {
+    const hashComment = { type: "comment", re: /#[^\n]*/y };
+    const slashComment = { type: "comment", re: /\/\/[^\n]*|\/\*[\s\S]*?\*\//y };
+    const dashComment = { type: "comment", re: /--[^\n]*|\/\*[\s\S]*?\*\//y };
+    const number = { type: "number", re: /\b\d[\d_]*(?:\.\d+)?(?:[eE][+-]?\d+)?\b|\b0[xX][0-9a-fA-F]+\b/y };
+    const identifier = { type: "identifier", re: /[A-Za-z_$][\w$]*/y };
+    const dq = { type: "string", re: /"(?:\\.|[^"\\])*"?/y };
+    const sq = { type: "string", re: /'(?:\\.|[^'\\])*'?/y };
+    const backtick = { type: "string", re: /`(?:\\.|[^`\\])*`?/y };
+    const pyTriple = { type: "string", re: /"""[\s\S]*?"""|'''[\s\S]*?'''/y };
+
+    switch (lang) {
+        case "python":
+            return [hashComment, pyTriple, dq, sq, number, identifier];
+        case "shell":
+            return [hashComment, dq, sq, number, identifier];
+        case "sql":
+            return [dashComment, sq, dq, number, identifier];
+        case "yaml":
+            return [hashComment, dq, sq, number, identifier];
+        case "json":
+            return [dq, number, identifier];
+        case "css":
+            return [{ type: "comment", re: /\/\*[\s\S]*?\*\//y }, dq, sq, number, identifier];
+        default:
+            return [slashComment, dq, sq, backtick, number, identifier];
+    }
+}
+
+const CODE_TOKEN_COLORS = {
+    comment: "gray",
+    string: "green",
+    number: "yellow",
+    keyword: "magenta",
+    fn: "cyan",
+};
+
+// Blocks past this size skip highlighting — a chat transcript should never
+// pay tokenizer cost for a dumped file.
+const CODE_HIGHLIGHT_MAX_CHARS = 20000;
+
+// Tokenizing runs inside the render path, so an unmemoized transcript
+// re-highlights EVERY code block on every render (a keystroke in the
+// composer re-renders the pane). Results are content-addressed and cached;
+// the cap keeps a long-lived session from growing this without bound.
+const CODE_TOKEN_CACHE = new Map();
+const CODE_TOKEN_CACHE_MAX = 120;
+
+function tokenizeCodeCached(source, language) {
+    const key = `${language || ""}\u0000${source}`;
+    const hit = CODE_TOKEN_CACHE.get(key);
+    if (hit) {
+        // Refresh LRU position.
+        CODE_TOKEN_CACHE.delete(key);
+        CODE_TOKEN_CACHE.set(key, hit);
+        return hit;
+    }
+    const tokens = tokenizeCode(source, language);
+    CODE_TOKEN_CACHE.set(key, tokens);
+    if (CODE_TOKEN_CACHE.size > CODE_TOKEN_CACHE_MAX) {
+        CODE_TOKEN_CACHE.delete(CODE_TOKEN_CACHE.keys().next().value);
+    }
+    return tokens;
+}
+
+function tokenizeCode(source, language) {
+    const lang = CODE_LANGUAGE_ALIASES[String(language || "").trim().toLowerCase()] || "default";
+    const keywords = CODE_KEYWORDS[lang] || CODE_KEYWORDS.js;
+    const rules = codeScannerRules(lang);
+    const tokens = [];
+    let cursor = 0;
+    let plainStart = 0;
+
+    const flushPlain = (end) => {
+        if (end > plainStart) tokens.push({ type: "plain", text: source.slice(plainStart, end) });
+    };
+
+    while (cursor < source.length) {
+        let hit = null;
+        for (const rule of rules) {
+            rule.re.lastIndex = cursor;
+            const match = rule.re.exec(source);
+            if (match && match.index === cursor && match[0].length > 0) {
+                hit = { type: rule.type, text: match[0] };
+                break;
+            }
+        }
+        if (!hit) {
+            cursor += 1;
+            continue;
+        }
+        let type = hit.type;
+        if (type === "identifier") {
+            if (keywords.has(hit.text)) {
+                type = "keyword";
+            } else {
+                // A call target reads as a function; anything else is plain.
+                const after = source.slice(cursor + hit.text.length);
+                type = /^\s*\(/.test(after) ? "fn" : "plain";
+            }
+        }
+        if (type === "plain") {
+            cursor += hit.text.length;
+            continue;
+        }
+        flushPlain(cursor);
+        tokens.push({ type, text: hit.text });
+        cursor += hit.text.length;
+        plainStart = cursor;
+    }
+    flushPlain(source.length);
+    return tokens;
+}
+
+function renderHighlightedCode(content, language, theme) {
+    const source = String(content || "");
+    if (!source || source.length > CODE_HIGHLIGHT_MAX_CHARS) return source;
+    let tokens;
+    try {
+        tokens = tokenizeCodeCached(source, language);
+    } catch {
+        return source;
+    }
+    return tokens.map((token, index) => {
+        const color = CODE_TOKEN_COLORS[token.type];
+        if (!color) return React.createElement(React.Fragment, { key: `t:${index}` }, token.text);
+        return React.createElement("span", {
+            key: `t:${index}`,
+            className: `ps-code-token is-${token.type}`,
+            style: { color: resolveColor(theme, color) || undefined },
+        }, token.text);
+    });
+}
+
+// ── Mermaid diagrams ──────────────────────────────────────────────────────
+// mermaid is ~2MB, so it is imported DYNAMICALLY: vite splits it into its own
+// chunk that is fetched only when a transcript actually contains a ```mermaid
+// fence. A failed parse (very common while a diagram is still streaming in)
+// falls back to the highlighted source rather than an error box.
+
+let mermaidModulePromise = null;
+
+function loadMermaid() {
+    if (!mermaidModulePromise) {
+        mermaidModulePromise = import("mermaid")
+            .then((module) => module.default || module)
+            .catch((error) => {
+                mermaidModulePromise = null;
+                throw error;
+            });
+    }
+    return mermaidModulePromise;
+}
+
+// initialize() must run per render, not once at import: the module promise is
+// cached, so configuring the palette only on first load left every diagram
+// frozen on whichever theme happened to be active when mermaid loaded (a
+// dark->light switch kept rendering dark diagrams until a reload).
+function configureMermaid(mermaid, light) {
+    mermaid.initialize({
+        startOnLoad: false,
+        securityLevel: "strict",
+        theme: light ? "default" : "dark",
+        fontFamily: "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif",
+    });
+    return mermaid;
+}
+
+let mermaidRenderSeq = 0;
+
+// mermaid.render() is NOT re-entrant: it stages each diagram through shared
+// internal state, so two blocks in one message racing each other leaves one
+// of them unrendered (whichever lost the race falls back to source). Renders
+// are therefore serialized through a promise chain.
+let mermaidRenderQueue = Promise.resolve();
+
+function queueMermaidRender(task) {
+    const run = mermaidRenderQueue.then(task, task);
+    mermaidRenderQueue = run.then(() => undefined, () => undefined);
+    return run;
+}
+
+function MermaidDiagram({ code, theme, fallback }) {
+    const [svg, setSvg] = React.useState(null);
+    const [failed, setFailed] = React.useState(false);
+    const [errorText, setErrorText] = React.useState("");
+    const light = React.useMemo(() => isThemeLight(theme), [theme]);
+
+    React.useEffect(() => {
+        let active = true;
+        const source = String(code || "").trim();
+        if (!source) return undefined;
+        setFailed(false);
+        loadMermaid()
+            .then((mermaid) => queueMermaidRender(async () => {
+                if (!active) return;
+                configureMermaid(mermaid, light);
+                mermaidRenderSeq += 1;
+                const id = `ps-mermaid-${mermaidRenderSeq}`;
+                // parse() first so a half-streamed diagram fails cheaply and
+                // without mermaid injecting an error graphic into the DOM.
+                await mermaid.parse(source);
+                const { svg: rendered } = await mermaid.render(id, source);
+                if (active) setSvg(rendered);
+            }))
+            .catch((error) => {
+                if (active) { setSvg(null); setFailed(true); setErrorText(String(error?.message || error)); }
+            });
+        return () => { active = false; };
+    }, [code, light]);
+
+    if (svg && !failed) {
+        return React.createElement("div", {
+            className: "ps-mermaid",
+            // mermaid output is generated from the diagram source with
+            // securityLevel "strict" (HTML labels off, scripts stripped).
+            dangerouslySetInnerHTML: { __html: svg },
+        });
+    }
+    // A diagram mermaid cannot parse falls back to its source WITH the
+    // reason: silently showing code left "why didn't this render?" a mystery.
+    if (failed && errorText) {
+        return React.createElement("div", { className: "ps-mermaid-failed" },
+            React.createElement("div", { className: "ps-mermaid-error" },
+                `Diagram could not be rendered — ${String(errorText).split("\n")[0]}`),
+            fallback);
+    }
+    return fallback;
+}
+
 function renderInlineMarkdown(source, theme, keyPrefix = "md") {
     return tokenizeInlineMarkdown(source).map((token, index) => {
         const key = `${keyPrefix}:${index}`;
@@ -903,6 +1405,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",
@@ -1186,10 +1707,25 @@ function MarkdownPreviewContent({ content, theme }) {
                 }, renderInlineMarkdown(block.text, theme, `heading:${index}`));
             }
             if (block.type === "code") {
-                return 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, block.content)));
+                        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}`,
+                        code: block.content,
+                        theme,
+                        fallback: codeSection,
+                    });
+                }
+                return codeSection;
             }
             if (block.type === "blockquote") {
                 return React.createElement("blockquote", { key: `block:${index}`, className: "ps-md-quote" },
@@ -1268,7 +1804,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);
 
@@ -1277,6 +1848,7 @@ function MarkdownPreviewPanel({ controller, title, color, focused, scrollOffset
             ref,
             className: "ps-scroll-panel ps-markdown-scroll",
             onScroll,
+            onMouseDown: claimMarkdownFocus,
         }, React.createElement(MarkdownPreviewContent, { content, theme })));
 }
 
@@ -1307,9 +1879,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);
@@ -1661,6 +2238,78 @@ function StructuredChatBlocks({ lines, theme, controller = null }) {
     return React.createElement(StructuredBlockList, { blocks, theme, controller });
 }
 
+// Rich (desktop-style) chat transcript. Consumes selectChatBlocks: plain
+// user/assistant prose renders as proportional-type markdown messages;
+// every other block (splash, thinking cards, system cards, epoch dividers)
+// reuses the structured line renderer so the terminal-era special cases
+// keep exactly one implementation.
+function RichChatBlocks({ blocks, theme, controller = null }) {
+    return React.createElement("div", { className: "ps-rich-chat" },
+        (blocks || []).map((block, index) => {
+            if (block.kind === "message") {
+                const header = block.header || {};
+                const roleClass = block.role === "user" ? " is-user" : " is-assistant";
+                const pendingClass = block.pendingPhase ? ` is-${block.pendingPhase}` : "";
+                const text = String(block.text || "");
+                // A speaker label only earns its place when it disambiguates:
+                // another human in a shared session. The viewer's own turns
+                // and the agent's are obvious from side and styling.
+                const showLabel = block.role === "user" && header.fromOtherPerson;
+                // Consecutive turns from the same speaker read as one
+                // continuous passage — no repeated header, tighter spacing.
+                const previous = blocks[index - 1];
+                const continued = previous
+                    && previous.kind === "message"
+                    && previous.role === block.role
+                    && !(previous.header && previous.header.fromOtherPerson)
+                    && !showLabel;
+                return React.createElement("article", {
+                    key: block.id != null ? `msg:${block.id}` : `msg:${index}`,
+                    className: `ps-rich-msg${roleClass}${pendingClass}${continued ? " is-continued" : ""}`,
+                },
+                    React.createElement("header", { className: "ps-rich-msg-head" },
+                        showLabel
+                            ? React.createElement("span", {
+                                className: "ps-rich-msg-label",
+                                style: { color: resolveColor(theme, header.roleColor) || undefined },
+                            }, header.roleLabel)
+                            : null,
+                        // Delivery glyph + timestamp are on-demand detail:
+                        // revealed on hover so a quiet transcript stays quiet.
+                        React.createElement("span", { className: "ps-rich-msg-meta" },
+                            header.glyph
+                                ? React.createElement("span", {
+                                    className: "ps-rich-msg-glyph",
+                                    title: block.pendingPhase || undefined,
+                                    style: { color: resolveColor(theme, header.glyphColor) || undefined },
+                                }, header.glyph)
+                                : null,
+                            header.time
+                                ? React.createElement("span", { className: "ps-rich-msg-time" }, header.time)
+                                : null)),
+                    text.trim()
+                        ? React.createElement("div", { className: "ps-rich-msg-body" },
+                            React.createElement(MarkdownPreviewContent, { content: text, theme }))
+                        : null,
+                    block.attachments
+                        ? React.createElement(ArtifactImageStrip, {
+                            controller,
+                            sessionId: block.attachments.sessionId,
+                            attachments: block.attachments.attachments,
+                        })
+                        : null);
+            }
+            return React.createElement("div", {
+                key: `lines:${index}`,
+                className: `ps-rich-lineblock is-${block.variant || "event"}`,
+            }, React.createElement(StructuredChatBlocks, {
+                lines: normalizeLines(block.lines || []),
+                theme,
+                controller,
+            }));
+        }));
+}
+
 // Authenticated artifact thumbnails: bytes are fetched through the transport
 // (Bearer token) and served to <img> as object URLs. Module-level cache so
 // scrolling the transcript doesn't refetch; oldest entries are revoked at cap.
@@ -1767,10 +2416,25 @@ function StructuredBlockList({ blocks, theme, controller = null }) {
             }
 
             if (block.type === "code") {
-                return 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, block.content || "")));
+                        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}`,
+                        code: block.content || "",
+                        theme,
+                        fallback: chatCodeSection,
+                    });
+                }
+                return chatCodeSection;
             }
 
             if (block.type === "card") {
@@ -1856,13 +2520,34 @@ function StructuredBlockList({ blocks, theme, controller = null }) {
         }));
 }
 
+// Pane titles carry terminal-style bracketed runs (" [+3]", " [5f086c7c]").
+// The rich view keeps the information but drops the brackets — a web title
+// bar shows a count and an id, it does not draw them in ASCII delimiters.
+function unbracketTitleRuns(runs) {
+    if (!Array.isArray(runs)) return runs;
+    return runs.map((run) => {
+        const text = String(run?.text ?? "");
+        const match = /^(\s*)\[(.+)\](\s*)$/.exec(text);
+        if (!match) return run;
+        return { ...run, text: `${match[1]}${match[2]}${match[3]}` };
+    });
+}
+
 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 })
@@ -1878,7 +2563,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));
 }
 
@@ -1981,7 +2666,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);
@@ -1992,6 +2703,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;
@@ -2039,7 +2763,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
@@ -2056,6 +2780,68 @@ function ScrollLinesPanel({ title, titleRight = null, color, focused, actions, l
         bottomContent);
 }
 
+// Rich (desktop-style) session row: a status dot instead of a glyph, the
+// title in proportional type, and the id/age/model metadata demoted to a
+// muted second line under the selected row. Depth becomes real indentation
+// with a guide rail rather than an ASCII "└" prefix.
+const SESSION_KIND_GLYPHS = { group: "🗂", system: "⚙", service: "⚗" };
+
+function RichSessionRow({ row, theme }) {
+    const chrome = row.chrome;
+    if (!chrome) return React.createElement(SessionRowContent, { row, theme, structured: true });
+
+    const kindGlyph = SESSION_KIND_GLYPHS[chrome.kind] || null;
+    const accent = resolveColor(theme, chrome.accentColor) || undefined;
+    const detailRuns = Array.isArray(row.detailRuns) ? row.detailRuns : [];
+
+    return React.createElement("div", { className: "ps-rich-session-row" },
+        React.createElement("div", { className: "ps-rich-session-main" },
+            chrome.selectMode
+                ? React.createElement("span", {
+                    className: `ps-rich-session-check${chrome.checked ? " is-checked" : ""}`,
+                }, chrome.checked ? "✓" : "")
+                : null,
+            kindGlyph
+                ? React.createElement("span", { className: "ps-rich-session-kind" }, kindGlyph)
+                : React.createElement("span", {
+                    className: "ps-rich-session-dot",
+                    style: { background: resolveColor(theme, chrome.statusColor) || undefined },
+                    title: row.status || undefined,
+                }),
+            chrome.owner
+                ? React.createElement("span", {
+                    className: `ps-rich-session-owner${chrome.owner.isMine ? " is-mine" : ""}`,
+                    title: chrome.owner.initials,
+                }, chrome.owner.initials)
+                : null,
+            React.createElement("span", {
+                className: `ps-rich-session-title${chrome.untitled ? " is-untitled" : ""}`,
+                style: chrome.kind === "session" ? undefined : { color: accent },
+                title: chrome.title,
+            }, chrome.title),
+            chrome.pinned ? React.createElement("span", { className: "ps-rich-session-pin", title: "Pinned" }, "📌") : null,
+            chrome.cron ? React.createElement("span", { className: "ps-rich-session-cron", title: "Scheduled" }, "⏱") : null,
+            chrome.childBadge
+                ? React.createElement("span", {
+                    className: "ps-rich-session-count",
+                    style: { color: resolveColor(theme, chrome.childBadge.color) || undefined },
+                }, chrome.childBadge.text)
+                : null,
+            chrome.ctx
+                ? React.createElement("span", {
+                    className: "ps-rich-session-ctx",
+                    style: { color: resolveColor(theme, chrome.ctx.color) || undefined },
+                }, chrome.ctx.text)
+                : null),
+        // The detail line is ALWAYS rendered, selected or not. Swapping row
+        // content on selection made the whole list jump; now the only things
+        // that reflow are expand/collapse and the highlight moving.
+        detailRuns.length > 0
+            ? React.createElement("div", { className: "ps-rich-session-detail" },
+                React.createElement(Runs, { runs: detailRuns, theme }))
+            : null);
+}
+
 function SessionRowContent({ row, theme, structured = false }) {
     const hasStructuredRuns = structured && Array.isArray(row.titleRuns);
     if (!hasStructuredRuns) {
@@ -2088,6 +2874,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);
@@ -2105,8 +2921,13 @@ function SessionPane({ controller, actions = null, panelClassName = "", structur
         connectionMode: state.connection?.mode || "local",
         modalOpen: Boolean(state.ui.modal),
         focused: state.ui.focusRegion === "sessions",
+        // The rich chat view also restyles the session list, so the portal
+        // reads as one product rather than half terminal / half desktop.
+        // TODO: promote this to its own `ui.richUi` setting if the two are
+        // 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,
@@ -2122,6 +2943,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;
@@ -2207,7 +3030,7 @@ function SessionPane({ controller, actions = null, panelClassName = "", structur
         })
         : (activeSession && !activeSession.isSystem && !activeSession.isGroup && !activeSession.parentSessionId ? [activeSession.sessionId] : []);
     const canMoveToGroup = groupableIds.length > 0;
-    const combinedPanelClassName = `ps-session-pane${panelClassName ? ` ${panelClassName}` : ""}`;
+    const combinedPanelClassName = `ps-session-pane${viewState.rich ? " is-rich" : ""}${panelClassName ? ` ${panelClassName}` : ""}`;
     const setSessionButtonRef = React.useCallback((sessionId, node) => {
         if (!sessionId) return;
         if (node) {
@@ -2376,10 +3199,16 @@ function SessionPane({ controller, actions = null, panelClassName = "", structur
                 },
             },
             React.createElement("div", {
-                className: "ps-line ps-session-row-content",
-                style: { paddingInlineStart: `${Math.max(0, row.depth) * 4}px` },
+                className: viewState.rich ? "ps-session-row-content is-rich" : "ps-line ps-session-row-content",
+                style: {
+                    paddingInlineStart: viewState.rich
+                        ? `${Math.max(0, row.depth) * 14}px`
+                        : `${Math.max(0, row.depth) * 4}px`,
+                },
             },
-                React.createElement(SessionRowContent, { row, theme, structured: structuredRows })),
+                viewState.rich
+                    ? React.createElement(RichSessionRow, { row, theme })
+                    : React.createElement(SessionRowContent, { row, theme, structured: structuredRows })),
             )),
     )),
     (manageOpen && activeSession && !activeSession.isGroup)
@@ -2422,7 +3251,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" },
@@ -2659,7 +3488,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" },
@@ -2831,10 +3660,24 @@ function ChatPane({ controller, mobile = false, fullWidth = false, showComposer
         () => appendAnimatedDotsToRuns(chrome.titleRight, chrome.animateTitleRight ? animatedDots : ""),
         [animatedDots, chrome.animateTitleRight, chrome.titleRight],
     );
-    const lines = React.useMemo(
-        () => selectChatLines(selectorState, viewState.contentWidth, { tableMode: "sentinel" }),
-        [selectorState, viewState.contentWidth],
+    const richMode = viewState.chatViewMode === "rich" && !viewState.activeSessionIsGroup;
+    const richBlocks = React.useMemo(
+        () => (richMode ? selectChatBlocks(selectorState, viewState.contentWidth, { tableMode: "sentinel" }) : null),
+        [richMode, selectorState, viewState.contentWidth],
     );
+    const lines = React.useMemo(() => {
+        if (richBlocks) {
+            // Rich mode paints from `richBlocks` via renderBody; these
+            // pseudo-lines exist only as the scroll-sync change signal
+            // (autoscroll-to-bottom fires when a block grows or arrives).
+            return richBlocks.map((block, index) => ({
+                text: block.kind === "message"
+                    ? `m:${block.id ?? index}:${(block.text || "").length}:${block.pendingPhase || ""}`
+                    : `l:${index}:${(block.lines || []).length}`,
+            }));
+        }
+        return selectChatLines(selectorState, viewState.contentWidth, { tableMode: "sentinel" });
+    }, [richBlocks, selectorState, viewState.contentWidth]);
     const spinnerFrame = useSpinnerFrame(viewState.activeSessionStatus === "running");
     const liveActivityLines = React.useMemo(
         () => selectLiveActivityLines(selectorState, { spinnerFrame, maxWidth: viewState.contentWidth }),
@@ -2903,7 +3746,10 @@ function ChatPane({ controller, mobile = false, fullWidth = false, showComposer
 
     return React.createElement(ScrollLinesPanel, {
         controller,
-        title: mobile ? compactTitleRuns(chrome.title, 28) : chrome.title,
+        title: (() => {
+            const baseTitle = mobile ? compactTitleRuns(chrome.title, 28) : chrome.title;
+            return richMode ? unbracketTitleRuns(baseTitle) : baseTitle;
+        })(),
         titleRight: mobile && titleRight ? compactTitleRuns(titleRight, 18) : titleRight,
         // Chat/Summary toggling lives on the top toolbar so the pane chrome
         // stays clean. The toolbar button is disabled for group sessions.
@@ -2915,13 +3761,93 @@ function ChatPane({ controller, mobile = false, fullWidth = false, showComposer
         scrollOffset: viewState.scroll,
         scrollMode: "bottom",
         paneKey: "chat",
-        className: "is-wrapped",
-        panelClassName: "ps-chat-panel",
+        className: richMode ? "is-wrapped is-rich" : "is-wrapped",
+        panelClassName: richMode ? "ps-chat-panel is-rich" : "ps-chat-panel",
         bottomContent: composer,
         structuredBlocks: true,
+        renderBody: richBlocks
+            ? (_bodyLines, bodyTheme) => React.createElement(RichChatBlocks, {
+                blocks: richBlocks,
+                theme: bodyTheme,
+                controller,
+            })
+            : null,
     });
 }
 
+/**
+ * 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).
@@ -2953,7 +3879,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);
@@ -2970,6 +3900,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),
@@ -3031,7 +3963,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",
@@ -3073,12 +4033,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}`,
@@ -3088,34 +4062,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,
@@ -3129,17 +4183,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
@@ -3155,10 +4212,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),
         ));
 }
 
@@ -3325,7 +4388,7 @@ function InspectorPane({ controller, mobile = false, panelClassName = "", extraA
         stickyBottom: inspector.activeTab === "logs",
         paneKey: "inspector",
         className: inspector.activeTab === "history" || inspector.activeTab === "logs" ? "is-wrapped" : "is-preserve",
-        panelClassName: `${inspector.activeTab === "sequence" ? "has-preserved-sticky" : ""}${panelClassName ? ` ${panelClassName}` : ""}`.trim(),
+        panelClassName: `ps-inspector-pane${inspector.activeTab === "sequence" ? " has-preserved-sticky" : ""}${panelClassName ? ` ${panelClassName}` : ""}`.trim(),
     });
 }
 
@@ -3374,7 +4437,9 @@ function ActivityPane({ controller, panelClassName = "", extraActions = null })
         stickyBottom: true,
         paneKey: "activity",
         className: "is-wrapped",
-        panelClassName,
+        // Stable identity class so styling can target the activity surface
+        // without depending on which slot rendered it.
+        panelClassName: `ps-activity-pane${panelClassName ? ` ${panelClassName}` : ""}`,
     });
 }
 
@@ -3395,9 +4460,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, {
@@ -3406,9 +4473,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, {
@@ -3416,9 +4485,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",
+            }, "✕"),
         });
     }
 
@@ -3646,7 +4717,19 @@ function PromptComposer({ controller, mobile, active = true, onAfterSend = null
                         }, "✕"));
                 }))
             : null,
-        React.createElement("label", { className: "ps-prompt-label" }, promptState.answerMode ? "answer" : selectedCancelling ? "cancelling" : selectedQueued ? "queued" : promptState.editingPending ? "pending" : "you"),
+        // The label carries real mode signal (answer / queued / pending /
+        // cancelling); only the idle "you" is a terminal-prompt affordance,
+        // so it is tagged for the rich view to hide.
+        (() => {
+            const promptLabelText = promptState.answerMode ? "answer"
+                : selectedCancelling ? "cancelling"
+                : selectedQueued ? "queued"
+                : promptState.editingPending ? "pending"
+                : "you";
+            return React.createElement("label", {
+                className: `ps-prompt-label${promptLabelText === "you" ? " is-default" : ""}`,
+            }, promptLabelText);
+        })(),
         React.createElement("textarea", {
             ref: inputRef,
             className: "ps-prompt-input",
@@ -3933,6 +5016,12 @@ function IconButton({ icon, label, onClick, disabled = false, active = false, cl
 }
 
 function Toolbar({ controller, mobile, chatFocusMode = false, onToggleChatFocus = null, chatFocusDisabled = false }) {
+    const richUi = useControllerSelector(controller, (state) => state.ui.chatViewMode === "rich");
+    const [headerSlot, setHeaderSlot] = React.useState(null);
+    React.useEffect(() => {
+        if (typeof document === "undefined") return;
+        setHeaderSlot(richUi && !mobile ? document.getElementById("ps-header-toolbar-slot") : null);
+    }, [richUi, mobile]);
     const adminVisible = useControllerSelector(controller, (state) => Boolean(state.admin?.visible));
     const chatView = useControllerSelector(controller, (state) => ({
         mode: state.ui.chatViewMode || "transcript",
@@ -3966,6 +5055,16 @@ function Toolbar({ controller, mobile, chatFocusMode = false, onToggleChatFocus
             label: "Theme",
             onClick: () => controller.handleCommand(UI_COMMANDS.OPEN_THEME_PICKER).catch(() => {}),
         },
+        {
+            key: "rich",
+            icon: "Aa",
+            label: chatView.activeSessionIsGroup
+                ? "Groups show group details"
+                : (chatView.mode === "rich" ? "Show terminal transcript" : "Rich chat view (experimental)"),
+            onClick: () => controller.setChatViewMode(chatView.mode === "rich" ? "transcript" : "rich"),
+            disabled: chatView.activeSessionIsGroup,
+            active: chatView.mode === "rich",
+        },
         {
             key: "summary",
             icon: chatView.mode === "summary" ? "💬" : "≣",
@@ -4012,9 +5111,17 @@ function Toolbar({ controller, mobile, chatFocusMode = false, onToggleChatFocus
         );
     }
 
-    return React.createElement("div", { className: "ps-toolbar" },
+    const toolbar = React.createElement("div", { className: "ps-toolbar" },
         React.createElement("div", { className: "ps-toolbar-actions" }, buttonDefs.map(renderButton)),
     );
+
+    // Rich desktop UI: the toolbar lives IN the portal header (one top bar)
+    // rather than as its own strip, handing that row back to the panes. The
+    // slot is rendered by PortalHeader in App.jsx, outside this tree, so the
+    // handoff is a portal. Falls back to inline rendering when the slot is
+    // absent (mobile layouts, embeddings that use their own header).
+    if (headerSlot) return createPortal(toolbar, headerSlot);
+    return toolbar;
 }
 
 function ColumnResizeHandle({ controller, paneAdjust = 0 }) {
@@ -4488,7 +5595,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" },
@@ -4520,7 +5627,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),
@@ -4539,6 +5646,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",
@@ -4591,7 +5701,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" },
@@ -4623,7 +5733,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,
@@ -4656,7 +5766,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,
@@ -4701,7 +5811,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)),
@@ -4746,7 +5856,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",
@@ -4780,7 +5890,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) => {
@@ -4818,6 +5928,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) => {
@@ -5086,6 +6265,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(() => {});
@@ -5247,14 +6443,32 @@ 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 });
 }
 
 export function PilotSwarmWebApp({ controller }) {
+    // The rich UI restyles chrome that lives OUTSIDE this tree (the portal
+    // header in App.jsx), so the flag rides on <body> and every surface
+    // keys off `body.ps-rich-ui` in CSS rather than threading a prop.
+    const richUi = useControllerSelector(controller, (state) => state.ui.chatViewMode === "rich");
+    React.useEffect(() => {
+        if (typeof document === "undefined") return undefined;
+        document.body.classList.toggle("ps-rich-ui", richUi);
+        return () => document.body.classList.remove("ps-rich-ui");
+    }, [richUi]);
+
     const viewportRef = React.useRef(null);
     const mainGridRef = React.useRef(null);
     const viewport = useMeasuredViewport(viewportRef);
@@ -5316,10 +6530,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);
@@ -5373,13 +6592,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
@@ -5392,7 +6619,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 {
@@ -5424,7 +6653,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;
@@ -5447,7 +6676,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"
@@ -5469,6 +6710,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;
@@ -5507,14 +6754,14 @@ export function PilotSwarmWebApp({ controller }) {
     const desktopWorkspace = React.createElement("div", {
         className: "ps-workspace-grid",
         style: {
-            gridTemplateColumns: `minmax(0, ${layout.leftWidth}fr) 16px minmax(0, ${layout.rightWidth}fr)`,
+            gridTemplateColumns: `minmax(0, ${layout.leftWidth}fr) var(--ps-resizer-track, 16px) minmax(0, ${layout.rightWidth}fr)`,
         },
     },
     React.createElement("div", {
         ref: mainGridRef,
         className: `ps-workspace-main-grid is-session-${sessionColumnMode}`,
         style: {
-            gridTemplateColumns: `${sessionColumnTrack} 16px minmax(14rem, 1fr)`,
+            gridTemplateColumns: `${sessionColumnTrack} var(--ps-resizer-track, 16px) minmax(14rem, 1fr)`,
         },
     },
     sessionColumnMode !== "hidden" ? React.createElement("div", {
@@ -5538,7 +6785,7 @@ export function PilotSwarmWebApp({ controller }) {
     React.createElement(ColumnResizeHandle, { controller, paneAdjust: state.paneAdjust }),
     React.createElement("div", {
         className: "ps-workspace-column",
-        style: { gridTemplateRows: `${layout.inspectorPaneHeight}fr 16px ${layout.activityPaneHeight}fr` },
+        style: { gridTemplateRows: `${layout.inspectorPaneHeight}fr var(--ps-resizer-track, 16px) ${layout.activityPaneHeight}fr` },
     },
     React.createElement("div", {
         className: "ps-workspace-pane-slot",
@@ -5558,7 +6805,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,
@@ -5570,7 +6822,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 }));
@@ -5578,7 +6832,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,
@@ -5603,5 +6858,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 })));
 }