# Ticket 4.3 — Session Management UI

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

## Description

Sidebar or dropdown for managing sessions: list, create, switch, rename, delete, and search. Allows users to maintain multiple conversation threads per project.

## Acceptance Criteria

### AC1: Session list displays all sessions

```gherkin
Given the project has 5 sessions
When the user opens the session panel
Then all 5 sessions are listed
And each shows: title, last message preview, timestamp
And the active session is visually highlighted
And sessions are sorted by most recently updated
```

### AC2: Create new session

```gherkin
When the user clicks "New Session"
Then a new session is created via the bridge
And the UI switches to the empty new session
And the input field is focused for immediate typing
```

### AC3: Switch sessions

```gherkin
Given sessions "Auth Feature" and "Bug Fix" exist
When the user clicks on "Bug Fix"
Then the chat view loads "Bug Fix" session history
And the input field is ready for that session
And the active session indicator updates
```

### AC4: Rename session

```gherkin
Given session "New Session" exists
When the user double-clicks the session title (or clicks a rename icon)
Then the title becomes editable
And pressing Enter saves the new name
And pressing Escape cancels the edit
```

### AC5: Delete session with confirmation

```gherkin
Given session "Old Test" exists
When the user clicks the delete icon on "Old Test"
Then a confirmation dialog appears: "Delete 'Old Test'?"
And clicking "Delete" removes the session
And clicking "Cancel" keeps it
And if the deleted session was active, switch to the next session
```

### AC6: Search across sessions

```gherkin
Given a search input in the session panel
When the user types "authentication"
Then sessions containing "authentication" in messages or title are shown
And matching text is highlighted in the results
And non-matching sessions are hidden
```

## Testable Components

| Component | Test Type | What to Assert |
|-----------|-----------|----------------|
| Session sorting logic | Unit | Sessions sorted by most recent activity |
| Search filter logic | Unit | Filters sessions by title match, returns highlights |
| Session list rendering | E2E | All sessions shown, active session highlighted |
| New session | E2E | Create button opens new session, switches to it |
| Switch session | E2E | Clicking session loads its history, updates active indicator |
| Rename session | E2E | Double-click enables editing, Enter saves new name |
| Delete session | E2E | Delete shows confirmation dialog, removes session, switches if active |
| Session search | E2E | Typing in search filters visible sessions in real-time |

## Reference

- Claude-relay sessions UI: `../claude-relay/lib/public/modules/sidebar.js`
