janpeter/Scrum4Me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(landing): v3 — van idee tot pull request, met procesflow + Idea-laag

Browse source 
Verbreedt de landing-propositie van "executie lokaal" (v2) naar de
volledige cyclus idee → grill → plan → execute → PR. Eert M12 Ideas dat
sinds 2026-05-04 het kernconcept van het product is, plus auto-PR en
Sync-tab.

Hero:
- H1 "Van idee tot pull request — op je eigen hardware."
- Subhead benoemt grill→plan→materialise→agent→PR-cyclus en houdt het
  lokaal-anker uit v2 vast.

Nieuw §3 "Van idee tot pull request":
- 4 procesflow-kaarten (Idee/Grill/Plan/Execute) met status-chips
  (DRAFT/GRILLING/PLAN_READY/DONE→PR) en pijlen tussen kaarten op md+.
- Samenvattende paragraaf over state-machine, materializeIdeaPlanAction
  en auto-PR.

Architectuur:
- docs/diagrams/architecture.mmd Worker-label uitgebreid met
  "jobs: GRILL · PLAN · IMPL"; beide SVG's geregenereerd.
- Callout "Lokale worker" benoemt nu de drie jobsoorten expliciet.

Feature-grid (set D, 6 kaarten):
- Vervang "Hiërarchisch plannen" door "Ideas — Grill & Plan" op positie 1.
- Lokale Claude-agents: + auto-PR/SQUASH-merge zin.
- Realtime updates: + Sync-tab zin.
- Async vraagkanaal: + Grill-vragen zin.

Quickstart:
- Extra regel over UI-route (/ideas → Nieuw idee → Grill me) onder de
  bestaande MCP-installatie code-block.

Scrum-samenvatting:
- Hiërarchie wordt twee-rij-systeem: Idea (DRAFT → GRILLED → PLAN_READY)
  als bovenste rij, daaronder Product → PBI → Story → Taak met
  "materialiseert ↓"-pijl.
- Terminologie krijgt 2 nieuwe tegels (Idea, Grill/Plan).

Handleiding (10 → 12 stappen):
- Nieuwe stappen 3-5 voor Idea-route (vastleggen, grillen, plan + materialiseren),
  visueel gemarkeerd met tertiary-border en chip "Idea-route".
- Oude 7+8 (token + MCP-koppeling) samengevoegd tot stap 10.
- Stap 11 uitgebreid met Sync-tab-volgen.
- Stap 6 hernoemd "opbouwen" → "finetunen".

Plan-doc + grilling-context vastgelegd in docs/plans/landing-v3-idea-flow.md.

Tracked: ST-1224 onder PBI Marketing & Landingspagina.

Verified: lint 0 errors / 7 warnings (alle pre-existing), 564/564 tests,
productie-build slaagt.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Janpeter Visser 2026-05-06 08:58:24 +02:00
parent 6ce12dfd59
commit 4ec8005c96
6 changed files with 333 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

196
app/page.tsx
View file

@ -82,12 +82,13 @@ export default async function LandingPage() {
<section className="bg-primary-container px-6 py-16 text-center">
<div className="max-w-2xl mx-auto space-y-4">
<h1 className="text-3xl font-semibold text-primary-container-foreground">
Plannen in de cloud. Uitvoeren op je eigen machine.
Van idee tot pull request — op je eigen hardware.
</h1>
<p className="text-base text-primary-container-foreground/80 leading-relaxed">
De UI draait op Vercel, je code draait op jou. Een gedeelde job-queue laat lokale
Claude Code agents (laptop, NAS of VM) stories autonoom oppakken — zonder dat je
broncode ooit de cloud hoeft te raken.
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.
</p>
<div className="flex gap-3 justify-center pt-2">
<Link
@ -118,6 +119,85 @@ export default async function LandingPage() {
</div>
</section>
{/* ── Van idee tot PR ────────────────────────────────────────── */}
<section className="px-6 py-14 bg-background border-b border-border">
<div className="max-w-6xl mx-auto">
<h2 className="text-xl font-semibold mb-2">Van idee tot pull request</h2>
<p className="text-muted-foreground text-sm mb-10 max-w-2xl">
Vier stappen, één queue. Een idee groeit uit tot gemergde code zonder dat jij ertussen
hoeft.
</p>
<div className="grid grid-cols-1 md:grid-cols-[1fr_auto_1fr_auto_1fr_auto_1fr] gap-4 items-stretch">
{[
{
step: '1',
title: 'Idee',
chip: 'DRAFT',
chipClass: 'bg-tertiary-container text-tertiary-container-foreground',
desc: 'Leg een idee vast in twee zinnen. Status: DRAFT.',
},
{
step: '2',
title: 'Grill',
chip: 'GRILLING',
chipClass: 'bg-warning-container text-warning-container-foreground',
desc: 'Claude stelt kritische vragen via het belicoon; je antwoorden vormen de grill_md.',
},
{
step: '3',
title: 'Plan',
chip: 'PLAN_READY',
chipClass: 'bg-success-container text-success-container-foreground',
desc: 'Claude schrijft een YAML-plan. Materialiseer en je hebt PBI + stories + tasks.',
},
{
step: '4',
title: 'Execute',
chip: 'DONE → PR',
chipClass: 'bg-primary-container text-primary-container-foreground',
desc: 'Lokale agent claimt de jobs, commit, pusht en opent automatisch een PR.',
},
].flatMap((s, i, arr) => {
const card = (
<div
key={s.step}
className="bg-surface-container-low border border-border rounded-xl p-5 space-y-3 flex flex-col"
>
<div className="flex items-center gap-2">
<div className="shrink-0 w-7 h-7 rounded-full bg-primary text-primary-foreground text-sm font-semibold flex items-center justify-center">
{s.step}
</div>
<div className="text-sm font-medium text-primary">{s.title}</div>
<span className={`text-[10px] font-mono font-semibold px-1.5 py-0.5 rounded ${s.chipClass}`}>
{s.chip}
</span>
</div>
<p className="text-sm text-muted-foreground leading-relaxed">{s.desc}</p>
</div>
)
if (i === arr.length - 1) return [card]
return [
card,
<div
key={`${s.step}-arrow`}
className="hidden md:flex items-center justify-center text-muted-foreground text-2xl"
>
→
</div>,
]
})}
</div>
<p className="text-sm text-muted-foreground leading-relaxed max-w-3xl mt-8">
State-machine: <code className="font-mono text-xs bg-surface-container px-1 rounded">DRAFT → GRILLING → GRILLED → PLANNING → PLAN_READY → PLANNED</code>.
Bij materialiseren ontstaat in één atomaire transactie precies één PBI met N stories en M taken
uit het YAML-plan. Op de laatste taak van de laatste story pusht de worker automatisch een
branch en opent of mergt een pull request — geen handwerk meer tussen plan en deploy.
</p>
</div>
</section>
{/* ── Architectuur ───────────────────────────────────────────── */}
<section id="architectuur" className="px-6 py-14 bg-background border-b border-border">
<div className="max-w-4xl mx-auto">
@ -161,7 +241,7 @@ export default async function LandingPage() {
},
{
title: 'Lokale worker',
desc: 'Jouw machine — laptop, NAS of VM. Claude Code via stdio-MCP, claimt jobs atomisch (FOR UPDATE SKIP LOCKED), executeert lokaal, commit lokaal, push lokaal. Meerdere workers parallel veilig.',
desc: 'Jouw machine — laptop, NAS of VM. Claude Code via stdio-MCP, claimt jobs atomisch (FOR UPDATE SKIP LOCKED), executeert lokaal, commit lokaal, push lokaal. Doet drie soorten jobs: bevragen van een idee (GRILL), plan-generatie (PLAN), taak-implementatie (IMPL) — allemaal op dezelfde machine. Meerdere workers parallel veilig.',
},
{
title: 'GitHub',
@ -267,8 +347,8 @@ export default async function LandingPage() {
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{[
{
title: 'Hiërarchisch plannen',
desc: 'Organiseer werk in producten, Product Backlog Items, stories en taken — gegroepeerd op prioriteit en herrangschikbaar via drag-and-drop.',
title: 'Ideas — Grill & Plan',
desc: 'Leg een idee vast in twee zinnen. Claude grilt het met kritische vragen, schrijft een YAML-plan en zet ’t om in PBI + stories + tasks. Alles via een job-queue, asynchroon.',
},
{
title: 'Sprint Board + Solo Paneel',
@ -276,15 +356,15 @@ export default async function LandingPage() {
},
{
title: 'Lokale Claude-agents',
desc: 'Een job-queue met "Voer uit"-knop. Lokale Claude Code agents claimen werk atomisch, draaien het op jouw hardware en rapporteren status terug. Meerdere workers (laptop + NAS) parallel veilig.',
desc: 'Een job-queue met "Voer uit"-knop. Lokale Claude Code agents claimen werk atomisch, draaien het op jouw hardware en rapporteren status terug. Na de laatste task pusht de worker automatisch en opent een pull request via SQUASH-merge. Meerdere workers (laptop + NAS) parallel veilig.',
},
{
title: 'Realtime updates',
desc: 'SSE bovenop Postgres LISTEN/NOTIFY. Wijzigingen vanuit andere tabs of een lokale agent verschijnen binnen 1–2 seconden in je Solo Paneel — geen refresh.',
desc: 'SSE bovenop Postgres LISTEN/NOTIFY. Wijzigingen vanuit andere tabs of een lokale agent verschijnen binnen 1–2 seconden in je Solo Paneel — geen refresh. De Sync-tab toont per idee de live status van story → push → PR-merge.',
},
{
title: 'Async vraagkanaal',
desc: 'Loopt een agent vast op een keuze? Hij plaatst een vraag via het bel-icoon. Jij beantwoordt hem wanneer het uitkomt; de agent pakt automatisch de draad weer op.',
desc: 'Loopt een agent vast op een keuze? Hij plaatst een vraag via het bel-icoon. Jij beantwoordt hem wanneer het uitkomt; de agent pakt automatisch de draad weer op. Tijdens een Grill stelt Claude vragen via hetzelfde kanaal — antwoorden komen direct terug in de Idea-timeline.',
},
{
title: "Todo's",
@ -317,6 +397,11 @@ cd scrum4me-mcp && npm install
# 3. Start Claude Code en vraag:
# "pak de volgende job uit de Scrum4Me-queue"`}</code>
</pre>
<p className="text-sm text-muted-foreground leading-relaxed max-w-2xl mb-3">
Liever in de UI beginnen? Open <code className="font-mono text-xs bg-surface-container px-1 rounded">/ideas</code>,
druk op &quot;Nieuw idee&quot; en klik &quot;Grill me&quot; — de eerste vraag verschijnt
binnen seconden in je belicoon.
</p>
<p className="text-sm text-muted-foreground leading-relaxed max-w-2xl">
Liever zonder MCP? Gebruik de{' '}
<a href="#api" className="text-primary hover:underline">REST API met een Bearer-token</a>
@ -337,6 +422,21 @@ cd scrum4me-mcp && npm install
{/* Hiërarchie */}
<div className="mb-10">
<h3 className="text-sm font-semibold text-foreground mb-4 uppercase tracking-wide">Hiërarchie</h3>
{/* Idee-laag */}
<div className="mb-3">
<div className="bg-tertiary-container border border-tertiary/20 rounded-lg px-4 py-2.5 inline-block">
<div className="text-sm font-medium text-tertiary-container-foreground">Idea</div>
<div className="text-xs text-tertiary-container-foreground/70 leading-tight mt-0.5">
DRAFT → GRILLED → PLAN_READY
</div>
</div>
<div className="text-muted-foreground text-xs mt-1 ml-4">
↓ <span className="italic">materialiseert naar</span>
</div>
</div>
{/* Scrum-laag */}
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-2">
{[
{ label: 'Product', sub: 'Een softwareproject of codebase' },
@ -362,6 +462,8 @@ cd scrum4me-mcp && npm install
<h3 className="text-sm font-semibold text-foreground mb-4 uppercase tracking-wide">Terminologie</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
{[
{ term: 'Idea', def: 'Een voorstel of richting voordat ’t een PBI is. Heeft een grill-fase (Claude bevraagt ’t kritisch) en een plan-fase (Claude schrijft een YAML-plan met stories en tasks). Na materialiseren ontstaat exact één PBI.' },
{ term: 'Grill / Plan', def: 'Twee asynchrone Claude-jobsoorten op een idea. Grill produceert grill_md (Q&A-transcript). Plan produceert plan_md (YAML met PBI/stories/tasks-templates) dat strikt geparseerd wordt.' },
{ term: 'Product Backlog', def: 'Geordende lijst van alle PBI\'s per product, gesorteerd op prioriteit (kritiek → laag) en positie.' },
{ term: 'Sprint', def: 'Actief tijdblok met een Sprint Goal. Per product is er maximaal één actieve Sprint tegelijk.' },
{ term: 'Sprint Backlog', def: 'De stories die voor deze Sprint zijn geselecteerd. Stories worden vanuit de Product Backlog gesleept.' },
@ -417,59 +519,97 @@ cd scrum4me-mcp && npm install
step: '1',
title: 'Account aanmaken',
desc: 'Ga naar Registreren en kies een gebruikersnaam en wachtwoord. Na registratie word je direct doorgestuurd naar het dashboard. Liever passwordless? Paar je telefoon één keer en log voortaan in via QR. Of test eerst met de demo-account (alleen leesrechten).',
ideaRoute: false,
},
{
step: '2',
title: 'Product aanmaken',
desc: 'Klik op "Nieuw product" op het dashboard. Vul naam, optionele beschrijving, repo-URL en je Definition of Done in. Het product wordt zichtbaar op het dashboard.',
ideaRoute: false,
},
{
step: '3',
title: 'Product Backlog opbouwen',
desc: 'Open het product en voeg PBI\'s toe via het linkerpaneel. Geef elk PBI een prioriteit (Kritiek / Hoog / Gemiddeld / Laag). Klik op een PBI om in het rechterpaneel stories toe te voegen. Versleep PBI\'s en stories om de volgorde aan te passen.',
title: 'Een idee vastleggen',
desc: 'Open /ideas, klik "Nieuw idee", vul titel + één-alinea beschrijving in. Status: DRAFT.',
ideaRoute: true,
},
{
step: '4',
title: 'Sprint starten',
desc: 'Klik op "Sprint starten" op de productpagina en voer een Sprint Goal in. Per product is er maximaal één actieve Sprint tegelijk. Het Sprint-scherm wordt zichtbaar via de navigatie.',
title: 'Laat Claude grillen',
desc: 'Klik "Grill me". Een lokale agent stelt kritische vragen via het belicoon. Beantwoord ze; Claude schrijft een gestructureerde grill_md. Status: GRILLED.',
ideaRoute: true,
},
{
step: '5',
title: 'Sprint Board — stories slepen en taken aanmaken',
desc: 'Open het Sprint-scherm. Drie panelen verschijnen op één view: Product Backlog links, Sprint Backlog in het midden, taken rechts. Sleep stories vanuit links naar het midden om ze in de Sprint te plaatsen. Selecteer een story in het middenpaneel om de taken rechts te tonen en aan te maken.',
title: 'Maak het plan + materialiseer',
desc: 'Klik "Make plan". Claude genereert een YAML-plan (PBI + stories + tasks). Klik "Materialiseer" om ’t atomair om te zetten naar je product-backlog. Status: PLANNED.',
ideaRoute: true,
},
{
step: '6',
title: 'Solo Paneel — claim stories en werk persoonlijk',
desc: 'Open Solo via de navigatie. Claim openstaande stories uit de actieve Sprint (knop "Toon openstaande stories") en werk je taken af in drie statuskolommen via drag-and-drop. Klik op een taak voor het detail-dialoog met implementatieplan.',
title: 'Product Backlog finetunen',
desc: 'Optioneel: herorden PBI\'s en stories handmatig via drag-and-drop. Het meeste werk heeft materialise al gedaan — dit is alleen voor bijsturen of toevoegen van werk dat niet uit een idee komt.',
ideaRoute: false,
},
{
step: '7',
title: 'API-token aanmaken',
desc: 'Ga naar Instellingen → Tokens. Maak een nieuw token aan en kopieer de waarde direct — die is daarna niet meer zichtbaar. Hetzelfde token werkt voor de MCP-server én voor de REST API.',
title: 'Sprint starten',
desc: 'Klik op "Sprint starten" op de productpagina en voer een Sprint Goal in. Per product is er maximaal één actieve Sprint tegelijk. Het Sprint-scherm wordt zichtbaar via de navigatie.',
ideaRoute: false,
},
{
step: '8',
title: 'Claude Code koppelen',
desc: 'Aanbevolen: installeer de scrum4me-mcp-server (zie Quickstart hierboven) zodat Claude Code de Scrum4Me-tools native ziet. Alternatief: gebruik de REST API direct vanuit Codex, eigen scripts of CI-pipelines met je Bearer-token.',
title: 'Sprint Board — stories slepen en taken aanmaken',
desc: 'Open het Sprint-scherm. Drie panelen verschijnen op één view: Product Backlog links, Sprint Backlog in het midden, taken rechts. Sleep stories vanuit links naar het midden om ze in de Sprint te plaatsen. Selecteer een story in het middenpaneel om de taken rechts te tonen en aan te maken.',
ideaRoute: false,
},
{
step: '9',
title: 'Story laten uitvoeren — "Voer uit"-knop',
desc: 'Klik op "Voer uit" bij een story in het Solo Paneel. De story komt in de job-queue. Een lokale Claude-agent op je machine pakt \'m op via wait_for_job, werkt het implementatieplan af, commit naar je repo en zet de status op done. De NavBar toont live hoeveel workers actief zijn.',
title: 'Solo Paneel — claim stories en werk persoonlijk',
desc: 'Open Solo via de navigatie. Claim openstaande stories uit de actieve Sprint (knop "Toon openstaande stories") en werk je taken af in drie statuskolommen via drag-and-drop. Klik op een taak voor het detail-dialoog met implementatieplan.',
ideaRoute: false,
},
{
step: '10',
title: 'Claude Code koppelen',
desc: 'Maak een API-token aan in Instellingen → Tokens — hetzelfde token werkt voor MCP en REST. Aanbevolen: installeer de scrum4me-mcp-server (zie Quickstart hierboven) zodat Claude Code de tools native ziet. Alternatief: gebruik de REST API direct vanuit Codex, eigen scripts of CI-pipelines.',
ideaRoute: false,
},
{
step: '11',
title: 'Voer uit + Sync-tab volgen',
desc: 'Klik op "Voer uit" bij een story in het Solo Paneel. De story komt in de job-queue. Een lokale agent claimt de jobs, werkt taken af, commit en — na de laatste task — pusht en mergt automatisch een PR via SQUASH. Volg de voortgang in de Sync-tab op het idea-detail.',
ideaRoute: false,
},
{
step: '12',
title: 'Sprint afronden',
desc: 'Klik op "Sprint afronden" op het Sprint Board. Voor elke story kies je: markeer als Done of zet terug naar de Product Backlog. Daarna is een nieuwe Sprint aanmaakbaar.',
ideaRoute: false,
},
].map(({ step, title, desc }) => (
<div key={step} className="flex gap-4 bg-surface-container-low border border-border rounded-xl p-5">
<div className="shrink-0 w-8 h-8 rounded-full bg-primary text-primary-foreground text-sm font-semibold flex items-center justify-center">
].map(({ step, title, desc, ideaRoute }) => (
<div
key={step}
className={`flex gap-4 bg-surface-container-low border rounded-xl p-5 ${
ideaRoute ? 'border-l-4 border-l-tertiary border-y-border border-r-border' : 'border-border'
}`}
>
<div
className={`shrink-0 w-8 h-8 rounded-full text-sm font-semibold flex items-center justify-center ${
ideaRoute ? 'bg-tertiary text-tertiary-foreground' : 'bg-primary text-primary-foreground'
}`}
>
{step}
</div>
<div className="space-y-1">
<div className="text-sm font-medium">{title}</div>
<div className="text-sm font-medium flex items-center gap-2">
{title}
{ideaRoute && (
<span className="text-[10px] font-mono font-semibold px-1.5 py-0.5 rounded bg-tertiary-container text-tertiary-container-foreground">
Idea-route
</span>
)}
</div>
<div className="text-sm text-muted-foreground leading-relaxed">{desc}</div>
</div>
</div>

1
docs/INDEX.md
View file

@ -43,6 +43,7 @@ Auto-generated on 2026-05-06 from front-matter and headings.
| [Docs-restructuur — geoptimaliseerd voor AI-lookup](./plans/docs-restructure-ai-lookup.md) | proposal | 2026-05-02 |
| [PBI Bulk-Create Spec — Docs-Restructure for AI-Optimized Lookup](./plans/docs-restructure-pbi-spec.md) | done | 2026-05-03 |
| [Landing v2 — lokaal & veilig + architectuurdiagram](./plans/landing-local-first.md) | active | 2026-05-03 |
| [Landing v3 — van idee tot pull request](./plans/landing-v3-idea-flow.md) | active | 2026-05-04 |
| [M10 — Password-loze inlog via QR-pairing](./plans/M10-qr-pairing-login.md) | active | 2026-05-03 |
| [M11 — Claude vraagt, gebruiker antwoordt](./plans/M11-claude-questions.md) | active | 2026-05-03 |
| [M12 — Idea entity + Grill/Plan Claude jobs](./plans/M12-ideas.md) | planned | — |

2
docs/diagrams/architecture.mmd
View file

@ -13,7 +13,7 @@ flowchart LR
subgraph Yours["Jouw kant (lokaal)"]
direction TB
Worker["Lokale worker<br/>laptop / NAS / VM<br/>Claude Code + MCP"]
Worker["Lokale worker<br/>laptop / NAS / VM<br/>Claude Code + MCP<br/>jobs: GRILL · PLAN · IMPL"]
GitHub[("GitHub<br/>jouw repo")]
Worker -->|git push| GitHub
end

161
docs/plans/landing-v3-idea-flow.md Normal file
View file

@ -0,0 +1,161 @@
---
title: "Landing v3 — van idee tot pull request"
status: active
audience: [maintainer, contributor]
language: nl
last_updated: 2026-05-04
applies_to: [SCRUM4ME]
story_id: cmot8226500017h174z5qpphx
story_code: ST-1224
pbi_id: cmoq2q50s0000qa174rmrjove
---
# Landing v3 — van idee tot pull request
**Story:** [ST-1224](../../docs/INDEX.md). 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
```bash
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).

2
public/diagrams/architecture-dark.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 49 KiB

After

Width:  |  Height:  |  Size: 48 KiB

Before After
Before After

2
public/diagrams/architecture-light.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 48 KiB

Before After
Before After