@elizaos/app-core 2.0.0-alpha.73 → 2.0.0-alpha.75

package/components/SubscriptionStatus.js

@@ -0,0 +1,301 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SubscriptionStatus — Anthropic and OpenAI subscription connection panels.
+ *
+ * Extracted from SettingsView.tsx for decomposition (P2 §10).
+ */
+import { Button, Input } from "@elizaos/ui";
+import { useCallback, useRef, useState } from "react";
+import { client } from "../api";
+import { useTimeout } from "../hooks";
+import { getStoredSubscriptionProvider, } from "../providers";
+import { useApp } from "../state";
+import { openExternalUrl } from "../utils";
+function formatRequestError(err) {
+    if (err instanceof Error)
+        return err.message;
+    return String(err);
+}
+function normalizeOpenAICallbackInput(input) {
+    const trimmed = input.trim();
+    if (!trimmed) {
+        return {
+            ok: false,
+            error: "subscriptionstatus.PasteCallbackUrlFromLocalhost",
+        };
+    }
+    const normalized = trimmed.startsWith("localhost:") || trimmed.startsWith("127.0.0.1:")
+        ? `http://${trimmed}`
+        : trimmed;
+    // Allow raw codes in addition to full callback URLs.
+    if (!normalized.includes("://")) {
+        if (normalized.length > 4096) {
+            return { ok: false, error: "subscriptionstatus.CallbackCodeTooLong" };
+        }
+        return { ok: true, code: normalized };
+    }
+    let parsed;
+    try {
+        parsed = new URL(normalized);
+    }
+    catch {
+        return { ok: false, error: "subscriptionstatus.InvalidCallbackUrl" };
+    }
+    const hostOk = parsed.hostname === "localhost" || parsed.hostname === "127.0.0.1";
+    if (!hostOk ||
+        parsed.port !== "1455" ||
+        parsed.pathname !== "/auth/callback") {
+        return {
+            ok: false,
+            error: "subscriptionstatus.ExpectedCallbackUrl",
+        };
+    }
+    if (!parsed.searchParams.get("code")) {
+        return {
+            ok: false,
+            error: "subscriptionstatus.CallbackUrlMissingCode",
+        };
+    }
+    return { ok: true, code: normalized };
+}
+export function SubscriptionStatus({ resolvedSelectedId, subscriptionStatus, anthropicConnected, setAnthropicConnected, openaiConnected, setOpenaiConnected, handleSelectSubscription, loadSubscriptionStatus, }) {
+    const { setTimeout } = useTimeout();
+    const { t } = useApp();
+    const [subscriptionTab, setSubscriptionTab] = useState("token");
+    const [setupTokenValue, setSetupTokenValue] = useState("");
+    const [setupTokenSaving, setSetupTokenSaving] = useState(false);
+    const setupTokenRef = useRef(setupTokenValue);
+    setupTokenRef.current = setupTokenValue;
+    const savingRef = useRef(setupTokenSaving);
+    savingRef.current = setupTokenSaving;
+    const [setupTokenSuccess, setSetupTokenSuccess] = useState(false);
+    const [anthropicOAuthStarted, setAnthropicOAuthStarted] = useState(false);
+    const [anthropicCode, setAnthropicCode] = useState("");
+    const anthropicCodeRef = useRef(anthropicCode);
+    anthropicCodeRef.current = anthropicCode;
+    const [anthropicError, setAnthropicError] = useState("");
+    const [anthropicExchangeBusy, setAnthropicExchangeBusy] = useState(false);
+    const anthropicExchangeBusyRef = useRef(false);
+    const [openaiOAuthStarted, setOpenaiOAuthStarted] = useState(false);
+    const [openaiCallbackUrl, setOpenaiCallbackUrl] = useState("");
+    const openaiCallbackRef = useRef(openaiCallbackUrl);
+    openaiCallbackRef.current = openaiCallbackUrl;
+    const [openaiError, setOpenaiError] = useState("");
+    const [openaiExchangeBusy, setOpenaiExchangeBusy] = useState(false);
+    const openaiExchangeBusyRef = useRef(false);
+    const [subscriptionDisconnecting, setSubscriptionDisconnecting] = useState(null);
+    const disconnectingRef = useRef(subscriptionDisconnecting);
+    disconnectingRef.current = subscriptionDisconnecting;
+    const anthropicStatus = subscriptionStatus.find((s) => s.provider === "anthropic-subscription");
+    const openaiStatus = subscriptionStatus.find((s) => s.provider === "openai-subscription" || s.provider === "openai-codex");
+    const handleSaveSetupToken = useCallback(async () => {
+        if (!setupTokenRef.current.trim() || savingRef.current)
+            return;
+        setSetupTokenSaving(true);
+        setSetupTokenSuccess(false);
+        setAnthropicError("");
+        try {
+            const result = await client.submitAnthropicSetupToken(setupTokenRef.current.trim());
+            if (!result.success) {
+                setAnthropicError(t("subscriptionstatus.FailedToSaveSetupToken"));
+                return;
+            }
+            setSetupTokenSuccess(true);
+            setSetupTokenValue("");
+            await handleSelectSubscription("anthropic-subscription");
+            await loadSubscriptionStatus();
+            await client.restartAgent();
+            setTimeout(() => setSetupTokenSuccess(false), 2000);
+        }
+        catch (err) {
+            setAnthropicError(t("subscriptionstatus.FailedToSaveTokenError", {
+                message: formatRequestError(err),
+            }));
+        }
+        finally {
+            setSetupTokenSaving(false);
+        }
+    }, [handleSelectSubscription, loadSubscriptionStatus, setTimeout, t]);
+    const handleDisconnectSubscription = useCallback(async (providerId) => {
+        if (disconnectingRef.current)
+            return;
+        setSubscriptionDisconnecting(providerId);
+        setAnthropicError("");
+        setOpenaiError("");
+        try {
+            await client.deleteSubscription(getStoredSubscriptionProvider(providerId));
+            await loadSubscriptionStatus();
+            if (providerId === "anthropic-subscription") {
+                setAnthropicConnected(false);
+                setAnthropicOAuthStarted(false);
+                setAnthropicCode("");
+            }
+            if (providerId === "openai-subscription") {
+                setOpenaiConnected(false);
+                setOpenaiOAuthStarted(false);
+                setOpenaiCallbackUrl("");
+            }
+            await client.restartAgent();
+        }
+        catch (err) {
+            const msg = t("subscriptionstatus.DisconnectFailedError", {
+                message: formatRequestError(err),
+            });
+            if (providerId === "anthropic-subscription")
+                setAnthropicError(msg);
+            if (providerId === "openai-subscription")
+                setOpenaiError(msg);
+        }
+        finally {
+            setSubscriptionDisconnecting(null);
+        }
+    }, [loadSubscriptionStatus, setAnthropicConnected, setOpenaiConnected, t]);
+    const handleAnthropicStart = useCallback(async () => {
+        setAnthropicError("");
+        try {
+            const { authUrl } = await client.startAnthropicLogin();
+            if (authUrl) {
+                await openExternalUrl(authUrl);
+                setAnthropicOAuthStarted(true);
+                return;
+            }
+            setAnthropicError(t("subscriptionstatus.FailedToGetAuthUrl"));
+        }
+        catch (err) {
+            setAnthropicError(t("subscriptionstatus.FailedToStartLogin", {
+                message: formatRequestError(err),
+            }));
+        }
+    }, [t]);
+    const handleAnthropicExchange = useCallback(async () => {
+        const code = anthropicCodeRef.current.trim();
+        if (!code || anthropicExchangeBusyRef.current)
+            return;
+        anthropicExchangeBusyRef.current = true;
+        setAnthropicExchangeBusy(true);
+        setAnthropicError("");
+        try {
+            const result = await client.exchangeAnthropicCode(code);
+            if (result.success) {
+                setAnthropicConnected(true);
+                setAnthropicOAuthStarted(false);
+                setAnthropicCode("");
+                await handleSelectSubscription("anthropic-subscription");
+                await loadSubscriptionStatus();
+                await client.restartAgent();
+                return;
+            }
+            setAnthropicError(result.error ?? t("subscriptionstatus.ExchangeFailed"));
+        }
+        catch (err) {
+            setAnthropicError(t("subscriptionstatus.ExchangeFailedError", {
+                message: formatRequestError(err),
+            }));
+        }
+        finally {
+            anthropicExchangeBusyRef.current = false;
+            setAnthropicExchangeBusy(false);
+        }
+    }, [
+        handleSelectSubscription,
+        loadSubscriptionStatus,
+        setAnthropicConnected,
+        t,
+    ]);
+    const handleOpenAIStart = useCallback(async () => {
+        setOpenaiError("");
+        try {
+            const { authUrl } = await client.startOpenAILogin();
+            if (authUrl) {
+                await openExternalUrl(authUrl);
+                setOpenaiOAuthStarted(true);
+                return;
+            }
+            setOpenaiError(t("subscriptionstatus.NoAuthUrlReturned"));
+        }
+        catch (err) {
+            setOpenaiError(t("subscriptionstatus.FailedToStartLogin", {
+                message: formatRequestError(err),
+            }));
+        }
+    }, [t]);
+    const handleOpenAIExchange = useCallback(async () => {
+        if (openaiExchangeBusyRef.current)
+            return;
+        const normalized = normalizeOpenAICallbackInput(openaiCallbackRef.current);
+        if (!normalized.ok) {
+            setOpenaiError(t(normalized.error));
+            return;
+        }
+        openaiExchangeBusyRef.current = true;
+        setOpenaiExchangeBusy(true);
+        setOpenaiError("");
+        try {
+            const data = await client.exchangeOpenAICode(normalized.code);
+            if (data.success) {
+                setOpenaiConnected(true);
+                setOpenaiOAuthStarted(false);
+                setOpenaiCallbackUrl("");
+                await handleSelectSubscription("openai-subscription");
+                await loadSubscriptionStatus();
+                await client.restartAgent();
+                return;
+            }
+            const msg = data.error ?? t("subscriptionstatus.ExchangeFailed");
+            setOpenaiError(msg.includes("No active flow")
+                ? t("onboarding.loginSessionExpired")
+                : msg);
+        }
+        catch (err) {
+            console.warn("[eliza] OpenAI exchange failed", err);
+            setOpenaiError(t("onboarding.networkError"));
+        }
+        finally {
+            openaiExchangeBusyRef.current = false;
+            setOpenaiExchangeBusy(false);
+        }
+    }, [handleSelectSubscription, loadSubscriptionStatus, setOpenaiConnected, t]);
+    return (_jsxs("div", { className: "mt-4 pt-4 border-t border-[var(--border)]", children: [resolvedSelectedId === "anthropic-subscription" && (_jsxs("div", { children: [_jsxs("div", { className: "flex justify-between items-center mb-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "inline-block w-2 h-2 rounded-full", style: {
+                                            background: anthropicConnected
+                                                ? "var(--ok,#16a34a)"
+                                                : "var(--warning,#f39c12)",
+                                        } }), _jsx("span", { className: "text-xs font-semibold", children: anthropicConnected
+                                            ? t("subscriptionstatus.ConnectedToClaudeSubscription")
+                                            : t("subscriptionstatus.ClaudeSubscriptionTitle") })] }), anthropicConnected && (_jsx(Button, { variant: "outline", size: "sm", className: "!mt-0", onClick: () => void handleDisconnectSubscription("anthropic-subscription"), disabled: subscriptionDisconnecting === "anthropic-subscription", children: subscriptionDisconnecting === "anthropic-subscription"
+                                    ? t("subscriptionstatus.Disconnecting")
+                                    : t("subscriptionstatus.Disconnect") }))] }), anthropicStatus?.configured && !anthropicStatus.valid && (_jsx("div", { className: "text-xs text-[var(--warning,#f39c12)] mb-3", children: t("subscriptionstatus.ClaudeSubscription") })), _jsxs("div", { className: "flex items-center gap-4 border-b border-[var(--border)] mb-3", children: [_jsx("button", { type: "button", className: `text-xs pb-2 border-b-2 ${subscriptionTab === "token"
+                                    ? "border-[var(--accent)] text-[var(--accent)]"
+                                    : "border-transparent text-[var(--muted)] hover:text-[var(--text)]"}`, onClick: () => setSubscriptionTab("token"), children: t("subscriptionstatus.SetupToken") }), _jsx("button", { type: "button", className: `text-xs pb-2 border-b-2 ${subscriptionTab === "oauth"
+                                    ? "border-[var(--accent)] text-[var(--accent)]"
+                                    : "border-transparent text-[var(--muted)] hover:text-[var(--text)]"}`, onClick: () => setSubscriptionTab("oauth"), children: t("subscriptionstatus.OAuthLogin") })] }), subscriptionTab === "token" ? (_jsxs("div", { children: [_jsx("label", { htmlFor: "subscription-setup-token-input", className: "text-xs font-semibold mb-1.5 block", children: t("subscriptionstatus.SetupToken") }), _jsx(Input, { id: "subscription-setup-token-input", type: "password", placeholder: t("subscriptionstatus.skAntOat01"), value: setupTokenValue, onChange: (e) => {
+                                    setSetupTokenValue(e.target.value);
+                                    setSetupTokenSuccess(false);
+                                    setAnthropicError("");
+                                }, className: "bg-card text-xs font-mono" }), _jsx("div", { className: "text-[11px] text-[var(--muted)] mt-2 whitespace-pre-line", children: t("onboarding.setupTokenInstructions") }), anthropicError && (_jsx("div", { className: "text-[11px] text-[var(--danger,#e74c3c)] mt-2", children: anthropicError })), _jsxs("div", { className: "flex items-center justify-between mt-3", children: [_jsx(Button, { variant: "default", size: "sm", className: "!mt-0", disabled: setupTokenSaving || !setupTokenValue.trim(), onClick: () => void handleSaveSetupToken(), children: setupTokenSaving
+                                            ? t("subscriptionstatus.Saving")
+                                            : t("subscriptionstatus.SaveToken") }), _jsxs("div", { className: "flex items-center gap-2", children: [setupTokenSaving && (_jsx("span", { className: "text-[11px] text-[var(--muted)]", children: t("subscriptionstatus.SavingAmpRestart") })), setupTokenSuccess && (_jsx("span", { className: "text-[11px] text-[var(--ok,#16a34a)]", children: t("messagecontent.Saved") }))] })] })] })) : anthropicConnected ? (_jsx("div", { className: "text-xs text-[var(--muted)]", children: t("subscriptionstatus.YourClaudeSubscrip") })) : !anthropicOAuthStarted ? (_jsxs("div", { children: [_jsx(Button, { variant: "default", size: "sm", className: "!mt-0", onClick: () => void handleAnthropicStart(), children: t("onboarding.loginWithAnthropic") }), _jsx("div", { className: "text-[11px] text-[var(--muted)] mt-1.5", children: t("subscriptionstatus.RequiresClaudePro") }), anthropicError && (_jsx("div", { className: "text-[11px] text-[var(--danger,#e74c3c)] mt-2", children: anthropicError }))] })) : (_jsxs("div", { children: [_jsx("div", { className: "text-xs text-[var(--muted)] mb-2", children: t("subscriptionstatus.AfterLoggingInCo") }), _jsx(Input, { type: "text", placeholder: t("subscriptionstatus.PasteTheAuthorizat"), value: anthropicCode, onChange: (e) => {
+                                    setAnthropicCode(e.target.value);
+                                    setAnthropicError("");
+                                }, className: "bg-card text-xs" }), anthropicError && (_jsx("div", { className: "text-[11px] text-[var(--danger,#e74c3c)] mt-2", children: anthropicError })), _jsxs("div", { className: "flex items-center gap-2 mt-2", children: [_jsx(Button, { variant: "default", size: "sm", className: "!mt-0", disabled: anthropicExchangeBusy || !anthropicCode.trim(), onClick: () => void handleAnthropicExchange(), children: anthropicExchangeBusy
+                                            ? t("onboarding.connecting")
+                                            : t("onboarding.connect") }), _jsx(Button, { variant: "outline", size: "sm", className: "!mt-0", onClick: () => {
+                                            setAnthropicOAuthStarted(false);
+                                            setAnthropicCode("");
+                                        }, children: t("onboarding.startOver") })] })] }))] })), resolvedSelectedId === "openai-subscription" && (_jsxs("div", { children: [_jsxs("div", { className: "flex justify-between items-center mb-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "inline-block w-2 h-2 rounded-full", style: {
+                                            background: openaiConnected
+                                                ? "var(--ok,#16a34a)"
+                                                : "var(--warning,#f39c12)",
+                                        } }), _jsx("span", { className: "text-xs font-semibold", children: openaiConnected
+                                            ? t("subscriptionstatus.ConnectedToChatGPTSubscription")
+                                            : t("subscriptionstatus.ChatGPTSubscriptionTitle") })] }), openaiConnected && (_jsx(Button, { variant: "outline", size: "sm", className: "!mt-0", onClick: () => void handleDisconnectSubscription("openai-subscription"), disabled: subscriptionDisconnecting === "openai-subscription", children: subscriptionDisconnecting === "openai-subscription"
+                                    ? t("subscriptionstatus.Disconnecting")
+                                    : t("subscriptionstatus.Disconnect") }))] }), openaiStatus?.configured && !openaiStatus.valid && (_jsx("div", { className: "text-xs text-[var(--warning,#f39c12)] mb-3", children: t("subscriptionstatus.ChatGPTSubscription") })), openaiConnected ? (_jsx("div", { className: "text-xs text-[var(--muted)]", children: t("subscriptionstatus.YourChatGPTSubscri") })) : !openaiOAuthStarted ? (_jsxs("div", { children: [_jsx(Button, { variant: "default", size: "sm", className: "!mt-0", onClick: () => void handleOpenAIStart(), children: t("subscriptionstatus.LoginWithOpenAI") }), _jsx("div", { className: "text-[11px] text-[var(--muted)] mt-1.5", children: t("subscriptionstatus.RequiresChatGPTPlu") })] })) : (_jsxs("div", { children: [_jsxs("div", { className: "p-2.5 border border-[var(--border)] bg-[var(--bg-muted)] text-[11px] text-[var(--muted)] leading-relaxed", children: [t("subscriptionstatus.AfterLoggingInYo"), " ", _jsx("code", { className: "text-[10px] px-1 border border-[var(--border)] bg-[var(--card)]", children: t("subscriptionstatus.localhost1455") }), t("subscriptionstatus.CopyTheEntireU")] }), _jsx(Input, { type: "text", className: "mt-2 bg-card text-xs", placeholder: t("subscriptionstatus.httpLocalhost145"), value: openaiCallbackUrl, onChange: (e) => {
+                                    setOpenaiCallbackUrl(e.target.value);
+                                    setOpenaiError("");
+                                } }), openaiError && (_jsx("div", { className: "text-[11px] text-[var(--danger,#e74c3c)] mt-2", children: openaiError })), _jsxs("div", { className: "flex items-center gap-2 mt-2", children: [_jsx(Button, { variant: "default", size: "sm", className: "!mt-0", disabled: openaiExchangeBusy || !openaiCallbackUrl.trim(), onClick: () => void handleOpenAIExchange(), children: openaiExchangeBusy
+                                            ? t("subscriptionstatus.Completing")
+                                            : t("onboarding.completeLogin") }), _jsx(Button, { variant: "outline", size: "sm", className: "!mt-0", onClick: () => {
+                                            setOpenaiOAuthStarted(false);
+                                            setOpenaiCallbackUrl("");
+                                        }, children: t("onboarding.startOver") })] })] })), openaiError && !openaiOAuthStarted && (_jsx("div", { className: "text-[11px] text-[var(--danger,#e74c3c)] mt-2", children: openaiError }))] }))] }));
+}

package/components/SystemWarningBanner.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Renders amber warning banners for system-level warnings
+ * broadcast via WebSocket `system-warning` events.
+ */
+export declare function SystemWarningBanner(): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=SystemWarningBanner.d.ts.map

package/components/SystemWarningBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SystemWarningBanner.d.ts","sourceRoot":"","sources":["../../src/components/SystemWarningBanner.tsx"],"names":[],"mappings":"AAKA;;;GAGG;AACH,wBAAgB,mBAAmB,mDA6DlC"}

package/components/SystemWarningBanner.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { useApp } from "../state";
+const AUTO_DISMISS_MS = 20_000;
+/**
+ * Renders amber warning banners for system-level warnings
+ * broadcast via WebSocket `system-warning` events.
+ */
+export function SystemWarningBanner() {
+    const { systemWarnings, dismissSystemWarning, backendConnection } = useApp();
+    const timersRef = useRef(new Map());
+    useEffect(() => {
+        if (!systemWarnings?.length)
+            return;
+        const timers = timersRef.current;
+        for (const message of systemWarnings) {
+            if (!timers.has(message)) {
+                const timer = setTimeout(() => {
+                    timers.delete(message);
+                    dismissSystemWarning(message);
+                }, AUTO_DISMISS_MS);
+                timers.set(message, timer);
+            }
+        }
+        for (const [msg, timer] of timers) {
+            if (!systemWarnings.includes(msg)) {
+                clearTimeout(timer);
+                timers.delete(msg);
+            }
+        }
+    }, [systemWarnings, dismissSystemWarning]);
+    useEffect(() => {
+        const timers = timersRef.current;
+        return () => {
+            for (const timer of timers.values())
+                clearTimeout(timer);
+            timers.clear();
+        };
+    }, []);
+    if (!systemWarnings?.length)
+        return null;
+    const connectionBannerVisible = backendConnection?.state === "reconnecting" ||
+        backendConnection?.state === "failed";
+    const baseTop = connectionBannerVisible ? 36 : 0;
+    return (_jsx(_Fragment, { children: systemWarnings.map((message, index) => (_jsxs("div", { className: "fixed left-0 right-0 z-[9998] flex items-center justify-between gap-3 bg-amber-500 px-4 py-2 text-[13px] font-medium text-white shadow-lg", style: { top: `${baseTop + index * 36}px` }, children: [_jsx("span", { className: "truncate", children: message }), _jsx("button", { type: "button", onClick: () => dismissSystemWarning(message), className: "rounded px-2 py-0.5 text-[12px] text-amber-100 hover:bg-amber-600 transition-colors cursor-pointer shrink-0", children: "x" })] }, message))) }));
+}

package/components/ThemeToggle.d.ts

@@ -0,0 +1,21 @@
+/**
+ * ThemeToggle — day/night switch for light/dark theme.
+ *
+ * Fully props-driven; no app context dependency. Takes the current theme
+ * and a setter from the caller. Works in both "native" and "companion"
+ * visual variants.
+ */
+import type { UiTheme } from "../state/persistence";
+/** Minimal translator function type. */
+export type ThemeTranslatorFn = (key: string) => string;
+export interface ThemeToggleProps {
+    uiTheme: UiTheme;
+    setUiTheme: (theme: UiTheme) => void;
+    /** Optional translator for ARIA labels */
+    t?: ThemeTranslatorFn;
+    /** Optional extra className on the root */
+    className?: string;
+    variant?: "native" | "companion";
+}
+export declare function ThemeToggle({ uiTheme, setUiTheme, t: _t, className, variant: _variant, }: ThemeToggleProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ThemeToggle.d.ts.map

package/components/ThemeToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeToggle.d.ts","sourceRoot":"","sources":["../../src/components/ThemeToggle.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAEpD,wCAAwC;AACxC,MAAM,MAAM,iBAAiB,GAAG,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;AAExD,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,0CAA0C;IAC1C,CAAC,CAAC,EAAE,iBAAiB,CAAC;IACtB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAC;CAClC;AAkDD,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,UAAU,EACV,CAAC,EAAE,EAAE,EACL,SAAS,EACT,OAAO,EAAE,QAAmB,GAC7B,EAAE,gBAAgB,2CAwBlB"}

package/components/ThemeToggle.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ThemeToggle — day/night switch for light/dark theme.
+ *
+ * Fully props-driven; no app context dependency. Takes the current theme
+ * and a setter from the caller. Works in both "native" and "companion"
+ * visual variants.
+ */
+import { useCallback } from "react";
+/** Sun icon SVG for light mode indicator */
+function SunIcon({ className }) {
+    return (_jsxs("svg", { className: className, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "12", r: "5" }), _jsx("line", { x1: "12", y1: "1", x2: "12", y2: "3" }), _jsx("line", { x1: "12", y1: "21", x2: "12", y2: "23" }), _jsx("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }), _jsx("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }), _jsx("line", { x1: "1", y1: "12", x2: "3", y2: "12" }), _jsx("line", { x1: "21", y1: "12", x2: "23", y2: "12" }), _jsx("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" }), _jsx("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" })] }));
+}
+/** Moon icon SVG for dark mode indicator */
+function MoonIcon({ className }) {
+    return (_jsx("svg", { className: className, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) }));
+}
+export function ThemeToggle({ uiTheme, setUiTheme, t: _t, className, variant: _variant = "native", }) {
+    const isDark = uiTheme === "dark";
+    const handleToggle = useCallback(() => {
+        setUiTheme(isDark ? "light" : "dark");
+    }, [isDark, setUiTheme]);
+    return (_jsx("button", { type: "button", "aria-label": "Toggle theme", onClick: handleToggle, onPointerDown: (event) => event.stopPropagation(), className: `inline-flex items-center justify-center w-11 h-11 min-w-[44px] min-h-[44px] border border-border/50 bg-bg/50 backdrop-blur-md cursor-pointer text-sm leading-none hover:border-accent hover:text-txt font-medium hover:-translate-y-0.5 transition-all duration-300 hover:shadow-[0_0_15px_rgba(var(--accent),0.5)] active:scale-95 rounded-xl text-txt shadow-sm ${className ?? ""}`, "data-testid": "theme-toggle", "data-no-camera-drag": "true", children: isDark ? (_jsx(SunIcon, { className: "w-5 h-5" })) : (_jsx(MoonIcon, { className: "w-5 h-5" })) }));
+}

package/components/TrajectoriesView.d.ts

@@ -0,0 +1,12 @@
+/**
+ * TrajectoriesView — view and analyze LLM call trajectories.
+ *
+ * Shows all captured LLM interactions with token counts, latency, and context.
+ * Supports filtering, search, export, and clearing trajectories.
+ */
+interface TrajectoriesViewProps {
+    onSelectTrajectory?: (id: string) => void;
+}
+export declare function TrajectoriesView({ onSelectTrajectory, }: TrajectoriesViewProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TrajectoriesView.d.ts.map

package/components/TrajectoriesView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrajectoriesView.d.ts","sourceRoot":"","sources":["../../src/components/TrajectoriesView.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAgDH,UAAU,qBAAqB;IAC7B,kBAAkB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,kBAAkB,GACnB,EAAE,qBAAqB,2CAkdvB"}

package/components/TrajectoriesView.js

@@ -0,0 +1,183 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * TrajectoriesView — view and analyze LLM call trajectories.
+ *
+ * Shows all captured LLM interactions with token counts, latency, and context.
+ * Supports filtering, search, export, and clearing trajectories.
+ */
+import { client, } from "@elizaos/app-core/api";
+import { useApp } from "@elizaos/app-core/state";
+import { confirmDesktopAction } from "@elizaos/app-core/utils";
+import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@elizaos/ui";
+import { useCallback, useEffect, useState } from "react";
+import { formatTrajectoryDuration, formatTrajectoryTimestamp, formatTrajectoryTokenCount, } from "./trajectory-format";
+const STATUS_COLORS = {
+    active: { bg: "rgba(59, 130, 246, 0.15)", fg: "rgb(59, 130, 246)" },
+    completed: { bg: "rgba(34, 197, 94, 0.15)", fg: "rgb(34, 197, 94)" },
+    error: { bg: "rgba(239, 68, 68, 0.15)", fg: "rgb(239, 68, 68)" },
+};
+const SOURCE_COLORS = {
+    chat: { bg: "rgba(99, 102, 241, 0.15)", fg: "rgb(99, 102, 241)" },
+    autonomy: { bg: "rgba(245, 158, 11, 0.15)", fg: "rgb(245, 158, 11)" },
+    telegram: { bg: "rgba(34, 197, 94, 0.15)", fg: "rgb(34, 197, 94)" },
+    discord: { bg: "rgba(88, 101, 242, 0.15)", fg: "rgb(88, 101, 242)" },
+    api: { bg: "rgba(156, 163, 175, 0.15)", fg: "rgb(156, 163, 175)" },
+    orchestrator: { bg: "rgba(168, 85, 247, 0.15)", fg: "rgb(168, 85, 247)" },
+};
+export function TrajectoriesView({ onSelectTrajectory, }) {
+    const { t } = useApp();
+    const [loading, setLoading] = useState(true);
+    const [result, setResult] = useState(null);
+    const [stats, setStats] = useState(null);
+    const [config, setConfig] = useState(null);
+    const [error, setError] = useState(null);
+    // Filters
+    const [statusFilter, setStatusFilter] = useState("");
+    const [sourceFilter, setSourceFilter] = useState("");
+    const [searchQuery, setSearchQuery] = useState("");
+    const [page, setPage] = useState(0);
+    const pageSize = 50;
+    // Actions
+    const [exporting, setExporting] = useState(false);
+    const [clearing, setClearing] = useState(false);
+    const [updatingLogging, setUpdatingLogging] = useState(false);
+    const loadTrajectories = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const [trajResult, statsResult, configResult] = await Promise.all([
+                client.getTrajectories({
+                    limit: pageSize,
+                    offset: page * pageSize,
+                    status: statusFilter || undefined,
+                    source: sourceFilter || undefined,
+                    search: searchQuery || undefined,
+                }),
+                client.getTrajectoryStats(),
+                client.getTrajectoryConfig(),
+            ]);
+            setResult(trajResult);
+            setStats(statsResult);
+            setConfig(configResult);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : t("trajectoriesview.FailedToLoad"));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [page, statusFilter, sourceFilter, searchQuery, t]);
+    useEffect(() => {
+        void loadTrajectories();
+    }, [loadTrajectories]);
+    const handleToggleLogging = async () => {
+        if (!config)
+            return;
+        setUpdatingLogging(true);
+        try {
+            const updated = await client.updateTrajectoryConfig({
+                enabled: !config.enabled,
+            });
+            setConfig(updated);
+        }
+        catch (err) {
+            setError(err instanceof Error
+                ? err.message
+                : t("trajectoriesview.FailedToUpdateConfig"));
+        }
+        finally {
+            setUpdatingLogging(false);
+        }
+    };
+    const handleExport = async (format, includePrompts) => {
+        setExporting(true);
+        try {
+            const blob = await client.exportTrajectories({ format, includePrompts });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement("a");
+            a.href = url;
+            a.download = `trajectories-${new Date().toISOString().split("T")[0]}.${format}`;
+            a.click();
+            URL.revokeObjectURL(url);
+        }
+        catch (err) {
+            setError(err instanceof Error
+                ? err.message
+                : t("trajectoriesview.FailedToExport"));
+        }
+        finally {
+            setExporting(false);
+        }
+    };
+    const handleClearAll = async () => {
+        const confirmed = await confirmDesktopAction({
+            title: t("trajectoriesview.DeleteAllTitle"),
+            message: t("trajectoriesview.DeleteAllMessage"),
+            detail: t("trajectoriesview.DeleteAllDetail"),
+            confirmLabel: t("common.deleteAll"),
+            cancelLabel: t("common.cancel"),
+            type: "warning",
+        });
+        if (!confirmed) {
+            return;
+        }
+        setClearing(true);
+        try {
+            await client.clearAllTrajectories();
+            void loadTrajectories();
+        }
+        catch (err) {
+            setError(err instanceof Error
+                ? err.message
+                : t("trajectoriesview.FailedToClear"));
+        }
+        finally {
+            setClearing(false);
+        }
+    };
+    const handleClearFilters = () => {
+        setStatusFilter("");
+        setSourceFilter("");
+        setSearchQuery("");
+        setPage(0);
+    };
+    const hasActiveFilters = statusFilter !== "" || sourceFilter !== "" || searchQuery !== "";
+    const trajectories = result?.trajectories ?? [];
+    const total = result?.total ?? 0;
+    const totalPages = Math.ceil(total / pageSize);
+    const sources = stats?.bySource ? Object.keys(stats.bySource) : [];
+    return (_jsxs("div", { className: "flex flex-col h-full gap-3", "data-testid": "trajectories-view", children: [stats && (_jsxs("div", { className: "flex flex-wrap gap-4 text-xs", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-muted", children: t("trajectoriesview.Total") }), _jsx("span", { className: "font-semibold", children: stats.totalTrajectories.toLocaleString() })] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-muted", children: t("trajectoriesview.LLMCalls") }), _jsx("span", { className: "font-semibold", children: stats.totalLlmCalls.toLocaleString() })] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-muted", children: t("trajectoriesview.Tokens") }), _jsx("span", { className: "font-semibold text-txt", children: formatTrajectoryTokenCount(stats.totalPromptTokens + stats.totalCompletionTokens, { emptyLabel: "0" }) }), _jsxs("span", { className: "text-muted text-[10px]", children: ["(", formatTrajectoryTokenCount(stats.totalPromptTokens, {
+                                        emptyLabel: "0",
+                                    }), "\u2191", " ", formatTrajectoryTokenCount(stats.totalCompletionTokens, {
+                                        emptyLabel: "0",
+                                    }), "\u2193)"] })] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-muted", children: t("trajectoriesview.AvgDuration") }), _jsx("span", { className: "font-semibold", children: formatTrajectoryDuration(stats.averageDurationMs) })] }), _jsx("div", { className: "ml-auto flex items-center gap-2", children: _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-muted", children: t("trajectoriesview.Logging") }), _jsx(Button, { variant: "outline", size: "sm", className: `h-6 px-2 py-0.5 text-[11px] shadow-sm ${config?.enabled
+                                        ? "bg-success/20 border-success text-success hover:bg-success/30"
+                                        : "bg-warn/20 border-warn text-warn hover:bg-warn/30"}`, onClick: handleToggleLogging, disabled: !config || updatingLogging, "aria-pressed": config?.enabled ?? false, children: config?.enabled ? t("common.on") : t("common.off") })] }) })] })), _jsxs("div", { className: "flex flex-wrap gap-1.5 items-center", children: [_jsx(Input, { type: "text", placeholder: t("trajectoriesview.Search"), className: "h-8 px-3 py-1.5 text-xs bg-card border-border w-48 shadow-sm", value: searchQuery, onChange: (e) => {
+                            setSearchQuery(e.target.value);
+                            setPage(0);
+                        } }), _jsxs(Select, { value: statusFilter === "" ? "all" : statusFilter, onValueChange: (val) => {
+                            setStatusFilter(val === "all" ? "" : val);
+                            setPage(0);
+                        }, children: [_jsx(SelectTrigger, { className: "h-8 px-3 py-1.5 text-xs bg-card border-border shadow-sm w-36", children: _jsx(SelectValue, { placeholder: t("trajectoriesview.AllStatuses") }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: t("trajectoriesview.AllStatuses") }), _jsx(SelectItem, { value: "active", children: t("appsview.Active") }), _jsx(SelectItem, { value: "completed", children: t("trajectoriesview.Completed") }), _jsx(SelectItem, { value: "error", children: t("logsview.Error") })] })] }), sources.length > 0 && (_jsxs(Select, { value: sourceFilter === "" ? "all" : sourceFilter, onValueChange: (val) => {
+                            setSourceFilter(val === "all" ? "" : val);
+                            setPage(0);
+                        }, children: [_jsx(SelectTrigger, { className: "h-8 px-3 py-1.5 text-xs bg-card border-border shadow-sm w-36", children: _jsx(SelectValue, { placeholder: t("logsview.AllSources") }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: t("logsview.AllSources") }), sources.map((s) => (_jsx(SelectItem, { value: s, children: s }, s)))] })] })), hasActiveFilters && (_jsx(Button, { variant: "outline", size: "sm", className: "h-auto min-h-[2rem] whitespace-normal break-words px-3 py-1.5 text-xs bg-card text-txt hover:text-txt shadow-sm text-left", onClick: handleClearFilters, children: t("logsview.ClearFilters") })), _jsxs("div", { className: "ml-auto flex gap-1.5", children: [_jsx(Button, { variant: "outline", size: "sm", className: "h-auto min-h-[2rem] whitespace-normal break-words px-3 py-1.5 text-xs bg-card text-txt hover:text-txt shadow-sm text-left", onClick: () => void loadTrajectories(), disabled: loading, children: loading
+                                    ? t("common.loading", { defaultValue: "Loading..." })
+                                    : t("common.refresh", { defaultValue: "Refresh" }) }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", size: "sm", className: "h-auto min-h-[2rem] whitespace-normal break-words px-3 py-1.5 text-xs bg-card text-txt hover:text-txt shadow-sm text-left", disabled: exporting || trajectories.length === 0, children: exporting ? t("common.exporting") : t("common.export") }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-48", children: [_jsx(DropdownMenuItem, { onClick: () => handleExport("json", true), children: t("trajectoriesview.JSONWithPrompts") }), _jsx(DropdownMenuItem, { onClick: () => handleExport("json", false), children: t("trajectoriesview.JSONRedacted") }), _jsx(DropdownMenuItem, { onClick: () => handleExport("csv", false), children: t("trajectoriesview.CSVSummaryOnly") }), _jsx(DropdownMenuItem, { onClick: () => handleExport("zip", true), children: t("trajectoriesview.ZIPFolders") })] })] }), _jsx(Button, { variant: "outline", size: "sm", className: "h-auto min-h-[2rem] whitespace-normal break-words px-3 py-1.5 text-xs bg-card text-danger border-danger/50 hover:bg-danger/10 hover:border-danger shadow-sm text-left", onClick: handleClearAll, disabled: clearing || stats?.totalTrajectories === 0, children: clearing ? t("common.clearing") : t("common.clearAll") })] })] }), error && (_jsx("div", { className: "text-xs text-danger border border-danger/30 bg-danger/10 px-3 py-2", children: error })), _jsx("div", { className: "flex-1 min-h-0 overflow-y-auto border border-border bg-card", children: loading && trajectories.length === 0 ? (_jsx("div", { className: "text-center py-8 text-muted", children: t("trajectoriesview.LoadingTrajectories") })) : trajectories.length === 0 ? (_jsxs("div", { className: "text-center py-8 text-muted", children: [hasActiveFilters
+                            ? t("trajectoriesview.NoTrajectoriesMatchingFilters")
+                            : t("trajectoriesview.NoTrajectoriesYet"), !config?.enabled && (_jsx("div", { className: "mt-2 text-warn text-[11px]", children: t("trajectoriesview.LoggingHelp") }))] })) : (_jsxs("table", { className: "w-full text-xs", children: [_jsx("thead", { className: "bg-muted/10 sticky top-0", children: _jsxs("tr", { children: [_jsx("th", { className: "text-left px-2 py-1.5 font-medium", children: t("trajectoriesview.Time") }), _jsx("th", { className: "text-left px-2 py-1.5 font-medium", children: t("trajectoriesview.Source") }), _jsx("th", { className: "text-left px-2 py-1.5 font-medium", children: t("finetuningview.Status") }), _jsx("th", { className: "text-right px-2 py-1.5 font-medium", children: t("trajectoriesview.Calls") }), _jsx("th", { className: "text-right px-2 py-1.5 font-medium", children: t("trajectoriesview.Tokens1") }), _jsx("th", { className: "text-right px-2 py-1.5 font-medium", children: t("trajectoriesview.Duration") })] }) }), _jsx("tbody", { children: trajectories.map((traj) => {
+                                const statusColor = STATUS_COLORS[traj.status] ?? STATUS_COLORS.completed;
+                                const sourceColor = SOURCE_COLORS[traj.source] ?? SOURCE_COLORS.api;
+                                return (_jsxs("tr", { className: "border-t border-border hover:bg-muted/5 cursor-pointer", onClick: () => onSelectTrajectory?.(traj.id), children: [_jsx("td", { className: "px-2 py-1.5 text-muted whitespace-nowrap", children: formatTrajectoryTimestamp(traj.createdAt, "smart") }), _jsx("td", { className: "px-2 py-1.5", children: _jsx("span", { className: "inline-block text-[10px] px-1.5 py-px rounded", style: {
+                                                    background: sourceColor.bg,
+                                                    color: sourceColor.fg,
+                                                }, children: traj.source }) }), _jsx("td", { className: "px-2 py-1.5", children: _jsx("span", { className: "inline-block text-[10px] px-1.5 py-px rounded", style: {
+                                                    background: statusColor.bg,
+                                                    color: statusColor.fg,
+                                                }, children: traj.status }) }), _jsx("td", { className: "px-2 py-1.5 text-right font-mono", children: traj.llmCallCount }), _jsx("td", { className: "px-2 py-1.5 text-right font-mono", children: _jsx("span", { className: "text-txt", children: formatTrajectoryTokenCount(traj.totalPromptTokens + traj.totalCompletionTokens, { emptyLabel: "0" }) }) }), _jsx("td", { className: "px-2 py-1.5 text-right text-muted font-mono", children: formatTrajectoryDuration(traj.durationMs) })] }, traj.id));
+                            }) })] })) }), totalPages > 1 && (_jsxs("div", { className: "flex items-center justify-between text-xs", children: [_jsx("span", { className: "text-muted", children: t("trajectoriesview.ShowingRange", {
+                            start: page * pageSize + 1,
+                            end: Math.min((page + 1) * pageSize, total),
+                            total,
+                        }) }), _jsxs("div", { className: "flex gap-1", children: [_jsx(Button, { variant: "outline", size: "sm", className: "h-auto min-h-[1.75rem] px-2 py-1 text-xs bg-card disabled:opacity-50 shadow-sm", onClick: () => setPage((p) => Math.max(0, p - 1)), disabled: page === 0, children: t("databaseview.Prev") }), _jsx(Button, { variant: "outline", size: "sm", className: "h-auto min-h-[1.75rem] px-2 py-1 text-xs bg-card disabled:opacity-50 shadow-sm", onClick: () => setPage((p) => p + 1), disabled: page >= totalPages - 1, children: t("databaseview.Next") })] })] }))] }));
+}