Canvas Workspace

Canvas Workspace is Sink’s feature for managing and visualizing multiple Tasks. It lets you arrange multiple Task windows, sticky notes, and external content on a canvas with free-form layout and immersive work mode.

What is Canvas?

Canvas is a whiteboard-like multi-window workspace. You can:

• Display multiple Task details simultaneously
• Add text sticky notes for quick notes
• Embed external webpages and tools
• Freely drag and resize windows
• Use immersion mode to hide sidebar and focus on work
• All layout changes are automatically saved

Accessing Canvas

Click Canvas in the main menu, or visit directly: http://localhost:5000/canvas (adjust address and port based on your Gateway configuration).

Canvas Interface

Top Toolbar

Canvas provides the following tools at the top:

• Add Task Window — Select an existing Task and add it as a window
• Add Sticky Note — Create a text sticky note node
• Background Selector — Choose canvas background (grid, dots, or none)
• Immersion Mode Toggle — Hide sidebar to focus on Canvas
• Minimap — Lower-right corner shows bird’s-eye view of entire canvas

Canvas Area

The center is your workspace. Window nodes can be:

• Dragged — Hold the title bar and drag to move
• Resized — Drag from the resize handle at the bottom-right corner
• Zoomed and panned — Use mouse wheel to zoom, hold spacebar and drag to pan
• Layered — Windows can overlap; click a window to bring it forward

Common Operations

Add a Task Window

1. Click Add Task Window in the top toolbar
2. Select the Task you want to add from the dropdown
3. The Task detail window appears in the canvas center

You can add multiple windows of the same or different Tasks, each operating independently.

Create a Sticky Note

1. Click Add Sticky Note in the top toolbar
2. A blank sticky note node appears on the canvas
3. Click the note to enter edit mode and type text
4. Sticky notes support Markdown syntax

Sticky notes are useful for recording temporary notes, saving important information, or quick annotations.

Arrange and Organize Windows

Canvas window layout is completely under your control:

• Drag to move — Click the title bar and drag to a new position
• Resize — Drag the resize handle at the bottom-right corner to expand or shrink
• Free arrangement — Place windows according to your workflow

For example, you can:

• Place one Task on the left, another on the right for comparison
• Put the most important Task in the center, reference materials around it
• Group by project or priority

Work in Immersion Mode

Immersion mode hides the sidebar, giving you maximum canvas space.

To enable immersion mode:

1. Click Immersion Mode toggle in the top toolbar
2. The sidebar collapses, showing only floating control panels

In immersion mode, the floating panel provides:

• Workspace switching
• YOLO mode toggle
• Other necessary operation shortcuts

To exit:

• Click the immersion mode toggle again in the floating panel, or press Esc

Use the Minimap

The minimap in the lower-right corner shows a bird’s-eye view of the entire canvas:

• Visualizes all window node positions
• Helps navigation on large canvases
• Click anywhere on the minimap to quickly jump to that location

Change Background Style

Click Background Selector in the top toolbar to change the canvas background:

• Grid — Standard grid background, aids alignment
• Dots — Dot background, less distracting
• None — Solid color background, cleanest

The selection applies immediately and saves automatically.

Window Types

Canvas supports multiple types of window nodes:

Task Detail Window

Displays complete Task information, including:

• Task title and phase
• Chat messages and Agent output
• Team member information (if team Task)
• Tool call details
• Event log

Task detail windows are fully interactive—you can send messages to the Agent, approve permission requests, etc., directly in the window.

Text Sticky Note Window

Simple text editing window supporting Markdown. Use for:

• Recording ideas and notes
• Saving temporary information
• Marking important info

External Content Window

Canvas can embed external webpages and tools (enable by entering a URL in Canvas).

Saving and Restoring

All Canvas state saves automatically:

• Window position — Saves automatically when moved or resized
• Window size — Saves automatically
• Background choice — Saves automatically
• Sticky note content — Saves automatically

Next time you open Canvas, all layouts, sticky note content, and background settings restore.

Storage location: Layout data is stored in browser’s localStorage, isolated per workspace.

Keyboard Shortcuts

Canvas supports the following shortcuts:

Common Scenarios

Scenario 1: Compare Multiple Tasks

1. Add two Task windows, place side-by-side
2. View Task A output in the left window
3. View Task B output in the right window
4. Real-time comparison of two Agents’ work

Scenario 2: Main Task + Reference Materials

1. Add main Task window in center, enlarge it
2. Add subtasks or related references around it
3. Use sticky notes to record key information
4. Keep the main Task visible when working in immersion mode

Scenario 3: Team Collaboration

1. Add Task windows for each team member
2. Arrange by role or priority
3. Add sticky notes to track overall progress
4. Quickly review all members’ work status

Troubleshooting

Window Won’t Display Task Content

Symptom: Window appears blank or loading indefinitely

Solution:

1. Refresh the page to reload Canvas
2. Verify Task exists (check in Task list)
3. Check browser console for error messages

Layout Not Saved

Symptom: Window layout disappears after page refresh

Possible causes:

1. localStorage cleared (some browsers auto-clear it)
2. Browser in private browsing mode (some browsers don’t allow storage)

Solution:

• Use Canvas in normal browsing mode
• Ensure website can store local data

Can’t Exit Immersion Mode

Symptom: Immersion mode toggle doesn’t respond

Solution:

• Press Esc key to force exit
• Refresh page (reverts to normal mode)

Comparing Task Detail vs Canvas Window

Best Practices

1. Regularly save important notes — While sticky notes auto-save, backup important information periodically
2. Use different workspaces for different projects — Each workspace has independent Canvas layout for project isolation
3. Use immersion mode when needed — Enable for focused work, reduce distractions
4. Organize windows sensibly — Place related Tasks close together, important ones in center
5. Use sticky notes for labeling — Add title sticky notes to different Task areas for quick navigation

Next Steps

1. Manage Tasks — Learn how to create and manage Tasks
2. Quick Start Tutorial — Create your first Task and manage it in Canvas