tabminal 3.0.4 → 3.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tabminal",
-  "version": "3.0.4",
+  "version": "3.0.6",
   "description": "Tab(ter)minal, a Cloud-Native terminal and ACP agent workspace for desktop, tablet, and phone.",
   "type": "module",
   "bin": {

package/public/app.js

@@ -170,6 +170,14 @@ function isCompactWorkspaceMode() {
     return !!window.__tabminalCompactWorkspaceMode;
 }
 
+function isCompactTerminalTabsMode() {
+    return !!window.__tabminalCompactTerminalTabsMode;
+}
+
+function isForcedTerminalWorkspaceMode() {
+    return isCompactWorkspaceMode() || isCompactTerminalTabsMode();
+}
+
 function getTerminalFontSize() {
     return IS_MOBILE ? 14 : 12;
 }
@@ -286,6 +294,13 @@ if (sidebarToggle && sidebar && sidebarOverlay) {
         sidebarOverlay.classList.remove('open');
     };
 
+    sidebarToggle.addEventListener('pointerdown', (event) => {
+        if (!isCompactWorkspaceMode()) {
+            return;
+        }
+        event.preventDefault();
+    });
+
     sidebarToggle.addEventListener('click', () => {
         sidebar.classList.toggle('open');
         sidebarOverlay.classList.toggle('open');
@@ -711,13 +726,13 @@ class EditorManager {
     }
 
     canToggleTerminalWorkspaceMode(session = this.currentSession) {
-        return !!session && !isCompactWorkspaceMode();
+        return !!session && !isForcedTerminalWorkspaceMode();
     }
 
     hasCompactWorkspaceTabs(session = this.currentSession) {
         return !!session
             && (
-                isCompactWorkspaceMode()
+                isForcedTerminalWorkspaceMode()
                 || this.isTerminalTabPinned(session)
             );
     }
@@ -784,7 +799,7 @@ class EditorManager {
             && this.terminalWrapper.contains(activeElement)
         );
 
-        if (isCompactWorkspaceMode()) {
+        if (isForcedTerminalWorkspaceMode()) {
             session.sharedWorkspaceState.terminalDisplayMode = 'auto';
             this.updateTerminalLayoutButton();
             return;
@@ -10614,12 +10629,65 @@ function renderServerControls() {
 
 // #region Notification Manager
 const notificationManager = new NotificationManager();
+const APP_NOTIFICATION_QUIET_MS = 30_000;
+const APP_NOTIFICATION_IDLE_MS = 3 * 60 * 1000;
+let appNotificationQuietUntil = Date.now() + APP_NOTIFICATION_QUIET_MS;
+let lastAppInteractionAt = Date.now();
+
+function noteAppInteraction() {
+    lastAppInteractionAt = Date.now();
+}
+
+function enterAppNotificationQuietPeriod(duration = APP_NOTIFICATION_QUIET_MS) {
+    appNotificationQuietUntil = Math.max(
+        appNotificationQuietUntil,
+        Date.now() + duration
+    );
+}
+
+function shouldNotifyConnectionStatus() {
+    if (Date.now() < appNotificationQuietUntil) {
+        return false;
+    }
+    if (document.visibilityState !== 'visible') {
+        return false;
+    }
+    if (typeof document.hasFocus === 'function' && !document.hasFocus()) {
+        return false;
+    }
+    if ((Date.now() - lastAppInteractionAt) > APP_NOTIFICATION_IDLE_MS) {
+        return false;
+    }
+    return true;
+}
+
+document.addEventListener('pointerdown', noteAppInteraction, {
+    capture: true,
+    passive: true
+});
+document.addEventListener('touchstart', noteAppInteraction, {
+    capture: true,
+    passive: true
+});
+document.addEventListener('keydown', noteAppInteraction, {
+    capture: true
+});
+window.addEventListener('focus', () => {
+    noteAppInteraction();
+    enterAppNotificationQuietPeriod();
+});
+window.addEventListener('pageshow', () => {
+    noteAppInteraction();
+    enterAppNotificationQuietPeriod();
+});
 
 document.addEventListener('click', () => {
     notificationManager.requestPermission();
 }, { once: true, capture: true });
 document.addEventListener('visibilitychange', () => {
     if (document.visibilityState === 'visible') {
+        noteAppInteraction();
+        enterAppNotificationQuietPeriod();
         clearVisibleAttentionState();
     }
 });
@@ -10661,18 +10729,20 @@ function setStatus(server, status) {
     statusMemory.set(server.id, status);
     server.connectionStatus = status;
     renderServerControls();
-
-    const activeServer = getActiveServer();
-    if (!activeServer || activeServer.id !== server.id) return;
     const hostName = getDisplayHost(server);
     const target = hostName || 'host';
+    const shouldNotify = shouldNotifyConnectionStatus();
 
-    if (status === 'reconnecting') {
+    if (status === 'reconnecting' && shouldNotify) {
         alert(`Lost connection to ${target}. Reconnecting...`, {
             type: 'warning',
             title: 'Connection'
         });
-    } else if (status === 'connected' && prevStatus === 'reconnecting') {
+    } else if (
+        status === 'connected'
+        && prevStatus === 'reconnecting'
+        && shouldNotify
+    ) {
         alert(`Connection to ${target} restored.`, {
             type: 'success',
             title: 'Connection'
@@ -10682,7 +10752,7 @@ function setStatus(server, status) {
             type: 'error',
             title: 'Connection'
         });
-    } else if (status === 'connected' && !prevStatus) {
+    } else if (status === 'connected' && !prevStatus && shouldNotify) {
         alert(`Connected to ${target}.`, {
             type: 'success',
             title: 'Connection'
@@ -10809,7 +10879,7 @@ window.addEventListener('tabminal:layout-modechange', () => {
         && terminalEl.contains(activeElement)
     );
 
-    if (isCompactWorkspaceMode()) {
+    if (isForcedTerminalWorkspaceMode()) {
         if (terminalHasFocus) {
             session.workspaceState.activeTabKey = TERMINAL_WORKSPACE_TAB_KEY;
             session.saveState();

package/public/index.html

@@ -14,26 +14,37 @@
     <link rel="preconnect" href="https://cdn.jsdelivr.net">
     <script>
         const COMPACT_WORKSPACE_MAX_WIDTH = 767;
-        const COMPACT_WORKSPACE_MAX_SHORT_HEIGHT = 500;
-        const COMPACT_WORKSPACE_MAX_LANDSCAPE_WIDTH = 950;
+        const COMPACT_TERMINAL_TAB_MAX_WIDTH = 1408;
+        // Temporarily disabled short-landscape fallback. Pixel Fold and
+        // similar devices can oscillate around the keyboard-driven viewport
+        // boundary, which makes compact mode flap during sidebar animation.
+        // const COMPACT_WORKSPACE_MAX_LANDSCAPE_WIDTH = 950;
+        // const COMPACT_WORKSPACE_ENTER_MAX_SHORT_HEIGHT = 500;
+        // const COMPACT_WORKSPACE_EXIT_MAX_SHORT_HEIGHT = 540;
+        const SIDEBAR_LAYOUT_PAUSE_MS = 360;
+        let layoutLoopPausedUntil = 0;
+        let frozenLayoutViewport = null;
+        let sidebarLayoutThawTimer = 0;
 
-        function shouldUseCompactWorkspaceMode(width, height) {
-            return width <= COMPACT_WORKSPACE_MAX_WIDTH
-                || (
-                    width <= COMPACT_WORKSPACE_MAX_LANDSCAPE_WIDTH
-                    && height <= COMPACT_WORKSPACE_MAX_SHORT_HEIGHT
-                );
+        function shouldUseCompactWorkspaceMode(
+            width,
+            height,
+            previousCompactWorkspaceMode = false
+        ) {
+            // Keep the extra args to preserve the old signature for possible
+            // re-enable of the short-landscape fallback above.
+            void height;
+            void previousCompactWorkspaceMode;
+            return width <= COMPACT_WORKSPACE_MAX_WIDTH;
         }
 
-        // Mobile Layout Manager
-        function updateLayout() {
+        function readLayoutViewport() {
             const vv = window.visualViewport;
             let width = window.innerWidth;
             let height = window.innerHeight;
             let offsetTop = 0;
             let offsetLeft = 0;
 
-            // Sanity check for iPadOS PWA bug where vv.height can be negative with physical keyboard
             if (vv && vv.height > 100) {
                 width = vv.width;
                 height = vv.height;
@@ -41,18 +52,43 @@
                 offsetLeft = vv.offsetLeft;
             }
 
+            return {
+                width,
+                height,
+                offsetTop,
+                offsetLeft
+            };
+        }
+
+        // Mobile Layout Manager
+        function updateLayout() {
+            const layoutViewport = frozenLayoutViewport || readLayoutViewport();
+            const {
+                width,
+                height,
+                offsetTop,
+                offsetLeft
+            } = layoutViewport;
+
             document.documentElement.style.setProperty('--app-width', `${width}px`);
             document.documentElement.style.setProperty('--app-height', `${height}px`);
             document.documentElement.style.setProperty('--app-top', `${offsetTop}px`);
             document.documentElement.style.setProperty('--app-left', `${offsetLeft}px`);
 
+            const previousCompactWorkspaceMode =
+                window.__tabminalCompactWorkspaceMode;
+            const previousCompactTerminalTabsMode =
+                window.__tabminalCompactTerminalTabsMode;
             const compactWorkspaceMode = shouldUseCompactWorkspaceMode(
                 width,
-                height
+                height,
+                previousCompactWorkspaceMode
             );
-            const previousCompactWorkspaceMode =
-                window.__tabminalCompactWorkspaceMode;
+            const compactTerminalTabsMode =
+                width <= COMPACT_TERMINAL_TAB_MAX_WIDTH;
             window.__tabminalCompactWorkspaceMode = compactWorkspaceMode;
+            window.__tabminalCompactTerminalTabsMode =
+                compactTerminalTabsMode;
 
             if (document.body) {
                 window.scrollTo(0, 0);
@@ -83,17 +119,56 @@
             }
 
             if (
-                previousCompactWorkspaceMode !== undefined
-                && previousCompactWorkspaceMode !== compactWorkspaceMode
+                (
+                    previousCompactWorkspaceMode !== undefined
+                    && previousCompactWorkspaceMode !== compactWorkspaceMode
+                )
+                || (
+                    previousCompactTerminalTabsMode !== undefined
+                    && previousCompactTerminalTabsMode
+                        !== compactTerminalTabsMode
+                )
             ) {
                 window.dispatchEvent(
                     new CustomEvent('tabminal:layout-modechange', {
-                        detail: { compactWorkspaceMode }
+                        detail: {
+                            compactWorkspaceMode,
+                            compactTerminalTabsMode
+                        }
                     })
                 );
             }
         }
 
+        function pauseLayoutLoop(duration = SIDEBAR_LAYOUT_PAUSE_MS) {
+            const now = performance.now();
+            layoutLoopPausedUntil = Math.max(
+                layoutLoopPausedUntil,
+                now + duration
+            );
+        }
+
+        function freezeLayoutViewport() {
+            frozenLayoutViewport = readLayoutViewport();
+            if (sidebarLayoutThawTimer) {
+                clearTimeout(sidebarLayoutThawTimer);
+                sidebarLayoutThawTimer = 0;
+            }
+        }
+
+        function thawLayoutViewport() {
+            if (sidebarLayoutThawTimer) {
+                clearTimeout(sidebarLayoutThawTimer);
+            }
+            sidebarLayoutThawTimer = window.setTimeout(() => {
+                frozenLayoutViewport = null;
+                sidebarLayoutThawTimer = 0;
+                updateLayout();
+            }, SIDEBAR_LAYOUT_PAUSE_MS);
+        }
+
+        window.__tabminalPauseLayoutLoop = pauseLayoutLoop;
+
         if (window.visualViewport) {
             window.visualViewport.addEventListener('resize', updateLayout);
             window.visualViewport.addEventListener('scroll', updateLayout);
@@ -103,13 +178,39 @@
 
         // High-performance Layout Loop (60fps)
         function layoutLoop() {
-            updateLayout();
+            if (performance.now() >= layoutLoopPausedUntil) {
+                updateLayout();
+            }
             requestAnimationFrame(layoutLoop);
         }
         layoutLoop();
 
         // Initial triggers
         document.addEventListener('DOMContentLoaded', updateLayout);
+        document.addEventListener('DOMContentLoaded', () => {
+            const sidebar = document.getElementById('sidebar');
+            if (!sidebar) {
+                return;
+            }
+            let sidebarOpen = sidebar.classList.contains('open');
+            const observer = new MutationObserver(() => {
+                const isOpen = sidebar.classList.contains('open');
+                if (isOpen === sidebarOpen) {
+                    return;
+                }
+                sidebarOpen = isOpen;
+                pauseLayoutLoop();
+                if (isOpen) {
+                    freezeLayoutViewport();
+                } else {
+                    thawLayoutViewport();
+                }
+            });
+            observer.observe(sidebar, {
+                attributes: true,
+                attributeFilter: ['class']
+            });
+        });
         window.addEventListener('load', updateLayout);
 
         // Enhanced Touch Interceptor with Boundary Check

package/public/styles.css

@@ -2241,7 +2241,7 @@ kbd {
     min-width: 0;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 1408px) {
     .agent-panel-commands {
         display: none !important;
     }