Flow-Editor UI Walk-Through

The Flow Editor is only four main zones plus a handful of icons.
Once you can name each part, every other tutorial will make sense.
Use this page as a glossary you can pop back to at any time.

---

1. Top Bar

Icon / Area	What it does
← Back	Leave the current flow and return to the "Flows" page.
Flow title	Click to rename. Saves automatically on blur.
▶ Play	Runs the flow. If the flow is in a paused state, the flow will run from the first block that is not already green.
⏸ Pause / Continue	Freezes execution at the current blue outline; click play to resume.
⏹ Stop	Clears all outlines and resets run state.
💾 Save	Manual save (the editor auto-saves on every run).

---

2. Left Sidebar — Toolbox

1. Search Box – filters the list live; accepts partial words.
2. Categories
   • Browser Interaction (web-automation commands)
   • Script (all regular blocks)
3. Script Sub-categories
   • variables – pink blocks
   • lists – brown blocks
   • dictionaries – purple blocks
   • Data, Flow, Logic, Math, Text, Message – functional groups
4. “new …” entries create named objects on the fly.
   Example: type greeting in new variable… → hit Enter → a pink greeting block appears underneath.

Drag any block from the Toolbox into the Script panel to add it to your flow.

---

3. Center — Script Panel

• Blocks stack vertically.
• A red caret shows the insertion point while you drag.
• Container blocks (if, repeat, etc.) display drop commands here zones—place blocks inside to nest them.
• Right-click a blank area to collapse or expand all blocks at once (quick navigation).

---

4. Block Anatomy

1. Header – block name; colour hints at the originating category.
2. ✎ Pencil – enters Edit mode; the rest of the panel dims so you can focus.
3. ✖ Delete – removes the block (and children, if any).
4. Advanced expander – reveals optional parameters.
5. Container drop zone – only on blocks that can hold other blocks.

Edit mode controls
• Ok – save changes.
• Cancel – discard.

4.1 Operator blocks

Logic operators (==, !=, <, >, etc.) and math operators (+, -, *, /, etc.) are operator blocks.
They behave slightly differently from regular blocks so they can nest cleanly inside each other.

• No header – the block is drawn as a tight capsule containing only the operator symbol and text inputs on either side.
• Edit / Delete overlay – click the operator symbol to reveal the ✎ (edit) and ✖ (delete) buttons.
• Edit mode – while editing, click the symbol again to toggle ✔ Ok and 🚫 Cancel buttons.
• Drag behaviour – operator blocks can be dragged into any parameter field that expects a value; they can also accept nested blocks themselves (e.g., each side of ==).

---

5. Right Sidebar — Browser / Console

Tab	Purpose
Browser	Live preview window for automation steps that open pages.
Console	Shows write to console output.

Both can be active at the same time, or just one.

---

6. Runtime Colour & Outline Legend

Outline	Meaning
Blue	Currently executing.
Green	Executed successfully during the last run.
Red	Block threw an error; see Console for details.

You now know the layout and vocabulary of the Flow Editor—everything else builds on this foundation.