|
| 1 | +# AGENTS.md |
| 2 | + |
| 3 | +## Project Overview |
| 4 | + |
| 5 | +This repository is for a browser-based mini DAW built with Vite, React, TypeScript, CSS Modules, and the Web Audio API. |
| 6 | + |
| 7 | +The product is a clip-based electronic music creation tool. The first major milestone is a 1-bar hybrid clip editor with drum step sequencing, basic piano roll editing, and loop playback. Future work may add arrangement editing and desktop packaging with Electron or Tauri, but the initial target is a browser app. |
| 8 | + |
| 9 | +## Repository Layout |
| 10 | + |
| 11 | +Expected source layout after the scaffold task: |
| 12 | + |
| 13 | +- `src/app/`: app shell, providers, root composition. |
| 14 | +- `src/components/`: shared reusable React components. |
| 15 | +- `src/features/`: feature-specific UI and orchestration. |
| 16 | +- `src/audio/`: Web Audio engine, transport, scheduling, sample playback. |
| 17 | +- `src/model/`: serializable project types and model transformations. |
| 18 | +- `src/persistence/`: import, export, storage, and migration helpers. |
| 19 | +- `src/utils/`: pure utilities such as tick/time conversion. |
| 20 | +- `src/styles/`: global CSS, tokens, and shared style primitives. |
| 21 | +- `tests/unit/`: unit tests for utilities, model transformations, scheduler calculations, and other isolated logic. |
| 22 | +- `tests/integration/`: integration tests for multi-module flows when needed. |
| 23 | +- `docs/`: product, architecture, data model, audio, UI, testing, and feature specs. |
| 24 | + |
| 25 | +Preserve the existing structure unless a refactor is clearly required by the task. |
| 26 | + |
| 27 | +## Commands |
| 28 | + |
| 29 | +Use npm unless the repository already clearly uses another package manager. |
| 30 | + |
| 31 | +Intended project commands: |
| 32 | + |
| 33 | +```text |
| 34 | +Install: npm install |
| 35 | +Dev: npm run dev |
| 36 | +Type check: npm run typecheck |
| 37 | +Lint: npm run lint |
| 38 | +Test: npm run test |
| 39 | +Build: npm run build |
| 40 | +``` |
| 41 | + |
| 42 | +If these scripts do not exist yet, future scaffold work must add them. CI uses `--if-present` until the Vite scaffold exists. |
| 43 | + |
| 44 | +## Engineering Conventions |
| 45 | + |
| 46 | +- Prefer small, focused, reviewable changes. |
| 47 | +- Keep React UI separate from audio scheduling logic. |
| 48 | +- Do not mix persistence, UI rendering, and audio scheduling in the same module. |
| 49 | +- Keep project data serializable. |
| 50 | +- Store musical time in ticks, not seconds. |
| 51 | +- Use TypeScript types for project data, audio engine APIs, and feature boundaries. |
| 52 | +- Follow `docs/code-conventions.md` for naming, file organization, TypeScript, React, CSS Modules, design tokens, domain naming, tests, and comments. |
| 53 | +- Prefer pure utilities for tick math, model transformations, and scheduler calculations. |
| 54 | +- Do not introduce new production dependencies without a clear reason. |
| 55 | +- Do not rewrite large files unless required. |
| 56 | +- Do not implement unrelated features while working on a feature spec. |
| 57 | +- Do not change the project data model without updating `docs/data-model.md`. |
| 58 | + |
| 59 | +## Audio Rules |
| 60 | + |
| 61 | +- React UI must not own exact audio timing. |
| 62 | +- Schedule audio against `AudioContext.currentTime`. |
| 63 | +- Use a lookahead scheduler for sequenced playback. |
| 64 | +- UI cursors and playheads may use `requestAnimationFrame`, but not for exact audio scheduling. |
| 65 | +- Store musical time in ticks. The documented default PPQ is 480. |
| 66 | +- Do not store `AudioBuffer` objects directly in project JSON. |
| 67 | +- Runtime audio objects such as `AudioContext`, `AudioBuffer`, nodes, and decoded samples belong in audio runtime caches, not serializable project state. |
| 68 | +- Create a new `AudioBufferSourceNode` for each repeated one-shot sample playback. |
| 69 | +- The audio engine should expose a small typed API to the UI. |
| 70 | + |
| 71 | +## CSS Modules Rules |
| 72 | + |
| 73 | +- Use CSS Modules for component styles. |
| 74 | +- Keep global CSS limited to resets, base document styles, and design tokens. |
| 75 | +- Use CSS custom properties for shared colors, spacing, typography, and timing values. |
| 76 | +- Define primitive design tokens first, then define semantic tokens from those primitives. |
| 77 | +- Component CSS Modules should use semantic tokens. Do not reference primitive color, spacing, typography, or radius tokens directly in component styles unless there is a documented exception. |
| 78 | +- Dynamic editor geometry such as note positions, note widths, and grid coordinates may use inline styles when values are computed at runtime. |
| 79 | +- Do not add a visual design system dependency at this stage unless a task explicitly justifies it. |
| 80 | + |
| 81 | +## UI Reference Policy |
| 82 | + |
| 83 | +- If a design prototype uses Tailwind, inline styles, or CDN assets, treat it as visual reference only. |
| 84 | +- Convert visual patterns into CSS Modules and shared CSS variables. |
| 85 | +- Do not add Tailwind or CDN-based styling unless explicitly requested in a feature spec. |
| 86 | +- Inline styles are acceptable for dynamic editor geometry such as note positions, widths, grid coordinates, and velocity heights. |
| 87 | + |
| 88 | +## Testing Rules |
| 89 | + |
| 90 | +- Keep production code under `src/`; place unit tests under `tests/unit/`. |
| 91 | +- Add integration tests under `tests/integration/` only when a task needs multi-module workflow coverage. |
| 92 | +- Do not add an end-to-end test framework or `tests/e2e/` until a feature spec calls for browser flow testing. |
| 93 | +- Keep `tsconfig.test.json` in sync with test locations so `npm run typecheck` checks test files. |
| 94 | +- Do not remove tests or checks to make a task pass. |
| 95 | + |
| 96 | +## Issue Workflow |
| 97 | + |
| 98 | +- Use GitHub Issues as the task queue for feature work, bugs, and larger refactors. |
| 99 | +- Follow `PLANS.md` `Active Issue Order` when choosing the next issue unless the user gives a different priority. |
| 100 | +- Prefer one issue per feature spec or focused bug. |
| 101 | +- Link issues to feature documents under `docs/features/` when applicable. |
| 102 | +- Use branch names that include the issue number when possible: |
| 103 | + - `feat/<issue-number>-<short-name>` |
| 104 | + - `fix/<issue-number>-<short-name>` |
| 105 | + - `docs/<issue-number>-<short-name>` |
| 106 | +- PRs should reference the issue they address. |
| 107 | +- Use `Closes #<issue-number>` only when the PR fully completes the issue. |
| 108 | +- Do not close issues unless the acceptance criteria are met. |
| 109 | +- Do not create duplicate issues. Search existing open issues first when possible. |
| 110 | +- Do not create issues for tiny typo fixes or trivial cleanup unless requested. |
| 111 | + |
| 112 | +## Git and PR Expectations |
| 113 | + |
| 114 | +- Work on a focused branch when possible. |
| 115 | +- Open PRs against `develop` by default unless a maintainer explicitly requests another base branch. |
| 116 | +- Keep commits scoped to the task. |
| 117 | +- Use conventional commit messages when practical. |
| 118 | +- PR summaries should explain what changed, how it was tested, and known limitations. |
| 119 | +- Do not remove tests or checks to make a task pass. |
| 120 | +- Do not merge PRs automatically. |
| 121 | + |
| 122 | +## Constraints and Do-Not Rules |
| 123 | + |
| 124 | +- Do not implement production DAW features unless the active task asks for them. |
| 125 | +- Do not add sample files unless the active task asks for them. |
| 126 | +- Do not add `CHANGELOG.md` for now. |
| 127 | +- Do not store runtime-only audio objects in project JSON. |
| 128 | +- Do not make broad refactors during feature work. |
| 129 | +- Do not introduce new runtime dependencies without documenting why they are needed. |
| 130 | +- Do not couple React components to Web Audio scheduling internals. |
| 131 | +- Do not change documented model semantics without updating the relevant docs. |
| 132 | + |
| 133 | +## Definition of Done |
| 134 | + |
| 135 | +- Requested behavior implemented. |
| 136 | +- Relevant docs updated if needed. |
| 137 | +- TypeScript passes. |
| 138 | +- Lint passes. |
| 139 | +- Tests pass. |
| 140 | +- Production build passes. |
| 141 | +- PR summary includes testing and known limitations. |
| 142 | + |
| 143 | +## Verification |
| 144 | + |
| 145 | +Run applicable checks before opening a PR: |
| 146 | + |
| 147 | +```bash |
| 148 | +npm run typecheck --if-present |
| 149 | +npm run lint --if-present |
| 150 | +npm run test --if-present |
| 151 | +npm run build --if-present |
| 152 | +``` |
| 153 | + |
| 154 | +If the project scaffold does not exist yet, record that the npm scripts are not available and that `docs/features/01-project-scaffold.md` must add them. |
0 commit comments