testeranto 0.203.0 → 0.206.0

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

@@ -0,0 +1,142 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { FileTree } from "../components/pure/FileTree";
+import { FileTreeItem } from "../components/pure/FileTreeItem";
+import { getLanguage } from "./TestPageView_utils";
+import { STANDARD_LOGS, RUNTIME_SPECIFIC_LOGS } from "../../../utils/logFiles";
+export const ProjectsTree = ({ projects, currentProjectName, currentTestName, setExpandedSections, expandedSections, logs, setActiveTab, setSelectedFile, runtime, selectedSourcePath, activeTab, setSelectedSourcePath, }) => {
+    const navigate = useNavigate();
+    // Always expand the first project by default
+    const [expandedProjects, setExpandedProjects] = useState(() => {
+        const initial = {};
+        if (projects && projects.length > 0) {
+            initial[projects[0]] = true;
+        }
+        return initial;
+    });
+    const [projectTests, setProjectTests] = useState({});
+    const [loadingProjects, setLoadingProjects] = useState({});
+    const toggleProject = async (projectName) => {
+        // Toggle expansion state
+        const isExpanding = !expandedProjects[projectName];
+        setExpandedProjects(prev => (Object.assign(Object.assign({}, prev), { [projectName]: isExpanding })));
+        // If expanding and we haven't loaded tests yet, fetch them
+        if (isExpanding && !projectTests[projectName]) {
+            setLoadingProjects(prev => (Object.assign(Object.assign({}, prev), { [projectName]: true })));
+            try {
+                const response = await fetch(`/api/projects/tests?project=${encodeURIComponent(projectName)}`);
+                if (response.ok) {
+                    const tests = await response.json();
+                    setProjectTests(prev => (Object.assign(Object.assign({}, prev), { [projectName]: tests })));
+                }
+                else {
+                    console.error(`Failed to fetch tests for ${projectName}`);
+                    setProjectTests(prev => (Object.assign(Object.assign({}, prev), { [projectName]: [] })));
+                }
+            }
+            catch (error) {
+                console.error(`Error fetching tests for ${projectName}:`, error);
+                setProjectTests(prev => (Object.assign(Object.assign({}, prev), { [projectName]: [] })));
+            }
+            finally {
+                setLoadingProjects(prev => (Object.assign(Object.assign({}, prev), { [projectName]: false })));
+            }
+        }
+    };
+    return (React.createElement("div", null,
+        React.createElement("div", { className: "d-flex align-items-center text-muted mb-1", style: { fontSize: "0.875rem", fontWeight: "bold" } },
+            React.createElement("i", { className: "bi bi-folder me-1" }),
+            React.createElement("span", null, "Projects")),
+        !projects ? (React.createElement("div", { className: "ms-3 text-muted" }, "Loading projects...")) : projects.length === 0 ? (React.createElement("div", { className: "ms-3 text-muted" }, "No projects available. Please check if projects.json exists.")) : (React.createElement("div", null, projects.map((project, index) => (React.createElement("div", { key: project },
+            React.createElement(FileTreeItem, { name: project, isFile: false, level: 1, isSelected: false, exists: true, isExpanded: expandedProjects[project], onClick: () => toggleProject(project) }),
+            expandedProjects[project] && (React.createElement("div", { className: "ms-4" },
+                "  // Increased indentation for tests",
+                loadingProjects[project] ? (React.createElement("div", { className: "text-muted small" }, "Loading tests...")) : (React.createElement(React.Fragment, null,
+                    index === 0 && (React.createElement(React.Fragment, null,
+                        React.createElement("div", null,
+                            React.createElement(FileTreeItem, { name: "Standard Logs", isFile: false, level: 2, isSelected: false, exists: true, isExpanded: expandedSections.standardLogs, onClick: () => setExpandedSections((prev) => (Object.assign(Object.assign({}, prev), { standardLogs: !prev.standardLogs }))) }),
+                            expandedSections.standardLogs && (React.createElement("div", { className: "ms-4" }, Object.values(STANDARD_LOGS).map((logName) => {
+                                const logContent = logs ? logs[logName] : undefined;
+                                const exists = logContent !== undefined &&
+                                    ((typeof logContent === "string" && logContent.trim() !== "") ||
+                                        (typeof logContent === "object" &&
+                                            logContent !== null &&
+                                            Object.keys(logContent).length > 0));
+                                return (React.createElement(FileTreeItem, { key: logName, name: logName, isFile: true, level: 3, isSelected: activeTab === logName, exists: exists, onClick: () => {
+                                        if (exists) {
+                                            setActiveTab(logName);
+                                            if (typeof setSelectedFile === 'function') {
+                                                setSelectedFile({
+                                                    path: logName,
+                                                    content: typeof logContent === "string"
+                                                        ? logContent
+                                                        : JSON.stringify(logContent, null, 2),
+                                                    language: logName.endsWith(".json")
+                                                        ? "json"
+                                                        : "plaintext",
+                                                });
+                                            }
+                                        }
+                                        else {
+                                            setActiveTab(logName);
+                                            setSelectedFile({
+                                                path: logName,
+                                                content: `// ${logName} not found or empty\nThis file was not generated during the test run.`,
+                                                language: "plaintext",
+                                            });
+                                        }
+                                    } }));
+                            })))),
+                        runtime &&
+                            RUNTIME_SPECIFIC_LOGS[runtime] &&
+                            Object.values(RUNTIME_SPECIFIC_LOGS[runtime]).length > 0 && (React.createElement("div", null,
+                            React.createElement(FileTreeItem, { name: "Runtime Logs", isFile: false, level: 2, isSelected: false, exists: true, isExpanded: expandedSections.runtimeLogs, onClick: () => setExpandedSections((prev) => (Object.assign(Object.assign({}, prev), { runtimeLogs: !prev.runtimeLogs }))) }),
+                            expandedSections.runtimeLogs && (React.createElement("div", { className: "ms-4" }, Object.values(RUNTIME_SPECIFIC_LOGS[runtime]).map((logName) => {
+                                const logContent = logs ? logs[logName] : undefined;
+                                const exists = logContent !== undefined &&
+                                    ((typeof logContent === "string" &&
+                                        logContent.trim() !== "") ||
+                                        (typeof logContent === "object" &&
+                                            logContent !== null &&
+                                            Object.keys(logContent).length > 0));
+                                return (React.createElement(FileTreeItem, { key: logName, name: logName, isFile: true, level: 3, isSelected: activeTab === logName, exists: exists, onClick: () => {
+                                        if (exists) {
+                                            setActiveTab(logName);
+                                            setSelectedFile({
+                                                path: logName,
+                                                content: typeof logContent === "string"
+                                                    ? logContent
+                                                    : JSON.stringify(logContent, null, 2),
+                                                language: logName.endsWith(".json")
+                                                    ? "json"
+                                                    : "plaintext",
+                                            });
+                                        }
+                                        else {
+                                            setActiveTab(logName);
+                                            setSelectedFile({
+                                                path: logName,
+                                                content: `// ${logName} not found or empty\nThis file was not generated during the test run.`,
+                                                language: "plaintext",
+                                            });
+                                        }
+                                    } }));
+                            }))))),
+                        logs && logs.source_files && (React.createElement("div", null,
+                            React.createElement(FileTreeItem, { name: "Source Files", isFile: false, level: 2, isSelected: false, exists: true, isExpanded: expandedSections.sourceFiles, onClick: () => setExpandedSections((prev) => (Object.assign(Object.assign({}, prev), { sourceFiles: !prev.sourceFiles }))) }),
+                            expandedSections.sourceFiles && (React.createElement("div", { className: "ms-4" },
+                                React.createElement(FileTree, { data: logs.source_files, onSelect: (path, content) => {
+                                        setActiveTab("source_file");
+                                        setSelectedSourcePath(path);
+                                        setSelectedFile({
+                                            path,
+                                            content,
+                                            language: getLanguage(path),
+                                        });
+                                    }, level: 3, selectedSourcePath: selectedSourcePath }))))))),
+                    (projectTests[project] || []).map(test => (React.createElement(FileTreeItem, { key: `${project}-${test}`, name: test, isFile: true, level: 2, isSelected: currentProjectName === project && currentTestName === test, exists: true, onClick: () => {
+                            // Navigate to the test page
+                            navigate(`/projects/${project}/tests/${encodeURIComponent(test)}`);
+                        } }))))))))))))));
+};

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