---
phase: 41-diagrams-icons-theme-engine
plan: "06"
type: execute
wave: 4
depends_on: ["41-02", "41-03", "41-04", "41-05"]
files_modified: []
autonomous: false
requirements: [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]
must_haves:
  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"
---

<objective>
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.
</objective>

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

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

<tasks>

<task type="auto">
  <name>Task 1: Run full test suite and type checks</name>
  <files>N/A — verification only</files>
  <read_first>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</read_first>
  <action>
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.
  </action>
  <verify>
    <automated>cd /opt/nexus && pnpm --filter server exec vitest run && pnpm tsc --noEmit --project server/tsconfig.json && pnpm tsc --noEmit --project ui/tsconfig.json</automated>
  </verify>
  <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>
  <done>Full test suite green, all type checks pass, build succeeds</done>
</task>

<task type="checkpoint:human-verify" gate="blocking">
  <name>Task 2: Visual and functional verification of all generators</name>
  <files>N/A — verification only</files>
  <read_first>ui/src/pages/ContentStudio.tsx</read_first>
  <action>
Present the verification checklist to the user. Start the dev server if not running and guide the user through the verification steps below.
  </action>
  <what-built>
    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
  </what-built>
  <how-to-verify>
    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."
  </how-to-verify>
  <verify>
    <automated>echo "CHECKPOINT: Requires human visual verification"</automated>
  </verify>
  <acceptance_criteria>
    - 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
  </acceptance_criteria>
  <done>User has verified all Phase 41 features visually and approved</done>
  <resume-signal>Type "approved" or describe any issues found</resume-signal>
</task>

</tasks>

<verification>
- Full test suite passes
- All three generators produce visible output
- Downloads work correctly
- Theme preview scoped correctly
- Apply theme flow works end-to-end
</verification>

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

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