@elizaos/ui 2.0.0-beta.2 → 2.0.3-beta.3

package/components/settings/CloudAgentsSection.js

@@ -0,0 +1,422 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Bot, Check, Pencil, Play, Plus, Power, RefreshCw, Trash2, } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { client } from "../../api/index.js";
+import { getCloudAuthToken, resolveCloudAgentApiBase, } from "../../api/client-cloud.js";
+import { getBootConfig } from "../../config/boot-config.js";
+import { useBranding } from "../../config/branding.js";
+import { useAppSelector } from "../../state/index.js";
+import { createPersistedActiveServer, loadPersistedActiveServer, savePersistedActiveServer, } from "../../state/persistence.js";
+import { isCloudAgentWaking } from "../../state/types.js";
+import { Button } from "../ui/button.js";
+import { Input } from "../ui/input.js";
+import { StatusBadge } from "../ui/status-badge.js";
+import { agentLifecycleLabel, statusToneForState, } from "../ui/status-badge.helpers.js";
+import { SettingsGroup, SettingsRow, SettingsStack } from "./settings-layout.js";
+/** Maximum length accepted for a (new or edited) cloud agent name. */
+const AGENT_NAME_MAX_LENGTH = 60;
+/** How long to poll a delete job before giving up and forcing a refresh. */
+const DELETE_POLL_TIMEOUT_MS = 60_000;
+/** Delay between delete-job poll attempts. */
+const DELETE_POLL_INTERVAL_MS = 1_500;
+/** Delay between status re-sync poll attempts after a suspend/resume. */
+const STATUS_POLL_INTERVAL_MS = 3_000;
+/** How many times to poll an agent's status after a suspend/resume before
+ * giving up (the daemon's job should have flipped the status by then). */
+const STATUS_POLL_ATTEMPTS = 5;
+/** How long to poll a waking agent before entering anyway with a warning. */
+const WAKE_POLL_TIMEOUT_MS = 60_000;
+/** Delay between waking-readiness poll attempts. */
+const WAKE_POLL_INTERVAL_MS = 2_000;
+/** Statuses that mean an agent is not running and must be woken before use. */
+const NON_RUNNING_STATES = new Set(["stopped", "sleeping", "suspended"]);
+/** Statuses that indicate the agent failed / is in an error state. */
+const ERROR_STATES = new Set(["error", "failed"]);
+/** The agent id currently bound as the active cloud server, if any. */
+function activeCloudAgentId() {
+    const active = loadPersistedActiveServer();
+    if (active?.kind !== "cloud")
+        return null;
+    const id = active.id?.startsWith("cloud:")
+        ? active.id.slice("cloud:".length)
+        : "";
+    // Older builds mistakenly stored a URL as the id — not a real agent id.
+    return id && !id.includes("/") ? id : null;
+}
+/** The cloud access token for the current session. */
+function currentCloudToken() {
+    // Canonical Steward-first resolution (matches getCloudAuthToken: Steward JWT →
+    // runtime global → client), then fall back to the persisted active-server
+    // token for sessions without a Steward session. The old order read the
+    // persisted token first and skipped the Steward JWT entirely, which could send
+    // a stale/missing token from the agent manager.
+    const canonical = getCloudAuthToken();
+    if (canonical)
+        return canonical;
+    const persisted = loadPersistedActiveServer();
+    if (persisted?.kind === "cloud" && persisted.accessToken) {
+        return persisted.accessToken;
+    }
+    return "";
+}
+/**
+ * Eliza Cloud agent manager. Lists the signed-in user's cloud agents and lets
+ * them switch the active agent, create + name a new one, rename one, or delete
+ * one — the in-app counterpart to the cloud web dashboard.
+ */
+export function CloudAgentsSection() {
+    const elizaCloudConnected = useAppSelector((s) => s.elizaCloudConnected);
+    const setActionNotice = useAppSelector((s) => s.setActionNotice);
+    const cloudHandoffPhase = useAppSelector((s) => s.cloudHandoffPhase);
+    const { appName } = useBranding();
+    const [agents, setAgents] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [loadError, setLoadError] = useState(null);
+    const [busyId, setBusyId] = useState(null);
+    const [creating, setCreating] = useState(false);
+    const [newName, setNewName] = useState("");
+    const [editingId, setEditingId] = useState(null);
+    const [editName, setEditName] = useState("");
+    // The agent currently being woken (resumed + readiness-polled) before we
+    // switch to it. Drives the "Waking <name>…" row state.
+    const [wakingId, setWakingId] = useState(null);
+    const activeId = useMemo(() => activeCloudAgentId(), []);
+    const cloudApiBase = getBootConfig().cloudApiBase || "https://www.elizacloud.ai";
+    const refresh = useCallback(async () => {
+        setLoading(true);
+        setLoadError(null);
+        try {
+            const res = await client.getCloudCompatAgents();
+            // A failed fetch is NOT an empty list — surface it so the user can retry
+            // instead of seeing the indistinguishable "No cloud agents yet" copy.
+            if (!res.success) {
+                setLoadError(res.error || "Could not load your cloud agents.");
+                return;
+            }
+            const list = [...res.data];
+            list.sort((a, b) => String(b.created_at).localeCompare(String(a.created_at)));
+            setAgents(list);
+        }
+        catch (err) {
+            setLoadError(err instanceof Error
+                ? err.message
+                : "Could not load your cloud agents.");
+        }
+        finally {
+            setLoading(false);
+        }
+    }, []);
+    useEffect(() => {
+        void refresh();
+    }, [refresh]);
+    const setLocalStatus = useCallback((agentId, status) => {
+        setAgents((prev) => prev.map((a) => (a.agent_id === agentId ? { ...a, status } : a)));
+    }, []);
+    const bindAndReload = useCallback((agentId, apiBase, label) => {
+        const token = currentCloudToken();
+        savePersistedActiveServer(createPersistedActiveServer({
+            kind: "cloud",
+            id: `cloud:${agentId}`,
+            apiBase,
+            ...(token ? { accessToken: token } : {}),
+            label,
+        }));
+        setActionNotice(`Switched to ${label}. Reloading…`, "success", 3000);
+        // Re-boot the web app so startup restore re-binds the client + chat to
+        // the newly-selected agent (same path a returning user takes).
+        setTimeout(() => window.location.reload(), 250);
+    }, [setActionNotice]);
+    /**
+     * Resume a non-running agent and gate entry on a short readiness poll, so we
+     * only hand the user a live container. Resolves `true` once the agent reports
+     * `running`; resolves `false` (with the failure surfaced) if the resume call
+     * is rejected. Throws on timeout so the caller can decide whether to enter
+     * anyway. Mirrors the delete-job poll loop.
+     */
+    const wakeUntilRunning = useCallback(async (agent) => {
+        const res = await client.resumeCloudCompatAgent(agent.agent_id);
+        if (!res.success) {
+            return { ok: false, error: "Start failed" };
+        }
+        setLocalStatus(agent.agent_id, "resuming");
+        const deadline = Date.now() + WAKE_POLL_TIMEOUT_MS;
+        while (Date.now() < deadline) {
+            await new Promise((resolve) => setTimeout(resolve, WAKE_POLL_INTERVAL_MS));
+            const statusRes = await client.getCloudCompatAgentStatus(agent.agent_id);
+            const status = statusRes.success
+                ? statusRes.data.status.toLowerCase()
+                : "";
+            if (status)
+                setLocalStatus(agent.agent_id, status);
+            if (status === "running")
+                return { ok: true };
+            if (ERROR_STATES.has(status)) {
+                return {
+                    ok: false,
+                    error: statusRes.data.suspendedReason || "Agent failed to start.",
+                };
+            }
+        }
+        throw new Error("Timed out waiting for the agent to start.");
+    }, [setLocalStatus]);
+    const switchTo = useCallback(async (agent) => {
+        if (agent.agent_id === activeId)
+            return;
+        const apiBase = resolveCloudAgentApiBase({
+            bridgeUrl: agent.bridge_url,
+            webUiUrl: agent.web_ui_url ?? agent.webUiUrl,
+            agentId: agent.agent_id,
+            cloudApiBase,
+        });
+        const label = agent.agent_name || "Eliza Cloud";
+        const status = (agent.status || "").toLowerCase();
+        // A non-running agent has no live container to talk to — wake it and
+        // wait for readiness before binding, so chat doesn't land on a 404.
+        if (NON_RUNNING_STATES.has(status)) {
+            setBusyId(agent.agent_id);
+            setWakingId(agent.agent_id);
+            setActionNotice(`Waking ${label}…`, "success", 3000);
+            try {
+                const outcome = await wakeUntilRunning(agent);
+                if (!outcome.ok) {
+                    setActionNotice(outcome.error, "error", 4000);
+                    return;
+                }
+            }
+            catch (err) {
+                // Readiness timed out — surface it and let the user retry rather
+                // than binding to a container that may still be coming up.
+                setActionNotice(err instanceof Error ? err.message : "Failed to start agent.", "error", 4000);
+                return;
+            }
+            finally {
+                setBusyId(null);
+                setWakingId(null);
+            }
+        }
+        else {
+            setBusyId(agent.agent_id);
+        }
+        bindAndReload(agent.agent_id, apiBase, label);
+    }, [activeId, cloudApiBase, bindAndReload, setActionNotice, wakeUntilRunning]);
+    const createAgent = useCallback(async () => {
+        const name = newName.trim();
+        if (!name) {
+            setActionNotice("Give your agent a name first.", "error", 3000);
+            return;
+        }
+        const token = currentCloudToken();
+        if (!token) {
+            setActionNotice("Sign in to Eliza Cloud before creating an agent.", "error", 4000);
+            return;
+        }
+        setCreating(true);
+        try {
+            const result = await client.selectOrProvisionCloudAgent({
+                cloudApiBase,
+                authToken: token,
+                name,
+                forceCreate: true,
+                onProgress: () => { },
+            });
+            bindAndReload(result.agentId, result.apiBase, name);
+        }
+        catch (err) {
+            setActionNotice(err instanceof Error ? err.message : "Failed to create agent.", "error", 4000);
+            setCreating(false);
+        }
+    }, [newName, cloudApiBase, bindAndReload, setActionNotice]);
+    /**
+     * Poll a delete job until it reaches a terminal state. Resolves `true` on a
+     * completed teardown, `false` (with the failure surfaced) when the job
+     * fails, and throws on timeout so the caller can fall back to a refresh.
+     */
+    const waitForDeleteJob = useCallback(async (jobId) => {
+        const deadline = Date.now() + DELETE_POLL_TIMEOUT_MS;
+        while (Date.now() < deadline) {
+            const res = await client.getCloudCompatJobStatus(jobId);
+            const status = res.success ? res.data.status : "failed";
+            if (status === "completed")
+                return { ok: true };
+            if (status === "failed") {
+                return {
+                    ok: false,
+                    error: res.data.error || "Agent delete failed.",
+                };
+            }
+            await new Promise((resolve) => setTimeout(resolve, DELETE_POLL_INTERVAL_MS));
+        }
+        throw new Error("Timed out waiting for the agent to be deleted.");
+    }, []);
+    const deleteAgent = useCallback(async (agent) => {
+        // Destructive + irreversible — tears down the container and its data.
+        // Confirm first (matches the window.confirm pattern in the other settings
+        // sections: wallet keys, vault profiles, remote plugin hosts).
+        if (!window.confirm(`Delete "${agent.agent_name || agent.agent_id}"? This permanently removes the agent and its data and can't be undone.`)) {
+            return;
+        }
+        setBusyId(agent.agent_id);
+        try {
+            const res = await client.deleteCloudCompatAgent(agent.agent_id);
+            if (!res.success) {
+                throw new Error(res.error || "Delete failed");
+            }
+            // A 202 async delete returns a jobId — the teardown may still fail
+            // later, so poll the job and only drop the row once it actually
+            // completes. A synchronous delete (no jobId) is already terminal.
+            if (res.data.jobId) {
+                const outcome = await waitForDeleteJob(res.data.jobId);
+                if (!outcome.ok) {
+                    throw new Error(outcome.error);
+                }
+            }
+            setAgents((prev) => prev.filter((a) => a.agent_id !== agent.agent_id));
+            setActionNotice(`Deleted ${agent.agent_name}.`, "success", 3000);
+        }
+        catch (err) {
+            setActionNotice(err instanceof Error ? err.message : "Failed to delete agent.", "error", 4000);
+            // The teardown failed or timed out — re-sync so the row reflects the
+            // real server state rather than a stale optimistic removal.
+            void refresh();
+        }
+        finally {
+            setBusyId(null);
+        }
+    }, [setActionNotice, waitForDeleteJob, refresh]);
+    const startRename = useCallback((agent) => {
+        setEditingId(agent.agent_id);
+        setEditName(agent.agent_name || "");
+    }, []);
+    const saveRename = useCallback(async (agent) => {
+        const name = editName.trim();
+        if (!name || name === agent.agent_name) {
+            setEditingId(null);
+            return;
+        }
+        setBusyId(agent.agent_id);
+        try {
+            const res = await client.updateCloudCompatAgent(agent.agent_id, {
+                agentName: name,
+            });
+            if (!res.success) {
+                throw new Error(res.error || "Rename failed");
+            }
+            setAgents((prev) => prev.map((a) => a.agent_id === agent.agent_id ? { ...a, agent_name: name } : a));
+            // If we just renamed the agent bound as the active cloud server, refresh
+            // the persisted label so the switcher/header reflect the new name without
+            // waiting for a re-bind (mirrors how switchTo/create set the label).
+            if (agent.agent_id === activeId) {
+                const active = loadPersistedActiveServer();
+                if (active?.kind === "cloud") {
+                    savePersistedActiveServer({ ...active, label: name });
+                }
+            }
+            setActionNotice(`Renamed to ${name}.`, "success", 3000);
+            setEditingId(null);
+        }
+        catch (err) {
+            setActionNotice(err instanceof Error ? err.message : "Failed to rename agent.", "error", 4000);
+        }
+        finally {
+            setBusyId(null);
+        }
+    }, [editName, activeId, setActionNotice]);
+    /**
+     * After a suspend/resume the row status lies (it shows the optimistic
+     * transition) until a manual Refresh. Poll the agent's status a few times so
+     * the row reconciles to the real server state as the daemon's job flips it.
+     */
+    const resyncStatus = useCallback(async (agentId) => {
+        for (let attempt = 0; attempt < STATUS_POLL_ATTEMPTS; attempt++) {
+            await new Promise((resolve) => setTimeout(resolve, STATUS_POLL_INTERVAL_MS));
+            const res = await client.getCloudCompatAgentStatus(agentId);
+            if (!res.success)
+                continue;
+            const status = res.data.status.toLowerCase();
+            if (!status)
+                continue;
+            setLocalStatus(agentId, status);
+            // Once the agent reaches a settled (non-transitional) state there is
+            // nothing left to reconcile — stop polling early.
+            if (status === "running" || NON_RUNNING_STATES.has(status))
+                return;
+        }
+    }, [setLocalStatus]);
+    const suspendAgent = useCallback(async (agent) => {
+        setBusyId(agent.agent_id);
+        try {
+            const res = await client.suspendCloudCompatAgent(agent.agent_id);
+            if (!res.success) {
+                throw new Error("Shutdown failed");
+            }
+            // Async job — show the transition optimistically, then re-sync the row
+            // from the server so it reconciles to "stopped" once the container is
+            // actually stopped (no manual Refresh needed).
+            setLocalStatus(agent.agent_id, "stopping");
+            setActionNotice(`Shutting down ${agent.agent_name || "agent"}…`, "success", 3000);
+            void resyncStatus(agent.agent_id);
+        }
+        catch (err) {
+            setActionNotice(err instanceof Error ? err.message : "Failed to shut down agent.", "error", 4000);
+        }
+        finally {
+            setBusyId(null);
+        }
+    }, [setActionNotice, setLocalStatus, resyncStatus]);
+    const resumeAgent = useCallback(async (agent) => {
+        setBusyId(agent.agent_id);
+        try {
+            const res = await client.resumeCloudCompatAgent(agent.agent_id);
+            if (!res.success) {
+                throw new Error("Start failed");
+            }
+            setLocalStatus(agent.agent_id, "resuming");
+            setActionNotice(`Starting ${agent.agent_name || "agent"}…`, "success", 3000);
+            void resyncStatus(agent.agent_id);
+        }
+        catch (err) {
+            setActionNotice(err instanceof Error ? err.message : "Failed to start agent.", "error", 4000);
+        }
+        finally {
+            setBusyId(null);
+        }
+    }, [setActionNotice, setLocalStatus, resyncStatus]);
+    const hasToken = Boolean(currentCloudToken());
+    if (!elizaCloudConnected && !hasToken) {
+        return (_jsx("p", { className: "text-sm text-txt-muted", children: "Sign in to Eliza Cloud to manage your cloud agents." }));
+    }
+    return (_jsxs(SettingsStack, { children: [_jsxs(SettingsGroup, { title: "Your cloud agents", children: [loading ? (_jsxs("div", { className: "flex items-center gap-2 px-4 py-3 text-sm text-txt-muted", "data-testid": "cloud-agents-loading", children: [_jsx(RefreshCw, { className: "h-4 w-4 animate-spin", "aria-hidden": true }), "Loading agents\u2026"] })) : loadError ? (_jsxs("div", { className: "flex flex-col gap-2 px-4 py-3", "data-testid": "cloud-agents-error", children: [_jsx("p", { className: "text-sm text-destructive", children: loadError }), _jsxs(Button, { variant: "outline", size: "sm", className: "self-start", "data-testid": "cloud-agents-error-retry", onClick: () => {
+                                    void refresh();
+                                }, children: [_jsx(RefreshCw, { className: "mr-1 h-4 w-4", "aria-hidden": true }), "Try again"] })] })) : agents.length === 0 ? (_jsx("p", { className: "px-4 py-3 text-sm text-txt-muted", "data-testid": "cloud-agents-empty", children: "No cloud agents yet \u2014 create your first one below." })) : (agents.map((agent) => {
+                        const isActive = agent.agent_id === activeId;
+                        const busy = busyId === agent.agent_id;
+                        // Show "Waking…" for a locally-driven resume (wakingId) OR a
+                        // first-run shared→dedicated handoff in flight for this agent, so the
+                        // row reflects the same shared-now/dedicated-pending state the chat
+                        // shell sees rather than running a wholly independent signal.
+                        const waking = wakingId === agent.agent_id ||
+                            isCloudAgentWaking(cloudHandoffPhase, agent.agent_id);
+                        const status = (agent.status || "").toLowerCase();
+                        const canSuspend = status === "running";
+                        const canResume = NON_RUNNING_STATES.has(status);
+                        // A broken agent: surface WHY (error_message) instead of a bare
+                        // status, so the user can tell a transient stop from a real fault.
+                        const errored = ERROR_STATES.has(status);
+                        const errorMessage = errored ? agent.error_message?.trim() : null;
+                        if (editingId === agent.agent_id) {
+                            return (_jsxs("div", { className: "flex items-center gap-2 px-4 py-3", children: [_jsx(Bot, { className: "h-5 w-5 shrink-0 text-txt-muted", "aria-hidden": true }), _jsx(Input, { value: editName, onChange: (e) => setEditName(e.target.value), onKeyDown: (e) => {
+                                            if (e.key === "Enter")
+                                                void saveRename(agent);
+                                            if (e.key === "Escape")
+                                                setEditingId(null);
+                                        }, className: "flex-1", "aria-label": "Agent name", "data-testid": `cloud-agent-rename-input-${agent.agent_id}`, maxLength: AGENT_NAME_MAX_LENGTH, disabled: busy, autoFocus: true }), _jsx(Button, { variant: "default", size: "sm", disabled: busy, "data-testid": `cloud-agent-rename-save-${agent.agent_id}`, onClick: () => void saveRename(agent), children: busy ? "Saving…" : "Save" }), _jsx(Button, { variant: "ghost", size: "sm", disabled: busy, "data-testid": `cloud-agent-rename-cancel-${agent.agent_id}`, onClick: () => setEditingId(null), children: "Cancel" })] }, agent.agent_id));
+                        }
+                        return (_jsx(SettingsRow, { icon: Bot, label: agent.agent_name || agent.agent_id, description: _jsxs("span", { className: "flex flex-col gap-1", children: [_jsxs("span", { className: "inline-flex items-center gap-2", children: [isActive ? "Active · this device" : null, waking ? (_jsx(StatusBadge, { tone: "warning", pulse: true, label: `Waking ${agent.agent_name || agent.agent_id}…`, "data-testid": `cloud-agent-status-${agent.agent_id}` })) : (_jsx(StatusBadge, { tone: errored
+                                                    ? "danger"
+                                                    : statusToneForState(agent.status), label: agentLifecycleLabel(agent.status), "data-testid": `cloud-agent-status-${agent.agent_id}` }))] }), errorMessage ? (_jsx("span", { className: "text-2xs text-destructive", "data-testid": `cloud-agent-error-${agent.agent_id}`, children: errorMessage })) : null] }), active: isActive, trailing: _jsxs("div", { className: "flex items-center gap-2", children: [isActive ? (_jsxs("span", { className: "inline-flex items-center gap-1 text-xs font-medium text-accent", children: [_jsx(Check, { className: "h-4 w-4", "aria-hidden": true }), "Active"] })) : (_jsx(Button, { variant: "outline", size: "sm", disabled: busy, onClick: () => void switchTo(agent), children: waking ? "Waking…" : busy ? "Switching…" : "Use" })), canSuspend && (_jsx(Button, { variant: "ghost", size: "sm", disabled: busy, "aria-label": `Shut down ${agent.agent_name || agent.agent_id}`, title: "Shut down", onClick: () => void suspendAgent(agent), children: _jsx(Power, { className: "h-4 w-4", "aria-hidden": true }) })), canResume && (_jsx(Button, { variant: "ghost", size: "sm", disabled: busy, "aria-label": `Start ${agent.agent_name || agent.agent_id}`, title: "Start", onClick: () => void resumeAgent(agent), children: _jsx(Play, { className: "h-4 w-4", "aria-hidden": true }) })), _jsx(Button, { variant: "ghost", size: "sm", disabled: busy, "aria-label": `Rename ${agent.agent_name || agent.agent_id}`, "data-testid": `cloud-agent-rename-${agent.agent_id}`, onClick: () => startRename(agent), children: _jsx(Pencil, { className: "h-4 w-4", "aria-hidden": true }) }), _jsx(Button, { variant: "ghost", size: "sm", disabled: busy || isActive, "aria-label": `Delete ${agent.agent_name || agent.agent_id}`, onClick: () => deleteAgent(agent), children: _jsx(Trash2, { className: "h-4 w-4", "aria-hidden": true }) })] }) }, agent.agent_id));
+                    })), _jsx(SettingsRow, { icon: RefreshCw, label: "Refresh", onClick: () => {
+                            void refresh();
+                        } })] }), _jsx(SettingsGroup, { title: "Create a new agent", children: _jsxs("div", { className: "flex flex-col gap-2 px-4 py-3 sm:flex-row sm:items-center", children: [_jsx(Input, { value: newName, onChange: (e) => setNewName(e.target.value), placeholder: `Agent name (e.g. ${appName})`, className: "flex-1", maxLength: AGENT_NAME_MAX_LENGTH, disabled: creating }), _jsxs(Button, { variant: "default", size: "sm", disabled: creating, onClick: () => {
+                                void createAgent();
+                            }, children: [_jsx(Plus, { className: "mr-1 h-4 w-4", "aria-hidden": true }), creating ? "Creating…" : "Create"] })] }) })] }));
+}

package/components/settings/ConnectorsSection.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Settings → Connectors section.
+ *
+ * The connector id→panel dispatch is hardcoded — AGENTS.md commandment 5 (zero
+ * polymorphism for runtime type branching) explicitly allows this for
+ * adapter/target registries.
+ */
+export declare function ConnectorsSection(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ConnectorsSection.d.ts.map

package/components/settings/ConnectorsSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectorsSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/ConnectorsSection.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAkMH,wBAAgB,iBAAiB,4CAuGhC"}

package/components/settings/ConnectorsSection.js

@@ -0,0 +1,183 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Settings → Connectors section.
+ *
+ * The connector id→panel dispatch is hardcoded — AGENTS.md commandment 5 (zero
+ * polymorphism for runtime type branching) explicitly allows this for
+ * adapter/target registries.
+ */
+import { Puzzle } from "lucide-react";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { useAgentElement } from "../../agent-surface/index.js";
+import { clearPendingFocusConnector, FOCUS_CONNECTOR_EVENT, readPendingFocusConnector, } from "../../events/index.js";
+import { useAppSelector } from "../../state/index.js";
+import { BlueBubblesStatusPanel } from "../connectors/BlueBubblesStatusPanel.js";
+import { DiscordLocalConnectorPanel } from "../connectors/DiscordLocalConnectorPanel.js";
+import { IMessageStatusPanel } from "../connectors/IMessageStatusPanel.js";
+import { SignalQrOverlay } from "../connectors/SignalQrOverlay.js";
+import { TelegramAccountConnectorPanel } from "../connectors/TelegramAccountConnectorPanel.js";
+import { WhatsAppQrOverlay } from "../connectors/WhatsAppQrOverlay.js";
+import { getBrandIcon } from "../conversations/brand-icons.js";
+import { ALWAYS_ON_PLUGIN_IDS, iconImageSource, resolveIcon, } from "../pages/plugin-list-utils.js";
+import { Switch } from "../ui/switch.js";
+import { SettingsGroup, SettingsRow, SettingsStack } from "./settings-layout.js";
+function statusTone(plugin) {
+    if (!plugin.enabled)
+        return "off";
+    if (plugin.validationErrors.length > 0)
+        return "warn";
+    if (!plugin.configured)
+        return "warn";
+    return "ok";
+}
+function statusDotClass(tone) {
+    switch (tone) {
+        case "ok":
+            return "bg-ok";
+        case "warn":
+            return "bg-warn";
+        case "off":
+            return "bg-muted/60";
+    }
+}
+/**
+ * A {@link LucideIcon}-compatible medallion icon for a connector so it can be
+ * passed to {@link SettingsRow}'s `icon` slot — brand SVG, plugin image, or a
+ * Puzzle fallback.
+ */
+function connectorIcon(plugin) {
+    const Brand = getBrandIcon(plugin.id);
+    const icon = resolveIcon(plugin);
+    const imageSrc = typeof icon === "string" ? iconImageSource(icon) : undefined;
+    const Inner = typeof icon === "string" || !icon ? null : icon;
+    return forwardRef(function ConnectorMedallionIcon({ className }) {
+        if (Brand)
+            return _jsx(Brand, { className: className });
+        if (imageSrc)
+            return (_jsx("img", { src: imageSrc, alt: "", className: "h-[18px] w-[18px] shrink-0 rounded-sm object-contain" }));
+        const IconComponent = Inner;
+        if (IconComponent)
+            return _jsx(IconComponent, { className: className });
+        return _jsx(Puzzle, { className: className, "aria-hidden": true });
+    });
+}
+function ConnectorBody({ plugin }) {
+    const t = useAppSelector((s) => s.t);
+    switch (plugin.id) {
+        case "telegram":
+            return _jsx(TelegramAccountConnectorPanel, {});
+        case "discord":
+            return _jsx(DiscordLocalConnectorPanel, {});
+        case "imessage":
+            return _jsx(IMessageStatusPanel, {});
+        case "bluebubbles":
+            return _jsx(BlueBubblesStatusPanel, {});
+        case "signal":
+            return _jsx(SignalQrOverlay, {});
+        case "whatsapp":
+            return _jsx(WhatsAppQrOverlay, {});
+        default:
+            return (_jsx("div", { className: "text-xs-tight text-muted", children: t("settings.sections.connectors.ownSetupSurface", {
+                    defaultValue: "{{name}} uses its own setup surface.",
+                    name: plugin.name,
+                }) }));
+    }
+}
+function ConnectorEnableSwitch({ plugin, busy, onToggle, }) {
+    const t = useAppSelector((s) => s.t);
+    const label = plugin.enabled
+        ? t("settings.sections.connectors.disable", {
+            defaultValue: "Disable {{name}}",
+            name: plugin.name,
+        })
+        : t("settings.sections.connectors.enable", {
+            defaultValue: "Enable {{name}}",
+            name: plugin.name,
+        });
+    const { ref, agentProps } = useAgentElement({
+        id: `connector-${plugin.id}-enable`,
+        role: "toggle",
+        label,
+        group: "connectors",
+        status: plugin.enabled ? "on" : "off",
+        getValue: () => plugin.enabled,
+        onActivate: busy ? undefined : () => onToggle(!plugin.enabled),
+    });
+    return (_jsx(Switch, { ref: ref, checked: plugin.enabled, disabled: busy, onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), onCheckedChange: (checked) => onToggle(checked), "aria-label": label, ...agentProps }));
+}
+function ConnectorRow({ plugin, busy, onToggle, }) {
+    const tone = statusTone(plugin);
+    const icon = useMemo(() => connectorIcon(plugin), [plugin]);
+    return (_jsxs("details", { className: "group", "data-connector": plugin.id, children: [_jsx("summary", { className: "cursor-pointer select-none list-none", children: _jsx(SettingsRow, { icon: icon, label: _jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { className: "truncate", children: plugin.name }), _jsx("span", { className: `h-1.5 w-1.5 shrink-0 rounded-full ${statusDotClass(tone)}`, "aria-hidden": "true" })] }), control: _jsx(ConnectorEnableSwitch, { plugin: plugin, busy: busy, onToggle: onToggle }) }) }), _jsx("div", { className: "pb-3 pl-[30px]", children: _jsx(ConnectorBody, { plugin: plugin }) })] }));
+}
+export function ConnectorsSection() {
+    const plugins = useAppSelector((s) => s.plugins);
+    const handlePluginToggle = useAppSelector((s) => s.handlePluginToggle);
+    const t = useAppSelector((s) => s.t);
+    const containerRef = useRef(null);
+    const [togglingPlugins, setTogglingPlugins] = useState(new Set());
+    const connectorPlugins = plugins.filter((p) => p.category === "connector" &&
+        !ALWAYS_ON_PLUGIN_IDS.has(p.id) &&
+        p.visible !== false);
+    const focusConnector = useCallback((connectorId) => {
+        const escapedId = connectorId.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+        const focus = () => {
+            const row = containerRef.current?.querySelector(`[data-connector="${escapedId}"]`);
+            if (!(row instanceof HTMLDetailsElement))
+                return false;
+            row.open = true;
+            row.scrollIntoView({ block: "center", behavior: "smooth" });
+            const summary = row.querySelector("summary");
+            if (summary instanceof HTMLElement)
+                summary.focus({ preventScroll: true });
+            clearPendingFocusConnector(connectorId);
+            return true;
+        };
+        if (focus())
+            return;
+        window.setTimeout(() => {
+            focus();
+        }, 80);
+    }, []);
+    useEffect(() => {
+        if (typeof document === "undefined")
+            return;
+        const handleFocusConnector = (event) => {
+            const detail = event.detail;
+            if (!detail?.connectorId)
+                return;
+            focusConnector(detail.connectorId);
+        };
+        document.addEventListener(FOCUS_CONNECTOR_EVENT, handleFocusConnector);
+        const pending = readPendingFocusConnector();
+        if (pending)
+            focusConnector(pending);
+        return () => document.removeEventListener(FOCUS_CONNECTOR_EVENT, handleFocusConnector);
+    }, [focusConnector]);
+    const handleToggle = useCallback(async (pluginId, enabled) => {
+        setTogglingPlugins((prev) => new Set(prev).add(pluginId));
+        try {
+            await handlePluginToggle(pluginId, enabled);
+        }
+        finally {
+            setTogglingPlugins((prev) => {
+                const next = new Set(prev);
+                next.delete(pluginId);
+                return next;
+            });
+        }
+    }, [handlePluginToggle]);
+    if (connectorPlugins.length === 0) {
+        return (_jsx("p", { className: "text-sm text-muted", children: t("pluginsview.NoConnectorsAvailable", {
+                defaultValue: "No connectors available.",
+            }) }));
+    }
+    return (_jsx(SettingsStack, { children: _jsx(SettingsGroup, { bare: true, title: t("settings.sections.connectors.groupTitle", {
+                defaultValue: "Connectors",
+            }), children: _jsx("div", { ref: containerRef, className: "flex flex-col", children: connectorPlugins.map((plugin) => {
+                    const isBusy = togglingPlugins.has(plugin.id);
+                    return (_jsx(ConnectorRow, { plugin: plugin, busy: isBusy, onToggle: (checked) => {
+                            void handleToggle(plugin.id, checked);
+                        } }, plugin.id));
+                }) }) }) }));
+}

package/components/settings/DesktopWorkspaceDisplay.d.ts

@@ -0,0 +1,6 @@
+import type { TranslateFn } from "../../types/index.js";
+export declare function DesktopWorkspaceDisplay({ diagnosticsText, t, }: {
+    diagnosticsText: string;
+    t: TranslateFn;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DesktopWorkspaceDisplay.d.ts.map

package/components/settings/DesktopWorkspaceDisplay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DesktopWorkspaceDisplay.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/DesktopWorkspaceDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,wBAAgB,uBAAuB,CAAC,EACtC,eAAe,EACf,CAAC,GACF,EAAE;IACD,eAAe,EAAE,MAAM,CAAC;IACxB,CAAC,EAAE,WAAW,CAAC;CAChB,2CAaA"}

package/components/settings/DesktopWorkspaceDisplay.hooks.d.ts

@@ -0,0 +1,4 @@
+import type { TranslateFn } from "../../types/index.js";
+import { type DesktopWorkspaceSnapshot } from "../../utils/desktop-workspace.js";
+export declare function useDesktopDiagnosticsText(snapshot: DesktopWorkspaceSnapshot | null, t: TranslateFn): string;
+//# sourceMappingURL=DesktopWorkspaceDisplay.hooks.d.ts.map

package/components/settings/DesktopWorkspaceDisplay.hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DesktopWorkspaceDisplay.hooks.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/DesktopWorkspaceDisplay.hooks.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EACL,KAAK,wBAAwB,EAE9B,MAAM,+BAA+B,CAAC;AAkCvC,wBAAgB,yBAAyB,CACvC,QAAQ,EAAE,wBAAwB,GAAG,IAAI,EACzC,CAAC,EAAE,WAAW,GACb,MAAM,CAER"}