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],
+  },
+}));