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

package/src/components/OnboardingWizard.test.tsx

@@ -1,104 +0,0 @@
-// @vitest-environment jsdom
-
-import React from "react";
-import type { ReactTestRenderer } from "react-test-renderer";
-import TestRenderer, { act } from "react-test-renderer";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-
-const { mockApplyUiTheme, mockUseApp, mockVrmStage } = vi.hoisted(() => ({
-  mockApplyUiTheme: vi.fn(),
-  mockUseApp: vi.fn(),
-  mockVrmStage: vi.fn(() => React.createElement("div", null, "VrmStage")),
-}));
-
-vi.mock("@elizaos/app-core/state", () => ({
-  applyUiTheme: (theme: "light" | "dark") => mockApplyUiTheme(theme),
-  getVrmPreviewUrl: () => "/vrms/previews/eliza-1.png",
-  getVrmUrl: () => "/vrms/eliza-1.vrm.gz",
-  ONBOARDING_STEPS: [
-    {
-      id: "identity",
-      name: "onboarding.identity.title",
-      subtitle: "onboarding.identity.subtitle",
-    },
-  ],
-  useApp: () => mockUseApp(),
-}));
-
-vi.mock("@elizaos/app-core/components", () => ({
-  LanguageDropdown: () => React.createElement("div", null, "LanguageDropdown"),
-}));
-
-vi.mock("@elizaos/app-core/utils", () => ({
-  resolveAppAssetUrl: (path: string) => path,
-}));
-
-vi.mock("./companion/VrmStage", () => ({
-  VrmStage: (props: unknown) => mockVrmStage(props),
-}));
-
-vi.mock("./onboarding/ActivateStep", () => ({
-  ActivateStep: () => React.createElement("div", null, "ActivateStep"),
-}));
-
-vi.mock("./onboarding/ConnectionStep", () => ({
-  ConnectionStep: () => React.createElement("div", null, "ConnectionStep"),
-}));
-
-vi.mock("./onboarding/OnboardingPanel", () => ({
-  OnboardingPanel: ({ children }: { children: React.ReactNode }) =>
-    React.createElement("div", null, children),
-}));
-
-vi.mock("./onboarding/OnboardingStepNav", () => ({
-  OnboardingStepNav: () =>
-    React.createElement("div", null, "OnboardingStepNav"),
-}));
-
-vi.mock("./onboarding/PermissionsStep", () => ({
-  PermissionsStep: () => React.createElement("div", null, "PermissionsStep"),
-}));
-
-vi.mock("./onboarding/RpcStep", () => ({
-  RpcStep: () => React.createElement("div", null, "RpcStep"),
-}));
-
-import { OnboardingWizard } from "./OnboardingWizard";
-
-describe("OnboardingWizard", () => {
-  beforeEach(() => {
-    mockApplyUiTheme.mockReset();
-    mockUseApp.mockReset();
-    mockVrmStage.mockClear();
-  });
-
-  it("forces light chrome while keeping the onboarding world on the day scene", async () => {
-    mockUseApp.mockReturnValue({
-      onboardingStep: "identity",
-      selectedVrmIndex: 1,
-      customVrmUrl: "",
-      uiLanguage: "en",
-      uiTheme: "dark",
-      setState: vi.fn(),
-      t: (key: string) => key,
-    });
-
-    let tree: ReactTestRenderer | undefined;
-    await act(async () => {
-      tree = TestRenderer.create(<OnboardingWizard />);
-    });
-
-    expect(mockApplyUiTheme).toHaveBeenCalledWith("light");
-    expect(mockVrmStage.mock.calls[0]?.[0]).toMatchObject({
-      worldUrl: "worlds/companion-day.spz",
-      cameraProfile: "companion_close",
-      initialCompanionZoomNormalized: 1,
-    });
-
-    await act(async () => {
-      tree?.unmount();
-    });
-
-    expect(mockApplyUiTheme).toHaveBeenLastCalledWith("dark");
-  });
-});

package/src/components/OnboardingWizard.tsx

@@ -1,249 +0,0 @@
-import { LanguageDropdown } from "@elizaos/app-core/components";
-import type { UiLanguage } from "@elizaos/app-core/i18n";
-import { normalizeLanguage } from "@elizaos/app-core/i18n";
-import {
-  applyUiTheme,
-  getVrmPreviewUrl,
-  getVrmUrl,
-  useApp,
-} from "@elizaos/app-core/state";
-import { resolveAppAssetUrl } from "@elizaos/app-core/utils";
-import { useEffect, useState } from "react";
-import { useBranding } from "../config/branding";
-import { VrmStage } from "./companion/VrmStage";
-import { ActivateStep } from "./onboarding/ActivateStep";
-import { ConnectionStep } from "./onboarding/ConnectionStep";
-import { IdentityStep } from "./onboarding/IdentityStep";
-import { OnboardingPanel } from "./onboarding/OnboardingPanel";
-import { OnboardingStepNav } from "./onboarding/OnboardingStepNav";
-import { PermissionsStep } from "./onboarding/PermissionsStep";
-import { RpcStep } from "./onboarding/RpcStep";
-
-const FORCE_VRM =
-  typeof window !== "undefined" &&
-  new URLSearchParams(window.location.search).get("test_force_vrm") === "1";
-
-const DISABLE_ONBOARDING_VRM =
-  !FORCE_VRM &&
-  (String(import.meta.env.VITE_E2E_DISABLE_VRM ?? "").toLowerCase() === "true" ||
-    String(import.meta.env.VITE_E2E_DISABLE_VRM ?? "") === "1");
-
-export function OnboardingWizard() {
-  const branding = useBranding();
-  const isEliza = branding.appName === "Eliza";
-  const disableVrm = !FORCE_VRM && (DISABLE_ONBOARDING_VRM || isEliza);
-  const [revealStarted, setRevealStarted] = useState(disableVrm);
-
-  const {
-    onboardingStep,
-    selectedVrmIndex,
-    customVrmUrl,
-    uiLanguage,
-    uiTheme,
-    setState,
-    handleOnboardingNext,
-    t,
-  } = useApp();
-
-  const setUiLanguage = (lang: UiLanguage) =>
-    setState("uiLanguage", normalizeLanguage(lang));
-
-  // Use same VRM resolution logic as CompanionView for character unification
-  const safeSelectedVrmIndex = selectedVrmIndex > 0 ? selectedVrmIndex : 1;
-  const vrmPath =
-    selectedVrmIndex === 0 && customVrmUrl
-      ? customVrmUrl
-      : getVrmUrl(safeSelectedVrmIndex);
-  const fallbackPreview =
-    selectedVrmIndex > 0
-      ? getVrmPreviewUrl(safeSelectedVrmIndex)
-      : getVrmPreviewUrl(1);
-  const worldUrl = resolveAppAssetUrl("worlds/companion-day.spz");
-
-  useEffect(() => {
-    // Onboarding keeps a fixed "light" chrome; companion mode owns day/night scenes.
-    applyUiTheme("light");
-    return () => {
-      applyUiTheme(uiTheme);
-    };
-  }, [uiTheme]);
-
-  // Auto-advance past the wakeUp splash once the VRM reveal animation starts,
-  // or after a 4-second timeout to prevent getting stuck when VRM fails to load.
-  useEffect(() => {
-    if (onboardingStep !== "wakeUp") return;
-    if (revealStarted) {
-      handleOnboardingNext();
-      return;
-    }
-    const timer = setTimeout(() => {
-      setRevealStarted(true);
-    }, 4000);
-    return () => clearTimeout(timer);
-  }, [onboardingStep, revealStarted, handleOnboardingNext]);
-
-  function renderStep() {
-    switch (onboardingStep) {
-      case "identity":
-        // Rendered outside the panel in OnboardingWizard JSX
-        return null;
-      case "connection":
-        return <ConnectionStep />;
-      case "rpc":
-        return <RpcStep />;
-      case "senses":
-        return <PermissionsStep />;
-      case "activate":
-        return <ActivateStep />;
-      default:
-        return null;
-    }
-  }
-
-  return (
-    <div className="onboarding-screen">
-      {/* Full-screen VRM background — same as CompanionView */}
-      <div className="onboarding-bg" />
-      <div className="onboarding-bg-overlay" />
-
-      {/* Keep browser E2E runs lightweight and deterministic by skipping VRM boot. */}
-      {disableVrm ? (
-        <div
-          aria-hidden="true"
-          className="absolute inset-0 z-10 pointer-events-none"
-          style={{
-            background:
-              "radial-gradient(circle at 50% 25%, rgba(255,255,255,0.16), transparent 34%), linear-gradient(180deg, rgba(17,17,17,0.08), rgba(10,10,10,0.36))",
-          }}
-        />
-      ) : (
-        <VrmStage
-          vrmPath={vrmPath}
-          worldUrl={worldUrl}
-          fallbackPreviewUrl={fallbackPreview}
-          cameraProfile="companion_close"
-          initialCompanionZoomNormalized={1}
-          onRevealStart={() => setRevealStarted(true)}
-          t={t}
-        />
-      )}
-
-      <div
-        data-testid="onboarding-ui-overlay"
-        style={{
-          position: "absolute",
-          inset: 0,
-          pointerEvents: revealStarted ? "auto" : "none",
-          opacity: revealStarted ? 1 : 0,
-          transition: "opacity 1.2s ease-in-out",
-          zIndex: 40,
-        }}
-      >
-        {/* Corner decorations */}
-        <svg
-          className="onboarding-corner onboarding-corner--tl"
-          viewBox="0 0 36 36"
-          fill="none"
-          stroke="rgba(240,185,11,0.18)"
-          strokeWidth="1"
-          aria-hidden="true"
-        >
-          <path d="M0 18 L0 0 L18 0" />
-          <circle
-            cx="0"
-            cy="0"
-            r="2"
-            fill="rgba(240,185,11,0.25)"
-            stroke="none"
-          />
-        </svg>
-        <svg
-          className="onboarding-corner onboarding-corner--tr"
-          viewBox="0 0 36 36"
-          fill="none"
-          stroke="rgba(240,185,11,0.18)"
-          strokeWidth="1"
-          aria-hidden="true"
-        >
-          <path d="M0 18 L0 0 L18 0" />
-          <circle
-            cx="0"
-            cy="0"
-            r="2"
-            fill="rgba(240,185,11,0.25)"
-            stroke="none"
-          />
-        </svg>
-        <svg
-          className="onboarding-corner onboarding-corner--bl"
-          viewBox="0 0 36 36"
-          fill="none"
-          stroke="rgba(240,185,11,0.18)"
-          strokeWidth="1"
-          aria-hidden="true"
-        >
-          <path d="M0 18 L0 0 L18 0" />
-          <circle
-            cx="0"
-            cy="0"
-            r="2"
-            fill="rgba(240,185,11,0.25)"
-            stroke="none"
-          />
-        </svg>
-        <svg
-          className="onboarding-corner onboarding-corner--br"
-          viewBox="0 0 36 36"
-          fill="none"
-          stroke="rgba(240,185,11,0.18)"
-          strokeWidth="1"
-          aria-hidden="true"
-        >
-          <path d="M0 18 L0 0 L18 0" />
-          <circle
-            cx="0"
-            cy="0"
-            r="2"
-            fill="rgba(240,185,11,0.25)"
-            stroke="none"
-          />
-        </svg>
-
-        {/* Language selector — top right */}
-        <div
-          style={{
-            position: "absolute",
-            top: "1rem",
-            right: "1rem",
-            zIndex: 50,
-            display: "flex",
-            gap: "0.5rem",
-            alignItems: "center",
-          }}
-        >
-          <LanguageDropdown
-            uiLanguage={uiLanguage}
-            setUiLanguage={setUiLanguage}
-            t={t}
-            variant="companion"
-          />
-        </div>
-
-        {/* ── Standard overlaid UI — step nav + content panel ── */}
-        <div className="onboarding-ui-overlay">
-          <OnboardingStepNav />
-          {onboardingStep === "identity" ? (
-            /* Identity step renders full-width at the bottom — no glass panel */
-            <div className="ob-identity-overlay">
-              <IdentityStep />
-            </div>
-          ) : (
-            <OnboardingPanel step={onboardingStep}>
-              {renderStep()}
-            </OnboardingPanel>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/PairingView.tsx

@@ -1,109 +0,0 @@
-/**
- * Pairing view component — simple pairing screen for authentication.
- */
-
-import { useBranding } from "../config/branding";
-import { useApp } from "../state";
-
-export function PairingView() {
-  const {
-    pairingEnabled,
-    pairingExpiresAt,
-    pairingCodeInput,
-    pairingError,
-    pairingBusy,
-    handlePairingSubmit,
-    setState,
-    t,
-  } = useApp();
-  const branding = useBranding();
-
-  const handleCodeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setState("pairingCodeInput", e.target.value);
-  };
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    void handlePairingSubmit();
-  };
-
-  const formatExpiry = (timestamp: number | null): string => {
-    if (!timestamp) return "";
-    const now = Date.now();
-    const diff = timestamp - now;
-    if (diff <= 0) return "Expired";
-    const minutes = Math.floor(diff / 60000);
-    const seconds = Math.floor((diff % 60000) / 1000);
-    return `Expires in ${minutes}:${seconds.toString().padStart(2, "0")}`;
-  };
-
-  return (
-    <div className="max-w-[560px] mx-auto mt-15 p-6 border border-border bg-card rounded-[10px]">
-      <h1 className="text-lg font-semibold mb-2 text-txt-strong">
-        {t("pairingview.PairingRequired")}
-      </h1>
-      <p className="text-muted mb-4 leading-relaxed">
-        {t("pairingview.EnterThePairingCo")}
-      </p>
-
-      {pairingEnabled ? (
-        <form onSubmit={handleSubmit}>
-          <div>
-            <label
-              htmlFor="pairing-code"
-              className="text-sm text-txt-strong block mb-2"
-            >
-              {t("pairingview.PairingCode")}
-            </label>
-            <input
-              id="pairing-code"
-              type="text"
-              value={pairingCodeInput}
-              onChange={handleCodeChange}
-              placeholder={t("pairingview.EnterPairingCode")}
-              disabled={pairingBusy}
-              className="w-full px-3 py-2.5 rounded-lg border border-border bg-bg-muted text-txt text-sm focus:border-accent focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
-            />
-          </div>
-
-          <div className="mt-3 flex gap-2.5">
-            <button
-              type="submit"
-              className="px-6 py-2 border border-accent bg-accent text-accent-fg text-sm cursor-pointer hover:bg-accent-hover disabled:opacity-40 disabled:cursor-not-allowed"
-              disabled={pairingBusy || !pairingCodeInput.trim()}
-            >
-              {pairingBusy ? "Pairing..." : "Submit"}
-            </button>
-          </div>
-
-          {pairingError && (
-            <p className="mt-2.5 text-danger text-[13px]">{pairingError}</p>
-          )}
-
-          {pairingExpiresAt && (
-            <p className="mt-2.5 text-muted text-[13px]">
-              {formatExpiry(pairingExpiresAt)}
-            </p>
-          )}
-        </form>
-      ) : (
-        <div className="text-muted text-sm space-y-2">
-          <p>{t("pairingview.PairingIsNotEnabl")}</p>
-          <p>{t("pairingview.NextSteps")}</p>
-          <ol className="list-decimal pl-5 space-y-1">
-            <li>{t("pairingview.AskTheServerOwner")}</li>
-            <li>{t("pairingview.EnablePairingOnTh")}</li>
-          </ol>
-          <a
-            href={`https://github.com/${branding.orgName}/${branding.repoName}/blob/develop/docs/api-reference.mdx`}
-            target="_blank"
-            rel="noreferrer"
-            className="inline-flex px-3 py-2 border border-border rounded text-txt hover:border-accent hover:text-txt"
-          >
-            {t("pairingview.PairingSetupDocs")}
-          </a>
-        </div>
-      )}
-    </div>
-  );
-}