testeranto 0.189.0 → 0.197.0

package/docs/test-page-components.md

@@ -0,0 +1,91 @@
+# TestPage and TestPageView Components
+
+## Overview
+These components provide a test results viewing interface that resembles VS Code, using Monaco Editor for code display and editing. The interface is split into three main sections:
+1. Left sidebar: Navigation for logs, source files, and artifacts
+2. Center panel: Monaco Editor for viewing and editing content
+3. Right panel: Test results and artifact previews
+
+## TestPage Component
+The main container component that handles data fetching and state management.
+
+### Key Responsibilities:
+1. **Route Management**: Syncs the active tab with URL hash changes
+2. **Data Fetching**: Retrieves test data, logs, and source files from the server
+3. **State Management**: Maintains loading states, errors, and test metadata
+4. **Source File Organization**: Builds a file tree structure from metafile data
+
+### Props:
+- Uses React Router hooks: `useNavigate`, `useLocation`, `useParams`
+- No explicit props passed from parent components
+
+### State Variables:
+- `route`: Active tab ('results', 'logs', 'types', 'lint', 'coverage')
+- `testName`: Name of the current test
+- `logs`: Collected logs and test data
+- `loading`: Data loading status
+- `error`: Error information
+- `testsExist`: Whether tests exist for this path
+- `errorCounts`: Counts of different error types
+- `summary`: Test summary data
+
+## TestPageView Component
+The presentational component that renders the VS Code-like interface.
+
+### Key Sections:
+1. **Navigation Bar**: Top bar with test name, runtime badge, and AI assistant button
+2. **Sidebar**: File tree navigation for logs, source files, and artifacts
+3. **Editor Panel**: Monaco Editor instance for code viewing/editing
+4. **Preview Panel**: Test results and artifact previews
+
+### Props:
+```typescript
+interface TestPageViewProps {
+  projectName: string;
+  testName: string;
+  decodedTestPath: string;
+  runtime: string;
+  logs: Record<string, string>;
+  testsExist: boolean;
+  errorCounts: {
+    runTimeErrors: number;
+    typeErrors: number;
+    staticErrors: number;
+  };
+}
+```
+
+### Sub-components:
+1. **FileTree**: Recursive component for displaying source file hierarchy
+2. **ArtifactTree**: Recursive component for displaying test artifacts
+3. **LogNavItem**: Navigation items for different log types with status indicators
+4. **TestStatusBadge**: Visual indicator of test status
+
+### Monaco Editor Integration:
+- Uses `@monaco-editor/react` package
+- Supports multiple languages based on file extensions
+- Read-only mode for non-source files
+- Theme-aware (light/dark) based on application theme
+
+## Data Flow
+1. TestPage fetches data on mount using test parameters from URL
+2. Data is processed and organized into a structured format
+3. TestPageView receives processed data and renders the interface
+4. User interactions update the active tab and selected file
+5. Monaco Editor displays the content of selected files
+
+## Future VS Code-like Enhancements
+1. **Multi-tab Editor**: Support opening multiple files in tabs
+2. **File Operations**: Create, rename, delete files in the file tree
+3. **Terminal Integration**: Built-in terminal for command execution
+4. **Git Integration**: Source control indicators and operations
+5. **Extensions**: Plugin system for additional functionality
+6. **Workspace Management**: Save and restore editor layouts
+7. **Command Palette**: Quick access to actions via keyboard
+8. **Settings**: Customizable editor preferences
+
+## Key Dependencies
+- React Router: Navigation and routing
+- Monaco Editor: Code editing functionality
+- React Bootstrap: UI components and layout
+- Custom hooks for WebSocket connections and state management

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "testeranto",
   "description": "the AI powered BDD test framework for typescript projects",
-  "version": "0.189.0",
+  "version": "0.197.0",
   "engines": {
     "node": "18.18.0"
   },
@@ -132,7 +132,8 @@
     "t-init": "tsx dist/prebuild/init-docs.mjs",
     "t-report": "tsx dist/prebuild/ReportServer.mjs",
     "compile-docs": "node scripts/compile-docs.js",
-    "prepublish": "self-import"
+    "prepublish": "self-import",
+    "summarizeLicenses": "yarn licenses list > ALL_LICENSES.txt; yarn license-checker >> ALL_LICENSES.txt; yarn license-checker --summary >> ALL_LICENSES.txt"
   },
   "peerDependencies": {
     "@types/react": "18.2.0",
@@ -150,8 +151,6 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.23.0",
-    "@revideo/cli": "0.10.4",
-    "@revideo/ui": "0.10.4",
     "@swc/core": "^1.3.26",
     "@types/express": "^5.0.0",
     "@types/express-session": "^1.18.1",
@@ -160,10 +159,9 @@
     "@types/react-dom": "18.2.0",
     "@types/react-test-renderer": "19.0.0",
     "@types/uuid": "^10.0.0",
-    "@types/ws": "^8.5.10",
+    "@types/ws": "^8.18.1",
     "@typescript-eslint/eslint-plugin": "^5.46.0",
     "@typescript-eslint/parser": "^5.46.0",
-    "marked": "^12.0.2",
     "self-import": "*",
     "testeranto-react": "0.0.8",
     "ts-node": "^10.9.1",
@@ -174,14 +172,20 @@
     "@bscotch/debounce-watch": "^1.1.0",
     "@humanwhocodes/config-array": "^0.13.0",
     "@jest/globals": "^30.0.4",
+    "@monaco-editor/react": "^4.7.0",
     "@types/eslint": "^9.6.1",
+    "@types/fabric": "^5.3.10",
+    "@types/file-saver": "^2.0.7",
     "@types/node-static": "^0.7.11",
     "@types/react-router-dom": "^5.3.3",
     "@types/xmldom": "^0.1.34",
     "@ungap/structured-clone": "^1.3.0",
+    "@xterm/addon-fit": "^0.10.0",
     "ansi-colors": "^4.1.3",
+    "axios": "^1.11.0",
     "babel-loader": "^8.2.5",
-    "bootstrap": "^5.3.4",
+    "bootstrap": "^5.3.7",
+    "bootstrap-icons": "^1.13.1",
     "chai": "^5.2.0",
     "chromium": "^3.0.3",
     "dynamic-base": "^1.1.2",
@@ -197,22 +201,33 @@
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^5.1.0",
     "express": "^4.21.2",
+    "fabric": "6.7.1",
     "fast-xml-parser": "^5.2.5",
+    "file-saver": "^2.0.5",
     "fs-extra": "^11.2.0",
     "fs.promises.exists": "^1.1.4",
     "get-audio-duration": "^4.0.1",
+    "html-to-image": "^1.11.13",
+    "license-checker": "^25.0.1",
     "mermaid": "^11.8.1",
     "mermaid-isomorphic": "^3.0.4",
+    "micromark": "^4.0.2",
+    "micromark-extension-gfm-table": "^2.1.1",
+    "monaco-editor": "^0.45.0",
     "node-static": "^0.7.11",
+    "octokit": "^5.0.3",
     "openai": "^5.12.2",
     "puppeteer": "^24.4.0",
     "puppeteer-core": "24.4.0",
     "react": "18.2.0",
     "react-bootstrap": "^2.10.9",
     "react-dom": "18.2.0",
+    "react-draggable": "^4.5.0",
+    "react-resizable": "^3.0.5",
     "react-router-dom": "^7.7.0",
     "sass": "^1.90.0",
     "ssml-check": "^0.4.6",
+    "testeranto-stilo": "0.0.7",
     "tsc-prog": "^2.3.0",
     "tsx": "^4.19.3",
     "type-fest": "^4.41.0",
@@ -220,6 +235,10 @@
     "url": "^0.11.4",
     "uuid": "^10.0.0",
     "validate-with-xmllint": "^1.2.1",
-    "xmldom": "^0.6.0"
+    "ws": "^8.18.3",
+    "xmldom": "^0.6.0",
+    "xterm": "^5.3.0",
+    "xterm-addon-fit": "^0.8.0",
+    "xterm-react": "^1.0.0"
   }
 }

package/src/App.tsx

@@ -7,6 +7,12 @@ import { ProjectPage } from './components/stateful/ProjectPage';
 import { ProjectsPage } from './components/stateful/ProjectsPage';
 import { AppFrame } from './components/pure/AppFrame';
 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';
+
 
 export const App = () => {
   return (
@@ -18,6 +24,11 @@ export const App = () => {
           <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>

package/src/PM/PM_WithEslintAndTsc.ts

@@ -241,10 +241,15 @@ export abstract class PM_WithEslintAndTsc extends PM_Base {
   };
 
   writeBigBoard = () => {
-    fs.writeFileSync(
-      `./testeranto/reports/${this.name}/summary.json`,
-      JSON.stringify(this.summary, null, 2)
-    );
+    const summaryPath = `./testeranto/reports/${this.name}/summary.json`;
+    const summaryData = JSON.stringify(this.summary, null, 2);
+    fs.writeFileSync(summaryPath, summaryData);
+    
+    // Broadcast the update
+    this.broadcast({
+      type: 'summaryUpdate',
+      data: this.summary
+    });
   };
 
   abstract checkForShutdown();

package/src/PM/base.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-async-promise-executor */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import fs from "fs";

package/src/PM/index.ts

@@ -10,7 +10,7 @@ export abstract class PM {
 
   abstract start(): Promise<void>;
   abstract stop(): Promise<void>;
-  abstract testArtiFactoryfileWriter(tLog: ITLog, callback: (Promise) => void);
+  abstract testArtiFactoryfileWriter(tLog: ITLog, callback: (promise: Promise<any>) => void): any;
 
   abstract $(selector: string, page: string): any;
   abstract click(selector: string): any;