# Ticket 10.2 — Sidebar File Browser Integration

**Status**: Done
**Phase**: 10 — Feature Parity Enhancements
**Priority**: High
**Depends on**: None

## Description

Move the file browser from a floating right-side overlay into the sidebar as a sub-panel that replaces the session list, matching claude-relay's recent improvement. Currently, conduit renders `FileBrowser.svelte` as a `fixed right-0` overlay panel (380px wide with backdrop), which blocks the chat area and feels disconnected from the sidebar navigation.

claude-relay places the file browser directly in the left sidebar using a panel-switching pattern: clicking "Files" in the sidebar replaces the session list with the file tree. A "Back to sessions" button returns to the session list. This is more natural, keeps the sidebar as the single navigation hub, and doesn't obscure the chat content.

Note: conduit already has a vestigial `sidebarPanel: "sessions" | "files"` state in `ui.svelte.ts` (line 20) that was never wired up. This ticket activates that state.

## Acceptance Criteria

### AC1: Sidebar panel switching to file tree
```gherkin
Given the user is viewing the session list in the sidebar
When they click the "File browser" button
Then the session list is replaced by the file tree panel within the sidebar
  And no floating overlay or backdrop is rendered
```

### AC2: Back button returns to session list
```gherkin
Given the user is viewing the file tree panel in the sidebar
When they click the "Back" button at the top of the file panel
Then the sidebar returns to showing the session list
  And the file tree panel is unmounted
```

### AC3: File tree renders inline with full navigation
```gherkin
Given the sidebar is showing the file tree panel
When the user interacts with the tree
Then directories expand and collapse on click
  And breadcrumb navigation shows the current path
  And the tree scrolls independently within the sidebar bounds
```

### AC4: File click opens FileViewer split pane
```gherkin
Given the file tree is visible in the sidebar
When the user clicks a file entry
Then the FileViewer split pane opens showing the file content
  And the existing FileViewer behaviour (syntax highlighting, line numbers) is preserved
```

### AC5: Mobile sidebar panel switching
```gherkin
Given the user is on a mobile viewport (< 768px)
  And the slide-over sidebar is open showing the session list
When they tap the "File browser" button
Then the sidebar smoothly transitions to the file tree panel
  And the slide-over remains open (does not close and reopen)
```

### AC6: Vestigial sidebarPanel state is wired up
```gherkin
Given the `sidebarPanel` state in ui.svelte.ts was previously unused
When the sidebar file browser feature is implemented
Then the sidebarPanel state drives which panel is visible ("sessions" or "files")
  And all panel transitions read from and write to this state
```

### AC7: Floating overlay code is removed
```gherkin
Given the file browser previously rendered as a fixed right-0 overlay
When this ticket is complete
Then the floating overlay markup and styles in FileBrowser.svelte are deleted
  And the backdrop click-to-close logic is removed
  And ChatLayout.svelte no longer renders the overlay version
```

## Testable Components

| Component | Test Type | What to Assert |
|-----------|-----------|----------------|
| Panel switching state transitions | Unit | `sidebarPanel` store toggles between `"sessions"` and `"files"`; setting to `"files"` hides session list, setting to `"sessions"` hides file tree |
| Sidebar renders file tree when panel is "files" | E2E | When `sidebarPanel` is `"files"`, the sidebar DOM contains the file tree component and does not contain the session list |
| Back button returns to session list | E2E | Clicking the back button sets `sidebarPanel` to `"sessions"` and the session list is visible |
| File tree navigation works inline | E2E | Expanding a directory shows its children; collapsing hides them; breadcrumbs update on navigation |
| Mobile sidebar panel switching | E2E | On a 375px viewport, tapping "File browser" in the open sidebar transitions to the file tree without closing the sidebar |
| FileViewer still opens on file click | E2E | Clicking a `.ts` file in the sidebar file tree opens the FileViewer pane with correct content |
| Overlay code removal | Unit | `FileBrowser.svelte` contains no `fixed` or `absolute` positioning classes; `ChatLayout.svelte` does not conditionally render a file browser overlay |

## Reference

- claude-relay sidebar with file panel: `../claude-relay/lib/public/modules/sidebar.js` (project/session/file panel switching)
- Current floating overlay: `conduit/src/lib/public/components/features/FileBrowser.svelte` (lines 142–155, fixed overlay)
- Vestigial state: `conduit/src/lib/public/stores/ui.svelte.ts` (line 20, `sidebarPanel`)
- ChatLayout overlay render: `conduit/src/lib/public/components/layout/ChatLayout.svelte` (line 318)
