@elizaos/app-core 2.0.0-alpha.13 → 2.0.0-alpha.15

package/src/components/ChatView.tsx

@@ -858,9 +858,9 @@ export function ChatView({ variant = "default" }: ChatViewProps) {
           data-no-camera-drag={isGameModal || undefined}
           style={{ zIndex: 1 }}
         >
-          {chatPendingImages.map((img, i) => (
+          {chatPendingImages.map((img, imgIdx) => (
             <div
-              key={`${img.name}-${i}`}
+              key={`${img.name}-${img.data}`}
               className="relative group w-16 h-16 shrink-0"
             >
               <img
@@ -872,7 +872,7 @@ export function ChatView({ variant = "default" }: ChatViewProps) {
                 type="button"
                 title={t("chatview.RemoveImage")}
                 aria-label={`Remove image ${img.name}`}
-                onClick={() => removeImage(i)}
+                onClick={() => removeImage(imgIdx)}
                 className="absolute -top-1.5 -right-1.5 w-4 h-4 rounded-full bg-danger text-white text-[10px] flex items-center justify-center opacity-100 sm:opacity-0 sm:group-hover:opacity-100 focus-visible:opacity-100 transition-opacity cursor-pointer"
               >
                 ×

package/src/components/ConfigPageView.tsx

@@ -6,11 +6,11 @@
  *   2. Secrets (modal)
  */
 
-import { useCallback, useEffect, useState } from "react";
 import {
   WALLET_RPC_PROVIDER_OPTIONS,
   type WalletRpcSelections,
 } from "@elizaos/autonomous/contracts/wallet";
+import { useCallback, useEffect, useState } from "react";
 import { client } from "../api";
 import {
   ConfigRenderer,
@@ -468,18 +468,19 @@ export function ConfigPageView({ embedded = false }: { embedded?: boolean }) {
   }, []);
 
   /* ── RPC provider selection state ──────────────────────────────────── */
+  const initialRpc = resolveInitialWalletRpcSelections(walletConfig);
   const [selectedEvmRpc, setSelectedEvmRpc] =
-    useState<WalletRpcSelections["evm"]>("eliza-cloud");
+    useState<WalletRpcSelections["evm"]>(initialRpc.evm);
   const [selectedBscRpc, setSelectedBscRpc] =
-    useState<WalletRpcSelections["bsc"]>("eliza-cloud");
+    useState<WalletRpcSelections["bsc"]>(initialRpc.bsc);
   const [selectedSolanaRpc, setSelectedSolanaRpc] =
-    useState<WalletRpcSelections["solana"]>("eliza-cloud");
+    useState<WalletRpcSelections["solana"]>(initialRpc.solana);
 
   useEffect(() => {
-    const initialSelections = resolveInitialWalletRpcSelections(walletConfig);
-    setSelectedEvmRpc(initialSelections.evm);
-    setSelectedBscRpc(initialSelections.bsc);
-    setSelectedSolanaRpc(initialSelections.solana);
+    const selections = resolveInitialWalletRpcSelections(walletConfig);
+    setSelectedEvmRpc(selections.evm);
+    setSelectedBscRpc(selections.bsc);
+    setSelectedSolanaRpc(selections.solana);
   }, [walletConfig]);
 
   const handleWalletSaveAll = useCallback(() => {

package/src/components/ConversationsSidebar.tsx

@@ -1,4 +1,3 @@
-import { useApp } from "../state";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -6,6 +5,7 @@ import {
   DropdownMenuTrigger,
 } from "@elizaos/ui";
 import { useEffect, useRef, useState } from "react";
+import { useApp } from "../state";
 import { ConversationListItem } from "./conversations/ConversationListItem";
 
 type ConversationsSidebarVariant = "default" | "game-modal";

package/src/components/CustomActionEditor.tsx

@@ -989,15 +989,15 @@ export function CustomActionEditor({
                 {t("customactioneditor.AddParameter")}
               </button>
             </div>
-            {parameters.map((param, i) => (
+            {parameters.map((param, paramIdx) => (
               <div
-                key={`${param.name}-${i}`}
+                key={`${param.name}-${param.description ?? ""}`}
                 className="flex gap-2 items-start"
               >
                 <input
                   type="text"
                   value={param.name}
-                  onChange={(e) => updateParameter(i, "name", e.target.value)}
+                  onChange={(e) => updateParameter(paramIdx, "name", e.target.value)}
                   placeholder={t("customactioneditor.paramName")}
                   className="w-32 bg-surface border border-border px-2 py-1.5 text-sm text-txt placeholder:text-muted/50 outline-none focus:border-accent"
                 />
@@ -1005,7 +1005,7 @@ export function CustomActionEditor({
                   type="text"
                   value={param.description}
                   onChange={(e) =>
-                    updateParameter(i, "description", e.target.value)
+                    updateParameter(paramIdx, "description", e.target.value)
                   }
                   placeholder={t("skillsview.Description")}
                   className="flex-1 bg-surface border border-border px-2 py-1.5 text-sm text-txt placeholder:text-muted/50 outline-none focus:border-accent"
@@ -1015,7 +1015,7 @@ export function CustomActionEditor({
                     type="checkbox"
                     checked={param.required}
                     onChange={(e) =>
-                      updateParameter(i, "required", e.target.checked)
+                      updateParameter(paramIdx, "required", e.target.checked)
                     }
                     className="cursor-pointer"
                   />
@@ -1024,7 +1024,7 @@ export function CustomActionEditor({
                 </span>
                 <button
                   type="button"
-                  onClick={() => removeParameter(i)}
+                  onClick={() => removeParameter(paramIdx)}
                   className="px-2 text-muted hover:text-txt cursor-pointer"
                 >
                   {t("bugreportmodal.Times")}

package/src/components/FineTuningView.tsx

@@ -15,7 +15,10 @@ import { useApp } from "@elizaos/app-core/state";
 import { confirmDesktopAction } from "@elizaos/app-core/utils";
 import { Button, Input } from "@elizaos/ui";
 import { useCallback, useEffect, useState } from "react";
-import { parsePositiveFloat, parsePositiveInteger } from "../utils/number-parsing";
+import {
+  parsePositiveFloat,
+  parsePositiveInteger,
+} from "../utils/number-parsing";
 
 const TRAINING_EVENT_KINDS = new Set<TrainingStreamEvent["kind"]>([
   "job_started",
@@ -1048,9 +1051,9 @@ export function FineTuningView() {
               {t("finetuningview.NoLiveEventsYet")}
             </div>
           ) : (
-            trainingEvents.map((event, index) => (
+            trainingEvents.map((event) => (
               <div
-                key={`${event.ts}-${event.kind}-${index}`}
+                key={`${event.ts}-${event.kind}-${String(event.message ?? "")}`}
                 className="px-2 py-1.5 border-b border-border text-xs"
               >
                 <span className="font-mono text-muted mr-2">

package/src/components/GlobalEmoteOverlay.tsx

@@ -1,8 +1,5 @@
-import {
-  APP_EMOTE_EVENT,
-  type AppEmoteEventDetail,
-} from "../events";
 import { useEffect, useRef, useState } from "react";
+import { APP_EMOTE_EVENT, type AppEmoteEventDetail } from "../events";
 
 const OVERLAY_LIFETIME_MS = 2400;
 

package/src/components/HeartbeatsView.tsx

@@ -261,7 +261,7 @@ export function HeartbeatsView() {
     triggersLoading = false,
     triggersSaving = false,
     triggerRunsById = {},
-    triggerHealth = null,
+    triggerHealth: _triggerHealth = null,
     triggerError = null,
     loadTriggers = async () => {},
     createTrigger = async () => null,

package/src/components/InventoryView.tsx

@@ -8,7 +8,7 @@
 import { useApp } from "@elizaos/app-core/state";
 import { useCallback, useState } from "react";
 import { TradePanel } from "./BscTradePanel";
-import { CHAIN_CONFIGS, resolveChainKey, type ChainKey } from "./chainConfig";
+import { CHAIN_CONFIGS, type ChainKey, resolveChainKey } from "./chainConfig";
 import {
   BSC_GAS_THRESHOLD,
   loadTrackedBscTokens,
@@ -168,7 +168,7 @@ export function InventoryView({ inModal }: { inModal?: boolean } = {}) {
       : null;
 
   const headerWarning =
-    chainFocus !== "all" && cfg?.legacyCustomChains?.includes(chainFocus)
+    chainFocus !== "all" && cfg?.legacyCustomChains?.includes(chainFocus as unknown as "evm" | "bsc" | "solana")
       ? {
           title: `${
             focusedChainLabel ??

package/src/components/LoadingScreen.tsx

@@ -24,6 +24,7 @@ export function LoadingScreen({
   vrmUrl,
 }: LoadingScreenProps) {
   const [vrmCached, setVrmCached] = useState(false);
+  const [fetchProgress, setFetchProgress] = useState(0);
   const [, setRuntimeElapsedSeconds] = useState(0);
 
   useEffect(() => {
@@ -40,16 +41,45 @@ export function LoadingScreen({
   useEffect(() => {
     if (!vrmUrl) return;
     const controller = new AbortController();
-    fetch(vrmUrl, { signal: controller.signal })
-      .then(() => setVrmCached(true))
-      .catch(() => {
+
+    (async () => {
+      try {
+        const response = await fetch(vrmUrl, { signal: controller.signal });
+        const contentLength = Number(response.headers.get("content-length") || 0);
+
+        if (!contentLength || !response.body) {
+          setVrmCached(true);
+          return;
+        }
+
+        const reader = response.body.getReader();
+        let received = 0;
+
+        for (;;) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          received += value.byteLength;
+          setFetchProgress(Math.min(received / contentLength, 1));
+        }
+
+        setVrmCached(true);
+      } catch {
         // Non-blocking — VRM will load normally later.
-      });
+      }
+    })();
+
     return () => controller.abort();
   }, [vrmUrl]);
 
   const meta = PHASE_META[phase];
-  const progress = vrmCached ? Math.max(meta.progress, 80) : meta.progress;
+  let progress: number;
+  if (vrmCached) {
+    progress = Math.max(meta.progress, 80);
+  } else if (fetchProgress > 0) {
+    progress = Math.max(meta.progress, Math.round(55 + fetchProgress * 25));
+  } else {
+    progress = meta.progress;
+  }
   const label = vrmCached && phase !== "ready" ? "Loading avatar" : meta.label;
 
   return (
@@ -64,7 +94,10 @@ export function LoadingScreen({
           <div className="loading-screen__progress-track">
             <div
               className="loading-screen__progress-fill"
-              style={{ width: `${progress}%` }}
+              style={{
+                width: `${progress}%`,
+                transition: "width 1.5s ease-out",
+              }}
             />
           </div>
           <div className="loading-screen__percent">{progress} %</div>

package/src/components/OnboardingWizard.tsx

@@ -12,11 +12,11 @@ import { useEffect } from "react";
 import { VrmStage } from "./companion/VrmStage";
 import { ActivateStep } from "./onboarding/ActivateStep";
 import { ConnectionStep } from "./onboarding/ConnectionStep";
+import { IdentityStep } from "./onboarding/IdentityStep";
 import { OnboardingPanel } from "./onboarding/OnboardingPanel";
 import { OnboardingStepNav } from "./onboarding/OnboardingStepNav";
 import { PermissionsStep } from "./onboarding/PermissionsStep";
 import { RpcStep } from "./onboarding/RpcStep";
-import { IdentityStep } from "./onboarding/IdentityStep";
 import { WakeUpStep } from "./onboarding/WakeUpStep";
 
 export function OnboardingWizard() {

package/src/components/PluginsView.tsx

@@ -1949,6 +1949,8 @@ function PluginListView({ label, mode = "all", inModal }: PluginListViewProps) {
       setConnectorSelectedId(pluginId);
       setConnectorExpandedIds((prev) => {
         if (desktopConnectorLayout) {
+          // Accordion: toggle off if already open, otherwise open this one only
+          if (prev.has(pluginId)) return new Set();
           return new Set([pluginId]);
         }
         const next = new Set(prev);
@@ -2725,6 +2727,10 @@ function PluginListView({ label, mode = "all", inModal }: PluginListViewProps) {
             <div className="relative flex-1 min-w-[220px]">
               <Input
                 type="text"
+                name="plugin-search"
+                autoComplete="off"
+                data-1p-ignore
+                data-lpignore="true"
                 className="w-full bg-card/60 backdrop-blur-md shadow-inner pr-8 h-9 rounded-xl focus-visible:ring-accent border-border/40"
                 placeholder={searchPlaceholder}
                 value={pluginSearch}

package/src/components/ShellOverlays.tsx

@@ -1,10 +1,10 @@
+import { GlobalEmoteOverlay } from "./GlobalEmoteOverlay";
 import {
   BugReportModal,
   CommandPalette,
   RestartBanner,
   ShortcutsOverlay,
 } from "./index";
-import { GlobalEmoteOverlay } from "./GlobalEmoteOverlay";
 
 export interface ActionNotice {
   text: string;

package/src/components/VoiceConfigView.tsx

@@ -16,10 +16,7 @@ import {
   type VoiceMode,
   type VoiceProvider,
 } from "../api";
-import {
-  getSwabblePlugin,
-  type SwabbleConfig,
-} from "../bridge/native-plugins";
+import { getSwabblePlugin, type SwabbleConfig } from "../bridge/native-plugins";
 import { dispatchWindowEvent, VOICE_CONFIG_UPDATED_EVENT } from "../events";
 import { useTimeout } from "../hooks";
 import { useApp } from "../state";
@@ -165,7 +162,9 @@ function WakeWordSection({
         await getSwabblePlugin().stop();
         setEnabled(false);
       } else {
-        const result = await getSwabblePlugin().start({ config: buildConfig() });
+        const result = await getSwabblePlugin().start({
+          config: buildConfig(),
+        });
         if (result.started) setEnabled(true);
       }
     } catch {

package/src/components/avatar/VrmEngine.ts

@@ -10,6 +10,15 @@ import type {
   SplatMesh as SparkSplatMesh,
 } from "@sparkjsdev/spark";
 import * as THREE from "three";
+
+/** Three.js NodeMaterial exposes emissiveNode/opacityNode but they are not in public MeshStandardMaterial types. */
+interface MeshStandardMaterialWithNodeProps {
+  // biome-ignore lint/suspicious/noExplicitAny: THREE node types are not in public @types/three
+  emissiveNode?: any;
+  // biome-ignore lint/suspicious/noExplicitAny: THREE node types are not in public @types/three
+  opacityNode?: any;
+}
+
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 import { MeshoptDecoder } from "three/examples/jsm/libs/meshopt_decoder.module.js";
 import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
@@ -2009,6 +2018,12 @@ export class VrmEngine {
     }
     activeEmote?.fadeOut(fadeDuration);
   }
+
+  /** Play a one-shot wave greeting after the VRM becomes visible. */
+  playWaveGreeting(): void {
+    this.playEmote("animations/emotes/waving-both-hands.glb.gz", 3, false);
+  }
+
   async loadVrmFromUrl(url: string, name?: string): Promise<void> {
     await this.whenReady();
     if (!this.scene) throw new Error("VrmEngine not initialized");
@@ -2119,9 +2134,13 @@ export class VrmEngine {
       await this.loadAndPlayIdle(vrm);
       if (!this.loadingAborted && this.vrm === vrm) {
         this.vrmReady = true;
+        // Let the idle animation settle into a natural pose before revealing
+        await new Promise((resolve) => setTimeout(resolve, 300));
+        if (this.loadingAborted || this.vrm !== vrm) return;
         await this.playTeleportReveal(vrm);
         vrm.scene.visible = true;
         this.startPendingWorldReveal(true);
+        this.playWaveGreeting();
       }
     } catch {
       if (!this.loadingAborted && this.vrm === vrm) {
@@ -2155,8 +2174,8 @@ export class VrmEngine {
           appliedNodeDissolve = true;
           mat.userData._dissolveApplied = true;
           mat.userData._origOpacityNode = mat.opacityNode ?? null;
-          // biome-ignore lint/suspicious/noExplicitAny: Three.js NodeMaterial emissiveNode is not in public types
-          mat.userData._origEmissiveNode = (mat as any).emissiveNode ?? null;
+          mat.userData._origEmissiveNode =
+            (mat as MeshStandardMaterialWithNodeProps).emissiveNode ?? null;
           mat.userData._origAlphaTest = mat.alphaTest;
 
           // World-space Y from TSL
@@ -2221,10 +2240,9 @@ export class VrmEngine {
             ? origOpacity.mul(dissolveAlpha)
             : dissolveAlpha;
 
-          // biome-ignore lint/suspicious/noExplicitAny: Three.js NodeMaterial emissiveNode is not in public types
-          const origEmissive = (mat as any).emissiveNode;
-          // biome-ignore lint/suspicious/noExplicitAny: Three.js NodeMaterial emissiveNode is not in public types
-          (mat as any).emissiveNode = origEmissive
+          const matWithEmissive = mat as MeshStandardMaterialWithNodeProps;
+          const origEmissive = matWithEmissive.emissiveNode;
+          matWithEmissive.emissiveNode = origEmissive
             ? origEmissive.add(emissiveBoost)
             : emissiveBoost;
 
@@ -2429,7 +2447,7 @@ if (teleportNoise < teleportRatio) discard;
             mat.userData._origOpacityNode ?? null;
         }
         if (mat.userData._origEmissiveNode !== undefined) {
-          (mat as unknown as Record<string, unknown>).emissiveNode =
+          (mat as MeshStandardMaterialWithNodeProps).emissiveNode =
             mat.userData._origEmissiveNode ?? null;
         }
         mat.alphaTest = mat.userData._origAlphaTest ?? 0;

package/src/components/companion/CompanionSceneHost.tsx

@@ -1 +1,5 @@
-export { CompanionSceneHost, SharedCompanionScene, useSharedCompanionScene } from "../CompanionSceneHost";
+export {
+  CompanionSceneHost,
+  SharedCompanionScene,
+  useSharedCompanionScene,
+} from "../CompanionSceneHost";

package/src/components/index.ts

@@ -1,6 +1,6 @@
-export * from "./ApiKeyConfig";
 export * from "./AdvancedPageView";
 export * from "./AgentActivityBox";
+export * from "./ApiKeyConfig";
 export * from "./AppsPageView";
 export * from "./AppsView";
 export * from "./AvatarLoader";
@@ -25,15 +25,20 @@ export * from "./ConfigPageView";
 export * from "./ConfigSaveFooter";
 export * from "./ConfirmModal";
 export * from "./ConnectionFailedBanner";
-export * from "./ConversationsSidebar";
 export * from "./ConnectorsPageView";
-export * from "./confirm-delete-control";
+export * from "./ConversationsSidebar";
 export * from "./CustomActionEditor";
 export * from "./CustomActionsPanel";
 export * from "./CustomActionsView";
+export * from "./chainConfig";
+export * from "./companion-shell-styles";
+export * from "./confirm-delete-control";
+export * from "./conversations/ConversationListItem";
+export * from "./conversations/conversation-utils";
 export * from "./DatabasePageView";
 export * from "./DatabaseView";
 export * from "./ElizaCloudDashboard";
+export * from "./ElizaCloudDashboard";
 export * from "./EmotePicker";
 export * from "./ErrorBoundary";
 export * from "./FineTuningView";
@@ -41,8 +46,8 @@ export * from "./format";
 export * from "./GameView";
 export * from "./GameViewOverlay";
 export * from "./GlobalEmoteOverlay";
-export * from "./HeartbeatsView";
 export * from "./Header";
+export * from "./HeartbeatsView";
 export * from "./InventoryView";
 export * from "./KnowledgeView";
 export * from "./knowledge-upload-image";
@@ -56,7 +61,6 @@ export * from "./labels";
 export * from "./MediaGalleryView";
 export * from "./MediaSettingsSection";
 export * from "./MessageContent";
-export * from "./ElizaCloudDashboard";
 export * from "./OnboardingWizard";
 export * from "./PairingView";
 export * from "./PermissionsSection";
@@ -78,9 +82,9 @@ export * from "./SystemWarningBanner";
 export { useSharedCompanionScene } from "./shared-companion-scene-context";
 export * from "./skeletons";
 export * from "./ThemeToggle";
-export * from "./TriggersView";
 export * from "./TrajectoriesView";
 export * from "./TrajectoryDetailView";
+export * from "./TriggersView";
 export * from "./trajectory-format";
 export * from "./ui-badges";
 export * from "./ui-switch";
@@ -88,7 +92,3 @@ export * from "./VectorBrowserView";
 export * from "./VoiceConfigView";
 export * from "./VrmStage";
 export * from "./WhatsAppQrOverlay";
-export * from "./chainConfig";
-export * from "./companion-shell-styles";
-export * from "./conversations/ConversationListItem";
-export * from "./conversations/conversation-utils";

package/src/components/inventory/TokensTable.tsx

@@ -131,11 +131,11 @@ export function TokensTable({
           </tr>
         </thead>
         <tbody>
-          {visibleRows.map((row, idx) => {
+          {visibleRows.map((row) => {
             const contractAddress = row.contractAddress;
             return (
               <tr
-                key={`${row.chain}-${row.symbol}-${idx}`}
+                key={`${row.chain}-${row.symbol}-${row.contractAddress ?? ""}`}
                 className="border-b border-border last:border-b-0 hover:bg-bg-hover transition-colors"
               >
                 {/* Logo */}

package/src/components/onboarding/IdentityStep.tsx

@@ -2,15 +2,13 @@ import { getVrmPreviewUrl, useApp } from "@elizaos/app-core/state";
 import { useCallback, useEffect } from "react";
 
 /** Maps catchphrases → character metadata for onboarding. */
-const IDENTITY_PRESETS: Record<
-  string,
-  { name: string; avatarIndex: number }
-> = {
-  "Noted.": { name: "Rin", avatarIndex: 1 },
-  "uwu~": { name: "Ai", avatarIndex: 2 },
-  "lol k": { name: "Anzu", avatarIndex: 3 },
-  "hehe~": { name: "Aya", avatarIndex: 4 },
-};
+const IDENTITY_PRESETS: Record<string, { name: string; avatarIndex: number }> =
+  {
+    "Noted.": { name: "Rin", avatarIndex: 1 },
+    "uwu~": { name: "Ai", avatarIndex: 2 },
+    "lol k": { name: "Anzu", avatarIndex: 3 },
+    "hehe~": { name: "Aya", avatarIndex: 4 },
+  };
 
 export function IdentityStep() {
   const {
@@ -18,7 +16,7 @@ export function IdentityStep() {
     onboardingStyle,
     handleOnboardingNext,
     setState,
-    t,
+    t: _t,
   } = useApp();
 
   const styles = onboardingOptions?.styles ?? [];
@@ -47,9 +45,7 @@ export function IdentityStep() {
 
   return (
     <>
-      <div className="onboarding-section-title">
-        Choose Your Agent
-      </div>
+      <div className="onboarding-section-title">Choose Your Agent</div>
       <div className="onboarding-divider">
         <div className="onboarding-divider-diamond" />
       </div>

package/src/components/shared/ShellHeaderControls.tsx

@@ -120,7 +120,7 @@ export function ShellHeaderControls({
     >
       <div className="flex shrink-0 items-center">
         <fieldset
-          className="inline-flex items-center gap-0.5 rounded-xl border border-border/60 bg-transparent p-0.5 shadow-sm dark:border-border/70 dark:bg-transparent"
+          className="inline-flex items-center gap-0.5 rounded-xl border border-border/60 bg-transparent p-0.5 shadow-sm dark:border-border dark:bg-transparent"
           data-testid="ui-shell-toggle"
           aria-label="Switch shell view"
         >

package/src/config/config-field.tsx

@@ -98,17 +98,14 @@ function PasswordFieldInner({ fp: props }: { fp: FieldRenderProps }) {
 
   const [visible, setVisible] = useState(false);
   const [busy, setBusy] = useState(false);
+  const [fieldValue, setFieldValue] = useState("");
   const inputRef = useRef<HTMLInputElement>(null);
   const onReveal = props.onReveal;
 
   const handleToggle = useCallback(async () => {
-    const input = inputRef.current;
-    if (!input) return;
-
     if (visible) {
-      // Currently showing -- hide it
+      // Hide — just toggle visibility, value stays in React state
       setVisible(false);
-      input.value = "";
       return;
     }
 
@@ -119,13 +116,14 @@ function PasswordFieldInner({ fp: props }: { fp: FieldRenderProps }) {
       setBusy(false);
       if (realValue != null) {
         setVisible(true);
-        input.value = realValue;
+        setFieldValue(realValue);
+        props.onChange(realValue);
       }
     } else {
       // Fallback: just toggle type (shows whatever is in the input)
       setVisible(true);
     }
-  }, [visible, onReveal]);
+  }, [visible, onReveal, props]);
 
   return (
     <div className="flex">
@@ -133,11 +131,12 @@ function PasswordFieldInner({ fp: props }: { fp: FieldRenderProps }) {
         ref={inputRef}
         className="flex-1 px-3 py-2 border border-[var(--border)] border-r-0 bg-[var(--card)] text-[13px] font-[var(--mono)] transition-all focus:border-[var(--accent)] focus:outline-none focus:ring-1 focus:ring-[var(--accent)] box-border h-[36px] rounded-l-sm placeholder:text-[var(--muted)] placeholder:opacity-60"
         type={visible ? "text" : "password"}
-        defaultValue=""
+        value={fieldValue}
         placeholder={placeholder}
         data-config-key={props.key}
         data-field-type="password"
         onChange={(e) => {
+          setFieldValue(e.target.value);
           props.onChange(e.target.value);
           fireAction(props, "change");
         }}

package/src/config/index.ts

@@ -1,11 +1,11 @@
 export * from "./config-catalog";
 export * from "./config-renderer";
-export * from "./ui-spec";
 export {
-  UiRenderer,
-  type UiRendererProps,
   evaluateUiVisibility,
   getSupportedComponents,
   runValidation as runUiValidation,
   sanitizeLinkHref,
+  UiRenderer,
+  type UiRendererProps,
 } from "./ui-renderer";
+export * from "./ui-spec";

package/src/hooks/useVoiceChat.ts

@@ -850,9 +850,11 @@ export function useVoiceChat(options: VoiceChatOptions): VoiceChatState {
       enabledRef.current = false;
 
       if (sttBackendRef.current === "talkmode") {
-        await getTalkModePlugin().stop().catch(() => {
-          /* ignore */
-        });
+        await getTalkModePlugin()
+          .stop()
+          .catch(() => {
+            /* ignore */
+          });
         await new Promise((resolve) =>
           window.setTimeout(resolve, TALKMODE_STOP_SETTLE_MS),
         );