|
| 1 | +# Array Development Guide |
| 2 | + |
| 3 | +## Project Structure |
| 4 | + |
| 5 | +- Monorepo with pnpm workspaces and turbo |
| 6 | +- `apps/array` - Electron desktop app (React + Vite) |
| 7 | +- `packages/agent` - TypeScript agent framework wrapping Claude Agent SDK |
| 8 | + |
| 9 | +## Commands |
| 10 | + |
| 11 | +- `pnpm install` - Install all dependencies |
| 12 | +- `pnpm dev` - Run both agent (watch) and array app via mprocs |
| 13 | +- `pnpm dev:agent` - Run agent package in watch mode only |
| 14 | +- `pnpm dev:array` - Run array desktop app only |
| 15 | +- `pnpm build` - Build all packages (turbo) |
| 16 | +- `pnpm typecheck` - Type check all packages |
| 17 | +- `pnpm lint` - Lint and auto-fix with biome |
| 18 | +- `pnpm format` - Format with biome |
| 19 | +- `pnpm test` - Run tests across all packages |
| 20 | + |
| 21 | +### Array App Specific |
| 22 | + |
| 23 | +- `pnpm --filter array test` - Run vitest tests |
| 24 | +- `pnpm --filter array typecheck` - Type check array app |
| 25 | +- `pnpm --filter array package` - Package electron app |
| 26 | +- `pnpm --filter array make` - Make distributable |
| 27 | + |
| 28 | +### Agent Package Specific |
| 29 | + |
| 30 | +- `pnpm --filter agent build` - Build agent with tsup |
| 31 | +- `pnpm --filter agent dev` - Watch mode build |
| 32 | +- `pnpm --filter agent typecheck` - Type check agent |
| 33 | + |
| 34 | +## Code Style |
| 35 | + |
| 36 | +- Biome for linting and formatting (not ESLint/Prettier) |
| 37 | +- 2-space indentation, double quotes |
| 38 | +- No `console.*` in source - use logger instead (logger files exempt) |
| 39 | +- Path aliases required in renderer code - no relative imports |
| 40 | + - `@features/*`, `@components/*`, `@stores/*`, `@hooks/*`, `@utils/*`, `@renderer/*`, `@shared/*`, `@api/*` |
| 41 | +- Main process path aliases: `@main/*`, `@api/*`, `@shared/*` |
| 42 | +- TypeScript strict mode enabled |
| 43 | +- Tailwind CSS classes should be sorted (biome `useSortedClasses` rule) |
| 44 | + |
| 45 | +## Architecture |
| 46 | + |
| 47 | +### Electron App (apps/array) |
| 48 | + |
| 49 | +- Main process: `src/main/` - Node.js, IPC handlers, services |
| 50 | +- Renderer process: `src/renderer/` - React app |
| 51 | +- Preload script: `src/main/preload.ts` |
| 52 | +- IPC bridge pattern between main/renderer |
| 53 | +- State management: Zustand stores in `src/renderer/stores/` |
| 54 | +- Testing: Vitest with React Testing Library |
| 55 | + |
| 56 | +### Agent Package (packages/agent) |
| 57 | + |
| 58 | +- Wraps `@anthropic-ai/claude-agent-sdk` |
| 59 | +- Git worktree management in `worktree-manager.ts` |
| 60 | +- PostHog API integration in `posthog-api.ts` |
| 61 | +- Task execution and session management |
| 62 | + |
| 63 | +## Key Libraries |
| 64 | + |
| 65 | +- React 18, Radix UI Themes, Tailwind CSS |
| 66 | +- TanStack Query for data fetching |
| 67 | +- xterm.js for terminal emulation |
| 68 | +- CodeMirror for code editing |
| 69 | +- Tiptap for rich text |
| 70 | +- Zod for schema validation |
| 71 | + |
| 72 | +## Environment Variables |
| 73 | + |
| 74 | +- Copy `.env.example` to `.env` |
| 75 | +- `ANTHROPIC_API_KEY` - Required for agent |
| 76 | +- `OPENAI_API_KEY` - Optional |
| 77 | +- `VITE_POSTHOG_*` - PostHog tracking config |
| 78 | + |
| 79 | +## Testing |
| 80 | + |
| 81 | +- Tests use vitest with jsdom environment |
| 82 | +- Test helpers in `src/test/` |
| 83 | +- Run specific test: `pnpm --filter array test -- path/to/test` |
0 commit comments