popiart-node-canvas/.planning/phases/04-model-search-dialog/04-01-PLAN.md

phase	plan	type
04-model-search-dialog	1	execute

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.

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

Task 1: Add provider icon buttons to FloatingActionBar src/components/FloatingActionBar.tsx, src/store/workflowStore.ts 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. Dev server shows provider icons in floating action bar; Replicate icon only visible when API key is configured; fal.ai icon always visible Provider icons appear in FloatingActionBar, respecting API key configuration

Task 2: Add dialog state management and placeholder src/store/workflowStore.ts, src/components/FloatingActionBar.tsx 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:

     {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. Click provider icon opens placeholder dialog; clicking Close button closes it; state is properly managed via Zustand Dialog state management working, placeholder renders when provider icon clicked

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

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

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