@elizaos/agent 2.0.0-alpha.421 → 2.0.0-alpha.425

package/packages/app-core/src/api/client-agent.js

@@ -1316,3 +1316,54 @@ ElizaClient.prototype.saveStreamSettings = async function (settings) {
         body: JSON.stringify({ settings }),
     });
 };
+// ---------------------------------------------------------------------------
+// Multi-account routes (WS3)
+// ---------------------------------------------------------------------------
+ElizaClient.prototype.listAccounts = async function () {
+    return this.fetch("/api/accounts");
+};
+ElizaClient.prototype.createApiKeyAccount = async function (providerId, body) {
+    return this.fetch(`/api/accounts/${encodeURIComponent(providerId)}`, {
+        method: "POST",
+        body: JSON.stringify({ source: "api-key", ...body }),
+    });
+};
+ElizaClient.prototype.patchAccount = async function (providerId, accountId, body) {
+    return this.fetch(`/api/accounts/${encodeURIComponent(providerId)}/${encodeURIComponent(accountId)}`, {
+        method: "PATCH",
+        body: JSON.stringify(body),
+    });
+};
+ElizaClient.prototype.deleteAccount = async function (providerId, accountId) {
+    return this.fetch(`/api/accounts/${encodeURIComponent(providerId)}/${encodeURIComponent(accountId)}`, { method: "DELETE" });
+};
+ElizaClient.prototype.testAccount = async function (providerId, accountId) {
+    return this.fetch(`/api/accounts/${encodeURIComponent(providerId)}/${encodeURIComponent(accountId)}/test`, { method: "POST" });
+};
+ElizaClient.prototype.refreshAccountUsage = async function (providerId, accountId) {
+    return this.fetch(`/api/accounts/${encodeURIComponent(providerId)}/${encodeURIComponent(accountId)}/refresh-usage`, { method: "POST" });
+};
+ElizaClient.prototype.startAccountOAuth = async function (providerId, body) {
+    return this.fetch(`/api/accounts/${encodeURIComponent(providerId)}/oauth/start`, {
+        method: "POST",
+        body: JSON.stringify(body),
+    });
+};
+ElizaClient.prototype.submitAccountOAuthCode = async function (providerId, body) {
+    return this.fetch(`/api/accounts/${encodeURIComponent(providerId)}/oauth/submit-code`, {
+        method: "POST",
+        body: JSON.stringify(body),
+    });
+};
+ElizaClient.prototype.cancelAccountOAuth = async function (providerId, body) {
+    return this.fetch(`/api/accounts/${encodeURIComponent(providerId)}/oauth/cancel`, {
+        method: "POST",
+        body: JSON.stringify(body),
+    });
+};
+ElizaClient.prototype.patchProviderStrategy = async function (providerId, body) {
+    return this.fetch(`/api/providers/${encodeURIComponent(providerId)}/strategy`, {
+        method: "PATCH",
+        body: JSON.stringify(body),
+    });
+};

package/packages/app-core/src/components/accounts/AccountCard.d.ts

@@ -0,0 +1,30 @@
+/**
+ * AccountCard — single account row inside an AccountList.
+ *
+ * Renders the credential's health glyph, label (inline-editable), source
+ * badge, priority controls (up/down arrows — no drag-drop dependency),
+ * usage bars (Anthropic shows session + weekly, Codex shows session
+ * only), enabled toggle, Test/Refresh/Delete actions, and a confirm
+ * dialog for delete.
+ */
+import type { AccountWithCredentialFlag } from "../../api/client-agent";
+export interface AccountCardProps {
+    account: AccountWithCredentialFlag;
+    isFirst: boolean;
+    isLast: boolean;
+    saving: boolean;
+    onPatch: (body: Partial<{
+        label: string;
+        enabled: boolean;
+        priority: number;
+    }>) => Promise<void>;
+    onMoveUp: () => Promise<void>;
+    onMoveDown: () => Promise<void>;
+    onTest: () => Promise<void>;
+    onRefreshUsage: () => Promise<void>;
+    onDelete: () => Promise<void>;
+    testBusy?: boolean;
+    refreshBusy?: boolean;
+}
+export declare function AccountCard({ account, isFirst, isLast, saving, onPatch, onMoveUp, onMoveDown, onTest, onRefreshUsage, onDelete, testBusy, refreshBusy, }: AccountCardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AccountCard.d.ts.map

package/packages/app-core/src/components/accounts/AccountCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccountCard.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/src/components/accounts/AccountCard.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AA0BH,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAExE,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,yBAAyB,CAAC;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,CACP,IAAI,EAAE,OAAO,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC,KACjE,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAChC,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,cAAc,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACpC,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAqHD,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,OAAO,EACP,MAAM,EACN,MAAM,EACN,OAAO,EACP,QAAQ,EACR,UAAU,EACV,MAAM,EACN,cAAc,EACd,QAAQ,EACR,QAAgB,EAChB,WAAmB,GACpB,EAAE,gBAAgB,2CAoSlB"}

package/packages/app-core/src/components/accounts/AccountCard.js

@@ -0,0 +1,183 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * AccountCard — single account row inside an AccountList.
+ *
+ * Renders the credential's health glyph, label (inline-editable), source
+ * badge, priority controls (up/down arrows — no drag-drop dependency),
+ * usage bars (Anthropic shows session + weekly, Codex shows session
+ * only), enabled toggle, Test/Refresh/Delete actions, and a confirm
+ * dialog for delete.
+ */
+import { Badge, Button, Checkbox, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, Spinner, StatusBadge, cn, } from "@elizaos/ui";
+import { ChevronDown, ChevronUp, Pencil, Trash2 } from "lucide-react";
+import { useCallback, useEffect, useState, } from "react";
+import { useApp } from "../../state";
+function formatRelativeTime(epochMs) {
+    if (!epochMs)
+        return "—";
+    const diff = Date.now() - epochMs;
+    if (diff < 60_000)
+        return "just now";
+    if (diff < 3_600_000)
+        return `${Math.floor(diff / 60_000)}m ago`;
+    if (diff < 86_400_000)
+        return `${Math.floor(diff / 3_600_000)}h ago`;
+    return `${Math.floor(diff / 86_400_000)}d ago`;
+}
+function formatResetIn(epochMs) {
+    if (!epochMs)
+        return null;
+    const diff = epochMs - Date.now();
+    if (diff <= 0)
+        return null;
+    if (diff < 3_600_000)
+        return `${Math.max(1, Math.floor(diff / 60_000))}m`;
+    if (diff < 86_400_000)
+        return `${Math.floor(diff / 3_600_000)}h`;
+    return `${Math.floor(diff / 86_400_000)}d`;
+}
+function clampPct(value) {
+    if (value == null || Number.isNaN(value))
+        return undefined;
+    return Math.max(0, Math.min(100, value));
+}
+function UsageBar({ label, pct, resetsAt }) {
+    const clamped = clampPct(pct);
+    const resetIn = formatResetIn(resetsAt);
+    const tone = clamped == null
+        ? "bg-muted/30"
+        : clamped >= 85
+            ? "bg-destructive"
+            : clamped >= 60
+                ? "bg-warn"
+                : "bg-ok";
+    const titleParts = [
+        `${label}: ${clamped == null ? "—" : `${Math.round(clamped)}%`}`,
+    ];
+    if (resetIn)
+        titleParts.push(`resets in ${resetIn}`);
+    return (_jsxs("div", { className: "flex min-w-0 items-center gap-1.5", title: titleParts.join(" · "), children: [_jsx("span", { className: "w-9 shrink-0 text-[10px] font-medium uppercase tracking-wider text-muted", children: label }), _jsx("div", { className: "relative h-1.5 min-w-[48px] flex-1 overflow-hidden rounded-full bg-bg-accent", children: _jsx("div", { className: cn("h-full transition-all", tone), style: { width: `${clamped ?? 0}%` } }) }), _jsx("span", { className: "w-8 shrink-0 text-right text-[10px] tabular-nums text-muted", children: clamped == null ? "—" : `${Math.round(clamped)}%` })] }));
+}
+function deriveHealthLabel(account, t) {
+    switch (account.health) {
+        case "ok":
+            return {
+                label: t("accounts.health.ok", { defaultValue: "Healthy" }),
+                tone: "success",
+            };
+        case "rate-limited": {
+            const resetIn = formatResetIn(account.healthDetail?.until);
+            return {
+                label: resetIn
+                    ? t("accounts.health.rateLimitedWithReset", {
+                        defaultValue: `Rate-limited (resets in ${resetIn})`,
+                        resetIn,
+                    })
+                    : t("accounts.health.rateLimited", {
+                        defaultValue: "Rate-limited",
+                    }),
+                tone: "warning",
+            };
+        }
+        case "needs-reauth":
+            return {
+                label: t("accounts.health.needsReauth", {
+                    defaultValue: "Needs reauth",
+                }),
+                tone: "danger",
+            };
+        case "invalid":
+            return {
+                label: t("accounts.health.invalid", {
+                    defaultValue: "Invalid credential",
+                }),
+                tone: "danger",
+            };
+        default:
+            return {
+                label: t("accounts.health.unknown", { defaultValue: "Unknown" }),
+                tone: "muted",
+            };
+    }
+}
+export function AccountCard({ account, isFirst, isLast, saving, onPatch, onMoveUp, onMoveDown, onTest, onRefreshUsage, onDelete, testBusy = false, refreshBusy = false, }) {
+    const { t } = useApp();
+    const [labelEditing, setLabelEditing] = useState(false);
+    const [labelDraft, setLabelDraft] = useState(account.label);
+    const [confirmingDelete, setConfirmingDelete] = useState(false);
+    const [deleteBusy, setDeleteBusy] = useState(false);
+    useEffect(() => {
+        if (!labelEditing)
+            setLabelDraft(account.label);
+    }, [account.label, labelEditing]);
+    const submitLabel = useCallback(async (event) => {
+        event?.preventDefault();
+        const trimmed = labelDraft.trim();
+        setLabelEditing(false);
+        if (!trimmed || trimmed === account.label) {
+            setLabelDraft(account.label);
+            return;
+        }
+        try {
+            await onPatch({ label: trimmed });
+        }
+        catch {
+            setLabelDraft(account.label);
+        }
+    }, [account.label, labelDraft, onPatch]);
+    const handleLabelKey = (event) => {
+        if (event.key === "Escape") {
+            event.preventDefault();
+            setLabelDraft(account.label);
+            setLabelEditing(false);
+        }
+        else if (event.key === "Enter") {
+            event.preventDefault();
+            void submitLabel();
+        }
+    };
+    const handleConfirmDelete = useCallback(async () => {
+        setDeleteBusy(true);
+        try {
+            await onDelete();
+            setConfirmingDelete(false);
+        }
+        finally {
+            setDeleteBusy(false);
+        }
+    }, [onDelete]);
+    const health = deriveHealthLabel(account, t);
+    const isAnthropic = account.providerId === "anthropic-subscription";
+    const isCodex = account.providerId === "openai-codex";
+    const usage = account.usage;
+    const lastUsed = formatRelativeTime(account.lastUsedAt);
+    return (_jsxs("div", { className: cn("flex flex-col gap-2 rounded-lg border border-border/45 bg-card/35 px-3 py-2.5 transition-opacity", !account.enabled && "opacity-60"), children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-2", children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [_jsx(StatusBadge, { label: health.label, tone: health.tone, withDot: true }), labelEditing ? (_jsx("form", { onSubmit: submitLabel, className: "min-w-0 flex-1", children: _jsx(Input, { value: labelDraft, onChange: (e) => setLabelDraft(e.target.value), onBlur: () => void submitLabel(), onKeyDown: handleLabelKey, autoFocus: true, className: "h-7 max-w-[240px] text-sm", "aria-label": t("accounts.label.edit", {
+                                        defaultValue: "Account label",
+                                    }) }) })) : (_jsxs("button", { type: "button", onClick: () => setLabelEditing(true), title: t("accounts.label.editTooltip", {
+                                    defaultValue: "Click to rename",
+                                }), className: "inline-flex min-w-0 items-center gap-1 truncate rounded text-sm font-medium text-txt hover:text-accent", children: [_jsx("span", { className: "truncate", children: account.label }), _jsx(Pencil, { className: "h-3 w-3 shrink-0 opacity-0 transition-opacity group-hover:opacity-100", "aria-hidden": true })] })), _jsx(Badge, { variant: "outline", className: "shrink-0 text-[10px] uppercase", children: account.source === "oauth"
+                                    ? t("accounts.source.oauth", { defaultValue: "OAuth" })
+                                    : t("accounts.source.apiKey", { defaultValue: "API key" }) }), _jsxs("span", { className: "shrink-0 text-[10px] tabular-nums text-muted", title: t("accounts.priority.tooltip", {
+                                    defaultValue: "Lower priority value runs first",
+                                }), children: ["#", account.priority] }), _jsx("span", { className: "shrink-0 text-[10px] text-muted", children: t("accounts.lastUsed", {
+                                    defaultValue: `Last used ${lastUsed}`,
+                                    lastUsed,
+                                }) })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", disabled: isFirst || saving, onClick: () => void onMoveUp(), "aria-label": t("accounts.moveUp", { defaultValue: "Move up" }), title: t("accounts.moveUp", { defaultValue: "Move up" }), className: "h-7 w-7 p-0", children: _jsx(ChevronUp, { className: "h-3.5 w-3.5", "aria-hidden": true }) }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", disabled: isLast || saving, onClick: () => void onMoveDown(), "aria-label": t("accounts.moveDown", { defaultValue: "Move down" }), title: t("accounts.moveDown", { defaultValue: "Move down" }), className: "h-7 w-7 p-0", children: _jsx(ChevronDown, { className: "h-3.5 w-3.5", "aria-hidden": true }) }), _jsxs("label", { className: "ml-1 inline-flex items-center gap-1.5 text-xs text-muted", children: [_jsx(Checkbox, { checked: account.enabled, disabled: saving, onCheckedChange: (value) => {
+                                            void onPatch({ enabled: value === true });
+                                        }, "aria-label": t("accounts.enabledToggle", {
+                                            defaultValue: "Account enabled",
+                                        }) }), t("accounts.enabled", { defaultValue: "Enabled" })] }), _jsx(Button, { type: "button", variant: "outline", size: "sm", disabled: testBusy || saving, onClick: () => void onTest(), className: "h-7 px-2 text-xs", children: testBusy ? (_jsx(Spinner, { className: "h-3 w-3" })) : (t("accounts.test", { defaultValue: "Test" })) }), _jsx(Button, { type: "button", variant: "outline", size: "sm", disabled: refreshBusy || saving, onClick: () => void onRefreshUsage(), className: "h-7 px-2 text-xs", children: refreshBusy ? (_jsx(Spinner, { className: "h-3 w-3" })) : (t("accounts.refresh", { defaultValue: "Refresh" })) }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", disabled: saving, onClick: () => setConfirmingDelete(true), "aria-label": t("accounts.delete", { defaultValue: "Delete account" }), title: t("accounts.delete", { defaultValue: "Delete account" }), className: "h-7 w-7 p-0 text-destructive hover:bg-destructive/10", children: _jsx(Trash2, { className: "h-3.5 w-3.5", "aria-hidden": true }) })] })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-1.5", children: [isAnthropic ? (_jsxs(_Fragment, { children: [_jsx(UsageBar, { label: t("accounts.usage.session5h", { defaultValue: "5h" }), pct: usage?.sessionPct, resetsAt: usage?.resetsAt }), _jsx(UsageBar, { label: t("accounts.usage.weekly", { defaultValue: "7d" }), pct: usage?.weeklyPct, resetsAt: usage?.resetsAt })] })) : isCodex ? (_jsx(UsageBar, { label: t("accounts.usage.session", { defaultValue: "Session" }), pct: usage?.sessionPct, resetsAt: usage?.resetsAt })) : usage ? (_jsx(UsageBar, { label: t("accounts.usage.session", { defaultValue: "Session" }), pct: usage.sessionPct, resetsAt: usage.resetsAt })) : (_jsx("span", { className: "text-xs text-muted", children: t("accounts.usage.none", {
+                            defaultValue: "No usage data yet — click Refresh to probe.",
+                        }) })), !account.hasCredential ? (_jsx("span", { className: "text-[10px] text-warn", title: t("accounts.orphan.tooltip", {
+                            defaultValue: "Pool metadata exists but no on-disk credential was found.",
+                        }), children: t("accounts.orphan.label", {
+                            defaultValue: "Orphan metadata",
+                        }) })) : null] }), _jsx(Dialog, { open: confirmingDelete, onOpenChange: (open) => {
+                    if (!deleteBusy)
+                        setConfirmingDelete(open);
+                }, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: t("accounts.deleteConfirm.title", {
+                                        defaultValue: "Remove this account?",
+                                    }) }), _jsx(DialogDescription, { children: t("accounts.deleteConfirm.description", {
+                                        defaultValue: "Removing the account deletes its stored credential and pool metadata. This cannot be undone.",
+                                    }) })] }), _jsxs(DialogFooter, { className: "gap-2", children: [_jsx(Button, { type: "button", variant: "ghost", disabled: deleteBusy, onClick: () => setConfirmingDelete(false), children: t("accounts.cancel", { defaultValue: "Cancel" }) }), _jsx(Button, { type: "button", variant: "destructive", disabled: deleteBusy, onClick: () => void handleConfirmDelete(), children: deleteBusy ? (_jsx(Spinner, { className: "h-3 w-3" })) : (t("accounts.delete.confirm", { defaultValue: "Remove account" })) })] })] }) })] }));
+}

package/packages/app-core/src/components/accounts/AccountList.d.ts

@@ -0,0 +1,15 @@
+/**
+ * AccountList — provider-scoped multi-account UI.
+ *
+ * Renders the rotation strategy picker, "Add account" button, and a
+ * priority-ordered stack of `AccountCard`s for the given providerId.
+ * Up/down reordering swaps priorities with the neighbour via two
+ * sequential PATCH calls (no drag-drop dependency).
+ */
+import type { LinkedAccountProviderId } from "@elizaos/shared";
+interface AccountListProps {
+    providerId: LinkedAccountProviderId;
+}
+export declare function AccountList({ providerId }: AccountListProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AccountList.d.ts.map

package/packages/app-core/src/components/accounts/AccountList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccountList.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/src/components/accounts/AccountList.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAU/D,UAAU,gBAAgB;IACxB,UAAU,EAAE,uBAAuB,CAAC;CACrC;AAOD,wBAAgB,WAAW,CAAC,EAAE,UAAU,EAAE,EAAE,gBAAgB,2CA8I3D"}

package/packages/app-core/src/components/accounts/AccountList.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AccountList — provider-scoped multi-account UI.
+ *
+ * Renders the rotation strategy picker, "Add account" button, and a
+ * priority-ordered stack of `AccountCard`s for the given providerId.
+ * Up/down reordering swaps priorities with the neighbour via two
+ * sequential PATCH calls (no drag-drop dependency).
+ */
+import { Button, Spinner } from "@elizaos/ui";
+import { Plus } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
+import { useApp } from "../../state";
+import { useAccounts } from "../../hooks/useAccounts";
+import { AccountCard } from "./AccountCard";
+import { AddAccountDialog } from "./AddAccountDialog";
+import { RotationStrategyPicker } from "./RotationStrategyPicker";
+const SUBSCRIPTION_PROVIDERS = new Set([
+    "anthropic-subscription",
+    "openai-codex",
+]);
+export function AccountList({ providerId }) {
+    const { t } = useApp();
+    const accounts = useAccounts();
+    const [addDialogOpen, setAddDialogOpen] = useState(false);
+    const providerEntry = useMemo(() => accounts.data?.providers.find((p) => p.providerId === providerId), [accounts.data, providerId]);
+    const sorted = useMemo(() => providerEntry
+        ? [...providerEntry.accounts].sort((a, b) => a.priority - b.priority)
+        : [], [providerEntry]);
+    const subscriptionProvider = SUBSCRIPTION_PROVIDERS.has(providerId);
+    // The accounts API currently 501s on POST for *-api providers (the
+    // credential-storage layer doesn't yet write API-key records for
+    // those). The pool / GET still work for any pre-existing entries, so
+    // render the list either way and gate the Add button.
+    const addDisabled = !subscriptionProvider;
+    const handleMove = useCallback(async (accountId, direction) => {
+        const index = sorted.findIndex((a) => a.id === accountId);
+        if (index < 0)
+            return;
+        const neighbourIndex = direction === "up" ? index - 1 : index + 1;
+        if (neighbourIndex < 0 || neighbourIndex >= sorted.length)
+            return;
+        const self = sorted[index];
+        const neighbour = sorted[neighbourIndex];
+        if (!self || !neighbour || self.priority === neighbour.priority)
+            return;
+        // Swap priorities. We patch the lower-priority one to a temp
+        // sentinel first to avoid the unique-priority assumption later
+        // consumers might add — for the current pool there's no uniqueness
+        // constraint, so two sequential patches are enough.
+        await accounts.patch(providerId, self.id, {
+            priority: neighbour.priority,
+        });
+        await accounts.patch(providerId, neighbour.id, {
+            priority: self.priority,
+        });
+    }, [accounts, providerId, sorted]);
+    if (accounts.loading && !accounts.data) {
+        return (_jsxs("div", { className: "mt-3 flex items-center gap-2 text-xs text-muted", children: [_jsx(Spinner, { className: "h-3 w-3" }), t("accounts.loading", { defaultValue: "Loading accounts…" })] }));
+    }
+    return (_jsxs("div", { className: "mt-3 flex flex-col gap-2 rounded-xl border border-border/40 bg-bg-accent/40 p-3", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsx("div", { className: "flex items-center gap-2", children: _jsx("h3", { className: "text-xs font-semibold uppercase tracking-wider text-muted", children: t("accounts.heading", {
+                                defaultValue: "Accounts ({{count}})",
+                                count: sorted.length,
+                            }) }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(RotationStrategyPicker, { providerId: providerId, value: providerEntry?.strategy, onChange: (strategy) => {
+                                    void accounts.setStrategy(providerId, strategy);
+                                }, disabled: accounts.saving.has(`strategy:${providerId}`) }), _jsxs(Button, { type: "button", variant: "default", size: "sm", disabled: addDisabled, onClick: () => setAddDialogOpen(true), title: addDisabled
+                                    ? t("accounts.add.disabledHint", {
+                                        defaultValue: "API-key accounts for this provider are not yet supported.",
+                                    })
+                                    : undefined, className: "h-8 gap-1 px-2.5 text-xs", children: [_jsx(Plus, { className: "h-3.5 w-3.5", "aria-hidden": true }), t("accounts.add.button", { defaultValue: "Add account" })] })] })] }), sorted.length === 0 ? (_jsx("div", { className: "rounded-lg border border-dashed border-border/50 px-3 py-6 text-center text-xs text-muted", children: t("accounts.empty", {
+                    defaultValue: "No accounts yet — add one to start using this provider.",
+                }) })) : (_jsx("div", { className: "flex flex-col gap-2", children: sorted.map((account, index) => (_jsx(AccountCard, { account: account, isFirst: index === 0, isLast: index === sorted.length - 1, saving: accounts.saving.has(account.id), testBusy: accounts.saving.has(`test:${account.id}`), refreshBusy: accounts.saving.has(`usage:${account.id}`), onPatch: (body) => accounts.patch(providerId, account.id, body), onMoveUp: () => handleMove(account.id, "up"), onMoveDown: () => handleMove(account.id, "down"), onTest: async () => {
+                        await accounts.test(providerId, account.id);
+                    }, onRefreshUsage: () => accounts.refreshUsage(providerId, account.id), onDelete: () => accounts.remove(providerId, account.id) }, account.id))) })), _jsx(AddAccountDialog, { open: addDialogOpen, providerId: providerId, onClose: () => setAddDialogOpen(false), onCreated: () => {
+                    // useAccounts already injects the new entry on success, so
+                    // there's nothing to do here. Refresh anyway in case the
+                    // optimistic insert missed a server-side default.
+                    void accounts.refresh();
+                } })] }));
+}

package/packages/app-core/src/components/accounts/AddAccountDialog.d.ts

@@ -0,0 +1,33 @@
+/**
+ * AddAccountDialog — modal that walks the user through adding a new
+ * credential to a provider's account pool.
+ *
+ * Two paths:
+ *   - **OAuth** (subscription providers): start the server-side OAuth
+ *     flow, open the auth URL in a real browser window via
+ *     `preOpenWindow` + `navigatePreOpenedWindow` (preserves the user
+ *     gesture so popup blockers don't fire), then subscribe to the
+ *     SSE stream at `/api/accounts/:provider/oauth/status` for terminal
+ *     state. On `success`, hand the new `LinkedAccountConfig` to the
+ *     parent. On error / timeout / cancel, surface the message inline
+ *     and let the user retry. If the dialog closes mid-flow we cancel
+ *     the server-side listener so it doesn't leak.
+ *   - **API key**: simple label + key form, immediate POST.
+ *
+ * The dialog is provider-aware: OAuth-only providers
+ * (`anthropic-subscription`, `openai-codex`) skip the chooser screen.
+ * Direct API providers (`anthropic-api`, `openai-api`) show only the
+ * API-key form. The server still 501s on POST for the api-key path on
+ * subscription providers, so the chooser is mostly forward-looking
+ * defence against future shapes.
+ */
+import type { LinkedAccountConfig, LinkedAccountProviderId } from "@elizaos/shared";
+interface AddAccountDialogProps {
+    open: boolean;
+    providerId: LinkedAccountProviderId;
+    onClose: () => void;
+    onCreated: (account: LinkedAccountConfig) => void;
+}
+export declare function AddAccountDialog({ open, providerId, onClose, onCreated, }: AddAccountDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AddAccountDialog.d.ts.map

package/packages/app-core/src/components/accounts/AddAccountDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddAccountDialog.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/src/components/accounts/AddAccountDialog.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAeH,OAAO,KAAK,EACV,mBAAmB,EACnB,uBAAuB,EACxB,MAAM,iBAAiB,CAAC;AAYzB,UAAU,qBAAqB;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,EAAE,uBAAuB,CAAC;IACpC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAC;CACnD;AAoDD,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,UAAU,EACV,OAAO,EACP,SAAS,GACV,EAAE,qBAAqB,2CAkZvB"}