Open
Conversation
WalkthroughВведено новий файл Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Коментарі ментора✅ Хорошо: Документація чітка, структурована, покриває архітектурні вимоги та захист критичних файлів.
❌ Вимога: Додайте контактну особу/процес для затвердження змін захищених файлів, щоб не виникало невизначеностей під час роботи агентів. 🚥 Pre-merge checks | ✅ 2 | ❌ 5❌ Failed checks (5 warnings)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@AGENTS.md`:
- Around line 7-16: Update the "Architecture Constraints" section into a fuller
"Architecture" overview: keep existing constraints but add concise descriptions
of the main components (Scene, Element), the action system (actionManager and
dispatch-only updates), the central app state shape (AppState and where it
lives), and a more detailed rendering pipeline (Scene -> renderScene() -> canvas
context including any update/draw phases, batching or invalidation strategy, and
how Element instances are reconciled), referencing these symbols (Scene,
Element, actionManager, AppState, renderScene, canvas context) so readers can
locate code; preserve the prohibition points (no redux/konva/etc.) but move them
to a "Constraints" subsection under the new Architecture section.
- Around line 1-48: AGENTS.md is missing required sections; add four new
headings after the Purpose section: "Project Overview" (2–5 sentences describing
Excalidraw as a collaborative whiteboard app), "Tech Stack" (bullet list
including React, TypeScript, Vite, Yarn workspaces, Vitest), "Project Structure"
(short description of the monorepo layout with packages/, excalidraw-app/, and
main directories like src/ and packages/), and "Key Commands" (list common
commands: yarn dev, yarn start, yarn build, yarn test); ensure headings match
the existing style and keep content concise under the symbols "Project
Overview", "Tech Stack", "Project Structure", and "Key Commands" in AGENTS.md.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: a9202a69-1eaa-490e-86b1-eb99c39d7fcf
⛔ Files ignored due to path filters (13)
ONBOARDING.mdis excluded by none and included by noneREADME.mdis excluded by none and included by noneaction-manager-state.mdcis excluded by none and included by nonearchitecture.mdcis excluded by none and included by nonecanvas-rendering.mdcis excluded by none and included by nonechange-scope.mdcis excluded by none and included by noneconventions.mdcis excluded by none and included by nonedo-not-touch.mdcis excluded by none and included by noneimplement-safe.mdis excluded by none and included by nonemodule-boundaries.mdcis excluded by none and included by nonerules-check.mdis excluded by none and included by nonetesting-requirements.mdcis excluded by none and included by nonetypescript-safety.mdcis excluded by none and included by none
📒 Files selected for processing (1)
AGENTS.md
Comment on lines
+1
to
+48
| # AGENTS.md | ||
|
|
||
| ## Purpose | ||
|
|
||
| Guidance for AI coding agents working in this repository. Follow these rules unless a human explicitly overrides them. | ||
|
|
||
| ## Architecture Constraints | ||
|
|
||
| - Use custom state management via `actionManager`; do not introduce Redux, Zustand, or MobX. | ||
| - Perform state updates through `actionManager.dispatch()` only. | ||
| - Keep core app state aligned with `AppState` in `src/types.ts`. | ||
| - Use Canvas 2D for drawing/rendering flows; do not replace with React DOM drawing. | ||
| - Preserve render flow: `Scene -> renderScene() -> canvas context`. | ||
| - Do not introduce `react-konva`, `fabric.js`, or `pixi.js`. | ||
| - Do not add new npm dependencies without explicit approval. | ||
| - Check existing utilities (for example `src/utils/`) before adding external helpers. | ||
|
|
||
| ## Code Conventions | ||
|
|
||
| - Use functional components with hooks only; avoid class components. | ||
| - Prefer named exports over default exports. | ||
| - Keep TypeScript strict; avoid `any` and `@ts-ignore`. | ||
| - Prefer `type` over `interface` for simple types. | ||
| - Use `import type { X } from "..."` for type-only imports. | ||
| - Use `kebab-case` for utility file names and `PascalCase` for component files. | ||
| - Keep tests colocated where practical (for example `ComponentName.test.tsx`). | ||
|
|
||
| ## Protected Files | ||
|
|
||
| Do not modify the following files without explicit human approval: | ||
|
|
||
| - `src/core/renderer.ts` (render pipeline) | ||
| - `src/data/restore.ts` (file format compatibility) | ||
| - `src/actions/manager.ts` (action dispatch system) | ||
| - `src/types.ts` (core type definitions) | ||
|
|
||
| If protected files must change, require: | ||
|
|
||
| 1. Understanding of dependencies and downstream impact. | ||
| 2. Running the relevant test suite. | ||
| 3. Manual verification of behavior. | ||
|
|
||
| ## Working Style | ||
|
|
||
| - Make focused, minimal changes. | ||
| - Do not refactor unrelated code. | ||
| - Preserve existing behavior unless asked to change it. | ||
| - Flag uncertainty and assumptions in your final update. |
There was a problem hiding this comment.
❌ Файл не відповідає вимогам завдання — бракує обов'язкових секцій
Згідно з вимогами до AGENTS.md, файл має містити мінімум 5 із 7 обов'язкових секцій. Наразі присутні лише 2-3 секції:
Відсутні критичні секції:
- ❌ Project Overview — необхідний опис суті проєкту Excalidraw (2-5 речень). Що це за проєкт? Whiteboard для малювання діаграм? Collaborative tool?
- ❌ Tech Stack — має бути перелік: React, TypeScript, Vite, Yarn workspaces, Vitest
- ❌ Project Structure — опис monorepo layout:
packages/,excalidraw-app/, основні директорії - ❌ Key Commands — ключові команди:
yarn build,yarn test,yarn start,yarn devтощо
Наявні секції:
- ✅ Conventions (Code Conventions) — добре описано
- ✅ Do-Not-Touch / Constraints (Protected Files) — чітко визначено
⚠️ Architecture (Architecture Constraints) — присутня частково, але описує лише обмеження, без огляду основних компонентів системи
Додатково добре:
- Working Style секція відображає learnings з пам'яті (focused changes, preserve behavior)
- Факти коректні: yarn (не npm/pnpm), actionManager, Canvas 2D
📋 Приклад структури для відсутніх секцій
Додайте після секції Purpose:
## Purpose
Guidance for AI coding agents working in this repository. Follow these rules unless a human explicitly overrides them.
+## Project Overview
+
+Excalidraw is an open-source virtual whiteboard for sketching hand-drawn like diagrams. It supports collaborative editing, export to PNG/SVG, and local-first architecture with optional cloud sync. Built as a React-based canvas editor with a focus on simplicity and user experience.
+
+## Tech Stack
+
+- **Frontend**: React 18+ with TypeScript
+- **Build Tool**: Vite
+- **Package Manager**: Yarn (workspaces enabled)
+- **Testing**: Vitest, React Testing Library
+- **Rendering**: Canvas 2D API
+
+## Project Structure
+
+Monorepo layout:
+- `packages/excalidraw/` — core library (canvas, actions, state)
+- `excalidraw-app/` — web application wrapper
+- `src/` — main source directory (components, actions, utils, types)
+- `src/tests/` — integration and unit tests
+
+## Key Commands
+
+- `yarn install` — install dependencies
+- `yarn start` — dev server (excalidraw-app)
+- `yarn build` — production build
+- `yarn test` — run Vitest suite
+- `yarn test:watch` — watch mode
+- `yarn typecheck` — TypeScript validation
+
## Architecture Constraints🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@AGENTS.md` around lines 1 - 48, AGENTS.md is missing required sections; add
four new headings after the Purpose section: "Project Overview" (2–5 sentences
describing Excalidraw as a collaborative whiteboard app), "Tech Stack" (bullet
list including React, TypeScript, Vite, Yarn workspaces, Vitest), "Project
Structure" (short description of the monorepo layout with packages/,
excalidraw-app/, and main directories like src/ and packages/), and "Key
Commands" (list common commands: yarn dev, yarn start, yarn build, yarn test);
ensure headings match the existing style and keep content concise under the
symbols "Project Overview", "Tech Stack", "Project Structure", and "Key
Commands" in AGENTS.md.
Comment on lines
+7
to
+16
| ## Architecture Constraints | ||
|
|
||
| - Use custom state management via `actionManager`; do not introduce Redux, Zustand, or MobX. | ||
| - Perform state updates through `actionManager.dispatch()` only. | ||
| - Keep core app state aligned with `AppState` in `src/types.ts`. | ||
| - Use Canvas 2D for drawing/rendering flows; do not replace with React DOM drawing. | ||
| - Preserve render flow: `Scene -> renderScene() -> canvas context`. | ||
| - Do not introduce `react-konva`, `fabric.js`, or `pixi.js`. | ||
| - Do not add new npm dependencies without explicit approval. | ||
| - Check existing utilities (for example `src/utils/`) before adding external helpers. |
There was a problem hiding this comment.
Наразі описано лише обмеження (constraints), але відсутній огляд основних компонентів системи. За вимогами, Architecture секція має включати:
- Основні компоненти (Scene, Element, Action system, Canvas renderer)
- State management підхід (actionManager, AppState flow)
- Rendering pipeline (детальніше, ніж просто "Scene -> renderScene()")
Поточний вміст — це радше "Architecture Prohibitions", а не повноцінний архітектурний огляд.
♻️ Рекомендація: розширити до Architecture
Перейменуйте та доповніть секцію:
-## Architecture Constraints
+## Architecture
+
+### Core Components
+
+- **Scene** — manages collection of elements and their state
+- **Element** — drawable entities (rectangle, ellipse, arrow, text, etc.)
+- **Action System** — commands that modify state via `actionManager.dispatch()`
+- **Canvas Renderer** — renders elements to Canvas 2D context
+- **State Management** — centralized via `actionManager`, typed in `AppState`
+
+### Rendering Pipeline
+
+`Scene -> renderScene() -> canvas context` — all drawing goes through Canvas 2D API, not React DOM.
+
+### Constraints
- Use custom state management via `actionManager`; do not introduce Redux, Zustand, or MobX.
- Perform state updates through `actionManager.dispatch()` only.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| ## Architecture Constraints | |
| - Use custom state management via `actionManager`; do not introduce Redux, Zustand, or MobX. | |
| - Perform state updates through `actionManager.dispatch()` only. | |
| - Keep core app state aligned with `AppState` in `src/types.ts`. | |
| - Use Canvas 2D for drawing/rendering flows; do not replace with React DOM drawing. | |
| - Preserve render flow: `Scene -> renderScene() -> canvas context`. | |
| - Do not introduce `react-konva`, `fabric.js`, or `pixi.js`. | |
| - Do not add new npm dependencies without explicit approval. | |
| - Check existing utilities (for example `src/utils/`) before adding external helpers. | |
| ## Architecture | |
| ### Core Components | |
| - **Scene** — manages collection of elements and their state | |
| - **Element** — drawable entities (rectangle, ellipse, arrow, text, etc.) | |
| - **Action System** — commands that modify state via `actionManager.dispatch()` | |
| - **Canvas Renderer** — renders elements to Canvas 2D context | |
| - **State Management** — centralized via `actionManager`, typed in `AppState` | |
| ### Rendering Pipeline | |
| `Scene -> renderScene() -> canvas context` — all drawing goes through Canvas 2D API, not React DOM. | |
| ### Constraints | |
| - Use custom state management via `actionManager`; do not introduce Redux, Zustand, or MobX. | |
| - Perform state updates through `actionManager.dispatch()` only. | |
| - Keep core app state aligned with `AppState` in `src/types.ts`. | |
| - Use Canvas 2D for drawing/rendering flows; do not replace with React DOM drawing. | |
| - Preserve render flow: `Scene -> renderScene() -> canvas context`. | |
| - Do not introduce `react-konva`, `fabric.js`, or `pixi.js`. | |
| - Do not add new npm dependencies without explicit approval. | |
| - Check existing utilities (for example `src/utils/`) before adding external helpers. |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@AGENTS.md` around lines 7 - 16, Update the "Architecture Constraints" section
into a fuller "Architecture" overview: keep existing constraints but add concise
descriptions of the main components (Scene, Element), the action system
(actionManager and dispatch-only updates), the central app state shape (AppState
and where it lives), and a more detailed rendering pipeline (Scene ->
renderScene() -> canvas context including any update/draw phases, batching or
invalidation strategy, and how Element instances are reconciled), referencing
these symbols (Scene, Element, actionManager, AppState, renderScene, canvas
context) so readers can locate code; preserve the prohibition points (no
redux/konva/etc.) but move them to a "Constraints" subsection under the new
Architecture section.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Day 2: Workshop Assignment
Учасник:
Чеклист
.cursor/rules/(кожне з секцією "How to verify").cursor/commands/AGENTS.md— заповнений повністю (контекст проєкту, команди, архітектура, конвенції)yarn buildпроходить успішноБонус (необов'язково)
npx repomix --skill-generate.cursorrules— legacy-формат правил для CursorНотатки
Summary by CodeRabbit
Документація