testeranto 0.202.0 → 0.203.0

package/src/components/pure/ProcessTerminal.tsx

@@ -0,0 +1,51 @@
+import React, { useCallback } from 'react';
+import { Process } from './ProcessManagerViewTypes';
+import { TerminalLogs } from './TerminalLogs';
+import { TerminalInput } from './TerminalInput';
+import { useTerminalWebSocket } from '../../hooks/useTerminalWebSocket';
+
+interface ProcessTerminalProps {
+  selectedProcess: Process | null;
+  ws: WebSocket | null;
+}
+
+export const ProcessTerminal: React.FC<ProcessTerminalProps> = ({
+  selectedProcess,
+  ws,
+}) => {
+  const { processLogs } = useTerminalWebSocket(ws, selectedProcess);
+
+  const handleInput = useCallback((data: string) => {
+    if (
+      ws &&
+      ws.readyState === WebSocket.OPEN &&
+      selectedProcess?.status === "running"
+    ) {
+
+      ws.send(
+        JSON.stringify({
+          type: "stdin",
+          processId: selectedProcess.processId,
+          data: data,
+        })
+      );
+    }
+  }, [ws, selectedProcess]);
+
+  if (!selectedProcess) {
+    return (
+      <div className="text-center text-muted mt-5">
+        <i>Terminal will appear here when a process is selected</i>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-grow-1 d-flex flex-column" style={{ minHeight: 0 }}>
+      <TerminalLogs logs={processLogs} />
+      {selectedProcess.status === "running" && (
+        <TerminalInput onInput={handleInput} />
+      )}
+    </div>
+  );
+};

package/src/components/pure/SingleProcessView.tsx

@@ -1,231 +1,140 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Container, Badge, Button, Alert } from 'react-bootstrap';
-import { Process } from './ProcessManagerView';
-import { useWebSocket } from '../../App';
-
-interface SingleProcessViewProps {
-  process: Process | null;
-  onBack: () => void;
-  loading: boolean;
-  onKillProcess?: (processId: string) => void;
-}
-
-export const SingleProcessView: React.FC<SingleProcessViewProps> = ({
-  process,
-  onBack,
-  loading,
-  onKillProcess,
-}) => {
-  const terminalRef = useRef<HTMLDivElement>(null);
-  const [inputEnabled, setInputEnabled] = useState(false);
-  const ws = useWebSocket();
-
-  // Update input enabled status
-  useEffect(() => {
-    setInputEnabled(process?.status === 'running');
-  }, [process?.status]);
-
-  // Handle user input
-  const handleInput = (data: string) => {
-    if (ws && ws.readyState === WebSocket.OPEN && process?.status === 'running') {
-      console.log('Sending stdin:', data);
-      ws.send(JSON.stringify({
-        type: 'stdin',
-        processId: process.processId,
-        data: data
-      }));
-    } else {
-      console.log('Cannot send stdin - conditions not met:', {
-        wsExists: !!ws,
-        wsReady: ws?.readyState,
-        processStatus: process?.status
-      });
-    }
-  };
-  const getStatusBadge = (process: Process) => {
-    switch (process.status) {
-      case 'running':
-        return <Badge bg="success">Running</Badge>;
-      case 'exited':
-        return <Badge bg="secondary">Exited ({process.exitCode})</Badge>;
-      case 'error':
-        return <Badge bg="danger">Error</Badge>;
-      default:
-        return <Badge bg="warning">Unknown</Badge>;
-    }
-  };
-
-  if (loading) {
-    return <div>Initializing terminal...</div>;
-  }
-
-  if (!process) {
-    return (
-      <Alert variant="warning">
-        Process not found or not running. The process may have completed.
-      </Alert>
-    );
-  }
-
-  return (
-    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-
-      {/* Main content area */}
-      <div style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
-        {/* Fixed sidebar */}
-        <div
-          className=" border-end"
-          style={{
-            width: '300px',
-            minWidth: '300px',
-            flexShrink: 0,
-            overflowY: 'auto'
-          }}
-        >
-          <div className="p-3">
-
-
-            <div className="mb-3">
-              <strong>Command:</strong>
-              <code className="bg-white p-2 rounded d-block mt-1" style={{ fontSize: '0.8rem' }}>
-                {process.command}
-              </code>
-            </div>
-
-            <div className="mb-2">
-              <strong>Status:</strong>
-              <div className="mt-1">{getStatusBadge(process)}</div>
-            </div>
-
-            <div className="mb-2">
-              <strong>PID:</strong>
-              <div className="text-muted">{process.pid || 'N/A'}</div>
-            </div>
-
-            <div className="mb-2">
-              <strong>Started:</strong>
-              <div className="text-muted">{new Date(process.timestamp).toLocaleString()}</div>
-            </div>
-
-            {process.exitCode !== undefined && (
-              <div className="mb-2">
-                <strong>Exit Code:</strong>
-                <div className="text-muted">{process.exitCode}</div>
-              </div>
-            )}
-
-            {process.error && (
-              <div className="mt-3">
-                <strong className="text-danger">Error:</strong>
-                <div className="text-danger small mt-1">{process.error}</div>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Scrollable logs area */}
-        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
-          {/* Log header */}
-          <div className="d-flex justify-content-between align-items-center p-3 border-bottom bg-white" style={{ flexShrink: 0 }}>
-
-            <small className="text-muted">
-              {process.logs?.length || 0} lines
-            </small>
-          </div>
-
-          {/* Scrollable log content */}
-          <div
-            className="bg-dark text-light flex-grow-1"
-            style={{
-              overflowY: 'auto',
-              fontFamily: 'Monaco, Menlo, "Ubuntu Mono", monospace',
-              fontSize: '14px',
-              lineHeight: '1.4',
-              padding: '1rem'
-            }}
-            ref={(el) => {
-              // Auto-scroll to bottom when logs update
-              if (el) {
-                el.scrollTop = el.scrollHeight;
-              }
-            }}
-          >
-            {process.logs && process.logs.length > 0 ? (
-              <pre className="mb-0" style={{
-                whiteSpace: 'pre-wrap',
-                wordBreak: 'break-word',
-                backgroundColor: 'transparent',
-                border: 'none',
-                color: 'inherit'
-              }}>
-                {process.logs.join('')}
-              </pre>
-            ) : (
-              <div className="text-muted text-center py-4">
-                <i>No output yet</i>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {/* Fixed input at the bottom */}
-      {inputEnabled && (
-        <div className="border-top bg-white p-3" style={{ flexShrink: 0 }}>
-          <div className="input-group">
-            <input
-              type="text"
-              className="form-control"
-              placeholder="Type input and press Enter..."
-              onKeyPress={(e) => {
-                if (e.key === 'Enter') {
-                  const target = e.target as HTMLInputElement;
-                  const inputValue = target.value;
-                  if (inputValue.trim()) {
-                    handleInput(inputValue + '\n');
-                    target.value = '';
-                  }
-                }
-              }}
-              autoFocus
-            />
-            <button
-              className="btn btn-primary"
-              type="button"
-              onClick={() => {
-                const input = document.querySelector('input') as HTMLInputElement;
-                const inputValue = input.value;
-                if (inputValue.trim()) {
-                  handleInput(inputValue + '\n');
-                  input.value = '';
-                }
-              }}
-            >
-              Send
-            </button>
-          </div>
-          <small className="text-muted">
-            💡 Press Enter to send input to the process
-          </small>
-        </div>
-      )}
-
-      {/* Status alerts - fixed positioning */}
-      {!inputEnabled && process.status === 'running' && (
-        <Alert variant="info" className="m-3" style={{ flexShrink: 0 }}>
-          <Alert.Heading className="h6">Input Disabled</Alert.Heading>
-          <small>Terminal input is temporarily unavailable. Try refreshing the page.</small>
-        </Alert>
-      )}
-
-      {process.status !== 'running' && (
-        <Alert variant="secondary" className="m-3" style={{ flexShrink: 0 }}>
-          <Alert.Heading className="h6">Read-only Mode</Alert.Heading>
-          <small>
-            This process is no longer running. You can view the output logs but cannot send input.
-          </small>
-        </Alert>
-      )}
-    </div>
-  );
-};
+// import React, { useEffect, useState, useCallback, useMemo } from 'react';
+// import { Badge, Alert } from 'react-bootstrap';
+// import { Process } from './ProcessManagerView';
+// import { useWebSocket } from '../../App';
+// import { ProcessSidebar } from './ProcessSidebar';
+// import { ProcessLogs } from './ProcessLogs';
+// import { ProcessInput } from './ProcessInput';
+
+// interface SingleProcessViewProps {
+//   process: Process | null;
+//   onBack: () => void;
+//   loading: boolean;
+//   onKillProcess?: (processId: string) => void;
+// }
+
+// export const SingleProcessView: React.FC<SingleProcessViewProps> = ({
+//   process,
+//   loading,
+// }) => {
+//   const ws = useWebSocket();
+//   const [inputValue, setInputValue] = useState('');
+  
+//   // Memoized derived state
+//   const isRunning = useMemo(() => process?.status === 'running', [process?.status]);
+//   const webSocketStatus = useMemo(() => {
+//     const currentWs = ws?.ws;
+//     if (!currentWs) return 'disconnected';
+//     switch (currentWs.readyState) {
+//       case WebSocket.CONNECTING: return 'connecting';
+//       case WebSocket.OPEN: return 'connected';
+//       case WebSocket.CLOSING: return 'closing';
+//       case WebSocket.CLOSED: return 'disconnected';
+//       default: return 'unknown';
+//     }
+//   }, [ws?.ws?.readyState]);
+
+//   // Handle user input
+//   const handleInput = useCallback((data: string) => {
+//     const currentWs = ws?.ws;
+    
+//     console.log('handleInput called with:', {
+//       data,
+//       hasWs: !!currentWs,
+//       wsReadyState: currentWs?.readyState,
+//       processId: process?.processId,
+//       processStatus: process?.status
+//     });
+    
+//     if (currentWs && currentWs.readyState === WebSocket.OPEN && process?.status === 'running') {
+//       console.log('Sending stdin:', data);
+//       const message = JSON.stringify({
+//         type: 'stdin',
+//         processId: process.processId,
+//         data: data
+//       });
+//       console.log('Sending message:', message);
+//       currentWs.send(message);
+//     } else {
+//       console.log('Cannot send stdin - conditions not met:', {
+//         wsExists: !!currentWs,
+//         wsReadyState: currentWs?.readyState,
+//         processStatus: process?.status,
+//         processId: process?.processId
+//       });
+//     }
+//   }, [ws?.ws, process?.processId, process?.status]);
+
+//   const handleInputSubmit = useCallback(() => {
+//     console.log('handleInputSubmit called, inputValue:', inputValue);
+//     if (inputValue.trim()) {
+//       console.log('Submitting input:', inputValue);
+//       handleInput(inputValue + '\n');
+//       setInputValue('');
+//     } else {
+//       console.log('Input value is empty or whitespace only');
+//     }
+//   }, [inputValue, handleInput]);
+
+//   const handleKeyPress = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
+//     console.log('Key pressed:', e.key);
+//     if (e.key === 'Enter') {
+//       console.log('Enter key detected, calling handleInputSubmit');
+//       handleInputSubmit();
+//       e.preventDefault();
+//     }
+//   }, [handleInputSubmit]);
+
+//   const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+//     console.log('Input changed:', e.target.value);
+//     setInputValue(e.target.value);
+//   }, []);
+
+//   // Render loading state
+//   if (loading) {
+//     return <div>Initializing terminal...</div>;
+//   }
+
+//   // Render process not found state
+//   if (!process) {
+//     return (
+//       <Alert variant="warning">
+//         Process not found or not running. The process may have completed.
+//       </Alert>
+//     );
+//   }
+
+//   return (
+//     <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+//       {/* Main content area */}
+//       <div style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
+//         {/* Sidebar */}
+//         <ProcessSidebar process={process} webSocketStatus={webSocketStatus} />
+        
+//         {/* Logs area */}
+//         <ProcessLogs logs={process.logs} />
+//       </div>
+
+//       {/* Input area */}
+//       {isRunning && (
+//         <ProcessInput
+//           inputValue={inputValue}
+//           webSocketStatus={webSocketStatus}
+//           onInputChange={handleInputChange}
+//           onKeyPress={handleKeyPress}
+//           onSubmit={handleInputSubmit}
+//         />
+//       )}
+
+//       {/* Status alerts */}
+//       {!isRunning && (
+//         <Alert variant="secondary" className="m-3" style={{ flexShrink: 0 }}>
+//           <Alert.Heading className="h6">Read-only Mode</Alert.Heading>
+//           <small>
+//             This process is no longer running. You can view the output logs but cannot send input.
+//           </small>
+//         </Alert>
+//       )}
+//     </div>
+//   );
+// };

package/src/components/pure/TerminalInput.tsx

@@ -0,0 +1,73 @@
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+
+interface TerminalInputProps {
+  onInput: (data: string) => void;
+}
+
+export const TerminalInput: React.FC<TerminalInputProps> = ({ onInput }) => {
+  const [inputValue, setInputValue] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleSubmit = useCallback(() => {
+    if (inputValue.trim()) {
+      onInput(inputValue + '\n');
+      setInputValue('');
+    }
+  }, [inputValue, onInput]);
+
+  const handleKeyPress = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      handleSubmit();
+      e.preventDefault();
+    }
+  }, [handleSubmit]);
+
+  const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+  }, []);
+
+  // Focus the input after submission
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [inputValue]);
+
+  // const handleButtonClick = useCallback((e: React.MouseEvent<HTMLButtonElement>) => {
+  //   e.stopPropagation();
+  //   handleSubmit();
+  // }, [handleSubmit]);
+
+  return (
+    <div className="border-top bg-white p-2 mt-2" style={{ flexShrink: 0 }}>
+      <div className="input-group">
+        <input
+          ref={inputRef}
+          type="text"
+          className="form-control"
+          placeholder="Type input and press Enter..."
+          value={inputValue}
+          onChange={handleInputChange}
+          onKeyPress={handleKeyPress}
+          autoFocus
+          onClick={(e) => {
+            e.stopPropagation();
+            e.currentTarget.focus();
+          }}
+          onFocus={(e) => {
+            e.target.select();
+          }}
+          style={{ cursor: 'text' }}
+        />
+        <button
+          className="btn btn-primary"
+          type="button"
+          onClick={handleSubmit}
+          disabled={!inputValue.trim()}
+        >
+          Send
+        </button>
+      </div>
+    </div>
+  );
+};

package/src/components/pure/TerminalLogs.tsx

@@ -0,0 +1,80 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { Button } from 'react-bootstrap';
+
+interface TerminalLogsProps {
+  logs: string[];
+}
+
+export const TerminalLogs: React.FC<TerminalLogsProps> = ({ logs }) => {
+  const [autoScroll, setAutoScroll] = useState(true);
+  const logsContainerRef = useRef<HTMLDivElement>(null);
+
+  // Auto-scroll to bottom when new logs arrive and autoScroll is enabled
+  useEffect(() => {
+    if (autoScroll && logsContainerRef.current) {
+      logsContainerRef.current.scrollTop = logsContainerRef.current.scrollHeight;
+    }
+  }, [logs, autoScroll]);
+
+  // Handle scroll events to determine if we should auto-scroll
+  const handleLogsScroll = useCallback(() => {
+    if (logsContainerRef.current) {
+      const { scrollTop, scrollHeight, clientHeight } = logsContainerRef.current;
+      const isAtBottom = scrollHeight - scrollTop <= clientHeight + 10;
+      setAutoScroll(isAtBottom);
+    }
+  }, []);
+
+  const handleScrollToBottom = useCallback(() => {
+    setAutoScroll(true);
+    if (logsContainerRef.current) {
+      logsContainerRef.current.scrollTop = logsContainerRef.current.scrollHeight;
+    }
+  }, []);
+
+  return (
+    <div
+      ref={logsContainerRef}
+      className="bg-dark text-light flex-grow-1"
+      style={{
+        overflowY: "auto",
+        fontFamily: 'Monaco, Menlo, "Ubuntu Mono", monospace',
+        fontSize: "14px",
+        lineHeight: "1.4",
+        padding: "0.5rem"
+      }}
+      onScroll={handleLogsScroll}
+    >
+      {logs.length > 0 ? (
+        <pre
+          className="mb-0"
+          style={{
+            whiteSpace: "pre-wrap",
+            wordBreak: "break-word",
+            backgroundColor: "transparent",
+            border: "none",
+            color: "inherit",
+          }}
+        >
+          {logs.join("")}
+        </pre>
+      ) : (
+        <div className="text-muted text-center py-4">
+          <i>No output yet</i>
+        </div>
+      )}
+      {/* Auto-scroll indicator */}
+      {!autoScroll && (
+        <div className="position-sticky bottom-0 d-flex justify-content-center mb-2">
+          <Button
+            variant="primary"
+            size="sm"
+            onClick={handleScrollToBottom}
+          >
+            Scroll to Bottom
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};