Node Sheet

A side sheet with the settings, run log and output of a step.

"use client";

import { useState } from "react";

import { Button } from "@/components/ui/button";

import { WorkflowNodeSheet } from "../components/workflow-node-sheet";
import { LISTICLE_OUTREACH_WORKFLOW } from "../constants/workflow-templates";
import { getRunLog, scheduleRun } from "../lib/workflow";
import type { WorkflowNodeData } from "../types/workflow";

const SCHEDULE = scheduleRun(
  LISTICLE_OUTREACH_WORKFLOW.nodes,
  LISTICLE_OUTREACH_WORKFLOW.edges
);
const LOG = getRunLog(
  LISTICLE_OUTREACH_WORKFLOW.nodes,
  SCHEDULE,
  "done",
  SCHEDULE.totalMs
);
const CLASSIFY = LISTICLE_OUTREACH_WORKFLOW.nodes.find(
  (node) => node.id === "classify"
);

export default function WorkflowNodeSheetExample() {
  const [open, setOpen] = useState(false);
  const [node, setNode] = useState<WorkflowNodeData | undefined>(CLASSIFY);
  return (
    <>
      <Button onClick={() => setOpen(true)} variant="outline">
        Open “Classify fit”
      </Button>
      <WorkflowNodeSheet
        log={LOG}
        node={node}
        onModelChange={(_, model) =>
          setNode((current) => current && { ...current, model })
        }
        onOpenChange={setOpen}
        open={open}
        state={{ elapsedMs: 2200, status: "success" }}
      />
    </>
  );
}

$ bunx --bun shadcn@latest add @notra/workflow-node-sheet

WorkflowNodeSheet is a shadcn Sheet for the selected step. Settings lists the step’s fields and ports and, for AI steps, a model picker. Run shows the step’s log lines and Output shows its sample result once it completes. Pass onDelete to add a Delete step button.

Used in

GEO Workflow Builder

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