@elizaos/app-core 2.0.0-alpha.37

package/test/app/startup-onboarding.e2e.test.ts

@@ -0,0 +1,612 @@
+// @vitest-environment jsdom
+import React from "react";
+import TestRenderer, { act } from "react-test-renderer";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+type OnboardingStep = "wakeUp" | "connection" | "rpc" | "senses" | "activate";
+
+type AppHarnessState = {
+  onboardingLoading: boolean;
+  authRequired: boolean;
+  onboardingComplete: boolean;
+  tab: string;
+  actionNotice: null;
+  onboardingStep: OnboardingStep;
+  onboardingOptions: {
+    names: string[];
+    styles: Array<{
+      catchphrase: string;
+      hint: string;
+      bio: string[];
+      system: string;
+      style: { all: string[]; chat: string[]; post: string[] };
+      adjectives: string[];
+      postExamples: string[];
+      messageExamples: Array<
+        Array<{ name: string; content: { text: string } }>
+      >;
+    }>;
+    providers: Array<{
+      id: string;
+      name: string;
+      envKey: string | null;
+      pluginName: string;
+      keyPrefix: string | null;
+      description: string;
+    }>;
+    cloudProviders: Array<{ id: string; name: string; description: string }>;
+    models: {
+      small: Array<{
+        id: string;
+        name: string;
+        provider: string;
+        description: string;
+      }>;
+      large: Array<{
+        id: string;
+        name: string;
+        provider: string;
+        description: string;
+      }>;
+    };
+    inventoryProviders: Array<{
+      id: string;
+      name: string;
+      description: string;
+      rpcProviders: Array<{
+        id: string;
+        name: string;
+        description: string;
+        envKey: string | null;
+        requiresKey: boolean;
+      }>;
+    }>;
+    sharedStyleRules: string;
+  } | null;
+  onboardingName: string;
+  onboardingStyle: string;
+  onboardingTheme: string;
+  onboardingRunMode: "local" | "cloud" | "";
+  onboardingCloudProvider: string;
+  onboardingSmallModel: string;
+  onboardingLargeModel: string;
+  onboardingProvider: string;
+  onboardingApiKey: string;
+  onboardingRemoteApiBase: string;
+  onboardingRemoteToken: string;
+  onboardingRemoteConnecting: boolean;
+  onboardingRemoteError: string;
+  onboardingRemoteConnected: boolean;
+  onboardingOpenRouterModel: string;
+  onboardingPrimaryModel: string;
+  onboardingTelegramToken: string;
+  onboardingDiscordToken: string;
+  onboardingTwilioAccountSid: string;
+  onboardingTwilioAuthToken: string;
+  onboardingTwilioPhoneNumber: string;
+  onboardingBlooioApiKey: string;
+  onboardingBlooioPhoneNumber: string;
+  onboardingSubscriptionTab: "token" | "oauth";
+  onboardingSelectedChains: Set<string>;
+  onboardingRpcSelections: Record<string, string>;
+  onboardingRpcKeys: Record<string, string>;
+  onboardingAvatar: number;
+  onboardingRestarting: boolean;
+  elizaCloudConnected: boolean;
+  elizaCloudLoginBusy: boolean;
+  elizaCloudLoginError: string;
+  elizaCloudUserId: string;
+  uiShellMode: string;
+  [key: string]: unknown;
+};
+
+const { companionOverlayTabs, mockUseApp } = vi.hoisted(() => ({
+  companionOverlayTabs: new Set([
+    "companion",
+    "skills",
+    "character",
+    "character-select",
+    "settings",
+    "plugins",
+    "advanced",
+    "actions",
+    "triggers",
+    "fine-tuning",
+    "trajectories",
+    "runtime",
+    "database",
+    "logs",
+    "security",
+    "apps",
+    "connectors",
+    "knowledge",
+    "lifo",
+    "stream",
+    "wallets",
+  ]),
+  mockUseApp: vi.fn(),
+}));
+
+vi.mock("@elizaos/app-core/state", async () => {
+  const actual = await vi.importActual("@elizaos/app-core/state");
+  return {
+    ...actual,
+    useApp: () => mockUseApp(),
+  };
+});
+
+vi.mock("@elizaos/app-core/components", async () => {
+  const actual = await vi.importActual<
+    typeof import("@elizaos/app-core/components")
+  >("@elizaos/app-core/components");
+  return {
+    ...actual,
+    AdvancedPageView: () =>
+      React.createElement("div", null, "AdvancedPageView"),
+    AppsPageView: () => React.createElement("div", null, "AppsPageView"),
+    CharacterView: () => React.createElement("div", null, "CharacterView"),
+    ChatView: () => React.createElement("div", null, "ChatView"),
+    ConnectorsPageView: () =>
+      React.createElement("div", null, "ConnectorsPageView"),
+    CommandPalette: () => React.createElement("div", null, "CommandPalette"),
+    CompanionShell: ({ tab }: { tab: string }) =>
+      React.createElement("main", null, `CompanionShell:${tab}`),
+    CompanionView: () => React.createElement("div", null, "CompanionView"),
+    ConversationsSidebar: () =>
+      React.createElement("div", null, "ConversationsSidebar"),
+    CustomActionEditor: () =>
+      React.createElement("div", null, "CustomActionEditor"),
+    CustomActionsPanel: () =>
+      React.createElement("div", null, "CustomActionsPanel"),
+    EmotePicker: () => React.createElement("div", null, "EmotePicker"),
+    Header: () => React.createElement("div", null, "Header"),
+    InventoryView: () => React.createElement("div", null, "InventoryView"),
+    KnowledgeView: () => React.createElement("div", null, "KnowledgeView"),
+    LifoSandboxView: () => React.createElement("div", null, "LifoSandboxView"),
+    OnboardingWizard: () => {
+      const state = mockUseApp();
+      if (state.onboardingStep === "wakeUp") {
+        return React.createElement(
+          "button",
+          {
+            onClick: () => state.handleOnboardingNext(),
+            type: "button",
+          },
+          "onboarding.createNewAgent",
+        );
+      }
+      if (state.onboardingStep === "connection") {
+        if (!state.onboardingRunMode) {
+          return React.createElement(
+            "button",
+            {
+              onClick: () => {
+                state.setState?.("onboardingRunMode", "local");
+              },
+              type: "button",
+            },
+            "onboarding.hostingLocal",
+          );
+        }
+        return React.createElement(
+          "button",
+          {
+            onClick: () => state.handleOnboardingNext(),
+            type: "button",
+          },
+          "onboarding.confirm",
+        );
+      }
+      if (state.onboardingStep === "rpc") {
+        return React.createElement(
+          "button",
+          {
+            onClick: () => state.handleOnboardingNext(),
+            type: "button",
+          },
+          "onboarding.rpcSkip",
+        );
+      }
+      if (state.onboardingStep === "senses") {
+        return React.createElement(
+          "button",
+          {
+            onClick: () => state.handleOnboardingNext(),
+            type: "button",
+          },
+          "permissions-continue",
+        );
+      }
+      return React.createElement(
+        "button",
+        {
+          onClick: () => state.handleOnboardingNext(),
+          type: "button",
+        },
+        "onboarding.enter",
+      );
+    },
+    PairingView: () => React.createElement("div", null, "PairingView"),
+    PermissionsOnboardingSection: ({
+      onContinue,
+    }: {
+      onContinue: (options?: { allowPermissionBypass?: boolean }) => void;
+    }) =>
+      React.createElement(
+        "button",
+        { onClick: () => onContinue(), type: "button" },
+        "permissions-continue",
+      ),
+    SettingsView: () => React.createElement("div", null, "SettingsView"),
+    SharedCompanionScene: ({
+      children,
+    }: {
+      active: boolean;
+      children: React.ReactNode;
+    }) => React.createElement(React.Fragment, null, children),
+    ShellOverlays: () => null,
+    StreamView: () => React.createElement("div", null, "StreamView"),
+  };
+});
+
+vi.mock("../../../packages/app-core/src/components/Header", () => ({
+  Header: () => React.createElement("div", null, "Header"),
+}));
+vi.mock("../../../packages/app-core/src/components/Nav", () => ({
+  Nav: () => React.createElement("div", null, "Nav"),
+}));
+vi.mock("../../../packages/app-core/src/components/CommandPalette", () => ({
+  CommandPalette: () => React.createElement("div", null, "CommandPalette"),
+}));
+vi.mock("../../../packages/app-core/src/components/EmotePicker", () => ({
+  EmotePicker: () => React.createElement("div", null, "EmotePicker"),
+}));
+vi.mock(
+  "../../../packages/app-core/src/components/onboarding/PermissionsStep",
+  () => ({
+    PermissionsStep: () =>
+      React.createElement(
+        "button",
+        { onClick: () => mockUseApp().handleOnboardingNext(), type: "button" },
+        "permissions-continue",
+      ),
+  }),
+);
+vi.mock(
+  "../../../packages/app-core/src/components/ConversationsSidebar",
+  () => ({
+    ConversationsSidebar: () =>
+      React.createElement("div", null, "ConversationsSidebar"),
+  }),
+);
+vi.mock("../../../packages/app-core/src/components/CustomActionsPanel", () => ({
+  CustomActionsPanel: () =>
+    React.createElement("div", null, "CustomActionsPanel"),
+}));
+vi.mock("../../../packages/app-core/src/components/CustomActionEditor", () => ({
+  CustomActionEditor: () =>
+    React.createElement("div", null, "CustomActionEditor"),
+}));
+vi.mock("../../../packages/app-core/src/components/AppsPageView", () => ({
+  AppsPageView: () => React.createElement("div", null, "AppsPageView"),
+}));
+vi.mock("../../../packages/app-core/src/components/AdvancedPageView", () => ({
+  AdvancedPageView: () => React.createElement("div", null, "AdvancedPageView"),
+}));
+vi.mock("../../../packages/app-core/src/components/CharacterView", () => ({
+  CharacterView: () => React.createElement("div", null, "CharacterView"),
+}));
+vi.mock("../../../packages/app-core/src/components/TriggersView", () => ({
+  TriggersView: () => React.createElement("div", null, "TriggersView"),
+}));
+vi.mock("../../../packages/app-core/src/components/ConnectorsPageView", () => ({
+  ConnectorsPageView: () =>
+    React.createElement("div", null, "ConnectorsPageView"),
+}));
+vi.mock("../../../packages/app-core/src/components/InventoryView", () => ({
+  InventoryView: () => React.createElement("div", null, "InventoryView"),
+}));
+vi.mock("../../../packages/app-core/src/components/KnowledgeView", () => ({
+  KnowledgeView: () => React.createElement("div", null, "KnowledgeView"),
+}));
+vi.mock("../../../packages/app-core/src/components/LifoSandboxView", () => ({
+  LifoSandboxView: () => React.createElement("div", null, "LifoSandboxView"),
+}));
+vi.mock("../../../packages/app-core/src/components/PairingView", () => ({
+  PairingView: () => React.createElement("div", null, "PairingView"),
+}));
+vi.mock("../../../packages/app-core/src/components/ChatView", () => ({
+  ChatView: () => React.createElement("div", null, "ChatView"),
+}));
+vi.mock("@elizaos/app-core/components/AvatarLoader", () => ({
+  AvatarLoader: () => React.createElement("div", null, "AvatarLoader"),
+}));
+vi.mock("../../../packages/app-core/src/components/CompanionView", () => ({
+  CompanionView: () => React.createElement("div", null, "CompanionView"),
+}));
+vi.mock("../../../packages/app-core/src/components/ChatModalView.js", () => ({
+  ChatModalView: () => React.createElement("div", null, "ChatModalView"),
+}));
+vi.mock("../../../packages/app-core/src/components/AvatarSelector", () => ({
+  AvatarSelector: () => React.createElement("div", null, "AvatarSelector"),
+}));
+vi.mock("../../../packages/app-core/src/components/companion/VrmStage", () => ({
+  VrmStage: () => React.createElement("div", null, "VrmStage"),
+}));
+vi.mock("../../../packages/app-core/src/components/StreamView", () => ({
+  StreamView: () => React.createElement("div", null, "StreamView"),
+}));
+vi.mock("../../../packages/app-core/src/components/CompanionShell", () => ({
+  COMPANION_OVERLAY_TABS: companionOverlayTabs,
+  CompanionShell: ({ tab }: { tab: string }) =>
+    React.createElement("main", null, `CompanionShell:${tab}`),
+  useCompanionShell: () => ({}),
+}));
+
+vi.mock(
+  "../../../packages/app-core/src/components/companion/CompanionSceneHost",
+  async () => {
+    const React = await vi.importActual<typeof import("react")>("react");
+    return {
+      SharedCompanionScene: ({
+        children,
+      }: {
+        active: boolean;
+        children: React.ReactNode;
+      }) => React.createElement(React.Fragment, null, children),
+      CompanionSceneHost: () => null,
+      useSharedCompanionScene: () => true,
+    };
+  },
+);
+
+import { App } from "../../src/App";
+
+function onboardingOptions() {
+  return {
+    names: ["Milady"],
+    styles: [
+      {
+        catchphrase: "chaotic",
+        hint: "chaotic good",
+        bio: ["bio"],
+        system: "You are {{name}}",
+        style: { all: [], chat: [], post: [] },
+        adjectives: [],
+        postExamples: [],
+        messageExamples: [[{ name: "User", content: { text: "hello" } }]],
+      },
+    ],
+    providers: [
+      {
+        id: "ollama",
+        name: "Ollama",
+        envKey: null,
+        pluginName: "@elizaos/plugin-ollama",
+        keyPrefix: null,
+        description: "Use local Ollama",
+      },
+    ],
+    cloudProviders: [
+      { id: "openrouter", name: "OpenRouter", description: "Cloud provider" },
+    ],
+    models: {
+      small: [
+        {
+          id: "small-model",
+          name: "Small",
+          provider: "openrouter",
+          description: "small",
+        },
+      ],
+      large: [
+        {
+          id: "large-model",
+          name: "Large",
+          provider: "openrouter",
+          description: "large",
+        },
+      ],
+    },
+    inventoryProviders: [
+      {
+        id: "evm",
+        name: "EVM",
+        description: "EVM chains",
+        rpcProviders: [
+          {
+            id: "elizacloud",
+            name: "Eliza Cloud",
+            description: "Managed RPC",
+            envKey: null,
+            requiresKey: false,
+          },
+        ],
+      },
+    ],
+    sharedStyleRules: "",
+  };
+}
+
+function createHarnessState(): AppHarnessState {
+  return {
+    onboardingLoading: false,
+    authRequired: false,
+    onboardingComplete: false,
+    tab: "chat",
+    actionNotice: null,
+    onboardingStep: "wakeUp",
+    onboardingOptions: onboardingOptions(),
+    onboardingName: "Milady",
+    onboardingStyle: "",
+    onboardingTheme: "milady",
+    onboardingRunMode: "",
+    onboardingCloudProvider: "",
+    onboardingSmallModel: "small-model",
+    onboardingLargeModel: "large-model",
+    onboardingProvider: "",
+    onboardingApiKey: "",
+    onboardingRemoteApiBase: "",
+    onboardingRemoteToken: "",
+    onboardingRemoteConnecting: false,
+    onboardingRemoteError: "",
+    onboardingRemoteConnected: false,
+    onboardingOpenRouterModel: "",
+    onboardingPrimaryModel: "",
+    onboardingTelegramToken: "",
+    onboardingDiscordToken: "",
+    onboardingTwilioAccountSid: "",
+    onboardingTwilioAuthToken: "",
+    onboardingTwilioPhoneNumber: "",
+    onboardingBlooioApiKey: "",
+    onboardingBlooioPhoneNumber: "",
+    onboardingSubscriptionTab: "token",
+    onboardingSelectedChains: new Set(["evm"]),
+    onboardingRpcSelections: {},
+    onboardingRpcKeys: {},
+    onboardingAvatar: 1,
+    selectedVrmIndex: 1,
+    customBackgroundUrl: "",
+    onboardingRestarting: false,
+    elizaCloudConnected: false,
+    elizaCloudLoginBusy: false,
+    elizaCloudLoginError: "",
+    elizaCloudUserId: "",
+    plugins: [],
+    conversations: [],
+    elizaCloudCredits: null,
+    uiShellMode: "native",
+  };
+}
+
+function textOf(node: TestRenderer.ReactTestInstance): string {
+  return node.children
+    .map((child) => (typeof child === "string" ? child : textOf(child)))
+    .join("");
+}
+
+function hasText(
+  node: TestRenderer.ReactTestInstance,
+  target: string,
+): boolean {
+  return textOf(node).includes(target);
+}
+
+function clickButton(
+  tree: TestRenderer.ReactTestRenderer,
+  labelFragment: string,
+): void {
+  const button = tree.root.findAll(
+    (node) => node.type === "button" && hasText(node, labelFragment),
+  )[0];
+  if (!button) {
+    throw new Error(`Button containing "${labelFragment}" not found`);
+  }
+  button.props.onClick();
+}
+
+async function rerender(tree: TestRenderer.ReactTestRenderer): Promise<void> {
+  await act(async () => {
+    tree.update(React.createElement(App));
+  });
+}
+
+describe("app startup onboarding flow (e2e)", () => {
+  let state: AppHarnessState;
+
+  beforeEach(() => {
+    state = createHarnessState();
+
+    const STEP_ORDER: OnboardingStep[] = [
+      "wakeUp",
+      "connection",
+      "rpc",
+      "senses",
+      "activate",
+    ];
+
+    const handleOnboardingNext = async () => {
+      if (state.onboardingStep === "activate") {
+        state.onboardingComplete = true;
+        state.tab = "chat";
+        return;
+      }
+      const idx = STEP_ORDER.indexOf(state.onboardingStep);
+      if (idx >= 0 && idx < STEP_ORDER.length - 1) {
+        state.onboardingStep = STEP_ORDER[idx + 1];
+      }
+    };
+
+    const handleOnboardingBack = () => {
+      const idx = STEP_ORDER.indexOf(state.onboardingStep);
+      if (idx > 0) {
+        state.onboardingStep = STEP_ORDER[idx - 1];
+      }
+    };
+
+    mockUseApp.mockReset();
+    mockUseApp.mockImplementation(() => ({
+      t: (k: string) => k,
+      ...state,
+      setState: (key: string, value: unknown) => {
+        state[key] = value;
+      },
+      setTheme: (theme: string) => {
+        state.onboardingTheme = theme;
+      },
+      handleOnboardingNext,
+      handleOnboardingBack,
+      handleCloudLogin: async () => {
+        state.elizaCloudConnected = true;
+        state.elizaCloudUserId = "test-user";
+      },
+      handleOnboardingRemoteConnect: async () => {},
+      handleOnboardingUseLocalBackend: () => {},
+    }));
+  });
+
+  it("progresses through onboarding and lands in chat", async () => {
+    let tree: TestRenderer.ReactTestRenderer | null = null;
+
+    await act(async () => {
+      tree = TestRenderer.create(React.createElement(App));
+    });
+    if (!tree) throw new Error("failed to render App");
+    const renderedTree = tree;
+
+    for (let i = 0; i < 20 && !state.onboardingComplete; i += 1) {
+      if (
+        state.onboardingStep === "connection" &&
+        state.onboardingRunMode === "local" &&
+        !state.onboardingProvider
+      ) {
+        state.onboardingProvider = "ollama";
+        await rerender(renderedTree);
+      }
+
+      if (state.onboardingStep === "senses") {
+        clickButton(renderedTree, "permissions-continue");
+      } else if (state.onboardingStep === "wakeUp") {
+        clickButton(renderedTree, "onboarding.createNewAgent");
+      } else if (state.onboardingStep === "connection") {
+        if (!state.onboardingRunMode) {
+          clickButton(renderedTree, "onboarding.hostingLocal");
+        } else {
+          clickButton(renderedTree, "onboarding.confirm");
+        }
+      } else if (state.onboardingStep === "rpc") {
+        clickButton(renderedTree, "onboarding.rpcSkip");
+      } else if (state.onboardingStep === "activate") {
+        clickButton(renderedTree, "onboarding.enter");
+      }
+      await rerender(renderedTree);
+    }
+
+    expect(state.onboardingComplete).toBe(true);
+
+    const renderedText = textOf(renderedTree.root);
+
+    expect(renderedText).toContain("ChatView");
+    expect(renderedText).not.toContain("OnboardingWizard");
+  });
+});

package/test/app/startup-timeout.test.tsx

@@ -0,0 +1,80 @@
+import { useEffect } from "react";
+import renderer, { act } from "react-test-renderer";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+// Mock out the relevant part of the App component logic for isolated testing
+// without heavy UI dependencies.
+function AppMock({
+  startupPhase,
+  startupError,
+  retryStartup,
+}: {
+  startupPhase: string;
+  startupError: unknown;
+  retryStartup: () => void;
+}) {
+  useEffect(() => {
+    const STARTUP_TIMEOUT_MS = 300_000;
+    if (startupPhase !== "ready" && !startupError) {
+      const timer = setTimeout(() => {
+        retryStartup();
+      }, STARTUP_TIMEOUT_MS);
+      return () => clearTimeout(timer);
+    }
+  }, [startupPhase, startupError, retryStartup]);
+
+  return <div>App Content</div>;
+}
+
+describe("App Startup Timeout Logic", () => {
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.clearAllTimers();
+  });
+
+  it("sets a 300,000ms timeout and calls retryStartup if not ready", () => {
+    vi.useFakeTimers();
+    const retryStartup = vi.fn();
+
+    act(() => {
+      renderer.create(
+        <AppMock
+          startupPhase="initializing-agent"
+          startupError={null}
+          retryStartup={retryStartup}
+        />,
+      );
+    });
+
+    // Fast-forward time
+    act(() => {
+      vi.advanceTimersByTime(299999);
+    });
+    expect(retryStartup).not.toHaveBeenCalled();
+
+    act(() => {
+      vi.advanceTimersByTime(1);
+    });
+    expect(retryStartup).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not call retryStartup if startup is ready", () => {
+    vi.useFakeTimers();
+    const retryStartup = vi.fn();
+
+    act(() => {
+      renderer.create(
+        <AppMock
+          startupPhase="ready"
+          startupError={null}
+          retryStartup={retryStartup}
+        />,
+      );
+    });
+
+    act(() => {
+      vi.advanceTimersByTime(300000);
+    });
+    expect(retryStartup).not.toHaveBeenCalled();
+  });
+});