testeranto 0.202.0 → 0.205.0

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

@@ -0,0 +1,223 @@
+import React, { useState, useEffect, useRef } from "react";
+
+import { useWebSocket } from "../../useWebSocket";
+
+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/app/frontend/components/pure/MagicRobotModal.tsx

@@ -0,0 +1,135 @@
+import React from "react";
+import { Modal, Button } from "react-bootstrap";
+
+import { useFs } from "../../useFs";
+
+export const MagicRobotModal = ({
+  customMessage,
+  isWebSocketConnected,
+  messageOption,
+  navigate,
+  projectName,
+  runtime,
+  setCustomMessage,
+  setMessageOption,
+  setShowAiderModal,
+  setShowToast,
+  setToastMessage,
+  setToastVariant,
+  showAiderModal,
+  testName,
+}) => {
+  const fs = useFs();
+
+  const 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) {
+        fs.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);
+    }
+  };
+
+  return (
+    <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="primary" onClick={onclick}>
+          Run Aider Command
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+};

package/src/app/frontend/components/pure/ModalContent.test/index.tsx

@@ -0,0 +1,68 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import Testeranto from "testeranto-react/src/react-dom/component/web";
+import { implementation } from "./implementation";
+import { specification } from "./specification";
+import { ModalContent } from "../ModalContent";
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { I, O, M } from "./types";
+// import { ITestInterface } from "../../../CoreTypes";
+// import { IPM } from "../../../lib/types";
+
+const testAdapter: ITestInterface<I> = {
+  beforeAll: async (input, testResource, pm) => {
+    // The subject is the component itself, which we'll use to create instances
+    return ModalContent;
+  },
+  beforeEach: async (subject, initializer, testResource, initialValues, pm) => {
+    // Create a container and mount the component
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+
+    const props = initializer();
+    const root = ReactDOM.createRoot(container);
+    const reactElement = React.createElement(subject, props);
+
+    root.render(reactElement);
+
+    // Wait for the component to render
+    await new Promise(resolve => setTimeout(resolve, 0));
+
+    return {
+      htmlElement: container,
+      reactElement: reactElement,
+      domRoot: root
+    };
+  },
+  andWhen: async (store, whenCB, testResource, pm) => {
+    return whenCB(store, pm);
+  },
+  butThen: async (store, thenCB, testResource, pm) => {
+    return thenCB(store, pm);
+  },
+  afterEach: async (store, key, pm) => {
+    // Cleanup
+    if (store.domRoot) {
+      store.domRoot.unmount();
+    }
+    if (store.htmlElement && store.htmlElement.parentNode) {
+      store.htmlElement.parentNode.removeChild(store.htmlElement);
+    }
+    return store;
+  },
+  afterAll: async (store, pm) => {
+    // No-op for now
+  },
+  assertThis: (assertion) => {
+    // The assertions are handled in the then implementations
+    // This can be a no-op or can wrap the assertion if needed
+    return assertion;
+  }
+};
+
+export default Testeranto<I, O, M>(
+  ModalContent,
+  specification,
+  implementation,
+  testAdapter
+);

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

@@ -0,0 +1,119 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { useState, useEffect } from 'react';
+import { Navbar, Container, Nav, Badge, Button } from 'react-bootstrap';
+import { Link, useLocation } from 'react-router-dom';
+
+type NavItem = {
+  to?: string;
+  label: string | React.ReactNode;
+  active?: boolean;
+  className?: string;
+  badge?: {
+    variant: string;
+    text: string;
+  };
+  icon?: React.ReactNode;
+};
+
+type NavBarProps = {
+  title: string;
+  backLink?: string;
+  navItems?: NavItem[];
+  rightContent?: React.ReactNode;
+  showProcessManagerLink?: boolean;
+  onToggleCollapse?: () => void;
+  isCollapsed?: boolean;
+};
+
+export const NavBar: React.FC<NavBarProps> = ({
+  title,
+  backLink,
+  navItems = [],
+  rightContent,
+}) => {
+  const location = useLocation();
+
+  return (
+    <Navbar
+      bg="light"
+      expand="lg"
+      className="mb-2"
+      sticky="top"
+      expanded={false}
+    >
+      <Container fluid>
+        {backLink && (
+          <Nav.Link
+            as={Link}
+            to={backLink}
+            className="me-2 fs-3 text-primary"
+            style={{
+              padding: '0.25rem 0.75rem',
+              border: '2px solid var(--bs-primary)',
+              borderRadius: '50%',
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: '2.5rem',
+              height: '2.5rem'
+            }}
+            title="Go up one level"
+          >
+            ↑
+          </Nav.Link>
+        )}
+
+        <Navbar.Brand className={backLink ? 'ms-2' : ''}>
+          {title}
+        </Navbar.Brand>
+
+        <Navbar.Toggle aria-controls="basic-navbar-nav" style={{ display: 'none' }} />
+
+        <Navbar.Collapse id="basic-navbar-nav">
+          {navItems.length > 0 && (
+            <Nav className="me-auto">
+              {navItems.map((item, i) => {
+                const className = [
+                  item.className,
+                  item.active ? 'text-primary fw-bold border-bottom border-2 border-primary' : '',
+                  typeof item.label === 'string' && item.label.includes('❌') ? 'text-danger fw-bold' : '',
+                  typeof item.label === 'string' && item.label.includes('✅') ? 'text-success fw-bold' : '',
+                  !item.active && typeof item.label !== 'string' ? 'text-secondary' : ''
+                ].filter(Boolean).join(' ');
+
+                return (
+                  <Nav.Link
+                    key={i}
+                    as={item.to ? Link : 'div'}
+                    to={item.to}
+                    active={item.active}
+                    className={className}
+                    title={typeof item.label === 'string' ? item.label : undefined}
+                  >
+                    {item.icon && <span className="me-2">{item.icon}</span>}
+                    {item.label}
+                    {item.badge && (
+                      <Badge
+                        bg={item.badge.variant}
+                        className="ms-2"
+                      >
+                        {item.badge.text}
+                      </Badge>
+                    )}
+                  </Nav.Link>
+                );
+              })}
+            </Nav>
+          )}
+          {rightContent && (
+            <Nav>
+              {React.Children.map(rightContent, (child) => {
+                return child;
+              })}
+            </Nav>
+          )}
+        </Navbar.Collapse>
+      </Container>
+    </Navbar>
+  );
+};

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