# Client CLAUDE.md

SvelteKit frontend PWA.

## Commands

```bash
npm install               # First time
npm run dev               # Dev server (localhost:5173)
npm run build             # Production build
npm run check             # TypeScript check
npm run check:watch       # Watch mode
```

## Directory Structure

```
client/
├── src/
│   ├── routes/           # Pages (file-based routing)
│   │   ├── +layout.svelte
│   │   ├── +page.svelte          # Home (session list)
│   │   └── session/[id]/+page.svelte
│   ├── lib/
│   │   ├── api.ts                # HTTP + WebSocket
│   │   ├── stores/sessions.ts    # State management
│   │   └── components/           # UI components
│   ├── app.css                   # Tailwind
│   └── sw.ts                     # Service worker
├── static/               # Icons, manifest
├── vite.config.ts
└── tailwind.config.js
```

## Routing

| File | URL |
|------|-----|
| `+page.svelte` | `/` |
| `session/[id]/+page.svelte` | `/session/:id` |
| `+layout.svelte` | Wraps all pages |

Access URL params: `$page.params.id`

## Stores

```typescript
import { sessions, activeSession } from '$lib/stores/sessions';

// Sessions list
$sessions.sessions   // Session[]
$sessions.loading    // boolean
await sessions.load()
await sessions.create({ provider: 'claude' })
await sessions.delete(id)

// Active session
$activeSession.session           // Session | null
$activeSession.messages          // Message[]
$activeSession.streamingContent  // string
$activeSession.pendingPermission // PermissionRequest | null
await activeSession.load(id)
await activeSession.sendMessage('text')
await activeSession.respondToPermission('accept')
```

## API Client

```typescript
import { api, wsClient } from '$lib/api';

// HTTP
const sessions = await api.getSessions();
await api.sendMessage(id, 'text');

// WebSocket
await wsClient.connect();
wsClient.subscribe(id, (event) => { ... });
```

## Components

| Component | Purpose |
|-----------|---------|
| `MessageList` | Conversation display |
| `InputBar` | Text input + send |
| `PermissionRequest` | Accept/deny/steer UI |
| `FileDiff` | File changes preview |
| `SessionCard` | Session list item |
| `SessionSettings` | Gear menu |
| `TerminalView` | Tmux display |

## Theme

| Element | Class |
|---------|-------|
| Background | `bg-zinc-900` |
| Cards | `bg-zinc-800` |
| Text | `text-zinc-100` |
| Accent | `bg-orange-500` |
| Muted | `text-zinc-400` |