@elizaos/app-core 2.0.0-alpha.70 → 2.0.0-alpha.72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elizaos/app-core",
-  "version": "2.0.0-alpha.70",
+  "version": "2.0.0-alpha.72",
   "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.70",
-    "@elizaos/ui": "2.0.0-alpha.70",
+    "@elizaos/autonomous": "workspace:*",
+    "@elizaos/ui": "workspace:*",
     "@sparkjsdev/spark": "^0.1.10",
     "lucide-react": "^0.575.0",
     "three": "^0.182.0",
@@ -86,6 +86,5 @@
     "tailwindcss": "^4.1.18",
     "typescript": "^5.9.3",
     "vitest": "^4.0.18"
-  },
-  "gitHead": "db049debacc33857bcea596057f1284568a061ff"
+  }
 }

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/api/client.ts

@@ -5652,5 +5652,8 @@ export class MiladyClient {
   }
 }
 
+/** @deprecated Use MiladyClient directly. */
+export type ElizaClient = MiladyClient;
+
 // Singleton
 export const client = new MiladyClient();

package/src/bridge/electrobun-rpc.ts

@@ -47,6 +47,7 @@ export interface DetectedProvider {
   apiKey?: string;
   authMode?: string;
   cliInstalled: boolean;
+  status?: string;
 }
 
 export async function scanProviderCredentials(): Promise<DetectedProvider[]> {

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/FlaminaGuide.tsx

@@ -177,7 +177,7 @@ export function DeferredSetupChecklist({
       </div>
 
       <div className="space-y-2">
-        {onboardingDeferredTasks.map((task) => (
+        {(onboardingDeferredTasks as FlaminaGuideTopic[]).map((task) => (
           <div
             key={task}
             className="flex flex-col gap-2 rounded-xl border border-border/50 bg-bg/50 px-3 py-3 md:flex-row md:items-center md:justify-between"
@@ -199,7 +199,7 @@ export function DeferredSetupChecklist({
               <button
                 type="button"
                 className="rounded-full border border-border/60 px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.12em] text-muted transition-colors hover:text-txt"
-                onClick={() => markDone(task)}
+                onClick={() => markDone(task as FlaminaGuideTopic)}
               >
                 Done
               </button>

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/avatar/VrmEngine.ts

@@ -838,6 +838,9 @@ export class VrmEngine {
     if (!this.scene || !this.renderer) return;
 
     const { SparkRenderer } = await this.loadSparkModule();
+    // Re-check after async import — the engine may have been disposed during
+    // the await (e.g. React StrictMode double-mount).
+    if (!this.scene || !this.renderer) return;
     const sparkRenderer = new SparkRenderer({
       renderer: this.renderer as THREE.WebGLRenderer,
       apertureAngle: 0.0,
@@ -1911,7 +1914,11 @@ export class VrmEngine {
     }
 
     await this.ensureSparkRenderer();
+    // Re-check after async — the engine may have been disposed during the
+    // await (e.g. React StrictMode double-mount or rapid navigation).
+    if (!this.scene || this.loadingAborted || requestId !== this.worldLoadRequestId) return;
     const spark = await this.loadSparkModule();
+    if (!this.scene || this.loadingAborted || requestId !== this.worldLoadRequestId) return;
     const { SplatMesh } = spark;
     let worldAnchor = new THREE.Vector3(0, 0, 0);
     let worldRevealRadius = 1;

package/src/components/avatar/VrmViewer.tsx

@@ -5,8 +5,8 @@
  * the `mouthOpen` prop. Sized to fill its parent container.
  */
 
-import { resolveAppAssetUrl } from "@elizaos/app-core/utils";
 import { useEffect, useEffectEvent, useRef } from "react";
+import { getVrmUrl } from "../../state/vrm";
 import {
   type CameraProfile,
   type InteractionMode,
@@ -15,7 +15,7 @@ import {
   type VrmEngineState,
 } from "./VrmEngine";
 
-const DEFAULT_VRM_PATH = resolveAppAssetUrl("vrms/eliza-1.vrm.gz");
+const DEFAULT_VRM_PATH = getVrmUrl(1);
 
 export type VrmViewerProps = {
   /** When false the loaded scene stays resident but the render loop is paused */

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 ?? [];
@@ -293,17 +300,19 @@ export function ConnectionStep() {
     }
   };
 
-  // On native (mobile), force sandbox mode — skip straight to Eliza Cloud login.
-  // Mobile cannot run a local backend, so cloud is the only option.
+  // On native (mobile) or when branding requires cloud-only, force sandbox mode
+  // — skip straight to Eliza Cloud login. These platforms cannot run a local
+  // backend, so cloud is the only option.
+  const forceCloud = isNative || branding.cloudOnly;
   useEffect(() => {
-    if (isNative && !onboardingRunMode) {
+    if (forceCloud && !onboardingRunMode) {
       setState("onboardingRunMode", "cloud");
       setState("onboardingCloudProvider", "elizacloud");
       setState("onboardingProvider", "");
       setState("onboardingApiKey", "");
       setState("onboardingPrimaryModel", "");
     }
-  }, [isNative, onboardingRunMode, setState]);
+  }, [forceCloud, onboardingRunMode, setState]);
 
   if (!showProviderSelection) {
     if (!onboardingRunMode) {
@@ -319,7 +328,7 @@ export function ConnectionStep() {
             {t("onboarding.hostingQuestion")}
           </div>
           <div className="onboarding-provider-grid">
-            {!isNative && (
+            {!isNative && !branding.cloudOnly && (
               <button
                 type="button"
                 className="onboarding-provider-card onboarding-provider-card--recommended"

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/components/onboarding/OnboardingStepNav.tsx

@@ -6,11 +6,14 @@ export function OnboardingStepNav() {
   const branding = useBranding();
 
   const isEliza = branding.appName === "Eliza";
+  const isCloudOnly = !!branding.cloudOnly;
   const activeSteps = isEliza
     ? ONBOARDING_STEPS.filter(
         (s) => s.id === "connection" || s.id === "activate",
       )
-    : ONBOARDING_STEPS;
+    : isCloudOnly
+      ? ONBOARDING_STEPS.filter((s) => s.id !== "wakeUp")
+      : ONBOARDING_STEPS;
 
   const currentIndex = activeSteps.findIndex((s) => s.id === onboardingStep);
 

package/src/config/branding.ts

@@ -43,6 +43,8 @@ export interface BrandingConfig {
   packageScope: string;
   /** Custom providers injected by the app into the onboarding flow */
   customProviders?: CustomProviderOption[];
+  /** When true, the app requires Eliza Cloud — local backend mode is disabled. */
+  cloudOnly?: boolean;
 }
 
 export const DEFAULT_BRANDING: BrandingConfig = {

package/src/hooks/useMiladyBar.ts

@@ -18,10 +18,10 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   type DetectedProvider,
   invokeDesktopBridgeRequest,
-  scanAndValidateProviderCredentials,
   scanProviderCredentials,
   subscribeDesktopBridgeEvent,
 } from "../bridge/electrobun-rpc";
+import type { Tab } from "../navigation";
 import { isDesktopPlatform } from "../platform";
 import { useApp } from "../state";
 
@@ -423,8 +423,8 @@ export function useMiladyBar() {
   // Validated scan — for background refresh and manual refresh
   const runValidatedScan = useCallback(() => {
     if (!isDesktopPlatform()) return;
-    scanAndValidateProviderCredentials()
-      .then((results) => {
+    scanProviderCredentials()
+      .then((results: DetectedProvider[]) => {
         setScannedProviders(results);
         setLastRefreshAt(Date.now());
         setNow(Date.now());
@@ -514,7 +514,7 @@ export function useMiladyBar() {
         }
         if (itemId.startsWith("navigate-")) {
           const target = itemId.replace("navigate-", "");
-          setTab?.(target);
+          setTab?.(target as Tab);
           void invokeDesktopBridgeRequest({
             rpcMethod: "desktopShowWindow",
             ipcChannel: "desktop:showWindow",