treesap 0.1.8 → 0.1.10

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,152 +10,25 @@ 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 Headers */}
-          <div class="flex py-2">
-            <button class="px-3 py-2 text-[#cccccc] disabled:opacity-50 cursor-not-allowed flex items-center justify-center">
-              <iconify-icon icon="tabler:folder" width="20" height="20"></iconify-icon>
-            </button>
-            <button class="px-3 py-2 text-[#cccccc] disabled:opacity-50 cursor-not-allowed flex items-center justify-center">
-              <iconify-icon icon="tabler:search" width="20" height="20"></iconify-icon>
-            </button>
-            <button class="px-3 py-2 text-white flex items-center justify-center">
-              <iconify-icon icon="tabler:terminal" width="20" height="20"></iconify-icon>
-            </button>
-            <button class="px-3 py-2 text-[#cccccc] disabled:opacity-50 cursor-not-allowed flex items-center justify-center">
-              <iconify-icon icon="tabler:git-merge" width="20" height="20"></iconify-icon>
-            </button>
-          </div>
-          
-          {/* Tab Content */}
-          <div class="flex-1 overflow-hidden bg-[#1e1e1e]">
-            {/* Terminal Tab Content (Active) */}
-            <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>
+      <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>
-      
-      {/* Terminal Tabs Management Script */}
-      <script type="module" src="/components/TerminalTabs.js"></script>
     </Layout>
   );
 }

package/src/server.tsx

@@ -6,9 +6,11 @@ import { Welcome } from "./pages/Welcome.js";
 import { Code } from "./pages/Code.js";
 import { DevServerManager } from "./services/dev-server.js";
 import { TerminalService } from "./services/terminal.js";
+import { WebSocketTerminalService } from "./services/websocket.js";
 import * as path from 'node:path';
 import process from "node:process";
 import { fileURLToPath } from 'node:url';
+import type { Server } from 'http';
 
 export interface TreesapConfig {
   port?: number;
@@ -144,15 +146,90 @@ export async function startServer(config: TreesapConfig & { autoStartDev?: boole
     return c.json({ logs });
   });
 
-  // List active terminal sessions
+  // List active terminal sessions with WebSocket client info
   app.get("/api/terminal/sessions", (c: Context) => {
     const sessions = TerminalService.getAllSessions();
+    const wsActiveSessions = WebSocketTerminalService.getActiveSessions();
+    
+    return c.json({
+      sessions: sessions.map(session => {
+        const wsInfo = wsActiveSessions.find(ws => ws.sessionId === session.id);
+        return {
+          id: session.id,
+          createdAt: session.createdAt,
+          lastActivity: session.lastActivity,
+          connectedClients: wsInfo ? wsInfo.clientCount : 0
+        };
+      }),
+      totalConnectedClients: WebSocketTerminalService.getConnectedClients()
+    });
+  });
+
+  // Get specific terminal session status
+  app.get("/api/terminal/sessions/:sessionId/status", (c: Context) => {
+    const sessionId = c.req.param('sessionId');
+    const session = TerminalService.getSession(sessionId);
+    
+    if (!session) {
+      return c.json({ error: "Session not found" }, 404);
+    }
+
+    const clients = WebSocketTerminalService.getSessionClients(sessionId);
+    
+    return c.json({
+      id: session.id,
+      createdAt: session.createdAt,
+      lastActivity: session.lastActivity,
+      connectedClients: clients.length,
+      clientIds: clients
+    });
+  });
+
+  // Send command to terminal via API
+  app.post("/api/terminal/sessions/:sessionId/command", async (c: Context) => {
+    const sessionId = c.req.param('sessionId');
+    const body = await c.req.json();
+    const { command } = body;
+
+    if (!command) {
+      return c.json({ error: "Command is required" }, 400);
+    }
+
+    // Get or create terminal session
+    let session = TerminalService.getSession(sessionId);
+    if (!session) {
+      session = TerminalService.createSession(sessionId);
+    }
+
+    const success = WebSocketTerminalService.sendCommandToSession(sessionId, command);
+    
+    if (success) {
+      return c.json({ 
+        success: true, 
+        message: `Command sent to session ${sessionId}`,
+        connectedClients: WebSocketTerminalService.getSessionClients(sessionId).length
+      });
+    } else {
+      return c.json({ error: "Failed to send command to terminal" }, 500);
+    }
+  });
+
+  // Get recent output from terminal session (for API clients)
+  app.get("/api/terminal/sessions/:sessionId/output", async (c: Context) => {
+    const sessionId = c.req.param('sessionId');
+    const session = TerminalService.getSession(sessionId);
+    
+    if (!session) {
+      return c.json({ error: "Session not found" }, 404);
+    }
+
+    // Note: This is a basic implementation. For production, you'd want to
+    // store recent output history in the TerminalService
     return c.json({
-      sessions: sessions.map(session => ({
-        id: session.id,
-        createdAt: session.createdAt,
-        lastActivity: session.lastActivity
-      }))
+      sessionId,
+      message: "Output streaming available via WebSocket connection",
+      connectedClients: WebSocketTerminalService.getSessionClients(sessionId).length,
+      websocketUrl: `ws://${c.req.header('host')}/terminal/ws`
     });
   });
 
@@ -371,11 +448,23 @@ export async function startServer(config: TreesapConfig & { autoStartDev?: boole
 
   const { serve } = await import('@hono/node-server');
   
+  // Start the server and initialize WebSocket
+  const server = serve({
+    fetch: app.fetch,
+    port,
+  }) as Server;
+  
+  // Initialize WebSocket service
+  WebSocketTerminalService.initialize(server);
+  
   // Setup global graceful shutdown for all subprocess managers
   const setupGlobalShutdown = () => {
     const cleanup = async () => {
       console.log('\n🛑 Shutting down server and all subprocesses...');
       
+      // Clean up WebSocket connections
+      WebSocketTerminalService.cleanup();
+      
       // Stop Claude Code process if running
       if (claudeCodeManager) {
         try {
@@ -425,10 +514,6 @@ export async function startServer(config: TreesapConfig & { autoStartDev?: boole
   // Initialize terminal service cleanup
   TerminalService.setupGlobalCleanup();
   
-  serve({
-    fetch: app.fetch,
-    port,
-  });
-  
-  console.log(`\n🌳 Treesap server running at http://localhost:${port}\n`);
+  console.log(`\n🌳 Treesap server running at http://localhost:${port}`);
+  console.log(`🔌 WebSocket terminal server available at ws://localhost:${port}/terminal/ws\n`);
 }

package/src/services/terminal.ts

@@ -1,6 +1,9 @@
 import { spawn, ChildProcess } from 'child_process';
 import { EventEmitter } from 'events';
 import * as pty from 'node-pty';
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import * as os from 'node:os';
 
 export interface TerminalSession {
   id: string;
@@ -8,13 +11,29 @@ export interface TerminalSession {
   eventEmitter: EventEmitter;
   createdAt: Date;
   lastActivity: Date;
+  cwd?: string;
+  env?: Record<string, string>;
+  cols?: number;
+  rows?: number;
+}
+
+export interface PersistedSessionData {
+  id: string;
+  createdAt: string;
+  lastActivity: string;
+  cwd: string;
+  env: Record<string, string>;
+  cols: number;
+  rows: number;
 }
 
 export class TerminalService {
   private static sessions = new Map<string, TerminalSession>();
   private static readonly SESSION_TIMEOUT = 30 * 60 * 1000; // 30 minutes
+  private static readonly PERSISTENCE_DIR = path.join(os.tmpdir(), '.treesap-terminals');
+  private static readonly SESSIONS_FILE = path.join(this.PERSISTENCE_DIR, 'sessions.json');
 
-  static createSession(sessionId: string): TerminalSession {
+  static createSession(sessionId: string, options?: { cwd?: string; cols?: number; rows?: number }): TerminalSession {
     // Clean up any existing session with the same ID
     this.destroySession(sessionId);
 
@@ -22,13 +41,26 @@ export class TerminalService {
     // Increase max listeners to handle multiple terminal tabs and connections
     eventEmitter.setMaxListeners(20);
     
+    // Use provided options or defaults
+    const cwd = options?.cwd || process.cwd();
+    const cols = options?.cols || 80;
+    const rows = options?.rows || 24;
+    const env: Record<string, string> = {};
+    
+    // Filter out undefined values from process.env
+    for (const [key, value] of Object.entries(process.env)) {
+      if (value !== undefined) {
+        env[key] = value;
+      }
+    }
+    
     // 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
+      cols,
+      rows,
+      cwd,
+      env
     });
 
     const session: TerminalSession = {
@@ -36,7 +68,11 @@ export class TerminalService {
       process: ptyProcess,
       eventEmitter,
       createdAt: new Date(),
-      lastActivity: new Date()
+      lastActivity: new Date(),
+      cwd,
+      env,
+      cols,
+      rows
     };
 
     // Handle process output
@@ -60,6 +96,9 @@ export class TerminalService {
     
     // Set up session cleanup
     this.scheduleSessionCleanup(sessionId);
+    
+    // Persist session data
+    this.persistSessionData(session);
 
     return session;
   }
@@ -100,6 +139,9 @@ export class TerminalService {
       // Remove from sessions map
       this.sessions.delete(sessionId);
       
+      // Remove from persistent storage
+      this.removePersistedSession(sessionId);
+      
       return true;
     } catch (error) {
       console.error(`Error destroying session ${sessionId}:`, error);
@@ -144,6 +186,9 @@ export class TerminalService {
   }
 
   static setupGlobalCleanup(): void {
+    // Load persisted sessions on startup
+    this.loadPersistedSessions();
+
     // Cleanup all sessions on process exit
     const cleanup = () => {
       console.log('Cleaning up all terminal sessions...');
@@ -164,4 +209,117 @@ export class TerminalService {
       }
     }, 5 * 60 * 1000); // Every 5 minutes
   }
+
+  // Persistence methods
+  private static ensurePersistenceDir(): void {
+    try {
+      if (!fs.existsSync(this.PERSISTENCE_DIR)) {
+        fs.mkdirSync(this.PERSISTENCE_DIR, { recursive: true });
+      }
+    } catch (error) {
+      console.error('Error creating persistence directory:', error);
+    }
+  }
+
+  private static persistSessionData(session: TerminalSession): void {
+    try {
+      this.ensurePersistenceDir();
+      
+      const sessionData: PersistedSessionData = {
+        id: session.id,
+        createdAt: session.createdAt.toISOString(),
+        lastActivity: session.lastActivity.toISOString(),
+        cwd: session.cwd || process.cwd(),
+        env: session.env || (() => {
+          const env: Record<string, string> = {};
+          for (const [key, value] of Object.entries(process.env)) {
+            if (value !== undefined) {
+              env[key] = value;
+            }
+          }
+          return env;
+        })(),
+        cols: session.cols || 80,
+        rows: session.rows || 24
+      };
+
+      let existingData: PersistedSessionData[] = [];
+      if (fs.existsSync(this.SESSIONS_FILE)) {
+        const content = fs.readFileSync(this.SESSIONS_FILE, 'utf8');
+        if (content.trim()) {
+          existingData = JSON.parse(content);
+        }
+      }
+
+      // Remove existing session data if present
+      existingData = existingData.filter(s => s.id !== session.id);
+      
+      // Add new session data
+      existingData.push(sessionData);
+
+      fs.writeFileSync(this.SESSIONS_FILE, JSON.stringify(existingData, null, 2));
+    } catch (error) {
+      console.error('Error persisting session data:', error);
+    }
+  }
+
+  private static removePersistedSession(sessionId: string): void {
+    try {
+      if (!fs.existsSync(this.SESSIONS_FILE)) return;
+
+      const content = fs.readFileSync(this.SESSIONS_FILE, 'utf8');
+      if (!content.trim()) return;
+
+      let existingData: PersistedSessionData[] = JSON.parse(content);
+      existingData = existingData.filter(s => s.id !== sessionId);
+
+      fs.writeFileSync(this.SESSIONS_FILE, JSON.stringify(existingData, null, 2));
+    } catch (error) {
+      console.error('Error removing persisted session:', error);
+    }
+  }
+
+  private static loadPersistedSessions(): void {
+    try {
+      if (!fs.existsSync(this.SESSIONS_FILE)) return;
+
+      const content = fs.readFileSync(this.SESSIONS_FILE, 'utf8');
+      if (!content.trim()) return;
+
+      const persistedSessions: PersistedSessionData[] = JSON.parse(content);
+      
+      console.log(`Found ${persistedSessions.length} persisted terminal session(s)`);
+
+      for (const sessionData of persistedSessions) {
+        // Check if session is not too old
+        const lastActivity = new Date(sessionData.lastActivity);
+        const timeSinceLastActivity = Date.now() - lastActivity.getTime();
+        
+        if (timeSinceLastActivity < this.SESSION_TIMEOUT) {
+          console.log(`Restoring terminal session: ${sessionData.id}`);
+          
+          // Create new session with the persisted options
+          this.createSession(sessionData.id, {
+            cwd: sessionData.cwd,
+            cols: sessionData.cols,
+            rows: sessionData.rows
+          });
+        } else {
+          console.log(`Skipping expired session: ${sessionData.id}`);
+          this.removePersistedSession(sessionData.id);
+        }
+      }
+    } catch (error) {
+      console.error('Error loading persisted sessions:', error);
+    }
+  }
+
+  // Update session activity and persist
+  static updateSessionActivity(sessionId: string): void {
+    const session = this.getSession(sessionId);
+    if (session) {
+      session.lastActivity = new Date();
+      this.persistSessionData(session);
+    }
+  }
 }