testeranto 0.202.0 → 0.203.0

package/src/components/pure/ProcessManager.tsx

@@ -1,16 +1,6 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { Modal, Button, ListGroup, Badge } from 'react-bootstrap';
-
-interface Process {
-  processId: string;
-  command: string;
-  pid?: number;
-  status?: 'running' | 'exited' | 'error';
-  exitCode?: number;
-  error?: string;
-  timestamp: string;
-}
+import { Process } from './ProcessManagerViewTypes';
 
 interface ProcessManagerProps {
   show: boolean;
@@ -21,6 +11,38 @@ interface ProcessManagerProps {
 export const ProcessManager: React.FC<ProcessManagerProps> = ({ show, onHide, ws }) => {
   const [processes, setProcesses] = useState<Process[]>([]);
 
+  // Handle WebSocket messages
+  const handleMessage = useCallback((event: MessageEvent) => {
+    try {
+      const data = JSON.parse(event.data);
+      if (data.type === 'runningProcesses') {
+        setProcesses(data.processes.map((p: any) => ({
+          ...p,
+          status: 'running'
+        })));
+      } else if (data.type === 'processStarted') {
+        setProcesses(prev => [...prev, {
+          ...data,
+          status: 'running'
+        }]);
+      } else if (data.type === 'processExited') {
+        setProcesses(prev => prev.map(p =>
+          p.processId === data.processId
+            ? { ...p, status: 'exited', exitCode: data.exitCode }
+            : p
+        ));
+      } else if (data.type === 'processError') {
+        setProcesses(prev => prev.map(p =>
+          p.processId === data.processId
+            ? { ...p, status: 'error', error: data.error }
+            : p
+        ));
+      }
+    } catch (error) {
+      console.error('Error parsing process message:', error);
+    }
+  }, []);
+
   useEffect(() => {
     if (show && ws) {
       // Request current processes when modal is shown
@@ -31,42 +53,11 @@ export const ProcessManager: React.FC<ProcessManagerProps> = ({ show, onHide, ws
   useEffect(() => {
     if (!ws) return;
 
-    const handleMessage = (event: MessageEvent) => {
-      try {
-        const data = JSON.parse(event.data);
-        if (data.type === 'runningProcesses') {
-          setProcesses(data.processes.map((p: any) => ({
-            ...p,
-            status: 'running'
-          })));
-        } else if (data.type === 'processStarted') {
-          setProcesses(prev => [...prev, {
-            ...data,
-            status: 'running'
-          }]);
-        } else if (data.type === 'processExited') {
-          setProcesses(prev => prev.map(p =>
-            p.processId === data.processId
-              ? { ...p, status: 'exited', exitCode: data.exitCode }
-              : p
-          ));
-        } else if (data.type === 'processError') {
-          setProcesses(prev => prev.map(p =>
-            p.processId === data.processId
-              ? { ...p, status: 'error', error: data.error }
-              : p
-          ));
-        }
-      } catch (error) {
-        console.error('Error parsing process message:', error);
-      }
-    };
-
     ws.addEventListener('message', handleMessage);
     return () => ws.removeEventListener('message', handleMessage);
-  }, [ws]);
+  }, [ws, handleMessage]);
 
-  const getStatusBadge = (process: Process) => {
+  const getStatusBadge = useCallback((process: Process) => {
     switch (process.status) {
       case 'running':
         return <Badge bg="success">Running</Badge>;
@@ -77,7 +68,7 @@ export const ProcessManager: React.FC<ProcessManagerProps> = ({ show, onHide, ws
       default:
         return <Badge bg="warning">Unknown</Badge>;
     }
-  };
+  }, []);
 
   return (
     <Modal show={show} onHide={onHide} size="lg">

package/src/components/pure/ProcessManagerView.tsx

@@ -1,21 +1,12 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import React, { useState, useEffect, useRef } from "react";
-import { Container, Row, Col, Badge, Button, Alert } from "react-bootstrap";
-import { useNavigate } from "react-router-dom";
+import React, { useState, useEffect, useCallback } from "react";
+import { Container, Row, Col } from "react-bootstrap";
 import { useWebSocket } from '../../App';
+import { ProcessList } from './ProcessList';
+import { ProcessDetails } from './ProcessDetails';
+import { ProcessTerminal } from './ProcessTerminal';
+import { Process } from './ProcessManagerViewTypes';
 
-export interface Process {
-  processId: string;
-  command: string;
-  pid?: number;
-  status?: "running" | "exited" | "error";
-  exitCode?: number;
-  error?: string;
-  timestamp: string;
-  logs?: string[];
-}
-
-interface ProcessManagerViewProps {
+export interface ProcessManagerViewProps {
   processes: Process[];
   onRefresh: () => void;
   onBack: () => void;
@@ -30,57 +21,13 @@ export const ProcessManagerView: React.FC<ProcessManagerViewProps> = ({
   loading,
   onKillProcess,
 }) => {
-  const navigate = useNavigate();
   const [selectedProcess, setSelectedProcess] = useState<Process | null>(null);
-  // Use the centralized WebSocket from App context
   const { ws } = useWebSocket();
-  const [processLogs, setProcessLogs] = useState<string[]>([]);
-  const [autoScroll, setAutoScroll] = useState(true);
-  const logsContainerRef = useRef<HTMLDivElement>(null);
-  const [isNavbarCollapsed, setIsNavbarCollapsed] = useState(false);
-
-  // Handle WebSocket messages for the selected process
-  useEffect(() => {
-    if (!ws) return;
-    
-    const handleMessage = (event: MessageEvent) => {
-      try {
-        const data = JSON.parse(event.data);
-        // Handle process data response
-        if (
-          data.type === "processData" &&
-          selectedProcess &&
-          data.processId === selectedProcess.processId
-        ) {
-          setSelectedProcess((prev) =>
-            prev
-              ? {
-                ...prev,
-                logs: data.logs || [],
-              }
-              : null
-          );
-          setProcessLogs(data.logs || []);
-        }
-        // Handle new log messages
-        else if (
-          (data.type === "processStdout" || data.type === "processStderr") &&
-          selectedProcess &&
-          data.processId === selectedProcess.processId
-        ) {
-          setProcessLogs((prev) => [...prev, data.data]);
-        }
-      } catch (error) {
-        console.error("Error parsing WebSocket message:", error);
-      }
-    };
 
-    ws.addEventListener('message', handleMessage);
-    
-    return () => {
-      ws.removeEventListener('message', handleMessage);
-    };
-  }, [ws, selectedProcess]);
+  // Handle process selection
+  const handleSelectProcess = useCallback((process: Process) => {
+    setSelectedProcess(process);
+  }, []);
 
   // Request process data when selected
   useEffect(() => {
@@ -94,316 +41,44 @@ export const ProcessManagerView: React.FC<ProcessManagerViewProps> = ({
     }
   }, [selectedProcess, ws]);
 
-  // Auto-scroll to bottom when new logs arrive and autoScroll is enabled
-  useEffect(() => {
-    if (autoScroll && logsContainerRef.current) {
-      logsContainerRef.current.scrollTop =
-        logsContainerRef.current.scrollHeight;
-    }
-  }, [processLogs, autoScroll]);
-
-  // Handle scroll events to determine if we should auto-scroll
-  const handleLogsScroll = () => {
-    if (logsContainerRef.current) {
-      const { scrollTop, scrollHeight, clientHeight } =
-        logsContainerRef.current;
-      const isAtBottom = scrollHeight - scrollTop <= clientHeight + 10; // 10px threshold
-      setAutoScroll(isAtBottom);
-    }
-  };
-
-  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>;
-    }
-  };
-
-  const handleSelectProcess = (process: Process) => {
-    setSelectedProcess(process);
-    setProcessLogs(process.logs || []);
-  };
-
-  const handleInput = (data: string) => {
-    if (
-      ws &&
-      ws.readyState === WebSocket.OPEN &&
-      selectedProcess?.status === "running"
-    ) {
-      ws.send(
-        JSON.stringify({
-          type: "stdin",
-          processId: selectedProcess.processId,
-          data: data,
-        })
-      );
-    }
-  };
-
   return (
     <Container fluid className="px-0 h-100">
       <Row className="g-0" style={{ height: "calc(100vh - 56px)" }}>
-        {/* Left Column - Process List (Compact) */}
-        <Col
-          sm={2}
-          className="border-end"
-          style={{
-            height: "100%",
-            overflow: "auto",
-            backgroundColor: "#f8f9fa",
-          }}
-        >
-
-          <div className="p-1">
-            {[...processes].reverse().map((process) => (
-              <div
-                key={process.processId}
-                className={`p-2 mb-1 rounded ${selectedProcess?.processId === process.processId
-                  ? "bg-primary text-white"
-                  : "bg-white border"
-                  }`}
-                style={{ cursor: "pointer" }}
-                onClick={() => handleSelectProcess(process)}
-                title={process.command}
-              >
-                <div className="d-flex justify-content-between align-items-start">
-                  <div className="flex-grow-1" style={{ minWidth: 0 }}>
-                    <div className="fw-bold text-truncate small">
-                      {process.command.split(" ")[0]}
-                    </div>
-                    <div
-                      className={`text-truncate ${selectedProcess?.processId === process.processId
-                        ? "text-white-50"
-                        : "text-muted"
-                        }`}
-                      style={{ fontSize: "0.7rem" }}
-                    >
-                      PID: {process.pid || "N/A"} |{" "}
-                      {new Date(process.timestamp).toLocaleTimeString()}
-                    </div>
-                  </div>
-                  <div className="ms-2">{getStatusBadge(process)}</div>
-                </div>
-                {process.error && (
-                  <div
-                    className={`mt-1 ${selectedProcess?.processId === process.processId
-                      ? "text-warning"
-                      : "text-danger"
-                      }`}
-                    style={{ fontSize: "0.7rem" }}
-                  >
-                    <div className="text-truncate">Error: {process.error}</div>
-                  </div>
-                )}
-              </div>
-            ))}
-            {processes.length === 0 && !loading && (
-              <div className="p-2 text-center text-muted small">
-                No active processes
-              </div>
-            )}
-            {loading && processes.length === 0 && (
-              <div className="p-2 text-center small">
-                <div className="spinner-border spinner-border-sm" role="status">
-                  <span className="visually-hidden">Loading...</span>
-                </div>
-              </div>
-            )}
-          </div>
+        {/* Process List */}
+        <Col sm={2} className="border-end" style={{
+          height: "100%",
+          overflow: "auto",
+          backgroundColor: "#f8f9fa",
+        }}>
+          <ProcessList
+            processes={processes}
+            selectedProcess={selectedProcess}
+            onSelectProcess={handleSelectProcess}
+            loading={loading}
+          />
         </Col>
 
-        {/* Middle Column - Process Details (5 units) */}
-        <Col
-          sm={5}
-          className="border-end p-3 d-flex flex-column"
-          style={{ height: "100%", overflow: "hidden" }}
-        >
-          {selectedProcess ? (
-            <div className="flex-grow-1 d-flex flex-column">
-              {/* Horizontal controls row */}
-              <div className="d-flex align-items-center gap-2 mb-3 flex-wrap">
-                {/* Status */}
-                <div>{getStatusBadge(selectedProcess)}</div>
-                
-                {/* PID */}
-                <div className="text-muted">
-                  {selectedProcess.pid || "N/A"}
-                </div>
-                
-                {/* Started time */}
-                <div className="text-muted">
-                  {new Date(selectedProcess.timestamp).toLocaleString()}
-                </div>
-                
-                {/* Stop button */}
-                {selectedProcess.status === "running" && onKillProcess && (
-                  <Button
-                    variant="danger"
-                    size="sm"
-                    onClick={() => onKillProcess(selectedProcess.processId)}
-                    className="flex-grow-0 ms-auto"
-                  >
-                    ⏹️ Stop
-                  </Button>
-                )}
-                
-                {/* Exit code if applicable */}
-                {selectedProcess.exitCode !== undefined && (
-                  <div className="text-muted">
-                    {selectedProcess.exitCode}
-                  </div>
-                )}
-              </div>
-              
-              {/* Error message if present */}
-              {selectedProcess.error && (
-                <Alert variant="danger" className="py-2 mb-3">
-                  {selectedProcess.error}
-                </Alert>
-              )}
-              
-              {/* Command styled like terminal */}
-              <div>
-                <div className="mb-1 small text-muted">Command:</div>
-                <div
-                  className="bg-dark text-light p-2 rounded"
-                  style={{
-                    fontFamily: 'Monaco, Menlo, "Ubuntu Mono", monospace',
-                    fontSize: "14px",
-                    lineHeight: "1.4",
-                    overflow: "auto",
-                    whiteSpace: "pre-wrap",
-                    wordBreak: "break-word",
-                    maxHeight: "200px" // Prevent it from expanding too much
-                  }}
-                >
-                  {selectedProcess.command}
-                </div>
-              </div>
-            </div>
-          ) : (
-            <div className="text-center text-muted mt-5">
-              <i>Select a process to view details</i>
-            </div>
-          )}
+        {/* Process Details */}
+        <Col sm={5} className="border-end p-3 d-flex flex-column" style={{ 
+          height: "100%", 
+          overflow: "hidden" 
+        }}>
+          <ProcessDetails
+            selectedProcess={selectedProcess}
+            onKillProcess={onKillProcess}
+          />
         </Col>
-        
-        {/* Right Column - Terminal (5 units) */}
-        <Col
-          sm={5}
-          className="p-3 d-flex flex-column"
-          style={{ height: "100%", overflow: "hidden" }}
-        >
-          {selectedProcess ? (
-            <>
-              {/* Terminal area - fills space and scrolls internally */}
-              <div className="flex-grow-1 d-flex flex-column" style={{ minHeight: 0 }}>
-                {/* Scrollable terminal content */}
-                <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}
-                >
-                  {processLogs.length > 0 ? (
-                    <pre
-                      className="mb-0"
-                      style={{
-                        whiteSpace: "pre-wrap",
-                        wordBreak: "break-word",
-                        backgroundColor: "transparent",
-                        border: "none",
-                        color: "inherit",
-                      }}
-                    >
-                      {processLogs.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={() => {
-                          setAutoScroll(true);
-                          if (logsContainerRef.current) {
-                            logsContainerRef.current.scrollTop =
-                              logsContainerRef.current.scrollHeight;
-                          }
-                        }}
-                      >
-                        Scroll to Bottom
-                      </Button>
-                    </div>
-                  )}
-                </div>
-                
-                {/* Input area - fixed at the bottom */}
-                {selectedProcess.status === "running" && (
-                  <div className="border-top bg-white p-2 mt-2" 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>
-                  </div>
-                )}
-              </div>
-            </>
-          ) : (
-            <div className="text-center text-muted mt-5">
-              <i>Terminal will appear here when a process is selected</i>
-            </div>
-          )}
-        </Col>
-
 
+        {/* Terminal */}
+        <Col sm={5} className="p-3 d-flex flex-column" style={{ 
+          height: "100%", 
+          overflow: "hidden" 
+        }}>
+          <ProcessTerminal
+            selectedProcess={selectedProcess}
+            ws={ws}
+          />
+        </Col>
       </Row>
     </Container>
   );

package/src/components/pure/ProcessManagerViewTypes.ts

@@ -0,0 +1,10 @@
+export interface Process {
+  processId: string;
+  command: string;
+  pid?: number;
+  status?: "running" | "exited" | "error";
+  exitCode?: number;
+  error?: string;
+  timestamp: string;
+  logs?: string[];
+}

package/src/components/pure/ProcessSidebar.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { Badge } from 'react-bootstrap';
+import { Process } from './ProcessManagerView';
+
+interface ProcessSidebarProps {
+  process: Process;
+  webSocketStatus: string;
+}
+
+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>;
+  }
+};
+
+export const ProcessSidebar: React.FC<ProcessSidebarProps> = ({
+  process,
+  webSocketStatus,
+}) => {
+  return (
+    <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>WebSocket:</strong>
+          <div className="mt-1">
+            <Badge bg={
+              webSocketStatus === 'connected' ? 'success' :
+                webSocketStatus === 'connecting' ? 'warning' : 'danger'
+            }>
+              {webSocketStatus}
+            </Badge>
+          </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>
+  );
+};