testeranto 0.202.0 → 0.205.0

package/src/app/frontend/components/pure/ProcessInput.tsx

@@ -0,0 +1,67 @@
+import React, { useRef, useCallback } from 'react';
+
+interface ProcessInputProps {
+  inputValue: string;
+  webSocketStatus: string;
+  onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onKeyPress: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  onSubmit: () => void;
+}
+
+export const ProcessInput: React.FC<ProcessInputProps> = ({
+  inputValue,
+  webSocketStatus,
+  onInputChange,
+  onKeyPress,
+  onSubmit,
+}) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const isConnected = webSocketStatus === 'connected';
+  
+  const handleButtonClick = useCallback((e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    onSubmit();
+    // Focus the input using ref
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [onSubmit]);
+
+  return (
+    <div className="border-top bg-white p-3" style={{ flexShrink: 0 }}>
+      <div className="input-group">
+        <input
+          ref={inputRef}
+          type="text"
+          className="form-control"
+          placeholder="Type input and press Enter..."
+          value={inputValue}
+          onChange={onInputChange}
+          onKeyPress={onKeyPress}
+          autoFocus
+          onClick={(e) => {
+            e.stopPropagation();
+            e.currentTarget.focus();
+          }}
+          onFocus={(e) => {
+            e.target.select();
+          }}
+          style={{ cursor: 'text' }}
+          disabled={!isConnected}
+        />
+        <button
+          className="btn btn-primary"
+          type="button"
+          onClick={handleButtonClick}
+          disabled={!isConnected || !inputValue.trim()}
+        >
+          Send
+        </button>
+      </div>
+      <small className="text-muted">
+        💡 Press Enter to send input to the process
+        {!isConnected && ` (WebSocket is ${webSocketStatus})`}
+      </small>
+    </div>
+  );
+};

package/src/app/frontend/components/pure/ProcessList.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { Badge } from 'react-bootstrap';
+import { Process } from './ProcessManagerViewTypes';
+
+interface ProcessListProps {
+  processes: Process[];
+  selectedProcess: Process | null;
+  onSelectProcess: (process: Process) => void;
+  loading: boolean;
+}
+
+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 ProcessList: React.FC<ProcessListProps> = ({
+  processes,
+  selectedProcess,
+  onSelectProcess,
+  loading,
+}) => {
+  return (
+    <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={() => onSelectProcess(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>
+  );
+};

package/src/app/frontend/components/pure/ProcessLogs.tsx

@@ -0,0 +1,54 @@
+import React, { useEffect, useRef } from 'react';
+
+interface ProcessLogsProps {
+  logs?: string[];
+}
+
+export const ProcessLogs: React.FC<ProcessLogsProps> = ({ logs }) => {
+  const logsEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    // Auto-scroll to bottom when logs update
+    logsEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [logs]);
+
+  return (
+    <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">
+          {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'
+        }}
+      >
+        {logs && 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>
+        )}
+        <div ref={logsEndRef} />
+      </div>
+    </div>
+  );
+};

package/src/app/frontend/components/pure/ProcessManager.tsx

@@ -0,0 +1,109 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Modal, Button, ListGroup, Badge } from 'react-bootstrap';
+import { Process } from './ProcessManagerViewTypes';
+
+interface ProcessManagerProps {
+  show: boolean;
+  onHide: () => void;
+  ws: WebSocket | null;
+}
+
+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
+      ws.send(JSON.stringify({ type: 'getRunningProcesses' }));
+    }
+  }, [show, ws]);
+
+  useEffect(() => {
+    if (!ws) return;
+
+    ws.addEventListener('message', handleMessage);
+    return () => ws.removeEventListener('message', handleMessage);
+  }, [ws, handleMessage]);
+
+  const getStatusBadge = useCallback((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>;
+    }
+  }, []);
+
+  return (
+    <Modal show={show} onHide={onHide} size="lg">
+      <Modal.Header closeButton>
+        <Modal.Title>Running Aider Processes</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <ListGroup>
+          {processes.map(process => (
+            <ListGroup.Item key={process.processId} className="d-flex justify-content-between align-items-start">
+              <div className="ms-2 me-auto">
+                <div className="fw-bold">{process.command}</div>
+                <small className="text-muted">
+                  PID: {process.pid || 'N/A'} |
+                  Started: {new Date(process.timestamp).toLocaleString()}
+                </small>
+                {process.error && (
+                  <div className="text-danger mt-1">
+                    <small>Error: {process.error}</small>
+                  </div>
+                )}
+              </div>
+              {getStatusBadge(process)}
+            </ListGroup.Item>
+          ))}
+          {processes.length === 0 && (
+            <ListGroup.Item>No active processes</ListGroup.Item>
+          )}
+        </ListGroup>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button variant="secondary" onClick={onHide}>
+          Close
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+};

package/src/app/frontend/components/pure/ProcessManagerView.tsx

@@ -0,0 +1,89 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { Container, Row, Col } from "react-bootstrap";
+
+import { ProcessList } from './ProcessList';
+import { ProcessDetails } from './ProcessDetails';
+import { ProcessTerminal } from './ProcessTerminal';
+import { Process } from './ProcessManagerViewTypes';
+import { useWebSocket } from "../../useWebSocket";
+// import { useWebSocket } from "../../App";
+
+export interface ProcessManagerViewProps {
+  processes: Process[];
+  onRefresh: () => void;
+  onBack: () => void;
+  loading: boolean;
+  onKillProcess?: (processId: string) => void;
+}
+
+export const ProcessManagerView: React.FC<ProcessManagerViewProps> = ({
+  processes,
+  // onRefresh,
+  // onBack,
+  loading,
+  onKillProcess,
+}) => {
+  const [selectedProcess, setSelectedProcess] = useState<Process | null>(null);
+  const { ws } = useWebSocket();
+
+  // Handle process selection
+  const handleSelectProcess = useCallback((process: Process) => {
+    setSelectedProcess(process);
+  }, []);
+
+  // Request process data when selected
+  useEffect(() => {
+    if (selectedProcess && ws && ws.readyState === WebSocket.OPEN) {
+      ws.send(
+        JSON.stringify({
+          type: "getProcess",
+          processId: selectedProcess.processId,
+        })
+      );
+    }
+  }, [selectedProcess, ws]);
+
+  return (
+    <Container fluid className="px-0 h-100">
+      <Row className="g-0" style={{ height: "calc(100vh - 56px)" }}>
+        {/* 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>
+
+        {/* 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>
+
+        {/* Terminal */}
+        <Col sm={5} className="p-3 d-flex flex-column" style={{
+          height: "100%",
+          overflow: "hidden"
+        }}>
+          <ProcessTerminal
+            selectedProcess={selectedProcess}
+            ws={ws}
+          />
+        </Col>
+      </Row>
+    </Container>
+  );
+};
+// export { Process };
+

package/src/app/frontend/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/app/frontend/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>
+  );
+};

package/src/app/frontend/components/pure/ProcessTerminal.tsx

@@ -0,0 +1,55 @@
+import React, { useCallback } from "react";
+
+import { useTerminalWebSocket } from "../../useTerminalWebSocket";
+
+import { Process } from "./ProcessManagerViewTypes";
+import { TerminalLogs } from "./TerminalLogs";
+import { TerminalInput } from "./TerminalInput";
+
+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>
+  );
+};