@bamptee/aia-code 2.0.1 → 2.0.2

package/src/ui/public/components/terminal.js

@@ -0,0 +1,197 @@
+import React from 'react';
+
+// Terminal component using xterm.js loaded from CDN
+export function Terminal({ wsUrl, onClose }) {
+  const containerRef = React.useRef(null);
+  const termRef = React.useRef(null);
+  const [status, setStatus] = React.useState('connecting');
+  const [error, setError] = React.useState(null);
+
+  React.useEffect(() => {
+    let term = null;
+    let ws = null;
+    let fitAddon = null;
+
+    const initTerminal = async () => {
+      // Check if xterm is loaded
+      if (!window.Terminal) {
+        setError('xterm.js not loaded');
+        return;
+      }
+
+      try {
+        term = new window.Terminal({
+          cursorBlink: true,
+          fontSize: 13,
+          fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
+          theme: {
+            background: '#0f172a',
+            foreground: '#e2e8f0',
+            cursor: '#38bdf8',
+            cursorAccent: '#0f172a',
+            selection: '#38bdf833',
+            black: '#1e293b',
+            red: '#f87171',
+            green: '#4ade80',
+            yellow: '#fbbf24',
+            blue: '#60a5fa',
+            magenta: '#c084fc',
+            cyan: '#22d3ee',
+            white: '#f1f5f9',
+            brightBlack: '#475569',
+            brightRed: '#fca5a5',
+            brightGreen: '#86efac',
+            brightYellow: '#fcd34d',
+            brightBlue: '#93c5fd',
+            brightMagenta: '#d8b4fe',
+            brightCyan: '#67e8f9',
+            brightWhite: '#f8fafc',
+          },
+        });
+
+        if (window.FitAddon) {
+          fitAddon = new window.FitAddon.FitAddon();
+          term.loadAddon(fitAddon);
+        }
+
+        term.open(containerRef.current);
+
+        if (fitAddon) {
+          fitAddon.fit();
+        }
+
+        // Connect WebSocket
+        ws = new WebSocket(wsUrl);
+
+        ws.onopen = () => {
+          setStatus('connected');
+          // Send initial size
+          if (fitAddon) {
+            const dims = fitAddon.proposeDimensions();
+            if (dims) {
+              ws.send(`\x1b[8;${dims.rows};${dims.cols}t`);
+            }
+          }
+        };
+
+        ws.onmessage = (event) => {
+          term.write(event.data);
+        };
+
+        ws.onclose = () => {
+          setStatus('disconnected');
+          term.write('\r\n\x1b[33m[Connection closed]\x1b[0m\r\n');
+        };
+
+        ws.onerror = () => {
+          setStatus('error');
+          setError('WebSocket connection failed');
+        };
+
+        // Send input to server
+        term.onData((data) => {
+          if (ws && ws.readyState === WebSocket.OPEN) {
+            ws.send(data);
+          }
+        });
+
+        // Handle resize
+        const handleResize = () => {
+          if (fitAddon) {
+            fitAddon.fit();
+            const dims = fitAddon.proposeDimensions();
+            if (dims && ws && ws.readyState === WebSocket.OPEN) {
+              ws.send(`\x1b[8;${dims.rows};${dims.cols}t`);
+            }
+          }
+        };
+
+        window.addEventListener('resize', handleResize);
+        termRef.current = { term, ws, fitAddon, handleResize };
+      } catch (err) {
+        setError(err.message);
+        setStatus('error');
+      }
+    };
+
+    initTerminal();
+
+    return () => {
+      if (termRef.current) {
+        if (termRef.current.handleResize) {
+          window.removeEventListener('resize', termRef.current.handleResize);
+        }
+        if (termRef.current.ws) {
+          termRef.current.ws.close();
+        }
+        if (termRef.current.term) {
+          termRef.current.term.dispose();
+        }
+      }
+    };
+  }, [wsUrl]);
+
+  return React.createElement('div', { className: 'relative' },
+    // Header bar
+    React.createElement('div', { className: 'flex items-center justify-between bg-slate-800 px-3 py-1.5 rounded-t border border-slate-700 border-b-0' },
+      React.createElement('div', { className: 'flex items-center gap-2' },
+        React.createElement('span', { className: 'text-xs text-slate-400' }, 'Terminal'),
+        React.createElement('span', {
+          className: `w-2 h-2 rounded-full ${status === 'connected' ? 'bg-emerald-400' : status === 'connecting' ? 'bg-amber-400 animate-pulse' : 'bg-red-400'}`,
+        }),
+      ),
+      onClose && React.createElement('button', {
+        onClick: onClose,
+        className: 'text-slate-400 hover:text-slate-200 text-xs',
+        title: 'Close terminal',
+      }, 'Close'),
+    ),
+
+    // Terminal container
+    React.createElement('div', {
+      ref: containerRef,
+      className: 'h-64 bg-aia-bg rounded-b border border-slate-700 overflow-hidden',
+    }),
+
+    // Error message
+    error && React.createElement('div', { className: 'absolute inset-0 flex items-center justify-center bg-black/80 rounded' },
+      React.createElement('div', { className: 'text-center' },
+        React.createElement('p', { className: 'text-red-400 text-sm mb-2' }, error),
+        React.createElement('p', { className: 'text-slate-500 text-xs' }, 'Make sure node-pty is installed'),
+      ),
+    ),
+  );
+}
+
+// Script loader for xterm.js from CDN
+export function loadXtermScripts() {
+  return new Promise((resolve, reject) => {
+    // Check if already loaded
+    if (window.Terminal && window.FitAddon) {
+      resolve();
+      return;
+    }
+
+    // Load CSS
+    if (!document.querySelector('link[href*="xterm.css"]')) {
+      const link = document.createElement('link');
+      link.rel = 'stylesheet';
+      link.href = 'https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css';
+      document.head.appendChild(link);
+    }
+
+    // Load xterm.js
+    const xtermScript = document.createElement('script');
+    xtermScript.src = 'https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.min.js';
+    xtermScript.onload = () => {
+      // Load fit addon
+      const fitScript = document.createElement('script');
+      fitScript.src = 'https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.min.js';
+      fitScript.onload = resolve;
+      fitScript.onerror = reject;
+      document.head.appendChild(fitScript);
+    };
+    xtermScript.onerror = reject;
+    document.head.appendChild(xtermScript);
+  });
+}

package/src/ui/public/components/worktrunk-panel.js

@@ -0,0 +1,205 @@
+import React from 'react';
+import { api } from '/main.js';
+import { Terminal, loadXtermScripts } from '/components/terminal.js';
+
+export function WorktrunkPanel({ featureName }) {
+  const [wtStatus, setWtStatus] = React.useState(null);
+  const [loading, setLoading] = React.useState(true);
+  const [actionLoading, setActionLoading] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const [showTerminal, setShowTerminal] = React.useState(false);
+  const [terminalReady, setTerminalReady] = React.useState(false);
+  const [servicesLoading, setServicesLoading] = React.useState(false);
+  const [servicesMessage, setServicesMessage] = React.useState(null);
+
+  const loadStatus = async () => {
+    try {
+      const status = await api.get(`/features/${featureName}/wt`);
+      setWtStatus(status);
+    } catch (err) {
+      setError(err.message);
+    }
+    setLoading(false);
+  };
+
+  React.useEffect(() => {
+    loadStatus();
+  }, [featureName]);
+
+  const handleCreateWorktree = async () => {
+    setActionLoading(true);
+    setError(null);
+    try {
+      await api.post(`/features/${featureName}/wt/create`);
+      await loadStatus();
+    } catch (err) {
+      setError(err.message);
+    }
+    setActionLoading(false);
+  };
+
+  const handleRemoveWorktree = async () => {
+    if (!confirm(`Remove worktree for "${featureName}"? This will delete the worktree directory.`)) {
+      return;
+    }
+    setActionLoading(true);
+    setError(null);
+    try {
+      await api.delete(`/features/${featureName}/wt`);
+      setShowTerminal(false);
+      await loadStatus();
+    } catch (err) {
+      setError(err.message);
+    }
+    setActionLoading(false);
+  };
+
+  const handleOpenTerminal = async () => {
+    if (!terminalReady) {
+      try {
+        await loadXtermScripts();
+        setTerminalReady(true);
+      } catch {
+        setError('Failed to load terminal scripts');
+        return;
+      }
+    }
+    setShowTerminal(true);
+  };
+
+  const handleStartServices = async () => {
+    setServicesLoading(true);
+    setError(null);
+    setServicesMessage(null);
+    try {
+      await api.post(`/features/${featureName}/wt/services/start`);
+      setServicesMessage('Services started');
+      setTimeout(() => setServicesMessage(null), 3000);
+    } catch (err) {
+      setError(err.message);
+    }
+    setServicesLoading(false);
+  };
+
+  const handleStopServices = async () => {
+    setServicesLoading(true);
+    setError(null);
+    setServicesMessage(null);
+    try {
+      await api.post(`/features/${featureName}/wt/services/stop`);
+      setServicesMessage('Services stopped');
+      setTimeout(() => setServicesMessage(null), 3000);
+    } catch (err) {
+      setError(err.message);
+    }
+    setServicesLoading(false);
+  };
+
+  if (loading) {
+    return React.createElement('div', { className: 'bg-aia-card border border-aia-border rounded p-4' },
+      React.createElement('p', { className: 'text-slate-500 text-sm' }, 'Loading worktrunk status...')
+    );
+  }
+
+  // Not installed state
+  if (!wtStatus?.installed) {
+    return React.createElement('div', { className: 'bg-slate-900 border border-slate-700 rounded p-4' },
+      React.createElement('div', { className: 'flex items-center gap-2 mb-2' },
+        React.createElement('span', { className: 'text-orange-400' }, 'Worktrunk'),
+        React.createElement('span', { className: 'bg-slate-700 text-slate-400 text-xs px-2 py-0.5 rounded' }, 'not installed'),
+      ),
+      React.createElement('p', { className: 'text-slate-500 text-xs mb-3' },
+        'Worktrunk (wt) CLI is not installed. It enables isolated development environments using git worktrees.'
+      ),
+      React.createElement('div', { className: 'bg-black/30 rounded p-2' },
+        React.createElement('code', { className: 'text-xs text-slate-400' },
+          'cargo install worktrunk'
+        ),
+      ),
+    );
+  }
+
+  // No worktree state
+  if (!wtStatus?.hasWorktree) {
+    return React.createElement('div', { className: 'bg-slate-900 border border-orange-500/30 rounded p-4' },
+      React.createElement('div', { className: 'flex items-center justify-between mb-3' },
+        React.createElement('div', { className: 'flex items-center gap-2' },
+          React.createElement('span', { className: 'text-orange-400 font-medium' }, 'Worktrunk'),
+        ),
+      ),
+      React.createElement('p', { className: 'text-slate-400 text-sm mb-3' },
+        'Create an isolated worktree for this feature to work without affecting your main branch.'
+      ),
+      React.createElement('button', {
+        onClick: handleCreateWorktree,
+        disabled: actionLoading,
+        className: 'bg-orange-500/20 text-orange-400 border border-orange-500/30 rounded px-4 py-2 text-sm hover:bg-orange-500/30 disabled:opacity-40',
+      }, actionLoading ? 'Creating...' : 'Create Worktree'),
+      error && React.createElement('p', { className: 'text-red-400 text-xs mt-2' }, error),
+    );
+  }
+
+  // Active worktree state
+  // F8: Use wss:// for HTTPS, ws:// for HTTP
+  const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+  const wsUrl = `${wsProtocol}//${window.location.host}/api/terminal?cwd=${encodeURIComponent(wtStatus.path)}`;
+
+  return React.createElement('div', { className: 'bg-slate-900 border border-orange-500/30 rounded p-4 space-y-4' },
+    // Header
+    React.createElement('div', { className: 'flex items-center justify-between' },
+      React.createElement('div', { className: 'flex items-center gap-2' },
+        React.createElement('span', { className: 'text-orange-400 font-medium' }, 'Worktrunk'),
+        React.createElement('span', { className: 'bg-emerald-500/20 text-emerald-400 text-xs px-2 py-0.5 rounded' }, 'active'),
+      ),
+      React.createElement('button', {
+        onClick: handleRemoveWorktree,
+        disabled: actionLoading,
+        className: 'text-red-400 hover:text-red-300 text-xs disabled:opacity-40',
+      }, actionLoading ? 'Removing...' : 'Remove'),
+    ),
+
+    // Worktree info
+    React.createElement('div', { className: 'space-y-1' },
+      React.createElement('p', { className: 'text-xs text-slate-500' }, 'Branch'),
+      React.createElement('p', { className: 'text-sm text-slate-300 font-mono' }, wtStatus.branch),
+      React.createElement('p', { className: 'text-xs text-slate-500 mt-2' }, 'Path'),
+      React.createElement('p', { className: 'text-sm text-slate-400 font-mono truncate', title: wtStatus.path }, wtStatus.path),
+    ),
+
+    // Actions
+    React.createElement('div', { className: 'flex flex-wrap gap-2' },
+      React.createElement('button', {
+        onClick: showTerminal ? () => setShowTerminal(false) : handleOpenTerminal,
+        className: 'bg-slate-700 text-slate-300 border border-slate-600 rounded px-3 py-1.5 text-xs hover:bg-slate-600',
+      }, showTerminal ? 'Hide Terminal' : 'Open Terminal'),
+
+      // Docker services buttons (only if services exist)
+      wtStatus.hasServices && React.createElement(React.Fragment, null,
+        React.createElement('button', {
+          onClick: handleStartServices,
+          disabled: servicesLoading,
+          className: 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 rounded px-3 py-1.5 text-xs hover:bg-emerald-500/30 disabled:opacity-40',
+        }, servicesLoading ? '...' : 'Start Services'),
+        React.createElement('button', {
+          onClick: handleStopServices,
+          disabled: servicesLoading,
+          className: 'bg-red-500/20 text-red-400 border border-red-500/30 rounded px-3 py-1.5 text-xs hover:bg-red-500/30 disabled:opacity-40',
+        }, servicesLoading ? '...' : 'Stop Services'),
+      ),
+    ),
+
+    // Terminal
+    showTerminal && terminalReady && React.createElement('div', { className: 'mt-4' },
+      React.createElement(Terminal, {
+        wsUrl,
+        onClose: () => setShowTerminal(false),
+      }),
+    ),
+
+    // F9: Services feedback message
+    servicesMessage && React.createElement('p', { className: 'text-emerald-400 text-xs' }, servicesMessage),
+
+    // Error
+    error && React.createElement('p', { className: 'text-red-400 text-xs' }, error),
+  );
+}

package/src/ui/public/main.js

@@ -29,6 +29,28 @@ export const api = {
     if (!res.ok) throw new Error((await res.json()).error || res.statusText);
     return res.json();
   },
+  async patch(path, body = {}) {
+    const res = await fetch(`/api${path}`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    });
+    if (!res.ok) throw new Error((await res.json()).error || res.statusText);
+    return res.json();
+  },
+  async delete(path) {
+    const res = await fetch(`/api${path}`, { method: 'DELETE' });
+    if (!res.ok) throw new Error((await res.json()).error || res.statusText);
+    return res.json();
+  },
+  async upload(path, formData) {
+    const res = await fetch(`/api${path}`, {
+      method: 'POST',
+      body: formData,
+    });
+    if (!res.ok) throw new Error((await res.json()).error || res.statusText);
+    return res.json();
+  },
 };
 
 // --- SSE stream helper ---
@@ -56,7 +78,7 @@ export async function streamPost(path, body, { onLog, onStatus }) {
     let eventType = null;
     for (const line of lines) {
       if (line.startsWith('event: ')) {
-        eventType = line.slice(7);
+        eventType = line.slice(7).trim();
       } else if (line.startsWith('data: ') && eventType) {
         try {
           const data = JSON.parse(line.slice(6));

package/src/ui/router.js

@@ -22,7 +22,7 @@ export function createRouter() {
     return null;
   }
 
-  return { add, match, get: (p, h) => add('GET', p, h), post: (p, h) => add('POST', p, h), put: (p, h) => add('PUT', p, h), delete: (p, h) => add('DELETE', p, h) };
+  return { add, match, get: (p, h) => add('GET', p, h), post: (p, h) => add('POST', p, h), put: (p, h) => add('PUT', p, h), patch: (p, h) => add('PATCH', p, h), delete: (p, h) => add('DELETE', p, h) };
 }
 
 export async function parseBody(req) {

package/src/ui/server.js

@@ -3,6 +3,7 @@ import { createConnection } from 'node:net';
 import { createReadStream, existsSync } from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
+import { WebSocketServer } from 'ws';
 import { createRouter, parseBody, json, error } from './router.js';
 import { registerApiRoutes } from './api/index.js';
 
@@ -95,6 +96,90 @@ export async function startServer(preferredPort, root = process.cwd()) {
     serveStatic(res, filePath);
   });
 
+  // Setup WebSocket server for terminal
+  const wss = new WebSocketServer({ noServer: true });
+
+  server.on('upgrade', (req, socket, head) => {
+    const url = new URL(req.url, `http://${req.headers.host}`);
+
+    if (url.pathname === '/api/terminal') {
+      wss.handleUpgrade(req, socket, head, (ws) => {
+        const cwd = url.searchParams.get('cwd') || root;
+
+        // Dynamically import node-pty (may not be installed)
+        import('node-pty').then(({ spawn: ptySpawn }) => {
+          // F6: Use user's preferred shell from environment
+          const shell = process.platform === 'win32'
+            ? 'powershell.exe'
+            : process.env.SHELL || '/bin/bash';
+          const ptyProcess = ptySpawn(shell, [], {
+            name: 'xterm-256color',
+            cols: 80,
+            rows: 24,
+            cwd,
+            env: process.env,
+          });
+
+          // F7: Idle timeout - close terminal after 30 minutes of inactivity
+          const IDLE_TIMEOUT = 30 * 60 * 1000;
+          let idleTimer = setTimeout(() => {
+            ws.send('\r\n\x1b[33m[Session closed due to inactivity]\x1b[0m\r\n');
+            ws.close();
+          }, IDLE_TIMEOUT);
+
+          const resetIdleTimer = () => {
+            clearTimeout(idleTimer);
+            idleTimer = setTimeout(() => {
+              ws.send('\r\n\x1b[33m[Session closed due to inactivity]\x1b[0m\r\n');
+              ws.close();
+            }, IDLE_TIMEOUT);
+          };
+
+          ws.on('message', (data) => {
+            resetIdleTimer();
+            const msg = data.toString();
+            // F5: Limit message size to 64KB
+            if (msg.length > 65536) return;
+            // Handle resize messages
+            if (msg.startsWith('\x1b[8;')) {
+              const match = msg.match(/\x1b\[8;(\d+);(\d+)t/);
+              if (match) {
+                ptyProcess.resize(parseInt(match[2], 10), parseInt(match[1], 10));
+                return;
+              }
+            }
+            ptyProcess.write(msg);
+          });
+
+          ptyProcess.onData((data) => {
+            resetIdleTimer();
+            try {
+              ws.send(data);
+            } catch {}
+          });
+
+          ws.on('close', () => {
+            clearTimeout(idleTimer);
+            ptyProcess.kill();
+          });
+
+          ws.on('error', () => {
+            clearTimeout(idleTimer);
+            ptyProcess.kill();
+          });
+        }).catch((err) => {
+          ws.send(`\r\n\x1b[31mError: ${err.message}\x1b[0m\r\n`);
+          if (err.code === 'ERR_MODULE_NOT_FOUND') {
+            ws.send(`\x1b[33mRun: npm install node-pty\x1b[0m\r\n`);
+          }
+          ws.close();
+        });
+      });
+    } else {
+      socket.destroy();
+    }
+  });
+
   return new Promise((resolve, reject) => {
     server.on('error', reject);
     server.listen(port, '127.0.0.1', () => {

package/src/utils/prompt.js

@@ -0,0 +1,38 @@
+import readline from 'node:readline';
+
+export function isInteractive() {
+  return process.stdin.isTTY === true;
+}
+
+export function ask(question, defaultValue = '') {
+  if (!isInteractive()) {
+    return Promise.resolve(defaultValue);
+  }
+
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+  return new Promise((resolve) => {
+    const prompt = defaultValue ? `${question} [${defaultValue}]: ` : `${question}: `;
+    rl.question(prompt, (answer) => {
+      rl.close();
+      resolve(answer.trim() || defaultValue);
+    });
+  });
+}
+
+export async function askRequired(question) {
+  if (!isInteractive()) {
+    return '';
+  }
+
+  let answer = '';
+  while (!answer) {
+    answer = await ask(question);
+    if (!answer) {
+      console.log('This field is required.');
+    }
+  }
+  return answer;
+}