Skip to content

# 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`

    '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`

    '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`

    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. Видалити зображення
5. На сторінці агента (для власника) є можливість:
6. Завантажити/змінити аватарку
7. Видалити аватарку
8. Зображення відображаються одразу після завантаження.
9. При відсутності зображення показується placeholder.
10. Помилки завантаження показуються користувачу.

## 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]`