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/admin/jobs-table.tsx

@@ -12,6 +12,7 @@ import {
   TableRow,
 } from '@/components/ui/table'
 import { cancelJobAction, deleteJobAction } from '@/actions/admin/jobs'
+import { debugProps } from '@/lib/debug'
 
 type Job = {
   id: string
@@ -100,7 +101,7 @@ function JobRow({ job }: { job: Job }) {
 
 function StatusTable({ jobs }: { jobs: Job[] }) {
   return (
-    <Table>
+    <Table data-debug-id="admin-jobs-table__table">
       <TableHeader>
         <TableRow>
           <TableHead>ID</TableHead>
@@ -171,7 +172,7 @@ function CostRow({ job }: { job: Job }) {
 
 function CostsTable({ jobs }: { jobs: Job[] }) {
   return (
-    <Table>
+    <Table data-debug-id="admin-jobs-table__table">
       <TableHeader>
         <TableRow>
           <TableHead>ID</TableHead>
@@ -203,8 +204,8 @@ export function JobsTable({ jobs }: { jobs: Job[] }) {
   const [view, setView] = useState<'status' | 'costs'>('status')
 
   return (
-    <div className="space-y-3">
-      <div className="flex gap-1">
+    <div className="space-y-3" {...debugProps('admin-jobs-table', 'JobsTable', 'components/admin/jobs-table.tsx')}>
+      <div className="flex gap-1" data-debug-id="admin-jobs-table__header">
         <Button
           size="sm"
           variant={view === 'status' ? 'default' : 'outline'}

components/admin/products-table.tsx

@@ -21,6 +21,7 @@ import {
   TableRow,
 } from '@/components/ui/table'
 import { adminArchiveProductAction, adminDeleteProductAction } from '@/actions/admin/products'
+import { debugProps } from '@/lib/debug'
 
 type Product = {
   id: string
@@ -78,8 +79,8 @@ function DeleteDialog({ product }: { product: Product }) {
 
 export function ProductsTable({ products }: { products: Product[] }) {
   return (
-    <Table>
-      <TableHeader>
+    <Table {...debugProps('admin-products-table', 'ProductsTable', 'components/admin/products-table.tsx')}>
+      <TableHeader data-debug-id="admin-products-table__header">
         <TableRow>
           <TableHead>Naam</TableHead>
           <TableHead>Eigenaar</TableHead>
@@ -90,7 +91,7 @@ export function ProductsTable({ products }: { products: Product[] }) {
           <TableHead className="text-right">Acties</TableHead>
         </TableRow>
       </TableHeader>
-      <TableBody>
+      <TableBody data-debug-id="admin-products-table__table">
         {products.length === 0 && (
           <TableRow>
             <TableCell colSpan={7} className="text-center text-muted-foreground py-8">

components/admin/users-table.tsx

@@ -26,6 +26,7 @@ import {
   updateUserRolesAction,
   setMustResetPasswordAction,
 } from '@/actions/admin/users'
+import { debugProps } from '@/lib/debug'
 
 type UserWithRoles = {
   id: string
@@ -190,8 +191,8 @@ export function UsersTable({
   currentUserId: string
 }) {
   return (
-    <Table>
-      <TableHeader>
+    <Table {...debugProps('admin-users-table', 'UsersTable', 'components/admin/users-table.tsx')}>
+      <TableHeader data-debug-id="admin-users-table__header">
         <TableRow>
           <TableHead>Gebruiker</TableHead>
           <TableHead>Email</TableHead>
@@ -201,7 +202,7 @@ export function UsersTable({
           <TableHead className="text-right">Acties</TableHead>
         </TableRow>
       </TableHeader>
-      <TableBody>
+      <TableBody data-debug-id="admin-users-table__table">
         {users.map(user => (
           <TableRow key={user.id}>
             <TableCell className="font-medium">{user.username}</TableCell>