testeranto 0.200.1 → 0.203.0

package/src/App.tsx

@@ -1,43 +1,244 @@
-import React from 'react';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useState, useEffect, createContext, useContext } from 'react';
 import ReactDom from "react-dom/client";
-import { HashRouter as Router, Routes, Route } from 'react-router-dom';
+import { HashRouter as Router, Routes, Route } from "react-router-dom";
 
 import { TestPage } from './components/stateful/TestPage';
 import { ProjectPage } from './components/stateful/ProjectPage';
 import { ProjectsPage } from './components/stateful/ProjectsPage';
 import { AppFrame } from './components/pure/AppFrame';
+import { SignIn } from './components/pure/SignIn';
 import { FeaturesReporter } from './components/stateful/FeaturesReporter';
 import { DesignEditorPage } from './components/DesignEditorPage';
 import { TextEditorPage } from './components/stateful/TextEditorPage';
 import { ProcessManagerPage } from './components/stateful/ProcessManagerPage';
 import { SingleProcessPage } from './components/stateful/SingleProcessPage';
-import { SettingsPage } from './components/stateful/SettingsPage';
+import { Settings } from './components/pure/Settings';
+import { GitIntegrationPage } from './components/stateful/GitIntegrationPage';
+import { AuthCallbackPage } from './components/stateful/AuthCallbackPage';
+import { githubAuthService } from './services/GitHubAuthService';
+import { SVGEditorPage } from './components/stateful/SVGEditorPage';
+import { DratoPage } from './components/stateful/DratoPage';
+import { GrafeoPage } from './components/stateful/GrafeoPage';
+import { SkriboPage } from './components/stateful/SkriboPage';
+import { Helpo } from './Helpo';
 
+interface WebSocketContextType {
+  ws: WebSocket | null;
+  isConnected: boolean;
+  sendMessage: (message: any) => void;
+}
+
+interface TutorialModeContextType {
+  tutorialMode: boolean;
+  setTutorialMode: (mode: boolean) => void;
+}
+
+interface AuthContextType {
+  isAuthenticated: boolean;
+  user: any;
+  login: () => void;
+  logout: () => void;
+}
+
+// Create a context for the WebSocket
+const WebSocketContext = createContext<WebSocketContextType>({
+  ws: null,
+  isConnected: false,
+});
+
+// Create a context for tutorial mode
+const TutorialModeContext = createContext<TutorialModeContextType>({
+  tutorialMode: false,
+  setTutorialMode: () => { },
+});
+
+// Create a context for authentication
+const AuthContext = createContext<AuthContextType>({
+  isAuthenticated: false,
+  user: null,
+  login: () => { },
+  logout: () => { },
+});
+
+export const useWebSocket = () => {
+  return useContext(WebSocketContext);
+};
+
+export const useTutorialMode = () => {
+  return useContext(TutorialModeContext);
+};
+
+export const useAuth = () => {
+  return useContext(AuthContext);
+};
 
 export const App = () => {
+  const [ws, setWs] = useState<WebSocket | null>(null);
+  const [isConnected, setIsConnected] = useState(false);
+  const [tutorialMode, setTutorialMode] = useState(false);
+  const [isAuthenticated, setIsAuthenticated] = useState(
+    githubAuthService.isAuthenticated
+  );
+  const [user, setUser] = useState(githubAuthService.userInfo);
+
+  useEffect(() => {
+    // Load tutorial mode from localStorage
+    const savedTutorialMode = localStorage.getItem("tutorialMode");
+    if (savedTutorialMode) {
+      setTutorialMode(savedTutorialMode === "true");
+    }
+
+    // Listen for auth changes
+    const handleAuthChange = (authenticated: boolean) => {
+      setIsAuthenticated(authenticated);
+      setUser(githubAuthService.userInfo);
+    };
+
+    githubAuthService.on('authChange', handleAuthChange);
+
+    // Handle GitHub OAuth callback from popup
+    const handleMessage = async (event: MessageEvent) => {
+      if (event.data.type === "github-auth-callback") {
+        const { code } = event.data;
+        try {
+          const success = await githubAuthService.handleCallback(code);
+          if (success) {
+            console.log("GitHub authentication successful");
+          } else {
+            console.error("GitHub authentication failed");
+          }
+        } catch (error) {
+          console.error("Error handling GitHub callback:", error);
+        }
+      } else if (event.data.type === "github-auth-error") {
+        console.error("GitHub authentication error:", event.data.error);
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+
+    const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = `${wsProtocol}//${window.location.host}`;
+    const websocket = new WebSocket(wsUrl);
+
+    websocket.onopen = () => {
+      console.log("WebSocket connected");
+      setWs(websocket);
+      setIsConnected(true);
+    };
+
+    websocket.onclose = () => {
+      console.log("WebSocket disconnected");
+      setWs(null);
+      setIsConnected(false);
+    };
+
+    websocket.onerror = (error) => {
+      console.error("WebSocket error:", error);
+      setIsConnected(false);
+    };
+
+    return () => {
+      githubAuthService.off("authChange", handleAuthChange);
+      window.removeEventListener("message", handleMessage);
+      websocket.close();
+    };
+  }, []);
+
+  // Add sendMessage function
+  const sendMessage = (message: any) => {
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify(message));
+    } else {
+      console.error('WebSocket is not connected');
+    }
+  };
+
+  const authContextValue = {
+    isAuthenticated,
+    user,
+    login: () => githubAuthService.initiateLogin(),
+    logout: () => githubAuthService.logout(),
+  };
+
   return (
-    <Router>
-      <AppFrame>
-        <Routes>
-          <Route path="/" element={<ProjectsPage />} />
-          <Route path="/projects/:projectName" element={<ProjectPage />} />
-          <Route path="/projects/:projectName/tests/*" element={<TestPage />} />
-          <Route path="/projects/:projectName#:tab" element={<ProjectPage />} />
-          <Route path="/features-reporter" element={<FeaturesReporter />} />
-          <Route path="/design-editor" element={<DesignEditorPage />} />
-          <Route path="/text-editor" element={<TextEditorPage />} />
-          <Route path="/processes" element={<ProcessManagerPage />} />
-          <Route path="/processes/:processId" element={<SingleProcessPage />} />
-          <Route path="/settings" element={<SettingsPage />} />
-        </Routes>
-      </AppFrame>
-    </Router>
+    <WebSocketContext.Provider value={{ ws, isConnected, sendMessage }}>
+      <TutorialModeContext.Provider value={{ tutorialMode, setTutorialMode }}>
+        <AuthContext.Provider value={authContextValue}>
+          <Router>
+            <AppFrame>
+              <Routes>
+                {/* Public routes */}
+                <Route path="/" element={<Helpo />} />
+                <Route path="/projects" element={<ProjectsPage />} />
+                <Route
+                  path="/projects/:projectName"
+                  element={<ProjectPage />}
+                />
+                <Route
+                  path="/projects/:projectName/tests/*"
+                  element={<TestPage />}
+                />
+                <Route
+                  path="/projects/:projectName#:tab"
+                  element={<ProjectPage />}
+                />
+                <Route path="/signin" element={<SignIn />} />
+                <Route
+                  path="/auth/github/callback"
+                  element={<AuthCallbackPage />}
+                />
+
+                {/* Protected routes - handle authentication within components */}
+                <Route
+                  path="/features-reporter"
+                  element={isAuthenticated ? <FeaturesReporter /> : <SignIn />}
+                />
+                <Route
+                  path="/design-editor"
+                  element={isAuthenticated ? <DesignEditorPage /> : <SignIn />}
+                />
+                <Route
+                  path="/text-editor"
+                  element={isAuthenticated ? <TextEditorPage /> : <SignIn />}
+                />
+                {/* Conditionally render process-related routes only if WebSocket is connected */}
+                {isConnected ? (
+                  <>
+                    <Route
+                      path="/processes"
+                      element={
+                        isAuthenticated ? <ProcessManagerPage /> : <SignIn />
+                      }
+                    />
+                    <Route
+                      path="/processes/:processId"
+                      element={
+                        isAuthenticated ? <SingleProcessPage /> : <SignIn />
+                      }
+                    />
+                  </>
+                ) : null}
+                <Route path="/settings" element={<Settings />} />
+                <Route path="/git" element={isAuthenticated ? <GitIntegrationPage /> : <SignIn />} />
+                <Route path="/svg-editor" element={isAuthenticated ? <SVGEditorPage /> : <SignIn />} />
+                <Route path="/drato" element={isAuthenticated ? <DratoPage /> : <SignIn />} />
+                <Route path="/grafeo" element={isAuthenticated ? <GrafeoPage /> : <SignIn />} />
+                <Route path="/skribo" element={isAuthenticated ? <SkriboPage /> : <SignIn />} />
+                <Route path="*" element={<Helpo />} />
+              </Routes>
+            </AppFrame>
+          </Router>
+        </AuthContext.Provider>
+      </TutorialModeContext.Provider>
+    </WebSocketContext.Provider>
   );
 };
 
 // Export App to global scope
 function initApp() {
-  const rootElement = document.getElementById('root');
+  const rootElement = document.getElementById("root");
   if (rootElement) {
     try {
       // Try to use React 18's createRoot if available
@@ -49,7 +250,7 @@ function initApp() {
         ReactDom.render(React.createElement(App), rootElement);
       }
     } catch (err) {
-      console.error('Error rendering app:', err);
+      console.error("Error rendering app:", err);
       // Retry if React isn't loaded yet
       setTimeout(initApp, 100);
     }
@@ -60,17 +261,17 @@ function initApp() {
 }
 
 // Export App to global scope
-if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+if (typeof window !== "undefined" && typeof document !== "undefined") {
   // @ts-ignore
   window.App = App;
   // @ts-ignore
   window.React = React;
   // @ts-ignore
   window.ReactDOM = ReactDom;
-  
+
   // Initialize the app when the window is ready
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', initApp);
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initApp);
   } else {
     initApp();
   }

package/src/Helpo.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+
+export const Helpo = () => (
+  <div className="d-flex flex-column h-100">
+    <div className="border-bottom p-3"></div>
+    <div className="flex-grow-1 p-3" style={{ overflowY: "auto" }}>
+      {/* Chat messages */}
+      <div className="d-flex mb-3">
+        <div className="me-2">
+          <div
+            className="rounded-circle d-flex align-items-center justify-content-center bg-primary text-white"
+            style={{ width: "40px", height: "40px" }}
+          >
+            🤖
+          </div>
+        </div>
+        <div className="flex-grow-1">
+          <div className="fw-bold">Helpo</div>
+          <div className="bg-light p-3 rounded">
+            <p>
+              Hello! I'm Helpo, your helpful robot assistant. How can I assist
+              you today?
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="d-flex mb-3 justify-content-end">
+        <div className="flex-grow-1 me-2 text-end">
+          <div className="fw-bold">You</div>
+          <div className="bg-primary text-white p-3 rounded">
+            <p>
+              Can you show me how to format text with <strong>bold</strong> and{" "}
+              <em>italic</em>?
+            </p>
+          </div>
+        </div>
+        <div>
+          <div
+            className="rounded-circle d-flex align-items-center justify-content-center bg-secondary text-white"
+            style={{ width: "40px", height: "40px" }}
+          >
+            👤
+          </div>
+        </div>
+      </div>
+
+      <div className="d-flex mb-3">
+        <div className="me-2">
+          <div
+            className="rounded-circle d-flex align-items-center justify-content-center bg-primary text-white"
+            style={{ width: "40px", height: "40px" }}
+          >
+            🤖
+          </div>
+        </div>
+        <div className="flex-grow-1">
+          <div className="fw-bold">Helpo</div>
+          <div className="bg-light p-3 rounded">
+            <p>Sure! Here's an example:</p>
+            <ul>
+              <li>
+                Use <code>&lt;strong&gt;</code> for <strong>bold text</strong>
+              </li>
+              <li>
+                Use <code>&lt;em&gt;</code> for <em>italic text</em>
+              </li>
+              <li>You can even include lists and other HTML elements</li>
+            </ul>
+            <p>Let me know if you need help with anything else!</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div className="border-top p-3">
+      <div className="input-group">
+        <input
+          type="text"
+          className="form-control"
+          placeholder="Type your message..."
+          disabled
+        />
+        <button className="btn btn-primary" type="button" disabled>
+          Send
+        </button>
+      </div>
+    </div>
+  </div>
+);

package/src/PM/PM_WithBuild.ts

@@ -0,0 +1,183 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import esbuild from "esbuild";
+
+import { IBuiltConfig } from "../Types.js";
+import esbuildNodeConfiger from "../esbuildConfigs/node.js";
+import esbuildWebConfiger from "../esbuildConfigs/web.js";
+import esbuildImportConfiger from "../esbuildConfigs/pure.js";
+import { getRunnables } from "../utils.js";
+
+import { PM_WithWebSocket } from "./PM_WithWebSocket.js";
+
+// import golingvuBuild from "./golingvuBuild";
+
+export abstract class PM_WithBuild extends PM_WithWebSocket {
+  configs: IBuiltConfig;
+  name: string;
+  mode: "once" | "dev";
+  currentBuildResolve: (() => void) | null = null;
+  currentBuildReject: ((error: any) => void) | null = null;
+
+  constructor(configs: IBuiltConfig, name: string, mode: "once" | "dev") {
+    super(configs);
+    this.configs = configs;
+    this.name = name;
+    this.mode = mode;
+  }
+
+  async startBuildProcesses(): Promise<void> {
+    const { nodeEntryPoints, webEntryPoints, pureEntryPoints } = getRunnables(
+      this.configs.tests,
+      this.name
+    );
+
+    console.log(`Starting build processes for ${this.name}...`);
+    console.log(`  Node entry points: ${Object.keys(nodeEntryPoints).length}`);
+    console.log(`  Web entry points: ${Object.keys(webEntryPoints).length}`);
+    console.log(`  Pure entry points: ${Object.keys(pureEntryPoints).length}`);
+
+    // Start all build processes (only node, web, pure)
+    await Promise.all([
+      this.startBuildProcess(esbuildNodeConfiger, nodeEntryPoints, "node"),
+      this.startBuildProcess(esbuildWebConfiger, webEntryPoints, "web"),
+      this.startBuildProcess(esbuildImportConfiger, pureEntryPoints, "pure"),
+    ]);
+  }
+
+  private async startBuildProcess(
+    configer: (
+      config: IBuiltConfig,
+      entryPoints: string[],
+      testName: string
+    ) => any,
+    entryPoints: Record<string, string>,
+    runtime: string
+  ): Promise<void> {
+    const entryPointKeys = Object.keys(entryPoints);
+    if (entryPointKeys.length === 0) return;
+
+    // Store reference to 'this' for use in the plugin
+    const self = this;
+
+    // Create a custom plugin to track build processes
+    const buildProcessTrackerPlugin = {
+      name: "build-process-tracker",
+      setup(build) {
+        build.onStart(() => {
+          const processId = `build-${runtime}-${Date.now()}`;
+          const command = `esbuild ${runtime} for ${self.name}`;
+
+          // Create a promise that will resolve when the build completes
+          const buildPromise = new Promise<void>((resolve, reject) => {
+            // Store resolve and reject functions to call them in onEnd
+            self.currentBuildResolve = resolve;
+            self.currentBuildReject = reject;
+          });
+
+          // Add to process manager
+          if (self.addPromiseProcess) {
+            self.addPromiseProcess(
+              processId,
+              buildPromise,
+              command,
+              "build-time",
+              self.name,
+              runtime as any
+            );
+          }
+
+          console.log(
+            `Starting ${runtime} build for ${entryPointKeys.length} entry points`
+          );
+          // Broadcast build start event
+          if (self.broadcast) {
+            self.broadcast({
+              type: "buildEvent",
+              event: "start",
+              runtime,
+              timestamp: new Date().toISOString(),
+              entryPoints: entryPointKeys.length,
+              processId,
+            });
+          }
+        });
+
+        build.onEnd((result) => {
+          const event = {
+            type: "buildEvent",
+            event: result.errors.length > 0 ? "error" : "success",
+            runtime,
+            timestamp: new Date().toISOString(),
+            errors: result.errors.length,
+            warnings: result.warnings.length,
+          };
+
+          if (result.errors.length > 0) {
+            console.error(
+              `Build ${runtime} failed with ${result.errors.length} errors`
+            );
+            if (self.currentBuildReject) {
+              self.currentBuildReject(
+                new Error(`Build failed with ${result.errors.length} errors`)
+              );
+            }
+          } else {
+            console.log(`Build ${runtime} completed successfully`);
+            if (self.currentBuildResolve) {
+              self.currentBuildResolve();
+            }
+          }
+
+          // Broadcast build result event
+          if (self.broadcast) {
+            self.broadcast(event);
+          }
+
+          // Clear the current build handlers
+          self.currentBuildResolve = null;
+          self.currentBuildReject = null;
+        });
+      },
+    };
+
+    // Get the base config and add our tracking plugin
+    const baseConfig = configer(this.configs, entryPointKeys, this.name);
+    const configWithPlugin = {
+      ...baseConfig,
+      plugins: [...(baseConfig.plugins || []), buildProcessTrackerPlugin],
+    };
+
+    try {
+      // Always build first, then watch if in dev mode
+      if (this.mode === "dev") {
+        const ctx = await esbuild.context(configWithPlugin);
+        // Build once and then watch
+        await ctx.rebuild();
+        await ctx.watch();
+      } else {
+        // In once mode, just build
+        const result = await esbuild.build(configWithPlugin);
+        if (result.errors.length === 0) {
+          console.log(`Successfully built ${runtime} bundle`);
+        }
+      }
+    } catch (error) {
+      console.error(`Failed to build ${runtime}:`, error);
+      // Broadcast error event
+      if (this.broadcast) {
+        this.broadcast({
+          type: "buildEvent",
+          event: "error",
+          runtime,
+          timestamp: new Date().toISOString(),
+          errors: 1,
+          warnings: 0,
+          message: error.message,
+        });
+      }
+      throw error;
+    }
+  }
+
+  abstract onBuildDone(): void;
+}