treesap 0.1.9 → 0.1.11

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;
 }
@@ -1185,6 +1221,14 @@ video {
   height: 100vh;
 }
 
+.max-h-\[120px\] {
+  max-height: 120px;
+}
+
+.min-h-\[40px\] {
+  min-height: 40px;
+}
+
 .min-h-screen {
   min-height: 100vh;
 }
@@ -1217,6 +1261,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);
@@ -1231,6 +1289,10 @@ video {
   cursor: not-allowed;
 }
 
+.resize-none {
+  resize: none;
+}
+
 .resize {
   resize: both;
 }
@@ -1239,6 +1301,10 @@ video {
   flex-direction: column;
 }
 
+.items-end {
+  align-items: flex-end;
+}
+
 .items-center {
   align-items: center;
 }
@@ -1296,6 +1362,10 @@ video {
   border-right-width: 1px;
 }
 
+.border-t {
+  border-top-width: 1px;
+}
+
 .border-t-2 {
   border-top-width: 2px;
 }
@@ -1320,6 +1390,11 @@ video {
   border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
 }
 
+.bg-\[\#0e639c\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(14 99 156 / var(--tw-bg-opacity, 1));
+}
+
 .bg-\[\#1e1e1e\] {
   --tw-bg-opacity: 1;
   background-color: rgb(30 30 30 / var(--tw-bg-opacity, 1));
@@ -1330,6 +1405,11 @@ video {
   background-color: rgb(37 37 38 / var(--tw-bg-opacity, 1));
 }
 
+.bg-\[\#28a745\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(40 167 69 / var(--tw-bg-opacity, 1));
+}
+
 .bg-\[\#2a2a2a\] {
   --tw-bg-opacity: 1;
   background-color: rgb(42 42 42 / var(--tw-bg-opacity, 1));
@@ -1359,6 +1439,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));
 }
@@ -1416,6 +1500,10 @@ video {
   text-align: center;
 }
 
+.font-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
 .font-sans {
   font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
@@ -1491,6 +1579,24 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
+.placeholder-\[\#888\]::-moz-placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(136 136 136 / var(--tw-placeholder-opacity, 1));
+}
+
+.placeholder-\[\#888\]::placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(136 136 136 / var(--tw-placeholder-opacity, 1));
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-100 {
+  opacity: 1;
+}
+
 .opacity-50 {
   opacity: 0.5;
 }
@@ -1505,6 +1611,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 +1629,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));
@@ -1531,6 +1659,16 @@ video {
   border-color: rgb(14 99 156 / var(--tw-border-opacity, 1));
 }
 
+.hover\:bg-\[\#1177bb\]:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 119 187 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-\[\#218838\]:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(33 136 56 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-\[\#2d2d30\]:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(45 45 48 / var(--tw-bg-opacity, 1));
@@ -1567,12 +1705,54 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.focus\:border-\[\#0e639c\]:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(14 99 156 / var(--tw-border-opacity, 1));
+}
+
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
 
+.disabled\:bg-\[\#3c3c3c\]:disabled {
+  --tw-bg-opacity: 1;
+  background-color: rgb(60 60 60 / var(--tw-bg-opacity, 1));
+}
+
+.disabled\:text-\[\#888\]:disabled {
+  --tw-text-opacity: 1;
+  color: rgb(136 136 136 / var(--tw-text-opacity, 1));
+}
+
 .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.9",
+  "version": "0.1.11",
   "description": "AI Agent Framework",
   "type": "module",
   "main": "dist/index.js",

package/src/components/ChatInput.tsx

@@ -0,0 +1,56 @@
+interface ChatInputProps {
+  id?: string;
+  terminalId?: string;
+}
+
+export function ChatInput({ id = "chat-input", terminalId = "terminal-1" }: ChatInputProps) {
+  return (
+    <sapling-island loading="visible">
+      <template>
+        <script type="module" src="/components/ChatInput.js"></script>
+      </template>
+      
+      <div id={id} class="border-t border-[#3c3c3c] bg-[#2d2d30] p-3">
+        <div class="flex items-end gap-2">
+          {/* Textarea for multi-line input */}
+          <div class="flex-1 relative">
+            <textarea
+              id={`${id}-textarea`}
+              placeholder="Type your command or message..."
+              class="w-full min-h-[40px] max-h-[120px] px-3 py-2 bg-[#1e1e1e] border border-[#3c3c3c] rounded-lg text-[#cccccc] placeholder-[#888] resize-none focus:outline-none focus:border-[#0e639c] transition-colors text-sm font-mono"
+              rows={1}
+            ></textarea>
+          </div>
+          
+          {/* Send to Input button */}
+          <button
+            type="button"
+            id={`${id}-send-btn`}
+            class="px-3 py-2 bg-[#0e639c] hover:bg-[#1177bb] disabled:bg-[#3c3c3c] disabled:text-[#888] text-white rounded-lg transition-colors flex-shrink-0 flex items-center justify-center min-h-[40px]"
+            title="Send to Input Field"
+          >
+            <iconify-icon icon="tabler:arrow-up" width="16" height="16"></iconify-icon>
+          </button>
+          
+          {/* Execute button */}
+          <button
+            type="button"
+            id={`${id}-execute-btn`}
+            class="px-3 py-2 bg-[#28a745] hover:bg-[#218838] disabled:bg-[#3c3c3c] disabled:text-[#888] text-white rounded-lg transition-colors flex-shrink-0 flex items-center justify-center min-h-[40px]"
+            title="Execute Command"
+          >
+            <iconify-icon icon="tabler:player-play" width="16" height="16"></iconify-icon>
+          </button>
+        </div>
+      </div>
+
+      <script dangerouslySetInnerHTML={{__html: `
+        // Pass chat input data to JavaScript
+        window.chatInputData_${id.replace(/-/g, '_')} = {
+          chatInputId: '${id}',
+          terminalId: '${terminalId}'
+        };
+      `}}></script>
+    </sapling-island>
+  );
+}

package/src/components/Sidebar.tsx

@@ -0,0 +1,99 @@
+import { Terminal as TerminalComponent } from "./Terminal.js";
+import { ChatInput } from "./ChatInput.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] flex flex-col">
+          {/* Terminal Display */}
+          <div class="flex-1 overflow-hidden">
+            <TerminalComponent index={1} />
+          </div>
+          
+          {/* Chat Input */}
+          <div class="flex-shrink-0">
+            <ChatInput id="chat-input" terminalId="terminal-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);