#14719: UI: fix debug event log layout and health history toggle
app: web-ui
size: M
Cluster:
Hooks and UI Fixes
#### 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
#8342: Fix debug interface CSS layout issues
by Klopib · 2026-02-03
80.5%
#7316: fix: /chat dashboard performance
by felipcsousa · 2026-02-02
79.1%
#22139: Fix(ui): improve log formatting for JSON payloads
by npmisantosh · 2026-02-20
78.2%
#13960: fix(ui): preserve structured config validation error details
by constansino · 2026-02-11
77.8%
#13838: UI: fix config panel CI failures and modularize rendering
by fresed05 · 2026-02-11
77.5%
#9220: Fix: TUI drops API responses silently when runID already finalized
by vishaltandale00 · 2026-02-05
77.2%
#3721: fix(ui): webchat not displaying chat responses
by maxmaxrouge-rgb · 2026-01-29
76.8%
#18029: infra: fix memory leak and error handling in event listeners
by MAhmadUzair · 2026-02-16
76.5%
#11281: fix(logging): prevent subsystem loggers from bypassing file log lev...
by janckerchen · 2026-02-07
75.8%
#9461: refactor(cli): replace console.warn with SubsystemLogger in health.ts
by dinakars777 · 2026-02-05
75.7%