testeranto 0.189.0 → 0.198.0

package/src/components/stateful/FeaturesReporter.tsx

@@ -8,7 +8,7 @@ export const FeaturesReporter: React.FC = () => {
   useEffect(() => {
     const fetchProjects = async () => {
       try {
-        const response = await fetch('testeranto/projects.json');
+        const response = await fetch('/projects.json');
         if (!response.ok) throw new Error('Failed to fetch projects');
         const projectNames: string[] = await response.json();
         setTreeData(buildTree(projectNames));

package/src/components/stateful/FileTree.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { FileType } from './TextEditorPage';
+
+type FileTreeProps = {
+  files: FileType[];
+  onSelect: (path: string) => void;
+  activeFile: string | null;
+};
+
+export const FileTree = ({ files, onSelect, activeFile }: FileTreeProps) => {
+  // Group files by directory
+  const fileGroups = files.reduce((acc, file) => {
+    const dir = file.path.split('/').slice(0, -1).join('/');
+    if (!acc[dir]) {
+      acc[dir] = [];
+    }
+    acc[dir].push(file);
+    return acc;
+  }, {} as Record<string, FileType[]>);
+
+  const fileTreeStyle = {
+    padding: '8px',
+    fontFamily: 'monospace'
+  };
+
+  const directoryStyle = {
+    marginBottom: '8px'
+  };
+
+  const directoryNameStyle = {
+    fontWeight: 'bold',
+    padding: '4px 0',
+    color: '#555'
+  };
+
+  const fileStyle = {
+    padding: '4px 8px',
+    cursor: 'pointer',
+    borderRadius: '4px'
+  };
+
+  const activeFileStyle = {
+    ...fileStyle,
+    backgroundColor: '#e0e0e0',
+    fontWeight: 'bold'
+  };
+
+  return (
+    <div style={fileTreeStyle}>
+      {Object.entries(fileGroups).map(([dir, dirFiles]) => (
+        <div key={dir} style={directoryStyle}>
+          <div style={directoryNameStyle}>{dir || '/'}</div>
+          {dirFiles.map(file => (
+            <div 
+              key={file.path}
+              style={activeFile === file.path ? activeFileStyle : fileStyle}
+              onClick={() => onSelect(file.path)}
+            >
+              {file.path.split('/').pop()}
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/components/stateful/ProcessManagerPage.tsx

@@ -0,0 +1,108 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ProcessManagerView, Process } from '../pure/ProcessManagerView';
+import { AppFrame } from '../pure/AppFrame';
+
+export const ProcessManagerPage: React.FC = () => {
+  const [processes, setProcesses] = useState<Process[]>([]);
+  const [ws, setWs] = useState<WebSocket | null>(null);
+  const [loading, setLoading] = useState(false);
+  const navigate = useNavigate();
+
+  // Connect to WebSocket
+  useEffect(() => {
+    const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = `${wsProtocol}//${window.location.host}`;
+    const websocket = new WebSocket(wsUrl);
+    setWs(websocket);
+
+    // Request current processes when connected
+    websocket.onopen = () => {
+      setLoading(true);
+      websocket.send(JSON.stringify({ type: 'getRunningProcesses' }));
+    };
+
+    const handleMessage = (event: MessageEvent) => {
+      try {
+        const data = JSON.parse(event.data);
+        if (data.type === 'runningProcesses') {
+          // Processes should come with their full logs
+          setProcesses(data.processes.map((p: any) => ({
+            ...p,
+            status: p.status || 'running',
+            logs: p.logs || []
+          })));
+          setLoading(false);
+        } else if (data.type === 'processStarted') {
+          setProcesses(prev => [...prev, {
+            ...data,
+            status: 'running',
+            logs: data.logs || []
+          }]);
+        } else if (data.type === 'processExited') {
+          setProcesses(prev => prev.map(p =>
+            p.processId === data.processId
+              ? { ...p, status: 'exited', exitCode: data.exitCode }
+              : p
+          ));
+        } else if (data.type === 'processError') {
+          setProcesses(prev => prev.map(p =>
+            p.processId === data.processId
+              ? { ...p, status: 'error', error: data.error }
+              : p
+          ));
+        } else if (data.type === 'processStdout' || data.type === 'processStderr') {
+          setProcesses(prev => prev.map(p =>
+            p.processId === data.processId
+              ? {
+                ...p,
+                logs: [...(p.logs || []), data.data]
+              }
+              : p
+          ));
+        }
+      } catch (error) {
+        console.error('Error parsing process message:', error);
+        setLoading(false);
+      }
+    };
+
+    websocket.addEventListener('message', handleMessage);
+
+    return () => {
+      websocket.removeEventListener('message', handleMessage);
+      websocket.close();
+    };
+  }, []);
+
+  const handleRefresh = useCallback(() => {
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      setLoading(true);
+      ws.send(JSON.stringify({ type: 'getRunningProcesses' }));
+    }
+  }, [ws]);
+
+  const handleKillProcess = useCallback((processId: string) => {
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify({
+        type: 'killProcess',
+        processId
+      }));
+    }
+  }, [ws]);
+
+  const handleBack = useCallback(() => {
+    navigate('/');
+  }, [navigate]);
+
+  return (
+    // don't put this in AppFrame- this is correct
+    <ProcessManagerView
+      processes={processes}
+      onRefresh={handleRefresh}
+      onBack={handleBack}
+      loading={loading}
+      onKillProcess={handleKillProcess}
+    />
+  );
+};

package/src/components/stateful/ProjectPage.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import React, { useEffect, useState } from 'react';
@@ -37,11 +38,11 @@ export const ProjectPage = () => {
     const fetchData = async () => {
       try {
         const [summaryRes, nodeRes, webRes, pureRes, configRes] = await Promise.all([
-          fetch(`reports/${name}/summary.json`),
-          fetch(`bundles/node/${name}/metafile.json`),
-          fetch(`bundles/web/${name}/metafile.json`),
-          fetch(`bundles/pure/${name}/metafile.json`),
-          fetch(`reports/${name}/config.json`)
+          fetch(`/reports/${name}/summary.json`),
+          fetch(`/metafiles/node/${name}.json`),
+          fetch(`/metafiles/web/${name}.json`),
+          fetch(`/metafiles/pure/${name}.json`),
+          fetch(`/reports/${name}/config.json`)
         ]);
 
         const [summaryData, nodeData, webData, pureData, configData] = await Promise.all([

package/src/components/stateful/ProjectsPage.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { ProjectsPageView } from '../pure/ProjectsPageView';
 import { ISummary } from '../../Types';
@@ -11,21 +11,50 @@ export const ProjectsPage = () => {
   const [error, setError] = useState<string | null>(null);
   const [configs, setConfigs] = useState<Record<string, object>>({});
   const navigate = useNavigate();
+  const [ws, setWs] = useState<WebSocket | null>(null);
+
+  useEffect(() => {
+    // Connect to WebSocket on the same host and port as the HTTP server
+    const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = `${wsProtocol}//${window.location.host}`;
+    const websocket = new WebSocket(wsUrl);
+    setWs(websocket);
+
+    websocket.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        if (data.type === 'summaryUpdate') {
+          // Update summaries when we receive updates
+          setSummaries(prev => ({ ...prev, ...data.data }));
+        }
+      } catch (error) {
+        console.error('Error parsing WebSocket message:', error);
+      }
+    };
+
+    websocket.onerror = (error) => {
+      console.error('WebSocket error:', error);
+    };
+
+    return () => {
+      websocket.close();
+    };
+  }, []);
 
   useEffect(() => {
     const fetchProjects = async () => {
       try {
-        const projectsRes = await fetch(`projects.json`);
+        const projectsRes = await fetch(`/projects.json`);
         const projectNames = await projectsRes.json();
 
         const projectsData = await Promise.all(
           projectNames.map(async (name) => {
             const [summaryRes, nodeRes, webRes, pureRes, configRes] = await Promise.all([
-              fetch(`reports/${name}/summary.json`),
-              fetch(`bundles/node/${name}/metafile.json`),
-              fetch(`bundles/web/${name}/metafile.json`),
-              fetch(`bundles/pure/${name}/metafile.json`),
-              fetch(`reports/${name}/config.json`),
+              fetch(`/reports/${name}/summary.json`),
+              fetch(`/metafiles/node/${name}.json`),
+              fetch(`/metafiles/web/${name}.json`),
+              fetch(`/metafiles/pure/${name}.json`),
+              fetch(`/reports/${name}/config.json`),
             ]);
 
             const [summary, nodeData, webData, pureData, configData] = await Promise.all([

package/src/components/stateful/SettingsPage.tsx

@@ -0,0 +1,82 @@
+import React, { useState, useEffect } from 'react';
+import { Container, Card, Form, Row, Col } from 'react-bootstrap';
+// import { AppFrame } from '../pure/AppFrame';
+
+export const SettingsPage: React.FC = () => {
+  const [theme, setTheme] = useState(localStorage.getItem('theme') || 'system');
+
+  useEffect(() => {
+    let themeToApply = theme;
+    if (theme === 'system') {
+      themeToApply = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+    }
+    document.documentElement.setAttribute('data-bs-theme', themeToApply);
+  }, [theme]);
+
+  const handleThemeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newTheme = e.target.value;
+    setTheme(newTheme);
+    localStorage.setItem('theme', newTheme);
+
+    let themeToApply = newTheme;
+    if (newTheme === 'system') {
+      themeToApply = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+    }
+    document.documentElement.setAttribute('data-bs-theme', themeToApply);
+  };
+
+  return (
+
+    <Container>
+      <Row className="justify-content-center">
+        <Col lg={8}>
+          <Card className="theme-card">
+            {/* <Card.Header className="bg-transparent border-0">
+              <h4 className="mb-0">Appearance</h4>
+            </Card.Header> */}
+            <Card.Body>
+              <Form>
+                <Form.Group className="mb-4">
+                  <Form.Label className="h6 mb-3">Theme</Form.Label>
+                  <div className="d-flex flex-wrap gap-3">
+                    <Form.Check
+                      type="radio"
+                      name="theme"
+                      id="light-theme"
+                      label="Light"
+                      value="light"
+                      checked={theme === 'light'}
+                      onChange={handleThemeChange}
+                      className="theme-option"
+                    />
+                    <Form.Check
+                      type="radio"
+                      name="theme"
+                      id="dark-theme"
+                      label="Dark"
+                      value="dark"
+                      checked={theme === 'dark'}
+                      onChange={handleThemeChange}
+                      className="theme-option"
+                    />
+                    <Form.Check
+                      type="radio"
+                      name="theme"
+                      id="system-theme"
+                      label="System"
+                      value="system"
+                      checked={theme === 'system'}
+                      onChange={handleThemeChange}
+                      className="theme-option"
+                    />
+                  </div>
+                </Form.Group>
+              </Form>
+            </Card.Body>
+          </Card>
+        </Col>
+      </Row>
+    </Container>
+
+  );
+};

package/src/components/stateful/SingleProcessPage.tsx

@@ -0,0 +1,155 @@
+import React, { useState, useEffect, useCallback } from "react";
+
+import { useNavigate, useParams } from "react-router-dom";
+import { SingleProcessView } from "../pure/SingleProcessView";
+import { Process } from "../pure/ProcessManagerView";
+
+export const SingleProcessPage: React.FC = () => {
+  const [process, setProcess] = useState<Process | null>(null);
+  const [ws, setWs] = useState<WebSocket | null>(null);
+  const [loading, setLoading] = useState(true);
+  const navigate = useNavigate();
+  const { processId } = useParams<{ processId: string }>();
+
+  // Connect to WebSocket
+  useEffect(() => {
+    const wsProtocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const wsUrl = `${wsProtocol}//${window.location.host}`;
+    const websocket = new WebSocket(wsUrl);
+    setWs(websocket);
+
+    // Set a timeout to handle cases where we don't get a response
+    const timeoutId = setTimeout(() => {
+      if (loading) {
+        setLoading(false);
+        // If we're still loading after 3 seconds, show an error
+        setProcess(null);
+      }
+    }, 3000);
+
+    // Request specific process when connected
+    websocket.onopen = () => {
+      setLoading(true);
+      if (processId) {
+        websocket.send(
+          JSON.stringify({
+            type: "getProcess",
+            processId,
+          })
+        );
+      }
+    };
+
+    websocket.onerror = (error) => {
+      console.error("WebSocket error:", error);
+      setLoading(false);
+      setProcess(null);
+      clearTimeout(timeoutId);
+    };
+
+    const handleMessage = (event: MessageEvent) => {
+      try {
+        const data = JSON.parse(event.data);
+        // Handle process data response - this should include all captured logs
+        if (data.type === "processData" && data.processId === processId) {
+          setProcess({
+            processId: data.processId,
+            command: data.command,
+            pid: data.pid,
+            timestamp: data.timestamp,
+            status: data.status || "running",
+            exitCode: data.exitCode,
+            error: data.error,
+            // Use the logs sent from the server, which should include all captured logs
+            logs: data.logs || [],
+          });
+          setLoading(false);
+          clearTimeout(timeoutId);
+        }
+        // Handle new log messages that come after the initial data
+        else if (
+          (data.type === "processStdout" || data.type === "processStderr") &&
+          data.processId === processId
+        ) {
+          setProcess((prev) =>
+            prev
+              ? {
+                ...prev,
+                logs: [...(prev.logs || []), data.data],
+              }
+              : null
+          );
+        }
+        // Handle process completion
+        else if (
+          (data.type === "processExited" || data.type === "processError") &&
+          data.processId === processId
+        ) {
+          setProcess((prev) =>
+            prev
+              ? {
+                ...prev,
+                status: data.type === "processExited" ? "exited" : "error",
+                exitCode: data.exitCode,
+                error: data.error,
+              }
+              : null
+          );
+        }
+      } catch (error) {
+        console.error("Error parsing process message:", error);
+        setLoading(false);
+        setProcess(null);
+        clearTimeout(timeoutId);
+      }
+    };
+
+    websocket.addEventListener("message", handleMessage);
+
+    return () => {
+      websocket.removeEventListener("message", handleMessage);
+      websocket.close();
+      clearTimeout(timeoutId);
+    };
+  }, [processId]);
+
+  // Try to find the process in the global state if WebSocket doesn't respond
+  useEffect(() => {
+    // This is a fallback - in a real implementation, you'd want to get this from a global state
+    // or through some other means
+  }, []);
+
+  const handleBack = useCallback(() => {
+    navigate("/processes");
+  }, [navigate]);
+
+  const handleKillProcess = useCallback(
+    (processId: string) => {
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        console.log("Sending killProcess for:", processId);
+        ws.send(
+          JSON.stringify({
+            type: "killProcess",
+            processId,
+          })
+        );
+      } else {
+        console.log("Cannot send killProcess - WebSocket not ready:", {
+          wsExists: !!ws,
+          wsReady: ws?.readyState,
+        });
+      }
+    },
+    [ws]
+  );
+
+  return (
+    <SingleProcessView
+      process={process}
+      onBack={handleBack}
+      loading={loading}
+      onKillProcess={handleKillProcess}
+      ws={ws}
+    />
+  );
+};

package/src/components/stateful/TestPage.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { useEffect, useState } from 'react';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
-
+import { DesignEditor } from '../../../design-editor/DesignEditor';
 import { fetchTestData } from '../../utils/api';
 
 import { TestPageView } from '../pure/TestPageView';
@@ -49,17 +49,122 @@ export const TestPage = () => {
 
     const fetchData = async () => {
       try {
-        const testResponse = await fetchTestData(projectName, testPath, runtime);
-        console.log("testResponse", testResponse)
-        // setTestData(testResponse.testData);
-        // setTestsExist(!!testResponse.testData);
+        const [testResponse, metafileRes] = await Promise.all([
+          fetchTestData(projectName, testPath, runtime),
+          fetch(`/metafiles/${runtime}/${projectName}.json`)
+        ]);
+        
+        console.log('Fetching test data for:', { projectName, testPath, runtime });
         const receivedLogs = await testResponse.logs;
+        console.log('Received logs:', Object.keys(receivedLogs));
+        let sourceFiles = {};
+        
+        if (metafileRes.ok) {
+          const metafile = await metafileRes.json();
+          if (metafile?.metafile?.outputs) {
+            // Find input files only for this test's entry point
+            const tsSources = new Set<string>();
+            const testEntryPoint = `src/${testPath}`;
+            
+            // First find all outputs that match this test
+            const matchingOutputs = Object.entries(metafile.metafile.outputs)
+              .filter(([outputPath, output]) => {
+                const normalizedTestPath = testPath.replace(/\./g, '_');
+                const testFileName = testPath.split('/').pop();
+                const testBaseName = testFileName?.split('.').slice(0, -1).join('.');
+                
+                return output.entryPoint === testEntryPoint || 
+                  outputPath.includes(normalizedTestPath) ||
+                  (testBaseName && outputPath.includes(testBaseName));
+              });
+
+            // Then collect all inputs from matching outputs
+            matchingOutputs.forEach(([_, output]) => {
+              Object.keys(output.inputs).forEach(inputPath => {
+                // Check if this input is a TypeScript file and not in node_modules
+                if ((inputPath.endsWith('.ts') || inputPath.endsWith('.tsx')) &&
+                    !inputPath.includes('node_modules')) {
+                  // Get the full input details from metafile.inputs
+                  const inputDetails = metafile.metafile.inputs[inputPath];
+                  if (inputDetails) {
+                    tsSources.add(inputPath);
+                    // Also include any imported TypeScript files
+                    inputDetails.imports.forEach(imp => {
+                      if ((imp.path.endsWith('.ts') || imp.path.endsWith('.tsx')) &&
+                          !imp.path.includes('node_modules') &&
+                          !imp.external) {
+                        tsSources.add(imp.path);
+                      }
+                    });
+                  }
+                }
+              });
+            });
+            
+            // Organize source files into directory tree structure
+            const fileTree = {};
+            const filesList = await Promise.all(
+              Array.from(tsSources).map(async (filePath) => {
+                try {
+                  const fetchPath = filePath.startsWith('/') 
+                    ? filePath 
+                    : `/${filePath.replace(/^\.\//, '')}`;
+                  const res = await fetch(fetchPath);
+                  if (res.ok) {
+                    return {
+                      path: filePath,
+                      content: await res.text()
+                    };
+                  }
+                  return null;
+                } catch (err) {
+                  console.warn(`Failed to fetch source file ${filePath}:`, err);
+                  return null;
+                }
+              })
+            );
+
+            filesList.forEach(file => {
+              if (!file) return;
+              
+              const parts = file.path.split('/');
+              let currentLevel = fileTree;
+              
+              parts.forEach((part, index) => {
+                if (!currentLevel[part]) {
+                  if (index === parts.length - 1) {
+                    currentLevel[part] = {
+                      __isFile: true,
+                      content: file.content
+                    };
+                  } else {
+                    currentLevel[part] = {};
+                  }
+                }
+                currentLevel = currentLevel[part];
+              });
+            });
+
+            sourceFiles = fileTree;
+          }
+        }
+
+        // Add source files to logs
+        receivedLogs['source_files'] = sourceFiles;
+        console.log('Source files structure:', sourceFiles);
+        
         // Ensure tests.json is properly formatted
-        if (receivedLogs['tests.json'] && typeof receivedLogs['tests.json'] === 'string') {
+        if (receivedLogs['tests.json']) {
+          console.log('tests.json content type:', typeof receivedLogs['tests.json']);
           try {
-            receivedLogs['tests.json'] = JSON.parse(receivedLogs['tests.json']);
+            // Handle both string and already-parsed JSON
+            if (typeof receivedLogs['tests.json'] === 'string') {
+              receivedLogs['tests.json'] = JSON.parse(receivedLogs['tests.json']);
+            }
+            // If it's already an object, leave it as is
           } catch (e) {
             console.error('Failed to parse tests.json:', e);
+            // Keep the original content but don't replace it with an error object
           }
         }
         setLogs(receivedLogs);
@@ -67,7 +172,7 @@ export const TestPage = () => {
         // setLintErrors(testResponse.lintErrors);
 
         try {
-          const summaryResponse = await fetch(`reports/${projectName}/summary.json`);
+          const summaryResponse = await fetch(`/reports/${projectName}/summary.json`);
           if (!summaryResponse.ok) throw new Error('Failed to fetch summary');
           const allSummaries = await summaryResponse.json();
           const testSummary = allSummaries[testPath];
@@ -100,17 +205,20 @@ export const TestPage = () => {
   if (!logs) return <div>loading...</div>
 
   return (
-    <TestPageView
-      route={route as 'results' | 'logs' | 'types' | 'lint' | 'coverage'}
-      setRoute={setRoute}
-      navigate={navigate}
-      projectName={projectName as string}
-      testName={testName}
-      decodedTestPath={decodedTestPath}
-      runtime={runtime}
-      logs={logs}
-      testsExist={testsExist}
-      errorCounts={errorCounts}
-    />
+    <>
+      {/* <DesignEditor projectId="demo-project" /> */}
+      <TestPageView
+        route={route as 'results' | 'logs' | 'types' | 'lint' | 'coverage'}
+        setRoute={setRoute}
+        navigate={navigate}
+        projectName={projectName as string}
+        testName={testName}
+        decodedTestPath={decodedTestPath}
+        runtime={runtime}
+        logs={logs}
+        testsExist={testsExist}
+        errorCounts={errorCounts}
+      />
+    </>
   );
 };