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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elizaos/app-core",
-  "version": "2.0.0-alpha.71",
+  "version": "2.0.0-alpha.73",
   "description": "Shared application core for Milady shells and white-label apps.",
   "type": "module",
   "license": "MIT",
@@ -68,8 +68,8 @@
     "@capacitor/haptics": "8.0.0",
     "@capacitor/keyboard": "8.0.0",
     "@capacitor/preferences": "^8.0.1",
-    "@elizaos/autonomous": "2.0.0-alpha.71",
-    "@elizaos/ui": "2.0.0-alpha.71",
+    "@elizaos/autonomous": "2.0.0-alpha.73",
+    "@elizaos/ui": "2.0.0-alpha.73",
     "@sparkjsdev/spark": "^0.1.10",
     "lucide-react": "^0.575.0",
     "three": "^0.182.0",
@@ -87,5 +87,5 @@
     "typescript": "^5.9.3",
     "vitest": "^4.0.18"
   },
-  "gitHead": "c150a8cf4bffddd7e934f3a6073a092ca1cd6520"
+  "gitHead": "036d15051d6c06cca03eb0f4e3c65a18801d8360"
 }

package/src/App.tsx

@@ -219,8 +219,14 @@ export function App() {
     shellMode === "native" &&
     (isCharacterTab(effectiveTab) || isCharacterTab(tab));
   const companionShellVisible = shellMode === "companion";
+  // Don't initialize the 3D scene while the system is still booting — this
+  // prevents VrmEngine's Three.js setup from blocking the JS thread and
+  // delaying WebSocket agent-status updates (which would freeze the loader).
   const companionSceneActive =
-    COMPANION_ENABLED && (companionShellVisible || characterSceneVisible);
+    COMPANION_ENABLED &&
+    !onboardingLoading &&
+    agentStatus?.state !== "starting" &&
+    (companionShellVisible || characterSceneVisible);
   const contextMenu = useContextMenu();
 
   useStreamPopoutNavigation(setTab);

package/src/components/AvatarLoader.tsx

@@ -57,6 +57,7 @@ export function AvatarLoader({
 
         {/* Progress bar */}
         <div
+          data-testid="avatar-loader-progress"
           style={{
             width: "100%",
             height: 3,

package/src/components/CharacterRoster.tsx

@@ -24,6 +24,7 @@ export const CHARACTER_PRESET_META: Record<
   "hehe~": { name: "Rin", avatarIndex: 5, voicePresetId: "gigi" },
   "...": { name: "Ryu", avatarIndex: 6, voicePresetId: "daniel" },
   "lmao kms": { name: "Satoshi", avatarIndex: 7, voicePresetId: "callum" },
+  "bruh": { name: "Yuki", avatarIndex: 8, voicePresetId: "echo" },
 };
 
 /* ── Types ────────────────────────────────────────────────────────────── */

package/src/components/CompanionSceneHost.tsx

@@ -156,6 +156,13 @@ function CompanionSceneSurface({
     companionZoomHydratedRef.current = true;
   }
 
+  // Lazy-mount VrmStage: only initialize the 3D engine once the scene is
+  // actually needed (first time active becomes true). This prevents the WebGL
+  // context and asset loads from firing in native/chat mode on startup.
+  const hasEverBeenActiveRef = useRef(active);
+  if (active) hasEverBeenActiveRef.current = true;
+  const shouldMountVrm = hasEverBeenActiveRef.current;
+
   const setCompanionZoom = useCallback((value: number) => {
     const nextZoom = clampCompanionZoom(value);
     companionZoomRef.current = nextZoom;
@@ -447,18 +454,20 @@ function CompanionSceneSurface({
       >
         <div className="absolute inset-0 z-0 bg-cover opacity-60 bg-[radial-gradient(circle_at_10%_20%,rgba(255,255,255,0.03)_0%,transparent_40%),radial-gradient(circle_at_80%_80%,rgba(0,225,255,0.05)_0%,transparent_40%)] pointer-events-none" />
 
-        <VrmStage
-          active={active}
-          vrmPath={vrmPath}
-          worldUrl={worldUrl}
-          fallbackPreviewUrl={fallbackPreviewUrl}
-          preloadAvatars={preloadAvatars}
-          cameraProfile="companion"
-          onEngineReady={handleStageEngineReady}
-          onLayerEngineReady={handleStageLayerEngineReady}
-          playWaveOnAvatarChange
-          t={t}
-        />
+        {shouldMountVrm && (
+          <VrmStage
+            active={active}
+            vrmPath={vrmPath}
+            worldUrl={worldUrl}
+            fallbackPreviewUrl={fallbackPreviewUrl}
+            preloadAvatars={preloadAvatars}
+            cameraProfile="companion"
+            onEngineReady={handleStageEngineReady}
+            onLayerEngineReady={handleStageLayerEngineReady}
+            playWaveOnAvatarChange
+            t={t}
+          />
+        )}
 
         <div
           aria-hidden="true"

package/src/components/OnboardingWizard.tsx

@@ -19,14 +19,19 @@ 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 =
-  String(import.meta.env.VITE_E2E_DISABLE_VRM ?? "").toLowerCase() === "true" ||
-  String(import.meta.env.VITE_E2E_DISABLE_VRM ?? "") === "1";
+  !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 = DISABLE_ONBOARDING_VRM || isEliza;
+  const disableVrm = !FORCE_VRM && (DISABLE_ONBOARDING_VRM || isEliza);
   const [revealStarted, setRevealStarted] = useState(disableVrm);
 
   const {
@@ -36,6 +41,7 @@ export function OnboardingWizard() {
     uiLanguage,
     uiTheme,
     setState,
+    handleOnboardingNext,
     t,
   } = useApp();
 
@@ -62,10 +68,25 @@ export function OnboardingWizard() {
     };
   }, [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":
-        return <IdentityStep />;
+        // Rendered outside the panel in OnboardingWizard JSX
+        return null;
       case "connection":
         return <ConnectionStep />;
       case "rpc":
@@ -108,6 +129,7 @@ export function OnboardingWizard() {
       )}
 
       <div
+        data-testid="onboarding-ui-overlay"
         style={{
           position: "absolute",
           inset: 0,
@@ -210,9 +232,16 @@ export function OnboardingWizard() {
         {/* ── Standard overlaid UI — step nav + content panel ── */}
         <div className="onboarding-ui-overlay">
           <OnboardingStepNav />
-          <OnboardingPanel step={onboardingStep}>
-            {renderStep()}
-          </OnboardingPanel>
+          {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/onboarding/ConnectionStep.tsx

@@ -9,6 +9,7 @@ import { isNative } from "@elizaos/app-core/platform";
 import { getProviderLogo } from "@elizaos/app-core/providers";
 import { useApp } from "@elizaos/app-core/state";
 import { openExternalUrl } from "@elizaos/app-core/utils";
+import { ONBOARDING_PROVIDER_CATALOG } from "@elizaos/autonomous/contracts/onboarding";
 import { useEffect, useState } from "react";
 
 function formatRequestError(err: unknown): string {
@@ -151,7 +152,13 @@ export function ConnectionStep() {
     setState("onboardingOpenRouterModel", modelId);
   };
 
-  const catalogProviders = onboardingOptions?.providers ?? [];
+  // Use the static provider catalog shipped in the frontend bundle — no API
+  // call needed. Runtime overrides from `onboardingOptions` (if available)
+  // take precedence so the server can still augment the list when present.
+  const catalogProviders: ProviderOption[] =
+    (onboardingOptions?.providers as ProviderOption[] | undefined)?.length
+      ? (onboardingOptions!.providers as ProviderOption[])
+      : ([...ONBOARDING_PROVIDER_CATALOG] as unknown as ProviderOption[]);
   // Merge custom providers from branding (app-injected) with the catalog.
   // Custom providers are appended; duplicates (by id) are skipped.
   const customProviders = branding.customProviders ?? [];

package/src/components/onboarding/IdentityStep.tsx

@@ -1,29 +1,36 @@
-import { client } from "@elizaos/app-core/api";
 import { useApp } from "@elizaos/app-core/state";
+import { getVrmPreviewUrl } from "@elizaos/app-core/state";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
-  CharacterRoster,
   CHARACTER_PRESET_META,
-  resolveRosterEntries,
-  type CharacterRosterEntry,
+  SLANT_CLIP,
+  INSET_CLIP,
 } from "../CharacterRoster";
 
+/* ── Hardcoded frontend presets — no server needed ─────────────── */
+
+const FRONTEND_PRESETS = Object.entries(CHARACTER_PRESET_META).map(
+  ([catchphrase, meta]) => ({
+    id: catchphrase,
+    name: meta.name,
+    avatarIndex: meta.avatarIndex,
+    voicePresetId: meta.voicePresetId,
+    catchphrase,
+  }),
+);
+
+type PresetEntry = (typeof FRONTEND_PRESETS)[number];
+
 export function IdentityStep() {
   const {
-    onboardingOptions,
     onboardingStyle,
     handleOnboardingNext,
     setState,
     t,
   } = useApp();
 
-  const styles = onboardingOptions?.styles ?? [];
-  const selectedCatchphrase = onboardingStyle || styles[0]?.catchphrase || "";
-
-  const rosterEntries = useMemo(
-    () => resolveRosterEntries(styles).slice(0, 4),
-    [styles],
-  );
+  const entries = FRONTEND_PRESETS;
+  const selectedId = onboardingStyle || entries[0]?.catchphrase || "";
 
   /* ── Import / restore state ─────────────────────────────────────── */
   const [showImport, setShowImport] = useState(false);
@@ -34,6 +41,22 @@ export function IdentityStep() {
   const [importSuccess, setImportSuccess] = useState<string | null>(null);
   const importBusyRef = useRef(false);
 
+  const handleSelect = useCallback(
+    (entry: PresetEntry) => {
+      setState("onboardingStyle", entry.catchphrase);
+      setState("onboardingName", entry.name);
+      setState("selectedVrmIndex", entry.avatarIndex);
+    },
+    [setState],
+  );
+
+  // Auto-select the first one if nothing is selected yet
+  useEffect(() => {
+    if (!onboardingStyle && entries.length > 0) {
+      handleSelect(entries[0]);
+    }
+  }, [onboardingStyle, entries, handleSelect]);
+
   const handleImportAgent = useCallback(async () => {
     if (importBusyRef.current || importBusy) return;
     if (!importFile) {
@@ -49,6 +72,8 @@ export function IdentityStep() {
       setImportBusy(true);
       setImportError(null);
       setImportSuccess(null);
+      // Dynamic import to avoid hard dependency on client when server is absent
+      const { client } = await import("@elizaos/app-core/api");
       const fileBuffer = await importFile.arrayBuffer();
       const result = await client.importAgent(importPassword, fileBuffer);
       const counts = result.counts;
@@ -75,25 +100,6 @@ export function IdentityStep() {
     }
   }, [importBusy, importFile, importPassword, t]);
 
-  const handleSelect = useCallback(
-    (entry: CharacterRosterEntry) => {
-      setState("onboardingStyle", entry.id);
-      const meta = CHARACTER_PRESET_META[entry.id];
-      if (meta) {
-        setState("onboardingName", meta.name);
-        setState("selectedVrmIndex", meta.avatarIndex);
-      }
-    },
-    [setState],
-  );
-
-  // Auto-select the first one if nothing is selected yet
-  useEffect(() => {
-    if (!onboardingStyle && rosterEntries.length > 0) {
-      handleSelect(rosterEntries[0]);
-    }
-  }, [onboardingStyle, rosterEntries, handleSelect]);
-
   /* ── Import UI ──────────────────────────────────────────────────── */
   if (showImport) {
     return (
@@ -166,38 +172,80 @@ export function IdentityStep() {
     );
   }
 
-  /* ── Character roster ───────────────────────────────────────────── */
+  /* ── Overwatch-style character select — full-width bottom bar ──── */
+  const selected = entries.find((e) => e.catchphrase === selectedId);
+
   return (
-    <div className="flex flex-col items-center gap-4 w-full max-w-[640px]">
-      <CharacterRoster
-        entries={rosterEntries}
-        selectedId={selectedCatchphrase}
-        onSelect={handleSelect}
-        variant="onboarding"
-        testIdPrefix="onboarding"
-      />
-
-      <p className="onboarding-desc !mt-0 !mb-0">
-        You can customize your character later.
-      </p>
-
-      {/* ── Next button ── */}
-      <button
-        className="onboarding-confirm-btn w-full max-w-[320px]"
-        onClick={() => handleOnboardingNext()}
-        type="button"
-      >
-        Next
-      </button>
-
-      {/* ── Restore from backup link ── */}
-      <button
-        type="button"
-        onClick={() => setShowImport(true)}
-        className="bg-transparent border-none text-white/40 text-xs cursor-pointer underline py-1"
-      >
-        {t("onboarding.restoreFromBackup")}
-      </button>
+    <div className="ob-identity">
+      {/* Selected character info — floats above the roster */}
+      <div className="ob-identity-info">
+        <div className="ob-identity-name">{selected?.name ?? ""}</div>
+      </div>
+
+      {/* ── Roster bar ── */}
+      <div className="ob-identity-roster">
+        {entries.map((entry) => {
+          const isSelected = selectedId === entry.catchphrase;
+          return (
+            <button
+              key={entry.catchphrase}
+              type="button"
+              className={`ob-identity-card ${isSelected ? "ob-identity-card--active" : ""}`}
+              onClick={() => handleSelect(entry)}
+              data-testid={`onboarding-preset-${entry.catchphrase}`}
+            >
+              <div
+                className={`ob-identity-card-frame ${isSelected ? "ob-identity-card-frame--active" : ""}`}
+                style={{ clipPath: SLANT_CLIP }}
+              >
+                <div
+                  className="ob-identity-card-inner"
+                  style={{ clipPath: SLANT_CLIP }}
+                >
+                  {isSelected && (
+                    <div
+                      className="pointer-events-none absolute -inset-3 bg-yellow-300/15 blur-xl"
+                      style={{ clipPath: SLANT_CLIP }}
+                    />
+                  )}
+                  <img
+                    src={getVrmPreviewUrl(entry.avatarIndex)}
+                    alt={entry.name}
+                    draggable={false}
+                    className={`ob-identity-card-img ${isSelected ? "ob-identity-card-img--active" : ""}`}
+                  />
+                  <div className="ob-identity-card-label">
+                    <div
+                      className={`ob-identity-card-name ${isSelected ? "ob-identity-card-name--active" : ""}`}
+                      style={{ clipPath: INSET_CLIP }}
+                    >
+                      {entry.name}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </button>
+          );
+        })}
+      </div>
+
+      {/* ── Actions row ── */}
+      <div className="ob-identity-actions">
+        <button
+          className="onboarding-confirm-btn"
+          onClick={() => handleOnboardingNext()}
+          type="button"
+        >
+          Continue
+        </button>
+        <button
+          type="button"
+          onClick={() => setShowImport(true)}
+          className="ob-identity-restore"
+        >
+          {t("onboarding.restoreFromBackup")}
+        </button>
+      </div>
     </div>
   );
 }

package/src/styles/onboarding-game.css

@@ -31,8 +31,9 @@
 .onboarding-bg-overlay {
   position: absolute;
   inset: 0;
-  background: rgba(8, 10, 16, 0.58);
+  background: none;
   z-index: 1;
+  pointer-events: none;
 }
 @keyframes onboarding-bg-drift {
   0% {
@@ -719,6 +720,212 @@
   letter-spacing: 0.05em;
 }
 
+/* === IDENTITY STEP — Overwatch-style bottom character select === */
+
+/* Full-screen overlay container for identity step — no glass panel */
+.ob-identity-overlay {
+  flex: 1;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  padding-bottom: 0;
+  pointer-events: auto;
+}
+
+/* Root identity layout — stacks info, roster, actions at the bottom */
+.ob-identity {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  animation: onboarding-content-fade-in 0.6s ease both;
+}
+
+/* Selected character info */
+.ob-identity-info {
+  text-align: center;
+  animation: onboarding-content-fade-in 0.5s ease 0.1s both;
+}
+
+.ob-identity-name {
+  font-size: 28px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: rgba(240, 238, 250, 0.95);
+  text-shadow:
+    0 0 30px rgba(240, 185, 11, 0.3),
+    0 2px 12px rgba(3, 5, 10, 0.65);
+  transition: all 0.3s ease;
+}
+
+.ob-identity-catchphrase {
+  font-size: 14px;
+  font-style: italic;
+  color: rgba(240, 185, 11, 0.7);
+  letter-spacing: 0.05em;
+  margin-top: 2px;
+  text-shadow: 0 2px 10px rgba(3, 5, 10, 0.55);
+}
+
+.ob-identity-hint {
+  font-size: 12px;
+  color: rgba(240, 238, 250, 0.45);
+  margin-top: 8px;
+  letter-spacing: 0.04em;
+}
+
+/* ── Roster bar — horizontal row pinned to bottom ── */
+.ob-identity-roster {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  gap: 0;
+  width: 100%;
+  max-width: 900px;
+  padding: 0 2rem;
+  animation: ob-roster-slide-up 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s both;
+}
+
+@keyframes ob-roster-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(40px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Individual character card */
+.ob-identity-card {
+  position: relative;
+  flex: 1 1 0;
+  max-width: 110px;
+  min-width: 0;
+  text-align: center;
+  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  cursor: pointer;
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0 -4px;
+  opacity: 0.5;
+  transform: translateY(12px);
+  filter: brightness(0.7);
+}
+
+.ob-identity-card:hover {
+  opacity: 0.85;
+  transform: translateY(4px);
+  filter: brightness(0.9);
+  z-index: 5;
+}
+
+.ob-identity-card--active {
+  opacity: 1;
+  z-index: 10;
+  transform: translateY(-8px);
+  filter: brightness(1);
+}
+
+.ob-identity-card--active:hover {
+  transform: translateY(-8px);
+  filter: brightness(1);
+}
+
+/* Frame border */
+.ob-identity-card-frame {
+  position: relative;
+  aspect-ratio: 14 / 18;
+  width: 100%;
+  padding: 2px;
+  transition: all 0.25s;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.ob-identity-card-frame--active {
+  background: linear-gradient(180deg, rgba(240, 185, 11, 0.9), rgba(240, 185, 11, 0.5));
+  box-shadow:
+    0 0 24px rgba(240, 185, 11, 0.35),
+    0 4px 16px rgba(0, 0, 0, 0.3);
+}
+
+/* Inner image container */
+.ob-identity-card-inner {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  background: rgba(10, 14, 20, 0.5);
+}
+
+.ob-identity-card-img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  object-position: center top;
+  transition: transform 0.25s ease-out;
+}
+
+.ob-identity-card-img--active {
+  transform: scale(1.06);
+}
+
+/* Name label at bottom of card */
+.ob-identity-card-label {
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0;
+}
+
+.ob-identity-card-name {
+  padding: 3px 6px;
+  font-size: clamp(8px, 1.2vw, 11px);
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  color: rgba(255, 255, 255, 0.8);
+  background: rgba(0, 0, 0, 0.55);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+}
+
+.ob-identity-card-name--active {
+  background: rgba(0, 0, 0, 0.75);
+  color: rgba(240, 185, 11, 0.95);
+  box-shadow: inset 0 1px 0 rgba(240, 185, 11, 0.15);
+}
+
+/* ── Actions row ── */
+.ob-identity-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding-bottom: 24px;
+  animation: onboarding-content-fade-in 0.5s ease 0.3s both;
+}
+
+.ob-identity-restore {
+  background: transparent;
+  border: none;
+  color: rgba(240, 238, 250, 0.35);
+  font-size: 11px;
+  cursor: pointer;
+  text-decoration: underline;
+  font-family: inherit;
+  padding: 4px 8px;
+  transition: color 0.3s;
+}
+
+.ob-identity-restore:hover {
+  color: rgba(240, 238, 250, 0.65);
+}
+
 /* === RESPONSIVE === */
 @media (max-width: 768px) {
   .onboarding-ui-overlay {
@@ -748,4 +955,22 @@
   .onboarding-right {
     padding: 16px;
   }
+
+  /* Identity bottom bar responsive */
+  .ob-identity-roster {
+    padding: 0 0.5rem;
+    max-width: 100%;
+  }
+
+  .ob-identity-card {
+    max-width: 80px;
+  }
+
+  .ob-identity-name {
+    font-size: 20px;
+  }
+
+  .ob-identity-actions {
+    padding-bottom: 16px;
+  }
 }