diff --git a/docs/ui-prototypes/tgu-ops/design_handoff_constellation_dashboard/INTEGRATION.md b/docs/ui-prototypes/tgu-ops/design_handoff_constellation_dashboard/INTEGRATION.md
new file mode 100644
index 0000000..dbd43cf
--- /dev/null
+++ b/docs/ui-prototypes/tgu-ops/design_handoff_constellation_dashboard/INTEGRATION.md
@@ -0,0 +1,179 @@
+# INTEGRATION — встраивание вкладки «Состояние группировки»
+
+Цель: добавить дашборд новой вкладкой в существующий шелл (рядом с
+`Планы / Карта / Комплексный план / Редактор / Заявки`), переключив встроенную
+симуляцию на реальные данные.
+
+---
+
+## 1. Зависимости
+
+```bash
+npm i d3-geo topojson-client
+# react / react-dom — уже есть в проекте
+```
+
+Версии, на которых собран прототип: `d3-geo@3`, `topojson-client@3`, `react@18`.
+
+---
+
+## 2. Положить модуль
+
+Скопируйте папку `src/` в проект, например в `src/features/constellation/`.
+Все импорты внутри — относительные, так что путь произвольный.
+
+`dashboard.css` импортируется автоматически из `ConstellationDashboard.jsx`
+(`import "./dashboard.css"`). Если используете CSS-модули/Tailwind — см. п.6.
+
+---
+
+## 3. Карта мира (TopoJSON)
+
+`MapView.jsx` сейчас тянет карту с CDN:
+
+```js
+fetch("https://unpkg.com/world-atlas@2.0.2/land-110m.json")
+```
+
+Для прода **положите файл локально** и раздавайте со своего origin:
+
+```js
+// import landUrl from "../assets/land-110m.json?url"; // Vite
+fetch(landUrl).then(r => r.json()).then(/* ... */)
+```
+
+Либо, если у вас уже есть карта (Leaflet/MapLibre/OpenLayers), рассмотрите
+вариант рендерить слои группировки поверх неё — см. п.7.
+
+---
+
+## 4. Монтирование как вкладки
+
+`src/index.js` отдаёт `default` = компонент `ConstellationDashboard` (без пропсов —
+сейчас он сам строит данные из `data.js`/`sim.js`).
+
+Пример с массивом табов (адаптируйте под ваш роутер):
+
+```jsx
+import ConstellationDashboard from "@/features/constellation";
+
+const TABS = [
+ { id: "plans", label: "Планы", element: …
` и добавьте префикс к селекторам
+ (или прогоните через CSS-модули / `@scope`), **или**
+- оставьте как есть, если имена классов не пересекаются с вашими.
+Переменные в `:root` безобидны (с префиксом `--bg0` и т.п.), но при желании
+перенесите их на `.cdash`.
+
+---
+
+## 7. (Опционально) рендер на вашей карте
+Если в приложении уже есть карта (на скриншотах — тёмная equirectangular):
+- слои **заявок (ROI)**, **станций**, **треков**, **полос обзора**, **линий сброса**
+ можно отрисовать вашими средствами (GeoJSON-слой / canvas-overlay), переиспользуя
+ геометрию из `sim.js` (`subSat`, footprint = окружность радиусом ~7–9° вокруг точки).
+- тогда `MapView.jsx` нужен лишь как референс по слоям/цветам/порядку отрисовки.
+- остальные части (`Header`, `SidePanel`, `Timeline`, RAF-часы/память) переиспользуются как есть.
+
+---
+
+## 8. Проверка после встраивания
+- [ ] Вкладка открывается, карта рисует сушу/сетку, КА движутся при Play.
+- [ ] Скорости ×1…×600 меняют ход времени; «Сейчас» включает LIVE.
+- [ ] Скраб по таймлайну двигает плейхед и пересчитывает статусы/карту.
+- [ ] Клик по КА (список/карта/таймлайн) ставит фокус и затемняет остальных.
+- [ ] Полосы памяти меняются на съёмке/сбросе.
+- [ ] Высота/скролл вкладки корректны (см. п.4 «про высоту»).
diff --git a/docs/ui-prototypes/tgu-ops/design_handoff_constellation_dashboard/README.md b/docs/ui-prototypes/tgu-ops/design_handoff_constellation_dashboard/README.md
new file mode 100644
index 0000000..6f8e9c1
--- /dev/null
+++ b/docs/ui-prototypes/tgu-ops/design_handoff_constellation_dashboard/README.md
@@ -0,0 +1,156 @@
+# Handoff: Дашборд состояния группировки (Mission Ops «Состояние группировки»)
+
+## Overview
+Полноэкранная информационная панель (operations wall) для мониторинга орбитальной
+группировки КА в реальном времени. Показывает на карте мира движущиеся аппараты,
+их маршруты съёмки, сбросы данных на наземные станции, интервалы запрета работы и
+тень Земли. Снизу — таймлайн событий по каждому КА. Воспроизведение управляется
+кнопкой Play со скоростями ×1/×10/×60/×600, есть скраб по времени и кнопка «Сейчас».
+
+Назначение: дежурная смена видит «что сейчас делает группировка» одним взглядом —
+кто снимает, кто сбрасывает, кто в запрете/в тени, загрузку памяти бортов и
+ближайшие события.
+
+## About the Design Files
+Файлы в этом пакете — **дизайн-референс, реализованный на HTML/React-прототипе**.
+Это эталон внешнего вида и поведения, **не обязательно финальный продакшн-код**.
+Задача — **воссоздать этот интерфейс в вашем кодовом окружении** (судя по скриншотам —
+React + Vite, карта в стиле тёмной equirectangular-проекции), используя ваши паттерны,
+ваш роутинг табов и, по возможности, **вашу существующую карту и ваши данные из API**
+вместо встроенной симуляции.
+
+Два слоя в пакете:
+- `reference/` — рабочий автономный прототип (открывается в браузере, грузит React/d3 с CDN).
+ Нужен только чтобы «пощупать» поведение и свериться по пикселям.
+- `src/` — те же экраны, переписанные в **чистые ESM-модули** (`import/export`, без CDN
+ и без `window.*`). Это то, что встраивается в приложение. См. `INTEGRATION.md`.
+
+## Fidelity
+**High-fidelity.** Цвета, типографика, отступы, состояния и анимации — финальные.
+Воссоздавайте 1:1, подменяя только источник данных (см. ниже) и, при желании,
+рендер карты на вашу картографическую библиотеку.
+
+## Screens / Views
+Один экран, 4 функциональные зоны в CSS-grid/flex.
+
+### 1. Topbar (шапка) — `Header`
+- **Layout:** горизонтальный флекс, высота `54px`, нижняя граница `1px var(--line)`,
+ фон `linear-gradient(var(--bg1),var(--bg0))`. Три блока: бренд (слева, `min-width:248px`),
+ транспорт (центр, `flex:1`, по центру), часы (справа, `min-width:248px`, выровнено вправо).
+- **Бренд:** кружок-маркер `20px` с бирюзовым свечением + «СОСТОЯНИЕ ГРУППИРОВКИ»
+ (600, 13px, `nowrap`) и «MISSION OPS · ТГУ» (mono, 9px, `--dim`, letter-spacing .12em).
+- **Транспорт:** кнопки `−1ч`, Play/Pause (бирюзовая, 42px), `+1ч`; разделитель;
+ сегмент скоростей `×1 ×10 ×60 ×600` (активная — бирюзовый фон); кнопка `СЕЙЧАС`
+ (в live-режиме — зелёная).
+- **Часы:** бейдж `LIVE`/`СИМ` (LIVE — зелёная пульсирующая точка), крупное mono-время
+ `HH:MM:SS` (22px) + `UTC`, ниже `ДЕНЬ · ДД.ММ.ГГГГ` (mono, 10px).
+
+### 2. Left panel (левая панель) — `SidePanel`
+Ширина `328px`, фон `--bg1`, правая граница, вертикальный флекс, скролл внутри.
+- **СВОДКА ГРУППИРОВКИ:** 4 плитки (grid 4×1): СНИМАЮТ / СБРОС / ЗАПРЕТ / В ТЕНИ —
+ число (mono, 21px, цвет статуса) + подпись (8px, `--dim`). Под ними строка
+ «● ОПТИКА n ● ЛОКАЦИЯ n · N КА».
+- **Поиск:** input (mono, 11.5px) — фильтрует список по name / NORAD / группе.
+- **КОСМИЧЕСКИЕ АППАРАТЫ:** список, сгруппированный `ОПТИКА`→группы, `ЛОКАЦИЯ`→группы.
+ Каждая строка КА: цветная риска слева (cyan=оптика / violet=локация), имя (500, 12.5px),
+ статус справа (mono, 9px, цвет статуса, иконка ☾ если в тени), снизу `NORAD XXXXX`,
+ полоса памяти (4px) и `NN%`. Цвет памяти: бирюза → амбер >78% → красный >92%.
+ Клик по строке = фокус КА (подсветка только его событий).
+- **АКТИВНЫЕ СОБЫТИЯ:** лента текущих событий (СЪЁМКА/СБРОС/ЗАПРЕТ) с целью/станцией
+ и обратным отсчётом «ещё M:SS». Клик = фокус соответствующего КА.
+
+### 3. Map (карта) — `MapView`
+Занимает всё центральное пространство (`flex:1`). Canvas 2D, equirectangular-проекция
+(d3-geo), повёрнута на `rotate([-10,0])`. Слои:
+- База (кэш offscreen): океан `#0a0e0f`, сетка градусов (шаг 30°), суша `#171c1e`
+ (контур `#252d30`), прямоугольники заявок (ROI) пунктиром амбер, подписи станций (mono 9px).
+- Тень Земли: ночное полушарие (d3.geoCircle от антисолнечной точки, r=90°) заливкой
+ `rgba(20,28,46,0.55)` с кромкой-терминатором.
+- По каждому КА: синусоидальный трек (±52 мин, цвет по типу полезной нагрузки),
+ «полоса обзора» (footprint, geoCircle), глиф-ромб с гало и кольцом-статусом, подпись.
+- Съёмка: амбер-утолщение трека + подсветка полигона заявки.
+- Сброс: анимированная пунктирная синяя линия КА→станция + свечение станции.
+- Станции: белые треугольники.
+- Оверлеи (абсолютно): подсказка/карточка фокуса (сверху-слева), легенда (снизу-слева),
+ координаты курсора (снизу-справа, mono), тултип имени КА при наведении.
+
+### 4. Timeline (таймлайн) — `Timeline`
+Высота `248px`, фон `--bg1`, верхняя граница. Шапка: «ТАЙМЛАЙН СОБЫТИЙ» + легенда
+(СЪЁМКА/СБРОС/ЗАПРЕТ РАБОТЫ(штриховка)/ТЕНЬ ЗЕМЛИ) + статус режима. Тело — SVG:
+- Левая колонка (`188px`): группы и имена КА с цветной точкой.
+- Ось времени сверху (часовые тики, на полночь — дата).
+- Дорожка каждого КА: полосы событий — тень (низ, слейт), сброс (синий), съёмка (амбер),
+ запрет (красная штриховка, во всю высоту).
+- Вертикальный плейхед (бирюза в live, амбер в симуляции) + пунктирная линия «СЕЙЧАС»
+ (реальное время). Зажатие+перетаскивание = скраб времени. Клик по строке = фокус КА.
+
+## Interactions & Behavior
+- **Play/Pause:** запуск/останов модельного времени.
+- **Скорость ×1/×10/×60/×600:** множитель к ходу модельного времени (×1 = реальное).
+- **СЕЙЧАС:** включает live-режим (время = системные часы, ×1, бейдж LIVE, зелёная пульсация).
+- **−1ч / +1ч:** сдвиг модельного времени на час (выходит из live).
+- **Скраб по таймлайну:** установка времени перетаскиванием (выходит из live).
+- **Фокус КА:** клик в списке / на карте / в таймлайне / в ленте — подсвечивает один КА,
+ затемняет остальные; повторный клик снимает фокус.
+- **Наведение на карту:** тултип имени ближайшего КА + координаты курсора (lat/lon).
+- **Анимации:** бегущие пунктиры линий сброса, пульсация live-точки (1.4s), плавные
+ переходы полос памяти. Без бесконечных декоративных лупов на контенте.
+
+## State Management
+Всё состояние — в корневом компоненте (`ConstellationDashboard.jsx`):
+- `simRef` (модельное время, ms) — в `ref`, чтобы canvas рисовался на 60fps без ре-рендеров.
+- `playingRef`, `speedRef`, `liveRef` — режим воспроизведения.
+- `focusId` (state + ref) — выбранный КА.
+- `memRef` — карта «загрузка памяти %» по КА (растёт при съёмке, падает при сбросе).
+- `query` — строка поиска. `cursor`, `hover` — UI карты.
+- RAF-цикл двигает время и память, рисует карту императивно (`mapApi.draw`), а панели/таймлайн
+ ре-рендерит троттлингом (~12 fps) через `setTick`. Производные (статусы, счётчики,
+ активные события) вычисляются в `render` из `simRef` + `memRef`.
+
+> Контракты данных и точки замены симуляции на реальное API — в `INTEGRATION.md`.
+
+## Design Tokens
+Из `src/dashboard.css` (`:root`):
+- **Фоны:** `--bg0 #0a0c0b` (канвас), `--bg1 #0e1211` (панели), `--panel #111514`,
+ `--ins #0a0e0d` (вставки/карта).
+- **Линии:** `--line rgba(255,255,255,.06)`, `--line2 rgba(255,255,255,.11)`.
+- **Текст:** `--hi #e7ece9`, `--mid #95a19d`, `--dim #5b6662`, `--faint #3c4644`.
+- **Акценты:** `--teal #5fb3a3` (управление/активное), `--amber #d99a4e` (съёмка/заявки),
+ `--blue #5b9bd5` (сброс), `--red #d9685f` (запрет), `--green #5cae7e` (operational),
+ `--violet #a78bdb` (локация/РСА).
+- **Тип нагрузки:** ОПТИКА `#56c2c8` (cyan), ЛОКАЦИЯ `#a78bdb` (violet) — `COL` в `data.js`.
+- **Карта:** океан `#0a0e0f`, суша `#171c1e`/контур `#252d30`, ночь `rgba(20,28,46,.55)`.
+- **Типографика:** IBM Plex Sans (UI), IBM Plex Mono (числа/координаты/ID/метки).
+ Заголовки секций — капс, letter-spacing .14–.16em.
+- **Скругления:** 5–8px. **Высоты:** topbar 54, timeline 248, строка таймлайна 22.
+
+## Assets
+- Карта мира: TopoJSON `world-atlas@2` → `land-110m.json` (грузится в `MapView`).
+ В проде положите файл локально или используйте свою карту (см. `INTEGRATION.md`).
+- Иконок-картинок нет: станции/КА рисуются на canvas, бренд-маркер — CSS.
+- Шрифты: IBM Plex Sans/Mono (Google Fonts; `@import` в `dashboard.css` можно убрать,
+ если шрифты уже есть в приложении).
+
+## Files
+```
+design_handoff_constellation_dashboard/
+├── README.md ← этот файл (дизайн-референс)
+├── INTEGRATION.md ← как встроить вкладку + контракты данных
+├── reference/ ← автономный прототип «как должно выглядеть»
+│ ├── preview.html ← открыть в браузере
+│ ├── styles.css
+│ └── js/ (data, sim, map, timeline, panels, app — версия с CDN/window.*)
+└── src/ ← ESM-модули для встраивания
+ ├── index.js ← точка входа (default = ConstellationDashboard)
+ ├── ConstellationDashboard.jsx← корневой компонент вкладки
+ ├── MapView.jsx ← canvas-карта
+ ├── Timeline.jsx ← таймлайн событий
+ ├── Panels.jsx ← Header + SidePanel
+ ├── sim.js ← геометрия/расписание (заменяемо на API)
+ ├── data.js ← модель группировки (заменяемо на API)
+ ├── util.js ← хелперы
+ └── dashboard.css ← все стили
+```
+
+См. **`INTEGRATION.md`** — пошагово: зависимости, монтирование как вкладки,
+контракты данных и где подключить реальные эфемериды/расписание.
diff --git a/docs/ui-prototypes/tgu-ops/design_handoff_constellation_dashboard/reference/js/app.jsx b/docs/ui-prototypes/tgu-ops/design_handoff_constellation_dashboard/reference/js/app.jsx
new file mode 100644
index 0000000..8d3c4a9
--- /dev/null
+++ b/docs/ui-prototypes/tgu-ops/design_handoff_constellation_dashboard/reference/js/app.jsx
@@ -0,0 +1,203 @@
+/* ============================================================
+ app.jsx — wiring, RAF clock, memory sim, derived state
+ ============================================================ */
+const { useState, useEffect, useRef, useMemo } = React;
+
+function buildEnv() {
+ const epochMs = Date.now();
+ const { sats, stations, rois } = window.OPS;
+ const prohibits = SIM.buildProhibits(sats, epochMs);
+ const env = { epochMs, sats, stations, rois, prohibits };
+ const domain = { start: epochMs - 6 * 3600e3, end: epochMs + 18 * 3600e3 };
+ const sched = SIM.buildSchedule(sats, env, domain.start, domain.end, 1);
+ return { env, domain, sched };
+}
+
+function findInterval(list, t) {
+ if (!list) return null;
+ for (const iv of list) if (t >= iv.start && t < iv.end) return iv;
+ return null;
+}
+
+function App() {
+ const cfg = useMemo(buildEnv, []);
+ const { env, domain, sched } = cfg;
+
+ const apiRef = useRef({});
+ const simRef = useRef(env.epochMs);
+ const playingRef = useRef(true);
+ const speedRef = useRef(10);
+ const liveRef = useRef(false);
+ const focusRef = useRef(null);
+ const hoverRef = useRef(null);
+ const memRef = useRef(Object.fromEntries(env.sats.map((s) => [s.id, s.mem0])));
+ const lastT = useRef(performance.now());
+
+ const [, setTick] = useState(0);
+ const [playing, setPlaying] = useState(true);
+ const [speed, setSpeed] = useState(10);
+ const [live, setLive] = useState(false);
+ const [focusId, setFocusId] = useState(null);
+ const [query, setQuery] = useState("");
+ const [cursor, setCursor] = useState(null);
+ const [hover, setHover] = useState(null);
+
+ function setFocus(id) { focusRef.current = id; setFocusId(id); }
+
+ // map api callbacks
+ useEffect(() => {
+ const a = apiRef.current;
+ a.simTime = () => simRef.current;
+ a.onCursor = (ll) => setCursor(ll);
+ a.onPick = (id, x, y) => { hoverRef.current = id; setHover(id ? { id, x, y } : null); };
+ a.onClickPick = () => { if (hoverRef.current) setFocus(focusRef.current === hoverRef.current ? null : hoverRef.current); };
+ a.onReady = () => a.draw && a.draw(simRef.current, { focusId: focusRef.current });
+ }, []);
+
+ // RAF loop
+ useEffect(() => {
+ let raf;
+ let acc = 0;
+ const loop = (now) => {
+ const dt = Math.min(100, now - lastT.current);
+ lastT.current = now;
+ if (playingRef.current) {
+ if (liveRef.current) simRef.current = Date.now();
+ else simRef.current += dt * speedRef.current;
+ if (simRef.current > domain.end) simRef.current = domain.end;
+ if (simRef.current < domain.start) simRef.current = domain.start;
+ // memory dynamics
+ const secEq = (dt * speedRef.current) / 1000;
+ for (const s of env.sats) {
+ const stt = SIM.statusAt(s, simRef.current, env);
+ let m = memRef.current[s.id];
+ if (stt.state === "capture") m += 0.7 * secEq;
+ else if (stt.state === "downlink") m -= 1.5 * secEq;
+ else m += 0.02 * secEq; // idle housekeeping drift
+ memRef.current[s.id] = Math.max(0, Math.min(100, m));
+ }
+ }
+ if (apiRef.current.draw) apiRef.current.draw(simRef.current, { focusId: focusRef.current });
+ acc += dt;
+ if (acc >= 80) { acc = 0; setTick((t) => (t + 1) % 1e6); }
+ raf = requestAnimationFrame(loop);
+ };
+ raf = requestAnimationFrame(loop);
+ return () => cancelAnimationFrame(raf);
+ }, []);
+
+ // ---- controls ----
+ function onPlay() { const p = !playingRef.current; playingRef.current = p; setPlaying(p); if (!p) { liveRef.current = false; setLive(false); } }
+ function onSpeed(s) { speedRef.current = s; setSpeed(s); if (s !== 1) { liveRef.current = false; setLive(false); } }
+ function onNow() { liveRef.current = true; playingRef.current = true; speedRef.current = 1; simRef.current = Date.now(); setLive(true); setPlaying(true); setSpeed(1); }
+ function onStep(d) { liveRef.current = false; setLive(false); simRef.current = Math.max(domain.start, Math.min(domain.end, simRef.current + d)); }
+ function onScrub(t) { liveRef.current = false; setLive(false); simRef.current = Math.max(domain.start, Math.min(domain.end, t)); }
+
+ // ---- derived (per render) ----
+ const tNow = simRef.current;
+ const statuses = {};
+ const counts = { capture: 0, downlink: 0, prohibit: 0, eclipse: 0, optic: 0, radar: 0, total: env.sats.length };
+ for (const s of env.sats) {
+ const st = SIM.statusAt(s, tNow, env);
+ statuses[s.id] = st;
+ if (counts[st.state] !== undefined) counts[st.state]++;
+ if (st.eclipse) counts.eclipse++;
+ if (s.payload === "optic") counts.optic++; else counts.radar++;
+ }
+ const events = [];
+ for (const s of env.sats) {
+ const st = statuses[s.id];
+ let iv = null, type = null, target = null, color = null;
+ if (st.state === "capture") { iv = findInterval(sched[s.id].capture, tNow); type = "СЪЁМКА"; target = st.roi.name; color = STATUS_META.capture.c; }
+ else if (st.state === "downlink") { iv = findInterval(sched[s.id].downlink, tNow); type = "СБРОС"; target = "ст. " + st.station.name; color = STATUS_META.downlink.c; }
+ else if (st.state === "prohibit") { iv = findInterval(sched[s.id].prohibit, tNow); type = "ЗАПРЕТ"; target = st.prohibit.reason; color = STATUS_META.prohibit.c; }
+ if (type) events.push({ id: s.id, satId: s.id, sat: s.name, type, target, color, remain: window.fmtDur((iv ? iv.end : tNow) - tNow) });
+ }
+ events.sort((a, b) => a.remain.localeCompare(b.remain));
+
+ const focusSat = focusId ? env.sats.find((s) => s.id === focusId) : null;
+
+ return (
+
+
+
+
+
+
+
+
+ {focusSat ? (
+
setFocus(null)} />
+ ) : (
+ КЛИК ПО АППАРАТУ — ФОКУС И ПОДСВЕТКА СОБЫТИЙ
+ )}
+
+
+
+ {cursor ? `${Math.abs(cursor.lat).toFixed(3)}° ${cursor.lat >= 0 ? "с.ш." : "ю.ш."}, ${Math.abs(cursor.lon).toFixed(3)}° ${cursor.lon >= 0 ? "в.д." : "з.д."}` : "—"}
+
+ {hover && hover.id !== focusId && (
+
+ {env.sats.find((s) => s.id === hover.id)?.name}
+
+ )}
+
+
+
+
ТАЙМЛАЙН СОБЫТИЙ
+
+
+
{live ? "РЕЖИМ LIVE · ×1" : "СИМУЛЯЦИЯ ×" + speed} · перетащите для скраба
+
+
+
+
+
+
+
+
+
{sat.name}✕
+
+ NORAD {sat.norad} · {sat.group}
+ · {status.eclipse ? "☾ " : ""}{meta.t}
+
+
+
+
{Math.abs(status.p.lat).toFixed(2)}° {status.p.lat >= 0 ? "N" : "S"} · {Math.abs(status.p.lon).toFixed(2)}° {status.p.lon >= 0 ? "E" : "W"}
+
ПАМЯТЬ {Math.round(mem)}%
+
+
+
+
+
+
+
+
+
+ apiRef.current.onCursor && apiRef.current.onCursor(null)} onClick={onClick} />
+
+ );
+}
+
+// trace a small lon/lat polygon as a planar projected path (no antimeridian crossing)
+function tracePoly(ctx, proj, poly) {
+ ctx.beginPath();
+ poly.forEach((pt, i) => {
+ const p = proj(pt); if (!p) return;
+ if (i === 0) ctx.moveTo(p[0], p[1]); else ctx.lineTo(p[0], p[1]);
+ });
+ ctx.closePath();
+}
+
+function hexA(hex, a) {
+ if (hex[0] !== "#") return hex;
+ const n = parseInt(hex.slice(1), 16);
+ const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
+ return `rgba(${r},${g},${b},${a})`;
+}
+
+window.MapView = MapView;
+window.hexA = hexA;
diff --git a/docs/ui-prototypes/tgu-ops/design_handoff_constellation_dashboard/reference/js/panels.jsx b/docs/ui-prototypes/tgu-ops/design_handoff_constellation_dashboard/reference/js/panels.jsx
new file mode 100644
index 0000000..555036d
--- /dev/null
+++ b/docs/ui-prototypes/tgu-ops/design_handoff_constellation_dashboard/reference/js/panels.jsx
@@ -0,0 +1,180 @@
+/* ============================================================
+ panels.jsx — header + left panel (exports window.Header,
+ window.SidePanel). Status meta, summary, roster, activity feed.
+ ============================================================ */
+const STATUS_META = {
+ operational: { c: "#5cae7e", t: "НА ОРБИТЕ" },
+ capture: { c: "#d99a4e", t: "СЪЁМКА" },
+ downlink: { c: "#5b9bd5", t: "СБРОС" },
+ prohibit: { c: "#d9685f", t: "ЗАПРЕТ" },
+};
+
+function fmtClock(ms) {
+ const d = new Date(ms);
+ const p = (n) => String(n).padStart(2, "0");
+ return {
+ time: `${p(d.getUTCHours())}:${p(d.getUTCMinutes())}:${p(d.getUTCSeconds())}`,
+ date: `${p(d.getUTCDate())}.${p(d.getUTCMonth() + 1)}.${d.getUTCFullYear()}`,
+ dow: ["ВС", "ПН", "ВТ", "СР", "ЧТ", "ПТ", "СБ"][d.getUTCDay()],
+ };
+}
+function fmtDur(ms) {
+ const s = Math.max(0, Math.round(ms / 1000));
+ const m = Math.floor(s / 60), ss = s % 60;
+ return `${m}:${String(ss).padStart(2, "0")}`;
+}
+
+function Header({ simTime, playing, speed, live, onPlay, onSpeed, onNow, onStep }) {
+ const ck = fmtClock(simTime);
+ const speeds = [1, 10, 60, 600];
+ return (
+
+ );
+}
+
+function SummaryTiles({ counts }) {
+ const tiles = [
+ { k: "capture", label: "СНИМАЮТ", n: counts.capture, c: STATUS_META.capture.c },
+ { k: "downlink", label: "СБРОС", n: counts.downlink, c: STATUS_META.downlink.c },
+ { k: "prohibit", label: "ЗАПРЕТ", n: counts.prohibit, c: STATUS_META.prohibit.c },
+ { k: "eclipse", label: "В ТЕНИ", n: counts.eclipse, c: "#7d92c4" },
+ ];
+ return (
+
+
+ {tiles.map((t) => (
+
+ ))}
+
+
+ {counts.total} КА
+
+
+
+
+
+ {sat.name}
+
+ {status.eclipse && ☾ }{meta.t}
+
+
+
+
NORAD {sat.norad}
+
+
{Math.round(mem)}%
+
+
+
+ {groups.map((g, i) => {
+ if (g.type === "domain") return
;
+ if (g.type === "group") return
{g.label}
;
+ const s = g.sat;
+ return
onFocus(focusId === s.id ? null : s.id)} />;
+ })}
+
+
АКТИВНЫЕ СОБЫТИЯ {events.length}
+
+ {events.length === 0 &&
нет активных событий
}
+ {events.map((e) => (
+
onFocus(e.satId)}>
+
+
+
{e.type} {e.target}
+
{e.sat}ещё {e.remain}
+
+
+ ))}
+
+
+
+
+
+
+
+
+ {/* axis */}
+
+
+ {isDay ? `${String(d.getUTCDate()).padStart(2, "0")}.${String(d.getUTCMonth() + 1).padStart(2, "0")}` : `${hh}:00`}
+
+
+ );
+ })}
+
+ {/* rows */}
+ {rows.map((r, i) => {
+ if (r.type === "group") {
+ return {r.label} ;
+ }
+ const s = r.sat;
+ const tr = sched[s.id] || {};
+ const dim = focusId && focusId !== s.id;
+ const cy = r.y + TL_ROW / 2;
+ const band = (iv, key, fill, h) => {
+ const x1 = X(Math.max(iv.start, viewStart)), x2 = X(Math.min(iv.end, viewEnd));
+ if (x2 <= TL_GUTTER || x1 >= w || x2 - x1 < 0.6) return null;
+ return onFocus(focusId === s.id ? null : s.id)} style={{ cursor: "pointer" }}>
+ {s.name}
+ {/* baseline */}
+
+ );
+ })}
+
+ {/* now marker (real wall clock) */}
+ {nowX > TL_GUTTER && nowX < w && (
+
+ СЕЙЧАС
+
+ )}
+ {/* playhead */}
+
+
+
+
Состояние группировки — Mission Ops
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/ui-prototypes/tgu-ops/design_handoff_constellation_dashboard/reference/styles.css b/docs/ui-prototypes/tgu-ops/design_handoff_constellation_dashboard/reference/styles.css
new file mode 100644
index 0000000..12d5124
--- /dev/null
+++ b/docs/ui-prototypes/tgu-ops/design_handoff_constellation_dashboard/reference/styles.css
@@ -0,0 +1,180 @@
+:root {
+ --bg0:#0a0c0b; --bg1:#0e1211; --panel:#111514; --ins:#0a0e0d;
+ --line:rgba(255,255,255,0.06); --line2:rgba(255,255,255,0.11);
+ --hi:#e7ece9; --mid:#95a19d; --dim:#5b6662; --faint:#3c4644;
+ --teal:#5fb3a3; --teal-bg:rgba(95,179,163,0.13); --teal-br:rgba(95,179,163,0.35);
+ --amber:#d99a4e; --blue:#5b9bd5; --red:#d9685f; --green:#5cae7e; --violet:#a78bdb;
+}
+*{box-sizing:border-box;}
+html,body{height:100%;margin:0;}
+body{
+ background:var(--bg0); color:var(--hi);
+ font-family:'IBM Plex Sans',system-ui,sans-serif;
+ font-size:13px; -webkit-font-smoothing:antialiased;
+ overflow:hidden;
+}
+.mono,.clock-time,.sr-norad,.map-cursor,.tl-tick,.fc-meta{font-family:'IBM Plex Mono',monospace;}
+button{font-family:inherit; cursor:pointer; color:inherit;}
+::-webkit-scrollbar{width:8px;height:8px;}
+::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.07);border-radius:4px;}
+::-webkit-scrollbar-track{background:transparent;}
+
+.app{height:100vh; display:flex; flex-direction:column; overflow:hidden;}
+
+/* ---------- header ---------- */
+.hdr{
+ height:54px; flex:none; display:flex; align-items:center;
+ border-bottom:1px solid var(--line); background:linear-gradient(var(--bg1),var(--bg0));
+ padding:0 16px; gap:18px; position:relative; z-index:5;
+}
+.hdr-brand{display:flex; align-items:center; gap:11px; min-width:248px;}
+.brand-mark{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--teal);
+ box-shadow:0 0 10px rgba(95,179,163,0.4) inset, 0 0 6px rgba(95,179,163,0.3);}
+.brand-1{font-weight:600; font-size:13px; letter-spacing:.04em; white-space:nowrap;}
+.brand-2{font-family:'IBM Plex Mono',monospace; font-size:9px; color:var(--dim); letter-spacing:.12em; margin-top:1px;}
+
+.hdr-transport{flex:1; display:flex; align-items:center; justify-content:center; gap:7px;}
+.t-btn{background:var(--bg1); border:1px solid var(--line2); color:var(--mid);
+ height:30px; min-width:34px; padding:0 11px; border-radius:6px; font-size:11.5px; letter-spacing:.04em;
+ transition:.12s;}
+.t-btn:hover{border-color:var(--teal-br); color:var(--hi);}
+.t-play{font-size:12px; color:var(--teal); border-color:var(--teal-br); background:var(--teal-bg); width:42px;}
+.t-play.on{background:rgba(95,179,163,0.2);}
+.t-now{font-size:10.5px; letter-spacing:.1em;}
+.t-now.live{background:rgba(92,174,126,0.16); border-color:rgba(92,174,126,0.5); color:var(--green);}
+.t-sep{width:1px; height:20px; background:var(--line2); margin:0 4px;}
+.speed-seg{display:flex; border:1px solid var(--line2); border-radius:6px; overflow:hidden; background:var(--bg1);}
+.speed-seg .sp{background:transparent; border:0; color:var(--dim); height:28px; padding:0 11px; font-size:11px;
+ font-family:'IBM Plex Mono',monospace; border-right:1px solid var(--line); transition:.12s;}
+.speed-seg .sp:last-child{border-right:0;}
+.speed-seg .sp:hover{color:var(--mid);}
+.speed-seg .sp.on{background:var(--teal-bg); color:var(--teal);}
+
+.hdr-clock{display:flex; flex-direction:column; align-items:flex-end; min-width:240px; gap:1px;}
+.live-badge{display:flex; align-items:center; gap:5px; font-size:9.5px; letter-spacing:.16em; color:var(--amber);
+ font-family:'IBM Plex Mono',monospace;}
+.live-badge .live-dot{width:6px;height:6px;border-radius:50%;background:var(--amber);}
+.live-badge.on{color:var(--green);}
+.live-badge.on .live-dot{background:var(--green); box-shadow:0 0 6px var(--green); animation:pulse 1.4s infinite;}
+@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
+.clock-main{display:flex; align-items:baseline; gap:6px;}
+.clock-time{font-size:22px; font-weight:500; letter-spacing:.02em; line-height:1;}
+.clock-utc{font-size:9px; color:var(--dim); letter-spacing:.1em;}
+.clock-date{font-size:10px; color:var(--mid); font-family:'IBM Plex Mono',monospace; letter-spacing:.06em;}
+
+/* ---------- body ---------- */
+.body{flex:1; display:flex; min-height:0;}
+.side{width:328px; flex:none; border-right:1px solid var(--line); background:var(--bg1);
+ display:flex; flex-direction:column; overflow:hidden;}
+.main{flex:1; display:flex; flex-direction:column; min-width:0;}
+
+.sec-label{font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.16em; color:var(--dim);
+ padding:13px 16px 8px; display:flex; align-items:center; gap:8px;}
+.sec-label.tight{padding-top:6px;}
+.sec-label .count{background:var(--bg0); border:1px solid var(--line2); border-radius:8px; padding:0 6px;
+ font-size:9px; color:var(--mid);}
+
+/* summary */
+.summary{padding:0 14px 6px;}
+.summary-tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:6px;}
+.s-tile{background:var(--ins); border:1px solid var(--line); border-radius:7px; padding:9px 4px 7px; text-align:center;}
+.s-num{font-family:'IBM Plex Mono',monospace; font-size:21px; font-weight:600; line-height:1;}
+.s-lbl{font-size:8px; color:var(--dim); letter-spacing:.1em; margin-top:5px;}
+.summary-foot{display:flex; align-items:center; gap:13px; padding:9px 2px 2px; font-size:10px;
+ color:var(--mid); font-family:'IBM Plex Mono',monospace;}
+.summary-foot .dot,.r-domain .dot{width:7px;height:7px;border-radius:2px;display:inline-block;margin-right:5px;vertical-align:middle;}
+.summary-foot .muted{margin-left:auto; color:var(--dim);}
+
+/* search */
+.side-search{padding:4px 14px 2px;}
+.side-search input{width:100%; background:var(--ins); border:1px solid var(--line); border-radius:6px;
+ color:var(--hi); padding:7px 10px; font-size:11.5px; outline:none; font-family:'IBM Plex Mono',monospace;}
+.side-search input::placeholder{color:var(--faint);}
+.side-search input:focus{border-color:var(--teal-br);}
+
+/* roster */
+.roster{flex:1; min-height:0; overflow-y:auto; padding:0 8px 8px;}
+.r-domain{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.14em; color:var(--mid);
+ padding:11px 8px 5px; display:flex; align-items:center;}
+.r-group{font-size:9.5px; color:var(--faint); letter-spacing:.08em; padding:3px 8px 3px 20px; text-transform:uppercase;}
+.sat-row{display:flex; gap:9px; padding:7px 8px 7px 10px; border-radius:7px; cursor:pointer;
+ align-items:center; transition:.1s; border:1px solid transparent;}
+.sat-row:hover{background:rgba(255,255,255,0.025);}
+.sat-row.focus{background:var(--teal-bg); border-color:var(--teal-br);}
+.sr-payload{width:3px; align-self:stretch; border-radius:2px; flex:none;}
+.sr-main{flex:1; min-width:0;}
+.sr-top{display:flex; justify-content:space-between; align-items:baseline; gap:8px;}
+.sr-name{font-size:12.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
+.sr-status{font-size:9px; letter-spacing:.08em; font-family:'IBM Plex Mono',monospace; flex:none; display:flex; align-items:center; gap:3px;}
+.sr-status .ecl{opacity:.85;}
+.sr-bot{display:flex; align-items:center; gap:8px; margin-top:4px;}
+.sr-norad{font-size:9px; color:var(--dim); flex:none;}
+.mem-bar{flex:1; height:4px; background:rgba(255,255,255,0.07); border-radius:2px; overflow:hidden;}
+.mem-bar span{display:block; height:100%; border-radius:2px; transition:width .2s;}
+.sr-mem{font-size:9.5px; font-family:'IBM Plex Mono',monospace; flex:none; width:30px; text-align:right;}
+
+/* activity */
+.activity{flex:none; max-height:34%; display:flex; flex-direction:column; border-top:1px solid var(--line); overflow:hidden;}
+.act-list{overflow-y:auto; padding:0 8px 8px;}
+.act-empty{color:var(--faint); font-size:11px; padding:6px 10px; font-family:'IBM Plex Mono',monospace;}
+.act-row{display:flex; gap:8px; padding:6px 8px; border-radius:6px; cursor:pointer; align-items:center;}
+.act-row:hover{background:rgba(255,255,255,0.025);}
+.act-row.focus{background:var(--teal-bg);}
+.act-bar{width:3px; align-self:stretch; border-radius:2px; flex:none;}
+.act-body{flex:1; min-width:0;}
+.act-top{display:flex; gap:7px; align-items:baseline;}
+.act-type{font-size:9.5px; letter-spacing:.1em; font-family:'IBM Plex Mono',monospace;}
+.act-tgt{font-size:11px; color:var(--hi); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
+.act-sub{display:flex; justify-content:space-between; font-size:9.5px; color:var(--dim); margin-top:2px; font-family:'IBM Plex Mono',monospace;}
+.act-rem{color:var(--mid);}
+
+/* ---------- map ---------- */
+.map-area{flex:1; position:relative; min-height:0; overflow:hidden; background:var(--ins);}
+.map-wrap{position:absolute; inset:0;}
+.map-wrap canvas{display:block;}
+.map-caption{position:absolute; top:12px; left:12px; z-index:3;}
+.cap-hint{font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.12em; color:var(--faint);
+ background:rgba(10,14,13,0.6); border:1px solid var(--line); padding:6px 10px; border-radius:6px; white-space:nowrap;}
+.focus-card{display:flex; align-items:stretch; gap:11px; background:rgba(11,16,15,0.92); backdrop-filter:blur(6px);
+ border:1px solid var(--teal-br); border-radius:8px; padding:10px 13px; min-width:330px;}
+.fc-pay{width:3px; border-radius:2px; flex:none;}
+.fc-info{flex:1;}
+.fc-name{font-size:14px; font-weight:600; display:flex; justify-content:space-between; align-items:center;}
+.fc-x{background:none; border:0; color:var(--dim); font-size:12px; padding:0 2px;}
+.fc-x:hover{color:var(--hi);}
+.fc-meta{font-size:9.5px; color:var(--mid); margin-top:4px; display:flex; gap:6px; align-items:center; letter-spacing:.04em;}
+.fc-dot{color:var(--faint);}
+.fc-pos{text-align:right; font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--mid); display:flex; flex-direction:column; justify-content:center; gap:4px;}
+.fc-mem b{color:var(--hi);}
+
+.map-legend{position:absolute; bottom:12px; left:12px; z-index:3; background:rgba(10,14,13,0.55);
+ border:1px solid var(--line); border-radius:7px; padding:8px 11px; display:flex; flex-direction:column; gap:5px;}
+.ml-row{display:flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:9px;
+ letter-spacing:.08em; color:var(--mid); white-space:nowrap;}
+.ml-tri{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:7px solid #cdd6d3;}
+.ml-sw{width:14px; height:3px; border-radius:2px; background:var(--teal);}
+.ml-sw.amber{background:var(--amber);}
+.ml-sw.blue{background:var(--blue);}
+.ml-sw.blue.dash{background:repeating-linear-gradient(90deg,var(--blue) 0 4px,transparent 4px 7px);}
+.ml-sw.night{background:rgba(90,120,170,0.5); height:9px; width:14px; border-radius:2px;}
+
+.map-cursor{position:absolute; bottom:10px; right:14px; z-index:3; font-family:'IBM Plex Mono',monospace;
+ font-size:10px; color:var(--mid); background:rgba(10,14,13,0.6); padding:3px 8px; border-radius:5px; border:1px solid var(--line);}
+.map-tip{position:absolute; z-index:4; pointer-events:none; font-family:'IBM Plex Mono',monospace; font-size:10px;
+ background:rgba(11,16,15,0.95); border:1px solid var(--line2); padding:3px 7px; border-radius:5px; color:var(--hi); white-space:nowrap;}
+
+/* ---------- timeline ---------- */
+.tl-area{height:248px; flex:none; border-top:1px solid var(--line); background:var(--bg1); display:flex; flex-direction:column;}
+.tl-head{height:34px; flex:none; display:flex; align-items:center; gap:18px; padding:0 16px; border-bottom:1px solid var(--line);}
+.tl-title{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.16em; color:var(--mid);}
+.tl-legend{display:flex; gap:15px; flex:1;}
+.leg-item{display:flex; align-items:center; gap:6px; font-family:'IBM Plex Mono',monospace; font-size:9px;
+ letter-spacing:.08em; color:var(--dim);}
+.leg-sw{width:13px; height:8px; border-radius:2px; display:inline-block;}
+.leg-sw.hatch{background:repeating-linear-gradient(45deg,rgba(217,104,95,0.7) 0 2px,rgba(217,104,95,0.12) 2px 5px); border:1px solid rgba(217,104,95,0.5);}
+.tl-hint{font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:var(--faint); letter-spacing:.06em;}
+.tl-wrap{flex:1; overflow-y:auto; overflow-x:hidden; user-select:none; cursor:crosshair;}
+.tl-tick{fill:var(--dim); font-size:9px; font-family:'IBM Plex Mono',monospace;}
+.tl-group{fill:var(--faint); font-size:9px; letter-spacing:.14em; font-family:'IBM Plex Mono',monospace;}
+.tl-name{fill:var(--mid); font-size:10.5px;}
+.tl-nowlbl{fill:rgba(95,179,163,0.6); font-size:8px; letter-spacing:.12em; font-family:'IBM Plex Mono',monospace;}
diff --git a/docs/ui-prototypes/tgu-ops/design_handoff_constellation_dashboard/src/ConstellationDashboard.jsx b/docs/ui-prototypes/tgu-ops/design_handoff_constellation_dashboard/src/ConstellationDashboard.jsx
new file mode 100644
index 0000000..1cabe32
--- /dev/null
+++ b/docs/ui-prototypes/tgu-ops/design_handoff_constellation_dashboard/src/ConstellationDashboard.jsx
@@ -0,0 +1,210 @@
+/* ============================================================
+ ConstellationDashboard.jsx — wiring, RAF clock, memory sim (ESM)
+ Default export:
+
+
+
+
+
+
+
+ {focusSat ? (
+
setFocus(null)} />
+ ) : (
+ КЛИК ПО АППАРАТУ — ФОКУС И ПОДСВЕТКА СОБЫТИЙ
+ )}
+
+
+
+ {cursor ? `${Math.abs(cursor.lat).toFixed(3)}° ${cursor.lat >= 0 ? "с.ш." : "ю.ш."}, ${Math.abs(cursor.lon).toFixed(3)}° ${cursor.lon >= 0 ? "в.д." : "з.д."}` : "—"}
+
+ {hover && hover.id !== focusId && (
+
+ {env.sats.find((s) => s.id === hover.id)?.name}
+
+ )}
+
+
+
+
ТАЙМЛАЙН СОБЫТИЙ
+
+
+
{live ? "РЕЖИМ LIVE · ×1" : "СИМУЛЯЦИЯ ×" + speed} · перетащите для скраба
+
+
+
+
+
+
+
+
+
{sat.name}✕
+
+ NORAD {sat.norad} · {sat.group}
+ · {status.eclipse ? "☾ " : ""}{meta.t}
+
+
+
+
{Math.abs(status.p.lat).toFixed(2)}° {status.p.lat >= 0 ? "N" : "S"} · {Math.abs(status.p.lon).toFixed(2)}° {status.p.lon >= 0 ? "E" : "W"}
+
ПАМЯТЬ {Math.round(mem)}%
+
+
+
+
+
+
+
+
+
+ apiRef.current.onCursor && apiRef.current.onCursor(null)} onClick={onClick} />
+
+ );
+}
+
+// trace a small lon/lat polygon as a planar projected path (no antimeridian crossing)
+function tracePoly(ctx, proj, poly) {
+ ctx.beginPath();
+ poly.forEach((pt, i) => {
+ const p = proj(pt); if (!p) return;
+ if (i === 0) ctx.moveTo(p[0], p[1]); else ctx.lineTo(p[0], p[1]);
+ });
+ ctx.closePath();
+}
+
+export default MapView;
diff --git a/docs/ui-prototypes/tgu-ops/design_handoff_constellation_dashboard/src/Panels.jsx b/docs/ui-prototypes/tgu-ops/design_handoff_constellation_dashboard/src/Panels.jsx
new file mode 100644
index 0000000..a934870
--- /dev/null
+++ b/docs/ui-prototypes/tgu-ops/design_handoff_constellation_dashboard/src/Panels.jsx
@@ -0,0 +1,180 @@
+/* ============================================================
+ Panels.jsx — header + left panel (ESM)
+ Exports: Header, SidePanel, STATUS_META, fmtDur.
+ ============================================================ */
+import React from "react";
+import { COL } from "./data.js";
+
+const STATUS_META = {
+ operational: { c: "#5cae7e", t: "НА ОРБИТЕ" },
+ capture: { c: "#d99a4e", t: "СЪЁМКА" },
+ downlink: { c: "#5b9bd5", t: "СБРОС" },
+ prohibit: { c: "#d9685f", t: "ЗАПРЕТ" },
+};
+
+function fmtClock(ms) {
+ const d = new Date(ms);
+ const p = (n) => String(n).padStart(2, "0");
+ return {
+ time: `${p(d.getUTCHours())}:${p(d.getUTCMinutes())}:${p(d.getUTCSeconds())}`,
+ date: `${p(d.getUTCDate())}.${p(d.getUTCMonth() + 1)}.${d.getUTCFullYear()}`,
+ dow: ["ВС", "ПН", "ВТ", "СР", "ЧТ", "ПТ", "СБ"][d.getUTCDay()],
+ };
+}
+function fmtDur(ms) {
+ const s = Math.max(0, Math.round(ms / 1000));
+ const m = Math.floor(s / 60), ss = s % 60;
+ return `${m}:${String(ss).padStart(2, "0")}`;
+}
+
+function Header({ simTime, playing, speed, live, onPlay, onSpeed, onNow, onStep }) {
+ const ck = fmtClock(simTime);
+ const speeds = [1, 10, 60, 600];
+ return (
+
+ );
+}
+
+function SummaryTiles({ counts }) {
+ const tiles = [
+ { k: "capture", label: "СНИМАЮТ", n: counts.capture, c: STATUS_META.capture.c },
+ { k: "downlink", label: "СБРОС", n: counts.downlink, c: STATUS_META.downlink.c },
+ { k: "prohibit", label: "ЗАПРЕТ", n: counts.prohibit, c: STATUS_META.prohibit.c },
+ { k: "eclipse", label: "В ТЕНИ", n: counts.eclipse, c: "#7d92c4" },
+ ];
+ return (
+
+
+ {tiles.map((t) => (
+
+ ))}
+
+
+ {counts.total} КА
+
+
+
+
+
+ {sat.name}
+
+ {status.eclipse && ☾ }{meta.t}
+
+
+
+
NORAD {sat.norad}
+
+
{Math.round(mem)}%
+
+
+
+ {groups.map((g, i) => {
+ if (g.type === "domain") return
;
+ if (g.type === "group") return
{g.label}
;
+ const s = g.sat;
+ return
onFocus(focusId === s.id ? null : s.id)} />;
+ })}
+
+
АКТИВНЫЕ СОБЫТИЯ {events.length}
+
+ {events.length === 0 &&
нет активных событий
}
+ {events.map((e) => (
+
onFocus(e.satId)}>
+
+
+
{e.type} {e.target}
+
{e.sat}ещё {e.remain}
+
+
+ ))}
+
+
+
+
+
+
+
+
+ {/* axis */}
+
+
+ {isDay ? `${String(d.getUTCDate()).padStart(2, "0")}.${String(d.getUTCMonth() + 1).padStart(2, "0")}` : `${hh}:00`}
+
+
+ );
+ })}
+
+ {/* rows */}
+ {rows.map((r, i) => {
+ if (r.type === "group") {
+ return {r.label} ;
+ }
+ const s = r.sat;
+ const tr = sched[s.id] || {};
+ const dim = focusId && focusId !== s.id;
+ const cy = r.y + TL_ROW / 2;
+ const band = (iv, key, fill, h) => {
+ const x1 = X(Math.max(iv.start, viewStart)), x2 = X(Math.min(iv.end, viewEnd));
+ if (x2 <= TL_GUTTER || x1 >= w || x2 - x1 < 0.6) return null;
+ return onFocus(focusId === s.id ? null : s.id)} style={{ cursor: "pointer" }}>
+ {s.name}
+ {/* baseline */}
+
+ );
+ })}
+
+ {/* now marker (real wall clock) */}
+ {nowX > TL_GUTTER && nowX < w && (
+
+ СЕЙЧАС
+
+ )}
+ {/* playhead */}
+
+
+
+