M4-B: Jess's track — Create page, performance tracking, insights dashboard

[0b00101111]

Context

Jess's half of the M4 split. Depends on #78 (scaffold + shared modules).
Sam is working on #79 (React islands) in parallel.

These are the form-driven pages — data entry, submission, and analytics.

Scope

1. Create Page (#35)

Page: pages/create.astro

• Creator profile form with fields:
  • Tone (text input)
  • Vocabulary (comma-separated → array)
  • Catchphrases (comma-separated → array)
  • Topics to avoid (comma-separated → array)
• Model selection dropdowns:
  • Reasoning model: populated from getProviders() → providers.reasoning
  • Video model: populated from getProviders() → providers.video, plus "Skip video" option
• Optional pipeline params (collapsed "Advanced" section):
  • Number of videos (default 100)
  • Number of scripts (default 50)
  • Number of personas (default 100)
  • Top N (default 10)
• Start button:
  • Validates required fields (tone is required, at least one catchphrase)
  • Calls startPipeline(req) from lib/api-client.ts
  • On success: redirect to /pipeline/{run_id}
  • On error: show error message inline
• Alternative: "Upload JSON" option — file input for creator_profile.json

2. Performance Tracking Page (#39)

Page: pages/track/[id].astro

• Loads run results from getPipelineResults(runId) to show which scripts were generated
• For each posted video, a form with:
  • Platform dropdown: TikTok / YouTube / Instagram
  • Post URL (text input)
  • Views, likes, comments, shares (number inputs)
  • Watch time avg (optional, seconds)
  • Completion rate (optional, 0-100%)
• Submit button calls submitPerformance(req) from lib/api-client.ts
• Show existing performance data for this run from getPerformance(runId)
• Success feedback: "Performance data saved" with checkmark

3. Insights Dashboard + Runs Page (#40)

Pages: pages/insights.astro, pages/runs.astro

Runs page:

• List of session's pipeline runs from listRuns(sessionId)
• Each run shows: run_id (truncated), status badge (pending/running/completed/failed), timestamp
• Links to /pipeline/{run_id} or /results/{run_id} depending on status

Insights page:

• Loads from getInsights() (currently returns placeholder data — that's fine)
• Layout prepared for:
  • Top patterns by performance (bar chart or table)
  • Committee prediction vs actual (scatter or comparison)
  • Improvement over iterations (line chart or table)
• Can use static placeholder data until the backend insights endpoint is fleshed out
• Chart library suggestion: lightweight option like Chart.js or just HTML tables for now

Dependencies

• M4-0: Astro scaffold + shared modules (foundation) #78 (scaffold + shared modules) — must merge first
• lib/api-client.ts — import all API functions from there
• Backend API endpoints — all already exist and are tested

Acceptance Criteria

• Create page form validates and submits successfully
• Model dropdowns populated from /api/providers
• Start button redirects to /pipeline/{run_id} on success
• Performance tracking form submits data correctly
• Existing performance data displays for a run
• Runs page lists session runs with correct status badges
• Insights page renders (even with placeholder data)
• All pages use BaseLayout.astro for consistent nav
• Forms show loading states during API calls
• Error states handled (API down, invalid input)

Suggested Order

#35 (create page) → #39 (performance) → #40 (insights/runs)

Create page is the entry point for the whole app — get it working first. Performance tracking and insights follow naturally.

Notes

• Session ID management: for now, generate a UUID on first visit and store in localStorage. Pass as query param to API calls.
• All API calls go through lib/api-client.ts — don't use raw fetch() in page components.