testeranto 0.177.0 → 0.189.0

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

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppFrame = void 0;
+const react_1 = __importDefault(require("react"));
+const react_bootstrap_1 = require("react-bootstrap");
+const SettingsButton_1 = require("./SettingsButton");
+const AppFrame = ({ children }) => {
+    return (react_1.default.createElement("div", { className: "d-flex flex-column min-vh-100", key: window.location.pathname },
+        react_1.default.createElement("main", { className: "flex-grow-1 p-3" },
+            react_1.default.createElement(react_bootstrap_1.Container, { fluid: true }, children)),
+        react_1.default.createElement("footer", { className: "bg-light py-2 d-flex justify-content-between align-items-center" },
+            react_1.default.createElement(SettingsButton_1.SettingsButton, null),
+            react_1.default.createElement(react_bootstrap_1.Container, { className: "text-end", fluid: true },
+                "made with \u2764\uFE0F and ",
+                react_1.default.createElement("a", { href: "https://www.npmjs.com/package/testeranto" }, "testeranto")))));
+};
+exports.AppFrame = AppFrame;

package/dist/common/src/components/pure/AppFrame.test/implementation.js

@@ -0,0 +1,63 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.implementation = void 0;
+const chai_1 = require("chai");
+const react_1 = __importDefault(require("react"));
+exports.implementation = {
+    suites: {
+        Default: "AppFrame basic rendering",
+        Layout: "AppFrame layout structure",
+    },
+    givens: {
+        Default: () => (selection) => (Object.assign(Object.assign({}, selection), { children: react_1.default.createElement("div", null, "Test Content") })),
+        WithChildren: (children) => () => (selection) => (Object.assign(Object.assign({}, selection), { children })),
+    },
+    whens: {},
+    thens: {
+        takeScreenshot: (name) => async ({ htmlElement, container }, pm) => {
+            if (!container)
+                throw new Error('Container not found');
+            const p = await pm.page();
+            await pm.customScreenShot({ path: `${name}.png` }, p);
+            return {
+                htmlElement,
+                reactElement: react_1.default.createElement('div'),
+                domRoot: container,
+                container
+            };
+        },
+        RendersContainer: () => async ({ htmlElement, container }) => {
+            // const container = htmlElement.querySelector('.min-vh-100');
+            chai_1.assert.exists(container, 'Should have min-vh-100 container');
+            return {
+                htmlElement,
+                reactElement: react_1.default.createElement('div'),
+                domRoot: container,
+                container: container
+            };
+        },
+        HasMainContent: () => async ({ htmlElement }) => {
+            const main = htmlElement.querySelector('main.flex-grow-1');
+            chai_1.assert.exists(main, 'Should have main content area');
+            return { htmlElement };
+        },
+        HasFooter: () => async ({ htmlElement }) => {
+            const footer = htmlElement.querySelector('footer');
+            chai_1.assert.exists(footer, 'Should have footer');
+            return { htmlElement };
+        },
+        HasSettingsButton: () => async ({ htmlElement }) => {
+            const button = htmlElement.querySelector('footer button');
+            chai_1.assert.exists(button, 'Should have settings button in footer');
+            return { htmlElement };
+        },
+        HasTesterantoLink: () => async ({ htmlElement }) => {
+            const link = htmlElement.querySelector('footer a[href*="testeranto"]');
+            chai_1.assert.exists(link, 'Should have testeranto link in footer');
+            return { htmlElement };
+        },
+    },
+};

package/dist/common/src/components/pure/AppFrame.test/index.js

@@ -0,0 +1,14 @@
+"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 web_1 = __importDefault(require("testeranto-react/src/react-dom/component/web"));
+const implementation_1 = require("./implementation");
+const specification_1 = require("./specification");
+const AppFrame_1 = require("../AppFrame");
+require("../../../App.scss");
+const WrappedAppFrame = ({ children }) => (react_1.default.createElement("div", { id: "test-root" },
+    react_1.default.createElement(AppFrame_1.AppFrame, { "data-testid": "app-frame" }, children)));
+exports.default = (0, web_1.default)(implementation_1.implementation, specification_1.specification, WrappedAppFrame);

package/dist/common/src/components/pure/AppFrame.test/specification.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.specification = void 0;
+const specification = (Suite, Given, When, Then) => {
+    return [
+        Suite.Default("AppFrame basic rendering", {
+            "renders container": Given.Default([], [], [Then.RendersContainer()]),
+            "has main content area": Given.Default([], [], [Then.HasMainContent()]),
+            has_footer: Given.Default([], [], [Then.HasFooter(), Then.takeScreenshot("hello.png")]),
+        }),
+        // Suite.Layout("AppFrame layout structure", {
+        //   "contains settings button": Given.Default(
+        //     [],
+        //     [],
+        //     [Then.HasSettingsButton()]
+        //   ),
+        //   "contains testeranto link": Given.Default(
+        //     [],
+        //     [],
+        //     [Then.HasTesterantoLink(), Then.takeScreenshot("hello.png")]
+        //   ),
+        // }),
+    ];
+};
+exports.specification = specification;

package/dist/common/src/components/pure/AppFrame.test/types.js

@@ -0,0 +1,3 @@
+"use strict";
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeaturesReporterView = void 0;
+const react_1 = __importDefault(require("react"));
+const FeaturesReporterView = ({ treeData }) => {
+    return (react_1.default.createElement("div", { className: "features-reporter" },
+        react_1.default.createElement("h1", null, "File Structure"),
+        react_1.default.createElement("div", { className: "tree-container" }, treeData.map(project => {
+            var _a;
+            return (react_1.default.createElement("div", { key: project.name, className: "project" },
+                react_1.default.createElement("h3", null, project.name),
+                react_1.default.createElement("ul", { className: "file-tree" }, (_a = project.children) === null || _a === void 0 ? void 0 : _a.map(file => renderFile(file)))));
+        }))));
+};
+exports.FeaturesReporterView = FeaturesReporterView;
+function renderFile(node) {
+    return (react_1.default.createElement("li", { key: node.name },
+        react_1.default.createElement("span", null, node.name),
+        node.children && (react_1.default.createElement("ul", null, node.children.map(child => renderFile(child))))));
+}

package/dist/common/src/components/pure/FeaturesReporterView.test/implementation.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.implementation = void 0;
+const chai_1 = require("chai");
+const mockTreeData = [
+    {
+        name: "project-1",
+        type: "project",
+        children: [
+            {
+                name: "src/file1.test.ts",
+                type: "file",
+                path: "src/file1.test.ts",
+                children: [
+                    {
+                        name: "test1",
+                        type: "test",
+                        status: "passed",
+                        children: [
+                            {
+                                name: "given1",
+                                type: "given",
+                                status: "passed",
+                                children: [
+                                    {
+                                        name: "then1",
+                                        type: "then",
+                                        status: "passed"
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    }
+];
+exports.implementation = {
+    suites: {
+        Default: "Features Reporter View Tests",
+    },
+    givens: {
+        Default: () => ({
+            treeData: mockTreeData
+        }),
+        WithEmptyData: () => ({
+            treeData: []
+        }),
+    },
+    whens: {},
+    thens: {
+        hasProjectNames: () => async ({ htmlElement }) => {
+            const projectNodes = htmlElement.querySelectorAll('.tree-node.project');
+            chai_1.assert.isAtLeast(projectNodes.length, 1, 'Should show project names');
+            return { htmlElement };
+        },
+        hasFilePaths: () => async ({ htmlElement }) => {
+            const fileNodes = htmlElement.querySelectorAll('.tree-node.file');
+            chai_1.assert.isAtLeast(fileNodes.length, 1, 'Should show file paths');
+            return { htmlElement };
+        },
+        hasTestNames: () => async ({ htmlElement }) => {
+            const testNodes = htmlElement.querySelectorAll('.tree-node.test');
+            chai_1.assert.isAtLeast(testNodes.length, 1, 'Should show test names');
+            return { htmlElement };
+        },
+        hasStatusBadges: () => async ({ htmlElement }) => {
+            const statusBadges = htmlElement.querySelectorAll('.status-badge');
+            chai_1.assert.isAtLeast(statusBadges.length, 1, 'Should show status badges');
+            return { htmlElement };
+        },
+        showsEmptyMessage: () => async ({ htmlElement }) => {
+            const emptyMessage = htmlElement.querySelector('.empty-message');
+            chai_1.assert.exists(emptyMessage, 'Should show empty message');
+            return { htmlElement };
+        },
+        takeScreenshot: (name) => async ({ htmlElement }, pm) => {
+            const p = await pm.page();
+            await pm.customScreenShot({ path: name }, p);
+            return { htmlElement };
+        },
+    },
+};

package/dist/common/src/components/pure/FeaturesReporterView.test/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const web_1 = __importDefault(require("testeranto-react/src/react-dom/component/web"));
+const react_router_dom_1 = require("react-router-dom");
+const implementation_1 = require("./implementation");
+const specification_1 = require("./specification");
+const FeaturesReporterView_1 = require("../FeaturesReporterView");
+const react_1 = __importDefault(require("react"));
+const WrappedFeaturesReporterView = (props) => (react_1.default.createElement(react_router_dom_1.MemoryRouter, null,
+    react_1.default.createElement(FeaturesReporterView_1.FeaturesReporterView, Object.assign({}, props))));
+exports.default = (0, web_1.default)(implementation_1.implementation, specification_1.specification, WrappedFeaturesReporterView);

package/dist/common/src/components/pure/FeaturesReporterView.test/specification.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.specification = void 0;
+const specification = (Suite, Given, When, Then) => {
+    return [
+        Suite.Default("FeaturesReporterView Component Tests", {
+            basicRender: Given.Default([
+                "FeaturesReporterView should render",
+                "It should show project names",
+                "It should show file paths",
+                "It should show test names",
+                "It should show test statuses"
+            ], [], [
+                Then.hasProjectNames(),
+                Then.hasFilePaths(),
+                Then.hasTestNames(),
+                Then.hasStatusBadges(),
+                Then.takeScreenshot("features-reporter.png")
+            ]),
+            emptyState: Given.WithEmptyData([
+                "FeaturesReporterView should handle empty state",
+                "It should show empty message when no projects exist"
+            ], [], [Then.showsEmptyMessage()]),
+        }),
+    ];
+};
+exports.specification = specification;

package/dist/common/src/components/pure/FeaturesReporterView.test/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,86 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalContent = void 0;
+const react_1 = __importDefault(require("react"));
+const react_bootstrap_1 = require("react-bootstrap");
+const ThemeCard_1 = require("./ThemeCard");
+require("../../App.scss");
+const ModalContent = ({ theme, handleThemeChange, }) => (react_1.default.createElement(react_1.default.Fragment, null,
+    react_1.default.createElement(react_bootstrap_1.Modal.Header, { closeButton: true, className: "border-0" },
+        react_1.default.createElement(react_bootstrap_1.Modal.Title, { className: "d-flex align-items-center" },
+            react_1.default.createElement("i", { className: "bi bi-palette-fill me-2" }),
+            react_1.default.createElement("span", null, "Settings"))),
+    react_1.default.createElement("div", { className: "alert alert-warning mx-3 mt-2 mb-0" },
+        react_1.default.createElement("i", { className: "bi bi-exclamation-triangle-fill me-2" }),
+        react_1.default.createElement("strong", null, "Warning:"),
+        " Themes are an experimental feature. Only \"Business casual\" is fully supported at this time."),
+    react_1.default.createElement(react_bootstrap_1.Modal.Body, { className: "p-0" },
+        react_1.default.createElement("div", { className: "p-3" },
+            react_1.default.createElement("div", { className: "row g-3" },
+                react_1.default.createElement(ThemeCard_1.ThemeCard, { theme: theme, handleThemeChange: handleThemeChange, value: "system", title: "9 to 5", description: "Follows your OS theme", style: {
+                        background: "linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)",
+                        borderColor: "#adb5bd",
+                    } }),
+                react_1.default.createElement(ThemeCard_1.ThemeCard, { theme: theme, handleThemeChange: handleThemeChange, value: "light", title: "Business casual", description: "Clean & professional", style: {
+                        background: "linear-gradient(135deg, #ffffff 0%, #f1f3f5 100%)",
+                        borderColor: "#ced4da",
+                        color: "#212529",
+                        borderWidth: "2px",
+                    } }),
+                react_1.default.createElement(ThemeCard_1.ThemeCard, { theme: theme, handleThemeChange: handleThemeChange, value: "dark", title: "Business formal", description: "Premium & focused", style: {
+                        background: "linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)",
+                        borderColor: "#4ecdc4",
+                        color: "#f8f9fa",
+                        borderWidth: "2px",
+                    } }),
+                react_1.default.createElement(ThemeCard_1.ThemeCard, { theme: theme, handleThemeChange: handleThemeChange, value: "light-vibrant", title: "Office Party", description: "Colorful & fun", style: {
+                        background: "linear-gradient(135deg, #ff2d75 0%, #00e5ff 100%)",
+                        borderColor: "#ffeb3b",
+                        color: "#fff",
+                    } }),
+                react_1.default.createElement(ThemeCard_1.ThemeCard, { theme: theme, handleThemeChange: handleThemeChange, value: "dark-vibrant", title: "After Party", description: "Neon nightlife", style: {
+                        background: "linear-gradient(135deg, #16213e 0%, #e94560 100%)",
+                        borderColor: "#00e5ff",
+                        color: "#fff",
+                    } }),
+                react_1.default.createElement(ThemeCard_1.ThemeCard, { theme: theme, handleThemeChange: handleThemeChange, value: "sepia", title: "WFH", description: "Vintage warmth", style: {
+                        background: "linear-gradient(135deg, #f4ecd8 0%, #d0b88f 100%)",
+                        borderColor: "#8b6b4a",
+                        color: "#3a3226",
+                    } }),
+                react_1.default.createElement(ThemeCard_1.ThemeCard, { theme: theme, handleThemeChange: handleThemeChange, value: "light-grayscale", title: "Serious Business", description: "Simple & distraction-free", style: {
+                        background: "linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%)",
+                        borderColor: "#666",
+                        color: "#333",
+                        borderWidth: "2px",
+                    } }),
+                react_1.default.createElement(ThemeCard_1.ThemeCard, { theme: theme, handleThemeChange: handleThemeChange, value: "dark-grayscale", title: "Very Serious business", description: "Maximum readability", style: {
+                        background: "linear-gradient(135deg, #111 0%, #333 100%)",
+                        borderColor: "#ff6b6b",
+                        color: "#e0e0e0",
+                        borderWidth: "2px",
+                    } }),
+                react_1.default.createElement(ThemeCard_1.ThemeCard, { theme: theme, handleThemeChange: handleThemeChange, value: "daily", title: "Dreaming of PTO", description: "Sunrise, sunset", style: {
+                        background: "linear-gradient(135deg, #6eafff 0%, #f9fbf0 100%)",
+                        borderColor: "#f7d62e",
+                        color: "#00192d",
+                    } }),
+                react_1.default.createElement(ThemeCard_1.ThemeCard, { theme: theme, handleThemeChange: handleThemeChange, value: "protanopia", title: "Protanopia", description: "Red-blind mode", style: {
+                        background: "linear-gradient(135deg, #f8f9fa 0%, #e0e8ff 100%)",
+                        borderColor: "#3366cc",
+                        color: "#333",
+                    } }),
+                react_1.default.createElement(ThemeCard_1.ThemeCard, { theme: theme, handleThemeChange: handleThemeChange, value: "deuteranopia", title: "Deuteranopia", description: "Green-blind mode", style: {
+                        background: "linear-gradient(135deg, #f8f9fa 0%, #ffe0e0 100%)",
+                        borderColor: "#cc6633",
+                        color: "#333",
+                    } }),
+                react_1.default.createElement(ThemeCard_1.ThemeCard, { theme: theme, handleThemeChange: handleThemeChange, value: "tritanopia", title: "Tritanopia", description: "Blue-blind mode", style: {
+                        background: "linear-gradient(135deg, #f8f9fa 0%, #e0ffe0 100%)",
+                        borderColor: "#00aa66",
+                        color: "#333",
+                    } }))))));
+exports.ModalContent = ModalContent;

package/dist/common/src/components/pure/ModalContent.test/implementation.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.implementation = void 0;
+const chai_1 = require("chai");
+exports.implementation = {
+    suites: {
+        Default: "Modal Content Tests",
+    },
+    givens: {
+        Default: () => ({
+            theme: "light",
+            handleThemeChange: () => { },
+        }),
+    },
+    whens: {},
+    thens: {
+        hasModalHeader: () => async ({ htmlElement }) => {
+            const header = htmlElement.querySelector('.modal-header');
+            chai_1.assert.exists(header, 'Should have Modal.Header');
+            return { htmlElement };
+        },
+        hasThemeCards: () => async ({ htmlElement }) => {
+            const themeCards = htmlElement.querySelectorAll('.theme-card');
+            chai_1.assert.isAtLeast(themeCards.length, 1, 'Should render ThemeCard components');
+            return { htmlElement };
+        },
+        takeScreenshot: (name) => async ({ htmlElement }, pm) => {
+            const p = await pm.page();
+            await pm.customScreenShot({ path: name }, p);
+            return { htmlElement };
+        },
+    },
+};

package/dist/common/src/components/pure/ModalContent.test/index.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const web_1 = __importDefault(require("testeranto-react/src/react-dom/component/web"));
+const implementation_1 = require("./implementation");
+const specification_1 = require("./specification");
+const ModalContent_1 = require("../ModalContent");
+const react_1 = __importDefault(require("react"));
+const WrappedModalContent = (props) => (react_1.default.createElement(ModalContent_1.ModalContent, Object.assign({}, props)));
+exports.default = (0, web_1.default)(implementation_1.implementation, specification_1.specification, WrappedModalContent);

package/dist/common/src/components/pure/ModalContent.test/specification.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.specification = void 0;
+const specification = (Suite, Given, When, Then) => {
+    return [
+        Suite.Default("ModalContent Component Tests", {
+            basicRender: Given.Default([
+                "ModalContent should render",
+                "It should contain a Modal.Header",
+                "It should render the ThemeCard components",
+            ], [], [
+                Then.hasModalHeader(),
+                Then.hasThemeCards(),
+                Then.takeScreenshot("modal-content.png"),
+            ]),
+        }),
+    ];
+};
+exports.specification = specification;

package/dist/common/src/components/pure/ModalContent.test/types.js

@@ -0,0 +1,4 @@
+"use strict";
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -7,8 +7,9 @@ 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 NavBar_1 = require("../../NavBar");
 const TestStatusBadge_1 = require("../TestStatusBadge");
+const NavBar_1 = require("./NavBar");
+require("./../../App.scss");
 const BuildLogViewer = ({ logs, runtime }) => {
     var _a, _b, _c, _d, _e, _f;
     if (!logs)
@@ -82,9 +83,7 @@ const BuildLogViewer = ({ logs, runtime }) => {
                                         ((_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" }, warn.text || warn.message || JSON.stringify(warn))),
-                                warn.detail && (react_1.default.createElement("div", { className: "mt-1 small text-muted" },
-                                    react_1.default.createElement("pre", { className: "mb-0 p-2 bg-light rounded" }, warn.detail)))));
+                                    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" },
@@ -103,15 +102,13 @@ const BuildLogViewer = ({ logs, runtime }) => {
                                         ((_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" }, err.text || err.message || JSON.stringify(err))),
-                                err.detail && (react_1.default.createElement("div", { className: "mt-1 small text-muted" },
-                                    react_1.default.createElement("pre", { className: "mb-0 p-2 bg-light rounded" }, err.detail)))));
+                                    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, route, setRoute, navigate }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+const ProjectPageView = ({ summary, nodeLogs, webLogs, pureLogs, config, loading, error, projectName, activeTab, setActiveTab }) => {
+    var _a, _b, _c, _d, _e, _f;
     if (loading)
         return react_1.default.createElement("div", null, "Loading project data...");
     if (error)
@@ -133,72 +130,52 @@ const ProjectPageView = ({ summary, nodeLogs, webLogs, pureLogs, config, loading
         };
     });
     return (react_1.default.createElement(react_bootstrap_1.Container, { fluid: true },
-        react_1.default.createElement(NavBar_1.NavBar, { title: projectName, backLink: "/", navItems: [
-                {
-                    to: `#tests`,
-                    label: testStatuses.some(t => t.runTimeErrors > 0) ? '❌ Tests' :
-                        testStatuses.some(t => t.typeErrors > 0 || t.staticErrors > 0) ? '⚠️ Tests' : '✅ Tests',
-                    active: route === 'tests',
-                    className: testStatuses.some(t => t.runTimeErrors > 0) ? 'text-danger fw-bold' :
-                        testStatuses.some(t => t.typeErrors > 0 || t.staticErrors > 0) ? 'text-warning fw-bold' : ''
-                },
-                {
-                    to: `#node`,
-                    label: ((_a = nodeLogs === null || nodeLogs === void 0 ? void 0 : nodeLogs.errors) === null || _a === void 0 ? void 0 : _a.length) ? '❌ Node Build' :
-                        ((_b = nodeLogs === null || nodeLogs === void 0 ? void 0 : nodeLogs.warnings) === null || _b === void 0 ? void 0 : _b.length) ? '⚠️ Node Build' : 'Node Build',
-                    active: route === 'node',
-                    className: ((_c = nodeLogs === null || nodeLogs === void 0 ? void 0 : nodeLogs.errors) === null || _c === void 0 ? void 0 : _c.length) ? 'text-danger fw-bold' :
-                        ((_d = nodeLogs === null || nodeLogs === void 0 ? void 0 : nodeLogs.warnings) === null || _d === void 0 ? void 0 : _d.length) ? 'text-warning fw-bold' : ''
-                },
-                {
-                    to: `#web`,
-                    label: ((_e = webLogs === null || webLogs === void 0 ? void 0 : webLogs.errors) === null || _e === void 0 ? void 0 : _e.length) ? '❌ Web Build' :
-                        ((_f = webLogs === null || webLogs === void 0 ? void 0 : webLogs.warnings) === null || _f === void 0 ? void 0 : _f.length) ? '⚠️ Web Build' : 'Web Build',
-                    active: route === 'web',
-                    className: ((_g = webLogs === null || webLogs === void 0 ? void 0 : webLogs.errors) === null || _g === void 0 ? void 0 : _g.length) ? 'text-danger fw-bold' :
-                        ((_h = webLogs === null || webLogs === void 0 ? void 0 : webLogs.warnings) === null || _h === void 0 ? void 0 : _h.length) ? 'text-warning fw-bold' : ''
-                },
-                {
-                    to: `#pure`,
-                    label: ((_j = pureLogs === null || pureLogs === void 0 ? void 0 : pureLogs.errors) === null || _j === void 0 ? void 0 : _j.length) ? '❌ Pure Build' :
-                        ((_k = pureLogs === null || pureLogs === void 0 ? void 0 : pureLogs.warnings) === null || _k === void 0 ? void 0 : _k.length) ? '⚠️ Pure Build' : 'Pure Build',
-                    active: route === 'pure',
-                    className: ((_l = pureLogs === null || pureLogs === void 0 ? void 0 : pureLogs.errors) === null || _l === void 0 ? void 0 : _l.length) ? 'text-danger fw-bold' :
-                        ((_m = pureLogs === null || pureLogs === void 0 ? void 0 : pureLogs.warnings) === null || _m === void 0 ? void 0 : _m.length) ? 'text-warning fw-bold' : ''
-                },
-            ] }),
-        react_1.default.createElement(react_bootstrap_1.Tab.Container, { activeKey: route, onSelect: (k) => {
-                if (k) {
-                    setRoute(k);
-                    navigate(`#${k}`, { replace: true });
-                }
-            } },
-            react_1.default.createElement(react_bootstrap_1.Tab.Content, null,
-                react_1.default.createElement(react_bootstrap_1.Tab.Pane, { eventKey: "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 },
-                            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 })),
-                            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}` : '✅')))))))),
-                react_1.default.createElement(react_bootstrap_1.Tab.Pane, { eventKey: "node" },
-                    react_1.default.createElement(BuildLogViewer, { logs: nodeLogs, runtime: "Node" })),
-                react_1.default.createElement(react_bootstrap_1.Tab.Pane, { eventKey: "web" },
-                    react_1.default.createElement(BuildLogViewer, { logs: webLogs, runtime: "Web" })),
-                react_1.default.createElement(react_bootstrap_1.Tab.Pane, { eventKey: "pure" },
-                    react_1.default.createElement(BuildLogViewer, { logs: pureLogs, runtime: "Pure" }))))));
+        react_1.default.createElement(NavBar_1.NavBar, { title: projectName, backLink: "/" }),
+        react_1.default.createElement(react_bootstrap_1.Row, { className: "g-0" },
+            react_1.default.createElement(react_bootstrap_1.Col, { sm: 3, className: "border-end" },
+                react_1.default.createElement(react_bootstrap_1.Nav, { variant: "pills", className: "flex-column" },
+                    react_1.default.createElement(react_bootstrap_1.Nav.Item, null,
+                        react_1.default.createElement(react_bootstrap_1.Nav.Link, { active: activeTab === 'tests', onClick: () => setActiveTab('tests'), className: "d-flex flex-column align-items-start" },
+                            react_1.default.createElement("div", { className: "d-flex justify-content-between w-100" },
+                                react_1.default.createElement("span", null, "Tests"),
+                                testStatuses.some(t => t.runTimeErrors > 0) ? (react_1.default.createElement(react_bootstrap_1.Badge, { bg: "danger" }, "\u274C")) : testStatuses.some(t => t.typeErrors > 0 || t.staticErrors > 0) ? (react_1.default.createElement(react_bootstrap_1.Badge, { bg: "warning", text: "dark" }, "\u26A0\uFE0F")) : (react_1.default.createElement(react_bootstrap_1.Badge, { bg: "success" }, "\u2713"))))),
+                    react_1.default.createElement(react_bootstrap_1.Nav.Item, null,
+                        react_1.default.createElement(react_bootstrap_1.Nav.Link, { active: activeTab === 'node', onClick: () => setActiveTab('node'), className: "d-flex justify-content-between align-items-center" },
+                            "Node build logs",
+                            ((_a = nodeLogs === null || nodeLogs === void 0 ? void 0 : nodeLogs.errors) === null || _a === void 0 ? void 0 : _a.length) ? (react_1.default.createElement(react_bootstrap_1.Badge, { bg: "danger" },
+                                "\u274C ",
+                                nodeLogs.errors.length)) : ((_b = nodeLogs === null || nodeLogs === void 0 ? void 0 : nodeLogs.warnings) === null || _b === void 0 ? void 0 : _b.length) ? (react_1.default.createElement(react_bootstrap_1.Badge, { bg: "warning", text: "dark" }, "\u26A0\uFE0F")) : null)),
+                    react_1.default.createElement(react_bootstrap_1.Nav.Item, null,
+                        react_1.default.createElement(react_bootstrap_1.Nav.Link, { active: activeTab === 'web', onClick: () => setActiveTab('web'), className: "d-flex justify-content-between align-items-center" },
+                            "Web build logs",
+                            ((_c = webLogs === null || webLogs === void 0 ? void 0 : webLogs.errors) === null || _c === void 0 ? void 0 : _c.length) ? (react_1.default.createElement(react_bootstrap_1.Badge, { bg: "danger" },
+                                "\u274C ",
+                                webLogs.errors.length)) : ((_d = webLogs === null || webLogs === void 0 ? void 0 : webLogs.warnings) === null || _d === void 0 ? void 0 : _d.length) ? (react_1.default.createElement(react_bootstrap_1.Badge, { bg: "warning", text: "dark" }, "\u26A0\uFE0F")) : null)),
+                    react_1.default.createElement(react_bootstrap_1.Nav.Item, null,
+                        react_1.default.createElement(react_bootstrap_1.Nav.Link, { active: activeTab === 'pure', onClick: () => setActiveTab('pure'), className: "d-flex justify-content-between align-items-center" },
+                            "Pure build logs",
+                            ((_e = pureLogs === null || pureLogs === void 0 ? void 0 : pureLogs.errors) === null || _e === void 0 ? void 0 : _e.length) ? (react_1.default.createElement(react_bootstrap_1.Badge, { bg: "danger" },
+                                "\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)))));
 };
 exports.ProjectPageView = ProjectPageView;