pilotswarm 0.5.26 → 0.5.27

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

@@ -12,6 +12,9 @@ import {
     computeLegacyLayout,
     createInitialState,
     createStore,
+    formatCompactNumber,
+    formatCronTimestampForClient,
+    formatHumanDurationSeconds,
     getPromptInputRows,
     getTheme,
     isThemeLight,
@@ -136,6 +139,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 +1086,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;
@@ -2837,13 +3031,130 @@ 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" },
+        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 +3195,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 +3210,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,6 +3266,9 @@ 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());
@@ -2999,6 +3312,10 @@ function SessionPane({ controller, actions = null, panelClassName = "", structur
     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 +3399,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 +3566,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 +3705,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 };
 }
 
@@ -4171,7 +4503,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",

package/web/dist/assets/{abnfDiagram-VRR7QNED-C4qRR7va.js → abnfDiagram-VRR7QNED-DOZGtiQC.js}

@@ -1 +1 @@
-import{g as p,r as u,d as a}from"./chunk-MOJQB5TN-vTyL0qgx.js";import{p as f}from"./chunk-JWPE2WC7-DIMWiXpM.js";import{_ as n,l as o}from"./mermaid.core-BN9c--2r.js";import{M as c,b as d}from"./cynefin-VYW2F7L2-B6pX-lUD.js";import"./pilotswarm-BgzdDy09.js";var v=d().RailroadAbnf.parser.LangiumParser,i=n(e=>{const r=e.alternatives.map(g);return r.length===1?r[0]:{type:"choice",alternatives:r}},"transformAlternation"),g=n(e=>{const r=e.elements.map(y);return r.length===1?r[0]:{type:"sequence",elements:r}},"transformConcatenation"),b=n(e=>{if(e.includes("*")){const[t,s]=e.split("*"),l=t?parseInt(t,10):0,m=s?parseInt(s,10):1/0;return{min:l,max:m}}const r=parseInt(e,10);return{min:r,max:r}},"parseRepeat"),y=n(e=>{const r=A(e.primary);if(!e.repeat)return r;const{min:t,max:s}=b(e.repeat);return t===0&&s===1?{type:"optional",element:r}:{type:"repetition",element:r,min:t,max:s}},"transformElement"),A=n(e=>{switch(e.$type){case"AbnfStringLiteral":return{type:"terminal",value:e.value};case"AbnfNumVal":return{type:"terminal",value:e.value};case"AbnfRuleName":return{type:"nonterminal",name:e.name};case"AbnfGroup":return i(e.element);case"AbnfOptionalGroup":return{type:"optional",element:i(e.element)};default:throw new Error(`Unsupported ABNF primary node: ${e.$type}`)}},"transformPrimary"),P=n(e=>({name:e.name,definition:i(e.definition)}),"transformRule"),h=n(e=>{f(e,a),e.title&&a.setTitle(e.title),e.rules.map(r=>a.addRule(P(r)))},"populateDb"),R={parse:n(e=>{a.clear(),o.debug("[ABNF Parser] Starting Langium parse");const r=v.parse(e);if(r.lexerErrors.length>0||r.parserErrors.length>0)throw new c(r);const t=r.value;o.debug("[ABNF Parser] Parsed rules:",t.rules.length),h(t),o.debug("[ABNF Parser] Parse complete")},"parse"),parser:{yy:a}},B={parser:R,db:a,renderer:u,styles:p};export{B as diagram};
+import{g as p,r as u,d as a}from"./chunk-MOJQB5TN-B-bgmTfa.js";import{p as f}from"./chunk-JWPE2WC7-D5reV4oK.js";import{_ as n,l as o}from"./mermaid.core-OUiCmXKB.js";import{M as c,b as d}from"./cynefin-VYW2F7L2-COwlV5eq.js";import"./pilotswarm-CU6jtK4w.js";var v=d().RailroadAbnf.parser.LangiumParser,i=n(e=>{const r=e.alternatives.map(g);return r.length===1?r[0]:{type:"choice",alternatives:r}},"transformAlternation"),g=n(e=>{const r=e.elements.map(y);return r.length===1?r[0]:{type:"sequence",elements:r}},"transformConcatenation"),b=n(e=>{if(e.includes("*")){const[t,s]=e.split("*"),l=t?parseInt(t,10):0,m=s?parseInt(s,10):1/0;return{min:l,max:m}}const r=parseInt(e,10);return{min:r,max:r}},"parseRepeat"),y=n(e=>{const r=A(e.primary);if(!e.repeat)return r;const{min:t,max:s}=b(e.repeat);return t===0&&s===1?{type:"optional",element:r}:{type:"repetition",element:r,min:t,max:s}},"transformElement"),A=n(e=>{switch(e.$type){case"AbnfStringLiteral":return{type:"terminal",value:e.value};case"AbnfNumVal":return{type:"terminal",value:e.value};case"AbnfRuleName":return{type:"nonterminal",name:e.name};case"AbnfGroup":return i(e.element);case"AbnfOptionalGroup":return{type:"optional",element:i(e.element)};default:throw new Error(`Unsupported ABNF primary node: ${e.$type}`)}},"transformPrimary"),P=n(e=>({name:e.name,definition:i(e.definition)}),"transformRule"),h=n(e=>{f(e,a),e.title&&a.setTitle(e.title),e.rules.map(r=>a.addRule(P(r)))},"populateDb"),R={parse:n(e=>{a.clear(),o.debug("[ABNF Parser] Starting Langium parse");const r=v.parse(e);if(r.lexerErrors.length>0||r.parserErrors.length>0)throw new c(r);const t=r.value;o.debug("[ABNF Parser] Parsed rules:",t.rules.length),h(t),o.debug("[ABNF Parser] Parse complete")},"parse"),parser:{yy:a}},B={parser:R,db:a,renderer:u,styles:p};export{B as diagram};

package/web/dist/assets/{arc-BQw2V2pL.js → arc-CNT314TJ.js}

@@ -1 +1 @@
-import{Y as ln,$ as an,a0 as F,a1 as q,a2 as j,a3 as un,a4 as y,a5 as tn,a6 as J,a7 as _,a8 as rn,a9 as o,aa as on,ab as sn,ac as fn}from"./mermaid.core-BN9c--2r.js";function cn(l){return l.innerRadius}function yn(l){return l.outerRadius}function gn(l){return l.startAngle}function dn(l){return l.endAngle}function mn(l){return l&&l.padAngle}function pn(l,h,I,D,v,A,z,a){var O=I-l,i=D-h,n=z-v,d=a-A,u=d*O-n*i;if(!(u*u<y))return u=(n*(h-A)-d*(l-v))/u,[l+u*O,h+u*i]}function U(l,h,I,D,v,A,z){var a=l-I,O=h-D,i=(z?A:-A)/J(a*a+O*O),n=i*O,d=-i*a,u=l+n,s=h+d,f=I+n,c=D+d,B=(u+f)/2,t=(s+c)/2,m=f-u,g=c-s,R=m*m+g*g,T=v-A,P=u*c-f*s,S=(g<0?-1:1)*J(on(0,T*T*R-P*P)),Y=(P*g-m*S)/R,$=(-P*m-g*S)/R,w=(P*g+m*S)/R,p=(-P*m+g*S)/R,x=Y-B,e=$-t,r=w-B,C=p-t;return x*x+e*e>r*r+C*C&&(Y=w,$=p),{cx:Y,cy:$,x01:-n,y01:-d,x11:Y*(v/T-1),y11:$*(v/T-1)}}function hn(){var l=cn,h=yn,I=j(0),D=null,v=gn,A=dn,z=mn,a=null,O=ln(i);function i(){var n,d,u=+l.apply(this,arguments),s=+h.apply(this,arguments),f=v.apply(this,arguments)-un,c=A.apply(this,arguments)-un,B=rn(c-f),t=c>f;if(a||(a=n=O()),s<u&&(d=s,s=u,u=d),!(s>y))a.moveTo(0,0);else if(B>tn-y)a.moveTo(s*F(f),s*q(f)),a.arc(0,0,s,f,c,!t),u>y&&(a.moveTo(u*F(c),u*q(c)),a.arc(0,0,u,c,f,t));else{var m=f,g=c,R=f,T=c,P=B,S=B,Y=z.apply(this,arguments)/2,$=Y>y&&(D?+D.apply(this,arguments):J(u*u+s*s)),w=_(rn(s-u)/2,+I.apply(this,arguments)),p=w,x=w,e,r;if($>y){var C=sn($/u*q(Y)),K=sn($/s*q(Y));(P-=C*2)>y?(C*=t?1:-1,R+=C,T-=C):(P=0,R=T=(f+c)/2),(S-=K*2)>y?(K*=t?1:-1,m+=K,g-=K):(S=0,m=g=(f+c)/2)}var G=s*F(m),H=s*q(m),L=u*F(T),M=u*q(T);if(w>y){var N=s*F(g),Q=s*q(g),V=u*F(R),W=u*q(R),E;if(B<an)if(E=pn(G,H,V,W,N,Q,L,M)){var X=G-E[0],Z=H-E[1],b=N-E[0],k=Q-E[1],nn=1/q(fn((X*b+Z*k)/(J(X*X+Z*Z)*J(b*b+k*k)))/2),en=J(E[0]*E[0]+E[1]*E[1]);p=_(w,(u-en)/(nn-1)),x=_(w,(s-en)/(nn+1))}else p=x=0}S>y?x>y?(e=U(V,W,G,H,s,x,t),r=U(N,Q,L,M,s,x,t),a.moveTo(e.cx+e.x01,e.cy+e.y01),x<w?a.arc(e.cx,e.cy,x,o(e.y01,e.x01),o(r.y01,r.x01),!t):(a.arc(e.cx,e.cy,x,o(e.y01,e.x01),o(e.y11,e.x11),!t),a.arc(0,0,s,o(e.cy+e.y11,e.cx+e.x11),o(r.cy+r.y11,r.cx+r.x11),!t),a.arc(r.cx,r.cy,x,o(r.y11,r.x11),o(r.y01,r.x01),!t))):(a.moveTo(G,H),a.arc(0,0,s,m,g,!t)):a.moveTo(G,H),!(u>y)||!(P>y)?a.lineTo(L,M):p>y?(e=U(L,M,N,Q,u,-p,t),r=U(G,H,V,W,u,-p,t),a.lineTo(e.cx+e.x01,e.cy+e.y01),p<w?a.arc(e.cx,e.cy,p,o(e.y01,e.x01),o(r.y01,r.x01),!t):(a.arc(e.cx,e.cy,p,o(e.y01,e.x01),o(e.y11,e.x11),!t),a.arc(0,0,u,o(e.cy+e.y11,e.cx+e.x11),o(r.cy+r.y11,r.cx+r.x11),t),a.arc(r.cx,r.cy,p,o(r.y11,r.x11),o(r.y01,r.x01),!t))):a.arc(0,0,u,T,R,t)}if(a.closePath(),n)return a=null,n+""||null}return i.centroid=function(){var n=(+l.apply(this,arguments)+ +h.apply(this,arguments))/2,d=(+v.apply(this,arguments)+ +A.apply(this,arguments))/2-an/2;return[F(d)*n,q(d)*n]},i.innerRadius=function(n){return arguments.length?(l=typeof n=="function"?n:j(+n),i):l},i.outerRadius=function(n){return arguments.length?(h=typeof n=="function"?n:j(+n),i):h},i.cornerRadius=function(n){return arguments.length?(I=typeof n=="function"?n:j(+n),i):I},i.padRadius=function(n){return arguments.length?(D=n==null?null:typeof n=="function"?n:j(+n),i):D},i.startAngle=function(n){return arguments.length?(v=typeof n=="function"?n:j(+n),i):v},i.endAngle=function(n){return arguments.length?(A=typeof n=="function"?n:j(+n),i):A},i.padAngle=function(n){return arguments.length?(z=typeof n=="function"?n:j(+n),i):z},i.context=function(n){return arguments.length?(a=n??null,i):a},i}export{hn as d};
+import{Y as ln,$ as an,a0 as F,a1 as q,a2 as j,a3 as un,a4 as y,a5 as tn,a6 as J,a7 as _,a8 as rn,a9 as o,aa as on,ab as sn,ac as fn}from"./mermaid.core-OUiCmXKB.js";function cn(l){return l.innerRadius}function yn(l){return l.outerRadius}function gn(l){return l.startAngle}function dn(l){return l.endAngle}function mn(l){return l&&l.padAngle}function pn(l,h,I,D,v,A,z,a){var O=I-l,i=D-h,n=z-v,d=a-A,u=d*O-n*i;if(!(u*u<y))return u=(n*(h-A)-d*(l-v))/u,[l+u*O,h+u*i]}function U(l,h,I,D,v,A,z){var a=l-I,O=h-D,i=(z?A:-A)/J(a*a+O*O),n=i*O,d=-i*a,u=l+n,s=h+d,f=I+n,c=D+d,B=(u+f)/2,t=(s+c)/2,m=f-u,g=c-s,R=m*m+g*g,T=v-A,P=u*c-f*s,S=(g<0?-1:1)*J(on(0,T*T*R-P*P)),Y=(P*g-m*S)/R,$=(-P*m-g*S)/R,w=(P*g+m*S)/R,p=(-P*m+g*S)/R,x=Y-B,e=$-t,r=w-B,C=p-t;return x*x+e*e>r*r+C*C&&(Y=w,$=p),{cx:Y,cy:$,x01:-n,y01:-d,x11:Y*(v/T-1),y11:$*(v/T-1)}}function hn(){var l=cn,h=yn,I=j(0),D=null,v=gn,A=dn,z=mn,a=null,O=ln(i);function i(){var n,d,u=+l.apply(this,arguments),s=+h.apply(this,arguments),f=v.apply(this,arguments)-un,c=A.apply(this,arguments)-un,B=rn(c-f),t=c>f;if(a||(a=n=O()),s<u&&(d=s,s=u,u=d),!(s>y))a.moveTo(0,0);else if(B>tn-y)a.moveTo(s*F(f),s*q(f)),a.arc(0,0,s,f,c,!t),u>y&&(a.moveTo(u*F(c),u*q(c)),a.arc(0,0,u,c,f,t));else{var m=f,g=c,R=f,T=c,P=B,S=B,Y=z.apply(this,arguments)/2,$=Y>y&&(D?+D.apply(this,arguments):J(u*u+s*s)),w=_(rn(s-u)/2,+I.apply(this,arguments)),p=w,x=w,e,r;if($>y){var C=sn($/u*q(Y)),K=sn($/s*q(Y));(P-=C*2)>y?(C*=t?1:-1,R+=C,T-=C):(P=0,R=T=(f+c)/2),(S-=K*2)>y?(K*=t?1:-1,m+=K,g-=K):(S=0,m=g=(f+c)/2)}var G=s*F(m),H=s*q(m),L=u*F(T),M=u*q(T);if(w>y){var N=s*F(g),Q=s*q(g),V=u*F(R),W=u*q(R),E;if(B<an)if(E=pn(G,H,V,W,N,Q,L,M)){var X=G-E[0],Z=H-E[1],b=N-E[0],k=Q-E[1],nn=1/q(fn((X*b+Z*k)/(J(X*X+Z*Z)*J(b*b+k*k)))/2),en=J(E[0]*E[0]+E[1]*E[1]);p=_(w,(u-en)/(nn-1)),x=_(w,(s-en)/(nn+1))}else p=x=0}S>y?x>y?(e=U(V,W,G,H,s,x,t),r=U(N,Q,L,M,s,x,t),a.moveTo(e.cx+e.x01,e.cy+e.y01),x<w?a.arc(e.cx,e.cy,x,o(e.y01,e.x01),o(r.y01,r.x01),!t):(a.arc(e.cx,e.cy,x,o(e.y01,e.x01),o(e.y11,e.x11),!t),a.arc(0,0,s,o(e.cy+e.y11,e.cx+e.x11),o(r.cy+r.y11,r.cx+r.x11),!t),a.arc(r.cx,r.cy,x,o(r.y11,r.x11),o(r.y01,r.x01),!t))):(a.moveTo(G,H),a.arc(0,0,s,m,g,!t)):a.moveTo(G,H),!(u>y)||!(P>y)?a.lineTo(L,M):p>y?(e=U(L,M,N,Q,u,-p,t),r=U(G,H,V,W,u,-p,t),a.lineTo(e.cx+e.x01,e.cy+e.y01),p<w?a.arc(e.cx,e.cy,p,o(e.y01,e.x01),o(r.y01,r.x01),!t):(a.arc(e.cx,e.cy,p,o(e.y01,e.x01),o(e.y11,e.x11),!t),a.arc(0,0,u,o(e.cy+e.y11,e.cx+e.x11),o(r.cy+r.y11,r.cx+r.x11),t),a.arc(r.cx,r.cy,p,o(r.y11,r.x11),o(r.y01,r.x01),!t))):a.arc(0,0,u,T,R,t)}if(a.closePath(),n)return a=null,n+""||null}return i.centroid=function(){var n=(+l.apply(this,arguments)+ +h.apply(this,arguments))/2,d=(+v.apply(this,arguments)+ +A.apply(this,arguments))/2-an/2;return[F(d)*n,q(d)*n]},i.innerRadius=function(n){return arguments.length?(l=typeof n=="function"?n:j(+n),i):l},i.outerRadius=function(n){return arguments.length?(h=typeof n=="function"?n:j(+n),i):h},i.cornerRadius=function(n){return arguments.length?(I=typeof n=="function"?n:j(+n),i):I},i.padRadius=function(n){return arguments.length?(D=n==null?null:typeof n=="function"?n:j(+n),i):D},i.startAngle=function(n){return arguments.length?(v=typeof n=="function"?n:j(+n),i):v},i.endAngle=function(n){return arguments.length?(A=typeof n=="function"?n:j(+n),i):A},i.padAngle=function(n){return arguments.length?(z=typeof n=="function"?n:j(+n),i):z},i.context=function(n){return arguments.length?(a=n??null,i):a},i}export{hn as d};