nexus/.planning/phases/41-diagrams-icons-theme-engine/41-06-PLAN.md

phase	plan	type	wave	depends_on	files_modified	autonomous	requirements	must_haves
41-diagrams-icons-theme-engine	06	execute	4	41-02 41-03 41-04 41-05		false	DIAG-01 DIAG-02 DIAG-03 DIAG-04 DIAG-05 ICON-01 ICON-02 ICON-03 THEME-01 THEME-02 THEME-03 THEME-04 THEME-05 THEME-06 THEME-07	truths All three content generators produce visible output in the browser Theme preview does not bleed into nav/sidebar WCAG badges are computed and displayed correctly Downloads produce valid SVG and PNG files

Visual and functional verification of all Phase 41 features. Run the full test suite, start the dev server, and verify all three generators end-to-end.

Purpose: Catch integration issues before marking the phase complete. Output: Verified working phase ready for /gsd:verify-work.

<execution_context> @$HOME/.claude/get-shit-done/workflows/execute-plan.md @$HOME/.claude/get-shit-done/templates/summary.md </execution_context>

@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/phases/41-diagrams-icons-theme-engine/41-04-SUMMARY.md @.planning/phases/41-diagrams-icons-theme-engine/41-05-SUMMARY.md Task 1: Run full test suite and type checks N/A — verification only server/src/__tests__/diagram-renderer.test.ts, server/src/__tests__/icon-renderer.test.ts, server/src/__tests__/theme-renderer.test.ts, server/src/__tests__/nexus-settings-custom-theme.test.ts 1. Run full server test suite: ```bash cd /opt/nexus && pnpm --filter server exec vitest run ``` 2. Run full UI type check: ```bash cd /opt/nexus && pnpm tsc --noEmit --project ui/tsconfig.json ``` 3. Run full server type check: ```bash cd /opt/nexus && pnpm tsc --noEmit --project server/tsconfig.json ``` 4. Run pnpm build to verify no build-time issues: ```bash cd /opt/nexus && pnpm build ```

If any test fails or type check errors, fix the issue before proceeding to the checkpoint. cd /opt/nexus && pnpm --filter server exec vitest run && pnpm tsc --noEmit --project server/tsconfig.json && pnpm tsc --noEmit --project ui/tsconfig.json <acceptance_criteria> - All server tests pass (including diagram-renderer, icon-renderer, theme-renderer, nexus-settings-custom-theme) - pnpm tsc --noEmit --project server/tsconfig.json exits 0 - pnpm tsc --noEmit --project ui/tsconfig.json exits 0 </acceptance_criteria> Full test suite green, all type checks pass, build succeeds

Task 2: Visual and functional verification of all generators N/A — verification only ui/src/pages/ContentStudio.tsx Present the verification checklist to the user. Start the dev server if not running and guide the user through the verification steps below. Complete Phase 41: Diagrams, Icons and Theme Engine with: 1. Mermaid diagram generation from natural language descriptions via LLM synthesis (SVG + PNG download) 2. SVG icon set generation with multi-size PNG export 3. OKLCH theme palette engine with WCAG AA validation and live preview 4. Theme export (CSS, Tailwind, VS Code, JSON) and one-click apply to Nexus 1. Start the dev server: `cd /opt/nexus && pnpm dev` 2. Navigate to Content Studio (/:companyId/content-studio) 3. **Diagrams tab:** - Type "A simple authentication flow with login, validate, and dashboard" in the prompt - Select "Flowchart" from the type selector - Click "Generate Diagram" - Verify: progress bar appears, SVG diagram renders after completion - Click "Download SVG" and "Download PNG" -- verify files are valid - Expand "View Mermaid source" -- verify source is editable - Modify the source and click "Re-render diagram" -- verify diagram updates 4. **Icons tab:** - Type "email, calendar, settings, notification" in the description - Select "Outline" style and "4" count - Click "Generate Icons" - Verify: 4 icons appear in a grid - Hover an icon -- verify download row appears (SVG, PNG 16, 32, 64) - Select 2 icons via checkboxes -- verify download bar appears at bottom 5. **Themes tab:** - Pick a blue seed color (#1e66f5) - Click "Generate Palette" - Verify: 7 swatches appear with dark and light rows - Verify: WCAG AA badges (green "AA" or red "Fails AA") on each swatch - Toggle dark/light variant -- verify preview updates - Verify: preview panel shows mini Nexus mock with injected colors, NOT affecting the actual nav/sidebar - Click each export tab (CSS, Tailwind, VS Code, JSON) -- verify code blocks appear - Click "Copy CSS Variables" -- verify clipboard contains CSS - Click "Apply to Nexus" -- verify confirmation dialog appears - Click "Apply theme" -- verify toast "Theme applied. Reload to see full effect." echo "CHECKPOINT: Requires human visual verification" - All three generators produce visible output in the browser - Theme preview is scoped to .nexus-theme-preview (does not affect nav/sidebar) - Downloads produce valid SVG and PNG files - Apply theme flow works end-to-end with confirmation dialog and toast User has verified all Phase 41 features visually and approved Type "approved" or describe any issues found - Full test suite passes - All three generators produce visible output - Downloads work correctly - Theme preview scoped correctly - Apply theme flow works end-to-end

<success_criteria> All Phase 41 success criteria from ROADMAP verified:

1. Describing architecture produces rendered Mermaid SVG+PNG with editable source
2. Mermaid enforces strict security (click/init directives stripped, DOMPurify on SVG)
3. Icon set from description returns cohesive SVGs downloadable in SVG+PNG
4. Seed color produces full OKLCH palette with dark/light variants, WCAG AA validated
5. Theme preview works live, export works for 4 formats, apply persists in one click </success_criteria>

After completion, create `.planning/phases/41-diagrams-icons-theme-engine/41-06-SUMMARY.md`