testeranto 0.177.0 → 0.197.0

package/src/components/pure/ThemeCard.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+export const ThemeCard = ({
+  theme,
+  handleThemeChange,
+  value,
+  title,
+  description,
+  style,
+}: {
+  theme: string;
+  handleThemeChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  value: string;
+  title: string;
+  description: string;
+  style: React.CSSProperties;
+}) => (
+  <div className="col-md-4">
+    <div
+      className={`card theme-card ${theme === value ? "border-primary" : ""}`}
+      onClick={() =>
+        handleThemeChange({
+          target: { value },
+        } as React.ChangeEvent<HTMLInputElement>)
+      }
+      style={style}
+    >
+      <div className="card-body text-center p-3">
+        <h5 className="card-title mb-1">{title}</h5>
+        <p className="small text-muted mb-0">{description}</p>
+      </div>
+    </div>
+  </div>
+);

package/src/components/stateful/FeaturesReporter.tsx

@@ -0,0 +1,24 @@
+import React, { useEffect, useState } from 'react';
+import { FeaturesReporterView } from '../pure/FeaturesReporterView';
+import { buildTree } from '../../types/features';
+
+export const FeaturesReporter: React.FC = () => {
+  const [treeData, setTreeData] = useState<any[]>([]);
+
+  useEffect(() => {
+    const fetchProjects = async () => {
+      try {
+        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));
+      } catch (error) {
+        console.error('Error loading projects:', error);
+      }
+    };
+
+    fetchProjects();
+  }, []);
+
+  return <FeaturesReporterView treeData={treeData} />;
+};

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,6 +1,9 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/no-explicit-any */
+
 import React, { useEffect, useState } from 'react';
 import { useParams, useNavigate, useLocation } from 'react-router-dom';
+
 import { ProjectPageView } from '../pure/ProjectPageView';
 import { ISummary } from '../../Types';
 
@@ -35,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([
@@ -75,9 +78,8 @@ export const ProjectPage = () => {
       loading={loading}
       error={error}
       projectName={projectName}
-      route={route}
-      setRoute={setRoute}
-      navigate={navigate}
+      activeTab={route}
+      setActiveTab={setRoute}
     />
   );
 };

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}
+    />
+  );
+};