orkestr 1.0.0

data/app/javascript/orkestr-ui/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "orkestr-ui",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@xyflow/react": "^12.6.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "@vitejs/plugin-react": "^4.4.0",
+    "typescript": "~5.8.0",
+    "vite": "^6.3.0"
+  }
+}

data/app/javascript/orkestr-ui/src/OrkestrApp.tsx

@@ -0,0 +1,152 @@
+import React, { useMemo, useState } from "react";
+import { ApiClient } from "./api/client";
+import { useRegistry } from "./hooks/useRegistry";
+import { WorkflowList } from "./components/Workflows/WorkflowList";
+import { WorkflowEditor } from "./components/Editor/WorkflowEditor";
+import { ExecutionList } from "./components/Executions/ExecutionList";
+import { ExecutionDetail } from "./components/Executions/ExecutionDetail";
+import { TaskList } from "./components/HumanTasks/TaskList";
+import { TaskForm } from "./components/HumanTasks/TaskForm";
+import { TaskFormEmbed } from "./components/HumanTasks/TaskFormEmbed";
+import { Loading } from "./components/shared/Loading";
+
+type View =
+  | { kind: "workflows" }
+  | { kind: "editor"; workflowId: string }
+  | { kind: "executions"; workflowId: string }
+  | { kind: "execution-detail"; executionId: string; workflowId: string }
+  | { kind: "tasks" }
+  | { kind: "task-detail"; taskId: string; prefill?: Record<string, unknown> };
+
+export interface OrkestrAppProps {
+  apiBaseUrl: string;
+  authToken?: string;
+  workflowId?: string;
+  mode?: "dashboard" | "editor" | "task";
+  taskId?: string;
+  prefill?: Record<string, unknown>;
+  onTaskCompleted?: (taskId: string) => void;
+  onTaskCancelled?: (taskId: string) => void;
+}
+
+export function OrkestrApp({ apiBaseUrl, authToken, workflowId, mode, taskId, prefill, onTaskCompleted, onTaskCancelled }: OrkestrAppProps) {
+  const client = useMemo(() => new ApiClient(apiBaseUrl, authToken), [apiBaseUrl, authToken]);
+
+  // Task-only mode: render just the form, no chrome
+  if (mode === "task" && taskId) {
+    return (
+      <TaskFormEmbed
+        client={client}
+        taskId={taskId}
+        prefill={prefill}
+        onCompleted={onTaskCompleted}
+        onCancelled={onTaskCancelled}
+      />
+    );
+  }
+
+  const registry = useRegistry(client);
+
+  const initialView: View =
+    mode === "editor" && workflowId
+      ? { kind: "editor", workflowId }
+      : { kind: "workflows" };
+
+  const [view, setView] = useState<View>(initialView);
+
+  const activeTab =
+    view.kind === "workflows" || view.kind === "editor"
+      ? "workflows"
+      : view.kind === "executions" || view.kind === "execution-detail"
+        ? "executions"
+        : "tasks";
+
+  if (registry.loading) return <div className="ork-app"><Loading /></div>;
+
+  return (
+    <div className="ork-app">
+      {view.kind !== "editor" && view.kind !== "execution-detail" && (
+        <div className="ork-header">
+          <h1>Orkestr</h1>
+          <div className="ork-nav">
+            <button
+              className={`ork-nav-btn ${activeTab === "workflows" ? "active" : ""}`}
+              onClick={() => setView({ kind: "workflows" })}
+            >
+              Workflows
+            </button>
+            <button
+              className={`ork-nav-btn ${activeTab === "tasks" ? "active" : ""}`}
+              onClick={() => setView({ kind: "tasks" })}
+            >
+              Tasks
+            </button>
+          </div>
+        </div>
+      )}
+
+      {view.kind === "workflows" && (
+        <div className="ork-content">
+          <WorkflowList
+            client={client}
+            onSelect={(id) => setView({ kind: "editor", workflowId: id })}
+          />
+        </div>
+      )}
+
+      {view.kind === "editor" && (
+        <WorkflowEditor
+          client={client}
+          workflowId={view.workflowId}
+          nodeDefinitions={registry.nodes}
+          triggerDefinitions={registry.triggers}
+          onBack={() => setView({ kind: "workflows" })}
+          onExecutionCreated={(executionId) =>
+            setView({ kind: "execution-detail", executionId, workflowId: view.workflowId })
+          }
+        />
+      )}
+
+      {view.kind === "executions" && (
+        <div className="ork-content">
+          <ExecutionList
+            client={client}
+            workflowId={view.workflowId}
+            onSelect={(id) =>
+              setView({ kind: "execution-detail", executionId: id, workflowId: view.workflowId })
+            }
+          />
+        </div>
+      )}
+
+      {view.kind === "execution-detail" && (
+        <ExecutionDetail
+          client={client}
+          executionId={view.executionId}
+          onBack={() => setView({ kind: "executions", workflowId: view.workflowId })}
+        />
+      )}
+
+      {view.kind === "tasks" && (
+        <div className="ork-content">
+          <TaskList
+            client={client}
+            onSelect={(id, prefill) => setView({ kind: "task-detail", taskId: id, prefill })}
+          />
+        </div>
+      )}
+
+      {view.kind === "task-detail" && (
+        <div className="ork-content">
+          <TaskForm
+            client={client}
+            taskId={view.taskId}
+            prefill={view.prefill}
+            onBack={() => setView({ kind: "tasks" })}
+            onCompleted={() => setView({ kind: "tasks" })}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

data/app/javascript/orkestr-ui/src/api/client.ts

@@ -0,0 +1,59 @@
+export class ApiClient {
+  constructor(
+    private baseUrl: string,
+    private authToken?: string
+  ) {}
+
+  private headers(): HeadersInit {
+    const h: HeadersInit = { "Content-Type": "application/json", Accept: "application/json" };
+    if (this.authToken) h["Authorization"] = `Bearer ${this.authToken}`;
+    return h;
+  }
+
+  private async request<T>(method: string, path: string, body?: unknown): Promise<T> {
+    const url = `${this.baseUrl}/api${path}`;
+    const options: RequestInit = { method, headers: this.headers() };
+    if (body !== undefined) options.body = JSON.stringify(body);
+
+    const response = await fetch(url, options);
+
+    if (response.status === 204) return undefined as T;
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ error: response.statusText }));
+      throw new ApiError(response.status, error.error || "Request failed");
+    }
+
+    return response.json();
+  }
+
+  getBaseUrl(): string {
+    return this.baseUrl;
+  }
+
+  get<T>(path: string): Promise<T> {
+    return this.request("GET", path);
+  }
+
+  post<T>(path: string, body?: unknown): Promise<T> {
+    return this.request("POST", path, body);
+  }
+
+  put<T>(path: string, body?: unknown): Promise<T> {
+    return this.request("PUT", path, body);
+  }
+
+  delete(path: string): Promise<void> {
+    return this.request("DELETE", path);
+  }
+}
+
+export class ApiError extends Error {
+  constructor(
+    public status: number,
+    message: string
+  ) {
+    super(message);
+    this.name = "ApiError";
+  }
+}

data/app/javascript/orkestr-ui/src/api/executions.ts

@@ -0,0 +1,23 @@
+import type { ApiClient } from "./client";
+import type { Execution, ExecutionSummary } from "../types";
+
+export function listExecutions(
+  client: ApiClient,
+  workflowId: string,
+  status?: string
+): Promise<ExecutionSummary[]> {
+  const query = status ? `?status=${encodeURIComponent(status)}` : "";
+  return client.get(`/workflows/${workflowId}/executions${query}`);
+}
+
+export function getExecution(client: ApiClient, id: string): Promise<Execution> {
+  return client.get(`/executions/${id}`);
+}
+
+export function createExecution(
+  client: ApiClient,
+  workflowId: string,
+  context?: Record<string, unknown>
+): Promise<Execution> {
+  return client.post(`/workflows/${workflowId}/executions`, context ? { context } : {});
+}

data/app/javascript/orkestr-ui/src/api/humanTasks.ts

@@ -0,0 +1,32 @@
+import type { ApiClient } from "./client";
+import type { HumanTask } from "../types";
+
+export interface ListHumanTasksParams {
+  status?: string;
+  assignable_type?: string;
+  assignable_id?: string;
+}
+
+export function listHumanTasks(
+  client: ApiClient,
+  params?: ListHumanTasksParams
+): Promise<HumanTask[]> {
+  const query = new URLSearchParams();
+  if (params?.status) query.set("status", params.status);
+  if (params?.assignable_type) query.set("assignable_type", params.assignable_type);
+  if (params?.assignable_id) query.set("assignable_id", params.assignable_id);
+  const qs = query.toString();
+  return client.get(`/human_tasks${qs ? `?${qs}` : ""}`);
+}
+
+export function getHumanTask(client: ApiClient, id: string): Promise<HumanTask> {
+  return client.get(`/human_tasks/${id}`);
+}
+
+export function completeHumanTask(
+  client: ApiClient,
+  id: string,
+  response: Record<string, unknown>
+): Promise<HumanTask> {
+  return client.put(`/human_tasks/${id}/complete`, { response });
+}

data/app/javascript/orkestr-ui/src/api/index.ts

@@ -0,0 +1,5 @@
+export { ApiClient, ApiError } from "./client";
+export * from "./workflows";
+export * from "./executions";
+export * from "./humanTasks";
+export * from "./registry";

data/app/javascript/orkestr-ui/src/api/registry.ts

@@ -0,0 +1,10 @@
+import type { ApiClient } from "./client";
+import type { NodeDefinition, TriggerDefinition } from "../types";
+
+export function listNodeDefinitions(client: ApiClient): Promise<NodeDefinition[]> {
+  return client.get("/registry/nodes");
+}
+
+export function listTriggerDefinitions(client: ApiClient): Promise<TriggerDefinition[]> {
+  return client.get("/registry/triggers");
+}

data/app/javascript/orkestr-ui/src/api/workflows.ts

@@ -0,0 +1,33 @@
+import type { ApiClient } from "./client";
+import type { Workflow, WorkflowSummary, GraphJson } from "../types";
+
+export function listWorkflows(client: ApiClient): Promise<WorkflowSummary[]> {
+  return client.get("/workflows");
+}
+
+export function getWorkflow(client: ApiClient, id: string): Promise<Workflow> {
+  return client.get(`/workflows/${id}`);
+}
+
+export interface CreateWorkflowParams {
+  name: string;
+  trigger_type?: string;
+  trigger_config?: Record<string, unknown>;
+  graph_json?: GraphJson;
+}
+
+export function createWorkflow(client: ApiClient, params: CreateWorkflowParams): Promise<Workflow> {
+  return client.post("/workflows", params);
+}
+
+export function updateWorkflow(
+  client: ApiClient,
+  id: string,
+  params: Partial<CreateWorkflowParams>
+): Promise<Workflow> {
+  return client.put(`/workflows/${id}`, params);
+}
+
+export function deleteWorkflow(client: ApiClient, id: string): Promise<void> {
+  return client.delete(`/workflows/${id}`);
+}

data/app/javascript/orkestr-ui/src/components/Editor/ActionsBuilder.tsx

@@ -0,0 +1,213 @@
+import React, { useState } from "react";
+import { FormSchemaBuilder, type FormSchema } from "./FormSchemaBuilder";
+
+export interface ActionConfig {
+  label: string;
+  icon?: string;
+  color?: string;
+  prefill?: Record<string, string>;
+  schema?: FormSchema;
+}
+
+interface Props {
+  value: ActionConfig[] | undefined;
+  onChange: (actions: ActionConfig[]) => void;
+}
+
+export function ActionsBuilder({ value, onChange }: Props) {
+  const actions = value || [];
+
+  const addAction = () => {
+    onChange([...actions, { label: "" }]);
+  };
+
+  const removeAction = (index: number) => {
+    onChange(actions.filter((_, i) => i !== index));
+  };
+
+  const updateAction = (index: number, patch: Partial<ActionConfig>) => {
+    const updated = [...actions];
+    updated[index] = { ...updated[index], ...patch };
+    onChange(updated);
+  };
+
+  return (
+    <div className="ork-form-group">
+      <label className="ork-label">Actions</label>
+      <div className="ork-field-description">
+        Define action buttons (e.g. Approve/Reject). Each action can prefill form fields and optionally use its own form schema.
+      </div>
+      <div className="ork-array-items">
+        {actions.map((action, index) => (
+          <ActionItem
+            key={index}
+            index={index}
+            action={action}
+            onUpdate={(patch) => updateAction(index, patch)}
+            onRemove={() => removeAction(index)}
+          />
+        ))}
+      </div>
+      <button type="button" className="ork-btn ork-btn-sm" onClick={addAction}>
+        + Add Action
+      </button>
+    </div>
+  );
+}
+
+function ActionItem({ index, action, onUpdate, onRemove }: {
+  index: number;
+  action: ActionConfig;
+  onUpdate: (patch: Partial<ActionConfig>) => void;
+  onRemove: () => void;
+}) {
+  const [showSchema, setShowSchema] = useState(!!action.schema);
+  const prefillEntries = Object.entries(action.prefill || {});
+
+  const addPrefill = () => {
+    onUpdate({ prefill: { ...action.prefill, "": "" } });
+  };
+
+  const updatePrefillKey = (oldKey: string, newKey: string) => {
+    const entries = Object.entries(action.prefill || {});
+    const updated: Record<string, string> = {};
+    for (const [k, v] of entries) {
+      updated[k === oldKey ? newKey : k] = v;
+    }
+    onUpdate({ prefill: updated });
+  };
+
+  const updatePrefillValue = (key: string, val: string) => {
+    onUpdate({ prefill: { ...action.prefill, [key]: val } });
+  };
+
+  const removePrefill = (key: string) => {
+    const updated = { ...action.prefill };
+    delete updated[key];
+    onUpdate({ prefill: Object.keys(updated).length > 0 ? updated : undefined });
+  };
+
+  const handleSchemaToggle = (enabled: boolean) => {
+    setShowSchema(enabled);
+    if (!enabled) {
+      onUpdate({ schema: undefined });
+    }
+  };
+
+  return (
+    <div className="ork-array-item">
+      <div className="ork-array-item-header">
+        <span className="ork-array-item-index">#{index + 1}</span>
+        <span style={{ flex: 1, fontWeight: 600, fontSize: 13 }}>
+          {action.label || "(unnamed)"}
+        </span>
+        <button type="button" className="ork-btn ork-btn-danger ork-btn-sm" onClick={onRemove}>
+          &times;
+        </button>
+      </div>
+
+      {/* Label */}
+      <div className="ork-form-group">
+        <label className="ork-label">Label *</label>
+        <input
+          className="ork-input"
+          type="text"
+          value={action.label}
+          placeholder="e.g. Approve"
+          onChange={(e) => onUpdate({ label: e.target.value })}
+        />
+      </div>
+
+      <div className="ork-form-builder-row">
+        {/* Icon */}
+        <div className="ork-form-group" style={{ flex: 1 }}>
+          <label className="ork-label">Icon</label>
+          <input
+            className="ork-input"
+            type="text"
+            value={action.icon || ""}
+            placeholder="e.g. check-circle"
+            onChange={(e) => onUpdate({ icon: e.target.value || undefined })}
+          />
+        </div>
+
+        {/* Color */}
+        <div className="ork-form-group" style={{ flex: 0, minWidth: 80 }}>
+          <label className="ork-label">Color</label>
+          <div style={{ display: "flex", gap: 4, alignItems: "center" }}>
+            <input
+              type="color"
+              value={action.color || "#3b82f6"}
+              onChange={(e) => onUpdate({ color: e.target.value })}
+              style={{ width: 32, height: 32, padding: 0, border: "1px solid var(--ork-border)", borderRadius: 4, cursor: "pointer" }}
+            />
+            {action.color && (
+              <button
+                type="button"
+                className="ork-btn ork-btn-sm"
+                style={{ fontSize: 10, padding: "2px 4px" }}
+                onClick={() => onUpdate({ color: undefined })}
+              >
+                &times;
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Prefill */}
+      <div className="ork-form-group">
+        <label className="ork-label">Prefill Values</label>
+        <div className="ork-field-description">
+          Fields to pre-fill when this action is selected
+        </div>
+        {prefillEntries.map(([key, val], i) => (
+          <div key={i} className="ork-form-builder-row" style={{ marginBottom: 4 }}>
+            <input
+              className="ork-input"
+              type="text"
+              placeholder="Field name"
+              value={key}
+              onChange={(e) => updatePrefillKey(key, e.target.value)}
+              style={{ flex: 1 }}
+            />
+            <input
+              className="ork-input"
+              type="text"
+              placeholder="Value"
+              value={val}
+              onChange={(e) => updatePrefillValue(key, e.target.value)}
+              style={{ flex: 1 }}
+            />
+            <button type="button" className="ork-btn ork-btn-danger ork-btn-sm" onClick={() => removePrefill(key)}>
+              &times;
+            </button>
+          </div>
+        ))}
+        <button type="button" className="ork-btn ork-btn-sm" onClick={addPrefill}>
+          + Add Prefill
+        </button>
+      </div>
+
+      {/* Per-action schema toggle + builder */}
+      <div className="ork-form-group">
+        <label className="ork-checkbox-label" style={{ fontSize: 13 }}>
+          <input
+            type="checkbox"
+            checked={showSchema}
+            onChange={(e) => handleSchemaToggle(e.target.checked)}
+          />
+          Custom form schema for this action
+        </label>
+        {showSchema && (
+          <div style={{ marginTop: 8, paddingLeft: 8, borderLeft: "2px solid var(--ork-border)" }}>
+            <FormSchemaBuilder
+              value={action.schema}
+              onChange={(schema) => onUpdate({ schema })}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

data/app/javascript/orkestr-ui/src/components/Editor/CustomNode.tsx

@@ -0,0 +1,31 @@
+import React, { memo } from "react";
+import { Handle, Position } from "@xyflow/react";
+import type { NodeProps } from "@xyflow/react";
+
+function CustomNodeComponent({ data, selected }: NodeProps) {
+  const nodeData = data as Record<string, unknown>;
+  const label = (nodeData.label as string) || (nodeData.type as string) || "Node";
+  const nodeType = (nodeData.type as string) || "default";
+  const status = nodeData.executionStatus as string | undefined;
+
+  const classes = ["ork-flow-node"];
+  if (selected) classes.push("selected");
+  if (status) classes.push(`status-${status}`);
+
+  return (
+    <div className={classes.join(" ")}>
+      <Handle type="target" position={Position.Top} />
+      <div className="ork-flow-node-label">{label}</div>
+      <div className="ork-flow-node-type">{nodeType}</div>
+      {nodeType === "condition" && (
+        <>
+          <Handle type="source" position={Position.Bottom} id="true" style={{ left: "30%" }} />
+          <Handle type="source" position={Position.Bottom} id="false" style={{ left: "70%" }} />
+        </>
+      )}
+      {nodeType !== "condition" && <Handle type="source" position={Position.Bottom} />}
+    </div>
+  );
+}
+
+export const CustomNode = memo(CustomNodeComponent);