Convert Todos into the standard project right-content navigation surface. - Route Todos through taskView state instead of modal manager state. - Remove TodoModal wiring, styles, and tests while updating header, sidebar, mobile nav, and history coverage. - Polish TodoView as a standalone content page with refreshed header and layout styling. - Update dashboard and todo documentation for the full-view behavior. Files changed: docs/dashboard-guide.md | 5 +- docs/todo-view.md | 5 +- packages/dashboard/app/App.tsx | 30 ++--- .../app/__tests__/lazy-loaded-views-docs.test.ts | 10 +- packages/dashboard/app/components/AppModals.tsx | 16 --- packages/dashboard/app/components/Header.tsx | 12 +- .../dashboard/app/components/LeftSidebarNav.tsx | 8 +- packages/dashboard/app/components/MobileNavBar.tsx | 8 +- packages/dashboard/app/components/TodoModal.css | 76 ------------ packages/dashboard/app/components/TodoModal.tsx | 79 ------------ packages/dashboard/app/components/TodoView.css | 55 ++++++--- packages/dashboard/app/components/TodoView.tsx | 24 ++-- .../app/components/__tests__/AppModals.test.tsx | 56 --------- .../app/components/__tests__/Header.test.tsx | 26 ++-- .../components/__tests__/LeftSidebarNav.test.tsx | 7 +- .../app/components/__tests__/MobileNavBar.test.tsx | 22 +++- .../app/components/__tests__/TodoModal.test.tsx | 136 --------------------- .../__tests__/TodoView.mobile-css.test.ts | 7 -- .../app/components/__tests__/TodoView.test.tsx | 11 +- ...-merge-toggle-blank.mobile-integration.test.tsx | 1 - .../__tests__/navigation-history.test.tsx | 29 ++++- .../dashboard/app/hooks/useMobileScrollLock.ts | 2 +- packages/dashboard/app/hooks/useModalManager.ts | 10 -- packages/dashboard/app/hooks/useViewState.ts | 7 +- 24 files changed, 161 insertions(+), 481 deletions(-) Fusion-Task-Id: FN-6829 Fusion-Task-Lineage: b4034bf2-b8e2-47ec-be7c-11c320d2fc44
4.2 KiB
Todo View
Todo View is an experimental full-height dashboard surface for personal/project todo lists that can feed directly into Fusion planning and task workflows. It renders in the project right-content area like other views rather than opening a modal overlay.
Overview
Todo View lets you:
- Create multiple todo lists per project
- Add, edit, complete, delete, and reorder todo items
- Start Planning Mode from any todo item (💡)
- Create a triage task from a todo item
- Create and immediately assign a task to an agent from a todo item
The feature is implemented in TodoView.tsx with data/state orchestration in useTodoLists.ts and backend routes in packages/dashboard/src/todo-routes.ts.
Enablement (experimentalFeatures.todoView)
Todo View is hidden unless the global experimental flag is enabled:
{
"experimentalFeatures": {
"todoView": true
}
}
Behavior when disabled:
- Todo navigation entry is hidden from dashboard navigation menus
- If a user is currently on Todo View and the flag is turned off, the app redirects back to board view
Accessing Todo View
When enabled:
- Desktop/tablet with Left Sidebar Navigation enabled: left sidebar → Todos
- Desktop/tablet without the left sidebar: header overflow menu (More views) → Todos
- Mobile: More sheet in the mobile nav bar → Todos
List management
In the left sidebar:
- Create list: plus button or empty-state action
- Rename list: pencil action
- Delete list: trash action (with confirm dialog)
- Select active list: clicking a list switches the main panel
Validation/API constraints:
titleis requiredtitleis trimmedtitlemax length is 200 characters
Item management
Within the selected list:
- Add item using input + Add button (or Enter)
- Edit item text inline
- Toggle completion via checkbox
- Move up/down to reorder items
- Delete item via trash action
Validation/API constraints:
textis requiredtextis trimmedtextmax length is 2000 characters- Completion toggling uses
PATCH /api/todos/items/:idwithcompleted: boolean(no separate toggle endpoint)
Planning integration
Each item has a planning action (💡):
- Opens Planning Mode with todo text as the initial plan
- Starts a planning interview flow
- Does not create a task until you complete planning and explicitly create one
See also: Task Management → Todo item → Plan Mode.
Task creation and agent delegation actions
Each item also has task actions:
- Create task (
+): creates a new task intriagewith todo text as description - Assign to agent (bot icon): loads agents, then creates a new task in
triagewithassignedAgentId
Both actions use dashboard task creation APIs and preserve project scoping when a project is selected.
API reference (current implementation)
Base prefix: /api/todos
Lists
GET /api/todos— list lists with embedded itemsPOST /api/todos— create list ({ title })PATCH /api/todos/:id— update list title ({ title })DELETE /api/todos/:id— delete list
Items
POST /api/todos/:id/items— create item in list ({ text })PATCH /api/todos/items/:id— update item ({ text?; completed? })DELETE /api/todos/items/:id— delete itemPOST /api/todos/:id/items/reorder— reorder full list ({ itemIds: string[] })
Project scoping
projectId may be provided:
- Query parameter (for reads and route calls that include query string)
- Request body (supported by route resolver for mutating calls)
When omitted, Todo APIs operate against the default/local project scope ("" project ID in TodoStore).
Storage linkage
Todo data is persisted in the project SQLite database (.fusion/fusion.db) via:
todo_liststodo_items
See Storage for the broader database/storage model.
Related source-of-truth files
packages/dashboard/app/components/TodoView.tsxpackages/dashboard/app/hooks/useTodoLists.tspackages/dashboard/src/todo-routes.tspackages/core/src/todo-store.tspackages/dashboard/src/__tests__/todo-routes.test.tspackages/dashboard/app/components/__tests__/TodoView.test.tsx