ruby_reactor 0.1.0 → 0.2.0

data/gui/src/components/Dashboard.tsx

@@ -0,0 +1,163 @@
+import useSWR from 'swr';
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { Activity, Clock, AlertCircle, CheckCircle2, Search, Filter } from 'lucide-react';
+import { cn, apiUrl } from '../lib/utils';
+
+const fetcher = (url: string) => fetch(url).then((res) => res.json());
+
+export default function Dashboard() {
+  const { data: reactors, error, isLoading } = useSWR(apiUrl('/api/reactors'), fetcher, { refreshInterval: 2000 });
+  const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState('all');
+
+  const filteredReactors = reactors?.filter((reactor: any) => {
+    const matchesSearch =
+      reactor.id.toLowerCase().includes(search.toLowerCase()) ||
+      reactor.class.toLowerCase().includes(search.toLowerCase());
+
+    const matchesStatus = statusFilter === 'all' || reactor.status === statusFilter;
+
+    return matchesSearch && matchesStatus;
+  });
+
+  if (error) return (
+    <div className="p-4 rounded-lg bg-red-500/10 border border-red-500/20 text-red-400 flex items-center gap-2">
+      <AlertCircle className="w-5 h-5" />
+      Failed to load reactors
+    </div>
+  );
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-bold text-white tracking-tight">Reactor Executions</h1>
+          <p className="text-slate-400 text-sm mt-1">Monitor and manage your saga orchestrations.</p>
+        </div>
+
+        <div className="flex items-center gap-3">
+          <div className="relative">
+            <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-500" />
+            <input
+              type="text"
+              placeholder="Search ID or Class..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="bg-slate-900/50 border border-slate-800 text-sm rounded-lg pl-9 pr-4 py-2 text-slate-200 placeholder:text-slate-600 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 w-full sm:w-64 transition-all"
+            />
+          </div>
+
+          <div className="relative">
+            <Filter className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-500 pointer-events-none" />
+            <select
+              value={statusFilter}
+              onChange={(e) => setStatusFilter(e.target.value)}
+              className="appearance-none bg-slate-900/50 border border-slate-800 text-slate-300 rounded-lg pl-9 pr-8 py-2 hover:bg-slate-800 hover:text-white transition-colors text-sm font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500/50 cursor-pointer"
+            >
+              <option value="all">All Status</option>
+              <option value="running">Running</option>
+              <option value="completed">Completed</option>
+              <option value="failed">Failed</option>
+              <option value="cancelled">Cancelled</option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-slate-900/50 backdrop-blur-sm rounded-xl border border-slate-800 overflow-hidden shadow-xl shadow-black/20">
+        {isLoading ? (
+          <div className="p-12 flex items-center justify-center text-slate-500 animate-pulse">
+            Loading reactor data...
+          </div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full text-left text-sm">
+              <thead className="bg-slate-900/80 border-b border-slate-800 text-slate-400 font-medium pb-4">
+                <tr>
+                  <th className="px-6 py-4 font-medium">Reactor ID</th>
+                  <th className="px-6 py-4 font-medium">Class Name</th>
+                  <th className="px-6 py-4 font-medium">Status</th>
+                  <th className="px-6 py-4 font-medium">Failure</th>
+                  <th className="px-6 py-4 font-medium">Started</th>
+                  <th className="px-6 py-4 text-right font-medium">Actions</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-slate-800/50">
+                {filteredReactors?.map((reactor: any) => (
+                  <tr key={reactor.id} className="group hover:bg-slate-800/30 transition-colors">
+                    <td className="px-6 py-4 font-mono text-slate-500 group-hover:text-indigo-400 transition-colors">
+                      <Link to={`/reactors/${reactor.id}`} className="block relative">
+                        <span className="absolute -left-2 top-1/2 -translate-y-1/2 w-1 h-0 group-hover:h-4 bg-indigo-500 rounded-full transition-all duration-300 opacity-0 group-hover:opacity-100"></span>
+                        {reactor.id.substring(0, 8)}...
+                      </Link>
+                    </td>
+                    <td className="px-6 py-4 text-slate-200 font-medium">{reactor.class}</td>
+                    <td className="px-6 py-4">
+                      <StatusBadge status={reactor.status} />
+                    </td>
+                    <td className="px-6 py-4 text-slate-400 font-mono text-xs">
+                      {reactor.status === 'failed' && reactor.failure && (
+                        <div className="flex flex-col">
+                          <span className="text-rose-400 font-medium">{reactor.failure.step_name}</span>
+                          <span className="text-slate-500 text-[10px] leading-tight opacity-70">{reactor.failure.exception_class}</span>
+                        </div>
+                      )}
+                    </td>
+                    <td className="px-6 py-4 text-slate-500 tabular-nums">
+                      {new Date(reactor.created_at).toLocaleString()}
+                    </td>
+                    <td className="px-6 py-4 text-right">
+                      <Link
+                        to={`/reactors/${reactor.id}`}
+                        className="inline-flex items-center gap-1.5 text-xs font-medium text-slate-500 hover:text-indigo-400 transition-colors px-3 py-1.5 rounded-md hover:bg-indigo-500/10"
+                      >
+                        Inspect
+                        <span className="sr-only">{reactor.id}</span>
+                      </Link>
+                    </td>
+                  </tr>
+                ))}
+                {filteredReactors?.length === 0 && (
+                  <tr>
+                    <td colSpan={6} className="px-6 py-24 text-center">
+                      <div className="flex flex-col items-center gap-3 text-slate-500">
+                        <div className="p-4 bg-slate-900 rounded-full border border-slate-800">
+                          <Activity className="w-6 h-6 text-slate-600" />
+                        </div>
+                        <p>No active reactors found matching your filters.</p>
+                      </div>
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function StatusBadge({ status }: { status: string }) {
+  const styles = {
+    running: "bg-indigo-500/10 text-indigo-400 border-indigo-500/20 shadow-[0_0_10px_rgba(99,102,241,0.15)]",
+    completed: "bg-teal-500/10 text-teal-400 border-teal-500/20 shadow-[0_0_10px_rgba(20,184,166,0.15)]",
+    failed: "bg-rose-500/10 text-rose-400 border-rose-500/20 shadow-[0_0_10px_rgba(244,63,94,0.15)]",
+    cancelled: "bg-slate-800 text-slate-400 border-slate-700",
+  }[status] || "bg-slate-800 text-slate-400 border-slate-700";
+
+  const icons = {
+    running: <Activity className="w-3 h-3 animate-pulse" />,
+    completed: <CheckCircle2 className="w-3 h-3" />,
+    failed: <AlertCircle className="w-3 h-3" />,
+    cancelled: <Clock className="w-3 h-3" />,
+  }[status];
+
+  return (
+    <span className={cn("inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium border backdrop-blur-md transition-all", styles)}>
+      {icons}
+      <span className="capitalize tracking-wide">{status}</span>
+    </span>
+  );
+}

data/gui/src/components/ErrorBoundary.tsx

@@ -0,0 +1,47 @@
+import { Component } from 'react';
+import type { ErrorInfo, ReactNode } from 'react';
+
+interface Props {
+  children?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: ErrorInfo | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false,
+    error: null,
+    errorInfo: null
+  };
+
+  public static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error, errorInfo: null };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error("Uncaught error:", error, errorInfo);
+    this.setState({ error, errorInfo });
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      return (
+        <div className="p-8 bg-slate-950 min-h-screen text-red-500">
+          <h1 className="text-2xl font-bold mb-4">Something went wrong.</h1>
+          <pre className="bg-slate-900 p-4 rounded overflow-auto text-sm mb-4">
+            {this.state.error && this.state.error.toString()}
+          </pre>
+          <pre className="bg-slate-900 p-4 rounded overflow-auto text-xs text-slate-500">
+            {this.state.errorInfo && this.state.errorInfo.componentStack}
+          </pre>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

data/gui/src/components/ReactorDetail.tsx

@@ -0,0 +1,135 @@
+import useSWR, { mutate } from 'swr';
+import { useParams, Link } from 'react-router-dom';
+import { ChevronLeft, Play, XOctagon, AlertCircle } from 'lucide-react';
+import { useState } from 'react';
+import { apiUrl } from '../lib/utils';
+import DagVisualizer from './DagVisualizer';
+import StepInspector from './StepInspector';
+
+const fetcher = (url: string) => fetch(url).then((res) => res.json());
+
+
+export default function ReactorDetail() {
+  const { id } = useParams();
+  const { data: reactor, error, isLoading } = useSWR(id ? apiUrl(`/api/reactors/${id}`) : null, fetcher, { refreshInterval: 1000 });
+  const [selectedStep, setSelectedStep] = useState<string | null>(null);
+
+  const handleAction = async (action: 'retry' | 'cancel') => {
+    if (!id) return;
+    try {
+      await fetch(apiUrl(`/api/reactors/${id}/${action}`), { method: 'POST' });
+      mutate(apiUrl(`/api/reactors/${id}`));
+    } catch (e) {
+      console.error(`Failed to ${action}`, e);
+    }
+  };
+
+
+
+  if (error) return <div className="p-4 text-red-500 bg-red-500/10 border border-red-500/20 rounded-lg">Failed to load reactor</div>;
+  if (isLoading) return <div className="p-4 text-slate-500 animate-pulse">Loading reactor details...</div>;
+
+  if (reactor?.status === 'failed') {
+    console.log('ReactorDetail: reactor is failed. Error:', reactor.error);
+  }
+
+  return (
+    <div className="space-y-6 h-[calc(100vh-8rem)] flex flex-col relative">
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-slate-800 pb-6 shrink-0">
+        <div className="flex items-center gap-4">
+          <Link to="/" className="p-2 hover:bg-white/5 rounded-full text-slate-400 hover:text-white transition-colors">
+            <ChevronLeft className="w-5 h-5" />
+          </Link>
+          <div>
+            <div className="flex items-center gap-3">
+              <h1 className="text-2xl font-bold text-white tracking-tight">{reactor.class}</h1>
+              <span className="px-2 py-0.5 rounded text-xs font-mono bg-slate-800 text-slate-400 border border-slate-700">#{id}</span>
+            </div>
+            <div className="flex items-center gap-2 mt-1.5">
+              <span className="text-sm text-slate-400">Status: <span className={`font-medium ${reactor.status === 'failed' ? 'text-red-400' :
+                reactor.status === 'completed' ? 'text-emerald-400' :
+                  reactor.status === 'paused' ? 'text-amber-400' :
+                    'text-slate-200'
+                }`}>{reactor.status}</span></span>
+              {reactor.retry_count > 0 && (
+                <span className="text-sm text-slate-400 ml-3 pl-3 border-l border-slate-700">
+                  Retries: <span className="font-medium text-amber-400">{reactor.retry_count}</span>
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2 ml-auto">
+
+          <button
+            onClick={() => handleAction('retry')}
+            className="flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg shadow-lg shadow-indigo-500/20 text-sm font-medium transition-all hover:-translate-y-0.5 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+            disabled={reactor.status === 'running'}
+          >
+            <Play className="w-4 h-4" />
+            Retry Execution
+          </button>
+          <button
+            onClick={() => handleAction('cancel')}
+            className="flex items-center gap-2 px-4 py-2 bg-slate-900 border border-slate-700 text-slate-300 rounded-lg hover:bg-slate-800 hover:text-white text-sm font-medium transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+            disabled={reactor.status !== 'running' && reactor.status !== 'paused'}
+          >
+            <XOctagon className="w-4 h-4" />
+            Cancel
+          </button>
+        </div>
+      </div>
+
+      {reactor.status === 'failed' && reactor.error && (
+        <div className="px-2">
+          <div className="px-4 py-3 bg-red-500/10 border border-red-500/20 rounded-lg flex items-start gap-3">
+            <AlertCircle className="w-5 h-5 text-red-500 shrink-0 mt-0.5" />
+            <div className="space-y-1 overflow-hidden">
+              <h3 className="text-sm font-medium text-red-500">
+                Workflow Failed
+                {reactor.error.step_name && <span className="text-red-400"> at step <span className="font-mono bg-red-500/10 px-1 rounded">{reactor.error.step_name}</span></span>}
+              </h3>
+              <p className="text-xs text-red-400/80 font-mono truncate">{reactor.error.message}</p>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 flex-1 min-h-0">
+        <div className="lg:col-span-2 h-full">
+          <DagVisualizer
+            structure={reactor.structure}
+            steps={reactor.steps}
+            selectedStep={selectedStep}
+            onStepSelect={setSelectedStep}
+            reactorStatus={reactor.status}
+            error={reactor.error}
+            results={reactor.intermediate_results}
+            composedContexts={reactor.composed_contexts}
+          />
+        </div>
+
+        <div className="h-full">
+          <StepInspector
+            stepName={selectedStep}
+            structure={reactor.structure}
+            results={reactor.intermediate_results}
+            inputs={reactor.inputs}
+            trace={reactor.steps}
+            error={reactor.error}
+            undoStack={reactor.undo_stack}
+            stepAttempts={reactor.step_attempts}
+            composedContexts={reactor.composed_contexts}
+            onClose={() => setSelectedStep(null)}
+            reactorId={id}
+            reactorStatus={reactor.status}
+            onAction={() => mutate(apiUrl(`/api/reactors/${id}`))}
+          />
+        </div>
+      </div>
+
+
+    </div>
+  );
+}