From ab257d7e9f1030394990843fd75a63eb063f3de5 Mon Sep 17 00:00:00 2001 From: shrimbly Date: Tue, 27 Jan 2026 10:11:31 +1300 Subject: [PATCH] docs(32): create phase plan for chat workflow integration Phase 32: Chat UI Foundation - 1 plan created (32-02) - 3 tasks defined - Ready for execution --- .../32-chat-ui-foundation/32-02-PLAN.md | 168 ++++++++++++++++++ 1 file changed, 168 insertions(+) create mode 100644 .planning/phases/32-chat-ui-foundation/32-02-PLAN.md diff --git a/.planning/phases/32-chat-ui-foundation/32-02-PLAN.md b/.planning/phases/32-chat-ui-foundation/32-02-PLAN.md new file mode 100644 index 00000000..63e1bef4 --- /dev/null +++ b/.planning/phases/32-chat-ui-foundation/32-02-PLAN.md @@ -0,0 +1,168 @@ +--- +phase: 32-chat-ui-foundation +plan: 02 +type: execute +--- + + +Connect chat conversation to workflow generation, enabling users to build workflows from chat discussions. + +Purpose: Complete the chat-to-workflow flow where users can discuss workflow ideas with the assistant, see a proposal, and generate the workflow with one click. +Output: ChatPanel with "Build Workflow" button, proposal display in chat, and workflow loading integration. + + + +~/.claude/get-shit-done/workflows/execute-phase.md +./summary.md + + + +@.planning/PROJECT.md +@.planning/ROADMAP.md +@.planning/STATE.md +@.planning/phases/32-chat-ui-foundation/32-01-SUMMARY.md +@.planning/phases/31-workflow-proposal-system/31-01-SUMMARY.md +@.planning/phases/31-workflow-proposal-system/31-02-SUMMARY.md + +# Key files from Phase 31 and 32-01: +@src/components/ChatPanel.tsx +@src/app/api/chat/route.ts +@src/types/quickstart.ts +@src/app/api/quickstart/propose/route.ts +@src/app/api/quickstart/route.ts + +# Store for workflow loading: +@src/store/workflowStore.ts + +**Tech stack available:** ai@6.0.49, @ai-sdk/google@3.0.13, @ai-sdk/react +**Established patterns:** +- useChat hook with DefaultChatTransport +- WorkflowProposal types for reviewable structure +- /api/quickstart/propose for proposal generation +- /api/quickstart for workflow JSON generation +- loadWorkflow() to load WorkflowFile into store + +**Constraining decisions:** +- Phase 31: Proposal types focus on purpose/description, not internal state +- Phase 32-01: Manage input state locally (AI SDK v6) +- Phase 32-01: Use toUIMessageStreamResponse() for useChat compatibility + + + + + + Task 1: Add "Build Workflow" button and proposal state to ChatPanel + src/components/ChatPanel.tsx + +Extend ChatPanel to support workflow building: + +1. Add props for workflow building: + - onBuildWorkflow: (description: string) => Promise - callback to parent + +2. Add internal state: + - buildingWorkflow: boolean - loading state for the build button + +3. Add "Build Workflow" button below the input area: + - Only visible when there are assistant messages (conversation has started) + - Disabled while buildingWorkflow is true + - On click: extract conversation context and call onBuildWorkflow prop + - Style: w-full bg-green-600 hover:bg-green-500, similar to send button style + - Text: "Build Workflow" or "Building..." when loading + +4. Extract conversation description: + - Combine user messages to form the description for the proposal + - Simple approach: join all user message texts with newlines + - Pass this to onBuildWorkflow callback + +Keep the existing chat functionality unchanged. The parent component (WorkflowCanvas) will handle the actual API calls. + + TypeScript compiles, button appears when conversation exists + ChatPanel has "Build Workflow" button that passes conversation context to parent callback + + + + Task 2: Integrate workflow generation in WorkflowCanvas + src/components/WorkflowCanvas.tsx + +Connect ChatPanel to workflow generation flow: + +1. Add state for workflow building: + - isBuildingWorkflow: boolean + +2. Create handleBuildWorkflow async function: + - Set isBuildingWorkflow to true + - Call /api/quickstart with description and contentLevel "full" + - On success: call loadWorkflow() from store with the generated workflow + - On success: close the chat panel (setIsChatOpen(false)) + - On error: show toast error message + - Always set isBuildingWorkflow to false in finally block + +3. Pass handleBuildWorkflow to ChatPanel: + - setIsChatOpen(false)} + onBuildWorkflow={handleBuildWorkflow} + isBuildingWorkflow={isBuildingWorkflow} + /> + +4. Update ChatPanel props interface to accept: + - onBuildWorkflow: (description: string) => Promise + - isBuildingWorkflow?: boolean (optional, defaults to false) + +Use existing toast system for error display. The workflow loading will clear the canvas and load the new workflow. + + npm run build succeeds, clicking "Build Workflow" calls API and loads workflow + Clicking "Build Workflow" generates workflow via API and loads it onto canvas + + + + Task 3: Update ChatPanel to use external loading state + src/components/ChatPanel.tsx + +Update ChatPanel to use the loading state from props instead of internal state: + +1. Update ChatPanelProps interface: + - Add isBuildingWorkflow?: boolean prop + +2. Remove internal buildingWorkflow state (if added in Task 1), use prop instead + +3. Update "Build Workflow" button: + - Disabled when isBuildingWorkflow is true OR when isLoading (chat streaming) + - Show "Building..." text when isBuildingWorkflow is true + - Show spinner or loading dots when building + +4. Ensure button doesn't interfere with chat streaming: + - Chat input remains functional during workflow building + - But "Build Workflow" button is disabled to prevent double submissions + +This task ensures the loading state is properly synchronized between ChatPanel and WorkflowCanvas. + + npm run dev, start conversation, click Build Workflow, see loading state, workflow loads + Build workflow button shows proper loading state synced with parent component + + + + + +Before declaring phase complete: +- [ ] `npm run build` succeeds without errors +- [ ] Chat button opens ChatPanel +- [ ] After starting a conversation, "Build Workflow" button appears +- [ ] Clicking "Build Workflow" shows loading state +- [ ] Workflow is generated and loaded onto canvas +- [ ] Chat panel closes after successful workflow load +- [ ] Error shows toast if generation fails +- [ ] No TypeScript errors + + + +- All tasks completed +- All verification checks pass +- No errors or warnings introduced +- Chat conversation can be converted to a workflow +- End-to-end flow works: chat -> discuss -> build -> workflow on canvas + + + +After completion, create `.planning/phases/32-chat-ui-foundation/32-02-SUMMARY.md` +