docs(23): create phase plan

Phase 23: Model Browser Improvements - 1 plan created - 3 tasks defined - Ready for execution Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
6 months ago · 170a240407
1 changed files with 240 additions and 0 deletions
--- a/.planning/phases/23-model-browser-improvements/23-01-PLAN.md
+++ b/.planning/phases/23-model-browser-improvements/23-01-PLAN.md
@ -0,0 +1,240 @@
 ---
 phase: 23-model-browser-improvements
 plan: 01
 type: execute
 ---
 <objective>
 Improve model browser UX with recently used models section, icon-based provider selector, and Gemini models in browse list.
 Purpose: Make it faster to access frequently used models and provide a consistent experience across all providers including Gemini.
 Output: Enhanced ModelSearchDialog with recent models, icon-based provider filter, and Gemini models alongside Replicate/fal.ai models.
 </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
 # Key source files
@src/components/modals/ModelSearchDialog.tsx
@src/components/FloatingActionBar.tsx
@src/store/workflowStore.ts
@src/app/api/models/route.ts
@src/types/index.ts
@src/lib/providers/types.ts
 # Related prior work
@.planning/phases/04-model-search-dialog/04-02-SUMMARY.md
 **Tech stack available:**
 - React with Zustand for state
 - ModelSearchDialog with existing filter patterns
 - /api/models route with caching
 - Provider icons already exist (Replicate, fal.ai SVGs in FloatingActionBar)
 **Established patterns:**
 - Client-side search filtering
 - Model cards with cover image, name, badges
 - Provider badge colors (blue for Replicate, yellow for fal.ai)
 - localStorage persistence for settings
 **Constraining decisions:**
 - Phase 4: Client-side search filtering for Replicate
 - Phase 4: Model card layout with badges and descriptions
 - Gemini models use internal names (nano-banana, nano-banana-pro)
 </context>
 <tasks>
 <task type="auto">
  <name>Task 1: Add recently used models tracking and storage</name>
  <files>src/store/workflowStore.ts, src/store/utils/localStorage.ts, src/types/index.ts</files>
  <action>
 Add recently used models tracking:
 1. In types/index.ts, add interface:
 ```typescript
 export interface RecentModel {
  provider: ProviderType;
  modelId: string;
  displayName: string;
  timestamp: number;
 }
 ```
 2. In localStorage.ts, add:
 - RECENT_MODELS_KEY constant: "node-banana-recent-models"
 - getRecentModels(): RecentModel[] function (returns [] if not found)
 - saveRecentModels(models: RecentModel[]): void function
 - MAX_RECENT_MODELS = 8 (keep 8, show 4 in UI)
 3. In workflowStore.ts:
 - Add state: recentModels: RecentModel[] (initialized from localStorage)
 - Add action: trackModelUsage(model: { provider: ProviderType, modelId: string, displayName: string }) => void
  - Remove existing entry for same modelId if present
  - Prepend new entry with current timestamp
  - Trim to MAX_RECENT_MODELS
  - Save to localStorage
 Do NOT call trackModelUsage from the store itself - it will be called from ModelSearchDialog's handleSelectModel.
  </action>
  <verify>
 - Check workflowStore exports recentModels and trackModelUsage
 - Check localStorage functions work (manually test in browser console)
  </verify>
  <done>
 - RecentModel type exists
 - localStorage helpers for recent models exist
 - Store has recentModels state and trackModelUsage action
  </done>
 </task>
 <task type="auto">
  <name>Task 2: Add Gemini models to /api/models and update provider filter</name>
  <files>src/app/api/models/route.ts</files>
  <action>
 Add Gemini image models to the models API response:
 1. Create GEMINI_IMAGE_MODELS constant at top of file:
 ```typescript
 const GEMINI_IMAGE_MODELS: ProviderModel[] = [
  {
    id: "nano-banana",
    name: "Nano Banana",
    description: "Fast image generation with Gemini 2.5 Flash. Supports text-to-image and image-to-image with aspect ratio control.",
    provider: "gemini",
    capabilities: ["text-to-image", "image-to-image"],
    coverImage: null,
  },
  {
    id: "nano-banana-pro",
    name: "Nano Banana Pro",
    description: "High-quality image generation with Gemini 3 Pro. Supports text-to-image, image-to-image, resolution control (1K/2K/4K), and Google Search grounding.",
    provider: "gemini",
    capabilities: ["text-to-image", "image-to-image"],
    coverImage: null,
  },
 ];
 ```
 2. In GET handler, update providersToFetch logic:
 - If providerFilter === "gemini", only include Gemini models (don't fetch from external APIs)
 - If providerFilter is null/all, include Gemini models in addition to external providers
 - Gemini models are always available (no API key needed)
 3. Add Gemini models to allModels array at the start (before external provider fetch loop), so they appear first when no filter is applied.
 4. Add gemini to providerResults with { success: true, count: 2, cached: true } when Gemini models are included.
 Avoid: Fetching Gemini models from any external API - they are hardcoded.
  </action>
  <verify>
 - curl "http://localhost:3000/api/models" returns Gemini models in response
 - curl "http://localhost:3000/api/models?provider=gemini" returns only Gemini models
 - curl "http://localhost:3000/api/models?provider=fal" does NOT return Gemini models
  </verify>
  <done>
 - /api/models returns Gemini models (nano-banana, nano-banana-pro)
 - Provider filter "gemini" works correctly
 - Gemini models appear first in "all providers" results
  </done>
 </task>
 <task type="auto">
  <name>Task 3: Update ModelSearchDialog with recent models and icon-based provider filter</name>
  <files>src/components/modals/ModelSearchDialog.tsx</files>
  <action>
 Update ModelSearchDialog UI:
 1. Import and use recentModels and trackModelUsage from store:
 ```typescript
 const { recentModels, trackModelUsage, ... } = useWorkflowStore();
 ```
 2. In handleSelectModel, call trackModelUsage before closing:
 ```typescript
 trackModelUsage({
  provider: model.provider,
  modelId: model.id,
  displayName: model.name,
 });
 ```
 3. Replace provider filter `<select>` with icon-based button group:
 - "All" option (no icon, just text "All")
 - Gemini icon (use a sparkle/star icon from existing SVG patterns, add green-500 badge color)
 - Replicate icon (existing SVG from FloatingActionBar)
 - fal.ai icon (existing SVG from FloatingActionBar)
 - Style: horizontal button group with hover states, active state shows filled background
 - Use existing badge colors: green for Gemini, blue for Replicate, yellow for fal.ai
 4. Add getProviderBadgeColor case for "gemini":
 ```typescript
 case "gemini":
  return "bg-green-500/20 text-green-300";
 ```
 5. Add "Recently Used" section at top of model list (after filter bar, before loading state):
 - Only show if recentModels.length > 0
 - Show max 4 models (slice(0, 4))
 - Use same model card UI as main list
 - Add subtle "Recent" label/header
 - Filter recent models by current capability filter (image/video/all)
 - Add divider between recent section and main list
 6. Update provider badge display text:
 - "gemini" -> "Gemini"
 - Keep existing: "replicate" -> "Replicate", "fal" -> "fal.ai"
 Styling notes:
 - Icon buttons: p-2, rounded, hover:bg-neutral-700, active state bg-neutral-600
 - Recent section: slightly different background (bg-neutral-700/30), smaller gap, "Recently Used" label text-xs text-neutral-500
 - Gemini icon: Use a simple sparkle/AI icon (4-pointed star or similar)
  </action>
  <verify>
 - Open ModelSearchDialog from fal.ai icon
 - Verify Gemini, Replicate, fal.ai icons appear in provider filter
 - Select a model, reopen dialog - model appears in "Recently Used"
 - Filter by provider - recent models also filter
 - Filter by capability - recent models also filter
  </verify>
  <done>
 - Provider filter uses icons instead of dropdown
 - Gemini option available in provider filter
 - Recently used section shows at top of model list
 - Recent models persist across dialog opens
 - Model selection tracks usage
  </done>
 </task>
 </tasks>
 <verification>
 Before declaring phase complete:
 - [ ] npm run build succeeds without errors
 - [ ] ModelSearchDialog shows Gemini models when "All" or "Gemini" filter selected
 - [ ] Recently used models appear at top after selecting any model
 - [ ] Provider filter uses icons (Gemini, Replicate, fal.ai, All)
 - [ ] Recent models persist after page refresh
 - [ ] Capability filter (image/video) works for both recent and main lists
 </verification>
 <success_criteria>
 - All tasks completed
 - All verification checks pass
 - No TypeScript errors
 - Gemini models browsable alongside Replicate/fal.ai
 - Recently used models section functional
 - Icon-based provider filter implemented
 </success_criteria>
 <output>
 After completion, create `.planning/phases/23-model-browser-improvements/23-01-SUMMARY.md`
 </output>