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

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

Rename NanoBanana node to GenerateImage and add multi-provider model selector.

Purpose: Transform the hardcoded Gemini-only node into a multi-provider image generation node that filters to image-capable models only. Output: GenerateImage node component with provider/model dropdown (image models only), updated types, store functions renamed.

Note: GenerateVideo node will be added in Phase 6 (Video & Polish) as a separate node type.

<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 phase context:

@.planning/phases/01-provider-infrastructure/01-02-SUMMARY.md @.planning/phases/02-model-discovery/02-03-SUMMARY.md

Key source files:

@src/components/nodes/NanoBananaNode.tsx @src/types/index.ts @src/store/workflowStore.ts @src/lib/providers/types.ts

Tech stack available: Zustand, React, ProviderModel interface, /api/models endpoint Established patterns: Provider self-registration, localStorage settings persistence Constraining decisions:

• Keep nanoBanana node type internally for backward compatibility
• Gemini models use internal names (nano-banana, nano-banana-pro)

Task 1: Update types for multi-provider model selection src/types/index.ts 1. Add new types for selected model: - `SelectedModel` interface with { provider: ProviderType, modelId: string, displayName: string } - Keep existing ModelType for backward compatibility

2. Update NanoBananaNodeData interface:

   • Add optional selectedModel?: SelectedModel field
   • Keep existing model: ModelType field for Gemini backward compatibility

3. Add "gemini" to ProviderType union if not already present (it should be the Gemini provider identifier)

WHY: NanoBananaNodeData needs to store either legacy Gemini model selection OR new multi-provider selection. The optional selectedModel field enables graceful migration. npx tsc --noEmit passes Types compile, SelectedModel interface exists, NanoBananaNodeData has selectedModel field

Task 2: Rename component to GenerateImageNode with model selector UI src/components/nodes/NanoBananaNode.tsx, src/components/nodes/index.ts 1. Rename file from NanoBananaNode.tsx to GenerateImageNode.tsx

2. Rename component from NanoBananaNode to GenerateImageNode

3. Add model selector UI that shows:

   • Provider dropdown (gemini, replicate, fal) - only show enabled providers
   • Model dropdown (fetched from /api/models for selected provider)
   • Filter to image capabilities only: text-to-image, image-to-image
   • For Gemini, show existing hardcoded models (Nano Banana, Nano Banana Pro)
   • For other providers, fetch models dynamically with capability filter

4. When provider/model changes:

   • Update node data with selectedModel: { provider, modelId, displayName }
   • For Gemini, also update legacy model field for backward compatibility

5. Keep existing aspect ratio/resolution controls for Gemini models

   • Hide them for non-Gemini models (parameters will come from provider schema later)

6. Update index.ts to export GenerateImageNode and alias as NanoBananaNode:

   export { GenerateImageNode } from "./GenerateImageNode";
   export { GenerateImageNode as NanoBananaNode } from "./GenerateImageNode";
   

WHY: The component rename reflects its image-specific purpose. Video generation will be a separate GenerateVideoNode in Phase 6. The alias maintains backward compatibility. npm run build succeeds, component renders in browser GenerateImageNode.tsx exists, shows provider selector, model dropdown shows only image-capable models

Task 3: Update store and canvas references src/store/workflowStore.ts, src/components/WorkflowCanvas.tsx 1. In workflowStore.ts: - Rename saveNanoBananaDefaults to saveGenerateImageDefaults (keep old name as alias) - Rename loadNanoBananaDefaults to loadGenerateImageDefaults (keep old name as alias) - Update localStorage key comment but keep actual key for migration - Update createDefaultNodeData for "nanoBanana" case to include default selectedModel for Gemini

2. In WorkflowCanvas.tsx:

   • Update nodeTypes registration to use GenerateImageNode
   • Keep "nanoBanana" as the type key (internal type name unchanged for now)
   • Update minimap color mapping if it references "nanoBanana"

3. In any file using NanoBananaNode import:

   • Update import to use GenerateImageNode
   • Files: ConnectionDropMenu.tsx, FloatingActionBar.tsx, etc.

WHY: Internal references update to new names while keeping the node type string "nanoBanana" for workflow file compatibility. npm run build succeeds, existing workflows load correctly All imports updated, store functions renamed with aliases, workflows still load

Before declaring plan complete: - [ ] `npm run build` succeeds without errors - [ ] `npx tsc --noEmit` passes type checking - [ ] GenerateImageNode renders with provider dropdown - [ ] Model selector shows only image-capable models (text-to-image, image-to-image) - [ ] Gemini models show in model selector - [ ] Existing workflows with nanoBanana nodes still load

<success_criteria>

• All tasks completed
• All verification checks pass
• GenerateImageNode component exists with multi-provider UI
• Model selector filters to image capabilities only
• Types support both legacy Gemini and new multi-provider selection
• Backward compatibility maintained for existing workflows </success_criteria>

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