import { useState } from "react";
import type { TaskCheckpoint } from "../../lib/api";
import { rewindTask, resumeSupervisor, rewindSupervisorConversation } from "../../lib/api";
interface ResumeControlsProps {
taskId: string;
contractId: string | null;
checkpoints: TaskCheckpoint[];
onActionComplete: () => void;
}
export function ResumeControls({
taskId,
contractId,
checkpoints,
onActionComplete,
}: ResumeControlsProps) {
const [showRewindDialog, setShowRewindDialog] = useState(false);
const [showSupervisorDialog, setShowSupervisorDialog] = useState(false);
const [selectedCheckpoint, setSelectedCheckpoint] = useState<string>("");
const [preserveMode, setPreserveMode] = useState<"discard" | "create_branch">("create_branch");
const [branchName, setBranchName] = useState("");
const [resumeMode, setResumeMode] = useState<"continue" | "restart_phase">("continue");
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const handleRewindTask = async () => {
if (!selectedCheckpoint) {
setError("Select a checkpoint");
return;
}
setIsLoading(true);
setError(null);
try {
await rewindTask(taskId, {
checkpointId: selectedCheckpoint,
preserveMode,
branchName: preserveMode === "create_branch" ? branchName || undefined : undefined,
});
setShowRewindDialog(false);
onActionComplete();
} catch (e) {
setError(e instanceof Error ? e.message : "Failed to rewind task");
} finally {
setIsLoading(false);
}
};
const handleResumeSupervisor = async () => {
if (!contractId) return;
setIsLoading(true);
setError(null);
try {
await resumeSupervisor(contractId, {
resumeMode,
});
setShowSupervisorDialog(false);
onActionComplete();
} catch (e) {
setError(e instanceof Error ? e.message : "Failed to resume supervisor");
} finally {
setIsLoading(false);
}
};
const handleRewindConversation = async () => {
if (!contractId) return;
setIsLoading(true);
setError(null);
try {
await rewindSupervisorConversation(contractId, {
byMessageCount: 1, // Rewind by 1 message
});
onActionComplete();
} catch (e) {
setError(e instanceof Error ? e.message : "Failed to rewind conversation");
} finally {
setIsLoading(false);
}
};
return (
<>
<div className="shrink-0 p-3 border-t border-[rgba(117,170,252,0.15)] bg-[rgba(0,0,0,0.2)] flex items-center gap-2">
{/* Task controls */}
{checkpoints.length > 0 && (
<button
onClick={() => setShowRewindDialog(true)}
className="px-3 py-1.5 font-mono text-[10px] uppercase text-yellow-400 border border-yellow-400/30 hover:bg-yellow-400/10 transition-colors"
>
Rewind Code
</button>
)}
{/* Supervisor controls */}
{contractId && (
<>
<button
onClick={() => setShowSupervisorDialog(true)}
className="px-3 py-1.5 font-mono text-[10px] uppercase text-cyan-400 border border-cyan-400/30 hover:bg-cyan-400/10 transition-colors"
>
Resume Supervisor
</button>
<button
onClick={handleRewindConversation}
disabled={isLoading}
className="px-3 py-1.5 font-mono text-[10px] uppercase text-orange-400 border border-orange-400/30 hover:bg-orange-400/10 transition-colors disabled:opacity-50"
>
Undo Last Message
</button>
</>
)}
</div>
{/* Rewind Task Dialog */}
{showRewindDialog && (
<div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50">
<div className="bg-[#0d1b2d] border border-[rgba(117,170,252,0.35)] max-w-lg w-full mx-4">
<div className="p-4 border-b border-[rgba(117,170,252,0.15)] flex justify-between items-center">
<h2 className="font-mono text-sm uppercase tracking-wide text-[#9bc3ff]">
Rewind Task Code
</h2>
<button
onClick={() => setShowRewindDialog(false)}
className="text-[#7788aa] hover:text-[#9bc3ff] transition-colors"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div className="p-4 space-y-4">
{error && (
<div className="p-2 bg-red-400/10 border border-red-400/30 font-mono text-xs text-red-400">
{error}
</div>
)}
<div>
<label className="block font-mono text-[10px] text-[#7788aa] uppercase mb-1">
Checkpoint
</label>
<select
value={selectedCheckpoint}
onChange={(e) => setSelectedCheckpoint(e.target.value)}
className="w-full font-mono text-xs text-[#9bc3ff] bg-[#0a1525] border border-[rgba(117,170,252,0.25)] px-3 py-2 focus:border-[#3f6fb3] focus:outline-none"
>
<option value="">Select checkpoint...</option>
{checkpoints.map((cp) => (
<option key={cp.id} value={cp.id}>
#{cp.checkpointNumber} - {cp.message || cp.commitSha.slice(0, 7)}
</option>
))}
</select>
</div>
<div>
<label className="block font-mono text-[10px] text-[#7788aa] uppercase mb-1">
Preserve Current Code
</label>
<div className="flex gap-4">
<label className="flex items-center gap-2 cursor-pointer">
<input
type="radio"
name="preserveMode"
checked={preserveMode === "create_branch"}
onChange={() => setPreserveMode("create_branch")}
className="text-[#3f6fb3]"
/>
<span className="font-mono text-xs text-[#9bc3ff]">Create branch</span>
</label>
<label className="flex items-center gap-2 cursor-pointer">
<input
type="radio"
name="preserveMode"
checked={preserveMode === "discard"}
onChange={() => setPreserveMode("discard")}
className="text-[#3f6fb3]"
/>
<span className="font-mono text-xs text-[#9bc3ff]">Discard</span>
</label>
</div>
</div>
{preserveMode === "create_branch" && (
<div>
<label className="block font-mono text-[10px] text-[#7788aa] uppercase mb-1">
Branch Name (optional)
</label>
<input
type="text"
value={branchName}
onChange={(e) => setBranchName(e.target.value)}
placeholder="Auto-generated if empty"
className="w-full font-mono text-xs text-[#9bc3ff] bg-[#0a1525] border border-[rgba(117,170,252,0.25)] px-3 py-2 focus:border-[#3f6fb3] focus:outline-none"
/>
</div>
)}
<div className="flex justify-end gap-2">
<button
onClick={() => setShowRewindDialog(false)}
className="px-4 py-2 font-mono text-xs uppercase text-[#7788aa] border border-[rgba(117,170,252,0.25)] hover:text-[#9bc3ff] transition-colors"
>
Cancel
</button>
<button
onClick={handleRewindTask}
disabled={isLoading || !selectedCheckpoint}
className="px-4 py-2 font-mono text-xs uppercase text-white bg-yellow-600 border border-yellow-500 hover:bg-yellow-500 transition-colors disabled:opacity-50"
>
{isLoading ? "Rewinding..." : "Rewind"}
</button>
</div>
</div>
</div>
</div>
)}
{/* Resume Supervisor Dialog */}
{showSupervisorDialog && (
<div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50">
<div className="bg-[#0d1b2d] border border-[rgba(117,170,252,0.35)] max-w-lg w-full mx-4">
<div className="p-4 border-b border-[rgba(117,170,252,0.15)] flex justify-between items-center">
<h2 className="font-mono text-sm uppercase tracking-wide text-[#9bc3ff]">
Resume Supervisor
</h2>
<button
onClick={() => setShowSupervisorDialog(false)}
className="text-[#7788aa] hover:text-[#9bc3ff] transition-colors"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div className="p-4 space-y-4">
{error && (
<div className="p-2 bg-red-400/10 border border-red-400/30 font-mono text-xs text-red-400">
{error}
</div>
)}
<div>
<label className="block font-mono text-[10px] text-[#7788aa] uppercase mb-2">
Resume Mode
</label>
<div className="space-y-2">
<label className="flex items-start gap-2 cursor-pointer p-2 border border-[rgba(117,170,252,0.15)] hover:border-[rgba(117,170,252,0.25)] transition-colors">
<input
type="radio"
name="resumeMode"
checked={resumeMode === "continue"}
onChange={() => setResumeMode("continue")}
className="mt-0.5 text-[#3f6fb3]"
/>
<div>
<span className="font-mono text-xs text-[#9bc3ff]">Continue</span>
<p className="font-mono text-[10px] text-[#7788aa] mt-0.5">
Resume with existing conversation context
</p>
</div>
</label>
<label className="flex items-start gap-2 cursor-pointer p-2 border border-[rgba(117,170,252,0.15)] hover:border-[rgba(117,170,252,0.25)] transition-colors">
<input
type="radio"
name="resumeMode"
checked={resumeMode === "restart_phase"}
onChange={() => setResumeMode("restart_phase")}
className="mt-0.5 text-[#3f6fb3]"
/>
<div>
<span className="font-mono text-xs text-[#9bc3ff]">Restart Phase</span>
<p className="font-mono text-[10px] text-[#7788aa] mt-0.5">
Clear conversation but keep phase progress
</p>
</div>
</label>
</div>
</div>
<div className="flex justify-end gap-2">
<button
onClick={() => setShowSupervisorDialog(false)}
className="px-4 py-2 font-mono text-xs uppercase text-[#7788aa] border border-[rgba(117,170,252,0.25)] hover:text-[#9bc3ff] transition-colors"
>
Cancel
</button>
<button
onClick={handleResumeSupervisor}
disabled={isLoading}
className="px-4 py-2 font-mono text-xs uppercase text-white bg-cyan-600 border border-cyan-500 hover:bg-cyan-500 transition-colors disabled:opacity-50"
>
{isLoading ? "Resuming..." : "Resume"}
</button>
</div>
</div>
</div>
</div>
)}
</>
);
}
