# 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

1. **Brief validation:** Return suggested improvements or just boolean?
2. **Style references:** Include excerpt/summary or just titles?
3. **Struggle score:** Can I request re-calculation without re-generating?
4. **Draft persistence:** Draft ID from backend or generate UUID frontend?

---

## Design Tokens v2 (Draft)

```json
{
  "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)

1. **Priority:** Is this P0 (blocks publishing) or P1 (improves quality)?
2. **Timeline:** When do you want v2 live?
3. **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