Journey-Visualizer — a /launch-your-agent kickoff prompt

/launch-your-agent

Build goal: launch an agent whose v0 deliverable is a SELF-CONTAINED, RUNNABLE WEB PROTOTYPE
— a "generated interface" — that visualizes my product's user journeys and demonstrates how we
A/Z-test parts of the funnel. v0 is FRONT-END ONLY, seeded entirely with realistic dummy data
that looks like a live system. No backend, no live data, no scheduling, no connectors for v0 — if a
clock/connector would help, propose it as v1 at wrap-up. I've pre-answered your interview below;
only ask back if something here genuinely blocks the build. The "Definition of Done" at the bottom
is your grading rubric — build, self-grade against it, iterate until it passes, then hand me the
run command.

== THE PRODUCT IN ONE LINE ==
An interactive "map of how our funnel actually works" that anyone can read and edit, and that
shows — as stacked parallel layers — the competing variants we're testing at any given step, each
with its own live test metrics.

== THE REAL SYSTEM TO VISUALIZE (make the dummy data faithful to THIS, not a generic SaaS) ==
This visualizes my actual product, ClientsFlow — a GHL + AI sales pipeline that takes a cold lead
to a paid, built website. Mirror these REAL stages and flows.

Pipeline spine:
  New Lead → Appt Booked → Prepared → Proposal Sent → Prepayment → Waiting for Dev →
  Website Built → Fully Paid → Handed Over → WON   (branches: No Show, Ghosted, OFF/Lost)

The board it mirrors (11 columns): 🚫 Negative Replies · New lead · Contacted–No Appointment ·
Booked / Sales-Call Prep · Sales Call / Proposal · Sign FUP · Proposal Signed / Fizetés FUP ·
Payment Arrived / Adatbekérő FUP · 🏗 Ongoing build · 📈 Ongoing marketing · 👻 Ghosted

The journeys (the editable flows on the map) — 13, abbreviated:
  J1 Inbound email → AI classifies (positive→lead / negative→goodbye) → AI drafts reply →
     human approves & sends  *(human gate)*
  J3 New lead → enrichment + website scrape → AI extracts business/legal fields
  J4 Book the sales call — branch: lead self-books via calendar  vs  rep books manually
  J5 Appt booked → pre-call prep → Google Meet call (Fireflies records)
  J6 Post-call → AI pre-fills a form — branch: 2nd discovery call  vs  straight to proposal
  J7 Proposal generated (PandaDoc + Stripe link) → AI drafts HU follow-up →
     human edits & sends  *(human gate)*
  J8 Signature + payment — branch: paid  vs  abandoned-cart chase  vs  proposal-FUP-until-signed
  J9 Onboarding (client portal, RFI) → move to Waiting-for-Dev
  J10 Dev builds — branch: full-prepay  vs  partial (balance Stripe link)
  J11 Handover → review request → WON
  J12 No-show / ghost — branch: rebook  vs  3–6-touch manual FUP  vs  OFF/Lost
  J13 Weekly AI self-learning review (human approves prompt changes)
Visibly mark every human-gate step (our invariant: nothing reaches a lead without a human click).

(If you want to ground deeper, the repo has the source of truth — read docs/user_journeys.md,
plans/bnf-finish-2026-06-24/EBO.md, app/journey_map.py, and app/config.py GHL_STAGES. But the
model above is enough to seed v0.)

== THE TWO A/Z EXPERIMENTS THAT MUST SHIP (the showcase) ==
Each is one funnel step with several competing variants under test; in the 3D view they fan out as
parallel stacked layers, each layer carrying its own metric card.

① Cold-email versions (on the J1 first-touch / reply step): 3–4 variants, e.g.
   A "kérdés a weboldalukról" (curiosity) · B "3 dolog amit a [cég] oldalán láttunk" (audit hook) ·
   C rövid + erős CTA · D social-proof nyitás.
   Metrics/variant: sent (n) · open-rate · reply-rate · POSITIVE-reply rate · booked-call rate.

② Proposal layouts / PDFs (on the J7 proposal step): 3 variants —
   A ár-először · B esettanulmány-először · C videó-beágyazott.
   Metrics/variant: sent (n) · opened · avg time-on-doc · SIGNED rate · deposit-paid rate.

== THE THREE VIEWS ==
1. 2D mind-map (default): the journeys as an auto-laid-out node graph (steps=nodes, flows=edges,
   branches fork); pan/zoom/mini-map; nodes with variants wear a small "⚗ N variants" badge.
2. Editable workflow view: same canvas, fully editable — drag nodes, rewire edges, double-click to
   rename, a "+" on an edge to insert a step, a right-side panel to edit a node, delete/undo. This
   is the "truly intuitive" editing the product is about.
3. 3D parallel-layers view: click a variant-badged node (or a global "3D" toggle) → the view tilts
   and that node's variants fan out into stacked parallel planes floating above the base step; each
   plane shows the variant name + its metric card. A flat "table" toggle is always available as the
   source of truth for the numbers.

== THE AGENT-PROPOSES-A-VARIANT MOMENT (mocked for v0) ==
Add a "✦ Ask AI to propose a variant" button on a node. Clicking drops in a GHOST layer (dashed,
semi-transparent) = an AI-suggested new variant with a one-line rationale + a mocked metric
projection + Accept / Edit / Reject. Accept turns it into a real layer. All mocked — nothing sends,
nothing goes live (respects our human-gate). This illustrates how agents will drive the A/Z tests.

== TECH (v0) ==
- Standalone React + Vite app (own folder; NOT wired into my backend).
- React Flow (xyflow, MIT) for the 2D map + editor; dagre for auto-layout.
- 3D layers via CSS 3D transforms (perspective + translateZ) + a tween lib (GSAP or Framer Motion)
  for the smooth 2D→fan-out transition — the cheap, crisp, accessible "2.5D" approach for v0.
  Leave a clean seam to swap in react-three-fiber later for true orbit.
- All data in flat local JSON (journeys.json, experiments.json) — renderable AND hand-editable; no
  network calls.

== DUMMY DATA ==
Believable, not lorem ipsum: real-sounding Hungarian lead names + companies (kft/ev/bt), funnel
counts that taper down the stages, A/Z metric numbers that are internally consistent (e.g. variant
B wins on positive-reply but a guardrail wobbles). Make it feel like a real Tuesday in the pipeline.

== DESIGN ==
Light theme ONLY (hard rule — never a dark variant). Clean, modern, confident; the 3D fan-out
should feel like a "wow". Hungarian-facing copy where the real funnel is Hungarian; UI chrome
can be English.

== DEFINITION OF DONE (grade yourself; iterate until ALL pass) ==
1. `npm install && npm run dev` boots a working app, no console errors.
2. 2D map renders the 13 journeys / 11-stage spine, auto-laid-out, pan/zoom/mini-map, human-gate
   steps visibly marked.
3. Editing works: drag, rewire, rename, "+"-insert, side panel, delete, undo.
4. A 3D / fan-out control tilts the view and stacks a node's variants as parallel layers, each with
   a metric card; a flat table toggle shows the same numbers.
5. Both demo experiments present (cold-email ×3–4, proposal-layout ×3) with consistent dummy
   metrics + a clear "winning" badge.
6. "Ask AI to propose a variant" produces a ghost layer with Accept/Edit/Reject (mocked).
7. Light theme; realistic dummy data; looks like a live product in a screen-share.
8. A short README: what it is, how to run it, where the dummy data lives, the seam for real-data
   wiring later.

== OUT OF SCOPE FOR v0 ==
Real backend/data, auth, real experiment stats, scheduling/cron, connectors, anything that sends to
a real lead. Propose those as v1 directions at wrap-up.