Skip to content

left_menu.md

Latest commit

 

History

History
374 lines (260 loc) · 19.4 KB

left_menu.md

File metadata and controls

374 lines (260 loc) · 19.4 KB
Raw

Wukong — Left Sidebar Navigation Specification

1. Концепция

Левая навигация Wukong организована вокруг двух главных режимов работы платформы:

  • «Компания» — корпоративный операционный центр (дашборд, агенты, лента)
  • «ГигаМозг» — персональный AI-ассистент (чат, задачи, автоматизации)

Все остальные пункты сгруппированы по частоте использования: от ежедневных (Задачи, История) до редких (Настройки). Пространства и Команды — динамические контексты, которые пользователь создаёт и между которыми переключается.

2. Визуальная структура

┌─────────────────────────────┐
│  W  Wukong · AI Operations  │  ← Логотип + бренд
├─────────────────────────────┤
│                             │
│  🏢 Компания                │  ← ГРУППА 1: Главные режимы
│  🧠 ГигаМозг           [3] │     Два основных входа
│                             │
│─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│
│                             │
│  📋 Задачи              [5] │  ← ГРУППА 2: Ежедневное
│  📜 История                 │     Часто используемые разделы
│                             │
│─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│
│                             │
│  🤖 Агенты                  │  ← ГРУППА 3: Конфигурация
│  📦 Шаблоны                 │     Настраивается реже,
│  🔧 Skills                  │     используется через задачи
│                             │
│─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│
│  ПРОСТРАНСТВА               │  ← ГРУППА 4: Контексты
│  ● Закупки              3  │     Рабочие среды
│  ● Маркетинг            1  │
│  ● HR отдел             2  │
│  + Добавить                 │
│─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│
│  КОМАНДЫ                    │  ← ГРУППА 5: Люди
│  👥 Отдел закупок       4  │     Человеческие команды
│  👥 Команда продукта    3  │
│─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│
│  ⚙️ Настройки               │  ← ГРУППА 6: Служебное
│─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│
│  👤 Влад · Закупки     ⚙️  │  ← Профиль пользователя
└─────────────────────────────┘

3. Размеры и основные параметры

Параметр Значение
Ширина (expanded) 256px (w-64)
Ширина (collapsed) 56px (w-14)
Background gray-900
Разделитель между группами border-t border-gray-800, mt-3 pt-3
Разделитель заголовков секций text-xs font-semibold text-gray-600 uppercase tracking-wider, px-3 mb-2
Переключение expanded/collapsed Клик по логотипу W
Шрифт Inter / system sans-serif

4. Логотип

Верхний блок, border-b border-gray-800, px-4 py-4.

  • Иконка: w-8 h-8, rounded-xl, bg-gradient-to-br from-orange-500 to-amber-400, text-white font-bold text-sm, буква «W». Shadow-lg.
  • Текст (expanded): «Wukong» (font-bold text-sm tracking-tight) + «AI Operations» (text-xs text-gray-500).
  • Collapsed: только иконка «W».
  • Действие: клик → переключает сайдбар между expanded (256px) и collapsed (56px).

5. Группа 1: Главные режимы

Два верхних пункта навигации. Переключают основной режим работы всей платформы. Визуально выделены из остальных пунктов.

Пункты

Icon Label View ID Badge
🏢 Компания company —
🧠 ГигаМозг gigabrain count (indigo-500 pill)

Описание

Компания — обзор корпоративного операционного центра. Вид по умолчанию при входе в платформу. Центральная область показывает: приветствие, быстрый старт (создать AI-команду, выбрать шаблон, запустить задачу, подключить систему), отраслевые решения, активные агенты с прогрессом, лента событий.

ГигаМозг — персональный AI-ассистент. Центральная область показывает интерфейс агента с тремя вкладками: Чат (диалог с агентом, execution cards, inline-виджеты), Обзор (компактный дашборд: календарь, задачи, почта, выполнения, автоматизации), Пространства (карточки рабочих пространств с метриками).

Стили

Компания (active):

bg-gray-800
text-white
rounded-lg
px-3 py-2.5

ГигаМозг (active):

bg-indigo-600/20
text-indigo-300
ring-1 ring-indigo-500/30
rounded-lg
px-3 py-2.5

Пульсирующий индикатор: w-1.5 h-1.5, bg-indigo-400, animate-pulse, absolute -top-0.5 -right-0.5 относительно иконки. Показывается при наличии уведомлений. Badge: bg-indigo-500 text-white text-xs px-1.5 py-0.5 rounded-full font-medium, ml-auto. Показывает количество непрочитанных уведомлений/предложений агента.

Inactive (оба):

text-gray-400
hover:text-gray-200
hover:bg-gray-800/50
rounded-lg
px-3 py-2.5
cursor-pointer
transition-colors

Размер и визуальный вес

Пункты Группы 1 используют тот же размер шрифта (text-xs), что и остальная навигация, но выделяются за счёт акцентных цветов и ring. Это делает их визуально «тяжелее» без нарушения вертикального ритма.

6. Группа 2: Ежедневное

Разделы, которые пользователь открывает несколько раз в день. Отделены от Группы 1 визуальным разделителем (border-t border-gray-800, mt-3 pt-3).

Пункты

Icon Label View ID Badge
📋 Задачи tasks count (orange-500 pill)
📜 История history —

Описание

Задачи — единый список задач по всем пространствам. Фильтрация по: пространству, статусу (active/waiting/completed), приоритету (P0–P3), агенту. Включает задачи, запущенные пользователем, и задачи, где пользователь — согласующий. Badge показывает количество незакрытых задач.

История — хронологический лог выполнений. Что делали агенты, результаты, ошибки. Фильтрация по пространству и агенту. Поиск по содержимому.

Стили

Active: bg-gray-800, text-white, rounded-lg, px-3 py-2.5. Inactive: text-gray-400, hover:text-gray-200, hover:bg-gray-800/50. Badge «Задачи»: bg-orange-500 text-white text-xs px-1.5 py-0.5 rounded-full font-medium, ml-auto.

7. Группа 3: Конфигурация

Разделы, которые настраиваются еженедельно/ежемесячно. Используются через задачи и пространства. Отделены разделителем.

Пункты

Icon Label View ID
🤖 Агенты agents
📦 Шаблоны templates
🔧 Skills skills

Описание

Агенты — каталог AI-агентов платформы. Просмотр доступных агентов, создание новых, настройка скиллов и параметров, мониторинг нагрузки и статусов.

Шаблоны — отраслевые решения и готовые конфигурации. «One-person» пакеты: e-commerce, финансы, рекрутинг, юриспруденция, производство, аналитика. Каждый шаблон — набор агентов + пространство + подключённые системы.

Skills — управление навыками агентов. Маркетплейс навыков, установка, настройка, создание кастомных.

Стили

Active: bg-gray-800, text-white. Inactive: text-gray-500 (чуть приглушённее, чем gray-400 в группах 1–2), hover:text-gray-300, hover:bg-gray-800/50. Padding: px-3 py-2 (чуть компактнее, чем у групп 1–2).

Визуальная приглушённость подчёркивает, что эти разделы — конфигурационные, не ежедневные.

8. Группа 4: Пространства

Динамические рабочие контексты. Отделены заголовком-разделителем.

Заголовок

«ПРОСТРАНСТВА» — text-xs font-semibold text-gray-600 uppercase tracking-wider, px-3 mb-2.

Элементы

Каждое пространство:

  • Colored dot: w-2 h-2, rounded-full, цвет пространства (orange-500, blue-500, purple-500 и т.д.)
  • Название: text-xs, truncate
  • Счётчик активных задач: text-gray-600, ml-auto
  • Стиль: px-3 py-2, rounded-lg, text-gray-400, hover:text-gray-200, hover:bg-gray-800/50, cursor-pointer

Кнопка добавления

«+ Добавить» — px-3 py-2, text-xs, text-gray-600, hover:text-gray-400, cursor-pointer.

Поведение при клике

Зависит от текущего активного режима:

  • В режиме «ГигаМозг» → открывает контекстную панель справа (320px) с деталями пространства: задачи, агенты, документы, подключённые системы.
  • В режиме «Компания» → переключает центральную область на Workspace Detail View (полноценный вид пространства).

Максимальное количество

Показываются все пространства без ограничений. При большом количестве (>8) — scrollable внутри секции.

9. Группа 5: Команды

Человеческие команды с RBAC. Отделены заголовком-разделителем.

Заголовок

«КОМАНДЫ» — text-xs font-semibold text-gray-600 uppercase tracking-wider, px-3 mb-2.

Элементы

Каждая команда:

  • Иконка: 👥 (text-sm)
  • Название: text-xs, truncate
  • Счётчик участников: text-gray-600, ml-auto
  • Стиль: идентичен пространствам

Поведение при клике

Открывает Team Detail View: таблица участников с правами (RBAC), общие агенты, активность команды, доступ к пространствам.

10. Группа 6: Служебное

Внизу, над профилем пользователя. Отделено разделителем.

Пункты

Icon Label View ID
⚙️ Настройки settings

Описание

Настройки — общие настройки платформы: API-ключи, подключённые системы (CRM, ERP, DingTalk), уведомления, биллинг и лимиты токенов, управление пользователями.

Стили

Inactive: text-gray-500, hover:text-gray-300. Визуально приглушён, как Группа 3.

11. Профиль пользователя

Самый нижний элемент. Border-t border-gray-800, px-3 py-3.

Содержимое (expanded)

  • Avatar: w-7 h-7, rounded-full, bg-gradient-to-br from-blue-500 to-indigo-600, text-white text-xs font-bold, первая буква имени.
  • Имя: text-xs font-medium, truncate.
  • Отдел: text-xs text-gray-500.
  • Иконка настроек агента: ⚙️, text-gray-500, hover:text-gray-300, ml-auto. Клик → открывает контекстную панель справа с type: "agent-settings" (личность агента, доступ, память).

Содержимое (collapsed)

Только аватар. Клик → открывает popup с именем и быстрыми действиями.

12. Collapsed State (56px)

При свёрнутом сайдбаре все текстовые лейблы скрыты. Показываются только иконки и индикаторы.

Правила

Элемент Collapsed
Логотип Только «W»
Компания 🏢
ГигаМозг 🧠 + badge-точка (indigo, w-1.5 h-1.5) при уведомлениях
Задачи 📋 + badge-точка (orange) при наличии
История 📜
Агенты 🤖
Шаблоны 📦
Skills 🔧
Пространства Цветные точки (без текста, без счётчиков)
Команды 👥
Настройки ⚙️
Профиль Только аватар

Разделители

Группировка сохраняется через горизонтальные разделители (border-t border-gray-800). Визуально группы отделены даже без текстовых заголовков.

Tooltips

Hover на любой иконке → tooltip справа: bg-gray-800, text-gray-200, text-xs, rounded-lg, px-3 py-2, shadow-xl, стрелка влево. Содержит название пункта. Анимация: translateY(8px) → 0, opacity 0 → 1, 0.15s ease-out.

13. Поведение при переключении видов

Действие в сайдбаре Центральная область Правая панель
Клик «Компания» Corporate Dashboard: приветствие, быстрый старт, агенты, лента Сохраняет состояние
Клик «ГигаМозг» Agent UI: вкладки Чат / Обзор / Пространства Сохраняет состояние
Клик «Задачи» Список задач (фильтруемый по пространству, статусу, приоритету) Закрывается
Клик «История» Лог выполнений (хронологический, фильтруемый) Закрывается
Клик «Агенты» Каталог AI-агентов Закрывается
Клик «Шаблоны» Отраслевые решения Закрывается
Клик «Skills» Маркетплейс навыков Закрывается
Клик пространство ГигаМозг: контекстная панель. Компания: Workspace Detail Открывается / обновляется
Клик команда Team Detail View Закрывается
Клик «Настройки» Settings View Закрывается
Клик профиль (⚙️) Не меняется Открывает agent-settings

Запоминание состояния

При переключении между «Компания» и «ГигаМозг» платформа запоминает:

  • Активную вкладку внутри ГигаМозг (Чат / Обзор / Пространства)
  • Позицию скролла в ленте чата
  • Открытую контекстную панель (если была)

При возврате — восстанавливает состояние.

14. Принцип группировки

Навигация организована по убыванию частоты использования:

Группа Частота Пункты
1. Главные режимы Каждый вход Компания, ГигаМозг
2. Ежедневное Несколько раз в день Задачи, История
3. Конфигурация Еженедельно / ежемесячно Агенты, Шаблоны, Skills
4. Контексты По мере работы Пространства (динамические)
5. Люди По мере работы Команды (динамические)
6. Служебное Редко Настройки

Этот принцип обеспечивает: верхние пункты — самые нужные, нижние — самые редкие. Пользователь тратит минимум усилий на навигацию в ежедневной работе.

15. Responsive

Breakpoint Поведение
≥ 1280px Expanded (256px)
1024–1279px Expanded, но без правой контекстной панели по умолчанию
768–1023px Collapsed (56px) по умолчанию, expandable по клику
< 768px Hamburger menu (overlay), сайдбар скрыт

16. Accessibility

  • Все пункты навигации — <button> или <a> с role="menuitem"
  • Группы обёрнуты в <nav> с aria-label
  • Active item: aria-current="page"
  • Collapsed tooltips: aria-label на каждой иконке
  • Keyboard navigation: Tab между группами, Arrow Up/Down внутри группы
  • Focus ring: ring-2 ring-indigo-400 на фокусе
  • Contrast: все текстовые элементы проходят WCAG AA на фоне gray-900