Shrimp Task Manager

# 🦐 Просмотрщик задач Shrimp Task Manager Современный веб-интерфейс на базе React для просмотра и управления задачами [Shrimp Task Manager](https://github.com/cjo4m06/mcp-shrimp-task-manager), созданными через инструмент MCP (Model Context Protocol). Этот визуальный интерфейс позволяет просматривать подробную информацию о задачах, отслеживать прогресс по нескольким проектам и легко копировать UUID задач для взаимодействия с ИИ-агентами. ## Зачем использовать Shrimp Task Viewer? При использовании Shrimp Task Manager в качестве MCP-сервера с ИИ-агентами, такими как Claude, этот просмотрщик обеспечивает важную видимость в экосистему ваших задач: - **Визуальный обзор задач**: Просматривайте все задачи, их статус, зависимости и прогресс в понятном интерфейсе с вкладками - **Управление UUID**: Нажмите любой значок задачи, чтобы мгновенно скопировать её UUID для команд типа `"Используй диспетчер задач для завершения этой задачи shrimp: [UUID]"` - **Параллельное выполнение**: Откройте несколько терминалов и используйте колонку ИИ Действия (🤖) для копирования инструкций задач для параллельного выполнения ИИ-агентами - **Обновления в реальном времени**: Прямое чтение путей к файлам гарантирует, что вы всегда видите текущее состояние задач - **Поддержка нескольких проектов**: Управляйте задачами различных проектов с помощью перетаскиваемых вкладок профилей Информацию о настройке Shrimp Task Manager в качестве MCP-сервера см. в [основном репозитории](https://github.com/cjo4m06/mcp-shrimp-task-manager). ## 📖 Подробная документация по страницам ### 📋 Страница Задач Основная страница Задач — это ваш командный центр для управления задачами. Она предоставляет всеобъемлющий просмотр всех задач в выбранном профиле с мощными функциями для организации и выполнения.  **Ключевые функции:** - **Таблица задач**: Отображает все задачи с сортируемыми колонками, включая № Задачи, Статус, Агент, Дата создания, Название, Зависимости и Действия - **Значки статуса**: Цветовые значки (🟡 Ожидание, 🔵 В работе, 🟢 Выполнено, 🔴 Заблокировано) - **Назначение агентов**: Выпадающий селектор для назначения конкретных ИИ-агентов задачам - **Всплывающий просмотрщик агентов**: Нажмите иконку глаза (👁️), чтобы открыть всплывающее окно для просмотра и выбора агентов - **Колонка зависимостей**: Показывает связанные ID задач с функцией навигации по клику - **Колонка действий**: Содержит мощный эмодзи робота (🤖) для выполнения ИИ-задач - **Навигация по деталям задач**: При просмотре деталей задач используйте кнопки ← Назад и Далее → для быстрой навигации между задачами #### 🤖 Эмодзи робота - Выполнение ИИ-задач Эмодзи робота в колонке Действия — это мощная функция для выполнения задач с помощью ИИ:  **Как это работает:** 1. **Нажмите эмодзи 🤖**, чтобы скопировать инструкцию выполнения задачи в буфер обмена 2. **Для задач с агентами**: Копирует `use the built in subagent located in ./claude/agents/[agent-name] to complete this shrimp task: [task-id] please when u start working mark the shrimp task as in progress` 3. **Для задач без агентов**: Копирует `Use task manager to complete this shrimp task: [task-id] please when u start working mark the shrimp task as in progress` 4. **Визуальная обратная связь**: Эмодзи кратковременно меняется на ✓ для подтверждения операции копирования **Случаи использования:** - **Параллельное выполнение**: Откройте несколько терминальных окон с разными ИИ-агентами и вставьте инструкции для одновременной обработки задач - **Специализация агентов**: Назначьте специализированных агентов (например, `react-components.md`, `database-specialist.md`) подходящим задачам - **Быстрая передача**: Быстро делегируйте задачи ИИ-агентам без ввода сложных команд #### 🤖 Массовое назначение агентов с помощью ИИ Страница Задач теперь включает массовое назначение агентов с помощью ИИ, используя GPT-4 от OpenAI: **Как использовать:** 1. **Выберите задачи**: Используйте флажки для выбора нескольких задач, которым нужно назначение агентов 2. **Панель массовых действий**: Появляется синяя панель с надписью "🤖 ИИ Назначить Агентов (выбрано X задач)" 3. **Назначение одним кликом**: Нажмите кнопку, чтобы GPT-4 проанализировал задачи и назначил подходящих агентов 4. **Автоматическое сопоставление**: ИИ учитывает описания задач, зависимости и возможности агентов **Требования к настройке:** 1. **Настройка ключа API**: Перейдите в Настройки → Глобальные настройки 2. **Введите ключ OpenAI**: Вставьте ваш ключ API OpenAI в поле (отображается как ✓ Настроено при установке) 3. **Альтернативный метод**: Установите переменную окружения `OPENAI_API_KEY` или `OPEN_AI_KEY_SHRIMP_TASK_VIEWER` 4. **Получите ключ API**: Посетите [OpenAI Platform](https://platform.openai.com/api-keys) для генерации ключа  *Страница глобальных настроек предоставляет безопасное поле для настройки ключа API OpenAI* #### 📝 Просмотр деталей задач Нажмите любую строку задачи, чтобы открыть подробный просмотр задачи с исчерпывающей информацией: **Функции:** - **Полная информация о задаче**: Просматривайте полные описания, заметки, руководства по реализации и критерии верификации - **Навигация по задачам**: Используйте кнопки ← Назад и Далее → для перемещения между задачами без возврата к списку - **Связанные файлы**: Просматривайте все файлы, связанные с задачей, с номерами строк - **Граф зависимостей**: Визуальное представление зависимостей задач - **Режим редактирования**: Нажмите "Изменить" для модификации деталей задачи (для незавершенных задач) - **Быстрые действия**: Скопируйте ID задачи, посмотрите сырой JSON или удалите задачу **Преимущества навигации:** - **Эффективный просмотр**: Быстро просматривайте несколько задач подряд - **Сохранение контекста**: Оставайтесь в детальном просмотре при перемещении между задачами - **Поддержка клавиатуры**: Используйте клавиши со стрелками для ещё более быстрой навигации ### 📜 Страница истории проекта Страница истории проекта предоставляет ценные сведения об эволюции вашего проекта, отображая снимки завершенных задач, сохраненные Shrimp Task Manager.  **Функции:** - **Просмотр временной линии**: Просматривайте исторические снимки состояний задач вашего проекта - **Файлы памяти**: Автоматически сохраняются Shrimp Task Manager при запуске новых сессий - **Эволюция задач**: Отслеживайте, как задачи прогрессировали от создания до завершения - **Система заметок**: Добавляйте личные аннотации к историческим записям  **Навигация:** - Нажмите любую историческую запись, чтобы просмотреть подробное состояние задач на тот момент времени - Используйте кнопки навигации для перемещения между различными снимками - Ищите и фильтруйте исторические задачи так же, как в основном просмотре задач ### 🤖 Страница суб-агентов Страница суб-агентов позволяет управлять специализированными ИИ-агентами, которые могут быть назначены задачам для оптимального выполнения.  **Функции:** - **Библиотека агентов**: Просматривайте всех доступных агентов из папки `.claude/agents` - **Колонка ИИ-инструкций**: Нажмите эмодзи робота (🤖), чтобы мгновенно скопировать инструкции использования агентов - Пример: `use subagent debugger.md located in ./claude/agents to perform:` - Нет необходимости вручную вводить пути агентов или запоминать синтаксис - Визуальная обратная связь подтверждает успешное копирование в буфер обмена - **Редактор агентов**: Встроенный markdown-редактор для создания и изменения агентов - **Цветовое кодирование**: Назначайте цвета агентам для визуальной организации - **Назначение агентов**: Легко назначайте агентов задачам через выпадающий список в таблице задач - **Всплывающий просмотрщик агентов**: Нажмите иконку глаза (👁️) для просмотра и выбора агентов  **Рабочий процесс назначения агентов:**  1. **Выберите агента** из выпадающего списка в таблице задач 2. **Или нажмите иконку глаза (👁️)**, чтобы открыть всплывающий просмотрщик агентов 3. **Просматривайте агентов** во всплывающем окне, чтобы найти подходящего для вашей задачи 4. **Автоматическое сохранение** обновляет метаданные задачи 5. **Используйте эмодзи робота** для копирования инструкций выполнения, специфичных для агента  *Всплывающий просмотрщик агентов позволяет просматривать всех доступных агентов и выбирать лучшего для каждой задачи* ### 🎨 Страница шаблонов Управляйте шаблонами ИИ-инструкций, которые направляют то, как Shrimp Task Manager анализирует и выполняет различные типы операций.  **Возможности:** - **Редактор шаблонов**: Полнофункциональный markdown-редактор с подсветкой синтаксиса - **Типы шаблонов**: Состояния по умолчанию, пользовательские и пользовательские+дополнение - **Живой предварительный просмотр**: Просматривайте эффекты шаблонов перед активацией - **Экспорт/импорт**: Делитесь шаблонами с членами команды ### ⚙️ Глобальные настройки Настройте общесистемные параметры, включая путь к папке Claude для доступа к глобальным агентам. **Настройки включают:** - **Путь к папке Claude**: Установите путь к вашей глобальной папке `.claude` - **Настройка ключа API**: Управляйте переменными окружения для ИИ-сервисов - **Языковые предпочтения**: Переключайтесь между поддерживаемыми языками ## 🌟 Функции ### 🏷️ Современный интерфейс с вкладками - **Перетаскиваемые вкладки**: Переупорядочивайте профили путём перетаскивания вкладок - **Профессиональный дизайн**: Вкладки в стиле браузера, которые плавно соединяются с контентом - **Визуальная обратная связь**: Четкое указание активной вкладки и эффекты наведения - **Добавление новых профилей**: Интегрированная кнопка "+ Добавить вкладку", соответствующая дизайну интерфейса ### 🔍 Продвинутый поиск и фильтрация - **Поиск в реальном времени**: Мгновенная фильтрация задач по названию, описанию, статусу или ID - **Сортируемые колонки**: Нажмите заголовки колонок для сортировки по любому полю - **TanStack Table**: Мощный компонент таблицы с пагинацией и фильтрацией - **Адаптивный дизайн**: Прекрасно работает на десктопе, планшете и мобильном устройстве ### 🔄 Интеллектуальное автообновление - **Настраиваемые интервалы**: Выбирайте из 5с, 10с, 15с, 30с, 1м, 2м или 5м - **Умные элементы управления**: Переключатель автообновления с выбором интервала - **Визуальные индикаторы**: Состояния загрузки и статус обновления - **Ручное обновление**: Выделенная кнопка обновления для обновлений по требованию ### 📊 Комплексное управление задачами - **Статистика задач**: Живые счетчики всего, завершенных, в работе и ожидающих задач - **Управление профилями**: Добавляйте/удаляйте/переупорядочивайте профили через интуитивный интерфейс - **Постоянные настройки**: Конфигурации профилей сохраняются между сессиями - **Горячая перезагрузка**: Режим разработки с мгновенными обновлениями ### 🤖 Функции на базе ИИ - **Массовое назначение агентов**: Выбирайте несколько задач и используйте GPT-4 для автоматического назначения наиболее подходящих агентов - **Интеграция OpenAI**: Настраивайте ключ API в глобальных настройках или через переменные окружения - **Интеллектуальное сопоставление**: ИИ анализирует описания задач и возможности агентов для оптимальных назначений - **Руководство по ошибкам**: Четкие инструкции, если ключ API не настроен ### 📚 Контроль версий и история - **Интеграция Git**: Автоматические Git-коммиты отслеживают каждое изменение в tasks.json с временными метками сообщений - **Полный аудиторский след**: Просматривайте полную историю модификаций задач, используя стандартные инструменты Git - **Неблокирующие операции**: Сбои Git не прерывают управление задачами - **Изолированный репозиторий**: История задач отслеживается отдельно от репозитория вашего проекта ### 🎨 Профессиональный UI/UX - **Тёмная тема**: Оптимизирована для сред разработки - **Адаптивная компоновка**: Адаптируется к всем размерам экранов - **Доступность**: Полная навигация с клавиатуры и поддержка программ чтения с экрана - **Интерактивные элементы**: Подсказки при наведении и визуальная обратная связь повсюду ## 🚀 Быстрый старт ### Установка и настройка 1. **Клонирование и переход в директорию просмотрщика задач** ```bash cd path/to/mcp-shrimp-task-manager/tools/task-viewer ``` 2. **Установка зависимостей** ```bash npm install ``` 3. **Сборка React-приложения** ```bash npm run build ``` 4. **Запуск сервера** ```bash npm start ``` Просмотрщик будет доступен по адресу `http://localhost:9998` ### Режим разработки Для разработки с горячей перезагрузкой: ```bash # Запуск и API-сервера, и сервера разработки npm run start:all # Или запуск по отдельности: npm start # API-сервер на порту 9998 npm run dev # Vite сервер разработки на порту 3000 ``` Приложение будет доступно по адресу `http://localhost:3000` с автоматической пересборкой при изменении файлов. ### Развертывание в производство #### Стандартное развертывание ```bash # Сборка для производства npm run build # Запуск производственного сервера npm start ``` #### Сервис Systemd (Linux) Для автоматического запуска и управления процессами: 1. **Установка в качестве сервиса** ```bash sudo ./install-service.sh ``` 2. **Управление сервисом** ```bash # Проверка статуса systemctl status shrimp-task-viewer # Запуск/остановка/перезапуск sudo systemctl start shrimp-task-viewer sudo systemctl stop shrimp-task-viewer sudo systemctl restart shrimp-task-viewer # Просмотр логов journalctl -u shrimp-task-viewer -f # Отключение/включение автозапуска sudo systemctl disable shrimp-task-viewer sudo systemctl enable shrimp-task-viewer ``` 3. **Удаление сервиса** ```bash sudo ./uninstall-service.sh ``` ## 🖥️ Использование ### Начало работы 1. **Запуск сервера**: ```bash npm start ``` **Примечание**: Если вы ещё не собирали приложение или хотите использовать режим разработки с горячей перезагрузкой, используйте вместо этого `npm run start:all`. 2. **Откройте браузер**: Перейдите по адресу `http://127.0.0.1:9998` (производство) или `http://localhost:3000` (разработка) 3. **Добавьте ваш первый профиль**: - Нажмите кнопку "**+ Добавить вкладку**" - Введите описательное имя профиля (например, "Задачи команды Alpha") - Введите путь к папке данных shrimp, содержащей tasks.json - **Совет:** Перейдите в вашу папку в терминале и введите `pwd`, чтобы получить полный путь - Нажмите "**Добавить профиль**" 4. **Управляйте вашими задачами**: - Переключайтесь между профилями, используя вкладки - Ищите задачи, используя поле поиска - Сортируйте колонки, нажимая на заголовки - Настраивайте автообновление по необходимости ### Управление вкладками - **Переключение профилей**: Нажмите любую вкладку для переключения на этот профиль - **Переупорядочивание вкладок**: Перетаскивайте вкладки для их переупорядочивания в предпочитаемом порядке - **Добавление нового профиля**: Нажмите кнопку "**+ Добавить вкладку**" - **Удаление профиля**: Нажмите × на любой вкладке (с подтверждением) ### Поиск и фильтрация - **Глобальный поиск**: Введите в поле поиска для фильтрации по всем полям задач - **Сортировка колонок**: Нажмите любой заголовок колонки для сортировки (нажмите ещё раз для обратной сортировки) - **Пагинация**: Навигация по большим спискам задач с встроенными элементами управления пагинацией - **Обновления в реальном времени**: Поиск и сортировка обновляются мгновенно во время ввода ### Настройка автообновления 1. **Включение автообновления**: Поставьте галочку "Автообновление" 2. **Установка интервала**: Выберите из выпадающего списка (от 5с до 5м) 3. **Ручное обновление**: Нажмите кнопку 🔄 в любое время для немедленного обновления 4. **Визуальная обратная связь**: Спиннер показывается во время операций обновления ## 🔧 Конфигурация ### Переменные окружения Чтобы сделать переменные окружения постоянными в сессиях терминала, добавьте их в файл конфигурации вашей оболочки: **Для macOS/Linux с Zsh** (по умолчанию в современных macOS): ```bash # Добавить в ~/.zshrc echo 'export SHRIMP_VIEWER_PORT=9998' >> ~/.zshrc echo 'export SHRIMP_VIEWER_HOST=127.0.0.1' >> ~/.zshrc # Перезагрузить конфигурацию source ~/.zshrc ``` **Для Linux/Unix с Bash**: ```bash # Добавить в ~/.bashrc echo 'export SHRIMP_VIEWER_PORT=9998' >> ~/.bashrc echo 'export SHRIMP_VIEWER_HOST=127.0.0.1' >> ~/.bashrc # Перезагрузить конфигурацию source ~/.bashrc ``` **Зачем добавлять в конфигурацию оболочки?** - **Постоянство**: Переменные, установленные с `export` в терминале, действуют только для этой сессии - **Согласованность**: Все новые терминальные окна будут иметь эти настройки - **Удобство**: Нет необходимости устанавливать переменные каждый раз при запуске сервера **Доступные переменные**: ```bash SHRIMP_VIEWER_PORT=9998 # Порт сервера (по умолчанию: 9998) SHRIMP_VIEWER_HOST=127.0.0.1 # Хост сервера (только localhost) OPENAI_API_KEY=sk-... # Ключ API OpenAI для назначения агентов ИИ OPEN_AI_KEY_SHRIMP_TASK_VIEWER=sk-... # Альтернативная переменная окружения для ключа OpenAI ``` ### Конфигурация разработки - **Разработка с горячей перезагрузкой (рекомендуется для разработки)**: ```bash npm run start:all # Запускает API-сервер (9998) + Vite сервер разработки (3000) ``` **Зачем использовать start:all?** Эта команда запускает одновременно API-сервер и Vite сервер разработки. Вы получаете мгновенную горячую замену модулей (HMR) для изменений в интерфейсе, сохраняя при этом полную функциональность API. Ваши изменения появляются мгновенно в браузере по адресу `http://localhost:3000` без ручного обновления. - **Только API-сервер (для производства или тестирования API)**: ```bash npm start # Работает на порту 9998 ``` **Зачем использовать только API-сервер?** Используйте это, когда вы собрали производственные файлы и хотите протестировать полное приложение, как оно будет работать в производстве, или когда вам нужны только эндпоинты API. - **Сборка и обслуживание для производства**: ```bash npm run build && npm start # Сборка, затем обслуживание на порту 9998 ``` **Зачем собирать для производства?** Производственная сборка оптимизирует ваш код, минифицируя JavaScript, удаляя мертвый код и эффективно пакетируя ресурсы. Это приводит к более быстрому времени загрузки и лучшей производительности для конечных пользователей. Всегда используйте производственную сборку при развертывании. ### Хранение данных профилей **Понимание управления данными профилей**: Task Viewer использует гибридный подход к хранению данных, который приоритезирует как постоянство, так и точность в реальном времени. Конфигурации профилей (такие как имена вкладок, пути к папкам и порядок вкладок) хранятся локально в JSON-файле настроек в вашей домашней директории, в то время как данные задач читаются напрямую из папок ваших проектов в реальном времени. - **Файл настроек**: `~/.shrimp-task-viewer-settings.json` Этот скрытый файл в вашей домашней директории хранит все конфигурации ваших профилей, включая имена вкладок, пути к папкам, порядок вкладок и другие предпочтения. Он автоматически создается при добавлении первого профиля и обновляется при внесении изменений. Вы можете вручную редактировать этот файл при необходимости, но будьте осторожны, чтобы сохранить корректное форматирование JSON. - **Файлы задач**: Читаются напрямую из указанных путей к папкам (без загрузки) В отличие от традиционных веб-приложений, которые загружают и хранят копии файлов, Task Viewer читает файлы `tasks.json` напрямую из указанных вами путей к папкам. Это гарантирует, что вы всегда видите текущее состояние ваших задач без необходимости повторной загрузки или синхронизации. При добавлении профиля вы просто сообщаете просмотрщику, где искать файл tasks.json. - **Горячая перезагрузка**: Изменения разработки автоматически пересобираются При работе в режиме разработки (`npm run dev`) любые изменения в исходном коде вызывают автоматические пересборки и обновления браузера. Это применяется к React-компонентам, стилям и серверному коду, делая разработку быстрее и эффективнее. ### История задач Git **Автоматический контроль версий**: Начиная с v3.0, Shrimp Task Manager автоматически отслеживает все изменения задач, используя Git. Это обеспечивает полный аудиторский след без какой-либо ручной конфигурации. - **Расположение репозитория**: `<shrimp-data-directory>/.git` Каждый проект получает свой собственный Git-репозиторий в директории данных, настроенной в вашем файле `.mcp.json`. Это полностью отдельно от основного Git-репозитория вашего проекта, предотвращая любые конфликты или вмешательство. - **Просмотр истории**: Используйте стандартные команды Git для исследования истории задач ```bash cd <shrimp-data-directory> git log --oneline # Просмотр истории коммитов git show <commit-hash> # Просмотр конкретных изменений git diff HEAD~5 # Сравнение с 5 коммитами назад ``` - **Формат коммитов**: Все коммиты включают временные метки и описательные сообщения ``` [2025-08-07T13:45:23-07:00] Add new task: Implement user authentication [2025-08-07T14:12:10-07:00] Update task: Fix login validation [2025-08-07T14:45:55-07:00] Bulk task operation: append mode, 6 tasks ``` - **Восстановление**: Восстанавливайте предыдущие состояния задач при необходимости ```bash cd <shrimp-data-directory> git checkout <commit-hash> -- tasks.json # Восстановить конкретную версию git reset --hard <commit-hash> # Полный сброс к предыдущему состоянию ``` ## 🏗️ Техническая архитектура ### Технологический стек - **Фронтенд**: React 19 + Vite для горячей перезагрузки в разработке - **Компонент таблицы**: TanStack React Table для продвинутых функций таблиц - **Стилизация**: Пользовательский CSS с тёмной темой и адаптивным дизайном - **Бекенд**: HTTP-сервер Node.js с RESTful API - **Система сборки**: Vite для быстрой разработки и оптимизированных производственных сборок ### Структура файлов **Организация проекта**: Task Viewer следует чистой, модульной структуре, которая разделяет обязанности и делает кодовую базу легкой для навигации и расширения. Каждая директория и файл имеют конкретную цель в архитектуре приложения. ``` task-viewer/ ├── src/ # Исходный код React-приложения │ ├── App.jsx # Главный React-компонент - управляет состоянием, профилями и вкладками │ ├── components/ # Переиспользуемые React-компоненты │ │ ├── TaskTable.jsx # TanStack таблица для отображения и сортировки задач │ │ ├── Help.jsx # Просмотрщик README с рендерингом markdown │ │ └── ReleaseNotes.jsx # История версий с подсветкой синтаксиса │ ├── data/ # Статические данные и конфигурация │ │ └── releases.js # Метаданные релизов и информация о версиях │ └── index.css # Полная система стилизации с тёмной темой ├── releases/ # Файлы markdown примечаний к релизам и изображения │ ├── v*.md # Индивидуальные файлы примечаний к релизам │ └── *.png # Скриншоты и изображения для релизов ├── dist/ # Вывод производственной сборки (автогенерируется) │ ├── index.html # Оптимизированная HTML точка входа │ └── assets/ # Пакетированные JS, CSS и другие ресурсы ├── server.js # Express-подобный Node.js API-сервер ├── cli.js # Интерфейс командной строки для управления сервисом ├── vite.config.js # Конфигурация инструмента сборки для разработки/производства ├── package.json # Метаданные проекта, зависимости и npm-скрипты ├── install-service.sh # Установщик сервиса Linux systemd └── README.md # Исчерпывающая документация (этот файл) ``` **Объяснение ключевых директорий**: - **`src/`**: Содержит весь исходный код React. Здесь вы будете вносить большинство изменений в интерфейс. - **`dist/`**: Автогенерируемая производственная сборка. Никогда не редактируйте эти файлы напрямую. - **`releases/`**: Хранит примечания к релизам в формате markdown со связанными изображениями. - **Корневые файлы**: Файлы конфигурации и сервера, которые обрабатывают сборку, обслуживание и развертывание. ### Эндпоинты API - `GET /` - Обслуживает React-приложение - `GET /api/agents` - Перечисляет все настроенные профили - `GET /api/tasks/{profileId}` - Возвращает задачи для конкретного профиля - `POST /api/add-profile` - Добавляет новый профиль с путём к папке - `DELETE /api/remove-profile/{profileId}` - Удаляет профиль - `PUT /api/rename-profile/{profileId}` - Переименовывает профиль - `PUT /api/update-profile/{profileId}` - Обновляет настройки профиля - `GET /api/readme` - Возвращает содержимое README для вкладки помощи - `GET /releases/*.md` - Обслуживает файлы markdown примечаний к релизам - `GET /releases/*.png` - Обслуживает изображения примечаний к релизам ## 🛠️ Разработка ### Настройка среды разработки ```bash # Установка зависимостей npm install # Запуск сервера разработки с горячей перезагрузкой npm run dev # Сервер разработки работает на http://localhost:3000 # API-сервер бекенда работает на http://localhost:9998 ``` ### Сборка для производства ```bash # Сборка оптимизированного производственного пакета npm run build # Файлы генерируются в директории dist/ # Запуск производственного сервера npm start ``` ### Расширение интерфейса Модульная React-архитектура делает расширение легким: 1. **Добавление новых компонентов**: Создавайте в `src/components/` 2. **Модификация стилизации**: Редактируйте `src/index.css` с пользовательскими CSS-свойствами 3. **Добавление функций**: Расширяйте `App.jsx` новым состоянием и функциональностью 4. **Интеграция API**: Добавляйте эндпоинты в `server.js` ## 🔒 Безопасность и производительность ### Функции безопасности - **Привязка к localhost**: Сервер доступен только с локальной машины - **Прямой доступ к файлам**: Читает файлы задач напрямую из путей файловой системы - **Нет внешних зависимостей**: Автономный с минимальной поверхностью атаки - **Защита CORS**: Эндпоинты API защищены заголовками CORS ### Оптимизации производительности - **Горячая замена модулей**: Мгновенные обновления разработки - **Разделение кода**: Оптимизированная загрузка пакетов - **Эффективный повторный рендеринг**: Паттерны оптимизации React - **Кэширование**: Кэширование статических ресурсов для более быстрой загрузки - **Адаптивные изображения**: Оптимизированы для всех размеров устройств ## 🐛 Устранение неполадок ### Общие проблемы **Сервер не запускается** ```bash # Проверьте, используется ли порт lsof -i :9998 # Завершите существующие процессы pkill -f "node.*server.js" # Попробуйте другой порт SHRIMP_VIEWER_PORT=8080 node server.js ``` **Вкладка помощи/readme показывает HTML** Если вкладка помощи отображает HTML вместо содержимого README, сервер нужно перезапустить для загрузки новых эндпоинтов API: ```bash # Остановите сервер (Ctrl+C) и перезапустите npm start ``` **Горячая перезагрузка не работает** ```bash # Убедитесь, что зависимости разработки установлены npm install # Перезапустите сервер разработки npm run dev ``` **Задачи не загружаются** 1. Проверьте, что файлы `tasks.json` содержат корректный JSON 2. Убедитесь, что права доступа к файлам позволяют чтение 3. Проверьте консоль браузера на сообщения об ошибках 4. Используйте кнопку ручного обновления для перезагрузки данных **Ошибки сборки** ```bash # Очистите node_modules и переустановите rm -rf node_modules package-lock.json npm install # Очистите кэш Vite rm -rf dist/ npm run build ``` ## 📋 Журнал изменений ### Версия 2.1.0 (Последняя) - 2025-07-29 #### 🚀 Основные функции - **Поддержка прямых путей к файлам**: Заменена загрузка файлов на прямой ввод пути к папке для живых обновлений - **Вкладка помощи/readme**: Добавлена вкладка документации с рендерингом markdown - **Вкладка примечаний к релизам**: Внутриприложенческий просмотрщик примечаний к релизам с поддержкой изображений - **Кликабельные зависимости**: Легкая навигация между зависимыми задачами - **Колонка ИИ действий**: Копирование ИИ-инструкций для завершения задач - **Улучшенное управление UUID**: Нажмите значки задач для копирования UUID - **Редактирование профилей**: Переименование профилей и настройка корней проектов - **Поддержка ES модулей**: Конвертирован в ES модули для лучшей совместимости #### 🐛 Критическое исправление - **Исправлена проблема копирования статических файлов**: Файлы теперь читаются напрямую из указанных путей вместо создания статических копий в `/tmp/` ### Версия 1.0.3 - 2025-07-26 #### 🧪 Тестирование и надёжность - **Комплексный набор тестов**: Добавлено полное тестовое покрытие с Vitest - **Тесты компонентов**: Тесты React Testing Library для всех компонентов - **Интеграционные тесты**: Сквозное тестирование сервера и эндпоинтов API - **Исправления ошибок**: Решены проблемы обработки многочастных данных форм в управлении профилями ### Версия 1.0.2 - 2025-07-26 #### 🎨 Просмотр деталей задач - **Навигация во вкладке**: Заменил модальное окно на бесшовные детали задач во вкладке - **Кнопка назад**: Легкая навигация обратно к списку задач - **Улучшенный UX**: Лучший рабочий процесс без прерываний всплывающими окнами ### Версия 1.0.1 - 2025-07-13 #### 🎨 Капитальный пересмотр интерфейса - **Современный интерфейс с вкладками**: Профессиональные вкладки в стиле браузера с перетаскиванием для переупорядочивания - **Связанный дизайн**: Бесшовное визуальное соединение между вкладками и контентом - **Улучшенная компоновка**: Поиск и элементы управления перепозиционированы для лучшего рабочего процесса #### ⚡ Расширенная функциональность - **Настраиваемое автообновление**: Выбирайте интервалы от 5 секунд до 5 минут - **Продвинутый поиск**: Фильтрация в реальном времени по всем полям задач - **Сортируемые колонки**: Нажмите заголовки для сортировки по любой колонке - **Горячая перезагрузка разработки**: Мгновенные обновления во время разработки #### 🔧 Технические улучшения - **React архитектура**: Полное переписывание с использованием React 19 + Vite - **TanStack Table**: Профессиональный компонент таблицы с пагинацией - **Адаптивный дизайн**: Подход mobile-first с оптимизацией точек останова - **Производительность**: Оптимизированный рендеринг и эффективное управление состоянием ### Версия 1.0.0 - 2025-07-01 #### 🚀 Первоначальный релиз - **Базовый просмотрщик**: Первоначальная реализация с базовым веб-интерфейсом - **Управление профилями**: Добавление и удаление профилей задач - **API сервера**: RESTful эндпоинты для данных задач - **Отображение задач**: Просмотр задач из нескольких проектов ## 📄 Лицензия Лицензия MIT - подробности см. в лицензии основного проекта. ## 🤝 Вклад Этот инструмент является частью проекта MCP Shrimp Task Manager. Вклады приветствуются! 1. Форкните репозиторий 2. Создайте ветку функции (`git checkout -b feature/amazing-feature`) 3. Внесите изменения с должным тестированием 4. Зафиксируйте изменения (`git commit -m 'Add amazing feature'`) 5. Отправьте в ветку (`git push origin feature/amazing-feature`) 6. Отправьте pull request ### Руководящие принципы разработки - Следуйте лучшим практикам React и паттернам хуков - Поддерживайте принципы адаптивного дизайна - Добавляйте подходящие типы TypeScript где применимо - Тестируйте в различных браузерах и устройствах - Обновляйте документацию для новых функций --- **Счастливого управления задачами! 🦐✨** Создано с ❤️ с использованием React, Vite и современных веб-технологий.