testeranto 0.202.0 → 0.203.0

package/src/components/pure/HelpoChatDrawer.tsx

@@ -0,0 +1,222 @@
+import React, { useState, useEffect, useRef } from "react";
+import { useWebSocket } from "../../App";
+
+interface ChatMessage {
+  type: "user" | "assistant";
+  content: string;
+  timestamp: string;
+}
+
+interface HelpoChatDrawerProps {
+  isActive: boolean;
+  onToggle: () => void;
+}
+
+export const HelpoChatDrawer: React.FC<HelpoChatDrawerProps> = ({
+  isActive,
+  onToggle,
+}) => {
+  const { ws, isConnected, sendMessage } = useWebSocket();
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [inputMessage, setInputMessage] = useState("");
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  // Scroll to bottom whenever messages change
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  // Handle incoming WebSocket messages and request initial chat history
+  useEffect(() => {
+    const handleWebSocketMessage = (event: MessageEvent) => {
+      try {
+        const data = JSON.parse(event.data);
+        if (data.type === "chatMessage") {
+          // Add individual message to the current state
+          // This ensures the message is properly recorded in the server's history
+          setMessages((prev) => [...prev, data.message]);
+        } else if (data.type === "chatHistory") {
+          // Replace the entire message list with the history from the server
+          setMessages(data.messages || []);
+        }
+      } catch (error) {
+        console.error("Error parsing WebSocket message:", error);
+      }
+    };
+
+    if (ws) {
+      ws.addEventListener("message", handleWebSocketMessage);
+      
+      // Request the initial chat history when connected
+      if (isConnected) {
+        // Send a request for the chat history
+        // You might need to implement a specific message type for this
+        // For now, we'll use a generic message that the server can handle
+        sendMessage({
+          type: "getChatHistory"
+        });
+      }
+      
+      return () => {
+        ws.removeEventListener("message", handleWebSocketMessage);
+      };
+    }
+  }, [ws, isConnected, sendMessage]);
+
+  const handleSendMessage = () => {
+    if (inputMessage.trim()) {
+      // Add user message to local state immediately for better UX
+      // This will be replaced when the server sends the actual message
+      const tempUserMessage: ChatMessage = {
+        type: "user",
+        content: inputMessage.trim(),
+        timestamp: new Date().toISOString(),
+      };
+      setMessages((prev) => [...prev, tempUserMessage]);
+
+      // Send message via WebSocket if connected
+      if (isConnected) {
+        try {
+          sendMessage({
+            type: "chatMessage",
+            content: inputMessage.trim(),
+          });
+        } catch (error) {
+          console.error("Failed to send message:", error);
+        }
+      } else {
+        console.log("WebSocket not connected - message not sent to server");
+      }
+
+      setInputMessage("");
+    }
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSendMessage();
+    }
+  };
+
+  return (
+    <div
+      className={`gradient-typed-bdd-dsl d-flex flex-column border-end ${isActive ? "active" : "inactive"
+        }`}
+      style={{
+        width: isActive ? "380px" : "0px",
+        transition: "width 0.3s ease",
+        overflow: "hidden",
+        flexShrink: 0,
+        height: "100vh",
+      }}
+    >
+      <div
+        style={{
+          width: "380px",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        {/* Chat messages */}
+        <div
+          style={{
+            flex: 1,
+            overflowY: "auto",
+            padding: "1rem",
+            display: "flex",
+            flexDirection: "column",
+            gap: "0.5rem",
+          }}
+        >
+          {messages.length === 0 ? (
+            <div
+              style={{ textAlign: "center", color: "#666", marginTop: "2rem" }}
+            >
+              Start a conversation with Helpo!
+            </div>
+          ) : (
+            messages.map((message, index) => (
+              <div
+                key={index}
+                style={{
+                  textAlign: message.type === "user" ? "right" : "left",
+                  marginBottom: "0.5rem",
+                }}
+              >
+                <div
+                  style={{
+                    display: "inline-block",
+                    padding: "0.5rem 1rem",
+                    borderRadius: "1rem",
+                    backgroundColor:
+                      message.type === "user"
+                        ? "rgba(0, 123, 255, 0.1)"
+                        : "rgba(108, 117, 125, 0.1)",
+                    maxWidth: "80%",
+                    wordWrap: "break-word",
+                  }}
+                >
+                  <strong>{message.type === "user" ? "You" : "Helpo"}:</strong>
+                  <br />
+                  {message.content}
+                </div>
+                <div
+                  style={{
+                    fontSize: "0.75rem",
+                    color: "#666",
+                    marginTop: "0.25rem",
+                  }}
+                >
+                  {new Date(message.timestamp).toLocaleTimeString()}
+                </div>
+              </div>
+            ))
+          )}
+          <div ref={messagesEndRef} />
+        </div>
+
+        {/* Input area */}
+        <div
+          style={{
+            padding: "1rem",
+            borderTop: "1px solid rgba(128, 128, 128, 0.3)",
+          }}
+        >
+          <div className="input-group">
+            <input
+              type="text"
+              className="form-control"
+              placeholder={
+                isConnected ? "Type your message..." : "Connecting..."
+              }
+              value={inputMessage}
+              onChange={(e) => setInputMessage(e.target.value)}
+              onKeyPress={handleKeyPress}
+              disabled={!isConnected}
+              style={{
+                backgroundColor: "rgba(255, 255, 255, 0.2)",
+                border: "1px solid rgba(128, 128, 128, 0.3)",
+                color: "#333",
+              }}
+            />
+            <button
+              className="btn btn-primary"
+              type="button"
+              onClick={handleSendMessage}
+              disabled={!inputMessage.trim() || !isConnected}
+            >
+              Send
+            </button>
+          </div>
+          {!isConnected && (
+            <small className="text-muted">
+              WebSocket disconnected. Chat unavailable.
+            </small>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/pure/MagicRobotModal.tsx

@@ -0,0 +1,136 @@
+import React from "react";
+import { Modal, Button } from "react-bootstrap";
+
+export const MagicRobotModal = ({
+  customMessage,
+  isWebSocketConnected,
+  messageOption,
+  navigate,
+  projectName,
+  runtime,
+  setCustomMessage,
+  setMessageOption,
+  setShowAiderModal,
+  setShowToast,
+  setToastMessage,
+  setToastVariant,
+  showAiderModal,
+  testName,
+  ws,
+}) => (
+  <Modal
+    show={showAiderModal}
+    onHide={() => setShowAiderModal(false)}
+    size="lg"
+    onShow={() => setMessageOption("default")}
+  >
+    <Modal.Header closeButton>
+      <Modal.Title>Aider</Modal.Title>
+    </Modal.Header>
+    <Modal.Body>
+      <div className="mb-3">
+        <div className="form-check">
+          <input
+            className="form-check-input"
+            type="radio"
+            name="messageOption"
+            id="defaultMessage"
+            value="default"
+            checked={messageOption === "default"}
+            onChange={() => setMessageOption("default")}
+          />
+          <label className="form-check-label" htmlFor="defaultMessage">
+            Use default message.txt
+          </label>
+        </div>
+        <div className="form-check">
+          <input
+            className="form-check-input"
+            type="radio"
+            name="messageOption"
+            id="customMessage"
+            value="custom"
+            checked={messageOption === "custom"}
+            onChange={() => setMessageOption("custom")}
+          />
+          <label className="form-check-label" htmlFor="customMessage">
+            Use custom message
+          </label>
+        </div>
+        {messageOption === "custom" && (
+          <div className="mt-2">
+            <textarea
+              className="form-control"
+              rows={8}
+              placeholder="Enter your custom message"
+              value={customMessage}
+              onChange={(e) => setCustomMessage(e.target.value)}
+              style={{ minHeight: "500px" }}
+            />
+          </div>
+        )}
+      </div>
+    </Modal.Body>
+    <Modal.Footer>
+      {/* <Button
+                  variant="secondary"
+                  onClick={() => setShowAiderModal(false)}
+                >
+                  Close
+                </Button> */}
+      <Button
+        variant="primary"
+        onClick={async () => {
+          try {
+            const promptPath = `testeranto/reports/${projectName}/${testName
+              .split(".")
+              .slice(0, -1)
+              .join(".")}/${runtime}/prompt.txt`;
+
+            let command = `aider --load ${promptPath}`;
+
+            if (messageOption === "default") {
+              const messagePath = `testeranto/reports/${projectName}/${testName
+                .split(".")
+                .slice(0, -1)
+                .join(".")}/${runtime}/message.txt`;
+              command += ` --message-file ${messagePath}`;
+            } else {
+              command += ` --message "${customMessage}"`;
+            }
+
+            // Send command to server via the centralized WebSocket
+            if (isWebSocketConnected && ws) {
+              ws.send(
+                JSON.stringify({
+                  type: "executeCommand",
+                  command: command,
+                })
+              );
+              setToastMessage("Command sent to server");
+              setToastVariant("success");
+              setShowToast(true);
+              setShowAiderModal(false);
+
+              // Navigate to process manager page
+              setTimeout(() => {
+                navigate("/processes");
+              }, 1000);
+            } else {
+              setToastMessage("WebSocket connection not ready");
+              setToastVariant("danger");
+              setShowToast(true);
+            }
+          } catch (err) {
+            console.error("WebSocket error:", err);
+            setToastMessage("Error preparing command");
+            setToastVariant("danger");
+            setShowToast(true);
+          }
+        }}
+      >
+        Run Aider Command
+      </Button>
+    </Modal.Footer>
+  </Modal>
+);

package/src/components/pure/ProcessDetails.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { Badge, Button, Alert } from 'react-bootstrap';
+import { Process } from './ProcessManagerViewTypes';
+
+interface ProcessDetailsProps {
+  selectedProcess: Process | null;
+  onKillProcess?: (processId: string) => void;
+}
+
+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 ProcessDetails: React.FC<ProcessDetailsProps> = ({
+  selectedProcess,
+  onKillProcess,
+}) => {
+  if (!selectedProcess) {
+    return (
+      <div className="text-center text-muted mt-5">
+        <i>Select a process to view details</i>
+      </div>
+    );
+  }
+
+  return (
+    <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"
+          }}
+        >
+          {selectedProcess.command}
+        </div>
+      </div>
+    </div>
+  );
+};

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