feat(sql-file): show byte-based import progress

Closes #9440

apps/desktop/src/components/export/ExportProgressPopover.vue

@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button";
 import { Loader2, Check, CheckCircle2, XCircle, AlertCircle, X, FileDown, DatabaseBackup, FileCode2, ArrowRightLeft, Layers3, GitCompareArrows, ChevronRight, FolderOpen, Copy } from "@lucide/vue";
 import { formatDataTransferDuration, useExportTracker, type ExportTask } from "@/composables/useExportTracker";
 import { dataTransferFailureCopyText, sqlFileFailureCopyText } from "@/components/export/failureDetailCopyText";
+import SqlFileProgressIndicator from "@/components/sql-file/SqlFileProgressIndicator.vue";
 import { translateBackendError } from "@/i18n/backend-errors";
 import { useToast } from "@/composables/useToast";
 import { isTauriRuntime } from "@/lib/backend/tauriRuntime";
@@ -65,12 +66,6 @@ const progressValue = (task: ExportTask) => {
     if (!task.totalObjects || task.totalObjects <= 0) return 0;
     return Math.min(100, Math.round(((task.objectIndex ?? 0) / task.totalObjects) * 100));
   }
-  if (task.kind === "sql-file") {
-    const total = task.totalRows ?? task.statementIndex ?? 0;
-    if (task.status === "Done") return 100;
-    if (total <= 0) return 0;
-    return Math.min(95, Math.round((task.rowsExported / total) * 100));
-  }
   if (task.kind === "data-transfer") {
     if (!task.totalTables || task.totalTables <= 0) return 0;
     if (task.status === "Done") return 100;
@@ -358,7 +353,8 @@ function openTask(task: ExportTask): void {
             </div>
 
             <!-- Progress bar -->
-            <div v-if="isActive(task.status)" class="w-full bg-muted rounded-full h-1.5 overflow-hidden">
+            <SqlFileProgressIndicator v-if="task.kind === 'sql-file'" :status="task.status" :bytes-read="task.bytesRead" :total-bytes="task.totalBytes" :phase="task.sqlFilePhase" />
+            <div v-else-if="isActive(task.status)" class="w-full bg-muted rounded-full h-1.5 overflow-hidden">
               <div
                 v-if="
                   task.totalRows ||
@@ -384,6 +380,7 @@ function openTask(task: ExportTask): void {
 
             <div class="min-w-0 text-muted-foreground">
               <span class="break-words tabular-nums">{{ rowsText(task) }}</span>
+              <span v-if="task.kind === 'sql-file' && task.elapsedMs !== undefined" class="ml-1 tabular-nums">{{ t("exportProgress.elapsed", { duration: formatDataTransferDuration(task.elapsedMs) }) }}</span>
               <span v-if="task.kind !== 'data-transfer' && task.startedAt !== undefined" class="ml-1 tabular-nums">{{ elapsedText(task) }}</span>
               <span v-if="taskStatusText(task)" class="ml-1 font-medium text-primary">{{ taskStatusText(task) }}</span>
               <span v-if="hasUnlistedTaskError(task)" class="mt-1 block whitespace-normal break-words text-destructive" :title="translateBackendError(t, task.errorMessage!)">

apps/desktop/src/components/export/__tests__/ExportProgressPopover.spec.ts

@@ -94,6 +94,61 @@ describe("failure detail copy text", () => {
   });
 });
 
+describe("SQL file byte progress", () => {
+  it("keeps legacy progress indeterminate instead of using successful statements as the total", async () => {
+    const tracker = useExportTracker();
+    const task = tracker.addSqlFileTask("legacy-sql-progress", "large.sql", "/tmp/large.sql");
+    tracker.updateSqlFileTask(task.exportId, {
+      executionId: task.exportId,
+      status: "running",
+      statementIndex: 772205,
+      successCount: 772205,
+      failureCount: 0,
+      affectedRows: 0,
+      elapsedMs: 1000,
+      statementSummary: "INSERT INTO users VALUES (1)",
+    });
+    await mountPopover();
+    expect(document.querySelector('[data-testid="sql-file-progress"] [role="progressbar"]')?.hasAttribute("aria-valuenow")).toBe(false);
+    expect(task.totalRows).toBeNull();
+  });
+
+  it.each(["done", "error", "cancelled"] as const)("shows byte progress and preserves it on %s", async (status) => {
+    const tracker = useExportTracker();
+    const task = tracker.addSqlFileTask(`byte-progress-${status}`, "large.sql", "/tmp/large.sql");
+    const progress = {
+      executionId: task.exportId,
+      status: "running" as const,
+      statementIndex: 772205,
+      successCount: 772205,
+      failureCount: 0,
+      affectedRows: 0,
+      elapsedMs: 1000,
+      statementSummary: "INSERT INTO users VALUES (1)",
+      bytesRead: 1024,
+      totalBytes: 4096,
+      phase: "executing" as const,
+    };
+    tracker.updateSqlFileTask(task.exportId, progress);
+    await mountPopover();
+    const indicator = document.querySelector('[data-testid="sql-file-progress"]')!;
+    expect(indicator.textContent).toContain("Executing SQL");
+    expect(indicator.textContent).toContain("Read 1.0 KB / 4.0 KB");
+    expect(indicator.querySelector('[role="progressbar"]')?.getAttribute("aria-valuenow")).toBe("25");
+
+    tracker.updateSqlFileTask(task.exportId, { ...progress, status: "statementDone", fileIndex: 1, statementIndex: 2, successCount: 2, bytesRead: 2048 });
+    await nextTick();
+    expect(indicator.querySelector('[role="progressbar"]')?.getAttribute("aria-valuenow")).toBe("50");
+
+    tracker.updateSqlFileTask(task.exportId, { ...progress, status, bytesRead: undefined, totalBytes: undefined, phase: undefined });
+    await nextTick();
+    expect(indicator.querySelector('[role="progressbar"]')?.getAttribute("aria-valuenow")).toBe(status === "done" ? "100" : "50");
+    expect(task.bytesRead).toBe(2048);
+    expect(task.totalBytes).toBe(4096);
+    expect(task.elapsedMs).toBe(1000);
+  });
+});
+
 describe("ExportProgressPopover task duration", () => {
   it("distinguishes manual exports from scheduled backups and uses a compact failure dot", async () => {
     const tracker = useExportTracker();

apps/desktop/src/components/sql-file/SqlFileExecutionDialog.retry.spec.ts

@@ -223,6 +223,21 @@ afterEach(() => {
 });
 
 describe("SqlFileExecutionDialog retries", () => {
+  it("shows byte-based progress while SQL executes and only completes on a terminal event", async () => {
+    await mountReadyDialog();
+    const executionGate = deferred();
+    mocks.executeSqlFiles.mockImplementationOnce(async (request: { executionId: string }) => {
+      mocks.progressHandler?.(progress(request.executionId, "running", { statementIndex: 500, successCount: 499, bytesRead: 1024, totalBytes: 4096, phase: "executing" }));
+      await executionGate.promise;
+      mocks.progressHandler?.(progress(request.executionId, "done", { bytesRead: 4096, totalBytes: 4096 }));
+    });
+    findButton("sqlFile.execute").click();
+    await vi.waitFor(() => expect(root!.querySelector('[role="progressbar"]')?.getAttribute("aria-valuenow")).toBe("25"));
+    expect(root!.textContent).toContain("sqlFile.progressPhase.executing");
+    executionGate.resolve();
+    await vi.waitFor(() => expect(root!.querySelector('[role="progressbar"]')?.getAttribute("aria-valuenow")).toBe("100"));
+  });
+
   it("does not auto-select the first connection for an unassociated external file", async () => {
     root = document.createElement("div");
     document.body.append(root);

apps/desktop/src/components/sql-file/SqlFileExecutionDialog.vue

@@ -21,6 +21,7 @@ import { fetchSqlFileTargetOptions } from "@/composables/useDatabaseOptions";
 import { requiresSqlFileTargetDatabaseSelection, supportsConnectionLevelDatabaseBootstrap } from "@/lib/connection/connectionLevelDatabaseBootstrap";
 import { cancelSqlFileExecution, executeSqlFiles, inspectSqlFileTables, listenSqlFileProgress, previewSqlFile, type SqlFilePreview, type SqlFileProgress, type SqlFileStatus, type SqlFileTable } from "@/lib/backend/api";
 import { buildDisplayFileNames, tooltipText as computeTooltipText } from "./sqlFilePreviewLabel";
+import SqlFileProgressIndicator from "./SqlFileProgressIndicator.vue";
 import { useExportTracker, type ExportTask } from "@/composables/useExportTracker";
 import { translateBackendError } from "@/i18n/backend-errors";
 import { Check, CheckSquare, ChevronRight, FileCode, FolderOpen, Loader2, Play, Square, X } from "@lucide/vue";
@@ -222,14 +223,6 @@ const statusIcon = computed(() => {
   return FileCode;
 });
 
-const progressPercent = computed(() => {
-  if (!progress.value) return 0;
-  if (terminalStatus.value === "done") return 100;
-  const attempted = progress.value.successCount + progress.value.failureCount;
-  const current = Math.max(progress.value.statementIndex, attempted);
-  if (current <= 0) return running.value ? 8 : 0;
-  return Math.min(95, Math.max(8, Math.round((attempted / current) * 100)));
-});
 const sqlFileFailures = computed(() => activeExecutionTask.value?.sqlFileFailures ?? []);
 const sqlFileFailureCount = computed(() => sqlFileFailures.value.length + (activeExecutionTask.value?.sqlFileFailuresOmitted ?? 0));
 const unlistedTerminalError = computed(() => {
@@ -826,9 +819,7 @@ watch(
             </span>
           </div>
 
-          <div class="w-full bg-muted rounded-full h-2 overflow-hidden">
-            <div class="h-full rounded-full transition-[width] duration-300" :class="terminalStatus === 'error' ? 'bg-destructive' : terminalStatus === 'cancelled' ? 'bg-yellow-500' : 'bg-primary'" :style="{ width: `${progressPercent}%` }" />
-          </div>
+          <SqlFileProgressIndicator :status="terminalStatus" :bytes-read="progress?.bytesRead" :total-bytes="progress?.totalBytes" :phase="progress?.phase" />
 
           <div v-if="running && previews.length > 1 && currentFileIndex >= 0" class="flex items-center gap-1.5 text-xs text-muted-foreground">
             <FileCode class="w-3.5 h-3.5 shrink-0" />

apps/desktop/src/components/sql-file/SqlFileProgressIndicator.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import type { SqlFileProgress } from "@/lib/backend/tauri";
+import { formatSqlFileBytes, sqlFileProgressPercent } from "@/lib/sql/sqlFileProgress";
+
+const props = defineProps<{
+  status: string;
+  bytesRead?: number;
+  totalBytes?: number;
+  phase?: SqlFileProgress["phase"];
+}>();
+const { t } = useI18n();
+const normalizedStatus = computed(() => props.status.toLowerCase());
+const active = computed(() => !["done", "error", "cancelled", "idle"].includes(normalizedStatus.value));
+const percent = computed(() => sqlFileProgressPercent(props.status, props.bytesRead, props.totalBytes));
+const phaseLabel = computed(() => {
+  if (!active.value) return t("sqlFile.byteProgress");
+  const phase = props.phase ?? (normalizedStatus.value === "started" ? "preparing" : "executing");
+  return t(`sqlFile.progressPhase.${phase}`);
+});
+const byteLabel = computed(() => {
+  if (props.bytesRead === undefined || !Number.isFinite(props.bytesRead)) return "";
+  const read = formatSqlFileBytes(props.bytesRead);
+  return props.totalBytes === undefined || !Number.isFinite(props.totalBytes) ? t("sqlFile.bytesRead", { read }) : t("sqlFile.bytesReadOfTotal", { read, total: formatSqlFileBytes(props.totalBytes) });
+});
+</script>
+
+<template>
+  <div class="min-w-0 space-y-1.5 text-xs" data-testid="sql-file-progress" :title="t('sqlFile.byteProgressHint')">
+    <div class="flex items-center justify-between gap-2 text-muted-foreground">
+      <span class="truncate">{{ phaseLabel }}</span>
+      <span v-if="percent !== null" class="shrink-0 tabular-nums">{{ percent }}%</span>
+    </div>
+    <div role="progressbar" :aria-label="t('sqlFile.byteProgress')" :aria-valuenow="percent ?? undefined" :aria-valuemin="0" :aria-valuemax="100" class="h-1.5 w-full overflow-hidden rounded-full bg-muted">
+      <div v-if="percent === null && active" class="sql-file-progress-indeterminate h-full rounded-full bg-primary" />
+      <div v-else class="h-full rounded-full transition-[width] duration-300" :class="normalizedStatus === 'error' ? 'bg-destructive' : normalizedStatus === 'cancelled' ? 'bg-yellow-500' : normalizedStatus === 'done' ? 'bg-green-500' : 'bg-primary'" :style="{ width: `${percent ?? 0}%` }" />
+    </div>
+    <div v-if="byteLabel" class="break-words text-muted-foreground tabular-nums">{{ byteLabel }}</div>
+  </div>
+</template>
+
+<style scoped>
+.sql-file-progress-indeterminate {
+  width: 40%;
+  animation: sql-file-progress-slide 1.15s ease-in-out infinite;
+}
+
+@keyframes sql-file-progress-slide {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(250%);
+  }
+}
+</style>