popiart-node-canvas/.planning/phases/11-ui-polish/11-01-PLAN.md

phase	plan	type
11-ui-polish	1	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.

<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>

@.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

<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>

After completion, create `.planning/phases/11-ui-polish/11-01-SUMMARY.md`