FRACTALS Project OS: портфель систем как трёхмерный город

FRACTALS Project OS показывает портфель систем компании как трёхмерный город. Каждый проект, объект на карте, а не строка в списке, поэтому масштаб, соседство и пустоты видно сразу.

Началось всё с честного признания: мы перестали помнить, что у нас есть. В монорепозитории Ingello лежат ERP, генератор кода, десятки клиентских систем, автоматизации, боты, эксперименты и папка tmp, которая, как и положено временному, живёт дольше всех. Список папок в терминале отвечал на вопрос «что тут лежит», но не на вопрос «что из этого живое, что большое и где у нас уже были платежи». Поэтому мы построили город.

Задача

Когда систем становится больше тридцати, обычный список перестаёт работать: никто не помнит, что уже сделано, где дубли, а какие направления заброшены. Руководителю нужен взгляд сверху, а не ещё одна таблица.

Нам хотелось трёх вещей. Чтобы картина собиралась сама из кода, без ручной анкеты, которую через месяц никто не обновит. Чтобы с первого взгляда было видно стадию, размер и наличие базы данных у каждого проекта. И чтобы это открывалось обычной ссылкой в браузере, без сервера, базы и учётных записей.

Как читать город

Мы долго спорили, что должно быть домом, и в итоге выбрали самое скучное и самое честное соответствие: город повторяет файловую структуру.

• Район это стадия проекта. Пять плиток стыкуются в одну карту: Concept, Prototype, MVP, MMP и Internal tools. Сейчас в них 21, 14, 11, 10 и 19 проектов. Цвет района переходит на дома, поэтому стадия читается даже без подписи.
• Дом это проект, то есть папка верхнего уровня репозитория.
• Этаж это подпапка проекта. Этажи чередуют оттенок, чтобы их можно было сосчитать глазом, а при наведении подсказка говорит, какая это папка и какой это этаж по счёту. Выше 16 этажей дом не растёт, иначе common и business закрывали бы полгорода.
• Тубус рядом с домом это база данных, а его кольца это таблицы, найденные в SQL и файлах миграций. Колец в тубусе не больше 16, полное число таблиц показывает панель проекта.
• Плашка над домом это логотип (favicon проекта или инициалы) и название. Плашки прячутся за домами, которые стоят перед ними, поэтому город не превращается в облако наклеек.

Важное уточнение, чтобы никто не обиделся: высота дома показывает число подпапок, а не ценность проекта. Самый высокий дом не обязательно самый важный, у него просто больше всего папок. Ровно как в жизни.

Что видно с первого взгляда

Первые десять секунд над городом дают больше, чем час со списком:

• Где центр тяжести. Плотные зелёные кварталы MVP и MMP с тубусами сразу показывают, где живут системы с базами и серверными конфигурациями, а где лежат идеи.
• Где пустыри. Район Concept это 21 низкий домик в один-два этажа. Часть из них стоит доделать, часть пора честно убрать.
• Где инфраструктура. Оранжевый район Internal tools отдельно показывает, сколько мы вложили в собственные автоматизации, и это отрезвляет.
• Где данные. Тубусы видны издалека. Проект без тубуса почти наверняка не хранит своих данных, проект с толстым тубусом стоит обходить аккуратно.

Выбор проекта и панель деталей

Город медленно вращается сам, чтобы на экране переговорной он выглядел живым. Как только вы берёте его мышью, автоповорот замирает и возвращается только через десять секунд без касаний. Колесо приближает, клик по дому подлетает к проекту и делает его центром вращения, клик по свободной земле района показывает весь район. Клик по плашке с названием открывает сайт проекта в новой вкладке, если адрес найден.

Панель проекта показывает район, число этажей и таблиц, описание из README, путь, стек (PHP, Node.js, Python, Docker Compose), первые подпапки, найденные базы и web-адрес. Тот же проект подсвечивается в списке слева, а дом в городе чуть расширяется и светится, чтобы его не потерять при вращении.

Поиск, районы и режимы камеры

Поиск ищет не только по названиям. В него попадают описание, стек, путь, имена подпапок, баз и таблиц. Поэтому на вопрос «где у нас уже были пациенты» город отвечает за секунду: набираем patient, и остаются семь домов, в базах которых есть такие таблицы. Для продажи и оценки нового проекта это прямой путь к коду, который можно переиспользовать.

Фильтр районов оставляет в городе одну стадию, например только MMP. Три кнопки камеры переключают общий вид, выбранный проект и вид на базы данных. А стадию любого проекта можно поменять вручную в списке слева: дом тут же переезжает в другой район, выбор хранится в вашем браузере и важнее автоматического.

Полёт на дроне

Признаемся сразу: практической необходимости летать над портфелем проектов нет. Но у нас был пульт RadioMaster GX12 и вопрос «а что, если». Кнопка «Взлететь над городом» включает режим полёта с камерой, жёстко закреплённой за дроном, и честной FPV-физикой: стики задают угловую скорость, а не угол, поэтому при бочке горизонт переворачивается вместе с камерой.

Физика вынесена в отдельное ядро и проверяется тестами отдельно от графики. Там четыре мотора по схеме Quad-X, холостые обороты 5,5%, инерция раскрутки, тяга растёт квадратично от выхода мотора, есть гравитация, сопротивление воздуха и столкновения с землёй, потолком, границами и домами. Зависание примерно на половине тяги. Моторы не запустятся, если газ выше 8%: маленькая порция здравого смысла между пилотом и внезапными 100% тяги. На экране скорость, высота, курс, тяга и выходы моторов M1…M4.

Пульт подключается двумя путями. Локально работает USB-мост, который читает устройство напрямую и отдаёт оси странице на адресе 127.0.0.1. На публичном HTTPS браузер такие запросы блокирует (и правильно делает), поэтому там остаются клавиатура и Gamepad API.

Как это устроено

• Данные. Команда инвентаризации npm run inventory обходит кодовую базу и собирает статический снимок данных. В коде нет ручного списка проектов: сканер сам находит папки верхнего уровня, их подпапки, package.json, composer.json, файлы Docker Compose, базы по образам контейнеров, таблицы по SQL и миграциям, favicon и web-адрес по homepage, переменным окружения, canonical и конфигам nginx, Caddy и Traefik.
• Стадия. Определяется простыми правилами, которые видно в коде: есть серверный compose, значит MMP; есть compose или база, значит MVP; есть манифест пакета или хотя бы три подпапки, значит Prototype; остальное Concept. Автоматизации, мониторы и системные папки уходят в Internal tools.
• Сцена. Трёхмерная сцена на Three.js раздаётся обычным веб-сервером без базы данных и бэкенда. Весь снимок это один JSON на 160 КБ, а по сети с сжатием около 14 КБ, меньше одной картинки этой статьи.
• Сборка. Сборка в статические файлы, которую можно опубликовать на любом хостинге. У нас её раздаёт общий nginx, отдельный контейнер больше не нужен.
• Производительность. По умолчанию включён профиль ЭКО: 30 кадров в секунду, без сглаживания и с ограниченной плотностью пикселей. Его подбирали под встроенную графику ноутбука, на которой вентилятор раньше взлетал быстрее дрона. Переключатель «Графика» предлагает 45 и 60 кадров, выбор запоминается.
• Проверки. Тесты гоняют физику (взлёт, движение после наклона, рыскание, бочку больше 360°), профили графики и интерфейс на ширине компьютера и телефона. Все действия управления пишутся в журнал с префиксом, поэтому на вопрос «почему дрон не взлетел» есть ответ из логов, а не из гаданий.

Кому и зачем

Техническим директорам и владельцам продуктовых портфелей, для ревизии и презентации; аудиторам, для быстрой картины ландшафта; командам, чтобы новый человек за десять минут понял, из чего состоит компания.

• Ревизия портфеля. Раз в квартал можно пролететь над районом Concept и решить, что доделать, а что закрыть. Низкие домики без тубусов говорят сами за себя.
• Оценка нового заказа. Клиент просит систему с записью пациентов или платежами: поиск по таблицам показывает, где такой код у нас уже есть, и оценка становится честнее.
• Аудит перед изменениями. Перед переездом сервера или обновлением версий видно, у каких проектов есть базы и серверные конфигурации, то есть кого нельзя забыть.
• Знакомство нового человека. Вместо экскурсии по папкам открываем ссылку: вот районы, вот главные дома, вот где лежат данные.
• Презентация. Город на большом экране объясняет масштаб компании лучше слайда «у нас много проектов».

Чем это лучше таблиц и дашбордов

Таблица хороша, когда вы уже знаете, что ищете. Дашборд хорош, когда метрики придуманы заранее. Город хорош, когда вопрос ещё не сформулирован: глаз сам находит самый плотный квартал, одинокий высокий дом, пустую плитку района или проект с подозрительно толстым тубусом. Соседство и пропорции считываются за секунды, а детали лежат на расстоянии клика. И ещё одно: картину никто не заполняет руками, она собирается из кода, поэтому не врёт из-за лени.

Таблицы мы при этом не отменяем. Список слева со стадиями никуда не делся, и это тоже осознанно: город для обзора, список для точной работы.

На телефоне

На узкой ширине город встаёт сверху, а панель управления уходит под него. Вращение и зум работают пальцами, горизонтальной прокрутки нет. Но будем честны: панель проекта на телефоне закрывает добрую половину города, так что это скорее режим «показать на ходу», чем рабочее место.

Чем мы честно ограничены

• Снимок, а не прямой эфир. Город показывает состояние репозитория на момент последней инвентаризации (сейчас это июль 2026). Чтобы увидеть новое, нужно запустить команду и пересобрать статику.
• Эвристики ошибаются. Сканер считает проектом всё, что лежит в корне, включая tmp и bin. Проекты, сгенерированные Fractal, показывают сразу MySQL, PostgreSQL и MongoDB с одинаковым списком таблиц, потому что в шаблоне compose есть все три образа. Иногда вместо настоящего адреса находится заглушка из шаблона или локальный адрес. Мы это видим и не прячем.
• Высота это папки, а не код. Строк кода, коммитов, активности и денег в городе нет. Это следующий слой, если он понадобится.
• Ручные статусы живут в одном браузере. Общего хранилища нет, коллега увидит автоматические стадии.
• Интерфейс только на русском, а пульт на публичном адресе работает через Gamepad API, а не через USB-мост.

Хотите так же увидеть свой портфель систем, репозиторий или ИТ-ландшафт? Начнём с бесплатной консультации с архитектором: разберём, из чего состоит ваша компания, и посчитаем цену после разговора. Подробнее о подходе на systems.ingello.com. Похожая идея в двух измерениях, для базы знаний и пересекающихся предметных областей, описана в кейсе «Карта предметных областей».

Где посмотреть