current_task_id: UI-001

owner: codex

phase: executing

assigned_at: 2026-03-21T23:10Z

last_heartbeat_codex: 2026-03-21T11:03Z

last_heartbeat_claudia: 2026-03-21T23:25Z

## ART-003A — ✅ COMPLETE (deployed api:v170 / web:v170 on 2026-03-21)

## Gate 2 — CANCELLED (site not yet publicly launched, Andrey confirmed)

blocked: false

needs_human: false

needs_human_reason: —

next_task_preview: UI-001 → ART-003

pipeline_remaining: [UI-001, ART-003, ART-005-lite]

# SSH tasks (D and server ops) → always Claudia, not Codex

# Gate 1 (20 profiles) → needs Andrey, will set needs_human: false

## Task Definitions

### UI-001 [owner: codex] ← CURRENT TASK

**Цель:** Контактная информация артиста + галерея медиа через GalleryCarousel (как на странице события).

**Файлы для изменения:**

- apps/custom-api/src/db/migrations/063_artist_contact_fields.sql (новый файл)

- apps/custom-api/src/routes/admin/artists.ts

- apps/custom-api/src/routes/catalog.ts

- apps/web/src/components/GalleryCarousel.tsx

- apps/web/src/pages/admin/artists.tsx

- apps/web/src/pages/artists/[slug].tsx

**Что НЕ трогать:** auth, checkout, scanner, email-composer, registration, upload.ts

**Ориентация фото** — убрана из задачи (GalleryCarousel сам адаптируется)

---

#### Step A — Миграция (1 файл)

*apps/custom-api/src/db/migrations/063_artist_contact_fields.sql:**

```sql

ALTER TABLE artist_profiles

ADD COLUMN IF NOT EXISTS contact_email VARCHAR(200),

ADD COLUMN IF NOT EXISTS agent_name VARCHAR(200),

ADD COLUMN IF NOT EXISTS agent_email VARCHAR(200),

ADD COLUMN IF NOT EXISTS portrait_url VARCHAR(500);

```

**Смысл portrait_url:**

- hero_image_url = широкий баннер (landscape) — фон страницы артиста

- portrait_url = портретное фото (3:4) — карточка в каталоге + overlay на странице профиля (как постер на странице события)

---

#### Step B — API: admin/artists.ts

**В GET /admin/artists/:id** — добавить в SELECT из ap:

```sql

ap.contact_email, ap.agent_name, ap.agent_email, ap.portrait_url,

```

**В PUT /admin/artists/:id** — добавить в UPDATE artist_profiles:

```sql

contact_email = COALESCE($N, contact_email),

agent_name = COALESCE($N, agent_name),

agent_email = COALESCE($N, agent_email),

portrait_url = COALESCE($N, portrait_url),

```

Значения: str(get(req.body, 'profile', 'contact_email')), аналогично для agent_name, agent_email, portrait_url.

---

#### Step C — API: catalog.ts

**В detailHandler** — добавить в SELECT:

```sql

ap.contact_email, ap.agent_name, ap.agent_email, ap.portrait_url,

```

---

#### Step D — Frontend: admin/artists.tsx

**В интерфейс ArtistProfile** (секция profile формы) добавить поля:

```typescript

contact_email: string;

agent_name: string;

agent_email: string;

portrait_url: string;

```

**В emptyForm.profile** добавить:

```typescript

contact_email: '', agent_name: '', agent_email: '', portrait_url: '',

```

**В openEdit** — читать из data:

```typescript

contact_email: data.contact_email || '',

agent_name: data.agent_name || '',

agent_email: data.agent_email || '',

portrait_url: data.portrait_url || '',

```

**В tab profile** добавить (после website_url):

1. **Portrait photo upload** (используй компонент ImageUploader — он уже используется для hero_image_url):

```tsx

<p className="text-xs text-gray-500 mb-1">Portrait photo (catalog card, 3:4 ratio recommended)</p>

<ImageUploader

value={form.profile.portrait_url}

onChange={(url) => setForm((f) => ({ ...f, profile: { ...f.profile, portrait_url: url } }))}

folder="artists"

label="Upload portrait photo"

</div>

```

2. **Три текстовых поля** (после portrait upload):

```tsx

<input className="border rounded px-3 py-2" placeholder="Public contact email" value={form.profile.contact_email} onChange={(e) => setForm((f) => ({ ...f, profile: { ...f.profile, contact_email: e.target.value } }))} />

<input className="border rounded px-3 py-2" placeholder="Agent name" value={form.profile.agent_name} onChange={(e) => setForm((f) => ({ ...f, profile: { ...f.profile, agent_name: e.target.value } }))} />

<input className="border rounded px-3 py-2" placeholder="Agent email" value={form.profile.agent_email} onChange={(e) => setForm((f) => ({ ...f, profile: { ...f.profile, agent_email: e.target.value } }))} />

```

**ВАЖНО:** поле hero_image_url переименовать в label/placeholder с "Hero image" на **"Banner image (landscape, wide)"**, чтобы admin понимал зачем два поля.

---

#### Step E — GalleryCarousel: apps/web/src/components/GalleryCarousel.tsx

Добавить тему 'artist' в объект themes (после archive):

```typescript

artist: {

arrows: 'bg-black/60 hover:bg-black/80 text-white',

dotsActive: 'bg-amber-500',

dotsInactive: 'bg-slate-600',

border: 'ring-1 ring-white/10',

caption: 'text-white font-serif'

```

В интерфейс GalleryCarouselProps добавить 'artist' к типу theme:

```typescript

theme: 'event' | 'news' | 'archive' | 'artist';

```

В GallerySlide интерфейс — аналогично добавить 'artist' к типу theme.

---

#### Step F — Frontend: artists/[slug].tsx

**В интерфейс ArtistProfile** добавить:

```typescript

contact_email?: string | null;

agent_name?: string | null;

agent_email?: string | null;

portrait_url?: string | null;

```

**В import** добавить в начало файла:

```typescript

import { GalleryCarousel } from '@/components/GalleryCarousel';

```

**В hero section** — добавить portrait overlay (как на странице события).

Найти <div className="absolute inset-x-0 bottom-0 ..."> и добавить ПЕРЕД h1 портретную фотографию:

```tsx

{artist.portrait_url && (

<img

src={artist.portrait_url}

alt={displayName}

className="w-28 h-36 object-cover object-top rounded-lg shadow-xl border border-white/20"

</div>

)}

```

Так portrait_url показывается как маленькое портретное фото внизу hero-баннера (слева от имени), а hero_image_url остаётся широким фоновым баннером.

**Секцию "Media Reel"** (строки ~202-234) заменить целиком:

```tsx

Priya Sharma