popiart-node-canvas/.planning/phases/32-chat-ui-foundation/32-02-PLAN.md

phase	plan	type
32-chat-ui-foundation	2	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.

<execution_context> ~/.claude/get-shit-done/workflows/execute-phase.md ./summary.md </execution_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

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:

   • <ChatPanel isOpen={isChatOpen} onClose={() => 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

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

After completion, create `.planning/phases/32-chat-ui-foundation/32-02-SUMMARY.md`