Interface Overview
This guide walks through every part of the NORA user interface so you can navigate confidently.
The Canvas
The canvas is the central workspace where your workflow lives. It’s an infinite, pannable, zoomable surface with a dotted grid background.
Navigation
| Action | How |
|---|---|
| Pan | Click and drag the background |
| Zoom | Scroll wheel up/down |
| Fit to view | Click the fit-view button in the bottom-left zoom controls |
| Zoom in/out | Use the + / − buttons in the bottom-left controls |
Minimap
A small overview panel in the bottom-right corner shows all nodes on the canvas as colored rectangles. Blue rectangles represent script/command nodes; gray represents other types. Click anywhere on the minimap to jump to that part of the canvas.
Two Modes: Edit Mode and Run Mode
NORA has two primary modes that change what controls are available and how you interact with nodes.
Run Mode (Default)
This is the mode you start in. It’s designed for executing workflows and viewing results.
- Click a node’s ▶ button to run it
- Click ▶ Run Full Workflow to run the entire chain
- Expand node output panels to see command results
- Click links on nodes to open URLs, files, or directories
- You cannot add, delete, edit, or connect nodes
Edit Mode
Click the Edit Mode button (top-right) to enter Edit Mode. The toolbar expands with editing controls, and the header shows NORA (Edit Mode).
In Edit Mode you can:
– Add new nodes (blocks, notes, conditions, AI nodes)
– Edit node properties (double-click or select + Edit Block)
– Connect nodes by dragging between handles
– Delete nodes and connections
– Rearrange the layout
– Access the Tool Library
– Import and export configurations
Click Exit Edit Mode to return to Run Mode.
Control Areas
The interface has several control panels positioned around the canvas.
Top-Left: App Title & Search
- NORA title — shows
(Edit Mode)when editing is active - Context hint — tells you what actions are available:
- Run Mode: “Click nodes to execute commands • Click links to open resources”
- Edit Mode: “Click nodes to select and edit • Use toolbar to add/connect/delete blocks”
- Search box — type to filter and highlight nodes by name. Matching nodes are scrolled into view.
Left Side: Save Controls
Directly below the title panel:
- 💾 Save — saves changes to the currently loaded config file. Shows
*when there are unsaved changes. Disabled if no config file is loaded or if you’re on the default workflow. - Visual states: blue (ready), yellow (saving), green (saved), red (failed), gray (disabled)
- 📄 Save As… — saves the current workflow to a new file
- Workflow name — displays the active config name in bold (e.g., “My Workflow”). Shows a ⭐ Default badge if it’s the configured default workflow.
- Last saved time — shows timestamp after a successful save (e.g., “2:35 PM”)
Top-Right: Mode & Actions Toolbar
The contents change based on the current mode.
Run Mode buttons:
| Button | Description |
|---|---|
| ⚙️ | Open Settings (desktop app only) |
| Edit Mode | Switch to Edit Mode |
Edit Mode buttons:
| Button | Description |
|---|---|
| ⚙️ | Open Settings (desktop app only) |
| Load Draft | Load a previously saved draft |
| Load Default | Load the configured default workflow (desktop only) |
| 📄 New | Start a new blank workflow |
| Add Block | Add a new command/script node |
| 📁 Quick Add | Add node(s) from files/folders on disk (desktop only) |
| Add Note | Add a sticky-note annotation node |
| Add Condition | Add a node from the condition template library (dropdown to pick template) |
| Edit Block | Edit the selected node’s properties (visible when a node is selected) |
| Connect | Connect the selected node to another (visible when a node is selected) |
| Duplicate | Clone the selected node (visible when a node is selected) |
| Delete | Remove the selected node (visible when a node is selected) |
| Export Config | Export the current workflow as a config file |
| Import Config | Import a workflow config file (.js or .json) |
| Layout dropdown | Choose a layout algorithm + Auto Arrange button |
| Save Draft | Save current state as a draft |
| Exit Edit Mode | Return to Run Mode |
Left Side: Execution Controls (Run Mode Only)
Below the save panel, a set of execution controls appears:
| Button | Description |
|---|---|
| ▶ Run from Selected | Run the workflow starting from the currently selected node. Disabled until you select a node. Shows the selected node name below. |
| ▶ Run Full Workflow | Execute all nodes in order, following connections. Changes to “⏳ Running…” during execution. |
| 🔄 Run in Background | Execute the workflow headlessly on the server. Requires a saved config file. |
| 📋 Checklist Tool | Open the checklist-to-config converter — converts structured text checklists into workflow config files (desktop: opens in a new window; browser: opens in a new tab) |
| 📂 Browse Configs | Open the config file browser to load a different workflow |
| ✓ Finish & Report | End the current run and generate an execution report |
| 🔄 Reset Run / 🧹 Clear Visuals | Stop a running workflow or clear the visual status indicators from all nodes |
During Execution
While a workflow is running:
– A green “Running” indicator appears showing the currently executing node name
– Nodes change color: blue (running, with pulse animation), green (success), red (error)
– If a node fails and Stop on Error is active (always on for foreground runs), a compact red “⛔ Stopped” panel appears showing the failed node name and a “▶ Continue” button. Click it to skip the failed node and resume execution from its successors
Working with Nodes
Selecting Nodes
- Run Mode: Click a node to expand its output panel
- Edit Mode: Click a node to select it. The selection is highlighted, and context-sensitive buttons appear in the toolbar (Edit Block, Connect, Duplicate, Delete)
Node Status Colors
| Color | Meaning |
|---|---|
| Gray (default) | Idle — not yet executed |
| Blue (pulsing) | Currently running |
| Green | Completed successfully |
| Red | Failed with an error |
Node Controls (Run Mode)
Each command/script node has action buttons visible on hover or always shown:
- ▶ Run — execute the node’s command
- 📟 Run in Terminal — open the command in a new terminal window (for interactive commands)
- 🛑 Kill — stop a running process
- 📋 Copy output — copy the command output to clipboard
Expanding Output
Click a node or its output area to expand the output panel. This shows:
– The full command output (stdout/stderr)
– Exit status and PID
– Copy button for the output text
Working with Connections (Edges)
Creating Connections
Drag method: Hover over the right side of a node to see the source handle (small circle). Click and drag from it to the target handle (left side) of another node.
Connect button: Select a node in Edit Mode → click Connect → enter the target node’s ID → click Connect.
Editing Edge Labels
Click any connection line in Edit Mode — or double-click any connection in any mode — to open the Edge Label Modal. This lets you:
- Set a label — type any text, or use the quick-label buttons
- Quick labels — context-aware suggestions appear based on the source node type:
- Condition nodes:
success,error,in-window,out-of-window,match,no-match - AI Router nodes: category names from the node’s configuration
- AI Agent nodes: tool names from the node’s tool list
- Custom Script Agent nodes: route labels from the node’s configuration
- Delete the connection — remove the edge entirely
- Save or Cancel
Important: Condition nodes, AI Router nodes, and agent nodes require properly labeled edges to route execution correctly. An edge without the right label won’t be followed during workflow execution.
Deleting Connections
Open the Edge Label Modal (click the edge in Edit Mode) and click Delete Edge.
Layout Options
In Edit Mode, use the Layout dropdown to select an arrangement algorithm, then click Auto Arrange to apply it.
| Layout | Description |
|---|---|
| Hierarchical | Tree-like structure flowing left to right (default) |
| Vertical | Nodes stacked top to bottom |
| Horizontal | Nodes arranged in a single row |
| Zigzag | Alternating left-right pattern |
| Grid | Organized in rows and columns |
| Spiral | Nodes arranged in an outward spiral |
| Force-Directed | Physics-based layout — connected nodes pull together, unconnected nodes push apart |
Layouts reposition all nodes but preserve your connections. You can manually drag nodes to fine-tune positions after applying a layout.
Quick Add (Desktop Only)
The 📁 Quick Add button provides a fast way to create nodes from files and folders on your disk. It opens a modal with three options:
| Option | What It Does |
|---|---|
| 📁 Folder | Opens a folder picker. If the folder contains scripts, creates a command node. If multiple scripts are found, you can pick one or create a separate node for each. |
| 📄 File | Opens a file picker. Creates a node configured to run or reference that file. |
| 📦 Multiple Folders | Opens a multi-folder picker. Creates one node per selected folder, automatically arranged in a grid. |
After adding, a green notification confirms: “✅ Added [name] as node”.
Drag & Drop from File Explorer (Desktop Only)
You can also drag files and folders directly from Windows File Explorer onto the NORA canvas:
| Drop Target | What Happens |
|---|---|
| Empty canvas area | Creates a new Command Node configured to run/reference that file |
| Regular node | Adds the file as a link button on that node (with duplicate detection) |
| AI Autonomous Agent node | Adds the file as a tool the agent can invoke |
You can drop multiple files at once — NORA shows a batch notification (e.g., “✅ Added 3 links to Node Title”).
Right-Side Panel: Tool Library
In Edit Mode, a vertical tab labeled 🧰 TOOL LIBRARY appears along the right edge of the screen. Click it (or press Ctrl+Shift+L) to open the Tool Library drawer.
The Tool Library lets you:
– Browse reusable tool packages you’ve created
– Insert a pre-configured node onto the canvas
– Create new tools from existing nodes
– Install tool packages from folders
– Manage tool versions
See the Tool Library guide for full details.
Modals & Dialogs
NORA uses several modal dialogs for editing and configuration:
| Modal | Opened By | Purpose |
|---|---|---|
| Edit Block | Double-click a node, or select + Edit Block | Edit all properties of a node |
| Edge Label | Click a connection in Edit Mode | Set/edit edge labels |
| Script Editor | “Edit Script” button on a node | Full code editor (Monaco) for script files |
| Settings | ⚙️ gear icon | App settings, AI keys, email, scheduler |
| Import Config | Import Config button or 📂 Browse Configs | Browse and load workflow configs |
| Parameter Prompt | Triggered when running a node with parameters | Collect runtime inputs before execution |
| Save Confirmation | Saving over an existing file | Confirm save with backup notice |
| Error Modal | Validation errors on load | Shows config validation problems |
| Quick Add | 📁 Quick Add button | Create nodes from files/folders |
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
| Ctrl+S | Save to active config file |
| Ctrl+Shift+S | Save As (new file) |
| Ctrl+Shift+L | Toggle Tool Library drawer (Edit Mode) |
The built-in ReactFlow canvas also responds to standard interactions (scroll to zoom, drag to pan, etc.).
Undo Delete
After deleting a node in Edit Mode, an ↩ Undo Delete button appears in the bottom-right corner. NORA keeps a history of the last 3 deleted nodes, so you can undo recent deletions.
Desktop vs. Browser Differences
Some features are only available in the desktop (Electron) version:
| Feature | Desktop | Browser |
|---|---|---|
| ⚙️ Settings button | ✅ | ❌ |
| Quick Add (file/folder picker) | ✅ | ❌ |
| Load Default workflow | ✅ | ❌ |
| System tray integration | ✅ | ❌ |
| Native file save dialogs | ✅ | ❌ |
| Checklist converter tool | ✅ | ❌ |
| Gmail email notifications | ✅ (via worker process) | ✅ |
Note: Gmail OAuth setup is configured through the Settings modal (desktop only). In browser/dev mode, Gmail credentials can be set via environment variables or by editing
~/.nora/email-credentials.jsondirectly. Email notifications work in both modes.
What’s Next?
Now that you know your way around, dive into the specifics:
- Node Types — Learn what each node type does and how to configure it
- Building Workflows — Techniques for designing effective workflows
- Running Workflows — All execution modes explained
- Reference — Keyboard shortcuts, API endpoints, troubleshooting, and glossary