---
phase: 03-generate-node-refactor
plan: 01
type: execute
---

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

Purpose: Transform the Gemini-only node into a multi-provider image generation node.
Output: GenerateImageNode component with provider/model dropdowns filtering to image-capable models only.

Note: Video generation will use a separate GenerateVideo node in Phase 6.
</objective>

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

<context>
@.planning/PROJECT.md
@.planning/ROADMAP.md
@.planning/STATE.md
@.planning/phases/01-provider-infrastructure/01-02-SUMMARY.md
@.planning/phases/02-model-discovery/02-03-SUMMARY.md
@src/components/nodes/NanoBananaNode.tsx
@src/types/index.ts
@src/store/workflowStore.ts
@src/lib/providers/types.ts

**Tech available:** ProviderModel interface, /api/models endpoint, provider registry
**Patterns:** Provider self-registration, localStorage settings persistence
**Constraints:** Keep "nanoBanana" node type string for backward compatibility
</context>

<tasks>

<task type="auto">
  <name>Task 1: Add SelectedModel type and update NanoBananaNodeData</name>
  <files>src/types/index.ts</files>
  <action>
  Add SelectedModel interface:
  ```typescript
  export interface SelectedModel {
    provider: ProviderType;
    modelId: string;
    displayName: string;
  }
  ```

  Update NanoBananaNodeData to add optional selectedModel field (keep existing model field for Gemini backward compatibility).

  Add "gemini" to ProviderType if not present.
  </action>
  <verify>npx tsc --noEmit</verify>
  <done>SelectedModel type exists, NanoBananaNodeData has selectedModel field, types compile</done>
</task>

<task type="auto">
  <name>Task 2: Create GenerateImageNode with provider/model selector</name>
  <files>src/components/nodes/NanoBananaNode.tsx, src/components/nodes/index.ts</files>
  <action>
  1. Rename NanoBananaNode.tsx to GenerateImageNode.tsx
  2. Rename component function to GenerateImageNode
  3. Add provider dropdown showing enabled providers (gemini always, others if configured)
  4. Add model dropdown:
     - For gemini: hardcoded Nano Banana / Nano Banana Pro
     - For replicate/fal: fetch from /api/models?provider=X&capabilities=text-to-image,image-to-image
  5. Filter to image capabilities only (text-to-image, image-to-image)
  6. Keep aspect ratio/resolution controls for Gemini, hide for others
  7. Update index.ts exports:
     ```typescript
     export { GenerateImageNode } from "./GenerateImageNode";
     export { GenerateImageNode as NanoBananaNode } from "./GenerateImageNode";
     ```
  </action>
  <verify>npm run build</verify>
  <done>GenerateImageNode renders with provider/model dropdowns, shows only image models</done>
</task>

<task type="auto">
  <name>Task 3: Update store and canvas references</name>
  <files>src/store/workflowStore.ts, src/components/WorkflowCanvas.tsx, src/components/ConnectionDropMenu.tsx, src/components/FloatingActionBar.tsx</files>
  <action>
  1. workflowStore.ts: Rename helper functions (keep aliases for compatibility):
     - loadNanoBananaDefaults → loadGenerateImageDefaults
     - saveNanoBananaDefaults → saveGenerateImageDefaults
  2. Update createDefaultNodeData "nanoBanana" case to set default selectedModel for Gemini
  3. WorkflowCanvas.tsx: Update nodeTypes to use GenerateImageNode
  4. Update imports in ConnectionDropMenu.tsx, FloatingActionBar.tsx
  </action>
  <verify>npm run build succeeds, app loads without errors</verify>
  <done>All references updated, existing workflows load correctly</done>
</task>

</tasks>

<verification>
- [ ] `npm run build` succeeds
- [ ] GenerateImageNode renders with provider dropdown
- [ ] Model selector shows only image-capable models
- [ ] Existing workflows with nanoBanana nodes load
</verification>

<success_criteria>
- GenerateImageNode component exists with multi-provider UI
- Model selector filters to text-to-image and image-to-image only
- Backward compatibility maintained
</success_criteria>

<output>
Create `.planning/phases/03-generate-node-refactor/03-01-SUMMARY.md`
</output>