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

package/components/VoiceConfigView.d.ts

@@ -0,0 +1,11 @@
+/**
+ * VoiceConfigView — TTS/STT provider selection and configuration.
+ *
+ * Similar to MediaSettingsSection pattern:
+ *   - Provider selection (ElevenLabs, Edge TTS, etc.)
+ *   - API key inputs where needed
+ *   - Voice preset selection
+ *   - Test functionality
+ */
+export declare function VoiceConfigView(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=VoiceConfigView.d.ts.map

package/components/VoiceConfigView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VoiceConfigView.d.ts","sourceRoot":"","sources":["../../src/components/VoiceConfigView.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AA+SH,wBAAgB,eAAe,4CA0W9B"}

package/components/VoiceConfigView.js

@@ -0,0 +1,329 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * VoiceConfigView — TTS/STT provider selection and configuration.
+ *
+ * Similar to MediaSettingsSection pattern:
+ *   - Provider selection (ElevenLabs, Edge TTS, etc.)
+ *   - API key inputs where needed
+ *   - Voice preset selection
+ *   - Test functionality
+ */
+import { Button, Input } from "@elizaos/ui";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { client, } from "../api";
+import { getSwabblePlugin } from "../bridge/native-plugins";
+import { dispatchWindowEvent, VOICE_CONFIG_UPDATED_EVENT } from "../events";
+import { useTimeout } from "../hooks";
+import { useApp } from "../state";
+import { PREMADE_VOICES, sanitizeApiKey, VOICE_PROVIDERS } from "../voice";
+import { CloudConnectionStatus, CloudSourceModeToggle, } from "./CloudSourceControls";
+import { ConfigSaveFooter } from "./ConfigSaveFooter";
+const DEFAULT_ELEVEN_FAST_MODEL = "eleven_flash_v2_5";
+const MODEL_SIZES = [
+    { id: "tiny", hint: "(faster)" },
+    { id: "base", hint: "(recommended)" },
+    { id: "small", hint: "" },
+    { id: "medium", hint: "(accurate)" },
+    { id: "large", hint: "(accurate)" },
+];
+function WakeWordSection({ serverConfig, }) {
+    const { t } = useApp();
+    const [triggers, setTriggers] = useState(["eliza"]);
+    const [triggerInput, setTriggerInput] = useState("");
+    const [sensitivity, setSensitivity] = useState(0.45);
+    const [modelSize, setModelSize] = useState("base");
+    const [audioLevel, setAudioLevel] = useState(0);
+    const [enabled, setEnabled] = useState(false);
+    // Load initial state from Swabble on mount
+    useEffect(() => {
+        void (async () => {
+            try {
+                const swabble = getSwabblePlugin();
+                const [{ config }, { listening }] = await Promise.all([
+                    swabble.getConfig(),
+                    swabble.isListening(),
+                ]);
+                // Use plugin config if available, fall back to server-persisted config
+                const resolved = config ?? serverConfig ?? null;
+                if (resolved) {
+                    if (resolved.triggers?.length)
+                        setTriggers(resolved.triggers);
+                    if (resolved.minPostTriggerGap != null)
+                        setSensitivity(resolved.minPostTriggerGap);
+                    if (resolved.modelSize)
+                        setModelSize(resolved.modelSize);
+                }
+                setEnabled(listening);
+            }
+            catch {
+                // Plugin not available on this platform — silently ignore
+            }
+        })();
+    }, [serverConfig]);
+    // Subscribe to audio level events
+    useEffect(() => {
+        let handle = null;
+        void (async () => {
+            try {
+                handle = await getSwabblePlugin().addListener("audioLevel", (evt) => {
+                    setAudioLevel(evt.level);
+                });
+            }
+            catch {
+                // Not available
+            }
+        })();
+        return () => {
+            if (handle)
+                void handle.remove();
+        };
+    }, []);
+    const buildConfig = useCallback(() => ({
+        triggers,
+        minPostTriggerGap: sensitivity,
+        modelSize,
+    }), [triggers, sensitivity, modelSize]);
+    const handleTriggersChange = useCallback(async (next) => {
+        setTriggers(next);
+        try {
+            await getSwabblePlugin().updateConfig({ config: { triggers: next } });
+        }
+        catch {
+            // Ignore
+        }
+    }, []);
+    const addTrigger = useCallback((raw) => {
+        const val = raw.trim().toLowerCase().replace(/,/g, "");
+        if (!val || triggers.includes(val))
+            return;
+        void handleTriggersChange([...triggers, val]);
+    }, [triggers, handleTriggersChange]);
+    const removeTrigger = useCallback((t) => {
+        if (triggers.length <= 1)
+            return;
+        void handleTriggersChange(triggers.filter((x) => x !== t));
+    }, [triggers, handleTriggersChange]);
+    const handleSensitivityChange = useCallback(async (val) => {
+        setSensitivity(val);
+        try {
+            await getSwabblePlugin().updateConfig({
+                config: { minPostTriggerGap: val },
+            });
+        }
+        catch {
+            // Ignore
+        }
+    }, []);
+    const handleModelSizeChange = useCallback(async (size) => {
+        setModelSize(size);
+        try {
+            await getSwabblePlugin().updateConfig({ config: { modelSize: size } });
+        }
+        catch {
+            // Ignore
+        }
+    }, []);
+    const handleToggle = useCallback(async () => {
+        try {
+            if (enabled) {
+                await getSwabblePlugin().stop();
+                setEnabled(false);
+            }
+            else {
+                const result = await getSwabblePlugin().start({
+                    config: buildConfig(),
+                });
+                if (result.started)
+                    setEnabled(true);
+            }
+        }
+        catch {
+            // Ignore
+        }
+    }, [enabled, buildConfig]);
+    return (_jsxs("div", { className: "flex flex-col gap-3 pt-4 border-t border-[var(--border)]", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-xs font-semibold text-[var(--muted)]", children: t("voiceconfigview.WakeWord") }), _jsx("button", { type: "button", onClick: () => void handleToggle(), className: `relative inline-flex h-5 w-9 cursor-pointer items-center rounded-full transition-colors ${enabled ? "bg-[var(--accent)]" : "bg-[var(--border)]"}`, "aria-label": enabled ? "Disable wake word" : "Enable wake word", children: _jsx("span", { className: `inline-block h-3.5 w-3.5 rounded-full bg-white shadow transition-transform ${enabled ? "translate-x-4" : "translate-x-0.5"}` }) })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-xs font-semibold", children: t("voiceconfigview.Triggers") }), _jsxs("div", { className: "flex flex-wrap gap-1 p-1.5 border border-[var(--border)] bg-[var(--card)] min-h-[2rem]", children: [triggers.map((t) => (_jsxs("span", { className: "flex items-center gap-1 rounded-full border border-[var(--accent)] bg-[var(--accent)]/10 px-1.5 py-0.5 text-[10px] text-[var(--text)]", children: [t, triggers.length > 1 && (_jsx(Button, { variant: "ghost", size: "icon", className: "settings-compact-button settings-icon-button leading-none hover:bg-transparent hover:opacity-70 cursor-pointer h-4 w-4 ml-1", onClick: () => removeTrigger(t), "aria-label": `Remove trigger "${t}"`, children: "\u00D7" }))] }, t))), _jsx(Input, { type: "text", className: "flex-1 min-w-[80px] h-6 px-1 text-xs bg-transparent border-0 focus-visible:ring-0 shadow-none", placeholder: t("voiceconfigview.AddTrigger"), value: triggerInput, onChange: (e) => setTriggerInput(e.target.value), onKeyDown: (e) => {
+                                    if (e.key === "Enter" || e.key === ",") {
+                                        e.preventDefault();
+                                        addTrigger(triggerInput);
+                                        setTriggerInput("");
+                                    }
+                                } })] }), _jsx("div", { className: "text-[10px] text-[var(--muted)]", children: t("voiceconfigview.PressEnterOrComma") })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-xs font-semibold", children: t("voiceconfigview.WakeSensitivity") }), _jsxs("span", { className: "text-[10px] text-[var(--muted)]", children: [sensitivity.toFixed(2), "s"] })] }), _jsx("input", { type: "range", min: 0.1, max: 2.0, step: 0.05, value: sensitivity, className: "w-full", style: { accentColor: "var(--accent)" }, onChange: (e) => void handleSensitivityChange(parseFloat(e.target.value)) }), _jsx("div", { className: "text-[10px] text-[var(--muted)]", children: t("voiceconfigview.LowerMoreSensiti") })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-xs font-semibold", children: t("voiceconfigview.ModelSize") }), _jsx("div", { className: "flex gap-1.5", children: MODEL_SIZES.map((m) => {
+                            const active = modelSize === m.id;
+                            return (_jsxs(Button, { variant: active ? "default" : "outline", size: "sm", className: "flex-1 h-auto flex-col py-1.5", onClick: () => void handleModelSizeChange(m.id), children: [_jsx("div", { className: "font-semibold", children: m.id }), m.hint && (_jsx("div", { className: "text-[10px] opacity-70 mt-0.5", children: m.hint }))] }, m.id));
+                        }) })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-xs font-semibold", children: t("voiceconfigview.Microphone") }), _jsx("div", { className: "h-1.5 w-full bg-[var(--border)] overflow-hidden", children: _jsx("div", { className: "h-full bg-green-500 transition-all duration-75", style: { width: `${Math.min(audioLevel * 100, 100)}%` } }) })] })] }));
+}
+export function VoiceConfigView() {
+    const { setTimeout } = useTimeout();
+    const { t } = useApp();
+    const { elizaCloudConnected } = useApp();
+    const [voiceConfig, setVoiceConfig] = useState({});
+    const [swabbleServerConfig, setSwabbleServerConfig] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [saving, setSaving] = useState(false);
+    const [saveSuccess, setSaveSuccess] = useState(false);
+    const [saveError, setSaveError] = useState(null);
+    const [dirty, setDirty] = useState(false);
+    const [testing, setTesting] = useState(false);
+    const audioRef = useRef(null);
+    // Load config on mount
+    useEffect(() => {
+        void (async () => {
+            setLoading(true);
+            try {
+                const cfg = await client.getConfig();
+                const messages = cfg.messages;
+                const tts = messages?.tts;
+                if (tts) {
+                    setVoiceConfig(tts);
+                }
+                const swabble = messages?.swabble;
+                if (swabble) {
+                    setSwabbleServerConfig(swabble);
+                }
+            }
+            catch {
+                // Ignore errors
+            }
+            setLoading(false);
+        })();
+    }, []);
+    // Cleanup audio on unmount
+    useEffect(() => {
+        return () => {
+            if (audioRef.current) {
+                audioRef.current.pause();
+                audioRef.current = null;
+            }
+        };
+    }, []);
+    const currentProvider = voiceConfig.provider ?? "elevenlabs";
+    const currentMode = voiceConfig.mode ?? "own-key";
+    const providerInfo = VOICE_PROVIDERS.find((p) => p.id === currentProvider);
+    const isConfigured = currentMode === "cloud"
+        ? elizaCloudConnected
+        : currentProvider !== "elevenlabs"
+            ? true
+            : Boolean(voiceConfig.elevenlabs?.apiKey);
+    const handleProviderChange = useCallback((provider) => {
+        setVoiceConfig((prev) => ({ ...prev, provider }));
+        setDirty(true);
+    }, []);
+    const handleModeChange = useCallback((mode) => {
+        setVoiceConfig((prev) => ({ ...prev, mode }));
+        setDirty(true);
+    }, []);
+    const handleApiKeyChange = useCallback((apiKey) => {
+        setVoiceConfig((prev) => ({
+            ...prev,
+            elevenlabs: { ...prev.elevenlabs, apiKey: apiKey || undefined },
+        }));
+        setDirty(true);
+    }, []);
+    const handleVoiceSelect = useCallback((voiceId) => {
+        setVoiceConfig((prev) => ({
+            ...prev,
+            elevenlabs: { ...prev.elevenlabs, voiceId },
+        }));
+        setDirty(true);
+    }, []);
+    const handleTestVoice = useCallback((previewUrl) => {
+        if (audioRef.current) {
+            audioRef.current.pause();
+        }
+        setTesting(true);
+        const audio = new Audio(previewUrl);
+        audioRef.current = audio;
+        audio.onended = () => setTesting(false);
+        audio.onerror = () => setTesting(false);
+        audio.play().catch(() => setTesting(false));
+    }, []);
+    const handleSave = useCallback(async () => {
+        setSaving(true);
+        setSaveError(null);
+        setSaveSuccess(false);
+        try {
+            const cfg = await client.getConfig();
+            const messages = (cfg.messages ?? {});
+            const provider = voiceConfig.provider ?? "elevenlabs";
+            const normalizedElevenLabs = provider === "elevenlabs"
+                ? {
+                    ...voiceConfig.elevenlabs,
+                    modelId: voiceConfig.elevenlabs?.modelId ?? DEFAULT_ELEVEN_FAST_MODEL,
+                }
+                : voiceConfig.elevenlabs;
+            const sanitizedKey = sanitizeApiKey(normalizedElevenLabs?.apiKey);
+            if (normalizedElevenLabs) {
+                if (sanitizedKey)
+                    normalizedElevenLabs.apiKey = sanitizedKey;
+                else
+                    delete normalizedElevenLabs.apiKey;
+            }
+            const normalizedVoiceConfig = {
+                ...voiceConfig,
+                provider,
+                mode: provider === "elevenlabs"
+                    ? (voiceConfig.mode ?? "own-key")
+                    : undefined,
+                elevenlabs: normalizedElevenLabs,
+            };
+            // Also persist swabble (wake word) config — fall back to server config
+            // if the plugin isn't available on this platform (e.g. Electrobun).
+            let swabbleCfg;
+            try {
+                const { config: sc } = await getSwabblePlugin().getConfig();
+                if (sc)
+                    swabbleCfg = sc;
+            }
+            catch {
+                // Not available on this platform
+            }
+            if (!swabbleCfg && swabbleServerConfig) {
+                swabbleCfg = swabbleServerConfig;
+            }
+            await client.updateConfig({
+                messages: {
+                    ...messages,
+                    tts: normalizedVoiceConfig,
+                    ...(swabbleCfg ? { swabble: swabbleCfg } : {}),
+                },
+            });
+            dispatchWindowEvent(VOICE_CONFIG_UPDATED_EVENT, normalizedVoiceConfig);
+            setSaveSuccess(true);
+            setDirty(false);
+            setTimeout(() => setSaveSuccess(false), 2500);
+        }
+        catch (err) {
+            setSaveError(err instanceof Error ? err.message : "Failed to save");
+        }
+        setSaving(false);
+    }, [swabbleServerConfig, voiceConfig, setTimeout]);
+    if (loading) {
+        return (_jsx("div", { className: "py-4 text-center text-[var(--muted)] text-xs", children: t("voiceconfigview.LoadingVoiceConfig") }));
+    }
+    const selectedVoiceId = voiceConfig.elevenlabs?.voiceId;
+    const selectedPreset = PREMADE_VOICES.find((p) => p.voiceId === selectedVoiceId);
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "text-xs font-semibold text-[var(--muted)]", children: t("voiceconfigview.TTSProvider") }), _jsx("div", { className: "flex gap-2", children: VOICE_PROVIDERS.map((p) => {
+                            const active = currentProvider === p.id;
+                            return (_jsxs(Button, { variant: active ? "default" : "outline", size: "sm", className: "flex-1 h-auto flex-col py-2", onClick: () => handleProviderChange(p.id), children: [_jsx("div", { className: "font-semibold", children: p.label }), _jsx("div", { className: "text-[10px] opacity-70 mt-0.5", children: p.hint })] }, p.id));
+                        }) })] }), _jsxs("div", { className: "flex items-center justify-between py-2 px-3 border border-[var(--border)] bg-[var(--bg-muted)]", children: [_jsx("span", { className: "text-xs", children: currentProvider === "elevenlabs"
+                            ? `ElevenLabs — ${currentMode === "cloud" ? t("voiceconfigview.ServedViaElizaCloud") : t("voiceconfigview.RequiresApiKey")}`
+                            : `${providerInfo?.label} — ${t("voiceconfigview.NoApiKeyNeeded")}` }), _jsx("span", { className: `rounded-full border px-1.5 py-0.5 text-[10px] ${isConfigured
+                            ? "border-green-600 bg-green-600/10 text-[var(--text)]"
+                            : "border-[var(--warn)] bg-[var(--warn-subtle)] text-[var(--text)]"}`, children: isConfigured
+                            ? t("mediasettingssection.Configured")
+                            : t("mediasettingssection.NeedsSetup") })] }), currentProvider === "elevenlabs" && (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-xs font-semibold text-[var(--muted)]", children: t("voiceconfigview.APISource") }), _jsx(CloudSourceModeToggle, { mode: currentMode, onChange: handleModeChange })] }), currentMode === "cloud" && (_jsx(CloudConnectionStatus, { connected: elizaCloudConnected, disconnectedText: t("elizaclouddashboard.ElizaCloudNotConnected") })), currentMode === "own-key" && (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-xs font-semibold", children: t("voiceconfigview.ElevenLabsAPIKey") }), _jsx(Input, { type: "password", className: "bg-card text-xs", placeholder: voiceConfig.elevenlabs?.apiKey
+                                    ? t("mediasettingssection.ApiKeySetLeaveBlank")
+                                    : t("mediasettingssection.EnterApiKey"), onChange: (e) => handleApiKeyChange(e.target.value) }), _jsxs("div", { className: "text-[10px] text-[var(--muted)]", children: [t("voiceconfigview.GetYourKeyAt"), " ", _jsx("a", { href: "https://elevenlabs.io", target: "_blank", rel: "noopener noreferrer", className: "text-[var(--text)] underline decoration-[var(--accent)] underline-offset-2 hover:opacity-80", children: t("voiceconfigview.elevenlabsIo") })] }), _jsxs("div", { className: "text-[10px] text-[var(--muted)]", children: [t("voiceconfigview.FastPathDefaultE"), DEFAULT_ELEVEN_FAST_MODEL, "`)."] })] })), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "text-xs font-semibold", children: t("voiceconfigview.Voice") }), _jsx("div", { className: "grid grid-cols-3 gap-1.5", children: PREMADE_VOICES.map((preset) => {
+                                    const active = selectedVoiceId === preset.voiceId;
+                                    return (_jsxs(Button, { variant: active ? "default" : "outline", size: "sm", className: "h-auto flex-col items-start py-1.5 px-2 text-left", onClick: () => handleVoiceSelect(preset.voiceId), children: [_jsx("div", { className: "font-semibold truncate w-full", children: preset.name }), _jsx("div", { className: "text-[10px] opacity-70 truncate w-full", children: preset.hint })] }, preset.id));
+                                }) })] }), selectedPreset && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", className: "font-semibold", disabled: testing, onClick: () => handleTestVoice(selectedPreset.previewUrl), children: testing
+                                    ? t("voiceconfigview.Playing")
+                                    : t("voiceconfigview.TestVoice", {
+                                        name: selectedPreset.name,
+                                    }) }), testing && (_jsx(Button, { variant: "outline", size: "sm", onClick: () => {
+                                    if (audioRef.current) {
+                                        audioRef.current.pause();
+                                        setTesting(false);
+                                    }
+                                }, children: t("voiceconfigview.Stop") }))] }))] })), currentProvider === "edge" && (_jsx("div", { className: "py-2 px-3 border border-[var(--border)] bg-[var(--bg-muted)] text-xs text-[var(--muted)]", children: t("voiceconfigview.EdgeTTSUsesMicros") })), currentProvider === "simple-voice" && (_jsx("div", { className: "py-2 px-3 border border-[var(--border)] bg-[var(--bg-muted)] text-xs text-[var(--muted)]", children: t("voiceconfigview.SimpleVoiceUsesYo") })), _jsx(WakeWordSection, { serverConfig: swabbleServerConfig }), _jsx(ConfigSaveFooter, { dirty: dirty, saving: saving, saveError: saveError, saveSuccess: saveSuccess, onSave: () => void handleSave() })] }));
+}

package/components/VrmStage.d.ts

@@ -0,0 +1,28 @@
+import type { CameraProfile, VrmEngine } from "./avatar/VrmEngine";
+type TranslateFn = (key: string) => string;
+/** @deprecated No longer used — kept for API compatibility. */
+export type VrmStageAvatarEntry = {
+    vrmPath: string;
+    fallbackPreviewUrl: string;
+};
+/**
+ * VrmStage — single persistent VRM engine that swaps only the character model
+ * when `vrmPath` changes. The world background (Gaussian splat) stays
+ * continuously rendered, completely decoupled from character selection.
+ */
+export declare const VrmStage: import("react").NamedExoticComponent<{
+    active?: boolean;
+    vrmPath: string;
+    worldUrl?: string;
+    fallbackPreviewUrl: string;
+    cameraProfile?: CameraProfile;
+    initialCompanionZoomNormalized?: number;
+    onEngineReady?: (engine: VrmEngine) => void;
+    onLayerEngineReady?: (vrmPath: string, engine: VrmEngine) => void;
+    onRevealStart?: () => void;
+    playWaveOnAvatarChange?: boolean;
+    preloadAvatars?: readonly VrmStageAvatarEntry[];
+    t: TranslateFn;
+}>;
+export {};
+//# sourceMappingURL=VrmStage.d.ts.map

package/components/VrmStage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VrmStage.d.ts","sourceRoot":"","sources":["../../src/components/VrmStage.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EACV,aAAa,EACb,SAAS,EAEV,MAAM,oBAAoB,CAAC;AAG5B,KAAK,WAAW,GAAG,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;AAW3C,+DAA+D;AAC/D,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,kBAAkB,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,QAAQ;aAgBV,OAAO;aACP,MAAM;eACJ,MAAM;wBACG,MAAM;oBACV,aAAa;qCACI,MAAM;oBACvB,CAAC,MAAM,EAAE,SAAS,KAAK,IAAI;yBACtB,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,KAAK,IAAI;oBACjD,MAAM,IAAI;6BACD,OAAO;qBACf,SAAS,mBAAmB,EAAE;OAC5C,WAAW;EAgPd,CAAC"}

package/components/VrmStage.js

@@ -0,0 +1,178 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { APP_EMOTE_EVENT, STOP_EMOTE_EVENT, } from "@elizaos/app-core/events";
+import { useChatAvatarVoiceState, useRenderGuard, } from "@elizaos/app-core/hooks";
+import { resolveAppAssetUrl } from "@elizaos/app-core/utils";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { AvatarLoader } from "./AvatarLoader";
+import { VrmViewer } from "./avatar/VrmViewer";
+const AVATAR_CHANGE_WAVE_DELAY_MS = 650;
+const AVATAR_CHANGE_WAVE_EMOTE = {
+    emoteId: "wave",
+    path: "/animations/emotes/waving-both-hands.glb",
+    duration: 2.5,
+    loop: false,
+    showOverlay: false,
+};
+/**
+ * VrmStage — single persistent VRM engine that swaps only the character model
+ * when `vrmPath` changes. The world background (Gaussian splat) stays
+ * continuously rendered, completely decoupled from character selection.
+ */
+export const VrmStage = memo(function VrmStage({ active = true, vrmPath, worldUrl, fallbackPreviewUrl, cameraProfile = "companion", initialCompanionZoomNormalized, onEngineReady, onRevealStart, playWaveOnAvatarChange = false, 
+// Kept in the type signature for backwards compat but ignored — the single
+// engine handles character swaps without preloading separate layers.
+preloadAvatars: _preloadAvatars = [], onLayerEngineReady: _onLayerEngineReady, t, }) {
+    useRenderGuard("VrmStage");
+    const engineRef = useRef(null);
+    const avatarChangeWaveTimerRef = useRef(null);
+    const hasMountedRef = useRef(false);
+    const prevVrmPathRef = useRef(vrmPath);
+    const [vrmLoaded, setVrmLoaded] = useState(false);
+    const [showVrmFallback, setShowVrmFallback] = useState(false);
+    const [loadingProgress, setLoadingProgress] = useState(undefined);
+    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();
+    /* ── Greeting wave ──────────────────────────────────────────────── */
+    const playGreetingWave = useCallback((engine) => {
+        if (!engine)
+            return;
+        const resolvedPath = resolveAppAssetUrl(AVATAR_CHANGE_WAVE_EMOTE.path);
+        void engine.playEmote(resolvedPath, AVATAR_CHANGE_WAVE_EMOTE.duration ?? 3, AVATAR_CHANGE_WAVE_EMOTE.loop === true);
+    }, []);
+    const scheduleGreetingWave = useCallback((engine) => {
+        if (!active || !playWaveOnAvatarChange || !engine)
+            return;
+        if (avatarChangeWaveTimerRef.current != null) {
+            window.clearTimeout(avatarChangeWaveTimerRef.current);
+        }
+        avatarChangeWaveTimerRef.current = window.setTimeout(() => {
+            playGreetingWave(engine);
+            avatarChangeWaveTimerRef.current = null;
+        }, AVATAR_CHANGE_WAVE_DELAY_MS);
+    }, [active, playGreetingWave, playWaveOnAvatarChange]);
+    /* ── Engine callbacks ───────────────────────────────────────────── */
+    const handleEngineReady = useCallback((engine) => {
+        engineRef.current = engine;
+        engine.setCameraAnimation({
+            enabled: true,
+            swayAmplitude: cameraProfile === "companion_close" ? 0.028 : 0.04,
+            bobAmplitude: cameraProfile === "companion_close" ? 0.016 : 0.022,
+            rotationAmplitude: cameraProfile === "companion_close" ? 0.008 : 0.012,
+            speed: cameraProfile === "companion_close" ? 0.48 : 0.42,
+        });
+        engine.setPointerParallaxEnabled(false);
+        if (typeof initialCompanionZoomNormalized === "number") {
+            engine.setCompanionZoomNormalized(initialCompanionZoomNormalized);
+        }
+        onEngineReady?.(engine);
+    }, [cameraProfile, initialCompanionZoomNormalized, onEngineReady]);
+    const handleEngineState = useCallback((state) => {
+        if (state.loadingProgress !== undefined) {
+            setLoadingProgress(Math.round(state.loadingProgress * 100));
+        }
+        if (state.vrmLoaded) {
+            setVrmLoaded(true);
+            setShowVrmFallback(false);
+            hasLoadedFirstVrmRef.current = true;
+            if (!loaderFadingStartedRef.current) {
+                loaderFadingStartedRef.current = true;
+                setLoaderFading(true);
+                setTimeout(() => setLoaderHidden(true), 800);
+            }
+            // Schedule greeting wave after VRM loads on avatar change
+            if (hasMountedRef.current) {
+                scheduleGreetingWave(engineRef.current);
+            }
+            return;
+        }
+        if (state.loadError) {
+            setLoaderHidden(true);
+            setVrmLoaded(false);
+            setShowVrmFallback(true);
+        }
+    }, [scheduleGreetingWave]);
+    const handleRevealStart = useCallback(() => {
+        onRevealStart?.();
+    }, [onRevealStart]);
+    /* ── Reset loading UI when avatar path changes ──────────────────── */
+    // biome-ignore lint/correctness/useExhaustiveDependencies: reset loader on avatar change
+    useEffect(() => {
+        if (vrmPath === prevVrmPathRef.current && hasMountedRef.current)
+            return;
+        prevVrmPathRef.current = vrmPath;
+        if (hasMountedRef.current) {
+            // 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]);
+    /* ── Companion zoom ─────────────────────────────────────────────── */
+    useEffect(() => {
+        if (typeof initialCompanionZoomNormalized !== "number")
+            return;
+        engineRef.current?.setCompanionZoomNormalized(initialCompanionZoomNormalized);
+    }, [initialCompanionZoomNormalized]);
+    /* ── Emote event listeners ──────────────────────────────────────── */
+    useEffect(() => {
+        const handler = (event) => {
+            const engine = engineRef.current;
+            if (!engine)
+                return;
+            if (typeof engine.playEmote !== "function")
+                return;
+            const detail = event.detail;
+            if (!detail?.path)
+                return;
+            const resolvedPath = resolveAppAssetUrl(detail.path);
+            const duration = typeof detail.duration === "number" && Number.isFinite(detail.duration)
+                ? detail.duration
+                : 3;
+            const isLoop = detail.loop === true;
+            void engine.playEmote(resolvedPath, duration, isLoop);
+        };
+        window.addEventListener(APP_EMOTE_EVENT, handler);
+        return () => window.removeEventListener(APP_EMOTE_EVENT, handler);
+    }, []);
+    useEffect(() => {
+        const handler = () => {
+            engineRef.current?.stopEmote();
+        };
+        document.addEventListener(STOP_EMOTE_EVENT, handler);
+        return () => document.removeEventListener(STOP_EMOTE_EVENT, handler);
+    }, []);
+    /* ── Cleanup ────────────────────────────────────────────────────── */
+    useEffect(() => {
+        return () => {
+            if (avatarChangeWaveTimerRef.current != null) {
+                window.clearTimeout(avatarChangeWaveTimerRef.current);
+                avatarChangeWaveTimerRef.current = null;
+            }
+        };
+    }, []);
+    /* ── Render ─────────────────────────────────────────────────────── */
+    return (_jsxs("div", { className: "fixed inset-0 z-0 overflow-hidden bg-[#030711]", children: [_jsxs("div", { className: "pointer-events-none absolute inset-0", children: [_jsx("div", { className: "absolute inset-0", style: {
+                            background: "radial-gradient(circle at 50% 18%, rgba(44, 188, 255, 0.18) 0%, rgba(44, 188, 255, 0.04) 24%, rgba(3, 7, 17, 0) 52%), linear-gradient(180deg, #06101d 0%, #040913 48%, #02050c 100%)",
+                        } }), _jsx("div", { className: "absolute inset-x-[-14%] bottom-[-24%] h-[74%] opacity-70", style: {
+                            transform: "perspective(1200px) rotateX(80deg)",
+                            transformOrigin: "center bottom",
+                            backgroundImage: "linear-gradient(rgba(118, 232, 255, 0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(118, 232, 255, 0.18) 1px, transparent 1px)",
+                            backgroundSize: "68px 68px",
+                            boxShadow: "0 -24px 90px rgba(40, 184, 255, 0.14)",
+                        } }), _jsx("div", { className: "absolute inset-x-0 top-[39%] h-px opacity-55", style: {
+                            background: "linear-gradient(90deg, transparent 0%, rgba(118, 232, 255, 0.12) 18%, rgba(118, 232, 255, 0.58) 50%, rgba(118, 232, 255, 0.12) 82%, transparent 100%)",
+                            boxShadow: "0 0 20px rgba(118, 232, 255, 0.18)",
+                        } })] }), _jsx("div", { className: "absolute inset-0 z-10", children: _jsx(VrmViewer, { active: active, vrmPath: vrmPath, worldUrl: worldUrl, mouthOpen: chatAvatarVoice.mouthOpen, isSpeaking: chatAvatarVoice.isSpeaking, cameraProfile: cameraProfile, onEngineReady: handleEngineReady, onEngineState: handleEngineState, onRevealStart: handleRevealStart }) }), showVrmFallback && !vrmLoaded && (_jsx("img", { src: fallbackPreviewUrl, alt: t("companion.avatarPreviewAlt"), className: "absolute left-1/2 top-[52%] z-20 -translate-x-1/2 -translate-y-1/2 h-[90%] object-contain opacity-70" })), !loaderHidden && !showVrmFallback && (_jsx("div", { className: "absolute inset-0 z-20", children: _jsx(AvatarLoader, { progress: loadingProgress, fadingOut: loaderFading }) }))] }));
+});

package/components/WhatsAppQrOverlay.d.ts

@@ -0,0 +1,8 @@
+interface WhatsAppQrOverlayProps {
+    accountId?: string;
+    /** Called when QR pairing succeeds — parent should install plugin + close modal. */
+    onConnected?: () => void;
+}
+export declare function WhatsAppQrOverlay({ accountId, onConnected, }: WhatsAppQrOverlayProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=WhatsAppQrOverlay.d.ts.map

package/components/WhatsAppQrOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WhatsAppQrOverlay.d.ts","sourceRoot":"","sources":["../../src/components/WhatsAppQrOverlay.tsx"],"names":[],"mappings":"AAIA,UAAU,sBAAsB;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oFAAoF;IACpF,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,SAAqB,EACrB,WAAW,GACZ,EAAE,sBAAsB,2CAwNxB"}

package/components/WhatsAppQrOverlay.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { useWhatsAppPairing } from "../hooks";
+import { useApp } from "../state";
+export function WhatsAppQrOverlay({ accountId = "default", onConnected, }) {
+    const { status, qrDataUrl, phoneNumber, error, startPairing, stopPairing, disconnect, } = useWhatsAppPairing(accountId);
+    const { t } = useApp();
+    // Fire onConnected once when status transitions to "connected"
+    const firedRef = useRef(false);
+    useEffect(() => {
+        if (status === "connected" && onConnected && !firedRef.current) {
+            firedRef.current = true;
+            // Small delay so the user sees the success state briefly
+            const timer = setTimeout(onConnected, 1200);
+            return () => clearTimeout(timer);
+        }
+    }, [status, onConnected]);
+    // ── Connected ────────────────────────────────────────────────────────
+    if (status === "connected") {
+        return (_jsxs("div", { className: "p-4 mt-3", style: {
+                border: "1px solid #22c55e",
+                background: "var(--ok-subtle)",
+            }, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "inline-block w-2 h-2 rounded-full", style: { background: "#22c55e" } }), _jsxs("span", { className: "text-xs font-medium", style: { color: "#22c55e" }, children: [t("onboarding.connected"), phoneNumber ? ` (+${phoneNumber})` : ""] })] }), _jsx("div", { className: "text-[10px] mt-1", style: { color: "var(--muted)" }, children: onConnected
+                        ? "Installing WhatsApp plugin and restarting agent..."
+                        : "WhatsApp is paired. Auth state is saved for automatic reconnection." }), !onConnected && (_jsx("button", { type: "button", className: "mt-2 px-2.5 py-1 text-[10px] bg-transparent cursor-pointer transition-colors", style: { border: "1px solid #ef4444", color: "#ef4444" }, onClick: () => void disconnect(), children: t("whatsappqroverlay.Disconnect") }))] }));
+    }
+    // ── Error / Timeout ──────────────────────────────────────────────────
+    if (status === "error" || status === "timeout") {
+        return (_jsxs("div", { className: "p-4 mt-3", style: {
+                border: "1px solid #ef4444",
+                background: "var(--destructive-subtle)",
+            }, children: [_jsx("div", { className: "text-xs mb-2", style: { color: "#ef4444" }, children: status === "timeout"
+                        ? "QR code expired. Please try again."
+                        : (error ?? "An error occurred.") }), _jsx("button", { type: "button", className: "px-3 py-1.5 text-[11px] bg-transparent cursor-pointer transition-colors", style: { border: "1px solid #f0b232", color: "#f0b232" }, onClick: () => {
+                        firedRef.current = false;
+                        void startPairing();
+                    }, children: t("whatsappqroverlay.TryAgain") })] }));
+    }
+    // ── Idle ──────────────────────────────────────────────────────────────
+    if (status === "idle" || status === "disconnected") {
+        return (_jsxs("div", { className: "p-4 mt-3", style: {
+                border: "1px solid var(--border)",
+                background: "var(--bg-hover)",
+            }, children: [_jsx("div", { className: "text-xs mb-2", style: { color: "var(--muted)" }, children: t("whatsappqroverlay.ScanAQRCodeWith") }), _jsx("div", { className: "text-[10px] mb-2 opacity-70", style: { color: "var(--muted)" }, children: t("whatsappqroverlay.UsesAnUnofficialW") }), _jsx("button", { type: "button", className: "px-3 py-1.5 text-[11px] bg-transparent cursor-pointer transition-colors", style: { border: "1px solid #f0b232", color: "#f0b232" }, onClick: () => {
+                        firedRef.current = false;
+                        void startPairing();
+                    }, children: t("whatsappqroverlay.ConnectWhatsApp") })] }));
+    }
+    // ── Initializing / Waiting for QR ────────────────────────────────────
+    return (_jsx("div", { className: "p-4 mt-3", style: {
+            border: "1px solid rgba(255,255,255,0.08)",
+            background: "rgba(255,255,255,0.04)",
+        }, children: _jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "shrink-0", children: qrDataUrl ? (_jsx("img", { src: qrDataUrl, alt: "WhatsApp QR Code", className: "w-48 h-48 bg-white", style: {
+                            imageRendering: "pixelated",
+                            border: "1px solid var(--border)",
+                        } })) : (_jsx("div", { className: "w-48 h-48 flex items-center justify-center", style: {
+                            border: "1px solid var(--border)",
+                            background: "var(--bg-hover)",
+                        }, children: _jsx("span", { className: "text-xs animate-pulse", style: { color: "var(--muted)" }, children: t("whatsappqroverlay.GeneratingQR") }) })) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "text-xs font-medium mb-2", style: { color: "var(--text)" }, children: t("whatsappqroverlay.ScanWithWhatsApp") }), _jsxs("ol", { className: "text-[11px] space-y-1 list-decimal pl-4 m-0", style: { color: "var(--muted)" }, children: [_jsx("li", { children: t("whatsappqroverlay.OpenWhatsAppOnYou") }), _jsxs("li", { children: [t("whatsappqroverlay.Tap"), " ", _jsx("strong", { children: t("whatsappqroverlay.Menu") }), " or", " ", _jsx("strong", { children: t("nav.settings") }), " ", t("whatsappqroverlay.andSelect"), " ", _jsx("strong", { children: t("whatsappqroverlay.LinkedDevices") })] }), _jsxs("li", { children: [t("whatsappqroverlay.Tap"), " ", _jsx("strong", { children: t("whatsappqroverlay.LinkADevice") })] }), _jsx("li", { children: t("whatsappqroverlay.PointYourPhoneAt") })] }), _jsxs("div", { className: "mt-3 flex items-center gap-2", children: [_jsx("span", { className: "inline-block w-1.5 h-1.5 rounded-full animate-pulse", style: { background: "#f0b232" } }), _jsx("span", { className: "text-[10px]", style: { color: "var(--muted)" }, children: t("whatsappqroverlay.QRRefreshesAutomat") })] }), _jsx("button", { type: "button", className: "mt-3 px-2.5 py-1 text-[10px] cursor-pointer transition-colors", style: {
+                                border: "1px solid var(--border)",
+                                color: "var(--muted)",
+                            }, onClick: () => void stopPairing(), children: t("onboarding.cancel") })] })] }) }));
+}