treesap 0.1.10 → 0.1.11

package/dist/components/ChatInput.d.ts

@@ -0,0 +1,7 @@
+interface ChatInputProps {
+    id?: string;
+    terminalId?: string;
+}
+export declare function ChatInput({ id, terminalId }: ChatInputProps): import("hono/jsx/jsx-dev-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ChatInput.d.ts.map

package/dist/components/ChatInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatInput.d.ts","sourceRoot":"","sources":["../../src/components/ChatInput.tsx"],"names":[],"mappings":"AAAA,UAAU,cAAc;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAiB,EAAE,UAAyB,EAAE,EAAE,cAAc,kDAkDzF"}

package/dist/components/ChatInput.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
+export function ChatInput({ id = "chat-input", terminalId = "terminal-1" }) {
+    return (_jsxs("sapling-island", { loading: "visible", children: [_jsx("template", { children: _jsx("script", { type: "module", src: "/components/ChatInput.js" }) }), _jsx("div", { id: id, class: "border-t border-[#3c3c3c] bg-[#2d2d30] p-3", children: _jsxs("div", { class: "flex items-end gap-2", children: [_jsx("div", { class: "flex-1 relative", children: _jsx("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 }) }), _jsx("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", children: _jsx("iconify-icon", { icon: "tabler:arrow-up", width: "16", height: "16" }) }), _jsx("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", children: _jsx("iconify-icon", { icon: "tabler:player-play", width: "16", height: "16" }) })] }) }), _jsx("script", { dangerouslySetInnerHTML: { __html: `
+        // Pass chat input data to JavaScript
+        window.chatInputData_${id.replace(/-/g, '_')} = {
+          chatInputId: '${id}',
+          terminalId: '${terminalId}'
+        };
+      ` } })] }));
+}
+//# sourceMappingURL=ChatInput.js.map

package/dist/components/ChatInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatInput.js","sourceRoot":"","sources":["../../src/components/ChatInput.tsx"],"names":[],"mappings":";AAKA,MAAM,UAAU,SAAS,CAAC,EAAE,EAAE,GAAG,YAAY,EAAE,UAAU,GAAG,YAAY,EAAkB;IACxF,OAAO,CACL,0BAAgB,OAAO,EAAC,SAAS,aAC/B,6BACE,iBAAQ,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,0BAA0B,GAAU,GACrD,EAEX,cAAK,EAAE,EAAE,EAAE,EAAE,KAAK,EAAC,4CAA4C,YAC7D,eAAK,KAAK,EAAC,sBAAsB,aAE/B,cAAK,KAAK,EAAC,iBAAiB,YAC1B,mBACE,EAAE,EAAE,GAAG,EAAE,WAAW,EACpB,WAAW,EAAC,iCAAiC,EAC7C,KAAK,EAAC,yNAAyN,EAC/N,IAAI,EAAE,CAAC,GACG,GACR,EAGN,iBACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,GAAG,EAAE,WAAW,EACpB,KAAK,EAAC,0LAA0L,EAChM,KAAK,EAAC,qBAAqB,YAE3B,uBAAc,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAgB,GACpE,EAGT,iBACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,GAAG,EAAE,cAAc,EACvB,KAAK,EAAC,0LAA0L,EAChM,KAAK,EAAC,iBAAiB,YAEvB,uBAAc,IAAI,EAAC,oBAAoB,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAgB,GACvE,IACL,GACF,EAEN,iBAAQ,uBAAuB,EAAE,EAAC,MAAM,EAAE;;+BAEjB,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC;0BAC1B,EAAE;yBACH,UAAU;;OAE5B,EAAC,GAAW,IACE,CAClB,CAAC;AACJ,CAAC"}

package/dist/components/Sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../src/components/Sidebar.tsx"],"names":[],"mappings":"AAEA,UAAU,YAAY;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,wBAAgB,OAAO,CAAC,EAAE,EAAc,EAAE,WAAkB,EAAE,gBAAgB,EAAE,EAAE,YAAY,kDAmF7F"}
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../src/components/Sidebar.tsx"],"names":[],"mappings":"AAGA,UAAU,YAAY;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,wBAAgB,OAAO,CAAC,EAAE,EAAc,EAAE,WAAkB,EAAE,gBAAgB,EAAE,EAAE,YAAY,kDAyF7F"}

package/dist/components/Sidebar.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
 import { Terminal as TerminalComponent } from "./Terminal.js";
+import { ChatInput } from "./ChatInput.js";
 export function Sidebar({ id = "sidebar", previewPort = 1234, workingDirectory }) {
-    return (_jsxs("sapling-island", { loading: "visible", children: [_jsxs("template", { children: [_jsx("script", { type: "module", src: "https://code.iconify.design/iconify-icon/2.0.0/iconify-icon.min.js" }), _jsx("script", { type: "module", src: "/components/Sidebar.js" })] }), _jsx("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" }), _jsxs("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]", children: [_jsx("div", { class: "p-3 border-b border-[#3c3c3c] bg-[#2d2d30] flex-shrink-0", children: _jsxs("div", { class: "flex items-center gap-2", children: [_jsx("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", children: _jsx("iconify-icon", { icon: "tabler:x", width: "16", height: "16" }) }), _jsx("a", { href: "/", class: "p-2 hover:bg-[#3c3c3c] rounded-md transition-colors flex-shrink-0 text-[#cccccc] hover:text-white", title: "Back to Home", children: _jsx("iconify-icon", { icon: "tabler:arrow-left", width: "16", height: "16" }) }), _jsx("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", children: _jsx("iconify-icon", { icon: "tabler:refresh", width: "16", height: "16" }) }), _jsxs("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", children: [_jsx("iconify-icon", { icon: "tabler:world", width: "16", height: "16", class: "text-[#cccccc] mr-2" }), _jsxs("span", { class: "text-[#cccccc] text-sm", children: ["localhost:", previewPort, "/"] }), _jsx("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" }), _jsx("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", children: _jsx("iconify-icon", { icon: "tabler:chevron-right", width: "16", height: "16" }) })] })] }) }), _jsx("div", { class: "flex-1 overflow-hidden bg-[#1e1e1e]", children: _jsx("div", { class: "h-full", children: _jsx(TerminalComponent, { index: 1 }) }) })] })] }));
+    return (_jsxs("sapling-island", { loading: "visible", children: [_jsxs("template", { children: [_jsx("script", { type: "module", src: "https://code.iconify.design/iconify-icon/2.0.0/iconify-icon.min.js" }), _jsx("script", { type: "module", src: "/components/Sidebar.js" })] }), _jsx("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" }), _jsxs("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]", children: [_jsx("div", { class: "p-3 border-b border-[#3c3c3c] bg-[#2d2d30] flex-shrink-0", children: _jsxs("div", { class: "flex items-center gap-2", children: [_jsx("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", children: _jsx("iconify-icon", { icon: "tabler:x", width: "16", height: "16" }) }), _jsx("a", { href: "/", class: "p-2 hover:bg-[#3c3c3c] rounded-md transition-colors flex-shrink-0 text-[#cccccc] hover:text-white", title: "Back to Home", children: _jsx("iconify-icon", { icon: "tabler:arrow-left", width: "16", height: "16" }) }), _jsx("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", children: _jsx("iconify-icon", { icon: "tabler:refresh", width: "16", height: "16" }) }), _jsxs("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", children: [_jsx("iconify-icon", { icon: "tabler:world", width: "16", height: "16", class: "text-[#cccccc] mr-2" }), _jsxs("span", { class: "text-[#cccccc] text-sm", children: ["localhost:", previewPort, "/"] }), _jsx("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" }), _jsx("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", children: _jsx("iconify-icon", { icon: "tabler:chevron-right", width: "16", height: "16" }) })] })] }) }), _jsxs("div", { class: "flex-1 overflow-hidden bg-[#1e1e1e] flex flex-col", children: [_jsx("div", { class: "flex-1 overflow-hidden", children: _jsx(TerminalComponent, { index: 1 }) }), _jsx("div", { class: "flex-shrink-0", children: _jsx(ChatInput, { id: "chat-input", terminalId: "terminal-1" }) })] })] })] }));
 }
 //# sourceMappingURL=Sidebar.js.map

package/dist/components/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sourceRoot":"","sources":["../../src/components/Sidebar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAQ9D,MAAM,UAAU,OAAO,CAAC,EAAE,EAAE,GAAG,SAAS,EAAE,WAAW,GAAG,IAAI,EAAE,gBAAgB,EAAgB;IAC5F,OAAO,CACL,0BAAgB,OAAO,EAAC,SAAS,aAC/B,+BACE,iBAAQ,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,oEAAoE,GAAU,EACxG,iBAAQ,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,wBAAwB,GAAU,IACnD,EAGX,cACE,EAAE,EAAE,GAAG,EAAE,WAAW,EACpB,KAAK,EAAC,oIAAoI,GACrI,EAGP,eACE,EAAE,EAAE,GAAG,EAAE,OAAO,EAChB,KAAK,EAAC,sNAAsN,aAG5N,cAAK,KAAK,EAAC,0DAA0D,YACnE,eAAK,KAAK,EAAC,yBAAyB,aAElC,iBACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,GAAG,EAAE,YAAY,EACrB,KAAK,EAAC,6GAA6G,EACnH,KAAK,EAAC,eAAe,YAErB,uBAAc,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAgB,GAC7D,EAGT,YACE,IAAI,EAAC,GAAG,EACR,KAAK,EAAC,mGAAmG,EACzG,KAAK,EAAC,cAAc,YAEpB,uBAAc,IAAI,EAAC,mBAAmB,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAgB,GAC3E,EAGJ,iBACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAC,0BAA0B,EAC7B,KAAK,EAAC,mGAAmG,EACzG,KAAK,EAAC,QAAQ,YAEd,uBAAc,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAgB,GACnE,EAGT,eAAK,KAAK,EAAC,qJAAqJ,aAC9J,uBAAc,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK,EAAC,qBAAqB,GAAgB,EACpG,gBAAM,KAAK,EAAC,wBAAwB,2BAAY,WAAW,SAAS,EACpE,gBACE,EAAE,EAAC,wBAAwB,EAC3B,IAAI,EAAC,MAAM,EACX,WAAW,EAAC,MAAM,EAClB,YAAY,EAAC,EAAE,EACf,KAAK,EAAC,sEAAsE,GAC5E,EACF,iBACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAC,uBAAuB,EAC1B,KAAK,EAAC,qGAAqG,EAC3G,KAAK,EAAC,IAAI,YAEV,uBAAc,IAAI,EAAC,sBAAsB,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAgB,GACzE,IACL,IACF,GACF,EAGN,cAAK,KAAK,EAAC,qCAAqC,YAC9C,cAAK,KAAK,EAAC,QAAQ,YACjB,KAAC,iBAAiB,IAAC,KAAK,EAAE,CAAC,GAAI,GAC3B,GACF,IACF,IACS,CAClB,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Sidebar.js","sourceRoot":"","sources":["../../src/components/Sidebar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAQ3C,MAAM,UAAU,OAAO,CAAC,EAAE,EAAE,GAAG,SAAS,EAAE,WAAW,GAAG,IAAI,EAAE,gBAAgB,EAAgB;IAC5F,OAAO,CACL,0BAAgB,OAAO,EAAC,SAAS,aAC/B,+BACE,iBAAQ,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,oEAAoE,GAAU,EACxG,iBAAQ,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,wBAAwB,GAAU,IACnD,EAGX,cACE,EAAE,EAAE,GAAG,EAAE,WAAW,EACpB,KAAK,EAAC,oIAAoI,GACrI,EAGP,eACE,EAAE,EAAE,GAAG,EAAE,OAAO,EAChB,KAAK,EAAC,sNAAsN,aAG5N,cAAK,KAAK,EAAC,0DAA0D,YACnE,eAAK,KAAK,EAAC,yBAAyB,aAElC,iBACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,GAAG,EAAE,YAAY,EACrB,KAAK,EAAC,6GAA6G,EACnH,KAAK,EAAC,eAAe,YAErB,uBAAc,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAgB,GAC7D,EAGT,YACE,IAAI,EAAC,GAAG,EACR,KAAK,EAAC,mGAAmG,EACzG,KAAK,EAAC,cAAc,YAEpB,uBAAc,IAAI,EAAC,mBAAmB,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAgB,GAC3E,EAGJ,iBACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAC,0BAA0B,EAC7B,KAAK,EAAC,mGAAmG,EACzG,KAAK,EAAC,QAAQ,YAEd,uBAAc,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAgB,GACnE,EAGT,eAAK,KAAK,EAAC,qJAAqJ,aAC9J,uBAAc,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK,EAAC,qBAAqB,GAAgB,EACpG,gBAAM,KAAK,EAAC,wBAAwB,2BAAY,WAAW,SAAS,EACpE,gBACE,EAAE,EAAC,wBAAwB,EAC3B,IAAI,EAAC,MAAM,EACX,WAAW,EAAC,MAAM,EAClB,YAAY,EAAC,EAAE,EACf,KAAK,EAAC,sEAAsE,GAC5E,EACF,iBACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAC,uBAAuB,EAC1B,KAAK,EAAC,qGAAqG,EAC3G,KAAK,EAAC,IAAI,YAEV,uBAAc,IAAI,EAAC,sBAAsB,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAgB,GACzE,IACL,IACF,GACF,EAGN,eAAK,KAAK,EAAC,mDAAmD,aAE5D,cAAK,KAAK,EAAC,wBAAwB,YACjC,KAAC,iBAAiB,IAAC,KAAK,EAAE,CAAC,GAAI,GAC3B,EAGN,cAAK,KAAK,EAAC,eAAe,YACxB,KAAC,SAAS,IAAC,EAAE,EAAC,YAAY,EAAC,UAAU,EAAC,YAAY,GAAG,GACjD,IACF,IACF,IACS,CAClB,CAAC;AACJ,CAAC"}

package/dist/static/components/ChatInput.js

@@ -0,0 +1,237 @@
+// ChatInput component JavaScript for chat-style terminal input
+class ChatInputManager {
+  constructor(chatInputId) {
+    this.chatInputId = chatInputId;
+    this.container = document.getElementById(chatInputId);
+    this.textarea = document.getElementById(`${chatInputId}-textarea`);
+    this.sendBtn = document.getElementById(`${chatInputId}-send-btn`);
+    this.executeBtn = document.getElementById(`${chatInputId}-execute-btn`);
+    
+    // Get chat input data from window
+    const chatInputData = window[`chatInputData_${chatInputId.replace(/-/g, '_')}`];
+    if (!chatInputData) {
+      console.error(`No chat input data found for ${chatInputId}`);
+      return;
+    }
+    
+    this.terminalId = chatInputData.terminalId;
+    
+    console.log(`ChatInput ${chatInputId} initialized for terminal:`, this.terminalId);
+    
+    this.init();
+  }
+
+  init() {
+    if (!this.container || !this.textarea || !this.sendBtn || !this.executeBtn) {
+      console.error('ChatInput elements not found!', {
+        container: !!this.container,
+        textarea: !!this.textarea,
+        sendBtn: !!this.sendBtn,
+        executeBtn: !!this.executeBtn
+      });
+      return;
+    }
+
+    this.setupEventListeners();
+    this.setupAutoResize();
+  }
+
+  setupEventListeners() {
+    // Handle send to input button click
+    this.sendBtn.addEventListener('click', () => {
+      this.sendToInput();
+    });
+
+    // Handle execute button click
+    this.executeBtn.addEventListener('click', () => {
+      this.executeCommand();
+    });
+
+    // Handle textarea key events
+    this.textarea.addEventListener('keydown', (e) => {
+      // Enter without shift sends to input field
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        this.sendToInput();
+      }
+      // Ctrl+Enter or Cmd+Enter executes
+      if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        this.executeCommand();
+      }
+      // Allow Shift+Enter for new lines (default behavior)
+    });
+
+    // Handle input to auto-resize textarea
+    this.textarea.addEventListener('input', () => {
+      this.adjustTextareaHeight();
+    });
+
+    // Disable buttons when textarea is empty
+    this.textarea.addEventListener('input', () => {
+      this.updateButtonState();
+    });
+
+    // Focus textarea when container is clicked
+    this.container.addEventListener('click', (e) => {
+      if (e.target === this.container) {
+        this.textarea.focus();
+      }
+    });
+  }
+
+  setupAutoResize() {
+    // Initial state
+    this.adjustTextareaHeight();
+    this.updateButtonState();
+  }
+
+  adjustTextareaHeight() {
+    if (!this.textarea) return;
+
+    // Reset height to auto to get the correct scrollHeight
+    this.textarea.style.height = 'auto';
+    
+    // Calculate the new height based on content
+    const scrollHeight = this.textarea.scrollHeight;
+    const maxHeight = 120; // Max height from CSS
+    const minHeight = 40;  // Min height from CSS
+    
+    const newHeight = Math.min(Math.max(scrollHeight, minHeight), maxHeight);
+    this.textarea.style.height = `${newHeight}px`;
+  }
+
+  updateButtonState() {
+    if (!this.textarea || !this.sendBtn || !this.executeBtn) return;
+
+    const hasContent = this.textarea.value.trim().length > 0;
+    this.sendBtn.disabled = !hasContent;
+    this.executeBtn.disabled = false; // Execute button is always enabled
+  }
+
+  sendToInput() {
+    if (!this.textarea) return;
+
+    const input = this.textarea.value.trim();
+    if (!input) return;
+
+    // Get the terminal manager for the associated terminal
+    const terminalManager = this.getTerminalManager();
+    if (!terminalManager) {
+      console.error(`No terminal manager found for terminal: ${this.terminalId}`);
+      return;
+    }
+
+    // Send the input to the terminal input field (without executing)
+    console.log(`Sending text to terminal input field ${this.terminalId}:`, input);
+    console.log('ChatInput sending (programmatic):', JSON.stringify(input), 'char codes:', input.split('').map(c => c.charCodeAt(0)));
+    
+    // Simplest approach: just send the text directly
+    // This should work for most cases in Claude Code
+    terminalManager.sendInput(input);
+
+    // Clear the textarea
+    this.textarea.value = '';
+    this.adjustTextareaHeight();
+    this.updateButtonState();
+    
+    // Focus back to textarea for next input
+    this.textarea.focus();
+  }
+
+  executeCommand() {
+    // Get the terminal manager for the associated terminal
+    const terminalManager = this.getTerminalManager();
+    if (!terminalManager) {
+      console.error(`No terminal manager found for terminal: ${this.terminalId}`);
+      return;
+    }
+
+    // Execute whatever is currently in the terminal input field
+    console.log(`Executing command in terminal ${this.terminalId}`);
+    console.log('ChatInput executing (programmatic):', JSON.stringify('\r'), 'char code:', '\r'.charCodeAt(0));
+    terminalManager.sendInput('\r');
+  }
+
+  getTerminalManager() {
+    // Access global terminal managers
+    if (window.terminalManagers && window.terminalManagers.has(this.terminalId)) {
+      return window.terminalManagers.get(this.terminalId);
+    }
+
+    // Fallback: try to find by checking all managers
+    if (window.terminalManagers) {
+      for (const [terminalId, manager] of window.terminalManagers.entries()) {
+        if (terminalId === this.terminalId) {
+          return manager;
+        }
+      }
+    }
+
+    // If not found, log available terminals for debugging
+    if (window.terminalManagers) {
+      console.log('Available terminal managers:', Array.from(window.terminalManagers.keys()));
+      console.log('Looking for terminal ID:', this.terminalId);
+    } else {
+      console.log('No terminal managers found in window object');
+    }
+
+    return null;
+  }
+
+  focus() {
+    if (this.textarea) {
+      this.textarea.focus();
+    }
+  }
+
+  destroy() {
+    // Clean up event listeners if needed
+    // The component will be removed from DOM, so most cleanup is automatic
+  }
+}
+
+// Auto-initialize when script loads
+console.log('ChatInput.js loaded, looking for chat input containers...');
+let chatInputManagers = new Map();
+
+function initializeChatInputs() {
+  // Look for all sapling-islands with chat input content
+  const saplingIslands = document.querySelectorAll('sapling-island');
+  
+  for (const island of saplingIslands) {
+    // Look for chat input container
+    const chatInputDiv = island.querySelector('div[id*="chat-input"]');
+    if (chatInputDiv && chatInputDiv.id) {
+      const chatInputId = chatInputDiv.id;
+      console.log('Found chat input component with ID:', chatInputId);
+      
+      // Check if we already have a manager for this chat input
+      if (!chatInputManagers.has(chatInputId)) {
+        const manager = new ChatInputManager(chatInputId);
+        chatInputManagers.set(chatInputId, manager);
+      }
+    }
+  }
+  
+  console.log(`Initialized ${chatInputManagers.size} chat input(s)`);
+}
+
+// Try immediate initialization
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initializeChatInputs);
+} else {
+  initializeChatInputs();
+}
+
+// Make available globally
+window.chatInputManagers = chatInputManagers;
+window.ChatInputManager = ChatInputManager;
+window.initializeChatInputs = initializeChatInputs;
+
+// Cleanup on page unload
+window.addEventListener('beforeunload', () => {
+  for (const manager of chatInputManagers.values()) {
+    manager.destroy();
+  }
+});

package/dist/static/components/Terminal.js

@@ -99,6 +99,8 @@ class TerminalManager {
 
     // Handle terminal input - pass through to shell
     this.terminal.onData((data) => {
+      // Log the input data for debugging
+      console.log('Terminal input (manual typing):', JSON.stringify(data), 'char codes:', data.split('').map(c => c.charCodeAt(0)));
       // Send all input directly to the shell session
       this.sendInput(data);
     });

package/dist/static/styles/main.css

@@ -1221,6 +1221,14 @@ video {
   height: 100vh;
 }
 
+.max-h-\[120px\] {
+  max-height: 120px;
+}
+
+.min-h-\[40px\] {
+  min-height: 40px;
+}
+
 .min-h-screen {
   min-height: 100vh;
 }
@@ -1281,6 +1289,10 @@ video {
   cursor: not-allowed;
 }
 
+.resize-none {
+  resize: none;
+}
+
 .resize {
   resize: both;
 }
@@ -1289,6 +1301,10 @@ video {
   flex-direction: column;
 }
 
+.items-end {
+  align-items: flex-end;
+}
+
 .items-center {
   align-items: center;
 }
@@ -1346,6 +1362,10 @@ video {
   border-right-width: 1px;
 }
 
+.border-t {
+  border-top-width: 1px;
+}
+
 .border-t-2 {
   border-top-width: 2px;
 }
@@ -1370,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));
@@ -1380,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));
@@ -1470,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";
 }
@@ -1545,6 +1579,16 @@ 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;
 }
@@ -1615,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));
@@ -1651,11 +1705,26 @@ 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));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "treesap",
-  "version": "0.1.10",
+  "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

@@ -1,4 +1,5 @@
 import { Terminal as TerminalComponent } from "./Terminal.js";
+import { ChatInput } from "./ChatInput.js";
 
 interface SidebarProps {
   id?: string;
@@ -81,10 +82,16 @@ export function Sidebar({ id = "sidebar", previewPort = 1234, workingDirectory }
         </div>
         
         {/* Terminal Content */}
-        <div class="flex-1 overflow-hidden bg-[#1e1e1e]">
-          <div class="h-full">
+        <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/static/components/ChatInput.js

@@ -0,0 +1,237 @@
+// ChatInput component JavaScript for chat-style terminal input
+class ChatInputManager {
+  constructor(chatInputId) {
+    this.chatInputId = chatInputId;
+    this.container = document.getElementById(chatInputId);
+    this.textarea = document.getElementById(`${chatInputId}-textarea`);
+    this.sendBtn = document.getElementById(`${chatInputId}-send-btn`);
+    this.executeBtn = document.getElementById(`${chatInputId}-execute-btn`);
+    
+    // Get chat input data from window
+    const chatInputData = window[`chatInputData_${chatInputId.replace(/-/g, '_')}`];
+    if (!chatInputData) {
+      console.error(`No chat input data found for ${chatInputId}`);
+      return;
+    }
+    
+    this.terminalId = chatInputData.terminalId;
+    
+    console.log(`ChatInput ${chatInputId} initialized for terminal:`, this.terminalId);
+    
+    this.init();
+  }
+
+  init() {
+    if (!this.container || !this.textarea || !this.sendBtn || !this.executeBtn) {
+      console.error('ChatInput elements not found!', {
+        container: !!this.container,
+        textarea: !!this.textarea,
+        sendBtn: !!this.sendBtn,
+        executeBtn: !!this.executeBtn
+      });
+      return;
+    }
+
+    this.setupEventListeners();
+    this.setupAutoResize();
+  }
+
+  setupEventListeners() {
+    // Handle send to input button click
+    this.sendBtn.addEventListener('click', () => {
+      this.sendToInput();
+    });
+
+    // Handle execute button click
+    this.executeBtn.addEventListener('click', () => {
+      this.executeCommand();
+    });
+
+    // Handle textarea key events
+    this.textarea.addEventListener('keydown', (e) => {
+      // Enter without shift sends to input field
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        this.sendToInput();
+      }
+      // Ctrl+Enter or Cmd+Enter executes
+      if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        this.executeCommand();
+      }
+      // Allow Shift+Enter for new lines (default behavior)
+    });
+
+    // Handle input to auto-resize textarea
+    this.textarea.addEventListener('input', () => {
+      this.adjustTextareaHeight();
+    });
+
+    // Disable buttons when textarea is empty
+    this.textarea.addEventListener('input', () => {
+      this.updateButtonState();
+    });
+
+    // Focus textarea when container is clicked
+    this.container.addEventListener('click', (e) => {
+      if (e.target === this.container) {
+        this.textarea.focus();
+      }
+    });
+  }
+
+  setupAutoResize() {
+    // Initial state
+    this.adjustTextareaHeight();
+    this.updateButtonState();
+  }
+
+  adjustTextareaHeight() {
+    if (!this.textarea) return;
+
+    // Reset height to auto to get the correct scrollHeight
+    this.textarea.style.height = 'auto';
+    
+    // Calculate the new height based on content
+    const scrollHeight = this.textarea.scrollHeight;
+    const maxHeight = 120; // Max height from CSS
+    const minHeight = 40;  // Min height from CSS
+    
+    const newHeight = Math.min(Math.max(scrollHeight, minHeight), maxHeight);
+    this.textarea.style.height = `${newHeight}px`;
+  }
+
+  updateButtonState() {
+    if (!this.textarea || !this.sendBtn || !this.executeBtn) return;
+
+    const hasContent = this.textarea.value.trim().length > 0;
+    this.sendBtn.disabled = !hasContent;
+    this.executeBtn.disabled = false; // Execute button is always enabled
+  }
+
+  sendToInput() {
+    if (!this.textarea) return;
+
+    const input = this.textarea.value.trim();
+    if (!input) return;
+
+    // Get the terminal manager for the associated terminal
+    const terminalManager = this.getTerminalManager();
+    if (!terminalManager) {
+      console.error(`No terminal manager found for terminal: ${this.terminalId}`);
+      return;
+    }
+
+    // Send the input to the terminal input field (without executing)
+    console.log(`Sending text to terminal input field ${this.terminalId}:`, input);
+    console.log('ChatInput sending (programmatic):', JSON.stringify(input), 'char codes:', input.split('').map(c => c.charCodeAt(0)));
+    
+    // Simplest approach: just send the text directly
+    // This should work for most cases in Claude Code
+    terminalManager.sendInput(input);
+
+    // Clear the textarea
+    this.textarea.value = '';
+    this.adjustTextareaHeight();
+    this.updateButtonState();
+    
+    // Focus back to textarea for next input
+    this.textarea.focus();
+  }
+
+  executeCommand() {
+    // Get the terminal manager for the associated terminal
+    const terminalManager = this.getTerminalManager();
+    if (!terminalManager) {
+      console.error(`No terminal manager found for terminal: ${this.terminalId}`);
+      return;
+    }
+
+    // Execute whatever is currently in the terminal input field
+    console.log(`Executing command in terminal ${this.terminalId}`);
+    console.log('ChatInput executing (programmatic):', JSON.stringify('\r'), 'char code:', '\r'.charCodeAt(0));
+    terminalManager.sendInput('\r');
+  }
+
+  getTerminalManager() {
+    // Access global terminal managers
+    if (window.terminalManagers && window.terminalManagers.has(this.terminalId)) {
+      return window.terminalManagers.get(this.terminalId);
+    }
+
+    // Fallback: try to find by checking all managers
+    if (window.terminalManagers) {
+      for (const [terminalId, manager] of window.terminalManagers.entries()) {
+        if (terminalId === this.terminalId) {
+          return manager;
+        }
+      }
+    }
+
+    // If not found, log available terminals for debugging
+    if (window.terminalManagers) {
+      console.log('Available terminal managers:', Array.from(window.terminalManagers.keys()));
+      console.log('Looking for terminal ID:', this.terminalId);
+    } else {
+      console.log('No terminal managers found in window object');
+    }
+
+    return null;
+  }
+
+  focus() {
+    if (this.textarea) {
+      this.textarea.focus();
+    }
+  }
+
+  destroy() {
+    // Clean up event listeners if needed
+    // The component will be removed from DOM, so most cleanup is automatic
+  }
+}
+
+// Auto-initialize when script loads
+console.log('ChatInput.js loaded, looking for chat input containers...');
+let chatInputManagers = new Map();
+
+function initializeChatInputs() {
+  // Look for all sapling-islands with chat input content
+  const saplingIslands = document.querySelectorAll('sapling-island');
+  
+  for (const island of saplingIslands) {
+    // Look for chat input container
+    const chatInputDiv = island.querySelector('div[id*="chat-input"]');
+    if (chatInputDiv && chatInputDiv.id) {
+      const chatInputId = chatInputDiv.id;
+      console.log('Found chat input component with ID:', chatInputId);
+      
+      // Check if we already have a manager for this chat input
+      if (!chatInputManagers.has(chatInputId)) {
+        const manager = new ChatInputManager(chatInputId);
+        chatInputManagers.set(chatInputId, manager);
+      }
+    }
+  }
+  
+  console.log(`Initialized ${chatInputManagers.size} chat input(s)`);
+}
+
+// Try immediate initialization
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initializeChatInputs);
+} else {
+  initializeChatInputs();
+}
+
+// Make available globally
+window.chatInputManagers = chatInputManagers;
+window.ChatInputManager = ChatInputManager;
+window.initializeChatInputs = initializeChatInputs;
+
+// Cleanup on page unload
+window.addEventListener('beforeunload', () => {
+  for (const manager of chatInputManagers.values()) {
+    manager.destroy();
+  }
+});

package/src/static/components/Terminal.js

@@ -99,6 +99,8 @@ class TerminalManager {
 
     // Handle terminal input - pass through to shell
     this.terminal.onData((data) => {
+      // Log the input data for debugging
+      console.log('Terminal input (manual typing):', JSON.stringify(data), 'char codes:', data.split('').map(c => c.charCodeAt(0)));
       // Send all input directly to the shell session
       this.sendInput(data);
     });

package/src/static/styles/main.css

@@ -1221,6 +1221,14 @@ video {
   height: 100vh;
 }
 
+.max-h-\[120px\] {
+  max-height: 120px;
+}
+
+.min-h-\[40px\] {
+  min-height: 40px;
+}
+
 .min-h-screen {
   min-height: 100vh;
 }
@@ -1281,6 +1289,10 @@ video {
   cursor: not-allowed;
 }
 
+.resize-none {
+  resize: none;
+}
+
 .resize {
   resize: both;
 }
@@ -1289,6 +1301,10 @@ video {
   flex-direction: column;
 }
 
+.items-end {
+  align-items: flex-end;
+}
+
 .items-center {
   align-items: center;
 }
@@ -1346,6 +1362,10 @@ video {
   border-right-width: 1px;
 }
 
+.border-t {
+  border-top-width: 1px;
+}
+
 .border-t-2 {
   border-top-width: 2px;
 }
@@ -1370,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));
@@ -1380,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));
@@ -1470,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";
 }
@@ -1545,6 +1579,16 @@ 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;
 }
@@ -1615,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));
@@ -1651,11 +1705,26 @@ 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));