GEMINI.md

1## React & Ink (CLI UI)
2 
3- **Side Effects**: Use reducers for complex state transitions; avoid `setState`
4  triggers in callbacks.
5- Always fix react-hooks/exhaustive-deps lint errors by adding the missing
6  dependencies.
7- **Shortcuts**: only define keyboard shortcuts in
8  `packages/cli/src/ui/key/keyBindings.ts`
9- Do not implement any logic performing custom string measurement or string
10  truncation. Use Ink layout instead leveraging ResizeObserver as needed. When
11  using `ResizeObserver`, prefer the `useCallback` ref pattern (as seen in
12  `MaxSizedBox.tsx`) to ensure size measurements are captured as soon as the
13  element is available, avoiding potential rendering timing issues.
14- Avoid prop drilling when at all possible.
15 
16## Testing
17 
18- **Utilities**: Use `renderWithProviders` and `waitFor` from
19  `packages/cli/src/test-utils/`.
20- **Snapshots**: Use `toMatchSnapshot()` to verify Ink output.
21- **SVG Snapshots**: Use `await expect(renderResult).toMatchSvgSnapshot()` for
22  UI components whenever colors or detailed visual layout matter. SVG snapshots
23  capture styling accurately. Make sure to await the `waitUntilReady()` of the
24  render result before asserting. After updating SVG snapshots, always examine
25  the resulting `.svg` files (e.g. by reading their content or visually
26  inspecting them) to ensure the render and colors actually look as expected and
27  don't just contain an error message.
28- **Mocks**: Use mocks as sparingly as possible.
29