@orka-js/react 1.5.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Orka Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,73 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Node, Edge } from '@xyflow/react';
+
+interface OrkaGraphExecution {
+    /** Currently executing node ID */
+    currentNode?: string;
+    /** IDs of completed nodes */
+    completedNodes?: string[];
+    /** IDs of nodes that failed */
+    failedNodes?: string[];
+}
+interface OrkaGraphProps {
+    /**
+     * The workflow to visualize.
+     * Accepts GraphWorkflow or StateGraph instances from @orka-js/graph.
+     */
+    workflow: {
+        getNodes(): Array<{
+            id: string;
+            type?: string;
+            [key: string]: unknown;
+        }>;
+        getEdges(): Array<{
+            from: string;
+            to: string;
+            label?: string;
+        }>;
+    };
+    /** Live execution state for highlighting */
+    execution?: OrkaGraphExecution;
+    /** Called when user clicks a node */
+    onNodeClick?: (nodeId: string, metadata?: unknown) => void;
+    theme?: 'light' | 'dark';
+    width?: number | string;
+    height?: number | string;
+    /** Custom CSS class name */
+    className?: string;
+}
+
+/**
+ * Visual graph component for OrkaJS workflows.
+ *
+ * Renders a GraphWorkflow or StateGraph as an interactive React Flow diagram.
+ * Highlights currently running, completed, and failed nodes based on the
+ * optional `execution` prop.
+ *
+ * @example
+ * ```tsx
+ * import { OrkaGraph } from '@orka-js/react';
+ *
+ * function App() {
+ *   return (
+ *     <OrkaGraph
+ *       workflow={myGraphWorkflow}
+ *       execution={{ currentNode: 'step2', completedNodes: ['step1'] }}
+ *       height={500}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare function OrkaGraph({ workflow, execution, onNodeClick, theme, width, height, className, }: OrkaGraphProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Converts OrkaJS workflow nodes/edges to React Flow format.
+ * Applies a simple left-to-right auto-layout.
+ */
+declare function useGraph(workflow: OrkaGraphProps['workflow'], execution?: OrkaGraphExecution, theme?: 'light' | 'dark'): {
+    nodes: Node[];
+    edges: Edge[];
+};
+
+export { OrkaGraph, type OrkaGraphExecution, type OrkaGraphProps, useGraph };

package/dist/index.js

@@ -0,0 +1,155 @@
+import { useMemo, useCallback } from 'react';
+import { ReactFlow, Background, Controls, MiniMap } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/OrkaGraph.tsx
+var NODE_STATUS_COLORS = {
+  running: "#3b82f6",
+  completed: "#10b981",
+  failed: "#ef4444",
+  pending: "#64748b"
+};
+var NODE_TYPE_SHAPES = {
+  start: "#1d4ed8",
+  end: "#059669",
+  condition: "#d97706",
+  default: "#334155"
+};
+function getNodeStatus(id, execution) {
+  if (execution?.currentNode === id) return "running";
+  if (execution?.completedNodes?.includes(id)) return "completed";
+  if (execution?.failedNodes?.includes(id)) return "failed";
+  return "pending";
+}
+function useGraph(workflow, execution, theme = "dark") {
+  return useMemo(() => {
+    const rawNodes = workflow.getNodes();
+    const rawEdges = workflow.getEdges();
+    const indegree = /* @__PURE__ */ new Map();
+    const adjList = /* @__PURE__ */ new Map();
+    for (const n of rawNodes) {
+      indegree.set(n.id, 0);
+      adjList.set(n.id, []);
+    }
+    for (const e of rawEdges) {
+      indegree.set(e.to, (indegree.get(e.to) ?? 0) + 1);
+      adjList.get(e.from)?.push(e.to);
+    }
+    const layers = /* @__PURE__ */ new Map();
+    const queue = [];
+    for (const [id, deg] of indegree.entries()) {
+      if (deg === 0) queue.push(id);
+    }
+    let head = 0;
+    while (head < queue.length) {
+      const id = queue[head++];
+      const layer = layers.get(id) ?? 0;
+      for (const next of adjList.get(id) ?? []) {
+        layers.set(next, Math.max(layers.get(next) ?? 0, layer + 1));
+        indegree.set(next, (indegree.get(next) ?? 1) - 1);
+        if ((indegree.get(next) ?? 0) <= 0) queue.push(next);
+      }
+    }
+    const layerCounts = /* @__PURE__ */ new Map();
+    const nodePositions = /* @__PURE__ */ new Map();
+    const H_GAP = 200;
+    const V_GAP = 100;
+    for (const n of rawNodes) {
+      const layer = layers.get(n.id) ?? 0;
+      const row = layerCounts.get(layer) ?? 0;
+      nodePositions.set(n.id, { x: layer * H_GAP, y: row * V_GAP });
+      layerCounts.set(layer, row + 1);
+    }
+    const isDark = theme === "dark";
+    const bg = isDark ? "#1e293b" : "#f8fafc";
+    const textColor = isDark ? "#e2e8f0" : "#0f172a";
+    const borderColor = isDark ? "#334155" : "#cbd5e1";
+    const nodes = rawNodes.map((n) => {
+      const status = getNodeStatus(n.id, execution);
+      const statusColor = NODE_STATUS_COLORS[status];
+      const typeColor = NODE_TYPE_SHAPES[n.type ?? "default"] ?? NODE_TYPE_SHAPES.default;
+      const pos = nodePositions.get(n.id) ?? { x: 0, y: 0 };
+      return {
+        id: n.id,
+        position: pos,
+        type: "default",
+        data: { label: n.id, metadata: n },
+        style: {
+          background: bg,
+          border: `2px solid ${status !== "pending" ? statusColor : typeColor ?? borderColor}`,
+          borderRadius: n.type === "condition" ? "4px" : "8px",
+          color: textColor,
+          fontSize: "13px",
+          padding: "8px 12px",
+          minWidth: "80px",
+          textAlign: "center",
+          boxShadow: status === "running" ? `0 0 12px ${statusColor}66` : void 0
+        }
+      };
+    });
+    const edgeColor = isDark ? "#475569" : "#94a3b8";
+    const edges = rawEdges.map((e, i) => ({
+      id: `e-${e.from}-${e.to}-${i}`,
+      source: e.from,
+      target: e.to,
+      label: e.label,
+      style: { stroke: edgeColor },
+      labelStyle: { fill: edgeColor, fontSize: "11px" }
+    }));
+    return { nodes, edges };
+  }, [workflow, execution, theme]);
+}
+function OrkaGraph({
+  workflow,
+  execution,
+  onNodeClick,
+  theme = "dark",
+  width = "100%",
+  height = 500,
+  className
+}) {
+  const { nodes, edges } = useGraph(workflow, execution, theme);
+  const handleNodeClick = useCallback(
+    (_event, node) => {
+      onNodeClick?.(node.id, node.data?.metadata);
+    },
+    [onNodeClick]
+  );
+  const bgColor = theme === "dark" ? "#0f1117" : "#f8fafc";
+  const dotColor = theme === "dark" ? "#1e293b" : "#e2e8f0";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      style: { width, height, background: bgColor, borderRadius: "8px", overflow: "hidden" },
+      children: /* @__PURE__ */ jsxs(
+        ReactFlow,
+        {
+          nodes,
+          edges,
+          onNodeClick: handleNodeClick,
+          fitView: true,
+          fitViewOptions: { padding: 0.3 },
+          colorMode: theme,
+          proOptions: { hideAttribution: true },
+          children: [
+            /* @__PURE__ */ jsx(Background, { color: dotColor, gap: 20 }),
+            /* @__PURE__ */ jsx(Controls, {}),
+            /* @__PURE__ */ jsx(
+              MiniMap,
+              {
+                nodeColor: (node) => node.style?.borderColor ?? "#475569",
+                style: { background: theme === "dark" ? "#0a0e1a" : "#f1f5f9" }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+export { OrkaGraph, useGraph };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-graph.ts","../src/OrkaGraph.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import { useMemo } from 'react';\nimport type { Node, Edge } from '@xyflow/react';\nimport type { OrkaGraphProps, OrkaGraphExecution } from './types.js';\n\nconst NODE_STATUS_COLORS = {\n  running: '#3b82f6',\n  completed: '#10b981',\n  failed: '#ef4444',\n  pending: '#64748b',\n};\n\nconst NODE_TYPE_SHAPES: Record<string, string> = {\n  start: '#1d4ed8',\n  end: '#059669',\n  condition: '#d97706',\n  default: '#334155',\n};\n\nfunction getNodeStatus(\n  id: string,\n  execution?: OrkaGraphExecution,\n): 'running' | 'completed' | 'failed' | 'pending' {\n  if (execution?.currentNode === id) return 'running';\n  if (execution?.completedNodes?.includes(id)) return 'completed';\n  if (execution?.failedNodes?.includes(id)) return 'failed';\n  return 'pending';\n}\n\n/**\n * Converts OrkaJS workflow nodes/edges to React Flow format.\n * Applies a simple left-to-right auto-layout.\n */\nexport function useGraph(\n  workflow: OrkaGraphProps['workflow'],\n  execution?: OrkaGraphExecution,\n  theme: 'light' | 'dark' = 'dark',\n): { nodes: Node[]; edges: Edge[] } {\n  return useMemo(() => {\n    const rawNodes = workflow.getNodes();\n    const rawEdges = workflow.getEdges();\n\n    // Simple auto-layout: rank nodes by graph depth (BFS from sources)\n    const indegree = new Map<string, number>();\n    const adjList = new Map<string, string[]>();\n    for (const n of rawNodes) {\n      indegree.set(n.id, 0);\n      adjList.set(n.id, []);\n    }\n    for (const e of rawEdges) {\n      indegree.set(e.to, (indegree.get(e.to) ?? 0) + 1);\n      adjList.get(e.from)?.push(e.to);\n    }\n\n    // Topological BFS for layer assignment\n    const layers = new Map<string, number>();\n    const queue: string[] = [];\n    for (const [id, deg] of indegree.entries()) {\n      if (deg === 0) queue.push(id);\n    }\n    let head = 0;\n    while (head < queue.length) {\n      const id = queue[head++];\n      const layer = layers.get(id) ?? 0;\n      for (const next of adjList.get(id) ?? []) {\n        layers.set(next, Math.max(layers.get(next) ?? 0, layer + 1));\n        indegree.set(next, (indegree.get(next) ?? 1) - 1);\n        if ((indegree.get(next) ?? 0) <= 0) queue.push(next);\n      }\n    }\n\n    // Position nodes by layer\n    const layerCounts = new Map<number, number>();\n    const nodePositions = new Map<string, { x: number; y: number }>();\n    const H_GAP = 200;\n    const V_GAP = 100;\n\n    for (const n of rawNodes) {\n      const layer = layers.get(n.id) ?? 0;\n      const row = layerCounts.get(layer) ?? 0;\n      nodePositions.set(n.id, { x: layer * H_GAP, y: row * V_GAP });\n      layerCounts.set(layer, row + 1);\n    }\n\n    const isDark = theme === 'dark';\n    const bg = isDark ? '#1e293b' : '#f8fafc';\n    const textColor = isDark ? '#e2e8f0' : '#0f172a';\n    const borderColor = isDark ? '#334155' : '#cbd5e1';\n\n    const nodes: Node[] = rawNodes.map(n => {\n      const status = getNodeStatus(n.id, execution);\n      const statusColor = NODE_STATUS_COLORS[status];\n      const typeColor = NODE_TYPE_SHAPES[n.type ?? 'default'] ?? NODE_TYPE_SHAPES.default;\n      const pos = nodePositions.get(n.id) ?? { x: 0, y: 0 };\n\n      return {\n        id: n.id,\n        position: pos,\n        type: 'default',\n        data: { label: n.id, metadata: n },\n        style: {\n          background: bg,\n          border: `2px solid ${status !== 'pending' ? statusColor : (typeColor ?? borderColor)}`,\n          borderRadius: n.type === 'condition' ? '4px' : '8px',\n          color: textColor,\n          fontSize: '13px',\n          padding: '8px 12px',\n          minWidth: '80px',\n          textAlign: 'center',\n          boxShadow: status === 'running' ? `0 0 12px ${statusColor}66` : undefined,\n        },\n      };\n    });\n\n    const edgeColor = isDark ? '#475569' : '#94a3b8';\n    const edges: Edge[] = rawEdges.map((e, i) => ({\n      id: `e-${e.from}-${e.to}-${i}`,\n      source: e.from,\n      target: e.to,\n      label: e.label,\n      style: { stroke: edgeColor },\n      labelStyle: { fill: edgeColor, fontSize: '11px' },\n    }));\n\n    return { nodes, edges };\n  }, [workflow, execution, theme]);\n}\n","import { useCallback } from 'react';\nimport {\n  ReactFlow,\n  Background,\n  Controls,\n  MiniMap,\n  type NodeMouseHandler,\n} from '@xyflow/react';\nimport '@xyflow/react/dist/style.css';\nimport { useGraph } from './use-graph.js';\nimport type { OrkaGraphProps } from './types.js';\n\n/**\n * Visual graph component for OrkaJS workflows.\n *\n * Renders a GraphWorkflow or StateGraph as an interactive React Flow diagram.\n * Highlights currently running, completed, and failed nodes based on the\n * optional `execution` prop.\n *\n * @example\n * ```tsx\n * import { OrkaGraph } from '@orka-js/react';\n *\n * function App() {\n *   return (\n *     <OrkaGraph\n *       workflow={myGraphWorkflow}\n *       execution={{ currentNode: 'step2', completedNodes: ['step1'] }}\n *       height={500}\n *     />\n *   );\n * }\n * ```\n */\nexport function OrkaGraph({\n  workflow,\n  execution,\n  onNodeClick,\n  theme = 'dark',\n  width = '100%',\n  height = 500,\n  className,\n}: OrkaGraphProps) {\n  const { nodes, edges } = useGraph(workflow, execution, theme);\n\n  const handleNodeClick = useCallback<NodeMouseHandler>(\n    (_event, node) => {\n      onNodeClick?.(node.id, node.data?.metadata);\n    },\n    [onNodeClick],\n  );\n\n  const bgColor = theme === 'dark' ? '#0f1117' : '#f8fafc';\n  const dotColor = theme === 'dark' ? '#1e293b' : '#e2e8f0';\n\n  return (\n    <div\n      className={className}\n      style={{ width, height, background: bgColor, borderRadius: '8px', overflow: 'hidden' }}\n    >\n      <ReactFlow\n        nodes={nodes}\n        edges={edges}\n        onNodeClick={handleNodeClick}\n        fitView\n        fitViewOptions={{ padding: 0.3 }}\n        colorMode={theme}\n        proOptions={{ hideAttribution: true }}\n      >\n        <Background color={dotColor} gap={20} />\n        <Controls />\n        <MiniMap\n          nodeColor={(node) => (node.style?.borderColor as string) ?? '#475569'}\n          style={{ background: theme === 'dark' ? '#0a0e1a' : '#f1f5f9' }}\n        />\n      </ReactFlow>\n    </div>\n  );\n}\n"]}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@orka-js/react",
+  "version": "1.5.0",
+  "description": "React component for visualizing OrkaJS graph workflows",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@xyflow/react": "^12.0.0",
+    "@orka-js/core": "1.5.0",
+    "@orka-js/graph": "1.4.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "vitest": "^1.6.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  }
+}