testeranto 0.203.0 → 0.205.0

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

@@ -0,0 +1,179 @@
+"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.HelpoChatDrawer = void 0;
+const react_1 = __importStar(require("react"));
+const useWebSocket_1 = require("../../useWebSocket");
+const HelpoChatDrawer = ({ isActive,
+// onToggle,
+ }) => {
+    const { ws, isConnected, sendMessage } = (0, useWebSocket_1.useWebSocket)();
+    const [messages, setMessages] = (0, react_1.useState)([]);
+    const [inputMessage, setInputMessage] = (0, react_1.useState)("");
+    const messagesEndRef = (0, react_1.useRef)(null);
+    // Scroll to bottom whenever messages change
+    (0, react_1.useEffect)(() => {
+        var _a;
+        (_a = messagesEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
+    }, [messages]);
+    // Handle incoming WebSocket messages and request initial chat history
+    (0, react_1.useEffect)(() => {
+        const handleWebSocketMessage = (event) => {
+            try {
+                const data = JSON.parse(event.data);
+                if (data.type === "chatMessage") {
+                    // Add individual message to the current state
+                    // This ensures the message is properly recorded in the server's history
+                    setMessages((prev) => [...prev, data.message]);
+                }
+                else if (data.type === "chatHistory") {
+                    // Replace the entire message list with the history from the server
+                    setMessages(data.messages || []);
+                }
+            }
+            catch (error) {
+                console.error("Error parsing WebSocket message:", error);
+            }
+        };
+        if (ws) {
+            ws.addEventListener("message", handleWebSocketMessage);
+            // Request the initial chat history when connected
+            if (isConnected) {
+                // Send a request for the chat history
+                // You might need to implement a specific message type for this
+                // For now, we'll use a generic message that the server can handle
+                sendMessage({
+                    type: "getChatHistory"
+                });
+            }
+            return () => {
+                ws.removeEventListener("message", handleWebSocketMessage);
+            };
+        }
+    }, [ws, isConnected, sendMessage]);
+    const handleSendMessage = () => {
+        if (inputMessage.trim()) {
+            // Add user message to local state immediately for better UX
+            // This will be replaced when the server sends the actual message
+            const tempUserMessage = {
+                type: "user",
+                content: inputMessage.trim(),
+                timestamp: new Date().toISOString(),
+            };
+            setMessages((prev) => [...prev, tempUserMessage]);
+            // Send message via WebSocket if connected
+            if (isConnected) {
+                try {
+                    sendMessage({
+                        type: "chatMessage",
+                        content: inputMessage.trim(),
+                    });
+                }
+                catch (error) {
+                    console.error("Failed to send message:", error);
+                }
+            }
+            else {
+                console.log("WebSocket not connected - message not sent to server");
+            }
+            setInputMessage("");
+        }
+    };
+    const handleKeyPress = (e) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            handleSendMessage();
+        }
+    };
+    return (react_1.default.createElement("div", { className: `gradient-typed-bdd-dsl d-flex flex-column border-end ${isActive ? "active" : "inactive"}`, style: {
+            width: isActive ? "380px" : "0px",
+            transition: "width 0.3s ease",
+            overflow: "hidden",
+            flexShrink: 0,
+            height: "100vh",
+        } },
+        react_1.default.createElement("div", { style: {
+                width: "380px",
+                height: "100%",
+                display: "flex",
+                flexDirection: "column",
+            } },
+            react_1.default.createElement("div", { style: {
+                    flex: 1,
+                    overflowY: "auto",
+                    padding: "1rem",
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "0.5rem",
+                } },
+                messages.length === 0 ? (react_1.default.createElement("div", { style: { textAlign: "center", color: "#666", marginTop: "2rem" } }, "Start a conversation with Helpo!")) : (messages.map((message, index) => (react_1.default.createElement("div", { key: index, style: {
+                        textAlign: message.type === "user" ? "right" : "left",
+                        marginBottom: "0.5rem",
+                    } },
+                    react_1.default.createElement("div", { style: {
+                            display: "inline-block",
+                            padding: "0.5rem 1rem",
+                            borderRadius: "1rem",
+                            backgroundColor: message.type === "user"
+                                ? "rgba(0, 123, 255, 0.1)"
+                                : "rgba(108, 117, 125, 0.1)",
+                            maxWidth: "80%",
+                            wordWrap: "break-word",
+                        } },
+                        react_1.default.createElement("strong", null,
+                            message.type === "user" ? "You" : "Helpo",
+                            ":"),
+                        react_1.default.createElement("br", null),
+                        message.content),
+                    react_1.default.createElement("div", { style: {
+                            fontSize: "0.75rem",
+                            color: "#666",
+                            marginTop: "0.25rem",
+                        } }, new Date(message.timestamp).toLocaleTimeString()))))),
+                react_1.default.createElement("div", { ref: messagesEndRef })),
+            react_1.default.createElement("div", { style: {
+                    padding: "1rem",
+                    borderTop: "1px solid rgba(128, 128, 128, 0.3)",
+                } },
+                react_1.default.createElement("div", { className: "input-group" },
+                    react_1.default.createElement("input", { type: "text", className: "form-control", placeholder: isConnected ? "Type your message..." : "Connecting...", value: inputMessage, onChange: (e) => setInputMessage(e.target.value), onKeyPress: handleKeyPress, disabled: !isConnected, style: {
+                            backgroundColor: "rgba(255, 255, 255, 0.2)",
+                            border: "1px solid rgba(128, 128, 128, 0.3)",
+                            color: "#333",
+                        } }),
+                    react_1.default.createElement("button", { className: "btn btn-primary", type: "button", onClick: handleSendMessage, disabled: !inputMessage.trim() || !isConnected }, "Send")),
+                !isConnected && (react_1.default.createElement("small", { className: "text-muted" }, "WebSocket disconnected. Chat unavailable."))))));
+};
+exports.HelpoChatDrawer = HelpoChatDrawer;

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

@@ -0,0 +1,73 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MagicRobotModal = void 0;
+const react_1 = __importDefault(require("react"));
+const react_bootstrap_1 = require("react-bootstrap");
+const useFs_1 = require("../../useFs");
+const MagicRobotModal = ({ customMessage, isWebSocketConnected, messageOption, navigate, projectName, runtime, setCustomMessage, setMessageOption, setShowAiderModal, setShowToast, setToastMessage, setToastVariant, showAiderModal, testName, }) => {
+    const fs = (0, useFs_1.useFs)();
+    const onclick = async () => {
+        try {
+            const promptPath = `testeranto/reports/${projectName}/${testName
+                .split(".")
+                .slice(0, -1)
+                .join(".")}/${runtime}/prompt.txt`;
+            let command = `aider --load ${promptPath}`;
+            if (messageOption === "default") {
+                const messagePath = `testeranto/reports/${projectName}/${testName
+                    .split(".")
+                    .slice(0, -1)
+                    .join(".")}/${runtime}/message.txt`;
+                command += ` --message-file ${messagePath}`;
+            }
+            else {
+                command += ` --message "${customMessage}"`;
+            }
+            // Send command to server via the centralized WebSocket
+            if (isWebSocketConnected) {
+                fs.send(JSON.stringify({
+                    type: "executeCommand",
+                    command: command,
+                }));
+                setToastMessage("Command sent to server");
+                setToastVariant("success");
+                setShowToast(true);
+                setShowAiderModal(false);
+                // Navigate to process manager page
+                setTimeout(() => {
+                    navigate("/processes");
+                }, 1000);
+            }
+            else {
+                setToastMessage("WebSocket connection not ready");
+                setToastVariant("danger");
+                setShowToast(true);
+            }
+        }
+        catch (err) {
+            console.error("WebSocket error:", err);
+            setToastMessage("Error preparing command");
+            setToastVariant("danger");
+            setShowToast(true);
+        }
+    };
+    return (react_1.default.createElement(react_bootstrap_1.Modal, { show: showAiderModal, onHide: () => setShowAiderModal(false), size: "lg", onShow: () => setMessageOption("default") },
+        react_1.default.createElement(react_bootstrap_1.Modal.Header, { closeButton: true },
+            react_1.default.createElement(react_bootstrap_1.Modal.Title, null, "Aider")),
+        react_1.default.createElement(react_bootstrap_1.Modal.Body, null,
+            react_1.default.createElement("div", { className: "mb-3" },
+                react_1.default.createElement("div", { className: "form-check" },
+                    react_1.default.createElement("input", { className: "form-check-input", type: "radio", name: "messageOption", id: "defaultMessage", value: "default", checked: messageOption === "default", onChange: () => setMessageOption("default") }),
+                    react_1.default.createElement("label", { className: "form-check-label", htmlFor: "defaultMessage" }, "Use default message.txt")),
+                react_1.default.createElement("div", { className: "form-check" },
+                    react_1.default.createElement("input", { className: "form-check-input", type: "radio", name: "messageOption", id: "customMessage", value: "custom", checked: messageOption === "custom", onChange: () => setMessageOption("custom") }),
+                    react_1.default.createElement("label", { className: "form-check-label", htmlFor: "customMessage" }, "Use custom message")),
+                messageOption === "custom" && (react_1.default.createElement("div", { className: "mt-2" },
+                    react_1.default.createElement("textarea", { className: "form-control", rows: 8, placeholder: "Enter your custom message", value: customMessage, onChange: (e) => setCustomMessage(e.target.value), style: { minHeight: "500px" } }))))),
+        react_1.default.createElement(react_bootstrap_1.Modal.Footer, null,
+            react_1.default.createElement(react_bootstrap_1.Button, { variant: "primary", onClick: onclick }, "Run Aider Command"))));
+};
+exports.MagicRobotModal = MagicRobotModal;

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

@@ -0,0 +1,86 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalContent = void 0;
+const react_1 = __importDefault(require("react"));
+const react_bootstrap_1 = require("react-bootstrap");
+const ThemeCard_1 = require("./ThemeCard");
+require("../../App.scss");
+const ModalContent = ({ theme, handleThemeChange, }) => (react_1.default.createElement(react_1.default.Fragment, null,
+    react_1.default.createElement(react_bootstrap_1.Modal.Header, { closeButton: true, className: "border-0" },
+        react_1.default.createElement(react_bootstrap_1.Modal.Title, { className: "d-flex align-items-center" },
+            react_1.default.createElement("i", { className: "bi bi-palette-fill me-2" }),
+            react_1.default.createElement("span", null, "Settings"))),
+    react_1.default.createElement("div", { className: "alert alert-warning mx-3 mt-2 mb-0" },
+        react_1.default.createElement("i", { className: "bi bi-exclamation-triangle-fill me-2" }),
+        react_1.default.createElement("strong", null, "Warning:"),
+        " Themes are an experimental feature. Only \"Business casual\" is fully supported at this time."),
+    react_1.default.createElement(react_bootstrap_1.Modal.Body, { className: "p-0" },
+        react_1.default.createElement("div", { className: "p-3" },
+            react_1.default.createElement("div", { className: "row g-3" },
+                react_1.default.createElement(ThemeCard_1.ThemeCard, { theme: theme, handleThemeChange: handleThemeChange, value: "system", title: "9 to 5", description: "Follows your OS theme", style: {
+                        background: "linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)",
+                        borderColor: "#adb5bd",
+                    } }),
+                react_1.default.createElement(ThemeCard_1.ThemeCard, { theme: theme, handleThemeChange: handleThemeChange, value: "light", title: "Business casual", description: "Clean & professional", style: {
+                        background: "linear-gradient(135deg, #ffffff 0%, #f1f3f5 100%)",
+                        borderColor: "#ced4da",
+                        color: "#212529",
+                        borderWidth: "2px",
+                    } }),
+                react_1.default.createElement(ThemeCard_1.ThemeCard, { theme: theme, handleThemeChange: handleThemeChange, value: "dark", title: "Business formal", description: "Premium & focused", style: {
+                        background: "linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)",
+                        borderColor: "#4ecdc4",
+                        color: "#f8f9fa",
+                        borderWidth: "2px",
+                    } }),
+                react_1.default.createElement(ThemeCard_1.ThemeCard, { theme: theme, handleThemeChange: handleThemeChange, value: "light-vibrant", title: "Office Party", description: "Colorful & fun", style: {
+                        background: "linear-gradient(135deg, #ff2d75 0%, #00e5ff 100%)",
+                        borderColor: "#ffeb3b",
+                        color: "#fff",
+                    } }),
+                react_1.default.createElement(ThemeCard_1.ThemeCard, { theme: theme, handleThemeChange: handleThemeChange, value: "dark-vibrant", title: "After Party", description: "Neon nightlife", style: {
+                        background: "linear-gradient(135deg, #16213e 0%, #e94560 100%)",
+                        borderColor: "#00e5ff",
+                        color: "#fff",
+                    } }),
+                react_1.default.createElement(ThemeCard_1.ThemeCard, { theme: theme, handleThemeChange: handleThemeChange, value: "sepia", title: "WFH", description: "Vintage warmth", style: {
+                        background: "linear-gradient(135deg, #f4ecd8 0%, #d0b88f 100%)",
+                        borderColor: "#8b6b4a",
+                        color: "#3a3226",
+                    } }),
+                react_1.default.createElement(ThemeCard_1.ThemeCard, { theme: theme, handleThemeChange: handleThemeChange, value: "light-grayscale", title: "Serious Business", description: "Simple & distraction-free", style: {
+                        background: "linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%)",
+                        borderColor: "#666",
+                        color: "#333",
+                        borderWidth: "2px",
+                    } }),
+                react_1.default.createElement(ThemeCard_1.ThemeCard, { theme: theme, handleThemeChange: handleThemeChange, value: "dark-grayscale", title: "Very Serious business", description: "Maximum readability", style: {
+                        background: "linear-gradient(135deg, #111 0%, #333 100%)",
+                        borderColor: "#ff6b6b",
+                        color: "#e0e0e0",
+                        borderWidth: "2px",
+                    } }),
+                react_1.default.createElement(ThemeCard_1.ThemeCard, { theme: theme, handleThemeChange: handleThemeChange, value: "daily", title: "Dreaming of PTO", description: "Sunrise, sunset", style: {
+                        background: "linear-gradient(135deg, #6eafff 0%, #f9fbf0 100%)",
+                        borderColor: "#f7d62e",
+                        color: "#00192d",
+                    } }),
+                react_1.default.createElement(ThemeCard_1.ThemeCard, { theme: theme, handleThemeChange: handleThemeChange, value: "protanopia", title: "Protanopia", description: "Red-blind mode", style: {
+                        background: "linear-gradient(135deg, #f8f9fa 0%, #e0e8ff 100%)",
+                        borderColor: "#3366cc",
+                        color: "#333",
+                    } }),
+                react_1.default.createElement(ThemeCard_1.ThemeCard, { theme: theme, handleThemeChange: handleThemeChange, value: "deuteranopia", title: "Deuteranopia", description: "Green-blind mode", style: {
+                        background: "linear-gradient(135deg, #f8f9fa 0%, #ffe0e0 100%)",
+                        borderColor: "#cc6633",
+                        color: "#333",
+                    } }),
+                react_1.default.createElement(ThemeCard_1.ThemeCard, { theme: theme, handleThemeChange: handleThemeChange, value: "tritanopia", title: "Tritanopia", description: "Blue-blind mode", style: {
+                        background: "linear-gradient(135deg, #f8f9fa 0%, #e0ffe0 100%)",
+                        borderColor: "#00aa66",
+                        color: "#333",
+                    } }))))));
+exports.ModalContent = ModalContent;

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.implementation = void 0;
+const chai_1 = require("chai");
+exports.implementation = {
+    suites: {
+        Default: "Modal Content Tests",
+    },
+    givens: {
+        Default: () => ({
+            theme: "light",
+            handleThemeChange: () => { },
+        }),
+    },
+    whens: {},
+    thens: {
+        hasModalHeader: () => (state) => {
+            var _a;
+            const header = (_a = state.htmlElement) === null || _a === void 0 ? void 0 : _a.querySelector('.modal-header');
+            chai_1.assert.exists(header, 'Should have Modal.Header');
+            return state;
+        },
+        hasThemeCards: () => (state) => {
+            var _a;
+            const themeCards = (_a = state.htmlElement) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.theme-card');
+            chai_1.assert.isAtLeast(themeCards === null || themeCards === void 0 ? void 0 : themeCards.length, 1, 'Should render ThemeCard components');
+            return state;
+        },
+        takeScreenshot: (name) => async (state, pm) => {
+            // For web tests, we can use the PM's screenshot capability
+            // The actual implementation will be handled by the test runner
+            return state;
+        },
+    },
+};

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

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const web_1 = __importDefault(require("testeranto-react/src/react-dom/component/web"));
+const implementation_1 = require("./implementation");
+const specification_1 = require("./specification");
+const ModalContent_1 = require("../ModalContent");
+const react_1 = __importDefault(require("react"));
+const client_1 = __importDefault(require("react-dom/client"));
+// import { ITestInterface } from "../../../CoreTypes";
+// import { IPM } from "../../../lib/types";
+const testAdapter = {
+    beforeAll: async (input, testResource, pm) => {
+        // The subject is the component itself, which we'll use to create instances
+        return ModalContent_1.ModalContent;
+    },
+    beforeEach: async (subject, initializer, testResource, initialValues, pm) => {
+        // Create a container and mount the component
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+        const props = initializer();
+        const root = client_1.default.createRoot(container);
+        const reactElement = react_1.default.createElement(subject, props);
+        root.render(reactElement);
+        // Wait for the component to render
+        await new Promise(resolve => setTimeout(resolve, 0));
+        return {
+            htmlElement: container,
+            reactElement: reactElement,
+            domRoot: root
+        };
+    },
+    andWhen: async (store, whenCB, testResource, pm) => {
+        return whenCB(store, pm);
+    },
+    butThen: async (store, thenCB, testResource, pm) => {
+        return thenCB(store, pm);
+    },
+    afterEach: async (store, key, pm) => {
+        // Cleanup
+        if (store.domRoot) {
+            store.domRoot.unmount();
+        }
+        if (store.htmlElement && store.htmlElement.parentNode) {
+            store.htmlElement.parentNode.removeChild(store.htmlElement);
+        }
+        return store;
+    },
+    afterAll: async (store, pm) => {
+        // No-op for now
+    },
+    assertThis: (assertion) => {
+        // The assertions are handled in the then implementations
+        // This can be a no-op or can wrap the assertion if needed
+        return assertion;
+    }
+};
+exports.default = (0, web_1.default)(ModalContent_1.ModalContent, specification_1.specification, implementation_1.implementation, testAdapter);

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.specification = void 0;
+const specification = (Suite, Given, When, Then) => {
+    return [
+        Suite.Default("ModalContent Component Tests", {
+            basicRender: Given.Default([
+                "ModalContent should render",
+                "It should contain a Modal.Header",
+                "It should render the ThemeCard components",
+            ], [], [
+                Then.hasModalHeader(undefined),
+                Then.hasThemeCards(undefined),
+                Then.takeScreenshot("modal-content.png"),
+            ]),
+        }),
+    ];
+};
+exports.specification = specification;

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

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavBar = void 0;
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const react_1 = __importDefault(require("react"));
+const react_bootstrap_1 = require("react-bootstrap");
+const react_router_dom_1 = require("react-router-dom");
+const NavBar = ({ title, backLink, navItems = [], rightContent, }) => {
+    const location = (0, react_router_dom_1.useLocation)();
+    return (react_1.default.createElement(react_bootstrap_1.Navbar, { bg: "light", expand: "lg", className: "mb-2", sticky: "top", expanded: false },
+        react_1.default.createElement(react_bootstrap_1.Container, { fluid: true },
+            backLink && (react_1.default.createElement(react_bootstrap_1.Nav.Link, { as: react_router_dom_1.Link, to: backLink, className: "me-2 fs-3 text-primary", style: {
+                    padding: '0.25rem 0.75rem',
+                    border: '2px solid var(--bs-primary)',
+                    borderRadius: '50%',
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    width: '2.5rem',
+                    height: '2.5rem'
+                }, title: "Go up one level" }, "\u2191")),
+            react_1.default.createElement(react_bootstrap_1.Navbar.Brand, { className: backLink ? 'ms-2' : '' }, title),
+            react_1.default.createElement(react_bootstrap_1.Navbar.Toggle, { "aria-controls": "basic-navbar-nav", style: { display: 'none' } }),
+            react_1.default.createElement(react_bootstrap_1.Navbar.Collapse, { id: "basic-navbar-nav" },
+                navItems.length > 0 && (react_1.default.createElement(react_bootstrap_1.Nav, { className: "me-auto" }, navItems.map((item, i) => {
+                    const className = [
+                        item.className,
+                        item.active ? 'text-primary fw-bold border-bottom border-2 border-primary' : '',
+                        typeof item.label === 'string' && item.label.includes('❌') ? 'text-danger fw-bold' : '',
+                        typeof item.label === 'string' && item.label.includes('✅') ? 'text-success fw-bold' : '',
+                        !item.active && typeof item.label !== 'string' ? 'text-secondary' : ''
+                    ].filter(Boolean).join(' ');
+                    return (react_1.default.createElement(react_bootstrap_1.Nav.Link, { key: i, as: item.to ? react_router_dom_1.Link : 'div', to: item.to, active: item.active, className: className, title: typeof item.label === 'string' ? item.label : undefined },
+                        item.icon && react_1.default.createElement("span", { className: "me-2" }, item.icon),
+                        item.label,
+                        item.badge && (react_1.default.createElement(react_bootstrap_1.Badge, { bg: item.badge.variant, className: "ms-2" }, item.badge.text))));
+                }))),
+                rightContent && (react_1.default.createElement(react_bootstrap_1.Nav, null, react_1.default.Children.map(rightContent, (child) => {
+                    return child;
+                })))))));
+};
+exports.NavBar = NavBar;

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

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProcessDetails = void 0;
+const react_1 = __importDefault(require("react"));
+const react_bootstrap_1 = require("react-bootstrap");
+const getStatusBadge = (process) => {
+    switch (process.status) {
+        case "running":
+            return react_1.default.createElement(react_bootstrap_1.Badge, { bg: "success" }, "Running");
+        case "exited":
+            return react_1.default.createElement(react_bootstrap_1.Badge, { bg: "secondary" },
+                "Exited (",
+                process.exitCode,
+                ")");
+        case "error":
+            return react_1.default.createElement(react_bootstrap_1.Badge, { bg: "danger" }, "Error");
+        default:
+            return react_1.default.createElement(react_bootstrap_1.Badge, { bg: "warning" }, "Unknown");
+    }
+};
+const ProcessDetails = ({ selectedProcess, onKillProcess, }) => {
+    if (!selectedProcess) {
+        return (react_1.default.createElement("div", { className: "text-center text-muted mt-5" },
+            react_1.default.createElement("i", null, "Select a process to view details")));
+    }
+    return (react_1.default.createElement("div", { className: "flex-grow-1 d-flex flex-column" },
+        react_1.default.createElement("div", { className: "d-flex align-items-center gap-2 mb-3 flex-wrap" },
+            react_1.default.createElement("div", null, getStatusBadge(selectedProcess)),
+            react_1.default.createElement("div", { className: "text-muted" }, selectedProcess.pid || "N/A"),
+            react_1.default.createElement("div", { className: "text-muted" }, new Date(selectedProcess.timestamp).toLocaleString()),
+            selectedProcess.status === "running" && onKillProcess && (react_1.default.createElement(react_bootstrap_1.Button, { variant: "danger", size: "sm", onClick: () => onKillProcess(selectedProcess.processId), className: "flex-grow-0 ms-auto" }, "\u23F9\uFE0F Stop")),
+            selectedProcess.exitCode !== undefined && (react_1.default.createElement("div", { className: "text-muted" }, selectedProcess.exitCode))),
+        selectedProcess.error && (react_1.default.createElement(react_bootstrap_1.Alert, { variant: "danger", className: "py-2 mb-3" }, selectedProcess.error)),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement("div", { className: "mb-1 small text-muted" }, "Command:"),
+            react_1.default.createElement("div", { className: "bg-dark text-light p-2 rounded", style: {
+                    fontFamily: 'Monaco, Menlo, "Ubuntu Mono", monospace',
+                    fontSize: "14px",
+                    lineHeight: "1.4",
+                    overflow: "auto",
+                    whiteSpace: "pre-wrap",
+                    wordBreak: "break-word",
+                    maxHeight: "200px"
+                } }, selectedProcess.command))));
+};
+exports.ProcessDetails = ProcessDetails;

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

@@ -0,0 +1,62 @@
+"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.ProcessInput = void 0;
+const react_1 = __importStar(require("react"));
+const ProcessInput = ({ inputValue, webSocketStatus, onInputChange, onKeyPress, onSubmit, }) => {
+    const inputRef = (0, react_1.useRef)(null);
+    const isConnected = webSocketStatus === 'connected';
+    const handleButtonClick = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+        onSubmit();
+        // Focus the input using ref
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [onSubmit]);
+    return (react_1.default.createElement("div", { className: "border-top bg-white p-3", style: { flexShrink: 0 } },
+        react_1.default.createElement("div", { className: "input-group" },
+            react_1.default.createElement("input", { ref: inputRef, type: "text", className: "form-control", placeholder: "Type input and press Enter...", value: inputValue, onChange: onInputChange, onKeyPress: onKeyPress, autoFocus: true, onClick: (e) => {
+                    e.stopPropagation();
+                    e.currentTarget.focus();
+                }, onFocus: (e) => {
+                    e.target.select();
+                }, style: { cursor: 'text' }, disabled: !isConnected }),
+            react_1.default.createElement("button", { className: "btn btn-primary", type: "button", onClick: handleButtonClick, disabled: !isConnected || !inputValue.trim() }, "Send")),
+        react_1.default.createElement("small", { className: "text-muted" },
+            "\uD83D\uDCA1 Press Enter to send input to the process",
+            !isConnected && ` (WebSocket is ${webSocketStatus})`)));
+};
+exports.ProcessInput = ProcessInput;