Spec Workflow MCP

# Руководство по интерфейсам Это руководство охватывает два основных интерфейса для Spec Workflow MCP: веб-панель управления и расширение VSCode. ## Обзор Spec Workflow MCP предоставляет два интерфейса: 1. **Веб-панель управления** - Браузерный интерфейс для пользователей CLI 2. **Расширение VSCode** - Интегрированный опыт IDE для пользователей VSCode Оба интерфейса предоставляют одинаковую основную функциональность с оптимизацией для конкретной платформы. ## Веб-панель управления ### Обзор Веб-панель управления - это веб-приложение реального времени, которое обеспечивает визуальный доступ к вашим спецификациям, задачам и процессам утверждения. ### Запуск панели управления #### Автономная панель управления ```bash # Использует эфемерный порт npx -y @pimzino/spec-workflow-mcp@latest /path/to/project --dashboard # Пользовательский порт npx -y @pimzino/spec-workflow-mcp@latest /path/to/project --dashboard --port 3000 ``` #### С сервером MCP ```bash # Автоматический запуск с MCP npx -y @pimzino/spec-workflow-mcp@latest /path/to/project --AutoStartDashboard ``` ### Функции панели управления #### Главный вид Главная панель отображает: - **Обзор проекта** - Количество активных спецификаций - Всего задач - Процент выполнения - Недавняя активность - **Карточки спецификаций** - Имя и статус спецификации - Полоса прогресса - Индикаторы документов - Быстрые действия #### Подробный вид спецификации При клике на спецификацию отображается: - **Вкладки документов** - Требования - Дизайн - Задачи - **Содержимое документа** - Отрендеренный markdown - Подсветка синтаксиса - Оглавление - **Действия утверждения** - Кнопка утверждения - Запрос изменений - Опция отклонения - Поле комментария #### Управление задачами Вид задач предоставляет: - **Иерархический список задач** - Нумерованные задачи (1.0, 1.1, 1.1.1) - Индикаторы статуса - Отслеживание прогресса - **Действия с задачами** - Кнопка копирования запроса - Отметить как выполненное - Добавить заметки - Просмотр зависимостей - **Визуализация прогресса** - Общая полоса прогресса - Прогресс по разделам - Оценки времени #### Управляющие документы Доступ к руководству проекта: - **Управление продуктом** - Видение и цели - Пользовательские персоны - Метрики успеха - **Техническое управление** - Архитектурные решения - Выбор технологий - Цели производительности - **Управление структурой** - Организация файлов - Соглашения об именовании - Границы модулей ### Навигация по панели управления #### Горячие клавиши | Комбинация | Действие | |----------|--------| | `Alt + S` | Фокус на список спецификаций | | `Alt + T` | Просмотр задач | | `Alt + R` | Просмотр требований | | `Alt + D` | Просмотр дизайна | | `Alt + A` | Открыть диалог утверждения | | `Esc` | Закрыть диалог | #### Структура URL Прямые ссылки на конкретные виды: - `/` - Главная панель - `/spec/{name}` - Конкретная спецификация - `/spec/{name}/requirements` - Документ требований - `/spec/{name}/design` - Документ дизайна - `/spec/{name}/tasks` - Список задач - `/steering/{type}` - Управляющие документы ### Обновления в реальном времени Панель управления использует WebSockets для живых обновлений: - **Автоматическое обновление** - Новые спецификации появляются мгновенно - Обновления статуса задач - Изменения прогресса - Уведомления об утверждении - **Статус соединения** - Зеленый: Подключено - Желтый: Переподключение - Красный: Отключено - **Система уведомлений** - Запросы утверждения - Завершение задач - Оповещения об ошибках - Сообщения об успехе ### Настройка панели управления #### Настройки темы Переключение между светлым и темным режимами: - Нажмите значок темы в заголовке - Сохраняется между сеансами - Учитывает системные предпочтения #### Выбор языка Изменение языка интерфейса: 1. Нажмите значок настроек 2. Выберите язык из выпадающего списка 3. Интерфейс обновляется немедленно Поддерживаемые языки: - English (en) - Japanese (ja) - Chinese (zh) - Spanish (es) - Portuguese (pt) - German (de) - French (fr) - Russian (ru) - Italian (it) - Korean (ko) - Arabic (ar) #### Опции отображения Настройка предпочтений просмотра: - Компактные/развернутые карточки спецификаций - Показать/скрыть выполненные задачи - Размер шрифта документа - Тема подсветки кода ## Расширение VSCode ### Установка Установите из магазина VSCode: 1. Откройте расширения VSCode (Ctrl+Shift+X) 2. Найдите "Spec Workflow MCP" 3. Нажмите установить 4. Перезагрузите VSCode Или через командную строку: ```bash code --install-extension Pimzino.spec-workflow-mcp ``` ### Функции расширения #### Боковая панель Доступ через значок на панели активности: - **Проводник спецификаций** - Древовидный вид всех спецификаций - Развернуть для просмотра документов - Индикаторы статуса - Действия контекстного меню - **Список задач** - Фильтруемый вид задач - Отслеживание прогресса - Быстрые действия - Функция поиска - **Вид архива** - Завершенные спецификации - Исторические данные - Опция восстановления - Массовые операции #### Просмотрщик документов Открывайте документы в редакторе: - **Подсветка синтаксиса** - Рендеринг Markdown - Блоки кода - Флажки задач - Ссылки и ссылки - **Действия с документами** - Редактировать на месте - Режим предварительного просмотра - Разделенный вид - Опции экспорта #### Интегрированные утверждения Нативные диалоги VSCode для: - **Запросы утверждения** - Всплывающие уведомления - Встроенные комментарии - Быстрое утверждение/отклонение - Подробная обратная связь - **Процесс ревизии** - Отслеживание изменений - Цепочки комментариев - Сравнение версий - История утверждений #### Действия контекстного меню Действия правой кнопкой мыши в редакторе: - **На файлах спецификаций** - Утвердить документ - Запросить изменения - Просмотр на панели управления - Копировать путь спецификации - **На элементах задач** - Отметить как выполненное - Копировать запрос - Добавить подзадачу - Просмотр деталей ### Настройки расширения Настройте в параметрах VSCode: ```json { "specWorkflow.language": "en", "specWorkflow.notifications.enabled": true, "specWorkflow.notifications.sound": true, "specWorkflow.notifications.volume": 0.5, "specWorkflow.archive.showInExplorer": true, "specWorkflow.tasks.autoRefresh": true, "specWorkflow.tasks.refreshInterval": 5000, "specWorkflow.theme.followVSCode": true } ``` #### Описания настроек | Настройка | Описание | По умолчанию | |---------|-------------|---------| | `language` | Язык интерфейса | "en" | | `notifications.enabled` | Показывать уведомления | true | | `notifications.sound` | Воспроизводить звуковые оповещения | true | | `notifications.volume` | Громкость звука (0-1) | 0.5 | | `archive.showInExplorer` | Показывать архивные спецификации | true | | `tasks.autoRefresh` | Автообновление задач | true | | `tasks.refreshInterval` | Интервал обновления (мс) | 5000 | | `theme.followVSCode` | Следовать теме VSCode | true | ### Команды расширения Доступны в палитре команд (Ctrl+Shift+P): | Команда | Описание | |---------|-------------| | `Spec Workflow: Create Spec` | Начать новую спецификацию | | `Spec Workflow: List Specs` | Показать все спецификации | | `Spec Workflow: View Dashboard` | Открыть веб-панель управления | | `Spec Workflow: Archive Spec` | Переместить в архив | | `Spec Workflow: Restore Spec` | Восстановить из архива | | `Spec Workflow: Refresh` | Перезагрузить данные спецификации | | `Spec Workflow: Show Steering` | Просмотр управляющих документов | | `Spec Workflow: Export Spec` | Экспорт в markdown | ### Звуковые уведомления Расширение включает звуковые оповещения для: - **Запросы утверждения** - Мягкий звон - **Завершение задачи** - Звук успеха - **Ошибки** - Тон оповещения - **Обновления** - Мягкое уведомление Настройте в параметрах: ```json { "specWorkflow.notifications.sound": true, "specWorkflow.notifications.volume": 0.3 } ``` ## Сравнение функций | Функция | Веб-панель управления | Расширение VSCode | |---------|--------------|------------------| | Просмотр спецификаций | ✅ | ✅ | | Управление задачами | ✅ | ✅ | | Утверждения | ✅ | ✅ | | Обновления в реальном времени | ✅ | ✅ | | Система архивирования | ❌ | ✅ | | Звуковые уведомления | ❌ | ✅ | | Интеграция с редактором | ❌ | ✅ | | Контекстные меню | ❌ | ✅ | | Горячие клавиши | Ограниченные | Полные | | Мультипроект | Ручной | Автоматический | | Автономный доступ | ❌ | ✅ | | Опции экспорта | Базовые | Расширенные | ## Выбор правильного интерфейса ### Используйте веб-панель управления когда: - Используете инструменты AI на основе CLI - Работаете в нескольких IDE - Нужен доступ через браузер - Делитесь с членами команды - Нужен быстрый обзор проекта ### Используйте расширение VSCode когда: - Основная IDE - VSCode - Хотите интегрированный опыт - Нужны функции редактора - Предпочитаете нативные диалоги - Хотите звуковые уведомления ## Синхронизация интерфейсов Оба интерфейса используют одни и те же данные: - **Синхронизация в реальном времени** - Изменения в одном отражаются в другом - Общее состояние утверждения - Согласованный статус задач - Единое отслеживание прогресса - **Хранение данных** - Единый источник истины - Хранение на основе файлов - Синхронизация не требуется - Мгновенные обновления ## Доступ с мобильных устройств и планшетов ### Веб-панель управления на мобильных устройствах Панель управления адаптивная: - **Вид на телефоне** - Стопка карточек спецификаций - Сворачиваемая навигация - Кнопки, оптимизированные для касания - Жесты свайпа - **Вид на планшете** - Расположение бок о бок - Сенсорные взаимодействия - Оптимизированное расстояние - Поддержка ландшафта ### Ограничения на мобильных устройствах - Нет расширения VSCode - Ограниченные горячие клавиши - Уменьшенная многозадачность - Упрощенные взаимодействия ## Функции доступности ### Веб-панель управления - **Навигация с клавиатуры** - Tab для перемещения по элементам - Enter для активации - Escape для отмены - Стрелки для списков - **Поддержка программ чтения с экрана** - ARIA метки - Атрибуты ролей - Объявления статуса - Управление фокусом - **Визуальная доступность** - Режим высокой контрастности - Настраиваемый размер шрифта - Дружественный для дальтоников - Индикаторы фокуса ### Расширение VSCode Наследует доступность VSCode: - Поддержка программ чтения с экрана - Навигация с клавиатуры - Высококонтрастные темы - Функция масштабирования ## Оптимизация производительности ### Производительность панели управления - **Ленивая загрузка** - Документы загружаются по запросу - Пагинация для длинных списков - Прогрессивный рендеринг - Оптимизация изображений - **Стратегия кэширования** - Кэширование браузера - Service worker - Автономная поддержка (ограниченная) - Быстрая навигация ### Производительность расширения - **Управление ресурсами** - Минимальное использование памяти - Эффективное наблюдение за файлами - Отложенные обновления - Фоновая обработка ## Устранение проблем интерфейса ### Проблемы панели управления | Проблема | Решение | |-------|----------| | Не загружается | Проверьте, что сервер запущен, проверьте URL | | Нет обновлений | Проверьте соединение WebSocket, обновите страницу | | Утверждение не работает | Убедитесь, что панель управления и MCP подключены | | Стиль сломан | Очистите кэш браузера, проверьте консоль | ### Проблемы расширения | Проблема | Решение | |-------|----------| | Не показывает спецификации | Проверьте, что в проекте есть каталог .spec-workflow | | Команды не работают | Перезагрузите окно VSCode | | Нет уведомлений | Проверьте настройки расширения | | Архив не виден | Включите в настройках | ## Расширенное использование ### Пользовательский URL панели управления Настройте в нескольких терминалах: ```bash # Терминал 1: Сервер MCP npx -y @pimzino/spec-workflow-mcp@latest /project # Терминал 2: Панель управления npx -y @pimzino/spec-workflow-mcp@latest /project --dashboard --port 3000 ``` ### Мультикорневые рабочие пространства расширения Расширение поддерживает мультикорневые рабочие пространства VSCode: 1. Добавьте несколько папок проекта 2. Каждая показывает отдельные спецификации 3. Переключение между проектами 4. Независимые конфигурации ## Связанная документация - [Руководство по конфигурации](CONFIGURATION.ru.md) - Настройка и конфигурация - [Руководство пользователя](USER-GUIDE.ru.md) - Использование интерфейсов - [Процесс рабочего процесса](WORKFLOW.ru.md) - Рабочий процесс разработки - [Устранение неполадок](TROUBLESHOOTING.ru.md) - Распространенные проблемы