feat(app): unified provider snapshot, resilient model selector, and UX polish

- Model selector is no longer disabled while providers load; opens
  immediately and streams available providers as they arrive
- Selecting a non-default provider on mobile now works correctly
- Provider icon added to model trigger in mobile preferences sheet
- Thinking icon (brain) added to thinking trigger in mobile preferences
- Model descriptions for OpenCode/Pi shown inline next to model name
  instead of in a tooltip
- Running agents and draft screen share a single provider/model cache,
  eliminating duplicate network requests
- Provider data is prefetched when entering a workspace so the model
  selector is instant on first open

packages/app/src/components/agent-status-bar.tsx

@@ -17,6 +17,7 @@ import { getProviderIcon } from "@/components/provider-icons";
 import { CombinedModelSelector } from "@/components/combined-model-selector";
 import { useQuery } from "@tanstack/react-query";
 import { useSessionStore } from "@/stores/session-store";
+import { useProvidersSnapshot } from "@/hooks/use-providers-snapshot";
 import {
   buildFavoriteModelKey,
   mergeProviderPreferences,
@@ -266,7 +267,7 @@ function ControlledStatusBar({
     return null;
   }
 
-  const modelDisabled = disabled || isModelLoading || !modelOptions || modelOptions.length === 0;
+  const modelDisabled = disabled;
 
   const SEARCH_THRESHOLD = 6;
 
@@ -673,6 +674,7 @@ function ControlledStatusBar({
                       pointerEvents="none"
                       testID="agent-preferences-model"
                     >
+                      <ProviderIcon size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
                       <Text style={styles.sheetSelectText}>{selectedModelLabel}</Text>
                       <ChevronDown size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
                     </View>
@@ -698,6 +700,7 @@ function ControlledStatusBar({
                     accessibilityLabel="Select thinking option"
                     testID="agent-preferences-thinking"
                   >
+                    <Brain size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
                     <Text style={styles.sheetSelectText}>{displayThinking}</Text>
                     <ChevronDown size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
                   </DropdownMenuTrigger>
@@ -869,9 +872,17 @@ export function AgentStatusBar({ agentId, serverId, onDropdownClose }: AgentStat
   );
   const client = useSessionStore((state) => state.sessions[serverId]?.client ?? null);
 
-  const modelsQuery = useQuery({
+  const {
+    entries: snapshotEntries,
+    isLoading: snapshotIsLoading,
+    isFetching: snapshotIsFetching,
+    supportsSnapshot,
+  } = useProvidersSnapshot(serverId);
+
+  // COMPAT(providersSnapshot): legacy fallback for daemons without snapshot support
+  const legacyModelsQuery = useQuery({
     queryKey: ["providerModels", serverId, agent?.provider ?? "__missing_provider__"],
-    enabled: Boolean(client && agent?.provider),
+    enabled: Boolean(!supportsSnapshot && client && agent?.provider),
     staleTime: 5 * 60 * 1000,
     queryFn: async () => {
       if (!client || !agent) {
@@ -885,36 +896,39 @@ export function AgentStatusBar({ agentId, serverId, onDropdownClose }: AgentStat
     },
   });
 
+  const snapshotModels = useMemo(() => {
+    if (!supportsSnapshot || !snapshotEntries || !agent?.provider) {
+      return null;
+    }
+    const entry = snapshotEntries.find((e) => e.provider === agent.provider);
+    return entry?.models ?? null;
+  }, [supportsSnapshot, snapshotEntries, agent?.provider]);
+
+  const models = supportsSnapshot ? snapshotModels : (legacyModelsQuery.data ?? null);
+
   const agentProviderDefinitions = useMemo(() => {
+    if (supportsSnapshot && snapshotEntries) {
+      return AGENT_PROVIDER_DEFINITIONS.filter((d) =>
+        snapshotEntries.some((e) => e.provider === d.id),
+      );
+    }
     const definition = AGENT_PROVIDER_DEFINITIONS.find((d) => d.id === agent?.provider);
     return definition ? [definition] : [];
-  }, [agent?.provider]);
-
-  const agentProviderModelQuery = useQuery({
-    queryKey: ["providerModels", serverId, agent?.provider, agent?.cwd ?? ""],
-    enabled: Boolean(client && agent?.cwd && agent?.provider),
-    staleTime: 5 * 60 * 1000,
-    queryFn: async () => {
-      if (!client || !agent) {
-        throw new Error("Daemon client unavailable");
-      }
-      const payload = await client.listProviderModels(agent.provider, { cwd: agent.cwd });
-      if (payload.error) {
-        throw new Error(payload.error);
-      }
-      return payload.models ?? [];
-    },
-  });
+  }, [agent?.provider, supportsSnapshot, snapshotEntries]);
 
   const agentProviderModels = useMemo(() => {
     const map = new Map<string, AgentModelDefinition[]>();
-    if (agent?.provider && agentProviderModelQuery.data) {
-      map.set(agent.provider, agentProviderModelQuery.data);
+    if (supportsSnapshot && snapshotEntries) {
+      for (const entry of snapshotEntries) {
+        if (entry.models) {
+          map.set(entry.provider, entry.models);
+        }
+      }
+    } else if (agent?.provider && legacyModelsQuery.data) {
+      map.set(agent.provider, legacyModelsQuery.data);
     }
     return map;
-  }, [agent?.provider, agentProviderModelQuery.data]);
-
-  const models = modelsQuery.data ?? null;
+  }, [supportsSnapshot, snapshotEntries, agent?.provider, legacyModelsQuery.data]);
 
   const displayMode =
     availableModes.find((mode) => mode.id === agent?.currentModeId)?.label ||
@@ -1034,7 +1048,7 @@ export function AgentStatusBar({ agentId, serverId, onDropdownClose }: AgentStat
           console.warn("[AgentStatusBar] setAgentFeature failed", error);
         });
       }}
-      isModelLoading={isProviderModelsQueryLoading(modelsQuery)}
+      isModelLoading={supportsSnapshot ? (snapshotIsLoading || snapshotIsFetching) : isProviderModelsQueryLoading(legacyModelsQuery)}
       onDropdownClose={onDropdownClose}
       disabled={!client}
     />

packages/app/src/components/combined-model-selector.tsx

@@ -25,7 +25,6 @@ import type { AgentProviderDefinition } from "@server/server/agent/provider-mani
 const IS_WEB = Platform.OS === "web";
 
 import { Combobox, ComboboxItem } from "@/components/ui/combobox";
-import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
 import { getProviderIcon } from "@/components/provider-icons";
 import type { FavoriteModelRow } from "@/hooks/use-form-preferences";
 import {
@@ -36,6 +35,9 @@ import {
   type SelectorModelRow,
 } from "./combined-model-selector.utils";
 
+// TODO: this should be configured per provider in the provider manifest
+const PROVIDERS_WITH_MODEL_DESCRIPTIONS = new Set(["opencode", "pi"]);
+
 type SelectorView =
   | { kind: "all" }
   | { kind: "provider"; providerId: string; providerLabel: string };
@@ -161,7 +163,6 @@ function ModelRow({
 }) {
   const { theme } = useUnistyles();
   const ProviderIcon = getProviderIcon(row.provider);
-  const isWeb = Platform.OS === "web";
 
   const handleToggleFavorite = useCallback(
     (event: GestureResponderEvent) => {
@@ -171,9 +172,13 @@ function ModelRow({
     [onToggleFavorite, row.modelId, row.provider],
   );
 
-  const item = (
+  const showDescription =
+    row.description && PROVIDERS_WITH_MODEL_DESCRIPTIONS.has(row.provider);
+
+  return (
     <ComboboxItem
       label={row.modelLabel}
+      description={showDescription ? row.description : undefined}
       selected={isSelected}
       disabled={disabled}
       elevated={elevated}
@@ -211,21 +216,6 @@ function ModelRow({
       }
     />
   );
-
-  if (!isWeb || !row.description) {
-    return item;
-  }
-
-  return (
-    <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
-      <TooltipTrigger asChild triggerRefProp="ref">
-        <View>{item}</View>
-      </TooltipTrigger>
-      <TooltipContent side="right" align="center" offset={4}>
-        <Text style={styles.tooltipText}>{row.description}</Text>
-      </TooltipContent>
-    </Tooltip>
-  );
 }
 
 function FavoritesSection({
@@ -839,10 +829,6 @@ const styles = StyleSheet.create((theme) => ({
   favoriteButtonPressed: {
     backgroundColor: theme.colors.surface1,
   },
-  tooltipText: {
-    color: theme.colors.foreground,
-    fontSize: theme.fontSize.xs,
-  },
   sheetLoadingState: {
     minHeight: 160,
     justifyContent: "center",

packages/app/src/components/ui/combobox.tsx

@@ -203,12 +203,12 @@ export function ComboboxItem({
       ]}
     >
       {leadingContent}
-      <View style={styles.comboboxItemContent}>
+      <View style={[styles.comboboxItemContent, description && styles.comboboxItemContentInline]}>
         <Text numberOfLines={1} style={styles.comboboxItemLabel}>
           {label}
         </Text>
         {description ? (
-          <Text numberOfLines={2} style={styles.comboboxItemDescription}>
+          <Text numberOfLines={1} style={styles.comboboxItemDescription}>
             {description}
           </Text>
         ) : null}
@@ -847,6 +847,11 @@ const styles = StyleSheet.create((theme) => ({
     flex: 1,
     flexShrink: 1,
   },
+  comboboxItemContentInline: {
+    flexDirection: "row",
+    alignItems: "baseline",
+    gap: theme.spacing[2],
+  },
   comboboxItemLeadingSlot: {
     width: 16,
     alignItems: "center",
@@ -857,9 +862,9 @@ const styles = StyleSheet.create((theme) => ({
     color: theme.colors.foreground,
   },
   comboboxItemDescription: {
-    marginTop: 2,
     fontSize: theme.fontSize.xs,
     color: theme.colors.foregroundMuted,
+    flexShrink: 1,
   },
   emptyText: {
     paddingHorizontal: theme.spacing[3],