testeranto 0.200.0 → 0.202.0

package/src/components/pure/ProcessManagerView.tsx

@@ -2,6 +2,7 @@
 import React, { useState, useEffect, useRef } from "react";
 import { Container, Row, Col, Badge, Button, Alert } from "react-bootstrap";
 import { useNavigate } from "react-router-dom";
+import { useWebSocket } from '../../App';
 
 export interface Process {
   processId: string;
@@ -31,20 +32,18 @@ export const ProcessManagerView: React.FC<ProcessManagerViewProps> = ({
 }) => {
   const navigate = useNavigate();
   const [selectedProcess, setSelectedProcess] = useState<Process | null>(null);
-  const [ws, setWs] = useState<WebSocket | 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);
 
-  // Set up WebSocket connection
+  // Handle WebSocket messages for the selected process
   useEffect(() => {
-    const wsProtocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-    const wsUrl = `${wsProtocol}//${window.location.host}`;
-    const websocket = new WebSocket(wsUrl);
-    setWs(websocket);
-
-    websocket.onmessage = (event) => {
+    if (!ws) return;
+    
+    const handleMessage = (event: MessageEvent) => {
       try {
         const data = JSON.parse(event.data);
         // Handle process data response
@@ -76,10 +75,12 @@ export const ProcessManagerView: React.FC<ProcessManagerViewProps> = ({
       }
     };
 
+    ws.addEventListener('message', handleMessage);
+    
     return () => {
-      websocket.close();
+      ws.removeEventListener('message', handleMessage);
     };
-  }, [selectedProcess]);
+  }, [ws, selectedProcess]);
 
   // Request process data when selected
   useEffect(() => {
@@ -150,7 +151,7 @@ export const ProcessManagerView: React.FC<ProcessManagerViewProps> = ({
       <Row className="g-0" style={{ height: "calc(100vh - 56px)" }}>
         {/* Left Column - Process List (Compact) */}
         <Col
-          sm={3}
+          sm={2}
           className="border-end"
           style={{
             height: "100%",
@@ -160,7 +161,7 @@ export const ProcessManagerView: React.FC<ProcessManagerViewProps> = ({
         >
 
           <div className="p-1">
-            {processes.map((process) => (
+            {[...processes].reverse().map((process) => (
               <div
                 key={process.processId}
                 className={`p-2 mb-1 rounded ${selectedProcess?.processId === process.processId
@@ -217,56 +218,74 @@ export const ProcessManagerView: React.FC<ProcessManagerViewProps> = ({
           </div>
         </Col>
 
-        {/* Middle Column - Selected process details */}
+        {/* Middle Column - Process Details (5 units) */}
         <Col
           sm={5}
-          className="border-end p-3"
-          style={{ height: "100%", overflow: "auto" }}
+          className="border-end p-3 d-flex flex-column"
+          style={{ height: "100%", overflow: "hidden" }}
         >
           {selectedProcess ? (
-            <div>
-              <div className="mb-3">
-                <strong>Command:</strong>
-                <code
-                  className="bg-light p-2 rounded d-block mt-1"
-                  style={{ fontSize: "0.8rem" }}
-                >
-                  {selectedProcess.command}
-                </code>
-              </div>
-
-              <div className="mb-2">
-                <strong>Status:</strong>
-                <div className="mt-1">{getStatusBadge(selectedProcess)}</div>
-              </div>
-
-              <div className="mb-2">
-                <strong>PID:</strong>
-                <div className="text-muted">{selectedProcess.pid || "N/A"}</div>
-              </div>
-
-              <div className="mb-2">
-                <strong>Started:</strong>
+            <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>
-
-              {selectedProcess.exitCode !== undefined && (
-                <div className="mb-2">
-                  <strong>Exit Code:</strong>
-                  <div className="text-muted">{selectedProcess.exitCode}</div>
-                </div>
-              )}
-
+              
+              {/* Error message if present */}
               {selectedProcess.error && (
-                <div className="mt-3">
-                  <strong className="text-danger">Error:</strong>
-                  <div className="text-danger small mt-1">
-                    {selectedProcess.error}
-                  </div>
-                </div>
+                <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">
@@ -274,140 +293,117 @@ export const ProcessManagerView: React.FC<ProcessManagerViewProps> = ({
             </div>
           )}
         </Col>
-
-        {/* Right Column - Live logs with input */}
+        
+        {/* Right Column - Terminal (5 units) */}
         <Col
-          sm={4}
-          className="p-0"
+          sm={5}
+          className="p-3 d-flex flex-column"
           style={{ height: "100%", overflow: "hidden" }}
         >
           {selectedProcess ? (
-            <div className="d-flex flex-column h-100">
-              {/* <div className="d-flex justify-content-between align-items-center p-3 border-bottom bg-white">
-
-                <small className="text-muted">
-                  {processLogs.length} lines
-                </small>
-              </div> */}
-
-              {/* Scrollable log 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: '1rem'
-                }}
-                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 and stop button for running processes */}
-              {selectedProcess.status === "running" && (
+            <>
+              {/* Terminal area - fills space and scrolls internally */}
+              <div className="flex-grow-1 d-flex flex-column" style={{ minHeight: 0 }}>
+                {/* Scrollable terminal content */}
                 <div
-                  className="border-top bg-white p-3"
-                  style={{ flexShrink: 0 }}
+                  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}
                 >
-                  {/* Stop button */}
-                  {onKillProcess && (
-                    <div className="mb-3">
+                  {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="danger"
+                        variant="primary"
                         size="sm"
-                        onClick={() => onKillProcess(selectedProcess.processId)}
-                        className="w-100"
+                        onClick={() => {
+                          setAutoScroll(true);
+                          if (logsContainerRef.current) {
+                            logsContainerRef.current.scrollTop =
+                              logsContainerRef.current.scrollHeight;
+                          }
+                        }}
                       >
-                        ⏹️ Stop Process
+                        Scroll to Bottom
                       </Button>
                     </div>
                   )}
-
-                  {/* Input area */}
-                  <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;
+                </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");
-                            target.value = "";
+                            input.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>
+                        }}
+                      >
+                        Send
+                      </button>
+                    </div>
                   </div>
-                  <small className="text-muted">
-                    💡 Press Enter to send input to the process
-                  </small>
-                </div>
-              )}
-            </div>
+                )}
+              </div>
+            </>
           ) : (
-            <div className="p-3 text-center text-muted mt-5">
-              <i>Live logs will appear here when a process is selected</i>
+            <div className="text-center text-muted mt-5">
+              <i>Terminal will appear here when a process is selected</i>
             </div>
           )}
         </Col>
+
+
       </Row>
     </Container>
   );

package/src/components/pure/ProjectPageView.tsx

@@ -1,188 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react';
-import { Tab, Container, Alert, Table, Badge, Nav, Card, ListGroup, Col, Row } from 'react-bootstrap';
-
-import { TestStatusBadge } from '../TestStatusBadge';
+import { Container, Alert, Badge, Nav, Col, Row } from 'react-bootstrap';
 
+import { TestTable } from './TestTable';
+import { BuildLogViewer } from './BuildLogViewer';
 import { NavBar } from './NavBar';
 
 import "./../../App.scss";
 
-const BuildLogViewer = ({ logs, runtime }: { logs: any, runtime: string }) => {
-  if (!logs) return <Alert variant="info">Loading {runtime.toLowerCase()} build logs...</Alert>;
-
-  const hasErrors = logs.errors?.length > 0;
-  const hasWarnings = logs.warnings?.length > 0;
-  const [activeTab, setActiveTab] = React.useState('summary');
-
-  return (
-    <div>
-      <Tab.Container activeKey={activeTab} onSelect={(k) => setActiveTab(k || 'summary')}>
-        <Nav variant="tabs" className="mb-3">
-          <Nav.Item>
-            <Nav.Link eventKey="summary">Build Summary</Nav.Link>
-          </Nav.Item>
-          <Nav.Item>
-            <Nav.Link eventKey="warnings">
-              {hasWarnings ? `⚠️ Warnings (${logs.warnings.length})` : 'Warnings'}
-            </Nav.Link>
-          </Nav.Item>
-          <Nav.Item>
-            <Nav.Link eventKey="errors">
-              {hasErrors ? `❌ Errors (${logs.errors.length})` : 'Errors'}
-            </Nav.Link>
-          </Nav.Item>
-        </Nav>
-
-        <Tab.Content>
-          <Tab.Pane eventKey="summary">
-            <Card>
-              <Card.Header className="d-flex justify-content-between align-items-center">
-                <h5>Build Summary</h5>
-                <div>
-                  {hasErrors && (
-                    <Badge bg="danger" className="me-2">
-                      {logs.errors.length} Error{logs.errors.length !== 1 ? 's' : ''}
-                    </Badge>
-                  )}
-                  {hasWarnings && (
-                    <Badge bg="warning" text="dark">
-                      {logs.warnings.length} Warning{logs.warnings.length !== 1 ? 's' : ''}
-                    </Badge>
-                  )}
-                  {!hasErrors && !hasWarnings && (
-                    <Badge bg="success">Build Successful</Badge>
-                  )}
-                </div>
-              </Card.Header>
-              <Card.Body>
-                <div className="mb-3">
-                  <h6>Input Files ({Object.keys(logs.metafile?.inputs || {}).length})</h6>
-                  <ListGroup className="max-h-200 overflow-auto">
-                    {Object.keys(logs.metafile?.inputs || {}).map((file) => (
-                      <ListGroup.Item key={file} className="py-2">
-                        <code>{file}</code>
-                        <div className="text-muted small">
-                          {logs.metafile.inputs[file].bytes} bytes
-                        </div>
-                      </ListGroup.Item>
-                    ))}
-                  </ListGroup>
-                </div>
-                <div>
-                  <h6>Output Files ({Object.keys(logs.metafile?.outputs || {}).length})</h6>
-                  <ListGroup className="max-h-200 overflow-auto">
-                    {Object.keys(logs.metafile?.outputs || {}).map((file) => (
-                      <ListGroup.Item key={file} className="py-2">
-                        <code>{file}</code>
-                        <div className="text-muted small">
-                          {logs.metafile.outputs[file].bytes} bytes
-                          {logs.metafile.outputs[file].entryPoint && (
-                            <span className="ms-2 badge bg-info">Entry Point</span>
-                          )}
-                        </div>
-                      </ListGroup.Item>
-                    ))}
-                  </ListGroup>
-                </div>
-              </Card.Body>
-            </Card>
-          </Tab.Pane>
-          <Tab.Pane eventKey="warnings">
-            {hasWarnings ? (
-              <Card className="border-warning">
-                <Card.Header className="bg-warning text-white d-flex justify-content-between align-items-center">
-                  <span>Build Warnings ({logs.warnings.length})</span>
-                  <Badge bg="light" text="dark">
-                    {new Date().toLocaleString()}
-                  </Badge>
-                </Card.Header>
-                <Card.Body className="p-0">
-                  <ListGroup variant="flush">
-                    {logs.warnings.map((warn: any, i: number) => (
-                      <ListGroup.Item key={i} className="text-warning">
-                        <div className="d-flex justify-content-between">
-                          <strong>
-                            {warn.location?.file || 'Unknown file'}
-                            {warn.location?.line && `:${warn.location.line}`}
-                          </strong>
-                          <small className="text-muted">
-                            {warn.pluginName ? `[${warn.pluginName}]` : ''}
-                          </small>
-                        </div>
-                        <div className="mt-1">
-                          <pre className="mb-0 p-2 bg-light rounded">
-                            {JSON.stringify(warn)}
-                          </pre>
-                        </div>
-                        {/* {warn.detail && (
-                          <div className="mt-1 small text-muted">
-                            <pre className="mb-0 p-2 bg-light rounded">
-                              {warn.detail}
-                            </pre>
-                          </div>
-                        )} */}
-                      </ListGroup.Item>
-                    ))}
-                  </ListGroup>
-                </Card.Body>
-              </Card>
-            ) : (
-              <Alert variant="info">No warnings found</Alert>
-            )}
-          </Tab.Pane>
-          <Tab.Pane eventKey="errors">
-            {hasErrors ? (
-              <Card className="border-danger">
-                <Card.Header className="bg-danger text-white d-flex justify-content-between align-items-center">
-                  <span>Build Errors ({logs.errors.length})</span>
-                  <Badge bg="light" text="dark">
-                    {new Date().toLocaleString()}
-                  </Badge>
-                </Card.Header>
-                <Card.Body className="p-0">
-                  <ListGroup variant="flush">
-                    {logs.errors.map((err: any, i: number) => (
-                      <ListGroup.Item key={i} className="text-danger">
-                        <div className="d-flex justify-content-between">
-                          <strong>
-                            {err.location?.file || 'Unknown file'}
-                            {err.location?.line && `:${err.location.line}`}
-                          </strong>
-                          <small className="text-muted">
-                            {err.pluginName ? `[${err.pluginName}]` : ''}
-                          </small>
-                        </div>
-                        <div className="mt-1">
-                          <pre className="mb-0 p-2 bg-light rounded">
-                            {/* {err.text || err.message || JSON.stringify(err)} */}
-                            {JSON.stringify(err)}
-                          </pre>
-                        </div>
-                        {/* {err.detail && (
-                          <div className="mt-1 small text-muted">
-                            <pre className="mb-0 p-2 bg-light rounded">
-                              {err.detail}
-                            </pre>
-                          </div>
-                        )} */}
-                      </ListGroup.Item>
-                    ))}
-                  </ListGroup>
-                </Card.Body>
-              </Card>
-            ) : (
-              <Alert variant="success">
-                <h5>No Errors Found</h5>
-                <p className="mb-0">The build completed without any errors.</p>
-              </Alert>
-            )}
-          </Tab.Pane>
-        </Tab.Content>
-      </Tab.Container>
-    </div>
-  );
-};
 
 export type IProjectPageViewProps = {
   summary: any;
@@ -218,6 +43,7 @@ export const ProjectPageView = ({
     runTimeErrors: number;
     typeErrors: number;
     staticErrors: number;
+    runTimeTests: number;
   }]) => {
     const runTime = config.tests?.find((t: [string, string]) => t[0] === testName)?.[1] || 'node';
     return {
@@ -226,6 +52,7 @@ export const ProjectPageView = ({
       runTimeErrors: Number(testData.runTimeErrors) || 0,
       typeErrors: Number(testData.typeErrors) || 0,
       staticErrors: Number(testData.staticErrors) || 0,
+      runTimeTests: Number(testData.runTimeTests) || 0,
       runTime
     };
   });
@@ -305,52 +132,7 @@ export const ProjectPageView = ({
         <Col sm={9}>
           <div className="p-3">
             {activeTab === 'tests' ? (
-              <Table striped bordered hover>
-                <thead>
-                  <tr>
-                    <th>Test</th>
-                    <th>Runtime</th>
-                    <th>Status</th>
-                    <th>Type Errors</th>
-                    <th>Lint Errors</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {testStatuses.map((test) => (
-                    <tr key={test.testName} data-testid={`test-row-${test.testName}`}>
-                      <td>
-                        <a href={`#/projects/${projectName}/tests/${encodeURIComponent(test.testName)}/${test.runTime}`}>
-                          {test.testName}
-                        </a>
-                      </td>
-                      <td>
-                        <Badge bg="secondary" className="ms-2">
-                          {test.runTime}
-                        </Badge>
-                      </td>
-                      <td>
-                        <TestStatusBadge
-                          testName={test.testName}
-                          testsExist={test.testsExist}
-                          runTimeErrors={test.runTimeErrors}
-                          typeErrors={test.typeErrors}
-                          staticErrors={test.staticErrors}
-                        />
-                      </td>
-                      <td>
-                        <a href={`#/projects/${projectName}/tests/${encodeURIComponent(test.testName)}/${test.runTime}#types`}>
-                          {test.typeErrors > 0 ? `❌ ${test.typeErrors}` : '✅'}
-                        </a>
-                      </td>
-                      <td>
-                        <a href={`#/projects/${projectName}/tests/${encodeURIComponent(test.testName)}/${test.runTime}#lint`}>
-                          {test.staticErrors > 0 ? `❌ ${test.staticErrors}` : '✅'}
-                        </a>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </Table>
+              <TestTable testStatuses={testStatuses} projectName={projectName} />
             ) : activeTab === 'node' ? (
               <BuildLogViewer logs={nodeLogs} runtime="Node" />
             ) : activeTab === 'web' ? (