treesap 0.0.2 → 0.1.0

package/dist/services/terminal.js

@@ -0,0 +1,133 @@
+import { EventEmitter } from 'events';
+import * as pty from 'node-pty';
+export class TerminalService {
+    static sessions = new Map();
+    static SESSION_TIMEOUT = 30 * 60 * 1000; // 30 minutes
+    static createSession(sessionId) {
+        // Clean up any existing session with the same ID
+        this.destroySession(sessionId);
+        const eventEmitter = new EventEmitter();
+        // Create a PTY process for proper terminal behavior
+        const ptyProcess = pty.spawn(process.platform === 'win32' ? 'cmd.exe' : process.env.SHELL || '/bin/bash', [], {
+            name: 'xterm-256color',
+            cols: 80,
+            rows: 24,
+            cwd: process.cwd(),
+            env: process.env
+        });
+        const session = {
+            id: sessionId,
+            process: ptyProcess,
+            eventEmitter,
+            createdAt: new Date(),
+            lastActivity: new Date()
+        };
+        // Handle process output
+        ptyProcess.onData((data) => {
+            session.lastActivity = new Date();
+            eventEmitter.emit('output', {
+                type: 'output',
+                content: data
+            });
+        });
+        ptyProcess.onExit((e) => {
+            eventEmitter.emit('output', {
+                type: 'exit',
+                code: e.exitCode
+            });
+            this.destroySession(sessionId);
+        });
+        this.sessions.set(sessionId, session);
+        // Set up session cleanup
+        this.scheduleSessionCleanup(sessionId);
+        return session;
+    }
+    static getSession(sessionId) {
+        return this.sessions.get(sessionId);
+    }
+    static executeCommand(sessionId, command) {
+        const session = this.getSession(sessionId);
+        if (!session) {
+            return false;
+        }
+        try {
+            session.lastActivity = new Date();
+            session.process.write(command + '\n');
+            return true;
+        }
+        catch (error) {
+            console.error(`Error executing command in session ${sessionId}:`, error);
+            return false;
+        }
+    }
+    static destroySession(sessionId) {
+        const session = this.sessions.get(sessionId);
+        if (!session) {
+            return false;
+        }
+        try {
+            // Clean up the PTY process
+            session.process.kill();
+            // Remove event listeners
+            session.eventEmitter.removeAllListeners();
+            // Remove from sessions map
+            this.sessions.delete(sessionId);
+            return true;
+        }
+        catch (error) {
+            console.error(`Error destroying session ${sessionId}:`, error);
+            return false;
+        }
+    }
+    static getAllSessions() {
+        return Array.from(this.sessions.values());
+    }
+    static cleanupExpiredSessions() {
+        const now = new Date();
+        let cleanedCount = 0;
+        for (const [sessionId, session] of this.sessions.entries()) {
+            const timeSinceLastActivity = now.getTime() - session.lastActivity.getTime();
+            if (timeSinceLastActivity > this.SESSION_TIMEOUT) {
+                this.destroySession(sessionId);
+                cleanedCount++;
+            }
+        }
+        return cleanedCount;
+    }
+    static scheduleSessionCleanup(sessionId) {
+        setTimeout(() => {
+            const session = this.getSession(sessionId);
+            if (session) {
+                const timeSinceLastActivity = new Date().getTime() - session.lastActivity.getTime();
+                if (timeSinceLastActivity >= this.SESSION_TIMEOUT) {
+                    console.log(`Cleaning up expired terminal session: ${sessionId}`);
+                    this.destroySession(sessionId);
+                }
+                else {
+                    // Reschedule cleanup
+                    this.scheduleSessionCleanup(sessionId);
+                }
+            }
+        }, this.SESSION_TIMEOUT);
+    }
+    static setupGlobalCleanup() {
+        // Cleanup all sessions on process exit
+        const cleanup = () => {
+            console.log('Cleaning up all terminal sessions...');
+            for (const sessionId of this.sessions.keys()) {
+                this.destroySession(sessionId);
+            }
+        };
+        process.on('SIGINT', cleanup);
+        process.on('SIGTERM', cleanup);
+        process.on('exit', cleanup);
+        // Periodic cleanup of expired sessions
+        setInterval(() => {
+            const cleaned = this.cleanupExpiredSessions();
+            if (cleaned > 0) {
+                console.log(`Cleaned up ${cleaned} expired terminal sessions`);
+            }
+        }, 5 * 60 * 1000); // Every 5 minutes
+    }
+}
+//# sourceMappingURL=terminal.js.map

package/dist/services/terminal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"terminal.js","sourceRoot":"","sources":["../../src/services/terminal.ts"],"names":[],"mappings":"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"}

package/dist/static/components/SimpleLivePreview.js

@@ -0,0 +1,270 @@
+// SimpleLivePreview component JavaScript
+class SimpleLivePreviewManager {
+  constructor(id = 'simple-preview') {
+    this.id = id;
+    
+    // DOM elements
+    this.container = document.getElementById(id);
+    this.hideClaudeBtn = document.getElementById(`${id}-hide-claude-btn`);
+    this.hideClaudeIcon = document.getElementById(`${id}-hide-claude-icon`);
+    this.refreshBtn = document.getElementById(`${id}-refresh-btn`);
+    this.urlInput = document.getElementById(`${id}-url-input`);
+    this.loadBtn = document.getElementById(`${id}-load-btn`);
+    this.iframe = document.getElementById(`${id}-iframe`);
+    
+    // Get preview port from iframe data attribute
+    this.previewPort = this.iframe?.getAttribute('data-preview-port') || 5173;
+    
+    // State
+    this.isClaudeHidden = false;
+    
+    this.init();
+  }
+
+  init() {
+    console.log('Initializing SimpleLivePreview:', this.id);
+    console.log('Elements found:', {
+      container: !!this.container,
+      urlInput: !!this.urlInput,
+      loadBtn: !!this.loadBtn,
+      iframe: !!this.iframe
+    });
+    
+    // Set up event listeners
+    this.setupEventListeners();
+  }
+
+  setupEventListeners() {
+    // Hide Claude toggle
+    this.hideClaudeBtn?.addEventListener('click', () => this.toggleClaudeVisibility());
+
+    // Refresh button
+    this.refreshBtn?.addEventListener('click', () => this.refreshIframe());
+
+    // URL navigation
+    this.loadBtn?.addEventListener('click', (e) => {
+      e.preventDefault();
+      this.loadUrl();
+    });
+    this.urlInput?.addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        this.loadUrl();
+      }
+    });
+
+    // Prevent form submission if input is in a form
+    this.urlInput?.addEventListener('submit', (e) => {
+      e.preventDefault();
+      this.loadUrl();
+    });
+
+    // Keyboard shortcuts
+    document.addEventListener('keydown', (e) => {
+      // Cmd/Ctrl + R for refresh
+      if ((e.metaKey || e.ctrlKey) && e.key === 'r' && this.iframe && this.iframe.closest(`#${this.id}`)) {
+        e.preventDefault();
+        this.refreshIframe();
+      }
+      // Cmd/Ctrl + B to toggle Claude panel
+      if ((e.metaKey || e.ctrlKey) && e.key === 'b') {
+        e.preventDefault();
+        this.toggleClaudeVisibility();
+      }
+    });
+
+    // Handle iframe load errors (for X-Frame-Options violations)
+    if (this.iframe) {
+      // Store the current src to detect external navigation
+      let lastSrc = this.iframe.src;
+      
+      this.iframe.addEventListener('error', (e) => {
+        console.log('Iframe load error, possibly due to X-Frame-Options');
+        this.handleIframeError();
+      });
+
+      // Monitor src changes to catch navigation
+      const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.type === 'attributes' && mutation.attributeName === 'src') {
+            const newSrc = this.iframe.src;
+            console.log('Iframe src changed from', lastSrc, 'to', newSrc);
+            
+            // Check if it's an external URL
+            if (newSrc && (newSrc.startsWith('http://') || newSrc.startsWith('https://'))) {
+              const localServerUrl = `http://localhost:${this.previewPort}`;
+              if (!newSrc.startsWith(localServerUrl)) {
+                console.log('Detected external navigation, redirecting to new tab:', newSrc);
+                // Prevent the navigation by restoring the previous src
+                this.iframe.src = lastSrc;
+                // Open in new tab
+                window.open(newSrc, '_blank');
+                return;
+              }
+            }
+            lastSrc = newSrc;
+          }
+        });
+      });
+      
+      observer.observe(this.iframe, { attributes: true, attributeFilter: ['src'] });
+
+      // Also listen for load events to detect if content failed to load
+      this.iframe.addEventListener('load', () => {
+        try {
+          // Try to access the iframe's location - this will throw if blocked by X-Frame-Options
+          const iframeUrl = this.iframe.contentWindow?.location?.href;
+          if (!iframeUrl || iframeUrl === 'about:blank') {
+            // Might be a blocked frame
+            setTimeout(() => this.checkIframeContent(), 100);
+          }
+        } catch (error) {
+          console.log('Cannot access iframe content, likely blocked by security policy');
+          this.handleIframeError();
+        }
+      });
+    }
+  }
+
+  toggleClaudeVisibility() {
+    this.isClaudeHidden = !this.isClaudeHidden;
+    
+    const terminalPane = document.getElementById('terminal-pane');
+    const previewPane = document.getElementById(this.id);
+    
+    if (terminalPane && previewPane) {
+      if (this.isClaudeHidden) {
+        // Hide terminal pane and make preview full width
+        terminalPane.style.display = 'none';
+        previewPane.classList.remove('flex-1');
+        previewPane.classList.add('w-full');
+        
+        // Update button icon and title
+        if (this.hideClaudeIcon) {
+          this.hideClaudeIcon.setAttribute('icon', 'ph:sidebar-simple-fill');
+        }
+        if (this.hideClaudeBtn) {
+          this.hideClaudeBtn.setAttribute('title', 'Show Terminal');
+        }
+      } else {
+        // Show terminal pane and restore original widths
+        terminalPane.style.display = '';
+        previewPane.classList.remove('w-full');
+        previewPane.classList.add('flex-1');
+        
+        // Update button icon and title
+        if (this.hideClaudeIcon) {
+          this.hideClaudeIcon.setAttribute('icon', 'ph:sidebar-simple');
+        }
+        if (this.hideClaudeBtn) {
+          this.hideClaudeBtn.setAttribute('title', 'Hide Terminal');
+        }
+      }
+    }
+  }
+
+  refreshIframe() {
+    if (this.iframe) {
+      console.log('Refreshing iframe...');
+      // Force reload by adding timestamp
+      const url = new URL(this.iframe.src);
+      url.searchParams.set('_t', Date.now().toString());
+      this.iframe.src = url.toString();
+    }
+  }
+
+  loadUrl() {
+    if (this.urlInput && this.iframe) {
+      const path = this.urlInput.value.trim();
+      console.log('loadUrl called with path:', path);
+      
+      // Check if it's an external URL (starts with http:// or https://)
+      if (path.startsWith('http://') || path.startsWith('https://')) {
+        // Check if it's NOT our local server
+        const localServerUrl = `http://localhost:${this.previewPort}`;
+        if (!path.startsWith(localServerUrl)) {
+          // 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 = '';
+          return;
+        }
+      }
+      
+      const baseUrl = `http://localhost:${this.previewPort}`;
+      const newUrl = path ? baseUrl + '/' + path.replace(/^\//, '') : baseUrl;
+      console.log('Loading URL in iframe:', newUrl);
+      this.iframe.src = newUrl;
+    }
+  }
+
+  handleIframeError() {
+    // Get the current iframe src and open it in a new tab if it's external
+    if (this.iframe && this.iframe.src) {
+      const src = this.iframe.src;
+      if (src.startsWith('http://') || src.startsWith('https://')) {
+        if (!src.startsWith(`http://localhost:${this.previewPort}`)) {
+          console.log('Opening blocked external URL in new tab:', src);
+          window.open(src, '_blank');
+          // Reset iframe to local server
+          this.iframe.src = `http://localhost:${this.previewPort}`;
+          // Clear input if it exists
+          if (this.urlInput) {
+            this.urlInput.value = '';
+          }
+        }
+      }
+    }
+  }
+
+  checkIframeContent() {
+    // Additional check for iframe content accessibility
+    if (this.iframe) {
+      try {
+        const doc = this.iframe.contentDocument;
+        if (!doc || doc.body.innerHTML === '') {
+          this.handleIframeError();
+        }
+      } catch (error) {
+        this.handleIframeError();
+      }
+    }
+  }
+
+  destroy() {
+    // Clean up event listeners if needed
+    // (Optional since Sapling handles cleanup)
+  }
+}
+
+// Auto-initialize when script loads
+console.log('SimpleLivePreview.js loaded, looking for preview containers...');
+
+function initializeSimpleLivePreview() {
+  // Look for all sapling-islands and find the ones with SimpleLivePreview content
+  const saplingIslands = document.querySelectorAll('sapling-island');
+  
+  for (const island of saplingIslands) {
+    // Look for a div with an iframe that has data-preview-port
+    const previewDiv = island.querySelector('div[id] iframe[data-preview-port]');
+    if (previewDiv) {
+      const parentDiv = previewDiv.closest('div[id]');
+      if (parentDiv && parentDiv.id) {
+        console.log('Found SimpleLivePreview component with ID:', parentDiv.id);
+        new SimpleLivePreviewManager(parentDiv.id);
+      }
+    }
+  }
+}
+
+// Initialize immediately since Sapling islands are ready
+initializeSimpleLivePreview();
+
+// Make available globally
+window.SimpleLivePreviewManager = SimpleLivePreviewManager;
+
+// Cleanup on page unload
+window.addEventListener('beforeunload', () => {
+  // Cleanup handled by Sapling automatically
+});

package/dist/static/components/Terminal.js

@@ -0,0 +1,244 @@
+// Terminal component JavaScript using Xterm.js
+import { Terminal } from 'https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/+esm';
+class TerminalManager {
+  constructor(id = 'terminal') {
+    this.id = id;
+    this.container = document.getElementById(id);
+    this.xtermContainer = document.getElementById(`${id}-xterm`);
+    this.resetBtn = document.getElementById(`${id}-reset-btn`);
+    this.status = document.getElementById(`${id}-status`);
+    
+    // Check for passed sessionId, otherwise generate one
+    const passedSessionId = window[`terminalSessionId_${id.replace(/-/g, '_')}`];
+    this.sessionId = passedSessionId || this.generateSessionId();
+    console.log(`Terminal ${id} using sessionId:`, this.sessionId);
+    
+    this.eventSource = null;
+    this.terminal = null;
+    
+    // Share session ID globally for Claude Controller
+    if (typeof window !== 'undefined') {
+      window.sharedTerminalSessionId = this.sessionId;
+      console.log('Terminal session ID shared:', this.sessionId);
+    }
+    
+    this.init();
+  }
+
+  generateSessionId() {
+    return 'terminal_' + Math.random().toString(36).substr(2, 9);
+  }
+
+  init() {
+    console.log('Terminal init called with ID:', this.id);
+    console.log('Container found:', !!this.container);
+    console.log('Xterm container found:', !!this.xtermContainer);
+    
+    if (!this.container || !this.xtermContainer) {
+      console.error('Terminal containers not found! Looking for ID:', this.id);
+      return;
+    }
+
+    // Initialize Xterm.js
+    this.setupXterm();
+    
+    // Set up event listeners
+    this.setupEventListeners();
+    
+    // Connect to terminal stream
+    this.connectToTerminal();
+  }
+
+  setupXterm() {
+    // Create terminal instance with VS Code-like theme
+    this.terminal = new Terminal({
+      cursorBlink: true,
+      fontSize: 12,
+      fontFamily: 'Monaco, Menlo, "Ubuntu Mono", monospace',
+      theme: {
+        background: '#1e1e1e',
+        foreground: '#cccccc',
+        cursor: '#ffffff',
+        cursorAccent: '#1e1e1e',
+        selection: '#ffffff40',
+        black: '#000000',
+        red: '#f14c4c',
+        green: '#23d18b',
+        yellow: '#f5f543',
+        blue: '#3b8eea',
+        magenta: '#d670d6',
+        cyan: '#29b8db',
+        white: '#e5e5e5',
+        brightBlack: '#666666',
+        brightRed: '#f14c4c',
+        brightGreen: '#23d18b',
+        brightYellow: '#f5f543',
+        brightBlue: '#3b8eea',
+        brightMagenta: '#d670d6',
+        brightCyan: '#29b8db',
+        brightWhite: '#ffffff'
+      },
+      scrollback: 1000,
+      tabStopWidth: 4,
+      allowTransparency: false
+    });
+
+    // Open terminal in container
+    this.terminal.open(this.xtermContainer);
+    
+    // Focus terminal
+    this.terminal.focus();
+
+    // Handle terminal input - pass through to shell
+    this.terminal.onData((data) => {
+      // Send all input directly to the shell session
+      this.sendInput(data);
+    });
+
+    // Fit terminal to container
+    this.fitTerminal();
+    
+    // Resize handler
+    window.addEventListener('resize', () => {
+      this.fitTerminal();
+    });
+  }
+
+  fitTerminal() {
+    if (this.terminal && this.xtermContainer) {
+      const containerRect = this.xtermContainer.getBoundingClientRect();
+      const cols = Math.floor(containerRect.width / 7.2); // Approximate character width for 12px font
+      const rows = Math.floor(containerRect.height / 14.4); // Approximate line height for 12px font
+      this.terminal.resize(cols, rows);
+    }
+  }
+
+  setupEventListeners() {
+    // Handle reset button
+    if (this.resetBtn) {
+      this.resetBtn.addEventListener('click', () => {
+        this.clearTerminal();
+      });
+    }
+  }
+
+  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);
+    });
+  }
+
+  connectToTerminal() {
+    if (this.eventSource) {
+      this.eventSource.close();
+    }
+
+    this.updateStatus('Connecting...');
+    
+    this.eventSource = new EventSource(`/terminal/stream/${this.sessionId}`);
+    
+    this.eventSource.onopen = () => {
+      this.updateStatus('Ready');
+    };
+    
+    this.eventSource.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        
+        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');
+        }
+      } catch (error) {
+        console.error('Error parsing terminal data:', error);
+      }
+    };
+    
+    this.eventSource.onerror = (error) => {
+      console.error('Terminal stream error:', error);
+      this.updateStatus('Disconnected');
+      
+      // Attempt to reconnect after a delay
+      setTimeout(() => {
+        if (this.eventSource.readyState === EventSource.CLOSED) {
+          this.connectToTerminal();
+        }
+      }, 3000);
+    };
+  }
+
+  updateStatus(status) {
+    if (this.status) {
+      this.status.textContent = status;
+    }
+  }
+
+  clearTerminal() {
+    if (this.terminal) {
+      this.terminal.clear();
+      this.terminal.writeln('\x1b[36mTerminal cleared\x1b[0m');
+      this.terminal.write('\x1b[32m$ \x1b[0m');
+    }
+  }
+
+  destroy() {
+    if (this.eventSource) {
+      this.eventSource.close();
+    }
+    if (this.terminal) {
+      this.terminal.dispose();
+    }
+  }
+}
+
+// Auto-initialize when script loads
+console.log('Terminal.js loaded, looking for terminal container...');
+let terminalManager;
+
+function initializeTerminal() {
+  // Look for all sapling-islands and find the one with terminal content
+  const saplingIslands = document.querySelectorAll('sapling-island');
+  let terminalId = 'terminal'; // default
+  
+  for (const island of saplingIslands) {
+    // Look for a div with bg-gray-900 class (terminal styling)
+    const terminalDiv = island.querySelector('div.bg-gray-900[id]');
+    if (terminalDiv && terminalDiv.id) {
+      terminalId = terminalDiv.id;
+      console.log('Found terminal component with ID:', terminalId);
+      break;
+    }
+  }
+  
+  console.log('Using terminal ID:', terminalId);
+  terminalManager = new TerminalManager(terminalId);
+}
+
+// Try immediate initialization
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initializeTerminal);
+} else {
+  initializeTerminal();
+}
+
+// Cleanup on page unload
+window.addEventListener('beforeunload', () => {
+  if (terminalManager) {
+    terminalManager.destroy();
+  }
+});

package/dist/static/favicon.svg

@@ -0,0 +1,14 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+  path {
+    fill: black;
+  }
+  @media (prefers-color-scheme: dark) {
+    path {
+      fill: white;
+    }
+  }
+</style>
+<path d="M236.752 231.541L133.378 335.909C129.158 340.169 124.236 342.21 118.61 342.033C112.984 341.855 108.062 339.637 103.842 335.377C99.9747 331.117 97.953 326.147 97.7771 320.467C97.6013 314.787 99.6231 309.817 103.842 305.557L243.081 164.98C245.19 162.85 247.476 161.342 249.937 160.454C252.398 159.567 255.035 159.123 257.848 159.123C260.661 159.123 263.298 159.567 265.76 160.454C268.221 161.342 270.506 162.85 272.616 164.98L411.854 305.557C415.722 309.462 417.656 314.343 417.656 320.201C417.656 326.058 415.722 331.117 411.854 335.377C407.635 339.637 402.624 341.767 396.823 341.767C391.021 341.767 386.011 339.637 381.791 335.377L278.945 231.541V469.564C278.945 475.599 276.923 480.657 272.88 484.74C268.836 488.822 263.826 490.863 257.848 490.863C251.871 490.863 246.86 488.822 242.817 484.74C238.773 480.657 236.752 475.599 236.752 469.564V231.541Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M258 62.2033L388.126 192.329C394.96 199.163 406.04 199.163 412.874 192.329C419.709 185.495 419.709 174.414 412.874 167.58L277.445 32.1512C266.706 21.4118 249.294 21.4118 238.555 32.1512L103.126 167.58C96.2915 174.414 96.2915 185.495 103.126 192.329C109.96 199.163 121.04 199.163 127.874 192.329L258 62.2033Z" fill="currentColor"/>
+</svg>