[Init] Initial commit - NetMesh terminal manager

components/SftpView.tsx

@@ -0,0 +1,833 @@
+/**
+ * SftpView - SFTP File Browser (Refactored)
+ *
+ * This is the main SFTP view component that provides a dual-pane file browser
+ * for transferring files between local and remote systems.
+ *
+ * Components have been extracted to:
+ * - components/sftp/utils.ts - Utility functions
+ * - components/sftp/SftpBreadcrumb.tsx - Path navigation
+ * - components/sftp/SftpFileRow.tsx - File list row
+ * - components/sftp/SftpTransferItem.tsx - Transfer queue item
+ * - components/sftp/SftpConflictDialog.tsx - Conflict resolution
+ * - components/sftp/SftpPermissionsDialog.tsx - Permissions editor
+ * - components/sftp/SftpHostPicker.tsx - Host selection dialog
+ */
+
+import React, { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useI18n } from "../application/i18n/I18nProvider";
+import { activeTabStore as globalActiveTabStore, useIsSftpActive } from "../application/state/activeTabStore";
+import { useSftpState } from "../application/state/useSftpState";
+import { useSftpBackend } from "../application/state/useSftpBackend";
+import { getParentPath, isConcreteTransferTargetPath } from "../application/state/sftp/utils";
+import { buildCacheKey } from "../application/state/sftp/sharedRemoteHostCache";
+import { HotkeyScheme, KeyBinding, TerminalSession } from "../domain/models";
+import {
+  getPaneMagnificationShortcutLabel,
+  resolveTwoPaneMagnificationStyle,
+  type PaneMagnificationController,
+} from "../domain/paneMagnification";
+import { listSftpConnectedHosts, resolveSftpTransferSourceSessionId, sftpPickerSessionsEqual } from "../domain/sftpConnectedHosts";
+import { applyDualPaneSftpOpen, dualPaneTabFromPane } from "../domain/sftpDualPaneOpen";
+import {
+  consumePendingDualPaneSftpRequest,
+  subscribeDualPaneSftpOpen,
+} from "../application/state/sftp/sftpDualPaneOpenStore";
+import { logger } from "../lib/logger";
+import { useRenderTracker } from "../lib/useRenderTracker";
+import { cn } from "../lib/utils";
+import { Host, Identity, KnownHost, ProxyProfile, SSHKey, TransferTask } from "../types";
+import { resolveGroupDefaults, applyGroupDefaults } from "../domain/groupConfig";
+import { materializeHostProxyProfile } from "../domain/proxyProfiles";
+import { useSftpFileAssociations } from "../application/state/useSftpFileAssociations";
+import { registerEditorSftpWriterScoped } from "../application/state/editorSftpBridge";
+import { toast } from "./ui/toast";
+
+// Import extracted components
+import { SftpTabBar } from "./sftp";
+import { SftpPaneView, SftpPaneWrapper } from "./sftp/SftpPaneView";
+import { SftpOverlays } from "./sftp/SftpOverlays";
+import { Loader2 } from "lucide-react";
+
+// Import context hooks
+import { SftpContextProvider, activeTabStore } from "./sftp";
+import { useSftpViewPaneCallbacks } from "./sftp/hooks/useSftpViewPaneCallbacks";
+import { useSftpViewTabs } from "./sftp/hooks/useSftpViewTabs";
+import { useSftpKeyboardShortcuts } from "./sftp/hooks/useSftpKeyboardShortcuts";
+import { sftpFocusStore, SftpFocusedSide, useSftpFocusedSide } from "../application/state/sftp/sftpFocusStore";
+import { keepOnlyActivePaneSelections, keepOnlyPaneSelections } from "./sftp/hooks/selectionScope";
+
+
+// Wrapper component that subscribes to activeTabId for CSS visibility
+// This isolates the activeTabId subscription - only this component re-renders on tab switch
+// Uses visibility:hidden pattern from App.tsx for smooth tab switching
+// Main SftpView component
+interface SftpViewProps {
+  hosts: Host[];
+  /** Vault-persisted hosts only; used for writes so ephemeral deep-link hosts stay out of vault. */
+  writableHosts?: Host[];
+  sessions?: TerminalSession[];
+  keys: SSHKey[];
+  identities: Identity[];
+  knownHosts?: KnownHost[];
+  groupConfigs?: import('../domain/models').GroupConfig[];
+  proxyProfiles?: ProxyProfile[];
+  updateHosts: (hosts: Host[]) => void;
+  onAddKnownHost?: (knownHost: KnownHost) => void;
+  sftpDefaultViewMode: "list" | "tree";
+  sftpDoubleClickBehavior: "open" | "transfer";
+  sftpAutoSync: boolean;
+  sftpShowHiddenFiles: boolean;
+  sftpUseCompressedUpload: boolean;
+  hotkeyScheme: HotkeyScheme;
+  keyBindings: KeyBinding[];
+  editorWordWrap: boolean;
+  setEditorWordWrap: (enabled: boolean) => void;
+  terminalSettings?: { verifyHostKeys: boolean; keepaliveInterval: number; keepaliveCountMax: number };
+  paneMagnificationRef?: React.MutableRefObject<PaneMagnificationController | null>;
+}
+
+const SftpViewInner: React.FC<SftpViewProps> = ({
+  hosts,
+  writableHosts,
+  sessions = [],
+  keys,
+  identities,
+  knownHosts = [],
+  groupConfigs = [],
+  proxyProfiles = [],
+  updateHosts,
+  onAddKnownHost,
+  sftpDefaultViewMode,
+  sftpDoubleClickBehavior,
+  sftpAutoSync,
+  sftpShowHiddenFiles,
+  sftpUseCompressedUpload,
+  hotkeyScheme,
+  keyBindings,
+  editorWordWrap,
+  setEditorWordWrap,
+  terminalSettings,
+  paneMagnificationRef,
+}) => {
+  const { t } = useI18n();
+  const paneMagnificationShortcutLabel = getPaneMagnificationShortcutLabel(keyBindings, hotkeyScheme);
+  const isActive = useIsSftpActive();
+  const rootRef = useRef<HTMLDivElement>(null);
+  const dialogActionScopeIdRef = useRef("sftp-main-view");
+
+  // File watch event handlers (stable refs to avoid re-creating the useSftpState options)
+  const fileWatchHandlers = useMemo(() => ({
+    onFileWatchSynced: (payload: { remotePath: string }) => {
+      const fileName = payload.remotePath.split('/').pop() || payload.remotePath;
+      toast.success(t('sftp.autoSync.success', { fileName }));
+      logger.info("[SFTP] File auto-synced to remote", payload);
+    },
+    onFileWatchError: (payload: { error: string }) => {
+      toast.error(t('sftp.autoSync.error', { error: payload.error }));
+      logger.error("[SFTP] File auto-sync failed", payload);
+    },
+  }), [t]);
+
+  const resolveTransferSourceSessionId = useCallback((hostId: string, host?: Host) => {
+    const hostsById = new Map<string, Host>(hosts.map((h) => [h.id, h]));
+    // Walk all sessions (not the picker one-per-hostId list) so multi-tab
+    // same hostId with different live endpoints can still match.
+    return resolveSftpTransferSourceSessionId(sessions, hostsById, hostId, host);
+  }, [hosts, sessions]);
+
+  const sftpOptions = useMemo(() => ({
+    ...fileWatchHandlers,
+    transferOwnerId: "main-sftp-view",
+    // Main SFTP page stays interactive while mounted so top-tab switches
+    // (e.g. Terminal ↔ SFTP) must not soft-close every tab's session.
+    // The terminal side panel parks only after the panel is closed (not when
+    // switching History/System while the chrome stays open).
+    // Bulk transfers use dedicated pool sessions regardless.
+    interactive: true,
+    useCompressedUpload: sftpUseCompressedUpload,
+    defaultShowHiddenFiles: sftpShowHiddenFiles,
+    terminalSettings,
+    knownHosts,
+    onAddKnownHost,
+    resolveTransferSourceSessionId,
+  }), [
+    fileWatchHandlers,
+    sftpUseCompressedUpload,
+    sftpShowHiddenFiles,
+    terminalSettings,
+    knownHosts,
+    onAddKnownHost,
+    resolveTransferSourceSessionId,
+  ]);
+
+  // Pre-resolve group defaults so SFTP connections inherit group config
+  const effectiveHosts = useMemo(() => {
+    const validProxyProfileIds = new Set(proxyProfiles.map((profile) => profile.id));
+    return hosts.map(h => {
+      const withGroupDefaults = h.group
+        ? applyGroupDefaults(h, resolveGroupDefaults(h.group, groupConfigs, { validProxyProfileIds }), { validProxyProfileIds })
+        : applyGroupDefaults(h, {}, { validProxyProfileIds });
+      return materializeHostProxyProfile(withGroupDefaults, proxyProfiles);
+    });
+  }, [hosts, groupConfigs, proxyProfiles]);
+
+  const hostWriteSource = writableHosts ?? hosts;
+
+  const connectedHosts = useMemo(() => {
+    const hostsById = new Map<string, Host>(
+      effectiveHosts.map((host) => [host.id, host]),
+    );
+    return listSftpConnectedHosts(sessions, hostsById);
+  }, [effectiveHosts, sessions]);
+
+  const sftp = useSftpState(effectiveHosts, keys, identities, sftpOptions);
+
+  // Get backend helpers for file downloads and local filesystem writes.
+  const {
+    showSaveDialog,
+    selectDirectory,
+    listSftp,
+    mkdirLocal,
+    deleteLocalFile,
+    listLocalDir,
+    listDrives,
+    openPath,
+  } = useSftpBackend();
+
+  // Store sftp in a ref so callbacks can access the latest instance
+  // without needing to re-create when sftp changes
+  const sftpRef = useRef(sftp);
+  sftpRef.current = sftp;
+  const effectiveHostsRef = useRef(effectiveHosts);
+  effectiveHostsRef.current = effectiveHosts;
+
+  useEffect(() => {
+    const toTabs = (panes: Array<{
+      id: string;
+      connection: { id: string; isLocal?: boolean; hostId?: string | null; status?: string | null } | null;
+    }>, getEndpointKey: (connectionId: string) => string | null) => panes.map(
+      (pane) => dualPaneTabFromPane(
+        pane,
+        pane.connection ? getEndpointKey(pane.connection.id) : null,
+      ),
+    );
+
+    const applyRequest = (request: { hostId: string } | null) => {
+      if (!request) return;
+      const host = effectiveHostsRef.current.find((candidate) => candidate.id === request.hostId);
+      if (!host) return;
+      const current = sftpRef.current;
+      const hostEndpointKey = buildCacheKey(
+        host.id,
+        host.hostname,
+        host.port,
+        host.protocol,
+        host.sftpSudo,
+        host.username,
+        host.sftpFileProtocol,
+      );
+      // External "Open SFTP" promises a visible local-left / host-right pair.
+      // Clear a stale single-pane magnification before selecting or connecting.
+      setMagnifiedSide(null);
+      applyDualPaneSftpOpen(
+        {
+          leftTabs: toTabs(current.leftTabs.tabs, current.getConnectionCacheKey),
+          rightTabs: toTabs(current.rightTabs.tabs, current.getConnectionCacheKey),
+          selectTab: current.selectTab,
+          connect: (side, nextHost, options) => {
+            void current.connect(side, nextHost === "local" ? "local" : host, options);
+          },
+        },
+        host,
+        hostEndpointKey,
+      );
+    };
+
+    applyRequest(consumePendingDualPaneSftpRequest());
+    return subscribeDualPaneSftpOpen(applyRequest);
+  }, []);
+
+  // Register this useSftpState's writeTextFileByConnection with the bridge so
+  // the editor tab's save path can reach the active SFTP session. The bridge
+  // supports multiple simultaneous writers (SftpSidePanel inside terminals
+  // also registers its own instance) and dispatches by trying each until one
+  // owns the target connectionId.
+  //
+  // Intentionally no deps: `sftp` identity churns on every SFTP state change
+  // (transfers, pane updates, tab switches), which would make this effect
+  // unregister+reregister constantly. Route through sftpRef so the closure
+  // always reads the latest writeTextFileByConnection; that method is stable
+  // across sftp re-renders (it's a methodsRef-backed dispatcher).
+  useEffect(() => {
+    return registerEditorSftpWriterScoped((connectionId, expectedHostId, filePath, content, encoding, sftpTabId) =>
+      sftpRef.current.writeTextFileByConnection(connectionId, expectedHostId, filePath, content, encoding, sftpTabId),
+    );
+  }, []);
+
+  // Store behavior setting in ref for stable callbacks
+  const behaviorRef = useRef(sftpDoubleClickBehavior);
+  behaviorRef.current = sftpDoubleClickBehavior;
+
+  // Store auto-sync setting in ref for stable callbacks
+  const autoSyncRef = useRef(sftpAutoSync);
+  autoSyncRef.current = sftpAutoSync;
+
+  // SFTP keyboard shortcuts handler
+  useSftpKeyboardShortcuts({
+    keyBindings,
+    hotkeyScheme,
+    sftpRef,
+    dialogActionScopeId: dialogActionScopeIdRef.current,
+    isActive,
+  });
+
+  // Subscribe to focused side for visual indicator
+  const focusedSide = useSftpFocusedSide();
+  const [magnifiedSide, setMagnifiedSide] = useState<SftpFocusedSide | null>(null);
+  const focusedSideRef = useRef(focusedSide);
+  const magnifiedSideRef = useRef(magnifiedSide);
+  focusedSideRef.current = focusedSide;
+  magnifiedSideRef.current = magnifiedSide;
+  const [isWideSplit, setIsWideSplit] = useState(true);
+  const [showMagnificationHint, setShowMagnificationHint] = useState(false);
+  const splitSurfaceRef = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    const surface = splitSurfaceRef.current;
+    if (!surface) return undefined;
+    const update = () => setIsWideSplit(surface.clientWidth >= 1024);
+    update();
+    if (typeof ResizeObserver === 'undefined') return undefined;
+    const observer = new ResizeObserver(update);
+    observer.observe(surface);
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    if (!magnifiedSide) {
+      setShowMagnificationHint(false);
+      return undefined;
+    }
+    setShowMagnificationHint(true);
+    const timerId = window.setTimeout(() => setShowMagnificationHint(false), 1800);
+    return () => window.clearTimeout(timerId);
+  }, [magnifiedSide]);
+
+  useEffect(() => {
+    if (!paneMagnificationRef) return undefined;
+    const controller: PaneMagnificationController = {
+      getState: () => {
+        if (globalActiveTabStore.getActiveTabId() !== 'sftp') return 'unavailable';
+        return magnifiedSideRef.current ? 'focused' : 'focusable';
+      },
+      focus: () => {
+        if (globalActiveTabStore.getActiveTabId() !== 'sftp' || magnifiedSideRef.current) return false;
+        setMagnifiedSide(focusedSideRef.current);
+        return true;
+      },
+      restore: () => {
+        if (globalActiveTabStore.getActiveTabId() !== 'sftp' || !magnifiedSideRef.current) return false;
+        setMagnifiedSide(null);
+        return true;
+      },
+      toggle: () => {
+        if (globalActiveTabStore.getActiveTabId() !== 'sftp') return false;
+        setMagnifiedSide((current) => current ? null : focusedSideRef.current);
+        return true;
+      },
+    };
+    paneMagnificationRef.current = controller;
+    return () => {
+      if (paneMagnificationRef.current === controller) paneMagnificationRef.current = null;
+    };
+  }, [paneMagnificationRef]);
+
+  // Handle pane focus when clicking on a pane container
+  // Clear the opposite side's selection so file operations only affect the focused pane
+  const handlePaneFocus = useCallback((side: SftpFocusedSide, targetTabId?: string) => {
+    const prevSide = sftpFocusStore.getFocusedSide();
+    sftpFocusStore.setFocusedSide(side);
+    setMagnifiedSide((current) => current ? side : null);
+    if (prevSide !== side) {
+      if (targetTabId) {
+        keepOnlyPaneSelections(sftpRef.current, { side, tabId: targetTabId });
+      } else {
+        // Focus side changed — clear other panes but keep the newly focused pane intact.
+        keepOnlyActivePaneSelections(sftpRef.current, side);
+      }
+    }
+  }, []);
+
+  const handleToggleHiddenFiles = useCallback((side: "left" | "right", paneId: string) => {
+    const sideTabs = side === "left" ? sftpRef.current.leftTabs : sftpRef.current.rightTabs;
+    const pane = sideTabs.tabs.find((tab) => tab.id === paneId);
+    if (!pane) return;
+
+    sftpRef.current.setShowHiddenFiles(side, paneId, !pane.showHiddenFiles);
+  }, []);
+
+  // Sync activeTabId to external store (allows child components to subscribe without parent re-render)
+  // Using useLayoutEffect to sync before paint
+  useLayoutEffect(() => {
+    activeTabStore.setActiveTabId("left", sftp.leftTabs.activeTabId);
+  }, [sftp.leftTabs.activeTabId]);
+
+  useLayoutEffect(() => {
+    activeTabStore.setActiveTabId("right", sftp.rightTabs.activeTabId);
+  }, [sftp.rightTabs.activeTabId]);
+
+  // 渲染追踪 - 不追踪 activeTabId（现在通过 store 订阅）
+  useRenderTracker("SftpViewInner", {
+    isActive,
+    hostsCount: hosts.length,
+    leftTabsCount: sftp.leftTabs.tabs.length,
+    rightTabsCount: sftp.rightTabs.tabs.length,
+  });
+  const { getOpenerForFile, setOpenerForExtension } = useSftpFileAssociations();
+
+  const getOpenerForFileRef = useRef(getOpenerForFile);
+  getOpenerForFileRef.current = getOpenerForFile;
+
+  const {
+    leftCallbacks,
+    rightCallbacks,
+    dragCallbacks,
+    draggedFiles,
+    permissionsState,
+    setPermissionsState,
+    showTextEditor,
+    setShowTextEditor,
+    textEditorTarget,
+    setTextEditorTarget,
+    textEditorContent,
+    setTextEditorContent,
+    loadingTextContent,
+    showFileOpenerDialog,
+    setShowFileOpenerDialog,
+    fileOpenerTarget,
+    setFileOpenerTarget,
+    handleSaveTextFile,
+    onPromoteToTab,
+    handleFileOpenerSelect,
+    handleSelectSystemApp,
+  } = useSftpViewPaneCallbacks({
+    sftpRef,
+    behaviorRef,
+    autoSyncRef,
+    getOpenerForFileRef,
+    setOpenerForExtension,
+    t,
+    listSftp,
+    mkdirLocal,
+    deleteLocalFile,
+    showSaveDialog,
+    selectDirectory,
+    getSftpIdForConnection: sftp.getSftpIdForConnection,
+    listLocalFiles: listLocalDir,
+    listDrives,
+  });
+
+  const visibleTransfers = useMemo(
+    () => [...sftp.transfers].filter((t) => !t.parentTaskId).reverse().slice(0, 5),
+    [sftp.transfers],
+  );
+
+  const getTransferTargetDirectory = useCallback(
+    (task: TransferTask) => (task.isDirectory ? task.targetPath : getParentPath(task.targetPath)),
+    [],
+  );
+
+  const findRemoteTransferTargetTab = useCallback((task: TransferTask) => {
+    const state = sftpRef.current;
+    for (const side of ["left", "right"] as const) {
+      const tabs = side === "left" ? state.leftTabs.tabs : state.rightTabs.tabs;
+      const pane = tabs.find((tab) => tab.connection?.id === task.targetConnectionId);
+      if (pane?.connection && !pane.connection.isLocal) {
+        return { side, tabId: pane.id };
+      }
+    }
+    return null;
+  }, []);
+
+  const canRevealTransferTarget = useCallback(
+    (task: TransferTask) => {
+      if (task.status !== "completed") return false;
+      if (!isConcreteTransferTargetPath(task)) return false;
+      if (task.targetConnectionId === "local") {
+        return true;
+      }
+      return !!findRemoteTransferTargetTab(task);
+    },
+    [findRemoteTransferTargetTab],
+  );
+
+  const handleRevealTransferTarget = useCallback(
+    async (task: TransferTask) => {
+      if (!isConcreteTransferTargetPath(task)) return;
+      const targetDirectory = getTransferTargetDirectory(task);
+      if (task.targetConnectionId === "local") {
+        try {
+          const result = await openPath(targetDirectory);
+          if (result.success) return;
+        } catch {
+          // Show the localized error below.
+        }
+        toast.error(t("sftp.transfers.openTargetFolderError"), "SFTP");
+        return;
+      }
+
+      const targetTab = findRemoteTransferTargetTab(task);
+      if (!targetTab) return;
+      await sftpRef.current.navigateTo(targetTab.side, targetDirectory, { force: true, tabId: targetTab.tabId });
+    },
+    [findRemoteTransferTargetTab, getTransferTargetDirectory, openPath, t],
+  );
+
+  const canCopyTransferTargetPath = useCallback(
+    (task: TransferTask) => task.status === "completed" && isConcreteTransferTargetPath(task),
+    [],
+  );
+
+  const handleCopyTransferTargetPath = useCallback(
+    async (task: TransferTask) => {
+      if (!isConcreteTransferTargetPath(task)) return;
+      try {
+        await navigator.clipboard.writeText(task.targetPath);
+        toast.success(t("sftp.transfers.copyTargetPathSuccess"), "SFTP");
+      } catch {
+        toast.error(t("sftp.transfers.copyTargetPathError"), "SFTP");
+      }
+    },
+    [t],
+  );
+
+  const containerStyle: React.CSSProperties = isActive
+    ? {}
+    : {
+      visibility: "hidden",
+      pointerEvents: "none",
+      position: "absolute",
+      zIndex: -1,
+    };
+
+  // Don't read activeTabId here - let SftpTabBar and SftpPaneWrapper subscribe to store
+  // This prevents SftpViewInner from re-rendering on tab switch
+
+  const {
+    leftPanes,
+    rightPanes,
+    leftTabsInfo,
+    rightTabsInfo,
+    showHostPickerLeft,
+    showHostPickerRight,
+    hostSearchLeft,
+    hostSearchRight,
+    setShowHostPickerLeft,
+    setShowHostPickerRight,
+    setHostSearchLeft,
+    setHostSearchRight,
+    handleAddTabLeft,
+    handleAddTabRight,
+    handleCloseTabLeft,
+    handleCloseTabRight,
+    handleSelectTabLeft,
+    handleSelectTabRight,
+    handleReorderTabsLeft,
+    handleReorderTabsRight,
+    handleMoveTabFromLeftToRight,
+    handleMoveTabFromRightToLeft,
+    handleDuplicateTabLeft,
+    handleDuplicateTabRight,
+    handleHostSelectLeft,
+    handleHostSelectRight,
+  } = useSftpViewTabs({ sftp, sftpRef, hosts: effectiveHosts });
+
+  const handleAddTabLeftWithFocus = useCallback(() => {
+    const tabId = handleAddTabLeft();
+    handlePaneFocus("left", tabId);
+  }, [handleAddTabLeft, handlePaneFocus]);
+
+  const handleAddTabRightWithFocus = useCallback(() => {
+    const tabId = handleAddTabRight();
+    handlePaneFocus("right", tabId);
+  }, [handleAddTabRight, handlePaneFocus]);
+
+  const handleSelectTabLeftWithFocus = useCallback((tabId: string) => {
+    handleSelectTabLeft(tabId);
+    handlePaneFocus("left", tabId);
+  }, [handlePaneFocus, handleSelectTabLeft]);
+
+  const handleSelectTabRightWithFocus = useCallback((tabId: string) => {
+    handleSelectTabRight(tabId);
+    handlePaneFocus("right", tabId);
+  }, [handlePaneFocus, handleSelectTabRight]);
+
+  const handleDuplicateTabLeftWithFocus = useCallback(
+    async (...args: Parameters<typeof handleDuplicateTabLeft>) => {
+      const tabId = await handleDuplicateTabLeft(...args);
+      if (tabId) {
+        handlePaneFocus("left", tabId);
+      }
+    },
+    [handleDuplicateTabLeft, handlePaneFocus],
+  );
+
+  const handleDuplicateTabRightWithFocus = useCallback(
+    async (...args: Parameters<typeof handleDuplicateTabRight>) => {
+      const tabId = await handleDuplicateTabRight(...args);
+      if (tabId) {
+        handlePaneFocus("right", tabId);
+      }
+    },
+    [handleDuplicateTabRight, handlePaneFocus],
+  );
+
+  return (
+    <SftpContextProvider
+      hosts={effectiveHosts}
+      connectedHosts={connectedHosts}
+      writableHosts={hostWriteSource}
+      updateHosts={updateHosts}
+      draggedFiles={draggedFiles}
+      dragCallbacks={dragCallbacks}
+      leftCallbacks={leftCallbacks}
+      rightCallbacks={rightCallbacks}
+    >
+      <div
+        ref={rootRef}
+        className={cn(
+          "absolute inset-0 min-h-0 flex flex-col bg-background",
+          isActive ? "z-20" : "",
+        )}
+        style={containerStyle}
+      >
+        <div
+          ref={splitSurfaceRef}
+          className="relative flex-1 min-h-0 border-t border-border/70 overflow-hidden"
+          data-section="sftp-main-split"
+          data-magnified-side={magnifiedSide ?? undefined}
+        >
+          {magnifiedSide && (
+            <div
+              className="absolute inset-0 z-40 bg-background/55 backdrop-blur-[1px]"
+              aria-hidden="true"
+              data-section="pane-magnification-backdrop"
+            />
+          )}
+          <div
+            className="absolute min-w-0 border-r border-border/70 bg-background flex flex-col transition-[left,top,width,height] duration-150 ease-out"
+            style={resolveTwoPaneMagnificationStyle('left', isWideSplit, magnifiedSide === 'left')}
+            data-sftp-pane-side="left"
+            inert={magnifiedSide === 'right' ? true : undefined}
+            onClick={() => handlePaneFocus("left")}
+            onFocusCapture={() => handlePaneFocus("left")}
+          >
+            {/* Focus indicator triangle */}
+            {focusedSide === "left" && (
+              <div
+                className="absolute top-0 left-0 z-50 pointer-events-none"
+                style={{
+                  width: 0,
+                  height: 0,
+                  borderStyle: 'solid',
+                  borderWidth: '12px 12px 0 0',
+                  borderColor: 'hsl(var(--primary)) transparent transparent transparent',
+                }}
+              />
+            )}
+            {/* Left side tab bar - only show when there are tabs */}
+            {leftTabsInfo.length > 0 && (
+              <SftpTabBar
+                tabs={leftTabsInfo}
+                side="left"
+                onSelectTab={handleSelectTabLeftWithFocus}
+                onCloseTab={handleCloseTabLeft}
+                onAddTab={handleAddTabLeftWithFocus}
+                onReorderTabs={handleReorderTabsLeft}
+                onMoveTabToOtherSide={handleMoveTabFromRightToLeft}
+                onDuplicateTab={handleDuplicateTabLeftWithFocus}
+              />
+            )}
+            <div className="relative flex-1 min-h-0">
+              {leftPanes.map((pane, idx) => (
+                <SftpPaneWrapper
+                  key={pane.id}
+                  side="left"
+                  paneId={pane.id}
+                  isFirstPane={idx === 0}
+                >
+                  <SftpPaneView
+                    side="left"
+                    pane={pane}
+                    dialogActionScopeId={dialogActionScopeIdRef.current}
+                    isPaneFocused={focusedSide === "left"}
+                    sftpDefaultViewMode={sftpDefaultViewMode}
+                    showHeader
+                    showEmptyHeader={false}
+                    onToggleShowHiddenFiles={() => handleToggleHiddenFiles("left", pane.id)}
+                  />
+                </SftpPaneWrapper>
+              ))}
+              {/* Loading overlay for left pane - shown when loading text content */}
+              {loadingTextContent && textEditorTarget?.side === "left" && (
+                <div className="absolute inset-0 flex items-center justify-center bg-background/80 z-30">
+                  <div className="flex flex-col items-center gap-2">
+                    <Loader2 size={24} className="animate-spin text-muted-foreground" />
+                    <span className="text-sm text-muted-foreground">{t("sftp.status.loading")}</span>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+          <div
+            className="absolute min-w-0 bg-background flex flex-col transition-[left,top,width,height] duration-150 ease-out"
+            style={resolveTwoPaneMagnificationStyle('right', isWideSplit, magnifiedSide === 'right')}
+            data-sftp-pane-side="right"
+            inert={magnifiedSide === 'left' ? true : undefined}
+            onClick={() => handlePaneFocus("right")}
+            onFocusCapture={() => handlePaneFocus("right")}
+          >
+            {/* Focus indicator triangle */}
+            {focusedSide === "right" && (
+              <div
+                className="absolute top-0 left-0 z-50 pointer-events-none"
+                style={{
+                  width: 0,
+                  height: 0,
+                  borderStyle: 'solid',
+                  borderWidth: '12px 12px 0 0',
+                  borderColor: 'hsl(var(--primary)) transparent transparent transparent',
+                }}
+              />
+            )}
+            {/* Right side tab bar - only show when there are tabs */}
+            {rightTabsInfo.length > 0 && (
+              <SftpTabBar
+                tabs={rightTabsInfo}
+                side="right"
+                onSelectTab={handleSelectTabRightWithFocus}
+                onCloseTab={handleCloseTabRight}
+                onAddTab={handleAddTabRightWithFocus}
+                onReorderTabs={handleReorderTabsRight}
+                onMoveTabToOtherSide={handleMoveTabFromLeftToRight}
+                onDuplicateTab={handleDuplicateTabRightWithFocus}
+              />
+            )}
+            <div className="relative flex-1 min-h-0">
+              {rightPanes.map((pane, idx) => (
+                <SftpPaneWrapper
+                  key={pane.id}
+                  side="right"
+                  paneId={pane.id}
+                  isFirstPane={idx === 0}
+                >
+                  <SftpPaneView
+                    side="right"
+                    pane={pane}
+                    dialogActionScopeId={dialogActionScopeIdRef.current}
+                    isPaneFocused={focusedSide === "right"}
+                    sftpDefaultViewMode={sftpDefaultViewMode}
+                    showHeader
+                    showEmptyHeader={false}
+                    onToggleShowHiddenFiles={() => handleToggleHiddenFiles("right", pane.id)}
+                  />
+                </SftpPaneWrapper>
+              ))}
+              {/* Loading overlay for right pane - shown when loading text content */}
+              {loadingTextContent && textEditorTarget?.side === "right" && (
+                <div className="absolute inset-0 flex items-center justify-center bg-background/80 z-30">
+                  <div className="flex flex-col items-center gap-2">
+                    <Loader2 size={24} className="animate-spin text-muted-foreground" />
+                    <span className="text-sm text-muted-foreground">{t("sftp.status.loading")}</span>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+          {magnifiedSide && showMagnificationHint && (
+            <div
+              className="pointer-events-none absolute bottom-4 right-4 z-[60] rounded border border-border/70 bg-background/90 px-2 py-1 text-[10px] text-muted-foreground shadow-sm animate-in fade-in duration-150"
+              data-section="pane-magnification-hint"
+            >
+              {t('terminal.paneMagnification.hint')}: {t('terminal.layer.sftp')}
+              {paneMagnificationShortcutLabel ? ` · ${paneMagnificationShortcutLabel} / Esc` : ' · Esc'}
+            </div>
+          )}
+        </div>
+
+        <SftpOverlays
+          hosts={effectiveHosts}
+          connectedHosts={connectedHosts}
+          sftp={sftp}
+          visibleTransfers={visibleTransfers}
+          canRevealTransferTarget={canRevealTransferTarget}
+          onRevealTransferTarget={handleRevealTransferTarget}
+          canCopyTransferTargetPath={canCopyTransferTargetPath}
+          onCopyTransferTargetPath={handleCopyTransferTargetPath}
+          showHostPickerLeft={showHostPickerLeft}
+          showHostPickerRight={showHostPickerRight}
+          hostSearchLeft={hostSearchLeft}
+          hostSearchRight={hostSearchRight}
+          setShowHostPickerLeft={setShowHostPickerLeft}
+          setShowHostPickerRight={setShowHostPickerRight}
+          setHostSearchLeft={setHostSearchLeft}
+          setHostSearchRight={setHostSearchRight}
+          handleHostSelectLeft={handleHostSelectLeft}
+          handleHostSelectRight={handleHostSelectRight}
+          permissionsState={permissionsState}
+          setPermissionsState={setPermissionsState}
+          showTextEditor={showTextEditor}
+          setShowTextEditor={setShowTextEditor}
+          textEditorTarget={textEditorTarget}
+          setTextEditorTarget={setTextEditorTarget}
+          textEditorContent={textEditorContent}
+          setTextEditorContent={setTextEditorContent}
+          handleSaveTextFile={handleSaveTextFile}
+          editorWordWrap={editorWordWrap}
+          setEditorWordWrap={setEditorWordWrap}
+          hotkeyScheme={hotkeyScheme}
+          keyBindings={keyBindings}
+          showFileOpenerDialog={showFileOpenerDialog}
+          setShowFileOpenerDialog={setShowFileOpenerDialog}
+          fileOpenerTarget={fileOpenerTarget}
+          setFileOpenerTarget={setFileOpenerTarget}
+          handleFileOpenerSelect={handleFileOpenerSelect}
+          handleSelectSystemApp={handleSelectSystemApp}
+          onPromoteToTab={onPromoteToTab}
+          t={t}
+        />
+      </div>
+    </SftpContextProvider>
+  );
+};
+
+export const sftpViewAreEqual = (prev: SftpViewProps, next: SftpViewProps): boolean =>
+  prev.hosts === next.hosts &&
+  prev.writableHosts === next.writableHosts &&
+  sftpPickerSessionsEqual(prev.sessions, next.sessions) &&
+  prev.keys === next.keys &&
+  prev.identities === next.identities &&
+  prev.knownHosts === next.knownHosts &&
+  prev.groupConfigs === next.groupConfigs &&
+  prev.proxyProfiles === next.proxyProfiles &&
+  prev.sftpDefaultViewMode === next.sftpDefaultViewMode &&
+  prev.onAddKnownHost === next.onAddKnownHost &&
+  prev.sftpDoubleClickBehavior === next.sftpDoubleClickBehavior &&
+  prev.sftpAutoSync === next.sftpAutoSync &&
+  prev.sftpShowHiddenFiles === next.sftpShowHiddenFiles &&
+  prev.sftpUseCompressedUpload === next.sftpUseCompressedUpload &&
+  prev.hotkeyScheme === next.hotkeyScheme &&
+  prev.keyBindings === next.keyBindings &&
+  prev.paneMagnificationRef === next.paneMagnificationRef &&
+  prev.editorWordWrap === next.editorWordWrap &&
+  prev.setEditorWordWrap === next.setEditorWordWrap &&
+  // Only these terminal connection settings affect SFTP connection
+  // resolution today; compare them directly rather than the whole object
+  // so unrelated terminal-setting changes don't tear the panel down.
+  prev.terminalSettings?.verifyHostKeys === next.terminalSettings?.verifyHostKeys &&
+  prev.terminalSettings?.keepaliveInterval === next.terminalSettings?.keepaliveInterval &&
+  prev.terminalSettings?.keepaliveCountMax === next.terminalSettings?.keepaliveCountMax;
+
+export const SftpView = memo(SftpViewInner, sftpViewAreEqual);
+SftpView.displayName = "SftpView";