popiart-node-canvas/.planning/phases/03-generate-node-refactor/03-03-PLAN.md

phase	plan	type
03-generate-node-refactor	3	execute

Ensure backward compatibility for existing workflows containing nanoBanana nodes.

Purpose: Existing saved workflows must load and execute correctly without modification. Output: Migration logic, verified backward compatibility, updated workflow execution.

<execution_context> ~/.claude/get-shit-done/workflows/execute-phase.md ~/.claude/get-shit-done/templates/summary.md </execution_context>

@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/STATE.md

Prior plan context:

@.planning/phases/03-generate-node-refactor/03-01-SUMMARY.md @.planning/phases/03-generate-node-refactor/03-02-SUMMARY.md

Key source files:

@src/store/workflowStore.ts @src/types/index.ts @src/components/nodes/GenerateImageNode.tsx

Tech stack available: Zustand, workflow JSON persistence Established patterns: Workflow load/save in workflowStore Constraining decisions:

• Node type "nanoBanana" must remain unchanged in workflow files
• Legacy ModelType ("nano-banana", "nano-banana-pro") must still work

Task 1: Add migration logic for loaded workflows src/store/workflowStore.ts 1. In loadWorkflow() or where workflow JSON is parsed, add migration: - When loading a nanoBanana node without selectedModel field - Automatically set selectedModel based on legacy model field: ```typescript if (node.type === "nanoBanana" && node.data.model && !node.data.selectedModel) { node.data.selectedModel = { provider: "gemini", modelId: node.data.model, displayName: node.data.model === "nano-banana" ? "Nano Banana" : "Nano Banana Pro" }; } ```

2. Keep legacy model field synced for saves:

   • When selectedModel is Gemini, also update the model field
   • This ensures old versions can still read the workflow

3. Add version field to workflow if not present:

   • Set workflowVersion in saved JSON for future migrations
   • Not strictly necessary but good practice

WHY: Migration on load allows old workflows to work without manual editing. Syncing both fields maintains bidirectional compatibility. Load an existing workflow file, check node data has both model and selectedModel Old workflows load with selectedModel populated, new saves include both fields

Task 2: Update executeWorkflow for multi-provider generation src/store/workflowStore.ts 1. In executeWorkflow()'s nanoBanana case: - Check if node has selectedModel - If selectedModel exists and provider !== "gemini", pass API keys in headers: ```typescript const headers: Record = { "Content-Type": "application/json" }; if (nodeData.selectedModel?.provider === "replicate") { const settings = get().providerSettings; const replicateConfig = settings.providers.find(p => p.id === "replicate"); if (replicateConfig?.apiKey) { headers["X-Replicate-API-Key"] = replicateConfig.apiKey; } } // Similar for fal ```

2. Build request payload:

   • Include selectedModel in request body for new providers
   • Keep existing fields for Gemini backward compatibility

3. Handle response format:

   • Provider generate() returns GenerationOutput with outputs array
   • Extract first image output as outputImage
   • Validate output type is "image" (video handled by separate node in Phase 6)

WHY: The store's execution logic needs to pass provider API keys (stored client-side) to the server route. Execute workflow with Gemini model, verify generation still works Workflow execution handles both legacy and new model selection formats

Task 3: Update GenerateImageNode to handle legacy data src/components/nodes/GenerateImageNode.tsx 1. When component mounts or data changes: - If model exists but not selectedModel, derive selectedModel from model - Display the correct provider/model in dropdowns

2. Ensure UI state reflects actual node data:

   • Provider dropdown shows "gemini" for legacy nodes
   • Model dropdown shows correct Gemini model name

3. When saving defaults, save in both formats:

   • saveGenerateImageDefaults should save both model and selectedModel
   • Ensures new nodes get correct defaults

WHY: The UI must correctly display legacy nodes that were migrated on load. Open workflow with old nanoBanana node, verify dropdowns show correct selection GenerateImageNode displays correct provider/model for both legacy and new nodes

Before declaring plan complete: - [ ] `npm run build` succeeds without errors - [ ] Load existing workflow with nanoBanana nodes - nodes display correctly - [ ] Execute existing workflow - Gemini generation works - [ ] Create new Generate node - defaults are correct - [ ] Save and reload workflow - data persists correctly

<success_criteria>

• All tasks completed
• All verification checks pass
• Existing workflows load and execute without errors
• Migration logic populates selectedModel from legacy model field
• Both old and new format nodes work in same workflow
• Phase 3 complete </success_criteria>

After completion, create `.planning/phases/03-generate-node-refactor/03-03-SUMMARY.md`