pilotswarm 0.5.46 → 0.5.48

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

@@ -47,6 +47,7 @@ import {
     selectModelPickerModal,
     selectNavigationError,
     selectProviderTable,
+    selectUsageSummary,
     selectReasoningEffortPickerModal,
     selectContextTierPickerModal,
     selectRenameSessionModal,
@@ -63,6 +64,8 @@ import {
     normalizeStoredLayoutAdjustments,
     normalizeStoredPinnedSessionIds,
     normalizeStoredSessionOrder,
+    computeFitWidthColumnLayout,
+    normalizeTableCellText,
 } from "pilotswarm/ui-core";
 import { useControllerSelector } from "./use-controller-state.js";
 
@@ -282,6 +285,31 @@ function normalizeProfileSettings(settings) {
     if (typeof candidate.themeId === "string" && candidate.themeId.trim()) {
         normalized.themeId = candidate.themeId.trim();
     }
+    if (typeof candidate.sessionDetailCollapsed === "boolean") {
+        normalized.sessionDetailCollapsed = candidate.sessionDetailCollapsed;
+    }
+    // The agent picker's per-person usage counts, which drive its DEFAULT
+    // "Most used" sort. This whitelist drops anything unlisted, and the store
+    // REPLACES the settings document rather than merging — so leaving this out
+    // meant the controller wrote a count and the portal's next save erased it,
+    // within a second, every time. The sort had nothing to sort by and nobody
+    // saw an error.
+    //
+    // Kept as a plain {agentName: count} map, bounded so a long-lived profile
+    // cannot grow without limit: counts must be finite positive numbers, and
+    // only the busiest names survive.
+    if (candidate.agentPickerUsage && typeof candidate.agentPickerUsage === "object"
+        && !Array.isArray(candidate.agentPickerUsage)) {
+        const usage = {};
+        for (const [name, count] of Object.entries(candidate.agentPickerUsage)) {
+            const n = Number(count);
+            if (typeof name === "string" && name && Number.isFinite(n) && n > 0) {
+                usage[name] = Math.min(Math.round(n), 1e6);
+            }
+        }
+        const kept = Object.entries(usage).sort((a, b) => b[1] - a[1]).slice(0, 200);
+        if (kept.length > 0) normalized.agentPickerUsage = Object.fromEntries(kept);
+    }
     if (typeof candidate.touchScale === "boolean") {
         normalized.touchScale = candidate.touchScale;
     }
@@ -397,6 +425,7 @@ function profileSettingsFromViewState(state, preservedOtherTouchScale = null, pr
     return normalizeProfileSettings({
         themeId: state.themeId,
         [touchScaleKey()]: state.touchScale,
+        sessionDetailCollapsed: state.sessionDetailCollapsed,
         sessionOwnerFilter: state.ownerFilter,
         layoutAdjustments: {
             paneAdjust: state.paneAdjust,
@@ -440,6 +469,16 @@ function profileSettingsFromViewState(state, preservedOtherTouchScale = null, pr
         ...(typeof preservedOtherTouchScale === "boolean"
             ? { [otherTouchScaleKey()]: preservedOtherTouchScale }
             : {}),
+        // State-owned (ui.agentPickerUsage), so the save effect, the poll's
+        // before/after comparisons and the defaults all build the SAME shape.
+        // A preserved ref here, refreshed only by the 5s poll, both lost the
+        // count to the next save and made the poll's comparison JSON differ
+        // from the save baseline forever — after which remote settings never
+        // applied again on that device.
+        ...(state.agentPickerUsage && typeof state.agentPickerUsage === "object"
+            && Object.keys(state.agentPickerUsage).length > 0
+            ? { agentPickerUsage: state.agentPickerUsage }
+            : {}),
     });
 }
 
@@ -447,6 +486,7 @@ function buildDefaultProfileSettingsFromState(state, preservedOtherTouchScale =
     return normalizeProfileSettings({
         themeId: state?.ui?.themeId,
         [touchScaleKey()]: state?.ui?.touchScale,
+        sessionDetailCollapsed: state?.ui?.sessionDetailCollapsed,
         // Derive the owner-filter default from the RESOLVED principal, never a
         // snapshot of state.sessions.ownerFilter — at mount that snapshot is
         // still {all:true} (principal not yet applied), and using it as the
@@ -541,6 +581,16 @@ function materializeProfileSettings(remoteSettings, defaults) {
             : (isNarrowViewport() && hasOwn(normalizedRemote, "touchScale")
                 ? { touchScale: normalizedRemote.touchScale }
                 : {})),
+        // Read back for the same reason as touchScale above: written but never
+        // merged means the fold state resets on every reload. No default here
+        // either — absent must stay absent so a poll cannot overwrite a toggle
+        // the person just made.
+        ...(hasOwn(normalizedRemote, "sessionDetailCollapsed")
+            ? { sessionDetailCollapsed: normalizedRemote.sessionDetailCollapsed }
+            : {}),
+        ...(hasOwn(normalizedRemote, "agentPickerUsage")
+            ? { agentPickerUsage: normalizedRemote.agentPickerUsage }
+            : {}),
     });
 }
 
@@ -596,31 +646,6 @@ const PORTAL_COLUMN_RESIZER_PX = 16;
  */
 const PORTAL_CANVAS_MIN_PX = 480;
 
-/**
- * Wide enough to OPEN the canvas by default on a first visit.
- *
- * Sessions and chat need roughly 224px + 500px to stay comfortable, and the
- * canvas wants PORTAL_CANVAS_MIN_PX beside them. 1440 clears that with room to
- * spare and is a real device width (a 14" MacBook, a 900p desktop), so the
- * common laptop gets a canvas and a small window does not get three cramped
- * columns.
- */
-const PORTAL_CANVAS_DEFAULT_MIN_VIEWPORT_PX = 1440;
-
-/**
- * Whether this profile has ever expressed a preference about the two columns.
- *
- * The width-based default must fire only in its absence: someone who CLOSED
- * the canvas has stored `{canvasOpen: false}`, which is a choice and reads
- * nothing like "unset". A legacy rightPaneMode counts too — it is the same
- * preference in the older shape.
- */
-function hasStoredDesktopPanes(settings) {
-    if (!settings || typeof settings !== "object") return false;
-    if (settings.desktopPanes && typeof settings.desktopPanes === "object") return true;
-    return settings.rightPaneMode === "canvas" || settings.rightPaneMode === "panes";
-}
-
 /**
  * The widths the two optional columns OPEN at, in pixels. 2:1 — the canvas is
  * the thing being looked at; diagnostics is a readout beside it.
@@ -2207,139 +2232,6 @@ function renderInlineMarkdown(source, theme, keyPrefix = "md") {
     });
 }
 
-function normalizeTableCellText(value = "") {
-    return String(value || "")
-        .replace(/\s+/g, " ")
-        .trim();
-}
-
-const FIT_WIDTH_FLEX_HEADER_KEYWORDS = [
-    "description",
-    "mechanism",
-    "details",
-    "notes",
-    "summary",
-    "message",
-    "comment",
-    "reason",
-    "body",
-    "content",
-    "explanation",
-    "rationale",
-    "one-liner",
-];
-
-const FIT_WIDTH_FLEX_MIN_MAX_LEN = 24;
-const FIT_WIDTH_RIGID_CHAR_CAP = 32;
-const FIT_WIDTH_MIN_RIGID_CHARS = 6;
-const FIT_WIDTH_FLEX_MIN_CHARS = 30;
-const FIT_WIDTH_FLEX_MAX_CHARS = 56;
-const FIT_WIDTH_FLEX_MIN_FRACTION = 0.4;
-const FIT_WIDTH_FLEX_TO_RIGID_RATIO = 1.4;
-const FIT_WIDTH_MIN_EXTRA_CHARS = 2;
-
-/**
- * Compute per-column layout for a fit-width markdown / chat table.
- *
- * Strategy:
- *   1. Measure max cell length and "wrappability" (cells with whitespace) per column.
- *   2. Identify a single "flex" column — long, prose-like, ideally with a
- *      header keyword like Description / Mechanism / Notes. This column
- *      absorbs overflow by wrapping aggressively.
- *   3. Give every other column a budget = clamp(maxLen + padding, MIN, RIGID_CAP),
- *      so rigid columns stay at their content-fit width even when one
- *      sibling column has hundreds of characters of prose.
- *   4. Give the flex column a bounded share of the rigid-column budget. A
- *      very long cell should wrap; it should not steal so much percentage
- *      width that compact columns like Count / Status collapse on phones.
- *   5. Return a minimum table width in ch so the wrapper can scroll
- *      horizontally rather than forcing all columns below readable size.
- *
- * Returns { widths: ["12.34%", ...], flexIndex: number, minWidth: "64ch" }
- * when a flex column is identified — the table renderer then forces
- * table-layout: fixed, adds an `is-flex-column` class to the chosen column,
- * and gives the table a readable minimum width. Returns null when no flex
- * column is found, in which case the renderer falls back to the browser's
- * auto-table-layout (which is already good for short / uniform tables).
- *
- * Background: the previous behavior used the browser's auto-table-layout
- * unconditionally. That works well when columns are uniform but is biased
- * toward wide columns when one column has prose hundreds of characters
- * long (e.g. a Mechanism / Description column) — auto-layout distributes
- * width proportional to (max-content − min-content), which lets the prose
- * column squeeze the rigid columns down to a few characters each.
- */
-function computeFitWidthColumnLayout(rows = []) {
-    const columnCount = Math.max(0, ...rows.map((row) => row.length));
-    if (columnCount <= 0) return null;
-
-    const headerRow = rows[0] || [];
-    const dataRowCount = Math.max(1, rows.length - 1);
-
-    const stats = Array.from({ length: columnCount }, () => ({
-        max: 0,
-        spaceCells: 0,
-    }));
-    for (let rowIndex = 0; rowIndex < rows.length; rowIndex += 1) {
-        const row = rows[rowIndex];
-        for (let columnIndex = 0; columnIndex < columnCount; columnIndex += 1) {
-            const text = normalizeTableCellText(row[columnIndex] || "");
-            if (text.length > stats[columnIndex].max) stats[columnIndex].max = text.length;
-            if (rowIndex > 0 && /\s/.test(text)) stats[columnIndex].spaceCells += 1;
-        }
-    }
-
-    let flexIndex = -1;
-    let flexScore = 0;
-    for (let columnIndex = 0; columnIndex < columnCount; columnIndex += 1) {
-        const stat = stats[columnIndex];
-        if (stat.max < FIT_WIDTH_FLEX_MIN_MAX_LEN) continue;
-        const spaceRatio = stat.spaceCells / dataRowCount;
-        if (spaceRatio < 0.4) continue;
-        const headerText = normalizeTableCellText(headerRow[columnIndex] || "").toLowerCase();
-        const headerBonus = FIT_WIDTH_FLEX_HEADER_KEYWORDS.some((keyword) => headerText.includes(keyword)) ? 60 : 0;
-        const score = stat.max + headerBonus;
-        if (score > flexScore) {
-            flexScore = score;
-            flexIndex = columnIndex;
-        }
-    }
-
-    if (flexIndex < 0) return null;
-
-    const rigidBudgets = stats.map((stat, columnIndex) => {
-        if (columnIndex === flexIndex) return 0;
-        return Math.max(FIT_WIDTH_MIN_RIGID_CHARS, Math.min(stat.max + 2, FIT_WIDTH_RIGID_CHAR_CAP));
-    });
-    const sumRigid = rigidBudgets.reduce((sum, value) => sum + value, 0);
-    const flexStat = stats[flexIndex];
-    const flexBudget = Math.max(
-        FIT_WIDTH_FLEX_MIN_CHARS,
-        Math.min(
-            flexStat.max * 0.45,
-            FIT_WIDTH_FLEX_MAX_CHARS,
-            Math.max(FIT_WIDTH_FLEX_MIN_CHARS, sumRigid * FIT_WIDTH_FLEX_TO_RIGID_RATIO),
-        ),
-    );
-    const budgets = rigidBudgets.map((value, columnIndex) => (
-        columnIndex === flexIndex ? flexBudget : value
-    ));
-
-    const totalBudget = budgets.reduce((sum, value) => sum + value, 0);
-    if (totalBudget > 0 && budgets[flexIndex] / totalBudget < FIT_WIDTH_FLEX_MIN_FRACTION) {
-        const sumRigid = totalBudget - budgets[flexIndex];
-        budgets[flexIndex] = sumRigid * (FIT_WIDTH_FLEX_MIN_FRACTION / (1 - FIT_WIDTH_FLEX_MIN_FRACTION));
-    }
-
-    const finalTotal = budgets.reduce((sum, value) => sum + value, 0);
-    if (!(finalTotal > 0)) return null;
-    return {
-        widths: budgets.map((value) => `${((value / finalTotal) * 100).toFixed(2)}%`),
-        flexIndex,
-        minWidth: `${Math.ceil(finalTotal + FIT_WIDTH_MIN_EXTRA_CHARS)}ch`,
-    };
-}
-
 function buildTableColumnLabels(headerRows = [], columnCount = 0) {
     return Array.from({ length: columnCount }, (_, columnIndex) => {
         const label = (Array.isArray(headerRows) ? headerRows : [])
@@ -4040,7 +3932,36 @@ function ScrollLinesPanel({ title, titleRight = null, color, focused, actions, l
  */
 const SESSION_DETAIL_NONE = "—";
 
-function SessionDetailBox({ session, childCount = 0, pause = null, controller = null }) {
+/**
+ * The wait sentence the detail box should show, given the status it is ALREADY
+ * showing. Pure, and exported so the agreement can be tested directly.
+ *
+ * `waitReason` is applied raw, but the status beside it is debounced — a change
+ * is held for 5s by mergeSessionRowVisualStatus because the 4s catalog poll
+ * (the CMS row) and the post-event detail sync (live orchestration) disagree
+ * mid-turn. Reading one through the hold and the other around it made the
+ * WAITING block blink in and out on every poll, and let the box read
+ * "(running)" with a WAITING row underneath it at the same time.
+ *
+ * So the sentence is shown only while the status on screen agrees there is
+ * something to wait for. A budget pause is not routed through here: it is
+ * authoritative on its own and always shows.
+ */
+export function visibleWaitReason(session, statusLabel) {
+    const reason = typeof session?.waitReason === "string" && session.waitReason.trim()
+        ? session.waitReason.trim()
+        : null;
+    if (!reason) return null;
+    const status = String(statusLabel || "");
+    // "waiting", and "waiting on 7" / "waiting on children" for a parent whose
+    // descendants are still going.
+    const waiting = status === "waiting"
+        || status.startsWith("waiting on")
+        || status === "input_required";
+    return waiting ? reason : null;
+}
+
+function SessionDetailBox({ session, childCount = 0, pause = null, controller = null, collapsed = false, onToggle = null }) {
     // 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
@@ -4104,9 +4025,19 @@ function SessionDetailBox({ session, childCount = 0, pause = null, controller =
     // the "Paused now" band shows, with a way through to the provider that
     // caused it. `waitReason` covers every OTHER kind of wait (a scheduled
     // one, an agent asking to sleep), which is a different fact and says so.
-    const waitReason = typeof session?.waitReason === "string" && session.waitReason.trim()
-        ? session.waitReason.trim()
-        : null;
+    //
+    // The block is gated on the DEBOUNCED status, not on waitReason alone.
+    // Without that gate the two halves of this box run on different clocks:
+    // the Updated row holds a status change for 5s (mergeSessionRowVisualStatus)
+    // while waitReason is applied raw, and mid-turn the two writers disagree —
+    // the CMS row still carries the sentence after the live orchestration has
+    // moved on, or the reverse. The result was a WAITING block blinking in and
+    // out on every 4s poll, and a box that could read "(running)" with a
+    // WAITING row under it at the same time.
+    //
+    // A budget pause is separate: it is authoritative on its own and is not
+    // derived from the session's status, so it always shows.
+    const waitReason = visibleWaitReason(session, statusSummary?.status);
     const pauseBlock = (!pause && !waitReason) ? null : React.createElement("div", {
         className: `ps-session-detail-pause${pause ? " is-paused" : ""}`,
     },
@@ -4128,7 +4059,60 @@ function SessionDetailBox({ session, childCount = 0, pause = null, controller =
             ).catch(() => {}),
         }, pause.provider ? `Open ${pause.provider}` : "Open providers and budgets") : null));
 
+    // Collapsed, the box is one line: the state you check constantly (how full
+    // the context is, when it last moved, whether it is stuck) without the ten
+    // rows you look up once. Expanding is a click, and the choice is a
+    // preference so it survives switching sessions and reloading.
+    if (collapsed) {
+        const marks = [];
+        if (context) {
+            marks.push(React.createElement("span", {
+                key: "context",
+                className: `ps-session-detail-mark${percent != null && percent >= 85 ? " is-hot" : percent != null && percent >= 70 ? " is-warm" : ""}`,
+            }, percent != null ? `${percent}%` : context));
+        }
+        if (statusSummary) {
+            marks.push(React.createElement("span", { key: "updated", className: "ps-session-detail-mark" },
+                `${statusSummary.relative} (${statusSummary.status})`));
+        }
+        // A stopped session is the one thing you must not have to expand to
+        // find out, so it keeps a marker in the collapsed line.
+        if (pause || waitReason) {
+            marks.push(React.createElement("span", {
+                key: "halt",
+                className: `ps-session-detail-mark${pause ? " is-paused" : ""}`,
+                title: pause ? pause.reason : waitReason,
+            }, pause ? "paused" : "waiting"));
+        }
+        return React.createElement("div", { className: "ps-session-detail-box is-collapsed" },
+            React.createElement("button", {
+                type: "button",
+                className: "ps-session-detail-summary",
+                "aria-expanded": false,
+                title: "Show session details",
+                onClick: onToggle,
+            },
+                React.createElement("span", { className: "ps-session-detail-twisty", "aria-hidden": "true" }, "▸"),
+                React.createElement("span", { className: "ps-session-detail-summary-title" },
+                    session?.title || SESSION_DETAIL_NONE),
+                React.createElement("span", { className: "ps-session-detail-marks" }, marks)),
+            // A stopped session keeps its whole block, not just a marker. The
+            // fold is for reference detail you look up once — id, owner, agent.
+            // Why the session is stopped, and the way through to the surface
+            // that can unstop it, is the one thing you need WITHOUT going
+            // looking for it, and folding it away hid it behind a click at the
+            // exact moment it mattered.
+            pauseBlock);
+    }
+
     return React.createElement("div", { className: "ps-session-detail-box" },
+        React.createElement("button", {
+            type: "button",
+            className: "ps-session-detail-collapse",
+            "aria-expanded": true,
+            title: "Hide session details",
+            onClick: onToggle,
+        }, React.createElement("span", { "aria-hidden": "true" }, "▾"), " Less"),
         // 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.
@@ -4435,76 +4419,226 @@ function useStableValue(value) {
 }
 
 /**
- * Vertical-primary touch scrolling with an explicit horizontal opt-in.
+ * One axis per gesture: a touch drag scrolls the session list up/down OR
+ * left/right, never both.
  *
  * The session list has `width: max-content` rows, so it overflows sideways
- * whenever a title is long. Declaring `touch-action: pan-x pan-y` told the
- * browser both axes were equally on offer, and on a phone a swipe is never
- * perfectly vertical — so scrolling down kept sliding the list sideways.
+ * whenever a title is long. With both axes on offer a swipe is never perfectly
+ * vertical, so scrolling down kept sliding the list sideways too.
+ *
+ * This used to hand the vertical case back to the browser (`touch-action:
+ * pan-y`) and only drive horizontal itself. That relied on the browser to
+ * refuse the sideways component, and it has two problems:
  *
- * The fix is to give the browser ONE axis (`touch-action: pan-y`, set in CSS,
- * which keeps native vertical momentum) and drive horizontal ourselves, only
- * for a gesture that is unambiguously sideways. Once a gesture commits to an
- * axis it keeps it until the finger lifts: to scroll across you stop and make
- * a deliberate left/right swipe, which is exactly the intent.
+ *   - What counts as "vertical enough" for `pan-y` is the browser's call, not
+ *     ours, and engines disagree. The guarantee was only as good as whichever
+ *     one the reader happened to be using.
+ *   - A drag near 45° fell in the gap: we committed it to vertical and stepped
+ *     aside, and the browser then declined to pan it at all. The list simply
+ *     did not move, which reads as broken rather than as a locked axis.
+ *
+ * So both axes are driven here. Every gesture past the slop threshold commits
+ * to exactly one axis and always moves it — no dead zone, and no engine gets a
+ * vote on the diagonal. Vertical stays the default: sideways has to be asked
+ * for, by a drag that beats vertical by PAN_HORIZONTAL_RATIO.
+ *
+ * Driving the scroll ourselves means we also own the part the browser was
+ * doing for free, so a flick decays under `releaseFling` instead of stopping
+ * dead under the finger. CSS keeps `touch-action: pan-y` as a floor: if these
+ * listeners ever fail to attach, the list still scrolls vertically the native
+ * way rather than becoming inert.
  */
 const PAN_COMMIT_PX = 10;      // ignore the first few px — every swipe starts noisy
 const PAN_HORIZONTAL_RATIO = 1.6;   // |dx| must beat |dy| by this much to go sideways
+const FLING_MIN_VELOCITY = 0.05;    // px/ms below which a lift is a stop, not a flick
+const FLING_FRICTION = 0.95;        // per frame; ~0.35s of glide from a brisk flick
+const FLING_MAX_VELOCITY = 4;       // px/ms ceiling, so a fast flick stays catchable
+
+/**
+ * Which axis does this gesture own? Pure, and exported so the rule can be
+ * tested without a browser — the bug it replaces was a gesture that matched
+ * NEITHER branch and therefore scrolled nothing.
+ *
+ * Returns null while the drag is still inside the slop radius, then "x" or
+ * "y" — never null again, and never both. Every gesture that gets past the
+ * threshold moves something.
+ */
+export function commitPanAxis(dx, dy) {
+    if (Math.abs(dx) < PAN_COMMIT_PX && Math.abs(dy) < PAN_COMMIT_PX) return null;
+    // Ties, and anything close to a tie, go to vertical. Vertical is the
+    // primary axis; sideways has to be asked for.
+    return Math.abs(dx) > Math.abs(dy) * PAN_HORIZONTAL_RATIO ? "x" : "y";
+}
 
-function useHorizontalPanOptIn(ref) {
+function useAxisLockedPan(ref, enabled = true) {
     React.useEffect(() => {
         const el = ref.current;
-        if (!el) return undefined;
+        // Coarse pointers only. On a touchscreen LAPTOP the pointer is fine,
+        // so drag-to-reorder is armed on the same rows — and because this hook
+        // prevents native scrolling, the browser never fires the pointercancel
+        // that would otherwise end that drag. Both would then own one finger:
+        // a ghost row appears, the list pans under it, and the drop resolves
+        // against a list that moved. Mirrors the gate reorder uses the other
+        // way round; a fine pointer scrolls natively under the pan-y CSS.
+        if (!el || !enabled) return undefined;
 
         let startX = 0;
         let startY = 0;
         let lastX = 0;
-        let axis = null;   // null = undecided, "x" | "y" = committed for this gesture
+        let lastY = 0;
+        let lastT = 0;
+        let velocity = 0;   // px/ms along the committed axis, sign follows the finger
+        let axis = null;    // null = undecided, "x" | "y" = committed, "done" = not ours
+        let flingFrame = null;
+        let swallowClick = false;
+
+        const stopFling = () => {
+            if (flingFrame !== null) {
+                cancelAnimationFrame(flingFrame);
+                flingFrame = null;
+            }
+        };
+
+        const now = () => (typeof performance !== "undefined" ? performance.now() : Date.now());
+        const canScroll = (which) => (which === "x"
+            ? el.scrollWidth > el.clientWidth + 1
+            : el.scrollHeight > el.clientHeight + 1);
 
         const onTouchStart = (event) => {
-            if (event.touches.length !== 1) { axis = "y"; return; }
-            const touch = event.touches[0];
+            // A tap that lands while the list is still gliding is "stop", not
+            // "open whatever is passing under my finger". Native momentum never
+            // opened a row on the arresting tap; ours must not either.
+            swallowClick = flingFrame !== null;
+            stopFling();
+            // targetTouches, not touches: a thumb resting elsewhere on the page
+            // is not part of this gesture. Two fingers HERE is a pinch.
+            if (event.targetTouches.length !== 1) { axis = "done"; return; }
+            const touch = event.targetTouches[0];
             startX = lastX = touch.clientX;
-            startY = touch.clientY;
+            startY = lastY = touch.clientY;
+            lastT = now();
+            velocity = 0;
             axis = null;
         };
 
         const onTouchMove = (event) => {
-            if (axis === "y" || event.touches.length !== 1) return;
-            const touch = event.touches[0];
+            if (axis === "done" || event.targetTouches.length !== 1) return;
+            const touch = event.targetTouches[0];
             const dx = touch.clientX - startX;
             const dy = touch.clientY - startY;
 
             if (axis === null) {
-                if (Math.abs(dx) < PAN_COMMIT_PX && Math.abs(dy) < PAN_COMMIT_PX) return;
-                // Ties, and anything close to a tie, go to vertical. Vertical is
-                // the primary axis; sideways has to be asked for.
-                axis = Math.abs(dx) > Math.abs(dy) * PAN_HORIZONTAL_RATIO ? "x" : "y";
+                // Decide BEFORE preventing. Preventing a touchmove prevents
+                // scrolling for every later move of that touch, so a hand-off
+                // after the commit cannot hand anything back — the browser has
+                // already been told no.
+                //
+                // Vertical is the browser's own axis here (touch-action:
+                // pan-y), and it has to be claimed from the FIRST move or not
+                // at all: the browser's slop is smaller than ours (5-8px
+                // against 10), so an un-prevented move past it starts a native
+                // pan-y scroll and marks the rest of the gesture
+                // non-cancelable — our preventDefault then no-ops while
+                // scrollTop -= step still runs, and vertical moved at double
+                // speed with two flings on release. So a list with vertical
+                // overflow is claimed now, inside the slop.
+                //
+                // A list WITHOUT vertical overflow leaves the early moves
+                // alone. The browser only ever takes the vertical under pan-y,
+                // so a sideways commit can still claim the gesture for the
+                // list's horizontal overflow (a short list of long titles),
+                // and a vertical commit hands the pane its scroll untouched.
+                const ownsVertical = canScroll("y");
+                if (!ownsVertical && !canScroll("x")) { axis = "done"; return; }
+                if (ownsVertical && event.cancelable) event.preventDefault();
+                axis = commitPanAxis(dx, dy);
+                if (axis === null) return;
+                // A list that cannot scroll on the committed axis is not ours
+                // to pan; and if the browser has already begun its own scroll
+                // (the event is no longer cancelable), the gesture is its.
+                if (!canScroll(axis) || !event.cancelable) { axis = "done"; return; }
+                // Measure from here, so the slop we ignored is not also applied.
                 lastX = touch.clientX;
-                if (axis === "y") return;
+                lastY = touch.clientY;
+                lastT = now();
             }
 
-            // Committed horizontal: the browser is not panning this axis, so we
-            // do it. preventDefault stops the gesture also scrolling an
-            // ancestor sideways.
-            el.scrollLeft -= touch.clientX - lastX;
-            lastX = touch.clientX;
+            // Ours: stop the browser doing it as well. A repeat of the
+            // first-move prevent for a list that owns vertical; the first
+            // prevent of the gesture for a sideways pan on a short list.
             if (event.cancelable) event.preventDefault();
+
+            const stepX = touch.clientX - lastX;
+            const stepY = touch.clientY - lastY;
+            const t = now();
+            const elapsed = Math.max(1, t - lastT);
+            const step = axis === "x" ? stepX : stepY;
+
+            if (axis === "x") el.scrollLeft -= stepX;
+            else el.scrollTop -= stepY;
+
+            // Exponential smoothing: one jittery sample should not decide the
+            // whole flick, and a finger that stops before lifting should decay
+            // to zero rather than fling on a stale reading.
+            const sample = Math.max(-FLING_MAX_VELOCITY, Math.min(FLING_MAX_VELOCITY, step / elapsed));
+            velocity = velocity * 0.7 + sample * 0.3;
+
+            lastX = touch.clientX;
+            lastY = touch.clientY;
+            lastT = t;
         };
 
-        const onTouchEnd = () => { axis = null; };
+        const releaseFling = (committed) => {
+            if (Math.abs(velocity) < FLING_MIN_VELOCITY) return;
+            let v = velocity;
+            const tick = () => {
+                v *= FLING_FRICTION;
+                if (Math.abs(v) < FLING_MIN_VELOCITY) { flingFrame = null; return; }
+                const before = committed === "x" ? el.scrollLeft : el.scrollTop;
+                if (committed === "x") el.scrollLeft -= v * 16;
+                else el.scrollTop -= v * 16;
+                const after = committed === "x" ? el.scrollLeft : el.scrollTop;
+                // Hit an end stop — no point animating against it.
+                if (after === before) { flingFrame = null; return; }
+                flingFrame = requestAnimationFrame(tick);
+            };
+            flingFrame = requestAnimationFrame(tick);
+        };
+
+        const onTouchEnd = (event) => {
+            // Lifting ONE finger of a pinch does not hand the survivor a pan:
+            // its start point belongs to a different gesture, and the commit
+            // would land on a large bogus delta. Stay out until all lift.
+            if (event.targetTouches.length > 0) { axis = "done"; return; }
+            const committed = axis;
+            axis = null;
+            if (committed === "x" || committed === "y") releaseFling(committed);
+            velocity = 0;
+        };
+
+        const onTouchCancel = () => { axis = null; velocity = 0; stopFling(); };
+
+        const onClickCapture = (event) => {
+            if (!swallowClick) return;
+            swallowClick = false;
+            event.preventDefault();
+            event.stopPropagation();
+        };
 
         el.addEventListener("touchstart", onTouchStart, { passive: true });
         el.addEventListener("touchmove", onTouchMove, { passive: false });
         el.addEventListener("touchend", onTouchEnd, { passive: true });
-        el.addEventListener("touchcancel", onTouchEnd, { passive: true });
+        el.addEventListener("touchcancel", onTouchCancel, { passive: true });
+        el.addEventListener("click", onClickCapture, true);
         return () => {
+            stopFling();
             el.removeEventListener("touchstart", onTouchStart);
             el.removeEventListener("touchmove", onTouchMove);
             el.removeEventListener("touchend", onTouchEnd);
-            el.removeEventListener("touchcancel", onTouchEnd);
+            el.removeEventListener("touchcancel", onTouchCancel);
+            el.removeEventListener("click", onClickCapture, true);
         };
-    }, [ref]);
+    }, [ref, enabled]);
 }
 
 function SessionPane({ controller, actions = null, panelClassName = "", structuredRows = false, showDetailBox = null }) {
@@ -4515,13 +4649,21 @@ function SessionPane({ controller, actions = null, panelClassName = "", structur
     const isMobilePane = String(panelClassName).includes("ps-mobile-session-pane");
     // Vertical is the primary scroll axis; sideways takes a deliberate swipe.
     const sessionListRef = React.useRef(null);
-    useHorizontalPanOptIn(sessionListRef);
     // Selection reverts to plain taps wherever the primary input is a finger:
     // the mobile pane, and the chat-focus overlay's list on a phone. Matches
     // the `(pointer: fine)` guard on touch-action in the stylesheet.
-    const touchInput = isMobilePane || useCoarsePointer();
+    // Called unconditionally — `isMobilePane || useCoarsePointer()` skipped
+    // the hook whenever the left side was true, which is a hooks-order bug
+    // waiting for panelClassName to change under a mounted pane.
+    const coarsePointer = useCoarsePointer();
+    const touchInput = isMobilePane || coarsePointer;
+    useAxisLockedPan(sessionListRef, touchInput);
     const themeId = useControllerSelector(controller, (state) => state.ui.themeId);
     const theme = getTheme(themeId);
+    const detailCollapsed = useControllerSelector(
+        controller,
+        (state) => Boolean(state.ui.sessionDetailCollapsed),
+    );
     const sessionButtonRefs = React.useRef(new Map());
     const viewState = useControllerSelector(controller, (state) => ({
         branding: state.branding,
@@ -5318,6 +5460,11 @@ function SessionPane({ controller, actions = null, panelClassName = "", structur
             // change it. The row already carries the joined pause record.
             pause: activeRow?.pause || null,
             controller,
+            collapsed: detailCollapsed,
+            onToggle: () => controller.dispatch({
+                type: "ui/sessionDetailCollapsed",
+                collapsed: !detailCollapsed,
+            }),
         })
         : null),
     (manageOpen && activeSession && !activeSession.isGroup)
@@ -5917,7 +6064,7 @@ function SessionModifyModal({ controller, sessionId, initialTitle, currentModel,
                                 : value === "shared_read" ? "everyone here can view"
                                     : "everyone here can view and send"))),
                 React.createElement("div", { className: "ps-share-section-label" }, "Special access"),
-                React.createElement("div", { className: "ps-share-section-sub" }, "Give specific people more than the general level. A person's grant wins over general access."),
+                React.createElement("div", { className: "ps-share-section-sub" }, "Give specific people more than the general level. A grant can only raise someone's access above it, never lower it — to restrict everyone, lower the general level."),
                 draftShares.length === 0
                     ? React.createElement("div", { className: "ps-share-empty" }, "No individual grants — everyone has the general access above.")
                     : draftShares.map((row) => React.createElement("div", { key: `${row.provider}/${row.subject}`, className: "ps-share-grant-row" },
@@ -7185,6 +7332,12 @@ function CanvasFrame({ controller, sessionId, slot = 1, latestRev, zoom, visible
  * maximized / onToggleMaximized are the phone's full-screen state, owned by
  * MobileCanvasLayer. Passing no handler simply omits the button.
  */
+// Match the session-list settle: the canvas follows the selection, and the
+// selection is a keypress away from changing again. Slightly longer than
+// SESSION_NAV_SETTLE_MS (140) so the snapshot rides just behind the load that
+// invalidates it, rather than racing it.
+const CANVAS_SNAPSHOT_SETTLE_MS = 160;
+
 function CanvasPane({ controller, mobile = false, visible = true, focusOnPromote = false, maximized = false, onToggleMaximized = null }) {
     const view = useControllerSelector(controller, selectCanvasView, shallowEqualObject);
     const zoom = useControllerSelector(controller, (state) => Number(state.files.htmlZoom) || 1);
@@ -7193,11 +7346,33 @@ function CanvasPane({ controller, mobile = false, visible = true, focusOnPromote
     }, [controller]);
 
     // Belt to the selection-burst braces: a pane mounted before the burst's
-    // snapshot resolves (deep link straight into canvas mode) fetches it here;
-    // the memo makes the duplicate call free.
+    // snapshot resolves (deep link straight into canvas mode) fetches it here.
+    //
+    // Gated on `visible`, and that gate is load-bearing. This pane is MOUNTED
+    // even when the canvas is closed — hidden with inert + an off-screen
+    // transform rather than unmounted, so re-showing it does not reload the
+    // frame. So this effect runs on every selection change whether or not
+    // anyone can see the canvas, and the memo it leans on is only free for a
+    // REPEAT of the same session: each new one is a real fetch.
+    //
+    // Arrowing down a session list is a selection change per keypress. That
+    // turned a 30-row traversal into 30 `events-before` round trips against a
+    // pane nobody had opened — free on a stub, the whole network latency on a
+    // remote deployment, which is exactly what session-list-perf guards.
+    // A hidden canvas needs no snapshot; becoming visible re-runs this.
+    //
+    // And it waits for the selection to SETTLE. loadSession already debounces
+    // its own burst behind SESSION_NAV_SETTLE_MS for exactly this reason —
+    // this effect keyed straight off the selection and so re-armed the cost
+    // the debounce had just removed. Arrowing 30 rows fired 30 snapshot
+    // fetches; the cleanup cancels every one but the row you stop on.
     React.useEffect(() => {
-        if (view.sessionId) controller.ensureCanvasSnapshot(view.sessionId).catch(() => {});
-    }, [controller, view.sessionId]);
+        if (!visible || !view.sessionId) return undefined;
+        const timer = setTimeout(() => {
+            controller.ensureCanvasSnapshot(view.sessionId).catch(() => {});
+        }, CANVAS_SNAPSHOT_SETTLE_MS);
+        return () => clearTimeout(timer);
+    }, [controller, view.sessionId, visible]);
 
     const zenOn = useControllerSelector(controller, (s) => s?.ui?.canvasZen === true);
     const [shareOpen, setShareOpen] = React.useState(false);
@@ -8688,6 +8863,19 @@ function Toolbar({ controller, mobile, canvasPaneOpen = false, onToggleCanvasPan
         setHeaderSlot(!mobile ? document.getElementById("ps-header-toolbar-slot") : null);
     }, [mobile]);
     const adminVisible = useControllerSelector(controller, (state) => Boolean(state.admin?.visible));
+    // The same panel is Settings for a plain user — their own providers,
+    // default and packages — and the Admin Console for an admin, who also
+    // gets shared providers, workers and every user's packages. Calling it
+    // "Admin console" for someone who then finds nothing administrative in
+    // it reads as something missing or broken.
+    // Two sources, because they arrive at different times: the auth context
+    // carries the role from sign-in, before the console has ever opened; the
+    // admin profile carries it once it has. Reading only the profile left an
+    // admin's toolbar saying "Settings" until the first open.
+    const isAdminUser = useControllerSelector(controller, (state) => Boolean(
+        state.admin?.profile?.isAdmin || state.auth?.authorization?.role === "admin",
+    ));
+    const consoleName = isAdminUser ? "admin console" : "settings";
     const budgetOpen = useControllerSelector(controller, (state) => Boolean(state.ui?.budgetOpen));
     const canvasView = useControllerSelector(controller, selectCanvasView, shallowEqualObject);
     const diagnosticsOpen = useControllerSelector(controller, (s) => s?.ui?.diagnosticsOpen === true);
@@ -8790,10 +8978,21 @@ function Toolbar({ controller, mobile, canvasPaneOpen = false, onToggleCanvasPan
         ...(mobile ? [] : [{
             key: "admin",
             icon: React.createElement(CogGlyph),
-            label: adminVisible ? "Close admin console" : "Admin console",
+            label: adminVisible ? `Close ${consoleName}` : (isAdminUser ? "Admin console" : "Settings"),
             onClick: () => controller.handleCommand(adminVisible ? UI_COMMANDS.CLOSE_ADMIN_CONSOLE : UI_COMMANDS.OPEN_ADMIN_CONSOLE).catch(() => {}),
             active: adminVisible,
         }]),
+        // The Workspace MODE button. Budget and the Admin Console replace the
+        // workspace; this is the way back, as a destination of its own rather
+        // than "close whatever is open". Desktop only — the phone has no
+        // admin console and its view cycle already sits in the header.
+        ...(mobile ? [] : [{
+            key: "workspace",
+            icon: React.createElement(MainLayoutGlyph),
+            label: "Workspace — sessions, chat and panels",
+            onClick: () => controller.handleCommand(UI_COMMANDS.OPEN_WORKSPACE).catch(() => {}),
+            active: !adminVisible && !budgetOpen,
+        }]),
     ];
 
     const renderButton = (def) => {
@@ -8863,17 +9062,27 @@ function Toolbar({ controller, mobile, canvasPaneOpen = false, onToggleCanvasPan
         );
     }
 
-    // Two groups. Budget, Diagnostics and the admin console are TOOLS — they
-    // act on the app rather than on the conversation — so they sit apart from
-    // the session controls, hard right. Everything else keeps its order.
-    const RIGHT_GROUP = new Set(["budget", "diagnostics", "admin"]);
+    // Two kinds of button, two clusters (desktop only):
+    //
+    //   left  : the workspace's — new, filter, canvas, diagnostics
+    //   right : modes [workspace, budget, admin] │ theme · sign-out
+    //
+    // The whole left cluster belongs to the workspace — new session, filter,
+    // canvas and diagnostics all act on it — so it exists only in Workspace
+    // mode. Budget and the Admin Console replace the workspace; nothing on
+    // the left applies there. Modes are exclusive (the controller closes one
+    // when the other opens) and the Workspace button is the way back.
+    const mode = adminVisible ? "admin" : (budgetOpen ? "budget" : "workspace");
+    const ACTIONS = ["new", "filter"];
+    const PANELS = ["canvas", "diagnostics"];
+    const MODES = ["workspace", "budget", "admin"];
 
     // While the canvas is full screen, ANY other button first drops full
     // screen and then does its own job. Pressing Filter and watching nothing
     // happen behind a canvas — or watching a panel open where you cannot see
     // it — is the confusing half of every full-screen mode. The Canvas toggle
-    // is exempt: it already means "put the canvas away", and closing drops the
-    // flag in the reducer.
+    // is exempt: it already means "put the canvas away", and closing drops
+    // the flag in the reducer.
     const withRestore = (def) => (!canvasMaximized || def.key === "canvas" ? def : {
         ...def,
         onClick: (...args) => {
@@ -8881,21 +9090,35 @@ function Toolbar({ controller, mobile, canvasPaneOpen = false, onToggleCanvasPan
             return def.onClick?.(...args);
         },
     });
+    const pick = (keys) => keys
+        .map((key) => buttonDefs.find((d) => d.key === key))
+        .filter(Boolean)
+        .map(withRestore)
+        .map(renderButton);
+    const divider = (key) => React.createElement("span", { key, className: "ps-toolbar-divider", "aria-hidden": "true" });
+
+    // One run, no bar: all four act on the workspace.
+    const leftCluster = mode === "workspace"
+        ? [...pick(ACTIONS), ...pick(PANELS)]
+        : [];
+    const rightCluster = [
+        ...pick(MODES),
+        divider("mode-divider"),
+        ...pick(["theme"]),
+    ];
 
-    const leftButtons = buttonDefs.filter((d) => !RIGHT_GROUP.has(d.key)).map(withRestore);
-    const rightButtons = buttonDefs.filter((d) => RIGHT_GROUP.has(d.key)).map(withRestore);
     const toolbar = React.createElement("div", { className: "ps-toolbar" },
         // Three columns: left rail | main controls | right rail. Full-screen
         // canvas uses the otherwise-empty left rail for the normal actions so
         // they do not crowd the canvas metadata and controls across the top.
         React.createElement("div", { className: "ps-toolbar-side is-left" },
-            canvasMaximized ? leftButtons.map(renderButton) : null),
+            canvasMaximized ? leftCluster : null),
         React.createElement("div", { className: "ps-toolbar-actions" },
-            canvasMaximized ? null : leftButtons.map(renderButton)),
+            canvasMaximized ? null : leftCluster),
         React.createElement("div", { className: "ps-toolbar-side is-right" },
             // The portal header parks its version/status meta here, LEFT of
             // the tool buttons, and its sign-out glyph in the slot after
-            // them — one right-aligned cluster: meta · bug · settings · out.
+            // them — one right-aligned cluster: meta · mode · theme · out.
             React.createElement("span", { className: "ps-toolbar-meta-slot", id: "ps-toolbar-meta-slot" }),
             // While the canvas is full screen its header controls (rev, zoom,
             // zen, restore) portal INTO this slot from CanvasPane — zoom state
@@ -8907,9 +9130,7 @@ function Toolbar({ controller, mobile, canvasPaneOpen = false, onToggleCanvasPan
             canvasMaximized
                 ? React.createElement("span", { className: "ps-toolbar-divider", "aria-hidden": "true" })
                 : null,
-            rightButtons.length
-                ? React.createElement("div", { className: "ps-toolbar-actions is-tools" }, rightButtons.map(renderButton))
-                : null,
+            React.createElement("div", { className: "ps-toolbar-actions is-tools" }, rightCluster),
             React.createElement("span", { className: "ps-toolbar-signout-slot", id: "ps-toolbar-signout-slot" })),
     );
 
@@ -9380,7 +9601,12 @@ function ChatRightResizeHandle({ controller, target, adjust = 0 }) {
             const st = dragStateRef.current;
             if (!st) return;
             // Pointer right = chat grows = the neighbour gives up the pixels.
-            controller.dispatch({ type: actionType, [key]: st.startAdjust - (event.clientX - st.startX) });
+            // Pointer left stops where chat reaches its floor: past that the
+            // grid cannot give the right block more pixels, and an adjust
+            // that keeps climbing anyway only inflates the stored width so
+            // the next drag has to unwind it before anything moves.
+            const next = st.startAdjust - (event.clientX - st.startX);
+            controller.dispatch({ type: actionType, [key]: Math.min(next, st.maxAdjust) });
         };
         const onUp = () => {
             const st = dragStateRef.current;
@@ -9408,7 +9634,18 @@ function ChatRightResizeHandle({ controller, target, adjust = 0 }) {
             if (event.button !== 0) return;
             event.preventDefault();
             capturePointerForDrag(event);
-            dragStateRef.current = { startX: event.clientX, startAdjust: Number(adjust) || 0 };
+            // How far the right block may still grow: exactly what chat can
+            // give before it reaches its floor. Measured at drag start from
+            // the chat slot (the main grid's last column), the same element
+            // the grid template protects with its own minimum.
+            const chatSlot = document.querySelector(".ps-workspace-main-grid > .ps-workspace-pane-slot:last-child");
+            const chatWidth = chatSlot ? chatSlot.getBoundingClientRect().width : Number.POSITIVE_INFINITY;
+            const startAdjust = Number(adjust) || 0;
+            dragStateRef.current = {
+                startX: event.clientX,
+                startAdjust,
+                maxAdjust: startAdjust + Math.max(0, chatWidth - PORTAL_MIN_CHAT_COLUMN_PX),
+            };
             setDragging(true);
             document.body.classList.add("is-resizing-pane-x");
         },
@@ -9445,7 +9682,7 @@ function DiagnosticsSplitResizeHandle({ controller, splitAdjust = 0 }) {
             // real space between the two panes. Its bounds are asymmetric:
             // -column/2 makes Inspector 0px; column/2-divider makes Activity
             // 0px. Using one symmetric half-range left an 8-9px pane remnant.
-            const next = clamp(st.start + (event.clientY - st.startY), st.minAdjust, st.maxAdjust);
+            const next = clampNumber(st.start + (event.clientY - st.startY), st.minAdjust, st.maxAdjust);
             controller.dispatch({ type: "ui/diagnosticsSplitAdjust", diagnosticsSplitAdjust: next });
         };
         const onUp = () => {
@@ -9478,7 +9715,7 @@ function DiagnosticsSplitResizeHandle({ controller, splitAdjust = 0 }) {
             const { minAdjust, maxAdjust } = getDiagnosticsSplitAdjustBounds(columnHeight, dividerHeight);
             dragStateRef.current = {
                 startY: event.clientY,
-                start: clamp(Number(splitAdjust) || 0, minAdjust, maxAdjust),
+                start: clampNumber(Number(splitAdjust) || 0, minAdjust, maxAdjust),
                 minAdjust,
                 maxAdjust,
             };
@@ -9495,7 +9732,7 @@ function DiagnosticsSplitResizeHandle({ controller, splitAdjust = 0 }) {
             const { minAdjust, maxAdjust } = getDiagnosticsSplitAdjustBounds(columnHeight, dividerHeight);
             controller.dispatch({
                 type: "ui/diagnosticsSplitAdjust",
-                diagnosticsSplitAdjust: clamp(
+                diagnosticsSplitAdjust: clampNumber(
                     (Number(splitAdjust) || 0) + (event.key === "ArrowDown" ? dividerHeight : -dividerHeight),
                     minAdjust,
                     maxAdjust,
@@ -9788,7 +10025,25 @@ function budgetCellEl(cell) {
         }, `/ ${cell.quotaLabel}`));
 }
 
-/** What a cell says on hover: the period, its reset, and whether it is capped. */
+/**
+ * The four parts of a period cell's used figure, in one cell of the split
+ * row under a SELECTED provider or model row. A limit is on the total, so
+ * the table's cell stays the one number a limit is about; this row says
+ * what went into it, column by column.
+ */
+function budgetSplitCellEl(cell) {
+    if (!cell.split) return React.createElement("span", { className: "ps-budget-split" }, "—");
+    // Top row: the two parts that add up to the figure. Bottom row: what
+    // the input was made of — served from the cache, written to it.
+    const cacheTitle = "Parts of the input, not additions to it: the total is input + output.";
+    return React.createElement("span", { className: "ps-budget-split" },
+        React.createElement("span", null, "in ", formatCompactNumber(cell.split.input)),
+        React.createElement("span", null, "out ", formatCompactNumber(cell.split.output)),
+        React.createElement("span", { title: cacheTitle }, "cache r ", formatCompactNumber(cell.split.cacheRead)),
+        React.createElement("span", { title: cacheTitle }, "w ", formatCompactNumber(cell.split.cacheWrite)));
+}
+
+/** What a cell says on hover: the period, its reset, whether it is capped, and what the figure is made of. */
 function budgetCellTitle(row, column, cell) {
     const who = row.kind === "model" ? `${row.providerName} · ${row.label}` : row.providerName;
     const cap = cell.uncapped
@@ -9799,7 +10054,8 @@ function budgetCellTitle(row, column, cell) {
     const blocked = cell.providerExhausted
         ? " The provider's own limit for this period is spent, so nothing runs against it whatever your share says."
         : "";
-    return `${who} · ${column.label} — ${cap}. It ${budgetResetPhrase(cell.resetsLabel)}.${blocked}`;
+    const split = cell.splitText ? ` Made of ${cell.splitText}.` : "";
+    return `${who} · ${column.label} — ${cap}. It ${budgetResetPhrase(cell.resetsLabel)}.${blocked}${split}`;
 }
 
 /**
@@ -9904,6 +10160,19 @@ function ProviderTable({ controller, view, defaults = null }) {
         title: budgetCellTitle(row, column, row.cells[column.id]),
     }, budgetCellEl(row.cells[column.id]))));
 
+    // Under a selected row: what each of its three figures is made of.
+    const splitRow = (row) => React.createElement("tr", {
+        key: `${row.key}:split`,
+        className: `ps-budget-grid-split${row.kind === "model" ? " is-model" : ""}`,
+        "aria-label": `What ${row.kind === "model" ? row.label : row.providerName} spent, by kind of token`,
+    },
+    // Empty on purpose: the name column keeps the split cells under their
+    // period columns; the numbers explain themselves.
+    React.createElement("td", { className: "ps-budget-grid-split-name" }),
+    view.columns.map((column) => React.createElement("td", {
+        key: column.id, className: "ps-budget-grid-num is-split", "data-period": column.label,
+    }, budgetSplitCellEl(row.cells[column.id]))));
+
     return React.createElement(React.Fragment, null,
         React.createElement("div", { className: "ps-budget-table-head" },
             React.createElement("span", { className: "ps-budget-label" },
@@ -9936,7 +10205,8 @@ function ProviderTable({ controller, view, defaults = null }) {
                         view.columns.map((column) => React.createElement("th", {
                             key: column.id, className: "ps-budget-grid-h is-num", scope: "col",
                         }, column.label)))),
-                React.createElement("tbody", null, view.rows.map(bodyRow))));
+                // A selected row is followed by its split row.
+                React.createElement("tbody", null, view.rows.flatMap((row) => (row.selected ? [bodyRow(row), splitRow(row)] : [bodyRow(row)])))));
 }
 
 /**
@@ -10440,9 +10710,10 @@ function EditProviderSheet({
  * credential is the key itself, never a pointer to one.
  */
 function CreateProviderSheet({
-    types, existingNames, isAdmin, busy, error, onCancel, onConfirm,
-    initialName = "", initialShared = false, initialType = "",
+    types, existingNames, isAdmin, busy, error, onDirty, onCancel, onConfirm,
+    initialName = "", initialShared = false, initialType = "", updateProvider = null,
 }) {
+    const updating = Boolean(updateProvider);
     const [name, setName] = React.useState(initialName);
     const [type, setType] = React.useState(initialType || types[0]?.id || "");
     const [credential, setCredential] = React.useState("");
@@ -10455,7 +10726,7 @@ function CreateProviderSheet({
     const trimmed = name.trim();
     // A name is unique across the cluster and immutable, so a clash is
     // permanent. The database refuses it too; refusing here saves the trip.
-    const taken = existingNames.some((existing) => existing.toLowerCase() === trimmed.toLowerCase());
+    const taken = !updating && existingNames.some((existing) => existing.toLowerCase() === trimmed.toLowerCase());
     // MAJOR 16: the database's own check constraint allows only these, and it
     // reports every violation with one fixed sentence — so a name refused for
     // its LENGTH was told to use letters and numbers, which it already did.
@@ -10481,52 +10752,70 @@ function CreateProviderSheet({
     };
 
     return React.createElement(BudgetSheet, {
-        title: isGithub ? "Add GitHub Copilot provider" : "Add model provider",
+        title: updating ? `Update key for ${trimmed}` : (isGithub ? "Add GitHub Copilot provider" : "Add model provider"),
         subtitle: shared ? "Shared" : "Personal",
-        confirmLabel: "Add provider", busy, disabled: !valid, error, onCancel: cancel, onConfirm: submit,
-        footNote: "",
+        confirmLabel: updating ? "Update key" : "Add provider", busy, disabled: !valid, error, onCancel: cancel, onConfirm: submit,
+        // The whole point of an update is what does NOT change. Saying so is
+        // the difference between "replace the key" and "did I just make a
+        // second provider?" — the Delete sheet below spells out its
+        // consequences the same way.
+        footNote: updating
+            ? "Only the key changes. The name, type, base URL, defaults, system-session routing and usage history all stay as they are."
+            : "",
     },
     React.createElement(SheetField, {
         label: "Name",
         hint: taken ? "A provider with that name already exists, and names are unique across the cluster."
             : tooLong ? `Too long: ${trimmed.length} characters, and a name may be at most 64.`
                 : badChars ? "Letters, numbers, dot, dash and underscore only — no colon, no spaces, no accents: a session refers to it as \"<provider>:<model>\"."
-                    : "Permanent. Used in provider:model.",
+                    : updating ? "Not changing. Sessions keep referring to it as provider:model."
+                        : "Permanent. Used in provider:model.",
     },
     React.createElement("input", {
-        ref, className: `ps-budget-input${(taken || badChars || tooLong) && trimmed ? " is-invalid" : ""}`,
+        ref, className: `ps-budget-input${updating ? " is-static" : ""}${(taken || badChars || tooLong) && trimmed ? " is-invalid" : ""}`,
         "aria-label": "Provider name",
         value: name, placeholder: "azure-prod",
-        onChange: (event) => setName(event.target.value),
+        disabled: updating,
+        onChange: (event) => { onDirty?.(); setName(event.target.value); },
         onKeyDown: (event) => { if (event.key === "Enter" && valid) submit(); },
     })),
     React.createElement(SheetField, {
         label: "Type",
-        hint: "Backend and model catalog.",
+        hint: updating ? "Not changing." : "Backend and model catalog.",
     },
     React.createElement("select", {
-        className: "ps-budget-input", "aria-label": "Provider type",
-        value: type, onChange: (event) => setType(event.target.value),
+        className: `ps-budget-input${updating ? " is-static" : ""}`, "aria-label": "Provider type",
+        value: type, disabled: updating, onChange: (event) => { onDirty?.(); setType(event.target.value); },
     }, types.length === 0
         ? React.createElement("option", { value: "" }, "No provider types are listed on this deployment")
         : types.map((option) => React.createElement("option", { key: option.id, value: option.id }, option.id)))),
     React.createElement(SheetField, {
-        label: isGithub ? "GitHub Copilot token" : "API key",
-        hint: "Paste the token value.",
+        label: updating
+            ? (isGithub ? "New GitHub Copilot token" : "New API key")
+            : (isGithub ? "GitHub Copilot token" : "API key"),
+        hint: updating
+            ? "Replaces the current one. The existing key is never shown."
+            : "Paste the token value.",
     },
     React.createElement("input", {
         className: "ps-budget-input", type: "password", autoComplete: "off",
-        "aria-label": isGithub ? "GitHub Copilot token" : "API key",
+        "aria-label": updating
+            ? (isGithub ? "New GitHub Copilot token" : "New API key")
+            : (isGithub ? "GitHub Copilot token" : "API key"),
         value: credential, placeholder: "Paste token",
-        onChange: (event) => setCredential(event.target.value),
+        onChange: (event) => { onDirty?.(); setCredential(event.target.value); },
+        // While updating this is the only editable field, and the Name input
+        // that carries the other Enter handler is disabled — so without this
+        // the sheet cannot be submitted from the keyboard at all.
+        onKeyDown: (event) => { if (event.key === "Enter" && valid) submit(); },
     })),
-    React.createElement(SheetField, { label: "Base URL", hint: "Optional." },
+    !updating ? React.createElement(SheetField, { label: "Base URL", hint: "Optional." },
         React.createElement("input", {
             className: "ps-budget-input", value: baseUrl, placeholder: "https://…",
             "aria-label": "Base URL",
             onChange: (event) => setBaseUrl(event.target.value),
-        })),
-    isAdmin ? React.createElement(SheetField, { label: "Access" },
+        })) : null,
+    isAdmin && !updating ? React.createElement(SheetField, { label: "Access" },
         React.createElement(Segmented, {
             value: shared ? "shared" : "mine", onChange: (value) => setShared(value === "shared"),
             label: "Access",
@@ -10579,10 +10868,289 @@ function budgetViewDeps(state) {
         Boolean(state.ui?.budgetOpen), budget.loading, budget.refreshing, budget.loaded,
         budget.error, budget.grid, budget.paused, budget.overall, budget.selectedProvider,
         budget.selectedScope, budget.missingProvider, budget.series,
+        budget.tab, budget.summary,
         state.auth?.authorization?.role, state.admin?.profile,
     ];
 }
 
+// ─── Cluster summary tab ────────────────────────────────────────────────
+
+const SUMMARY_RANGES = [14, 30, 90];
+const SUMMARY_PRESETS = [
+    { id: "all", label: "All providers" },
+    { id: "shared", label: "Shared providers" },
+    { id: "users", label: "User providers" },
+];
+
+function summaryPresetLabel(view) {
+    if (view.preset === "all") return "All providers";
+    if (view.preset === "shared") return "Shared providers";
+    if (view.preset === "users") return "User providers";
+    const n = view.selectedProviders.length;
+    return n === 0 ? "No providers" : (n === 1 ? view.selectedProviders[0] : `${n} providers`);
+}
+
+/**
+ * The provider picker: three presets and a checkbox per provider. A preset
+ * expands to an exact list of names before the request goes out — the
+ * database never has to know what "Shared" meant on the day.
+ */
+function SummaryProviderPicker({ view, onChange }) {
+    const [open, setOpen] = React.useState(false);
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (!open) return undefined;
+        const onDown = (event) => { if (ref.current && !ref.current.contains(event.target)) setOpen(false); };
+        const onKey = (event) => { if (event.key === "Escape") setOpen(false); };
+        document.addEventListener("pointerdown", onDown);
+        document.addEventListener("keydown", onKey);
+        return () => { document.removeEventListener("pointerdown", onDown); document.removeEventListener("keydown", onKey); };
+    }, [open]);
+
+    const namesFor = (preset) => (preset === "all" ? [] : view.providers
+        .filter((p) => (preset === "shared" ? p.class === "shared" : p.class !== "shared"))
+        .map((p) => p.name));
+    const checked = new Set(view.preset === "all"
+        ? view.providers.map((p) => p.name)
+        : (view.preset === "custom" ? view.selectedProviders : namesFor(view.preset)));
+
+    // A preset is a whole answer, so the menu closes on it; a checkbox is
+    // one step of a hand-picked list, so the menu stays open for the next.
+    const choosePreset = (preset) => { onChange({ preset, providers: namesFor(preset) }); setOpen(false); };
+    const toggle = (name) => {
+        const next = new Set(checked);
+        if (next.has(name)) next.delete(name); else next.add(name);
+        onChange({ preset: "custom", providers: Array.from(next) });
+    };
+
+    return React.createElement("div", { className: "ps-summary-picker", ref },
+        React.createElement("button", {
+            type: "button",
+            className: `ps-mini-button ps-summary-picker__button${open ? " is-open" : ""}`,
+            "aria-haspopup": "listbox",
+            "aria-expanded": open,
+            "aria-label": "Providers filter",
+            onClick: () => setOpen((v) => !v),
+        }, summaryPresetLabel(view), " ", React.createElement("span", { "aria-hidden": "true" }, "▾")),
+        open ? React.createElement("div", { className: "ps-summary-picker__menu", role: "listbox", "aria-label": "Providers" },
+            SUMMARY_PRESETS.map((preset) => React.createElement("button", {
+                key: preset.id,
+                type: "button",
+                role: "option",
+                "aria-selected": view.preset === preset.id,
+                className: `ps-summary-picker__preset${view.preset === preset.id ? " is-on" : ""}`,
+                onClick: () => choosePreset(preset.id),
+            }, preset.label)),
+            React.createElement("div", { className: "ps-summary-picker__rule", "aria-hidden": "true" }),
+            React.createElement("button", {
+                type: "button", className: "ps-summary-picker__preset is-clear",
+                onClick: () => onChange({ preset: "custom", providers: [] }),
+            }, "Clear all"),
+            view.providers.length === 0
+                ? React.createElement("div", { className: "ps-summary-picker__empty" }, "No providers to choose from.")
+                : view.providers.map((p) => React.createElement("label", { key: p.name, className: "ps-summary-picker__row" },
+                    React.createElement("input", {
+                        type: "checkbox",
+                        checked: checked.has(p.name),
+                        onChange: () => toggle(p.name),
+                        "aria-label": `Include ${p.name}`,
+                    }),
+                    React.createElement("span", { className: "ps-summary-picker__name" }, p.name),
+                    React.createElement("span", { className: `ps-scope-badge is-${p.class}` }, p.class === "shared" ? "shared" : "user")))) : null);
+}
+
+function summaryTokens(n) {
+    return formatCompactNumber(Number(n) || 0);
+}
+
+/**
+ * The stacked bar chart: one bar per UTC day, drawn as SVG so it needs no
+ * library and scales with the pane. A bar is the day's total, input +
+ * output; the input segment is drawn as two — the part that was not in
+ * the cache, and the part served from or written to it — because the cache
+ * figures are parts of the input, not additions to it.
+ * Linear by default; when one day is more than ten times the median of the
+ * others, the axis goes to log10(1 + n) so the rest are not hairlines.
+ */
+/**
+ * Log or linear? Log when one day is more than ten times the median of the
+ * days that had anything — otherwise a spike turns every other day into a
+ * hairline. Shared by the chart and the card header that names the scale.
+ */
+function summaryLogScale(series) {
+    const totals = series.map((d) => d.total);
+    const max = Math.max(0, ...totals);
+    const sorted = totals.filter((t) => t > 0).sort((a, b) => a - b);
+    const median = sorted.length ? sorted[Math.floor(sorted.length / 2)] : 0;
+    return median > 0 && max > median * 10;
+}
+
+function SummaryChart({ series }) {
+    const W = 720; const H = 190; const padL = 58; const padB = 22; const padT = 8;
+    const totals = series.map((d) => d.total);
+    const max = Math.max(0, ...totals);
+    const log = summaryLogScale(series);
+    const scale = (v) => (log ? Math.log10(1 + v) : v);
+    const top = scale(max) || 1;
+    const innerH = H - padB - padT;
+    const y = (v) => innerH - (scale(v) / top) * innerH;
+    const n = Math.max(1, series.length);
+    const slot = (W - padL) / n;
+    const barW = Math.max(3, slot * 0.66);
+    // Ticks: quarters of the range on a linear axis; powers of ten on a log
+    // axis, so the labels are numbers a person recognises (10K, 1M) rather
+    // than wherever a quarter of log10(max) happens to land.
+    const ticks = log
+        ? [0, ...Array.from({ length: Math.floor(Math.log10(Math.max(10, max))) }, (_, i) => Math.pow(10, i + 1))]
+            .filter((v) => v <= max || v === 0)
+            .map((v) => ({ f: scale(v) / top, label: summaryTokens(v) }))
+        : [0, 0.25, 0.5, 0.75, 1].map((f) => ({ f, label: summaryTokens(f * max) }));
+    const labelEvery = n > 40 ? 10 : (n > 20 ? 5 : 1);
+    return React.createElement("svg", {
+        className: "ps-summary-chart", viewBox: `0 0 ${W} ${H}`, role: "img",
+        "aria-label": `Tokens per day, ${series.length} days${log ? ", log scale" : ""}`,
+    },
+        ticks.map((t) => React.createElement("g", { key: t.label + t.f },
+            React.createElement("line", { x1: padL, x2: W, y1: padT + innerH - t.f * innerH, y2: padT + innerH - t.f * innerH, className: "ps-summary-chart__grid" }),
+            React.createElement("text", { x: padL - 6, y: padT + innerH - t.f * innerH + 3, className: "ps-summary-chart__tick", textAnchor: "end" }, t.label))),
+        series.map((d, i) => {
+            const x = padL + i * slot + (slot - barW) / 2;
+            // Stack bottom-up: uncached input, cache read, cache write,
+            // output. The four add up to input + output — the day's total —
+            // because the two cache parts are carved out of the input. Under
+            // a log axis the stack is the log of the running total, so
+            // segment heights stay honest to the whole bar.
+            const cr = Math.min(d.input, d.cacheRead);
+            const cw = Math.min(d.input - cr, d.cacheWrite);
+            const cum1 = d.input - cr - cw; const cum2 = cum1 + cr; const cum3 = d.input; const cum4 = cum3 + d.output;
+            const yb = padT + innerH;
+            const y1 = padT + y(cum1); const y2 = padT + y(cum2); const y3 = padT + y(cum3); const y4 = padT + y(cum4);
+            const title = `${d.day}: ${summaryTokens(d.total)} tokens · in ${summaryTokens(d.input)} (cache r ${summaryTokens(d.cacheRead)} · w ${summaryTokens(d.cacheWrite)}) · out ${summaryTokens(d.output)} · ${d.turns} turns`;
+            return React.createElement("g", { key: d.day, className: "ps-summary-chart__bar" },
+                React.createElement("title", null, title),
+                React.createElement("rect", { x, y: y1, width: barW, height: Math.max(0, yb - y1), className: "is-in" }),
+                React.createElement("rect", { x, y: y2, width: barW, height: Math.max(0, y1 - y2), className: "is-cache" }),
+                React.createElement("rect", { x, y: y3, width: barW, height: Math.max(0, y2 - y3), className: "is-cache-w" }),
+                React.createElement("rect", { x, y: y4, width: barW, height: Math.max(0, y3 - y4), className: "is-out" }),
+                (i % labelEvery === 0 || i === n - 1)
+                    ? React.createElement("text", { x: x + barW / 2, y: H - 6, className: "ps-summary-chart__day", textAnchor: "middle" }, d.day.slice(5))
+                    : null);
+        }));
+}
+
+function SummarySparkline({ values }) {
+    const max = Math.max(0, ...values);
+    // 90 days at 4px is a 450px column; narrower bars past a month.
+    return React.createElement("span", {
+        className: "ps-summary-spark", "aria-hidden": "true",
+        style: { gridAutoColumns: values.length > 30 ? "2px" : "4px" },
+    },
+        values.map((v, i) => React.createElement("i", { key: i, style: { height: `${max > 0 ? Math.max(v > 0 ? 8 : 0, (v / max) * 100) : 0}%` } })));
+}
+
+function SummaryKpi({ label, w }) {
+    return React.createElement("div", { className: "ps-summary-kpi" },
+        React.createElement("div", { className: "ps-summary-kpi__label" }, label),
+        React.createElement("div", { className: "ps-summary-kpi__value" }, summaryTokens(w.total)),
+        // total = in + out; the cache pair is what the input was made of.
+        React.createElement("div", { className: "ps-summary-kpi__split", title: "Total is input + output. Cache read and write are parts of the input, not additions to it." },
+            React.createElement("span", null, React.createElement("i", { className: "ps-summary-dot is-in" }), "in ", summaryTokens(w.input)),
+            React.createElement("span", null, React.createElement("i", { className: "ps-summary-dot is-cache" }), "cache r ", summaryTokens(w.cacheRead)),
+            React.createElement("span", null, React.createElement("i", { className: "ps-summary-dot is-cache-w" }), "w ", summaryTokens(w.cacheWrite)),
+            React.createElement("span", null, React.createElement("i", { className: "ps-summary-dot is-out" }), "out ", summaryTokens(w.output)),
+            React.createElement("span", null, `· ${w.turns} turns`)));
+}
+
+function summaryViewDeps(state) {
+    const s = state.budget?.summary || {};
+    return [s.loading, s.error, s.fetchedAt, s.days, s.preset, (s.providers || []).join(","), (state.budget?.grid || []).length];
+}
+
+/**
+ * The Cluster summary tab. Everything on it comes from ONE answer to
+ * getProviderUsageSummary, so the KPIs, the chart and the model table can
+ * never disagree about which turns were counted.
+ */
+function ClusterSummaryPane({ controller }) {
+    const deps = useControllerSelector(controller, summaryViewDeps, shallowEqualObject);
+    const view = React.useMemo(() => selectUsageSummary(controller.getState()), [controller, deps]);
+    React.useEffect(() => {
+        if (!view.loaded && !view.loading && !view.error) controller.loadUsageSummary().catch(() => {});
+    }, [controller]);
+
+    const setRange = (days) => controller.setUsageSummaryFilter({ days }).catch(() => {});
+    const setProviders = ({ preset, providers }) => controller.setUsageSummaryFilter({ preset, providers }).catch(() => {});
+    const classes = view.classes.filter((c) => c.total > 0);
+    const rangeLabel = `last ${view.days} days`;
+
+    return React.createElement("div", { className: `ps-summary${view.loading ? " is-loading" : ""}` },
+        React.createElement("div", { className: "ps-summary__filters" },
+            React.createElement(SummaryProviderPicker, { view, onChange: setProviders }),
+            React.createElement("div", { className: "ps-budget-seg", role: "group", "aria-label": "Window" },
+                SUMMARY_RANGES.map((days) => React.createElement("button", {
+                    key: days, type: "button",
+                    className: `ps-budget-seg__button${view.days === days ? " is-on" : ""}`,
+                    "aria-pressed": view.days === days,
+                    "aria-label": `Last ${days} days`,
+                    onClick: () => setRange(days),
+                }, `${days}d`))),
+            React.createElement("span", { className: "ps-summary__scope" },
+                view.scope === "cluster" ? "Whole cluster, system sessions included" : "Your own turns")),
+        view.error ? React.createElement("div", { className: "ps-budget-empty is-error", role: "alert" },
+            React.createElement("div", null, "The summary could not be read. "),
+            React.createElement("div", { className: "ps-budget-sub" }, view.error)) : null,
+        React.createElement("div", { className: "ps-summary__kpis" },
+            React.createElement(SummaryKpi, { label: "Today (UTC)", w: view.windows.day }),
+            React.createElement(SummaryKpi, { label: "Last 7 days", w: view.windows.week }),
+            React.createElement(SummaryKpi, { label: "Last 30 days", w: view.windows.month })),
+        React.createElement("div", { className: "ps-summary__card" },
+            React.createElement("div", { className: "ps-summary__card-head" },
+                React.createElement("b", null, "Tokens per day"),
+                React.createElement("span", { className: "ps-summary__legend" },
+                    React.createElement("span", { title: "Prompt tokens that were neither served from nor written to the cache" }, React.createElement("i", { className: "ps-summary-dot is-in" }), "input"),
+                    React.createElement("span", { title: "The part of the input served from the cache" }, React.createElement("i", { className: "ps-summary-dot is-cache" }), "cache read"),
+                    React.createElement("span", { title: "The part of the input written to the cache" }, React.createElement("i", { className: "ps-summary-dot is-cache-w" }), "cache write"),
+                    React.createElement("span", null, React.createElement("i", { className: "ps-summary-dot is-out" }), "output")),
+                React.createElement("span", { className: "ps-summary__muted" }, `${rangeLabel} · ${summaryTokens(view.windowTotal)} tokens`),
+                // Named here, not painted over the bars: a spike is exactly
+                // when the tallest bar reaches the top-right corner.
+                summaryLogScale(view.series)
+                    ? React.createElement("span", { className: "ps-summary__tag", title: "One day is more than ten times the median, so the axis is log10 — otherwise every other day is a hairline." }, "log scale")
+                    : null),
+            view.windowTotal > 0 || view.loaded
+                ? React.createElement(SummaryChart, { series: view.series })
+                : null,
+            classes.length > 1 ? React.createElement("div", { className: "ps-summary__muted" },
+                "By charge: ", classes.map((c, i) => `${i ? " · " : ""}${c.chargeClass} ${summaryTokens(c.total)}`).join("")) : null),
+        React.createElement("div", { className: "ps-summary__card" },
+            React.createElement("div", { className: "ps-summary__card-head" },
+                React.createElement("b", null, "By model"),
+                React.createElement("span", { className: "ps-summary__muted" }, `${rangeLabel} · across providers, efforts and context tiers`)),
+            view.models.length === 0
+                ? React.createElement("div", { className: "ps-budget-empty" }, view.loaded ? "No token usage in this window." : (view.loading ? "Reading…" : ""))
+                : React.createElement("div", { className: "ps-summary__table-wrap" },
+                    React.createElement("table", { className: "ps-summary__table" },
+                        React.createElement("thead", null, React.createElement("tr", null,
+                            [["Model"], ["Turns"], ["Providers", "Distinct provider names in the ledger for this window — including providers since deleted"],
+                                ["Input", "Prompt tokens, including what was served from and written to the cache"], ["Output"],
+                                ["Cache read", "The part of Input served from the cache"], ["Cache write", "The part of Input written to the cache"],
+                                ["Total", "Input + Output"], ["Share"], ["Trend"]]
+                                .map(([h, title]) => React.createElement("th", { key: h, title }, h)))),
+                        React.createElement("tbody", null, view.models.map((m) => React.createElement("tr", { key: m.model },
+                            React.createElement("td", { className: "is-model" }, m.model),
+                            React.createElement("td", null, m.turns),
+                            React.createElement("td", null, m.providers),
+                            React.createElement("td", null, summaryTokens(m.input)),
+                            React.createElement("td", null, summaryTokens(m.output)),
+                            React.createElement("td", null, summaryTokens(m.cacheRead)),
+                            React.createElement("td", null, summaryTokens(m.cacheWrite)),
+                            React.createElement("td", { className: "is-total" }, summaryTokens(m.total)),
+                            React.createElement("td", { className: "is-share" },
+                                React.createElement("i", { className: "ps-summary-share", style: { width: `${Math.max(1, Math.round(m.share * 100))}px` } }),
+                                `${(m.share * 100).toFixed(m.share < 0.1 ? 1 : 0)}%`),
+                            React.createElement("td", null, React.createElement(SummarySparkline, { values: m.sparkline })))))))));
+}
+
 /**
  * The whole surface: a head, one table, and the selected provider's days.
  *
@@ -10784,24 +11352,17 @@ function ProviderBudgetView({ controller }) {
             React.createElement("span", { className: "ps-budget-coin", "aria-hidden": "true" }, "◎"),
             React.createElement("h2", { className: "ps-budget-h" }, "Providers & Budgets"),
             React.createElement("span", { className: "ps-budget-sub" }, "Usage and limits")),
+        // Refresh only. Leaving (to the workspace, or to the admin console)
+        // is the toolbar's Mode cluster; a ✕ and a gear here were second,
+        // unlabelled copies of buttons already on screen. Esc still closes.
         React.createElement("div", { className: "ps-budget-head-actions" },
-            React.createElement(IconButton, {
-                icon: React.createElement(CogGlyph),
-                label: "Model providers",
-                className: "ps-mini-button",
-                onClick: () => { controller.closeBudget(); void controller.openAdminConsole(); },
-            }),
             React.createElement(IconButton, {
                 icon: "↻",
                 label: "Refresh providers and budgets",
                 className: "ps-mini-button",
                 disabled: view.loading || view.refreshing,
                 onClick: () => controller.refreshProviderTable().catch(() => {}),
-            }),
-            React.createElement("button", {
-                type: "button", className: "ps-budget-close", onClick: () => controller.closeBudget(),
-                "aria-label": "Close providers and budgets", title: "Close (Esc)",
-            }, "✕")));
+            })));
 
     // A read that FAILED is never dressed up as an empty one: "no providers"
     // and "we could not find out" are different facts, and only one of them is
@@ -10893,7 +11454,18 @@ function ProviderBudgetView({ controller }) {
 
     return React.createElement("div", { className: "ps-budget-surface" },
         head,
-        React.createElement("div", { className: "ps-budget" }, body),
+        // Two tabs: the per-provider table (meters, people's turns, limits)
+        // and the Cluster summary (the ledger, every turn, by model).
+        React.createElement("div", { className: "ps-budget-tabs", role: "tablist" },
+            [["providers", "Providers"], ["summary", "Cluster summary"]].map(([id, label]) => React.createElement("button", {
+                key: id, type: "button", role: "tab",
+                "aria-selected": (controller.getState().budget?.tab || "providers") === id,
+                className: `ps-budget-tab${(controller.getState().budget?.tab || "providers") === id ? " is-on" : ""}`,
+                onClick: () => controller.setBudgetTab(id),
+            }, label))),
+        (controller.getState().budget?.tab || "providers") === "summary"
+            ? React.createElement("div", { className: "ps-budget" }, React.createElement(ClusterSummaryPane, { controller }))
+            : React.createElement("div", { className: "ps-budget" }, body),
         sheetEl);
 }
 
@@ -11018,7 +11590,7 @@ function ModalLayer({ controller }) {
         }),
         React.createElement("span", null, "Mobile"));
 
-    const renderListModal = (presentation, confirmLabel = "Apply", footerExtras = null) => {
+    const renderListModal = (presentation, confirmLabel = "Apply", footerExtras = null, headerExtras = null) => {
         const rows = Array.isArray(presentation.rows) ? presentation.rows : [];
         const rowItemIndexes = Array.isArray(presentation.rowItemIndexes) ? presentation.rowItemIndexes : null;
         const usesHangingIndent = modal.type === "modelPicker" || modal.type === "reasoningEffortPicker" || modal.type === "contextTierPicker" || modal.type === "sessionAgentPicker";
@@ -11039,13 +11611,8 @@ function ModalLayer({ controller }) {
                     key: item?.id || `row:${rowIndex}`,
                     type: "button",
                     className: `ps-list-button ps-modal-list-button${itemIndex === modal.selectedIndex ? " is-selected" : ""}${usesHangingIndent ? " is-hanging" : ""}${item?.disabled ? " is-disabled" : ""}`,
-                    // A section header is a disclosure control: one click opens
-                    // or closes it. Selecting it and making the user hit the
-                    // footer button would be a two-step for something that
-                    // reads as a twisty.
                     onClick: () => {
                         controller.dispatch({ type: "ui/modalSelection", index: itemIndex });
-                        if (item?.kind === "section") controller.toggleAgentPickerSection(item.sectionKey);
                     },
                 },
                 React.createElement("div", { className: "ps-line ps-modal-list-line" },
@@ -11088,6 +11655,7 @@ function ModalLayer({ controller }) {
                 React.createElement("div", { className: "ps-modal-title" }, presentation.title),
                 React.createElement("button", { type: "button", className: "ps-modal-close", onClick: close, "aria-label": "Close", title: "Close" }, "✕"),
             ),
+            headerExtras,
             React.createElement("div", { className: "ps-modal-grid" },
                 React.createElement("div", { ref: listModalRef, className: "ps-modal-list" },
                     renderedList,
@@ -11178,14 +11746,43 @@ function ModalLayer({ controller }) {
         return renderListModal(modalState.contextTierPicker, pickerConfirmLabel);
     }
     if (modal.type === "sessionAgentPicker" && modalState.sessionAgentPicker) {
-        // The primary button follows the selection: on a section it is the
-        // disclosure, not a create, and labelling it "Create Session" would
-        // promise something Enter does not do there.
-        const picked = modal.items?.[modal.selectedIndex || 0];
-        const confirmLabel = picked?.kind === "section"
-            ? (picked.collapsed ? "Open" : "Close")
-            : "Create Session";
-        return renderListModal(modalState.sessionAgentPicker, confirmLabel);
+        // Every row is an agent now, so Enter always creates.
+        const SORTS = [
+            ["used", "Most used", "Ordered by how often YOU have started each agent"],
+            ["name", "Name", "Alphabetical by agent name"],
+            ["package", "Package", "Grouped by package name, then agent name"],
+        ];
+        const toolbar = React.createElement("div", { className: "ps-agent-picker-toolbar" },
+            React.createElement("input", {
+                type: "search",
+                className: "ps-agent-picker-search",
+                // The keyboard handler routes Escape/Enter/arrows from a
+                // marked search box to the modal; see useKeyboardShortcuts.
+                "data-modal-search": "true",
+                placeholder: "Search agents, packages, tools…",
+                value: modal.query || "",
+                autoFocus: true,
+                "aria-label": "Search agents",
+                onChange: (event) => controller.setAgentPickerQuery(event.target.value),
+                // The list's own keys must still work from inside the box, but
+                // every OTHER key has to stay here — the modal binds j and k to
+                // move the selection, and without this you cannot type "kusto".
+                onKeyDown: (event) => {
+                    const passes = ["ArrowUp", "ArrowDown", "Enter", "Escape", "Tab"];
+                    if (!passes.includes(event.key)) event.stopPropagation();
+                },
+            }),
+            React.createElement("div", { className: "ps-agent-picker-sorts", role: "group", "aria-label": "Sort agents" },
+                SORTS.map(([value, label, title]) => React.createElement("button", {
+                    key: value,
+                    type: "button",
+                    className: `ps-agent-picker-sort${(modal.sort || "used") === value ? " is-on" : ""}`,
+                    title,
+                    "aria-pressed": (modal.sort || "used") === value ? "true" : "false",
+                    onClick: () => controller.setAgentPickerSort(value),
+                }, label))),
+        );
+        return renderListModal(modalState.sessionAgentPicker, "Create Session", null, toolbar);
     }
     if (modal.type === "sessionGroupPicker" && modalState.sessionGroupPicker) {
         return renderListModal(modalState.sessionGroupPicker, "Move");
@@ -11220,6 +11817,7 @@ function ModalLayer({ controller }) {
                 ),
                 React.createElement("input", {
                     className: "ps-modal-input ps-modal-search",
+                    "data-modal-search": "true",
                     value: ownerFilterQuery,
                     placeholder: "Search people…",
                     autoFocus: true,
@@ -11573,26 +12171,56 @@ function useKeyboardShortcuts(controller, mobile) {
                     controller.handleCommand(UI_COMMANDS.MODAL_PANE_NEXT).catch(() => {});
                     return;
                 }
-                // Disclosure keys for the agent picker. Scoped to that modal:
-                // every other list modal is flat, and left/right there would
-                // either do nothing or fight the Tab pane-cycling. Without
-                // this the picker's own hint ("Enter or → to open") named a
-                // key nothing listened for.
-                if (modal.type === "sessionAgentPicker" && (event.key === "ArrowRight" || event.key === "ArrowLeft")) {
+                if (event.key === "ArrowUp" || event.key === "k") {
                     event.preventDefault();
-                    controller.handleCommand(
-                        event.key === "ArrowRight" ? UI_COMMANDS.MODAL_PANE_NEXT : UI_COMMANDS.MODAL_PANE_PREV,
-                    ).catch(() => {});
+                    controller.handleCommand(UI_COMMANDS.MODAL_PREV).catch(() => {});
                     return;
                 }
-                if (event.key === "ArrowUp" || event.key === "k") {
+                if (event.key === "ArrowDown" || event.key === "j") {
+                    event.preventDefault();
+                    controller.handleCommand(UI_COMMANDS.MODAL_NEXT).catch(() => {});
+                }
+                return;
+            }
+
+            // An INPUT inside a list modal — the agent picker's search box, the
+            // filter dialog's people search — must still answer the keys that
+            // drive the modal. The block above is gated on !editable so that
+            // typing "j" filters instead of moving the selection, which is
+            // right; but it also swallowed Escape, Enter and the arrows, so
+            // with the box focused the dialog could not be closed, confirmed
+            // or navigated at all (its own hint said "Esc close" while Escape
+            // did nothing). Only those four keys, and only for a box marked
+            // as a modal's SEARCH field. Not every input in a modal: the
+            // rename and group-name boxes confirm on Enter themselves (a
+            // second confirm from here is a no-op only because the first
+            // closes the modal synchronously — not a contract worth leaning
+            // on), and in a text box the arrow keys mean the caret, not the
+            // list. A textarea keeps Enter for newlines.
+            // `editable` is a boolean, not the element — test the target.
+            if (modal && editable && target instanceof HTMLElement && target.dataset.modalSearch === "true") {
+                if (event.key === "Escape") {
+                    // An input with text clears itself first (its own handler
+                    // does that and stops propagation), so reaching here means
+                    // the box is empty and Escape means close.
+                    event.preventDefault();
+                    controller.handleCommand(UI_COMMANDS.CLOSE_MODAL).catch(() => {});
+                    return;
+                }
+                if (event.key === "Enter") {
+                    event.preventDefault();
+                    controller.handleCommand(UI_COMMANDS.MODAL_CONFIRM).catch(() => {});
+                    return;
+                }
+                if (event.key === "ArrowUp") {
                     event.preventDefault();
                     controller.handleCommand(UI_COMMANDS.MODAL_PREV).catch(() => {});
                     return;
                 }
-                if (event.key === "ArrowDown" || event.key === "j") {
+                if (event.key === "ArrowDown") {
                     event.preventDefault();
                     controller.handleCommand(UI_COMMANDS.MODAL_NEXT).catch(() => {});
+                    return;
                 }
                 return;
             }
@@ -11902,37 +12530,51 @@ function AdminConsolePanel({ controller, mobile = false }) {
         setProviderSheet(null);
         setProviderSheetBusy(false);
         setProviderSheetError(null);
-    }, []);
+        // The sheet's own error is local state and goes with it. The PANE
+        // banner is not: a failed mutation writes it into the store, and
+        // nothing cleared it until the next mutation succeeded — so Cancel
+        // left a red band describing a change that was abandoned.
+        controller.dismissAdminModelProviderMutationError();
+    }, [controller]);
     const submitProvider = React.useCallback(async (input) => {
         setProviderSheetBusy(true);
         setProviderSheetError(null);
-        const outcome = await controller.createAdminProvider(input);
+        const outcome = providerSheet?.update
+            ? await controller.updateAdminProviderCredential({
+                name: input.name, credentials: input.credentials, shared: input.shared === true,
+            })
+            : await controller.createAdminProvider(input);
         setProviderSheetBusy(false);
         if (!outcome?.ok) {
-            setProviderSheetError(outcome?.error || "The provider could not be created.");
+            setProviderSheetError(outcome?.error || `The provider key could not be ${providerSheet?.update ? "updated" : "created"}.`);
             return;
         }
         closeProviderSheet();
-    }, [closeProviderSheet, controller]);
-
-    const principalLabel = formatAdminPrincipalLabel(view.principal);
+    }, [closeProviderSheet, controller, providerSheet]);
 
+    // Title only. The signed-in person is already in the portal header, and
+    // the way out is the toolbar's Mode cluster (Workspace) \u2014 a \u2715 here was a
+    // second, unlabelled way to do the same thing.
     const header = React.createElement("header", { className: "ps-admin-console__header" },
-        React.createElement("h2", null, "Admin Console"),
-        React.createElement("span", { className: "ps-admin-console__who" }, principalLabel),
-        React.createElement("button", {
-            type: "button",
-            className: "ps-mini-button is-icon",
-            onClick: onClose,
-            title: "Close the admin console",
-            "aria-label": "Close the admin console",
-        }, "\u2715"));
+        React.createElement("h2", null, view.isAdmin ? "Admin Console" : "Settings"));
 
     const providerSection = React.createElement(AdminModelProvidersSection, {
         controller,
         view,
-        onAddPersonal: () => setProviderSheet({ shared: false, github: true }),
-        onAddShared: () => setProviderSheet({ shared: true, github: false }),
+        // One failure should say itself once. While a sheet is open it shows
+        // the message itself, and the pane printed the SAME text behind it.
+        sheetOpen: Boolean(providerSheet),
+        // Open clean: a banner from a previous, abandoned attempt must not
+        // greet the next one.
+        onAddPersonal: () => { controller.dismissAdminModelProviderMutationError(); setProviderSheet({ shared: false, github: true }); },
+        onAddShared: () => { controller.dismissAdminModelProviderMutationError(); setProviderSheet({ shared: true, github: false }); },
+        // Carry the scope: a shared provider rotates through the admin-only op,
+        // a personal one through the owner's. Without this the sheet defaults
+        // to personal and a shared rotation would 404 on its own name.
+        onUpdatePersonal: (provider) => {
+            controller.dismissAdminModelProviderMutationError();
+            setProviderSheet({ update: provider, shared: provider.class === "shared" });
+        },
     });
 
     const tree = React.createElement(AdminSettingsTree, { controller, view });
@@ -11952,11 +12594,17 @@ function AdminConsolePanel({ controller, mobile = false }) {
             ].map((provider) => provider.name),
             isAdmin: view.isAdmin,
             initialShared: providerSheet.shared,
+            updateProvider: providerSheet.update || null,
             initialType: providerSheet.github
                 ? (view.modelProviders?.providerTypes || []).find((type) => /github/i.test(type.id))?.id || ""
-                : "",
+                : (providerSheet.update?.typeId || ""),
+            initialName: providerSheet.update?.name || "",
             busy: providerSheetBusy,
             error: providerSheetError,
+            // Editing a field is the person answering the error. Leaving the
+            // old failure sitting under the input while they retype makes it
+            // look like the new value is already rejected.
+            onDirty: () => setProviderSheetError(null),
             onCancel: closeProviderSheet,
             onConfirm: submitProvider,
         })
@@ -12158,6 +12806,19 @@ function AdminPackageDetailPane({ controller, view }) {
     };
     const act = (kind, arg) => () => controller.runAdminPackageAction(kind, arg);
     const pending = detail.actionPending;
+    // Download is a pure read that streams to the browser, so it does not go
+    // through runAdminPackageAction (which mutates and refreshes the detail).
+    const downloadPackage = async () => {
+        try {
+            await controller.transport.saveAgentPackageDownload(
+                detail.name,
+                detail.activeSemver ?? null,
+                { scope: detail.scope, owner: detail.owner ?? null },
+            );
+        } catch (err) {
+            window.alert(`Could not download ${detail.name}: ${err?.message || err}`);
+        }
+    };
     return React.createElement("div", { className: "ps-admin-detail" },
         detail.error
             ? React.createElement("div", { className: "ps-admin-console__error", role: "alert" },
@@ -12252,6 +12913,20 @@ function AdminPackageDetailPane({ controller, view }) {
                         title: "Copy the active version into your user scope as a private test bench",
                     }, pending === "republish" ? "Copying…" : "Copy to my user scope")
                     : null,
+                // Getting a published package back OUT. The Web API has always
+                // served it; without this the only way was the CLI, which is a
+                // strange gap for a console that can publish, promote and
+                // delete. Feature-detected: a host with nowhere to put a file
+                // does not offer it.
+                typeof controller.transport.saveAgentPackageDownload === "function"
+                    ? React.createElement("button", {
+                        type: "button",
+                        className: "ps-mini-button",
+                        onClick: () => downloadPackage(),
+                        disabled: Boolean(pending) || !detail.activeSemver,
+                        title: `Download ${detail.name}@${detail.activeSemver ?? "?"} as the .tgz the CLI would push`,
+                    }, pending === "download" ? "Downloading…" : "Download")
+                    : null,
                 React.createElement("button", { type: "button", className: "ps-mini-button", onClick: act(detail.enabled ? "disable" : "enable"), disabled: Boolean(pending) },
                     detail.enabled ? "Disable" : "Enable"),
                 detail.canManage
@@ -12677,7 +13352,7 @@ function AdminDefaultSelect({ label, hint, value, choices, disabled, emptyLabel,
         hint ? React.createElement("span", { className: "ps-admin-console__hint" }, hint) : null);
 }
 
-function AdminProviderRows({ providers, isAdmin, personal, busy, onSystemUse, onDelete }) {
+function AdminProviderRows({ providers, isAdmin, personal, busy, onSystemUse, onUpdate, onDelete }) {
     if (!providers.length) {
         return React.createElement("p", { className: "ps-admin-console__hint" },
             personal ? "No personal providers yet." : "No shared providers are configured.");
@@ -12688,7 +13363,9 @@ function AdminProviderRows({ providers, isAdmin, personal, busy, onSystemUse, on
             className: "ps-admin-provider-row",
         },
         React.createElement("div", { className: "ps-admin-provider-row__identity" },
-            React.createElement("strong", null, provider.name),
+            // Truncates when the row is tight (see the CSS), so the full name
+            // has to be recoverable on hover.
+            React.createElement("strong", { title: provider.name }, provider.name),
             React.createElement("span", { className: `ps-scope-badge is-${provider.class === "shared" ? "shared" : "user"}` }, provider.class),
             provider.isMyDefault ? React.createElement("span", { className: "ps-scope-badge is-off" }, "my default") : null,
             provider.isClusterDefault ? React.createElement("span", { className: "ps-scope-badge is-off" }, "cluster default") : null,
@@ -12702,6 +13379,23 @@ function AdminProviderRows({ providers, isAdmin, personal, busy, onSystemUse, on
                     onChange: (event) => onSystemUse(provider.name, event.target.checked),
                 }),
                 "Allow system sessions") : null,
+            // Personal: the owner rotates their own key. Shared: an admin
+            // rotates the cluster's. A shared provider had no way to rotate at
+            // all, so an expired cluster key meant delete-and-recreate — which
+            // drops the cluster-default flag, the allowance, any hold, the
+            // system-use routing and the usage history, i.e. everything this
+            // feature exists to preserve.
+            (personal || isAdmin) ? React.createElement("button", {
+                type: "button",
+                className: "ps-mini-button",
+                // Several providers means several identical "Update Key"
+                // buttons to a screen reader. The trash below already names
+                // its row.
+                "aria-label": `Update key for ${provider.name}`,
+                title: `Update key for ${provider.name}`,
+                disabled: busy,
+                onClick: () => onUpdate(provider),
+            }, "Update key") : null,
             React.createElement(IconButton, {
                 icon: React.createElement(TrashGlyph),
                 label: `Delete ${provider.name}`,
@@ -12711,7 +13405,7 @@ function AdminProviderRows({ providers, isAdmin, personal, busy, onSystemUse, on
             })))));
 }
 
-function AdminModelProvidersSection({ controller, view, onAddPersonal, onAddShared }) {
+function AdminModelProvidersSection({ controller, view, onAddPersonal, onAddShared, onUpdatePersonal, sheetOpen = false }) {
     const providers = view.modelProviders || {};
     const pending = Boolean(providers.mutation?.pending);
     const systemConfigured = adminDefaultModel(providers.systemSessionDefault);
@@ -12763,6 +13457,7 @@ function AdminModelProvidersSection({ controller, view, onAddPersonal, onAddShar
             React.createElement(AdminProviderRows, {
                 providers: providers.myProviders || [], isAdmin: view.isAdmin, personal: true, busy: pending,
                 onSystemUse: (name, enabled) => controller.setAdminProviderSystemUse(name, enabled),
+                onUpdate: onUpdatePersonal,
                 onDelete: deleteProvider,
             })),
         React.createElement("div", { className: "ps-admin-provider-block" },
@@ -12787,6 +13482,12 @@ function AdminModelProvidersSection({ controller, view, onAddPersonal, onAddShar
             React.createElement(AdminProviderRows, {
                 providers: providers.sharedProviders || [], isAdmin: true, personal: false, busy: pending,
                 onSystemUse: () => {}, onDelete: deleteProvider,
+                // The same handler as the personal rows: it reads
+                // provider.class and opens the sheet in shared mode. 0.5.47
+                // showed the button on shared rows without wiring this, so
+                // the click threw "onUpdate is not a function" and nothing
+                // opened.
+                onUpdate: onUpdatePersonal,
             })),
         React.createElement("div", { className: "ps-admin-provider-block" },
             React.createElement(AdminDefaultSelect, {
@@ -12859,8 +13560,12 @@ function AdminModelProvidersSection({ controller, view, onAddPersonal, onAddShar
 
     return React.createElement("section", { className: "ps-admin-detail ps-admin-model-providers" },
         pageHeader,
-        providers.error || providers.mutation?.error
-            ? React.createElement("div", { className: "ps-admin-console__error", role: "alert" }, providers.mutation?.error || providers.error)
+        // A mutation error belongs to the sheet that raised it while that sheet
+        // is up. `providers.error` is different — it is the LOAD failing, which
+        // is about the pane itself, so it still shows.
+        providers.error || (providers.mutation?.error && !sheetOpen)
+            ? React.createElement("div", { className: "ps-admin-console__error", role: "alert" },
+                (!sheetOpen && providers.mutation?.error) || providers.error)
             : null,
         sharedPage ? sharedProvidersPage : myPage);
 }
@@ -13022,6 +13727,8 @@ export function PilotSwarmWebApp({ controller }) {
     const state = useControllerSelector(controller, (rootState) => ({
         themeId: rootState.ui.themeId,
         touchScale: Boolean(rootState.ui.touchScale),
+        sessionDetailCollapsed: Boolean(rootState.ui.sessionDetailCollapsed),
+        agentPickerUsage: rootState.ui.agentPickerUsage,
         ownerFilter: rootState.sessions.ownerFilter,
         pinnedIds: rootState.sessions.pinnedIds,
         // Without this the profile-save effect reads undefined and a reorder
@@ -13201,6 +13908,16 @@ export function PilotSwarmWebApp({ controller }) {
             try {
                 const profile = await transport.getCurrentUserProfile();
                 if (!active) return;
+                // This is the same profile the Admin Console fetches, and it
+                // carries isAdmin in every auth mode — including the no-auth
+                // stub, where getAuthContext() reports nothing. Seed it into
+                // state once, so the toolbar can name itself (Settings vs
+                // Admin console) from the first poll instead of after the
+                // console has been opened. The console's own refresh still
+                // runs and replaces this with the fuller load.
+                if (profile && typeof profile.isAdmin === "boolean" && !controller.getState().admin?.profile) {
+                    controller.dispatch({ type: "admin/profile/loaded", profile });
+                }
                 // Recompute the fallback defaults from CURRENT state each poll:
                 // the principal is resolved by now (it was likely null at mount),
                 // so the "no persisted filter" fallback becomes the correct
@@ -13220,29 +13937,15 @@ export function PilotSwarmWebApp({ controller }) {
                 defaultProfileSettingsRef.current = buildDefaultProfileSettingsFromState(
                     controller.getState(), otherTouchScaleRef.current, desktopRightPaneModeRef.current, desktopPanesRef.current,
                 );
-                // First visit on a desktop wide enough to hold it: open the
-                // canvas. A workspace that opens as chat alone hides the thing
-                // most sessions are FOR, and the canvas needs real width to be
-                // worth showing — below the breakpoint chat alone is better.
-                //
-                // Folded into the settings rather than dispatched separately.
-                // A separate dispatch raced the re-baseline at the end of this
-                // same poll: the new value was recorded as "already saved",
-                // never written, and the next poll put it back. Going through
-                // the settings means the normal apply-and-save path carries it.
-                //
-                // Only when NOTHING is stored. An explicit choice, including
-                // closing the canvas, is a preference from then on. Not
-                // live-responsive either: narrowing the window never closes a
-                // canvas the user opened on purpose.
-                const wantsDefaultCanvas = !hasStoredDesktopPanes(remoteNormalized)
-                    && !isNarrowViewport()
-                    && window.innerWidth >= PORTAL_CANVAS_DEFAULT_MIN_VIEWPORT_PX;
+                // The default workspace is sessions + chat, nothing else. A
+                // first visit on a wide desktop used to open the canvas as
+                // well; that was withdrawn (2026-08-27) — the canvas and
+                // diagnostics open when a person opens them (or an agent
+                // draws, see canvas/flip), and a stored choice is honoured.
                 const settings = materializeProfileSettings(
                     profile?.profileSettings,
                     defaultProfileSettingsRef.current,
                 );
-                if (wantsDefaultCanvas) settings.desktopPanes = { canvasOpen: true, diagnosticsOpen: false };
                 const settingsJson = JSON.stringify(settings);
                 const currentSettingsBeforeApply = profileSettingsFromViewState(
                     controller.getState(), otherTouchScaleRef.current, desktopRightPaneModeRef.current, desktopPanesRef.current,
@@ -13339,7 +14042,7 @@ export function PilotSwarmWebApp({ controller }) {
                 });
         }, 400);
         return undefined;
-    }, [controller, state.activeSessionId, state.activityPaneAdjust, state.canvasPrefs, state.collapsedSessionIds, state.ownerFilter, state.paneAdjust, state.manualOrder, state.pinnedIds, state.portalSessionColumnAdjust, state.rightPaneMode, state.sessionPaneAdjust, state.themeId, state.touchScale]);
+    }, [controller, state.activeSessionId, state.activityPaneAdjust, state.agentPickerUsage, state.canvasOpen, state.canvasPaneAdjust, state.canvasPrefs, state.canvasZen, state.collapsedSessionIds, state.diagnosticsOpen, state.diagnosticsPaneAdjust, state.diagnosticsSplitAdjust, state.ownerFilter, state.paneAdjust, state.manualOrder, state.pinnedIds, state.portalSessionColumnAdjust, state.rightPaneMode, state.sessionDetailCollapsed, state.sessionPaneAdjust, state.themeId, state.touchScale]);
 
     React.useEffect(() => {
         applyDocumentTheme(state.themeId);
@@ -13506,7 +14209,16 @@ export function PilotSwarmWebApp({ controller }) {
                     // rail width is remembered for THIS session only.
                     ? `${zenRailPx}px var(--ps-resizer-track, 16px) minmax(0, 1fr)`
                     : (rightSideActive
-                        ? `minmax(0, 1fr) var(--ps-resizer-track, 16px) min(${rightSidePx}px, 60%)`
+                        // The right block gets its pixels until CHAT is at its
+                        // floor — not "60% of the window". With canvas and
+                        // diagnostics both open, a 60% cap bound early (a
+                        // 640px canvas + 320px diagnostics is 60% of a
+                        // 1600px window), and past it a drag on the chat
+                        // seam could not widen the block: the canvas kept its
+                        // fixed pixels and the diagnostics column, the flex
+                        // one, gave them up — so the chat↔canvas seam moved
+                        // the canvas↔diagnostics seam instead.
+                        ? `minmax(0, 1fr) var(--ps-resizer-track, 16px) min(${rightSidePx}px, calc(100% - var(--ps-resizer-track, 16px) - ${PORTAL_MIN_CHAT_COLUMN_PX}px))`
                         : "minmax(0, 1fr)")),
         },
     },