treesap 0.1.8 → 0.1.10

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

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;
 }
@@ -1141,10 +1177,6 @@ video {
   margin-left: 0.5rem;
 }
 
-.mr-1 {
-  margin-right: 0.25rem;
-}
-
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -1221,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);
@@ -1251,10 +1297,6 @@ video {
   justify-content: center;
 }
 
-.gap-1 {
-  gap: 0.25rem;
-}
-
 .gap-2 {
   gap: 0.5rem;
 }
@@ -1367,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));
 }
@@ -1381,10 +1427,6 @@ video {
   --tw-gradient-to: #16a34a var(--tw-gradient-to-position);
 }
 
-.p-0\.5 {
-  padding: 0.125rem;
-}
-
 .p-1 {
   padding: 0.25rem;
 }
@@ -1397,10 +1439,6 @@ video {
   padding: 0.75rem;
 }
 
-.p-4 {
-  padding: 1rem;
-}
-
 .p-6 {
   padding: 1.5rem;
 }
@@ -1409,11 +1447,6 @@ video {
   padding: 2rem;
 }
 
-.px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -1512,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;
 }
@@ -1526,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);
@@ -1538,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));
@@ -1593,11 +1656,34 @@ video {
   outline-offset: 2px;
 }
 
-.disabled\:opacity-50:disabled {
-  opacity: 0.5;
-}
-
 .group:hover .group-hover\:text-white {
   --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.8",
+  "version": "0.1.10",
   "description": "AI Agent Framework",
   "type": "module",
   "main": "dist/index.js",
@@ -37,10 +37,14 @@
     "commander": "^12.1.0",
     "dotenv": "^16.4.7",
     "hono": "^4.9.1",
-    "node-pty": "^1.1.0-beta34"
+    "node-pty": "^1.1.0-beta34",
+    "uuid": "^11.1.0",
+    "ws": "^8.18.3"
   },
   "devDependencies": {
     "@types/node": "^22.15.15",
+    "@types/uuid": "^10.0.0",
+    "@types/ws": "^8.18.1",
     "tailwindcss": "^3.4.17",
     "tsx": "^4.19.2",
     "typescript": "^5.7.3"

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/layouts/Layout.tsx

@@ -14,7 +14,7 @@ export default function BaseLayout(props: BaseLayoutProps) {
         <title>{props.title || "Treesap"}</title>
         <meta name="description" content={props.description || "A modern web application"} />
         <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, interactive-widget=resizes-content" />
         <link rel="stylesheet" href="/styles/main.css" />
         {/* Sapling Islands */}
         <script type="module" src="https://sapling-is.land"></script>