# Automation Builder Page

> A React automation builder page: rules with on and off switches and run health, a visual workflow editor, a cron inspector, tests and logs.

- Type: React block (Blocks)
- Access: Pro (the source needs a Wingo UI Pro plan, see https://wingo-ui.com/pricing)
- Version: 1.0.0
- Install: `npx wingo-ui@latest add automation-builder-page`
- Docs: https://wingo-ui.com/components/automation-builder-page

## Interaction

The list shows every automation with its trigger (a lightning bolt for events, a clock for schedules, described in words), a bar of its last 14 runs, how the last one went and when, and an on / off switch that works without opening the row. Type in the search to filter by name or trigger, press All, Active, Off or With errors; the count is announced. Click or tap a row (Enter on the keyboard) to open it: on a phone the editor slides in over the list and a swipe from the left edge, the back button or Escape brings the list back. Drag the divider to resize the list. In the editor, click the name to rename it, flip Active (turning on a broken workflow is refused with a toast; confirmDisable asks before turning off), press Run a test (the steps light up one after another, the result lands in History; the QuickBooks sync fails with a 503 and jumps to its log), and Save once something changed (mod+s saves; a workflow without a trigger or with a dangling branch shows its problems and selects the step). The ⋯ menu duplicates, exports the automation as JSON or deletes it after a confirm; on phones it also holds Test and Save. The canvas pans and zooms, drags steps, inserts one on a connection, and opens a step's settings on click (a sheet on phones); the schedule trigger opens a cron picker with the next runs. Leaving an automation with unsaved changes asks first. History lists the runs (status, start, duration, trigger; cards on phones) and the selected run's log with level chips, search, wrap and download; on phones a run pushes its log with a back button. New opens a dialog with a name and four templates (Blank, Invoice reminder, Scheduled report, New lead). Sections rise in once on mount; reduced motion keeps them still.

## Installation

```bash
npx wingo-ui@latest add automation-builder-page
```

Pro item: run `npx wingo-ui@latest login` once with a Pro account. The CLI adds the files, their dependencies and a version record for updates.

With shadcn: `npx shadcn@latest add @wingo-ui/automation-builder-page` (needs the @wingo-ui registry with your API key in components.json)

Files:

- `components/blocks/automation-builder-page.tsx`
- `components/blocks/automation-builder-page-data.ts`

npm dependencies: `npm i motion lucide-react`

Wingo UI dependencies (installed automatically):

- [Alert](https://wingo-ui.com/components/alert) ([Markdown](https://wingo-ui.com/components/alert.md))
- [Alert Dialog](https://wingo-ui.com/components/alert-dialog) ([Markdown](https://wingo-ui.com/components/alert-dialog.md))
- [Badge](https://wingo-ui.com/components/badge) ([Markdown](https://wingo-ui.com/components/badge.md))
- [Button](https://wingo-ui.com/components/button) ([Markdown](https://wingo-ui.com/components/button.md))
- [Cron Picker](https://wingo-ui.com/components/cron-picker) ([Markdown](https://wingo-ui.com/components/cron-picker.md))
- [Dialog](https://wingo-ui.com/components/dialog) ([Markdown](https://wingo-ui.com/components/dialog.md))
- [Dropdown Menu](https://wingo-ui.com/components/dropdown-menu) ([Markdown](https://wingo-ui.com/components/dropdown-menu.md))
- [Empty State](https://wingo-ui.com/components/empty-state) ([Markdown](https://wingo-ui.com/components/empty-state.md))
- [Inline Edit](https://wingo-ui.com/components/inline-edit) ([Markdown](https://wingo-ui.com/components/inline-edit.md))
- [Input](https://wingo-ui.com/components/input) ([Markdown](https://wingo-ui.com/components/input.md))
- [Kbd](https://wingo-ui.com/components/kbd) ([Markdown](https://wingo-ui.com/components/kbd.md))
- [List](https://wingo-ui.com/components/list) ([Markdown](https://wingo-ui.com/components/list.md))
- [Log Viewer](https://wingo-ui.com/components/log-viewer) ([Markdown](https://wingo-ui.com/components/log-viewer.md))
- [Radio Group](https://wingo-ui.com/components/radio-group) ([Markdown](https://wingo-ui.com/components/radio-group.md))
- [Search Input](https://wingo-ui.com/components/search-input) ([Markdown](https://wingo-ui.com/components/search-input.md))
- [Split View](https://wingo-ui.com/components/split-view) ([Markdown](https://wingo-ui.com/components/split-view.md))
- [Switch](https://wingo-ui.com/components/switch) ([Markdown](https://wingo-ui.com/components/switch.md))
- [Table](https://wingo-ui.com/components/table) ([Markdown](https://wingo-ui.com/components/table.md))
- [Tabs](https://wingo-ui.com/components/tabs) ([Markdown](https://wingo-ui.com/components/tabs.md))
- [Tag](https://wingo-ui.com/components/tag) ([Markdown](https://wingo-ui.com/components/tag.md))
- [Toast](https://wingo-ui.com/components/toast) ([Markdown](https://wingo-ui.com/components/toast.md))
- [Tracker](https://wingo-ui.com/components/tracker) ([Markdown](https://wingo-ui.com/components/tracker.md))
- [Workflow Canvas](https://wingo-ui.com/components/workflow-canvas) ([Markdown](https://wingo-ui.com/components/workflow-canvas.md))
- [useControllableState](https://wingo-ui.com/components/use-controllable-state) ([Markdown](https://wingo-ui.com/components/use-controllable-state.md))
- [useMediaQuery](https://wingo-ui.com/components/use-media-query) ([Markdown](https://wingo-ui.com/components/use-media-query.md))
- [useShortcut](https://wingo-ui.com/components/use-shortcut) ([Markdown](https://wingo-ui.com/components/use-shortcut.md))
- [File export](https://wingo-ui.com/components/file-export) ([Markdown](https://wingo-ui.com/components/file-export.md))
- [Form validation](https://wingo-ui.com/components/form-validation) ([Markdown](https://wingo-ui.com/components/form-validation.md))
- [Motion presets](https://wingo-ui.com/components/motion) ([Markdown](https://wingo-ui.com/components/motion.md))
- [Navigation](https://wingo-ui.com/components/navigation) ([Markdown](https://wingo-ui.com/components/navigation.md))
- [Number format](https://wingo-ui.com/components/number-format) ([Markdown](https://wingo-ui.com/components/number-format.md))
- [Relative time](https://wingo-ui.com/components/relative-time) ([Markdown](https://wingo-ui.com/components/relative-time.md))
- [Tones](https://wingo-ui.com/components/tones) ([Markdown](https://wingo-ui.com/components/tones.md))
- [UIProvider](https://wingo-ui.com/components/ui-config) ([Markdown](https://wingo-ui.com/components/ui-config.md))

## Usage

```tsx
// app/(admin)/automations/page.tsx (the shell lives in app/(admin)/layout.tsx: <AdminShell layout="fill">{children}</AdminShell>)
"use client"

import { AutomationBuilderPage, type Automation } from "@/components/blocks/automation-builder-page"

export default function AutomationsPage() {
  return (
    <AutomationBuilderPage
      height="fill"
      onToggle={async (automation: Automation, enabled: boolean) => {
        await fetch(`/api/automations/${automation.id}`, { method: "PATCH", body: JSON.stringify({ enabled }) })
      }}
      onSave={async (automation: Automation) => {
        await fetch(`/api/automations/${automation.id}`, { method: "PUT", body: JSON.stringify(automation) })
      }}
      onTest={async (automation: Automation) => {
        const response = await fetch(`/api/automations/${automation.id}/test`, { method: "POST" })
        if (!response.ok) throw new Error(await response.text())
      }}
    />
  )
}
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `automations?` | `Automation[]` |  | The automations, controlled ({ id, name, description?, enabled, trigger: { type: "event" \| "schedule", label, cron? }, workflow: WorkflowValue, lastRun?, runs7d }); pair it with onAutomationsChange. |
| `defaultAutomations?` | `Automation[]` |  | The automations while uncontrolled; defaults to AUTOMATION_BUILDER_SAMPLE.automations (six Summit CRM rules). Workflows without positions are laid out on load. |
| `onAutomationsChange?` | `(automations: Automation[]) => void` |  | Called with the whole new list after a toggle, save, create, duplicate or delete. |
| `runs?` | `AutomationRun[]` |  | The run history ({ id, automationId, label?, startedAt, duration, status, trigger, error?, logs: LogLine[] }); defaults to AUTOMATION_BUILDER_SAMPLE.runs (40 runs). Test runs are added on top. |
| `nodeTypes?` | `WorkflowNodeDef[]` |  | The canvas step catalog (triggers, CRM actions, messages, AI, logic); defaults to AUTOMATION_NODE_TYPES. Keep it stable. |
| `selectedId?` | `string \| null` |  | The open automation, controlled; null shows the Pick an automation placeholder. |
| `defaultSelectedId?` | `string \| null` | `"invoice-reminder"` | The automation open first while uncontrolled. Phones start on the list either way. |
| `onSelectedIdChange?` | `(id: string \| null) => void` |  | Called when a row, a create or a delete changes the open automation. |
| `tab?` | `"editor" \| "history"` |  | The editor tab, controlled. |
| `defaultTab?` | `"editor" \| "history"` | `"editor"` | The tab shown first: the workflow canvas or the run history with logs. |
| `onTabChange?` | `(tab: AutomationBuilderPageTab) => void` |  | Called when the tabs switch, and when a failed test or View log opens the history. |
| `defaultStepId?` | `string` | `""` | A step id whose settings open on mount, or "trigger" for the automation's trigger (the cron picker on schedules). |
| `height?` | `"auto" \| "fill" \| "screen"` | `"fill"` | fill takes what is left of an admin shell with layout="fill" and scrolls inside its panes; screen is a standalone h-dvh page; auto is as tall as the window (at least 760px) with a fixed 640px canvas. |
| `listWidth?` | `number` | `320` | The list column in px (260 to 420); the divider drags it too. |
| `saveShortcut?` | `string` | `"mod+s"` | The key that saves the open automation, shown on the Save button; "" binds nothing. |
| `confirmDisable?` | `boolean` | `false` | Ask before switching an automation off (from the list or the editor). |
| `onToggle?` | `(automation: Automation, enabled: boolean) => (void \| Promise<unknown>)` |  | The on / off switch, optimistic; a rejection flips it back with a toast. A 600 ms request is simulated by default. |
| `onSave?` | `(automation: Automation) => (void \| Promise<unknown>)` |  | Save and mod+s, after validateWorkflow passes; a rejection keeps the changes with a toast. Simulated by default. |
| `onTest?` | `(automation: Automation) => (void \| Promise<unknown>)` |  | Run a test: resolve when it passes, reject with the reason when it fails. The default takes 1.8 s and fails for QuickBooks sync with QuickBooks responded with 503. |
| `onCreate?` | `(automation: Automation) => (void \| Automation \| Promise<void \| Automation>)` |  | The new automation dialog; resolve with the stored automation to replace the draft, reject to show the error in the dialog. |
| `onDelete?` | `(automation: Automation) => (void \| Promise<unknown>)` |  | Delete from the ⋯ menu, run while the confirm dialog shows its spinner; a rejection keeps the dialog open with the error. |
| `onDuplicate?` | `(automation: Automation) => (void \| Automation \| Promise<void \| Automation>)` |  | Duplicate: gets the copy (off, no history); resolve with the stored one to replace it. |
| `labels?` | `Partial<AutomationBuilderPageLabels>` |  | Every visible string, English by default (DEFAULT_AUTOMATION_BUILDER_PAGE_LABELS; AUTOMATION_BUILDER_PAGE_LABELS_EN is the same set). Nested keys (canvas, cronPicker, logViewer, table, list, inlineEdit) translate the composed items. |
| `locale?` | `string` | `"en-US"` | Intl locale for relative times, durations, dates in the logs and the cron descriptions. |
| `now?` | `Date \| number` |  | The reference time for relative times, test runs and next cron runs; defaults to the live clock. |
| `tone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | The accent of New and Save, the switches, the pressed chips, the tabs, the canvas selection and the cron picker. |
| `radius?` | `"sm" \| "md" \| "lg"` | `"md"` | The canvas, the run table, the log and the alerts (12px, 16px or 24px). |
| `loading?` | `boolean` | `false` | The list rows and the editor as skeletons. |
| `animateIn?` | `boolean` | `true` | The list and the editor rise in once on mount; off in thumbnails and under reduced motion. |
| `linkComponent?` | `(props: LinkComponentProps) => ReactNode` | `"<a>"` | The router link for links inside the page; defaults to the LinkProvider's (a plain anchor). |
| `className?` | `string` |  | Merged onto the root. |
| `classNames?` | `Partial<Record<AutomationBuilderPageSlot, string>>` |  | Classes for the parts: list, editor, header, canvas, history, log, empty, newDialog. |

## Parts

### AUTOMATION_NODE_TYPES (constant)

The node palette of the workflow editor, grouped as triggers, CRM actions, messaging, AI and logic. Filter it or add your own node definitions.

### DEFAULT_AUTOMATION_BUILDER_PAGE_LABELS (constant)

Every English string of the rules list, the editor, the inspector, tests and run logs. Spread it and override what you translate.

### AUTOMATION_BUILDER_PAGE_LABELS_EN (constant)

An alias of DEFAULT_AUTOMATION_BUILDER_PAGE_LABELS, kept so older imports keep working.

### AUTOMATION_BUILDER_SAMPLE (constant)

The demo content in one object: automations, runs and now. Replace it with data from your API.

### AUTOMATION_SAMPLE_AUTOMATIONS (constant)

The sample rules, each with its trigger, workflow, last run and 7-day success and failure counts.

### AUTOMATION_SAMPLE_RUNS (constant)

The sample run history, newest first, with what started each run, its status, duration, error and log lines.

### AUTOMATION_SAMPLE_IDS (constant)

The ids of the sample automations, offered by the demo's defaultSelectedId control.

### AUTOMATION_BUILDER_NOW (constant)

The fixed "now" of the sample (September 24, 2026, 4:40 PM) that run times are measured from.

## Examples

- **Scheduled report, cron inspector open**: defaultSelectedId="weekly-report" defaultStepId="trigger": the Monday 9:00 AM schedule in the cron picker with its next runs.
- **Failed QuickBooks sync, history**: defaultTab="history" on QuickBooks sync: the failed run #4812 and its log with the 503 errors.
- **Nothing selected**: defaultSelectedId={null}: the list and the Pick an automation placeholder.
- **No automations yet**: An empty account: the list offers the templates, each opens the new automation dialog.
- **Brand tone, large radius**: tone="brand" radius="lg" confirmDisable on the AI lead scoring, with a run in progress.
- **Loading**: loading: the list rows and the editor as skeletons.
- **British English**: locale="en-GB": 24 hour times and day-first dates in the list, the history and the cron picker.

## See also

- [Workflow Canvas](https://wingo-ui.com/components/workflow-canvas) ([Markdown](https://wingo-ui.com/components/workflow-canvas.md))
- [Split View](https://wingo-ui.com/components/split-view) ([Markdown](https://wingo-ui.com/components/split-view.md))
- [Cron Picker](https://wingo-ui.com/components/cron-picker) ([Markdown](https://wingo-ui.com/components/cron-picker.md))
- [Log Viewer](https://wingo-ui.com/components/log-viewer) ([Markdown](https://wingo-ui.com/components/log-viewer.md))
- [Admin Shell](https://wingo-ui.com/components/admin-shell) ([Markdown](https://wingo-ui.com/components/admin-shell.md))

---

Canonical: https://wingo-ui.com/components/automation-builder-page
More components: https://wingo-ui.com/components · Index for agents: https://wingo-ui.com/llms.txt