Content Pipeline v2 — Frontend Implementation Brief
Daedalus Response | 2026-04-22
My Recommendations
1. Form Architecture: Single Page with Sticky Progress
Why not wizard: Writers need to see the whole brief. The narrative flow matters — breaking it up kills the story arc.
Implementation:
- Collapsible sections (default: first 2 expanded)
- Sticky progress bar on right (desktop) / top (mobile)
- Section validation: green check when complete, red X when invalid
- Smooth scroll to next incomplete section on "Continue"
- "Expand All / Collapse All" toggle
2. Auto-Save: Hybrid Approach
localStorage + backend sync:
- Save to localStorage every 5 seconds while typing
- Sync to backend on blur or explicit "Save Draft" click
- On load: check localStorage first (faster), merge with backend if newer
- Clear localStorage on successful publish
Why: Survives browser crash, works offline briefly, syncs across devices
3. Backend Status: Wait for Contracts
I won't start P0 components until Socrates confirms:
- POST /api/v1/content/validate-brief returns expected shape
- POST /api/v1/content/generate-v2 accepts approved brief + style reference
- Struggle score calculation is deterministic (not random per call)
I can start now: Design tokens, responsive grid system, component wireframes
4. Struggle Score: Bar Chart
Not just color + number. Visual pattern recognition:
Struggle Score: 87 ████████████████████░░
├─ Personal stakes: ✓
├─ Failed attempts: ✓
├─ "I" statements: 12
├─ Specific timestamps: 2
└─ Cost mentions: 1
Why bars: Matt can scan 10 posts and instantly see which need work
5. Style Reference: Top 20 by Recency
STYLE REFERENCE
───────────────
[Search published posts... ]
Recent (last 90 days):
○ "The Night I Broke DNS..." (2 weeks ago)
○ "How I Accidentally DDoSed..." (1 month ago)
...
All time favorites:
○ "Why I Switched to Local LLMs" (3 months ago)
...
Why 20: Manageable list, covers recent voice evolution
Implementation Plan
Phase 0: Foundation (Can Start Now)
| Task | Duration | Location |
|---|---|---|
| Design tokens v2 | 4 hours | shared/design-tokens/blog-pipeline/content-v2.json |
| Responsive grid for brief | 4 hours | /admin/blog.css |
| Component wireframes | 4 hours | Figma or HTML mock |
Phase 1: Core Components (Wait for API)
| Task | Duration | Dependencies |
|---|---|---|
| StruggleBriefForm | 1 day | API contract |
| VoiceChecklist | 4 hours | API contract |
| BriefReview | 6 hours | API contract |
| ContentPreview (side-by-side) | 1 day | API contract |
| StruggleScore visualization | 4 hours | Struggle score algo |
| StyleSelector | 4 hours | GET /api/v1/content/style-references |
Phase 2: Integration & Polish
| Task | Duration |
|---|---|
| Mobile wizard stepper | 6 hours |
| End-to-end test suite | 4 hours |
| Keyboard navigation | 4 hours |
| Screen reader announcements | 4 hours |
Component Specifications
StruggleBriefForm
Structure:
┌─────────────────────────────────────────┬──────────────┐
│ │ PROGRESS │
│ [What broke?] │ ████░░░░ │
│ [textarea] │ 4/8 complete│
│ │ │
│ [Who was affected?] │ Continue → │
│ [select: Matt/Aundrea/kids/agents] │ │
│ │ [Save Draft] │
│ [What did you try first?] │ │
│ [textarea] │ │
│ │ │
│ ... │ │
└─────────────────────────────────────────┴──────────────┘
Validation:
- Real-time: Min chars, required fields
- On blur: Show error, don't block typing
- On submit: Scroll to first error
VoiceChecklist
States:
Initial: [ ] All unchecked, [Generate] disabled
Partial: [✓] [✓] [ ] [ ] [ ] [ ], [Generate] disabled
Complete: [✓] [✓] [✓] [✓] [✓] [✓], [Generate] enabled (pulse)
Animation:
- Checkmark pop-in on complete
- Generate button pulses when enabled
BriefReview
Layout:
BRIEF PREVIEW [Edit Brief]
────────────────────────────────────────────────────────────
What broke:
My CalDAV setup died when I updated Ubuntu. Not gracefully.
Who was affected:
Aundrea — couldn't see her appointments.
... (collapsed sections with [Show] buttons)
STYLE REFERENCE: "The Night I Broke DNS..."
ESTIMATED LENGTH: ~1,200 words
GPU TIME: ~45 seconds
[Edit Brief] [Approve & Generate]
ContentPreview
Side-by-side:
┌───────────────────────┬───────────────────────┐
│ YOUR BRIEF │ GENERATED CONTENT │
├───────────────────────┼───────────────────────┤
│ What broke: │ Paragraph 1... │
│ [highlighted text] ─────│ [maps here] │
│ │ │
│ Attempt 1: │ Paragraph 2... │
│ [highlighted text] ────│ [maps here] │
│ │ │
│ [Highlight mapping │ │
│ on hover] │ [Edit Brief] [Accept] │
└───────────────────────┴───────────────────────┘
API Contract Questions for Socrates
- Brief validation: Return suggested improvements or just boolean?
- Style references: Include excerpt/summary or just titles?
- Struggle score: Can I request re-calculation without re-generating?
- Draft persistence: Draft ID from backend or generate UUID frontend?
Design Tokens v2 (Draft)
{
"colors": {
"struggle": {
"high": "#22c55e",
"medium": "#eab308",
"low": "#ef4444"
},
"validation": {
"pass": "#22c55e",
"fail": "#ef4444",
"pending": "#6b7280"
}
},
"spacing": {
"brief-section-gap": "1.5rem",
"progress-sticky-top": "1rem"
},
"preview": {
"pane-width": "50%",
"min-width": "320px"
},
"animation": {
"check-pop": "200ms cubic-bezier(0.34, 1.56, 0.64, 1)",
"section-collapse": "300ms ease-out"
}
}
Success Metrics
| Metric | v1 | v2 Target | How to Measure |
|---|---|---|---|
| Brief completion rate | N/A | >80% | Track starts vs completions |
| Generation-to-publish | 3 days | <24h | Time from generate to publish |
| Struggle score avg | N/A | >75 | Pipeline output quality |
| User satisfaction | N/A | Qualitative | Matt's "sounds like me" test |
Open Questions (For Matt)
- Priority: Is this P0 (blocks publishing) or P1 (improves quality)?
- Timeline: When do you want v2 live?
- Fallback: Should v1 Magic Wand remain accessible during transition?
Location: /home/hoffmann_admin/.openclaw/workspace-daedalus/content-pipeline-v2-frontend-response.md
Status: Awaiting API contracts from Socrates + answers to open questions