pilotswarm 0.5.44 → 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 }
+            : {}),
     });
 }
 
@@ -1257,6 +1304,33 @@ function SystemNoticeLine({ line, theme }) {
             : null);
 }
 
+/**
+ * A canvas action is a button press inside the drawn page, not something the
+ * viewer typed. Printing the raw `[canvas-action] {…}` JSON as a chat message
+ * buries the conversation in plumbing, so it renders as one collapsed row —
+ * the same affordance as a system notice — that opens to show the exact
+ * payload the page sent.
+ */
+function CanvasActionLine({ line, theme }) {
+    const payload = String(line?.canvasActionPayload || "").trim();
+    const name = line?.canvasActionName || "action";
+    const detail = String(line?.canvasActionDetail || "").trim();
+    const time = String(line?.canvasActionTime || "").trim();
+    return React.createElement("details", { className: "ps-system-notice ps-canvas-action" },
+        React.createElement("summary", {
+            className: "ps-system-notice-summary ps-canvas-action-summary",
+            style: { color: resolveColor(theme, "gray") || "var(--ps-muted)" },
+        },
+        React.createElement("span", { className: "ps-canvas-action-tag" }, "canvas"),
+        React.createElement("span", { className: "ps-system-notice-summary-text" },
+            `${name}${detail ? ` — ${detail}` : ""}`),
+        time ? React.createElement("span", { className: "ps-canvas-action-time" }, time) : null),
+        payload
+            ? React.createElement("div", { className: "ps-system-notice-body" },
+                React.createElement("pre", { className: "ps-canvas-action-payload" }, payload))
+            : null);
+}
+
 /**
  * Coalesce high-frequency dispatches to one per animation frame.
  *
@@ -1303,6 +1377,11 @@ const Line = React.memo(function Line({ line, theme, className = "" }) {
     if (line.kind === "systemNotice") {
         return React.createElement(SystemNoticeLine, { line, theme });
     }
+    // Checked before `kind`: the canvas-action line carries runs for the TUI
+    // but the portal renders it as its own collapsed row, not as those runs.
+    if (line.canvasAction) {
+        return React.createElement(CanvasActionLine, { line, theme });
+    }
     if (line.kind === "runs") {
         return React.createElement("div", { className: lineClassName },
             React.createElement(Runs, { runs: line.runs, theme }));
@@ -3448,8 +3527,12 @@ function StructuredChatBlocks({ lines, theme, controller = null }) {
     // for a host that cannot render the canvas). In the browser the canvas
     // pane updating IS the signal, so the chat skips them outright — desktop
     // and mobile share this renderer, so one filter covers both.
+    //
+    // canvasAction lines are NOT skipped: pressing a button in the drawn page
+    // is a real thing the viewer did, and dropping it leaves an unexplained
+    // gap before the agent's reply. Line renders it as one collapsed row.
     const blocks = React.useMemo(
-        () => parseStructuredChatBlocks((lines || []).filter((line) => !line?.canvasUpdate && !line?.canvasAction)),
+        () => parseStructuredChatBlocks((lines || []).filter((line) => !line?.canvasUpdate)),
         [lines],
     );
     return React.createElement(StructuredBlockList, { blocks, theme, controller });
@@ -4004,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
@@ -4068,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" : ""}`,
     },
@@ -4092,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.
@@ -4399,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.
+ *
+ * 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.
  *
- * 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.
+ * 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 }) {
@@ -4479,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,
@@ -5282,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)
@@ -5881,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" },
@@ -6576,6 +6914,13 @@ function CanvasShareDialog({ controller, sessionId, slot, onClose }) {
     // making, and stacking them put a destructive Reset next to an innocuous
     // deep link. Mirrors the Manage-session dialog's General/Access tabs.
     const [tab, setTab] = React.useState("session");
+    // The canvas KV write policy (interactive-canvas-apps Part D): who may
+    // write the app's shared state. null = not loaded / not supported.
+    const [kvPolicy, setKvPolicy] = React.useState(null);
+    // Who the VIEWER is on this canvas. Only an owner or an admin may change
+    // the policy, so the control is disabled for everyone else rather than
+    // letting them pick a value and then showing a refusal.
+    const [kvMe, setKvMe] = React.useState(null);
     const transport = controller.transport;
     const sessionLink = `${window.location.origin}/?session=${encodeURIComponent(sessionId)}&view=canvas&slot=${slot}&max=1`;
     // The token variants all resolve the same hashed row: one token, N doors,
@@ -6588,9 +6933,24 @@ function CanvasShareDialog({ controller, sessionId, slot, onClose }) {
         transport.getCanvasShareLink?.(sessionId, slot)
             .then((state) => setInfo(state || { exists: false }))
             .catch((err) => { setInfo({ exists: false }); setError(err?.message || String(err)); });
+        if (typeof transport.readCanvasKv === "function") {
+            transport.readCanvasKv(sessionId, slot, { limit: 1 })
+                .then((read) => { setKvPolicy(read?.policy || "owner"); setKvMe(read?.me || null); })
+                .catch(() => { setKvPolicy(null); setKvMe(null); });
+        }
     }, [transport, sessionId, slot]);
     React.useEffect(() => { refresh(); }, [refresh]);
 
+    const canSetKvPolicy = kvMe?.relation === "owner" || kvMe?.relation === "admin";
+
+    const setPolicy = (value) => {
+        setBusy(true); setError("");
+        transport.setCanvasKvAccess(sessionId, slot, value)
+            .then(() => setKvPolicy(value))
+            .catch((err) => setError(err?.message || String(err)))
+            .finally(() => setBusy(false));
+    };
+
     const copy = (label, text) => {
         navigator.clipboard?.writeText(text)
             .then(() => { setCopied(label); window.setTimeout(() => setCopied(""), 1500); })
@@ -6648,7 +7008,34 @@ function CanvasShareDialog({ controller, sessionId, slot, onClose }) {
                     role: "tabpanel", "aria-hidden": tab === "session" ? undefined : "true",
                 },
                     React.createElement("div", { className: "ps-canvas-share-sub" }, "Opens the portal signed in, canvas full screen. Session visibility rules apply."),
-                    linkRows(sessionLink, "session")),
+                    linkRows(sessionLink, "session"),
+                    // Who may WRITE the app's shared state. Stated in words:
+                    // "readers" reaches everyone the session is read-shared
+                    // with, which a dialog that only says "link" hides.
+                    kvPolicy !== null
+                        ? React.createElement("div", { className: "ps-canvas-share-policy" },
+                            React.createElement("label", { className: "ps-canvas-share-sub", htmlFor: "ps-canvas-kv-policy" }, "Who can edit inside this app"),
+                            React.createElement("select", {
+                                id: "ps-canvas-kv-policy",
+                                className: "ps-canvas-slot-select",
+                                value: kvPolicy,
+                                disabled: busy || !canSetKvPolicy,
+                                onChange: (event) => setPolicy(event.target.value),
+                            },
+                                React.createElement("option", { value: "owner" }, "Only people who can edit the session"),
+                                React.createElement("option", { value: "readers" }, "Anyone who can open the session"),
+                                React.createElement("option", { value: "link" }, "Anyone who can open the session, plus link viewers")),
+                            React.createElement("div", { className: "ps-canvas-share-sub" },
+                                kvPolicy === "owner"
+                                    ? "You, admins, and anyone you shared the session with as “write”. People with view-only access can watch the app but not change anything in it."
+                                    : kvPolicy === "link"
+                                        ? "Your view-only people can edit inside the app. Anyone holding the share link can watch it — link holders can never edit."
+                                        : "Adds your view-only people: they can edit inside the app. It does not let them message the agent."),
+                            canSetKvPolicy
+                                ? null
+                                : React.createElement("div", { className: "ps-canvas-share-sub" },
+                                    "Only the session owner or an admin can change this."))
+                        : null),
                 React.createElement("div", {
                     className: `ps-canvas-share-panel${tab === "public" ? " is-active" : ""}`,
                     role: "tabpanel", "aria-hidden": tab === "public" ? undefined : "true",
@@ -6753,6 +7140,9 @@ function CanvasFrame({ controller, sessionId, slot = 1, latestRev, zoom, visible
     const autoRetryRef = React.useRef({ rev: 0, used: false });
     const hostRef = React.useRef(null);
     const liveIframeElRef = React.useRef(null);
+    // The staging frame's element, so the KV bridge can answer a page's
+    // `ready` posted at script time (before promote). See the bridge below.
+    const stagingIframeElRef = React.useRef(null);
     const hostBox = useElementBox(hostRef);
     // The frame geometry each revision LOADED at. A sandboxed page cannot be
     // poked after the fact (no reaching into an opaque origin), and pages
@@ -6779,18 +7169,99 @@ function CanvasFrame({ controller, sessionId, slot = 1, latestRev, zoom, visible
         if (!controller || !sessionId) return undefined;
         const onMessage = (event) => {
             const frameEl = liveIframeElRef.current;
-            if (!frameEl || !event.source || event.source !== frameEl.contentWindow) return;
             const payload = event.data;
-            if (!payload || typeof payload !== "object" || payload.type !== "canvas-action") return;
-            controller.submitCanvasAction(sessionId, payload).then((result) => {
-                if (result && result.ok === false && typeof console !== "undefined") {
-                    console.warn(`canvas action rejected: ${result.reason}`);
+            if (!payload || typeof payload !== "object" || !event.source) return;
+            const fromLive = Boolean(frameEl && event.source === frameEl.contentWindow);
+            // A document runs its scripts in the STAGING frame first and is
+            // promoted on load — so a page that calls CanvasKV() at script
+            // time posts `ready` before this frame is live. KV READS are
+            // safe to answer from the staging frame of THIS canvas (it holds
+            // the revision about to go live; the reply goes back to the
+            // window that asked). Writes and actions stay live-frame only.
+            const fromStaging = Boolean(stagingIframeElRef.current && event.source === stagingIframeElRef.current.contentWindow);
+            if (!fromLive && !fromStaging) return;
+            if (payload.type === "canvas-action") {
+                if (!fromLive) return;
+                controller.submitCanvasAction(sessionId, payload).then((result) => {
+                    if (result && result.ok === false && typeof console !== "undefined") {
+                        console.warn(`canvas action rejected: ${result.reason}`);
+                    }
+                }).catch(() => {});
+                return;
+            }
+            // The KV bridge (door 1). The page never names the session or the
+            // slot — both come from THIS frame — and never sends `by`: the
+            // server stamps it from the signed-in principal.
+            if (payload.type === "canvas-kv") {
+                const id = payload.id;
+                const transport = controller.transport;
+                // Reply to the window that ASKED (live or staging), never to
+                // whichever frame is live by the time the request lands.
+                const source = event.source;
+                const post = (message) => {
+                    try { source.postMessage(message, "*"); } catch { /* frame mid-teardown */ }
+                };
+                const fail = (error, code = "ERROR") => post({ type: "canvas-kv-result", id, ok: false, error: String(error?.message || error || "failed"), code: error?.code || code });
+                if (typeof transport?.readCanvasKv !== "function") { fail("the canvas KV store is not available on this deployment", "UNAVAILABLE"); return; }
+                const op = String(payload.op || "");
+                if (!fromLive && (op === "put" || op === "delete")) {
+                    fail("the canvas is still loading; retry the write in a moment", "NOT_READY");
+                    return;
+                }
+                if (op === "ready" || op === "list") {
+                    transport.readCanvasKv(sessionId, slot, { prefix: payload.prefix ?? null, limit: payload.limit ?? null, after: payload.after ?? null })
+                        .then((read) => post({
+                            type: op === "ready" ? "canvas-kv-ready" : "canvas-kv-result",
+                            id, ok: true,
+                            entries: read?.entries ?? [], nextAfter: read?.nextAfter ?? null,
+                            me: read?.me ?? null, canWrite: Boolean(read?.me?.canWrite), policy: read?.policy ?? "owner",
+                        }))
+                        .catch(fail);
+                    return;
+                }
+                if (op === "get") {
+                    transport.readCanvasKv(sessionId, slot, { key: payload.key })
+                        .then((read) => post({ type: "canvas-kv-result", id, ok: true, entry: read?.entries?.[0] ?? null }))
+                        .catch(fail);
+                    return;
                 }
-            }).catch(() => {});
+                if (op === "put" || op === "delete") {
+                    const one = op === "put"
+                        ? { op: "put", key: payload.key, value: payload.value, ...(payload.ifMatch != null ? { ifMatch: payload.ifMatch } : {}) }
+                        : { op: "delete", key: payload.key, ...(payload.ifMatch != null ? { ifMatch: payload.ifMatch } : {}) };
+                    transport.writeCanvasKv(sessionId, slot, [one])
+                        .then((written) => {
+                            const r = written?.results?.[0] ?? { ok: false, error: "no result" };
+                            post({ type: "canvas-kv-result", id, ok: Boolean(r.ok), key: r.key, rev: r.rev, capped: r.capped, error: r.error, code: r.code });
+                        })
+                        .catch(fail);
+                    return;
+                }
+                fail(`unknown canvas-kv op ${op}`, "INVALID_REQUEST");
+            }
         };
         window.addEventListener("message", onMessage);
         return () => window.removeEventListener("message", onMessage);
-    }, [controller, sessionId]);
+    }, [controller, sessionId, slot]);
+
+    // Live KV changes for this slot → the page, as `canvas-kv-change`. A
+    // pointer-only ping (value too big for the notify) fetches that one key.
+    React.useEffect(() => {
+        if (!controller || !sessionId || typeof controller.subscribeCanvasKv !== "function") return undefined;
+        return controller.subscribeCanvasKv(sessionId, (change) => {
+            if (!change || Number(change.slot) !== Number(slot)) return;
+            const frameWindow = liveIframeElRef.current?.contentWindow;
+            if (!frameWindow) return;
+            const deliver = (entry) => {
+                try { frameWindow.postMessage({ type: "canvas-kv-change", key: change.key, rev: change.rev, op: change.op, ...(entry ? { v: entry.v, by: entry.by, at: entry.at } : {}) }, "*"); } catch { /* frame mid-teardown */ }
+            };
+            if (change.op === "delete") { deliver(null); return; }
+            if (change.value && typeof change.value === "object") { deliver({ v: change.value.v, by: change.value.by, at: change.value.at }); return; }
+            controller.transport?.readCanvasKv?.(sessionId, slot, { key: change.key })
+                .then((read) => deliver(read?.entries?.[0] ?? null))
+                .catch(() => { /* the page's next list catches up */ });
+        });
+    }, [controller, sessionId, slot]);
 
     React.useEffect(() => {
         if (!controller || !sessionId || !latestRev) return undefined;
@@ -6971,7 +7442,9 @@ function CanvasFrame({ controller, sessionId, slot = 1, latestRev, zoom, visible
     return React.createElement("div", { ref: hostRef, className: "ps-html-preview-host is-fitting" },
         [live, staging].filter(Boolean).map((frame) => React.createElement("iframe", {
             key: `canvas:${frame.rev}:${frame.url}`,
-            ref: frame === live ? ((el) => { liveIframeElRef.current = el; }) : undefined,
+            ref: frame === live
+                ? ((el) => { liveIframeElRef.current = el; })
+                : ((el) => { stagingIframeElRef.current = el; }),
             className: `ps-html-preview-frame${frame === live ? "" : " is-staging"}`,
             style: zoomStyle,
             src: frame.url,
@@ -7014,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);
@@ -7022,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);
@@ -8517,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);
@@ -8619,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,
         }]),
@@ -9938,14 +10452,42 @@ function ProviderSystemSpend({ view }) {
             ? React.createElement("div", { className: "ps-budget-empty is-error", role: "alert" }, spend.error)
             : null,
         spend.loaded ? React.createElement(React.Fragment, null,
-            React.createElement("div", { className: "ps-budget-system-total" },
-                React.createElement("strong", null, `${spend.tokensLabel} tokens`),
-                React.createElement("span", { className: "ps-budget-sub" }, ` · ${budgetPlural(spend.turns, "turn", "turns")}`)),
+            // The headline: total tokens and turns as two stat tiles, then a
+            // per-model table with a share bar so the mix reads at a glance
+            // (77.9M of 94.7M on one model is the fact that matters).
+            React.createElement("div", { className: "ps-budget-system-stats" },
+                React.createElement("div", { className: "ps-budget-system-stat" },
+                    React.createElement("strong", null, spend.tokensLabel),
+                    React.createElement("span", null, "tokens")),
+                React.createElement("div", { className: "ps-budget-system-stat" },
+                    React.createElement("strong", null, formatCompactNumber(spend.turns)),
+                    React.createElement("span", null, spend.turns === 1 ? "turn" : "turns")),
+                spend.turns > 0
+                    ? React.createElement("div", { className: "ps-budget-system-stat" },
+                        React.createElement("strong", null, formatCompactNumber(Math.round(spend.tokens / spend.turns))),
+                        React.createElement("span", null, "tokens / turn"))
+                    : null),
             spend.models.length
-                ? React.createElement("div", { className: "ps-budget-system-models" },
-                    spend.models.map((model) => React.createElement("div", { key: model.key, className: "ps-budget-system-model" },
-                        React.createElement("span", null, modelLabel(model.label)),
-                        React.createElement("strong", null, `${model.tokensLabel} · ${budgetPlural(model.turns, "turn", "turns")}`))))
+                ? React.createElement("table", { className: "ps-budget-system-models" },
+                    React.createElement("thead", null,
+                        React.createElement("tr", null,
+                            React.createElement("th", { scope: "col" }, "Model"),
+                            React.createElement("th", { scope: "col", className: "is-num" }, "Tokens"),
+                            React.createElement("th", { scope: "col", className: "is-share" }, "Share"),
+                            React.createElement("th", { scope: "col", className: "is-num" }, "Turns"))),
+                    React.createElement("tbody", null,
+                        spend.models.map((model) => {
+                            const share = spend.tokens > 0 ? model.tokens / spend.tokens : 0;
+                            const pct = Math.round(share * 100);
+                            return React.createElement("tr", { key: model.key },
+                                React.createElement("td", { className: "ps-budget-system-model-name" }, modelLabel(model.label)),
+                                React.createElement("td", { className: "is-num" }, model.tokensLabel),
+                                React.createElement("td", { className: "is-share" },
+                                    React.createElement("span", { className: "ps-budget-system-bar", role: "img", "aria-label": `${pct}% of system spend` },
+                                        React.createElement("span", { className: "ps-budget-system-bar-fill", style: { width: `${Math.max(share > 0 ? 1 : 0, share * 100)}%` } })),
+                                    React.createElement("span", { className: "ps-budget-system-pct" }, `${pct}%`)),
+                                React.createElement("td", { className: "is-num" }, formatCompactNumber(model.turns)));
+                        })))
                 : React.createElement("div", { className: "ps-budget-sub" }, "No system spend in this range.")) : null);
 }
 
@@ -10241,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("");
@@ -10256,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.
@@ -10282,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",
@@ -10819,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";
@@ -10840,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" },
@@ -10889,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,
@@ -10979,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");
@@ -11021,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,
@@ -11374,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;
             }
@@ -11703,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 });
@@ -11753,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,
         })
@@ -11959,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" },
@@ -12003,13 +12660,18 @@ function AdminPackageDetailPane({ controller, view }) {
                         React.createElement("span", null, version.dateText),
                         version.active
                             ? React.createElement("span", { className: "is-ok" }, "● active")
-                            : (detail.canManage
+                            : (detail.canEdit
                                 ? React.createElement("button", { type: "button", className: "ps-mini-button", onClick: act("pin", version.semver), disabled: Boolean(pending) }, "Pin")
                                 : null)))))
             : null,
-        detail.canManage
+        // Editors live on the shared copy only. Everyone sees the list;
+        // only the owner/admin changes it.
+        detail.scope === "shared"
+            ? React.createElement(AdminPackageEditorsSection, { controller, detail, pending })
+            : null,
+        detail.canEdit
             ? React.createElement("div", { className: "ps-admin-detail__actions" },
-                detail.source
+                detail.source && detail.canManage
                     ? React.createElement("button", { type: "button", className: "ps-primary-button", onClick: act("sync"), disabled: Boolean(pending) },
                         pending === "sync" ? "Syncing…" : "Sync now")
                     : null,
@@ -12034,8 +12696,11 @@ function AdminPackageDetailPane({ controller, view }) {
                         disabled: Boolean(pending) || !detail.activeSemver,
                         title: `Publish ${detail.name}@${detail.activeSemver ?? "?"} into the existing shared package`,
                     }, pending === "republish" ? "Publishing…" : `Publish ${detail.activeSemver ?? ""} to shared`)
-                    : React.createElement("button", { type: "button", className: "ps-mini-button", onClick: act(detail.scope === "shared" ? "demote" : "promote"), disabled: Boolean(pending) },
-                        detail.scope === "shared" ? "Demote to user" : "Promote to shared"),
+                    : (detail.canManage
+                        ? React.createElement("button", { type: "button", className: "ps-mini-button", onClick: act(detail.scope === "shared" ? "demote" : "promote"), disabled: Boolean(pending),
+                            title: detail.scope === "shared" && detail.editors.length ? "Demoting revokes every editor grant" : undefined },
+                            detail.scope === "shared" ? "Demote to user" : "Promote to shared")
+                        : null),
                 detail.scope === "shared" && !detail.hasOwnUserCounterpart
                     ? React.createElement("button", {
                         type: "button",
@@ -12045,16 +12710,126 @@ 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"),
-                React.createElement("button", { type: "button", className: "ps-mini-button is-danger", onClick: confirmDelete, disabled: Boolean(pending) }, "Delete"))
+                detail.canManage
+                    ? React.createElement("button", { type: "button", className: "ps-mini-button is-danger", onClick: confirmDelete, disabled: Boolean(pending) }, "Delete")
+                    : null)
             : React.createElement("p", { className: "ps-admin-console__hint" },
-                "Read-only: only the package creator or an admin can modify it."),
+                "Read-only: only the package creator, a granted editor, or an admin can modify it."),
         detail.actionError
             ? React.createElement("div", { className: "ps-admin-console__error", role: "alert" }, detail.actionError)
             : null);
 }
 
+/**
+ * Editors of a SHARED package: named users who may publish, pin and
+ * enable/disable it (never scope, delete, or this list). Everyone who can
+ * see the package sees the list; only the owner/admin changes it. Grantees
+ * are picked from the same member directory the session-share dialog uses.
+ */
+function AdminPackageEditorsSection({ controller, detail, pending }) {
+    const [query, setQuery] = React.useState("");
+    const [directory, setDirectory] = React.useState([]);
+    React.useEffect(() => {
+        if (!detail.canManage || typeof controller.transport.listKnownUsers !== "function") return undefined;
+        let cancelled = false;
+        controller.transport.listKnownUsers({ limit: 500 })
+            .then((users) => { if (!cancelled) setDirectory(Array.isArray(users) ? users : []); })
+            .catch(() => {});
+        return () => { cancelled = true; };
+    }, [controller, detail.canManage]);
+
+    const editorKeys = new Set(detail.editors.map((e) => `${e.provider}${e.subject}`));
+    const q = query.trim().toLowerCase();
+    const suggestions = q
+        ? directory.filter((u) => !editorKeys.has(`${u.provider}${u.subject}`) && (
+            (u.displayName && u.displayName.toLowerCase().includes(q))
+            || (u.email && u.email.toLowerCase().includes(q))
+            || (u.subject && u.subject.toLowerCase().includes(q)))).slice(0, 8)
+        : [];
+    const grant = (user) => {
+        if (!user?.provider || !user?.subject) return;
+        setQuery("");
+        controller.runAdminPackageAction("grantEditor", { provider: user.provider, subject: user.subject });
+    };
+    // Enter/Add grants only an EXACT match, or the single remaining
+    // suggestion. A typo must never hand write access to whoever happens
+    // to sort first in the directory — the person picks from the list.
+    const grantTyped = () => {
+        const text = query.trim();
+        if (!text) return;
+        const exact = directory.find((u) =>
+            (u.displayName && u.displayName.toLowerCase() === text.toLowerCase())
+            || (u.email && u.email.toLowerCase() === text.toLowerCase())
+            || (u.subject && u.subject.toLowerCase() === text.toLowerCase()));
+        if (exact) return grant(exact);
+        if (suggestions.length === 1) return grant(suggestions[0]);
+    };
+
+    return React.createElement("div", { className: "ps-admin-editors" },
+        React.createElement("div", { className: "ps-admin-detail__label" }, "Editors"),
+        detail.editors.length
+            ? React.createElement("div", { className: "ps-admin-detail__chips" },
+                detail.editors.map((e) => React.createElement("span", {
+                    key: `${e.provider}${e.subject}`,
+                    className: "ps-agent-chip",
+                    title: `${e.provider}:${e.subject}${e.grantedByDisplay ? ` · granted by ${e.grantedByDisplay}` : ""}`,
+                },
+                    e.label,
+                    detail.canManage
+                        ? React.createElement("button", {
+                            type: "button",
+                            className: "ps-chip-remove",
+                            "aria-label": `Remove editor ${e.label}`,
+                            disabled: Boolean(pending),
+                            onClick: () => controller.runAdminPackageAction("revokeEditor", { provider: e.provider, subject: e.subject }),
+                        }, "×")
+                        : null)))
+            : React.createElement("p", { className: "ps-admin-console__hint" },
+                detail.canManage
+                    ? "No editors yet. Add a person to let them publish, pin and enable this package. Grants are revoked if the package is demoted."
+                    : "Only the owner and admins can change this package."),
+        detail.canManage
+            ? React.createElement("div", { className: "ps-admin-editors__add" },
+                React.createElement("input", {
+                    type: "text",
+                    className: "ps-input",
+                    placeholder: "Add editor by name, email, or id…",
+                    value: query,
+                    disabled: Boolean(pending),
+                    onChange: (event) => setQuery(event.target.value),
+                    onKeyDown: (event) => { if (event.key === "Enter") { event.preventDefault(); grantTyped(); } },
+                    "aria-label": "Add editor",
+                }),
+                React.createElement("button", { type: "button", className: "ps-mini-button", onClick: grantTyped, disabled: Boolean(pending) || !query.trim() }, "Add"),
+                suggestions.length
+                    ? React.createElement("div", { className: "ps-admin-editors__suggestions", role: "listbox" },
+                        suggestions.map((u) => React.createElement("button", {
+                            key: `${u.provider}${u.subject}`,
+                            type: "button",
+                            role: "option",
+                            className: "ps-admin-editors__suggestion",
+                            onClick: () => grant(u),
+                        }, u.displayName || u.email || u.subject, u.email && u.displayName ? React.createElement("i", null, ` ${u.email}`) : null)))
+                    : null)
+            : null);
+}
+
 function AdminPackageWorkspacePane({ controller, view, layout = null, onLayout = null }) {
     const themeId = useControllerSelector(controller, (state) => state.ui.themeId);
     const theme = getTheme(themeId);
@@ -12374,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.");
@@ -12385,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,
@@ -12399,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}`,
@@ -12408,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);
@@ -12460,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" },
@@ -12556,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);
 }
@@ -12719,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
@@ -12898,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
@@ -13036,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);