testeranto 0.202.0 → 0.203.0

package/src/components/pure/TestPageView.tsx

@@ -16,6 +16,7 @@ import { FileTreeItem } from "./FileTreeItem";
 import { FileTree } from "./FileTree";
 import { ToastNotification } from "./ToastNotification";
 import { getLanguage, renderTestResults } from "./TestPageView_utils";
+import { MagicRobotModal } from "./MagicRobotModal";
 
 type TestPageViewProps = {
   projectName: string;
@@ -146,7 +147,9 @@ export const TestPageView = ({
                   ? "primary"
                   : runtime === "web"
                     ? "success"
-                    : "info",
+                    : runtime === "golang"
+                      ? "warning"
+                      : "info",
               text: runtime,
             },
             className: "pe-none d-flex align-items-center gap-2",
@@ -177,121 +180,23 @@ export const TestPageView = ({
         }
       />
 
-      <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>
+      <MagicRobotModal
+        customMessage={customMessage}
+        isWebSocketConnected={isWebSocketConnected}
+        messageOption={messageOption}
+        navigate={navigate}
+        projectName={projectName}
+        runtime={runtime}
+        setCustomMessage={setCustomMessage}
+        setMessageOption={setMessageOption}
+        setShowAiderModal={setShowAiderModal}
+        setShowToast={setShowToast}
+        setToastMessage={setToastMessage}
+        setToastVariant={setToastVariant}
+        showAiderModal={showAiderModal}
+        testName={testName}
+        ws={ws}
+      />
 
       <Row className="g-0">
         <Col

package/src/components/pure/TestPageView_utils.tsx

@@ -35,6 +35,8 @@ export const getLanguage = (path: string) => {
       return "json";
     case "md":
       return "markdown";
+    case "py":
+      return "python";
     default:
       return "plaintext";
   }

package/src/components/stateful/DratoPage.tsx

@@ -0,0 +1,457 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { useState, useCallback } from "react";
+import { XMLNode, GenericXMLEditorPage } from "./GenericXMLEditorPage";
+
+export interface BootstrapNode {
+  id: string;
+  type: string;
+  attributes: Record<string, string>;
+  children: BootstrapNode[];
+  textContent?: string;
+}
+
+export const DratoPage = () => {
+  const initialTree: XMLNode = {
+    id: "root",
+    type: "Container",
+    attributes: {
+      fluid: "true"
+    },
+    children: [],
+  };
+
+  const [bootstrapTree, setBootstrapTree] = useState<BootstrapNode>(initialTree);
+  const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
+  const [activeTab, setActiveTab] = useState<string>("preview");
+  const [history, setHistory] = useState<BootstrapNode[]>([initialTree]);
+  const [historyIndex, setHistoryIndex] = useState<number>(0);
+  const [hiddenNodes, setHiddenNodes] = useState<Set<string>>(new Set());
+
+  // Find a node by ID
+  const findNode = useCallback((node: BootstrapNode, id: string): BootstrapNode | null => {
+    if (node.id === id) return node;
+    for (const child of node.children) {
+      const found = findNode(child, id);
+      if (found) return found;
+    }
+    return null;
+  }, []);
+
+  // Helper to update tree and manage history
+  const updateTree = useCallback(
+    (newTree: BootstrapNode) => {
+      setBootstrapTree(newTree);
+      setHistory((prevHistory) => {
+        const newHistory = prevHistory.slice(0, historyIndex + 1);
+        newHistory.push(newTree);
+        return newHistory;
+      });
+      setHistoryIndex((prevIndex) => prevIndex + 1);
+    },
+    [historyIndex]
+  );
+
+  // Update node attributes
+  const updateNodeAttributes = useCallback(
+    (nodeId: string, attributes: Record<string, string>) => {
+      setBootstrapTree((prevTree) => {
+        const newTree = JSON.parse(JSON.stringify(prevTree));
+        const node = findNode(newTree, nodeId);
+        if (node) {
+          node.attributes = { ...node.attributes, ...attributes };
+        }
+        updateTree(newTree);
+        return newTree;
+      });
+    },
+    [findNode, updateTree]
+  );
+
+  // Update node text content
+  const updateNodeTextContent = useCallback(
+    (nodeId: string, textContent: string) => {
+      setBootstrapTree((prevTree) => {
+        const newTree = JSON.parse(JSON.stringify(prevTree));
+        const node = findNode(newTree, nodeId);
+        if (node) {
+          node.textContent = textContent;
+        }
+        updateTree(newTree);
+        return newTree;
+      });
+    },
+    [findNode, updateTree]
+  );
+
+  // Toggle node visibility
+  const toggleNodeVisibility = useCallback((nodeId: string) => {
+    setHiddenNodes((prev) => {
+      const newHidden = new Set(prev);
+      if (newHidden.has(nodeId)) {
+        newHidden.delete(nodeId);
+      } else {
+        newHidden.add(nodeId);
+      }
+      return newHidden;
+    });
+  }, []);
+
+  // Add a new child node
+  const addChildNode = useCallback(
+    (parentId: string, nodeType: string) => {
+      setBootstrapTree((prevTree) => {
+        const newTree = JSON.parse(JSON.stringify(prevTree));
+        const parent = findNode(newTree, parentId);
+        if (parent) {
+          // Default attributes based on node type
+          let defaultAttributes: Record<string, string> = {};
+          switch (nodeType) {
+            case "Container":
+              defaultAttributes = { fluid: "true" };
+              break;
+            case "Row":
+              defaultAttributes = {};
+              break;
+            case "Col":
+              defaultAttributes = { xs: "12" };
+              break;
+            case "Button":
+              defaultAttributes = { variant: "primary" };
+              break;
+            case "Card":
+              defaultAttributes = {};
+              break;
+            default:
+              defaultAttributes = {};
+          }
+
+          const newNode: BootstrapNode = {
+            id: `${nodeType}-${Date.now()}`,
+            type: nodeType,
+            attributes: defaultAttributes,
+            children: [],
+          };
+          parent.children = [...parent.children, newNode];
+          setSelectedNodeId(newNode.id);
+          updateTree(newTree);
+        }
+        return newTree;
+      });
+    },
+    [findNode, updateTree]
+  );
+
+  // Remove a node
+  const removeNode = useCallback(
+    (nodeId: string) => {
+      setBootstrapTree((prevTree) => {
+        const newTree = JSON.parse(JSON.stringify(prevTree));
+        const removeFromParent = (node: BootstrapNode, targetId: string): boolean => {
+          for (let i = 0; i < node.children.length; i++) {
+            if (node.children[i].id === targetId) {
+              node.children.splice(i, 1);
+              return true;
+            }
+            if (removeFromParent(node.children[i], targetId)) {
+              return true;
+            }
+          }
+          return false;
+        };
+        removeFromParent(newTree, nodeId);
+        if (selectedNodeId === nodeId) {
+          setSelectedNodeId(null);
+        }
+        updateTree(newTree);
+        return newTree;
+      });
+    },
+    [selectedNodeId, updateTree]
+  );
+
+  // Undo/Redo handlers
+  const handleUndo = useCallback(() => {
+    if (historyIndex > 0) {
+      setHistoryIndex((prevIndex) => prevIndex - 1);
+      setBootstrapTree(history[historyIndex - 1]);
+    }
+  }, [history, historyIndex]);
+
+  const handleRedo = useCallback(() => {
+    if (historyIndex < history.length - 1) {
+      setHistoryIndex((prevIndex) => prevIndex + 1);
+      setBootstrapTree(history[historyIndex + 1]);
+    }
+  }, [history, historyIndex]);
+
+  const selectedNode = selectedNodeId
+    ? findNode(bootstrapTree, selectedNodeId)
+    : null;
+
+  // Define node types for Bootstrap
+  const bootstrapNodeTypes = [
+    { label: 'Container', type: 'Container' },
+    { label: 'Row', type: 'Row' },
+    { label: 'Column', type: 'Col' },
+    { label: 'Button', type: 'Button' },
+    { label: 'Card', type: 'Card' },
+    { label: 'Text', type: 'Text' }
+  ];
+
+  // Function to create new Bootstrap nodes
+  const createBootstrapNode = (parentId: string, nodeType: string): XMLNode => {
+    // Default attributes based on node type
+    let defaultAttributes: Record<string, string> = {};
+    switch (nodeType) {
+      case "Container":
+        defaultAttributes = { fluid: "true" };
+        break;
+      case "Row":
+        defaultAttributes = {};
+        break;
+      case "Col":
+        defaultAttributes = { xs: "12" };
+        break;
+      case "Button":
+        defaultAttributes = { variant: "primary" };
+        break;
+      case "Card":
+        defaultAttributes = {};
+        break;
+      case "Text":
+        defaultAttributes = { class: "" };
+        break;
+      default:
+        defaultAttributes = {};
+    }
+
+    return {
+      id: `${nodeType}-${Date.now()}`,
+      type: nodeType,
+      attributes: defaultAttributes,
+      children: [],
+    };
+  };
+
+  // Render preview for Bootstrap
+  const renderBootstrapPreview = (node: XMLNode, isSelected: boolean, eventHandlers: any) => {
+    // Render Bootstrap components based on node type
+    const { type, attributes, children, textContent } = node;
+    const style = isSelected ? { outline: '2px dashed blue' } : {};
+    
+    // Convert children to React elements
+    const childElements = children.map(child => 
+      renderBootstrapPreview(child, selectedNodeId === child.id, {})
+    );
+    
+    // Handle different Bootstrap component types
+    switch (type) {
+      case 'Container':
+        return (
+          <div 
+            key={node.id}
+            className={`container${attributes.fluid === 'true' ? '-fluid' : ''}`}
+            style={style}
+            {...eventHandlers}
+          >
+            {childElements}
+            {textContent}
+          </div>
+        );
+      case 'Row':
+        return (
+          <div 
+            key={node.id}
+            className="row"
+            style={style}
+            {...eventHandlers}
+          >
+            {childElements}
+            {textContent}
+          </div>
+        );
+      case 'Col':
+        // Generate column classes based on attributes
+        const colClasses = Object.entries(attributes)
+          .filter(([key]) => ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(key))
+          .map(([breakpoint, size]) => `col-${breakpoint}-${size}`)
+          .join(' ');
+        return (
+          <div 
+            key={node.id}
+            className={colClasses || 'col'}
+            style={style}
+            {...eventHandlers}
+          >
+            {childElements}
+            {textContent}
+          </div>
+        );
+      case 'Button':
+        return (
+          <button 
+            key={node.id}
+            className={`btn btn-${attributes.variant || 'primary'}`}
+            style={style}
+            {...eventHandlers}
+          >
+            {textContent || 'Button'}
+          </button>
+        );
+      case 'Card':
+        return (
+          <div 
+            key={node.id}
+            className="card"
+            style={style}
+            {...eventHandlers}
+          >
+            <div className="card-body">
+              {childElements}
+              {textContent}
+            </div>
+          </div>
+        );
+      case 'Text':
+        return (
+          <div 
+            key={node.id}
+            className={attributes.class || ''}
+            style={style}
+            {...eventHandlers}
+          >
+            {textContent}
+            {childElements}
+          </div>
+        );
+      default:
+        return (
+          <div key={node.id} style={style} {...eventHandlers}>
+            {type} element
+            {childElements}
+            {textContent}
+          </div>
+        );
+    }
+  };
+
+  // Attribute editor for Bootstrap
+  const renderBootstrapAttributeEditor = (node: XMLNode, onUpdateAttributes: (attrs: Record<string, string>) => void, onUpdateTextContent: (text: string) => void) => {
+    const handleAttributeChange = (key: string, value: string) => {
+      const newAttributes = { ...node.attributes, [key]: value };
+      onUpdateAttributes(newAttributes);
+    };
+
+    const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      onUpdateTextContent(e.target.value);
+    };
+
+    // Render different attribute editors based on node type
+    return (
+      <div>
+        {/* Text content editor for nodes that can have text */}
+        {(node.type === 'Button' || node.type === 'Card' || node.type === 'Text') && (
+          <div className="mb-3">
+            <label className="form-label">Text Content</label>
+            <input
+              type="text"
+              className="form-control"
+              value={node.textContent || ''}
+              onChange={handleTextChange}
+            />
+          </div>
+        )}
+        
+        {/* Type-specific attribute editors */}
+        {node.type === 'Container' && (
+          <div className="mb-3">
+            <label className="form-label">Fluid</label>
+            <select
+              className="form-select"
+              value={node.attributes.fluid || 'false'}
+              onChange={(e) => handleAttributeChange('fluid', e.target.value)}
+            >
+              <option value="true">True</option>
+              <option value="false">False</option>
+            </select>
+          </div>
+        )}
+        
+        {node.type === 'Col' && (
+          <div>
+            {['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].map(breakpoint => (
+              <div key={breakpoint} className="mb-2">
+                <label className="form-label">{breakpoint.toUpperCase()}</label>
+                <input
+                  type="text"
+                  className="form-control"
+                  value={node.attributes[breakpoint] || ''}
+                  onChange={(e) => handleAttributeChange(breakpoint, e.target.value)}
+                  placeholder="1-12"
+                />
+              </div>
+            ))}
+          </div>
+        )}
+        
+        {node.type === 'Button' && (
+          <div className="mb-3">
+            <label className="form-label">Variant</label>
+            <select
+              className="form-select"
+              value={node.attributes.variant || 'primary'}
+              onChange={(e) => handleAttributeChange('variant', e.target.value)}
+            >
+              {['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'].map(variant => (
+                <option key={variant} value={variant}>{variant}</option>
+              ))}
+            </select>
+          </div>
+        )}
+        
+        {node.type === 'Text' && (
+          <div className="mb-3">
+            <label className="form-label">CSS Classes</label>
+            <input
+              type="text"
+              className="form-control"
+              value={node.attributes.class || ''}
+              onChange={(e) => handleAttributeChange('class', e.target.value)}
+              placeholder="e.g., text-primary fs-4"
+            />
+          </div>
+        )}
+        
+        {/* Generic attribute editor for other attributes */}
+        <div className="mb-3">
+          <label className="form-label">Other Attributes</label>
+          {Object.entries(node.attributes)
+            .filter(([key]) => !['fluid', 'variant'].includes(key) && !['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(key))
+            .map(([key, value]) => (
+              <div key={key} className="input-group mb-2">
+                <span className="input-group-text">{key}</span>
+                <input
+                  type="text"
+                  className="form-control"
+                  value={value}
+                  onChange={(e) => handleAttributeChange(key, e.target.value)}
+                />
+              </div>
+            ))
+          }
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <GenericXMLEditorPage
+      initialTree={initialTree}
+      renderPreview={renderBootstrapPreview}
+      attributeEditor={renderBootstrapAttributeEditor}
+      nodeTypes={bootstrapNodeTypes}
+      onAddNode={createBootstrapNode}
+    />
+  );
+};