# `Monitorex.Components.Live.TimelinePage`

Timeline Split-Pane LiveComponent — Concept A.

Renders a vertical timeline of recent HTTP requests on the left pane.
Clicking a timeline item shows full request/response details on the right pane,
including headers (with configurable redaction via HeaderRedactor).

## Layout

    ┌──────────────────────────────────────────────────┐
    │  Timeline         │  Detail                      │
    │  ┌─────────────┐  │  ┌──────────────────────────┐│
    │  │ GET /api/u  │  │  │ Method: GET              ││
    │  │ 200 12.5ms  │  │  │ Host: api.example.com    ││
    │  │ 10:23:45    │  │  │ URL: https://api.ex...   ││
    │  ├─────────────┤  │  │ Status: 200 OK           ││
    │  │ POST /api   │  │  │ Duration: 12.5ms         ││
    │  │ 201 3.2ms   │  │  │ Timestamp: 10:23:45      ││
    │  │ 10:23:44    │  │  ├──────────────────────────┤│
    │  ├─────────────┤  │  │ Request Headers           ││
    │  │ GET /api/v  │  │  │  authorization: ••••re.. ││
    │  │ 404 0.5ms   │  │  │  content-type: app/json   ││
    │  │ 10:23:43    │  │  ├──────────────────────────┤│
    │  └─────────────┘  │  │ Response Headers          ││
    │                   │  │  x-request-id: abc-123   ││
    │                   │  │  set-cookie: ••••reda..  ││
    │                   │  ├──────────────────────────┤│
    │                   │  │ Response Body             ││
    │                   │  │ {"users": [...], "p...   ││
    │                   │  └──────────────────────────┘│
    └──────────────────────────────────────────────────┘

## Interaction

  * Click a timeline item → select it, detail pane updates
  * Direction tabs (Outbound / Inbound) → filter by direction
  * Auto-refresh — new events appear at the top

---

*Consult [api-reference.md](api-reference.md) for complete listing*