← Back to PRs

#14719: UI: fix debug event log layout and health history toggle

by detecti1 open 2026-02-12 14:59 View on GitHub →
app: web-ui size: M
#### Summary This PR primarily fixes a severe Event Log layout imbalance in Debug view, where the payload (the only high-value debugging content) effectively used less than ~20% of horizontal space, while timestamp + event type consumed ~80%. The result was poor readability and low analysis efficiency, especially for payload-heavy events. This PR rebalances the layout to prioritize payload visibility, then adds a secondary health-noise control to preserve useful event history. #### Repro Steps 1. Open Control UI and go to `Debug`. 2. Let gateway run for a while (health events are frequent). #### Root Cause 1. Event Log reused generic list styles (`.list-item`/`.list-meta`) that were not designed for payload-first debugging. 2. The previous column distribution over-allocated width to low-density metadata (event type + time), and under-allocated width to payload content. 3. Health events are high-frequency and can reduce useful history retention, but this is a secondary issue compared to the layout problem. #### Behavior Changes 1. Event Log now uses dedicated layout classes (`.event-log-item`, `.event-log-header`, `.event-log-payload`) instead of generic list-item styles. 2. Horizontal space is explicitly rebalanced toward payload readability: - compact fixed-width metadata column (event type + time) - flexible payload column that takes the remaining width 3. Added `Hide health history (keep latest only)` toggle in Debug → Event Log. 4. When toggle is ON: - UI hides health rows from visible Event Log. - retention logic keeps only the latest `health` event and drops older health history, preserving space for non-health events. 5. When toggle is OFF: - health events are retained normally. #### Tests - Added: `ui/src/ui/app-events.test.ts` - Covers: - ring-buffer cap behavior (250) - health-history retention when compaction disabled - health-history collapse to latest-only when enabled - order preservation after collapse AI-assisted by Codex, fully tested by me :) <!-- greptile_comment --> <h2>Greptile Overview</h2> <h3>Greptile Summary</h3> This change set introduces a dedicated Debug → Event Log layout (`.event-log-*` CSS and markup) so payloads get most of the horizontal space, and adds a “Hide health history (keep latest only)” toggle. On the data side, event log handling is centralized in `ui/src/ui/app-events.ts` with a fixed `EVENT_LOG_LIMIT` ring-buffer style cap and optional “collapse health history” behavior. Gateway event ingestion (`ui/src/ui/app-gateway.ts`) now uses `appendEventLogEntry()` and respects the new state flag, while the Debug view (`ui/src/ui/views/debug.ts`) filters health rows from display when enabled. A new vitest suite (`ui/src/ui/app-events.test.ts`) covers the cap behavior, health-history retention, and order preservation. <h3>Confidence Score: 5/5</h3> - This PR looks safe to merge with minimal risk. - Changes are localized to Debug event log rendering and event-log buffering/compaction logic, with accompanying unit tests that validate ordering and retention semantics. No unverified assumptions or regressions were found in the reviewed files. - No files require special attention <!-- greptile_other_comments_section --> <sub>(3/5) Reply to the agent's comments like "Can you suggest a fix for this @greptileai?" or ask follow-up questions!</sub> <!-- /greptile_comment -->

Most Similar PRs