treesap 0.1.6 → 0.1.8

package/dist/static/styles/main.css

@@ -1113,12 +1113,20 @@ video {
   z-index: 50;
 }
 
-.mb-4 {
-  margin-bottom: 1rem;
+.mb-12 {
+  margin-bottom: 3rem;
+}
+
+.mb-16 {
+  margin-bottom: 4rem;
+}
+
+.mb-3 {
+  margin-bottom: 0.75rem;
 }
 
-.mb-6 {
-  margin-bottom: 1.5rem;
+.mb-4 {
+  margin-bottom: 1rem;
 }
 
 .mb-8 {
@@ -1133,22 +1141,30 @@ video {
   margin-left: 0.5rem;
 }
 
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
 .mr-2 {
   margin-right: 0.5rem;
 }
 
-.block {
-  display: block;
+.mr-4 {
+  margin-right: 1rem;
 }
 
-.inline-block {
-  display: inline-block;
+.block {
+  display: block;
 }
 
 .flex {
   display: flex;
 }
 
+.inline-flex {
+  display: inline-flex;
+}
+
 .hidden {
   display: none;
 }
@@ -1157,6 +1173,14 @@ video {
   height: 2.5rem;
 }
 
+.h-12 {
+  height: 3rem;
+}
+
+.h-8 {
+  height: 2rem;
+}
+
 .h-full {
   height: 100%;
 }
@@ -1173,12 +1197,20 @@ video {
   width: 2.5rem;
 }
 
+.w-12 {
+  width: 3rem;
+}
+
+.w-8 {
+  width: 2rem;
+}
+
 .w-full {
   width: 100%;
 }
 
-.max-w-2xl {
-  max-width: 42rem;
+.min-w-\[140px\] {
+  min-width: 140px;
 }
 
 .flex-1 {
@@ -1219,14 +1251,16 @@ video {
   justify-content: center;
 }
 
+.gap-1 {
+  gap: 0.25rem;
+}
+
 .gap-2 {
   gap: 0.5rem;
 }
 
-.space-y-4 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+.gap-8 {
+  gap: 2rem;
 }
 
 .overflow-hidden {
@@ -1249,6 +1283,11 @@ video {
   border-radius: 0.375rem;
 }
 
+.rounded-t-sm {
+  border-top-left-radius: 0.125rem;
+  border-top-right-radius: 0.125rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -1265,6 +1304,15 @@ video {
   border-right-width: 1px;
 }
 
+.border-t-2 {
+  border-top-width: 2px;
+}
+
+.border-\[\#0e639c\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(14 99 156 / var(--tw-border-opacity, 1));
+}
+
 .border-\[\#3c3c3c\] {
   --tw-border-opacity: 1;
   border-color: rgb(60 60 60 / var(--tw-border-opacity, 1));
@@ -1280,11 +1328,6 @@ video {
   border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
 }
 
-.border-green-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(22 163 74 / var(--tw-border-opacity, 1));
-}
-
 .bg-\[\#1e1e1e\] {
   --tw-bg-opacity: 1;
   background-color: rgb(30 30 30 / var(--tw-bg-opacity, 1));
@@ -1295,6 +1338,11 @@ video {
   background-color: rgb(37 37 38 / var(--tw-bg-opacity, 1));
 }
 
+.bg-\[\#2a2a2a\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(42 42 42 / var(--tw-bg-opacity, 1));
+}
+
 .bg-\[\#2d2d30\] {
   --tw-bg-opacity: 1;
   background-color: rgb(45 45 48 / var(--tw-bg-opacity, 1));
@@ -1305,26 +1353,11 @@ video {
   background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
 }
 
-.bg-gray-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
-}
-
-.bg-gray-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
-}
-
 .bg-gray-900 {
   --tw-bg-opacity: 1;
   background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
 }
 
-.bg-green-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
-}
-
 .bg-transparent {
   background-color: transparent;
 }
@@ -1334,6 +1367,24 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
 
+.bg-gradient-to-br {
+  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
+}
+
+.from-green-400 {
+  --tw-gradient-from: #4ade80 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(74 222 128 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.to-green-600 {
+  --tw-gradient-to: #16a34a var(--tw-gradient-to-position);
+}
+
+.p-0\.5 {
+  padding: 0.125rem;
+}
+
 .p-1 {
   padding: 0.25rem;
 }
@@ -1350,6 +1401,10 @@ video {
   padding: 1rem;
 }
 
+.p-6 {
+  padding: 1.5rem;
+}
+
 .p-8 {
   padding: 2rem;
 }
@@ -1364,11 +1419,6 @@ video {
   padding-right: 0.75rem;
 }
 
-.px-6 {
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-}
-
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -1379,9 +1429,8 @@ video {
   padding-bottom: 0.5rem;
 }
 
-.py-3 {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
+.text-left {
+  text-align: left;
 }
 
 .text-center {
@@ -1392,26 +1441,26 @@ video {
   font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
 .text-4xl {
   font-size: 2.25rem;
   line-height: 2.5rem;
 }
 
-.text-6xl {
-  font-size: 3.75rem;
-  line-height: 1;
-}
-
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
 
-.text-xl {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-}
-
 .font-bold {
   font-weight: 700;
 }
@@ -1438,14 +1487,19 @@ video {
   color: rgb(0 0 0 / var(--tw-text-opacity, 1));
 }
 
-.text-gray-500 {
+.text-gray-300 {
   --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
+}
+
+.text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
 }
 
-.text-gray-600 {
+.text-gray-500 {
   --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
 }
 
 .text-gray-800 {
@@ -1458,10 +1512,8 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
-.shadow-lg {
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+.opacity-50 {
+  opacity: 0.5;
 }
 
 .shadow-xl {
@@ -1500,6 +1552,16 @@ video {
   border-color: rgb(14 99 156 / var(--tw-border-opacity, 1));
 }
 
+.hover\:bg-\[\#2d2d30\]:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(45 45 48 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-\[\#3a3a3a\]:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(58 58 58 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-\[\#3c3c3c\]:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(60 60 60 / var(--tw-bg-opacity, 1));
@@ -1515,11 +1577,6 @@ video {
   background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
 }
 
-.hover\:bg-green-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
-}
-
 .hover\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
@@ -1539,3 +1596,8 @@ video {
 .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));
+}

package/package.json

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

package/src/components/Terminal.tsx

@@ -1,9 +1,11 @@
 interface TerminalProps {
   id?: string;
-  sessionId?: string;
+  index?: number;
 }
 
-export function Terminal({ id = "terminal", sessionId }: TerminalProps) {
+export function Terminal({ id, index = 1 }: TerminalProps) {
+  const terminalId = id || `terminal-${index}`;
+  const sessionId = `terminal-${index}`;
   return (
     <sapling-island loading="visible">
       <template>
@@ -11,23 +13,27 @@ export function Terminal({ id = "terminal", sessionId }: TerminalProps) {
         <script type="module" src="/components/Terminal.js"></script>
       </template>
       
-      <div id={id} class="h-full bg-gray-900 flex font-sans overflow-hidden">
+      <div id={terminalId} class="h-full bg-gray-900 flex font-sans overflow-hidden">
         {/* Terminal Interface */}
         <div class="w-full flex flex-col bg-gray-900 relative">
           {/* Terminal header */}
-          <div id={`${id}-container`} class="h-full flex flex-col">
+          <div id={`${terminalId}-container`} class="h-full flex flex-col">
             
             {/* Xterm.js terminal container */}
             <div class="flex-1 overflow-hidden">
-              <div id={`${id}-xterm`} class="h-full w-full"></div>
+              <div id={`${terminalId}-xterm`} class="h-full w-full"></div>
             </div>
           </div>
         </div>
       </div>
 
       <script dangerouslySetInnerHTML={{__html: `
-        // Pass sessionId to terminal if provided
-        window.terminalSessionId_${id.replace(/-/g, '_')} = '${sessionId || ''}';
+        // Pass terminal data to JavaScript
+        window.terminalData_${terminalId.replace(/-/g, '_')} = {
+          terminalId: '${terminalId}',
+          sessionId: '${sessionId}',
+          index: ${index}
+        };
       `}}></script>
     </sapling-island>
   );

package/src/pages/Code.tsx

@@ -13,21 +13,16 @@ export function Code({ previewPort = 1234, workingDirectory }: TerminalProps) {
       <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]">
-          {/* Back to Home */}
-          <div class="p-3 border-b border-[#3c3c3c]">
-            <a href="/" class="text-[#cccccc] hover:text-white text-sm">← Back to Home</a>
-          </div>
-          
           {/* Preview Controls */}
           <div class="p-3 border-b border-[#3c3c3c] bg-[#2d2d30]">
             <div class="flex items-center gap-2">
-              <button
-                id="live-preview-hide-sidebar-btn"
-                class="p-2 hover:bg-[#3c3c3c] rounded-md transition-colors flex items-center text-[#cccccc] hover:text-white"
-                title="Hide Sidebar"
+              <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 id="live-preview-hide-sidebar-icon" icon="ph:sidebar-simple" width="16" height="16"></iconify-icon>
-              </button>
+                <iconify-icon icon="tabler:arrow-left" width="16" height="16"></iconify-icon>
+              </a>
               <button
                 type="button"
                 id="live-preview-refresh-btn"
@@ -77,11 +72,80 @@ export function Code({ previewPort = 1234, workingDirectory }: TerminalProps) {
           {/* Tab Content */}
           <div class="flex-1 overflow-hidden bg-[#1e1e1e]">
             {/* Terminal Tab Content (Active) */}
-            <div class="h-full p-4">
-              <TerminalComponent 
-                id="terminal" 
-                sessionId="shared-terminal-session"
-              />
+            <div class="h-full flex flex-col">
+              
+              {/* Terminal Tabs Bar */}
+              <div class="border-b border-[#3c3c3c] bg-[#252526] px-3 py-1">
+                <div class="flex items-center gap-1">
+                  {/* Terminal Tab 1 */}
+                  <button
+                    id="terminal-tab-1"
+                    class="terminal-tab flex items-center px-3 py-1 text-sm text-white bg-[#1e1e1e] border-t-2 border-[#0e639c] rounded-t-sm hover:bg-[#2d2d30] transition-colors"
+                    data-terminal-index="1"
+                  >
+                    <iconify-icon icon="tabler:terminal-2" width="14" height="14" class="mr-1"></iconify-icon>
+                    Terminal 1
+                    <button class="ml-2 hover:bg-[#3c3c3c] rounded p-0.5 text-[#cccccc] hover:text-white terminal-close-btn" data-terminal-index="1" style="display: none;">
+                      <iconify-icon icon="tabler:x" width="12" height="12"></iconify-icon>
+                    </button>
+                  </button>
+                  
+                  {/* Terminal Tab 2 */}
+                  <button
+                    id="terminal-tab-2"
+                    class="terminal-tab flex items-center px-3 py-1 text-sm text-[#cccccc] hover:text-white hover:bg-[#2d2d30] transition-colors rounded-t-sm"
+                    data-terminal-index="2"
+                    style="display: none;"
+                  >
+                    <iconify-icon icon="tabler:terminal-2" width="14" height="14" class="mr-1"></iconify-icon>
+                    Terminal 2
+                    <button class="ml-2 hover:bg-[#3c3c3c] rounded p-0.5 text-[#cccccc] hover:text-white terminal-close-btn" data-terminal-index="2">
+                      <iconify-icon icon="tabler:x" width="12" height="12"></iconify-icon>
+                    </button>
+                  </button>
+                  
+                  {/* Terminal Tab 3 */}
+                  <button
+                    id="terminal-tab-3"
+                    class="terminal-tab flex items-center px-3 py-1 text-sm text-[#cccccc] hover:text-white hover:bg-[#2d2d30] transition-colors rounded-t-sm"
+                    data-terminal-index="3"
+                    style="display: none;"
+                  >
+                    <iconify-icon icon="tabler:terminal-2" width="14" height="14" class="mr-1"></iconify-icon>
+                    Terminal 3
+                    <button class="ml-2 hover:bg-[#3c3c3c] rounded p-0.5 text-[#cccccc] hover:text-white terminal-close-btn" data-terminal-index="3">
+                      <iconify-icon icon="tabler:x" width="12" height="12"></iconify-icon>
+                    </button>
+                  </button>
+                  
+                  {/* Add Terminal Button */}
+                  <button
+                    id="add-terminal-btn"
+                    class="flex items-center px-2 py-1 text-sm text-[#cccccc] hover:text-white hover:bg-[#2d2d30] transition-colors rounded"
+                    title="New Terminal"
+                  >
+                    <iconify-icon icon="tabler:plus" width="14" height="14"></iconify-icon>
+                  </button>
+                </div>
+              </div>
+              
+              {/* Terminal Content Area */}
+              <div class="flex-1 overflow-hidden relative">
+                {/* Terminal 1 Container */}
+                <div id="terminal-container-1" class="h-full p-4 terminal-container" data-terminal-index="1">
+                  <TerminalComponent index={1} />
+                </div>
+                
+                {/* Terminal 2 Container */}
+                <div id="terminal-container-2" class="h-full p-4 terminal-container" data-terminal-index="2" style="display: none;">
+                  <TerminalComponent index={2} />
+                </div>
+                
+                {/* Terminal 3 Container */}
+                <div id="terminal-container-3" class="h-full p-4 terminal-container" data-terminal-index="3" style="display: none;">
+                  <TerminalComponent index={3} />
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -89,6 +153,9 @@ export function Code({ previewPort = 1234, workingDirectory }: TerminalProps) {
         {/* Right Pane - Live Preview */}
         <SimpleLivePreview id="live-preview" previewPort={previewPort} />
       </div>
+      
+      {/* Terminal Tabs Management Script */}
+      <script type="module" src="/components/TerminalTabs.js"></script>
     </Layout>
   );
 }

package/src/pages/Welcome.tsx

@@ -3,28 +3,53 @@ import Layout from "../layouts/Layout.js";
 export function Welcome() {
   return (
     <Layout title="Welcome to Treesap">
-      <div class="h-screen flex flex-col items-center justify-center bg-gray-50 p-8">
-        <div class="text-center max-w-2xl">
-          <h1 class="text-6xl font-bold text-gray-800 mb-4">🌳</h1>
-          <h2 class="text-4xl font-bold text-gray-800 mb-6">Welcome to Treesap</h2>
-          <p class="text-xl text-gray-600 mb-8">
-            Your integrated development environment with terminal and live preview.
-          </p>
-          
-          <div class="space-y-4">
-            <a 
-              href="/code" 
-              class="inline-block bg-green-600 hover:bg-green-700 text-white font-semibold py-3 px-6 rounded-lg transition-colors shadow-lg border-2 border-green-600"
-              style="background-color: #16a34a !important; color: white !important; text-decoration: none !important;"
-            >
-              Start Coding →
-            </a>
-            
-            <div class="text-gray-500 text-sm">
-              or navigate to <code class="bg-gray-200 px-2 py-1 rounded">/code</code> to begin
+      <div class="h-screen flex flex-col items-center justify-center bg-[#1e1e1e] text-white p-8">
+        {/* Header with logo and title */}
+        <div class="text-center mb-12">
+          <div class="flex items-center justify-center mb-4">
+            <div class="w-12 h-12 bg-gradient-to-br from-green-400 to-green-600 rounded-lg flex items-center justify-center mr-4">
+              <span class="text-2xl">🌳</span>
+            </div>
+            <div class="text-left">
+              <h1 class="text-3xl font-semibold text-white">Treesap</h1>
+              <p class="text-gray-400 text-sm">Free • Development Environment</p>
             </div>
           </div>
         </div>
+
+        {/* Main action buttons */}
+        <div class="flex gap-8 mb-16">
+          <a 
+            href="/code"
+            class="flex flex-col items-center p-6 bg-[#2a2a2a] hover:bg-[#3a3a3a] rounded-lg transition-colors group min-w-[140px]"
+          >
+            <div class="w-8 h-8 mb-3 text-gray-300 group-hover:text-white transition-colors">
+              <iconify-icon icon="tabler:folder-open" width="32" height="32"></iconify-icon>
+            </div>
+            <span class="text-gray-300 group-hover:text-white transition-colors">Open project</span>
+          </a>
+
+          <button 
+            class="flex flex-col items-center p-6 bg-[#2a2a2a] hover:bg-[#3a3a3a] rounded-lg transition-colors group min-w-[140px] opacity-50 cursor-not-allowed"
+            disabled
+          >
+            <div class="w-8 h-8 mb-3 text-gray-500">
+              <iconify-icon icon="tabler:git-branch" width="32" height="32"></iconify-icon>
+            </div>
+            <span class="text-gray-500">Clone repo</span>
+          </button>
+
+          <button 
+            class="flex flex-col items-center p-6 bg-[#2a2a2a] hover:bg-[#3a3a3a] rounded-lg transition-colors group min-w-[140px] opacity-50 cursor-not-allowed"
+            disabled
+          >
+            <div class="w-8 h-8 mb-3 text-gray-500">
+              <iconify-icon icon="tabler:terminal" width="32" height="32"></iconify-icon>
+            </div>
+            <span class="text-gray-500">Connect via SSH</span>
+          </button>
+        </div>
+
       </div>
     </Layout>
   );

package/src/server.tsx

@@ -235,6 +235,8 @@ export async function startServer(config: TreesapConfig & { autoStartDev?: boole
             controller.enqueue(encoder.encode(`data: ${JSON.stringify(data)}\n\n`));
           } catch (error) {
             console.error('Error sending terminal output:', error);
+            // Remove listener on error to prevent memory leaks
+            session!.eventEmitter.removeListener('output', handleOutput);
           }
         };
 
@@ -242,7 +244,11 @@ export async function startServer(config: TreesapConfig & { autoStartDev?: boole
 
         // Handle client disconnect
         const handleDisconnect = () => {
-          session!.eventEmitter.removeListener('output', handleOutput);
+          try {
+            session!.eventEmitter.removeListener('output', handleOutput);
+          } catch (error) {
+            console.error('Error removing output listener:', error);
+          }
         };
 
         // Clean up on stream close
@@ -262,6 +268,25 @@ export async function startServer(config: TreesapConfig & { autoStartDev?: boole
     });
   });
 
+  // Delete terminal session
+  app.delete("/terminal/session/:sessionId", async (c: Context) => {
+    const sessionId = c.req.param('sessionId');
+    
+    if (!sessionId) {
+      return c.json({ error: "Session ID is required" }, 400);
+    }
+
+    const success = TerminalService.destroySession(sessionId);
+    
+    if (success) {
+      
+      return c.json({ message: `Terminal session ${sessionId} destroyed successfully` });
+    } else {
+      console.log(`Terminal session not found: ${sessionId}`);
+      return c.json({ error: `Terminal session ${sessionId} not found` }, 404);
+    }
+  });
+
   // Claude Code subprocess management
   let claudeCodeManager: DevServerManager | null = null;
 

package/src/services/terminal.ts

@@ -19,6 +19,8 @@ export class TerminalService {
     this.destroySession(sessionId);
 
     const eventEmitter = new EventEmitter();
+    // Increase max listeners to handle multiple terminal tabs and connections
+    eventEmitter.setMaxListeners(20);
     
     // Create a PTY process for proper terminal behavior
     const ptyProcess = pty.spawn(process.platform === 'win32' ? 'cmd.exe' : process.env.SHELL || '/bin/bash', [], {