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

components/settings/leave-product-button.tsx

@@ -4,6 +4,7 @@ import { useState, useTransition } from 'react'
 import { Button } from '@/components/ui/button'
 import { DemoTooltip } from '@/components/shared/demo-tooltip'
 import { leaveProductAction } from '@/actions/products'
+import { debugProps } from '@/lib/debug'
 
 interface LeaveProductButtonProps {
   productId: string
@@ -22,7 +23,7 @@ export function LeaveProductButton({ productId, isDemo = false }: LeaveProductBu
 
   if (confirming) {
     return (
-      <div className="flex gap-2 shrink-0">
+      <div className="flex gap-2 shrink-0" {...debugProps('leave-product-button', 'LeaveProductButton', 'components/settings/leave-product-button.tsx')}>
         <Button variant="destructive" size="sm" disabled={isPending} onClick={handleLeave}>
           {isPending ? 'Bezig…' : 'Ja, verlaten'}
         </Button>
@@ -34,16 +35,18 @@ export function LeaveProductButton({ productId, isDemo = false }: LeaveProductBu
   }
 
   return (
-    <DemoTooltip show={isDemo}>
-      <Button
-        variant="outline"
-        size="sm"
-        className="shrink-0 border-error/40 text-error hover:bg-error/10"
-        disabled={isDemo}
-        onClick={() => !isDemo && setConfirming(true)}
-      >
-        Verlaten
-      </Button>
-    </DemoTooltip>
+    <span {...debugProps('leave-product-button', 'LeaveProductButton', 'components/settings/leave-product-button.tsx')}>
+      <DemoTooltip show={isDemo}>
+        <Button
+          variant="outline"
+          size="sm"
+          className="shrink-0 border-error/40 text-error hover:bg-error/10"
+          disabled={isDemo}
+          onClick={() => !isDemo && setConfirming(true)}
+        >
+          Verlaten
+        </Button>
+      </DemoTooltip>
+    </span>
   )
 }

components/settings/min-quota-editor.tsx

@@ -5,6 +5,7 @@ import { toast } from 'sonner'
 import { Button } from '@/components/ui/button'
 import { DemoTooltip } from '@/components/shared/demo-tooltip'
 import { updateMinQuotaPctAction } from '@/actions/settings'
+import { debugProps } from '@/lib/debug'
 
 interface MinQuotaEditorProps {
   currentValue: number
@@ -27,7 +28,7 @@ export function MinQuotaEditor({ currentValue, isDemo }: MinQuotaEditorProps) {
   }
 
   return (
-    <div className="space-y-3">
+    <div className="space-y-3" {...debugProps('min-quota-editor', 'MinQuotaEditor', 'components/settings/min-quota-editor.tsx')}>
       <div>
         <label htmlFor="min-quota-pct" className="text-sm font-medium text-foreground">
           Minimaal beschikbaar Claude-quota voordat de worker een job oppakt (%)

components/settings/profile-editor.tsx

@@ -6,6 +6,7 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
 import { updateProfileAction } from '@/actions/profile'
+import { debugProps } from '@/lib/debug'
 
 interface ProfileEditorProps {
   email: string | null
@@ -63,7 +64,7 @@ export function ProfileEditor({ email, bio, bioDetail, hasAvatar, avatarVersion
   }
 
   return (
-    <div className="space-y-5">
+    <div className="space-y-5" {...debugProps('profile-editor', 'ProfileEditor', 'components/settings/profile-editor.tsx')}>
       <div className="flex items-center gap-5">
         <button
           type="button"

components/settings/role-manager.tsx

@@ -5,6 +5,7 @@ import { toast } from 'sonner'
 import { Button } from '@/components/ui/button'
 import { DemoTooltip } from '@/components/shared/demo-tooltip'
 import { updateRolesAction } from '@/actions/settings'
+import { debugProps } from '@/lib/debug'
 
 const ALL_ROLES = [
   { value: 'PRODUCT_OWNER', label: 'Product Owner' },
@@ -46,7 +47,7 @@ export function RoleManager({ currentRoles, isDemo }: RoleManagerProps) {
   }
 
   return (
-    <div className="bg-surface-container-low border border-border rounded-xl p-5 space-y-4">
+    <div className="bg-surface-container-low border border-border rounded-xl p-5 space-y-4" {...debugProps('role-manager', 'RoleManager', 'components/settings/role-manager.tsx')}>
       <h2 className="text-sm font-medium text-foreground">Mijn rollen</h2>
       <div className="flex flex-wrap gap-3">
         {ALL_ROLES.map(role => (

components/settings/token-manager.tsx

@@ -6,6 +6,7 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { DemoTooltip } from '@/components/shared/demo-tooltip'
 import { createApiTokenAction, revokeApiTokenAction } from '@/actions/api-tokens'
+import { debugProps } from '@/lib/debug'
 
 interface Token {
   id: string
@@ -63,7 +64,7 @@ export function TokenManager({ tokens, isDemo }: TokenManagerProps) {
   const revokedTokens = tokens.filter(t => t.revoked_at)
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-6" {...debugProps('token-manager', 'TokenManager', 'components/settings/token-manager.tsx')}>
       {/* New token revealed */}
       {newToken && (
         <div className="bg-success-container border border-success/30 rounded-xl p-4 space-y-3">