treesap 0.1.9 → 0.1.10

package/dist/static/components/Terminal.js

@@ -1,6 +1,7 @@
-// Terminal component JavaScript using Xterm.js
+// Terminal component JavaScript using Xterm.js with WebSocket
 import { Terminal } from 'https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/+esm';
 import { terminalStore } from '/signals/TerminalSignal.js';
+
 class TerminalManager {
   constructor(terminalId) {
     this.terminalId = terminalId;
@@ -25,8 +26,12 @@ class TerminalManager {
     terminalStore.addTerminal(this.index);
     terminalStore.updateTerminalStatus(terminalId, 'connecting');
     
-    this.eventSource = null;
+    // WebSocket connection
+    this.websocket = null;
     this.terminal = null;
+    this.reconnectAttempts = 0;
+    this.maxReconnectAttempts = 5;
+    this.reconnectDelay = 1000; // Start with 1 second
     
     this.init();
   }
@@ -48,7 +53,7 @@ class TerminalManager {
     // Set up event listeners
     this.setupEventListeners();
     
-    // Connect to terminal stream
+    // Connect to terminal via WebSocket
     this.connectToTerminal();
   }
 
@@ -136,65 +141,147 @@ class TerminalManager {
   }
 
   sendInput(data) {
-    // Send input directly to shell stdin
-    fetch(`/terminal/input/${this.sessionId}`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ input: data })
-    })
-    .catch(error => {
-      console.error('Error sending input:', error);
-    });
+    // Send input via WebSocket
+    if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
+      const message = {
+        type: 'input',
+        sessionId: this.sessionId,
+        terminalId: this.terminalId,
+        data: data
+      };
+      this.websocket.send(JSON.stringify(message));
+    } else {
+      console.error('WebSocket not connected, cannot send input');
+      this.updateStatus('Disconnected');
+      terminalStore.updateTerminalStatus(this.terminalId, 'disconnected');
+    }
   }
 
   connectToTerminal() {
-    if (this.eventSource) {
-      this.eventSource.close();
+    if (this.websocket) {
+      this.websocket.close();
     }
 
     this.updateStatus('Connecting...');
     
-    this.eventSource = new EventSource(`/terminal/stream/${this.sessionId}`);
+    // Create WebSocket connection
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = `${protocol}//${window.location.host}/terminal/ws`;
     
-    this.eventSource.onopen = () => {
-      this.updateStatus('Ready');
-      terminalStore.updateTerminalStatus(this.terminalId, 'connected');
+    console.log(`Connecting to WebSocket: ${wsUrl}`);
+    this.websocket = new WebSocket(wsUrl);
+    
+    this.websocket.onopen = () => {
+      console.log('WebSocket connected, joining terminal session');
+      this.reconnectAttempts = 0;
+      this.reconnectDelay = 1000;
+      
+      // Join the terminal session
+      const joinMessage = {
+        type: 'join',
+        sessionId: this.sessionId,
+        terminalId: this.terminalId
+      };
+      this.websocket.send(JSON.stringify(joinMessage));
     };
     
-    this.eventSource.onmessage = (event) => {
+    this.websocket.onmessage = (event) => {
       try {
         const data = JSON.parse(event.data);
+        console.log('Received WebSocket message:', data.type);
         
-        if (data.type === 'output') {
-          this.terminal.write(data.content);
-        } else if (data.type === 'error') {
-          this.terminal.write(`\x1b[31m${data.content}\x1b[0m`);
-        } else if (data.type === 'exit') {
-          this.terminal.writeln(`\x1b[90mProcess exited with code ${data.code}\x1b[0m`);
-          this.terminal.write('\x1b[32m$ \x1b[0m');
-        } else if (data.type === 'connected') {
-          // Terminal connected - shell will show its own prompt
-          console.log('Terminal connected');
+        switch (data.type) {
+          case 'connected':
+            this.updateStatus('Ready');
+            terminalStore.updateTerminalStatus(this.terminalId, 'connected');
+            console.log('Terminal session joined successfully');
+            // Dispatch global status for cross-tab sync
+            document.dispatchEvent(new CustomEvent('terminal:global_status', {
+              detail: { status: 'connected' }
+            }));
+            break;
+            
+          case 'output':
+            if (data.content) {
+              this.terminal.write(data.content);
+            }
+            break;
+            
+          case 'error':
+            if (data.content) {
+              this.terminal.write(`\x1b[31m${data.content}\x1b[0m`);
+            } else if (data.data) {
+              this.terminal.write(`\x1b[31m${data.data}\x1b[0m`);
+            }
+            break;
+            
+          case 'exit':
+            this.terminal.writeln(`\x1b[90mProcess exited with code ${data.code || 0}\x1b[0m`);
+            this.terminal.write('\x1b[32m$ \x1b[0m');
+            break;
+            
+          case 'clients_count':
+            console.log(`${data.count} clients connected to this session`);
+            // Dispatch event for TerminalSignal to handle cross-tab sync
+            document.dispatchEvent(new CustomEvent('terminal:clients_count', {
+              detail: { 
+                sessionId: this.sessionId, 
+                count: data.count 
+              }
+            }));
+            break;
+            
+          case 'session_closed':
+            console.log('Terminal session was closed');
+            this.updateStatus('Session Closed');
+            terminalStore.updateTerminalStatus(this.terminalId, 'closed');
+            // Dispatch event for TerminalSignal to handle cross-tab sync
+            document.dispatchEvent(new CustomEvent('terminal:session_closed', {
+              detail: { 
+                sessionId: this.sessionId 
+              }
+            }));
+            break;
+            
+          case 'pong':
+            // Connection health check response
+            break;
+            
+          default:
+            console.log('Unknown message type:', data.type, data);
         }
       } catch (error) {
-        console.error('Error parsing terminal data:', error);
+        console.error('Error parsing WebSocket message:', error);
       }
     };
     
-    this.eventSource.onerror = (error) => {
-      console.error('Terminal stream error:', error);
+    this.websocket.onerror = (error) => {
+      console.error('WebSocket error:', error);
+      this.updateStatus('Connection Error');
+      terminalStore.updateTerminalStatus(this.terminalId, 'error');
+    };
+    
+    this.websocket.onclose = (event) => {
+      console.log('WebSocket closed:', event.code, event.reason);
       this.updateStatus('Disconnected');
       terminalStore.updateTerminalStatus(this.terminalId, 'disconnected');
       
-      // Attempt to reconnect after a delay
-      setTimeout(() => {
-        if (this.eventSource.readyState === EventSource.CLOSED) {
-          terminalStore.updateTerminalStatus(this.terminalId, 'connecting');
+      // Attempt to reconnect with exponential backoff
+      if (this.reconnectAttempts < this.maxReconnectAttempts) {
+        this.reconnectAttempts++;
+        console.log(`Attempting to reconnect (${this.reconnectAttempts}/${this.maxReconnectAttempts}) in ${this.reconnectDelay}ms`);
+        
+        setTimeout(() => {
           this.connectToTerminal();
-        }
-      }, 3000);
+        }, this.reconnectDelay);
+        
+        // Exponential backoff: double the delay each time, max 10 seconds
+        this.reconnectDelay = Math.min(this.reconnectDelay * 2, 10000);
+      } else {
+        console.error('Max reconnection attempts reached');
+        this.updateStatus('Connection Failed');
+        terminalStore.updateTerminalStatus(this.terminalId, 'failed');
+      }
     };
   }
 
@@ -213,32 +300,25 @@ class TerminalManager {
   }
 
   async destroy() {
-    if (this.eventSource) {
-      this.eventSource.close();
+    // Send leave message to WebSocket before closing
+    if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
+      const leaveMessage = {
+        type: 'leave',
+        sessionId: this.sessionId,
+        terminalId: this.terminalId
+      };
+      this.websocket.send(JSON.stringify(leaveMessage));
+    }
+    
+    if (this.websocket) {
+      this.websocket.close();
     }
     if (this.terminal) {
       this.terminal.dispose();
     }
     
-    // Destroy server-side terminal session
-    const sessionId = terminalStore.getSessionId(this.terminalId);
-    if (sessionId) {
-      try {
-        const response = await fetch(`/terminal/session/${sessionId}`, {
-          method: 'DELETE'
-        });
-        
-        if (response.ok) {
-          console.log(`Terminal session ${sessionId} destroyed on server`);
-        } else {
-          console.warn(`Failed to destroy terminal session ${sessionId} on server:`, await response.text());
-        }
-      } catch (error) {
-        console.error(`Error destroying terminal session ${sessionId}:`, error);
-      }
-    } else {
-      console.warn(`No sessionId found for terminal ${this.terminalId}`);
-    }
+    // Note: We don't destroy the server-side session anymore since other tabs might be using it
+    // The WebSocket service will manage session cleanup when all clients disconnect
     
     // Remove from store
     terminalStore.removeTerminal(this.terminalId);

package/dist/static/signals/SidebarSignal.js

@@ -0,0 +1,123 @@
+import { signal, computed } from 'https://esm.sh/@preact/signals@1.2.2';
+
+// Sidebar state management
+class SidebarStore {
+  constructor() {
+    // Core state signals
+    this.isOpen = signal(true); // Default to open on desktop
+    this.isMobile = signal(false); // Track if we're in mobile viewport
+    this.mobileBreakpoint = signal(768); // Breakpoint for mobile/desktop detection
+    
+    // Computed values
+    this.shouldShowBackdrop = computed(() => this.isMobile.value && this.isOpen.value);
+    this.shouldShowMobileToggle = computed(() => this.isMobile.value && !this.isOpen.value);
+    this.shouldShowFloatingButton = computed(() => !this.isMobile.value && !this.isOpen.value);
+    
+    // Initialize mobile detection
+    this.initializeMobileDetection();
+  }
+  
+  // Initialize mobile detection and set initial state
+  initializeMobileDetection() {
+    if (typeof window !== 'undefined') {
+      this.updateMobileState();
+      
+      // Listen for window resize
+      window.addEventListener('resize', () => {
+        this.updateMobileState();
+      });
+    }
+  }
+  
+  // Update mobile state based on window width
+  updateMobileState() {
+    if (typeof window === 'undefined') return;
+    
+    const wasMobile = this.isMobile.value;
+    const nowMobile = window.innerWidth < this.mobileBreakpoint.value;
+    
+    this.isMobile.value = nowMobile;
+    
+    // Handle initial state or breakpoint transitions
+    if (wasMobile === undefined) {
+      // First time: desktop shows sidebar, mobile hides it
+      this.isOpen.value = !nowMobile;
+    } else if (wasMobile !== nowMobile) {
+      // Breakpoint changed
+      if (wasMobile && !nowMobile) {
+        // Mobile to desktop: show sidebar
+        this.isOpen.value = true;
+      } else if (!wasMobile && nowMobile) {
+        // Desktop to mobile: hide sidebar
+        this.isOpen.value = false;
+      }
+    }
+  }
+  
+  // Actions for managing sidebar state
+  toggle() {
+    this.isOpen.value = !this.isOpen.value;
+    console.log(`Sidebar toggled: ${this.isOpen.value ? 'open' : 'closed'}`);
+  }
+  
+  open() {
+    this.isOpen.value = true;
+    console.log('Sidebar opened');
+  }
+  
+  close() {
+    this.isOpen.value = false;
+    console.log('Sidebar closed');
+  }
+  
+  // Set mobile breakpoint
+  setMobileBreakpoint(breakpoint) {
+    this.mobileBreakpoint.value = breakpoint;
+    this.updateMobileState();
+  }
+  
+  // Get current state (useful for components that need to read state once)
+  getState() {
+    return {
+      isOpen: this.isOpen.value,
+      isMobile: this.isMobile.value,
+      mobileBreakpoint: this.mobileBreakpoint.value,
+      shouldShowBackdrop: this.shouldShowBackdrop.value,
+      shouldShowMobileToggle: this.shouldShowMobileToggle.value,
+      shouldShowFloatingButton: this.shouldShowFloatingButton.value
+    };
+  }
+  
+  // Debug helpers
+  logState() {
+    console.log('Sidebar Store State:', this.getState());
+  }
+  
+  // Subscribe to state changes (for components that need to react to changes)
+  onStateChange(callback) {
+    // Create an effect that runs when any sidebar state changes
+    const unsubscribe = () => {
+      // This is a simple implementation - in a full app you might want more granular subscriptions
+      const state = this.getState();
+      callback(state);
+    };
+    
+    // Subscribe to all relevant signals
+    this.isOpen.subscribe(unsubscribe);
+    this.isMobile.subscribe(unsubscribe);
+    
+    // Return unsubscribe function
+    return () => {
+      // Note: Preact signals don't have a direct unsubscribe method
+      // In a production app, you'd want to implement proper cleanup
+    };
+  }
+}
+
+// Create and export singleton instance
+export const sidebarStore = new SidebarStore();
+
+// Make it available globally for debugging
+if (typeof window !== 'undefined') {
+  window.sidebarStore = sidebarStore;
+}

package/dist/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) {