hjworktree-cli 2.0.0

package/web/src/components/Terminal/TerminalPanel.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { useAppStore } from '../../stores/useAppStore.js';
+import { useSocket } from '../../hooks/useSocket.js';
+import XTerminal from './XTerminal.js';
+
+function TerminalPanel() {
+  const { terminals, activeTerminalIndex, setActiveTerminal, removeTerminal, clearAllTerminals, reset } = useAppStore();
+  const { emit } = useSocket();
+
+  const handleCloseTerminal = async (sessionId: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+
+    // Kill the terminal via socket
+    emit('terminal:kill', { sessionId });
+
+    // Find the worktree name to delete
+    const terminal = terminals.find(t => t.sessionId === sessionId);
+    if (terminal) {
+      try {
+        await fetch(`/api/worktrees/${terminal.worktreeName}`, {
+          method: 'DELETE',
+        });
+      } catch (error) {
+        console.error('Failed to delete worktree:', error);
+      }
+    }
+
+    removeTerminal(sessionId);
+  };
+
+  const handleCloseAll = async () => {
+    // Kill all terminals via socket
+    for (const terminal of terminals) {
+      emit('terminal:kill', { sessionId: terminal.sessionId });
+    }
+
+    // Delete all worktrees
+    try {
+      await fetch('/api/worktrees', {
+        method: 'DELETE',
+      });
+    } catch (error) {
+      console.error('Failed to delete worktrees:', error);
+    }
+
+    clearAllTerminals();
+    reset();
+  };
+
+  const handleBackToSetup = () => {
+    if (terminals.length > 0) {
+      const confirmed = window.confirm(
+        'This will terminate all running agents and delete all worktrees. Are you sure you want to go back to setup?'
+      );
+      if (confirmed) {
+        handleCloseAll();
+      }
+    } else {
+      reset();
+    }
+  };
+
+  return (
+    <div className="terminal-panel">
+      <div className="terminal-tabs">
+        {terminals.map((terminal, index) => (
+          <button
+            key={terminal.sessionId}
+            className={`terminal-tab ${index === activeTerminalIndex ? 'active' : ''}`}
+            onClick={() => setActiveTerminal(index)}
+          >
+            <span className={`status ${terminal.status}`} />
+            <span>{terminal.worktreeName}</span>
+            <button
+              className="close-btn"
+              onClick={(e) => handleCloseTerminal(terminal.sessionId, e)}
+              title="Close terminal"
+            >
+              &times;
+            </button>
+          </button>
+        ))}
+
+        <div className="terminal-actions">
+          <button onClick={handleBackToSetup}>
+            Back to Setup
+          </button>
+          <button className="danger" onClick={handleCloseAll}>
+            Close All
+          </button>
+        </div>
+      </div>
+
+      <div className="terminal-container">
+        {terminals.map((terminal, index) => (
+          <div
+            key={terminal.sessionId}
+            className={`terminal-wrapper ${index !== activeTerminalIndex ? 'hidden' : ''}`}
+          >
+            <XTerminal
+              sessionId={terminal.sessionId}
+              worktreePath={terminal.worktreePath}
+              agentType={terminal.agentType}
+              isActive={index === activeTerminalIndex}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default TerminalPanel;

package/web/src/components/Terminal/XTerminal.tsx

@@ -0,0 +1,203 @@
+import React, { useEffect, useRef, useCallback } from 'react';
+import { Terminal } from '@xterm/xterm';
+import { FitAddon } from '@xterm/addon-fit';
+import { useSocket } from '../../hooks/useSocket';
+import { useAppStore } from '../../stores/useAppStore';
+import type { AgentId, TerminalOutputData } from '../../../../shared/types/index';
+import '@xterm/xterm/css/xterm.css';
+
+interface XTerminalProps {
+  sessionId: string;
+  worktreePath: string;
+  agentType: AgentId;
+  isActive: boolean;
+}
+
+function XTerminal({ sessionId, worktreePath, agentType, isActive }: XTerminalProps) {
+  const terminalRef = useRef<HTMLDivElement>(null);
+  const termRef = useRef<Terminal | null>(null);
+  const fitAddonRef = useRef<FitAddon | null>(null);
+  const initializedRef = useRef(false);
+  const { emit, on, off, connected } = useSocket();
+  const updateTerminalStatus = useAppStore((state) => state.updateTerminalStatus);
+
+  // Initialize terminal
+  useEffect(() => {
+    if (!terminalRef.current || initializedRef.current) return;
+
+    const term = new Terminal({
+      cursorBlink: true,
+      fontSize: 14,
+      fontFamily: "'JetBrains Mono', Menlo, Monaco, 'Courier New', monospace",
+      theme: {
+        background: '#0d1117',
+        foreground: '#c9d1d9',
+        cursor: '#58a6ff',
+        cursorAccent: '#0d1117',
+        black: '#0d1117',
+        red: '#f85149',
+        green: '#3fb950',
+        yellow: '#d29922',
+        blue: '#58a6ff',
+        magenta: '#a371f7',
+        cyan: '#39c5cf',
+        white: '#c9d1d9',
+        brightBlack: '#6e7681',
+        brightRed: '#ff7b72',
+        brightGreen: '#56d364',
+        brightYellow: '#e3b341',
+        brightBlue: '#79c0ff',
+        brightMagenta: '#bc8cff',
+        brightCyan: '#56d4dd',
+        brightWhite: '#f0f6fc',
+      },
+      allowProposedApi: true,
+    });
+
+    const fitAddon = new FitAddon();
+    term.loadAddon(fitAddon);
+    term.open(terminalRef.current);
+
+    termRef.current = term;
+    fitAddonRef.current = fitAddon;
+    initializedRef.current = true;
+
+    // Initial fit
+    setTimeout(() => {
+      fitAddon.fit();
+    }, 0);
+
+    return () => {
+      term.dispose();
+      initializedRef.current = false;
+    };
+  }, []);
+
+  // Handle socket connection and terminal creation
+  useEffect(() => {
+    if (!termRef.current || !connected) return;
+
+    const term = termRef.current;
+    const fitAddon = fitAddonRef.current;
+
+    // Handle terminal output
+    const handleOutput = (data: unknown) => {
+      const outputData = data as TerminalOutputData;
+      if (outputData.sessionId === sessionId) {
+        term.write(outputData.data);
+      }
+    };
+
+    // Handle terminal created
+    const handleCreated = (data: unknown) => {
+      const { sessionId: createdId } = data as { sessionId: string };
+      if (createdId === sessionId) {
+        updateTerminalStatus(sessionId, 'running');
+      }
+    };
+
+    // Handle terminal exit
+    const handleExit = (data: unknown) => {
+      const { sessionId: exitedId } = data as { sessionId: string };
+      if (exitedId === sessionId) {
+        updateTerminalStatus(sessionId, 'stopped');
+        term.write('\r\n[Process exited]\r\n');
+      }
+    };
+
+    // Handle terminal error
+    const handleError = (data: unknown) => {
+      const { sessionId: errorId, error } = data as { sessionId: string; error: string };
+      if (errorId === sessionId) {
+        updateTerminalStatus(sessionId, 'error');
+        term.write(`\r\n[Error: ${error}]\r\n`);
+      }
+    };
+
+    // Register event handlers
+    on('terminal:output', handleOutput);
+    on('terminal:created', handleCreated);
+    on('terminal:exit', handleExit);
+    on('terminal:error', handleError);
+
+    // Send input to server
+    const onDataDisposable = term.onData((data) => {
+      emit('terminal:input', { sessionId, data });
+    });
+
+    // Create terminal session
+    emit('terminal:create', {
+      sessionId,
+      worktreePath,
+      agentType,
+    });
+
+    // Send initial resize
+    if (fitAddon) {
+      emit('terminal:resize', {
+        sessionId,
+        cols: term.cols,
+        rows: term.rows,
+      });
+    }
+
+    return () => {
+      off('terminal:output', handleOutput);
+      off('terminal:created', handleCreated);
+      off('terminal:exit', handleExit);
+      off('terminal:error', handleError);
+      onDataDisposable.dispose();
+    };
+  }, [sessionId, worktreePath, agentType, connected, emit, on, off, updateTerminalStatus]);
+
+  // Handle resize
+  useEffect(() => {
+    if (!terminalRef.current || !fitAddonRef.current) return;
+
+    const fitAddon = fitAddonRef.current;
+    const term = termRef.current;
+
+    const handleResize = () => {
+      if (isActive && term && fitAddon) {
+        fitAddon.fit();
+        emit('terminal:resize', {
+          sessionId,
+          cols: term.cols,
+          rows: term.rows,
+        });
+      }
+    };
+
+    const resizeObserver = new ResizeObserver(() => {
+      handleResize();
+    });
+
+    resizeObserver.observe(terminalRef.current);
+
+    // Also fit when becoming active
+    if (isActive) {
+      setTimeout(handleResize, 0);
+    }
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [sessionId, isActive, emit]);
+
+  // Focus terminal when active
+  useEffect(() => {
+    if (isActive && termRef.current) {
+      termRef.current.focus();
+    }
+  }, [isActive]);
+
+  return (
+    <div
+      ref={terminalRef}
+      className="terminal"
+      style={{ height: '100%', width: '100%' }}
+    />
+  );
+}
+
+export default XTerminal;

package/web/src/hooks/useSocket.ts

@@ -0,0 +1,80 @@
+import { useEffect, useState, useCallback, useRef } from 'react';
+import { io, Socket } from 'socket.io-client';
+
+interface SocketState {
+  socket: Socket | null;
+  connected: boolean;
+}
+
+// Singleton socket instance
+let globalSocket: Socket | null = null;
+
+export function useSocket(): SocketState & {
+  emit: (event: string, data: unknown) => void;
+  on: (event: string, callback: (data: unknown) => void) => void;
+  off: (event: string, callback?: (data: unknown) => void) => void;
+} {
+  const [connected, setConnected] = useState(false);
+  const socketRef = useRef<Socket | null>(null);
+
+  useEffect(() => {
+    // Create singleton socket
+    if (!globalSocket) {
+      globalSocket = io(window.location.origin, {
+        reconnection: true,
+        reconnectionAttempts: 5,
+        reconnectionDelay: 1000,
+      });
+    }
+
+    socketRef.current = globalSocket;
+
+    const handleConnect = () => {
+      console.log('Socket connected');
+      setConnected(true);
+    };
+
+    const handleDisconnect = () => {
+      console.log('Socket disconnected');
+      setConnected(false);
+    };
+
+    globalSocket.on('connect', handleConnect);
+    globalSocket.on('disconnect', handleDisconnect);
+
+    // Check initial connection state
+    if (globalSocket.connected) {
+      setConnected(true);
+    }
+
+    return () => {
+      // Don't disconnect on unmount - keep singleton alive
+      globalSocket?.off('connect', handleConnect);
+      globalSocket?.off('disconnect', handleDisconnect);
+    };
+  }, []);
+
+  const emit = useCallback((event: string, data: unknown) => {
+    socketRef.current?.emit(event, data);
+  }, []);
+
+  const on = useCallback((event: string, callback: (data: unknown) => void) => {
+    socketRef.current?.on(event, callback);
+  }, []);
+
+  const off = useCallback((event: string, callback?: (data: unknown) => void) => {
+    if (callback) {
+      socketRef.current?.off(event, callback);
+    } else {
+      socketRef.current?.off(event);
+    }
+  }, []);
+
+  return {
+    socket: socketRef.current,
+    connected,
+    emit,
+    on,
+    off,
+  };
+}

package/web/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './styles/global.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);