Scrum4Me/CLAUDE.md
Janpeter Visser d292e445d9
Sprint: Verbeteren debug mode (#179)
* feat(PBI-49): add debugProps helper + Vitest test

Adds lib/debug.ts with debugProps(id, component, file) that returns
data-debug-id and data-debug-label attrs in dev mode, empty object in
production. Adds __tests__/lib/debug.test.ts covering both modes.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* docs(PBI-49): add debug-id pattern doc + CLAUDE.md reference

Adds docs/patterns/debug-id.md documenting the named-component boundary
rule (6 punten), helper-voorbeeld, skip-criteria en motivatie voor
handmatige pad-argumenten. Voegt verwijzing toe aan CLAUDE.md
patterns-tabel.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* refactor(PBI-49): migrate 17 shared/ components to debugProps helper

Replace hardcoded data-debug-id + data-debug-label attribute pairs with
{...debugProps(id, component, file)} spread in all 17 components/shared/
files. Existing debug-ids preserved unchanged.

* feat(PBI-49): add debugProps to backlog/, sprint/, solo/ components

* feat(PBI-49): add debugProps to jobs/ + ideas/ components

* feat(PBI-49): add debugProps to products/ + settings/ + notifications/ components

* feat(PBI-49): add debugProps to admin/ + dashboard/ + dialogs/ + mobile/ + split-pane/

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix(PBI-49): use attr(data-debug-id) for debug tooltip in globals.css

* refactor(PBI-49): remove data-debug-label from debugProps helper + test

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* refactor(PBI-49): strip unused component/file args from debugProps in shared/

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(PBI-49): add BEM sub-element data-debug-id to StatusBar, NavBar, PanelNavBar

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(PBI-49): add BEM sub-element data-debug-id to components/sprint/*

- new-sprint-dialog: __submit on submit button
- sprint-backlog: __list on SprintBacklogLeft + SprintBacklogRight scroll areas
- sprint-board-client: root wrapper div (display:contents) + __drag-overlay
- sprint-header: __title on goal button, __dates on dates button, __actions on action cluster
- sprint-run-controls: root on controls div, __start/__cancel on action buttons; __blockers-dialog on dialog content
- start-sprint-button: root on trigger button, __dialog on dialog content, __submit on submit button
- sync-active-sprint-cookie: no debug-id (returns null, side-effect only), comment added

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(PBI-49): add BEM sub-element data-debug-id to components/backlog/*

* feat(PBI-49): add BEM sub-element data-debug-id to components/ideas/*

* feat(PBI-49): add BEM sub-element data-debug-id to components/dashboard/* + components/markdown.tsx

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(PBI-49): add BEM sub-element data-debug-id to new-product-button

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(PBI-49): add BEM sub-element data-debug-id to components/solo/*

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(PBI-49): add BEM sub-elements to nav-status-indicators

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(PBI-49): add BEM sub-element data-debug-id to components/jobs/*

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(PBI-49): add BEM sub-element data-debug-id to components/products/*

* feat(PBI-49): add BEM sub-element data-debug-id to components/notifications/*

- answer-modal: __content (scroll area), __submit (footer)
- notifications-bridge: skip comment (bridge, non-rendering wrapper)
- notifications-realtime-mount: skip comment (returns null)
- notifications-sheet: __header, __items (questions list)
- push-toggle: __switch (button), __label (button text) on subscribed/unsubscribed states

* feat(PBI-49): add BEM sub-element data-debug-id to components/settings/*

- leave-product-button: root only (single-button component)
- min-quota-editor: __input (number input), __save (save button)
- profile-editor: __username (bio/short-description input), __save (submit)
- role-manager: __roles (checkbox list), __add (save button)
- token-manager: __tokens (active tokens list), __generate (create button)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(PBI-49): add BEM sub-element data-debug-id to admin, auth, dialogs, entity-dialog, mobile, split-pane

* docs(PBI-49): add debug-labels BEM pattern doc + CLAUDE.md entry

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-09 22:46:29 +02:00

6.2 KiB
Raw Blame History

title status audience language last_updated
CLAUDE.md — Scrum4Me active
ai-agent
nl 2026-05-08

CLAUDE.md — Scrum4Me

Desktop-first Scrum-app voor solo developers en kleine teams. Hiërarchie: product → PBI → story → taak. Zie README.md voor setup.


Orientatie

Bestand Waarvoor
docs/INDEX.md Gegenereerde index van alle docs — begin hier
docs/specs/functional.md Acceptatiecriteria, user flows
docs/architecture.md Breadcrumb → 6 topische arch-bestanden
docs/backlog/index.md Implementatievolgorde, "done when"-criteria
docs/api/rest-contract.md REST API contract voor Claude Code
docs/design/styling.md Lees vóór elk component — MD3-tokens, shadcn
docs/plans/<key>-*.md Implementatieplan per milestone
docs/adr/ Architecture Decision Records — tech-keuzes (base-ui vs Radix, sort-order, demo-policy, …)
docs/manual/ 7-delige gebruiks- en operationele handleiding (workflow, git, docker, troubleshooting)
docs/architecture/ 6 topische architecture-bestanden (data-model, auth, sprint-execution, …) — uitwerking van docs/architecture.md

Hoe werk vinden

Track A — MCP (aanbevolen):

  1. Branch aanmaken: git checkout -b feat/<batch-slug> — nog geen gh pr create
  2. mcp__scrum4me__get_claude_context → pak de next story
  3. Voer taken uit in sort_order; update status per taak
  4. Lees het relevante patroon en styling vóór je begint
  5. Verifieer: npm run verify && npm run buildverify = lint + typecheck + test
  6. Commit per laag: git add -A && git commitgeen git push — zie docs/runbooks/branch-and-commit.md
  7. Herhaal stap 26 per story; branch blijft dezelfde
  8. Queue leeg → git push -u origin <branch> + gh pr create

Track B — manueel:

  1. Lees taak in docs/backlog/index.md
  2. Zoek spec in docs/specs/functional.md
  3. Lees patroon + styling → bouw → verifieer → vraag bevestiging → commit

Volledige MCP-tool documentatie: docs/runbooks/mcp-integration.md


Hardstop regels

  • Styling: nooit bg-blue-500; altijd MD3-tokens (bg-primary, bg-status-done, …)
  • UI: gebruik @base-ui/react met render-prop, niet Radix asChild
  • Push: commits accumuleren lokaal per taak (git add -A && git commit); push + PR pas bij lege queue of na expliciete gebruikersbevestiging — zie branch-and-commit.md
  • Demo: drie lagen — proxy.ts + server action + UI disabled knop
  • Enum: DB UPPER_SNAKE ↔ API lowercase — uitsluitend via lib/task-status.ts
  • Foutcodes: 400 = parse-fout, 422 = Zod-validatie, 403 = demo-token
  • Server/client grens: *-server.ts bevat DB/node-only; nooit importeren in client component
  • Worker/jobs: ClaudeJob queue (QUEUED → CLAIMED → RUNNING → DONE|FAILED|SKIPPED); MCP-worker claimt via wait_for_job en sluit met update_job_status — zie worker-idempotency.md
  • Model/mode per ClaudeJob: kind-default → product → job-snapshot → task.requires_opus. Resolver in scrum4me-mcp/src/lib/job-config.ts (en gespiegeld in lib/job-config.ts) — zie job-model-selection.md
  • Deployment: npm run verify && npm run build vóór elke PR. Selectieve deploy-controle (labels + path-filter): zie docs/runbooks/deploy-control.md

Stack

Laag Technologie
Framework Next.js 16 (App Router) + React 19
Taal TypeScript strict
Styling Tailwind CSS + shadcn/ui + MD3 via app/styles/theme.css
State Zustand + dnd-kit
DB Prisma v7 + PostgreSQL (Neon)
Auth iron-session + bcryptjs
Test Vitest (__tests__/, config in vitest.config.ts)
Utilities Zod, Sonner, Sharp, Vercel Analytics

Patterns quickref

Patroon Bestand
iron-session docs/patterns/iron-session.md
Prisma singleton docs/patterns/prisma-client.md
Server Action (auth + Zod) docs/patterns/server-action.md
Route Handler (REST) docs/patterns/route-handler.md
Zustand optimistic update docs/patterns/zustand-optimistic.md
Float sort_order / drag-and-drop docs/patterns/sort-order.md
Proxy / route protection docs/patterns/proxy.md
QR-pairing docs/patterns/qr-login.md
Claude ↔ user vraagkanaal docs/patterns/claude-question-channel.md
Entity Dialog (verplicht) docs/patterns/dialog.md
Realtime NOTIFY-payload docs/patterns/realtime-notify-payload.md
Story met UI-component docs/patterns/story-with-ui-component.md
Web Push docs/patterns/web-push.md
Job-config resolver (PBI-67) lib/job-config.tsscrum4me-mcp/src/lib/job-config.ts
Debug-id op component-root docs/patterns/debug-id.md
Debug-labels (BEM) docs/patterns/debug-labels.md

Env vars

DATABASE_URL=""    # postgresql://...
DIRECT_URL=""      # pooler-bypass voor LISTEN/NOTIFY
SESSION_SECRET=""  # min 32 chars
CRON_SECRET=""     # Bearer-secret /api/cron/*

Volledig schema: lib/env.ts. Canonieke lijst: .env.example — bevat ook web-push (VAPID_*, INTERNAL_PUSH_SECRET), Sentry (SENTRY_*) en optioneel ANTHROPIC_API_KEY.


MCP & cron

  • MCP-server (extern): standalone Node-proces in ~/Development/scrum4me-mcp/ — Prisma-schema gesynced via sync-schema.sh. 30+ tools (get_claude_context, wait_for_job, update_task_status, …)
  • Cron (vercel.json):
    • /api/cron/expire-questions — dagelijks 04:00 UTC
    • /api/cron/cleanup-agent-artifacts — dagelijks 03:00 UTC
  • Realtime: SSE op /api/realtime/*, gevoed door PostgreSQL LISTEN/NOTIFY op kanaal scrum4me_changes (vereist DIRECT_URL voor pooler-bypass)

Scrum-terminologie

PBI (niet: Feature/Epic) · Story (niet: Ticket) · Sprint Goal (niet: Objective)


Verificatie

npm run verify && npm run build   # verify = lint + typecheck + test

Worker job-status protocol (wanneer DONE / SKIPPED / FAILED): zie docs/runbooks/worker-idempotency.md.