@elizaos/app-core 2.0.0-alpha.37

package/dist/components/ConfigPageView.js

@@ -0,0 +1,275 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Config page — agent-level configuration.
+ *
+ * Sections:
+ *   1. Wallet & RPC providers
+ *   2. Secrets (modal)
+ */
+import { useCallback, useEffect, useState } from "react";
+import { client } from "../api";
+import { ConfigRenderer, defaultRegistry, } from "../config";
+import { useApp } from "../state";
+import { SecretsView } from "./SecretsView";
+const EVM_RPC_OPTIONS = [
+    { id: "eliza-cloud", label: "Eliza Cloud" },
+    { id: "alchemy", label: "Alchemy" },
+    { id: "infura", label: "Infura" },
+    { id: "ankr", label: "Ankr" },
+];
+const BSC_RPC_OPTIONS = [
+    { id: "eliza-cloud", label: "Eliza Cloud" },
+    { id: "nodereal", label: "NodeReal" },
+    { id: "quicknode", label: "QuickNode" },
+];
+const SOLANA_RPC_OPTIONS = [
+    { id: "eliza-cloud", label: "Eliza Cloud" },
+    { id: "helius-birdeye", label: "Helius + Birdeye" },
+];
+function CloudRpcStatus({ connected, credits, creditsLow, creditsCritical, loginBusy, onLogin, }) {
+    const { t, setState, setTab } = useApp();
+    if (connected) {
+        return (_jsxs("div", { className: "flex items-center gap-2 text-xs", children: [_jsx("span", { className: "inline-block w-2 h-2 rounded-full bg-[var(--ok,#16a34a)]" }), _jsx("span", { className: "font-semibold", children: t("configpageview.ConnectedToElizaC") }), credits !== null && (_jsxs("span", { className: "text-[var(--muted)] ml-auto", children: [t("configpageview.Credits"), " ", _jsxs("span", { className: creditsCritical
+                                ? "text-[var(--danger,#e74c3c)] font-bold"
+                                : creditsLow
+                                    ? "rounded-md bg-[var(--warn-subtle)] px-1.5 py-0.5 text-[var(--text)] font-bold"
+                                    : "", children: ["$", credits.toFixed(2)] }), _jsx("button", { type: "button", onClick: () => {
+                                setState("cloudDashboardView", "billing");
+                                setTab("settings");
+                            }, className: "ml-1.5 text-[10px] text-[var(--text)] underline decoration-[var(--accent)] underline-offset-2 hover:opacity-80 bg-transparent border-0 p-0 cursor-pointer", children: t("configpageview.TopUp") })] }))] }));
+    }
+    return (_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center gap-2 text-xs", children: [_jsx("span", { className: "inline-block w-2 h-2 rounded-full bg-[var(--muted)]" }), _jsx("span", { className: "text-[var(--muted)]", children: t("configpageview.RequiresElizaCloud") })] }), _jsx("button", { type: "button", className: "btn text-xs py-[3px] px-3 !mt-0 font-bold", onClick: () => void onLogin(), disabled: loginBusy, children: loginBusy ? "Connecting..." : "Log in" })] }));
+}
+function buildRpcRendererConfig(selectedProvider, providerConfigs, rpcFieldValues) {
+    const fields = providerConfigs[selectedProvider];
+    if (!fields?.length)
+        return null;
+    const props = {
+        schema: {
+            type: "object",
+            properties: {},
+            required: [],
+        },
+        hints: {},
+        values: {},
+        setKeys: new Set(),
+    };
+    for (const field of fields) {
+        props.schema.properties[field.configKey] = {
+            type: "string",
+            description: field.label,
+        };
+        props.hints[field.configKey] = {
+            label: field.label,
+            sensitive: true,
+            placeholder: field.isSet
+                ? "Already set — leave blank to keep"
+                : "Enter API key",
+            width: "full",
+        };
+        if (rpcFieldValues[field.configKey] !== undefined) {
+            props.values[field.configKey] = rpcFieldValues[field.configKey];
+        }
+        if (field.isSet) {
+            props.setKeys.add(field.configKey);
+        }
+    }
+    return props;
+}
+function RpcConfigSection({ title, description, options, selectedProvider, onSelect, providerConfigs, rpcFieldValues, onRpcFieldChange, cloud, containerClassName, }) {
+    const rpcConfig = buildRpcRendererConfig(selectedProvider, providerConfigs, rpcFieldValues);
+    return (_jsxs("div", { children: [_jsx("div", { className: "text-xs font-bold mb-1", children: title }), _jsx("div", { className: "text-[11px] text-[var(--muted)] mb-2", children: description }), renderRpcProviderButtons(options, selectedProvider, onSelect, containerClassName, (key) => {
+                // hack to get t function without breaking hook rules
+                return key === "elizaclouddashboard.ElizaCloud" ? "Eliza Cloud" : key;
+            }), _jsx("div", { className: "mt-3", children: selectedProvider === "eliza-cloud" ? (_jsx(CloudRpcStatus, { connected: cloud.connected, credits: cloud.credits, creditsLow: cloud.creditsLow, creditsCritical: cloud.creditsCritical, topUpUrl: cloud.topUpUrl, loginBusy: cloud.loginBusy, onLogin: () => void cloud.onLogin() })) : rpcConfig ? (_jsx(ConfigRenderer, { schema: rpcConfig.schema, hints: rpcConfig.hints, values: rpcConfig.values, setKeys: rpcConfig.setKeys, registry: defaultRegistry, onChange: onRpcFieldChange })) : null })] }));
+}
+function renderRpcProviderButtons(options, selectedProvider, onSelect, containerClassName, tFallback) {
+    return (_jsx("div", { className: containerClassName, children: options.map((provider) => {
+            const active = selectedProvider === provider.id;
+            return (_jsx("button", { type: "button", className: `flex min-h-[44px] items-center justify-center rounded-lg border px-3 py-2 text-center text-xs font-semibold leading-tight shadow-sm transition-colors ${active
+                    ? "border-[var(--accent)] bg-[var(--accent)] text-[var(--accent-foreground)]"
+                    : "border-[var(--border)] bg-[var(--card)] text-[var(--text)] hover:border-[var(--accent)] hover:bg-[var(--bg-hover)]"}`, onClick: () => onSelect(provider.id), children: _jsx("div", { className: "leading-tight", children: provider.id === "eliza-cloud" && tFallback
+                        ? "Eliza Cloud"
+                        : provider.label }) }, provider.id));
+        }) }));
+}
+const CLOUD_SERVICE_DEFS = [
+    {
+        key: "inference",
+        label: "Model Inference",
+        description: "Use Eliza Cloud for LLM calls. Turn off to use your own API keys (Anthropic, OpenAI, etc.)",
+    },
+    {
+        key: "rpc",
+        label: "Blockchain RPC",
+        description: "Use Eliza Cloud RPC endpoints for EVM, BSC, and Solana",
+    },
+    {
+        key: "media",
+        label: "Media Generation",
+        description: "Use Eliza Cloud for image, video, audio, and vision",
+    },
+    {
+        key: "tts",
+        label: "Text-to-Speech",
+        description: "Use Eliza Cloud for TTS voice synthesis",
+    },
+    {
+        key: "embeddings",
+        label: "Embeddings",
+        description: "Use Eliza Cloud for text embedding generation",
+    },
+];
+function CloudServicesSection() {
+    const { t } = useApp();
+    const [services, setServices] = useState({
+        inference: true,
+        rpc: true,
+        media: true,
+        tts: true,
+        embeddings: true,
+    });
+    const [saving, setSaving] = useState(false);
+    const [loaded, setLoaded] = useState(false);
+    const [needsRestart, setNeedsRestart] = useState(false);
+    // Load current config on mount
+    useEffect(() => {
+        let cancelled = false;
+        client
+            .getConfig()
+            .then((cfg) => {
+            if (cancelled)
+                return;
+            const cloud = cfg.cloud;
+            if (cloud?.services) {
+                setServices((prev) => ({
+                    ...prev,
+                    ...Object.fromEntries(Object.entries(cloud.services ?? {}).filter(([, v]) => typeof v === "boolean")),
+                }));
+            }
+            setLoaded(true);
+        })
+            .catch(() => setLoaded(true));
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    const handleToggle = useCallback(async (key) => {
+        const newValue = !services[key];
+        const updated = { ...services, [key]: newValue };
+        setServices(updated);
+        setSaving(true);
+        // Also set inferenceMode based on inference toggle
+        const inferenceMode = updated.inference ? "cloud" : "byok";
+        try {
+            await client.updateConfig({
+                cloud: { services: updated, inferenceMode },
+            });
+            setNeedsRestart(true);
+        }
+        catch (err) {
+            // Revert on error
+            setServices(services);
+            console.error("[config] Failed to save cloud services:", err);
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [services]);
+    if (!loaded)
+        return null;
+    return (_jsxs("div", { className: "p-4 border border-[var(--border)] bg-[var(--card)] mt-4", children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsx("div", { className: "font-bold text-sm", children: t("configpageview.CloudServices") }), needsRestart && (_jsx("span", { className: "rounded-full border border-[var(--warn)] bg-[var(--warn-subtle)] px-2 py-0.5 text-[11px] font-medium text-[var(--text)]", children: t("configpageview.RestartRequiredFor") }))] }), _jsx("p", { className: "text-[12px] text-[var(--muted)] mb-4", children: t("configpageview.ChooseWhichElizaCl") }), _jsx("div", { className: "space-y-2", children: CLOUD_SERVICE_DEFS.map(({ key, label, description }) => (_jsxs("div", { className: "flex items-center justify-between p-2.5 border border-[var(--border)] rounded cursor-pointer hover:border-[var(--accent)] transition-colors", children: [_jsxs("div", { className: "flex-1 min-w-0 mr-3", children: [_jsx("div", { className: "text-[13px] font-medium", id: `cloud-service-${key}`, children: label }), _jsx("div", { className: "text-[11px] text-[var(--muted)] mt-0.5", children: description })] }), _jsx("button", { type: "button", role: "switch", "aria-checked": services[key], "aria-labelledby": `cloud-service-${key}`, disabled: saving, onClick: () => void handleToggle(key), className: `relative inline-flex h-5 w-9 shrink-0 rounded-full border-2 border-transparent transition-colors cursor-pointer ${services[key] ? "bg-[var(--accent)]" : "bg-[var(--border)]"}`, children: _jsx("span", { className: `pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow transform transition-transform ${services[key] ? "translate-x-4" : "translate-x-0"}` }) })] }, key))) })] }));
+}
+/* ── ConfigPageView ──────────────────────────────────────────────────── */
+export function ConfigPageView({ embedded = false }) {
+    const { t, elizaCloudConnected, elizaCloudCredits, elizaCloudCreditsLow, elizaCloudCreditsCritical, elizaCloudTopUpUrl, elizaCloudLoginBusy, walletConfig, walletApiKeySaving, handleWalletApiKeySave, handleCloudLogin, } = useApp();
+    const [secretsOpen, setSecretsOpen] = useState(false);
+    /* ── RPC provider field values ─────────────────────────────────────── */
+    const [rpcFieldValues, setRpcFieldValues] = useState({});
+    const handleRpcFieldChange = useCallback((key, value) => {
+        setRpcFieldValues((prev) => ({ ...prev, [key]: String(value ?? "") }));
+    }, []);
+    const handleWalletSaveAll = useCallback(() => {
+        const config = {};
+        for (const [key, value] of Object.entries(rpcFieldValues)) {
+            if (value)
+                config[key] = value;
+        }
+        void handleWalletApiKeySave(config);
+    }, [handleWalletApiKeySave, rpcFieldValues]);
+    /* ── RPC provider selection state ──────────────────────────────────── */
+    const [selectedEvmRpc, setSelectedEvmRpc] = useState("eliza-cloud");
+    const [selectedBscRpc, setSelectedBscRpc] = useState("eliza-cloud");
+    const [selectedSolanaRpc, setSelectedSolanaRpc] = useState("eliza-cloud");
+    const evmRpcConfigs = {
+        alchemy: [
+            {
+                configKey: "ALCHEMY_API_KEY",
+                label: "Alchemy API Key",
+                isSet: walletConfig?.alchemyKeySet ?? false,
+            },
+        ],
+        infura: [
+            {
+                configKey: "INFURA_API_KEY",
+                label: "Infura API Key",
+                isSet: walletConfig?.infuraKeySet ?? false,
+            },
+        ],
+        ankr: [
+            {
+                configKey: "ANKR_API_KEY",
+                label: "Ankr API Key",
+                isSet: walletConfig?.ankrKeySet ?? false,
+            },
+        ],
+    };
+    const bscRpcConfigs = {
+        nodereal: [
+            {
+                configKey: "NODEREAL_BSC_RPC_URL",
+                label: "NodeReal BSC RPC URL",
+                isSet: walletConfig?.nodeRealBscRpcSet ?? false,
+            },
+        ],
+        quicknode: [
+            {
+                configKey: "QUICKNODE_BSC_RPC_URL",
+                label: "QuickNode BSC RPC URL",
+                isSet: walletConfig?.quickNodeBscRpcSet ?? false,
+            },
+        ],
+    };
+    const solanaRpcConfigs = {
+        "helius-birdeye": [
+            {
+                configKey: "HELIUS_API_KEY",
+                label: "Helius API Key",
+                isSet: walletConfig?.heliusKeySet ?? false,
+            },
+            {
+                configKey: "BIRDEYE_API_KEY",
+                label: "Birdeye API Key",
+                isSet: walletConfig?.birdeyeKeySet ?? false,
+            },
+        ],
+    };
+    const cloudStatusProps = {
+        connected: elizaCloudConnected,
+        credits: elizaCloudCredits,
+        creditsLow: elizaCloudCreditsLow,
+        creditsCritical: elizaCloudCreditsCritical,
+        topUpUrl: elizaCloudTopUpUrl,
+        loginBusy: elizaCloudLoginBusy,
+        onLogin: () => void handleCloudLogin(),
+    };
+    return (_jsxs("div", { children: [!embedded && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "text-lg font-bold mb-1", children: t("configpageview.Config") }), _jsx("p", { className: "text-[13px] text-[var(--muted)] mb-5", children: t("configpageview.WalletProvidersAnd") })] })), _jsxs("div", { className: "p-4 border border-[var(--border)] bg-[var(--card)]", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsx("div", { className: "font-bold text-sm", children: t("configpageview.WalletAmpRPC") }), _jsxs("button", { type: "button", className: "settings-button flex items-center gap-1.5 text-[12px] text-[var(--muted)] hover:text-[var(--txt)] bg-transparent border border-[var(--border)] rounded cursor-pointer transition-colors hover:border-[var(--accent)]", onClick: () => setSecretsOpen(true), title: t("configpageview.SecretsVault1"), children: [_jsxs("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("title", { children: t("configpageview.SecretsVault") }), _jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }), _jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })] }), t("configpageview.Secrets")] })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: [_jsx(RpcConfigSection, { title: t("configpageview.BSC"), description: "BNB Smart Chain \u2014 trading and market feed", options: BSC_RPC_OPTIONS, selectedProvider: selectedBscRpc, onSelect: setSelectedBscRpc, providerConfigs: bscRpcConfigs, rpcFieldValues: rpcFieldValues, onRpcFieldChange: handleRpcFieldChange, cloud: cloudStatusProps, containerClassName: "grid grid-cols-3 gap-1.5" }), _jsx(RpcConfigSection, { title: t("configpageview.EVM"), description: "Ethereum, Base, Arbitrum, Optimism, Polygon", options: EVM_RPC_OPTIONS, selectedProvider: selectedEvmRpc, onSelect: setSelectedEvmRpc, providerConfigs: evmRpcConfigs, rpcFieldValues: rpcFieldValues, onRpcFieldChange: handleRpcFieldChange, cloud: cloudStatusProps, containerClassName: "grid grid-cols-4 gap-1.5" }), _jsx(RpcConfigSection, { title: t("configpageview.Solana"), description: "Solana mainnet tokens and NFTs", options: SOLANA_RPC_OPTIONS, selectedProvider: selectedSolanaRpc, onSelect: setSelectedSolanaRpc, providerConfigs: solanaRpcConfigs, rpcFieldValues: rpcFieldValues, onRpcFieldChange: handleRpcFieldChange, cloud: cloudStatusProps, containerClassName: "grid grid-cols-2 gap-1.5" })] }), _jsx("div", { className: "flex justify-end mt-4", children: _jsx("button", { type: "button", className: "btn text-[11px] py-1 px-3.5 !mt-0", onClick: handleWalletSaveAll, disabled: walletApiKeySaving, children: walletApiKeySaving ? "Saving..." : "Save" }) })] }), elizaCloudConnected && _jsx(CloudServicesSection, {}), secretsOpen && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", onClick: (e) => {
+                    if (e.target === e.currentTarget)
+                        setSecretsOpen(false);
+                }, onKeyDown: (e) => {
+                    if (e.key === "Escape" || e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        setSecretsOpen(false);
+                    }
+                }, role: "dialog", "aria-modal": "true", children: _jsxs("div", { className: "w-full max-w-2xl max-h-[80vh] border border-[var(--border)] bg-[var(--card)] p-5 shadow-lg flex flex-col", children: [_jsxs("div", { className: "flex items-center justify-between mb-4 flex-shrink-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-[var(--accent)]", children: [_jsx("title", { children: t("configpageview.SecretsVault") }), _jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }), _jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })] }), _jsx("span", { className: "font-bold text-sm", children: t("configpageview.SecretsVault1") })] }), _jsx("button", { type: "button", className: "text-[var(--muted)] hover:text-[var(--txt)] text-lg leading-none px-1 bg-transparent border-0 cursor-pointer", onClick: () => setSecretsOpen(false), children: t("bugreportmodal.Times") })] }), _jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: _jsx(SecretsView, {}) })] }) }))] }));
+}

package/dist/components/ConfigSaveFooter.d.ts

@@ -0,0 +1,8 @@
+export declare function ConfigSaveFooter({ dirty, saving, saveError, saveSuccess, onSave, }: {
+    dirty: boolean;
+    saving: boolean;
+    saveError: string | null;
+    saveSuccess: boolean;
+    onSave: () => void;
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=ConfigSaveFooter.d.ts.map

package/dist/components/ConfigSaveFooter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigSaveFooter.d.ts","sourceRoot":"","sources":["../../src/components/ConfigSaveFooter.tsx"],"names":[],"mappings":"AAGA,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,MAAM,EACN,SAAS,EACT,WAAW,EACX,MAAM,GACP,EAAE;IACD,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,kDAyBA"}

package/dist/components/ConfigSaveFooter.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@elizaos/ui";
+import { useApp } from "../state";
+export function ConfigSaveFooter({ dirty, saving, saveError, saveSuccess, onSave, }) {
+    const { t } = useApp();
+    if (!dirty) {
+        return null;
+    }
+    return (_jsxs("div", { className: "flex items-center justify-end gap-3 pt-2 border-t border-[var(--border)]", children: [saveError && _jsx("span", { className: "text-xs text-red-500", children: saveError }), saveSuccess && (_jsx("span", { className: "text-xs text-green-600", children: t("configsavefooter.Saved") })), _jsx(Button, { type: "button", size: "sm", className: "rounded-lg", disabled: saving, onClick: onSave, children: saving ? "Saving..." : "Save Changes" })] }));
+}

package/dist/components/ConfirmModal.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Branded confirmation modal to replace native window.confirm dialogs.
+ *
+ * Provides consistent styling, Escape-to-cancel keyboard handling,
+ * and focus management.
+ */
+export interface ConfirmModalProps {
+    open: boolean;
+    title?: string;
+    message: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    tone?: "danger" | "warn" | "default";
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+export interface PromptModalProps {
+    open: boolean;
+    title?: string;
+    message: string;
+    placeholder?: string;
+    defaultValue?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    onConfirm: (value: string) => void;
+    onCancel: () => void;
+}
+export declare function ConfirmModal({ open, title, message, confirmLabel, cancelLabel, tone, onConfirm, onCancel, }: ConfirmModalProps): import("react").ReactNode;
+export declare function PromptModal({ open, title, message, placeholder, defaultValue, confirmLabel, cancelLabel, onConfirm, onCancel, }: PromptModalProps): import("react").ReactNode;
+/**
+ * Hook providing an async confirm() that manages <ConfirmModal> state.
+ *
+ * Usage:
+ *   const { confirm, modalProps } = useConfirm();
+ *   const ok = await confirm({ message: "Delete?" });
+ *   // render <ConfirmModal {...modalProps} /> somewhere in JSX
+ */
+export interface ConfirmOptions {
+    title?: string;
+    message: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    tone?: "danger" | "warn" | "default";
+}
+export declare function useConfirm(): {
+    confirm: (opts: ConfirmOptions) => Promise<boolean>;
+    modalProps: ConfirmModalProps;
+};
+export interface PromptOptions {
+    title?: string;
+    message: string;
+    placeholder?: string;
+    defaultValue?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+}
+export declare function usePrompt(): {
+    prompt: (opts: PromptOptions) => Promise<string | null>;
+    modalProps: PromptModalProps;
+};
+//# sourceMappingURL=ConfirmModal.d.ts.map

package/dist/components/ConfirmModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmModal.d.ts","sourceRoot":"","sources":["../../src/components/ConfirmModal.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;IACrC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAkBD,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,KAAiB,EACjB,OAAO,EACP,YAAwB,EACxB,WAAsB,EACtB,IAAgB,EAChB,SAAS,EACT,QAAQ,GACT,EAAE,iBAAiB,6BAkGnB;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,KAAqB,EACrB,OAAO,EACP,WAAW,EACX,YAAiB,EACjB,YAAwB,EACxB,WAAsB,EACtB,SAAS,EACT,QAAQ,GACT,EAAE,gBAAgB,6BA+GlB;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;CACtC;AAED,wBAAgB,UAAU;oBAOf,cAAc,KAAG,OAAO,CAAC,OAAO,CAAC;;EA4B3C;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,SAAS;mBAOd,aAAa,KAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;;EA4BhD"}

package/dist/components/ConfirmModal.js

@@ -0,0 +1,164 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Branded confirmation modal to replace native window.confirm dialogs.
+ *
+ * Provides consistent styling, Escape-to-cancel keyboard handling,
+ * and focus management.
+ */
+import { useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+function canPortalToBody() {
+    return (typeof document !== "undefined" &&
+        !!document.body &&
+        typeof document.body.appendChild === "function" &&
+        !globalThis.__TEST_RENDERER__);
+}
+function renderModalPortal(content) {
+    if (canPortalToBody()) {
+        return createPortal(content, document.body);
+    }
+    return content;
+}
+export function ConfirmModal({ open, title = "Confirm", message, confirmLabel = "Confirm", cancelLabel = "Cancel", tone = "default", onConfirm, onCancel, }) {
+    const confirmRef = useRef(null);
+    useEffect(() => {
+        if (open) {
+            const t = setTimeout(() => confirmRef.current?.focus(), 50);
+            return () => clearTimeout(t);
+        }
+    }, [open]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === "Escape") {
+            e.preventDefault();
+            onCancel();
+        }
+    }, [onCancel]);
+    if (!open)
+        return null;
+    const confirmBtnStyle = tone === "danger"
+        ? { background: "#ef4444", color: "#fff" }
+        : tone === "warn"
+            ? { background: "#f59e0b", color: "#fff" }
+            : { background: "#f0b232", color: "#000" };
+    const content = (_jsx("div", { className: "fixed inset-0 flex items-center justify-center", style: {
+            zIndex: 10001,
+            background: "color-mix(in srgb, var(--bg) 95%, transparent)",
+            backdropFilter: "blur(24px)",
+        }, onClick: (e) => {
+            if (e.target === e.currentTarget)
+                onCancel();
+        }, onKeyDown: handleKeyDown, role: "dialog", "aria-modal": "true", "aria-label": title, tabIndex: -1, children: _jsxs("div", { className: "rounded-xl max-w-md w-full mx-4 p-6", style: {
+                background: "color-mix(in srgb, var(--bg) 96%, transparent)",
+                border: "1px solid color-mix(in srgb, var(--accent) 18%, transparent)",
+                backdropFilter: "blur(24px)",
+                boxShadow: "var(--shadow-lg)",
+            }, children: [_jsx("h2", { className: "text-base font-bold mb-3", style: { color: "var(--text)" }, children: title }), _jsx("p", { className: "text-sm whitespace-pre-line mb-6", style: { color: "var(--muted)" }, children: message }), _jsxs("div", { className: "flex items-center justify-end gap-3", children: [_jsx("button", { type: "button", onClick: onCancel, className: "px-4 py-2 text-sm rounded-md transition-colors cursor-pointer", style: {
+                                border: "1px solid var(--border)",
+                                color: "var(--muted)",
+                                background: "transparent",
+                            }, children: cancelLabel }), _jsx("button", { ref: confirmRef, type: "button", onClick: onConfirm, className: "px-4 py-2 text-sm rounded-md transition-opacity font-medium cursor-pointer border-0", style: confirmBtnStyle, children: confirmLabel })] })] }) }));
+    // Portal to body to escape any 3D transform stacking contexts (e.g. CompanionShell).
+    // Skip portal in test environments where react-test-renderer can't handle real DOM portals.
+    return renderModalPortal(content);
+}
+export function PromptModal({ open, title = "Enter Value", message, placeholder, defaultValue = "", confirmLabel = "Confirm", cancelLabel = "Cancel", onConfirm, onCancel, }) {
+    const inputRef = useRef(null);
+    const [value, setValue] = useState(defaultValue);
+    useEffect(() => {
+        if (!open)
+            return;
+        setValue(defaultValue);
+        const t = setTimeout(() => inputRef.current?.focus(), 50);
+        return () => clearTimeout(t);
+    }, [defaultValue, open]);
+    const handleConfirm = useCallback(() => {
+        onConfirm(value);
+    }, [onConfirm, value]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === "Escape") {
+            e.preventDefault();
+            onCancel();
+            return;
+        }
+        if (e.key === "Enter") {
+            e.preventDefault();
+            handleConfirm();
+        }
+    }, [handleConfirm, onCancel]);
+    if (!open)
+        return null;
+    const content = (_jsx("div", { className: "fixed inset-0 flex items-center justify-center", style: {
+            zIndex: 10001,
+            background: "color-mix(in srgb, var(--bg) 95%, transparent)",
+            backdropFilter: "blur(24px)",
+        }, onClick: (e) => {
+            if (e.target === e.currentTarget)
+                onCancel();
+        }, onKeyDown: handleKeyDown, role: "dialog", "aria-modal": "true", "aria-label": title, tabIndex: -1, children: _jsxs("div", { className: "rounded-xl max-w-md w-full mx-4 p-6", style: {
+                background: "color-mix(in srgb, var(--bg) 96%, transparent)",
+                border: "1px solid color-mix(in srgb, var(--accent) 18%, transparent)",
+                backdropFilter: "blur(24px)",
+                boxShadow: "var(--shadow-lg)",
+            }, children: [_jsx("h2", { className: "text-base font-bold mb-3", style: { color: "var(--text)" }, children: title }), _jsx("p", { className: "text-sm whitespace-pre-line mb-4", style: { color: "var(--muted)" }, children: message }), _jsx("input", { ref: inputRef, type: "text", value: value, placeholder: placeholder, onChange: (e) => setValue(e.target.value), className: "w-full rounded-md px-3 py-2 text-sm mb-6", style: {
+                        background: "var(--bg-hover)",
+                        color: "var(--text)",
+                        border: "1px solid var(--border)",
+                    } }), _jsxs("div", { className: "flex items-center justify-end gap-3", children: [_jsx("button", { type: "button", onClick: onCancel, className: "px-4 py-2 text-sm rounded-md transition-colors cursor-pointer", style: {
+                                border: "1px solid var(--border)",
+                                color: "var(--muted)",
+                                background: "transparent",
+                            }, children: cancelLabel }), _jsx("button", { type: "button", onClick: handleConfirm, className: "px-4 py-2 text-sm rounded-md transition-opacity font-medium cursor-pointer border-0", style: { background: "#f0b232", color: "#000" }, children: confirmLabel })] })] }) }));
+    return renderModalPortal(content);
+}
+export function useConfirm() {
+    const [state, setState] = useState(null);
+    const confirm = useCallback((opts) => new Promise((resolve) => {
+        setState({ opts, resolve });
+    }), []);
+    const modalProps = state
+        ? {
+            open: true,
+            ...state.opts,
+            onConfirm: () => {
+                state.resolve(true);
+                setState(null);
+            },
+            onCancel: () => {
+                state.resolve(false);
+                setState(null);
+            },
+        }
+        : {
+            open: false,
+            message: "",
+            onConfirm: () => { },
+            onCancel: () => { },
+        };
+    return { confirm, modalProps };
+}
+export function usePrompt() {
+    const [state, setState] = useState(null);
+    const prompt = useCallback((opts) => new Promise((resolve) => {
+        setState({ opts, resolve });
+    }), []);
+    const modalProps = state
+        ? {
+            open: true,
+            ...state.opts,
+            onConfirm: (value) => {
+                state.resolve(value);
+                setState(null);
+            },
+            onCancel: () => {
+                state.resolve(null);
+                setState(null);
+            },
+        }
+        : {
+            open: false,
+            message: "",
+            onConfirm: () => { },
+            onCancel: () => { },
+        };
+    return { prompt, modalProps };
+}

package/dist/components/ConnectionFailedBanner.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Banner shown during WebSocket reconnection attempts (amber) and
+ * after all attempts are exhausted (red). Offers Retry when failed.
+ */
+export declare function ConnectionFailedBanner(): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=ConnectionFailedBanner.d.ts.map

package/dist/components/ConnectionFailedBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionFailedBanner.d.ts","sourceRoot":"","sources":["../../src/components/ConnectionFailedBanner.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,wBAAgB,sBAAsB,mDAmFrC"}

package/dist/components/ConnectionFailedBanner.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isElectrobunRuntime } from "../bridge";
+import { useApp } from "../state";
+/**
+ * Banner shown during WebSocket reconnection attempts (amber) and
+ * after all attempts are exhausted (red). Offers Retry when failed.
+ */
+export function ConnectionFailedBanner() {
+    const { t } = useApp();
+    const bannerTop = isElectrobunRuntime() ? 40 : 0;
+    const { backendConnection, backendDisconnectedBannerDismissed, dismissBackendDisconnectedBanner, retryBackendConnection, } = useApp();
+    if (!backendConnection)
+        return null;
+    if (backendConnection.state === "reconnecting") {
+        return (_jsxs("div", { className: "fixed left-0 right-0 z-[9999] flex items-center gap-3 bg-amber-500 px-4 py-2 text-[13px] font-medium text-white shadow-lg", style: { top: bannerTop }, children: [_jsxs("svg", { className: "h-4 w-4 shrink-0 animate-spin", viewBox: "0 0 24 24", fill: "none", "aria-label": "Reconnecting", role: "img", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })] }), _jsxs("span", { className: "truncate", children: [t("connectionfailedbanner.ReconnectingAtt"), " ", backendConnection.reconnectAttempt, "/", backendConnection.maxReconnectAttempts, ")"] })] }));
+    }
+    if (backendConnection.state === "failed" &&
+        !backendDisconnectedBannerDismissed) {
+        return (_jsxs("div", { className: "fixed left-0 right-0 z-[9999] flex items-center justify-between gap-3 bg-danger px-4 py-2 text-[13px] font-medium text-white shadow-lg", style: { top: bannerTop }, children: [_jsxs("span", { className: "truncate", children: [t("connectionfailedbanner.ConnectionLostAfte"), " ", backendConnection.maxReconnectAttempts, " ", t("connectionfailedbanner.attemptsRealTime")] }), _jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [_jsx("button", { type: "button", onClick: dismissBackendDisconnectedBanner, className: "rounded px-3 py-1 text-[12px] text-red-100 hover:bg-red-700 transition-colors cursor-pointer", children: t("skillsview.Dismiss") }), _jsx("button", { type: "button", onClick: retryBackendConnection, className: "rounded bg-white px-3 py-1 text-[12px] font-semibold text-red-700 hover:bg-red-50 transition-colors cursor-pointer", children: t("vectorbrowserview.RetryConnection") })] })] }));
+    }
+    return null;
+}

package/dist/components/ConnectorsPageView.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Connectors page — curated connector view.
+ */
+export declare function ConnectorsPageView({ inModal }?: {
+    inModal?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ConnectorsPageView.d.ts.map

package/dist/components/ConnectorsPageView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectorsPageView.d.ts","sourceRoot":"","sources":["../../src/components/ConnectorsPageView.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAIH,wBAAgB,kBAAkB,CAAC,EAAE,OAAO,EAAE,GAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAO,2CAMzE"}

package/dist/components/ConnectorsPageView.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Connectors page — curated connector view.
+ */
+import { PluginsView } from "./PluginsView";
+export function ConnectorsPageView({ inModal } = {}) {
+    return (_jsx("div", { className: "flex flex-col h-full", children: _jsx(PluginsView, { mode: "social", inModal: inModal ?? true }) }));
+}

package/dist/components/ConversationsSidebar.d.ts

@@ -0,0 +1,9 @@
+type ConversationsSidebarVariant = "default" | "game-modal";
+interface ConversationsSidebarProps {
+    mobile?: boolean;
+    onClose?: () => void;
+    variant?: ConversationsSidebarVariant;
+}
+export declare function ConversationsSidebar({ mobile, onClose, variant, }: ConversationsSidebarProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ConversationsSidebar.d.ts.map

package/dist/components/ConversationsSidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationsSidebar.d.ts","sourceRoot":"","sources":["../../src/components/ConversationsSidebar.tsx"],"names":[],"mappings":"AAUA,KAAK,2BAA2B,GAAG,SAAS,GAAG,YAAY,CAAC;AAE5D,UAAU,yBAAyB;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,2BAA2B,CAAC;CACvC;AAED,wBAAgB,oBAAoB,CAAC,EACnC,MAAc,EACd,OAAO,EACP,OAAmB,GACpB,EAAE,yBAAyB,2CAgQ3B"}