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

package/.turbo/turbo-build.log

@@ -2,4 +2,3 @@ $ bun run build:dist
 $ test -f ../ui/dist/index.d.ts || (cd ../ui && bun run build) && rimraf dist && tsc -p tsconfig.build.json && node ../../scripts/copy-package-assets.mjs packages/app-core src/styles src/i18n/locales && node ../../scripts/prepare-package-dist.mjs packages/app-core
 error: Script not found "build"
 error: script "build:dist" exited with code 1
-error: script "build" exited with code 1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elizaos/app-core",
-  "version": "2.0.0-alpha.69",
+  "version": "2.0.0-alpha.70",
   "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.69",
-    "@elizaos/ui": "2.0.0-alpha.69",
+    "@elizaos/autonomous": "2.0.0-alpha.70",
+    "@elizaos/ui": "2.0.0-alpha.70",
     "@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": "774937c9cbefd3d95fc181ca40295bb4fd5a7d3b"
+  "gitHead": "db049debacc33857bcea596057f1284568a061ff"
 }

package/src/api/client.ts

@@ -2087,6 +2087,10 @@ export class MiladyClient {
     }
   }
 
+  getBaseUrl(): string {
+    return this.baseUrl;
+  }
+
   setBaseUrl(baseUrl: string | null): void {
     const normalized = baseUrl?.trim().replace(/\/+$/, "") || "";
     this._explicitBase = normalized.length > 0;
@@ -5519,6 +5523,133 @@ export class MiladyClient {
       body: JSON.stringify({ settings }),
     });
   }
+
+  // ── Direct Eliza Cloud Auth (no local backend required) ─────────────
+
+  /**
+   * Initiate a direct login to Eliza Cloud without going through a local agent.
+   * Used in sandbox mode when no local backend exists yet.
+   */
+  async cloudLoginDirect(
+    cloudApiBase: string,
+  ): Promise<{ ok: boolean; browserUrl?: string; sessionId?: string; error?: string }> {
+    const res = await fetch(`${cloudApiBase}/api/v1/auth/login`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+    });
+    if (!res.ok) {
+      return { ok: false, error: `Login failed (${res.status})` };
+    }
+    return res.json();
+  }
+
+  /**
+   * Poll a direct Eliza Cloud login session for authentication status.
+   */
+  async cloudLoginPollDirect(
+    cloudApiBase: string,
+    sessionId: string,
+  ): Promise<{
+    status: "pending" | "authenticated" | "expired" | "error";
+    token?: string;
+    userId?: string;
+    error?: string;
+  }> {
+    const res = await fetch(
+      `${cloudApiBase}/api/v1/auth/login/status?sessionId=${encodeURIComponent(sessionId)}`,
+    );
+    if (!res.ok) {
+      return { status: "error", error: `Poll failed (${res.status})` };
+    }
+    return res.json();
+  }
+
+  // ── Eliza Cloud Sandbox Provisioning ───────────────────────────────
+
+  /**
+   * Create a sandbox agent on Eliza Cloud and provision it.
+   * Returns the bridge URL when provisioning completes.
+   *
+   * Flow:
+   *   1. POST /api/v1/milady/agents — create agent record
+   *   2. POST /api/v1/milady/agents/{id}/provision — start async provisioning
+   *   3. Poll GET /api/v1/jobs/{jobId} until completed
+   *   4. Return bridgeUrl from job result
+   */
+  async provisionCloudSandbox(options: {
+    cloudApiBase: string;
+    authToken: string;
+    name: string;
+    bio?: string[];
+    onProgress?: (status: string, detail?: string) => void;
+  }): Promise<{ bridgeUrl: string; agentId: string }> {
+    const { cloudApiBase, authToken, name, bio, onProgress } = options;
+    const headers: Record<string, string> = {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${authToken}`,
+    };
+
+    onProgress?.("creating", "Creating agent...");
+
+    // Step 1: Create agent
+    const createRes = await fetch(`${cloudApiBase}/api/v1/milady/agents`, {
+      method: "POST",
+      headers,
+      body: JSON.stringify({ name, bio }),
+    });
+    if (!createRes.ok) {
+      const err = await createRes.text().catch(() => "Unknown error");
+      throw new Error(`Failed to create cloud agent: ${err}`);
+    }
+    const createData = (await createRes.json()) as { id: string };
+    const agentId = createData.id;
+
+    onProgress?.("provisioning", "Provisioning sandbox environment...");
+
+    // Step 2: Start provisioning
+    const provisionRes = await fetch(
+      `${cloudApiBase}/api/v1/milady/agents/${agentId}/provision`,
+      { method: "POST", headers },
+    );
+    if (!provisionRes.ok) {
+      const err = await provisionRes.text().catch(() => "Unknown error");
+      throw new Error(`Failed to start provisioning: ${err}`);
+    }
+    const provisionData = (await provisionRes.json()) as { jobId: string };
+    const jobId = provisionData.jobId;
+
+    // Step 3: Poll job status
+    const deadline = Date.now() + 120_000; // 2 minute timeout
+    while (Date.now() < deadline) {
+      await new Promise((r) => setTimeout(r, 2000));
+
+      const jobRes = await fetch(`${cloudApiBase}/api/v1/jobs/${jobId}`, {
+        headers,
+      });
+      if (!jobRes.ok) continue;
+
+      const jobData = (await jobRes.json()) as {
+        status: string;
+        result?: { bridgeUrl?: string };
+        error?: string;
+      };
+
+      if (jobData.status === "completed" && jobData.result?.bridgeUrl) {
+        onProgress?.("ready", "Sandbox ready!");
+        return { bridgeUrl: jobData.result.bridgeUrl, agentId };
+      }
+
+      if (jobData.status === "failed") {
+        throw new Error(
+          `Provisioning failed: ${jobData.error ?? "Unknown error"}`,
+        );
+      }
+
+      onProgress?.("provisioning", `Status: ${jobData.status}...`);
+    }
+
+    throw new Error("Provisioning timed out after 2 minutes");
+  }
 }
 
 // Singleton

package/src/components/CharacterRoster.tsx

@@ -90,7 +90,7 @@ export function CharacterRoster({
 
   return (
     <div
-      className="flex flex-wrap items-start justify-center gap-y-1"
+      className="ce-roster"
       data-testid={`${testIdPrefix}-roster-grid`}
     >
       {entries.map((entry) => {
@@ -100,26 +100,16 @@ export function CharacterRoster({
           <button
             key={entry.id}
             type="button"
-            className={`group relative -mx-3 min-w-0 w-[9.75rem] text-center transition-all duration-300 ease-out ${
-              isSelected
-                ? "z-100 scale-[1.00] opacity-100"
-                : "scale-[1.00] opacity-70 hover:scale-[1.00] hover:opacity-100"
-            }`}
+            className={`ce-roster-card ${isSelected ? "ce-roster-card--active" : ""}`}
             onClick={() => onSelect(entry)}
             data-testid={`${testIdPrefix}-preset-${entry.id}`}
           >
             <div
-              className={`relative h-[10rem] w-full p-[2px] transition-all duration-300 ${
-                isSelected
-                  ? "bg-yellow-400 shadow-[0_0_28px_rgba(250,204,21,0.32)]"
-                  : useWhiteBorders
-                    ? "bg-white/10 hover:bg-white/35"
-                    : "bg-border/20 hover:bg-border/60"
-              }`}
+              className={`ce-roster-card-frame ${isSelected ? "ce-roster-card-frame--active" : ""}`}
               style={{ clipPath: SLANT_CLIP }}
             >
               <div
-                className="relative h-full w-full overflow-hidden"
+                className="ce-roster-card-inner"
                 style={{ clipPath: SLANT_CLIP }}
               >
                 {isSelected && (
@@ -132,19 +122,11 @@ export function CharacterRoster({
                   src={getVrmPreviewUrl(entry.avatarIndex)}
                   alt={entry.name}
                   draggable={false}
-                  className={`h-full w-full object-cover transition-transform duration-300 ease-out ${
-                    isSelected
-                      ? "scale-[1.04]"
-                      : "scale-100 group-hover:scale-[1.02]"
-                  }`}
+                  className={`ce-roster-card-img ${isSelected ? "ce-roster-card-img--active" : ""}`}
                 />
-                <div className="absolute inset-x-0 bottom-0">
+                <div className="ce-roster-card-label">
                   <div
-                    className={`px-2 py-1 text-sm font-semibold text-white transition-all ${
-                      isSelected
-                        ? "bg-black/78 shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]"
-                        : "bg-black/62"
-                    }`}
+                    className={`ce-roster-card-name ${isSelected ? "ce-roster-card-name--active" : ""}`}
                     style={{ clipPath: INSET_CLIP }}
                   >
                     {entry.name}

package/src/components/CloudSourceControls.tsx

@@ -1,5 +1,4 @@
 import { Button } from "@elizaos/ui";
-import { useBranding } from "../config/branding";
 import { useApp } from "../state";
 
 export type CloudSourceMode = "cloud" | "own-key";
@@ -7,7 +6,7 @@ export type CloudSourceMode = "cloud" | "own-key";
 export function CloudSourceModeToggle({
   mode,
   onChange,
-  cloudLabel,
+  cloudLabel = "Eliza Cloud",
   ownKeyLabel = "Own API Key",
 }: {
   mode: CloudSourceMode;
@@ -15,8 +14,7 @@ export function CloudSourceModeToggle({
   cloudLabel?: string;
   ownKeyLabel?: string;
 }) {
-  const branding = useBranding();
-  const resolvedCloudLabel = cloudLabel ?? branding.cloudName;
+  const resolvedCloudLabel = cloudLabel;
   return (
     <div className="inline-flex overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--card)] shadow-sm">
       <Button
@@ -59,9 +57,8 @@ export function CloudConnectionStatus({
   disconnectedText: string;
 }) {
   const { t } = useApp();
-  const branding = useBranding();
   const resolvedConnectedText =
-    connectedText ?? `Connected to ${branding.cloudName}`;
+    connectedText ?? "Connected to Eliza Cloud";
   return (
     <div className="flex items-center justify-between py-2.5 px-3 border border-[var(--border)] bg-[var(--bg-muted)]">
       {connected ? (

package/src/components/CompanionSceneHost.tsx

@@ -415,6 +415,19 @@ function CompanionSceneSurface({
     });
   }, [tab]);
 
+  /* ── Preload all VRM files into browser cache for instant character swaps ── */
+  const preloadedRef = useRef(false);
+  useEffect(() => {
+    if (preloadedRef.current || preloadAvatars.length === 0) return;
+    preloadedRef.current = true;
+    for (const entry of preloadAvatars) {
+      // Fire-and-forget fetch to warm browser cache; low priority.
+      void fetch(entry.vrmPath, { priority: "low" } as RequestInit).catch(
+        () => {},
+      );
+    }
+  }, [preloadAvatars]);
+
   return (
     <div
       ref={rootRef}

package/src/components/ConfigPageView.tsx

@@ -17,7 +17,6 @@ import {
   defaultRegistry,
   type JsonSchemaObject,
 } from "../config";
-import { DEFAULT_BRANDING, useBranding } from "../config/branding";
 import { useApp } from "../state";
 import type { ConfigUiHint } from "../types";
 import {
@@ -64,13 +63,12 @@ function CloudRpcStatus({
   onLogin,
 }: CloudRpcStatusProps) {
   const { t, setState, setTab } = useApp();
-  const branding = useBranding();
   if (connected) {
     return (
       <div className="flex items-center gap-2 text-xs">
         <span className="inline-block w-2 h-2 rounded-full bg-[var(--ok,#16a34a)]" />
         <span className="font-semibold">
-          {`Connected to ${branding.cloudName}`}
+          Connected to Eliza Cloud
         </span>
         {credits !== null && (
           <span className="text-[var(--muted)] ml-auto">
@@ -107,7 +105,7 @@ function CloudRpcStatus({
       <div className="flex items-center gap-2 text-xs">
         <span className="inline-block w-2 h-2 rounded-full bg-[var(--muted)]" />
         <span className="text-[var(--muted)]">
-          {`Requires ${branding.cloudName}`}
+          Requires Eliza Cloud
         </span>
       </div>
       <button
@@ -197,7 +195,6 @@ function RpcConfigSection<T extends string>({
   cloud,
   containerClassName,
 }: RpcSectionProps<T>) {
-  const branding = useBranding();
   const rpcConfig = buildRpcRendererConfig(
     selectedProvider,
     providerConfigs,
@@ -217,7 +214,7 @@ function RpcConfigSection<T extends string>({
         (key: string) => {
           // hack to get t function without breaking hook rules
           return key === "elizaclouddashboard.ElizaCloud"
-            ? branding.cloudName
+            ? "Eliza Cloud"
             : key;
         },
       )}
@@ -294,27 +291,27 @@ const CLOUD_SERVICE_DEFS: {
   {
     key: "inference",
     label: "Model Inference",
-    description: `Use ${DEFAULT_BRANDING.cloudName} for LLM calls. Turn off to use your own API keys (Anthropic, OpenAI, etc.)`,
+    description: `Use Eliza Cloud for LLM calls. Turn off to use your own API keys (Anthropic, OpenAI, etc.)`,
   },
   {
     key: "rpc",
     label: "Blockchain RPC",
-    description: `Use ${DEFAULT_BRANDING.cloudName} RPC endpoints for EVM, BSC, and Solana`,
+    description: `Use Eliza Cloud RPC endpoints for EVM, BSC, and Solana`,
   },
   {
     key: "media",
     label: "Media Generation",
-    description: `Use ${DEFAULT_BRANDING.cloudName} for image, video, audio, and vision`,
+    description: `Use Eliza Cloud for image, video, audio, and vision`,
   },
   {
     key: "tts",
     label: "Text-to-Speech",
-    description: `Use ${DEFAULT_BRANDING.cloudName} for TTS voice synthesis`,
+    description: `Use Eliza Cloud for TTS voice synthesis`,
   },
   {
     key: "embeddings",
     label: "Embeddings",
-    description: `Use ${DEFAULT_BRANDING.cloudName} for text embedding generation`,
+    description: `Use Eliza Cloud for text embedding generation`,
   },
 ];
 

package/src/components/VrmStage.tsx

@@ -83,6 +83,8 @@ export const VrmStage = memo(function VrmStage({
   const [loaderFading, setLoaderFading] = useState(false);
   const [loaderHidden, setLoaderHidden] = useState(false);
   const loaderFadingStartedRef = useRef(false);
+  /** After the first successful VRM load, suppress the loader on subsequent swaps. */
+  const hasLoadedFirstVrmRef = useRef(false);
 
   const chatAvatarVoice = useChatAvatarVoiceState();
 
@@ -142,6 +144,7 @@ export const VrmStage = memo(function VrmStage({
       if (state.vrmLoaded) {
         setVrmLoaded(true);
         setShowVrmFallback(false);
+        hasLoadedFirstVrmRef.current = true;
         if (!loaderFadingStartedRef.current) {
           loaderFadingStartedRef.current = true;
           setLoaderFading(true);
@@ -173,13 +176,17 @@ export const VrmStage = memo(function VrmStage({
     if (vrmPath === prevVrmPathRef.current && hasMountedRef.current) return;
     prevVrmPathRef.current = vrmPath;
     if (hasMountedRef.current) {
-      // Avatar changed — reset loading state but NOT the world
-      setVrmLoaded(false);
-      setShowVrmFallback(false);
-      setLoadingProgress(undefined);
-      setLoaderFading(false);
-      setLoaderHidden(false);
-      loaderFadingStartedRef.current = false;
+      // Avatar changed — reset loading state but NOT the world.
+      // After the first successful VRM load, keep the loader hidden so
+      // subsequent character swaps feel instant (no flash of loading bar).
+      if (!hasLoadedFirstVrmRef.current) {
+        setVrmLoaded(false);
+        setShowVrmFallback(false);
+        setLoadingProgress(undefined);
+        setLoaderFading(false);
+        setLoaderHidden(false);
+        loaderFadingStartedRef.current = false;
+      }
     }
     hasMountedRef.current = true;
   }, [vrmPath]);

package/src/components/onboarding/ConnectionStep.tsx

@@ -4,11 +4,12 @@ import type {
   ProviderOption,
 } from "@elizaos/app-core/api";
 import { client } from "@elizaos/app-core/api";
+import { useBranding } from "@elizaos/app-core/config";
 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 { useState } from "react";
+import { useEffect, useState } from "react";
 
 function formatRequestError(err: unknown): string {
   if (err instanceof Error) {
@@ -46,6 +47,8 @@ export function ConnectionStep() {
     t,
   } = useApp();
 
+  const branding = useBranding();
+
   const [openaiOAuthStarted, setOpenaiOAuthStarted] = useState(false);
   const [openaiCallbackUrl, setOpenaiCallbackUrl] = useState("");
   const [openaiConnected, setOpenaiConnected] = useState(false);
@@ -148,7 +151,22 @@ export function ConnectionStep() {
     setState("onboardingOpenRouterModel", modelId);
   };
 
-  const providers = onboardingOptions?.providers ?? [];
+  const catalogProviders = onboardingOptions?.providers ?? [];
+  // Merge custom providers from branding (app-injected) with the catalog.
+  // Custom providers are appended; duplicates (by id) are skipped.
+  const customProviders = branding.customProviders ?? [];
+  const catalogIds = new Set(catalogProviders.map((p: ProviderOption) => p.id));
+  const providers = [
+    ...catalogProviders,
+    ...customProviders.filter((cp) => !catalogIds.has(cp.id as never)),
+  ] as ProviderOption[];
+  // Build a map of custom provider logos for getProviderLogo lookups.
+  const customLogoMap = new Map(
+    customProviders
+      .filter((cp) => cp.logoDark || cp.logoLight)
+      .map((cp) => [cp.id, { logoDark: cp.logoDark, logoLight: cp.logoLight }]),
+  );
+  const getCustomLogo = (id: string) => customLogoMap.get(id);
   const elizaCloudReady =
     elizaCloudConnected ||
     (onboardingRunMode === "cloud" &&
@@ -275,6 +293,18 @@ 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.
+  useEffect(() => {
+    if (isNative && !onboardingRunMode) {
+      setState("onboardingRunMode", "cloud");
+      setState("onboardingCloudProvider", "elizacloud");
+      setState("onboardingProvider", "");
+      setState("onboardingApiKey", "");
+      setState("onboardingPrimaryModel", "");
+    }
+  }, [isNative, onboardingRunMode, setState]);
+
   if (!showProviderSelection) {
     if (!onboardingRunMode) {
       return (
@@ -730,7 +760,7 @@ export function ConnectionStep() {
                 onClick={() => handleProviderSelect(p.id)}
               >
                 <img
-                  src={getProviderLogo(p.id, false)}
+                  src={getProviderLogo(p.id, false, getCustomLogo(p.id))}
                   alt={display.name}
                   className="onboarding-provider-icon"
                 />
@@ -795,7 +825,7 @@ export function ConnectionStep() {
         >
           {selectedProvider && (
             <img
-              src={getProviderLogo(selectedProvider.id, false)}
+              src={getProviderLogo(selectedProvider.id, false, getCustomLogo(selectedProvider.id))}
               alt={selectedDisplay.name}
               className="onboarding-provider-icon"
               style={{ width: "1.5rem", height: "1.5rem" }}

package/src/config/branding.ts

@@ -1,10 +1,30 @@
 import { createContext, useContext } from "react";
 
+/**
+ * Custom provider that apps can inject into the onboarding flow.
+ * Uses `string` for id/family so apps aren't restricted to the built-in union.
+ */
+export interface CustomProviderOption {
+  id: string;
+  name: string;
+  envKey: string | null;
+  pluginName: string;
+  keyPrefix: string | null;
+  description: string;
+  family: string;
+  authMode: "api-key" | "cloud" | "credentials" | "local" | "subscription";
+  group: "cloud" | "local" | "subscription";
+  order: number;
+  recommended?: boolean;
+  /** Dark-mode logo path (e.g. "/logos/my-provider.png") */
+  logoDark?: string;
+  /** Light-mode logo path */
+  logoLight?: string;
+}
+
 export interface BrandingConfig {
   /** Product name shown in UI ("Eliza" | "Milady") */
   appName: string;
-  /** Cloud service name ("Eliza Cloud" | "Milady Cloud") */
-  cloudName: string;
   /** GitHub org ("elizaos" | "milady-ai") */
   orgName: string;
   /** GitHub repo name ("eliza" | "milady") */
@@ -21,11 +41,12 @@ export interface BrandingConfig {
   fileExtension: string;
   /** npm package scope ("elizaos" | "miladyai") */
   packageScope: string;
+  /** Custom providers injected by the app into the onboarding flow */
+  customProviders?: CustomProviderOption[];
 }
 
 export const DEFAULT_BRANDING: BrandingConfig = {
   appName: "Eliza",
-  cloudName: "Eliza Cloud",
   orgName: "elizaos",
   repoName: "eliza",
   docsUrl: "https://docs.elizaos.ai",