Merge pull request #53 from AkarinServer/feature/linux-build-support

feat: add linux build support (x64/arm64)

.github/workflows/build.yml

@@ -2,6 +2,11 @@ name: build-packages
 
 on:
   workflow_dispatch:
+    inputs:
+      publish_release:
+        description: "Publish GitHub Release after build"
+        type: boolean
+        default: false
   push:
     tags:
       - "v*"
@@ -13,7 +18,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        os: [macos-latest, windows-latest]
+        os: [macos-latest, windows-latest, ubuntu-latest]
     env:
       VITE_SYNC_GITHUB_CLIENT_ID: ${{ secrets.VITE_SYNC_GITHUB_CLIENT_ID }}
       VITE_SYNC_GOOGLE_CLIENT_ID: ${{ secrets.VITE_SYNC_GOOGLE_CLIENT_ID }}
@@ -53,6 +58,12 @@ jobs:
           ELECTRON_BUILDER_PUBLISH: "never"
         run: npm run pack:win
 
+      - name: Build package (Linux)
+        if: matrix.os == 'ubuntu-latest'
+        env:
+          ELECTRON_BUILDER_PUBLISH: "never"
+        run: npm run pack:linux
+
       - name: Upload artifacts
         uses: actions/upload-artifact@v4
         with:
@@ -74,7 +85,7 @@ jobs:
     name: release
     runs-on: ubuntu-latest
     needs: build
-    if: startsWith(github.ref, 'refs/tags/')
+    if: startsWith(github.ref, 'refs/tags/') || (github.event_name == 'workflow_dispatch' && inputs.publish_release)
     permissions:
       contents: write
     steps:

.gitignore

@@ -22,6 +22,7 @@ coverage
 /release
 /out
 *.asar
+/public/monaco
 
 # Editor directories and files
 .vscode/*

App.tsx

@@ -1,11 +1,13 @@
 import React, { Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { activeTabStore, useActiveTabId, useIsSftpActive, useIsTerminalLayerVisible, useIsVaultActive } from './application/state/activeTabStore';
 import { useAutoSync } from './application/state/useAutoSync';
+import { usePortForwardingAutoStart } from './application/state/usePortForwardingAutoStart';
 import { useSessionState } from './application/state/useSessionState';
 import { useSettingsState } from './application/state/useSettingsState';
 import { useUpdateCheck } from './application/state/useUpdateCheck';
 import { useVaultState } from './application/state/useVaultState';
 import { useWindowControls } from './application/state/useWindowControls';
+import { initializeFonts } from './application/state/fontStore';
 import { I18nProvider, useI18n } from './application/i18n/I18nProvider';
 import { matchesKeyBinding } from './domain/models';
 import { resolveHostAuth } from './domain/sshAuth';
@@ -23,6 +25,9 @@ import { LogView as LogViewType } from './application/state/useSessionState';
 import type { SftpView as SftpViewComponent } from './components/SftpView';
 import type { TerminalLayer as TerminalLayerComponent } from './components/TerminalLayer';
 
+// Initialize fonts eagerly at app startup
+initializeFonts();
+
 // Visibility container for VaultView - isolates isActive subscription
 const VaultViewContainer: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const isActive = useIsVaultActive();
@@ -280,6 +285,12 @@ function App({ settings }: { settings: SettingsState }) {
     }
   }, [updateState.hasUpdate, updateState.latestRelease, t, openReleasePage, dismissUpdate]);
 
+  // Auto-start port forwarding rules on app launch
+  usePortForwardingAutoStart({
+    hosts,
+    keys: keys.map((k) => ({ id: k.id, privateKey: k.privateKey })),
+  });
+
   // Debounce ref for moveFocus to prevent double-triggering when focus switches
   const lastMoveFocusTimeRef = useRef<number>(0);
   const MOVE_FOCUS_DEBOUNCE_MS = 200;

README.md

@@ -16,7 +16,7 @@
 <p align="center">
   <a href="https://github.com/binaricat/Netcatty/releases/latest"><img alt="GitHub Release" src="https://img.shields.io/github/v/release/binaricat/Netcatty?style=for-the-badge&logo=github&label=Release"></a>
   &nbsp;
-  <a href="#"><img alt="Platform" src="https://img.shields.io/badge/Platform-macOS%20%7C%20Windows-blue?style=for-the-badge&logo=electron"></a>
+  <a href="#"><img alt="Platform" src="https://img.shields.io/badge/Platform-macOS%20%7C%20Windows%20%7C%20Linux-blue?style=for-the-badge&logo=electron"></a>
   &nbsp;
   <a href="LICENSE"><img alt="License" src="https://img.shields.io/badge/License-GPL--3.0-green?style=for-the-badge"></a>
 </p>
@@ -67,7 +67,7 @@
 <a name="what-is-netcatty"></a>
 # What is Netcatty
 
-**Netcatty** is a modern SSH client and terminal manager for macOS and Windows, designed for developers, sysadmins, and DevOps engineers who need to manage multiple remote servers efficiently.
+**Netcatty** is a modern SSH client and terminal manager for macOS, Windows, and Linux, designed for developers, sysadmins, and DevOps engineers who need to manage multiple remote servers efficiently.
 
 - **Netcatty is** an alternative to PuTTY, Termius, SecureCRT, and macOS Terminal.app for SSH connections
 - **Netcatty is** a powerful SFTP client with dual-pane file browser
@@ -279,7 +279,7 @@ Or browse all releases at [GitHub Releases](https://github.com/binaricat/Netcatt
 
 ### Prerequisites
 - Node.js 18+ and npm
-- macOS or Windows 10+
+- macOS, Windows 10+, or Linux
 
 ### Development
 
@@ -329,6 +329,7 @@ npm run pack
 # Package for specific platforms
 npm run pack:mac     # macOS (DMG + ZIP)
 npm run pack:win     # Windows (NSIS installer)
+npm run pack:linux   # Linux (AppImage + DEB + RPM)
 ```
 
 ---

application/i18n/locales/en.ts

@@ -179,6 +179,9 @@ const en: Messages = {
   'settings.terminal.localShell.startDir.placeholder': 'Home directory',
   'settings.terminal.localShell.startDir.notFound': 'Directory not found',
   'settings.terminal.localShell.startDir.isFile': 'Path is a file, not a directory',
+  'settings.terminal.section.connection': 'Connection',
+  'settings.terminal.connection.keepaliveInterval': 'Keepalive Interval',
+  'settings.terminal.connection.keepaliveInterval.desc': 'How often (in seconds) to send SSH-level keepalive packets to server. Set to 0 to disable.',
 
   // Settings > Shortcuts
   'settings.shortcuts.section.scheme': 'Hotkey Scheme',
@@ -372,9 +375,13 @@ const en: Messages = {
   'pf.deleteActive.title': 'Delete Active Port Forwarding?',
   'pf.deleteActive.desc': 'This port forwarding rule "{label}" is currently active. Deleting it will stop the tunnel first.',
   'pf.deleteActive.confirm': 'Stop and Delete',
+  'pf.form.autoStart': 'Auto Start',
+  'pf.form.autoStartDesc': 'Automatically start this rule when the app launches',
 
   // SFTP
   'sftp.newFolder': 'New Folder',
+  'sftp.filter': 'Filter',
+  'sftp.filter.placeholder': 'Filter by filename...',
   'sftp.columns.name': 'Name',
   'sftp.columns.modified': 'Modified',
   'sftp.columns.size': 'Size',
@@ -419,6 +426,7 @@ const en: Messages = {
   'sftp.error.uploadFailed': 'Upload failed',
   'sftp.error.deleteFailed': 'Delete failed',
   'sftp.error.createFolderFailed': 'Failed to create folder',
+  'sftp.error.renameFailed': 'Failed to rename',
   'sftp.picker.title': 'Select Host',
   'sftp.picker.desc': 'Pick a host for the {side} pane',
   'sftp.picker.searchPlaceholder': 'Search hosts...',
@@ -432,11 +440,16 @@ const en: Messages = {
   'sftp.permissions.others': 'Others',
   'sftp.permissions.octal': 'Octal',
   'sftp.permissions.symbolic': 'Symbolic',
+  'sftp.permissions.success': 'Permissions updated successfully',
+  'sftp.permissions.failed': 'Failed to update permissions',
   'sftp.pane.local': 'Local',
   'sftp.pane.remote': 'Remote',
   'sftp.pane.selectHost': 'Select host',
   'sftp.pane.selectHostToStart': 'Select a host to start',
   'sftp.pane.chooseFilesystem': 'Choose a local or remote filesystem to browse',
+  'sftp.tabs.addTab': 'Add new tab',
+  'sftp.tabs.closeTab': 'Close tab',
+  'sftp.tabs.newTab': 'New Tab',
   'sftp.conflict.title': 'File Conflict',
   'sftp.conflict.desc': 'A file with the same name already exists at the destination',
   'sftp.conflict.alreadyExistsSuffix': 'already exists',
@@ -449,6 +462,59 @@ const en: Messages = {
   'sftp.conflict.action.keepBoth': 'Keep Both',
   'sftp.conflict.action.replace': 'Replace',
 
+  // SFTP File Opener
+  'sftp.context.openWith': 'Open with...',
+  'sftp.context.edit': 'Edit',
+  'sftp.context.preview': 'Preview',
+  'sftp.opener.title': 'Open with',
+  'sftp.opener.desc': 'Choose an application to open this file',
+  'sftp.opener.builtInEditor': 'Built-in Editor',
+  'sftp.opener.editDescription': 'Edit text files',
+  'sftp.opener.builtInImageViewer': 'Built-in Image Viewer',
+  'sftp.opener.previewDescription': 'Preview images',
+  'sftp.opener.systemApp': 'Choose Application...',
+  'sftp.opener.systemAppDescription': 'Select an application from your computer',
+  'sftp.opener.onlySystemApp': 'This file can only be opened with an external application',
+  'sftp.opener.noAppsAvailable': 'No applications available',
+  'sftp.opener.noExtension': 'files without extension',
+  'sftp.opener.setDefault': 'Always use this for {ext} files',
+  'sftp.opener.confirmTitle': 'Set as Default?',
+  'sftp.opener.confirmDescription': 'Do you want to always use {app} for {ext} files?',
+  'sftp.opener.yesRemember': 'Yes, remember this choice',
+  'sftp.opener.justOnce': 'Just this once',
+  'sftp.opener.confirm.title': 'Set Default Application',
+  'sftp.opener.confirm.desc': 'Do you want to always open .{ext} files with this application?',
+  'sftp.editor.title': 'Text Editor',
+  'sftp.editor.save': 'Save to Remote',
+  'sftp.editor.saving': 'Saving...',
+  'sftp.editor.saved': 'Saved successfully',
+  'sftp.editor.saveFailed': 'Failed to save file',
+  'sftp.editor.unsavedChanges': 'You have unsaved changes. Close anyway?',
+  'sftp.editor.syntaxHighlight': 'Syntax Highlighting',
+  'sftp.preview.title': 'Image Preview',
+  'sftp.preview.zoomIn': 'Zoom In',
+  'sftp.preview.zoomOut': 'Zoom Out',
+  'sftp.preview.resetZoom': 'Reset Zoom',
+  'sftp.preview.fitToWindow': 'Fit to Window',
+
+  // Settings > SFTP File Associations
+  'settings.tab.sftpFileAssociations': 'SFTP',
+  'settings.sftpFileAssociations.title': 'SFTP File Associations',
+  'settings.sftpFileAssociations.desc': 'Configure default applications for opening files by extension',
+  'settings.sftpFileAssociations.extension': 'Extension',
+  'settings.sftpFileAssociations.application': 'Application',
+  'settings.sftpFileAssociations.noAssociations': 'No file associations configured',
+  'settings.sftpFileAssociations.remove': 'Remove',
+  'settings.sftpFileAssociations.removeConfirm': 'Remove association for .{ext}?',
+  
+  // Settings > SFTP Behavior
+  'settings.sftp.doubleClickBehavior': 'Double-click behavior',
+  'settings.sftp.doubleClickBehavior.desc': 'Choose the action when double-clicking a file in SFTP View',
+  'settings.sftp.doubleClickBehavior.open': 'Open file',
+  'settings.sftp.doubleClickBehavior.transfer': 'Transfer to other pane',
+  'settings.sftp.doubleClickBehavior.openDesc': 'Open the file in the default application',
+  'settings.sftp.doubleClickBehavior.transferDesc': 'Transfer the file to the other pane\'s active host',
+
   // Quick Switcher
   'qs.search.placeholder': 'Search hosts or tabs',
   'qs.recentConnections': 'Recent connections',

application/i18n/locales/zh-CN.ts

@@ -249,6 +249,8 @@ const zhCN: Messages = {
 
   // SFTP
   'sftp.newFolder': '新建文件夹',
+  'sftp.filter': '筛选',
+  'sftp.filter.placeholder': '按文件名筛选...',
   'sftp.columns.name': '名称',
   'sftp.columns.modified': '修改时间',
   'sftp.columns.size': '大小',
@@ -293,6 +295,7 @@ const zhCN: Messages = {
   'sftp.error.uploadFailed': '上传失败',
   'sftp.error.deleteFailed': '删除失败',
   'sftp.error.createFolderFailed': '创建文件夹失败',
+  'sftp.error.renameFailed': '重命名失败',
   'sftp.picker.title': '选择主机',
   'sftp.picker.desc': '为{side}窗格选择主机',
   'sftp.picker.searchPlaceholder': '搜索主机...',
@@ -301,11 +304,13 @@ const zhCN: Messages = {
   'sftp.picker.local.badge': '本地',
   'sftp.picker.noMatch': '没有匹配的主机',
   'sftp.permissions.title': '编辑权限',
-  'sftp.permissions.owner': 'Owner',
-  'sftp.permissions.group': 'Group',
-  'sftp.permissions.others': 'Others',
-  'sftp.permissions.octal': 'Octal',
-  'sftp.permissions.symbolic': 'Symbolic',
+  'sftp.permissions.owner': '所有者',
+  'sftp.permissions.group': '群组',
+  'sftp.permissions.others': '其他',
+  'sftp.permissions.octal': '八进制',
+  'sftp.permissions.symbolic': '符号',
+  'sftp.permissions.success': '权限已更新',
+  'sftp.permissions.failed': '权限更新失败',
 
   // Quick Switcher
   'qs.search.placeholder': '搜索主机或标签页',
@@ -669,6 +674,8 @@ const zhCN: Messages = {
   'pf.deleteActive.title': '删除正在运行的端口转发？',
   'pf.deleteActive.desc': '端口转发规则 "{label}" 当前正在运行。删除前将先关闭转发连接。',
   'pf.deleteActive.confirm': '关闭并删除',
+  'pf.form.autoStart': '自动启动',
+  'pf.form.autoStartDesc': '应用启动时自动开启此规则',
 
   // SFTP (pane + conflict)
   'sftp.pane.local': '本地',
@@ -676,6 +683,9 @@ const zhCN: Messages = {
   'sftp.pane.selectHost': '选择主机',
   'sftp.pane.selectHostToStart': '先选择一个主机',
   'sftp.pane.chooseFilesystem': '选择要浏览的本地或远端文件系统',
+  'sftp.tabs.addTab': '新建标签页',
+  'sftp.tabs.closeTab': '关闭标签页',
+  'sftp.tabs.newTab': '新标签页',
   'sftp.conflict.title': '文件冲突',
   'sftp.conflict.desc': '目标位置已存在同名文件',
   'sftp.conflict.alreadyExistsSuffix': '已存在',
@@ -688,6 +698,59 @@ const zhCN: Messages = {
   'sftp.conflict.action.keepBoth': '保留两者',
   'sftp.conflict.action.replace': '替换',
 
+  // SFTP File Opener
+  'sftp.context.openWith': '打开方式...',
+  'sftp.context.edit': '编辑',
+  'sftp.context.preview': '预览',
+  'sftp.opener.title': '打开方式',
+  'sftp.opener.desc': '选择一个应用程序来打开此文件',
+  'sftp.opener.builtInEditor': '内置编辑器',
+  'sftp.opener.editDescription': '编辑文本文件',
+  'sftp.opener.builtInImageViewer': '内置图片预览',
+  'sftp.opener.previewDescription': '预览图片',
+  'sftp.opener.systemApp': '选择应用程序...',
+  'sftp.opener.systemAppDescription': '从本地选择一个应用程序',
+  'sftp.opener.onlySystemApp': '此文件只能用外部应用程序打开',
+  'sftp.opener.noAppsAvailable': '无可用应用程序',
+  'sftp.opener.noExtension': '无扩展名文件',
+  'sftp.opener.setDefault': '始终使用此方式打开 {ext} 文件',
+  'sftp.opener.confirmTitle': '设为默认？',
+  'sftp.opener.confirmDescription': '是否始终使用 {app} 打开 {ext} 文件？',
+  'sftp.opener.yesRemember': '是，记住此选择',
+  'sftp.opener.justOnce': '仅此一次',
+  'sftp.opener.confirm.title': '设置默认应用程序',
+  'sftp.opener.confirm.desc': '是否始终使用此应用程序打开 .{ext} 文件？',
+  'sftp.editor.title': '文本编辑器',
+  'sftp.editor.save': '保存到远程',
+  'sftp.editor.saving': '保存中...',
+  'sftp.editor.saved': '保存成功',
+  'sftp.editor.saveFailed': '保存文件失败',
+  'sftp.editor.unsavedChanges': '您有未保存的更改。确定要关闭吗？',
+  'sftp.editor.syntaxHighlight': '语法高亮',
+  'sftp.preview.title': '图片预览',
+  'sftp.preview.zoomIn': '放大',
+  'sftp.preview.zoomOut': '缩小',
+  'sftp.preview.resetZoom': '重置缩放',
+  'sftp.preview.fitToWindow': '适应窗口',
+
+  // Settings > SFTP File Associations
+  'settings.tab.sftpFileAssociations': 'SFTP',
+  'settings.sftpFileAssociations.title': 'SFTP 文件关联',
+  'settings.sftpFileAssociations.desc': '配置按扩展名打开文件的默认应用程序',
+  'settings.sftpFileAssociations.extension': '扩展名',
+  'settings.sftpFileAssociations.application': '应用程序',
+  'settings.sftpFileAssociations.noAssociations': '未配置文件关联',
+  'settings.sftpFileAssociations.remove': '移除',
+  'settings.sftpFileAssociations.removeConfirm': '确定移除 .{ext} 的关联吗？',
+  
+  // Settings > SFTP Behavior
+  'settings.sftp.doubleClickBehavior': '双击行为',
+  'settings.sftp.doubleClickBehavior.desc': '选择在 SFTP 视图中双击文件时的操作',
+  'settings.sftp.doubleClickBehavior.open': '打开文件',
+  'settings.sftp.doubleClickBehavior.transfer': '传输到另一侧',
+  'settings.sftp.doubleClickBehavior.openDesc': '使用默认应用程序打开文件',
+  'settings.sftp.doubleClickBehavior.transferDesc': '将文件传输到另一窗格的活动主机',
+
   // Settings > Terminal
   'settings.terminal.section.theme': '终端主题',
   'settings.terminal.section.font': '字体',
@@ -756,6 +819,9 @@ const zhCN: Messages = {
   'settings.terminal.localShell.startDir.placeholder': '用户主目录',
   'settings.terminal.localShell.startDir.notFound': '目录不存在',
   'settings.terminal.localShell.startDir.isFile': '路径是文件，不是目录',
+  'settings.terminal.section.connection': '连接',
+  'settings.terminal.connection.keepaliveInterval': '会话保持间隔',
+  'settings.terminal.connection.keepaliveInterval.desc': '向服务器发送 SSH 级别保活数据包的频率（秒）。设为 0 表示禁用。',
 
   // Settings > Shortcuts
   'settings.shortcuts.section.scheme': '快捷键方案',

application/state/fontStore.ts

@@ -0,0 +1,146 @@
+import { useSyncExternalStore } from 'react';
+import { TERMINAL_FONTS, type TerminalFont } from '../../infrastructure/config/fonts';
+import { getMonospaceFonts } from '../../lib/localFonts';
+
+/**
+ * Global font store - singleton pattern using useSyncExternalStore
+ * Ensures fonts are loaded only once and shared across all components
+ */
+type Listener = () => void;
+
+interface FontStoreState {
+  availableFonts: TerminalFont[];
+  isLoading: boolean;
+  isLoaded: boolean;
+  error: string | null;
+}
+
+class FontStore {
+  private state: FontStoreState = {
+    availableFonts: TERMINAL_FONTS,
+    isLoading: false,
+    isLoaded: false,
+    error: null,
+  };
+  private listeners = new Set<Listener>();
+
+  // Getters for individual state slices
+  getAvailableFonts = (): TerminalFont[] => this.state.availableFonts;
+  getIsLoading = (): boolean => this.state.isLoading;
+  getIsLoaded = (): boolean => this.state.isLoaded;
+  getError = (): string | null => this.state.error;
+
+  private notify = () => {
+    // Defer listener notification to avoid "setState during render"
+    Promise.resolve().then(() => {
+      this.listeners.forEach(listener => listener());
+    });
+  };
+
+  private setState = (partial: Partial<FontStoreState>) => {
+    this.state = { ...this.state, ...partial };
+    this.notify();
+  };
+
+  subscribe = (listener: Listener): (() => void) => {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  };
+
+  /**
+   * Initialize font loading - safe to call multiple times,
+   * will only load once
+   */
+  initialize = async (): Promise<void> => {
+    // Already loaded or currently loading
+    if (this.state.isLoaded || this.state.isLoading) {
+      return;
+    }
+
+    this.setState({ isLoading: true, error: null });
+
+    try {
+      const localFonts = await getMonospaceFonts();
+      
+      // Combine default fonts with local fonts, deduplicate by id
+      const fontMap = new Map<string, TerminalFont>();
+
+      // Add default fonts first
+      TERMINAL_FONTS.forEach(font => fontMap.set(font.id, font));
+
+      // Add local fonts with a distinct ID namespace to avoid collisions
+      localFonts.forEach(font => {
+        const localId = font.id.startsWith('local-') ? font.id : `local-${font.id}`;
+        fontMap.set(localId, { ...font, id: localId });
+      });
+
+      this.setState({
+        availableFonts: Array.from(fontMap.values()),
+        isLoading: false,
+        isLoaded: true,
+      });
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Failed to load local fonts';
+      console.warn('Failed to fetch local fonts, using defaults:', error);
+      this.setState({
+        availableFonts: TERMINAL_FONTS,
+        isLoading: false,
+        isLoaded: true,
+        error: errorMessage,
+      });
+    }
+  };
+
+  /**
+   * Find a font by ID with fallback
+   */
+  getFontById = (fontId: string): TerminalFont => {
+    const fonts = this.state.availableFonts;
+    return fonts.find(f => f.id === fontId) || fonts[0] || TERMINAL_FONTS[0];
+  };
+}
+
+// Singleton instance
+export const fontStore = new FontStore();
+
+// ============== Hooks ==============
+
+/**
+ * Get available fonts - triggers initialization on first use
+ */
+export const useAvailableFonts = (): TerminalFont[] => {
+  // Trigger initialization on first use
+  if (!fontStore.getIsLoaded() && !fontStore.getIsLoading()) {
+    fontStore.initialize();
+  }
+  
+  return useSyncExternalStore(
+    fontStore.subscribe,
+    fontStore.getAvailableFonts
+  );
+};
+
+/**
+ * Get font loading state
+ */
+export const useFontsLoading = (): boolean => {
+  return useSyncExternalStore(
+    fontStore.subscribe,
+    fontStore.getIsLoading
+  );
+};
+
+/**
+ * Get font by ID with fallback - useful for components that need a specific font
+ */
+export const useFontById = (fontId: string): TerminalFont => {
+  const fonts = useAvailableFonts();
+  return fonts.find(f => f.id === fontId) || fonts[0] || TERMINAL_FONTS[0];
+};
+
+/**
+ * Initialize fonts eagerly (call at app startup)
+ */
+export const initializeFonts = (): void => {
+  fontStore.initialize();
+};

application/state/usePortForwardingAutoStart.ts

@@ -0,0 +1,137 @@
+/**
+ * Hook for auto-starting port forwarding rules on app launch.
+ * This should be used at the App level to ensure auto-start happens
+ * when the application starts, not when the user navigates to the port forwarding page.
+ */
+import { useEffect, useRef } from "react";
+import { Host, PortForwardingRule } from "../../domain/models";
+import { STORAGE_KEY_PORT_FORWARDING } from "../../infrastructure/config/storageKeys";
+import { localStorageAdapter } from "../../infrastructure/persistence/localStorageAdapter";
+import {
+  getActiveConnection,
+  setReconnectCallback,
+  startPortForward,
+  syncWithBackend,
+} from "../../infrastructure/services/portForwardingService";
+import { logger } from "../../lib/logger";
+
+export interface UsePortForwardingAutoStartOptions {
+  hosts: Host[];
+  keys: { id: string; privateKey: string }[];
+}
+
+/**
+ * Auto-starts port forwarding rules that have autoStart enabled.
+ * This hook should be called at the App level to run on app launch.
+ */
+export const usePortForwardingAutoStart = ({
+  hosts,
+  keys,
+}: UsePortForwardingAutoStartOptions): void => {
+  const autoStartExecutedRef = useRef(false);
+  const hostsRef = useRef<Host[]>(hosts);
+  const keysRef = useRef<{ id: string; privateKey: string }[]>(keys);
+
+  // Keep refs in sync
+  useEffect(() => {
+    hostsRef.current = hosts;
+  }, [hosts]);
+
+  useEffect(() => {
+    keysRef.current = keys;
+  }, [keys]);
+
+  // Set up the reconnect callback
+  useEffect(() => {
+    const handleReconnect = async (
+      ruleId: string,
+      onStatusChange: (status: PortForwardingRule["status"], error?: string) => void,
+    ) => {
+      // Load the current rules from storage
+      const rules = localStorageAdapter.read<PortForwardingRule[]>(
+        STORAGE_KEY_PORT_FORWARDING,
+      ) ?? [];
+      
+      const rule = rules.find((r) => r.id === ruleId);
+      if (!rule || !rule.hostId) {
+        return { success: false, error: "Rule or host not found" };
+      }
+
+      const host = hostsRef.current.find((h) => h.id === rule.hostId);
+      if (!host) {
+        return { success: false, error: "Host not found" };
+      }
+
+      return startPortForward(rule, host, keysRef.current, onStatusChange, true);
+    };
+
+    setReconnectCallback(handleReconnect);
+    return () => {
+      setReconnectCallback(null);
+    };
+  }, []);
+
+  // Auto-start rules on app launch
+  useEffect(() => {
+    if (autoStartExecutedRef.current) return;
+    if (hosts.length === 0) return;
+
+    const runAutoStart = async () => {
+      // First sync with backend to get any active tunnels
+      await syncWithBackend();
+      
+      // Load rules from storage
+      const rules = localStorageAdapter.read<PortForwardingRule[]>(
+        STORAGE_KEY_PORT_FORWARDING,
+      ) ?? [];
+
+      // Only start rules that are not already active
+      const autoStartRules = rules.filter((r) => {
+        if (!r.autoStart || !r.hostId) return false;
+        // Check if there's an active connection for this rule
+        const conn = getActiveConnection(r.id);
+        // Only start if not already connecting or active
+        return !conn || conn.status === 'inactive' || conn.status === 'error';
+      });
+
+      if (autoStartRules.length === 0) return;
+
+      autoStartExecutedRef.current = true;
+      logger.info(`[PortForwardingAutoStart] Starting ${autoStartRules.length} auto-start rules`);
+
+      // Start each auto-start rule
+      for (const rule of autoStartRules) {
+        const host = hosts.find((h) => h.id === rule.hostId);
+        if (host) {
+          void startPortForward(
+            rule,
+            host,
+            keys,
+            (status, error) => {
+              // Update the rule status in storage
+              const currentRules = localStorageAdapter.read<PortForwardingRule[]>(
+                STORAGE_KEY_PORT_FORWARDING,
+              ) ?? [];
+              
+              const updatedRules = currentRules.map((r) =>
+                r.id === rule.id
+                  ? {
+                      ...r,
+                      status,
+                      error,
+                      lastUsedAt: status === "active" ? Date.now() : r.lastUsedAt,
+                    }
+                  : r,
+              );
+              
+              localStorageAdapter.write(STORAGE_KEY_PORT_FORWARDING, updatedRules);
+            },
+            true, // Enable reconnect for auto-start rules
+          );
+        }
+      }
+    };
+
+    void runAutoStart();
+  }, [hosts, keys]);
+};

application/state/usePortForwardingState.ts

@@ -7,6 +7,7 @@ import {
 } from "../../infrastructure/config/storageKeys";
 import { localStorageAdapter } from "../../infrastructure/persistence/localStorageAdapter";
 import {
+  clearReconnectTimer,
   getActiveConnection,
   getActiveRuleIds,
   startPortForward,
@@ -51,6 +52,7 @@ export interface UsePortForwardingStateResult {
     host: Host,
     keys: { id: string; privateKey: string }[],
     onStatusChange?: (status: PortForwardingRule["status"], error?: string) => void,
+    enableReconnect?: boolean,
   ) => Promise<{ success: boolean; error?: string }>;
   stopTunnel: (
     ruleId: string,
@@ -212,11 +214,12 @@ export const usePortForwardingState = (): UsePortForwardingStateResult => {
         status: PortForwardingRule["status"],
         error?: string,
       ) => void,
+      enableReconnect = false,
     ) => {
       return startPortForward(rule, host, keys, (status, error) => {
         setRuleStatus(rule.id, status, error);
         onStatusChange?.(status, error ?? undefined);
-      });
+      }, enableReconnect);
     },
     [setRuleStatus],
   );
@@ -226,6 +229,8 @@ export const usePortForwardingState = (): UsePortForwardingStateResult => {
       ruleId: string,
       onStatusChange?: (status: PortForwardingRule["status"]) => void,
     ) => {
+      // Clear any pending reconnect timer when manually stopping
+      clearReconnectTimer(ruleId);
       return stopPortForward(ruleId, (status) => {
         setRuleStatus(ruleId, status);
         onStatusChange?.(status);

application/state/useSettingsState.ts

@@ -16,11 +16,13 @@ STORAGE_KEY_UI_LANGUAGE,
 STORAGE_KEY_ACCENT_MODE,
 STORAGE_KEY_UI_THEME_LIGHT,
 STORAGE_KEY_UI_THEME_DARK,
+STORAGE_KEY_SFTP_DOUBLE_CLICK_BEHAVIOR,
 } from '../../infrastructure/config/storageKeys';
 import { DEFAULT_UI_LOCALE, resolveSupportedLocale } from '../../infrastructure/config/i18n';
 import { TERMINAL_THEMES } from '../../infrastructure/config/terminalThemes';
-import { TERMINAL_FONTS, DEFAULT_FONT_SIZE } from '../../infrastructure/config/fonts';
+import { DEFAULT_FONT_SIZE } from '../../infrastructure/config/fonts';
 import { DARK_UI_THEMES, LIGHT_UI_THEMES, UiThemeTokens, getUiThemeById } from '../../infrastructure/config/uiThemes';
+import { useAvailableFonts } from './fontStore';
 import { localStorageAdapter } from '../../infrastructure/persistence/localStorageAdapter';
 import { netcattyBridge } from '../../infrastructure/services/netcattyBridge';
 
@@ -32,10 +34,11 @@ const DEFAULT_CUSTOM_ACCENT = '221.2 83.2% 53.3%';
 const DEFAULT_TERMINAL_THEME = 'netcatty-dark';
 const DEFAULT_FONT_FAMILY = 'menlo';
 // Auto-detect default hotkey scheme based on platform
-const DEFAULT_HOTKEY_SCHEME: HotkeyScheme = 
-  typeof navigator !== 'undefined' && /Mac|iPhone|iPad|iPod/i.test(navigator.platform) 
-    ? 'mac' 
+const DEFAULT_HOTKEY_SCHEME: HotkeyScheme =
+  typeof navigator !== 'undefined' && /Mac|iPhone|iPad|iPod/i.test(navigator.platform)
+    ? 'mac'
     : 'pc';
+const DEFAULT_SFTP_DOUBLE_CLICK_BEHAVIOR: 'open' | 'transfer' = 'open';
 
 const readStoredString = (key: string): string | null => {
   const raw = localStorageAdapter.readString(key);
@@ -97,13 +100,14 @@ const applyThemeTokens = (
   root.style.setProperty('--border', tokens.border);
   root.style.setProperty('--input', tokens.input);
   root.style.setProperty('--ring', accentToken);
-  
+
   // Sync with native window title bar (Electron)
   netcattyBridge.get()?.setTheme?.(theme);
   netcattyBridge.get()?.setBackgroundColor?.(tokens.background);
 };
 
 export const useSettingsState = () => {
+  const availableFonts = useAvailableFonts();
   const [theme, setTheme] = useState<'dark' | 'light'>(() => {
     const stored = readStoredString(STORAGE_KEY_THEME);
     return stored && isValidTheme(stored) ? stored : DEFAULT_THEME;
@@ -146,13 +150,17 @@ export const useSettingsState = () => {
     }
     return DEFAULT_HOTKEY_SCHEME;
   });
-  const [customKeyBindings, setCustomKeyBindings] = useState<CustomKeyBindings>(() => 
+  const [customKeyBindings, setCustomKeyBindings] = useState<CustomKeyBindings>(() =>
     localStorageAdapter.read<CustomKeyBindings>(STORAGE_KEY_CUSTOM_KEY_BINDINGS) || {}
   );
   const [isHotkeyRecording, setIsHotkeyRecordingState] = useState(false);
-  const [customCSS, setCustomCSS] = useState<string>(() => 
+  const [customCSS, setCustomCSS] = useState<string>(() =>
     localStorageAdapter.readString(STORAGE_KEY_CUSTOM_CSS) || ''
   );
+  const [sftpDoubleClickBehavior, setSftpDoubleClickBehavior] = useState<'open' | 'transfer'>(() => {
+    const stored = readStoredString(STORAGE_KEY_SFTP_DOUBLE_CLICK_BEHAVIOR);
+    return (stored === 'open' || stored === 'transfer') ? stored : DEFAULT_SFTP_DOUBLE_CLICK_BEHAVIOR;
+  });
 
   // Helper to notify other windows about settings changes via IPC
   const notifySettingsChanged = useCallback((key: string, value: unknown) => {
@@ -371,11 +379,17 @@ export const useSettingsState = () => {
           setTerminalFontSize(newSize);
         }
       }
+      // Sync SFTP double-click behavior from other windows
+      if (e.key === STORAGE_KEY_SFTP_DOUBLE_CLICK_BEHAVIOR && e.newValue) {
+        if ((e.newValue === 'open' || e.newValue === 'transfer') && e.newValue !== sftpDoubleClickBehavior) {
+          setSftpDoubleClickBehavior(e.newValue);
+        }
+      }
     };
 
     window.addEventListener('storage', handleStorageChange);
     return () => window.removeEventListener('storage', handleStorageChange);
-  }, [theme, lightUiThemeId, darkUiThemeId, accentMode, customAccent, customCSS, hotkeyScheme, uiLanguage, terminalThemeId, terminalFontFamilyId, terminalFontSize]);
+  }, [theme, lightUiThemeId, darkUiThemeId, accentMode, customAccent, customCSS, hotkeyScheme, uiLanguage, terminalThemeId, terminalFontFamilyId, terminalFontSize, sftpDoubleClickBehavior]);
 
   useEffect(() => {
     localStorageAdapter.writeString(STORAGE_KEY_TERM_THEME, terminalThemeId);
@@ -415,7 +429,7 @@ export const useSettingsState = () => {
   useEffect(() => {
     localStorageAdapter.writeString(STORAGE_KEY_CUSTOM_CSS, customCSS);
     notifySettingsChanged(STORAGE_KEY_CUSTOM_CSS, customCSS);
-    
+
     // Apply custom CSS to document
     let styleEl = document.getElementById('netcatty-custom-css') as HTMLStyleElement | null;
     if (!styleEl) {
@@ -426,6 +440,12 @@ export const useSettingsState = () => {
     styleEl.textContent = customCSS;
   }, [customCSS, notifySettingsChanged]);
 
+  // Persist SFTP double-click behavior
+  useEffect(() => {
+    localStorageAdapter.writeString(STORAGE_KEY_SFTP_DOUBLE_CLICK_BEHAVIOR, sftpDoubleClickBehavior);
+    notifySettingsChanged(STORAGE_KEY_SFTP_DOUBLE_CLICK_BEHAVIOR, sftpDoubleClickBehavior);
+  }, [sftpDoubleClickBehavior, notifySettingsChanged]);
+
   // Get merged key bindings (defaults + custom overrides)
   const keyBindings = useMemo((): KeyBinding[] => {
     return DEFAULT_KEY_BINDINGS.map(binding => {
@@ -484,8 +504,8 @@ export const useSettingsState = () => {
   );
 
   const currentTerminalFont = useMemo(
-    () => TERMINAL_FONTS.find(f => f.id === terminalFontFamilyId) || TERMINAL_FONTS[0],
-    [terminalFontFamilyId]
+    () => availableFonts.find(f => f.id === terminalFontFamilyId) || availableFonts[0],
+    [terminalFontFamilyId, availableFonts]
   );
 
   const updateTerminalSetting = useCallback(<K extends keyof TerminalSettings>(
@@ -532,5 +552,8 @@ export const useSettingsState = () => {
     setIsHotkeyRecording,
     customCSS,
     setCustomCSS,
+    sftpDoubleClickBehavior,
+    setSftpDoubleClickBehavior,
+    availableFonts,
   };
 };

application/state/useSftpBackend.ts

@@ -174,6 +174,28 @@ export const useSftpBackend = () => {
     return bridge.onTransferProgress(transferId, cb);
   }, []);
 
+  const selectApplication = useCallback(async () => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.selectApplication) return undefined;
+    return bridge.selectApplication();
+  }, []);
+
+  const downloadSftpToTempAndOpen = useCallback(async (
+    sftpId: string,
+    remotePath: string,
+    fileName: string,
+    appPath: string
+  ) => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.downloadSftpToTemp || !bridge?.openWithApplication) {
+      throw new Error("Download to temp / open with unavailable");
+    }
+    // Download the file to temp
+    const tempPath = await bridge.downloadSftpToTemp(sftpId, remotePath, fileName);
+    // Open with the selected application
+    await bridge.openWithApplication(tempPath, appPath);
+  }, []);
+
   return {
     openSftp,
     closeSftp,
@@ -201,6 +223,8 @@ export const useSftpBackend = () => {
     startStreamTransfer,
     cancelTransfer,
     onTransferProgress,
+    selectApplication,
+    downloadSftpToTempAndOpen,
   };
 };
 

application/state/useSftpFileAssociations.ts

@@ -0,0 +1,149 @@
+/**
+ * useSftpFileAssociations - Hook for managing SFTP file opener associations
+ * Uses a shared state pattern to sync across components
+ */
+import { useCallback, useEffect, useSyncExternalStore } from 'react';
+import { STORAGE_KEY_SFTP_FILE_ASSOCIATIONS } from '../../infrastructure/config/storageKeys';
+import { localStorageAdapter } from '../../infrastructure/persistence/localStorageAdapter';
+import type { FileAssociation, FileOpenerType, SystemAppInfo } from '../../lib/sftpFileUtils';
+import { getFileExtension } from '../../lib/sftpFileUtils';
+
+export interface FileAssociationEntry {
+  openerType: FileOpenerType;
+  systemApp?: SystemAppInfo;
+}
+
+export interface FileAssociationsMap {
+  [extension: string]: FileAssociationEntry;
+}
+
+// Shared state and subscribers for cross-component synchronization
+const subscribers = new Set<() => void>();
+
+// Use a wrapper object so we can update the reference for useSyncExternalStore
+let snapshotRef: { associations: FileAssociationsMap } = { associations: {} };
+
+function loadFromStorage(): FileAssociationsMap {
+  const stored = localStorageAdapter.read<FileAssociationsMap>(STORAGE_KEY_SFTP_FILE_ASSOCIATIONS);
+  console.log('[SftpFileAssociations] Loading from storage:', stored);
+  if (stored) {
+    const migrated: FileAssociationsMap = {};
+    for (const [ext, value] of Object.entries(stored)) {
+      if (typeof value === 'string') {
+        migrated[ext] = { openerType: value as FileOpenerType };
+      } else {
+        migrated[ext] = value as FileAssociationEntry;
+      }
+    }
+    console.log('[SftpFileAssociations] Migrated associations:', migrated);
+    return migrated;
+  }
+  return {};
+}
+
+// Initialize from storage
+snapshotRef = { associations: loadFromStorage() };
+
+function saveToStorage(associations: FileAssociationsMap) {
+  console.log('[SftpFileAssociations] saveToStorage called with:', associations);
+  localStorageAdapter.write(STORAGE_KEY_SFTP_FILE_ASSOCIATIONS, associations);
+  // Verify it was saved
+  const verify = localStorageAdapter.read(STORAGE_KEY_SFTP_FILE_ASSOCIATIONS);
+  console.log('[SftpFileAssociations] Verification read from storage:', verify);
+}
+
+function updateAssociations(newAssociations: FileAssociationsMap) {
+  console.log('[SftpFileAssociations] Updating associations:', newAssociations);
+  // Create new reference so useSyncExternalStore detects change
+  snapshotRef = { associations: newAssociations };
+  saveToStorage(newAssociations);
+  console.log('[SftpFileAssociations] Notifying', subscribers.size, 'subscribers');
+  subscribers.forEach(callback => callback());
+}
+
+function subscribe(callback: () => void) {
+  subscribers.add(callback);
+  return () => subscribers.delete(callback);
+}
+
+function getSnapshot() {
+  return snapshotRef;
+}
+
+export function useSftpFileAssociations() {
+  const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const associations = snapshot.associations;
+
+  // Listen for storage events from other tabs/windows
+  useEffect(() => {
+    const handleStorage = (e: StorageEvent) => {
+      if (e.key === STORAGE_KEY_SFTP_FILE_ASSOCIATIONS) {
+        updateAssociations(loadFromStorage());
+      }
+    };
+    window.addEventListener('storage', handleStorage);
+    return () => window.removeEventListener('storage', handleStorage);
+  }, []);
+
+  /**
+   * Get the opener entry for a file based on its extension
+   */
+  const getOpenerForFile = useCallback((fileName: string): FileAssociationEntry | null => {
+    const ext = getFileExtension(fileName);
+    return associations[ext] || null;
+  }, [associations]);
+
+  /**
+   * Set the opener type for a specific extension
+   */
+  const setOpenerForExtension = useCallback((
+    extension: string, 
+    openerType: FileOpenerType,
+    systemApp?: SystemAppInfo
+  ) => {
+    console.log('[SftpFileAssociations] setOpenerForExtension called with:', { extension, openerType, systemApp });
+    console.log('[SftpFileAssociations] Current associations before update:', snapshotRef.associations);
+    updateAssociations({
+      ...snapshotRef.associations,
+      [extension.toLowerCase()]: { openerType, systemApp },
+    });
+  }, []);
+
+  /**
+   * Remove the association for a specific extension
+   */
+  const removeAssociation = useCallback((extension: string) => {
+    const next = { ...snapshotRef.associations };
+    delete next[extension.toLowerCase()];
+    updateAssociations(next);
+  }, []);
+
+  /**
+   * Get all associations as an array
+   */
+  const getAllAssociations = useCallback((): FileAssociation[] => {
+    const result = Object.entries(associations).map(([extension, entry]: [string, FileAssociationEntry]) => ({
+      extension,
+      openerType: entry.openerType,
+      systemApp: entry.systemApp,
+    }));
+    console.log('[SftpFileAssociations] getAllAssociations called, returning', result.length, 'items:', result);
+    return result;
+  }, [associations]);
+
+  /**
+   * Clear all associations
+   */
+  const clearAllAssociations = useCallback(() => {
+    updateAssociations({});
+  }, []);
+
+  return {
+    associations,
+    getOpenerForFile,
+    setOpenerForExtension,
+    removeAssociation,
+    getAllAssociations,
+    clearAllAssociations,
+  };
+}

application/state/useSftpFileOperations.ts

@@ -0,0 +1,184 @@
+/**
+ * useSftpFileOperations - Shared file operations for SFTP components
+ * 
+ * This hook provides common file operations like open, edit, preview
+ * that can be shared between SFTPModal and SftpView components.
+ */
+
+import { useCallback, useState } from "react";
+import { getFileExtension, isTextFile, FileOpenerType } from "../../lib/sftpFileUtils";
+import { toast } from "../../components/ui/toast";
+import { useI18n } from "../i18n/I18nProvider";
+import { useSftpFileAssociations } from "./useSftpFileAssociations";
+
+export interface FileOperationsState {
+  // Text editor state
+  showTextEditor: boolean;
+  textEditorTarget: { name: string; fullPath: string } | null;
+  textEditorContent: string;
+  loadingTextContent: boolean;
+  
+  // File opener dialog state
+  showFileOpenerDialog: boolean;
+  fileOpenerTarget: { name: string; fullPath: string } | null;
+}
+
+export interface FileOperationsActions {
+  // Open file based on type/association
+  openFile: (fileName: string, fullPath: string) => void;
+  
+  // Edit text file
+  editFile: (
+    fileName: string, 
+    fullPath: string, 
+    readContent: () => Promise<string>
+  ) => Promise<void>;
+  
+  // Save text file
+  saveTextFile: (
+    content: string, 
+    writeContent: (path: string, content: string) => Promise<void>
+  ) => Promise<void>;
+  
+  // Handle file opener selection
+  handleFileOpenerSelect: (
+    openerType: FileOpenerType, 
+    setAsDefault: boolean,
+    readTextContent: () => Promise<string>,
+    readImageData: () => Promise<ArrayBuffer>
+  ) => Promise<void>;
+  
+  // Close modals
+  closeTextEditor: () => void;
+  closeFileOpenerDialog: () => void;
+  
+  // Check if file can be edited
+  canEditFile: (fileName: string) => boolean;
+}
+
+export interface UseSftpFileOperationsResult {
+  state: FileOperationsState;
+  actions: FileOperationsActions;
+}
+
+export function useSftpFileOperations(): UseSftpFileOperationsResult {
+  const { t } = useI18n();
+  const { getOpenerForFile, setOpenerForExtension } = useSftpFileAssociations();
+  
+  // Text editor state
+  const [showTextEditor, setShowTextEditor] = useState(false);
+  const [textEditorTarget, setTextEditorTarget] = useState<{ name: string; fullPath: string } | null>(null);
+  const [textEditorContent, setTextEditorContent] = useState("");
+  const [loadingTextContent, setLoadingTextContent] = useState(false);
+  
+  // File opener dialog state
+  const [showFileOpenerDialog, setShowFileOpenerDialog] = useState(false);
+  const [fileOpenerTarget, setFileOpenerTarget] = useState<{ name: string; fullPath: string } | null>(null);
+
+  const canEditFile = useCallback((fileName: string) => {
+    return isTextFile(fileName);
+  }, []);
+
+  const closeTextEditor = useCallback(() => {
+    setShowTextEditor(false);
+    setTextEditorTarget(null);
+    setTextEditorContent("");
+  }, []);
+
+  const closeFileOpenerDialog = useCallback(() => {
+    setShowFileOpenerDialog(false);
+    setFileOpenerTarget(null);
+  }, []);
+
+  const editFile = useCallback(async (
+    fileName: string,
+    fullPath: string,
+    readContent: () => Promise<string>
+  ) => {
+    try {
+      setLoadingTextContent(true);
+      setTextEditorTarget({ name: fileName, fullPath });
+      const content = await readContent();
+      setTextEditorContent(content);
+      setShowTextEditor(true);
+    } catch (e) {
+      toast.error(
+        e instanceof Error ? e.message : t("sftp.error.loadFailed"),
+        "SFTP",
+      );
+    } finally {
+      setLoadingTextContent(false);
+    }
+  }, [t]);
+
+  const saveTextFile = useCallback(async (
+    content: string,
+    writeContent: (path: string, content: string) => Promise<void>
+  ) => {
+    if (!textEditorTarget) return;
+    await writeContent(textEditorTarget.fullPath, content);
+  }, [textEditorTarget]);
+
+  const openFile = useCallback((fileName: string, fullPath: string) => {
+    const savedOpener = getOpenerForFile(fileName);
+
+    if (savedOpener) {
+      // User has saved an opener for this file type
+      // We'll just set the target and let the caller handle it
+      setFileOpenerTarget({ name: fileName, fullPath });
+      
+      // Return the opener type so caller knows which operation to perform
+      if (savedOpener === 'builtin-editor' && canEditFile(fileName)) {
+        // Don't show dialog, caller should call editFile
+        return 'edit' as const;
+      }
+    }
+    
+    // No saved opener, show the dialog
+    setFileOpenerTarget({ name: fileName, fullPath });
+    setShowFileOpenerDialog(true);
+    return 'dialog' as const;
+  }, [getOpenerForFile, canEditFile]);
+
+  const handleFileOpenerSelect = useCallback(async (
+    openerType: FileOpenerType,
+    setAsDefault: boolean,
+    readTextContent: () => Promise<string>,
+    _readImageData: () => Promise<ArrayBuffer>
+  ) => {
+    if (!fileOpenerTarget) return;
+
+    if (setAsDefault) {
+      const ext = getFileExtension(fileOpenerTarget.name);
+      if (ext !== 'file') {
+        setOpenerForExtension(ext, openerType);
+      }
+    }
+
+    setShowFileOpenerDialog(false);
+
+    if (openerType === 'builtin-editor') {
+      await editFile(fileOpenerTarget.name, fileOpenerTarget.fullPath, readTextContent);
+    }
+  }, [fileOpenerTarget, setOpenerForExtension, editFile]);
+
+  return {
+    state: {
+      showTextEditor,
+      textEditorTarget,
+      textEditorContent,
+      loadingTextContent,
+      showFileOpenerDialog,
+      fileOpenerTarget,
+    },
+    actions: {
+      openFile,
+      editFile,
+      saveTextFile,
+      handleFileOpenerSelect,
+      closeTextEditor,
+      closeFileOpenerDialog,
+      canEditFile,
+    },
+  };
+}

application/state/useTerminalBackend.ts

@@ -116,6 +116,12 @@ export const useTerminalBackend = () => {
     return bridge.listSerialPorts();
   }, []);
 
+  const getSessionPwd = useCallback(async (sessionId: string) => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.getSessionPwd) return { success: false, error: 'getSessionPwd unavailable' };
+    return bridge.getSessionPwd(sessionId);
+  }, []);
+
   return {
     backendAvailable,
     telnetAvailable,
@@ -131,6 +137,7 @@ export const useTerminalBackend = () => {
     startSerialSession,
     listSerialPorts,
     execCommand,
+    getSessionPwd,
     writeToSession,
     resizeSession,
     closeSession,

components/FileOpenerDialog.tsx

@@ -0,0 +1,132 @@
+/**
+ * FileOpenerDialog - Dialog for choosing how to open a file
+ */
+import { Edit2, FolderOpen } from 'lucide-react';
+import React, { useCallback, useState } from 'react';
+import { useI18n } from '../application/i18n/I18nProvider';
+import type { FileOpenerType, SystemAppInfo } from '../lib/sftpFileUtils';
+import { getFileExtension, isKnownBinaryFile } from '../lib/sftpFileUtils';
+import { Button } from './ui/button';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from './ui/dialog';
+
+interface FileOpenerDialogProps {
+  open: boolean;
+  onClose: () => void;
+  fileName: string;
+  onSelect: (openerType: FileOpenerType, setAsDefault: boolean, systemApp?: SystemAppInfo) => void;
+  onSelectSystemApp: () => Promise<SystemAppInfo | null>;
+}
+
+export const FileOpenerDialog: React.FC<FileOpenerDialogProps> = ({
+  open,
+  onClose,
+  fileName,
+  onSelect,
+  onSelectSystemApp,
+}) => {
+  const { t } = useI18n();
+  const [isSelectingApp, setIsSelectingApp] = useState(false);
+  const [rememberChoice, setRememberChoice] = useState(true);
+
+  const extension = getFileExtension(fileName);
+  // Show edit option for files that are not known binary formats
+  const canEdit = !isKnownBinaryFile(fileName);
+  // For files without extension, we use 'file' as virtual extension
+  // So we always allow setting default (hasExtension is always true)
+  const displayExtension = extension === 'file' ? t('sftp.opener.noExtension') : `.${extension}`;
+
+  const handleSelectBuiltIn = useCallback((openerType: FileOpenerType) => {
+    onSelect(openerType, rememberChoice);
+    onClose();
+  }, [rememberChoice, onSelect, onClose]);
+
+  const handleSelectSystemApp = useCallback(async () => {
+    setIsSelectingApp(true);
+    try {
+      const result = await onSelectSystemApp();
+      if (result) {
+        console.log('[FileOpenerDialog] Calling onSelect with rememberChoice:', rememberChoice, 'result:', result);
+        onSelect('system-app', rememberChoice, result);
+        onClose();
+      }
+    } catch (e) {
+      console.error('Failed to select application:', e);
+    } finally {
+      setIsSelectingApp(false);
+    }
+  }, [onSelectSystemApp, rememberChoice, onSelect, onClose]);
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => {
+      // Don't close while selecting system app
+      if (!isOpen && !isSelectingApp) {
+        onClose();
+      }
+    }}>
+      <DialogContent className="sm:max-w-[400px]">
+        <DialogHeader className="min-w-0">
+          <DialogTitle>{t('sftp.opener.title')}</DialogTitle>
+          <DialogDescription className="max-w-full overflow-hidden text-ellipsis whitespace-nowrap">
+            {fileName}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="py-4 space-y-2">
+          {canEdit && (
+            <Button
+              variant="outline"
+              className="w-full justify-start gap-3 h-12"
+              onClick={() => handleSelectBuiltIn('builtin-editor')}
+            >
+              <Edit2 size={18} className="text-primary" />
+              <div className="text-left">
+                <div className="font-medium text-sm">{t('sftp.opener.builtInEditor')}</div>
+                <div className="text-xs text-muted-foreground">{t('sftp.opener.editDescription')}</div>
+              </div>
+            </Button>
+          )}
+
+          {/* System application option */}
+          <Button
+            variant="outline"
+            className="w-full justify-start gap-3 h-12"
+            onClick={handleSelectSystemApp}
+            disabled={isSelectingApp}
+          >
+            <FolderOpen size={18} className="text-primary" />
+            <div className="text-left">
+              <div className="font-medium text-sm">{t('sftp.opener.systemApp')}</div>
+              <div className="text-xs text-muted-foreground">{t('sftp.opener.systemAppDescription')}</div>
+            </div>
+          </Button>
+
+        </div>
+
+        {/* Remember choice checkbox - always show, use 'file' for no extension */}
+        <div className="flex items-center gap-2 pb-2">
+          <input
+            type="checkbox"
+            id="remember-choice"
+            checked={rememberChoice}
+            onChange={(e) => setRememberChoice(e.target.checked)}
+            className="rounded border-border h-4 w-4 accent-primary"
+          />
+          <label
+            htmlFor="remember-choice"
+            className="text-sm text-muted-foreground cursor-pointer select-none"
+          >
+            {t('sftp.opener.setDefault', { ext: displayExtension })}
+          </label>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>
+            {t('common.cancel')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default FileOpenerDialog;

components/PortForwardingNew.tsx

@@ -138,6 +138,7 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
               );
             }
           },
+          rule.autoStart, // Enable reconnect for auto-start rules
         );
         // Show error from result only if not already shown
         if (!result.success && result.error && !errorShown) {

components/SettingsPage.tsx

@@ -2,7 +2,7 @@
  * Settings Page - Standalone settings window content
  * This component is rendered in a separate Electron window
  */
-import { AppWindow, Cloud, Keyboard, Palette, TerminalSquare, X } from "lucide-react";
+import { AppWindow, Cloud, FileType, Keyboard, Palette, TerminalSquare, X } from "lucide-react";
 import React, { useCallback, useEffect, useState } from "react";
 import { useSettingsState } from "../application/state/useSettingsState";
 import { useVaultState } from "../application/state/useVaultState";
@@ -10,13 +10,17 @@ import { useWindowControls } from "../application/state/useWindowControls";
 import { I18nProvider, useI18n } from "../application/i18n/I18nProvider";
 import SettingsApplicationTab from "./SettingsApplicationTab";
 import SettingsAppearanceTab from "./settings/tabs/SettingsAppearanceTab";
+import SettingsFileAssociationsTab from "./settings/tabs/SettingsFileAssociationsTab";
 import SettingsShortcutsTab from "./settings/tabs/SettingsShortcutsTab";
 import SettingsTerminalTab from "./settings/tabs/SettingsTerminalTab";
 import { Tabs, TabsList, TabsTrigger } from "./ui/tabs";
+import type { TerminalFont } from "../infrastructure/config/fonts";
 
 const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
 
-type SettingsState = ReturnType<typeof useSettingsState>;
+type SettingsState = ReturnType<typeof useSettingsState> & {
+    availableFonts: TerminalFont[];
+};
 
 const SettingsSyncTab = React.lazy(() => import("./settings/tabs/SettingsSyncTab"));
 
@@ -117,6 +121,12 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
                         >
                             <Keyboard size={14} /> {t("settings.tab.shortcuts")}
                         </TabsTrigger>
+                        <TabsTrigger
+                            value="file-associations"
+                            className="w-full justify-start gap-2 px-3 py-2 text-sm data-[state=active]:bg-background hover:bg-background/60 rounded-md transition-colors"
+                        >
+                            <FileType size={14} /> {t("settings.tab.sftpFileAssociations")}
+                        </TabsTrigger>
                         <TabsTrigger
                             value="sync"
                             className="w-full justify-start gap-2 px-3 py-2 text-sm data-[state=active]:bg-background hover:bg-background/60 rounded-md transition-colors"
@@ -158,6 +168,7 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
                             setTerminalFontSize={settings.setTerminalFontSize}
                             terminalSettings={settings.terminalSettings}
                             updateTerminalSetting={settings.updateTerminalSetting}
+                            availableFonts={settings.availableFonts}
                         />
                     )}
 
@@ -173,6 +184,10 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
                         />
                     )}
 
+                    {mountedTabs.has("file-associations") && (
+                        <SettingsFileAssociationsTab />
+                    )}
+
                     {mountedTabs.has("sync") && (
                         <React.Suspense fallback={null}>
                             <SettingsSyncTabWithVault />

components/SyncStatusButton.tsx

@@ -1,12 +1,12 @@
 /**
  * SyncStatusButton - Cloud Sync Status Indicator for Top Bar
- * 
+ *
  * Shows current sync state with cloud icon and colored indicators:
  * - Green dot: All synced
- * - Blue dot + spin: Syncing in progress  
+ * - Blue dot + spin: Syncing in progress
  * - Red dot: Error
  * - Gray dot: No providers connected
- * 
+ *
  * Clicking opens a popover with sync status details and history.
  */
 
@@ -239,7 +239,7 @@ export const SyncStatusButton: React.FC<SyncStatusButtonProps> = ({
                             <CloudOff size={32} className="mx-auto mb-2 text-muted-foreground" />
                             <p className="text-sm font-medium mb-1">{t('sync.notConfigured')}</p>
                             <p className="text-xs text-muted-foreground mb-3">
-                                Connect a cloud provider to sync your data across devices.
+                                {t('sync.autoSync.noProvider')}
                             </p>
                             <Button
                                 size="sm"
@@ -249,7 +249,7 @@ export const SyncStatusButton: React.FC<SyncStatusButtonProps> = ({
                                     onOpenSettings?.();
                                 }}
                             >
-                                Configure Cloud Sync
+                                {t('sync.settings')}
                             </Button>
                         </div>
                     ) : (

components/Terminal.tsx

@@ -26,7 +26,7 @@ import KnownHostConfirmDialog, { HostKeyInfo } from "./KnownHostConfirmDialog";
 import SFTPModal from "./SFTPModal";
 import { Button } from "./ui/button";
 import { toast } from "./ui/toast";
-import { TERMINAL_FONTS } from "../infrastructure/config/fonts";
+import { useAvailableFonts } from "../application/state/fontStore";
 import { TERMINAL_THEMES } from "../infrastructure/config/terminalThemes";
 
 import { TerminalConnectionDialog } from "./terminal/TerminalConnectionDialog";
@@ -129,6 +129,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
 }) => {
   const CONNECTION_TIMEOUT = 12000;
   const { t } = useI18n();
+  const availableFonts = useAvailableFonts();
   const containerRef = useRef<HTMLDivElement>(null);
   const termRef = useRef<XTerm | null>(null);
   const fitAddonRef = useRef<FitAddon | null>(null);
@@ -169,6 +170,8 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   const terminalBackend = useTerminalBackend();
   const { resizeSession } = terminalBackend;
 
+
+
   const [isScriptsOpen, setIsScriptsOpen] = useState(false);
   const [status, setStatus] = useState<TerminalSession["status"]>("connecting");
   const [error, setError] = useState<string | null>(null);
@@ -549,7 +552,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
       termRef.current.options.fontSize = effectiveFontSize;
 
       const hostFontId = host.fontFamily || fontFamilyId || "menlo";
-      const fontObj = TERMINAL_FONTS.find((f) => f.id === hostFontId) || TERMINAL_FONTS[0];
+      const fontObj = availableFonts.find((f) => f.id === hostFontId) || availableFonts[0];
       termRef.current.options.fontFamily = fontObj.family;
 
       termRef.current.options.theme = {
@@ -559,7 +562,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
 
       setTimeout(() => safeFit(), 50);
     }
-  }, [host.fontSize, host.fontFamily, host.theme, fontFamilyId, fontSize, effectiveTheme]);
+  }, [host.fontSize, host.fontFamily, host.theme, fontFamilyId, fontSize, effectiveTheme, availableFonts]);
 
   useEffect(() => {
     if (isVisible && fitAddonRef.current) {
@@ -927,7 +930,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
             ref={containerRef}
             className="absolute inset-x-0 bottom-0"
             style={{
-              top: isSearchOpen ? "64px" : "40px",
+              top: isSearchOpen ? "64px" : "30px",
               paddingLeft: 6,
               backgroundColor: effectiveTheme.colors.background,
             }}

components/TextEditorModal.tsx

@@ -0,0 +1,302 @@
+/**
+ * TextEditorModal - Modal for editing text files in SFTP with syntax highlighting
+ */
+import {
+  CloudUpload,
+  Loader2,
+  Search,
+  X,
+} from 'lucide-react';
+import Editor, { type OnMount, loader } from '@monaco-editor/react';
+import type * as Monaco from 'monaco-editor';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+// Configure Monaco to use local files instead of CDN
+const monacoBasePath = import.meta.env.DEV
+  ? './node_modules/monaco-editor/min/vs'
+  : `${import.meta.env.BASE_URL}monaco/vs`;
+loader.config({ paths: { vs: monacoBasePath } });
+
+import { useI18n } from '../application/i18n/I18nProvider';
+import { getLanguageId, getLanguageName, getSupportedLanguages } from '../lib/sftpFileUtils';
+import { Button } from './ui/button';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from './ui/dialog';
+import { Combobox } from './ui/combobox';
+import { toast } from './ui/toast';
+
+interface TextEditorModalProps {
+  open: boolean;
+  onClose: () => void;
+  fileName: string;
+  initialContent: string;
+  onSave: (content: string) => Promise<void>;
+}
+
+// Map our language IDs to Monaco language IDs
+const languageIdToMonaco = (langId: string): string => {
+  const mapping: Record<string, string> = {
+    'javascript': 'javascript',
+    'typescript': 'typescript',
+    'python': 'python',
+    'shell': 'shell',
+    'batch': 'bat',
+    'powershell': 'powershell',
+    'c': 'c',
+    'cpp': 'cpp',
+    'java': 'java',
+    'kotlin': 'kotlin',
+    'go': 'go',
+    'rust': 'rust',
+    'ruby': 'ruby',
+    'php': 'php',
+    'perl': 'perl',
+    'lua': 'lua',
+    'r': 'r',
+    'swift': 'swift',
+    'dart': 'dart',
+    'csharp': 'csharp',
+    'fsharp': 'fsharp',
+    'vb': 'vb',
+    'html': 'html',
+    'css': 'css',
+    'scss': 'scss',
+    'sass': 'sass',
+    'less': 'less',
+    'json': 'json',
+    'jsonc': 'json',
+    'json5': 'json',
+    'xml': 'xml',
+    'yaml': 'yaml',
+    'toml': 'ini',
+    'ini': 'ini',
+    'sql': 'sql',
+    'graphql': 'graphql',
+    'markdown': 'markdown',
+    'plaintext': 'plaintext',
+    'vue': 'html',
+    'svelte': 'html',
+    'dockerfile': 'dockerfile',
+    'makefile': 'makefile',
+    'diff': 'diff',
+  };
+  return mapping[langId] || 'plaintext';
+};
+
+export const TextEditorModal: React.FC<TextEditorModalProps> = ({
+  open,
+  onClose,
+  fileName,
+  initialContent,
+  onSave,
+}) => {
+  const { t } = useI18n();
+  const [content, setContent] = useState(initialContent);
+  const [saving, setSaving] = useState(false);
+  const [hasChanges, setHasChanges] = useState(false);
+  const [languageId, setLanguageId] = useState(() => getLanguageId(fileName));
+  const editorRef = useRef<Monaco.editor.IStandaloneCodeEditor | null>(null);
+
+  // Track theme from document.documentElement class (syncs with app theme)
+  const [isDarkTheme, setIsDarkTheme] = useState(() =>
+    document.documentElement.classList.contains('dark')
+  );
+
+  // Listen for theme changes via MutationObserver on <html> class
+  useEffect(() => {
+    const root = document.documentElement;
+    const observer = new MutationObserver(() => {
+      setIsDarkTheme(root.classList.contains('dark'));
+    });
+    observer.observe(root, { attributes: true, attributeFilter: ['class'] });
+    return () => observer.disconnect();
+  }, []);
+
+  // Reset content when file changes
+  useEffect(() => {
+    setContent(initialContent);
+    setHasChanges(false);
+    setLanguageId(getLanguageId(fileName));
+  }, [initialContent, fileName]);
+
+  // Track changes
+  useEffect(() => {
+    setHasChanges(content !== initialContent);
+  }, [content, initialContent]);
+
+  const handleSave = useCallback(async () => {
+    if (saving) return;
+    setSaving(true);
+    try {
+      await onSave(content);
+      setHasChanges(false);
+      toast.success(t('sftp.editor.saved'), 'SFTP');
+    } catch (e) {
+      toast.error(
+        e instanceof Error ? e.message : t('sftp.editor.saveFailed'),
+        'SFTP'
+      );
+    } finally {
+      setSaving(false);
+    }
+  }, [content, onSave, saving, t]);
+
+  const handleClose = useCallback(() => {
+    if (hasChanges) {
+      const confirmed = confirm(t('sftp.editor.unsavedChanges'));
+      if (!confirmed) return;
+    }
+    onClose();
+  }, [hasChanges, onClose, t]);
+
+  const handleEditorChange = useCallback((value: string | undefined) => {
+    setContent(value || '');
+  }, []);
+
+  const handleEditorMount: OnMount = useCallback((editor, monaco) => {
+    editorRef.current = editor;
+
+    // Add save shortcut
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
+      handleSave();
+    });
+
+    // Add find shortcut (Ctrl+F / Cmd+F)
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyF, () => {
+      // Trigger Monaco's built-in find widget
+      editor.trigger('keyboard', 'actions.find', null);
+    });
+  }, [handleSave]);
+
+  // Trigger search dialog
+  const handleSearch = useCallback(() => {
+    if (editorRef.current) {
+      editorRef.current.trigger('keyboard', 'actions.find', null);
+      editorRef.current.focus();
+    }
+  }, []);
+
+  const supportedLanguages = useMemo(() => getSupportedLanguages(), []);
+  const monacoLanguage = useMemo(() => languageIdToMonaco(languageId), [languageId]);
+  const monacoTheme = isDarkTheme ? 'vs-dark' : 'light';
+  const languageOptions = useMemo(
+    () => supportedLanguages.map((lang) => ({ value: lang.id, label: lang.name })),
+    [supportedLanguages],
+  );
+
+  const handleLanguageChange = useCallback((nextValue: string) => {
+    setLanguageId(nextValue || 'plaintext');
+  }, []);
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && handleClose()}>
+      <DialogContent className="max-w-5xl h-[85vh] flex flex-col p-0 gap-0" hideCloseButton>
+        {/* Header */}
+        <DialogHeader className="px-4 py-3 border-b border-border/60 flex-shrink-0">
+          <div className="flex items-center justify-between gap-4">
+            <div className="flex items-center gap-3 flex-1 min-w-0">
+              <DialogTitle className="text-sm font-semibold truncate">
+                {fileName}
+                {hasChanges && <span className="text-primary ml-1">*</span>}
+              </DialogTitle>
+            </div>
+            <div className="flex items-center gap-2 min-w-0">
+              {/* Search button */}
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7"
+                onClick={handleSearch}
+                title={t('common.search')}
+              >
+                <Search size={14} />
+              </Button>
+
+              {/* Language selector */}
+              <Combobox
+                options={languageOptions}
+                value={languageId}
+                onValueChange={handleLanguageChange}
+                placeholder={t('sftp.editor.syntaxHighlight')}
+                triggerClassName="h-7 max-w-[180px] min-w-[120px] text-xs"
+              />
+
+              {/* Save button */}
+              <Button
+                variant="default"
+                size="sm"
+                className="h-7"
+                onClick={handleSave}
+                disabled={saving || !hasChanges}
+              >
+                {saving ? (
+                  <Loader2 size={14} className="mr-1.5 animate-spin" />
+                ) : (
+                  <CloudUpload size={14} className="mr-1.5" />
+                )}
+                {saving ? t('sftp.editor.saving') : t('sftp.editor.save')}
+              </Button>
+
+              {/* Close button */}
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7"
+                onClick={handleClose}
+              >
+                <X size={14} />
+              </Button>
+            </div>
+          </div>
+        </DialogHeader>
+
+        {/* Monaco Editor */}
+        <div className="flex-1 min-h-0 relative">
+          <Editor
+            height="100%"
+            language={monacoLanguage}
+            value={content}
+            onChange={handleEditorChange}
+            onMount={handleEditorMount}
+            theme={monacoTheme}
+            loading={
+              <div className="absolute inset-0 flex items-center justify-center bg-background">
+                <Loader2 size={32} className="animate-spin text-muted-foreground" />
+              </div>
+            }
+            options={{
+              minimap: { enabled: true },
+              fontSize: 14,
+              lineNumbers: 'on',
+              roundedSelection: false,
+              scrollBeyondLastLine: false,
+              automaticLayout: true,
+              tabSize: 2,
+              insertSpaces: true,
+              wordWrap: 'off',
+              folding: true,
+              renderWhitespace: 'selection',
+              bracketPairColorization: { enabled: true },
+              find: {
+                addExtraSpaceOnTop: false,
+                autoFindInSelection: 'never',
+                seedSearchStringFromSelection: 'selection',
+              },
+            }}
+          />
+        </div>
+
+        {/* Footer */}
+        <div className="px-4 py-2 border-t border-border/60 flex items-center justify-between text-xs text-muted-foreground bg-muted/30 flex-shrink-0">
+          <span>
+            {getLanguageName(languageId)}
+          </span>
+          <span>
+            {content.split('\n').length} lines • {content.length} characters
+          </span>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default TextEditorModal;

components/port-forwarding/EditPanel.tsx

@@ -12,6 +12,7 @@ import { AsideActionMenu,AsideActionMenuItem,AsidePanel,AsidePanelContent,AsideP
 import { Button } from '../ui/button';
 import { Input } from '../ui/input';
 import { Label } from '../ui/label';
+import { Switch } from '../ui/switch';
 
 export interface EditPanelProps {
     rule: PortForwardingRule;
@@ -152,6 +153,18 @@ export const EditPanel: React.FC<EditPanelProps> = ({
                         </div>
                     </>
                 )}
+
+                {/* Auto Start Toggle */}
+                <div className="flex items-center justify-between py-2">
+                    <div className="space-y-0.5">
+                        <Label className="text-sm font-medium">{t('pf.form.autoStart')}</Label>
+                        <p className="text-[10px] text-muted-foreground">{t('pf.form.autoStartDesc')}</p>
+                    </div>
+                    <Switch
+                        checked={draft.autoStart ?? false}
+                        onCheckedChange={checked => onDraftChange({ autoStart: checked })}
+                    />
+                </div>
             </AsidePanelContent>
             <AsidePanelFooter className="space-y-2">
                 <Button

components/port-forwarding/NewFormPanel.tsx

@@ -13,6 +13,7 @@ import { AsidePanel,AsidePanelContent,AsidePanelFooter } from '../ui/aside-panel
 import { Button } from '../ui/button';
 import { Input } from '../ui/input';
 import { Label } from '../ui/label';
+import { Switch } from '../ui/switch';
 import { getTypeLabel } from './utils';
 
 export interface NewFormPanelProps {
@@ -153,6 +154,18 @@ export const NewFormPanel: React.FC<NewFormPanelProps> = ({
                         </div>
                     </>
                 )}
+
+                {/* Auto Start Toggle */}
+                <div className="flex items-center justify-between py-2">
+                    <div className="space-y-0.5">
+                        <Label className="text-sm font-medium">{t('pf.form.autoStart')}</Label>
+                        <p className="text-[10px] text-muted-foreground">{t('pf.form.autoStartDesc')}</p>
+                    </div>
+                    <Switch
+                        checked={draft.autoStart ?? false}
+                        onCheckedChange={checked => onDraftChange({ autoStart: checked })}
+                    />
+                </div>
             </AsidePanelContent>
             <AsidePanelFooter className="space-y-2">
                 <Button

components/settings/tabs/SettingsFileAssociationsTab.tsx

@@ -0,0 +1,210 @@
+/**
+ * SettingsFileAssociationsTab - Manage SFTP file opener associations and behavior
+ */
+import { FileType, Pencil, Trash2 } from "lucide-react";
+import React, { useCallback, useState } from "react";
+import { useI18n } from "../../../application/i18n/I18nProvider";
+import { useSftpFileAssociations } from "../../../application/state/useSftpFileAssociations";
+import { useSettingsState } from "../../../application/state/useSettingsState";
+import type { FileOpenerType, SystemAppInfo } from "../../../lib/sftpFileUtils";
+import { netcattyBridge } from "../../../infrastructure/services/netcattyBridge";
+import { cn } from "../../../lib/utils";
+import { Button } from "../../ui/button";
+import { Label } from "../../ui/label";
+import { SectionHeader, SettingsTabContent } from "../settings-ui";
+
+const getOpenerLabel = (
+  openerType: FileOpenerType,
+  systemApp: SystemAppInfo | undefined,
+  t: (key: string) => string
+): string => {
+  if (openerType === 'builtin-editor') {
+    return t('sftp.opener.builtInEditor');
+  } else if (openerType === 'system-app' && systemApp) {
+    return systemApp.name;
+  }
+  return openerType;
+};
+
+export default function SettingsFileAssociationsTab() {
+  const { t } = useI18n();
+  const { getAllAssociations, removeAssociation, setOpenerForExtension } = useSftpFileAssociations();
+  const { sftpDoubleClickBehavior, setSftpDoubleClickBehavior } = useSettingsState();
+  const associations = getAllAssociations();
+  const [editingExtension, setEditingExtension] = useState<string | null>(null);
+
+  // Debug log for Settings page
+  console.log('[SettingsFileAssociationsTab] Rendering with', associations.length, 'associations:', associations);
+
+  const handleRemove = useCallback((extension: string) => {
+    if (confirm(t('settings.sftpFileAssociations.removeConfirm', { ext: extension === 'file' ? t('sftp.opener.noExtension') : extension }))) {
+      removeAssociation(extension);
+    }
+  }, [removeAssociation, t]);
+
+  const handleEdit = useCallback(async (extension: string) => {
+    setEditingExtension(extension);
+    try {
+      const bridge = netcattyBridge.get();
+      if (!bridge?.selectApplication) {
+        return;
+      }
+      const result = await bridge.selectApplication();
+      if (result) {
+        setOpenerForExtension(extension, 'system-app', { path: result.path, name: result.name });
+      }
+    } catch (e) {
+      console.error('Failed to select application:', e);
+    } finally {
+      setEditingExtension(null);
+    }
+  }, [setOpenerForExtension]);
+
+  return (
+    <SettingsTabContent value="file-associations">
+      <div className="space-y-8">
+        {/* Double-click behavior section */}
+        <div className="space-y-4">
+          <SectionHeader title={t('settings.sftp.doubleClickBehavior')} />
+          <p className="text-sm text-muted-foreground">
+            {t('settings.sftp.doubleClickBehavior.desc')}
+          </p>
+          <div className="space-y-3">
+            <button
+              onClick={() => setSftpDoubleClickBehavior('open')}
+              className={cn(
+                "w-full text-left p-4 rounded-lg border-2 transition-colors",
+                sftpDoubleClickBehavior === 'open'
+                  ? "border-primary bg-primary/5"
+                  : "border-border hover:border-primary/50 hover:bg-secondary/50"
+              )}
+            >
+              <div className="flex items-start gap-3">
+                <div className={cn(
+                  "h-5 w-5 rounded-full border-2 flex items-center justify-center mt-0.5 shrink-0",
+                  sftpDoubleClickBehavior === 'open'
+                    ? "border-primary"
+                    : "border-muted-foreground/30"
+                )}>
+                  {sftpDoubleClickBehavior === 'open' && (
+                    <div className="h-2.5 w-2.5 rounded-full bg-primary" />
+                  )}
+                </div>
+                <div className="space-y-1">
+                  <Label className="font-medium cursor-pointer">
+                    {t('settings.sftp.doubleClickBehavior.open')}
+                  </Label>
+                  <p className="text-sm text-muted-foreground">
+                    {t('settings.sftp.doubleClickBehavior.openDesc')}
+                  </p>
+                </div>
+              </div>
+            </button>
+            <button
+              onClick={() => setSftpDoubleClickBehavior('transfer')}
+              className={cn(
+                "w-full text-left p-4 rounded-lg border-2 transition-colors",
+                sftpDoubleClickBehavior === 'transfer'
+                  ? "border-primary bg-primary/5"
+                  : "border-border hover:border-primary/50 hover:bg-secondary/50"
+              )}
+            >
+              <div className="flex items-start gap-3">
+                <div className={cn(
+                  "h-5 w-5 rounded-full border-2 flex items-center justify-center mt-0.5 shrink-0",
+                  sftpDoubleClickBehavior === 'transfer'
+                    ? "border-primary"
+                    : "border-muted-foreground/30"
+                )}>
+                  {sftpDoubleClickBehavior === 'transfer' && (
+                    <div className="h-2.5 w-2.5 rounded-full bg-primary" />
+                  )}
+                </div>
+                <div className="space-y-1">
+                  <Label className="font-medium cursor-pointer">
+                    {t('settings.sftp.doubleClickBehavior.transfer')}
+                  </Label>
+                  <p className="text-sm text-muted-foreground">
+                    {t('settings.sftp.doubleClickBehavior.transferDesc')}
+                  </p>
+                </div>
+              </div>
+            </button>
+          </div>
+        </div>
+
+        {/* File associations section */}
+        <div className="space-y-4">
+          <SectionHeader title={t('settings.sftpFileAssociations.title')} />
+          <p className="text-sm text-muted-foreground">
+            {t('settings.sftpFileAssociations.desc')}
+          </p>
+
+        {associations.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+            <FileType size={48} strokeWidth={1} className="mb-4 opacity-50" />
+            <p className="text-sm">{t('settings.sftpFileAssociations.noAssociations')}</p>
+          </div>
+        ) : (
+          <div className="border border-border rounded-md overflow-hidden">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="bg-muted/50 border-b border-border">
+                  <th className="text-left px-4 py-2 font-medium">
+                    {t('settings.sftpFileAssociations.extension')}
+                  </th>
+                  <th className="text-left px-4 py-2 font-medium">
+                    {t('settings.sftpFileAssociations.application')}
+                  </th>
+                  <th className="text-right px-4 py-2 font-medium w-28">
+                    {/* Actions */}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {associations.map(({ extension, openerType, systemApp }) => (
+                  <tr key={extension} className="border-b border-border last:border-b-0 hover:bg-muted/30">
+                    <td className="px-4 py-3">
+                      <code className="text-xs bg-muted px-1.5 py-0.5 rounded">
+                        {extension === 'file' ? t('sftp.opener.noExtension') : `.${extension}`}
+                      </code>
+                    </td>
+                    <td className="px-4 py-3 text-muted-foreground">
+                      {openerType === 'system-app' && systemApp ? (
+                        <span title={systemApp.path}>{systemApp.name}</span>
+                      ) : (
+                        getOpenerLabel(openerType, systemApp, t)
+                      )}
+                    </td>
+                    <td className="px-4 py-3 text-right space-x-1">
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7"
+                        onClick={() => handleEdit(extension)}
+                        disabled={editingExtension === extension}
+                        title={t('common.edit')}
+                      >
+                        <Pencil size={14} />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7 text-destructive hover:text-destructive hover:bg-destructive/10"
+                        onClick={() => handleRemove(extension)}
+                        title={t('settings.sftpFileAssociations.remove')}
+                      >
+                        <Trash2 size={14} />
+                      </Button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+        </div>
+      </div>
+    </SettingsTabContent>
+  );
+}

components/settings/tabs/SettingsTerminalTab.tsx

@@ -9,7 +9,7 @@ import type {
 } from "../../../domain/models";
 import { DEFAULT_KEYWORD_HIGHLIGHT_RULES } from "../../../domain/models";
 import { useI18n } from "../../../application/i18n/I18nProvider";
-import { TERMINAL_FONTS, MAX_FONT_SIZE, MIN_FONT_SIZE } from "../../../infrastructure/config/fonts";
+import { MAX_FONT_SIZE, MIN_FONT_SIZE, type TerminalFont } from "../../../infrastructure/config/fonts";
 import { TERMINAL_THEMES } from "../../../infrastructure/config/terminalThemes";
 import { cn } from "../../../lib/utils";
 import { Button } from "../../ui/button";
@@ -80,6 +80,7 @@ export default function SettingsTerminalTab(props: {
     key: K,
     value: TerminalSettings[K],
   ) => void;
+  availableFonts: TerminalFont[];
 }) {
   const {
     terminalThemeId,
@@ -90,6 +91,7 @@ export default function SettingsTerminalTab(props: {
     setTerminalFontSize,
     terminalSettings,
     updateTerminalSetting,
+    availableFonts,
   } = props;
   const { t } = useI18n();
 
@@ -201,7 +203,7 @@ export default function SettingsTerminalTab(props: {
         >
           <Select
             value={terminalFontFamilyId}
-            options={TERMINAL_FONTS.map((f) => ({ value: f.id, label: f.name }))}
+            options={availableFonts.map((f) => ({ value: f.id, label: f.name }))}
             onChange={(id) => setTerminalFontFamilyId(id)}
             className="w-40"
           />
@@ -578,6 +580,28 @@ export default function SettingsTerminalTab(props: {
           </div>
         </SettingRow>
       </div>
+
+      <SectionHeader title={t("settings.terminal.section.connection")} />
+      <div className="space-y-0 divide-y divide-border rounded-lg border bg-card px-4">
+        <SettingRow
+          label={t("settings.terminal.connection.keepaliveInterval")}
+          description={t("settings.terminal.connection.keepaliveInterval.desc")}
+        >
+          <Input
+            type="number"
+            min={0}
+            max={3600}
+            value={terminalSettings.keepaliveInterval}
+            onChange={(e) => {
+              const val = parseInt(e.target.value) || 0;
+              if (val >= 0 && val <= 3600) {
+                updateTerminalSetting("keepaliveInterval", val);
+              }
+            }}
+            className="w-24"
+          />
+        </SettingRow>
+      </div>
     </SettingsTabContent>
   );
 }

components/sftp/SftpBreadcrumb.tsx

@@ -31,7 +31,12 @@ const SftpBreadcrumbInner: React.FC<SftpBreadcrumbProps> = ({
     // For Windows, first part might be drive letter like "C:"
     const buildPath = (index: number) => {
         if (isWindowsPath) {
-            return parts.slice(0, index + 1).join('\\');
+            const builtPath = parts.slice(0, index + 1).join('\\');
+            // If this is just a drive letter (e.g., "C:"), add trailing backslash
+            if (/^[A-Za-z]:$/.test(builtPath)) {
+                return builtPath + '\\';
+            }
+            return builtPath;
         }
         return '/' + parts.slice(0, index + 1).join('/');
     };

components/sftp/SftpConflictDialog.tsx

@@ -3,10 +3,10 @@
  */
 
 import { AlertCircle } from 'lucide-react';
-import React,{ useState } from 'react';
+import React, { memo, useState } from 'react';
 import { useI18n } from '../../application/i18n/I18nProvider';
 import { Button } from '../ui/button';
-import { Dialog,DialogContent,DialogDescription,DialogFooter,DialogHeader,DialogTitle } from '../ui/dialog';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '../ui/dialog';
 
 interface ConflictItem {
     transferId: string;
@@ -25,7 +25,7 @@ interface SftpConflictDialogProps {
     formatFileSize: (size: number) => string;
 }
 
-export const SftpConflictDialog: React.FC<SftpConflictDialogProps> = ({ conflicts, onResolve, formatFileSize }) => {
+const SftpConflictDialogInner: React.FC<SftpConflictDialogProps> = ({ conflicts, onResolve, formatFileSize }) => {
     const { t } = useI18n();
     const [applyToAll, setApplyToAll] = useState(false);
     const conflict = conflicts[0]; // Handle first conflict
@@ -135,3 +135,6 @@ export const SftpConflictDialog: React.FC<SftpConflictDialogProps> = ({ conflict
         </Dialog>
     );
 };
+
+export const SftpConflictDialog = memo(SftpConflictDialogInner);
+SftpConflictDialog.displayName = 'SftpConflictDialog';

components/sftp/SftpContext.tsx

@@ -0,0 +1,158 @@
+/**
+ * SftpContext - Provides stable callback references to SFTP components
+ * 
+ * This context eliminates props drilling of callback functions through
+ * the component tree, significantly reducing re-renders caused by
+ * callback reference changes.
+ */
+
+import React, { createContext, useContext, useMemo, useSyncExternalStore } from "react";
+import { Host, SftpFileEntry } from "../../types";
+
+// Types for the context
+export interface SftpPaneCallbacks {
+    onConnect: (host: Host | "local") => void;
+    onDisconnect: () => void;
+    onNavigateTo: (path: string) => void;
+    onNavigateUp: () => void;
+    onRefresh: () => void;
+    onOpenEntry: (entry: SftpFileEntry) => void;
+    onToggleSelection: (fileName: string, multiSelect: boolean) => void;
+    onRangeSelect: (fileNames: string[]) => void;
+    onClearSelection: () => void;
+    onSetFilter: (filter: string) => void;
+    onCreateDirectory: (name: string) => Promise<void>;
+    onDeleteFiles: (fileNames: string[]) => Promise<void>;
+    onRenameFile: (oldName: string, newName: string) => Promise<void>;
+    onCopyToOtherPane: (files: { name: string; isDirectory: boolean }[]) => void;
+    onReceiveFromOtherPane: (files: { name: string; isDirectory: boolean }[]) => void;
+    onEditPermissions?: (file: SftpFileEntry) => void;
+    // File operations
+    onEditFile?: (entry: SftpFileEntry) => void;
+    onOpenFile?: (entry: SftpFileEntry) => void;
+    onOpenFileWith?: (entry: SftpFileEntry) => void;  // Always show opener dialog
+}
+
+export interface SftpDragCallbacks {
+    onDragStart: (files: { name: string; isDirectory: boolean }[], side: "left" | "right") => void;
+    onDragEnd: () => void;
+}
+
+// Store for activeTabId - allows subscription without re-rendering parent
+type ActiveTabStore = {
+    left: string | null;
+    right: string | null;
+};
+
+type ActiveTabListener = () => void;
+
+let activeTabState: ActiveTabStore = { left: null, right: null };
+const activeTabListeners = new Set<ActiveTabListener>();
+
+export const activeTabStore = {
+    getSnapshot: () => activeTabState,
+    getLeftActiveTabId: () => activeTabState.left,
+    getRightActiveTabId: () => activeTabState.right,
+    setActiveTabId: (side: "left" | "right", tabId: string | null) => {
+        if (activeTabState[side] !== tabId) {
+            activeTabState = { ...activeTabState, [side]: tabId };
+            activeTabListeners.forEach((listener) => listener());
+        }
+    },
+    subscribe: (listener: ActiveTabListener) => {
+        activeTabListeners.add(listener);
+        return () => activeTabListeners.delete(listener);
+    },
+};
+
+// Hook to subscribe to active tab changes for a specific side
+export const useActiveTabId = (side: "left" | "right"): string | null => {
+    return useSyncExternalStore(
+        activeTabStore.subscribe,
+        () => (side === "left" ? activeTabStore.getLeftActiveTabId() : activeTabStore.getRightActiveTabId()),
+        () => (side === "left" ? activeTabStore.getLeftActiveTabId() : activeTabStore.getRightActiveTabId()),
+    );
+};
+
+// Hook to check if a specific pane is active (for CSS control)
+export const useIsPaneActive = (side: "left" | "right", paneId: string): boolean => {
+    const activeTabId = useActiveTabId(side);
+    return activeTabId === paneId || (activeTabId === null && paneId !== null);
+};
+
+export interface SftpContextValue {
+    // Hosts list for connection picker
+    hosts: Host[];
+
+    // Drag state (shared between panes)
+    draggedFiles: { name: string; isDirectory: boolean; side: "left" | "right" }[] | null;
+    dragCallbacks: SftpDragCallbacks;
+
+    // Callbacks for each side
+    leftCallbacks: SftpPaneCallbacks;
+    rightCallbacks: SftpPaneCallbacks;
+}
+
+const SftpContext = createContext<SftpContextValue | null>(null);
+
+export const useSftpContext = () => {
+    const context = useContext(SftpContext);
+    if (!context) {
+        throw new Error("useSftpContext must be used within SftpContextProvider");
+    }
+    return context;
+};
+
+// Hook to get callbacks for a specific side
+export const useSftpPaneCallbacks = (side: "left" | "right"): SftpPaneCallbacks => {
+    const context = useSftpContext();
+    return side === "left" ? context.leftCallbacks : context.rightCallbacks;
+};
+
+// Hook to get drag-related values
+export const useSftpDrag = () => {
+    const context = useSftpContext();
+    return {
+        draggedFiles: context.draggedFiles,
+        ...context.dragCallbacks,
+    };
+};
+
+// Hook to get hosts
+export const useSftpHosts = () => {
+    const context = useSftpContext();
+    return context.hosts;
+};
+
+interface SftpContextProviderProps {
+    hosts: Host[];
+    draggedFiles: { name: string; isDirectory: boolean; side: "left" | "right" }[] | null;
+    dragCallbacks: SftpDragCallbacks;
+    leftCallbacks: SftpPaneCallbacks;
+    rightCallbacks: SftpPaneCallbacks;
+    children: React.ReactNode;
+}
+
+export const SftpContextProvider: React.FC<SftpContextProviderProps> = ({
+    hosts,
+    draggedFiles,
+    dragCallbacks,
+    leftCallbacks,
+    rightCallbacks,
+    children,
+}) => {
+    // Memoize the context value to prevent unnecessary re-renders
+    // Note: The callbacks objects should be stable (created with useMemo in parent)
+    const value = useMemo<SftpContextValue>(
+        () => ({
+            hosts,
+            draggedFiles,
+            dragCallbacks,
+            leftCallbacks,
+            rightCallbacks,
+        }),
+        [hosts, draggedFiles, dragCallbacks, leftCallbacks, rightCallbacks],
+    );
+
+    return <SftpContext.Provider value={value}>{children}</SftpContext.Provider>;
+};

components/sftp/SftpFileRow.tsx

@@ -3,27 +3,29 @@
  */
 
 import { Folder, Link } from 'lucide-react';
-import React,{ memo } from 'react';
+import React, { memo, useCallback } from 'react';
 import { cn } from '../../lib/utils';
 import { SftpFileEntry } from '../../types';
-import { ColumnWidths,formatBytes,formatDate,getFileIcon,isNavigableDirectory } from './utils';
+import { ColumnWidths, formatBytes, formatDate, getFileIcon, isNavigableDirectory } from './utils';
 
 interface SftpFileRowProps {
     entry: SftpFileEntry;
+    index: number;
     isSelected: boolean;
     isDragOver: boolean;
     columnWidths: ColumnWidths;
-    onSelect: (e: React.MouseEvent) => void;
-    onOpen: () => void;
-    onDragStart: (e: React.DragEvent) => void;
+    onSelect: (entry: SftpFileEntry, index: number, e: React.MouseEvent) => void;
+    onOpen: (entry: SftpFileEntry) => void;
+    onDragStart: (entry: SftpFileEntry, e: React.DragEvent) => void;
     onDragEnd: () => void;
-    onDragOver: (e: React.DragEvent) => void;
+    onDragOver: (entry: SftpFileEntry, e: React.DragEvent) => void;
     onDragLeave: () => void;
-    onDrop: (e: React.DragEvent) => void;
+    onDrop: (entry: SftpFileEntry, e: React.DragEvent) => void;
 }
 
 const SftpFileRowInner: React.FC<SftpFileRowProps> = ({
     entry,
+    index,
     isSelected,
     isDragOver,
     columnWidths,
@@ -39,17 +41,36 @@ const SftpFileRowInner: React.FC<SftpFileRowProps> = ({
     // A symlink pointing to a directory behaves like a directory (navigable, accepts drops)
     const isNavDir = isNavigableDirectory(entry);
     const isSymlinkToDirectory = entry.type === 'symlink' && entry.linkTarget === 'directory';
+    const modifiedLabel = entry.lastModifiedFormatted || formatDate(entry.lastModified);
+    const sizeLabel = entry.sizeFormatted || formatBytes(entry.size);
+    const handleSelect = useCallback((e: React.MouseEvent) => {
+        onSelect(entry, index, e);
+    }, [entry, index, onSelect]);
+    const handleOpen = useCallback(() => {
+        console.log("[SftpFileRow] handleOpen called", { entryName: entry.name, entryType: entry.type });
+        onOpen(entry);
+    }, [entry, onOpen]);
+    const handleDragStart = useCallback((e: React.DragEvent) => {
+        onDragStart(entry, e);
+    }, [entry, onDragStart]);
+    const handleDragOver = useCallback((e: React.DragEvent) => {
+        onDragOver(entry, e);
+    }, [entry, onDragOver]);
+    const handleDrop = useCallback((e: React.DragEvent) => {
+        onDrop(entry, e);
+    }, [entry, onDrop]);
 
     return (
         <div
+            data-sftp-row="true"
             draggable={!isParentDir}
-            onDragStart={onDragStart}
+            onDragStart={handleDragStart}
             onDragEnd={onDragEnd}
-            onDragOver={onDragOver}
+            onDragOver={handleDragOver}
             onDragLeave={onDragLeave}
-            onDrop={onDrop}
-            onClick={onSelect}
-            onDoubleClick={onOpen}
+            onDrop={handleDrop}
+            onClick={handleSelect}
+            onDoubleClick={handleOpen}
             className={cn(
                 "px-4 py-2 items-center cursor-pointer text-sm transition-colors",
                 isSelected ? "bg-primary/15 text-foreground" : "hover:bg-secondary/40",
@@ -68,14 +89,14 @@ const SftpFileRowInner: React.FC<SftpFileRowProps> = ({
                         <Link size={8} className="absolute -bottom-0.5 -right-0.5 text-muted-foreground" aria-hidden="true" />
                     )}
                 </div>
-                <span className={cn("truncate", entry.type === 'symlink' && "italic")}>
+                <span className={cn("truncate", entry.type === 'symlink' && "italic pr-1")}>
                     {entry.name}
                     {entry.type === 'symlink' && <span className="sr-only"> (symbolic link)</span>}
                 </span>
             </div>
-            <span className="text-xs text-muted-foreground truncate">{formatDate(entry.lastModified)}</span>
+            <span className="text-xs text-muted-foreground truncate">{modifiedLabel}</span>
             <span className="text-xs text-muted-foreground truncate text-right">
-                {isNavDir ? '--' : formatBytes(entry.size)}
+                {isNavDir ? '--' : sizeLabel}
             </span>
             <span className="text-xs text-muted-foreground truncate capitalize text-right">
                 {isSymlinkToDirectory ? 'link → folder' : entry.type === 'directory' ? 'folder' : entry.type === 'symlink' ? 'link' : entry.name.split('.').pop()?.toLowerCase() || 'file'}
@@ -84,5 +105,29 @@ const SftpFileRowInner: React.FC<SftpFileRowProps> = ({
     );
 };
 
-export const SftpFileRow = memo(SftpFileRowInner);
+const areEqual = (prev: SftpFileRowProps, next: SftpFileRowProps): boolean => {
+    if (prev.index !== next.index) return false;
+    if (prev.isSelected !== next.isSelected) return false;
+    if (prev.isDragOver !== next.isDragOver) return false;
+    if (prev.columnWidths.name !== next.columnWidths.name) return false;
+    if (prev.columnWidths.modified !== next.columnWidths.modified) return false;
+    if (prev.columnWidths.size !== next.columnWidths.size) return false;
+    if (prev.columnWidths.type !== next.columnWidths.type) return false;
+    // Compare callbacks - important for ".." entry which has static properties
+    if (prev.onOpen !== next.onOpen) return false;
+    if (prev.onSelect !== next.onSelect) return false;
+    const prevEntry = prev.entry;
+    const nextEntry = next.entry;
+    return (
+        prevEntry.name === nextEntry.name &&
+        prevEntry.type === nextEntry.type &&
+        prevEntry.size === nextEntry.size &&
+        prevEntry.lastModified === nextEntry.lastModified &&
+        prevEntry.linkTarget === nextEntry.linkTarget &&
+        prevEntry.sizeFormatted === nextEntry.sizeFormatted &&
+        prevEntry.lastModifiedFormatted === nextEntry.lastModifiedFormatted
+    );
+};
+
+export const SftpFileRow = memo(SftpFileRowInner, areEqual);
 SftpFileRow.displayName = 'SftpFileRow';

components/sftp/SftpHostPicker.tsx

@@ -3,7 +3,7 @@
  */
 
 import { Monitor, Search } from 'lucide-react';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { useI18n } from '../../application/i18n/I18nProvider';
 import { Host } from '../../types';
 import { DistroAvatar } from '../DistroAvatar';
@@ -22,7 +22,7 @@ interface SftpHostPickerProps {
     onSelectHost: (host: Host) => void;
 }
 
-export const SftpHostPicker: React.FC<SftpHostPickerProps> = ({
+const SftpHostPickerInner: React.FC<SftpHostPickerProps> = ({
     open,
     onOpenChange,
     hosts,
@@ -178,3 +178,6 @@ export const SftpHostPicker: React.FC<SftpHostPickerProps> = ({
         </Dialog>
     );
 };
+
+export const SftpHostPicker = memo(SftpHostPickerInner);
+SftpHostPicker.displayName = 'SftpHostPicker';

components/sftp/SftpPermissionsDialog.tsx

@@ -2,11 +2,11 @@
  * SFTP Permissions Editor Dialog
  */
 
-import React,{ useEffect,useState } from 'react';
+import React, { memo, useEffect, useState } from 'react';
 import { useI18n } from '../../application/i18n/I18nProvider';
 import { SftpFileEntry } from '../../types';
 import { Button } from '../ui/button';
-import { Dialog,DialogContent,DialogDescription,DialogFooter,DialogHeader,DialogTitle } from '../ui/dialog';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '../ui/dialog';
 
 interface SftpPermissionsDialogProps {
     open: boolean;
@@ -15,7 +15,7 @@ interface SftpPermissionsDialogProps {
     onSave: (file: SftpFileEntry, permissions: string) => void;
 }
 
-export const SftpPermissionsDialog: React.FC<SftpPermissionsDialogProps> = ({ open, onOpenChange, file, onSave }) => {
+const SftpPermissionsDialogInner: React.FC<SftpPermissionsDialogProps> = ({ open, onOpenChange, file, onSave }) => {
     const { t } = useI18n();
     const [permissions, setPermissions] = useState({
         owner: { read: false, write: false, execute: false },
@@ -24,10 +24,38 @@ export const SftpPermissionsDialog: React.FC<SftpPermissionsDialogProps> = ({ op
     });
 
     // Parse permissions from file
+    // Supports both symbolic format (rwxr-xr-x) and octal format (755)
     useEffect(() => {
         if (file?.permissions) {
             const perms = file.permissions;
-            // Parse rwxrwxrwx format (skip first char for type)
+
+            // Check if it's octal format (e.g., "755", "644")
+            if (/^[0-7]{3,4}$/.test(perms)) {
+                const octal = perms.length === 4 ? perms.slice(1) : perms;
+                const ownerBits = parseInt(octal[0], 10);
+                const groupBits = parseInt(octal[1], 10);
+                const othersBits = parseInt(octal[2], 10);
+                setPermissions({
+                    owner: {
+                        read: (ownerBits & 4) !== 0,
+                        write: (ownerBits & 2) !== 0,
+                        execute: (ownerBits & 1) !== 0,
+                    },
+                    group: {
+                        read: (groupBits & 4) !== 0,
+                        write: (groupBits & 2) !== 0,
+                        execute: (groupBits & 1) !== 0,
+                    },
+                    others: {
+                        read: (othersBits & 4) !== 0,
+                        write: (othersBits & 2) !== 0,
+                        execute: (othersBits & 1) !== 0,
+                    },
+                });
+                return;
+            }
+
+            // Parse symbolic rwxrwxrwx format (skip first char for type)
             const pStr = perms.length === 10 ? perms.slice(1) : perms;
             if (pStr.length >= 9) {
                 setPermissions({
@@ -139,3 +167,6 @@ export const SftpPermissionsDialog: React.FC<SftpPermissionsDialogProps> = ({ op
         </Dialog>
     );
 };
+
+export const SftpPermissionsDialog = memo(SftpPermissionsDialogInner);
+SftpPermissionsDialog.displayName = 'SftpPermissionsDialog';

components/sftp/SftpTabBar.tsx

@@ -0,0 +1,420 @@
+/**
+ * SFTP Tab Bar Component
+ *
+ * A tab bar for managing multiple SFTP connections in a single pane.
+ * Features:
+ * - Tab items with close button
+ * - Add button (+) to open HostSelectModal
+ * - Scrollable when many tabs are open
+ * - Drag-and-drop reordering of tabs
+ */
+
+import { HardDrive, Monitor, Plus, X } from "lucide-react";
+import React, {
+  memo,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { useI18n } from "../../application/i18n/I18nProvider";
+import { logger } from "../../lib/logger";
+import { useRenderTracker } from "../../lib/useRenderTracker";
+import { cn } from "../../lib/utils";
+import { useActiveTabId } from "./SftpContext";
+
+export interface SftpTab {
+  id: string;
+  label: string;
+  isLocal: boolean;
+  hostId: string | null;
+}
+
+interface SftpTabBarProps {
+  tabs: SftpTab[];
+  side: "left" | "right";
+  onSelectTab: (tabId: string) => void;
+  onCloseTab: (tabId: string) => void;
+  onAddTab: () => void;
+  onReorderTabs: (
+    draggedId: string,
+    targetId: string,
+    position: "before" | "after",
+  ) => void;
+  /** Called when a tab is dragged to the other side */
+  onMoveTabToOtherSide?: (tabId: string) => void;
+}
+
+const SftpTabBarInner: React.FC<SftpTabBarProps> = ({
+  tabs,
+  side,
+  onSelectTab,
+  onCloseTab,
+  onAddTab,
+  onReorderTabs,
+  onMoveTabToOtherSide,
+}) => {
+  // Subscribe to activeTabId from store (isolated subscription)
+  const activeTabId = useActiveTabId(side);
+
+  // 渲染追踪 - 追踪所有 props 包括回调函数
+  useRenderTracker(`SftpTabBar[${side}]`, {
+    side,
+    tabsCount: tabs.length,
+    activeTabId,
+    // 追踪回调函数引用是否变化
+    onSelectTab,
+    onCloseTab,
+    onAddTab,
+    onReorderTabs,
+    onMoveTabToOtherSide,
+  });
+
+  const { t } = useI18n();
+
+  // Refs for scrollable tab container
+  const tabsContainerRef = useRef<HTMLDivElement>(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+
+  // Drag state
+  const [dropIndicator, setDropIndicator] = useState<{
+    tabId: string;
+    position: "before" | "after";
+  } | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isCrossPaneDragOver, setIsCrossPaneDragOver] = useState(false);
+  const draggedTabIdRef = useRef<string | null>(null);
+
+  // Global dragend listener to ensure state is reset even if the dragged element is removed
+  useEffect(() => {
+    const handleGlobalDragEnd = () => {
+      if (draggedTabIdRef.current) {
+        draggedTabIdRef.current = null;
+        setDropIndicator(null);
+        setIsDragging(false);
+        setIsCrossPaneDragOver(false);
+      }
+    };
+
+    document.addEventListener("dragend", handleGlobalDragEnd);
+    return () => document.removeEventListener("dragend", handleGlobalDragEnd);
+  }, []);
+
+  // Check scroll state
+  const updateScrollState = useCallback(() => {
+    const container = tabsContainerRef.current;
+    if (container) {
+      setCanScrollLeft(container.scrollLeft > 0);
+      setCanScrollRight(
+        container.scrollLeft < container.scrollWidth - container.clientWidth - 1,
+      );
+    }
+  }, []);
+
+  // Update scroll state on mount and resize
+  useEffect(() => {
+    updateScrollState();
+    const container = tabsContainerRef.current;
+    if (container) {
+      container.addEventListener("scroll", updateScrollState);
+      const resizeObserver = new ResizeObserver(updateScrollState);
+      resizeObserver.observe(container);
+      return () => {
+        container.removeEventListener("scroll", updateScrollState);
+        resizeObserver.disconnect();
+      };
+    }
+  }, [updateScrollState, tabs]);
+
+  // Scroll to active tab when it changes
+  useLayoutEffect(() => {
+    if (!activeTabId) return;
+    const container = tabsContainerRef.current;
+    if (!container) return;
+
+    const activeTabElement = container.querySelector(
+      `[data-tab-id="${activeTabId}"]`,
+    ) as HTMLElement | null;
+    if (activeTabElement) {
+      const containerRect = container.getBoundingClientRect();
+      const tabRect = activeTabElement.getBoundingClientRect();
+
+      if (tabRect.left < containerRect.left) {
+        container.scrollLeft -= containerRect.left - tabRect.left + 8;
+      } else if (tabRect.right > containerRect.right) {
+        container.scrollLeft += tabRect.right - containerRect.right + 8;
+      }
+    }
+    setTimeout(updateScrollState, 100);
+  }, [activeTabId, updateScrollState]);
+
+  // Drag handlers
+  const handleTabDragStart = useCallback(
+    (e: React.DragEvent, tabId: string) => {
+      e.dataTransfer.effectAllowed = "move";
+      e.dataTransfer.setData("sftp-tab-id", tabId);
+      e.dataTransfer.setData("sftp-tab-side", side);
+      draggedTabIdRef.current = tabId;
+      setTimeout(() => {
+        setIsDragging(true);
+      }, 0);
+    },
+    [side],
+  );
+
+  const handleTabDragEnd = useCallback(() => {
+    draggedTabIdRef.current = null;
+    setDropIndicator(null);
+    setIsDragging(false);
+  }, []);
+
+  const handleTabDragOver = useCallback(
+    (e: React.DragEvent, tabId: string) => {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "move";
+
+      if (!draggedTabIdRef.current || draggedTabIdRef.current === tabId) {
+        return;
+      }
+
+      const rect = e.currentTarget.getBoundingClientRect();
+      const midpoint = rect.left + rect.width / 2;
+      const position: "before" | "after" =
+        e.clientX < midpoint ? "before" : "after";
+
+      setDropIndicator({ tabId, position });
+    },
+    [],
+  );
+
+  const handleTabDrop = useCallback(
+    (e: React.DragEvent, targetTabId: string) => {
+      e.preventDefault();
+      const draggedId =
+        e.dataTransfer.getData("sftp-tab-id") || draggedTabIdRef.current;
+
+      if (draggedId && draggedId !== targetTabId && dropIndicator) {
+        onReorderTabs(draggedId, targetTabId, dropIndicator.position);
+      }
+
+      setDropIndicator(null);
+      setIsDragging(false);
+    },
+    [dropIndicator, onReorderTabs],
+  );
+
+  const handleCloseTab = useCallback(
+    (e: React.MouseEvent, tabId: string) => {
+      e.stopPropagation();
+      onCloseTab(tabId);
+    },
+    [onCloseTab],
+  );
+
+  // Cross-pane drag handlers
+  const handleCrossPaneDragOver = useCallback(
+    (e: React.DragEvent) => {
+      const draggedFromSide = e.dataTransfer.types.includes("sftp-tab-side");
+      if (!draggedFromSide) return;
+
+      // Check if this is from the other side (we can't read the data during dragover due to browser security)
+      // We'll set the indicator and validate on drop
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "move";
+      setIsCrossPaneDragOver(true);
+    },
+    [],
+  );
+
+  const handleCrossPaneDragLeave = useCallback(() => {
+    setIsCrossPaneDragOver(false);
+  }, []);
+
+  const handleCrossPaneDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      setIsCrossPaneDragOver(false);
+
+      const draggedId = e.dataTransfer.getData("sftp-tab-id");
+      const draggedFromSide = e.dataTransfer.getData("sftp-tab-side");
+
+      // Only accept drops from the other side
+      if (draggedId && draggedFromSide && draggedFromSide !== side && onMoveTabToOtherSide) {
+        logger.info("[SftpTabBar] Cross-pane drop", {
+          tabId: draggedId,
+          fromSide: draggedFromSide,
+          toSide: side,
+        });
+        onMoveTabToOtherSide(draggedId);
+      }
+
+      // Always reset drag state on drop
+      draggedTabIdRef.current = null;
+      setDropIndicator(null);
+      setIsDragging(false);
+    },
+    [side, onMoveTabToOtherSide],
+  );
+
+  return (
+    <div
+      className={cn(
+        "flex items-stretch h-8 bg-secondary/30 border-b border-border/40 transition-colors",
+        isCrossPaneDragOver && "bg-primary/10 ring-1 ring-inset ring-primary/40",
+      )}
+      onDragOver={handleCrossPaneDragOver}
+      onDragLeave={handleCrossPaneDragLeave}
+      onDrop={handleCrossPaneDrop}
+    >
+      {/* Scrollable tabs container */}
+      <div className="relative flex-1 min-w-0 flex">
+        {/* Left fade mask */}
+        {canScrollLeft && (
+          <div
+            className="absolute left-0 top-0 bottom-0 w-6 pointer-events-none z-10"
+            style={{
+              background:
+                "linear-gradient(to right, hsl(var(--secondary) / 0.9), transparent)",
+            }}
+          />
+        )}
+
+        <div
+          ref={tabsContainerRef}
+          className="flex items-stretch overflow-x-auto scrollbar-none max-w-full"
+          style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
+        >
+          {tabs.map((tab) => {
+            const isActive = activeTabId === tab.id;
+            const isBeingDragged =
+              isDragging && draggedTabIdRef.current === tab.id;
+            const showDropIndicatorBefore =
+              dropIndicator?.tabId === tab.id &&
+              dropIndicator.position === "before";
+            const showDropIndicatorAfter =
+              dropIndicator?.tabId === tab.id &&
+              dropIndicator.position === "after";
+
+            return (
+              <div
+                key={tab.id}
+                data-tab-id={tab.id}
+                onClick={() => onSelectTab(tab.id)}
+                draggable
+                onDragStart={(e) => handleTabDragStart(e, tab.id)}
+                onDragEnd={handleTabDragEnd}
+                onDragOver={(e) => handleTabDragOver(e, tab.id)}
+                onDrop={(e) => handleTabDrop(e, tab.id)}
+                className={cn(
+                  "relative px-3 min-w-[100px] max-w-[180px] text-xs font-medium cursor-pointer flex items-center justify-between gap-2 flex-shrink-0 border-r border-border/40",
+                  "transition-[color,opacity,transform] duration-100 ease-out",
+                  isActive
+                    ? "text-foreground border-b-2"
+                    : "text-muted-foreground hover:text-foreground",
+                  isBeingDragged && "opacity-50",
+                )}
+                style={
+                  isActive
+                    ? { borderBottomColor: "hsl(var(--accent))" }
+                    : undefined
+                }
+              >
+                {/* Drop indicator line - before */}
+                {showDropIndicatorBefore && isDragging && (
+                  <div className="absolute left-0 top-1 bottom-1 w-0.5 bg-primary shadow-[0_0_8px_2px] shadow-primary/50 animate-pulse" />
+                )}
+                {/* Drop indicator line - after */}
+                {showDropIndicatorAfter && isDragging && (
+                  <div className="absolute right-0 top-1 bottom-1 w-0.5 bg-primary shadow-[0_0_8px_2px] shadow-primary/50 animate-pulse" />
+                )}
+
+                <div className="flex items-center gap-1.5 min-w-0 flex-1">
+                  {tab.isLocal ? (
+                    <Monitor
+                      size={12}
+                      className={cn(
+                        "shrink-0",
+                        isActive ? "text-primary" : "text-muted-foreground",
+                      )}
+                    />
+                  ) : (
+                    <HardDrive
+                      size={12}
+                      className={cn(
+                        "shrink-0",
+                        isActive ? "text-primary" : "text-muted-foreground",
+                      )}
+                    />
+                  )}
+                  <span className="truncate">{tab.label}</span>
+                </div>
+
+                <button
+                  onClick={(e) => handleCloseTab(e, tab.id)}
+                  className="p-0.5 hover:bg-destructive/10 hover:text-destructive transition-colors shrink-0"
+                  aria-label={t("common.close")}
+                >
+                  <X size={12} />
+                </button>
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Right fade mask */}
+        {canScrollRight && (
+          <div
+            className="absolute right-0 top-0 bottom-0 w-6 pointer-events-none z-10"
+            style={{
+              background:
+                "linear-gradient(to left, hsl(var(--secondary) / 0.9), transparent)",
+            }}
+          />
+        )}
+      </div>
+
+      {/* Add tab button */}
+      <button
+        className="px-2 flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-[linear-gradient(135deg,_hsl(var(--accent)_/_0.18),_hsl(var(--primary)_/_0.18))] transition-all duration-150 border-l border-border/40 cursor-pointer"
+        onClick={onAddTab}
+        title={t("sftp.tabs.addTab")}
+      >
+        <Plus size={14} />
+      </button>
+    </div>
+  );
+};
+
+// Custom comparison - only re-render when data props change, ignore callback refs
+// Note: activeTabId is now subscribed internally, not passed as prop
+const sftpTabBarAreEqual = (
+  prev: SftpTabBarProps,
+  next: SftpTabBarProps,
+): boolean => {
+  // Compare data props only
+  if (prev.side !== next.side) return false;
+  if (prev.tabs.length !== next.tabs.length) return false;
+
+  // Deep compare tabs array
+  for (let i = 0; i < prev.tabs.length; i++) {
+    const prevTab = prev.tabs[i];
+    const nextTab = next.tabs[i];
+    if (
+      prevTab.id !== nextTab.id ||
+      prevTab.label !== nextTab.label ||
+      prevTab.isLocal !== nextTab.isLocal ||
+      prevTab.hostId !== nextTab.hostId
+    ) {
+      return false;
+    }
+  }
+
+  // Ignore callback function refs - they may change but behavior is stable
+  return true;
+};
+
+export const SftpTabBar = memo(SftpTabBarInner, sftpTabBarAreEqual);
+SftpTabBar.displayName = "SftpTabBar";
+

components/sftp/index.ts

@@ -11,10 +11,26 @@ formatSpeed,formatTransferBytes,getFileIcon,isNavigableDirectory,type ColumnWidt
 type SortOrder
 } from './utils';
 
+// Context
+export {
+  SftpContextProvider,
+  useSftpContext,
+  useSftpPaneCallbacks,
+  useSftpDrag,
+  useSftpHosts,
+  useActiveTabId,
+  useIsPaneActive,
+  activeTabStore,
+  type SftpPaneCallbacks,
+  type SftpDragCallbacks,
+  type SftpContextValue,
+} from './SftpContext';
+
 // Components
 export { SftpBreadcrumb } from './SftpBreadcrumb';
 export { SftpConflictDialog } from './SftpConflictDialog';
 export { SftpFileRow } from './SftpFileRow';
 export { SftpHostPicker } from './SftpHostPicker';
 export { SftpPermissionsDialog } from './SftpPermissionsDialog';
+export { SftpTabBar, type SftpTab } from './SftpTabBar';
 export { SftpTransferItem } from './SftpTransferItem';

components/terminal/ThemeCustomizeModal.tsx

@@ -2,7 +2,7 @@
  * Terminal Theme Customize Modal
  * Left-right split design: list on left, large preview on right
  * Uses React Portal to render at document root for proper z-index
- * 
+ *
  * Features:
  * - Real-time preview: changes are applied immediately to the terminal
  * - Save: persists the current settings
@@ -13,8 +13,9 @@ import React, { useEffect, useMemo, useState, useCallback, useRef, memo } from '
 import { createPortal } from 'react-dom';
 import { Check, Minus, Palette, Plus, Type, X } from 'lucide-react';
 import { useI18n } from '../../application/i18n/I18nProvider';
+import { useAvailableFonts } from '../../application/state/fontStore';
 import { TERMINAL_THEMES, TerminalThemeConfig } from '../../infrastructure/config/terminalThemes';
-import { TERMINAL_FONTS, DEFAULT_FONT_SIZE, MIN_FONT_SIZE, MAX_FONT_SIZE, TerminalFont } from '../../infrastructure/config/fonts';
+import { DEFAULT_FONT_SIZE, MIN_FONT_SIZE, MAX_FONT_SIZE, TerminalFont } from '../../infrastructure/config/fonts';
 import { Button } from '../ui/button';
 import { cn } from '../../lib/utils';
 
@@ -265,6 +266,7 @@ export const ThemeCustomizeModal: React.FC<ThemeCustomizeModalProps> = ({
     onSave,
 }) => {
     const { t } = useI18n();
+    const availableFonts = useAvailableFonts();
     const [activeTab, setActiveTab] = useState<TabType>('theme');
     const [selectedTheme, setSelectedTheme] = useState(currentThemeId);
     const [selectedFont, setSelectedFont] = useState(currentFontFamilyId);
@@ -294,8 +296,8 @@ export const ThemeCustomizeModal: React.FC<ThemeCustomizeModalProps> = ({
     }, [open, currentThemeId, currentFontFamilyId, currentFontSize]);
 
     const currentFont = useMemo(
-        () => TERMINAL_FONTS.find(f => f.id === selectedFont) || TERMINAL_FONTS[0],
-        [selectedFont]
+        (): TerminalFont => availableFonts.find(f => f.id === selectedFont) || availableFonts[0],
+        [selectedFont, availableFonts]
     );
     const currentTheme = useMemo(
         () => TERMINAL_THEMES.find(t => t.id === selectedTheme) || TERMINAL_THEMES[0],
@@ -430,7 +432,7 @@ export const ThemeCustomizeModal: React.FC<ThemeCustomizeModalProps> = ({
                             )}
                             {activeTab === 'font' && (
                                 <div className="space-y-1">
-                                    {TERMINAL_FONTS.map(font => (
+                                    {availableFonts.map(font => (
                                         <FontItem
                                             key={font.id}
                                             font={font}

components/terminal/runtime/createTerminalSessionStarters.ts

@@ -343,6 +343,7 @@ export const createTerminalSessionStarters = (ctx: TerminalSessionStartersContex
           env: termEnv,
           proxy: proxyConfig,
           jumpHosts: jumpHosts.length > 0 ? jumpHosts : undefined,
+          keepaliveInterval: ctx.terminalSettings?.keepaliveInterval,
         });
       };
 

components/terminal/runtime/createXTermRuntime.ts

@@ -10,7 +10,7 @@ import {
   getAppLevelActions,
   getTerminalPassthroughActions,
 } from "../../../application/state/useGlobalHotkeys";
-import { TERMINAL_FONTS } from "../../../infrastructure/config/fonts";
+import { fontStore } from "../../../application/state/fontStore";
 import {
   XTERM_PERFORMANCE_CONFIG,
   type XTermPlatform,
@@ -38,6 +38,8 @@ export type XTermRuntime = {
   serializeAddon: SerializeAddon;
   searchAddon: SearchAddon;
   dispose: () => void;
+  /** Current working directory detected via OSC 7 */
+  currentCwd: string | undefined;
 };
 
 export type CreateXTermRuntimeContext = {
@@ -71,11 +73,14 @@ export type CreateXTermRuntimeContext = {
   ) => void;
   commandBufferRef: RefObject<string>;
   setIsSearchOpen: Dispatch<SetStateAction<boolean>>;
-  
+
   // Serial-specific options
   serialLocalEcho?: boolean;
   serialLineMode?: boolean;
   serialLineBufferRef?: RefObject<string>;
+
+  // Callback when shell reports CWD change via OSC 7
+  onCwdChange?: (cwd: string) => void;
 };
 
 const detectPlatform = (): XTermPlatform => {
@@ -111,7 +116,8 @@ export const createXTermRuntime = (ctx: CreateXTermRuntimeContext): XTermRuntime
   });
 
   const hostFontId = ctx.host.fontFamily || ctx.fontFamilyId || "menlo";
-  const fontObj = TERMINAL_FONTS.find((f) => f.id === hostFontId) || TERMINAL_FONTS[0];
+  // Use fontStore for font lookup - guarantees non-empty result
+  const fontObj = fontStore.getFontById(hostFontId);
   const fontFamily = fontObj.family;
 
   const effectiveFontSize = ctx.host.fontSize || ctx.fontSize;
@@ -485,6 +491,36 @@ export const createXTermRuntime = (ctx: CreateXTermRuntimeContext): XTermRuntime
     }
   });
 
+  // Track current working directory via OSC 7 escape sequences
+  // OSC 7 format: \x1b]7;file://hostname/path\x07 or \x1b]7;file://hostname/path\x1b\\
+  let currentCwd: string | undefined = undefined;
+
+  // Register OSC 7 handler using xterm.js parser
+  // OSC 7 is the standard way for shells to report the current working directory
+  term.parser.registerOscHandler(7, (data) => {
+    try {
+      // data is the content after "7;" - typically "file://hostname/path"
+      if (data.startsWith('file://')) {
+        // Extract path from file:// URL
+        const url = new URL(data);
+        const path = decodeURIComponent(url.pathname);
+        if (path && path.length > 0) {
+          currentCwd = path;
+          ctx.onCwdChange?.(path);
+          logger.debug('[XTerm] OSC 7 CWD update:', path);
+        }
+      } else if (data.startsWith('/')) {
+        // Some shells send just the path without file:// prefix
+        currentCwd = data;
+        ctx.onCwdChange?.(data);
+        logger.debug('[XTerm] OSC 7 CWD update (raw path):', data);
+      }
+    } catch (err) {
+      logger.warn('[XTerm] Failed to parse OSC 7:', err);
+    }
+    return true; // Indicate we handled the sequence
+  });
+
   let resizeTimeout: NodeJS.Timeout | null = null;
   const resizeDebounceMs = XTERM_PERFORMANCE_CONFIG.resize.debounceMs;
   term.onResize(({ cols, rows }) => {
@@ -530,5 +566,8 @@ export const createXTermRuntime = (ctx: CreateXTermRuntimeContext): XTermRuntime
         logger.warn("[XTerm] webglAddon dispose failed", err);
       }
     },
+    get currentCwd() {
+      return currentCwd;
+    },
   };
 };

components/ui/combobox.tsx

@@ -115,7 +115,7 @@ export function Combobox({
             <PopoverTrigger asChild disabled={disabled}>
                 <div
                     className={cn(
-                        "flex h-10 w-full items-center rounded-md border border-input bg-background text-sm",
+                        "flex h-10 w-full items-center rounded-md border border-input bg-background text-sm min-w-0 overflow-hidden",
                         "hover:bg-secondary/50 transition-colors",
                         "disabled:cursor-not-allowed disabled:opacity-50",
                         triggerClassName
@@ -129,7 +129,7 @@ export function Combobox({
                         onChange={handleInputChange}
                         onKeyDown={handleInputKeyDown}
                         placeholder={placeholder}
-                        className="flex-1 h-full px-3 bg-transparent outline-none placeholder:text-muted-foreground"
+                        className="flex-1 min-w-0 h-full px-3 bg-transparent outline-none placeholder:text-muted-foreground"
                         disabled={disabled}
                     />
                     {inputValue && (

components/ui/dialog.tsx

@@ -30,8 +30,8 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => {
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { hideCloseButton?: boolean }
+>(({ className, children, hideCloseButton, ...props }, ref) => {
   const { t } = useI18n()
 
   return (
@@ -47,10 +47,12 @@ const DialogContent = React.forwardRef<
         {...props}
       >
         {children}
-        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-md p-1 transition-all hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring disabled:pointer-events-none text-muted-foreground">
-          <X className="h-4 w-4" />
-          <span className="sr-only">{t("common.close")}</span>
-        </DialogPrimitive.Close>
+        {!hideCloseButton && (
+          <DialogPrimitive.Close className="absolute right-4 top-4 rounded-md p-1 transition-all hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring disabled:pointer-events-none text-muted-foreground">
+            <X className="h-4 w-4" />
+            <span className="sr-only">{t("common.close")}</span>
+          </DialogPrimitive.Close>
+        )}
       </DialogPrimitive.Content>
     </DialogPortal>
   )

domain/models.ts

@@ -378,6 +378,9 @@ export interface TerminalSettings {
   // Local Shell Configuration
   localShell: string; // Path to shell executable (empty = system default)
   localStartDir: string; // Starting directory for local terminal (empty = home directory)
+
+  // SSH Connection
+  keepaliveInterval: number; // Seconds between SSH-level keepalive packets (0 = disabled)
 }
 
 export const DEFAULT_KEYWORD_HIGHLIGHT_RULES: KeywordHighlightRule[] = [
@@ -415,6 +418,7 @@ export const DEFAULT_TERMINAL_SETTINGS: TerminalSettings = {
   keywordHighlightRules: DEFAULT_KEYWORD_HIGHLIGHT_RULES,
   localShell: '', // Empty = use system default
   localStartDir: '', // Empty = use home directory
+  keepaliveInterval: 0, // 0 = disabled (use SSH library defaults)
 };
 
 export interface TerminalTheme {
@@ -468,6 +472,7 @@ export interface RemoteFile {
   size: string;
   lastModified: string;
   linkTarget?: 'file' | 'directory' | null; // For symlinks: the type of the target, or null if broken
+  permissions?: string; // rwx format for owner/group/others e.g. "rwxr-xr-x"
 }
 
 export type WorkspaceNode =
@@ -571,6 +576,8 @@ export interface PortForwardingRule {
   remotePort?: number;
   // Host to tunnel through
   hostId?: string;
+  // Auto-start: if true, this rule will automatically start when the app launches
+  autoStart?: boolean;
   // Runtime state
   status: PortForwardingStatus;
   error?: string;

electron-builder.json

@@ -67,15 +67,15 @@
     "target": [
       {
         "target": "AppImage",
-        "arch": ["x64"]
+        "arch": ["x64", "arm64"]
       },
       {
         "target": "deb",
-        "arch": ["x64"]
+        "arch": ["x64", "arm64"]
       },
       {
-        "target": "dir",
-        "arch": ["x64"]
+        "target": "rpm",
+        "arch": ["x64", "arm64"]
       }
     ],
     "category": "Development"

electron/bridges/sftpBridge.cjs

@@ -161,6 +161,9 @@ async function connectThroughChainForSftp(event, options, jumpHosts, targetHost,
       console.log(`[SFTP Chain] Hop ${i + 1}/${jumpHosts.length}: Connecting to ${hopLabel}...`);
       
       const conn = new SSHClient();
+      // Increase max listeners to prevent Node.js warning
+      // Set to 0 (unlimited) since complex operations add many temp listeners
+      conn.setMaxListeners(0);
       
       // Build connection options
       const connOpts = {
@@ -362,6 +365,14 @@ async function openSftp(event, options) {
   
   try {
     await client.connect(connectOpts);
+    
+    // Increase max listeners AFTER connect, when the internal ssh2 Client exists
+    // This prevents Node.js MaxListenersExceededWarning when performing many operations
+    // ssh2-sftp-client adds temporary listeners for each operation, so we need a high limit
+    if (client.client && typeof client.client.setMaxListeners === 'function') {
+      client.client.setMaxListeners(0); // 0 means unlimited
+    }
+    
     sftpClients.set(connId, client);
     
     // Store jump connections for cleanup when SFTP is closed
@@ -422,12 +433,26 @@ async function listSftp(event, payload) {
       type = "file";
     }
     
+    // Extract permissions from longname or rights
+    let permissions = undefined;
+    if (item.rights) {
+      // ssh2-sftp-client returns rights object with user/group/other
+      permissions = `${item.rights.user || '---'}${item.rights.group || '---'}${item.rights.other || '---'}`;
+    } else if (item.longname) {
+      // Fallback: parse from longname (e.g., "-rwxr-xr-x 1 root root ...")
+      const match = item.longname.match(/^[dlsbc-]([rwxsStT-]{9})/);
+      if (match) {
+        permissions = match[1];
+      }
+    }
+    
     return {
       name: item.name,
       type,
       linkTarget,
       size: `${item.size} bytes`,
       lastModified: new Date(item.modifyTime || Date.now()).toISOString(),
+      permissions,
     };
   }));
   
@@ -626,9 +651,17 @@ function registerHandlers(ipcMain) {
   ipcMain.handle("netcatty:sftp:chmod", chmodSftp);
 }
 
+/**
+ * Get the SFTP clients map (for external access)
+ */
+function getSftpClients() {
+  return sftpClients;
+}
+
 module.exports = {
   init,
   registerHandlers,
+  getSftpClients,
   openSftp,
   listSftp,
   readSftp,

electron/bridges/sshBridge.cjs

@@ -32,6 +32,15 @@ function resolveLangFromCharset(charset) {
   return trimmed;
 }
 
+function safeSend(sender, channel, payload) {
+  try {
+    if (!sender || sender.isDestroyed()) return;
+    sender.send(channel, payload);
+  } catch {
+    // Ignore destroyed webContents during shutdown.
+  }
+}
+
 /**
  * Initialize the SSH bridge with dependencies
  */
@@ -190,7 +199,9 @@ async function connectThroughChain(event, options, jumpHosts, targetHost, target
         port: jump.port || 22,
         username: jump.username || 'root',
         readyTimeout: 20000, // Reduced from 60s for faster failure detection
-        keepaliveInterval: 10000,
+        // Use user-configured keepalive interval from options (in seconds -> convert to ms)
+        // If 0 or not provided, use 10000ms as default
+        keepaliveInterval: options.keepaliveInterval && options.keepaliveInterval > 0 ? options.keepaliveInterval * 1000 : 10000,
         keepaliveCountMax: 3,
         algorithms: {
           // Prioritize fastest ciphers (GCM modes are hardware-accelerated)
@@ -346,7 +357,9 @@ async function startSSHSession(event, options) {
       username: options.username || "root",
       // `readyTimeout` covers the entire connection + authentication flow in ssh2.
       readyTimeout: 20000, // Fast failure for non-interactive auth
-      keepaliveInterval: 10000,
+      // Use user-configured keepalive interval (in seconds -> convert to ms)
+      // If 0 or not provided, use 10000ms as default
+      keepaliveInterval: options.keepaliveInterval && options.keepaliveInterval > 0 ? options.keepaliveInterval * 1000 : 10000,
       keepaliveCountMax: 3,
       algorithms: {
         // Prioritize fastest ciphers (GCM modes are hardware-accelerated)
@@ -365,6 +378,8 @@ async function startSSHSession(event, options) {
       hasCertificate,
       keySource: options.keySource,
       hasPublicKey: !!options.publicKey,
+      hasPrivateKey: !!options.privateKey,
+      hasPassword: !!options.password,
       hasEffectivePassphrase: !!effectivePassphrase,
     });
     
@@ -372,6 +387,7 @@ async function startSSHSession(event, options) {
       hasCertificate,
       keySource: options.keySource,
       hasPublicKey: !!options.publicKey,
+      hasPrivateKey: !!options.privateKey,
     });
 
     let authAgent = null;
@@ -448,8 +464,9 @@ async function startSSHSession(event, options) {
     }
 
     return new Promise((resolve, reject) => {
+      const logPrefix = hasJumpHosts ? '[Chain]' : '[SSH]';
       conn.on("ready", () => {
-        console.log(`[Chain] Final target ${options.hostname} ready`);
+        console.log(`${logPrefix} ${options.hostname} ready`);
         if (hasJumpHosts || hasProxy) {
           sendProgress(totalHops, totalHops, options.hostname, 'connected');
         }
@@ -493,8 +510,8 @@ async function startSSHSession(event, options) {
             
             const flushBuffer = () => {
               if (dataBuffer.length > 0) {
-                const contents = electronModule.BrowserWindow.fromWebContents(event.sender)?.webContents;
-                contents?.send("netcatty:data", { sessionId, data: dataBuffer });
+                const contents = event.sender;
+                safeSend(contents, "netcatty:data", { sessionId, data: dataBuffer });
                 dataBuffer = '';
               }
               flushTimeout = null;
@@ -529,8 +546,8 @@ async function startSSHSession(event, options) {
                 clearTimeout(flushTimeout);
               }
               flushBuffer();
-              const contents = electronModule.BrowserWindow.fromWebContents(event.sender)?.webContents;
-              contents?.send("netcatty:exit", { sessionId, exitCode: 0 });
+              const contents = event.sender;
+              safeSend(contents, "netcatty:exit", { sessionId, exitCode: 0 });
               sessions.delete(sessionId);
               conn.end();
               for (const c of chainConnections) {
@@ -551,23 +568,26 @@ async function startSSHSession(event, options) {
       });
 
       conn.on("error", (err) => {
-        console.error(`[Chain] Final target ${options.hostname} error:`, err.message);
-        const contents = electronModule.BrowserWindow.fromWebContents(event.sender)?.webContents;
+        const contents = event.sender;
         
         const isAuthError = err.message?.toLowerCase().includes('authentication') ||
                            err.message?.toLowerCase().includes('auth') ||
                            err.message?.toLowerCase().includes('password') ||
                            err.level === 'client-authentication';
         
+        // Use log instead of error for auth failures (normal fallback scenario)
         if (isAuthError) {
-          contents?.send("netcatty:auth:failed", { 
+          console.log(`${logPrefix} ${options.hostname} auth failed:`, err.message);
+          safeSend(contents, "netcatty:auth:failed", { 
             sessionId, 
             error: err.message,
             hostname: options.hostname 
           });
+        } else {
+          console.error(`${logPrefix} ${options.hostname} error:`, err.message);
         }
         
-        contents?.send("netcatty:exit", { sessionId, exitCode: 1, error: err.message });
+        safeSend(contents, "netcatty:exit", { sessionId, exitCode: 1, error: err.message });
         sessions.delete(sessionId);
         for (const c of chainConnections) {
           try { c.end(); } catch {}
@@ -576,10 +596,10 @@ async function startSSHSession(event, options) {
       });
 
       conn.on("timeout", () => {
-        console.error(`[Chain] Final target ${options.hostname} connection timeout`);
+        console.error(`${logPrefix} ${options.hostname} connection timeout`);
         const err = new Error(`Connection timeout to ${options.hostname}`);
-        const contents = electronModule.BrowserWindow.fromWebContents(event.sender)?.webContents;
-        contents?.send("netcatty:exit", { sessionId, exitCode: 1, error: err.message });
+        const contents = event.sender;
+        safeSend(contents, "netcatty:exit", { sessionId, exitCode: 1, error: err.message });
         sessions.delete(sessionId);
         for (const c of chainConnections) {
           try { c.end(); } catch {}
@@ -588,21 +608,21 @@ async function startSSHSession(event, options) {
       });
 
       conn.on("close", () => {
-        const contents = electronModule.BrowserWindow.fromWebContents(event.sender)?.webContents;
-        contents?.send("netcatty:exit", { sessionId, exitCode: 0 });
+        const contents = event.sender;
+        safeSend(contents, "netcatty:exit", { sessionId, exitCode: 0 });
         sessions.delete(sessionId);
         for (const c of chainConnections) {
           try { c.end(); } catch {}
         }
       });
 
-      console.log(`[Chain] Connecting to final target ${options.hostname}...`);
+      console.log(`${logPrefix} Connecting to ${options.hostname}...`);
       conn.connect(connectOpts);
     });
   } catch (err) {
     console.error("[Chain] SSH chain connection error:", err.message);
-    const contents = electronModule.BrowserWindow.fromWebContents(event.sender)?.webContents;
-    contents?.send("netcatty:exit", { sessionId, exitCode: 1, error: err.message });
+    const contents = event.sender;
+    safeSend(contents, "netcatty:exit", { sessionId, exitCode: 1, error: err.message });
     throw err;
   }
 }
@@ -754,12 +774,86 @@ async function generateKeyPair(event, options) {
   }
 }
 
+/**
+ * Wrapper for SSH session handler to suppress noisy auth error stack traces
+ * Auth failures are expected when fallback to password is available
+ */
+async function startSSHSessionWrapper(event, options) {
+  try {
+    return await startSSHSession(event, options);
+  } catch (err) {
+    const isAuthError = err.message?.toLowerCase().includes('authentication') ||
+                       err.message?.toLowerCase().includes('auth') ||
+                       err.level === 'client-authentication';
+    
+    if (isAuthError) {
+      // Re-throw with a clean error to avoid Electron printing full stack trace
+      // The frontend will handle this as a normal auth failure for fallback
+      const authError = new Error(err.message);
+      authError.level = 'client-authentication';
+      authError.isAuthError = true;
+      throw authError;
+    }
+    throw err;
+  }
+}
+
+/**
+ * Get current working directory from an active SSH session
+ * This sends 'pwd' to the shell and captures the output
+ */
+async function getSessionPwd(event, payload) {
+  const { sessionId } = payload;
+  const session = sessions.get(sessionId);
+  
+  if (!session || !session.stream || !session.conn) {
+    return { success: false, error: 'Session not found or not connected' };
+  }
+  
+  return new Promise((resolve) => {
+    const conn = session.conn;
+    const timeout = setTimeout(() => {
+      resolve({ success: false, error: 'Timeout getting pwd' });
+    }, 3000);
+    
+    // Use exec on the existing connection to run pwd
+    conn.exec('pwd', (err, stream) => {
+      if (err) {
+        clearTimeout(timeout);
+        resolve({ success: false, error: err.message });
+        return;
+      }
+      
+      let stdout = '';
+      stream.on('data', (data) => {
+        stdout += data.toString();
+      });
+      
+      stream.on('close', () => {
+        clearTimeout(timeout);
+        const cwd = stdout.trim().split(/\r?\n/).pop()?.trim();
+        if (cwd && cwd.startsWith('/')) {
+          resolve({ success: true, cwd });
+        } else {
+          resolve({ success: false, error: 'Invalid pwd output' });
+        }
+      });
+      
+      stream.on('error', (err) => {
+        clearTimeout(timeout);
+        resolve({ success: false, error: err.message });
+      });
+    });
+  });
+}
+
 /**
  * Register IPC handlers for SSH operations
  */
 function registerHandlers(ipcMain) {
-  ipcMain.handle("netcatty:start", startSSHSession);
+  ipcMain.handle("netcatty:start", startSSHSessionWrapper);
   ipcMain.handle("netcatty:ssh:exec", execCommand);
+  ipcMain.handle("netcatty:ssh:pwd", getSessionPwd);
   ipcMain.handle("netcatty:key:generate", generateKeyPair);
 }
 
@@ -769,5 +863,6 @@ module.exports = {
   createProxySocket,
   startSSHSession,
   execCommand,
+  getSessionPwd,
   generateKeyPair,
 };

electron/main.cjs

@@ -432,6 +432,90 @@ const registerBridges = (win) => {
     };
   });
 
+  // Select an application from system file picker
+  ipcMain.handle("netcatty:selectApplication", async () => {
+    const { dialog } = electronModule;
+    
+    let filters = [];
+    let defaultPath;
+    
+    if (process.platform === "darwin") {
+      filters = [{ name: "Applications", extensions: ["app"] }];
+      defaultPath = "/Applications";
+    } else if (process.platform === "win32") {
+      filters = [{ name: "Executables", extensions: ["exe", "com", "bat", "cmd"] }];
+      defaultPath = "C:\\Program Files";
+    } else {
+      // Linux - no specific filter, user can pick any executable
+      filters = [{ name: "All Files", extensions: ["*"] }];
+      defaultPath = "/usr/bin";
+    }
+    
+    const result = await dialog.showOpenDialog({
+      title: "Select Application",
+      defaultPath,
+      filters,
+      properties: ["openFile"],
+    });
+    
+    if (result.canceled || !result.filePaths.length) {
+      return null;
+    }
+    
+    const appPath = result.filePaths[0];
+    const appName = path.basename(appPath).replace(/\.[^.]+$/, "");
+    
+    return { path: appPath, name: appName };
+  });
+
+  // Open a file with a specific application
+  ipcMain.handle("netcatty:openWithApplication", async (_event, { filePath, appPath }) => {
+    const { shell, spawn } = electronModule;
+    const { spawn: cpSpawn } = require("node:child_process");
+    
+    if (process.platform === "darwin") {
+      // On macOS, use 'open' command with -a flag for specific app
+      cpSpawn("open", ["-a", appPath, filePath], { detached: true, stdio: "ignore" }).unref();
+    } else if (process.platform === "win32") {
+      // On Windows, just spawn the exe with the file as argument
+      cpSpawn(appPath, [filePath], { detached: true, stdio: "ignore", shell: true }).unref();
+    } else {
+      // On Linux, spawn the app with the file
+      cpSpawn(appPath, [filePath], { detached: true, stdio: "ignore" }).unref();
+    }
+    
+    return true;
+  });
+
+  // Download SFTP file to temp and return local path
+  ipcMain.handle("netcatty:sftp:downloadToTemp", async (_event, { sftpId, remotePath, fileName }) => {
+    const client = require("./bridges/sftpBridge.cjs");
+    const tempDir = os.tmpdir();
+    const tempFileName = `netcatty_${Date.now()}_${fileName}`;
+    const localPath = path.join(tempDir, tempFileName);
+    
+    // Get the sftp client and download file
+    const sftpClients = client.getSftpClients ? client.getSftpClients() : null;
+    if (!sftpClients) {
+      // Fallback: use readSftp and write to temp file
+      const content = await client.readSftp(null, { sftpId, path: remotePath });
+      if (typeof content === "string") {
+        await fs.promises.writeFile(localPath, content, "utf-8");
+      } else {
+        await fs.promises.writeFile(localPath, content);
+      }
+      return localPath;
+    }
+    
+    const sftpClient = sftpClients.get(sftpId);
+    if (!sftpClient) {
+      throw new Error("SFTP session not found");
+    }
+    
+    await sftpClient.fastGet(remotePath, localPath);
+    return localPath;
+  });
+
   console.log('[Main] All bridges registered successfully');
 };
 

electron/preload.cjs

@@ -234,6 +234,9 @@ const api = {
   execCommand: async (options) => {
     return ipcRenderer.invoke("netcatty:ssh:exec", options);
   },
+  getSessionPwd: async (sessionId) => {
+    return ipcRenderer.invoke("netcatty:ssh:pwd", { sessionId });
+  },
   generateKeyPair: async (options) => {
     return ipcRenderer.invoke("netcatty:key:generate", options);
   },
@@ -501,6 +504,14 @@ const api = {
     ipcRenderer.invoke("netcatty:onedrive:drive:downloadSyncFile", options),
   onedriveDeleteSyncFile: (options) =>
     ipcRenderer.invoke("netcatty:onedrive:drive:deleteSyncFile", options),
+
+  // File opener helpers (for "Open With" feature)
+  selectApplication: () =>
+    ipcRenderer.invoke("netcatty:selectApplication"),
+  openWithApplication: (filePath, appPath) =>
+    ipcRenderer.invoke("netcatty:openWithApplication", { filePath, appPath }),
+  downloadSftpToTemp: (sftpId, remotePath, fileName) =>
+    ipcRenderer.invoke("netcatty:sftp:downloadToTemp", { sftpId, remotePath, fileName }),
 };
 
 // Merge with existing netcatty (if any) to avoid stale objects on hot reload

global.d.ts

@@ -61,6 +61,8 @@ interface NetcattySSHOptions {
   proxy?: NetcattyProxyConfig;
   // Jump hosts (bastion chain)
   jumpHosts?: NetcattyJumpHost[];
+  // SSH-level keepalive interval in seconds (0 = disabled)
+  keepaliveInterval?: number;
 }
 
 interface SftpStatResult {
@@ -168,6 +170,8 @@ interface NetcattyBridge {
     command: string;
     timeout?: number;
   }): Promise<{ stdout: string; stderr: string; code: number | null }>;
+  /** Get current working directory from an active SSH session */
+  getSessionPwd?(sessionId: string): Promise<{ success: boolean; cwd?: string; error?: string }>;
   writeToSession(sessionId: string, data: string): void;
   resizeSession(sessionId: string, cols: number, rows: number): void;
   closeSession(sessionId: string): void;
@@ -408,6 +412,11 @@ interface NetcattyBridge {
   onedriveUploadSyncFile?(options: { accessToken: string; fileName?: string; syncedFile: unknown }): Promise<{ fileId: string | null }>;
   onedriveDownloadSyncFile?(options: { accessToken: string; fileId?: string; fileName?: string }): Promise<{ syncedFile: unknown | null }>;
   onedriveDeleteSyncFile?(options: { accessToken: string; fileId: string }): Promise<{ ok: true }>;
+
+  // File opener helpers (for "Open With" feature)
+  selectApplication?(): Promise<{ path: string; name: string } | null>;
+  openWithApplication?(filePath: string, appPath: string): Promise<boolean>;
+  downloadSftpToTemp?(sftpId: string, remotePath: string, fileName: string): Promise<string>;
 }
 
 interface Window {

index.html

@@ -5,7 +5,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="Content-Security-Policy"
-    content="default-src 'self'; script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval'; style-src 'self' 'unsafe-inline'; font-src 'self'; connect-src 'self' data: blob: ws: wss: https:; img-src 'self' data: https:;" />
+    content="default-src 'self'; script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval'; worker-src 'self' blob:; style-src 'self' 'unsafe-inline'; font-src 'self' data:; connect-src 'self' data: blob: ws: wss: https:; img-src 'self' data: https:;" />
   <title>netcatty SSH</title>
   <style>
     /* Load extended Unicode ranges for terminal box drawing characters */
@@ -206,4 +206,4 @@
   <script type="module" src="/index.tsx"></script>
 </body>
 
-</html>
+</html>

infrastructure/config/fonts.ts

@@ -30,7 +30,7 @@ const CJK_FALLBACK_FONTS = [
 
 const CJK_FALLBACK_STACK = CJK_FALLBACK_FONTS.join(', ');
 
-const withCjkFallback = (family: string) => {
+export const withCjkFallback = (family: string) => {
   const trimmed = family.trim();
   if (!CJK_FALLBACK_STACK) return trimmed;
   // Avoid double-appending if a custom stack already includes one of these fonts.

infrastructure/config/storageKeys.ts

@@ -35,5 +35,11 @@ export const STORAGE_KEY_VAULT_KNOWN_HOSTS_VIEW_MODE = 'netcatty_vault_known_hos
 export const STORAGE_KEY_UPDATE_LAST_CHECK = 'netcatty_update_last_check_v1';
 export const STORAGE_KEY_UPDATE_DISMISSED_VERSION = 'netcatty_update_dismissed_version_v1';
 
+// SFTP File Opener Associations
+export const STORAGE_KEY_SFTP_FILE_ASSOCIATIONS = 'netcatty_sftp_file_associations_v1';
+
+// SFTP Settings
+export const STORAGE_KEY_SFTP_DOUBLE_CLICK_BEHAVIOR = 'netcatty_sftp_double_click_behavior_v1';
+
 // Archived legacy key records that are no longer supported by the app (e.g. biometric/WebAuthn/FIDO2 experiments).
 export const STORAGE_KEY_LEGACY_KEYS = 'netcatty_legacy_keys_v1';

infrastructure/services/portForwardingService.ts

@@ -14,11 +14,84 @@ export interface PortForwardingConnection {
   status: 'inactive' | 'connecting' | 'active' | 'error';
   error?: string;
   unsubscribe?: () => void;
+  // Reconnect state
+  reconnectAttempts?: number;
+  reconnectTimeoutId?: ReturnType<typeof setTimeout>;
 }
 
 // Map to track active connections
 const activeConnections = new Map<string, PortForwardingConnection>();
 
+// Reconnect configuration
+const MAX_RECONNECT_ATTEMPTS = 5;
+const RECONNECT_DELAY_MS = 3000; // 3 seconds between reconnection attempts
+
+// Callbacks for auto-reconnect - will be set by the state hook
+let reconnectCallback: ((
+  ruleId: string,
+  onStatusChange: (status: PortForwardingRule['status'], error?: string) => void
+) => Promise<{ success: boolean; error?: string }>) | null = null;
+
+/**
+ * Set the reconnect callback (called by state hook to enable auto-reconnect)
+ */
+export const setReconnectCallback = (
+  callback: typeof reconnectCallback
+): void => {
+  reconnectCallback = callback;
+};
+
+/**
+ * Clear any pending reconnect for a rule
+ */
+export const clearReconnectTimer = (ruleId: string): void => {
+  const conn = activeConnections.get(ruleId);
+  if (conn?.reconnectTimeoutId) {
+    clearTimeout(conn.reconnectTimeoutId);
+    conn.reconnectTimeoutId = undefined;
+  }
+};
+
+/**
+ * Helper function to schedule a reconnection attempt
+ * Returns true if a reconnect was scheduled, false otherwise
+ */
+const scheduleReconnectIfNeeded = (
+  ruleId: string,
+  enableReconnect: boolean,
+  onStatusChange: (status: PortForwardingRule['status'], error?: string) => void,
+): boolean => {
+  if (!enableReconnect || !reconnectCallback) {
+    return false;
+  }
+
+  const currentConn = activeConnections.get(ruleId);
+  const attempts = (currentConn?.reconnectAttempts ?? 0) + 1;
+
+  if (attempts <= MAX_RECONNECT_ATTEMPTS) {
+    logger.info(`[PortForwardingService] Scheduling reconnect ${attempts}/${MAX_RECONNECT_ATTEMPTS}`);
+
+    if (currentConn) {
+      currentConn.reconnectAttempts = attempts;
+      currentConn.reconnectTimeoutId = setTimeout(() => {
+        if (reconnectCallback) {
+          reconnectCallback(ruleId, onStatusChange);
+        }
+      }, RECONNECT_DELAY_MS);
+    }
+
+    onStatusChange('connecting', `Reconnecting (${attempts}/${MAX_RECONNECT_ATTEMPTS})...`);
+    return true;
+  }
+
+  logger.warn(`[PortForwardingService] Max reconnect attempts (${MAX_RECONNECT_ATTEMPTS}) reached for rule ${ruleId}`);
+  // Reset reconnect attempts
+  if (currentConn) {
+    currentConn.reconnectAttempts = 0;
+  }
+  return false;
+};
+
 /**
  * Get active connection info for a rule
  */
@@ -106,15 +179,20 @@ export const syncWithBackend = async (): Promise<void> => {
 
 /**
  * Start a port forwarding tunnel
+ * @param enableReconnect - If true, will automatically attempt to reconnect on disconnect
  */
 export const startPortForward = async (
   rule: PortForwardingRule,
   host: Host,
   keys: { id: string; privateKey: string }[],
-  onStatusChange: (status: PortForwardingRule['status'], error?: string) => void
+  onStatusChange: (status: PortForwardingRule['status'], error?: string) => void,
+  enableReconnect = false
 ): Promise<{ success: boolean; error?: string }> => {
   const bridge = netcattyBridge.get();
   
+  // Clear any existing reconnect timer
+  clearReconnectTimer(rule.id);
+  
   if (!bridge?.startPortForward) {
     // Fallback for browser/dev mode - simulate the connection
     logger.warn('[PortForwardingService] Backend not available, simulating connection...');
@@ -141,15 +219,26 @@ export const startPortForward = async (
         conn.status = status;
         conn.error = error;
       }
+      
+      // Handle auto-reconnect on error/disconnect
+      if (status === 'error') {
+        const reconnectScheduled = scheduleReconnectIfNeeded(rule.id, enableReconnect, onStatusChange);
+        if (reconnectScheduled) {
+          return;
+        }
+      }
+      
       onStatusChange(status, error ?? undefined);
     });
     
-    // Store connection info
+    // Store connection info (preserve reconnect attempts if this is a reconnect)
+    const existingConn = activeConnections.get(rule.id);
     activeConnections.set(rule.id, {
       ruleId: rule.id,
       tunnelId,
       status: 'connecting',
       unsubscribe,
+      reconnectAttempts: existingConn?.reconnectAttempts ?? 0,
     });
     
     onStatusChange('connecting');
@@ -170,16 +259,35 @@ export const startPortForward = async (
     });
     
     if (!result.success) {
+      // Check if we should attempt reconnect
+      const reconnectScheduled = scheduleReconnectIfNeeded(rule.id, enableReconnect, onStatusChange);
+      if (reconnectScheduled) {
+        return { success: false, error: result.error };
+      }
+      
       activeConnections.delete(rule.id);
       unsubscribe?.();
       onStatusChange('error', result.error);
       return { success: false, error: result.error };
     }
     
+    // Reset reconnect attempts on successful connection
+    const conn = activeConnections.get(rule.id);
+    if (conn) {
+      conn.reconnectAttempts = 0;
+    }
+    
     return { success: true };
     
   } catch (err) {
     const error = err instanceof Error ? err.message : 'Unknown error';
+    
+    // Check if we should attempt reconnect
+    const reconnectScheduled = scheduleReconnectIfNeeded(rule.id, enableReconnect, onStatusChange);
+    if (reconnectScheduled) {
+      return { success: false, error };
+    }
+    
     onStatusChange('error', error);
     activeConnections.delete(rule.id);
     return { success: false, error };
@@ -196,6 +304,9 @@ export const stopPortForward = async (
   const bridge = netcattyBridge.get();
   const conn = activeConnections.get(ruleId);
   
+  // Clear any pending reconnect timer
+  clearReconnectTimer(ruleId);
+  
   if (!conn) {
     onStatusChange('inactive');
     return { success: true };
@@ -249,16 +360,19 @@ export const isBackendAvailable = (): boolean => {
 export const stopAllPortForwards = async (): Promise<void> => {
   const bridge = netcattyBridge.get();
   
-  for (const [_ruleId, conn] of activeConnections) {
-	    try {
-	      if (bridge?.stopPortForward) {
-	        await bridge.stopPortForward(conn.tunnelId);
-	      }
-	      conn.unsubscribe?.();
-	    } catch (err) {
-	      logger.warn(`[PortForwardingService] Failed to stop tunnel ${conn.tunnelId}:`, err);
-	    }
-	  }
+  for (const [ruleId, conn] of activeConnections) {
+    // Clear any pending reconnect timer
+    clearReconnectTimer(ruleId);
+    
+    try {
+      if (bridge?.stopPortForward) {
+        await bridge.stopPortForward(conn.tunnelId);
+      }
+      conn.unsubscribe?.();
+    } catch (err) {
+      logger.warn(`[PortForwardingService] Failed to stop tunnel ${conn.tunnelId}:`, err);
+    }
+  }
   
   activeConnections.clear();
 };
@@ -299,4 +413,6 @@ export default {
   getPortForwardStatus,
   isBackendAvailable,
   stopAllPortForwards,
+  setReconnectCallback,
+  clearReconnectTimer,
 };

lib/localFonts.ts

@@ -0,0 +1,127 @@
+import { TerminalFont, withCjkFallback } from "../infrastructure/config/fonts"
+
+/**
+ * Type definition for Local Font Access API
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Local_Font_Access_API
+ */
+interface LocalFontData {
+    family: string;
+}
+
+/**
+ * Known monospace font families that don't follow naming conventions.
+ * These are popular programming/terminal fonts that should be included.
+ */
+const KNOWN_MONOSPACE_FONTS = new Set([
+    // Popular programming fonts
+    'iosevka',
+    'hack',
+    'consolas',
+    'menlo',
+    'monaco',
+    'inconsolata',
+    'mononoki',
+    'fantasque sans mono',
+    'anonymous pro',
+    'liberation mono',
+    'dejavu sans mono',
+    'droid sans mono',
+    'ubuntu mono',
+    'roboto mono',
+    'source code pro',
+    'fira code',
+    'fira mono',
+    'jetbrains mono',
+    'cascadia code',
+    'cascadia mono',
+    'victor mono',
+    'ibm plex mono',
+    'sf mono',
+    'operator mono',
+    'input mono',
+    'pragmata pro',
+    'berkeley mono',
+    'monaspace',
+    'geist mono',
+    'comic mono',
+    'courier',
+    'courier new',
+    'lucida console',
+    'pt mono',
+    'overpass mono',
+    'space mono',
+    'go mono',
+    'noto sans mono',
+    'sarasa mono',
+    'maple mono',
+]);
+
+/**
+ * Suffix indicators that suggest a font is monospace
+ */
+const MONO_SUFFIX_INDICATORS = ['mono', 'monospace', 'code', 'terminal', 'console'];
+
+/**
+ * Checks if a font family name indicates a monospace font.
+ * Uses both known font list and suffix matching for comprehensive detection.
+ */
+function isMonospaceFont(familyName: string): boolean {
+    const familyLower = familyName.toLowerCase().trim();
+    
+    // Check against known monospace fonts (exact or partial match)
+    for (const knownFont of KNOWN_MONOSPACE_FONTS) {
+        if (familyLower === knownFont || familyLower.startsWith(knownFont + ' ')) {
+            return true;
+        }
+    }
+    
+    // Check suffix indicators with word boundary
+    return MONO_SUFFIX_INDICATORS.some(indicator => {
+        return (
+            familyLower === indicator ||
+            familyLower.endsWith(' ' + indicator) ||
+            familyLower.endsWith('-' + indicator) ||
+            familyLower.includes(' ' + indicator + ' ')
+        );
+    });
+}
+
+/**
+ * Queries local monospace fonts from the system using the Font Access API.
+ * Returns an empty array if the API is not available or permission is denied.
+ */
+export async function getMonospaceFonts(): Promise<TerminalFont[]> {
+    // Check if the Font Access API is available
+    if (typeof window === "undefined" || !("queryLocalFonts" in window)) {
+        return [];
+    }
+
+    try {
+        const queryLocalFonts = (window as unknown as { queryLocalFonts: () => Promise<LocalFontData[]> }).queryLocalFonts;
+        const fonts = await queryLocalFonts();
+
+        // Filter monospace fonts using robust word boundary matching
+        const monoFonts = fonts.filter(f => isMonospaceFont(f.family));
+
+        // Deduplicate by family name (API may return multiple entries per family)
+        const uniqueFamilies = new Set<string>();
+        const dedupedFonts = monoFonts.filter(f => {
+            if (uniqueFamilies.has(f.family)) return false;
+            uniqueFamilies.add(f.family);
+            return true;
+        });
+
+        // Map to TerminalFont structure with CJK fallback applied
+        return dedupedFonts.map(f => ({
+            id: f.family,
+            name: f.family,
+            family: withCjkFallback(f.family + ', monospace'),
+            description: `Local font: ${f.family}`,
+            category: 'monospace' as const,
+        }));
+    } catch (error) {
+        // Handle permission denied or other errors gracefully
+        console.warn('Failed to query local fonts:', error);
+        return [];
+    }
+}

lib/sftpFileUtils.ts

@@ -0,0 +1,426 @@
+/**
+ * SFTP File Utilities
+ * Helper functions for file type detection and extension handling
+ */
+
+// Common text file extensions
+const TEXT_EXTENSIONS = new Set([
+  // Code/Scripts
+  'js', 'jsx', 'ts', 'tsx', 'mjs', 'cjs', 'vue', 'svelte',
+  'py', 'pyw', 'pyi',
+  'sh', 'bash', 'zsh', 'fish', 'bat', 'cmd', 'ps1', 'psm1',
+  'c', 'cpp', 'h', 'hpp', 'cc', 'cxx', 'hh', 'hxx',
+  'java', 'scala', 'kt', 'kts', 'groovy', 'gradle',
+  'go', 'rs', 'rb', 'php', 'pl', 'pm', 'lua', 'r', 'R',
+  'swift', 'dart', 'cs', 'fs', 'vb',
+  'ex', 'exs', 'erl', 'hrl', 'clj', 'cljs', 'cljc',
+  'hs', 'lhs', 'elm', 'ml', 'mli', 'nim',
+  // Web
+  'html', 'htm', 'xhtml', 'css', 'scss', 'sass', 'less', 'styl',
+  // Config/Data
+  'json', 'json5', 'jsonc', 'xml', 'xsl', 'xslt', 'xsd',
+  'yml', 'yaml', 'toml', 'ini', 'conf', 'cfg', 'config', 'properties',
+  'env', 'gitignore', 'gitattributes', 'editorconfig', 'eslintrc', 'prettierrc',
+  'sql', 'graphql', 'gql',
+  // Text/Docs
+  'md', 'markdown', 'mdx', 'txt', 'text', 'log', 'rst', 'adoc', 'asciidoc',
+  'tex', 'latex', 'bib',
+  // Data formats
+  'csv', 'tsv', 'psv',
+  // System
+  'rc', 'bashrc', 'zshrc', 'profile', 'vimrc', 'tmux', 'nanorc',
+  'dockerfile', 'containerfile', 'makefile', 'cmake', 'mak',
+  // Version control & Git
+  'gitconfig', 'gitmodules', 'gitkeep',
+  // Other common text formats
+  'diff', 'patch', 'htaccess', 'lock', 'sum',
+  // Service/System files
+  'service', 'socket', 'timer', 'mount', 'automount', 'target',
+  // Shell history and data
+  'history', 'zsh_history', 'bash_history',
+]);
+
+// Additional filenames (no extension) that are always text
+const TEXT_FILENAMES = new Set([
+  'readme', 'license', 'licence', 'changelog', 'authors', 'contributors',
+  'copying', 'install', 'news', 'todo', 'history', 'makefile', 'dockerfile',
+  'gemfile', 'rakefile', 'brewfile', 'procfile', 'vagrantfile',
+  'cmakelists.txt', 'cmakelists',
+]);
+
+// Common image file extensions
+const IMAGE_EXTENSIONS = new Set([
+  'jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg',
+  'ico', 'tiff', 'tif', 'heic', 'heif', 'avif', 'jfif',
+]);
+
+// Known binary file extensions - files that should never be opened as text
+const BINARY_EXTENSIONS = new Set([
+  // Images
+  'jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'ico', 'tiff', 'tif',
+  'heic', 'heif', 'avif', 'jfif', 'psd', 'ai', 'eps', 'raw', 'cr2', 'nef',
+  // Audio
+  'mp3', 'wav', 'flac', 'aac', 'ogg', 'wma', 'm4a', 'aiff', 'opus',
+  // Video
+  'mp4', 'avi', 'mkv', 'mov', 'wmv', 'flv', 'webm', 'm4v', '3gp', 'mpeg', 'mpg',
+  // Archives
+  'zip', 'rar', '7z', 'tar', 'gz', 'bz2', 'xz', 'lz', 'lzma', 'zst',
+  'tgz', 'tbz2', 'txz', 'cab', 'iso', 'dmg',
+  // Executables
+  'exe', 'dll', 'so', 'dylib', 'bin', 'app', 'msi', 'deb', 'rpm',
+  'apk', 'ipa', 'jar', 'war', 'ear',
+  // Documents (binary formats)
+  'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'odt', 'ods', 'odp',
+  // Fonts
+  'ttf', 'otf', 'woff', 'woff2', 'eot',
+  // Database
+  'db', 'sqlite', 'sqlite3', 'mdb', 'accdb',
+  // Object files
+  'o', 'obj', 'pyc', 'pyo', 'class', 'beam',
+  // Other binary
+  'swf', 'fla', 'blend', 'unity3d', 'unitypackage',
+]);
+
+// MIME types for images (for creating blob URLs)
+const IMAGE_MIME_TYPES: Record<string, string> = {
+  jpg: 'image/jpeg',
+  jpeg: 'image/jpeg',
+  jfif: 'image/jpeg',
+  png: 'image/png',
+  gif: 'image/gif',
+  bmp: 'image/bmp',
+  webp: 'image/webp',
+  svg: 'image/svg+xml',
+  ico: 'image/x-icon',
+  tiff: 'image/tiff',
+  tif: 'image/tiff',
+  heic: 'image/heic',
+  heif: 'image/heif',
+  avif: 'image/avif',
+};
+
+// Language IDs for syntax highlighting
+const EXTENSION_TO_LANGUAGE: Record<string, string> = {
+  js: 'javascript',
+  jsx: 'javascript',
+  mjs: 'javascript',
+  cjs: 'javascript',
+  ts: 'typescript',
+  tsx: 'typescript',
+  py: 'python',
+  pyw: 'python',
+  pyi: 'python',
+  sh: 'shell',
+  bash: 'shell',
+  zsh: 'shell',
+  fish: 'shell',
+  bat: 'batch',
+  cmd: 'batch',
+  ps1: 'powershell',
+  psm1: 'powershell',
+  c: 'c',
+  cpp: 'cpp',
+  h: 'c',
+  hpp: 'cpp',
+  cc: 'cpp',
+  cxx: 'cpp',
+  java: 'java',
+  kt: 'kotlin',
+  kts: 'kotlin',
+  go: 'go',
+  rs: 'rust',
+  rb: 'ruby',
+  php: 'php',
+  pl: 'perl',
+  lua: 'lua',
+  r: 'r',
+  R: 'r',
+  swift: 'swift',
+  dart: 'dart',
+  cs: 'csharp',
+  fs: 'fsharp',
+  vb: 'vb',
+  html: 'html',
+  htm: 'html',
+  xhtml: 'html',
+  css: 'css',
+  scss: 'scss',
+  sass: 'sass',
+  less: 'less',
+  json: 'json',
+  jsonc: 'jsonc',
+  json5: 'json5',
+  xml: 'xml',
+  xsl: 'xml',
+  xslt: 'xml',
+  yml: 'yaml',
+  yaml: 'yaml',
+  toml: 'toml',
+  ini: 'ini',
+  conf: 'ini',
+  cfg: 'ini',
+  sql: 'sql',
+  graphql: 'graphql',
+  gql: 'graphql',
+  md: 'markdown',
+  markdown: 'markdown',
+  mdx: 'markdown',
+  txt: 'plaintext',
+  log: 'plaintext',
+  vue: 'vue',
+  svelte: 'svelte',
+  dockerfile: 'dockerfile',
+  makefile: 'makefile',
+  diff: 'diff',
+  patch: 'diff',
+};
+
+/**
+ * Get the file extension from a filename
+ * For files without extension, returns 'file'
+ */
+export function getFileExtension(fileName: string): string {
+  const lastDot = fileName.lastIndexOf('.');
+  if (lastDot === -1 || lastDot === 0) {
+    return 'file'; // No extension or hidden file without extension
+  }
+  return fileName.slice(lastDot + 1).toLowerCase();
+}
+
+/**
+ * Check if a file is a text file based on its extension and name
+ */
+export function isTextFile(fileName: string): boolean {
+  const ext = getFileExtension(fileName);
+  
+  // Check known text extensions
+  if (TEXT_EXTENSIONS.has(ext)) {
+    return true;
+  }
+  
+  // Check common filenames that are text but have no extension
+  const baseName = fileName.toLowerCase().split('/').pop() || '';
+  const nameWithoutExt = baseName.replace(/\.[^.]+$/, '');
+  
+  // Check exact filename matches
+  if (TEXT_FILENAMES.has(baseName) || TEXT_FILENAMES.has(nameWithoutExt)) {
+    return true;
+  }
+  
+  // Check dot-files that are typically text config files
+  if (baseName.startsWith('.')) {
+    const dotConfigPatterns = [
+      /^\.(git|npm|yarn|docker|eslint|prettier|babel|env)/,
+      /^\.(nvmrc|ruby-version|python-version|node-version)$/,
+      /rc$/, // Files ending with 'rc' like .bashrc, .vimrc
+    ];
+    if (dotConfigPatterns.some(pattern => pattern.test(baseName))) {
+      return true;
+    }
+  }
+  
+  return false;
+}
+
+/**
+ * Check if binary data appears to be text by analyzing byte patterns
+ * This provides a more accurate detection than extension-only checking
+ * 
+ * @param data - First chunk of file data (ArrayBuffer or Uint8Array)
+ * @param maxBytes - Maximum bytes to check (default 512)
+ * @returns true if data appears to be text
+ */
+export function isTextData(data: ArrayBuffer | Uint8Array, maxBytes: number = 512): boolean {
+  const bytes = data instanceof ArrayBuffer ? new Uint8Array(data) : data;
+  const checkLength = Math.min(bytes.length, maxBytes);
+  
+  if (checkLength === 0) return true; // Empty file is considered text
+  
+  let controlChars = 0;
+  let nullBytes = 0;
+  let highBytes = 0;
+  let totalBytes = 0;
+  
+  for (let i = 0; i < checkLength; i++) {
+    const byte = bytes[i];
+    totalBytes++;
+    
+    // Null bytes are strong indicators of binary files
+    if (byte === 0) {
+      nullBytes++;
+      if (nullBytes > 0) return false; // Even one null byte suggests binary
+    }
+    
+    // Control characters (except common ones like \t, \n, \r)
+    if (byte < 32 && byte !== 9 && byte !== 10 && byte !== 13) {
+      controlChars++;
+    }
+    
+    // High-bit characters (non-ASCII) - some are OK for UTF-8
+    if (byte > 127) {
+      highBytes++;
+    }
+  }
+  
+  // If more than 30% are control chars or more than 95% are high-bit chars, likely binary
+  const controlRatio = controlChars / totalBytes;
+  const highRatio = highBytes / totalBytes;
+  
+  if (controlRatio > 0.3) return false;
+  if (highRatio > 0.95) return false;
+  
+  return true;
+}
+
+/**
+ * Enhanced text file detection combining extension and content analysis
+ * Use this when you have access to file data for better accuracy
+ */
+export function isTextFileEnhanced(fileName: string, data?: ArrayBuffer | Uint8Array): boolean {
+  // First check by extension
+  const extCheck = isTextFile(fileName);
+  
+  // If we have data, verify it's actually text
+  if (data && data.byteLength > 0) {
+    return extCheck && isTextData(data);
+  }
+  
+  // Fall back to extension-only check
+  return extCheck;
+}
+
+/**
+ * Check if a file is definitely a binary file based on its extension.
+ * Used to exclude files from "Edit" option in context menu.
+ */
+export function isKnownBinaryFile(fileName: string): boolean {
+  const ext = getFileExtension(fileName);
+  return BINARY_EXTENSIONS.has(ext);
+}
+
+/**
+ * Check if a file could potentially be opened as text.
+ * This is more permissive than isTextFile - it returns true for any file
+ * that is not a known binary file. Used for showing "Edit" in context menu.
+ * Actual text detection should be done by reading file content.
+ */
+export function couldBeTextFile(fileName: string): boolean {
+  // If it's a known binary file, definitely not text
+  if (isKnownBinaryFile(fileName)) {
+    return false;
+  }
+  // Otherwise, it could be text - we'll verify when actually opening
+  return true;
+}
+
+/**
+ * Check if a file is an image file based on its extension
+ */
+export function isImageFile(fileName: string): boolean {
+  const ext = getFileExtension(fileName);
+  return IMAGE_EXTENSIONS.has(ext);
+}
+
+/**
+ * Get MIME type for an image file
+ */
+export function getImageMimeType(fileName: string): string {
+  const ext = getFileExtension(fileName);
+  return IMAGE_MIME_TYPES[ext] || 'application/octet-stream';
+}
+
+/**
+ * Get language ID for syntax highlighting
+ */
+export function getLanguageId(fileName: string): string {
+  const ext = getFileExtension(fileName);
+  return EXTENSION_TO_LANGUAGE[ext] || 'plaintext';
+}
+
+/**
+ * Get a user-friendly name for a language
+ */
+export function getLanguageName(languageId: string): string {
+  const names: Record<string, string> = {
+    javascript: 'JavaScript',
+    typescript: 'TypeScript',
+    python: 'Python',
+    shell: 'Shell',
+    batch: 'Batch',
+    powershell: 'PowerShell',
+    c: 'C',
+    cpp: 'C++',
+    java: 'Java',
+    kotlin: 'Kotlin',
+    go: 'Go',
+    rust: 'Rust',
+    ruby: 'Ruby',
+    php: 'PHP',
+    perl: 'Perl',
+    lua: 'Lua',
+    r: 'R',
+    swift: 'Swift',
+    dart: 'Dart',
+    csharp: 'C#',
+    fsharp: 'F#',
+    vb: 'Visual Basic',
+    html: 'HTML',
+    css: 'CSS',
+    scss: 'SCSS',
+    sass: 'Sass',
+    less: 'Less',
+    json: 'JSON',
+    jsonc: 'JSON with Comments',
+    json5: 'JSON5',
+    xml: 'XML',
+    yaml: 'YAML',
+    toml: 'TOML',
+    ini: 'INI',
+    sql: 'SQL',
+    graphql: 'GraphQL',
+    markdown: 'Markdown',
+    plaintext: 'Plain Text',
+    vue: 'Vue',
+    svelte: 'Svelte',
+    dockerfile: 'Dockerfile',
+    makefile: 'Makefile',
+    diff: 'Diff',
+  };
+  return names[languageId] || languageId.charAt(0).toUpperCase() + languageId.slice(1);
+}
+
+/**
+ * File opener application types
+ * - 'builtin-editor': Built-in text editor (Monaco)
+ * - 'system-app': External system application (stores path)
+ */
+export type FileOpenerType = 'builtin-editor' | 'system-app';
+
+/**
+ * System application info for file associations
+ */
+export interface SystemAppInfo {
+  path: string;  // Path to the executable/app
+  name: string;  // Display name
+}
+
+/**
+ * File association record
+ */
+export interface FileAssociation {
+  extension: string;
+  openerType: FileOpenerType;
+  systemApp?: SystemAppInfo;  // Only set when openerType is 'system-app'
+}
+
+/**
+ * Get all supported language IDs for syntax highlighting dropdown
+ */
+export function getSupportedLanguages(): { id: string; name: string }[] {
+  const languageIds = new Set(Object.values(EXTENSION_TO_LANGUAGE));
+  languageIds.add('plaintext');
+  
+  return Array.from(languageIds)
+    .map(id => ({ id, name: getLanguageName(id) }))
+    .sort((a, b) => a.name.localeCompare(b.name));
+}

lib/useRenderTracker.ts

@@ -0,0 +1,90 @@
+import { useRef } from "react";
+import { logger } from "./logger";
+
+/**
+ * 追踪组件渲染次数和原因
+ * 在开发环境下帮助识别不必要的重渲染
+ * 
+ * @param componentName 组件名称
+ * @param props 当前 props（用于比较变化）
+ * @param enabled 是否启用追踪，默认 true
+ */
+export function useRenderTracker(
+  componentName: string,
+  props: Record<string, unknown>,
+  enabled: boolean = true
+): void {
+  const renderCountRef = useRef(0);
+  const prevPropsRef = useRef<Record<string, unknown>>({});
+  
+  renderCountRef.current += 1;
+  
+  if (!enabled) return;
+  
+  const renderCount = renderCountRef.current;
+  const prevProps = prevPropsRef.current;
+  
+  // 找出变化的 props
+  const changedProps: string[] = [];
+  const allKeys = new Set([...Object.keys(props), ...Object.keys(prevProps)]);
+  
+  for (const key of allKeys) {
+    if (prevProps[key] !== props[key]) {
+      changedProps.push(key);
+    }
+  }
+  
+  // 只在有变化时打印（减少日志噪音）
+  if (renderCount === 1) {
+    logger.info(`[Render] ${componentName} - 首次渲染`);
+  } else if (changedProps.length > 0) {
+    logger.info(`[Render] ${componentName} - 第${renderCount}次渲染`, {
+      changedProps,
+      details: changedProps.reduce((acc, key) => {
+        acc[key] = {
+          prev: summarizeValue(prevProps[key]),
+          curr: summarizeValue(props[key]),
+        };
+        return acc;
+      }, {} as Record<string, { prev: string; curr: string }>),
+    });
+  }
+  // 不再打印 "props未变化" 的警告 - 这是正常的 React 行为
+  
+  // 更新 prevProps
+  prevPropsRef.current = { ...props };
+}
+
+/**
+ * 简化值的显示，避免日志过长
+ */
+function summarizeValue(value: unknown): string {
+  if (value === undefined) return "undefined";
+  if (value === null) return "null";
+  if (typeof value === "function") return `fn:${value.name || "anonymous"}`;
+  if (typeof value === "object") {
+    if (Array.isArray(value)) return `Array(${value.length})`;
+    const keys = Object.keys(value);
+    if (keys.length <= 3) {
+      return `{${keys.join(", ")}}`;
+    }
+    return `Object(${keys.length} keys)`;
+  }
+  if (typeof value === "string" && value.length > 30) {
+    return `"${value.slice(0, 30)}..."`;
+  }
+  return String(value);
+}
+
+/**
+ * 简单的渲染计数器，只记录渲染次数不做详细分析
+ */
+export function useRenderCount(componentName: string): number {
+  const renderCountRef = useRef(0);
+  renderCountRef.current += 1;
+  
+  // 每次渲染都打印
+  logger.info(`[Render] ${componentName} - 第${renderCountRef.current}次渲染`);
+  
+  return renderCountRef.current;
+}

package-lock.json

@@ -14,6 +14,7 @@
         "@fontsource/jetbrains-mono": "^5.2.8",
         "@fontsource/space-grotesk": "^5.2.10",
         "@google/genai": "1.33.0",
+        "@monaco-editor/react": "^4.7.0",
         "@radix-ui/react-collapsible": "1.1.12",
         "@radix-ui/react-context-menu": "2.2.16",
         "@radix-ui/react-dialog": "1.1.15",
@@ -30,6 +31,7 @@
         "@xterm/xterm": "^5.5.0",
         "clsx": "2.1.1",
         "lucide-react": "0.560.0",
+        "monaco-editor": "^0.55.1",
         "node-pty": "1.1.0-beta19",
         "react": "^19.2.1",
         "react-dom": "^19.2.1",
@@ -1002,6 +1004,7 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -1745,7 +1748,6 @@
       "dev": true,
       "license": "BSD-2-Clause",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "cross-dirname": "^0.1.0",
         "debug": "^4.3.4",
@@ -1767,7 +1769,6 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "graceful-fs": "^4.2.0",
         "jsonfile": "^6.0.1",
@@ -1784,7 +1785,6 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "universalify": "^2.0.0"
       },
@@ -1799,7 +1799,6 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "engines": {
         "node": ">= 10.0.0"
       }
@@ -2879,6 +2878,29 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.7.0.tgz",
+      "integrity": "sha512-gIwR1HrJrrx+vfyOhYmCZ0/JcWqG5kbfG7+d3f/C1LXk2EvzAbHSg3MQ5lO2sMlo9izoAZ04shohfKLVT6crVA==",
+      "license": "MIT",
+      "dependencies": {
+        "state-local": "^1.0.6"
+      }
+    },
+    "node_modules/@monaco-editor/react": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.7.0.tgz",
+      "integrity": "sha512-cyzXQCtO47ydzxpQtCGSQGOC8Gk3ZUeBXFAxD+CWXYFo5OqZyZUonFl0DwUlTyAfRHntBfw2p3w4s9R6oe1eCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@monaco-editor/loader": "^1.5.0"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.25.0 < 1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@npmcli/fs": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-2.1.2.tgz",
@@ -5598,6 +5620,13 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@types/verror": {
       "version": "1.10.11",
       "resolved": "https://registry.npmjs.org/@types/verror/-/verror-1.10.11.tgz",
@@ -5623,6 +5652,7 @@
       "integrity": "sha512-XtssGWJvypyM2ytBnSnKtHYOGT+4ZwTnBVl36TA4nRO2f4PRNGz5/1OszHzcZCvcBMh+qb7I06uoCmLTRdR9og==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/regexpp": "^4.10.0",
         "@typescript-eslint/scope-manager": "8.51.0",
@@ -5652,6 +5682,7 @@
       "integrity": "sha512-3xP4XzzDNQOIqBMWogftkwxhg5oMKApqY0BAflmLZiFYHqyhSOxv/cd/zPQLTcCXr4AkaKb25joocY0BD1WC6A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.51.0",
         "@typescript-eslint/types": "8.51.0",
@@ -5930,7 +5961,8 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-5.5.0.tgz",
       "integrity": "sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/7zip-bin": {
       "version": "5.2.0",
@@ -5952,6 +5984,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -6011,6 +6044,7 @@
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -6378,6 +6412,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -7102,8 +7137,7 @@
       "integrity": "sha512-+R08/oI0nl3vfPcqftZRpytksBXDzOUveBq/NBVx0sUp1axwzPQrKinNx5yd5sxPu8j1wIy8AfnVQ+5eFdha6Q==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true
+      "optional": true
     },
     "node_modules/cross-env": {
       "version": "10.1.0",
@@ -7344,6 +7378,7 @@
       "integrity": "sha512-59CAAjAhTaIMCN8y9kD573vDkxbs1uhDcrFLHSgutYdPcGOU35Rf95725snvzEOy4BFB7+eLJ8djCNPmGwG67w==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "app-builder-lib": "26.0.12",
         "builder-util": "26.0.11",
@@ -7421,6 +7456,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.7.tgz",
+      "integrity": "sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/dotenv": {
       "version": "16.6.1",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz",
@@ -7661,7 +7705,6 @@
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@electron/asar": "^3.2.1",
         "debug": "^4.1.1",
@@ -7682,7 +7725,6 @@
       "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "graceful-fs": "^4.1.2",
         "jsonfile": "^4.0.0",
@@ -7907,6 +7949,7 @@
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -9861,6 +9904,18 @@
         "node": ">=12"
       }
     },
+    "node_modules/marked": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-14.0.0.tgz",
+      "integrity": "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/matcher": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/matcher/-/matcher-3.0.0.tgz",
@@ -10101,6 +10156,17 @@
         "node": ">=10"
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.55.1",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.55.1.tgz",
+      "integrity": "sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "dompurify": "3.2.7",
+        "marked": "14.0.0"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -10545,6 +10611,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -10603,7 +10670,6 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "commander": "^9.4.0"
       },
@@ -10621,7 +10687,6 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "engines": {
         "node": "^12.20.0 || >=14"
       }
@@ -10729,6 +10794,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
       "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -10738,6 +10804,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -11406,6 +11473,12 @@
         "node": ">= 6"
       }
     },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==",
+      "license": "MIT"
+    },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -11595,7 +11668,6 @@
       "integrity": "sha512-yYrrsWnrXMcdsnu/7YMYAofM1ktpL5By7vZhf15CrXijWWrEYZks5AXBudalfSWJLlnen/QUJUB5aoB0kqZUGA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "mkdirp": "^0.5.1",
         "rimraf": "~2.6.2"
@@ -11659,7 +11731,6 @@
       "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "minimist": "^1.2.6"
       },
@@ -11674,7 +11745,6 @@
       "deprecated": "Rimraf versions prior to v4 are no longer supported",
       "dev": true,
       "license": "ISC",
-      "peer": true,
       "dependencies": {
         "glob": "^7.1.3"
       },
@@ -11823,6 +11893,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -12025,6 +12096,7 @@
       "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -12363,6 +12435,7 @@
       "integrity": "sha512-k7Nwx6vuWx1IJ9Bjuf4Zt1PEllcwe7cls3VNzm4CQ1/hgtFUK2bRNG3rvnpPUhFjmqJKAKtjV576KnUkHocg/g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

package.json

@@ -1,15 +1,17 @@
 {
   "name": "netcatty",
   "description": "Netcatty is a modern SSH manager and terminal app with host grouping, SFTP, keychain, port forwarding, and a rich UI.",
+  "homepage": "https://github.com/binaricat/Netcatty",
   "private": true,
   "version": "0.0.0",
   "type": "module",
-  "author": "binaricat",
+  "author": "binaricat <support@netcatty.com>",
   "license": "GPL-3.0-or-later",
   "main": "electron/main.cjs",
   "scripts": {
     "dev": "npm run lint && concurrently -k \"vite\" \"npm:dev:electron\"",
     "dev:electron": "wait-on http-get://localhost:5173 && cross-env VITE_DEV_SERVER_URL=http://localhost:5173 node electron/launch.cjs",
+    "prebuild": "node scripts/copy-monaco.cjs",
     "build": "vite build",
     "preview": "vite preview",
     "start": "node electron/launch.cjs",
@@ -28,6 +30,7 @@
     "@fontsource/jetbrains-mono": "^5.2.8",
     "@fontsource/space-grotesk": "^5.2.10",
     "@google/genai": "1.33.0",
+    "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-collapsible": "1.1.12",
     "@radix-ui/react-context-menu": "2.2.16",
     "@radix-ui/react-dialog": "1.1.15",
@@ -44,6 +47,7 @@
     "@xterm/xterm": "^5.5.0",
     "clsx": "2.1.1",
     "lucide-react": "0.560.0",
+    "monaco-editor": "^0.55.1",
     "node-pty": "1.1.0-beta19",
     "react": "^19.2.1",
     "react-dom": "^19.2.1",

scripts/copy-monaco.cjs

@@ -0,0 +1,16 @@
+const fs = require('fs');
+const path = require('path');
+
+const repoRoot = path.resolve(__dirname, '..');
+const source = path.join(repoRoot, 'node_modules', 'monaco-editor', 'min', 'vs');
+const target = path.join(repoRoot, 'public', 'monaco', 'vs');
+
+if (!fs.existsSync(source)) {
+  console.error('[copy-monaco] Source not found:', source);
+  process.exit(1);
+}
+
+fs.rmSync(target, { recursive: true, force: true });
+fs.mkdirSync(path.dirname(target), { recursive: true });
+fs.cpSync(source, target, { recursive: true });
+console.log('[copy-monaco] Copied Monaco VS assets to', target);

vite.config.ts

@@ -3,6 +3,21 @@ import react from '@vitejs/plugin-react';
 import path from 'path';
 import { defineConfig } from 'vite';
 
+// Custom plugin to suppress monaco-editor source map warnings
+const suppressMonacoSourcemapWarning = () => ({
+  name: 'suppress-monaco-sourcemap-warning',
+  apply: 'serve' as const,
+  configResolved(config: { logger: { warn: (msg: string, options?: { timestamp?: boolean }) => void } }) {
+    const originalWarn = config.logger.warn;
+    config.logger.warn = (msg: string, options?: { timestamp?: boolean }) => {
+      // Suppress monaco-editor source map warnings
+      if (msg.includes('monaco-editor') && msg.includes('source map')) return;
+      if (msg.includes('loader.js.map')) return;
+      originalWarn(msg, options);
+    };
+  },
+});
+
 export default defineConfig(() => {
     return {
       base: "./",
@@ -16,10 +31,14 @@ export default defineConfig(() => {
           // while still enabling crossOriginIsolated.
           'Cross-Origin-Embedder-Policy': 'credentialless',
         },
+        hmr: {
+          overlay: true,
+        },
       },
       build: {
         chunkSizeWarningLimit: 3000,
         target: 'esnext', // Required for top-level await in WASM modules
+        sourcemap: false, // Disable source maps to avoid missing map file warnings
         // Optimize chunk splitting for faster initial load
         rollupOptions: {
           output: {
@@ -48,7 +67,7 @@ export default defineConfig(() => {
           },
         },
       },
-      plugins: [tailwindcss(), react()],
+      plugins: [suppressMonacoSourcemapWarning(), tailwindcss(), react()],
       resolve: {
         alias: {
           '@': path.resolve(__dirname, '.'),