pilotswarm 0.5.21 → 0.5.23

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,7 +210,7 @@ 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 (candidate.chatViewMode === "summary" || candidate.chatViewMode === "transcript" || candidate.chatViewMode === "rich") {
         normalized.chatViewMode = candidate.chatViewMode;
     }
     return normalized;
@@ -890,6 +892,275 @@ 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",
+};
+
+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}`;
@@ -1186,10 +1457,19 @@ 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 codeSection = React.createElement("section", { key: `block:${index}`, className: "ps-md-code-block" },
                     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, 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" },
@@ -1661,6 +1941,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 +2119,19 @@ 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 chatCodeSection = React.createElement("section", { key: `code:${index}`, className: "ps-md-code-block ps-chat-code-block" },
                     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, 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,6 +2217,19 @@ 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);
     return React.createElement("section", {
@@ -2056,6 +2430,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) {
@@ -2105,6 +2541,11 @@ 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({
         sessions: {
@@ -2207,7 +2648,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 +2817,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)
@@ -2831,10 +3278,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 +3364,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,10 +3379,17 @@ 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,
     });
 }
 
@@ -3325,7 +3796,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 +3845,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}` : ""}`,
     });
 }
 
@@ -3646,7 +4119,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 +4418,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 +4457,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 +4513,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 }) {
@@ -5255,6 +5764,16 @@ export function createWebPilotSwarmController({ transport, mode = "remote", bran
 }
 
 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);
@@ -5507,14 +6026,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 +6057,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",