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

package/dist/components/shell/ComputerUseApprovalOverlay.js

@@ -0,0 +1,171 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Card, CardContent, CardDescription, CardHeader, StatusBadge, } from "@elizaos/ui";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { client } from "../../api/client.js";
+import { useApp } from "../../state/index.js";
+const OVERLAY_SHELL_CLASS = "fixed inset-0 z-[1002] flex min-h-screen w-full items-center justify-center overflow-hidden bg-bg/75 px-4 py-6 font-body text-txt backdrop-blur-sm sm:px-6";
+const OVERLAY_CARD_CLASS = "relative z-10 w-full max-w-[820px] overflow-hidden border border-border/60 bg-card/95 shadow-[0_30px_120px_rgba(0,0,0,0.36)] backdrop-blur-xl";
+const EMPTY_SNAPSHOT = {
+    mode: "full_control",
+    pendingCount: 0,
+    pendingApprovals: [],
+};
+const POLL_MS = 1500;
+function approvalStreamUrl() {
+    const baseUrl = client.getBaseUrl();
+    const restToken = client.getRestAuthToken();
+    const url = new URL("/api/computer-use/approvals/stream", baseUrl || window.location.origin);
+    if (restToken) {
+        url.searchParams.set("token", restToken);
+    }
+    return url.toString();
+}
+export function ComputerUseApprovalOverlay() {
+    const { setActionNotice, t } = useApp();
+    const [snapshot, setSnapshot] = useState(EMPTY_SNAPSHOT);
+    const [busyApprovalId, setBusyApprovalId] = useState(null);
+    const [denyTargetId, setDenyTargetId] = useState(null);
+    const [denyReason, setDenyReason] = useState("");
+    const refresh = useCallback(async () => {
+        try {
+            setSnapshot(await client.getComputerUseApprovals());
+        }
+        catch {
+            setSnapshot(EMPTY_SNAPSHOT);
+        }
+    }, []);
+    useEffect(() => {
+        let cancelled = false;
+        let pollingTimer = null;
+        let eventSource = null;
+        const startPolling = () => {
+            if (pollingTimer !== null) {
+                return;
+            }
+            void refresh();
+            pollingTimer = window.setInterval(() => {
+                void refresh();
+            }, POLL_MS);
+        };
+        try {
+            eventSource = new EventSource(approvalStreamUrl());
+            eventSource.onmessage = (event) => {
+                if (cancelled) {
+                    return;
+                }
+                try {
+                    const payload = JSON.parse(event.data);
+                    if (payload.type === "snapshot" && payload.snapshot) {
+                        setSnapshot(payload.snapshot);
+                        if (pollingTimer !== null) {
+                            window.clearInterval(pollingTimer);
+                            pollingTimer = null;
+                        }
+                    }
+                }
+                catch {
+                    // Ignore malformed events.
+                }
+            };
+            eventSource.onerror = () => {
+                eventSource?.close();
+                eventSource = null;
+                startPolling();
+            };
+        }
+        catch {
+            startPolling();
+        }
+        if (!eventSource) {
+            startPolling();
+        }
+        return () => {
+            cancelled = true;
+            if (pollingTimer !== null) {
+                window.clearInterval(pollingTimer);
+            }
+            eventSource?.close();
+        };
+    }, [refresh]);
+    const visibleApprovals = snapshot.pendingApprovals;
+    const approvalCards = useMemo(() => visibleApprovals.map((approval) => ({
+        ...approval,
+        parametersText: JSON.stringify(approval.parameters ?? {}, null, 2),
+    })), [visibleApprovals]);
+    const handleRespond = useCallback(async (approvalId, approved, reason) => {
+        if (busyApprovalId) {
+            return;
+        }
+        setBusyApprovalId(approvalId);
+        try {
+            const resolution = await client.respondToComputerUseApproval(approvalId, approved, reason);
+            setActionNotice(approved
+                ? t("computeruseapprovaloverlay.ApprovedNotice", {
+                    defaultValue: `Approved ${resolution.command}.`,
+                })
+                : t("computeruseapprovaloverlay.RejectedNotice", {
+                    defaultValue: `Rejected ${resolution.command}.`,
+                }), approved ? "success" : "info", 2600);
+            setDenyTargetId(null);
+            setDenyReason("");
+            await refresh();
+        }
+        catch (error) {
+            setActionNotice(error instanceof Error
+                ? error.message
+                : t("computeruseapprovaloverlay.ResolveFailed", {
+                    defaultValue: "Failed to resolve computer-use approval.",
+                }), "error", 3600);
+        }
+        finally {
+            setBusyApprovalId(null);
+        }
+    }, [busyApprovalId, refresh, setActionNotice, t]);
+    if (approvalCards.length === 0) {
+        return null;
+    }
+    return (_jsx("div", { role: "alertdialog", "aria-modal": "true", "aria-labelledby": "computer-use-approval-title", className: OVERLAY_SHELL_CLASS, children: _jsxs(Card, { className: OVERLAY_CARD_CLASS, children: [_jsx(CardHeader, { className: "bg-warning/5 pb-6 pt-6", children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(StatusBadge, { label: t("computeruseapprovaloverlay.PendingApproval", {
+                                    defaultValue: "Computer Use Approval",
+                                }), variant: "warning", withDot: true, className: "self-start" }), _jsxs("div", { className: "space-y-2", children: [_jsx("h1", { id: "computer-use-approval-title", className: "text-xl font-semibold leading-tight text-txt", children: t("computeruseapprovaloverlay.Title", {
+                                            defaultValue: "Review queued computer actions",
+                                        }) }), _jsx(CardDescription, { className: "max-w-[62ch] leading-relaxed", children: t("computeruseapprovaloverlay.Body", {
+                                            defaultValue: "The agent requested local computer-use actions that need approval before they run.",
+                                        }) }), _jsx("div", { className: "text-xs text-muted", children: t("computeruseapprovaloverlay.ModeLine", {
+                                            defaultValue: "Approval mode: {{mode}}.",
+                                            mode: snapshot.mode,
+                                        }) })] })] }) }), _jsx(CardContent, { className: "flex max-h-[70vh] flex-col gap-4 overflow-auto pt-6", children: approvalCards.map((approval) => {
+                        const busy = busyApprovalId === approval.id;
+                        const isDenying = denyTargetId === approval.id;
+                        return (_jsx("div", { className: "rounded-2xl border border-border/50 bg-card/75 p-4 shadow-sm", children: _jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-xs font-semibold uppercase tracking-[0.2em] text-muted", children: t("computeruseapprovaloverlay.Command", {
+                                                    defaultValue: "Command",
+                                                }) }), _jsx("div", { className: "mt-2 break-all text-sm font-medium text-txt", children: approval.command }), _jsx("div", { className: "mt-2 text-xs text-muted", children: new Date(approval.requestedAt).toLocaleTimeString() }), _jsx("pre", { className: "mt-4 max-h-56 overflow-auto rounded-xl bg-bg/60 p-3 text-xs leading-relaxed text-txt", children: approval.parametersText || "{}" })] }), _jsx("div", { className: "w-full max-w-[18rem] space-y-3", children: isDenying ? (_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: "computer-use-deny-reason", className: "block text-xs font-semibold uppercase tracking-[0.16em] text-muted", children: t("computeruseapprovaloverlay.DenyReason", {
+                                                        defaultValue: "Deny reason",
+                                                    }) }), _jsx("textarea", { id: "computer-use-deny-reason", value: denyReason, onChange: (event) => setDenyReason(event.target.value), rows: 4, className: "w-full rounded-xl border border-border/60 bg-bg/50 px-3 py-2 text-sm text-txt outline-none", placeholder: t("computeruseapprovaloverlay.DenyReasonPlaceholder", {
+                                                        defaultValue: "Optional reason shown to the agent.",
+                                                    }) }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "outline", disabled: busy, onClick: () => {
+                                                                setDenyTargetId(null);
+                                                                setDenyReason("");
+                                                            }, className: "flex-1", children: t("common.cancel", { defaultValue: "Cancel" }) }), _jsx(Button, { variant: "outline", disabled: busy, onClick: () => {
+                                                                void handleRespond(approval.id, false, denyReason.trim() || undefined);
+                                                            }, className: "flex-1", children: busy
+                                                                ? t("computeruseapprovaloverlay.Resolving", {
+                                                                    defaultValue: "Resolving...",
+                                                                })
+                                                                : t("computeruseapprovaloverlay.Reject", {
+                                                                    defaultValue: "Reject",
+                                                                }) })] })] })) : (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Button, { variant: "default", disabled: busyApprovalId !== null, onClick: () => {
+                                                        void handleRespond(approval.id, true);
+                                                    }, children: busy
+                                                        ? t("computeruseapprovaloverlay.Resolving", {
+                                                            defaultValue: "Resolving...",
+                                                        })
+                                                        : t("computeruseapprovaloverlay.Approve", {
+                                                            defaultValue: "Approve",
+                                                        }) }), _jsx(Button, { variant: "outline", disabled: busyApprovalId !== null, onClick: () => {
+                                                        setDenyTargetId(approval.id);
+                                                        setDenyReason("");
+                                                    }, children: t("computeruseapprovaloverlay.Reject", {
+                                                        defaultValue: "Reject",
+                                                    }) })] })) })] }) }, approval.id));
+                    }) })] }) }));
+}

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

@@ -0,0 +1,6 @@
+/**
+ * Banner shown during WebSocket reconnection attempts.
+ * Renders in document flow to push the header and content down.
+ */
+export declare function ConnectionFailedBanner(): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=ConnectionFailedBanner.d.ts.map

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

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

package/dist/components/shell/ConnectionFailedBanner.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Spinner, Z_SYSTEM_CRITICAL } from "@elizaos/ui";
+import { useApp } from "../../state/index.js";
+/**
+ * Banner shown during WebSocket reconnection attempts.
+ * Renders in document flow to push the header and content down.
+ */
+export function ConnectionFailedBanner() {
+    const { t } = useApp();
+    const { backendConnection, backendDisconnectedBannerDismissed, dismissBackendDisconnectedBanner, retryBackendConnection, } = useApp();
+    if (!backendConnection)
+        return null;
+    if (backendConnection.showDisconnectedUI)
+        return null;
+    if (backendConnection.state === "reconnecting") {
+        return (_jsxs("div", { role: "status", "aria-live": "polite", "data-window-titlebar-banner": "true", className: `shrink-0 z-[${Z_SYSTEM_CRITICAL}] flex items-center gap-3 bg-warn px-4 py-2 text-sm font-medium text-[color:var(--accent-foreground)] shadow-lg`, children: [_jsx(Spinner, { size: 16, className: "shrink-0 text-[color:var(--accent-foreground)]", "aria-label": t("aria.reconnecting") }), _jsxs("span", { className: "truncate", children: [t("connectionfailedbanner.ReconnectingAtt"), " ", backendConnection.reconnectAttempt, "/", backendConnection.maxReconnectAttempts, ")"] })] }));
+    }
+    if (backendConnection.state === "failed" &&
+        !backendDisconnectedBannerDismissed) {
+        return (_jsxs("div", { role: "alert", "aria-live": "assertive", "data-window-titlebar-banner": "true", className: `shrink-0 z-[${Z_SYSTEM_CRITICAL}] flex items-center justify-between gap-3 bg-danger px-4 py-2 text-sm font-medium text-white shadow-lg`, 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, { variant: "ghost", size: "sm", onClick: dismissBackendDisconnectedBanner, className: "rounded px-3 py-1 text-xs text-danger/20 hover:bg-danger hover:text-white", children: t("common.dismiss") }), _jsx(Button, { variant: "secondary", size: "sm", onClick: retryBackendConnection, className: "rounded bg-card px-3 py-1 text-xs font-semibold text-destructive hover:bg-bg-hover border-transparent", children: t("vectorbrowserview.RetryConnection") })] })] }));
+    }
+    return null;
+}

package/dist/components/shell/ConnectionLostOverlay.d.ts

@@ -0,0 +1,2 @@
+export declare function ConnectionLostOverlay(): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=ConnectionLostOverlay.d.ts.map

package/dist/components/shell/ConnectionLostOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionLostOverlay.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/ConnectionLostOverlay.tsx"],"names":[],"mappings":"AAUA,wBAAgB,qBAAqB,mDAgGpC"}

package/dist/components/shell/ConnectionLostOverlay.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Card, CardContent, CardHeader } from "@elizaos/ui";
+import { useState } from "react";
+import { isElectrobunRuntime } from "../../bridge/index.js";
+import { useApp } from "../../state/index.js";
+const OVERLAY_SHELL_CLASS = "fixed inset-0 z-[1001] flex min-h-screen w-full items-center justify-center overflow-hidden bg-bg/80 px-4 py-6 font-body text-txt backdrop-blur-sm sm:px-6";
+const OVERLAY_CARD_CLASS = "relative z-10 w-full max-w-[640px] overflow-hidden border border-border/60 bg-card/95 shadow-[0_30px_120px_rgba(0,0,0,0.36)] backdrop-blur-xl";
+export function ConnectionLostOverlay() {
+    const { backendConnection, relaunchDesktop, retryBackendConnection, t } = useApp();
+    const [busy, setBusy] = useState(null);
+    const desktopRuntime = isElectrobunRuntime();
+    if (backendConnection.state !== "failed" ||
+        !backendConnection.showDisconnectedUI) {
+        return null;
+    }
+    const handleRestart = async () => {
+        if (busy)
+            return;
+        setBusy("restart");
+        try {
+            if (desktopRuntime) {
+                await relaunchDesktop();
+                return;
+            }
+            if (typeof window !== "undefined") {
+                window.location.reload();
+            }
+        }
+        finally {
+            setBusy(null);
+        }
+    };
+    return (_jsx("div", { role: "alertdialog", "aria-modal": "true", "aria-labelledby": "connection-lost-title", className: OVERLAY_SHELL_CLASS, children: _jsxs(Card, { className: OVERLAY_CARD_CLASS, children: [_jsx(CardHeader, { className: "bg-danger/5 pb-6 pt-6", children: _jsx("div", { className: "flex flex-col gap-4", children: _jsx("div", { className: "space-y-2", children: _jsx("h1", { id: "connection-lost-title", className: "text-xl font-semibold leading-tight text-danger", children: t("connectionlostoverlay.LostBackendConnection", {
+                                    defaultValue: "Lost backend connection.",
+                                }) }) }) }) }), _jsxs(CardContent, { className: "flex flex-col gap-5 pt-6", children: [_jsx("div", { className: "rounded-2xl border border-border/50 bg-bg/35 p-4 text-sm text-muted shadow-sm", children: t("connectionlostoverlay.AttemptsExhausted", {
+                                defaultValue: "Realtime reconnect attempts exhausted: {{attempts}}.",
+                                attempts: String(backendConnection.maxReconnectAttempts),
+                            }) }), _jsxs("div", { className: "flex flex-col gap-3 pt-4 sm:flex-row sm:items-center", children: [_jsx(Button, { variant: "default", size: "lg", onClick: () => {
+                                        void handleRestart();
+                                    }, disabled: busy !== null, className: "w-full sm:w-auto sm:min-w-[11rem]", children: busy === "restart"
+                                        ? t("restartbanner.Restarting", {
+                                            defaultValue: "Restarting...",
+                                        })
+                                        : t("finetuningview.Restart", {
+                                            defaultValue: desktopRuntime ? "Restart App" : "Restart",
+                                        }) }), _jsx(Button, { variant: "outline", size: "lg", onClick: retryBackendConnection, disabled: busy !== null, className: "w-full sm:w-auto sm:min-w-[11rem]", children: t("vectorbrowserview.RetryConnection", {
+                                        defaultValue: "Retry Connection",
+                                    }) })] })] })] }) }));
+}

package/dist/components/shell/DnaLoader.d.ts

@@ -0,0 +1,8 @@
+interface DnaLoaderProps {
+    className?: string;
+    progress?: number;
+    size?: number;
+}
+export declare function DnaLoader({ className, progress, size, }: DnaLoaderProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DnaLoader.d.ts.map

package/dist/components/shell/DnaLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DnaLoader.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/DnaLoader.tsx"],"names":[],"mappings":"AA4BA,UAAU,cAAc;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,QAAY,EACZ,IAAU,GACX,EAAE,cAAc,2CAmDhB"}

package/dist/components/shell/DnaLoader.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+const NODE_COUNT = 18;
+const HELIX_HEIGHT = 104;
+const HELIX_RADIUS = 26;
+const RING_RADIUS = 45;
+const RING_INNER_RADIUS = 31;
+const DNA_NODE_IDS = Array.from({ length: NODE_COUNT }, (_, index) => `dna-loader-pair-${index}`);
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+function mix(from, to, amount) {
+    return from + (to - from) * amount;
+}
+function pointStyle(x, y) {
+    return {
+        left: `calc(50% + ${x.toFixed(2)}px)`,
+        top: `calc(50% + ${y.toFixed(2)}px)`,
+    };
+}
+export function DnaLoader({ className, progress = 0, size = 124, }) {
+    const morph = clamp((progress - 68) / 32, 0, 1);
+    return (_jsx("div", { "aria-hidden": "true", className: cn("dna-loader", className), "data-complete": progress >= 100 ? "true" : "false", style: { "--dna-loader-size": `${size}px` }, children: DNA_NODE_IDS.map((nodeId, index) => {
+            const t = index / (NODE_COUNT - 1);
+            const helixY = mix(-HELIX_HEIGHT / 2, HELIX_HEIGHT / 2, t);
+            const helixAngle = t * Math.PI * 5.35;
+            const ringAngle = t * Math.PI * 2 - Math.PI / 2;
+            const helixXOuter = Math.sin(helixAngle) * HELIX_RADIUS;
+            const helixXInner = Math.sin(helixAngle + Math.PI) * HELIX_RADIUS;
+            const ringOuterX = Math.cos(ringAngle) * RING_RADIUS;
+            const ringOuterY = Math.sin(ringAngle) * RING_RADIUS;
+            const ringInnerX = Math.cos(ringAngle) * RING_INNER_RADIUS;
+            const ringInnerY = Math.sin(ringAngle) * RING_INNER_RADIUS;
+            const x1 = mix(helixXOuter, ringOuterX, morph);
+            const y1 = mix(helixY, ringOuterY, morph);
+            const x2 = mix(helixXInner, ringInnerX, morph);
+            const y2 = mix(helixY, ringInnerY, morph);
+            const dx = x2 - x1;
+            const dy = y2 - y1;
+            const length = Math.sqrt(dx * dx + dy * dy);
+            const angle = Math.atan2(dy, dx);
+            const opacity = 0.36 + Math.sin(helixAngle) * 0.18;
+            return (_jsxs("div", { className: "dna-loader__pair", children: [_jsx("span", { className: "dna-loader__bar", style: {
+                            ...pointStyle(x1, y1),
+                            width: `${length.toFixed(2)}px`,
+                            transform: `rotate(${angle}rad)`,
+                            opacity,
+                        } }), _jsx("span", { className: "dna-loader__dot", style: pointStyle(x1, y1) }), _jsx("span", { className: "dna-loader__dot", style: pointStyle(x2, y2) })] }, nodeId));
+        }) }));
+}

package/dist/components/shell/Header.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+interface HeaderProps {
+    mobileLeft?: ReactNode;
+    pageRightExtras?: ReactNode;
+    transparent?: boolean;
+    hideCloudCredits?: boolean;
+    tasksEventsPanelOpen?: boolean;
+    onToggleTasksPanel?: () => void;
+}
+export declare function Header({ mobileLeft, pageRightExtras, transparent: _transparent, hideCloudCredits, tasksEventsPanelOpen, onToggleTasksPanel, }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Header.d.ts.map

package/dist/components/shell/Header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/Header.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAEV,SAAS,EAEV,MAAM,OAAO,CAAC;AA4Ef,UAAU,WAAW;IACnB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;CACjC;AAYD,wBAAgB,MAAM,CAAC,EACrB,UAAU,EACV,eAAe,EACf,WAAW,EAAE,YAAoB,EACjC,gBAAwB,EACxB,oBAA4B,EAC5B,kBAAkB,GACnB,EAAE,WAAW,2CA0lBb"}