Extract frontend orchestration hooks

frontend/src/hooks/useProviderCapabilities.ts

@@ -0,0 +1,31 @@
+import { useMemo, useState } from 'react'
+import { externalApi } from '../services/api'
+import type { ProviderCapability } from '../types'
+
+export function useProviderCapabilities() {
+  const [providerCapabilities, setProviderCapabilities] = useState<ProviderCapability[]>([])
+  const [loadingCapabilities, setLoadingCapabilities] = useState(false)
+  const [capabilitiesError, setCapabilitiesError] = useState<string | null>(null)
+
+  const providers = useMemo(() => providerCapabilities, [providerCapabilities])
+
+  const loadCapabilities = async () => {
+    setLoadingCapabilities(true)
+    setCapabilitiesError(null)
+    try {
+      const providerResponse = await externalApi.listProviders()
+      setProviderCapabilities(providerResponse.providers)
+    } catch (error) {
+      setCapabilitiesError(error instanceof Error ? error.message : 'Failed to load external capabilities')
+    } finally {
+      setLoadingCapabilities(false)
+    }
+  }
+
+  return {
+    providers,
+    loadingCapabilities,
+    capabilitiesError,
+    loadCapabilities,
+  }
+}