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

package/components/AdvancedPageView.js

@@ -0,0 +1,146 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AdvancedPageView — container for advanced configuration sub-tabs.
+ *
+ * Sub-tabs:
+ *   - Plugins: Feature/connector plugin management
+ *   - Skills: Custom agent skills
+ *   - Fine-Tuning: Dataset and model training workflows
+ *   - Trajectories: LLM call viewer and analysis
+ *   - Runtime: Runtime object inspection
+ *   - Databases: Tables/media/vector browser
+ *   - Lifo: Browser-native terminal sandbox
+ *   - Logs: Runtime log viewer
+ */
+import { DatabasePageView, LogsPageView, PluginsPageView, RuntimeView, SkillsView, } from "@elizaos/app-core/components";
+import { useApp } from "@elizaos/app-core/state";
+import { useState } from "react";
+import { CustomActionsView } from "./CustomActionsView";
+import { FineTuningView } from "./FineTuningView";
+import { LifoSandboxView } from "./LifoSandboxView";
+import { TrajectoriesView } from "./TrajectoriesView";
+import { TrajectoryDetailView } from "./TrajectoryDetailView";
+const SUB_TABS = [
+    {
+        id: "actions",
+        label: "Actions",
+        description: "Custom agent commands and workflows",
+    },
+    { id: "plugins", label: "Plugins", description: "Features and connectors" },
+    { id: "skills", label: "Skills", description: "Custom agent skills" },
+    // {
+    //   id: "fine-tuning",
+    //   label: "Fine-Tuning",
+    //   description: "Dataset and model training workflows",
+    // },
+    {
+        id: "trajectories",
+        label: "Trajectories",
+        description: "LLM call history and analysis",
+    },
+    {
+        id: "runtime",
+        label: "Runtime",
+        description: "Deep runtime object introspection and load order",
+    },
+    {
+        id: "database",
+        label: "Database",
+        description: "Tables, media, and vector browser",
+    },
+    // {
+    //   id: "lifo",
+    //   label: "Lifo",
+    //   description: "Browser-native shell sandbox and file explorer",
+    // },
+    { id: "logs", label: "Logs", description: "Runtime and service logs" },
+];
+const MODAL_SUB_TABS = SUB_TABS.filter((t) => t.id !== "plugins" && t.id !== "skills");
+const SUBTAB_ICONS = {
+    actions: (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("polygon", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2" }) })),
+    "fine-tuning": (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("line", { x1: "4", y1: "21", x2: "4", y2: "14" }), _jsx("line", { x1: "4", y1: "10", x2: "4", y2: "3" }), _jsx("line", { x1: "12", y1: "21", x2: "12", y2: "12" }), _jsx("line", { x1: "12", y1: "8", x2: "12", y2: "3" }), _jsx("line", { x1: "20", y1: "21", x2: "20", y2: "16" }), _jsx("line", { x1: "20", y1: "12", x2: "20", y2: "3" }), _jsx("line", { x1: "1", y1: "14", x2: "7", y2: "14" }), _jsx("line", { x1: "9", y1: "8", x2: "15", y2: "8" }), _jsx("line", { x1: "17", y1: "16", x2: "23", y2: "16" })] })),
+    trajectories: (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("circle", { cx: "6", cy: "19", r: "3" }), _jsx("path", { d: "M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15" }), _jsx("circle", { cx: "18", cy: "5", r: "3" })] })),
+    runtime: (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("polyline", { points: "4 17 10 11 4 5" }), _jsx("line", { x1: "12", y1: "19", x2: "20", y2: "19" })] })),
+    database: (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("ellipse", { cx: "12", cy: "5", rx: "9", ry: "3" }), _jsx("path", { d: "M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" }), _jsx("path", { d: "M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" })] })),
+    lifo: (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", ry: "2" }), _jsx("line", { x1: "8", y1: "21", x2: "16", y2: "21" }), _jsx("line", { x1: "12", y1: "17", x2: "12", y2: "21" })] })),
+    logs: (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), _jsx("polyline", { points: "14 2 14 8 20 8" }), _jsx("line", { x1: "16", y1: "13", x2: "8", y2: "13" }), _jsx("line", { x1: "16", y1: "17", x2: "8", y2: "17" }), _jsx("polyline", { points: "10 9 9 9 8 9" })] })),
+    security: (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) })),
+};
+function mapTabToSubTab(tab) {
+    switch (tab) {
+        case "actions":
+            return "actions";
+        case "plugins":
+            return "plugins";
+        case "skills":
+            return "skills";
+        case "fine-tuning":
+            return "fine-tuning";
+        case "trajectories":
+            return "trajectories";
+        case "runtime":
+            return "runtime";
+        case "database":
+            return "database";
+        case "lifo":
+            return "lifo";
+        case "logs":
+            return "logs";
+        default:
+            return "plugins";
+    }
+}
+export function AdvancedPageView({ inModal } = {}) {
+    const { tab, setTab } = useApp();
+    const [selectedTrajectoryId, setSelectedTrajectoryId] = useState(null);
+    const currentSubTab = mapTabToSubTab(tab);
+    const tabs = inModal ? MODAL_SUB_TABS : SUB_TABS;
+    const handleSubTabChange = (subTab) => {
+        setSelectedTrajectoryId(null);
+        setTab(subTab);
+    };
+    const renderContent = () => {
+        switch (currentSubTab) {
+            case "actions":
+                return _jsx(CustomActionsView, {});
+            case "plugins":
+                return _jsx(PluginsPageView, {});
+            case "skills":
+                return _jsx(SkillsView, {});
+            case "fine-tuning":
+                return _jsx(FineTuningView, {});
+            case "trajectories":
+                if (selectedTrajectoryId) {
+                    return (_jsx(TrajectoryDetailView, { trajectoryId: selectedTrajectoryId, onBack: () => setSelectedTrajectoryId(null) }));
+                }
+                return (_jsx(TrajectoriesView, { onSelectTrajectory: setSelectedTrajectoryId }));
+            case "runtime":
+                return _jsx(RuntimeView, {});
+            case "database":
+                return _jsx(DatabasePageView, {});
+            case "lifo":
+                return _jsx(LifoSandboxView, {});
+            case "logs":
+                return _jsx(LogsPageView, {});
+            default:
+                return _jsx(PluginsPageView, {});
+        }
+    };
+    return (_jsxs("div", { className: inModal ? "settings-modal-layout" : "flex flex-col h-full min-h-0", children: [inModal ? (_jsx("nav", { className: "settings-icon-sidebar", children: tabs.map((subTab) => (_jsxs("button", { type: "button", className: `advanced-subtab-btn settings-icon-btn ${currentSubTab === subTab.id ? "is-active" : ""}`, onClick: () => handleSubTabChange(subTab.id), title: subTab.description, children: [SUBTAB_ICONS[subTab.id], _jsx("span", { className: "settings-icon-label", children: subTab.label })] }, subTab.id))) })) : (_jsx("div", { className: "mb-4 shrink-0", children: _jsx("div", { className: "flex gap-1 border-b border-border", children: tabs.map((subTab) => {
+                        const isActive = currentSubTab === subTab.id;
+                        return (_jsx("button", { type: "button", className: `advanced-subtab-btn px-4 py-2 text-xs font-medium border-b-2 -mb-px transition-colors ${isActive
+                                ? "border-accent text-txt"
+                                : "border-transparent text-muted hover:text-txt hover:border-border"}`, onClick: () => handleSubTabChange(subTab.id), title: subTab.description, children: subTab.label }, subTab.id));
+                    }) }) })), _jsx("div", { className: inModal ? "settings-content-area" : "flex-1 min-h-0 overflow-y-auto", style: inModal
+                    ? {
+                        "--accent": "var(--section-accent-advanced, #7b8fb5)",
+                        "--surface": "rgba(255, 255, 255, 0.06)",
+                        "--s-accent": "#7b8fb5",
+                        "--s-text-txt": "#7b8fb5",
+                        "--s-accent-glow": "rgba(123, 143, 181, 0.35)",
+                        "--s-accent-subtle": "rgba(123, 143, 181, 0.12)",
+                        "--s-grid-line": "rgba(123, 143, 181, 0.02)",
+                        "--s-glow-edge": "rgba(123, 143, 181, 0.08)",
+                    }
+                    : undefined, children: inModal ? (_jsx("div", { className: "settings-section-pane pt-4", children: renderContent() })) : (renderContent()) })] }));
+}

package/components/AgentActivityBox.d.ts

@@ -0,0 +1,7 @@
+import type { CodingAgentSession } from "@elizaos/app-core/api";
+interface AgentActivityBoxProps {
+    sessions: CodingAgentSession[];
+}
+export declare function AgentActivityBox({ sessions }: AgentActivityBoxProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=AgentActivityBox.d.ts.map

package/components/AgentActivityBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentActivityBox.d.ts","sourceRoot":"","sources":["../../src/components/AgentActivityBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAsBhE,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,kBAAkB,EAAE,CAAC;CAChC;AAED,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE,qBAAqB,kDAsBnE"}

package/components/AgentActivityBox.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Status dot color classes for coding-agent activity. */
+const STATUS_DOT = {
+    active: "bg-ok",
+    tool_running: "bg-accent",
+    blocked: "bg-warn",
+    error: "bg-danger",
+};
+const PULSE_STATUSES = new Set(["active", "tool_running"]);
+/** Derive activity text for sessions hydrated from the server (no lastActivity yet). */
+function deriveActivity(s) {
+    if (s.status === "tool_running" && s.toolDescription) {
+        return `Running ${s.toolDescription}`.slice(0, 60);
+    }
+    if (s.status === "blocked")
+        return "Waiting for input";
+    if (s.status === "error")
+        return "Error";
+    return "Running";
+}
+export function AgentActivityBox({ sessions }) {
+    if (!sessions || sessions.length === 0)
+        return null;
+    return (_jsx("div", { className: "border-t border-border px-3 py-1.5 space-y-0.5 z-[1]", children: sessions.map((s) => (_jsxs("div", { className: "flex items-center gap-1.5 min-w-0", children: [_jsx("span", { className: `inline-block w-1.5 h-1.5 rounded-full shrink-0 ${STATUS_DOT[s.status] ?? "bg-muted"}${PULSE_STATUSES.has(s.status) ? " animate-pulse" : ""}` }), _jsx("span", { className: "text-[11px] font-medium text-txt max-w-[120px] truncate shrink-0", children: s.label }), _jsx("span", { className: "text-[11px] text-muted truncate min-w-0", children: s.lastActivity ?? deriveActivity(s) })] }, s.sessionId))) }));
+}

package/components/ApiKeyConfig.d.ts

@@ -0,0 +1,26 @@
+/**
+ * ApiKeyConfig — Local AI provider settings (API key input forms).
+ *
+ * Extracted from SettingsView.tsx for decomposition (P2 §10).
+ */
+import { type PluginParamDef } from "../api";
+import type { ConfigUiHint } from "../types";
+interface ProviderPlugin {
+    id: string;
+    name: string;
+    parameters: PluginParamDef[];
+    configured: boolean;
+    configUiHints?: Record<string, ConfigUiHint>;
+    enabled: boolean;
+    category: string;
+}
+export interface ApiKeyConfigProps {
+    selectedProvider: ProviderPlugin | null;
+    pluginSaving: Set<string>;
+    pluginSaveSuccess: Set<string>;
+    handlePluginConfigSave: (pluginId: string, values: Record<string, string>) => void;
+    loadPlugins: () => Promise<void>;
+}
+export declare function ApiKeyConfig({ selectedProvider, pluginSaving, pluginSaveSuccess, handlePluginConfigSave, loadPlugins, }: ApiKeyConfigProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=ApiKeyConfig.d.ts.map

package/components/ApiKeyConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApiKeyConfig.d.ts","sourceRoot":"","sources":["../../src/components/ApiKeyConfig.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAU,KAAK,cAAc,EAAE,MAAM,QAAQ,CAAC;AAQrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAG7C,UAAU,cAAc;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,cAAc,EAAE,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IAC7C,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,gBAAgB,EAAE,cAAc,GAAG,IAAI,CAAC;IACxC,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1B,iBAAiB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC/B,sBAAsB,EAAE,CACtB,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAC3B,IAAI,CAAC;IACV,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAClC;AAED,wBAAgB,YAAY,CAAC,EAC3B,gBAAgB,EAChB,YAAY,EACZ,iBAAiB,EACjB,sBAAsB,EACtB,WAAW,GACZ,EAAE,iBAAiB,kDAgLnB"}

package/components/ApiKeyConfig.js

@@ -0,0 +1,119 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * ApiKeyConfig — Local AI provider settings (API key input forms).
+ *
+ * Extracted from SettingsView.tsx for decomposition (P2 §10).
+ */
+import { useCallback, useState } from "react";
+import { client } from "../api";
+import { ConfigRenderer, defaultRegistry, } from "../config";
+import { useTimeout } from "../hooks";
+import { useApp } from "../state";
+import { autoLabel } from "./labels";
+export function ApiKeyConfig({ selectedProvider, pluginSaving, pluginSaveSuccess, handlePluginConfigSave, loadPlugins, }) {
+    const { setTimeout } = useTimeout();
+    const { t } = useApp();
+    const [pluginFieldValues, setPluginFieldValues] = useState({});
+    const [modelsFetching, setModelsFetching] = useState(false);
+    const [modelsFetchResult, setModelsFetchResult] = useState(null);
+    const handlePluginFieldChange = useCallback((pluginId, key, value) => {
+        setPluginFieldValues((prev) => ({
+            ...prev,
+            [pluginId]: { ...(prev[pluginId] ?? {}), [key]: value },
+        }));
+    }, []);
+    const handlePluginSave = useCallback((pluginId) => {
+        const values = pluginFieldValues[pluginId] ?? {};
+        void handlePluginConfigSave(pluginId, values);
+    }, [pluginFieldValues, handlePluginConfigSave]);
+    const handleFetchModels = useCallback(async (providerId) => {
+        setModelsFetching(true);
+        setModelsFetchResult(null);
+        try {
+            const result = await client.fetchModels(providerId, true);
+            const count = Array.isArray(result?.models) ? result.models.length : 0;
+            setModelsFetchResult({
+                tone: "success",
+                message: t("apikeyconfig.loadedModels", { count }),
+            });
+            await loadPlugins();
+            setTimeout(() => setModelsFetchResult(null), 3000);
+        }
+        catch (err) {
+            setModelsFetchResult({
+                tone: "error",
+                message: t("apikeyconfig.error", {
+                    message: err instanceof Error ? err.message : t("apikeyconfig.failed"),
+                }),
+            });
+            setTimeout(() => setModelsFetchResult(null), 5000);
+        }
+        setModelsFetching(false);
+    }, [loadPlugins, setTimeout, t]);
+    if (!selectedProvider || selectedProvider.parameters.length === 0)
+        return null;
+    const isSaving = pluginSaving.has(selectedProvider.id);
+    const saveSuccess = pluginSaveSuccess.has(selectedProvider.id);
+    const params = selectedProvider.parameters;
+    const setCount = params.filter((p) => p.isSet).length;
+    const properties = {};
+    const required = [];
+    const hints = {};
+    const serverHints = selectedProvider.configUiHints ?? {};
+    for (const p of params) {
+        const prop = {};
+        if (p.type === "boolean")
+            prop.type = "boolean";
+        else if (p.type === "number")
+            prop.type = "number";
+        else
+            prop.type = "string";
+        if (p.description)
+            prop.description = p.description;
+        if (p.default != null)
+            prop.default = p.default;
+        if (p.options?.length)
+            prop.enum = p.options;
+        const k = p.key.toUpperCase();
+        if (k.includes("URL") || k.includes("ENDPOINT"))
+            prop.format = "uri";
+        properties[p.key] = prop;
+        if (p.required)
+            required.push(p.key);
+        hints[p.key] = {
+            label: autoLabel(p.key, selectedProvider.id),
+            sensitive: p.sensitive ?? false,
+            ...serverHints[p.key],
+        };
+        if (p.description && !hints[p.key].help)
+            hints[p.key].help = p.description;
+    }
+    const schema = { type: "object", properties, required };
+    const values = {};
+    const setKeys = new Set();
+    for (const p of params) {
+        const cv = pluginFieldValues[selectedProvider.id]?.[p.key];
+        if (cv !== undefined) {
+            values[p.key] = cv;
+        }
+        else if (p.isSet && !p.sensitive && p.currentValue != null) {
+            values[p.key] = p.currentValue;
+        }
+        if (p.isSet)
+            setKeys.add(p.key);
+    }
+    return (_jsxs("div", { className: "mt-4 pt-4 border-t border-[var(--border)]", children: [_jsxs("div", { className: "flex justify-between items-center mb-3", children: [_jsxs("div", { className: "text-xs font-semibold", children: [selectedProvider.name, " ", t("nav.settings")] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-[11px] text-[var(--muted)]", children: [setCount, "/", params.length, " ", t("apikeyconfig.configured")] }), _jsx("span", { className: "text-[11px] px-2 py-[3px] border", style: {
+                                    borderColor: selectedProvider.configured
+                                        ? "var(--ok)"
+                                        : "var(--warn)",
+                                    color: selectedProvider.configured ? "var(--ok)" : "var(--warn)",
+                                }, children: selectedProvider.configured
+                                    ? t("mediasettingssection.Configured")
+                                    : t("mediasettingssection.NeedsSetup") })] })] }), _jsx(ConfigRenderer, { schema: schema, hints: hints, values: values, setKeys: setKeys, registry: defaultRegistry, pluginId: selectedProvider.id, onChange: (key, value) => handlePluginFieldChange(selectedProvider.id, key, String(value ?? "")) }), _jsxs("div", { className: "flex justify-between items-center mt-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { type: "button", className: "btn text-xs py-[5px] px-3.5 !mt-0 !bg-transparent !border-[var(--border)] !text-[var(--muted)] hover:!text-[var(--text)] hover:!border-[var(--accent)]", onClick: () => void handleFetchModels(selectedProvider.id), disabled: modelsFetching, children: modelsFetching
+                                    ? t("apikeyconfig.fetching")
+                                    : t("apikeyconfig.fetchModels") }), modelsFetchResult && (_jsx("span", { className: `text-[11px] ${modelsFetchResult.tone === "error" ? "text-[var(--danger)]" : "text-[var(--ok)]"}`, children: modelsFetchResult.message }))] }), _jsx("button", { type: "button", className: `btn text-xs py-[5px] px-4 !mt-0 ${saveSuccess ? "!bg-[var(--ok)] !border-[var(--ok)]" : ""}`, onClick: () => handlePluginSave(selectedProvider.id), disabled: isSaving, children: isSaving
+                            ? t("apikeyconfig.saving")
+                            : saveSuccess
+                                ? t("apikeyconfig.saved")
+                                : t("apikeyconfig.save") })] })] }));
+}

package/components/AppsPageView.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Apps page — single-surface app browser with optional full-screen game mode.
+ */
+export declare function AppsPageView({ inModal }?: {
+    inModal?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AppsPageView.d.ts.map

package/components/AppsPageView.d.ts.map

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

package/components/AppsPageView.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { useApp } from "../state";
+import { AppsView } from "./AppsView";
+import { GameView } from "./GameView";
+export function AppsPageView({ inModal } = {}) {
+    const { appsSubTab, activeGameViewerUrl, setState } = useApp();
+    const hasActiveGame = typeof activeGameViewerUrl === "string" &&
+        activeGameViewerUrl.trim().length > 0;
+    useEffect(() => {
+        if (appsSubTab === "games" && !hasActiveGame) {
+            setState("appsSubTab", "browse");
+        }
+    }, [appsSubTab, hasActiveGame, setState]);
+    if (appsSubTab === "games" && hasActiveGame) {
+        return _jsx(GameView, {});
+    }
+    if (inModal) {
+        return (_jsx("div", { className: "settings-content-area", style: {
+                "--accent": "var(--section-accent-apps, #10b981)",
+                "--surface": "rgba(255, 255, 255, 0.06)",
+                "--s-accent": "#10b981",
+                "--s-text-txt": "#10b981",
+                "--s-accent-glow": "rgba(16, 185, 129, 0.35)",
+                "--s-accent-subtle": "rgba(16, 185, 129, 0.12)",
+                "--s-grid-line": "rgba(16, 185, 129, 0.02)",
+                "--s-glow-edge": "rgba(16, 185, 129, 0.08)",
+            }, children: _jsx("div", { className: "settings-section-pane pt-4", children: _jsx(AppsView, {}) }) }));
+    }
+    return _jsx(AppsView, {});
+}

package/components/AppsView.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Apps View — browse and launch agent games/experiences.
+ *
+ * Fetches apps from the registry API and shows them as cards.
+ */
+export { shouldShowAppInAppsView } from "./apps/helpers";
+export declare function AppsView(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AppsView.d.ts.map

package/components/AppsView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppsView.d.ts","sourceRoot":"","sources":["../../src/components/AppsView.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAaH,OAAO,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAazD,wBAAgB,QAAQ,4CAsQvB"}

package/components/AppsView.js

@@ -0,0 +1,149 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Apps View — browse and launch agent games/experiences.
+ *
+ * Fetches apps from the registry API and shows them as cards.
+ */
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { client } from "../api";
+import { useApp } from "../state";
+import { openExternalUrl } from "../utils";
+import { AppDetailPane } from "./apps/AppDetailPane";
+import { AppsCatalogGrid } from "./apps/AppsCatalogGrid";
+import { DEFAULT_VIEWER_SANDBOX, shouldShowAppInAppsView, } from "./apps/helpers";
+export { shouldShowAppInAppsView } from "./apps/helpers";
+function AppsEmptyState() {
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center h-full text-center py-20", children: [_jsx("span", { className: "text-4xl mb-4 opacity-30", children: "\uD83D\uDCF1" }), _jsx("span", { className: "text-[13px] text-muted", children: "Select an app to view details" })] }));
+}
+export function AppsView() {
+    const { activeGameApp, activeGameDisplayName, activeGameViewerUrl, setState, setActionNotice, } = useApp();
+    const [apps, setApps] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [searchQuery, setSearchQuery] = useState("");
+    const [showActiveOnly, setShowActiveOnly] = useState(false);
+    const [activeAppNames, setActiveAppNames] = useState(new Set());
+    const [selectedAppName, setSelectedAppName] = useState(null);
+    const [busyApp, setBusyApp] = useState(null);
+    const currentGameViewerUrl = typeof activeGameViewerUrl === "string" ? activeGameViewerUrl : "";
+    const hasCurrentGame = currentGameViewerUrl.trim().length > 0;
+    const selectedApp = useMemo(() => apps.find((app) => app.name === selectedAppName) ?? null, [apps, selectedAppName]);
+    const selectedAppHasActiveViewer = !!selectedApp && hasCurrentGame && activeGameApp === selectedApp.name;
+    const selectedAppIsActive = !!selectedApp && activeAppNames.has(selectedApp.name);
+    const loadApps = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const [list, installed] = await Promise.all([
+                client.listApps(),
+                client.listInstalledApps().catch(() => []),
+            ]);
+            setApps(list);
+            setActiveAppNames(new Set(installed.map((app) => app.name)));
+            setSelectedAppName((current) => {
+                if (!current)
+                    return list[0]?.name ?? null;
+                return list.some((app) => app.name === current)
+                    ? current
+                    : (list[0]?.name ?? null);
+            });
+        }
+        catch (err) {
+            setError(`Failed to load apps: ${err instanceof Error ? err.message : "network error"}`);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, []);
+    const clearActiveGameState = useCallback(() => {
+        setState("activeGameApp", "");
+        setState("activeGameDisplayName", "");
+        setState("activeGameViewerUrl", "");
+        setState("activeGameSandbox", DEFAULT_VIEWER_SANDBOX);
+        setState("activeGamePostMessageAuth", false);
+        setState("activeGamePostMessagePayload", null);
+    }, [setState]);
+    useEffect(() => {
+        void loadApps();
+    }, [loadApps]);
+    const handleLaunch = useCallback(async (app) => {
+        setBusyApp(app.name);
+        try {
+            const result = await client.launchApp(app.name);
+            setActiveAppNames((previous) => {
+                const next = new Set(previous);
+                next.add(app.name);
+                return next;
+            });
+            if (result.viewer?.url) {
+                setState("activeGameApp", app.name);
+                setState("activeGameDisplayName", app.displayName ?? app.name);
+                setState("activeGameViewerUrl", result.viewer.url);
+                setState("activeGameSandbox", result.viewer.sandbox ?? DEFAULT_VIEWER_SANDBOX);
+                setState("activeGamePostMessageAuth", Boolean(result.viewer.postMessageAuth));
+                setState("activeGamePostMessagePayload", result.viewer.authMessage ?? null);
+                if (result.viewer.postMessageAuth && !result.viewer.authMessage) {
+                    setActionNotice(`${app.displayName ?? app.name} requires iframe auth, but no auth payload is configured.`, "error", 4800);
+                }
+                setState("tab", "apps");
+                setState("appsSubTab", "games");
+                return;
+            }
+            clearActiveGameState();
+            const targetUrl = result.launchUrl ?? app.launchUrl;
+            if (targetUrl) {
+                try {
+                    await openExternalUrl(targetUrl);
+                    setActionNotice(`${app.displayName ?? app.name} opened in a new tab.`, "success", 2600);
+                }
+                catch {
+                    setActionNotice(`Popup blocked while opening ${app.displayName ?? app.name}. Allow popups and try again.`, "error", 4200);
+                }
+                return;
+            }
+            setActionNotice(`${app.displayName ?? app.name} launched, but no viewer or URL is configured.`, "error", 4000);
+        }
+        catch (err) {
+            setActionNotice(`Failed to launch ${app.displayName ?? app.name}: ${err instanceof Error ? err.message : "error"}`, "error", 4000);
+        }
+        finally {
+            setBusyApp(null);
+        }
+    }, [clearActiveGameState, setActionNotice, setState]);
+    const handleOpenCurrentGame = useCallback(() => {
+        if (!hasCurrentGame)
+            return;
+        setState("tab", "apps");
+        setState("appsSubTab", "games");
+    }, [hasCurrentGame, setState]);
+    const handleOpenCurrentGameInNewTab = useCallback(async () => {
+        if (!hasCurrentGame)
+            return;
+        try {
+            await openExternalUrl(currentGameViewerUrl);
+            setActionNotice("Current game opened in a new tab.", "success", 2600);
+        }
+        catch {
+            setActionNotice("Popup blocked. Allow popups and try again.", "error", 4200);
+        }
+    }, [currentGameViewerUrl, hasCurrentGame, setActionNotice]);
+    const visibleApps = useMemo(() => {
+        const normalizedSearch = searchQuery.trim().toLowerCase();
+        return apps.filter((app) => {
+            if (!shouldShowAppInAppsView(app)) {
+                return false;
+            }
+            if (normalizedSearch &&
+                !app.name.toLowerCase().includes(normalizedSearch) &&
+                !(app.displayName ?? "").toLowerCase().includes(normalizedSearch) &&
+                !(app.description ?? "").toLowerCase().includes(normalizedSearch)) {
+                return false;
+            }
+            if (showActiveOnly && !activeAppNames.has(app.name)) {
+                return false;
+            }
+            return true;
+        });
+    }, [activeAppNames, apps, searchQuery, showActiveOnly]);
+    return (_jsxs("div", { className: "device-layout", children: [_jsxs("div", { className: "phone-frame", children: [_jsxs("div", { className: "phone-status-bar", children: [_jsx("span", { className: "font-semibold", children: "9:41" }), _jsx("span", { className: "opacity-50", children: "\uD83D\uDCF6 \uD83D\uDD0B" })] }), _jsxs("div", { className: "phone-content", children: [selectedApp ? (_jsx(AppDetailPane, { app: selectedApp, compact: true, busy: busyApp === selectedApp.name, hasActiveViewer: selectedAppHasActiveViewer, isActive: selectedAppIsActive, onBack: () => setSelectedAppName(null), onLaunch: () => void handleLaunch(selectedApp), onOpenCurrentGame: handleOpenCurrentGame, onOpenCurrentGameInNewTab: () => void handleOpenCurrentGameInNewTab() })) : null, _jsx("div", { className: selectedApp ? "phone-grid-when-detail" : "", children: _jsx(AppsCatalogGrid, { activeAppNames: activeAppNames, activeGameDisplayName: activeGameDisplayName, error: error, hasCurrentGame: hasCurrentGame, loading: loading, searchQuery: searchQuery, selectedAppName: selectedAppName, showActiveOnly: showActiveOnly, visibleApps: visibleApps, onOpenCurrentGame: handleOpenCurrentGame, onRefresh: () => void loadApps(), onSearchQueryChange: setSearchQuery, onSelectApp: setSelectedAppName, onToggleActiveOnly: () => setShowActiveOnly((current) => !current) }) })] }), _jsx("div", { className: "phone-home-indicator" })] }), _jsxs("div", { className: "pad-frame", children: [_jsxs("div", { className: "phone-status-bar", children: [_jsx("span", { className: "font-semibold", children: "9:41" }), _jsx("span", { className: "opacity-50", children: "\uD83D\uDCF6 \uD83D\uDD0B" })] }), _jsx("div", { className: "phone-content", children: selectedApp ? (_jsx(AppDetailPane, { app: selectedApp, busy: busyApp === selectedApp.name, hasActiveViewer: selectedAppHasActiveViewer, isActive: selectedAppIsActive, onBack: () => setSelectedAppName(null), onLaunch: () => void handleLaunch(selectedApp), onOpenCurrentGame: handleOpenCurrentGame, onOpenCurrentGameInNewTab: () => void handleOpenCurrentGameInNewTab() })) : (_jsx(AppsEmptyState, {})) }), _jsx("div", { className: "phone-home-indicator" })] })] }));
+}

package/components/AvatarLoader.d.ts

@@ -0,0 +1,13 @@
+interface AvatarLoaderProps {
+    /** Sub-label text below the progress bar */
+    label?: string;
+    /** When true, renders as a full-screen loader instead of an overlay */
+    fullScreen?: boolean;
+    /** When true, fades the loader out (use before unmounting) */
+    fadingOut?: boolean;
+    /** Optional progress value from 0 to 100. If provided, overrides the infinite loading animation. */
+    progress?: number;
+}
+export declare function AvatarLoader({ label, fullScreen, fadingOut, progress, }: AvatarLoaderProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AvatarLoader.d.ts.map

package/components/AvatarLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarLoader.d.ts","sourceRoot":"","sources":["../../src/components/AvatarLoader.tsx"],"names":[],"mappings":"AAAA,UAAU,iBAAiB;IACzB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oGAAoG;IACpG,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAA6B,EAC7B,UAAkB,EAClB,SAAiB,EACjB,QAAQ,GACT,EAAE,iBAAiB,2CAuFnB"}

package/components/AvatarLoader.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function AvatarLoader({ label = "Initializing entity", fullScreen = false, fadingOut = false, progress, }) {
+    return (_jsx("div", { style: {
+            position: fullScreen ? "fixed" : "absolute",
+            inset: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            background: fullScreen ? "var(--bg)" : "transparent",
+            zIndex: 10,
+            opacity: fadingOut ? 0 : 1,
+            transition: "opacity 0.8s ease-out",
+            pointerEvents: fadingOut ? "none" : "auto",
+        }, children: _jsxs("div", { style: {
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "flex-start",
+                gap: 12,
+                width: 280,
+            }, children: [_jsxs("div", { style: {
+                        fontFamily: "var(--mono, monospace)",
+                        fontSize: 12,
+                        fontWeight: 400,
+                        letterSpacing: "0.35em",
+                        textTransform: "uppercase",
+                        color: "var(--text)",
+                        userSelect: "none",
+                    }, children: ["LOADING", _jsx("span", { className: "loading-screen__dots" })] }), _jsx("div", { "data-testid": "avatar-loader-progress", style: {
+                        width: "100%",
+                        height: 3,
+                        background: "var(--bg-accent)",
+                        overflow: "hidden",
+                    }, children: _jsx("div", { style: {
+                            width: typeof progress === "number"
+                                ? `${Math.max(0, Math.min(100, progress))}%`
+                                : "60%",
+                            height: "100%",
+                            background: "var(--text-strong)",
+                            boxShadow: "0 0 8px rgba(255, 255, 255, 0.3)",
+                            transition: typeof progress === "number" ? "width 0.3s ease-out" : "none",
+                            animation: typeof progress === "number"
+                                ? "none"
+                                : "avatar-loader-progress 2s ease-in-out infinite",
+                        } }) }), _jsx("div", { style: {
+                        fontFamily: "var(--mono, monospace)",
+                        fontSize: 10,
+                        fontWeight: 400,
+                        letterSpacing: "0.12em",
+                        textTransform: "uppercase",
+                        color: "var(--muted)",
+                        userSelect: "none",
+                    }, children: label })] }) }));
+}