How devoidsloth/ccanvas works
ccanvas is a desktop-first, browser-capable infinite canvas for arranging real terminals, Claude agents, and live viewers into interactive workspaces. The principal workflow is to create or reopen a folder-bound canvas, place widgets, run agents, optionally connect them with logic arrows, inspect their output in viewers, and save or export the workspace. The graph preserves documented capabilities, but some subsystem wiring is based on the README and tree rather than sampled implementation; uncertain links are omitted.
Main entry points: workspace.ts Workspace state · TerminalBody.tsx Terminal and agent · backend.ts Backend client · WidgetFrame.tsx Widget container
Components 29
Canvas workspace
- Application shell
src/App.tsx - Infinite canvas
src/canvas/Canvas.tsx - Workspace state
src/store/workspace.ts - Canvas controls
src/ui/Toolbar.tsx - Canvas search
src/ui/CanvasSearch.tsx
Agent operations
- Agent runtime
src/lib/agents.ts - Agent flow logic
src/lib/flow.ts - Terminal and agent
src/widgets/TerminalBody.tsx - Agent roster
src/ui/Roster.tsx - Tracking camera
src/ui/TrackingBar.tsx - Follow controller
src/ui/FollowController.tsx - Agent transcript
src/widgets/TranscriptBody.tsx
Content widgets
- Widget container
src/widgets/WidgetFrame.tsx - File and code viewers
src/widgets/FilesBody.tsx - Structured data viewer
src/widgets/DataBody.tsx - Data format parser
src/lib/dataformats.ts - Media viewer
src/widgets/VideoBody.tsx - GitHub widgets
src/widgets/PrBody.tsx
Workspace data
- Workspace persistence
src/lib/persistence.ts - Git checkpoints
src/lib/checkpoints.ts - Canvas export
src/lib/export.ts
Runtime integrations
- Backend client
src/lib/backend.ts - Web backend
server/pty-server.mjs - Desktop commands
src-tauri/src/lib.rs - Workspace files
- Shell and Claude CLI
- GitHub CLI
- Media tools
Other components
- User
Connections 38
- User → Application shell: uses
- Application shell → Infinite canvas: renders
- Application shell → Canvas controls: renders
- Application shell → Canvas search: renders
- Infinite canvas → Workspace state: reads and updates
- Canvas controls → Workspace state: updates
- Canvas search → Workspace state: searches and focuses
- Workspace state → Workspace persistence: loads and saves
- Workspace state → Backend client: saves workspace
- Infinite canvas → Widget container: displays widgets
- Widget container → Terminal and agent: hosts
- Widget container → File and code viewers: hosts
- Widget container → Structured data viewer: hosts
- Widget container → Media viewer: hosts
- Terminal and agent → Agent runtime: updates status
- Terminal and agent → Agent flow logic: cleans output
- Terminal and agent → Backend client: resolves paths
- Terminal and agent → Shell and Claude CLI: starts and writes
- Agent flow logic → Terminal and agent: coordinates agents
- Agent roster → Agent runtime: reads agent status
- Tracking camera → Agent transcript: tracks file activity
- Follow controller → Agent runtime: observes status
- Follow controller → Workspace state: moves camera
- Agent transcript → Workspace files: reads session transcript
- Structured data viewer → Data format parser: parses data
- File and code viewers → Backend client: reads files
- Media viewer → Backend client: requests media
- GitHub widgets → GitHub CLI: uses CLI
- Workspace state → Git checkpoints: manages snapshots
- Workspace state → Canvas export: exports canvas
- Backend client → Web backend: calls local backend
- Backend client → Desktop commands: invokes desktop commands
- Web backend → Workspace files: reads and writes
- Desktop commands → Workspace files: reads and writes
- Web backend → Shell and Claude CLI: spawns PTYs
- Desktop commands → Shell and Claude CLI: manages PTYs
- Web backend → Media tools: probes and transcodes
- Desktop commands → Media tools: starts media service