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
+
+
+