perf: streamline provider and agent startup loading #185

Avoids loading the full provider catalog on startup
Prewarms project config in the background
Prevents duplicate worktree-scoped config requests

packages/ui/src/components/sections/providers/ProvidersPage.test.ts

@@ -0,0 +1,9 @@
+import { describe, expect, test } from 'bun:test';
+import { shouldLoadAvailableProviders } from './providerAvailability';
+
+describe('ProvidersPage available provider loading', () => {
+  test('loads available providers only in add-provider mode', () => {
+    expect(shouldLoadAvailableProviders(false)).toBe(false);
+    expect(shouldLoadAvailableProviders(true)).toBe(true);
+  });
+});

packages/ui/src/components/sections/providers/ProvidersPage.tsx

@@ -23,6 +23,7 @@ import type { ModelMetadata } from '@/types';
 import { getCurrentIntlLocale, useI18n } from '@/lib/i18n';
 import { runtimeFetch } from '@/lib/runtime-fetch';
 import { opencodeClient } from '@/lib/opencode/client';
+import { shouldLoadAvailableProviders } from './providerAvailability';
 
 const formatCompactNumber = (value: number) => new Intl.NumberFormat(getCurrentIntlLocale(), {
   notation: 'compact',
@@ -169,6 +170,7 @@ export const ProvidersPage: React.FC = () => {
   const [providerDropdownOpen, setProviderDropdownOpen] = React.useState(false);
   const [providerSources, setProviderSources] = React.useState<Record<string, ProviderSources>>({});
   const [showAuthPanel, setShowAuthPanel] = React.useState(false);
+  const isAddMode = selectedProviderId === ADD_PROVIDER_ID;
 
   React.useEffect(() => {
     if (!selectedProviderId && providers.length > 0) {
@@ -177,6 +179,10 @@ export const ProvidersPage: React.FC = () => {
   }, [providers, selectedProviderId, setSelectedProvider]);
 
   React.useEffect(() => {
+    if (!isAddMode) {
+      return;
+    }
+
     let isMounted = true;
 
     const loadAuthMethods = async () => {
@@ -204,9 +210,13 @@ export const ProvidersPage: React.FC = () => {
     return () => {
       isMounted = false;
     };
-  }, [t]);
+  }, [isAddMode, t]);
 
   React.useEffect(() => {
+    if (!shouldLoadAvailableProviders(isAddMode)) {
+      return;
+    }
+
     let isMounted = true;
 
     const loadAvailableProviders = async () => {
@@ -235,7 +245,7 @@ export const ProvidersPage: React.FC = () => {
     return () => {
       isMounted = false;
     };
-  }, [t]);
+  }, [isAddMode, t]);
 
   const connectedProviderIds = React.useMemo(
     () => new Set(providers.map((provider) => provider.id)),
@@ -482,8 +492,6 @@ export const ProvidersPage: React.FC = () => {
     }
   };
 
-  const isAddMode = selectedProviderId === ADD_PROVIDER_ID;
-
   if (!isAddMode && providers.length === 0) {
     return (
       <div className="flex h-full items-center justify-center">

packages/ui/src/components/sections/providers/providerAvailability.ts

@@ -0,0 +1 @@
+export const shouldLoadAvailableProviders = (isAddMode: boolean): boolean => isAddMode;