152 lines
6.5 KiB
Markdown
152 lines
6.5 KiB
Markdown
---
|
|
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>
|