fix(apps): compare picker entries by modelName to handle accessor functions

useState auto-invokes function-typed initial values as lazy initializers, so
passing a MODEL_REGISTRY accessor unwraps it into a plain config — breaking
reference equality against the accessor stored in MODELS. Compare by modelName
(falling back to === for picker users without one, e.g. VoiceConfig).

Author: msluszniak

apps/computer-vision/components/ModelPicker.tsx

@@ -24,6 +24,17 @@ type Props<T> = {
 
 const DROPDOWN_MAX_HEIGHT = 200;
 
+// MODEL_REGISTRY accessors are functions, so passing them to useState makes
+// React auto-invoke them as lazy initializers — state becomes the underlying
+// config object, breaking reference equality against the accessor in MODELS.
+// Match by modelName when both sides expose one, otherwise fall back to ===.
+function sameValue<T>(a: T, b: T): boolean {
+  const am = (a as { modelName?: unknown })?.modelName;
+  const bm = (b as { modelName?: unknown })?.modelName;
+  if (typeof am === 'string' && typeof bm === 'string') return am === bm;
+  return a === b;
+}
+
 export function ModelPicker<T>({
   models,
   selectedModel,
@@ -36,7 +47,7 @@ export function ModelPicker<T>({
   const [expandUp, setExpandUp] = useState(false);
   const [dropdownTop, setDropdownTop] = useState(0);
   const triggerRef = useRef<React.ComponentRef<typeof TouchableOpacity>>(null);
-  const selected = models.find((m) => m.value === selectedModel);
+  const selected = models.find((m) => sameValue(m.value, selectedModel));
 
   useEffect(() => {
     if (disabled) setOpen(false);
@@ -112,7 +123,7 @@ export function ModelPicker<T>({
               showsVerticalScrollIndicator={true}
             >
               {models.map((item) => {
-                const isSelected = item.value === selectedModel;
+                const isSelected = sameValue(item.value, selectedModel);
                 return (
                   <TouchableOpacity
                     key={item.label}

apps/llm/components/ModelPicker.tsx

@@ -24,6 +24,17 @@ type Props<T> = {
 
 const DROPDOWN_MAX_HEIGHT = 200;
 
+// MODEL_REGISTRY accessors are functions, so passing them to useState makes
+// React auto-invoke them as lazy initializers — state becomes the underlying
+// config object, breaking reference equality against the accessor in MODELS.
+// Match by modelName when both sides expose one, otherwise fall back to ===.
+function sameValue<T>(a: T, b: T): boolean {
+  const am = (a as { modelName?: unknown })?.modelName;
+  const bm = (b as { modelName?: unknown })?.modelName;
+  if (typeof am === 'string' && typeof bm === 'string') return am === bm;
+  return a === b;
+}
+
 export function ModelPicker<T>({
   models,
   selectedModel,
@@ -36,7 +47,7 @@ export function ModelPicker<T>({
   const [expandUp, setExpandUp] = useState(false);
   const [dropdownTop, setDropdownTop] = useState(0);
   const triggerRef = useRef<React.ComponentRef<typeof TouchableOpacity>>(null);
-  const selected = models.find((m) => m.value === selectedModel);
+  const selected = models.find((m) => sameValue(m.value, selectedModel));
 
   useEffect(() => {
     if (disabled) setOpen(false);
@@ -112,7 +123,7 @@ export function ModelPicker<T>({
               showsVerticalScrollIndicator={true}
             >
               {models.map((item) => {
-                const isSelected = item.value === selectedModel;
+                const isSelected = sameValue(item.value, selectedModel);
                 return (
                   <TouchableOpacity
                     key={item.label}

apps/speech/components/ModelPicker.tsx

@@ -23,6 +23,17 @@ type Props<T> = {
 
 const DROPDOWN_MAX_HEIGHT = 200;
 
+// MODEL_REGISTRY accessors are functions, so passing them to useState makes
+// React auto-invoke them as lazy initializers — state becomes the underlying
+// config object, breaking reference equality against the accessor in MODELS.
+// Match by modelName when both sides expose one, otherwise fall back to ===.
+function sameValue<T>(a: T, b: T): boolean {
+  const am = (a as { modelName?: unknown })?.modelName;
+  const bm = (b as { modelName?: unknown })?.modelName;
+  if (typeof am === 'string' && typeof bm === 'string') return am === bm;
+  return a === b;
+}
+
 export function ModelPicker<T>({
   models,
   selectedModel,
@@ -34,7 +45,7 @@ export function ModelPicker<T>({
   const [triggerHeight, setTriggerHeight] = useState(0);
   const [expandUp, setExpandUp] = useState(false);
   const triggerRef = useRef<React.ComponentRef<typeof TouchableOpacity>>(null);
-  const selected = models.find((m) => m.value === selectedModel);
+  const selected = models.find((m) => sameValue(m.value, selectedModel));
 
   useEffect(() => {
     if (disabled) setOpen(false);
@@ -87,7 +98,7 @@ export function ModelPicker<T>({
           keyboardShouldPersistTaps="handled"
         >
           {models.map((item) => {
-            const isSelected = item.value === selectedModel;
+            const isSelected = sameValue(item.value, selectedModel);
             return (
               <TouchableOpacity
                 key={item.label}

apps/text-embeddings/components/ModelPicker.tsx

@@ -24,6 +24,17 @@ type Props<T> = {
 
 const DROPDOWN_MAX_HEIGHT = 200;
 
+// MODEL_REGISTRY accessors are functions, so passing them to useState makes
+// React auto-invoke them as lazy initializers — state becomes the underlying
+// config object, breaking reference equality against the accessor in MODELS.
+// Match by modelName when both sides expose one, otherwise fall back to ===.
+function sameValue<T>(a: T, b: T): boolean {
+  const am = (a as { modelName?: unknown })?.modelName;
+  const bm = (b as { modelName?: unknown })?.modelName;
+  if (typeof am === 'string' && typeof bm === 'string') return am === bm;
+  return a === b;
+}
+
 export function ModelPicker<T>({
   models,
   selectedModel,
@@ -36,7 +47,7 @@ export function ModelPicker<T>({
   const [expandUp, setExpandUp] = useState(false);
   const [dropdownTop, setDropdownTop] = useState(0);
   const triggerRef = useRef<React.ComponentRef<typeof TouchableOpacity>>(null);
-  const selected = models.find((m) => m.value === selectedModel);
+  const selected = models.find((m) => sameValue(m.value, selectedModel));
 
   useEffect(() => {
     if (disabled) setOpen(false);
@@ -112,7 +123,7 @@ export function ModelPicker<T>({
               showsVerticalScrollIndicator={true}
             >
               {models.map((item) => {
-                const isSelected = item.value === selectedModel;
+                const isSelected = sameValue(item.value, selectedModel);
                 return (
                   <TouchableOpacity
                     key={item.label}