From e293785532912bc6b8b57373a9f3837cfeca7ded Mon Sep 17 00:00:00 2001
From: Scrum4Me Agent <30029041+madhura68@users.noreply.github.com>
Date: Fri, 8 May 2026 08:47:54 +0200
Subject: [PATCH] feat(shared): data-debug-id+label op display-componenten

---
 components/shared/alert-toast.tsx      |  2 +-
 components/shared/demo-tooltip.tsx     | 20 +++++++++++---------
 components/shared/min-width-banner.tsx |  6 +++++-
 components/shared/story-log.tsx        | 12 ++++++++++--
 4 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/components/shared/alert-toast.tsx b/components/shared/alert-toast.tsx
index 630892d..0779266 100644
--- a/components/shared/alert-toast.tsx
+++ b/components/shared/alert-toast.tsx
@@ -24,5 +24,5 @@ export function AlertToast() {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [alert])
 
-  return null
+  return <span data-debug-id="alert-toast" data-debug-label="AlertToast — shared/alert-toast.tsx" hidden />
 }
diff --git a/components/shared/demo-tooltip.tsx b/components/shared/demo-tooltip.tsx
index bba0e8e..d6baea5 100644
--- a/components/shared/demo-tooltip.tsx
+++ b/components/shared/demo-tooltip.tsx
@@ -10,16 +10,18 @@ interface DemoTooltipProps {
 // Wraps children with a "Niet beschikbaar in demo-modus" tooltip when show=true.
 // Uses a span trigger so tooltip works on disabled elements.
 export function DemoTooltip({ show, children }: DemoTooltipProps) {
-  if (!show) return <>{children}</>
+  if (!show) return <span data-debug-id="demo-tooltip" data-debug-label="DemoTooltip — shared/demo-tooltip.tsx">{children}</span>
 
   return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger render={<span className="inline-flex" />}>
-          {children}
-        </TooltipTrigger>
-        <TooltipContent>Niet beschikbaar in demo-modus</TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
+    <span data-debug-id="demo-tooltip" data-debug-label="DemoTooltip — shared/demo-tooltip.tsx">
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger render={<span className="inline-flex" />}>
+            {children}
+          </TooltipTrigger>
+          <TooltipContent>Niet beschikbaar in demo-modus</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </span>
   )
 }
diff --git a/components/shared/min-width-banner.tsx b/components/shared/min-width-banner.tsx
index 6453bc2..9d7e0e2 100644
--- a/components/shared/min-width-banner.tsx
+++ b/components/shared/min-width-banner.tsx
@@ -3,7 +3,11 @@
 // Shows a warning banner on screens narrower than 1024px.
 export function MinWidthBanner() {
   return (
-    <div className="lg:hidden bg-warning/10 border-b border-warning/30 px-4 py-2 text-center text-xs text-warning">
+    <div
+      data-debug-id="min-width-banner"
+      data-debug-label="MinWidthBanner — shared/min-width-banner.tsx"
+      className="lg:hidden bg-warning/10 border-b border-warning/30 px-4 py-2 text-center text-xs text-warning"
+    >
       Scrum4Me is ontworpen voor schermen van minimaal 1024px breed. Sommige functies zijn mogelijk niet goed bruikbaar op dit scherm.
     </div>
   )
diff --git a/components/shared/story-log.tsx b/components/shared/story-log.tsx
index ae50663..2db8cac 100644
--- a/components/shared/story-log.tsx
+++ b/components/shared/story-log.tsx
@@ -34,14 +34,22 @@ const TYPE_STYLES: Record<string, { bg: string; label: string; labelColor: strin
 export function StoryLog({ logs, repoUrl }: StoryLogProps) {
   if (logs.length === 0) {
     return (
-      <p className="text-sm text-muted-foreground text-center py-4">
+      <p
+        data-debug-id="story-log"
+        data-debug-label="StoryLog — shared/story-log.tsx"
+        className="text-sm text-muted-foreground text-center py-4"
+      >
         Nog geen activiteit. Gebruik de REST API om logs toe te voegen.
       </p>
     )
   }
 
   return (
-    <div className="space-y-3">
+    <div
+      data-debug-id="story-log"
+      data-debug-label="StoryLog — shared/story-log.tsx"
+      className="space-y-3"
+    >
       {logs.map(log => {
         const style = TYPE_STYLES[log.type] ?? TYPE_STYLES.IMPLEMENTATION_PLAN
         const isTestResult = log.type === 'TEST_RESULT'