testeranto 0.200.0 → 0.202.0

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

@@ -0,0 +1,117 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderTestResults = exports.getLanguage = void 0;
+const react_1 = __importDefault(require("react"));
+// Determine language from file extension
+const getLanguage = (path) => {
+    var _a;
+    const ext = (_a = path.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+    switch (ext) {
+        case "ts":
+            return "typescript";
+        case "tsx":
+            return "typescript";
+        case "js":
+            return "javascript";
+        case "json":
+            return "json";
+        case "md":
+            return "markdown";
+        default:
+            return "plaintext";
+    }
+};
+exports.getLanguage = getLanguage;
+const renderTestResults = (testData, buildErrors, projectName, testName, runtime) => {
+    return (react_1.default.createElement("div", { className: "test-results" },
+        testData.givens.map((given, i) => (react_1.default.createElement("div", { key: i, className: "mb-4 card" },
+            react_1.default.createElement("div", { className: "card-header bg-primary text-white" },
+                react_1.default.createElement("div", { className: "d-flex justify-content-between align-items-center" },
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement("h4", null,
+                            "Given: ",
+                            given.name),
+                        given.features && given.features.length > 0 && (react_1.default.createElement("div", { className: "mt-1" },
+                            react_1.default.createElement("small", null, "Features:"),
+                            react_1.default.createElement("ul", { className: "list-unstyled" }, given.features.map((feature, fi) => (react_1.default.createElement("li", { key: fi }, feature.startsWith("http") ? (react_1.default.createElement("a", { href: feature, target: "_blank", rel: "noopener noreferrer", className: "text-white" }, new URL(feature).hostname)) : (react_1.default.createElement("span", { className: "text-white" }, feature))))))))),
+                    given.artifacts && given.artifacts.length > 0 && (react_1.default.createElement("div", { className: "dropdown" },
+                        react_1.default.createElement("button", { className: "btn btn-sm btn-light dropdown-toggle", type: "button", "data-bs-toggle": "dropdown" },
+                            "Artifacts (",
+                            given.artifacts.length,
+                            ")"),
+                        react_1.default.createElement("ul", { className: "dropdown-menu dropdown-menu-end" }, given.artifacts.map((artifact, ai) => (react_1.default.createElement("li", { key: ai },
+                            react_1.default.createElement("a", { className: "dropdown-item", href: `reports/${projectName}/${testName
+                                    .split(".")
+                                    .slice(0, -1)
+                                    .join(".")}/${runtime}/${artifact}`, target: "_blank", rel: "noopener noreferrer" }, artifact.split("/").pop()))))))))),
+            react_1.default.createElement("div", { className: "card-body" },
+                given.whens.map((when, j) => (react_1.default.createElement("div", { key: `w-${j}`, className: `p-3 mb-2 ${when.error ? "bg-danger text-white" : "bg-success text-white"}` },
+                    react_1.default.createElement("div", { className: "d-flex justify-content-between align-items-start" },
+                        react_1.default.createElement("div", null,
+                            react_1.default.createElement("div", null,
+                                react_1.default.createElement("strong", null, "When:"),
+                                " ",
+                                when.name,
+                                when.features && when.features.length > 0 && (react_1.default.createElement("div", { className: "mt-2" },
+                                    react_1.default.createElement("small", null, "Features:"),
+                                    react_1.default.createElement("ul", { className: "list-unstyled" }, when.features.map((feature, fi) => (react_1.default.createElement("li", { key: fi }, feature.startsWith("http") ? (react_1.default.createElement("a", { href: feature, target: "_blank", rel: "noopener noreferrer" }, new URL(feature).hostname)) : (feature))))))),
+                                when.error && react_1.default.createElement("pre", { className: "mt-2" }, when.error))),
+                        when.artifacts && when.artifacts.length > 0 && (react_1.default.createElement("div", { className: "ms-3" },
+                            react_1.default.createElement("strong", null, "Artifacts:"),
+                            react_1.default.createElement("ul", { className: "list-unstyled" }, when.artifacts.map((artifact, ai) => (react_1.default.createElement("li", { key: ai },
+                                react_1.default.createElement("a", { href: `reports/${projectName}/${testName
+                                        .split(".")
+                                        .slice(0, -1)
+                                        .join(".")}/${runtime}/${artifact}`, target: "_blank", className: "text-white", rel: "noopener noreferrer" }, artifact.split("/").pop()))))))))))),
+                given.thens.map((then, k) => (react_1.default.createElement("div", { key: `t-${k}`, className: `p-3 mb-2 ${then.error ? "bg-danger text-white" : "bg-success text-white"}` },
+                    react_1.default.createElement("div", { className: "d-flex justify-content-between align-items-start" },
+                        react_1.default.createElement("div", null,
+                            react_1.default.createElement("div", null,
+                                react_1.default.createElement("strong", null, "Then:"),
+                                " ",
+                                then.name,
+                                then.features && then.features.length > 0 && (react_1.default.createElement("div", { className: "mt-2" },
+                                    react_1.default.createElement("small", null, "Features:"),
+                                    react_1.default.createElement("ul", { className: "list-unstyled" }, then.features.map((feature, fi) => (react_1.default.createElement("li", { key: fi }, feature.startsWith("http") ? (react_1.default.createElement("a", { href: feature, target: "_blank", rel: "noopener noreferrer" }, new URL(feature).hostname)) : (feature))))))),
+                                then.error && react_1.default.createElement("pre", { className: "mt-2" }, then.error))),
+                        then.artifacts && then.artifacts.length > 0 && (react_1.default.createElement("div", { className: "ms-3" },
+                            react_1.default.createElement("strong", null, "Artifacts:"),
+                            react_1.default.createElement("ul", { className: "list-unstyled" }, then.artifacts.map((artifact, ai) => (react_1.default.createElement("li", { key: ai },
+                                react_1.default.createElement("a", { href: `reports/${projectName}/${testName
+                                        .split(".")
+                                        .slice(0, -1)
+                                        .join(".")}/${runtime}/${artifact}`, target: "_blank", className: "text-white", rel: "noopener noreferrer" }, artifact.split("/").pop()))))))))))))))),
+        (buildErrors.errors.length > 0 || buildErrors.warnings.length > 0) && (react_1.default.createElement("div", { className: "mb-4 card border-danger" },
+            react_1.default.createElement("div", { className: "card-header bg-danger text-white" },
+                react_1.default.createElement("h4", null, "Build Errors and Warnings")),
+            react_1.default.createElement("div", { className: "card-body" },
+                buildErrors.errors.length > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("h5", null, "Errors"),
+                    react_1.default.createElement("ul", null, buildErrors.errors.map((error, idx) => (react_1.default.createElement("li", { key: `build-error-${idx}` },
+                        react_1.default.createElement("strong", null, error.text),
+                        error.location && (react_1.default.createElement("div", null,
+                            "File: ",
+                            error.location.file,
+                            " Line:",
+                            " ",
+                            error.location.line,
+                            " Column: ",
+                            error.location.column)))))))),
+                buildErrors.warnings.length > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("h5", null, "Warnings"),
+                    react_1.default.createElement("ul", null, buildErrors.warnings.map((warning, idx) => (react_1.default.createElement("li", { key: `build-warning-${idx}` },
+                        react_1.default.createElement("strong", null, warning.text),
+                        warning.location && (react_1.default.createElement("div", null,
+                            "File: ",
+                            warning.location.file,
+                            " Line:",
+                            " ",
+                            warning.location.line,
+                            " Column:",
+                            " ",
+                            warning.location.column)))))))))))));
+};
+exports.renderTestResults = renderTestResults;

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

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TestTable = void 0;
+const react_1 = __importDefault(require("react"));
+const react_bootstrap_1 = require("react-bootstrap");
+const TestStatusBadge_1 = require("../TestStatusBadge");
+const TestTable = ({ testStatuses, projectName, }) => {
+    return (react_1.default.createElement(react_bootstrap_1.Table, { striped: true, bordered: true, hover: true },
+        react_1.default.createElement("thead", null,
+            react_1.default.createElement("tr", null,
+                react_1.default.createElement("th", null, "Test"),
+                react_1.default.createElement("th", null, "Runtime"),
+                react_1.default.createElement("th", null, "Status"),
+                react_1.default.createElement("th", null, "Total Tests"),
+                react_1.default.createElement("th", null, "Type Errors"),
+                react_1.default.createElement("th", null, "Lint Errors"))),
+        react_1.default.createElement("tbody", null, testStatuses.map((test) => (react_1.default.createElement("tr", { key: test.testName, "data-testid": `test-row-${test.testName}` },
+            react_1.default.createElement("td", null,
+                react_1.default.createElement("a", { href: `#/projects/${projectName}/tests/${encodeURIComponent(test.testName)}/${test.runTime}` }, test.testName)),
+            react_1.default.createElement("td", null,
+                react_1.default.createElement(react_bootstrap_1.Badge, { bg: "secondary", className: "ms-2" }, test.runTime)),
+            react_1.default.createElement("td", null,
+                react_1.default.createElement(TestStatusBadge_1.TestStatusBadge, { testName: test.testName, testsExist: test.testsExist, runTimeErrors: test.runTimeErrors, typeErrors: test.typeErrors, staticErrors: test.staticErrors })),
+            react_1.default.createElement("td", null, test.runTimeTests >= 0 ? test.runTimeTests : "N/A"),
+            react_1.default.createElement("td", null,
+                react_1.default.createElement("a", { href: `#/projects/${projectName}/tests/${encodeURIComponent(test.testName)}/${test.runTime}#types` }, test.typeErrors > 0 ? `❌ ${test.typeErrors}` : "✅")),
+            react_1.default.createElement("td", null,
+                react_1.default.createElement("a", { href: `#/projects/${projectName}/tests/${encodeURIComponent(test.testName)}/${test.runTime}#lint` }, test.staticErrors > 0 ? `❌ ${test.staticErrors}` : "✅"))))))));
+};
+exports.TestTable = TestTable;

package/dist/common/src/components/pure/ToastNotification.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 });
+exports.ToastNotification = void 0;
+const react_1 = __importDefault(require("react"));
+const react_bootstrap_1 = require("react-bootstrap");
+const ToastNotification = ({ showToast, setShowToast, toastVariant, toastMessage }) => (react_1.default.createElement(react_bootstrap_1.ToastContainer, { position: "top-end", className: "p-3" },
+    react_1.default.createElement(react_bootstrap_1.Toast, { show: showToast, onClose: () => setShowToast(false), delay: 3000, autohide: true, bg: toastVariant },
+        react_1.default.createElement(react_bootstrap_1.Toast.Header, null,
+            react_1.default.createElement("strong", { className: "me-auto" }, "Command Status")),
+        react_1.default.createElement(react_bootstrap_1.Toast.Body, { className: "text-white" }, toastMessage))));
+exports.ToastNotification = ToastNotification;

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

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserProfile = void 0;
+const react_1 = __importDefault(require("react"));
+const react_bootstrap_1 = require("react-bootstrap");
+const GitHubAuthService_1 = require("../../services/GitHubAuthService");
+const UserProfile = () => {
+    const user = GitHubAuthService_1.githubAuthService.userInfo;
+    if (!GitHubAuthService_1.githubAuthService.isAuthenticated || !user) {
+        return null;
+    }
+    const handleLogout = () => {
+        GitHubAuthService_1.githubAuthService.logout();
+    };
+    return (react_1.default.createElement(react_bootstrap_1.Dropdown, { align: "end" },
+        react_1.default.createElement(react_bootstrap_1.Dropdown.Toggle, { variant: "outline-light", id: "user-profile-dropdown", className: "d-flex align-items-center" },
+            react_1.default.createElement(react_bootstrap_1.Image, { src: user.avatar_url, roundedCircle: true, width: "32", height: "32", className: "me-2" }),
+            user.login),
+        react_1.default.createElement(react_bootstrap_1.Dropdown.Menu, null,
+            react_1.default.createElement(react_bootstrap_1.Dropdown.Item, { href: `https://github.com/${user.login}`, target: "_blank" }, "View on GitHub"),
+            react_1.default.createElement(react_bootstrap_1.Dropdown.Divider, null),
+            react_1.default.createElement(react_bootstrap_1.Dropdown.Item, { onClick: handleLogout }, "Sign out"))));
+};
+exports.UserProfile = UserProfile;

package/dist/common/src/components/stateful/AuthCallbackPage.js

@@ -0,0 +1,51 @@
+"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.AuthCallbackPage = void 0;
+const react_1 = __importStar(require("react"));
+const react_bootstrap_1 = require("react-bootstrap");
+const AuthCallbackPage = () => {
+    (0, react_1.useEffect)(() => {
+        // This page is only used in the popup window
+        // The actual authentication handling is done via the message listener in App.tsx
+        // This component just shows a loading spinner and will be closed automatically
+    }, []);
+    return (react_1.default.createElement(react_bootstrap_1.Container, { className: "d-flex justify-content-center align-items-center", style: { minHeight: '50vh' } },
+        react_1.default.createElement("div", { className: "text-center" },
+            react_1.default.createElement(react_bootstrap_1.Spinner, { animation: "border", role: "status", className: "mb-3" },
+                react_1.default.createElement("span", { className: "visually-hidden" }, "Authenticating...")),
+            react_1.default.createElement("h4", null, "Completing GitHub authentication..."))));
+};
+exports.AuthCallbackPage = AuthCallbackPage;

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

@@ -34,6 +34,7 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FeaturesReporter = void 0;
+/* eslint-disable @typescript-eslint/no-explicit-any */
 const react_1 = __importStar(require("react"));
 const FeaturesReporterView_1 = require("../pure/FeaturesReporterView");
 const features_1 = require("../../types/features");
@@ -42,7 +43,7 @@ const FeaturesReporter = () => {
     (0, react_1.useEffect)(() => {
         const fetchProjects = async () => {
             try {
-                const response = await fetch('/projects.json');
+                const response = await fetch('projects.json');
                 if (!response.ok)
                     throw new Error('Failed to fetch projects');
                 const projectNames = await response.json();

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

@@ -1,40 +1,59 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FileTree = void 0;
-const react_1 = __importDefault(require("react"));
-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_1.default.createElement("div", { style: fileTreeStyle }, Object.entries(fileGroups).map(([dir, dirFiles]) => (react_1.default.createElement("div", { key: dir, style: directoryStyle },
-        react_1.default.createElement("div", { style: directoryNameStyle }, dir || '/'),
-        dirFiles.map(file => (react_1.default.createElement("div", { key: file.path, style: activeFile === file.path ? activeFileStyle : fileStyle, onClick: () => onSelect(file.path) }, file.path.split('/').pop()))))))));
-};
-exports.FileTree = FileTree;
+// import React from 'react';
+// import { FileType } from './TextEditorPage';
+// type FileTreeProps = {
+//   files: FileType[];
+//   onSelect: (path: string) => void;
+//   activeFile: string | null;
+// };
+// export const FileTree = ({ files, onSelect, activeFile }: FileTreeProps) => {
+//   // 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;
+//   }, {} as Record<string, FileType[]>);
+//   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 = {
+//     ...fileStyle,
+//     backgroundColor: '#e0e0e0',
+//     fontWeight: 'bold'
+//   };
+//   return (
+//     <div style={fileTreeStyle}>
+//       {Object.entries(fileGroups).map(([dir, dirFiles]) => (
+//         <div key={dir} style={directoryStyle}>
+//           <div style={directoryNameStyle}>{dir || '/'}</div>
+//           {dirFiles.map(file => (
+//             <div 
+//               key={file.path}
+//               style={activeFile === file.path ? activeFileStyle : fileStyle}
+//               onClick={() => onSelect(file.path)}
+//             >
+//               {file.path.split('/').pop()}
+//             </div>
+//           ))}
+//         </div>
+//       ))}
+//     </div>
+//   );
+// };

package/dist/common/src/components/stateful/GitIntegrationPage.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GitIntegrationPage = void 0;
+const react_1 = __importDefault(require("react"));
+const GitIntegrationView_1 = require("../pure/GitIntegrationView");
+const GitIntegrationPage = () => {
+    return (react_1.default.createElement(GitIntegrationView_1.GitIntegrationView, null));
+};
+exports.GitIntegrationPage = GitIntegrationPage;

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

@@ -37,22 +37,16 @@ exports.ProcessManagerPage = void 0;
 const react_1 = __importStar(require("react"));
 const react_router_dom_1 = require("react-router-dom");
 const ProcessManagerView_1 = require("../pure/ProcessManagerView");
+const App_1 = require("../../App");
 const ProcessManagerPage = () => {
     const [processes, setProcesses] = (0, react_1.useState)([]);
-    const [ws, setWs] = (0, react_1.useState)(null);
+    const { ws } = (0, App_1.useWebSocket)();
     const [loading, setLoading] = (0, react_1.useState)(false);
     const navigate = (0, react_router_dom_1.useNavigate)();
-    // Connect to WebSocket
+    // Handle WebSocket messages
     (0, react_1.useEffect)(() => {
-        const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-        const wsUrl = `${wsProtocol}//${window.location.host}`;
-        const websocket = new WebSocket(wsUrl);
-        setWs(websocket);
-        // Request current processes when connected
-        websocket.onopen = () => {
-            setLoading(true);
-            websocket.send(JSON.stringify({ type: 'getRunningProcesses' }));
-        };
+        if (!ws)
+            return;
         const handleMessage = (event) => {
             try {
                 const data = JSON.parse(event.data);
@@ -82,12 +76,16 @@ const ProcessManagerPage = () => {
                 setLoading(false);
             }
         };
-        websocket.addEventListener('message', handleMessage);
+        ws.addEventListener('message', handleMessage);
+        // Request current processes when connected
+        if (ws.readyState === WebSocket.OPEN) {
+            setLoading(true);
+            ws.send(JSON.stringify({ type: 'getRunningProcesses' }));
+        }
         return () => {
-            websocket.removeEventListener('message', handleMessage);
-            websocket.close();
+            ws.removeEventListener('message', handleMessage);
         };
-    }, []);
+    }, [ws]);
     const handleRefresh = (0, react_1.useCallback)(() => {
         if (ws && ws.readyState === WebSocket.OPEN) {
             setLoading(true);

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

@@ -39,6 +39,7 @@ exports.ProjectPage = void 0;
 const react_1 = __importStar(require("react"));
 const react_router_dom_1 = require("react-router-dom");
 const ProjectPageView_1 = require("../pure/ProjectPageView");
+const api_1 = require("../../utils/api");
 const ProjectPage = () => {
     const [summary, setSummary] = (0, react_1.useState)(null);
     const [nodeLogs, setNodeLogs] = (0, react_1.useState)(null);
@@ -68,11 +69,11 @@ const ProjectPage = () => {
         const fetchData = async () => {
             try {
                 const [summaryRes, nodeRes, webRes, pureRes, configRes] = await Promise.all([
-                    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`)
+                    fetch((0, api_1.summaryDotJson)(name)),
+                    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() : {},

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

@@ -1,4 +1,6 @@
 "use strict";
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -34,10 +36,11 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProjectsPage = void 0;
-/* eslint-disable @typescript-eslint/no-explicit-any */
 const react_1 = __importStar(require("react"));
 const react_router_dom_1 = require("react-router-dom");
 const ProjectsPageView_1 = require("../pure/ProjectsPageView");
+const api_1 = require("../../utils/api");
+const App_1 = require("../../App");
 const ProjectsPage = () => {
     const [projects, setProjects] = (0, react_1.useState)([]);
     const [summaries, setSummaries] = (0, react_1.useState)({});
@@ -45,14 +48,11 @@ const ProjectsPage = () => {
     const [error, setError] = (0, react_1.useState)(null);
     const [configs, setConfigs] = (0, react_1.useState)({});
     const navigate = (0, react_router_dom_1.useNavigate)();
-    const [ws, setWs] = (0, react_1.useState)(null);
+    const { ws } = (0, App_1.useWebSocket)();
     (0, react_1.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) => {
+        if (!ws)
+            return;
+        const handleMessage = (event) => {
             try {
                 const data = JSON.parse(event.data);
                 if (data.type === 'summaryUpdate') {
@@ -64,26 +64,24 @@ const ProjectsPage = () => {
                 console.error('Error parsing WebSocket message:', error);
             }
         };
-        websocket.onerror = (error) => {
-            console.error('WebSocket error:', error);
-        };
+        ws.addEventListener('message', handleMessage);
         return () => {
-            websocket.close();
+            ws.removeEventListener('message', handleMessage);
         };
-    }, []);
+    }, [ws]);
     (0, react_1.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(`/metafiles/node/${name}.json`),
-                        fetch(`/metafiles/web/${name}.json`),
-                        fetch(`/metafiles/pure/${name}.json`),
-                        fetch(`/reports/${name}/config.json`),
+                        fetch((0, api_1.summaryDotJson)(name)),
+                        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/common/src/components/stateful/SingleProcessPage.js

@@ -37,18 +37,17 @@ exports.SingleProcessPage = void 0;
 const react_1 = __importStar(require("react"));
 const react_router_dom_1 = require("react-router-dom");
 const SingleProcessView_1 = require("../pure/SingleProcessView");
+const App_1 = require("../../App");
 const SingleProcessPage = () => {
     const [process, setProcess] = (0, react_1.useState)(null);
-    const [ws, setWs] = (0, react_1.useState)(null);
+    const ws = (0, App_1.useWebSocket)();
     const [loading, setLoading] = (0, react_1.useState)(true);
     const navigate = (0, react_router_dom_1.useNavigate)();
     const { processId } = (0, react_router_dom_1.useParams)();
-    // Connect to WebSocket
+    // Handle WebSocket messages
     (0, react_1.useEffect)(() => {
-        const wsProtocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-        const wsUrl = `${wsProtocol}//${window.location.host}`;
-        const websocket = new WebSocket(wsUrl);
-        setWs(websocket);
+        if (!ws)
+            return;
         // Set a timeout to handle cases where we don't get a response
         const timeoutId = setTimeout(() => {
             if (loading) {
@@ -57,22 +56,6 @@ const SingleProcessPage = () => {
                 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);
@@ -112,13 +95,20 @@ const SingleProcessPage = () => {
                 clearTimeout(timeoutId);
             }
         };
-        websocket.addEventListener("message", handleMessage);
+        ws.addEventListener("message", handleMessage);
+        // Request specific process when connected
+        if (ws.readyState === WebSocket.OPEN && processId) {
+            setLoading(true);
+            ws.send(JSON.stringify({
+                type: "getProcess",
+                processId,
+            }));
+        }
         return () => {
-            websocket.removeEventListener("message", handleMessage);
-            websocket.close();
+            ws.removeEventListener("message", handleMessage);
             clearTimeout(timeoutId);
         };
-    }, [processId]);
+    }, [ws, processId]);
     // Try to find the process in the global state if WebSocket doesn't respond
     (0, react_1.useEffect)(() => {
         // This is a fallback - in a real implementation, you'd want to get this from a global state