From c0425faa5c912348ab919de8a42f5db25945154e Mon Sep 17 00:00:00 2001 From: shrimbly Date: Mon, 12 Jan 2026 20:12:56 +1300 Subject: [PATCH] docs(11): create UI polish phase plan Phase 11: UI Polish - 1 plan created - 3 tasks defined (2 auto + 1 verification) - Resolved UAT-001 (provider icons now use real logos) - Ready for execution Co-Authored-By: Claude Opus 4.5 --- .planning/STATE.md | 2 +- .planning/phases/11-ui-polish/11-01-PLAN.md | 119 ++++++++++++++++++++ 2 files changed, 120 insertions(+), 1 deletion(-) create mode 100644 .planning/phases/11-ui-polish/11-01-PLAN.md diff --git a/.planning/STATE.md b/.planning/STATE.md index d3cd626f..9cc4dbfa 100644 --- a/.planning/STATE.md +++ b/.planning/STATE.md @@ -84,7 +84,7 @@ Recent decisions affecting current work: ### Deferred Issues -- UAT-001: Provider icons should use real logos (minor, cosmetic) +- UAT-001: Resolved - Provider icons now use real Replicate/fal.ai logos - ISS-001: Resolved - Generate nodes now adapt to model requirements via dynamic parameters ### Blockers/Concerns diff --git a/.planning/phases/11-ui-polish/11-01-PLAN.md b/.planning/phases/11-ui-polish/11-01-PLAN.md new file mode 100644 index 00000000..8e1a66a4 --- /dev/null +++ b/.planning/phases/11-ui-polish/11-01-PLAN.md @@ -0,0 +1,119 @@ +--- +phase: 11-ui-polish +plan: 01 +type: execute +--- + + +Polish UI with provider badges on nodes and streamlined header layout. + +Purpose: Improve visual clarity by showing which provider a model belongs to directly on nodes, and clean up header UI for better visual hierarchy. +Output: Generate nodes display provider icon badge, header has cleaner layout. + + + +~/.claude/get-shit-done/workflows/execute-phase.md +~/.claude/get-shit-done/templates/summary.md +~/.claude/get-shit-done/references/checkpoints.md + + + +@.planning/PROJECT.md +@.planning/ROADMAP.md +@.planning/STATE.md + +# Prior phase context: +@.planning/phases/10-node-autosizing/10-01-SUMMARY.md + +# Key source files: +@src/components/nodes/GenerateImageNode.tsx +@src/components/nodes/GenerateVideoNode.tsx +@src/components/Header.tsx +@src/components/FloatingActionBar.tsx + +**Tech stack available:** React, Tailwind CSS, @xyflow/react +**Established patterns:** Provider SVG icons in FloatingActionBar (reuse for nodes) +**Constraining decisions:** None specific to this phase + + + + + + Task 1: Add provider badge to generate nodes + src/components/nodes/GenerateImageNode.tsx, src/components/nodes/GenerateVideoNode.tsx + + Add a small provider icon badge to the node header when an external provider model is selected (Replicate or fal.ai). + + Implementation: + 1. Create a ProviderBadge component (can be inline or extracted) that renders the appropriate SVG icon based on provider + 2. Reuse the same SVG paths from FloatingActionBar's ProviderIconButton for consistency + 3. Position badge in the node header area, next to the node title or model name + 4. Only show badge when selectedModel.provider is "replicate" or "fal" (not for Gemini since it's the default) + 5. Style: small icon (12-14px), muted color that fits the node header aesthetic + + Keep it simple - just a visual indicator, no interactivity needed. + + Run `npm run build` to verify no TypeScript errors. Visual check that badge appears on nodes with external models. + Provider badge visible on GenerateImage and GenerateVideo nodes when Replicate or fal.ai model is selected. No badge for Gemini models. + + + + Task 2: Streamline header UI + src/components/Header.tsx + + Clean up header layout for better visual hierarchy: + + 1. Review current icon placement (save, folder, settings) - ensure consistent sizing and spacing + 2. Group related actions visually (file operations together, settings separate) + 3. Ensure proper alignment of all header elements + 4. Check that the unsaved indicator (red dot) is clearly visible + 5. Consider subtle separator between project info and file operations if needed + + Keep changes minimal - polish, not redesign. Follow existing Tailwind patterns (neutral-* colors, transition-colors). + + Run `npm run build` to verify no errors. Visual check that header looks cleaner with proper grouping. + Header has cleaner visual hierarchy with properly grouped and aligned elements. + + + + Provider badges on generate nodes and streamlined header UI + + 1. Run: npm run dev + 2. Visit: http://localhost:3000 + 3. Test provider badges: + - Add a GenerateImage node + - If you have fal.ai configured, select a fal.ai model - verify small fal logo appears in node + - If you have Replicate configured, select a Replicate model - verify Replicate logo appears + - Select Gemini model - verify NO badge appears (default provider) + - Add a GenerateVideo node and repeat badge verification + 4. Test header: + - Verify header icons are well-spaced and aligned + - Verify save indicator (red dot) is visible when unsaved + - Verify overall visual hierarchy feels cleaner + + Type "approved" to continue, or describe issues to fix + + + + + +Before declaring phase complete: +- [ ] `npm run build` succeeds without errors +- [ ] Provider badges appear on nodes with external provider models +- [ ] No badge appears for Gemini models (default) +- [ ] Header layout is visually cleaner +- [ ] Human verification approved + + + + +- All tasks completed +- All verification checks pass +- No TypeScript errors +- Provider badges correctly indicate model source +- Header has improved visual hierarchy + + + +After completion, create `.planning/phases/11-ui-polish/11-01-SUMMARY.md` +