pilotswarm 0.5.46 → 0.5.47

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

@@ -282,6 +282,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 +422,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 +466,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 +483,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 +578,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 }
+            : {}),
     });
 }
 
@@ -4040,7 +4087,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 +4180,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 +4214,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 +4574,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.
  *
- * 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.
+ * 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:
+ *
+ *   - 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 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 = () => { axis = null; };
+        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 +4804,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 +5615,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 +6219,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 +7487,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 +7501,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 +9018,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,7 +9133,7 @@ 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,
         }]),
@@ -10440,9 +10783,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 +10799,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 +10825,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",
@@ -11018,7 +11380,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 +11401,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 +11445,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 +11536,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 +11607,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 +11961,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 +12320,58 @@ 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]);
+    }, [closeProviderSheet, controller, providerSheet]);
 
     const principalLabel = formatAdminPrincipalLabel(view.principal);
 
     const header = React.createElement("header", { className: "ps-admin-console__header" },
-        React.createElement("h2", null, "Admin Console"),
+        React.createElement("h2", null, view.isAdmin ? "Admin Console" : "Settings"),
         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",
+            title: view.isAdmin ? "Close the admin console" : "Close settings",
+            "aria-label": view.isAdmin ? "Close the admin console" : "Close settings",
         }, "\u2715"));
 
     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 +12391,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 +12603,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 +12710,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 +13149,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 +13160,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 +13176,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 +13202,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 +13254,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" },
@@ -12859,8 +13351,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 +13518,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 +13699,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
@@ -13339,7 +13847,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);