@elizaos/app-core 2.0.0-alpha.37

package/src/components/ApiKeyConfig.tsx

@@ -0,0 +1,224 @@
+/**
+ * ApiKeyConfig — Local AI provider settings (API key input forms).
+ *
+ * Extracted from SettingsView.tsx for decomposition (P2 §10).
+ */
+
+import { useCallback, useState } from "react";
+import { client, type PluginParamDef } from "../api";
+import {
+  ConfigRenderer,
+  defaultRegistry,
+  type JsonSchemaObject,
+} from "../config";
+import { useTimeout } from "../hooks";
+import { useApp } from "../state";
+import type { ConfigUiHint } from "../types";
+import { autoLabel } from "./labels";
+
+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 function ApiKeyConfig({
+  selectedProvider,
+  pluginSaving,
+  pluginSaveSuccess,
+  handlePluginConfigSave,
+  loadPlugins,
+}: ApiKeyConfigProps) {
+  const { setTimeout } = useTimeout();
+
+  const { t } = useApp();
+  const [pluginFieldValues, setPluginFieldValues] = useState<
+    Record<string, Record<string, string>>
+  >({});
+  const [modelsFetching, setModelsFetching] = useState(false);
+  const [modelsFetchResult, setModelsFetchResult] = useState<{
+    tone: "error" | "success";
+    message: string;
+  } | null>(null);
+
+  const handlePluginFieldChange = useCallback(
+    (pluginId: string, key: string, value: string) => {
+      setPluginFieldValues((prev) => ({
+        ...prev,
+        [pluginId]: { ...(prev[pluginId] ?? {}), [key]: value },
+      }));
+    },
+    [],
+  );
+
+  const handlePluginSave = useCallback(
+    (pluginId: string) => {
+      const values = pluginFieldValues[pluginId] ?? {};
+      void handlePluginConfigSave(pluginId, values);
+    },
+    [pluginFieldValues, handlePluginConfigSave],
+  );
+
+  const handleFetchModels = useCallback(
+    async (providerId: string) => {
+      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: PluginParamDef) => p.isSet).length;
+
+  const properties: Record<string, Record<string, unknown>> = {};
+  const required: string[] = [];
+  const hints: Record<string, ConfigUiHint> = {};
+  const serverHints = selectedProvider.configUiHints ?? {};
+  for (const p of params) {
+    const prop: Record<string, unknown> = {};
+    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 } as JsonSchemaObject;
+  const values: Record<string, unknown> = {};
+  const setKeys = new Set<string>();
+  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 (
+    <div className="mt-4 pt-4 border-t border-[var(--border)]">
+      <div className="flex justify-between items-center mb-3">
+        <div className="text-xs font-semibold">
+          {selectedProvider.name} {t("nav.settings")}
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="text-[11px] text-[var(--muted)]">
+            {setCount}/{params.length} {t("apikeyconfig.configured")}
+          </span>
+          <span
+            className="text-[11px] px-2 py-[3px] border"
+            style={{
+              borderColor: selectedProvider.configured
+                ? "#2d8a4e"
+                : "var(--warning,#f39c12)",
+              color: selectedProvider.configured
+                ? "#2d8a4e"
+                : "var(--warning,#f39c12)",
+            }}
+          >
+            {selectedProvider.configured
+              ? t("mediasettingssection.Configured")
+              : t("mediasettingssection.NeedsSetup")}
+          </span>
+        </div>
+      </div>
+
+      <ConfigRenderer
+        schema={schema}
+        hints={hints}
+        values={values}
+        setKeys={setKeys}
+        registry={defaultRegistry}
+        pluginId={selectedProvider.id}
+        onChange={(key, value) =>
+          handlePluginFieldChange(selectedProvider.id, key, String(value ?? ""))
+        }
+      />
+
+      <div className="flex justify-between items-center mt-3">
+        <div className="flex items-center gap-2">
+          <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}
+          >
+            {modelsFetching
+              ? t("apikeyconfig.fetching")
+              : t("apikeyconfig.fetchModels")}
+          </button>
+          {modelsFetchResult && (
+            <span
+              className={`text-[11px] ${modelsFetchResult.tone === "error" ? "text-[var(--danger,#e74c3c)]" : "text-[var(--ok,#16a34a)]"}`}
+            >
+              {modelsFetchResult.message}
+            </span>
+          )}
+        </div>
+        <button
+          type="button"
+          className={`btn text-xs py-[5px] px-4 !mt-0 ${saveSuccess ? "!bg-[var(--ok,#16a34a)] !border-[var(--ok,#16a34a)]" : ""}`}
+          onClick={() => handlePluginSave(selectedProvider.id)}
+          disabled={isSaving}
+        >
+          {isSaving
+            ? t("apikeyconfig.saving")
+            : saveSuccess
+              ? t("apikeyconfig.saved")
+              : t("apikeyconfig.save")}
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/components/AppsPageView.tsx

@@ -0,0 +1,52 @@
+/**
+ * Apps page — single-surface app browser with optional full-screen game mode.
+ */
+
+import type React from "react";
+import { useEffect } from "react";
+import { useApp } from "../state";
+import { AppsView } from "./AppsView";
+import { GameView } from "./GameView";
+
+export function AppsPageView({ inModal }: { inModal?: boolean } = {}) {
+  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 <GameView />;
+  }
+
+  if (inModal) {
+    return (
+      <div
+        className="settings-content-area"
+        style={
+          {
+            "--accent": "#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)",
+          } as React.CSSProperties
+        }
+      >
+        <div className="settings-section-pane pt-4">
+          <AppsView />
+        </div>
+      </div>
+    );
+  }
+
+  return <AppsView />;
+}

package/src/components/AppsView.tsx

@@ -0,0 +1,293 @@
+/**
+ * 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, type RegistryAppInfo } 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 (
+    <div className="flex flex-col items-center justify-center h-full text-center py-20">
+      <span className="text-4xl mb-4 opacity-30">📱</span>
+      <span className="text-[13px] text-muted">
+        Select an app to view details
+      </span>
+    </div>
+  );
+}
+
+export function AppsView() {
+  const {
+    activeGameApp,
+    activeGameDisplayName,
+    activeGameViewerUrl,
+    setState,
+    setActionNotice,
+  } = useApp();
+  const [apps, setApps] = useState<RegistryAppInfo[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [showActiveOnly, setShowActiveOnly] = useState(false);
+  const [activeAppNames, setActiveAppNames] = useState<Set<string>>(new Set());
+  const [selectedAppName, setSelectedAppName] = useState<string | null>(null);
+  const [busyApp, setBusyApp] = useState<string | null>(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: RegistryAppInfo) => {
+      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 (
+    <div className="device-layout">
+      <div className="phone-frame">
+        <div className="phone-status-bar">
+          <span className="font-semibold">9:41</span>
+          <span className="opacity-50">📶 🔋</span>
+        </div>
+
+        <div className="phone-content">
+          {selectedApp ? (
+            <AppDetailPane
+              app={selectedApp}
+              compact
+              busy={busyApp === selectedApp.name}
+              hasActiveViewer={selectedAppHasActiveViewer}
+              isActive={selectedAppIsActive}
+              onBack={() => setSelectedAppName(null)}
+              onLaunch={() => void handleLaunch(selectedApp)}
+              onOpenCurrentGame={handleOpenCurrentGame}
+              onOpenCurrentGameInNewTab={() =>
+                void handleOpenCurrentGameInNewTab()
+              }
+            />
+          ) : null}
+
+          <div className={selectedApp ? "phone-grid-when-detail" : ""}>
+            <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)
+              }
+            />
+          </div>
+        </div>
+
+        <div className="phone-home-indicator" />
+      </div>
+
+      <div className="pad-frame">
+        <div className="phone-status-bar">
+          <span className="font-semibold">9:41</span>
+          <span className="opacity-50">📶 🔋</span>
+        </div>
+
+        <div className="phone-content">
+          {selectedApp ? (
+            <AppDetailPane
+              app={selectedApp}
+              busy={busyApp === selectedApp.name}
+              hasActiveViewer={selectedAppHasActiveViewer}
+              isActive={selectedAppIsActive}
+              onBack={() => setSelectedAppName(null)}
+              onLaunch={() => void handleLaunch(selectedApp)}
+              onOpenCurrentGame={handleOpenCurrentGame}
+              onOpenCurrentGameInNewTab={() =>
+                void handleOpenCurrentGameInNewTab()
+              }
+            />
+          ) : (
+            <AppsEmptyState />
+          )}
+        </div>
+
+        <div className="phone-home-indicator" />
+      </div>
+    </div>
+  );
+}

package/src/components/AvatarLoader.tsx

@@ -0,0 +1,86 @@
+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;
+}
+
+export function AvatarLoader({
+  label = "Initializing entity",
+  fullScreen = false,
+}: AvatarLoaderProps) {
+  return (
+    <div
+      style={{
+        position: fullScreen ? "fixed" : "absolute",
+        inset: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: fullScreen ? "#0c0e14" : "transparent",
+        zIndex: 10,
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "flex-start",
+          gap: 12,
+          width: 280,
+        }}
+      >
+        {/* LOADING label */}
+        <div
+          style={{
+            fontFamily: "var(--mono, monospace)",
+            fontSize: 12,
+            fontWeight: 400,
+            letterSpacing: "0.35em",
+            textTransform: "uppercase",
+            color: "rgba(255, 255, 255, 0.7)",
+            userSelect: "none",
+          }}
+        >
+          LOADING
+          <span className="loading-screen__dots" />
+        </div>
+
+        {/* Progress bar */}
+        <div
+          style={{
+            width: "100%",
+            height: 3,
+            background: "rgba(255, 255, 255, 0.1)",
+            overflow: "hidden",
+          }}
+        >
+          <div
+            style={{
+              width: "60%",
+              height: "100%",
+              background: "rgba(255, 255, 255, 0.85)",
+              boxShadow: "0 0 8px rgba(255, 255, 255, 0.3)",
+              animation: "avatar-loader-progress 2s ease-in-out infinite",
+            }}
+          />
+        </div>
+
+        {/* Sub label */}
+        <div
+          style={{
+            fontFamily: "var(--mono, monospace)",
+            fontSize: 10,
+            fontWeight: 400,
+            letterSpacing: "0.12em",
+            textTransform: "uppercase",
+            color: "rgba(255, 255, 255, 0.3)",
+            userSelect: "none",
+          }}
+        >
+          {label}
+        </div>
+      </div>
+    </div>
+  );
+}