feat: Enhance tab UX with drag & drop, middle-click close, context menu, and session management, and resolve tab flicker.

docs/development/devlog/2025-12-06-011000_tab_ux_improvements.md

@@ -0,0 +1,41 @@
+# Tab UX Improvements
+
+## Overview
+Improve the user experience of the tab bar above the viewport. The goal is to make it more flexible and user-friendly.
+
+## Features
+1.  **Middle-click to close**: Allow closing tabs by clicking with the middle mouse button.
+2.  **Drag and Drop**: Allow reordering tabs freely.
+3.  **Tab Groups (Sessions)**: Allow saving the current set of open tabs as a named group/session and restoring it later.
+4.  **Context Menu**: Add a right-click context menu to tabs with options like:
+    -   Close
+    -   Close Others
+    -   Close to Right
+    -   Pin Tab (optional, if time permits)
+
+## Implementation Plan
+
+### 1. Dependencies
+-   Install `@dnd-kit/core`, `@dnd-kit/sortable`, `@dnd-kit/utilities`.
+
+### 2. Context Update (`TabContext.tsx`)
+-   Add `reorderTabs(newOrder: Tab[])` function.
+-   Add state for `tabGroups` (saved in `localStorage`).
+-   Add `saveTabGroup(name: string)` function.
+-   Add `loadTabGroup(name: string)` function.
+-   Add `deleteTabGroup(name: string)` function.
+-   Add `closeOtherTabs(path: string)` function.
+-   Add `closeTabsToRight(path: string)` function.
+
+### 3. Component Update (`TabsBar.tsx`)
+-   Wrap tabs in `DndContext` and `SortableContext`.
+-   Create a `SortableTab` component.
+-   Implement `onAuxClick` for middle-click closing.
+-   Add a "Tab Groups" button/menu to the right of the tabs.
+    -   Show saved groups.
+    -   Option to save current session.
+-   Implement a custom Context Menu for tabs.
+
+## Technical Details
+-   **Storage**: Use `localStorage` for now. Keys: `zentral_tabs`, `zentral_active_tab`, `zentral_tab_groups`.
+-   **Styling**: Use MUI components and system.

docs/development/devlog/2025-12-06-011500_tab_flicker_fix.md

@@ -0,0 +1,16 @@
+# Tab Flicker Fix
+
+## Issue
+The user reports a flicker when clicking a tab before it becomes active.
+
+## Diagnosis
+The current implementation of the active tab style uses `borderBottom: isActive ? 2 : 0`. This causes a layout shift (height change or content displacement) of 2px whenever the active state changes. This visual jump is perceived as a flicker.
+
+## Solution
+Update the styling to maintain a constant border width but change the color.
+-   Change `borderBottom` to always be `2`.
+-   Change `borderColor` to be `'primary.main'` when active and `'transparent'` when inactive.
+
+## Plan
+1.  Modify `src/frontend/src/components/TabsBar.tsx`.
+2.  Update `SortableTab` styles.