# ganbo-gab/open-storyboard-canvas architecture

> Architecture diagram of the GitHub repository ganbo-gab/open-storyboard-canvas, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/ganbo-gab/open-storyboard-canvas
- Repository: https://github.com/ganbo-gab/open-storyboard-canvas

## Overview

Open Storyboard Canvas is a local desktop node-canvas for AI image, video, storyboard, panorama, and director-studio work. The principal workflow is to create or open a project, arrange reference and generation nodes, submit work to a selected provider, track and materialize results, then continue editing or exporting them. Separate branches cover canvas-agent assistance, external agents, settings and portability, and director motion/video export. Edges reflect README capabilities and the sampled caller relationships; several feature internals are documented but not sampled, so uncertain wiring is omitted.

Main entry points: [`src/features/canvas/Canvas.tsx`](https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/features/canvas/Canvas.tsx) (Canvas and nodes), [`src/stores/canvasStore.ts`](https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/stores/canvasStore.ts) (Canvas state), [`src/App.tsx`](https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/App.tsx) (App shell), [`src/features/canvas/hooks/useCanvasGenerationPolling.ts`](https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/features/canvas/hooks/useCanvasGenerationPolling.ts) (Job tracking)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Desktop app"]
  node_app["App shell<br/>[App.tsx]"]
  node_native["Tauri runtime<br/>[lib.rs]"]
end

subgraph group_canvas["Canvas workflow"]
  node_workspace["Canvas workspace"]
  node_canvas_view["Canvas and nodes<br/>[Canvas.tsx]"]
  node_canvas_state[("Canvas state<br/>[canvasStore.ts]")]
  node_canvas_ops["Canvas operations"]
  node_generation["Generation workflow"]
  node_polling["Job tracking"]
  node_ai_gateway["AI provider gateway<br/>[tauriAiGateway.ts]"]
  node_rust_ai["Provider adapters<br/>[mod.rs]"]
  node_image_tools["Image and video tools"]
  node_director["Director studio"]
  node_motion["Motion and export"]
end

subgraph group_agents["Canvas agents"]
  node_agent_ui["Canvas agent UI"]
  node_agent_controller["Agent controller"]
  node_agent_sessions[("Agent sessions")]
  node_external_agent["External agent runtime"]
  node_external_commands["External agent commands<br/>[mod.rs]"]
end

subgraph group_project["Project support"]
  node_project_home["Project home<br/>[ProjectHome.tsx]"]
  node_project_manager["Project manager<br/>[ProjectManager.tsx]"]
  node_project_store[("Project storage<br/>[projectStore.ts]")]
  node_settings["Settings and providers<br/>[SettingsDialog.tsx]"]
  node_portability["Import and export"]
end

node_user(("Creator"))
node_provider_services(("AI services"))
node_external_agents(("External agents"))
node_filesystem[("Local project files")]

node_user -->|"opens"| node_app
node_app -->|"shows"| node_project_home
node_app -->|"opens"| node_workspace
node_project_home -->|"manages projects"| node_project_manager
node_project_manager -->|"reads and updates"| node_project_store
node_workspace -->|"renders"| node_canvas_view
node_canvas_view -->|"reads and updates"| node_canvas_state
node_canvas_view -->|"dispatches edits"| node_canvas_ops
node_canvas_ops -->|"updates"| node_canvas_state
node_canvas_view -->|"submits generation"| node_generation
node_generation -->|"requests generation"| node_ai_gateway
node_ai_gateway -->|"invokes commands"| node_native
node_native -->|"dispatches provider calls"| node_rust_ai
node_rust_ai -->|"sends requests"| node_provider_services
node_canvas_view -->|"tracks jobs"| node_polling
node_polling -->|"queries results"| node_ai_gateway
node_polling -->|"updates results"| node_canvas_state
node_canvas_view -->|"edits media"| node_image_tools
node_canvas_view -->|"opens studio"| node_director
node_director -->|"edits motion"| node_motion
node_motion -->|"adds export"| node_canvas_state
node_canvas_view -->|"opens agent"| node_agent_ui
node_agent_ui -->|"runs turns"| node_agent_controller
node_agent_controller -->|"persists sessions"| node_agent_sessions
node_agent_controller -->|"reads canvas context"| node_canvas_state
node_agent_ui -.->|"starts external run"| node_external_agent
node_external_agent -.->|"invokes commands"| node_external_commands
node_external_commands -.->|"connects"| node_external_agents
node_settings -->|"configures runtime"| node_native
node_settings -->|"backs up settings"| node_portability
node_portability -->|"imports and exports"| node_filesystem
node_project_store -->|"persists projects"| node_filesystem

click node_app "https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/App.tsx"
click node_workspace "https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/features/canvas/CanvasWorkspace.tsx"
click node_canvas_view "https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/features/canvas/Canvas.tsx"
click node_canvas_state "https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/stores/canvasStore.ts"
click node_canvas_ops "https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/features/canvas/application/canvasCommandService.ts"
click node_generation "https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/features/canvas/application/canvasGenerationFacade.ts"
click node_polling "https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/features/canvas/hooks/useCanvasGenerationPolling.ts"
click node_ai_gateway "https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/features/canvas/infrastructure/tauriAiGateway.ts"
click node_rust_ai "https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src-tauri/src/ai/providers/mod.rs"
click node_image_tools "https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/features/canvas/ui/MultiFunctionPanel.tsx"
click node_director "https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/features/canvas/ui/DirectorStudioShell.tsx"
click node_motion "https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/features/canvas/ui/useDirectorStudioMotion.ts"
click node_agent_ui "https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/features/canvas/agent/ui/CanvasAgentDock.tsx"
click node_agent_controller "https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/features/canvas/agent/application/canvasAgentController.ts"
click node_agent_sessions "https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/features/canvas/agent/infrastructure/agentSessionRepository.ts"
click node_external_agent "https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/features/canvas/agent/ui/useExternalAgentRuntime.ts"
click node_external_commands "https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src-tauri/src/commands/external_agent/mod.rs"
click node_project_home "https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/features/project/ProjectHome.tsx"
click node_project_manager "https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/features/project/ProjectManager.tsx"
click node_project_store "https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/stores/projectStore.ts"
click node_settings "https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/components/SettingsDialog.tsx"
click node_portability "https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/features/portability/application/settingsPortability.ts"
click node_native "https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src-tauri/src/lib.rs"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_native toneBlue
class node_workspace,node_canvas_view,node_canvas_state,node_canvas_ops,node_generation,node_polling,node_ai_gateway,node_rust_ai,node_image_tools,node_director,node_motion,node_filesystem toneAmber
class node_agent_ui,node_agent_controller,node_agent_sessions,node_external_agent,node_external_commands toneMint
class node_project_home,node_project_manager,node_project_store,node_settings,node_portability toneRose
class node_user,node_provider_services,node_external_agents toneIndigo
```

## Components

### Desktop app

- [App shell](https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/App.tsx): `src/App.tsx`
- [Tauri runtime](https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src-tauri/src/lib.rs): `src-tauri/src/lib.rs`

### Canvas workflow

- [Canvas workspace](https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/features/canvas/CanvasWorkspace.tsx): `src/features/canvas/CanvasWorkspace.tsx`
- [Canvas and nodes](https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/features/canvas/Canvas.tsx): `src/features/canvas/Canvas.tsx`
- [Canvas state](https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/stores/canvasStore.ts): `src/stores/canvasStore.ts`
- [Canvas operations](https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/features/canvas/application/canvasCommandService.ts): `src/features/canvas/application/canvasCommandService.ts`
- [Generation workflow](https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/features/canvas/application/canvasGenerationFacade.ts): `src/features/canvas/application/canvasGenerationFacade.ts`
- [Job tracking](https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/features/canvas/hooks/useCanvasGenerationPolling.ts): `src/features/canvas/hooks/useCanvasGenerationPolling.ts`
- [AI provider gateway](https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/features/canvas/infrastructure/tauriAiGateway.ts): `src/features/canvas/infrastructure/tauriAiGateway.ts`
- [Provider adapters](https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src-tauri/src/ai/providers/mod.rs): `src-tauri/src/ai/providers/mod.rs`
- [Image and video tools](https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/features/canvas/ui/MultiFunctionPanel.tsx): `src/features/canvas/ui/MultiFunctionPanel.tsx`
- [Director studio](https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/features/canvas/ui/DirectorStudioShell.tsx): `src/features/canvas/ui/DirectorStudioShell.tsx`
- [Motion and export](https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/features/canvas/ui/useDirectorStudioMotion.ts): `src/features/canvas/ui/useDirectorStudioMotion.ts`

### Canvas agents

- [Canvas agent UI](https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/features/canvas/agent/ui/CanvasAgentDock.tsx): `src/features/canvas/agent/ui/CanvasAgentDock.tsx`
- [Agent controller](https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/features/canvas/agent/application/canvasAgentController.ts): `src/features/canvas/agent/application/canvasAgentController.ts`
- [Agent sessions](https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/features/canvas/agent/infrastructure/agentSessionRepository.ts): `src/features/canvas/agent/infrastructure/agentSessionRepository.ts`
- [External agent runtime](https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/features/canvas/agent/ui/useExternalAgentRuntime.ts): `src/features/canvas/agent/ui/useExternalAgentRuntime.ts`
- [External agent commands](https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src-tauri/src/commands/external_agent/mod.rs): `src-tauri/src/commands/external_agent/mod.rs`

### Project support

- [Project home](https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/features/project/ProjectHome.tsx): `src/features/project/ProjectHome.tsx`
- [Project manager](https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/features/project/ProjectManager.tsx): `src/features/project/ProjectManager.tsx`
- [Project storage](https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/stores/projectStore.ts): `src/stores/projectStore.ts`
- [Settings and providers](https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/components/SettingsDialog.tsx): `src/components/SettingsDialog.tsx`
- [Import and export](https://github.com/ganbo-gab/open-storyboard-canvas/blob/main/src/features/portability/application/settingsPortability.ts): `src/features/portability/application/settingsPortability.ts`

### Other components

- **Creator**
- **AI services**
- **External agents**
- **Local project files**

## Connections

- Creator → App shell: opens
- App shell → Project home: shows
- App shell → Canvas workspace: opens
- Project home → Project manager: manages projects
- Project manager → Project storage: reads and updates
- Canvas workspace → Canvas and nodes: renders
- Canvas and nodes → Canvas state: reads and updates
- Canvas and nodes → Canvas operations: dispatches edits
- Canvas operations → Canvas state: updates
- Canvas and nodes → Generation workflow: submits generation
- Generation workflow → AI provider gateway: requests generation
- AI provider gateway → Tauri runtime: invokes commands
- Tauri runtime → Provider adapters: dispatches provider calls
- Provider adapters → AI services: sends requests
- Canvas and nodes → Job tracking: tracks jobs
- Job tracking → AI provider gateway: queries results
- Job tracking → Canvas state: updates results
- Canvas and nodes → Image and video tools: edits media
- Canvas and nodes → Director studio: opens studio
- Director studio → Motion and export: edits motion
- Motion and export → Canvas state: adds export
- Canvas and nodes → Canvas agent UI: opens agent
- Canvas agent UI → Agent controller: runs turns
- Agent controller → Agent sessions: persists sessions
- Agent controller → Canvas state: reads canvas context
- Canvas agent UI → External agent runtime: starts external run
- External agent runtime → External agent commands: invokes commands
- External agent commands → External agents: connects
- Settings and providers → Tauri runtime: configures runtime
- Settings and providers → Import and export: backs up settings
- Import and export → Local project files: imports and exports
- Project storage → Local project files: persists projects