Introduce a new project mode named `canvas` alongside the existing `normal` mode in `yaoaivideo`.
-`normal` mode keeps the current step-based project flow unchanged.
-`canvas` mode opens a new project-level workbench centered on a visual canvas.
- The canvas workbench is the main operating surface for canvas projects, but it reuses the existing domain objects for projects, episodes, characters, scenes, storyboards, video tasks, and assembly tasks.
- Canvas-specific data such as node layout, grouping, links, viewport, and action history is stored separately.
This design intentionally avoids project-mode switching in v1. A project chooses its mode at creation time and keeps it permanently.
## Goals
- Add a second creation path for projects: `normal` or `canvas`.
- Provide a new project-level workbench page for canvas projects.
- Visualize script, episodes, characters, scenes, storyboards, video tasks, and assembly tasks on a single canvas.
- Allow users to control generation actions from the canvas.
- Allow users to organize and edit the canvas using drag, selection, grouping, linking, and batch operations.
- Reuse the existing backend pipeline and API capabilities wherever possible.
- Keep the current normal-mode experience stable and isolated from the new workbench.
## Non-Goals
- No switching between `normal` and `canvas` after project creation.
- No attempt to make the canvas the sole source of truth for all business data in v1.
- No direct copy-paste migration of the Tapnow monolithic `src/App.jsx` architecture.
- No iframe or separately deployed micro-frontend workbench.
- No full free-form workflow engine in v1.
## Product Decisions
### Project Mode
Add a project mode field with at least the following values:
-`normal`
-`canvas`
Behavior:
- New projects default to `normal` unless the user actively chooses `canvas`.
- A `normal` project continues to use the current page sequence.
- A `canvas` project opens into a new workbench route and uses a canvas-first workflow.
- Mode is immutable after creation.
### User Experience Strategy
For `canvas` projects:
- The new workbench becomes the primary entry point.
- Existing detail pages can remain available as support pages for editing or fallback operations.
- The top project navigation changes to expose `工作台` instead of forcing users through the current step-by-step flow.
For `normal` projects:
- No behavior change.
- Existing routes, tabs, and project detail flow remain intact.
## Existing System Fit
This design is aligned with the current `yaoaivideo` structure:
- Frontend routing already supports project-scoped pages in `doc/html/src/app/routes.tsx`.
- Project top tabs already exist in `doc/html/src/app/components/Layout.tsx`.
- New project creation already flows through `doc/html/src/app/pages/NewProject.tsx`.
- Frontend data hooks and APIs already exist for projects and AI flows, including:
-`doc/html/src/lib/api/projects.ts`
-`doc/html/src/lib/api/ai.ts`
-`doc/html/src/hooks/useProjects.ts`
-`doc/html/src/hooks/useAi.ts`
- Backend domain and controller structure already supports projects, storyboards, video tasks, and agent runs.
This makes the workbench a host-integrated feature rather than a separate product.
## Architecture Overview
The recommended architecture has four layers.
### 1. Domain Truth Layer
Keep existing domain tables and services as the source of truth for:
- projects
- outlines
- episodes
- characters
- scenes
- storyboards
- video tasks
- assembly tasks
The canvas will not replace these tables in v1.
### 2. Canvas Orchestration Layer
Introduce a separate workbench data model to store:
- nodes
- edges
- viewport
- groups
- layout
- per-node display state
- canvas action history
- snapshots
This layer references existing business objects instead of duplicating them.
### 3. Workbench Control Layer
Add a dedicated backend module surface for canvas-oriented actions such as:
- bootstrap workbench from project data
- save canvas layout
- trigger extraction and generation actions from nodes
- expose aggregated workbench state
- record action history
This layer should internally call existing services and pipelines whenever possible.
### 4. Frontend Workbench Layer
Build a new modular workbench frontend inside the current `doc/html` app:
- page shell
- canvas renderer
- inspector
- library panel
- action toolbar
- bottom task panel
- workbench store
- workbench API layer
## Data Model Design
### Extend Existing Project Data
Add `projectMode` to project-level data.
Backend changes:
-`projects` table: add `project_mode`
-`Project` entity: add `projectMode`
-`ProjectCreateRequest`: accept `projectMode`
-`ProjectDTO`: expose `projectMode`
- project create/update service: validate and persist it
Recommended values:
-`normal`
-`canvas`
Default:
-`normal`
### New Workbench Tables
Recommended new tables:
#### `project_workbenches`
Purpose:
- One primary workbench record per project.
- Stores global canvas state.
Suggested fields:
-`id`
-`project_id`
-`tenant_id`
-`version`
-`viewport_x`
-`viewport_y`
-`zoom`
-`layout_mode`
-`created_at`
-`updated_at`
Constraints:
- unique key on `project_id`
#### `project_workbench_nodes`
Purpose:
- Stores canvas nodes.
Suggested fields:
-`id`
-`workbench_id`
-`project_id`
-`tenant_id`
-`node_type`
-`ref_type`
-`ref_id`
-`title`
-`status`
-`x`
-`y`
-`width`
-`height`
-`config_json`
-`meta_json`
-`sort_order`
-`created_at`
-`updated_at`
Notes:
-`ref_type` + `ref_id` ties nodes to existing business objects.
-`config_json` stores node-local UI and action parameters.
-`meta_json` stores display and temporary state that should still persist.
#### `project_workbench_edges`
Purpose:
- Stores links between nodes.
Suggested fields:
-`id`
-`workbench_id`
-`project_id`
-`tenant_id`
-`source_node_id`
-`target_node_id`
-`edge_type`
-`label`
-`config_json`
-`created_at`
-`updated_at`
#### `project_workbench_snapshots`
Purpose:
- Save restore points for the workbench.
Suggested fields:
-`id`
-`workbench_id`
-`project_id`
-`version`
-`snapshot_json`
-`created_by`
-`created_at`
#### `project_workbench_actions`
Purpose:
- Records explicit canvas-triggered actions.
Suggested fields:
-`id`
-`project_id`
-`workbench_id`
-`node_id`
-`action_type`
-`status`
-`request_json`
-`result_json`
-`error_message`
-`created_at`
-`updated_at`
### Relationship Model
Canvas nodes should not duplicate full business records.
