Initial commit: MVP structure + Cursor documentation + Onboarding components

This commit is contained in:
Apple
2025-11-13 06:12:20 -08:00
commit 5520665600
58 changed files with 7683 additions and 0 deletions

View File

@@ -0,0 +1,33 @@
# MicroDAO - Огляд системи
## Що таке MicroDAO
MicroDAO — це приватна мережа ШІ-агентів для малих спільнот (5-50 учасників). Система дозволяє створювати спільноти (teams) з автоматичним створенням micro-DAO, публічні та приватні канали для спілкування, проєкти з задачами, базу знань (Co-Memory) та приватних ШІ-агентів, які допомагають у роботі команди.
## Ключові модулі
1. **Auth** — авторизація через magic-link (email)
2. **Teams** — спільноти з автоматичним створенням micro-DAO
3. **Channels** — публічні та приватні канали для спілкування
4. **Messages** — повідомлення в каналах з підтримкою markdown
5. **Co-Memory** — база знань (файли, посилання, wiki)
6. **Follow-ups** — задачі, створені з повідомлень
7. **Projects** — проєкти з канбан-дошками (Backlog / In Progress / Done)
8. **Agents** — приватні ШІ-агенти для кожної спільноти
9. **Search** — пошук по повідомленнях та документах (Meilisearch)
## Режими спільнот
- **Public** — публічний канал, гості можуть читати та реєструватися як глядачі (viewer-type)
- **Confidential** — тільки запрошені учасники, E2EE для чатів, без публічного індексування
## Посилання на документацію
- `01_product_brief_mvp.md` — Product Requirements для MVP
- `02_architecture_basics.md` — Технічна архітектура
- `03_api_core_snapshot.md` — API контракти для MVP
- `04_ui_ux_onboarding_chat.md` — UI/UX специфікація
- `05_coding_standards.md` — Стандарти кодування
- `06_tasks_onboarding_mvp.md` — Задачі для реалізації
- `07_testing_checklist_mvp.md` — Чеклист тестування

View File

@@ -0,0 +1,154 @@
# Product Brief - MVP
## 1. Мета
Дати першим користувачам (фаунерам спільнот та їхнім командам) простий спосіб:
- створити свою micro-DAO (спільноту),
- налаштувати базову приватність (public / confidential),
- почати працювати в чаті з каналами,
- керувати простими задачами в проєктах,
- спробувати приватного AI-агента всередині спільноти.
Ціль: **реальний робочий простір для 12 команд**, а не демо-скріншоти.
## 2. Персони
1. **Фаундер спільноти / команди**
- Хоче створити свій "маленький всесвіт": чат, задачі, базу знань.
- Цінує приватність, простоту і контроль над даними.
- Не хоче розбиратися в технічних деталях DAO / токенів.
2. **Учасник команди**
- Приходить за інвайтом або з публічного каналу.
- Хоче: писати в чат, бачити задачі, отримувати фоллоу-апи.
- Агента сприймає як "корисного помічника", а не як складну систему.
3. **Ранні технічні тестувальники**
- Можуть пробачити сирість інтерфейсу.
- Важливо: стабільність базових флоу, зрозумілий API та логічна структура.
## 3. Ключові сценарії (Core Flows)
### 3.1. Onboarding: створення першої micro-DAO
1. Користувач заходить на сайт.
2. Логін через email (magic-link).
3. В онбордингу задає:
- назву спільноти,
- режим: Public / Confidential,
- перший канал (наприклад, `#general`),
- базові налаштування приватного агента.
4. Потрапляє в основний інтерфейс чату своєї нової спільноти.
### 3.2. Публічний канал як точка входу
1. Гість відкриває публічний канал за посиланням `/c/:slug`.
2. Читає стрічку (read-only).
3. Через форму "Зареєструватися в каналі" вводить email + ім'я + viewer-type.
4. Стає учасником (Member / Visitor) і може писати в канал.
### 3.3. Командний чат
1. Учасники пишуть повідомлення в канали.
2. Можуть створювати follow-up із будь-якого повідомлення.
3. Бачать базову активність (нові повідомлення, треди).
### 3.4. Follow-ups
1. З повідомлення в чаті користувач натискає "Створити follow-up".
2. Задає: назву, відповідального (assignee), дедлайн (опційно).
3. У вкладці "Follow-ups" бачить:
- Assigned to me,
- All (простий список задач із статусом).
### 3.5. Проєкти та задачі (Kanban-lite)
1. Користувач створює проєкт для команди.
2. Додає задачі (title, статус, опційний due).
3. Переміщує задачі між колонками Backlog / In Progress / Done.
4. Фільтрує задачі за статусом (мінімально).
### 3.6. Приватний агент
1. У налаштуваннях спільноти або онбордингу вмикається "Team Assistant".
2. У спеціальному чаті з агентом користувач ставить питання по контексту спільноти.
3. Агент відповідає, використовуючи:
- історію чату (контекст сесії),
- в майбутньому — Co-Memory і документи (для MVP можна обмежитися контекстом чату).
## 4. Обсяг MVP (In Scope)
### 4.1. Функції
- **Auth:**
- Логін через email (magic-link).
- **Teams / micro-DAO:**
- Створення спільноти.
- Перегляд списку моїх спільнот.
- Перемикач режиму: Public / Confidential.
- **Channels:**
- Створення public / group каналів.
- Список каналів для обраної спільноти.
- **Messages:**
- Відправка / отримання повідомлень у каналі.
- Пагінація стрічки (cursor / limit).
- **Public Channel Landing:**
- Read-only стрічка для гостей.
- Форма реєстрації (email + ім'я + viewer-type).
- **Follow-ups:**
- Створення follow-up з повідомлення.
- Перегляд списку follow-up (фільтр по assignee / статусу).
- **Projects & Tasks (спрощено):**
- Створення проєкту.
- Додавання задач.
- Зміна статусу задачі між базовими колонками.
- **Agents:**
- Створення / наявність одного "Team Assistant".
- Базовий чат з агентом через API існуючого LLM-провайдера.
- **Settings:**
- Мова інтерфейсу (мінімум: uk + en).
- Часовий пояс.
- Прості параметри агента (on/off, мова, профіль).
### 4.2. Нефункціональні вимоги
- Стабільність під 1050 активних користувачів.
- Чат відповідає ≤ 300 мс (до LLM-викликів).
- Мінімальна мобільна адаптація (читання + базове введення).
## 5. Що НЕ входить в MVP (Out of Scope)
- Повна реалізація токеноміки (RINGK, 1T, KWT, DAARION) та стейкінгу.
- Governance (пропозиції, голосування, timelock).
- Повний Co-Memory (файли, wiki, RAG-індексація) — можна мати лише базові заглушки.
- Складні інтеграції (Gmail, Calendar, Notion та ін.).
- Просунуте управління правами (детальний RBAC/UI для ролей, кастомні ACL).
- Повний multi-agent orchestration (мережа агентів, роутинг між моделями).
- Робототехніка та фізичні інтеграції (на рівні MVP лише як стратегічна перспектива).
## 6. Успіх MVP (Success Criteria)
- 12 живі спільноти (520 людей), що:
- щодня використовують чат,
- створюють проєкти й задачі,
- користуються хоча б одним агентом.
- Мінімум 35 сесій на користувача на тиждень.
- Нуль критичних блокерів:
- логін завжди працює,
- повідомлення не губляться,
- онбординг можна пройти від початку до кінця без допомоги девів.
## 7. Примітки для розробників
- Цей brief — **орієнтир, а не жорсткий контракт**.
- Якщо функція не потрібна для основних флоу (описаних вище) — її можна перенести в наступні ітерації.
- Головний пріоритет: **простий, стабільний досвід для перших реальних користувачів**, навіть ціною урізаного функціоналу.

View File

@@ -0,0 +1,239 @@
# 02 — MicroDAO Architecture Basics (MVP)
Цей документ дає Cursor і розробникам стисле уявлення про архітектуру MicroDAO, необхідне для реалізації перших функцій MVP.
## 1. Загальний огляд архітектури
MicroDAO складається з:
- **Front-end SPA** (React + TypeScript)
- **API Gateway** (`https://api.microdao.xyz/v1`)
- **Core Services** (Teams, Channels, Messages, Followups, Projects, Agents)
- **PostgreSQL** — основна база даних
- **NATS JetStream** — message bus (події, outbox-патерн)
- **Meilisearch** — індексація і пошук
- **S3-compatible storage** — файли
- **WebSockets** — оновлення повідомлень у реальному часі
Джерела:
- Data Model & Event Catalog
- Tech Spec / Технічний опис MicroDAO
- API Specification (OpenAPI 3.1)
## 2. Стек MVP
- **Frontend:** React 18, TypeScript, Vite або Next SPA-режим
- **State:** React Query / TanStack Query
- **Design System:** базовий UI-компонентний набір (кнопки, поля, layout)
- **Backend:** Go або Node (вже залежить від вашої реалізації — Cursor адаптується)
- **Auth:** Magic-link email (JWT)
- **Transport:** REST + WebSockets
## 3. Основні модулі
### 3.1. Auth Service
- Відповідає за:
- `POST /auth/login-email`
- `POST /auth/exchange`
- Видає JWT (користувач, локаль, tz).
- Email з кодом / magic-link відправляє окремий SMTP-модуль.
- Після входу SPA зберігає токен та ініціалізує сесію.
### 3.2. Teams / MicroDAO Service
- Створення спільноти — автоматично створює micro-DAO:
- `POST /teams`
- `PATCH /teams/{id}` — public/confidential
- Зберігає:
- id спільноти
- slug
- режим (`public`, `confidential`)
- Members / Guardians
- Взаємодіє з Channels, Messages, Projects, Agents.
### 3.3. Channels Service
- Створення каналів:
- `POST /channels`
- Типи:
- `public` — доступні гостям (read-only)
- `group` — приватні групові канали
- Channel data:
- team_id
- type
- mode (public/confidential)
### 3.4. Messaging Service
- Головне ядро MVP.
- API:
- `GET /channels/{id}/messages`
- `POST /channels/{id}/messages`
- `PATCH /messages/{id}`
- `DELETE /messages/{id}`
- Зберігає:
- текстові повідомлення
- автора (user_id або agent_id)
- E2EE шифротекст у confidential режимі
- WebSocket транслює нові повідомлення в реальному часі.
### 3.5. Followups Service
- Легкий таскер, прив'язаний до повідомлень.
- API:
- `POST /followups`
- `GET /followups?assignee=...`
- Статуси:
- `open`, `in_progress`, `done`
- Використовується для персональних нагадувань і мікро-задач.
### 3.6. Projects & Tasks Service (Kanban-lite)
- API:
- `POST /projects`
- `GET /projects`
- `POST /projects/{id}/tasks`
- `GET /projects/{id}/tasks`
- Статуси задач:
- `backlog`, `in_progress`, `review`, `done`
- Проста Kanban-дошка для MVP.
### 3.7. Agents Service
- Зберігає приватних агентів користувача або команди.
- API:
- `GET /agents`
- `POST /agents`
- Для MVP:
- один агент «Team Assistant»
- мінімальний чат з LLM
- Під капотом можна використовувати будь-який зовнішній LLM API.
### 3.8. Search Service
- На базі Meilisearch.
- API:
- `GET /search?q=...&scope=messages|docs|tasks`
- MVP:
- індексація публічних повідомлень + задач.
## 4. Дані та моделі
### 4.1. База даних (PostgreSQL)
Згідно з Data Model & Event Catalog:
- `users`
- `teams`, `team_members`
- `channels`, `messages`, `reactions`
- `followups`
- `projects`, `tasks`
- `agents`, `agent_runs`
- `files`
- `audit_log`
- мінімальні індекси для пошуку повідомлень
**ID формати:** `ulid` або `ksuid` (обов'язково глобально унікальні).
### 4.2. Message Bus (NATS JetStream)
Використовується не на всіх етапах MVP, але:
- дозволяє публікувати події:
- `message.created`
- `followup.created`
- `task.created`
- забезпечує надійний outbox pattern.
### 4.3. Пошукові індекси (Meilisearch)
Структури документів:
- **Messages**: id, team_id, channel_id, created_at, body_plain (якщо public)
- **Tasks**: id, project_id, title, status, priority, labels
- **Docs** (можна не включати в MVP)
## 5. WebSockets
- Створений окремий WS endpoint.
- Події які обробляє фронт:
- нове повідомлення
- оновлення повідомлення
- реакція
- В MVP достатньо канального namespace:
- `/ws/channels/{id}`
## 6. Приватність та режими (Public / Confidential)
### Public Mode
- Канал доступний гостям на `/c/:slug`.
- Повідомлення індексуються у Meilisearch.
- Дані зберігаються у `messages.body_plain`.
### Confidential Mode
- Повідомлення зберігаються як `body_enc` + `key_id`.
- Клієнт розшифровує.
- Не індексується, не надсилається в Meili.
- Всі вкладення — шифротекст із pre-signed URL.
- На фронті потрібно використовувати **E2EE-хелпери** (поза scope MVP — stub OK).
## 7. API взаємодія (загальні правила)
- Усі виклики захищені Bearer JWT.
- Потрібно використовувати typed API-клієнт (можна автогенерувати зі спрощеної OpenAPI).
- Обробка помилок:
- 400 → помилка користувача
- 403 → access denied
- 404 → ресурс не знайдено
- 429 → rate limit
- 500 → системна помилка
## 8. Front-End архітектура
### 8.1. Каталоги
```
src/
api/
components/
features/
onboarding/
auth/
chat/
channels/
followups/
projects/
agents/
hooks/
layout/
routes/
store/
styles/
```
### 8.2. Рекомендовані патерни
- React Query для запитів і кешу.
- Zustand або Context для глобального стану онбордингу.
- Мовна локалізація через простий i18n dictionary.
- ErrorBoundary на рівні layout.
## 9. MVP Нефункціональні очікування
- Латентність чатів ≤ 300 мс (без LLM).
- Одночасно 1050 активних користувачів.
- Стабільна робота мобільної версії (мінімально).
- Стійкий логін, без циклів і моклих лінків.
## 10. Для Cursor
Цей документ дає базу для:
- генерації React-компонентів,
- створення нового маршруту `/onboarding`,
- реалізації каналів і чатів,
- інтеграції базового агента,
- роботи з API без необхідності читати всю специфікацію.

View File

@@ -0,0 +1,414 @@
# 03 — MicroDAO API Core Snapshot (MVP)
Цей документ — стисла витяжка з OpenAPI 3.1 специфікації MicroDAO.
Він містить тільки ті ендпоїнти, які необхідні для реалізації MVP онбордингу, чатів, задач та приватного агента.
Повна OpenAPI: див. `microdao — API Specification (OpenAPI 3.1)`.
## 1. Auth
### POST /auth/login-email
Надсилає магічний лінк користувачу на email.
**Body**
```json
{ "email": "user@example.com" }
```
**Response**
`204 No Content`
---
### POST /auth/exchange
Обмін коду з email-лінка на JWT.
**Body**
```json
{ "code": "XXXXXX" }
```
**Response 200**
```json
{
"token": "jwt-string",
"user": {
"id": "u_123",
"locale": "uk-UA",
"tz": "Europe/Kyiv"
}
}
```
---
## 2. Teams (micro-DAO)
### POST /teams
Створює нову спільноту (micro-DAO).
**Body**
```json
{ "name": "My Team" }
```
**Response 201**
```json
{
"id": "t_123",
"name": "My Team",
"slug": "my-team",
"mode": "public"
}
```
---
### PATCH /teams/{teamId}
Оновлює налаштування спільноти.
**Body**
```json
{ "mode": "public" | "confidential" }
```
**Response 200**
```json
{
"id": "t_123",
"name": "My Team",
"mode": "confidential"
}
```
---
### GET /teams
Список моїх спільнот.
**Response**
```json
{
"items": [
{ "id": "t_1", "name": "Team 1", "mode": "public" },
{ "id": "t_2", "name": "Project Alpha", "mode": "confidential" }
]
}
```
---
## 3. Channels
### POST /channels
Створює канал.
**Body**
```json
{
"team_id": "t_123",
"type": "public" | "group",
"title": "general",
"mode": "public" | "confidential"
}
```
**Response 201**
```json
{
"id": "c_123",
"team_id": "t_123",
"title": "general",
"type": "public",
"mode": "public"
}
```
---
### GET /channels/{channelId}/messages
Отримує повідомлення каналу (cursor pagination).
**Query params**
* `cursor` (optional)
* `limit` (1200)
**Response**
```json
{
"items": [
{
"id": "m_1",
"author_user_id": "u_123",
"kind": "text",
"body_plain": "Hello world",
"created_at": "2025-01-01T12:00:00Z"
}
],
"next_cursor": "abc123"
}
```
(У confidential-каналах буде `body_enc` + `key_id` замість `body_plain`.)
---
### POST /channels/{channelId}/messages
Надсилає повідомлення.
**Body**
```json
{
"kind": "text",
"body": "Привіт командо!"
}
```
**Response 201**
```json
{
"id": "m_123",
"kind": "text",
"author_user_id": "u_123",
"created_at": "2025-01-01T12:00:00Z"
}
```
---
## 4. Follow-ups
### POST /followups
Створює follow-up із повідомлення.
**Body**
```json
{
"team_id": "t_123",
"assignee_id": "u_123",
"src_message_id": "m_456",
"due": "2025-02-01T09:00:00Z"
}
```
**Response 201**
```json
{
"id": "fu_1",
"status": "open"
}
```
---
### GET /followups
Список follow-up.
**Query**
* `assignee` (optional)
* `status` (optional)
* `cursor` (optional)
**Response**
```json
{
"items": [
{
"id": "fu_1",
"status": "open",
"assignee_id": "u_123",
"due": "2025-02-01T09:00:00Z"
}
]
}
```
---
## 5. Projects & Tasks
### POST /projects
Створює проєкт.
**Body**
```json
{
"team_id": "t_123",
"name": "Website Launch",
"visibility": "public"
}
```
**Response**
```json
{
"id": "p_1",
"team_id": "t_123",
"name": "Website Launch"
}
```
---
### GET /projects
Список проєктів.
**Response**
```json
{ "items": [ { "id": "p_1", "name": "Website Launch" } ] }
```
---
### POST /projects/{projectId}/tasks
Створює задачу.
**Body**
```json
{
"title": "Design homepage",
"status": "backlog"
}
```
**Response 201**
```json
{
"id": "task_1",
"project_id": "p_1",
"status": "backlog"
}
```
---
### GET /projects/{projectId}/tasks
Отримує задачі.
**Query**
* `status` (optional)
**Response**
```json
{
"items": [
{
"id": "task_1",
"title": "Design homepage",
"status": "backlog"
}
]
}
```
---
## 6. Agents
### GET /agents
Список приватних агентів.
**Response**
```json
{
"items": [
{
"id": "ag_1",
"name": "Team Assistant",
"owner_kind": "team",
"owner_id": "t_123"
}
]
}
```
---
### POST /agents
Створює агента.
**Body**
```json
{
"owner_kind": "team",
"owner_id": "t_123",
"name": "Team Assistant",
"role": "general",
"scopes": ["chat"]
}
```
**Response**
```json
{
"id": "ag_1",
"status": "created"
}
```
---
## 7. Search
### GET /search
Глобальний пошук по команді.
**Query**
* `q` — текст
* `scope`: `messages | files | docs | tasks | people`
**Response**
```json
{
"results": [
{
"type": "message",
"id": "m_1",
"snippet": "Hello world"
}
]
}
```
---
## 8. Errors (узагальнення)
* **400** — неправильні дані
* **401** — без авторизації
* **403** — заборонено (немає прав)
* **404** — не знайдено
* **409** — конфлікт
* **429** — rate limit
* **500** — помилка сервера
Cursor повинен обробляти помилки через toast + лог у консоль.
---
## 9. Примітка
Цей документ — спрощена карта API.
Він узятий з офіційної специфікації MicroDAO і адаптований для:
* автоматичної генерації типів,
* швидкої розробки фронтенду,
* мінімізації зайвих деталей.

View File

@@ -0,0 +1,278 @@
# 04 — UI/UX Specification: Onboarding, Chat & Public Channel (MVP)
Цей документ описує екрани, компоненти та UX-флоу, необхідні для реалізації MVP MicroDAO. Без зайвих деталей — тільки те, що потрібне для роботи Cursor і фронтенду.
Джерела: UI/UX Specification — microdao (web), Test Plan, API Snapshot.
## 1. Загальні принципи UX
- Мінімалістичний інтерфейс: світла тема, чисті лінії, помірні інтервали.
- Мова інтерфейсу: українська (тексти вказані нижче).
- Основний фокус MVP:
**простота**, **читабельність**, **мінімум кліків**, **логічні флоу**.
- Усі критичні дії мають підтвердження (модалки).
- Повідомлення про помилки — короткі та зрозумілі.
## 2. Онбординг (`/onboarding`)
Онбординг реалізується як stepper (5 кроків).
Стан зберігається у локальному React state.
### Step 1 — Welcome
**UX-цілі:**
Пояснити, що таке MicroDAO та що буде далі.
**UI:**
- Заголовок: **"Створимо твою MicroDAO"**
- Підзаголовок: **"5 кроків — і твоя спільнота буде готова до роботи."**
- Кнопка: **"Почати"**
### Step 2 — Назва спільноти
**UI поля:**
- `Назва спільноти` (input, required)
- `Опис (необов'язково)` (textarea)
**UX-підказка:**
> Спільнота — це мікро-DAO. Вона матиме свій чат, агента та приватний простір.
**Кнопка:**
- **"Продовжити"**
**API:** `POST /teams`
### Step 3 — Приватність (Public / Confidential)
**UI:**
Два великі карточки-режими:
#### Карточка "Public"
- Заголовок: **Відкрита**
- Пояснення:
> Є публічний канал. Гості можуть читати та приєднатися через email.
#### Карточка "Confidential"
- Заголовок: **Приватна**
- Пояснення:
> Тільки запрошені учасники. Чати зашифровані між клієнтами.
**Кнопка:**
- **"Вибрати режим"**
**API:** `PATCH /teams/{id}`
### Step 4 — Перший канал
**UI поля:**
- Назва каналу (input, наприклад "general")
- Тип:
- `Публічний канал`
- `Приватна кімната`
**Кнопка:**
- **"Створити канал"**
**API:** `POST /channels`
### Step 5 — Агенти та пам'ять
**UI:**
Перемикачі:
- **Увімкнути приватного агента** (toggle)
- Випадаючий список мов: **Українська / English**
- Профіль агента:
- `Загальний`
- `Бізнес`
- `Технічний`
- `Креатив`
Блок пам'яті (дуже простий):
- **Що агент може памʼятати?**
- Радіо-кнопки:
- `Лише цей канал`
- `Всі канали спільноти`
- `Увесь мій MicroDAO` (опція на майбутнє, можна заблокувати)
**Кнопка:**
- **"Готово" → Перехід до чату**
## 3. Публічний канал (`/c/:slug`)
Це дуже важливий елемент MVP — публічна сторінка для залучення нових користувачів.
### 3.1. Для гостей
**UI структура:**
```
---
| Назва спільноти |
| Опис |
-----------------------------------------
## | Стрічка повідомлень (read-only) |
| Форма приєднання |
| - Імʼя |
| - Email |
| - Кнопка "Приєднатися" |
-----------------------------------------
```
**Тексти:**
- Заголовок: **Публічний канал спільноти**
- Поля:
- "Ваше ім'я"
- "Email"
- Кнопка: **"Приєднатися до спільноти"**
**API:**
- GET `/channels/{id}/messages` (публічні, без авторизації)
- POST `/auth/login-email` → exchange → auto-join public channel (viewer-type)
### 3.2. Для зареєстрованих учасників
- Показуємо повноцінний чат.
- Можливість написати повідомлення.
- У стрічці доступні треди та follow-up.
## 4. Основний Chat UI (`/t/:teamId/c/:channelId`)
Структура:
```
---
## | Sidebar (список каналів) |
## | Chat Header |
## | Messages Stream |
## | Composer (ввести повідомлення) |
---
```
### 4.1. Sidebar
**Елементи:**
- Назва спільноти
- Список каналів:
- Публічний канал
- Приватні групи
- Кнопка "+ Новий канал"
**Active state:** підсвітка поточного каналу.
### 4.2. Chat Header
- Назва каналу
- Тип (публічний / приватний)
- Кнопка меню (3 крапки):
- "Параметри каналу" (можна stub)
### 4.3. Messages Stream
#### Повідомлення містить:
- Аватар автора
- Ім'я
- Час
- Текст (markdown support)
- Меню дій:
- "Зробити follow-up"
- "Скопіювати посилання"
- "Видалити" (тільки автор)
#### Треди — опціонально
Для MVP можна зробити collapsible replies або приховати.
### 4.4. Follow-up creation
Модалка:
Поля:
- Назва (автоматично з фрагменту повідомлення)
- Відповідальний
- Дедлайн (optional)
Кнопки:
- **"Створити"**
- "Скасувати"
API:
- `POST /followups`
### 4.5. Composer
Простий інпут:
```
[Написати повідомлення… ] (Кнопка Надіслати)
```
- Підтримка Enter для відправки.
- Shift+Enter → новий рядок.
- Drag&drop файлів — out of scope.
API:
- `POST /channels/{id}/messages`
## 5. Вкладка "Follow-ups"
URL: `/t/:teamId/followups`
**UI:**
- Фільтри:
- "Assigned to me",
- "All",
- "Open / In progress / Done"
- Список:
- Назва
- Статус
- Дедлайн
- Коротке посилання на оригінальне повідомлення
API:
- `GET /followups`
## 6. Межі MVP
Що **не робимо** у цій версії:
- Немає вкладених тредів 2 рівня.
- Немає реакцій (emoji).
- Немає пересилання повідомлень.
- Немає Co-Memory (файли, документи).
- Немає складного редактора повідомлень.
- Немає налаштувань ролей (тільки Member / Viewer).
## 7. Стандарти UI
- Шрифти: System fonts.
- Primary color: #3F51F5
- Error: #E53935
- Success: #43A047
- Border radius: 8px
- Spacing: 8 / 12 / 16 / 24
## 8. Адаптивність
Minimum viable mobile support:
- Sidebar → Drawer
- Messages → 100% ширина
- Composer зафіксований знизу
- Onboarding — одна колонка
## 9. Для Cursor
При розробці:
- Всі тексти беріть з цього документа.
- Усі екрани повинні відповідати маршрутам, зазначеним у файлі.
- Важливо: onboarding flow має один глобальний state + виклики API на кожному кроці.
- Чат повинен бути повністю інтерактивним.
- Messages Stream має працювати з cursor-based pagination.

View File

@@ -0,0 +1,241 @@
# 05 — MicroDAO Coding Standards (MVP)
Цей документ визначає мінімальні стандарти коду, яким повинен відповідати фронтенд MicroDAO.
Його мета — забезпечити якість, узгодженість і стабільність розробки, особливо при використанні Cursor.
## 1. Загальні принципи
1. **Тільки TypeScript.**
Заборонено `any` та `unknown`, окрім явно позначених місць.
2. **Компоненти — функціональні.**
Не використовувати класові компоненти.
3. **Стан — мінімалістичний.**
Локальний стан → React useState
Глобальний короткочасний стан → Context або Zustand
Дані з API → React Query
4. **Ясність важливіша за магію.**
Прості компоненти, зрозумілі хуки, передбачувані сторінки.
5. **Принцип: один файл — одна відповідальність.**
## 2. Архітектура проєкту
```
src/
api/ // Typed API clients
components/ // UI components (buttons, inputs, modals)
features/ // Business-level modules (chat, onboarding, agents)
hooks/ // Reusable react hooks
layout/ // Application layout
routes/ // Route definitions
store/ // Zustand stores (optional)
styles/ // Global CSS/tokens
utils/ // Formatting, validation
```
- `features/*` містять логіку конкретних модулів.
- `components/*` — лише dumb UI-компоненти (без бізнес-логіки).
## 3. TypeScript Правила
### 3.1. Строгий режим
У `tsconfig.json`:
```json
{
"compilerOptions": {
"strict": true
}
}
```
### 3.2. Заборонено
* `any`
* `!` non-null assertion (за винятком рідкісних випадків)
* глобальний mutable state
### 3.3. API-типи
* Генеруємо типи з API Snapshot / OpenAPI.
* Типи для відповідей зберігаються в `src/api/types.ts`.
## 4. React Query (network layer)
### 4.1. Fetch wrapper
Один універсальний wrapper:
```ts
export async function api<T>(path: string, options?: RequestInit): Promise<T> {
const res = await fetch(`/v1${path}`, {
headers: {
"Content-Type": "application/json",
...options?.headers
},
...options
});
if (!res.ok) {
const err = await res.json().catch(() => ({}));
throw new Error(err.message || `Request failed: ${res.status}`);
}
return res.json();
}
```
### 4.2. Query Keys
```
["teams"]
["teams", teamId]
["channels", teamId]
["messages", channelId]
["followups", teamId]
["projects", teamId]
```
## 5. Стандарти компонентів
### 5.1. Іменування
* Компоненти: `PascalCase`
* Хуки: `useCamelCase`
* Файли: `camel-case.tsx`
* Папки: `kebab-case`
### 5.2. Компонент повинен мати:
* Чіткий props-інтерфейс:
```ts
interface MyCompProps {
title: string;
onClick: () => void;
}
```
* Внутрішній стан не змішується з зовнішнім API-станом.
* Міжкомпонентна логіка виноситься в хуки (наприклад: `useMessages(channelId)`).
## 6. Обробка помилок
### 6.1. Toast/notification
Помилка API → коротке повідомлення:
> "Не вдалося виконати дію. Спробуйте ще раз."
### 6.2. ErrorBoundary
Окрема сторінка помилки для критичних збоїв.
### 6.3. Retry policy
React Query retry: `retry: 1` для GET-запитів
POST — без retry.
## 7. i18n стандарти
Всі тексти повинні бути в словнику:
```
src/i18n/uk.json
src/i18n/en.json
```
Формат ключів:
```
onboarding.welcome_title
onboarding.next
chat.send
chat.input_placeholder
followup.create
```
Форсувати одразу правильну структуру.
## 8. UI та дизайн
### 8.1. Кольори
```
--primary: #3F51F5;
--success: #43A047;
--error: #E53935;
--gray-100: #F8F9FA;
--gray-200: #ECEFF1;
--gray-800: #263238;
```
### 8.2. Типографіка
* System font stack:
`"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto`
### 8.3. Контрасти
Всі текстові елементи повинні відповідати WCAG AA (axe test).
## 9. Робота з WebSockets
* Використовуємо один хук: `useChannelStream(channelId)`.
* WS підключається коли відкрито чат.
* Події:
* `message.created`
* `message.updated`
Не зберігати WS-стан у глобальному store.
## 10. Обмеження для MVP
Що треба **вимкнути** у коді, щоб не перевантажити ранніх користувачів:
* Без drag'n'drop для файлів.
* Без реакцій (emoji).
* Без WYSIWYG редактора.
* Без Co-Memory (файли/документи), лише stub.
* Без granular RBAC.
## 11. Патерни, які Cursor повинен дотримуватися
1. **Atomic commits**: 1 Фіча → 1 commit.
2. **File-oriented prompts**: кожен запит до Cursor повинен містити список файлів для зміни.
3. **Не переписувати цілі модулі**, якщо не потрібно.
4. **Перевіряти типи** перед генерацією нового коду.
5. **Не вигадувати API** — брати тільки з `03_api_core_snapshot.md`.
## 12. Приклад робочого промта для Cursor
```
You are a senior React/TS engineer.
Implement Step 2 of the onboarding flow (/onboarding).
Specs:
- design from 04_ui_ux_onboarding_chat.md
- API from 03_api_core_snapshot.md
- coding standards from 05_coding_standards.md
Please output:
- list of files to modify
- code diff
```
## 13. Мета документа
Цей файл — "правила дорожнього руху" для команди і Cursor.
Він гарантує:
* узгоджений стиль,
* передбачуваний код,
* мінімум помилок,
* легку підтримку,
* зрозумілість структури для нових девелоперів.

View File

@@ -0,0 +1,332 @@
# 06 — Tasks: Onboarding & MVP Core (for Cursor)
Цей документ містить чіткі технічні задачі для Cursor.
Кожна задача сформульована у форматі, який Cursor розуміє найкраще:
- контекст
- специфікації
- API
- acceptance criteria
- очікуваний вивід (list of files + diff)
Всі задачі беруть дані з:
- 01_product_brief_mvp.md
- 02_architecture_basics.md
- 03_api_core_snapshot.md
- 04_ui_ux_onboarding_chat.md
- 05_coding_standards.md
## BLOCK A — ONBOARDING (5 кроків)
### Task A1 — Create route `/onboarding` + base layout
**Context:**
Onboarding складається з 5 кроків. Потрібен базовий контейнер зі state machine.
**Specs:**
- Створити сторінку `/onboarding`.
- Додати компонент `OnboardingLayout`.
- Зберігати поточний крок у локальному стані.
- Кроки: `welcome`, `team`, `privacy`, `channel`, `agent`, `invite`.
- У верхній частині: step indicator.
**Acceptance Criteria:**
- `/onboarding` відкривається без помилок.
- Є stepper з актуальною позначкою (15).
- Немає реальних API-викликів (тільки каркас).
**Cursor Output:**
- Список файлів для змін.
- Код.
### Task A2 — Onboarding Step 1: Welcome Screen
**Specs:**
- Заголовок: "Створимо твою MicroDAO".
- Підзаголовок: "5 кроків — і твоя спільнота буде готова до роботи."
- Кнопка: "Почати".
- При натисканні — перехід на Step 2.
**Acceptance Criteria:**
- Стиль згідно з 04_ui_ux_onboarding_chat.md.
- Робоча кнопка.
### Task A3 — Step 2: Create Team (API: POST /teams)
**Specs:**
- Форма:
- `Назва спільноти` (required)
- `Опис` (optional)
- Виклик: `POST /teams`
- Результат: зберегти `teamId` у state onboarding.
**Acceptance Criteria:**
- Форма валідна: без назви кнопка disabled.
- Після успішного виклику → Step 3.
- Обробка помилок через toast.
### Task A4 — Step 3: Privacy mode (PATCH /teams/{id})
**Specs:**
UI: дві великі карточки:
- PUBLIC:
- Текст: "Є публічний канал. Гості можуть читати та приєднатися."
- CONFIDENTIAL:
- Текст: "Тільки запрошені учасники. Чати зашифровані."
При натисканні — PATCH `/teams/{teamId}`.
**Acceptance Criteria:**
- Виділяється вибраний режим.
- Успішний PATCH → Step 4.
### Task A5 — Step 4: Create first channel (POST /channels)
**Specs:**
- Поля:
- Назва каналу
- Тип: public | group
- Виклик:
```json
{
"team_id": "...",
"type": "...",
"title": "...",
"mode": "public" | "confidential"
}
```
**Acceptance Criteria:**
* Після успіху → Step 5.
* Канал створений і додається до списку каналів у state.
### Task A6 — Step 5: Agent & memory settings (POST /agents)
**Specs:**
UI:
* toggle: "Увімкнути приватного агента"
* select: мова агента
* select: профіль агента
* select: memory depth
API:
1. Якщо toggle ON →
`POST /agents` body:
```json
{
"owner_kind": "team",
"owner_id": "t_123",
"name": "Team Assistant",
"role": "general",
"scopes": ["chat"]
}
```
2. Якщо OFF → skip
**Acceptance Criteria:**
* Вибір зберігається в onboarding state.
* API викликається тільки якщо агент включений.
* Після успіху → Step 6.
### Task A7 — Step 6: Invite (UI only)
**Specs:**
UI:
* Заголовок: "Спільнота створена!"
* Показати посилання-запрошення (stub: `/invite?t=ID`).
* Кнопка: "Перейти в чат".
**Acceptance Criteria:**
* Немає API.
* При натисканні — redirect до `/t/:teamId/c/:channelId`.
## BLOCK B — CHAT CORE
### Task B1 — Channel List in Sidebar
**Specs:**
* Зробити компонент `SidebarChannels`.
* Отримати список каналів командою:
* Використати локальний state (оновлює онбординг).
* У реальному додатку — GET `/teams/{id}/channels` (можна додати).
* Показати активний канал.
**Acceptance Criteria:**
* Sidebar показує всі канали.
* Active канал підсвічений.
### Task B2 — Messages Stream (GET /channels/{id}/messages)
**Specs:**
* Компонент: `MessagesStream`.
* Пагінація: cursor-based scroll.
* Рендер: avatar + name + time + text.
* Confidential → body_enc (можна stub дешифрування).
**Acceptance Criteria:**
* Стрічка відображає повідомлення.
* При скролі догори → підвантаження старих.
### Task B3 — Composer (POST /messages)
**Specs:**
* Компонент: `MessageComposer`.
* Input + кнопка "Надіслати".
* Enter → відправка.
* Shift+Enter → новий рядок.
**Acceptance Criteria:**
* Повідомлення додається в стрічку без перезавантаження.
* Порожній інпут → заборонити надсилання.
### Task B4 — Follow-up creation (POST /followups)
**Specs:**
* Контекстне меню у повідомленні: "Створити follow-up".
* Модалка: назва (автоматично), assignee (список членів), due.
* API: POST `/followups`.
**Acceptance Criteria:**
* Follow-up створюється успішно.
* Помилки показуються через toast.
## BLOCK C — PROJECTS & TASKS
### Task C1 — Project List (GET /projects)
**Specs:**
* Вкладка "Проєкти".
* Список проєктів (назва).
* Кнопка "Створити проєкт".
**Acceptance Criteria:**
* Працює рендер списку.
* Порожній стан: "Проєкти ще не створені".
### Task C2 — Create Project (POST /projects)
**Specs:**
* Модалка → створення нового проєкту.
* Поля: назва, visibility (public/confidential).
* API: POST `/projects`.
**Acceptance Criteria:**
* Новий проєкт зʼявляється в списку.
### Task C3 — Tasks Board (GET/POST /projects/{id}/tasks)
**Specs:**
* 3 колонки: backlog, in_progress, done.
* Карточка задачі: title + status.
* При кліку → змінити статус.
**Acceptance Criteria:**
* Задачі змінюють статус (PATCH можна stub: просто оновлювати client state).
* Мінімальний Kanban працює.
## BLOCK D — AGENTS
### Task D1 — Agents List (GET /agents)
**Specs:**
* Вкладка "Агенти".
* Показати всіх агентів команди.
**Acceptance Criteria:**
* Один агент "Team Assistant" відображається.
### Task D2 — Agent Chat (stub)
**Specs:**
* Створити окремий чат з агентом:
* `MessageComposer`
* потік повідомлень (локальний state)
* В API-запиті викликати зовнішній LLM (можна mock)
* Зберігати історію до reload.
**Acceptance Criteria:**
* Агент відповідає у вигляді тексту.
* Історія видно в UI.
## BLOCK E — FINALIZATION
### Task E1 — Route redirect after onboarding
**Specs:**
* Після Step 6 redirect:
`/t/:teamId/c/:channelId`
**Acceptance Criteria:**
* Після онбордингу користувач потрапляє у свій перший канал.
### Task E2 — Mobile adaptation
**Specs:**
* Sidebar → Drawer
* Composer sticky bottom
* Onboarding → одна колонка
**Acceptance Criteria:**
* Мобільна версія не ламається.
### Task E3 — Error Handling Audit
**Specs:**
Перевірити всі виклики API:
* login
* teams
* channels
* messages
* followups
* projects
* tasks
* agents
**Acceptance Criteria:**
* Усі помилки показуються через toast.
* Немає uncaught exceptions у консолі.
## Кінець документа
Цей файл є головним TODO для Cursor.
Кожна задача може бути надіслана як окремий prompt,
Cursor повинен завжди відповідати:
* списком файлів,
* diff,
* коротким summary.

View File

@@ -0,0 +1,273 @@
# 07 — Testing Checklist (MVP)
Цей документ визначає мінімальний набір тестів, необхідних для перевірки MVP MicroDAO.
Він створений на основі повного QA Test Plan, але сфокусований на ключових флоу.
## 1. Environment
Тестувати на:
- Desktop ≥1280px
- Chrome (останній)
- Safari (останній)
- Firefox ESR (опціонально)
Мова інтерфейсу: uk-UA
Часовий пояс: Europe/Kyiv
## 2. Critical End-to-End Tests (обов'язково)
### E2E-01 — Magic-link login
**Кроки:**
1. Ввести email у форму логіну.
2. Отримати код/лінк.
3. Авторизуватися.
**Очікування:**
- `POST /auth/login-email → 204`
- `POST /auth/exchange → 200`
- Користувач потрапляє у `/onboarding`
### E2E-02 — Створення спільноти
**Кроки:**
1. Onboarding Step 2: ввести назву.
2. Натиснути "Продовжити".
**Очікування:**
- `POST /teams → 201`
- Зберігається `teamId`
- Перехід до Step 3
### E2E-03 — Вибір режиму (Public / Confidential)
**Кроки:**
1. На Step 3 обрати режим.
2. Натиснути "Вибрати режим".
**Очікування:**
- `PATCH /teams/{id} → 200`
- У state онбордингу режим оновлено
### E2E-04 — Створення першого каналу
**Кроки:**
1. Step 4: назва "general".
2. Тип: public.
**Очікування:**
- `POST /channels → 201`
- `channelId` збережено
- Перехід до Step 5
### E2E-05 — Увімкнення приватного агента
**Кроки:**
1. Step 5 → toggle ON
2. Натиснути "Готово"
**Очікування:**
- `POST /agents → 201`
- Агент видимий у списку `/agents`
### E2E-06 — Фінальний redirect
**Кроки:**
1. Step 6 → "Перейти в чат"
**Очікування:**
- Перенаправлення на `/t/:teamId/c/:channelId`
- Відображено стрічку повідомлень
## 3. Chat Tests
### CHAT-01 — Відправка повідомлення
**Кроки:**
1. Ввести текст.
2. Натиснути "Надіслати".
**Очікування:**
- `POST /channels/{id}/messages → 201`
- Повідомлення зʼявляється у стрічці без reload
### CHAT-02 — Пагінація стрічки (cursor)
**Кроки:**
1. Прокрутити догори.
2. Завантаження старих повідомлень.
**Очікування:**
- `GET /messages?cursor=...`
- Нові елементи додаються на початок
### CHAT-03 — Публічний канал для гостей
**Кроки:**
1. Відкрити `/c/:slug` в режимі інкогніто.
2. Переглянути стрічку.
3. Спробувати відправити повідомлення.
**Очікування:**
- Read-only режим
- Кнопка "Приєднатися до спільноти"
## 4. Follow-ups Tests
### FU-01 — Створення follow-up
**Кроки:**
1. Клік по меню повідомлення → "Створити follow-up".
2. Заповнити форму.
**Очікування:**
- `POST /followups → 201`
- Follow-up у списку `/followups`
### FU-02 — Список follow-ups
**Очікування:**
- `GET /followups` працює
- Фільтрація по статусу
## 5. Projects & Tasks
### PRJ-01 — Створення проєкту
**Кроки:**
- Натиснути "Новий проєкт".
- Ввести назву.
**Очікування:**
- `POST /projects → 201`
- Проєкт у списку
### TASK-01 — Створення задачі
**Кроки:**
- Додати нову задачу в Backlog.
**Очікування:**
- `POST /projects/{id}/tasks → 201`
- Задача показана у колонці
### TASK-02 — Зміна статусу задачі
**Кроки:**
- Клікнути задачу → змінити статус.
**Очікування:**
- Статус змінений у UI
- API можна stub (MVP)
## 6. Agents
### AG-01 — Список агентів
**Очікування:**
- `GET /agents` ще до онбордингу повертає 0
- Після Step 5 → ≥1
### AG-02 — Чат із агентом (stub)
**Очікування:**
- Агент відповідає на повідомлення
- Історія залишається до reload
## 7. Error Handling
### ERR-01 — 400 Bad Request
**Наприклад:**
- порожнє поле назви спільноти
- некоректний email
**Очікування:**
- toast з повідомленням
- API не падає в консоль
### ERR-02 — 403 Forbidden
**Наприклад:**
- спроба писати в приватний канал без доступу
**Очікування:**
- toast: "Недостатньо прав"
### ERR-03 — 404 Not Found
- неправильний канал
- неправильний проєкт
Очікування:
- зрозуміла сторінка 404
- ніяких uncaught errors
## 8. Performance (MVP)
### PERF-01 — Chat latency
Очікування:
- p95 ≤ 300 мс для `GET /messages` та `POST /messages`.
### PERF-02 — WebSocket stability
Очікування:
- Нові повідомлення з'являються ≤100 мс після відправки.
- З'єднання не падає при простому використанні.
## 9. Accessibility (basic)
### A11Y-01 — Keyboard navigation
- Усі кнопки фокусуються
- Enter / Space працюють
### A11Y-02 — Контрасти
- Текст контрастний (WCAG 2.1 AA)
## 10. Успішність MVP (визначення)
MVP вважається стабільним, якщо:
- **Усі критичні E2E проходять.**
- **Немає P0/P1 багів** (блокуючих).
- **Менше 5 P2 багів.**
- **Чат та онбординг працюють стабільно.**
- **2 реальні команди використовують систему кілька днів без критичних помилок.**

103
docs/cursor/README.md Normal file
View File

@@ -0,0 +1,103 @@
# MicroDAO — Документація для Cursor
Ця папка містить структуровану документацію для розробки MVP MicroDAO з використанням Cursor AI.
## Структура документації
### 00_overview_microdao.md
Загальний огляд системи MicroDAO, ключові модулі та посилання на інші документи.
**Коли використовувати:** Для швидкого ознайомлення з проєктом.
### 01_product_brief_mvp.md
Product Requirements для MVP: мета, персони, ключові сценарії, обсяг та межі.
**Коли використовувати:** Для розуміння бізнес-логіки та цілей MVP.
### 02_architecture_basics.md
Технічна архітектура: стек, основні сервіси, дані та моделі, WebSockets, приватність.
**Коли використовувати:** Для розуміння технічної архітектури та інтеграцій.
### 03_api_core_snapshot.md
Стисла витяжка з OpenAPI 3.1: всі ендпоїнти, необхідні для MVP, з прикладами запитів та відповідей.
**Коли використовувати:** При створенні API клієнтів та інтеграції з бекендом.
### 04_ui_ux_onboarding_chat.md
UI/UX специфікація: онбординг, чат, публічний канал, стандарти дизайну, адаптивність.
**Коли використовувати:** При розробці UI компонентів та сторінок.
### 05_coding_standards.md
Стандарти кодування: TypeScript правила, React патерни, обробка помилок, i18n, UI стандарти.
**Коли використовувати:** При написанні коду для забезпечення якості та узгодженості.
### 06_tasks_onboarding_mvp.md
Технічні задачі для Cursor: детальні специфікації для кожної функції MVP з acceptance criteria.
**Коли використовувати:** Як "панель управління" розробкою — копіювати задачі в Cursor.
### 07_testing_checklist_mvp.md
Тестовий чеклист: критичні E2E тести, тести чату, follow-ups, проєктів, агентів, обробка помилок.
**Коли використовувати:** При тестуванні та перевірці готовності MVP.
## Як використовувати з Cursor
### 1. Початкове налаштування
Додай всю папку `docs/cursor/` в контекст Cursor або вкажи на конкретні файли при створенні промптів.
### 2. Створення промптів
Використовуй формат з `06_tasks_onboarding_mvp.md`:
```
You are a senior React/TypeScript engineer.
Task: [Назва задачі з 06_tasks_onboarding_mvp.md]
Context:
- Product brief: 01_product_brief_mvp.md
- API specs: 03_api_core_snapshot.md
- UI/UX: 04_ui_ux_onboarding_chat.md
- Coding standards: 05_coding_standards.md
Please output:
- List of files to modify/create
- Code diff
- Short summary
```
### 3. Перевірка коду
Після генерації коду перевіряй відповідність:
- `05_coding_standards.md` — стандарти кодування
- `07_testing_checklist_mvp.md` — тестові сценарії
## Швидкий старт
1. **Ознайомся з проєктом:** `00_overview_microdao.md`
2. **Зрозумій бізнес-логіку:** `01_product_brief_mvp.md`
3. **Вивчи архітектуру:** `02_architecture_basics.md`
4. **Почни з онбордингу:** `06_tasks_onboarding_mvp.md` → Block A
5. **Тестуй:** `07_testing_checklist_mvp.md`
## Важливі примітки
- Всі API контракти беріть тільки з `03_api_core_snapshot.md`
- Всі UI тексти беріть з `04_ui_ux_onboarding_chat.md`
- Дотримуйтесь стандартів з `05_coding_standards.md`
- Не вигадуйте нові API або UI елементи без узгодження
## Посилання на повну документацію
- Повна OpenAPI специфікація (за потреби)
- Data Model & Event Catalog
- Tech Spec / Технічний опис MicroDAO
- UI/UX Specification — microdao (web)
---
**Версія:** MVP v1.0
**Останнє оновлення:** 2025-01-XX