Canvas

The canvas is the centerpiece of Alumia. It's built on React Flow and renders agents, sessions, and outputs as connected nodes you can drag, group, inspect, and share.

What lives on the canvas

• Agent nodes — running conversations. Each peer agent session has its own node with live activity emitters.
• Block nodes — typed outputs. Three creation paths plus 13 show primitives, all detailed in Blocks.
• Connection edges — explicit links between agents and blocks for context handoff.
• Workboards — grouped sets of normal canvas blocks that belong together: a dashboard, research map, decision brief, execution plan, draft studio, review room, or any other multi-block work surface.

Agent activity streams in real time. When an agent starts, its node lights up. When it calls a tool, the call appears as a chip. When it emits a block, the block appears connected to the agent.

Workboards

A workboard is not a renamed project, a new route, or a new block type. It is a durable group of ordinary canvas blocks created as one coherent layout. The group lives in each block's saved canvas position as groupId, groupLabel, and groupKind, so the canvas can show a compact Workboard badge and agents can find the whole set later.

Agents create new workboards with compose_canvas. They choose a general-purpose preset when one fits the job — for example executive overview, triage queue, research map, decision brief, execution plan, monitor room, draft studio, debug console, build spec, or review room — then fill it with typed data blocks and the occasional show primitive. Existing workboards are updated with recompose_canvas so stale blocks are replaced as one group instead of drifting into duplicates.

After creating or recomposing a workboard, the agent inspects the result with canvas_inspect and asks for canvas_screenshot when layout or clipping matters. If validation fails, it repairs one block with update_block or repairs the whole group with recompose_canvas.

Moving and arranging blocks

Blocks feel like Figma or Linear:

• Drag from anywhere. Click and drag any block to reposition — no title-bar grab handle needed. When a block is selected, its content becomes interactive (text selection, scrolling, button clicks) so click-into-content doesn't fight drag.
• Smart alignment guides. As you drag a block near another, pink guide lines + distance pills snap to its edges and centers. Hold Alt while dragging to temporarily show or hide guides.
• Snap-to-grid (optional). Toggle from the canvas toolbar; positions round to the 24 px dot grid. Alt temporarily disables snap.
• Pin focused view. Right-click → "Pin focused view" zooms to one block and persists across refreshes. Right-click again → "Show full canvas" to return.
• Auto-fit blocks. Single-image, single-video, and single-audio blocks lock their height to the media's natural aspect ratio. Audio playlists, audio tracks, and video playlists fit to their content height — no manual resize needed. Other blocks resize freely from any edge.

The minimap, dots, and theme

• Minimap (bottom-left) — pannable and zoomable. Themed to match the canvas in both light and dark mode; the viewport rectangle is outlined so you can see where you are at a glance.
• Dotted grid background uses theme tokens at 24 px gap so snap-to-grid and the visual grid line up perfectly.

Block context menu

Right-click any block to open:

• Rename (opens a proper dialog, not a browser prompt)
• Hide title / Show title — the title strip floats above the bordered block; toggle persists per block
• Add as context — sends the block's content into the chat as context for the next prompt
• Copy content, Export (PNG / PDF / JSON / Markdown)
• Zoom to fit, Pin focused view / Show full canvas
• Bring to front / Send to back
• Delete

When an agent is working on a block, its avatar appears in the title row at top-right.

Image, video, and audio blocks

These render edge-to-edge with no border or padding — the media is the block. A subtle prompt overlay (2-line clamped) sits at the bottom of generated images. Hover the top-right "Open in full screen" button to launch a portal lightbox with a side panel showing the full prompt. The audio player is a clean pill with play/pause, scrubbable progress, and elapsed/total time.

Tables on the canvas

The data_block table renderer ships with:

• Sticky header with a 1 px divider — stays visible while you scroll long rows
• Drag-to-reorder columns — grab any column header (the entire head is the handle, 6 px activation distance so a quick click still sorts)
• Smooth column resize — hover the right edge of a column header for a col-resize strip; drag to set a width, persists across refreshes
• Sort, filter — built in; the filter input appears automatically when there are six or more rows

Threads and message blocks

Twitter / X / LinkedIn / Bluesky / Threads thread layouts render with a continuous left connector line that runs from one avatar to the next — no broken segments between posts. Slack-style message threads have proper internal padding and a hover-row treatment. Initials avatars accept bg and color hex on the spec so the AI can paint themed circles, and an explicit initials field lets it override the auto-derived two-letter fallback.

Emoji shortcodes

Slack / GitHub / Discord-style shortcodes (:white_check_mark:, :tada:, :rocket:, :fire:, :eyes:, :100:, :warning:, ~150 in total) render as actual emoji in every markdown surface — chat, document blocks, thread bodies, social post bodies. No flag, just works.

Sharing

Any canvas can be shared via a tokenized link (/share/project/[token] for the full project, /share/artifact/[token] for one artifact). Shared pages get:

• Dynamic Open Graph cards — pasting the link on Twitter, WhatsApp, LinkedIn, or Slack shows the project's name + agent avatar, not a generic logo
• noindex,nofollow so shared links don't leak into search
• Read-only mode — the share viewer hides the snap/guides toolbar and resize handles; viewers can pan, zoom, and inspect, not edit

Deleted blocks move to a bottom-sheet trash before permanent removal. Share landing copy is localized via messages/*/share.json — see Share a canvas.

You can spawn agents on the fly with the spawn_agent tool from any other agent; the new agent appears on the canvas with its own session and activity stream.

Project file scope

Canvas media references resolve within the current project's protected file folder. Agents cannot attach unrelated org files to a project canvas — use project-scoped uploads and image_save so fileId references stay valid.