## Context
This one's just something that I thought about while doing some
debugging - our audit logs UI is pretty outdated and hard to skim as the
information is very sparse. This is how it currently looks like
(specifically Account audit logs for this PR, there's also org audit
logs):
<img width="1450" height="957" alt="image"
src="https://github.com/user-attachments/assets/4b69511e-1d4f-4725-8ea9-78ddacf76942"
/>
<img width="1450" height="954" alt="image"
src="https://github.com/user-attachments/assets/ec099f52-adef-499c-965a-11b8404bf235"
/>
Am opting to follow the same UX as that of our Unified Logs, so opting
to update the UI as such:
<img width="1451" height="958" alt="Screenshot 2026-09-23 at 22 04 33"
src="https://github.com/user-attachments/assets/016bd26d-4078-42dc-9ff2-5bae9edbc1b2"
/>
<img width="1451" height="957" alt="Screenshot 2026-09-23 at 22 16 09"
src="https://github.com/user-attachments/assets/f038b635-1359-4710-bc84-0f32ace1fb82"
/>
<img width="1450" height="956" alt="Screenshot 2026-09-23 at 22 16 37"
src="https://github.com/user-attachments/assets/7230b94a-c7ec-4550-bb55-5405ebc074a7"
/>
More importantly, we'll allow users to copy logs as JSON so users can
eject to their own agent if needed
<img width="1201" height="350" alt="image"
src="https://github.com/user-attachments/assets/587ab881-a501-41e6-8c9b-59191a2b2047"
/>
## To test
- [ ] Mainly just need to make sure that account audit logs still works
as expected - it's all read only so just need to ensure that all
information that's available before, is still available
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Browse account activity logs with date-range and project filters,
project search, sorting, and refresh controls. Results automatically
refresh every five minutes.
* Choose preset date ranges, select individual logs or ranges of rows,
and copy selected entries as formatted JSON.
* Open a log to view request, actor, target, and action details, or
inspect and copy its raw data.
* Select log rows with a mouse or keyboard, and view loading, error,
empty-results, and filtered-empty states.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<img width="1086" height="810" alt="image"
src="https://github.com/user-attachments/assets/8a9f0c64-145e-4475-a3df-67bd815e2200"
/>
Stack 2/4 · previous: #50686 · next: #50688
## Problem
The detail panel only showed an Overview tab for log types that have an
inspection query. Every other type opened straight to Raw JSON. The
panel also had no header saying which log was open.
## Solution
- Adds `LogDetail`, which owns the inspection query, loading and error
states, and the Raw JSON view. Errors now use `AlertError`.
- Adds `LogOverview`, which maps each log type to its overview renderer.
Types without one fall back to the new `LogFields`, a generic tree of
expandable key/value rows built on `LogFieldRow`.
- `ServiceFlowPanel` now shows a header (level dot + event message)
above Overview / Raw JSON tabs for every log.
- Moves `getLogDataForMetadataVisibility` to `ServiceFlowPanel.utils.ts`
and adds `LogLevelDot`.
## Review instructions
1. Select a Realtime (or any other non-inspected) log. The Overview tab
should list its fields, with nested objects that expand.
2. Select a Postgres log. The overview should look as before, and Raw
JSON should still show the enriched log.
3. Switch between logs and confirm the tabs reset their scroll.
## Checklist
- [ ] I have read
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Added structured log overviews for Postgres, PostgREST, Auth, Storage,
and Edge Functions, with a Raw JSON view for log details.
- Added expandable log fields with filtering and copy actions, plus
visual indicators for log severity.
- **Bug Fixes**
- Improved display of scalar, nested, date, and empty log values.
- **Privacy**
- Raw log data respects metadata visibility settings.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
Joshen Lim