testeranto 0.200.0 → 0.202.0

package/dist/common/src/PM/metafileOutputs.js

@@ -0,0 +1,78 @@
+"use strict";
+// import { IRunTime } from "../Types";
+// import { IOutputs, filesHash } from "./utils";
+// import ansiC from "ansi-colors";
+// import fs from "fs";
+// export const metafileOutputs = async (platform: IRunTime) => {
+//   let metafilePath: string;
+//   if (platform === "python") {
+//     metafilePath = `./testeranto/metafiles/python/core.json`;
+//   } else {
+//     metafilePath = `./testeranto/metafiles/${platform}/${this.name}.json`;
+//   }
+//   // Check if the file exists
+//   if (!fs.existsSync(metafilePath)) {
+//     if (platform === "python") {
+//       console.log(
+//         ansiC.yellow(
+//           ansiC.inverse(`Pitono metafile not found yet: ${metafilePath}`)
+//         )
+//       );
+//     }
+//     return;
+//   }
+//   let metafile;
+//   try {
+//     const fileContent = fs.readFileSync(metafilePath).toString();
+//     const parsedData = JSON.parse(fileContent);
+//     // Handle different metafile structures
+//     if (platform === "python") {
+//       // Pitono metafile might be the entire content or have a different structure
+//       metafile = parsedData.metafile || parsedData;
+//     } else {
+//       metafile = parsedData.metafile;
+//     }
+//     if (!metafile) {
+//       console.log(
+//         ansiC.yellow(ansiC.inverse(`No metafile found in ${metafilePath}`))
+//       );
+//       return;
+//     }
+//   } catch (error) {
+//     console.error(`Error reading metafile at ${metafilePath}:`, error);
+//     return;
+//   }
+//   const outputs: IOutputs = metafile.outputs;
+//   Object.keys(outputs).forEach(async (k) => {
+//     const pattern = `testeranto/bundles/${platform}/${this.name}/${this.configs.src}`;
+//     if (!k.startsWith(pattern)) {
+//       return false;
+//     }
+//     const addableFiles = Object.keys(outputs[k].inputs).filter((i) => {
+//       if (!fs.existsSync(i)) return false;
+//       if (i.startsWith("node_modules")) return false;
+//       if (i.startsWith("./node_modules")) return false;
+//       return true;
+//     });
+//     const f = `${k.split(".").slice(0, -1).join(".")}/`;
+//     if (!fs.existsSync(f)) {
+//       fs.mkdirSync(f);
+//     }
+//     const entrypoint = outputs[k].entryPoint;
+//     if (entrypoint) {
+//       const changeDigest = await filesHash(addableFiles);
+//       if (changeDigest === changes[entrypoint]) {
+//         // skip
+//       } else {
+//         changes[entrypoint] = changeDigest;
+//         this.tscCheck({
+//           platform,
+//           addableFiles,
+//           entrypoint: entrypoint,
+//         });
+//         this.eslintCheck(entrypoint, platform, addableFiles);
+//         this.makePrompt(entrypoint, addableFiles, platform);
+//       }
+//     }
+//   });
+// };

package/dist/common/src/PM/node.js

@@ -44,12 +44,6 @@ class PM_Node extends _1.PM {
             this.client.write(JSON.stringify([command, ...argz, key]));
         });
     }
-    async launchSideCar(n) {
-        return this.send("launchSideCar", n, this.testResourceConfiguration.name);
-    }
-    stopSideCar(n) {
-        return this.send("stopSideCar", n, this.testResourceConfiguration.name);
-    }
     async pages() {
         return this.send("pages", ...arguments);
     }

package/dist/common/src/PM/pure.js

@@ -9,9 +9,6 @@ class PM_Pure extends _1.PM {
     getInnerHtml(selector, page) {
         throw new Error("pure.ts getInnerHtml not implemented");
     }
-    stopSideCar(uid) {
-        throw new Error("pure.ts stopSideCar not implemented");
-    }
     constructor(t) {
         super();
         this.server = {};
@@ -28,10 +25,6 @@ class PM_Pure extends _1.PM {
     }
     async createWriteStream(filepath, testName) {
         throw new Error("pure.ts createWriteStream not implemented");
-        return "";
-    }
-    launchSideCar(n) {
-        return globalThis["launchSideCar"](n, this.testResourceConfiguration.name);
     }
     pages() {
         return globalThis["pages"]();
@@ -94,7 +87,6 @@ class PM_Pure extends _1.PM {
     writeFileSync() {
         return Promise.resolve(true);
     }
-    /////////////////////////////////////////////////////
     end(uid) {
         return globalThis["end"](uid);
     }

package/dist/common/src/PM/types.js

@@ -1 +1,2 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/common/src/PM/utils.js

@@ -0,0 +1,210 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.puppeteerConfigs = exports.filesHash = exports.statusMessagePretty = void 0;
+exports.runtimeLogs = runtimeLogs;
+exports.createLogStreams = createLogStreams;
+exports.fileHash = fileHash;
+exports.writeFileAndCreateDir = writeFileAndCreateDir;
+exports.isValidUrl = isValidUrl;
+exports.pollForFile = pollForFile;
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const ansi_colors_1 = __importDefault(require("ansi-colors"));
+const path_1 = __importDefault(require("path"));
+const fs_1 = __importDefault(require("fs"));
+const node_crypto_1 = __importDefault(require("node:crypto"));
+function runtimeLogs(runtime, reportDest) {
+    const safeDest = reportDest || `testeranto/reports/default_${Date.now()}`;
+    try {
+        if (!fs_1.default.existsSync(safeDest)) {
+            fs_1.default.mkdirSync(safeDest, { recursive: true });
+        }
+        if (runtime === "node") {
+            return {
+                stdout: fs_1.default.createWriteStream(`${safeDest}/stdout.log`),
+                stderr: fs_1.default.createWriteStream(`${safeDest}/stderr.log`),
+                exit: fs_1.default.createWriteStream(`${safeDest}/exit.log`),
+            };
+        }
+        else if (runtime === "web") {
+            return {
+                info: fs_1.default.createWriteStream(`${safeDest}/info.log`),
+                warn: fs_1.default.createWriteStream(`${safeDest}/warn.log`),
+                error: fs_1.default.createWriteStream(`${safeDest}/error.log`),
+                debug: fs_1.default.createWriteStream(`${safeDest}/debug.log`),
+                exit: fs_1.default.createWriteStream(`${safeDest}/exit.log`),
+            };
+        }
+        else if (runtime === "pure") {
+            return {
+                exit: fs_1.default.createWriteStream(`${safeDest}/exit.log`),
+            };
+        }
+        else if (runtime === "pitono") {
+            return {
+                stdout: fs_1.default.createWriteStream(`${safeDest}/stdout.log`),
+                stderr: fs_1.default.createWriteStream(`${safeDest}/stderr.log`),
+                exit: fs_1.default.createWriteStream(`${safeDest}/exit.log`),
+            };
+        }
+        else {
+            throw `unknown runtime: ${runtime}`;
+        }
+    }
+    catch (e) {
+        console.error(`Failed to create log streams in ${safeDest}:`, e);
+        throw e;
+    }
+}
+function createLogStreams(reportDest, runtime) {
+    // Create directory if it doesn't exist
+    if (!fs_1.default.existsSync(reportDest)) {
+        fs_1.default.mkdirSync(reportDest, { recursive: true });
+    }
+    // const streams = {
+    //   exit: fs.createWriteStream(`${reportDest}/exit.log`),
+    const safeDest = reportDest || `testeranto/reports/default_${Date.now()}`;
+    try {
+        if (!fs_1.default.existsSync(safeDest)) {
+            fs_1.default.mkdirSync(safeDest, { recursive: true });
+        }
+        const streams = runtimeLogs(runtime, safeDest);
+        // const streams = {
+        //   exit: fs.createWriteStream(`${safeDest}/exit.log`),
+        //   ...(runtime === "node" || runtime === "pure"
+        //     ? {
+        //         stdout: fs.createWriteStream(`${safeDest}/stdout.log`),
+        //         stderr: fs.createWriteStream(`${safeDest}/stderr.log`),
+        //       }
+        //     : {
+        //         info: fs.createWriteStream(`${safeDest}/info.log`),
+        //         warn: fs.createWriteStream(`${safeDest}/warn.log`),
+        //         error: fs.createWriteStream(`${safeDest}/error.log`),
+        //         debug: fs.createWriteStream(`${safeDest}/debug.log`),
+        //       }),
+        // };
+        return Object.assign(Object.assign({}, streams), { closeAll: () => {
+                Object.values(streams).forEach((stream) => !stream.closed && stream.close());
+            }, writeExitCode: (code, error) => {
+                if (error) {
+                    streams.exit.write(`Error: ${error.message}\n`);
+                    if (error.stack) {
+                        streams.exit.write(`Stack Trace:\n${error.stack}\n`);
+                    }
+                }
+                streams.exit.write(`${code}\n`);
+            }, exit: streams.exit });
+    }
+    catch (e) {
+        console.error(`Failed to create log streams in ${safeDest}:`, e);
+        throw e;
+    }
+}
+async function fileHash(filePath, algorithm = "md5") {
+    return new Promise((resolve, reject) => {
+        const hash = node_crypto_1.default.createHash(algorithm);
+        const fileStream = fs_1.default.createReadStream(filePath);
+        fileStream.on("data", (data) => {
+            hash.update(data);
+        });
+        fileStream.on("end", () => {
+            const fileHash = hash.digest("hex");
+            resolve(fileHash);
+        });
+        fileStream.on("error", (error) => {
+            reject(`Error reading file: ${error.message}`);
+        });
+    });
+}
+const statusMessagePretty = (failures, test, runtime) => {
+    if (failures === 0) {
+        console.log(ansi_colors_1.default.green(ansi_colors_1.default.inverse(`${runtime} > ${test}`)));
+    }
+    else if (failures > 0) {
+        console.log(ansi_colors_1.default.red(ansi_colors_1.default.inverse(`${runtime} > ${test} failed ${failures} times (exit code: ${failures})`)));
+    }
+    else {
+        console.log(ansi_colors_1.default.red(ansi_colors_1.default.inverse(`${runtime} > ${test} crashed (exit code: -1)`)));
+    }
+};
+exports.statusMessagePretty = statusMessagePretty;
+async function writeFileAndCreateDir(filePath, data) {
+    const dirPath = path_1.default.dirname(filePath);
+    try {
+        await fs_1.default.promises.mkdir(dirPath, { recursive: true });
+        await fs_1.default.writeFileSync(filePath, data);
+    }
+    catch (error) {
+        console.error(`Error writing file: ${error}`);
+    }
+}
+const filesHash = async (files, algorithm = "md5") => {
+    return new Promise((resolve, reject) => {
+        resolve(files.reduce(async (mm, f) => {
+            return (await mm) + (await fileHash(f));
+        }, Promise.resolve("")));
+    });
+};
+exports.filesHash = filesHash;
+function isValidUrl(string) {
+    try {
+        new URL(string);
+        return true;
+    }
+    catch (err) {
+        return false;
+    }
+}
+// Wait for file to exist, checks every 2 seconds by default
+async function pollForFile(path, timeout = 2000) {
+    const intervalObj = setInterval(function () {
+        const file = path;
+        const fileExists = fs_1.default.existsSync(file);
+        if (fileExists) {
+            clearInterval(intervalObj);
+        }
+    }, timeout);
+}
+const executablePath = "/opt/homebrew/bin/chromium";
+exports.puppeteerConfigs = {
+    slowMo: 1,
+    waitForInitialPage: false,
+    executablePath,
+    headless: true,
+    defaultViewport: null, // Disable default 800x600 viewport
+    dumpio: false,
+    devtools: false,
+    args: [
+        "--allow-file-access-from-files",
+        "--allow-insecure-localhost",
+        "--allow-running-insecure-content",
+        "--auto-open-devtools-for-tabs",
+        "--disable-dev-shm-usage",
+        "--disable-extensions",
+        "--disable-features=site-per-process",
+        "--disable-gpu",
+        "--disable-setuid-sandbox",
+        "--disable-site-isolation-trials",
+        "--disable-web-security",
+        "--no-first-run",
+        "--no-sandbox",
+        "--no-startup-window",
+        "--reduce-security-for-testing",
+        "--remote-allow-origins=*",
+        "--start-maximized",
+        "--unsafely-treat-insecure-origin-as-secure=*",
+        `--remote-debugging-port=3234`,
+        // "--disable-features=IsolateOrigins,site-per-process",
+        // "--disable-features=IsolateOrigins",
+        // "--disk-cache-dir=/dev/null",
+        // "--disk-cache-size=1",
+        // "--no-zygote",
+        // "--remote-allow-origins=ws://localhost:3234",
+        // "--single-process",
+        // "--start-maximized",
+        // "--unsafely-treat-insecure-origin-as-secure",
+        // "--unsafely-treat-insecure-origin-as-secure=ws://192.168.0.101:3234",
+    ],
+};

package/dist/common/src/PM/web.js

@@ -19,12 +19,6 @@ class PM_Web extends _1.PM {
     pages() {
         throw new Error("Method not implemented.");
     }
-    stopSideCar(n) {
-        return window["stopSideCar"](n, this.testResourceConfiguration.name);
-    }
-    launchSideCar(n) {
-        return window["launchSideCar"](n, this.testResourceConfiguration.name);
-    }
     waitForSelector(p, s) {
         return window["waitForSelector"](p, s);
     }

package/dist/common/src/ReportServer.js

@@ -1,11 +1 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const ReportServerLib_1 = require("./ReportServerLib");
-const server_1 = require("../design-editor/server");
-const port = process.argv[2] || 3000;
-const wssPort = Number(port) + 1; // Use next port for WebSocket
-// Start both servers
-(0, ReportServerLib_1.ReportServerOfPort)(port);
-(0, server_1.startDesignEditorServer)(wssPort);
-console.log(`Report server running on http://localhost:${port}`);
-console.log(`Design editor WebSocket running on ws://localhost:${wssPort}`);

package/dist/common/src/ReportServerLib.js

@@ -1,141 +1 @@
 "use strict";
-// simple http server to preview reports
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ReportServerOfPort = void 0;
-const node_static_1 = __importDefault(require("node-static"));
-const http_1 = __importDefault(require("http"));
-const path_1 = __importDefault(require("path"));
-const fs_1 = __importDefault(require("fs"));
-const fileServer = new node_static_1.default.Server("./", {
-    cache: false,
-    headers: {
-        "Cache-Control": "no-cache, no-store, must-revalidate",
-        Pragma: "no-cache",
-        Expires: "0",
-    },
-});
-const server = http_1.default.createServer((req, res) => {
-    // Handle potential double responses
-    let responded = false;
-    const safeResponse = (handler) => {
-        if (responded)
-            return;
-        responded = true;
-        try {
-            handler();
-        }
-        catch (err) {
-            console.error("Error handling request:", err);
-            if (!res.headersSent) {
-                res.writeHead(500);
-            }
-            res.end("Internal Server Error");
-        }
-    };
-    req.on("error", (err) => {
-        console.error("Request error:", err);
-        safeResponse(() => {
-            if (!res.headersSent) {
-                res.writeHead(400);
-            }
-            res.end("Bad Request");
-        });
-    });
-    req.on("end", () => {
-        safeResponse(() => {
-            const filePath = path_1.default.join(process.cwd(), req.url || "");
-            // First check if file exists
-            fs_1.default.stat(filePath, (err, stats) => {
-                if (err || !stats.isFile()) {
-                    // Check if directory exists
-                    fs_1.default.stat(filePath, (dirErr, dirStats) => {
-                        if (!dirErr && dirStats.isDirectory()) {
-                            // Serve directory listing
-                            fs_1.default.readdir(filePath, (readErr, files) => {
-                                if (readErr) {
-                                    res.writeHead(500);
-                                    return res.end("Error reading directory");
-                                }
-                                res.writeHead(200, { "Content-Type": "text/html" });
-                                res.write(`
-                  <html>
-                    <head>
-                      <title>Directory Listing: ${req.url}</title>
-                      <style>
-                        body { font-family: sans-serif; margin: 2rem; }
-                        h1 { color: #333; }
-                        ul { list-style: none; padding: 0; }
-                        li { padding: 0.5rem; }
-                        li a { color: #0366d6; text-decoration: none; }
-                        li a:hover { text-decoration: underline; }
-                      </style>
-                    </head>
-                    <body>
-                      <h1>Directory: ${req.url}</h1>
-                      <ul>
-                        ${files
-                                    .map((file) => `
-                          <li>
-                            <a href="${path_1.default.join(req.url || "", file)}">
-                              ${file}${file.endsWith("/") ? "/" : ""}
-                            </a>
-                          </li>
-                        `)
-                                    .join("")}
-                      </ul>
-                    </body>
-                  </html>
-                `);
-                                res.end();
-                            });
-                        }
-                        else {
-                            // Neither file nor directory exists - send 404
-                            if (!res.headersSent) {
-                                res.writeHead(404, { "Content-Type": "text/plain" });
-                                res.end("File not found");
-                            }
-                        }
-                    });
-                    return;
-                }
-                // File exists - serve it through node-static
-                const serve = () => {
-                    fileServer.serve(req, res, (err) => {
-                        if (err && !res.headersSent) {
-                            res.writeHead(err.status || 500);
-                            res.end(err.message);
-                        }
-                    });
-                };
-                // Ensure we don't double-serve
-                if (!res.headersSent) {
-                    serve();
-                }
-            });
-        });
-    });
-    req.resume();
-});
-server.on("error", (err) => {
-    console.error("Server error:", err);
-});
-process.on("uncaughtException", (err) => {
-    console.error("Uncaught exception:", err);
-});
-const start = (port) => {
-    if (port) {
-        server.listen(port, () => {
-            console.log(`Server running on http://localhost:${port}`);
-            console.log("Serving files from:", process.cwd());
-        });
-    }
-    else {
-        console.log("you need to specify a port");
-    }
-};
-const ReportServerOfPort = (port) => start(port);
-exports.ReportServerOfPort = ReportServerOfPort;

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

@@ -1,69 +1,81 @@
 "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;
-    };
-})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AppFrame = void 0;
 /* eslint-disable @typescript-eslint/no-unused-vars */
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const react_bootstrap_1 = require("react-bootstrap");
 const react_router_dom_1 = require("react-router-dom");
 const react_router_dom_2 = require("react-router-dom");
+const App_1 = require("../../App");
 const AppFrame = ({ children, title, rightContent }) => {
     const location = (0, react_router_dom_2.useLocation)();
-    const [isExpanded, setIsExpanded] = (0, react_1.useState)(true);
-    return (react_1.default.createElement("div", { className: "d-flex min-vh-100", style: { backgroundColor: '#f8f9fa' } },
-        react_1.default.createElement("div", { className: "bg-light border-end d-flex flex-column", style: {
-                width: isExpanded ? '250px' : '60px',
-                minHeight: '100vh',
-                transition: 'width 0.3s ease'
-            }, onMouseEnter: () => setIsExpanded(true), onMouseLeave: () => setIsExpanded(false) },
-            react_1.default.createElement("div", { className: "p-3 border-bottom d-flex align-items-center justify-content-center" }, isExpanded ? (react_1.default.createElement("img", { src: "/logo.svg", alt: "Testeranto Logo", style: { width: '128px', height: '128px' } })) : (react_1.default.createElement("img", { src: "/logo.svg", alt: "Testeranto Logo", style: { width: '40px', height: '40px' } }))),
+    const { isConnected } = (0, App_1.useWebSocket)();
+    const { tutorialMode } = (0, App_1.useTutorialMode)();
+    const { isAuthenticated, logout } = (0, App_1.useAuth)();
+    return (react_1.default.createElement("div", { className: "d-flex min-vh-100" },
+        react_1.default.createElement("div", { className: "border-end d-flex flex-column", style: {
+                width: '60px',
+                height: '100vh',
+                position: 'sticky',
+                top: 0
+            } },
+            tutorialMode ? (react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "right", overlay: react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "logo-tooltip" }, "Welcome to Testeranto!") },
+                react_1.default.createElement("div", { className: "p-3 border-bottom d-flex align-items-center justify-content-center" },
+                    react_1.default.createElement("img", { src: "/logo.svg", alt: "Testeranto Logo", style: {
+                            width: '40px',
+                            height: '40px'
+                        } })))) : (react_1.default.createElement("div", { className: "p-3 border-bottom d-flex align-items-center justify-content-center" },
+                react_1.default.createElement("img", { src: "/logo.svg", alt: "Testeranto Logo", style: {
+                        width: '40px',
+                        height: '40px'
+                    } }))),
             react_1.default.createElement(react_bootstrap_1.Nav, { variant: "pills", className: "flex-column p-2 flex-grow-1" },
-                react_1.default.createElement(react_bootstrap_1.Nav.Link, { as: react_router_dom_1.NavLink, to: "/", className: `${location.pathname === '/' ? 'active' : ''} text-truncate d-flex align-items-center`, style: { width: '100%' }, title: "Projects" },
-                    react_1.default.createElement("span", { className: "me-2" }, "\uD83D\uDCC1"),
-                    isExpanded && 'Projects'),
-                react_1.default.createElement(react_bootstrap_1.Nav.Link, { as: react_router_dom_1.NavLink, to: "/processes", className: `${location.pathname.startsWith('/processes') ? 'active' : ''} text-truncate d-flex align-items-center`, style: { width: '100%' }, title: "Process Manager" },
-                    react_1.default.createElement("span", { className: "me-2" }, "\uD83D\uDCCA"),
-                    isExpanded && 'Process Manager'),
-                react_1.default.createElement(react_bootstrap_1.Nav.Link, { as: react_router_dom_1.NavLink, to: "/settings", className: `${location.pathname === '/settings' ? 'active' : ''} text-truncate d-flex align-items-center`, style: { width: '100%' }, title: "Settings" },
-                    react_1.default.createElement("span", { className: "me-2" }, "\u2699\uFE0F"),
-                    isExpanded && 'Settings')),
-            react_1.default.createElement("div", { className: "p-3 border-top text-center mt-auto" }, isExpanded ? (react_1.default.createElement("small", { className: "text-muted" },
-                "made with \u2764\uFE0F and ",
-                react_1.default.createElement("a", { href: "https://www.npmjs.com/package/testeranto" }, "testeranto"))) : (react_1.default.createElement("small", { className: "text-muted" }, "\u2764\uFE0F")))),
-        react_1.default.createElement("div", { className: "flex-grow-1 d-flex flex-column" },
+                react_1.default.createElement(react_bootstrap_1.Nav.Link, { as: react_router_dom_1.NavLink, to: "/", className: `${location.pathname === '/' ? 'active' : ''} d-flex align-items-center justify-content-center`, style: { height: '40px', width: '40px' } }, tutorialMode ? (react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "right", overlay: react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "projects-tooltip" }, "Projects") },
+                    react_1.default.createElement("span", null, "\uD83D\uDCC1"))) : (react_1.default.createElement("span", null, "\uD83D\uDCC1"))),
+                react_1.default.createElement(react_bootstrap_1.Nav.Link, { as: react_router_dom_1.NavLink, to: "/processes", className: `${location.pathname.startsWith('/processes') ? 'active' : ''} d-flex align-items-center justify-content-center ${!isConnected || !isAuthenticated ? 'text-muted pe-none' : ''}`, style: {
+                        height: '40px',
+                        width: '40px',
+                        opacity: isConnected && isAuthenticated ? 1 : 0.6
+                    }, onClick: (e) => {
+                        if (!isConnected || !isAuthenticated) {
+                            e.preventDefault();
+                        }
+                    } }, tutorialMode ? (react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "right", overlay: react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "processes-tooltip" },
+                        "Processes ",
+                        !isAuthenticated ? '(Sign in required)' : !isConnected ? '(WebSocket disconnected)' : '') },
+                    react_1.default.createElement("span", null, "\uD83D\uDCCA"))) : (react_1.default.createElement("span", null, "\uD83D\uDCCA"))),
+                react_1.default.createElement(react_bootstrap_1.Nav.Link, { as: react_router_dom_1.NavLink, to: "/git", className: `${location.pathname === '/git' ? 'active' : ''} d-flex align-items-center justify-content-center ${!isAuthenticated ? 'text-muted pe-none' : ''}`, style: {
+                        height: '40px',
+                        width: '40px',
+                        opacity: isAuthenticated ? 1 : 0.6
+                    }, onClick: (e) => {
+                        if (!isAuthenticated) {
+                            e.preventDefault();
+                        }
+                    } }, tutorialMode ? (react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "right", overlay: react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "git-tooltip" },
+                        "Git Integration ",
+                        !isAuthenticated ? '(Sign in required)' : '') },
+                    react_1.default.createElement("span", null, "\uD83D\uDC19"))) : (react_1.default.createElement("span", null, "\uD83D\uDC19"))),
+                react_1.default.createElement(react_bootstrap_1.Nav.Link, { as: react_router_dom_1.NavLink, to: "/settings", className: `${location.pathname === '/settings' ? 'active' : ''} d-flex align-items-center justify-content-center`, style: { height: '40px', width: '40px' } }, tutorialMode ? (react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "right", overlay: react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "settings-tooltip" }, "Settings") },
+                    react_1.default.createElement("span", null, "\u2699\uFE0F"))) : (react_1.default.createElement("span", null, "\u2699\uFE0F")))),
+            react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "right", overlay: react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "status-tooltip" }, isConnected ? 'Dev mode - Full access' : 'Static mode - Read only') },
+                react_1.default.createElement("div", { className: "p-2 border-top d-flex align-items-center justify-content-center" },
+                    react_1.default.createElement("span", { className: `badge rounded-circle d-flex align-items-center justify-content-center`, style: {
+                            backgroundColor: isConnected ? '#198754' : '#6c757d',
+                            width: '20px',
+                            height: '20px',
+                            fontSize: '12px'
+                        } }, isConnected ? '🟢' : '🔴'))),
+            react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "right", overlay: react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "footer-tooltip" },
+                    "made with \u2764\uFE0F and ",
+                    react_1.default.createElement("a", { href: "https://www.npmjs.com/package/testeranto" }, "testeranto")) },
+                react_1.default.createElement("div", { className: "p-3 border-top text-center mt-auto" },
+                    react_1.default.createElement("span", { className: "text-muted" }, "\u2764\uFE0F")))),
+        react_1.default.createElement("div", { className: "flex-grow-1 d-flex flex-column", style: { minHeight: '100vh' } },
             react_1.default.createElement("main", { className: "flex-grow-1 p-4", style: { overflow: 'auto' } },
-                react_1.default.createElement(react_bootstrap_1.Container, { fluid: true, className: "h-100" }, children)))));
+                react_1.default.createElement(react_bootstrap_1.Container, { fluid: true, style: { height: '100%' } }, children)))));
 };
 exports.AppFrame = AppFrame;