@elizaos/ui 2.0.0-alpha.85 → 2.0.0-beta.2

package/chat/index.js

@@ -0,0 +1,225 @@
+/**
+ * Chat command utilities — slash command parsing, saved command management,
+ * and the typed command registry.
+ */
+import { DESKTOP_WORKSPACE_SURFACES } from "../utils/desktop-workspace.js";
+const ROUTINE_CODING_AGENT_RE = /^\[.+?\] (?:Approved:|Responded:|Sent keys:|Turn done, continuing:|Idle for \d+[smh])/;
+// ── Saved custom commands ────────────────────────────────────────────────
+export const CUSTOM_COMMANDS_STORAGE_KEY = "eliza:custom-commands";
+function isSavedCustomCommand(value) {
+    if (!value || typeof value !== "object")
+        return false;
+    const candidate = value;
+    return (typeof candidate.name === "string" &&
+        typeof candidate.text === "string" &&
+        typeof candidate.createdAt === "number");
+}
+export function loadSavedCustomCommands() {
+    try {
+        const raw = localStorage.getItem(CUSTOM_COMMANDS_STORAGE_KEY);
+        if (!raw)
+            return [];
+        const parsed = JSON.parse(raw);
+        if (!Array.isArray(parsed))
+            return [];
+        return parsed.filter(isSavedCustomCommand);
+    }
+    catch {
+        return [];
+    }
+}
+export function saveSavedCustomCommands(commands) {
+    localStorage.setItem(CUSTOM_COMMANDS_STORAGE_KEY, JSON.stringify(commands));
+}
+export function appendSavedCustomCommand(command) {
+    const existing = loadSavedCustomCommands();
+    existing.push(command);
+    saveSavedCustomCommands(existing);
+}
+export function normalizeSlashCommandName(value) {
+    const trimmed = value.trim();
+    if (!trimmed)
+        return "";
+    const withoutSlash = trimmed.startsWith("/") ? trimmed.slice(1) : trimmed;
+    return withoutSlash.trim().toLowerCase();
+}
+export function expandSavedCustomCommand(template, argsRaw) {
+    const args = argsRaw.trim();
+    if (!args) {
+        return template;
+    }
+    if (template.includes("{{args}}")) {
+        return template.replaceAll("{{args}}", args);
+    }
+    return `${template}\n${args}`;
+}
+export function splitCommandArgs(raw) {
+    const tokens = [];
+    const re = /"([^"]*)"|'([^']*)'|(\S+)/g;
+    let match = re.exec(raw);
+    while (match) {
+        tokens.push(match[1] ?? match[2] ?? match[3] ?? "");
+        match = re.exec(raw);
+    }
+    return tokens;
+}
+export function isRoutineCodingAgentMessage(message) {
+    return (message.source === "coding-agent" &&
+        ROUTINE_CODING_AGENT_RE.test(message.text));
+}
+export * from "./coding-agent-session-state.js";
+// Static navigation commands — always present; palette builder binds setTab.
+export const NAV_COMMANDS = [
+    { id: "nav-chat", label: "Open Chat", tab: "chat" },
+    { id: "nav-apps", label: "Open Apps", tab: "apps" },
+    { id: "nav-character", label: "Open Character", tab: "character" },
+    { id: "nav-triggers", label: "Open Heartbeats", tab: "triggers" },
+    { id: "nav-inventory", label: "Open Wallet", tab: "inventory" },
+    { id: "nav-documents", label: "Open Knowledge", tab: "documents" },
+    { id: "nav-connectors", label: "Open Connectors", tab: "connectors" },
+    { id: "nav-plugins", label: "Open Plugins", tab: "plugins" },
+    { id: "nav-settings", label: "Open Settings", tab: "settings" },
+    { id: "nav-database", label: "Open Database", tab: "database" },
+    { id: "nav-logs", label: "Open Logs", tab: "logs" },
+];
+export const DESKTOP_COMMAND_CLICK_AUDIT = [
+    {
+        id: "desktop-open-workspace",
+        entryPoint: "command-palette",
+        label: "Open Desktop Workspace",
+        expectedAction: "Open a detached settings window focused on the desktop workspace section.",
+        runtimeRequirement: "desktop",
+        coverage: "automated",
+    },
+    {
+        id: "desktop-open-voice-controls",
+        entryPoint: "command-palette",
+        label: "Open Voice Controls",
+        expectedAction: "Open a detached settings window focused on the voice section.",
+        runtimeRequirement: "desktop",
+        coverage: "automated",
+    },
+    {
+        id: "desktop-focus-main-window",
+        entryPoint: "command-palette",
+        label: "Focus Main Window",
+        expectedAction: "Focus the main desktop window.",
+        runtimeRequirement: "desktop",
+        coverage: "automated",
+    },
+    ...DESKTOP_WORKSPACE_SURFACES.map((surface) => ({
+        id: `desktop-command-${surface.id}`,
+        entryPoint: "command-palette",
+        label: `Open ${surface.label}`,
+        expectedAction: `Open the detached ${surface.id} surface from the command palette.`,
+        runtimeRequirement: "desktop",
+        coverage: "automated",
+    })),
+];
+export function buildCommands(args) {
+    const { agentState, activeGameViewerUrl, handleStart, handleStop, handleRestart, setTab, setAppsSubTab, loadPlugins, loadSkills, loadLogs, loadWorkbench, handleChatClear, openBugReport, desktopRuntime, focusDesktopMainWindow, openDesktopSettingsWindow, openDesktopSurfaceWindow, } = args;
+    const commands = [];
+    // Agent control
+    if (agentState === "stopped" || agentState === "not_started") {
+        commands.push({
+            id: "start-agent",
+            label: "Start Agent",
+            category: "agent",
+            action: handleStart,
+        });
+    }
+    else {
+        commands.push({
+            id: "stop-agent",
+            label: "Stop Agent",
+            category: "agent",
+            action: handleStop,
+        });
+    }
+    commands.push({
+        id: "restart-agent",
+        label: "Restart Agent",
+        category: "agent",
+        shortcut: "Ctrl+R",
+        action: handleRestart,
+    });
+    // Navigation
+    for (const nav of NAV_COMMANDS) {
+        commands.push({
+            id: nav.id,
+            label: nav.label,
+            category: "navigation",
+            action: () => setTab(nav.tab),
+        });
+    }
+    if (activeGameViewerUrl.trim()) {
+        commands.push({
+            id: "nav-current-game",
+            label: "Open Current Game",
+            category: "navigation",
+            action: () => {
+                setTab("apps");
+                setAppsSubTab();
+            },
+        });
+    }
+    if (desktopRuntime) {
+        commands.push({
+            id: "desktop-open-workspace",
+            label: "Open Desktop Workspace",
+            category: "desktop",
+            action: () => openDesktopSettingsWindow("desktop"),
+        }, {
+            id: "desktop-open-voice-controls",
+            label: "Open Voice Controls",
+            category: "desktop",
+            action: () => openDesktopSettingsWindow("voice"),
+        }, {
+            id: "desktop-focus-main-window",
+            label: "Focus Main Window",
+            category: "desktop",
+            action: focusDesktopMainWindow,
+        }, ...DESKTOP_WORKSPACE_SURFACES.map((surface) => ({
+            id: `desktop-command-${surface.id}`,
+            label: `Open ${surface.label}`,
+            category: "desktop",
+            hint: surface.description,
+            action: () => openDesktopSurfaceWindow(surface.id),
+        })));
+    }
+    // Refresh
+    commands.push({
+        id: "refresh-plugins",
+        label: "Refresh Features",
+        category: "refresh",
+        action: loadPlugins,
+    }, {
+        id: "refresh-skills",
+        label: "Refresh Skills",
+        category: "refresh",
+        action: loadSkills,
+    }, {
+        id: "refresh-logs",
+        label: "Refresh Logs",
+        category: "refresh",
+        action: loadLogs,
+    }, {
+        id: "refresh-workbench",
+        label: "Refresh Workbench",
+        category: "refresh",
+        action: loadWorkbench,
+    });
+    // Utility
+    commands.push({
+        id: "chat-clear",
+        label: "Clear Chat",
+        category: "utility",
+        action: handleChatClear,
+    }, {
+        id: "report-bug",
+        label: "Report Bug",
+        category: "utility",
+        action: openBugReport,
+    });
+    return commands;
+}

package/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/components/accounts/AccountCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccountCard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/accounts/AccountCard.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAkBH,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAIxE,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;AAwHD,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,2CAsPlB"}

package/components/accounts/AccountCard.js

@@ -0,0 +1,159 @@
+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, cn, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Spinner, StatusBadge, } from "@elizaos/ui";
+import { ChevronDown, ChevronUp, Trash2 } from "lucide-react";
+import { useCallback, useState } from "react";
+import { useApp } from "../../state/index.js";
+import { EditableAccountLabel } from "./EditableAccountLabel.js";
+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 [confirmingDelete, setConfirmingDelete] = useState(false);
+    const [deleteBusy, setDeleteBusy] = useState(false);
+    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 isCodingPlan = account.providerId === "zai-coding" || account.providerId === "kimi-coding";
+    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 }), _jsx(EditableAccountLabel, { value: account.label, onSubmit: (label) => onPatch({ label }), disabled: saving, inputAriaLabel: t("accounts.label.edit", {
+                                    defaultValue: "Account label",
+                                }), editTitle: t("accounts.label.editTooltip", {
+                                    defaultValue: "Click to rename",
+                                }) }), _jsx(Badge, { variant: "outline", className: "shrink-0 text-[10px] uppercase", children: isCodingPlan
+                                    ? t("accounts.source.codingPlan", {
+                                        defaultValue: "Coding plan",
+                                    })
+                                    : 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("div", { 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/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/components/accounts/AccountList.d.ts.map

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

package/components/accounts/AccountList.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Spinner } from "@elizaos/ui";
+import { Plus } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
+import { useAccounts } from "../../hooks/useAccounts.js";
+import { useApp } from "../../state/index.js";
+import { AccountCard } from "./AccountCard.js";
+import { AddAccountDialog } from "./AddAccountDialog.js";
+import { RotationStrategyPicker } from "./RotationStrategyPicker.js";
+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 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;
+        const selfOriginal = self.priority;
+        const neighbourOriginal = neighbour.priority;
+        // Swap priorities via two sequential PATCHes. There's no atomic
+        // server-side swap, so on failure of the second call we roll the
+        // first one back so the user doesn't end up with two accounts at
+        // the same priority. Worst case a partial-failure leaves the
+        // original ordering with a flash; never a corrupted ordering.
+        await accounts.patch(providerId, self.id, {
+            priority: neighbourOriginal,
+        });
+        try {
+            await accounts.patch(providerId, neighbour.id, {
+                priority: selfOriginal,
+            });
+        }
+        catch (err) {
+            try {
+                await accounts.patch(providerId, self.id, {
+                    priority: selfOriginal,
+                });
+            }
+            catch {
+                // Rollback failed — refresh will reconcile from server state.
+                void accounts.refresh();
+            }
+            throw err;
+        }
+    }, [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", onClick: () => setAddDialogOpen(true), 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/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.
+ *
+ * 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.
+ *   - **Coding-plan key**: simple label + key form for dedicated coding
+ *     endpoints only. These credentials are not written to general API env vars.
+ *   - **External CLI**: show the first-party CLI login instruction; no token import.
+ *   - **Unavailable**: explain why the provider cannot be linked safely.
+ *   - **API key**: simple label + key form, immediate POST.
+ *
+ * The dialog is provider-aware: subscription providers are intentionally
+ * constrained to their first-party coding surfaces.
+ */
+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/components/accounts/AddAccountDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddAccountDialog.d.ts","sourceRoot":"","sources":["../../../../../../src/components/accounts/AddAccountDialog.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,KAAK,EACV,mBAAmB,EACnB,uBAAuB,EACxB,MAAM,iBAAiB,CAAC;AAyBzB,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;AAyGD,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,UAAU,EACV,OAAO,EACP,SAAS,GACV,EAAE,qBAAqB,2CA2gBvB"}