feat(web): MS23-P2-004 panel operator controls
All checks were successful
ci/woodpecker/push/ci Pipeline was successful
All checks were successful
ci/woodpecker/push/ci Pipeline was successful
This commit is contained in:
259
apps/web/src/components/mission-control/PanelControls.tsx
Normal file
259
apps/web/src/components/mission-control/PanelControls.tsx
Normal file
@@ -0,0 +1,259 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { apiPost } from "@/lib/api/client";
|
||||
|
||||
const SESSIONS_QUERY_KEY = ["mission-control", "sessions"] as const;
|
||||
|
||||
type PanelAction = "pause" | "resume" | "graceful-kill" | "force-kill";
|
||||
type KillConfirmationState = "graceful" | "force" | null;
|
||||
|
||||
interface PanelActionResult {
|
||||
nextStatus: string;
|
||||
}
|
||||
|
||||
export interface PanelControlsProps {
|
||||
sessionId: string;
|
||||
// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
|
||||
status: "active" | "paused" | "killed" | string;
|
||||
onStatusChange?: (newStatus: string) => void;
|
||||
}
|
||||
|
||||
function getErrorMessage(error: unknown): string {
|
||||
if (error instanceof Error && error.message.trim().length > 0) {
|
||||
return error.message;
|
||||
}
|
||||
|
||||
return "Failed to update agent session.";
|
||||
}
|
||||
|
||||
export function PanelControls({
|
||||
sessionId,
|
||||
status,
|
||||
onStatusChange,
|
||||
}: PanelControlsProps): React.JSX.Element {
|
||||
const queryClient = useQueryClient();
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||
const [confirmingKill, setConfirmingKill] = useState<KillConfirmationState>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setErrorMessage(null);
|
||||
setConfirmingKill(null);
|
||||
}, [sessionId]);
|
||||
|
||||
const controlMutation = useMutation({
|
||||
mutationFn: async (action: PanelAction): Promise<PanelActionResult> => {
|
||||
switch (action) {
|
||||
case "pause":
|
||||
await apiPost<{ message: string }>(
|
||||
`/api/mission-control/sessions/${encodeURIComponent(sessionId)}/pause`
|
||||
);
|
||||
return { nextStatus: "paused" };
|
||||
case "resume":
|
||||
await apiPost<{ message: string }>(
|
||||
`/api/mission-control/sessions/${encodeURIComponent(sessionId)}/resume`
|
||||
);
|
||||
return { nextStatus: "active" };
|
||||
case "graceful-kill":
|
||||
await apiPost<{ message: string }>(
|
||||
`/api/mission-control/sessions/${encodeURIComponent(sessionId)}/kill`,
|
||||
{ force: false }
|
||||
);
|
||||
return { nextStatus: "killed" };
|
||||
case "force-kill":
|
||||
await apiPost<{ message: string }>(
|
||||
`/api/mission-control/sessions/${encodeURIComponent(sessionId)}/kill`,
|
||||
{ force: true }
|
||||
);
|
||||
return { nextStatus: "killed" };
|
||||
}
|
||||
},
|
||||
onSuccess: ({ nextStatus }): void => {
|
||||
setErrorMessage(null);
|
||||
setConfirmingKill(null);
|
||||
onStatusChange?.(nextStatus);
|
||||
void queryClient.invalidateQueries({ queryKey: SESSIONS_QUERY_KEY });
|
||||
},
|
||||
onError: (error: unknown): void => {
|
||||
setConfirmingKill(null);
|
||||
setErrorMessage(getErrorMessage(error));
|
||||
},
|
||||
});
|
||||
|
||||
const normalizedStatus = status.toLowerCase();
|
||||
const isKilled = normalizedStatus === "killed";
|
||||
const isBusy = controlMutation.isPending;
|
||||
const pendingAction = isBusy ? controlMutation.variables : undefined;
|
||||
|
||||
const submitAction = (action: PanelAction): void => {
|
||||
setErrorMessage(null);
|
||||
controlMutation.mutate(action);
|
||||
};
|
||||
|
||||
const pauseDisabled = isBusy || normalizedStatus === "paused" || isKilled;
|
||||
const resumeDisabled = isBusy || normalizedStatus === "active" || isKilled;
|
||||
const gracefulKillDisabled = isBusy || isKilled;
|
||||
const forceKillDisabled = isBusy || isKilled;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-end gap-2">
|
||||
<div className="flex flex-wrap items-center justify-end gap-1.5">
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
onClick={() => {
|
||||
submitAction("pause");
|
||||
}}
|
||||
disabled={pauseDisabled}
|
||||
aria-label="Pause session"
|
||||
>
|
||||
{pendingAction === "pause" ? (
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden="true" />
|
||||
) : (
|
||||
<span aria-hidden="true">⏸</span>
|
||||
)}
|
||||
<span>Pause</span>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
onClick={() => {
|
||||
submitAction("resume");
|
||||
}}
|
||||
disabled={resumeDisabled}
|
||||
aria-label="Resume session"
|
||||
>
|
||||
{pendingAction === "resume" ? (
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden="true" />
|
||||
) : (
|
||||
<span aria-hidden="true">▶</span>
|
||||
)}
|
||||
<span>Resume</span>
|
||||
</Button>
|
||||
|
||||
<div className="relative">
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
onClick={() => {
|
||||
setErrorMessage(null);
|
||||
setConfirmingKill((current) => (current === "graceful" ? null : "graceful"));
|
||||
}}
|
||||
disabled={gracefulKillDisabled}
|
||||
aria-label="Gracefully kill session"
|
||||
>
|
||||
{pendingAction === "graceful-kill" ? (
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden="true" />
|
||||
) : (
|
||||
<span aria-hidden="true">⏹</span>
|
||||
)}
|
||||
<span>Graceful Kill</span>
|
||||
</Button>
|
||||
{confirmingKill === "graceful" ? (
|
||||
<div className="absolute right-0 top-[calc(100%+0.375rem)] z-20 w-72 rounded-md border border-border bg-card p-2 shadow-lg">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Gracefully stop this agent after it finishes the current step?
|
||||
</p>
|
||||
<div className="mt-2 flex justify-end gap-1.5">
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => {
|
||||
setConfirmingKill(null);
|
||||
}}
|
||||
disabled={isBusy}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
onClick={() => {
|
||||
submitAction("graceful-kill");
|
||||
}}
|
||||
disabled={isBusy}
|
||||
>
|
||||
{pendingAction === "graceful-kill" ? (
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden="true" />
|
||||
) : null}
|
||||
<span>Confirm</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="danger"
|
||||
onClick={() => {
|
||||
setErrorMessage(null);
|
||||
setConfirmingKill((current) => (current === "force" ? null : "force"));
|
||||
}}
|
||||
disabled={forceKillDisabled}
|
||||
aria-label="Force kill session"
|
||||
>
|
||||
{pendingAction === "force-kill" ? (
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden="true" />
|
||||
) : (
|
||||
<span aria-hidden="true">💀</span>
|
||||
)}
|
||||
<span>Force Kill</span>
|
||||
</Button>
|
||||
{confirmingKill === "force" ? (
|
||||
<div className="absolute right-0 top-[calc(100%+0.375rem)] z-20 w-72 rounded-md border border-border bg-card p-2 shadow-lg">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
This will hard-kill the agent immediately.
|
||||
</p>
|
||||
<div className="mt-2 flex justify-end gap-1.5">
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => {
|
||||
setConfirmingKill(null);
|
||||
}}
|
||||
disabled={isBusy}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="danger"
|
||||
onClick={() => {
|
||||
submitAction("force-kill");
|
||||
}}
|
||||
disabled={isBusy}
|
||||
>
|
||||
{pendingAction === "force-kill" ? (
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden="true" />
|
||||
) : null}
|
||||
<span>Confirm</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{errorMessage ? (
|
||||
<Badge variant="status-error" className="max-w-[32rem] whitespace-normal text-xs">
|
||||
{errorMessage}
|
||||
</Badge>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user