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/CloneDatabaseDialog.tsx

@@ -0,0 +1,494 @@
+import { useState, useEffect, useRef } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Badge } from "@/components/ui/badge";
+import { useDockerStatus, useCloneToDocker } from "@/hooks/use-docker";
+import { toast } from "sonner";
+import {
+  Loader2,
+  CheckCircle2,
+  XCircle,
+  Container,
+  Copy,
+  ChevronDown,
+  ChevronRight,
+} from "lucide-react";
+import type { CloneMode, CloneProgress } from "@/types";
+
+interface Props {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  connectionId: string;
+  database: string;
+  onConnect?: (connectionId: string) => void;
+}
+
+type Step = "config" | "progress" | "done";
+
+function ProcessLog({
+  entries,
+  open: logOpen,
+  onToggle,
+  endRef,
+}: {
+  entries: CloneProgress[];
+  open: boolean;
+  onToggle: () => void;
+  endRef: React.RefObject<HTMLDivElement | null>;
+}) {
+  if (entries.length === 0) return null;
+
+  return (
+    <div>
+      <button
+        type="button"
+        className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
+        onClick={onToggle}
+      >
+        {logOpen ? (
+          <ChevronDown className="h-3 w-3" />
+        ) : (
+          <ChevronRight className="h-3 w-3" />
+        )}
+        Process Log ({entries.length})
+      </button>
+      {logOpen && (
+        <div className="mt-1.5 rounded-md bg-muted p-3 text-xs font-mono max-h-40 overflow-y-auto">
+          {entries.map((entry, i) => (
+            <div key={i} className="flex gap-2 leading-5">
+              <span className="text-muted-foreground shrink-0 w-8 text-right">
+                {entry.percent}%
+              </span>
+              <span>{entry.message}</span>
+              {entry.detail && (
+                <span className="text-muted-foreground truncate">
+                  — {entry.detail}
+                </span>
+              )}
+            </div>
+          ))}
+          <div ref={endRef} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function CloneDatabaseDialog({
+  open,
+  onOpenChange,
+  connectionId,
+  database,
+  onConnect,
+}: Props) {
+  const [step, setStep] = useState<Step>("config");
+  const [containerName, setContainerName] = useState("");
+  const [pgVersion, setPgVersion] = useState("16");
+  const [portMode, setPortMode] = useState<"auto" | "manual">("auto");
+  const [manualPort, setManualPort] = useState(5433);
+  const [cloneMode, setCloneMode] = useState<CloneMode>("schema_only");
+  const [sampleRows, setSampleRows] = useState(1000);
+
+  const [logEntries, setLogEntries] = useState<CloneProgress[]>([]);
+  const [logOpen, setLogOpen] = useState(false);
+  const logEndRef = useRef<HTMLDivElement>(null);
+
+  const { data: dockerStatus } = useDockerStatus();
+  const { clone, result, error, isCloning, progress, reset } =
+    useCloneToDocker();
+
+  // Reset state when dialog opens
+  useEffect(() => {
+    if (open) {
+      setStep("config");
+      setContainerName(
+        `tusk-${database.replace(/[^a-zA-Z0-9_-]/g, "-")}-${Date.now().toString(36)}`
+      );
+      setPgVersion("16");
+      setPortMode("auto");
+      setManualPort(5433);
+      setCloneMode("schema_only");
+      setSampleRows(1000);
+      setLogEntries([]);
+      setLogOpen(false);
+      reset();
+    }
+  }, [open, database, reset]);
+
+  // Accumulate progress events into log
+  useEffect(() => {
+    if (progress) {
+      setLogEntries((prev) => {
+        const last = prev[prev.length - 1];
+        if (last && last.stage === progress.stage && last.message === progress.message) {
+          return prev;
+        }
+        return [...prev, progress];
+      });
+      if (progress.stage === "done" || progress.stage === "error") {
+        setStep("done");
+      }
+    }
+  }, [progress]);
+
+  // Auto-scroll log to bottom
+  useEffect(() => {
+    if (logOpen && logEndRef.current) {
+      logEndRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [logEntries, logOpen]);
+
+  const handleClone = () => {
+    if (!containerName.trim()) {
+      toast.error("Container name is required");
+      return;
+    }
+
+    setStep("progress");
+
+    const cloneId = crypto.randomUUID();
+    clone({
+      params: {
+        source_connection_id: connectionId,
+        source_database: database,
+        container_name: containerName.trim(),
+        pg_version: pgVersion,
+        host_port: portMode === "manual" ? manualPort : null,
+        clone_mode: cloneMode,
+        sample_rows: cloneMode === "sample_data" ? sampleRows : null,
+        postgres_password: null,
+      },
+      cloneId,
+    });
+  };
+
+  const handleConnect = () => {
+    if (result?.connection_id && onConnect) {
+      onConnect(result.connection_id);
+    }
+    onOpenChange(false);
+  };
+
+  const dockerReady =
+    dockerStatus?.installed && dockerStatus?.daemon_running;
+
+  const logSection = (
+    <ProcessLog
+      entries={logEntries}
+      open={logOpen}
+      onToggle={() => setLogOpen(!logOpen)}
+      endRef={logEndRef}
+    />
+  );
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[520px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Container className="h-5 w-5" />
+            Clone to Docker
+          </DialogTitle>
+        </DialogHeader>
+
+        {step === "config" && (
+          <>
+            <div className="flex items-center gap-2 rounded-md border px-3 py-2 text-sm">
+              {dockerStatus === undefined ? (
+                <>
+                  <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                  <span className="text-muted-foreground">
+                    Checking Docker...
+                  </span>
+                </>
+              ) : dockerReady ? (
+                <>
+                  <CheckCircle2 className="h-4 w-4 text-green-500" />
+                  <span>Docker {dockerStatus.version}</span>
+                </>
+              ) : (
+                <>
+                  <XCircle className="h-4 w-4 text-destructive" />
+                  <span className="text-destructive">
+                    {dockerStatus?.error || "Docker not available"}
+                  </span>
+                </>
+              )}
+            </div>
+
+            <div className="grid gap-3 py-2">
+              <div className="grid grid-cols-4 items-center gap-3">
+                <label className="text-right text-sm text-muted-foreground">
+                  Database
+                </label>
+                <div className="col-span-3">
+                  <Badge variant="secondary">{database}</Badge>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-4 items-center gap-3">
+                <label className="text-right text-sm text-muted-foreground">
+                  Container
+                </label>
+                <Input
+                  className="col-span-3"
+                  value={containerName}
+                  onChange={(e) => setContainerName(e.target.value)}
+                  placeholder="tusk-mydb-clone"
+                />
+              </div>
+
+              <div className="grid grid-cols-4 items-center gap-3">
+                <label className="text-right text-sm text-muted-foreground">
+                  PG Version
+                </label>
+                <Select value={pgVersion} onValueChange={setPgVersion}>
+                  <SelectTrigger className="col-span-3">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="17">PostgreSQL 17</SelectItem>
+                    <SelectItem value="16">PostgreSQL 16</SelectItem>
+                    <SelectItem value="15">PostgreSQL 15</SelectItem>
+                    <SelectItem value="14">PostgreSQL 14</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="grid grid-cols-4 items-center gap-3">
+                <label className="text-right text-sm text-muted-foreground">
+                  Port
+                </label>
+                <div className="col-span-3 flex items-center gap-2">
+                  <Select
+                    value={portMode}
+                    onValueChange={(v) =>
+                      setPortMode(v as "auto" | "manual")
+                    }
+                  >
+                    <SelectTrigger className="w-24">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="auto">Auto</SelectItem>
+                      <SelectItem value="manual">Manual</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  {portMode === "manual" && (
+                    <Input
+                      type="number"
+                      className="flex-1"
+                      value={manualPort}
+                      onChange={(e) =>
+                        setManualPort(parseInt(e.target.value) || 5433)
+                      }
+                      min={1024}
+                      max={65535}
+                    />
+                  )}
+                </div>
+              </div>
+
+              <div className="grid grid-cols-4 items-center gap-3">
+                <label className="text-right text-sm text-muted-foreground">
+                  Clone Mode
+                </label>
+                <Select
+                  value={cloneMode}
+                  onValueChange={(v) => setCloneMode(v as CloneMode)}
+                >
+                  <SelectTrigger className="col-span-3">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="schema_only">
+                      Schema Only
+                    </SelectItem>
+                    <SelectItem value="full_clone">Full Clone</SelectItem>
+                    <SelectItem value="sample_data">
+                      Sample Data
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {cloneMode === "sample_data" && (
+                <div className="grid grid-cols-4 items-center gap-3">
+                  <label className="text-right text-sm text-muted-foreground">
+                    Sample Rows
+                  </label>
+                  <Input
+                    className="col-span-3"
+                    type="number"
+                    value={sampleRows}
+                    onChange={(e) =>
+                      setSampleRows(parseInt(e.target.value) || 1000)
+                    }
+                    min={1}
+                    max={100000}
+                  />
+                </div>
+              )}
+            </div>
+
+            <DialogFooter>
+              <Button
+                variant="outline"
+                onClick={() => onOpenChange(false)}
+              >
+                Cancel
+              </Button>
+              <Button onClick={handleClone} disabled={!dockerReady}>
+                Clone
+              </Button>
+            </DialogFooter>
+          </>
+        )}
+
+        {step === "progress" && (
+          <div className="py-4 space-y-4">
+            <div className="space-y-2">
+              <div className="flex items-center justify-between text-sm">
+                <span>{progress?.message || "Starting..."}</span>
+                <span className="text-muted-foreground">
+                  {progress?.percent ?? 0}%
+                </span>
+              </div>
+              <div className="h-2 rounded-full bg-secondary overflow-hidden">
+                <div
+                  className="h-full rounded-full bg-primary transition-all duration-300"
+                  style={{ width: `${progress?.percent ?? 0}%` }}
+                />
+              </div>
+            </div>
+
+            {isCloning && (
+              <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                <Loader2 className="h-4 w-4 animate-spin" />
+                {progress?.stage || "Initializing..."}
+              </div>
+            )}
+
+            {logSection}
+          </div>
+        )}
+
+        {step === "done" && (
+          <div className="py-4 space-y-4">
+            {error ? (
+              <div className="flex items-start gap-3 rounded-md border border-destructive/50 bg-destructive/10 p-4">
+                <XCircle className="h-5 w-5 text-destructive shrink-0 mt-0.5" />
+                <div className="space-y-1">
+                  <p className="text-sm font-medium text-destructive">
+                    Clone Failed
+                  </p>
+                  <p className="text-xs text-muted-foreground">{error}</p>
+                </div>
+              </div>
+            ) : (
+              <div className="space-y-3">
+                <div className="flex items-start gap-3 rounded-md border border-green-500/50 bg-green-500/10 p-4">
+                  <CheckCircle2 className="h-5 w-5 text-green-500 shrink-0 mt-0.5" />
+                  <div className="space-y-1">
+                    <p className="text-sm font-medium">
+                      Clone Completed
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      Database cloned to Docker container successfully.
+                    </p>
+                  </div>
+                </div>
+
+                {result && (
+                  <div className="rounded-md border p-3 space-y-2 text-sm">
+                    <div className="flex items-center justify-between">
+                      <span className="text-muted-foreground">
+                        Container
+                      </span>
+                      <span className="font-mono">
+                        {result.container.name}
+                      </span>
+                    </div>
+                    <div className="flex items-center justify-between">
+                      <span className="text-muted-foreground">Port</span>
+                      <span className="font-mono">
+                        {result.container.host_port}
+                      </span>
+                    </div>
+                    <div className="flex items-center justify-between gap-2">
+                      <span className="text-muted-foreground">URL</span>
+                      <div className="flex items-center gap-1">
+                        <span className="font-mono text-xs truncate max-w-[250px]">
+                          {result.connection_url}
+                        </span>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-6 w-6 p-0"
+                          onClick={() => {
+                            navigator.clipboard.writeText(
+                              result.connection_url
+                            );
+                            toast.success("URL copied");
+                          }}
+                        >
+                          <Copy className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {logSection}
+
+            <DialogFooter>
+              {error ? (
+                <>
+                  <Button
+                    variant="outline"
+                    onClick={() => onOpenChange(false)}
+                  >
+                    Close
+                  </Button>
+                  <Button
+                    onClick={() => setStep("config")}
+                  >
+                    Retry
+                  </Button>
+                </>
+              ) : (
+                <>
+                  <Button
+                    variant="outline"
+                    onClick={() => onOpenChange(false)}
+                  >
+                    Close
+                  </Button>
+                  {onConnect && result && (
+                    <Button onClick={handleConnect}>Connect</Button>
+                  )}
+                </>
+              )}
+            </DialogFooter>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

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>
+  );
+}

src/components/management/AdminPanel.tsx

@@ -23,6 +23,7 @@ import {
   Activity,
   Loader2,
 } from "lucide-react";
+import { DockerContainersList } from "@/components/docker/DockerContainersList";
 import type { Tab, RoleInfo } from "@/types";
 
 export function AdminPanel() {
@@ -72,6 +73,7 @@ export function AdminPanel() {
           addTab(tab);
         }}
       />
+      <DockerContainersList />
     </div>
   );
 }

src/components/schema/SchemaTree.tsx

@@ -31,6 +31,7 @@ import {
   ContextMenuTrigger,
 } from "@/components/ui/context-menu";
 import { GrantRevokeDialog } from "@/components/management/GrantRevokeDialog";
+import { CloneDatabaseDialog } from "@/components/docker/CloneDatabaseDialog";
 import type { Tab, SchemaObject } from "@/types";
 
 function formatSize(bytes: number): string {
@@ -65,6 +66,7 @@ export function SchemaTree() {
   const { data: databases } = useDatabases(activeConnectionId);
   const { data: connections } = useConnections();
   const switchDbMutation = useSwitchDatabase();
+  const [cloneTarget, setCloneTarget] = useState<string | null>(null);
 
   if (!activeConnectionId) {
     return (
@@ -112,6 +114,7 @@ export function SchemaTree() {
           connectionId={activeConnectionId}
           onSwitch={() => handleSwitchDb(db)}
           isSwitching={switchDbMutation.isPending}
+          onCloneToDocker={(dbName) => setCloneTarget(dbName)}
           onOpenTable={(schema, table) => {
             const tab: Tab = {
               id: crypto.randomUUID(),
@@ -149,6 +152,12 @@ export function SchemaTree() {
           }}
         />
       ))}
+      <CloneDatabaseDialog
+        open={cloneTarget !== null}
+        onOpenChange={(open) => { if (!open) setCloneTarget(null); }}
+        connectionId={activeConnectionId}
+        database={cloneTarget ?? ""}
+      />
     </div>
   );
 }
@@ -159,6 +168,7 @@ function DatabaseNode({
   connectionId,
   onSwitch,
   isSwitching,
+  onCloneToDocker,
   onOpenTable,
   onViewStructure,
   onViewErd,
@@ -168,6 +178,7 @@ function DatabaseNode({
   connectionId: string;
   onSwitch: () => void;
   isSwitching: boolean;
+  onCloneToDocker: (dbName: string) => void;
   onOpenTable: (schema: string, table: string) => void;
   onViewStructure: (schema: string, table: string) => void;
   onViewErd: (schema: string) => void;
@@ -231,6 +242,9 @@ function DatabaseNode({
           >
             Properties
           </ContextMenuItem>
+          <ContextMenuItem onClick={() => onCloneToDocker(name)}>
+            Clone to Docker
+          </ContextMenuItem>
           <ContextMenuSeparator />
           <ContextMenuItem
             disabled={isActive || isReadOnly}

src/hooks/use-docker.ts

@@ -0,0 +1,111 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  checkDocker,
+  listTuskContainers,
+  cloneToDocker,
+  startContainer,
+  stopContainer,
+  removeContainer,
+  onCloneProgress,
+} from "@/lib/tauri";
+import type { CloneToDockerParams, CloneProgress, CloneResult } from "@/types";
+
+export function useDockerStatus() {
+  return useQuery({
+    queryKey: ["docker-status"],
+    queryFn: checkDocker,
+    staleTime: 30_000,
+  });
+}
+
+export function useTuskContainers() {
+  return useQuery({
+    queryKey: ["tusk-containers"],
+    queryFn: listTuskContainers,
+    refetchInterval: 10_000,
+  });
+}
+
+export function useCloneToDocker() {
+  const [progress, setProgress] = useState<CloneProgress | null>(null);
+  const cloneIdRef = useRef<string>("");
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: ({
+      params,
+      cloneId,
+    }: {
+      params: CloneToDockerParams;
+      cloneId: string;
+    }) => {
+      cloneIdRef.current = cloneId;
+      setProgress(null);
+      return cloneToDocker(params, cloneId);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["connections"] });
+      queryClient.invalidateQueries({ queryKey: ["tusk-containers"] });
+    },
+  });
+
+  useEffect(() => {
+    const unlistenPromise = onCloneProgress((p) => {
+      if (p.clone_id === cloneIdRef.current) {
+        setProgress(p);
+      }
+    });
+    return () => {
+      unlistenPromise.then((unlisten) => unlisten());
+    };
+  }, []);
+
+  const mutationRef = useRef(mutation);
+  mutationRef.current = mutation;
+
+  const reset = useCallback(() => {
+    mutationRef.current.reset();
+    setProgress(null);
+    cloneIdRef.current = "";
+  }, []);
+
+  return {
+    clone: mutation.mutate,
+    result: mutation.data as CloneResult | undefined,
+    error: mutation.error ? String(mutation.error) : null,
+    isCloning: mutation.isPending,
+    progress,
+    reset,
+  };
+}
+
+export function useStartContainer() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (name: string) => startContainer(name),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["tusk-containers"] });
+    },
+  });
+}
+
+export function useStopContainer() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (name: string) => stopContainer(name),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["tusk-containers"] });
+    },
+  });
+}
+
+export function useRemoveContainer() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (name: string) => removeContainer(name),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["tusk-containers"] });
+    },
+  });
+}

src/lib/tauri.ts

@@ -28,6 +28,11 @@ import type {
   OllamaModel,
   EntityLookupResult,
   LookupProgress,
+  DockerStatus,
+  CloneToDockerParams,
+  CloneProgress,
+  CloneResult,
+  TuskContainer,
 } from "@/types";
 
 // Connections
@@ -291,3 +296,27 @@ export const onLookupProgress = (
   callback: (p: LookupProgress) => void
 ): Promise<UnlistenFn> =>
   listen<LookupProgress>("lookup-progress", (e) => callback(e.payload));
+
+// Docker
+export const checkDocker = () =>
+  invoke<DockerStatus>("check_docker");
+
+export const listTuskContainers = () =>
+  invoke<TuskContainer[]>("list_tusk_containers");
+
+export const cloneToDocker = (params: CloneToDockerParams, cloneId: string) =>
+  invoke<CloneResult>("clone_to_docker", { params, cloneId });
+
+export const startContainer = (name: string) =>
+  invoke<void>("start_container", { name });
+
+export const stopContainer = (name: string) =>
+  invoke<void>("stop_container", { name });
+
+export const removeContainer = (name: string) =>
+  invoke<void>("remove_container", { name });
+
+export const onCloneProgress = (
+  callback: (p: CloneProgress) => void
+): Promise<UnlistenFn> =>
+  listen<CloneProgress>("clone-progress", (e) => callback(e.payload));

src/types/index.ts

@@ -323,6 +323,52 @@ export interface ErdData {
   relationships: ErdRelationship[];
 }
 
+// Docker
+export interface DockerStatus {
+  installed: boolean;
+  daemon_running: boolean;
+  version: string | null;
+  error: string | null;
+}
+
+export type CloneMode = "schema_only" | "full_clone" | "sample_data";
+
+export interface CloneToDockerParams {
+  source_connection_id: string;
+  source_database: string;
+  container_name: string;
+  pg_version: string;
+  host_port: number | null;
+  clone_mode: CloneMode;
+  sample_rows: number | null;
+  postgres_password: string | null;
+}
+
+export interface CloneProgress {
+  clone_id: string;
+  stage: string;
+  percent: number;
+  message: string;
+  detail: string | null;
+}
+
+export interface TuskContainer {
+  container_id: string;
+  name: string;
+  status: string;
+  host_port: number;
+  pg_version: string;
+  source_database: string | null;
+  source_connection: string | null;
+  created_at: string | null;
+}
+
+export interface CloneResult {
+  container: TuskContainer;
+  connection_id: string;
+  connection_url: string;
+}
+
 export type TabType = "query" | "table" | "structure" | "roles" | "sessions" | "lookup" | "erd";
 
 export interface Tab {