testeranto 0.177.0 → 0.197.0

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

@@ -0,0 +1,121 @@
+import { assert } from "chai";
+import * as React from "react";
+import * as ReactDom from "react-dom/client";
+export const implementation = {
+    suites: {
+        Default: "TestPageView basic rendering",
+        Navigation: "TestPageView navigation behavior",
+        ErrorStates: "TestPageView error handling",
+    },
+    givens: {
+        Default: () => (props) => {
+            // Create a container and render the component
+            const container = document.createElement('div');
+            document.body.appendChild(container);
+            const reactElement = React.createElement(props);
+            const domRoot = ReactDom.createRoot(container);
+            domRoot.render(reactElement);
+            return Object.assign({ container,
+                reactElement,
+                domRoot }, props);
+        },
+        WithErrors: () => (props) => {
+            const container = document.createElement('div');
+            document.body.appendChild(container);
+            const reactElement = React.createElement(props);
+            const domRoot = ReactDom.createRoot(container);
+            domRoot.render(reactElement);
+            return Object.assign(Object.assign({ container,
+                reactElement,
+                domRoot }, props), { errorCounts: {
+                    runTimeErrors: 1,
+                    typeErrors: 1,
+                    staticErrors: 1
+                } });
+        },
+        WithLogs: () => (props) => {
+            const container = document.createElement('div');
+            document.body.appendChild(container);
+            const reactElement = React.createElement(props);
+            const domRoot = ReactDom.createRoot(container);
+            domRoot.render(reactElement);
+            return Object.assign(Object.assign({ container,
+                reactElement,
+                domRoot }, props), { logs: {
+                    'tests.json': '{}',
+                    'stdout.log': 'test log content'
+                } });
+        },
+    },
+    whens: {
+        SwitchToTab: (tabName) => async (selection, tr, utils) => {
+            // Update the props to switch tabs
+            const newProps = Object.assign(Object.assign({}, selection), { activeTab: tabName });
+            const newReactElement = React.createElement(selection.reactElement.type, newProps);
+            selection.domRoot.render(newReactElement);
+            return (sel) => (Object.assign(Object.assign({}, sel), { reactElement: newReactElement, activeTab: tabName }));
+        },
+        ClickAiderButton: () => async (selection, tr, utils) => {
+            // Find and click the Aider button
+            const button = selection.container.querySelector('button');
+            if (button) {
+                button.click();
+            }
+            return (sel) => sel;
+        },
+    },
+    thens: {
+        takeScreenshot: (name) => async (ssel, utils) => (sel) => {
+            // Screenshot functionality would be implemented here
+            return Promise.resolve(sel);
+        },
+        RendersNavBar: () => async (ssel, utils) => (sel) => {
+            const navBar = sel.container.querySelector(".navbar");
+            assert.isNotNull(navBar, "Navbar should be rendered");
+            return Promise.resolve(sel);
+        },
+        ShowsActiveTab: (tabName) => async (ssel, utils) => (sel) => {
+            // Check if the active tab matches
+            assert.equal(sel.activeTab, tabName, `Active tab should be ${tabName}`);
+            return Promise.resolve(sel);
+        },
+        ShowsErrorCounts: () => async (ssel, utils) => (sel) => {
+            // Check for error badges
+            const badges = sel.container.querySelectorAll(".badge");
+            assert.isAtLeast(badges.length, 0, "Should show at least one badge");
+            return Promise.resolve(sel);
+        },
+        ShowsTestResults: () => async (ssel, utils) => (sel) => {
+            // Check if test results are shown
+            if (sel.testsExist) {
+                const testResults = sel.container.querySelector(".test-results");
+                assert.isNotNull(testResults, "Test results should be shown when tests exist");
+            }
+            return Promise.resolve(sel);
+        },
+        ShowsLogs: () => async (ssel, utils) => (sel) => {
+            // Check if logs are shown
+            const logs = sel.container.querySelector("pre");
+            assert.isNotNull(logs, "Logs should be shown");
+            return Promise.resolve(sel);
+        },
+        ShowsTypeErrors: () => async (ssel, utils) => (sel) => {
+            // Check if type errors are shown
+            const typeErrors = sel.container.querySelector('[data-testid="type-errors"]');
+            assert.isNotNull(typeErrors, "Type errors should be shown");
+            return Promise.resolve(sel);
+        },
+        ShowsLintErrors: () => async (ssel, utils) => (sel) => {
+            // Check if lint errors are shown
+            const lintErrors = sel.container.querySelector('[data-testid="lint-errors"]');
+            assert.isNotNull(lintErrors, "Lint errors should be shown");
+            return Promise.resolve(sel);
+        },
+        AiderButtonCopiesCommand: () => async (ssel, utils) => (sel) => {
+            // Check if Aider button exists
+            const aiderButton = sel.container.querySelector('button[title*="AI Assistant"]');
+            assert.isNotNull(aiderButton, "Aider button should be present");
+            return Promise.resolve(sel);
+        },
+    },
+};

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

@@ -0,0 +1,10 @@
+import Testeranto from "testeranto-react/src/react-dom/jsx/web";
+import { MemoryRouter } from "react-router-dom";
+import { implementation } from "./implementation";
+import { specification } from "./specification";
+import { TestPageView } from "../TestPageView";
+import React from "react";
+import "./../../../App.scss";
+const WrappedTestPageView = (props) => (React.createElement(MemoryRouter, null,
+    React.createElement(TestPageView, Object.assign({}, props))));
+export default Testeranto(implementation, specification, WrappedTestPageView);

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

@@ -0,0 +1,22 @@
+export const specification = (Suite, Given, When, Then) => {
+    return [
+        Suite.Default("TestPageView basic rendering", {
+            "renders navigation bar": Given.Default([], [], [Then.RendersNavBar()]),
+            "shows error counts": Given.Default([], [], [Then.ShowsErrorCounts()]),
+            "shows test results when data exists": Given.Default([], [], [Then.takeScreenshot("shot.png"), Then.ShowsTestResults()]),
+        }),
+        Suite.Navigation("TestPageView navigation behavior", {
+            "shows results tab by default": Given.Default([], [], [Then.ShowsActiveTab("results")]),
+            "switches to logs tab": Given.Default([], [When.SwitchToTab("logs")], [Then.ShowsActiveTab("logs"), Then.ShowsLogs()]),
+            "copies aider command when button clicked": Given.Default([], [When.ClickAiderButton()], [Then.AiderButtonCopiesCommand()]),
+        }),
+        Suite.ErrorStates("TestPageView error handling", {
+            "shows error state when tests fail": Given.WithErrors([], [], [
+                Then.ShowsErrorCounts(),
+                Then.ShowsTypeErrors(),
+                Then.ShowsLintErrors(),
+            ]),
+            "shows logs when available": Given.WithLogs([], [], [Then.ShowsLogs()]),
+        }),
+    ];
+};

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

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

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

@@ -0,0 +1,8 @@
+import React from "react";
+export const ThemeCard = ({ theme, handleThemeChange, value, title, description, style, }) => (React.createElement("div", { className: "col-md-4" },
+    React.createElement("div", { className: `card theme-card ${theme === value ? "border-primary" : ""}`, onClick: () => handleThemeChange({
+            target: { value },
+        }), style: style },
+        React.createElement("div", { className: "card-body text-center p-3" },
+            React.createElement("h5", { className: "card-title mb-1" }, title),
+            React.createElement("p", { className: "small text-muted mb-0" }, description)))));

package/dist/module/src/components/stateful/FeaturesReporter.js

@@ -0,0 +1,22 @@
+import React, { useEffect, useState } from 'react';
+import { FeaturesReporterView } from '../pure/FeaturesReporterView';
+import { buildTree } from '../../types/features';
+export const FeaturesReporter = () => {
+    const [treeData, setTreeData] = useState([]);
+    useEffect(() => {
+        const fetchProjects = async () => {
+            try {
+                const response = await fetch('/projects.json');
+                if (!response.ok)
+                    throw new Error('Failed to fetch projects');
+                const projectNames = await response.json();
+                setTreeData(buildTree(projectNames));
+            }
+            catch (error) {
+                console.error('Error loading projects:', error);
+            }
+        };
+        fetchProjects();
+    }, []);
+    return React.createElement(FeaturesReporterView, { treeData: treeData });
+};

package/dist/module/src/components/stateful/FileTree.js

@@ -0,0 +1,33 @@
+import React from 'react';
+export const FileTree = ({ files, onSelect, activeFile }) => {
+    // Group files by directory
+    const fileGroups = files.reduce((acc, file) => {
+        const dir = file.path.split('/').slice(0, -1).join('/');
+        if (!acc[dir]) {
+            acc[dir] = [];
+        }
+        acc[dir].push(file);
+        return acc;
+    }, {});
+    const fileTreeStyle = {
+        padding: '8px',
+        fontFamily: 'monospace'
+    };
+    const directoryStyle = {
+        marginBottom: '8px'
+    };
+    const directoryNameStyle = {
+        fontWeight: 'bold',
+        padding: '4px 0',
+        color: '#555'
+    };
+    const fileStyle = {
+        padding: '4px 8px',
+        cursor: 'pointer',
+        borderRadius: '4px'
+    };
+    const activeFileStyle = Object.assign(Object.assign({}, fileStyle), { backgroundColor: '#e0e0e0', fontWeight: 'bold' });
+    return (React.createElement("div", { style: fileTreeStyle }, Object.entries(fileGroups).map(([dir, dirFiles]) => (React.createElement("div", { key: dir, style: directoryStyle },
+        React.createElement("div", { style: directoryNameStyle }, dir || '/'),
+        dirFiles.map(file => (React.createElement("div", { key: file.path, style: activeFile === file.path ? activeFileStyle : fileStyle, onClick: () => onSelect(file.path) }, file.path.split('/').pop()))))))));
+};

package/dist/module/src/components/stateful/ProcessManagerPage.js

@@ -0,0 +1,75 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ProcessManagerView } from '../pure/ProcessManagerView';
+export const ProcessManagerPage = () => {
+    const [processes, setProcesses] = useState([]);
+    const [ws, setWs] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const navigate = useNavigate();
+    // Connect to WebSocket
+    useEffect(() => {
+        const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        const wsUrl = `${wsProtocol}//${window.location.host}`;
+        const websocket = new WebSocket(wsUrl);
+        setWs(websocket);
+        // Request current processes when connected
+        websocket.onopen = () => {
+            setLoading(true);
+            websocket.send(JSON.stringify({ type: 'getRunningProcesses' }));
+        };
+        const handleMessage = (event) => {
+            try {
+                const data = JSON.parse(event.data);
+                if (data.type === 'runningProcesses') {
+                    // Processes should come with their full logs
+                    setProcesses(data.processes.map((p) => (Object.assign(Object.assign({}, p), { status: p.status || 'running', logs: p.logs || [] }))));
+                    setLoading(false);
+                }
+                else if (data.type === 'processStarted') {
+                    setProcesses(prev => [...prev, Object.assign(Object.assign({}, data), { status: 'running', logs: data.logs || [] })]);
+                }
+                else if (data.type === 'processExited') {
+                    setProcesses(prev => prev.map(p => p.processId === data.processId
+                        ? Object.assign(Object.assign({}, p), { status: 'exited', exitCode: data.exitCode }) : p));
+                }
+                else if (data.type === 'processError') {
+                    setProcesses(prev => prev.map(p => p.processId === data.processId
+                        ? Object.assign(Object.assign({}, p), { status: 'error', error: data.error }) : p));
+                }
+                else if (data.type === 'processStdout' || data.type === 'processStderr') {
+                    setProcesses(prev => prev.map(p => p.processId === data.processId
+                        ? Object.assign(Object.assign({}, p), { logs: [...(p.logs || []), data.data] }) : p));
+                }
+            }
+            catch (error) {
+                console.error('Error parsing process message:', error);
+                setLoading(false);
+            }
+        };
+        websocket.addEventListener('message', handleMessage);
+        return () => {
+            websocket.removeEventListener('message', handleMessage);
+            websocket.close();
+        };
+    }, []);
+    const handleRefresh = useCallback(() => {
+        if (ws && ws.readyState === WebSocket.OPEN) {
+            setLoading(true);
+            ws.send(JSON.stringify({ type: 'getRunningProcesses' }));
+        }
+    }, [ws]);
+    const handleKillProcess = useCallback((processId) => {
+        if (ws && ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify({
+                type: 'killProcess',
+                processId
+            }));
+        }
+    }, [ws]);
+    const handleBack = useCallback(() => {
+        navigate('/');
+    }, [navigate]);
+    return (
+    // don't put this in AppFrame- this is correct
+    React.createElement(ProcessManagerView, { processes: processes, onRefresh: handleRefresh, onBack: handleBack, loading: loading, onKillProcess: handleKillProcess }));
+};

package/dist/module/src/components/stateful/ProjectPage.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { useEffect, useState } from 'react';
 import { useParams, useNavigate, useLocation } from 'react-router-dom';
@@ -31,11 +32,11 @@ export const ProjectPage = () => {
         const fetchData = async () => {
             try {
                 const [summaryRes, nodeRes, webRes, pureRes, configRes] = await Promise.all([
-                    fetch(`reports/${name}/summary.json`),
-                    fetch(`bundles/node/${name}/metafile.json`),
-                    fetch(`bundles/web/${name}/metafile.json`),
-                    fetch(`bundles/pure/${name}/metafile.json`),
-                    fetch(`reports/${name}/config.json`)
+                    fetch(`/reports/${name}/summary.json`),
+                    fetch(`/metafiles/node/${name}.json`),
+                    fetch(`/metafiles/web/${name}.json`),
+                    fetch(`/metafiles/pure/${name}.json`),
+                    fetch(`/reports/${name}/config.json`)
                 ]);
                 const [summaryData, nodeData, webData, pureData, configData] = await Promise.all([
                     summaryRes.ok ? summaryRes.json() : {},
@@ -59,5 +60,5 @@ export const ProjectPage = () => {
         };
         fetchData();
     }, [name]);
-    return (React.createElement(ProjectPageView, { summary: summary, nodeLogs: nodeLogs, webLogs: webLogs, pureLogs: pureLogs, config: config, loading: loading, error: error, projectName: projectName, route: route, setRoute: setRoute, navigate: navigate }));
+    return (React.createElement(ProjectPageView, { summary: summary, nodeLogs: nodeLogs, webLogs: webLogs, pureLogs: pureLogs, config: config, loading: loading, error: error, projectName: projectName, activeTab: route, setActiveTab: setRoute }));
 };

package/dist/module/src/components/stateful/ProjectsPage.js

@@ -9,19 +9,45 @@ export const ProjectsPage = () => {
     const [error, setError] = useState(null);
     const [configs, setConfigs] = useState({});
     const navigate = useNavigate();
+    const [ws, setWs] = useState(null);
+    useEffect(() => {
+        // Connect to WebSocket on the same host and port as the HTTP server
+        const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        const wsUrl = `${wsProtocol}//${window.location.host}`;
+        const websocket = new WebSocket(wsUrl);
+        setWs(websocket);
+        websocket.onmessage = (event) => {
+            try {
+                const data = JSON.parse(event.data);
+                if (data.type === 'summaryUpdate') {
+                    // Update summaries when we receive updates
+                    setSummaries(prev => (Object.assign(Object.assign({}, prev), data.data)));
+                }
+            }
+            catch (error) {
+                console.error('Error parsing WebSocket message:', error);
+            }
+        };
+        websocket.onerror = (error) => {
+            console.error('WebSocket error:', error);
+        };
+        return () => {
+            websocket.close();
+        };
+    }, []);
     useEffect(() => {
         const fetchProjects = async () => {
             try {
-                const projectsRes = await fetch(`projects.json`);
+                const projectsRes = await fetch(`/projects.json`);
                 const projectNames = await projectsRes.json();
                 const projectsData = await Promise.all(projectNames.map(async (name) => {
                     var _a, _b, _c, _d, _e, _f;
                     const [summaryRes, nodeRes, webRes, pureRes, configRes] = await Promise.all([
-                        fetch(`reports/${name}/summary.json`),
-                        fetch(`bundles/node/${name}/metafile.json`),
-                        fetch(`bundles/web/${name}/metafile.json`),
-                        fetch(`bundles/pure/${name}/metafile.json`),
-                        fetch(`reports/${name}/config.json`),
+                        fetch(`/reports/${name}/summary.json`),
+                        fetch(`/metafiles/node/${name}.json`),
+                        fetch(`/metafiles/web/${name}.json`),
+                        fetch(`/metafiles/pure/${name}.json`),
+                        fetch(`/reports/${name}/config.json`),
                     ]);
                     const [summary, nodeData, webData, pureData, configData] = await Promise.all([
                         summaryRes.json(),

package/dist/module/src/components/stateful/SettingsPage.js

@@ -0,0 +1,35 @@
+import React, { useState, useEffect } from 'react';
+import { Container, Card, Form, Row, Col } from 'react-bootstrap';
+// import { AppFrame } from '../pure/AppFrame';
+export const SettingsPage = () => {
+    const [theme, setTheme] = useState(localStorage.getItem('theme') || 'system');
+    useEffect(() => {
+        let themeToApply = theme;
+        if (theme === 'system') {
+            themeToApply = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+        }
+        document.documentElement.setAttribute('data-bs-theme', themeToApply);
+    }, [theme]);
+    const handleThemeChange = (e) => {
+        const newTheme = e.target.value;
+        setTheme(newTheme);
+        localStorage.setItem('theme', newTheme);
+        let themeToApply = newTheme;
+        if (newTheme === 'system') {
+            themeToApply = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+        }
+        document.documentElement.setAttribute('data-bs-theme', themeToApply);
+    };
+    return (React.createElement(Container, null,
+        React.createElement(Row, { className: "justify-content-center" },
+            React.createElement(Col, { lg: 8 },
+                React.createElement(Card, { className: "theme-card" },
+                    React.createElement(Card.Body, null,
+                        React.createElement(Form, null,
+                            React.createElement(Form.Group, { className: "mb-4" },
+                                React.createElement(Form.Label, { className: "h6 mb-3" }, "Theme"),
+                                React.createElement("div", { className: "d-flex flex-wrap gap-3" },
+                                    React.createElement(Form.Check, { type: "radio", name: "theme", id: "light-theme", label: "Light", value: "light", checked: theme === 'light', onChange: handleThemeChange, className: "theme-option" }),
+                                    React.createElement(Form.Check, { type: "radio", name: "theme", id: "dark-theme", label: "Dark", value: "dark", checked: theme === 'dark', onChange: handleThemeChange, className: "theme-option" }),
+                                    React.createElement(Form.Check, { type: "radio", name: "theme", id: "system-theme", label: "System", value: "system", checked: theme === 'system', onChange: handleThemeChange, className: "theme-option" }))))))))));
+};

package/dist/module/src/components/stateful/SingleProcessPage.js

@@ -0,0 +1,110 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { SingleProcessView } from "../pure/SingleProcessView";
+export const SingleProcessPage = () => {
+    const [process, setProcess] = useState(null);
+    const [ws, setWs] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const navigate = useNavigate();
+    const { processId } = useParams();
+    // Connect to WebSocket
+    useEffect(() => {
+        const wsProtocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+        const wsUrl = `${wsProtocol}//${window.location.host}`;
+        const websocket = new WebSocket(wsUrl);
+        setWs(websocket);
+        // Set a timeout to handle cases where we don't get a response
+        const timeoutId = setTimeout(() => {
+            if (loading) {
+                setLoading(false);
+                // If we're still loading after 3 seconds, show an error
+                setProcess(null);
+            }
+        }, 3000);
+        // Request specific process when connected
+        websocket.onopen = () => {
+            setLoading(true);
+            if (processId) {
+                websocket.send(JSON.stringify({
+                    type: "getProcess",
+                    processId,
+                }));
+            }
+        };
+        websocket.onerror = (error) => {
+            console.error("WebSocket error:", error);
+            setLoading(false);
+            setProcess(null);
+            clearTimeout(timeoutId);
+        };
+        const handleMessage = (event) => {
+            try {
+                const data = JSON.parse(event.data);
+                // Handle process data response - this should include all captured logs
+                if (data.type === "processData" && data.processId === processId) {
+                    setProcess({
+                        processId: data.processId,
+                        command: data.command,
+                        pid: data.pid,
+                        timestamp: data.timestamp,
+                        status: data.status || "running",
+                        exitCode: data.exitCode,
+                        error: data.error,
+                        // Use the logs sent from the server, which should include all captured logs
+                        logs: data.logs || [],
+                    });
+                    setLoading(false);
+                    clearTimeout(timeoutId);
+                }
+                // Handle new log messages that come after the initial data
+                else if ((data.type === "processStdout" || data.type === "processStderr") &&
+                    data.processId === processId) {
+                    setProcess((prev) => prev
+                        ? Object.assign(Object.assign({}, prev), { logs: [...(prev.logs || []), data.data] }) : null);
+                }
+                // Handle process completion
+                else if ((data.type === "processExited" || data.type === "processError") &&
+                    data.processId === processId) {
+                    setProcess((prev) => prev
+                        ? Object.assign(Object.assign({}, prev), { status: data.type === "processExited" ? "exited" : "error", exitCode: data.exitCode, error: data.error }) : null);
+                }
+            }
+            catch (error) {
+                console.error("Error parsing process message:", error);
+                setLoading(false);
+                setProcess(null);
+                clearTimeout(timeoutId);
+            }
+        };
+        websocket.addEventListener("message", handleMessage);
+        return () => {
+            websocket.removeEventListener("message", handleMessage);
+            websocket.close();
+            clearTimeout(timeoutId);
+        };
+    }, [processId]);
+    // Try to find the process in the global state if WebSocket doesn't respond
+    useEffect(() => {
+        // This is a fallback - in a real implementation, you'd want to get this from a global state
+        // or through some other means
+    }, []);
+    const handleBack = useCallback(() => {
+        navigate("/processes");
+    }, [navigate]);
+    const handleKillProcess = useCallback((processId) => {
+        if (ws && ws.readyState === WebSocket.OPEN) {
+            console.log("Sending killProcess for:", processId);
+            ws.send(JSON.stringify({
+                type: "killProcess",
+                processId,
+            }));
+        }
+        else {
+            console.log("Cannot send killProcess - WebSocket not ready:", {
+                wsExists: !!ws,
+                wsReady: ws === null || ws === void 0 ? void 0 : ws.readyState,
+            });
+        }
+    }, [ws]);
+    return (React.createElement(SingleProcessView, { process: process, onBack: handleBack, loading: loading, onKillProcess: handleKillProcess, ws: ws }));
+};