spiceflow/client/CLAUDE.md

Client CLAUDE.md

SvelteKit frontend PWA.

Commands

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

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

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