testeranto 0.202.0 → 0.205.0

package/dist/module/src/app/frontend/testPage/TestPage.js

@@ -0,0 +1,48 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { useState } from "react";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
+// import { useWebSocket } from "../App";
+import { TestPageView } from "./TestPageView";
+import { useFs } from "./../useFs";
+// import { fetchDataUtil } from "../fetchDataUtil";
+// import { fetchTestData } from "../api";
+export const TestPage = () => {
+    const navigate = useNavigate();
+    const location = useLocation();
+    const [route, setRoute] = useState("results");
+    // const wsContext = useWebSocket();
+    const fs = useFs();
+    const isConnected = (fs === null || fs === void 0 ? void 0 : fs.isConnected) || false;
+    // Sync route with hash changes
+    // useEffect(() => {
+    //   const hash = location.hash.replace("#", "");
+    //   if (
+    //     hash &&
+    //     ["results", "logs", "types", "lint", "coverage"].includes(hash)
+    //   ) {
+    //     setRoute(hash);
+    //   } else {
+    //     setRoute("results");
+    //   }
+    // }, [location.hash]);
+    const [testName, setTestName] = useState("");
+    const [logs, setLogs] = useState({});
+    // const [loading, setLoading] = useState(true);
+    // const [error, setError] = useState(null);
+    const [testsExist, setTestsExist] = useState(true);
+    const [errorCounts, setErrorCounts] = useState({
+        typeErrors: 0,
+        staticErrors: 0,
+        runTimeErrors: 0,
+    });
+    const [summary, setSummary] = useState(null);
+    const { projectName, "*": splat } = useParams();
+    const pathParts = splat ? splat.split("/") : [];
+    const runtime = pathParts.pop() || "";
+    const testPath = pathParts.join("/");
+    const decodedTestPath = testPath ? decodeURIComponent(testPath) : "";
+    if (!logs)
+        return React.createElement("div", null, "loading...");
+    return (React.createElement(React.Fragment, null,
+        React.createElement(TestPageView, { route: route, setRoute: setRoute, navigate: navigate, projectName: projectName, testName: testName, decodedTestPath: decodedTestPath, runtime: runtime, logs: logs, testsExist: testsExist, errorCounts: errorCounts, isWebSocketConnected: isConnected })));
+};

package/dist/module/src/app/frontend/testPage/TestPageLeftContent.js

@@ -0,0 +1,11 @@
+import React, { useState } from "react";
+import { ProjectsTree } from "./ProjectsTree";
+export const TestPageLeftContent = ({ projects, setExpandedSections, expandedSections, logs, setActiveTab, setSelectedFile, runtime, selectedSourcePath, activeTab, setSelectedSourcePath, projectName, testName, }) => {
+    const [syncEnabled, setSyncEnabled] = useState(false);
+    return (React.createElement("div", { className: "p-2" },
+        React.createElement("div", { className: "d-flex align-items-center mb-2" },
+            React.createElement("div", { className: "form-check form-switch" },
+                React.createElement("input", { className: "form-check-input", type: "checkbox", checked: syncEnabled, onChange: (e) => setSyncEnabled(e.target.checked), id: "fileSyncToggle", disabled: true }),
+                React.createElement("label", { className: "form-check-label small", htmlFor: "fileSyncToggle" }, "Live File Sync (Unavailable)"))),
+        React.createElement(ProjectsTree, { projects: projects, currentProjectName: projectName, currentTestName: testName, setExpandedSections: setExpandedSections, expandedSections: expandedSections, logs: logs, setActiveTab: setActiveTab, setSelectedFile: setSelectedFile, runtime: runtime, selectedSourcePath: selectedSourcePath, activeTab: activeTab, setSelectedSourcePath: setSelectedSourcePath })));
+};

package/dist/module/src/app/frontend/testPage/TestPageMainContent.js

@@ -0,0 +1,75 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from "react";
+import { Button } from "react-bootstrap";
+import { renderTestResults } from "./TestPageView_utils";
+export const TestPageMainContent = ({ selectedFile, buildErrors, projectName, testName, runtime, }) => (React.createElement("div", { className: "p-3" },
+    (selectedFile === null || selectedFile === void 0 ? void 0 : selectedFile.path.endsWith("tests.json")) && (React.createElement("div", { className: "test-results-preview" }, typeof selectedFile.content === "string"
+        ? renderTestResults(JSON.parse(selectedFile.content), buildErrors, projectName, testName, runtime)
+        : renderTestResults(selectedFile.content, buildErrors, projectName, testName, runtime))),
+    (selectedFile === null || selectedFile === void 0 ? void 0 : selectedFile.path.match(/\.(png|jpg|jpeg|gif|svg)$/i)) && (React.createElement("div", { className: "text-center" },
+        React.createElement("img", { src: selectedFile.content, alt: selectedFile.path, className: "img-fluid", style: { maxHeight: "300px" } }),
+        React.createElement("div", { className: "mt-2" },
+            React.createElement("a", { href: selectedFile.content, target: "_blank", rel: "noopener noreferrer", className: "btn btn-sm btn-outline-primary" }, "Open Full Size")))),
+    (selectedFile === null || selectedFile === void 0 ? void 0 : selectedFile.path.endsWith("build.json")) && (React.createElement("div", null,
+        React.createElement("h5", null, "Build Information"),
+        (() => {
+            var _a, _b;
+            try {
+                const buildData = JSON.parse(selectedFile.content);
+                return (React.createElement(React.Fragment, null,
+                    ((_a = buildData.errors) === null || _a === void 0 ? void 0 : _a.length) > 0 && (React.createElement("div", { className: "mb-3" },
+                        React.createElement("h6", { className: "text-danger" },
+                            "Errors (",
+                            buildData.errors.length,
+                            ")"),
+                        React.createElement("ul", { className: "list-unstyled" }, buildData.errors.map((error, index) => (React.createElement("li", { key: index, className: "mb-2 p-2  rounded" },
+                            React.createElement("div", { className: "text-danger fw-bold" }, error.text),
+                            error.location && (React.createElement("div", { className: "small text-muted" },
+                                "File: ",
+                                error.location.file,
+                                "Line: ",
+                                error.location.line,
+                                "Column: ",
+                                error.location.column)),
+                            error.notes && error.notes.length > 0 && (React.createElement("div", { className: "small" },
+                                "Notes:",
+                                React.createElement("ul", null, error.notes.map((note, noteIndex) => (React.createElement("li", { key: noteIndex }, note.text)))))))))))),
+                    ((_b = buildData.warnings) === null || _b === void 0 ? void 0 : _b.length) > 0 && (React.createElement("div", { className: "mb-3" },
+                        React.createElement("h6", { className: "text-warning" },
+                            "Warnings (",
+                            buildData.warnings.length,
+                            ")"),
+                        React.createElement("ul", { className: "list-unstyled" }, buildData.warnings.map((warning, index) => (React.createElement("li", { key: index, className: "mb-2 p-2  rounded" },
+                            React.createElement("div", { className: "text-warning fw-bold" }, warning.text),
+                            warning.location && (React.createElement("div", { className: "small text-muted" },
+                                "File: ",
+                                warning.location.file,
+                                "Line: ",
+                                warning.location.line,
+                                "Column: ",
+                                warning.location.column)),
+                            warning.notes && warning.notes.length > 0 && (React.createElement("div", { className: "small" },
+                                "Notes:",
+                                React.createElement("ul", null, warning.notes.map((note, noteIndex) => (React.createElement("li", { key: noteIndex }, note.text)))))))))))),
+                    (!buildData.errors || buildData.errors.length === 0) &&
+                        (!buildData.warnings || buildData.warnings.length === 0) && (React.createElement("div", { className: "alert alert-success" }, "No build errors or warnings"))));
+            }
+            catch (e) {
+                return (React.createElement("div", { className: "alert alert-danger" },
+                    "Error parsing build.json: ",
+                    e.message));
+            }
+        })())),
+    (selectedFile === null || selectedFile === void 0 ? void 0 : selectedFile.path.endsWith(".json")) &&
+        !selectedFile.path.endsWith("tests.json") &&
+        !selectedFile.path.endsWith("build.json") && (React.createElement("pre", { className: " p-2 small" },
+        React.createElement("code", null, selectedFile.content))),
+    (selectedFile === null || selectedFile === void 0 ? void 0 : selectedFile.path.includes("source_files")) && (React.createElement("div", null,
+        React.createElement("div", { className: "mb-2 small text-muted" },
+            React.createElement("i", { className: "bi bi-file-earmark-text me-1" }),
+            selectedFile.path.split("/").pop()),
+        React.createElement(Button, { variant: "outline-primary", size: "sm", className: "mb-2", onClick: () => {
+                // TODO: Add save functionality
+                alert("Save functionality will be implemented here");
+            } }, "Save Changes")))));

package/dist/module/src/app/frontend/testPage/TestPageNavbar.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { Button } from "react-bootstrap";
+import { NavBar } from "../components/pure/NavBar";
+export const TestPageNavbar = ({ decodedTestPath, projectName, runtime, setShowAiderModal, isWebSocketConnected }) => {
+    return React.createElement(NavBar, { title: decodedTestPath, backLink: `/projects/${projectName}`, navItems: [
+            {
+                label: "",
+                badge: {
+                    variant: runtime === "node"
+                        ? "primary"
+                        : runtime === "web"
+                            ? "success"
+                            : runtime === "golang"
+                                ? "warning"
+                                : "info",
+                    text: runtime,
+                },
+                className: "pe-none d-flex align-items-center gap-2",
+            },
+        ], rightContent: React.createElement(Button, { variant: "info", onClick: () => setShowAiderModal(true), className: "ms-2 position-relative", title: isWebSocketConnected
+                ? "AI Assistant"
+                : "AI Assistant (WebSocket not connected)", disabled: !isWebSocketConnected },
+            "\uD83E\uDD16",
+            !isWebSocketConnected && (React.createElement("span", { className: "position-absolute top-0 start-100 translate-middle p-1 bg-danger border border-light rounded-circle", title: "WebSocket disconnected" },
+                React.createElement("span", { className: "visually-hidden" }, "WebSocket disconnected")))) });
+};

package/dist/module/src/app/frontend/testPage/TestPageView.js

@@ -0,0 +1,315 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { Container, Row, Col } from "react-bootstrap";
+import { Editor } from "@monaco-editor/react";
+import { TestPageNavbar } from "./TestPageNavbar";
+import { TestPageMainContent } from "./TestPageMainContent";
+import { TestPageLeftContent } from "./TestPageLeftContent";
+import { MagicRobotModal } from "../components/pure/MagicRobotModal";
+import { ToastNotification } from "../components/pure/ToastNotification";
+export const TestPageView = ({ projectName, testName, decodedTestPath, runtime, testsExist, errorCounts, logs, isWebSocketConnected, }) => {
+    var _a;
+    const navigate = useNavigate();
+    const [showAiderModal, setShowAiderModal] = useState(false);
+    const [messageOption, setMessageOption] = useState("default");
+    const [customMessage, setCustomMessage] = useState(typeof logs["message.txt"] === "string"
+        ? logs["message.txt"]
+        : "make a script that prints hello");
+    const [showToast, setShowToast] = useState(false);
+    const [toastMessage, setToastMessage] = useState("");
+    const [toastVariant, setToastVariant] = useState("success");
+    const [expandedSections, setExpandedSections] = useState({
+        standardLogs: true,
+        runtimeLogs: true,
+        sourceFiles: true,
+        buildErrors: true,
+    });
+    // const [isNavbarCollapsed, setIsNavbarCollapsed] = useState(false);
+    // // Extract build errors and warnings relevant to this test
+    // const [buildErrors, setBuildErrors] = useState<{
+    //   errors: any[];
+    //   warnings: any[];
+    // }>({ errors: [], warnings: [] });
+    // useEffect(() => {
+    //   const metafile = logs.build_logs?.metafile;
+    //   if (!metafile) {
+    //     setBuildErrors({ errors: [], warnings: [] });
+    //     return;
+    //   }
+    //   const sourceFilesSet = new Set<string>();
+    //   // Collect all input files from metafile outputs related to this test
+    //   Object.entries(metafile.outputs || {}).forEach(([outputPath, output]) => {
+    //     // Normalize paths for comparison
+    //     const normalizedTestName = testName.replace(/\\/g, "/");
+    //     const normalizedEntryPoint = output.entryPoint
+    //       ? output.entryPoint.replace(/\\/g, "/")
+    //       : "";
+    //     if (normalizedEntryPoint.includes(normalizedTestName)) {
+    //       Object.keys(output.inputs || {}).forEach((inputPath) => {
+    //         sourceFilesSet.add(inputPath.replace(/\\/g, "/"));
+    //       });
+    //     }
+    //   });
+    //   // Filter errors and warnings to those originating from source files of this test
+    //   const filteredErrors = (logs.build_logs?.errors || []).filter(
+    //     (err: any) => {
+    //       if (!err.location || !err.location.file) return false;
+    //       return sourceFilesSet.has(err.location.file.replace(/\\/g, "/"));
+    //     }
+    //   );
+    //   const filteredWarnings = (logs.build_logs?.warnings || []).filter(
+    //     (warn: any) => {
+    //       if (!warn.location || !warn.location.file) return false;
+    //       return sourceFilesSet.has(warn.location.file.replace(/\\/g, "/"));
+    //     }
+    //   );
+    //   setBuildErrors({ errors: filteredErrors, warnings: filteredWarnings });
+    // }, [logs, testName]);
+    // // Update customMessage when logs change
+    // useEffect(() => {
+    //   if (typeof logs["message.txt"] === "string" && logs["message.txt"].trim()) {
+    //     setCustomMessage(logs["message.txt"]);
+    //   }
+    // }, [logs]);
+    // // Fetch projects data
+    // useEffect(() => {
+    //   const fetchProjects = async () => {
+    //     try {
+    //       // First try to fetch from the API endpoint
+    //       try {
+    //         const response = await fetch('/api/projects/list');
+    //         if (response.ok) {
+    //           const projectsData = await response.json();
+    //           setProjects(projectsData);
+    //           return;
+    //         }
+    //         // If response is not ok, throw to trigger the catch block
+    //         throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+    //       } catch (apiError) {
+    //         console.warn('API endpoint failed, trying projects.json:', apiError);
+    //       }
+    //       // Fall back to projects.json
+    //       const response = await fetch('/projects.json');
+    //       if (response.ok) {
+    //         const projectsData = await response.json();
+    //         setProjects(projectsData);
+    //       } else {
+    //         // Throw an error if projects.json doesn't exist
+    //         throw new Error('projects.json not found');
+    //       }
+    //     } catch (error) {
+    //       console.error('Error fetching projects:', error);
+    //       // Set projects to empty array to show appropriate UI
+    //       setProjects([]);
+    //     }
+    //   };
+    //   fetchProjects();
+    // }, []);
+    // // Use the centralized WebSocket from App context
+    // const wsContext = useWebSocket();
+    // const ws = wsContext?.ws;
+    const [activeTab, setActiveTab] = React.useState("tests.json");
+    const [openFiles, setOpenFiles] = useState([]);
+    const [activeFileIndex, setActiveFileIndex] = useState(-1);
+    const [selectedSourcePath, setSelectedSourcePath] = useState(null);
+    const [editorTheme, setEditorTheme] = useState("vs-dark");
+    // Add state for projects
+    const [projects, setProjects] = useState([]);
+    // Reference to the editor instance and model
+    const [editorRef, setEditorRef] = useState(null);
+    const [modelRef, setModelRef] = useState(null);
+    // Function to open a file in a new tab
+    const openFile = (file) => {
+        // Check if the file is already open
+        const existingIndex = openFiles.findIndex(f => f.path === file.path);
+        if (existingIndex !== -1) {
+            setActiveFileIndex(existingIndex);
+            return;
+        }
+        // Add the file to open files and set it as active
+        setOpenFiles(prev => [...prev, file]);
+        setActiveFileIndex(openFiles.length);
+    };
+    // Function to close a tab
+    const closeFile = (index) => {
+        setOpenFiles(prev => prev.filter((_, i) => i !== index));
+        // Adjust active index if needed
+        if (activeFileIndex === index) {
+            // If closing the active tab, activate the next one or previous one
+            if (openFiles.length > 1) {
+                setActiveFileIndex(Math.min(index, openFiles.length - 2));
+            }
+            else {
+                setActiveFileIndex(-1);
+            }
+        }
+        else if (activeFileIndex > index) {
+            setActiveFileIndex(activeFileIndex - 1);
+        }
+    };
+    // Update selectedFile when activeFileIndex changes
+    const selectedFile = activeFileIndex >= 0 ? openFiles[activeFileIndex] : null;
+    // Debug: track selectedFile changes
+    // useEffect(() => {
+    //   console.log('selectedFile changed:', {
+    //     path: selectedFile?.path,
+    //     contentLength: selectedFile?.content?.length,
+    //     language: selectedFile?.language
+    //   });
+    // }, [selectedFile]);
+    // Update editor content when selectedFile changes
+    useEffect(() => {
+        // console.log('selectedFile useEffect triggered', {
+        //   selectedFile: selectedFile,
+        //   editorRefExists: !!editorRef,
+        //   modelRefExists: !!modelRef
+        // });
+        if (selectedFile && editorRef) {
+            console.log('Updating editor for selected file:', selectedFile.path);
+            const monaco = window.monaco;
+            if (monaco) {
+                // Get current model or create a new one if needed
+                let currentModel = editorRef.getModel();
+                if (!currentModel) {
+                    // Create a new model if none exists
+                    currentModel = monaco.editor.createModel(selectedFile.content || "// No content", selectedFile.language || "plaintext");
+                    editorRef.setModel(currentModel);
+                    setModelRef(currentModel);
+                    console.log('New model created and set');
+                }
+                else {
+                    // Update existing model's value and language if needed
+                    const currentValue = currentModel.getValue();
+                    const newValue = selectedFile.content || "// No content";
+                    // Only update if content has changed
+                    if (currentValue !== newValue) {
+                        currentModel.setValue(newValue);
+                        console.log('Model value updated');
+                    }
+                    // Update language if needed
+                    const currentLanguage = currentModel.getLanguageId();
+                    const newLanguage = selectedFile.language || "plaintext";
+                    if (currentLanguage !== newLanguage) {
+                        monaco.editor.setModelLanguage(currentModel, newLanguage);
+                        console.log('Model language updated to:', newLanguage);
+                    }
+                }
+                // Always reveal the beginning of the file
+                editorRef.revealPosition({ lineNumber: 1, column: 1 });
+            }
+        }
+        else {
+            console.log('No selectedFile or editorRef available');
+        }
+    }, [selectedFile, editorRef, modelRef]);
+    return (React.createElement(Container, { fluid: true, className: "px-0" },
+        React.createElement(TestPageNavbar, { decodedTestPath: decodedTestPath, projectName: projectName, runtime: runtime, setShowAiderModal: setShowAiderModal, isWebSocketConnected: isWebSocketConnected }),
+        React.createElement(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 }),
+        React.createElement(Row, { className: "g-0 flex-nowrap overflow-x-auto" },
+            React.createElement(Col, { sm: 3, style: {
+                    height: "calc(100vh - 56px)",
+                    overflowY: "auto",
+                } },
+                React.createElement(TestPageLeftContent, { projects: projects, setExpandedSections: setExpandedSections, expandedSections: expandedSections, logs: logs, setActiveTab: setActiveTab, setSelectedFile: openFile, runtime: runtime, selectedSourcePath: selectedSourcePath, activeTab: activeTab, setSelectedSourcePath: setSelectedSourcePath, projectName: projectName, testName: testName })),
+            React.createElement(Col, { sm: 8, style: {
+                    height: "calc(100vh - 56px)",
+                    overflowY: "auto",
+                    display: "flex",
+                    flexDirection: "column",
+                } },
+                openFiles.length > 0 && (React.createElement("div", { style: {
+                        display: "flex",
+                        backgroundColor: "#1e1e1e",
+                        borderBottom: "1px solid #3c3c3c"
+                    } }, openFiles.map((file, index) => (React.createElement("div", { key: file.path, style: {
+                        padding: "8px 16px",
+                        cursor: "pointer",
+                        backgroundColor: index === activeFileIndex ? "#2d2d30" : "transparent",
+                        color: index === activeFileIndex ? "#ffffff" : "#cccccc",
+                        borderRight: "1px solid #3c3c3c",
+                        display: "flex",
+                        alignItems: "center",
+                    }, onClick: () => setActiveFileIndex(index) },
+                    React.createElement("span", { style: { marginRight: "8px" } }, file.path.split('/').pop()),
+                    React.createElement("button", { onClick: (e) => {
+                            e.stopPropagation();
+                            closeFile(index);
+                        }, style: {
+                            background: "none",
+                            border: "none",
+                            color: "#cccccc",
+                            cursor: "pointer",
+                            padding: "0",
+                            width: "16px",
+                            height: "16px",
+                            borderRadius: "50%",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                        }, onMouseOver: (e) => {
+                            e.currentTarget.style.backgroundColor = '#e81123';
+                            e.currentTarget.style.color = '#ffffff';
+                        }, onMouseOut: (e) => {
+                            e.currentTarget.style.backgroundColor = 'transparent';
+                            e.currentTarget.style.color = '#cccccc';
+                        } }, "\u00D7")))))),
+                React.createElement("div", { style: { height: "100%", width: "100%", flexGrow: 1 }, id: "editor-wrapper" },
+                    React.createElement(Editor, { height: "100%" // Fill the container
+                        , path: (selectedFile === null || selectedFile === void 0 ? void 0 : selectedFile.path) || "empty", defaultLanguage: (selectedFile === null || selectedFile === void 0 ? void 0 : selectedFile.language) || "plaintext", theme: editorTheme, options: {
+                            minimap: { enabled: false },
+                            fontSize: 14,
+                            wordWrap: "on",
+                            automaticLayout: true,
+                            readOnly: !((_a = selectedFile === null || selectedFile === void 0 ? void 0 : selectedFile.path) === null || _a === void 0 ? void 0 : _a.includes("source_files")),
+                            // Configure scrollbars to allow horizontal scrolling to bubble up when appropriate
+                            scrollbar: {
+                                vertical: 'auto',
+                                horizontal: 'auto',
+                                verticalScrollbarSize: 8,
+                                horizontalScrollbarSize: 8,
+                                handleMouseWheel: true,
+                                // This is the key option: don't always consume mouse wheel events
+                                alwaysConsumeMouseWheel: false
+                            },
+                            mouseWheelScrollSensitivity: 1,
+                            fastScrollSensitivity: 1,
+                            scrollBeyondLastColumn: 0,
+                            scrollBeyondLastLine: true,
+                        }, onMount: (editor, monaco) => {
+                            console.log('Editor mounted', {
+                                selectedFileAtMount: selectedFile,
+                                monacoAvailable: !!monaco
+                            });
+                            // Store editor reference
+                            setEditorRef(editor);
+                            // Create initial model if selectedFile is available
+                            if (selectedFile) {
+                                const model = monaco.editor.createModel(selectedFile.content || "// Select a file to view its contents", selectedFile.language || "plaintext");
+                                editor.setModel(model);
+                                setModelRef(model);
+                                console.log('Initial model created and set');
+                            }
+                            console.log('Editor reference set');
+                            // Clean up when editor is unmounted
+                            return () => {
+                                // Dispose of the model if it exists
+                                const currentModel = editor.getModel();
+                                if (currentModel) {
+                                    currentModel.dispose();
+                                }
+                                // Clear the references
+                                setEditorRef(null);
+                                setModelRef(null);
+                            };
+                        } }))),
+            React.createElement(Col, { sm: 8, style: {
+                    height: "calc(100vh - 56px)",
+                    overflowY: "auto",
+                } },
+                React.createElement(TestPageMainContent, { selectedFile: selectedFile, buildErrors: buildErrors, projectName: projectName, testName: testName, runtime: runtime })),
+            React.createElement(Col, { sm: 3, style: { height: "calc(100vh - 56px)", overflowY: "auto" } }, "atttibute editor here"),
+            React.createElement(Col, { sm: 3, style: { height: "calc(100vh - 56px)", overflowY: "auto" } }, "tree editor here")),
+        React.createElement(ToastNotification, { showToast: showToast, setShowToast: setShowToast, toastVariant: toastVariant, toastMessage: toastMessage })));
+};

package/dist/module/src/app/frontend/testPage/TestPageView.test/implementation.js

@@ -0,0 +1,122 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { assert } from "chai";
+import * as React from "react";
+import * as ReactDom from "react-dom/client";
+export const implementation = {
+    suites: {
+        Default: "TestPageView basic rendering",
+        Navigation: "TestPageView navigation behavior",
+        ErrorStates: "TestPageView error handling",
+    },
+    givens: {
+        Default: () => (props) => {
+            // Create a container and render the component
+            const container = document.createElement("div");
+            document.body.appendChild(container);
+            const reactElement = React.createElement(props);
+            const domRoot = ReactDom.createRoot(container);
+            domRoot.render(reactElement);
+            return Object.assign({ container,
+                reactElement,
+                domRoot }, props);
+        },
+        WithErrors: () => (props) => {
+            const container = document.createElement("div");
+            document.body.appendChild(container);
+            const reactElement = React.createElement(props);
+            const domRoot = ReactDom.createRoot(container);
+            domRoot.render(reactElement);
+            return Object.assign(Object.assign({ container,
+                reactElement,
+                domRoot }, props), { errorCounts: {
+                    runTimeErrors: 1,
+                    typeErrors: 1,
+                    staticErrors: 1,
+                } });
+        },
+        WithLogs: () => (props) => {
+            const container = document.createElement("div");
+            document.body.appendChild(container);
+            const reactElement = React.createElement(props);
+            const domRoot = ReactDom.createRoot(container);
+            domRoot.render(reactElement);
+            return Object.assign(Object.assign({ container,
+                reactElement,
+                domRoot }, props), { logs: {
+                    "tests.json": "{}",
+                    "stdout.log": "test log content",
+                } });
+        },
+    },
+    whens: {
+        SwitchToTab: (tabName) => async (selection, tr, utils) => {
+            // Update the props to switch tabs
+            const newProps = Object.assign(Object.assign({}, selection), { activeTab: tabName });
+            const newReactElement = React.createElement(selection.reactElement.type, newProps);
+            selection.domRoot.render(newReactElement);
+            return (sel) => (Object.assign(Object.assign({}, sel), { reactElement: newReactElement, activeTab: tabName }));
+        },
+        ClickAiderButton: () => async (selection, tr, utils) => {
+            // Find and click the Aider button
+            const button = selection.container.querySelector("button");
+            if (button) {
+                button.click();
+            }
+            return (sel) => sel;
+        },
+    },
+    thens: {
+        takeScreenshot: (name) => async (ssel, utils) => (sel) => {
+            // Screenshot functionality would be implemented here
+            return Promise.resolve(sel);
+        },
+        RendersNavBar: () => async (ssel, utils) => (sel) => {
+            const navBar = sel.container.querySelector(".navbar");
+            assert.isNotNull(navBar, "Navbar should be rendered");
+            return Promise.resolve(sel);
+        },
+        ShowsActiveTab: (tabName) => async (ssel, utils) => (sel) => {
+            // Check if the active tab matches
+            assert.equal(sel.activeTab, tabName, `Active tab should be ${tabName}`);
+            return Promise.resolve(sel);
+        },
+        ShowsErrorCounts: () => async (ssel, utils) => (sel) => {
+            // Check for error badges
+            const badges = sel.container.querySelectorAll(".badge");
+            assert.isAtLeast(badges.length, 0, "Should show at least one badge");
+            return Promise.resolve(sel);
+        },
+        ShowsTestResults: () => async (ssel, utils) => (sel) => {
+            // Check if test results are shown
+            if (sel.testsExist) {
+                const testResults = sel.container.querySelector(".test-results");
+                assert.isNotNull(testResults, "Test results should be shown when tests exist");
+            }
+            return Promise.resolve(sel);
+        },
+        ShowsLogs: () => async (ssel, utils) => (sel) => {
+            // Check if logs are shown
+            const logs = sel.container.querySelector("pre");
+            assert.isNotNull(logs, "Logs should be shown");
+            return Promise.resolve(sel);
+        },
+        ShowsTypeErrors: () => async (ssel, utils) => (sel) => {
+            // Check if type errors are shown
+            const typeErrors = sel.container.querySelector('[data-testid="type-errors"]');
+            assert.isNotNull(typeErrors, "Type errors should be shown");
+            return Promise.resolve(sel);
+        },
+        ShowsLintErrors: () => async (ssel, utils) => (sel) => {
+            // Check if lint errors are shown
+            const lintErrors = sel.container.querySelector('[data-testid="lint-errors"]');
+            assert.isNotNull(lintErrors, "Lint errors should be shown");
+            return Promise.resolve(sel);
+        },
+        AiderButtonCopiesCommand: () => async (ssel, utils) => (sel) => {
+            // Check if Aider button exists
+            const aiderButton = sel.container.querySelector('button[title*="AI Assistant"]');
+            assert.isNotNull(aiderButton, "Aider button should be present");
+            return Promise.resolve(sel);
+        },
+    },
+};

package/dist/module/src/app/frontend/testPage/TestPageView.test/index.js

@@ -0,0 +1,10 @@
+import Testeranto from "testeranto-react/src/react-dom/jsx/web";
+import React from "react";
+import { MemoryRouter } from "react-router-dom";
+import { implementation } from "./implementation";
+import { specification } from "./specification";
+import { TestPageView } from "../TestPageView";
+import "./../../../App.scss";
+const WrappedTestPageView = (props) => (React.createElement(MemoryRouter, null,
+    React.createElement(TestPageView, Object.assign({}, props))));
+export default Testeranto(implementation, specification, WrappedTestPageView);

package/dist/module/src/app/frontend/testPage/TestPageView.test/specification.js

@@ -0,0 +1,23 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export const specification = (Suite, Given, When, Then) => {
+    return [
+        Suite.Default("TestPageView basic rendering", {
+            "renders navigation bar": Given.Default([], [], [Then.RendersNavBar()]),
+            "shows error counts": Given.Default([], [], [Then.ShowsErrorCounts()]),
+            "shows test results when data exists": Given.Default([], [], [Then.takeScreenshot("shot.png"), Then.ShowsTestResults()]),
+        }),
+        Suite.Navigation("TestPageView navigation behavior", {
+            "shows results tab by default": Given.Default([], [], [Then.ShowsActiveTab("results")]),
+            "switches to logs tab": Given.Default([], [When.SwitchToTab("logs")], [Then.ShowsActiveTab("logs"), Then.ShowsLogs()]),
+            "copies aider command when button clicked": Given.Default([], [When.ClickAiderButton()], [Then.AiderButtonCopiesCommand()]),
+        }),
+        Suite.ErrorStates("TestPageView error handling", {
+            "shows error state when tests fail": Given.WithErrors([], [], [
+                Then.ShowsErrorCounts(),
+                Then.ShowsTypeErrors(),
+                Then.ShowsLintErrors(),
+            ]),
+            "shows logs when available": Given.WithLogs([], [], [Then.ShowsLogs()]),
+        }),
+    ];
+};