import { useQuery } from "@tanstack/react-query"; import { agentsApi } from "../api/agents"; import { queryKeys } from "../lib/queryKeys"; import type { Agent, AgentLifecycleState } from "@paperclipai/shared"; import { Loader2 } from "lucide-react"; import { Badge } from "./ui/badge"; import { Button } from "./ui/button"; const phases = { preparing: ["Preparing agent", "Required resources are being prepared. Work stays queued."], verifying: ["Verifying agent", "The saved execution configuration is being checked. Work stays queued."], pausing: ["Pausing agent", "Waiting for execution and required resources to stop."], resuming: ["Resuming agent", "Required resources are being started. Work stays queued."], terminating: ["Terminating agent", "Stopping execution before resource cleanup."], cleaning_up: ["Cleaning up agent", "Required resources are being removed. Termination is not complete."], } satisfies Partial>; const failedPhases = { preparing: "Agent preparation failed", verifying: "Agent verification failed", pausing: "Agent pause failed", resuming: "Agent resume failed", terminating: "Agent termination failed", cleaning_up: "Agent cleanup failed", }; function pendingPhase(state?: AgentLifecycleState) { return state && state in phases ? phases[state as keyof typeof phases] : undefined; } export function agentLifecycleRefetchInterval(state?: AgentLifecycleState) { return pendingPhase(state) ? 2_000 : 30_000; } /** Poll lifecycle fields without refreshing the record used by editable forms. */ export function useAgentLifecycleStatus(agent?: Agent) { return useQuery({ queryKey: [...queryKeys.agents.detail(agent?.id ?? ""), "lifecycle", agent?.companyId], queryFn: () => agentsApi.get(agent!.id, agent!.companyId), enabled: Boolean(agent), select: current => ({ status: current.status, lifecycleState: current.lifecycleState, lifecycleVersion: current.lifecycleVersion, lifecycleError: current.lifecycleError }), refetchInterval: query => agentLifecycleRefetchInterval(query.state.data?.lifecycleState ?? agent?.lifecycleState), }); } export function AgentLifecycleStatus({ agent, onRetry, retryPending, refreshError = false }: { agent: Pick; onRetry: () => void; retryPending: boolean; refreshError?: boolean; }) { const phase = pendingPhase(agent.lifecycleState); if (!phase && !refreshError) return null; return
{refreshError &&

Could not refresh agent lifecycle status.

} {phase &&
{!agent.lifecycleError && {!agent.lifecycleError && {phase[1]}}
} {phase && agent.lifecycleError &&
{agent.lifecycleError}
} {phase && agent.lifecycleError &&

Paperclip retries automatically; Retry now checks again immediately.

}
; }