testeranto 0.203.0 → 0.205.0

package/dist/common/src/app/frontend/components/pure/ProjectPageView.test/implementation.js

@@ -0,0 +1,185 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.implementation = void 0;
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const chai_1 = require("chai");
+exports.implementation = {
+    suites: {
+        Default: "Project Page View Tests",
+    },
+    givens: {
+        Default: () => {
+            // Create a container to mount the component
+            const container = document.createElement('div');
+            document.body.appendChild(container);
+            return {
+                summary: {
+                    "test-suite-1": {
+                        testsExist: true,
+                        runTimeErrors: 0,
+                        typeErrors: 2,
+                        staticErrors: 1
+                    },
+                    "test-suite-2": {
+                        testsExist: true,
+                        runTimeErrors: 1,
+                        typeErrors: 0,
+                        staticErrors: 0
+                    }
+                },
+                nodeLogs: {
+                    errors: [],
+                    warnings: [
+                        {
+                            text: "Unused variable",
+                            location: { file: "src/file1.ts", line: 10 },
+                            pluginName: "typescript"
+                        }
+                    ],
+                    metafile: {
+                        inputs: {
+                            "src/file1.ts": { bytes: 1024 },
+                            "src/file2.ts": { bytes: 2048 }
+                        },
+                        outputs: {
+                            "dist/file1.js": { bytes: 1536, entryPoint: true },
+                            "dist/file2.js": { bytes: 2560 }
+                        }
+                    }
+                },
+                webLogs: {
+                    errors: [],
+                    warnings: [],
+                    metafile: {
+                        inputs: {
+                            "src/file1.ts": { bytes: 1024 },
+                            "src/file2.ts": { bytes: 2048 }
+                        },
+                        outputs: {
+                            "dist/file1.js": { bytes: 1536, entryPoint: true },
+                            "dist/file2.js": { bytes: 2560 }
+                        }
+                    }
+                },
+                pureLogs: {
+                    errors: [
+                        {
+                            text: "Syntax error",
+                            location: { file: "src/file3.ts", line: 5 },
+                            pluginName: "typescript"
+                        }
+                    ],
+                    warnings: [],
+                    metafile: {
+                        inputs: {
+                            "src/file3.ts": { bytes: 512 },
+                            "src/file4.ts": { bytes: 768 }
+                        },
+                        outputs: {
+                            "dist/file3.js": { bytes: 1024, entryPoint: true },
+                            "dist/file4.js": { bytes: 1280 }
+                        }
+                    }
+                },
+                config: {
+                    tests: [
+                        ["test-suite-1", "node"],
+                        ["test-suite-2", "web"]
+                    ]
+                },
+                loading: false,
+                error: null,
+                projectName: "test-project",
+                activeTab: "tests",
+                setActiveTab: () => { },
+                route: "tests",
+                setRoute: () => { },
+                navigate: () => { },
+                // Add the required properties for ISelection
+                htmlElement: container,
+                reactElement: null,
+                domRoot: null
+            };
+        },
+        WithError: () => {
+            const container = document.createElement('div');
+            document.body.appendChild(container);
+            return {
+                summary: null,
+                nodeLogs: null,
+                webLogs: null,
+                pureLogs: null,
+                config: { tests: [] },
+                loading: false,
+                error: "Test error message",
+                projectName: "test-project",
+                activeTab: "tests",
+                setActiveTab: () => { },
+                route: "tests",
+                setRoute: () => { },
+                navigate: () => { },
+                // Add the required properties for ISelection
+                htmlElement: container,
+                reactElement: null,
+                domRoot: null
+            };
+        },
+    },
+    whens: {},
+    thens: {
+        hasContainerFluid: () => (state) => {
+            const htmlElement = state.htmlElement;
+            const container = htmlElement.querySelector('.container-fluid');
+            chai_1.assert.exists(container, 'Should have container-fluid div');
+            return state;
+        },
+        hasNavBar: () => (state) => {
+            const htmlElement = state.htmlElement;
+            const navBar = htmlElement.querySelector('nav.navbar');
+            chai_1.assert.exists(navBar, 'Should render NavBar component');
+            return state;
+        },
+        hasNavBarTitle: () => (state) => {
+            var _a;
+            const htmlElement = state.htmlElement;
+            const navBarTitle = (_a = htmlElement.querySelector('nav.navbar .navbar-brand')) === null || _a === void 0 ? void 0 : _a.textContent;
+            chai_1.assert.isNotEmpty(navBarTitle, 'NavBar should have title');
+            return state;
+        },
+        hasTestTable: () => (state) => {
+            const htmlElement = state.htmlElement;
+            const testTable = htmlElement.querySelector('table');
+            chai_1.assert.exists(testTable, 'Should render test table');
+            return state;
+        },
+        rendersTestSuite1: () => (state) => {
+            const htmlElement = state.htmlElement;
+            const testTable = htmlElement.querySelector('table');
+            const testNames = Array.from(testTable.querySelectorAll('tbody tr td:first-child'))
+                .map(el => el.textContent);
+            chai_1.assert.include(testNames, 'test-suite-1', 'Should render test-suite-1');
+            return state;
+        },
+        rendersTestSuite2: () => (state) => {
+            const htmlElement = state.htmlElement;
+            const testTable = htmlElement.querySelector('table');
+            const testNames = Array.from(testTable.querySelectorAll('tbody tr td:first-child'))
+                .map(el => el.textContent);
+            chai_1.assert.include(testNames, 'test-suite-2', 'Should render test-suite-2');
+            return state;
+        },
+        unhappyPath: () => (state) => {
+            const htmlElement = state.htmlElement;
+            const errorAlert = htmlElement.querySelector('.alert-danger');
+            chai_1.assert.exists(errorAlert, 'Should show error alert');
+            const errorText = errorAlert === null || errorAlert === void 0 ? void 0 : errorAlert.textContent;
+            chai_1.assert.include(errorText, 'Test error message', 'Should display error message');
+            return state;
+        },
+        takeScreenshot: (name) => async (state, pm) => {
+            const p = await pm.page();
+            await pm.customScreenShot({ path: name }, p);
+            return state;
+        },
+    },
+};

package/dist/common/src/app/frontend/components/pure/ProjectPageView.test/index.js

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

package/dist/common/src/app/frontend/components/pure/ProjectPageView.test/specification.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.specification = void 0;
+const specification = (Suite, Given, When, Then) => {
+    return [
+        Suite.Default("ProjectPageView Component Tests", {
+            basicRender: Given.Default([
+                "ProjectPageView should render",
+                "It should contain a container-fluid div",
+                "It should render the NavBar component",
+                "NavBar should display project title",
+                "It should render test results table",
+                "It should display test-suite-1 results",
+                "It should display test-suite-2 results",
+            ], [], [
+                Then.hasContainerFluid(),
+                Then.hasNavBar(),
+                Then.hasNavBarTitle(),
+                Then.hasTestTable(),
+                Then.rendersTestSuite1(),
+                Then.rendersTestSuite2(),
+                Then.takeScreenshot("happy-state.png"),
+            ]),
+            errorHandling: Given.WithError([
+                "ProjectPageView should handle errors",
+                "It should display error messages when present",
+                "It should capture screenshots of error state",
+            ], [], [Then.unhappyPath(), Then.takeScreenshot("error-state.png")]),
+        }),
+    ];
+};
+exports.specification = specification;

package/dist/common/src/app/frontend/components/pure/ProjectPageView.test/types.js

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

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

@@ -0,0 +1,72 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProjectsPageView = void 0;
+const react_1 = __importDefault(require("react"));
+const react_bootstrap_1 = require("react-bootstrap");
+const ProjectsPageView = ({ projects, summaries, configs, loading, error, navigate, }) => {
+    const getStatusIcon = (status) => {
+        switch (status) {
+            case "success":
+                return "✅";
+            case "failed":
+                return "❌";
+            case "warning":
+                return "⚠️";
+            default:
+                return "❓";
+        }
+    };
+    if (loading)
+        return react_1.default.createElement("div", null, "Loading projects...");
+    if (error)
+        return react_1.default.createElement(react_bootstrap_1.Alert, { variant: "danger" },
+            "Error: ",
+            error);
+    return (react_1.default.createElement("div", { className: "" },
+        react_1.default.createElement(react_bootstrap_1.Table, { striped: true, bordered: true, hover: true, responsive: true },
+            react_1.default.createElement("thead", null,
+                react_1.default.createElement("tr", null,
+                    react_1.default.createElement("th", null, "Project"),
+                    react_1.default.createElement("th", null, "Tests"),
+                    react_1.default.createElement("th", null, "Node"),
+                    react_1.default.createElement("th", null, "Web"),
+                    react_1.default.createElement("th", null, "Pure"))),
+            react_1.default.createElement("tbody", null, projects.map((project) => (react_1.default.createElement("tr", { key: project.name },
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement("a", { href: "#", onClick: (e) => {
+                            e.preventDefault();
+                            navigate(`/projects/${project.name}`);
+                        } }, project.name)),
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement("div", null, summaries[project.name] ? (Object.keys(summaries[project.name]).map((testName) => {
+                        var _a, _b, _c;
+                        const testData = summaries[project.name][testName];
+                        const runTime = ((_c = (_b = (_a = configs[project.name]) === null || _a === void 0 ? void 0 : _a.tests) === null || _b === void 0 ? void 0 : _b.find((t) => t[0] === testName)) === null || _c === void 0 ? void 0 : _c[1]) || "node";
+                        const hasRuntimeErrors = testData.runTimeErrors > 0;
+                        const hasStaticErrors = testData.typeErrors > 0 || testData.staticErrors > 0;
+                        return (react_1.default.createElement("div", { key: testName },
+                            react_1.default.createElement("a", { href: `#/projects/${project.name}/tests/${encodeURIComponent(testName)}/${runTime}` },
+                                hasRuntimeErrors
+                                    ? "❌ "
+                                    : hasStaticErrors
+                                        ? "⚠️ "
+                                        : "",
+                                testName.split("/").pop() || testName)));
+                    })) : (react_1.default.createElement("div", null, "Loading tests...")))),
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement("a", { href: `#/projects/${project.name}#node` },
+                        getStatusIcon(project.nodeStatus),
+                        " Node build logs")),
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement("a", { href: `#/projects/${project.name}#web` },
+                        getStatusIcon(project.webStatus),
+                        " Web build logs")),
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement("a", { href: `#/projects/${project.name}#pure` },
+                        getStatusIcon(project.pureStatus),
+                        " Pure build logs")))))))));
+};
+exports.ProjectsPageView = ProjectsPageView;

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

@@ -0,0 +1,122 @@
+"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.Settings = void 0;
+const react_1 = __importStar(require("react"));
+const react_bootstrap_1 = require("react-bootstrap");
+const GitHubLoginButton_1 = require("./GitHubLoginButton");
+const App_1 = require("../../App");
+const GitHubAuthService_1 = require("../../GitHubAuthService");
+const Settings = () => {
+    const [theme, setTheme] = (0, react_1.useState)("auto");
+    const { tutorialMode, setTutorialMode } = (0, App_1.useTutorialMode)();
+    const { isAuthenticated, logout } = (0, App_1.useAuth)();
+    (0, react_1.useEffect)(() => {
+        // Load saved theme from localStorage
+        const savedTheme = localStorage.getItem("theme");
+        if (savedTheme) {
+            setTheme(savedTheme);
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        // Apply theme when it changes
+        applyTheme(theme);
+        // Save to localStorage
+        localStorage.setItem("theme", theme);
+    }, [theme]);
+    const applyTheme = (selectedTheme) => {
+        const root = document.documentElement;
+        if (selectedTheme === "auto") {
+            // Use system preference
+            if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+                root.setAttribute("data-bs-theme", "dark");
+            }
+            else {
+                root.setAttribute("data-bs-theme", "light");
+            }
+        }
+        else {
+            root.setAttribute("data-bs-theme", selectedTheme);
+        }
+    };
+    const handleThemeChange = (event) => {
+        setTheme(event.target.value);
+    };
+    const handleTutorialModeChange = () => {
+        const newTutorialMode = !tutorialMode;
+        setTutorialMode(newTutorialMode);
+        // Save to localStorage
+        localStorage.setItem("tutorialMode", newTutorialMode.toString());
+    };
+    return (react_1.default.createElement(react_bootstrap_1.Container, null,
+        react_1.default.createElement(react_bootstrap_1.Row, null,
+            react_1.default.createElement(react_bootstrap_1.Col, { md: 8, lg: 6 },
+                react_1.default.createElement(react_bootstrap_1.Card, null,
+                    react_1.default.createElement(react_bootstrap_1.Card.Header, null,
+                        react_1.default.createElement("h5", { className: "mb-0" }, "Appearance")),
+                    react_1.default.createElement(react_bootstrap_1.Card.Body, null,
+                        react_1.default.createElement(react_bootstrap_1.Form, null,
+                            react_1.default.createElement(react_bootstrap_1.Form.Group, { className: "mb-4" },
+                                react_1.default.createElement("div", null,
+                                    react_1.default.createElement(react_bootstrap_1.Form.Check, { type: "radio", id: "theme-light", name: "theme", value: "light", label: "Light mode", checked: theme === "light", onChange: handleThemeChange }),
+                                    react_1.default.createElement(react_bootstrap_1.Form.Check, { type: "radio", id: "theme-dark", name: "theme", value: "dark", label: "Dark mode", checked: theme === "dark", onChange: handleThemeChange }),
+                                    react_1.default.createElement(react_bootstrap_1.Form.Check, { type: "radio", id: "theme-auto", name: "theme", value: "auto", label: "Auto mode. Use system setting", checked: theme === "auto", onChange: handleThemeChange }))),
+                            react_1.default.createElement(react_bootstrap_1.Form.Group, { className: "mb-4" },
+                                react_1.default.createElement(react_bootstrap_1.Form.Check, { type: "switch", id: "tutorial-mode", label: tutorialMode ? "Tutorial Mode: ON" : "Tutorial Mode: OFF", checked: tutorialMode, onChange: handleTutorialModeChange }),
+                                react_1.default.createElement(react_bootstrap_1.Form.Text, { className: "text-muted" }, "When enabled, helpful tooltips will appear throughout the app to guide you."))))))),
+        react_1.default.createElement(react_bootstrap_1.Row, { className: "mt-4" },
+            react_1.default.createElement(react_bootstrap_1.Col, { md: 8, lg: 6 },
+                react_1.default.createElement(react_bootstrap_1.Card, null,
+                    react_1.default.createElement(react_bootstrap_1.Card.Header, null,
+                        react_1.default.createElement("h5", { className: "mb-0" }, "GitHub Integration")),
+                    react_1.default.createElement(react_bootstrap_1.Card.Body, null, GitHubAuthService_1.githubAuthService.isConfigured() ? (isAuthenticated ? (react_1.default.createElement("div", null,
+                        react_1.default.createElement("p", null, "Connected to GitHub"),
+                        react_1.default.createElement("div", { className: "d-grid gap-2" },
+                            react_1.default.createElement(react_bootstrap_1.Button, { variant: "danger", onClick: logout }, "Sign Out from GitHub")))) : (react_1.default.createElement("div", null,
+                        react_1.default.createElement("p", null, "Connect your GitHub account to enable Git operations:"),
+                        react_1.default.createElement(GitHubLoginButton_1.GitHubLoginButton, null)))) : (react_1.default.createElement("div", null,
+                        react_1.default.createElement("p", { className: "text-danger" }, "GitHub integration is not configured."),
+                        react_1.default.createElement("p", null, "To enable GitHub authentication:"),
+                        react_1.default.createElement("ol", { className: "small" },
+                            react_1.default.createElement("li", null, "Create a GitHub OAuth App at https://github.com/settings/developers"),
+                            react_1.default.createElement("li", null,
+                                "Set Authorization callback URL to:",
+                                " ",
+                                window.location.origin,
+                                "/auth/github/callback"),
+                            react_1.default.createElement("li", null, "Update the clientId in testeranto.config.ts"),
+                            react_1.default.createElement("li", null, "Restart the development server"))))))))));
+};
+exports.Settings = Settings;

package/dist/common/src/app/frontend/components/pure/Settings.test.js

@@ -0,0 +1,30 @@
+"use strict";
+// import React from 'react';
+// import { render, screen } from '@testing-library/react';
+// import { Settings } from './Settings';
+// // Mock the tutorial mode context
+// jest.mock('../../App', () => ({
+//   useTutorialMode: () => ({
+//     tutorialMode: false,
+//     setTutorialMode: jest.fn()
+//   })
+// }));
+// test('renders settings page', () => {
+//   render(<Settings />);
+//   const themeLabel = screen.getByText(/Theme/i);
+//   expect(themeLabel).toBeInTheDocument();
+// });
+// test('renders theme options', () => {
+//   render(<Settings />);
+//   const lightModeOption = screen.getByLabelText(/Light Mode/i);
+//   const darkModeOption = screen.getByLabelText(/Dark Mode/i);
+//   const autoModeOption = screen.getByLabelText(/Auto/i);
+//   expect(lightModeOption).toBeInTheDocument();
+//   expect(darkModeOption).toBeInTheDocument();
+//   expect(autoModeOption).toBeInTheDocument();
+// });
+// test('renders tutorial mode switch', () => {
+//   render(<Settings />);
+//   const tutorialModeSwitch = screen.getByLabelText(/Tutorial Mode: OFF/i);
+//   expect(tutorialModeSwitch).toBeInTheDocument();
+// });

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

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SettingsButton = void 0;
+const react_1 = __importDefault(require("react"));
+const react_bootstrap_1 = require("react-bootstrap");
+const react_router_dom_1 = require("react-router-dom");
+const SettingsButton = () => {
+    return (react_1.default.createElement(react_bootstrap_1.Nav.Link, { as: react_router_dom_1.NavLink, to: "/settings" }, "Settings"));
+};
+exports.SettingsButton = SettingsButton;

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

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SignIn = void 0;
+const react_1 = __importDefault(require("react"));
+const react_bootstrap_1 = require("react-bootstrap");
+const GitHubLoginButton_1 = require("./GitHubLoginButton");
+const GitHubAuthService_1 = require("../../GitHubAuthService");
+const SignIn = () => {
+    return (react_1.default.createElement(react_bootstrap_1.Container, { className: "d-flex align-items-center justify-content-center min-vh-100" },
+        react_1.default.createElement(react_bootstrap_1.Row, null,
+            react_1.default.createElement(react_bootstrap_1.Col, { md: 12 },
+                react_1.default.createElement(react_bootstrap_1.Card, null,
+                    react_1.default.createElement(react_bootstrap_1.Card.Header, { className: "text-center" },
+                        react_1.default.createElement("h3", { className: "mb-0" }, "Sign In")),
+                    react_1.default.createElement(react_bootstrap_1.Card.Body, { className: "text-center" }, GitHubAuthService_1.githubAuthService.isConfigured() ? (react_1.default.createElement(GitHubLoginButton_1.GitHubLoginButton, null)) : (react_1.default.createElement("div", null,
+                        react_1.default.createElement("p", { className: "text-danger" }, "GitHub authentication is not configured"),
+                        react_1.default.createElement("p", null, "Please contact the administrator")))))))));
+};
+exports.SignIn = SignIn;

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

@@ -0,0 +1,126 @@
+"use strict";
+// import React, { useEffect, useState, useCallback, useMemo } from 'react';
+// import { Badge, Alert } from 'react-bootstrap';
+// import { Process } from './ProcessManagerView';
+// import { useWebSocket } from '../../App';
+// import { ProcessSidebar } from './ProcessSidebar';
+// import { ProcessLogs } from './ProcessLogs';
+// import { ProcessInput } from './ProcessInput';
+// interface SingleProcessViewProps {
+//   process: Process | null;
+//   onBack: () => void;
+//   loading: boolean;
+//   onKillProcess?: (processId: string) => void;
+// }
+// export const SingleProcessView: React.FC<SingleProcessViewProps> = ({
+//   process,
+//   loading,
+// }) => {
+//   const ws = useWebSocket();
+//   const [inputValue, setInputValue] = useState('');
+//   // Memoized derived state
+//   const isRunning = useMemo(() => process?.status === 'running', [process?.status]);
+//   const webSocketStatus = useMemo(() => {
+//     const currentWs = ws?.ws;
+//     if (!currentWs) return 'disconnected';
+//     switch (currentWs.readyState) {
+//       case WebSocket.CONNECTING: return 'connecting';
+//       case WebSocket.OPEN: return 'connected';
+//       case WebSocket.CLOSING: return 'closing';
+//       case WebSocket.CLOSED: return 'disconnected';
+//       default: return 'unknown';
+//     }
+//   }, [ws?.ws?.readyState]);
+//   // Handle user input
+//   const handleInput = useCallback((data: string) => {
+//     const currentWs = ws?.ws;
+//     console.log('handleInput called with:', {
+//       data,
+//       hasWs: !!currentWs,
+//       wsReadyState: currentWs?.readyState,
+//       processId: process?.processId,
+//       processStatus: process?.status
+//     });
+//     if (currentWs && currentWs.readyState === WebSocket.OPEN && process?.status === 'running') {
+//       console.log('Sending stdin:', data);
+//       const message = JSON.stringify({
+//         type: 'stdin',
+//         processId: process.processId,
+//         data: data
+//       });
+//       console.log('Sending message:', message);
+//       currentWs.send(message);
+//     } else {
+//       console.log('Cannot send stdin - conditions not met:', {
+//         wsExists: !!currentWs,
+//         wsReadyState: currentWs?.readyState,
+//         processStatus: process?.status,
+//         processId: process?.processId
+//       });
+//     }
+//   }, [ws?.ws, process?.processId, process?.status]);
+//   const handleInputSubmit = useCallback(() => {
+//     console.log('handleInputSubmit called, inputValue:', inputValue);
+//     if (inputValue.trim()) {
+//       console.log('Submitting input:', inputValue);
+//       handleInput(inputValue + '\n');
+//       setInputValue('');
+//     } else {
+//       console.log('Input value is empty or whitespace only');
+//     }
+//   }, [inputValue, handleInput]);
+//   const handleKeyPress = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
+//     console.log('Key pressed:', e.key);
+//     if (e.key === 'Enter') {
+//       console.log('Enter key detected, calling handleInputSubmit');
+//       handleInputSubmit();
+//       e.preventDefault();
+//     }
+//   }, [handleInputSubmit]);
+//   const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+//     console.log('Input changed:', e.target.value);
+//     setInputValue(e.target.value);
+//   }, []);
+//   // Render loading state
+//   if (loading) {
+//     return <div>Initializing terminal...</div>;
+//   }
+//   // Render process not found state
+//   if (!process) {
+//     return (
+//       <Alert variant="warning">
+//         Process not found or not running. The process may have completed.
+//       </Alert>
+//     );
+//   }
+//   return (
+//     <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+//       {/* Main content area */}
+//       <div style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
+//         {/* Sidebar */}
+//         <ProcessSidebar process={process} webSocketStatus={webSocketStatus} />
+//         {/* Logs area */}
+//         <ProcessLogs logs={process.logs} />
+//       </div>
+//       {/* Input area */}
+//       {isRunning && (
+//         <ProcessInput
+//           inputValue={inputValue}
+//           webSocketStatus={webSocketStatus}
+//           onInputChange={handleInputChange}
+//           onKeyPress={handleKeyPress}
+//           onSubmit={handleInputSubmit}
+//         />
+//       )}
+//       {/* Status alerts */}
+//       {!isRunning && (
+//         <Alert variant="secondary" className="m-3" style={{ flexShrink: 0 }}>
+//           <Alert.Heading className="h6">Read-only Mode</Alert.Heading>
+//           <small>
+//             This process is no longer running. You can view the output logs but cannot send input.
+//           </small>
+//         </Alert>
+//       )}
+//     </div>
+//   );
+// };