testeranto 0.203.0 → 0.206.0

package/dist/module/src/app/frontend/components/SunriseAnimation.js

@@ -0,0 +1,256 @@
+import React, { useEffect, useState, useRef } from 'react';
+const SunriseAnimation = ({ active }) => {
+    const [position, setPosition] = useState(0);
+    const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+    const animationIdRef = useRef(null);
+    useEffect(() => {
+        // Set initial dimensions
+        setDimensions({
+            width: window.innerWidth,
+            height: window.innerHeight
+        });
+        const handleResize = () => {
+            setDimensions({
+                width: window.innerWidth,
+                height: window.innerHeight
+            });
+        };
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    // Animation timing parameters
+    const ANIMATION_DURATION = 10000; //30000; // 30 seconds for full day/night cycle
+    const UPDATE_INTERVAL = 50; // Update every 50ms (~20fps)
+    useEffect(() => {
+        if (!active) {
+            // Clean up animation frame if active becomes false
+            if (animationIdRef.current) {
+                cancelAnimationFrame(animationIdRef.current);
+                animationIdRef.current = null;
+            }
+            return;
+        }
+        console.log('Starting animation with duration:', ANIMATION_DURATION, 'ms');
+        const startTime = performance.now();
+        let lastUpdateTime = 0;
+        const animate = (timestamp) => {
+            if (!active)
+                return;
+            const elapsed = (timestamp - startTime) % ANIMATION_DURATION;
+            const progress = elapsed / ANIMATION_DURATION;
+            // Only update if enough time has passed since last update
+            if (timestamp - lastUpdateTime >= UPDATE_INTERVAL) {
+                // Use cosine for smooth transition from -1 to 1 over full duration
+                const newPos = Math.cos(progress * Math.PI * 2);
+                setPosition(newPos);
+                lastUpdateTime = timestamp;
+            }
+            animationIdRef.current = requestAnimationFrame(animate);
+        };
+        // Start the animation loop
+        animationIdRef.current = requestAnimationFrame(animate);
+        return () => {
+            if (animationIdRef.current) {
+                cancelAnimationFrame(animationIdRef.current);
+                animationIdRef.current = null;
+            }
+        };
+    }, [active]);
+    const yPos = dimensions.height * (1 - position);
+    const normalizedPos = (position + 1) / 2; // Convert from [-1,1] to [0,1]
+    if (!active)
+        return null;
+    return (React.createElement("div", { id: "sunrise", style: {
+            width: '100vw',
+            height: '100vh',
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            backgroundColor: 'transparent',
+            overflow: 'hidden',
+            pointerEvents: 'none'
+        } },
+        React.createElement("div", { id: "daily-bg", style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%',
+                backgroundColor: 'rgba(0,0,0,0.3)',
+                zIndex: -1001
+            } }),
+        "Stars Container",
+        React.createElement("div", { id: "starsContainer", style: {
+                perspective: 350,
+                perspectiveOrigin: '50% 300%',
+                overflow: 'hidden',
+                position: 'absolute',
+                top: 0,
+                left: '-50%',
+                width: '200%',
+                height: '50%',
+                zIndex: -1000,
+                opacity: Math.max(0, 0.5 - normalizedPos * 0.5)
+            } },
+            React.createElement("div", { id: "stars", style: {
+                    backgroundRepeat: 'repeat',
+                    position: 'absolute',
+                    width: '200%',
+                    height: '200%',
+                    left: '-50%',
+                    bottom: 0,
+                    opacity: 0.5,
+                    transform: 'rotateX(-90deg)'
+                } })),
+        React.createElement("div", { id: "sun", style: {
+                position: 'absolute',
+                top: 0,
+                left: '50%',
+                transform: `translateX(-50%) translateY(${yPos}px)`,
+                width: '100%',
+                height: '50%',
+                background: `radial-gradient(50% ${yPos}px, circle, rgba(242,248,247,1) 0%,rgba(249,249,28,1) 3%,rgba(247,214,46,1) 8%,rgba(248,200,95,1) 12%,rgba(201,165,132,1) 30%,rgba(115,130,133,1) 51%,rgba(46,97,122,1) 85%,rgba(24,75,106,1) 100%)`,
+                zIndex: -900,
+                opacity: 0.5
+            } }),
+        React.createElement("div", { id: "sunDay", style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '50%',
+                background: `radial-gradient(50% ${yPos}px, circle, rgba(252,255,251,0.9) 0%,rgba(253,250,219,0.4) 30%,rgba(226,219,197,0.01) 70%,rgba(226,219,197,0.0) 70%,rgba(201,165,132,0) 100%)`,
+                zIndex: -800,
+                opacity: Math.max(0, 1 - yPos / dimensions.height)
+            } }),
+        React.createElement("div", { id: "sunSet", style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '50%',
+                background: `radial-gradient(50% ${yPos}px, circle, rgba(254,255,255,0.8) 5%,rgba(236,255,0,1) 10%,rgba(253,50,41,1) 25%,rgba(243,0,0,1) 40%,rgba(93,0,0,1) 100%)`,
+                zIndex: -800,
+                opacity: Math.max(0, yPos / dimensions.height - 0.2)
+            } }),
+        React.createElement("div", { id: "sky", style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '50%',
+                zIndex: -700,
+                background: 'linear-gradient(to top, rgba(249,251,240,1) 10%,rgba(215,253,254,1) 20%,rgba(167,222,253,1) 40%,rgba(110,175,255,1) 100%)',
+                opacity: Math.max(0, 1 - yPos / dimensions.height)
+            } }),
+        React.createElement("div", { id: "horizon", style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '50%',
+                background: 'linear-gradient(to top, rgba(212,87,43,0.9) 0%,rgba(246,149,52,0.8) 20%,rgba(24,75,106,0) 100%)',
+                zIndex: -700,
+                opacity: Math.max(0, yPos > dimensions.height / 2
+                    ? (dimensions.height - yPos) / (dimensions.height / 2) + 0.2
+                    : yPos / (dimensions.height / 2))
+            } }),
+        React.createElement("div", { id: "horizonNight", style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '50%',
+                background: 'linear-gradient(to top, rgba(57,167,255,1) 0%,rgba(13,98,245,1) 20%,rgba(0,11,22,0.1) 60%)',
+                zIndex: -600,
+                opacity: Math.max(0, (yPos - (dimensions.height * 4 / 5)) / (dimensions.height - (dimensions.height * 4 / 5)))
+            } }),
+        React.createElement("div", { id: "moon", style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '50%',
+                background: 'radial-gradient(40% 55%, circle, rgba(249,249,250,1) -1%,rgba(189,255,254,1) 1%,rgba(8,49,78,1) 1%,rgba(8,26,56,1) 10%,rgba(4,16,46,1) 40%,rgba(2,8,13,1) 70%)',
+                zIndex: -500,
+                opacity: Math.max(0, (yPos - (dimensions.height * 9 / 10)) / (dimensions.height - (dimensions.height * 9 / 10)))
+            } }),
+        React.createElement("div", { id: "water", style: {
+                overflow: 'hidden',
+                position: 'absolute',
+                bottom: 0,
+                left: 0,
+                width: '100%',
+                height: '50%',
+                background: 'linear-gradient(to top, rgba(0,25,45,1) 0%,rgba(14,71,117,1) 35%,rgba(26,126,174,1) 70%,rgba(62,168,220,1) 100%)',
+                zIndex: -400
+            } }),
+        React.createElement("div", { id: "waterReflectionContainer", style: {
+                perspective: 30,
+                perspectiveOrigin: `50% ${-15 + (normalizedPos * 30)}%`,
+                overflow: 'hidden',
+                position: 'absolute',
+                top: '50%',
+                left: '-3%',
+                width: '103%',
+                height: '50%',
+                zIndex: -300,
+                transform: `translateY(${dimensions.height - yPos}px)`
+            } },
+            React.createElement("div", { id: "waterReflectionMiddle", style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: '-50%',
+                    width: '200%',
+                    height: '55%',
+                    background: 'radial-gradient(50% 0px, rgba(247,177,72,1) 3%,rgba(248,175,65,1) 6%,rgba(207,62,30,0.4) 35%,rgba(176,91,48,0.1) 45%,rgba(141,88,47,0.0) 60%,rgba(116,82,63,0.0) 70%,rgba(44,65,68,0.0) 80%,rgba(7,19,31,0.0) 100%)',
+                    zIndex: -200,
+                    opacity: Math.max(0, yPos > dimensions.height / 2
+                        ? (dimensions.height - yPos) / (dimensions.height / 2) - 0.1
+                        : yPos / (dimensions.height / 2) - 0.1),
+                    transform: 'rotateX(45deg)'
+                } })),
+        React.createElement("div", { id: "waterDistance", style: {
+                position: 'absolute',
+                bottom: 0,
+                left: 0,
+                width: '100%',
+                height: '50%',
+                background: 'linear-gradient(90deg, rgba(0,0,0,0.0) 10%,rgba(0,0,0,0.20) 44%,rgba(0,0,0,0.65) 95%,rgba(0,0,0,0.62) 100%)',
+                zIndex: -100,
+                opacity: Math.max(0, yPos / dimensions.height + 0.6)
+            } }),
+        React.createElement("div", { id: "darknessOverlaySky", style: {
+                backgroundColor: '#000',
+                opacity: Math.max(0, (yPos - (dimensions.height * 7 / 10)) / (dimensions.height - (dimensions.height * 7 / 10))),
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '50%',
+                zIndex: -50
+            } }),
+        React.createElement("div", { id: "darknessOverlay", style: {
+                backgroundColor: '#000',
+                opacity: Math.max(0, (yPos - (dimensions.height / 2)) / (dimensions.height / 2)),
+                position: 'absolute',
+                bottom: 0,
+                left: 0,
+                width: '100%',
+                height: '50%',
+                zIndex: -5
+            } }),
+        React.createElement("div", { id: "oceanRipple", style: {
+                backgroundImage: 'repeating-linear-gradient(175deg, rgba(165,165,165,0.08) 43%,rgba(175,175,175,0.08) 45%,rgba(235,235,235,0.08) 49%,rgba(195,195,195,0.08) 50%,rgba(165,165,165,0.08) 54%)',
+                opacity: 0.5,
+                position: 'absolute',
+                left: '0%',
+                bottom: 0,
+                width: '100%',
+                height: '50%',
+                zIndex: -10
+            } })));
+};
+export default SunriseAnimation;

package/dist/module/src/app/frontend/components/SunriseAnimation.test/implementation.js

@@ -0,0 +1 @@
+"use strict";

package/dist/module/src/app/frontend/components/SunriseAnimation.test/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/module/src/app/frontend/components/SunriseAnimation.test/interface.js

@@ -0,0 +1,32 @@
+import * as React from "react";
+import * as ReactDom from "react-dom/client";
+export const interface = {
+    beforeEach: async (subject, initializer) => {
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        const root = ReactDom.createRoot(container);
+        const props = initializer();
+        const reactElement = React.createElement(subject, props);
+        root.render(reactElement);
+        return {
+            container,
+            reactElement,
+            domRoot: root,
+            animationElement: container.querySelector(".sunrise-animation"),
+        };
+    },
+    afterEach: async (store) => {
+        store.domRoot.unmount();
+        document.body.removeChild(store.container);
+        return store;
+    },
+    andWhen: async (store, whenCB) => {
+        return whenCB(store);
+    },
+    butThen: async (store, thenCB) => {
+        return thenCB(store);
+    },
+    afterAll: () => { },
+    beforeAll: () => ({}),
+    assertThis: (x) => x,
+};

package/dist/module/src/app/frontend/components/SunriseAnimation.test/specification.js

@@ -0,0 +1 @@
+"use strict";

package/dist/module/src/app/frontend/components/SunriseAnimation.test/types.js

@@ -0,0 +1 @@
+export {};

package/dist/module/src/app/frontend/components/TestStatusBadge.js

@@ -0,0 +1,28 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
+import { Badge } from 'react-bootstrap';
+export const TestStatusBadge = (props) => {
+    // Simplified status determination
+    const hasTests = props.testsExist !== false;
+    const testCompleted = props.runTimeErrors !== -1;
+    const hasRuntimeErrors = props.runTimeErrors > 0;
+    let bddStatus;
+    if (!hasTests) {
+        bddStatus = { text: '❌ No Tests', variant: 'danger' };
+    }
+    else if (!testCompleted) {
+        bddStatus = { text: '❌ No Tests', variant: 'danger' };
+    }
+    else if (hasRuntimeErrors) {
+        bddStatus = { text: `❌ BDD (${props.runTimeErrors})`, variant: 'danger' };
+    }
+    else {
+        bddStatus = { text: '✅ BDD', variant: 'success' };
+    }
+    if (props.variant === 'compact') {
+        console.groupEnd();
+        return React.createElement(Badge, { bg: bddStatus.variant }, bddStatus.text);
+    }
+    return (React.createElement("div", { className: "d-flex gap-2" },
+        React.createElement(Badge, { bg: bddStatus.variant }, bddStatus.text)));
+};

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

@@ -0,0 +1,140 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { useEffect, useState } from "react";
+import { Container, Nav, OverlayTrigger, Tooltip, } from "react-bootstrap";
+import { NavLink } from "react-router-dom";
+import { useLocation } from "react-router-dom";
+import { useTutorialMode, useAuth } from "../../App";
+import { useWebSocket } from "../../useWebSocket";
+import { HelpoChatDrawer } from "./HelpoChatDrawer";
+export const AppFrame = ({ children, title, rightContent }) => {
+    const location = useLocation();
+    const { isConnected } = useWebSocket();
+    const { tutorialMode } = useTutorialMode();
+    const { isAuthenticated, logout } = useAuth();
+    const [hasAnimated, setHasAnimated] = useState(false);
+    const [isHelpoActive, setIsHelpoActive] = 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);
+    }
+  `;
+    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.createElement("div", { className: "d-flex min-vh-100" },
+        React.createElement("style", null, brandLogoStyle),
+        React.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.createElement(Nav, { variant: "pills", className: "flex-column p-0 flex-grow-1" },
+                React.createElement(Nav.Link, { as: NavLink, to: "/helpo", className: `${location.pathname === "/helpo" ? "active" : ""} d-flex align-items-center justify-content-center ${!hasAnimated ? "navbar-attention-1" : ""}` }, tutorialMode ? (React.createElement(OverlayTrigger, { placement: "right", overlay: React.createElement(Tooltip, { id: "help-tooltip" }, "Chat with Helpo, the helpful robot.") },
+                    React.createElement("span", null, "helpo"))) : (React.createElement("span", null, "helpo"))),
+                React.createElement(Nav.Link, { as: NavLink, to: "/flua", className: `${location.pathname === "/flua" ? "active" : ""} d-flex align-items-center justify-content-center ${!hasAnimated ? "navbar-attention-1" : ""}` }, tutorialMode ? (React.createElement(OverlayTrigger, { placement: "right", overlay: React.createElement(Tooltip, { id: "help-tooltip" }, "Process/Project Management") },
+                    React.createElement("span", null, "flua"))) : (React.createElement("span", null, "flua"))),
+                React.createElement(Nav.Link, { as: NavLink, to: "/projects", className: `${location.pathname === "/projects" ? "active" : ""} d-flex align-items-center justify-content-center ${!hasAnimated ? "navbar-attention-2" : ""}` }, tutorialMode ? (React.createElement(OverlayTrigger, { placement: "right", overlay: React.createElement(Tooltip, { id: "projects-tooltip" }, "Projects") },
+                    React.createElement("span", null, "testo"))) : (React.createElement("span", null, "testo"))),
+                React.createElement(Nav.Link, { as: 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.createElement(OverlayTrigger, { placement: "right", overlay: React.createElement(Tooltip, { id: "processes-tooltip" },
+                        "Processes",
+                        " ",
+                        !isAuthenticated
+                            ? "(Sign in required)"
+                            : !isConnected
+                                ? "(WebSocket disconnected)"
+                                : "") },
+                    React.createElement("span", null, "pro\u0109o"))) : (React.createElement("span", null, "pro\u0109o"))),
+                React.createElement(Nav.Link, { as: 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.createElement(OverlayTrigger, { placement: "right", overlay: React.createElement(Tooltip, { id: "git-tooltip" },
+                        "Git Integration",
+                        " ",
+                        !isAuthenticated ? "(Sign in required)" : "") },
+                    React.createElement("span", null, "arbo"))) : (React.createElement("span", null, "arbo"))),
+                React.createElement(Nav.Link, { as: NavLink, to: "/svg-editor", className: `${location.pathname === "/svg-editor" ? "active" : ""} d-flex align-items-center justify-content-center` }, tutorialMode ? (React.createElement(OverlayTrigger, { placement: "right", overlay: React.createElement(Tooltip, { id: "svg-editor-tooltip" }, "svg editor") },
+                    React.createElement("span", null, "vektoro"))) : (React.createElement("span", null, "vektoro"))),
+                React.createElement(Nav.Link, { as: NavLink, to: "/drato", className: `${location.pathname === "/drato" ? "active" : ""} d-flex align-items-center justify-content-center` }, tutorialMode ? (React.createElement(OverlayTrigger, { placement: "right", overlay: React.createElement(Tooltip, { id: "drato-tooltip" }, "Bootstrap wireframing tool") },
+                    React.createElement("span", null, "drato"))) : (React.createElement("span", null, "drato"))),
+                React.createElement(Nav.Link, { as: NavLink, to: "/grafeo", className: `${location.pathname === "/grafeo" ? "active" : ""} d-flex align-items-center justify-content-center` }, tutorialMode ? (React.createElement(OverlayTrigger, { placement: "right", overlay: React.createElement(Tooltip, { id: "grafeo-tooltip" }, "GraphML editor") },
+                    React.createElement("span", null, "grafeo"))) : (React.createElement("span", null, "grafeo"))),
+                React.createElement(Nav.Link, { as: NavLink, to: "/skribo", className: `${location.pathname === "/skribo" ? "active" : ""} d-flex align-items-center justify-content-center` }, tutorialMode ? (React.createElement(OverlayTrigger, { placement: "right", overlay: React.createElement(Tooltip, { id: "skribo-tooltip" }, "Code editor") },
+                    React.createElement("span", null, "skribo"))) : (React.createElement("span", null, "skribo"))),
+                React.createElement(Nav.Link, { as: NavLink, to: "/settings", className: `${location.pathname === "/settings" ? "active" : ""} d-flex align-items-center justify-content-center ${!hasAnimated ? "navbar-attention-6" : ""}` }, tutorialMode ? (React.createElement(OverlayTrigger, { placement: "right", overlay: React.createElement(Tooltip, { id: "settings-tooltip" }, "Settings") },
+                    React.createElement("span", null, "konto"))) : (React.createElement("span", null, "konto")))),
+            React.createElement(OverlayTrigger, { placement: "right", overlay: React.createElement(Tooltip, { id: "status-tooltip" }, isConnected
+                    ? "Dev mode - Full access"
+                    : "Static mode - Read only") },
+                React.createElement("div", { className: "p-2 border-top d-flex align-items-center justify-content-center" },
+                    React.createElement("span", { className: `badge rounded-circle d-flex align-items-center justify-content-center` }, isConnected ? "🟢" : "🔴"))),
+            React.createElement("div", { className: "p-2 border-top d-flex align-items-center justify-content-center" },
+                React.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.createElement("img", { src: "https://www.testeranto.com/logo.svg", alt: "Testeranto Logo", style: {
+                            height: "32px",
+                            width: "32px",
+                        } })))),
+        React.createElement(HelpoChatDrawer, { isActive: isHelpoActive, onToggle: () => setIsHelpoActive(!isHelpoActive) }),
+        React.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.createElement("main", { className: "flex-grow-1 p-1", style: {
+                    minWidth: "fit-content",
+                    width: "100%",
+                } },
+                React.createElement(Container, { fluid: true, style: {
+                        height: "100%",
+                        minWidth: "fit-content",
+                        padding: "0.125rem",
+                    } }, location.pathname === "/helpo" ? (React.createElement("div", null,
+                    React.createElement("h1", null, "Helpo Documentation"),
+                    React.createElement("p", null, "Welcome to the Helpo documentation. Here you can find information about using Testeranto."),
+                    React.createElement("h2", null, "Getting Started"),
+                    React.createElement("p", null, "Start by creating a project and writing your first test cases."),
+                    React.createElement("h2", null, "Features"),
+                    React.createElement("ul", null,
+                        React.createElement("li", null, "Test automation"),
+                        React.createElement("li", null, "Process management"),
+                        React.createElement("li", null, "Git integration"),
+                        React.createElement("li", null, "And much more...")))) : (children))))));
+};

package/dist/module/src/app/frontend/components/pure/AppFrame.test/implementation.js

@@ -0,0 +1,57 @@
+import { assert } from "chai";
+import React from "react";
+export const implementation = {
+    suites: {
+        Default: "AppFrame basic rendering",
+        Layout: "AppFrame layout structure",
+    },
+    givens: {
+        Default: () => (selection) => (Object.assign(Object.assign({}, selection), { children: React.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.createElement('div'),
+                domRoot: container,
+                container
+            };
+        },
+        RendersContainer: () => async ({ htmlElement, container }) => {
+            // const container = htmlElement.querySelector('.min-vh-100');
+            assert.exists(container, 'Should have min-vh-100 container');
+            return {
+                htmlElement,
+                reactElement: React.createElement('div'),
+                domRoot: container,
+                container: container
+            };
+        },
+        HasMainContent: () => async ({ htmlElement }) => {
+            const main = htmlElement.querySelector('main.flex-grow-1');
+            assert.exists(main, 'Should have main content area');
+            return { htmlElement };
+        },
+        HasFooter: () => async ({ htmlElement }) => {
+            const footer = htmlElement.querySelector('footer');
+            assert.exists(footer, 'Should have footer');
+            return { htmlElement };
+        },
+        HasSettingsButton: () => async ({ htmlElement }) => {
+            const button = htmlElement.querySelector('footer button');
+            assert.exists(button, 'Should have settings button in footer');
+            return { htmlElement };
+        },
+        HasTesterantoLink: () => async ({ htmlElement }) => {
+            const link = htmlElement.querySelector('footer a[href*="testeranto"]');
+            assert.exists(link, 'Should have testeranto link in footer');
+            return { htmlElement };
+        },
+    },
+};

package/dist/module/src/app/frontend/components/pure/AppFrame.test/index.js

@@ -0,0 +1,9 @@
+import React from "react";
+import Testeranto from "testeranto-react/src/react-dom/component/web";
+import { implementation } from "./implementation";
+import { specification } from "./specification";
+import { AppFrame } from "../AppFrame";
+import "../../../App.scss";
+const WrappedAppFrame = ({ children }) => (React.createElement("div", { id: "test-root" },
+    React.createElement(AppFrame, { "data-testid": "app-frame" }, children)));
+export default Testeranto(implementation, specification, WrappedAppFrame);

package/dist/module/src/app/frontend/components/pure/AppFrame.test/specification.js

@@ -0,0 +1,21 @@
+export 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")]
+        //   ),
+        // }),
+    ];
+};

package/dist/module/src/app/frontend/components/pure/AppFrame.test/types.js

@@ -0,0 +1,2 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+export {};

package/dist/module/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>
+//   );
+// };