José Almeida
413 lines
13 KiB
TypeScript
413 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useCallback, useRef, useEffect } from "react";
|
|
import { IconPlayerPlay, IconLoader2, IconCheck, IconX, IconTrash } from "@tabler/icons-react";
|
|
import { Badge } from "@kandev/ui/badge";
|
|
import { Button } from "@kandev/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@kandev/ui/card";
|
|
import { Input } from "@kandev/ui/input";
|
|
import { Label } from "@kandev/ui/label";
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@kandev/ui/table";
|
|
import { ScriptEditor } from "@/components/settings/profile-edit/script-editor";
|
|
import {
|
|
buildDockerImage,
|
|
listDockerContainers,
|
|
stopDockerContainer,
|
|
removeDockerContainer,
|
|
} from "@/lib/api/domains/settings-api";
|
|
import type { DockerContainer } from "@/lib/api/domains/settings-api";
|
|
|
|
const DEFAULT_IMAGE_TAG = "kandev/multi-agent:latest";
|
|
// Self-contained default that produces a working image:
|
|
// - node + npm/npx so ACP agents (Claude, Codex, OpenCode, Auggie) can be
|
|
// fetched on demand at runtime
|
|
// - git so the prepare script can clone the workspace into the container
|
|
// - ca-certificates + curl as a baseline for any extra tooling users add
|
|
//
|
|
// The kandev backend mounts the agentctl binary into /usr/local/bin/agentctl
|
|
// at container creation time, so users do NOT need to bake it in here.
|
|
const DEFAULT_DOCKERFILE = `FROM node:22-slim
|
|
|
|
RUN apt-get update \\
|
|
&& apt-get install -y --no-install-recommends \\
|
|
git ca-certificates curl \\
|
|
&& rm -rf /var/lib/apt/lists/*
|
|
|
|
WORKDIR /workspace
|
|
`;
|
|
|
|
export type BuildStatus = "idle" | "building" | "success" | "failed";
|
|
export type DockerBuildSuccess = { dockerfile: string; imageTag: string };
|
|
|
|
/** Parse a Docker JSON stream line into a human-readable string. */
|
|
function parseDockerLine(raw: string): string | null {
|
|
const trimmed = raw.trim();
|
|
if (!trimmed) return null;
|
|
try {
|
|
const obj = JSON.parse(trimmed) as Record<string, unknown>;
|
|
if (obj.error) return `ERROR: ${obj.error}\n`;
|
|
if (typeof obj.stream === "string") return obj.stream;
|
|
if (typeof obj.status === "string") {
|
|
const id = obj.id ? ` ${obj.id}` : "";
|
|
return `${obj.status}${id}\n`;
|
|
}
|
|
// Skip metadata-only messages (aux, progressDetail, etc.)
|
|
return null;
|
|
} catch {
|
|
return trimmed;
|
|
}
|
|
}
|
|
|
|
function BuildStatusBadge({ status }: { status: BuildStatus }) {
|
|
if (status === "idle") return null;
|
|
if (status === "building") return <Badge variant="secondary">Building...</Badge>;
|
|
if (status === "success") {
|
|
return (
|
|
<Badge variant="default" className="bg-green-600">
|
|
<IconCheck className="mr-1 h-3 w-3" />
|
|
Success
|
|
</Badge>
|
|
);
|
|
}
|
|
return (
|
|
<Badge variant="destructive">
|
|
<IconX className="mr-1 h-3 w-3" />
|
|
Failed
|
|
</Badge>
|
|
);
|
|
}
|
|
|
|
async function readDockerStream(
|
|
reader: ReadableStreamDefaultReader<Uint8Array>,
|
|
appendLog: (text: string) => void,
|
|
): Promise<boolean> {
|
|
const decoder = new TextDecoder();
|
|
let buffer = "";
|
|
let hasError = false;
|
|
let done = false;
|
|
while (!done) {
|
|
const result = await reader.read();
|
|
done = result.done;
|
|
if (!result.value) continue;
|
|
buffer += decoder.decode(result.value, { stream: true });
|
|
const lines = buffer.split("\n");
|
|
buffer = lines.pop() ?? "";
|
|
for (const line of lines) {
|
|
const parsed = parseDockerLine(line);
|
|
if (!parsed) continue;
|
|
if (parsed.startsWith("ERROR:")) hasError = true;
|
|
appendLog(parsed);
|
|
}
|
|
}
|
|
const tail = parseDockerLine(buffer);
|
|
if (tail) appendLog(tail);
|
|
return hasError;
|
|
}
|
|
|
|
function useBuildStream(onBuildSuccess?: (result: DockerBuildSuccess) => void) {
|
|
const [buildStatus, setBuildStatus] = useState<BuildStatus>("idle");
|
|
const [buildLog, setBuildLog] = useState("");
|
|
|
|
const appendLog = useCallback((text: string) => {
|
|
setBuildLog((prev) => prev + text);
|
|
}, []);
|
|
|
|
const runBuild = useCallback(
|
|
async (dockerfile: string, tag: string) => {
|
|
setBuildStatus("building");
|
|
setBuildLog("");
|
|
try {
|
|
const response = await buildDockerImage({ dockerfile, tag });
|
|
if (!response.ok) {
|
|
const text = await response.text();
|
|
setBuildStatus("failed");
|
|
setBuildLog(`Build failed (${response.status}): ${text}`);
|
|
return;
|
|
}
|
|
const reader = response.body?.getReader();
|
|
if (!reader) {
|
|
setBuildStatus("failed");
|
|
setBuildLog("No response body");
|
|
return;
|
|
}
|
|
const hasError = await readDockerStream(reader, appendLog);
|
|
const nextStatus = hasError ? "failed" : "success";
|
|
setBuildStatus(nextStatus);
|
|
if (nextStatus === "success") {
|
|
onBuildSuccess?.({ dockerfile, imageTag: tag.trim() });
|
|
}
|
|
} catch (err) {
|
|
setBuildStatus("failed");
|
|
const msg = err instanceof Error ? err.message : "Unknown error";
|
|
setBuildLog((prev) => prev + `\nBuild failed: ${msg}`);
|
|
}
|
|
},
|
|
[appendLog, onBuildSuccess],
|
|
);
|
|
|
|
return { buildStatus, buildLog, runBuild };
|
|
}
|
|
|
|
type DockerfileBuildCardProps = {
|
|
dockerfile: string;
|
|
onDockerfileChange: (v: string) => void;
|
|
imageTag: string;
|
|
onImageTagChange: (v: string) => void;
|
|
onBuildSuccess?: (result: DockerBuildSuccess) => void;
|
|
};
|
|
|
|
export function DockerfileBuildCard({
|
|
dockerfile,
|
|
onDockerfileChange,
|
|
imageTag,
|
|
onImageTagChange,
|
|
onBuildSuccess,
|
|
}: DockerfileBuildCardProps) {
|
|
const { buildStatus, buildLog, runBuild } = useBuildStream(onBuildSuccess);
|
|
const logRef = useRef<HTMLPreElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (logRef.current) logRef.current.scrollTop = logRef.current.scrollHeight;
|
|
}, [buildLog]);
|
|
|
|
const handleBuild = () => {
|
|
if (dockerfile.trim() && imageTag.trim()) void runBuild(dockerfile, imageTag);
|
|
};
|
|
|
|
const canFillDefaults = !dockerfile.trim() || !imageTag.trim();
|
|
|
|
const fillDefaults = () => {
|
|
if (!imageTag.trim()) onImageTagChange(DEFAULT_IMAGE_TAG);
|
|
if (!dockerfile.trim()) onDockerfileChange(DEFAULT_DOCKERFILE);
|
|
};
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<div className="space-y-1">
|
|
<CardTitle>Dockerfile</CardTitle>
|
|
<CardDescription>Define the Docker image. Build and test it here.</CardDescription>
|
|
</div>
|
|
{canFillDefaults && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={fillDefaults}
|
|
className="cursor-pointer text-xs text-muted-foreground"
|
|
>
|
|
Use defaults
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="image-tag">Image Tag</Label>
|
|
<Input
|
|
id="image-tag"
|
|
value={imageTag}
|
|
onChange={(e) => onImageTagChange(e.target.value)}
|
|
placeholder={DEFAULT_IMAGE_TAG}
|
|
className="font-mono text-sm"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>Dockerfile Content</Label>
|
|
<div className="overflow-hidden rounded-md border">
|
|
<ScriptEditor
|
|
value={dockerfile}
|
|
onChange={onDockerfileChange}
|
|
language="dockerfile"
|
|
height="250px"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<Button
|
|
onClick={handleBuild}
|
|
disabled={buildStatus === "building" || !dockerfile.trim() || !imageTag.trim()}
|
|
className="cursor-pointer"
|
|
>
|
|
{buildStatus === "building" ? (
|
|
<IconLoader2 className="mr-1.5 h-4 w-4 animate-spin" />
|
|
) : (
|
|
<IconPlayerPlay className="mr-1.5 h-4 w-4" />
|
|
)}
|
|
Build Image
|
|
</Button>
|
|
<BuildStatusBadge status={buildStatus} />
|
|
</div>
|
|
{buildLog && (
|
|
<pre
|
|
ref={logRef}
|
|
className="max-h-[300px] overflow-auto rounded-md bg-black p-3 font-mono text-xs text-green-400"
|
|
>
|
|
{buildLog}
|
|
</pre>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function ContainersEmptyState({ loading }: { loading: boolean }) {
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center gap-2 py-4 text-sm text-muted-foreground">
|
|
<IconLoader2 className="h-4 w-4 animate-spin" />
|
|
Loading...
|
|
</div>
|
|
);
|
|
}
|
|
return <p className="py-4 text-sm text-muted-foreground">No Docker containers.</p>;
|
|
}
|
|
|
|
export function useDockerProfileContainers(profileId: string, enabled = true) {
|
|
const [containers, setContainers] = useState<DockerContainer[]>([]);
|
|
const [loading, setLoading] = useState(enabled);
|
|
|
|
const refresh = useCallback(async () => {
|
|
if (!enabled) {
|
|
setContainers([]);
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
setLoading(true);
|
|
try {
|
|
const result = await listDockerContainers({
|
|
labels: { "kandev.executor_profile_id": profileId },
|
|
});
|
|
setContainers(result.containers ?? []);
|
|
} catch {
|
|
setContainers([]);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [enabled, profileId]);
|
|
|
|
useEffect(() => {
|
|
void refresh();
|
|
}, [refresh]);
|
|
|
|
return { containers, loading, refresh };
|
|
}
|
|
|
|
export function containerTaskLabel(container: DockerContainer) {
|
|
const title = container.labels?.["kandev.task_title"]?.trim();
|
|
return title || container.labels?.["kandev.task_id"] || "Untracked";
|
|
}
|
|
|
|
function ContainerRow({
|
|
container,
|
|
actionLoading,
|
|
onStop,
|
|
onRemove,
|
|
}: {
|
|
container: DockerContainer;
|
|
actionLoading: string | null;
|
|
onStop: (id: string) => void;
|
|
onRemove: (id: string) => void;
|
|
}) {
|
|
const isLoading = actionLoading === container.id;
|
|
return (
|
|
<TableRow data-testid={`docker-container-row-${container.id}`}>
|
|
<TableCell className="font-mono text-sm">{container.name}</TableCell>
|
|
<TableCell className="text-sm">{container.image}</TableCell>
|
|
<TableCell className="text-sm" data-testid="docker-container-task">
|
|
{containerTaskLabel(container)}
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge variant={container.state === "running" ? "default" : "secondary"}>
|
|
{container.status}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex items-center gap-1">
|
|
{container.state === "running" && (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => onStop(container.id)}
|
|
disabled={isLoading}
|
|
className="cursor-pointer"
|
|
title="Stop"
|
|
>
|
|
{isLoading ? (
|
|
<IconLoader2 className="h-4 w-4 animate-spin" />
|
|
) : (
|
|
<IconX className="h-4 w-4" />
|
|
)}
|
|
</Button>
|
|
)}
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => onRemove(container.id)}
|
|
disabled={isLoading}
|
|
className="cursor-pointer"
|
|
title="Remove"
|
|
>
|
|
<IconTrash className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
}
|
|
|
|
export function DockerContainersCard({ profileId }: { profileId: string }) {
|
|
const { containers, loading, refresh } = useDockerProfileContainers(profileId);
|
|
const [actionLoading, setActionLoading] = useState<string | null>(null);
|
|
|
|
const handleAction = useCallback(
|
|
async (id: string, action: (id: string) => Promise<void>) => {
|
|
setActionLoading(id);
|
|
try {
|
|
await action(id);
|
|
await refresh();
|
|
} finally {
|
|
setActionLoading(null);
|
|
}
|
|
},
|
|
[refresh],
|
|
);
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Docker Containers</CardTitle>
|
|
<CardDescription>Docker containers created by this profile.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{containers.length === 0 ? (
|
|
<ContainersEmptyState loading={loading} />
|
|
) : (
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Name</TableHead>
|
|
<TableHead>Image</TableHead>
|
|
<TableHead>Task</TableHead>
|
|
<TableHead>Status</TableHead>
|
|
<TableHead className="w-[100px]" />
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{containers.map((c) => (
|
|
<ContainerRow
|
|
key={c.id}
|
|
container={c}
|
|
actionLoading={actionLoading}
|
|
onStop={(id) => handleAction(id, stopDockerContainer)}
|
|
onRemove={(id) => handleAction(id, removeDockerContainer)}
|
|
/>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|