# Workflow Runs > Run history with a replayable timeline and log. A shadcn/ui block from the [@notra](https://ui.usenotra.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/notra/workflow-runs). - Page, with a live preview: https://shadcn.exchange/r/notra/workflow-runs - Screenshot: https://shadcn.exchange/shot/notra/workflow-runs/light.png - Registry item: https://ui.usenotra.com/r/workflow-runs.json - Listed: 2026-10-28, source last changed 2026-10-28 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/notra/workflow-runs.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - npm packages: `@base-ui/react`, `@xyflow/react`, `class-variance-authority`, `cn`, `lucide-react` - Registry items: `badge` ## Files ### `registry/notra/workflow/components/workflow-block-icon.tsx` ```tsx import { cn } from "cn"; import { WORKFLOW_KINDS } from "../constants/workflow"; import { findModel } from "../lib/workflow"; import type { WorkflowBlockIconProps } from "../types/workflow"; import { WORKFLOW_LOGOS, WorkflowLogo } from "./workflow-logo"; export const WorkflowBlockIcon = ({ block, className, }: WorkflowBlockIconProps) => { const logo = block.logo ?? findModel(block.model)?.logo; const kind = WORKFLOW_KINDS[block.kind]; const KindIcon = kind.icon; if (logo && WORKFLOW_LOGOS[logo].tile) { return ( ); } return ( {logo ? ( ) : ( )} ); }; ``` ### `registry/notra/workflow/components/workflow-logo.tsx` ```tsx import { cn } from "cn"; import type { WorkflowLogoConfig, WorkflowLogoName, WorkflowLogoProps, } from "../types/workflow"; import { AhrefsLogo, AnthropicLogo, BrowserbaseLogo, ClaudeLogo, ContextDevLogo, DeepSeekLogo, FirecrawlLogo, GeminiLogo, GitHubLogo, GmailLogo, GoogleLogo, GoogleSheetsLogo, GrokLogo, LinearLogo, MistralLogo, NotionLogo, OpenAILogo, PerplexityLogo, PostHogLogo, ResendLogo, SlackLogo, WebflowLogo, WordPressLogo, } from "./workflow-logos"; export const WORKFLOW_LOGOS: Record = { ahrefs: { label: "Ahrefs", logo: AhrefsLogo }, anthropic: { label: "Anthropic", logo: AnthropicLogo }, browserbase: { label: "Browserbase", logo: BrowserbaseLogo, tile: true }, claude: { label: "Claude", logo: ClaudeLogo }, deepseek: { label: "DeepSeek", logo: DeepSeekLogo }, "context-dev": { label: "context.dev", logo: ContextDevLogo, tile: true }, firecrawl: { label: "Firecrawl", logo: FirecrawlLogo }, gemini: { label: "Gemini", logo: GeminiLogo }, github: { label: "GitHub", logo: GitHubLogo }, gmail: { label: "Gmail", logo: GmailLogo }, google: { label: "Google", logo: GoogleLogo }, "google-sheets": { label: "Google Sheets", logo: GoogleSheetsLogo }, grok: { label: "Grok", logo: GrokLogo }, linear: { label: "Linear", logo: LinearLogo }, mistral: { label: "Mistral", logo: MistralLogo }, notion: { label: "Notion", logo: NotionLogo }, openai: { label: "OpenAI", logo: OpenAILogo }, perplexity: { label: "Perplexity", logo: PerplexityLogo }, posthog: { label: "PostHog", logo: PostHogLogo }, resend: { label: "Resend", logo: ResendLogo }, slack: { label: "Slack", logo: SlackLogo }, webflow: { label: "Webflow", logo: WebflowLogo }, wordpress: { label: "WordPress", logo: WordPressLogo }, }; export const WorkflowLogo = ({ className, name, ...props }: WorkflowLogoProps) => { const Logo = WORKFLOW_LOGOS[name].logo; return ( ); }; ``` ### `registry/notra/workflow/components/workflow-logos.tsx` ```tsx import type { SVGProps } from "react"; export const OpenAILogo = (props: SVGProps) => ( ); export const AnthropicLogo = (props: SVGProps) => ( ); export const ClaudeLogo = (props: SVGProps) => ( ); export const GeminiLogo = (props: SVGProps) => ( ); export const PerplexityLogo = (props: SVGProps) => ( ); export const MistralLogo = (props: SVGProps) => ( ); export const DeepSeekLogo = (props: SVGProps) => ( ); export const GrokLogo = (props: SVGProps) => ( ); export const BrowserbaseLogo = (props: SVGProps) => ( ); export const ContextDevLogo = (props: SVGProps) => ( ); export const FirecrawlLogo = (props: SVGProps) => ( ); export const ResendLogo = (props: SVGProps) => ( ); export const SlackLogo = (props: SVGProps) => ( ); export const GmailLogo = (props: SVGProps) => ( ); export const NotionLogo = (props: SVGProps) => ( ); export const GoogleLogo = (props: SVGProps) => ( ); export const GoogleSheetsLogo = (props: SVGProps) => ( ); export const WebflowLogo = (props: SVGProps) => ( ); export const WordPressLogo = (props: SVGProps) => ( ); export const LinearLogo = (props: SVGProps) => ( ); export const GitHubLogo = (props: SVGProps) => ( ); export const AhrefsLogo = (props: SVGProps) => ( ); export const PostHogLogo = (props: SVGProps) => ( ); ``` ### `registry/notra/workflow/components/workflow-run-button.tsx` ```tsx "use client"; import { Button as ButtonPrimitive } from "@base-ui/react/button"; import { cva } from "class-variance-authority"; import { cn } from "cn"; import { PlayIcon, RotateCcwIcon, SquareIcon } from "lucide-react"; import { WORKFLOW_RUN_LABELS, WORKFLOW_RUN_RING_LENGTH, WORKFLOW_RUN_RING_RADIUS, } from "../constants/workflow-ui"; import type { WorkflowRunButtonProps } from "../types/workflow"; const runButtonVariants = cva( "group/run focus-visible:ring-ring/50 relative inline-flex h-8 shrink-0 items-center gap-2 rounded-full pr-3.5 pl-1 text-[0.8125rem] font-medium whitespace-nowrap transition-[background-color,box-shadow,color] duration-200 outline-none select-none focus-visible:ring-3 active:translate-y-px disabled:pointer-events-none disabled:opacity-50", { variants: { phase: { done: "bg-foreground text-background hover:bg-foreground/90 shadow-[inset_0_1px_0_rgba(255,255,255,0.18),0_1px_2px_rgba(0,0,0,0.2)]", idle: "bg-foreground text-background hover:bg-foreground/90 shadow-[inset_0_1px_0_rgba(255,255,255,0.18),0_1px_2px_rgba(0,0,0,0.2)]", running: "bg-background text-foreground ring-foreground/15 hover:bg-muted ring-1", }, }, } ); export const WorkflowRunButton = ({ className, onClick, onPlay, onStop, phase, progress = 0, ...props }: WorkflowRunButtonProps) => { const running = phase === "running"; const ratio = Number.isFinite(progress) ? Math.min(1, Math.max(0, progress)) : 0; let Icon = PlayIcon; if (running) { Icon = SquareIcon; } else if (phase === "done") { Icon = RotateCcwIcon; } return ( { onClick?.(event); if (!event.defaultPrevented) { (running ? onStop : onPlay)?.(); } }} > {running && ( )} {WORKFLOW_RUN_LABELS[phase]} ); }; ``` ### `registry/notra/workflow/components/workflow-run-history.tsx` ```tsx import { cn } from "cn"; import { formatDuration } from "../lib/workflow"; import type { WorkflowRunHistoryProps } from "../types/workflow"; import { WorkflowStatusIndicator } from "./workflow-status"; export const WorkflowRunHistory = ({ className, onSelect, runs, selectedId, ...props }: WorkflowRunHistoryProps) => (
{runs.map((run) => ( ))}
); ``` ### `registry/notra/workflow/components/workflow-run-log.tsx` ```tsx import { cn } from "cn"; import { formatClock } from "../lib/workflow"; import type { WorkflowLogLevel, WorkflowRunLogProps } from "../types/workflow"; const LEVEL_CLASS: Record = { error: "bg-red-500", info: "bg-primary", skip: "bg-muted-foreground/40", success: "bg-emerald-500", }; export const WorkflowRunLog = ({ className, emptyLabel = "Run the workflow to see its log.", entries, ...props }: WorkflowRunLogProps) => (
{entries.length === 0 ? (

{emptyLabel}

) : ( entries.map((entry) => (
{formatClock(entry.at)}
)) )}
); ``` ### `registry/notra/workflow/components/workflow-run-timeline.tsx` ```tsx import { cn } from "cn"; import { formatDuration, getNodeState } from "../lib/workflow"; import type { WorkflowRunTimelineProps } from "../types/workflow"; import { WorkflowBlockIcon } from "./workflow-block-icon"; export const WorkflowRunTimeline = ({ className, elapsedMs, nodes, phase, schedule, ...props }: WorkflowRunTimelineProps) => { const total = Math.max(schedule.totalMs, 1); const percent = (ms: number) => `${(Math.min(ms, total) / total) * 100}%`; return (
{schedule.order.map((id) => { const node = nodes.find((item) => item.id === id); const run = schedule.nodes[id]; if (!(node && run)) { return null; } const state = getNodeState(node, schedule, phase, elapsedMs); const live = state.status === "running" || state.status === "waiting"; const shown = phase === "idle" ? run.end - run.start : state.elapsedMs; return (
{node.title} {run.status === "skipped" ? ( ) : ( <> )} {phase === "running" && ( {run.status === "skipped" ? "–" : formatDuration(shown)}
); })}
); }; ``` ### `registry/notra/workflow/components/workflow-shell.tsx` ```tsx import { cn } from "cn"; import type { ComponentProps } from "react"; export const WorkflowShell = ({ className, ...props }: ComponentProps<"div">) => (
); export const WorkflowShellCard = ({ className, ...props }: ComponentProps<"div">) => (
); export const WorkflowShellHeader = ({ className, ...props }: ComponentProps<"div">) => (
); ``` ### `registry/notra/workflow/components/workflow-status.tsx` ```tsx import { cn } from "cn"; import { CheckIcon, CircleDashedIcon, CircleIcon, DicesIcon, HourglassIcon, LoaderCircleIcon, MinusIcon, RulerIcon, XIcon, } from "lucide-react"; import { Badge } from "@/components/ui/badge"; import { WORKFLOW_STATUSES } from "../constants/workflow"; import { WORKFLOW_LED_CLASS, WORKFLOW_PILL_BOTTOM_CLASS, WORKFLOW_PILL_CLASS, WORKFLOW_PILL_TOP_CLASS, } from "../constants/workflow-ui"; import type { WorkflowDeterminismBadgeProps, WorkflowStatusBadgeProps, WorkflowStatusGlyphProps, WorkflowStatusIndicatorProps, WorkflowStatusPillProps, } from "../types/workflow"; const StatusGlyph = ({ status }: WorkflowStatusGlyphProps) => { switch (status) { case "running": { return ; } case "waiting": { return ; } case "success": { return ; } case "error": { return ; } case "skipped": { return ; } case "queued": { return ; } default: { return ; } } }; export const WorkflowStatusIndicator = ({ className, status, ...props }: WorkflowStatusIndicatorProps) => ( {WORKFLOW_STATUSES[status].label} ); export const WorkflowStatusBadge = ({ className, status, ...props }: WorkflowStatusBadgeProps) => ( {WORKFLOW_STATUSES[status].label} ); export const WorkflowDeterminismBadge = ({ className, deterministic, ...props }: WorkflowDeterminismBadgeProps) => ( {deterministic ? : } {deterministic ? "Deterministic" : "Non-deterministic"} ); export const WorkflowStatusPill = ({ className, status, ...props }: WorkflowStatusPillProps) => ( {status !== "idle" && ( )} {WORKFLOW_STATUSES[status].label} ); ``` ### `registry/notra/workflow/components/workflow-timer.tsx` ```tsx import { cn } from "cn"; import { formatDuration } from "../lib/workflow"; import type { WorkflowTimerProps } from "../types/workflow"; export const WorkflowTimer = ({ className, ms, running, ...props }: WorkflowTimerProps) => ( {running && ( ); ``` ### `registry/notra/workflow/constants/workflow-runs.ts` ```ts import type { WorkflowRunSummary } from "../types/workflow"; export const WORKFLOW_RUNS: WorkflowRunSummary[] = [ { durationMs: 14_200, id: "Run #128", startedAt: "Today, 09:00", status: "success", steps: 11, trigger: "Schedule", }, { durationMs: 16_100, id: "Run #127", startedAt: "Oct 20, 09:00", status: "success", steps: 11, trigger: "Schedule", }, { durationMs: 6_400, id: "Run #126", startedAt: "Oct 17, 14:12", status: "error", steps: 5, trigger: "Manual", }, { durationMs: 15_800, id: "Run #125", startedAt: "Oct 13, 09:00", status: "success", steps: 11, trigger: "Schedule", }, { durationMs: 17_300, id: "Run #124", startedAt: "Oct 6, 09:00", status: "success", steps: 11, trigger: "Schedule", }, ]; ``` ### `registry/notra/workflow/constants/workflow-templates.ts` ```ts import type { WorkflowTemplate } from "../types/workflow"; import { WORKFLOW_COLUMN } from "./workflow-ui"; export const LISTICLE_OUTREACH_WORKFLOW: WorkflowTemplate = { category: "Outreach", description: "Finds best-of listicles that AI answers cite, checks whether you're on them and emails the owners of the ones you're missing from.", edges: [ { id: "e1", source: "trigger", target: "search" }, { id: "e2", source: "trigger", target: "backlinks" }, { id: "e3", source: "search", target: "score", targetPort: "search" }, { id: "e4", source: "backlinks", target: "score", targetPort: "backlinks" }, { id: "e5", source: "score", target: "classify" }, { id: "e6", source: "classify", target: "listed" }, { id: "e7", source: "listed", sourcePort: "yes", target: "tracker" }, { id: "e8", source: "listed", sourcePort: "no", target: "contact" }, { id: "e9", source: "contact", target: "draft" }, { id: "e10", source: "draft", target: "review" }, { id: "e11", source: "review", target: "send" }, ], id: "listicle-outreach", nodes: [ { description: "Every Monday at 09:00", durationMs: 500, fields: [ { label: "Schedule", value: "0 9 * * 1" }, { label: "Timezone", value: "Europe/Berlin" }, ], id: "trigger", kind: "trigger", position: { x: 24, y: 256 }, title: "Weekly schedule", }, { description: "Searches “best changelog tools” and 11 more prompts.", durationMs: 1800, fields: [ { label: "Session", value: "Stealth, residential proxy" }, { label: "Queries", value: "12" }, { label: "Pages per query", value: "2" }, ], id: "search", kind: "integration", logo: "browserbase", output: `[ { "url": "https://saasbase.dev/best-changelog-tools", "rank": 2 }, { "url": "https://devtools.fm/top-release-notes-apps", "rank": 4 } ]`, position: { x: 24 + WORKFLOW_COLUMN, y: 64 }, title: "Search listicles", }, { description: "Pages linking to 3 competitors.", durationMs: 1300, fields: [ { label: "Competitors", value: "beamer.com, launchnotes.com, headway.app", }, { label: "Min. domain rating", value: "40" }, ], id: "backlinks", kind: "integration", logo: "ahrefs", position: { x: 24 + WORKFLOW_COLUMN, y: 448 }, title: "Competitor backlinks", }, { durationMs: 700, fields: [ { label: "Dedupe by", value: "Canonical URL" }, { label: "Score", value: "AI citations × domain rating" }, ], id: "score", inputs: [ { id: "search", label: "Search results" }, { id: "backlinks", label: "Backlinks" }, ], kind: "task", output: `{ "candidates": 37, "dropped": 14 }`, position: { x: 24 + WORKFLOW_COLUMN * 2, y: 256 }, title: "Dedupe & score", }, { description: "Is this a listicle we fit in?", durationMs: 2200, fields: [ { label: "Temperature", value: "0.2" }, { label: "Output", value: "{ fit: boolean, reason: string }" }, ], id: "classify", kind: "ai", model: "claude-sonnet-5-5", output: `{ "fit": true, "reason": "Compares 9 changelog tools for B2B SaaS" }`, position: { x: 24 + WORKFLOW_COLUMN * 3, y: 256 }, title: "Classify fit", }, { branch: "no", durationMs: 400, fields: [{ label: "Condition", value: 'page.mentions("Notra")' }], id: "listed", kind: "condition", outputs: [ { hint: "Update the tracker", id: "yes", label: "Already listed", rate: 0.38, }, { hint: "Find the site owner and pitch", id: "no", label: "Not listed", rate: 0.62, }, ], position: { x: 24 + WORKFLOW_COLUMN * 4, y: 256 }, rule: { operator: "mentions", subject: "Listicle", value: "Notra" }, title: "Are we listed?", }, { description: "Marks the page as won.", durationMs: 600, id: "tracker", kind: "integration", logo: "notion", position: { x: 24 + WORKFLOW_COLUMN * 5, y: 64 }, title: "Update tracker", }, { description: "Finds the author's email on the site.", durationMs: 1600, fields: [ { label: "Pages", value: "/about, /contact, author bio" }, { label: "Fallback", value: "WHOIS, LinkedIn" }, ], id: "contact", kind: "integration", logo: "firecrawl", output: `{ "name": "Maya Lindqvist", "email": "maya@example.com" }`, position: { x: 24 + WORKFLOW_COLUMN * 5, y: 448 }, title: "Find site owner", }, { description: "A short, personal pitch with one proof point.", durationMs: 2600, fields: [ { label: "Temperature", value: "0.7" }, { label: "Max length", value: "120 words" }, ], id: "draft", kind: "ai", model: "gpt-5", position: { x: 24 + WORKFLOW_COLUMN * 6, y: 448 }, title: "Draft pitch", }, { description: "Waits for someone on the team.", durationMs: 1800, fields: [{ label: "Approvers", value: "#geo-outreach" }], id: "review", kind: "approval", position: { x: 24 + WORKFLOW_COLUMN * 7, y: 448 }, title: "Review draft", }, { description: "From your outreach inbox", durationMs: 900, fields: [ { label: "Follow-ups", value: "Day 3, day 7" }, { label: "Stop on", value: "Reply, bounce" }, ], id: "send", kind: "email", logo: "resend", position: { x: 24 + WORKFLOW_COLUMN * 8, y: 448 }, title: "Send outreach", }, ], title: "Listicle outreach", }; export const CONTENT_REFRESH_WORKFLOW: WorkflowTemplate = { category: "Content", description: "When a page loses AI visibility, diagnoses why and routes it to the right fix before republishing.", edges: [ { id: "e1", source: "drop", target: "fetch" }, { id: "e2", source: "fetch", target: "diagnose" }, { id: "e3", source: "diagnose", target: "route" }, { id: "e4", source: "route", sourcePort: "stale", target: "rewrite" }, { id: "e5", source: "route", sourcePort: "schema", target: "jsonld" }, { id: "e6", source: "route", sourcePort: "blocked", target: "robots" }, { id: "e7", source: "route", sourcePort: "competitor", target: "compare" }, { id: "e8", source: "rewrite", target: "merge" }, { id: "e9", source: "jsonld", target: "merge" }, { id: "e10", source: "robots", target: "merge" }, { id: "e11", source: "compare", target: "merge" }, { id: "e12", source: "merge", target: "publish" }, ], id: "content-refresh", nodes: [ { description: "Share of voice fell 20% in 7 days.", durationMs: 500, id: "drop", kind: "trigger", position: { x: 24, y: 296 }, title: "Visibility dropped", }, { durationMs: 1200, id: "fetch", kind: "integration", logo: "context-dev", position: { x: 24 + WORKFLOW_COLUMN, y: 296 }, title: "Fetch page", }, { description: "Compares the page with the answers that dropped it.", durationMs: 2400, id: "diagnose", kind: "ai", model: "gemini-2-5-pro", position: { x: 24 + WORKFLOW_COLUMN * 2, y: 296 }, title: "Diagnose drop", }, { branch: "stale", durationMs: 400, id: "route", kind: "switch", outputs: [ { hint: "Rewrite the stale sections", id: "stale", label: "Outdated facts", rate: 0.41, }, { hint: "Add structured data", id: "schema", label: "Missing schema", rate: 0.23, }, { hint: "Unblock AI crawlers", id: "blocked", label: "Crawler blocked", rate: 0.12, }, { hint: "Publish a comparison page", id: "competitor", label: "Competitor overtook", rate: 0.24, }, ], position: { x: 24 + WORKFLOW_COLUMN * 3, y: 296 }, title: "Route by cause", }, { durationMs: 2600, id: "rewrite", kind: "ai", model: "claude-opus-5-5", position: { x: 24 + WORKFLOW_COLUMN * 4, y: 0 }, title: "Rewrite stale sections", }, { description: "Adds FAQPage and Product JSON-LD.", durationMs: 600, id: "jsonld", kind: "task", position: { x: 24 + WORKFLOW_COLUMN * 4, y: 192 }, title: "Generate schema", }, { durationMs: 900, id: "robots", kind: "integration", logo: "github", position: { x: 24 + WORKFLOW_COLUMN * 4, y: 427.5 }, title: "Open robots.txt PR", }, { durationMs: 2400, id: "compare", kind: "ai", model: "gpt-5", position: { x: 24 + WORKFLOW_COLUMN * 4, y: 579 }, title: "Write comparison page", }, { description: "Continues when any fix is ready.", durationMs: 300, id: "merge", kind: "merge", position: { x: 24 + WORKFLOW_COLUMN * 5, y: 296 }, title: "Collect fixes", }, { durationMs: 1100, id: "publish", kind: "integration", logo: "webflow", position: { x: 24 + WORKFLOW_COLUMN * 6, y: 296 }, title: "Publish update", }, ], title: "Content refresh", }; export const VISIBILITY_MONITOR_WORKFLOW: WorkflowTemplate = { category: "Monitoring", description: "Asks four answer engines your tracked prompts every day and alerts the team when you lose a citation.", edges: [ { id: "e1", source: "daily", target: "prompts" }, { id: "e2", source: "prompts", target: "chatgpt" }, { id: "e3", source: "prompts", target: "perplexity" }, { id: "e4", source: "prompts", target: "gemini" }, { id: "e5", source: "prompts", target: "grok" }, { id: "e6", source: "chatgpt", target: "diff" }, { id: "e7", source: "perplexity", target: "diff" }, { id: "e8", source: "gemini", target: "diff" }, { id: "e9", source: "grok", target: "diff" }, { id: "e10", source: "diff", target: "lost" }, { id: "e11", source: "lost", sourcePort: "true", target: "slack" }, { id: "e12", source: "lost", sourcePort: "true", target: "linear" }, { id: "e13", source: "lost", sourcePort: "false", target: "sheet" }, ], id: "visibility-monitor", nodes: [ { description: "Every day at 06:00", durationMs: 400, id: "daily", kind: "trigger", position: { x: 24, y: 296 }, title: "Daily", }, { description: "48 tracked prompts in 3 languages.", durationMs: 500, id: "prompts", kind: "loop", position: { x: 24 + WORKFLOW_COLUMN, y: 296 }, title: "For each prompt", }, { durationMs: 2000, id: "chatgpt", kind: "ai", model: "gpt-5", position: { x: 24 + WORKFLOW_COLUMN * 2, y: 0 }, title: "Ask ChatGPT", }, { durationMs: 1500, id: "perplexity", kind: "ai", model: "sonar-pro", position: { x: 24 + WORKFLOW_COLUMN * 2, y: 192 }, title: "Ask Perplexity", }, { durationMs: 1800, id: "gemini", kind: "ai", model: "gemini-2-5-pro", position: { x: 24 + WORKFLOW_COLUMN * 2, y: 384 }, title: "Ask Gemini", }, { durationMs: 1700, id: "grok", kind: "ai", model: "grok-4", position: { x: 24 + WORKFLOW_COLUMN * 2, y: 576 }, title: "Ask Grok", }, { description: "Compares citations with yesterday.", durationMs: 700, id: "diff", kind: "task", position: { x: 24 + WORKFLOW_COLUMN * 3, y: 280 }, title: "Diff citations", }, { branch: "true", durationMs: 300, id: "lost", kind: "condition", outputs: [ { hint: "Alert the team", id: "true", label: "Lost a citation", rate: 0.17, }, { hint: "Log it and move on", id: "false", label: "No change", rate: 0.83, }, ], position: { x: 24 + WORKFLOW_COLUMN * 4, y: 280 }, rule: { operator: "lost", subject: "Any engine", value: "a citation" }, title: "Lost citations?", }, { durationMs: 600, id: "slack", kind: "integration", logo: "slack", position: { x: 24 + WORKFLOW_COLUMN * 5, y: 123.5 }, title: "Alert #geo", }, { durationMs: 800, id: "linear", kind: "integration", logo: "linear", position: { x: 24 + WORKFLOW_COLUMN * 5, y: 368.5 }, title: "Create issue", }, { durationMs: 500, id: "sheet", kind: "integration", logo: "google-sheets", position: { x: 24 + WORKFLOW_COLUMN * 5, y: 523.5 }, title: "Log to sheet", }, ], title: "AI visibility monitor", }; export const SCHEMA_AUDIT_WORKFLOW: WorkflowTemplate = { category: "Technical", description: "Crawls the sitemap, validates structured data on every page and opens one PR with the fixes.", edges: [ { id: "e1", source: "deploy", target: "crawl" }, { id: "e2", source: "crawl", target: "validate" }, { id: "e3", source: "validate", target: "fix" }, { id: "e4", source: "fix", target: "pr" }, ], id: "schema-audit", nodes: [ { durationMs: 400, id: "deploy", kind: "trigger", position: { x: 24, y: 64 }, title: "On deploy", }, { durationMs: 1600, id: "crawl", kind: "integration", logo: "context-dev", position: { x: 24 + WORKFLOW_COLUMN, y: 64 }, title: "Render pages", }, { durationMs: 800, id: "validate", kind: "task", position: { x: 24 + WORKFLOW_COLUMN * 2, y: 64 }, title: "Validate JSON-LD", }, { durationMs: 2200, id: "fix", kind: "ai", model: "claude-sonnet-5-5", position: { x: 24 + WORKFLOW_COLUMN * 3, y: 64 }, title: "Write fixes", }, { durationMs: 900, id: "pr", kind: "integration", logo: "github", position: { x: 24 + WORKFLOW_COLUMN * 4, y: 64 }, title: "Open pull request", }, ], title: "Schema audit", }; export const COMMUNITY_MENTIONS_WORKFLOW: WorkflowTemplate = { category: "Monitoring", description: "Watches threads that answer engines quote, drafts a helpful reply and waits for a human before posting.", edges: [ { id: "e1", source: "hourly", target: "find" }, { id: "e2", source: "find", target: "relevant" }, { id: "e3", source: "relevant", sourcePort: "yes", target: "reply" }, { id: "e4", source: "reply", target: "approve" }, ], id: "community-mentions", nodes: [ { durationMs: 400, id: "hourly", kind: "trigger", position: { x: 24, y: 64 }, title: "Hourly", }, { durationMs: 1400, id: "find", kind: "ai", model: "sonar-pro", position: { x: 24 + WORKFLOW_COLUMN, y: 64 }, title: "Find cited threads", }, { branch: "yes", durationMs: 300, id: "relevant", kind: "condition", outputs: [ { hint: "Draft a helpful reply", id: "yes", label: "Relevant", rate: 0.3, }, { hint: "Skip the thread", id: "no", label: "Ignore", rate: 0.7 }, ], position: { x: 24 + WORKFLOW_COLUMN * 2, y: 64 }, rule: { operator: "asks about", subject: "Thread", value: "changelog tools", }, title: "Worth replying?", }, { durationMs: 2000, id: "reply", kind: "ai", model: "claude-haiku-5-5", position: { x: 24 + WORKFLOW_COLUMN * 3, y: 152.5 }, title: "Draft reply", }, { durationMs: 1200, id: "approve", kind: "approval", position: { x: 24 + WORKFLOW_COLUMN * 4, y: 152.5 }, title: "Approve reply", }, ], title: "Community mentions", }; export const WEEKLY_DIGEST_WORKFLOW: WorkflowTemplate = { category: "Reporting", description: "Summarizes the week's AI visibility, crawler traffic and won listicles into one email for the team.", edges: [ { id: "e1", source: "friday", target: "traffic" }, { id: "e2", source: "friday", target: "visibility" }, { id: "e3", source: "traffic", target: "summary", targetPort: "traffic" }, { id: "e4", source: "visibility", target: "summary", targetPort: "visibility", }, { id: "e5", source: "summary", target: "email" }, ], id: "weekly-digest", nodes: [ { durationMs: 400, id: "friday", kind: "trigger", position: { x: 24, y: 160 }, title: "Fridays at 16:00", }, { durationMs: 900, id: "traffic", kind: "integration", logo: "posthog", position: { x: 24 + WORKFLOW_COLUMN, y: 32 }, title: "AI referral traffic", }, { durationMs: 1000, id: "visibility", kind: "task", position: { x: 24 + WORKFLOW_COLUMN, y: 272 }, title: "Visibility report", }, { durationMs: 2100, id: "summary", inputs: [ { id: "traffic", label: "Traffic" }, { id: "visibility", label: "Visibility" }, ], kind: "ai", model: "claude-haiku-5-5", position: { x: 24 + WORKFLOW_COLUMN * 2, y: 112 }, title: "Write digest", }, { durationMs: 700, id: "email", kind: "email", logo: "gmail", position: { x: 24 + WORKFLOW_COLUMN * 3, y: 112 }, title: "Email the team", }, ], title: "Weekly GEO digest", }; export const WORKFLOW_TEMPLATES: WorkflowTemplate[] = [ LISTICLE_OUTREACH_WORKFLOW, CONTENT_REFRESH_WORKFLOW, VISIBILITY_MONITOR_WORKFLOW, SCHEMA_AUDIT_WORKFLOW, COMMUNITY_MENTIONS_WORKFLOW, WEEKLY_DIGEST_WORKFLOW, ]; ``` ### `registry/notra/workflow/constants/workflow-ui.ts` ```ts import type { WorkflowBannerConfig, WorkflowEdgeStatus, WorkflowRunPhase, } from "../types/workflow"; export const WORKFLOW_NODE_WIDTH = 256; export const WORKFLOW_NODE_DROP_OFFSET_Y = 24; export const WORKFLOW_COLUMN = 320; export const WORKFLOW_FIT_PADDING = 0.12; export const WORKFLOW_FIT_MIN_ZOOM = 0.6; export const WORKFLOW_FIT_MAX_ZOOM = 1; export const WORKFLOW_FIT_EDGE_PX = 32; export const WORKFLOW_FIT_VIEW_OPTIONS = { maxZoom: WORKFLOW_FIT_MAX_ZOOM, padding: WORKFLOW_FIT_PADDING, }; export const WORKFLOW_ZOOM_DURATION_MS = 200; export const WORKFLOW_FIT_DURATION_MS = 300; export const WORKFLOW_MINIMAP_STYLE = { height: 96, width: 144 }; export const WORKFLOW_PATTERN_STRENGTH = { cross: 22, dots: 24, gridMajor: 12, gridMinor: 5, lines: 7, }; export const WORKFLOW_PORT_ROW_CLASS = "text-muted-foreground border-table-card-border relative flex h-7.5 min-w-0 items-center border-t px-3 text-[0.6875rem] font-medium"; export const WORKFLOW_CHIP_CLASS = "bg-foreground/[0.05] text-muted-foreground inline-flex h-5 min-w-0 items-center gap-1 rounded-full px-2 text-[0.6875rem] leading-none tabular-nums [&_svg]:size-3 [&_svg]:shrink-0"; export const WORKFLOW_BANNERS: Record< "error" | "waiting", WorkflowBannerConfig > = { error: { className: "text-red-600 dark:text-red-400", label: "Failed", message: "Check the run log", }, waiting: { className: "text-amber-600 dark:text-amber-400", label: "Waiting", message: "Needs approval", }, }; export const WORKFLOW_PILL_CLASS = "bg-table-shell border-table-shell-border text-muted-foreground inline-flex h-9 w-7 shrink-0 flex-col overflow-hidden rounded-lg border [&_svg]:size-3"; export const WORKFLOW_PILL_TOP_CLASS = "flex flex-1 items-center justify-center"; export const WORKFLOW_PILL_BOTTOM_CLASS = "border-table-shell-border flex flex-1 items-center justify-center border-t"; export const WORKFLOW_LED_CLASS = "ring-background/60 size-1.5 rounded-full ring-2 transition-colors duration-300"; export const WORKFLOW_EDGE_COLOR: Record = { active: "text-primary", done: "text-primary/70", idle: "text-muted-foreground/70", skipped: "text-muted-foreground/25", }; export const WORKFLOW_EDGE_DASH = "0 10"; export const WORKFLOW_EDGE_STEP_OPTIONS = { borderRadius: 24, offset: 24 }; export const WORKFLOW_EDGE_RADIUS = 24; export const WORKFLOW_RUN_LABELS: Record = { done: "Run again", idle: "Run workflow", running: "Stop", }; export const WORKFLOW_RUN_RING_RADIUS = 10; export const WORKFLOW_RUN_RING_LENGTH = 2 * Math.PI * WORKFLOW_RUN_RING_RADIUS; export const WORKFLOW_SECTION_TITLE_CLASS = "text-muted-foreground text-[0.6875rem] font-medium tracking-wide uppercase"; export const WORKFLOW_EDGE_REVERSE_STYLE = { animationDirection: "reverse" }; export const WORKFLOW_SKIPPED_DIM_CLASS = "transition-opacity duration-300 group-data-[status=skipped]/node:opacity-45"; export const WORKFLOW_BRANCH_RAIL_CLASS = "border-table-card-border bg-table-card/60 divide-table-card-border mt-0.5 divide-y rounded-[14px] border"; export const WORKFLOW_BRANCH_ROW_CLASS = "relative flex h-10 min-w-0 items-center gap-2.5 px-3"; export const WORKFLOW_BRANCH_LED_CLASS = "size-2 shrink-0 rounded-full ring-2 transition-[background-color,box-shadow,opacity] duration-300"; export const WORKFLOW_RULE_TOKEN_CLASS = "bg-foreground/[0.05] text-foreground/80 inline-flex h-5 max-w-full min-w-0 items-center truncate rounded-md px-1.5 text-[0.6875rem] whitespace-nowrap"; ``` ### `registry/notra/workflow/constants/workflow.ts` ```ts import { FlagIcon, GitForkIcon, HourglassIcon, MailIcon, MergeIcon, PlugIcon, RepeatIcon, SparklesIcon, SplitIcon, SquareFunctionIcon, UserCheckIcon, ZapIcon, } from "lucide-react"; import type { WorkflowKindConfig, WorkflowModel, WorkflowNodeKind, WorkflowNodeStatus, WorkflowPort, WorkflowStatusConfig, } from "../types/workflow"; export const WORKFLOW_DEFAULT_DURATION_MS = 900; export const WORKFLOW_EDGE_TRAVEL_MS = 450; export const WORKFLOW_TICK_MS = 50; export const WORKFLOW_BLOCK_MIME = "application/x-workflow-block"; export const WORKFLOW_IN_PORT: WorkflowPort = { id: "in" }; export const WORKFLOW_OUT_PORT: WorkflowPort = { id: "out" }; export const WORKFLOW_KINDS: Record = { ai: { icon: SparklesIcon, label: "AI step", tileClassName: "bg-violet-500/10 text-violet-600 ring-violet-500/20 dark:text-violet-300", }, approval: { icon: UserCheckIcon, label: "Human approval", tileClassName: "bg-pink-500/10 text-pink-600 ring-pink-500/20 dark:text-pink-300", }, condition: { icon: SplitIcon, label: "If / else", tileClassName: "bg-orange-500/10 text-orange-600 ring-orange-500/20 dark:text-orange-300", }, delay: { icon: HourglassIcon, label: "Wait", tileClassName: "bg-zinc-500/10 text-zinc-600 ring-zinc-500/20 dark:text-zinc-300", }, email: { icon: MailIcon, label: "Email", tileClassName: "bg-emerald-500/10 text-emerald-600 ring-emerald-500/20 dark:text-emerald-300", }, integration: { icon: PlugIcon, label: "Integration", tileClassName: "bg-sky-500/10 text-sky-600 ring-sky-500/20 dark:text-sky-300", }, loop: { icon: RepeatIcon, label: "For each", tileClassName: "bg-indigo-500/10 text-indigo-600 ring-indigo-500/20 dark:text-indigo-300", }, merge: { icon: MergeIcon, label: "Merge", tileClassName: "bg-teal-500/10 text-teal-600 ring-teal-500/20 dark:text-teal-300", }, output: { icon: FlagIcon, label: "Output", tileClassName: "bg-zinc-500/10 text-zinc-600 ring-zinc-500/20 dark:text-zinc-300", }, switch: { icon: GitForkIcon, label: "Decision", tileClassName: "bg-orange-500/10 text-orange-600 ring-orange-500/20 dark:text-orange-300", }, task: { icon: SquareFunctionIcon, label: "Task", tileClassName: "bg-blue-500/10 text-blue-600 ring-blue-500/20 dark:text-blue-300", }, trigger: { icon: ZapIcon, label: "Trigger", tileClassName: "bg-amber-500/10 text-amber-600 ring-amber-500/20 dark:text-amber-300", }, }; export const WORKFLOW_NON_DETERMINISTIC_KINDS: WorkflowNodeKind[] = ["ai"]; export const WORKFLOW_STATUSES: Record< WorkflowNodeStatus, WorkflowStatusConfig > = { error: { className: "text-red-600 dark:text-red-400", label: "Failed", ledClassName: "bg-red-500 shadow-[0_0_6px_var(--color-red-500)]", }, idle: { className: "text-muted-foreground", label: "Idle", ledClassName: "bg-muted-foreground/35", }, queued: { className: "text-muted-foreground", label: "Queued", ledClassName: "bg-muted-foreground/35", }, running: { className: "text-primary", label: "Running", ledClassName: "bg-primary shadow-[0_0_6px_var(--color-primary,var(--primary))] motion-safe:animate-pulse", }, skipped: { className: "text-muted-foreground", label: "Skipped", ledClassName: "bg-muted-foreground/20", }, success: { className: "text-emerald-600 dark:text-emerald-400", label: "Completed", ledClassName: "bg-emerald-500 shadow-[0_0_6px_var(--color-emerald-500)]", }, waiting: { className: "text-amber-600 dark:text-amber-400", label: "Waiting for approval", ledClassName: "bg-amber-500 shadow-[0_0_6px_var(--color-amber-500)] motion-safe:animate-pulse", }, }; export const WORKFLOW_NODE_RING: Record = { error: "border-red-500/60", idle: "", queued: "", running: "border-primary shadow-[0_0_0_0.3rem_color-mix(in_oklab,var(--color-primary,var(--primary))_14%,transparent)]", skipped: "", success: "border-emerald-500/50", waiting: "border-amber-500 shadow-[0_0_0_0.3rem_color-mix(in_oklab,var(--color-amber-500)_14%,transparent)]", }; export const WORKFLOW_MODELS: WorkflowModel[] = [ { id: "claude-opus-5-5", label: "Claude Opus 5.5", logo: "claude", provider: "Anthropic", }, { id: "claude-sonnet-5-5", label: "Claude Sonnet 5.5", logo: "claude", provider: "Anthropic", }, { id: "claude-haiku-5-5", label: "Claude Haiku 5.5", logo: "claude", provider: "Anthropic", }, { id: "gpt-5", label: "GPT-5", logo: "openai", provider: "OpenAI" }, { id: "gpt-5-mini", label: "GPT-5 mini", logo: "openai", provider: "OpenAI" }, { id: "gemini-2-5-pro", label: "Gemini 2.5 Pro", logo: "gemini", provider: "Google", }, { id: "sonar-pro", label: "Sonar Pro", logo: "perplexity", provider: "Perplexity", }, { id: "grok-4", label: "Grok 4", logo: "grok", provider: "xAI" }, { id: "mistral-large", label: "Mistral Large", logo: "mistral", provider: "Mistral", }, { id: "deepseek-v3", label: "DeepSeek V3", logo: "deepseek", provider: "DeepSeek", }, ]; ``` ### `registry/notra/workflow/examples/workflow-runs.tsx` ```tsx "use client"; import { useMemo, useState } from "react"; import { WorkflowRunButton } from "../components/workflow-run-button"; import { WorkflowRunHistory } from "../components/workflow-run-history"; import { WorkflowRunLog } from "../components/workflow-run-log"; import { WorkflowRunTimeline } from "../components/workflow-run-timeline"; import { WorkflowShell, WorkflowShellCard, WorkflowShellHeader, } from "../components/workflow-shell"; import { WorkflowStatusBadge } from "../components/workflow-status"; import { WorkflowTimer } from "../components/workflow-timer"; import { WORKFLOW_RUNS } from "../constants/workflow-runs"; import { LISTICLE_OUTREACH_WORKFLOW } from "../constants/workflow-templates"; import { useWorkflowRun } from "../hooks/use-workflow-run"; import { getRunLog, getRunOrder } from "../lib/workflow"; import type { WorkflowNodeStatus } from "../types/workflow"; const { edges } = LISTICLE_OUTREACH_WORKFLOW; const ORDER = getRunOrder(LISTICLE_OUTREACH_WORKFLOW.nodes, edges); export default function WorkflowRuns() { const [selected, setSelected] = useState(WORKFLOW_RUNS[0]?.id); const summary = WORKFLOW_RUNS.find((item) => item.id === selected); const failAt = summary?.status === "error" ? ORDER[summary.steps - 1] : ""; const nodes = useMemo( () => LISTICLE_OUTREACH_WORKFLOW.nodes.map((node) => node.id === failAt ? { ...node, fail: true } : node ), [failAt] ); const run = useWorkflowRun(nodes, edges); const log = getRunLog(nodes, run.schedule, run.phase, run.elapsedMs); let status: WorkflowNodeStatus = summary?.status ?? "idle"; if (run.phase === "running") { status = "running"; } else if (run.phase === "done") { status = failAt ? "error" : "success"; } return ( {LISTICLE_OUTREACH_WORKFLOW.title} · {selected}
); } ``` ### `registry/notra/workflow/hooks/use-workflow-run.ts` ```ts "use client"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { WORKFLOW_TICK_MS } from "../constants/workflow"; import { getEdgeState, getNodeState, scheduleRun } from "../lib/workflow"; import type { WorkflowEdgeData, WorkflowNodeData, WorkflowRun, WorkflowRunPhase, } from "../types/workflow"; export const useWorkflowRun = ( nodes: WorkflowNodeData[], edges: WorkflowEdgeData[] ): WorkflowRun => { const liveSchedule = useMemo(() => scheduleRun(nodes, edges), [nodes, edges]); const [phase, setPhase] = useState("idle"); const [runSchedule, setRunSchedule] = useState(liveSchedule); const schedule = phase === "idle" ? liveSchedule : runSchedule; const [tickMs, setElapsedMs] = useState(0); const elapsedMs = phase === "done" ? schedule.totalMs : tickMs; const startedAt = useRef(0); useEffect(() => { if (phase !== "running") { return; } const id = window.setInterval(() => { const elapsed = performance.now() - startedAt.current; if (elapsed >= schedule.totalMs) { setElapsedMs(schedule.totalMs); setPhase("done"); return; } setElapsedMs(elapsed); }, WORKFLOW_TICK_MS); return () => window.clearInterval(id); }, [phase, schedule.totalMs]); const play = useCallback(() => { setRunSchedule(liveSchedule); startedAt.current = performance.now(); setElapsedMs(0); setPhase("running"); }, [liveSchedule]); const stop = useCallback(() => { setElapsedMs(0); setPhase("idle"); }, []); const nodeState = useCallback( (id: string) => getNodeState( nodes.find((node) => node.id === id), schedule, phase, elapsedMs ), [nodes, schedule, phase, elapsedMs] ); const edgeState = useCallback( (id: string) => getEdgeState(id, schedule, phase, elapsedMs), [schedule, phase, elapsedMs] ); return { edgeState, elapsedMs, nodeState, phase, play, schedule, stop, totalMs: schedule.totalMs, }; }; ``` ### `registry/notra/workflow/lib/workflow.ts` ```ts import { getSmoothStepPath } from "@xyflow/react"; import { WORKFLOW_DEFAULT_DURATION_MS, WORKFLOW_EDGE_TRAVEL_MS, WORKFLOW_IN_PORT, WORKFLOW_MODELS, WORKFLOW_NON_DETERMINISTIC_KINDS, WORKFLOW_OUT_PORT, } from "../constants/workflow"; import { WORKFLOW_EDGE_RADIUS, WORKFLOW_EDGE_STEP_OPTIONS, } from "../constants/workflow-ui"; import type { WorkflowAnchor, WorkflowBlock, WorkflowEdgeData, WorkflowEdgeStatus, WorkflowLogEntry, WorkflowNodeData, WorkflowNodeState, WorkflowPoint, WorkflowPort, WorkflowRunPhase, WorkflowSchedule, } from "../types/workflow"; export const getInputPorts = (node: WorkflowNodeData): WorkflowPort[] => node.inputs ?? (node.kind === "trigger" ? [] : [WORKFLOW_IN_PORT]); export const getOutputPorts = (node: WorkflowNodeData): WorkflowPort[] => node.outputs ?? (node.kind === "output" ? [] : [WORKFLOW_OUT_PORT]); export const isDeterministic = (node: Pick) => !WORKFLOW_NON_DETERMINISTIC_KINDS.includes(node.kind); export const findModel = (id?: string) => WORKFLOW_MODELS.find((model) => model.id === id); const byPosition = (a: WorkflowNodeData, b: WorkflowNodeData) => a.position.x - b.position.x || a.position.y - b.position.y; export const getRunOrder = ( nodes: WorkflowNodeData[], edges: WorkflowEdgeData[] ) => { const indegree = new Map(nodes.map((node) => [node.id, 0])); for (const edge of edges) { if (indegree.has(edge.target) && indegree.has(edge.source)) { indegree.set(edge.target, (indegree.get(edge.target) ?? 0) + 1); } } const byId = new Map(nodes.map((node) => [node.id, node])); const ready = nodes.filter((node) => indegree.get(node.id) === 0); const order: string[] = []; while (ready.length > 0) { ready.sort(byPosition); const node = ready.shift(); if (!node) { break; } order.push(node.id); for (const edge of edges) { if (edge.source !== node.id) { continue; } const left = (indegree.get(edge.target) ?? 0) - 1; indegree.set(edge.target, left); const target = byId.get(edge.target); if (left === 0 && target) { ready.push(target); } } } const ordered = new Set(order); const rest = nodes.filter((node) => !ordered.has(node.id)).sort(byPosition); return [...order, ...rest.map((node) => node.id)]; }; export const scheduleRun = ( nodes: WorkflowNodeData[], edges: WorkflowEdgeData[] ): WorkflowSchedule => { const order = getRunOrder(nodes, edges); const schedule: WorkflowSchedule = { edges: {}, nodes: {}, order, totalMs: 0, }; const byId = new Map(nodes.map((node) => [node.id, node])); for (const id of order) { const node = byId.get(id); if (!node) { continue; } const incoming = edges .filter((edge) => edge.target === id) .map((edge) => schedule.edges[edge.id]) .filter((run) => run !== undefined); const taken = incoming.filter((run) => run.taken); const settled = Math.max(0, ...incoming.map((run) => run.end)); if (incoming.length > 0 && taken.length === 0) { schedule.nodes[id] = { end: settled, start: settled, status: "skipped" }; } else { const start = Math.max(0, ...taken.map((run) => run.end)); schedule.nodes[id] = { end: start + (node.durationMs ?? WORKFLOW_DEFAULT_DURATION_MS), start, status: node.fail ? "error" : "success", }; } const run = schedule.nodes[id]; for (const edge of edges.filter((item) => item.source === id)) { const port = edge.sourcePort ?? WORKFLOW_OUT_PORT.id; const isTaken = run.status === "success" && (node.branch === undefined || node.branch === port); schedule.edges[edge.id] = { end: run.end + (isTaken ? WORKFLOW_EDGE_TRAVEL_MS : 0), start: run.end, taken: isTaken, }; } schedule.totalMs = Math.max(schedule.totalMs, run.end); } return schedule; }; export const getNodeState = ( node: WorkflowNodeData | undefined, schedule: WorkflowSchedule, phase: WorkflowRunPhase, elapsedMs: number ): WorkflowNodeState => { const run = node ? schedule.nodes[node.id] : undefined; if (!(node && run) || phase === "idle") { return { elapsedMs: 0, status: "idle" }; } if (elapsedMs < run.start) { return { elapsedMs: 0, status: "queued" }; } if (run.status === "skipped") { return { elapsedMs: 0, status: "skipped" }; } if (elapsedMs < run.end) { return { elapsedMs: elapsedMs - run.start, status: node.kind === "approval" ? "waiting" : "running", }; } return { elapsedMs: run.end - run.start, status: run.status }; }; export const getEdgeState = ( id: string, schedule: WorkflowSchedule, phase: WorkflowRunPhase, elapsedMs: number ): WorkflowEdgeStatus => { const run = schedule.edges[id]; if (!run || phase === "idle" || elapsedMs < run.start) { return "idle"; } if (!run.taken) { return "skipped"; } return elapsedMs < run.end ? "active" : "done"; }; export const formatDuration = (ms: number) => { if (ms < 60_000) { return `${(ms / 1000).toFixed(1)}s`; } if (ms < 3_600_000) { const minutes = Math.floor(ms / 60_000); const seconds = Math.floor((ms % 60_000) / 1000); return `${minutes}m ${String(seconds).padStart(2, "0")}s`; } const hours = Math.floor(ms / 3_600_000); const minutes = Math.floor((ms % 3_600_000) / 60_000); return `${hours}h ${String(minutes).padStart(2, "0")}m`; }; export const formatRate = (rate: number) => `${Math.round(rate * 100)}%`; export const formatClock = (ms: number) => { const minutes = Math.floor(ms / 60_000); const seconds = Math.floor((ms % 60_000) / 1000); const tenths = Math.floor((ms % 1000) / 100); return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}.${tenths}`; }; const branchLabel = (node: WorkflowNodeData) => getOutputPorts(node).find((port) => port.id === node.branch)?.label ?? node.branch; export const getRunLog = ( nodes: WorkflowNodeData[], schedule: WorkflowSchedule, phase: WorkflowRunPhase, elapsedMs: number ): WorkflowLogEntry[] => { if (phase === "idle") { return []; } const entries: WorkflowLogEntry[] = []; const byId = new Map(nodes.map((node) => [node.id, node])); for (const id of schedule.order) { const node = byId.get(id); const run = schedule.nodes[id]; if (!(node && run) || elapsedMs < run.start) { continue; } const base = { nodeId: id, title: node.title }; if (run.status === "skipped") { entries.push({ ...base, at: run.start, id: `${id}:skip`, level: "skip", message: "Skipped, no earlier step led here", }); continue; } entries.push({ ...base, at: run.start, id: `${id}:start`, level: "info", message: node.kind === "approval" ? "Waiting for approval" : "Started", }); if (elapsedMs < run.end) { continue; } const took = run.end - run.start; let message = `Completed in ${formatDuration(took)}`; if (run.status === "error") { message = `Failed after ${formatDuration(took)}`; } else if (node.branch !== undefined) { message = `Took the "${branchLabel(node)}" branch`; } entries.push({ ...base, at: run.end, id: `${id}:end`, level: run.status === "error" ? "error" : "success", message, }); } return entries.sort((a, b) => a.at - b.at); }; export const getEdgePath = ( from: WorkflowPoint, to: WorkflowPoint, radius = WORKFLOW_EDGE_RADIUS ) => { const dx = to.x - from.x; const dy = to.y - from.y; const midX = from.x + dx / 2; const r = Math.min(radius, Math.abs(dy) / 2, Math.abs(dx) / 2); if (r < 0.5) { return `M ${from.x} ${from.y} L ${to.x} ${to.y}`; } const sx = Math.sign(dx); const sy = Math.sign(dy); const sweep = sx * sy > 0 ? 1 : 0; return [ `M ${from.x} ${from.y}`, `L ${midX - sx * r} ${from.y}`, `A ${r} ${r} 0 0 ${sweep} ${midX} ${from.y + sy * r}`, `L ${midX} ${to.y - sy * r}`, `A ${r} ${r} 0 0 ${1 - sweep} ${midX + sx * r} ${to.y}`, `L ${to.x} ${to.y}`, ].join(" "); }; export const getFlowEdgePath = ( source: WorkflowAnchor, target: WorkflowAnchor, reverse = false ): [string, number, number] => { const [from, to] = reverse ? [target, source] : [source, target]; if (target.x > source.x) { return [ getEdgePath(from, to), (source.x + target.x) / 2, (source.y + target.y) / 2, ]; } const [path, labelX, labelY] = getSmoothStepPath({ ...WORKFLOW_EDGE_STEP_OPTIONS, sourcePosition: from.position, sourceX: from.x, sourceY: from.y, targetPosition: to.position, targetX: to.x, targetY: to.y, }); return [path, labelX, labelY]; }; export const createNodeFromBlock = ( block: WorkflowBlock, position: WorkflowPoint ): WorkflowNodeData => ({ branch: block.outputs && block.outputs.length > 1 ? block.outputs[0].id : undefined, description: block.description, durationMs: block.durationMs, id: `${block.id}-${Date.now().toString(36)}`, inputs: block.inputs, kind: block.kind, logo: block.logo, model: block.model, outputs: block.outputs, position, title: block.title, }); ``` ### `registry/notra/workflow/types/workflow.ts` ```ts import type { Edge, Node, Position } from "@xyflow/react"; import type { ComponentProps, ComponentType, ReactNode, SVGProps } from "react"; export type WorkflowNodeKind = | "trigger" | "task" | "ai" | "integration" | "condition" | "switch" | "merge" | "loop" | "delay" | "approval" | "email" | "output"; export type WorkflowNodeStatus = | "idle" | "queued" | "running" | "waiting" | "success" | "error" | "skipped"; export type WorkflowEdgeStatus = "idle" | "active" | "done" | "skipped"; export type WorkflowRunPhase = "idle" | "running" | "done"; export type WorkflowLogoName = | "openai" | "anthropic" | "claude" | "gemini" | "perplexity" | "mistral" | "deepseek" | "grok" | "browserbase" | "context-dev" | "firecrawl" | "resend" | "slack" | "gmail" | "notion" | "google" | "google-sheets" | "webflow" | "wordpress" | "linear" | "github" | "ahrefs" | "posthog"; export type WorkflowLogLevel = "info" | "success" | "error" | "skip"; export type WorkflowIcon = ComponentType>; export interface WorkflowPoint { x: number; y: number; } export interface WorkflowAnchor extends WorkflowPoint { position: Position; } export interface WorkflowPort { id: string; label?: string; hint?: string; rate?: number; } export interface WorkflowRule { subject: string; operator: string; value: string; } export interface WorkflowField { label: string; value: string; } export interface WorkflowNodeData { id: string; kind: WorkflowNodeKind; title: string; description?: string; position: WorkflowPoint; inputs?: WorkflowPort[]; outputs?: WorkflowPort[]; logo?: WorkflowLogoName; model?: string; durationMs?: number; branch?: string; rule?: WorkflowRule; fail?: boolean; fields?: WorkflowField[]; output?: string; } export interface WorkflowEdgeData { id: string; source: string; sourcePort?: string; target: string; targetPort?: string; label?: string; animated?: boolean; } export interface WorkflowGraph { edges: WorkflowEdgeData[]; nodes: WorkflowNodeData[]; } export interface WorkflowTemplate extends WorkflowGraph { id: string; title: string; description: string; category: string; } export interface WorkflowKindConfig { icon: WorkflowIcon; label: string; tileClassName: string; } export interface WorkflowStatusConfig { className: string; label: string; ledClassName: string; } export interface WorkflowLogoConfig { label: string; logo: WorkflowIcon; tile?: boolean; } export interface WorkflowModel { id: string; label: string; logo: WorkflowLogoName; provider: string; } export interface WorkflowBlock { id: string; title: string; description: string; group: string; kind: WorkflowNodeKind; logo?: WorkflowLogoName; model?: string; inputs?: WorkflowPort[]; outputs?: WorkflowPort[]; durationMs?: number; } export interface WorkflowNodeRun { start: number; end: number; status: "success" | "error" | "skipped"; } export interface WorkflowEdgeRun { start: number; end: number; taken: boolean; } export interface WorkflowSchedule { edges: Record; nodes: Record; order: string[]; totalMs: number; } export interface WorkflowNodeState { elapsedMs: number; status: WorkflowNodeStatus; } export interface WorkflowLogEntry { at: number; id: string; level: WorkflowLogLevel; message: string; nodeId: string; title: string; } export interface WorkflowRunSummary { id: string; durationMs: number; startedAt: string; status: "success" | "error" | "running"; trigger: string; steps: number; } export interface WorkflowRun { edgeState: (id: string) => WorkflowEdgeStatus; elapsedMs: number; nodeState: (id: string) => WorkflowNodeState; phase: WorkflowRunPhase; play: () => void; schedule: WorkflowSchedule; stop: () => void; totalMs: number; } export type WorkflowLogoProps = Omit, "name"> & { name: WorkflowLogoName; }; export interface WorkflowFlowNodeData extends Record { node: WorkflowNodeData; state?: WorkflowNodeState; } export interface WorkflowFlowEdgeData extends Record { animated?: boolean; reverse?: boolean; label?: string; status: WorkflowEdgeStatus; } export type WorkflowFlowNode = Node; export type WorkflowFlowEdge = Edge; export type WorkflowCanvasBackgroundVariant = | "dots" | "lines" | "cross" | "grid" | "none"; export interface WorkflowCanvasBackgroundProps { gap?: number; variant?: WorkflowCanvasBackgroundVariant; } export type WorkflowNodeSizes = Record< string, { height: number; width: number } >; export interface WorkflowPortListProps { ports: WorkflowPort[]; title: string; } export interface WorkflowControlsProps { toolbar?: ReactNode; } export interface WorkflowBannerConfig { className: string; label: string; message: string; } export interface WorkflowStatusGlyphProps { status: WorkflowNodeStatus; } export interface WorkflowTemplatePreviewProps { template: WorkflowTemplate; } export interface WorkflowCanvasProps { className?: string; focusId?: string; background?: WorkflowCanvasBackgroundVariant; gap?: number; nodes: WorkflowNodeData[]; edges: WorkflowEdgeData[]; nodeState?: (id: string) => WorkflowNodeState; edgeState?: (id: string) => WorkflowEdgeStatus; selectedId?: string; controls?: boolean; minimap?: boolean; toolbar?: ReactNode; minZoom?: number; maxZoom?: number; onSelectNode?: (id: string) => void; onNodeMove?: (id: string, position: WorkflowPoint) => void; onNodeRemove?: (id: string) => void; onConnect?: (edge: Omit) => void; onDropBlock?: (blockId: string, position: WorkflowPoint) => void; } export type WorkflowNodeCardProps = ComponentProps<"div"> & { node: WorkflowNodeData; state?: WorkflowNodeState; selected?: boolean; connectable?: boolean; children?: ReactNode; }; export interface WorkflowHandleProps { active?: boolean; className?: string; connectable?: boolean; portId: string; type: "source" | "target"; } export type WorkflowEdgeProps = ComponentProps<"g"> & { path: string; reverse?: boolean; status?: WorkflowEdgeStatus; animated?: boolean; }; export type WorkflowTimerProps = ComponentProps<"span"> & { ms: number; running?: boolean; }; export type WorkflowStatusIndicatorProps = ComponentProps<"span"> & { status: WorkflowNodeStatus; }; export type WorkflowStatusBadgeProps = ComponentProps<"span"> & { status: WorkflowNodeStatus; }; export type WorkflowStatusPillProps = ComponentProps<"span"> & { status: WorkflowNodeStatus; }; export type WorkflowDeterminismBadgeProps = ComponentProps<"span"> & { deterministic: boolean; }; export type WorkflowRunButtonProps = Omit< ComponentProps<"button">, "children" > & { phase: WorkflowRunPhase; progress?: number; onPlay?: () => void; onStop?: () => void; }; export type WorkflowNodePaletteProps = ComponentProps<"div"> & { blocks: WorkflowBlock[]; onAdd?: (block: WorkflowBlock) => void; }; export interface WorkflowNodeBranchProps { connectable?: boolean; node: WorkflowNodeData; port: WorkflowPort; status: WorkflowNodeStatus; } export interface WorkflowNodeBannerProps { status: WorkflowNodeStatus; } export interface WorkflowNodeSummaryProps { children?: ReactNode; node: WorkflowNodeData; } export interface WorkflowNodeEngineProps { node: WorkflowNodeData; } export interface WorkflowNodeFooterProps { node: WorkflowNodeData; state?: WorkflowNodeState; } export interface WorkflowBranchSelectProps { node: WorkflowNodeData; outputs: WorkflowPort[]; onBranchChange: (id: string, branch: string) => void; } export type WorkflowNodeSettingsProps = Pick< WorkflowNodeSheetProps, "onBranchChange" | "onModelChange" > & { node: WorkflowNodeData; }; export type WorkflowNodeSheetProps = WorkflowOverlayProps & { node?: WorkflowNodeData; state?: WorkflowNodeState; log?: WorkflowLogEntry[]; onDelete?: (id: string) => void; onModelChange?: (id: string, model: string) => void; onBranchChange?: (id: string, branch: string) => void; }; export type WorkflowRunLogProps = ComponentProps<"div"> & { entries: WorkflowLogEntry[]; emptyLabel?: string; }; export type WorkflowRunTimelineProps = ComponentProps<"div"> & { nodes: WorkflowNodeData[]; schedule: WorkflowSchedule; elapsedMs: number; phase: WorkflowRunPhase; }; export type WorkflowRunHistoryProps = Omit< ComponentProps<"div">, "onSelect" > & { runs: WorkflowRunSummary[]; selectedId?: string; onSelect?: (id: string) => void; }; export interface WorkflowModelSelectProps { className?: string; defaultValue?: string; disabled?: boolean; id?: string; models?: WorkflowModel[]; onValueChange?: (value: string) => void; value?: string; } export type WorkflowTemplateCardProps = ComponentProps<"div"> & { template: WorkflowTemplate; onUse?: (template: WorkflowTemplate) => void; }; export type WorkflowTemplateDialogProps = WorkflowOverlayProps & { template?: WorkflowTemplate; onUse?: (template: WorkflowTemplate) => void; }; export interface WorkflowBlockIconProps { block: Pick; className?: string; } export interface WorkflowOverlayProps { defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; open?: boolean; } export interface WorkflowCanvasBackgroundOption { label: string; value: WorkflowCanvasBackgroundVariant; } export interface WorkflowNodeDemo { node: WorkflowNodeData; state: WorkflowNodeState; } export interface WorkflowEdgeDemo { animated?: boolean; label: string; status: WorkflowEdgeStatus; } ```