treesap 0.1.9 → 0.1.10

package/dist/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "treesap",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "AI Agent Framework",
   "type": "module",
   "main": "dist/index.js",

package/src/components/Sidebar.tsx

@@ -0,0 +1,92 @@
+import { Terminal as TerminalComponent } from "./Terminal.js";
+
+interface SidebarProps {
+  id?: string;
+  previewPort?: number;
+  workingDirectory?: string;
+}
+
+export function Sidebar({ id = "sidebar", previewPort = 1234, workingDirectory }: SidebarProps) {
+  return (
+    <sapling-island loading="visible">
+      <template>
+        <script type="module" src="https://code.iconify.design/iconify-icon/2.0.0/iconify-icon.min.js"></script>
+        <script type="module" src="/components/Sidebar.js"></script>
+      </template>
+
+      {/* Mobile backdrop */}
+      <div 
+        id={`${id}-backdrop`}
+        class="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm z-40 transition-opacity duration-300 opacity-0 pointer-events-none md:hidden"
+      ></div>
+
+      {/* Sidebar container */}
+      <div 
+        id={`${id}-pane`}
+        class="fixed left-0 top-0 h-full w-full z-50 transform -translate-x-full transition-transform duration-300 ease-in-out md:relative md:translate-x-0 md:w-2/5 md:z-auto border-r border-[#3c3c3c] flex flex-col bg-[#252526]"
+      >
+        {/* Preview Controls */}
+        <div class="p-3 border-b border-[#3c3c3c] bg-[#2d2d30] flex-shrink-0">
+          <div class="flex items-center gap-2">
+            {/* Mobile close button */}
+            <button
+              type="button"
+              id={`${id}-close-btn`}
+              class="p-2 hover:bg-[#3c3c3c] rounded-md transition-colors flex-shrink-0 text-[#cccccc] hover:text-white md:hidden"
+              title="Close Sidebar"
+            >
+              <iconify-icon icon="tabler:x" width="16" height="16"></iconify-icon>
+            </button>
+            
+            {/* Back to Home */}
+            <a
+              href="/"
+              class="p-2 hover:bg-[#3c3c3c] rounded-md transition-colors flex-shrink-0 text-[#cccccc] hover:text-white"
+              title="Back to Home"
+            >
+              <iconify-icon icon="tabler:arrow-left" width="16" height="16"></iconify-icon>
+            </a>
+            
+            {/* Refresh button */}
+            <button
+              type="button"
+              id="live-preview-refresh-btn"
+              class="p-2 hover:bg-[#3c3c3c] rounded-md transition-colors flex-shrink-0 text-[#cccccc] hover:text-white"
+              title="Reload"
+            >
+              <iconify-icon icon="tabler:refresh" width="16" height="16"></iconify-icon>
+            </button>
+            
+            {/* URL input */}
+            <div class="flex-1 flex items-center bg-[#1e1e1e] border border-[#3c3c3c] rounded px-3 py-2 hover:border-[#0e639c] focus-within:border-[#0e639c] transition-all">
+              <iconify-icon icon="tabler:world" width="16" height="16" class="text-[#cccccc] mr-2"></iconify-icon>
+              <span class="text-[#cccccc] text-sm">localhost:{previewPort}/</span>
+              <input
+                id="live-preview-url-input"
+                type="text"
+                placeholder="path"
+                defaultValue=""
+                class="flex-1 bg-transparent text-sm focus:outline-none text-[#cccccc] ml-1"
+              />
+              <button
+                type="button"
+                id="live-preview-load-btn"
+                class="ml-2 p-1 hover:bg-[#3c3c3c] rounded transition-colors flex-shrink-0 text-[#cccccc] hover:text-white"
+                title="Go"
+              >
+                <iconify-icon icon="tabler:chevron-right" width="16" height="16"></iconify-icon>
+              </button>
+            </div>
+          </div>
+        </div>
+        
+        {/* Terminal Content */}
+        <div class="flex-1 overflow-hidden bg-[#1e1e1e]">
+          <div class="h-full">
+            <TerminalComponent index={1} />
+          </div>
+        </div>
+      </div>
+    </sapling-island>
+  );
+}

package/src/components/SimpleLivePreview.tsx

@@ -25,14 +25,14 @@ export function SimpleLivePreview({ id = "simple-preview", previewPort = 5173 }:
           data-preview-port={previewPort}
         ></iframe>
         
-        {/* Floating Sidebar Toggle */}
+        {/* Floating Sidebar Toggle - Only show when sidebar is closed */}
         <button
           id={`${id}-floating-hide-sidebar-btn`}
-          class="absolute p-3 bg-white border-2 border-gray-400 rounded-lg shadow-xl hover:bg-gray-50 hover:shadow-2xl transition-all flex items-center justify-center z-50"
-          title="Toggle Sidebar"
+          class="absolute p-3 bg-white border-2 border-gray-400 rounded-lg shadow-xl hover:bg-gray-50 hover:shadow-2xl transition-all items-center justify-center z-50 hidden"
+          title="Show Sidebar"
           style="position: absolute !important; z-index: 9999 !important; bottom: 16px; left: 16px;"
         >
-          <iconify-icon id={`${id}-floating-hide-sidebar-icon`} icon="ph:sidebar-simple" width="20" height="20" class="text-gray-800"></iconify-icon>
+          <iconify-icon id={`${id}-floating-hide-sidebar-icon`} icon="ph:sidebar-simple-fill" width="20" height="20" class="text-gray-800"></iconify-icon>
         </button>
       </div>
     </sapling-island>

package/src/pages/Code.tsx

@@ -1,5 +1,5 @@
 import Layout from "../layouts/Layout.js";
-import { Terminal as TerminalComponent } from "../components/Terminal.js";
+import { Sidebar } from "../components/Sidebar.js";
 import { SimpleLivePreview } from "../components/SimpleLivePreview.js";
 
 interface TerminalProps {
@@ -10,61 +10,24 @@ interface TerminalProps {
 export function Code({ previewPort = 1234, workingDirectory }: TerminalProps) {
   return (
     <Layout title="Code Editor">
-      <div id="code-container" class="h-screen flex bg-[#1e1e1e]">
-        {/* Left Pane - Tabbed Sidebar */}
-        <div id="sidebar-pane" class="w-2/5-plus border-r border-[#3c3c3c] transition-all duration-300 flex flex-col bg-[#252526]">
-          {/* Preview Controls */}
-          <div class="p-3 border-b border-[#3c3c3c] bg-[#2d2d30]">
-            <div class="flex items-center gap-2">
-              <a
-                href="/"
-                class="p-2 hover:bg-[#3c3c3c] rounded-md transition-colors flex-shrink-0 text-[#cccccc] hover:text-white"
-                title="Back to Home"
-              >
-                <iconify-icon icon="tabler:arrow-left" width="16" height="16"></iconify-icon>
-              </a>
-              <button
-                type="button"
-                id="live-preview-refresh-btn"
-                class="p-2 hover:bg-[#3c3c3c] rounded-md transition-colors flex-shrink-0 text-[#cccccc] hover:text-white"
-                title="Reload"
-              >
-                <iconify-icon icon="tabler:refresh" width="16" height="16"></iconify-icon>
-              </button>
-              <div class="flex-1 flex items-center bg-[#1e1e1e] border border-[#3c3c3c] rounded px-3 py-2 hover:border-[#0e639c] focus-within:border-[#0e639c] transition-all">
-                <iconify-icon icon="tabler:world" width="16" height="16" class="text-[#cccccc] mr-2"></iconify-icon>
-                <span class="text-[#cccccc] text-sm">localhost:{previewPort}/</span>
-                <input
-                  id="live-preview-url-input"
-                  type="text"
-                  placeholder="path"
-                  defaultValue=""
-                  class="flex-1 bg-transparent text-sm focus:outline-none text-[#cccccc] ml-1"
-                />
-                <button
-                  type="button"
-                  id="live-preview-load-btn"
-                  class="ml-2 p-1 hover:bg-[#3c3c3c] rounded transition-colors flex-shrink-0 text-[#cccccc] hover:text-white"
-                  title="Go"
-                >
-                  <iconify-icon icon="tabler:chevron-right" width="16" height="16"></iconify-icon>
-                </button>
-              </div>
-            </div>
-          </div>
-          
-          
-          {/* Tab Content */}
-          <div class="flex-1 overflow-hidden bg-[#1e1e1e]">
-            {/* Single Terminal Content */}
-            <div class="h-full">
-              <TerminalComponent index={1} />
-            </div>
-          </div>
-        </div>
+      <div id="code-container" class="h-screen flex bg-[#1e1e1e] relative">
+        {/* Mobile toggle button */}
+        <button
+          type="button"
+          id="mobile-sidebar-toggle"
+          class="fixed top-4 left-4 z-60 p-3 bg-[#2d2d30] border border-[#3c3c3c] rounded-lg shadow-xl hover:bg-[#3c3c3c] transition-all md:hidden"
+          title="Toggle Sidebar"
+        >
+          <iconify-icon icon="tabler:menu-2" width="20" height="20" class="text-[#cccccc]"></iconify-icon>
+        </button>
+
+        {/* Sidebar */}
+        <Sidebar id="sidebar" previewPort={previewPort} workingDirectory={workingDirectory} />
         
-        {/* Right Pane - Live Preview */}
-        <SimpleLivePreview id="live-preview" previewPort={previewPort} />
+        {/* Main Content - Live Preview */}
+        <div class="flex-1 md:flex-1">
+          <SimpleLivePreview id="live-preview" previewPort={previewPort} />
+        </div>
       </div>
     </Layout>
   );

package/src/services/websocket.ts

@@ -104,8 +104,6 @@ export class WebSocketTerminalService {
         return;
       }
 
-      console.log(`Received message from ${clientId}:`, message.type, message.sessionId);
-
       switch (message.type) {
         case 'join':
           this.handleJoin(clientId, message);
@@ -186,9 +184,7 @@ export class WebSocketTerminalService {
 
   private static handleInput(clientId: string, message: WebSocketMessage) {
     const client = this.clients.get(clientId);
-    if (!client || !message.sessionId || message.data === undefined) return;
-
-    console.log(`Input from client ${clientId} to session ${message.sessionId}`);
+    if (!client || !message.sessionId || message.data === undefined) return;;
 
     // Get the terminal session
     const session = TerminalService.getSession(message.sessionId);

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();
+  }
+});