@elizaos/ui 2.0.0-alpha.382 → 2.0.0-alpha.385

package/packages/app-core/src/components/settings/AppsManagementSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppsManagementSection.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/src/components/settings/AppsManagementSection.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AA0CH,wBAAgB,qBAAqB,4CAwnBpC"}

package/packages/app-core/src/components/settings/AppsManagementSection.js

@@ -0,0 +1,285 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Apps management settings panel — installed app inventory plus the
+ * "Create new app" and "Load from directory" entry points that the
+ * unified APP action exposes over HTTP.
+ *
+ * Endpoints owned by Agent C:
+ *   POST /api/apps/create               — { intent, editTarget? }
+ *   POST /api/apps/relaunch             — { name, verify? }
+ *   POST /api/apps/load-from-directory  — { directory }
+ */
+import { Button, Checkbox, Input } from "@elizaos/ui";
+import { Loader2, Play, RotateCw, Square } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { client } from "../../api/client";
+import { useApp } from "../../state";
+const HEAD_CELL_CLASS = "px-2 py-1.5 text-2xs font-semibold uppercase tracking-wider text-muted";
+const BODY_CELL_CLASS = "px-2 py-2 align-middle";
+export function AppsManagementSection() {
+    const { setActionNotice, t } = useApp();
+    const [installed, setInstalled] = useState([]);
+    const [runs, setRuns] = useState([]);
+    const [listStatus, setListStatus] = useState({
+        state: "loading",
+    });
+    const [busyApp, setBusyApp] = useState(null);
+    const [showCreate, setShowCreate] = useState(false);
+    const [createIntent, setCreateIntent] = useState("");
+    const [createEditTarget, setCreateEditTarget] = useState("");
+    const [createStatus, setCreateStatus] = useState({
+        state: "idle",
+    });
+    const [showLoad, setShowLoad] = useState(false);
+    const [loadDirectory, setLoadDirectory] = useState("");
+    const [loadStatus, setLoadStatus] = useState({ state: "idle" });
+    const [verifyOnRelaunch, setVerifyOnRelaunch] = useState(true);
+    const mountedRef = useRef(true);
+    useEffect(() => {
+        mountedRef.current = true;
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
+    const refresh = useCallback(async () => {
+        setListStatus({ state: "loading" });
+        try {
+            const [apps, appRuns] = await Promise.all([
+                client.listInstalledApps(),
+                client.listAppRuns(),
+            ]);
+            if (!mountedRef.current)
+                return;
+            setInstalled(apps);
+            setRuns(appRuns);
+            setListStatus({ state: "idle" });
+        }
+        catch (err) {
+            if (!mountedRef.current)
+                return;
+            setListStatus({
+                state: "error",
+                message: err instanceof Error ? err.message : "Failed to load apps.",
+            });
+        }
+    }, []);
+    useEffect(() => {
+        void refresh();
+    }, [refresh]);
+    const runsByName = useMemo(() => {
+        const map = new Map();
+        for (const run of runs) {
+            const list = map.get(run.appName) ?? [];
+            list.push(run);
+            map.set(run.appName, list);
+        }
+        return map;
+    }, [runs]);
+    const handleLaunch = useCallback(async (app) => {
+        setBusyApp(app.name);
+        try {
+            await client.launchApp(app.name);
+            setActionNotice(`${app.displayName} launched.`, "success", 3000);
+            await refresh();
+        }
+        catch (err) {
+            setActionNotice(err instanceof Error
+                ? err.message
+                : `Couldn't launch ${app.displayName}.`, "error", 5000);
+        }
+        finally {
+            if (mountedRef.current)
+                setBusyApp(null);
+        }
+    }, [refresh, setActionNotice]);
+    const handleRelaunch = useCallback(async (app) => {
+        setBusyApp(app.name);
+        try {
+            const response = await client.fetch("/api/apps/relaunch", {
+                method: "POST",
+                body: JSON.stringify({
+                    name: app.name,
+                    verify: verifyOnRelaunch,
+                }),
+            });
+            setActionNotice(response.message ?? `${app.displayName} relaunched.`, response.ok === false ? "error" : "success", 4000);
+            await refresh();
+        }
+        catch (err) {
+            setActionNotice(err instanceof Error
+                ? err.message
+                : `Couldn't relaunch ${app.displayName}.`, "error", 5000);
+        }
+        finally {
+            if (mountedRef.current)
+                setBusyApp(null);
+        }
+    }, [refresh, setActionNotice, verifyOnRelaunch]);
+    const handleEdit = useCallback(async (app) => {
+        setBusyApp(app.name);
+        try {
+            const response = await client.fetch("/api/apps/create", {
+                method: "POST",
+                body: JSON.stringify({
+                    intent: "edit",
+                    editTarget: app.name,
+                }),
+            });
+            setActionNotice(response.message ?? `Editing ${app.displayName}…`, response.ok === false ? "error" : "info", 4000);
+        }
+        catch (err) {
+            setActionNotice(err instanceof Error
+                ? err.message
+                : `Couldn't start an edit for ${app.displayName}.`, "error", 5000);
+        }
+        finally {
+            if (mountedRef.current)
+                setBusyApp(null);
+        }
+    }, [setActionNotice]);
+    const handleStop = useCallback(async (app) => {
+        setBusyApp(app.name);
+        try {
+            const result = await client.stopApp(app.name);
+            setActionNotice(result.message ?? `${app.displayName} stopped.`, result.success ? "success" : "error", 3500);
+            await refresh();
+        }
+        catch (err) {
+            setActionNotice(err instanceof Error
+                ? err.message
+                : `Couldn't stop ${app.displayName}.`, "error", 5000);
+        }
+        finally {
+            if (mountedRef.current)
+                setBusyApp(null);
+        }
+    }, [refresh, setActionNotice]);
+    const handleCreateSubmit = useCallback(async (event) => {
+        event.preventDefault();
+        const intent = createIntent.trim();
+        if (!intent)
+            return;
+        setCreateStatus({ state: "loading", message: "Creating app…" });
+        try {
+            const response = await client.fetch("/api/apps/create", {
+                method: "POST",
+                body: JSON.stringify({
+                    intent,
+                    editTarget: createEditTarget.trim() || undefined,
+                }),
+            });
+            if (!mountedRef.current)
+                return;
+            setCreateStatus({ state: "idle" });
+            setCreateIntent("");
+            setCreateEditTarget("");
+            setShowCreate(false);
+            setActionNotice(response.message ?? "App creation started.", response.ok === false ? "error" : "success", 4500);
+            await refresh();
+        }
+        catch (err) {
+            if (!mountedRef.current)
+                return;
+            setCreateStatus({
+                state: "error",
+                message: err instanceof Error ? err.message : "Failed to create app.",
+            });
+        }
+    }, [createEditTarget, createIntent, refresh, setActionNotice]);
+    const handleLoadSubmit = useCallback(async (event) => {
+        event.preventDefault();
+        const directory = loadDirectory.trim();
+        if (!directory)
+            return;
+        setLoadStatus({ state: "loading" });
+        try {
+            const response = await client.fetch("/api/apps/load-from-directory", {
+                method: "POST",
+                body: JSON.stringify({ directory }),
+            });
+            if (!mountedRef.current)
+                return;
+            setLoadStatus({ state: "idle" });
+            setLoadDirectory("");
+            setShowLoad(false);
+            const count = response.loaded ?? response.count ?? 0;
+            setActionNotice(response.message ?? `Loaded ${count} app${count === 1 ? "" : "s"}.`, response.ok === false ? "error" : "success", 4000);
+            await refresh();
+        }
+        catch (err) {
+            if (!mountedRef.current)
+                return;
+            setLoadStatus({
+                state: "error",
+                message: err instanceof Error ? err.message : "Failed to load directory.",
+            });
+        }
+    }, [loadDirectory, refresh, setActionNotice]);
+    const isCreating = createStatus.state === "loading";
+    const isLoading = loadStatus.state === "loading";
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Button, { type: "button", size: "sm", variant: "default", className: "h-8 px-3 text-xs", onClick: () => {
+                            setShowCreate((v) => !v);
+                            setShowLoad(false);
+                        }, children: t("settings.sections.apps.createNew", {
+                            defaultValue: "Create new app",
+                        }) }), _jsx(Button, { type: "button", size: "sm", variant: "outline", className: "h-8 px-3 text-xs", onClick: () => {
+                            setShowLoad((v) => !v);
+                            setShowCreate(false);
+                        }, children: t("settings.sections.apps.loadFromDirectory", {
+                            defaultValue: "Load from directory",
+                        }) }), _jsx("div", { className: "flex-1" }), _jsxs("div", { className: "inline-flex items-center gap-1.5 text-2xs text-muted", children: [_jsx(Checkbox, { checked: verifyOnRelaunch, onCheckedChange: (checked) => setVerifyOnRelaunch(!!checked), "aria-label": t("settings.sections.apps.verifyOnRelaunchLabel", {
+                                    defaultValue: "Verify on relaunch",
+                                }) }), _jsx("span", { children: t("settings.sections.apps.verifyOnRelaunch", {
+                                    defaultValue: "Verify on relaunch",
+                                }) })] })] }), showCreate ? (_jsxs("form", { className: "space-y-2 rounded-md border border-border bg-card p-3", onSubmit: handleCreateSubmit, children: [_jsxs("div", { className: "space-y-1", children: [_jsx("label", { className: "text-xs font-medium text-txt", htmlFor: "apps-create-intent", children: t("settings.sections.apps.intentLabel", {
+                                    defaultValue: "What should the app do?",
+                                }) }), _jsx("textarea", { id: "apps-create-intent", rows: 3, value: createIntent, disabled: isCreating, onChange: (e) => setCreateIntent(e.target.value), className: "block w-full resize-y rounded-md border border-border bg-bg px-2 py-1.5 text-xs text-txt focus:border-accent focus:outline-none disabled:opacity-50", placeholder: t("settings.sections.apps.intentPlaceholder", {
+                                    defaultValue: "Describe the experience you want — e.g. a vibe coder for prototyping web apps with Tailwind.",
+                                }) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("label", { className: "text-xs font-medium text-txt", htmlFor: "apps-create-edit-target", children: t("settings.sections.apps.basedOnLabel", {
+                                    defaultValue: "Based on existing app (optional)",
+                                }) }), _jsxs("select", { id: "apps-create-edit-target", value: createEditTarget, disabled: isCreating, onChange: (e) => setCreateEditTarget(e.target.value), className: "block w-full rounded-md border border-border bg-bg px-2 py-1.5 text-xs text-txt focus:border-accent focus:outline-none disabled:opacity-50", children: [_jsx("option", { value: "", children: t("settings.sections.apps.basedOnNone", {
+                                            defaultValue: "Start from scratch",
+                                        }) }), installed.map((app) => (_jsxs("option", { value: app.name, children: [app.displayName, " (", app.name, ")"] }, app.name)))] })] }), _jsxs("div", { className: "flex items-center gap-2 pt-1", children: [_jsx(Button, { type: "submit", size: "sm", variant: "default", className: "h-7 px-3 text-xs", disabled: isCreating || createIntent.trim().length === 0, children: isCreating ? (_jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin", "aria-hidden": true }), _jsx("span", { children: createStatus.state === "loading"
+                                                ? (createStatus.message ?? "Working…")
+                                                : "Working…" })] })) : (t("common.create", { defaultValue: "Create" })) }), _jsx(Button, { type: "button", size: "sm", variant: "ghost", className: "h-7 px-3 text-xs text-muted", onClick: () => {
+                                    setShowCreate(false);
+                                    setCreateIntent("");
+                                    setCreateEditTarget("");
+                                    setCreateStatus({ state: "idle" });
+                                }, disabled: isCreating, children: t("common.cancel", { defaultValue: "Cancel" }) }), createStatus.state === "error" ? (_jsx("span", { className: "text-2xs text-danger", children: createStatus.message })) : null] })] })) : null, showLoad ? (_jsxs("form", { className: "space-y-2 rounded-md border border-border bg-card p-3", onSubmit: handleLoadSubmit, children: [_jsxs("div", { className: "space-y-1", children: [_jsx("label", { className: "text-xs font-medium text-txt", htmlFor: "apps-load-directory", children: t("settings.sections.apps.directoryLabel", {
+                                    defaultValue: "Directory path",
+                                }) }), _jsx(Input, { id: "apps-load-directory", type: "text", value: loadDirectory, disabled: isLoading, onChange: (e) => setLoadDirectory(e.target.value), placeholder: "/Users/me/code/my-app", className: "h-8 text-xs" })] }), _jsxs("div", { className: "flex items-center gap-2 pt-1", children: [_jsx(Button, { type: "submit", size: "sm", variant: "default", className: "h-7 px-3 text-xs", disabled: isLoading || loadDirectory.trim().length === 0, children: isLoading ? (_jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin", "aria-hidden": true }), _jsx("span", { children: t("common.loading", { defaultValue: "Loading…" }) })] })) : (t("settings.sections.apps.loadButton", {
+                                    defaultValue: "Load",
+                                })) }), _jsx(Button, { type: "button", size: "sm", variant: "ghost", className: "h-7 px-3 text-xs text-muted", onClick: () => {
+                                    setShowLoad(false);
+                                    setLoadDirectory("");
+                                    setLoadStatus({ state: "idle" });
+                                }, disabled: isLoading, children: t("common.cancel", { defaultValue: "Cancel" }) }), loadStatus.state === "error" ? (_jsx("span", { className: "text-2xs text-danger", children: loadStatus.message })) : null] })] })) : null, listStatus.state === "loading" ? (_jsxs("div", { className: "flex items-center gap-2 px-1 py-3 text-xs text-muted", children: [_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin", "aria-hidden": true }), _jsx("span", { children: t("settings.sections.apps.loadingApps", {
+                            defaultValue: "Loading apps…",
+                        }) })] })) : listStatus.state === "error" ? (_jsx("div", { className: "rounded-md border border-danger/30 bg-danger/5 px-3 py-2 text-xs text-danger", children: listStatus.message })) : installed.length === 0 ? (_jsx("div", { className: "rounded-md border border-border bg-card px-3 py-4 text-center text-xs text-muted", children: t("settings.sections.apps.empty", {
+                    defaultValue: "No apps installed yet. Click 'Create new app' to scaffold one.",
+                }) })) : (_jsx("div", { className: "overflow-x-auto rounded-md border border-border", children: _jsxs("table", { className: "w-full text-left text-xs", children: [_jsx("thead", { className: "bg-bg-hover", children: _jsxs("tr", { children: [_jsx("th", { className: HEAD_CELL_CLASS, children: t("settings.sections.apps.col.name", {
+                                            defaultValue: "App",
+                                        }) }), _jsx("th", { className: HEAD_CELL_CLASS, children: t("settings.sections.apps.col.id", {
+                                            defaultValue: "ID",
+                                        }) }), _jsx("th", { className: HEAD_CELL_CLASS, children: t("settings.sections.apps.col.version", {
+                                            defaultValue: "Version",
+                                        }) }), _jsx("th", { className: HEAD_CELL_CLASS, children: t("settings.sections.apps.col.runs", {
+                                            defaultValue: "Runs",
+                                        }) }), _jsx("th", { className: `${HEAD_CELL_CLASS} text-right`, children: t("settings.sections.apps.col.actions", {
+                                            defaultValue: "Actions",
+                                        }) })] }) }), _jsx("tbody", { children: installed.map((app) => {
+                                const appRuns = runsByName.get(app.name) ?? [];
+                                const running = appRuns.length > 0;
+                                const busy = busyApp === app.name;
+                                return (_jsxs("tr", { className: "border-t border-border/60 hover:bg-bg-hover/40", "data-testid": `apps-mgmt-row-${app.name}`, children: [_jsx("td", { className: `${BODY_CELL_CLASS} font-medium text-txt`, children: app.displayName }), _jsx("td", { className: `${BODY_CELL_CLASS} font-mono text-2xs text-muted`, children: app.name }), _jsx("td", { className: `${BODY_CELL_CLASS} text-2xs text-muted`, children: app.version || "—" }), _jsx("td", { className: BODY_CELL_CLASS, children: running ? (_jsxs("span", { className: "inline-flex items-center rounded-full bg-ok/10 px-1.5 py-0.5 text-2xs font-medium text-ok", children: [appRuns.length, " ", appRuns.length === 1 ? "run" : "runs"] })) : (_jsx("span", { className: "text-2xs text-muted", children: "\u2014" })) }), _jsx("td", { className: `${BODY_CELL_CLASS} text-right`, children: _jsxs("div", { className: "inline-flex items-center gap-1", children: [_jsx(Button, { type: "button", size: "sm", variant: "ghost", className: "h-7 px-2 text-xs", disabled: busy, onClick: () => void handleLaunch(app), title: t("settings.sections.apps.launch", {
+                                                            defaultValue: "Launch",
+                                                        }), "aria-label": `Launch ${app.displayName}`, children: _jsx(Play, { className: "h-3.5 w-3.5", "aria-hidden": true }) }), _jsx(Button, { type: "button", size: "sm", variant: "ghost", className: "h-7 px-2 text-xs", disabled: busy, onClick: () => void handleRelaunch(app), title: t("settings.sections.apps.relaunch", {
+                                                            defaultValue: "Relaunch",
+                                                        }), "aria-label": `Relaunch ${app.displayName}`, children: _jsx(RotateCw, { className: "h-3.5 w-3.5", "aria-hidden": true }) }), _jsx(Button, { type: "button", size: "sm", variant: "ghost", className: "h-7 px-2 text-xs", disabled: busy, onClick: () => void handleEdit(app), children: t("settings.sections.apps.edit", {
+                                                            defaultValue: "Edit",
+                                                        }) }), running ? (_jsx(Button, { type: "button", size: "sm", variant: "ghost", className: "h-7 px-2 text-xs text-danger hover:text-danger", disabled: busy, onClick: () => void handleStop(app), title: t("settings.sections.apps.stop", {
+                                                            defaultValue: "Stop",
+                                                        }), "aria-label": `Stop ${app.displayName}`, children: _jsx(Square, { className: "h-3.5 w-3.5", "aria-hidden": true }) })) : null] }) })] }, app.name));
+                            }) })] }) }))] }));
+}

package/packages/app-core/src/components/settings/PermissionsSection.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from "@elizaos/ui";
 import { Check } from "lucide-react";
 import { useCallback, useMemo, useState } from "react";
-import { useBootConfig } from "../../config";
+import { useBootConfig } from "../../config/boot-config-react";
 import { hasRequiredOnboardingPermissions, isDesktopPlatform, isNative, isWebPlatform, } from "../../platform";
 import { useApp } from "../../state";
 import { PermissionIcon } from "../permissions/PermissionIcon";

package/packages/app-core/src/components/settings/ProviderSwitcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProviderSwitcher.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/src/components/settings/ProviderSwitcher.tsx"],"names":[],"mappings":"AAkCA,OAAO,EAAkC,KAAK,cAAc,EAAE,MAAM,WAAW,CAAC;AAUhF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAoBhD,UAAU,UAAU;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,cAAc,EAAE,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;CAC9C;AASD,UAAU,qBAAqB;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,YAAY,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC3B,iBAAiB,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAClC,sBAAsB,CAAC,EAAE,CACvB,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC5B,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC3B;AAwJD,wBAAgB,gBAAgB,CAAC,KAAK,GAAE,qBAA0B,2CAk7BjE"}
+{"version":3,"file":"ProviderSwitcher.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/src/components/settings/ProviderSwitcher.tsx"],"names":[],"mappings":"AAkCA,OAAO,EAAkC,KAAK,cAAc,EAAE,MAAM,WAAW,CAAC;AAahF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAoBhD,UAAU,UAAU;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,cAAc,EAAE,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;CAC9C;AASD,UAAU,qBAAqB;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,YAAY,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC3B,iBAAiB,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAClC,sBAAsB,CAAC,EAAE,CACvB,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC5B,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC3B;AAwJD,wBAAgB,gBAAgB,CAAC,KAAK,GAAE,qBAA0B,2CAk7BjE"}

package/packages/app-core/src/components/settings/ProviderSwitcher.js

@@ -4,7 +4,7 @@ import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
 import { AlertCircle, CheckCircle2, Circle, Cloud, Cpu, KeyRound, Loader2, ShieldCheck, } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { client } from "../../api";
-import { ConfigRenderer, defaultRegistry } from "../../config";
+import { ConfigRenderer, defaultRegistry, } from "../../components/config-ui/config-renderer";
 import { appNameInterpolationVars, useBranding } from "../../config/branding";
 import { getOnboardingProviderOption, isSubscriptionProviderSelectionId, SUBSCRIPTION_PROVIDER_SELECTIONS, } from "../../providers";
 import { useApp } from "../../state";
@@ -172,7 +172,7 @@ export function ProviderSwitcher(props = {}) {
                     small: "minimax/minimax-m2.7",
                     medium: "anthropic/claude-sonnet-4.6",
                     large: "moonshotai/kimi-k2.5",
-                    mega: "anthropic/claude-sonnet-4.6",
+                    mega: "anthropic/claude-opus-4-7",
                 };
                 const vars = asRecord(asRecord(cfg.env)?.vars);
                 const envFor = (key) => readConfigString(vars, key);

package/packages/app-core/src/components/settings/SecuritySettingsSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SecuritySettingsSection.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/src/components/settings/SecuritySettingsSection.tsx"],"names":[],"mappings":"AAooBA,wBAAgB,uBAAuB,4CAUtC"}
+{"version":3,"file":"SecuritySettingsSection.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/src/components/settings/SecuritySettingsSection.tsx"],"names":[],"mappings":"AAi0BA,wBAAgB,uBAAuB,4CAwBtC"}

package/packages/app-core/src/components/settings/SecuritySettingsSection.js

@@ -3,6 +3,7 @@ import { Button, cn, Input, Label } from "@elizaos/ui";
 import { KeyRound, Laptop, Loader2, Monitor, RefreshCw, Shield, Smartphone, Trash2, } from "lucide-react";
 import { useCallback, useEffect, useId, useState, } from "react";
 import { authChangePassword, authListSessions, authMe, authRevokeSession, authSetup, } from "../../api/auth-client";
+import { useBootConfig } from "../../config/boot-config-react";
 function formatRelativeTime(ms) {
     if (ms == null)
         return "local only";
@@ -28,13 +29,13 @@ function DeviceIcon({ userAgent }) {
     }
     return _jsx(Laptop, { className: "h-4 w-4 shrink-0 opacity-70" });
 }
-const SECTION_CLASS = "rounded-2xl border border-border/50 bg-bg/40 p-5 shadow-sm space-y-4";
+const SECTION_CLASS = "rounded-lg border border-border/50 bg-bg/40 p-4 shadow-sm space-y-4 sm:p-5";
 const SECTION_TITLE_CLASS = "flex items-center gap-2 text-sm font-semibold text-foreground/90";
 const DIVIDER_CLASS = "border-t border-border/40";
 function SectionShell({ icon, title, children, }) {
     return (_jsxs("div", { className: SECTION_CLASS, children: [_jsxs("h3", { className: SECTION_TITLE_CLASS, children: [icon, title] }), _jsx("div", { className: DIVIDER_CLASS }), children] }));
 }
-async function loadAccessState() {
+async function fetchAccessState() {
     const result = await authMe();
     if (result.ok === true) {
         return {
@@ -58,18 +59,92 @@ async function loadAccessState() {
         message: "Security settings are unavailable while auth storage is offline.",
     };
 }
-function AccessModeSection() {
-    const [state, setState] = useState({ phase: "loading" });
-    const load = useCallback(async () => {
-        setState({ phase: "loading" });
-        setState(await loadAccessState());
-    }, []);
-    useEffect(() => {
-        void load();
-    }, [load]);
+function parseAbsoluteUrl(value) {
+    const trimmed = value?.trim();
+    if (!trimmed)
+        return null;
+    try {
+        return new URL(trimmed);
+    }
+    catch {
+        return null;
+    }
+}
+function trimTrailingSlash(value) {
+    return value.endsWith("/") ? value.slice(0, -1) : value;
+}
+function isLoopbackHost(hostname) {
+    const normalized = hostname.toLowerCase();
+    return (normalized === "localhost" ||
+        normalized === "::1" ||
+        normalized === "[::1]" ||
+        normalized === "127.0.0.1" ||
+        normalized.startsWith("127."));
+}
+function isAllInterfacesHost(hostname) {
+    const normalized = hostname.toLowerCase();
+    return (normalized === "0.0.0.0" || normalized === "::" || normalized === "[::]");
+}
+function isPrivateHost(hostname) {
+    const normalized = hostname.toLowerCase();
+    return (normalized.startsWith("10.") ||
+        normalized.startsWith("192.168.") ||
+        /^172\.(1[6-9]|2\d|3[0-1])\./.test(normalized) ||
+        normalized.endsWith(".local"));
+}
+function securitySettingsUrl(origin) {
+    return `${trimTrailingSlash(origin)}/settings#security`;
+}
+function describeEndpoint(url) {
+    if (isAllInterfacesHost(url.hostname)) {
+        return {
+            value: "All interfaces",
+            detail: `${url.host}; use this machine's LAN, tailnet, or tunnel hostname from another device.`,
+        };
+    }
+    if (isLoopbackHost(url.hostname)) {
+        return {
+            value: "Loopback only",
+            detail: `${url.host}; reachable from this machine only.`,
+        };
+    }
+    if (isPrivateHost(url.hostname)) {
+        return {
+            value: "LAN or tailnet",
+            detail: `${url.host}; reachable where this private network permits.`,
+        };
+    }
+    return {
+        value: "Remote URL",
+        detail: `${url.host}; remote browsers can use this address if firewall rules allow it.`,
+    };
+}
+function currentPageOrigin() {
+    if (typeof window === "undefined")
+        return null;
+    const protocol = window.location.protocol;
+    if (protocol !== "http:" && protocol !== "https:")
+        return null;
+    return window.location.origin;
+}
+function AccessInfoRow({ label, value, detail, }) {
+    return (_jsxs("div", { className: "grid gap-1 border-t border-border/30 py-2.5 first:border-t-0 sm:grid-cols-[10rem_minmax(0,1fr)] sm:gap-3", children: [_jsx("div", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: label }), _jsxs("div", { className: "min-w-0 space-y-0.5", children: [_jsx("div", { className: "break-words text-sm font-medium text-foreground/90", children: value }), _jsx("p", { className: "text-xs leading-5 text-muted-foreground", children: detail })] })] }));
+}
+function StatusBadge({ children, tone = "neutral", }) {
+    return (_jsx("span", { className: cn("inline-flex w-fit shrink-0 rounded-full border px-2.5 py-1 text-xs font-medium", tone === "ok" &&
+            "border-[var(--ok-muted)] bg-[var(--ok-subtle)] text-ok", tone === "warn" && "border-warning/40 bg-warning/10 text-warning", tone === "danger" && "border-danger/40 bg-danger/10 text-danger", tone === "neutral" && "border-border/60 bg-bg/70 text-muted-foreground"), children: children }));
+}
+function AccessModeSection({ state, onRefresh, }) {
+    const bootConfig = useBootConfig();
     let title = "Checking access";
     let detail = "Confirming how this browser is connected.";
     let status = "Checking";
+    let statusTone = "neutral";
+    let currentBrowserValue = "Checking";
+    let currentBrowserDetail = "Waiting for the auth endpoint to identify this browser.";
+    let remotePasswordValue = "Checking";
+    let remotePasswordDetail = "Waiting for the auth endpoint to report remote password state.";
+    let remotePasswordTone = "neutral";
     if (state.phase === "loaded") {
         if (state.access.mode === "local") {
             title = "Local access";
@@ -78,13 +153,26 @@ function AccessModeSection() {
             status = state.access.passwordConfigured
                 ? "Remote password set"
                 : "Remote password not set";
+            statusTone = state.access.passwordConfigured ? "ok" : "warn";
+            currentBrowserValue = "Local host";
+            currentBrowserDetail =
+                "The current browser is trusted because it is running from localhost or the desktop renderer.";
         }
         else {
             title = "Remote session";
             detail =
                 "This browser is signed in remotely. Localhost and Electrobun still use local access on the host machine.";
             status = "Signed in";
+            statusTone = "ok";
+            currentBrowserValue = "Remote browser";
+            currentBrowserDetail =
+                "This session is authenticated with the configured remote password.";
         }
+        remotePasswordValue = state.access.passwordConfigured ? "Set" : "Not set";
+        remotePasswordDetail = state.access.passwordConfigured
+            ? "Remote browsers can sign in with the configured password."
+            : "Remote browsers cannot sign in until a remote password is set.";
+        remotePasswordTone = state.access.passwordConfigured ? "ok" : "warn";
     }
     else if (state.phase === "locked") {
         title = "Remote access";
@@ -93,13 +181,45 @@ function AccessModeSection() {
                 ? "Remote access is disabled until this instance is opened on the host machine and a remote password is set."
                 : "Remote access requires a password session.";
         status = state.access?.passwordConfigured ? "Password required" : "Not set";
+        statusTone = state.access?.passwordConfigured ? "warn" : "danger";
+        currentBrowserValue = "Remote browser";
+        currentBrowserDetail =
+            state.reason === "remote_password_not_configured"
+                ? "This browser is remote and no remote password is configured yet."
+                : "This browser is remote and needs a password session.";
+        remotePasswordValue = state.access?.passwordConfigured ? "Set" : "Not set";
+        remotePasswordDetail = state.access?.passwordConfigured
+            ? "Remote password exists; sign in to manage sessions and changes."
+            : "Remote access is disabled until the host machine sets a password.";
+        remotePasswordTone = state.access?.passwordConfigured ? "warn" : "danger";
     }
     else if (state.phase === "error") {
         title = "Access unavailable";
         detail = state.message;
         status = "Unavailable";
+        statusTone = "danger";
+        currentBrowserValue = "Unavailable";
+        currentBrowserDetail = state.message;
+        remotePasswordValue = "Unavailable";
+        remotePasswordDetail = "The auth endpoint did not return password state.";
+        remotePasswordTone = "danger";
     }
-    return (_jsxs(SectionShell, { icon: _jsx(Shield, { className: "h-4 w-4 opacity-60" }), title: "Access mode", children: [_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "min-w-0 space-y-1", children: [_jsx("div", { className: "text-sm font-medium text-foreground/90", children: title }), _jsx("p", { className: "max-w-2xl text-sm leading-6 text-muted-foreground", children: detail })] }), _jsx("span", { className: "inline-flex w-fit shrink-0 rounded-full border border-border/60 bg-bg/70 px-2.5 py-1 text-xs font-medium text-muted-foreground", children: state.phase === "loading" ? (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin" }), status] })) : (status) })] }), state.phase === "loaded" && (_jsxs("p", { className: "text-xs text-muted-foreground/70", children: ["Current identity: ", state.identity.displayName] })), _jsxs("button", { type: "button", onClick: load, className: "inline-flex items-center gap-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground", children: [_jsx(RefreshCw, { className: "h-3 w-3" }), "Refresh"] })] }));
+    const pageOrigin = currentPageOrigin();
+    const pageUrl = pageOrigin ? securitySettingsUrl(pageOrigin) : null;
+    const pageEndpoint = parseAbsoluteUrl(pageOrigin);
+    const pageEndpointDescription = pageEndpoint
+        ? describeEndpoint(pageEndpoint)
+        : null;
+    const apiBase = bootConfig.apiBase?.trim() ||
+        (pageOrigin ? trimTrailingSlash(pageOrigin) : null);
+    const apiEndpoint = parseAbsoluteUrl(apiBase);
+    const apiEndpointDescription = apiEndpoint
+        ? describeEndpoint(apiEndpoint)
+        : null;
+    const pageUrlLabel = pageEndpoint && !isLoopbackHost(pageEndpoint.hostname)
+        ? "Remote URL"
+        : "Local URL";
+    return (_jsxs(SectionShell, { icon: _jsx(Shield, { className: "h-4 w-4 opacity-60" }), title: "Access", children: [_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "min-w-0 space-y-1", children: [_jsx("div", { className: "text-sm font-medium text-foreground/90", children: title }), _jsx("p", { className: "max-w-2xl text-sm leading-6 text-muted-foreground", children: detail })] }), _jsx(StatusBadge, { tone: statusTone, children: state.phase === "loading" ? (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin" }), status] })) : (status) })] }), _jsxs("div", { className: "rounded-md border border-border/40 bg-bg/35 px-3", children: [_jsx(AccessInfoRow, { label: "Current browser", value: currentBrowserValue, detail: currentBrowserDetail }), _jsx(AccessInfoRow, { label: "Local access", value: "Enabled", detail: "Host-machine localhost and desktop renderer sessions do not require the remote password." }), _jsx(AccessInfoRow, { label: "Remote password", value: _jsx(StatusBadge, { tone: remotePasswordTone, children: remotePasswordValue }), detail: remotePasswordDetail }), pageUrl && pageEndpointDescription && (_jsx(AccessInfoRow, { label: pageUrlLabel, value: pageUrl, detail: pageEndpointDescription.detail })), apiBase && apiEndpointDescription && (_jsx(AccessInfoRow, { label: "API base", value: trimTrailingSlash(apiBase), detail: `${apiEndpointDescription.value}: ${apiEndpointDescription.detail}` })), state.phase === "loaded" && (_jsx(AccessInfoRow, { label: "Identity", value: state.identity.displayName, detail: `Signed in as ${state.identity.kind}.` }))] }), _jsxs("button", { type: "button", onClick: () => void onRefresh(), className: "inline-flex items-center gap-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground", children: [_jsx(RefreshCw, { className: "h-3 w-3" }), "Refresh"] })] }));
 }
 function SessionsSection() {
     const [state, setState] = useState({ phase: "loading" });
@@ -148,26 +268,16 @@ function SessionRow({ session, revoking, onRevoke, }) {
                                 ? session.userAgent.slice(0, 60)
                                 : "Unknown client"] }), _jsxs("p", { className: "text-xs text-muted-foreground/60", children: ["Last seen ", formatRelativeTime(session.lastSeenAt), " \u00B7 expires", " ", formatRelativeTime(session.expiresAt)] })] }), !session.current && (_jsx(Button, { variant: "ghost", size: "sm", disabled: revoking, onClick: () => onRevoke(session.id), className: "shrink-0 text-xs text-danger hover:bg-danger/10 hover:text-danger", "aria-label": "Revoke this session", children: revoking ? (_jsx(Loader2, { className: "h-3 w-3 animate-spin" })) : (_jsx(Trash2, { className: "h-3 w-3" })) }))] }));
 }
-function RemotePasswordSection() {
+function RemotePasswordSection({ accessState, onAccessChanged, }) {
     const displayNameId = useId().replace(/:/g, "");
     const currentPasswordId = useId().replace(/:/g, "");
     const newPasswordId = useId().replace(/:/g, "");
     const confirmPasswordId = useId().replace(/:/g, "");
-    const [accessState, setAccessState] = useState({
-        phase: "loading",
-    });
     const [displayName, setDisplayName] = useState("Owner");
     const [currentPassword, setCurrentPassword] = useState("");
     const [newPassword, setNewPassword] = useState("");
     const [confirmPassword, setConfirmPassword] = useState("");
     const [state, setState] = useState({ phase: "idle" });
-    const load = useCallback(async () => {
-        setAccessState({ phase: "loading" });
-        setAccessState(await loadAccessState());
-    }, []);
-    useEffect(() => {
-        void load();
-    }, [load]);
     const loaded = accessState.phase === "loaded" ? accessState : null;
     const setupMode = loaded?.access.mode === "local" && !loaded.access.ownerConfigured;
     const localAccess = loaded?.access.mode === "local";
@@ -204,19 +314,22 @@ function RemotePasswordSection() {
             setState({ phase: "error", message: result.message });
             return;
         }
-        setState({ phase: "success", message: "Remote password saved." });
+        setState({
+            phase: "success",
+            message: "Remote access is enabled. Remote browsers can sign in with this password when they can reach this instance.",
+        });
         setCurrentPassword("");
         setNewPassword("");
         setConfirmPassword("");
-        await load();
+        await onAccessChanged();
     }, [
         confirmPassword,
         currentPassword,
         currentPasswordRequired,
         displayName,
-        load,
         loaded,
         newPassword,
+        onAccessChanged,
         setupMode,
     ]);
     if (accessState.phase === "loading") {
@@ -253,12 +366,16 @@ function RemotePasswordSection() {
                                         setState({ phase: "idle" });
                                 }, disabled: isSubmitting, "aria-invalid": confirmMismatch, className: cn(confirmMismatch && "border-danger focus-visible:border-danger") }), confirmMismatch && (_jsx("p", { className: "text-xs text-danger", children: "Passwords do not match." }))] }), state.phase === "error" && (_jsx("p", { role: "alert", className: "text-sm text-danger", children: state.message })), state.phase === "success" && (_jsx("p", { className: "text-sm text-ok", children: state.message })), _jsx("div", { className: "flex justify-end pt-1", children: _jsx(Button, { type: "submit", disabled: !canSubmit, size: "sm", children: isSubmitting ? "Saving..." : buttonLabel }) })] })] }));
 }
-function OwnerBindingsSection() {
-    return (_jsx(SectionShell, { icon: _jsx(Shield, { className: "h-4 w-4 opacity-60" }), title: "Connector owner bindings", children: _jsx("p", { className: "text-sm text-muted-foreground", children: "No connector bindings configured. Set up a Discord or Telegram connector in Settings to enable DM-link login." }) }));
-}
-function MachineTokensSection() {
-    return (_jsx(SectionShell, { icon: _jsx(KeyRound, { className: "h-4 w-4 opacity-60" }), title: "Machine tokens", children: _jsx("p", { className: "text-sm text-muted-foreground", children: "Machine token management is coming in a future release. Existing CI/pipeline bearer tokens continue to work during the migration window." }) }));
-}
 export function SecuritySettingsSection() {
-    return (_jsxs("div", { className: "space-y-4", children: [_jsx(AccessModeSection, {}), _jsx(RemotePasswordSection, {}), _jsx(SessionsSection, {}), _jsx(OwnerBindingsSection, {}), _jsx(MachineTokensSection, {})] }));
+    const [accessState, setAccessState] = useState({
+        phase: "loading",
+    });
+    const refreshAccessState = useCallback(async () => {
+        setAccessState({ phase: "loading" });
+        setAccessState(await fetchAccessState());
+    }, []);
+    useEffect(() => {
+        void refreshAccessState();
+    }, [refreshAccessState]);
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx(AccessModeSection, { state: accessState, onRefresh: refreshAccessState }), _jsx(RemotePasswordSection, { accessState: accessState, onAccessChanged: refreshAccessState }), _jsx(SessionsSection, {})] }));
 }

package/packages/app-core/src/components/settings/cloud-model-schema.d.ts

@@ -7,7 +7,7 @@
  * the component stays readable.
  */
 import type { OnboardingOptions } from "../../api";
-import type { JsonSchemaObject } from "../../config";
+import type { JsonSchemaObject } from "../../config/config-catalog";
 import type { ConfigUiHint } from "../../types";
 export declare const DEFAULT_RESPONSE_HANDLER_MODEL = "__DEFAULT_RESPONSE_HANDLER__";
 export declare const DEFAULT_ACTION_PLANNER_MODEL = "__DEFAULT_ACTION_PLANNER__";

package/packages/app-core/src/components/settings/cloud-model-schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cloud-model-schema.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/src/components/settings/cloud-model-schema.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AACnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,eAAO,MAAM,8BAA8B,iCAAiC,CAAC;AAC7E,eAAO,MAAM,4BAA4B,+BAA+B,CAAC;AAoCzE,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,gBAAgB,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;CACrC;AAED;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,iBAAiB,CAAC,QAAQ,CAAC,GACnC,gBAAgB,CA2ElB"}
+{"version":3,"file":"cloud-model-schema.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/src/components/settings/cloud-model-schema.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AACnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AACpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,eAAO,MAAM,8BAA8B,iCAAiC,CAAC;AAC7E,eAAO,MAAM,4BAA4B,+BAA+B,CAAC;AAoCzE,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,gBAAgB,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;CACrC;AAED;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,iBAAiB,CAAC,QAAQ,CAAC,GACnC,gBAAgB,CA2ElB"}