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>

components/products/archive-product-button.tsx

@@ -3,6 +3,7 @@
 import { useState, useTransition } from 'react'
 import { Button } from '@/components/ui/button'
 import { archiveProductAction } from '@/actions/products'
+import { debugProps } from '@/lib/debug'
 
 interface ArchiveProductButtonProps {
   productId: string
@@ -20,7 +21,7 @@ export function ArchiveProductButton({ productId }: ArchiveProductButtonProps) {
 
   if (confirming) {
     return (
-      <div className="flex gap-2 shrink-0">
+      <div className="flex gap-2 shrink-0" {...debugProps('archive-product-button', 'ArchiveProductButton', 'components/products/archive-product-button.tsx')}>
         <Button
           variant="destructive"
           size="sm"
@@ -47,6 +48,7 @@ export function ArchiveProductButton({ productId }: ArchiveProductButtonProps) {
       size="sm"
       className="shrink-0 border-error/40 text-error hover:bg-error/10"
       onClick={() => setConfirming(true)}
+      {...debugProps('archive-product-button', 'ArchiveProductButton', 'components/products/archive-product-button.tsx')}
     >
       Archiveren
     </Button>

components/products/auto-pr-toggle.tsx

@@ -4,6 +4,7 @@ import { useState, useTransition } from 'react'
 import { cn } from '@/lib/utils'
 import { updateAutoPrAction } from '@/actions/products'
 import { toast } from 'sonner'
+import { debugProps } from '@/lib/debug'
 
 interface AutoPrToggleProps {
   productId: string
@@ -27,13 +28,14 @@ export function AutoPrToggle({ productId, initialValue }: AutoPrToggleProps) {
   }
 
   return (
-    <div className="flex items-center gap-3">
+    <div className="flex items-center gap-3" {...debugProps('auto-pr-toggle', 'AutoPrToggle', 'components/products/auto-pr-toggle.tsx')}>
       <button
         type="button"
         role="switch"
         aria-checked={enabled}
         onClick={handleToggle}
         disabled={isPending}
+        data-debug-id="auto-pr-toggle__switch"
         className={cn(
           'relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent',
           'transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
@@ -49,7 +51,7 @@ export function AutoPrToggle({ productId, initialValue }: AutoPrToggleProps) {
           )}
         />
       </button>
-      <span className="text-sm text-foreground">Automatisch PR aanmaken na succesvolle agent-job</span>
+      <span className="text-sm text-foreground" data-debug-id="auto-pr-toggle__label">Automatisch PR aanmaken na succesvolle agent-job</span>
     </div>
   )
 }

components/products/edit-product-button.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react'
 import { Button } from '@/components/ui/button'
 import { DemoTooltip } from '@/components/shared/demo-tooltip'
 import { ProductDialog, type ProductDialogProduct } from '@/components/dialogs/product-dialog'
+import { debugProps } from '@/lib/debug'
 
 interface Props {
   product: ProductDialogProduct
@@ -16,7 +17,7 @@ export function EditProductButton({ product, isDemo = false, size = 'sm', varian
   const [open, setOpen] = useState(false)
 
   return (
-    <>
+    <span {...debugProps('edit-product-button', 'EditProductButton', 'components/products/edit-product-button.tsx')}>
       <DemoTooltip show={isDemo}>
         <Button
           variant={variant}
@@ -34,6 +35,6 @@ export function EditProductButton({ product, isDemo = false, size = 'sm', varian
         product={product}
         isDemo={isDemo}
       />
-    </>
+    </span>
   )
 }

components/products/pr-strategy-select.tsx

@@ -10,6 +10,7 @@ import {
   SelectItem,
   SelectTrigger,
 } from '@/components/ui/select'
+import { debugProps } from '@/lib/debug'
 
 interface PrStrategySelectProps {
   productId: string
@@ -46,9 +47,9 @@ export function PrStrategySelect({ productId, initialValue }: PrStrategySelectPr
   }
 
   return (
-    <div className="flex flex-col gap-2">
+    <div className="flex flex-col gap-2" {...debugProps('pr-strategy-select', 'PrStrategySelect', 'components/products/pr-strategy-select.tsx')}>
       <Select value={value} onValueChange={handleChange} disabled={isPending}>
-        <SelectTrigger className="w-full max-w-xl">
+        <SelectTrigger className="w-full max-w-xl" data-debug-id="pr-strategy-select__trigger">
           {STRATEGY_LABELS[value]}
         </SelectTrigger>
         <SelectContent>

components/products/product-form.tsx

@@ -6,6 +6,7 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
 import { cn } from '@/lib/utils'
+import { debugProps } from '@/lib/debug'
 
 type FieldErrors = Record<string, string[]>
 type ActionResult = { error?: string | FieldErrors; success?: boolean } | undefined
@@ -49,7 +50,7 @@ export function ProductForm({ action, submitLabel, defaultValues }: ProductFormP
   const globalError = getGlobalError(state?.error)
 
   return (
-    <form action={formAction} className="space-y-5">
+    <form action={formAction} className="space-y-5" {...debugProps('product-form', 'ProductForm', 'components/products/product-form.tsx')}>
       {defaultValues?.id && (
         <input type="hidden" name="id" value={defaultValues.id} />
       )}
@@ -82,6 +83,7 @@ export function ProductForm({ action, submitLabel, defaultValues }: ProductFormP
             defaultValue={defaultValues?.name}
             placeholder="bijv. DevPlanner"
             className={fieldError('name') ? 'border-error' : ''}
+            data-debug-id="product-form__name"
           />
           {fieldError('name') && (
             <p className="text-xs text-error">{fieldError('name')}</p>
@@ -117,6 +119,7 @@ export function ProductForm({ action, submitLabel, defaultValues }: ProductFormP
           defaultValue={defaultValues?.repo_url ?? ''}
           placeholder="https://github.com/..."
           className={fieldError('repo_url') ? 'border-error' : ''}
+          data-debug-id="product-form__repo"
         />
         {fieldError('repo_url') && (
           <p className="text-xs text-error">{fieldError('repo_url')}</p>
@@ -147,7 +150,7 @@ export function ProductForm({ action, submitLabel, defaultValues }: ProductFormP
         </div>
       )}
 
-      <div className="flex gap-3 pt-1">
+      <div className="flex gap-3 pt-1" data-debug-id="product-form__submit">
         <SubmitButton label={submitLabel} />
       </div>
     </form>

components/products/team-manager.tsx

@@ -4,6 +4,7 @@ import { useActionState, useState, useTransition } from 'react'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { addProductMemberAction, removeProductMemberAction } from '@/actions/products'
+import { debugProps } from '@/lib/debug'
 
 interface Member {
   id: string
@@ -29,11 +30,11 @@ export function TeamManager({ productId, members }: TeamManagerProps) {
   }
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-4" {...debugProps('team-manager', 'TeamManager', 'components/products/team-manager.tsx')}>
       {members.length === 0 ? (
         <p className="text-sm text-muted-foreground">Nog geen teamleden toegevoegd.</p>
       ) : (
-        <ul className="space-y-2">
+        <ul className="space-y-2" data-debug-id="team-manager__members">
           {members.map(m => (
             <li key={m.id} className="flex items-center justify-between gap-3 rounded-lg bg-surface-container px-3 py-2">
               <span className="text-sm font-medium text-foreground">{m.username}</span>
@@ -51,7 +52,7 @@ export function TeamManager({ productId, members }: TeamManagerProps) {
         </ul>
       )}
 
-      <form action={formAction} className="flex gap-2">
+      <form action={formAction} className="flex gap-2" data-debug-id="team-manager__invite">
         <input type="hidden" name="productId" value={productId} />
         <Input
           name="username"