treesap 0.1.9 → 0.1.10

package/src/static/signals/TerminalSignal.js

@@ -1,18 +1,28 @@
 import { signal, computed } from 'https://esm.sh/@preact/signals@1.2.2';
 
-// Terminal state management for multiple terminals
+// Terminal state management for multiple terminals with cross-tab sync
 class TerminalStore {
   constructor() {
     // Core state signals
-    this.terminals = signal([]);  // Array of terminal objects: {id, sessionId, status, index}
+    this.terminals = signal([]);  // Array of terminal objects: {id, sessionId, status, index, clientCount}
     this.activeTerminalId = signal('terminal-1'); // Currently active terminal
     this.nextTerminalIndex = signal(1); // For generating new terminal indices
     
+    // Cross-tab sync signals
+    this.sessionClients = signal(new Map()); // sessionId -> client count
+    this.globalStatus = signal('initializing'); // Overall connection status
+    
     // Computed values
     this.activeTerminal = computed(() => 
       this.terminals.value.find(t => t.id === this.activeTerminalId.value)
     );
     this.terminalCount = computed(() => this.terminals.value.length);
+    this.hasConnectedTerminals = computed(() => 
+      this.terminals.value.some(t => t.status === 'connected')
+    );
+    
+    // Initialize cross-tab communication
+    this.initializeCrossTabSync();
   }
   
   // Actions for managing terminals
@@ -118,6 +128,131 @@ class TerminalStore {
     console.log('Terminal Store State:', this.getState());
   }
   
+  // Initialize cross-tab communication
+  initializeCrossTabSync() {
+    // Listen for WebSocket events from terminal managers
+    this.setupWebSocketEventListeners();
+    
+    // Listen for browser storage events for cross-tab sync
+    this.setupStorageEventListeners();
+    
+    // Initialize from any existing state in localStorage
+    this.loadStateFromStorage();
+  }
+  
+  setupWebSocketEventListeners() {
+    // Custom events dispatched by TerminalManager
+    document.addEventListener('terminal:clients_count', (event) => {
+      this.updateSessionClientCount(event.detail.sessionId, event.detail.count);
+    });
+    
+    document.addEventListener('terminal:session_closed', (event) => {
+      this.handleSessionClosed(event.detail.sessionId);
+    });
+    
+    document.addEventListener('terminal:global_status', (event) => {
+      this.globalStatus.value = event.detail.status;
+    });
+  }
+  
+  setupStorageEventListeners() {
+    // Listen for changes from other tabs
+    window.addEventListener('storage', (event) => {
+      if (event.key === 'treesap_terminal_state') {
+        this.syncFromStorage(event.newValue);
+      }
+    });
+    
+    // Save state to storage when terminals change
+    this.terminals.subscribe(() => {
+      this.saveStateToStorage();
+    });
+  }
+  
+  loadStateFromStorage() {
+    try {
+      const savedState = localStorage.getItem('treesap_terminal_state');
+      if (savedState) {
+        const state = JSON.parse(savedState);
+        // Only sync certain properties, not connection status which is per-tab
+        if (state.activeTerminalId) {
+          this.activeTerminalId.value = state.activeTerminalId;
+        }
+        if (state.nextTerminalIndex) {
+          this.nextTerminalIndex.value = state.nextTerminalIndex;
+        }
+      }
+    } catch (error) {
+      console.error('Error loading terminal state from storage:', error);
+    }
+  }
+  
+  saveStateToStorage() {
+    try {
+      const state = {
+        activeTerminalId: this.activeTerminalId.value,
+        nextTerminalIndex: this.nextTerminalIndex.value,
+        timestamp: Date.now()
+      };
+      localStorage.setItem('treesap_terminal_state', JSON.stringify(state));
+    } catch (error) {
+      console.error('Error saving terminal state to storage:', error);
+    }
+  }
+  
+  syncFromStorage(newValueStr) {
+    if (!newValueStr) return;
+    
+    try {
+      const newState = JSON.parse(newValueStr);
+      // Only sync if the change is from another tab (newer timestamp)
+      const currentTimestamp = this.lastSaveTimestamp || 0;
+      if (newState.timestamp && newState.timestamp > currentTimestamp) {
+        if (newState.activeTerminalId) {
+          this.activeTerminalId.value = newState.activeTerminalId;
+        }
+        if (newState.nextTerminalIndex) {
+          this.nextTerminalIndex.value = newState.nextTerminalIndex;
+        }
+      }
+    } catch (error) {
+      console.error('Error syncing terminal state from storage:', error);
+    }
+  }
+  
+  updateSessionClientCount(sessionId, count) {
+    const currentMap = new Map(this.sessionClients.value);
+    currentMap.set(sessionId, count);
+    this.sessionClients.value = currentMap;
+    
+    // Update terminal objects with client count
+    this.terminals.value = this.terminals.value.map(terminal => {
+      if (terminal.sessionId === sessionId) {
+        return { ...terminal, clientCount: count, lastUpdated: new Date() };
+      }
+      return terminal;
+    });
+    
+    console.log(`Session ${sessionId} now has ${count} clients`);
+  }
+  
+  handleSessionClosed(sessionId) {
+    console.log(`Session ${sessionId} was closed`);
+    
+    // Update terminals for this session
+    this.terminals.value = this.terminals.value.map(terminal => {
+      if (terminal.sessionId === sessionId) {
+        return { ...terminal, status: 'closed', lastUpdated: new Date() };
+      }
+      return terminal;
+    });
+    
+    // Remove from session clients
+    const currentMap = new Map(this.sessionClients.value);
+    currentMap.delete(sessionId);
+    this.sessionClients.value = currentMap;
+  }
+
   // Initialize default terminal
   initializeDefaultTerminal() {
     if (this.terminals.value.length === 0) {

package/src/static/styles/main.css

@@ -1093,6 +1093,10 @@ video {
   margin-bottom: 0;
 }
 
+.pointer-events-none {
+  pointer-events: none;
+}
+
 .visible {
   visibility: visible;
 }
@@ -1101,6 +1105,10 @@ video {
   position: static;
 }
 
+.fixed {
+  position: fixed;
+}
+
 .absolute {
   position: absolute;
 }
@@ -1109,10 +1117,38 @@ video {
   position: relative;
 }
 
+.inset-0 {
+  inset: 0px;
+}
+
+.left-0 {
+  left: 0px;
+}
+
+.left-4 {
+  left: 1rem;
+}
+
+.top-0 {
+  top: 0px;
+}
+
+.top-4 {
+  top: 1rem;
+}
+
+.z-40 {
+  z-index: 40;
+}
+
 .z-50 {
   z-index: 50;
 }
 
+.z-60 {
+  z-index: 60;
+}
+
 .mb-12 {
   margin-bottom: 3rem;
 }
@@ -1217,6 +1253,20 @@ video {
   flex-shrink: 0;
 }
 
+.-translate-x-full {
+  --tw-translate-x: -100%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-x-0 {
+  --tw-translate-x: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -1359,6 +1409,10 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
 
+.bg-opacity-50 {
+  --tw-bg-opacity: 0.5;
+}
+
 .bg-gradient-to-br {
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
 }
@@ -1491,6 +1545,14 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-100 {
+  opacity: 1;
+}
+
 .opacity-50 {
   opacity: 0.5;
 }
@@ -1505,6 +1567,12 @@ video {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.backdrop-blur-sm {
+  --tw-backdrop-blur: blur(4px);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
 .transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1517,10 +1585,26 @@ video {
   transition-duration: 150ms;
 }
 
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .duration-300 {
   transition-duration: 300ms;
 }
 
+.ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 .focus-within\:border-\[\#0e639c\]:focus-within {
   --tw-border-opacity: 1;
   border-color: rgb(14 99 156 / var(--tw-border-opacity, 1));
@@ -1576,3 +1660,30 @@ video {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
+
+@media (min-width: 768px) {
+  .md\:relative {
+    position: relative;
+  }
+
+  .md\:z-auto {
+    z-index: auto;
+  }
+
+  .md\:hidden {
+    display: none;
+  }
+
+  .md\:w-2\/5 {
+    width: 40%;
+  }
+
+  .md\:flex-1 {
+    flex: 1 1 0%;
+  }
+
+  .md\:translate-x-0 {
+    --tw-translate-x: 0px;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
+}

package/tailwind.config.ts

@@ -6,6 +6,16 @@ const config: Config = {
     "./src/**/*.{js,ts,jsx,tsx}",
     "./static/**/*.{js,ts,jsx,tsx}",
   ],
+  theme: {
+    extend: {
+      width: {
+        '2/5': '40%',
+      },
+      zIndex: {
+        '60': '60',
+      }
+    }
+  },
   plugins: [typography()],
 };