tabby-tmux 1.0.1 → 1.1.0

package/dist/index.js

@@ -77,35 +77,42 @@ var ___CSS_LOADER_EXPORT___ = _node_modules_pnpm_css_loader_7_1_2_webpack_5_104_
 // Module
 ___CSS_LOADER_EXPORT___.push([module.id, `@charset "UTF-8";
 /*
- * TmuxPaneTab — full CSS control over the terminal content area.
+ * TmuxPaneTab — pure container for the xterm content area.
  *
- * BaseTerminalTabComponent applies a "spaciness" margin that shrinks the
- * content box, which clips edge characters and makes size calculations
- * harder.  tmux owns the cell grid, so we zero out every spacing property
- * so the pane occupies 100 % of its allocated container — pixel-accurate
- * and no rounding surprises.
+ * tmux owns the cell grid; the pane container is sized exactly to
+ * cols × cell pixels via pixel-absolute positioning.  No padding,
+ * no border, no margin — the xterm canvas fills 100 % of the box.
  *
- * Uniform 4px padding on all sides gives consistent visual breathing room.
- * The scrollbar is hidden to remove the asymmetric right-side gap and
- * simplify size math; scrolling is handled by Tabby's local history buffer.
- * Padding is subtracted in measureClientSize() so tmux grid calculations
- * remain accurate.
+ * The scrollbar uses overlay mode so it floats above the content
+ * without consuming layout space, keeping the container width
+ * exactly cols × cellWidth.
  */
 :host > .content {
   margin: 0;
-  padding: 4px;
+  padding: 0;
   border: 0;
   box-sizing: border-box;
 }
 
-/* Hide xterm scrollbar — tmux handles scrolling via Control Mode protocol */
+/* xterm fills the pane completely; no overflow clipping needed */
 :host ::ng-deep .xterm {
   overflow: hidden !important;
 }
 
+/* Overlay scrollbar — floats above content, no layout space consumed */
 :host ::ng-deep .xterm-viewport {
-  overflow-y: hidden !important;
-}`, "",{"version":3,"sources":["webpack://./src/components/tmuxPaneTab.component.scss"],"names":[],"mappings":"AAAA,gBAAgB;AAAhB;;;;;;;;;;;;;;EAAA;AAeA;EACI,SAAA;EACA,YAAA;EACA,SAAA;EACA,sBAAA;AAEJ;;AACA,4EAAA;AACA;EACI,2BAAA;AAEJ;;AAAA;EACI,6BAAA;AAGJ","sourcesContent":["/*\n * TmuxPaneTab — full CSS control over the terminal content area.\n *\n * BaseTerminalTabComponent applies a \"spaciness\" margin that shrinks the\n * content box, which clips edge characters and makes size calculations\n * harder.  tmux owns the cell grid, so we zero out every spacing property\n * so the pane occupies 100 % of its allocated container — pixel-accurate\n * and no rounding surprises.\n *\n * Uniform 4px padding on all sides gives consistent visual breathing room.\n * The scrollbar is hidden to remove the asymmetric right-side gap and\n * simplify size math; scrolling is handled by Tabby's local history buffer.\n * Padding is subtracted in measureClientSize() so tmux grid calculations\n * remain accurate.\n */\n:host > .content {\n    margin: 0;\n    padding: 4px;\n    border: 0;\n    box-sizing: border-box;\n}\n\n/* Hide xterm scrollbar — tmux handles scrolling via Control Mode protocol */\n:host ::ng-deep .xterm {\n    overflow: hidden !important;\n}\n:host ::ng-deep .xterm-viewport {\n    overflow-y: hidden !important;\n}\n"],"sourceRoot":""}]);
+  overflow-y: overlay !important;
+  scrollbar-width: thin;
+}
+
+:host ::ng-deep .xterm-viewport::-webkit-scrollbar {
+  width: 6px;
+}
+
+:host ::ng-deep .xterm-viewport::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 3px;
+}`, "",{"version":3,"sources":["webpack://./src/components/tmuxPaneTab.component.scss"],"names":[],"mappings":"AAAA,gBAAgB;AAAhB;;;;;;;;;;EAAA;AAWA;EACI,SAAA;EACA,UAAA;EACA,SAAA;EACA,sBAAA;AAEJ;;AACA,iEAAA;AACA;EACI,2BAAA;AAEJ;;AAAA,uEAAA;AACA;EACI,8BAAA;EACA,qBAAA;AAGJ;;AADA;EACI,UAAA;AAIJ;;AAFA;EACI,oCAAA;EACA,kBAAA;AAKJ","sourcesContent":["/*\n * TmuxPaneTab — pure container for the xterm content area.\n *\n * tmux owns the cell grid; the pane container is sized exactly to\n * cols × cell pixels via pixel-absolute positioning.  No padding,\n * no border, no margin — the xterm canvas fills 100 % of the box.\n *\n * The scrollbar uses overlay mode so it floats above the content\n * without consuming layout space, keeping the container width\n * exactly cols × cellWidth.\n */\n:host > .content {\n    margin: 0;\n    padding: 0;\n    border: 0;\n    box-sizing: border-box;\n}\n\n/* xterm fills the pane completely; no overflow clipping needed */\n:host ::ng-deep .xterm {\n    overflow: hidden !important;\n}\n/* Overlay scrollbar — floats above content, no layout space consumed */\n:host ::ng-deep .xterm-viewport {\n    overflow-y: overlay !important;\n    scrollbar-width: thin;\n}\n:host ::ng-deep .xterm-viewport::-webkit-scrollbar {\n    width: 6px;\n}\n:host ::ng-deep .xterm-viewport::-webkit-scrollbar-thumb {\n    background: rgba(255,255,255,0.2);\n    border-radius: 3px;\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -439,7 +446,7 @@ let TmuxPaneTabComponent = class TmuxPaneTabComponent extends tabby_terminal_1.B
         // xterm's automatic fit-to-container so the pane never overrides the
         // tmux-dictated grid with its own (pixel-rounded) size — that mismatch
         // is what causes off-by-one wrapping / cursor errors. The grid is set
-        // explicitly via setTmuxGrid() from the layout sync instead.
+        // explicitly via setTmuxGrid() from applyPixelLayout() instead.
         this.frontendReady$.pipe((0, rxjs_1.first)()).subscribe(() => {
             this._frontendReady = true;
             const frontend = this.frontend;
@@ -454,8 +461,16 @@ let TmuxPaneTabComponent = class TmuxPaneTabComponent extends tabby_terminal_1.B
                 }
             }
             // Apply any grid size that arrived before the frontend was ready.
+            //
+            // IMPORTANT: Defer with setTimeout(0) to avoid re-entrant xterm.resize().
+            // frontendReady$ fires inside the onResize callback of fitAddon.fit()'s
+            // xterm.resize(N, M). Calling xterm.resize(tmuxCols, tmuxRows) from
+            // within that callback is re-entrant — the outer resize continues its
+            // internal bookkeeping after onResize returns and overwrites our changes.
+            // Deferring ensures applyTmuxGrid() runs after fitAddon.fit() and the
+            // outer resize have fully completed.
             if (this._tmuxCols > 0 && this._tmuxRows > 0) {
-                this.applyTmuxGrid();
+                setTimeout(() => this.applyTmuxGrid(), 0);
             }
         });
     }
@@ -578,6 +593,12 @@ let TmuxPaneTabComponent = class TmuxPaneTabComponent extends tabby_terminal_1.B
                     { label: this.translate.instant('Up'), click: () => this.splitPane('up') },
                 ],
             },
+            {
+                label: this.translate.instant('Zoom pane'),
+                type: 'checkbox',
+                checked: this._isZoomed,
+                click: () => this.toggleZoom(),
+            },
             {
                 label: this.translate.instant('Focus all tmux panes'),
                 type: 'checkbox',
@@ -597,6 +618,24 @@ let TmuxPaneTabComponent = class TmuxPaneTabComponent extends tabby_terminal_1.B
         event.stopPropagation();
         this.platform.popupContextMenu(await this.buildContextMenu(), event);
     }
+    /** Whether this pane is currently zoomed (fills the entire window). */
+    get _isZoomed() {
+        if (!this.controller || !this.paneId)
+            return false;
+        // Find which window owns this pane
+        for (const ws of this.controller.getAllWindowStates()) {
+            if (ws.panes.has(this.paneId)) {
+                return ws.zoomedPaneId === this.paneId;
+            }
+        }
+        return false;
+    }
+    /** Toggle zoom via tmux resize-pane -Z (same as prefix+z). */
+    async toggleZoom() {
+        if (!this.controller)
+            return;
+        await this.controller.zoomPane(this.paneId);
+    }
     async splitPane(direction) {
         if (!this.controller)
             return;
@@ -707,7 +746,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
-var TmuxSessionTabComponent_1;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.TmuxSessionTabComponent = void 0;
 const core_1 = __webpack_require__(/*! @angular/core */ "@angular/core");
@@ -715,6 +753,7 @@ const tabby_core_1 = __webpack_require__(/*! tabby-core */ "tabby-core");
 const tabby_core_2 = __webpack_require__(/*! tabby-core */ "tabby-core");
 const session_1 = __webpack_require__(/*! ../session */ "./src/session.ts");
 const tmux_service_1 = __webpack_require__(/*! ../services/tmux.service */ "./src/services/tmux.service.ts");
+const gateway_1 = __webpack_require__(/*! ../gateway */ "./src/gateway.ts");
 const tmuxPaneTab_component_1 = __webpack_require__(/*! ./tmuxPaneTab.component */ "./src/components/tmuxPaneTab.component.ts");
 const layoutParser_1 = __webpack_require__(/*! ../layoutParser */ "./src/layoutParser.ts");
 /**
@@ -724,9 +763,14 @@ const layoutParser_1 = __webpack_require__(/*! ../layoutParser */ "./src/layoutP
  * removeTab()/addTab() when switching windows. The bottom window bar provides
  * window switching UI.
  *
+ * Layout is pixel-absolute: pane positions are computed from tmux's character
+ * coordinates × cell pixel size, NOT from SplitTab's ratio-based percentage
+ * layout. The SplitContainer tree is only used by addTab()/removeTab() for
+ * ViewContainerRef management.
+ *
  * Always created by TmuxService.attachToTerminal() with existingController set.
  */
-let TmuxSessionTabComponent = TmuxSessionTabComponent_1 = class TmuxSessionTabComponent extends tabby_core_1.SplitTabComponent {
+let TmuxSessionTabComponent = class TmuxSessionTabComponent extends tabby_core_1.SplitTabComponent {
     constructor(injector, tmuxService, configService, tabsService, cdr, hostElement, log) {
         super(injector.get(tabby_core_1.HotkeysService), tabsService, injector.get(tabby_core_2.TabRecoveryService), injector);
         this.tmuxService = tmuxService;
@@ -750,12 +794,8 @@ let TmuxSessionTabComponent = TmuxSessionTabComponent_1 = class TmuxSessionTabCo
         /** Last dimensions sent to tmux, for dedup */
         this._lastSentCols = 0;
         this._lastSentRows = 0;
-        /** Custom tmux pane dividers — kept for interface compatibility but not rendered */
-        this._tmuxDividers = [];
-        /** mousedown handler attached to .pane-area for border drag detection */
-        this._paneAreaMouseDownHandler = null;
-        /** mousemove handler for border hover highlight */
-        this._paneAreaMouseMoveHandler = null;
+        /** Active divider DOM elements for the current window layout */
+        this._dividerElements = [];
         this._tabsService = tabsService;
         this.logger = log.create('tmux-session');
     }
@@ -792,13 +832,19 @@ let TmuxSessionTabComponent = TmuxSessionTabComponent_1 = class TmuxSessionTabCo
         // has finished inserting us into its ViewContainerRef
         requestAnimationFrame(async () => {
             this._initialized = true;
+            // ── Step A: Disable tmux pane borders + push client size FIRST ──
+            // tmux draws box-drawing characters in pane borders by default.
+            // We draw our own CSS dividers instead, so disable tmux's borders
+            // to avoid double-rendering (the border chars would show through
+            // our transparent divider elements).
+            // Then push client size so tmux relays out without border space.
+            this.controller.gateway.sendCommand('set-option -gw pane-border-lines off', gateway_1.TMUX_COMMAND_TOLERATE_ERRORS).catch(() => { });
+            this.refreshClientSize();
+            await this.eventQueue;
+            // ── Step B: Pane discovery (now based on correct size) ──
             await this.controller.refreshPanes();
             this.bootstrapFromControllerState();
-            // Wait for all queued events (window-add, pane-add) from refreshPanes
-            // to be processed before switching to the first window.
             await this.eventQueue;
-            // Prefer the tmux-side active window (from list-windows #{window_active}
-            // or %session-window-changed). Fall back to the first window in the map.
             const activeWindowId = this.controller.getActiveWindowId();
             const targetWindowId = (activeWindowId !== null && this.windowPaneTabs.has(activeWindowId))
                 ? activeWindowId
@@ -806,26 +852,15 @@ let TmuxSessionTabComponent = TmuxSessionTabComponent_1 = class TmuxSessionTabCo
             if (targetWindowId !== undefined) {
                 await this.switchToWindow(targetWindowId);
             }
-            // Listen for window resize events (like iTerm2's windowDidResize).
-            // Only fires when the browser window changes size, not during
-            // internal SplitTab layout operations. Debounced to avoid flooding.
+            // ── Step C: ResizeObserver + window resize ──
             this._resizeHandler = () => this.scheduleRefreshClientSize();
             window.addEventListener('resize', this._resizeHandler);
-            // Observe the .pane-area container directly. This is the single
-            // source of truth for the client size: any time the container's
-            // pixel size changes (window resize, spanner drag, sidebar toggle,
-            // first mount), we recompute and push the whole-window grid to tmux.
-            // Per-pane xterm fit is disabled, so this never feeds back.
             const host = this.hostElement.nativeElement;
             const paneArea = host.querySelector('.pane-area');
             if (paneArea && typeof ResizeObserver !== 'undefined') {
                 this._paneAreaObserver = new ResizeObserver(() => this.scheduleRefreshClientSize());
                 this._paneAreaObserver.observe(paneArea);
             }
-            // Attach border hover + drag handlers to the pane-area
-            this.attachPaneAreaBorderHandlers();
-            // Initial size sync after pane mount
-            this.scheduleRefreshClientSize();
         });
     }
     bootstrapFromControllerState() {
@@ -926,6 +961,11 @@ let TmuxSessionTabComponent = TmuxSessionTabComponent_1 = class TmuxSessionTabCo
                     this.handlePaneClose(event.paneId, event.windowId);
                 }
                 break;
+            case 'active-pane-changed':
+                if (event.paneId !== undefined && event.windowId !== undefined) {
+                    this.handleActivePaneChanged(event.paneId, event.windowId);
+                }
+                break;
             case 'layout-change':
                 // NOTE: We always call syncLayout for the active window.
                 // For non-active windows, we save the layout but don't rebuild
@@ -933,7 +973,7 @@ let TmuxSessionTabComponent = TmuxSessionTabComponent_1 = class TmuxSessionTabCo
                 if (event.windowId !== undefined && ((_b = event.data) === null || _b === void 0 ? void 0 : _b.layout)) {
                     if (event.windowId === this.activeWindowId) {
                         this.logger.info(`Syncing layout for active window @${event.windowId}`);
-                        await this.syncLayout(event.data.layout);
+                        await this.syncLayout(event.data.layout, event.data.zoomed, event.data.visibleLayout);
                     }
                     else {
                         this.logger.info(`Layout changed for inactive window @${event.windowId}, saved for next switch`);
@@ -951,15 +991,13 @@ let TmuxSessionTabComponent = TmuxSessionTabComponent_1 = class TmuxSessionTabCo
      * Hides current window's panes and shows target window's panes.
      */
     async switchToWindow(windowId) {
-        var _a, _b;
+        var _a, _b, _c;
         if (windowId === this.activeWindowId)
             return;
         this.logger.info(`Switching to window @${windowId}`);
         // Clear dividers while switching windows
-        this._tmuxDividers = [];
-        // 1. Detach current active window's pane views (don't use removeTab —
-        //    SplitTabComponent.removeTab destroys the tab when root.children
-        //    becomes empty). Instead, clear the root directly.
+        this.clearDividers();
+        // 1. Detach current active window's pane views
         if (this.activeWindowId !== null) {
             const paneMap = this.windowPaneTabs.get(this.activeWindowId);
             if (paneMap) {
@@ -978,20 +1016,9 @@ let TmuxSessionTabComponent = TmuxSessionTabComponent_1 = class TmuxSessionTabCo
         }
         const paneMap = this.windowPaneTabs.get(windowId);
         if (paneMap.size === 0) {
-            // First time visiting this window. Pane tabs will be created by
-            // handlePaneAdd (triggered by discoverPanesFromLayout on
-            // %layout-change). We don't call addPanesForWindow — panes are
-            // discovered asynchronously (iTerm2-style).
-            //
-            // HOWEVER: if the controller already knows the layout for this
-            // window (from batch discovery during attach), we can proactively
-            // discover panes from it instead of waiting for a layout-change
-            // event that may never come (tmux doesn't re-send layout-change
-            // for windows that haven't changed).
             const windowState = (_a = this.controller) === null || _a === void 0 ? void 0 : _a.getWindowState(windowId);
             if (windowState === null || windowState === void 0 ? void 0 : windowState.layout) {
                 this.logger.info(`No pane tabs yet for window @${windowId}, but layout is known — discovering panes proactively`);
-                // Extract pane IDs from the known layout and create pane tabs
                 const { parseTmuxLayout, flattenLayout } = await Promise.resolve().then(() => __importStar(__webpack_require__(/*! ../layoutParser */ "./src/layoutParser.ts")));
                 const layoutTree = parseTmuxLayout(windowState.layout);
                 if (layoutTree) {
@@ -1013,45 +1040,81 @@ let TmuxSessionTabComponent = TmuxSessionTabComponent_1 = class TmuxSessionTabCo
         else {
             this.logger.info(`Mounting existing ${paneMap.size} pane(s) for window @${windowId}`);
         }
-        // 4. Rebuild SplitContainer tree with this window's panes
+        // 4. Determine zoom state and discover all pane tabs needed.
+        // layout = real multi-pane layout (always has all pane IDs)
+        // visibleLayout = zoomed display layout (single pane filling window)
+        const windowState = (_b = this.controller) === null || _b === void 0 ? void 0 : _b.getWindowState(windowId);
+        const isZoomed = !!(windowState === null || windowState === void 0 ? void 0 : windowState.zoomedPaneId);
+        // Ensure pane tabs for ALL panes exist (discovered from layout, which is always real)
+        if (windowState === null || windowState === void 0 ? void 0 : windowState.layout) {
+            const fullTree = (0, layoutParser_1.parseTmuxLayout)(windowState.layout);
+            if (fullTree) {
+                for (const pane of (0, layoutParser_1.flattenLayout)(fullTree)) {
+                    if (!paneMap.has(pane.paneId)) {
+                        this.logger.info(`Creating pane tab for %${pane.paneId}` + (isZoomed ? ' (zoomed window)' : ''));
+                        const paneTab = this.createPaneTab(pane.paneId);
+                        paneTab.controller = this.controller;
+                        paneTab.paneId = pane.paneId;
+                        paneMap.set(pane.paneId, paneTab);
+                    }
+                }
+            }
+        }
+        // 5. Attach views for display pane tabs only
+        // Reset root tree so addTab() registers panes into a clean structure.
         this.root = new tabby_core_1.SplitContainer();
         this.root.orientation = 'h';
+        // Display layout: visibleLayout when zoomed (what's on screen), layout otherwise
+        const displayLayoutStr = isZoomed && (windowState === null || windowState === void 0 ? void 0 : windowState.visibleLayout)
+            ? windowState.visibleLayout
+            : windowState === null || windowState === void 0 ? void 0 : windowState.layout;
+        const displayTree = displayLayoutStr ? (0, layoutParser_1.parseTmuxLayout)(displayLayoutStr) : null;
+        const displayPaneIds = displayTree
+            ? new Set((0, layoutParser_1.flattenLayout)(displayTree).map(p => p.paneId))
+            : new Set(paneMap.keys()); // no layout → show all
         const paneTabs = Array.from(paneMap.values());
         if (paneTabs.length > 0) {
-            this.logger.info(`Adding ${paneTabs.length} pane tab(s) to SplitTab`);
-            for (let i = 0; i < paneTabs.length; i++) {
-                const paneTab = paneTabs[i];
-                if (i === 0) {
-                    await this.addTab(paneTab, null, 'r');
+            for (const paneTab of paneTabs) {
+                const isDisplay = displayPaneIds.has(paneTab.paneId);
+                if (!((_c = this.viewRefs) === null || _c === void 0 ? void 0 : _c.has(paneTab))) {
+                    if (isDisplay) {
+                        await this.addTab(paneTab, null, 'r');
+                    }
+                }
+                if (isDisplay) {
+                    ;
+                    paneTab.emitVisibility(true);
+                    paneTab.emitFocused();
                 }
                 else {
-                    await this.addTab(paneTab, paneTabs[i - 1], 'r');
+                    ;
+                    paneTab.emitVisibility(false);
                 }
-                paneTab.emitVisibility(true);
             }
-            // 5. Sync layout from tmux
-            const windowState = (_b = this.controller) === null || _b === void 0 ? void 0 : _b.getWindowState(windowId);
-            if (windowState === null || windowState === void 0 ? void 0 : windowState.layout) {
-                this.logger.info('Syncing layout after mounting panes');
-                await this.syncLayout(windowState.layout);
+            // 6. Apply pixel layout from tmux
+            if (displayTree) {
+                this.applyPixelLayout(displayTree);
+                this.updateDividers(displayTree);
             }
         }
-        // 6. Detect changes; precise client size refresh happens via the
-        //    .pane-area ResizeObserver once xterm renders its cell grid.
+        // 7. Detect changes and push size
         this.cdr.detectChanges();
-        // 7. Push the correct client size to tmux once panes are mounted.
-        //    We use requestAnimationFrame to wait for xterm to render its
-        //    character grid (getCellSize needs real cell dimensions), then
-        //    force a non-deduplicated refresh-client -C.
         if (paneTabs.length > 0) {
             requestAnimationFrame(() => {
-                // Reset dedup so the next call always goes through
                 this._lastSentCols = 0;
                 this._lastSentRows = 0;
                 this.refreshClientSize();
             });
         }
     }
+    /**
+     * Override layout() to no-op. SplitTab's layoutInternal() uses percentage
+     * positioning which conflicts with our pixel-absolute layout. Pane
+     * positioning is handled exclusively by applyPixelLayout().
+     */
+    layout() {
+        // Intentionally empty — pixel-absolute layout replaces SplitTab layout.
+    }
     /**
      * Override focus to manage which pane is the active (hotkey-target) pane.
      *
@@ -1115,9 +1178,6 @@ let TmuxSessionTabComponent = TmuxSessionTabComponent_1 = class TmuxSessionTabCo
         // Do NOT destroy self when root is empty — this is normal during
         // tmux window switches.
     }
-    /**
-    }
-
     /**
      * Create a TmuxPaneTabComponent using TabsService (proper Angular DI).
      * This ensures the component has a hostView and ViewContainerRef.
@@ -1213,8 +1273,15 @@ let TmuxSessionTabComponent = TmuxSessionTabComponent_1 = class TmuxSessionTabCo
     }
     /**
      * Handle a tmux window being closed.
+     *
+     * tmux automatically activates an adjacent window (next by index, or
+     * previous if it was the last) and sends %session-window-changed.
+     * The controller updates activeWindowId from that event, so we check
+     * it to decide which window to switch to — matching tmux default
+     * behavior (and browser tab close behavior).
      */
     async handleWindowClose(windowId) {
+        var _a;
         const paneMap = this.windowPaneTabs.get(windowId);
         if (paneMap) {
             // Destroy all pane tabs for this window
@@ -1232,43 +1299,60 @@ let TmuxSessionTabComponent = TmuxSessionTabComponent_1 = class TmuxSessionTabCo
             this.activeWindowId = null;
             const remainingWindows = Array.from(this.windowPaneTabs.keys());
             if (remainingWindows.length > 0) {
-                await this.switchToWindow(remainingWindows[0]);
+                // tmux sends %session-window-changed which updates
+                // controller.activeWindowId — prefer that over arbitrary choice
+                const tmuxActiveId = (_a = this.controller) === null || _a === void 0 ? void 0 : _a.getActiveWindowId();
+                const target = (tmuxActiveId !== null && this.windowPaneTabs.has(tmuxActiveId))
+                    ? tmuxActiveId
+                    : remainingWindows[0];
+                await this.switchToWindow(target);
             }
             else {
-                // No windows left — reset
-                this.root = new tabby_core_1.SplitContainer();
-                this.root.orientation = 'h';
-                this.layout();
+                // No windows left — clear dividers
+                this.clearDividers();
                 this.cdr.detectChanges();
             }
         }
     }
     /**
-     * Synchronize SplitTab layout with tmux's layout string.
+     * Synchronize layout with tmux's layout string.
      *
-     * This is the SINGLE place where the SplitTab tree is built.
-     * It creates missing pane tabs, attaches their views, cleans up stale
-     * panes, and rebuilds the entire tree from the tmux layout string.
+     * Creates missing pane tabs, attaches their views, cleans up stale
+     * panes, and positions everything via pixel-absolute layout.
      */
-    async syncLayout(layoutStr) {
-        var _a;
-        const layoutTree = (0, layoutParser_1.parseTmuxLayout)(layoutStr);
-        if (!layoutTree) {
-            this.logger.warn('Failed to parse layout:', layoutStr);
+    async syncLayout(layoutStr, zoomed, visibleLayout) {
+        // tmux %layout-change semantics:
+        //   layout  = real multi-pane layout (all panes, their actual sizes)
+        //   visibleLayout = layout that tmux actually displays on screen
+        // When zoomed: visibleLayout is the single zoomed pane filling the window.
+        //
+        // For display, use visibleLayout when zoomed (what's on screen), layout otherwise.
+        // For pane discovery, always use layout (has all pane IDs).
+        var _a, _b;
+        // Display layout: what's actually shown on screen
+        const displayLayoutStr = zoomed && visibleLayout ? visibleLayout : layoutStr;
+        const displayTree = (0, layoutParser_1.parseTmuxLayout)(displayLayoutStr);
+        if (!displayTree) {
+            this.logger.warn('Failed to parse display layout:', displayLayoutStr);
             return;
         }
-        const panes = (0, layoutParser_1.flattenLayout)(layoutTree);
-        this.logger.info(`Syncing layout for window @${this.activeWindowId}: ${panes.length} panes`);
-        // Ensure pane tabs exist and have attached views for every pane in
-        // the layout. New panes (from split-window) are registered by
-        // handlePaneAdd but have no view yet — we call addTab to create one.
+        const displayPanes = (0, layoutParser_1.flattenLayout)(displayTree);
+        const displayPaneIds = new Set(displayPanes.map(p => p.paneId));
+        // Full pane list from layout (always the real multi-pane layout)
+        const fullTree = (0, layoutParser_1.parseTmuxLayout)(layoutStr);
+        const allPanes = fullTree ? (0, layoutParser_1.flattenLayout)(fullTree) : displayPanes;
+        this.logger.info(`Syncing layout for window @${this.activeWindowId}: ` +
+            `${displayPanes.length} display pane(s), ${allPanes.length} total` +
+            (zoomed ? ' (zoomed)' : ''));
+        // Ensure pane tabs exist and have attached views
         if (this.activeWindowId !== null) {
             let paneMap = this.windowPaneTabs.get(this.activeWindowId);
             if (!paneMap) {
                 paneMap = new Map();
                 this.windowPaneTabs.set(this.activeWindowId, paneMap);
             }
-            for (const pane of panes) {
+            // Create pane tabs for ALL panes (including hidden ones when zoomed)
+            for (const pane of allPanes) {
                 if (!paneMap.has(pane.paneId)) {
                     this.logger.info(`Creating pane tab for %${pane.paneId} during layout sync`);
                     const paneTab = this.createPaneTab(pane.paneId);
@@ -1277,35 +1361,39 @@ let TmuxSessionTabComponent = TmuxSessionTabComponent_1 = class TmuxSessionTabCo
                     paneMap.set(pane.paneId, paneTab);
                 }
             }
-            // Attach views for panes that don't have one yet.
-            // The tree structure will be rebuilt below, so the addTab direction
-            // doesn't matter — we just need the view to exist.
-            for (const pane of panes) {
+            // Ensure root exists for addTab to register ViewContainerRefs.
+            if (!(this.root instanceof tabby_core_1.SplitContainer)) {
+                this.root = new tabby_core_1.SplitContainer();
+                this.root.orientation = 'h';
+            }
+            // Attach views for panes that should be displayed
+            for (const pane of displayPanes) {
                 const paneTab = paneMap.get(pane.paneId);
                 if (!((_a = this.viewRefs) === null || _a === void 0 ? void 0 : _a.has(paneTab))) {
                     this.logger.info(`Attaching view for pane %${pane.paneId}`);
-                    const existingTabs = this.getAllTabs();
-                    if (existingTabs.length === 0) {
-                        await this.addTab(paneTab, null, 'r');
-                    }
-                    else {
-                        await this.addTab(paneTab, existingTabs[existingTabs.length - 1], 'r');
-                    }
+                    await this.addTab(paneTab, null, 'r');
+                }
+                ;
+                paneTab.emitVisibility(true);
+                paneTab.emitFocused();
+            }
+            // Hide panes not in the display set (e.g. non-zoomed panes)
+            for (const [paneId, paneTab] of paneMap) {
+                if (!displayPaneIds.has(paneId)) {
                     ;
-                    paneTab.emitVisibility(true);
-                    paneTab.emitFocused();
+                    paneTab.emitVisibility(false);
+                    if ((_b = this.viewRefs) === null || _b === void 0 ? void 0 : _b.has(paneTab)) {
+                        this.detachPaneView(paneTab);
+                    }
                 }
             }
-        }
-        // Detect and clean up stale pane tabs that are no longer in the layout.
-        // When tmux closes a pane, the %layout-change notification omits it.
-        // We remove the corresponding tab so the UI stays consistent.
-        if (this.activeWindowId !== null) {
-            const paneMap = this.windowPaneTabs.get(this.activeWindowId);
-            if (paneMap) {
-                const layoutPaneIds = new Set(panes.map(p => p.paneId));
+            // Clean up stale pane tabs no longer in the full layout.
+            // When zoomed, only clean up panes absent from visibleLayout;
+            // panes hidden by zoom are still alive in tmux.
+            if (!zoomed) {
+                const fullPaneIds = new Set(allPanes.map(p => p.paneId));
                 for (const [paneId, paneTab] of paneMap) {
-                    if (!layoutPaneIds.has(paneId)) {
+                    if (!fullPaneIds.has(paneId)) {
                         this.logger.info(`Pane %${paneId} no longer in layout, cleaning up`);
                         paneMap.delete(paneId);
                         paneTab.emitVisibility(false);
@@ -1315,30 +1403,25 @@ let TmuxSessionTabComponent = TmuxSessionTabComponent_1 = class TmuxSessionTabCo
                 }
             }
         }
-        // Build the SplitContainer tree from the parsed layout
-        const newRoot = this.buildSplitContainerFromLayout(layoutTree);
-        if (newRoot instanceof tabby_core_1.SplitContainer) {
-            this.root = newRoot;
-            this.layout();
-        }
-        else if (newRoot) {
-            // Single pane — wrap in a container
-            this.root = new tabby_core_1.SplitContainer();
-            this.root.orientation = 'h';
-            this.root.children.push(newRoot);
-            this.root.ratios.push(1);
-            this.layout();
-        }
+        // Position panes using pixel-absolute layout + set character grids
+        this.applyPixelLayout(displayTree);
+        // Update divider elements
+        this.updateDividers(displayTree);
         this.cdr.detectChanges();
-        // tmux is authoritative over each pane's character grid: push the exact
-        // cell dimensions from the layout string into each xterm. This keeps
-        // wrapping aligned with tmux and avoids any pixel-derived resize.
-        this.applyLayoutGrids(layoutTree);
     }
     /**
      * Handle a pane being closed (from %pane-close event or manual cleanup).
+     *
+     * Note: we do NOT activate a neighboring pane here. tmux sends
+     * %window-pane-changed after closing a pane, which triggers
+     * handleActivePaneChanged() to focus the correct pane.
+     *
+     * When zoomed, closing a hidden pane just removes it from the map.
+     * Closing the zoomed pane triggers tmux to auto-unzoom + kill,
+     * which sends %layout-change to restore the real layout.
      */
     handlePaneClose(paneId, windowId) {
+        var _a;
         const paneMap = this.windowPaneTabs.get(windowId);
         if (!paneMap)
             return;
@@ -1347,43 +1430,70 @@ let TmuxSessionTabComponent = TmuxSessionTabComponent_1 = class TmuxSessionTabCo
             return;
         this.logger.info(`Cleaning up closed pane %${paneId} in window @${windowId}`);
         paneMap.delete(paneId);
-        if (windowId === this.activeWindowId) {
+        // Only detach view if it's actually attached (visible panes).
+        // Hidden panes (e.g. non-zoomed panes when zoomed) are already detached.
+        if (windowId === this.activeWindowId && ((_a = this.viewRefs) === null || _a === void 0 ? void 0 : _a.has(paneTab))) {
             ;
             paneTab.emitVisibility(false);
             this.detachPaneView(paneTab);
-            this.layout();
             this.cdr.detectChanges();
         }
         ;
         paneTab.destroy();
     }
     /**
-     * Build a SplitContainer tree from a tmux layout node.
+     * Handle tmux telling us the active pane changed (e.g. after pane close).
+     * Focuses the pane in the UI, matching tmux default behavior.
      */
-    buildSplitContainerFromLayout(node) {
-        if (node.type === 'pane' && node.paneId !== undefined && this.activeWindowId !== null) {
-            const paneMap = this.windowPaneTabs.get(this.activeWindowId);
-            return (paneMap === null || paneMap === void 0 ? void 0 : paneMap.get(node.paneId)) || null;
-        }
-        if (!node.children || node.children.length === 0) {
-            return null;
-        }
-        const container = new tabby_core_1.SplitContainer();
-        container.orientation = node.type === 'horizontal' ? 'h' : 'v';
-        const totalSize = node.type === 'horizontal'
-            ? node.children.reduce((sum, c) => sum + c.width, 0)
-            : node.children.reduce((sum, c) => sum + c.height, 0);
-        for (const child of node.children) {
-            const childComponent = this.buildSplitContainerFromLayout(child);
-            if (childComponent) {
-                container.children.push(childComponent);
-                const ratio = totalSize > 0
-                    ? (node.type === 'horizontal' ? child.width / totalSize : child.height / totalSize)
-                    : 1 / node.children.length;
-                container.ratios.push(ratio);
+    handleActivePaneChanged(paneId, windowId) {
+        if (windowId !== this.activeWindowId)
+            return;
+        const paneMap = this.windowPaneTabs.get(windowId);
+        if (!paneMap)
+            return;
+        const paneTab = paneMap.get(paneId);
+        if (!paneTab)
+            return;
+        this.logger.info(`Activating pane %${paneId} in window @${windowId}`);
+        this.focus(paneTab);
+    }
+    /**
+     * Position each pane using tmux's absolute character coordinates × cell pixel size.
+     * Also sets the xterm character grid for each pane. One pass, zero rounding.
+     */
+    applyPixelLayout(layoutTree) {
+        var _a;
+        const cell = this.getCellSize();
+        if (!cell)
+            return;
+        const paneMap = this.windowPaneTabs.get(this.activeWindowId);
+        if (!paneMap)
+            return;
+        // Read pane-area padding so absolute-positioned panes respect it.
+        // CSS absolute positioning ignores parent padding, so we offset manually.
+        const host = this.hostElement.nativeElement;
+        const paneArea = host.querySelector('.pane-area');
+        const padL = paneArea ? parseFloat(getComputedStyle(paneArea).paddingLeft) || 0 : 0;
+        const padT = paneArea ? parseFloat(getComputedStyle(paneArea).paddingTop) || 0 : 0;
+        for (const pane of (0, layoutParser_1.flattenLayout)(layoutTree)) {
+            const paneTab = paneMap.get(pane.paneId);
+            if (!paneTab)
+                continue;
+            // Set pixel position from tmux char coords
+            const viewRef = (_a = this.viewRefs) === null || _a === void 0 ? void 0 : _a.get(paneTab);
+            if (viewRef) {
+                const el = viewRef.rootNodes[0];
+                el.classList.add('child');
+                el.style.left = `${padL + pane.x * cell.width}px`;
+                el.style.top = `${padT + pane.y * cell.height}px`;
+                el.style.width = `${pane.width * cell.width}px`;
+                el.style.height = `${pane.height * cell.height}px`;
+            }
+            // Set xterm character grid
+            if (paneTab.setTmuxGrid) {
+                paneTab.setTmuxGrid(pane.width, pane.height);
             }
         }
-        return container.children.length > 0 ? container : null;
     }
     /**
      * Refresh tmux client size based purely on the container (.pane-area) size.
@@ -1429,75 +1539,27 @@ let TmuxSessionTabComponent = TmuxSessionTabComponent_1 = class TmuxSessionTabCo
             this.controller.resizePane(0, cols, rows);
         }
     }
-    /**
-     * Apply the tmux-authoritative character grid to each mounted pane.
-     *
-     * tmux's layout string gives the exact width/height (in cells) of every
-     * pane. We push those directly into the corresponding xterm so display
-     * wrapping matches tmux exactly. xterm auto-fit is disabled for tmux panes,
-     * so this is the only thing that sizes them.
-     */
-    applyLayoutGrids(layoutTree) {
-        if (this.activeWindowId === null)
-            return;
-        const paneMap = this.windowPaneTabs.get(this.activeWindowId);
-        if (!paneMap)
-            return;
-        for (const pane of (0, layoutParser_1.flattenLayout)(layoutTree)) {
-            const paneTab = paneMap.get(pane.paneId);
-            if (paneTab === null || paneTab === void 0 ? void 0 : paneTab.setTmuxGrid) {
-                paneTab.setTmuxGrid(pane.width, pane.height);
-            }
-        }
-    }
     /**
      * Measure the whole-window character grid from the .pane-area container.
      *
-     * The container width includes per-pane decorations (xterm scrollbar +
-     * padding) and UI spanner dividers, none of which belong to the tmux
-     * character grid. We subtract them, divide by the real xterm cell size,
-     * then add tmux's 1-char dividers between panes so tmux's own grid lines up.
+     * Pure pixel-to-cell conversion. Uses clientWidth/clientHeight to
+     * exclude padding from the measurement — pane-area padding is purely
+     * cosmetic and must not affect the tmux grid calculation.
      */
     measureClientSize() {
-        var _a, _b;
+        var _a;
         const host = this.hostElement.nativeElement;
         const paneArea = (_a = host.querySelector('.pane-area')) !== null && _a !== void 0 ? _a : host;
-        const rect = paneArea.getBoundingClientRect();
-        if (rect.width < 10 || rect.height < 10)
+        const pw = paneArea.clientWidth;
+        const ph = paneArea.clientHeight;
+        if (pw < 10 || ph < 10)
             return null;
         const cell = this.getCellSize();
         if (!cell)
             return null;
-        // Determine pane/split counts for the active window.
-        const paneMap = this.activeWindowId !== null
-            ? this.windowPaneTabs.get(this.activeWindowId)
-            : null;
-        const paneCount = (_b = paneMap === null || paneMap === void 0 ? void 0 : paneMap.size) !== null && _b !== void 0 ? _b : 1;
-        // UI spanner pixel widths: tabby's split-tab-spanner is 10px each.
-        // Our custom tmux dividers are purely visual overlays with no pixel cost.
-        // _spanners is still populated by layoutInternal() for tabby's internal
-        // bookkeeping, but we no longer render split-tab-spanner elements, so
-        // their pixel width should not be subtracted here.
-        const spannerPx = 0;
-        // Per-pane visual padding defined in tmuxPaneTab.component.scss.
-        // Each pane has 4px on all sides (8px total per axis).
-        // For N panes in a row: total horizontal padding = N * 8px.
-        // For N panes in a column: total vertical padding = N * 8px.
-        // Approximate as all panes contributing to both axes (safe overestimate).
-        const panePadPerAxis = 8;
-        const totalPadPx = paneCount * panePadPerAxis;
-        const availableWidth = rect.width - spannerPx - totalPadPx;
-        const availableHeight = rect.height - totalPadPx;
-        const contentCols = Math.floor(availableWidth / cell.width);
-        const contentRows = Math.floor(availableHeight / cell.height);
-        // tmux inserts a 1-char divider between adjacent panes; add them back so
-        // the size we report covers content + dividers (tmux subtracts them again
-        // when splitting). Approximate as a horizontal split (most common case).
-        const numDividers = Math.max(0, paneCount - 1);
-        const cols = contentCols + numDividers;
         return {
-            cols: Math.max(2, cols),
-            rows: Math.max(1, contentRows),
+            cols: Math.max(2, Math.floor(pw / cell.width)),
+            rows: Math.max(1, Math.floor(ph / cell.height)),
         };
     }
     /**
@@ -1531,158 +1593,173 @@ let TmuxSessionTabComponent = TmuxSessionTabComponent_1 = class TmuxSessionTabCo
             this.refreshClientSize();
         }, debounceMs);
     }
+    // ─── Divider management ──────────────────────────────────────────────────
     /**
-     * Attach mousemove + mousedown handlers to .pane-area so that hovering
-     * near a .child's right/bottom border highlights it, and dragging starts
-     * a tmux resize-pane operation.
+     * Generate independent divider <div> elements for adjacent pane boundaries.
+     * Walks the layout tree to find sibling edges and creates draggable lines.
      */
-    attachPaneAreaBorderHandlers() {
+    updateDividers(layoutTree) {
         const host = this.hostElement.nativeElement;
         const paneArea = host.querySelector('.pane-area');
         if (!paneArea)
             return;
-        const HIT = TmuxSessionTabComponent_1.BORDER_HIT;
-        // Track which child + edge is currently hovered
-        let hoveredChild = null;
-        let hoveredEdge = null;
-        const clearHover = () => {
-            if (hoveredChild) {
-                hoveredChild.classList.remove('border-hover-right', 'border-hover-bottom');
+        this.clearDividers();
+        const cell = this.getCellSize();
+        if (!cell)
+            return;
+        this.collectDividers(layoutTree, cell, paneArea);
+    }
+    /**
+     * Recursively collect divider lines from the layout tree.
+     * For each container node, consecutive children share a boundary → divider.
+     *
+     * tmux layout semantics:
+     * - 'vertical' ([...]): children stacked top-to-bottom → horizontal divider line
+     * - 'horizontal' ({...}): children side-by-side → vertical divider line
+     *
+     * Same-level siblings always share the same cross-axis extent (tmux guarantees
+     * this for its binary splits), so divider size is simply derived from the parent.
+     *
+     * For container children (non-leaf), we find the actual pane IDs at the
+     * boundary using helper methods so drag-resize works at every level.
+     */
+    collectDividers(node, cell, paneArea) {
+        if (!node.children || node.children.length < 2) {
+            return;
+        }
+        // Read pane-area padding to offset divider positions (same as applyPixelLayout)
+        const cs = getComputedStyle(paneArea);
+        const padL = parseFloat(cs.paddingLeft) || 0;
+        const padT = parseFloat(cs.paddingTop) || 0;
+        for (let i = 0; i < node.children.length - 1; i++) {
+            const left = node.children[i];
+            const right = node.children[i + 1];
+            if (node.type === 'horizontal') {
+                // Children are side-by-side → vertical divider between left and right
+                // Divider is 1 cell wide, centered at the shared boundary
+                const x = padL + (left.x + left.width) * cell.width;
+                const top = padT + node.y * cell.height;
+                const height = node.height * cell.height;
+                // Find the rightmost pane(s) in `left` and leftmost pane(s) in `right`
+                const paneIdA = this.getRightmostLeafPaneId(left);
+                const paneIdB = this.getLeftmostLeafPaneId(right);
+                this.createDividerElement(paneArea, 'v', x, top, cell.width, height, paneIdA, paneIdB, cell);
             }
-            hoveredChild = null;
-            hoveredEdge = null;
-            paneArea.style.cursor = '';
-        };
-        const onMove = (e) => {
-            const areaRect = paneArea.getBoundingClientRect();
-            const mx = e.clientX - areaRect.left;
-            const my = e.clientY - areaRect.top;
-            // Find a .child whose right or bottom border is within HIT pixels
-            clearHover();
-            const children = paneArea.querySelectorAll('.child');
-            for (const child of Array.from(children)) {
-                const el = child;
-                const r = el.getBoundingClientRect();
-                const right = r.right - areaRect.left;
-                const bottom = r.bottom - areaRect.top;
-                const left = r.left - areaRect.left;
-                const top = r.top - areaRect.top;
-                // Right border hit: within HIT of right edge, vertically inside
-                if (Math.abs(mx - right) <= HIT && my >= top && my <= bottom) {
-                    el.classList.add('border-hover-right');
-                    paneArea.style.cursor = 'col-resize';
-                    hoveredChild = el;
-                    hoveredEdge = 'right';
-                    break;
-                }
-                // Bottom border hit: within HIT of bottom edge, horizontally inside
-                if (Math.abs(my - bottom) <= HIT && mx >= left && mx <= right) {
-                    el.classList.add('border-hover-bottom');
-                    paneArea.style.cursor = 'row-resize';
-                    hoveredChild = el;
-                    hoveredEdge = 'bottom';
-                    break;
-                }
+            else {
+                // Children are stacked top-to-bottom → horizontal divider between top and bottom
+                // Divider is 1 cell tall, centered at the shared boundary
+                const y = padT + (left.y + left.height) * cell.height;
+                const leftPx = padL + node.x * cell.width;
+                const width = node.width * cell.width;
+                // Find the bottommost pane(s) in `left` and topmost pane(s) in `right`
+                const paneIdA = this.getBottommostLeafPaneId(left);
+                const paneIdB = this.getTopmostLeafPaneId(right);
+                this.createDividerElement(paneArea, 'h', leftPx, y, width, cell.height, paneIdA, paneIdB, cell);
             }
-        };
-        const onDown = (e) => {
-            if (!hoveredChild || !hoveredEdge || !this.controller)
-                return;
-            e.preventDefault();
-            e.stopPropagation();
-            const edge = hoveredEdge;
-            const cell = this.getCellSize();
-            if (!cell)
-                return;
-            const startX = e.clientX;
-            const startY = e.clientY;
-            // Find the pane ID for this .child element
-            const resizeTarget = hoveredChild;
-            const paneId = this.findPaneIdForElement(resizeTarget);
-            if (paneId === null)
-                return;
-            // Track last sent delta to send incremental resize commands
-            let lastSentCols = 0;
-            let lastSentRows = 0;
-            const onDragMove = (de) => {
-                document.body.style.cursor = edge === 'right' ? 'col-resize' : 'row-resize';
-                if (edge === 'right') {
-                    const deltaCols = Math.round((de.clientX - startX) / cell.width);
-                    if (deltaCols !== lastSentCols) {
-                        const diff = deltaCols - lastSentCols;
-                        const flag = diff > 0 ? '-R' : '-L';
-                        this.controller.gateway.sendCommand(`resize-pane ${flag} -t %${paneId} ${Math.abs(diff)}`);
-                        lastSentCols = deltaCols;
-                    }
-                }
-                else {
-                    const deltaRows = Math.round((de.clientY - startY) / cell.height);
-                    if (deltaRows !== lastSentRows) {
-                        const diff = deltaRows - lastSentRows;
-                        const flag = diff > 0 ? '-D' : '-U';
-                        this.controller.gateway.sendCommand(`resize-pane ${flag} -t %${paneId} ${Math.abs(diff)}`);
-                        lastSentRows = deltaRows;
-                    }
-                }
-            };
-            const onDragUp = () => {
-                document.removeEventListener('mousemove', onDragMove);
-                document.removeEventListener('mouseup', onDragUp);
-                document.body.style.cursor = '';
-                clearHover();
-            };
-            document.addEventListener('mousemove', onDragMove);
-            document.addEventListener('mouseup', onDragUp);
-        };
-        const onLeave = () => clearHover();
-        this._paneAreaMouseMoveHandler = onMove;
-        this._paneAreaMouseDownHandler = onDown;
-        paneArea.addEventListener('mousemove', onMove);
-        paneArea.addEventListener('mousedown', onDown);
-        paneArea.addEventListener('mouseleave', onLeave);
-    }
-    detachPaneAreaBorderHandlers() {
-        const host = this.hostElement.nativeElement;
-        const paneArea = host.querySelector('.pane-area');
-        if (!paneArea)
-            return;
-        if (this._paneAreaMouseMoveHandler) {
-            paneArea.removeEventListener('mousemove', this._paneAreaMouseMoveHandler);
-            this._paneAreaMouseMoveHandler = null;
         }
-        if (this._paneAreaMouseDownHandler) {
-            paneArea.removeEventListener('mousedown', this._paneAreaMouseDownHandler);
-            this._paneAreaMouseDownHandler = null;
+        // Recurse into children
+        for (const child of node.children) {
+            this.collectDividers(child, cell, paneArea);
         }
     }
+    /** Find the rightmost leaf pane in a layout subtree (for vertical divider) */
+    getRightmostLeafPaneId(node) {
+        var _a;
+        if (node.type === 'pane')
+            return node.paneId;
+        if (!((_a = node.children) === null || _a === void 0 ? void 0 : _a.length))
+            return undefined;
+        return this.getRightmostLeafPaneId(node.children[node.children.length - 1]);
+    }
+    /** Find the leftmost leaf pane in a layout subtree (for vertical divider) */
+    getLeftmostLeafPaneId(node) {
+        var _a;
+        if (node.type === 'pane')
+            return node.paneId;
+        if (!((_a = node.children) === null || _a === void 0 ? void 0 : _a.length))
+            return undefined;
+        return this.getLeftmostLeafPaneId(node.children[0]);
+    }
+    /** Find the bottommost leaf pane in a layout subtree (for horizontal divider) */
+    getBottommostLeafPaneId(node) {
+        var _a;
+        if (node.type === 'pane')
+            return node.paneId;
+        if (!((_a = node.children) === null || _a === void 0 ? void 0 : _a.length))
+            return undefined;
+        return this.getBottommostLeafPaneId(node.children[node.children.length - 1]);
+    }
+    /** Find the topmost leaf pane in a layout subtree (for horizontal divider) */
+    getTopmostLeafPaneId(node) {
+        var _a;
+        if (node.type === 'pane')
+            return node.paneId;
+        if (!((_a = node.children) === null || _a === void 0 ? void 0 : _a.length))
+            return undefined;
+        return this.getTopmostLeafPaneId(node.children[0]);
+    }
     /**
-     * Map a .child DOM element back to the tmux pane ID it represents.
+     * Create a single divider DOM element with drag-to-resize behavior.
      */
-    findPaneIdForElement(el) {
-        var _a, _b, _c;
-        if (this.activeWindowId === null)
-            return null;
-        const paneMap = this.windowPaneTabs.get(this.activeWindowId);
-        if (!paneMap)
-            return null;
-        for (const [paneId, paneTab] of paneMap) {
-            const tabEl = (_b = (_a = paneTab.hostElement) === null || _a === void 0 ? void 0 : _a.nativeElement) !== null && _b !== void 0 ? _b : (_c = paneTab.element) === null || _c === void 0 ? void 0 : _c.nativeElement;
-            if (tabEl && (tabEl === el || tabEl.contains(el) || el.contains(tabEl))) {
-                return paneId;
-            }
+    createDividerElement(paneArea, orientation, x, y, w, h, paneIdA, paneIdB, cell) {
+        const div = document.createElement('div');
+        div.className = `tmux-divider ${orientation}`;
+        div.style.left = `${x}px`;
+        div.style.top = `${y}px`;
+        div.style.width = `${w}px`;
+        div.style.height = `${h}px`;
+        // Divider is already 1 cell wide/tall — natural hit target matches tmux
+        if (paneIdA !== undefined && paneIdB !== undefined) {
+            const onDown = (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                const startX = e.clientX;
+                const startY = e.clientY;
+                let lastSentCols = 0;
+                let lastSentRows = 0;
+                const onMove = (de) => {
+                    var _a, _b;
+                    document.body.style.cursor = orientation === 'v' ? 'col-resize' : 'row-resize';
+                    if (orientation === 'v') {
+                        const deltaCols = Math.round((de.clientX - startX) / cell.width);
+                        if (deltaCols !== lastSentCols) {
+                            const diff = deltaCols - lastSentCols;
+                            const flag = diff > 0 ? '-R' : '-L';
+                            (_a = this.controller) === null || _a === void 0 ? void 0 : _a.gateway.sendCommand(`resize-pane ${flag} -t %${paneIdA} ${Math.abs(diff)}`);
+                            lastSentCols = deltaCols;
+                        }
+                    }
+                    else {
+                        const deltaRows = Math.round((de.clientY - startY) / cell.height);
+                        if (deltaRows !== lastSentRows) {
+                            const diff = deltaRows - lastSentRows;
+                            const flag = diff > 0 ? '-D' : '-U';
+                            (_b = this.controller) === null || _b === void 0 ? void 0 : _b.gateway.sendCommand(`resize-pane ${flag} -t %${paneIdA} ${Math.abs(diff)}`);
+                            lastSentRows = deltaRows;
+                        }
+                    }
+                };
+                const onUp = () => {
+                    document.removeEventListener('mousemove', onMove);
+                    document.removeEventListener('mouseup', onUp);
+                    document.body.style.cursor = '';
+                };
+                document.addEventListener('mousemove', onMove);
+                document.addEventListener('mouseup', onUp);
+            };
+            div.addEventListener('mousedown', onDown);
         }
-        return null;
+        paneArea.appendChild(div);
+        this._dividerElements.push(div);
     }
-    // ─── (legacy divider stubs removed) ─────────────────────────────────────
     /**
-     * Override onSpannerAdjusted to notify tmux of layout change.
-     * When the user drags a spanner (split divider), the pane containers
-     * resize and xterm.js auto-fits. We need to tell tmux the new client size
-     * so it can recalculate its layout accordingly.
+     * Remove all divider elements from the DOM.
      */
-    onSpannerAdjusted(spanner) {
-        super.onSpannerAdjusted(spanner);
-        this.scheduleRefreshClientSize();
+    clearDividers() {
+        for (const el of this._dividerElements) {
+            el.remove();
+        }
+        this._dividerElements = [];
     }
     // --- UI Event Handlers ---
     onDisconnect() {
@@ -1720,7 +1797,7 @@ let TmuxSessionTabComponent = TmuxSessionTabComponent_1 = class TmuxSessionTabCo
             clearTimeout(this._resizeTimer);
             this._resizeTimer = null;
         }
-        this.detachPaneAreaBorderHandlers();
+        this.clearDividers();
         super.ngOnDestroy();
     }
     async canClose() {
@@ -1743,9 +1820,6 @@ let TmuxSessionTabComponent = TmuxSessionTabComponent_1 = class TmuxSessionTabCo
         return null;
     }
 };
-// ─── Border-based pane separator ────────────────────────────────────────
-/** Pixels from the right/bottom edge of a .child that counts as "on border" */
-TmuxSessionTabComponent.BORDER_HIT = 10;
 TmuxSessionTabComponent.ctorParameters = () => [
     { type: core_1.Injector },
     { type: tmux_service_1.TmuxService },
@@ -1759,7 +1833,7 @@ TmuxSessionTabComponent.propDecorators = {
     profile: [{ type: core_1.Input }],
     existingController: [{ type: core_1.Input }]
 };
-TmuxSessionTabComponent = TmuxSessionTabComponent_1 = __decorate([
+TmuxSessionTabComponent = __decorate([
     (0, core_1.Component)({
         selector: 'tmux-session-tab',
         host: {
@@ -1778,7 +1852,7 @@ TmuxSessionTabComponent = TmuxSessionTabComponent_1 = __decorate([
             (createWindow)="onCreateWindow()"
         ></tmux-window-bar>
     `,
-        styles: ["\n        :host {\n            position: relative;\n            display: flex;\n            flex-direction: column;\n            width: 100%;\n            height: 100%;\n        }\n        .pane-area {\n            flex: 1 1 0;\n            position: relative;\n            min-height: 0;\n        }\n        /* SplitTab.layoutInternal() positions .child with inline left/top/width/height %.\n           border-right + border-bottom render the tmux pane separator line.\n           box-sizing: border-box keeps the border inside the layout box so\n           xterm content is not displaced.\n           The border area also serves as the resize drag handle (see onPaneAreaMouseDown). */\n        ::ng-deep .pane-area > .child {\n            position: absolute;\n            transition: 0.125s all;\n            opacity: .75;\n            box-sizing: border-box;\n            border-right: 1px solid rgba(128,128,128,0.3);\n            border-bottom: 1px solid rgba(128,128,128,0.3);\n        }\n        ::ng-deep .pane-area > .child.focused {\n            opacity: 1;\n        }\n        /*\n         * Transparent hit-target overlays at the right/bottom edges.\n         * xterm renders a scrollbar (~14px wide) that intercepts mouse events,\n         * preventing the pane-area mousemove handler from detecting border\n         * proximity.  These ::after pseudo-elements sit above the scrollbar\n         * (z-index: 10) and capture events for resize dragging.\n         */\n        ::ng-deep .pane-area > .child::after {\n            content: '';\n            position: absolute;\n            top: 0;\n            right: 0;\n            width: 10px;\n            height: 100%;\n            z-index: 10;\n            pointer-events: auto;\n            cursor: col-resize;\n        }\n        ::ng-deep .pane-area > .child::before {\n            content: '';\n            position: absolute;\n            bottom: 0;\n            left: 0;\n            width: 100%;\n            height: 10px;\n            z-index: 10;\n            pointer-events: auto;\n            cursor: row-resize;\n        }\n        /* Highlight the border when hovering near the right/bottom edge */\n        ::ng-deep .pane-area > .child.border-hover-right {\n            border-right-color: rgba(128,128,128,0.75);\n        }\n        ::ng-deep .pane-area > .child.border-hover-bottom {\n            border-bottom-color: rgba(128,128,128,0.75);\n        }\n        tmux-window-bar {\n            flex: 0 0 auto;\n            position: relative;\n            z-index: 10;\n        }\n    "]
+        styles: ["\n        :host {\n            position: relative;\n            display: flex;\n            flex-direction: column;\n            width: 100%;\n            height: 100%;\n        }\n        .pane-area {\n            flex: 1 1 0;\n            position: relative;\n            min-height: 0;\n            padding: 4px;\n            box-sizing: border-box;\n        }\n        /* Pane containers: pixel-absolute positioned by applyPixelLayout().\n           No border, no padding \u2014 the xterm canvas fills the entire box. */\n        ::ng-deep .pane-area > .child {\n            position: absolute;\n            box-sizing: border-box;\n            opacity: .75;\n            transition: opacity 0.125s;\n        }\n        ::ng-deep .pane-area > .child.focused {\n            opacity: 1;\n        }\n        /* Independent divider elements for pane boundaries + resize dragging.\n           Width/height is set inline to 1 cell to match tmux's 1-char separator.\n           The visible line is a 1px ::after pseudo-element centered in the hit area. */\n        ::ng-deep .tmux-divider {\n            position: absolute;\n            z-index: 5;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n        }\n        ::ng-deep .tmux-divider::after {\n            content: '';\n            background: rgba(128,128,128,0.3);\n            transition: background 0.15s;\n        }\n        ::ng-deep .tmux-divider:hover::after {\n            background: rgba(128,128,128,0.75);\n        }\n        ::ng-deep .tmux-divider.v {   /* vertical divider: left-right split */\n            cursor: col-resize;\n        }\n        ::ng-deep .tmux-divider.v::after {\n            width: 1px;\n            height: 100%;\n        }\n        ::ng-deep .tmux-divider.h {   /* horizontal divider: top-bottom split */\n            cursor: row-resize;\n        }\n        ::ng-deep .tmux-divider.h::after {\n            height: 1px;\n            width: 100%;\n        }\n        tmux-window-bar {\n            flex: 0 0 auto;\n            position: relative;\n            z-index: 10;\n        }\n    "]
     }),
     __metadata("design:paramtypes", [core_1.Injector,
         tmux_service_1.TmuxService,
@@ -1839,6 +1913,11 @@ let TmuxWindowBarComponent = class TmuxWindowBarComponent {
                 case 'initialized':
                     this.refreshWindows();
                     break;
+                case 'layout-change':
+                    // Layout changes may affect pane count display
+                    // (e.g. zoom shows fewer panes in layout, but real count is unchanged)
+                    this.refreshWindows();
+                    break;
             }
         });
     }
@@ -3280,7 +3359,20 @@ class TmuxController {
         this.gateway.layoutChange$.subscribe(({ windowId, layout, visibleLayout, zoomed }) => {
             const state = this.windowStates.get(windowId);
             if (state) {
+                // tmux %layout-change semantics:
+                //   layout       = real multi-pane layout (all panes, actual sizes)
+                //   visibleLayout = what tmux displays (zoomed single pane when zoomed)
                 state.layout = layout;
+                if (zoomed && visibleLayout) {
+                    // Extract zoomed pane ID from visibleLayout (the single pane filling window)
+                    const m = /\d+x\d+,\d+,\d+,(\d+)/.exec(visibleLayout);
+                    state.zoomedPaneId = m ? parseInt(m[1]) : undefined;
+                    state.visibleLayout = visibleLayout;
+                }
+                else {
+                    state.zoomedPaneId = undefined;
+                    state.visibleLayout = undefined;
+                }
             }
             // Discover new panes from the layout string, then emit layout-change
             this.discoverPanesFromLayout(windowId, layout, visibleLayout, zoomed);
@@ -3292,6 +3384,12 @@ class TmuxController {
             this.activeWindowId = windowId;
             this.events.next({ type: 'active-window-changed', windowId });
         });
+        // Handle pane focus changes (e.g. after pane close, tmux auto-focuses
+        // the next pane and sends %window-pane-changed).
+        this.gateway.paneChanged$.subscribe(({ windowId, paneId }) => {
+            this.log.info(`Active pane changed to %${paneId} in window @${windowId}`);
+            this.events.next({ type: 'active-pane-changed', paneId, windowId });
+        });
         this.gateway.exit$.subscribe(reason => {
             this.attached = false;
             this.events.next({ type: 'exit', data: { reason } });
@@ -3436,15 +3534,18 @@ class TmuxController {
      * layout-change so syncLayout() runs after pane tabs exist.
      */
     async discoverPanesFromLayout(windowId, layout, visibleLayout, zoomed) {
-        // Extract pane IDs from the layout string
-        // Pane IDs appear as trailing numbers in layout leaf nodes like "80x24,0,0,3"
-        // Match pattern: dimension,position,paneId  (paneId is the last number after the last comma)
+        // Extract pane IDs from layout strings.
+        // When zoomed, the layout only contains the zoomed pane — also scan
+        // visibleLayout (the real multi-pane layout) so all panes are discovered.
         const paneIdSet = new Set();
-        // Match all occurrences of ,\d+ at the end of leaf node specs
         const leafPattern = /\d+x\d+,\d+,\d+,(\d+)/g;
         let m;
-        while ((m = leafPattern.exec(layout)) !== null) {
-            paneIdSet.add(parseInt(m[1]));
+        const layoutsToScan = zoomed && visibleLayout ? [layout, visibleLayout] : [layout];
+        for (const ls of layoutsToScan) {
+            leafPattern.lastIndex = 0;
+            while ((m = leafPattern.exec(ls)) !== null) {
+                paneIdSet.add(parseInt(m[1]));
+            }
         }
         if (paneIdSet.size === 0)
             return;
@@ -3459,6 +3560,30 @@ class TmuxController {
                 newPaneIds.push({ paneId, windowId });
             }
         }
+        // Remove panes no longer in the layout (only when not zoomed).
+        // When zoomed, the real layout is in visibleLayout, and pane-close
+        // events should handle cleanup of actually closed panes.
+        if (!zoomed && windowState) {
+            const closedPaneIds = [];
+            for (const paneId of windowState.panes) {
+                if (!paneIdSet.has(paneId)) {
+                    closedPaneIds.push(paneId);
+                }
+            }
+            for (const paneId of closedPaneIds) {
+                windowState.panes.delete(paneId);
+                this.knownPanes.delete(paneId);
+                // Clean up pane session
+                const session = this.paneSessions.get(paneId);
+                if (session) {
+                    session.destroy();
+                    this.paneSessions.delete(paneId);
+                }
+                this.pendingPaneOutput.delete(paneId);
+                this.log.info(`Removed closed pane %${paneId} from window @${windowId} (not in layout)`);
+                this.events.next({ type: 'pane-close', paneId, windowId });
+            }
+        }
         if (newPaneIds.length > 0) {
             this.log.info(`Discovered ${newPaneIds.length} new pane(s) from layout-change for window @${windowId}`);
             // Capture history + state for new panes (same as discoverWindowsAndPanes Step 3)
@@ -3519,7 +3644,15 @@ class TmuxController {
     registerPane(paneId, session) {
         this.paneSessions.set(paneId, session);
         this.knownPanes.add(paneId);
-        // Flush any buffered output that arrived before registration
+        // If a snapshot exists, the pending output is redundant — the snapshot
+        // already contains the same content (and more). Discard it to avoid
+        // writing the prompt/scrollback twice (once from buffered %output,
+        // once from capture-pane history in restorePaneHistory).
+        if (this.pendingSnapshots.has(paneId)) {
+            this.pendingPaneOutput.delete(paneId);
+            return;
+        }
+        // No snapshot (shouldn't happen normally) — flush buffered output
         const buffered = this.pendingPaneOutput.get(paneId);
         if (buffered) {
             for (const data of buffered) {
@@ -3809,6 +3942,13 @@ class TmuxController {
     async killPane(paneId) {
         await this.gateway.sendCommand(`kill-pane -t %${paneId}`, gateway_1.TMUX_COMMAND_TOLERATE_ERRORS);
     }
+    /**
+     * Toggle zoom on a pane (tmux prefix+z equivalent).
+     * When zoomed, the pane fills the entire window; other panes are hidden.
+     */
+    async zoomPane(paneId) {
+        await this.gateway.sendCommand(`resize-pane -Z -t %${paneId}`, gateway_1.TMUX_COMMAND_TOLERATE_ERRORS);
+    }
     // --- Window Operations ---
     async createWindow() {
         try {