feat: add Clone Database to Docker functionality

Clone any database to a local Docker PostgreSQL container with schema
and/or data transfer via pg_dump. Supports three modes: schema only,
full clone, and sample data. Includes container lifecycle management
(start/stop/remove) in the Admin panel, progress tracking with
collapsible process log, and automatic connection creation.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/docker/DockerContainersList.tsx

@@ -0,0 +1,179 @@
+import { useState } from "react";
+import {
+  useTuskContainers,
+  useStartContainer,
+  useStopContainer,
+  useRemoveContainer,
+  useDockerStatus,
+} from "@/hooks/use-docker";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { toast } from "sonner";
+import {
+  ChevronDown,
+  ChevronRight,
+  Container,
+  Play,
+  Square,
+  Trash2,
+  Loader2,
+} from "lucide-react";
+
+export function DockerContainersList() {
+  const [expanded, setExpanded] = useState(true);
+  const { data: dockerStatus } = useDockerStatus();
+  const { data: containers, isLoading } = useTuskContainers();
+  const startMutation = useStartContainer();
+  const stopMutation = useStopContainer();
+  const removeMutation = useRemoveContainer();
+
+  const dockerAvailable =
+    dockerStatus?.installed && dockerStatus?.daemon_running;
+
+  if (!dockerAvailable) {
+    return null;
+  }
+
+  const handleStart = (name: string) => {
+    startMutation.mutate(name, {
+      onSuccess: () => toast.success(`Container "${name}" started`),
+      onError: (err) =>
+        toast.error("Failed to start container", {
+          description: String(err),
+        }),
+    });
+  };
+
+  const handleStop = (name: string) => {
+    stopMutation.mutate(name, {
+      onSuccess: () => toast.success(`Container "${name}" stopped`),
+      onError: (err) =>
+        toast.error("Failed to stop container", {
+          description: String(err),
+        }),
+    });
+  };
+
+  const handleRemove = (name: string) => {
+    if (
+      !confirm(
+        `Remove container "${name}"? This will delete the container and all its data.`
+      )
+    ) {
+      return;
+    }
+    removeMutation.mutate(name, {
+      onSuccess: () => toast.success(`Container "${name}" removed`),
+      onError: (err) =>
+        toast.error("Failed to remove container", {
+          description: String(err),
+        }),
+    });
+  };
+
+  const isRunning = (status: string) =>
+    status.toLowerCase().startsWith("up");
+
+  return (
+    <div className="border-b">
+      <div
+        className="flex items-center gap-1 px-3 py-2 cursor-pointer select-none hover:bg-accent/50"
+        onClick={() => setExpanded(!expanded)}
+      >
+        {expanded ? (
+          <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+        ) : (
+          <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
+        )}
+        <Container className="h-3.5 w-3.5 text-muted-foreground" />
+        <span className="text-xs font-semibold flex-1">Docker Clones</span>
+        {containers && containers.length > 0 && (
+          <Badge
+            variant="secondary"
+            className="text-[9px] px-1 py-0"
+          >
+            {containers.length}
+          </Badge>
+        )}
+      </div>
+
+      {expanded && (
+        <div className="pb-1">
+          {isLoading && (
+            <div className="px-3 py-2 text-xs text-muted-foreground flex items-center gap-1">
+              <Loader2 className="h-3 w-3 animate-spin" /> Loading...
+            </div>
+          )}
+          {containers && containers.length === 0 && (
+            <div className="px-6 pb-2 text-xs text-muted-foreground">
+              No Docker clones yet. Right-click a database to clone it.
+            </div>
+          )}
+          {containers?.map((container) => (
+            <div
+              key={container.container_id}
+              className="group flex items-center gap-1.5 px-6 py-1 text-xs hover:bg-accent/50"
+            >
+              <span className="truncate flex-1 font-medium">
+                {container.name}
+              </span>
+              {container.source_database && (
+                <span className="text-[10px] text-muted-foreground shrink-0">
+                  {container.source_database}
+                </span>
+              )}
+              <span className="text-[10px] text-muted-foreground shrink-0">
+                :{container.host_port}
+              </span>
+              <Badge
+                variant={isRunning(container.status) ? "default" : "secondary"}
+                className={`text-[9px] px-1 py-0 shrink-0 ${
+                  isRunning(container.status)
+                    ? "bg-green-600 hover:bg-green-600"
+                    : ""
+                }`}
+              >
+                {isRunning(container.status) ? "running" : "stopped"}
+              </Badge>
+              <div className="flex gap-0.5 opacity-0 group-hover:opacity-100 shrink-0">
+                {isRunning(container.status) ? (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-5 w-5 p-0"
+                    onClick={() => handleStop(container.name)}
+                    title="Stop"
+                    disabled={stopMutation.isPending}
+                  >
+                    <Square className="h-3 w-3" />
+                  </Button>
+                ) : (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-5 w-5 p-0"
+                    onClick={() => handleStart(container.name)}
+                    title="Start"
+                    disabled={startMutation.isPending}
+                  >
+                    <Play className="h-3 w-3" />
+                  </Button>
+                )}
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-5 w-5 p-0 text-destructive hover:text-destructive"
+                  onClick={() => handleRemove(container.name)}
+                  title="Remove"
+                  disabled={removeMutation.isPending}
+                >
+                  <Trash2 className="h-3 w-3" />
+                </Button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}