Interface overview
When you open http://localhost:3000, you land on /workspace. The screen has four functional zones:
- Left sidebar — three buttons: Workflow, Tasks, Portfolio (materials).
- Top header — workflow title menu, mode switch (Create / Execute).
- Canvas — the infinite canvas where nodes live and edges connect them.
- Smart Island — the floating dock at the bottom that changes based on selection and mode.
Left sidebar (top-left)
Three icon buttons, in this order:
| Icon | Opens | What it does |
|---|---|---|
| Workflow | Workflow dialog | Browse, open, rename, duplicate, or delete saved workflows. New workflows are also created here. |
| Zap | Task panel | Lists every execution your account has run. Click a task to inspect its inputs, outputs, and any errors. Useful when a node fails — the task panel surfaces the Modal / LLM error message. |
| FolderOpen | Portfolio dialog | The materials library: every file you’ve uploaded across all workflows. Re-use, re-name, or delete materials. This is where uploads live — not on the Smart Island. |
If you came here from older documentation that said the materials button is on the Smart Island, that has changed; it’s the third left-sidebar icon now.
Top header
The workflow title menu sits at the top-center: click the workflow name to rename, save, or fork the current canvas.
To the right is the mode switch:
- Create mode (Sparkles icon) — the default. You arrange nodes, connect them, and prepare the workflow. Add toolbar appears on the Smart Island.
- Execute mode (Play icon) — you trigger the run. Smart Island collapses to a single Play button.
See Workflow modes for the full distinction.
Canvas
The main work area is an infinite, pannable, zoomable canvas built on React Flow. Standard controls:
- Pan — middle-click drag, or hold space + drag, or two-finger scroll on trackpad.
- Zoom — pinch, scroll wheel, or use the bottom-right zoom controls.
- Select node — click. Selection drives what the Smart Island shows you next.
- Multi-select — drag a box over multiple nodes, or shift-click.
- Connect — drag from an output handle (right side of a node) to an input handle (left side of another). Connection is validated against the ABI: text outputs only land on text inputs, image on image, etc.
Smart Island (bottom)
The floating dock at the bottom of the canvas. Its contents depend on mode and selection:
- Create mode + nothing selected → Add toolbar (seven icons: 3D model, Document, Image, Text, Video, Audio, Link). Click any to add a new material node at the viewport center.
- Create mode + one or more nodes selected → Contextual operations relevant to those nodes (e.g. “transform → image generation” when a text node is selected, or “combine → lip sync” when an audio and a video are selected).
- Execute mode → A single large Play button. While a workflow is running, the button shows a multicolor breathing animation.
See Smart Island for the full button catalog.
Node anatomy
Every node on the canvas has:
- A header with the node type and a small handle to move/drag it.
- Input handles on the left, one per typed input the node declares in the ABI.
- Output handles on the right, one per typed output.
- A body that varies by node type — text input, image preview, audio waveform, video player, document filename, etc.
- A status indicator that lights up while a task tied to this node is running, and surfaces the result or error when finished.
For the full list of node types and their inputs/outputs, see Node types.
Where things persist
- Workflows and node positions —
data/tongflow.db(SQLite). - Uploaded materials —
data/uploads/on disk, referenced by the Portfolio. - Task execution history — in the same SQLite database; visible via the Zap (Tasks) button.
Nothing leaves your machine without you wiring it to an external transform node (Modal / LLM).
