import { useState, useEffect, useRef, useCallback } from "react"; import { useTranslation } from "react-i18next"; import { cn } from "@/shared/lib/cn"; import { Button } from "@/shared/ui/button"; import { Spinner } from "@/shared/ui/spinner"; import { getProviderIcon } from "@/shared/ui/icons/ProviderIcons"; import { IconCheck, IconAlertTriangle, IconPlus } from "@tabler/icons-react"; import { checkAgentInstalled, checkAgentAuth, installAgent, authenticateAgent, onAgentSetupOutput, } from "@/features/providers/api/agentSetup"; import type { ProviderDisplayInfo } from "@/shared/types/providers"; type SetupPhase = "idle" | "checking" | "installing" | "authenticating"; type InstallStatus = "checking" | "installed" | "missing"; type AuthStatus = "checking" | "authenticated" | "unauthenticated" | "unknown"; interface OutputLine { id: number; text: string; } const MAX_OUTPUT_LINES = 50; const CHECKING_INDICATOR_DELAY_MS = 2000; interface AgentProviderCardProps { provider: ProviderDisplayInfo; } export function AgentProviderCard({ provider }: AgentProviderCardProps) { const { t } = useTranslation(["settings", "common"]); const isBuiltIn = provider.status === "built_in"; const hasInstallCommand = !!provider.installCommand; const hasAuthCommand = !!provider.authCommand; const hasBinary = !!provider.binaryName; const [setupPhase, setSetupPhase] = useState("idle"); const [setupOutput, setSetupOutput] = useState([]); const [setupError, setSetupError] = useState(null); const [showCheckingIndicator, setShowCheckingIndicator] = useState(false); const [installStatus, setInstallStatus] = useState( hasBinary && !isBuiltIn ? "checking" : "installed", ); const [authStatus, setAuthStatus] = useState( provider.authStatusCommand && hasBinary && !isBuiltIn ? "checking" : "unknown", ); const outputRef = useRef(null); const outputLengthRef = useRef(0); const lineCounterRef = useRef(0); const isMountedRef = useRef(true); const unlistenRef = useRef<(() => void) | null>(null); const icon = getProviderIcon(provider.id, "size-6"); const isActive = setupPhase !== "idle"; const authStorageKey = `agent-provider-auth:${provider.id}`; const setAuthHint = useCallback( (value: boolean) => { if (value) { localStorage.setItem(authStorageKey, "true"); } else { localStorage.removeItem(authStorageKey); } }, [authStorageKey], ); const getAuthHint = useCallback(() => { return localStorage.getItem(authStorageKey) === "true"; }, [authStorageKey]); const clearListener = useCallback(() => { unlistenRef.current?.(); unlistenRef.current = null; }, []); useEffect(() => { isMountedRef.current = true; return () => { isMountedRef.current = false; clearListener(); }; }, [clearListener]); useEffect(() => { if (!hasBinary || isBuiltIn || !provider.binaryName) return; checkAgentInstalled(provider.id) .then((installed) => { if (!isMountedRef.current) return; setInstallStatus(installed ? "installed" : "missing"); if (installed && provider.authStatusCommand) { return checkAgentAuth(provider.id).then((authenticated) => { if (!isMountedRef.current) return; setAuthStatus(authenticated ? "authenticated" : "unauthenticated"); }); } if (installed && !provider.authStatusCommand) { setAuthStatus(getAuthHint() ? "authenticated" : "unknown"); } if (!installed) { setAuthStatus("unknown"); setAuthHint(false); } }) .catch(() => { if (!isMountedRef.current) return; setInstallStatus("missing"); setAuthStatus("unknown"); }); }, [ getAuthHint, hasBinary, isBuiltIn, provider.id, provider.binaryName, provider.authStatusCommand, setAuthHint, ]); useEffect(() => { if (outputRef.current && outputLengthRef.current !== setupOutput.length) { outputLengthRef.current = setupOutput.length; outputRef.current.scrollTop = outputRef.current.scrollHeight; } }); const appendOutput = useCallback((line: string) => { lineCounterRef.current += 1; const entry: OutputLine = { id: lineCounterRef.current, text: line }; setSetupOutput((prev) => { const next = [...prev, entry]; return next.length > MAX_OUTPUT_LINES ? next.slice(-MAX_OUTPUT_LINES) : next; }); }, []); async function handleConnect() { setSetupError(null); setSetupOutput([]); lineCounterRef.current = 0; if (hasInstallCommand && installStatus === "missing") { await runInstall(); } else if (hasAuthCommand) { await runAuth(); } } async function runInstall() { if (!provider.installCommand) return; setSetupPhase("installing"); clearListener(); const unlisten = await onAgentSetupOutput(provider.id, appendOutput); if (!isMountedRef.current) { unlisten(); return; } unlistenRef.current = unlisten; try { await installAgent(provider.id); clearListener(); if (!isMountedRef.current) return; if (hasBinary && provider.binaryName) { setSetupPhase("checking"); const installed = await checkAgentInstalled(provider.id); if (!isMountedRef.current) return; setInstallStatus(installed ? "installed" : "missing"); if (!installed) { setAuthStatus("unknown"); setAuthHint(false); setSetupError(t("providers.agents.errors.installVerificationFailed")); setSetupPhase("idle"); return; } } if (hasAuthCommand) { await runAuth(); } else { if (!isMountedRef.current) return; setSetupPhase("idle"); } } catch (err) { clearListener(); if (!isMountedRef.current) return; setSetupError(err instanceof Error ? err.message : String(err)); setSetupPhase("idle"); } } async function runAuth() { if (!provider.authCommand) return; setSetupPhase("authenticating"); setSetupOutput([]); clearListener(); const unlisten = await onAgentSetupOutput(provider.id, appendOutput); if (!isMountedRef.current) { unlisten(); return; } unlistenRef.current = unlisten; try { await authenticateAgent(provider.id); clearListener(); if (!isMountedRef.current) return; setAuthHint(true); setAuthStatus("authenticated"); setSetupPhase("idle"); } catch (err) { clearListener(); if (!isMountedRef.current) return; setSetupError(err instanceof Error ? err.message : String(err)); setSetupPhase("idle"); } } function handleRetry() { setSetupError(null); void handleConnect(); } const isReady = isBuiltIn || (installStatus === "installed" && !hasAuthCommand) || (installStatus === "installed" && authStatus === "authenticated"); const needsAuth = installStatus === "installed" && hasAuthCommand && authStatus !== "checking" && authStatus !== "authenticated"; const needsInstall = installStatus === "missing" && hasInstallCommand; const isChecking = (installStatus === "checking" && hasBinary) || (installStatus === "installed" && authStatus === "checking"); useEffect(() => { if (!isChecking) { setShowCheckingIndicator(false); return; } setShowCheckingIndicator(false); const timeoutId = window.setTimeout(() => { if (isMountedRef.current) { setShowCheckingIndicator(true); } }, CHECKING_INDICATOR_DELAY_MS); return () => window.clearTimeout(timeoutId); }, [isChecking]); if (provider.showOnlyWhenInstalled && installStatus !== "installed") return null; function renderStatusIndicator() { if (isBuiltIn || isReady) { return (

); } if (setupError) { return (

); } if ((isChecking && showCheckingIndicator) || isActive) { return (

); } if (needsAuth && !isActive) { return ( ); } if (needsInstall && !isActive) { return ( ); } return null; } function renderStatusText() { if (isBuiltIn || isReady) return null; if (setupError) return t("providers.agents.status.setupFailed"); return null; } function renderAction() { if (isBuiltIn || isReady) return null; if (isActive) return null; if (setupError) { return ( ); } return null; } function renderSetupOutput(scrollToEnd = false) { if (setupOutput.length === 0) return null; return (

{setupOutput.map((entry) => (

{entry.text || "\u00A0"}

))}

); } function renderSetupProgress() { if (!isActive) return null; const phaseLabel = setupPhase === "installing" ? t("providers.agents.progress.installing", { name: provider.displayName, }) : setupPhase === "authenticating" ? t("providers.waitingForSignIn") : t("providers.agents.progress.verifyingInstallation"); const stepInfo = setupPhase === "installing" && hasAuthCommand ? t("providers.agents.progress.step", { step: 1, total: 2 }) : setupPhase === "authenticating" && hasInstallCommand ? t("providers.agents.progress.step", { step: 2, total: 2 }) : null; return (

{phaseLabel} {stepInfo && ( {stepInfo} )}

{renderSetupOutput(true)}

); } const statusText = renderStatusText(); const action = renderAction(); return (

{icon}

{provider.displayName}

{provider.description}

{renderStatusIndicator()}

{(statusText || action) && (

{statusText && ( <> {statusText} )}

{action}

)} {renderSetupProgress()} {setupError && !isActive && (

{setupError}

{renderSetupOutput()}

)}

); }