bmad-elsabro 1.0.0

package/renderer/components/Terminal.tsx

@@ -0,0 +1,523 @@
+/**
+ * Terminal Component
+ *
+ * Integrated terminal for executing shell commands within the application.
+ * Provides command input, output display, and history navigation.
+ *
+ * Features:
+ * - Command execution with real-time output
+ * - Command history (up/down arrow keys)
+ * - Working directory display and navigation
+ * - Copy output to clipboard
+ * - Clear terminal
+ * - Cross-platform support (Windows, macOS, Linux)
+ * - Dark/light theme support
+ * - Accessibility support
+ */
+
+import React, { useState, useRef, useEffect, KeyboardEvent, useCallback } from 'react';
+
+declare global {
+  interface Window {
+    electron: {
+      invoke: (channel: string, data?: unknown) => Promise<any>;
+    };
+  }
+}
+
+export interface TerminalOutput {
+  /**
+   * Unique identifier for the output entry
+   */
+  id: string;
+
+  /**
+   * Type of entry
+   */
+  type: 'command' | 'output' | 'error' | 'info';
+
+  /**
+   * Content of the entry
+   */
+  content: string;
+
+  /**
+   * Timestamp of the entry
+   */
+  timestamp: Date;
+
+  /**
+   * Working directory when command was executed
+   */
+  cwd?: string;
+
+  /**
+   * Exit code (for command outputs)
+   */
+  exitCode?: number | null;
+
+  /**
+   * Execution time in milliseconds
+   */
+  executionTime?: number;
+}
+
+export interface TerminalProps {
+  /**
+   * Initial working directory
+   */
+  initialCwd?: string;
+
+  /**
+   * Custom CSS class name
+   */
+  className?: string;
+
+  /**
+   * Maximum number of history entries to keep
+   */
+  maxHistory?: number;
+
+  /**
+   * Maximum number of output entries to display
+   */
+  maxOutputLines?: number;
+}
+
+/**
+ * Terminal Component
+ *
+ * Provides an integrated terminal interface for command execution.
+ * Supports command history, output display, and directory navigation.
+ *
+ * @example
+ * ```tsx
+ * <Terminal
+ *   initialCwd="/home/user/project"
+ *   maxHistory={100}
+ * />
+ * ```
+ */
+export const Terminal: React.FC<TerminalProps> = ({
+  initialCwd,
+  className = '',
+  maxHistory = 100,
+  maxOutputLines = 500,
+}) => {
+  const [output, setOutput] = useState<TerminalOutput[]>([]);
+  const [command, setCommand] = useState('');
+  const [cwd, setCwd] = useState(initialCwd || '~');
+  const [isExecuting, setIsExecuting] = useState(false);
+  const [commandHistory, setCommandHistory] = useState<string[]>([]);
+  const [historyIndex, setHistoryIndex] = useState(-1);
+  const [shellInfo, setShellInfo] = useState<{ shell: string; platform: string } | null>(null);
+
+  const outputRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  /**
+   * Scroll to bottom of output
+   */
+  const scrollToBottom = useCallback(() => {
+    if (outputRef.current) {
+      outputRef.current.scrollTop = outputRef.current.scrollHeight;
+    }
+  }, []);
+
+  /**
+   * Add an entry to the output
+   */
+  const addOutput = useCallback((entry: Omit<TerminalOutput, 'id' | 'timestamp'>) => {
+    setOutput((prev) => {
+      const newOutput = [
+        ...prev,
+        {
+          ...entry,
+          id: `output-${Date.now()}-${Math.random()}`,
+          timestamp: new Date(),
+        },
+      ];
+
+      // Limit output lines
+      if (newOutput.length > maxOutputLines) {
+        return newOutput.slice(-maxOutputLines);
+      }
+
+      return newOutput;
+    });
+
+    // Scroll to bottom after adding output
+    setTimeout(scrollToBottom, 0);
+  }, [maxOutputLines, scrollToBottom]);
+
+  /**
+   * Execute a command
+   */
+  const executeCommand = useCallback(async (cmd: string) => {
+    if (!cmd.trim() || isExecuting) return;
+
+    setIsExecuting(true);
+
+    // Add command to output
+    addOutput({
+      type: 'command',
+      content: cmd,
+      cwd,
+    });
+
+    try {
+      // Check if it's a cd command
+      if (cmd.trim().startsWith('cd ')) {
+        const newPath = cmd.trim().substring(3).trim();
+        const result = await window.electron.invoke('terminal:set-cwd', newPath);
+
+        if (result.success) {
+          setCwd(result.cwd);
+          addOutput({
+            type: 'info',
+            content: `Changed directory to: ${result.cwd}`,
+          });
+        } else {
+          addOutput({
+            type: 'error',
+            content: result.error || 'Failed to change directory',
+          });
+        }
+      } else if (cmd.trim() === 'clear' || cmd.trim() === 'cls') {
+        // Clear terminal
+        setOutput([]);
+      } else {
+        // Execute command via IPC
+        const result = await window.electron.invoke('terminal:run', {
+          command: cmd,
+          cwd,
+        });
+
+        // Add stdout if present
+        if (result.stdout) {
+          addOutput({
+            type: 'output',
+            content: result.stdout,
+            exitCode: result.exitCode,
+            executionTime: result.executionTime,
+          });
+        }
+
+        // Add stderr if present
+        if (result.stderr) {
+          addOutput({
+            type: 'error',
+            content: result.stderr,
+            exitCode: result.exitCode,
+          });
+        }
+
+        // Add error message if command failed
+        if (!result.success && result.error && !result.stderr) {
+          addOutput({
+            type: 'error',
+            content: result.error,
+            exitCode: result.exitCode,
+          });
+        }
+
+        // If no output at all, show completion message
+        if (!result.stdout && !result.stderr && result.success) {
+          addOutput({
+            type: 'info',
+            content: `Command completed successfully (${result.executionTime}ms)`,
+            exitCode: result.exitCode,
+          });
+        }
+      }
+    } catch (error) {
+      addOutput({
+        type: 'error',
+        content: `Error executing command: ${(error as Error).message}`,
+      });
+    } finally {
+      setIsExecuting(false);
+    }
+  }, [cwd, isExecuting, addOutput]);
+
+  /**
+   * Handle command submission
+   */
+  const handleSubmit = useCallback(() => {
+    const trimmedCommand = command.trim();
+
+    if (!trimmedCommand || isExecuting) return;
+
+    // Add to history
+    setCommandHistory((prev) => {
+      const newHistory = [...prev, trimmedCommand];
+      // Limit history size
+      if (newHistory.length > maxHistory) {
+        return newHistory.slice(-maxHistory);
+      }
+      return newHistory;
+    });
+
+    // Reset history index
+    setHistoryIndex(-1);
+
+    // Execute command
+    executeCommand(trimmedCommand);
+
+    // Clear input
+    setCommand('');
+  }, [command, isExecuting, maxHistory, executeCommand]);
+
+  /**
+   * Handle keyboard shortcuts
+   */
+  const handleKeyDown = useCallback((e: KeyboardEvent<HTMLInputElement>) => {
+    // Submit on Enter
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleSubmit();
+      return;
+    }
+
+    // Navigate history with up/down arrows
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setHistoryIndex((prev) => {
+        const newIndex = prev < commandHistory.length - 1 ? prev + 1 : prev;
+        const historyCommand = commandHistory[commandHistory.length - 1 - newIndex];
+        if (historyCommand) {
+          setCommand(historyCommand);
+        }
+        return newIndex;
+      });
+      return;
+    }
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setHistoryIndex((prev) => {
+        if (prev <= 0) {
+          setCommand('');
+          return -1;
+        }
+        const newIndex = prev - 1;
+        const historyCommand = commandHistory[commandHistory.length - 1 - newIndex];
+        if (historyCommand) {
+          setCommand(historyCommand);
+        }
+        return newIndex;
+      });
+      return;
+    }
+
+    // Clear on Escape
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      setCommand('');
+      setHistoryIndex(-1);
+    }
+  }, [commandHistory, handleSubmit]);
+
+  /**
+   * Clear terminal output
+   */
+  const handleClear = useCallback(() => {
+    setOutput([]);
+  }, []);
+
+  /**
+   * Copy output to clipboard
+   */
+  const handleCopy = useCallback(() => {
+    const text = output
+      .map((entry) => {
+        switch (entry.type) {
+          case 'command':
+            return `$ ${entry.content}`;
+          case 'output':
+          case 'error':
+          case 'info':
+            return entry.content;
+          default:
+            return '';
+        }
+      })
+      .join('\n');
+
+    navigator.clipboard.writeText(text).catch(console.error);
+
+    // Show feedback
+    addOutput({
+      type: 'info',
+      content: 'Output copied to clipboard',
+    });
+  }, [output, addOutput]);
+
+  /**
+   * Initialize shell info and working directory
+   */
+  useEffect(() => {
+    const initialize = async () => {
+      try {
+        // Get shell info
+        const info = await window.electron.invoke('terminal:shell-info');
+        setShellInfo(info);
+
+        // Get current working directory
+        const currentCwd = await window.electron.invoke('terminal:get-cwd');
+        setCwd(currentCwd);
+
+        // Add welcome message
+        addOutput({
+          type: 'info',
+          content: `BMAD Studio Terminal - ${info.shell} on ${info.platform}`,
+        });
+        addOutput({
+          type: 'info',
+          content: `Type 'help' for available commands, 'clear' to clear output`,
+        });
+      } catch (error) {
+        console.error('Failed to initialize terminal:', error);
+      }
+    };
+
+    initialize();
+  }, [addOutput]);
+
+  /**
+   * Focus input on mount
+   */
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  return (
+    <div className={`flex flex-col h-full bg-gray-900 text-gray-100 ${className}`}>
+      {/* Terminal Header */}
+      <div className="flex-none bg-gray-800 border-b border-gray-700 px-4 py-2">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <h2 className="text-sm font-semibold text-gray-100">Terminal</h2>
+            <div className="text-xs text-gray-400 font-mono">
+              {cwd}
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2">
+            {/* Copy Button */}
+            <button
+              onClick={handleCopy}
+              className="px-2 py-1 text-xs bg-gray-700 hover:bg-gray-600 border border-gray-600 rounded transition-colors text-gray-300"
+              aria-label="Copy output to clipboard"
+              title="Copy output to clipboard"
+            >
+              📋 Copy
+            </button>
+
+            {/* Clear Button */}
+            <button
+              onClick={handleClear}
+              className="px-2 py-1 text-xs bg-gray-700 hover:bg-gray-600 border border-gray-600 rounded transition-colors text-gray-300"
+              aria-label="Clear terminal"
+              title="Clear terminal"
+            >
+              🗑️ Clear
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Terminal Output */}
+      <div
+        ref={outputRef}
+        className="flex-1 overflow-y-auto p-4 font-mono text-sm"
+      >
+        {output.length === 0 ? (
+          <div className="text-gray-500 text-xs">
+            No output yet. Type a command below to get started.
+          </div>
+        ) : (
+          <div className="space-y-1">
+            {output.map((entry) => (
+              <div
+                key={entry.id}
+                className={`
+                  ${entry.type === 'command' ? 'text-green-400' : ''}
+                  ${entry.type === 'output' ? 'text-gray-300' : ''}
+                  ${entry.type === 'error' ? 'text-red-400' : ''}
+                  ${entry.type === 'info' ? 'text-blue-400' : ''}
+                `.trim()}
+              >
+                {entry.type === 'command' && (
+                  <span className="text-gray-500 select-none">$ </span>
+                )}
+                <span className="whitespace-pre-wrap break-words">
+                  {entry.content}
+                </span>
+                {entry.exitCode !== undefined && entry.exitCode !== 0 && (
+                  <span className="text-red-500 ml-2 text-xs">
+                    (exit code: {entry.exitCode})
+                  </span>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Terminal Input */}
+      <div className="flex-none bg-gray-800 border-t border-gray-700 p-4">
+        <div className="flex items-center gap-2">
+          <span className="text-green-400 font-mono text-sm select-none">$</span>
+          <input
+            ref={inputRef}
+            type="text"
+            value={command}
+            onChange={(e) => setCommand(e.target.value)}
+            onKeyDown={handleKeyDown}
+            disabled={isExecuting}
+            placeholder="Type a command..."
+            className="
+              flex-1 bg-transparent text-gray-100 font-mono text-sm
+              focus:outline-none
+              disabled:opacity-50 disabled:cursor-not-allowed
+              placeholder-gray-600
+            "
+            aria-label="Terminal command input"
+            aria-describedby="terminal-input-help"
+          />
+          {isExecuting && (
+            <div className="text-yellow-400 text-xs animate-pulse">
+              Executing...
+            </div>
+          )}
+        </div>
+
+        {/* Help Text */}
+        <div
+          id="terminal-input-help"
+          className="mt-2 text-xs text-gray-500 flex items-center gap-4"
+        >
+          <span>
+            <kbd className="px-1 py-0.5 bg-gray-700 rounded text-xs">Enter</kbd>
+            {' '}to execute
+          </span>
+          <span>
+            <kbd className="px-1 py-0.5 bg-gray-700 rounded text-xs">↑</kbd>
+            {' / '}
+            <kbd className="px-1 py-0.5 bg-gray-700 rounded text-xs">↓</kbd>
+            {' '}for history
+          </span>
+          <span>
+            <kbd className="px-1 py-0.5 bg-gray-700 rounded text-xs">Esc</kbd>
+            {' '}to clear input
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+Terminal.displayName = 'Terminal';
+
+export default Terminal;