[Init] Initial commit - NetMesh terminal manager

components/GlobalSftpTransferCenter.tsx

@@ -0,0 +1,954 @@
+import {
+  AlertCircle,
+  AlertTriangle,
+  ArrowDownToLine,
+  ArrowDownUp,
+  ArrowUpFromLine,
+  ChevronDown,
+  ChevronUp,
+  ClipboardCopy,
+  FolderOpen,
+  FolderUp,
+  Loader2,
+  Pause,
+  Play,
+  RefreshCw,
+  Trash2,
+  X,
+} from "lucide-react";
+import React, { useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+
+import { useI18n } from "../application/i18n/I18nProvider";
+import {
+  sftpTransferCenterStore,
+  useSftpTransferCenterBadge,
+  useSftpTransferResuming,
+  type SftpTransferCenterSnapshot,
+} from "../application/state/sftpTransferCenterStore";
+import { transferRuntime } from "../application/state/sftp/transferRuntime";
+import { useGlobalSftpTransferActions } from "../application/state/useGlobalSftpTransferActions";
+export { getGlobalTransferBatchEligibility } from "../domain/sftpTransferActions";
+import type { FileConflictAction, TransferTask } from "../domain/models";
+import { canReplaceSftpConflict } from "../domain/sftpConflict";
+import { estimateTransferEtaSeconds, formatFileSize, formatTransferEta } from "../application/state/sftp/utils";
+import { cn } from "../lib/utils";
+import { Button } from "./ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+
+/** Stable empty snapshot while the popover is closed — progress ticks must not
+ * re-render TopTabs just to update hidden list rows. */
+const CLOSED_TRANSFER_CENTER_SNAPSHOT: SftpTransferCenterSnapshot = {
+  tasks: [],
+  activeCount: 0,
+  queuedCount: 0,
+  attentionCount: 0,
+};
+
+/**
+ * Full transfer-center list only while the popover is open. When closed, the
+ * getter always returns the same CLOSED snapshot so progress store notifies do
+ * not re-render this TopTabs child (badge uses a separate stable subscription).
+ */
+function useSftpTransferCenterWhenOpen(open: boolean): SftpTransferCenterSnapshot {
+  const openRef = useRef(open);
+  openRef.current = open;
+  return useSyncExternalStore(
+    (onStoreChange) => {
+      // Lifecycle + progress: when the popover is open the list must move with
+      // bytes; when closed getSnapshot returns a stable CLOSED constant so
+      // progress ticks are cheap no-ops for this subscriber.
+      const unsubLifecycle = sftpTransferCenterStore.subscribe(onStoreChange);
+      const unsubProgress = sftpTransferCenterStore.subscribeProgress(onStoreChange);
+      return () => {
+        unsubLifecycle();
+        unsubProgress();
+      };
+    },
+    () => (
+      openRef.current
+        ? sftpTransferCenterStore.getSnapshot()
+        : CLOSED_TRANSFER_CENTER_SNAPSHOT
+    ),
+    () => CLOSED_TRANSFER_CENTER_SNAPSHOT,
+  );
+}
+
+export type GlobalTransferBucket = "all" | "active" | "queued" | "paused" | "attention" | "completed";
+
+export function getGlobalTransferBucket(task: Pick<TransferTask, "status" | "reconnectRequired">): GlobalTransferBucket {
+  // Reconnect/resume preparation should stay visible with the unfinished work.
+  if (task.status === "pending" && task.reconnectRequired) return "attention";
+  if (task.status === "transferring" || task.status === "pausing") return "active";
+  if (task.status === "pending" || task.status === "queued") return "queued";
+  if (task.status === "paused") return "paused";
+  if (task.status === "interrupted" || task.status === "attention" || task.status === "failed") return "attention";
+  return "completed";
+}
+
+export function getGlobalTransferBadge(tasks: readonly TransferTask[]) {
+  const topLevelTasks = tasks.filter((task) => !task.parentTaskId);
+  return {
+    count: topLevelTasks.filter((task) =>
+      ["pending", "queued", "transferring", "pausing", "paused", "interrupted"].includes(task.status)
+    ).length,
+    // Interrupted after restart and conflict attention both need the user.
+    hasAttention: topLevelTasks.some((task) =>
+      task.status === "attention"
+      || task.status === "failed"
+      || task.status === "interrupted"
+      || task.reconnectRequired === true
+    ),
+  };
+}
+
+export function splitBackgroundTransfers(tasks: readonly TransferTask[]) {
+  const collapsed = tasks.filter((task) => task.background && task.status === "completed");
+  const collapsedIds = new Set(collapsed.map((task) => task.id));
+  return {
+    visible: tasks.filter((task) => !collapsedIds.has(task.id)),
+    collapsed,
+  };
+}
+
+export function getGlobalTransferStatusOverride(task: Pick<TransferTask, "error" | "pauseUnavailableReason">) {
+  return task.error || task.pauseUnavailableReason;
+}
+
+export function getGlobalConflictActionPresentation(
+  action: FileConflictAction,
+  destructiveDirectoryReplace: boolean,
+) {
+  const safeMerge = destructiveDirectoryReplace && action === "merge";
+  const destructiveReplace = destructiveDirectoryReplace && action === "replace";
+  return {
+    variant: safeMerge || (!destructiveDirectoryReplace && action === "replace") ? "default" : "outline",
+    destructiveReplace,
+  } as const;
+}
+
+const BUCKETS: readonly GlobalTransferBucket[] = ["all", "active", "queued", "paused", "attention", "completed"];
+
+export function getTasksForGlobalTransferBucket(
+  tasks: readonly TransferTask[],
+  bucket: GlobalTransferBucket,
+): TransferTask[] {
+  return tasks.filter((task) => !task.parentTaskId && (bucket === "all" || getGlobalTransferBucket(task) === bucket));
+}
+
+/** Folder parent rows use file-count progress (same model as the SFTP side queue). */
+export function isDirectoryParentTask(
+  task: Pick<TransferTask, "isDirectory" | "parentTaskId" | "progressMode">,
+): boolean {
+  if (!task.isDirectory || task.parentTaskId) return false;
+  // Explicit bytes mode would be aggregate size; default folder uploads use files.
+  return task.progressMode !== "bytes";
+}
+
+export function listChildTasksForParent(
+  tasks: readonly TransferTask[],
+  parentId: string,
+): TransferTask[] {
+  return tasks
+    .filter((task) => task.parentTaskId === parentId && task.status !== "cancelled")
+    .sort((a, b) => a.startTime - b.startTime);
+}
+
+/**
+ * Prefer live children, then queued — for the collapsed "current file" summary.
+ * Callers must not use this for paused/interrupted parents (those hide the row).
+ */
+export function pickActiveChildSummaries(
+  children: readonly TransferTask[],
+  limit = 2,
+): TransferTask[] {
+  const live = children.filter((task) => task.status === "transferring" || task.status === "pausing");
+  if (live.length > 0) return live.slice(0, limit);
+  const waiting = children.filter((task) => task.status === "pending" || task.status === "queued");
+  if (waiting.length > 0) return waiting.slice(0, limit);
+  return [];
+}
+
+/** Collapsed mini-rows only while the folder is actively moving or soft-draining. */
+export function shouldShowCollapsedActiveChildren(
+  parentStatus: TransferTask["status"],
+): boolean {
+  return parentStatus === "transferring" || parentStatus === "pausing";
+}
+
+export function getGlobalTransferProgressPercent(
+  task: Pick<TransferTask, "status" | "totalBytes" | "transferredBytes">,
+): number {
+  if (task.status === "completed") return 100;
+  if (task.totalBytes <= 0) return 0;
+  return Math.max(0, Math.min(100, (task.transferredBytes / task.totalBytes) * 100));
+}
+
+export type GlobalTransferProgressDisplay = {
+  percent: number;
+  /** Right-side progress label (file count or bytes). */
+  detail: string;
+  /** True when the bar should pulse (total still unknown). */
+  indeterminate: boolean;
+};
+
+/**
+ * Build progress labels for a top-level row. Directory parents use file counts
+ * so we never show "1 Bytes / 12 Bytes" for n/m files.
+ *
+ * Folder walks interleave discovery with transfer: totalBytes is "found so far",
+ * not a fixed grand total. Active rows use progressive copy so the UI does not
+ * look like a lying overall percentage.
+ */
+export function buildGlobalTransferProgressDisplay(
+  task: Pick<TransferTask, "status" | "isDirectory" | "parentTaskId" | "progressMode" | "totalBytes" | "transferredBytes" | "speed" | "phase">,
+  t: (key: string, params?: Record<string, string | number>) => string,
+): GlobalTransferProgressDisplay {
+  const isDirParent = isDirectoryParentTask(task);
+  const percent = getGlobalTransferProgressPercent(task);
+  const hasTotal = task.totalBytes > 0;
+  const discovered = Math.max(task.totalBytes, task.transferredBytes);
+
+  if (isDirParent) {
+    const isActive = task.status === "transferring"
+      || task.status === "pausing"
+      || task.status === "queued"
+      || task.status === "pending";
+    // Still discovering, or no completed files yet — pulse rather than freeze a fake %.
+    const indeterminate = isActive && (
+      task.phase === "scanning"
+      || !hasTotal
+      || task.transferredBytes <= 0
+    );
+    let detail = "";
+    if (isActive) {
+      if (discovered > 0) {
+        detail = t("sftp.transfers.filesDiscoveredProgress", {
+          completed: task.transferredBytes,
+          discovered,
+        });
+      }
+    } else if (task.status === "completed" && hasTotal) {
+      detail = t("sftp.transfers.filesCount", { count: task.totalBytes });
+    } else if (discovered > 0) {
+      detail = t("sftp.transfers.filesDiscoveredProgress", {
+        completed: task.transferredBytes,
+        discovered,
+      });
+    }
+    // Soft percent of files found so far (discovered may still grow).
+    const softPercent = discovered > 0
+      ? Math.min(100, (task.transferredBytes / discovered) * 100)
+      : 0;
+    return {
+      percent: task.status === "completed" ? 100 : softPercent,
+      detail,
+      indeterminate,
+    };
+  }
+
+  const detailParts: string[] = [];
+  if (hasTotal) {
+    detailParts.push(`${formatFileSize(task.transferredBytes)} / ${formatFileSize(task.totalBytes)}`);
+  } else if (task.transferredBytes > 0) {
+    detailParts.push(formatFileSize(task.transferredBytes));
+  }
+  if (task.status === "transferring" && task.speed > 0) {
+    detailParts.push(`${formatFileSize(task.speed)}/s`);
+  }
+  if (task.status === "transferring" && task.speed > 0 && hasTotal) {
+    const eta = formatTransferEta(estimateTransferEtaSeconds(task.totalBytes - task.transferredBytes, task.speed));
+    if (eta) detailParts.push(eta);
+  }
+  return {
+    percent,
+    detail: detailParts.join(" · "),
+    indeterminate: task.status === "transferring" && !hasTotal,
+  };
+}
+
+function formatChildByteProgress(task: Pick<TransferTask, "totalBytes" | "transferredBytes" | "status">): string {
+  if (task.totalBytes > 0) {
+    return `${formatFileSize(task.transferredBytes)} / ${formatFileSize(task.totalBytes)}`;
+  }
+  if (task.transferredBytes > 0) return formatFileSize(task.transferredBytes);
+  return "";
+}
+
+function statusLabelKey(status: TransferTask["status"]): string {
+  return `sftp.transferCenter.status.${status}`;
+}
+
+function TransferAction({ label, onClick, children, destructive = false }: {
+  label: string;
+  onClick: () => void;
+  children: React.ReactNode;
+  destructive?: boolean;
+}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className={cn("h-8 w-8", destructive && "text-destructive hover:text-destructive")}
+          aria-label={label}
+          onClick={(event) => {
+            event.stopPropagation();
+            onClick();
+          }}
+        >
+          {children}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>{label}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+/** Truncated label with hover tooltip for the full text (paths, names, errors). */
+function TruncatedTextWithTooltip({
+  text,
+  tooltip,
+  className,
+  as: Tag = "span",
+}: {
+  text: string;
+  /** Defaults to `text`. Use when the visible label differs from the full string. */
+  tooltip?: string;
+  className?: string;
+  as?: "span" | "div";
+}) {
+  if (!text) return null;
+  const tip = tooltip || text;
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Tag className={cn("min-w-0 truncate", className)}>{text}</Tag>
+      </TooltipTrigger>
+      <TooltipContent side="top" align="start" className="max-w-sm break-all">
+        {tip}
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+function formatTransferPathLine(task: Pick<TransferTask, "sourcePath" | "targetPath" | "sourceHostLabel" | "targetHostLabel">): string {
+  const source = `${task.sourceHostLabel ? `${task.sourceHostLabel}: ` : ""}${task.sourcePath}`;
+  const target = `${task.targetHostLabel ? `${task.targetHostLabel}: ` : ""}${task.targetPath}`;
+  return `${source} → ${target}`;
+}
+
+function TransferRow({
+  task,
+  childTasks = [],
+  expanded,
+  onToggleExpanded,
+  isLast,
+}: {
+  task: TransferTask;
+  childTasks?: readonly TransferTask[];
+  expanded: boolean;
+  onToggleExpanded: () => void;
+  isLast: boolean;
+}) {
+  const { t } = useI18n();
+  const folderReplaceWarningId = React.useId();
+  // Optimistic spinner from click until store status moves off paused/interrupted.
+  const isDirParent = isDirectoryParentTask(task);
+  const showCollapsedChildren = isDirParent && shouldShowCollapsedActiveChildren(task.status);
+  const activeChildren = useMemo(
+    () => (showCollapsedChildren ? pickActiveChildSummaries(childTasks, 2) : []),
+    [childTasks, showCollapsedChildren],
+  );
+  // Soft-drain still completes ranges / children after Pause. Snapshot the
+  // visible parent bar + child mini-rows on first "pausing" paint so the row
+  // does not twitch (file-count bumps, child list swaps, width animation).
+  // When the parent reaches "paused", hide the mini-rows entirely — partial
+  // children flipping paused↔transferring used to blink the report line.
+  const pausingSnapshotRef = useRef<{
+    task: TransferTask;
+    children: TransferTask[];
+  } | null>(null);
+  if (task.status === "pausing") {
+    if (!pausingSnapshotRef.current) {
+      pausingSnapshotRef.current = {
+        task: { ...task },
+        children: activeChildren.map((child) => ({ ...child })),
+      };
+    }
+  } else if (pausingSnapshotRef.current) {
+    pausingSnapshotRef.current = null;
+  }
+  const displayTask = task.status === "pausing" && pausingSnapshotRef.current
+    ? { ...pausingSnapshotRef.current.task, status: "pausing" as const, speed: 0, phase: undefined }
+    : task;
+  const displayChildren = !showCollapsedChildren
+    ? []
+    : (task.status === "pausing" && pausingSnapshotRef.current
+      ? pausingSnapshotRef.current.children
+      : activeChildren);
+  const progress = buildGlobalTransferProgressDisplay(displayTask, t);
+  const canToggleChildren = isDirParent && childTasks.length > 0;
+  const canControl = sftpTransferCenterStore.canControl(task.id);
+  // Keep the play button as a spinner for the whole reconnect window, not only
+  // the brief "pending" status before a dedicated session opens.
+  const storeResuming = task.reconnectRequired === true
+    && ["pending", "queued", "transferring"].includes(task.status)
+    && !task.error;
+  const sharedResuming = useSftpTransferResuming(task.id);
+  const isResuming = sharedResuming || storeResuming;
+  const canPause = task.resumable !== false && task.status === "transferring" && canControl && !isResuming;
+  // Orphaned tasks after app restart (interrupted / attention / paused without a
+  // live panel owner) must still expose resume/cancel from the global center.
+  // Conflict rows must use resolveConflict — Resume would overwrite blindly.
+  // Non-resumable attention rows (e.g. duplicate-destination refusals) are
+  // terminal: resuming them would start a second writer on the same path.
+  // Do not show Resume during soft-drain "pausing" — play + spinner together
+  // makes the row twitch as buttons appear/disappear mid-drain.
+  const canResume = !isResuming && !task.conflict && (
+    ["paused", "interrupted"].includes(task.status)
+    || (task.status === "attention" && task.resumable !== false)
+    || (task.status === "failed" && task.resumable !== false && (task.checkpointBytes ?? 0) > 0)
+  ) && canControl;
+  const isPausing = task.status === "pausing";
+  const canCancel = ["pending", "queued", "transferring", "pausing", "paused", "interrupted", "attention"].includes(task.status) && canControl;
+  const canRetry = task.status === "failed" && task.retryable !== false && canControl;
+  const isTerminal = ["completed", "failed", "cancelled"].includes(task.status);
+  // Status line is for lifecycle/error only — not pause capability notes.
+  // "cannot be paused safely" used to render here during healthy progress and
+  // looked like a failure even while bytes were flowing.
+  const statusText = (() => {
+    const override = getGlobalTransferStatusOverride(task);
+    if (override) return override;
+    if (isResuming) return t("sftp.transferCenter.status.resuming");
+    // Lifecycle pause labels beat phase ("transferring") so pausing never reads
+    // as 传输中 while soft-drain finishes the current range.
+    if (task.status === "pausing" || task.status === "paused" || task.status === "interrupted") {
+      return t(statusLabelKey(task.status));
+    }
+    // Scanning runs as pending/transferring; never override terminal statuses
+    // (cancelled/failed/completed) that still carry a stale phase value.
+    if (
+      task.phase === "scanning"
+      && (task.status === "pending" || task.status === "queued" || task.status === "transferring")
+    ) {
+      return t("sftp.transferCenter.phase.scanning");
+    }
+    if (task.phase && task.status === "transferring") {
+      return t(`sftp.transferCenter.phase.${task.phase}`);
+    }
+    return t(statusLabelKey(task.status));
+  })();
+  const directionIcon = isDirParent
+    ? <FolderUp size={15} />
+    : task.direction === "download"
+      ? <ArrowDownToLine size={15} />
+      : <ArrowUpFromLine size={15} />;
+
+  const openTarget = (forResume = false) => {
+    window.dispatchEvent(new CustomEvent("netcatty:open-sftp-transfer-target", {
+      detail: { task, forResume },
+    }));
+  };
+  const resumeTask = () => {
+    // Dedicated resume opens vault sessions for local↔remote and SFTP↔SFTP.
+    // Only force-open the panel when the row still needs a live owner/adoption
+    // (e.g. conflict) — not on every remote-to-remote resume click.
+    if (task.conflict || (task.status === "attention" && !task.reconnectRequired && task.direction === "remote-to-remote")) {
+      openTarget(true);
+    }
+    // Single process-level resume (soft live walk / hard reconnect internal).
+    void transferRuntime.resume(task.id);
+  };
+
+  const barWidth = progress.indeterminate
+    ? "100%"
+    : `${displayTask.status === "completed" ? 100 : progress.percent}%`;
+
+  return (
+    <div
+      className={cn("border-border/40 px-3 py-2.5 hover:bg-muted/30", isLast ? "border-b-0" : "border-b")}
+      data-section="global-sftp-transfer-row"
+      data-transfer-status={task.status}
+      data-directory-parent={isDirParent ? "true" : undefined}
+    >
+      <div className="flex items-center gap-2">
+        <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded bg-muted text-muted-foreground">
+          {directionIcon}
+        </div>
+        <button type="button" className="min-w-0 flex-1 overflow-hidden text-left" onClick={() => openTarget()}>
+          <div className="flex min-w-0 items-center gap-1.5">
+            <TruncatedTextWithTooltip text={task.fileName} className="text-xs font-medium" />
+            {task.background && (
+              <span className="shrink-0 rounded bg-muted px-1 py-0.5 text-[9px] text-muted-foreground">
+                {t("sftp.transferCenter.background")}
+              </span>
+            )}
+          </div>
+          <TruncatedTextWithTooltip
+            as="div"
+            text={formatTransferPathLine(task)}
+            className="mt-0.5 text-[10px] text-muted-foreground"
+          />
+        </button>
+        <div className="flex shrink-0 items-center gap-0.5">
+          {canToggleChildren && (
+            <TransferAction
+              label={expanded ? t("sftp.transfers.collapseChildren") : t("sftp.transfers.expandChildren")}
+              onClick={onToggleExpanded}
+            >
+              {expanded ? <ChevronUp size={13} /> : <ChevronDown size={13} />}
+            </TransferAction>
+          )}
+          {isResuming && (
+            <div className="flex h-8 w-8 items-center justify-center" role="status" aria-label={t("sftp.transferCenter.status.resuming")}>
+              <Loader2 size={13} className="animate-spin text-primary" />
+            </div>
+          )}
+          {canPause && (
+            <TransferAction label={t("sftp.transferCenter.pause")} onClick={() => { void transferRuntime.pause(task.id); }}>
+              <Pause size={13} />
+            </TransferAction>
+          )}
+          {task.status === "pausing" && (
+            <div className="flex h-8 w-8 items-center justify-center" role="status" aria-label={t("sftp.transferCenter.status.pausing")}>
+              <Loader2 size={13} className="animate-spin text-amber-500" />
+            </div>
+          )}
+          {canResume && (
+            <TransferAction label={t("sftp.transferCenter.resume")} onClick={resumeTask}>
+              <Play size={13} />
+            </TransferAction>
+          )}
+          {task.status === "queued" && canControl && (
+            <TransferAction label={t("sftp.transferCenter.prioritize")} onClick={() => { void sftpTransferCenterStore.prioritize(task.id); }}>
+              <ArrowUpFromLine size={13} />
+            </TransferAction>
+          )}
+          {canRetry && (
+            <TransferAction label={t("sftp.transfers.retryAction")} onClick={() => { void sftpTransferCenterStore.retry(task.id); }}>
+              <RefreshCw size={13} />
+            </TransferAction>
+          )}
+          {isTerminal && (
+            <TransferAction label={t("sftp.transfers.dismissAction")} onClick={() => sftpTransferCenterStore.dismiss(task.id)}>
+              <Trash2 size={13} />
+            </TransferAction>
+          )}
+          {canCancel && (
+            <TransferAction destructive label={t("common.cancel")} onClick={() => { void transferRuntime.cancel(task.id); }}>
+              <X size={13} />
+            </TransferAction>
+          )}
+          <TransferAction label={t("sftp.transfers.copyTargetPath")} onClick={() => { void navigator.clipboard.writeText(task.targetPath); }}>
+            <ClipboardCopy size={13} />
+          </TransferAction>
+          <TransferAction label={t("sftp.transfers.openTargetFolder")} onClick={() => openTarget()}>
+            <FolderOpen size={13} />
+          </TransferAction>
+        </div>
+      </div>
+
+      <div className="mt-2 flex items-center gap-2">
+        <div
+          className="h-1.5 min-w-0 flex-1 overflow-hidden rounded-full bg-secondary"
+          role="progressbar"
+          aria-label={task.fileName}
+          aria-valuemin={0}
+          aria-valuemax={100}
+          aria-valuenow={progress.indeterminate ? undefined : Math.round(progress.percent)}
+        >
+          <div
+            className={cn(
+              "h-full rounded-full",
+              // Animate only while actively transferring — soft-drain width
+              // freezes still looked like a twitch with transition.
+              !isPausing && task.status !== "paused" && task.status !== "interrupted"
+                && "transition-[width] duration-200 ease-linear",
+              progress.indeterminate && "animate-pulse bg-primary/60",
+              !progress.indeterminate && (
+                task.status === "failed"
+                  ? "bg-destructive"
+                  : task.status === "paused" || task.status === "interrupted" || isPausing
+                    ? "bg-amber-500"
+                    : "bg-primary"
+              ),
+            )}
+            style={{ width: barWidth }}
+          />
+        </div>
+        <span className="w-12 shrink-0 text-right font-mono text-[10px] text-muted-foreground">
+          {progress.indeterminate ? "…" : displayTask.totalBytes > 0 || displayTask.status === "completed" ? `${progress.percent.toFixed(1)}%` : "—"}
+        </span>
+      </div>
+      <div className="mt-1 flex min-w-0 items-center justify-between gap-3 text-[10px] text-muted-foreground">
+        <TruncatedTextWithTooltip
+          text={statusText}
+          className={cn(
+            "min-w-0 flex-1",
+            (task.status === "failed" || task.status === "attention") && "text-destructive",
+          )}
+        />
+        <span className="min-w-0 shrink truncate text-right font-mono" title={progress.detail || undefined}>
+          {progress.detail}
+        </span>
+      </div>
+
+      {/* Collapsed: show currently transferring child file(s) without expanding the whole tree. */}
+      {isDirParent && !expanded && displayChildren.length > 0 && (
+        <div
+          className={cn(
+            "mt-1.5 space-y-1 border-l-2 pl-2",
+            isPausing || task.status === "paused" ? "border-amber-500/40" : "border-primary/30",
+          )}
+          data-section="global-sftp-transfer-active-children"
+        >
+          {displayChildren.map((child) => {
+            const childPercent = getGlobalTransferProgressPercent(child);
+            const childDetail = formatChildByteProgress(child);
+            const childFrozen = isPausing
+              || task.status === "paused"
+              || child.status === "pausing"
+              || child.status === "paused";
+            return (
+              <div key={child.id} className="min-w-0">
+                <div className="flex items-center justify-between gap-2 text-[10px] text-muted-foreground">
+                  <TruncatedTextWithTooltip text={child.fileName} className="flex-1 text-muted-foreground" />
+                  <span className="shrink-0 font-mono">
+                    {childDetail || (child.totalBytes > 0 ? `${childPercent.toFixed(0)}%` : t(statusLabelKey(child.status)))}
+                  </span>
+                </div>
+                {child.totalBytes > 0 && (
+                  <div className="mt-0.5 h-1 overflow-hidden rounded-full bg-secondary">
+                    <div
+                      className={cn(
+                        "h-full rounded-full",
+                        child.status === "completed"
+                          ? "bg-emerald-500/80"
+                          : childFrozen
+                            ? "bg-amber-500/80"
+                            : "bg-primary/80",
+                      )}
+                      style={{ width: `${child.status === "completed" ? 100 : childPercent}%` }}
+                    />
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {isDirParent && expanded && childTasks.length > 0 && (
+        <div
+          className="mt-2 max-h-48 space-y-1 overflow-y-auto border-t border-border/40 pt-2"
+          data-section="global-sftp-transfer-child-list"
+        >
+          {childTasks.map((child) => {
+            const childPercent = getGlobalTransferProgressPercent(child);
+            const childDetail = formatChildByteProgress(child);
+            return (
+              <div
+                key={child.id}
+                className="flex items-center gap-2 rounded px-1 py-1 text-[10px] hover:bg-muted/40"
+                data-transfer-status={child.status}
+              >
+                <TruncatedTextWithTooltip
+                  text={child.fileName}
+                  tooltip={child.targetPath || child.fileName}
+                  className="flex-1 text-muted-foreground"
+                />
+                <span className="shrink-0 font-mono text-muted-foreground">
+                  {childDetail
+                    || (child.totalBytes > 0 ? `${childPercent.toFixed(0)}%` : t(statusLabelKey(child.status)))}
+                </span>
+                {child.status === "transferring" && (
+                  <Loader2 size={10} className="shrink-0 animate-spin text-primary" />
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {task.status === "attention" && task.conflict && canControl && (() => {
+        const conflict = task.conflict!;
+        const canMerge = conflict.isDirectory && conflict.existingType === "directory";
+        const destructiveDirectoryReplace = canMerge;
+        const unresolvedFolderType = conflict.isDirectory && !conflict.existingType;
+        const canReplace = canReplaceSftpConflict(conflict.isDirectory, conflict.existingType);
+        const actions = [
+          "stop",
+          "skip",
+          "duplicate",
+          ...(canMerge ? (["merge"] as const) : []),
+          ...(canReplace ? (["replace"] as const) : []),
+        ] as const;
+        const applyAllActions = [
+          "skip",
+          "duplicate",
+          ...(canMerge ? (["merge"] as const) : []),
+          ...(canReplace ? (["replace"] as const) : []),
+        ] as const;
+        const renderConflictAction = (action: FileConflictAction, applyToAll = false) => {
+          const presentation = getGlobalConflictActionPresentation(action, destructiveDirectoryReplace);
+          return (
+            <Button
+              key={applyToAll ? `all-${action}` : action}
+              variant={presentation.variant}
+              size="sm"
+              className={cn(
+                "h-6 px-2 text-[10px]",
+                presentation.destructiveReplace
+                  && "border-destructive/50 text-destructive hover:bg-destructive/10 hover:text-destructive",
+              )}
+              aria-describedby={presentation.destructiveReplace ? folderReplaceWarningId : undefined}
+              onClick={() => { void sftpTransferCenterStore.resolveConflict(task.id, action, applyToAll); }}
+            >
+              {t(`sftp.conflict.action.${action}`)}
+              {applyToAll && <> · {t("sftp.transferCenter.applyAll")}</>}
+            </Button>
+          );
+        };
+        return (
+        <div className="mt-2 space-y-2">
+          {destructiveDirectoryReplace && (
+            <div
+              id={folderReplaceWarningId}
+              className="flex items-start gap-1.5 rounded border border-destructive/40 bg-destructive/10 px-2 py-1.5 text-[10px] leading-4"
+            >
+              <AlertTriangle size={12} className="mt-0.5 shrink-0 text-destructive" />
+              <p>
+                {t("sftp.conflict.folderMergeHint")}{" "}
+                <span className="font-medium text-destructive">
+                  {t("sftp.conflict.folderReplaceWarning")}
+                </span>
+              </p>
+            </div>
+          )}
+          {unresolvedFolderType && (
+            <div className="flex items-start gap-1.5 rounded border border-amber-500/40 bg-amber-500/10 px-2 py-1.5 text-[10px] leading-4">
+              <AlertTriangle size={12} className="mt-0.5 shrink-0 text-amber-600" />
+              <p>{t("sftp.conflict.folderUnknownDesc")}</p>
+            </div>
+          )}
+          <div className="flex flex-wrap justify-end gap-1">
+            {actions.map((action) => renderConflictAction(action))}
+            {(conflict.applyToAllCount ?? 0) > 1
+              && applyAllActions.map((action) => renderConflictAction(action, true))}
+          </div>
+        </div>
+        );
+      })()}
+    </div>
+  );
+}
+
+function TransferList({ tasks, childrenByParent, empty }: {
+  tasks: readonly TransferTask[];
+  childrenByParent: ReadonlyMap<string, TransferTask[]>;
+  empty: React.ReactNode;
+}) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  // Keep folder expansion when a row scrolls out of the mounted viewport.
+  const [expandedIds, setExpandedIds] = useState<ReadonlySet<string>>(() => new Set());
+  const virtual = tasks.length > 20;
+  const virtualizer = useVirtualizer({
+    count: tasks.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => 112,
+    getItemKey: (index) => tasks[index].id,
+    overscan: 4,
+    enabled: virtual,
+  });
+  const renderRow = (task: TransferTask, index: number) => (
+    <TransferRow
+      key={task.id}
+      task={task}
+      childTasks={childrenByParent.get(task.id) ?? []}
+      expanded={expandedIds.has(task.id)}
+      isLast={index === tasks.length - 1}
+      onToggleExpanded={() => setExpandedIds((previous) => {
+        const next = new Set(previous);
+        if (next.has(task.id)) next.delete(task.id);
+        else next.add(task.id);
+        return next;
+      })}
+    />
+  );
+  return (
+    <div ref={scrollRef} className="max-h-[460px] overflow-auto" data-section="global-sftp-transfer-list">
+      {tasks.length === 0 ? empty : !virtual ? tasks.map(renderRow) : (
+        <div className="relative w-full" style={{ height: virtualizer.getTotalSize() }}>
+          {virtualizer.getVirtualItems().map((row) => (
+            <div
+              key={row.key}
+              ref={virtualizer.measureElement}
+              data-index={row.index}
+              className="absolute left-0 top-0 w-full"
+              style={{ transform: `translateY(${row.start}px)` }}
+            >
+              {renderRow(tasks[row.index], row.index)}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function GlobalSftpTransferCenter() {
+  const { t } = useI18n();
+  // Badge is a stable store snapshot (identity unchanged on pure progress).
+  // Full task list is only needed while the popover is open — when closed,
+  // progress ticks used to re-render this TopTabs child on every byte.
+  const badge = useSftpTransferCenterBadge();
+  const [open, setOpen] = useState(false);
+  // Folder drops fire this so the scanning row is visible immediately without
+  // requiring the user to notice the badge first.
+  useEffect(() => {
+    const openCenter = () => setOpen(true);
+    window.addEventListener("netcatty:open-sftp-transfer-center", openCenter);
+    return () => window.removeEventListener("netcatty:open-sftp-transfer-center", openCenter);
+  }, []);
+  const snapshot = useSftpTransferCenterWhenOpen(open);
+  const [bucket, setBucket] = useState<GlobalTransferBucket>("all");
+  const [showBackground, setShowBackground] = useState(false);
+  const childrenByParent = useMemo(() => {
+    const map = new Map<string, TransferTask[]>();
+    for (const task of snapshot.tasks) {
+      if (!task.parentTaskId || task.status === "cancelled") continue;
+      const list = map.get(task.parentTaskId) ?? [];
+      list.push(task);
+      map.set(task.parentTaskId, list);
+    }
+    for (const list of map.values()) {
+      list.sort((a, b) => a.startTime - b.startTime);
+    }
+    return map;
+  }, [snapshot.tasks]);
+  const counts = useMemo(() => Object.fromEntries(BUCKETS.map((item) => [
+    item,
+    getTasksForGlobalTransferBucket(snapshot.tasks, item).length,
+  ])) as Record<GlobalTransferBucket, number>, [snapshot.tasks]);
+  const bucketTasks = useMemo(() => getTasksForGlobalTransferBucket(snapshot.tasks, bucket)
+    .sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0) || b.startTime - a.startTime), [bucket, snapshot.tasks]);
+  const { visible, collapsed } = splitBackgroundTransfers(bucketTasks);
+  const displayed = showBackground ? [...visible, ...collapsed] : visible;
+  const { batchEligibility, pauseAll, resumeAll } = useGlobalSftpTransferActions(snapshot.tasks);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <PopoverTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="relative h-7 w-7 shrink-0 app-no-drag top-tab-utility-btn"
+              style={{ color: "var(--top-tabs-muted, hsl(var(--muted-foreground)))" }}
+              aria-label={t("sftp.transferCenter.title")}
+              data-section="global-sftp-transfer-toggle"
+            >
+              <ArrowDownUp size={15} />
+              {badge.count > 0 && (
+                <span className="absolute -right-0.5 -top-0.5 flex min-h-3 min-w-3 items-center justify-center rounded-full bg-primary px-0.5 text-[8px] leading-3 text-primary-foreground">
+                  {badge.count > 99 ? "99+" : badge.count}
+                </span>
+              )}
+              {badge.hasAttention && (
+                <span className="absolute right-0 top-0 h-2 w-2 rounded-full bg-destructive" />
+              )}
+            </Button>
+          </PopoverTrigger>
+        </TooltipTrigger>
+        <TooltipContent>{t("sftp.transferCenter.title")}</TooltipContent>
+      </Tooltip>
+
+      <PopoverContent
+        align="end"
+        sideOffset={5}
+        className="w-[min(460px,calc(100vw-24px))] overflow-hidden p-0 app-no-drag"
+        data-section="global-sftp-transfer-center"
+      >
+        <div className="flex items-center justify-between border-b border-border/60 px-4 py-3">
+          <div className="min-w-0 pr-2 text-sm font-semibold">
+            {t("sftp.transferCenter.title")}
+          </div>
+          <div className="flex items-center gap-1">
+            <Button variant="ghost" size="sm" className="h-7 text-xs" onClick={pauseAll} disabled={batchEligibility.pausableCount === 0}>
+              <Pause size={12} className="mr-1" />{t("sftp.transferCenter.pauseAll")}
+            </Button>
+            <Button variant="ghost" size="sm" className="h-7 text-xs" onClick={resumeAll} disabled={batchEligibility.resumableCount === 0}>
+              <Play size={12} className="mr-1" />{t("sftp.transferCenter.resumeAll")}
+            </Button>
+          </div>
+        </div>
+
+        <div className="flex gap-0 px-2 pt-1" role="tablist" aria-label={t("sftp.transferCenter.title")}>
+          {BUCKETS.map((item) => (
+            <button
+              key={item}
+              type="button"
+              className={cn(
+                // Selected: keep a clear accent underline (not just text color).
+                // Unselected: gray label only — no shared full-width hairline.
+                "relative min-w-0 flex-1 truncate px-1.5 py-2 text-[11px] transition-colors",
+                bucket === item
+                  ? "font-medium text-primary after:absolute after:inset-x-1 after:bottom-0 after:h-0.5 after:rounded-full after:bg-primary"
+                  : "text-muted-foreground hover:text-foreground/80",
+              )}
+              onClick={() => setBucket(item)}
+              role="tab"
+              aria-selected={bucket === item}
+            >
+              {t(`sftp.transferCenter.bucket.${item}`)}
+              {counts[item] > 0 && <span className="ml-1 text-[10px] opacity-80">{counts[item]}</span>}
+            </button>
+          ))}
+        </div>
+
+        <TransferList
+          key={`${bucket}-${showBackground}`}
+          tasks={displayed}
+          childrenByParent={childrenByParent}
+          empty={(
+            <div className="flex h-40 flex-col items-center justify-center text-muted-foreground">
+              {badge.hasAttention && bucket !== "attention" && bucket !== "all" ? <AlertCircle size={22} /> : <ArrowDownUp size={22} />}
+              <span className="mt-2 text-xs">{t("sftp.transferCenter.empty")}</span>
+            </div>
+          )}
+        />
+
+        {(() => {
+          const showBackgroundToggle = collapsed.length > 0;
+          const showClear = bucket === "completed" && counts.completed > 0;
+          if (!showBackgroundToggle && !showClear) return null;
+          return (
+            <div className="flex items-center justify-between px-3 py-2">
+              <div>
+                {showBackgroundToggle && (
+                  <Button variant="ghost" size="sm" className="h-6 text-[10px]" onClick={() => setShowBackground((value) => !value)}>
+                    {showBackground
+                      ? t("sftp.transferCenter.hideBackground")
+                      : t("sftp.transferCenter.showBackground", { count: collapsed.length })}
+                  </Button>
+                )}
+              </div>
+              {showClear && (
+                <Button variant="ghost" size="sm" className="h-6 text-[10px]" onClick={() => {
+                  sftpTransferCenterStore.clearTerminal("completed");
+                  sftpTransferCenterStore.clearTerminal("cancelled");
+                }}>
+                  <Trash2 size={11} className="mr-1" />{t("sftp.transferCenter.clear")}
+                </Button>
+              )}
+            </div>
+          );
+        })()}
+      </PopoverContent>
+    </Popover>
+  );
+}