🤖 feat: add model picker and shared catalog to mobile app

- Import KNOWN_MODELS from desktop constants for single source of truth
- Add modelCatalog.ts with validation, display formatting, and LRU sanitization helpers
- Implement useModelHistory hook with SecureStore persistence (max 8 recent models)
- Create ModelPickerSheet component with search, recent chips, and grouped list by provider
- Update useWorkspaceSettings/useWorkspaceDefaults to validate models against catalog
- Wire picker into WorkspaceScreen above composer with model summary display
- Add assertKnownModelId guard in sendMessage IPC call
- Display human-friendly model names in streaming indicator

Generated with `mux`

Change-Id: I60fd0945056c26dea2e16d4c5d652cadf919c654
Signed-off-by: Test <test@example.com>

Author: Test

apps/mobile/src/api/client.ts

@@ -1,5 +1,6 @@
 import Constants from "expo-constants";
 import { assert } from "../utils/assert";
+import { assertKnownModelId } from "../utils/modelCatalog";
 import type { ChatStats } from "@shared/types/chatStats.ts";
 import type { MuxMessage } from "@shared/types/message.ts";
 import type {
@@ -279,6 +280,7 @@ export function createClient(cfg: CmuxMobileClientConfig = {}) {
         | { success: true; workspaceId: string; metadata: FrontendWorkspaceMetadata }
       > => {
         try {
+          assertKnownModelId(options.model);
           assert(typeof message === "string" && message.trim().length > 0, "message required");
 
           // If workspaceId is null, we're creating a new workspace

apps/mobile/src/components/ModelPickerSheet.tsx

@@ -0,0 +1,228 @@
+import type { JSX } from "react";
+import { useMemo, useState } from "react";
+import {
+  FlatList,
+  Modal,
+  Pressable,
+  StyleSheet,
+  TextInput,
+  View,
+} from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { useTheme } from "../theme";
+import { ThemedText } from "./ThemedText";
+import {
+  formatModelSummary,
+  getModelDisplayName,
+  isKnownModelId,
+  listKnownModels,
+} from "../utils/modelCatalog";
+
+const ALL_MODELS = listKnownModels();
+
+type KnownModel = (typeof ALL_MODELS)[number];
+
+interface ModelPickerSheetProps {
+  visible: boolean;
+  onClose: () => void;
+  selectedModel: string;
+  onSelect: (modelId: string) => void;
+  recentModels: string[];
+}
+
+export function ModelPickerSheet(props: ModelPickerSheetProps): JSX.Element {
+  const theme = useTheme();
+  const [query, setQuery] = useState("");
+
+  const filteredModels = useMemo(() => {
+    const normalized = query.trim().toLowerCase();
+    if (!normalized) {
+      return ALL_MODELS;
+    }
+    return ALL_MODELS.filter((model) => {
+      const name = model.providerModelId.toLowerCase();
+      const provider = model.provider.toLowerCase();
+      return name.includes(normalized) || provider.includes(normalized);
+    });
+  }, [query]);
+
+  const recentModels = useMemo(() => {
+    return props.recentModels.filter(isKnownModelId);
+  }, [props.recentModels]);
+
+  const handleSelect = (modelId: string) => {
+    props.onSelect(modelId);
+  };
+
+  return (
+    <Modal
+      visible={props.visible}
+      animationType="slide"
+      presentationStyle="pageSheet"
+      onRequestClose={props.onClose}
+    >
+      <View style={[styles.container, { backgroundColor: theme.colors.background }]}> 
+        <View style={styles.header}>
+          <ThemedText variant="titleMedium" weight="semibold">
+            Choose a model
+          </ThemedText>
+          <Pressable onPress={props.onClose} style={styles.closeButton}>
+            <Ionicons name="close" size={20} color={theme.colors.foregroundPrimary} />
+          </Pressable>
+        </View>
+
+        <View
+          style={[
+            styles.searchWrapper,
+            { borderColor: theme.colors.inputBorder, backgroundColor: theme.colors.inputBackground },
+          ]}
+        >
+          <Ionicons name="search" size={16} color={theme.colors.foregroundMuted} />
+          <TextInput
+            value={query}
+            onChangeText={setQuery}
+            placeholder="Search models"
+            placeholderTextColor={theme.colors.foregroundMuted}
+            style={[styles.searchInput, { color: theme.colors.foregroundPrimary }]}
+            autoCapitalize="none"
+            autoCorrect={false}
+          />
+          {query.length > 0 && (
+            <Pressable onPress={() => setQuery("")}>
+              <Ionicons name="close-circle" size={16} color={theme.colors.foregroundMuted} />
+            </Pressable>
+          )}
+        </View>
+
+        {recentModels.length > 0 && (
+          <View style={styles.section}>
+            <ThemedText variant="label" style={{ color: theme.colors.foregroundMuted }}>
+              Recent
+            </ThemedText>
+            <View style={styles.recentChips}>
+              {recentModels.map((modelId) => (
+                <Pressable
+                  key={modelId}
+                  onPress={() => handleSelect(modelId)}
+                  style={({ pressed }) => [
+                    styles.chip,
+                    {
+                      backgroundColor:
+                        props.selectedModel === modelId
+                          ? theme.colors.accent
+                          : theme.colors.surfaceSecondary,
+                      opacity: pressed ? 0.8 : 1,
+                    },
+                  ]}
+                >
+                  <ThemedText
+                    variant="caption"
+                    style={{
+                      color:
+                        props.selectedModel === modelId
+                          ? theme.colors.foregroundInverted
+                          : theme.colors.foregroundPrimary,
+                      fontWeight: "600",
+                    }}
+                  >
+                    {getModelDisplayName(modelId)}
+                  </ThemedText>
+                </Pressable>
+              ))}
+            </View>
+          </View>
+        )}
+
+        <FlatList
+          data={filteredModels}
+          keyExtractor={(item) => item.id}
+          renderItem={({ item }) => (
+            <Pressable
+              onPress={() => handleSelect(item.id)}
+              style={({ pressed }) => [
+                styles.listItem,
+                {
+                  backgroundColor: pressed
+                    ? theme.colors.surfaceSecondary
+                    : theme.colors.background,
+                },
+              ]}
+            >
+              <View style={{ flex: 1 }}>
+                <ThemedText weight="semibold">{getModelDisplayName(item.id)}</ThemedText>
+                <ThemedText variant="caption" style={{ color: theme.colors.foregroundMuted }}>
+                  {formatModelSummary(item.id)}
+                </ThemedText>
+              </View>
+              {props.selectedModel === item.id && (
+                <Ionicons name="checkmark-circle" size={20} color={theme.colors.accent} />
+              )}
+            </Pressable>
+          )}
+          ItemSeparatorComponent={() => (
+            <View style={{ height: StyleSheet.hairlineWidth, backgroundColor: theme.colors.border }} />
+          )}
+          ListEmptyComponent={() => (
+            <View style={{ padding: 24 }}>
+              <ThemedText variant="caption" style={{ textAlign: "center" }}>
+                No models match "{query}"
+              </ThemedText>
+            </View>
+          )}
+          style={{ flex: 1 }}
+        />
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 16,
+    paddingTop: 12,
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 12,
+  },
+  closeButton: {
+    padding: 8,
+  },
+  searchWrapper: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    gap: 8,
+    marginBottom: 16,
+  },
+  searchInput: {
+    flex: 1,
+    fontSize: 16,
+  },
+  section: {
+    marginBottom: 12,
+  },
+  recentChips: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 8,
+    marginTop: 8,
+  },
+  chip: {
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    borderRadius: 999,
+  },
+  listItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 14,
+    paddingHorizontal: 4,
+  },
+});

apps/mobile/src/hooks/useModelHistory.ts

@@ -0,0 +1,89 @@
+import { useCallback, useEffect, useState } from "react";
+import * as SecureStore from "expo-secure-store";
+import {
+  DEFAULT_MODEL_ID,
+  assertKnownModelId,
+  sanitizeModelSequence,
+} from "../utils/modelCatalog";
+
+const STORAGE_KEY = "cmux.models.recent";
+const MAX_RECENT_MODELS = 8;
+const FALLBACK_RECENTS = [DEFAULT_MODEL_ID];
+
+async function readStoredModels(): Promise<string[]> {
+  try {
+    const stored = await SecureStore.getItemAsync(STORAGE_KEY);
+    if (!stored) {
+      return FALLBACK_RECENTS.slice();
+    }
+    const parsed = JSON.parse(stored);
+    if (!Array.isArray(parsed)) {
+      return FALLBACK_RECENTS.slice();
+    }
+    return sanitizeModelSequence(parsed).slice(0, MAX_RECENT_MODELS);
+  } catch (error) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn("Failed to read model history", error);
+    }
+    return FALLBACK_RECENTS.slice();
+  }
+}
+
+async function persistModels(models: string[]): Promise<void> {
+  try {
+    await SecureStore.setItemAsync(STORAGE_KEY, JSON.stringify(models.slice(0, MAX_RECENT_MODELS)));
+  } catch (error) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn("Failed to persist model history", error);
+    }
+  }
+}
+
+export function useModelHistory() {
+  const [recentModels, setRecentModels] = useState<string[]>(FALLBACK_RECENTS.slice());
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    readStoredModels().then((models) => {
+      if (cancelled) {
+        return;
+      }
+      setRecentModels(models);
+      setIsLoaded(true);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const updateModels = useCallback((updater: (current: string[]) => string[]) => {
+    setRecentModels((prev) => {
+      const next = updater(prev);
+      void persistModels(next);
+      return next;
+    });
+  }, []);
+
+  const addRecentModel = useCallback(
+    (modelId: string) => {
+      assertKnownModelId(modelId);
+      updateModels((prev) => sanitizeModelSequence([modelId, ...prev]).slice(0, MAX_RECENT_MODELS));
+    },
+    [updateModels]
+  );
+
+  const replaceRecentModels = useCallback(
+    (models: string[]) => {
+      updateModels(() => sanitizeModelSequence(models).slice(0, MAX_RECENT_MODELS));
+    },
+    [updateModels]
+  );
+
+  return {
+    recentModels,
+    isLoaded,
+    addRecentModel,
+    replaceRecentModels,
+  };
+}

apps/mobile/src/hooks/useWorkspaceDefaults.ts

@@ -1,6 +1,11 @@
 import { useCallback, useEffect, useState } from "react";
 import * as SecureStore from "expo-secure-store";
 import type { ThinkingLevel, WorkspaceMode } from "../types/settings";
+import {
+  DEFAULT_MODEL_ID,
+  assertKnownModelId,
+  isKnownModelId,
+} from "../utils/modelCatalog";
 
 export interface GlobalDefaults {
   defaultMode: WorkspaceMode;
@@ -17,7 +22,7 @@ const STORAGE_KEY_1M_CONTEXT = "com.coder.cmux.defaults.use1MContext";
 
 const DEFAULT_MODE: WorkspaceMode = "exec";
 const DEFAULT_REASONING: ThinkingLevel = "off";
-const DEFAULT_MODEL = "anthropic:claude-sonnet-4-5";
+const DEFAULT_MODEL = DEFAULT_MODEL_ID;
 const DEFAULT_1M_CONTEXT = false;
 
 async function readGlobalMode(): Promise<WorkspaceMode> {
@@ -77,8 +82,10 @@ async function writeGlobalReasoning(level: ThinkingLevel): Promise<void> {
 async function readGlobalModel(): Promise<string> {
   try {
     // Try new key first
-    let value = await SecureStore.getItemAsync(STORAGE_KEY_MODEL);
-    if (value) return value;
+    const value = await SecureStore.getItemAsync(STORAGE_KEY_MODEL);
+    if (value && isKnownModelId(value)) {
+      return value;
+    }
 
     return DEFAULT_MODEL;
   } catch (error) {
@@ -91,6 +98,7 @@ async function readGlobalModel(): Promise<string> {
 
 async function writeGlobalModel(model: string): Promise<void> {
   try {
+    assertKnownModelId(model);
     await SecureStore.setItemAsync(STORAGE_KEY_MODEL, model);
   } catch (error) {
     if (process.env.NODE_ENV !== "production") {
@@ -183,6 +191,7 @@ export function useWorkspaceDefaults(): {
   }, []);
 
   const setDefaultModel = useCallback((model: string) => {
+    assertKnownModelId(model);
     setDefaultModelState(model);
     void writeGlobalModel(model);
   }, []);