pilotswarm 0.5.41 → 0.5.43

package/ui/core/src/state.js

@@ -239,6 +239,56 @@ export function normalizeStoredActiveSessionId(value) {
     return id ? id : null;
 }
 
+/**
+ * Why a session is waiting on a budget. Four reasons, four remedies: a limit
+ * needs raising, an allowance needs widening, a hold needs releasing, and a
+ * missing provider needs creating (or the session switching model).
+ */
+export const BUDGET_PAUSE_KINDS = Object.freeze(["limit", "allowance", "hold", "no_provider"]);
+
+/**
+ * A session's `pauseState` record, or null when it is not paused.
+ *
+ * Lives here rather than in the selectors because the REDUCER stamps the
+ * debounced row status from it and the selectors colour the row from it, and
+ * the two must agree — see computeRawSessionVisualStatus.
+ *
+ * An unrecognized `kind` reads as no pause at all. A newer server that
+ * invents a fifth reason must not make an older portal draw a mark it has no
+ * words for.
+ */
+export function normalizeSessionPause(session) {
+    const pause = session?.pauseState;
+    if (!pause || typeof pause !== "object") return null;
+    const kind = String(pause.kind || "");
+    if (!BUDGET_PAUSE_KINDS.includes(kind)) return null;
+    const text = (value) => {
+        const trimmed = String(value ?? "").trim();
+        return trimmed ? trimmed : null;
+    };
+    const num = (value) => (Number.isFinite(Number(value)) ? Number(value) : null);
+    return {
+        kind,
+        provider: text(pause.provider),
+        period: ["day", "week", "month"].includes(String(pause.period)) ? String(pause.period) : null,
+        modelQualified: text(pause.modelQualified),
+        limitTokens: num(pause.limitTokens),
+        usedTokens: num(pause.usedTokens),
+        ceilingTokens: num(pause.ceilingTokens),
+        yourUsedTokens: num(pause.yourUsedTokens),
+        // Null for a hold with no end, and for a provider that is simply
+        // absent — both wait until a person does something.
+        resetsAtUtc: text(pause.resetsAtUtc),
+    };
+}
+
+/** The three period columns the provider table draws, left to right. */
+export const BUDGET_PERIODS = Object.freeze(["day", "week", "month"]);
+
+/** Supported usage-history windows; the daily quota line remains today's. */
+export const BUDGET_SERIES_RANGES = Object.freeze([14, 30, 90]);
+export const BUDGET_SERIES_DAYS = 14;
+
 export function createInitialState({ mode = "local", branding = null, docs = null, themeId = null, sessionOwnerFilter = null, layoutAdjustments = null, pinnedSessionIds = null, collapsedSessionIds = null, activeSessionId = null, sessionOrder = null, rightPaneMode = null, desktopPanes: storedDesktopPanes = null, canvasPrefs = null } = {}) {
     const desktopPanes = normalizeStoredDesktopPanes(
         storedDesktopPanes,
@@ -266,6 +316,11 @@ export function createInitialState({ mode = "local", branding = null, docs = nul
         },
         ui: {
             focusRegion: FOCUS_REGIONS.SESSIONS,
+            // The Providers & Budgets surface (the coin button in the header).
+            // It REPLACES the workspace under the header — the same slot the
+            // admin console takes — so the two close each other. Never
+            // persisted: it is a place you go, not a layout you keep.
+            budgetOpen: false,
             inspectorTab: INSPECTOR_TABS[0],
             /** Node Map selection: short node label, scopes the Activity pane. */
             nodeMapSelectedNode: null,
@@ -458,6 +513,88 @@ export function createInitialState({ mode = "local", branding = null, docs = nul
             userStats: null,
             fetchedAt: 0,
         },
+        // Providers & Budgets — one table, and what it needs to draw itself.
+        // The table's numbers come from ONE read (getProviderUsageGrid); the
+        // paused list is a second read, kept because a stopped session says
+        // why on the session row too, not only on this screen. See
+        // docs/proposals/providers-and-budgets-meters.md.
+        budget: {
+            // A first load, with nothing on screen yet.
+            loading: false,
+            // A re-read WITH numbers already on screen. Separate from
+            // `loading` so a refresh does not blank the table someone is
+            // reading mid-sentence.
+            refreshing: false,
+            // Set by a successful load and never cleared by a failure.
+            // Without it an empty `grid` is ambiguous: "this namespace has no
+            // providers" and "we never found out" would look the same, and
+            // only one of them is safe to act on.
+            loaded: false,
+            // The message the SERVER wrote. It is written for a person and
+            // names the remedy, so it is passed through, never replaced.
+            error: null,
+            fetchedAt: 0,
+            // getProviderUsageGrid, verbatim and in render order: shared
+            // providers first, then the viewer's own, each immediately
+            // followed by its model rows. Never re-sorted.
+            grid: [],
+            // The "show overall usage" tick. Off = your usage against your
+            // share; on = everyone's usage against the limit. The two pairs
+            // of numbers are never mixed, so which one is on screen is a
+            // fact the table has to carry.
+            overall: false,
+            // Usage history window for both user and system reports.
+            rangeDays: BUDGET_SERIES_DAYS,
+            // The provider whose model rows are expanded and whose chart is
+            // drawn. Null means nothing is selected — this screen shows no
+            // provider until one is picked.
+            selectedProvider: null,
+            // Which row under that provider: '*' is the provider itself, and
+            // a qualified model reference is one of its per-model limits. The
+            // chart follows this, so standing on a model row shows that
+            // model's days alone.
+            selectedScope: "*",
+            // A name that was asked for and is not in the table. Set when a
+            // load drops the selection, because that is the case where
+            // somebody arrived here BY that name — from a session stopped on
+            // a provider that no longer exists — and clearing the selection
+            // silently would leave them with nothing to read and nothing to do.
+            missingProvider: null,
+            // The selected provider's day-by-day usage, read separately so a
+            // failed chart never blanks the table above it.
+            series: {
+                provider: null,
+                scope: "*",
+                rangeDays: BUDGET_SERIES_DAYS,
+                days: [],
+                loading: false,
+                loaded: false,
+                error: null,
+                fetchedAt: 0,
+            },
+            // Admin-only machinery spend for the selected provider. Kept
+            // separate from `series`: system turns are metered but exempt
+            // from user limits, so they must never borrow the quota line.
+            systemUsage: {
+                provider: null,
+                scope: "*",
+                rangeDays: BUDGET_SERIES_DAYS,
+                totals: null,
+                days: [],
+                breakdown: [],
+                loading: false,
+                loaded: false,
+                error: null,
+                fetchedAt: 0,
+            },
+            /** listPausedSessions: sessions waiting, each with its reason. */
+            paused: [],
+            // That list's OWN failure. Separate from `error`, which is the
+            // table's: one flag for both meant a failed waiting-list read
+            // marked freshly-read numbers as stale, and left the actually
+            // stale waiting line unmarked.
+            pausedError: null,
+        },
         admin: {
             // Whether the Admin Console is taking over the workspace and
             // hiding the session/chat panes. Persisted only in-memory.
@@ -498,9 +635,32 @@ export function createInitialState({ mode = "local", branding = null, docs = nul
                 changedAt: null,
                 error: null,
             },
-            // Which settings-tree node is active: "ghcp" (GitHub Keys) or
-            // "packages" (Agents). The tree replaces the old flat panel.
-            section: "ghcp",
+            modelProviders: {
+                loading: false,
+                error: null,
+                page: "mine",
+                providers: [],
+                models: [],
+                defaults: null,
+                fetchedAt: 0,
+                mutation: { pending: null, error: null },
+                selection: { focus: "providers", providerName: null, agentId: null },
+                create: {
+                    editing: false,
+                    stage: "name",
+                    name: "",
+                    typeId: "",
+                    shared: false,
+                    draft: "",
+                    cursorIndex: 0,
+                    saving: false,
+                    error: null,
+                },
+            },
+            // Which settings-tree node is active. The provider/default page
+            // replaces the legacy GitHub-key editor in new UI; the legacy
+            // state remains available for rollback compatibility only.
+            section: "providers",
             // Agent packages (docs/proposals/agent-packages.md) — registry
             // list, selected package detail, and the workspace viewer.
             packages: {

package/ui/react/src/components.js

@@ -6,7 +6,7 @@ import {
     getPromptInputRows,
     selectActiveSession,
     selectAdminConsole,
-    selectAdminGhcpKeyEditorModal,
+    selectAdminProviderCreateModal,
     selectChatPaneChrome,
     selectLiveActivityLines,
     selectChatLines,
@@ -2036,7 +2036,7 @@ function buildAdminPackagesLines(view) {
     lines.push([
         { text: " j/k ", color: "green", bold: true }, { text: "select  ", color: "gray" },
         { text: "r ", color: "cyan", bold: true }, { text: "refresh  ", color: "gray" },
-        { text: "g ", color: "yellow", bold: true }, { text: "GitHub Keys  ", color: "gray" },
+        { text: "m ", color: "yellow", bold: true }, { text: "Model Providers  ", color: "gray" },
         { text: "Esc ", color: "red", bold: true }, { text: "close", color: "gray" },
     ]);
     return lines;
@@ -2083,7 +2083,95 @@ function buildAdminWorkersLines(view) {
     lines.push([
         { text: " r ", color: "cyan", bold: true }, { text: "refresh  ", color: "gray" },
         { text: "a ", color: "yellow", bold: true }, { text: "Agents  ", color: "gray" },
-        { text: "g ", color: "yellow", bold: true }, { text: "GitHub Keys  ", color: "gray" },
+        { text: "m ", color: "yellow", bold: true }, { text: "Model Providers  ", color: "gray" },
+        { text: "Esc ", color: "red", bold: true }, { text: "close", color: "gray" },
+    ]);
+    return lines;
+}
+
+function buildAdminModelProviderLines(view) {
+    const providers = view.modelProviders || {};
+    const lines = [];
+    const configured = (entry) => entry?.configured?.model || "automatic";
+    const effective = (entry) => entry?.effective?.model || "blocked — no usable provider";
+    lines.push([{ text: "Model Providers", color: "cyan", bold: true }]);
+    if (providers.loading) lines.push([{ text: "Loading providers and defaults...", color: "gray" }]);
+    if (providers.error || providers.mutation?.error) {
+        lines.push([{ text: `! ${providers.mutation?.error || providers.error}`, color: "red", bold: true }]);
+    }
+    lines.push([{ text: "", color: "gray" }]);
+    if (providers.page !== "shared") {
+        lines.push([{ text: "My Providers", color: "white", bold: true }]);
+        if (!(providers.myProviders || []).length) {
+            lines.push([{ text: "  No personal providers.", color: "gray" }]);
+        }
+        for (const provider of providers.myProviders || []) {
+            const selected = providers.selection?.providerName === provider.name;
+            lines.push([
+                { text: selected ? "› " : "  ", color: selected ? "green" : "gray", bold: selected },
+                { text: provider.name, color: selected ? "white" : "gray", bold: selected },
+                ...(view.isAdmin ? [{ text: provider.systemUseEnabled ? "  [system]" : "  [user]", color: provider.systemUseEnabled ? "green" : "gray" }] : []),
+            ]);
+        }
+        lines.push([{ text: "", color: "gray" }]);
+        lines.push([{ text: "My Session Default", color: "white", bold: true }]);
+        lines.push([{ text: `  configured  ${configured(providers.mySessionDefault)}`, color: "gray" }]);
+        lines.push([{ text: `  effective   ${effective(providers.mySessionDefault)}`, color: "cyan" }]);
+    } else if (view.isAdmin) {
+        lines.push([{ text: "Shared Providers", color: "white", bold: true }]);
+        if (!(providers.sharedProviders || []).length) {
+            lines.push([{ text: "  No shared providers.", color: "gray" }]);
+        }
+        for (const provider of providers.sharedProviders || []) {
+            const selected = providers.selection?.providerName === provider.name;
+            lines.push([
+                { text: selected ? "› " : "  ", color: selected ? "green" : "gray", bold: selected },
+                { text: provider.name, color: selected ? "white" : "gray", bold: selected },
+                { text: "  [shared]", color: "green" },
+            ]);
+        }
+        lines.push([{ text: `  Cluster Session Default  ${configured(providers.clusterSessionDefault)}`, color: "gray" }]);
+        lines.push([{ text: `  System Session Default   ${configured(providers.systemSessionDefault)}`, color: "gray" }]);
+        lines.push([{ text: "", color: "gray" }]);
+        lines.push([{ text: "System Agent Overrides", color: "white", bold: true }]);
+        if (!(providers.systemAgentRoutes || []).length) {
+            lines.push([{ text: "  No registered or overridden system agents.", color: "gray" }]);
+        }
+        for (const route of providers.systemAgentRoutes || []) {
+            const selected = providers.selection?.agentId === route.agentId;
+            lines.push([
+                { text: selected ? "› " : "  ", color: selected ? "green" : "gray", bold: selected },
+                { text: route.title, color: selected ? "white" : "gray", bold: selected },
+                { text: `  ${route.effectiveModel || "blocked"}`, color: "cyan" },
+                { text: route.override ? "  [override]" : "  [system default]", color: route.override ? "yellow" : "gray" },
+            ]);
+        }
+    }
+    lines.push([{ text: "", color: "gray" }]);
+    lines.push([{ text: "Actions", color: "cyan", bold: true }]);
+    if (providers.page !== "shared") {
+        lines.push([
+            { text: " e ", color: "green", bold: true }, { text: "add  ", 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" }] : []),
+        ]);
+    } else if (view.isAdmin) {
+        lines.push([
+            { text: " E ", color: "green", bold: true }, { text: "add  ", color: "gray" },
+            { text: "d ", color: "red", bold: true }, { text: "delete  ", color: "gray" },
+            { text: "l ", color: "cyan", bold: true }, { text: "cluster default  ", color: "gray" },
+            { text: "s ", color: "cyan", bold: true }, { text: "system default  ", color: "gray" },
+            { text: " C/T/H ", color: "yellow", bold: true }, { text: "next system default + Complete/Terminate/Hard Delete restart  ", color: "gray" },
+            { text: "Tab ", color: "cyan", bold: true }, { text: "providers/agents  ", color: "gray" },
+            { text: "j/k ", color: "cyan", bold: true }, { text: "select  ", color: "gray" },
+            { text: "o ", color: "yellow", bold: true }, { text: "cycle override", color: "gray" },
+        ]);
+    }
+    lines.push([
+        { text: " r ", color: "cyan", bold: true }, { text: "refresh  ", color: "gray" },
+        { text: "m/M ", color: "cyan", bold: true }, { text: "my/shared  ", color: "gray" },
+        { text: "a ", color: "yellow", bold: true }, { text: "Agents  ", color: "gray" },
         { text: "Esc ", color: "red", bold: true }, { text: "close", color: "gray" },
     ]);
     return lines;
@@ -2118,6 +2206,11 @@ function buildAdminConsoleLines(view) {
         return lines;
     }
 
+    if (view.section === "providers") {
+        lines.push(...buildAdminModelProviderLines(view));
+        return lines;
+    }
+
     lines.push([{ text: "GitHub Copilot key", color: "cyan", bold: true }]);
     lines.push([
         { text: "Status  ", color: "gray" },
@@ -2262,6 +2355,55 @@ function AdminGhcpKeyEditorModalContainer({ controller }) {
     return React.createElement(AdminGhcpKeyEditorModal, { state });
 }
 
+function AdminProviderCreateModal({ state }) {
+    const platform = useUiPlatform();
+    const modal = selectAdminProviderCreateModal(state);
+    if (!modal) return null;
+    const viewport = typeof platform.getViewport === "function"
+        ? platform.getViewport()
+        : { width: 120, height: 40 };
+    const width = Math.max(56, Math.min(modal.idealWidth || 72, (viewport.width || 120) - 12));
+    const statusLines = modal.error
+        ? [[{ text: `! ${modal.error}`, color: "red", bold: true }]]
+        : modal.saving ? [[{ text: "Creating provider...", color: "yellow" }]] : [];
+    return React.createElement(platform.Overlay, null,
+        React.createElement(platform.Column, { width },
+            React.createElement(platform.Panel, {
+                title: modal.title,
+                color: "cyan",
+                focused: false,
+                width,
+                height: Math.max(5, (modal.detailsLines?.length || 0) + 2),
+                lines: modal.detailsLines,
+                scrollOffset: 0,
+                scrollMode: "top",
+                marginBottom: 1,
+                fillColor: "surface",
+            }),
+            React.createElement(platform.Input, {
+                label: modal.label,
+                value: modal.displayValue,
+                cursorIndex: modal.cursorIndex,
+                focused: !modal.saving,
+                placeholder: modal.placeholder,
+                rows: 1,
+                readOnly: modal.saving,
+            }),
+            statusLines.length ? React.createElement(platform.Panel, {
+                title: "Status", color: modal.error ? "red" : "yellow", focused: false,
+                width, height: 3, lines: statusLines, scrollOffset: 0, scrollMode: "top", marginBottom: 1, fillColor: "surface",
+            }) : null,
+            React.createElement(platform.Panel, {
+                title: "Help", color: "cyan", focused: false,
+                width, height: 6, lines: modal.helpLines, scrollOffset: 0, scrollMode: "top", fillColor: "surface",
+            })));
+}
+
+function AdminProviderCreateModalContainer({ controller }) {
+    const state = useControllerSelector(controller, (rootState) => ({ admin: rootState.admin }), shallowEqualObject);
+    return React.createElement(AdminProviderCreateModal, { state });
+}
+
 export function SharedPilotSwarmApp({ controller, versionLabel = null }) {
     const platform = useUiPlatform();
     const layoutState = useControllerSelector(controller, (state) => ({
@@ -2406,6 +2548,6 @@ export function SharedPilotSwarmApp({ controller, versionLabel = null }) {
         React.createElement(FilesFilterModalContainer, { controller }),
         React.createElement(HistoryFormatModalContainer, { controller }),
         React.createElement(ConfirmModalContainer, { controller }),
-        React.createElement(AdminGhcpKeyEditorModalContainer, { controller }),
+        React.createElement(AdminProviderCreateModalContainer, { controller }),
     );
 }