diff --git a/.github/workflows/crocodile.yml b/.github/workflows/crocodile.yml
index b99f770..18f3000 100644
--- a/.github/workflows/crocodile.yml
+++ b/.github/workflows/crocodile.yml
@@ -31,7 +31,7 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ github.token }}
         with:
-          model: opencode/minimax-m2.5-free
+          model: opencode/deepseek-v4-flash-free
           use_github_token: true
           prompt: |
             Review this pull request:
diff --git a/.github/workflows/opencode.yml b/.github/workflows/opencode.yml
index 8148f5e..a39ed1c 100644
--- a/.github/workflows/opencode.yml
+++ b/.github/workflows/opencode.yml
@@ -30,4 +30,4 @@ jobs:
         env:
           OPENCODE_API_KEY: ${{ secrets.OPENCODE_API_KEY }}
         with:
-          model: opencode/minimax-m2.5-free
+          model: opencode/deepseek-v4-flash-free
diff --git a/src/components/DialogCustomProvider.tsx b/src/components/DialogCustomProvider.tsx
index a7e2da4..0c082c9 100644
--- a/src/components/DialogCustomProvider.tsx
+++ b/src/components/DialogCustomProvider.tsx
@@ -143,7 +143,6 @@ function validate(
   if (!baseUrl.trim()) return "Base URL is required";
   if (!baseUrl.startsWith("http://") && !baseUrl.startsWith("https://"))
     return "Base URL must start with http:// or https://";
-  if (models.length === 0) return "At least one model is required";
   for (const m of models) {
     if (!m.id.trim()) return "All model IDs must be filled in";
     if (!m.name.trim()) return "All model names must be filled in";
@@ -353,7 +352,7 @@ export function DialogCustomProvider({
         firstPlaceholder="model-id"
         secondPlaceholder="Display Name"
         firstClassName="font-mono"
-        minEntries={1}
+        minEntries={0}
         onAdd={addModel}
         onRemove={removeModel}
         onUpdate={(idx, field, value) => updateModel(idx, field === "first" ? "id" : "name", value)}
diff --git a/src/components/DialogSelectProvider.tsx b/src/components/DialogSelectProvider.tsx
index 56cf219..1889a59 100644
--- a/src/components/DialogSelectProvider.tsx
+++ b/src/components/DialogSelectProvider.tsx
@@ -49,8 +49,6 @@ export function DialogSelectProvider({
     const pop: Provider[] = [];
     const oth: Provider[] = [];
     for (const p of providers) {
-      // Skip already connected
-      if (connectedIds.has(p.id)) continue;
       // Filter by search
       if (
         lowerSearch &&
@@ -69,7 +67,7 @@ export function DialogSelectProvider({
     pop.sort((a, b) => (a.name || a.id).localeCompare(b.name || b.id));
     oth.sort((a, b) => (a.name || a.id).localeCompare(b.name || b.id));
     return { popular: pop, other: oth };
-  }, [providers, connectedIds, lowerSearch]);
+  }, [providers, lowerSearch]);
 
   return (
     <div className="space-y-3">
@@ -113,7 +111,12 @@ export function DialogSelectProvider({
               Popular
             </h4>
             {popular.map((p) => (
-              <ProviderRow key={p.id} provider={p} connected={false} onSelect={onSelect} />
+              <ProviderRow
+                key={p.id}
+                provider={p}
+                connected={connectedIds.has(p.id)}
+                onSelect={onSelect}
+              />
             ))}
           </section>
         )}
@@ -125,7 +128,12 @@ export function DialogSelectProvider({
               Other
             </h4>
             {other.map((p) => (
-              <ProviderRow key={p.id} provider={p} connected={false} onSelect={onSelect} />
+              <ProviderRow
+                key={p.id}
+                provider={p}
+                connected={connectedIds.has(p.id)}
+                onSelect={onSelect}
+              />
             ))}
           </section>
         )}
diff --git a/src/components/SettingsProviders.tsx b/src/components/SettingsProviders.tsx
index a3f0b13..6aec1e5 100644
--- a/src/components/SettingsProviders.tsx
+++ b/src/components/SettingsProviders.tsx
@@ -9,22 +9,22 @@
 
 import type { AgentBackendId } from "@/agents";
 import { AGENT_BACKEND_LABELS } from "@/agents";
-import { Loader2, Plus, Unplug } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
+import { Loader2, Plus, Search, Unplug } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { DialogConnectProvider } from "@/components/DialogConnectProvider";
 import { DialogCustomProvider } from "@/components/DialogCustomProvider";
 import { DialogSelectProvider } from "@/components/DialogSelectProvider";
 import { ProviderIcon } from "@/components/provider-icons/ProviderIcon";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 import { Spinner } from "@/components/ui/spinner";
-import {
-  useAgentBackend,
-  useAvailableBackendIds,
-  useCurrentAgentBackendId,
-} from "@/hooks/use-agent-backend";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
+import { useAgentBackend, useCurrentAgentBackendId } from "@/hooks/use-agent-backend";
 import { useActions, useConnectionState } from "@/hooks/use-agent-state";
+import { useOpenGuiClient } from "@/protocol/provider";
 import { POPULAR_PROVIDER_IDS } from "@/lib/constants";
+import { getErrorMessage } from "@/lib/utils";
 import type { AllProvidersData, ProviderAuthMethod } from "@/types/electron";
 
 // ---------------------------------------------------------------------------
@@ -57,7 +57,6 @@ export function SettingsProviders() {
   const { refreshProviders } = useActions();
   const { activeDirectory, activeWorkspaceId } = useConnectionState();
   const initialBackendId = useCurrentAgentBackendId();
-  const availableBackendIds = useAvailableBackendIds();
   const [backendId, setBackendId] = useState<AgentBackendId>(initialBackendId);
   const backend = useAgentBackend(backendId);
   const providersApi = backend?.platform?.providers;
@@ -68,34 +67,64 @@ export function SettingsProviders() {
   const [authMethods, setAuthMethods] = useState<Record<string, ProviderAuthMethod[]>>({});
   const [loading, setLoading] = useState(true);
   const [disconnecting, setDisconnecting] = useState<string | null>(null);
+  const [confirmingDisconnect, setConfirmingDisconnect] = useState<string | null>(null);
+  const [disconnectError, setDisconnectError] = useState<{
+    providerID: string;
+    message: string;
+  } | null>(null);
 
   // Sub-dialog state
   const [connectProviderID, setConnectProviderID] = useState<string | null>(null);
   const [showCustom, setShowCustom] = useState(false);
   const [showSelectAll, setShowSelectAll] = useState(false);
 
+  // Search
+  const [search, setSearch] = useState("");
+  const lowerSearch = search.toLowerCase().trim();
+  const isSearching = lowerSearch.length > 0;
+
+  // Filter backends that support provider management
+  const openGuiClient = useOpenGuiClient();
+  const providerBackendIds = useMemo(
+    () =>
+      openGuiClient.agentBackends
+        .list()
+        .filter((b) => b.capabilities?.providerAuth)
+        .map((b) => b.id as AgentBackendId),
+    [openGuiClient],
+  );
+
   // Wait for auth methods to be loaded for this provider
   const isAuthLoading =
     loading || (!connectProviderID ? false : authMethods[connectProviderID] === undefined);
 
-  const refresh = useCallback(async () => {
-    if (!providersApi) return;
-    const target = { directory: scopedDirectory, workspaceId: activeWorkspaceId };
-    const [allProvidersData, providerAuthMethods] = await Promise.all([
-      providersApi.listAll(target),
-      providersApi.getAuthMethods(target),
-    ]);
-    setAllProviders(allProvidersData);
-    setAuthMethods(providerAuthMethods);
-    setLoading(false);
-  }, [providersApi, scopedDirectory, activeWorkspaceId]);
+  const refresh = useCallback(
+    async (showSpinner = false) => {
+      if (!providersApi) return;
+      if (showSpinner) setLoading(true);
+      try {
+        const target = { directory: scopedDirectory, workspaceId: activeWorkspaceId };
+        const [allProvidersData, providerAuthMethods] = await Promise.all([
+          providersApi.listAll(target),
+          providersApi.getAuthMethods(target),
+        ]);
+        setAllProviders(allProvidersData);
+        setAuthMethods(providerAuthMethods);
+      } finally {
+        if (showSpinner) setLoading(false);
+      }
+    },
+    [providersApi, scopedDirectory, activeWorkspaceId],
+  );
 
   useEffect(() => {
-    void refresh();
+    void refresh(true);
   }, [refresh]);
 
   const handleDisconnect = async (providerID: string) => {
     if (!providersApi) return;
+    setConfirmingDisconnect(null);
+    setDisconnectError(null);
     setDisconnecting(providerID);
     try {
       const target = { directory: scopedDirectory, workspaceId: activeWorkspaceId };
@@ -103,6 +132,11 @@ export function SettingsProviders() {
       await providersApi.dispose(target);
       await refresh();
       await refreshProviders();
+    } catch (err) {
+      setDisconnectError({
+        providerID,
+        message: getErrorMessage(err, "Failed to disconnect"),
+      });
     } finally {
       setDisconnecting(null);
     }
@@ -125,7 +159,7 @@ export function SettingsProviders() {
     );
   }
 
-  if (loading) {
+  if (loading && !allProviders) {
     return (
       <div className="flex items-center justify-center py-8">
         <Spinner className="size-5" />
@@ -144,169 +178,361 @@ export function SettingsProviders() {
   const providerList = Array.isArray(allProviders.all) ? allProviders.all : [];
   const connectedIds = Array.isArray(allProviders.connected) ? allProviders.connected : [];
   const connectedSet = new Set(connectedIds);
-  const connectedProviders = providerList.filter((p) => connectedSet.has(p.id));
+  const connectedProviders = providerList
+    .filter((p) => connectedSet.has(p.id))
+    .sort((a, b) => (a.name || a.id).localeCompare(b.name || b.id));
   const popularNotConnected = POPULAR_PROVIDER_IDS.filter((id) => !connectedSet.has(id));
-  // For popular providers that aren't in the `all` list (not yet fetched from server),
-  // create a minimal entry
   const allById = new Map(providerList.map((p) => [p.id, p]));
 
-  // If a connect dialog is open, show it instead
-  if (connectProviderID) {
-    const provider = allById.get(connectProviderID);
-    return (
-      <DialogConnectProvider
-        directory={scopedDirectory}
-        backendId={backendId}
-        providerID={connectProviderID}
-        providerName={provider?.name ?? connectProviderID}
-        authMethods={authMethods[connectProviderID] ?? []}
-        loading={isAuthLoading}
-        onConnected={handleConnected}
-        onBack={() => setConnectProviderID(null)}
-      />
-    );
-  }
-
-  if (showCustom) {
-    return (
-      <DialogCustomProvider
-        directory={scopedDirectory}
-        backendId={backendId}
-        onSaved={handleConnected}
-        onBack={() => setShowCustom(false)}
-      />
-    );
-  }
-
-  if (showSelectAll) {
-    return (
-      <DialogSelectProvider
-        providers={providerList}
-        connectedIds={connectedSet}
-        onSelect={(id: string) => {
-          setShowSelectAll(false);
-          setConnectProviderID(id);
-        }}
-        onCustom={() => {
-          setShowSelectAll(false);
-          setShowCustom(true);
-        }}
-        onBack={() => setShowSelectAll(false)}
-      />
-    );
-  }
+  const connectProvider = connectProviderID ? allById.get(connectProviderID) : null;
+  const filteredProviders = providerList
+    .filter(
+      (p) =>
+        p.id.toLowerCase().includes(lowerSearch) ||
+        (p.name || "").toLowerCase().includes(lowerSearch),
+    )
+    .sort((a, b) => (a.name || a.id).localeCompare(b.name || b.id));
 
   return (
-    <div className="space-y-5 max-h-[50vh] overflow-y-auto pr-1">
-      {availableBackendIds.length > 1 && (
-        <div className="flex flex-wrap gap-1">
-          {availableBackendIds.map((id) => (
-            <Button
-              key={id}
-              type="button"
-              variant={backendId === id ? "default" : "outline"}
-              size="sm"
-              className="h-7 px-2 text-[11px]"
-              onClick={() => setBackendId(id)}
-            >
-              {AGENT_BACKEND_LABELS[id]}
-            </Button>
-          ))}
-        </div>
-      )}
-      {/* Connected providers */}
-      {connectedProviders.length > 0 && (
-        <section className="space-y-2">
-          <h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
-            Connected
-          </h4>
-          {connectedProviders.map((provider) => {
-            const isEnv = provider.source === "env";
-            const isDisconnecting = disconnecting === provider.id;
-            return (
-              <div
-                key={provider.id}
-                className="flex items-center gap-3 rounded-lg border p-3 bg-card"
+    <>
+      <div className="space-y-5 max-h-[50vh] overflow-y-auto pr-1">
+        {providerBackendIds.length > 1 && (
+          <div className="flex flex-wrap gap-1">
+            {providerBackendIds.map((id) => (
+              <Button
+                key={id}
+                type="button"
+                variant={backendId === id ? "default" : "outline"}
+                size="sm"
+                className="h-7 px-2 text-[11px]"
+                onClick={() => setBackendId(id)}
               >
-                <ProviderIcon provider={provider.id} className="size-5 shrink-0" />
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-2">
-                    <span className="text-sm font-medium truncate">
+                {AGENT_BACKEND_LABELS[id]}
+              </Button>
+            ))}
+          </div>
+        )}
+        {/* Search */}
+        <div className="relative">
+          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground" />
+          <Input
+            type="text"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search providers..."
+            className="pl-8 text-sm"
+          />
+        </div>
+        {isSearching ? (
+          <div className="space-y-1.5">
+            {filteredProviders.map((provider) => {
+              const isConnected = connectedSet.has(provider.id);
+              const isEnv = provider.source === "env";
+              const isDisconnecting = disconnecting === provider.id;
+              const isConfirming = confirmingDisconnect === provider.id;
+              const showError = disconnectError?.providerID === provider.id && !isDisconnecting;
+              return (
+                <div key={provider.id}>
+                  <div className="flex items-center gap-3 rounded-lg border p-3 bg-card">
+                    <ProviderIcon provider={provider.id} className="size-5 shrink-0" />
+                    <span className="text-sm font-medium truncate flex-1">
                       {provider.name || provider.id}
                     </span>
-                    <SourceBadge source={provider.source} />
-                  </div>
-                </div>
-                {isEnv ? (
-                  <span
-                    className="text-[11px] text-muted-foreground shrink-0"
-                    title="Connected from your environment variables"
-                  >
-                    from env
-                  </span>
-                ) : (
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className="text-destructive shrink-0"
-                    disabled={isDisconnecting}
-                    onClick={() => handleDisconnect(provider.id)}
-                  >
-                    {isDisconnecting ? (
-                      <Loader2 className="size-3.5 animate-spin" />
+                    {isConnected ? (
+                      isEnv ? (
+                        <span className="text-[11px] text-muted-foreground shrink-0">from env</span>
+                      ) : isConfirming ? (
+                        <div className="flex items-center gap-1.5 shrink-0">
+                          <span className="text-xs text-muted-foreground mr-1">
+                            Disconnect {provider.name || provider.id}?
+                          </span>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-7 px-2 text-xs"
+                            onClick={() => setConfirmingDisconnect(null)}
+                          >
+                            Cancel
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-7 px-2 text-xs text-destructive"
+                            disabled={isDisconnecting}
+                            onClick={() => handleDisconnect(provider.id)}
+                          >
+                            {isDisconnecting ? (
+                              <Loader2 className="size-3.5 animate-spin" />
+                            ) : (
+                              <Unplug className="size-3.5" />
+                            )}
+                            <span className="ml-1">Disconnect</span>
+                          </Button>
+                        </div>
+                      ) : (
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="text-destructive shrink-0"
+                          disabled={isDisconnecting}
+                          onClick={() => setConfirmingDisconnect(provider.id)}
+                        >
+                          {isDisconnecting ? (
+                            <Loader2 className="size-3.5 animate-spin" />
+                          ) : (
+                            <Unplug className="size-3.5" />
+                          )}
+                          <span className="ml-1.5">Disconnect</span>
+                        </Button>
+                      )
                     ) : (
-                      <Unplug className="size-3.5" />
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setConnectProviderID(provider.id)}
+                      >
+                        <Plus className="size-3.5 mr-1" />
+                        Connect
+                      </Button>
                     )}
-                    <span className="ml-1.5">Disconnect</span>
-                  </Button>
-                )}
+                  </div>
+                  {showError && (
+                    <div className="flex items-center gap-2 mt-1 px-1">
+                      <p className="text-xs text-destructive flex-1">{disconnectError?.message}</p>
+                      <button
+                        type="button"
+                        className="text-xs text-muted-foreground hover:text-foreground"
+                        onClick={() => setDisconnectError(null)}
+                      >
+                        dismiss
+                      </button>
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+            {filteredProviders.length === 0 && (
+              <div className="text-center py-6 text-sm text-muted-foreground">
+                No providers found for &quot;{search}&quot;
               </div>
-            );
-          })}
-        </section>
-      )}
+            )}
+          </div>
+        ) : (
+          <>
+            {connectedProviders.length > 0 && (
+              <section className="space-y-2">
+                <h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                  Connected
+                </h4>
+                {connectedProviders.map((provider) => {
+                  const isEnv = provider.source === "env";
+                  const isDisconnecting = disconnecting === provider.id;
+                  const isConfirming = confirmingDisconnect === provider.id;
+                  const showError = disconnectError?.providerID === provider.id && !isDisconnecting;
+                  return (
+                    <div key={provider.id}>
+                      <div className="flex items-center gap-3 rounded-lg border p-3 bg-card">
+                        <ProviderIcon provider={provider.id} className="size-5 shrink-0" />
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center gap-2">
+                            <span className="text-sm font-medium truncate">
+                              {provider.name || provider.id}
+                            </span>
+                            <SourceBadge source={provider.source} />
+                          </div>
+                        </div>
+                        {isEnv ? (
+                          <span
+                            className="text-[11px] text-muted-foreground shrink-0"
+                            title="Connected from your environment variables"
+                          >
+                            from env
+                          </span>
+                        ) : isConfirming ? (
+                          <div className="flex items-center gap-1.5 shrink-0">
+                            <span className="text-xs text-muted-foreground mr-1">
+                              Disconnect {provider.name || provider.id}?
+                            </span>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="h-7 px-2 text-xs"
+                              onClick={() => setConfirmingDisconnect(null)}
+                            >
+                              Cancel
+                            </Button>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="h-7 px-2 text-xs text-destructive"
+                              disabled={isDisconnecting}
+                              onClick={() => handleDisconnect(provider.id)}
+                            >
+                              {isDisconnecting ? (
+                                <Loader2 className="size-3.5 animate-spin" />
+                              ) : (
+                                <Unplug className="size-3.5" />
+                              )}
+                              <span className="ml-1">Disconnect</span>
+                            </Button>
+                          </div>
+                        ) : (
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="text-destructive shrink-0"
+                            disabled={isDisconnecting}
+                            onClick={() => setConfirmingDisconnect(provider.id)}
+                          >
+                            {isDisconnecting ? (
+                              <Loader2 className="size-3.5 animate-spin" />
+                            ) : (
+                              <Unplug className="size-3.5" />
+                            )}
+                            <span className="ml-1.5">Disconnect</span>
+                          </Button>
+                        )}
+                      </div>
+                      {showError && (
+                        <div className="flex items-center gap-2 mt-1 px-1">
+                          <p className="text-xs text-destructive flex-1">
+                            {disconnectError?.message}
+                          </p>
+                          <button
+                            type="button"
+                            className="text-xs text-muted-foreground hover:text-foreground"
+                            onClick={() => setDisconnectError(null)}
+                          >
+                            dismiss
+                          </button>
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
+              </section>
+            )}
+
+            {/* Popular providers (not yet connected) */}
+            {popularNotConnected.length > 0 && (
+              <section className="space-y-2">
+                <h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                  Popular
+                </h4>
+                {popularNotConnected.map((id) => {
+                  const provider = allById.get(id);
+                  return (
+                    <div key={id} className="flex items-center gap-3 rounded-lg border p-3 bg-card">
+                      <ProviderIcon provider={id} className="size-5 shrink-0" />
+                      <span className="text-sm font-medium truncate flex-1">
+                        {provider?.name || id}
+                      </span>
+                      <Button variant="outline" size="sm" onClick={() => setConnectProviderID(id)}>
+                        <Plus className="size-3.5 mr-1" />
+                        Connect
+                      </Button>
+                    </div>
+                  );
+                })}
+              </section>
+            )}
 
-      {/* Popular providers (not yet connected) */}
-      {popularNotConnected.length > 0 && (
-        <section className="space-y-2">
-          <h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
-            Popular
-          </h4>
-          {popularNotConnected.map((id) => {
-            const provider = allById.get(id);
-            return (
-              <div key={id} className="flex items-center gap-3 rounded-lg border p-3 bg-card">
-                <ProviderIcon provider={id} className="size-5 shrink-0" />
-                <span className="text-sm font-medium truncate flex-1">{provider?.name || id}</span>
-                <Button variant="outline" size="sm" onClick={() => setConnectProviderID(id)}>
+            {/* Custom + View all */}
+            <section className="space-y-2">
+              <h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                Other
+              </h4>
+              <div
+                className="flex items-center gap-3 rounded-lg border p-3 bg-card cursor-pointer hover:bg-accent transition-colors"
+                onClick={() => setShowCustom(true)}
+              >
+                <ProviderIcon provider="synthetic" className="size-5 shrink-0" />
+                <span className="text-sm font-medium truncate flex-1">Custom provider</span>
+                <Button variant="outline" size="sm">
                   <Plus className="size-3.5 mr-1" />
                   Connect
                 </Button>
               </div>
-            );
-          })}
-        </section>
-      )}
+              <div
+                className="flex items-center gap-3 rounded-lg border p-3 bg-card cursor-pointer hover:bg-accent transition-colors"
+                onClick={() => setShowSelectAll(true)}
+              >
+                <ProviderIcon provider="synthetic" className="size-5 shrink-0" />
+                <span className="text-sm font-medium truncate flex-1">All providers</span>
+              </div>
+            </section>
+          </>
+        )}
+      </div>
 
-      {/* Custom + View all */}
-      <section className="space-y-2">
-        <h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Other</h4>
-        <div className="flex items-center gap-3 rounded-lg border p-3 bg-card">
-          <ProviderIcon provider="synthetic" className="size-5 shrink-0" />
-          <span className="text-sm font-medium truncate flex-1">Custom provider</span>
-          <Button variant="outline" size="sm" onClick={() => setShowCustom(true)}>
-            <Plus className="size-3.5 mr-1" />
-            Connect
-          </Button>
-        </div>
-        <button
-          type="button"
-          className="text-xs text-muted-foreground hover:text-foreground transition-colors underline underline-offset-2"
-          onClick={() => setShowSelectAll(true)}
-        >
-          View all providers
-        </button>
-      </section>
-    </div>
+      {/* Connect dialog */}
+      <Dialog
+        open={!!connectProviderID}
+        onOpenChange={(open) => {
+          if (!open) setConnectProviderID(null);
+        }}
+      >
+        <DialogContent>
+          <DialogTitle className="sr-only">
+            Connect {connectProvider?.name ?? connectProviderID ?? ""}
+          </DialogTitle>
+          {connectProviderID && (
+            <DialogConnectProvider
+              directory={scopedDirectory}
+              backendId={backendId}
+              providerID={connectProviderID}
+              providerName={connectProvider?.name ?? connectProviderID}
+              authMethods={authMethods[connectProviderID] ?? []}
+              loading={isAuthLoading}
+              onConnected={handleConnected}
+              onBack={() => setConnectProviderID(null)}
+            />
+          )}
+        </DialogContent>
+      </Dialog>
+
+      {/* Custom provider dialog */}
+      <Dialog
+        open={showCustom}
+        onOpenChange={(open) => {
+          if (!open) setShowCustom(false);
+        }}
+      >
+        <DialogContent>
+          <DialogTitle className="sr-only">Custom provider</DialogTitle>
+          <DialogCustomProvider
+            directory={scopedDirectory}
+            backendId={backendId}
+            onSaved={handleConnected}
+            onBack={() => setShowCustom(false)}
+          />
+        </DialogContent>
+      </Dialog>
+
+      {/* Select all providers dialog */}
+      <Dialog
+        open={showSelectAll}
+        onOpenChange={(open) => {
+          if (!open) setShowSelectAll(false);
+        }}
+      >
+        <DialogContent>
+          <DialogTitle className="sr-only">All providers</DialogTitle>
+          <DialogSelectProvider
+            providers={providerList}
+            connectedIds={connectedSet}
+            onSelect={(id: string) => {
+              setShowSelectAll(false);
+              setConnectProviderID(id);
+            }}
+            onCustom={() => {
+              setShowSelectAll(false);
+              setShowCustom(true);
+            }}
+            onBack={() => setShowSelectAll(false)}
+          />
+        </DialogContent>
+      </Dialog>
+    </>
   );
 }