ruby_reactor 0.1.0 → 0.2.0

data/gui/src/components/__tests__/ReactorDetail.test.tsx

@@ -0,0 +1,111 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import ReactorDetail from '../ReactorDetail.tsx';
+import useSWR from 'swr';
+
+// Mock dependencies
+vi.mock('swr');
+vi.mock('react-router-dom', () => ({
+  useParams: () => ({ id: 'test-reactor-123' }),
+  useNavigate: () => vi.fn(),
+  Link: ({ children }: { children: React.ReactNode }) => <a>{children}</a>
+}));
+
+// Mock child components to isolate tests
+vi.mock('../DagVisualizer.tsx', () => ({
+  default: ({ reactorStatus, error }: any) => (
+    <div data-testid="dag-visualizer">
+      <span data-testid="dag-status">{reactorStatus}</span>
+      <span data-testid="dag-error">{error?.message}</span>
+    </div>
+  )
+}));
+
+vi.mock('../StepInspector.tsx', () => ({
+  default: ({ error }: any) => (
+    <div data-testid="step-inspector">
+      <span data-testid="inspector-error">{error?.message}</span>
+    </div>
+  )
+}));
+
+describe('ReactorDetail', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders failure status correctly', () => {
+    const mockError = {
+      message: "Something went wrong",
+      step_name: "step2",
+      backtrace: ["line 1", "line 2"]
+    };
+
+    const mockData = {
+      id: "test-reactor-123",
+      class: "TestReactor",
+      status: "failed",
+      error: mockError,
+      inputs: {},
+      structure: {},
+      steps: []
+    };
+
+    // Mock useSWR response
+    (useSWR as any).mockReturnValue({
+      data: mockData,
+      error: null,
+      isLoading: false,
+      mutate: vi.fn()
+    });
+
+    render(<ReactorDetail />);
+
+    // 1. Check Status Badge
+    const statusBadges = screen.getAllByText('failed');
+    // Find the one that is the badge (has class text-red-400), not the one in the graph
+    const badge = statusBadges.find(el => el.classList.contains('text-red-400'));
+    expect(badge).toBeInTheDocument();
+
+    // 2. Check Failure Banner
+    expect(screen.getByText('Workflow Failed')).toBeInTheDocument();
+    // "Something went wrong" appears in multiple places (banner, mock props)
+    expect(screen.getAllByText('Something went wrong').length).toBeGreaterThan(0);
+
+    // 3. Check Props passed to DagVisualizer
+    expect(screen.getByTestId('dag-status')).toHaveTextContent('failed');
+    expect(screen.getByTestId('dag-error')).toHaveTextContent('Something went wrong');
+  });
+
+  it('renders success status correctly', () => {
+    const mockData = {
+      id: "test-reactor-123",
+      class: "TestReactor",
+      status: "completed",
+      error: null,
+      inputs: {},
+      structure: {},
+      steps: []
+    };
+
+    (useSWR as any).mockReturnValue({
+      data: mockData,
+      error: null,
+      isLoading: false,
+      mutate: vi.fn()
+    });
+
+    render(<ReactorDetail />);
+
+    // 1. Check Status Badge
+    const statusBadges = screen.getAllByText('completed');
+    const badge = statusBadges.find(el => el.classList.contains('text-emerald-400'));
+    expect(badge).toBeInTheDocument();
+
+    expect(screen.queryByText('Workflow Failed')).not.toBeInTheDocument();
+
+    // 2. Check Props passed to DagVisualizer
+    expect(screen.getByTestId('dag-status')).toHaveTextContent('completed');
+    expect(screen.getByTestId('dag-error')).toBeEmptyDOMElement();
+  });
+});

data/gui/src/components/__tests__/StepInspector.test.tsx

@@ -0,0 +1,408 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import StepInspector from '../StepInspector.tsx';
+
+describe('StepInspector', () => {
+  const defaultProps = {
+    stepName: 'test_step',
+    structure: {
+      test_step: { type: 'step', depends_on: [] }
+    },
+    results: {},
+    trace: [],
+    inputs: {},
+    stepAttempts: {
+      test_step: 1
+    }
+  };
+
+  it('should not show retries if there is only 1 attempt', () => {
+    render(<StepInspector {...defaultProps} />);
+    expect(screen.queryByText(/Retries:/)).not.toBeInTheDocument();
+  });
+
+  it('should show Retries: 1 if there are 2 attempts', () => {
+    const props = {
+      ...defaultProps,
+      stepAttempts: {
+        test_step: 2
+      }
+    };
+    render(<StepInspector {...props} />);
+    expect(screen.getByText('Retries: 1')).toBeInTheDocument();
+  });
+
+  it('should show Retries: 2 if there are 3 attempts', () => {
+    const props = {
+      ...defaultProps,
+      stepAttempts: {
+        test_step: 3
+      }
+    };
+    render(<StepInspector {...props} />);
+    expect(screen.getByText('Retries: 2')).toBeInTheDocument();
+  });
+
+  it('should not show retries if stepAttempts is missing for the step', () => {
+    const props = {
+      ...defaultProps,
+      stepAttempts: {}
+    };
+    render(<StepInspector {...props} />);
+    expect(screen.queryByText(/Retries:/)).not.toBeInTheDocument();
+  });
+
+  describe('Compensation History', () => {
+    const propsWithUndo = {
+      ...defaultProps,
+      stepName: null, // Global View
+      trace: [
+        { type: 'run', step: 'step1', result: 'result1' },
+        { type: 'run', step: 'step2', result: 'result2' },
+        { type: 'compensate', step: 'step2', result: 'compensated step2' },
+        { type: 'undo', step: 'step1', result: 'undid step1' }
+      ]
+    };
+
+    it('should show compensation history in execution order (chronological)', () => {
+      render(<StepInspector {...propsWithUndo} />);
+
+      // Verify labels order (use exact match to avoid matching result blocks)
+      const labels = screen.queryAllByText(/^step\d$/, { selector: 'span' });
+      expect(labels[0]).toHaveTextContent('step2');
+      expect(labels[1]).toHaveTextContent('step1');
+
+      // Verify results are also in order
+      expect(screen.getByText(/"compensated step2"/)).toBeInTheDocument();
+      expect(screen.getByText(/"undid step1"/)).toBeInTheDocument();
+    });
+
+    it('should show the result of the undo/compensate operation', () => {
+      render(<StepInspector {...propsWithUndo} />);
+
+      expect(screen.getByText(/"compensated step2"/)).toBeInTheDocument();
+      expect(screen.getByText(/"undid step1"/)).toBeInTheDocument();
+    });
+
+    it('should show COMPENSATE and UNDO labels', () => {
+      render(<StepInspector {...propsWithUndo} />);
+
+      expect(screen.getByText('compensate')).toBeInTheDocument();
+      expect(screen.getByText('undo')).toBeInTheDocument();
+    });
+  });
+
+  describe('Nested Reactor Support', () => {
+    const mockStructure = {
+      sub_reactor: {
+        type: 'compose',
+        nested_structure: {
+          inner_step: { type: 'step' }
+        }
+      }
+    };
+
+    const mockComposedContexts = {
+      sub_reactor: {
+        context: {
+          value: {
+            intermediate_results: {
+              inner_step: 'inner_result_value',
+              deep_reactor: 'deep_done'
+            },
+            execution_trace: [
+              { step: 'inner_step', type: 'run', arguments: { val: 456 } }
+            ],
+            composed_contexts: {
+              deep_reactor: {
+                context: {
+                  value: {
+                    intermediate_results: {
+                      deep_step: 'deep_result_value'
+                    },
+                    execution_trace: [
+                      { step: 'deep_step', type: 'run', arguments: { deep_val: 789 } }
+                    ]
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    };
+
+    it('correctly resolves and displays results for a nested step', () => {
+      render(
+        <StepInspector
+          stepName="sub_reactor.inner_step"
+          structure={mockStructure}
+          results={{}}
+          inputs={{}}
+          trace={[]}
+          composedContexts={mockComposedContexts}
+        />
+      );
+
+      // Should show step name (base name only)
+      expect(screen.getByText('inner_step')).toBeInTheDocument();
+
+      // Should show resolved result
+      expect(screen.getByText(/"inner_result_value"/)).toBeInTheDocument();
+
+      // Should show resolved arguments from nested trace
+      expect(screen.getByText(/456/)).toBeInTheDocument();
+    });
+
+    it('correctly resolves and displays results for a deeply nested step', () => {
+      render(
+        <StepInspector
+          stepName="sub_reactor.deep_reactor.deep_step"
+          structure={{
+            sub_reactor: {
+              type: 'compose',
+              nested_structure: {
+                deep_reactor: {
+                  type: 'compose',
+                  nested_structure: {
+                    deep_step: { type: 'step' }
+                  }
+                }
+              }
+            }
+          }}
+          results={{}}
+          inputs={{}}
+          trace={[]}
+          composedContexts={mockComposedContexts}
+        />
+      );
+
+      expect(screen.getByText('deep_step')).toBeInTheDocument();
+      expect(screen.getByText(/"deep_result_value"/)).toBeInTheDocument();
+      expect(screen.getByText(/789/)).toBeInTheDocument();
+    });
+
+    it('identifies failures in nested contexts', () => {
+      const failedNestedContexts = {
+        sub_reactor: {
+          context: {
+            value: {
+              failure_reason: { step_name: 'inner_step', message: 'Nested failure' },
+              intermediate_results: {},
+              execution_trace: []
+            }
+          }
+        }
+      };
+
+      render(
+        <StepInspector
+          stepName="sub_reactor.inner_step"
+          structure={mockStructure}
+          results={{}}
+          inputs={{}}
+          trace={[]}
+          composedContexts={failedNestedContexts}
+        />
+      );
+
+      expect(screen.getByText('Failure Details')).toBeInTheDocument();
+      expect(screen.getByText('Nested failure')).toBeInTheDocument();
+    });
+  });
+
+  describe('Recursive Compensation History', () => {
+    const mockComposedContexts = {
+      math_operation: {
+        context: {
+          value: {
+            execution_trace: [
+              { type: 'compensate', step: 'do_something', result: 'comp_val' },
+              { type: 'undo', step: 'multiply', result: 'undo_val' }
+            ],
+            undo_stack: [
+              { step_name: 'pending_step' }
+            ]
+          }
+        }
+      },
+      child_reactor: {
+        context: {
+          value: {
+            execution_trace: [
+              { type: 'undo', step: 'wait_for', result: 'child_undo' }
+            ]
+          }
+        }
+      }
+    };
+
+    const props = {
+      ...defaultProps,
+      stepName: null, // Global View
+      trace: [
+        { type: 'compensate', step: 'math_operation', result: 'math_res' },
+        { type: 'undo', step: 'child_reactor', result: 'child_res' }
+      ],
+      composedContexts: mockComposedContexts
+    };
+
+    it('should display grouped blocks for each reactor', () => {
+      render(<StepInspector {...props} />);
+
+      expect(screen.getByText('Root Reactor')).toBeInTheDocument();
+      // math_operation and child_reactor appear twice (header and step)
+      expect(screen.getAllByText('math_operation').length).toBe(2);
+      expect(screen.getAllByText('child_reactor').length).toBe(2);
+    });
+
+    it('should recursively collect executed undo and compensate events', () => {
+      render(<StepInspector {...props} />);
+
+      // Root level (found twice as discussed)
+      expect(screen.getAllByText('math_operation').length).toBe(2);
+      expect(screen.getAllByText('child_reactor').length).toBe(2);
+
+      // Nested math_operation level
+      expect(screen.getByText('do_something')).toBeInTheDocument();
+      expect(screen.getByText('multiply')).toBeInTheDocument();
+      expect(screen.getByText(/"comp_val"/)).toBeInTheDocument();
+      expect(screen.getByText(/"undo_val"/)).toBeInTheDocument();
+
+      // Nested child_reactor level
+      expect(screen.getByText('wait_for')).toBeInTheDocument();
+      expect(screen.getByText(/"child_undo"/)).toBeInTheDocument();
+    });
+
+    it('should recursively collect pending items from undo_stack', () => {
+      render(<StepInspector {...props} />);
+
+      expect(screen.getByText('pending_step')).toBeInTheDocument();
+      // Verify it's marked as pending
+      expect(screen.getAllByText('pending').length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Failure Information', () => {
+    const failedProps = {
+      ...defaultProps,
+      stepName: 'failed_step',
+      composedContexts: {
+        failed_step: {
+          context: {
+            value: {
+              status: 'failed',
+              failure_reason: {
+                message: 'Something went wrong',
+                step_name: 'failed_step',
+                exception_class: 'CustomError',
+                backtrace: [
+                  'line 1',
+                  'line 2',
+                  'line 3',
+                  'line 4',
+                  'line 5',
+                  'line 6',
+                  'line 7'
+                ]
+              },
+              intermediate_results: {},
+              execution_trace: []
+            }
+          }
+        }
+      },
+      error: {
+        message: 'Something went wrong',
+        step_name: 'failed_step',
+        exception_class: 'CustomError',
+        backtrace: [
+          'line 1',
+          'line 2',
+          'line 3',
+          'line 4',
+          'line 5',
+          'line 6',
+          'line 7'
+        ]
+      }
+    };
+
+    it('should display the exception class', () => {
+      render(<StepInspector {...failedProps} />);
+      expect(screen.getByText('CustomError')).toBeInTheDocument();
+    });
+
+    it('should truncate the backtrace to 5 lines by default', () => {
+      render(<StepInspector {...failedProps} />);
+
+      const backtraceText = screen.getByText(/line 1/);
+      expect(backtraceText.textContent).toContain('line 5');
+      expect(backtraceText.textContent).not.toContain('line 6');
+
+      expect(screen.getByText(/Show More/)).toBeInTheDocument();
+    });
+
+    it('should expand the backtrace when clicking Show More', () => {
+      render(<StepInspector {...failedProps} />);
+
+      const showMoreButton = screen.getByText(/Show More/);
+      fireEvent.click(showMoreButton);
+
+      const backtraceText = screen.getByText(/line 1/);
+      expect(backtraceText.textContent).toContain('line 7');
+      expect(screen.getByText(/Show Less/)).toBeInTheDocument();
+    });
+  });
+
+  describe('Validation Errors', () => {
+    const validationErrorProps = {
+      ...defaultProps,
+      stepName: 'validation_step',
+      composedContexts: {
+        validation_step: {
+          context: {
+            value: {
+              status: 'failed',
+              failure_reason: {
+                message: 'Validation failed',
+                step_name: 'validation_step',
+                validation_errors: {
+                  field1: ['Error 1', 'Error 2'],
+                  field2: 'Single Error'
+                }
+              },
+              intermediate_results: {},
+              execution_trace: []
+            }
+          }
+        }
+      },
+      error: {
+        message: 'Validation failed',
+        step_name: 'validation_step',
+        validation_errors: {
+          field1: ['Error 1', 'Error 2'],
+          field2: 'Single Error'
+        }
+      }
+    };
+
+    it('should display validation errors section', () => {
+      render(<StepInspector {...validationErrorProps} />);
+      expect(screen.getByText('Validation Errors')).toBeInTheDocument();
+    });
+
+    it('should display field names and error messages', () => {
+      render(<StepInspector {...validationErrorProps} />);
+
+      expect(screen.getByText('field1:')).toBeInTheDocument();
+      expect(screen.getByText('- Error 1')).toBeInTheDocument();
+      expect(screen.getByText('- Error 2')).toBeInTheDocument();
+
+      expect(screen.getByText('field2:')).toBeInTheDocument();
+      expect(screen.getByText('- Single Error')).toBeInTheDocument();
+    });
+  });
+});

data/gui/src/globals.d.ts

@@ -0,0 +1,7 @@
+export { };
+
+declare global {
+  interface Window {
+    RUBY_REACTOR_BASE?: string;
+  }
+}

data/gui/src/index.css

@@ -0,0 +1,14 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+@import "tailwindcss";
+
+@theme {
+  --font-sans: 'Inter', system-ui, sans-serif;
+  --color-slate-950: #020617;
+  --color-slate-900: #0f172a;
+  --color-slate-800: #1e293b;
+  --color-indigo-500: #6366f1;
+}
+
+body {
+  @apply bg-slate-950 text-slate-50 font-sans antialiased;
+}

data/gui/src/lib/utils.ts

@@ -0,0 +1,13 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function apiUrl(path: string) {
+  const base = window.RUBY_REACTOR_BASE || '/';
+  const normalizedBase = base.endsWith('/') ? base.slice(0, -1) : base;
+  const normalizedPath = path.startsWith('/') ? path : `/${path}`;
+  return `${normalizedBase}${normalizedPath}`;
+}

data/gui/src/main.tsx

@@ -0,0 +1,14 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+import { ErrorBoundary } from './components/ErrorBoundary.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <ErrorBoundary>
+      <App />
+    </ErrorBoundary>
+  </StrictMode>,
+)

data/gui/src/test/setup.ts

@@ -0,0 +1,11 @@
+import '@testing-library/jest-dom'
+// import { vi } from 'vitest'
+
+// Polyfill ResizeObserver
+class ResizeObserver {
+  observe() { }
+  unobserve() { }
+  disconnect() { }
+}
+// @ts-ignore
+globalThis.ResizeObserver = ResizeObserver

data/gui/tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

data/gui/tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

data/gui/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

data/gui/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

data/gui/vite.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  base: './',
+})

data/gui/vitest.config.ts

@@ -0,0 +1,13 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './src/test/setup.ts',
+    css: false,
+  },
+})