---
phase: 04-model-search-dialog
plan: 01
type: execute
---

<objective>
Add provider icon buttons to the floating action bar that show enabled providers.

Purpose: Give users quick visual access to browse models from configured providers directly from the canvas.
Output: FloatingActionBar with provider icons (Replicate, fal.ai) that open a model search dialog.
</objective>

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

<context>
@.planning/PROJECT.md
@.planning/ROADMAP.md
@.planning/STATE.md
@.planning/phases/03-generate-node-refactor/03-01-SUMMARY.md
@.planning/phases/03-generate-node-refactor/03-03-SUMMARY.md

# Key source files:
@src/components/FloatingActionBar.tsx
@src/store/workflowStore.ts
@src/types/index.ts

**Tech stack available:** React, Zustand, @xyflow/react
**Established patterns:** Provider detection via providerSettings state, modal count tracking in store
**Constraining decisions:**
- [Phase 3]: Provider dropdown shows Gemini always, others only if API key configured
- [Phase 3]: API keys stored in localStorage under node-banana-provider-settings key
</context>

<tasks>

<task type="auto">
  <name>Task 1: Add provider icon buttons to FloatingActionBar</name>
  <files>src/components/FloatingActionBar.tsx, src/store/workflowStore.ts</files>
  <action>
Add provider icon buttons after the Generate combo button, before the edge style toggle divider.

1. In workflowStore.ts, add state for model search dialog:
   - `modelSearchOpen: boolean` - whether dialog is open
   - `setModelSearchOpen: (open: boolean) => void` - action to toggle

2. In FloatingActionBar.tsx:
   - Import providerSettings from workflowStore
   - Create a ProviderIconButton component that renders:
     - Replicate icon (show only if providerSettings.providers.replicate?.apiKey exists)
     - fal.ai icon (always show - fal.ai works without key but is rate limited)
   - Use simple SVG icons:
     - Replicate: stylized "R" or cloud icon
     - fal.ai: stylized "f" or lightning bolt icon
   - On click, call setModelSearchOpen(true) and pass provider filter to state
   - Add a divider before the provider icons section

Button styling should match existing NodeButton: `px-2.5 py-1.5 text-[11px] font-medium text-neutral-400 hover:text-neutral-100 hover:bg-neutral-700 rounded transition-colors`

Icons should be 14-16px (w-3.5 h-3.5 or w-4 h-4) to match existing icon sizes.
  </action>
  <verify>Dev server shows provider icons in floating action bar; Replicate icon only visible when API key is configured; fal.ai icon always visible</verify>
  <done>Provider icons appear in FloatingActionBar, respecting API key configuration</done>
</task>

<task type="auto">
  <name>Task 2: Add dialog state management and placeholder</name>
  <files>src/store/workflowStore.ts, src/components/FloatingActionBar.tsx</files>
  <action>
1. Add to workflowStore.ts state:
   - `modelSearchProvider: ProviderType | null` - which provider to filter by (null = all)
   - Update setModelSearchOpen to optionally accept provider filter

2. In FloatingActionBar.tsx:
   - Import modelSearchOpen and setModelSearchOpen from store
   - When provider icon is clicked, call setModelSearchOpen(true) with provider type
   - Add a placeholder div at the bottom of FloatingActionBar that renders conditionally:
     ```tsx
     {modelSearchOpen && (
       <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
         <div className="bg-neutral-800 p-4 rounded-lg">
           <p className="text-white">Model Search Dialog (Coming in 04-02)</p>
           <button onClick={() => setModelSearchOpen(false)} className="mt-2 px-3 py-1 bg-neutral-700 text-white rounded">Close</button>
         </div>
       </div>
     )}
     ```

This placeholder confirms the state wiring works before 04-02 implements the full dialog.
  </action>
  <verify>Click provider icon opens placeholder dialog; clicking Close button closes it; state is properly managed via Zustand</verify>
  <done>Dialog state management working, placeholder renders when provider icon clicked</done>
</task>

</tasks>

<verification>
Before declaring plan complete:
- [ ] `npm run build` succeeds without errors
- [ ] Provider icons visible in FloatingActionBar (Replicate if API key set, fal.ai always)
- [ ] Clicking icon opens placeholder dialog
- [ ] Closing dialog resets state properly
</verification>

<success_criteria>

- All tasks completed
- All verification checks pass
- No TypeScript errors
- FloatingActionBar shows provider icons for configured providers
- Dialog state management ready for 04-02 implementation
</success_criteria>

<output>
After completion, create `.planning/phases/04-model-search-dialog/04-01-SUMMARY.md`
</output>