3de3c8cb36
- matrix-gateway: POST /internal/matrix/presence/online endpoint - usePresenceHeartbeat hook with activity tracking - Auto away after 5 min inactivity - Offline on page close/visibility change - Integrated in MatrixChatRoom component
203 lines
3.7 KiB
Markdown
203 lines
3.7 KiB
Markdown
# TASK_PHASE_FRONTEND_MVP.md
|
||
|
||
DAARION / microDAO — FRONTEND MVP (Next.js 15 + App Router + Tailwind)
|
||
|
||
## 0. Ціль
|
||
|
||
Створити повністю робочий Frontend MVP, який працює через наш єдиний gateway:
|
||
|
||
- `https://app.<domain>/api/...`
|
||
- `wss://app.<domain>/ws/...`
|
||
|
||
Фронтенд повинен реалізувати **всі базові флоу microDAO**:
|
||
|
||
Auth → Teams → Channels → Chat → Follow-ups → Projects → Agents Console → Settings.
|
||
|
||
Архітектура:
|
||
|
||
✔ Next.js 15 (App Router)
|
||
✔ React Server Components
|
||
✔ TailwindCSS
|
||
✔ Zustand або Jotai для локального стану
|
||
✔ WebSocket transport
|
||
✔ API інтерфейс через fetch/axios
|
||
✔ SSR для public pages
|
||
✔ Protected routes через middleware
|
||
|
||
---
|
||
|
||
## 1. Структура проекту
|
||
|
||
```
|
||
frontend/
|
||
app/
|
||
layout.tsx
|
||
page.tsx
|
||
auth/
|
||
login/
|
||
callback/
|
||
dashboard/
|
||
layout.tsx
|
||
teams/
|
||
channels/
|
||
chat/
|
||
projects/
|
||
followups/
|
||
agents/
|
||
settings/
|
||
components/
|
||
lib/
|
||
hooks/
|
||
config/
|
||
services/
|
||
types/
|
||
public/
|
||
styles/
|
||
middleware.ts
|
||
next.config.js
|
||
package.json
|
||
tsconfig.json
|
||
```
|
||
|
||
---
|
||
|
||
## 2. Екрани, які треба створити
|
||
|
||
### 2.1 Auth
|
||
|
||
- `/auth/login` — ввід email → POST `/auth/login-email`
|
||
- `/auth/callback?code=` → POST `/auth/exchange`
|
||
|
||
Зберігання JWT у **httpOnly cookie**.
|
||
|
||
### 2.2 Teams
|
||
|
||
- Листинг спільнот
|
||
- Створення нової Team
|
||
|
||
### 2.3 Channels
|
||
|
||
- Листинг каналів команди
|
||
- Створення каналу
|
||
- Перемикання public/confidential
|
||
|
||
### 2.4 Chat
|
||
|
||
- Чат у реальному часі
|
||
- WS підключення: `wss://app.domain/ws/channels/{channelId}`
|
||
- Звичайні повідомлення (text)
|
||
- Вкладення (stub)
|
||
- Thread view (MVP, простий)
|
||
|
||
### 2.5 Follow-ups
|
||
|
||
- Листинг
|
||
- Create
|
||
- Assign / Complete
|
||
|
||
### 2.6 Projects & Tasks
|
||
|
||
- Kanban board
|
||
- Перетягування задач (drag & drop)
|
||
- Фільтри по labels/status
|
||
- Docs (editable textarea MVP)
|
||
- Meetings (простий scheduler)
|
||
|
||
### 2.7 Agents Console
|
||
|
||
- Список агентів
|
||
- Agent Chat
|
||
- Відображення tokens/latency
|
||
- Minimal: call `/agents/{id}/invoke`
|
||
|
||
### 2.8 Settings
|
||
|
||
- User settings
|
||
- Notifications toggle
|
||
- Language toggle
|
||
|
||
---
|
||
|
||
## 3. API клієнт
|
||
|
||
Створити:
|
||
|
||
```typescript
|
||
lib/api.ts
|
||
```
|
||
|
||
Реалізувати:
|
||
|
||
- `api.get()`
|
||
- `api.post()`
|
||
- `api.patch()`
|
||
- `api.delete()`
|
||
|
||
Через `fetch` з:
|
||
|
||
```typescript
|
||
credentials: 'include'
|
||
```
|
||
|
||
Обробка:
|
||
|
||
- 401 → redirect to login
|
||
- 429 throttling
|
||
- 5xx error toast
|
||
|
||
---
|
||
|
||
## 4. WebSocket клієнт
|
||
|
||
Файл:
|
||
|
||
```typescript
|
||
lib/ws.ts
|
||
```
|
||
|
||
Підтримка:
|
||
|
||
- auto-reconnect
|
||
- heartbeat
|
||
- rooms/channels stream
|
||
- agent updates stream
|
||
|
||
---
|
||
|
||
## 5. UI Kit
|
||
|
||
Створити мінімальний UI Kit:
|
||
|
||
```
|
||
components/ui/
|
||
Button.tsx
|
||
Input.tsx
|
||
Card.tsx
|
||
Avatar.tsx
|
||
Badge.tsx
|
||
Modal.tsx
|
||
```
|
||
|
||
---
|
||
|
||
## 6. Acceptance Criteria
|
||
|
||
1. Авторизація працює від початку до кінця
|
||
2. Канали відображаються
|
||
3. Чат відправляє/отримує в реальному часі
|
||
4. Follow-ups створюються
|
||
5. Kanban працює
|
||
6. Agent Console відповідає
|
||
7. UI без критичних помилок
|
||
8. SSR без помилок
|
||
9. Mobile-friendly (min 360px)
|
||
|
||
---
|
||
|
||
## 7. Команда до Cursor:
|
||
|
||
**"Створи фронтенд згідно TASK_PHASE_FRONTEND_MVP.md.
|
||
Next.js 15 + App Router. Tailwind. JWT у cookie. WS.
|
||
Підключення через gateway."**
|
||
|