Skip to content

Latest commit

 

History

History
238 lines (166 loc) · 14.1 KB

File metadata and controls

238 lines (166 loc) · 14.1 KB
996 — Ваши AI-коллеги работают сверхурочно

«Каждая строчка кода, которую вы пишете — они работают сверхурочно.»

Расширение для VS Code / Cursor — пиксельный китайский офис, где ваши AI-агенты превращаются в ходячих, ворчащих и отлынивающих коллег.


Version License VS Code Cursor

中文 · English · 日本語 · Français · العربية · Русский


Что это?

Каждый раз, когда вы запускаете Claude Code в терминале, в офисе «устраивается на работу» новый коллега. Он автоматически садится за рабочее место и в реальном времени проигрывает анимации, соответствующие действиям агента (чтение файлов, написание кода, выполнение команд...), а иногда выдаёт едкий комментарий.

Не обои, не игрушка — это панель визуализации вашего AI-процесса.



Панорамный вид · Все кабинки заняты, сверхурочная работа

Клик по персонажу · Карточка рабочего места

Открытое пространство · Плотная планировка

Зона отдыха · Уголок для отлынивания

Шестеро коллег

У каждого коллеги — своя личность, фирменные реплики и стиль работы.
Больше 6 агентов? Система автоматически сменит скин и сдвинет оттенок — никаких совпадений.

Персонаж Должность Характер Коронная фраза
比比拉布 (Бибилабу) Фронтенд-разработчик · 3 г. Наивный · Простак «Опять я один пашу...»
八嘎呀路 (Багаялу) Бэкенд-архитектор · 5 л. Вспыльчивый · Прямой «Кто это написал?!!»
我的刀盾 (Водэдаодунь) DevOps-инженер · 4 г. Дзен · Лежачий «Без разницы, и так сойдёт»
巴巴博一 (Бабабои) UI-дизайнер · 2 г. Мягкий · Трудоголик «Я сделаю лучше всех»
歪比巴卜 (Вайбибабу) Техлид · 35 л. Хардкор · Гуру «Молодёжь, давай, научу»
咕咕嘎嘎 (Гугугага) Тестировщик · 3 г. Язвительный · Придира «Твой код — я и ногой найду баг»

Основные возможности

Визуализация агентов в реальном времени

  • Каждый терминал Claude Code = один персонаж в офисе, привязка 1:1
  • Парсинг JSONL-файла сессии в реальном времени, анимация персонажа следует за действиями агента
    • Write / Edit / Bash → анимация набора текста
    • Read / Grep / Glob → анимация чтения
    • Бездействие → прогулка / отлынивание / задумчивость
  • Подзадачи (суб-агенты) автоматически создают дочерних персонажей рядом с основным
  • Спецэффект цифрового дождя в стиле Matrix: анимация при приёме на работу / увольнении

Цикл дня и ночи

Освещение в офисе меняется вместе с системным временем — 6 периодов с плавными переходами:

Период Время Атмосфера
Рассвет 06 – 08 Тёплый оранжевый свет
День 08 – 17 Обычное освещение
Закат 17 – 19 Вечерние лучи
Сумерки 19 – 21 Свет угасает
Ночь 21 – 06 Режим сверхурочной работы

Облачко статуса над головой

  • 100+ рабочих статусов: чтение исходников, быстрая итерация, согласование целей, уточнение гранулярности...
  • Корпоративный жаргон: замкнутый цикл, расширение возможностей бизнеса, повышение осознанности...
  • Персональные реплики: 30% шанс появления фирменной фразы персонажа

Управление камерой

Три предустановленных ракурса, переключение одним кликом:

Режим Описание
Панорама Вид сверху на весь офис
Слежение Камера следит за выбранным персонажем
Крупный план 8x увеличение, каждый пиксель как на ладони

Редактор офиса

Свободно проектируйте планировку вашего офиса:

  • 7 типов напольного покрытия + автоматическая стыковка стен (auto-tile)
  • 40+ видов мебели: кабинки, кулер, раскладушка, красные фонари, корпоративные лозунги, пакеты доставки, чай с молоком...
  • Поддержка вращения (R) / переключения состояния (T) / HSB-окраски / размещения на поверхностях
  • Перетаскивание, Ctrl+Z отмена (50 уровней), автоматическое расширение сетки (макс. 64x64)
  • Импорт / экспорт JSON-планировки, автосинхронизация между окнами

Генерация планировки из изображения

Сфотографируйте план офиса → выберите изображение → автоматический вызов Claude → готовый JSON-файл планировки.

Интеграция с Hook

Через Claude Code Hook — прямой приём событий, быстрее и точнее, чем опрос JSONL:

  • Конец хода → персонаж сразу переходит в режим ожидания
  • Запрос разрешения → янтарное облачко-уведомление над головой
  • Поддержка звуковых уведомлений (восходящее двухнотное напоминание, можно отключить)

Быстрый старт

Системные требования

  • Редактор: VS Code >= 1.105 или Cursor
  • AI: Claude Code CLI установлен

Сборка из исходников

git clone https://github.com/noya21th/996.git
cd 996

# Установка зависимостей
npm install
cd webview-ui && npm install && cd ..
cd server && npm install && cd ..

# Сборка
npm run build

# Упаковка VSIX
npx vsce package --no-dependencies

Установка

# VS Code
code --install-extension 996-0.2.0.vsix --force

# Cursor (macOS)
/Applications/Cursor.app/Contents/Resources/app/bin/code \
  --install-extension 996-0.2.0.vsix --force

Использование

  1. Палитра команд → 996: Показать панель
  2. Нажмите + Агент → выберите режим запуска
  3. Одновременно появятся терминал Claude Code и пиксельный персонаж
  4. Дайте Claude задание и наблюдайте, как ваши коллеги берутся за работу

Техническая архитектура

┌──────────────────────────────────────────────────┐
  VS Code Extension Host                          
  ┌──────────┐  ┌──────────┐  ┌───────────────┐  
   Terminal      JSONL        Hook HTTP     
   Manager   │→│  Watcher  │←│    Server        
  └──────────┘  └────┬─────┘  └───────┬───────┘  
                      postMessage                
              ┌──────▼────────────────▼────────┐  
                   React Webview (Canvas 2D)     
                ┌────────┐ ┌────────┐ ┌─────┐   
                 Office   Editor   UI     
                 Engine   System          
                └────────┘ └────────┘ └─────┘   
              └────────────────────────────────┘  
└──────────────────────────────────────────────────┘
Модуль Технологии
Бэкенд расширения TypeScript · VS Code Extension API · esbuild
Фронтенд визуализации React 19 · TypeScript · Vite · Canvas 2D
Hook-сервис Node.js HTTP · Автообнаружение (~/.pixel-agents/server.json)
Конвейер ассетов Собственная 7-этапная цепочка (кадрирование → детекция → метаданные → экспорт)
Тестирование Vitest · Playwright E2E · Node Test Runner

Структура проекта

src/                 Бэкенд расширения (управление терминалами, мониторинг файлов, диспетчеризация сообщений)
webview-ui/          React-фронтенд (Canvas-рендеринг, движок персонажей, редактор)
  public/assets/       Пиксельные ассеты (персонажи, мебель, полы, стены)
server/              Сервис приёма Hook-событий
scripts/             Конвейер извлечения ассетов (7 этапов)
PIC-JSON/            Инструмент конвертации плана этажа  JSON-планировка
docs/                Документация и материалы

Благодарности

Проект основан на pixel-agents. На базе оригинала была заново разработана тема китайского офиса, добавлены система личностей персонажей, цикл дня и ночи, навигация NPC, облачка статусов, конвертация планов в планировки и другие функции. Спасибо автору оригинала Pablo De Lucca за отличную работу.


Лицензия

MIT


«996.ICU — работаешь по системе 996, попадаешь в реанимацию.»

Но в этом офисе никто не заболеет. Потому что они — пиксели.