testeranto 0.200.1 → 0.203.0

package/src/components/pure/SingleProcessView.tsx

@@ -1,68 +1,101 @@
-// import React, { useEffect, useRef, useState } from 'react';
-// import { Container, Badge, Button, Alert } from 'react-bootstrap';
+// import React, { useEffect, useState, useCallback, useMemo } from 'react';
+// import { Badge, Alert } from 'react-bootstrap';
 // import { Process } from './ProcessManagerView';
-// import { NavBar } from './NavBar';
+// 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;
-//   ws?: WebSocket | null;
 // }
 
 // export const SingleProcessView: React.FC<SingleProcessViewProps> = ({
 //   process,
-//   onBack,
 //   loading,
-//   onKillProcess,
-//   ws
 // }) => {
-//   const terminalRef = useRef<HTMLDivElement>(null);
-//   const [inputEnabled, setInputEnabled] = useState(false);
-
-//   // Phase 1: Basic implementation - just show logs in a pre element
-//   // We'll upgrade to xterm.js later when we're ready
-
-//   // Update input enabled status
-//   useEffect(() => {
-//     setInputEnabled(process?.status === 'running');
-//   }, [process?.status]);
+//   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 = (data: string) => {
-//     if (ws && ws.readyState === WebSocket.OPEN && process?.status === 'running') {
+//   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);
-//       ws.send(JSON.stringify({
+//       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: !!ws,
-//         wsReady: ws?.readyState,
-//         processStatus: process?.status
+//         wsExists: !!currentWs,
+//         wsReadyState: currentWs?.readyState,
+//         processStatus: process?.status,
+//         processId: process?.processId
 //       });
 //     }
-//   };
-//   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>;
+//   }, [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">
@@ -73,156 +106,28 @@
 
 //   return (
 //     <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-
 //       {/* Main content area */}
 //       <div style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
-//         {/* Fixed sidebar */}
-//         <div
-//           className="bg-light 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>
+//         {/* Sidebar */}
+//         <ProcessSidebar process={process} webSocketStatus={webSocketStatus} />
+        
+//         {/* Logs area */}
+//         <ProcessLogs logs={process.logs} />
 //       </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>
+//       {/* Input area */}
+//       {isRunning && (
+//         <ProcessInput
+//           inputValue={inputValue}
+//           webSocketStatus={webSocketStatus}
+//           onInputChange={handleInputChange}
+//           onKeyPress={handleKeyPress}
+//           onSubmit={handleInputSubmit}
+//         />
 //       )}
 
-//       {process.status !== 'running' && (
+//       {/* Status alerts */}
+//       {!isRunning && (
 //         <Alert variant="secondary" className="m-3" style={{ flexShrink: 0 }}>
 //           <Alert.Heading className="h6">Read-only Mode</Alert.Heading>
 //           <small>

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>
+  );
+};

package/src/components/pure/TestPageView.test/specification.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { ITestSpecification } from "../../../CoreTypes";
 import { ISelection, O } from "./types";