diff --git a/apps/desktop/src/App.vue b/apps/desktop/src/App.vue
index c124ba0abb..154797f94b 100644
--- a/apps/desktop/src/App.vue
+++ b/apps/desktop/src/App.vue
@@ -281,7 +281,8 @@ const rightSidebarPanelStorageKeys: Partial<Record<RightSidebarPanelId, string>>
 let lastOpenedRightSidebarPanel = RIGHT_SIDEBAR_PANEL_IDS.find((panelId) => rightSidebarPanelRefs[panelId].value);
 const sidebarOpen = ref(safeLocalStorageGet("dbx-sidebar-open") !== "false");
 const aiPanelReady = ref(false);
-const { sidebarWidth, aiPanelWidth, historyWidth, sqlLibraryWidth, sqlFilePanelWidth, startSidebarResize, startAiPanelResize, startHistoryResize, startSqlLibraryResize, startSqlFilePanelResize } = usePanelResize();
+const { sidebarWidth, aiPanelWidth, historyWidth, sqlLibraryWidth, sqlFilePanelWidth, tabBarWidth, tabBarCollapsed, startSidebarResize, startAiPanelResize, startHistoryResize, startSqlLibraryResize, startSqlFilePanelResize, startLeftTabBarResize, startRightTabBarResize, setTabBarCollapsed } =
+  usePanelResize();
 const aiAssistantRef = ref<AiAssistantHandle | null>(null);
 const appSidebarRef = ref<InstanceType<typeof AppSidebar> | null>(null);
 const appTabBarRef = ref<InstanceType<typeof AppTabBar> | null>(null);
@@ -864,6 +865,18 @@ const tabWorkspaceLayoutClass = computed(() => {
   if (settingsStore.editorSettings.tabPlacement === "right") return "flex-row-reverse";
   return isVerticalTabPlacement.value ? "flex-row" : "flex-col";
 });
+
+function startTabBarResize(event: MouseEvent) {
+  if (settingsStore.editorSettings.tabPlacement === "right") {
+    startRightTabBarResize(event);
+    return;
+  }
+  startLeftTabBarResize(event);
+}
+
+function toggleTabBarCollapsed() {
+  setTabBarCollapsed(!tabBarCollapsed.value);
+}
 const updateNotificationsEnabled = computed(() => settingsStore.editorSettings.updateNotificationsEnabled);
 
 function openSettings(initialTab = "appearance", initialSection?: string) {
@@ -3377,6 +3390,8 @@ onUnmounted(() => {
                 :agent-driver-update-count="toolbarAgentDriverUpdateCount"
                 :detached-drop-target="detachedDropTargetTabId !== null"
                 :can-detach-tabs="isDesktop"
+                :tab-bar-width="tabBarWidth"
+                :tab-bar-collapsed="tabBarCollapsed"
                 @toggle-zen-mode="toggleZenMode"
                 @activate-driver-store="openDriverStorePage"
                 @activate-settings-page="activateSettingsPage"
@@ -3390,6 +3405,8 @@ onUnmounted(() => {
                 @discard-all-tab-close="handleDiscardAllPendingTabClose"
                 @cancel-tab-close="cancelPendingAppClose"
                 @detach-tab="detachTab"
+                @start-resize="startTabBarResize"
+                @toggle-collapse="toggleTabBarCollapsed"
               />
               <DetachedTabHeader
                 v-else-if="activeTab"
diff --git a/apps/desktop/src/components/layout/AppTabBar.vue b/apps/desktop/src/components/layout/AppTabBar.vue
index 6747b0f26b..c164bc0b3b 100644
--- a/apps/desktop/src/components/layout/AppTabBar.vue
+++ b/apps/desktop/src/components/layout/AppTabBar.vue
@@ -2,18 +2,50 @@
 import { computed, ref, watch, nextTick, onUnmounted } from "vue";
 import type { CSSProperties } from "vue";
 import { useI18n } from "vue-i18n";
-import { X, Pin, ChevronDown, Search, Table2, Code2, TableProperties, PencilRuler, KeyRound, Pencil, Package, Copy, AlertTriangle, Network, Minimize2, Maximize2, Settings, CalendarClock, Activity, Gauge, ShieldCheck, Database, GitBranch, Crosshair } from "@lucide/vue";
+import {
+  X,
+  Pin,
+  ChevronDown,
+  Search,
+  Table2,
+  Code2,
+  TableProperties,
+  PencilRuler,
+  KeyRound,
+  Pencil,
+  Package,
+  Copy,
+  AlertTriangle,
+  Network,
+  Minimize2,
+  Maximize2,
+  Settings,
+  CalendarClock,
+  Activity,
+  Gauge,
+  ShieldCheck,
+  Database,
+  GitBranch,
+  Crosshair,
+  ListFilter,
+  ArrowDownUp,
+  PanelTop,
+  RotateCcw,
+  ChevronsLeft,
+  ChevronsRight,
+} from "@lucide/vue";
 import CustomContextMenu, { type ContextMenuItem } from "@/components/ui/CustomContextMenu.vue";
 import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import LightDropdown from "@/components/ui/LightDropdown.vue";
 import DatabaseIcon from "@/components/icons/DatabaseIcon.vue";
 import TabExecutionStatus from "@/components/layout/TabExecutionStatus.vue";
 import { useConnectionStore } from "@/stores/connectionStore";
 import { useQueryStore } from "@/stores/queryStore";
-import { useSettingsStore } from "@/stores/settingsStore";
+import { useSettingsStore, type EditorSettings } from "@/stores/settingsStore";
 import { useTabScroll } from "@/composables/useTabScroll";
 import { useTabDrag } from "@/composables/useTabDrag";
 import { connectionColor, tabDisplayTitle, tabTooltipLines } from "@/lib/tabs/tabPresentation";
@@ -32,6 +64,8 @@ const props = defineProps<{
   agentDriverUpdateCount?: number;
   detachedDropTarget?: boolean;
   canDetachTabs?: boolean;
+  tabBarWidth?: number;
+  tabBarCollapsed?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -48,6 +82,8 @@ const emit = defineEmits<{
   "discard-all-tab-close": [];
   "cancel-tab-close": [];
   "detach-tab": [tab: QueryTab, position?: { x: number; y: number }];
+  "start-resize": [event: MouseEvent];
+  "toggle-collapse": [];
 }>();
 
 const { t } = useI18n();
@@ -74,6 +110,60 @@ const isClassicLayout = computed(() => settingsStore.editorSettings.appLayout ==
 const isVerticalLayout = computed(() => settingsStore.editorSettings.tabPlacement === "left" || settingsStore.editorSettings.tabPlacement === "right");
 const isWrapLayout = computed(() => !isVerticalLayout.value && settingsStore.editorSettings.tabLayout === "wrap");
 const isManualTabOrder = computed(() => settingsStore.editorSettings.tabSortMode === "manual");
+// The icon-only collapse only exists in the vertical toolbar; horizontal
+// placements must ignore the persisted collapse state entirely.
+const isTabBarCollapsed = computed(() => isVerticalLayout.value && !!props.tabBarCollapsed);
+const tabBarStyle = computed<CSSProperties | undefined>(() => {
+  if (!isVerticalLayout.value) return undefined;
+  if (props.tabBarCollapsed) return { width: "3.5rem", flex: "0 0 3.5rem" };
+  const width = props.tabBarWidth ?? 240;
+  return { width: `${width}px`, flex: `0 0 ${width}px` };
+});
+const tabBarCollapseIcon = computed(() => {
+  const isLeft = settingsStore.editorSettings.tabPlacement === "left";
+  if (props.tabBarCollapsed) return isLeft ? ChevronsRight : ChevronsLeft;
+  return isLeft ? ChevronsLeft : ChevronsRight;
+});
+const tabBarCollapseLabel = computed(() => t(props.tabBarCollapsed ? "tabs.expandTabBar" : "tabs.collapseTabBar"));
+const verticalTabToolbarButtonClass = "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-transparent text-muted-foreground hover:border-border hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+const tabGroupItems = computed(() => [
+  { value: "none", label: t("settings.tabGroupNone") },
+  { value: "database-type", label: t("settings.tabGroupDatabaseType") },
+  { value: "connection", label: t("settings.tabGroupConnection") },
+]);
+const tabSortItems = computed(() => [
+  { value: "manual", label: t("settings.tabSortManual") },
+  { value: "created-asc", label: t("settings.tabSortCreated") },
+  { value: "title-asc", label: t("settings.tabSortTitle") },
+]);
+const tabPlacementItems = computed(() => [
+  { value: "top", label: t("settings.tabPlacementTop") },
+  { value: "bottom", label: t("settings.tabPlacementBottom") },
+  { value: "left", label: t("settings.tabPlacementLeft") },
+  { value: "right", label: t("settings.tabPlacementRight") },
+]);
+
+type TabPreferencePatch = Partial<Pick<EditorSettings, "tabPlacement" | "tabGroupMode" | "tabSortMode" | "tabGroupCustomizations">>;
+
+async function persistTabPreferences(partial: TabPreferencePatch) {
+  try {
+    await settingsStore.updateEditorSettingsAndPersist(partial);
+  } catch (error) {
+    toast(t("tabs.settingsSaveFailed", { message: error instanceof Error ? error.message : String(error) }), 5000);
+  }
+}
+
+function updateTabGroupMode(value: string) {
+  if (value === "none" || value === "database-type" || value === "connection") void persistTabPreferences({ tabGroupMode: value });
+}
+
+function updateTabSortMode(value: string) {
+  if (value === "manual" || value === "created-asc" || value === "title-asc") void persistTabPreferences({ tabSortMode: value });
+}
+
+function updateTabPlacement(value: string) {
+  if (value === "top" || value === "bottom" || value === "left" || value === "right") void persistTabPreferences({ tabPlacement: value });
+}
 
 function tabGroupKey(tab: QueryTab) {
   const connection = connectionStore.getConfig(tab.connectionId);
@@ -107,17 +197,144 @@ function sortDisplayedTabs(tabs: QueryTab[]) {
 const fixedTabs = computed(() => sortDisplayedTabs(queryStore.tabs.filter((tab) => tab.pinned)));
 const regularTabs = computed(() => sortDisplayedTabs(queryStore.tabs.filter((tab) => !tab.pinned)));
 const displayedTabs = computed(() => [...fixedTabs.value, ...regularTabs.value]);
+const collapsedTabGroups = ref<Set<string>>(new Set());
+const tabGroupPalette = ["#2563eb", "#d97706", "#7c3aed", "#059669", "#dc2626", "#0891b2", "#db2777", "#475569"];
+const tabGroupEditorOpen = ref(false);
+const editingTabGroupKey = ref("");
+const editingTabGroupDefaultLabel = ref("");
+const editingTabGroupName = ref("");
+const editingTabGroupColor = ref("");
+const editingTabGroupFallbackColor = ref(tabGroupPalette[0]!);
 
 function isGroupStart(tabs: QueryTab[], index: number) {
   if (settingsStore.editorSettings.tabGroupMode === "none") return false;
   return index === 0 || tabGroupKey(tabs[index - 1]!) !== tabGroupKey(tabs[index]!);
 }
 
-function tabGroupLabel(tab: QueryTab) {
+function isGroupEnd(tabs: QueryTab[], index: number) {
+  if (settingsStore.editorSettings.tabGroupMode === "none") return false;
+  return index === tabs.length - 1 || tabGroupKey(tabs[index + 1]!) !== tabGroupKey(tabs[index]!);
+}
+
+function tabGroupDefaultLabel(tab: QueryTab) {
   const connection = connectionStore.getConfig(tab.connectionId);
   if (settingsStore.editorSettings.tabGroupMode === "connection") return connection?.name || tab.connectionId;
   return connection?.driver_label || connection?.driver_profile || connection?.db_type || tab.connectionId;
 }
+
+function tabGroupCustomizationKey(tab: QueryTab) {
+  return `${settingsStore.editorSettings.tabGroupMode}:${tabGroupKey(tab)}`;
+}
+
+function tabGroupCustomization(tab: QueryTab) {
+  return settingsStore.editorSettings.tabGroupCustomizations[tabGroupCustomizationKey(tab)];
+}
+
+function tabGroupLabel(tab: QueryTab) {
+  return tabGroupCustomization(tab)?.name || tabGroupDefaultLabel(tab);
+}
+
+function tabGroupId(tab: QueryTab) {
+  return `${tab.pinned ? "fixed" : "regular"}:${tabGroupKey(tab)}`;
+}
+
+function isTabGroupCollapsed(tab: QueryTab) {
+  if (settingsStore.editorSettings.tabGroupMode === "none" || tabSearchQuery.value.trim()) return false;
+  return collapsedTabGroups.value.has(tabGroupId(tab));
+}
+
+function isTabGroupActive(tab: QueryTab) {
+  if (props.driverStoreActive || props.settingsPageActive) return false;
+  return tabsInDisplayGroup(tab).some((item) => item.id === queryStore.activeTabId);
+}
+
+function toggleTabGroup(tab: QueryTab) {
+  const groupId = tabGroupId(tab);
+  const next = new Set(collapsedTabGroups.value);
+  if (next.has(groupId)) next.delete(groupId);
+  else next.add(groupId);
+  collapsedTabGroups.value = next;
+  nextTick(updateAllScrollButtons);
+}
+
+function expandTabGroupForTab(tabId: string | null) {
+  if (!tabId || settingsStore.editorSettings.tabGroupMode === "none") return;
+  const tab = queryStore.tabs.find((item) => item.id === tabId);
+  if (!tab) return;
+  const groupId = tabGroupId(tab);
+  if (!collapsedTabGroups.value.has(groupId)) return;
+  const next = new Set(collapsedTabGroups.value);
+  next.delete(groupId);
+  collapsedTabGroups.value = next;
+}
+
+function defaultTabGroupColor(tab: QueryTab) {
+  const connectionGroupColor = settingsStore.editorSettings.tabGroupMode === "connection" ? connectionColor(tab.connectionId) : undefined;
+  let hash = 0;
+  for (const character of tabGroupKey(tab)) hash = (hash * 31 + character.codePointAt(0)!) | 0;
+  return connectionGroupColor || tabGroupPalette[Math.abs(hash) % tabGroupPalette.length]!;
+}
+
+function resolvedTabGroupColor(tab: QueryTab) {
+  return tabGroupCustomization(tab)?.color || defaultTabGroupColor(tab);
+}
+
+function groupColorStyle(color: string): CSSProperties {
+  return {
+    "--tab-group-color": color,
+    "--tab-group-soft": hexToRgba(color, 0.12),
+    "--tab-group-rail": hexToRgba(color, 0.3),
+  } as CSSProperties;
+}
+
+function tabGroupStyle(tab: QueryTab): CSSProperties {
+  return groupColorStyle(resolvedTabGroupColor(tab));
+}
+
+const tabGroupEditorPreviewStyle = computed(() => groupColorStyle(editingTabGroupColor.value || editingTabGroupFallbackColor.value));
+const editingTabGroupHasCustomization = computed(() => {
+  const customization = settingsStore.editorSettings.tabGroupCustomizations[editingTabGroupKey.value];
+  return !!(customization?.name || customization?.color);
+});
+
+function openTabGroupEditor(tab: QueryTab) {
+  const customization = tabGroupCustomization(tab);
+  editingTabGroupKey.value = tabGroupCustomizationKey(tab);
+  editingTabGroupDefaultLabel.value = tabGroupDefaultLabel(tab);
+  editingTabGroupName.value = customization?.name || "";
+  editingTabGroupColor.value = customization?.color || "";
+  editingTabGroupFallbackColor.value = defaultTabGroupColor(tab);
+  tabGroupEditorOpen.value = true;
+  nextTick(() => document.querySelector<HTMLInputElement>("[data-tab-group-name-input]")?.focus());
+}
+
+async function persistTabGroupCustomization(name: string, color: string) {
+  if (!editingTabGroupKey.value) return false;
+  const customizations = { ...settingsStore.editorSettings.tabGroupCustomizations };
+  const normalizedName = name.trim();
+  if (normalizedName || color) customizations[editingTabGroupKey.value] = { ...(normalizedName ? { name: normalizedName } : {}), ...(color ? { color } : {}) };
+  else delete customizations[editingTabGroupKey.value];
+  try {
+    await settingsStore.updateEditorSettingsAndPersist({ tabGroupCustomizations: customizations });
+    return true;
+  } catch (error) {
+    toast(t("tabs.settingsSaveFailed", { message: error instanceof Error ? error.message : String(error) }), 5000);
+    return false;
+  }
+}
+
+async function saveTabGroupCustomization() {
+  if (await persistTabGroupCustomization(editingTabGroupName.value, editingTabGroupColor.value)) tabGroupEditorOpen.value = false;
+}
+
+function updateCustomTabGroupColor(event: Event) {
+  editingTabGroupColor.value = (event.target as HTMLInputElement).value;
+}
+
+async function resetTabGroupCustomization(tab?: QueryTab) {
+  if (tab) editingTabGroupKey.value = tabGroupCustomizationKey(tab);
+  if ((await persistTabGroupCustomization("", "")) && !tab) tabGroupEditorOpen.value = false;
+}
 const hasFixedTabs = computed(() => fixedTabs.value.length > 0);
 const regularSurfaceCount = computed(() => regularTabs.value.length + (props.driverStoreOpen ? 1 : 0) + (props.settingsPageOpen ? 1 : 0));
 const closeConfirmDirtyCount = computed(() => queryStore.closeConfirmDirtyTabIds.length);
@@ -241,6 +458,23 @@ function tabTitleStyle(tab: QueryTab): CSSProperties | undefined {
 }
 
 type SpecialRegularSurface = "driverStore" | "settings";
+const pendingGroupCloseSpecialSurface = ref<SpecialRegularSurface | null>(null);
+
+function restoreSpecialRegularSurface(surface: SpecialRegularSurface | null) {
+  if (!surface) return;
+  // App.vue activates the query surface when activeTabId changes, so restore
+  // the special surface after that watcher has completed its current flush.
+  nextTick(() => {
+    if (surface === "settings" && props.settingsPageOpen) emit("activate-settings-page");
+    if (surface === "driverStore" && props.driverStoreOpen) emit("activate-driver-store");
+  });
+}
+
+function finishSpecialSurfacePreservingGroupClose() {
+  const surface = pendingGroupCloseSpecialSurface.value;
+  pendingGroupCloseSpecialSurface.value = null;
+  restoreSpecialRegularSurface(surface);
+}
 
 function closeSpecialRegularSurfaces(keep?: SpecialRegularSurface) {
   if (keep !== "driverStore" && props.driverStoreOpen) emit("close-driver-store");
@@ -252,6 +486,23 @@ function closeOtherRegularTabsFromTab(tab: QueryTab) {
   closeSpecialRegularSurfaces();
 }
 
+function tabsInDisplayGroup(tab: QueryTab) {
+  if (settingsStore.editorSettings.tabGroupMode === "none") return [];
+  const groupKey = tabGroupKey(tab);
+  const displayedGroup = tab.pinned ? fixedTabs.value : regularTabs.value;
+  return displayedGroup.filter((item) => tabGroupKey(item) === groupKey);
+}
+
+function closeTabGroup(tab: QueryTab) {
+  const tabsToClose = tabsInDisplayGroup(tab).map((item) => item.id);
+  if (tabsToClose.length === 0) return;
+  const activeSpecialSurface: SpecialRegularSurface | null = props.settingsPageActive ? "settings" : props.driverStoreActive ? "driverStore" : null;
+  pendingGroupCloseSpecialSurface.value = activeSpecialSurface;
+  const finalActiveTabId = queryStore.activeTabId && !tabsToClose.includes(queryStore.activeTabId) ? queryStore.activeTabId : (queryStore.tabs.find((item) => !tabsToClose.includes(item.id))?.id ?? null);
+  queryStore.closeTabsByIds(tabsToClose, finalActiveTabId, finishSpecialSurfacePreservingGroupClose);
+  restoreSpecialRegularSurface(activeSpecialSurface);
+}
+
 function tabsToRightInGroup(tab: QueryTab) {
   const groupedTabs = tab.pinned ? fixedTabs.value : regularTabs.value;
   const targetIndex = groupedTabs.findIndex((item) => item.id === tab.id);
@@ -368,6 +619,70 @@ function getSpecialRegularTabMenuItems(surface: SpecialRegularSurface): ContextM
   ];
 }
 
+function getTabPreferenceMenuItems(): ContextMenuItem[] {
+  return [
+    {
+      label: t("settings.tabPlacement"),
+      icon: PanelTop,
+      children: tabPlacementItems.value.map((item) => ({
+        label: item.label,
+        checked: item.value === settingsStore.editorSettings.tabPlacement,
+        action: () => updateTabPlacement(item.value),
+      })),
+    },
+    {
+      label: t("settings.tabGroup"),
+      icon: ListFilter,
+      children: tabGroupItems.value.map((item) => ({
+        label: item.label,
+        checked: item.value === settingsStore.editorSettings.tabGroupMode,
+        action: () => updateTabGroupMode(item.value),
+      })),
+    },
+    {
+      label: t("settings.tabSort"),
+      icon: ArrowDownUp,
+      children: tabSortItems.value.map((item) => ({
+        label: item.label,
+        checked: item.value === settingsStore.editorSettings.tabSortMode,
+        action: () => updateTabSortMode(item.value),
+      })),
+    },
+  ];
+}
+
+function getTabGroupMenuItems(tab: QueryTab): ContextMenuItem[] {
+  const customization = tabGroupCustomization(tab);
+  return [
+    {
+      label: t("contextMenu.editTabGroup"),
+      action: () => openTabGroupEditor(tab),
+      icon: Pencil,
+    },
+    {
+      label: t("contextMenu.resetTabGroup"),
+      action: () => resetTabGroupCustomization(tab),
+      icon: RotateCcw,
+      visible: !!(customization?.name || customization?.color),
+    },
+    { label: "", separator: true },
+    ...getTabPreferenceMenuItems(),
+    { label: "", separator: true },
+    {
+      label: t("contextMenu.closeTabGroup"),
+      action: () => closeTabGroup(tab),
+      icon: X,
+      variant: "destructive",
+    },
+  ];
+}
+
+function openTabGroupContextMenu(event: MouseEvent, open: (event: MouseEvent) => void) {
+  event.preventDefault();
+  document.getSelection()?.removeAllRanges();
+  open(event);
+}
+
 function getTabMenuItems(tab: QueryTab): ContextMenuItem[] {
   const closeCurrentLabel = tab.pinned ? t("contextMenu.closeFixedTab") : t("contextMenu.closeTab");
   const closeOtherLabel = tab.pinned ? t("contextMenu.closeOtherFixedTabs") : hasFixedTabs.value ? t("contextMenu.closeOtherRegularTabs") : t("contextMenu.closeOtherTabs");
@@ -419,6 +734,8 @@ function getTabMenuItems(tab: QueryTab): ContextMenuItem[] {
       visible: !!activeTabSidebarTarget(tab),
     },
     { label: "", separator: true },
+    ...getTabPreferenceMenuItems(),
+    { label: "", separator: true },
     {
       label: tab.pinned ? t("contextMenu.unfixTab") : t("contextMenu.fixTab"),
       action: () => queryStore.togglePinnedTab(tab.id),
@@ -427,6 +744,12 @@ function getTabMenuItems(tab: QueryTab): ContextMenuItem[] {
     },
     { label: "", separator: true },
     { label: closeCurrentLabel, action: () => queryStore.closeTab(tab.id), icon: X },
+    {
+      label: t("contextMenu.closeTabGroup"),
+      action: () => closeTabGroup(tab),
+      visible: settingsStore.editorSettings.tabGroupMode !== "none",
+      icon: X,
+    },
     {
       label: closeOtherLabel,
       action: closeOtherAction,
@@ -474,8 +797,15 @@ function handleDiscardAllAndClose() {
   emit("discard-all-tab-close");
 }
 
-function handleCancelClose() {
+function dismissCloseConfirm() {
+  const specialSurface = pendingGroupCloseSpecialSurface.value;
+  pendingGroupCloseSpecialSurface.value = null;
   queryStore.cancelClosePendingTab();
+  restoreSpecialRegularSurface(specialSurface);
+}
+
+function handleCancelClose() {
+  dismissCloseConfirm();
   emit("cancel-tab-close");
 }
 
@@ -522,8 +852,19 @@ watch(
 );
 
 watch(
-  () => queryStore.activeTabId,
+  () => settingsStore.editorSettings.tabGroupMode,
   () => {
+    collapsedTabGroups.value = new Set();
+    tabGroupEditorOpen.value = false;
+    nextTick(updateAllScrollButtons);
+  },
+);
+
+watch(
+  () => queryStore.activeTabId,
+  (tabId) => {
+    expandTabGroupForTab(tabId);
+    restoreSpecialRegularSurface(pendingGroupCloseSpecialSurface.value);
     nextTick(() => {
       if (!isWrapLayout.value) {
         for (const container of [tabsContainerRef.value, fixedTabsContainerRef.value]) {
@@ -581,6 +922,16 @@ function tabColorStyle(tab: QueryTab) {
   const color = connectionColor(tab.connectionId);
   const isActive = tab.id === queryStore.activeTabId && !props.driverStoreActive && !props.settingsPageActive;
   const isClassic = isClassicLayout.value;
+  if (isVerticalLayout.value) {
+    if (!isActive) return undefined;
+    return color
+      ? {
+          "--app-tab-background": hexToRgba(color, 0.12),
+        }
+      : {
+          "--app-tab-background": "var(--accent)",
+        };
+  }
   if (!color) {
     if (isClassic) {
       return isActive ? { boxShadow: "inset 0 -2px 0 var(--ring)" } : undefined;
@@ -609,9 +960,15 @@ function tabColorStyle(tab: QueryTab) {
 
 function specialTabActiveStyle(active: boolean | undefined): CSSProperties | undefined {
   if (!active) return undefined;
+  if (isVerticalLayout.value) return { backgroundColor: "var(--accent)" };
   return isClassicLayout.value ? { boxShadow: "inset 0 -2px 0 var(--ring)" } : { borderColor: "var(--ring)" };
 }
 
+const tabTooltipSide = computed(() => {
+  if (!isVerticalLayout.value) return "bottom" as const;
+  return settingsStore.editorSettings.tabPlacement === "left" ? ("right" as const) : ("left" as const);
+});
+
 function tabIconClass(tab: QueryTab) {
   if (tab.externalSqlFileMissing) return "text-amber-600 dark:text-amber-400";
   if (tab.mode === "mq") return "";
@@ -640,6 +997,14 @@ const showRegularTabOverflowControls = computed(() => regularTabs.value.length >
 const regularTabOverflowOpen = ref(false);
 const fixedTabOverflowOpen = ref(false);
 const tabSearchQuery = ref("");
+
+watch(
+  () => props.tabBarCollapsed,
+  (collapsed) => {
+    if (collapsed) tabSearchQuery.value = "";
+  },
+);
+
 const filteredOpenTabs = computed(() => {
   const query = tabSearchQuery.value.trim().toLocaleLowerCase();
   if (!query) return displayedTabs.value;
@@ -668,6 +1033,7 @@ const tabBarClass = computed(() => [
       : `w-full bg-background ${settingsStore.editorSettings.tabPlacement === "bottom" ? "border-t" : "border-b"}`,
   hasFixedTabs.value ? "flex-col" : "",
   isClassicLayout.value && hasFixedTabs.value && !isVerticalLayout.value ? "border-b" : "",
+  isVerticalLayout.value && props.tabBarCollapsed ? "vertical-tab-layout--collapsed" : "",
 ]);
 const regularTabRowClass = computed(() => (isVerticalLayout.value ? ["min-h-0 flex-1 flex-col items-stretch"] : [isClassicLayout.value ? "h-9 items-stretch" : "h-10 items-center px-2", isClassicLayout.value && !hasFixedTabs.value ? "border-b" : ""]));
 
@@ -803,10 +1169,38 @@ function onOverflowItemKeydown(event: KeyboardEvent, tabId: string, kind: "regul
 </script>
 
 <template>
-  <div v-if="queryStore.tabs.length > 0 || driverStoreOpen || settingsPageOpen" data-main-tab-bar class="app-tab-bar relative flex w-full min-w-0 shrink-0 overflow-hidden" :class="[tabBarClass, { 'ring-2 ring-primary ring-inset': detachedDropTarget }]">
-    <div v-if="isVerticalLayout" class="relative shrink-0 border-b p-2">
-      <Search class="pointer-events-none absolute left-4 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
-      <Input v-model="tabSearchQuery" type="search" :placeholder="t('tabs.searchOpenTabs')" class="h-8 w-full pl-7 text-sm" />
+  <div
+    v-if="queryStore.tabs.length > 0 || driverStoreOpen || settingsPageOpen"
+    data-main-tab-bar
+    :data-placement="settingsStore.editorSettings.tabPlacement"
+    class="app-tab-bar relative flex w-full min-w-0 shrink-0 overflow-hidden"
+    :class="[tabBarClass, { 'ring-2 ring-primary ring-inset': detachedDropTarget }]"
+    :style="tabBarStyle"
+  >
+    <div v-if="isVerticalLayout" class="flex shrink-0 items-center gap-0.5 border-b p-1.5" :class="tabBarCollapsed ? 'justify-center' : ''">
+      <div v-if="!tabBarCollapsed" class="relative min-w-0 flex-1">
+        <Search class="pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+        <Input v-model="tabSearchQuery" type="search" :placeholder="t('tabs.searchOpenTabs')" class="h-8 w-full pl-7 text-sm" />
+      </div>
+      <div v-if="!tabBarCollapsed" class="flex shrink-0 items-center gap-0">
+        <LightDropdown
+          :model-value="settingsStore.editorSettings.tabGroupMode"
+          :items="tabGroupItems"
+          :aria-label="t('settings.tabGroup')"
+          :trigger-title="t('settings.tabGroup')"
+          :trigger-icon="ListFilter"
+          :trigger-class="verticalTabToolbarButtonClass"
+          :show-trigger-label="false"
+          :show-chevron="false"
+          check-position="right"
+          :match-trigger-width="false"
+          align="end"
+          @update:model-value="updateTabGroupMode"
+        />
+      </div>
+      <button type="button" :class="verticalTabToolbarButtonClass" :title="tabBarCollapseLabel" :aria-label="tabBarCollapseLabel" :aria-expanded="!tabBarCollapsed" @click="emit('toggle-collapse')">
+        <component :is="tabBarCollapseIcon" class="h-4 w-4" />
+      </button>
     </div>
     <div class="flex w-full min-w-0 shrink-0 overflow-hidden" :class="regularTabRowClass">
       <div class="app-tab-strip relative h-full min-w-0 flex-1 overflow-hidden">
@@ -826,23 +1220,47 @@ function onOverflowItemKeydown(event: KeyboardEvent, tabId: string, kind: "regul
           @wheel="!isVerticalLayout && onTabsWheel($event)"
         >
           <template v-for="(tab, index) in filteredRegularTabs" :key="tab.id">
-            <div v-if="isGroupStart(filteredRegularTabs, index)" class="tab-group-header">{{ tabGroupLabel(tab) }}</div>
-            <CustomContextMenu :items="getTabMenuItems(tab)" v-slot="{ onContextMenu }">
+            <CustomContextMenu v-if="isGroupStart(filteredRegularTabs, index)" :items="() => getTabGroupMenuItems(tab)" v-slot="{ onContextMenu }">
+              <button
+                type="button"
+                class="tab-group-header"
+                :class="{ 'tab-group-header--collapsed': isTabGroupCollapsed(tab), 'tab-group-header--active': isTabGroupActive(tab) }"
+                :style="tabGroupStyle(tab)"
+                :aria-expanded="!isTabGroupCollapsed(tab)"
+                :title="tabGroupLabel(tab)"
+                @click="toggleTabGroup(tab)"
+                @contextmenu="openTabGroupContextMenu($event, onContextMenu)"
+              >
+                <span class="tab-group-header-content">
+                  <span class="tab-group-marker" aria-hidden="true" />
+                  <Pin v-if="tab.pinned && !isTabBarCollapsed" class="tab-group-pin" aria-hidden="true" />
+                  <ChevronDown class="tab-group-chevron" :class="isTabGroupCollapsed(tab) ? '-rotate-90' : ''" aria-hidden="true" />
+                  <span v-if="!isTabBarCollapsed" class="tab-group-label">{{ tabGroupLabel(tab) }}</span>
+                  <span v-if="isTabGroupCollapsed(tab) && !isTabBarCollapsed" class="tab-group-count">{{ tabsInDisplayGroup(tab).length }}</span>
+                </span>
+              </button>
+            </CustomContextMenu>
+            <CustomContextMenu v-if="!isTabGroupCollapsed(tab)" :items="getTabMenuItems(tab)" v-slot="{ onContextMenu }">
               <div :class="isClassicLayout ? 'h-full' : ''" @contextmenu="onContextMenu">
                 <Tooltip>
                   <TooltipTrigger as-child>
                     <div
                       class="app-tab-pill group flex cursor-default items-center gap-1 px-2 text-xs transition-colors whitespace-nowrap select-none"
-                      :class="
+                      :class="[
                         isClassicLayout
                           ? [
                               compactTabTitle ? 'min-w-24' : 'min-w-38',
                               'h-full border-r border-border/80 font-medium dark:border-border/45',
                               tab.id === queryStore.activeTabId && !driverStoreActive && !settingsPageActive ? 'bg-background text-foreground' : 'text-foreground/70 hover:text-foreground/90',
                             ]
-                          : [compactTabTitle ? 'min-w-24' : 'min-w-38', 'h-7 rounded-md border', tab.id === queryStore.activeTabId && !driverStoreActive && !settingsPageActive ? 'text-foreground font-medium' : 'border-border/60 text-foreground/70 hover:border-border hover:text-foreground/90']
-                      "
-                      :style="[tabColorStyle(tab), tabDropStyle(tab.id)]"
+                          : [compactTabTitle ? 'min-w-24' : 'min-w-38', 'h-7 rounded-md border', tab.id === queryStore.activeTabId && !driverStoreActive && !settingsPageActive ? 'text-foreground font-medium' : 'border-border/60 text-foreground/70 hover:border-border hover:text-foreground/90'],
+                        {
+                          'tab-group-tab': settingsStore.editorSettings.tabGroupMode !== 'none',
+                          'tab-group-tab--first': isGroupStart(filteredRegularTabs, index),
+                          'tab-group-tab--last': isGroupEnd(filteredRegularTabs, index),
+                        },
+                      ]"
+                      :style="[tabColorStyle(tab), settingsStore.editorSettings.tabGroupMode !== 'none' ? tabGroupStyle(tab) : undefined, tabDropStyle(tab.id)]"
                       :data-active-tab="tab.id === queryStore.activeTabId && !driverStoreActive && !settingsPageActive"
                       @click="handleTabClick(tab)"
                       @dblclick="handleTabDoubleClick(tab, $event)"
@@ -873,8 +1291,9 @@ function onOverflowItemKeydown(event: KeyboardEvent, tabId: string, kind: "regul
                           <Code2 v-else class="h-3.5 w-3.5" />
                         </span>
                       </TabExecutionStatus>
+                      <span v-if="isTabBarCollapsed && isDirtyTab(tab)" class="compact-dirty-tab-marker" aria-hidden="true" />
                       <input
-                        v-if="editingTabId === tab.id"
+                        v-if="editingTabId === tab.id && !isTabBarCollapsed"
                         v-model="editingTitle"
                         :data-tab-title-input="tab.id"
                         :aria-label="t('contextMenu.renameTab')"
@@ -885,17 +1304,17 @@ function onOverflowItemKeydown(event: KeyboardEvent, tabId: string, kind: "regul
                         @keydown.escape.prevent="cancelRenameTab"
                         @blur="commitRenameTab(tab)"
                       />
-                      <span v-else class="inline-flex min-w-0 flex-1 items-center gap-0.5 overflow-hidden">
+                      <span v-else-if="!isTabBarCollapsed" class="inline-flex min-w-0 flex-1 items-center gap-0.5 overflow-hidden">
                         <span v-if="isDirtyTab(tab)" aria-hidden="true" class="dirty-tab-marker">*</span>
                         <span class="min-w-0 flex-1 truncate" :style="tabTitleStyle(tab)">{{ tabTitleText(tab) }}</span>
                       </span>
-                      <ReadOnlySessionControl :connection-id="tab.connectionId" compact />
-                      <button class="rounded hover:bg-muted-foreground/20 p-0.5 shrink-0" @click.stop="queryStore.closeTab(tab.id)">
+                      <ReadOnlySessionControl v-if="!isTabBarCollapsed" :connection-id="tab.connectionId" compact />
+                      <button v-if="!isTabBarCollapsed" class="rounded hover:bg-muted-foreground/20 p-0.5 shrink-0" @click.stop="queryStore.closeTab(tab.id)">
                         <X class="h-3 w-3" />
                       </button>
                     </div>
                   </TooltipTrigger>
-                  <TooltipContent side="bottom" class="text-xs grid grid-cols-[auto_1fr] gap-x-2">
+                  <TooltipContent :side="tabTooltipSide" class="text-xs grid grid-cols-[auto_1fr] gap-x-2">
                     <template v-for="line in tabTooltipLines(tab, t)" :key="line.label">
                       <span class="text-muted-foreground">{{ line.label }}</span>
                       <span>{{ line.value }}</span>
@@ -919,14 +1338,15 @@ function onOverflowItemKeydown(event: KeyboardEvent, tabId: string, kind: "regul
                 "
                 :style="specialTabActiveStyle(settingsPageActive)"
                 :data-active-tab="settingsPageActive"
+                :title="t('settings.title')"
                 @click="emit('activate-settings-page')"
                 @mousedown.middle.prevent="emit('close-settings-page')"
               >
                 <span class="shrink-0 text-sky-600 dark:text-sky-400">
                   <Settings class="h-3.5 w-3.5" />
                 </span>
-                <span class="min-w-0 truncate flex-1">{{ t("settings.title") }}</span>
-                <button class="rounded hover:bg-muted-foreground/20 p-0.5 shrink-0" @click.stop="emit('close-settings-page')">
+                <span v-if="!isTabBarCollapsed" class="min-w-0 truncate flex-1">{{ t("settings.title") }}</span>
+                <button v-if="!isTabBarCollapsed" class="rounded hover:bg-muted-foreground/20 p-0.5 shrink-0" @click.stop="emit('close-settings-page')">
                   <X class="h-3 w-3" />
                 </button>
               </div>
@@ -946,17 +1366,18 @@ function onOverflowItemKeydown(event: KeyboardEvent, tabId: string, kind: "regul
                 "
                 :style="specialTabActiveStyle(driverStoreActive)"
                 :data-active-tab="driverStoreActive"
+                :title="t('toolbar.driverManager')"
                 @click="emit('activate-driver-store')"
                 @mousedown.middle.prevent="emit('close-driver-store')"
               >
                 <span class="shrink-0 text-amber-600 dark:text-amber-400">
                   <Package class="h-3.5 w-3.5" />
                 </span>
-                <span class="min-w-0 truncate flex-1">{{ t("toolbar.driverManager") }}</span>
-                <span v-if="(agentDriverUpdateCount ?? 0) > 0" class="inline-flex h-4 min-w-4 shrink-0 items-center justify-center rounded-full bg-red-500 px-1 text-[10px] font-medium leading-none text-white" :aria-label="t('toolbar.updatableDriverCount')">
+                <span v-if="!isTabBarCollapsed" class="min-w-0 truncate flex-1">{{ t("toolbar.driverManager") }}</span>
+                <span v-if="!isTabBarCollapsed && (agentDriverUpdateCount ?? 0) > 0" class="inline-flex h-4 min-w-4 shrink-0 items-center justify-center rounded-full bg-red-500 px-1 text-[10px] font-medium leading-none text-white" :aria-label="t('toolbar.updatableDriverCount')">
                   {{ (agentDriverUpdateCount ?? 0) > 99 ? "99+" : agentDriverUpdateCount }}
                 </span>
-                <button class="rounded hover:bg-muted-foreground/20 p-0.5 shrink-0" @click.stop="emit('close-driver-store')">
+                <button v-if="!isTabBarCollapsed" class="rounded hover:bg-muted-foreground/20 p-0.5 shrink-0" @click.stop="emit('close-driver-store')">
                   <X class="h-3 w-3" />
                 </button>
               </div>
@@ -1022,8 +1443,8 @@ function onOverflowItemKeydown(event: KeyboardEvent, tabId: string, kind: "regul
 
     <div
       v-if="hasVisibleFixedTabs"
-      class="flex w-full min-w-0 shrink-0 overflow-hidden border-t"
-      :class="isVerticalLayout ? 'max-h-[40%] flex-col border-border/70 bg-muted/45 py-1 dark:bg-muted/25' : isClassicLayout ? 'h-8 items-stretch border-border/80 bg-background/45 dark:border-border/45 dark:bg-background/20' : 'h-9 items-center border-border/70 bg-muted/45 px-2 dark:bg-muted/25'"
+      class="flex w-full min-w-0 shrink-0 overflow-hidden"
+      :class="isVerticalLayout ? 'max-h-[40%] flex-col bg-background pt-1' : isClassicLayout ? 'h-8 items-stretch border-t border-border/80 bg-background/45 dark:border-border/45 dark:bg-background/20' : 'h-9 items-center border-t border-border/70 bg-muted/45 px-2 dark:bg-muted/25'"
     >
       <div class="app-tab-strip relative h-full min-w-0 flex-1 overflow-hidden">
         <div v-if="showFixedTabScrollbar" class="app-tab-scrollbar app-tab-scrollbar--bottom" :class="{ 'app-tab-scrollbar--dragging': isFixedScrollbarDragging }" @pointerdown="startFixedScrollbarDrag">
@@ -1042,23 +1463,47 @@ function onOverflowItemKeydown(event: KeyboardEvent, tabId: string, kind: "regul
           @wheel="!isVerticalLayout && onFixedTabsWheel($event)"
         >
           <template v-for="(tab, index) in filteredFixedTabs" :key="tab.id">
-            <div v-if="isGroupStart(filteredFixedTabs, index)" class="tab-group-header">{{ tabGroupLabel(tab) }}</div>
-            <CustomContextMenu :items="getTabMenuItems(tab)" v-slot="{ onContextMenu }">
+            <CustomContextMenu v-if="isGroupStart(filteredFixedTabs, index)" :items="() => getTabGroupMenuItems(tab)" v-slot="{ onContextMenu }">
+              <button
+                type="button"
+                class="tab-group-header"
+                :class="{ 'tab-group-header--collapsed': isTabGroupCollapsed(tab), 'tab-group-header--active': isTabGroupActive(tab) }"
+                :style="tabGroupStyle(tab)"
+                :aria-expanded="!isTabGroupCollapsed(tab)"
+                :title="tabGroupLabel(tab)"
+                @click="toggleTabGroup(tab)"
+                @contextmenu="openTabGroupContextMenu($event, onContextMenu)"
+              >
+                <span class="tab-group-header-content">
+                  <span class="tab-group-marker" aria-hidden="true" />
+                  <Pin v-if="!isTabBarCollapsed" class="tab-group-pin" aria-hidden="true" />
+                  <ChevronDown class="tab-group-chevron" :class="isTabGroupCollapsed(tab) ? '-rotate-90' : ''" aria-hidden="true" />
+                  <span v-if="!isTabBarCollapsed" class="tab-group-label">{{ tabGroupLabel(tab) }}</span>
+                  <span v-if="isTabGroupCollapsed(tab) && !isTabBarCollapsed" class="tab-group-count">{{ tabsInDisplayGroup(tab).length }}</span>
+                </span>
+              </button>
+            </CustomContextMenu>
+            <CustomContextMenu v-if="!isTabGroupCollapsed(tab)" :items="getTabMenuItems(tab)" v-slot="{ onContextMenu }">
               <div :class="isClassicLayout ? 'h-full' : ''" @contextmenu="onContextMenu">
                 <Tooltip>
                   <TooltipTrigger as-child>
                     <div
                       class="app-tab-pill group flex cursor-default items-center gap-1 px-2 text-xs transition-colors whitespace-nowrap select-none"
-                      :class="
+                      :class="[
                         isClassicLayout
                           ? [
                               compactTabTitle ? 'min-w-24' : 'min-w-38',
                               'h-full border-r border-border/80 font-medium dark:border-border/45',
                               tab.id === queryStore.activeTabId && !driverStoreActive && !settingsPageActive ? 'bg-background text-foreground' : 'text-foreground/70 hover:text-foreground/90',
                             ]
-                          : [compactTabTitle ? 'min-w-24' : 'min-w-38', 'h-7 rounded-md border', tab.id === queryStore.activeTabId && !driverStoreActive && !settingsPageActive ? 'text-foreground font-medium' : 'border-border/60 text-foreground/70 hover:border-border hover:text-foreground/90']
-                      "
-                      :style="[tabColorStyle(tab), tabDropStyle(tab.id)]"
+                          : [compactTabTitle ? 'min-w-24' : 'min-w-38', 'h-7 rounded-md border', tab.id === queryStore.activeTabId && !driverStoreActive && !settingsPageActive ? 'text-foreground font-medium' : 'border-border/60 text-foreground/70 hover:border-border hover:text-foreground/90'],
+                        {
+                          'tab-group-tab': settingsStore.editorSettings.tabGroupMode !== 'none',
+                          'tab-group-tab--first': isGroupStart(filteredFixedTabs, index),
+                          'tab-group-tab--last': isGroupEnd(filteredFixedTabs, index),
+                        },
+                      ]"
+                      :style="[tabColorStyle(tab), settingsStore.editorSettings.tabGroupMode !== 'none' ? tabGroupStyle(tab) : undefined, tabDropStyle(tab.id)]"
                       :data-active-tab="tab.id === queryStore.activeTabId && !driverStoreActive && !settingsPageActive"
                       @click="handleTabClick(tab)"
                       @dblclick="handleTabDoubleClick(tab, $event)"
@@ -1089,8 +1534,9 @@ function onOverflowItemKeydown(event: KeyboardEvent, tabId: string, kind: "regul
                           <Code2 v-else class="h-3.5 w-3.5" />
                         </span>
                       </TabExecutionStatus>
+                      <span v-if="isTabBarCollapsed && isDirtyTab(tab)" class="compact-dirty-tab-marker" aria-hidden="true" />
                       <input
-                        v-if="editingTabId === tab.id"
+                        v-if="editingTabId === tab.id && !isTabBarCollapsed"
                         v-model="editingTitle"
                         :data-tab-title-input="tab.id"
                         :aria-label="t('contextMenu.renameTab')"
@@ -1101,20 +1547,20 @@ function onOverflowItemKeydown(event: KeyboardEvent, tabId: string, kind: "regul
                         @keydown.escape.prevent="cancelRenameTab"
                         @blur="commitRenameTab(tab)"
                       />
-                      <span v-else class="inline-flex min-w-0 flex-1 items-center gap-0.5 overflow-hidden text-foreground">
+                      <span v-else-if="!isTabBarCollapsed" class="inline-flex min-w-0 flex-1 items-center gap-0.5 overflow-hidden text-foreground">
                         <span v-if="isDirtyTab(tab)" aria-hidden="true" class="dirty-tab-marker">*</span>
                         <span class="min-w-0 flex-1 truncate" :style="tabTitleStyle(tab)">{{ tabTitleText(tab) }}</span>
                       </span>
-                      <ReadOnlySessionControl :connection-id="tab.connectionId" compact />
-                      <button class="rounded p-0.5 text-primary hover:bg-muted-foreground/20 shrink-0" :aria-label="t('contextMenu.unfixTab')" :title="t('contextMenu.unfixTab')" @click.stop="queryStore.togglePinnedTab(tab.id)">
+                      <ReadOnlySessionControl v-if="!isTabBarCollapsed" :connection-id="tab.connectionId" compact />
+                      <button v-if="!isTabBarCollapsed" class="rounded p-0.5 text-primary hover:bg-muted-foreground/20 shrink-0" :aria-label="t('contextMenu.unfixTab')" :title="t('contextMenu.unfixTab')" @click.stop="queryStore.togglePinnedTab(tab.id)">
                         <Pin class="h-3 w-3 fill-current" aria-hidden="true" />
                       </button>
-                      <button class="rounded hover:bg-muted-foreground/20 p-0.5 shrink-0" @click.stop="queryStore.closeTab(tab.id)">
+                      <button v-if="!isTabBarCollapsed" class="rounded hover:bg-muted-foreground/20 p-0.5 shrink-0" @click.stop="queryStore.closeTab(tab.id)">
                         <X class="h-3 w-3" />
                       </button>
                     </div>
                   </TooltipTrigger>
-                  <TooltipContent side="bottom" class="text-xs grid grid-cols-[auto_1fr] gap-x-2">
+                  <TooltipContent :side="tabTooltipSide" class="text-xs grid grid-cols-[auto_1fr] gap-x-2">
                     <template v-for="line in tabTooltipLines(tab, t)" :key="line.label">
                       <span class="text-muted-foreground">{{ line.label }}</span>
                       <span>{{ line.value }}</span>
@@ -1181,13 +1627,65 @@ function onOverflowItemKeydown(event: KeyboardEvent, tabId: string, kind: "regul
         </Popover>
       </div>
     </div>
+    <div v-if="!isTabBarCollapsed" class="panel-resize-handle" :class="settingsStore.editorSettings.tabPlacement === 'right' ? 'panel-resize-handle--left' : 'panel-resize-handle--right'" @mousedown="emit('start-resize', $event)" />
   </div>
 
+  <Dialog :open="tabGroupEditorOpen" @update:open="tabGroupEditorOpen = $event">
+    <DialogContent class="min-w-0 sm:max-w-sm">
+      <DialogHeader>
+        <DialogTitle class="flex min-w-0 items-center gap-2">
+          <span class="h-4 w-1 shrink-0 rounded-full" :style="{ background: editingTabGroupColor || editingTabGroupFallbackColor }" />
+          <span class="truncate">{{ t("tabs.editGroupTitle", { name: editingTabGroupDefaultLabel }) }}</span>
+        </DialogTitle>
+      </DialogHeader>
+      <div class="space-y-4">
+        <label class="grid gap-1.5 text-sm">
+          <span class="font-medium">{{ t("tabs.groupName") }}</span>
+          <Input v-model="editingTabGroupName" data-tab-group-name-input maxlength="80" :placeholder="editingTabGroupDefaultLabel" class="h-9" @keydown.enter.prevent="saveTabGroupCustomization" />
+        </label>
+        <fieldset class="grid gap-2">
+          <legend class="text-sm font-medium">{{ t("tabs.groupColor") }}</legend>
+          <div class="flex flex-wrap items-center gap-2" :style="tabGroupEditorPreviewStyle">
+            <button type="button" class="tab-group-color-option tab-group-color-option--auto" :class="{ 'tab-group-color-option--selected': editingTabGroupColor === '' }" :aria-label="t('tabs.groupColorAuto')" :title="t('tabs.groupColorAuto')" @click="editingTabGroupColor = ''">
+              <RotateCcw class="h-3.5 w-3.5" />
+            </button>
+            <button
+              v-for="color in tabGroupPalette"
+              :key="color"
+              type="button"
+              class="tab-group-color-option"
+              :class="{ 'tab-group-color-option--selected': editingTabGroupColor === color }"
+              :style="{ '--tab-group-option-color': color }"
+              :aria-label="color"
+              :title="color"
+              @click="editingTabGroupColor = color"
+            />
+            <label
+              class="tab-group-custom-color"
+              :class="{ 'tab-group-color-option--selected': editingTabGroupColor !== '' && !tabGroupPalette.includes(editingTabGroupColor) }"
+              :style="{ '--tab-group-option-color': editingTabGroupColor || editingTabGroupFallbackColor }"
+              :title="t('tabs.groupColorCustom')"
+            >
+              <input type="color" :value="editingTabGroupColor || editingTabGroupFallbackColor" :aria-label="t('tabs.groupColorCustom')" @input="updateCustomTabGroupColor" />
+            </label>
+          </div>
+        </fieldset>
+      </div>
+      <DialogFooter class="sm:justify-between">
+        <Button v-if="editingTabGroupHasCustomization" variant="ghost" class="mr-auto" @click="resetTabGroupCustomization()">{{ t("tabs.resetGroup") }}</Button>
+        <div class="flex justify-end gap-2">
+          <Button variant="outline" @click="tabGroupEditorOpen = false">{{ t("common.cancel") }}</Button>
+          <Button @click="saveTabGroupCustomization">{{ t("common.save") }}</Button>
+        </div>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+
   <Dialog
     :open="queryStore.showCloseConfirm"
     @update:open="
       (open) => {
-        if (!open) queryStore.cancelClosePendingTab();
+        if (!open) dismissCloseConfirm();
       }
     "
   >
@@ -1263,6 +1761,19 @@ function onOverflowItemKeydown(event: KeyboardEvent, tabId: string, kind: "regul
   min-height: 2rem;
   height: 2rem !important;
   border-right: 0;
+  transition:
+    background-color 150ms ease,
+    border-color 150ms ease,
+    box-shadow 150ms ease,
+    color 150ms ease;
+}
+
+.vertical-tab-layout .app-tab-pill[data-active-tab="true"] {
+  border-color: color-mix(in srgb, var(--tab-group-color, var(--ring)) 18%, transparent);
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--tab-group-color, var(--ring)) 13%, transparent),
+    0 1px 2px rgb(0 0 0 / 0.08),
+    0 3px 9px color-mix(in srgb, var(--tab-group-color, var(--foreground)) 8%, transparent);
 }
 
 .vertical-tab-layout .app-tab-scroll > * {
@@ -1270,21 +1781,355 @@ function onOverflowItemKeydown(event: KeyboardEvent, tabId: string, kind: "regul
   flex: none;
 }
 
-.vertical-tab-layout .tab-group-header {
-  width: 100%;
-  padding: 0.45rem 0.6rem 0.2rem;
-  color: var(--muted-foreground);
-  font-size: 0.7rem;
-  font-weight: 600;
-  line-height: 1rem;
-  text-transform: uppercase;
+.vertical-tab-layout--collapsed .app-tab-scroll {
+  align-items: center;
+}
+
+.vertical-tab-layout--collapsed .app-tab-pill {
+  position: relative;
+  width: 2.5rem;
+  min-height: 2.5rem;
+  height: 2.5rem !important;
+  justify-content: center;
+  margin: 0.125rem auto;
+  padding: 0 !important;
+  border-radius: 0.625rem;
+}
+
+.vertical-tab-layout--collapsed .compact-dirty-tab-marker {
+  position: absolute;
+  top: 0.3rem;
+  right: 0.3rem;
+  width: 0.35rem;
+  height: 0.35rem;
+  border-radius: 9999px;
+  background: var(--destructive);
+  box-shadow: 0 0 0 1px var(--background);
+}
+
+.vertical-tab-layout.vertical-tab-layout--collapsed .tab-group-header {
+  width: 2.5rem !important;
+  height: 1.75rem;
+  margin: 0.35rem auto 0.1rem;
+}
+
+.vertical-tab-layout.vertical-tab-layout--collapsed .tab-group-header-content {
+  justify-content: center;
+  padding: 0;
+}
+
+.vertical-tab-layout.vertical-tab-layout--collapsed .tab-group-tab {
+  width: 2.5rem;
+  margin-inline: auto;
+  padding: 0 !important;
+}
+
+.vertical-tab-layout.vertical-tab-layout--collapsed .tab-group-header::after,
+.vertical-tab-layout.vertical-tab-layout--collapsed .tab-group-tab::before,
+.vertical-tab-layout.vertical-tab-layout--collapsed .tab-group-tab::after {
+  display: none;
+}
+
+.tab-group-header {
+  display: inline-flex;
+  flex: none;
+  cursor: pointer;
+  align-items: center;
+  min-width: 0;
+  border: 0;
+  background: transparent;
+  outline: none;
+  -webkit-user-select: none;
+  user-select: none;
+  transition:
+    color 150ms ease,
+    box-shadow 150ms ease;
+}
+
+.tab-group-header:focus-visible {
+  box-shadow: 0 0 0 2px var(--ring);
+}
+
+.tab-group-header-content {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.25rem;
+  transition:
+    color 150ms ease,
+    background-color 150ms ease,
+    box-shadow 150ms ease;
+}
+
+.tab-group-marker {
+  width: 0.4rem;
+  height: 0.4rem;
+  flex: none;
+  border-radius: 9999px;
+  background: var(--tab-group-color);
+}
+
+.tab-group-chevron {
+  width: 0.75rem;
+  height: 0.75rem;
+  flex: none;
+  transition: transform 150ms ease;
+}
+
+.tab-group-pin {
+  width: 0.7rem;
+  height: 0.7rem;
+  flex: none;
+  fill: currentColor;
+  opacity: 0.7;
+}
+
+.tab-group-label {
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.app-tab-scroll:not(.wrap-mode) .tab-group-header {
+.tab-group-count {
+  display: inline-flex;
+  min-width: 1rem;
+  height: 1rem;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  padding-inline: 0.25rem;
+  background: color-mix(in srgb, var(--tab-group-color) 18%, transparent);
+  font-size: 0.625rem;
+  line-height: 1;
+}
+
+.app-tab-bar:not(.vertical-tab-layout) .tab-group-header {
+  position: relative;
+  height: 100%;
   align-self: stretch;
+  margin-inline: 0.15rem 0.05rem;
+  padding: 0;
+  color: var(--tab-group-color);
+  font-size: 0.6875rem;
+  font-weight: 650;
+  line-height: 1;
+}
+
+.app-tab-bar:not(.vertical-tab-layout) .tab-group-header-content {
+  height: 1.625rem;
+  border-radius: 9999px;
+  padding-inline: 0.4rem 0.5rem;
+  background: var(--tab-group-soft);
+}
+
+.app-tab-bar:not(.vertical-tab-layout) .tab-group-header:hover .tab-group-header-content,
+.app-tab-bar:not(.vertical-tab-layout) .tab-group-header--active .tab-group-header-content {
+  background: color-mix(in srgb, var(--tab-group-color) 18%, transparent);
+}
+
+.app-tab-bar:not(.vertical-tab-layout) .tab-group-header--active .tab-group-header-content {
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tab-group-color) 35%, transparent);
+}
+
+.app-tab-bar:not(.vertical-tab-layout) .tab-group-header::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  right: -0.45rem;
+  bottom: 0;
+  left: 0.3rem;
+  height: 2px;
+  border-radius: 9999px;
+  background: var(--tab-group-color);
+  pointer-events: none;
+  opacity: 0.82;
+}
+
+.app-tab-bar:not(.vertical-tab-layout) .tab-group-header--collapsed::after {
+  right: 0.3rem;
+}
+
+.app-tab-bar:not(.vertical-tab-layout)[data-placement="bottom"] .tab-group-header::after {
+  top: 0;
+  bottom: auto;
+}
+
+.app-tab-bar:not(.vertical-tab-layout) .tab-group-tab {
+  position: relative;
+}
+
+.app-tab-bar:not(.vertical-tab-layout) .tab-group-tab::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  right: -0.2rem;
+  bottom: 0;
+  left: -0.2rem;
+  height: 2px;
+  border-radius: 9999px;
+  background: var(--tab-group-color);
+  pointer-events: none;
+  opacity: 0.82;
+}
+
+.app-tab-bar:not(.vertical-tab-layout)[data-placement="bottom"] .tab-group-tab::after {
+  top: 0;
+  bottom: auto;
+}
+
+.app-tab-bar:not(.vertical-tab-layout) .tab-group-tab--first::after {
+  left: 0;
+}
+
+.app-tab-bar:not(.vertical-tab-layout) .tab-group-tab--last::after {
+  right: 0.3rem;
+}
+
+.vertical-tab-layout .tab-group-header {
+  position: relative;
+  width: calc(100% - 1rem) !important;
+  height: 2rem;
+  align-self: center;
+  margin: 0.35rem 0.5rem 0.08rem;
+  padding: 0;
+  color: var(--foreground);
+  font-size: 0.75rem;
+  font-weight: 650;
+  line-height: 1rem;
+}
+
+.vertical-tab-layout .tab-group-header-content {
+  width: 100%;
+  height: 100%;
+  border-radius: 0.5rem;
+  padding-inline: 0.55rem;
+}
+
+.vertical-tab-layout .tab-group-header:hover .tab-group-header-content,
+.vertical-tab-layout .tab-group-header--active .tab-group-header-content {
+  background: var(--tab-group-soft);
+}
+
+.vertical-tab-layout .tab-group-header--active {
+  color: var(--tab-group-color);
+}
+
+.vertical-tab-layout .tab-group-marker {
+  width: 0.22rem;
+  height: 1rem;
+  border-radius: 9999px;
+}
+
+.vertical-tab-layout .tab-group-header:not(.tab-group-header--collapsed)::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  top: 1rem;
+  bottom: -1.08rem;
+  left: 0.66rem;
+  width: 0.7rem;
+  border-bottom: 1px solid var(--tab-group-rail);
+  border-left: 1px solid var(--tab-group-rail);
+  border-bottom-left-radius: 0.1875rem;
+  pointer-events: none;
+}
+
+.vertical-tab-layout .tab-group-header:not(.tab-group-header--collapsed) .tab-group-marker {
+  position: relative;
+  z-index: 2;
+}
+
+.vertical-tab-layout .tab-group-tab {
+  position: relative;
+  width: calc(100% - 3rem);
+  margin-inline: 2.5rem 0.5rem;
+  padding-inline-start: 0.65rem !important;
+  border-color: transparent;
+}
+
+.vertical-tab-layout .tab-group-tab::before {
+  content: "";
+  position: absolute;
+  top: -0.25rem;
+  bottom: -0.25rem;
+  left: -0.65rem;
+  width: 1px;
+  border-radius: 9999px;
+  background: var(--tab-group-rail);
+  pointer-events: none;
+}
+
+.vertical-tab-layout .tab-group-tab--first::before {
+  top: 50%;
+}
+
+.vertical-tab-layout .tab-group-tab--last::before {
+  bottom: 50%;
+  border-radius: 9999px 9999px 0 0;
+}
+
+.vertical-tab-layout .tab-group-tab::after {
+  content: "";
+  position: absolute;
+  top: calc(50% - 0.5px);
+  left: -0.65rem;
+  width: 0.65rem;
+  height: 1px;
+  border-radius: 0 9999px 9999px 0;
+  background: var(--tab-group-rail);
+  pointer-events: none;
+}
+
+.tab-group-color-option,
+.tab-group-custom-color {
+  position: relative;
+  display: inline-flex;
+  width: 1.75rem;
+  height: 1.75rem;
+  flex: none;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid var(--background);
+  border-radius: 9999px;
+  background: var(--tab-group-option-color);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--foreground) 18%, transparent);
+  outline: none;
+  transition:
+    box-shadow 150ms ease,
+    transform 150ms ease;
+}
+
+.tab-group-color-option:hover,
+.tab-group-custom-color:hover {
+  transform: scale(1.08);
+}
+
+.tab-group-color-option--selected {
+  box-shadow:
+    0 0 0 2px var(--background),
+    0 0 0 4px var(--tab-group-option-color, var(--tab-group-color));
+}
+
+.tab-group-color-option--auto {
+  color: var(--muted-foreground);
+  background: var(--muted);
+}
+
+.tab-group-custom-color {
+  overflow: hidden;
+  background: conic-gradient(#ef4444, #f59e0b, #22c55e, #06b6d4, #3b82f6, #a855f7, #ef4444);
+}
+
+.tab-group-custom-color input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  opacity: 0;
 }
 
 /* 父级 strip 容器在包含 wrap-mode 时也需要解除高度约束和裁剪 */
diff --git a/apps/desktop/src/components/layout/__tests__/AppTabBar.spec.ts b/apps/desktop/src/components/layout/__tests__/AppTabBar.spec.ts
index 0c44685561..5902c71628 100644
--- a/apps/desktop/src/components/layout/__tests__/AppTabBar.spec.ts
+++ b/apps/desktop/src/components/layout/__tests__/AppTabBar.spec.ts
@@ -136,6 +136,38 @@ describe("AppTabBar special page selection", () => {
     expect(tabBarSource).toContain(':style="specialTabActiveStyle(settingsPageActive)"');
     expect(tabBarSource).toContain(':style="specialTabActiveStyle(driverStoreActive)"');
   });
+
+  it("does not leave a query group highlighted behind an active special page", () => {
+    const groupActive = sourceBetween("function isTabGroupActive", "function toggleTabGroup");
+
+    expect(groupActive).toContain("if (props.driverStoreActive || props.settingsPageActive) return false;");
+  });
+
+  it("restores the active special page after closing the group containing the retained query tab", () => {
+    const restoreSurface = sourceBetween("function restoreSpecialRegularSurface", "function closeSpecialRegularSurfaces");
+    const closeGroup = sourceBetween("function closeTabGroup", "function tabsToRightInGroup");
+
+    expect(restoreSurface).toContain('if (surface === "settings" && props.settingsPageOpen) emit("activate-settings-page")');
+    expect(restoreSurface).toContain('if (surface === "driverStore" && props.driverStoreOpen) emit("activate-driver-store")');
+    expect(restoreSurface).toContain("const surface = pendingGroupCloseSpecialSurface.value;");
+    expect(restoreSurface).toContain("pendingGroupCloseSpecialSurface.value = null;");
+    expect(closeGroup).toContain('props.settingsPageActive ? "settings" : props.driverStoreActive ? "driverStore" : null');
+    expect(closeGroup).toContain("pendingGroupCloseSpecialSurface.value = activeSpecialSurface;");
+    expect(closeGroup).toContain("queryStore.closeTabsByIds(tabsToClose, finalActiveTabId, finishSpecialSurfacePreservingGroupClose)");
+    expect(closeGroup).toContain("restoreSpecialRegularSurface(activeSpecialSurface);");
+  });
+
+  it("keeps and restores the special page while dirty grouped tabs are confirmed or cancelled", () => {
+    const activeTabWatch = sourceBetween("watch(\n  () => queryStore.activeTabId", "watch(\n  () => props.driverStoreActive");
+    const dismissClose = sourceBetween("function dismissCloseConfirm", "function handleCancelClose");
+    const cancelClose = sourceBetween("function handleCancelClose", "const tabsContainerRef");
+
+    expect(activeTabWatch).toContain("restoreSpecialRegularSurface(pendingGroupCloseSpecialSurface.value);");
+    expect(dismissClose).toContain("pendingGroupCloseSpecialSurface.value = null;");
+    expect(dismissClose).toContain("restoreSpecialRegularSurface(specialSurface);");
+    expect(cancelClose).toContain("dismissCloseConfirm();");
+    expect(tabBarSource).toContain("if (!open) dismissCloseConfirm();");
+  });
 });
 
 describe("AppTabBar overflow search", () => {
@@ -162,3 +194,115 @@ describe("AppTabBar query execution status", () => {
     expect(tabBarSource.match(/<\/TabExecutionStatus>/g)).toHaveLength(4);
   });
 });
+
+describe("AppTabBar collapsible groups", () => {
+  it("supports a persistent icon-only vertical tab bar without losing tab actions", () => {
+    expect(tabBarSource).toContain("tabBarCollapsed?: boolean;");
+    expect(tabBarSource).toContain('"toggle-collapse": [];');
+    expect(tabBarSource).toContain('return { width: "3.5rem", flex: "0 0 3.5rem" };');
+    expect(tabBarSource).toContain('<component :is="tabBarCollapseIcon"');
+    expect(tabBarSource).toContain("@click=\"emit('toggle-collapse')\"");
+    expect(tabBarSource).toContain('v-if="!isTabBarCollapsed" class="panel-resize-handle"');
+    expect(tabBarSource).toContain(".vertical-tab-layout--collapsed .app-tab-pill");
+    expect(tabBarSource).toContain(".vertical-tab-layout.vertical-tab-layout--collapsed .tab-group-tab::before");
+    expect(tabBarSource.match(/v-if="isTabBarCollapsed && isDirtyTab\(tab\)"/g)).toHaveLength(2);
+    expect(tabBarSource).toMatch(/\(collapsed\) => \{\s*if \(collapsed\) tabSearchQuery\.value = "";/);
+  });
+
+  it("keeps horizontal placements immune to the persisted vertical collapse state", () => {
+    expect(tabBarSource).toContain("const isTabBarCollapsed = computed(() => isVerticalLayout.value && !!props.tabBarCollapsed);");
+    expect(tabBarSource).not.toContain('v-else-if="!tabBarCollapsed"');
+    expect(tabBarSource).not.toContain('v-if="!tabBarCollapsed" class="min-w-0 truncate');
+    expect(tabBarSource).not.toContain('v-if="tabBarCollapsed && isDirtyTab');
+    // The only raw-prop guards left render inside the vertical-only toolbar.
+    expect(tabBarSource.match(/!tabBarCollapsed/g)).toHaveLength(3);
+  });
+
+  it("keeps only grouping and collapse in the compact vertical toolbar", () => {
+    expect(tabBarSource).toContain('const verticalTabToolbarButtonClass = "inline-flex h-7 w-7');
+    expect(tabBarSource.match(/:trigger-class="verticalTabToolbarButtonClass"/g)).toHaveLength(1);
+    const toolbar = sourceBetween('<div v-if="!tabBarCollapsed" class="flex shrink-0 items-center gap-0">', "</div>\n      <button");
+    expect(toolbar).toContain(':trigger-icon="ListFilter"');
+    expect(toolbar).not.toContain(':trigger-icon="ArrowDownUp"');
+    expect(toolbar).not.toContain(':trigger-icon="PanelTop"');
+    expect(tabBarSource).toContain('class="flex shrink-0 items-center gap-0.5 border-b p-1.5"');
+    expect(tabBarSource).toContain('class="flex shrink-0 items-center gap-0"');
+  });
+
+  it("keeps separate collapsed state for regular and fixed groups", () => {
+    expect(tabBarSource).toContain("const collapsedTabGroups = ref<Set<string>>(new Set());");
+    expect(tabBarSource).toContain('return `${tab.pinned ? "fixed" : "regular"}:${tabGroupKey(tab)}`;');
+    expect(tabBarSource).toContain("function toggleTabGroup(tab: QueryTab)");
+    expect(tabBarSource.match(/:aria-expanded="!isTabGroupCollapsed\(tab\)"/g)).toHaveLength(2);
+    expect(tabBarSource.match(/<CustomContextMenu v-if="!isTabGroupCollapsed\(tab\)"/g)).toHaveLength(2);
+  });
+
+  it("temporarily reveals matches and expands a collapsed group when one of its tabs becomes active", () => {
+    expect(tabBarSource).toContain('if (settingsStore.editorSettings.tabGroupMode === "none" || tabSearchQuery.value.trim()) return false;');
+    expect(tabBarSource).toContain("expandTabGroupForTab(tabId);");
+  });
+
+  it("uses compact group pills and places the accent next to content for top and bottom bars", () => {
+    expect(tabBarSource).toContain(':data-placement="settingsStore.editorSettings.tabPlacement"');
+    expect(tabBarSource).toContain(".app-tab-bar:not(.vertical-tab-layout) .tab-group-header");
+    expect(tabBarSource).toContain(".app-tab-bar:not(.vertical-tab-layout) .tab-group-header::after");
+    expect(tabBarSource).toContain(".app-tab-bar:not(.vertical-tab-layout) .tab-group-header--collapsed::after");
+    expect(tabBarSource).toContain('.app-tab-bar:not(.vertical-tab-layout)[data-placement="bottom"] .tab-group-tab::after');
+    expect(tabBarSource).toContain(".app-tab-bar:not(.vertical-tab-layout) .tab-group-tab--last::after");
+    expect(tabBarSource).toContain(".vertical-tab-layout .tab-group-tab::before");
+  });
+
+  it("supports persistent names and colors from the group header context menu", () => {
+    expect(tabBarSource.match(/:items="\(\) => getTabGroupMenuItems\(tab\)"/g)).toHaveLength(2);
+    expect(tabBarSource).toContain('["#2563eb", "#d97706", "#7c3aed", "#059669", "#dc2626", "#0891b2", "#db2777", "#475569"]');
+    expect(tabBarSource).toContain("tabGroupCustomizations: customizations");
+    expect(tabBarSource).toContain("data-tab-group-name-input");
+    expect(tabBarSource).toContain('type="color"');
+  });
+
+  it("exposes placement, grouping, and sorting preferences from the group context menu", () => {
+    const preferences = sourceBetween("function getTabPreferenceMenuItems", "function getTabGroupMenuItems");
+    const groupMenu = sourceBetween("function getTabGroupMenuItems", "function openTabGroupContextMenu");
+    expect(preferences).toContain('label: t("settings.tabPlacement")');
+    expect(preferences).toContain("action: () => updateTabPlacement(item.value)");
+    expect(preferences).toContain('label: t("settings.tabGroup")');
+    expect(preferences).toContain("action: () => updateTabGroupMode(item.value)");
+    expect(preferences).toContain('label: t("settings.tabSort")');
+    expect(preferences).toContain("action: () => updateTabSortMode(item.value)");
+    expect(preferences.match(/checked: item\.value === settingsStore\.editorSettings\./g)).toHaveLength(3);
+    expect(groupMenu).toContain("...getTabPreferenceMenuItems()");
+  });
+
+  it("exposes placement, grouping, and sorting preferences from each tab context menu", () => {
+    const menu = sourceBetween("function getTabMenuItems", "function handleSaveAndClose");
+    expect(menu).toContain("...getTabPreferenceMenuItems()");
+  });
+
+  it("waits for tab preference persistence and treats the whole group title as the context target", () => {
+    expect(tabBarSource).toContain("await settingsStore.updateEditorSettingsAndPersist(partial)");
+    expect(tabBarSource.match(/openTabGroupContextMenu\(\$event, onContextMenu\)/g)).toHaveLength(2);
+    expect(tabBarSource).toContain("document.getSelection()?.removeAllRanges()");
+    expect(tabBarSource).toContain("user-select: none;");
+  });
+
+  it("removes the unexplained fixed-tab divider from vertical placement", () => {
+    expect(tabBarSource).toContain("isVerticalLayout ? 'max-h-[40%] flex-col bg-background pt-1'");
+    expect(tabBarSource).toContain('<Pin v-if="!isTabBarCollapsed" class="tab-group-pin" aria-hidden="true" />');
+  });
+
+  it("uses a soft active shadow and a single indented rail for sidebar groups", () => {
+    expect(tabBarSource).toContain("if (isVerticalLayout.value) {");
+    expect(tabBarSource).toContain('"--app-tab-background": "var(--accent)"');
+    expect(tabBarSource).toContain('.vertical-tab-layout .app-tab-pill[data-active-tab="true"]');
+    expect(tabBarSource).toContain("inset 0 0 0 1px color-mix");
+    expect(tabBarSource).toContain(".vertical-tab-layout .tab-group-header:not(.tab-group-header--collapsed)::after");
+    expect(tabBarSource).toContain(".vertical-tab-layout .tab-group-tab::after");
+    expect(tabBarSource).toContain("margin-inline: 2.5rem 0.5rem;");
+    expect(tabBarSource).toContain("padding-inline-start: 0.65rem !important;");
+    expect(tabBarSource).toContain("left: -0.65rem;");
+    expect(tabBarSource).toContain(".vertical-tab-layout .tab-group-tab--first::before");
+    expect(tabBarSource).toContain("bottom: -1.08rem;");
+    expect(tabBarSource).toContain("top: 50%;");
+    expect(tabBarSource).toContain("border-bottom-left-radius: 0.1875rem;");
+  });
+});
diff --git a/apps/desktop/src/composables/__tests__/usePanelResize.spec.ts b/apps/desktop/src/composables/__tests__/usePanelResize.spec.ts
index 471ca640cb..8cc6772061 100644
--- a/apps/desktop/src/composables/__tests__/usePanelResize.spec.ts
+++ b/apps/desktop/src/composables/__tests__/usePanelResize.spec.ts
@@ -79,4 +79,19 @@ describe("usePanelResize", () => {
     expect(aiPanelWidth.value).toBe(600);
     expect(localStorage.getItem("dbx-ai-panel-width")).toBe("600");
   });
+
+  it("persists the collapsed vertical tab bar state across composable instances", () => {
+    const first = usePanelResize();
+    expect(first.tabBarCollapsed.value).toBe(false);
+
+    first.setTabBarCollapsed(true);
+    expect(first.tabBarCollapsed.value).toBe(true);
+    expect(localStorage.getItem("dbx-tab-bar-collapsed")).toBe("true");
+
+    const restored = usePanelResize();
+    expect(restored.tabBarCollapsed.value).toBe(true);
+
+    restored.setTabBarCollapsed(false);
+    expect(localStorage.getItem("dbx-tab-bar-collapsed")).toBe("false");
+  });
 });
diff --git a/apps/desktop/src/composables/usePanelResize.ts b/apps/desktop/src/composables/usePanelResize.ts
index 75f8fe091e..57101dba51 100644
--- a/apps/desktop/src/composables/usePanelResize.ts
+++ b/apps/desktop/src/composables/usePanelResize.ts
@@ -21,6 +21,8 @@ export function usePanelResize() {
   const historyWidth = ref(Number(safeLocalStorageGet("dbx-history-width")) || 288);
   const sqlLibraryWidth = ref(Number(safeLocalStorageGet("dbx-sql-library-width")) || 288);
   const sqlFilePanelWidth = ref(Number(safeLocalStorageGet("dbx-sql-file-panel-width")) || 288);
+  const tabBarWidth = ref(Number(safeLocalStorageGet("dbx-tab-bar-width")) || 240);
+  const tabBarCollapsed = ref(safeLocalStorageGet("dbx-tab-bar-collapsed") === "true");
 
   function startPanelResize(widthRef: Ref<number>, storageKey: string, direction: "left" | "right", maxWidth: PanelMaxWidth = DEFAULT_PANEL_MAX_WIDTH) {
     return (e: MouseEvent) => {
@@ -55,6 +57,13 @@ export function usePanelResize() {
   const startHistoryResize = startPanelResize(historyWidth, "dbx-history-width", "left");
   const startSqlLibraryResize = startPanelResize(sqlLibraryWidth, "dbx-sql-library-width", "left");
   const startSqlFilePanelResize = startPanelResize(sqlFilePanelWidth, "dbx-sql-file-panel-width", "left");
+  const startLeftTabBarResize = startPanelResize(tabBarWidth, "dbx-tab-bar-width", "right");
+  const startRightTabBarResize = startPanelResize(tabBarWidth, "dbx-tab-bar-width", "left");
+
+  function setTabBarCollapsed(collapsed: boolean) {
+    tabBarCollapsed.value = collapsed;
+    safeLocalStorageSet("dbx-tab-bar-collapsed", String(collapsed));
+  }
 
   return {
     sidebarWidth,
@@ -62,10 +71,15 @@ export function usePanelResize() {
     historyWidth,
     sqlLibraryWidth,
     sqlFilePanelWidth,
+    tabBarWidth,
+    tabBarCollapsed,
     startSidebarResize,
     startAiPanelResize,
     startHistoryResize,
     startSqlLibraryResize,
     startSqlFilePanelResize,
+    startLeftTabBarResize,
+    startRightTabBarResize,
+    setTabBarCollapsed,
   };
 }
diff --git a/apps/desktop/src/i18n/locales/en.ts b/apps/desktop/src/i18n/locales/en.ts
index ef50efeeb9..b96dbbe2f6 100644
--- a/apps/desktop/src/i18n/locales/en.ts
+++ b/apps/desktop/src/i18n/locales/en.ts
@@ -1496,11 +1496,20 @@ export default {
     maximizeWindow: "Maximize",
     closeWindow: "Close",
     searchOpenTabs: "Search open tabs...",
+    collapseTabBar: "Collapse tab bar",
+    expandTabBar: "Expand tab bar",
     switcherTitle: "Switch Tab",
     switcherHint: "keep pressing to move, release to switch",
     noMatchingTabs: "No matching tabs",
     fixedTabs: "Fixed tabs",
     openDataTabs: "Open tables",
+    editGroupTitle: "Edit group: {name}",
+    groupName: "Group name",
+    groupColor: "Group color",
+    groupColorAuto: "Use default color",
+    groupColorCustom: "Choose a custom color",
+    resetGroup: "Reset",
+    settingsSaveFailed: "Could not save tab settings: {message}",
   },
   databaseBrowser: {
     search: "Search databases...",
@@ -3035,6 +3044,9 @@ export default {
     compactTabTitle: "Shorten Tab Titles",
     fullTabTitle: "Show Full Tab Titles",
     closeTab: "Close Tab",
+    editTabGroup: "Edit Tab Group",
+    resetTabGroup: "Reset Tab Group",
+    closeTabGroup: "Close Tab Group",
     closeFixedTab: "Close Fixed Tab",
     closeLeftTabs: "Close Tabs to the Left",
     closeRightTabs: "Close Tabs to the Right",
diff --git a/apps/desktop/src/i18n/locales/es.ts b/apps/desktop/src/i18n/locales/es.ts
index 7e4fe32b90..8c1473fbb6 100644
--- a/apps/desktop/src/i18n/locales/es.ts
+++ b/apps/desktop/src/i18n/locales/es.ts
@@ -1463,11 +1463,20 @@ export default withEnglishFallback({
     scrollRight: "Desplazar pestañas a la derecha",
     openTabs: "Pestañas abiertas",
     searchOpenTabs: "Buscar pestañas abiertas...",
+    collapseTabBar: "Contraer barra de pestañas",
+    expandTabBar: "Expandir barra de pestañas",
     switcherTitle: "Cambiar de pestaña",
     switcherHint: "sigue pulsando para moverte, suelta para cambiar",
     noMatchingTabs: "No se encontraron pestañas",
     fixedTabs: "Pestañas fijadas",
     openDataTabs: "Tablas abiertas",
+    editGroupTitle: "Editar grupo: {name}",
+    groupName: "Nombre del grupo",
+    groupColor: "Color del grupo",
+    groupColorAuto: "Usar color predeterminado",
+    groupColorCustom: "Elegir color personalizado",
+    resetGroup: "Restablecer",
+    settingsSaveFailed: "No se pudo guardar la configuración de pestañas: {message}",
     gridfs: "GridFS",
     etcdDashboard: "Panel de etcd",
     etcdAccessControl: "Control de acceso de etcd",
@@ -2952,6 +2961,9 @@ export default withEnglishFallback({
     compactTabTitle: "Acortar títulos de pestañas",
     fullTabTitle: "Mostrar títulos completos de pestañas",
     closeTab: "Cerrar pestaña",
+    editTabGroup: "Editar grupo de pestañas",
+    resetTabGroup: "Restablecer grupo de pestañas",
+    closeTabGroup: "Cerrar grupo de pestañas",
     closeFixedTab: "Cerrar pestaña fijada",
     closeOtherTabs: "Cerrar otras pestañas",
     closeOtherRegularTabs: "Cerrar otras pestañas normales",
diff --git a/apps/desktop/src/i18n/locales/it.ts b/apps/desktop/src/i18n/locales/it.ts
index 173acd6754..08425669e7 100644
--- a/apps/desktop/src/i18n/locales/it.ts
+++ b/apps/desktop/src/i18n/locales/it.ts
@@ -1461,11 +1461,20 @@ export default withEnglishFallback({
     scrollRight: "Scorri schede a destra",
     openTabs: "Schede aperte",
     searchOpenTabs: "Cerca schede aperte...",
+    collapseTabBar: "Comprimi barra delle schede",
+    expandTabBar: "Espandi barra delle schede",
     switcherTitle: "Cambia scheda",
     switcherHint: "continua a premere per spostarti, rilascia per cambiare",
     noMatchingTabs: "Nessuna scheda corrispondente",
     fixedTabs: "Schede bloccate",
     openDataTabs: "Tabelle aperte",
+    editGroupTitle: "Modifica gruppo: {name}",
+    groupName: "Nome gruppo",
+    groupColor: "Colore gruppo",
+    groupColorAuto: "Usa colore predefinito",
+    groupColorCustom: "Scegli colore personalizzato",
+    resetGroup: "Ripristina",
+    settingsSaveFailed: "Impossibile salvare le impostazioni delle schede: {message}",
     gridfs: "GridFS",
     etcdDashboard: "etcd dashboard",
     etcdAccessControl: "controllo accessi etcd",
@@ -2950,6 +2959,9 @@ export default withEnglishFallback({
     compactTabTitle: "Accorcia Titoli Schede",
     fullTabTitle: "Mostra titoli completi delle schede",
     closeTab: "Chiudi Scheda",
+    editTabGroup: "Modifica gruppo di schede",
+    resetTabGroup: "Ripristina gruppo di schede",
+    closeTabGroup: "Chiudi Gruppo di Schede",
     closeFixedTab: "Chiudi Scheda Fissa",
     closeOtherTabs: "Chiudi Altre Schede",
     closeOtherRegularTabs: "Chiudi Altre Schede Normali",
diff --git a/apps/desktop/src/i18n/locales/ja.ts b/apps/desktop/src/i18n/locales/ja.ts
index 28439d5a77..31f3553f7f 100644
--- a/apps/desktop/src/i18n/locales/ja.ts
+++ b/apps/desktop/src/i18n/locales/ja.ts
@@ -1480,11 +1480,20 @@ export default withEnglishFallback({
     scrollRight: "タブを右にスクロール",
     openTabs: "開いているタブ",
     searchOpenTabs: "開いているタブを検索...",
+    collapseTabBar: "タブバーを折りたたむ",
+    expandTabBar: "タブバーを展開",
     switcherTitle: "タブを切り替え",
     switcherHint: "押し続けて移動、離して切り替え",
     noMatchingTabs: "一致するタブがありません",
     fixedTabs: "固定タブ",
     openDataTabs: "開いているテーブル",
+    editGroupTitle: "グループを編集: {name}",
+    groupName: "グループ名",
+    groupColor: "グループの色",
+    groupColorAuto: "既定の色を使用",
+    groupColorCustom: "カスタムカラーを選択",
+    resetGroup: "リセット",
+    settingsSaveFailed: "タブ設定を保存できません: {message}",
     zookeeper: "ZooKeeper",
     consul: "Consul",
     vector: "ベクター",
@@ -2974,6 +2983,9 @@ export default withEnglishFallback({
     compactTabTitle: "タブタイトルを短縮",
     fullTabTitle: "タブの完全なタイトルを表示",
     closeTab: "タブを閉じる",
+    editTabGroup: "タブグループを編集",
+    resetTabGroup: "タブグループをリセット",
+    closeTabGroup: "このグループのタブを閉じる",
     closeFixedTab: "固定タブを閉じる",
     closeOtherTabs: "他のタブを閉じる",
     closeOtherRegularTabs: "他の通常タブを閉じる",
diff --git a/apps/desktop/src/i18n/locales/ko.ts b/apps/desktop/src/i18n/locales/ko.ts
index 4ab6999a75..c283587477 100644
--- a/apps/desktop/src/i18n/locales/ko.ts
+++ b/apps/desktop/src/i18n/locales/ko.ts
@@ -1367,11 +1367,20 @@ export default withEnglishFallback({
     scrollRight: "탭을 오른쪽으로 스크롤",
     openTabs: "열린 탭",
     searchOpenTabs: "열린 탭 검색...",
+    collapseTabBar: "탭 표시줄 접기",
+    expandTabBar: "탭 표시줄 펼치기",
     switcherTitle: "탭 전환",
     switcherHint: "계속 눌러 이동하고 놓으면 전환",
     noMatchingTabs: "일치하는 탭이 없습니다",
     fixedTabs: "고정 탭",
     openDataTabs: "열린 테이블",
+    editGroupTitle: "그룹 편집: {name}",
+    groupName: "그룹 이름",
+    groupColor: "그룹 색상",
+    groupColorAuto: "기본 색상 사용",
+    groupColorCustom: "사용자 지정 색상 선택",
+    resetGroup: "초기화",
+    settingsSaveFailed: "탭 설정을 저장하지 못했습니다: {message}",
   },
   databaseBrowser: {
     search: "데이터베이스 검색...",
@@ -2844,6 +2853,9 @@ export default withEnglishFallback({
     compactTabTitle: "탭 제목 줄이기",
     fullTabTitle: "전체 탭 제목 표시",
     closeTab: "탭 닫기",
+    editTabGroup: "탭 그룹 편집",
+    resetTabGroup: "탭 그룹 초기화",
+    closeTabGroup: "이 그룹의 탭 닫기",
     closeFixedTab: "고정 탭 닫기",
     closeLeftTabs: "왼쪽 탭 닫기",
     closeRightTabs: "오른쪽 탭 닫기",
diff --git a/apps/desktop/src/i18n/locales/pt-BR.ts b/apps/desktop/src/i18n/locales/pt-BR.ts
index ee1a19e261..92a9914f4a 100644
--- a/apps/desktop/src/i18n/locales/pt-BR.ts
+++ b/apps/desktop/src/i18n/locales/pt-BR.ts
@@ -1463,11 +1463,20 @@ export default withEnglishFallback({
     scrollRight: "Rolar abas para a direita",
     openTabs: "Abas abertas",
     searchOpenTabs: "Pesquisar abas abertas...",
+    collapseTabBar: "Recolher barra de abas",
+    expandTabBar: "Expandir barra de abas",
     switcherTitle: "Alternar aba",
     switcherHint: "continue pressionando para mover, solte para alternar",
     noMatchingTabs: "Nenhuma aba correspondente",
     fixedTabs: "Abas fixadas",
     openDataTabs: "Tabelas abertas",
+    editGroupTitle: "Editar grupo: {name}",
+    groupName: "Nome do grupo",
+    groupColor: "Cor do grupo",
+    groupColorAuto: "Usar cor padrão",
+    groupColorCustom: "Escolher cor personalizada",
+    resetGroup: "Redefinir",
+    settingsSaveFailed: "Falha ao salvar configurações de abas: {message}",
     gridfs: "GridFS",
     etcdDashboard: "painel etcd",
     etcdAccessControl: "controle de acesso do etcd",
@@ -2952,6 +2961,9 @@ export default withEnglishFallback({
     compactTabTitle: "Encurtar Títulos das Abas",
     fullTabTitle: "Mostrar títulos completos das abas",
     closeTab: "Fechar Aba",
+    editTabGroup: "Editar grupo de abas",
+    resetTabGroup: "Redefinir grupo de abas",
+    closeTabGroup: "Fechar Grupo de Abas",
     closeFixedTab: "Fechar Aba Fixa",
     closeOtherTabs: "Fechar Outras Abas",
     closeOtherRegularTabs: "Fechar Outras Abas Normais",
diff --git a/apps/desktop/src/i18n/locales/zh-CN.ts b/apps/desktop/src/i18n/locales/zh-CN.ts
index 3ad82bad17..9ae5f02a7d 100644
--- a/apps/desktop/src/i18n/locales/zh-CN.ts
+++ b/apps/desktop/src/i18n/locales/zh-CN.ts
@@ -1419,12 +1419,21 @@ export default withEnglishFallback({
     minimizeWindow: "最小化",
     maximizeWindow: "最大化",
     closeWindow: "关闭",
-    searchOpenTabs: "搜索已打开的标签页...",
+    searchOpenTabs: "搜索...",
+    collapseTabBar: "收起标签栏",
+    expandTabBar: "展开标签栏",
     switcherTitle: "切换标签页",
     switcherHint: "继续按选择，松开修饰键切换",
     noMatchingTabs: "未找到匹配的标签页",
     fixedTabs: "固定标签页",
     openDataTabs: "已打开的数据表",
+    editGroupTitle: "编辑分组：{name}",
+    groupName: "分组名称",
+    groupColor: "分组颜色",
+    groupColorAuto: "使用默认颜色",
+    groupColorCustom: "选择自定义颜色",
+    resetGroup: "恢复默认",
+    settingsSaveFailed: "无法保存标签设置：{message}",
   },
   databaseBrowser: {
     search: "搜索数据库...",
@@ -2958,6 +2967,9 @@ export default withEnglishFallback({
     compactTabTitle: "缩短标签标题",
     fullTabTitle: "完整标签标题",
     closeTab: "关闭标签页",
+    editTabGroup: "编辑标签分组",
+    resetTabGroup: "恢复默认分组",
+    closeTabGroup: "关闭本组标签页",
     closeFixedTab: "关闭固定标签页",
     closeLeftTabs: "关闭左侧标签页",
     closeRightTabs: "关闭右侧标签页",
diff --git a/apps/desktop/src/i18n/locales/zh-TW.ts b/apps/desktop/src/i18n/locales/zh-TW.ts
index a0f1ee7b50..3a7ae4b8bb 100644
--- a/apps/desktop/src/i18n/locales/zh-TW.ts
+++ b/apps/desktop/src/i18n/locales/zh-TW.ts
@@ -1462,11 +1462,20 @@ export default withEnglishFallback({
     scrollRight: "向右捲動分頁",
     openTabs: "已開啟的分頁",
     searchOpenTabs: "搜尋已開啟的分頁...",
+    collapseTabBar: "收合分頁列",
+    expandTabBar: "展開分頁列",
     switcherTitle: "切換分頁",
     switcherHint: "繼續按選擇，放開修飾鍵切換",
     noMatchingTabs: "找不到符合的分頁",
     fixedTabs: "固定分頁",
     openDataTabs: "已開啟的資料表",
+    editGroupTitle: "編輯群組：{name}",
+    groupName: "群組名稱",
+    groupColor: "群組顏色",
+    groupColorAuto: "使用預設顏色",
+    groupColorCustom: "選擇自訂顏色",
+    resetGroup: "重設",
+    settingsSaveFailed: "無法儲存分頁設定：{message}",
     gridfs: "GridFS",
     etcdDashboard: "etcd 儀表板",
     etcdAccessControl: "etcd 存取控制",
@@ -2949,6 +2958,9 @@ export default withEnglishFallback({
     compactTabTitle: "縮短標籤標題",
     fullTabTitle: "完整分頁標題",
     closeTab: "關閉分頁",
+    editTabGroup: "編輯分頁群組",
+    resetTabGroup: "重設分頁群組",
+    closeTabGroup: "關閉本群組分頁",
     closeFixedTab: "關閉固定分頁",
     closeOtherTabs: "關閉其他分頁",
     closeOtherRegularTabs: "關閉其他普通分頁",
diff --git a/apps/desktop/src/stores/__tests__/settingsStore.spec.ts b/apps/desktop/src/stores/__tests__/settingsStore.spec.ts
index 9239ac3708..936a3f259d 100644
--- a/apps/desktop/src/stores/__tests__/settingsStore.spec.ts
+++ b/apps/desktop/src/stores/__tests__/settingsStore.spec.ts
@@ -38,6 +38,21 @@ describe("normalizeEditorSettings", () => {
     expect(normalizeEditorSettings({ dataGridFilterEditorView: "invalid" } as any).dataGridFilterEditorView).toBe("quick");
   });
 
+  it("normalizes persisted tab group names and colors", () => {
+    expect(normalizeEditorSettings({}).tabGroupCustomizations).toEqual({});
+    expect(
+      normalizeEditorSettings({
+        tabGroupCustomizations: {
+          "connection:local": { name: " Local services ", color: "#E11D48" },
+          "database-type:mysql": { name: "", color: "invalid" },
+          broken: "value",
+        },
+      } as any).tabGroupCustomizations,
+    ).toEqual({
+      "connection:local": { name: "Local services", color: "#e11d48" },
+    });
+  });
+
   it("defaults and bounds the persisted text filter panel height", () => {
     expect(normalizeEditorSettings({}).dataGridTextFilterPanelHeight).toBe(168);
     expect(normalizeEditorSettings({ dataGridTextFilterPanelHeight: 236.4 }).dataGridTextFilterPanelHeight).toBe(236);
@@ -894,6 +909,40 @@ describe("settingsStore persisted settings initialization", () => {
     expect(saveEditorSettings).toHaveBeenLastCalledWith(expect.objectContaining({ openDataTabsNextToActive: false }));
   });
 
+  it("persists tab placement, grouping, sorting, and group customizations across restart", async () => {
+    let persistedSettings: Record<string, unknown> = {};
+    const loadEditorSettings = vi.fn(async () => JSON.parse(JSON.stringify(persistedSettings)));
+    const saveEditorSettings = vi.fn(async (settings: Record<string, unknown>) => {
+      persistedSettings = JSON.parse(JSON.stringify(settings));
+    });
+    vi.doMock("@/lib/backend/api", () => ({ loadEditorSettings, saveEditorSettings }));
+
+    const { useSettingsStore } = await import("@/stores/settingsStore");
+    const firstStore = useSettingsStore();
+    await firstStore.initEditorSettings();
+    await firstStore.updateEditorSettingsAndPersist({
+      tabPlacement: "left",
+      tabGroupMode: "connection",
+      tabSortMode: "title-asc",
+      tabGroupCustomizations: {
+        "connection:local": { name: "Local services", color: "#2563eb" },
+      },
+    });
+
+    setActivePinia(createPinia());
+    const restartedStore = useSettingsStore();
+    await restartedStore.initEditorSettings();
+
+    expect(restartedStore.editorSettings).toMatchObject({
+      tabPlacement: "left",
+      tabGroupMode: "connection",
+      tabSortMode: "title-asc",
+      tabGroupCustomizations: {
+        "connection:local": { name: "Local services", color: "#2563eb" },
+      },
+    });
+  });
+
   it("loads, persists, and reloads the cell detail button visibility", async () => {
     let persistedSettings: Record<string, unknown> = { dataGridCellDetailButtonVisible: false };
     const loadEditorSettings = vi.fn(async () => JSON.parse(JSON.stringify(persistedSettings)));
diff --git a/apps/desktop/src/stores/settingsStore.ts b/apps/desktop/src/stores/settingsStore.ts
index ff7da26cc2..5ce4284d64 100644
--- a/apps/desktop/src/stores/settingsStore.ts
+++ b/apps/desktop/src/stores/settingsStore.ts
@@ -576,6 +576,10 @@ const TAB_PLACEMENTS = ["top", "bottom", "left", "right"] as const;
 export type TabPlacement = (typeof TAB_PLACEMENTS)[number];
 const TAB_GROUP_MODES = ["none", "database-type", "connection"] as const;
 export type TabGroupMode = (typeof TAB_GROUP_MODES)[number];
+export interface TabGroupCustomization {
+  name?: string;
+  color?: string;
+}
 const TAB_SORT_MODES = ["manual", "created-asc", "title-asc"] as const;
 export type TabSortMode = (typeof TAB_SORT_MODES)[number];
 const DATA_GRID_RENDER_MODES = ["dom", "canvas"] as const;
@@ -711,6 +715,7 @@ export interface EditorSettings {
   tabLayout: TabLayoutMode;
   tabPlacement: TabPlacement;
   tabGroupMode: TabGroupMode;
+  tabGroupCustomizations: Record<string, TabGroupCustomization>;
   tabSortMode: TabSortMode;
   appLayout: "separated" | "classic";
   pageSize: number;
@@ -938,6 +943,7 @@ export const DEFAULT_EDITOR_SETTINGS: EditorSettings = {
   tabLayout: "scroll",
   tabPlacement: "top",
   tabGroupMode: "none",
+  tabGroupCustomizations: {},
   tabSortMode: "manual",
   appLayout: "classic",
   pageSize: 100,
@@ -1090,6 +1096,20 @@ function normalizeTabGroupMode(value: unknown): TabGroupMode {
   return TAB_GROUP_MODES.includes(value as TabGroupMode) ? (value as TabGroupMode) : DEFAULT_EDITOR_SETTINGS.tabGroupMode;
 }
 
+export function normalizeTabGroupCustomizations(value: unknown): Record<string, TabGroupCustomization> {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return {};
+  const customizations: Record<string, TabGroupCustomization> = {};
+  for (const [rawKey, rawCustomization] of Object.entries(value as Record<string, unknown>).slice(0, 200)) {
+    const key = rawKey.trim().slice(0, 512);
+    if (!key || !rawCustomization || typeof rawCustomization !== "object" || Array.isArray(rawCustomization)) continue;
+    const customization = rawCustomization as Record<string, unknown>;
+    const name = typeof customization.name === "string" ? customization.name.trim().slice(0, 80) : "";
+    const color = typeof customization.color === "string" && /^#[0-9a-f]{6}$/i.test(customization.color.trim()) ? customization.color.trim().toLowerCase() : "";
+    if (name || color) customizations[key] = { ...(name ? { name } : {}), ...(color ? { color } : {}) };
+  }
+  return customizations;
+}
+
 function normalizeTabSortMode(value: unknown): TabSortMode {
   return TAB_SORT_MODES.includes(value as TabSortMode) ? (value as TabSortMode) : DEFAULT_EDITOR_SETTINGS.tabSortMode;
 }
@@ -1366,6 +1386,7 @@ export function normalizeEditorSettings(settings: Partial<EditorSettings>, exist
     tabLayout: normalizeTabLayout(settings.tabLayout),
     tabPlacement: normalizeTabPlacement(settings.tabPlacement),
     tabGroupMode: normalizeTabGroupMode(settings.tabGroupMode),
+    tabGroupCustomizations: normalizeTabGroupCustomizations(settings.tabGroupCustomizations),
     tabSortMode: normalizeTabSortMode(settings.tabSortMode),
     appLayout: settings.appLayout ?? DEFAULT_EDITOR_SETTINGS.appLayout,
     pageSize: normalizeResultPageSize(settings.pageSize),
@@ -2069,6 +2090,7 @@ export const useSettingsStore = defineStore("settings", () => {
     if (partial.tabLayout !== undefined) editorSettings.value.tabLayout = normalizeTabLayout(partial.tabLayout);
     if (partial.tabPlacement !== undefined) editorSettings.value.tabPlacement = normalizeTabPlacement(partial.tabPlacement);
     if (partial.tabGroupMode !== undefined) editorSettings.value.tabGroupMode = normalizeTabGroupMode(partial.tabGroupMode);
+    if (partial.tabGroupCustomizations !== undefined) editorSettings.value.tabGroupCustomizations = normalizeTabGroupCustomizations(partial.tabGroupCustomizations);
     if (partial.tabSortMode !== undefined) editorSettings.value.tabSortMode = normalizeTabSortMode(partial.tabSortMode);
     if (partial.appLayout !== undefined) editorSettings.value.appLayout = partial.appLayout;
     if (partial.pageSize !== undefined) editorSettings.value.pageSize = normalizeResultPageSize(partial.pageSize);