treesap 0.1.8 → 0.1.10

package/src/static/components/SimpleLivePreview.js

@@ -1,4 +1,6 @@
 // SimpleLivePreview component JavaScript
+import { sidebarStore } from '/signals/SidebarSignal.js';
+
 class SimpleLivePreviewManager {
   constructor(id = 'simple-preview') {
     this.id = id;
@@ -17,8 +19,8 @@ class SimpleLivePreviewManager {
     // Get preview port from iframe data attribute
     this.previewPort = this.iframe?.getAttribute('data-preview-port') || 5173;
     
-    // State
-    this.isSidebarHidden = false;
+    // Reference to the sidebar store
+    this.store = sidebarStore;
     
     this.init();
   }
@@ -34,12 +36,15 @@ class SimpleLivePreviewManager {
     
     // Set up event listeners
     this.setupEventListeners();
+    
+    // Subscribe to sidebar store changes
+    this.subscribeToStore();
   }
 
   setupEventListeners() {
     // Hide sidebar toggle (both sidebar and floating button)
-    this.hideSidebarBtn?.addEventListener('click', () => this.toggleSidebarVisibility());
-    this.floatingHideSidebarBtn?.addEventListener('click', () => this.toggleSidebarVisibility());
+    this.hideSidebarBtn?.addEventListener('click', () => this.store.toggle());
+    this.floatingHideSidebarBtn?.addEventListener('click', () => this.store.toggle());
 
     // Refresh button
     this.refreshBtn?.addEventListener('click', () => this.refreshIframe());
@@ -62,6 +67,21 @@ class SimpleLivePreviewManager {
       this.loadUrl();
     });
 
+    // Listen for events from Sidebar component
+    document.addEventListener('preview:refresh', () => this.refreshIframe());
+    document.addEventListener('preview:loadUrl', (e) => {
+      if (e.detail && e.detail.path !== undefined) {
+        this.loadUrlFromPath(e.detail.path);
+      }
+    });
+
+    // Legacy: Listen for sidebar state changes (for backward compatibility)
+    document.addEventListener('sidebar:stateChanged', (e) => {
+      if (e.detail) {
+        this.handleSidebarStateChange(e.detail);
+      }
+    });
+
     // Keyboard shortcuts
     document.addEventListener('keydown', (e) => {
       // Cmd/Ctrl + R for refresh
@@ -69,11 +89,6 @@ class SimpleLivePreviewManager {
         e.preventDefault();
         this.refreshIframe();
       }
-      // Cmd/Ctrl + B to toggle sidebar panel
-      if ((e.metaKey || e.ctrlKey) && e.key === 'b') {
-        e.preventDefault();
-        this.toggleSidebarVisibility();
-      }
     });
 
     // Handle iframe load errors (for X-Frame-Options violations)
@@ -129,55 +144,41 @@ class SimpleLivePreviewManager {
     }
   }
 
-  toggleSidebarVisibility() {
-    this.isSidebarHidden = !this.isSidebarHidden;
+  subscribeToStore() {
+    // Subscribe to sidebar store changes
+    this.store.shouldShowFloatingButton.subscribe(() => this.updateFloatingButton());
+    this.store.isOpen.subscribe(() => this.updateFloatingButton());
     
-    const sidebarPane = document.getElementById('sidebar-pane');
-    const previewPane = document.getElementById(this.id);
+    // Initial update
+    this.updateFloatingButton();
+  }
+
+  updateFloatingButton() {
+    const floatingBtn = this.floatingHideSidebarBtn;
+    const floatingIcon = this.floatingHideSidebarIcon;
+    const shouldShow = this.store.shouldShowFloatingButton.value;
     
-    if (sidebarPane && previewPane) {
-      if (this.isSidebarHidden) {
-        // Hide sidebar pane and make preview full width
-        sidebarPane.style.display = 'none';
-        previewPane.classList.remove('flex-1');
-        previewPane.classList.add('w-full');
-        
-        // Update button icons and titles
-        if (this.hideSidebarIcon) {
-          this.hideSidebarIcon.setAttribute('icon', 'ph:sidebar-simple-fill');
-        }
-        if (this.floatingHideSidebarIcon) {
-          this.floatingHideSidebarIcon.setAttribute('icon', 'ph:sidebar-simple-fill');
-        }
-        if (this.hideSidebarBtn) {
-          this.hideSidebarBtn.setAttribute('title', 'Show Sidebar');
-        }
-        if (this.floatingHideSidebarBtn) {
-          this.floatingHideSidebarBtn.setAttribute('title', 'Show Sidebar');
+    if (floatingBtn) {
+      if (shouldShow) {
+        // Show floating button when sidebar is closed
+        floatingBtn.style.display = 'flex';
+        // Update icon and title
+        if (floatingIcon) {
+          floatingIcon.setAttribute('icon', 'ph:sidebar-simple-fill');
         }
+        floatingBtn.setAttribute('title', 'Show Sidebar');
       } else {
-        // Show sidebar pane and restore original widths
-        sidebarPane.style.display = '';
-        previewPane.classList.remove('w-full');
-        previewPane.classList.add('flex-1');
-        
-        // Update button icons and titles
-        if (this.hideSidebarIcon) {
-          this.hideSidebarIcon.setAttribute('icon', 'ph:sidebar-simple');
-        }
-        if (this.floatingHideSidebarIcon) {
-          this.floatingHideSidebarIcon.setAttribute('icon', 'ph:sidebar-simple');
-        }
-        if (this.hideSidebarBtn) {
-          this.hideSidebarBtn.setAttribute('title', 'Hide Sidebar');
-        }
-        if (this.floatingHideSidebarBtn) {
-          this.floatingHideSidebarBtn.setAttribute('title', 'Hide Sidebar');
-        }
+        // Hide floating button when sidebar is open
+        floatingBtn.style.display = 'none';
       }
     }
   }
 
+  toggleSidebarVisibility() {
+    // Use the store to toggle
+    this.store.toggle();
+  }
+
   refreshIframe() {
     if (this.iframe) {
       console.log('Refreshing iframe...');
@@ -191,7 +192,13 @@ class SimpleLivePreviewManager {
   loadUrl() {
     if (this.urlInput && this.iframe) {
       const path = this.urlInput.value.trim();
-      console.log('loadUrl called with path:', path);
+      this.loadUrlFromPath(path);
+    }
+  }
+
+  loadUrlFromPath(path) {
+    if (this.iframe) {
+      console.log('loadUrlFromPath called with path:', path);
       
       // Check if it's an external URL (starts with http:// or https://)
       if (path.startsWith('http://') || path.startsWith('https://')) {
@@ -201,8 +208,10 @@ class SimpleLivePreviewManager {
           // Open external URLs in a new tab
           console.log('Opening external URL in new tab:', path);
           window.open(path, '_blank');
-          // Clear the input
-          this.urlInput.value = '';
+          // Clear the input if it exists
+          if (this.urlInput) {
+            this.urlInput.value = '';
+          }
           return;
         }
       }
@@ -211,9 +220,20 @@ class SimpleLivePreviewManager {
       const newUrl = path ? baseUrl + '/' + path.replace(/^\//, '') : baseUrl;
       console.log('Loading URL in iframe:', newUrl);
       this.iframe.src = newUrl;
+      
+      // Update input if it exists
+      if (this.urlInput) {
+        this.urlInput.value = path;
+      }
     }
   }
 
+  handleSidebarStateChange(state) {
+    // Legacy method for backward compatibility
+    console.log('Legacy sidebar state changed:', state);
+    // The floating button is now handled by updateFloatingButton()
+  }
+
   handleIframeError() {
     // Get the current iframe src and open it in a new tab if it's external
     if (this.iframe && this.iframe.src) {

package/src/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/src/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;
+}