feat(auth): add WorkOS and Keycloak SSO providers (rebased) (#220)

Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>

apps/web/src/app/(dashboard)/settings/page.tsx

@@ -3,6 +3,8 @@
 import { useCallback, useEffect, useState } from 'react';
 import { api } from '@/lib/api';
 import { authClient, useSession } from '@/lib/auth-client';
+import type { SsoProviderDiscovery } from '@/lib/sso';
+import { SsoProviderSection } from '@/components/settings/sso-provider-section';
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
@@ -424,7 +426,9 @@ function NotificationsTab(): React.ReactElement {
 
 function ProvidersTab(): React.ReactElement {
   const [providers, setProviders] = useState<ProviderInfo[]>([]);
+  const [ssoProviders, setSsoProviders] = useState<SsoProviderDiscovery[]>([]);
   const [loading, setLoading] = useState(true);
+  const [ssoLoading, setSsoLoading] = useState(true);
   const [testStatuses, setTestStatuses] = useState<Record<string, ProviderTestStatus>>({});
 
   useEffect(() => {
@@ -434,6 +438,13 @@ function ProvidersTab(): React.ReactElement {
       .finally(() => setLoading(false));
   }, []);
 
+  useEffect(() => {
+    api<SsoProviderDiscovery[]>('/api/sso/providers')
+      .catch(() => [] as SsoProviderDiscovery[])
+      .then((providers) => setSsoProviders(providers))
+      .finally(() => setSsoLoading(false));
+  }, []);
+
   const testConnection = useCallback(async (providerId: string): Promise<void> => {
     setTestStatuses((prev) => ({
       ...prev,
@@ -464,35 +475,44 @@ function ProvidersTab(): React.ReactElement {
     .find((m) => providers.find((p) => p.id === m.provider)?.available);
 
   return (
-    <section className="space-y-4">
-      <h2 className="text-lg font-medium text-text-secondary">LLM Providers</h2>
-      {loading ? (
-        <p className="text-sm text-text-muted">Loading providers...</p>
-      ) : providers.length === 0 ? (
-        <div className="rounded-lg border border-surface-border bg-surface-card p-4">
-          <p className="text-sm text-text-muted">
-            No providers configured. Set{' '}
-            <code className="rounded bg-surface-elevated px-1 py-0.5 text-xs">OLLAMA_BASE_URL</code>{' '}
-            or{' '}
-            <code className="rounded bg-surface-elevated px-1 py-0.5 text-xs">
-              MOSAIC_CUSTOM_PROVIDERS
-            </code>{' '}
-            to add providers.
-          </p>
-        </div>
-      ) : (
-        <div className="space-y-4">
-          {providers.map((provider) => (
-            <ProviderCard
-              key={provider.id}
-              provider={provider}
-              defaultModel={defaultModel}
-              testStatus={testStatuses[provider.id] ?? { state: 'idle' }}
-              onTest={() => void testConnection(provider.id)}
-            />
-          ))}
-        </div>
-      )}
+    <section className="space-y-6">
+      <div className="space-y-4">
+        <h2 className="text-lg font-medium text-text-secondary">SSO Providers</h2>
+        <SsoProviderSection providers={ssoProviders} loading={ssoLoading} />
+      </div>
+
+      <div className="space-y-4">
+        <h2 className="text-lg font-medium text-text-secondary">LLM Providers</h2>
+        {loading ? (
+          <p className="text-sm text-text-muted">Loading providers...</p>
+        ) : providers.length === 0 ? (
+          <div className="rounded-lg border border-surface-border bg-surface-card p-4">
+            <p className="text-sm text-text-muted">
+              No providers configured. Set{' '}
+              <code className="rounded bg-surface-elevated px-1 py-0.5 text-xs">
+                OLLAMA_BASE_URL
+              </code>{' '}
+              or{' '}
+              <code className="rounded bg-surface-elevated px-1 py-0.5 text-xs">
+                MOSAIC_CUSTOM_PROVIDERS
+              </code>{' '}
+              to add providers.
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {providers.map((provider) => (
+              <ProviderCard
+                key={provider.id}
+                provider={provider}
+                defaultModel={defaultModel}
+                testStatus={testStatuses[provider.id] ?? { state: 'idle' }}
+                onTest={() => void testConnection(provider.id)}
+              />
+            ))}
+          </div>
+        )}
+      </div>
     </section>
   );
 }