chore(debug): extend /debug-realtime with stats, emit-button and filters

Bouwt de basale luister-tabel uit met diagnostische tooling om de
SSE+LISTEN-pipe stress-vrij te kunnen valideren.

Toegevoegd:
- POST /api/debug/emit-test-notify — vuurt een handmatige pg_notify
  op scrum4me_changes met een synthetic payload (debug:true) zonder
  een echte DB-UPDATE te doen. Isoleert de SSE-route van Prisma/triggers.
- DebugRealtimeClient: stats-grid (status, reconnects, total events,
  since last event met >30s rood-warning, largest gap, first-event-
  time), emit-button, reset-stats, filters op type en entity
  (incl. "debug only").
- Type/entity kolom in de tabel met kleuring per type.

Geen impact op productie- of solo-flow. Tijdelijke testtooling;
verwijderen wanneer we deze pagina niet meer nodig hebben.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

app/api/debug/emit-test-notify/route.ts

@@ -0,0 +1,59 @@
+// TIJDELIJKE debug-endpoint. Stuurt een handmatige pg_notify op
+// `scrum4me_changes` zonder een echte UPDATE te doen. Bedoeld om de
+// SSE-pipe te testen los van Prisma/triggers.
+//
+// VERWIJDEREN voor M8 out-of-draft.
+
+import { Client } from 'pg'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+const CHANNEL = 'scrum4me_changes'
+
+export async function POST(request: Request) {
+  const directUrl = process.env.DIRECT_URL ?? process.env.DATABASE_URL
+  if (!directUrl) {
+    return Response.json({ error: 'DIRECT_URL/DATABASE_URL niet gezet' }, { status: 500 })
+  }
+
+  let body: unknown = null
+  try {
+    body = await request.json()
+  } catch {
+    // empty body is OK — we vullen defaults in
+  }
+
+  const overrides = (body && typeof body === 'object' ? body : {}) as Record<string, unknown>
+  const payload = {
+    op: 'U',
+    entity: 'task',
+    id: `debug-${Date.now()}`,
+    story_id: 'debug-story',
+    product_id: 'debug-product',
+    sprint_id: null,
+    assignee_id: null,
+    task_status: 'TO_DO',
+    task_sort_order: 1,
+    task_title: 'manual debug emit',
+    changed_fields: ['status'],
+    debug: true,
+    emitted_at: new Date().toISOString(),
+    ...overrides,
+  }
+
+  const client = new Client({ connectionString: directUrl })
+  try {
+    await client.connect()
+    // pg_notify met JSON-string als payload — zelfde formaat als de trigger
+    await client.query('SELECT pg_notify($1, $2)', [CHANNEL, JSON.stringify(payload)])
+    return Response.json({ ok: true, payload })
+  } catch (err) {
+    return Response.json(
+      { ok: false, error: err instanceof Error ? err.message : String(err) },
+      { status: 500 },
+    )
+  } finally {
+    try { await client.end() } catch {}
+  }
+}

app/debug-realtime/client.tsx

@@ -1,96 +1,215 @@
 'use client'
 
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
+
+type RowType = 'ready' | 'message' | 'error' | 'open' | 'close'
 
 interface Row {
-  receivedAt: string
+  receivedAt: number
-  type: 'ready' | 'message' | 'error'
+  type: RowType
   raw: string
+  parsed?: Record<string, unknown>
 }
 
-const MAX_ROWS = 200
+interface Stats {
+  reconnects: number
+  totalEvents: number
+  firstEventAt: number | null
+  lastEventAt: number | null
+  largestGapMs: number
+  emitInFlight: boolean
+  lastEmitResult: string | null
+}
+
+const MAX_ROWS = 500
+const HEARTBEAT_WARN_MS = 30_000
 
 export function DebugRealtimeClient() {
   const [rows, setRows] = useState<Row[]>([])
   const [status, setStatus] = useState<'connecting' | 'open' | 'closed' | 'error'>('connecting')
+  const [stats, setStats] = useState<Stats>({
+    reconnects: 0,
+    totalEvents: 0,
+    firstEventAt: null,
+    lastEventAt: null,
+    largestGapMs: 0,
+    emitInFlight: false,
+    lastEmitResult: null,
+  })
+  const [filterType, setFilterType] = useState<'all' | RowType>('all')
+  const [filterEntity, setFilterEntity] = useState<'all' | 'task' | 'story' | 'debug'>('all')
+  const [tickNow, setTickNow] = useState(() => Date.now())
+
   const sourceRef = useRef<EventSource | null>(null)
+  const lastEventTimeRef = useRef<number | null>(null)
+
+  // Tick every second om "since last event"-counter levend te houden
+  useEffect(() => {
+    const t = setInterval(() => setTickNow(Date.now()), 1000)
+    return () => clearInterval(t)
+  }, [])
 
   useEffect(() => {
-    const source = new EventSource('/api/debug/realtime-stream')
-    sourceRef.current = source
-
     const append = (row: Row) => {
       setRows((prev) => [row, ...prev].slice(0, MAX_ROWS))
+      lastEventTimeRef.current = row.receivedAt
+      setStats((s) => {
+        const prevLast = s.lastEventAt
+        const gap = prevLast ? row.receivedAt - prevLast : 0
+        return {
+          ...s,
+          totalEvents: s.totalEvents + 1,
+          firstEventAt: s.firstEventAt ?? row.receivedAt,
+          lastEventAt: row.receivedAt,
+          largestGapMs: Math.max(s.largestGapMs, gap),
+        }
+      })
     }
 
-    source.addEventListener('ready', (e) => {
+    const open = () => {
-      setStatus('open')
+      const source = new EventSource('/api/debug/realtime-stream')
-      const data = (e as MessageEvent).data ?? ''
+      sourceRef.current = source
-      append({ receivedAt: new Date().toISOString(), type: 'ready', raw: data })
-    })
 
-    source.addEventListener('error', (e) => {
+      append({ receivedAt: Date.now(), type: 'open', raw: '(EventSource opening)' })
-      setStatus('error')
+      setStats((s) => ({ ...s, reconnects: s.reconnects + 1 }))
-      const data = (e as MessageEvent).data ?? '(no data)'
+      setStatus('connecting')
-      append({ receivedAt: new Date().toISOString(), type: 'error', raw: data })
-    })
 
-    source.onmessage = (e) => {
+      source.addEventListener('ready', (e) => {
-      append({ receivedAt: new Date().toISOString(), type: 'message', raw: e.data ?? '' })
+        setStatus('open')
+        const data = (e as MessageEvent).data ?? ''
+        const parsed = safeParse(data)
+        append({ receivedAt: Date.now(), type: 'ready', raw: data, parsed })
+      })
+
+      source.addEventListener('error', (e) => {
+        setStatus('error')
+        const data = (e as MessageEvent).data ?? '(no data)'
+        append({ receivedAt: Date.now(), type: 'error', raw: data })
+      })
+
+      source.onmessage = (e) => {
+        const parsed = safeParse(e.data ?? '')
+        append({ receivedAt: Date.now(), type: 'message', raw: e.data ?? '', parsed })
+      }
+
+      source.onerror = () => {
+        setStatus('error')
+        append({ receivedAt: Date.now(), type: 'close', raw: '(EventSource error/close)' })
+      }
     }
 
-    source.onerror = () => {
+    open()
-      setStatus('error')
-    }
 
     return () => {
-      source.close()
+      sourceRef.current?.close()
       sourceRef.current = null
     }
   }, [])
 
-  function statusColor() {
+  async function emitTestEvent() {
-    switch (status) {
+    setStats((s) => ({ ...s, emitInFlight: true, lastEmitResult: null }))
-      case 'open':
+    try {
-        return 'green'
+      const res = await fetch('/api/debug/emit-test-notify', { method: 'POST' })
-      case 'error':
+      const json = (await res.json()) as { ok?: boolean; error?: string }
-        return 'red'
+      setStats((s) => ({
-      case 'closed':
+        ...s,
-        return 'gray'
+        emitInFlight: false,
-      default:
+        lastEmitResult: json.ok ? 'sent ✓' : `failed: ${json.error ?? 'unknown'}`,
-        return 'orange'
+      }))
+    } catch (err) {
+      setStats((s) => ({
+        ...s,
+        emitInFlight: false,
+        lastEmitResult: `failed: ${err instanceof Error ? err.message : String(err)}`,
+      }))
     }
   }
 
+  function reset() {
+    setRows([])
+    setStats({
+      reconnects: 0,
+      totalEvents: 0,
+      firstEventAt: null,
+      lastEventAt: null,
+      largestGapMs: 0,
+      emitInFlight: false,
+      lastEmitResult: null,
+    })
+    lastEventTimeRef.current = null
+  }
+
+  const filteredRows = useMemo(() => {
+    return rows.filter((row) => {
+      if (filterType !== 'all' && row.type !== filterType) return false
+      if (filterEntity !== 'all') {
+        const entity = (row.parsed?.entity as string | undefined) ?? null
+        if (filterEntity === 'debug') {
+          if (!row.parsed?.debug) return false
+        } else {
+          if (entity !== filterEntity) return false
+        }
+      }
+      return true
+    })
+  }, [rows, filterType, filterEntity])
+
+  const sinceLastEvent = lastEventTimeRef.current
+    ? tickNow - lastEventTimeRef.current
+    : null
+
   return (
     <div style={{ marginTop: 16 }}>
-      <div style={{ marginBottom: 12 }}>
+      <ControlBar
-        Status:{' '}
+        status={status}
-        <span style={{ color: statusColor(), fontWeight: 'bold' }}>{status}</span> · totaal{' '}
+        stats={stats}
-        {rows.length} entries
+        sinceLastEvent={sinceLastEvent}
-      </div>
+        filterType={filterType}
-      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12 }}>
+        setFilterType={setFilterType}
+        filterEntity={filterEntity}
+        setFilterEntity={setFilterEntity}
+        onEmit={emitTestEvent}
+        onReset={reset}
+      />
+      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12, marginTop: 12 }}>
         <thead>
           <tr style={{ background: '#f0f0f0', textAlign: 'left' }}>
             <th style={{ padding: 6, border: '1px solid #ddd', width: 220 }}>received_at</th>
             <th style={{ padding: 6, border: '1px solid #ddd', width: 100 }}>type</th>
+            <th style={{ padding: 6, border: '1px solid #ddd', width: 140 }}>entity / op</th>
             <th style={{ padding: 6, border: '1px solid #ddd' }}>payload</th>
           </tr>
         </thead>
         <tbody>
-          {rows.length === 0 ? (
+          {filteredRows.length === 0 ? (
             <tr>
-              <td colSpan={3} style={{ padding: 12, textAlign: 'center', color: '#888' }}>
+              <td colSpan={4} style={{ padding: 12, textAlign: 'center', color: '#888' }}>
-                Wachten op events… trigger een mutatie via UI of script.
+                Wachten op events… trigger een mutatie via UI / script of klik &quot;emit test event&quot;.
               </td>
             </tr>
           ) : (
-            rows.map((row, idx) => (
+            filteredRows.map((row, idx) => (
-              <tr key={`${row.receivedAt}-${idx}`}>
+              <tr
+                key={`${row.receivedAt}-${idx}`}
+                style={{ background: row.type === 'message' ? 'transparent' : '#fafafa' }}
+              >
                 <td style={{ padding: 6, border: '1px solid #ddd', whiteSpace: 'nowrap' }}>
-                  {row.receivedAt}
+                  {new Date(row.receivedAt).toISOString()}
+                </td>
+                <td style={{ padding: 6, border: '1px solid #ddd', color: typeColor(row.type) }}>
+                  {row.type}
+                </td>
+                <td style={{ padding: 6, border: '1px solid #ddd', whiteSpace: 'nowrap' }}>
+                  {row.parsed?.entity ? (
+                    <>
+                      {row.parsed.entity as string}
+                      {row.parsed.op ? ` / ${row.parsed.op as string}` : ''}
+                      {row.parsed.debug ? ' [debug]' : ''}
+                    </>
+                  ) : (
+                    '—'
+                  )}
                 </td>
-                <td style={{ padding: 6, border: '1px solid #ddd' }}>{row.type}</td>
                 <td style={{ padding: 6, border: '1px solid #ddd', wordBreak: 'break-all' }}>
                   <code>{row.raw}</code>
                 </td>
@@ -102,3 +221,163 @@ export function DebugRealtimeClient() {
     </div>
   )
 }
+
+function ControlBar({
+  status,
+  stats,
+  sinceLastEvent,
+  filterType,
+  setFilterType,
+  filterEntity,
+  setFilterEntity,
+  onEmit,
+  onReset,
+}: {
+  status: 'connecting' | 'open' | 'closed' | 'error'
+  stats: Stats
+  sinceLastEvent: number | null
+  filterType: 'all' | RowType
+  setFilterType: (t: 'all' | RowType) => void
+  filterEntity: 'all' | 'task' | 'story' | 'debug'
+  setFilterEntity: (e: 'all' | 'task' | 'story' | 'debug') => void
+  onEmit: () => void
+  onReset: () => void
+}) {
+  const heartbeatStale = sinceLastEvent !== null && sinceLastEvent > HEARTBEAT_WARN_MS
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
+          gap: 8,
+          padding: 12,
+          background: '#f7f7f7',
+          border: '1px solid #ddd',
+          borderRadius: 4,
+        }}
+      >
+        <Stat label="status" value={status} color={statusColor(status)} />
+        <Stat label="reconnects" value={String(stats.reconnects)} />
+        <Stat label="total events" value={String(stats.totalEvents)} />
+        <Stat
+          label="since last event"
+          value={sinceLastEvent === null ? '—' : `${(sinceLastEvent / 1000).toFixed(1)}s`}
+          color={heartbeatStale ? 'red' : undefined}
+        />
+        <Stat
+          label="largest gap"
+          value={
+            stats.largestGapMs > 0
+              ? `${(stats.largestGapMs / 1000).toFixed(1)}s`
+              : '—'
+          }
+        />
+        <Stat
+          label="first event"
+          value={stats.firstEventAt ? new Date(stats.firstEventAt).toLocaleTimeString() : '—'}
+        />
+      </div>
+      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
+        <button
+          onClick={onEmit}
+          disabled={stats.emitInFlight}
+          style={{
+            padding: '6px 12px',
+            background: '#0a0',
+            color: 'white',
+            border: 'none',
+            borderRadius: 4,
+            cursor: stats.emitInFlight ? 'wait' : 'pointer',
+            opacity: stats.emitInFlight ? 0.6 : 1,
+          }}
+        >
+          {stats.emitInFlight ? 'sending…' : 'emit test event'}
+        </button>
+        {stats.lastEmitResult && (
+          <span style={{ fontSize: 12, color: '#666' }}>{stats.lastEmitResult}</span>
+        )}
+        <button
+          onClick={onReset}
+          style={{
+            padding: '6px 12px',
+            background: '#eee',
+            border: '1px solid #ccc',
+            borderRadius: 4,
+            cursor: 'pointer',
+          }}
+        >
+          reset stats
+        </button>
+        <span style={{ marginLeft: 12, fontSize: 12, color: '#666' }}>filter:</span>
+        <select
+          value={filterType}
+          onChange={(e) => setFilterType(e.target.value as 'all' | RowType)}
+          style={{ fontSize: 12, padding: 4 }}
+        >
+          <option value="all">all types</option>
+          <option value="ready">ready</option>
+          <option value="message">message</option>
+          <option value="error">error</option>
+          <option value="open">open</option>
+          <option value="close">close</option>
+        </select>
+        <select
+          value={filterEntity}
+          onChange={(e) => setFilterEntity(e.target.value as 'all' | 'task' | 'story' | 'debug')}
+          style={{ fontSize: 12, padding: 4 }}
+        >
+          <option value="all">all entities</option>
+          <option value="task">task</option>
+          <option value="story">story</option>
+          <option value="debug">debug only</option>
+        </select>
+      </div>
+    </div>
+  )
+}
+
+function Stat({ label, value, color }: { label: string; value: string; color?: string }) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column' }}>
+      <span style={{ fontSize: 11, color: '#888', textTransform: 'uppercase' }}>{label}</span>
+      <span style={{ fontSize: 14, fontWeight: 'bold', color: color ?? 'inherit' }}>{value}</span>
+    </div>
+  )
+}
+
+function statusColor(status: 'connecting' | 'open' | 'closed' | 'error') {
+  switch (status) {
+    case 'open':
+      return 'green'
+    case 'error':
+      return 'red'
+    case 'closed':
+      return 'gray'
+    default:
+      return 'orange'
+  }
+}
+
+function typeColor(type: RowType) {
+  switch (type) {
+    case 'message':
+      return '#0070cc'
+    case 'ready':
+      return 'green'
+    case 'error':
+      return 'red'
+    case 'open':
+      return '#888'
+    case 'close':
+      return '#888'
+  }
+}
+
+function safeParse(raw: string): Record<string, unknown> | undefined {
+  try {
+    return JSON.parse(raw) as Record<string, unknown>
+  } catch {
+    return undefined
+  }
+}