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
6 months ago · ab257d7e9f
1 changed files with 168 additions and 0 deletions
--- a/.planning/phases/32-chat-ui-foundation/32-02-PLAN.md
+++ b/.planning/phases/32-chat-ui-foundation/32-02-PLAN.md
@ -0,0 +1,168 @@
+---
+phase: 32-chat-ui-foundation
+plan: 02
+type: execute
+---
+
+<objective>
+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.
+</objective>
+
+<execution_context>
+~/.claude/get-shit-done/workflows/execute-phase.md
+./summary.md
+</execution_context>
+
+<context>
+@.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
+</context>
+
+<tasks>
+
+<task type="auto">
+  <name>Task 1: Add "Build Workflow" button and proposal state to ChatPanel</name>
+  <files>src/components/ChatPanel.tsx</files>
+  <action>
+Extend ChatPanel to support workflow building:
+
+1. Add props for workflow building:
+   - onBuildWorkflow: (description: string) => Promise<void> - 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.
+  </action>
+  <verify>TypeScript compiles, button appears when conversation exists</verify>
+  <done>ChatPanel has "Build Workflow" button that passes conversation context to parent callback</done>
+</task>
+
+<task type="auto">
+  <name>Task 2: Integrate workflow generation in WorkflowCanvas</name>
+  <files>src/components/WorkflowCanvas.tsx</files>
+  <action>
+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:
+   - <ChatPanel
+       isOpen={isChatOpen}
+       onClose={() => setIsChatOpen(false)}
+       onBuildWorkflow={handleBuildWorkflow}
+       isBuildingWorkflow={isBuildingWorkflow}
+     />
+
+4. Update ChatPanel props interface to accept:
+   - onBuildWorkflow: (description: string) => Promise<void>
+   - 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.
+  </action>
+  <verify>npm run build succeeds, clicking "Build Workflow" calls API and loads workflow</verify>
+  <done>Clicking "Build Workflow" generates workflow via API and loads it onto canvas</done>
+</task>
+
+<task type="auto">
+  <name>Task 3: Update ChatPanel to use external loading state</name>
+  <files>src/components/ChatPanel.tsx</files>
+  <action>
+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.
+  </action>
+  <verify>npm run dev, start conversation, click Build Workflow, see loading state, workflow loads</verify>
+  <done>Build workflow button shows proper loading state synced with parent component</done>
+</task>
+
+</tasks>
+
+<verification>
+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
+</verification>
+
+<success_criteria>
+- 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
+</success_criteria>
+
+<output>
+After completion, create `.planning/phases/32-chat-ui-foundation/32-02-SUMMARY.md`
+</output>