testeranto 0.203.0 → 0.205.0

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

@@ -0,0 +1,177 @@
+"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.AppFrame = void 0;
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const react_1 = __importStar(require("react"));
+const react_bootstrap_1 = require("react-bootstrap");
+const react_router_dom_1 = require("react-router-dom");
+const react_router_dom_2 = require("react-router-dom");
+const App_1 = require("../../App");
+const useWebSocket_1 = require("../../useWebSocket");
+const HelpoChatDrawer_1 = require("./HelpoChatDrawer");
+const AppFrame = ({ children, title, rightContent }) => {
+    const location = (0, react_router_dom_2.useLocation)();
+    const { isConnected } = (0, useWebSocket_1.useWebSocket)();
+    const { tutorialMode } = (0, App_1.useTutorialMode)();
+    const { isAuthenticated, logout } = (0, App_1.useAuth)();
+    const [hasAnimated, setHasAnimated] = (0, react_1.useState)(false);
+    const [isHelpoActive, setIsHelpoActive] = (0, react_1.useState)(false);
+    // Add CSS for the brand logo animation
+    const brandLogoStyle = `
+    .brand-logo:hover {
+      transform: scale(1.1);
+      transition: transform 0.3s ease;
+    }
+    .brand-logo:active {
+      transform: scale(0.95);
+    }
+  `;
+    (0, react_1.useEffect)(() => {
+        // Only animate on the first load
+        if (!hasAnimated) {
+            const timer = setTimeout(() => {
+                setHasAnimated(true);
+            }, 4000); // Stop animation after all links have animated (1s + 1.8s = 2.8s, rounded up)
+            return () => clearTimeout(timer);
+        }
+    }, [hasAnimated]);
+    return (react_1.default.createElement("div", { className: "d-flex min-vh-100" },
+        react_1.default.createElement("style", null, brandLogoStyle),
+        react_1.default.createElement("div", { className: `border-end d-flex flex-column ${!hasAnimated ? "sidebar-attention" : ""}`, style: {
+                flexBasis: "40px" /* Reduced from 60px */,
+                flexGrow: "0",
+                flexShrink: "0",
+                height: "100vh",
+                position: "sticky",
+                top: 0,
+            } },
+            react_1.default.createElement(react_bootstrap_1.Nav, { variant: "pills", className: "flex-column p-0 flex-grow-1" },
+                react_1.default.createElement(react_bootstrap_1.Nav.Link, { as: react_router_dom_1.NavLink, to: "/helpo", className: `${location.pathname === "/helpo" ? "active" : ""} d-flex align-items-center justify-content-center ${!hasAnimated ? "navbar-attention-1" : ""}` }, tutorialMode ? (react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "right", overlay: react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "help-tooltip" }, "Chat with Helpo, the helpful robot.") },
+                    react_1.default.createElement("span", null, "helpo"))) : (react_1.default.createElement("span", null, "helpo"))),
+                react_1.default.createElement(react_bootstrap_1.Nav.Link, { as: react_router_dom_1.NavLink, to: "/flua", className: `${location.pathname === "/flua" ? "active" : ""} d-flex align-items-center justify-content-center ${!hasAnimated ? "navbar-attention-1" : ""}` }, tutorialMode ? (react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "right", overlay: react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "help-tooltip" }, "Process/Project Management") },
+                    react_1.default.createElement("span", null, "flua"))) : (react_1.default.createElement("span", null, "flua"))),
+                react_1.default.createElement(react_bootstrap_1.Nav.Link, { as: react_router_dom_1.NavLink, to: "/projects", className: `${location.pathname === "/projects" ? "active" : ""} d-flex align-items-center justify-content-center ${!hasAnimated ? "navbar-attention-2" : ""}` }, tutorialMode ? (react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "right", overlay: react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "projects-tooltip" }, "Projects") },
+                    react_1.default.createElement("span", null, "testo"))) : (react_1.default.createElement("span", null, "testo"))),
+                react_1.default.createElement(react_bootstrap_1.Nav.Link, { as: react_router_dom_1.NavLink, to: "/processes", className: `${location.pathname.startsWith("/processes") ? "active" : ""} d-flex align-items-center justify-content-center ${!hasAnimated ? "navbar-attention-3" : ""}`, 
+                    // style={{
+                    //   height: '40px',
+                    //   width: '40px',
+                    //   opacity: isConnected && isAuthenticated ? 1 : 0.6
+                    // }}
+                    onClick: (e) => {
+                        if (!isConnected || !isAuthenticated) {
+                            e.preventDefault();
+                        }
+                    } }, tutorialMode ? (react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "right", overlay: react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "processes-tooltip" },
+                        "Processes",
+                        " ",
+                        !isAuthenticated
+                            ? "(Sign in required)"
+                            : !isConnected
+                                ? "(WebSocket disconnected)"
+                                : "") },
+                    react_1.default.createElement("span", null, "pro\u0109o"))) : (react_1.default.createElement("span", null, "pro\u0109o"))),
+                react_1.default.createElement(react_bootstrap_1.Nav.Link, { as: react_router_dom_1.NavLink, to: "/git", className: `${location.pathname === "/git" ? "active" : ""} d-flex align-items-center justify-content-center ${!isAuthenticated ? "text-muted pe-none" : ""} ${!hasAnimated ? "navbar-attention-4" : ""}`, 
+                    // style={{
+                    //   height: '40px',
+                    //   width: '40px',
+                    //   opacity: isAuthenticated ? 1 : 0.6
+                    // }}
+                    onClick: (e) => {
+                        if (!isAuthenticated) {
+                            e.preventDefault();
+                        }
+                    } }, tutorialMode ? (react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "right", overlay: react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "git-tooltip" },
+                        "Git Integration",
+                        " ",
+                        !isAuthenticated ? "(Sign in required)" : "") },
+                    react_1.default.createElement("span", null, "arbo"))) : (react_1.default.createElement("span", null, "arbo"))),
+                react_1.default.createElement(react_bootstrap_1.Nav.Link, { as: react_router_dom_1.NavLink, to: "/svg-editor", className: `${location.pathname === "/svg-editor" ? "active" : ""} d-flex align-items-center justify-content-center` }, tutorialMode ? (react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "right", overlay: react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "svg-editor-tooltip" }, "svg editor") },
+                    react_1.default.createElement("span", null, "vektoro"))) : (react_1.default.createElement("span", null, "vektoro"))),
+                react_1.default.createElement(react_bootstrap_1.Nav.Link, { as: react_router_dom_1.NavLink, to: "/drato", className: `${location.pathname === "/drato" ? "active" : ""} d-flex align-items-center justify-content-center` }, tutorialMode ? (react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "right", overlay: react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "drato-tooltip" }, "Bootstrap wireframing tool") },
+                    react_1.default.createElement("span", null, "drato"))) : (react_1.default.createElement("span", null, "drato"))),
+                react_1.default.createElement(react_bootstrap_1.Nav.Link, { as: react_router_dom_1.NavLink, to: "/grafeo", className: `${location.pathname === "/grafeo" ? "active" : ""} d-flex align-items-center justify-content-center` }, tutorialMode ? (react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "right", overlay: react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "grafeo-tooltip" }, "GraphML editor") },
+                    react_1.default.createElement("span", null, "grafeo"))) : (react_1.default.createElement("span", null, "grafeo"))),
+                react_1.default.createElement(react_bootstrap_1.Nav.Link, { as: react_router_dom_1.NavLink, to: "/skribo", className: `${location.pathname === "/skribo" ? "active" : ""} d-flex align-items-center justify-content-center` }, tutorialMode ? (react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "right", overlay: react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "skribo-tooltip" }, "Code editor") },
+                    react_1.default.createElement("span", null, "skribo"))) : (react_1.default.createElement("span", null, "skribo"))),
+                react_1.default.createElement(react_bootstrap_1.Nav.Link, { as: react_router_dom_1.NavLink, to: "/settings", className: `${location.pathname === "/settings" ? "active" : ""} d-flex align-items-center justify-content-center ${!hasAnimated ? "navbar-attention-6" : ""}` }, tutorialMode ? (react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "right", overlay: react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "settings-tooltip" }, "Settings") },
+                    react_1.default.createElement("span", null, "konto"))) : (react_1.default.createElement("span", null, "konto")))),
+            react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "right", overlay: react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "status-tooltip" }, isConnected
+                    ? "Dev mode - Full access"
+                    : "Static mode - Read only") },
+                react_1.default.createElement("div", { className: "p-2 border-top d-flex align-items-center justify-content-center" },
+                    react_1.default.createElement("span", { className: `badge rounded-circle d-flex align-items-center justify-content-center` }, isConnected ? "🟢" : "🔴"))),
+            react_1.default.createElement("div", { className: "p-2 border-top d-flex align-items-center justify-content-center" },
+                react_1.default.createElement("button", { onClick: () => setIsHelpoActive(!isHelpoActive), className: "brand-logo btn p-0 border-0 bg-transparent", style: {
+                        display: "block",
+                        transition: "transform 0.3s ease",
+                    }, onMouseEnter: (e) => {
+                        e.currentTarget.style.transform = "scale(1.1)";
+                    }, onMouseLeave: (e) => {
+                        e.currentTarget.style.transform = "scale(1)";
+                    } },
+                    react_1.default.createElement("img", { src: "https://www.testeranto.com/logo.svg", alt: "Testeranto Logo", style: {
+                            height: "32px",
+                            width: "32px",
+                        } })))),
+        react_1.default.createElement(HelpoChatDrawer_1.HelpoChatDrawer, { isActive: isHelpoActive, onToggle: () => setIsHelpoActive(!isHelpoActive) }),
+        react_1.default.createElement("div", { className: "d-flex flex-column", style: {
+                minHeight: "100vh",
+                minWidth: "0", // Allows the content to shrink below its initial size
+                flex: "1 1 auto", // Take up remaining space
+                overflow: "auto", // Enable scrolling
+            } },
+            react_1.default.createElement("main", { className: "flex-grow-1 p-1", style: {
+                    minWidth: "fit-content",
+                    width: "100%",
+                } },
+                react_1.default.createElement(react_bootstrap_1.Container, { fluid: true, style: {
+                        height: "100%",
+                        minWidth: "fit-content",
+                        padding: "0.125rem",
+                    } }, location.pathname === "/helpo" ? (react_1.default.createElement("div", null,
+                    react_1.default.createElement("h1", null, "Helpo Documentation"),
+                    react_1.default.createElement("p", null, "Welcome to the Helpo documentation. Here you can find information about using Testeranto."),
+                    react_1.default.createElement("h2", null, "Getting Started"),
+                    react_1.default.createElement("p", null, "Start by creating a project and writing your first test cases."),
+                    react_1.default.createElement("h2", null, "Features"),
+                    react_1.default.createElement("ul", null,
+                        react_1.default.createElement("li", null, "Test automation"),
+                        react_1.default.createElement("li", null, "Process management"),
+                        react_1.default.createElement("li", null, "Git integration"),
+                        react_1.default.createElement("li", null, "And much more...")))) : (children))))));
+};
+exports.AppFrame = AppFrame;

package/dist/common/src/app/frontend/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/app/frontend/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/app/frontend/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/app/frontend/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/app/frontend/components/pure/ArtifactTree.js

@@ -0,0 +1,80 @@
+"use strict";
+// export const ArtifactTree = ({
+//   treeData,
+//   projectName,
+//   testName,
+//   runtime,
+//   onSelect,
+//   level = 0,
+//   basePath = ''
+// }: {
+//   treeData: Record<string, any>;
+//   projectName: string;
+//   testName: string;
+//   runtime: string;
+//   onSelect: (path: string) => void;
+//   level?: number;
+//   basePath?: string;
+// }) => {
+//   const [expanded, setExpanded] = useState<Record<string, boolean>>({});
+//   const toggleExpand = (path: string) => {
+//     setExpanded(prev => ({ ...prev, [path]: !prev[path] }));
+//   };
+//   return (
+//     <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 (
+//             <li key={fullPath} className="py-1">
+//               <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);
+//                 }}
+//               >
+//                 <i className="bi bi-file-earmark-text me-2"></i>
+//                 {name}
+//               </a>
+//             </li>
+//           );
+//         } else {
+//           return (
+//             <li key={fullPath} className="py-1">
+//               <div className="d-flex align-items-center">
+//                 <button
+//                   className="btn btn-link text-start p-0 text-decoration-none me-1"
+//                   onClick={() => toggleExpand(fullPath)}
+//                 >
+//                   <i
+//                     className={`bi ${isExpanded ? 'bi-folder2-open' : 'bi-folder'} me-2`}
+//                   ></i>
+//                   {name}
+//                 </button>
+//               </div>
+//               {isExpanded && (
+//                 <ArtifactTree
+//                   treeData={node}
+//                   projectName={projectName}
+//                   testName={testName}
+//                   runtime={runtime}
+//                   onSelect={onSelect}
+//                   level={level + 1}
+//                   basePath={fullPath}
+//                 />
+//               )}
+//             </li>
+//           );
+//         }
+//       })}
+//     </ul>
+//   );
+// };

package/dist/common/src/app/frontend/components/pure/BuildLogViewer.js

@@ -0,0 +1,106 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BuildLogViewer = void 0;
+const react_1 = __importDefault(require("react"));
+const react_bootstrap_1 = require("react-bootstrap");
+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  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  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."))))))));
+};
+exports.BuildLogViewer = BuildLogViewer;

package/dist/common/src/app/frontend/components/pure/DebugEnv.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DebugEnv = void 0;
+const react_1 = __importDefault(require("react"));
+const react_bootstrap_1 = require("react-bootstrap");
+const DebugEnv = () => {
+    if (process.env.NODE_ENV === 'production') {
+        return null;
+    }
+    const envInfo = {
+        nodeEnv: process.env.NODE_ENV,
+        clientId: process.env.GITHUB_CLIENT_ID,
+        allProcessEnv: Object.keys(process.env)
+            .filter(key => key.startsWith('REACT_APP_'))
+            .reduce((obj, key) => {
+            obj[key] = process.env[key];
+            return obj;
+        }, {}),
+        windowEnv: typeof window !== 'undefined' ? window.env : 'window not defined',
+        location: typeof window !== 'undefined' ? window.location : 'window not defined'
+    };
+    return (react_1.default.createElement(react_bootstrap_1.Card, { className: "mt-3" },
+        react_1.default.createElement(react_bootstrap_1.CardBody, null,
+            react_1.default.createElement("h6", null, "Environment Debug (Development Only)"),
+            react_1.default.createElement("pre", null, JSON.stringify(envInfo, null, 2)))));
+};
+exports.DebugEnv = DebugEnv;

package/dist/common/src/app/frontend/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/app/frontend/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/app/frontend/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);