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 <noreply@anthropic.com>

.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

.planning/phases/11-ui-polish/11-01-PLAN.md

@@ -0,0 +1,119 @@
+---
+phase: 11-ui-polish
+plan: 01
+type: execute
+---
+
+<objective>
+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.
+</objective>
+
+<execution_context>
+~/.claude/get-shit-done/workflows/execute-phase.md
+~/.claude/get-shit-done/templates/summary.md
+~/.claude/get-shit-done/references/checkpoints.md
+</execution_context>
+
+<context>
+@.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
+</context>
+
+<tasks>
+
+<task type="auto">
+  <name>Task 1: Add provider badge to generate nodes</name>
+  <files>src/components/nodes/GenerateImageNode.tsx, src/components/nodes/GenerateVideoNode.tsx</files>
+  <action>
+    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.
+  </action>
+  <verify>Run `npm run build` to verify no TypeScript errors. Visual check that badge appears on nodes with external models.</verify>
+  <done>Provider badge visible on GenerateImage and GenerateVideo nodes when Replicate or fal.ai model is selected. No badge for Gemini models.</done>
+</task>
+
+<task type="auto">
+  <name>Task 2: Streamline header UI</name>
+  <files>src/components/Header.tsx</files>
+  <action>
+    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).
+  </action>
+  <verify>Run `npm run build` to verify no errors. Visual check that header looks cleaner with proper grouping.</verify>
+  <done>Header has cleaner visual hierarchy with properly grouped and aligned elements.</done>
+</task>
+
+<task type="checkpoint:human-verify" gate="blocking">
+  <what-built>Provider badges on generate nodes and streamlined header UI</what-built>
+  <how-to-verify>
+    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
+  </how-to-verify>
+  <resume-signal>Type "approved" to continue, or describe issues to fix</resume-signal>
+</task>
+
+</tasks>
+
+<verification>
+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
+</verification>
+
+<success_criteria>
+
+- All tasks completed
+- All verification checks pass
+- No TypeScript errors
+- Provider badges correctly indicate model source
+- Header has improved visual hierarchy
+</success_criteria>
+
+<output>
+After completion, create `.planning/phases/11-ui-polish/11-01-SUMMARY.md`
+</output>