102 lines
2.5 KiB
Markdown
102 lines
2.5 KiB
Markdown
# 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` |
|