TodoWrite panel for an already-approved in-app useAtlasChat UI. New AI features use integrate-fusion-agent. Triggers: TodoWrite, todo panel — only when useAtlasChat already exists.

Integrate Todo List Add a TodoWrite tool and panel so the in app Atlas agent can show task progress. Skip if the app uses the Atlas / EOS sidebar ( integrate fusion agent ). Prerequisite: useAtlasChat + src/atlas agent/ + @sinclair/typebox from integrate atlas chat . Step 1 — Read the app Before writing anything, read: package.json — confirm @tabler/icons react is installed; if not, install it with the app's package manager src/App.tsx — find where to add TodoProvider The file that calls useAtlasChat (likely src/chat/useChatViewModel.ts or src/App.tsx ) — this is where the tool gets wired The chat view component that renders messages — this is where TodoPanel and TodoToolResultCard go Step 2 — Create the src/todo/ module Find the skill directory by running find . path " /.agents/skills/integrate todo list/code" type d from the project root. Read each file from <skill dir /code/ and write it into src/todo/ with the same filename: File Purpose types.ts TodoItem and TodoList types TodoContext.tsx React context + TodoProvider useTodoList.ts Hook to read/write the todo list todoWriteTool.ts createTodoWriteTool factory — AtlasTool with full CDF task decomposition guidance useTodoWriteTool.ts Hook that memoizes the tool with current state access TodoPanel.tsx Card UI: progress bar + task rows TodoItemRow.tsx Single row with animated status icons TodoToolResultCard.tsx Compact summary card for tool call display All files use relative imports ( ./types , ./TodoContext , etc.) — no changes needed. Step 3 — Wrap the app in TodoProvider In src/App.tsx (or the root component), wrap the existing tree with <TodoProvider : Step 4 — Wire the tool into useAtlasChat In the file that calls useAtlasChat , add the following. Adjust import paths to match the app's conventions. Step 5 — Render TodoPanel in the chat view In the component that renders the chat input area, add <TodoPanel above the input field: TodoPanel returns null when the list is empty, so it's safe to always render it. Step 6 — Render TodoToolResultCard for tool call steps In the component that renders per message tool calls (typically a steps accordion or similar), branch on the tool name: Step 7 — Verify Run the app's type check command (typically pnpm tsc noEmit ) and confirm there are no errors. If the project has tests, run them to confirm nothing regressed. Done The agent can now use TodoWrite to create and track tasks. It will: Show a task panel as soon as it starts multi step work Update task status in real time ( pending → in progress → completed ) Clear the list automatically when all tasks are done Inject the current task list into each prompt via getAppContext so it knows where it left off

integrate-todo-list