pilotswarm 0.5.26 → 0.5.28

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

@@ -12,6 +12,10 @@ import {
     computeLegacyLayout,
     createInitialState,
     createStore,
+    AUTO_HISTORY_EVENT_SOFT_CAP,
+    formatCompactNumber,
+    formatCronTimestampForClient,
+    formatHumanDurationSeconds,
     getPromptInputRows,
     getTheme,
     isThemeLight,
@@ -136,6 +140,9 @@ function supportsLocalFileOpen(controller) {
 }
 
 const SESSION_LINK_COPIED_STATUS = "Session link copied to clipboard";
+// Mirrors SESSION_NAV_SETTLE_MS in the controller: the access probe rides the
+// same "wait for the selection to stop moving" rule as the session fetch.
+const SESSION_ACCESS_SETTLE_MS = 140;
 const SESSION_LINK_PRIVATE_WARNING = "Only people with access can open this link.";
 
 function buildSessionLinkUrl(sessionId) {
@@ -1080,6 +1087,194 @@ function stripYamlFrontmatter(content) {
     return text.slice(3 + close.index + close[0].length);
 }
 
+const TABULAR_ARTIFACT_RE = /\.(csv|tsv)$/i;
+
+function isTabularArtifact(filename, contentType) {
+    if (TABULAR_ARTIFACT_RE.test(String(filename || ""))) return true;
+    return /^text\/(csv|tab-separated-values)$/i.test(String(contentType || "").trim());
+}
+
+/**
+ * Tabular preview.
+ *
+ * Parsing is delegated to Papa Parse rather than split(",") because the cases
+ * that break naive parsers are exactly the ones real exports contain: quoted
+ * fields holding commas, embedded newlines inside a quoted cell, and escaped
+ * quotes. It is loaded lazily so opening a .md never pays for the parser.
+ *
+ * Rendering is our own table, not a viewer library's: the preview has to
+ * inherit the active theme's chrome (Win95 bevels, MS-DOS reverse video), and
+ * a drop-in viewer ships its own styling that cannot participate in that.
+ */
+const TABULAR_MAX_ROWS = 2000;
+
+/**
+ * Quote a cell for TSV the way a spreadsheet expects: only when the value
+ * would otherwise break the row/column framing.
+ */
+function tsvCell(value) {
+    const text = String(value ?? "");
+    return /[\t\n\r"]/.test(text) ? `"${text.replace(/"/g, '""')}"` : text;
+}
+
+function TabularPreview({ content, filename }) {
+    const [parsed, setParsed] = React.useState(null);
+    const wrapRef = React.useRef(null);
+    const tableRef = React.useRef(null);
+    const anchorCellRef = React.useRef(null);
+
+    React.useEffect(() => {
+        let cancelled = false;
+        setParsed(null);
+        import("papaparse")
+            .then((mod) => {
+                if (cancelled) return;
+                const Papa = mod.default || mod;
+                const delimiter = /\.tsv$/i.test(String(filename || "")) ? "\t" : "";
+                const out = Papa.parse(String(content || "").trim(), {
+                    delimiter,
+                    skipEmptyLines: "greedy",
+                });
+                setParsed({ rows: out.data || [], errors: out.errors || [] });
+            })
+            .catch(() => { if (!cancelled) setParsed({ rows: null, errors: [{ message: "parser unavailable" }] }); });
+        return () => { cancelled = true; };
+    }, [content, filename]);
+
+    // The drag can end anywhere, including outside the pane or the window.
+    React.useEffect(() => {
+        const release = () => { anchorCellRef.current = null; };
+        window.addEventListener("mouseup", release);
+        return () => window.removeEventListener("mouseup", release);
+    }, []);
+
+    /** Select whole cells: snap both range ends to cell boundaries. */
+    const selectCellSpan = React.useCallback((a, b) => {
+        if (!a || !b) return;
+        const selection = window.getSelection();
+        if (!selection) return;
+        const backwards = !!(a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_PRECEDING);
+        const range = document.createRange();
+        range.setStartBefore(backwards ? b : a);
+        range.setEndAfter(backwards ? a : b);
+        selection.removeAllRanges();
+        selection.addRange(range);
+    }, []);
+
+    const cellFrom = (event) => (event.target?.closest ? event.target.closest("td,th") : null);
+
+    const onMouseDown = React.useCallback((event) => {
+        if (event.button !== 0) return;
+        const cell = cellFrom(event);
+        if (!cell) return;
+        // Suppress the native character-level selection before it starts, then
+        // take focus by hand (preventDefault would otherwise deny it, and the
+        // wrapper needs focus for Ctrl+A to reach us).
+        event.preventDefault();
+        wrapRef.current?.focus();
+        anchorCellRef.current = cell;
+        selectCellSpan(cell, cell);
+    }, [selectCellSpan]);
+
+    const onMouseMove = React.useCallback((event) => {
+        if (!anchorCellRef.current || !(event.buttons & 1)) return;
+        const cell = cellFrom(event);
+        if (cell) selectCellSpan(anchorCellRef.current, cell);
+    }, [selectCellSpan]);
+
+    // Ctrl/Cmd+A selects the TABLE, not the page. Scoped to the pane, so it only
+    // applies once the table has focus.
+    const onKeyDown = React.useCallback((event) => {
+        if (!(event.metaKey || event.ctrlKey) || event.altKey) return;
+        if (event.key !== "a" && event.key !== "A") return;
+        const table = tableRef.current;
+        const selection = window.getSelection();
+        if (!table || !selection) return;
+        event.preventDefault();
+        event.stopPropagation();
+        const range = document.createRange();
+        range.selectNodeContents(table);
+        selection.removeAllRanges();
+        selection.addRange(range);
+    }, []);
+
+    /**
+     * Emit real TSV rather than trusting each browser's table serializer, so a
+     * paste into a spreadsheet lands in the right cells every time.
+     */
+    const onCopy = React.useCallback((event) => {
+        const table = tableRef.current;
+        const selection = window.getSelection();
+        if (!table || !selection || selection.rangeCount === 0) return;
+        const range = selection.getRangeAt(0);
+        const rows = new Map();
+        for (const cell of table.querySelectorAll("th,td")) {
+            if (!range.intersectsNode(cell)) continue;
+            const row = cell.parentElement;
+            if (!rows.has(row)) rows.set(row, []);
+            rows.get(row).push(tsvCell(cell.textContent));
+        }
+        // Nothing of the table is selected — leave the event alone.
+        if (rows.size === 0) return;
+        event.clipboardData.setData("text/plain", Array.from(rows.values(), (cells) => cells.join("\t")).join("\n"));
+        event.preventDefault();
+    }, []);
+
+    if (!parsed) {
+        return React.createElement("div", { className: "ps-csv-status" }, "Parsing…");
+    }
+    // Fall back to the raw text rather than showing nothing: a file that will
+    // not parse is still readable, and hiding it would be worse than plain.
+    if (!parsed.rows || parsed.rows.length === 0) {
+        return React.createElement("pre", { className: "ps-md-code-pre" },
+            React.createElement("code", null, String(content || "")));
+    }
+
+    const [header, ...body] = parsed.rows;
+
+    // Width is the WIDEST row, not the header's. A data row with more cells
+    // than the header is malformed but common (trailing delimiters, a short
+    // header), and papaparse reports no error for it — iterating the header
+    // would silently drop those cells, which is the one thing a data viewer
+    // must never do. Reduce, not Math.max(...rows): spreading tens of
+    // thousands of arguments overflows the stack.
+    const columnCount = body.reduce((max, row) => Math.max(max, row.length), header.length);
+    const columns = Array.from({ length: columnCount }, (_, i) => header[i] ?? "");
+
+    // Cap the DOM. A 1 MiB CSV (the artifact ceiling) can be ~20k rows, and
+    // 20k × N cells makes the pane unusable. Showing a bounded window and
+    // saying so is better than hanging the tab.
+    const truncated = body.length > TABULAR_MAX_ROWS;
+    const visible = truncated ? body.slice(0, TABULAR_MAX_ROWS) : body;
+
+    // No row/column tally — it is not part of the file, and a footer under the
+    // table is one more thing to avoid when copying. The only notes worth
+    // showing are the ones that say the view is NOT the whole truth.
+    const notes = [];
+    if (truncated) notes.push(`showing first ${TABULAR_MAX_ROWS} of ${body.length} rows`);
+    if (parsed.errors.length) notes.push(`${parsed.errors.length} parse warning${parsed.errors.length === 1 ? "" : "s"}`);
+
+    return React.createElement("div", {
+        className: "ps-csv-wrap",
+        ref: wrapRef,
+        tabIndex: 0,
+        onMouseDown,
+        onMouseMove,
+        onKeyDown,
+        onCopy,
+    },
+        React.createElement("table", { className: "ps-csv-table", ref: tableRef },
+            React.createElement("thead", null,
+                React.createElement("tr", null,
+                    columns.map((cell, i) => React.createElement("th", { key: `h${i}` }, String(cell ?? ""))))),
+            React.createElement("tbody", null,
+                visible.map((row, r) => React.createElement("tr", { key: `r${r}` },
+                    columns.map((_, c) => React.createElement("td", { key: `c${c}` }, String(row[c] ?? ""))))))),
+        notes.length
+            ? React.createElement("div", { className: "ps-csv-status" }, notes.join(" · "))
+            : null);
+}
+
 function codeLanguageForArtifact(filename) {
     const ext = /\.([A-Za-z0-9]+)$/.exec(String(filename || ""));
     if (!ext) return null;
@@ -2294,30 +2489,29 @@ function StructuredChatBlocks({ lines, theme, controller = null }) {
 // 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" : ""}`,
-                },
+/**
+ * One rich message, memoized.
+ *
+ * The body runs markdown through MarkdownPreviewContent — the single most
+ * expensive thing in the transcript — and a pane resize used to re-run it for
+ * every loaded message. `selectChatBlocks` now returns identity-stable blocks,
+ * so this bails out instead. Every prop must stay referentially stable for
+ * that to hold: `theme` comes from a Map, `controller` is a singleton, and
+ * `continued` is hoisted to a boolean because it depends on the PREVIOUS block
+ * and would otherwise have to be recomputed inside.
+ */
+const RichChatMessage = React.memo(function RichChatMessage({ block, theme, controller, continued }) {
+    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;
+    return React.createElement("article", {
+        className: `ps-rich-msg${roleClass}${pendingClass}${continued ? " is-continued" : ""}`,
+    },
                     React.createElement("header", { className: "ps-rich-msg-head" },
                         showLabel
                             ? React.createElement("span", {
@@ -2342,22 +2536,53 @@ function RichChatBlocks({ blocks, theme, controller = null }) {
                         ? 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);
+        block.attachments
+            ? React.createElement(ArtifactImageStrip, {
+                controller,
+                sessionId: block.attachments.sessionId,
+                attachments: block.attachments.attachments,
+            })
+            : null);
+});
+
+/** A non-message block (splash, system card, divider), memoized the same way. */
+const RichChatLineBlock = React.memo(function RichChatLineBlock({ block, theme, controller }) {
+    const lines = React.useMemo(() => normalizeLines(block.lines || []), [block.lines]);
+    return React.createElement("div", {
+        className: `ps-rich-lineblock is-${block.variant || "event"}`,
+    }, React.createElement(StructuredChatBlocks, { lines, theme, controller }));
+});
+
+function RichChatBlocks({ blocks, theme, controller = null }) {
+    return React.createElement("div", { className: "ps-rich-chat" },
+        (blocks || []).map((block, index) => {
+            if (block.kind === "message") {
+                // Consecutive turns from the same speaker read as one
+                // continuous passage — no repeated header, tighter spacing.
+                // Computed here because it reads the previous block; passing it
+                // down as a boolean is what keeps the child memoizable.
+                const previous = blocks[index - 1];
+                const header = block.header || {};
+                const showLabel = block.role === "user" && header.fromOtherPerson;
+                const continued = Boolean(previous
+                    && previous.kind === "message"
+                    && previous.role === block.role
+                    && !(previous.header && previous.header.fromOtherPerson)
+                    && !showLabel);
+                return React.createElement(RichChatMessage, {
+                    key: block.id != null ? `msg:${block.id}` : `msg:${index}`,
+                    block,
+                    theme,
+                    controller,
+                    continued,
+                });
             }
-            return React.createElement("div", {
+            return React.createElement(RichChatLineBlock, {
                 key: `lines:${index}`,
-                className: `ps-rich-lineblock is-${block.variant || "event"}`,
-            }, React.createElement(StructuredChatBlocks, {
-                lines: normalizeLines(block.lines || []),
+                block,
                 theme,
                 controller,
-            }));
+            });
         }));
 }
 
@@ -2837,13 +3062,134 @@ function ScrollLinesPanel({ title, titleRight = null, color, focused, actions, l
 // with a guide rail rather than an ASCII "└" prefix.
 const SESSION_KIND_GLYPHS = { group: "🗂", system: "⚙", service: "⚗" };
 
-function RichSessionRow({ row, theme }) {
+/**
+ * Selected-session details, pinned to the bottom of the Sessions panel.
+ *
+ * This exists so the ROWS can stay one clean line each. Everything that used
+ * to unfold under the selected row (and, in the rich list, under every row)
+ * lives here instead, at a fixed spot the eye can return to — so switching
+ * sessions no longer reflows the list.
+ *
+ * Web-only by construction: the TUI renders `row.detailRuns` itself and is
+ * untouched by this.
+ */
+const SESSION_DETAIL_NONE = "—";
+
+function SessionDetailBox({ session, childCount = 0 }) {
+    // EVERY field renders on EVERY selection, empty ones as an em dash. The box
+    // is a fixed grid of rows, so moving through the list cannot change its
+    // height — a box that grew and shrank would shove the list under the
+    // cursor mid-scroll. That is also why each value is a single clamped line.
+    const field = (label, value, extraClass = "") => {
+        const text = (value == null || value === "") ? SESSION_DETAIL_NONE : String(value);
+        const empty = text === SESSION_DETAIL_NONE;
+        return React.createElement("div", {
+            className: `ps-session-detail-field${extraClass ? ` ${extraClass}` : ""}${empty ? " is-none" : ""}`,
+            key: label,
+        },
+            React.createElement("span", { className: "ps-session-detail-label" }, label),
+            React.createElement("span", { className: "ps-session-detail-value", title: text }, text));
+    };
+
+    const usage = session?.contextUsage;
+    const hasUsage = usage && Number.isFinite(usage.currentTokens) && Number.isFinite(usage.tokenLimit) && usage.tokenLimit > 0;
+    const percent = hasUsage ? Math.round((usage.currentTokens / usage.tokenLimit) * 100) : null;
+    const context = hasUsage
+        ? `${formatCompactNumber(usage.currentTokens)} / ${formatCompactNumber(usage.tokenLimit)} · ${percent}%`
+        : null;
+
+    // "Cron vs not" is a question the list could only answer with a glyph, so
+    // spell it out — an unscheduled session says "off" rather than going blank,
+    // which would be indistinguishable from "unknown".
+    let cron = null;
+    if (session && !session.isGroup) {
+        cron = "off";
+        if (session.cronActive === true) {
+            cron = session.cronKind === "wall-clock"
+                ? `next ${formatCronTimestampForClient(session.cronNextFireAt)}`
+                : typeof session.cronInterval === "number"
+                    ? `every ${formatHumanDurationSeconds(session.cronInterval)}`
+                    : "on";
+        }
+    }
+
+    const model = session?.model
+        ? (session.reasoningEffort && !String(session.model).includes(String(session.reasoningEffort))
+            ? `${session.model}:${session.reasoningEffort}`
+            : session.model)
+        : null;
+
+    const access = !session ? null
+        : session.visibility === "shared_write" ? "shared · write"
+            : session.visibility === "shared_read" ? "shared · read"
+                : "private";
+
+    // Groups have members rather than descendants; both answer "how many are
+    // under this row", so they share the field.
+    const children = session?.isGroup
+        ? (session.memberCount == null ? null : String(session.memberCount))
+        : (childCount > 0 ? String(childCount) : null);
+
+    return React.createElement("div", { className: "ps-session-detail-box" },
+        // The row above ellipsizes to one line, so this is the only place the
+        // whole name is legible. Two lines are RESERVED whether or not they are
+        // used, so the box height still cannot move with the selection.
+        field("Title", session?.title, "is-title"),
+        field("ID", session?.sessionId, "is-id"),
+        field("Model", model),
+        field("Context", context, percent != null && percent >= 85 ? "is-hot" : percent != null && percent >= 70 ? "is-warm" : ""),
+        field("Cron", cron, session?.cronActive === true ? "is-armed" : ""),
+        field("Agent", session?.agentId),
+        field("Status", session?.status),
+        field("Children", children),
+        field("Access", access));
+}
+
+/**
+ * One session row, memoized.
+ *
+ * The list re-renders whenever the selection moves, but `selectSessionRows`
+ * hands back the SAME row object for every row whose inputs did not change, so
+ * memoizing here means a keypress reconciles two rows instead of the whole
+ * fleet. That only holds while every prop is referentially stable — hence the
+ * hoisted click handler and ref setter rather than closures built per row.
+ */
+const SessionListRow = React.memo(function SessionListRow({
+    row, theme, rich, structuredRows, mobile, onRowClick, setRef,
+}) {
+    const ref = React.useCallback((node) => setRef(row.sessionId, node), [setRef, row.sessionId]);
+    const onClick = React.useCallback((event) => onRowClick(event, row), [onRowClick, row]);
+
+    return React.createElement("button", {
+        type: "button",
+        ref,
+        className: `ps-list-button ps-session-list-button${row.active ? " is-selected" : ""}${row.selected ? " is-multiselected" : ""}${row.pinned ? " is-pinned" : ""}`,
+        tabIndex: row.active ? 0 : -1,
+        "aria-selected": row.active ? "true" : "false",
+        onClick,
+    },
+        React.createElement("div", {
+            className: rich ? "ps-session-row-content is-rich" : "ps-line ps-session-row-content",
+            style: {
+                paddingInlineStart: rich
+                    ? `${Math.max(0, row.depth) * 14}px`
+                    : `${Math.max(0, row.depth) * 4}px`,
+            },
+        },
+            rich
+                ? React.createElement(RichSessionRow, { row, theme, showDetail: mobile })
+                : React.createElement(SessionRowContent, { row, theme, structured: structuredRows, showInlineDetail: mobile })));
+});
+
+function RichSessionRow({ row, theme, showDetail = false }) {
     const chrome = row.chrome;
-    if (!chrome) return React.createElement(SessionRowContent, { row, theme, structured: true });
+    if (!chrome) return React.createElement(SessionRowContent, { row, theme, structured: true, showInlineDetail: showDetail });
 
     const kindGlyph = SESSION_KIND_GLYPHS[chrome.kind] || null;
     const accent = resolveColor(theme, chrome.accentColor) || undefined;
-    const detailRuns = Array.isArray(row.detailRuns) ? row.detailRuns : [];
+    // Mobile has no room for a detail box, so it keeps the inline detail line
+    // it always had. Desktop moves that content to the panel footer.
+    const detailRuns = showDetail && Array.isArray(row.detailRuns) ? row.detailRuns : [];
 
     return React.createElement("div", { className: "ps-rich-session-row" },
         React.createElement("div", { className: "ps-rich-session-main" },
@@ -2884,16 +3230,13 @@ function RichSessionRow({ row, theme }) {
                     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 }) {
+function SessionRowContent({ row, theme, structured = false, showInlineDetail = false }) {
     const hasStructuredRuns = structured && Array.isArray(row.titleRuns);
     if (!hasStructuredRuns) {
         return Array.isArray(row.runs)
@@ -2902,14 +3245,16 @@ function SessionRowContent({ row, theme, structured = false }) {
     }
 
     // Dense row: the title takes one line (clamped by CSS) and the context %
-    // is pinned to the right. The full id · time · model · ctx detail unfolds
-    // only under the selected row.
+    // is pinned to the right. id · time · model · ctx now live in the panel's
+    // detail box rather than unfolding under the row, so selecting a session
+    // no longer reflows the list.
     const ctxRuns = Array.isArray(row.ctxRuns) ? row.ctxRuns : [];
+    const hasCtx = ctxRuns.length > 0;
+    // Mobile keeps the inline unfold under the selected row (no detail box).
     const detailRuns = Array.isArray(row.detailRuns)
         ? row.detailRuns
         : (Array.isArray(row.selectedMetaRuns) ? row.selectedMetaRuns : []);
-    const hasCtx = ctxRuns.length > 0;
-    const hasDetail = row.active && detailRuns.length > 0;
+    const hasDetail = showInlineDetail && row.active && detailRuns.length > 0;
 
     return React.createElement(React.Fragment, null,
         React.createElement("div", { className: "ps-session-row-line" },
@@ -2956,10 +3301,14 @@ function useStableValue(value) {
 }
 
 function SessionPane({ controller, actions = null, panelClassName = "", structuredRows = false }) {
+    // Mobile keeps its inline detail line and gets no detail box — a reserved
+    // footer would eat a meaningful slice of a phone screen.
+    const isMobilePane = String(panelClassName).includes("ps-mobile-session-pane");
     const themeId = useControllerSelector(controller, (state) => state.ui.themeId);
     const theme = getTheme(themeId);
     const sessionButtonRefs = React.useRef(new Map());
     const viewState = useControllerSelector(controller, (state) => ({
+        branding: state.branding,
         activeSessionId: state.sessions.activeSessionId,
         sessionsById: state.sessions.byId,
         sessionsFlat: state.sessions.flat,
@@ -2993,12 +3342,21 @@ function SessionPane({ controller, actions = null, panelClassName = "", structur
         connection: {
             mode: viewState.connectionMode,
         },
-    }), [viewState.activeSessionId, viewState.auth, viewState.connectionMode, viewState.filterQuery, viewState.ownerFilter, viewState.pinnedIds, viewState.selectedIds, viewState.selectMode, viewState.sessionsById, viewState.sessionsFlat]);
+        // The root system session renders as the deployment's branding title.
+        // Omitting this made the list fall back to "PilotSwarm" on a branded
+        // deployment, while the controller's own calls (which pass real state)
+        // produced the branded name.
+        branding: viewState.branding,
+    }), [viewState.activeSessionId, viewState.auth, viewState.branding, 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;
+    // The row carries the computed child badge; the raw session does not.
+    const activeRow = viewState.activeSessionId
+        ? rows.find((r) => r.sessionId === viewState.activeSessionId) || null
+        : null;
     // "Manage session" combines rename, model, and sharing in one tabbed modal
     // (opened from the toolbar so the composer chrome stays minimal, esp. on
     // mobile). Rename and sharing are owner/admin-only (session:manage /
@@ -3082,6 +3440,61 @@ 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${viewState.rich ? " is-rich" : ""}${panelClassName ? ` ${panelClassName}` : ""}`;
+    // The click handler must be referentially stable or every memoized row
+    // re-renders on each keypress, defeating the point. It reads the current
+    // rows/viewState from a ref that is refreshed on every render instead of
+    // closing over them.
+    const clickEnv = React.useRef(null);
+    clickEnv.current = { rows, viewState, controller };
+    const handleRowClick = React.useCallback((event, row) => {
+        const { rows: currentRows, viewState: current, controller: ctl } = clickEnv.current;
+        // Cmd/Ctrl-click toggles multi-selection (any row).
+        if (event.metaKey || event.ctrlKey) {
+            event.preventDefault();
+            if (!current.selectMode) {
+                ctl.dispatch({ type: "sessions/selectMode", enabled: true });
+            }
+            ctl.dispatch({ type: "sessions/selectToggle", sessionId: row.sessionId });
+            ctl.setFocus("sessions");
+            return;
+        }
+        // Shift-click selects a contiguous range from the active row.
+        if (event.shiftKey && current.activeSessionId) {
+            event.preventDefault();
+            const ids = currentRows.map((r) => r.sessionId);
+            const startIndex = ids.indexOf(current.activeSessionId);
+            const endIndex = ids.indexOf(row.sessionId);
+            if (startIndex >= 0 && endIndex >= 0) {
+                const [from, to] = startIndex <= endIndex
+                    ? [startIndex, endIndex]
+                    : [endIndex, startIndex];
+                const range = ids.slice(from, to + 1);
+                const merged = Array.from(new Set([...(current.selectedIds || []), ...range]));
+                ctl.setSessionSelection(merged);
+                ctl.setFocus("sessions");
+                return;
+            }
+        }
+        const shouldToggleChildren = row.hasChildren && row.active;
+        if (shouldToggleChildren) {
+            ctl.dispatch({
+                type: row.collapsed ? "sessions/expand" : "sessions/collapse",
+                sessionId: row.sessionId,
+            });
+            ctl.setFocus("sessions");
+            return;
+        }
+        // A normal click on a different row clears any multi-selection and
+        // switches the active session.
+        if (current.selectMode) {
+            ctl.dispatch({ type: "sessions/selectClear" });
+        }
+        ctl.setFocus("sessions");
+        if (!row.active) {
+            ctl.loadSession(row.sessionId).catch(() => {});
+        }
+    }, []);
+
     const setSessionButtonRef = React.useCallback((sessionId, node) => {
         if (!sessionId) return;
         if (node) {
@@ -3194,74 +3607,22 @@ function SessionPane({ controller, actions = null, panelClassName = "", structur
             ? React.createElement("div", { className: "ps-empty-state" }, viewState.filterQuery
                 ? `No sessions matched "@@${viewState.filterQuery}".`
                 : "No sessions yet.")
-            : rows.map((row) => React.createElement("button", {
+            : rows.map((row) => React.createElement(SessionListRow, {
                 key: row.sessionId,
-                type: "button",
-                ref: (node) => setSessionButtonRef(row.sessionId, node),
-                className: `ps-list-button ps-session-list-button${row.active ? " is-selected" : ""}${row.selected ? " is-multiselected" : ""}${row.pinned ? " is-pinned" : ""}`,
-                tabIndex: row.active ? 0 : -1,
-                "aria-selected": row.active ? "true" : "false",
-                onClick: (event) => {
-                    // Cmd/Ctrl-click toggles multi-selection (any row).
-                    if (event.metaKey || event.ctrlKey) {
-                        event.preventDefault();
-                        if (!viewState.selectMode) {
-                            controller.dispatch({ type: "sessions/selectMode", enabled: true });
-                        }
-                        controller.dispatch({ type: "sessions/selectToggle", sessionId: row.sessionId });
-                        controller.setFocus("sessions");
-                        return;
-                    }
-                    // Shift-click selects a contiguous range from the active row.
-                    if (event.shiftKey && viewState.activeSessionId) {
-                        event.preventDefault();
-                        const ids = rows.map((r) => r.sessionId);
-                        const startIndex = ids.indexOf(viewState.activeSessionId);
-                        const endIndex = ids.indexOf(row.sessionId);
-                        if (startIndex >= 0 && endIndex >= 0) {
-                            const [from, to] = startIndex <= endIndex
-                                ? [startIndex, endIndex]
-                                : [endIndex, startIndex];
-                            const range = ids.slice(from, to + 1);
-                            const merged = Array.from(new Set([...(viewState.selectedIds || []), ...range]));
-                            controller.setSessionSelection(merged);
-                            controller.setFocus("sessions");
-                            return;
-                        }
-                    }
-                    const shouldToggleChildren = row.hasChildren && row.active;
-                    if (shouldToggleChildren) {
-                        controller.dispatch({
-                            type: row.collapsed ? "sessions/expand" : "sessions/collapse",
-                            sessionId: row.sessionId,
-                        });
-                        controller.setFocus("sessions");
-                        return;
-                    }
-                    // A normal click on a different row clears any
-                    // multi-selection and switches the active session.
-                    if (viewState.selectMode) {
-                        controller.dispatch({ type: "sessions/selectClear" });
-                    }
-                    controller.setFocus("sessions");
-                    if (!row.active) {
-                        controller.loadSession(row.sessionId).catch(() => {});
-                    }
-                },
-            },
-            React.createElement("div", {
-                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`,
-                },
-            },
-                viewState.rich
-                    ? React.createElement(RichSessionRow, { row, theme })
-                    : React.createElement(SessionRowContent, { row, theme, structured: structuredRows })),
-            )),
-    )),
+                row,
+                theme,
+                rich: viewState.rich,
+                structuredRows,
+                mobile: isMobilePane,
+                onRowClick: handleRowClick,
+                setRef: setSessionButtonRef,
+            }))),
+    isMobilePane
+        ? null
+        : React.createElement(SessionDetailBox, {
+            session: activeSession,
+            childCount: activeRow?.childCount || 0,
+        })),
     (manageOpen && activeSession && !activeSession.isGroup)
         ? React.createElement(SessionModifyModal, {
             controller,
@@ -3385,7 +3746,19 @@ function useActiveSessionAccess(controller, activeSessionId, isGroup) {
             .catch(() => { if (!cancelled) setState({ access: null, loading: false }); });
         return () => { cancelled = true; };
     }, [controller, activeSessionId, isGroup]);
-    React.useEffect(() => reload(), [reload]);
+    // Deferred for the same reason the session fetch is: this fires on every
+    // activeSessionId change, and scrolling the list changes that per keypress.
+    // Without the settle, moving through a list of sessions issued one access
+    // round trip per row. `reload` stays immediate for callers that ask for it
+    // explicitly (after a sharing change).
+    React.useEffect(() => {
+        let cancelInFlight;
+        const timer = setTimeout(() => { cancelInFlight = reload(); }, SESSION_ACCESS_SETTLE_MS);
+        return () => {
+            clearTimeout(timer);
+            if (typeof cancelInFlight === "function") cancelInFlight();
+        };
+    }, [reload]);
     return { access: state.access, loading: state.loading, reload };
 }
 
@@ -3712,6 +4085,15 @@ function ChatPane({ controller, mobile = false, fullWidth = false, showComposer
         [animatedDots, chrome.animateTitleRight, chrome.titleRight],
     );
     const richMode = viewState.chatViewMode === "rich" && !viewState.activeSessionIsGroup;
+    const [loadingOlder, setLoadingOlder] = React.useState(false);
+    // Scroll-up expands the transcript automatically until the soft cap, then
+    // refuses — and the portal had no control to ask for more, so a busy
+    // session's history became unreachable from the browser. Surface the
+    // control exactly when the automatic path has given up.
+    const showLoadOlder = Boolean(
+        viewState.activeHistory?.hasOlderEvents
+        && Number(viewState.activeHistory?.loadedEventCount || 0) >= AUTO_HISTORY_EVENT_SOFT_CAP,
+    );
     const richBlocks = React.useMemo(
         () => (richMode ? selectChatBlocks(selectorState, viewState.contentWidth, { tableMode: "sentinel" }) : null),
         [richMode, selectorState, viewState.contentWidth],
@@ -3815,6 +4197,20 @@ function ChatPane({ controller, mobile = false, fullWidth = false, showComposer
         className: richMode ? "is-wrapped is-rich" : "is-wrapped",
         panelClassName: richMode ? "ps-chat-panel is-rich" : "ps-chat-panel",
         bottomContent: composer,
+        topContent: showLoadOlder
+            ? React.createElement("div", { className: "ps-load-older-bar" },
+                React.createElement("button", {
+                    type: "button",
+                    className: "ps-load-older-button",
+                    disabled: loadingOlder,
+                    onClick: () => {
+                        setLoadingOlder(true);
+                        controller.handleCommand(UI_COMMANDS.EXPAND_HISTORY)
+                            .catch(() => {})
+                            .finally(() => setLoadingOlder(false));
+                    },
+                }, loadingOlder ? "Loading older messages…" : "↑ Load older messages"))
+            : null,
         structuredBlocks: true,
         renderBody: richBlocks
             ? (_bodyLines, bodyTheme) => React.createElement(RichChatBlocks, {
@@ -4171,7 +4567,21 @@ function FilesPane({ controller, focused, mobile = false, previewOnly = false, n
     // In the mobile overlay the browser owns scrolling outright.
     const previewPaneKey = nativeScroll ? null : "filePreview";
 
-    const previewPane = previewIsImage
+    const previewIsTabular = previewReady
+        && !filesView.previewIsBinary
+        && isTabularArtifact(filesView.selectedFilename, filesView.previewContentType)
+        && Boolean(filesView.previewContent);
+
+    const previewPane = previewIsTabular
+        ? React.createElement(RenderedPreviewPanel, {
+            controller, title: null, color: "cyan", focused: false, theme,
+            paneKey: previewPaneKey, scrollOffset: viewState.previewScroll,
+            className: "ps-csv-preview", focusRegion: previewFocusRegion,
+        }, React.createElement(TabularPreview, {
+            content: filesView.previewContent,
+            filename: filesView.selectedFilename,
+        }))
+        : previewIsImage
         ? React.createElement(BinaryArtifactPreviewPanel, {
             title: null,
             color: "cyan",