@elizaos/ui 2.0.3-beta.2 → 2.0.3-beta.4

package/components/settings/VaultInventoryPanel.js

@@ -23,12 +23,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * 10-second auto-hide window.
  */
 import { ArrowRight, CheckCircle2, ChevronDown, ChevronRight, Copy, Eye, EyeOff, Loader2, Plus, Trash2, } from "lucide-react";
-import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { useAgentElement } from "../../agent-surface/index.js";
 import { useTranslation } from "../../state/TranslationContext.hooks.js";
 import { Button } from "../ui/button.js";
 import { Input } from "../ui/input.js";
 import { Label } from "../ui/label.js";
+import { Select, SelectContent, SelectItem, SelectValue } from "../ui/select.js";
+import { SettingsSelectTrigger } from "../ui/settings-controls.js";
 const CATEGORY_LABEL = {
     provider: "Providers",
     plugin: "Plugins",
@@ -135,16 +137,14 @@ export function VaultInventoryPanel(props = {}) {
         }
         return buckets;
     }, [entries]);
-    return (_jsxs("section", { "data-testid": "vault-inventory-panel", className: "space-y-2 pt-1", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-txt", children: t("vaultinventory.storedSecrets", {
-                                    defaultValue: "Stored secrets",
-                                }) }), _jsx("p", { className: "text-2xs text-muted", children: t("vaultinventory.storedSecrets.description", {
-                                    defaultValue: "Stored locally, grouped by category.",
-                                }) })] }), _jsxs(Button, { ref: addSecretRef, ...addSecretAgentProps, variant: "outline", size: "sm", className: "h-8 shrink-0 gap-1 rounded-sm px-2", onClick: () => setShowAdd((v) => !v), "aria-label": t("vaultinventory.addSecret", {
+    return (_jsxs("section", { "data-testid": "vault-inventory-panel", className: "space-y-2 pt-1", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("p", { className: "min-w-0 text-sm font-medium text-txt", children: t("vaultinventory.storedSecrets", {
+                            defaultValue: "Stored secrets",
+                        }) }), _jsxs(Button, { ref: addSecretRef, ...addSecretAgentProps, variant: "outline", size: "sm", className: "h-8 shrink-0 gap-1 rounded-sm px-2", onClick: () => setShowAdd((v) => !v), "aria-label": t("vaultinventory.addSecret", {
                             defaultValue: "Add secret",
                         }), children: [_jsx(Plus, { className: "h-3.5 w-3.5", "aria-hidden": true }), t("vaultinventory.addSecret", { defaultValue: "Add secret" })] })] }), error && (_jsx("div", { "aria-live": "polite", "data-testid": "vault-inventory-error", className: "rounded-sm border border-danger/40 bg-danger/10 px-3 py-1.5 text-xs text-danger", children: error })), showAdd && (_jsx(AddSecretForm, { onClose: () => setShowAdd(false), onSaved: () => {
                     setShowAdd(false);
                     onChanged();
-                } })), entries === null ? (_jsxs("div", { className: "flex items-center gap-2 px-1 py-3 text-xs text-muted", children: [_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin", "aria-hidden": true }), " Loading\u2026"] })) : entries.length === 0 ? (_jsx("div", { "data-testid": "vault-inventory-empty", className: "rounded-sm border border-dashed border-border/50 bg-card/20 px-3 py-3 text-center text-xs text-muted", children: "No secrets yet. Add an API key." })) : (_jsx("div", { className: "space-y-3", children: CATEGORY_ORDER.map((cat) => {
+                } })), entries === null ? (_jsxs("div", { className: "flex items-center gap-2 px-1 py-3 text-xs text-muted", children: [_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin", "aria-hidden": true }), " Loading\u2026"] })) : entries.length === 0 ? (_jsx("p", { "data-testid": "vault-inventory-empty", className: "px-3 py-3 text-center text-xs text-muted", children: "No secrets yet. Add an API key." })) : (_jsx("div", { className: "space-y-3", children: CATEGORY_ORDER.map((cat) => {
                     const rows = grouped[cat];
                     if (rows.length === 0)
                         return null;
@@ -152,11 +152,11 @@ export function VaultInventoryPanel(props = {}) {
                 }) }))] }));
 }
 // ── Category group ─────────────────────────────────────────────────
-function CategoryGroup({ category, entries, onChanged, onJumpToRouting, focusKey, focusProfileId, onFocusApplied, }) {
-    return (_jsxs("div", { "data-testid": `vault-category-${category}`, className: "space-y-1", children: [_jsx("p", { className: "text-2xs font-semibold text-muted", children: CATEGORY_LABEL[category] }), _jsx("ul", { className: "space-y-1 rounded-sm border border-border/40 bg-card/30 p-1", children: entries.map((entry) => (_jsx("li", { children: _jsx(EntryRow, { entry: entry, onChanged: onChanged, onJumpToRouting: onJumpToRouting, focusKey: focusKey, focusProfileId: focusProfileId, onFocusApplied: onFocusApplied }) }, entry.key))) })] }));
-}
+const CategoryGroup = memo(function CategoryGroup({ category, entries, onChanged, onJumpToRouting, focusKey, focusProfileId, onFocusApplied, }) {
+    return (_jsxs("div", { "data-testid": `vault-category-${category}`, className: "space-y-1", children: [_jsx("p", { className: "text-2xs font-semibold uppercase tracking-[0.08em] text-muted/70", children: CATEGORY_LABEL[category] }), _jsx("ul", { className: "space-y-1", children: entries.map((entry) => (_jsx("li", { children: _jsx(EntryRow, { entry: entry, onChanged: onChanged, onJumpToRouting: onJumpToRouting, focusKey: focusKey, focusProfileId: focusProfileId, onFocusApplied: onFocusApplied }) }, entry.key))) })] }));
+});
 // ── Single entry row ───────────────────────────────────────────────
-function EntryRow({ entry, onChanged, onJumpToRouting, focusKey, focusProfileId, onFocusApplied, }) {
+const EntryRow = memo(function EntryRow({ entry, onChanged, onJumpToRouting, focusKey, focusProfileId, onFocusApplied, }) {
     const { t } = useTranslation();
     const [revealed, setRevealed] = useState(null);
     const [revealError, setRevealError] = useState(null);
@@ -233,7 +233,7 @@ function EntryRow({ entry, onChanged, onJumpToRouting, focusKey, focusProfileId,
     }, [entry.key, entry.label, onChanged]);
     const profileCount = entry.profiles?.length ?? 0;
     return (_jsxs("div", { ref: rowRef, "data-testid": `vault-entry-row-${entry.key}`, className: "rounded-sm px-2 py-1.5 hover:bg-bg-muted/30", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", className: "h-6 w-6 shrink-0 rounded-sm p-0 text-muted", onClick: () => setExpanded((v) => !v), "aria-label": expanded ? "Collapse" : "Expand", children: expanded ? (_jsx(ChevronDown, { className: "h-3.5 w-3.5", "aria-hidden": true })) : (_jsx(ChevronRight, { className: "h-3.5 w-3.5", "aria-hidden": true })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-xs font-medium text-txt", children: entry.label }), _jsx("p", { className: "truncate font-mono text-2xs text-muted", children: entry.key })] }), profileCount > 0 && (_jsxs("span", { "data-testid": `profile-badge-${entry.key}`, className: "shrink-0 rounded-full border border-accent/40 bg-accent/10 px-1.5 py-0.5 text-2xs font-medium text-accent", children: [profileCount, " profile", profileCount === 1 ? "" : "s"] })), !revealed ? (_jsxs(Button, { ref: revealRef, ...revealAgentProps, variant: "ghost", size: "sm", className: "h-7 shrink-0 gap-1 rounded-sm px-2 text-xs text-muted", onClick: () => void reveal(), disabled: revealing, "aria-label": `Reveal ${entry.label}`, children: [revealing ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin", "aria-hidden": true })) : (_jsx(Eye, { className: "h-3.5 w-3.5", "aria-hidden": true })), "Reveal"] })) : (_jsxs(Button, { ref: revealRef, ...revealAgentProps, variant: "ghost", size: "sm", className: "h-7 shrink-0 gap-1 rounded-sm px-2 text-xs text-muted", onClick: hide, "aria-label": `Hide ${entry.label}`, children: [_jsx(EyeOff, { className: "h-3.5 w-3.5", "aria-hidden": true }), "Hide"] })), _jsx(Button, { ref: deleteRef, ...deleteAgentProps, variant: "ghost", size: "sm", className: "h-7 w-7 shrink-0 rounded-sm p-0 text-muted hover:text-danger", onClick: () => void onDelete(), "aria-label": `Delete ${entry.label}`, children: _jsx(Trash2, { className: "h-3.5 w-3.5", "aria-hidden": true }) })] }), revealed && (_jsxs("div", { "data-testid": `vault-revealed-${entry.key}`, className: "mt-1.5 flex items-center gap-2 rounded-sm border border-border/50 bg-bg/40 p-2", children: [_jsx("code", { className: "flex-1 truncate font-mono text-2xs text-txt", children: revealed.value }), revealed.source === "profile" && revealed.profileId && (_jsx("span", { className: "shrink-0 rounded-full border border-accent/40 bg-accent/10 px-1.5 py-0.5 text-2xs text-accent", children: revealed.profileId })), _jsxs(Button, { variant: "ghost", size: "sm", className: "h-6 shrink-0 gap-1 rounded-sm px-2 text-2xs", onClick: () => void copy(), "aria-label": t("vaultinventory.copy", { defaultValue: "Copy" }), children: [_jsx(Copy, { className: "h-3 w-3", "aria-hidden": true }), " ", t("vaultinventory.copy", { defaultValue: "Copy" })] })] })), revealError && (_jsx("p", { className: "mt-1 text-2xs text-danger", children: revealError })), expanded && (_jsx(ProfilesPanel, { entry: entry, onChanged: onChanged, onJumpToRouting: onJumpToRouting, highlightProfileId: focusKey === entry.key ? focusProfileId : null }))] }));
-}
+});
 // ── Profiles management ────────────────────────────────────────────
 function ProfilesPanel({ entry, onChanged, onJumpToRouting, highlightProfileId, }) {
     const { t } = useTranslation();
@@ -359,7 +359,7 @@ function ProfilesPanel({ entry, onChanged, onJumpToRouting, highlightProfileId,
         }
         onChanged();
     }, [entry.key, onChanged]);
-    return (_jsxs("div", { "data-testid": `profiles-panel-${entry.key}`, className: "mt-2 space-y-2 rounded-sm border border-border/40 bg-bg/30 p-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("p", { className: "text-2xs font-semibold text-muted", children: t("vaultinventory.profiles.title", { defaultValue: "Profiles" }) }), _jsxs("div", { className: "flex items-center gap-1", children: [hasProfiles && onJumpToRouting && (_jsxs(Button, { ref: jumpRoutingRef, ...jumpRoutingAgentProps, variant: "ghost", size: "sm", className: "h-6 gap-1 rounded-sm px-2 text-2xs", onClick: () => onJumpToRouting(entry.key), "aria-label": t("vaultinventory.profiles.routingRulesFor", {
+    return (_jsxs("div", { "data-testid": `profiles-panel-${entry.key}`, className: "mt-2 space-y-2 border-l-2 border-border/40 pl-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("p", { className: "text-2xs font-semibold text-muted", children: t("vaultinventory.profiles.title", { defaultValue: "Profiles" }) }), _jsxs("div", { className: "flex items-center gap-1", children: [hasProfiles && onJumpToRouting && (_jsxs(Button, { ref: jumpRoutingRef, ...jumpRoutingAgentProps, variant: "ghost", size: "sm", className: "h-6 gap-1 rounded-sm px-2 text-2xs", onClick: () => onJumpToRouting(entry.key), "aria-label": t("vaultinventory.profiles.routingRulesFor", {
                                     label: entry.label,
                                     defaultValue: "Routing rules for {{label}}",
                                 }), children: [t("vaultinventory.profiles.routingRules", {
@@ -372,7 +372,7 @@ function ProfilesPanel({ entry, onChanged, onJumpToRouting, highlightProfileId,
                                     defaultValue: "Enable profiles for this key",
                                 }), children: [migrating ? (_jsx(Loader2, { className: "h-3 w-3 animate-spin", "aria-hidden": true })) : (_jsx(Plus, { className: "h-3 w-3", "aria-hidden": true })), t("vaultinventory.profiles.enable", {
                                         defaultValue: "Enable profiles",
-                                    })] }))] })] }), err && (_jsx("p", { className: "text-2xs text-danger", "aria-live": "polite", children: err })), hasProfiles && (_jsx("ul", { className: "space-y-1", children: profiles.map((p) => (_jsx(ProfileRow, { entryKey: entry.key, profileId: p.id, profileLabel: p.label, active: entry.activeProfile === p.id, highlight: highlightProfileId === p.id, onActivate: () => void onActivate(p.id), onDelete: () => void onDelete(p.id) }, p.id))) })), showAdd && (_jsxs("form", { onSubmit: onAdd, "data-testid": `add-profile-form-${entry.key}`, className: "space-y-1.5 rounded-sm border border-border/40 bg-card/40 p-2", children: [_jsxs("div", { className: "grid grid-cols-1 gap-1.5 sm:grid-cols-2", children: [_jsxs("div", { children: [_jsx(Label, { className: "text-2xs text-muted", children: t("vaultinventory.profiles.idLabel", {
+                                    })] }))] })] }), err && (_jsx("p", { className: "text-2xs text-danger", "aria-live": "polite", children: err })), hasProfiles && (_jsx("ul", { className: "space-y-1", children: profiles.map((p) => (_jsx(ProfileRow, { entryKey: entry.key, profileId: p.id, profileLabel: p.label, active: entry.activeProfile === p.id, highlight: highlightProfileId === p.id, onActivate: () => void onActivate(p.id), onDelete: () => void onDelete(p.id) }, p.id))) })), showAdd && (_jsxs("form", { onSubmit: onAdd, "data-testid": `add-profile-form-${entry.key}`, className: "space-y-1.5 border-l-2 border-border/40 pl-3", children: [_jsxs("div", { className: "grid grid-cols-1 gap-1.5 sm:grid-cols-2", children: [_jsxs("div", { children: [_jsx(Label, { className: "text-2xs text-muted", children: t("vaultinventory.profiles.idLabel", {
                                             defaultValue: "Profile id",
                                         }) }), _jsx(Input, { ref: newIdRef, ...newIdAgentProps, value: newId, onChange: (e) => setNewId(e.target.value), placeholder: t("vaultinventory.profiles.idPlaceholder", {
                                             defaultValue: "work",
@@ -392,8 +392,7 @@ function ProfilesPanel({ entry, onChanged, onJumpToRouting, highlightProfileId,
                                         defaultValue: "Save profile",
                                     }) })] })] }))] }));
 }
-// ── Single profile row ─────────────────────────────────────────────
-function ProfileRow({ entryKey, profileId, profileLabel, active, highlight, onActivate, onDelete, }) {
+const ProfileRow = memo(function ProfileRow({ entryKey, profileId, profileLabel, active, highlight, onActivate, onDelete, }) {
     const { t } = useTranslation();
     const { ref: activateRef, agentProps: activateAgentProps } = useAgentElement({
         id: `vault-profile-activate-${entryKey}-${profileId}`,
@@ -410,7 +409,7 @@ function ProfileRow({ entryKey, profileId, profileLabel, active, highlight, onAc
         group: "vault-profiles",
         onActivate: onDelete,
     });
-    return (_jsxs("li", { className: `flex items-center gap-2 rounded-sm px-1.5 py-1 text-xs ${highlight ? "ring-1 ring-accent/40" : ""}`, children: [_jsx("input", { ref: activateRef, ...activateAgentProps, type: "radio", name: `active-${entryKey}`, checked: active, onChange: onActivate, className: "h-3 w-3 cursor-pointer accent-accent", "aria-current": active ? "true" : undefined, "aria-label": t("vaultinventory.profiles.makeActive", {
+    return (_jsxs("li", { className: `flex items-center gap-2 rounded-sm px-1.5 py-1 text-xs ${highlight ? " " : ""}`, children: [_jsx("input", { ref: activateRef, ...activateAgentProps, type: "radio", name: `active-${entryKey}`, checked: active, onChange: onActivate, className: "h-3 w-3 cursor-pointer accent-accent", "aria-current": active ? "true" : undefined, "aria-label": t("vaultinventory.profiles.makeActive", {
                     label: profileLabel,
                     defaultValue: "Make {{label}} active",
                 }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate font-medium text-txt", children: profileLabel }), _jsx("p", { className: "truncate font-mono text-2xs text-muted", children: profileId })] }), active && (_jsxs("span", { className: "shrink-0 inline-flex items-center gap-0.5 rounded-full border border-accent/40 bg-accent/10 px-1.5 py-0.5 text-2xs font-medium text-accent", children: [_jsx(CheckCircle2, { className: "h-3 w-3", "aria-hidden": true }), " ", t("vaultinventory.profiles.active", {
@@ -419,7 +418,14 @@ function ProfileRow({ entryKey, profileId, profileLabel, active, highlight, onAc
                     label: profileLabel,
                     defaultValue: "Delete profile {{label}}",
                 }), onClick: onDelete, children: _jsx(Trash2, { className: "h-3 w-3", "aria-hidden": true }) })] }));
-}
+}, 
+// onActivate/onDelete are allocated inline per row but always act on this
+// row's profileId, so compare only the render-affecting primitive props.
+(prev, next) => prev.entryKey === next.entryKey &&
+    prev.profileId === next.profileId &&
+    prev.profileLabel === next.profileLabel &&
+    prev.active === next.active &&
+    prev.highlight === next.highlight);
 // ── Add-secret form ────────────────────────────────────────────────
 function AddSecretForm({ onClose, onSaved, }) {
     const { t } = useTranslation();
@@ -510,13 +516,11 @@ function AddSecretForm({ onClose, onSaved, }) {
         }
         onSaved();
     }, [category, key, label, providerId, value, onSaved]);
-    return (_jsxs("form", { onSubmit: onSubmit, "data-testid": "vault-add-secret-form", className: "space-y-2 rounded-sm border border-border/50 bg-card/30 p-2", children: [_jsx("p", { className: "text-2xs text-muted", children: t("vaultinventory.addForm.help", {
-                    defaultValue: "Stored locally and encrypted at rest.",
-                }) }), _jsxs("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: [_jsxs("div", { children: [_jsx(Label, { className: "text-2xs text-muted", children: t("vaultinventory.addForm.key.label", { defaultValue: "Key" }) }), _jsx(Input, { ref: keyRef, ...keyAgentProps, value: key, onChange: (e) => setKey(e.target.value), placeholder: "OPENROUTER_API_KEY", className: "h-8 font-mono text-xs", autoComplete: "off", required: true })] }), _jsxs("div", { children: [_jsx(Label, { className: "text-2xs text-muted", children: t("vaultinventory.addForm.displayLabel.label", {
+    return (_jsxs("form", { onSubmit: onSubmit, "data-testid": "vault-add-secret-form", className: "space-y-2 border-l-2 border-border/50 pl-3", children: [_jsxs("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: [_jsxs("div", { children: [_jsx(Label, { className: "text-2xs text-muted", children: t("vaultinventory.addForm.key.label", { defaultValue: "Key" }) }), _jsx(Input, { ref: keyRef, ...keyAgentProps, value: key, onChange: (e) => setKey(e.target.value), placeholder: "OPENROUTER_API_KEY", className: "h-8 font-mono text-xs", autoComplete: "off", required: true })] }), _jsxs("div", { children: [_jsx(Label, { className: "text-2xs text-muted", children: t("vaultinventory.addForm.displayLabel.label", {
                                     defaultValue: "Display label",
                                 }) }), _jsx(Input, { ref: labelRef, ...labelAgentProps, value: label, onChange: (e) => setLabel(e.target.value), placeholder: "OpenRouter", className: "h-8 text-xs", autoComplete: "off" })] })] }), _jsxs("div", { children: [_jsx(Label, { className: "text-2xs text-muted", children: t("vaultinventory.addForm.value.label", { defaultValue: "Value" }) }), _jsx(Input, { ref: valueRef, ...valueAgentProps, type: "password", value: value, onChange: (e) => setValue(e.target.value), className: "h-8 font-mono text-xs", autoComplete: "new-password", required: true })] }), _jsxs("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: [_jsxs("div", { children: [_jsx(Label, { className: "text-2xs text-muted", children: t("vaultinventory.addForm.category.label", {
                                     defaultValue: "Category",
-                                }) }), _jsx("select", { ref: categoryRef, ...categoryAgentProps, value: category, onChange: (e) => setCategory(e.target.value), className: "block h-8 w-full rounded-sm border border-border bg-bg px-2 text-xs text-txt", children: CATEGORY_INPUT_OPTIONS.map((opt) => (_jsx("option", { value: opt.value, children: t(opt.labelKey, { defaultValue: opt.defaultLabel }) }, opt.value))) })] }), _jsxs("div", { children: [_jsx(Label, { className: "text-2xs text-muted", children: t("vaultinventory.addForm.providerId.label", {
+                                }) }), _jsxs(Select, { value: category, onValueChange: (value) => setCategory(value), children: [_jsx(SettingsSelectTrigger, { ref: categoryRef, variant: "soft", className: "block w-full", "aria-label": "Secret category", ...categoryAgentProps, children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: CATEGORY_INPUT_OPTIONS.map((opt) => (_jsx(SelectItem, { value: opt.value, children: t(opt.labelKey, { defaultValue: opt.defaultLabel }) }, opt.value))) })] })] }), _jsxs("div", { children: [_jsx(Label, { className: "text-2xs text-muted", children: t("vaultinventory.addForm.providerId.label", {
                                     defaultValue: "Provider id (optional)",
                                 }) }), _jsx(Input, { ref: providerRef, ...providerAgentProps, value: providerId, onChange: (e) => setProviderId(e.target.value), placeholder: "openrouter", className: "h-8 text-xs", autoComplete: "off" })] })] }), err && (_jsx("p", { className: "text-2xs text-danger", "aria-live": "polite", children: err })), _jsxs("div", { className: "flex justify-end gap-2 pt-1", children: [_jsx(Button, { ref: cancelRef, ...cancelAgentProps, type: "button", variant: "ghost", size: "sm", className: "h-7 rounded-sm px-3 text-xs", onClick: onClose, disabled: submitting, children: t("vaultinventory.addForm.cancel", { defaultValue: "Cancel" }) }), _jsx(Button, { ref: saveRef, ...saveAgentProps, type: "submit", variant: "default", size: "sm", className: "h-7 rounded-sm px-3 text-xs", disabled: submitting || !key.trim() || !value, children: submitting
                             ? t("vaultinventory.addForm.saving", { defaultValue: "Saving…" })

package/components/settings/VoiceConfigView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VoiceConfigView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/VoiceConfigView.tsx"],"names":[],"mappings":"AA0DA,wBAAgB,oBAAoB,4CA6XnC;AA8jBD,wBAAgB,eAAe,4CAyZ9B"}
+{"version":3,"file":"VoiceConfigView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/VoiceConfigView.tsx"],"names":[],"mappings":"AAoDA,wBAAgB,oBAAoB,4CAkXnC;AA4jBD,wBAAgB,eAAe,4CAyZ9B"}

package/components/settings/VoiceConfigView.helpers.d.ts

@@ -1,3 +1,3 @@
-import type { DesktopClickAuditItem } from "../../utils";
+import type { DesktopClickAuditItem } from "../../utils/index.js";
 export declare const DESKTOP_TALKMODE_CLICK_AUDIT: readonly DesktopClickAuditItem[];
 //# sourceMappingURL=VoiceConfigView.helpers.d.ts.map

package/components/settings/VoiceConfigView.js

@@ -7,11 +7,11 @@ import { invokeDesktopBridgeRequest, isElectrobunRuntime } from "../../bridge/in
 import { getSwabblePlugin, } from "../../bridge/native-plugins.js";
 import { dispatchWindowEvent, VOICE_CONFIG_UPDATED_EVENT } from "../../events/index.js";
 import { useDefaultProviderPresets } from "../../hooks/useDefaultProviderPresets.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
 import { hasConfiguredApiKey, PREMADE_VOICES, sanitizeApiKey, VOICE_PROVIDERS, } from "../../voice/index.js";
 import { CloudConnectionStatus, CloudSourceModeToggle, } from "../cloud/CloudSourceControls.js";
 import { Button } from "../ui/button.js";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "../ui/card.js";
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card.js";
 import { Input } from "../ui/input.js";
 import { SaveFooter } from "../ui/save-footer.js";
 import { SettingsInput } from "../ui/settings-controls.js";
@@ -34,7 +34,7 @@ export function DesktopTalkModePanel() {
     const [busyAction, setBusyAction] = useState(null);
     const [error, setError] = useState(null);
     const [message, setMessage] = useState(null);
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const [phrase, setPhrase] = useState(t("voiceconfigview.testPhrase"));
     const [panelState, setPanelState] = useState({
         state: "idle",
@@ -176,9 +176,9 @@ export function DesktopTalkModePanel() {
     if (!desktopRuntime) {
         return (_jsx(Card, { className: "border-border/60 bg-card/92 ", children: _jsx(CardContent, { className: "px-4 py-4 text-xs leading-5 text-muted", children: t("voiceconfigview.DesktopTalkModeDesktopOnly") }) }));
     }
-    return (_jsxs(Card, { className: "border-border/60 bg-card/92 ", children: [_jsx(CardHeader, { className: "px-4 py-4 pb-0", children: _jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { children: [_jsx(CardTitle, { className: "text-sm", children: t("voiceconfigview.DesktopTalkMode") }), _jsx(CardDescription, { className: "mt-1 text-xs-tight leading-5", children: t("voiceconfigview.TalkModeDescription") })] }), _jsx(Button, { ref: refreshRef, variant: "outline", size: "sm", className: "min-h-10 rounded-sm px-3 text-xs-tight font-semibold", onClick: () => void runAction("voice-talkmode-refresh", async () => { }, t("voiceconfigview.TalkModeStateRefreshed")), disabled: loading || busyAction === "voice-talkmode-refresh", ...refreshAgentProps, children: t("common.refresh") })] }) }), _jsxs(CardContent, { className: "flex flex-col gap-4 px-4 pb-4", children: [(error || message) && (_jsx("div", { className: `rounded-sm border px-3 py-2.5 text-xs-tight leading-5 ${error
+    return (_jsxs(Card, { className: "border-border/60 bg-card/92 ", children: [_jsx(CardHeader, { className: "px-4 py-4 pb-0", children: _jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [_jsx(CardTitle, { className: "text-sm", children: t("voiceconfigview.DesktopTalkMode") }), _jsx(Button, { ref: refreshRef, variant: "outline", size: "sm", className: "min-h-10 rounded-sm px-3 text-xs-tight font-semibold", onClick: () => void runAction("voice-talkmode-refresh", async () => { }, t("voiceconfigview.TalkModeStateRefreshed")), disabled: loading || busyAction === "voice-talkmode-refresh", ...refreshAgentProps, children: t("common.refresh") })] }) }), _jsxs(CardContent, { className: "flex flex-col gap-4 px-4 pb-4", children: [(error || message) && (_jsx("div", { className: `rounded-sm border px-3 py-2.5 text-xs-tight leading-5 ${error
                             ? "border-danger/40 bg-danger/10 text-danger"
-                            : "border-ok/40 bg-ok/10 text-ok"}`, children: error ?? message })), _jsxs("div", { className: "grid gap-2 sm:grid-cols-3", children: [_jsx(Card, { className: "border-border/50 bg-bg-hover/60 shadow-none", children: _jsxs(CardContent, { className: "px-2.5 py-2 text-xs-tight", children: [_jsx("div", { className: "text-xs text-muted", children: t("voiceconfigview.State") }), _jsx("div", { className: "font-semibold text-txt", children: panelState.state })] }) }), _jsx(Card, { className: "border-border/50 bg-bg-hover/60 shadow-none", children: _jsxs(CardContent, { className: "px-2.5 py-2 text-xs-tight", children: [_jsx("div", { className: "text-xs text-muted", children: t("common.enabled") }), _jsx("div", { className: "font-semibold text-txt", children: panelState.enabled ? t("common.yes") : t("common.no") })] }) }), _jsx(Card, { className: "border-border/50 bg-bg-hover/60 shadow-none", children: _jsxs(CardContent, { className: "px-2.5 py-2 text-xs-tight", children: [_jsx("div", { className: "text-xs text-muted", children: t("voiceconfigview.Speaking") }), _jsx("div", { className: "font-semibold text-txt", children: panelState.speaking ? t("common.yes") : t("common.no") })] }) })] }), _jsx(Input, { ref: phraseRef, type: "text", className: "min-h-10 rounded-sm bg-bg text-xs", value: phrase, onChange: (event) => setPhrase(event.target.value), placeholder: t("voiceconfigview.testPhrase"), ...phraseAgentProps }), _jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:flex-wrap", children: [_jsx(Button, { ref: startStopRef, variant: "outline", size: "sm", className: "min-h-10 rounded-sm px-3 text-xs-tight font-semibold", onClick: () => void runAction("voice-talkmode-start-stop", async () => {
+                            : "border-ok/40 bg-ok/10 text-ok"}`, children: error ?? message })), _jsxs("div", { className: "flex flex-wrap gap-x-6 gap-y-2 text-xs-tight", children: [_jsxs("div", { children: [_jsx("div", { className: "text-xs text-muted", children: t("voiceconfigview.State") }), _jsx("div", { className: "font-semibold text-txt", children: panelState.state })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs text-muted", children: t("common.enabled") }), _jsx("div", { className: "font-semibold text-txt", children: panelState.enabled ? t("common.yes") : t("common.no") })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs text-muted", children: t("voiceconfigview.Speaking") }), _jsx("div", { className: "font-semibold text-txt", children: panelState.speaking ? t("common.yes") : t("common.no") })] })] }), _jsx(Input, { ref: phraseRef, type: "text", className: "min-h-10 rounded-sm bg-bg text-xs", value: phrase, onChange: (event) => setPhrase(event.target.value), placeholder: t("voiceconfigview.testPhrase"), ...phraseAgentProps }), _jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:flex-wrap", children: [_jsx(Button, { ref: startStopRef, variant: "outline", size: "sm", className: "min-h-10 rounded-sm px-3 text-xs-tight font-semibold", onClick: () => void runAction("voice-talkmode-start-stop", async () => {
                                     if (panelState.enabled) {
                                         await invokeDesktopBridgeRequest({
                                             rpcMethod: "talkmodeStop",
@@ -232,12 +232,12 @@ function ModelSizeButton({ id, active, hint, onSelect, }) {
     return (_jsxs(Button, { ref: ref, variant: active ? "default" : "outline", size: "sm", className: "h-auto min-h-12 flex-col rounded-sm py-2", onClick: onSelect, ...agentProps, children: [_jsx("div", { className: "font-semibold", children: id }), hint && _jsx("div", { className: "mt-0.5 text-xs opacity-90", children: hint })] }));
 }
 function WakeWordSection({ serverConfig, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const [triggers, setTriggers] = useState(["eliza"]);
     const [triggerInput, setTriggerInput] = useState("");
     const [postTriggerGap, setPostTriggerGap] = useState(0.45);
     const [modelSize, setModelSize] = useState("base");
-    const [audioLevel, setAudioLevel] = useState(0);
+    const meterRef = useRef(null);
     const [enabled, setEnabled] = useState(false);
     useEffect(() => {
         void (async () => {
@@ -268,7 +268,13 @@ function WakeWordSection({ serverConfig, }) {
         void (async () => {
             try {
                 handle = await getSwabblePlugin().addListener("audioLevel", (evt) => {
-                    setAudioLevel(evt.level);
+                    // Write the meter directly to the DOM to avoid a React re-render of
+                    // the whole section on every (tens-of-Hz) mic frame. Drive a
+                    // compositor-only transform (scaleX) rather than `width` so the
+                    // per-frame update doesn't force layout.
+                    if (meterRef.current) {
+                        meterRef.current.style.transform = `scaleX(${Math.min(Math.max(evt.level, 0), 1)})`;
+                    }
                 });
             }
             catch {
@@ -393,19 +399,17 @@ function WakeWordSection({ serverConfig, }) {
                                     }), ...enableAgentProps })] })] }), _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 min-h-10 flex-wrap gap-1.5 rounded-sm border border-border/60 bg-bg px-2 py-2", children: [triggers.map((trigger) => (_jsxs("span", { className: "flex min-h-7 items-center gap-1 rounded-full border border-accent/30 bg-accent/10 px-2 py-1 text-xs text-txt", children: [trigger, triggers.length > 1 && (_jsx(RemoveTriggerButton, { trigger: trigger, onRemove: () => removeTrigger(trigger), label: t("voiceconfigview.RemoveTrigger", {
                                             defaultValue: 'Remove trigger "{{trigger}}"',
                                             trigger,
-                                        }) }))] }, trigger))), _jsx(Input, { ref: addTriggerRef, type: "text", className: "h-7 min-w-[120px] flex-1 border-0 bg-transparent px-1 text-xs shadow-none focus-visible:ring-0", placeholder: t("voiceconfigview.AddTrigger"), value: triggerInput, onChange: (e) => setTriggerInput(e.target.value), onKeyDown: (e) => {
+                                        }) }))] }, trigger))), _jsx(Input, { ref: addTriggerRef, type: "text", className: "h-7 min-w-[120px] flex-1 border-0 bg-transparent px-1 text-xs 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("");
                                     }
-                                }, ...addTriggerAgentProps })] }), _jsx("div", { className: "text-xs text-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.PostTriggerGap", {
+                                }, ...addTriggerAgentProps })] })] }), _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.PostTriggerGap", {
                                     defaultValue: "Post-trigger gap",
                                 }) }), _jsxs("span", { className: "text-xs text-muted", children: [postTriggerGap.toFixed(2), "s"] })] }), _jsx("input", { ref: gapRef, type: "range", min: 0.1, max: 2.0, step: 0.05, value: postTriggerGap, className: "w-full accent-accent", "aria-label": t("voiceconfigview.PostTriggerGap", {
                             defaultValue: "Post-trigger gap",
-                        }), onChange: (e) => void handlePostTriggerGapChange(parseFloat(e.target.value)), ...gapAgentProps }), _jsx("div", { className: "text-xs text-muted", children: t("voiceconfigview.PostTriggerGapHint", {
-                            defaultValue: "Quiet time after the wake word before listening resumes.",
-                        }) })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-xs font-semibold", children: t("voiceconfigview.ModelSize") }), _jsx("div", { className: "grid grid-cols-2 gap-1.5 xl:grid-cols-5", children: MODEL_SIZES.map((m) => (_jsx(ModelSizeButton, { id: m.id, active: modelSize === m.id, hint: m.hintKey ? t(m.hintKey) : undefined, onSelect: () => void handleModelSizeChange(m.id) }, 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-2 w-full overflow-hidden rounded-full bg-border/70", children: _jsx("div", { className: "h-full rounded-full bg-ok transition-all duration-75", style: { width: `${Math.min(audioLevel * 100, 100)}%` } }) })] })] }));
+                        }), onChange: (e) => void handlePostTriggerGapChange(parseFloat(e.target.value)), ...gapAgentProps })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-xs font-semibold", children: t("voiceconfigview.ModelSize") }), _jsx("div", { className: "grid grid-cols-2 gap-1.5 xl:grid-cols-5", children: MODEL_SIZES.map((m) => (_jsx(ModelSizeButton, { id: m.id, active: modelSize === m.id, hint: m.hintKey ? t(m.hintKey) : undefined, onSelect: () => void handleModelSizeChange(m.id) }, 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-2 w-full overflow-hidden rounded-full bg-border/70", children: _jsx("div", { ref: meterRef, className: "h-full w-full origin-left rounded-full bg-ok transition-transform duration-75", style: { transform: "scaleX(0)" } }) })] })] }));
 }
 function AsrProviderButton({ id, label, hint, active, onSelect, }) {
     const { ref, agentProps } = useAgentElement({
@@ -423,7 +427,7 @@ function AsrProviderButton({ id, label, hint, active, onSelect, }) {
  * hidden until the AdvancedToggle is on.
  */
 function AsrAdvancedSection({ currentAsrProvider, onChange, defaultAsrProvider, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const [localStatusBusy, setLocalStatusBusy] = useState(false);
     // A non-empty local-inference downloads list means the model bundle isn't
     // ready yet, so we show "downloading" rather than implying it's online.
@@ -452,14 +456,14 @@ function AsrAdvancedSection({ currentAsrProvider, onChange, defaultAsrProvider,
             cancelled = true;
         };
     }, [currentAsrProvider]);
-    return (_jsxs("div", { className: "rounded-sm border border-border/60 bg-card/92 p-4 flex flex-col gap-3", children: [_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-xs font-semibold text-muted", children: t("voiceconfigview.AsrProvider", {
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-[11px] font-semibold uppercase tracking-[0.08em] text-muted/70", children: t("voiceconfigview.AsrProvider", {
                             defaultValue: "Speech-to-text",
                         }) }), _jsx("span", { className: "text-xs text-muted", children: t("voiceconfigview.AsrDeviceDefault", {
                             defaultValue: "Device default: {{provider}}",
                             provider: defaultAsrProvider,
-                        }) })] }), _jsx("div", { className: "grid gap-2 sm:grid-cols-3", children: ASR_PROVIDERS.map((p) => (_jsx(AsrProviderButton, { id: p.id, label: p.label, hint: p.hint, active: currentAsrProvider === p.id, onSelect: () => onChange(p.id) }, p.id))) }), currentAsrProvider === "local-inference" && localStatusBusy && (_jsx("div", { className: "rounded-sm border border-warn/35 bg-warn/10 px-3 py-2 text-xs leading-5 text-warn", children: t("voiceconfigview.AsrDownloading", {
+                        }) })] }), _jsx("div", { className: "grid gap-2 sm:grid-cols-3", children: ASR_PROVIDERS.map((p) => (_jsx(AsrProviderButton, { id: p.id, label: p.label, hint: p.hint, active: currentAsrProvider === p.id, onSelect: () => onChange(p.id) }, p.id))) }), currentAsrProvider === "local-inference" && localStatusBusy && (_jsx("p", { className: "text-xs leading-5 text-warn", children: t("voiceconfigview.AsrDownloading", {
                     defaultValue: "Downloading local model — using cloud until ready.",
-                }) })), currentAsrProvider === "openai" && (_jsx("div", { className: "rounded-sm border border-border/40 bg-bg-hover/60 px-3 py-2 text-xs leading-5 text-muted", children: t("voiceconfigview.AsrUsesOpenAiKey", {
+                }) })), currentAsrProvider === "openai" && (_jsx("p", { className: "text-xs leading-5 text-muted", children: t("voiceconfigview.AsrUsesOpenAiKey", {
                     defaultValue: "Uses your OpenAI API key from the Providers section.",
                 }) }))] }));
 }
@@ -488,7 +492,9 @@ function PremadeVoiceButton({ voiceId, name, hint, active, onSelect, }) {
             : "border-border/60 bg-bg text-txt hover:border-border-strong hover:bg-surface"}`, onClick: onSelect, ...agentProps, children: [_jsx("div", { className: "font-semibold text-xs truncate w-full", children: name }), _jsx("div", { className: "text-xs text-muted truncate w-full", children: hint })] }));
 }
 export function VoiceConfigView() {
-    const { t, elizaCloudConnected, elizaCloudVoiceProxyAvailable } = useApp();
+    const t = useAppSelector((s) => s.t);
+    const elizaCloudConnected = useAppSelector((s) => s.elizaCloudConnected);
+    const elizaCloudVoiceProxyAvailable = useAppSelector((s) => s.elizaCloudVoiceProxyAvailable);
     const [voiceConfig, setVoiceConfig] = useState({});
     const [swabbleServerConfig, setSwabbleServerConfig] = useState(null);
     const [loading, setLoading] = useState(true);
@@ -685,9 +691,7 @@ export function VoiceConfigView() {
                                             audioRef.current.pause();
                                             setTesting(false);
                                         }
-                                    }, children: t("common.stop") })) : null] }) })) : null] })), currentProvider === "edge" && (_jsx(SettingsGroup, { bare: true, children: _jsx("div", { className: "rounded-lg border border-border bg-card px-4 py-3 text-xs leading-5 text-muted", children: t("voiceconfigview.EdgeTTSUsesMicros") }) })), currentProvider === "robot-voice" && (_jsx(SettingsGroup, { bare: true, children: _jsx("div", { className: "rounded-lg border border-border bg-card px-4 py-3 text-xs leading-5 text-muted", children: t("voiceconfigview.SimpleVoiceUsesYo") }) })), _jsx(SettingsGroup, { children: _jsx(SettingsRow, { label: t("voiceconfigview.advancedSettings", {
+                                    }, children: t("common.stop") })) : null] }) })) : null] })), currentProvider === "edge" && (_jsx(SettingsGroup, { bare: true, children: _jsx("p", { className: "py-1 text-xs leading-5 text-muted", children: t("voiceconfigview.EdgeTTSUsesMicros") }) })), currentProvider === "robot-voice" && (_jsx(SettingsGroup, { bare: true, children: _jsx("p", { className: "py-1 text-xs leading-5 text-muted", children: t("voiceconfigview.SimpleVoiceUsesYo") }) })), _jsx(SettingsGroup, { children: _jsx(SettingsRow, { label: t("voiceconfigview.advancedSettings", {
                         defaultValue: "Advanced settings",
-                    }), description: t("voiceconfigview.advancedSettingsHint", {
-                        defaultValue: "Show ASR (speech-to-text) provider picker and per-provider overrides.",
                     }), control: _jsx(AdvancedToggle, { label: "Advanced" }) }) }), advancedEnabled && (_jsx(SettingsGroup, { bare: true, children: _jsx(AsrAdvancedSection, { currentAsrProvider: currentAsrProvider, onChange: handleAsrProviderChange, defaultAsrProvider: providerDefaults.asr }) })), _jsx(SettingsGroup, { bare: true, title: t("voiceconfigview.WakeWord"), children: _jsx(WakeWordSection, { serverConfig: swabbleServerConfig }) }), _jsx(SettingsGroup, { bare: true, children: _jsx(DesktopTalkModePanel, {}) }), _jsx(SaveFooter, { dirty: dirty, saving: saving, saveError: saveError, saveSuccess: saveSuccess, onSave: () => void handleSave() })] }));
 }

package/components/settings/VoiceProfileSection.d.ts

@@ -4,16 +4,14 @@
  * comes from `VoiceProfilesClient`; an empty list renders the empty state.
  */
 import * as React from "react";
-import type { VoiceProfile, VoiceProfilesClient } from "../../api/client-voice-profiles";
+import type { VoiceProfile, VoiceProfilesClient } from "../../api/client-voice-profiles.js";
 export interface VoiceProfileSectionProps {
     /** Adapter supplied by the parent that holds the `ElizaClient`. */
     profilesClient: VoiceProfilesClient;
     /** Pre-loaded profiles (skips initial fetch — useful for tests). */
     initialProfiles?: VoiceProfile[];
-    /** Render the panel inside a settings card chrome (default true). */
-    framed?: boolean;
     className?: string;
 }
-export declare function VoiceProfileSection({ profilesClient, initialProfiles, framed, className, }: VoiceProfileSectionProps): React.ReactElement;
+export declare function VoiceProfileSection({ profilesClient, initialProfiles, className, }: VoiceProfileSectionProps): React.ReactElement;
 export default VoiceProfileSection;
 //# sourceMappingURL=VoiceProfileSection.d.ts.map

package/components/settings/VoiceProfileSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VoiceProfileSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/VoiceProfileSection.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EACV,YAAY,EACZ,mBAAmB,EACpB,MAAM,iCAAiC,CAAC;AAKzC,MAAM,WAAW,wBAAwB;IACvC,mEAAmE;IACnE,cAAc,EAAE,mBAAmB,CAAC;IACpC,oEAAoE;IACpE,eAAe,CAAC,EAAE,YAAY,EAAE,CAAC;IACjC,qEAAqE;IACrE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAuRD,wBAAgB,mBAAmB,CAAC,EAClC,cAAc,EACd,eAAe,EACf,MAAa,EACb,SAAS,GACV,EAAE,wBAAwB,GAAG,KAAK,CAAC,YAAY,CA+Q/C;AAED,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"VoiceProfileSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/VoiceProfileSection.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EACV,YAAY,EACZ,mBAAmB,EACpB,MAAM,iCAAiC,CAAC;AAOzC,MAAM,WAAW,wBAAwB;IACvC,mEAAmE;IACnE,cAAc,EAAE,mBAAmB,CAAC;IACpC,oEAAoE;IACpE,eAAe,CAAC,EAAE,YAAY,EAAE,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAsSD,wBAAgB,mBAAmB,CAAC,EAClC,cAAc,EACd,eAAe,EACf,SAAS,GACV,EAAE,wBAAwB,GAAG,KAAK,CAAC,YAAY,CA0Q/C;AAED,eAAe,mBAAmB,CAAC"}

package/components/settings/VoiceProfileSection.js

@@ -4,12 +4,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * pinned at top) with rename / set-relationship / delete affordances. Data
  * comes from `VoiceProfilesClient`; an empty list renders the empty state.
  */
-import { Crown, Download, Mic, Pencil, Trash2, Users } from "lucide-react";
+import { Crown, Download, Mic, Pencil, Trash2 } from "lucide-react";
 import * as React from "react";
 import { useAgentElement } from "../../agent-surface/index.js";
 import { cn } from "../../lib/utils.js";
 import { useTranslation } from "../../state/TranslationContext.hooks.js";
 import { Button } from "../ui/button.js";
+import { Select, SelectContent, SelectItem, SelectValue } from "../ui/select.js";
+import { SettingsSelectTrigger } from "../ui/settings-controls.js";
 function compareProfiles(a, b) {
     if (a.isOwner !== b.isOwner)
         return a.isOwner ? -1 : 1;
@@ -31,6 +33,13 @@ function relationshipRank(cohort) {
             return 3;
     }
 }
+/**
+ * Sentinel for the "(no label)" relationship choice. The profile stores a
+ * relationship as `string | null`; Radix Select forbids an empty-string item
+ * value, so this sentinel stands in for "no relationship" and maps back to
+ * `null` at the value/onChange boundary.
+ */
+const NO_RELATIONSHIP_VALUE = "__none__";
 const COMMON_RELATIONSHIPS = [
     "wife",
     "husband",
@@ -43,7 +52,8 @@ const COMMON_RELATIONSHIPS = [
     "colleague",
     "roommate",
 ];
-function VoiceProfileRow({ profile, isEditingThis, renameValue, setRenameValue, setRenameId, dispatch, t, }) {
+const VoiceProfileRow = React.memo(function VoiceProfileRow({ profile, isEditingThis, renameValue, setRenameValue, setRenameId, dispatch, }) {
+    const { t } = useTranslation();
     const { ref: nameRef, agentProps: nameAgentProps } = useAgentElement({
         id: `voice-profile-name-${profile.id}`,
         role: "button",
@@ -73,13 +83,13 @@ function VoiceProfileRow({ profile, isEditingThis, renameValue, setRenameValue,
             defaultValue: "Set relationship",
         }),
         group: "voice-profiles-list",
-        getValue: () => profile.relationshipLabel ?? "",
+        getValue: () => profile.relationshipLabel ?? NO_RELATIONSHIP_VALUE,
         onFill: (value) => dispatch({
             type: "set-relationship",
             id: profile.id,
-            relationshipLabel: value || null,
+            relationshipLabel: value && value !== NO_RELATIONSHIP_VALUE ? value : null,
         }),
-        options: ["", ...COMMON_RELATIONSHIPS],
+        options: [NO_RELATIONSHIP_VALUE, ...COMMON_RELATIONSHIPS],
     });
     const { ref: renameBtnRef, agentProps: renameBtnAgentProps } = useAgentElement({
         id: `voice-profile-rename-${profile.id}`,
@@ -102,7 +112,7 @@ function VoiceProfileRow({ profile, isEditingThis, renameValue, setRenameValue,
         group: "voice-profiles-list",
         onActivate: () => dispatch({ type: "delete", id: profile.id }),
     });
-    return (_jsxs("li", { "data-testid": `voice-profile-row-${profile.id}`, "data-is-owner": profile.isOwner ? "true" : "false", "data-cohort": profile.cohort, className: "flex items-center gap-3 px-4 py-3", children: [profile.isOwner ? (_jsx(Crown, { className: "h-4 w-4 shrink-0 text-accent", "aria-label": t("voiceprofile.owner", { defaultValue: "Owner" }), "data-testid": `voice-profile-crown-${profile.id}` })) : (_jsx("span", { className: "inline-block h-4 w-4 shrink-0", "aria-hidden": "true" })), _jsxs("div", { className: "min-w-0 flex-1", children: [isEditingThis ? (_jsx("input", { ref: renameInputRef, type: "text", value: renameValue, onChange: (e) => setRenameValue(e.target.value), onBlur: () => {
+    return (_jsxs("li", { "data-testid": `voice-profile-row-${profile.id}`, "data-is-owner": profile.isOwner ? "true" : "false", "data-cohort": profile.cohort, className: "flex items-center gap-3 py-2.5", children: [profile.isOwner ? (_jsx(Crown, { className: "h-4 w-4 shrink-0 text-accent", "aria-label": t("voiceprofile.owner", { defaultValue: "Owner" }), "data-testid": `voice-profile-crown-${profile.id}` })) : (_jsx("span", { className: "inline-block h-4 w-4 shrink-0", "aria-hidden": "true" })), _jsxs("div", { className: "min-w-0 flex-1", children: [isEditingThis ? (_jsx("input", { ref: renameInputRef, type: "text", value: renameValue, onChange: (e) => setRenameValue(e.target.value), onBlur: () => {
                             setRenameId(null);
                             if (renameValue.trim() && renameValue !== profile.displayName) {
                                 dispatch({
@@ -121,7 +131,7 @@ function VoiceProfileRow({ profile, isEditingThis, renameValue, setRenameValue,
                             }
                         }, 
                         // biome-ignore lint/a11y/noAutofocus: this is an inline rename input the user just clicked into; focus must follow.
-                        autoFocus: true, className: "h-11 w-full rounded-md border border-border bg-card px-3 text-sm transition-colors focus:border-accent focus:outline-none", "data-testid": `voice-profile-rename-input-${profile.id}`, "aria-label": t("voiceprofile.renameAria", {
+                        autoFocus: true, className: "h-11 w-full rounded-md border border-border bg-surface px-3 text-sm transition-colors  ", "data-testid": `voice-profile-rename-input-${profile.id}`, "aria-label": t("voiceprofile.renameAria", {
                             defaultValue: "Rename voice profile",
                         }), ...renameInputAgentProps })) : (_jsx("button", { ref: nameRef, type: "button", onClick: () => {
                             setRenameId(profile.id);
@@ -134,13 +144,13 @@ function VoiceProfileRow({ profile, isEditingThis, renameValue, setRenameValue,
                                     : t("voiceprofile.sampleOther", {
                                         count: profile.embeddingCount,
                                         defaultValue: "{{count}} samples",
-                                    }) }), profile.relationshipLabel ? (_jsx("span", { className: "rounded-sm bg-bg/60 px-1 py-0.5", "data-testid": `voice-profile-relationship-${profile.id}`, children: profile.relationshipLabel })) : null, _jsx("span", { children: profile.cohort })] })] }), !profile.isOwner ? (_jsxs("div", { className: "flex items-center gap-1", children: [_jsxs("select", { ref: relationshipRef, value: profile.relationshipLabel ?? "", onChange: (e) => dispatch({
+                                    }) }), profile.relationshipLabel ? (_jsx("span", { className: "rounded-sm bg-bg/60 px-1 py-0.5", "data-testid": `voice-profile-relationship-${profile.id}`, children: profile.relationshipLabel })) : null, _jsx("span", { children: profile.cohort })] })] }), !profile.isOwner ? (_jsxs("div", { className: "flex items-center gap-1", children: [_jsxs(Select, { value: profile.relationshipLabel ?? NO_RELATIONSHIP_VALUE, onValueChange: (value) => dispatch({
                             type: "set-relationship",
                             id: profile.id,
-                            relationshipLabel: e.target.value || null,
-                        }), className: "h-11 rounded-md border border-border bg-card px-2 text-xs transition-colors focus:border-accent focus:outline-none", "data-testid": `voice-profile-relationship-select-${profile.id}`, "aria-label": t("voiceprofile.setRelationship", {
-                            defaultValue: "Set relationship",
-                        }), ...relationshipAgentProps, children: [_jsx("option", { value: "", children: t("voiceprofile.noLabel", { defaultValue: "(no label)" }) }), COMMON_RELATIONSHIPS.map((r) => (_jsx("option", { value: r, children: r }, r)))] }), _jsx(Button, { ref: renameBtnRef, type: "button", variant: "ghost", size: "icon", onClick: () => {
+                            relationshipLabel: value === NO_RELATIONSHIP_VALUE ? null : value,
+                        }), children: [_jsx(SettingsSelectTrigger, { ref: relationshipRef, variant: "soft", "data-testid": `voice-profile-relationship-select-${profile.id}`, "aria-label": t("voiceprofile.setRelationship", {
+                                    defaultValue: "Set relationship",
+                                }), ...relationshipAgentProps, children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: NO_RELATIONSHIP_VALUE, children: t("voiceprofile.noLabel", { defaultValue: "(no label)" }) }), COMMON_RELATIONSHIPS.map((r) => (_jsx(SelectItem, { value: r, children: r }, r)))] })] }), _jsx(Button, { ref: renameBtnRef, type: "button", variant: "ghost", size: "icon", onClick: () => {
                             setRenameId(profile.id);
                             setRenameValue(profile.displayName);
                         }, "data-testid": `voice-profile-rename-${profile.id}`, "aria-label": t("voiceprofile.renameAria", {
@@ -148,8 +158,8 @@ function VoiceProfileRow({ profile, isEditingThis, renameValue, setRenameValue,
                         }), ...renameBtnAgentProps, children: _jsx(Pencil, { className: "h-3.5 w-3.5" }) }), _jsx(Button, { ref: deleteRef, type: "button", variant: "ghost", size: "icon", onClick: () => dispatch({ type: "delete", id: profile.id }), "data-testid": `voice-profile-delete-${profile.id}`, "aria-label": t("voiceprofile.deleteAria", {
                             defaultValue: "Delete voice profile",
                         }), ...deleteAgentProps, children: _jsx(Trash2, { className: "h-3.5 w-3.5 text-danger" }) })] })) : null] }));
-}
-export function VoiceProfileSection({ profilesClient, initialProfiles, framed = true, className, }) {
+});
+export function VoiceProfileSection({ profilesClient, initialProfiles, className, }) {
     const { t } = useTranslation();
     const [profiles, setProfiles] = React.useState(initialProfiles ?? []);
     const [loading, setLoading] = React.useState(initialProfiles === undefined);
@@ -181,7 +191,15 @@ export function VoiceProfileSection({ profilesClient, initialProfiles, framed =
         }
         void refresh();
     }, [initialProfiles, refresh]);
-    const sorted = React.useMemo(() => [...profiles].sort(compareProfiles), [profiles]);
+    const { sorted, ownerCount, otherCount } = React.useMemo(() => {
+        const next = [...profiles].sort(compareProfiles);
+        const owners = next.filter((p) => p.isOwner).length;
+        return {
+            sorted: next,
+            ownerCount: owners,
+            otherCount: next.length - owners,
+        };
+    }, [profiles]);
     const dispatch = React.useCallback(async (action) => {
         try {
             switch (action.type) {
@@ -223,6 +241,7 @@ export function VoiceProfileSection({ profilesClient, initialProfiles, framed =
                 }));
         }
     }, [profiles, profilesClient, t]);
+    const dispatchAction = React.useCallback((action) => void dispatch(action), [dispatch]);
     const onExport = React.useCallback(async () => {
         try {
             const { downloadUrl } = await profilesClient.exportAll();
@@ -251,8 +270,6 @@ export function VoiceProfileSection({ profilesClient, initialProfiles, framed =
                 }));
         }
     }, [profilesClient, t]);
-    const ownerCount = sorted.filter((p) => p.isOwner).length;
-    const otherCount = sorted.length - ownerCount;
     const { ref: exportRef, agentProps: exportAgentProps } = useAgentElement({
         id: "voice-profile-export",
         role: "button",
@@ -271,25 +288,31 @@ export function VoiceProfileSection({ profilesClient, initialProfiles, framed =
         group: "voice-profiles",
         onActivate: () => void onDeleteAll(),
     });
-    return (_jsxs("div", { "data-testid": "voice-profile-section", className: cn(framed && "overflow-hidden rounded-lg border border-border bg-card", className), children: [_jsxs("header", { className: "flex items-center justify-between gap-3 px-4 py-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Users, { className: "h-4 w-4 text-muted", "aria-hidden": true }), _jsx("h3", { className: "text-sm font-semibold", children: t("voiceprofile.title", { defaultValue: "Voice profiles" }) }), _jsxs("span", { className: "rounded-full bg-bg/60 px-1.5 py-0.5 text-xs text-muted", "data-testid": "voice-profile-count", children: [ownerCount > 0
-                                        ? t("voiceprofile.ownerCount", {
-                                            count: ownerCount,
-                                            defaultValue: "{{count}} owner · ",
-                                        })
-                                        : "", otherCount === 1
-                                        ? t("voiceprofile.otherCountOne", {
-                                            count: otherCount,
-                                            defaultValue: "{{count}} other",
-                                        })
-                                        : t("voiceprofile.otherCount", {
-                                            count: otherCount,
-                                            defaultValue: "{{count}} others",
-                                        })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { ref: exportRef, variant: "ghost", size: "sm", onClick: () => void onExport(), "data-testid": "voice-profile-export", "aria-label": t("voiceprofile.exportAria", {
+    return (_jsxs("div", { "data-testid": "voice-profile-section", className: cn("flex flex-col", className), children: [_jsxs("header", { className: "flex items-center justify-between gap-3 py-1", children: [_jsxs("span", { className: "text-xs text-muted", "data-testid": "voice-profile-count", children: [ownerCount > 0
+                                ? t("voiceprofile.ownerCount", {
+                                    count: ownerCount,
+                                    defaultValue: "{{count}} owner · ",
+                                })
+                                : "", otherCount === 1
+                                ? t("voiceprofile.otherCountOne", {
+                                    count: otherCount,
+                                    defaultValue: "{{count}} other",
+                                })
+                                : t("voiceprofile.otherCount", {
+                                    count: otherCount,
+                                    defaultValue: "{{count}} others",
+                                })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsxs(Button, { ref: exportRef, variant: "ghost", size: "sm", onClick: () => void onExport(), "data-testid": "voice-profile-export", "aria-label": t("voiceprofile.exportAria", {
                                     defaultValue: "Export voice profile metadata",
                                 }), ...exportAgentProps, children: [_jsx(Download, { className: "mr-1 h-3.5 w-3.5" }), " ", t("voiceprofile.export", { defaultValue: "Export" })] }), _jsxs(Button, { ref: resetRef, variant: "ghost", size: "sm", onClick: () => void onDeleteAll(), "data-testid": "voice-profile-delete-all", "aria-label": t("voiceprofile.resetAria", {
                                     defaultValue: "Delete all non-owner voice profiles",
-                                }), ...resetAgentProps, children: [_jsx(Trash2, { className: "mr-1 h-3.5 w-3.5" }), " ", t("voiceprofile.reset", { defaultValue: "Reset" })] })] })] }), error ? (_jsx("div", { className: "mx-4 mb-2 rounded-sm border border-warn/40 bg-warn/10 px-3 py-2 text-xs text-warn", "data-testid": "voice-profile-error", children: error })) : null, loading ? (_jsx("div", { className: "px-4 py-6 text-center text-xs text-muted", "data-testid": "voice-profile-loading", children: t("voiceprofile.loading", { defaultValue: "Loading profiles…" }) })) : sorted.length === 0 ? (_jsxs("div", { className: "px-4 py-6 text-center text-xs text-muted", "data-testid": "voice-profile-empty", children: [_jsx(Mic, { className: "mx-auto mb-2 h-5 w-5 text-muted", "aria-hidden": true }), t("voiceprofile.empty", {
-                        defaultValue: "No voice profiles yet — they appear automatically when the agent hears a new voice.",
-                    })] })) : (_jsx("ul", { className: "divide-y divide-border/30", "data-testid": "voice-profile-list", children: sorted.map((profile) => (_jsx(VoiceProfileRow, { profile: profile, isEditingThis: renameId === profile.id, renameValue: renameValue, setRenameValue: setRenameValue, setRenameId: setRenameId, dispatch: (action) => void dispatch(action), t: t }, profile.id))) }))] }));
+                                }), ...resetAgentProps, children: [_jsx(Trash2, { className: "mr-1 h-3.5 w-3.5" }), " ", t("voiceprofile.reset", { defaultValue: "Reset" })] })] })] }), error ? (_jsx("div", { className: "py-2 text-xs text-warn", "data-testid": "voice-profile-error", children: error })) : null, loading ? (_jsx("div", { className: "py-6 text-center text-xs text-muted", "data-testid": "voice-profile-loading", children: t("voiceprofile.loading", { defaultValue: "Loading profiles…" }) })) : sorted.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center gap-2 py-6 text-center text-xs text-muted", "data-testid": "voice-profile-empty", children: [_jsx(Mic, { className: "h-5 w-5 text-muted", "aria-hidden": true }), t("voiceprofile.empty", {
+                        defaultValue: "No voice profiles yet.",
+                    })] })) : (_jsx("ul", { className: "flex flex-col", "data-testid": "voice-profile-list", children: sorted.map((profile) => {
+                    const isEditingThis = renameId === profile.id;
+                    return (_jsx(VoiceProfileRow, { profile: profile, isEditingThis: isEditingThis, 
+                        // Only the editing row needs the live draft; passing "" to the
+                        // rest keeps their props stable so memo skips them per keystroke.
+                        renameValue: isEditingThis ? renameValue : "", setRenameValue: setRenameValue, setRenameId: setRenameId, dispatch: dispatchAction }, profile.id));
+                }) }))] }));
 }
 export default VoiceProfileSection;

package/components/settings/VoiceSection.d.ts

@@ -1,13 +1,15 @@
 /**
  * VoiceSection — top-level Settings → Voice tree. Mounts the device-tier
- * banner, continuous-chat mode, wake word, local-vs-cloud strategy,
- * end-of-turn tuning, the models slot, voice profiles, and privacy toggles.
+ * banner, continuous-chat mode, wake word, end-of-turn tuning, the models
+ * slot, voice profiles, and privacy toggles.
+ *
+ * Per-modality local-vs-cloud routing is owned by the RoutingMatrix control
+ * (per-slot policy rows), not by this section.
  */
 import * as React from "react";
-import type { VoiceProfilesClient } from "../../api/client-voice-profiles";
-import type { VoiceContinuousMode } from "../../voice/voice-chat-types";
-import { type VoiceDeviceTier } from "./VoiceTierBanner";
-export type VoiceLocalCloudStrategy = "auto" | "force-local" | "force-cloud";
+import type { VoiceProfilesClient } from "../../api/client-voice-profiles.js";
+import type { VoiceContinuousMode } from "../../voice/voice-chat-types.js";
+import { type VoiceDeviceTier } from "./VoiceTierBanner.js";
 /**
  * User-facing slice of the auto-stop options: how long silence ends a turn
  * and how loud audio must be to count as speech. Other fields keep library
@@ -21,7 +23,6 @@ export interface VadAutoStopPrefs {
 }
 export interface VoiceSectionPrefs {
     continuous: VoiceContinuousMode;
-    strategy: VoiceLocalCloudStrategy;
     cloudFirstLineCache: boolean;
     autoLearnVoices: boolean;
     /**