fix: add missing props destructuring in HostTreeView causing white screen (#625) (#626)

getDropTargetClasses and setDragOverDropTarget were added to
HostTreeViewProps interface and used in JSX but never destructured
from the component's props parameter. TypeScript didn't catch it
because the interface defined them as optional, but at runtime the
bare variable references caused ReferenceError, crashing React and
producing a white screen on startup.

Closes #625

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

App.tsx

@@ -14,6 +14,7 @@ import { initializeFonts } from './application/state/fontStore';
 import { initializeUIFonts } from './application/state/uiFontStore';
 import { I18nProvider, useI18n } from './application/i18n/I18nProvider';
 import { matchesKeyBinding } from './domain/models';
+import { resolveGroupDefaults, applyGroupDefaults } from './domain/groupConfig';
 import { resolveHostAuth } from './domain/sshAuth';
 import { resolveHostTerminalThemeId } from './domain/terminalAppearance';
 import { collectSessionIds } from './domain/workspace';
@@ -35,6 +36,7 @@ import { KeyboardInteractiveModal, KeyboardInteractiveRequest } from './componen
 import { PassphraseModal, PassphraseRequest } from './components/PassphraseModal';
 import { cn } from './lib/utils';
 import { classifyLocalShellType } from './lib/localShell';
+import { useDiscoveredShells, resolveShellSetting } from './lib/useDiscoveredShells';
 import { ConnectionLog, Host, HostProtocol, SerialConfig, TerminalSession, TerminalTheme } from './types';
 import { LogView as LogViewType } from './application/state/useSessionState';
 import type { SftpView as SftpViewComponent } from './components/SftpView';
@@ -185,6 +187,7 @@ function App({ settings }: { settings: SettingsState }) {
     terminalFontSize,
     setTerminalFontSize,
     terminalSettings,
+    updateTerminalSetting,
     hotkeyScheme,
     keyBindings,
     isHotkeyRecording,
@@ -200,10 +203,11 @@ function App({ settings }: { settings: SettingsState }) {
     sessionLogsDir,
     sessionLogsFormat,
     reapplyCurrentTheme,
-    immersiveMode,
     workspaceFocusStyle,
   } = settings;
 
+  const discoveredShells = useDiscoveredShells();
+
   // Sync workspace focus indicator style to DOM for CSS targeting
   useEffect(() => {
     if (workspaceFocusStyle === 'border') {
@@ -239,8 +243,11 @@ function App({ settings }: { settings: SettingsState }) {
     deleteConnectionLog,
     clearUnsavedConnectionLogs,
     updateHostDistro,
+    updateHostLastConnected,
     convertKnownHostToHost,
     importDataFromString,
+    groupConfigs,
+    updateGroupConfigs,
   } = useVaultState();
 
   const {
@@ -305,6 +312,8 @@ function App({ settings }: { settings: SettingsState }) {
     () => new Map(sessions.map((session) => [session.id, session])),
     [sessions],
   );
+  const sessionByIdRef = useRef(sessionById);
+  sessionByIdRef.current = sessionById;
   const workspaceById = useMemo(
     () => new Map(workspaces.map((workspace) => [workspace.id, workspace])),
     [workspaces],
@@ -352,7 +361,6 @@ function App({ settings }: { settings: SettingsState }) {
   }, [activeTabId, currentTerminalTheme, hostById, sessionById, themeById, workspaceById]);
 
   useImmersiveMode({
-    isImmersive: immersiveMode,
     activeTabId,
     activeTerminalTheme,
     restoreOriginalTheme: reapplyCurrentTheme,
@@ -382,6 +390,7 @@ function App({ settings }: { settings: SettingsState }) {
     snippetPackages,
     portForwardingRules: portForwardingRulesForSync,
     knownHosts,
+    groupConfigs,
     settingsVersion: settings.settingsVersion,
     onApplyPayload: (payload) => {
       applySyncPayload(payload, {
@@ -426,7 +435,8 @@ function App({ settings }: { settings: SettingsState }) {
     }
 
     if (start) {
-      void startTunnel(rule, host, hosts, keys, identities, (status, error) => {
+      const effectiveHost = resolveEffectiveHost(host);
+      void startTunnel(rule, effectiveHost, hosts, keys, identities, (status, error) => {
         if (status === "error" && error) toast.error(error);
       }, rule.autoStart);
       return;
@@ -441,10 +451,12 @@ function App({ settings }: { settings: SettingsState }) {
       return;
     }
 
+    const effectiveHost = resolveEffectiveHost(host);
+
     const { username, hostname: localHost } = systemInfoRef.current;
-    if (host.protocol === 'serial') {
+    if (effectiveHost.protocol === 'serial') {
       const portName = host.hostname.split('/').pop() || host.hostname;
-      const sessionId = connectToHost(host);
+      const sessionId = connectToHost(effectiveHost);
       addConnectionLog({
         sessionId,
         hostId: host.id,
@@ -460,9 +472,9 @@ function App({ settings }: { settings: SettingsState }) {
       return;
     }
 
-    const protocol = host.moshEnabled ? 'mosh' : (host.protocol || 'ssh');
-    const resolvedAuth = resolveHostAuth({ host, keys, identities });
-    const sessionId = connectToHost(host);
+    const protocol = effectiveHost.moshEnabled ? 'mosh' : (effectiveHost.protocol || 'ssh');
+    const resolvedAuth = resolveHostAuth({ host: effectiveHost, keys, identities });
+    const sessionId = connectToHost(effectiveHost);
     addConnectionLog({
       sessionId,
       hostId: host.id,
@@ -479,6 +491,25 @@ function App({ settings }: { settings: SettingsState }) {
   const _handleGlobalHotkeyKeyDown = useEffectEvent((e: KeyboardEvent) => {
     const isMac = hotkeyScheme === 'mac';
     const target = e.target as HTMLElement;
+    const isCloseTabHotkey = closeTabKeyStr ? matchesKeyBinding(e, closeTabKeyStr, isMac) : false;
+    const dialogHotkeyScope = target.closest?.('[data-hotkey-close-tab="true"]');
+
+    if (isCloseTabHotkey && dialogHotkeyScope) {
+      return;
+    }
+
+    if (isCloseTabHotkey) {
+      const openDialogs = Array.from(document.querySelectorAll<HTMLElement>('[role="dialog"][data-state="open"]'));
+      const topmostOpenDialog = openDialogs[openDialogs.length - 1] ?? null;
+      const topmostDialogClose = topmostOpenDialog?.querySelector<HTMLElement>('[data-dialog-close="true"]');
+      if (topmostDialogClose) {
+        e.preventDefault();
+        e.stopPropagation();
+        topmostDialogClose.click();
+        return;
+      }
+    }
+
     const isFormElement = target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable;
     const isMonacoElement =
       target instanceof HTMLElement &&
@@ -611,6 +642,7 @@ function App({ settings }: { settings: SettingsState }) {
     hosts,
     keys,
     identities,
+    groupConfigs,
   });
 
   // Sync tray menu data + handle tray actions
@@ -802,22 +834,37 @@ function App({ settings }: { settings: SettingsState }) {
   addConnectionLogRef.current = addConnectionLog;
 
   const createLocalTerminalWithCurrentShell = useCallback(() => {
+    const resolved = resolveShellSetting(terminalSettings.localShell, discoveredShells);
+    const matchedShell = discoveredShells.find(s => s.id === terminalSettings.localShell);
     return createLocalTerminal({
-      shellType: classifyLocalShellType(terminalSettings.localShell, navigator.userAgent),
+      shellType: classifyLocalShellType(resolved?.command || terminalSettings.localShell, navigator.userAgent),
+      shell: resolved?.command,
+      shellArgs: resolved?.args,
+      shellName: matchedShell?.name,
+      shellIcon: matchedShell?.icon,
     });
-  }, [createLocalTerminal, terminalSettings.localShell]);
+  }, [createLocalTerminal, terminalSettings.localShell, discoveredShells]);
 
   const splitSessionWithCurrentShell = useCallback((sessionId: string, direction: 'horizontal' | 'vertical') => {
+    const resolved = resolveShellSetting(terminalSettings.localShell, discoveredShells);
     return splitSession(sessionId, direction, {
-      localShellType: classifyLocalShellType(terminalSettings.localShell, navigator.userAgent),
+      localShellType: classifyLocalShellType(resolved?.command || terminalSettings.localShell, navigator.userAgent),
     });
-  }, [splitSession, terminalSettings.localShell]);
+  }, [splitSession, terminalSettings.localShell, discoveredShells]);
 
   const copySessionWithCurrentShell = useCallback((sessionId: string) => {
+    const resolved = resolveShellSetting(terminalSettings.localShell, discoveredShells);
     return copySession(sessionId, {
-      localShellType: classifyLocalShellType(terminalSettings.localShell, navigator.userAgent),
+      localShellType: classifyLocalShellType(resolved?.command || terminalSettings.localShell, navigator.userAgent),
     });
-  }, [copySession, terminalSettings.localShell]);
+  }, [copySession, terminalSettings.localShell, discoveredShells]);
+
+  const closeTabKeyStr = useMemo(() => {
+    if (hotkeyScheme === 'disabled') return null;
+    const closeTabBinding = keyBindings.find((binding) => binding.action === 'closeTab');
+    if (!closeTabBinding) return null;
+    return hotkeyScheme === 'mac' ? closeTabBinding.mac : closeTabBinding.pc;
+  }, [hotkeyScheme, keyBindings]);
 
   // Shared hotkey action handler - used by both global handler and terminal callback
   const executeHotkeyAction = useCallback((action: string, e: KeyboardEvent) => {
@@ -922,32 +969,32 @@ function App({ settings }: { settings: SettingsState }) {
         break;
       }
       case 'splitHorizontal': {
-        // Split current terminal horizontally (top/bottom)
         const currentId = activeTabStore.getActiveTabId();
-        // Check if it's a standalone session or we're in a workspace
         const activeSession = sessions.find(s => s.id === currentId);
         const activeWs = workspaces.find(w => w.id === currentId);
         if (activeSession && !activeSession.workspaceId) {
-          // Standalone session - split it
           splitSessionWithCurrentShell(activeSession.id, 'horizontal');
         } else if (activeWs) {
-          // In a workspace - need to determine focused session
-          // For now, we'll need the terminal to handle this via context menu
-          if (IS_DEV) console.log('[Hotkey] Split horizontal in workspace - use context menu on specific terminal');
+          const liveIds = collectSessionIds(activeWs.root);
+          const targetId = (activeWs.focusedSessionId && liveIds.includes(activeWs.focusedSessionId))
+            ? activeWs.focusedSessionId
+            : liveIds[0];
+          if (targetId) splitSessionWithCurrentShell(targetId, 'horizontal');
         }
         break;
       }
       case 'splitVertical': {
-        // Split current terminal vertically (left/right)
         const currentId = activeTabStore.getActiveTabId();
         const activeSession = sessions.find(s => s.id === currentId);
         const activeWs = workspaces.find(w => w.id === currentId);
         if (activeSession && !activeSession.workspaceId) {
-          // Standalone session - split it
           splitSessionWithCurrentShell(activeSession.id, 'vertical');
         } else if (activeWs) {
-          // In a workspace - need to determine focused session
-          if (IS_DEV) console.log('[Hotkey] Split vertical in workspace - use context menu on specific terminal');
+          const liveIds = collectSessionIds(activeWs.root);
+          const targetId = (activeWs.focusedSessionId && liveIds.includes(activeWs.focusedSessionId))
+            ? activeWs.focusedSessionId
+            : liveIds[0];
+          if (targetId) splitSessionWithCurrentShell(targetId, 'vertical');
         }
         break;
       }
@@ -1032,6 +1079,9 @@ function App({ settings }: { settings: SettingsState }) {
   }, [hosts, updateHosts, t]);
 
   // System info for connection logs
+  const hostsRef = useRef(hosts);
+  hostsRef.current = hosts;
+
   const systemInfoRef = useRef<{ username: string; hostname: string }>({
     username: 'user',
     hostname: 'localhost',
@@ -1053,13 +1103,24 @@ function App({ settings }: { settings: SettingsState }) {
   }, []);
 
   // Wrapper to create local terminal with logging
-  const handleCreateLocalTerminal = useCallback(() => {
+  const handleCreateLocalTerminal = useCallback((shell?: { command: string; args?: string[]; name?: string; icon?: string }) => {
     const { username, hostname } = systemInfoRef.current;
-    const sessionId = createLocalTerminalWithCurrentShell();
+    const resolved = shell ?? resolveShellSetting(terminalSettings.localShell, discoveredShells);
+    // Match by ID (not command) to avoid WSL distros all sharing wsl.exe
+    const matchedShell = !shell ? discoveredShells.find(s => s.id === terminalSettings.localShell) : undefined;
+    const shellName = shell?.name ?? matchedShell?.name;
+    const shellIcon = shell?.icon ?? matchedShell?.icon;
+    const sessionId = createLocalTerminal({
+      shellType: classifyLocalShellType(resolved?.command || terminalSettings.localShell, navigator.userAgent),
+      shell: resolved?.command,
+      shellArgs: resolved?.args,
+      shellName,
+      shellIcon,
+    });
     addConnectionLog({
       sessionId,
       hostId: '',
-      hostLabel: 'Local Terminal',
+      hostLabel: shellName || 'Local Terminal',
       hostname: 'localhost',
       username: username,
       protocol: 'local',
@@ -1068,16 +1129,24 @@ function App({ settings }: { settings: SettingsState }) {
       localHostname: hostname,
       saved: false,
     });
-  }, [addConnectionLog, createLocalTerminalWithCurrentShell]);
+  }, [addConnectionLog, createLocalTerminal, terminalSettings.localShell, discoveredShells]);
+
+  const resolveEffectiveHost = useCallback((host: Host): Host => {
+    if (!host.group) return host;
+    const groupDefaults = resolveGroupDefaults(host.group, groupConfigs);
+    return applyGroupDefaults(host, groupDefaults);
+  }, [groupConfigs]);
 
   // Wrapper to connect to host with logging
   const handleConnectToHost = useCallback((host: Host) => {
     const { username, hostname: localHost } = systemInfoRef.current;
 
+    const effectiveHost = resolveEffectiveHost(host);
+
     // Handle serial hosts separately
-    if (host.protocol === 'serial') {
+    if (effectiveHost.protocol === 'serial') {
       const portName = host.hostname.split('/').pop() || host.hostname;
-      const sessionId = connectToHost(host);
+      const sessionId = connectToHost(effectiveHost);
       addConnectionLog({
         sessionId,
         hostId: host.id,
@@ -1093,9 +1162,9 @@ function App({ settings }: { settings: SettingsState }) {
       return;
     }
 
-    const protocol = host.moshEnabled ? 'mosh' : (host.protocol || 'ssh');
-    const resolvedAuth = resolveHostAuth({ host, keys, identities });
-    const sessionId = connectToHost(host);
+    const protocol = effectiveHost.moshEnabled ? 'mosh' : (effectiveHost.protocol || 'ssh');
+    const resolvedAuth = resolveHostAuth({ host: effectiveHost, keys, identities });
+    const sessionId = connectToHost(effectiveHost);
     addConnectionLog({
       sessionId,
       hostId: host.id,
@@ -1108,7 +1177,18 @@ function App({ settings }: { settings: SettingsState }) {
       localHostname: localHost,
       saved: false,
     });
-  }, [addConnectionLog, connectToHost, identities, keys]);
+  }, [addConnectionLog, connectToHost, resolveEffectiveHost, identities, keys]);
+
+  // Wrap updateSessionStatus to track lastConnectedAt on successful connection
+  const handleSessionStatusChange = useCallback((sessionId: string, status: TerminalSession['status']) => {
+    updateSessionStatus(sessionId, status);
+    if (status === 'connected') {
+      const session = sessionByIdRef.current.get(sessionId);
+      if (session?.hostId) {
+        updateHostLastConnected(session.hostId);
+      }
+    }
+  }, [updateSessionStatus, updateHostLastConnected]);
 
   // Wrapper to create serial session with logging
   const handleConnectSerial = useCallback((config: SerialConfig, options?: { charset?: string }) => {
@@ -1162,24 +1242,25 @@ function App({ settings }: { settings: SettingsState }) {
     }
   }, [sessions, connectionLogs, updateConnectionLog]);
 
-  // Check if host has multiple protocols enabled
+  // Check if host has multiple protocols enabled (using effective/resolved host)
   const hasMultipleProtocols = useCallback((host: Host) => {
+    const effective = resolveEffectiveHost(host);
     let count = 0;
     // SSH is always available as base protocol (unless explicitly set to something else)
-    if (host.protocol === 'ssh' || !host.protocol) count++;
+    if (effective.protocol === 'ssh' || !effective.protocol) count++;
     // Mosh adds another option
-    if (host.moshEnabled) count++;
+    if (effective.moshEnabled) count++;
     // Telnet adds another option
-    if (host.telnetEnabled) count++;
+    if (effective.telnetEnabled) count++;
     // If protocol is explicitly telnet (not ssh), count it
-    if (host.protocol === 'telnet' && !host.telnetEnabled) count++;
+    if (effective.protocol === 'telnet' && !effective.telnetEnabled) count++;
     return count > 1;
-  }, []);
+  }, [resolveEffectiveHost]);
 
   // Handle host connect with protocol selection (used by QuickSwitcher)
   const handleHostConnectWithProtocolCheck = useCallback((host: Host) => {
     if (hasMultipleProtocols(host)) {
-      setProtocolSelectHost(host);
+      setProtocolSelectHost(resolveEffectiveHost(host));
       setIsQuickSwitcherOpen(false);
       setQuickSearch('');
     } else {
@@ -1187,7 +1268,7 @@ function App({ settings }: { settings: SettingsState }) {
       setIsQuickSwitcherOpen(false);
       setQuickSearch('');
     }
-  }, [hasMultipleProtocols, handleConnectToHost]);
+  }, [hasMultipleProtocols, handleConnectToHost, resolveEffectiveHost]);
 
   // Handle protocol selection from dialog
   const handleProtocolSelect = useCallback((protocol: HostProtocol, port: number) => {
@@ -1278,7 +1359,7 @@ function App({ settings }: { settings: SettingsState }) {
   }, []);
 
   return (
-    <div className={cn("flex flex-col h-screen text-foreground font-sans netcatty-shell", immersiveMode && activeTerminalTheme && "immersive-transition")} onContextMenu={handleRootContextMenu}>
+    <div className={cn("flex flex-col h-screen text-foreground font-sans netcatty-shell", activeTerminalTheme && "immersive-transition")} onContextMenu={handleRootContextMenu}>
       <TopTabs
         theme={resolvedTheme}
         hosts={hosts}
@@ -1299,7 +1380,7 @@ function App({ settings }: { settings: SettingsState }) {
         onToggleTheme={handleToggleTheme}
         onOpenSettings={handleOpenSettings}
         onSyncNow={handleSyncNowManual}
-        isImmersiveActive={immersiveMode && activeTerminalTheme !== null}
+        isImmersiveActive={activeTerminalTheme !== null}
         onStartSessionDrag={setDraggingSessionId}
         onEndSessionDrag={handleEndSessionDrag}
         onReorderTabs={reorderTabs}
@@ -1329,6 +1410,8 @@ function App({ settings }: { settings: SettingsState }) {
             onConnectSerial={handleConnectSerial}
             onDeleteHost={handleDeleteHost}
             onConnect={handleConnectToHost}
+            groupConfigs={groupConfigs}
+            onUpdateGroupConfigs={updateGroupConfigs}
             onUpdateHosts={updateHosts}
             onUpdateKeys={updateKeys}
             onUpdateIdentities={updateIdentities}
@@ -1355,6 +1438,7 @@ function App({ settings }: { settings: SettingsState }) {
           hosts={hosts}
           keys={keys}
           identities={identities}
+          groupConfigs={groupConfigs}
           updateHosts={updateHosts}
           sftpDefaultViewMode={sftpDefaultViewMode}
           sftpDoubleClickBehavior={sftpDoubleClickBehavior}
@@ -1369,6 +1453,7 @@ function App({ settings }: { settings: SettingsState }) {
 
         <TerminalLayerMount
           hosts={hosts}
+          groupConfigs={groupConfigs}
           keys={keys}
           identities={identities}
           snippets={snippets}
@@ -1387,8 +1472,9 @@ function App({ settings }: { settings: SettingsState }) {
           onUpdateTerminalThemeId={setTerminalThemeId}
           onUpdateTerminalFontFamilyId={setTerminalFontFamilyId}
           onUpdateTerminalFontSize={setTerminalFontSize}
+          onUpdateTerminalFontWeight={(w) => updateTerminalSetting('fontWeight', w)}
           onCloseSession={closeSession}
-          onUpdateSessionStatus={updateSessionStatus}
+          onUpdateSessionStatus={handleSessionStatusChange}
           onUpdateHostDistro={updateHostDistro}
           onUpdateHost={(host) => updateHosts(hosts.map(h => h.id === host.id ? host : h))}
           onAddKnownHost={(kh) => updateKnownHosts([...knownHosts, kh])}
@@ -1451,8 +1537,8 @@ function App({ settings }: { settings: SettingsState }) {
               setIsQuickSwitcherOpen(false);
               setQuickSearch('');
             }}
-            onCreateLocalTerminal={() => {
-              handleCreateLocalTerminal();
+            onCreateLocalTerminal={(shell) => {
+              handleCreateLocalTerminal(shell);
               setIsQuickSwitcherOpen(false);
               setQuickSearch('');
             }}

application/i18n/locales/en.ts

@@ -21,6 +21,7 @@ const en: Messages = {
   'common.clear': 'Clear',
   'common.optional': 'Optional',
   'common.selectPlaceholder': 'Select...',
+  'common.add': 'Add',
   'common.rename': 'Rename',
   'common.refresh': 'Refresh',
   'common.continue': 'Continue',
@@ -196,6 +197,9 @@ const en: Messages = {
   'settings.application.github.subtitle': 'Source code',
   'settings.application.whatsNew': "What's new",
   'settings.application.whatsNew.subtitle': 'Show release notes',
+  'settings.vault.title': 'Vault',
+  'settings.vault.showRecentHosts': 'Show recently connected hosts',
+  'settings.vault.showRecentHostsDesc': 'Display a section of recently connected hosts at the top of the vault',
 
   // Update notifications
   'update.available.title': 'Update Available',
@@ -231,9 +235,6 @@ const en: Messages = {
   'settings.appearance.themeColor.desc': 'Pick a preset palette for each theme',
   'settings.appearance.themeColor.light': 'Light palette',
   'settings.appearance.themeColor.dark': 'Dark palette',
-  'settings.appearance.immersiveMode': 'Immersive Mode',
-  'settings.appearance.immersiveMode.desc':
-    'When enabled, the UI chrome (tab bar, sidebar, status bar) adapts its colors to match the active terminal theme for a visually cohesive experience.',
   'settings.appearance.customCss': 'Custom CSS',
   'settings.appearance.customCss.desc':
     'Add custom CSS to personalize the app appearance. Changes apply immediately.',
@@ -327,6 +328,14 @@ const en: Messages = {
   'settings.terminal.scrollback.rows': 'Number of rows *',
   'settings.terminal.keywordHighlight.title': 'Keyword highlighting',
   'settings.terminal.keywordHighlight.resetColors': 'Reset to default colors',
+  'settings.terminal.keywordHighlight.addCustom': 'Add Custom Rule',
+  'settings.terminal.keywordHighlight.editCustom': 'Edit Rule',
+  'settings.terminal.keywordHighlight.labelField': 'Label & Color',
+  'settings.terminal.keywordHighlight.labelPlaceholder': 'Label (e.g., Down)',
+  'settings.terminal.keywordHighlight.patternField': 'Regex Pattern',
+  'settings.terminal.keywordHighlight.patternPlaceholder': 'Regex (e.g., \\bdown\\b)',
+  'settings.terminal.keywordHighlight.invalidPattern': 'Invalid regex pattern',
+  'settings.terminal.keywordHighlight.preview': 'Preview',
   'settings.terminal.section.localShell': 'Local Shell',
   'settings.terminal.localShell.shell': 'Shell executable',
   'settings.terminal.localShell.shell.desc': 'Path to the shell executable (e.g., /bin/zsh, pwsh.exe). Leave empty for system default.',
@@ -334,6 +343,11 @@ const en: Messages = {
   'settings.terminal.localShell.shell.detected': 'Detected',
   'settings.terminal.localShell.shell.notFound': 'Shell executable not found',
   'settings.terminal.localShell.shell.isDirectory': 'Path is a directory, not an executable',
+  'settings.terminal.localShell.shell.default': 'System Default',
+  'settings.terminal.localShell.shell.custom': 'Custom...',
+  'settings.terminal.localShell.shell.customPath': 'Shell executable path',
+  'settings.terminal.localShell.shell.commonPaths': 'Common paths',
+  'settings.terminal.localShell.shell.pathValid': 'Path valid',
   'settings.terminal.localShell.startDir': 'Starting directory',
   'settings.terminal.localShell.startDir.desc': 'Directory to start in when opening a local terminal. Leave empty for home directory.',
   'settings.terminal.localShell.startDir.placeholder': 'Home directory',
@@ -352,7 +366,7 @@ const en: Messages = {
   // Settings > Terminal > Rendering
   'settings.terminal.section.rendering': 'Rendering',
   'settings.terminal.rendering.renderer': 'Renderer',
-  'settings.terminal.rendering.renderer.desc': 'Choose the terminal rendering technology. Auto will use Canvas on low-memory devices. Changes take effect on new terminal sessions.',
+  'settings.terminal.rendering.renderer.desc': 'Choose the terminal rendering technology. Auto will use DOM on low-memory devices. Changes take effect on new terminal sessions.',
   'settings.terminal.rendering.auto': 'Auto',
 
   // Settings > Terminal > Workspace Focus Indicator
@@ -461,8 +475,24 @@ const en: Messages = {
   'vault.groups.placeholder.example': 'e.g. Production',
   'vault.groups.parentLabel': 'Parent',
   'vault.groups.pathLabel': 'Path',
+  'vault.groups.settings': 'Group Settings',
+  'vault.groups.details': 'Group Details',
+  'vault.groups.details.general': 'General',
+  'vault.groups.details.ssh': 'SSH',
+  'vault.groups.details.telnet': 'Telnet',
+  'vault.groups.details.advanced': 'Advanced',
+  'vault.groups.details.appearance': 'Appearance',
+  'vault.groups.details.mosh': 'Mosh',
+  'vault.groups.details.parentGroup': 'Parent Group',
+  'vault.groups.details.none': 'None',
+  'vault.groups.details.inherited': 'Inherited from group',
+  'vault.groups.details.addProtocol': 'Add Protocol',
+  'vault.groups.details.removeProtocol': 'Remove Protocol',
+  'vault.groups.details.fontFamily': 'Font Family',
+  'vault.groups.details.fontSize': 'Font Size',
   'vault.groups.errors.required': 'Group name is required.',
   'vault.groups.errors.invalidChars': "Group name cannot include '/' or '\\\\'.",
+  'vault.groups.errors.duplicatePath': 'A group with this name already exists at this location.',
 
   'vault.managedSource.unmanage': 'Unmanage',
   'vault.managedSource.unmanageSuccess': 'Successfully unmanaged group',
@@ -486,6 +516,10 @@ const en: Messages = {
   'vault.hosts.export.toast.successWithSkipped': 'Exported {count} hosts to CSV ({skipped} unsupported hosts skipped)',
   'vault.hosts.export.toast.noHosts': 'No hosts to export',
   'vault.hosts.allHosts': 'All hosts',
+  'vault.hosts.pinned': 'Pinned',
+  'vault.hosts.recentlyConnected': 'Recently Connected',
+  'vault.hosts.pinToTop': 'Pin to Top',
+  'vault.hosts.unpin': 'Unpin',
   'vault.hosts.copyCredentials': 'Copy Credentials',
   'vault.hosts.copyCredentials.toast.success': 'Credentials copied to clipboard',
   'vault.hosts.copyCredentials.toast.noPassword': 'No password saved for this host',
@@ -495,6 +529,7 @@ const en: Messages = {
   'vault.hosts.deselectAll': 'Deselect All',
   'vault.hosts.deleteSelected': 'Delete ({count})',
   'vault.hosts.deleteMultiple.success': 'Deleted {count} hosts',
+  'vault.hosts.moveToGroup.success': 'Moved {host} to {group}',
   'vault.hosts.empty.title': 'Set up your hosts',
   'vault.hosts.empty.desc': 'Save hosts to quickly connect to your servers, VMs, and containers.',
 
@@ -882,6 +917,8 @@ const en: Messages = {
   'qs.search.placeholder': 'Search hosts or tabs',
   'qs.jumpTo': 'Jump To',
   'qs.localTerminal': 'Local Terminal',
+  'qs.localShells': 'Local Shells',
+  'qs.default': 'Default',
 
   // Select Host panel
   'selectHost.title': 'Select Host',
@@ -979,6 +1016,8 @@ const en: Messages = {
   'hostDetails.legacyAlgorithms': 'Allow Legacy Algorithms',
   'hostDetails.legacyAlgorithms.desc': 'Enable deprecated SSH algorithms (diffie-hellman-group1, ssh-dss, 3des-cbc, etc.) for connecting to older network equipment.',
   'hostDetails.legacyAlgorithms.warning': 'These algorithms have known security weaknesses. Only enable for legacy devices that do not support modern cryptography.',
+  'hostDetails.backspaceBehavior': 'Backspace Behavior',
+  'hostDetails.backspaceBehavior.default': 'Default',
   'hostDetails.jumpHosts': 'Proxy via Hosts',
   'hostDetails.jumpHosts.hops': '{count} hop(s)',
   'hostDetails.jumpHosts.direct': 'Direct',
@@ -1186,6 +1225,7 @@ const en: Messages = {
   'terminal.themeModal.globalTheme': 'Global Theme',
   'terminal.themeModal.globalFont': 'Global Font',
   'terminal.themeModal.fontSize': 'Font Size',
+  'terminal.themeModal.fontWeight': 'Font Weight',
   'terminal.themeModal.livePreview': 'Live Preview',
   'terminal.themeModal.themeType': '{type} theme',
 

application/i18n/locales/zh-CN.ts

@@ -13,6 +13,7 @@ const zhCN: Messages = {
   'common.connect': '连接',
   'common.terminal': '终端',
   'common.create': '创建',
+  'common.add': '添加',
   'common.rename': '重命名',
   'common.refresh': '刷新',
   'common.continue': '继续',
@@ -180,6 +181,9 @@ const zhCN: Messages = {
   'settings.application.github.subtitle': '源代码',
   'settings.application.whatsNew': '更新内容',
   'settings.application.whatsNew.subtitle': '查看发布说明',
+  'settings.vault.title': '主机库',
+  'settings.vault.showRecentHosts': '显示最近连接的主机',
+  'settings.vault.showRecentHostsDesc': '在主机列表顶部显示最近连接过的主机',
 
   // Update notifications
   'update.available.title': '发现新版本',
@@ -215,9 +219,6 @@ const zhCN: Messages = {
   'settings.appearance.themeColor.desc': '为浅色与深色主题选择预设配色',
   'settings.appearance.themeColor.light': '浅色主题',
   'settings.appearance.themeColor.dark': '深色主题',
-  'settings.appearance.immersiveMode': '沉浸模式',
-  'settings.appearance.immersiveMode.desc':
-    '启用后，UI 外观（标签栏、侧边栏、状态栏）会自动适配当前终端主题的配色，营造视觉一体化的沉浸体验。',
   'settings.appearance.customCss': '自定义 CSS',
   'settings.appearance.customCss.desc': '使用自定义 CSS 个性化界面，修改会立即生效。',
   'settings.appearance.customCss.placeholder':
@@ -294,8 +295,24 @@ const zhCN: Messages = {
   'vault.groups.placeholder.example': '例如：Production',
   'vault.groups.parentLabel': '父级',
   'vault.groups.pathLabel': '路径',
+  'vault.groups.settings': '分组设置',
+  'vault.groups.details': '分组详情',
+  'vault.groups.details.general': '常规',
+  'vault.groups.details.ssh': 'SSH',
+  'vault.groups.details.telnet': 'Telnet',
+  'vault.groups.details.advanced': '高级',
+  'vault.groups.details.appearance': '外观',
+  'vault.groups.details.mosh': 'Mosh',
+  'vault.groups.details.parentGroup': '父分组',
+  'vault.groups.details.none': '无',
+  'vault.groups.details.inherited': '继承自分组',
+  'vault.groups.details.addProtocol': '添加协议',
+  'vault.groups.details.removeProtocol': '移除协议',
+  'vault.groups.details.fontFamily': '字体',
+  'vault.groups.details.fontSize': '字号',
   'vault.groups.errors.required': '分组名称不能为空。',
   'vault.groups.errors.invalidChars': "分组名称不能包含 '/' 或 '\\\\'.",
+  'vault.groups.errors.duplicatePath': '该位置已存在同名分组。',
 
   'vault.managedSource.unmanage': '取消托管',
   'vault.managedSource.unmanageSuccess': '已取消托管分组',
@@ -319,6 +336,10 @@ const zhCN: Messages = {
   'vault.hosts.export.toast.successWithSkipped': '已导出 {count} 个主机到 CSV（跳过 {skipped} 个不支持的主机）',
   'vault.hosts.export.toast.noHosts': '没有主机可导出',
   'vault.hosts.allHosts': '全部主机',
+  'vault.hosts.pinned': '已置顶',
+  'vault.hosts.recentlyConnected': '最近连接',
+  'vault.hosts.pinToTop': '置顶',
+  'vault.hosts.unpin': '取消置顶',
   'vault.hosts.copyCredentials': '复制账密信息',
   'vault.hosts.copyCredentials.toast.success': '账密信息已复制到剪贴板',
   'vault.hosts.copyCredentials.toast.noPassword': '该主机未保存密码',
@@ -328,6 +349,7 @@ const zhCN: Messages = {
   'vault.hosts.deselectAll': '取消全选',
   'vault.hosts.deleteSelected': '删除 ({count})',
   'vault.hosts.deleteMultiple.success': '已删除 {count} 个主机',
+  'vault.hosts.moveToGroup.success': '已将 {host} 移动到 {group}',
   'vault.hosts.empty.title': '设置你的主机',
   'vault.hosts.empty.desc': '保存主机以快速连接到你的服务器、虚拟机和容器。',
 
@@ -542,6 +564,8 @@ const zhCN: Messages = {
   'qs.search.placeholder': '搜索主机或标签页',
   'qs.jumpTo': '跳转到',
   'qs.localTerminal': '本地终端',
+  'qs.localShells': '本地 Shell',
+  'qs.default': '默认',
 
   // Select Host panel
   'selectHost.title': '选择主机',
@@ -635,6 +659,8 @@ const zhCN: Messages = {
   'hostDetails.legacyAlgorithms': '允许旧版算法',
   'hostDetails.legacyAlgorithms.desc': '启用已弃用的 SSH 算法（diffie-hellman-group1、ssh-dss、3des-cbc 等）以连接老旧网络设备。',
   'hostDetails.legacyAlgorithms.warning': '这些算法存在已知安全漏洞，仅建议在老旧设备不支持现代加密时启用。',
+  'hostDetails.backspaceBehavior': 'Backspace 行为',
+  'hostDetails.backspaceBehavior.default': '默认',
   'hostDetails.jumpHosts': '通过主机代理',
   'hostDetails.jumpHosts.hops': '{count} 跳',
   'hostDetails.jumpHosts.direct': '直连',
@@ -814,6 +840,7 @@ const zhCN: Messages = {
   'terminal.themeModal.globalTheme': '全局主题',
   'terminal.themeModal.globalFont': '全局字体',
   'terminal.themeModal.fontSize': '字体大小',
+  'terminal.themeModal.fontWeight': '字体粗细',
   'terminal.themeModal.livePreview': '实时预览',
   'terminal.themeModal.themeType': '{type} 主题',
 
@@ -1283,6 +1310,14 @@ const zhCN: Messages = {
   'settings.terminal.scrollback.rows': '行数 *',
   'settings.terminal.keywordHighlight.title': '关键字高亮',
   'settings.terminal.keywordHighlight.resetColors': '重置为默认颜色',
+  'settings.terminal.keywordHighlight.addCustom': '添加自定义规则',
+  'settings.terminal.keywordHighlight.editCustom': '编辑规则',
+  'settings.terminal.keywordHighlight.labelField': '标签与颜色',
+  'settings.terminal.keywordHighlight.labelPlaceholder': '标签（如 Down）',
+  'settings.terminal.keywordHighlight.patternField': '正则表达式',
+  'settings.terminal.keywordHighlight.patternPlaceholder': '正则表达式（如 \\bdown\\b）',
+  'settings.terminal.keywordHighlight.invalidPattern': '无效的正则表达式',
+  'settings.terminal.keywordHighlight.preview': '预览',
   'settings.terminal.section.localShell': '本地 Shell',
   'settings.terminal.localShell.shell': 'Shell 可执行文件',
   'settings.terminal.localShell.shell.desc': 'Shell 可执行文件的路径（例如 /bin/zsh、pwsh.exe）。留空使用系统默认。',
@@ -1290,6 +1325,11 @@ const zhCN: Messages = {
   'settings.terminal.localShell.shell.detected': '检测到',
   'settings.terminal.localShell.shell.notFound': '未找到 Shell 可执行文件',
   'settings.terminal.localShell.shell.isDirectory': '路径是目录，不是可执行文件',
+  'settings.terminal.localShell.shell.default': '系统默认',
+  'settings.terminal.localShell.shell.custom': '自定义...',
+  'settings.terminal.localShell.shell.customPath': 'Shell 可执行文件路径',
+  'settings.terminal.localShell.shell.commonPaths': '常用路径',
+  'settings.terminal.localShell.shell.pathValid': '路径有效',
   'settings.terminal.localShell.startDir': '起始目录',
   'settings.terminal.localShell.startDir.desc': '打开本地终端时的起始目录。留空使用用户主目录。',
   'settings.terminal.localShell.startDir.placeholder': '用户主目录',
@@ -1308,7 +1348,7 @@ const zhCN: Messages = {
   // Settings > Terminal > Rendering
   'settings.terminal.section.rendering': '渲染',
   'settings.terminal.rendering.renderer': '渲染器',
-  'settings.terminal.rendering.renderer.desc': '选择终端渲染技术。自动模式会在低内存设备上使用 Canvas。更改将在新终端会话中生效。',
+  'settings.terminal.rendering.renderer.desc': '选择终端渲染技术。自动模式会在低内存设备上使用 DOM 渲染。更改将在新终端会话中生效。',
   'settings.terminal.rendering.auto': '自动',
 
   // Settings > Terminal > Autocomplete

application/state/fontStore.ts

@@ -68,8 +68,14 @@ class FontStore {
       // Add default fonts first
       TERMINAL_FONTS.forEach(font => fontMap.set(font.id, font));
 
-      // Add local fonts with a distinct ID namespace to avoid collisions
+      // Build a set of built-in font family names for dedup (case-insensitive)
+      const builtinFamilyNames = new Set(
+        TERMINAL_FONTS.map(f => f.name.toLowerCase())
+      );
+
+      // Add local fonts, skipping those already covered by built-in fonts
       localFonts.forEach(font => {
+        if (builtinFamilyNames.has(font.name.toLowerCase())) return;
         const localId = font.id.startsWith('local-') ? font.id : `local-${font.id}`;
         fontMap.set(localId, { ...font, id: localId });
       });

application/state/useAutoSync.ts

@@ -32,6 +32,7 @@ interface AutoSyncConfig {
   snippetPackages?: SyncPayload['snippetPackages'];
   portForwardingRules?: SyncPayload['portForwardingRules'];
   knownHosts?: SyncPayload['knownHosts'];
+  groupConfigs?: SyncPayload['groupConfigs'];
   /** Opaque token that changes whenever a synced setting changes. */
   settingsVersion?: number;
 
@@ -95,6 +96,7 @@ export const useAutoSync = (config: AutoSyncConfig) => {
       snippetPackages: config.snippetPackages,
       portForwardingRules: effectivePFRules,
       knownHosts: effectiveKnownHosts,
+      groupConfigs: config.groupConfigs,
     };
   }, [
     config.hosts,
@@ -105,6 +107,7 @@ export const useAutoSync = (config: AutoSyncConfig) => {
     config.snippetPackages,
     config.portForwardingRules,
     config.knownHosts,
+    config.groupConfigs,
   ]);
 
   // Build sync payload

application/state/useImmersiveMode.ts

@@ -144,6 +144,7 @@ function applyImmersiveStyle(css: string, isDark: boolean, bg: string) {
 
 function removeImmersiveStyle() {
   document.getElementById(STYLE_ID)?.remove();
+  delete document.documentElement.dataset.immersiveTheme;
 }
 
 // ---------------------------------------------------------------------------
@@ -151,12 +152,10 @@ function removeImmersiveStyle() {
 // ---------------------------------------------------------------------------
 
 export function useImmersiveMode({
-  isImmersive,
   activeTabId,
   activeTerminalTheme,
   restoreOriginalTheme,
 }: {
-  isImmersive: boolean;
   activeTabId: string;
   activeTerminalTheme: TerminalTheme | null;
   restoreOriginalTheme: () => void;
@@ -170,18 +169,19 @@ export function useImmersiveMode({
 
   // APPLY: useLayoutEffect — runs before paint, O(1) Map lookup, single DOM write
   useLayoutEffect(() => {
-    if (isImmersive && isTerminalTab && activeTerminalTheme) {
+    if (isTerminalTab && activeTerminalTheme) {
       const fp = themeFingerprint(activeTerminalTheme);
       if (appliedFpRef.current === fp) return;
       overrideActiveRef.current = true;
       appliedFpRef.current = fp;
       applyImmersiveStyle(getImmersiveCss(activeTerminalTheme), activeTerminalTheme.type === 'dark', activeTerminalTheme.colors.background);
+      document.documentElement.dataset.immersiveTheme = fp;
     }
-  }, [isImmersive, isTerminalTab, activeTerminalTheme]);
+  }, [isTerminalTab, activeTerminalTheme]);
 
   // RESTORE: useEffect — runs after paint, with fade overlay
   useEffect(() => {
-    if (isImmersive && isTerminalTab && activeTerminalTheme) return;
+    if (isTerminalTab && activeTerminalTheme) return;
     if (!overrideActiveRef.current) return;
     overrideActiveRef.current = false;
     appliedFpRef.current = null;
@@ -198,7 +198,7 @@ export function useImmersiveMode({
     });
     const fallback = setTimeout(() => { if (overlay.parentNode) overlay.remove(); }, 400);
     return () => { clearTimeout(fallback); if (overlay.parentNode) overlay.remove(); };
-  }, [isImmersive, isTerminalTab, activeTerminalTheme, restoreOriginalTheme]);
+  }, [isTerminalTab, activeTerminalTheme, restoreOriginalTheme]);
 
   // Cleanup on unmount
   useEffect(() => {

application/state/usePortForwardingAutoStart.ts

@@ -4,7 +4,8 @@
  * when the application starts, not when the user navigates to the port forwarding page.
  */
 import { useCallback, useEffect, useRef } from "react";
-import { Host, Identity, PortForwardingRule, SSHKey } from "../../domain/models";
+import { GroupConfig, Host, Identity, PortForwardingRule, SSHKey } from "../../domain/models";
+import { resolveGroupDefaults, applyGroupDefaults } from "../../domain/groupConfig";
 import { STORAGE_KEY_PORT_FORWARDING } from "../../infrastructure/config/storageKeys";
 import { localStorageAdapter } from "../../infrastructure/persistence/localStorageAdapter";
 import {
@@ -19,6 +20,7 @@ export interface UsePortForwardingAutoStartOptions {
   hosts: Host[];
   keys: SSHKey[];
   identities: Identity[];
+  groupConfigs: GroupConfig[];
 }
 
 /**
@@ -29,11 +31,13 @@ export const usePortForwardingAutoStart = ({
   hosts,
   keys,
   identities,
+  groupConfigs,
 }: UsePortForwardingAutoStartOptions): void => {
   const autoStartExecutedRef = useRef(false);
   const hostsRef = useRef<Host[]>(hosts);
   const keysRef = useRef<SSHKey[]>(keys);
   const identitiesRef = useRef<Identity[]>(identities);
+  const groupConfigsRef = useRef<GroupConfig[]>(groupConfigs);
 
   const isHostAuthReady = useCallback((host: Host, seen = new Set<string>()): boolean => {
     if (!host || seen.has(host.id)) return true;
@@ -73,6 +77,16 @@ export const usePortForwardingAutoStart = ({
     identitiesRef.current = identities;
   }, [identities]);
 
+  useEffect(() => {
+    groupConfigsRef.current = groupConfigs;
+  }, [groupConfigs]);
+
+  const resolveEffectiveHost = useCallback((host: Host): Host => {
+    if (!host.group) return host;
+    const defaults = resolveGroupDefaults(host.group, groupConfigsRef.current);
+    return applyGroupDefaults(host, defaults);
+  }, []);
+
   // Set up the reconnect callback
   useEffect(() => {
     const handleReconnect = async (
@@ -89,11 +103,12 @@ export const usePortForwardingAutoStart = ({
         return { success: false, error: "Rule or host not found" };
       }
 
-      const host = hostsRef.current.find((h) => h.id === rule.hostId);
-      if (!host) {
+      const rawHost = hostsRef.current.find((h) => h.id === rule.hostId);
+      if (!rawHost) {
         return { success: false, error: "Host not found" };
       }
 
+      const host = resolveEffectiveHost(rawHost);
       return startPortForward(rule, host, hostsRef.current, keysRef.current, identitiesRef.current, onStatusChange, true);
     };
 
@@ -101,7 +116,7 @@ export const usePortForwardingAutoStart = ({
     return () => {
       setReconnectCallback(null);
     };
-  }, []);
+  }, [resolveEffectiveHost]);
 
   // Auto-start rules on app launch
   useEffect(() => {
@@ -146,8 +161,9 @@ export const usePortForwardingAutoStart = ({
 
       // Start each auto-start rule
       for (const rule of autoStartRules) {
-        const host = hosts.find((h) => h.id === rule.hostId);
-        if (host) {
+        const rawHost = hosts.find((h) => h.id === rule.hostId);
+        if (rawHost) {
+          const host = resolveEffectiveHost(rawHost);
           void startPortForward(
             rule,
             host,
@@ -180,5 +196,5 @@ export const usePortForwardingAutoStart = ({
     };
 
     void runAutoStart();
-  }, [hosts, identities, isHostAuthReady, keys]);
+  }, [hosts, identities, isHostAuthReady, keys, resolveEffectiveHost]);
 };

application/state/useSessionState.ts

@@ -40,18 +40,26 @@ export const useSessionState = () => {
 
   const createLocalTerminal = useCallback((options?: {
     shellType?: TerminalSession['shellType'];
+    shell?: string;
+    shellArgs?: string[];
+    shellName?: string;
+    shellIcon?: string;
   }) => {
     const sessionId = crypto.randomUUID();
     const localHostId = `local-${sessionId}`;
     const newSession: TerminalSession = {
       id: sessionId,
       hostId: localHostId,
-      hostLabel: 'Local Terminal',
+      hostLabel: options?.shellName || 'Local Terminal',
       hostname: 'localhost',
       username: 'local',
       status: 'connecting',
       protocol: 'local',
       shellType: options?.shellType,
+      localShell: options?.shell,
+      localShellArgs: options?.shellArgs,
+      localShellName: options?.shellName,
+      localShellIcon: options?.shellIcon,
     };
     setSessions(prev => [...prev, newSession]);
     setActiveTabId(sessionId);
@@ -451,6 +459,10 @@ export const useSessionState = () => {
           moshEnabled: session.moshEnabled,
           shellType: nextShellType,
           charset: session.charset,
+          localShell: session.localShell,
+          localShellArgs: session.localShellArgs,
+          localShellName: session.localShellName,
+          localShellIcon: session.localShellIcon,
         };
 
         // Add pane to existing workspace
@@ -483,6 +495,10 @@ export const useSessionState = () => {
         moshEnabled: session.moshEnabled,
         shellType: nextShellType,
         charset: session.charset,
+        localShell: session.localShell,
+        localShellArgs: session.localShellArgs,
+        localShellName: session.localShellName,
+        localShellIcon: session.localShellIcon,
       };
 
       const hint: SplitHint = {
@@ -659,6 +675,10 @@ export const useSessionState = () => {
         shellType: nextShellType,
         charset: session.charset,
         serialConfig: session.serialConfig,
+        localShell: session.localShell,
+        localShellArgs: session.localShellArgs,
+        localShellName: session.localShellName,
+        localShellIcon: session.localShellIcon,
       };
 
       setActiveTabId(newSession.id);

application/state/useSettingsState.ts

@@ -125,7 +125,7 @@ const applyThemeTokens = (
   accentOverride: string,
 ) => {
   const root = window.document.documentElement;
-  // If immersive mode is active (style tag present), it owns the dark/light class — don't override
+  // If immersive override is active (style tag present), it owns the dark/light class — don't override
   if (!document.getElementById('netcatty-immersive-override')) {
     root.classList.remove('light', 'dark');
     root.classList.add(resolvedTheme);
@@ -340,11 +340,6 @@ export const useSettingsState = () => {
     }
   }, []);
 
-  // Immersive mode is always enabled — the toggle has been removed from settings
-  const immersiveMode = true;
-  const setImmersiveMode = useCallback((_enabled: boolean) => {
-    // no-op: immersive mode is always on
-  }, []);
 
   const setSftpTransferConcurrency = useCallback((value: number) => {
     const clamped = Math.max(1, Math.min(16, Math.round(value)));
@@ -462,7 +457,7 @@ export const useSettingsState = () => {
 
     // Custom terminal themes
     customThemeStore.loadFromStorage();
-  }, [syncAppearanceFromStorage, syncCustomCssFromStorage, setTerminalSettings, notifySettingsChanged]);
+  }, [syncAppearanceFromStorage, syncCustomCssFromStorage, setTerminalSettings]);
 
   useLayoutEffect(() => {
     const tokens = getUiThemeById(resolvedTheme, resolvedTheme === 'dark' ? darkUiThemeId : lightUiThemeId).tokens;
@@ -651,7 +646,7 @@ export const useSettingsState = () => {
     sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles,
     sftpUseCompressedUpload, sftpAutoOpenSidebar, sftpDefaultViewMode,
     editorWordWrap, sessionLogsEnabled, sessionLogsDir, sessionLogsFormat,
-    globalHotkeyEnabled, autoUpdateEnabled, immersiveMode,
+    globalHotkeyEnabled, autoUpdateEnabled,
   });
   settingsSnapshotRef.current = {
     theme, lightUiThemeId, darkUiThemeId, accentMode, customAccent,
@@ -660,7 +655,7 @@ export const useSettingsState = () => {
     sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles,
     sftpUseCompressedUpload, sftpAutoOpenSidebar, sftpDefaultViewMode,
     editorWordWrap, sessionLogsEnabled, sessionLogsDir, sessionLogsFormat,
-    globalHotkeyEnabled, autoUpdateEnabled, immersiveMode,
+    globalHotkeyEnabled, autoUpdateEnabled,
   };
 
   // Listen for storage changes from other windows (cross-window sync)
@@ -1220,8 +1215,6 @@ export const useSettingsState = () => {
     setGlobalHotkeyEnabled,
     rehydrateAllFromStorage,
     reapplyCurrentTheme,
-    immersiveMode,
-    setImmersiveMode,
     workspaceFocusStyle,
     setWorkspaceFocusStyle,
     // Opaque version that changes when any synced setting changes, used by useAutoSync.
@@ -1232,7 +1225,7 @@ export const useSettingsState = () => {
       terminalThemeId, terminalFontFamilyId, terminalFontSize, terminalSettings,
       customKeyBindings, editorWordWrap,
       sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles, sftpUseCompressedUpload, sftpAutoOpenSidebar, sftpDefaultViewMode,
-      customThemes, immersiveMode, workspaceFocusStyle,
+      customThemes, workspaceFocusStyle,
     ]),
   };
 };

application/state/useStoredBoolean.ts

@@ -1,8 +1,10 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { localStorageAdapter } from "../../infrastructure/persistence/localStorageAdapter";
 
 /**
  * Hook for persisting a boolean value to localStorage.
+ * Syncs across components in the same window via a custom event,
+ * and across windows via the native storage event.
  * @param storageKey - The key to use for localStorage
  * @param fallback - The default value if no stored value exists (defaults to false)
  * @returns A tuple of [value, setValue] similar to useState
@@ -16,9 +18,38 @@ export const useStoredBoolean = (
         return stored ?? fallback;
     });
 
-    useEffect(() => {
-        localStorageAdapter.writeBoolean(storageKey, value);
-    }, [storageKey, value]);
+    const setAndPersist = useCallback((next: boolean | ((prev: boolean) => boolean)) => {
+        setValue((prev) => {
+            const resolved = typeof next === "function" ? next(prev) : next;
+            localStorageAdapter.writeBoolean(storageKey, resolved);
+            // Notify other same-window consumers
+            window.dispatchEvent(
+                new CustomEvent("stored-boolean-change", { detail: { key: storageKey, value: resolved } }),
+            );
+            return resolved;
+        });
+    }, [storageKey]);
 
-    return [value, setValue] as const;
+    useEffect(() => {
+        // Sync from other components in the same window
+        const handleCustom = (e: Event) => {
+            const { key, value: newValue } = (e as CustomEvent).detail;
+            if (key === storageKey) setValue(newValue);
+        };
+        // Sync from other windows
+        const handleStorage = (e: StorageEvent) => {
+            if (e.key === storageKey) {
+                const stored = localStorageAdapter.readBoolean(storageKey);
+                setValue(stored ?? fallback);
+            }
+        };
+        window.addEventListener("stored-boolean-change", handleCustom);
+        window.addEventListener("storage", handleStorage);
+        return () => {
+            window.removeEventListener("stored-boolean-change", handleCustom);
+            window.removeEventListener("storage", handleStorage);
+        };
+    }, [storageKey, fallback]);
+
+    return [value, setAndPersist] as const;
 };

application/state/useVaultState.ts

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { normalizeDistroId, sanitizeHost } from "../../domain/host";
 import {
   ConnectionLog,
+  GroupConfig,
   Host,
   Identity,
   KeyCategory,
@@ -17,6 +18,7 @@ import {
 } from "../../infrastructure/config/defaultData";
 import {
   STORAGE_KEY_CONNECTION_LOGS,
+  STORAGE_KEY_GROUP_CONFIGS,
   STORAGE_KEY_GROUPS,
   STORAGE_KEY_HOSTS,
   STORAGE_KEY_IDENTITIES,
@@ -30,9 +32,11 @@ import {
 } from "../../infrastructure/config/storageKeys";
 import { localStorageAdapter } from "../../infrastructure/persistence/localStorageAdapter";
 import {
+  decryptGroupConfigs,
   decryptHosts,
   decryptIdentities,
   decryptKeys,
+  encryptGroupConfigs,
   encryptHosts,
   encryptIdentities,
   encryptKeys,
@@ -46,6 +50,7 @@ type ExportableVaultData = {
   customGroups: string[];
   snippetPackages?: string[];
   knownHosts?: KnownHost[];
+  groupConfigs?: GroupConfig[];
 };
 
 type LegacyKeyRecord = Record<string, unknown> & { id?: string; source?: string };
@@ -107,6 +112,7 @@ export const useVaultState = () => {
   const [shellHistory, setShellHistory] = useState<ShellHistoryEntry[]>([]);
   const [connectionLogs, setConnectionLogs] = useState<ConnectionLog[]>([]);
   const [managedSources, setManagedSources] = useState<ManagedSource[]>([]);
+  const [groupConfigs, setGroupConfigs] = useState<GroupConfig[]>([]);
 
   // Write-version counters prevent out-of-order async writes from overwriting
   // newer data.  Each update bumps the counter; the .then() callback only
@@ -114,6 +120,7 @@ export const useVaultState = () => {
   const hostsWriteVersion = useRef(0);
   const keysWriteVersion = useRef(0);
   const identitiesWriteVersion = useRef(0);
+  const groupConfigsWriteVersion = useRef(0);
 
   // Read-sequence counters for cross-window storage events.  Each incoming
   // event bumps the counter; the async decrypt callback only applies state if
@@ -122,6 +129,7 @@ export const useVaultState = () => {
   const hostsReadSeq = useRef(0);
   const keysReadSeq = useRef(0);
   const identitiesReadSeq = useRef(0);
+  const groupConfigsReadSeq = useRef(0);
 
   const updateHosts = useCallback((data: Host[]) => {
     const cleaned = data.map(sanitizeHost);
@@ -176,6 +184,15 @@ export const useVaultState = () => {
     localStorageAdapter.write(STORAGE_KEY_MANAGED_SOURCES, data);
   }, []);
 
+  const updateGroupConfigs = useCallback((data: GroupConfig[]) => {
+    setGroupConfigs(data);
+    const ver = ++groupConfigsWriteVersion.current;
+    encryptGroupConfigs(data).then((enc) => {
+      if (ver === groupConfigsWriteVersion.current)
+        localStorageAdapter.write(STORAGE_KEY_GROUP_CONFIGS, enc);
+    });
+  }, []);
+
   const clearVaultData = useCallback(() => {
     updateHosts([]);
     updateKeys([]);
@@ -185,6 +202,7 @@ export const useVaultState = () => {
     updateCustomGroups([]);
     updateKnownHosts([]);
     updateManagedSources([]);
+    updateGroupConfigs([]);
     localStorageAdapter.remove(STORAGE_KEY_LEGACY_KEYS);
   }, [
     updateHosts,
@@ -195,6 +213,7 @@ export const useVaultState = () => {
     updateCustomGroups,
     updateKnownHosts,
     updateManagedSources,
+    updateGroupConfigs,
   ]);
 
   const addShellHistoryEntry = useCallback(
@@ -430,6 +449,20 @@ export const useVaultState = () => {
         STORAGE_KEY_MANAGED_SOURCES,
       );
       if (savedManagedSources) setManagedSources(savedManagedSources);
+
+      // Load group configs
+      const savedGroupConfigs = localStorageAdapter.read<GroupConfig[]>(STORAGE_KEY_GROUP_CONFIGS);
+      if (savedGroupConfigs) {
+        const gcVer = ++groupConfigsWriteVersion.current;
+        const decryptedGC = await decryptGroupConfigs(savedGroupConfigs);
+        if (gcVer === groupConfigsWriteVersion.current) {
+          setGroupConfigs(decryptedGC);
+          encryptGroupConfigs(decryptedGC).then((enc) => {
+            if (gcVer === groupConfigsWriteVersion.current)
+              localStorageAdapter.write(STORAGE_KEY_GROUP_CONFIGS, enc);
+          });
+        }
+      }
     };
 
     init();
@@ -529,6 +562,19 @@ export const useVaultState = () => {
       if (key === STORAGE_KEY_MANAGED_SOURCES) {
         const next = safeParse<ManagedSource[]>(event.newValue) ?? [];
         setManagedSources(next);
+        return;
+      }
+
+      if (key === STORAGE_KEY_GROUP_CONFIGS) {
+        const next = safeParse<GroupConfig[]>(event.newValue) ?? [];
+        ++groupConfigsWriteVersion.current;
+        const seq = ++groupConfigsReadSeq.current;
+        const writeAtStart = groupConfigsWriteVersion.current;
+        decryptGroupConfigs(next).then((dec) => {
+          if (seq === groupConfigsReadSeq.current && writeAtStart === groupConfigsWriteVersion.current)
+            setGroupConfigs(dec);
+        });
+        return;
       }
     };
 
@@ -536,6 +582,20 @@ export const useVaultState = () => {
     return () => window.removeEventListener("storage", handleStorage);
   }, []);
 
+  const updateHostLastConnected = useCallback((hostId: string) => {
+    setHosts((prev) => {
+      const next = prev.map((h) =>
+        h.id === hostId ? { ...h, lastConnectedAt: Date.now() } : h,
+      );
+      const ver = ++hostsWriteVersion.current;
+      encryptHosts(next).then((enc) => {
+        if (ver === hostsWriteVersion.current)
+          localStorageAdapter.write(STORAGE_KEY_HOSTS, enc);
+      });
+      return next;
+    });
+  }, []);
+
   const updateHostDistro = useCallback((hostId: string, distro: string) => {
     const normalized = normalizeDistroId(distro);
     setHosts((prev) => {
@@ -560,8 +620,9 @@ export const useVaultState = () => {
       customGroups,
       snippetPackages,
       knownHosts,
+      groupConfigs,
     }),
-    [hosts, keys, identities, snippets, customGroups, snippetPackages, knownHosts],
+    [hosts, keys, identities, snippets, customGroups, snippetPackages, knownHosts, groupConfigs],
   );
 
   const importData = useCallback(
@@ -573,6 +634,7 @@ export const useVaultState = () => {
       if (payload.customGroups) updateCustomGroups(payload.customGroups);
       if (payload.snippetPackages) updateSnippetPackages(payload.snippetPackages);
       if (payload.knownHosts) updateKnownHosts(payload.knownHosts);
+      if (Array.isArray(payload.groupConfigs)) updateGroupConfigs(payload.groupConfigs);
     },
     [
       updateHosts,
@@ -582,6 +644,7 @@ export const useVaultState = () => {
       updateCustomGroups,
       updateSnippetPackages,
       updateKnownHosts,
+      updateGroupConfigs,
     ],
   );
 
@@ -604,6 +667,7 @@ export const useVaultState = () => {
     shellHistory,
     connectionLogs,
     managedSources,
+    groupConfigs,
     updateHosts,
     updateKeys,
     updateIdentities,
@@ -612,6 +676,7 @@ export const useVaultState = () => {
     updateCustomGroups,
     updateKnownHosts,
     updateManagedSources,
+    updateGroupConfigs,
     addShellHistoryEntry,
     clearShellHistory,
     addConnectionLog,
@@ -620,6 +685,7 @@ export const useVaultState = () => {
     deleteConnectionLog,
     clearUnsavedConnectionLogs,
     updateHostDistro,
+    updateHostLastConnected,
     convertKnownHostToHost,
     exportData,
     importDataFromString,

application/syncPayload.ts

@@ -8,6 +8,7 @@
  */
 
 import type {
+  GroupConfig,
   Host,
   Identity,
   KnownHost,
@@ -41,7 +42,7 @@ import {
   STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR,
   STORAGE_KEY_SFTP_GLOBAL_BOOKMARKS,
   STORAGE_KEY_CUSTOM_THEMES,
-  STORAGE_KEY_IMMERSIVE_MODE,
+  STORAGE_KEY_SHOW_RECENT_HOSTS,
 } from '../infrastructure/config/storageKeys';
 
 // ---------------------------------------------------------------------------
@@ -57,6 +58,7 @@ export interface SyncableVaultData {
   customGroups: string[];
   snippetPackages?: string[];
   knownHosts: KnownHost[];
+  groupConfigs?: GroupConfig[];
 }
 
 /** Callbacks used by `applySyncPayload` to import data into local state. */
@@ -168,9 +170,9 @@ export function collectSyncableSettings(): SyncPayload['settings'] {
   const globalBookmarks = localStorageAdapter.read<SftpBookmark[]>(STORAGE_KEY_SFTP_GLOBAL_BOOKMARKS);
   if (globalBookmarks && Array.isArray(globalBookmarks)) settings.sftpGlobalBookmarks = globalBookmarks;
 
-  // Immersive mode
-  const immersive = localStorageAdapter.readString(STORAGE_KEY_IMMERSIVE_MODE);
-  if (immersive === 'true' || immersive === 'false') settings.immersiveMode = immersive === 'true';
+
+  const showRecent = localStorageAdapter.readBoolean(STORAGE_KEY_SHOW_RECENT_HOSTS);
+  if (showRecent != null) settings.showRecentHosts = showRecent;
 
   return Object.keys(settings).length > 0 ? settings : undefined;
 }
@@ -234,8 +236,8 @@ function applySyncableSettings(settings: NonNullable<SyncPayload['settings']>):
   // SFTP Bookmarks (global only)
   if (settings.sftpGlobalBookmarks != null) localStorageAdapter.write(STORAGE_KEY_SFTP_GLOBAL_BOOKMARKS, settings.sftpGlobalBookmarks);
 
-  // Immersive mode
-  if (settings.immersiveMode != null) localStorageAdapter.writeString(STORAGE_KEY_IMMERSIVE_MODE, String(settings.immersiveMode));
+  // Immersive mode (legacy — always enabled, ignore incoming value)
+  if (settings.showRecentHosts != null) localStorageAdapter.writeBoolean(STORAGE_KEY_SHOW_RECENT_HOSTS, settings.showRecentHosts);
 }
 
 // ---------------------------------------------------------------------------
@@ -261,6 +263,7 @@ export function buildSyncPayload(
     customGroups: vault.customGroups,
     snippetPackages: vault.snippetPackages,
     knownHosts: vault.knownHosts,
+    groupConfigs: vault.groupConfigs,
     portForwardingRules,
     settings: collectSyncableSettings(),
     syncedAt: Date.now(),
@@ -294,6 +297,9 @@ export function applySyncPayload(
   if (payload.knownHosts !== undefined) {
     vaultImport.knownHosts = payload.knownHosts;
   }
+  if (Array.isArray(payload.groupConfigs)) {
+    vaultImport.groupConfigs = payload.groupConfigs;
+  }
 
   importers.importVaultData(JSON.stringify(vaultImport));
 

components/HostDetailsPanel.tsx

@@ -99,6 +99,7 @@ interface HostDetailsPanelProps {
   onCancel: () => void;
   onCreateGroup?: (groupPath: string) => void; // Callback to create a new group
   onCreateTag?: (tag: string) => void; // Callback to create a new tag
+  groupDefaults?: Partial<import('../domain/models').GroupConfig>;
 }
 
 const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
@@ -116,6 +117,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
   onCancel,
   onCreateGroup,
   onCreateTag,
+  groupDefaults,
 }) => {
   const { t } = useI18n();
   const { checkSshAgent } = useApplicationBackend();
@@ -126,13 +128,13 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
         id: crypto.randomUUID(),
         label: "",
         hostname: "",
-        port: 22,
-        username: "root",
+        port: groupDefaults?.port ? undefined : 22,
+        username: groupDefaults?.username ? "" : "root",
         protocol: "ssh",
         tags: [],
         os: "linux",
         authMethod: "password",
-        charset: "UTF-8",
+        charset: groupDefaults?.charset ? undefined : "UTF-8",
         distroMode: "auto",
         createdAt: Date.now(),
         group: defaultGroup || undefined, // Pre-fill with current navigation group
@@ -282,12 +284,10 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
   };
 
   const removeHostFromChain = (index: number) => {
-    setForm((prev) => ({
-      ...prev,
-      hostChain: {
-        hostIds: (prev.hostChain?.hostIds || []).filter((_, i) => i !== index),
-      },
-    }));
+    setForm((prev) => {
+      const ids = (prev.hostChain?.hostIds || []).filter((_, i) => i !== index);
+      return { ...prev, hostChain: ids.length > 0 ? { hostIds: ids } : undefined };
+    });
   };
 
   const clearHostChain = useCallback(() => {
@@ -313,12 +313,10 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
   };
 
   const removeEnvVar = (index: number) => {
-    setForm((prev) => ({
-      ...prev,
-      environmentVariables: (prev.environmentVariables || []).filter(
-        (_, i) => i !== index,
-      ),
-    }));
+    setForm((prev) => {
+      const filtered = (prev.environmentVariables || []).filter((_, i) => i !== index);
+      return { ...prev, environmentVariables: filtered.length > 0 ? filtered : undefined };
+    });
   };
 
   const handleSubmit = () => {
@@ -363,7 +361,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
       label: finalLabel,
       group: finalGroup,
       tags: form.tags || [],
-      port: form.port || 22,
+      port: form.port ?? (groupDefaults?.port ? undefined : 22),
       // Clear password if savePassword is explicitly set to false
       password: form.savePassword === false ? undefined : form.password,
       managedSourceId: finalManagedSourceId,
@@ -752,8 +750,9 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
               <div className="ml-auto w-1/2 min-w-0 flex items-center gap-2 justify-end">
                 <Input
                   type="number"
-                  value={form.port}
-                  onChange={(e) => update("port", Number(e.target.value))}
+                  value={form.port ?? ""}
+                  onChange={(e) => update("port", e.target.value ? Number(e.target.value) : undefined)}
+                  placeholder={groupDefaults?.port ? String(groupDefaults.port) : "22"}
                   className="h-8 flex-1 min-w-0 text-center"
                 />
                 <span className="text-xs text-muted-foreground">
@@ -805,7 +804,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
                 if (!hasIdentities) {
                   return (
                     <Input
-                      placeholder={t("hostDetails.username.placeholder")}
+                      placeholder={groupDefaults?.username || t("hostDetails.username.placeholder")}
                       value={form.username}
                       onChange={(e) => update("username", e.target.value)}
                       className="h-10"
@@ -824,7 +823,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
                     <PopoverTrigger asChild>
                       <div className="relative">
                         <Input
-                          placeholder={t("hostDetails.username.placeholder")}
+                          placeholder={groupDefaults?.username || t("hostDetails.username.placeholder")}
                           value={form.username}
                           onChange={(e) => {
                             const next = e.target.value;
@@ -1606,6 +1605,17 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
               </p>
             </div>
           )}
+          <div className="flex items-center justify-between">
+            <p className="text-xs text-muted-foreground">{t("hostDetails.backspaceBehavior")}</p>
+            <select
+              className="h-8 rounded-md border border-input bg-background px-2 text-xs"
+              value={form.backspaceBehavior ?? ""}
+              onChange={(e) => update("backspaceBehavior", e.target.value || undefined)}
+            >
+              <option value="">{t("hostDetails.backspaceBehavior.default")}</option>
+              <option value="ctrl-h">^H (0x08)</option>
+            </select>
+          </div>
         </Card>
 
         {/* Proxy via Hosts (Jump Hosts / ProxyJump) */}
@@ -1755,7 +1765,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
                 className="text-muted-foreground hover:text-destructive flex-shrink-0 ml-auto"
                 onClick={(e) => {
                   e.stopPropagation();
-                  setForm((prev) => ({ ...prev, environmentVariables: [] }));
+                  setForm((prev) => ({ ...prev, environmentVariables: undefined }));
                 }}
               />
             </button>
@@ -1778,7 +1788,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
             <p className="text-xs font-semibold">{t("hostDetails.startupCommand")}</p>
           </div>
           <Textarea
-            placeholder={t("hostDetails.startupCommand.placeholder")}
+            placeholder={groupDefaults?.startupCommand || t("hostDetails.startupCommand.placeholder")}
             value={form.startupCommand || ""}
             onChange={(e) => update("startupCommand", e.target.value)}
             className="min-h-[80px] font-mono text-sm"
@@ -1842,7 +1852,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
 
             {/* Telnet Charset */}
             <Input
-              placeholder={t("hostDetails.charset.placeholder")}
+              placeholder={groupDefaults?.charset || t("hostDetails.charset.placeholder")}
               value={form.charset || "UTF-8"}
               onChange={(e) => update("charset", e.target.value)}
               className="h-10"

components/HostTreeView.tsx

@@ -1,4 +1,4 @@
-import { CheckSquare, ChevronRight, FileSymlink, Folder, FolderOpen, Monitor, Server, Square, Expand, Minimize2 } from 'lucide-react';
+import { CheckSquare, ChevronRight, Edit2, FileSymlink, Folder, FolderOpen, Monitor, Server, Square, Expand, Minimize2 } from 'lucide-react';
 import React, { useMemo } from 'react';
 import { useI18n } from '../application/i18n/I18nProvider';
 import { useTreeExpandedState } from '../application/state/useTreeExpandedState';
@@ -32,9 +32,12 @@ interface HostTreeViewProps {
   moveGroup: (sourcePath: string, targetPath: string) => void;
   managedGroupPaths?: Set<string>;
   onUnmanageGroup?: (groupPath: string) => void;
+
   isMultiSelectMode?: boolean;
   selectedHostIds?: Set<string>;
   toggleHostSelection?: (hostId: string) => void;
+  getDropTargetClasses?: (target: string) => string;
+  setDragOverDropTarget?: (target: string | null) => void;
 }
 
 interface TreeNodeProps {
@@ -56,9 +59,12 @@ interface TreeNodeProps {
   moveGroup: (sourcePath: string, targetPath: string) => void;
   managedGroupPaths?: Set<string>;
   onUnmanageGroup?: (groupPath: string) => void;
+
   isMultiSelectMode?: boolean;
   selectedHostIds?: Set<string>;
   toggleHostSelection?: (hostId: string) => void;
+  getDropTargetClasses?: (target: string) => string;
+  setDragOverDropTarget?: (target: string | null) => void;
 }
 
 
@@ -81,9 +87,12 @@ const TreeNode: React.FC<TreeNodeProps> = ({
   moveGroup,
   managedGroupPaths,
   onUnmanageGroup,
+
   isMultiSelectMode,
   selectedHostIds,
   toggleHostSelection,
+  getDropTargetClasses,
+  setDragOverDropTarget,
 }) => {
   const { t } = useI18n();
   const isExpanded = expandedPaths.has(node.path);
@@ -137,6 +146,7 @@ const TreeNode: React.FC<TreeNodeProps> = ({
               <div
                 className={cn(
                   "flex items-center py-2 pr-3 text-sm font-medium cursor-pointer transition-colors select-none group hover:bg-secondary/60 rounded-lg",
+                  getDropTargetClasses?.(node.path),
                 )}
                 style={{ paddingLeft }}
                 draggable
@@ -144,10 +154,19 @@ const TreeNode: React.FC<TreeNodeProps> = ({
                 onDragOver={(e) => {
                   e.preventDefault();
                   e.stopPropagation();
+                  setDragOverDropTarget?.(node.path);
+                }}
+                onDragLeave={(e) => {
+                  const nextTarget = e.relatedTarget;
+                  if (nextTarget instanceof Node && e.currentTarget.contains(nextTarget)) {
+                    return;
+                  }
+                  setDragOverDropTarget?.(null);
                 }}
                 onDrop={(e) => {
                   e.preventDefault();
                   e.stopPropagation();
+                  setDragOverDropTarget?.(null);
                   const hostId = e.dataTransfer.getData("host-id");
                   const groupPath = e.dataTransfer.getData("group-path");
                   if (hostId) moveHostToGroup(hostId, node.path);
@@ -176,6 +195,15 @@ const TreeNode: React.FC<TreeNodeProps> = ({
                     {hostsCountInNode}
                   </span>
                 )}
+                <button
+                  className="h-7 w-7 flex items-center justify-center rounded-md hover:bg-secondary/80 transition-colors opacity-0 group-hover:opacity-100 shrink-0"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onEditGroup(node.path);
+                  }}
+                >
+                  <Edit2 size={13} />
+                </button>
               </div>
             </CollapsibleTrigger>
           </ContextMenuTrigger>
@@ -226,9 +254,12 @@ const TreeNode: React.FC<TreeNodeProps> = ({
               moveGroup={moveGroup}
               managedGroupPaths={managedGroupPaths}
               onUnmanageGroup={onUnmanageGroup}
+
               isMultiSelectMode={isMultiSelectMode}
               selectedHostIds={selectedHostIds}
               toggleHostSelection={toggleHostSelection}
+              getDropTargetClasses={getDropTargetClasses}
+              setDragOverDropTarget={setDragOverDropTarget}
             />
           ))}
 
@@ -244,6 +275,7 @@ const TreeNode: React.FC<TreeNodeProps> = ({
               onDeleteHost={onDeleteHost}
               onCopyCredentials={onCopyCredentials}
               moveHostToGroup={moveHostToGroup}
+
               isMultiSelectMode={isMultiSelectMode}
               selectedHostIds={selectedHostIds}
               toggleHostSelection={toggleHostSelection}
@@ -264,6 +296,7 @@ interface HostTreeItemProps {
   onDeleteHost: (host: Host) => void;
   onCopyCredentials: (host: Host) => void;
   moveHostToGroup: (hostId: string, groupPath: string | null) => void;
+
   isMultiSelectMode?: boolean;
   selectedHostIds?: Set<string>;
   toggleHostSelection?: (hostId: string) => void;
@@ -278,6 +311,7 @@ const HostTreeItem: React.FC<HostTreeItemProps> = ({
   onDeleteHost,
   onCopyCredentials,
   moveHostToGroup: _moveHostToGroup,
+
   isMultiSelectMode,
   selectedHostIds,
   toggleHostSelection,
@@ -348,6 +382,15 @@ const HostTreeItem: React.FC<HostTreeItemProps> = ({
                 {tags.length > 2 && '...'}
               </span>
             )}
+            <button
+              className="h-7 w-7 flex items-center justify-center rounded-md hover:bg-secondary/80 transition-colors"
+              onClick={(e) => {
+                e.stopPropagation();
+                onEditHost(host);
+              }}
+            >
+              <Edit2 size={13} />
+            </button>
           </div>
         </div>
       </ContextMenuTrigger>
@@ -364,7 +407,7 @@ const HostTreeItem: React.FC<HostTreeItemProps> = ({
         <ContextMenuItem onClick={() => onCopyCredentials(host)}>
           <Server className="mr-2 h-4 w-4" /> {t("vault.hosts.copyCredentials")}
         </ContextMenuItem>
-        <ContextMenuItem 
+        <ContextMenuItem
           onClick={() => onDeleteHost(host)}
           className="text-destructive focus:text-destructive"
         >
@@ -396,12 +439,15 @@ export const HostTreeView: React.FC<HostTreeViewProps> = ({
   moveGroup,
   managedGroupPaths,
   onUnmanageGroup,
+
   isMultiSelectMode,
   selectedHostIds,
   toggleHostSelection,
+  getDropTargetClasses,
+  setDragOverDropTarget,
 }) => {
   const { t } = useI18n();
-  
+
   // Use external state if provided, otherwise use local persistent state
   const localTreeState = useTreeExpandedState(STORAGE_KEY_VAULT_HOSTS_TREE_EXPANDED);
   
@@ -522,6 +568,8 @@ export const HostTreeView: React.FC<HostTreeViewProps> = ({
           isMultiSelectMode={isMultiSelectMode}
           selectedHostIds={selectedHostIds}
           toggleHostSelection={toggleHostSelection}
+          getDropTargetClasses={getDropTargetClasses}
+          setDragOverDropTarget={setDragOverDropTarget}
         />
       ))}
 
@@ -552,4 +600,4 @@ export const HostTreeView: React.FC<HostTreeViewProps> = ({
       )}
     </div>
   );
-};
+};

components/PortForwardingNew.tsx

@@ -14,12 +14,14 @@ import React, { useCallback, useState } from "react";
 import { useI18n } from "../application/i18n/I18nProvider";
 import { usePortForwardingState } from "../application/state/usePortForwardingState";
 import {
+  GroupConfig,
   Host,
   ManagedSource,
   PortForwardingRule,
   PortForwardingType,
   SSHKey,
 } from "../domain/models";
+import { resolveGroupDefaults, applyGroupDefaults } from "../domain/groupConfig";
 import { cn } from "../lib/utils";
 import SelectHostPanel from "./SelectHostPanel";
 import {
@@ -66,6 +68,7 @@ interface PortForwardingProps {
   identities?: import('../domain/models').Identity[];
   customGroups: string[];
   managedSources?: ManagedSource[];
+  groupConfigs?: GroupConfig[];
   onNewHost?: () => void;
   onSaveHost?: (host: Host) => void;
   onCreateGroup?: (groupPath: string) => void;
@@ -77,6 +80,7 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
   identities = [],
   customGroups: _customGroups,
   managedSources = [],
+  groupConfigs = [],
   onNewHost: _onNewHost,
   onSaveHost,
   onCreateGroup: _onCreateGroup,
@@ -113,8 +117,8 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
   // Start a port forwarding tunnel
   const handleStartTunnel = useCallback(
     async (rule: PortForwardingRule) => {
-      const _host = hosts.find((h) => h.id === rule.hostId);
-      if (!_host) {
+      const _rawHost = hosts.find((h) => h.id === rule.hostId);
+      if (!_rawHost) {
         setRuleStatus(rule.id, "error", t("pf.error.hostNotFound"));
         toast.error(
           t("pf.error.hostNotFound"),
@@ -123,6 +127,10 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
         return;
       }
 
+      const _host = _rawHost.group
+        ? applyGroupDefaults(_rawHost, resolveGroupDefaults(_rawHost.group, groupConfigs))
+        : _rawHost;
+
       setPendingOperations((prev) => new Set([...prev, rule.id]));
       let errorShown = false;
 
@@ -161,7 +169,7 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
         });
       }
     },
-    [hosts, identities, keys, setRuleStatus, startTunnel, t],
+    [hosts, identities, keys, groupConfigs, setRuleStatus, startTunnel, t],
   );
 
   // Stop a port forwarding tunnel

components/QuickSwitcher.tsx

@@ -10,9 +10,10 @@ import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from "
 import { useI18n } from "../application/i18n/I18nProvider";
 import { Host, TerminalSession, Workspace } from "../types";
 import { KeyBinding } from "../domain/models";
+import { useDiscoveredShells, getShellIconPath, isMonochromeShellIcon } from "../lib/useDiscoveredShells";
 
 type QuickSwitcherItem = {
-  type: "host" | "tab" | "workspace" | "action";
+  type: "host" | "tab" | "workspace" | "action" | "shell";
   id: string;
   data?: Host | TerminalSession | Workspace;
 };
@@ -66,7 +67,7 @@ interface QuickSwitcherProps {
   onSelect: (host: Host) => void;
   onSelectTab: (tabId: string) => void;
   onClose: () => void;
-  onCreateLocalTerminal?: () => void;
+  onCreateLocalTerminal?: (shell?: { command: string; args?: string[]; name?: string; icon?: string }) => void;
   // onCreateWorkspace removed - feature not currently used
   keyBindings?: KeyBinding[];
 }
@@ -85,6 +86,18 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
   keyBindings,
 }) => {
   const { t } = useI18n();
+  const discoveredShells = useDiscoveredShells();
+
+  const filteredShells = useMemo(() => {
+    const list = !query.trim()
+      ? discoveredShells
+      : discoveredShells.filter(
+          (s) => s.name.toLowerCase().includes(query.toLowerCase()) || s.id.toLowerCase().includes(query.toLowerCase())
+        );
+    // Default shell first
+    return [...list].sort((a, b) => (a.isDefault === b.isDefault ? 0 : a.isDefault ? -1 : 1));
+  }, [discoveredShells, query]);
+
   // Get hotkey display strings
   const getHotkeyLabel = useCallback((actionId: string) => {
     const binding = keyBindings?.find(k => k.id === actionId);
@@ -155,13 +168,23 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
       workspaces.forEach((w) =>
         items.push({ type: "workspace", id: w.id, data: w }),
       );
-      // Quick connect actions
-      items.push({ type: "action", id: "local-terminal" });
+      // Local shells (or fallback action if discovery not ready)
+      if (filteredShells.length > 0) {
+        filteredShells.forEach((shell) =>
+          items.push({ type: "shell", id: shell.id }),
+        );
+      } else {
+        items.push({ type: "action", id: "local-terminal" });
+      }
     } else {
       // Recent connections only
       results.forEach((host) =>
         items.push({ type: "host", id: host.id, data: host }),
       );
+      // Also include matching shells in search results
+      filteredShells.forEach((shell) =>
+        items.push({ type: "shell", id: shell.id }),
+      );
     }
 
     // Build index map for O(1) lookup
@@ -171,7 +194,7 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
     });
 
     return { flatItems: items, itemIndexMap: indexMap };
-  }, [showCategorized, results, orphanSessions, workspaces]);
+  }, [showCategorized, results, orphanSessions, workspaces, filteredShells]);
 
   // O(1) index lookup
   const getItemIndex = useCallback((type: string, id: string) => {
@@ -210,6 +233,14 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
           onClose();
         }
         break;
+      case "shell": {
+        const shell = discoveredShells.find(s => s.id === item.id);
+        if (shell && onCreateLocalTerminal) {
+          onCreateLocalTerminal({ command: shell.command, args: shell.args, name: shell.name, icon: shell.icon });
+          onClose();
+        }
+        break;
+      }
     }
   };
 
@@ -369,21 +400,60 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
               })}
             </div>
 
-            {/* Quick connect section */}
-            <div>
-              <div className="px-4 py-1.5">
-                <span className="text-xs font-medium text-muted-foreground">
-                  Quick connect
-                </span>
+            {/* Local Shells section */}
+            {/* Local Shells or fallback Local Terminal */}
+            {filteredShells.length > 0 ? (
+              <div>
+                <div className="px-4 py-1.5">
+                  <span className="text-xs font-medium text-muted-foreground">
+                    {t("qs.localShells")}
+                  </span>
+                </div>
+                {filteredShells.map((shell) => {
+                  const idx = getItemIndex("shell", shell.id);
+                  const isSelected = idx === selectedIndex;
+                  return (
+                    <div
+                      key={shell.id}
+                      className={`flex items-center gap-3 px-4 py-2.5 cursor-pointer transition-colors ${
+                        isSelected ? "bg-primary/15" : "hover:bg-muted/50"
+                      }`}
+                      onClick={() => {
+                        if (onCreateLocalTerminal) {
+                          onCreateLocalTerminal({ command: shell.command, args: shell.args, name: shell.name, icon: shell.icon });
+                          onClose();
+                        }
+                      }}
+                      onMouseEnter={() => setSelectedIndex(idx)}
+                    >
+                      <img
+                        src={getShellIconPath(shell.icon)}
+                        alt={shell.name}
+                        className={`h-6 w-6 shrink-0${isMonochromeShellIcon(shell.icon) ? " dark:invert" : ""}`}
+                      />
+                      <span className="text-sm font-medium">{shell.name}</span>
+                      {shell.isDefault && (
+                        <span className="text-[10px] text-muted-foreground bg-muted px-1.5 py-0.5 rounded">
+                          {t("qs.default")}
+                        </span>
+                      )}
+                    </div>
+                  );
+                })}
               </div>
-
-              {/* Local Terminal */}
-              {onCreateLocalTerminal && (
+            ) : onCreateLocalTerminal && (
+              <div>
+                <div className="px-4 py-1.5">
+                  <span className="text-xs font-medium text-muted-foreground">
+                    {t("qs.localShells")}
+                  </span>
+                </div>
                 <div
-                  className={`flex items-center gap-3 px-4 py-2.5 cursor-pointer transition-colors ${getItemIndex("action", "local-terminal") === selectedIndex
-                    ? "bg-primary/15"
-                    : "hover:bg-muted/50"
-                    }`}
+                  className={`flex items-center gap-3 px-4 py-2.5 cursor-pointer transition-colors ${
+                    getItemIndex("action", "local-terminal") === selectedIndex
+                      ? "bg-primary/15"
+                      : "hover:bg-muted/50"
+                  }`}
                   onClick={() => {
                     onCreateLocalTerminal();
                     onClose();
@@ -397,10 +467,8 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
                   </div>
                   <span className="text-sm font-medium">{t("qs.localTerminal")}</span>
                 </div>
-              )}
-
-              {/* Serial removed (not supported) */}
-            </div>
+              </div>
+            )}
           </div>
         </ScrollArea>
       </div>

components/SettingsPage.tsx

@@ -113,6 +113,7 @@ const SettingsSyncTabWithVault: React.FC<{ onSettingsApplied?: () => void }> = (
         customGroups,
         snippetPackages,
         knownHosts,
+        groupConfigs,
         importDataFromString,
         clearVaultData,
     } = useVaultState();
@@ -132,8 +133,8 @@ const SettingsSyncTabWithVault: React.FC<{ onSettingsApplied?: () => void }> = (
     );
 
     const vault = useMemo(
-        () => ({ hosts, keys, identities, snippets, customGroups, snippetPackages, knownHosts }),
-        [hosts, keys, identities, snippets, customGroups, snippetPackages, knownHosts],
+        () => ({ hosts, keys, identities, snippets, customGroups, snippetPackages, knownHosts, groupConfigs }),
+        [hosts, keys, identities, snippets, customGroups, snippetPackages, knownHosts, groupConfigs],
     );
 
     return (
@@ -154,10 +155,6 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
     const { updateState, checkNow, installUpdate, openReleasePage, startDownload, isUpdateDemoMode } = useUpdateCheck({ autoUpdateEnabled: settings.autoUpdateEnabled });
     const [activeTab, setActiveTab] = useState("application");
     const [mountedTabs, setMountedTabs] = useState(() => new Set(["application"]));
-    const isImmersive = settings.immersiveMode;
-    const toggleImmersive = useCallback(() => {
-        settings.setImmersiveMode(!isImmersive);
-    }, [settings, isImmersive]);
 
     useEffect(() => {
         notifyRendererReady();
@@ -285,8 +282,6 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
                             setUiLanguage={settings.setUiLanguage}
                             customCSS={settings.customCSS}
                             setCustomCSS={settings.setCustomCSS}
-                            isImmersive={isImmersive}
-                            onToggleImmersive={toggleImmersive}
                         />
                     )}
 

components/SftpSidePanel.tsx

@@ -671,6 +671,8 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
           handleSaveTextFile={handleSaveTextFile}
           editorWordWrap={editorWordWrap}
           setEditorWordWrap={setEditorWordWrap}
+          hotkeyScheme={hotkeyScheme}
+          keyBindings={keyBindings}
           showFileOpenerDialog={showFileOpenerDialog}
           setShowFileOpenerDialog={setShowFileOpenerDialog}
           fileOpenerTarget={fileOpenerTarget}
@@ -700,6 +702,8 @@ const sidePanelAreEqual = (prev: SftpSidePanelProps, next: SftpSidePanelProps):
   prev.sftpAutoSync === next.sftpAutoSync &&
   prev.sftpShowHiddenFiles === next.sftpShowHiddenFiles &&
   prev.sftpUseCompressedUpload === next.sftpUseCompressedUpload &&
+  prev.hotkeyScheme === next.hotkeyScheme &&
+  prev.keyBindings === next.keyBindings &&
   prev.editorWordWrap === next.editorWordWrap &&
   prev.setEditorWordWrap === next.setEditorWordWrap &&
   prev.onGetTerminalCwd === next.onGetTerminalCwd &&

components/SftpView.tsx

@@ -25,6 +25,7 @@ import { useRenderTracker } from "../lib/useRenderTracker";
 import { cn } from "../lib/utils";
 import { useInstantThemeSwitch } from "../lib/useInstantThemeSwitch";
 import { Host, Identity, SSHKey } from "../types";
+import { resolveGroupDefaults, applyGroupDefaults } from "../domain/groupConfig";
 import { useSftpFileAssociations } from "../application/state/useSftpFileAssociations";
 import { toast } from "./ui/toast";
 
@@ -51,6 +52,7 @@ interface SftpViewProps {
   hosts: Host[];
   keys: SSHKey[];
   identities: Identity[];
+  groupConfigs?: import('../domain/models').GroupConfig[];
   updateHosts: (hosts: Host[]) => void;
   sftpDefaultViewMode: "list" | "tree";
   sftpDoubleClickBehavior: "open" | "transfer";
@@ -67,6 +69,7 @@ const SftpViewInner: React.FC<SftpViewProps> = ({
   hosts,
   keys,
   identities,
+  groupConfigs = [],
   updateHosts,
   sftpDefaultViewMode,
   sftpDoubleClickBehavior,
@@ -104,7 +107,17 @@ const SftpViewInner: React.FC<SftpViewProps> = ({
     defaultShowHiddenFiles: sftpShowHiddenFiles,
   }), [fileWatchHandlers, sftpUseCompressedUpload, sftpShowHiddenFiles]);
 
-  const sftp = useSftpState(hosts, keys, identities, sftpOptions);
+  // Pre-resolve group defaults so SFTP connections inherit group config
+  const effectiveHosts = useMemo(() =>
+    hosts.map(h => {
+      if (!h.group) return h;
+      const defaults = resolveGroupDefaults(h.group, groupConfigs);
+      return applyGroupDefaults(h, defaults);
+    }),
+    [hosts, groupConfigs],
+  );
+
+  const sftp = useSftpState(effectiveHosts, keys, identities, sftpOptions);
 
   // Get backend helpers for file downloads and local filesystem writes.
   const {
@@ -454,6 +467,8 @@ const SftpViewInner: React.FC<SftpViewProps> = ({
           handleSaveTextFile={handleSaveTextFile}
           editorWordWrap={editorWordWrap}
           setEditorWordWrap={setEditorWordWrap}
+          hotkeyScheme={hotkeyScheme}
+          keyBindings={keyBindings}
           showFileOpenerDialog={showFileOpenerDialog}
           setShowFileOpenerDialog={setShowFileOpenerDialog}
           fileOpenerTarget={fileOpenerTarget}
@@ -471,6 +486,7 @@ const sftpViewAreEqual = (prev: SftpViewProps, next: SftpViewProps): boolean =>
   prev.hosts === next.hosts &&
   prev.keys === next.keys &&
   prev.identities === next.identities &&
+  prev.groupConfigs === next.groupConfigs &&
   prev.sftpDefaultViewMode === next.sftpDefaultViewMode &&
   prev.sftpDoubleClickBehavior === next.sftpDoubleClickBehavior &&
   prev.sftpAutoSync === next.sftpAutoSync &&

components/Terminal.tsx

@@ -47,7 +47,7 @@ import { TerminalSearchBar } from "./terminal/TerminalSearchBar";
 import { ZmodemProgressIndicator } from "./terminal/ZmodemProgressIndicator";
 import { useZmodemTransfer } from "./terminal/hooks/useZmodemTransfer";
 import { createTerminalSessionStarters, type PendingAuth } from "./terminal/runtime/createTerminalSessionStarters";
-import { createXTermRuntime, type XTermRuntime } from "./terminal/runtime/createXTermRuntime";
+import { createXTermRuntime, primaryFontFamily, type XTermRuntime } from "./terminal/runtime/createXTermRuntime";
 import { XTERM_PERFORMANCE_CONFIG } from "../infrastructure/config/xtermPerformance";
 import { useTerminalSearch } from "./terminal/hooks/useTerminalSearch";
 import { useTerminalContextActions } from "./terminal/hooks/useTerminalContextActions";
@@ -256,6 +256,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   isVisibleRef.current = isVisible;
   const pendingOutputScrollRef = useRef(false);
   const lastFittedSizeRef = useRef<{ width: number; height: number } | null>(null);
+  const fontWeightFixupDoneRef = useRef(false);
 
   useEffect(() => {
     if (xtermRuntimeRef.current) {
@@ -329,6 +330,23 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   const statusRef = useRef<TerminalSession["status"]>(status);
   statusRef.current = status;
 
+  // Work around xterm.js WebGL renderer bug: glyphs rendered via the constructor
+  // look different from dynamically-set ones. After text appears on screen (status
+  // becomes "connected"), do a fontWeight round-trip to normalize the rendering.
+  useEffect(() => {
+    if (status !== 'connected' || fontWeightFixupDoneRef.current || !termRef.current) return;
+    fontWeightFixupDoneRef.current = true;
+    const timer = setTimeout(() => {
+      if (!termRef.current) return;
+      // Re-read the current weight at fire time to avoid stale closures
+      const w = termRef.current.options.fontWeight;
+      if (w === 'normal' || w === 400) return;
+      termRef.current.options.fontWeight = 'normal';
+      termRef.current.options.fontWeight = w;
+    }, 200);
+    return () => clearTimeout(timer);
+  }, [status]);
+
   const [chainProgress, setChainProgress] = useState<{
     currentHop: number;
     totalHops: number;
@@ -576,10 +594,15 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   const customThemes = useCustomThemes();
   const hasFontSizeOverride = host.fontSizeOverride === true || (host.fontSizeOverride === undefined && host.fontSize != null);
   const hasFontFamilyOverride = host.fontFamilyOverride === true || (host.fontFamilyOverride === undefined && !!host.fontFamily);
+  const hasFontWeightOverride = host.fontWeightOverride === true || (host.fontWeightOverride === undefined && host.fontWeight != null);
   const effectiveFontSize = useMemo(
     () => (hasFontSizeOverride && host.fontSize != null ? host.fontSize : fontSize),
     [fontSize, hasFontSizeOverride, host.fontSize],
   );
+  const effectiveFontWeight = useMemo(
+    () => (hasFontWeightOverride && host.fontWeight != null ? host.fontWeight : (terminalSettings?.fontWeight ?? 400)),
+    [terminalSettings?.fontWeight, hasFontWeightOverride, host.fontWeight],
+  );
   const resolvedFontFamily = useMemo(() => {
     const hostFontId = hasFontFamilyOverride && host.fontFamily
       ? host.fontFamily
@@ -923,6 +946,9 @@ const TerminalComponent: React.FC<TerminalProps> = ({
       termRef.current.options.theme = {
         ...effectiveTheme.colors,
         selectionBackground: effectiveTheme.colors.selection,
+        scrollbarSliderBackground: effectiveTheme.colors.foreground + '33',
+        scrollbarSliderHoverBackground: effectiveTheme.colors.foreground + '66',
+        scrollbarSliderActiveBackground: effectiveTheme.colors.foreground + '80',
       };
     }
   }, [effectiveTheme]);
@@ -936,7 +962,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
         termRef.current.options.cursorStyle = terminalSettings.cursorShape;
         termRef.current.options.cursorBlink = terminalSettings.cursorBlink;
         termRef.current.options.scrollback = terminalSettings.scrollback;
-        termRef.current.options.fontWeight = terminalSettings.fontWeight as
+        termRef.current.options.fontWeight = effectiveFontWeight as
           | 100
           | 200
           | 300
@@ -951,10 +977,10 @@ const TerminalComponent: React.FC<TerminalProps> = ({
           if (typeof document === "undefined" || !document.fonts?.check) {
             return terminalSettings.fontWeightBold;
           }
-          const weightSpec = `${terminalSettings.fontWeightBold} ${effectiveFontSize}px ${fontFamily}`;
+          const weightSpec = `${terminalSettings.fontWeightBold} ${effectiveFontSize}px ${primaryFontFamily(fontFamily)}`;
           return document.fonts.check(weightSpec)
             ? terminalSettings.fontWeightBold
-            : terminalSettings.fontWeight;
+            : effectiveFontWeight;
         })();
 
         termRef.current.options.fontWeightBold = resolvedFontWeightBold as
@@ -989,7 +1015,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
         lastFittedSizeRef.current = null;
       }
     }
-  }, [effectiveFontSize, resolvedFontFamily, terminalSettings]);
+  }, [effectiveFontSize, effectiveFontWeight, resolvedFontFamily, terminalSettings]);
 
   useEffect(() => {
     if (!isVisible) return;
@@ -1038,10 +1064,10 @@ const TerminalComponent: React.FC<TerminalProps> = ({
         if (terminalSettings && termRef.current) {
           const fontFamily = termRef.current.options?.fontFamily || "";
           if (typeof document !== "undefined" && document.fonts?.check) {
-            const weightSpec = `${terminalSettings.fontWeightBold} ${effectiveFontSize}px ${fontFamily}`;
+            const weightSpec = `${terminalSettings.fontWeightBold} ${effectiveFontSize}px ${primaryFontFamily(fontFamily)}`;
             const resolvedBold = document.fonts.check(weightSpec)
               ? terminalSettings.fontWeightBold
-              : terminalSettings.fontWeight;
+              : effectiveFontWeight;
             termRef.current.options.fontWeightBold = resolvedBold as
               | 100
               | 200
@@ -1072,7 +1098,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
     return () => {
       cancelled = true;
     };
-  }, [effectiveFontSize, resizeSession, terminalSettings]);
+  }, [effectiveFontSize, effectiveFontWeight, resizeSession, terminalSettings]);
 
   useEffect(() => {
     if (!isVisible || !containerRef.current || !fitAddonRef.current) return;
@@ -1109,10 +1135,16 @@ const TerminalComponent: React.FC<TerminalProps> = ({
 
   useEffect(() => {
     if (!isVisible || !fitAddonRef.current) return;
-    const timer = setTimeout(() => {
+    // Fit twice: once after initial layout (100ms) and again after layout settles
+    // (350ms) to handle race conditions during split operations where the container
+    // dimensions may not be final on the first pass.
+    const timer1 = setTimeout(() => {
       safeFit({ requireVisible: true });
     }, 100);
-    return () => clearTimeout(timer);
+    const timer2 = setTimeout(() => {
+      safeFit({ force: true, requireVisible: true });
+    }, 350);
+    return () => { clearTimeout(timer1); clearTimeout(timer2); };
   }, [inWorkspace, isVisible]);
 
   // When search bar opens/closes, re-fit terminal and maintain scroll position
@@ -1398,6 +1430,10 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   const handleRetry = () => {
     if (!termRef.current) return;
     cleanupSession();
+    // Reset terminal state: disable mouse tracking modes and clear screen so
+    // stale SGR mouse sequences don't leak into the new session as text input.
+    termRef.current.write('\x1b[?1000l\x1b[?1002l\x1b[?1003l\x1b[?1006l');
+    termRef.current.reset();
     auth.resetForRetry();
     terminalDataCapturedRef.current = false;
     hasRunStartupCommandRef.current = false;
@@ -1980,7 +2016,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
         >
           <div
             ref={containerRef}
-            className="absolute inset-x-0 bottom-0"
+            className="xterm-container absolute inset-x-0 bottom-0"
             style={{
               top: isSearchOpen ? "64px" : "30px",
               paddingLeft: 6,

components/TerminalLayer.tsx

@@ -14,12 +14,15 @@ import { KeyBinding, TerminalSettings } from '../domain/models';
 import {
   clearHostFontFamilyOverride,
   clearHostFontSizeOverride,
+  clearHostFontWeightOverride,
   clearHostThemeOverride,
   hasHostFontFamilyOverride,
   hasHostFontSizeOverride,
+  hasHostFontWeightOverride,
   hasHostThemeOverride,
   resolveHostTerminalFontFamilyId,
   resolveHostTerminalFontSize,
+  resolveHostTerminalFontWeight,
   resolveHostTerminalThemeId,
 } from '../domain/terminalAppearance';
 import { cn, normalizeLineEndings } from '../lib/utils';
@@ -29,7 +32,8 @@ import { useStoredNumber } from '../application/state/useStoredNumber';
 import { STORAGE_KEY_SIDE_PANEL_WIDTH } from '../infrastructure/config/storageKeys';
 import { buildCacheKey } from '../application/state/sftp/sharedRemoteHostCache';
 import type { DropEntry } from '../lib/sftpFileUtils';
-import { Host, Identity, KnownHost, SSHKey, Snippet, TerminalSession, TerminalTheme, Workspace, WorkspaceNode } from '../types';
+import { GroupConfig, Host, Identity, KnownHost, SSHKey, Snippet, TerminalSession, TerminalTheme, Workspace, WorkspaceNode } from '../types';
+import { resolveGroupDefaults, applyGroupDefaults } from '../domain/groupConfig';
 import { DistroAvatar } from './DistroAvatar';
 import Terminal from './Terminal';
 import { SftpSidePanel } from './SftpSidePanel';
@@ -338,6 +342,7 @@ AIChatPanelsHost.displayName = 'AIChatPanelsHost';
 
 interface TerminalLayerProps {
   hosts: Host[];
+  groupConfigs: GroupConfig[];
   keys: SSHKey[];
   identities: Identity[];
   snippets: Snippet[];
@@ -356,6 +361,7 @@ interface TerminalLayerProps {
   onUpdateTerminalThemeId?: (themeId: string) => void;
   onUpdateTerminalFontFamilyId?: (fontFamilyId: string) => void;
   onUpdateTerminalFontSize?: (fontSize: number) => void;
+  onUpdateTerminalFontWeight?: (fontWeight: number) => void;
   onCloseSession: (sessionId: string, e?: React.MouseEvent) => void;
   onUpdateSessionStatus: (sessionId: string, status: TerminalSession['status']) => void;
   onUpdateHostDistro: (hostId: string, distro: string) => void;
@@ -391,6 +397,7 @@ interface TerminalLayerProps {
 
 const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
   hosts,
+  groupConfigs,
   keys,
   identities,
   snippets,
@@ -409,6 +416,7 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
   onUpdateTerminalThemeId,
   onUpdateTerminalFontFamilyId,
   onUpdateTerminalFontSize,
+  onUpdateTerminalFontWeight,
   onCloseSession,
   onUpdateSessionStatus,
   onUpdateHostDistro,
@@ -770,8 +778,14 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
   const sessionHostsMap = useMemo(() => {
     const map = new Map<string, Host>();
     for (const session of sessions) {
-      const existingHost = hostMap.get(session.hostId);
-      if (existingHost) {
+      const rawHost = hostMap.get(session.hostId);
+      if (rawHost) {
+        // Apply group config defaults so Terminal sees the merged host
+        const groupDefaults = rawHost.group
+          ? resolveGroupDefaults(rawHost.group, groupConfigs)
+          : {};
+        const existingHost = applyGroupDefaults(rawHost, groupDefaults);
+
         const protocol = session.protocol ?? existingHost.protocol;
         const port = session.port ?? existingHost.port;
         const moshEnabled = session.moshEnabled ?? existingHost.moshEnabled;
@@ -804,11 +818,15 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
           protocol: session.protocol ?? 'local' as const,
           moshEnabled: session.moshEnabled,
           charset: session.charset,
+          localShell: session.localShell,
+          localShellArgs: session.localShellArgs,
+          localShellName: session.localShellName,
+          localShellIcon: session.localShellIcon,
         });
       }
     }
     return map;
-  }, [sessions, hostMap]);
+  }, [sessions, hostMap, groupConfigs]);
   const sessionChainHostsMap = useMemo(() => {
     const map = new Map<string, Host[]>();
     for (const session of sessions) {
@@ -817,12 +835,19 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
       map.set(
         session.id,
         host.hostChain.hostIds
-          .map((hostId) => hostMap.get(hostId))
+          .map((hostId) => {
+            const rawChainHost = hostMap.get(hostId);
+            if (!rawChainHost) return undefined;
+            const chainGroupDefaults = rawChainHost.group
+              ? resolveGroupDefaults(rawChainHost.group, groupConfigs)
+              : {};
+            return applyGroupDefaults(rawChainHost, chainGroupDefaults);
+          })
           .filter((value): value is Host => Boolean(value)),
       );
     }
     return map;
-  }, [sessions, sessionHostsMap, hostMap]);
+  }, [sessions, sessionHostsMap, hostMap, groupConfigs]);
 
   const validTerminalTabIds = useMemo(() => {
     const ids = new Set<string>();
@@ -1354,6 +1379,13 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
   const isFocusedHostLocal = useMemo(() => {
     return focusedHost?.protocol === 'local' || !!focusedHost?.id?.startsWith('local-');
   }, [focusedHost]);
+  // Hosts not in the persisted hostMap (e.g. quick-connect) are ephemeral —
+  // sidebar appearance changes should update global settings, not per-host overrides.
+  const isFocusedHostEphemeral = useMemo(() => {
+    if (isFocusedHostLocal) return true;
+    if (!focusedHost) return true;
+    return !hostMap.has(focusedHost.id);
+  }, [focusedHost, isFocusedHostLocal, hostMap]);
   const previewTargetSessionId = activeWorkspace?.focusedSessionId ?? activeSession?.id ?? null;
   const activeThemePreviewId = themePreview.targetSessionId === previewTargetSessionId
     ? themePreview.themeId
@@ -1366,9 +1398,11 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
   const focusedThemeOverridden = hasHostThemeOverride(focusedHost);
   const focusedFontFamilyOverridden = hasHostFontFamilyOverride(focusedHost);
   const focusedFontSizeOverridden = hasHostFontSizeOverride(focusedHost);
+  const focusedFontWeight = resolveHostTerminalFontWeight(focusedHost, terminalSettings?.fontWeight ?? 400);
+  const focusedFontWeightOverridden = hasHostFontWeightOverride(focusedHost);
   const activeTopTabsThemeId = activeSidePanelTab === 'theme' && previewTargetSessionId
     ? (activeThemePreviewId ?? focusedThemeId)
-    : null;
+    : (isVisible ? focusedThemeId : null);
   const appliedPreviewSessionRef = useRef<string | null>(null);
   const customThemes = useCustomThemes();
   const applyTerminalPreviewVars = useCallback((sessionId: string | null, themeId: string | null) => {
@@ -1498,14 +1532,14 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
     }
     themeCommitTimerRef.current = setTimeout(() => {
       startTransition(() => {
-        if (isFocusedHostLocal) {
+        if (isFocusedHostEphemeral) {
           onUpdateTerminalThemeId?.(themeId);
           return;
         }
         onUpdateHost({ ...focusedHost, theme: themeId, themeOverride: true });
       });
     }, 160);
-  }, [applyTerminalPreviewVars, applyTopTabsPreviewVars, focusedHost, focusedThemeId, isFocusedHostLocal, onUpdateTerminalThemeId, onUpdateHost, previewTargetSessionId]);
+  }, [applyTerminalPreviewVars, applyTopTabsPreviewVars, focusedHost, focusedThemeId, isFocusedHostEphemeral, onUpdateTerminalThemeId, onUpdateHost, previewTargetSessionId]);
 
   const handleThemeResetForFocusedSession = useCallback(() => {
     if (themeCommitTimerRef.current) {
@@ -1513,41 +1547,64 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
     }
     clearTerminalPreviewVars(previewTargetSessionId);
     setThemePreview({ targetSessionId: null, themeId: null });
-    if (!focusedHost || isFocusedHostLocal) return;
+    if (!focusedHost || isFocusedHostEphemeral) return;
     onUpdateHost(clearHostThemeOverride(focusedHost));
-  }, [focusedHost, isFocusedHostLocal, onUpdateHost, previewTargetSessionId]);
+  }, [focusedHost, isFocusedHostEphemeral, onUpdateHost, previewTargetSessionId]);
 
   const handleFontFamilyChangeForFocusedSession = useCallback((fontFamilyId: string) => {
     if (!focusedHost || fontFamilyId === focusedFontFamilyId) return;
     startTransition(() => {
-      if (isFocusedHostLocal) {
+      if (isFocusedHostEphemeral) {
         onUpdateTerminalFontFamilyId?.(fontFamilyId);
         return;
       }
       onUpdateHost({ ...focusedHost, fontFamily: fontFamilyId, fontFamilyOverride: true });
     });
-  }, [focusedHost, focusedFontFamilyId, isFocusedHostLocal, onUpdateTerminalFontFamilyId, onUpdateHost]);
+  }, [focusedHost, focusedFontFamilyId, isFocusedHostEphemeral, onUpdateTerminalFontFamilyId, onUpdateHost]);
 
   const handleFontFamilyResetForFocusedSession = useCallback(() => {
-    if (!focusedHost || isFocusedHostLocal) return;
+    if (!focusedHost || isFocusedHostEphemeral) return;
     onUpdateHost(clearHostFontFamilyOverride(focusedHost));
-  }, [focusedHost, isFocusedHostLocal, onUpdateHost]);
+  }, [focusedHost, isFocusedHostEphemeral, onUpdateHost]);
 
   const handleFontSizeChangeForFocusedSession = useCallback((newFontSize: number) => {
     if (!focusedHost || newFontSize === focusedFontSize) return;
     startTransition(() => {
-      if (isFocusedHostLocal) {
+      if (isFocusedHostEphemeral) {
         onUpdateTerminalFontSize?.(newFontSize);
         return;
       }
       onUpdateHost({ ...focusedHost, fontSize: newFontSize, fontSizeOverride: true });
     });
-  }, [focusedHost, focusedFontSize, isFocusedHostLocal, onUpdateTerminalFontSize, onUpdateHost]);
+  }, [focusedHost, focusedFontSize, isFocusedHostEphemeral, onUpdateTerminalFontSize, onUpdateHost]);
 
   const handleFontSizeResetForFocusedSession = useCallback(() => {
-    if (!focusedHost || isFocusedHostLocal) return;
+    if (!focusedHost || isFocusedHostEphemeral) return;
     onUpdateHost(clearHostFontSizeOverride(focusedHost));
-  }, [focusedHost, isFocusedHostLocal, onUpdateHost]);
+  }, [focusedHost, isFocusedHostEphemeral, onUpdateHost]);
+
+  const handleFontWeightChangeForFocusedSession = useCallback((newFontWeight: number) => {
+    if (!focusedHost || newFontWeight === focusedFontWeight) return;
+    startTransition(() => {
+      if (isFocusedHostEphemeral) {
+        onUpdateTerminalFontWeight?.(newFontWeight);
+        return;
+      }
+      // Prefer raw (un-merged) host to avoid flattening group defaults
+      const rawHost = hostMap.get(focusedHost.id);
+      if (rawHost) {
+        onUpdateHost({ ...rawHost, fontWeight: newFontWeight, fontWeightOverride: true });
+      }
+    });
+  }, [focusedHost, focusedFontWeight, isFocusedHostEphemeral, onUpdateTerminalFontWeight, onUpdateHost, hostMap]);
+
+  const handleFontWeightResetForFocusedSession = useCallback(() => {
+    if (!focusedHost || isFocusedHostEphemeral) return;
+    const rawHost = hostMap.get(focusedHost.id);
+    if (rawHost) {
+      onUpdateHost(clearHostFontWeightOverride(rawHost));
+    }
+  }, [focusedHost, isFocusedHostEphemeral, onUpdateHost, hostMap]);
 
   // Keep MCP/ACP approval IPC listener alive for the entire terminal lifecycle.
   // Must live here (TerminalLayer), not inside the AI panel subtree, so closing
@@ -2019,15 +2076,19 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
                         currentFontFamilyId={focusedFontFamilyId}
                         globalFontFamilyId={terminalFontFamilyId}
                         currentFontSize={focusedFontSize}
+                        currentFontWeight={focusedFontWeight}
                         canResetTheme={focusedThemeOverridden}
                         canResetFontFamily={focusedFontFamilyOverridden}
                         canResetFontSize={focusedFontSizeOverridden}
+                        canResetFontWeight={focusedFontWeightOverridden}
                         onThemeChange={handleThemeChangeForFocusedSession}
                         onThemeReset={handleThemeResetForFocusedSession}
                         onFontFamilyChange={handleFontFamilyChangeForFocusedSession}
                         onFontFamilyReset={handleFontFamilyResetForFocusedSession}
                         onFontSizeChange={handleFontSizeChangeForFocusedSession}
                         onFontSizeReset={handleFontSizeResetForFocusedSession}
+                        onFontWeightChange={handleFontWeightChangeForFocusedSession}
+                        onFontWeightReset={handleFontWeightResetForFocusedSession}
                         previewColors={resolvedPreviewTheme.colors}
                       />
                     </div>

components/TextEditorModal.tsx

@@ -20,6 +20,7 @@ loader.config({ paths: { vs: monacoBasePath } });
 
 import { useI18n } from '../application/i18n/I18nProvider';
 import { useClipboardBackend } from '../application/state/useClipboardBackend';
+import { HotkeyScheme, KeyBinding, matchesKeyBinding } from '../domain/models';
 import { getLanguageId, getLanguageName, getSupportedLanguages } from '../lib/sftpFileUtils';
 import { Button } from './ui/button';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from './ui/dialog';
@@ -34,6 +35,8 @@ interface TextEditorModalProps {
   onSave: (content: string) => Promise<void>;
   editorWordWrap: boolean;
   onToggleWordWrap: () => void;
+  hotkeyScheme: HotkeyScheme;
+  keyBindings: KeyBinding[];
 }
 
 // Map our language IDs to Monaco language IDs
@@ -122,12 +125,38 @@ const hslToHex = (hslString: string): string => {
   return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 };
 
-// Get background color from CSS variable
-const getBackgroundColor = (): string => {
-  const bgValue = getComputedStyle(document.documentElement)
-    .getPropertyValue('--background')
+// Read a CSS custom-property and convert from HSL to hex
+const getCssColor = (varName: string, fallback: string): string => {
+  const value = getComputedStyle(document.documentElement)
+    .getPropertyValue(varName)
     .trim();
-  return bgValue ? hslToHex(bgValue) : '#1e1e1e';
+  return value ? hslToHex(value) : fallback;
+};
+
+interface EditorColors {
+  bg: string;
+  fg: string;
+  primary: string;
+  card: string;
+  mutedFg: string;
+  border: string;
+}
+
+/** Read all UI CSS variables that matter for the Monaco theme. */
+const getEditorColors = (isDark: boolean): EditorColors => ({
+  bg: getCssColor('--background', isDark ? '#1e1e1e' : '#ffffff'),
+  fg: getCssColor('--foreground', isDark ? '#d4d4d4' : '#1e1e1e'),
+  primary: getCssColor('--primary', isDark ? '#569cd6' : '#0078d4'),
+  card: getCssColor('--card', isDark ? '#252526' : '#f3f3f3'),
+  mutedFg: getCssColor('--muted-foreground', isDark ? '#858585' : '#858585'),
+  border: getCssColor('--border', isDark ? '#3c3c3c' : '#d4d4d4'),
+});
+
+/** Build a fingerprint string so we can detect immersive-mode color changes cheaply. */
+const getThemeSignal = (): string => {
+  const root = document.documentElement;
+  return root.dataset.immersiveTheme
+    ?? getComputedStyle(root).getPropertyValue('--background').trim();
 };
 
 export const TextEditorModal: React.FC<TextEditorModalProps> = ({
@@ -138,6 +167,8 @@ export const TextEditorModal: React.FC<TextEditorModalProps> = ({
   onSave,
   editorWordWrap,
   onToggleWordWrap,
+  hotkeyScheme,
+  keyBindings,
 }) => {
   const { t } = useI18n();
   const { readClipboardText: readClipboardTextFromBridge } = useClipboardBackend();
@@ -158,49 +189,64 @@ export const TextEditorModal: React.FC<TextEditorModalProps> = ({
     document.documentElement.classList.contains('dark')
   );
 
-  // Track background color for custom theme
-  const [bgColor, setBgColor] = useState(() => getBackgroundColor());
+  // Track a signal that changes whenever immersive-mode or base theme colors change
+  const [themeSignal, setThemeSignal] = useState(() => getThemeSignal());
 
   // Custom theme name
   const customThemeName = isDarkTheme ? 'netcatty-dark' : 'netcatty-light';
 
-  // Define and update custom Monaco themes based on UI background color
+  // Define and update custom Monaco themes — syncs with immersive-mode / base UI colors
   useEffect(() => {
     if (!monaco) return;
 
-    // Define dark theme with custom background
+    const colors = getEditorColors(isDarkTheme);
+
+    const themeColors: Record<string, string> = {
+      'editor.background': colors.bg,
+      'editor.foreground': colors.fg,
+      'editorCursor.foreground': colors.primary,
+      'editor.selectionBackground': colors.primary + '40',
+      'editor.inactiveSelectionBackground': colors.primary + '25',
+      'editorLineNumber.foreground': colors.mutedFg,
+      'editorLineNumber.activeForeground': colors.fg,
+      'editor.lineHighlightBackground': colors.fg + '08',
+      'editorWidget.background': colors.card,
+      'editorWidget.foreground': colors.fg,
+      'editorWidget.border': colors.border,
+      'input.background': colors.card,
+      'input.foreground': colors.fg,
+      'input.border': colors.border,
+    };
+
     monaco.editor.defineTheme('netcatty-dark', {
       base: 'vs-dark',
       inherit: true,
       rules: [],
-      colors: {
-        'editor.background': bgColor,
-      },
+      colors: themeColors,
     });
 
-    // Define light theme with custom background
     monaco.editor.defineTheme('netcatty-light', {
       base: 'vs',
       inherit: true,
       rules: [],
-      colors: {
-        'editor.background': bgColor,
-      },
+      colors: themeColors,
     });
 
-    // Apply the current theme
     monaco.editor.setTheme(customThemeName);
-  }, [monaco, isDarkTheme, bgColor, customThemeName]);
+  }, [monaco, isDarkTheme, themeSignal, customThemeName]);
 
-  // Listen for theme changes via MutationObserver on <html> class and style
+  // Listen for theme changes via MutationObserver on <html> class, style, and immersive data attr
   useEffect(() => {
     const root = document.documentElement;
     const updateTheme = () => {
       setIsDarkTheme(root.classList.contains('dark'));
-      setBgColor(getBackgroundColor());
+      setThemeSignal(getThemeSignal());
     };
     const observer = new MutationObserver(updateTheme);
-    observer.observe(root, { attributes: true, attributeFilter: ['class', 'style'] });
+    observer.observe(root, {
+      attributes: true,
+      attributeFilter: ['class', 'style', 'data-immersive-theme'],
+    });
     return () => observer.disconnect();
   }, []);
 
@@ -216,6 +262,11 @@ export const TextEditorModal: React.FC<TextEditorModalProps> = ({
     setHasChanges(content !== initialContent);
   }, [content, initialContent]);
 
+  const closeTabBinding = useMemo(
+    () => keyBindings.find((binding) => binding.action === 'closeTab'),
+    [keyBindings],
+  );
+
   const handleSave = useCallback(async () => {
     if (saving) return;
     setSaving(true);
@@ -347,8 +398,33 @@ export const TextEditorModal: React.FC<TextEditorModalProps> = ({
       }
       void handlePasteRef.current();
     });
+
+    editor.focus();
   }, []);
 
+  useEffect(() => {
+    if (!open) return;
+
+    const frame = window.requestAnimationFrame(() => {
+      editorRef.current?.focus();
+    });
+
+    return () => window.cancelAnimationFrame(frame);
+  }, [open]);
+
+  const handleDialogKeyDownCapture = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (hotkeyScheme === 'disabled' || !closeTabBinding) return;
+
+    const isMac = hotkeyScheme === 'mac';
+    const keyStr = isMac ? closeTabBinding.mac : closeTabBinding.pc;
+    if (!matchesKeyBinding(e.nativeEvent, keyStr, isMac)) return;
+
+    e.preventDefault();
+    e.stopPropagation();
+    e.nativeEvent.stopPropagation();
+    handleClose();
+  }, [closeTabBinding, handleClose, hotkeyScheme]);
+
   // Trigger search dialog
   const handleSearch = useCallback(() => {
     if (editorRef.current) {
@@ -370,7 +446,12 @@ export const TextEditorModal: React.FC<TextEditorModalProps> = ({
 
   return (
     <Dialog open={open} onOpenChange={(isOpen) => !isOpen && handleClose()}>
-      <DialogContent className="max-w-5xl h-[85vh] flex flex-col p-0 gap-0" hideCloseButton>
+      <DialogContent
+        className="max-w-5xl h-[85vh] flex flex-col p-0 gap-0"
+        hideCloseButton
+        data-hotkey-close-tab="true"
+        onKeyDownCapture={handleDialogKeyDownCapture}
+      >
         {/* Header */}
         <DialogHeader className="px-4 py-3 border-b border-border/60 flex-shrink-0">
           <div className="flex items-center justify-between gap-4">

components/TopTabs.tsx

@@ -10,6 +10,7 @@ import { getEffectiveHostDistro } from '../domain/host';
 import { cn } from '../lib/utils';
 import { Host, TerminalSession, Workspace } from '../types';
 import { DISTRO_LOGOS, DISTRO_COLORS } from './DistroAvatar';
+import { getShellIconPath, isMonochromeShellIcon } from '../lib/useDiscoveredShells';
 import { Button } from './ui/button';
 import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from './ui/context-menu';
 import { SyncStatusButton } from './SyncStatusButton';
@@ -54,7 +55,7 @@ const localOsId = (() => {
 })();
 
 // Lightweight OS/distro icon for session tabs — matches DistroAvatar "sm" style
-const SessionTabIcon: React.FC<{ host: Host | undefined; isActive: boolean; protocol?: string }> = memo(({ host, isActive, protocol }) => {
+const SessionTabIcon: React.FC<{ host: Host | undefined; isActive: boolean; protocol?: string; shellIcon?: string }> = memo(({ host, isActive, protocol, shellIcon }) => {
   const boxBase = "shrink-0 h-4 w-4 rounded flex items-center justify-center";
   const iconSize = "h-2.5 w-2.5";
   const fallbackStyle = { color: isActive ? 'var(--top-tabs-accent, hsl(var(--accent)))' : 'var(--top-tabs-muted, hsl(var(--muted-foreground)))' };
@@ -68,8 +69,19 @@ const SessionTabIcon: React.FC<{ host: Host | undefined; isActive: boolean; prot
     );
   }
 
-  // Local protocol → OS-specific icon (protocol may be undefined for local sessions)
+  // Local protocol → shell-specific icon if available, else OS-specific icon
   if (protocol === 'local' || host?.protocol === 'local' || (!protocol && !host)) {
+    // Use shell icon from discovery when available
+    const iconId = shellIcon || host?.localShellIcon;
+    if (iconId) {
+      return (
+        <img
+          src={getShellIconPath(iconId)}
+          alt={iconId}
+          className={cn("shrink-0 h-4 w-4 object-contain", isMonochromeShellIcon(iconId) && "dark:invert")}
+        />
+      );
+    }
     const logo = DISTRO_LOGOS[localOsId];
     const bg = DISTRO_COLORS[localOsId] || DISTRO_COLORS.default;
     if (logo) {
@@ -522,7 +534,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
                 {activeTabId === session.id && (
                   <div
                     className="absolute top-0 left-0 right-0 h-[2px]"
-                    style={{ backgroundColor: 'hsl(var(--primary))' }}
+                    style={{ backgroundColor: 'var(--top-tabs-accent, hsl(var(--accent)))' }}
                   />
                 )}
                 {/* Drop indicator line - before */}
@@ -540,7 +552,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
                   />
                 )}
                 <div className="flex items-center gap-2 min-w-0 flex-1">
-                  <SessionTabIcon host={hostMap.get(session.hostId)} isActive={activeTabId === session.id} protocol={session.protocol} />
+                  <SessionTabIcon host={hostMap.get(session.hostId)} isActive={activeTabId === session.id} protocol={session.protocol} shellIcon={session.localShellIcon} />
                   <span className="truncate">{session.hostLabel}</span>
                   <div className="flex-shrink-0">{sessionStatusDot(session.status, hasActivity)}</div>
                 </div>
@@ -621,7 +633,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
                 {isActive && (
                   <div
                     className="absolute top-0 left-0 right-0 h-[2px]"
-                    style={{ backgroundColor: 'hsl(var(--primary))' }}
+                    style={{ backgroundColor: 'var(--top-tabs-accent, hsl(var(--accent)))' }}
                   />
                 )}
                 {/* Drop indicator line - before */}

components/TrayPanel.tsx

@@ -10,6 +10,7 @@ import { I18nProvider } from "../application/i18n/I18nProvider";
 import { useSettingsState } from "../application/state/useSettingsState";
 import { useTrayPanelBackend } from "../application/state/useTrayPanelBackend";
 import { useActiveTabId } from "../application/state/activeTabStore";
+import { resolveGroupDefaults, applyGroupDefaults } from "../domain/groupConfig";
 import { X, Maximize2, ChevronRight, ChevronDown, Power } from "lucide-react";
 import { AppLogo } from "./AppLogo";
 
@@ -116,7 +117,7 @@ const TrayPanelContent: React.FC = () => {
     onTrayPanelMenuData,
   } = useTrayPanelBackend();
 
-  const { hosts, keys, identities } = useVaultState();
+  const { hosts, keys, identities, groupConfigs } = useVaultState();
   useSessionState();
   const { rules: portForwardingRules, startTunnel, stopTunnel } = usePortForwardingState();
   const activeTabId = useActiveTabId();
@@ -326,14 +327,17 @@ const TrayPanelContent: React.FC = () => {
                     disabled={isConnecting}
                     title={label}
                     onClick={() => {
-                      const host = rule.hostId ? hosts.find((h) => h.id === rule.hostId) : undefined;
-                      if (!host) {
+                      const rawHost = rule.hostId ? hosts.find((h) => h.id === rule.hostId) : undefined;
+                      if (!rawHost) {
                         toast.error(t("pf.error.hostNotFound"));
                         return;
                       }
                       if (isActive) {
                         void stopTunnel(rule.id);
                       } else {
+                        const host = rawHost.group
+                          ? applyGroupDefaults(rawHost, resolveGroupDefaults(rawHost.group, groupConfigs))
+                          : rawHost;
                         void startTunnel(rule, host, hosts, keys, identities, (status, error) => {
                           if (status === "error" && error) toast.error(error);
                         }, rule.autoStart);

components/settings/tabs/SettingsAppearanceTab.tsx

@@ -7,6 +7,8 @@ import { SUPPORTED_UI_LOCALES } from "../../../infrastructure/config/i18n";
 import { cn } from "../../../lib/utils";
 import { SectionHeader, SettingsTabContent, SettingRow, Toggle, Select } from "../settings-ui";
 import { FontSelect } from "../FontSelect";
+import { STORAGE_KEY_SHOW_RECENT_HOSTS } from "../../../infrastructure/config/storageKeys";
+import { useStoredBoolean } from "../../../application/state/useStoredBoolean";
 
 export default function SettingsAppearanceTab(props: {
   theme: "dark" | "light" | "system";
@@ -25,8 +27,6 @@ export default function SettingsAppearanceTab(props: {
   setUiLanguage: (language: string) => void;
   customCSS: string;
   setCustomCSS: (css: string) => void;
-  isImmersive?: boolean;
-  onToggleImmersive?: () => void;
 }) {
   const { t } = useI18n();
   const availableUIFonts = useAvailableUIFonts();
@@ -47,10 +47,13 @@ export default function SettingsAppearanceTab(props: {
     setUiLanguage,
     customCSS,
     setCustomCSS,
-    isImmersive,
-    onToggleImmersive,
   } = props;
 
+  const [showRecentHosts, setShowRecentHosts] = useStoredBoolean(
+    STORAGE_KEY_SHOW_RECENT_HOSTS,
+    true,
+  );
+
   const getHslStyle = useCallback((hsl: string) => ({ backgroundColor: `hsl(${hsl})` }), []);
 
   const hexToHsl = useCallback((hex: string) => {
@@ -258,6 +261,16 @@ export default function SettingsAppearanceTab(props: {
         </SettingRow>
       </div>
 
+      <SectionHeader title={t("settings.vault.title")} />
+      <div className="space-y-0 divide-y divide-border rounded-lg border bg-card px-4">
+        <SettingRow
+          label={t('settings.vault.showRecentHosts')}
+          description={t('settings.vault.showRecentHostsDesc')}
+        >
+          <Toggle checked={showRecentHosts} onChange={setShowRecentHosts} />
+        </SettingRow>
+      </div>
+
       <SectionHeader title={t("settings.appearance.customCss")} />
       <div className="space-y-2">
         <p className="text-xs text-muted-foreground">

components/settings/tabs/SettingsTerminalTab.tsx

@@ -7,14 +7,16 @@ import type {
   TerminalEmulationType,
   TerminalSettings,
 } from "../../../domain/models";
-import { DEFAULT_KEYWORD_HIGHLIGHT_RULES } from "../../../domain/models";
+import { DEFAULT_KEYWORD_HIGHLIGHT_RULES, type KeywordHighlightRule } from "../../../domain/models";
 import { useI18n } from "../../../application/i18n/I18nProvider";
 import { MAX_FONT_SIZE, MIN_FONT_SIZE, type TerminalFont } from "../../../infrastructure/config/fonts";
 import { TERMINAL_THEMES } from "../../../infrastructure/config/terminalThemes";
 import { customThemeStore, useCustomThemes } from "../../../application/state/customThemeStore";
 import { parseItermcolors } from "../../../infrastructure/parsers/itermcolorsParser";
 import { cn } from "../../../lib/utils";
+import { useDiscoveredShells } from "../../../lib/useDiscoveredShells";
 import { Button } from "../../ui/button";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "../../ui/dialog";
 import { Input } from "../../ui/input";
 import { Label } from "../../ui/label";
 import { SectionHeader, Select, SettingsTabContent, SettingRow, Toggle } from "../settings-ui";
@@ -23,6 +25,193 @@ import { TerminalFontSelect } from "../TerminalFontSelect";
 import { CustomThemeModal } from "../../terminal/CustomThemeModal";
 import type { TerminalTheme } from "../../../domain/models";
 
+// Keyword highlight rules editor for global settings
+const DEFAULT_NEW_RULE_COLOR = '#F87171';
+
+const AddCustomRuleDialog: React.FC<{
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  editRule?: KeywordHighlightRule | null;
+  onAdd: (rule: KeywordHighlightRule) => void;
+}> = ({ open, onOpenChange, editRule, onAdd }) => {
+  const { t } = useI18n();
+  const [label, setLabel] = useState('');
+  const [pattern, setPattern] = useState('');
+  const [color, setColor] = useState(DEFAULT_NEW_RULE_COLOR);
+  const [patternError, setPatternError] = useState<string | null>(null);
+
+  const reset = () => { setLabel(''); setPattern(''); setColor(DEFAULT_NEW_RULE_COLOR); setPatternError(null); };
+
+  // Populate form when editing
+  useEffect(() => {
+    if (open && editRule) {
+      setLabel(editRule.label);
+      setPattern(editRule.patterns[0] || '');
+      setColor(editRule.color);
+      setPatternError(null);
+    } else if (!open) {
+      reset();
+    }
+  }, [open, editRule]);
+
+  const handleSubmit = () => {
+    if (!label.trim() || !pattern.trim()) return;
+    try { new RegExp(pattern, 'gi'); } catch {
+      setPatternError(t('settings.terminal.keywordHighlight.invalidPattern'));
+      return;
+    }
+    // When editing, replace only the first pattern and keep any additional ones
+    const patterns = editRule
+      ? [pattern, ...editRule.patterns.slice(1)]
+      : [pattern];
+    onAdd({ id: editRule?.id ?? crypto.randomUUID(), label: label.trim(), patterns, color, enabled: editRule?.enabled ?? true });
+    reset();
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => { if (!v) reset(); onOpenChange(v); }}>
+      <DialogContent className="sm:max-w-[400px]">
+        <DialogHeader>
+          <DialogTitle>{editRule ? t('settings.terminal.keywordHighlight.editCustom') : t('settings.terminal.keywordHighlight.addCustom')}</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-3 py-2">
+          <div className="space-y-1.5">
+            <Label className="text-xs">{t('settings.terminal.keywordHighlight.labelField')}</Label>
+            <div className="flex gap-2">
+              <Input
+                placeholder={t('settings.terminal.keywordHighlight.labelPlaceholder')}
+                value={label}
+                onChange={(e) => setLabel(e.target.value)}
+                className="flex-1"
+              />
+              <label className="relative flex-shrink-0">
+                <input type="color" value={color} onChange={(e) => setColor(e.target.value)} className="sr-only" />
+                <span className="block w-9 h-9 rounded-md cursor-pointer border border-border/50 hover:border-border" style={{ backgroundColor: color }} />
+              </label>
+            </div>
+          </div>
+          <div className="space-y-1.5">
+            <Label className="text-xs">{t('settings.terminal.keywordHighlight.patternField')}</Label>
+            <Input
+              placeholder={t('settings.terminal.keywordHighlight.patternPlaceholder')}
+              value={pattern}
+              onChange={(e) => { setPattern(e.target.value); if (patternError) setPatternError(null); }}
+              onKeyDown={(e) => { if (e.key === 'Enter') handleSubmit(); }}
+              className={cn("font-mono", patternError && "border-destructive")}
+            />
+            {patternError && <div className="text-xs text-destructive">{patternError}</div>}
+          </div>
+          {label.trim() && pattern.trim() && !patternError && (
+            <div className="flex items-center gap-2 p-2 rounded-md bg-muted/50">
+              <span className="text-xs text-muted-foreground">{t('settings.terminal.keywordHighlight.preview')}:</span>
+              <span className="text-sm font-medium" style={{ color }}>{label}</span>
+            </div>
+          )}
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => { reset(); onOpenChange(false); }}>{t('common.cancel')}</Button>
+          <Button onClick={handleSubmit} disabled={!label.trim() || !pattern.trim()}>{editRule ? t('common.save') : t('common.add')}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const KeywordHighlightRulesEditor: React.FC<{
+  rules: KeywordHighlightRule[];
+  onChange: (rules: KeywordHighlightRule[]) => void;
+}> = ({ rules, onChange }) => {
+  const { t } = useI18n();
+  const [addDialogOpen, setAddDialogOpen] = useState(false);
+  const [editingRule, setEditingRule] = useState<KeywordHighlightRule | null>(null);
+
+  const isBuiltIn = (id: string) => DEFAULT_KEYWORD_HIGHLIGHT_RULES.some((r) => r.id === id);
+
+  return (
+    <div className="space-y-2.5">
+      {rules.map((rule) => {
+        const custom = !isBuiltIn(rule.id);
+        return (
+          <div key={rule.id} className="flex items-center gap-2 group">
+            <div className="flex-1 min-w-0 flex items-center gap-1.5">
+              <span className={cn("text-sm truncate", !rule.enabled && "text-muted-foreground line-through")} style={rule.enabled ? { color: rule.color } : undefined}>
+                {rule.label}
+              </span>
+              {custom && (
+                <>
+                  <Pencil
+                    size={10}
+                    className="flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground cursor-pointer"
+                    onClick={() => { setEditingRule(rule); setAddDialogOpen(true); }}
+                  />
+                  <Trash2
+                    size={10}
+                    className="flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground cursor-pointer"
+                    onClick={() => onChange(rules.filter((r) => r.id !== rule.id))}
+                  />
+                </>
+              )}
+            </div>
+            <label className="relative flex-shrink-0">
+              <input
+                type="color"
+                value={rule.color}
+                onChange={(e) => onChange(rules.map((r) => r.id === rule.id ? { ...r, color: e.target.value } : r))}
+                className="sr-only"
+              />
+              <span
+                className="block w-8 h-5 rounded cursor-pointer border border-border/50 hover:border-border transition-colors"
+                style={{ backgroundColor: rule.color }}
+              />
+            </label>
+          </div>
+        );
+      })}
+
+      <div className="flex pt-2 mt-2 border-t border-border/50">
+        <Button
+          variant="ghost"
+          size="sm"
+          className="flex-1 text-muted-foreground hover:text-foreground"
+          onClick={() => setAddDialogOpen(true)}
+        >
+          <Plus size={14} className="mr-1.5" />
+          {t('settings.terminal.keywordHighlight.addCustom')}
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="flex-1 text-muted-foreground hover:text-foreground"
+          onClick={() => {
+            onChange(rules.map((rule) => {
+              const def = DEFAULT_KEYWORD_HIGHLIGHT_RULES.find((r) => r.id === rule.id);
+              return def ? { ...rule, color: def.color } : rule;
+            }));
+          }}
+        >
+          <RotateCcw size={14} className="mr-1.5" />
+          {t("settings.terminal.keywordHighlight.resetColors")}
+        </Button>
+      </div>
+
+      <AddCustomRuleDialog
+        open={addDialogOpen}
+        onOpenChange={(v) => { setAddDialogOpen(v); if (!v) setEditingRule(null); }}
+        editRule={editingRule}
+        onAdd={(rule) => {
+          if (editingRule) {
+            onChange(rules.map((r) => r.id === editingRule.id ? rule : r));
+          } else {
+            onChange([...rules, rule]);
+          }
+          setEditingRule(null);
+        }}
+      />
+    </div>
+  );
+};
+
 // Theme preview button component
 const ThemePreviewButton: React.FC<{
   theme: (typeof TERMINAL_THEMES)[0];
@@ -106,6 +295,20 @@ export default function SettingsTerminalTab(props: {
   const [defaultShell, setDefaultShell] = useState<string>("");
   const [shellValidation, setShellValidation] = useState<{ valid: boolean; message?: string } | null>(null);
   const [dirValidation, setDirValidation] = useState<{ valid: boolean; message?: string } | null>(null);
+
+  const discoveredShells = useDiscoveredShells();
+  const [showCustomShellInput, setShowCustomShellInput] = useState(() => {
+    if (!terminalSettings.localShell) return false;
+    return !discoveredShells.some(s => s.id === terminalSettings.localShell);
+  });
+  const [customShellModalOpen, setCustomShellModalOpen] = useState(false);
+  const [customShellDraft, setCustomShellDraft] = useState("");
+
+  // Update showCustomShellInput once discovered shells load
+  useEffect(() => {
+    if (!terminalSettings.localShell) return;
+    setShowCustomShellInput(!discoveredShells.some(s => s.id === terminalSettings.localShell));
+  }, [discoveredShells, terminalSettings.localShell]);
   const [themeModalOpen, setThemeModalOpen] = useState(false);
 
   // Subscribe to custom theme changes so editing in-place triggers re-render
@@ -210,7 +413,7 @@ export default function SettingsTerminalTab(props: {
     }
   }, []);
 
-  // Validate shell path when it changes
+  // Validate shell path when it changes (only for custom paths, not discovered shell ids)
   useEffect(() => {
     const bridge = (window as unknown as { netcatty?: NetcattyBridge }).netcatty;
     const shellPath = terminalSettings.localShell;
@@ -220,6 +423,12 @@ export default function SettingsTerminalTab(props: {
       return;
     }
 
+    // Skip validation for discovered shell ids — only validate custom paths
+    if (discoveredShells.some(s => s.id === shellPath)) {
+      setShellValidation(null);
+      return;
+    }
+
     if (!bridge?.validatePath) {
       setShellValidation(null);
       return;
@@ -240,7 +449,7 @@ export default function SettingsTerminalTab(props: {
     }, 300);
 
     return () => clearTimeout(timeoutId);
-  }, [terminalSettings.localShell, t]);
+  }, [terminalSettings.localShell, discoveredShells, t]);
 
   // Validate directory path when it changes
   useEffect(() => {
@@ -694,47 +903,10 @@ export default function SettingsTerminalTab(props: {
           />
         </div>
         {terminalSettings.keywordHighlightEnabled && (
-          <div className="space-y-2.5">
-            {terminalSettings.keywordHighlightRules.map((rule) => (
-              <div key={rule.id} className="flex items-center justify-between">
-                <span className="text-sm" style={{ color: rule.color }}>
-                  {rule.label}
-                </span>
-                <label className="relative">
-                  <input
-                    type="color"
-                    value={rule.color}
-                    onChange={(e) => {
-                      const newRules = terminalSettings.keywordHighlightRules.map((r) =>
-                        r.id === rule.id ? { ...r, color: e.target.value } : r,
-                      );
-                      updateTerminalSetting("keywordHighlightRules", newRules);
-                    }}
-                    className="sr-only"
-                  />
-                  <span
-                    className="block w-10 h-6 rounded-md cursor-pointer border border-border/50 hover:border-border transition-colors"
-                    style={{ backgroundColor: rule.color }}
-                  />
-                </label>
-              </div>
-            ))}
-            <Button
-              variant="ghost"
-              size="sm"
-              className="w-full mt-3 text-muted-foreground hover:text-foreground"
-              onClick={() => {
-                const resetRules = terminalSettings.keywordHighlightRules.map((rule) => {
-                  const defaultRule = DEFAULT_KEYWORD_HIGHLIGHT_RULES.find((r) => r.id === rule.id);
-                  return defaultRule ? { ...rule, color: defaultRule.color } : rule;
-                });
-                updateTerminalSetting("keywordHighlightRules", resetRules);
-              }}
-            >
-              <RotateCcw size={14} className="mr-2" />
-              {t("settings.terminal.keywordHighlight.resetColors")}
-            </Button>
-          </div>
+          <KeywordHighlightRulesEditor
+            rules={terminalSettings.keywordHighlightRules}
+            onChange={(rules) => updateTerminalSetting("keywordHighlightRules", rules)}
+          />
         )}
       </div>
 
@@ -745,24 +917,43 @@ export default function SettingsTerminalTab(props: {
           description={t("settings.terminal.localShell.shell.desc")}
         >
           <div className="flex flex-col gap-1 items-end">
-            <Input
-              value={terminalSettings.localShell}
-              placeholder={t("settings.terminal.localShell.shell.placeholder")}
-              onChange={(e) => updateTerminalSetting("localShell", e.target.value)}
-              className={cn(
-                "w-48",
-                shellValidation && !shellValidation.valid && "border-destructive focus-visible:ring-destructive"
-              )}
-            />
-            {defaultShell && !terminalSettings.localShell && (
-              <span className="text-xs text-muted-foreground">
-                {t("settings.terminal.localShell.shell.detected")}: {defaultShell}
+            <select
+              className="h-9 w-48 rounded-md border border-input bg-background px-3 text-sm"
+              value={
+                showCustomShellInput
+                  ? "__custom__"
+                  : terminalSettings.localShell || ""
+              }
+              onChange={(e) => {
+                const value = e.target.value;
+                if (value === "__custom__") {
+                  setCustomShellDraft(terminalSettings.localShell || "");
+                  setCustomShellModalOpen(true);
+                } else {
+                  setShowCustomShellInput(false);
+                  updateTerminalSetting("localShell", value);
+                }
+              }}
+            >
+              <option value="">
+                {t("settings.terminal.localShell.shell.default")}
+                {defaultShell ? ` (${defaultShell.split(/[/\\]/).pop()})` : ""}
+              </option>
+              {discoveredShells.map((shell) => (
+                <option key={shell.id} value={shell.id}>
+                  {shell.name}
+                </option>
+              ))}
+              <option value="__custom__">{t("settings.terminal.localShell.shell.custom")}</option>
+            </select>
+            {showCustomShellInput && (
+              <span className="text-xs text-muted-foreground truncate max-w-48">
+                {terminalSettings.localShell}
               </span>
             )}
-            {shellValidation && !shellValidation.valid && shellValidation.message && (
-              <span className="text-xs text-destructive flex items-center gap-1">
-                <AlertCircle size={12} />
-                {shellValidation.message}
+            {!showCustomShellInput && defaultShell && !terminalSettings.localShell && (
+              <span className="text-xs text-muted-foreground">
+                {t("settings.terminal.localShell.shell.detected")}: {defaultShell}
               </span>
             )}
           </div>
@@ -862,9 +1053,9 @@ export default function SettingsTerminalTab(props: {
             options={[
               { value: "auto", label: t("settings.terminal.rendering.auto") },
               { value: "webgl", label: "WebGL" },
-              { value: "canvas", label: "Canvas" },
+              { value: "dom", label: "DOM" },
             ]}
-            onChange={(v) => updateTerminalSetting("rendererType", v as "auto" | "webgl" | "canvas")}
+            onChange={(v) => updateTerminalSetting("rendererType", v as "auto" | "webgl" | "dom")}
             className="w-32"
           />
         </SettingRow>
@@ -919,6 +1110,73 @@ export default function SettingsTerminalTab(props: {
           />
         </SettingRow>
       </div>
+      {/* Custom Shell Modal */}
+      <Dialog open={customShellModalOpen} onOpenChange={setCustomShellModalOpen}>
+        <DialogContent className="sm:max-w-[480px]">
+          <DialogHeader>
+            <DialogTitle>{t("settings.terminal.localShell.shell.custom")}</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 py-2">
+            <div className="space-y-2">
+              <label className="text-sm font-medium">{t("settings.terminal.localShell.shell.customPath")}</label>
+              <Input
+                value={customShellDraft}
+                placeholder={t("settings.terminal.localShell.shell.placeholder")}
+                onChange={(e) => setCustomShellDraft(e.target.value)}
+                className="w-full"
+                autoFocus
+              />
+              {shellValidation && !shellValidation.valid && shellValidation.message && (
+                <span className="text-xs text-destructive flex items-center gap-1">
+                  <AlertCircle size={12} />
+                  {shellValidation.message}
+                </span>
+              )}
+              {shellValidation?.valid && (
+                <span className="text-xs text-emerald-600 dark:text-emerald-400 flex items-center gap-1">
+                  ✓ {t("settings.terminal.localShell.shell.pathValid")}
+                </span>
+              )}
+            </div>
+            <div className="space-y-1.5">
+              <label className="text-xs text-muted-foreground">{t("settings.terminal.localShell.shell.commonPaths")}</label>
+              <div className="flex flex-wrap gap-1.5">
+                {["/bin/bash", "/bin/zsh", "/usr/bin/fish", "/bin/sh", "powershell.exe", "pwsh.exe", "cmd.exe"].map((p) => (
+                  <button
+                    key={p}
+                    type="button"
+                    onClick={() => setCustomShellDraft(p)}
+                    className="text-xs px-2 py-1 rounded-md border border-border bg-muted/50 hover:bg-muted transition-colors"
+                  >
+                    {p}
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <button
+              type="button"
+              onClick={() => setCustomShellModalOpen(false)}
+              className="px-3 py-1.5 text-sm rounded-md border border-border hover:bg-muted transition-colors"
+            >
+              {t("common.cancel")}
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                updateTerminalSetting("localShell", customShellDraft);
+                setShowCustomShellInput(true);
+                setCustomShellModalOpen(false);
+              }}
+              disabled={!customShellDraft.trim()}
+              className="px-3 py-1.5 text-sm rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50"
+            >
+              {t("common.save")}
+            </button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </SettingsTabContent>
   );
 }

components/sftp/SftpOverlays.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import type { Host, SftpFileEntry } from "../../types";
 import type { FileOpenerType, SystemAppInfo } from "../../lib/sftpFileUtils";
 import type { useSftpState } from "../../application/state/useSftpState";
+import type { HotkeyScheme, KeyBinding } from "../../domain/models";
 import FileOpenerDialog from "../FileOpenerDialog";
 import TextEditorModal from "../TextEditorModal";
 import { SftpConflictDialog, SftpHostPicker, SftpPermissionsDialog } from "./index";
@@ -35,6 +36,8 @@ interface SftpOverlaysProps {
   handleSaveTextFile: (content: string) => Promise<void>;
   editorWordWrap: boolean;
   setEditorWordWrap: (enabled: boolean) => void;
+  hotkeyScheme: HotkeyScheme;
+  keyBindings: KeyBinding[];
   showFileOpenerDialog: boolean;
   setShowFileOpenerDialog: (open: boolean) => void;
   fileOpenerTarget: { file: SftpFileEntry; side: "left" | "right"; fullPath: string } | null;
@@ -69,6 +72,8 @@ export const SftpOverlays: React.FC<SftpOverlaysProps> = React.memo(({
   handleSaveTextFile,
   editorWordWrap,
   setEditorWordWrap,
+  hotkeyScheme,
+  keyBindings,
   showFileOpenerDialog,
   setShowFileOpenerDialog,
   fileOpenerTarget,
@@ -139,6 +144,8 @@ export const SftpOverlays: React.FC<SftpOverlaysProps> = React.memo(({
         onSave={handleSaveTextFile}
         editorWordWrap={editorWordWrap}
         onToggleWordWrap={() => setEditorWordWrap(!editorWordWrap)}
+        hotkeyScheme={hotkeyScheme}
+        keyBindings={keyBindings}
       />
 
       {/* File Opener Dialog */}

components/terminal/TerminalContextMenu.tsx

@@ -75,21 +75,26 @@ export const TerminalContextMenu: React.FC<TerminalContextMenuProps> = ({
   const splitVShortcut = getShortcut('split-vertical');
   const clearShortcut = getShortcut('clear-buffer');
 
-  const showContextMenu = rightClickBehavior === 'context-menu' && !isAlternateScreen;
-
+  // Handle right-click: intercept for paste/select-word unless Shift is held
+  // or rightClickBehavior is 'context-menu'. The ContextMenuTrigger stays always
+  // enabled so Shift+Right-Click opens the menu on the first click.
   const handleRightClick = useCallback(
     (e: React.MouseEvent) => {
       // In alternate screen (tmux, vim, etc.), let the terminal application
       // handle right-click natively to avoid conflicting menus
-      if (isAlternateScreen) return;
-
-      if (rightClickBehavior === 'paste') {
+      if (isAlternateScreen) {
         e.preventDefault();
-        e.stopPropagation();
+        return;
+      }
+
+      // Shift+Right-Click or context-menu mode: let Radix open the menu
+      if (e.shiftKey || rightClickBehavior === 'context-menu') return;
+
+      // Paste / select-word: intercept and prevent the context menu
+      e.preventDefault();
+      if (rightClickBehavior === 'paste') {
         onPaste?.();
       } else if (rightClickBehavior === 'select-word') {
-        e.preventDefault();
-        e.stopPropagation();
         onSelectWord?.();
       }
     },
@@ -102,12 +107,11 @@ export const TerminalContextMenu: React.FC<TerminalContextMenuProps> = ({
     <ContextMenu>
       <ContextMenuTrigger
         asChild
-        disabled={!showContextMenu}
-        onContextMenu={!showContextMenu ? handleRightClick : undefined}
+        onContextMenu={handleRightClick}
       >
         {children}
       </ContextMenuTrigger>
-      {showContextMenu && (
+      {!isAlternateScreen && (
         <ContextMenuContent className="w-56">
           <ContextMenuItem onClick={onCopy} disabled={!hasSelection}>
             <Copy size={14} className="mr-2" />

components/terminal/ThemeSidePanel.tsx

@@ -131,15 +131,19 @@ interface ThemeSidePanelProps {
   currentFontFamilyId: string;
   globalFontFamilyId: string;
   currentFontSize: number;
+  currentFontWeight: number;
   canResetTheme?: boolean;
   canResetFontFamily?: boolean;
   canResetFontSize?: boolean;
+  canResetFontWeight?: boolean;
   onThemeChange: (themeId: string) => void;
   onThemeReset?: () => void;
   onFontFamilyChange: (fontFamilyId: string) => void;
   onFontFamilyReset?: () => void;
   onFontSizeChange: (fontSize: number) => void;
   onFontSizeReset?: () => void;
+  onFontWeightChange: (fontWeight: number) => void;
+  onFontWeightReset?: () => void;
   isVisible?: boolean;
   previewColors?: {
     background: string;
@@ -153,15 +157,19 @@ const ThemeSidePanelInner: React.FC<ThemeSidePanelProps> = ({
   currentFontFamilyId,
   globalFontFamilyId,
   currentFontSize,
+  currentFontWeight,
   canResetTheme = false,
   canResetFontFamily = false,
   canResetFontSize = false,
+  canResetFontWeight = false,
   onThemeChange,
   onThemeReset,
   onFontFamilyChange,
   onFontFamilyReset,
   onFontSizeChange,
   onFontSizeReset,
+  onFontWeightChange,
+  onFontWeightReset,
   isVisible = true,
   previewColors,
 }) => {
@@ -497,10 +505,52 @@ const ThemeSidePanelInner: React.FC<ThemeSidePanelProps> = ({
           </div>
         )}
 
+        {/* Font Weight Control (only in font tab) */}
+        {activeTab === 'font' && (
+          <div className="p-2.5 border-t shrink-0" style={{ borderColor: 'var(--terminal-panel-border)' }}>
+            <div className="flex items-center justify-between gap-2 mb-1.5">
+              <div className="text-[9px] uppercase tracking-wider font-semibold" style={{ color: 'var(--terminal-panel-muted)' }}>
+                {t('terminal.themeModal.fontWeight')}
+              </div>
+              {canResetFontWeight && (
+                <button
+                  onClick={onFontWeightReset}
+                  className="text-[10px] font-medium hover:opacity-80 transition-opacity"
+                  style={{ color: 'var(--terminal-panel-fg)' }}
+                >
+                  {t('common.useGlobal')}
+                </button>
+              )}
+            </div>
+            <div className="flex items-center gap-2 rounded-lg p-1.5" style={{ backgroundColor: 'var(--terminal-panel-hover)' }}>
+              <select
+                value={currentFontWeight}
+                onChange={(e) => onFontWeightChange(Number(e.target.value))}
+                className="flex-1 h-7 rounded-md border text-xs px-2 cursor-pointer"
+                style={{
+                  backgroundColor: 'var(--terminal-panel-bg)',
+                  color: 'var(--terminal-panel-fg)',
+                  borderColor: 'var(--terminal-panel-border)',
+                }}
+              >
+                <option value={100}>100 Thin</option>
+                <option value={200}>200 ExtraLight</option>
+                <option value={300}>300 Light</option>
+                <option value={400}>400 Normal</option>
+                <option value={500}>500 Medium</option>
+                <option value={600}>600 SemiBold</option>
+                <option value={700}>700 Bold</option>
+                <option value={800}>800 ExtraBold</option>
+                <option value={900}>900 Black</option>
+              </select>
+            </div>
+          </div>
+        )}
+
         {/* Current selection info */}
         <div className="px-2.5 py-1.5 border-t shrink-0" style={{ borderColor: 'var(--terminal-panel-border)' }}>
           <div className="text-[9px] truncate" style={{ color: 'var(--terminal-panel-muted)' }}>
-            {allThemes.find(t => t.id === currentThemeId)?.name ?? currentThemeId} • {availableFonts.find(f => f.id === currentFontFamilyId)?.name ?? currentFontFamilyId} • {currentFontSize}px
+            {allThemes.find(t => t.id === currentThemeId)?.name ?? currentThemeId} • {availableFonts.find(f => f.id === currentFontFamilyId)?.name ?? currentFontFamilyId} • {currentFontSize}px • {currentFontWeight}
           </div>
         </div>
       </div>

components/terminal/autocomplete/useTerminalAutocomplete.ts

@@ -943,15 +943,15 @@ function resolveAutocompleteCwd(
   if (os === "windows") return fallbackCwd;
 
   const normalizedWord = currentWord.trim().replace(/^['"]/, "");
-  const isRelativePathWord = normalizedWord.length > 0 &&
-    !normalizedWord.startsWith("/") &&
-    !normalizedWord.startsWith("~/") &&
-    !normalizedWord.startsWith("-");
 
-  if (!isRelativePathWord) {
+  // Absolute or home-relative paths don't depend on cwd
+  if (normalizedWord.startsWith("/") || normalizedWord.startsWith("~/")) {
     return fallbackCwd;
   }
 
+  // For empty word (e.g. "cd ") and relative paths, try prompt-based cwd
+  // extraction which reflects the current visible prompt — more up-to-date
+  // than fallbackCwd when OSC 7 is not supported.
   const promptCwd = extractPosixCwdFromPrompt(promptText);
   return chooseAutocompleteCwd(promptCwd, fallbackCwd);
 }
@@ -963,15 +963,16 @@ function chooseAutocompleteCwd(
   if (!promptCwd) return fallbackCwd;
   if (!fallbackCwd) return promptCwd;
 
-  if (promptCwd.startsWith("/")) {
+  // Prompt cwd is extracted from the currently visible prompt, so it tracks
+  // directory changes even when OSC 7 is not supported. Prefer it over
+  // fallbackCwd (which may be stale from initial connection) whenever it
+  // looks like a usable path.
+  if (promptCwd.startsWith("/") || promptCwd === "~" || promptCwd.startsWith("~/")) {
     return promptCwd;
   }
 
-  if (promptCwd === "~" || promptCwd.startsWith("~/")) {
-    return fallbackCwd;
-  }
-
-  return promptCwd;
+  // Bare directory name (e.g. "xunlong") can't be used as a path — fallback
+  return fallbackCwd;
 }
 
 function extractPosixCwdFromPrompt(promptText: string): string | undefined {

components/terminal/runtime/createTerminalSessionStarters.ts

@@ -764,15 +764,21 @@ export const createTerminalSessionStarters = (ctx: TerminalSessionStartersContex
     }
 
     try {
-      // Get local shell configuration from terminal settings
-      const localShell = ctx.terminalSettings?.localShell;
+      // Per-session shell (from QuickSwitcher discovery or split/copy) takes priority.
+      // The global terminalSettings.localShell may contain a shell ID (e.g., "wsl-ubuntu")
+      // which was already resolved to command+args and stored on the session object by App.tsx.
+      // Only pass shell/shellArgs when we have concrete per-session values;
+      // otherwise omit them so the backend uses its own default shell detection.
+      const sessionShell = ctx.host.localShell;
+      const sessionShellArgs = ctx.host.localShellArgs;
       const localStartDir = ctx.terminalSettings?.localStartDir;
 
       const id = await ctx.terminalBackend.startLocalSession({
         sessionId: ctx.sessionId,
         cols: term.cols,
         rows: term.rows,
-        shell: localShell,
+        shell: sessionShell || undefined,
+        shellArgs: sessionShellArgs || undefined,
         cwd: localStartDir,
         env: {
           TERM: ctx.terminalSettings?.terminalEmulationType ?? "xterm-256color",

components/terminal/runtime/createXTermRuntime.ts

@@ -1,7 +1,7 @@
 import { FitAddon } from "@xterm/addon-fit";
 import { SearchAddon } from "@xterm/addon-search";
 import { SerializeAddon } from "@xterm/addon-serialize";
-import { Unicode11Addon } from "@xterm/addon-unicode11";
+import { UnicodeGraphemesAddon } from "@xterm/addon-unicode-graphemes";
 import { WebLinksAddon } from "@xterm/addon-web-links";
 import { WebglAddon } from "@xterm/addon-webgl";
 import { Terminal as XTerm } from "@xterm/xterm";
@@ -26,6 +26,7 @@ import {
 import {
   resolveHostTerminalFontFamilyId,
   resolveHostTerminalFontSize,
+  resolveHostTerminalFontWeight,
 } from "../../../domain/terminalAppearance";
 import { logger } from "../../../lib/logger";
 import { isMacPlatform, normalizeLineEndings, wrapBracketedPaste } from "../../../lib/utils";
@@ -128,6 +129,21 @@ const detectPlatform = (): XTermPlatform => {
   return "darwin";
 };
 
+/**
+ * Extract the primary font family from a CSS font-family string that may
+ * include fallback fonts.  `document.fonts.check` returns `false` when *any*
+ * listed font is still loading, so passing the entire CJK fallback stack
+ * causes false negatives during early terminal creation – which in turn makes
+ * `fontWeightBold` fall back to the normal weight and renders bold text too
+ * thin.
+ */
+export const primaryFontFamily = (fontFamily: string): string => {
+  // Split on commas that are NOT inside quotes to handle font names like "Foo, Bar"
+  const match = fontFamily.match(/^(?:"[^"]*"|'[^']*'|[^,])+/);
+  const first = match?.[0]?.trim();
+  return first || fontFamily;
+};
+
 export const createXTermRuntime = (ctx: CreateXTermRuntimeContext): XTermRuntime => {
   const platform = detectPlatform();
   const deviceMemoryGb =
@@ -162,7 +178,7 @@ export const createXTermRuntime = (ctx: CreateXTermRuntimeContext): XTermRuntime
   const cursorBlink = settings?.cursorBlink ?? true;
   const scrollback = settings?.scrollback ?? 10000;
   const drawBoldTextInBrightColors = settings?.drawBoldInBrightColors ?? true;
-  const fontWeight = settings?.fontWeight ?? 400;
+  const fontWeight = resolveHostTerminalFontWeight(ctx.host, settings?.fontWeight ?? 400);
   const fontWeightBold = settings?.fontWeightBold ?? 700;
   const lineHeight = 1 + (settings?.linePadding ?? 0) / 10;
   const minimumContrastRatio = settings?.minimumContrastRatio ?? 1;
@@ -179,7 +195,7 @@ export const createXTermRuntime = (ctx: CreateXTermRuntimeContext): XTermRuntime
     if (typeof document === "undefined" || !document.fonts?.check) {
       return fontWeightBold;
     }
-    const weightSpec = `${fontWeightBold} ${effectiveFontSize}px ${fontFamily}`;
+    const weightSpec = `${fontWeightBold} ${effectiveFontSize}px ${primaryFontFamily(fontFamily)}`;
     return document.fonts.check(weightSpec) ? fontWeightBold : fontWeight;
   })();
 
@@ -188,6 +204,8 @@ export const createXTermRuntime = (ctx: CreateXTermRuntimeContext): XTermRuntime
     ...(windowsPty ? { windowsPty } : {}),
     // Override ignoreBracketedPasteMode if user explicitly disables bracketed paste
     ignoreBracketedPasteMode: settings?.disableBracketedPaste ?? performanceConfig.options.ignoreBracketedPasteMode,
+    // Rescale glyphs that would visually overlap into the next cell (CJK compliance)
+    rescaleOverlappingGlyphs: true,
     fontSize: effectiveFontSize,
     fontFamily,
     fontWeight: fontWeight as
@@ -230,6 +248,10 @@ export const createXTermRuntime = (ctx: CreateXTermRuntimeContext): XTermRuntime
     theme: {
       ...ctx.terminalTheme.colors,
       selectionBackground: ctx.terminalTheme.colors.selection,
+      // Scrollbar theming (xterm 6.0) — derive from foreground color
+      scrollbarSliderBackground: ctx.terminalTheme.colors.foreground + '33', // 20% opacity
+      scrollbarSliderHoverBackground: ctx.terminalTheme.colors.foreground + '66', // 40% opacity
+      scrollbarSliderActiveBackground: ctx.terminalTheme.colors.foreground + '80', // 50% opacity
     },
   });
 
@@ -307,19 +329,19 @@ export const createXTermRuntime = (ctx: CreateXTermRuntimeContext): XTermRuntime
       webglLoaded = true;
     } catch (webglErr) {
       logger.warn(
-        "[XTerm] WebGL addon failed, using canvas renderer. Error:",
+        "[XTerm] WebGL addon failed, using DOM renderer. Error:",
         webglErr instanceof Error ? webglErr.message : webglErr,
       );
     }
   } else {
     logger.info(
-      "[XTerm] Skipping WebGL addon (canvas preferred for macOS profile or low-memory devices)",
+      "[XTerm] Skipping WebGL addon (DOM preferred for low-memory devices)",
     );
   }
 
   scopedWindow.__xtermWebGLLoaded = webglLoaded;
-  scopedWindow.__xtermRendererPreference = performanceConfig.preferCanvasRenderer
-    ? "canvas"
+  scopedWindow.__xtermRendererPreference = performanceConfig.preferDOMRenderer
+    ? "dom"
     : "webgl";
 
   const webLinksAddon = new WebLinksAddon((event, uri) => {
@@ -354,9 +376,10 @@ export const createXTermRuntime = (ctx: CreateXTermRuntimeContext): XTermRuntime
   });
   term.loadAddon(webLinksAddon);
 
-  // Enable Unicode 11 for better Nerd Fonts / Powerline / CJK character width handling
-  term.loadAddon(new Unicode11Addon());
-  term.unicode.activeVersion = '11';
+  // Enable Unicode graphemes for accurate CJK / emoji / Nerd Font character width handling
+  const unicodeGraphemes = new UnicodeGraphemesAddon();
+  term.loadAddon(unicodeGraphemes);
+  term.unicode.activeVersion = '15-graphemes';
 
   logRenderer();
 
@@ -562,7 +585,12 @@ export const createXTermRuntime = (ctx: CreateXTermRuntimeContext): XTermRuntime
         }
       } else {
         // Character mode (default): send immediately
-        ctx.terminalBackend.writeToSession(id, data);
+        // When backspaceBehavior is configured, remap the Backspace key output
+        let outData = data;
+        if (data === "\x7f" && ctx.host.backspaceBehavior === "ctrl-h") {
+          outData = "\x08";
+        }
+        ctx.terminalBackend.writeToSession(id, outData);
 
         // Local echo for serial connections only when explicitly enabled
         if (ctx.host.protocol === "serial" && ctx.serialLocalEcho) {
@@ -579,7 +607,9 @@ export const createXTermRuntime = (ctx: CreateXTermRuntimeContext): XTermRuntime
       }
 
       if (ctx.isBroadcastEnabledRef.current && ctx.onBroadcastInputRef.current) {
-        ctx.onBroadcastInputRef.current(data, ctx.sessionId);
+        // Use remapped data so broadcast peers also receive the correct byte
+        const broadcastData = (data === "\x7f" && ctx.host.backspaceBehavior === "ctrl-h") ? "\x08" : data;
+        ctx.onBroadcastInputRef.current(broadcastData, ctx.sessionId);
       }
 
       scrollToBottomAfterInput(data);

components/ui/aside-panel.tsx

@@ -101,8 +101,8 @@ export const AsidePanelContent: React.FC<{ children: ReactNode; className?: stri
     className,
 }) => {
     return (
-        <ScrollArea className={cn("flex-1 min-w-0", className)}>
-            <div className="p-4 space-y-4 min-w-0 overflow-x-hidden">
+        <ScrollArea className={cn("flex-1 min-w-0 [&>[data-radix-scroll-area-viewport]>div]:!block [&>[data-radix-scroll-area-viewport]>div]:!min-w-0", className)}>
+            <div className="p-4 space-y-4 min-w-0 overflow-hidden">
                 {children}
             </div>
         </ScrollArea>

components/ui/dialog.tsx

@@ -48,8 +48,19 @@ const DialogContent = React.forwardRef<
         {...props}
       >
         {children}
+        <DialogPrimitive.Close
+          data-dialog-close="true"
+          tabIndex={-1}
+          aria-hidden="true"
+          className="sr-only"
+        >
+          {t("common.close")}
+        </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">
+          <DialogPrimitive.Close
+            data-dialog-close="true"
+            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>

domain/credentials.ts

@@ -88,5 +88,17 @@ export const findSyncPayloadEncryptedCredentialPaths = (
     }
   });
 
+  payload.groupConfigs?.forEach((config, index) => {
+    if (isEncryptedCredentialPlaceholder(config.password)) {
+      issues.push(`groupConfigs[${index}].password`);
+    }
+    if (isEncryptedCredentialPlaceholder(config.telnetPassword)) {
+      issues.push(`groupConfigs[${index}].telnetPassword`);
+    }
+    if (isEncryptedCredentialPlaceholder(config.proxyConfig?.password)) {
+      issues.push(`groupConfigs[${index}].proxyConfig.password`);
+    }
+  });
+
   return issues;
 };

domain/groupConfig.ts

@@ -0,0 +1,52 @@
+import type { GroupConfig, Host } from './models';
+
+/**
+ * Resolve merged group defaults by walking the ancestor chain.
+ * For group "A/B/C", merges configs from A, A/B, A/B/C (child overrides parent).
+ */
+export function resolveGroupDefaults(
+  groupPath: string,
+  groupConfigs: GroupConfig[],
+): Partial<GroupConfig> {
+  const configMap = new Map(groupConfigs.map((c) => [c.path, c]));
+  const parts = groupPath.split('/').filter(Boolean);
+  const merged: Record<string, unknown> = {};
+
+  for (let i = 0; i < parts.length; i++) {
+    const ancestorPath = parts.slice(0, i + 1).join('/');
+    const config = configMap.get(ancestorPath);
+    if (config) {
+      for (const [key, value] of Object.entries(config)) {
+        if (key !== 'path' && value !== undefined) {
+          merged[key] = value;
+        }
+      }
+    }
+  }
+  return merged as Partial<GroupConfig>;
+}
+
+const INHERITABLE_KEYS: (keyof GroupConfig)[] = [
+  'username', 'password', 'savePassword', 'authMethod', 'identityId', 'identityFileId', 'identityFilePaths',
+  'port', 'protocol', 'agentForwarding', 'proxyConfig', 'hostChain', 'startupCommand',
+  'legacyAlgorithms', 'environmentVariables', 'charset', 'moshEnabled', 'moshServerPath',
+  'telnetEnabled', 'telnetPort', 'telnetUsername', 'telnetPassword',
+  'theme', 'themeOverride', 'fontFamily', 'fontFamilyOverride', 'fontSize', 'fontSizeOverride', 'fontWeight', 'fontWeightOverride',
+  'backspaceBehavior',
+];
+
+/**
+ * Apply group defaults to a host. Only fills in fields the host doesn't already have.
+ * Returns a new host object — does NOT mutate the original.
+ */
+export function applyGroupDefaults(host: Host, groupDefaults: Partial<GroupConfig>): Host {
+  const effective = { ...host };
+  for (const key of INHERITABLE_KEYS) {
+    const hostValue = (host as unknown as Record<string, unknown>)[key];
+    const groupValue = (groupDefaults as unknown as Record<string, unknown>)[key];
+    if ((hostValue === undefined || hostValue === '' || hostValue === null) && groupValue !== undefined) {
+      (effective as unknown as Record<string, unknown>)[key] = groupValue;
+    }
+  }
+  return effective;
+}

domain/models.ts

@@ -62,7 +62,7 @@ export interface Host {
   id: string;
   label: string;
   hostname: string;
-  port: number;
+  port?: number;
   username: string;
   // Optional reference to a reusable identity (username + auth) stored in Keychain.
   identityId?: string;
@@ -95,6 +95,8 @@ export interface Host {
   fontFamilyOverride?: boolean; // Explicitly override the global terminal font family for this host
   fontSize?: number; // Terminal font size for this host (pt)
   fontSizeOverride?: boolean; // Explicitly override the global terminal font size for this host
+  fontWeight?: number; // Terminal font weight for this host (100-900)
+  fontWeightOverride?: boolean; // Explicitly override the global terminal font weight for this host
   distro?: string; // detected distro id (e.g., ubuntu, debian)
   distroMode?: 'auto' | 'manual'; // whether distro icon comes from detection or manual override
   manualDistro?: string; // manually selected distro id when distroMode='manual'
@@ -117,9 +119,20 @@ export interface Host {
   keywordHighlightEnabled?: boolean;
   // Legacy SSH algorithm support for older network equipment (switches, routers)
   legacyAlgorithms?: boolean;
+  // What the Backspace key sends: undefined = xterm default (no interception), 'ctrl-h' = ^H (0x08)
+  backspaceBehavior?: 'ctrl-h';
   // Local SSH key file paths (from SSH config IdentityFile or user-added)
   // Resolved at connection time — the app reads the file content when connecting.
   identityFilePaths?: string[];
+  // Pin host to top of All hosts view for quick access
+  pinned?: boolean;
+  // Timestamp of last successful connection, used for Recently Connected section
+  lastConnectedAt?: number;
+  // Per-session shell override for local terminals (from shell discovery)
+  localShell?: string;
+  localShellArgs?: string[];
+  localShellName?: string;
+  localShellIcon?: string;
 }
 
 export type KeyType = 'RSA' | 'ECDSA' | 'ED25519';
@@ -178,6 +191,42 @@ export interface GroupNode {
   totalHostCount?: number;
 }
 
+/** Default configuration for a group. Hosts in this group inherit these values when not explicitly set. */
+export interface GroupConfig {
+  path: string;
+  username?: string;
+  password?: string;
+  savePassword?: boolean;
+  authMethod?: 'password' | 'key' | 'certificate';
+  identityId?: string;
+  identityFileId?: string;
+  identityFilePaths?: string[];
+  port?: number;
+  protocol?: 'ssh' | 'telnet';
+  agentForwarding?: boolean;
+  proxyConfig?: ProxyConfig;
+  hostChain?: HostChainConfig;
+  startupCommand?: string;
+  legacyAlgorithms?: boolean;
+  environmentVariables?: EnvVar[];
+  charset?: string;
+  moshEnabled?: boolean;
+  moshServerPath?: string;
+  telnetEnabled?: boolean;
+  telnetPort?: number;
+  telnetUsername?: string;
+  telnetPassword?: string;
+  theme?: string;
+  themeOverride?: boolean;
+  fontFamily?: string;
+  fontFamilyOverride?: boolean;
+  fontSize?: number;
+  fontSizeOverride?: boolean;
+  fontWeight?: number;
+  fontWeightOverride?: boolean;
+  backspaceBehavior?: 'ctrl-h';
+}
+
 export interface SyncConfig {
   gistId: string;
   githubToken: string;
@@ -451,7 +500,7 @@ export interface TerminalSettings {
   osc52Clipboard: 'off' | 'write-only' | 'read-write' | 'prompt'; // OSC-52 clipboard access: off, write-only (default), read-write, or prompt on read
 
   // Rendering
-  rendererType: 'auto' | 'webgl' | 'canvas'; // Terminal renderer: auto (detect based on hardware), webgl, or canvas
+  rendererType: 'auto' | 'webgl' | 'dom'; // Terminal renderer: auto (detect based on hardware), webgl, or dom
 
   // Autocomplete
   autocompleteEnabled: boolean; // Enable terminal command autocomplete
@@ -527,8 +576,14 @@ export const normalizeTerminalSettings = (
     ...(settings ?? {}),
   };
 
+  // Migrate legacy 'canvas' renderer to 'dom' (canvas removed in xterm.js 6.0)
+  const rendererType = (mergedSettings.rendererType as string) === 'canvas'
+    ? 'dom' as const
+    : mergedSettings.rendererType;
+
   return {
     ...mergedSettings,
+    rendererType,
     autocompleteGhostText: mergedSettings.autocompletePopupMenu
       ? false
       : mergedSettings.autocompleteGhostText,
@@ -626,6 +681,10 @@ export interface TerminalSession {
   charset?: string; // Connection-time charset override (e.g. for quick-connect serial)
   // Serial-specific connection settings
   serialConfig?: SerialConfig;
+  localShell?: string;       // Shell command for local terminals (from discovery)
+  localShellArgs?: string[]; // Shell args for local terminals (from discovery)
+  localShellName?: string;   // Display name for local shell (e.g., "Zsh", "Ubuntu (WSL)")
+  localShellIcon?: string;   // Icon identifier for local shell (e.g., "zsh", "ubuntu")
 }
 
 export interface RemoteFile {

domain/sync.ts

@@ -165,6 +165,9 @@ export interface SyncPayload {
   customGroups: string[];
   snippetPackages?: string[];
 
+  // Group configs (connection defaults per host group)
+  groupConfigs?: import('./models').GroupConfig[];
+
   // Port forwarding rules
   portForwardingRules?: import('./models').PortForwardingRule[];
   
@@ -201,6 +204,8 @@ export interface SyncPayload {
     sftpGlobalBookmarks?: import('./models').SftpBookmark[];
     // Immersive mode
     immersiveMode?: boolean;
+    // Vault: show recently connected hosts
+    showRecentHosts?: boolean;
   };
 
   // Sync metadata

domain/syncMerge.ts

@@ -384,8 +384,17 @@ export function mergeSyncPayloads(
     remote.portForwardingRules ?? [],
   );
 
+  // Merge group configs (keyed by path — wrap with virtual id for entity merge)
+  type GCWithId = import('./models').GroupConfig & { id: string };
+  const wrapGC = (arr: import('./models').GroupConfig[] | undefined): GCWithId[] =>
+    (arr ?? []).map(gc => ({ ...gc, id: gc.path }));
+  const unwrapGC = (arr: GCWithId[]): import('./models').GroupConfig[] =>
+    arr.map(({ id: _id, ...rest }) => rest as import('./models').GroupConfig);
+  const groupConfigsResult = mergeEntityArrays(wrapGC(b.groupConfigs), wrapGC(local.groupConfigs), wrapGC(remote.groupConfigs));
+
   // Aggregate stats
-  const entityResults = [hosts, keys, identities, snippets, knownHosts, portForwardingRules];
+  const entityResults: Pick<EntityMergeResult<unknown>, 'added' | 'deleted' | 'modified' | 'conflicts'>[] =
+    [hosts, keys, identities, snippets, knownHosts, portForwardingRules, groupConfigsResult];
   for (const r of entityResults) {
     summary.added.local += r.added.local;
     summary.added.remote += r.added.remote;
@@ -430,6 +439,7 @@ export function mergeSyncPayloads(
     snippetPackages,
     knownHosts: knownHosts.merged,
     portForwardingRules: portForwardingRules.merged,
+    groupConfigs: unwrapGC(groupConfigsResult.merged),
     settings,
     syncedAt: Date.now(),
   };

domain/terminalAppearance.ts

@@ -47,3 +47,15 @@ export const resolveHostTerminalFontFamilyId = (host: Host | null | undefined, d
 export const resolveHostTerminalFontSize = (host: Host | null | undefined, defaultFontSize: number): number =>
   hasHostFontSizeOverride(host) && host?.fontSize != null ? host.fontSize : defaultFontSize;
 
+export const hasHostFontWeightOverride = (host?: Pick<Host, 'fontWeightOverride' | 'fontWeight'> | null): boolean =>
+  hasEffectiveOverride(host?.fontWeightOverride, hasLegacyNumberValue(host?.fontWeight));
+
+export const clearHostFontWeightOverride = (host: Host): Host => ({
+  ...host,
+  fontWeight: undefined,
+  fontWeightOverride: false,
+});
+
+export const resolveHostTerminalFontWeight = (host: Host | null | undefined, defaultFontWeight: number): number =>
+  hasHostFontWeightOverride(host) && host?.fontWeight != null ? host.fontWeight : defaultFontWeight;
+

electron/bridges/shellDiscovery.cjs

@@ -0,0 +1,710 @@
+/**
+ * Shell Discovery — cross-platform shell detection
+ *
+ * Detects available shells on Windows (CMD, PowerShell, WSL, Git Bash, Cygwin)
+ * and Unix/macOS (via /etc/shells). Registry access on Windows uses `reg.exe`
+ * via child_process — no native npm dependency.
+ */
+
+const fs = require("node:fs");
+const path = require("node:path");
+const { execFileSync } = require("node:child_process");
+
+const EXEC_OPTS = { encoding: "utf8", timeout: 5000, windowsHide: true };
+
+/** Module-level cache for later use by the unified discoverShells() (Task 3). */
+let cachedShells = null;
+
+// ---------------------------------------------------------------------------
+// Helper utilities
+// ---------------------------------------------------------------------------
+
+/**
+ * Query a specific value from a Windows registry key.
+ * Returns the value string, or `null` on failure.
+ *
+ * @param {string} keyPath  e.g. "HKLM\\SOFTWARE\\GitForWindows"
+ * @param {string} valueName  e.g. "InstallPath"
+ * @returns {string|null}
+ */
+function regQueryValue(keyPath, valueName) {
+  try {
+    // /ve queries the default (unnamed) value; /v queries a named value.
+    const args =
+      valueName === "" || valueName == null
+        ? ["query", keyPath, "/ve"]
+        : ["query", keyPath, "/v", valueName];
+    const output = execFileSync("reg", args, EXEC_OPTS);
+    // Output format:
+    //   HKEY_LOCAL_MACHINE\SOFTWARE\GitForWindows
+    //       InstallPath    REG_SZ    C:\Program Files\Git
+    const lines = output.split(/\r?\n/).filter(Boolean);
+    for (const line of lines) {
+      const match = line.match(/^\s+.+?\s+REG_\w+\s+(.+)$/);
+      if (match) {
+        return match[1].trim();
+      }
+    }
+  } catch (_err) {
+    // Key or value not found — expected on many systems.
+  }
+  return null;
+}
+
+/**
+ * Enumerate immediate subkey names under a registry key.
+ * Returns an array of full subkey paths, or an empty array on failure.
+ *
+ * @param {string} keyPath  e.g. "HKCU\\Software\\Microsoft\\Windows\\CurrentVersion\\Lxss"
+ * @returns {string[]}
+ */
+function regEnumSubkeys(keyPath) {
+  try {
+    const output = execFileSync(
+      "reg",
+      ["query", keyPath],
+      EXEC_OPTS,
+    );
+    // `reg query <key>` prints the key itself, then each subkey on its own line
+    // prefixed with the full path. Values appear with leading whitespace.
+    const lines = output.split(/\r?\n/).filter(Boolean);
+    const subkeys = [];
+    const normalizedParent = keyPath.toLowerCase();
+    for (const line of lines) {
+      const trimmed = line.trim();
+      // Subkeys start with "HK" and are longer than the parent key.
+      if (
+        trimmed.toLowerCase().startsWith("hk") &&
+        trimmed.toLowerCase() !== normalizedParent &&
+        trimmed.toLowerCase().startsWith(normalizedParent + "\\")
+      ) {
+        subkeys.push(trimmed);
+      }
+    }
+    return subkeys;
+  } catch (_err) {
+    // Key not found or access denied.
+  }
+  return [];
+}
+
+/**
+ * Locate an executable on the system PATH using `where.exe`.
+ * Returns the first valid, non-alias path, or `null` if not found.
+ *
+ * @param {string} name  Executable name, e.g. "pwsh"
+ * @returns {string|null}
+ */
+function findExecutableOnPath(name) {
+  try {
+    const result = execFileSync("where.exe", [name], EXEC_OPTS);
+    const candidates = result
+      .split(/\r?\n/)
+      .map((l) => l.trim())
+      .filter(Boolean);
+
+    for (const candidate of candidates) {
+      if (!fs.existsSync(candidate)) continue;
+      // Skip Windows App Execution Aliases (WindowsApps zero-byte stubs).
+      try {
+        const localAppData = (process.env.LOCALAPPDATA || "").toLowerCase();
+        if (
+          localAppData &&
+          candidate.toLowerCase().startsWith(
+            path.join(localAppData, "Microsoft", "WindowsApps").toLowerCase() +
+              path.sep,
+          )
+        ) {
+          continue;
+        }
+      } catch (_e) {
+        // Ignore — just use the candidate.
+      }
+      return candidate;
+    }
+  } catch (_err) {
+    // Not found on PATH.
+  }
+  return null;
+}
+
+/**
+ * Map a WSL distro name to an icon identifier for SVG lookup.
+ *
+ * @param {string} distroName  e.g. "Ubuntu-22.04", "Debian", "kali-linux"
+ * @returns {string}
+ */
+function mapWslDistroIcon(distroName) {
+  const lower = (distroName || "").toLowerCase();
+
+  if (lower.includes("ubuntu")) return "ubuntu";
+  if (lower.includes("debian")) return "debian";
+  if (lower.includes("kali")) return "kali";
+  if (lower.includes("alpine")) return "alpine";
+  if (lower.includes("opensuse") || lower.includes("suse")) return "opensuse";
+  if (lower.includes("fedora")) return "fedora";
+  if (lower.includes("arch")) return "arch";
+  if (lower.includes("oracle")) return "oracle";
+
+  return "linux";
+}
+
+// ---------------------------------------------------------------------------
+// Individual shell detectors
+// ---------------------------------------------------------------------------
+
+/**
+ * Detect CMD.
+ * @returns {object|null} DiscoveredShell or null
+ */
+function detectCmd() {
+  try {
+    const comSpec = process.env.ComSpec;
+    const cmdPath = comSpec || "cmd.exe";
+    // Verify the path actually exists when ComSpec provides a full path.
+    if (comSpec && !fs.existsSync(comSpec)) {
+      // Fallback to bare name — Windows will resolve it.
+      return {
+        id: "cmd",
+        name: "CMD",
+        command: "cmd.exe",
+        args: [],
+        icon: "cmd",
+      };
+    }
+    return {
+      id: "cmd",
+      name: "CMD",
+      command: cmdPath,
+      args: [],
+      icon: "cmd",
+    };
+  } catch (_err) {
+    // Should never fail, but guard anyway.
+  }
+  return null;
+}
+
+/**
+ * Detect Windows PowerShell 5.1.
+ * @returns {object|null}
+ */
+function detectPowerShell() {
+  try {
+    // Try where.exe first.
+    const found = findExecutableOnPath("powershell");
+    if (found) {
+      return {
+        id: "powershell",
+        name: "Windows PowerShell",
+        command: found,
+        args: ["-NoLogo"],
+        icon: "powershell",
+      };
+    }
+
+    // Fallback: well-known path.
+    const fallback = path.join(
+      process.env.SystemRoot || "C:\\Windows",
+      "System32",
+      "WindowsPowerShell",
+      "v1.0",
+      "powershell.exe",
+    );
+    if (fs.existsSync(fallback)) {
+      return {
+        id: "powershell",
+        name: "Windows PowerShell",
+        command: fallback,
+        args: ["-NoLogo"],
+        icon: "powershell",
+      };
+    }
+  } catch (_err) {
+    // Detection failed — not critical.
+  }
+  return null;
+}
+
+/**
+ * Detect PowerShell Core (pwsh 7+).
+ * @returns {object|null}
+ */
+function detectPwsh() {
+  try {
+    // 1. where.exe
+    const found = findExecutableOnPath("pwsh");
+    if (found) {
+      return {
+        id: "pwsh",
+        name: "PowerShell 7",
+        command: found,
+        args: ["-NoLogo"],
+        icon: "pwsh",
+      };
+    }
+
+    // 2. Registry App Paths
+    const regPath = regQueryValue(
+      "HKLM\\SOFTWARE\\Microsoft\\Windows\\CurrentVersion\\App Paths\\pwsh.exe",
+      "",
+    );
+    if (regPath && fs.existsSync(regPath)) {
+      return {
+        id: "pwsh",
+        name: "PowerShell 7",
+        command: regPath,
+        args: ["-NoLogo"],
+        icon: "pwsh",
+      };
+    }
+
+    // 3. Common fallback path.
+    const fallback = path.join(
+      process.env.ProgramFiles || "C:\\Program Files",
+      "PowerShell",
+      "7",
+      "pwsh.exe",
+    );
+    if (fs.existsSync(fallback)) {
+      return {
+        id: "pwsh",
+        name: "PowerShell 7",
+        command: fallback,
+        args: ["-NoLogo"],
+        icon: "pwsh",
+      };
+    }
+  } catch (_err) {
+    // Detection failed.
+  }
+  return null;
+}
+
+/**
+ * Detect installed WSL distributions via the registry.
+ * @returns {object[]} Array of DiscoveredShell objects (may be empty).
+ */
+function detectWslDistros() {
+  const wslExe = path.join(
+    process.env.SystemRoot || "C:\\Windows",
+    "System32",
+    "wsl.exe",
+  );
+  if (!fs.existsSync(wslExe)) return [];
+
+  const distros = [];
+
+  // Primary: use `wsl.exe -l -q` which lists installed distros one per line.
+  // More reliable than registry parsing across Windows versions.
+  // Note: wsl.exe outputs UTF-16LE on some builds, so we read as buffer and decode.
+  try {
+    const buf = execFileSync(wslExe, ["-l", "-q"], {
+      timeout: 5000,
+      windowsHide: true,
+      maxBuffer: 1024 * 64,
+    });
+    // wsl.exe outputs UTF-16LE on most Windows builds (has NUL bytes between chars).
+    // Detect by checking for NUL bytes in the raw buffer; if present → UTF-16LE, else UTF-8.
+    const isUtf16 = buf.length >= 2 && buf.includes(0x00);
+    const output = buf.toString(isUtf16 ? "utf16le" : "utf8");
+    const names = output
+      .split(/\r?\n/)
+      .map((l) => l.replace(/\0/g, "").trim())
+      .filter(Boolean);
+
+    for (const distroName of names) {
+      distros.push({
+        id: `wsl-${distroName.toLowerCase().replace(/[^a-z0-9-]/g, "-")}`,
+        name: `${distroName} (WSL)`,
+        command: wslExe,
+        args: ["-d", distroName],
+        icon: mapWslDistroIcon(distroName),
+      });
+    }
+    if (distros.length > 0) return distros;
+  } catch (_err) {
+    // wsl.exe -l -q failed, fall through to registry method.
+  }
+
+  // Fallback: enumerate registry subkeys under Lxss
+  try {
+    const lxssKey = "HKCU\\Software\\Microsoft\\Windows\\CurrentVersion\\Lxss";
+    const subkeys = regEnumSubkeys(lxssKey);
+
+    for (const subkey of subkeys) {
+      try {
+        const distroName = regQueryValue(subkey, "DistributionName");
+        if (!distroName) continue;
+
+        distros.push({
+          id: `wsl-${distroName.toLowerCase().replace(/[^a-z0-9-]/g, "-")}`,
+          name: `${distroName} (WSL)`,
+          command: wslExe,
+          args: ["-d", distroName],
+          icon: mapWslDistroIcon(distroName),
+        });
+      } catch (_err) {
+        // Skip this distro but continue with others.
+      }
+    }
+  } catch (_err) {
+    // WSL not installed or registry not accessible.
+  }
+  return distros;
+}
+
+/**
+ * Detect Git Bash (from Git for Windows).
+ * @returns {object|null}
+ */
+function detectGitBash() {
+  try {
+    // Try registry first.
+    const installPath = regQueryValue(
+      "HKLM\\SOFTWARE\\GitForWindows",
+      "InstallPath",
+    );
+    if (installPath) {
+      const bashExe = path.join(installPath, "bin", "bash.exe");
+      if (fs.existsSync(bashExe)) {
+        return {
+          id: "git-bash",
+          name: "Git Bash",
+          command: bashExe,
+          args: ["--login", "-i"],
+          icon: "git-bash",
+        };
+      }
+    }
+
+    // Fallback: common installation path.
+    const fallbackPaths = [
+      path.join(
+        process.env.ProgramFiles || "C:\\Program Files",
+        "Git",
+        "bin",
+        "bash.exe",
+      ),
+      path.join(
+        process.env["ProgramFiles(x86)"] || "C:\\Program Files (x86)",
+        "Git",
+        "bin",
+        "bash.exe",
+      ),
+    ];
+    for (const p of fallbackPaths) {
+      if (fs.existsSync(p)) {
+        return {
+          id: "git-bash",
+          name: "Git Bash",
+          command: p,
+          args: ["--login", "-i"],
+          icon: "git-bash",
+        };
+      }
+    }
+  } catch (_err) {
+    // Git Bash not installed.
+  }
+  return null;
+}
+
+/**
+ * Detect Cygwin bash.
+ * @returns {object|null}
+ */
+function detectCygwin() {
+  try {
+    // Try 64-bit registry key first, then 32-bit (WOW6432Node).
+    const rootDir =
+      regQueryValue("HKLM\\SOFTWARE\\Cygwin\\setup", "rootdir") ||
+      regQueryValue("HKLM\\SOFTWARE\\WOW6432Node\\Cygwin\\setup", "rootdir");
+
+    if (rootDir) {
+      const bashExe = path.join(rootDir, "bin", "bash.exe");
+      if (fs.existsSync(bashExe)) {
+        return {
+          id: "cygwin",
+          name: "Cygwin",
+          command: bashExe,
+          args: ["--login", "-i"],
+          icon: "cygwin",
+        };
+      }
+    }
+
+    // Fallback: common path.
+    const fallback = "C:\\cygwin64\\bin\\bash.exe";
+    if (fs.existsSync(fallback)) {
+      return {
+        id: "cygwin",
+        name: "Cygwin",
+        command: fallback,
+        args: ["--login", "-i"],
+        icon: "cygwin",
+      };
+    }
+  } catch (_err) {
+    // Cygwin not installed.
+  }
+  return null;
+}
+
+// ---------------------------------------------------------------------------
+// Main discovery entry point for Windows
+// ---------------------------------------------------------------------------
+
+/**
+ * Discover all available shells on a Windows system.
+ * Returns an array of DiscoveredShell objects. Exactly one shell will have
+ * `isDefault: true` based on priority: pwsh > powershell > cmd.
+ *
+ * @returns {Array<{id: string, name: string, command: string, args: string[], icon: string, isDefault?: boolean}>}
+ */
+function discoverWindowsShells() {
+  const shells = [];
+
+  // Detect each shell type independently — failures are isolated.
+  const cmd = detectCmd();
+  if (cmd) shells.push(cmd);
+
+  const powershell = detectPowerShell();
+  if (powershell) shells.push(powershell);
+
+  const pwsh = detectPwsh();
+  if (pwsh) shells.push(pwsh);
+
+  const wslDistros = detectWslDistros();
+  shells.push(...wslDistros);
+
+  const gitBash = detectGitBash();
+  if (gitBash) shells.push(gitBash);
+
+  const cygwin = detectCygwin();
+  if (cygwin) shells.push(cygwin);
+
+  // Assign default: pwsh > powershell > cmd
+  const defaultShell =
+    shells.find((s) => s.id === "pwsh") ||
+    shells.find((s) => s.id === "powershell") ||
+    shells.find((s) => s.id === "cmd");
+  if (defaultShell) {
+    defaultShell.isDefault = true;
+  }
+
+  return shells;
+}
+
+// ---------------------------------------------------------------------------
+// Unix shell detection helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Map a Unix shell binary basename to a human-readable display name.
+ *
+ * @param {string} basename  e.g. "zsh", "bash", "nu"
+ * @returns {string}
+ */
+function mapUnixShellName(basename) {
+  const map = {
+    zsh: "Zsh",
+    bash: "Bash",
+    fish: "Fish",
+    sh: "sh",
+    ksh: "Ksh",
+    tcsh: "Tcsh",
+    csh: "Csh",
+    dash: "Dash",
+    nu: "Nushell",
+    pwsh: "PowerShell",
+  };
+  return map[basename] || basename;
+}
+
+/**
+ * Map a Unix shell binary basename to an icon identifier.
+ *
+ * @param {string} basename  e.g. "zsh", "fish", "nu"
+ * @returns {string}
+ */
+function mapUnixShellIcon(basename) {
+  const map = {
+    zsh: "zsh",
+    bash: "bash",
+    fish: "fish",
+    sh: "terminal",
+    ksh: "terminal",
+    tcsh: "terminal",
+    csh: "terminal",
+    dash: "terminal",
+    nu: "nushell",
+    pwsh: "pwsh",
+  };
+  return map[basename] || "terminal";
+}
+
+/**
+ * Returns true for shells that should be launched with the `-l` (login) flag.
+ *
+ * @param {string} basename
+ * @returns {boolean}
+ */
+function isLoginShell(basename) {
+  return ["bash", "zsh", "fish", "ksh", "sh"].includes(basename);
+}
+
+// ---------------------------------------------------------------------------
+// Main discovery entry point for Unix
+// ---------------------------------------------------------------------------
+
+/**
+ * Discover all available shells on a Unix/macOS system by reading /etc/shells.
+ * The shell referenced by $SHELL is marked as default. If $SHELL is not in
+ * /etc/shells it is prepended to the list.
+ *
+ * @returns {Array<{id: string, name: string, command: string, args: string[], icon: string, isDefault?: boolean}>}
+ */
+function discoverUnixShells() {
+  const shells = [];
+  const seen = new Set();
+
+  // Read /etc/shells — each non-comment line is an absolute path.
+  let etcShellPaths = [];
+  try {
+    const content = fs.readFileSync("/etc/shells", "utf8");
+    etcShellPaths = content
+      .split(/\r?\n/)
+      .map((l) => l.trim())
+      .filter((l) => l && !l.startsWith("#"));
+  } catch (_err) {
+    // /etc/shells not readable — fall through to $SHELL only.
+  }
+
+  // Filter to existing files and deduplicate by real path.
+  const validPaths = [];
+  for (const shellPath of etcShellPaths) {
+    try {
+      if (!fs.existsSync(shellPath)) continue;
+      const real = fs.realpathSync(shellPath);
+      if (seen.has(real)) continue;
+      seen.add(real);
+      validPaths.push(shellPath);
+    } catch (_err) {
+      // Skip unresolvable paths.
+    }
+  }
+
+  // Build DiscoveredShell objects.
+  // Track basename counts to detect duplicates (e.g., /bin/bash vs /usr/local/bin/bash)
+  const baseCount = new Map();
+  for (const shellPath of validPaths) {
+    const base = path.basename(shellPath);
+    baseCount.set(base, (baseCount.get(base) || 0) + 1);
+  }
+
+  for (const shellPath of validPaths) {
+    const base = path.basename(shellPath);
+    const args = isLoginShell(base) ? ["-l"] : [];
+    // Use basename as id when unique, otherwise use path slug to guarantee uniqueness
+    const needsDisambiguation = baseCount.get(base) > 1;
+    const id = needsDisambiguation
+      ? shellPath.replace(/^\/+/, "").replace(/[/\\]+/g, "-")
+      : base;
+    const name = needsDisambiguation
+      ? `${mapUnixShellName(base)} (${shellPath})`
+      : mapUnixShellName(base);
+    shells.push({
+      id,
+      name,
+      command: shellPath,
+      args,
+      icon: mapUnixShellIcon(base),
+    });
+  }
+
+  // Ensure $SHELL is present — prepend it if missing.
+  const envShell = process.env.SHELL;
+  if (envShell) {
+    try {
+      const envReal = fs.realpathSync(envShell);
+      if (!seen.has(envReal) && fs.existsSync(envShell)) {
+        const base = path.basename(envShell);
+        const args = isLoginShell(base) ? ["-l"] : [];
+        // Check if basename already exists in the list to disambiguate
+        const hasDuplicate = shells.some((s) => path.basename(s.command) === base);
+        const id = hasDuplicate
+          ? envShell.replace(/^\/+/, "").replace(/[/\\]+/g, "-")
+          : base;
+        const name = hasDuplicate
+          ? `${mapUnixShellName(base)} (${envShell})`
+          : mapUnixShellName(base);
+        shells.unshift({
+          id,
+          name,
+          command: envShell,
+          args,
+          icon: mapUnixShellIcon(base),
+        });
+      }
+    } catch (_err) {
+      // $SHELL path invalid — ignore.
+    }
+  }
+
+  // Mark $SHELL as default (match by command path or basename).
+  if (envShell) {
+    const defaultShell =
+      shells.find((s) => s.command === envShell) ||
+      shells.find((s) => s.id === path.basename(envShell));
+    if (defaultShell) {
+      defaultShell.isDefault = true;
+    }
+  }
+
+  // Fallback: mark first shell as default if none matched.
+  if (shells.length > 0 && !shells.some((s) => s.isDefault)) {
+    shells[0].isDefault = true;
+  }
+
+  return shells;
+}
+
+// ---------------------------------------------------------------------------
+// Unified shell discovery entry point
+// ---------------------------------------------------------------------------
+
+/**
+ * Discover all available shells for the current platform.
+ * Results are cached after the first call.
+ *
+ * @returns {Array<{id: string, name: string, command: string, args: string[], icon: string, isDefault?: boolean}>}
+ */
+function discoverShells() {
+  if (cachedShells) return cachedShells;
+
+  if (process.platform === "win32") {
+    cachedShells = discoverWindowsShells();
+  } else {
+    cachedShells = discoverUnixShells();
+  }
+
+  return cachedShells;
+}
+
+// ---------------------------------------------------------------------------
+// Exports
+// ---------------------------------------------------------------------------
+
+module.exports = {
+  discoverShells,
+  discoverWindowsShells,
+  discoverUnixShells,
+  mapUnixShellName,
+  mapUnixShellIcon,
+  isLoginShell,
+  regQueryValue,
+  regEnumSubkeys,
+  findExecutableOnPath,
+  mapWslDistroIcon,
+};

electron/bridges/sshBridge.cjs

@@ -1912,7 +1912,14 @@ async function listSessionDir(_event, payload) {
       : dirPath.startsWith("~/")
         ? `"$HOME/${tildePathSuffix}"`
         : `'${safePath}'`;
-    const cmd = `find ${pathExpr} -mindepth 1 -maxdepth 1 -exec sh -c '
+    // When dirPath is relative (not absolute and not ~/...), exec channels default
+    // to the user's home directory. Resolve the interactive shell's actual cwd first
+    // so that relative paths like "." or "src" are resolved correctly.
+    const needsCwdResolve = !dirPath.startsWith('/') && dirPath !== '~' && !dirPath.startsWith('~/');
+    const cwdResolveCmd = needsCwdResolve
+      ? `_sc_p=$(ps --ppid $PPID -o pid=,comm= 2>/dev/null | awk -v self=$$ '$1!=self && $2~/^(ba|z|fi|k|da)?sh$/{pid=$1}END{print pid}'); [ -z "$_sc_p" ] && _sc_p=$(ps -e -o pid=,ppid=,comm= 2>/dev/null | awk -v pp=$PPID -v self=$$ '$1!=self && $2==pp && $3~/^(ba|z|fi|k|da)?sh$/{pid=$1}END{print pid}'); [ -n "$_sc_p" ] && { _sc_d=$(readlink /proc/$_sc_p/cwd 2>/dev/null); [ -n "$_sc_d" ] && cd "$_sc_d" 2>/dev/null; }; `
+      : '';
+    const cmd = `${cwdResolveCmd}find ${pathExpr} -mindepth 1 -maxdepth 1 -exec sh -c '
       prefix="$1"
       folders_only="$2"
       limit="$3"

electron/bridges/terminalBridge.cjs

@@ -15,6 +15,7 @@ const sessionLogStreamManager = require("./sessionLogStreamManager.cjs");
 const { detectShellKind } = require("./ai/ptyExec.cjs");
 const { trackSessionIdlePrompt } = require("./ai/shellUtils.cjs");
 const { createZmodemSentry } = require("./zmodemHelper.cjs");
+const { discoverShells } = require("./shellDiscovery.cjs");
 
 // Shared references
 let sessions = null;
@@ -252,8 +253,20 @@ function startLocalSession(event, payload) {
     payload?.sessionId ||
     `${Date.now()}-${Math.random().toString(16).slice(2)}`;
   const defaultShell = getDefaultLocalShell();
-  const shell = normalizeExecutablePath(payload?.shell) || defaultShell;
-  const shellArgs = getLocalShellArgs(shell);
+  // payload.shell may be a discovered shell ID (e.g., "wsl-ubuntu") — resolve it
+  let resolvedShell = payload?.shell;
+  let resolvedArgs = payload?.shellArgs;
+  if (resolvedShell && !/[/\\]/.test(resolvedShell)) {
+    // Looks like a shell ID, not a path — try to resolve from discovery cache
+    const shells = discoverShells();
+    const match = shells.find((s) => s.id === resolvedShell);
+    if (match) {
+      resolvedShell = match.command;
+      resolvedArgs = resolvedArgs ?? match.args;
+    }
+  }
+  const shell = normalizeExecutablePath(resolvedShell) || defaultShell;
+  const shellArgs = resolvedArgs ?? getLocalShellArgs(shell);
   const shellKind = detectShellKind(shell);
   const env = applyLocaleDefaults({
     ...process.env,
@@ -1044,6 +1057,7 @@ function registerHandlers(ipcMain) {
   ipcMain.handle("netcatty:serial:list", listSerialPorts);
   ipcMain.handle("netcatty:local:defaultShell", getDefaultShell);
   ipcMain.handle("netcatty:local:validatePath", validatePath);
+  ipcMain.handle("netcatty:shells:discover", () => discoverShells());
   ipcMain.on("netcatty:write", writeToSession);
   ipcMain.on("netcatty:resize", resizeSession);
   ipcMain.on("netcatty:close", closeSession);

electron/bridges/windowManager.cjs

@@ -721,6 +721,20 @@ async function createWindow(electronModule, options) {
   win.webContents.on("will-navigate", blockUntrustedNavigation);
   win.webContents.on("will-redirect", blockUntrustedNavigation);
 
+  // Prevent Chromium from consuming Alt+Arrow as browser back/forward navigation.
+  // Terminal apps need these keys to pass through to the remote shell (e.g., byobu, tmux).
+  // Using setIgnoreMenuShortcuts lets the keydown still reach the page (xterm.js)
+  // while preventing Chromium's built-in shortcuts from triggering.
+  win.webContents.on("before-input-event", (_event, input) => {
+    if (input.alt && !input.control && !input.meta) {
+      if (input.key === "ArrowLeft" || input.key === "ArrowRight") {
+        win.webContents.setIgnoreMenuShortcuts(true);
+        return;
+      }
+    }
+    win.webContents.setIgnoreMenuShortcuts(false);
+  });
+
   // Restore maximized state if it was saved
   if (savedState?.isMaximized && !savedState?.isFullScreen) {
     win.once("ready-to-show", () => {

electron/preload.cjs

@@ -561,6 +561,7 @@ const api = {
   getDefaultShell: async () => {
     return ipcRenderer.invoke("netcatty:local:defaultShell");
   },
+  discoverShells: () => ipcRenderer.invoke("netcatty:shells:discover"),
   validatePath: async (path, type) => {
     return ipcRenderer.invoke("netcatty:local:validatePath", { path, type });
   },

global.d.ts

@@ -25,6 +25,16 @@ declare global {
     password?: string;
   }
 
+  // Discovered local shell (e.g. CMD, PowerShell, WSL, Git Bash)
+  interface DiscoveredShell {
+    id: string;
+    name: string;
+    command: string;
+    args?: string[];
+    icon: string;
+    isDefault?: boolean;
+  }
+
   // Jump host configuration for SSH tunneling
   interface NetcattyJumpHost {
     hostname: string;
@@ -176,7 +186,7 @@ declare global {
       env?: Record<string, string>;
       sessionLog?: { enabled: boolean; directory: string; format: string };
     }): Promise<string>;
-    startLocalSession?(options: { sessionId?: string; cols?: number; rows?: number; shell?: string; cwd?: string; env?: Record<string, string>; sessionLog?: { enabled: boolean; directory: string; format: string } }): Promise<string>;
+    startLocalSession?(options: { sessionId?: string; cols?: number; rows?: number; shell?: string; shellArgs?: string[]; cwd?: string; env?: Record<string, string>; sessionLog?: { enabled: boolean; directory: string; format: string } }): Promise<string>;
     startSerialSession?(options: {
       sessionId?: string;
       path: string;
@@ -197,6 +207,7 @@ declare global {
       pnpId: string;
     }>>;
     getDefaultShell?(): Promise<string>;
+    discoverShells?(): Promise<DiscoveredShell[]>;
     validatePath?(path: string, type?: 'file' | 'directory' | 'any'): Promise<{ exists: boolean; isFile: boolean; isDirectory: boolean }>;
     generateKeyPair?(options: {
       type: 'RSA' | 'ECDSA' | 'ED25519';

index.css

@@ -78,6 +78,28 @@
       opacity: 1;
     }
   }
+
+}
+
+@keyframes pop-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.82) translateY(6px);
+  }
+  45% {
+    opacity: 1;
+    transform: scale(1.06) translateY(-2px);
+  }
+  72% {
+    transform: scale(0.97) translateY(1px);
+  }
+  88% {
+    transform: scale(1.01);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
 }
 
 :root {
@@ -144,6 +166,16 @@ body {
   background: linear-gradient(180deg, hsl(var(--background)) 0%, hsl(var(--background)) 60%, hsl(var(--background) / 0.9) 100%);
 }
 
+/* Slim down xterm 6.0 VS Code scrollbar — wide hit area, thin visual slider */
+.xterm .xterm-scrollable-element > .scrollbar.vertical {
+  width: 12px !important;
+}
+.xterm .xterm-scrollable-element > .scrollbar.vertical > .slider {
+  width: 6px !important;
+  border-radius: 3px;
+  left: 3px !important;
+}
+
 @keyframes shimmer {
   0% {
     transform: translateX(-100%);

infrastructure/config/storageKeys.ts

@@ -108,6 +108,12 @@ export const STORAGE_KEY_WORKSPACE_FOCUS_STYLE = 'netcatty_workspace_focus_style
 // Immersive Mode
 export const STORAGE_KEY_IMMERSIVE_MODE = 'netcatty_immersive_mode_v1';
 
+// Vault: Show Recently Connected hosts section
+export const STORAGE_KEY_SHOW_RECENT_HOSTS = 'netcatty_show_recent_hosts_v1';
+
+// Group Configurations (default settings inherited by hosts)
+export const STORAGE_KEY_GROUP_CONFIGS = 'netcatty_group_configs_v1';
+
 // Side Panel
 export const STORAGE_KEY_SIDE_PANEL_WIDTH = 'netcatty_side_panel_width';
 

infrastructure/config/xtermPerformance.ts

@@ -46,8 +46,8 @@ export const XTERM_PERFORMANCE_CONFIG = {
     // Enable WebGL by default for GPU acceleration
     enabled: true,
 
-    // User can choose Canvas renderer on any platform
-    preferCanvas: false,
+    // User can choose DOM renderer on any platform (canvas removed in xterm 6.0)
+    preferDOM: false,
 
     // Handle WebGL context loss gracefully
     enableContextLoss: true,
@@ -107,7 +107,7 @@ export const XTERM_PERFORMANCE_CONFIG = {
 
 export type XTermPlatform = "darwin" | "win32" | "linux";
 
-type RendererType = "canvas" | "dom";
+type RendererType = "dom";
 type LogLevel = "off" | "error" | "warn" | "info" | "debug";
 
 export type ResolvedXTermPerformance = {
@@ -127,7 +127,7 @@ export type ResolvedXTermPerformance = {
     rendererType?: RendererType;
   };
   useWebGLAddon: boolean;
-  preferCanvasRenderer: boolean;
+  preferDOMRenderer: boolean;
 };
 
 const isLowMemoryDevice = (deviceMemoryGb?: number) =>
@@ -141,11 +141,11 @@ export function getXTermConfig(platform: XTermPlatform = "darwin") {
   return resolveXTermPerformanceConfig({ platform }).options;
 }
 
-export type RendererPreference = "auto" | "webgl" | "canvas";
+export type RendererPreference = "auto" | "webgl" | "dom";
 
 /**
  * Resolve a platform and hardware aware performance profile.
- * When rendererType is 'auto', uses Canvas on low-memory devices to avoid WebGL overhead.
+ * When rendererType is 'auto', uses DOM on low-memory devices to avoid WebGL overhead.
  */
 export function resolveXTermPerformanceConfig({
   platform = "darwin",
@@ -160,15 +160,15 @@ export function resolveXTermPerformanceConfig({
 
   const lowMem = isLowMemoryDevice(deviceMemoryGb);
 
-  // Determine if we should use Canvas renderer
-  let resolvedPreferCanvas: boolean;
-  if (rendererType === "canvas") {
-    resolvedPreferCanvas = true;
+  // Determine if we should use DOM renderer (canvas removed in xterm 6.0)
+  let resolvedPreferDOM: boolean;
+  if (rendererType === "dom") {
+    resolvedPreferDOM = true;
   } else if (rendererType === "webgl") {
-    resolvedPreferCanvas = false;
+    resolvedPreferDOM = false;
   } else {
-    // Auto mode: use Canvas on low-memory devices
-    resolvedPreferCanvas = baseConfig.webgl.preferCanvas || lowMem;
+    // Auto mode: use DOM on low-memory devices
+    resolvedPreferDOM = baseConfig.webgl.preferDOM || lowMem;
   }
 
   const scrollbackProfile = lowMem
@@ -177,7 +177,7 @@ export function resolveXTermPerformanceConfig({
       ? "macOS"
       : "default";
 
-  const resolvedRendererType = resolvedPreferCanvas ? ("canvas" as const) : undefined;
+  const resolvedRendererType = resolvedPreferDOM ? ("dom" as const) : undefined;
 
   const baseOptions = {
     scrollback: baseConfig.scrollback[scrollbackProfile],
@@ -200,7 +200,7 @@ export function resolveXTermPerformanceConfig({
 
   return {
     options,
-    useWebGLAddon: baseConfig.webgl.enabled && !resolvedPreferCanvas,
-    preferCanvasRenderer: resolvedPreferCanvas,
+    useWebGLAddon: baseConfig.webgl.enabled && !resolvedPreferDOM,
+    preferDOMRenderer: resolvedPreferDOM,
   };
 }

infrastructure/persistence/secureFieldAdapter.ts

@@ -9,7 +9,7 @@
  * function degrades to a no-op — values pass through unmodified.
  */
 
-import type { Host, Identity, SSHKey } from "../../domain/models";
+import type { GroupConfig, Host, Identity, SSHKey } from "../../domain/models";
 import type { ProviderConnection, S3Config, WebDAVConfig } from "../../domain/sync";
 import { netcattyBridge } from "../services/netcattyBridge";
 
@@ -91,6 +91,38 @@ export async function decryptIdentitySecrets(identity: Identity): Promise<Identi
   return out;
 }
 
+// ---------------------------------------------------------------------------
+// GroupConfig
+// ---------------------------------------------------------------------------
+
+export async function encryptGroupConfigSecrets(config: GroupConfig): Promise<GroupConfig> {
+  const out = { ...config };
+  out.password = await encryptField(out.password);
+  out.telnetPassword = await encryptField(out.telnetPassword);
+  if (out.proxyConfig?.password) {
+    out.proxyConfig = { ...out.proxyConfig, password: await encryptField(out.proxyConfig.password) };
+  }
+  return out;
+}
+
+export async function decryptGroupConfigSecrets(config: GroupConfig): Promise<GroupConfig> {
+  const out = { ...config };
+  out.password = await decryptField(out.password);
+  out.telnetPassword = await decryptField(out.telnetPassword);
+  if (out.proxyConfig?.password) {
+    out.proxyConfig = { ...out.proxyConfig, password: await decryptField(out.proxyConfig.password) };
+  }
+  return out;
+}
+
+export function encryptGroupConfigs(configs: GroupConfig[]): Promise<GroupConfig[]> {
+  return Promise.all(configs.map(encryptGroupConfigSecrets));
+}
+
+export function decryptGroupConfigs(configs: GroupConfig[]): Promise<GroupConfig[]> {
+  return Promise.all(configs.map(decryptGroupConfigSecrets));
+}
+
 // ---------------------------------------------------------------------------
 // Provider Connection (Cloud Sync)
 // ---------------------------------------------------------------------------

lib/localFonts.ts

@@ -104,11 +104,12 @@ export async function getMonospaceFonts(): Promise<TerminalFont[]> {
         // 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)
+        // Deduplicate by family name, case-insensitive (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);
+            const key = f.family.toLowerCase();
+            if (uniqueFamilies.has(key)) return false;
+            uniqueFamilies.add(key);
             return true;
         });
 

lib/localShell.ts

@@ -4,7 +4,9 @@ export type LocalOs = 'linux' | 'macos' | 'windows';
 const POWERSHELL_SHELLS = new Set(['powershell', 'powershell.exe', 'pwsh', 'pwsh.exe']);
 const CMD_SHELLS = new Set(['cmd', 'cmd.exe']);
 const FISH_SHELLS = new Set(['fish']);
-const POSIX_SHELLS = new Set(['sh', 'bash', 'zsh', 'ksh', 'dash', 'ash']);
+const POSIX_SHELLS = new Set(['sh', 'bash', 'zsh', 'ksh', 'dash', 'ash', 'bash.exe']);
+// WSL launcher — runs a Linux shell inside WSL, classify as posix
+const WSL_SHELLS = new Set(['wsl', 'wsl.exe']);
 
 const getExecutableBaseName = (filePath: string | undefined): string => {
   const normalized = String(filePath || '').trim();
@@ -29,6 +31,7 @@ export const classifyLocalShellType = (
   if (CMD_SHELLS.has(shellName)) return 'cmd';
   if (FISH_SHELLS.has(shellName)) return 'fish';
   if (POSIX_SHELLS.has(shellName)) return 'posix';
+  if (WSL_SHELLS.has(shellName)) return 'posix';
   if (!shellName) {
     return detectLocalOs(platformLike) === 'windows' ? 'powershell' : 'posix';
   }

lib/useDiscoveredShells.ts

@@ -0,0 +1,77 @@
+import { useEffect, useState } from "react";
+import { netcattyBridge } from "../infrastructure/services/netcattyBridge";
+
+let shellCache: DiscoveredShell[] | null = null;
+let shellPromise: Promise<DiscoveredShell[]> | null = null;
+
+export function useDiscoveredShells(): DiscoveredShell[] {
+  const [shells, setShells] = useState<DiscoveredShell[]>(shellCache ?? []);
+
+  useEffect(() => {
+    if (shellCache) {
+      setShells(shellCache);
+      return;
+    }
+
+    const bridge = netcattyBridge.get();
+    if (!bridge?.discoverShells) return;
+
+    if (!shellPromise) {
+      shellPromise = bridge.discoverShells();
+    }
+
+    shellPromise.then((result) => {
+      shellCache = result;
+      setShells(result);
+    }).catch((err) => {
+      console.warn("Failed to discover shells:", err);
+      // Clear the failed promise so the next mount can retry
+      shellPromise = null;
+    });
+  }, []);
+
+  return shells;
+}
+
+/**
+ * Resolve a localShell setting value to shell command and args.
+ * The value can be a discovered shell id (e.g., "wsl-ubuntu", "pwsh")
+ * or a custom path/command (e.g., "/usr/local/bin/fish" or "fish").
+ * Returns { command, args } or null when discovery hasn't loaded yet
+ * and the value might be a shell ID that can't be resolved yet.
+ */
+export function resolveShellSetting(
+  localShell: string,
+  discoveredShells: DiscoveredShell[]
+): { command: string; args?: string[] } | null {
+  if (!localShell) return null;
+
+  // Try to match as a discovered shell id
+  const shell = discoveredShells.find(s => s.id === localShell);
+  if (shell) {
+    return { command: shell.command, args: shell.args };
+  }
+
+  // No ID match — treat as a custom shell path/command and pass through.
+  // This handles both custom executables (e.g., "/usr/local/bin/fish", "pwsh-preview")
+  // and stale/synced IDs that no longer exist on this machine (graceful fallback
+  // to whatever the OS resolves the name to, or a spawn error the user can see).
+  return { command: localShell };
+}
+
+const DISTRO_ICONS = new Set([
+  "ubuntu", "debian", "kali", "alpine", "opensuse",
+  "fedora", "arch", "oracle", "linux",
+]);
+
+export function getShellIconPath(iconId: string): string {
+  if (DISTRO_ICONS.has(iconId)) {
+    return `/distro/${iconId}.svg`;
+  }
+  return `/shells/${iconId}.svg`;
+}
+
+/** Distro icons are monochrome black and need `dark:invert` in dark mode */
+export function isMonochromeShellIcon(iconId: string): boolean {
+  return DISTRO_ICONS.has(iconId);
+}

package-lock.json

@@ -32,13 +32,13 @@
         "@streamdown/cjk": "^1.0.2",
         "@streamdown/code": "^1.1.0",
         "@withfig/autocomplete": "^2.692.3",
-        "@xterm/addon-fit": "^0.10.0",
-        "@xterm/addon-search": "^0.15.0",
-        "@xterm/addon-serialize": "^0.13.0",
-        "@xterm/addon-unicode11": "^0.9.0",
-        "@xterm/addon-web-links": "^0.11.0",
-        "@xterm/addon-webgl": "^0.18.0",
-        "@xterm/xterm": "^5.5.0",
+        "@xterm/addon-fit": "^0.11.0",
+        "@xterm/addon-search": "^0.16.0",
+        "@xterm/addon-serialize": "^0.14.0",
+        "@xterm/addon-unicode-graphemes": "^0.4.0",
+        "@xterm/addon-web-links": "^0.12.0",
+        "@xterm/addon-webgl": "^0.19.0",
+        "@xterm/xterm": "^6.0.0",
         "@zed-industries/claude-agent-acp": "0.22.2",
         "@zed-industries/codex-acp": "0.10.0",
         "ai": "^6.0.116",
@@ -6685,62 +6685,49 @@
       }
     },
     "node_modules/@xterm/addon-fit": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/@xterm/addon-fit/-/addon-fit-0.10.0.tgz",
-      "integrity": "sha512-UFYkDm4HUahf2lnEyHvio51TNGiLK66mqP2JoATy7hRZeXaGMRDr00JiSF7m63vR5WKATF605yEggJKsw0JpMQ==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@xterm/xterm": "^5.0.0"
-      }
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-fit/-/addon-fit-0.11.0.tgz",
+      "integrity": "sha512-jYcgT6xtVYhnhgxh3QgYDnnNMYTcf8ElbxxFzX0IZo+vabQqSPAjC3c1wJrKB5E19VwQei89QCiZZP86DCPF7g==",
+      "license": "MIT"
     },
     "node_modules/@xterm/addon-search": {
-      "version": "0.15.0",
-      "resolved": "https://registry.npmjs.org/@xterm/addon-search/-/addon-search-0.15.0.tgz",
-      "integrity": "sha512-ZBZKLQ+EuKE83CqCmSSz5y1tx+aNOCUaA7dm6emgOX+8J9H1FWXZyrKfzjwzV+V14TV3xToz1goIeRhXBS5qjg==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@xterm/xterm": "^5.0.0"
-      }
+      "version": "0.16.0",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-search/-/addon-search-0.16.0.tgz",
+      "integrity": "sha512-9OeuBFu0/uZJPu+9AHKY6g/w0Czyb/Ut0A5t79I4ULoU4IfU5BEpPFVGQxP4zTTMdfZEYkVIRYbHBX1xWwjeSA==",
+      "license": "MIT"
     },
     "node_modules/@xterm/addon-serialize": {
-      "version": "0.13.0",
-      "resolved": "https://registry.npmjs.org/@xterm/addon-serialize/-/addon-serialize-0.13.0.tgz",
-      "integrity": "sha512-kGs8o6LWAmN1l2NpMp01/YkpxbmO4UrfWybeGu79Khw5K9+Krp7XhXbBTOTc3GJRRhd6EmILjpR8k5+odY39YQ==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@xterm/xterm": "^5.0.0"
-      }
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-serialize/-/addon-serialize-0.14.0.tgz",
+      "integrity": "sha512-uteyTU1EkrQa2Ux6P/uFl2fzmXI46jy5uoQMKEOM0fKTyiW7cSn0WrFenHm5vO5uEXX/GpwW/FgILvv3r0WbkA==",
+      "license": "MIT"
     },
-    "node_modules/@xterm/addon-unicode11": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/@xterm/addon-unicode11/-/addon-unicode11-0.9.0.tgz",
-      "integrity": "sha512-FxDnYcyuXhNl+XSqGZL/t0U9eiNb/q3EWT5rYkQT/zuig8Gz/VagnQANKHdDWFM2lTMk9ly0EFQxxxtZUoRetw==",
+    "node_modules/@xterm/addon-unicode-graphemes": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-unicode-graphemes/-/addon-unicode-graphemes-0.4.0.tgz",
+      "integrity": "sha512-9+/CqwbKcnlkJU4d3wIgO+wjsL8f6vyz+UwUWLu6nADQz8Gr8ONqGCJfdDjIdI+yYZLABQqQy47FzEM6AWELjw==",
       "license": "MIT"
     },
     "node_modules/@xterm/addon-web-links": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@xterm/addon-web-links/-/addon-web-links-0.11.0.tgz",
-      "integrity": "sha512-nIHQ38pQI+a5kXnRaTgwqSHnX7KE6+4SVoceompgHL26unAxdfP6IPqUTSYPQgSwM56hsElfoNrrW5V7BUED/Q==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@xterm/xterm": "^5.0.0"
-      }
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-web-links/-/addon-web-links-0.12.0.tgz",
+      "integrity": "sha512-4Smom3RPyVp7ZMYOYDoC/9eGJJJqYhnPLGGqJ6wOBfB8VxPViJNSKdgRYb8NpaM6YSelEKbA2SStD7lGyqaobw==",
+      "license": "MIT"
     },
     "node_modules/@xterm/addon-webgl": {
-      "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/@xterm/addon-webgl/-/addon-webgl-0.18.0.tgz",
-      "integrity": "sha512-xCnfMBTI+/HKPdRnSOHaJDRqEpq2Ugy8LEj9GiY4J3zJObo3joylIFaMvzBwbYRg8zLtkO0KQaStCeSfoaI2/w==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@xterm/xterm": "^5.0.0"
-      }
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-webgl/-/addon-webgl-0.19.0.tgz",
+      "integrity": "sha512-b3fMOsyLVuCeNJWxolACEUED0vm7qC0cy4wRvf3oURSzDTYVQiGPhTnhWZwIHdvC48Y+oLhvYXnY4XDXPoJo6A==",
+      "license": "MIT"
     },
     "node_modules/@xterm/xterm": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-5.5.0.tgz",
-      "integrity": "sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-6.0.0.tgz",
+      "integrity": "sha512-TQwDdQGtwwDt+2cgKDLn0IRaSxYu1tSUjgKarSDkUM0ZNiSRXFpjxEsvc/Zgc5kq5omJ+V0a8/kIM2WD3sMOYg==",
       "license": "MIT",
-      "peer": true
+      "workspaces": [
+        "addons/*"
+      ]
     },
     "node_modules/@yarnpkg/lockfile": {
       "version": "1.1.0",

package.json

@@ -50,13 +50,13 @@
     "@streamdown/cjk": "^1.0.2",
     "@streamdown/code": "^1.1.0",
     "@withfig/autocomplete": "^2.692.3",
-    "@xterm/addon-fit": "^0.10.0",
-    "@xterm/addon-search": "^0.15.0",
-    "@xterm/addon-serialize": "^0.13.0",
-    "@xterm/addon-unicode11": "^0.9.0",
-    "@xterm/addon-web-links": "^0.11.0",
-    "@xterm/addon-webgl": "^0.18.0",
-    "@xterm/xterm": "^5.5.0",
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/addon-search": "^0.16.0",
+    "@xterm/addon-serialize": "^0.14.0",
+    "@xterm/addon-unicode-graphemes": "^0.4.0",
+    "@xterm/addon-web-links": "^0.12.0",
+    "@xterm/addon-webgl": "^0.19.0",
+    "@xterm/xterm": "^6.0.0",
     "@zed-industries/claude-agent-acp": "0.22.2",
     "@zed-industries/codex-acp": "0.10.0",
     "ai": "^6.0.116",

public/shells/bash.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <!-- Dark charcoal rounded square -->
+  <rect width="32" height="32" rx="6" fill="#2D2D2D"/>
+  <!-- Green $_ prompt, bold and centered -->
+  <text x="7" y="21" font-family="monospace" font-size="16" font-weight="bold" fill="#4EC9B0">$_</text>
+</svg>

public/shells/cmd.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <!-- Dark background -->
+  <rect width="32" height="32" rx="6" fill="#1E1E1E"/>
+  <!-- Classic green C:\> prompt -->
+  <text x="3" y="15" font-family="monospace" font-size="8" font-weight="bold" fill="#00FF00">C:\&gt;</text>
+  <!-- Blinking cursor line -->
+  <rect x="3" y="20" width="8" height="2" fill="#00FF00" opacity="0.8"/>
+</svg>

public/shells/cygwin.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <!-- Dark rounded square -->
+  <rect width="32" height="32" rx="6" fill="#1A1A2E"/>
+  <!-- Gold border accent -->
+  <rect x="1" y="1" width="30" height="30" rx="5" fill="none" stroke="#FFD700" stroke-width="1.5"/>
+  <!-- CY text in gold -->
+  <text x="16" y="21" font-family="monospace" font-size="13" font-weight="bold" fill="#FFD700" text-anchor="middle">CY</text>
+</svg>

public/shells/fish.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <!-- Fish shell: simple fish shape in Fish shell green -->
+  <rect width="32" height="32" rx="6" fill="#1A2E1A"/>
+  <!-- Fish body -->
+  <ellipse cx="15" cy="16" rx="9" ry="6" fill="#4DB380"/>
+  <!-- Fish tail -->
+  <path d="M24 16 L29 11 L29 21 Z" fill="#3A9966"/>
+  <!-- Fish eye -->
+  <circle cx="10" cy="14" r="1.5" fill="#FFFFFF"/>
+  <circle cx="10" cy="14" r="0.8" fill="#1A2E1A"/>
+  <!-- Fish fin -->
+  <path d="M13 11 Q16 8 19 11" fill="none" stroke="#98C379" stroke-width="1.5" stroke-linecap="round"/>
+  <!-- Subtle highlight -->
+  <ellipse cx="14" cy="14" rx="4" ry="2" fill="#98C379" opacity="0.3"/>
+</svg>

public/shells/git-bash.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <!-- Git logo inspired icon -->
+  <rect width="32" height="32" rx="5" fill="#F05032"/>
+  <!-- Git diamond shape -->
+  <path d="M16 4 L28 16 L16 28 L4 16 Z" fill="none" stroke="#FFFFFF" stroke-width="2.5"/>
+  <!-- Git branch lines inside -->
+  <circle cx="16" cy="11" r="2.5" fill="#FFFFFF"/>
+  <circle cx="11" cy="16" r="2.5" fill="#FFFFFF"/>
+  <circle cx="21" cy="16" r="2.5" fill="#FFFFFF"/>
+  <line x1="16" y1="13.5" x2="16" y2="22" stroke="#FFFFFF" stroke-width="2"/>
+  <line x1="13.3" y1="17.5" x2="16" y2="22" stroke="#FFFFFF" stroke-width="2"/>
+  <circle cx="16" cy="22" r="2" fill="#FFFFFF"/>
+</svg>

public/shells/nushell.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <!-- Dark background -->
+  <rect width="32" height="32" rx="6" fill="#0D1117"/>
+  <!-- Teal "nu" text -->
+  <text x="5" y="17" font-family="monospace" font-size="12" font-weight="bold" fill="#4EAA97">nu</text>
+  <!-- > prompt with cursor -->
+  <text x="5" y="27" font-family="monospace" font-size="10" font-weight="bold" fill="#56D4C0">&gt;</text>
+  <text x="13" y="27" font-family="monospace" font-size="10" fill="#3A9985">_</text>
+</svg>

public/shells/powershell.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <!-- PowerShell blue rounded square -->
+  <rect width="32" height="32" rx="6" fill="#012456"/>
+  <!-- PS> prompt -->
+  <text x="4" y="15" font-family="monospace" font-size="10" font-weight="bold" fill="#FFFFFF">PS</text>
+  <text x="4" y="27" font-family="monospace" font-size="12" font-weight="bold" fill="#2CA5E0">&gt;_</text>
+</svg>

public/shells/pwsh.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <!-- Darker background for PowerShell Core -->
+  <rect width="32" height="32" rx="6" fill="#0D1117"/>
+  <!-- PS7 label -->
+  <text x="4" y="16" font-family="monospace" font-size="9" font-weight="bold" fill="#5BC4F5">PS7</text>
+  <!-- >_ prompt -->
+  <text x="4" y="27" font-family="monospace" font-size="11" font-weight="bold" fill="#2CA5E0">&gt;_</text>
+</svg>

public/shells/terminal.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <!-- Neutral gray rounded square -->
+  <rect width="32" height="32" rx="6" fill="#3C3C3C"/>
+  <!-- White >_ prompt -->
+  <text x="6" y="21" font-family="monospace" font-size="16" font-weight="bold" fill="#FFFFFF">&gt;_</text>
+</svg>

public/shells/zsh.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <!-- Dark navy rounded square -->
+  <rect width="32" height="32" rx="6" fill="#1B1F3B"/>
+  <!-- Teal % prompt -->
+  <text x="8" y="18" font-family="monospace" font-size="14" font-weight="bold" fill="#00D4AA">%</text>
+  <!-- zsh label underneath -->
+  <text x="16" y="28" font-family="sans-serif" font-size="7" font-weight="bold" fill="#00D4AA" text-anchor="middle" opacity="0.7">zsh</text>
+</svg>