Рабочий стол
Последние треды
Проверки системы
Треды
0Новый тред
Контракт
POST /flow/api/v1/threads/submit
{
"textRu": "текст задачи",
"projectId": 2
}
Роли и модели
0FSM
Документация тредов
0Model Catalog
—Ветки апгрейдов зданий
—Каждая ветка показывает цепочку апгрейдов от стартовых зданий к продвинутым. Внутри ветки апгрейды сохраняют класс (жильё → жильё, коммерция → коммерция). Кликните по карточке, чтобы открыть детали модели.
Принципы
Плотный операторский UI: темная рабочая поверхность, высокий контраст, статусы читаются цветом и текстом, карточки только для повторяемых сущностей и панелей.
Типографика
Заголовок 26
Секция 16
Тело 14, мета 12. Letter spacing 0.
Компоненты
Цветовые токены
Forms, Tables, Layout
Form controls
Cards and controls
Table row rhythm
| Name | Status | Owner |
|---|---|---|
| Delivery | ok | release |
| QA | open | tester |
Reusable visual language for the Unreal Blueprint-inspired finite-state machine graph used in the FSM section. Every specimen below renders with the same CSS classes and SVG markers as the live /flow/#fsm view.
A node renders as a layered SVG group: a 26 px header strip, a primary title row, a role/type badge, an optional status chip, a compact metadata line, and connection ports on the left/right edges. Selection, hover, and keyboard focus stack three independent visual states.
-
1
- Header strip
- 26 px tall, tinted with category color at 13–24 % alpha; fades into the node body without a separator line.
- Role/type badge
- Right-aligned label on the header — gate type for deterministic gates,
QAfor tester nodes, blank for plain roles. - Title + sub
- Bold 12 px display name, then a 11 px muted sub describing the role’s queue or scope.
- Metadata line
- Single 11 px muted line: gates, kind (
terminal,gate), or invariant note (blocks delivered). - Status chip
- Optional 22 px pill: green
OK, yellowPENDING, redFAIL; mirrors the FSM verdict for the role’s last run. - Input port
- 5 px green circle on the left edge, vertical center; receives all incoming edges.
- Output port
- 5 px blue circle on the right edge; emits success/repair/terminal edges.
- Selected/focus state
- 2.6 px blue stroke + drop-shadow glow; keyboard focus adds a 3 px dashed offset ring (see specimens below).
- Post-delivery glow
- Yellow 2.4 px stroke + drop-shadow; signals that the role blocks the
deliveredterminal.
Default, hover, selected, focus (keyboard), disabled. Each state is independent so a node can be both selected and disabled.
Default
Hover
Selected
Keyboard focus
Category is encoded by stroke color + header tint. The shape and metric grid are identical so categories can be permuted without recomputing the layout.
Planning
operator · pm · architect · scope_resolver · po
Implementation
clone · integrator · writer · translator
Deterministic gate
validation · scope_resolver
QA / tester
qa · post_delivery_qa
Delivery / release
delivery
Terminal
delivered
Repair / recovery
clone (repair re-entry) · integrator (diff repair)
Cancel terminal
cancelled
Five edge variants + reroute waypoint nodes. All edges share the same arrowhead family but recolor and dash to encode the transition kind.
delivery → post_delivery_qa invariant — delivered is blocked until QA passes.7 5), 2.45 px. Used for needs_changes, rejected, repair, post-delivery QA failure. Routes via top or bottom rail with reroute waypoints.delivered.5 5). Used for operator/stop terminals (cancelled).Layout is deterministic: roles are assigned to fixed layers and lanes derived from the FSM metadata. Stage bands are quiet background containers derived from metadata membership and current node boxes; they are not draggable nodes or layout authorities. Failure / back edges route through dedicated rails so they never cross node bodies.
- Left-to-right execution flow on desktop; layer columns are 174 px wide with a 138 px lane height.
- Tree / star branching: planning, validation, delivery, post-delivery share lane
0; auxiliary roles use lanes−1(top) and+1(bottom). - Back edges and repair edges route through a top rail (
y < minY − 42) or bottom rail (y > maxY + 54) — never through the main lane band. - Minimum spacing: 16 px between siblings on the same lane, 32 px between layers.
- Stage group bands are recomputed from member node bounds with header and inner padding; collision resolution trims/moves only band rectangles, never node coordinates.
- Stage labels live in a header strip above the member-node content area so labels do not collide with node titles.
- No edge crosses a node body where avoidable; the renderer inserts reroute waypoints at lane changes.
- Below 760 px viewport, the graph collapses to a vertical layered list (lanes become rows, layers stack).
Graph interactions follow editor-canvas behavior: right mouse drag pans the viewport, nodes keep explicit saved positions, and stage bands follow those saved node positions as background layers without auto-displacing unrelated nodes.
- Hover on a node highlights all connected edges with a 2.45 → 3.4 px stroke and a soft glow.
- Click selects the node — opens the right-hand FSM detail panel with role, queue, gates, outgoing transitions.
- Drag moves only the active node; nearby nodes are not pushed or repelled when boxes overlap.
- Stage bands ignore pointer events, render behind edges and cards, and are recomputed after drag, reset, reload, and zoom changes.
- Right mouse drag pans the graph viewport; middle mouse drag is accepted as an alternate pan gesture.
- Post-delivery tester stays in the canonical graph as a delivery invariant; per-thread QA screenshots stay in thread detail surfaces.
- Hover on an edge widens the hit zone (15 px transparent stroke) and shows the trigger / verdict tooltip.
- Selecting an edge dims unrelated edges to 45 % opacity.
- Keyboard:
Tabwalks nodes in layout order,Enteractivates,Escclears selection. Focused nodes get a 3 px dashed blue ring (offset 2 px) on top of the existing selection styling.
All values below are also exposed as CSS variables on :root or as concrete numbers inside the FSM SVG renderer. Override only by extending — never by inline overrides on individual nodes.
Category & state colors
Spacing scale (px)
Border radius
Shadow / glow
Typography scale
Title · 14/12 · weight 760
Bold node title (.title-text). Renders at 12 px inside SVG.
BADGE · 11/700 · weight 800 · letter-spacing .03em
Role/type badge (.badge).
Meta · 11 · muted · weight 400
Sub-line and metadata (.muted).
LANE · 11 · uppercase
Layer/lane label (.fsm-lane-label).
Edge thickness · dash · arrowhead
success— 2.45 px solid ·fsmArrowblue.invariant— 2.65 px solid ·fsmArrowInvariantyellow.terminal— 2.80 px solid ·fsmArrowTerminalgreen.repair— 2.45 px dashed7 5·fsmArrowRepairviolet.cancel— 2.15 px dashed5 5·fsmArrowRepairred-tinted.dim— opacity 45 %, no stroke change.- Hit area: invisible 15 px stroke (
.fsm-edge-hit) under every visible edge. - Hover/select: stroke 3.8 px + drop-shadow 0 0 8 px blue 38 %.
Composed mini-graphs that match the live FSM renderer exactly. Used as visual contracts in design review and QA.
Example 1 · Delivery → QA (post-delivery tester) → Delivered
Yellow invariant edge enforces that delivered is unreachable until the post-delivery tester returns OK. The terminal edge is the only edge that enters delivered.
Example 2 · Post-delivery QA failed → Clone repair
When the post-delivery tester returns failed, the violet dashed repair edge routes through the top rail back into clone. Two reroute waypoints make the back edge readable without crossing the main band.
Example 3 · Primary success path with reroute points
Operator → PM → Clone → Validation gate (off-lane) → Delivery → Post-delivery QA → Done. Reroute waypoints carry the success path through the validation gate without overlapping the primary lane.
Star Estate — Telegram WebApp · дизайн-система
Источник: компактный пакет загружен с домашнего компьютера в /opt/claude-workspaces/front-design-source/. Ниже — живая галерея экранов мини-аппа в портретном телефонном фрейме, каталог компонентов, дизайн-токены и правила переиспользования для разработки нашего приложения.
http://localhost:3030) при viewport 390×844, DPR 2. Splash дожидается ухода (_splashScreen_m8nvh_48); wizard пройден кликами; вкладки и достижимые модалки захвачены в реальном интерактивном состоянии. Недостающие bootstrap dynamic-чанки (avsc-*, tonChunk-*, schemasContent-*) собраны заново из npm-зависимостей и подложены в assets/; 1 805 оригинальных ассетов из star-estate-assets/ подцеплены через hash-agnostic fallback. Ядро, которое ссылалось на отсутствующие lazy-чанки (/market, /profile/customization, /quiz), дополнительно отрисовано детерминированным source-derived рендером из route-строк, локализации и реального asset pool. Только недоступные событийные модалки остаются source-only.
Галерея экранов
Портретный iPhone-фрейм с Dynamic Island и home-индикатором. Изображения — живые скриншоты Playwright из мок-сервера (screens-v2/*.png, 780 × 1688) при css-вьюпорте 390 × 844, DPR 2.
Каталог компонентов
Базовые блоки UI, переиспользуемые между экранами. Имена — из star-estate/src/components/*.jsx и DOM-классов (_diag/*.json).
NavbarS5 (нижняя панель 5)
Класс _navbarS5_1ba9g_1. Пять вкладок: Друзья · Задания · В казну · Рейтинг · Стройка. Активная — _active_1ba9g_37, центральная иконка визуально приподнята (matrix3d translateY).
UserHeader + EstatorPower + CurrencyChips
Класс _user_1j1k6_1 + _avatar_5kau4_. Шапка содержит: аватар, ник «Test User», ранг «Начинающий Инноватор», прогресс-бар «СИЛА ЭСТЕЙТОРА N/12», ниже — ряд валютных чипов (5K coins, 0 cash, 100 people, 0 ton).
BuildingCard
Карточка здания: hero-картинка, название, цена в монетах, плашка категории/тира. Сетка 2-в-ряд на BuildScreen.
Modal (center)
Универсальная центрированная модалка из Modal.jsx: заголовок, body, primary CTA, dim-overlay.
Modal (bottom-sheet)
Лист снизу: hero сверху (картинка здания/персонажа), контент в середине, sticky CTA в нижнем безопасном поле.
Button
Универсальная кнопка с 6 вариантами: primary, secondary, gold (награда), ghost, small, disabled. CSS-classes: _button_* + _disabled_* _small_*.
Icons
SVG-иконки внутри Icons.jsx; стандартный размер 24×24. Цвет наследуется (currentColor).
AssistantBanner (ПомощнИИца)
Плавающий контекстный баннер на BuildScreen: розово-градиентная рамка, glass-strong, аватар, золотая круглая кнопка-стрелка ›.
ProgressDots
Прогресс-точки шагов (онбординг, квиз). Активный — заливка accent, остальные — outline.
FilterChip
Чип-фильтр над списками (например, «Улучшаемые» на BuildScreen). Переключаемый, accent-фон при активном.
Resource counter / RewardChip
Маленькая пилюля с иконкой ресурса (монета, ключ, человек, токен) и числом. Используется в шапке и в наградах.
SplashScreen
Анимированная заставка: пальмовые силуэты, маска-reveal с персонажами, виньетка, шиммер логотипа Grand City Holder. CSS-модуль _splashScreen_m8nvh_48. Длительность ~1.8 с.
OnboardingSlide + ProgressDots
6 слайдов с тегом-eyebrow «Начало», bg-image (бизнесмен, налоги, стройка, друзья, рейтинг, токены), confetti, заголовок (двухцветный), описание, прогресс-точки и Назад/Далее. CSS _onboarding_1ibhu_1, _slide_12171_1.
CityQuiz widget
Виджет на dashboard: «Викторина · Доступно · 00:00:00». Класс _cityQuiz_19kwk_1. В cooldown-состоянии — _hidden_19kwk_15; разблокируется по таймеру.
CityNamePlate + GenerateBtn
Главный элемент Бюро Эстейторов: gradient-плашка _cityPlate_1488h_149 с пальмами по бокам и «Welcome to <CityName>» внутри. Кнопка-кубик _generateBtn_1488h_334 рерандомизирует имя через loader-точки.
VIP Price Buttons
Класс _btnTokens_ebvf0_192 (TON, gradient blue→purple) и _btnStars_ebvf0_237 (Stars, pink). Используется в апселле VIP-имени и других платных оверлеях.
SpeechBubble + Mascot
Облачко с SVG-фоном _bubbleSvg_1488h_131 + текст _bubbleText_1488h_137. Персонажи (mascot) — full-body PNG/WebP (girl-/man-/businessman/builder и др.). Используются в Бюро Эстейторов, ассистенте, наградной модалке.
SegmentedTabs (рейтинг)
Три pill-вкладки на /rating: «Лига», «Сезонный», «Топ держателей токенов». Активная — light fill, остальные — text-only.
Settings rows (toggle / nav / highlight)
Профиль/Настройки: rows со стрелкой (Гардероб →, Язык приложения → Русский), toggle-rows (Анимация города, Вибрация), highlight-row (accent yellow «Подтвердите свой WEEX UID»). Группы под капс-headerom (ИГРОВОЙ ПРОЦЕСС / ПРИЛОЖЕНИЕ / ДРУГОЕ).
TON Wallet Button
Primary CTA в профиле: «Подключить TON Кошелек», blue gradient + diamond-icon. Отвечает за coupling с tonChunk (TonConnectUI).
SidePanelBadge (НОВОСТИ / LOUISA'S TAROT / CHEST / MARKET)
Угловые мини-панели на dashboard: gradient ribbon-плашка с подписью (LOUISA'S TAROT, НОВОСТИ, VELVET CUBE CHEST, CITY MARKET), count badge для непрочитанных. Лево/право — две стопки (_cityRightPanelsS5_19r7n_98, _cityLeftPanelsS5_).
Дизайн-токены
Извлечены из _diag/*.json (background-image / linear-gradient), 00_home.html (DOM/inline-styles), star-estate-styles.css, asset-manifest.json.
rgb(185, 228, 236)
rgb(74, 199, 212)
linear-gradient(rgb(185,228,236), rgb(74,199,212))
rgb(0, 178, 198)
rgb(0, 180, 199)
/assets/bg-X6CAHPWl.webp
bg-city-miami-new.linear-gradient(135deg, #49a7ff, #53d18a)
Anton
src-assets/fonts/. Используется для крупных заголовков/чисел.Inter, system-ui
420 × 850 CSS px (DPR 2 → 840 × 1700)
12 / 16 / 20 / 24 / 36 px
top env(safe-area-inset-top); bottom 92px tabbar
rgb(255, 172, 62)
linear-gradient(135deg, #7E5BFF, #FF85C8)
linear-gradient(135deg, #1FA9FF, #1F6FFF)
linear-gradient(135deg, #7B61FF, #FF7BD2)
rgb(248, 209, 73)
Правила переиспользования
- Базовый layout —
safeAreaвappLayout; всё ограничено канвой 420 × 850, фон рисуется одним webp. - Постоянные элементы:
TopBarсверху,TabBarснизу. Между ними — скроллируемый контент. Никаких «глобальных» оверлеев, кроме splash и assistant-banner. - Каждый главный экран = один корневой компонент в
screens/*Screen.jsx; экран не знает о навигации, маршрутизация — снаружи (FLOW-state вApp.jsx). - Модалки и bottom-sheet — один универсальный
Modal.jsxс пропомvariant: 'center' | 'bottom-sheet'; никогда не делайте «свою» модалку поверх. - Кнопки — только через
Button.jsx. Если нужна нестандартная вариация, добавляйте проп в компонент, а не локальные стили. - Иконки — только из
Icons.jsx. SVG inline, цвет — currentColor. - Анимации входа:
opacity+xдля слайдов,scale+opacityдля модалок. Длительность 200-300 мс. - Для нового экрана дополнительной механики — оборачивайте в bottom-sheet, если он требует «возврата» в исходный экран; иначе — отдельный screen.
- Все валютные пилюли (монеты/ключи/токены) — один компонент
CoinBadge; не плодите варианты. - Любая «помощь» (туториал/подсказка) — через
AssistantBanner, единственный плавающий элемент в нижней зоне.
Покрытие (захват v2 vs source-only)
Сводка по экранам: 26 экранов показаны визуально (23 live screenshots из мок-сервера + 3 source-derived рендера для отсутствующих lazy-чанков market/customization/quiz). Source-only состояния — только конкретные событийные модалки, которые в local-моке не открываются без эвент-state или специфического dynamic-чанка; все они оставлены в инвентаре с ссылкой на исходный класс/чанк, чтобы не плодить пустые «no image»-плитки.