testeranto 0.200.0 → 0.202.0

package/dist/module/src/components/pure/TestPageView.js

@@ -1,46 +1,26 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { useState, useEffect } from "react";
-import { Toast, ToastContainer } from "react-bootstrap";
 import { useNavigate } from "react-router-dom";
-import { STANDARD_LOGS, RUNTIME_SPECIFIC_LOGS } from "../../utils/logFiles";
-import { Container, Row, Col, Nav, Button, Modal } from "react-bootstrap";
+import { useWebSocket } from "../../App";
+import { STANDARD_LOGS, RUNTIME_SPECIFIC_LOGS, } from "../../utils/logFiles";
+import { Container, Row, Col, Button, Modal } from "react-bootstrap";
 import { Editor } from "@monaco-editor/react";
 import { NavBar } from "./NavBar";
-import { TestStatusBadge } from "../TestStatusBadge";
-const FileTree = ({ data, onSelect, level = 0, selectedSourcePath }) => {
-    const [expanded, setExpanded] = useState({});
-    const toggleExpand = (path) => {
-        setExpanded((prev) => (Object.assign(Object.assign({}, prev), { [path]: !prev[path] })));
-    };
-    return (React.createElement("div", null, Object.entries(data).map(([name, node]) => {
-        const path = Object.keys(expanded).find((k) => k.endsWith(name)) || name;
-        const isExpanded = expanded[path];
-        if (node.__isFile) {
-            return (React.createElement(FileTreeItem, { key: name, name: name, isFile: true, level: level, isSelected: selectedSourcePath === path, onClick: () => onSelect(path, node.content) }));
-        }
-        else {
-            return (React.createElement("div", { key: name },
-                React.createElement("div", { className: "d-flex align-items-center py-1 text-dark", style: {
-                        paddingLeft: `${level * 16}px`,
-                        cursor: 'pointer',
-                        fontSize: '0.875rem'
-                    }, onClick: () => toggleExpand(path) },
-                    React.createElement("i", { className: `bi ${isExpanded ? 'bi-folder2-open' : 'bi-folder'} me-1` }),
-                    React.createElement("span", null, name)),
-                isExpanded && (React.createElement(FileTree, { data: node, onSelect: onSelect, level: level + 1, selectedSourcePath: selectedSourcePath }))));
-        }
-    })));
-};
-export const TestPageView = ({ projectName, testName, decodedTestPath, runtime, testsExist, errorCounts, logs, }) => {
+import { FileTreeItem } from "./FileTreeItem";
+import { FileTree } from "./FileTree";
+import { ToastNotification } from "./ToastNotification";
+import { getLanguage, renderTestResults } from "./TestPageView_utils";
+export const TestPageView = ({ projectName, testName, decodedTestPath, runtime, testsExist, errorCounts, logs, isWebSocketConnected, }) => {
     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 [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 [ws, setWs] = useState(null);
+    const [toastMessage, setToastMessage] = useState("");
+    const [toastVariant, setToastVariant] = useState("success");
     const [expandedSections, setExpandedSections] = useState({
         standardLogs: true,
         runtimeLogs: true,
@@ -61,11 +41,13 @@ export const TestPageView = ({ projectName, testName, decodedTestPath, runtime,
         // 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, '/') : '';
+            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, '/'));
+                    sourceFilesSet.add(inputPath.replace(/\\/g, "/"));
                 });
             }
         });
@@ -73,150 +55,28 @@ export const TestPageView = ({ projectName, testName, decodedTestPath, runtime,
         const filteredErrors = (((_b = logs.build_logs) === null || _b === void 0 ? void 0 : _b.errors) || []).filter((err) => {
             if (!err.location || !err.location.file)
                 return false;
-            return sourceFilesSet.has(err.location.file.replace(/\\/g, '/'));
+            return sourceFilesSet.has(err.location.file.replace(/\\/g, "/"));
         });
         const filteredWarnings = (((_c = logs.build_logs) === null || _c === void 0 ? void 0 : _c.warnings) || []).filter((warn) => {
             if (!warn.location || !warn.location.file)
                 return false;
-            return sourceFilesSet.has(warn.location.file.replace(/\\/g, '/'));
+            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']);
+        if (typeof logs["message.txt"] === "string" && logs["message.txt"].trim()) {
+            setCustomMessage(logs["message.txt"]);
         }
     }, [logs]);
-    // Set up WebSocket connection
-    useEffect(() => {
-        const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-        const wsUrl = `${wsProtocol}//${window.location.host}`;
-        const websocket = new WebSocket(wsUrl);
-        setWs(websocket);
-        return () => {
-            websocket.close();
-        };
-    }, []);
+    // Use the centralized WebSocket from App context
+    const wsContext = useWebSocket();
+    const ws = wsContext === null || wsContext === void 0 ? void 0 : wsContext.ws;
     const [activeTab, setActiveTab] = React.useState("tests.json");
     const [selectedFile, setSelectedFile] = useState(null);
     const [selectedSourcePath, setSelectedSourcePath] = useState(null);
     const [editorTheme, setEditorTheme] = useState("vs-dark");
-    // Determine language from file extension
-    const getLanguage = (path) => {
-        var _a;
-        const ext = (_a = path.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-        switch (ext) {
-            case "ts":
-                return "typescript";
-            case "tsx":
-                return "typescript";
-            case "js":
-                return "javascript";
-            case "json":
-                return "json";
-            case "md":
-                return "markdown";
-            default:
-                return "plaintext";
-        }
-    };
-    const renderTestResults = (testData) => {
-        return (React.createElement("div", { className: "test-results" },
-            testData.givens.map((given, i) => (React.createElement("div", { key: i, className: "mb-4 card" },
-                React.createElement("div", { className: "card-header bg-primary text-white" },
-                    React.createElement("div", { className: "d-flex justify-content-between align-items-center" },
-                        React.createElement("div", null,
-                            React.createElement("h4", null,
-                                "Given: ",
-                                given.name),
-                            given.features && given.features.length > 0 && (React.createElement("div", { className: "mt-1" },
-                                React.createElement("small", null, "Features:"),
-                                React.createElement("ul", { className: "list-unstyled" }, given.features.map((feature, fi) => (React.createElement("li", { key: fi }, feature.startsWith("http") ? (React.createElement("a", { href: feature, target: "_blank", rel: "noopener noreferrer", className: "text-white" }, new URL(feature).hostname)) : (React.createElement("span", { className: "text-white" }, feature))))))))),
-                        given.artifacts && given.artifacts.length > 0 && (React.createElement("div", { className: "dropdown" },
-                            React.createElement("button", { className: "btn btn-sm btn-light dropdown-toggle", type: "button", "data-bs-toggle": "dropdown" },
-                                "Artifacts (",
-                                given.artifacts.length,
-                                ")"),
-                            React.createElement("ul", { className: "dropdown-menu dropdown-menu-end" }, given.artifacts.map((artifact, ai) => (React.createElement("li", { key: ai },
-                                React.createElement("a", { className: "dropdown-item", href: `reports/${projectName}/${testName
-                                        .split(".")
-                                        .slice(0, -1)
-                                        .join(".")}/${runtime}/${artifact}`, target: "_blank", rel: "noopener noreferrer" }, artifact.split("/").pop()))))))))),
-                React.createElement("div", { className: "card-body" },
-                    given.whens.map((when, j) => (React.createElement("div", { key: `w-${j}`, className: `p-3 mb-2 ${when.error
-                            ? "bg-danger text-white"
-                            : "bg-success text-white"}` },
-                        React.createElement("div", { className: "d-flex justify-content-between align-items-start" },
-                            React.createElement("div", null,
-                                React.createElement("div", null,
-                                    React.createElement("strong", null, "When:"),
-                                    " ",
-                                    when.name,
-                                    when.features && when.features.length > 0 && (React.createElement("div", { className: "mt-2" },
-                                        React.createElement("small", null, "Features:"),
-                                        React.createElement("ul", { className: "list-unstyled" }, when.features.map((feature, fi) => (React.createElement("li", { key: fi }, feature.startsWith("http") ? (React.createElement("a", { href: feature, target: "_blank", rel: "noopener noreferrer" }, new URL(feature).hostname)) : (feature))))))),
-                                    when.error && React.createElement("pre", { className: "mt-2" }, when.error))),
-                            when.artifacts && when.artifacts.length > 0 && (React.createElement("div", { className: "ms-3" },
-                                React.createElement("strong", null, "Artifacts:"),
-                                React.createElement("ul", { className: "list-unstyled" }, when.artifacts.map((artifact, ai) => (React.createElement("li", { key: ai },
-                                    React.createElement("a", { href: `reports/${projectName}/${testName
-                                            .split(".")
-                                            .slice(0, -1)
-                                            .join(".")}/${runtime}/${artifact}`, target: "_blank", className: "text-white", rel: "noopener noreferrer" }, artifact.split("/").pop()))))))))))),
-                    given.thens.map((then, k) => (React.createElement("div", { key: `t-${k}`, className: `p-3 mb-2 ${then.error
-                            ? "bg-danger text-white"
-                            : "bg-success text-white"}` },
-                        React.createElement("div", { className: "d-flex justify-content-between align-items-start" },
-                            React.createElement("div", null,
-                                React.createElement("div", null,
-                                    React.createElement("strong", null, "Then:"),
-                                    " ",
-                                    then.name,
-                                    then.features && then.features.length > 0 && (React.createElement("div", { className: "mt-2" },
-                                        React.createElement("small", null, "Features:"),
-                                        React.createElement("ul", { className: "list-unstyled" }, then.features.map((feature, fi) => (React.createElement("li", { key: fi }, feature.startsWith("http") ? (React.createElement("a", { href: feature, target: "_blank", rel: "noopener noreferrer" }, new URL(feature).hostname)) : (feature))))))),
-                                    then.error && React.createElement("pre", { className: "mt-2" }, then.error))),
-                            then.artifacts && then.artifacts.length > 0 && (React.createElement("div", { className: "ms-3" },
-                                React.createElement("strong", null, "Artifacts:"),
-                                React.createElement("ul", { className: "list-unstyled" }, then.artifacts.map((artifact, ai) => (React.createElement("li", { key: ai },
-                                    React.createElement("a", { href: `reports/${projectName}/${testName
-                                            .split(".")
-                                            .slice(0, -1)
-                                            .join(".")}/${runtime}/${artifact}`, target: "_blank", className: "text-white", rel: "noopener noreferrer" }, artifact.split("/").pop()))))))))))))))),
-            (buildErrors.errors.length > 0 || buildErrors.warnings.length > 0) && (React.createElement("div", { className: "mb-4 card border-danger" },
-                React.createElement("div", { className: "card-header bg-danger text-white" },
-                    React.createElement("h4", null, "Build Errors and Warnings")),
-                React.createElement("div", { className: "card-body" },
-                    buildErrors.errors.length > 0 && (React.createElement(React.Fragment, null,
-                        React.createElement("h5", null, "Errors"),
-                        React.createElement("ul", null, buildErrors.errors.map((error, idx) => (React.createElement("li", { key: `build-error-${idx}` },
-                            React.createElement("strong", null, error.text),
-                            error.location && (React.createElement("div", null,
-                                "File: ",
-                                error.location.file,
-                                " Line: ",
-                                error.location.line,
-                                " Column: ",
-                                error.location.column)))))))),
-                    buildErrors.warnings.length > 0 && (React.createElement(React.Fragment, null,
-                        React.createElement("h5", null, "Warnings"),
-                        React.createElement("ul", null, buildErrors.warnings.map((warning, idx) => (React.createElement("li", { key: `build-warning-${idx}` },
-                            React.createElement("strong", null, warning.text),
-                            warning.location && (React.createElement("div", null,
-                                "File: ",
-                                warning.location.file,
-                                " Line: ",
-                                warning.location.line,
-                                " Column: ",
-                                warning.location.column)))))))))))));
-    };
-    console.log("Rendering TestPageView with logs:", {
-        logKeys: Object.keys(logs),
-        sourceFiles: logs.source_files ? Object.keys(logs.source_files) : null,
-        selectedFile,
-        activeTab,
-    });
     return (React.createElement(Container, { fluid: true, className: "px-0" },
         React.createElement(NavBar, { title: decodedTestPath, backLink: `/projects/${projectName}`, navItems: [
                 {
@@ -231,20 +91,25 @@ export const TestPageView = ({ projectName, testName, decodedTestPath, runtime,
                     },
                     className: "pe-none d-flex align-items-center gap-2",
                 },
-            ], rightContent: React.createElement(Button, { variant: "info", onClick: () => setShowAiderModal(true), className: "ms-2", title: "AI Assistant" }, "\uD83E\uDD16") }),
-        React.createElement(Modal, { show: showAiderModal, onHide: () => setShowAiderModal(false), size: "lg", onShow: () => setMessageOption('default') },
+            ], 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")))) }),
+        React.createElement(Modal, { show: showAiderModal, onHide: () => setShowAiderModal(false), size: "lg", onShow: () => setMessageOption("default") },
             React.createElement(Modal.Header, { closeButton: true },
                 React.createElement(Modal.Title, null, "Aider")),
             React.createElement(Modal.Body, null,
                 React.createElement("div", { className: "mb-3" },
                     React.createElement("div", { className: "form-check" },
-                        React.createElement("input", { className: "form-check-input", type: "radio", name: "messageOption", id: "defaultMessage", value: "default", checked: messageOption === 'default', onChange: () => setMessageOption('default') }),
+                        React.createElement("input", { className: "form-check-input", type: "radio", name: "messageOption", id: "defaultMessage", value: "default", checked: messageOption === "default", onChange: () => setMessageOption("default") }),
                         React.createElement("label", { className: "form-check-label", htmlFor: "defaultMessage" }, "Use default message.txt")),
                     React.createElement("div", { className: "form-check" },
-                        React.createElement("input", { className: "form-check-input", type: "radio", name: "messageOption", id: "customMessage", value: "custom", checked: messageOption === 'custom', onChange: () => setMessageOption('custom') }),
+                        React.createElement("input", { className: "form-check-input", type: "radio", name: "messageOption", id: "customMessage", value: "custom", checked: messageOption === "custom", onChange: () => setMessageOption("custom") }),
                         React.createElement("label", { className: "form-check-label", htmlFor: "customMessage" }, "Use custom message")),
-                    messageOption === 'custom' && (React.createElement("div", { className: "mt-2" },
-                        React.createElement("textarea", { className: "form-control", rows: 8, placeholder: "Enter your custom message", value: customMessage, onChange: (e) => setCustomMessage(e.target.value), style: { minHeight: '500px' } }))))),
+                    messageOption === "custom" && (React.createElement("div", { className: "mt-2" },
+                        React.createElement("textarea", { className: "form-control", rows: 8, placeholder: "Enter your custom message", value: customMessage, onChange: (e) => setCustomMessage(e.target.value), style: { minHeight: "500px" } }))))),
             React.createElement(Modal.Footer, null,
                 React.createElement(Button, { variant: "primary", onClick: async () => {
                         try {
@@ -253,7 +118,7 @@ export const TestPageView = ({ projectName, testName, decodedTestPath, runtime,
                                 .slice(0, -1)
                                 .join(".")}/${runtime}/prompt.txt`;
                             let command = `aider --load ${promptPath}`;
-                            if (messageOption === 'default') {
+                            if (messageOption === "default") {
                                 const messagePath = `testeranto/reports/${projectName}/${testName
                                     .split(".")
                                     .slice(0, -1)
@@ -263,33 +128,31 @@ export const TestPageView = ({ projectName, testName, decodedTestPath, runtime,
                             else {
                                 command += ` --message "${customMessage}"`;
                             }
-                            // Send command to server via WebSocket
-                            const ws = new WebSocket(`ws://${window.location.host}`);
-                            ws.onopen = () => {
+                            // Send command to server via the centralized WebSocket
+                            if (isWebSocketConnected && ws) {
                                 ws.send(JSON.stringify({
-                                    type: 'executeCommand',
-                                    command: command
+                                    type: "executeCommand",
+                                    command: command,
                                 }));
-                                setToastMessage('Command sent to server');
-                                setToastVariant('success');
+                                setToastMessage("Command sent to server");
+                                setToastVariant("success");
                                 setShowToast(true);
                                 setShowAiderModal(false);
-                                ws.close();
                                 // Navigate to process manager page
                                 setTimeout(() => {
-                                    navigate('/processes');
+                                    navigate("/processes");
                                 }, 1000);
-                            };
-                            ws.onerror = (error) => {
-                                setToastMessage('Failed to connect to server');
-                                setToastVariant('danger');
+                            }
+                            else {
+                                setToastMessage("WebSocket connection not ready");
+                                setToastVariant("danger");
                                 setShowToast(true);
-                            };
+                            }
                         }
                         catch (err) {
                             console.error("WebSocket error:", err);
-                            setToastMessage('Error preparing command');
-                            setToastVariant('danger');
+                            setToastMessage("Error preparing command");
+                            setToastVariant("danger");
                             setShowToast(true);
                         }
                     } }, "Run Aider Command"))),
@@ -297,26 +160,33 @@ export const TestPageView = ({ projectName, testName, decodedTestPath, runtime,
             React.createElement(Col, { sm: 3, className: "border-end", style: {
                     height: "calc(100vh - 56px)",
                     overflow: "auto",
-                    backgroundColor: '#f8f9fa'
+                    backgroundColor: "#f8f9fa",
                 } },
                 React.createElement("div", { className: "p-2 border-bottom" },
                     React.createElement("small", { className: "fw-bold text-muted" }, "EXPLORER")),
                 React.createElement("div", { className: "p-2" },
-                    React.createElement("div", { className: "d-flex align-items-center text-muted mb-1", style: { cursor: 'pointer', fontSize: '0.875rem' }, onClick: () => setExpandedSections(prev => (Object.assign(Object.assign({}, prev), { standardLogs: !prev.standardLogs }))) },
-                        React.createElement("i", { className: `bi bi-chevron-${expandedSections.standardLogs ? 'down' : 'right'} me-1` }),
+                    React.createElement("div", { className: "d-flex align-items-center text-muted mb-1", style: { cursor: "pointer", fontSize: "0.875rem" }, onClick: () => setExpandedSections((prev) => (Object.assign(Object.assign({}, prev), { standardLogs: !prev.standardLogs }))) },
+                        React.createElement("i", { className: `bi bi-chevron-${expandedSections.standardLogs ? "down" : "right"} me-1` }),
                         React.createElement("span", null, "Standard Logs")),
                     expandedSections.standardLogs && (React.createElement("div", null, 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));
+                            ((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: 1, 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",
+                                        content: typeof logContent === "string"
+                                            ? logContent
+                                            : JSON.stringify(logContent, null, 2),
+                                        language: logName.endsWith(".json")
+                                            ? "json"
+                                            : "plaintext",
                                     });
                                 }
                                 else {
@@ -329,23 +199,32 @@ export const TestPageView = ({ projectName, testName, decodedTestPath, runtime,
                                 }
                             } }));
                     })))),
-                runtime && RUNTIME_SPECIFIC_LOGS[runtime] &&
-                    Object.values(RUNTIME_SPECIFIC_LOGS[runtime]).length > 0 && (React.createElement("div", { className: "p-2" },
-                    React.createElement("div", { className: "d-flex align-items-center text-muted mb-1", style: { cursor: 'pointer', fontSize: '0.875rem' }, onClick: () => setExpandedSections(prev => (Object.assign(Object.assign({}, prev), { runtimeLogs: !prev.runtimeLogs }))) },
-                        React.createElement("i", { className: `bi bi-chevron-${expandedSections.runtimeLogs ? 'down' : 'right'} me-1` }),
+                runtime &&
+                    RUNTIME_SPECIFIC_LOGS[runtime] &&
+                    Object.values(RUNTIME_SPECIFIC_LOGS[runtime])
+                        .length > 0 && (React.createElement("div", { className: "p-2" },
+                    React.createElement("div", { className: "d-flex align-items-center text-muted mb-1", style: { cursor: "pointer", fontSize: "0.875rem" }, onClick: () => setExpandedSections((prev) => (Object.assign(Object.assign({}, prev), { runtimeLogs: !prev.runtimeLogs }))) },
+                        React.createElement("i", { className: `bi bi-chevron-${expandedSections.runtimeLogs ? "down" : "right"} me-1` }),
                         React.createElement("span", null, "Runtime Logs")),
                     expandedSections.runtimeLogs && (React.createElement("div", null, 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));
+                            ((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: 1, 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",
+                                        content: typeof logContent === "string"
+                                            ? logContent
+                                            : JSON.stringify(logContent, null, 2),
+                                        language: logName.endsWith(".json")
+                                            ? "json"
+                                            : "plaintext",
                                     });
                                 }
                                 else {
@@ -359,8 +238,8 @@ export const TestPageView = ({ projectName, testName, decodedTestPath, runtime,
                             } }));
                     }))))),
                 logs && logs.source_files && (React.createElement("div", { className: "p-2" },
-                    React.createElement("div", { className: "d-flex align-items-center text-muted mb-1", style: { cursor: 'pointer', fontSize: '0.875rem' }, onClick: () => setExpandedSections(prev => (Object.assign(Object.assign({}, prev), { sourceFiles: !prev.sourceFiles }))) },
-                        React.createElement("i", { className: `bi bi-chevron-${expandedSections.sourceFiles ? 'down' : 'right'} me-1` }),
+                    React.createElement("div", { className: "d-flex align-items-center text-muted mb-1", style: { cursor: "pointer", fontSize: "0.875rem" }, onClick: () => setExpandedSections((prev) => (Object.assign(Object.assign({}, prev), { sourceFiles: !prev.sourceFiles }))) },
+                        React.createElement("i", { className: `bi bi-chevron-${expandedSections.sourceFiles ? "down" : "right"} me-1` }),
                         React.createElement("span", null, "Source Files")),
                     expandedSections.sourceFiles && (React.createElement("div", null,
                         React.createElement(FileTree, { data: logs.source_files, onSelect: (path, content) => {
@@ -383,10 +262,10 @@ export const TestPageView = ({ projectName, testName, decodedTestPath, runtime,
             React.createElement(Col, { sm: 3, className: "p-0 border-start", style: { height: "calc(100vh - 56px)", overflow: "auto" } },
                 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))
-                        : renderTestResults(selectedFile.content))),
+                        ? 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("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,
@@ -401,7 +280,7 @@ export const TestPageView = ({ projectName, testName, decodedTestPath, runtime,
                                             "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 bg-light rounded" },
+                                        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: ",
@@ -418,7 +297,7 @@ export const TestPageView = ({ projectName, testName, decodedTestPath, runtime,
                                             "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 bg-light rounded" },
+                                        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: ",
@@ -427,11 +306,13 @@ export const TestPageView = ({ projectName, testName, decodedTestPath, runtime,
                                                 warning.location.line,
                                                 "Column: ",
                                                 warning.location.column)),
-                                            warning.notes && warning.notes.length > 0 && (React.createElement("div", { className: "small" },
+                                            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"))));
+                                        (!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" },
@@ -441,151 +322,15 @@ export const TestPageView = ({ projectName, testName, decodedTestPath, runtime,
                         })())),
                     (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: "bg-light p-2 small" },
+                        !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()),
+                            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")))))),
-        React.createElement(ToastContainer, { position: "top-end", className: "p-3" },
-            React.createElement(Toast, { show: showToast, onClose: () => setShowToast(false), delay: 3000, autohide: true, bg: toastVariant },
-                React.createElement(Toast.Header, null,
-                    React.createElement("strong", { className: "me-auto" }, "Command Status")),
-                React.createElement(Toast.Body, { className: "text-white" }, toastMessage)))));
-};
-// Simple file tree item component
-const FileTreeItem = ({ name, isFile, level, isSelected, exists = true, onClick }) => {
-    const displayName = name
-        .replace(".json", "")
-        .replace(".txt", "")
-        .replace(".log", "")
-        .replace(/_/g, " ")
-        .replace(/^std/, "Standard ")
-        .replace(/^exit/, "Exit Code")
-        .split('/').pop();
-    return (React.createElement("div", { className: `d-flex align-items-center py-1 ${isSelected ? 'text-primary fw-bold' : exists ? 'text-dark' : 'text-muted'}`, style: {
-            paddingLeft: `${level * 16}px`,
-            cursor: exists ? 'pointer' : 'not-allowed',
-            fontSize: '0.875rem',
-            opacity: exists ? 1 : 0.6
-        }, onClick: exists ? onClick : undefined, title: exists ? undefined : "File not found or empty" },
-        React.createElement("i", { className: `bi ${isFile ? (exists ? 'bi-file-earmark-text' : 'bi-file-earmark') : 'bi-folder'} me-1` }),
-        React.createElement("span", null, displayName),
-        !exists && (React.createElement("i", { className: "bi bi-question-circle ms-1", title: "File not found or empty" }))));
-};
-const ArtifactTree = ({ treeData, projectName, testName, runtime, onSelect, level = 0, basePath = '' }) => {
-    const [expanded, setExpanded] = useState({});
-    const toggleExpand = (path) => {
-        setExpanded(prev => (Object.assign(Object.assign({}, prev), { [path]: !prev[path] })));
-    };
-    return (React.createElement("ul", { className: "list-unstyled", style: { paddingLeft: `${level * 16}px` } }, Object.entries(treeData).map(([name, node]) => {
-        const fullPath = basePath ? `${basePath}/${name}` : name;
-        const isExpanded = expanded[fullPath];
-        if (node.__isFile) {
-            return (React.createElement("li", { key: fullPath, className: "py-1" },
-                React.createElement("a", { href: `reports/${projectName}/${testName
-                        .split('.')
-                        .slice(0, -1)
-                        .join('.')}/${runtime}/${node.path}`, target: "_blank", rel: "noopener noreferrer", className: "text-decoration-none", onClick: (e) => {
-                        e.preventDefault();
-                        onSelect(node.path);
-                    } },
-                    React.createElement("i", { className: "bi bi-file-earmark-text me-2" }),
-                    name)));
-        }
-        else {
-            return (React.createElement("li", { key: fullPath, className: "py-1" },
-                React.createElement("div", { className: "d-flex align-items-center" },
-                    React.createElement("button", { className: "btn btn-link text-start p-0 text-decoration-none me-1", onClick: () => toggleExpand(fullPath) },
-                        React.createElement("i", { className: `bi ${isExpanded ? 'bi-folder2-open' : 'bi-folder'} me-2` }),
-                        name)),
-                isExpanded && (React.createElement(ArtifactTree, { treeData: node, projectName: projectName, testName: testName, runtime: runtime, onSelect: onSelect, level: level + 1, basePath: fullPath }))));
-        }
-    })));
-};
-const buildArtifactTree = (testData) => {
-    var _a;
-    const artifactPaths = new Set();
-    (_a = testData.givens) === null || _a === void 0 ? void 0 : _a.forEach((given) => {
-        var _a, _b, _c;
-        (_a = given.artifacts) === null || _a === void 0 ? void 0 : _a.forEach((artifact) => artifactPaths.add(artifact));
-        (_b = given.whens) === null || _b === void 0 ? void 0 : _b.forEach((when) => { var _a; return (_a = when.artifacts) === null || _a === void 0 ? void 0 : _a.forEach((artifact) => artifactPaths.add(artifact)); });
-        (_c = given.thens) === null || _c === void 0 ? void 0 : _c.forEach((then) => { var _a; return (_a = then.artifacts) === null || _a === void 0 ? void 0 : _a.forEach((artifact) => artifactPaths.add(artifact)); });
-    });
-    const sortedArtifacts = Array.from(artifactPaths).sort();
-    return sortedArtifacts.reduce((tree, artifactPath) => {
-        const parts = artifactPath.split('/');
-        let currentLevel = tree;
-        parts.forEach((part, i) => {
-            if (!currentLevel[part]) {
-                currentLevel[part] = i === parts.length - 1
-                    ? { __isFile: true, path: artifactPath }
-                    : {};
-            }
-            currentLevel = currentLevel[part];
-        });
-        return tree;
-    }, {});
-};
-const LogNavItem = ({ logName, logContent, activeTab, setActiveTab, setSelectedFile, errorCounts, decodedTestPath, testsExist, }) => {
-    const displayName = logName
-        .replace(".json", "")
-        .replace(".txt", "")
-        .replace(".log", "")
-        .replace(/_/g, " ")
-        .replace(/^std/, "Standard ")
-        .replace(/^exit/, "Exit Code");
-    const logValue = typeof logContent === "string" ? logContent.trim() : "";
-    let statusIndicator = null;
-    if (logName === STANDARD_LOGS.TYPE_ERRORS &&
-        (errorCounts.typeErrors > 0 || (logValue && logValue !== "0"))) {
-        statusIndicator = (React.createElement("span", { className: "ms-1" },
-            "\u274C ",
-            errorCounts.typeErrors || (logValue ? 1 : 0)));
-    }
-    else if (logName === STANDARD_LOGS.LINT_ERRORS &&
-        (errorCounts.staticErrors > 0 || (logValue && logValue !== "0"))) {
-        statusIndicator = (React.createElement("span", { className: "ms-1" },
-            "\u274C ",
-            errorCounts.staticErrors || (logValue ? 1 : 0)));
-    }
-    else if (logName === RUNTIME_SPECIFIC_LOGS.node.STDERR &&
-        (errorCounts.runTimeErrors > 0 || (logValue && logValue !== "0"))) {
-        statusIndicator = (React.createElement("span", { className: "ms-1" },
-            "\u274C ",
-            errorCounts.runTimeErrors || (logValue ? 1 : 0)));
-    }
-    else if (logName === STANDARD_LOGS.EXIT && logValue !== "0") {
-        statusIndicator = React.createElement("span", { className: "ms-1" },
-            "\u26A0\uFE0F ",
-            logValue);
-    }
-    else if (logName === STANDARD_LOGS.TESTS && logValue) {
-        statusIndicator = (React.createElement("div", { className: "ms-1" },
-            React.createElement(TestStatusBadge, { testName: decodedTestPath, testsExist: testsExist, runTimeErrors: errorCounts.runTimeErrors, typeErrors: errorCounts.typeErrors, staticErrors: errorCounts.staticErrors, variant: "compact", className: "mt-1" })));
-    }
-    return (React.createElement(Nav.Item, { key: logName },
-        React.createElement(Nav.Link, { eventKey: logName, active: activeTab === logName, onClick: () => {
-                setActiveTab(logName);
-                setSelectedFile({
-                    path: logName,
-                    content: typeof logContent === "string"
-                        ? logContent
-                        : JSON.stringify(logContent, null, 2),
-                    language: logName.endsWith(".json")
-                        ? "json"
-                        : logName.endsWith(".txt")
-                            ? "plaintext"
-                            : logName.endsWith(".log")
-                                ? "log"
-                                : "plaintext",
-                });
-            }, className: "d-flex flex-column align-items-start" },
-            React.createElement("div", { className: "d-flex justify-content-between w-100" },
-                React.createElement("span", { className: "text-capitalize" }, displayName),
-                statusIndicator))));
+        React.createElement(ToastNotification, { showToast: showToast, setShowToast: setShowToast, toastVariant: toastVariant, toastMessage: toastMessage })));
 };