Monitorex.Components.Live.TimelinePage (monitorex v0.3.0)

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