147 lines
7.9 KiB
Markdown
147 lines
7.9 KiB
Markdown
---
|
|
phase: 41-diagrams-icons-theme-engine
|
|
plan: "04"
|
|
subsystem: ui
|
|
tags: [content-studio, diagrams, icons, shadcn, useContentJob, tdd, vitest, testing-library]
|
|
|
|
# Dependency graph
|
|
requires:
|
|
- phase: 41-01
|
|
provides: useContentJob hook, contentJobs API, progress shadcn component
|
|
- phase: 41-02
|
|
provides: DiagramBundle/IconSetBundle types, server-sanitized SVG assets
|
|
|
|
provides:
|
|
- ui/src/pages/ContentStudio.tsx — Tabbed page (Diagrams, Icons, Themes) at /:companyId/content-studio
|
|
- ui/src/components/DiagramGeneratePanel.tsx — Prompt + type selector + generate + progress + preview + source editor
|
|
- ui/src/components/DiagramPreview.tsx — SVG render area + SVG/PNG download buttons
|
|
- ui/src/components/DiagramSourcePanel.tsx — Collapsible Mermaid source editor with copy + re-render
|
|
- ui/src/components/DiagramSourcePanel.test.tsx — 6 tests for DIAG-03 collapsible source behavior
|
|
- ui/src/components/IconGeneratePanel.tsx — Description + style/count selectors + generate + progress + grid + download bar
|
|
- ui/src/components/IconResultGrid.tsx — 4-col/2-col responsive grid with per-icon selection and download
|
|
- ui/src/components/IconDownloadBar.tsx — Sticky bar for bulk icon download with format selector
|
|
- ui/src/types/content-bundles.ts — DiagramBundle/IconSetBundle/ThemePaletteBundle UI type contracts
|
|
|
|
affects: [41-05-ui-generator, 41-06-ui-theme]
|
|
|
|
# Tech tracking
|
|
tech-stack:
|
|
added: []
|
|
patterns:
|
|
- "ContentStudio: useCompany().selectedCompanyId passed as companyId to all content panels"
|
|
- "useContentJob pattern: submit -> SSE progress -> done -> fetch asset URL -> JSON.parse bundle"
|
|
- "DiagramSourcePanel dirty state: set on change (not blur) for reliable test assertions"
|
|
- "Server-sanitized SVG rendered via dangerouslySetInnerHTML (mirrors MarkdownBody.tsx mermaid pattern)"
|
|
- "TDD test cleanup: @testing-library/react cleanup() called in afterEach to prevent DOM accumulation"
|
|
|
|
key-files:
|
|
created:
|
|
- ui/src/pages/ContentStudio.tsx
|
|
- ui/src/components/DiagramGeneratePanel.tsx
|
|
- ui/src/components/DiagramPreview.tsx
|
|
- ui/src/components/DiagramSourcePanel.tsx
|
|
- ui/src/components/DiagramSourcePanel.test.tsx
|
|
- ui/src/components/IconGeneratePanel.tsx
|
|
- ui/src/components/IconResultGrid.tsx
|
|
- ui/src/components/IconDownloadBar.tsx
|
|
- ui/src/types/content-bundles.ts
|
|
modified:
|
|
- ui/src/App.tsx
|
|
|
|
key-decisions:
|
|
- "dirty state set on onChange (not onBlur) — onBlur fires after state update from onChange may not be complete in jsdom test environment"
|
|
- "content-bundles.ts created in ui/src/types/ — shared type contracts matching server DiagramBundle/IconSetBundle interfaces from Plan 01"
|
|
- "Themes tab shows placeholder text — Theme UI is out of scope for Plan 41-04 (planned in 41-06)"
|
|
|
|
# Metrics
|
|
duration: 7min
|
|
completed: 2026-04-04
|
|
---
|
|
|
|
# Phase 41 Plan 04: ContentStudio Page — Diagrams and Icons UI Summary
|
|
|
|
**ContentStudio page with Diagrams and Icons tabs fully functional: prompt+type selector, generate button, SSE progress, SVG preview with download, collapsible source editor (TDD-tested), icon grid with selection and bulk download bar**
|
|
|
|
## Performance
|
|
|
|
- **Duration:** ~7 min
|
|
- **Started:** 2026-04-04T20:48:00Z
|
|
- **Completed:** 2026-04-04T20:55:27Z
|
|
- **Tasks:** 2
|
|
- **Files created/modified:** 10
|
|
|
|
## Accomplishments
|
|
|
|
- ContentStudio page registered at `/:companyId/content-studio` with 3-tab layout (Diagrams, Icons, Themes)
|
|
- DiagramGeneratePanel: full generate flow with prompt, type selector, generate button with spinner, progress bar, SVG preview, stripped-directive notice, empty state, error state
|
|
- DiagramPreview: server-sanitized SVG rendered inside paperclip-mermaid container, SVG and PNG download buttons
|
|
- DiagramSourcePanel: collapsible Mermaid source editor with copy button (aria-label), re-render button on dirty, height transition
|
|
- DiagramSourcePanel.test.tsx: 6 passing tests covering DIAG-03 requirements
|
|
- IconGeneratePanel: description + style + count selectors, generate button, progress, empty/error states
|
|
- IconResultGrid: responsive 4-col/2-col grid, per-icon checkboxes (aria-labeled), hover download row
|
|
- IconDownloadBar: sticky download bar with download selected count, format selector, clear selection
|
|
|
|
## Task Commits
|
|
|
|
1. **Task 1: ContentStudio page + Diagram UI components + DiagramSourcePanel test** - `095ba9ba` (feat)
|
|
2. **Task 2: Icon UI components (generate panel, result grid, download bar)** - `cf7784ae` (feat)
|
|
|
|
## Files Created/Modified
|
|
|
|
- `ui/src/pages/ContentStudio.tsx` - Tabbed ContentStudio page with Diagrams, Icons, Themes tabs
|
|
- `ui/src/components/DiagramGeneratePanel.tsx` - Full diagram generation flow
|
|
- `ui/src/components/DiagramPreview.tsx` - SVG preview with paperclip-mermaid container + download buttons
|
|
- `ui/src/components/DiagramSourcePanel.tsx` - Collapsible Mermaid source editor
|
|
- `ui/src/components/DiagramSourcePanel.test.tsx` - 6 TDD tests for DIAG-03 collapsible source behavior
|
|
- `ui/src/components/IconGeneratePanel.tsx` - Icon generation panel
|
|
- `ui/src/components/IconResultGrid.tsx` - Responsive icon grid with selection checkboxes and download row
|
|
- `ui/src/components/IconDownloadBar.tsx` - Sticky download bar for selected icons
|
|
- `ui/src/types/content-bundles.ts` - DiagramBundle/IconSetBundle/ThemePaletteBundle type contracts
|
|
- `ui/src/App.tsx` - Added content-studio route and ContentStudio lazy import
|
|
|
|
## Decisions Made
|
|
|
|
- dirty state in DiagramSourcePanel is set onChange rather than onBlur: in jsdom test environment, onBlur fires before the state update from onChange propagates, making the Re-render diagram button not appear reliably in tests.
|
|
- content-bundles.ts created in ui/src/types/ to give the UI its own type contract for parsing bundle JSON from content job assets. Matches server-side RenderResult union types from Plan 41-01.
|
|
- Themes tab intentionally shows placeholder: Theme UI is in scope for Plan 41-06 (ThemeEngine UI), not Plan 41-04.
|
|
|
|
## Deviations from Plan
|
|
|
|
### Auto-fixed Issues
|
|
|
|
**1. [Rule 1 - Bug] Added cleanup() to DiagramSourcePanel.test.tsx afterEach**
|
|
- **Found during:** Task 1 (GREEN phase test run)
|
|
- **Issue:** @testing-library/react does not auto-cleanup between tests in vitest jsdom environment without explicit cleanup() call. Multiple test instances accumulated in the DOM, causing getByText("View Mermaid source") to find multiple elements.
|
|
- **Fix:** Added cleanup() import and call in afterEach hook.
|
|
- **Files modified:** ui/src/components/DiagramSourcePanel.test.tsx
|
|
- **Commit:** 095ba9ba
|
|
|
|
**2. [Rule 1 - Bug] Moved dirty state to onChange instead of onBlur in DiagramSourcePanel**
|
|
- **Found during:** Task 1 (GREEN phase tests for Re-render button failing)
|
|
- **Issue:** onBlur handler checking editedSource !== mermaidSource fires correctly in browser, but in jsdom test environment with fireEvent.change + fireEvent.blur, the state from onChange has not yet been applied when onBlur runs synchronously.
|
|
- **Fix:** Set dirty state directly in onChange handler by comparing new value to mermaidSource prop.
|
|
- **Files modified:** ui/src/components/DiagramSourcePanel.tsx
|
|
- **Commit:** 095ba9ba
|
|
|
|
---
|
|
|
|
**Total deviations:** 2 auto-fixed (Rule 1 - bugs found during TDD GREEN phase)
|
|
**Impact on plan:** No scope change. Both fixes are in the test infrastructure and component implementation to ensure reliable test assertions.
|
|
|
|
## Known Stubs
|
|
|
|
- `ui/src/pages/ContentStudio.tsx` Themes tab: shows "Theme engine coming soon." — intentional placeholder. Theme UI is out of scope for Plan 41-04 and will be implemented in Plan 41-06.
|
|
|
|
## User Setup Required
|
|
|
|
None — UI components are static React components consuming existing hooks and APIs.
|
|
|
|
## Next Phase Readiness
|
|
|
|
- Plans 41-05 and 41-06 can now reference ContentStudio.tsx for Themes tab implementation
|
|
- DiagramSourcePanel test pattern (@testing-library/react + cleanup() in afterEach) established for future component tests
|
|
- content-bundles.ts type contracts ready for Theme palette bundle UI parsing in Plan 41-06
|
|
|
|
---
|
|
*Phase: 41-diagrams-icons-theme-engine*
|
|
*Completed: 2026-04-04*
|