Scrum4Me/docs/plans/landing-v3-idea-flow.md

title	status	audience	language	last_updated	applies_to	story_id	story_code	pbi_id
Landing v3 — van idee tot pull request	active	maintainer contributor	nl	2026-05-04	SCRUM4ME	cmot8226500017h174z5qpphx	ST-1224	cmoq2q50s0000qa174rmrjove

Landing v3 — van idee tot pull request

Story: ST-1224. Vervolg op Landing v2 (lokaal-first, PR #72).

Branch: feat/landing-new-screenshots — gestart als screenshot-update, uitgebreid met de volledige v3-rewrite.

Context

Sinds Landing v2 (2026-05-03, commit 4ff50cb, op main via merge b47f629) is M12 — Ideas — geland en is het kernconcept van het product geworden:

• Nieuw /ideas-dashboard per user. Idea staat boven Product/PBI in de hiërarchie en is de manier waarop nieuw werk binnenkomt.
• State-machine: DRAFT → GRILLING → GRILLED → PLANNING → PLAN_READY → PLANNED (+ GRILL_FAILED, PLAN_FAILED recovery-paden).
• Twee nieuwe ClaudeJobKind's: IDEA_GRILL (Claude stelt kritische vragen via ask_user_question-loop) en IDEA_MAKE_PLAN (Claude genereert YAML-plan, geen vragen). Naast bestaande TASK_IMPLEMENTATION.
• materializeIdeaPlanAction is een atomaire transformatie: plan_md (YAML) → 1 PBI + N stories + M tasks.
• Job-flow voor IDEA_GRILL gebruikt het bestaande async vraagkanaal.

Daarnaast (kleiner maar zichtbaar):

• Auto-PR + auto-merge (SQUASH): na update_job_status('done') op de laatste task pusht de worker automatisch en opent/mergt een PR.
• Sync-tab: realtime overzicht van Story-status / ClaudeJob.pushed_at / Pbi.pr_url / pr_merged_at per Idea.
• Deploy-controle: labels skip-deploy / force-deploy overrulen path-filter.

User's eigen formulering (relevant voor toon): "het nadenken over een idee, plannen en dan laten uitvoeren. idee na idee kan omgezet worden in acties met resultaten".

Doelgroep

Ongewijzigd t.o.v. v2 (mix met zwaartepunt op privacy-bewuste indie devs en homelab-teams). De Idea-laag versterkt vooral de aantrekkingskracht voor solo-devs die "niet aan een ticket-fabriek willen".

Doel

1. Hero verbreden van "executie lokaal" naar volledige cyclus: idee → grill → plan → execute → PR.
2. Nieuwe sectie #3 "Van idee tot PR" vóór de architectuur-sectie — toont de procesflow (4 stappen).
3. Architectuur-diagram lichtjes uitbreiden met de Idea-job-kinds in de Worker-box.
4. Feature-grid herschikken: vervang "Hiërarchisch plannen" door "Ideas — Grill & Plan"; werk auto-PR in als bullet onder "Lokale Claude-agents".
5. Handleiding uitbreiden van 10 → 12 stappen met de Idea-route ervoor.
6. Quickstart ongewijzigd; één regel toevoegen over UI-route (/ideas).
7. Tour al gedaan (commit 6ce12df) — 6 echte screenshots in plaats van 3.

Sectievolgorde

#	Sectie	Wijziging
1	Header	ongewijzigd
2	Hero	rewrite — H1 + subhead verbreden
3	Van idee tot PR	nieuw — 4-stappen procesflow
4	Architectuur	diagram regenereren; callout-card "Lokale worker" tekst aanvullen
5	Tour (screenshots)	klaar (commit 6ce12df) — 6 figures
6	Wat is Scrum4Me?	feature-grid herschikt (set D)
7	Quickstart	+ één regel UI-route
8	Scrum in Scrum4Me	+ 2 termen (Idea, Grill/Plan) + twee-rij-hiërarchie
9	Gebruikershandleiding	10 → 12 stappen (Idea-route ervoor)
10	REST API	ongewijzigd
11	Footer	ongewijzigd

Sectie-detail

§2 Hero — rewrite

• H1: "Van idee tot pull request — op je eigen hardware."
• Subhead (~45 woorden): "Leg een idee vast, laat Claude het kritisch bevragen, accepteer het plan en zet het door een lokale agent uit. Code, executie en agents draaien op je eigen machine; alleen metadata loopt via Vercel + Neon. Idee na idee, automatisch omgezet in commits en pull requests."
• CTA's ongewijzigd: "Account aanmaken" + "Hoe het werkt" (anchor #architectuur).

§3 Van idee tot PR (nieuw)

Tussen Hero en Architectuur. Procesflow als 4 horizontaal geschakelde kaarten:

[1. Idee]  →  [2. Grill]  →  [3. Plan]  →  [4. Execute]
DRAFT         GRILLING       PLAN_READY    DONE → PR

Implementatie: grid grid-cols-1 md:grid-cols-4 gap-4 met tussen kaarten een → op hidden md:flex. MD3-tokens. Status-chips matchen de PATCH/POST-badges in de API-sectie.

Onder de 4 kaarten één paragraaf van ~3 zinnen die de state-machine, materializeIdeaPlanAction en auto-PR samenvat.

§4 Architectuur — diagram regenereren

docs/diagrams/architecture.mmd Worker-label uitbreiden:

Worker["Lokale worker
laptop / NAS / VM
Claude Code + MCP
jobs: GRILL · PLAN · IMPL"]

Daarna npm run diagrams om beide SVG's te regenereren.

Callout-card "Lokale worker" in app/page.tsx krijgt aanvullende zin: "Doet drie soorten jobs: bevragen van een idee (GRILL), plan-generatie (PLAN), taak-implementatie (IMPL). Allemaal op dezelfde machine."

§6 Feature-grid — set D (6 kaarten)

Vervang "Hiërarchisch plannen" door "Ideas — Grill & Plan" (nieuwe entry-point):

1. Ideas — Grill & Plan (nieuw)
2. Sprint Board + Solo Paneel
3. Lokale Claude-agents (uitbreiden — auto-PR)
4. Realtime updates (uitbreiden — Sync-tab)
5. Async vraagkanaal (uitbreiden — Grill-vragen)
6. Todo's

§7 Quickstart — kleine aanvulling

Onder de bestaande code-block één regel: "Liever in de UI beginnen? Open /ideas, druk op 'Nieuw idee' en klik 'Grill me' — de eerste vraag verschijnt binnen seconden in je belicoon."

§8 Scrum in Scrum4Me — terminologie + hiërarchie

Twee tegels toevoegen aan terminologie-grid: Idea en Grill / Plan.

Hiërarchie-rij wordt twee-rij-systeem:

• Bovenste rij: één tegel "Idea (DRAFT → GRILLED → PLAN_READY)" met "materialiseert ↓" pijl
• Onderste rij: bestaande Product → PBI → Story → Taak

§9 Handleiding — 10 → 12 stappen

1. Account aanmaken (+ QR-bijzin)
2. Product aanmaken
3. Een idee vastleggen (nieuw)
4. Laat Claude grillen (nieuw)
5. Maak het plan + materialiseer (nieuw)
6. Product Backlog finetunen (was: opbouwen)
7. Sprint starten
8. Sprint Board
9. Solo Paneel
10. Claude Code koppelen (token + MCP gecombineerd)
11. Voer uit + Sync-tab volgen
12. Sprint afronden

Stappen 3-5 markeren met visueel accent (border-l-4 border-primary of chip "Idea-route").

Bestanden

Wijzigen:

• app/page.tsx — Hero, nieuwe §3, callout in §4, feature-grid (§6), Quickstart-regel (§7), terminologie + hiërarchie (§8), handleiding (§9)
• docs/diagrams/architecture.mmd — Worker-label uitbreiden
• public/diagrams/architecture-light.svg + architecture-dark.svg — regenereren

Klaar (commit 6ce12df):

• public/screenshots/* — 6 nieuwe screenshots vervangen oude 3
• Tour-array in app/page.tsx

Verificatie

npm run diagrams           # regenereer SVG's
npm run dev                # http://localhost:3000 op 1024px+
npm run lint && npm test && npm run build

Niet pushen zonder bevestiging (CLAUDE.md hardstop).