# Фаза 0 — Самоинвентаризация + UX-диагностика живого продукта

**Проект:** «Прототипы дизайна кабинета» (AI Factory / Командный центр)
**Дата:** 2026-05-31
**Статус фазы:** завершена. Это база для Фаз 1–8.

---

## 0. Метод и источники (без догадок)

Прочитан фактический код на сервере и сопоставлен с инвентарём из задания и 12 референсами.

| # | Источник | Что это | Роль в Фазе 0 |
|---|----------|---------|---------------|
| S1 | `/srv/projects/ai-factory-b4e4/` | Статический сайт «AI Factory · Live Dashboard» (HTML/CSS/vanilla-JS, SVG-графики) | Единственный кабинет-артефакт на сервере. Показывает текущий визуальный язык и подход к графикам |
| S2 | Текст задания (бриф) | Детальная постраничная опись реального кабинета («Командный центр», «Заметки», «Деплои» …) | **Авторитетный** инвентарь продукта |
| S3 | `.factory/attachments/01…12` | 12 референсов (11 JPEG изучены; 1 GIF) | Ориентир по вкусу/стилю для Фаз 3–4 |
| S4 | Соседние проекты в `/srv/projects/` | `copy-brain-arjv`, `project-5ieb` (AURÈNE), `claude-code-2n4s`, `project-xv7t`, `hello-static-001` | Источник реалистичных демо-имён («Copy brain», «Лендинг часов») |

### ВАЖНАЯ НАХОДКА — где реальный кабинет
Поиск по ключевым лейблам кабинета («Командный центр», «Черновики проектов», «Карта мозга», «Отчёты фабрики») по всему `/srv/projects/` **не дал совпадений**.

> **Вывод:** боевой кабинет «Командный центр» физически **не лежит на этом сервере**. Сайт `ai-factory-b4e4` — это **родственный демо-дашборд** того же продуктового семейства «AI Factory», а не сам кабинет. Поэтому:
> 1. **Авторитетным инвентарём** считаем подробную опись из задания (S2) — её и реорганизуем.
> 2. `ai-factory-b4e4` (S1) используем как **подтверждённый на сервере образец текущей эстетики и техники графиков** — материал для UX-диагностики «как не надо» и для оценки болей.
> 3. Никакого бэкенда/боевого кабинета мы не трогаем (его здесь и нет) — риск «сломать прод» отсутствует.

Примечание: `README.md` каркаса описывал S1 как `styles/main.css ~53KB` + `scripts/app.js ~113KB`. **Фактически** файлы другие (см. §1) — README будет поправлен.

---

## 1. Инвентаризация on-server демо `ai-factory-b4e4` (S1)

Один экран (SPA-скролл), три якоря навигации: `Обзор / Проекты / Активность`.
Файлы: `index.html` (80 стр.), `styles/{theme,layout,animations}.css`, `scripts/{planet,charts,datasource,dashboard,ui}.js` (~1700 стр.), `data/{config,projects}.json`.

| Блок | Метрики / содержимое | Функции / UI | Состояния | Источник |
|------|----------------------|--------------|-----------|----------|
| **Топбар** | Бренд «AI FACTORY», статус-пилюля «Системы в норме» с пульс-точкой | Якорная навигация Обзор/Проекты/Активность; skip-link | Статусы подключения: `init/connecting/live/polling/synthetic/paused` → текст пилюли | `index.html:23-36`, `dashboard.js:235-258` |
| **Герой «Живая планета»** | — (декор) | `<canvas>` с анимацией планеты+орбит (орбиты=проекты, пульс=нагрузка) | reduce-motion → статичный кадр | `index.html:40-47`, `planet.js` |
| **KPI-метрики** | Активные проекты (6), Запусков сегодня (1284, +12.4%), Средняя нагрузка (62%, −3.1%, inverse), Аптайм (99.94%) | Чип тренда (▲/▼ %), плавный счётчик (easeOutCubic 700мс), спарклайн | reduce-motion → без твина; патч-обновления | `dashboard.js:49-72`, `projects.json:2-7` |
| **Графики** | Пропускная способность (area, «live»), Распределение ресурсов GPU/CPU/Память/Сеть (donut+легенда), Нагрузка кластера ×4 gauge (GPU/Память/Хранилище/Сеть, цвет по порогам 65/85%) | SVG area/donut/gauge, точечные патчи | live-тег пульсирует; gauge меняет цвет по порогу | `dashboard.js:74-127`, `charts.js`, `projects.json:8-25` |
| **Карточки проектов** | name, status (ok/warn/err→В норме/Нагрузка/Сбой), desc, rps (запр/с), uptime, load% + прогресс-бар, спарклайн | Сетка карточек, бейдж статуса, градиент бара по статусу | патч по индексу карточки | `dashboard.js:129-158`, `projects.json:26-33` |
| **Лента активности** | Текст события + относительное время + вид (ok/warn/err) | Вставка сверху, старение меток («только что»→«1 мин назад»), лимит 7 | enter-анимация; reduce-motion off | `dashboard.js:160-232`, `projects.json:34-39` |

**Источник данных** (`datasource.js`, `config.json`): режим `auto` → ws/poll/synthetic; `tick:1400мс`, `pollInterval:5000`. Синтетический генератор «дышит» вокруг base±drift/amp.

### Визуальные токены S1 (то, что бриф просит заменить)
- Шрифт: **Inter** (бриф прямо требует уйти от Inter как идентичности). `theme.css:16`, `index.html:13`
- Палитра: near-black `#05060c`, неон teal `#38e8d0` + фиолет `#7c5cff` + розовый `#ff5ca8` — **ровно тот «AI-клише фиолет-на-тёмном»**, от которого уходим. `theme.css:1-13`
- Радиусы 16px, тяжёлые тени, два radial-фоновых пятна (teal+фиолет). `theme.css:14-34`
- Графика: рукописный SVG (sparkline/area/donut/gauge) — без библиотек, легко портируется, но визуально «дашборд по умолчанию».

---

## 2. Полный инвентарь реального кабинета (S2 — авторитетно)

Постранично: **Страница → Блоки → Метрики → Функции/Действия → UI-элементы → Состояния.**
Метки: `[BRIEF]` — из задания; `[DEMO✓]` — паттерн подтверждён в S1; `[REF✓]` — паттерн встречен в референсах.

### Глобальная оболочка (на всех страницах)
- **Header:** индикатор токенов `13%·2ч / 32%·5дн` (5-час окно % + лейбл, недельный % + лейбл — статичный мок) · **LIVE-таймер** · кнопка **refresh** · **burger** (моб. меню). `[BRIEF]`
- **Навигация:** к страницам — Командный центр, Проекты, Новый проект, Черновики проектов, Заметки, Отчёты фабрики, Деплои, Карта мозга, Изменить проект (AI-ассистент), Мои правки. `[BRIEF]`
- **Состояния оболочки:** загрузка, ошибка соединения, обновление (refresh), пустые разделы.

### P1. Командный центр (главная)
- **Блоки/секции:** счётчики-сводка; разбивка по статусам; готовность проектов; сессии Claude; время; средний прогресс; «параллельно»; недавние проекты.
- **Метрики:** Всего · В работе · Ждут вас · Готово (4 счётчика); разбивка по статусам (доли); готовность проектов (%); кол-во сессий Claude; время (затрачено/в работе); средний прогресс (%); параллельно (сколько идёт одновременно). `[BRIEF]` `[DEMO✓ — KPI-плитки+тренды в S1]`
- **Функции/Действия:** переход к проекту; refresh; быстрый вход в частые действия (Новый проект).
- **UI:** KPI-плитки, статус-бейджи, прогресс-бары, список недавних проектов, header (токены+LIVE+refresh+burger).
- **Состояния:** loading (скелетоны), пусто («ещё нет проектов»), ошибка, success.

### P2. Проекты (список/портфель)
- **Блоки:** список/сетка проектов; (предположительно) фильтры/сортировка/поиск.
- **Метрики на карточке:** статус (Готово/В работе/…), прогресс, этап.
- **Действия:** открыть проект, создать новый, фильтровать. `[REF✓ — таблица+пилюли статуса, ref 01/10]`
- **UI:** карточки/строки проектов, бейджи, прогресс.
- **Состояния:** пусто, фильтр-без-результатов, loading, ошибка.

### P3. Новый проект
- **Блоки:** форма создания; загрузка файлов.
- **Поля:** название, описание, параметры; аплоад вложений. `[BRIEF]`
- **Действия:** заполнить, прикрепить файлы, отправить/создать; валидация.
- **UI:** поля ввода, textarea, drag-n-drop загрузка, кнопка submit.
- **Состояния:** пустая форма, ввод, ошибки валидации, загрузка файла (progress), успех/ошибка отправки.

### P4. Черновики проектов
- **Блоки:** список черновиков с метками срочности; счётчики.
- **Метрики:** метки срочности (приоритет/дедлайн), счётчики по группам. `[BRIEF]`
- **Действия:** открыть/продолжить черновик, удалить, превратить в проект, фильтр по срочности.
- **UI:** карточки черновиков, бейджи срочности, счётчики.
- **Состояния:** пусто, loading, фильтр-без-результатов.

### P5. Заметки
- **Блоки:** список заметок; категории; фильтры.
- **Категории/статусы:** Задача / Заметка / Идея; статусы; фильтры. `[BRIEF]`
- **Действия:** создать, редактировать, сменить статус/категорию, фильтровать, удалить.
- **UI:** карточки/строки заметок, категория-бейдж, статус-бейдж, фильтр-бар.
- **Состояния:** пусто, фильтр-без-результатов, loading.

### P6. Отчёты фабрики
- **Блоки:** отчёты/сводки работы фабрики.
- **Метрики:** агрегаты по проектам/сессиям/времени/ошибкам (под дашборды Фазы 3). `[BRIEF]`
- **Действия:** просмотр, фильтр по периоду, (возможно) экспорт.
- **UI:** таблицы/графики/сводные карточки.
- **Состояния:** пусто, loading, период-без-данных.

### P7. Деплои
- **Блоки:** список деплоев; прод-ссылки; статус.
- **Метрики:** статус `Готов`; прод-URL; (дата/окружение). `[BRIEF]` `[REF✓ — статус-пилюли]`
- **Действия:** открыть прод-ссылку, скопировать URL, (ре)деплой/просмотр статуса.
- **UI:** строки деплоев, статус-бейдж, ссылка-кнопка.
- **Состояния:** пусто, в процессе, готов, ошибка деплоя.

### P8. Карта мозга
- **Блоки:** визуализация (граф/карта) + список файлов.
- **Метрики/содержимое:** узлы/связи знаний; список файлов мозга. `[BRIEF]`
- **Действия:** навигация по графу (zoom/pan/выбор узла), открыть файл, поиск.
- **UI:** интерактивная визуализация (граф), боковой список файлов.
- **Состояния:** пусто (нет данных мозга), loading, ошибка рендера.

### P9. Изменить проект / AI-ассистент разработки
- **Блоки:** интерфейс редактирования проекта через AI-ассистента.
- **Действия:** дать инструкцию ассистенту, применить правки, просмотреть результат. `[BRIEF]`
- **UI:** чат/командное поле, превью изменений, кнопки применить/отклонить.
- **Состояния:** idle, генерация (loading), применено, ошибка.

### P10. Мои правки
- **Блоки:** список правок с фильтрами.
- **Статусы:** Применено / Принято; фильтры. `[BRIEF]`
- **Действия:** просмотр, фильтр по статусу, открыть правку.
- **UI:** строки правок, статус-бейдж, фильтр-бар.
- **Состояния:** пусто, фильтр-без-результатов, loading.

### P11. Детальная страница проекта
- **Шапка проекта:** тип `Прод / Авто / Ручной`; «Следующий шаг»; кнопки «Удалить», «Готовый проект». `[BRIEF]`
- **Метрики:** Прогресс · Этап · Этапы · Сессии · Время · Удачи/Ошибки. `[BRIEF]` `[DEMO✓ — KPI+прогресс]`
- **Вкладки/секции:** **Чат с ИИ**, **Этапы**, **Логи**, **Сессии**. `[BRIEF]`
  - *Чат с ИИ:* диалог, ввод сообщения, история.
  - *Этапы:* список этапов со статусами/прогрессом.
  - *Логи:* поток логов (фильтр/поиск/уровень).
  - *Сессии:* список сессий Claude (время, результат).
- **Действия:** удалить проект, отметить «Готовый проект», перейти к следующему шагу, общаться с ИИ, смотреть логи/сессии/этапы.
- **Состояния:** loading, пустой чат, пустые логи, ошибка, проект завершён.

**Поиск «лишнего»:** дополнительных страниц сверх перечня S2 в коде на сервере не найдено (реального кабинета здесь нет). Любые новые сущности появятся при реорганизации в Фазе 1 (напр. единый «Поток фабрики», объединяющий Активность+Сессии+Логи) — это будет помечено как новое.

---

## 3. UX-диагностика — постранично (Проблема №1: структура/UX)

> Принцип: бриф разрешает **не сохранять** текущую раскладку. Ниже — что неудобно/спрятано/недовизуализировано.

### Сквозные (глобальные) проблемы
1. **Нет постоянной навигации с группировкой.** В демо S1 — лишь 3 якоря; реальный кабинет имеет ≥10 разделов без видимой иерархии. Боль: разделы вперемешку, частые действия не выделены. → Референсы 01/05/10 показывают **сайдбар с группами** (MAIN/FEATURES/TOOLS) + центр-пилюля.
2. **Header перегружен и не информативен.** Токены показаны как «13%·2ч / 32%·5дн» — формат плотный, без визуального индикатора (нужен мини-гейдж/бар). LIVE-таймер, refresh, burger конкурируют за внимание. → нужен спокойный, читаемый блок статуса (ref 01 right-rail, ref 02 телеметрия-гейджи).
3. **Метрики «Командного центра» — плоские счётчики без инсайта.** Всего/В работе/Ждут вас/Готово даны числами; нет тренда, нет «что требует моего внимания сейчас», нет связи число↔действие. → KPI-плитка с трендом+спарклайном (ref 01), «Ждут вас» как actionable-очередь.
4. **Дашбордов и графиков почти нет.** В реальном кабинете (по описи) — таблицы/счётчики; «Отчёты фабрики» без выраженной визуализации; нет портфельного обзора прогресса, throughput, успех/ошибки, времени. → центральная боль брифа (Проблема №2 дублирует Проблему №1 здесь).
5. **Состояния не специфицированы.** Нет единого языка для пусто/loading/ошибка/фильтр-без-результатов. → задать в дизайн-системе (Фаза 4).
6. **Мобильное поведение не продумано.** Планета-герой и плотные сетки плохо лягут на узкий экран; burger есть, но IA под него не выстроена.
7. **Визуальная идентичность — клише.** Inter + teal/фиолет/розовый неон на near-black = «дашборд по умолчанию», нет «wow» (Проблема №2).

### По страницам
- **P1 Командный центр.** Счётчики оторваны от разбивки по статусам и от «недавних проектов»; «Ждут вас» не выделено как очередь действий; «средний прогресс / параллельно / время» — числа без визуализации (нужны: кольцо прогресса портфеля, bar-распределение статусов, мини-таймлайн сессий). «Готовность проектов» просится в **горизонтальный ранжированный список с прогрессом** (ref 10 «audience location», ref 05 «by category»).
- **P2 Проекты.** Нет (по описи) сильного фильтр-бара/поиска/сортировки и переключателя вид «карточки/таблица»; статус и прогресс должны читаться мгновенно (статус-пилюли + прогресс-бар как в ref 01/10).
- **P3 Новый проект.** Форма + аплоад без шагов/прогресса; нужен wizard или чёткие группы полей, состояния загрузки файла, валидация инлайн.
- **P4 Черновики.** «Метки срочности» и «счётчики» — кандидат на **сегмент-бар/группировку по срочности** и сортировку по дедлайну; срочность должна быть цветовой и сверху.
- **P5 Заметки.** Категории (Задача/Заметка/Идея) + статусы + фильтры — нужен **единый фильтр-бар с чипами** и быстрый ввод; сейчас (по описи) разрозненно.
- **P6 Отчёты фабрики.** Главная жертва «нет дашбордов»: должно стать **аналитическим экраном** (throughput по дням, успех vs ошибки, время/сессии, топ-проекты) — см. Фазу 3.
- **P7 Деплои.** Прод-ссылки и статус «Готов» — нужны **быстрая копия URL, открытие, фильтр по статусу/окружению**, индикатор свежести деплоя; ровно паттерн статус-пилюль (ref 01).
- **P8 Карта мозга.** Визуализация + список файлов разорваны; нужен **связанный двухпанельный режим** (граф ↔ выбранный файл), поиск по узлам, mini-map; на мобиле — список с фолбэком.
- **P9 Изменить проект (AI).** Чат-ассистент без явного **превью-диффа** и истории применённых правок — связать с P10 «Мои правки».
- **P10 Мои правки.** Статусы Применено/Принято + фильтры — нужен **таймлайн/таблица с фильтр-чипами** и связь с конкретной правкой/проектом.
- **P11 Детальная страница проекта.** Очень плотная: тип (Прод/Авто/Ручной), «Следующий шаг», метрики (Прогресс/Этап/Этапы/Сессии/Время/Удачи-Ошибки), 4 секции (Чат/Этапы/Логи/Сессии). Боль: всё на одном уровне, «Следующий шаг» (главное действие) теряется; метрики не визуализированы (нужны кольцо прогресса, степпер этапов, спарклайн сессий, **донат удачи/ошибки**); Логи/Сессии без фильтров. → шапка-«командный пульт» + табы + правый контекст-рейл.

---

## 4. Дайджест референсов (вкус/стиль → 5 направлений)

11 JPEG изучены (GIF `04-…` — **0 байт, пустой/битый**, мотивы движения недоступны — см. §6).

| Реф | Что показывает | Паттерны для кражи | Питает стиль |
|-----|----------------|--------------------|--------------|
| 01 | Тёмный fintech-дашборд, оранж-акцент | Сайдбар с группами; топ-CTA «+New»; KPI+тренд; cashflow-бар с подсветкой+тултип; правый рейл (карта, daily-limit прогресс, сегмент-бар лимитов); таблица со статус-пилюлями | A, E |
| 02 | Кинокамерный «mission control», amber/red REC | Моно-телеметрия, плотная сетка; аудио-гейджи (dB), waveform/vectorscope; иконочные тулбары; false-color легенда; LUT-куб | **A**, E |
| 03 | (фин/тёмный, серия) | Плотные числа, тёмный грид | A, E |
| 05 | Спутниковый космо-дашборд, тёмно-бирюза, стекло | Центр-пилюля nav; «IA Insights» карточки-предсказания с бейджами; 3D-глобус-герой; правая деталь-панель (парные метрики); таймлайн запусков; ранж-бары «by category»; радар-циферблат | **B** |
| 06 | (стекло/тёмный) | Глассморфизм-слои | B |
| 07 | Vision Pro smart-home, фрост-стекло | Фрост-карты; bar power с подсветкой; крупные числовые (1,5 kWh/48,2%/68°F); радиальный термостат-циферблат; toggle-плитки; сегмент-табы комнат | **B** |
| 08 | (стекло) | Глубина, размытие фона | B |
| 09 | Vision Pro fitness, **светлый** воздушный глас | KPI с мини-чартами (Calories bars/HR line/Steps ring/Sleep bars); area «Activity» с тултип-пилюлей; календарь с цветными точками-днями; список-расписание с тумбами+тегами; карточки-планы | **C**, B |
| 10 | Vision Pro socials, нейтральное стекло | Платформенные KPI (followers+likes/day+спарклайн); групповой бар «Daily visitors» с пунктир-средней+легендой; ранж-список устройств; таблица постов (Reach/Engagement); ранж-бары гео | analytics-IA, C |
| 11 | Vision Pro smart-home, фрост над комнатой | Weather+5-дн прогноз; live-камера; медиаплеер; toggle-устройства; радиальный AC-циферблат 17°; LED color-slider; нижний док-nav | **B** |
| 12 | (серия) | — | — |

**Сводный вкус заказчика:** тёмные «mission control»-терминалы (02/01) + глассморфизм Vision Pro (05/07/11/09/10) + космо/спутниковая тема (05, ср. с планетой S1). Любит: плотную, но читаемую телеметрию; статус-пилюли; ранжированные бары; радиальные циферблаты; крупные числа; правый контекст-рейл; подсветку «важного» бара с тултипом.

**Маппинг на 5 стилей (предв.):**
- **A — Neo Mission Control:** реф 02/01/03 — тёмный точный грид, сдержанный неон, моно-телеметрия, терминальная чёткость.
- **B — Aurora Glass:** реф 05/07/11/06/08 — премиум-глассморфизм, глубина, мягкое свечение, фрост-слои.
- **C — Editorial Calm:** реф 09 (светлый) + 10 — светлый воздушный, типографика, графики как тихие красивые объекты.
- **D — Kinetic Futurism:** анимированные данные/переходы (мотив-референс GIF битый → возьмём из S1 planet/анимаций + библиотеки моушна).
- **E — Brutalist Data:** реф 02 (raw-сетки, крупные цифры) — высокий контраст, утилитарный характер.

---

## 5. Каталог данных (формы сущностей для mock-data Фаз 3/5)

Из S1 (`projects.json`) и описи S2. Будет вынесено в `shared/mock-data/` позже.

```
Project {
  id, name, type: "Прод"|"Авто"|"Ручной",
  status: "Готово"|"В работе"|"Ждут вас"|"Черновик",
  progress: 0..100, stage: string, stagesTotal: int, stageIndex: int,
  sessions: int, timeSpent: minutes, wins: int, errors: int,
  nextStep: string, prodUrl?: string, desc, series:[…], updatedAt
}
Draft { id, name, urgency: "низкая"|"средняя"|"высокая", deadline?, updatedAt }
Note  { id, title, body, category: "Задача"|"Заметка"|"Идея", status, createdAt }
Report{ period, throughput:[…], successVsErrors:{win,err}, sessions:[…], topProjects:[…] }
Deploy{ id, project, env, status:"Готов"|"В процессе"|"Ошибка", url, deployedAt }
BrainNode { id, label, type, links:[id], file? }   BrainFile { path, size, type }
Edit  { id, project, status:"Применено"|"Принято"|"Отклонено", summary, at }
Session { id, project, startedAt, duration, result:"Удача"|"Ошибка", messages }
LogLine { ts, level:"info"|"warn"|"error", text }
ChatMsg { role:"user"|"ai", text, ts }
TokenUsage { window5h:{pct:13,label:"2ч"}, week:{pct:32,label:"5дн"} }   // header-мок
KPI { totalProjects, inWork, awaitingYou, done, avgProgress, parallel, totalSessions, totalTime }
```
Демо-имена (реалистичные, из соседних проектов): «Лендинг часов AURÈNE», «Copy brain», «Презентация Claude Code», «Hello static». Статусы: Готово / В работе / Ждут вас.

---

## 6. Открытые вопросы и hard-inputs

| # | Вопрос / вход | Блокирует? | План |
|---|---------------|-----------|------|
| Q1 | **Доступ к деплою** (как разворачиваются проекты здесь: GitHub Pages, как `project-5ieb`?) и токен/репозиторий | Только Фазу 7 | До Фазы 7 не блокирует. Спросим перед деплоем. По соседнему `project-5ieb` видно паттерн GitHub Pages (`deploy.sh`) — вероятный путь |
| Q2 | Референс-мотив `04-…gif` = **0 байт (битый)** | Нет | Мотив-язык для стиля D возьмём из S1 (`planet.js`, `animations.css`) + библиотек. Если важен — можно перезалить файл |
| Q3 | Подтверждение, что боевой кабинет не нужно/невозможно читать (его нет на сервере) | Нет | Работаем по авторитетной описи S2; ничего боевого не трогаем |

Ни один пункт не блокирует переход к Фазе 1. Продолжаем автономно.

---

## 7. Вывод Фазы 0
- Реальный кабинет на сервере отсутствует; опись из задания (S2) принята как авторитетная и полностью разложена постранично (11 страниц + глобальная оболочка).
- On-server демо `ai-factory-b4e4` инвентаризировано как образец текущей эстетики и техники графиков (то, что заменяем).
- UX-диагностика выявила 7 сквозных болей (нет иерархичной навигации, перегруженный неинформативный header, плоские метрики без инсайта, отсутствие дашбордов/графиков, неопределённые состояния, непродуманный мобайл, визуальное клише) + конкретику по каждой из 11 страниц.
- 11 референсов изучены и смаплены на 5 стилей; собран каталог данных.
- **Готово к Фазе 1** (5 IA-концепций реорганизации).