@elizaos/app-core 2.0.0-alpha.74 → 2.0.0-alpha.76

package/src/components/AgentActivityBox.tsx

@@ -1,49 +0,0 @@
-import type { CodingAgentSession } from "@elizaos/app-core/api";
-
-/** Status dot color classes for coding-agent activity. */
-const STATUS_DOT: Record<string, string> = {
-  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: CodingAgentSession): string {
-  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";
-}
-
-interface AgentActivityBoxProps {
-  sessions: CodingAgentSession[];
-}
-
-export function AgentActivityBox({ sessions }: AgentActivityBoxProps) {
-  if (!sessions || sessions.length === 0) return null;
-
-  return (
-    <div className="border-t border-border px-3 py-1.5 space-y-0.5 z-[1]">
-      {sessions.map((s) => (
-        <div key={s.sessionId} className="flex items-center gap-1.5 min-w-0">
-          <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" : ""}`}
-          />
-          <span className="text-[11px] font-medium text-txt max-w-[120px] truncate shrink-0">
-            {s.label}
-          </span>
-          <span className="text-[11px] text-muted truncate min-w-0">
-            {s.lastActivity ?? deriveActivity(s)}
-          </span>
-        </div>
-      ))}
-    </div>
-  );
-}

package/src/components/ApiKeyConfig.tsx

@@ -1,222 +0,0 @@
-/**
- * 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
-                ? "var(--ok)"
-                : "var(--warn)",
-              color: selectedProvider.configured ? "var(--ok)" : "var(--warn)",
-            }}
-          >
-            {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)]" : "text-[var(--ok)]"}`}
-            >
-              {modelsFetchResult.message}
-            </span>
-          )}
-        </div>
-        <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}
-        >
-          {isSaving
-            ? t("apikeyconfig.saving")
-            : saveSuccess
-              ? t("apikeyconfig.saved")
-              : t("apikeyconfig.save")}
-        </button>
-      </div>
-    </div>
-  );
-}

package/src/components/AppsPageView.tsx

@@ -1,52 +0,0 @@
-/**
- * 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": "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)",
-          } as React.CSSProperties
-        }
-      >
-        <div className="settings-section-pane pt-4">
-          <AppsView />
-        </div>
-      </div>
-    );
-  }
-
-  return <AppsView />;
-}

package/src/components/AppsView.tsx

@@ -1,293 +0,0 @@
-/**
- * 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>
-  );
-}