fix(ui): align bottom controls and preserve chrome theme

application/app/topTabsChromeTheme.test.ts

@@ -28,3 +28,35 @@ test("top tabs chrome theme keeps accent foreground in sync", () => {
   assert.match(supportSource, /removeStylePropertyIfSet\(tabsRoot, '--primary-foreground'\)/);
   assert.match(supportSource, /removeStylePropertyIfSet\(tabsRoot, '--accent-foreground'\)/);
 });
+
+test("bottom title bar receives and clears the same active theme as the tabs", async () => {
+  const { applyTopTabsChromeThemeVars, clearTopTabsChromeThemeVars } = await import('./topTabsChromeTheme.ts');
+  const { TERMINAL_THEMES } = await import('../../infrastructure/config/terminalThemes.ts');
+  const makeRoot = () => {
+    const values = new Map<string, string>();
+    return { style: {
+      getPropertyValue: (key: string) => values.get(key) ?? '',
+      setProperty: (key: string, value: string) => values.set(key, value),
+      removeProperty: (key: string) => values.delete(key),
+    }};
+  };
+  const tabs = makeRoot();
+  const titlebar = makeRoot();
+  const original = Object.getOwnPropertyDescriptor(globalThis, 'document');
+  Object.defineProperty(globalThis, 'document', { configurable: true, value: {
+    querySelector: (selector: string) => selector === '[data-top-tabs-root]' ? tabs : titlebar,
+  }});
+  try {
+    applyTopTabsChromeThemeVars(TERMINAL_THEMES[0]);
+    for (const property of ['--secondary', '--foreground', '--top-tabs-bg']) {
+      assert.notEqual(tabs.style.getPropertyValue(property), '');
+      assert.equal(titlebar.style.getPropertyValue(property), tabs.style.getPropertyValue(property));
+    }
+    clearTopTabsChromeThemeVars();
+    assert.equal(tabs.style.getPropertyValue('--secondary'), '');
+    assert.equal(titlebar.style.getPropertyValue('--secondary'), '');
+  } finally {
+    if (original) Object.defineProperty(globalThis, 'document', original);
+    else Reflect.deleteProperty(globalThis, 'document');
+  }
+});

application/app/topTabsChromeTheme.ts

@@ -70,23 +70,31 @@ const TOP_TABS_THEME_PROPERTIES = [
   '--muted-foreground',
 ] as const;
 
+export function getTopTabsChromeRoots(): HTMLElement[] {
+  if (typeof document === 'undefined') return [];
+  return [
+    document.querySelector<HTMLElement>('[data-top-tabs-root]'),
+    document.querySelector<HTMLElement>('[data-tab-window-titlebar]'),
+  ].filter((root): root is HTMLElement => root !== null);
+}
+
 let topTabsChromeThemeVarsApplied = false;
 
 export function clearTopTabsChromeThemeVars(): void {
   if (typeof document === 'undefined') return;
   if (!topTabsChromeThemeVarsApplied) return;
-  const tabsRoot = document.querySelector<HTMLElement>('[data-top-tabs-root]');
-  if (!tabsRoot) return;
-  for (const property of TOP_TABS_THEME_PROPERTIES) {
-    removeStylePropertyIfSet(tabsRoot, property);
+  for (const root of getTopTabsChromeRoots()) {
+    for (const property of TOP_TABS_THEME_PROPERTIES) {
+      removeStylePropertyIfSet(root, property);
+    }
   }
   topTabsChromeThemeVarsApplied = false;
 }
 
 export function applyTopTabsChromeThemeVars(theme: TerminalTheme): void {
   if (typeof document === 'undefined') return;
-  const tabsRoot = document.querySelector<HTMLElement>('[data-top-tabs-root]');
-  if (!tabsRoot) return;
+  const roots = getTopTabsChromeRoots();
+  if (roots.length === 0) return;
 
   const bg = hexToHslToken(theme.colors.background);
   const fg = hexToHslToken(theme.colors.foreground);
@@ -97,19 +105,21 @@ export function applyTopTabsChromeThemeVars(theme: TerminalTheme): void {
   const border = adjustLightnessToken(bg, isDark ? 12 : -10);
   const mutedFg = adjustSaturationToken(adjustLightnessToken(fg, isDark ? -20 : 20), 0.5);
 
-  setStylePropertyIfChanged(tabsRoot, '--background', bg);
-  setStylePropertyIfChanged(tabsRoot, '--foreground', fg);
-  setStylePropertyIfChanged(tabsRoot, '--accent', accent);
-  setStylePropertyIfChanged(tabsRoot, '--accent-foreground', accentForeground);
-  setStylePropertyIfChanged(tabsRoot, '--primary', accent);
-  setStylePropertyIfChanged(tabsRoot, '--primary-foreground', accentForeground);
-  setStylePropertyIfChanged(tabsRoot, '--secondary', secondary);
-  setStylePropertyIfChanged(tabsRoot, '--border', border);
-  setStylePropertyIfChanged(tabsRoot, '--muted-foreground', mutedFg);
-  setStylePropertyIfChanged(tabsRoot, '--top-tabs-bg', 'hsl(var(--secondary))');
-  setStylePropertyIfChanged(tabsRoot, '--top-tabs-fg', 'hsl(var(--foreground))');
-  setStylePropertyIfChanged(tabsRoot, '--top-tabs-muted', 'hsl(var(--muted-foreground))');
-  setStylePropertyIfChanged(tabsRoot, '--top-tabs-active-bg', 'hsl(var(--background))');
-  setStylePropertyIfChanged(tabsRoot, '--top-tabs-accent', 'hsl(var(--accent))');
+  for (const tabsRoot of roots) {
+    setStylePropertyIfChanged(tabsRoot, '--background', bg);
+    setStylePropertyIfChanged(tabsRoot, '--foreground', fg);
+    setStylePropertyIfChanged(tabsRoot, '--accent', accent);
+    setStylePropertyIfChanged(tabsRoot, '--accent-foreground', accentForeground);
+    setStylePropertyIfChanged(tabsRoot, '--primary', accent);
+    setStylePropertyIfChanged(tabsRoot, '--primary-foreground', accentForeground);
+    setStylePropertyIfChanged(tabsRoot, '--secondary', secondary);
+    setStylePropertyIfChanged(tabsRoot, '--border', border);
+    setStylePropertyIfChanged(tabsRoot, '--muted-foreground', mutedFg);
+    setStylePropertyIfChanged(tabsRoot, '--top-tabs-bg', 'hsl(var(--secondary))');
+    setStylePropertyIfChanged(tabsRoot, '--top-tabs-fg', 'hsl(var(--foreground))');
+    setStylePropertyIfChanged(tabsRoot, '--top-tabs-muted', 'hsl(var(--muted-foreground))');
+    setStylePropertyIfChanged(tabsRoot, '--top-tabs-active-bg', 'hsl(var(--background))');
+    setStylePropertyIfChanged(tabsRoot, '--top-tabs-accent', 'hsl(var(--accent))');
+  }
   topTabsChromeThemeVarsApplied = true;
 }

application/i18n/locales/en/core.ts

@@ -358,6 +358,9 @@ export const enCoreMessages: Messages = {
   'settings.vault.selectBeforeConnectDesc': 'Click once to select a host (accent highlight in grid view), click again to connect. Groups work the same way. Default remains single-click connect.',
   'settings.vault.showOnlyUngroupedHostsInRoot': 'Only show ungrouped hosts at root',
   'settings.vault.showOnlyUngroupedHostsInRootDesc': 'When enabled, the root host list only shows hosts without a group. Open a group from the sidebar to see grouped hosts.',
+  'settings.appearance.tabBarPosition': 'Tab bar position',
+  'settings.appearance.tabBarPosition.top': 'Top',
+  'settings.appearance.tabBarPosition.bottom': 'Bottom',
   'settings.vault.showSftpTab': 'Show SFTP tab',
   'settings.vault.showSftpTabDesc': 'Display the standalone SFTP view in the top tab bar. When hidden, use the in-session SFTP side panel instead.',
   'settings.vault.showHostTreeSidebar': 'Show host list sidebar',

application/i18n/locales/es/core.ts

@@ -273,6 +273,9 @@ export const esCoreMessages: Messages = {
   'settings.vault.selectBeforeConnectDesc': 'Haz clic una vez para seleccionar un host (resaltado con el color de acento en la vista de cuadrícula), haz clic de nuevo para conectarte. Los grupos funcionan igual. El valor predeterminado sigue siendo conectarse con un solo clic.',
   'settings.vault.showOnlyUngroupedHostsInRoot': 'Mostrar solo hosts sin grupo en la raíz',
   'settings.vault.showOnlyUngroupedHostsInRootDesc': 'Cuando está activado, la lista de hosts de la raíz solo muestra hosts sin grupo. Abre un grupo desde la barra lateral para ver los hosts agrupados.',
+  'settings.appearance.tabBarPosition': 'Posición de la barra de pestañas',
+  'settings.appearance.tabBarPosition.top': 'Arriba',
+  'settings.appearance.tabBarPosition.bottom': 'Abajo',
   'settings.vault.showSftpTab': 'Mostrar pestaña SFTP',
   'settings.vault.showSftpTabDesc': 'Muestra la vista SFTP independiente en la barra de pestañas superior. Cuando está oculta, usa el panel lateral SFTP dentro de la sesión.',
   'settings.vault.showHostTreeSidebar': 'Mostrar barra lateral de lista de hosts',

application/i18n/locales/ru/core.ts

@@ -342,6 +342,9 @@ export const ruCoreMessages: Messages = {
   'settings.vault.selectBeforeConnectDesc': 'Один клик выбирает хост (акцентная рамка в сетке), повторный клик подключает. Группы работают так же. По умолчанию — подключение одним кликом.',
   'settings.vault.showOnlyUngroupedHostsInRoot': 'Показывать в корне только хосты без группы',
   'settings.vault.showOnlyUngroupedHostsInRootDesc': 'Если включено, в корневом списке хостов будут показаны только хосты без группы. Откройте группу на боковой панели, чтобы увидеть сгруппированные хосты.',
+  'settings.appearance.tabBarPosition': 'Расположение панели вкладок',
+  'settings.appearance.tabBarPosition.top': 'Сверху',
+  'settings.appearance.tabBarPosition.bottom': 'Снизу',
   'settings.vault.showSftpTab': 'Показывать вкладку SFTP',
   'settings.vault.showSftpTabDesc': 'Показывать отдельный SFTP-вид в верхней панели вкладок. Если скрыто, используйте боковую панель SFTP внутри сессии.',
   'settings.vault.showHostTreeSidebar': 'Показывать боковую панель хостов',

application/i18n/locales/zh-CN/core.ts

@@ -356,6 +356,9 @@ export const zhCNCoreMessages: Messages = {
   'settings.vault.selectBeforeConnectDesc': '单击选中主机（网格模式显示强调色边框），再次单击连接；分组同理。默认仍为单击直接连接。',
   'settings.vault.showOnlyUngroupedHostsInRoot': '根目录只显示未分组主机',
   'settings.vault.showOnlyUngroupedHostsInRootDesc': '开启后，主机库根目录的主机列表只显示没有分组的主机，已分组主机请从左侧分组进入查看。',
+  'settings.appearance.tabBarPosition': '标签栏位置',
+  'settings.appearance.tabBarPosition.top': '顶部',
+  'settings.appearance.tabBarPosition.bottom': '底部',
   'settings.vault.showSftpTab': '显示 SFTP 标签页',
   'settings.vault.showSftpTabDesc': '在顶部标签栏显示独立的 SFTP 视图。关闭后可改用会话内左侧的 SFTP 侧栏。',
   'settings.vault.showHostTreeSidebar': '显示主机列表侧栏',

application/i18n/locales/zh-TW/core.ts

@@ -358,6 +358,9 @@ export const zhTWCoreMessages: Messages = {
   'settings.vault.selectBeforeConnectDesc': '點一下選取主機（網格模式會顯示強調色邊框），再點一下才連線；群組同理。預設仍是點一下直接連線。',
   'settings.vault.showOnlyUngroupedHostsInRoot': '根目錄只顯示未歸類主機',
   'settings.vault.showOnlyUngroupedHostsInRootDesc': '開啟後，主機庫根目錄的主機列表只顯示沒有群組的主機，已歸類的主機請從左側群組進入檢視。',
+  'settings.appearance.tabBarPosition': '分頁列位置',
+  'settings.appearance.tabBarPosition.top': '頂部',
+  'settings.appearance.tabBarPosition.bottom': '底部',
   'settings.vault.showSftpTab': '顯示 SFTP 分頁',
   'settings.vault.showSftpTabDesc': '在頂部分頁列顯示獨立的 SFTP 檢視。關閉後可改用工作階段內左側的 SFTP 側欄。',
   'settings.vault.showHostTreeSidebar': '顯示主機列表側欄',

application/state/settingsChromeStore.ts

@@ -23,6 +23,7 @@ export type SettingsChromeSnapshot = {
   darkUiThemeId: string;
   uiLanguage: UILanguage;
   windowOpacity: number;
+  tabBarPosition: 'top' | 'bottom';
   showSftpTab: boolean;
   showHostTreeSidebar: boolean;
   showRecentHosts: boolean;
@@ -55,6 +56,7 @@ export const DEFAULT_SETTINGS_CHROME_SNAPSHOT: SettingsChromeSnapshot = Object.f
   darkUiThemeId: 'default',
   uiLanguage: 'en',
   windowOpacity: 1,
+  tabBarPosition: 'top',
   showSftpTab: true,
   showHostTreeSidebar: true,
   showRecentHosts: true,
@@ -80,6 +82,7 @@ export function settingsChromeSnapshotsEqual(
     && a.darkUiThemeId === b.darkUiThemeId
     && a.uiLanguage === b.uiLanguage
     && a.windowOpacity === b.windowOpacity
+    && a.tabBarPosition === b.tabBarPosition
     && a.showSftpTab === b.showSftpTab
     && a.showHostTreeSidebar === b.showHostTreeSidebar
     && a.showRecentHosts === b.showRecentHosts

application/state/settingsIpcSync.ts

@@ -1,3 +1,4 @@
+import { normalizeTabBarPosition, type TabBarPosition } from '../../domain/tabBarPosition';
 import { useEffect, type Dispatch, type SetStateAction } from 'react';
 import type { CustomKeyBindings, HotkeyScheme, SessionLogFormat, TerminalSettings, UILanguage } from '../../domain/models';
 import { parseCustomKeyBindingsStorageRecord } from '../../domain/customKeyBindings';
@@ -44,6 +45,7 @@ import {
   STORAGE_KEY_UI_THEME_LIGHT,
   STORAGE_KEY_WORKSPACE_FOCUS_STYLE,
   STORAGE_KEY_SHOW_HOST_TREE_SIDEBAR,
+  STORAGE_KEY_TAB_BAR_POSITION,
   STORAGE_KEY_TERMINAL_SIDE_PANEL_AUTO_OPEN,
   STORAGE_KEY_TERMINAL_SIDE_PANEL_AUTO_OPEN_TAB,
   STORAGE_KEY_WINDOW_OPACITY,
@@ -100,6 +102,7 @@ interface UseSettingsIpcSyncParams {
   setSftpFollowTerminalCwd: Dispatch<SetStateAction<boolean>>;
   setSftpDefaultViewMode: Dispatch<SetStateAction<'list' | 'tree'>>;
   setWorkspaceFocusStyleState: Dispatch<SetStateAction<'dim' | 'border'>>;
+  setTabBarPositionState: Dispatch<SetStateAction<TabBarPosition>>;
   setShowHostTreeSidebarState: Dispatch<SetStateAction<boolean>>;
   setTerminalSidePanelAutoOpenState: Dispatch<SetStateAction<boolean>>;
   setTerminalSidePanelAutoOpenTabState: Dispatch<SetStateAction<TerminalSidePanelAutoOpenTab>>;
@@ -146,6 +149,7 @@ export function useSettingsIpcSync({
   setSftpFollowTerminalCwd,
   setSftpDefaultViewMode,
   setWorkspaceFocusStyleState,
+  setTabBarPositionState,
   setShowHostTreeSidebarState,
   setTerminalSidePanelAutoOpenState,
   setTerminalSidePanelAutoOpenTabState,
@@ -300,6 +304,9 @@ export function useSettingsIpcSync({
       if (key === STORAGE_KEY_WORKSPACE_FOCUS_STYLE && (value === 'dim' || value === 'border')) {
         setWorkspaceFocusStyleState((prev) => (prev === value ? prev : value));
       }
+      if (key === STORAGE_KEY_TAB_BAR_POSITION) {
+        setTabBarPositionState(normalizeTabBarPosition(value));
+      }
       if (key === STORAGE_KEY_SHOW_HOST_TREE_SIDEBAR && typeof value === 'boolean') {
         setShowHostTreeSidebarState((prev) => (prev === value ? prev : value));
       }
@@ -360,6 +367,7 @@ export function useSettingsIpcSync({
     setSftpAutoOpenSidebar,
     setSftpFollowTerminalCwd,
     setSftpDefaultViewMode,
+    setTabBarPositionState,
     setShowHostTreeSidebarState,
     setTerminalSidePanelAutoOpenState,
     setTerminalSidePanelAutoOpenTabState,

application/state/settingsStorageSync.ts

@@ -1,3 +1,4 @@
+import { normalizeTabBarPosition, type TabBarPosition } from '../../domain/tabBarPosition';
 import { useEffect, useRef, type Dispatch, type SetStateAction } from 'react';
 import type { CustomKeyBindings, HotkeyScheme, SessionLogFormat, TerminalSettings, UILanguage } from '../../domain/models';
 import { parseCustomKeyBindingsStorageRecord } from '../../domain/customKeyBindings';
@@ -34,6 +35,7 @@ import {
   STORAGE_KEY_SHOW_RECENT_HOSTS,
   STORAGE_KEY_HOST_CLICK_BEHAVIOR,
   STORAGE_KEY_SHOW_SFTP_TAB,
+  STORAGE_KEY_TAB_BAR_POSITION,
   STORAGE_KEY_SHOW_HOST_TREE_SIDEBAR,
   STORAGE_KEY_TERMINAL_SIDE_PANEL_AUTO_OPEN,
   STORAGE_KEY_TERMINAL_SIDE_PANEL_AUTO_OPEN_TAB,
@@ -90,6 +92,7 @@ interface UseSettingsStorageSyncParams {
   showRecentHosts: boolean;
   hostClickBehavior: HostClickBehavior;
   showOnlyUngroupedHostsInRoot: boolean;
+  tabBarPosition: TabBarPosition;
   showSftpTab: boolean;
   showHostTreeSidebar: boolean;
   terminalSidePanelAutoOpen: boolean;
@@ -139,6 +142,7 @@ interface UseSettingsStorageSyncParams {
   setShowRecentHostsState: Dispatch<SetStateAction<boolean>>;
   setHostClickBehaviorState: Dispatch<SetStateAction<HostClickBehavior>>;
   setShowOnlyUngroupedHostsInRootState: Dispatch<SetStateAction<boolean>>;
+  setTabBarPositionState: Dispatch<SetStateAction<TabBarPosition>>;
   setShowSftpTabState: Dispatch<SetStateAction<boolean>>;
   setShowHostTreeSidebarState: Dispatch<SetStateAction<boolean>>;
   setTerminalSidePanelAutoOpenState: Dispatch<SetStateAction<boolean>>;
@@ -176,7 +180,7 @@ export function useSettingsStorageSync({
   terminalThemeId, followAppTerminalTheme, terminalFontFamilyId, terminalFontSize,
   sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles,
   sftpUseCompressedUpload, sftpSkipUnchanged, sftpAutoOpenSidebar, sftpFollowTerminalCwd, sftpDefaultViewMode,
-  showRecentHosts, hostClickBehavior, showOnlyUngroupedHostsInRoot, showSftpTab, showHostTreeSidebar, terminalSidePanelAutoOpen, terminalSidePanelAutoOpenTab, shellOnlyTabNumberShortcuts, showTabNumberBadges, disableTerminalFontZoom, restorePreviousSession, restoreTerminalCwd, startupLanding,
+  showRecentHosts, hostClickBehavior, showOnlyUngroupedHostsInRoot, tabBarPosition, showSftpTab, showHostTreeSidebar, terminalSidePanelAutoOpen, terminalSidePanelAutoOpenTab, shellOnlyTabNumberShortcuts, showTabNumberBadges, disableTerminalFontZoom, restorePreviousSession, restoreTerminalCwd, startupLanding,
   editorWordWrap, sessionLogsEnabled, sessionLogsDir, sessionLogsFormat, sessionLogsTimestampsEnabled, sshDebugLogsEnabled, sshDeepLinkEnabled, jmsDeepLinkEnabled, explorerContextMenuEnabled,
   globalHotkeyEnabled, autoUpdateEnabled, windowOpacity, appIconVariant,
   setTheme, setLightUiThemeId, setDarkUiThemeId, setAccentMode, applyIncomingCustomAccent,
@@ -185,7 +189,7 @@ export function useSettingsStorageSync({
   setFollowAppTerminalThemeState, setTerminalFontFamilyId, setTerminalFontSize,
   setSftpDoubleClickBehavior, setSftpAutoSync, setSftpShowHiddenFiles,
   setSftpUseCompressedUpload, setSftpSkipUnchanged, setSftpAutoOpenSidebar, setSftpFollowTerminalCwd, setSftpDefaultViewMode,
-  setShowRecentHostsState, setHostClickBehaviorState, setShowOnlyUngroupedHostsInRootState, setShowSftpTabState, setShowHostTreeSidebarState, setTerminalSidePanelAutoOpenState, setTerminalSidePanelAutoOpenTabState, setShellOnlyTabNumberShortcutsState, setShowTabNumberBadgesState, setDisableTerminalFontZoomState, setRestorePreviousSessionState, setRestoreTerminalCwdState, setStartupLandingState,
+  setShowRecentHostsState, setHostClickBehaviorState, setShowOnlyUngroupedHostsInRootState, setTabBarPositionState, setShowSftpTabState, setShowHostTreeSidebarState, setTerminalSidePanelAutoOpenState, setTerminalSidePanelAutoOpenTabState, setShellOnlyTabNumberShortcutsState, setShowTabNumberBadgesState, setDisableTerminalFontZoomState, setRestorePreviousSessionState, setRestoreTerminalCwdState, setStartupLandingState,
   setEditorWordWrapState, setSessionLogsEnabled, setSessionLogsDir, setSessionLogsFormat, setSessionLogsTimestampsEnabled, setSshDebugLogsEnabled, setSshDeepLinkEnabledState, setJmsDeepLinkEnabledState, setExplorerContextMenuEnabledState,
   setGlobalHotkeyEnabled, setWindowOpacity, setAppIconVariant, setAutoUpdateEnabled, setWorkspaceFocusStyleState,
   setSftpTransferConcurrencyState, setSshTransportIdleTtlMsState,
@@ -200,7 +204,7 @@ export function useSettingsStorageSync({
     terminalThemeId, followAppTerminalTheme, terminalFontFamilyId, terminalFontSize,
     sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles,
     sftpUseCompressedUpload, sftpSkipUnchanged, sftpAutoOpenSidebar, sftpFollowTerminalCwd, sftpDefaultViewMode,
-    showRecentHosts, hostClickBehavior, showOnlyUngroupedHostsInRoot, showSftpTab, showHostTreeSidebar, terminalSidePanelAutoOpen, terminalSidePanelAutoOpenTab, shellOnlyTabNumberShortcuts, showTabNumberBadges, disableTerminalFontZoom, restorePreviousSession, restoreTerminalCwd, startupLanding,
+    showRecentHosts, hostClickBehavior, showOnlyUngroupedHostsInRoot, tabBarPosition, showSftpTab, showHostTreeSidebar, terminalSidePanelAutoOpen, terminalSidePanelAutoOpenTab, shellOnlyTabNumberShortcuts, showTabNumberBadges, disableTerminalFontZoom, restorePreviousSession, restoreTerminalCwd, startupLanding,
     editorWordWrap, sessionLogsEnabled, sessionLogsDir, sessionLogsFormat, sessionLogsTimestampsEnabled, sshDebugLogsEnabled, sshDeepLinkEnabled, jmsDeepLinkEnabled, explorerContextMenuEnabled,
     globalHotkeyEnabled, autoUpdateEnabled, windowOpacity, appIconVariant,
   });
@@ -210,7 +214,7 @@ export function useSettingsStorageSync({
     terminalThemeId, followAppTerminalTheme, terminalFontFamilyId, terminalFontSize,
     sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles,
     sftpUseCompressedUpload, sftpSkipUnchanged, sftpAutoOpenSidebar, sftpFollowTerminalCwd, sftpDefaultViewMode,
-    showRecentHosts, hostClickBehavior, showOnlyUngroupedHostsInRoot, showSftpTab, showHostTreeSidebar, terminalSidePanelAutoOpen, terminalSidePanelAutoOpenTab, shellOnlyTabNumberShortcuts, showTabNumberBadges, disableTerminalFontZoom, restorePreviousSession, restoreTerminalCwd, startupLanding,
+    showRecentHosts, hostClickBehavior, showOnlyUngroupedHostsInRoot, tabBarPosition, showSftpTab, showHostTreeSidebar, terminalSidePanelAutoOpen, terminalSidePanelAutoOpenTab, shellOnlyTabNumberShortcuts, showTabNumberBadges, disableTerminalFontZoom, restorePreviousSession, restoreTerminalCwd, startupLanding,
     editorWordWrap, sessionLogsEnabled, sessionLogsDir, sessionLogsFormat, sessionLogsTimestampsEnabled, sshDebugLogsEnabled, sshDeepLinkEnabled, jmsDeepLinkEnabled, explorerContextMenuEnabled,
     globalHotkeyEnabled, autoUpdateEnabled, windowOpacity, appIconVariant,
   };
@@ -431,6 +435,9 @@ export function useSettingsStorageSync({
           setShowOnlyUngroupedHostsInRootState(newValue);
         }
       }
+      if (e.key === STORAGE_KEY_TAB_BAR_POSITION) {
+        setTabBarPositionState(normalizeTabBarPosition(e.newValue));
+      }
       if (e.key === STORAGE_KEY_SHOW_SFTP_TAB && e.newValue !== null) {
         const newValue = e.newValue === 'true';
         if (newValue !== s.showSftpTab) {
@@ -575,7 +582,7 @@ export function useSettingsStorageSync({
     setTerminalSidePanelAutoOpenState,
     setTerminalSidePanelAutoOpenTabState,
     setShowRecentHostsState,
-    setShowSftpTabState,
+    setTabBarPositionState, setShowSftpTabState,
     setShellOnlyTabNumberShortcutsState,
     setShowTabNumberBadgesState,
     setDisableTerminalFontZoomState,

application/state/useSettingsState.ts

@@ -1,3 +1,4 @@
+import { normalizeTabBarPosition, type TabBarPosition } from '../../domain/tabBarPosition';
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type SetStateAction } from 'react';
 
 import { runThemeTransition, type ThemeTransitionMode } from './themeTransition';
@@ -78,6 +79,7 @@ import {
   STORAGE_KEY_HOST_CLICK_BEHAVIOR,
   STORAGE_KEY_SHOW_ONLY_UNGROUPED_HOSTS_IN_ROOT,
   STORAGE_KEY_SHOW_SFTP_TAB,
+  STORAGE_KEY_TAB_BAR_POSITION,
   STORAGE_KEY_SHOW_HOST_TREE_SIDEBAR,
   STORAGE_KEY_TERMINAL_SIDE_PANEL_AUTO_OPEN,
   STORAGE_KEY_TERMINAL_SIDE_PANEL_AUTO_OPEN_TAB,
@@ -413,6 +415,9 @@ export const useSettingsState = (options: { enableSettingsSync?: boolean; enable
     const stored = localStorageAdapter.readBoolean(STORAGE_KEY_SHOW_ONLY_UNGROUPED_HOSTS_IN_ROOT);
     return stored ?? DEFAULT_SHOW_ONLY_UNGROUPED_HOSTS_IN_ROOT;
   });
+  const [tabBarPosition, setTabBarPositionState] = useState<TabBarPosition>(() =>
+    normalizeTabBarPosition(readStoredString(STORAGE_KEY_TAB_BAR_POSITION)),
+  );
   const [showSftpTab, setShowSftpTabState] = useState<boolean>(() => {
     const stored = localStorageAdapter.readBoolean(STORAGE_KEY_SHOW_SFTP_TAB);
     return stored ?? DEFAULT_SHOW_SFTP_TAB;
@@ -1012,6 +1017,7 @@ export const useSettingsState = (options: { enableSettingsSync?: boolean; enable
     );
     const storedShowOnlyUngroupedHostsInRoot = localStorageAdapter.readBoolean(STORAGE_KEY_SHOW_ONLY_UNGROUPED_HOSTS_IN_ROOT);
     setShowOnlyUngroupedHostsInRootState(storedShowOnlyUngroupedHostsInRoot ?? DEFAULT_SHOW_ONLY_UNGROUPED_HOSTS_IN_ROOT);
+    setTabBarPositionState(normalizeTabBarPosition(readStoredString(STORAGE_KEY_TAB_BAR_POSITION)));
     const storedShowSftpTab = localStorageAdapter.readBoolean(STORAGE_KEY_SHOW_SFTP_TAB);
     setShowSftpTabState(storedShowSftpTab ?? DEFAULT_SHOW_SFTP_TAB);
     const storedShowHostTreeSidebar = localStorageAdapter.readBoolean(STORAGE_KEY_SHOW_HOST_TREE_SIDEBAR);
@@ -1198,6 +1204,7 @@ export const useSettingsState = (options: { enableSettingsSync?: boolean; enable
     setSftpFollowTerminalCwd,
     setSftpDefaultViewMode,
     setWorkspaceFocusStyleState,
+    setTabBarPositionState,
     setShowHostTreeSidebarState,
     setTerminalSidePanelAutoOpenState,
     setTerminalSidePanelAutoOpenTabState,
@@ -1254,7 +1261,7 @@ export const useSettingsState = (options: { enableSettingsSync?: boolean; enable
     terminalThemeId, followAppTerminalTheme, terminalFontFamilyId, terminalFontSize,
     sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles,
     sftpUseCompressedUpload, sftpSkipUnchanged, sftpAutoOpenSidebar, sftpFollowTerminalCwd, sftpDefaultViewMode,
-    showRecentHosts, hostClickBehavior, showOnlyUngroupedHostsInRoot, showSftpTab, showHostTreeSidebar, terminalSidePanelAutoOpen, terminalSidePanelAutoOpenTab, shellOnlyTabNumberShortcuts, showTabNumberBadges, disableTerminalFontZoom, restorePreviousSession, restoreTerminalCwd, startupLanding,
+    showRecentHosts, hostClickBehavior, showOnlyUngroupedHostsInRoot, tabBarPosition, showSftpTab, showHostTreeSidebar, terminalSidePanelAutoOpen, terminalSidePanelAutoOpenTab, shellOnlyTabNumberShortcuts, showTabNumberBadges, disableTerminalFontZoom, restorePreviousSession, restoreTerminalCwd, startupLanding,
     editorWordWrap, sessionLogsEnabled, sessionLogsDir, sessionLogsFormat, sessionLogsTimestampsEnabled, sshDebugLogsEnabled, sshDeepLinkEnabled, jmsDeepLinkEnabled, explorerContextMenuEnabled,
     globalHotkeyEnabled, autoUpdateEnabled, windowOpacity, appIconVariant,
     setTheme, setLightUiThemeId, setDarkUiThemeId, setAccentMode,
@@ -1264,7 +1271,7 @@ export const useSettingsState = (options: { enableSettingsSync?: boolean; enable
     setFollowAppTerminalThemeState, setTerminalFontFamilyId, setTerminalFontSize: applyIncomingTerminalFontSize,
     setSftpDoubleClickBehavior, setSftpAutoSync, setSftpShowHiddenFiles,
     setSftpUseCompressedUpload, setSftpSkipUnchanged, setSftpAutoOpenSidebar, setSftpFollowTerminalCwd, setSftpDefaultViewMode,
-    setShowRecentHostsState, setHostClickBehaviorState, setShowOnlyUngroupedHostsInRootState, setShowSftpTabState, setShowHostTreeSidebarState, setTerminalSidePanelAutoOpenState, setTerminalSidePanelAutoOpenTabState, setShellOnlyTabNumberShortcutsState, setShowTabNumberBadgesState, setDisableTerminalFontZoomState, setRestorePreviousSessionState, setRestoreTerminalCwdState, setStartupLandingState,
+    setShowRecentHostsState, setHostClickBehaviorState, setShowOnlyUngroupedHostsInRootState, setTabBarPositionState, setShowSftpTabState, setShowHostTreeSidebarState, setTerminalSidePanelAutoOpenState, setTerminalSidePanelAutoOpenTabState, setShellOnlyTabNumberShortcutsState, setShowTabNumberBadgesState, setDisableTerminalFontZoomState, setRestorePreviousSessionState, setRestoreTerminalCwdState, setStartupLandingState,
     setEditorWordWrapState, setSessionLogsEnabled, setSessionLogsDir, setSessionLogsFormat, setSessionLogsTimestampsEnabled, setSshDebugLogsEnabled, setSshDeepLinkEnabledState: applyIncomingSshDeepLinkEnabled, setJmsDeepLinkEnabledState: applyIncomingJmsDeepLinkEnabled, setExplorerContextMenuEnabledState: applyIncomingExplorerContextMenuEnabled,
     setGlobalHotkeyEnabled, setWindowOpacity: applyIncomingWindowOpacity, setAppIconVariant, setAutoUpdateEnabled, setWorkspaceFocusStyleState,
     setSftpTransferConcurrencyState, setSshTransportIdleTtlMsState,
@@ -1394,6 +1401,14 @@ export const useSettingsState = (options: { enableSettingsSync?: boolean; enable
     notifySettingsChanged(STORAGE_KEY_SHOW_ONLY_UNGROUPED_HOSTS_IN_ROOT, enabled);
   }, [notifySettingsChanged]);
 
+  const setTabBarPosition = useCallback((value: TabBarPosition) => {
+    const next = normalizeTabBarPosition(value);
+    setTabBarPositionState(next);
+    localStorageAdapter.writeString(STORAGE_KEY_TAB_BAR_POSITION, next);
+    if (!persistMountedRef.current) return;
+    notifySettingsChanged(STORAGE_KEY_TAB_BAR_POSITION, next);
+  }, [notifySettingsChanged]);
+
   const setShowSftpTab = useCallback((enabled: boolean) => {
     setShowSftpTabState(enabled);
     localStorageAdapter.writeBoolean(STORAGE_KEY_SHOW_SFTP_TAB, enabled);
@@ -1865,6 +1880,7 @@ export const useSettingsState = (options: { enableSettingsSync?: boolean; enable
       darkUiThemeId,
       uiLanguage,
       windowOpacity,
+      tabBarPosition,
       showSftpTab,
       showHostTreeSidebar,
       showRecentHosts,
@@ -1891,6 +1907,7 @@ export const useSettingsState = (options: { enableSettingsSync?: boolean; enable
     showHostTreeSidebar,
     showOnlyUngroupedHostsInRoot,
     showRecentHosts,
+    tabBarPosition,
     showSftpTab,
     showTabNumberBadges,
     terminalSettings.dynamicTabTitleMode,
@@ -2063,7 +2080,9 @@ export const useSettingsState = (options: { enableSettingsSync?: boolean; enable
     setHostClickBehavior,
     showOnlyUngroupedHostsInRoot,
     setShowOnlyUngroupedHostsInRoot,
+    tabBarPosition,
     showSftpTab,
+    setTabBarPosition,
     setShowSftpTab,
     showHostTreeSidebar,
     setShowHostTreeSidebar,
@@ -2139,7 +2158,7 @@ export const useSettingsState = (options: { enableSettingsSync?: boolean; enable
       terminalThemeId, terminalFontFamilyId, terminalFontSize, terminalSettings,
       customKeyBindings, editorWordWrap,
       sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles, sftpUseCompressedUpload, sftpSkipUnchanged, sftpAutoOpenSidebar, sftpFollowTerminalCwd, sftpDefaultViewMode,
-      showRecentHosts, hostClickBehavior, showOnlyUngroupedHostsInRoot, showSftpTab, showHostTreeSidebar, terminalSidePanelAutoOpen, terminalSidePanelAutoOpenTab, shellOnlyTabNumberShortcuts, showTabNumberBadges, disableTerminalFontZoom,
+      showRecentHosts, hostClickBehavior, showOnlyUngroupedHostsInRoot, tabBarPosition, showSftpTab, showHostTreeSidebar, terminalSidePanelAutoOpen, terminalSidePanelAutoOpenTab, shellOnlyTabNumberShortcuts, showTabNumberBadges, disableTerminalFontZoom,
       customThemes, workspaceFocusStyle, sessionLogsTimestampsEnabled, sshDebugLogsEnabled, sshDeepLinkEnabled, jmsDeepLinkEnabled, explorerContextMenuEnabled,
     ]),
   };

application/syncPayload.test.ts

@@ -1963,3 +1963,21 @@ test("applySyncPayload applies pluginSidecars through the production applier hoo
 
   assert.equal((applied as SyncPayload["pluginSidecars"])?.entries[0].value.clock, 3);
 });
+
+test("tab bar position survives settings export and import, with a safe fallback", async () => {
+  localStorage.clear();
+  localStorage.setItem(storageKeys.STORAGE_KEY_TAB_BAR_POSITION, "bottom");
+  const payload = buildSyncPayload(vault([]));
+  assert.equal(payload.settings?.tabBarPosition, "bottom");
+  localStorage.removeItem(storageKeys.STORAGE_KEY_TAB_BAR_POSITION);
+  await applySyncPayload(payload, { importVaultData: () => {} });
+  assert.equal(localStorage.getItem(storageKeys.STORAGE_KEY_TAB_BAR_POSITION), "bottom");
+
+  const invalid = { ...payload, settings: { tabBarPosition: "left" } } as unknown as SyncPayload;
+  await applySyncPayload(invalid, { importVaultData: () => {} });
+  assert.equal(localStorage.getItem(storageKeys.STORAGE_KEY_TAB_BAR_POSITION), "top");
+
+  localStorage.setItem(storageKeys.STORAGE_KEY_TAB_BAR_POSITION, "bottom");
+  await applySyncPayload({ ...payload, settings: {} }, { importVaultData: () => {} });
+  assert.equal(localStorage.getItem(storageKeys.STORAGE_KEY_TAB_BAR_POSITION), "bottom");
+});

application/syncPayload.ts

@@ -1,3 +1,4 @@
+import { normalizeTabBarPosition } from '../domain/tabBarPosition';
 /**
  * Sync Payload Builders - Single source of truth for constructing and applying
  * the encrypted cloud-sync payload.
@@ -92,6 +93,7 @@ import {
   STORAGE_KEY_HOST_CLICK_BEHAVIOR,
   STORAGE_KEY_SHOW_ONLY_UNGROUPED_HOSTS_IN_ROOT,
   STORAGE_KEY_SHOW_SFTP_TAB,
+  STORAGE_KEY_TAB_BAR_POSITION,
   STORAGE_KEY_SHOW_HOST_TREE_SIDEBAR,
   STORAGE_KEY_SHELL_ONLY_TAB_NUMBER_SHORTCUTS,
   STORAGE_KEY_SHOW_TAB_NUMBER_BADGES,
@@ -315,6 +317,7 @@ export const SYNCABLE_SETTING_STORAGE_KEYS = [
   STORAGE_KEY_HOST_CLICK_BEHAVIOR,
   STORAGE_KEY_SHOW_ONLY_UNGROUPED_HOSTS_IN_ROOT,
   STORAGE_KEY_SHOW_SFTP_TAB,
+  STORAGE_KEY_TAB_BAR_POSITION,
   STORAGE_KEY_SHELL_ONLY_TAB_NUMBER_SHORTCUTS,
   STORAGE_KEY_SHOW_TAB_NUMBER_BADGES,
   STORAGE_KEY_WORKSPACE_FOCUS_STYLE,
@@ -542,6 +545,8 @@ export function collectSyncableSettings(): SyncPayload['settings'] {
   }
   const showOnlyUngroupedHostsInRoot = localStorageAdapter.readBoolean(STORAGE_KEY_SHOW_ONLY_UNGROUPED_HOSTS_IN_ROOT);
   if (showOnlyUngroupedHostsInRoot != null) settings.showOnlyUngroupedHostsInRoot = showOnlyUngroupedHostsInRoot;
+  const tabBarPosition = localStorageAdapter.readString(STORAGE_KEY_TAB_BAR_POSITION);
+  if (tabBarPosition != null) settings.tabBarPosition = normalizeTabBarPosition(tabBarPosition);
   const showSftpTab = localStorageAdapter.readBoolean(STORAGE_KEY_SHOW_SFTP_TAB);
   if (showSftpTab != null) settings.showSftpTab = showSftpTab;
   const shellOnlyTabNumberShortcuts = localStorageAdapter.readBoolean(STORAGE_KEY_SHELL_ONLY_TAB_NUMBER_SHORTCUTS);
@@ -795,6 +800,9 @@ async function applySyncableSettings(settings: NonNullable<SyncPayload['settings
       settings.showOnlyUngroupedHostsInRoot,
     );
   }
+  if (settings.tabBarPosition != null) {
+    localStorageAdapter.writeString(STORAGE_KEY_TAB_BAR_POSITION, normalizeTabBarPosition(settings.tabBarPosition));
+  }
   if (settings.showSftpTab != null) {
     localStorageAdapter.writeBoolean(STORAGE_KEY_SHOW_SFTP_TAB, settings.showSftpTab);
   }

components/SettingsPage.tsx

@@ -545,6 +545,8 @@ const SettingsPageContent: React.FC<{ settings: SettingsState; appLock?: AppLock
                                 setHostClickBehavior={settings.setHostClickBehavior}
                                 showOnlyUngroupedHostsInRoot={settings.showOnlyUngroupedHostsInRoot}
                                 setShowOnlyUngroupedHostsInRoot={settings.setShowOnlyUngroupedHostsInRoot}
+                                tabBarPosition={settings.tabBarPosition}
+                                setTabBarPosition={settings.setTabBarPosition}
                                 showSftpTab={settings.showSftpTab}
                                 setShowSftpTab={settings.setShowSftpTab}
                                 showHostTreeSidebar={settings.showHostTreeSidebar}

components/TopTabs.tsx

@@ -226,6 +226,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
   const { t } = useI18n();
   const { maximize, isFullscreen, onFullscreenChanged } = useWindowControls();
   const {
+    tabBarPosition,
     hotkeyScheme,
     showTabNumberBadges,
     shellOnlyTabNumberShortcuts,
@@ -267,7 +268,8 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
   const [hostTreeChromeReady, setHostTreeChromeReady] = useState(false);
   const [hostTreeGutterExiting, setHostTreeGutterExiting] = useState(false);
   const [rootTabsCompact, setRootTabsCompact] = useState(false);
-  const showWindowControls = !isMacClient;
+  const tabsAtBottom = tabBarPosition === 'bottom';
+  const showWindowControls = !isMacClient && !tabsAtBottom;
 
   // Tab reorder drag state
   const [dropIndicator, setDropIndicator] = useState<{ tabId: string; position: 'before' | 'after' } | null>(null);
@@ -994,12 +996,24 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
   }, [isMacClient, maximize]);
 
   return (
+    <>
+        <div
+          data-tab-window-titlebar
+          data-section="top-tabs"
+          className={cn("h-9 shrink-0 items-end justify-end bg-secondary app-drag", tabsAtBottom ? "flex" : "hidden")}
+          style={dragRegionNoSelect}
+          onDoubleClick={handleTitleBarDoubleClick}
+        >
+          {!isMacClient && <WindowControls />}
+        </div>
     <div
       data-top-tabs-root
+      data-position={tabBarPosition}
       data-section="top-tabs"
-      className="relative w-full bg-secondary app-drag"
+      className="relative w-full shrink-0 bg-secondary app-drag"
       style={{
         ...dragRegionNoSelect,
+        order: tabsAtBottom ? 2 : undefined,
         backgroundColor: 'var(--top-tabs-bg, hsl(var(--secondary)))',
         color: 'var(--top-tabs-fg, hsl(var(--foreground)))',
       }}
@@ -1010,12 +1024,12 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
         updateScrollState={updateScrollState}
       />
       {/* Always-on drag stripe so the window can be moved even when tabs fill the bar */}
-      <div className="absolute inset-x-0 top-0 h-1 app-drag pointer-events-auto z-10" style={dragRegionStyle} aria-hidden />
+      <div className={cn("absolute inset-x-0 h-1 app-drag pointer-events-auto z-10", tabsAtBottom ? "bottom-0" : "top-0")} style={dragRegionStyle} aria-hidden />
       <div
-        className="h-9 flex items-end gap-0 app-drag overflow-visible"
+        className={cn("h-9 flex gap-0 app-drag overflow-visible", tabsAtBottom ? "items-start" : "items-end")}
         style={{
           ...dragRegionStyle,
-          paddingLeft: isMacClient && !isWindowFullscreen ? 76 : 12,
+          paddingLeft: isMacClient && !isWindowFullscreen && !tabsAtBottom ? 76 : 12,
           paddingRight: showWindowControls ? 0 : 12,
         }}
       >
@@ -1063,7 +1077,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
           {hasHostTreeToggleSurface && (
             <div
               ref={hostTreeToggleSlotRef}
-              className="top-tab-host-tree-toggle-slot mb-0 flex-shrink-0 self-end app-no-drag"
+              className={cn("top-tab-host-tree-toggle-slot mb-0 flex-shrink-0 app-no-drag", tabsAtBottom ? "self-start" : "self-end")}
               data-section="top-tabs-host-tree-toggle"
               data-visible={effectiveShowHostTreeToggle ? 'true' : 'false'}
               style={noDragRegionStyle}
@@ -1173,7 +1187,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
                 <Button
                   variant="ghost"
                   size="icon"
-                  className="h-7 w-7 flex-shrink-0 app-no-drag self-end rounded-none"
+                  className={cn("h-7 w-7 flex-shrink-0 app-no-drag rounded-none", tabsAtBottom ? "self-start" : "self-end")}
                   style={{ color: 'var(--top-tabs-muted, hsl(var(--muted-foreground)))' }}
                   onClick={onOpenQuickSwitcher}
                 >
@@ -1187,7 +1201,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
 
         {/* Fixed right controls — utility icons + window controls share one h-7 row */}
         <div
-          className="flex-shrink-0 flex items-center gap-0.5 app-drag self-end h-7 overflow-visible"
+          className={cn("flex-shrink-0 flex items-center gap-0.5 app-drag h-7 overflow-visible", tabsAtBottom ? "self-start" : "self-end")}
           style={dragRegionStyle}
           data-section="top-tabs-toolbar-actions"
         >
@@ -1262,6 +1276,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
         )}
       </div>
     </div>
+    </>
   );
 };
 

components/settings/tabs/SettingsAppearanceTab.tsx

@@ -60,6 +60,8 @@ function SettingsAppearanceTab(props: {
   setHostClickBehavior: (behavior: "connect" | "select") => void;
   showOnlyUngroupedHostsInRoot: boolean;
   setShowOnlyUngroupedHostsInRoot: (enabled: boolean) => void;
+  tabBarPosition: 'top' | 'bottom';
+  setTabBarPosition: (position: 'top' | 'bottom') => void;
   showSftpTab: boolean;
   setShowSftpTab: (enabled: boolean) => void;
   showHostTreeSidebar: boolean;
@@ -129,6 +131,8 @@ function SettingsAppearanceTab(props: {
     setHostClickBehavior,
     showOnlyUngroupedHostsInRoot,
     setShowOnlyUngroupedHostsInRoot,
+    tabBarPosition,
+    setTabBarPosition,
     showSftpTab,
     setShowSftpTab,
     showHostTreeSidebar,
@@ -479,6 +483,29 @@ function SettingsAppearanceTab(props: {
             onChange={setShowOnlyUngroupedHostsInRoot}
           />
         </SettingRow>
+        <SettingRow
+          anchorId="appearance-tab-bar-position"
+          label={t('settings.appearance.tabBarPosition')}
+        >
+          <div className="flex items-center rounded-lg border border-border bg-muted/50 p-0.5">
+            {(['top', 'bottom'] as const).map((position) => (
+              <button
+                key={position}
+                type="button"
+                aria-pressed={tabBarPosition === position}
+                onClick={() => setTabBarPosition(position)}
+                className={cn(
+                  "px-2.5 py-1 rounded-md text-xs font-medium transition-colors",
+                  tabBarPosition === position
+                    ? "bg-background text-foreground shadow-sm"
+                    : "text-muted-foreground hover:text-foreground",
+                )}
+              >
+                {t(`settings.appearance.tabBarPosition.${position}`)}
+              </button>
+            ))}
+          </div>
+        </SettingRow>
         <SettingRow
           anchorId="appearance-vault-show-sftp-tab"
           label={t('settings.vault.showSftpTab')}

components/terminalLayer/TerminalLayerSupport.tsx

@@ -1,3 +1,4 @@
+import { getTopTabsChromeRoots } from '../../application/app/topTabsChromeTheme';
 import React, { createContext, lazy, memo, Suspense, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
 
 import { activeTabStore } from '../../application/state/activeTabStore';
@@ -227,22 +228,22 @@ export const clearHostTreePreviewVars = () => {
 
 export const clearTopTabsPreviewVars = () => {
   if (typeof document === 'undefined') return;
-  const tabsRoot = document.querySelector<HTMLElement>('[data-top-tabs-root]');
-  if (!tabsRoot) return;
-  removeStylePropertyIfSet(tabsRoot, '--top-tabs-bg');
-  removeStylePropertyIfSet(tabsRoot, '--top-tabs-fg');
-  removeStylePropertyIfSet(tabsRoot, '--top-tabs-muted');
-  removeStylePropertyIfSet(tabsRoot, '--top-tabs-active-bg');
-  removeStylePropertyIfSet(tabsRoot, '--top-tabs-accent');
-  removeStylePropertyIfSet(tabsRoot, '--background');
-  removeStylePropertyIfSet(tabsRoot, '--foreground');
-  removeStylePropertyIfSet(tabsRoot, '--accent');
-  removeStylePropertyIfSet(tabsRoot, '--accent-foreground');
-  removeStylePropertyIfSet(tabsRoot, '--primary');
-  removeStylePropertyIfSet(tabsRoot, '--primary-foreground');
-  removeStylePropertyIfSet(tabsRoot, '--secondary');
-  removeStylePropertyIfSet(tabsRoot, '--border');
-  removeStylePropertyIfSet(tabsRoot, '--muted-foreground');
+  for (const tabsRoot of getTopTabsChromeRoots()) {
+    removeStylePropertyIfSet(tabsRoot, '--top-tabs-bg');
+    removeStylePropertyIfSet(tabsRoot, '--top-tabs-fg');
+    removeStylePropertyIfSet(tabsRoot, '--top-tabs-muted');
+    removeStylePropertyIfSet(tabsRoot, '--top-tabs-active-bg');
+    removeStylePropertyIfSet(tabsRoot, '--top-tabs-accent');
+    removeStylePropertyIfSet(tabsRoot, '--background');
+    removeStylePropertyIfSet(tabsRoot, '--foreground');
+    removeStylePropertyIfSet(tabsRoot, '--accent');
+    removeStylePropertyIfSet(tabsRoot, '--accent-foreground');
+    removeStylePropertyIfSet(tabsRoot, '--primary');
+    removeStylePropertyIfSet(tabsRoot, '--primary-foreground');
+    removeStylePropertyIfSet(tabsRoot, '--secondary');
+    removeStylePropertyIfSet(tabsRoot, '--border');
+    removeStylePropertyIfSet(tabsRoot, '--muted-foreground');
+  }
 };
 
 export const filterTabsMap = <T,>(source: Map<string, T>, validIds: Set<string>): Map<string, T> => {

domain/settingsSearchCatalog.ts

@@ -158,6 +158,12 @@ export const SETTINGS_SEARCH_CATALOG: readonly SettingsSearchEntry[] = [
     descriptionKey: "settings.vault.showOnlyUngroupedHostsInRootDesc",
     sectionKey: "settings.vault.title",
   },
+  {
+    id: "appearance-tab-bar-position",
+    tab: "appearance",
+    labelKey: "settings.appearance.tabBarPosition",
+    sectionKey: "settings.vault.title",
+  },
   {
     id: "appearance-vault-show-sftp-tab",
     tab: "appearance",

domain/sync.ts

@@ -337,6 +337,7 @@ export interface SyncPayload {
     // Vault: root list shows only ungrouped hosts
     showOnlyUngroupedHostsInRoot?: boolean;
     // Top tabs: show standalone SFTP view tab
+    tabBarPosition?: 'top' | 'bottom';
     showSftpTab?: boolean;
     // Shortcuts: Cmd/Ctrl+[1...9] and Ctrl+Tab skip pinned Vault/SFTP tabs
     shellOnlyTabNumberShortcuts?: boolean;

domain/tabBarPosition.ts

@@ -0,0 +1,5 @@
+export type TabBarPosition = 'top' | 'bottom';
+
+export function normalizeTabBarPosition(value: unknown): TabBarPosition {
+  return value === 'bottom' ? 'bottom' : 'top';
+}

index.css

@@ -2130,3 +2130,8 @@ html[data-theme-transition] *::after {
   --terminal-host-tree-drop-bg: var(--nc-term-host-tree-drop-bg, transparent);
   --terminal-host-tree-folder-fg: var(--nc-term-host-tree-folder-fg, var(--foreground));
 }
+
+/* Bottom tabs meet the content above, retaining the same tab elements. */
+[data-top-tabs-root][data-position="bottom"] .netcatty-tab {
+  border-radius: 0 0 0.375rem 0.375rem;
+}

infrastructure/config/storageKeys.ts

@@ -248,6 +248,7 @@ export const STORAGE_KEY_HOST_CLICK_BEHAVIOR = 'netcatty_host_click_behavior_v1'
 export const STORAGE_KEY_SHOW_ONLY_UNGROUPED_HOSTS_IN_ROOT = 'netcatty_show_only_ungrouped_hosts_in_root_v1';
 
 // Top tabs: Show standalone SFTP view tab
+export const STORAGE_KEY_TAB_BAR_POSITION = 'netcatty_tab_bar_position_v1';
 export const STORAGE_KEY_SHOW_SFTP_TAB = 'netcatty_show_sftp_tab_v1';
 export const STORAGE_KEY_SHOW_HOST_TREE_SIDEBAR = 'netcatty_show_host_tree_sidebar_v1';