Canvas View

The infinite canvas

On desktop, your conversation tree is displayed on an infinite canvas powered by React Flow. Each conversation is a node, and branches are connected by curved edges.

You can pan the canvas by clicking and dragging on empty space. Use the scroll wheel to zoom in and out. Scrolling over a node scrolls the message list inside it instead of zooming.

Active path

Click any node to make it the active conversation. The active path — the chain from root to the clicked node — highlights at full opacity. All other nodes dim to 35% opacity, making it easy to focus on a specific branch.

Node layout

Nodes are positioned automatically in a horizontal tree layout. The root is on the left, and branches extend to the right. Sibling branches stack vertically. Each node shows the conversation title, context breadcrumb (for branches), message list, and input field.

Edge colors

The connecting edges between nodes use a grayscale color palette based on depth — darker at the root, lighter as you go deeper. This provides a subtle visual cue for how deep you are in the tree.

Canvas state persistence

Your canvas state (which nodes are expanded and their connections) is saved to localStorage per root conversation. When you reopen a conversation, it restores your previous view.