# TASK_PHASE_LOGOS_BACKGROUNDS_UI_v1

Проєкт: DAARION.city — Логотипи та фони MicroDAO / Agents  
Фаза: UI для завантаження та відображення брендингу  
Мета: Додати можливість завантажувати та редагувати логотипи MicroDAO та аватарки агентів у новому фронтенді (`apps/web`).

---

## 0. Поточний стан

- Поля `logo_url`, `banner_url` існують у БД для MicroDAO.
- Поле `avatar_url` існує для агентів (в `dais.vis.avatar_url` або напряму).
- Старий фронтенд (`src/features/microdao/MicrodaoConsolePage.tsx`) має UI для завантаження.
- Новий фронтенд (`apps/web`) **не має** UI для завантаження — тільки відображення.
- API endpoint `PATCH /microdao/{slug}/branding` існує.
- API endpoint для завантаження файлів (`POST /assets/upload`) існує.

---

## 1. Scope

### Включено

1. Компонент `MicrodaoBrandingCard` для редагування логотипа та банера MicroDAO.
2. Компонент `AgentAvatarUpload` для редагування аватарки агента.
3. Інтеграція в сторінки `/microdao/[slug]` та `/agents/[agentId]`.
4. API routes для проксі завантаження файлів.
5. Відображення placeholder при відсутності зображень.

### Виключено

- Складні редактори зображень (crop, resize).
- Генерація AI-аватарок (окремий таск).

---

## 2. Backend API (існуючі endpoints)

### MicroDAO Branding
```
PATCH /city/microdao/{slug}/branding
Body: { "logo_url": "...", "banner_url": "..." }
```

### Asset Upload
```
POST /city/assets/upload
Form: file, type (microdao_logo, microdao_banner, agent_avatar)
Response: { original_url, processed_url, thumb_url }
```

### Agent Avatar Update
```
PATCH /city/agents/{agent_id}/dais
Body: { "vis": { "avatar_url": "..." } }
```

---

## 3. Frontend Components

### 3.1. MicrodaoBrandingCard

Файл: `apps/web/src/components/microdao/MicrodaoBrandingCard.tsx`

```tsx
'use client';

import { useState, useRef } from 'react';
import { Upload, Image, X } from 'lucide-react';

interface MicrodaoBrandingCardProps {
  slug: string;
  logoUrl?: string | null;
  bannerUrl?: string | null;
  canEdit?: boolean;
  onUpdated?: () => void;
}

export function MicrodaoBrandingCard({ 
  slug, 
  logoUrl, 
  bannerUrl, 
  canEdit = false,
  onUpdated 
}: MicrodaoBrandingCardProps) {
  // ... implementation
}
```

### 3.2. AgentAvatarUpload

Файл: `apps/web/src/components/agent-dashboard/AgentAvatarUpload.tsx`

```tsx
'use client';

interface AgentAvatarUploadProps {
  agentId: string;
  currentAvatarUrl?: string | null;
  canEdit?: boolean;
  onUpdated?: () => void;
}

export function AgentAvatarUpload({
  agentId,
  currentAvatarUrl,
  canEdit = false,
  onUpdated
}: AgentAvatarUploadProps) {
  // ... implementation
}
```

### 3.3. API Route for Upload

Файл: `apps/web/src/app/api/assets/upload/route.ts`

```ts
import { NextRequest, NextResponse } from 'next/server';

const CITY_SERVICE_URL = process.env.INTERNAL_API_URL || 'http://daarion-city-service:7001';

export async function POST(request: NextRequest) {
  const formData = await request.formData();
  
  const upstream = await fetch(`${CITY_SERVICE_URL}/city/assets/upload`, {
    method: 'POST',
    body: formData,
  });
  
  const data = await upstream.json();
  return NextResponse.json(data, { status: upstream.status });
}
```

---

## 4. Integration Points

### 4.1. MicroDAO Detail Page

В `apps/web/src/app/microdao/[slug]/page.tsx`:
- Додати `MicrodaoBrandingCard` у секцію Hero або окрему вкладку Settings.
- Показувати тільки якщо `canManage === true`.

### 4.2. Agent Console Page

В `apps/web/src/app/agents/[agentId]/page.tsx`:
- Додати `AgentAvatarUpload` у вкладку Identity.
- Показувати тільки якщо агент належить поточному користувачу.

---

## 5. Acceptance Criteria

1. На сторінці MicroDAO (для orchestrator) є можливість:
   - Завантажити/змінити логотип
   - Завантажити/змінити банер
   - Видалити зображення
2. На сторінці агента (для власника) є можливість:
   - Завантажити/змінити аватарку
   - Видалити аватарку
3. Зображення відображаються одразу після завантаження.
4. При відсутності зображення показується placeholder.
5. Помилки завантаження показуються користувачу.

---

## 6. Deliverables

- `apps/web/src/components/microdao/MicrodaoBrandingCard.tsx`
- `apps/web/src/components/agent-dashboard/AgentAvatarUpload.tsx`
- `apps/web/src/app/api/assets/upload/route.ts`
- Оновлені сторінки `/microdao/[slug]` та `/agents/[agentId]`