From 58eddbc8971577bd701974ee8822d9dfdee55ecc Mon Sep 17 00:00:00 2001 From: shrimbly Date: Mon, 12 Jan 2026 20:47:43 +1300 Subject: [PATCH] docs(11-01): complete UI Polish phase - Create 11-01-SUMMARY.md with phase completion details - Update STATE.md: Phase 11 complete, 20 plans total - Update ROADMAP.md: Mark Phase 11 complete - Add decisions: provider badges, titlePrefix prop, header alignment Co-Authored-By: Claude Opus 4.5 --- .planning/ROADMAP.md | 8 ++-- .planning/STATE.md | 25 ++++++----- .../phases/11-ui-polish/11-01-SUMMARY.md | 43 +++++++++++++++++++ 3 files changed, 62 insertions(+), 14 deletions(-) create mode 100644 .planning/phases/11-ui-polish/11-01-SUMMARY.md diff --git a/.planning/ROADMAP.md b/.planning/ROADMAP.md index 4dbb2e91..626e1e80 100644 --- a/.planning/ROADMAP.md +++ b/.planning/ROADMAP.md @@ -136,15 +136,15 @@ Plans: Plans: - [x] 10-01: Node dimension utility and auto-resize on output -#### Phase 11: UI Polish +#### Phase 11: UI Polish ✅ **Goal**: Flora UI alignment, header UI improvements, project settings, provider logos on nodes **Depends on**: Phase 10 **Research**: Unlikely (internal UI work) -**Plans**: TBD +**Plans**: 1 plan Plans: -- [ ] 11-01: TBD (run /gsd:plan-phase 11 to break down) +- [x] 11-01: Provider badges on nodes and header UI streamlining #### Phase 12: Model Improvements @@ -174,5 +174,5 @@ Phases execute in numeric order: 1 → 2 → 3 → 4 → 5 → 6 → 7 → 8 → | 8. Error Display | v1.1 | 1/1 | Complete | 2026-01-12 | | 9. Video History | v1.1 | 1/1 | Complete | 2026-01-12 | | 10. Node Autosizing | v1.1 | 1/1 | Complete | 2026-01-12 | -| 11. UI Polish | v1.1 | 0/? | Not started | - | +| 11. UI Polish | v1.1 | 1/1 | Complete | 2026-01-12 | | 12. Model Improvements | v1.1 | 0/? | Not started | - | diff --git a/.planning/STATE.md b/.planning/STATE.md index 9cc4dbfa..c5fa2828 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 11 - UI Polish +**Current focus:** Phase 12 - Model Improvements ## Current Position -Phase: 10 of 12 (Node Autosizing) +Phase: 11 of 12 (UI Polish) Plan: 1 of 1 complete Status: Phase complete -Last activity: 2026-01-12 - Completed 10-01-PLAN.md +Last activity: 2026-01-12 - Completed 11-01-PLAN.md -Progress: ████░░░░░░ 37% +Progress: █████░░░░░ 42% ## Performance Metrics **Velocity:** -- Total plans completed: 19 -- Average duration: 7.1 min -- Total execution time: 2.27 hours +- Total plans completed: 20 +- Average duration: 7.0 min +- Total execution time: 2.4 hours **By Phase:** @@ -37,9 +37,10 @@ Progress: ████░░░░░░ 37% | 8. Error Display | 1/1 | 14 min | 14 min | | 9. Video History | 1/1 | 12 min | 12 min | | 10. Node Autosizing | 1/1 | 2 min | 2 min | +| 11. UI Polish | 1/1 | 8 min | 8 min | **Recent Trend:** -- Last 5 plans: 5 min, 4 min, 14 min, 12 min, 2 min +- Last 5 plans: 4 min, 14 min, 12 min, 2 min, 8 min - Trend: Fast execution with established patterns ## Accumulated Context @@ -81,6 +82,10 @@ Recent decisions affecting current work: - Filter internal params, prioritize user-relevant ones (seed, steps, guidance) - Collapsible parameters section to keep node UI compact - Node autosizing constraints: 200-500px width, 200-600px height, ~100px chrome +- Provider badges prepend node title (left side) with w-4 h-4 icons +- Node titles show only model name (no "Generate Image/Video" prefix) +- BaseNode supports titlePrefix prop for icon prepending +- Header aligned for saved/unsaved states with same icon layout ### Deferred Issues @@ -99,6 +104,6 @@ Recent decisions affecting current work: ## Session Continuity Last session: 2026-01-12 -Stopped at: Phase 10 Node Autosizing completed +Stopped at: Phase 11 UI Polish completed Resume file: None -Next action: Plan Phase 11 (UI Polish) +Next action: Plan Phase 12 (Model Improvements) diff --git a/.planning/phases/11-ui-polish/11-01-SUMMARY.md b/.planning/phases/11-ui-polish/11-01-SUMMARY.md new file mode 100644 index 00000000..d7c3b61f --- /dev/null +++ b/.planning/phases/11-ui-polish/11-01-SUMMARY.md @@ -0,0 +1,43 @@ +# Phase 11-01 Summary: UI Polish + +## What Was Built + +### Provider Badges on Generate Nodes +- Added provider icon badges (Gemini sparkle, Replicate, fal.ai logos) to GenerateImageNode and GenerateVideoNode +- Badge appears on the left of the title, prepending the model name +- Removed "Generate Image/Video" text - now shows only model name (e.g., "Nano Banana Pro") +- Added `titlePrefix` prop to BaseNode for prepending icons to titles + +### Header UI Improvements +- Streamlined header with visual grouping of file operations (save, folder) and settings +- Added hover background states to icon buttons for better interactivity +- Improved unsaved indicator with ring outline for better visibility +- Aligned header UI for unsaved projects: + - Shows "Untitled" as project name placeholder + - Save icon with red dot (always visible) + - Folder icon for "Open project" + - Settings icon + - "Not saved" message on far right + +## Files Changed + +- `src/components/nodes/BaseNode.tsx` - Added titlePrefix prop +- `src/components/nodes/GenerateImageNode.tsx` - Provider badge with all 3 providers, titlePrefix usage +- `src/components/nodes/GenerateVideoNode.tsx` - Provider badge with all 3 providers, titlePrefix usage +- `src/components/Header.tsx` - Streamlined layout, aligned saved/unsaved states + +## Technical Decisions + +- Provider badges use w-4 h-4 (16px) icons for visibility +- Gemini sparkle logo added (from official SVG) +- Badge is muted (text-neutral-500) to not distract from title +- Header icons grouped with subtle border separator +- Unsaved project state mirrors saved state layout for consistency + +## Verification + +- [x] `npm run build` succeeds without errors +- [x] Provider badges appear on nodes with all provider models +- [x] Header layout is visually cleaner with proper grouping +- [x] Unsaved project header aligns with saved project header +- [x] Human verification approved