microdao-daarion/docs/tasks/TASK_PHASE_FRONTEND_MVP.md

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 клієнт

Створити:

lib/api.ts

Реалізувати:

• api.get()
• api.post()
• api.patch()
• api.delete()

Через fetch з:

credentials: 'include'

Обробка:

• 401 → redirect to login
• 429 throttling
• 5xx error toast

---

4. WebSocket клієнт

Файл:

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."