Components/Automation

Automation

An automation editor with a flow canvas, node settings, and a run log.

Since 0.6.0BETA

This component doc is in progress

This page is still being migrated. Demos and API details may change.

Usage

Clipboard OCR → Translate

Runs once in view; change a node's settings and press Run again.

Loading demo...

Overview

Tuff's screenshot OCR flow as an automation you can edit and run: an AI re-read when native OCR isn't confident enough, then a translation back to the clipboard.

  • The first time it scrolls into view it runs once (about 3.3 seconds), and the edges the data travels along move; reduced motion shows the finished run with no timers.
  • Click a node to edit it for the next run; set Native OCR's minimum confidence to 94% or more (the sample reads 93%) and the run detours through the AI re-read.
  • With Simulate rate limit (429) on the Translate node, translation fails first and succeeds on a retry 600ms later.
  • Stop marks the step in progress as cancelled and adds a cancelled by user log line.
  • Nodes drag and snap to the dot grid; a drag is kept as an offset, so it survives full screen.
  • Wide (≥ 960px) shows the run history, four-step progress, and the log pane; in the column and on narrow screens, Node and This run become tabs.

Customization

  • For your own flow, nodes and edges are plain arrays and flowNodes() only computes coordinates; edges always run from a node's bottom to the next node's top, so offset branch nodes sideways.
  • For a real runner, replace the timed steps in buildPlan() with backend events (SSE or WebSocket); each event calls setNode() once and appends a log line.
  • TxFlowchart has no per-edge styling API: the template borrows dashed for "in flight" and keeps the color and motion inside prefers-reduced-motion: no-preference.
  • TxFlatSelect and the fine-tune card's type menu don't teleport; keep them clear of overflow: hidden ancestors and away from the container's bottom edge.
RegionComponentsRole
Top barTxWorkingIndicator, TxStatusBadge, TxSteps, TxSwitch, TxButtonState, progress, and Run / Stop
CanvasTxFlowchart, TxStatusBadge, TxWorkingIndicator, TxDotIndicatorFive nodes and moving edges
Node settingsTxFlatSelect, TxScrubField, TxSwitch, TxFineTuneCard, TxToastPanelA form per node
This runTxTaskRows, TxCodeStreamStep states and run log
Run history (wide)TxTimelineRecent runs, newest first
Log pane (wide)TxSplitterCanvas and log heights
CompletionTxToastPanelResult card for four seconds