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.

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.

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 suppress 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

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.