Whiteboard

The Whiteboard is an interactive visual canvas for mapping your project architecture. It gives you a bird's-eye view of your codebase — components, logic layers, and infrastructure — laid out as navigable nodes you can explore, annotate, and reorganize.

Opening the Whiteboard

Architecture Layers

When the Whiteboard loads your project, it classifies nodes into three layers automatically:

+----------------------------------------------------------+
|  UI COMPONENTS                                           |
|    [Button]  [Modal]  [Sidebar]  [ChatInput]             |
+----------------------------------------------------------+
|  BUSINESS LOGIC                                          |
|    [useSession]  [AgentStore]  [TokenTracker]            |
+----------------------------------------------------------+
|  INFRASTRUCTURE                                          |
|    [Tauri Commands]  [Supabase]  [FileSystem]            |
+----------------------------------------------------------+

Interacting with Nodes

Click a node to open its detail popover. The popover shows:

• File path and type
• Short description (from Feature docs if linked)
• Outbound connections to other nodes
• Quick link to open in the Code Editor

Drag any node to reposition it on the canvas. Your layout is saved automatically.

Toolbar Modes

Select the active tool from the toolbar at the top of the canvas:

Multi-Select

You have two ways to select multiple nodes at once:

• Lasso drag: Switch to Lasso mode (L) and draw a rectangle around the nodes you want
• Shift+click: Hold Shift and click individual nodes to add them to the selection

Once multiple nodes are selected, drag any one of them to move the entire group together.

Annotations

Use annotations to add context directly on the canvas:

• Post-it notes: Free-form text labels. Double-click to edit. Color-code them for priority or category.
• Group rectangles: Draw a named boundary around related nodes — useful for marking feature ownership or domain boundaries.
• Images: Drop screenshots, diagrams, or design mocks alongside your code nodes.

Undo and Redo

Every node move, annotation, and layout change is tracked in the undo history.

Minimap

A minimap sits in the bottom-right corner of the canvas. Use it to:

• See the full extent of your architecture at a glance
• Click or drag on the minimap to jump to any area quickly

This is especially useful for large projects where the canvas extends beyond the visible area.

Nested Components

You can group nodes into a single collapsible container, creating a hierarchical view of your architecture.

Creating a nested component:

1. Select a group of related nodes using Lasso or Shift+click
2. Right-click the selection and choose Group into Component
3. The selected nodes collapse into a single named node on the canvas

Navigating inside:

• Double-click a nested component to enter it and see its contents
• A breadcrumb trail appears at the top of the canvas showing your current depth
• Click any breadcrumb to navigate back up

Project Root > AuthModule > TokenValidator

Agent Interaction

Your AI agent can interact with the Whiteboard directly using the /whiteboard skill:

/whiteboard show all components related to authentication

/whiteboard explain the data flow between AgentStore and ChatInput

The agent can surface insights, suggest groupings, and update Feature docs linked to canvas nodes.

Mentioning Features in Chat

Nodes on the Whiteboard correspond to Features in your project. You can bring them into a conversation:

• Drag a node to the chat input to attach it as context
• Type @ in chat to open the mention autocomplete, then search by feature name

This lets your agent reason about a specific part of the architecture without you having to describe it manually.

Previous: Kanban Board

Next: Code Editor