treesap 0.1.9 → 0.1.11

package/src/static/components/ChatInput.js

@@ -0,0 +1,237 @@
+// ChatInput component JavaScript for chat-style terminal input
+class ChatInputManager {
+  constructor(chatInputId) {
+    this.chatInputId = chatInputId;
+    this.container = document.getElementById(chatInputId);
+    this.textarea = document.getElementById(`${chatInputId}-textarea`);
+    this.sendBtn = document.getElementById(`${chatInputId}-send-btn`);
+    this.executeBtn = document.getElementById(`${chatInputId}-execute-btn`);
+    
+    // Get chat input data from window
+    const chatInputData = window[`chatInputData_${chatInputId.replace(/-/g, '_')}`];
+    if (!chatInputData) {
+      console.error(`No chat input data found for ${chatInputId}`);
+      return;
+    }
+    
+    this.terminalId = chatInputData.terminalId;
+    
+    console.log(`ChatInput ${chatInputId} initialized for terminal:`, this.terminalId);
+    
+    this.init();
+  }
+
+  init() {
+    if (!this.container || !this.textarea || !this.sendBtn || !this.executeBtn) {
+      console.error('ChatInput elements not found!', {
+        container: !!this.container,
+        textarea: !!this.textarea,
+        sendBtn: !!this.sendBtn,
+        executeBtn: !!this.executeBtn
+      });
+      return;
+    }
+
+    this.setupEventListeners();
+    this.setupAutoResize();
+  }
+
+  setupEventListeners() {
+    // Handle send to input button click
+    this.sendBtn.addEventListener('click', () => {
+      this.sendToInput();
+    });
+
+    // Handle execute button click
+    this.executeBtn.addEventListener('click', () => {
+      this.executeCommand();
+    });
+
+    // Handle textarea key events
+    this.textarea.addEventListener('keydown', (e) => {
+      // Enter without shift sends to input field
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        this.sendToInput();
+      }
+      // Ctrl+Enter or Cmd+Enter executes
+      if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        this.executeCommand();
+      }
+      // Allow Shift+Enter for new lines (default behavior)
+    });
+
+    // Handle input to auto-resize textarea
+    this.textarea.addEventListener('input', () => {
+      this.adjustTextareaHeight();
+    });
+
+    // Disable buttons when textarea is empty
+    this.textarea.addEventListener('input', () => {
+      this.updateButtonState();
+    });
+
+    // Focus textarea when container is clicked
+    this.container.addEventListener('click', (e) => {
+      if (e.target === this.container) {
+        this.textarea.focus();
+      }
+    });
+  }
+
+  setupAutoResize() {
+    // Initial state
+    this.adjustTextareaHeight();
+    this.updateButtonState();
+  }
+
+  adjustTextareaHeight() {
+    if (!this.textarea) return;
+
+    // Reset height to auto to get the correct scrollHeight
+    this.textarea.style.height = 'auto';
+    
+    // Calculate the new height based on content
+    const scrollHeight = this.textarea.scrollHeight;
+    const maxHeight = 120; // Max height from CSS
+    const minHeight = 40;  // Min height from CSS
+    
+    const newHeight = Math.min(Math.max(scrollHeight, minHeight), maxHeight);
+    this.textarea.style.height = `${newHeight}px`;
+  }
+
+  updateButtonState() {
+    if (!this.textarea || !this.sendBtn || !this.executeBtn) return;
+
+    const hasContent = this.textarea.value.trim().length > 0;
+    this.sendBtn.disabled = !hasContent;
+    this.executeBtn.disabled = false; // Execute button is always enabled
+  }
+
+  sendToInput() {
+    if (!this.textarea) return;
+
+    const input = this.textarea.value.trim();
+    if (!input) return;
+
+    // Get the terminal manager for the associated terminal
+    const terminalManager = this.getTerminalManager();
+    if (!terminalManager) {
+      console.error(`No terminal manager found for terminal: ${this.terminalId}`);
+      return;
+    }
+
+    // Send the input to the terminal input field (without executing)
+    console.log(`Sending text to terminal input field ${this.terminalId}:`, input);
+    console.log('ChatInput sending (programmatic):', JSON.stringify(input), 'char codes:', input.split('').map(c => c.charCodeAt(0)));
+    
+    // Simplest approach: just send the text directly
+    // This should work for most cases in Claude Code
+    terminalManager.sendInput(input);
+
+    // Clear the textarea
+    this.textarea.value = '';
+    this.adjustTextareaHeight();
+    this.updateButtonState();
+    
+    // Focus back to textarea for next input
+    this.textarea.focus();
+  }
+
+  executeCommand() {
+    // Get the terminal manager for the associated terminal
+    const terminalManager = this.getTerminalManager();
+    if (!terminalManager) {
+      console.error(`No terminal manager found for terminal: ${this.terminalId}`);
+      return;
+    }
+
+    // Execute whatever is currently in the terminal input field
+    console.log(`Executing command in terminal ${this.terminalId}`);
+    console.log('ChatInput executing (programmatic):', JSON.stringify('\r'), 'char code:', '\r'.charCodeAt(0));
+    terminalManager.sendInput('\r');
+  }
+
+  getTerminalManager() {
+    // Access global terminal managers
+    if (window.terminalManagers && window.terminalManagers.has(this.terminalId)) {
+      return window.terminalManagers.get(this.terminalId);
+    }
+
+    // Fallback: try to find by checking all managers
+    if (window.terminalManagers) {
+      for (const [terminalId, manager] of window.terminalManagers.entries()) {
+        if (terminalId === this.terminalId) {
+          return manager;
+        }
+      }
+    }
+
+    // If not found, log available terminals for debugging
+    if (window.terminalManagers) {
+      console.log('Available terminal managers:', Array.from(window.terminalManagers.keys()));
+      console.log('Looking for terminal ID:', this.terminalId);
+    } else {
+      console.log('No terminal managers found in window object');
+    }
+
+    return null;
+  }
+
+  focus() {
+    if (this.textarea) {
+      this.textarea.focus();
+    }
+  }
+
+  destroy() {
+    // Clean up event listeners if needed
+    // The component will be removed from DOM, so most cleanup is automatic
+  }
+}
+
+// Auto-initialize when script loads
+console.log('ChatInput.js loaded, looking for chat input containers...');
+let chatInputManagers = new Map();
+
+function initializeChatInputs() {
+  // Look for all sapling-islands with chat input content
+  const saplingIslands = document.querySelectorAll('sapling-island');
+  
+  for (const island of saplingIslands) {
+    // Look for chat input container
+    const chatInputDiv = island.querySelector('div[id*="chat-input"]');
+    if (chatInputDiv && chatInputDiv.id) {
+      const chatInputId = chatInputDiv.id;
+      console.log('Found chat input component with ID:', chatInputId);
+      
+      // Check if we already have a manager for this chat input
+      if (!chatInputManagers.has(chatInputId)) {
+        const manager = new ChatInputManager(chatInputId);
+        chatInputManagers.set(chatInputId, manager);
+      }
+    }
+  }
+  
+  console.log(`Initialized ${chatInputManagers.size} chat input(s)`);
+}
+
+// Try immediate initialization
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initializeChatInputs);
+} else {
+  initializeChatInputs();
+}
+
+// Make available globally
+window.chatInputManagers = chatInputManagers;
+window.ChatInputManager = ChatInputManager;
+window.initializeChatInputs = initializeChatInputs;
+
+// Cleanup on page unload
+window.addEventListener('beforeunload', () => {
+  for (const manager of chatInputManagers.values()) {
+    manager.destroy();
+  }
+});

package/src/static/components/Sidebar.js

@@ -0,0 +1,225 @@
+// Sidebar component JavaScript for responsive behavior
+import { sidebarStore } from '/signals/SidebarSignal.js';
+
+class SidebarManager {
+  constructor(id = 'sidebar') {
+    this.id = id;
+    
+    // DOM elements
+    this.backdrop = document.getElementById(`${id}-backdrop`);
+    this.pane = document.getElementById(`${id}-pane`);
+    this.closeBtn = document.getElementById(`${id}-close-btn`);
+    this.refreshBtn = document.getElementById('live-preview-refresh-btn');
+    this.urlInput = document.getElementById('live-preview-url-input');
+    this.loadBtn = document.getElementById('live-preview-load-btn');
+    
+    // Reference to the sidebar store
+    this.store = sidebarStore;
+    
+    this.init();
+  }
+
+  init() {
+    console.log('Initializing Sidebar:', this.id);
+    console.log('Elements found:', {
+      backdrop: !!this.backdrop,
+      pane: !!this.pane,
+      closeBtn: !!this.closeBtn,
+      refreshBtn: !!this.refreshBtn,
+      urlInput: !!this.urlInput,
+      loadBtn: !!this.loadBtn
+    });
+    
+    // Set up event listeners
+    this.setupEventListeners();
+    
+    // Subscribe to store state changes
+    this.subscribeToStore();
+    
+    // Initial state update
+    this.updateSidebarState();
+    this.updateMobileToggle();
+  }
+
+  setupEventListeners() {
+    // Mobile close button
+    this.closeBtn?.addEventListener('click', () => this.store.close());
+    
+    // Backdrop click to close
+    this.backdrop?.addEventListener('click', () => this.store.close());
+    
+    // Mobile toggle button (in main layout)
+    const mobileToggle = document.getElementById('mobile-sidebar-toggle');
+    mobileToggle?.addEventListener('click', () => this.store.toggle());
+    
+    // Refresh button
+    this.refreshBtn?.addEventListener('click', () => this.refreshPreview());
+    
+    // URL navigation
+    this.loadBtn?.addEventListener('click', (e) => {
+      e.preventDefault();
+      this.loadUrl();
+    });
+    
+    this.urlInput?.addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        this.loadUrl();
+      }
+    });
+    
+    // Keyboard shortcuts
+    document.addEventListener('keydown', (e) => {
+      // Escape key to close sidebar on mobile
+      if (e.key === 'Escape' && this.store.isMobile.value && this.store.isOpen.value) {
+        e.preventDefault();
+        this.store.close();
+      }
+      
+      // Cmd/Ctrl + B to toggle sidebar
+      if ((e.metaKey || e.ctrlKey) && e.key === 'b') {
+        e.preventDefault();
+        this.store.toggle();
+      }
+    });
+    
+    // Listen for custom events to maintain backward compatibility
+    document.addEventListener('sidebar:toggle', () => this.store.toggle());
+    document.addEventListener('sidebar:open', () => this.store.open());
+    document.addEventListener('sidebar:close', () => this.store.close());
+  }
+
+  subscribeToStore() {
+    // Subscribe to store changes and update UI accordingly
+    this.store.isOpen.subscribe(() => this.updateSidebarState());
+    this.store.isMobile.subscribe(() => this.updateSidebarState());
+    this.store.shouldShowBackdrop.subscribe(() => this.updateSidebarState());
+    this.store.shouldShowMobileToggle.subscribe(() => this.updateMobileToggle());
+  }
+
+  updateSidebarState() {
+    if (!this.pane || !this.backdrop) return;
+    
+    const isOpen = this.store.isOpen.value;
+    const isMobile = this.store.isMobile.value;
+    const shouldShowBackdrop = this.store.shouldShowBackdrop.value;
+    
+    if (isMobile) {
+      // Mobile behavior: overlay
+      if (shouldShowBackdrop) {
+        // Show backdrop
+        this.backdrop.classList.remove('opacity-0', 'pointer-events-none');
+        this.backdrop.classList.add('opacity-100');
+        
+        // Prevent body scroll
+        document.body.style.overflow = 'hidden';
+      } else {
+        // Hide backdrop
+        this.backdrop.classList.remove('opacity-100');
+        this.backdrop.classList.add('opacity-0', 'pointer-events-none');
+        
+        // Restore body scroll
+        document.body.style.overflow = '';
+      }
+      
+      if (isOpen) {
+        // Show sidebar
+        this.pane.classList.remove('-translate-x-full');
+        this.pane.classList.add('translate-x-0');
+      } else {
+        // Hide sidebar
+        this.pane.classList.remove('translate-x-0');
+        this.pane.classList.add('-translate-x-full');
+      }
+    } else {
+      // Desktop behavior: side panel
+      // Hide backdrop (not needed on desktop)
+      this.backdrop.classList.add('opacity-0', 'pointer-events-none');
+      
+      // Restore body scroll
+      document.body.style.overflow = '';
+      
+      if (isOpen) {
+        // Show sidebar
+        this.pane.classList.remove('-translate-x-full');
+        this.pane.classList.add('translate-x-0');
+        this.pane.style.display = '';
+      } else {
+        // Hide sidebar completely on desktop
+        this.pane.style.display = 'none';
+      }
+    }
+  }
+
+  updateMobileToggle() {
+    const mobileToggle = document.getElementById('mobile-sidebar-toggle');
+    const shouldShow = this.store.shouldShowMobileToggle.value;
+    
+    if (mobileToggle) {
+      mobileToggle.style.display = shouldShow ? 'flex' : 'none';
+    }
+  }
+
+  refreshPreview() {
+    // Dispatch event for SimpleLivePreview to handle
+    document.dispatchEvent(new CustomEvent('preview:refresh'));
+  }
+
+  loadUrl() {
+    if (this.urlInput) {
+      const path = this.urlInput.value.trim();
+      // Dispatch event for SimpleLivePreview to handle
+      document.dispatchEvent(new CustomEvent('preview:loadUrl', {
+        detail: { path }
+      }));
+    }
+  }
+
+  // Public API methods
+  getState() {
+    return this.store.getState();
+  }
+
+  destroy() {
+    // Restore body scroll
+    document.body.style.overflow = '';
+    
+    // Clean up is handled by the signal store
+  }
+}
+
+// Auto-initialize when script loads
+console.log('Sidebar.js loaded, looking for sidebar containers...');
+
+function initializeSidebar() {
+  // Look for sapling-islands containing sidebar content
+  const saplingIslands = document.querySelectorAll('sapling-island');
+  
+  for (const island of saplingIslands) {
+    // Look for sidebar pane div
+    const sidebarPane = island.querySelector('div[id$="-pane"]');
+    if (sidebarPane && sidebarPane.id.includes('sidebar')) {
+      const sidebarId = sidebarPane.id.replace('-pane', '');
+      console.log('Found Sidebar component with ID:', sidebarId);
+      
+      // Create and store manager
+      const manager = new SidebarManager(sidebarId);
+      window.sidebarManager = manager; // Make globally available
+      
+      break; // Only one sidebar per page
+    }
+  }
+}
+
+// Initialize immediately since Sapling islands are ready
+initializeSidebar();
+
+// Make available globally
+window.SidebarManager = SidebarManager;
+
+// Cleanup on page unload
+window.addEventListener('beforeunload', () => {
+  if (window.sidebarManager) {
+    window.sidebarManager.destroy();
+  }
+});

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) {