import { useState, useCallback } from "react";
import type { ContractWithRelations } from "../../lib/api";
import {
getSupervisorStatus,
startSupervisor,
stopSupervisor,
resumeSupervisor,
type SupervisorStatus,
} from "../../lib/api";
interface AutopilotPanelProps {
contract: ContractWithRelations;
onUpdate: () => void;
}
const statusConfig: Record<
SupervisorStatus["status"],
{ label: string; color: string; bgColor: string }
> = {
not_configured: {
label: "Not Configured",
color: "text-[#555]",
bgColor: "bg-[#555]/10",
},
pending: {
label: "Ready",
color: "text-yellow-400",
bgColor: "bg-yellow-400/10",
},
starting: {
label: "Starting...",
color: "text-blue-400",
bgColor: "bg-blue-400/10",
},
running: {
label: "Running",
color: "text-green-400",
bgColor: "bg-green-400/10",
},
paused: {
label: "Paused",
color: "text-orange-400",
bgColor: "bg-orange-400/10",
},
done: {
label: "Completed",
color: "text-blue-400",
bgColor: "bg-blue-400/10",
},
failed: {
label: "Failed",
color: "text-red-400",
bgColor: "bg-red-400/10",
},
};
export function AutopilotPanel({ contract, onUpdate }: AutopilotPanelProps) {
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const supervisorStatus = getSupervisorStatus(contract);
const config = statusConfig[supervisorStatus.status];
const handleStart = useCallback(async () => {
if (!supervisorStatus.supervisorTaskId) return;
setLoading(true);
setError(null);
try {
await startSupervisor(supervisorStatus.supervisorTaskId);
onUpdate();
} catch (e) {
setError(e instanceof Error ? e.message : "Failed to start autopilot");
} finally {
setLoading(false);
}
}, [supervisorStatus.supervisorTaskId, onUpdate]);
const handleStop = useCallback(async () => {
if (!supervisorStatus.supervisorTaskId) return;
setLoading(true);
setError(null);
try {
await stopSupervisor(supervisorStatus.supervisorTaskId);
onUpdate();
} catch (e) {
setError(e instanceof Error ? e.message : "Failed to stop autopilot");
} finally {
setLoading(false);
}
}, [supervisorStatus.supervisorTaskId, onUpdate]);
const handleResume = useCallback(async () => {
setLoading(true);
setError(null);
try {
await resumeSupervisor(contract.id, { resumeMode: "continue" });
// After resuming, we need to start the task
if (supervisorStatus.supervisorTaskId) {
await startSupervisor(supervisorStatus.supervisorTaskId);
}
onUpdate();
} catch (e) {
setError(e instanceof Error ? e.message : "Failed to resume autopilot");
} finally {
setLoading(false);
}
}, [contract.id, supervisorStatus.supervisorTaskId, onUpdate]);
// Don't show panel for task-type contracts (they don't have supervisors)
if (contract.contractType === "task") {
return null;
}
return (
<div className="space-y-3">
<div className="flex items-center justify-between">
<h3 className="font-mono text-xs text-[#75aafc] uppercase">
Autopilot Mode
</h3>
<div
className={`px-2 py-1 rounded font-mono text-xs ${config.color} ${config.bgColor}`}
>
{config.label}
</div>
</div>
<p className="font-mono text-xs text-[#555]">
{supervisorStatus.status === "not_configured" ? (
"This contract does not have an autopilot supervisor configured."
) : supervisorStatus.status === "running" ? (
"Autopilot is actively working on this contract, spawning tasks and managing progress."
) : supervisorStatus.status === "pending" ? (
"Autopilot is ready to start. Click 'Enable' to begin autonomous work."
) : supervisorStatus.status === "paused" ? (
"Autopilot is paused. Click 'Resume' to continue work."
) : supervisorStatus.status === "failed" ? (
"Autopilot encountered an error. You can resume to retry."
) : supervisorStatus.status === "done" ? (
"Autopilot has completed its work on this contract."
) : (
"Autopilot is initializing..."
)}
</p>
{error && (
<div className="px-3 py-2 bg-red-500/10 border border-red-400/30 font-mono text-xs text-red-400">
{error}
</div>
)}
<div className="flex gap-2">
{supervisorStatus.canStart && (
<button
onClick={handleStart}
disabled={loading}
className="px-4 py-2 font-mono text-xs text-[#dbe7ff] bg-green-600/20 border border-green-400/50 hover:bg-green-600/30 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
{loading ? "Starting..." : "Enable Autopilot"}
</button>
)}
{supervisorStatus.canResume && (
<button
onClick={handleResume}
disabled={loading}
className="px-4 py-2 font-mono text-xs text-[#dbe7ff] bg-blue-600/20 border border-blue-400/50 hover:bg-blue-600/30 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
{loading ? "Resuming..." : "Resume Autopilot"}
</button>
)}
{supervisorStatus.canStop && (
<button
onClick={handleStop}
disabled={loading}
className="px-4 py-2 font-mono text-xs text-[#dbe7ff] bg-orange-600/20 border border-orange-400/50 hover:bg-orange-600/30 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
{loading ? "Stopping..." : "Pause Autopilot"}
</button>
)}
</div>
{/* Show running indicator when active */}
{supervisorStatus.status === "running" && (
<div className="flex items-center gap-2 pt-2 border-t border-dashed border-[rgba(117,170,252,0.2)]">
<div className="w-2 h-2 rounded-full bg-green-400 animate-pulse" />
<span className="font-mono text-xs text-green-400">
Autopilot is actively working
</span>
</div>
)}
{supervisorStatus.status === "starting" && (
<div className="flex items-center gap-2 pt-2 border-t border-dashed border-[rgba(117,170,252,0.2)]">
<div className="w-2 h-2 rounded-full bg-blue-400 animate-pulse" />
<span className="font-mono text-xs text-blue-400">
Initializing autopilot...
</span>
</div>
)}
</div>
);
}
