Every user-facing view in NodeTool across the web app, desktop (Electron), and mobile. Each entry links to the detailed docs page and shows the current screenshot. Missing or pending screenshots are marked with a placeholder.
Top-Level Views (Web App)
Routes live under / in the web app. They’re also the main destinations inside the desktop app.
Dashboard / Portal — /dashboard
The home screen. Search, recent workflows, templates, and quick chat.
Docs: User Interface → Dashboard · Getting Started
Login — /login
Authentication screen for cloud (Supabase) deployments. Skipped automatically in local-only mode.
Docs: Authentication
Workflow Editor — /editor/:workflow
The main visual editor. Build workflows by connecting nodes on an infinite canvas, with panels on every edge.
Docs: Workflow Editor · Editor Panels
Chain Editor — /chain/:workflowId?
A linear, card-based alternative to the node graph. Better for simple pipelines and guided authoring.
Docs: Chain Editor
Workflow Graph View — /graph/:workflowId
Read-only visualization of a saved workflow. Useful for sharing, embedding, and review.
Docs: Workflow Graph View
Global Chat — /chat/:thread_id?
Conversational AI with multi-thread history, agent mode, tools, and workflow integration.
Docs: Global Chat
Standalone Chat — /standalone-chat/:thread_id?
A slim, focused chat window — same engine as Global Chat but without the full app shell.
Docs: User Interface → Standalone Chat
Mini-Apps Page — /apps/:workflowId?
Run saved workflows through simplified form UIs inside the main app.
Docs: User Interface → Mini-Apps
Standalone Mini-App — /miniapp/:workflowId
A dedicated full-window Mini-App runner. Launched from the tray on desktop or by a direct link.
Docs: User Interface → Mini-Apps
Asset Explorer — /assets
Browse, search, organize, and tag every file used in your workflows.
Docs: Asset Management
Asset Editor — /assets/edit/:assetId
Full-featured image editor for assets. Crop, paint, and transform without leaving NodeTool.
Docs: Image Editor
Collections — /collections
Group related documents into indexable collections for RAG workflows.
Docs: Collections · Indexing
Templates Gallery — /templates
Ready-to-use example workflows organized by tag and use case.
Docs: Templates Gallery
Models Manager — /models
Find, install, filter, and manage local and cloud AI models.
Docs: Models Manager
Editor Panels and Surfaces
Visible inside the Workflow Editor at /editor/:workflow.
App Header
Top navigation with logo, workspace switcher, Models button, Assets button, Chat, Settings, and the download indicator.
Docs: User Interface → App Header
Left Panel (Workflows, Chat, Assets, Collections, Packs, VibeCoding)
Collapsible drawer with tabs for navigating workspace content without leaving the canvas.
Docs: Editor Panels → Left Panel
Node Menu (Space / double-click)
Search, browse categories, and insert nodes onto the canvas.
Docs: Workflow Editor → Finding Nodes
Right Panel (Inspector)
Tabs for node properties, workflow assistant, logs, jobs, trace, agent, version history, and workspace tree.
Docs: Editor Panels → Right Panel
Bottom Panel (Terminal, Trace, Jobs, Logs)
Runtime diagnostics dock — quick access to the terminal, execution trace, job queue, and raw logs.
Docs: Editor Panels → Bottom Panel
Floating Toolbar
Context-sensitive actions that appear over the canvas (run, pause, resume, stop, layout).
Docs: Editor Panels → Floating Toolbar
Node Canvas
The infinite work surface where nodes are placed and connected.
Docs: Workflow Editor → Canvas Basics
Tabs Bar
Switch between open workflows without losing state.
Docs: Workflow Editor → Multiple Workflows
Context Menus (Node, Edge, Canvas, Selection)
Right-click menus for every object on the canvas.
Docs: Workflow Editor → Context Menus
Find in Workflow
Dialog for searching within the current workflow.
Docs: Workflow Editor → Finding Nodes
Command Menu (⌘K / Alt+K)
Global command palette — go anywhere, run anything.
Docs: User Interface → Command Menu
Workflow Assistant Chat
Side-panel chat that can read and modify the open workflow.
Docs: Global Chat → Workflow Integration
VibeCoding Modal
AI-assisted custom UI generator for workflows.
Docs: VibeCoding
Dialogs and Modals
All dialogs live inside the main app. Most are reachable from the App Header, right-click menus, or ⌘K.
Settings Dialog (General / Providers / Folders / Secrets / Remote / About)
Central configuration surface with a persistent sidebar.
Docs: Configuration
Provider API Keys
Paste API keys for OpenAI, Anthropic, Google, Mistral, Groq, Replicate, and more.
Docs: Configuration → API Keys · Models & Providers
Recommended Models Dialog
Opens from the “Missing Model” indicator on nodes.
Docs: Models Manager → Recommended Models
Model Selection Dialogs (LLM, Image, Video, TTS, ASR, Embedding, HuggingFace)
Type-aware model pickers for each property role.
Docs: Models & Providers
Download Manager
Track, retry, and pause model and asset downloads.
Docs: Models Manager → Downloading Models
Model README
In-app HuggingFace README viewer.
Docs: HuggingFace Integration
Delete Model Confirmation
Safety prompt before removing a model from the local cache.
Docs: Models Manager → Managing Models
Open / Create Workflow Dialog
Start a new workflow or open an existing one.
Docs: Getting Started
Workflow Form
Edit workflow metadata — name, description, thumbnail, tags.
Docs: Workflow Editor
Workflow Delete Confirmation
Safe delete with an undo window.
Docs: Workflow Editor
Quick Add Node
Add a node without opening the full Node Menu — useful when chaining off a connection.
Docs: Workflow Editor → Adding Nodes
Node Picker (Chain Editor)
Pick the next card in a linear chain.
Docs: Chain Editor → Adding Steps
File Browser Dialog
OS-style browser for picking folders and files inside the app.
Docs: Configuration
Confirm Dialog
Generic yes/no prompt used across the app.
Docs: N/A — reusable primitive.
Image Compare Dialog
Side-by-side comparison for before/after image workflows.
Docs: Image Editor
Color Picker Modal
Rich color picker with harmony, swatches, gradients, and contrast check.
Docs: Workflow Editor → Color Picker
Text / Code Editor Modal
Expanded editor for long string properties with syntax highlight.
Docs: Workflow Editor
DataFrame Editor Modal
Inline spreadsheet-style editor for tabular properties.
Docs: Workflow Editor
Image Editor Modal (Node-level)
In-context image editor invoked from image properties and outputs.
Docs: Image Editor
Node README / Help
Documentation viewer for individual nodes and the “What’s this?” tooltips.
Docs: Node Reference
Mobile App Screens (iOS / Android / Web)
All mobile screens are documented in Mobile App.
Mobile Dashboard
Entry point showing connection status and quick actions.
Mobile Mini-Apps List
Browse mini-apps published by your server.
Mobile Mini-App Runner
Run an individual mini-app with touch-first controls.
Mobile Chat
Conversational AI with streaming, model picker, and threads.
Mobile Graph Editor
Touch-friendly read/write workflow editor.
Mobile Graph Editor — Empty State
Empty canvas prompting the first node.
Mobile Graph Editor — Node Picker
Node picker optimized for touch.
Mobile Graph Editor — Chain
Linear chain layout for small screens.
Mobile Settings
Configure the server URL, storage, and appearance.
Mobile Language Model Selection
Choose the default LLM for chat.
Mobile Dashboard (Tablet)
Expanded layout on tablet form factors.
Electron Windows and Menus
These are specific to the desktop app shipped via Electron.
Boot Message / Splash
Shown while the embedded Python and backend services start.
Docs: Electron Views
Install Wizard
First-run wizard for installing Python, Conda, and core AI runtimes.
Docs: Electron Views → Install Wizard
Package Manager Window
Manage installed node packs and optional runtimes.
Docs: Node Packs · Electron Views → Package Manager
Log Viewer Window
Tail of the backend log from inside the desktop app.
Docs: Electron Views → Log Viewer
Update Notification
In-app toast when a new desktop update is available.
Docs: Electron Views → Updates
Workflow Execution Window (frameless)
A floating, chromeless window for pinned workflow runs on macOS/Windows.
Docs: Electron Views → Pinned Windows
Mini App Window
Frameless runner for mini-apps launched from the tray.
Docs: Electron Views → Mini App Window
Chat Window (standalone)
Focused chat opened from the tray.
Docs: User Interface → Standalone Chat
System Tray Menu
Quick actions: open dashboard, open chat, launch a mini-app, quit.
Docs: Electron Views → Tray
Application Menu Bar
File / Edit / View menus for the desktop app.
Docs: Electron Views → Menu Bar
Auxiliary Views
Component Preview (/preview/:component?)
Isolated render of an individual UI component — used only in local development to capture clean screenshots.
Docs: Developer Guide
Node Test Page (/node-test)
Run every node’s contract test from the browser.
Docs: Developer Guide
How to Add a Screenshot
If you’re capturing a screenshot from this list:
- Launch NodeTool locally (
make devfor web + backend; Electron dev viamake electron-dev). - Navigate to the view and set up a clean example (no personal data, default theme).
- Capture at 1920×1080 minimum — use 2× resolution for retina displays.
- Save as PNG with a descriptive hyphenated name under
docs/assets/screenshots/. - Replace the placeholder reference on the view’s docs page and in
app-views.md.