# Ticket 4.8 — Progressive History Loading

**Phase**: 4 — Frontend UI
**Priority**: Medium
**Depends on**: 4.1, 2.3

## Description

Load session history progressively instead of all at once. Initially show the most recent messages, then load older messages as the user scrolls up. Respects turn boundaries so user/assistant message pairs aren't split.

## Acceptance Criteria

### AC1: Initial load shows recent messages

```gherkin
Given a session with 200 messages
When the user switches to that session
Then only the most recent 50 messages are loaded and displayed
And a "Loading earlier messages..." indicator appears at the top
```

### AC2: Scroll-up triggers load

```gherkin
Given 50 messages are displayed
When the user scrolls to the top of the chat
Then the next 50 messages are loaded and prepended
And the scroll position is preserved (user doesn't jump)
And the loading indicator appears during fetch
```

### AC3: Turn boundary awareness

```gherkin
Given messages are being paginated
When a page boundary falls between a user message and its assistant response
Then the page is extended to include both messages
And user/assistant pairs are never split across loads
```

### AC4: End of history indicator

```gherkin
Given all messages have been loaded
When the user scrolls to the top
Then a "Beginning of session" marker appears
And no further load requests are made
```

## Testable Components

| Component | Test Type | What to Assert |
|-----------|-----------|----------------|
| Turn boundary detection | Unit | Extends page to keep user+assistant pairs together |
| Initial load | Fixture | Loads only most recent N messages from mock API |
| Scroll-triggered load | E2E | Scrolling to top triggers loading older messages |
| Scroll position preservation | E2E | No visual jump after prepending older messages |
| End of history indicator | E2E | Marker shown when all history loaded, no more load triggers |

## Reference

- Claude-relay history loading: `../claude-relay/lib/project.js` (load_more_history, turn boundaries)
