pilotswarm 0.5.46 → 0.5.48

package/ui/core/src/reducer.js

@@ -832,6 +832,17 @@ export function appReducer(state, action) {
             if (Boolean(action.enabled) === Boolean(state.ui.touchScale)) return state;
             return { ...state, ui: { ...state.ui, touchScale: Boolean(action.enabled) } };
 
+        case "ui/agentPickerUsage": {
+            const usage = action.usage && typeof action.usage === "object" && !Array.isArray(action.usage)
+                ? action.usage
+                : {};
+            return { ...state, ui: { ...state.ui, agentPickerUsage: usage } };
+        }
+
+        case "ui/sessionDetailCollapsed":
+            if (Boolean(action.collapsed) === Boolean(state.ui.sessionDetailCollapsed)) return state;
+            return { ...state, ui: { ...state.ui, sessionDetailCollapsed: Boolean(action.collapsed) } };
+
         case "profileSettings/apply": {
             const settings = action.settings && typeof action.settings === "object" && !Array.isArray(action.settings)
                 ? action.settings
@@ -845,6 +856,11 @@ export function appReducer(state, action) {
             // say "rich" fall through to the transcript below.
             const hasTouchScale = Object.prototype.hasOwnProperty.call(settings, "touchScale")
                 && typeof settings.touchScale === "boolean";
+            const hasSessionDetailCollapsed = Object.prototype.hasOwnProperty.call(settings, "sessionDetailCollapsed")
+                && typeof settings.sessionDetailCollapsed === "boolean";
+            const hasAgentPickerUsage = Object.prototype.hasOwnProperty.call(settings, "agentPickerUsage")
+                && settings.agentPickerUsage && typeof settings.agentPickerUsage === "object"
+                && !Array.isArray(settings.agentPickerUsage);
             const hasRightPaneMode = Object.prototype.hasOwnProperty.call(settings, "rightPaneMode")
                 && (settings.rightPaneMode === "canvas" || settings.rightPaneMode === "panes");
             // The two independent columns. A profile written by a build that
@@ -921,6 +937,12 @@ export function appReducer(state, action) {
                     ...selection.ui,
                     themeId: hasTheme ? settings.themeId.trim() : selection.ui.themeId,
                     touchScale: hasTouchScale ? settings.touchScale : selection.ui.touchScale,
+                    sessionDetailCollapsed: hasSessionDetailCollapsed
+                        ? settings.sessionDetailCollapsed
+                        : selection.ui.sessionDetailCollapsed,
+                    agentPickerUsage: hasAgentPickerUsage
+                        ? settings.agentPickerUsage
+                        : selection.ui.agentPickerUsage,
                     rightPaneMode: hasRightPaneMode ? settings.rightPaneMode : selection.ui.rightPaneMode,
                     ...(nextDesktopPanes
                         ? { canvasOpen: nextDesktopPanes.canvasOpen, diagnosticsOpen: nextDesktopPanes.diagnosticsOpen, canvasZen: nextDesktopPanes.zen === true }
@@ -1015,6 +1037,48 @@ export function appReducer(state, action) {
                 },
             };
 
+        // ── Budget screen: tab + the Cluster summary ─────────────────
+        case "budget/tab": {
+            const tab = action.tab === "summary" ? "summary" : "providers";
+            if (state.budget.tab === tab) return state;
+            return { ...state, budget: { ...state.budget, tab } };
+        }
+        case "budget/summary/filter": {
+            const prev = state.budget.summary;
+            const days = [14, 30, 90].includes(Number(action.days)) ? Number(action.days) : prev.days;
+            const providers = Array.isArray(action.providers)
+                ? action.providers.map((p) => String(p ?? "").trim()).filter(Boolean)
+                : prev.providers;
+            const preset = ["all", "shared", "users", "custom"].includes(action.preset) ? action.preset
+                : (Array.isArray(action.providers) ? "custom" : prev.preset);
+            return { ...state, budget: { ...state.budget, summary: { ...prev, days, providers, preset } } };
+        }
+        case "budget/summary/loading":
+            return { ...state, budget: { ...state.budget, summary: { ...state.budget.summary, loading: true } } };
+        case "budget/summary/loaded":
+            return {
+                ...state,
+                budget: {
+                    ...state.budget,
+                    summary: {
+                        ...state.budget.summary,
+                        loading: false,
+                        error: null,
+                        fetchedAt: Number(action.fetchedAt) || Date.now(),
+                        data: action.data && typeof action.data === "object" ? action.data : null,
+                    },
+                },
+            };
+        case "budget/summary/failed":
+            // Keep the last answer on screen; say the read failed beside it.
+            return {
+                ...state,
+                budget: {
+                    ...state.budget,
+                    summary: { ...state.budget.summary, loading: false, error: String(action.error || "The summary could not be read.") },
+                },
+            };
+
         case "ui/diagnosticsSplitAdjust":
             return {
                 ...state,
@@ -2458,6 +2522,29 @@ export function appReducer(state, action) {
                 },
             };
         }
+        /**
+         * Put the banner down.
+         *
+         * A failed mutation writes mutation.error, which the Model Providers
+         * pane renders as a red band. Nothing cleared it except the NEXT
+         * mutation, so cancelling a failed sheet left the band sitting there
+         * over an unchanged list, and it survived until something else
+         * succeeded. The sheet that raised it owns it; when that sheet goes,
+         * so does this.
+         */
+        case "admin/modelProviders/mutationDismissed": {
+            if (!state.admin?.modelProviders?.mutation?.error) return state;
+            return {
+                ...state,
+                admin: {
+                    ...state.admin,
+                    modelProviders: {
+                        ...state.admin.modelProviders,
+                        mutation: { ...state.admin.modelProviders.mutation, error: null },
+                    },
+                },
+            };
+        }
         case "admin/modelProviders/select": {
             return {
                 ...state,
@@ -2495,6 +2582,7 @@ export function appReducer(state, action) {
         }
         case "admin/modelProviders/createBegin": {
             const draft = String(action.name || "");
+            const update = action.mode === "update";
             return {
                 ...state,
                 admin: {
@@ -2503,12 +2591,13 @@ export function appReducer(state, action) {
                         ...state.admin.modelProviders,
                         create: {
                             editing: true,
-                            stage: "name",
-                            name: "",
+                            mode: update ? "update" : "create",
+                            stage: update || action.stage === "credential" ? "credential" : "name",
+                            name: update ? draft : "",
                             typeId: String(action.typeId || ""),
                             shared: action.shared === true,
-                            draft,
-                            cursorIndex: draft.length,
+                            draft: update ? "" : draft,
+                            cursorIndex: update ? 0 : draft.length,
                             saving: false,
                             error: null,
                         },

package/ui/core/src/selectors.js

@@ -1812,6 +1812,21 @@ function prefixRuns(text, color = "gray", options = {}) {
 // (block) chat renderer can consume the same labeling rules without the
 // terminal run/prefix shape. Returns { time, glyph, glyphColor, roleLabel,
 // roleColor }.
+/**
+ * Is this the agent's own opening instruction rather than something a person
+ * sent? The kickoff goes onto the queue as a user-role prompt — that is how a
+ * turn starts — but it is stamped with a SYSTEM sender at the origin
+ * (client.ts, createAgentSession). Anything a person actually sends carries a
+ * `kind: "user"` sender stamped from the validated auth context.
+ *
+ * Sessions created before the stamp existed have no sender on that message, so
+ * their kickoff still reads as "You". Nothing can distinguish it after the
+ * fact; only new sessions are correct.
+ */
+export function isAgentKickoffMessage(message) {
+    return message?.role === "user" && message?.sender?.kind === "system";
+}
+
 function describeChatMessageHeader(message, options = {}) {
     const time = formatTimestamp(message?.createdAt || message?.time);
     // A user.message is labeled from the CURRENT VIEWER's perspective: "You"
@@ -1837,7 +1852,12 @@ function describeChatMessageHeader(message, options = {}) {
     );
     const ownerSuffix = senderIsOwner ? " (owner)" : "";
 
-    const roleLabel = isUser
+    const roleLabel = isAgentKickoffMessage(message)
+        // Belt and braces: the chat pane collapses a kickoff before it reaches
+        // here, but the TUI and any other renderer share this labeling, and
+        // "You" is the one label this message must never carry.
+        ? (sender?.display || "System")
+        : isUser
         ? ((fromOtherPerson ? (sender.display || sender.subject || "User") : "You") + ownerSuffix)
         : message?.role === "assistant"
             ? "Agent"
@@ -2440,6 +2460,22 @@ function buildChatMessageLines(message, maxWidth, options = {}) {
         }
     }
 
+    // An agent's opening instruction is plumbing, not conversation. It rides
+    // the queue as a user-role prompt (that is how a turn starts), so without
+    // this it rendered as a full chat message attributed to "You" — the
+    // reader's own transcript opening with a wall of instructions they never
+    // wrote. Collapsed to one line, openable, same affordance as a sub-agent
+    // response.
+    if (isAgentKickoffMessage(message)) {
+        return [buildSystemNoticeLine({
+            title: message?.sender?.display || "Agent kickoff",
+            summary: "opening instruction",
+            timestamp: formatTimestamp(message?.createdAt || message?.time),
+            body: message?.text || "",
+            color: "gray",
+        })];
+    }
+
     if (message?.role !== "user" && message?.role !== "assistant") {
         const strippedSystemText = stripLeadingRehydrationNoticeText(message?.text || "");
         if (message?.role === "system" && !strippedSystemText) {
@@ -4638,6 +4674,7 @@ export function selectAdminProviderCreateModal(state, maxWidth = 76) {
     const create = admin.modelProviders?.create || {};
     if (!admin.visible || !create.editing) return null;
     const credentialStage = create.stage === "credential";
+    const updating = create.mode === "update";
     const shared = create.shared === true;
     const ownTitle = /github/i.test(create.typeId || "")
         ? "Add GitHub Copilot provider"
@@ -4645,7 +4682,9 @@ export function selectAdminProviderCreateModal(state, maxWidth = 76) {
     const value = String(create.draft || "");
     return {
         type: "adminProviderCreate",
-        title: credentialStage
+        title: updating
+            ? `Update key for ${create.name}`
+            : credentialStage
             ? (shared ? "Add shared model provider" : ownTitle)
             : (shared ? "Name the shared provider" : ownTitle),
         label: credentialStage ? "credential" : "provider name",
@@ -4667,7 +4706,7 @@ export function selectAdminProviderCreateModal(state, maxWidth = 76) {
                 { text: "Letters, numbers, dot, dash, and underscore only.", color: "gray" },
             ],
         helpLines: credentialStage
-            ? ["Type/paste credential", "Enter  create provider", "Esc  cancel and clear"]
+            ? ["Type/paste credential", `Enter  ${updating ? "update key" : "create provider"}`, "Esc  cancel and clear"]
             : ["Type provider name", "Tab  next provider type", "Enter  continue to credential", "Esc  cancel"],
     };
 }
@@ -4790,9 +4829,30 @@ function budgetCell(raw, overall, nowMs) {
     // At 100/100 the two numbers are the story; the case this exists for is a
     // cell reading 13% of your share on a provider that has nothing left.
     const blockedButLooksFine = !overall && providerExhausted && (pct == null || pct < 100);
+    // What the used figure is made of, for the pair on screen. A limit is on
+    // the total — input + output — and the cache figures are parts OF the
+    // input (what was served from the cache, what was written to it), not
+    // additions to it. The parts are the meter's own turns over the meter's
+    // own window, so input + output is the used figure beside them.
+    const part = (key) => {
+        const v = overall ? raw?.[key] : raw?.[`your${key[0].toUpperCase()}${key.slice(1)}`];
+        return v == null ? null : Number(v);
+    };
+    const splitInput = part("inputTokens");
+    const split = Number.isFinite(splitInput) ? {
+        input: splitInput,
+        output: part("outputTokens") || 0,
+        cacheRead: part("cacheReadTokens") || 0,
+        cacheWrite: part("cacheWriteTokens") || 0,
+    } : null;
+    const splitText = split
+        ? `in ${formatCompactNumber(split.input)} (cache r ${formatCompactNumber(split.cacheRead)} · w ${formatCompactNumber(split.cacheWrite)}) · out ${formatCompactNumber(split.output)}`
+        : null;
     return {
         providerExhausted: blockedButLooksFine,
         ruleId: raw?.ruleId || null,
+        split,
+        splitText,
         usedTokens: known ? usedTokens : null,
         quotaTokens: Number.isFinite(quotaTokens) ? quotaTokens : null,
         usedLabel,
@@ -4935,6 +4995,97 @@ function budgetTableRow(raw, { overall, selectedProvider, selectedScope = "*", n
  * Rows are NOT sorted here. The server returns them in render order and a
  * sort would move a model row out from under the provider it belongs to.
  */
+/**
+ * The Cluster summary tab's view: the filter as the picker shows it, the
+ * three KPI windows, a chart series with every day of the window present
+ * (the database returns only days that had turns), the per-model rows with
+ * a sparkline aligned to those same days, and the charge-class split.
+ */
+export function selectUsageSummary(state) {
+    const budget = state.budget || {};
+    const summary = budget.summary || {};
+    const data = summary.data && typeof summary.data === "object" ? summary.data : null;
+    const days = [14, 30, 90].includes(Number(summary.days)) ? Number(summary.days) : 14;
+
+    // Provider choices come from the grid the Providers tab already read:
+    // one entry per provider row, with its class, so the picker can offer
+    // Shared / Users as presets and each name as a checkbox.
+    const providers = [];
+    const seen = new Set();
+    for (const row of Array.isArray(budget.grid) ? budget.grid : []) {
+        if (row?.rowKind !== "provider" || !row?.providerName || seen.has(row.providerName)) continue;
+        seen.add(row.providerName);
+        providers.push({ name: row.providerName, class: row.class === "shared" ? "shared" : "personal" });
+    }
+    const selected = new Set(Array.isArray(summary.providers) ? summary.providers : []);
+    const preset = summary.preset || "all";
+
+    // Every UTC day of the window, oldest first, ending on the server's
+    // "today" — so a quiet day is a zero bar, not a missing one.
+    const today = typeof data?.today === "string" ? data.today : new Date().toISOString().slice(0, 10);
+    const dayKeys = [];
+    {
+        const end = new Date(`${today}T00:00:00Z`).getTime();
+        for (let i = days - 1; i >= 0; i -= 1) dayKeys.push(new Date(end - i * 86_400_000).toISOString().slice(0, 10));
+    }
+    const byDay = new Map((Array.isArray(data?.daily) ? data.daily : []).map((d) => [d.day, d]));
+    const series = dayKeys.map((day) => {
+        const d = byDay.get(day) || {};
+        return {
+            day,
+            input: Number(d.input) || 0,
+            output: Number(d.output) || 0,
+            cacheRead: Number(d.cacheRead) || 0,
+            cacheWrite: Number(d.cacheWrite) || 0,
+            total: Number(d.total) || 0,
+            turns: Number(d.turns) || 0,
+        };
+    });
+    const windowTotal = series.reduce((sum, d) => sum + d.total, 0);
+    const models = (Array.isArray(data?.models) ? data.models : []).map((m) => {
+        const spark = new Map((Array.isArray(m.daily) ? m.daily : []).map((d) => [d.day, Number(d.total) || 0]));
+        const total = Number(m.total) || 0;
+        return {
+            model: String(m.model || "?"),
+            providers: Number(m.providers) || 0,
+            turns: Number(m.turns) || 0,
+            input: Number(m.input) || 0,
+            output: Number(m.output) || 0,
+            cacheRead: Number(m.cacheRead) || 0,
+            cacheWrite: Number(m.cacheWrite) || 0,
+            total,
+            share: windowTotal > 0 ? total / windowTotal : 0,
+            sparkline: dayKeys.map((day) => spark.get(day) || 0),
+        };
+    });
+    const win = (key) => {
+        const w = data?.windows?.[key] || {};
+        return {
+            input: Number(w.input) || 0, output: Number(w.output) || 0,
+            cacheRead: Number(w.cacheRead) || 0, cacheWrite: Number(w.cacheWrite) || 0,
+            total: Number(w.total) || 0, turns: Number(w.turns) || 0, sessions: Number(w.sessions) || 0,
+        };
+    };
+    return {
+        loading: Boolean(summary.loading),
+        error: summary.error || null,
+        loaded: Boolean(data),
+        scope: data?.scope === "mine" ? "mine" : "cluster",
+        days,
+        today,
+        preset,
+        selectedProviders: Array.from(selected),
+        providers,
+        windows: { day: win("day"), week: win("week"), month: win("month") },
+        series,
+        windowTotal,
+        models,
+        classes: (Array.isArray(data?.classes) ? data.classes : []).map((c) => ({
+            chargeClass: String(c.chargeClass || "?"), total: Number(c.total) || 0, turns: Number(c.turns) || 0,
+        })),
+    };
+}
+
 export function selectProviderTable(state) {
     const budget = state.budget || {};
     const nowMs = Date.now();
@@ -5227,16 +5378,17 @@ export function selectStatusBar(state) {
     }
     if (state.ui.modal?.type === "themePicker") {
         return {
-            left: "Select a shared portal/TUI theme",
+            left: "Select a theme",
             right: "up/down move · enter apply · esc close",
         };
     }
     if (state.ui.modal?.type === "sessionAgentPicker") {
         return {
             left: "Select an agent for the new session",
-            // Enter no longer always creates — on a section header it opens or
-            // closes — and the disclosure keys have to be named somewhere.
-            right: "up/down move · ←/→ open/close · enter start · esc cancel",
+            // Every row is an agent now, so Enter always starts one. The
+            // arrows are no longer named because they no longer do anything
+            // here — they belong to the search box, where they move the caret.
+            right: "type to search · up/down move · enter start · esc cancel",
         };
     }
     if (state.ui.modal?.type === "sessionGroupPicker") {
@@ -6503,15 +6655,23 @@ export function selectSessionAgentPickerModal(state, maxWidth = 76) {
             ], contentWidth);
         } else {
             const callable = item?.kind === "generic" || item?.supportsDirectStart !== false;
-            // A sub-agent that cannot be started is shown, not hidden — seeing
-            // what a package is made of is most of the value of grouping it.
-            // Dimming plus the └ connector carries it; the detail pane spells
-            // out why. An extra "called only" tag on the row was redundant with
-            // both, and read as a sentence fragment.
-            const glyph = item?.kind === "generic" ? "○ " : (item?.depth || 0) > 0 && item?.parentAgentName ? "└ " : "★ ";
+            // ONE LINE PER AGENT. The package is trailing metadata rather than a
+            // row of its own, so the list is as long as the number of agents —
+            // the grouped shape spent a second row on every single-agent package
+            // saying the same thing twice.
+            const glyph = item?.kind === "generic" ? "○ " : "★ ";
+            const name = item?.title || item?.agentName || item?.id || "Agent";
+            const pkg = item?.kind === "generic" ? "" : (item?.packageTitle || item?.packageName || "");
+            // Only shown while sorting BY use, where the number is the sort key
+            // and therefore explains the order. Everywhere else it is noise.
+            const uses = modal.sort === "used" && Number(item?.usageCount) > 0
+                ? `  ${item.usageCount}×`
+                : "";
             labelRuns = fitRuns([
                 { text: `${indent}${glyph}`, color: callable ? "yellow" : "gray" },
-                { text: item?.title || item?.agentName || item?.id || "Agent", color: callable ? "white" : "gray", bold: callable },
+                { text: name, color: callable ? "white" : "gray", bold: callable },
+                ...(pkg ? [{ text: `  ${pkg}`, color: "gray" }] : []),
+                ...(uses ? [{ text: uses, color: "cyan" }] : []),
             ], contentWidth);
         }
 
@@ -8570,7 +8730,7 @@ export function selectThemePickerModal(state, maxWidth = 80) {
             [{
                 text: previewingTheme
                     ? `Previewing now. Cancel reverts to ${originalTheme?.label || "the previous theme"}.`
-                    : "Currently active in this TUI session.",
+                    : "Currently active.",
                 color: previewingTheme ? "yellow" : "green",
             }],
             buildThemeSwatchRuns([

package/ui/core/src/state.js

@@ -359,6 +359,17 @@ export function createInitialState({ mode = "local", branding = null, docs = nul
             // portrait is not the only case — a wall display or a shared screen wants
             // the same thing — so it is a preference, not a viewport query.
             touchScale: false,
+            // The session detail box starts folded to its one-line summary. It
+            // is ten rows of reference detail against a list you are trying to
+            // read, and most of it is looked up once per session, not per
+            // glance. Expanding is one click and the choice persists.
+            sessionDetailCollapsed: true,
+            // Per-person agent start counts, {agentName: n}. Drives the
+            // picker's default "Most used" sort. State-owned so every writer
+            // of the profile document sees the same value at the same moment;
+            // a preserved ref refreshed by a 5s poll lost the count to the
+            // very next save.
+            agentPickerUsage: {},
             modal: null,
             fullscreenPane: null,
             layout: {
@@ -519,6 +530,26 @@ export function createInitialState({ mode = "local", branding = null, docs = nul
         // why on the session row too, not only on this screen. See
         // docs/proposals/providers-and-budgets-meters.md.
         budget: {
+            // Which tab of the Budget screen is up: the per-provider table
+            // ("providers") or the cluster summary ("summary").
+            tab: "providers",
+            // The Cluster summary tab: totals for today / week / month, the
+            // per-day series and the per-model pivot, over a provider filter.
+            summary: {
+                loading: false,
+                error: null,
+                fetchedAt: 0,
+                // 14, 30 or 90 — the chart's and the model table's window.
+                days: 14,
+                // Provider filter. `preset` is what the picker shows as the
+                // headline choice; `providers` is the exact list the request
+                // carried (empty = every provider). A custom pick clears the
+                // preset.
+                preset: "all",
+                providers: [],
+                // The last answer, verbatim from getProviderUsageSummary.
+                data: null,
+            },
             // A first load, with nothing on screen yet.
             loading: false,
             // A re-read WITH numbers already on screen. Separate from

package/ui/core/src/table-layout.js

@@ -0,0 +1,155 @@
+// Column layout for fit-width markdown / chat tables. Lives in ui-core so
+// the algorithm can be unit-tested without a DOM; web-app.js renders the
+// result as a <colgroup> of percentages plus a min-width in ch.
+//
+// Terminology: the FLEX column is the one prose-like column that wraps to
+// absorb overflow; every other column is RIGID and keeps its content width.
+
+export function normalizeTableCellText(value = "") {
+    return String(value || "")
+        .replace(/\s+/g, " ")
+        .trim();
+}
+
+const FIT_WIDTH_FLEX_HEADER_KEYWORDS = [
+    "description",
+    "mechanism",
+    "details",
+    "notes",
+    "summary",
+    "message",
+    "comment",
+    "reason",
+    "body",
+    "content",
+    "explanation",
+    "rationale",
+    "one-liner",
+];
+
+const FIT_WIDTH_FLEX_MIN_MAX_LEN = 24;
+const FIT_WIDTH_RIGID_CHAR_CAP = 32;
+const FIT_WIDTH_MIN_RIGID_CHARS = 6;
+const FIT_WIDTH_FLEX_MIN_CHARS = 30;
+const FIT_WIDTH_FLEX_MAX_CHARS = 56;
+const FIT_WIDTH_FLEX_MIN_FRACTION = 0.4;
+const FIT_WIDTH_FLEX_TO_RIGID_RATIO = 1.4;
+const FIT_WIDTH_MIN_EXTRA_CHARS = 2;
+
+/**
+ * Compute per-column layout for a fit-width markdown / chat table.
+ *
+ * Strategy:
+ *   1. Measure max cell length and "wrappability" (cells with whitespace) per column.
+ *   2. Identify a single "flex" column — long, prose-like, ideally with a
+ *      header keyword like Description / Mechanism / Notes. This column
+ *      absorbs overflow by wrapping aggressively.
+ *   3. Give every other column a budget = clamp(maxLen + padding, MIN, RIGID_CAP),
+ *      so rigid columns stay at their content-fit width even when one
+ *      sibling column has hundreds of characters of prose.
+ *   4. Give the flex column a bounded share of the rigid-column budget. A
+ *      very long cell should wrap; it should not steal so much percentage
+ *      width that compact columns like Count / Status collapse on phones.
+ *   5. Return a minimum table width in ch so the wrapper can scroll
+ *      horizontally rather than forcing all columns below readable size.
+ *
+ * Returns { widths: ["12.34%", ...], flexIndex: number, minWidth: "64ch" }
+ * when a flex column is identified — the table renderer then forces
+ * table-layout: fixed, adds an `is-flex-column` class to the chosen column,
+ * and gives the table a readable minimum width. Returns null when no flex
+ * column is found, in which case the renderer falls back to the browser's
+ * auto-table-layout (which is already good for short / uniform tables).
+ *
+ * Background: the previous behavior used the browser's auto-table-layout
+ * unconditionally. That works well when columns are uniform but is biased
+ * toward wide columns when one column has prose hundreds of characters
+ * long (e.g. a Mechanism / Description column) — auto-layout distributes
+ * width proportional to (max-content − min-content), which lets the prose
+ * column squeeze the rigid columns down to a few characters each.
+ */
+export function computeFitWidthColumnLayout(rows = []) {
+    const columnCount = Math.max(0, ...rows.map((row) => row.length));
+    if (columnCount <= 0) return null;
+
+    const headerRow = rows[0] || [];
+    const dataRowCount = Math.max(1, rows.length - 1);
+
+    const stats = Array.from({ length: columnCount }, () => ({
+        max: 0,
+        // Longest run without whitespace. A rigid column wraps at spaces
+        // only, so this is the narrowest it can be drawn without breaking
+        // a word — a 60-char CamelCase test name, a URL, a hash.
+        longestToken: 0,
+        spaceCells: 0,
+    }));
+    for (let rowIndex = 0; rowIndex < rows.length; rowIndex += 1) {
+        const row = rows[rowIndex];
+        for (let columnIndex = 0; columnIndex < columnCount; columnIndex += 1) {
+            const text = normalizeTableCellText(row[columnIndex] || "");
+            if (text.length > stats[columnIndex].max) stats[columnIndex].max = text.length;
+            if (rowIndex > 0 && /\s/.test(text)) stats[columnIndex].spaceCells += 1;
+            for (const token of text.split(/\s+/)) {
+                if (token.length > stats[columnIndex].longestToken) stats[columnIndex].longestToken = token.length;
+            }
+        }
+    }
+
+    let flexIndex = -1;
+    let flexScore = 0;
+    for (let columnIndex = 0; columnIndex < columnCount; columnIndex += 1) {
+        const stat = stats[columnIndex];
+        if (stat.max < FIT_WIDTH_FLEX_MIN_MAX_LEN) continue;
+        const spaceRatio = stat.spaceCells / dataRowCount;
+        if (spaceRatio < 0.4) continue;
+        const headerText = normalizeTableCellText(headerRow[columnIndex] || "").toLowerCase();
+        const headerBonus = FIT_WIDTH_FLEX_HEADER_KEYWORDS.some((keyword) => headerText.includes(keyword)) ? 60 : 0;
+        const score = stat.max + headerBonus;
+        if (score > flexScore) {
+            flexScore = score;
+            flexIndex = columnIndex;
+        }
+    }
+
+    if (flexIndex < 0) return null;
+
+    const rigidBudgets = stats.map((stat, columnIndex) => {
+        if (columnIndex === flexIndex) return 0;
+        // The cap keeps a column of many short words from hogging width; it
+        // must never cut a single word. Under the fixed layout a rigid cell
+        // wraps at spaces only, so a budget below the longest token painted
+        // that token across the next column. The floor makes the table's
+        // min-width grow instead — past the pane, the wrapper scrolls.
+        return Math.max(
+            FIT_WIDTH_MIN_RIGID_CHARS,
+            Math.min(stat.max + 2, FIT_WIDTH_RIGID_CHAR_CAP),
+            stat.longestToken + 2,
+        );
+    });
+    const sumRigid = rigidBudgets.reduce((sum, value) => sum + value, 0);
+    const flexStat = stats[flexIndex];
+    const flexBudget = Math.max(
+        FIT_WIDTH_FLEX_MIN_CHARS,
+        Math.min(
+            flexStat.max * 0.45,
+            FIT_WIDTH_FLEX_MAX_CHARS,
+            Math.max(FIT_WIDTH_FLEX_MIN_CHARS, sumRigid * FIT_WIDTH_FLEX_TO_RIGID_RATIO),
+        ),
+    );
+    const budgets = rigidBudgets.map((value, columnIndex) => (
+        columnIndex === flexIndex ? flexBudget : value
+    ));
+
+    const totalBudget = budgets.reduce((sum, value) => sum + value, 0);
+    if (totalBudget > 0 && budgets[flexIndex] / totalBudget < FIT_WIDTH_FLEX_MIN_FRACTION) {
+        const sumRigid = totalBudget - budgets[flexIndex];
+        budgets[flexIndex] = sumRigid * (FIT_WIDTH_FLEX_MIN_FRACTION / (1 - FIT_WIDTH_FLEX_MIN_FRACTION));
+    }
+
+    const finalTotal = budgets.reduce((sum, value) => sum + value, 0);
+    if (!(finalTotal > 0)) return null;
+    return {
+        widths: budgets.map((value) => `${((value / finalTotal) * 100).toFixed(2)}%`),
+        flexIndex,
+        minWidth: `${Math.ceil(finalTotal + FIT_WIDTH_MIN_EXTRA_CHARS)}ch`,
+    };
+}

package/ui/react/src/components.js

@@ -2152,6 +2152,7 @@ function buildAdminModelProviderLines(view) {
     if (providers.page !== "shared") {
         lines.push([
             { text: " e ", color: "green", bold: true }, { text: "add  ", color: "gray" },
+            { text: "U ", color: "yellow", bold: true }, { text: "update key  ", color: "gray" },
             { text: "d ", color: "red", bold: true }, { text: "delete  ", color: "gray" },
             { text: "u ", color: "cyan", bold: true }, { text: "my default  ", color: "gray" },
             ...(view.isAdmin ? [{ text: "t ", color: "yellow", bold: true }, { text: "system use  ", color: "gray" }] : []),