testeranto 0.202.0 → 0.203.0

package/src/App.tsx

@@ -1,6 +1,7 @@
+/* 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';
@@ -17,10 +18,15 @@ 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 {
@@ -44,15 +50,15 @@ const WebSocketContext = createContext<WebSocketContextType>({
 // Create a context for tutorial mode
 const TutorialModeContext = createContext<TutorialModeContextType>({
   tutorialMode: false,
-  setTutorialMode: () => {},
+  setTutorialMode: () => { },
 });
 
 // Create a context for authentication
 const AuthContext = createContext<AuthContextType>({
   isAuthenticated: false,
   user: null,
-  login: () => {},
-  logout: () => {},
+  login: () => { },
+  logout: () => { },
 });
 
 export const useWebSocket = () => {
@@ -71,14 +77,16 @@ 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 [isAuthenticated, setIsAuthenticated] = useState(
+    githubAuthService.isAuthenticated
+  );
   const [user, setUser] = useState(githubAuthService.userInfo);
 
   useEffect(() => {
     // Load tutorial mode from localStorage
-    const savedTutorialMode = localStorage.getItem('tutorialMode');
+    const savedTutorialMode = localStorage.getItem("tutorialMode");
     if (savedTutorialMode) {
-      setTutorialMode(savedTutorialMode === 'true');
+      setTutorialMode(savedTutorialMode === "true");
     }
 
     // Listen for auth changes
@@ -88,56 +96,65 @@ export const App = () => {
     };
 
     githubAuthService.on('authChange', handleAuthChange);
-    
+
     // Handle GitHub OAuth callback from popup
     const handleMessage = async (event: MessageEvent) => {
-      if (event.data.type === 'github-auth-callback') {
+      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');
+            console.log("GitHub authentication successful");
           } else {
-            console.error('GitHub authentication failed');
+            console.error("GitHub authentication failed");
           }
         } catch (error) {
-          console.error('Error handling GitHub callback:', error);
+          console.error("Error handling GitHub callback:", error);
         }
-      } else if (event.data.type === 'github-auth-error') {
-        console.error('GitHub authentication error:', event.data.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');
+      console.log("WebSocket connected");
       setWs(websocket);
       setIsConnected(true);
     };
-    
+
     websocket.onclose = () => {
-      console.log('WebSocket disconnected');
+      console.log("WebSocket disconnected");
       setWs(null);
       setIsConnected(false);
     };
-    
+
     websocket.onerror = (error) => {
-      console.error('WebSocket error:', error);
+      console.error("WebSocket error:", error);
       setIsConnected(false);
     };
 
     return () => {
-      githubAuthService.off('authChange', handleAuthChange);
-      window.removeEventListener('message', handleMessage);
+      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,
@@ -146,37 +163,70 @@ export const App = () => {
   };
 
   return (
-    <WebSocketContext.Provider value={{ ws, isConnected }}>
+    <WebSocketContext.Provider value={{ ws, isConnected, sendMessage }}>
       <TutorialModeContext.Provider value={{ tutorialMode, setTutorialMode }}>
         <AuthContext.Provider value={authContextValue}>
           <Router>
             <AppFrame>
               <Routes>
                 {/* Public 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="/" 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 />} />
-                
+                <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 />} />
+                <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 />} />
+                    <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 />} />
-                
-                {/* Catch all - redirect to home for logged out users */}
-                <Route path="*" element={<ProjectsPage />} />
+                <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>
@@ -188,7 +238,7 @@ export const App = () => {
 
 // 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
@@ -200,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);
     }
@@ -211,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

@@ -9,6 +9,8 @@ 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;
@@ -59,12 +61,12 @@ export abstract class PM_WithBuild extends PM_WithWebSocket {
 
     // Create a custom plugin to track build processes
     const buildProcessTrackerPlugin = {
-      name: 'build-process-tracker',
+      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
@@ -84,7 +86,9 @@ export abstract class PM_WithBuild extends PM_WithWebSocket {
             );
           }
 
-          console.log(`Starting ${runtime} build for ${entryPointKeys.length} entry points`);
+          console.log(
+            `Starting ${runtime} build for ${entryPointKeys.length} entry points`
+          );
           // Broadcast build start event
           if (self.broadcast) {
             self.broadcast({
@@ -93,11 +97,11 @@ export abstract class PM_WithBuild extends PM_WithWebSocket {
               runtime,
               timestamp: new Date().toISOString(),
               entryPoints: entryPointKeys.length,
-              processId
+              processId,
             });
           }
         });
-        
+
         build.onEnd((result) => {
           const event = {
             type: "buildEvent",
@@ -105,13 +109,17 @@ export abstract class PM_WithBuild extends PM_WithWebSocket {
             runtime,
             timestamp: new Date().toISOString(),
             errors: result.errors.length,
-            warnings: result.warnings.length
+            warnings: result.warnings.length,
           };
-          
+
           if (result.errors.length > 0) {
-            console.error(`Build ${runtime} failed with ${result.errors.length} errors`);
+            console.error(
+              `Build ${runtime} failed with ${result.errors.length} errors`
+            );
             if (self.currentBuildReject) {
-              self.currentBuildReject(new Error(`Build failed with ${result.errors.length} errors`));
+              self.currentBuildReject(
+                new Error(`Build failed with ${result.errors.length} errors`)
+              );
             }
           } else {
             console.log(`Build ${runtime} completed successfully`);
@@ -119,7 +127,7 @@ export abstract class PM_WithBuild extends PM_WithWebSocket {
               self.currentBuildResolve();
             }
           }
-          
+
           // Broadcast build result event
           if (self.broadcast) {
             self.broadcast(event);
@@ -129,29 +137,32 @@ export abstract class PM_WithBuild extends PM_WithWebSocket {
           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]
+      plugins: [...(baseConfig.plugins || []), buildProcessTrackerPlugin],
     };
 
     try {
-      const ctx = await esbuild.context(configWithPlugin);
-
+      // Always build first, then watch if in dev mode
       if (this.mode === "dev") {
-        // In dev mode, start watching - each rebuild will be tracked as a separate process
+        const ctx = await esbuild.context(configWithPlugin);
+        // Build once and then watch
+        await ctx.rebuild();
         await ctx.watch();
       } else {
-        // In once mode, do a single build which will be tracked by the plugin
-        const result = await ctx.rebuild();
-        await ctx.dispose();
+        // 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 start ${runtime} build context:`, error);
+      console.error(`Failed to build ${runtime}:`, error);
       // Broadcast error event
       if (this.broadcast) {
         this.broadcast({
@@ -161,9 +172,10 @@ export abstract class PM_WithBuild extends PM_WithWebSocket {
           timestamp: new Date().toISOString(),
           errors: 1,
           warnings: 0,
-          message: error.message
+          message: error.message,
         });
       }
+      throw error;
     }
   }
 

package/src/PM/PM_WithGit.ts

@@ -3,6 +3,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 
+import fs from "fs";
 import url from "url";
 import http from "http";
 
@@ -479,43 +480,89 @@ export abstract class PM_WithGit extends PM_WithEslintAndTsc {
       const { exec } = await import("child_process");
 
       return new Promise((resolve, reject) => {
+        // console.log("Current working directory:", process.cwd());
         exec(
-          "git status --porcelain",
+          "git status --porcelain=v1",
           { cwd: process.cwd() },
-          (error, stdout, stderr) => {
+          async (error, stdout, stderr) => {
+            if (stderr) {
+              // console.error("Git stderr:", stderr);
+            }
             if (error) {
-              console.error("Error getting git changes:", error);
+              // console.error("Error getting git changes:", error);
               resolve([]);
               return;
             }
 
+            // console.log("Raw git status output:", stdout);
             const changes: FileChange[] = [];
             const lines = stdout.trim().split("\n");
 
             for (const line of lines) {
+              // console.log("Processing git status line:", JSON.stringify(line));
               if (!line.trim()) continue;
 
-              // Parse git status output (XY PATH)
-              const status = line.substring(0, 2).trim();
-              const path = line.substring(3).trim();
+              // Parse git status output using a more reliable approach
+              // The format is always: XY PATH (exactly two status characters, space, then path)
+              // Use a regex to match the pattern
+              const match = line.match(/^(.{2}) (.*)$/);
+              if (!match) {
+                // console.warn("Could not parse git status line:", line);
+                continue;
+              }
+
+              const status = match[1];
+              let path = match[2];
+
+              // Handle renames which look like: R  ORIG_PATH -> NEW_PATH
+              // For renames, status will be 'R ' (note the space)
+              if (status === "R " && path.includes(" -> ")) {
+                const parts = path.split(" -> ");
+                path = parts[parts.length - 1];
+              }
+
+              // Trim whitespace from the path
+              path = path.trim();
 
               let fileStatus: FileChange["status"] = "unchanged";
 
-              if (status.startsWith("M")) {
+              // Check the first character of the status
+              const firstChar = status.charAt(0);
+              if (firstChar === "M" || firstChar === " ") {
                 fileStatus = "modified";
-              } else if (status.startsWith("A")) {
+              } else if (firstChar === "A") {
                 fileStatus = "added";
-              } else if (status.startsWith("D")) {
+              } else if (firstChar === "D") {
                 fileStatus = "deleted";
-              } else if (status.startsWith("U") || status.includes("U")) {
+              } else if (firstChar === "U") {
                 fileStatus = "conflicted";
-              } else if (status.startsWith("??")) {
+              } else if (status === "??") {
                 fileStatus = "added";
+              } else if (status === "R ") {
+                fileStatus = "modified"; // Treat renames as modifications
               }
 
               if (fileStatus !== "unchanged") {
+                // console.log("Git change detected:", {
+                //   path,
+                //   status,
+                //   fileStatus,
+                // });
+
+                // Verify the path exists to make sure it's correct
+
+                const fullPath = `${process.cwd()}/${path}`;
+                try {
+                  await fs.promises.access(fullPath);
+                  // console.log("Path exists:", fullPath);
+                } catch (error) {
+                  // console.warn("Path does not exist:", fullPath);
+                  // Let's still add it to changes, as it might be a deleted file
+                }
+
+                // Add the change
                 changes.push({
-                  path,
+                  path: path,
                   status: fileStatus,
                 });
               }
@@ -526,7 +573,7 @@ export abstract class PM_WithGit extends PM_WithEslintAndTsc {
         );
       });
     } catch (error) {
-      console.error("Failed to get git changes:", error);
+      // console.error("Failed to get git changes:", error);
       return [];
     }
   }