feat(app): provider system overhaul with model selector, diagnostics, and UX polish

- Add CombinedModelSelector with two-level drill-down (providers → models), favorites section, search, and single-provider auto-drill mode - Add provider snapshot system (ProviderSnapshotManager) for cached provider/model state - Add provider diagnostics with resolved binary paths and versions across all providers - Add StatusBadge shared component for consistent status visual language - Add ProviderDiagnosticSheet for detailed provider health inspection - Add desktop auto-focus on input after any status bar interaction (model, mode, thinking, features) using focusWithRetries - Fix Combobox flicker on height change by switching to bottom-based CSS positioning once initial floating-ui position resolves - Add dynamic dropdown height: Level 1 fits content, Level 2 calculates from model count - Remove "Other providers" section from model selector (only show available providers)
2026-04-05 15:32:13 +07:00
parent 6907f6e71d
commit 0d88ce2270
25 changed files with 2225 additions and 160 deletions
@@ -213,7 +213,13 @@ export function AgentInputArea({

  const focusInput = useCallback(() => {
    if (Platform.OS !== "web") return;
-    messageInputRef.current?.focus();
+    focusWithRetries({
+      focus: () => messageInputRef.current?.focus(),
+      isFocused: () => {
+        const el = messageInputRef.current?.getNativeElement?.() ?? null;
+        return el != null && document.activeElement === el;
+      },
+    });
  }, []);

  useEffect(() => {
@@ -87,6 +87,7 @@ type ControlledAgentStatusBarProps = {
  onToggleFavoriteModel?: (provider: string, modelId: string) => void;
  features?: AgentFeature[];
  onSetFeature?: (featureId: string, value: unknown) => void;
+  onDropdownClose?: () => void;
 };

 export interface DraftAgentStatusBarProps {
@@ -108,6 +109,7 @@ export interface DraftAgentStatusBarProps {
  onSelectThinkingOption: (thinkingOptionId: string) => void;
  features?: AgentFeature[];
  onSetFeature?: (featureId: string, value: unknown) => void;
+  onDropdownClose?: () => void;
  disabled?: boolean;
 }

@@ -212,6 +214,7 @@ function ControlledStatusBar({
  onToggleFavoriteModel,
  features,
  onSetFeature,
+  onDropdownClose,
 }: ControlledAgentStatusBarProps) {
  const { theme } = useUnistyles();
  const isWeb = Platform.OS === "web";
@@ -331,8 +334,11 @@ function ControlledStatusBar({
  const handleOpenChange = useCallback(
    (selector: StatusSelector) => (nextOpen: boolean) => {
      setOpenSelector(nextOpen ? selector : null);
+      if (!nextOpen) {
+        onDropdownClose?.();
+      }
    },
-    [],
+    [onDropdownClose],
  );

  const handleSelectorPress = useCallback(
@@ -555,9 +561,7 @@ function ControlledStatusBar({
                <DropdownMenu
                  key={`feature-${feature.id}`}
                  open={openSelector === `feature-${feature.id}`}
-                  onOpenChange={(open) =>
-                    setOpenSelector(open ? `feature-${feature.id}` : null)
-                  }
+                  onOpenChange={handleOpenChange(`feature-${feature.id}`)}
                >
                  <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
                    <TooltipTrigger asChild triggerRefProp="ref">
@@ -784,9 +788,7 @@ function ControlledStatusBar({
                  <View key={`feature-${feature.id}`} style={styles.sheetSection}>
                    <DropdownMenu
                      open={openSelector === `feature-${feature.id}`}
-                      onOpenChange={(open) =>
-                        setOpenSelector(open ? `feature-${feature.id}` : null)
-                      }
+                      onOpenChange={handleOpenChange(`feature-${feature.id}`)}
                    >
                      <DropdownMenuTrigger
                        disabled={disabled}
@@ -1048,6 +1050,7 @@ export function DraftAgentStatusBar({
  onSelectThinkingOption,
  features,
  onSetFeature,
+  onDropdownClose,
  disabled = false,
 }: DraftAgentStatusBarProps) {
  const isWeb = Platform.OS === "web";
@@ -1092,6 +1095,7 @@ export function DraftAgentStatusBar({
          }}
          isLoading={isAllModelsLoading}
          disabled={disabled}
+          onClose={onDropdownClose}
        />
        <ControlledStatusBar
          provider={selectedProvider}
@@ -1103,6 +1107,7 @@ export function DraftAgentStatusBar({
          onSelectThinkingOption={onSelectThinkingOption}
          features={features}
          onSetFeature={onSetFeature}
+          onDropdownClose={onDropdownClose}
          disabled={disabled}
        />
      </View>
@@ -1115,30 +1120,32 @@ export function DraftAgentStatusBar({
  }));

  return (
-    <ControlledStatusBar
-      provider={selectedProvider}
-      providerDefinitions={providerDefinitions}
-      allProviderModels={allProviderModels}
-      modeOptions={mappedModeOptions}
-      selectedModeId={effectiveSelectedMode}
-      onSelectMode={onSelectMode}
-      modelOptions={modelOptions}
-      selectedModelId={selectedModel}
-      onSelectModel={(modelId) => onSelectModel(modelId)}
-      isModelLoading={isAllModelsLoading}
-      favoriteKeys={favoriteKeys}
-      onToggleFavoriteModel={(provider, modelId) => {
-        void updatePreferences(toggleFavoriteModel({ preferences, provider, modelId })).catch((error) => {
-          console.warn("[DraftAgentStatusBar] toggle favorite model failed", error);
-        });
-      }}
-      thinkingOptions={mappedThinkingOptions.length > 0 ? mappedThinkingOptions : undefined}
-      selectedThinkingOptionId={effectiveSelectedThinkingOption}
-      onSelectThinkingOption={onSelectThinkingOption}
-      features={features}
-      onSetFeature={onSetFeature}
-      disabled={disabled}
-    />
+    <>
+      <ControlledStatusBar
+        provider={selectedProvider}
+        providerDefinitions={providerDefinitions}
+        allProviderModels={allProviderModels}
+        modeOptions={mappedModeOptions}
+        selectedModeId={effectiveSelectedMode}
+        onSelectMode={onSelectMode}
+        modelOptions={modelOptions}
+        selectedModelId={selectedModel}
+        onSelectModel={(modelId) => onSelectModel(modelId)}
+        isModelLoading={isAllModelsLoading}
+        favoriteKeys={favoriteKeys}
+        onToggleFavoriteModel={(provider, modelId) => {
+          void updatePreferences(toggleFavoriteModel({ preferences, provider, modelId })).catch((error) => {
+            console.warn("[DraftAgentStatusBar] toggle favorite model failed", error);
+          });
+        }}
+        thinkingOptions={mappedThinkingOptions.length > 0 ? mappedThinkingOptions : undefined}
+        selectedThinkingOptionId={effectiveSelectedThinkingOption}
+        onSelectThinkingOption={onSelectThinkingOption}
+        features={features}
+        onSetFeature={onSetFeature}
+        disabled={disabled}
+      />
+    </>
  );
 }

@@ -2,11 +2,13 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
  View,
  Text,
+  TextInput,
  Pressable,
  Platform,
  ActivityIndicator,
  type GestureResponderEvent,
 } from "react-native";
+import { BottomSheetTextInput } from "@gorhom/bottom-sheet";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import {
  ArrowLeft,
@@ -15,9 +17,12 @@ import {
  Search,
  Star,
 } from "lucide-react-native";
-import type { AgentModelDefinition, AgentProvider } from "@server/server/agent/agent-sdk-types";
+import type {
+  AgentModelDefinition,
+  AgentProvider,
+} from "@server/server/agent/agent-sdk-types";
 import type { AgentProviderDefinition } from "@server/server/agent/provider-manifest";
-import { Combobox, ComboboxItem, SearchInput } from "@/components/ui/combobox";
+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";
@@ -29,8 +34,6 @@ import {
  type SelectorModelRow,
 } from "./combined-model-selector.utils";

-const INLINE_MODEL_THRESHOLD = Number.POSITIVE_INFINITY;
-
 type SelectorView =
  | { kind: "all" }
  | { kind: "provider"; providerId: string; providerLabel: string };
@@ -51,6 +54,7 @@ interface CombinedModelSelectorProps {
    disabled: boolean;
    isOpen: boolean;
  }) => React.ReactNode;
+  onClose?: () => void;
  disabled?: boolean;
 }

@@ -67,7 +71,6 @@ interface SelectorContentProps {
  canSelectProvider: (provider: string) => boolean;
  onToggleFavorite?: (provider: string, modelId: string) => void;
  onDrillDown: (providerId: string, providerLabel: string) => void;
-  onBack?: () => void;
 }

 function resolveDefaultModelLabel(models: AgentModelDefinition[] | undefined): string {
@@ -99,6 +102,22 @@ function partitionRows(
  return { favoriteRows, regularRows };
 }

+function sortFavoritesFirst(
+  rows: SelectorModelRow[],
+  favoriteKeys: Set<string>,
+): SelectorModelRow[] {
+  const favorites: SelectorModelRow[] = [];
+  const rest: SelectorModelRow[] = [];
+  for (const row of rows) {
+    if (favoriteKeys.has(row.favoriteKey)) {
+      favorites.push(row);
+    } else {
+      rest.push(row);
+    }
+  }
+  return [...favorites, ...rest];
+}
+
 function groupRowsByProvider(
  rows: SelectorModelRow[],
 ): Array<{ providerId: string; providerLabel: string; rows: SelectorModelRow[] }> {
@@ -126,6 +145,7 @@ function ModelRow({
  isSelected,
  isFavorite,
  disabled = false,
+  elevated = false,
  onPress,
  onToggleFavorite,
 }: {
@@ -133,6 +153,7 @@ function ModelRow({
  isSelected: boolean;
  isFavorite: boolean;
  disabled?: boolean;
+  elevated?: boolean;
  onPress: () => void;
  onToggleFavorite?: (provider: string, modelId: string) => void;
 }) {
@@ -153,8 +174,9 @@ function ModelRow({
      label={row.modelLabel}
      selected={isSelected}
      disabled={disabled}
+      elevated={elevated}
      onPress={onPress}
-      leadingSlot={<ProviderIcon size={14} color={theme.colors.foregroundMuted} />}
+      leadingSlot={<ProviderIcon size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />}
      trailingSlot={
        onToggleFavorite && !disabled ? (
          <Pressable
@@ -228,7 +250,7 @@ function FavoritesSection({
  }

  return (
-    <View>
+    <View style={styles.favoritesContainer}>
      <View style={styles.sectionHeading}>
        <Text style={styles.sectionHeadingText}>Favorites</Text>
      </View>
@@ -239,11 +261,11 @@ function FavoritesSection({
          isSelected={row.provider === selectedProvider && row.modelId === selectedModel}
          isFavorite={favoriteKeys.has(row.favoriteKey)}
          disabled={!canSelectProvider(row.provider)}
+          elevated
          onPress={() => onSelect(row.provider, row.modelId)}
          onToggleFavorite={onToggleFavorite}
        />
      ))}
-      <View style={styles.separator} />
    </View>
  );
 }
@@ -258,6 +280,7 @@ function GroupedProviderRows({
  canSelectProvider,
  onToggleFavorite,
  onDrillDown,
+  viewKind,
 }: {
  providerDefinitions: AgentProviderDefinition[];
  groupedRows: Array<{ providerId: string; providerLabel: string; rows: SelectorModelRow[] }>;
@@ -268,6 +291,7 @@ function GroupedProviderRows({
  canSelectProvider: (provider: string) => boolean;
  onToggleFavorite?: (provider: string, modelId: string) => void;
  onDrillDown: (providerId: string, providerLabel: string) => void;
+  viewKind: SelectorView["kind"];
 }) {
  const { theme } = useUnistyles();

@@ -276,19 +300,14 @@ function GroupedProviderRows({
      {groupedRows.map((group, index) => {
        const providerDefinition = providerDefinitions.find((definition) => definition.id === group.providerId);
        const ProvIcon = getProviderIcon(group.providerId);
-        const isInline = group.rows.length <= INLINE_MODEL_THRESHOLD;
+        const isInline = viewKind === "provider";

        return (
          <View key={group.providerId}>
            {index > 0 ? <View style={styles.separator} /> : null}
            {isInline ? (
              <>
-                <View style={styles.sectionHeading}>
-                  <Text style={styles.sectionHeadingText}>
-                    {providerDefinition?.label ?? group.providerLabel}
-                  </Text>
-                </View>
-                {group.rows.map((row) => (
+                {sortFavoritesFirst(group.rows, favoriteKeys).map((row) => (
                  <ModelRow
                    key={row.favoriteKey}
                    row={row}
@@ -309,11 +328,13 @@ function GroupedProviderRows({
                  pressed && styles.drillDownRowPressed,
                ]}
              >
-                <ProvIcon size={14} color={theme.colors.foregroundMuted} />
+                <ProvIcon size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
                <Text style={styles.drillDownText}>{group.providerLabel}</Text>
                <View style={styles.drillDownTrailing}>
-                  <Text style={styles.drillDownCount}>{group.rows.length}</Text>
-                  <ChevronRight size={14} color={theme.colors.foregroundMuted} />
+                  <Text style={styles.drillDownCount}>
+                    {group.rows.length} {group.rows.length === 1 ? "model" : "models"}
+                  </Text>
+                  <ChevronRight size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
                </View>
              </Pressable>
            )}
@@ -324,6 +345,46 @@ function GroupedProviderRows({
  );
 }

+function ProviderSearchInput({
+  value,
+  onChangeText,
+  autoFocus = false,
+}: {
+  value: string;
+  onChangeText: (text: string) => void;
+  autoFocus?: boolean;
+}) {
+  const { theme } = useUnistyles();
+  const inputRef = useRef<TextInput>(null);
+  const InputComponent = Platform.OS === "web" ? TextInput : BottomSheetTextInput;
+
+  useEffect(() => {
+    if (autoFocus && Platform.OS === "web" && inputRef.current) {
+      const timer = setTimeout(() => {
+        inputRef.current?.focus();
+      }, 50);
+      return () => clearTimeout(timer);
+    }
+  }, [autoFocus]);
+
+  return (
+    <View style={styles.providerSearchContainer}>
+      <Search size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
+      <InputComponent
+        ref={inputRef as any}
+        // @ts-expect-error - outlineStyle is web-only
+        style={[styles.providerSearchInput, Platform.OS === "web" && { outlineStyle: "none" }]}
+        placeholder="Search models..."
+        placeholderTextColor={theme.colors.foregroundMuted}
+        value={value}
+        onChangeText={onChangeText}
+        autoCapitalize="none"
+        autoCorrect={false}
+      />
+    </View>
+  );
+}
+
 function SelectorContent({
  view,
  providerDefinitions,
@@ -337,8 +398,8 @@ function SelectorContent({
  canSelectProvider,
  onToggleFavorite,
  onDrillDown,
-  onBack,
 }: SelectorContentProps) {
+  const { theme } = useUnistyles();
  const allRows = useMemo(
    () => buildModelRows(providerDefinitions, allProviderModels),
    [allProviderModels, providerDefinitions],
@@ -363,35 +424,41 @@ function SelectorContent({
    [favoriteKeys, visibleRows],
  );

-  const groupedRegularRows = useMemo(() => groupRowsByProvider(regularRows), [regularRows]);
+  // Group ALL visible rows by provider — favorites are a cross-cutting view,
+  // not a partition. A model being favorited doesn't remove it from its provider.
+  const allGroupedRows = useMemo(() => groupRowsByProvider(visibleRows), [visibleRows]);
+
+  // When searching at Level 1, filter grouped rows to only providers whose name or models match
+  const filteredGroupedRows = useMemo(() => {
+    if (view.kind === "provider" || !normalizedQuery) {
+      return allGroupedRows;
+    }
+    return allGroupedRows.filter(
+      (group) =>
+        group.providerLabel.toLowerCase().includes(normalizedQuery) || group.rows.length > 0,
+    );
+  }, [allGroupedRows, normalizedQuery, view.kind]);
+
+  const hasResults = favoriteRows.length > 0 || filteredGroupedRows.length > 0;

  return (
    <View>
-      {view.kind === "provider" ? (
-        <ProviderBackButton providerId={view.providerId} providerLabel={view.providerLabel} onBack={onBack} />
+      {view.kind === "all" ? (
+        <FavoritesSection
+          favoriteRows={favoriteRows}
+          selectedProvider={selectedProvider}
+          selectedModel={selectedModel}
+          favoriteKeys={favoriteKeys}
+          onSelect={onSelect}
+          canSelectProvider={canSelectProvider}
+          onToggleFavorite={onToggleFavorite}
+        />
      ) : null}

-      <SearchInput
-        placeholder={view.kind === "provider" ? "Search models..." : "Search models or providers..."}
-        value={searchQuery}
-        onChangeText={onSearchChange}
-        autoFocus={Platform.OS === "web"}
-      />
-
-      <FavoritesSection
-        favoriteRows={favoriteRows}
-        selectedProvider={selectedProvider}
-        selectedModel={selectedModel}
-        favoriteKeys={favoriteKeys}
-        onSelect={onSelect}
-        canSelectProvider={canSelectProvider}
-        onToggleFavorite={onToggleFavorite}
-      />
-
-      {groupedRegularRows.length > 0 ? (
+      {filteredGroupedRows.length > 0 ? (
        <GroupedProviderRows
          providerDefinitions={providerDefinitions}
-          groupedRows={groupedRegularRows}
+          groupedRows={filteredGroupedRows}
          selectedProvider={selectedProvider}
          selectedModel={selectedModel}
          favoriteKeys={favoriteKeys}
@@ -399,12 +466,13 @@ function SelectorContent({
          canSelectProvider={canSelectProvider}
          onToggleFavorite={onToggleFavorite}
          onDrillDown={onDrillDown}
+          viewKind={view.kind}
        />
      ) : null}

-      {favoriteRows.length === 0 && groupedRegularRows.length === 0 ? (
+      {!hasResults ? (
        <View style={styles.emptyState}>
-          <Search size={16} color="#777" />
+          <Search size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
          <Text style={styles.emptyStateText}>No models match your search</Text>
        </View>
      ) : null}
@@ -437,8 +505,8 @@ function ProviderBackButton({
        pressed && styles.backButtonPressed,
      ]}
    >
-      <ArrowLeft size={14} color={theme.colors.foregroundMuted} />
-      <ProviderIcon size={14} color={theme.colors.foregroundMuted} />
+      <ArrowLeft size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
+      <ProviderIcon size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
      <Text style={styles.backButtonText}>{providerLabel}</Text>
    </Pressable>
  );
@@ -455,6 +523,7 @@ export function CombinedModelSelector({
  favoriteKeys = new Set<string>(),
  onToggleFavorite,
  renderTrigger,
+  onClose,
  disabled = false,
 }: CombinedModelSelectorProps) {
  const { theme } = useUnistyles();
@@ -465,25 +534,35 @@ export function CombinedModelSelector({
  const [view, setView] = useState<SelectorView>({ kind: "all" });
  const [searchQuery, setSearchQuery] = useState("");

+  // Single-provider mode: only one provider with models → skip Level 1 entirely
+  const singleProviderView = useMemo<SelectorView | null>(() => {
+    const providers = Array.from(allProviderModels.keys());
+    if (providers.length !== 1) return null;
+    const providerId = providers[0]!;
+    const label = resolveProviderLabel(providerDefinitions, providerId);
+    return { kind: "provider", providerId, providerLabel: label };
+  }, [allProviderModels, providerDefinitions]);
+
  const handleOpenChange = useCallback(
    (open: boolean) => {
      setIsOpen(open);
-      setView({ kind: "all" });
+      setView(singleProviderView ?? { kind: "all" });
      if (!open) {
        setSearchQuery("");
+        onClose?.();
      }
    },
-    [],
+    [onClose, singleProviderView],
  );

  const handleSelect = useCallback(
    (provider: string, modelId: string) => {
      onSelect(provider as AgentProvider, modelId);
      setIsOpen(false);
-      setView({ kind: "all" });
+      setView(singleProviderView ?? { kind: "all" });
      setSearchQuery("");
    },
-    [onSelect],
+    [onSelect, singleProviderView],
  );

  const ProviderIcon = getProviderIcon(selectedProvider);
@@ -501,6 +580,15 @@ export function CombinedModelSelector({
    return model?.label ?? resolveDefaultModelLabel(models);
  }, [allProviderModels, isLoading, selectedModel, selectedProvider]);

+  const desktopFixedHeight = useMemo(() => {
+    if (view.kind !== "provider") {
+      return undefined;
+    }
+    const models = allProviderModels.get(view.providerId);
+    const modelCount = models?.length ?? 0;
+    return Math.min(80 + modelCount * 40, 400);
+  }, [allProviderModels, view]);
+
  const triggerLabel = useMemo(() => {
    if (selectedModelLabel === "Loading..." || selectedModelLabel === "Select model") {
      return selectedModelLabel;
@@ -568,7 +656,30 @@ export function CombinedModelSelector({
        stackBehavior="push"
        anchorRef={anchorRef}
        desktopPlacement="top-start"
+        desktopMinWidth={360}
+        desktopFixedHeight={desktopFixedHeight}
        title="Select model"
+        stickyHeader={
+          view.kind === "provider" ? (
+            <View style={styles.level2Header}>
+              {!singleProviderView ? (
+                <ProviderBackButton
+                  providerId={view.providerId}
+                  providerLabel={view.providerLabel}
+                  onBack={() => {
+                    setView({ kind: "all" });
+                    setSearchQuery("");
+                  }}
+                />
+              ) : null}
+              <ProviderSearchInput
+                value={searchQuery}
+                onChangeText={setSearchQuery}
+                autoFocus={Platform.OS === "web"}
+              />
+            </View>
+          ) : undefined
+        }
      >
        {isContentReady ? (
          <SelectorContent
@@ -586,13 +697,6 @@ export function CombinedModelSelector({
            onDrillDown={(providerId, providerLabel) => {
              setView({ kind: "provider", providerId, providerLabel });
            }}
-            onBack={
-              view.kind === "provider"
-                ? () => {
-                    setView({ kind: "all" });
-                  }
-                : undefined
-            }
          />
        ) : (
          <View style={styles.sheetLoadingState}>
@@ -634,17 +738,22 @@ const styles = StyleSheet.create((theme) => ({
    paddingVertical: 0,
    height: "auto",
  },
+  favoritesContainer: {
+    backgroundColor: theme.colors.surface1,
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.border,
+  },
  separator: {
    height: 1,
    backgroundColor: theme.colors.border,
-    marginVertical: theme.spacing[1],
  },
  sectionHeading: {
    flexDirection: "row",
    alignItems: "center",
    gap: theme.spacing[2],
    paddingHorizontal: theme.spacing[3],
-    paddingVertical: theme.spacing[1],
+    paddingTop: theme.spacing[2],
+    paddingBottom: theme.spacing[1],
  },
  sectionHeadingText: {
    fontSize: theme.fontSize.xs,
@@ -667,8 +776,8 @@ const styles = StyleSheet.create((theme) => ({
  },
  drillDownText: {
    flex: 1,
-    fontSize: theme.fontSize.xs,
-    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.foreground,
  },
  drillDownTrailing: {
    flexDirection: "row",
@@ -679,6 +788,11 @@ const styles = StyleSheet.create((theme) => ({
    fontSize: theme.fontSize.xs,
    color: theme.colors.foregroundMuted,
  },
+  level2Header: {
+    backgroundColor: theme.colors.surface1,
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.border,
+  },
  backButton: {
    flexDirection: "row",
    alignItems: "center",
@@ -689,7 +803,7 @@ const styles = StyleSheet.create((theme) => ({
    borderBottomColor: theme.colors.border,
  },
  backButtonHovered: {
-    backgroundColor: theme.colors.surface1,
+    backgroundColor: theme.colors.surface2,
  },
  backButtonPressed: {
    backgroundColor: theme.colors.surface2,
@@ -734,4 +848,16 @@ const styles = StyleSheet.create((theme) => ({
    color: theme.colors.foregroundMuted,
    fontSize: theme.fontSize.sm,
  },
+  providerSearchContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: theme.spacing[3],
+    gap: theme.spacing[2],
+  },
+  providerSearchInput: {
+    flex: 1,
+    paddingVertical: theme.spacing[3],
+    color: theme.colors.foreground,
+    fontSize: theme.fontSize.sm,
+  },
 }));
@@ -0,0 +1,102 @@
+import { useCallback, useEffect, useState } from "react";
+import { View, Text, ActivityIndicator, ScrollView } from "react-native";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { AdaptiveModalSheet } from "@/components/adaptive-modal-sheet";
+import { useHostRuntimeClient } from "@/runtime/host-runtime";
+import type { AgentProvider } from "@server/server/agent/agent-sdk-types";
+import { AGENT_PROVIDER_DEFINITIONS } from "@server/server/agent/provider-manifest";
+
+interface ProviderDiagnosticSheetProps {
+  provider: string;
+  visible: boolean;
+  onClose: () => void;
+  serverId: string;
+}
+
+export function ProviderDiagnosticSheet({
+  provider,
+  visible,
+  onClose,
+  serverId,
+}: ProviderDiagnosticSheetProps) {
+  const { theme } = useUnistyles();
+  const client = useHostRuntimeClient(serverId);
+  const [diagnostic, setDiagnostic] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const providerLabel = AGENT_PROVIDER_DEFINITIONS.find((d) => d.id === provider)?.label ?? provider;
+
+  const fetchDiagnostic = useCallback(async () => {
+    if (!client || !provider) return;
+
+    setLoading(true);
+    setDiagnostic(null);
+
+    try {
+      const result = await client.getProviderDiagnostic(provider as AgentProvider);
+      setDiagnostic(result.diagnostic);
+    } catch (err) {
+      setDiagnostic(err instanceof Error ? err.message : "Failed to fetch diagnostic");
+    } finally {
+      setLoading(false);
+    }
+  }, [client, provider]);
+
+  useEffect(() => {
+    if (visible) {
+      fetchDiagnostic();
+    } else {
+      setDiagnostic(null);
+    }
+  }, [visible, fetchDiagnostic]);
+
+  return (
+    <AdaptiveModalSheet
+      title={providerLabel}
+      visible={visible}
+      onClose={onClose}
+      snapPoints={["50%", "85%"]}
+    >
+      {loading ? (
+        <View style={sheetStyles.loadingContainer}>
+          <ActivityIndicator size="small" color={theme.colors.foregroundMuted} />
+          <Text style={sheetStyles.loadingText}>Fetching diagnostic…</Text>
+        </View>
+      ) : diagnostic ? (
+        <ScrollView
+          horizontal
+          style={sheetStyles.scrollContainer}
+          contentContainerStyle={sheetStyles.scrollContent}
+        >
+          <Text style={sheetStyles.diagnosticText} selectable>
+            {diagnostic}
+          </Text>
+        </ScrollView>
+      ) : null}
+    </AdaptiveModalSheet>
+  );
+}
+
+const sheetStyles = StyleSheet.create((theme) => ({
+  loadingContainer: {
+    paddingVertical: theme.spacing[6],
+    alignItems: "center",
+    gap: theme.spacing[2],
+  },
+  loadingText: {
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.foregroundMuted,
+  },
+  scrollContainer: {
+    flex: 1,
+  },
+  scrollContent: {
+    paddingBottom: theme.spacing[4],
+  },
+  diagnosticText: {
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.foreground,
+    fontFamily: "monospace",
+    lineHeight: theme.fontSize.sm * 1.6,
+  },
+}));
@@ -73,6 +73,12 @@ export interface ComboboxProps {
   * for that combobox instance to avoid animation overriding hidden opacity.
   */
  desktopPreventInitialFlash?: boolean;
+  /** Minimum width for the desktop popover (overrides trigger-based width). */
+  desktopMinWidth?: number;
+  /** Fixed height for the desktop popover (overrides default 400px max). */
+  desktopFixedHeight?: number;
+  /** Content rendered above the scroll area on desktop (sticky header). */
+  stickyHeader?: ReactNode;
  anchorRef: React.RefObject<View | null>;
  children?: ReactNode;
 }
@@ -150,6 +156,8 @@ export interface ComboboxItemProps {
  selected?: boolean;
  active?: boolean;
  disabled?: boolean;
+  /** When true, bumps hover/pressed colors up one surface level (for items on elevated backgrounds). */
+  elevated?: boolean;
  onPress: () => void;
  testID?: string;
 }
@@ -163,6 +171,7 @@ export function ComboboxItem({
  selected,
  active,
  disabled,
+  elevated,
  onPress,
  testID,
 }: ComboboxItemProps): ReactElement {
@@ -187,8 +196,8 @@ export function ComboboxItem({
      onPress={onPress}
      style={({ pressed, hovered = false }) => [
        styles.comboboxItem,
-        hovered && styles.comboboxItemHovered,
-        pressed && styles.comboboxItemPressed,
+        hovered && (elevated ? styles.comboboxItemHoveredElevated : styles.comboboxItemHovered),
+        pressed && (elevated ? styles.comboboxItemPressedElevated : styles.comboboxItemPressed),
        active && styles.comboboxItemActive,
        disabled && styles.comboboxItemDisabled,
      ]}
@@ -246,6 +255,9 @@ export function Combobox({
  stackBehavior,
  desktopPlacement = "top-start",
  desktopPreventInitialFlash = true,
+  desktopMinWidth,
+  desktopFixedHeight,
+  stickyHeader,
  anchorRef,
  children,
 }: ComboboxProps): ReactElement {
@@ -390,12 +402,27 @@ export function Combobox({
    ((floatingTop ?? 0) !== 0 || floatingLeft !== 0 || referenceAtOrigin);
  const shouldHideDesktopContent = desktopPreventInitialFlash && !hasResolvedDesktopPosition;
  const shouldUseDesktopFade = !desktopPreventInitialFlash;
+  // For top-placed popups: once position resolves, use bottom-based CSS positioning
+  // so height changes grow upward naturally without floating-ui needing to reposition.
+  const useStableBottom =
+    !isDesktopAboveSearch &&
+    IS_WEB &&
+    !isMobile &&
+    hasResolvedDesktopPosition &&
+    desktopPlacement.startsWith("top") &&
+    referenceTop !== null;
+
  const desktopPositionStyle = isDesktopAboveSearch
    ? {
        left: floatingLeft ?? 0,
        bottom: desktopAboveSearchBottom ?? 0,
      }
-    : floatingStyles;
+    : useStableBottom
+      ? {
+          left: floatingLeft ?? 0,
+          bottom: Math.max(windowHeight - referenceTop!, collisionPadding),
+        }
+      : floatingStyles;

  useEffect(() => {
    if (!isMobile) return;
@@ -662,6 +689,7 @@ export function Combobox({
        <View style={styles.bottomSheetHeader}>
          <Text style={styles.comboboxTitle}>{title}</Text>
        </View>
+        {stickyHeader}
        <BottomSheetScrollView
          contentContainerStyle={styles.comboboxScrollContent}
          keyboardShouldPersistTaps="handled"
@@ -687,13 +715,16 @@ export function Combobox({
            styles.desktopContainer,
            {
              position: "absolute",
-              minWidth: referenceWidth ?? 200,
-              maxWidth: 400,
+              minWidth: desktopMinWidth ?? referenceWidth ?? 200,
+              maxWidth: Math.max(400, desktopMinWidth ?? 0),
            },
+            desktopFixedHeight != null
+              ? { minHeight: desktopFixedHeight, maxHeight: desktopFixedHeight }
+              : null,
            desktopPositionStyle,
            shouldHideDesktopContent ? { opacity: 0 } : null,
            typeof availableSize?.height === "number"
-              ? { maxHeight: Math.min(availableSize.height, 400) }
+              ? { maxHeight: Math.min(availableSize.height, desktopFixedHeight ?? 400) }
              : null,
          ]}
          ref={refs.setFloating}
@@ -701,14 +732,17 @@ export function Combobox({
          onLayout={() => update()}
        >
          {children ? (
-            <ScrollView
-              contentContainerStyle={styles.desktopScrollContent}
-              keyboardShouldPersistTaps="handled"
-              showsVerticalScrollIndicator={false}
-              style={styles.desktopScroll}
-            >
-              {content}
-            </ScrollView>
+            <>
+              {stickyHeader}
+              <ScrollView
+                contentContainerStyle={styles.desktopChildrenScrollContent}
+                keyboardShouldPersistTaps="handled"
+                showsVerticalScrollIndicator={false}
+                style={styles.desktopScroll}
+              >
+                {content}
+              </ScrollView>
+            </>
          ) : (
            <>
              {effectiveOptionsPosition === "above-search" ? (
@@ -783,9 +817,15 @@ const styles = StyleSheet.create((theme) => ({
  comboboxItemHovered: {
    backgroundColor: theme.colors.surface1,
  },
+  comboboxItemHoveredElevated: {
+    backgroundColor: theme.colors.surface2,
+  },
  comboboxItemPressed: {
    backgroundColor: theme.colors.surface1,
  },
+  comboboxItemPressedElevated: {
+    backgroundColor: theme.colors.surface2,
+  },
  comboboxItemActive: {
    backgroundColor: theme.colors.surface1,
  },
@@ -876,6 +916,9 @@ const styles = StyleSheet.create((theme) => ({
  desktopScrollContent: {
    paddingVertical: theme.spacing[1],
  },
+  desktopChildrenScrollContent: {
+    // No padding — custom children (e.g. model selector) control their own spacing
+  },
  desktopScrollContentAboveSearch: {
    flexGrow: 1,
    justifyContent: "flex-end",
@@ -0,0 +1,65 @@
+import { View, Text } from "react-native";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+
+type StatusBadgeVariant = "success" | "error" | "muted";
+
+interface StatusBadgeProps {
+  label: string;
+  variant?: StatusBadgeVariant;
+}
+
+export function StatusBadge({ label, variant = "muted" }: StatusBadgeProps) {
+  const { theme } = useUnistyles();
+
+  return (
+    <View
+      style={[
+        styles.pill,
+        variant === "success" && styles.pillSuccess,
+        variant === "error" && styles.pillError,
+      ]}
+    >
+      <Text
+        style={[
+          styles.pillText,
+          variant === "success" && styles.pillTextSuccess,
+          variant === "error" && styles.pillTextError,
+        ]}
+      >
+        {label}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  pill: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderRadius: theme.borderRadius.full,
+    borderWidth: 1,
+    borderColor: theme.colors.border,
+    backgroundColor: theme.colors.surface3,
+    paddingHorizontal: theme.spacing[2],
+    paddingVertical: 3,
+  },
+  pillSuccess: {
+    backgroundColor: theme.colors.palette.green[900],
+    borderColor: theme.colors.palette.green[800],
+  },
+  pillError: {
+    backgroundColor: theme.colors.palette.red[900],
+    borderColor: theme.colors.palette.red[800],
+  },
+  pillText: {
+    fontSize: theme.fontSize.xs,
+    fontWeight: theme.fontWeight.normal,
+    color: theme.colors.foregroundMuted,
+  },
+  pillTextSuccess: {
+    color: theme.colors.palette.green[400],
+  },
+  pillTextError: {
+    color: theme.colors.palette.red[500],
+  },
+}));
@@ -1105,6 +1105,7 @@ function SessionProviderInternal({ children, serverId, client }: SessionProvider
          hostname: serverInfo.hostname,
          version: serverInfo.version,
          ...(serverInfo.capabilities ? { capabilities: serverInfo.capabilities } : {}),
+          ...(serverInfo.features ? { features: serverInfo.features } : {}),
        });
        return;
      }
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useQuery, useQueries } from "@tanstack/react-query";
+import { useQuery, useQueries, useQueryClient } from "@tanstack/react-query";
 import {
  AGENT_PROVIDER_DEFINITIONS,
  type AgentProviderDefinition,
@@ -8,9 +8,11 @@ import type {
  AgentMode,
  AgentModelDefinition,
  AgentProvider,
+  ProviderSnapshotEntry,
 } from "@server/server/agent/agent-sdk-types";
 import { useHosts } from "@/runtime/host-runtime";
 import { useHostRuntimeClient, useHostRuntimeIsConnected } from "@/runtime/host-runtime";
+import { useSessionForServer } from "./use-session-directory";
 import {
  useFormPreferences,
  mergeProviderPreferences,
@@ -84,6 +86,7 @@ type UseAgentFormStateResult = {
  providerDefinitions: AgentProviderDefinition[];
  providerDefinitionMap: Map<AgentProvider, AgentProviderDefinition>;
  agentDefinition?: AgentProviderDefinition;
+  allProviderEntries?: ProviderSnapshotEntry[];
  modeOptions: AgentMode[];
  availableModels: AgentModelDefinition[];
  allProviderModels: Map<string, AgentModelDefinition[]>;
@@ -319,6 +322,10 @@ function combineInitialValues(
  return initialValues;
 }

+function providersSnapshotQueryKey(serverId: string | null, cwd: string | undefined) {
+  return ["providersSnapshot", serverId, cwd ?? ""] as const;
+}
+
 export function useAgentFormState(options: UseAgentFormStateOptions = {}): UseAgentFormStateResult {
  const {
    initialServerId = null,
@@ -336,6 +343,7 @@ export function useAgentFormState(options: UseAgentFormStateOptions = {}): UseAg
  } = useFormPreferences();

  const daemons = useHosts();
+  const queryClient = useQueryClient();

  // Build a set of valid server IDs for preference validation
  const validServerIds = useMemo(() => new Set(daemons.map((d) => d.serverId)), [daemons]);
@@ -371,11 +379,138 @@ export function useAgentFormState(options: UseAgentFormStateOptions = {}): UseAg
  // Session state for provider model listing
  const client = useHostRuntimeClient(formState.serverId ?? "");
  const isConnected = useHostRuntimeIsConnected(formState.serverId ?? "");
+  const supportsProvidersSnapshot = useSessionForServer(
+    formState.serverId,
+    (session) => session?.serverInfo?.features?.providersSnapshot === true,
+  );

+  const [debouncedCwd, setDebouncedCwd] = useState<string | undefined>(undefined);
+  useEffect(() => {
+    const trimmed = formState.workingDir.trim();
+    const next = trimmed.length > 0 ? trimmed : undefined;
+    const timer = setTimeout(() => setDebouncedCwd(next), 180);
+    return () => clearTimeout(timer);
+  }, [formState.workingDir]);
+
+  const snapshotQueryKey = useMemo(
+    () => providersSnapshotQueryKey(formState.serverId, debouncedCwd),
+    [debouncedCwd, formState.serverId],
+  );
+
+  const providersSnapshotQuery = useQuery({
+    queryKey: snapshotQueryKey,
+    enabled: Boolean(
+      supportsProvidersSnapshot &&
+        isVisible &&
+        isTargetDaemonReady &&
+        formState.serverId &&
+        client &&
+        isConnected,
+    ),
+    staleTime: 60 * 1000,
+    queryFn: async () => {
+      if (!client) {
+        throw new Error("Host is not connected");
+      }
+      return client.getProvidersSnapshot({ cwd: debouncedCwd });
+    },
+  });
+
+  useEffect(() => {
+    if (
+      !supportsProvidersSnapshot ||
+      !client ||
+      !isConnected ||
+      !isVisible ||
+      !isTargetDaemonReady ||
+      !formState.serverId
+    ) {
+      return;
+    }
+
+    return client.on("providers_snapshot_update", (message) => {
+      if (message.type !== "providers_snapshot_update") {
+        return;
+      }
+      if (message.payload.cwd !== undefined && message.payload.cwd !== debouncedCwd) {
+        return;
+      }
+      queryClient.setQueryData(snapshotQueryKey, {
+        entries: message.payload.entries,
+        generatedAt: message.payload.generatedAt,
+        requestId: "providers_snapshot_update",
+      });
+    });
+  }, [
+    client,
+    debouncedCwd,
+    formState.serverId,
+    isConnected,
+    isTargetDaemonReady,
+    isVisible,
+    queryClient,
+    snapshotQueryKey,
+    supportsProvidersSnapshot,
+  ]);
+
+  const snapshotEntries = providersSnapshotQuery.data?.entries ?? undefined;
+  const allProviderEntries = useMemo(
+    () => (supportsProvidersSnapshot ? snapshotEntries ?? [] : undefined),
+    [snapshotEntries, supportsProvidersSnapshot],
+  );
+  const snapshotProviderDefinitions = useMemo(() => {
+    if (!supportsProvidersSnapshot) {
+      return [];
+    }
+    const snapshotProviders = new Set((snapshotEntries ?? []).map((entry) => entry.provider));
+    return allProviderDefinitions.filter((definition) => snapshotProviders.has(definition.id));
+  }, [snapshotEntries, supportsProvidersSnapshot]);
+  const snapshotProviderDefinitionMap = useMemo(
+    () =>
+      new Map<AgentProvider, AgentProviderDefinition>(
+        snapshotProviderDefinitions.map((definition) => [definition.id, definition]),
+      ),
+    [snapshotProviderDefinitions],
+  );
+  const snapshotSelectableProviderDefinitionMap = useMemo(() => {
+    const readyProviders = new Set(
+      (snapshotEntries ?? [])
+        .filter((entry) => entry.status === "ready")
+        .map((entry) => entry.provider),
+    );
+    return new Map<AgentProvider, AgentProviderDefinition>(
+      snapshotProviderDefinitions
+        .filter((definition) => readyProviders.has(definition.id))
+        .map((definition) => [definition.id, definition]),
+    );
+  }, [snapshotEntries, snapshotProviderDefinitions]);
+  const snapshotAllProviderModels = useMemo(() => {
+    const map = new Map<string, AgentModelDefinition[]>();
+    for (const entry of snapshotEntries ?? []) {
+      map.set(entry.provider, entry.models ?? []);
+    }
+    return map;
+  }, [snapshotEntries]);
+  const snapshotSelectedEntry = useMemo(
+    () => (snapshotEntries ?? []).find((entry) => entry.provider === formState.provider) ?? null,
+    [formState.provider, snapshotEntries],
+  );
+  const snapshotSelectedProviderModels = snapshotSelectedEntry?.models ?? null;
+  const snapshotSelectedProviderModes =
+    snapshotSelectedEntry?.modes ??
+    snapshotProviderDefinitionMap.get(formState.provider)?.modes ??
+    [];
+
+  // COMPAT(providersSnapshot): legacy fallback for daemons without snapshot support — remove when all daemons support snapshots
  const availableProvidersQuery = useQuery({
    queryKey: ["availableProviders", formState.serverId],
    enabled: Boolean(
-      isVisible && isTargetDaemonReady && formState.serverId && client && isConnected,
+      !supportsProvidersSnapshot &&
+        isVisible &&
+        isTargetDaemonReady &&
+        formState.serverId &&
+        client &&
+        isConnected,
    ),
    staleTime: 60 * 1000,
    queryFn: async () => {
@@ -389,43 +524,33 @@ export function useAgentFormState(options: UseAgentFormStateOptions = {}): UseAg
      return payload.providers.filter((entry) => entry.available).map((entry) => entry.provider);
    },
  });
-
-  const providerDefinitions = useMemo(() => {
+  const legacyProviderDefinitions = useMemo(() => {
    const availableProviders = availableProvidersQuery.data;
    if (!availableProviders) {
      return [];
    }
    const available = new Set(availableProviders);
-    return allProviderDefinitions.filter((definition) =>
-      available.has(definition.id as AgentProvider),
-    );
+    return allProviderDefinitions.filter((definition) => available.has(definition.id));
  }, [availableProvidersQuery.data]);
-
-  const providerDefinitionMap = useMemo(
+  const legacyProviderDefinitionMap = useMemo(
    () =>
      new Map<AgentProvider, AgentProviderDefinition>(
-        providerDefinitions.map((definition) => [definition.id as AgentProvider, definition]),
+        legacyProviderDefinitions.map((definition) => [definition.id, definition]),
      ),
-    [providerDefinitions],
+    [legacyProviderDefinitions],
  );

-  const [debouncedCwd, setDebouncedCwd] = useState<string | undefined>(undefined);
-  useEffect(() => {
-    const trimmed = formState.workingDir.trim();
-    const next = trimmed.length > 0 ? trimmed : undefined;
-    const timer = setTimeout(() => setDebouncedCwd(next), 180);
-    return () => clearTimeout(timer);
-  }, [formState.workingDir]);
-
-  const providerModelsQuery = useQuery({
+  // COMPAT(providersSnapshot): legacy fallback for daemons without snapshot support — remove when all daemons support snapshots
+  const legacySelectedProviderModelsQuery = useQuery({
    queryKey: ["providerModels", formState.serverId, formState.provider],
    enabled: Boolean(
+      !supportsProvidersSnapshot &&
      isVisible &&
        isTargetDaemonReady &&
        formState.serverId &&
        client &&
        isConnected &&
-        providerDefinitionMap.has(formState.provider),
+        legacyProviderDefinitionMap.has(formState.provider),
    ),
    staleTime: 5 * 60 * 1000,
    queryFn: async () => {
@@ -441,18 +566,19 @@ export function useAgentFormState(options: UseAgentFormStateOptions = {}): UseAg
      return payload.models ?? [];
    },
  });
+  const legacySelectedProviderModels = legacySelectedProviderModelsQuery.data ?? null;

-  const availableModels = providerModelsQuery.data ?? null;
-
+  // COMPAT(providersSnapshot): legacy fallback for daemons without snapshot support — remove when all daemons support snapshots
  const providerModesQuery = useQuery({
    queryKey: ["providerModes", formState.serverId, formState.provider, debouncedCwd],
    enabled: Boolean(
-      isVisible &&
+      !supportsProvidersSnapshot &&
+        isVisible &&
        isTargetDaemonReady &&
        formState.serverId &&
        client &&
        isConnected &&
-        providerDefinitionMap.has(formState.provider),
+        legacyProviderDefinitionMap.has(formState.provider),
    ),
    staleTime: 5 * 60 * 1000,
    queryFn: async () => {
@@ -469,8 +595,9 @@ export function useAgentFormState(options: UseAgentFormStateOptions = {}): UseAg
    },
  });

+  // COMPAT(providersSnapshot): legacy fallback for daemons without snapshot support — remove when all daemons support snapshots
  const allProviderModelQueries = useQueries({
-    queries: providerDefinitions.map((def) => ({
+    queries: (supportsProvidersSnapshot ? [] : legacyProviderDefinitions).map((def) => ({
      queryKey: ["providerModels", formState.serverId, def.id],
      enabled: Boolean(
        isVisible && isTargetDaemonReady && formState.serverId && client && isConnected,
@@ -490,19 +617,40 @@ export function useAgentFormState(options: UseAgentFormStateOptions = {}): UseAg
      },
    })),
  });
-
-  const allProviderModels = useMemo(() => {
+  const legacyAllProviderModels = useMemo(() => {
    const map = new Map<string, AgentModelDefinition[]>();
-    for (let i = 0; i < providerDefinitions.length; i++) {
+    for (let i = 0; i < legacyProviderDefinitions.length; i++) {
      const query = allProviderModelQueries[i];
      if (query?.data) {
-        map.set(providerDefinitions[i]!.id, query.data);
+        map.set(legacyProviderDefinitions[i]!.id, query.data);
      }
    }
    return map;
-  }, [allProviderModelQueries, providerDefinitions]);
+  }, [allProviderModelQueries, legacyProviderDefinitions]);
+  const legacySelectedProviderModes =
+    providerModesQuery.data ?? legacyProviderDefinitionMap.get(formState.provider)?.modes ?? [];

-  const isAllModelsLoading = allProviderModelQueries.some((q) => q.isLoading);
+  const providerDefinitions = supportsProvidersSnapshot
+    ? snapshotProviderDefinitions
+    : legacyProviderDefinitions;
+  const providerDefinitionMap = supportsProvidersSnapshot
+    ? snapshotProviderDefinitionMap
+    : legacyProviderDefinitionMap;
+  const selectableProviderDefinitionMap = supportsProvidersSnapshot
+    ? snapshotSelectableProviderDefinitionMap
+    : legacyProviderDefinitionMap;
+  const allProviderModels = supportsProvidersSnapshot
+    ? snapshotAllProviderModels
+    : legacyAllProviderModels;
+  const availableModels = supportsProvidersSnapshot
+    ? snapshotSelectedProviderModels
+    : legacySelectedProviderModels;
+  const modeOptions = supportsProvidersSnapshot
+    ? snapshotSelectedProviderModes
+    : legacySelectedProviderModes;
+  const isAllModelsLoading = supportsProvidersSnapshot
+    ? providersSnapshotQuery.isLoading || providersSnapshotQuery.isFetching
+    : allProviderModelQueries.some((q) => q.isLoading);

  // Combine initialValues with initialServerId for resolution
  const combinedInitialValues = useMemo((): FormInitialValues | undefined => {
@@ -527,7 +675,7 @@ export function useAgentFormState(options: UseAgentFormStateOptions = {}): UseAg
      userModified,
      formStateRef.current,
      validServerIds,
-      providerDefinitionMap,
+      selectableProviderDefinitionMap,
    );

    // Only update if something changed
@@ -552,7 +700,7 @@ export function useAgentFormState(options: UseAgentFormStateOptions = {}): UseAg
    availableModels,
    userModified,
    validServerIds,
-    providerDefinitionMap,
+    selectableProviderDefinitionMap,
  ]);

  // Auto-select the first online host when:
@@ -592,8 +740,11 @@ export function useAgentFormState(options: UseAgentFormStateOptions = {}): UseAg

  const setProviderFromUser = useCallback(
    (provider: AgentProvider) => {
+      if (!selectableProviderDefinitionMap.has(provider)) {
+        return;
+      }
      const providerModels = allProviderModels.get(provider) ?? null;
-      const providerDef = providerDefinitionMap.get(provider);
+      const providerDef = selectableProviderDefinitionMap.get(provider);
      const providerPrefs = preferences?.providerPreferences?.[provider];

      const isValidModel = (m: string) =>
@@ -631,12 +782,20 @@ export function useAgentFormState(options: UseAgentFormStateOptions = {}): UseAg
        thinkingOptionId: nextThinkingOptionId,
      }));
    },
-    [allProviderModels, preferences?.providerPreferences, providerDefinitionMap, updatePreferences],
+    [
+      allProviderModels,
+      preferences?.providerPreferences,
+      selectableProviderDefinitionMap,
+      updatePreferences,
+    ],
  );

  const setProviderAndModelFromUser = useCallback(
    (provider: AgentProvider, modelId: string) => {
-      const providerDef = providerDefinitionMap.get(provider);
+      if (!selectableProviderDefinitionMap.has(provider)) {
+        return;
+      }
+      const providerDef = selectableProviderDefinitionMap.get(provider);
      const providerModels = allProviderModels.get(provider) ?? null;
      const normalizedModelId = normalizeSelectedModelId(modelId);
      const nextModelId = normalizedModelId || resolveDefaultModelId(providerModels);
@@ -656,7 +815,7 @@ export function useAgentFormState(options: UseAgentFormStateOptions = {}): UseAg
      setUserModified((prev) => ({ ...prev, provider: true, model: true }));
      void updatePreferences({ provider });
    },
-    [allProviderModels, providerDefinitionMap, updatePreferences],
+    [allProviderModels, selectableProviderDefinitionMap, updatePreferences],
  );

  const setModeFromUser = useCallback(
@@ -713,8 +872,15 @@ export function useAgentFormState(options: UseAgentFormStateOptions = {}): UseAg
  }, []);

  const refreshProviderModels = useCallback(() => {
-    void providerModelsQuery.refetch();
-  }, [providerModelsQuery]);
+    if (supportsProvidersSnapshot) {
+      if (!client) {
+        return;
+      }
+      void client.refreshProvidersSnapshot({ cwd: debouncedCwd });
+      return;
+    }
+    void legacySelectedProviderModelsQuery.refetch();
+  }, [client, debouncedCwd, legacySelectedProviderModelsQuery, supportsProvidersSnapshot]);

  const persistFormPreferences = useCallback(async () => {
    const resolvedModel = resolveEffectiveModel(availableModels, formState.model);
@@ -747,13 +913,20 @@ export function useAgentFormState(options: UseAgentFormStateOptions = {}): UseAg
  ]);

  const agentDefinition = providerDefinitionMap.get(formState.provider);
-  const modeOptions = providerModesQuery.data ?? agentDefinition?.modes ?? [];
  const effectiveModel = resolveEffectiveModel(availableModels, formState.model);
  const resolvedModelId = effectiveModel?.id ?? formState.model;
  const availableThinkingOptions = effectiveModel?.thinkingOptions ?? [];
-  const isModelLoading = providerModelsQuery.isLoading || providerModelsQuery.isFetching;
+  const isModelLoading = supportsProvidersSnapshot
+    ? providersSnapshotQuery.isLoading || providersSnapshotQuery.isFetching
+    : legacySelectedProviderModelsQuery.isLoading || legacySelectedProviderModelsQuery.isFetching;
  const modelError =
-    providerModelsQuery.error instanceof Error ? providerModelsQuery.error.message : null;
+    supportsProvidersSnapshot
+      ? providersSnapshotQuery.error instanceof Error
+        ? providersSnapshotQuery.error.message
+        : null
+      : legacySelectedProviderModelsQuery.error instanceof Error
+        ? legacySelectedProviderModelsQuery.error.message
+        : null;

  const workingDirIsEmpty = !formState.workingDir.trim();

@@ -776,6 +949,7 @@ export function useAgentFormState(options: UseAgentFormStateOptions = {}): UseAg
      providerDefinitions,
      providerDefinitionMap,
      agentDefinition,
+      allProviderEntries,
      modeOptions,
      availableModels: availableModels ?? [],
      allProviderModels,
@@ -806,6 +980,7 @@ export function useAgentFormState(options: UseAgentFormStateOptions = {}): UseAg
      providerDefinitions,
      providerDefinitionMap,
      agentDefinition,
+      allProviderEntries,
      modeOptions,
      availableModels,
      allProviderModels,
@@ -220,6 +220,7 @@ function DraftAgentScreenContent({
    modeOptions,
    availableModels,
    allProviderModels,
+    allProviderEntries,
    isAllModelsLoading,
    availableThinkingOptions,
    isModelLoading,
@@ -21,6 +21,7 @@ import {
  Info,
  Shield,
  Puzzle,
+  Blocks,
 } from "lucide-react-native";
 import { useAppSettings, type AppSettings } from "@/hooks/use-settings";
 import type { HostProfile, HostConnection } from "@/types/host-connection";
@@ -62,6 +63,11 @@ import { THINKING_TONE_NATIVE_PCM_BASE64 } from "@/utils/thinking-tone.native-pc
 import { useVoiceAudioEngineOptional } from "@/contexts/voice-context";
 import { useIsLocalDaemon } from "@/hooks/use-is-local-daemon";
 import { isCompactFormFactor } from "@/constants/layout";
+import { AGENT_PROVIDER_DEFINITIONS } from "@server/server/agent/provider-manifest";
+import { getProviderIcon } from "@/components/provider-icons";
+import { ProviderDiagnosticSheet } from "@/components/provider-diagnostic-sheet";
+import { StatusBadge } from "@/components/ui/status-badge";
+import type { ProviderSnapshotEntry } from "@server/server/agent/agent-sdk-types";

 // ---------------------------------------------------------------------------
 // Section definitions
@@ -72,6 +78,7 @@ type SettingsSectionId =
  | "appearance"
  | "shortcuts"
  | "integrations"
+  | "providers"
  | "diagnostics"
  | "about"
  | "permissions"
@@ -99,6 +106,7 @@ function getSettingsSections(context: { isDesktopApp: boolean }): SettingsSectio
  }

  sections.push(
+    { id: "providers", label: "Providers", icon: Blocks },
    { id: "diagnostics", label: "Diagnostics", icon: Stethoscope },
    { id: "about", label: "About", icon: Info },
  );
@@ -418,6 +426,116 @@ function AppearanceSection({ settings, handleThemeChange }: AppearanceSectionPro
 }


+interface ProvidersSectionProps {
+  routeServerId: string;
+}
+
+function ProvidersSection({ routeServerId }: ProvidersSectionProps) {
+  const { theme } = useUnistyles();
+  const client = useHostRuntimeClient(routeServerId);
+  const isConnected = useHostRuntimeIsConnected(routeServerId);
+  const [entries, setEntries] = useState<ProviderSnapshotEntry[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [diagnosticProvider, setDiagnosticProvider] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!client || !isConnected) {
+      setEntries([]);
+      return;
+    }
+
+    let cancelled = false;
+    setLoading(true);
+    client
+      .getProvidersSnapshot()
+      .then((result) => {
+        if (!cancelled) setEntries(result.entries);
+      })
+      .catch(() => {
+        if (!cancelled) setEntries([]);
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [client, isConnected]);
+
+  const hasServer = routeServerId.length > 0;
+
+  return (
+    <>
+      <View style={settingsStyles.section}>
+        <Text style={settingsStyles.sectionTitle}>Providers</Text>
+        {!hasServer || !isConnected ? (
+          <View style={[settingsStyles.card, styles.emptyCard]}>
+            <Text style={styles.emptyText}>Connect to a host to see providers</Text>
+          </View>
+        ) : loading ? (
+          <View style={[settingsStyles.card, styles.emptyCard]}>
+            <Text style={styles.emptyText}>Loading...</Text>
+          </View>
+        ) : (
+          <View style={[settingsStyles.card, styles.audioCard]}>
+            {AGENT_PROVIDER_DEFINITIONS.map((def) => {
+              const entry = entries.find((e) => e.provider === def.id);
+              const status = entry?.status ?? "unavailable";
+              const ProviderIcon = getProviderIcon(def.id);
+
+              return (
+                <View key={def.id} style={styles.audioRow}>
+                  <View style={[styles.audioRowContent, { flexDirection: "row", alignItems: "center", gap: theme.spacing[2] }]}>
+                    <ProviderIcon size={theme.iconSize.sm} color={theme.colors.foreground} />
+                    <Text style={styles.audioRowTitle}>{def.label}</Text>
+                  </View>
+                  <View style={styles.providerActions}>
+                    <StatusBadge
+                      label={
+                        status === "ready"
+                          ? "Available"
+                          : status === "error"
+                            ? "Error"
+                            : status === "loading"
+                              ? "Loading..."
+                              : "Not installed"
+                      }
+                      variant={
+                        status === "ready"
+                          ? "success"
+                          : status === "error"
+                            ? "error"
+                            : "muted"
+                      }
+                    />
+                    <Button
+                      variant="secondary"
+                      size="sm"
+                      onPress={() => setDiagnosticProvider(def.id)}
+                    >
+                      Diagnostic
+                    </Button>
+                  </View>
+                </View>
+              );
+            })}
+          </View>
+        )}
+      </View>
+
+      {diagnosticProvider ? (
+        <ProviderDiagnosticSheet
+          provider={diagnosticProvider}
+          visible
+          onClose={() => setDiagnosticProvider(null)}
+          serverId={routeServerId}
+        />
+      ) : null}
+    </>
+  );
+}
+
 interface DiagnosticsSectionProps {
  voiceAudioEngine: ReturnType<typeof useVoiceAudioEngineOptional>;
  isPlaybackTestRunning: boolean;
@@ -486,6 +604,7 @@ interface SettingsSectionContentProps {
  sectionId: SettingsSectionId;
  hostsProps: HostsSectionProps;
  appearanceProps: AppearanceSectionProps;
+  providersProps: ProvidersSectionProps;
  diagnosticsProps: DiagnosticsSectionProps;
  aboutProps: AboutSectionProps;
  appVersion: string | null;
@@ -497,6 +616,7 @@ function SettingsSectionContent({
  sectionId,
  hostsProps,
  appearanceProps,
+  providersProps,
  diagnosticsProps,
  aboutProps,
  appVersion,
@@ -510,6 +630,8 @@ function SettingsSectionContent({
      return <AppearanceSection {...appearanceProps} />;
    case "shortcuts":
      return <KeyboardShortcutsSection />;
+    case "providers":
+      return <ProvidersSection {...providersProps} />;
    case "diagnostics":
      return <DiagnosticsSection {...diagnosticsProps} />;
    case "about":
@@ -567,7 +689,7 @@ function SettingsDesktopLayout({ sections, sectionContentProps }: SettingsLayout
          const isSelected = section.id === selectedSectionId;
          const IconComponent = section.icon;
          const showSeparator =
-            section.id === "integrations" || section.id === "diagnostics";
+            section.id === "integrations" || section.id === "providers";
          return (
            <View key={section.id}>
              {showSeparator ? <View style={desktopStyles.sidebarSeparator} /> : null}
@@ -951,9 +1073,14 @@ export default function SettingsScreen() {
    isDesktopApp,
  };

+  const providersProps: ProvidersSectionProps = {
+    routeServerId,
+  };
+
  const sectionContentProps: Omit<SettingsSectionContentProps, "sectionId"> = {
    hostsProps,
    appearanceProps,
+    providersProps,
    diagnosticsProps,
    aboutProps,
    appVersion,
@@ -1761,6 +1888,11 @@ const styles = StyleSheet.create((theme) => ({
    color: theme.colors.foreground,
    fontSize: theme.fontSize.base,
  },
+  providerActions: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+  },
  aboutValue: {
    color: theme.colors.foregroundMuted,
    fontSize: theme.fontSize.sm,
@@ -75,6 +75,7 @@ export function WorkspaceDraftAgentTab({
    modeOptions,
    availableModels,
    allProviderModels,
+    allProviderEntries,
    isAllModelsLoading,
    availableThinkingOptions,
    isModelLoading,
@@ -250,6 +251,60 @@ export function WorkspaceDraftAgentTab({
    addImagesRef.current = addImages;
  }, []);

+  const focusInputRef = useRef<(() => void) | null>(null);
+
+  const handleFocusInputCallback = useCallback((focus: () => void) => {
+    focusInputRef.current = focus;
+  }, []);
+
+  const handleProviderSelectWithFocus = useCallback(
+    (provider: string) => {
+      setProviderFromUser(provider);
+      focusInputRef.current?.();
+    },
+    [setProviderFromUser],
+  );
+
+  const handleModeSelectWithFocus = useCallback(
+    (modeId: string) => {
+      setModeFromUser(modeId);
+      focusInputRef.current?.();
+    },
+    [setModeFromUser],
+  );
+
+  const handleModelSelectWithFocus = useCallback(
+    (modelId: string) => {
+      setModelFromUser(modelId);
+      focusInputRef.current?.();
+    },
+    [setModelFromUser],
+  );
+
+  const handleProviderAndModelSelectWithFocus = useCallback(
+    (provider: string, modelId: string) => {
+      setProviderAndModelFromUser(provider, modelId);
+      focusInputRef.current?.();
+    },
+    [setProviderAndModelFromUser],
+  );
+
+  const handleThinkingOptionSelectWithFocus = useCallback(
+    (optionId: string) => {
+      setThinkingOptionFromUser(optionId);
+      focusInputRef.current?.();
+    },
+    [setThinkingOptionFromUser],
+  );
+
+  const handleSetFeatureWithFocus = useCallback(
+    (featureId: string, value: unknown) => {
+      setDraftFeatureValue(featureId, value);
+      focusInputRef.current?.();
+    },
+    [setDraftFeatureValue],
+  );
+
  return (
    <FileDropZone onFilesDropped={handleFilesDropped}>
      <View style={styles.container}>
@@ -296,26 +351,28 @@ export function WorkspaceDraftAgentTab({
            clearDraft={draftInput.clear}
            autoFocus={shouldAutoFocusWorkspaceDraftComposer({ isPaneFocused, isSubmitting })}
            onAddImages={handleAddImagesCallback}
+            onFocusInput={handleFocusInputCallback}
            commandDraftConfig={draftCommandConfig}
            statusControls={{
              providerDefinitions,
              selectedProvider,
-              onSelectProvider: setProviderFromUser,
+              onSelectProvider: handleProviderSelectWithFocus,
              modeOptions,
              selectedMode,
-              onSelectMode: setModeFromUser,
+              onSelectMode: handleModeSelectWithFocus,
              models: availableModels,
              selectedModel,
-              onSelectModel: setModelFromUser,
+              onSelectModel: handleModelSelectWithFocus,
              isModelLoading,
              allProviderModels,
              isAllModelsLoading,
-              onSelectProviderAndModel: setProviderAndModelFromUser,
+              onSelectProviderAndModel: handleProviderAndModelSelectWithFocus,
              thinkingOptions: availableThinkingOptions,
              selectedThinkingOptionId,
-              onSelectThinkingOption: setThinkingOptionFromUser,
+              onSelectThinkingOption: handleThinkingOptionSelectWithFocus,
              features: draftFeatures,
-              onSetFeature: setDraftFeatureValue,
+              onSetFeature: handleSetFeatureWithFocus,
+              onDropdownClose: () => focusInputRef.current?.(),
              disabled: isSubmitting,
            }}
          />
@@ -21,6 +21,7 @@ import type {
 import type {
  FileDownloadTokenResponse,
  GitSetupOptions,
+  ServerInfoStatusPayload,
  ProjectPlacementPayload,
  ServerCapabilities,
  WorkspaceDescriptorPayload,
@@ -190,6 +191,7 @@ export type DaemonServerInfo = {
  hostname: string | null;
  version: string | null;
  capabilities?: ServerCapabilities;
+  features?: ServerInfoStatusPayload["features"];
 };

 export interface AgentTimelineCursorState {
@@ -412,6 +414,13 @@ function areServerCapabilitiesEqual(
  return JSON.stringify(current ?? null) === JSON.stringify(next ?? null);
 }

+function areServerInfoFeaturesEqual(
+  current: ServerInfoStatusPayload["features"] | undefined,
+  next: ServerInfoStatusPayload["features"] | undefined,
+): boolean {
+  return JSON.stringify(current ?? null) === JSON.stringify(next ?? null);
+}
+
 export const useSessionStore = create<SessionStore>()(
  subscribeWithSelector((set, get) => {
    const commitActivityUpdates: AgentLastActivityCommitter = (updates) => {
@@ -527,12 +536,15 @@ export const useSessionStore = create<SessionStore>()(
          const prevVersion = session.serverInfo?.version?.trim() || null;
          const nextCapabilities = info.capabilities;
          const prevCapabilities = session.serverInfo?.capabilities;
+          const nextFeatures = info.features;
+          const prevFeatures = session.serverInfo?.features;

          if (
            session.serverInfo?.serverId === info.serverId &&
            prevHostname === nextHostname &&
            prevVersion === nextVersion &&
-            areServerCapabilitiesEqual(prevCapabilities, nextCapabilities)
+            areServerCapabilitiesEqual(prevCapabilities, nextCapabilities) &&
+            areServerInfoFeaturesEqual(prevFeatures, nextFeatures)
          ) {
            return prev;
          }
@@ -548,6 +560,7 @@ export const useSessionStore = create<SessionStore>()(
                  hostname: nextHostname,
                  version: nextVersion,
                  ...(nextCapabilities ? { capabilities: nextCapabilities } : {}),
+                  ...(nextFeatures ? { features: nextFeatures } : {}),
                },
              },
            },