From 8f612229ed01d062852e7177141e41290d447edf Mon Sep 17 00:00:00 2001 From: shrimbly Date: Fri, 9 Jan 2026 22:20:47 +1300 Subject: [PATCH] docs(04-02): complete model search dialog plan Tasks completed: 2/2 (+ UAT refinements) - Create ModelSearchDialog component - Add model selection behavior UAT refinements: - Improved model cards with capability badges - Widened dialog, added external links - Variant suffix for fal.ai models SUMMARY: .planning/phases/04-model-search-dialog/04-02-SUMMARY.md --- .planning/ROADMAP.md | 6 +- .planning/STATE.md | 33 +++-- .../04-model-search-dialog/04-02-ISSUES.md | 31 +++++ .../04-model-search-dialog/04-02-SUMMARY.md | 131 ++++++++++++++++++ 4 files changed, 183 insertions(+), 18 deletions(-) create mode 100644 .planning/phases/04-model-search-dialog/04-02-ISSUES.md create mode 100644 .planning/phases/04-model-search-dialog/04-02-SUMMARY.md diff --git a/.planning/ROADMAP.md b/.planning/ROADMAP.md index c5b7b16a..dda2ed3d 100644 --- a/.planning/ROADMAP.md +++ b/.planning/ROADMAP.md @@ -17,7 +17,7 @@ None - [x] **Phase 1: Provider Infrastructure** - API key storage and provider settings UI ✓ - [x] **Phase 2: Model Discovery** - Dynamic model fetching from Replicate/fal.ai APIs ✓ - [x] **Phase 3: Generate Node Refactor** - Rename NanoBanana to generic Generate with multi-model support ✓ -- [ ] **Phase 4: Model Search Dialog** - Floating action bar icons and searchable model browser +- [x] **Phase 4: Model Search Dialog** - Floating action bar icons and searchable model browser ✓ - [ ] **Phase 5: Image URL Server** - Local endpoint serving images as URLs for providers - [ ] **Phase 6: Video & Polish** - Video playback, parameter customization, edge cases @@ -64,7 +64,7 @@ Plans: Plans: - [x] 04-01: Floating action bar with provider icons -- [ ] 04-02: Model search dialog with filtering and selection +- [x] 04-02: Model search dialog with filtering and selection ### Phase 5: Image URL Server **Goal**: Local API endpoint serves workflow images as URLs for providers requiring URL inputs @@ -99,6 +99,6 @@ Phases execute in numeric order: 1 → 2 → 3 → 4 → 5 → 6 | 1. Provider Infrastructure | 2/2 | Complete | 2026-01-09 | | 2. Model Discovery | 3/3 | Complete | 2026-01-09 | | 3. Generate Node Refactor | 3/3 | Complete | 2026-01-09 | -| 4. Model Search Dialog | 1/2 | In progress | - | +| 4. Model Search Dialog | 2/2 | Complete | 2026-01-09 | | 5. Image URL Server | 0/2 | Not started | - | | 6. Video & Polish | 0/4 | Not started | - | diff --git a/.planning/STATE.md b/.planning/STATE.md index d3978733..d4d75584 100644 --- a/.planning/STATE.md +++ b/.planning/STATE.md @@ -5,23 +5,23 @@ See: .planning/PROJECT.md (updated 2026-01-09) **Core value:** Provider infrastructure that dynamically discovers models from external APIs, enabling users to access hundreds of image/video generation models without hardcoding schemas. -**Current focus:** Phase 4 - Model Search Dialog +**Current focus:** Phase 5 - Image URL Server ## Current Position -Phase: 4 of 6 (Model Search Dialog) -Plan: 1 of 2 in current phase -Status: In progress -Last activity: 2026-01-09 - Completed 04-01-PLAN.md (Floating action bar provider icons) +Phase: 4 of 6 (Model Search Dialog) - COMPLETE +Plan: 2 of 2 in current phase +Status: Phase complete +Last activity: 2026-01-09 - Completed 04-02-PLAN.md (Model search dialog) -Progress: [==========================================================] 60% (9/15 plans) +Progress: [=================================================================] 67% (10/15 plans) ## Performance Metrics **Velocity:** -- Total plans completed: 9 -- Average duration: 4.6 min -- Total execution time: 0.70 hours +- Total plans completed: 10 +- Average duration: 5.6 min +- Total execution time: 0.93 hours **By Phase:** @@ -30,11 +30,11 @@ Progress: [==========================================================] 60% (9/15 | 1. Provider Infrastructure | 2/2 | 14 min | 7 min | | 2. Model Discovery | 3/3 | 14 min | 4.7 min | | 3. Generate Node Refactor | 3/3 | 13 min | 4.3 min | -| 4. Model Search Dialog | 1/2 | 2 min | 2 min | +| 4. Model Search Dialog | 2/2 | 17 min | 8.5 min | **Recent Trend:** -- Last 5 plans: 5 min, 5 min, 3 min, 2 min -- Trend: improving +- Last 5 plans: 5 min, 3 min, 2 min, 15 min +- Trend: stable (04-02 included UAT refinements) ## Accumulated Context @@ -64,10 +64,13 @@ Recent decisions affecting current work: - Dual migration approach: loadWorkflow migrates + UI effect for runtime - fal.ai icon always visible in action bar (works without key but rate limited) - Replicate icon only visible when API key is configured +- Client-side search filtering for Replicate (their search API unreliable) +- Show all capability badges to differentiate similar models +- Extract variant suffix from fal.ai model IDs for display name ### Deferred Issues -None. +- UAT-001: Provider icons should use real logos (minor, cosmetic) ### Blockers/Concerns @@ -76,6 +79,6 @@ None. ## Session Continuity Last session: 2026-01-09 -Stopped at: Completed 04-01-PLAN.md (Floating action bar provider icons) +Stopped at: Completed Phase 4 (Model Search Dialog) Resume file: None -Next action: Execute 04-02-PLAN.md (Model search dialog with filtering and selection) +Next action: Plan Phase 5 (Image URL Server) diff --git a/.planning/phases/04-model-search-dialog/04-02-ISSUES.md b/.planning/phases/04-model-search-dialog/04-02-ISSUES.md new file mode 100644 index 00000000..4783f97d --- /dev/null +++ b/.planning/phases/04-model-search-dialog/04-02-ISSUES.md @@ -0,0 +1,31 @@ +# UAT Issues: Phase 4 Plan 2 + +**Tested:** 2026-01-09 +**Source:** .planning/phases/04-model-search-dialog/04-02-PLAN.md +**Tester:** User via /gsd:verify-work + +## Open Issues + +### UAT-001: Provider icons should use real logos instead of placeholder icons + +**Discovered:** 2026-01-09 +**Phase/Plan:** 04-02 +**Severity:** Minor +**Feature:** Provider icon buttons in FloatingActionBar +**Description:** Currently using placeholder icons (stylized "R" for Replicate, lightning bolt for fal.ai). Should use actual provider logos fetched from the internet. +**Expected:** Real Replicate and fal.ai logos +**Actual:** Simple SVG placeholder icons +**Repro:** +1. Look at FloatingActionBar +2. See provider icons after Generate button +3. Icons are generic, not official logos + +## Resolved Issues + +[None yet] + +--- + +*Phase: 04-model-search-dialog* +*Plan: 02* +*Tested: 2026-01-09* diff --git a/.planning/phases/04-model-search-dialog/04-02-SUMMARY.md b/.planning/phases/04-model-search-dialog/04-02-SUMMARY.md new file mode 100644 index 00000000..9ee33969 --- /dev/null +++ b/.planning/phases/04-model-search-dialog/04-02-SUMMARY.md @@ -0,0 +1,131 @@ +--- +phase: 04-model-search-dialog +plan: 02 +subsystem: ui +tags: [react, modal, search, filtering, provider-models] + +# Dependency graph +requires: + - phase: 04-01 + provides: Provider icon buttons and model search state management + - phase: 02-03 + provides: Unified /api/models endpoint with caching +provides: + - Model search dialog with search, provider filter, and capability filter + - Model selection creates GenerateImage node with model pre-configured + - External links to model pages on Replicate/fal.ai +affects: [05-image-url-server, 06-video-polish] + +# Tech tracking +tech-stack: + added: [] + patterns: + - Client-side search filtering for Replicate (API search unreliable) + - Model variant suffix extraction from ID for fal.ai + +key-files: + created: + - src/components/modals/ModelSearchDialog.tsx + modified: + - src/components/FloatingActionBar.tsx + - src/store/workflowStore.ts + - src/app/api/models/route.ts + +key-decisions: + - "Client-side search filtering for Replicate (their search API is unreliable)" + - "Show all capability badges (txt→img, img→img, txt→vid, img→vid) to differentiate models" + - "Extract variant suffix from fal.ai model IDs for display name" + - "External link icon opens model page on provider website" + +patterns-established: + - "Model card layout with cover image, name, ID, badges, and description" + - "Debounced search input (300ms)" + +issues-created: [UAT-001] + +# Metrics +duration: 15min +completed: 2026-01-09 +--- + +# Phase 4 Plan 2: Model Search Dialog Summary + +**Searchable model browser with provider/capability filtering, model cards showing variant info, and external links to provider pages** + +## Performance + +- **Duration:** ~15 min +- **Started:** 2026-01-09T09:03:00Z +- **Completed:** 2026-01-09T09:18:56Z +- **Tasks:** 2 (+ UAT refinements) +- **Files modified:** 4 + +## Accomplishments + +- Created ModelSearchDialog component with search, provider filter, and capability filter +- Model cards show cover image, name with variant suffix, model ID, capability badges, and description +- Clicking a model creates a GenerateImage node with the selected model pre-configured +- Fixed Replicate search by using client-side filtering (their search API was unreliable) +- Added external link icons to open model pages on Replicate/fal.ai +- Widened dialog for better viewing (max-w-5xl) + +## Task Commits + +Each task was committed atomically: + +1. **Task 1: Create ModelSearchDialog** - `651dddf` (feat) +2. **Task 2: Fix Replicate search** - `4221225` (fix) +3. **UAT: Improve model cards** - `2fc4589` (feat) +4. **UAT: Widen dialog** - `686f624` (feat) +5. **UAT: Add external links** - `59a238a` (feat) +6. **UAT: Show variant suffix** - `81b4221` (feat) +7. **UAT: Increase ID font size** - `7ace12a` (feat) + +## Files Created/Modified + +- `src/components/modals/ModelSearchDialog.tsx` - New modal with search, filters, model grid +- `src/components/FloatingActionBar.tsx` - Integrated ModelSearchDialog +- `src/store/workflowStore.ts` - Added initialData parameter to addNode +- `src/app/api/models/route.ts` - Client-side search filtering for Replicate + +## Decisions Made + +- Replicate search API unreliable, use client-side filtering on cached model list +- Show all capability badges to differentiate similar models (text-to-image vs image-to-image) +- Extract last segment of fal.ai model ID as variant suffix (e.g., "Kling 1.6 - effects") +- External link opens model page in new tab without selecting the model + +## Deviations from Plan + +### Auto-fixed Issues + +**1. [Rule 1 - Bug] Replicate search returning no results** +- **Found during:** Task 1 execution +- **Issue:** Replicate's /v1/search endpoint returned empty results +- **Fix:** Changed to always fetch from /v1/models and filter client-side +- **Files modified:** src/app/api/models/route.ts +- **Verification:** Search now works for both providers +- **Commit:** 4221225 + +### UAT Refinements + +Based on user acceptance testing feedback: +- Improved model cards with capability badges and model ID display +- Widened dialog from max-w-2xl to max-w-5xl +- Added external links to provider model pages +- Added variant suffix to fal.ai model names +- Increased model ID font size + +## Issues Encountered + +- UAT-001: Provider icons should use real logos (logged for future, not blocking) + +## Next Phase Readiness + +- Model search dialog fully functional +- Users can browse and select models from Replicate and fal.ai +- Ready for Phase 5: Image URL Server + +--- +*Phase: 04-model-search-dialog* +*Completed: 2026-01-09*