testeranto 0.200.0 → 0.202.0

package/dist/common/src/components/pure/ProcessManager.js

@@ -34,6 +34,7 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProcessManager = void 0;
+/* eslint-disable @typescript-eslint/no-explicit-any */
 const react_1 = __importStar(require("react"));
 const react_bootstrap_1 = require("react-bootstrap");
 const ProcessManager = ({ show, onHide, ws }) => {

package/dist/common/src/components/pure/ProcessManagerView.js

@@ -38,21 +38,21 @@ exports.ProcessManagerView = void 0;
 const react_1 = __importStar(require("react"));
 const react_bootstrap_1 = require("react-bootstrap");
 const react_router_dom_1 = require("react-router-dom");
+const App_1 = require("../../App");
 const ProcessManagerView = ({ processes, onRefresh, onBack, loading, onKillProcess, }) => {
     const navigate = (0, react_router_dom_1.useNavigate)();
     const [selectedProcess, setSelectedProcess] = (0, react_1.useState)(null);
-    const [ws, setWs] = (0, react_1.useState)(null);
+    // Use the centralized WebSocket from App context
+    const { ws } = (0, App_1.useWebSocket)();
     const [processLogs, setProcessLogs] = (0, react_1.useState)([]);
     const [autoScroll, setAutoScroll] = (0, react_1.useState)(true);
     const logsContainerRef = (0, react_1.useRef)(null);
     const [isNavbarCollapsed, setIsNavbarCollapsed] = (0, react_1.useState)(false);
-    // Set up WebSocket connection
+    // Handle WebSocket messages for the selected process
     (0, react_1.useEffect)(() => {
-        const wsProtocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-        const wsUrl = `${wsProtocol}//${window.location.host}`;
-        const websocket = new WebSocket(wsUrl);
-        setWs(websocket);
-        websocket.onmessage = (event) => {
+        if (!ws)
+            return;
+        const handleMessage = (event) => {
             try {
                 const data = JSON.parse(event.data);
                 // Handle process data response
@@ -74,10 +74,11 @@ const ProcessManagerView = ({ processes, onRefresh, onBack, loading, onKillProce
                 console.error("Error parsing WebSocket message:", error);
             }
         };
+        ws.addEventListener('message', handleMessage);
         return () => {
-            websocket.close();
+            ws.removeEventListener('message', handleMessage);
         };
-    }, [selectedProcess]);
+    }, [ws, selectedProcess]);
     // Request process data when selected
     (0, react_1.useEffect)(() => {
         if (selectedProcess && ws && ws.readyState === WebSocket.OPEN) {
@@ -134,13 +135,13 @@ const ProcessManagerView = ({ processes, onRefresh, onBack, loading, onKillProce
     };
     return (react_1.default.createElement(react_bootstrap_1.Container, { fluid: true, className: "px-0 h-100" },
         react_1.default.createElement(react_bootstrap_1.Row, { className: "g-0", style: { height: "calc(100vh - 56px)" } },
-            react_1.default.createElement(react_bootstrap_1.Col, { sm: 3, className: "border-end", style: {
+            react_1.default.createElement(react_bootstrap_1.Col, { sm: 2, className: "border-end", style: {
                     height: "100%",
                     overflow: "auto",
                     backgroundColor: "#f8f9fa",
                 } },
                 react_1.default.createElement("div", { className: "p-1" },
-                    processes.map((process) => (react_1.default.createElement("div", { key: process.processId, className: `p-2 mb-1 rounded ${(selectedProcess === null || selectedProcess === void 0 ? void 0 : selectedProcess.processId) === process.processId
+                    [...processes].reverse().map((process) => (react_1.default.createElement("div", { key: process.processId, className: `p-2 mb-1 rounded ${(selectedProcess === null || selectedProcess === void 0 ? void 0 : selectedProcess.processId) === process.processId
                             ? "bg-primary text-white"
                             : "bg-white border"}`, style: { cursor: "pointer" }, onClick: () => handleSelectProcess(process), title: process.command },
                         react_1.default.createElement("div", { className: "d-flex justify-content-between align-items-start" },
@@ -165,73 +166,71 @@ const ProcessManagerView = ({ processes, onRefresh, onBack, loading, onKillProce
                     loading && processes.length === 0 && (react_1.default.createElement("div", { className: "p-2 text-center small" },
                         react_1.default.createElement("div", { className: "spinner-border spinner-border-sm", role: "status" },
                             react_1.default.createElement("span", { className: "visually-hidden" }, "Loading...")))))),
-            react_1.default.createElement(react_bootstrap_1.Col, { sm: 5, className: "border-end p-3", style: { height: "100%", overflow: "auto" } }, selectedProcess ? (react_1.default.createElement("div", null,
-                react_1.default.createElement("div", { className: "mb-3" },
-                    react_1.default.createElement("strong", null, "Command:"),
-                    react_1.default.createElement("code", { className: "bg-light p-2 rounded d-block mt-1", style: { fontSize: "0.8rem" } }, selectedProcess.command)),
-                react_1.default.createElement("div", { className: "mb-2" },
-                    react_1.default.createElement("strong", null, "Status:"),
-                    react_1.default.createElement("div", { className: "mt-1" }, getStatusBadge(selectedProcess))),
-                react_1.default.createElement("div", { className: "mb-2" },
-                    react_1.default.createElement("strong", null, "PID:"),
-                    react_1.default.createElement("div", { className: "text-muted" }, selectedProcess.pid || "N/A")),
-                react_1.default.createElement("div", { className: "mb-2" },
-                    react_1.default.createElement("strong", null, "Started:"),
-                    react_1.default.createElement("div", { className: "text-muted" }, new Date(selectedProcess.timestamp).toLocaleString())),
-                selectedProcess.exitCode !== undefined && (react_1.default.createElement("div", { className: "mb-2" },
-                    react_1.default.createElement("strong", null, "Exit Code:"),
-                    react_1.default.createElement("div", { className: "text-muted" }, selectedProcess.exitCode))),
-                selectedProcess.error && (react_1.default.createElement("div", { className: "mt-3" },
-                    react_1.default.createElement("strong", { className: "text-danger" }, "Error:"),
-                    react_1.default.createElement("div", { className: "text-danger small mt-1" }, selectedProcess.error))))) : (react_1.default.createElement("div", { className: "text-center text-muted mt-5" },
-                react_1.default.createElement("i", null, "Select a process to view details")))),
-            react_1.default.createElement(react_bootstrap_1.Col, { sm: 4, className: "p-0", style: { height: "100%", overflow: "hidden" } }, selectedProcess ? (react_1.default.createElement("div", { className: "d-flex flex-column h-100" },
-                react_1.default.createElement("div", { ref: logsContainerRef, className: "bg-dark text-light flex-grow-1", style: {
-                        overflowY: "auto",
-                        fontFamily: 'Monaco, Menlo, "Ubuntu Mono", monospace',
-                        fontSize: "14px",
-                        lineHeight: "1.4",
-                        // padding: '1rem'
-                    }, onScroll: handleLogsScroll },
-                    processLogs.length > 0 ? (react_1.default.createElement("pre", { className: "mb-0", style: {
+            react_1.default.createElement(react_bootstrap_1.Col, { sm: 5, className: "border-end p-3 d-flex flex-column", style: { height: "100%", overflow: "hidden" } }, selectedProcess ? (react_1.default.createElement("div", { className: "flex-grow-1 d-flex flex-column" },
+                react_1.default.createElement("div", { className: "d-flex align-items-center gap-2 mb-3 flex-wrap" },
+                    react_1.default.createElement("div", null, getStatusBadge(selectedProcess)),
+                    react_1.default.createElement("div", { className: "text-muted" }, selectedProcess.pid || "N/A"),
+                    react_1.default.createElement("div", { className: "text-muted" }, new Date(selectedProcess.timestamp).toLocaleString()),
+                    selectedProcess.status === "running" && onKillProcess && (react_1.default.createElement(react_bootstrap_1.Button, { variant: "danger", size: "sm", onClick: () => onKillProcess(selectedProcess.processId), className: "flex-grow-0 ms-auto" }, "\u23F9\uFE0F Stop")),
+                    selectedProcess.exitCode !== undefined && (react_1.default.createElement("div", { className: "text-muted" }, selectedProcess.exitCode))),
+                selectedProcess.error && (react_1.default.createElement(react_bootstrap_1.Alert, { variant: "danger", className: "py-2 mb-3" }, selectedProcess.error)),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("div", { className: "mb-1 small text-muted" }, "Command:"),
+                    react_1.default.createElement("div", { className: "bg-dark text-light p-2 rounded", style: {
+                            fontFamily: 'Monaco, Menlo, "Ubuntu Mono", monospace',
+                            fontSize: "14px",
+                            lineHeight: "1.4",
+                            overflow: "auto",
                             whiteSpace: "pre-wrap",
                             wordBreak: "break-word",
-                            backgroundColor: "transparent",
-                            border: "none",
-                            color: "inherit",
-                        } }, processLogs.join(""))) : (react_1.default.createElement("div", { className: "text-muted text-center py-4" },
-                        react_1.default.createElement("i", null, "No output yet"))),
-                    !autoScroll && (react_1.default.createElement("div", { className: "position-sticky bottom-0 d-flex justify-content-center mb-2" },
-                        react_1.default.createElement(react_bootstrap_1.Button, { variant: "primary", size: "sm", onClick: () => {
-                                setAutoScroll(true);
-                                if (logsContainerRef.current) {
-                                    logsContainerRef.current.scrollTop =
-                                        logsContainerRef.current.scrollHeight;
-                                }
-                            } }, "Scroll to Bottom")))),
-                selectedProcess.status === "running" && (react_1.default.createElement("div", { className: "border-top bg-white p-3", style: { flexShrink: 0 } },
-                    onKillProcess && (react_1.default.createElement("div", { className: "mb-3" },
-                        react_1.default.createElement(react_bootstrap_1.Button, { variant: "danger", size: "sm", onClick: () => onKillProcess(selectedProcess.processId), className: "w-100" }, "\u23F9\uFE0F Stop Process"))),
-                    react_1.default.createElement("div", { className: "input-group" },
-                        react_1.default.createElement("input", { type: "text", className: "form-control", placeholder: "Type input and press Enter...", onKeyPress: (e) => {
-                                if (e.key === "Enter") {
-                                    const target = e.target;
-                                    const inputValue = target.value;
+                            maxHeight: "200px" // Prevent it from expanding too much
+                        } }, selectedProcess.command)))) : (react_1.default.createElement("div", { className: "text-center text-muted mt-5" },
+                react_1.default.createElement("i", null, "Select a process to view details")))),
+            react_1.default.createElement(react_bootstrap_1.Col, { sm: 5, className: "p-3 d-flex flex-column", style: { height: "100%", overflow: "hidden" } }, selectedProcess ? (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("div", { className: "flex-grow-1 d-flex flex-column", style: { minHeight: 0 } },
+                    react_1.default.createElement("div", { ref: logsContainerRef, className: "bg-dark text-light flex-grow-1", style: {
+                            overflowY: "auto",
+                            fontFamily: 'Monaco, Menlo, "Ubuntu Mono", monospace',
+                            fontSize: "14px",
+                            lineHeight: "1.4",
+                            padding: "0.5rem"
+                        }, onScroll: handleLogsScroll },
+                        processLogs.length > 0 ? (react_1.default.createElement("pre", { className: "mb-0", style: {
+                                whiteSpace: "pre-wrap",
+                                wordBreak: "break-word",
+                                backgroundColor: "transparent",
+                                border: "none",
+                                color: "inherit",
+                            } }, processLogs.join(""))) : (react_1.default.createElement("div", { className: "text-muted text-center py-4" },
+                            react_1.default.createElement("i", null, "No output yet"))),
+                        !autoScroll && (react_1.default.createElement("div", { className: "position-sticky bottom-0 d-flex justify-content-center mb-2" },
+                            react_1.default.createElement(react_bootstrap_1.Button, { variant: "primary", size: "sm", onClick: () => {
+                                    setAutoScroll(true);
+                                    if (logsContainerRef.current) {
+                                        logsContainerRef.current.scrollTop =
+                                            logsContainerRef.current.scrollHeight;
+                                    }
+                                } }, "Scroll to Bottom")))),
+                    selectedProcess.status === "running" && (react_1.default.createElement("div", { className: "border-top bg-white p-2 mt-2", style: { flexShrink: 0 } },
+                        react_1.default.createElement("div", { className: "input-group" },
+                            react_1.default.createElement("input", { type: "text", className: "form-control", placeholder: "Type input and press Enter...", onKeyPress: (e) => {
+                                    if (e.key === "Enter") {
+                                        const target = e.target;
+                                        const inputValue = target.value;
+                                        if (inputValue.trim()) {
+                                            handleInput(inputValue + "\n");
+                                            target.value = "";
+                                        }
+                                    }
+                                }, autoFocus: true }),
+                            react_1.default.createElement("button", { className: "btn btn-primary", type: "button", onClick: () => {
+                                    const input = document.querySelector("input");
+                                    const inputValue = input.value;
                                     if (inputValue.trim()) {
                                         handleInput(inputValue + "\n");
-                                        target.value = "";
+                                        input.value = "";
                                     }
-                                }
-                            }, autoFocus: true }),
-                        react_1.default.createElement("button", { className: "btn btn-primary", type: "button", onClick: () => {
-                                const input = document.querySelector("input");
-                                const inputValue = input.value;
-                                if (inputValue.trim()) {
-                                    handleInput(inputValue + "\n");
-                                    input.value = "";
-                                }
-                            } }, "Send")),
-                    react_1.default.createElement("small", { className: "text-muted" }, "\uD83D\uDCA1 Press Enter to send input to the process"))))) : (react_1.default.createElement("div", { className: "p-3 text-center text-muted mt-5" },
-                react_1.default.createElement("i", null, "Live logs will appear here when a process is selected")))))));
+                                } }, "Send"))))))) : (react_1.default.createElement("div", { className: "text-center text-muted mt-5" },
+                react_1.default.createElement("i", null, "Terminal will appear here when a process is selected")))))));
 };
 exports.ProcessManagerView = ProcessManagerView;

package/dist/common/src/components/pure/ProjectPageView.js

@@ -7,106 +7,10 @@ exports.ProjectPageView = void 0;
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const react_1 = __importDefault(require("react"));
 const react_bootstrap_1 = require("react-bootstrap");
-const TestStatusBadge_1 = require("../TestStatusBadge");
+const TestTable_1 = require("./TestTable");
+const BuildLogViewer_1 = require("./BuildLogViewer");
 const NavBar_1 = require("./NavBar");
 require("./../../App.scss");
-const BuildLogViewer = ({ logs, runtime }) => {
-    var _a, _b, _c, _d, _e, _f;
-    if (!logs)
-        return react_1.default.createElement(react_bootstrap_1.Alert, { variant: "info" },
-            "Loading ",
-            runtime.toLowerCase(),
-            " build logs...");
-    const hasErrors = ((_a = logs.errors) === null || _a === void 0 ? void 0 : _a.length) > 0;
-    const hasWarnings = ((_b = logs.warnings) === null || _b === void 0 ? void 0 : _b.length) > 0;
-    const [activeTab, setActiveTab] = react_1.default.useState('summary');
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(react_bootstrap_1.Tab.Container, { activeKey: activeTab, onSelect: (k) => setActiveTab(k || 'summary') },
-            react_1.default.createElement(react_bootstrap_1.Nav, { variant: "tabs", className: "mb-3" },
-                react_1.default.createElement(react_bootstrap_1.Nav.Item, null,
-                    react_1.default.createElement(react_bootstrap_1.Nav.Link, { eventKey: "summary" }, "Build Summary")),
-                react_1.default.createElement(react_bootstrap_1.Nav.Item, null,
-                    react_1.default.createElement(react_bootstrap_1.Nav.Link, { eventKey: "warnings" }, hasWarnings ? `⚠️ Warnings (${logs.warnings.length})` : 'Warnings')),
-                react_1.default.createElement(react_bootstrap_1.Nav.Item, null,
-                    react_1.default.createElement(react_bootstrap_1.Nav.Link, { eventKey: "errors" }, hasErrors ? `❌ Errors (${logs.errors.length})` : 'Errors'))),
-            react_1.default.createElement(react_bootstrap_1.Tab.Content, null,
-                react_1.default.createElement(react_bootstrap_1.Tab.Pane, { eventKey: "summary" },
-                    react_1.default.createElement(react_bootstrap_1.Card, null,
-                        react_1.default.createElement(react_bootstrap_1.Card.Header, { className: "d-flex justify-content-between align-items-center" },
-                            react_1.default.createElement("h5", null, "Build Summary"),
-                            react_1.default.createElement("div", null,
-                                hasErrors && (react_1.default.createElement(react_bootstrap_1.Badge, { bg: "danger", className: "me-2" },
-                                    logs.errors.length,
-                                    " Error",
-                                    logs.errors.length !== 1 ? 's' : '')),
-                                hasWarnings && (react_1.default.createElement(react_bootstrap_1.Badge, { bg: "warning", text: "dark" },
-                                    logs.warnings.length,
-                                    " Warning",
-                                    logs.warnings.length !== 1 ? 's' : '')),
-                                !hasErrors && !hasWarnings && (react_1.default.createElement(react_bootstrap_1.Badge, { bg: "success" }, "Build Successful")))),
-                        react_1.default.createElement(react_bootstrap_1.Card.Body, null,
-                            react_1.default.createElement("div", { className: "mb-3" },
-                                react_1.default.createElement("h6", null,
-                                    "Input Files (",
-                                    Object.keys(((_c = logs.metafile) === null || _c === void 0 ? void 0 : _c.inputs) || {}).length,
-                                    ")"),
-                                react_1.default.createElement(react_bootstrap_1.ListGroup, { className: "max-h-200 overflow-auto" }, Object.keys(((_d = logs.metafile) === null || _d === void 0 ? void 0 : _d.inputs) || {}).map((file) => (react_1.default.createElement(react_bootstrap_1.ListGroup.Item, { key: file, className: "py-2" },
-                                    react_1.default.createElement("code", null, file),
-                                    react_1.default.createElement("div", { className: "text-muted small" },
-                                        logs.metafile.inputs[file].bytes,
-                                        " bytes")))))),
-                            react_1.default.createElement("div", null,
-                                react_1.default.createElement("h6", null,
-                                    "Output Files (",
-                                    Object.keys(((_e = logs.metafile) === null || _e === void 0 ? void 0 : _e.outputs) || {}).length,
-                                    ")"),
-                                react_1.default.createElement(react_bootstrap_1.ListGroup, { className: "max-h-200 overflow-auto" }, Object.keys(((_f = logs.metafile) === null || _f === void 0 ? void 0 : _f.outputs) || {}).map((file) => (react_1.default.createElement(react_bootstrap_1.ListGroup.Item, { key: file, className: "py-2" },
-                                    react_1.default.createElement("code", null, file),
-                                    react_1.default.createElement("div", { className: "text-muted small" },
-                                        logs.metafile.outputs[file].bytes,
-                                        " bytes",
-                                        logs.metafile.outputs[file].entryPoint && (react_1.default.createElement("span", { className: "ms-2 badge bg-info" }, "Entry Point"))))))))))),
-                react_1.default.createElement(react_bootstrap_1.Tab.Pane, { eventKey: "warnings" }, hasWarnings ? (react_1.default.createElement(react_bootstrap_1.Card, { className: "border-warning" },
-                    react_1.default.createElement(react_bootstrap_1.Card.Header, { className: "bg-warning text-white d-flex justify-content-between align-items-center" },
-                        react_1.default.createElement("span", null,
-                            "Build Warnings (",
-                            logs.warnings.length,
-                            ")"),
-                        react_1.default.createElement(react_bootstrap_1.Badge, { bg: "light", text: "dark" }, new Date().toLocaleString())),
-                    react_1.default.createElement(react_bootstrap_1.Card.Body, { className: "p-0" },
-                        react_1.default.createElement(react_bootstrap_1.ListGroup, { variant: "flush" }, logs.warnings.map((warn, i) => {
-                            var _a, _b;
-                            return (react_1.default.createElement(react_bootstrap_1.ListGroup.Item, { key: i, className: "text-warning" },
-                                react_1.default.createElement("div", { className: "d-flex justify-content-between" },
-                                    react_1.default.createElement("strong", null,
-                                        ((_a = warn.location) === null || _a === void 0 ? void 0 : _a.file) || 'Unknown file',
-                                        ((_b = warn.location) === null || _b === void 0 ? void 0 : _b.line) && `:${warn.location.line}`),
-                                    react_1.default.createElement("small", { className: "text-muted" }, warn.pluginName ? `[${warn.pluginName}]` : '')),
-                                react_1.default.createElement("div", { className: "mt-1" },
-                                    react_1.default.createElement("pre", { className: "mb-0 p-2 bg-light rounded" }, JSON.stringify(warn)))));
-                        }))))) : (react_1.default.createElement(react_bootstrap_1.Alert, { variant: "info" }, "No warnings found"))),
-                react_1.default.createElement(react_bootstrap_1.Tab.Pane, { eventKey: "errors" }, hasErrors ? (react_1.default.createElement(react_bootstrap_1.Card, { className: "border-danger" },
-                    react_1.default.createElement(react_bootstrap_1.Card.Header, { className: "bg-danger text-white d-flex justify-content-between align-items-center" },
-                        react_1.default.createElement("span", null,
-                            "Build Errors (",
-                            logs.errors.length,
-                            ")"),
-                        react_1.default.createElement(react_bootstrap_1.Badge, { bg: "light", text: "dark" }, new Date().toLocaleString())),
-                    react_1.default.createElement(react_bootstrap_1.Card.Body, { className: "p-0" },
-                        react_1.default.createElement(react_bootstrap_1.ListGroup, { variant: "flush" }, logs.errors.map((err, i) => {
-                            var _a, _b;
-                            return (react_1.default.createElement(react_bootstrap_1.ListGroup.Item, { key: i, className: "text-danger" },
-                                react_1.default.createElement("div", { className: "d-flex justify-content-between" },
-                                    react_1.default.createElement("strong", null,
-                                        ((_a = err.location) === null || _a === void 0 ? void 0 : _a.file) || 'Unknown file',
-                                        ((_b = err.location) === null || _b === void 0 ? void 0 : _b.line) && `:${err.location.line}`),
-                                    react_1.default.createElement("small", { className: "text-muted" }, err.pluginName ? `[${err.pluginName}]` : '')),
-                                react_1.default.createElement("div", { className: "mt-1" },
-                                    react_1.default.createElement("pre", { className: "mb-0 p-2 bg-light rounded" }, JSON.stringify(err)))));
-                        }))))) : (react_1.default.createElement(react_bootstrap_1.Alert, { variant: "success" },
-                    react_1.default.createElement("h5", null, "No Errors Found"),
-                    react_1.default.createElement("p", { className: "mb-0" }, "The build completed without any errors."))))))));
-};
 const ProjectPageView = ({ summary, nodeLogs, webLogs, pureLogs, config, loading, error, projectName, activeTab, setActiveTab }) => {
     var _a, _b, _c, _d, _e, _f;
     if (loading)
@@ -126,6 +30,7 @@ const ProjectPageView = ({ summary, nodeLogs, webLogs, pureLogs, config, loading
             runTimeErrors: Number(testData.runTimeErrors) || 0,
             typeErrors: Number(testData.typeErrors) || 0,
             staticErrors: Number(testData.staticErrors) || 0,
+            runTimeTests: Number(testData.runTimeTests) || 0,
             runTime
         };
     });
@@ -158,24 +63,6 @@ const ProjectPageView = ({ summary, nodeLogs, webLogs, pureLogs, config, loading
                                 "\u274C ",
                                 pureLogs.errors.length)) : ((_f = pureLogs === null || pureLogs === void 0 ? void 0 : pureLogs.warnings) === null || _f === void 0 ? void 0 : _f.length) ? (react_1.default.createElement(react_bootstrap_1.Badge, { bg: "warning", text: "dark" }, "\u26A0\uFE0F")) : null)))),
             react_1.default.createElement(react_bootstrap_1.Col, { sm: 9 },
-                react_1.default.createElement("div", { className: "p-3" }, activeTab === 'tests' ? (react_1.default.createElement(react_bootstrap_1.Table, { striped: true, bordered: true, hover: true },
-                    react_1.default.createElement("thead", null,
-                        react_1.default.createElement("tr", null,
-                            react_1.default.createElement("th", null, "Test"),
-                            react_1.default.createElement("th", null, "Runtime"),
-                            react_1.default.createElement("th", null, "Status"),
-                            react_1.default.createElement("th", null, "Type Errors"),
-                            react_1.default.createElement("th", null, "Lint Errors"))),
-                    react_1.default.createElement("tbody", null, testStatuses.map((test) => (react_1.default.createElement("tr", { key: test.testName, "data-testid": `test-row-${test.testName}` },
-                        react_1.default.createElement("td", null,
-                            react_1.default.createElement("a", { href: `#/projects/${projectName}/tests/${encodeURIComponent(test.testName)}/${test.runTime}` }, test.testName)),
-                        react_1.default.createElement("td", null,
-                            react_1.default.createElement(react_bootstrap_1.Badge, { bg: "secondary", className: "ms-2" }, test.runTime)),
-                        react_1.default.createElement("td", null,
-                            react_1.default.createElement(TestStatusBadge_1.TestStatusBadge, { testName: test.testName, testsExist: test.testsExist, runTimeErrors: test.runTimeErrors, typeErrors: test.typeErrors, staticErrors: test.staticErrors })),
-                        react_1.default.createElement("td", null,
-                            react_1.default.createElement("a", { href: `#/projects/${projectName}/tests/${encodeURIComponent(test.testName)}/${test.runTime}#types` }, test.typeErrors > 0 ? `❌ ${test.typeErrors}` : '✅')),
-                        react_1.default.createElement("td", null,
-                            react_1.default.createElement("a", { href: `#/projects/${projectName}/tests/${encodeURIComponent(test.testName)}/${test.runTime}#lint` }, test.staticErrors > 0 ? `❌ ${test.staticErrors}` : '✅')))))))) : activeTab === 'node' ? (react_1.default.createElement(BuildLogViewer, { logs: nodeLogs, runtime: "Node" })) : activeTab === 'web' ? (react_1.default.createElement(BuildLogViewer, { logs: webLogs, runtime: "Web" })) : activeTab === 'pure' ? (react_1.default.createElement(BuildLogViewer, { logs: pureLogs, runtime: "Pure" })) : null)))));
+                react_1.default.createElement("div", { className: "p-3" }, activeTab === 'tests' ? (react_1.default.createElement(TestTable_1.TestTable, { testStatuses: testStatuses, projectName: projectName })) : activeTab === 'node' ? (react_1.default.createElement(BuildLogViewer_1.BuildLogViewer, { logs: nodeLogs, runtime: "Node" })) : activeTab === 'web' ? (react_1.default.createElement(BuildLogViewer_1.BuildLogViewer, { logs: webLogs, runtime: "Web" })) : activeTab === 'pure' ? (react_1.default.createElement(BuildLogViewer_1.BuildLogViewer, { logs: pureLogs, runtime: "Pure" })) : null)))));
 };
 exports.ProjectPageView = ProjectPageView;

package/dist/common/src/components/pure/Settings.js

@@ -0,0 +1,121 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Settings = void 0;
+const react_1 = __importStar(require("react"));
+const react_bootstrap_1 = require("react-bootstrap");
+const App_1 = require("../../App");
+const GitHubLoginButton_1 = require("./GitHubLoginButton");
+const GitHubAuthService_1 = require("../../services/GitHubAuthService");
+const Settings = () => {
+    const [theme, setTheme] = (0, react_1.useState)("auto");
+    const { tutorialMode, setTutorialMode } = (0, App_1.useTutorialMode)();
+    const { isAuthenticated, logout } = (0, App_1.useAuth)();
+    (0, react_1.useEffect)(() => {
+        // Load saved theme from localStorage
+        const savedTheme = localStorage.getItem("theme");
+        if (savedTheme) {
+            setTheme(savedTheme);
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        // Apply theme when it changes
+        applyTheme(theme);
+        // Save to localStorage
+        localStorage.setItem("theme", theme);
+    }, [theme]);
+    const applyTheme = (selectedTheme) => {
+        const root = document.documentElement;
+        if (selectedTheme === "auto") {
+            // Use system preference
+            if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+                root.setAttribute("data-bs-theme", "dark");
+            }
+            else {
+                root.setAttribute("data-bs-theme", "light");
+            }
+        }
+        else {
+            root.setAttribute("data-bs-theme", selectedTheme);
+        }
+    };
+    const handleThemeChange = (event) => {
+        setTheme(event.target.value);
+    };
+    const handleTutorialModeChange = () => {
+        const newTutorialMode = !tutorialMode;
+        setTutorialMode(newTutorialMode);
+        // Save to localStorage
+        localStorage.setItem("tutorialMode", newTutorialMode.toString());
+    };
+    return (react_1.default.createElement(react_bootstrap_1.Container, null,
+        react_1.default.createElement(react_bootstrap_1.Row, null,
+            react_1.default.createElement(react_bootstrap_1.Col, { md: 8, lg: 6 },
+                react_1.default.createElement(react_bootstrap_1.Card, null,
+                    react_1.default.createElement(react_bootstrap_1.Card.Header, null,
+                        react_1.default.createElement("h5", { className: "mb-0" }, "Appearance")),
+                    react_1.default.createElement(react_bootstrap_1.Card.Body, null,
+                        react_1.default.createElement(react_bootstrap_1.Form, null,
+                            react_1.default.createElement(react_bootstrap_1.Form.Group, { className: "mb-4" },
+                                react_1.default.createElement("div", null,
+                                    react_1.default.createElement(react_bootstrap_1.Form.Check, { type: "radio", id: "theme-light", name: "theme", value: "light", label: "Light mode", checked: theme === "light", onChange: handleThemeChange }),
+                                    react_1.default.createElement(react_bootstrap_1.Form.Check, { type: "radio", id: "theme-dark", name: "theme", value: "dark", label: "Dark mode", checked: theme === "dark", onChange: handleThemeChange }),
+                                    react_1.default.createElement(react_bootstrap_1.Form.Check, { type: "radio", id: "theme-auto", name: "theme", value: "auto", label: "Auto mode. Use system setting", checked: theme === "auto", onChange: handleThemeChange }))),
+                            react_1.default.createElement(react_bootstrap_1.Form.Group, { className: "mb-4" },
+                                react_1.default.createElement(react_bootstrap_1.Form.Check, { type: "switch", id: "tutorial-mode", label: tutorialMode ? "Tutorial Mode: ON" : "Tutorial Mode: OFF", checked: tutorialMode, onChange: handleTutorialModeChange }),
+                                react_1.default.createElement(react_bootstrap_1.Form.Text, { className: "text-muted" }, "When enabled, helpful tooltips will appear throughout the app to guide you."))))))),
+        react_1.default.createElement(react_bootstrap_1.Row, { className: "mt-4" },
+            react_1.default.createElement(react_bootstrap_1.Col, { md: 8, lg: 6 },
+                react_1.default.createElement(react_bootstrap_1.Card, null,
+                    react_1.default.createElement(react_bootstrap_1.Card.Header, null,
+                        react_1.default.createElement("h5", { className: "mb-0" }, "GitHub Integration")),
+                    react_1.default.createElement(react_bootstrap_1.Card.Body, null, GitHubAuthService_1.githubAuthService.isConfigured() ? (isAuthenticated ? (react_1.default.createElement("div", null,
+                        react_1.default.createElement("p", null, "Connected to GitHub"),
+                        react_1.default.createElement("div", { className: "d-grid gap-2" },
+                            react_1.default.createElement(react_bootstrap_1.Button, { variant: "danger", onClick: logout }, "Sign Out from GitHub")))) : (react_1.default.createElement("div", null,
+                        react_1.default.createElement("p", null, "Connect your GitHub account to enable Git operations:"),
+                        react_1.default.createElement(GitHubLoginButton_1.GitHubLoginButton, null)))) : (react_1.default.createElement("div", null,
+                        react_1.default.createElement("p", { className: "text-danger" }, "GitHub integration is not configured."),
+                        react_1.default.createElement("p", null, "To enable GitHub authentication:"),
+                        react_1.default.createElement("ol", { className: "small" },
+                            react_1.default.createElement("li", null, "Create a GitHub OAuth App at https://github.com/settings/developers"),
+                            react_1.default.createElement("li", null,
+                                "Set Authorization callback URL to: ",
+                                window.location.origin,
+                                "/auth/github/callback"),
+                            react_1.default.createElement("li", null, "Update the clientId in testeranto.config.ts"),
+                            react_1.default.createElement("li", null, "Restart the development server"))))))))));
+};
+exports.Settings = Settings;

package/dist/common/src/components/pure/Settings.test.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const Settings_1 = require("./Settings");
+// Mock the tutorial mode context
+jest.mock('../../App', () => ({
+    useTutorialMode: () => ({
+        tutorialMode: false,
+        setTutorialMode: jest.fn()
+    })
+}));
+test('renders settings page', () => {
+    (0, react_2.render)(react_1.default.createElement(Settings_1.Settings, null));
+    const themeLabel = react_2.screen.getByText(/Theme/i);
+    expect(themeLabel).toBeInTheDocument();
+});
+test('renders theme options', () => {
+    (0, react_2.render)(react_1.default.createElement(Settings_1.Settings, null));
+    const lightModeOption = react_2.screen.getByLabelText(/Light Mode/i);
+    const darkModeOption = react_2.screen.getByLabelText(/Dark Mode/i);
+    const autoModeOption = react_2.screen.getByLabelText(/Auto/i);
+    expect(lightModeOption).toBeInTheDocument();
+    expect(darkModeOption).toBeInTheDocument();
+    expect(autoModeOption).toBeInTheDocument();
+});
+test('renders tutorial mode switch', () => {
+    (0, react_2.render)(react_1.default.createElement(Settings_1.Settings, null));
+    const tutorialModeSwitch = react_2.screen.getByLabelText(/Tutorial Mode: OFF/i);
+    expect(tutorialModeSwitch).toBeInTheDocument();
+});

package/dist/common/src/components/pure/SignIn.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SignIn = void 0;
+const react_1 = __importDefault(require("react"));
+const react_bootstrap_1 = require("react-bootstrap");
+const GitHubAuthService_1 = require("../../services/GitHubAuthService");
+const GitHubLoginButton_1 = require("./GitHubLoginButton");
+const SignIn = () => {
+    return (react_1.default.createElement(react_bootstrap_1.Container, { className: "d-flex align-items-center justify-content-center min-vh-100" },
+        react_1.default.createElement(react_bootstrap_1.Row, null,
+            react_1.default.createElement(react_bootstrap_1.Col, { md: 12 },
+                react_1.default.createElement(react_bootstrap_1.Card, null,
+                    react_1.default.createElement(react_bootstrap_1.Card.Header, { className: "text-center" },
+                        react_1.default.createElement("h3", { className: "mb-0" }, "Sign In")),
+                    react_1.default.createElement(react_bootstrap_1.Card.Body, { className: "text-center" }, GitHubAuthService_1.githubAuthService.isConfigured() ? (react_1.default.createElement(GitHubLoginButton_1.GitHubLoginButton, null)) : (react_1.default.createElement("div", null,
+                        react_1.default.createElement("p", { className: "text-danger" }, "GitHub authentication is not configured"),
+                        react_1.default.createElement("p", null, "Please contact the administrator")))))))));
+};
+exports.SignIn = SignIn;