ruby_reactor 0.1.0 → 0.2.0

data/gui/src/components/StepInspector.tsx

@@ -0,0 +1,492 @@
+import { useMemo, useState } from 'react';
+import { Terminal, Box, ArrowRight, ArrowRightCircle, AlertCircle, RotateCcw, History, ChevronLeft, CheckCircle, ChevronDown, ChevronUp, Play } from 'lucide-react';
+import { apiUrl } from '../lib/utils';
+
+
+
+interface UndoStackItem {
+  step_name: string;
+  arguments: any;
+  result: any;
+}
+
+interface StepInspectorProps {
+  stepName: string | null;
+  structure: Record<string, any>;
+  results: Record<string, any>;
+  trace: any[];
+  inputs: Record<string, any>;
+  error?: any;
+  undoStack?: UndoStackItem[];
+  stepAttempts?: Record<string, number>;
+  composedContexts?: Record<string, any>;
+  onClose?: () => void;
+  reactorId?: string;
+  reactorStatus?: string;
+  onAction?: () => void;
+}
+
+export default function StepInspector({
+  stepName,
+  structure,
+  results,
+  trace,
+  error,
+  undoStack = [],
+  stepAttempts = {},
+  composedContexts = {},
+  onClose,
+  reactorId,
+  reactorStatus,
+  onAction
+}: StepInspectorProps) {
+  const [showFullBacktrace, setShowFullBacktrace] = useState(false);
+  const [resumePayload, setResumePayload] = useState('');
+  const [resumeError, setResumeError] = useState<string | null>(null);
+  const [isResuming, setIsResuming] = useState(false);
+
+  const handleResume = async () => {
+    if (!reactorId || !stepName) return;
+
+    setIsResuming(true);
+    setResumeError(null);
+
+    try {
+      // Validate JSON
+      let payload = {};
+      if (resumePayload.trim()) {
+        try {
+          payload = JSON.parse(resumePayload);
+        } catch (e) {
+          setResumeError("Invalid JSON payload");
+          setIsResuming(false);
+          return;
+        }
+      }
+
+      const response = await fetch(apiUrl(`/api/reactors/${reactorId}/continue`), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          payload: payload,
+          step_name: stepName.split('.').pop()
+        })
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        setResumeError(data.error || "Failed to resume");
+      } else {
+        setResumePayload('');
+        if (onAction) onAction();
+        if (onClose) onClose();
+      }
+    } catch (e) {
+      console.error("Failed to resume", e);
+      setResumeError("An unexpected error occurred");
+    } finally {
+      setIsResuming(false);
+    }
+  };
+
+  // Resolve recursive data based on path
+  const resolvedData = useMemo(() => {
+    if (!stepName) return null;
+
+    const parts = stepName.split('.');
+
+    const resolve = (pathParts: string[], struct: any, context: any): any => {
+      const part = pathParts[0];
+      const isLast = pathParts.length === 1;
+      const stepConfig = struct?.[part];
+
+      if (isLast) {
+        const results = context?.intermediate_results || {};
+        const trace = context?.execution_trace || [];
+        const attempts = context?.retry_context?.step_attempts || {};
+
+        return {
+          stepConfig,
+          result: results[part],
+          attempts: attempts[part] || 0,
+          trace: trace.filter((t: any) => t.step === part),
+          context: context
+        };
+      } else {
+        const nestedData = context?.composed_contexts?.[part];
+        const nestedContext = nestedData?.context?.value || nestedData?.context;
+
+        return resolve(
+          pathParts.slice(1),
+          stepConfig?.nested_structure,
+          nestedContext
+        );
+      }
+    };
+
+    // Initial context mock for root
+    const rootContext = {
+      composed_contexts: composedContexts,
+      failure_reason: error,
+      intermediate_results: results,
+      execution_trace: trace,
+      retry_context: { step_attempts: stepAttempts }
+    };
+
+    try {
+      return resolve(parts, structure, rootContext);
+    } catch (e) {
+      console.error("Error resolving step data:", e);
+      return null;
+    }
+  }, [stepName, structure, results, trace, stepAttempts, composedContexts, error]);
+
+  const stepConfig = resolvedData?.stepConfig;
+  const result = resolvedData?.result;
+  const isFailedStep = (resolvedData?.context?.failure_reason?.step_name === stepName?.split('.').pop());
+  const attempts = resolvedData?.attempts || 0;
+  const retries = attempts > 1 ? attempts - 1 : 0;
+
+  // Find relevant trace events
+  const stepEvents = resolvedData?.trace || [];
+
+  const lastEvent = stepEvents[stepEvents.length - 1];
+  const stepArgs = lastEvent?.arguments || (isFailedStep ? resolvedData?.context?.failure_reason?.step_arguments : {});
+
+  // Calculate combined undo history (executed + pending) recursively
+  const groupedUndoHistory = useMemo(() => {
+    interface UndoItem {
+      step_name: string;
+      result: any;
+      status: 'executed' | 'pending';
+      timestamp: string | null;
+      type: 'undo' | 'compensate';
+    }
+
+    interface ReactorUndoGroup {
+      reactorName: string;
+      items: UndoItem[];
+    }
+
+    const groups: ReactorUndoGroup[] = [];
+
+    const collectUndos = (currentTrace: any[], currentUndoStack: any[], currentComposedContexts: any, reactorName: string) => {
+      const executedUndos: UndoItem[] = currentTrace
+        .filter(e => e.type === 'undo' || e.type === 'compensate')
+        .map(e => ({
+          step_name: e.step,
+          result: e.result,
+          status: 'executed' as const,
+          timestamp: e.timestamp?._type === 'Time' ? e.timestamp.value : null,
+          type: e.type as 'undo' | 'compensate'
+        }));
+
+      const pendingUndos: UndoItem[] = (currentUndoStack || []).map(item => ({
+        step_name: item.step_name,
+        result: null,
+        status: 'pending' as const,
+        timestamp: null,
+        type: 'undo' as const
+      }));
+
+      const items = [...executedUndos, ...pendingUndos.reverse()];
+      if (items.length > 0) {
+        groups.push({ reactorName, items });
+      }
+
+      // Check for undos in composed contexts
+      Object.entries(currentComposedContexts || {}).forEach(([name, data]: [string, any]) => {
+        const nestedContext = data?.context?.value || data?.context;
+        if (nestedContext) {
+          collectUndos(
+            nestedContext.execution_trace || [],
+            nestedContext.undo_stack || [],
+            nestedContext.composed_contexts || {},
+            name
+          );
+        }
+      });
+    };
+
+    collectUndos(trace, undoStack, composedContexts, 'Root Reactor');
+    return groups;
+  }, [trace, undoStack, composedContexts]);
+
+  if (!stepName) {
+    return (
+      <div className="h-full flex flex-col bg-slate-900/50 backdrop-blur-sm rounded-xl border border-slate-800 overflow-hidden">
+        <div className="px-6 py-4 border-b border-slate-800 bg-slate-900/80">
+          <div className="flex items-center gap-3">
+            <div className="p-2 bg-slate-800 rounded-lg">
+              <History className="w-5 h-5 text-slate-400" />
+            </div>
+            <div>
+              <h2 className="font-bold text-white text-lg">Execution Overview</h2>
+              <div className="text-xs text-slate-500 font-mono mt-0.5">Global State</div>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex-1 overflow-y-auto p-6 space-y-8">
+          {groupedUndoHistory.length > 0 ? (
+            <div>
+              <h3 className="text-sm font-medium text-slate-400 mb-3 flex items-center gap-2">
+                <RotateCcw className="w-4 h-4" />
+                Compensation History
+              </h3>
+              <div className="space-y-6">
+                {groupedUndoHistory.map((group, groupIdx) => (
+                  <div key={groupIdx} className="space-y-3">
+                    <div className="flex items-center gap-2 px-2">
+                      <div className="h-px flex-1 bg-slate-800"></div>
+                      <span className="text-[10px] font-bold uppercase tracking-widest text-slate-500 bg-slate-900/50 px-2 py-0.5 rounded border border-slate-800">
+                        {group.reactorName}
+                      </span>
+                      <div className="h-px flex-1 bg-slate-800"></div>
+                    </div>
+                    <div className="space-y-2">
+                      {group.items.map((item, idx) => (
+                        <div key={idx} className={`rounded-lg p-3 border flex items-start gap-3 ${item.status === 'executed'
+                          ? 'bg-slate-950/50 border-slate-800'
+                          : 'bg-slate-900/30 border-slate-800/50 border-dashed opacity-75'
+                          }`}>
+                          <div className={`p-1.5 rounded mt-0.5 ${item.status === 'executed'
+                            ? 'bg-emerald-500/10 text-emerald-400'
+                            : 'bg-slate-700/50 text-slate-500'
+                            }`}>
+                            {item.status === 'executed' ? <CheckCircle className="w-3 h-3" /> : <Box className="w-3 h-3" />}
+                          </div>
+                          <div className="min-w-0 flex-1">
+                            <div className="flex items-center justify-between gap-2">
+                              <span className={`font-medium text-sm ${item.status === 'executed' ? 'text-slate-300' : 'text-slate-500'
+                                }`}>
+                                {item.step_name}
+                              </span>
+                              <span className="text-[10px] uppercase font-mono tracking-wider px-1.5 py-0.5 rounded bg-slate-800 text-slate-500 flex items-center gap-1.5">
+                                {item.type && (
+                                  <span className={`font-bold ${item.type === 'compensate' ? 'text-amber-400' : 'text-indigo-400'}`}>
+                                    {item.type}
+                                  </span>
+                                )}
+                                <span className="opacity-50">|</span>
+                                {item.status}
+                              </span>
+                            </div>
+                            {item.status === 'executed' && item.result && (
+                              <div className="mt-2 bg-black/30 rounded border border-white/5 p-2 font-mono text-xs text-slate-400 overflow-x-auto">
+                                {JSON.stringify(item.result, null, 2)}
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ) : (
+            <div className="h-40 flex flex-col items-center justify-center text-slate-500 border border-slate-800/50 border-dashed rounded-xl bg-slate-900/30">
+              <RotateCcw className="w-6 h-6 mb-2 opacity-50" />
+              <p className="text-center font-medium text-sm">Undo History Empty</p>
+              <p className="text-center text-xs mt-1 text-slate-600">No compensations executed or pending.</p>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full flex flex-col bg-slate-900/50 backdrop-blur-sm rounded-xl border border-slate-800 overflow-hidden">
+      <div className="px-6 py-4 border-b border-slate-800 bg-slate-900/80">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            {onClose && (
+              <button
+                onClick={onClose}
+                className="p-1 hover:bg-white/10 rounded-full text-slate-400 hover:text-white transition-colors"
+              >
+                <ChevronLeft className="w-5 h-5" />
+              </button>
+            )}
+            <div className="p-2 bg-indigo-500/10 rounded-lg">
+              <Box className="w-5 h-5 text-indigo-400" />
+            </div>
+            <div>
+              <h2 className="font-bold text-white text-lg">{stepName?.split('.').pop()}</h2>
+              <div className="flex items-center gap-2 text-xs text-slate-500 font-mono mt-0.5">
+                <span className="uppercase tracking-wider text-indigo-400">{stepConfig?.type || 'UNKNOWN'}</span>
+                {stepConfig?.async && <span className="bg-slate-800 px-1.5 py-0.5 rounded text-slate-400">ASYNC</span>}
+              </div>
+            </div>
+          </div>
+          {retries > 0 && (
+            <div className="flex items-center gap-1.5 px-2.5 py-1 bg-amber-500/10 border border-amber-500/20 rounded-md">
+              <span className="text-xs font-medium text-amber-500">Retries: {retries}</span>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-6 space-y-8">
+
+        {/* Resume Action */}
+        {reactorStatus === 'paused' && stepConfig?.type === 'interrupt' && (
+          <div className="bg-emerald-500/5 rounded-lg border border-emerald-500/20 p-4">
+            <h3 className="text-sm font-medium text-emerald-400 mb-2 flex items-center gap-2">
+              <Play className="w-4 h-4" />
+              Resume Execution
+            </h3>
+            <p className="text-xs text-slate-400 mb-3">
+              This step is an interrupt point. You can provide a payload and resume execution from here.
+            </p>
+
+            <div className="space-y-3">
+              <div>
+                <label className="text-xs font-mono text-slate-500 mb-1.5 block">Payload (JSON)</label>
+                <textarea
+                  value={resumePayload}
+                  onChange={(e) => setResumePayload(e.target.value)}
+                  placeholder='{"key": "value"}'
+                  className="w-full h-24 bg-slate-950 border border-slate-800 rounded-lg p-3 text-sm font-mono text-slate-200 focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/50 font-mono placeholder-slate-700"
+                />
+              </div>
+
+              {resumeError && (
+                <div className="text-xs text-red-400 flex items-center gap-1.5 bg-red-500/10 p-2 rounded border border-red-500/20">
+                  <AlertCircle className="w-3 h-3" />
+                  {resumeError}
+                </div>
+              )}
+
+              <button
+                onClick={handleResume}
+                disabled={isResuming}
+                className="w-full py-2 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg text-sm font-medium shadow-lg shadow-emerald-500/20 transition-all hover:-translate-y-0.5 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {isResuming ? 'Resuming...' : 'Resume Reactor'}
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Error Section */}
+        {isFailedStep && resolvedData?.context?.failure_reason && (
+          <div>
+            <h3 className="text-sm font-medium text-red-500 mb-3 flex items-center gap-2">
+              <AlertCircle className="w-4 h-4" />
+              Failure Details
+            </h3>
+            <div className="bg-red-500/10 rounded-lg p-4 font-mono text-xs border border-red-500/20 text-red-300 overflow-x-auto space-y-2">
+              <div className="flex flex-col gap-1">
+                {resolvedData.context.failure_reason.exception_class && (
+                  <span className="text-[10px] uppercase font-bold tracking-wider text-red-400 opacity-70">
+                    {resolvedData.context.failure_reason.exception_class}
+                  </span>
+                )}
+                <div className="font-bold text-sm leading-relaxed">{resolvedData.context.failure_reason.message}</div>
+              </div>
+
+              {resolvedData.context.failure_reason.validation_errors && (
+                <div className="pt-3 mt-3 border-t border-red-500/10">
+                  <span className="text-[10px] uppercase font-bold tracking-widest text-red-400/50 mb-2 block">Validation Errors</span>
+                  <div className="space-y-2 bg-red-950/20 rounded p-2">
+                    {Object.entries(resolvedData.context.failure_reason.validation_errors).map(([field, messages]: [string, any]) => (
+                      <div key={field} className="flex flex-col">
+                        <span className="font-bold text-red-400 text-xs">{field}:</span>
+                        <div className="pl-2">
+                          {Array.isArray(messages) ? (
+                            messages.map((msg: string, i: number) => (
+                              <div key={i} className="text-red-300/90">- {msg}</div>
+                            ))
+                          ) : (
+                            <div className="text-red-300/90">- {String(messages)}</div>
+                          )}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {resolvedData.context.failure_reason.backtrace && (
+                <div className="pt-3 mt-3 border-t border-red-500/10">
+                  <div className="flex items-center justify-between mb-2">
+                    <span className="text-[10px] uppercase font-bold tracking-widest text-red-400/50">Stack Trace</span>
+                    <button
+                      onClick={() => setShowFullBacktrace(!showFullBacktrace)}
+                      className="flex items-center gap-1 text-[10px] font-bold text-red-400/70 hover:text-red-400 transition-colors uppercase tracking-wider"
+                    >
+                      {showFullBacktrace ? (
+                        <><ChevronUp className="w-3 h-3" /> Show Less</>
+                      ) : (
+                        <><ChevronDown className="w-3 h-3" /> Show More ({resolvedData.context.failure_reason.backtrace.length} lines)</>
+                      )}
+                    </button>
+                  </div>
+                  <div className="text-red-400/70 whitespace-pre-wrap leading-relaxed max-h-[300px] overflow-y-auto custom-scrollbar">
+                    {showFullBacktrace
+                      ? resolvedData.context.failure_reason.backtrace.join('\n')
+                      : resolvedData.context.failure_reason.backtrace.slice(0, 5).join('\n')
+                    }
+                    {!showFullBacktrace && resolvedData.context.failure_reason.backtrace.length > 5 && (
+                      <div className="mt-1 text-red-400/30 italic">... and {resolvedData.context.failure_reason.backtrace.length - 5} more lines</div>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Dependencies */}
+        {stepConfig?.depends_on?.length > 0 && (
+          <div>
+            <h3 className="text-sm font-medium text-slate-400 mb-3 flex items-center gap-2">
+              <ArrowRightCircle className="w-4 h-4" />
+              Dependencies
+            </h3>
+            <div className="flex flex-wrap gap-2">
+              {stepConfig.depends_on.map((dep: string) => (
+                <span key={dep} className="px-2 py-1 bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 font-mono">
+                  {dep}
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Inputs / Arguments */}
+        <div>
+          <h3 className="text-sm font-medium text-slate-400 mb-3 flex items-center gap-2">
+            <ArrowRight className="w-4 h-4" />
+            Arguments
+          </h3>
+          <div className="bg-slate-950 rounded-lg p-4 font-mono text-xs border border-slate-800 overflow-x-auto">
+            <pre className="text-slate-300">{JSON.stringify(stepArgs, null, 2)}</pre>
+          </div>
+        </div>
+
+        {/* Result */}
+        <div>
+          <h3 className="text-sm font-medium text-slate-400 mb-3 flex items-center gap-2">
+            <Terminal className="w-4 h-4" />
+            Result
+          </h3>
+          {result !== undefined ? (
+            <div className="bg-slate-950 rounded-lg p-4 font-mono text-xs border border-slate-800 overflow-x-auto">
+              <pre className="text-emerald-400">{JSON.stringify(result, null, 2)}</pre>
+            </div>
+          ) : (
+            <div className="bg-slate-950/50 rounded-lg p-4 font-mono text-xs border border-slate-800/50 text-slate-600 italic">
+              {isFailedStep ? <span className="text-red-400">Step Failed</span> : 'No result (Pending or Failed)'}
+            </div>
+          )}
+        </div>
+
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,140 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import DagVisualizer from '../DagVisualizer.tsx';
+
+// Mock ReactFlow to inspect nodes
+vi.mock('@xyflow/react', async () => {
+  const actual = await vi.importActual('@xyflow/react');
+  return {
+    ...actual,
+    ReactFlow: vi.fn(({ nodes }) => (
+      <div data-testid="react-flow-mock">
+        {nodes.map((n: any) => (
+          <div key={n.id} data-testid={`node-${n.id}`} data-status={n.data.status} data-label={n.data.label}>
+            {n.id}
+          </div>
+        ))}
+      </div>
+    )),
+    Handle: () => <div />,
+    Position: { Top: 'top', Bottom: 'bottom' },
+    Background: () => <div />,
+    Controls: () => <div />,
+  };
+});
+
+describe('DagVisualizer', () => {
+  const mockStructure = {
+    step1: { type: 'step', depends_on: [] },
+    sub_reactor: {
+      type: 'compose',
+      depends_on: ['step1'],
+      nested_structure: {
+        inner_step: { type: 'step', depends_on: [] },
+        deep_reactor: {
+          type: 'compose',
+          nested_structure: {
+            deep_step: { type: 'step' }
+          }
+        }
+      }
+    }
+  };
+
+  const mockResults = {
+    step1: 'done',
+    sub_reactor: 'sub_done'
+  };
+
+  const mockComposedContexts = {
+    sub_reactor: {
+      context: {
+        value: {
+          status: 'completed',
+          intermediate_results: {
+            inner_step: 'inner_done',
+            deep_reactor: 'deep_done'
+          },
+          composed_contexts: {
+            deep_reactor: {
+              context: {
+                value: {
+                  status: 'completed',
+                  intermediate_results: {
+                    deep_step: 'deep_value'
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  };
+
+  it('generates unique path-based IDs for nested nodes', () => {
+    render(
+      <DagVisualizer
+        structure={mockStructure}
+        steps={[]}
+        onStepSelect={() => { }}
+        selectedStep={null}
+      />
+    );
+
+    // Root nodes should have simple IDs
+    expect(screen.queryByTestId('node-step1')).toBeInTheDocument();
+    expect(screen.queryByTestId('node-sub_reactor')).toBeInTheDocument();
+
+    // Nested nodes should have path-based IDs
+    expect(screen.queryByTestId('node-sub_reactor.inner_step')).toBeInTheDocument();
+    expect(screen.queryByTestId('node-sub_reactor.deep_reactor.deep_step')).toBeInTheDocument();
+  });
+
+  it('correctly resolves status for deeply nested nodes using composedContexts', () => {
+    const { getByTestId } = render(
+      <DagVisualizer
+        structure={mockStructure}
+        steps={[]}
+        results={mockResults}
+        composedContexts={mockComposedContexts}
+        reactorStatus="running"
+        onStepSelect={() => { }}
+        selectedStep={null}
+      />
+    );
+
+    // root step1 is completed
+    expect(getByTestId('node-step1').getAttribute('data-status')).toBe('completed');
+
+    // inner_step in sub_reactor is completed
+    expect(getByTestId('node-sub_reactor.inner_step').getAttribute('data-status')).toBe('completed');
+
+    // deep_step in deep_reactor is completed
+    expect(getByTestId('node-sub_reactor.deep_reactor.deep_step').getAttribute('data-status')).toBe('completed');
+  });
+
+  it('marks unreached steps as cancelled if reactor failed', () => {
+    const struct = {
+      step1: { type: 'step' },
+      step2: { type: 'step', depends_on: ['step1'] }
+    };
+
+    const { getByTestId } = render(
+      <DagVisualizer
+        structure={struct}
+        steps={[]}
+        results={{}}
+        reactorStatus="failed"
+        onStepSelect={() => { }}
+        selectedStep={null}
+      />
+    );
+
+    expect(getByTestId('node-step1').getAttribute('data-status')).toBe('cancelled');
+    expect(getByTestId('node-step2').getAttribute('data-status')).toBe('cancelled');
+  });
+});
+
+
+// End of file