Skip to content

Commit b77bd0b

Browse files
vipmaxvipmax
committed
Fixed build
1 parent 4abce0b commit b77bd0b

34 files changed

Lines changed: 4217 additions & 186 deletions

‎AGENTS.md‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
# AGENTS.md
2+
3+
This file provides guidance for AI coding agents working with the Anycode codebase.
4+
5+
## Project Overview
6+
7+
Anycode is a web-based IDE with a Rust backend and React frontend. It provides code editing, file management, terminal emulation, LSP integration, and AI agent support via the Agent Client Protocol (ACP).
8+
9+
## Repository Structure
10+
11+
```
12+
anycode_refactor/
13+
├── anycode/ # React frontend application
14+
├── anycode-base/ # Core editor library (TypeScript, Tree-Sitter)
15+
├── anycode-react/ # React wrapper for the editor
16+
├── anycode-backend/ # Rust backend (Axum, Tokio, Socket.IO)
17+
└── anycode-example/ # Example usage of the editor library
18+
```
19+
20+
## Tech Stack
21+
22+
### Frontend
23+
- React 19, TypeScript, Vite
24+
- Tree-Sitter (WASM) for syntax parsing
25+
- Socket.IO for WebSocket communication
26+
- xterm.js for terminal emulation
27+
28+
### Backend
29+
- Rust with Axum web framework
30+
- Tokio async runtime
31+
- Socket.IO for real-time communication
32+
- LSP integration for language intelligence
33+
- ACP for AI agent integration
34+
35+
## Development Commands
36+
37+
### Frontend (anycode/)
38+
```bash
39+
pnpm install # Install dependencies
40+
pnpm dev # Start dev server (localhost:5173)
41+
pnpm build # Production build
42+
```
43+
44+
### Backend (anycode-backend/)
45+
```bash
46+
cargo build --release # Build release binary
47+
cargo run --release # Run the backend server
48+
cargo test # Run tests
49+
```
50+
51+
### Core Library (anycode-base/)
52+
```bash
53+
pnpm install # Install dependencies
54+
pnpm build # Build the library
55+
pnpm test # Run tests
56+
```
57+
58+
## Key Files
59+
60+
### Frontend (anycode/)
61+
- `App.tsx` - Main React component, manages all UI state
62+
- `types.ts` - TypeScript interfaces
63+
- `agents.ts` - AI agent configuration
64+
- `components/agent/` - ACP dialog and message components
65+
66+
### Backend (anycode-backend/src/)
67+
- `main.rs` - Entry point, server setup
68+
- `app_state.rs` - Shared application state
69+
- `handlers/io_handler.rs` - File I/O operations
70+
- `handlers/lsp_handler.rs` - LSP request handling
71+
- `handlers/terminal_handler.rs` - Terminal management
72+
- `handlers/acp_handler.rs` - ACP message handling
73+
- `lsp.rs` - LSP process management
74+
- `acp.rs` - ACP client implementation
75+
- `terminal.rs` - PTY management
76+
77+
### Core Editor (anycode-base/src/)
78+
- `editor.ts` - Main editor class
79+
- `renderer.ts` - Virtual rendering engine
80+
- `code.ts` - Code manipulation
81+
- `actions.ts` - Editor actions
82+
- `langs/` - Language configurations
83+
84+
## Architecture Notes
85+
86+
### Communication
87+
All frontend-backend communication uses Socket.IO WebSockets with event-based messaging:
88+
- File operations: `open_file`, `save_file`, `create_file`, `delete_file`
89+
- LSP: `lsp_completion`, `lsp_definition`, `lsp_hover`, `lsp_references`
90+
- Terminal: `create_terminal`, `terminal_input`, `resize_terminal`
91+
- ACP: `acp_start`, `acp_stop`, `acp_send`, `acp_message`
92+
93+
### State Management
94+
- Frontend uses React state with persistence via localStorage
95+
- Backend maintains shared state via `Arc<AppState>` with Tokio mutexes
96+
97+
### Editor Architecture
98+
The editor uses a virtual rendering approach for performance:
99+
1. Tree-Sitter parses code into AST
100+
2. Only visible lines are rendered to DOM
101+
3. Scroll events trigger re-render of visible region
102+
103+
## Code Style
104+
105+
### TypeScript/React
106+
- Functional components with hooks
107+
- TypeScript strict mode
108+
- CSS modules for styling
109+
110+
### Rust
111+
- Standard Rust formatting (`cargo fmt`)
112+
- Error handling with `anyhow` and `thiserror`
113+
- Async/await with Tokio
114+
115+
## Testing
116+
117+
### Frontend
118+
```bash
119+
cd anycode-base && pnpm test # Editor library tests
120+
```
121+
122+
### Backend
123+
```bash
124+
cd anycode-backend && cargo test # Rust tests
125+
```
126+
127+
## Common Tasks
128+
129+
### Adding a new Socket.IO event
130+
1. Define handler in appropriate `handlers/*.rs` file
131+
2. Register handler in `main.rs` socket setup
132+
3. Add corresponding frontend emit/listener in React components
133+
134+
### Adding LSP support for a new language
135+
1. Add language server binary/command to `lsp.rs`
136+
2. Add language configuration in `anycode-base/src/langs/`
137+
3. Map file extension to language ID
138+
139+
### Adding a new AI agent
140+
1. Add agent configuration in `anycode/agents.ts`
141+
2. Ensure ACP compatibility in backend `acp.rs`
142+
143+
## Important Considerations
144+
145+
- The editor is custom-built, not Monaco/CodeMirror - changes require understanding Tree-Sitter and virtual rendering
146+
- WebSocket events are the primary communication method - REST is not used
147+
- The backend serves the frontend in production (files copied to `dist/`)
148+
- LSP processes are spawned per-language and reused across files

‎about_ru.md‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
# Технический обзор проекта anycode
2+
3+
**anycode** — это высокопроизводительная веб-IDE, предназначенная для написания, редактирования и управления кодом прямо в браузере. Проект создан с упором на скорость и поддерживает широкий спектр языков программирования.
4+
5+
## Технологический стек
6+
7+
### Бэкенд (Rust)
8+
9+
- **Tokio**: Асинхронный рантайм, являющийся стандартом для написания производительных сетевых приложений на Rust.
10+
- **Axum**: Минималистичный и мощный веб-фреймворк, используемый для маршрутизации HTTP-запросов.
11+
- **Socketioxide**: Реализация сервера `Socket.IO`, обеспечивающая надежную двунаправленную связь с клиентом в реальном времени.
12+
- **LSP-types**: Набор структур данных для удобной работы с протоколом LSP.
13+
14+
### Фронтенд (TypeScript/React)
15+
16+
- **React & TypeScript**: Основа для создания интерактивного и строго типизированного пользовательского интерфейса.
17+
- **Vite**: Современный сборщик, обеспечивающий практически мгновенную горячую перезагрузку модулей (HMR) и быструю сборку проекта.
18+
- **PNPM**: Эффективный менеджер пакетов, идеально подходящий для монорепозиториев благодаря своей системе хранения пакетов.
19+
20+
## Архитектура и взаимодействие компонентов
21+
22+
Проект имеет монорепозиторную архитектуру, управляемую с помощью `pnpm workspaces`. Это позволяет централизованно управлять зависимостями и упрощает взаимодействие между пакетами.
23+
24+
- `anycode-backend/` (Rust): Серверная часть, которая служит мостом между веб-интерфейсом и локальной системой пользователя. Фронтенд общается с бэкендом через **WebSockets** (с использованием `Socket.IO`), отправляя запросы на чтение/запись файлов, поиск, запуск терминала и взаимодействие с LSP.
25+
- `anycode-base/`: "Движок" редактора. Этот пакет не зависит от UI-фреймворков и содержит всю основную логику:
26+
- Управление состоянием редактора (текст, курсор, выделение).
27+
- Интеграция с `web-tree-sitter` для парсинга кода в реальном времени.
28+
- Реализация виртуализированного рендеринга для отображения только видимой части файла, что обеспечивает высокую производительность при работе с большими объемами кода.
29+
- `anycode-react/`: React-компонент, который оборачивает `anycode-base` и предоставляет ему React-контекст, управляя его жизненным циклом и событиями.
30+
- `anycode/`: Основное приложение, которое собирает все части вместе. Оно использует `anycode-react` для отображения редактора, а также реализует остальные элементы интерфейса (файловый менеджер, терминал) и логику их взаимодействия с бэкендом.
31+
32+
## Ключевые функции: детальный обзор
33+
34+
### Движок редактора
35+
36+
Ядро `anycode` — это собственный движок, построенный на базе `anycode-base`. Его ключевые особенности:
37+
- **Парсинг с помощью Tree-sitter**: Вместо использования простых регулярных выражений, редактор строит полное синтаксическое дерево (AST) кода. Это позволяет реализовать точную и быструю подсветку синтаксиса, а также является основой для более сложных функций анализа кода.
38+
- **Управление текстом**: Для эффективной работы с текстом используется библиотека `vscode-textbuffer`, которая оптимизирована для частых вставок и удалений, характерных для текстовых редакторов.
39+
40+
### Виртуализация рендеринга: как это работает
41+
42+
Ключ к производительности редактора при работе с большими файлами — это техника виртуализации. Вместо того чтобы наивно отображать тысячи DOM-узлов для каждой строки, `anycode` гарантирует, что в DOM всегда находится лишь небольшое, постоянное количество элементов.
43+
44+
1. **Viewport (Окно просмотра)**: Основная идея — рендерить только те строки, которые физически видны пользователю. Эта видимая область называется "viewport". Количество отображаемых строк вычисляется на основе высоты viewport и высоты одной строки. Например, если высота окна 800px, а высота строки 20px, в DOM будет находиться всего около 40 элементов строк плюс небольшой буфер.
45+
46+
2. **Spacers (Распорки)**: Чтобы полоса прокрутки браузера отражала реальный размер файла (а не только размер видимой части), используются два вспомогательных элемента-"распорки" (`div`):
47+
- **Верхний спейсер**: Располагается над видимыми строками. Его высота равна суммарной высоте всех строк, находящихся *выше* viewport.
48+
- **Нижний спейсер**: Располагается под видимыми строками. Его высота равна суммарной высоте всех строк *ниже* viewport.
49+
Эти спейсеры "растягивают" контейнер до полного размера файла, обеспечивая корректное поведение скроллбара.
50+
51+
3. **Динамическое обновление при скролле**: При прокрутке происходит следующее:
52+
- **Прокрутка вниз**: Строки, уходящие за верхнюю границу viewport, удаляются из DOM. На их место внизу добавляются новые строки, которые должны стать видимыми. При этом высота верхнего спейсера увеличивается, а нижнего — уменьшается.
53+
- **Прокрутка вверх**: Процесс обратный: строки, уходящие за нижнюю границу, удаляются, а сверху добавляются новые. Высота верхнего спейсера уменьшается, а нижнего — увеличивается.
54+
55+
Этот механизм гарантирует, что независимо от размера файла (будь то 100 строк или 100 тысяч строк), количество DOM-элементов остается постоянным, что и обеспечивает высочайшую производительность и отзывчивость интерфейса.
56+
57+
### Рендеринг и редактирование кода
58+
59+
Производительность редактора достигается за счет комбинации нескольких техник:
60+
61+
- **Высокоэффективное редактирование**: Процесс внесения изменений происходит в несколько этапов, каждый из которых максимально оптимизирован:
62+
1. **Обновление модели текста**: Изменение (вставка или удаление символа) сначала применяется к структуре данных в `vscode-textbuffer`.
63+
2. **Инкрементальный парсинг**: Далее информация об изменении передается в `tree-sitter`. Ключевое преимущество `tree-sitter` в том, что он является **инкрементальным парсером**. Ему не нужно заново анализировать весь файл. Он перестраивает только ту часть синтаксического дерева, которая была затронута изменением. Этот процесс занимает доли миллисекунд даже для очень больших файлов.
64+
3. **Обновление кеша и перерисовка**: После обновления дерева пересчитывается информация для подсветки затронутых строк. Эти данные обновляются в кеше строк, и редактор точечно обновляет только измененные DOM-элементы.
65+
66+
Благодаря такому подходу, где на каждом шаге избегается полная переобработка данных, редактирование кода ощущается мгновенным. В результате применения этих оптимизаций, таких как виртуализация, кеширование и инкрементальный парсинг, достигается исключительно плавное взаимодействие с редактором: курсор, выделение и скроллинг работают нативно, без задержек.
67+
68+
### Интеграция с Language Server Protocol (LSP)
69+
70+
Бэкенд на Rust выступает в роли клиента для различных языковых серверов (например, `rust-analyzer` для Rust, `gopls` для Go).
71+
1. Фронтенд отправляет информацию о действиях пользователя (например, наведение мыши на символ) на бэкенд.
72+
2. Бэкенд перенаправляет этот запрос соответствующему языковому серверу по стандартному протоколу LSP.
73+
3. Получив ответ (например, информацию о типе или документацию), бэкенд отправляет его обратно на фронтенд, который отображает подсказку.
74+
75+
### Встроенный терминал
76+
77+
Интегрированный терминал — это комбинация двух технологий:
78+
- **`Xterm.js`** на фронтенде: Мощная библиотека для эмуляции терминала в браузере, которая отвечает за рендеринг текста, обработку ввода и поддержку таких функций, как цвета и стили.
79+
- **`portable-pty`** на бэкенде: Rust-библиотека, которая создает на сервере настоящий псевдотерминал (pty) и подключает к нему системную оболочку (например, `bash` или `zsh`). Весь ввод и вывод из этой оболочки передается на фронтенд через WebSockets.

0 commit comments

Comments
 (0)