Status

Status indicators and the deterministic badge.

import {
  WorkflowDeterminismBadge,
  WorkflowStatusBadge,
} from "../components/workflow-status";
import type { WorkflowNodeStatus } from "../types/workflow";

const STATUSES: WorkflowNodeStatus[] = [
  "idle",
  "queued",
  "running",
  "waiting",
  "success",
  "error",
  "skipped",
];

export default function WorkflowStatusExample() {
  return (
    <div className="flex max-w-lg flex-col items-center gap-4">
      <div className="flex flex-wrap justify-center gap-2">
        {STATUSES.map((status) => (
          <WorkflowStatusBadge key={status} status={status} />
        ))}
      </div>
      <div className="flex flex-wrap justify-center gap-2">
        <WorkflowDeterminismBadge deterministic />
        <WorkflowDeterminismBadge deterministic={false} />
      </div>
    </div>
  );
}

$ bunx --bun shadcn@latest add @notra/workflow-status

WorkflowStatusBadge and WorkflowStatusIndicator cover every step status: idle, queued, running, waiting for approval, completed, failed and skipped. WorkflowDeterminismBadge tells deterministic tasks apart from AI steps, whose output can change between runs.

Used in

GEO Workflow Builder

A workflow builder with a block palette, a playable canvas, a run log and a node sheet.