Skip to content

Debug panel: add queued/flushed/dropped indicators on event rows #4

@tyssejc

Description

@tyssejc

Problem

When an event gets queued (consent pending), there's no visual indicator in the Events tab. Developers have to manually switch between Consent and Events tabs to understand the lifecycle. There's also no way to see which events were dropped due to queue timeout.

Proposed Solution

New collector events needed in packages/core/:

  • queue:enqueue — emitted when an event enters the consent queue. Payload: { event: JctEvent }
  • queue:drop — emitted when events expire from the queue due to timeout. Payload: { count: number }
  • Expand queue:flush payload to include event IDs: { count: number, eventIds: string[] }

Debug store changes (packages/debug/src/store.ts):

  • Track per-event status: "queued" | "sent" | "flushed" | "dropped"
  • On queue:enqueue: mark matching event entry as queued
  • On queue:flush: retroactively update matching event entries as flushed
  • On queue:drop: mark entries as dropped

Debug panel changes (packages/debug/src/panel.ts):

  • Add status badges on event rows: yellow QUEUED, green FLUSHED, red DROPPED
  • Consider adding a notification badge on the Events tab when queue flushes happen from the Consent tab

Context

Identified during consent engine audit. The consent engine bugs (double-send, OR→AND, rapid toggle) have been fixed — this is the observability layer.

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions