microdao-daarion/docs/tasks/TASK_PHASE_LOGOS_BACKGROUNDS_UI_v1.md

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. При відсутності зображення показується 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]