still break the production build.
- Backend changes: run `npm run test:server` before finishing.
- Frontend changes: run `npm run test:client` when relevant. This includes per-screen render snapshots (`client/src/pages/__tests__/screens.snapshot.test.tsx
compositions — product verticals; may import bricks, never the reverse),
`services/*` (foreign runtimes). pnpm workspaces.
## Frontend rules (apps/web, apps/landing)
- UI primitives come from `~/components/ui/ `. If one is missing, add it
with
PocketPaw is a Tauri v2 desktop client for the PocketPaw AI assistant backend. The frontend is SvelteKit (Svelte 5 runes mode) with Tailwind CSS 4 and shadcn-svelte components
Frontend Development Guide
This file provides frontend-specific development guidance for the Glean project.
For general project information, see [../CLAUDE.md](../CLAUDE.md).
## Frontend Structure
```
frontend/
├── apps/
│ ├── web/ # Main React app (port
testid` attributes.**
- ✅ **DO** use `data-testid` selectors when available
- ✅ **DO** add `data-testid` to frontend components when creating new tests
- ❌ **DON'T** rely solely on text content or CSS classes
root (the published lib + the `zoe` binary) and `zoetrope-web` in `web/wasm/` (the browser frontend, `publish = false`, wasm32-only). The browser frontend is **excluded** from the root workspace and resolves
service files — breaks storage abstraction.
- ❌ Added polling when WebSocket hook existed — use `useRealtimeAgentStatus`.
- ❌ Frontend interface didn't match server response (`totalAgents` vs `total`).
Server response is the source of truth
electron-dev # Start with hot reload (recommended for development)
npm run dev # Build frontend only in watch mode
npm start # Start built app
```
### Building
```bash
npm run build # Production build
data visualization
- Custom theme system with CSS variables (`--dac-*`)
- Go backend with embedded frontend (single binary)
## Build & Development
**Always use `make` commands** — never run `go build`, `npm run build
runs the full app with hot reload (RECOMMENDED WAY)
npm run dev # Vite frontend only, at http://localhost:1422 (strictPort)
npm run build # tsc + vite build — tsc typechecks and VALIDATES
working — whether by user verification, live agent testing, or manual QA — add regression tests (frontend and/or backend as appropriate) to prevent it from breaking later. The goal is to ratchet
check -p vestige-mcp` before
commits that touch dashboard HTTP routes or MCP tools — frontend gates do not
compile Rust.
For documentation-only changes, at minimum run:
```sh
git diff
A file Claude Code reads at the start of every session. It holds the commands, conventions and warnings the agent needs for this project.
Where does it go?
At the repository root. Claude Code also reads CLAUDE.md files in subdirectories when it works there.
What should it contain?
Build and test commands, the project's layout, conventions that aren't obvious from the code, and mistakes to avoid. Short files tend to work better than long ones.
CLAUDE.md or AGENTS.md?
Claude Code reads CLAUDE.md; most other agents read AGENTS.md. Many projects keep one and point the other at it.