Workflow Builder Surface

A builder for declarative agent workflows, sketched end to end with Wireframe so the whole surface is arguable before any of it is built.

1 / What this covers

What this covers

A workflow is a graph: nodes are agent steps, edges carry control and data, and a gate stops the run until a human approves.

Every screen below borrows a layout that a real desktop product already proved, rather than inventing one for a solved problem. The reference each screen follows, and the reason behind each layout choice, is listed under the prototype.

Click through it. Every arrow in the sketch is a screen you can reach.

Workflow builder, ten desktop screens and one mobile

HomeDesktop · 1200 × 820px workspace viewport

app.fabrica.dev/acme-robotics

Needs your attention

Workflow	Run	State	Waiting
Nightly digest	#1042	Needs your approval	14m
Release notes	#1040	Failed at step 6	1d

Recent runs

Workflow	Run	Result	Finished
Ticket triage	#1041	Succeeded	2h ago
Nightly digest	#1039	Succeeded	1d ago
Onboarding brief	#1038	Succeeded	2d ago

Last 24 hours

Health

Runs363 in flight

Succeeded86%

31 of 36

Budget used42%

$168 of $400

Workflow libraryDesktop · 1200 × 820px workspace viewport

app.fabrica.dev/acme-robotics/workflows

FilterOwnerScope

Name	Owner	Steps	Last run	Result
Nightly digest	Dana	6	14m ago	Awaiting approval
Ticket triage	Sam	4	2h ago	Succeeded
Release notes	Priya	9	1d ago	Failed
Onboarding brief	Dana	3	2d ago	Succeeded
Weekly rollup	Sam	5	Retired	Archived

Canvas builderDesktop · 1200 × 820px workspace viewport

app.fabrica.dev/acme-robotics/workflows/nightly-digest/edit

Add a block:

Canvas

Trigger to delivery

Trigger

Every night, 6pm

Schedule

Step 1

Collect artifacts

Agent · Researcher

on success

Step 2

Draft the digest

Agent · Writer

Selected

then

Step 3

Human approval

Gate · blocks the run

approved

Step 4

Publish to wiki

Agent · Publisher

Done

Digest artifact

One artifact per night

Step 2

Draft the digest

Agent · Writer

AgentCost ceilingRequire approval first

Step configurationDesktop · 1200 × 820px workspace viewport

app.fabrica.dev/acme-robotics/workflows/nightly-digest/steps/2

What this step does

Step nameShown on the canvas and in every run.AgentPromptWrite {artifacts} or {org} to drop in a value the step received.

When it fails

Retry failed stepsAttemptsThen

Limits

Cost ceilingThe run pauses rather than overspending.Require approval before this stepRecord the tool-call trace

What this step receives

Values earlier steps hand to this one. Write the name in braces to use it in the prompt.

Value	Comes from	Type
{artifacts}	Step 1	Artifact[]
{org}	The trigger	Org
{today}	The trigger	Date

What waits on it

Step 3, Human approval, cannot start until this step finishes.

Run historyDesktop · 1200 × 820px workspace viewport

app.fabrica.dev/acme-robotics/runs

FilterStatusWorkflow

Run	Workflow	Result	Cost	Started
#1042	Nightly digest	Awaiting approval	$0.41	14m ago
#1041	Ticket triage	Succeeded	$0.12	2h ago
#1040	Release notes	Failed	$1.86	1d ago
#1039	Nightly digest	Succeeded	$0.39	1d ago
#1038	Onboarding brief	Succeeded	$0.08	2d ago

Selected

Run #1042

Nightly digest · started 14m ago

Awaiting approval

Cost so far$0.41Ceiling $2.00

Step 3 of 4 is waiting on you.

Run detailDesktop · 1200 × 820px workspace viewport

app.fabrica.dev/acme-robotics/runs/1042

Steps

Step	State	Took
1 Collect artifacts	Done	1m 04s
2 Draft the digest	Done	12m 41s
3 Human approval	Waiting on you	-
4 Publish to wiki	Queued	-

Step 3

Waiting on you

Approve to publish tonight's digest to the wiki.

Step 2 output

Drafted digest

Digest preview

sonnet · 18,402 tokens · $0.41

Cancel this run

Stops after the current step and keeps what it produced.

Create workflowDesktop · 1200 × 820px workspace viewport

app.fabrica.dev/acme-robotics/workflows/new

Basics
Trigger
First step

Name this workflow

NameShown everywhere this workflow appears.What it is forScopeStart from a templateTemplates prefill the trigger and the first two steps.

Create workflow, triggerDesktop · 1200 × 820px workspace viewport

app.fabrica.dev/acme-robotics/workflows/new/trigger

Basics
Trigger
First step

What starts a run

TriggerRuns atTime zoneSkip when the last run is still going

Reads as

Every night at 6:00 PM Pacific

Next run would be today at 6:00 PM.

A schedule cannot fan out. Pick an event trigger for one run per item.

SettingsDesktop · 1200 × 820px workspace viewport

app.fabrica.dev/acme-robotics/settings

General

Organization nameSlugapp.fabrica.dev/acme-roboticsDefault run scope

Run limits

Monthly ceilingRuns queue rather than exceed it.Require approval above $5 a runLet members publish workflows

Danger zone

Deleting an org removes its workflows and run history.

Empty libraryDesktop · 1200 × 820px workspace viewport

app.fabrica.dev/nova-labs/workflows

An empty canvas

No workflows yet

A workflow runs a sequence of agent steps on a trigger you choose.

Mobile only: run failedPhone · 390 × 720px minimum · grows with content

Run #1040

Release notes

Run failed

Step 6 of 9

The publisher agent could not reach the wiki.

Failed 3 times, then stopped the run.

What you can do

Re-queue from step 6keeps earlier output
View step 6check the target folder
Cancel the rundiscards the draft

2 / Where each layout comes from

Where each layout comes from

Every desktop screen borrows a pattern a real product already proved, so the argument is about this product rather than about layout.

Persistent workspaces
- Home - Linear "My Issues", Stripe Dashboard home. Contrast: the work list is the heaviest thing on the page and the health rail recedes.
- Workflow library - GitHub's repository list. Alignment: a table rather than cards, so names and dates compare down a column.
- Canvas builder - the n8n and Zapier editors. Three panes, and proximity puts the selected step's controls beside the step.
- Run history - GitHub Actions runs. Master-detail with the detail inline, so the list is never lost, and figures right-align.
- Run detail - the GitHub Actions run page. Local hierarchy of breadcrumb, title, state, body; cancelling sits apart from approving.
Focused routes and states
- Step configuration - Stripe's settings form. Measure: the form holds a reading width instead of stretching across the window.
- Create workflow - Stripe onboarding. Repetition: both wizard steps are one centered column of the same shape.
- Settings - GitHub and Stripe settings. Two columns: section nav, then one form column at a reading measure.
- Empty library - Linear and Notion empty states. One sentence, one primary action, one alternative, nothing else.

Across all of them: the global nav never moves, only the workspace changes; a region draws no box unless it behaves like a card; and status is a word first, tinted second.

The phone screen is the single deliberate exception, because a failed run is the thing people open away from their desk.

3 / What the sketch is claiming

What the sketch is claiming

Three claims are worth arguing with before anything is built.

A workflow is edited on a canvas, not in a list, because an author reasons about order and branching visually.

A gate is a step like any other, so approval shows up in the same run timeline as the work it is holding up.

A run is the unit a person opens when something goes wrong, which is why the one mobile screen is a failed run rather than a dashboard.