Рабочий стол
Последние треды
Проверки системы
Треды
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/. Это не просто стайлгайд: ниже галерея реальных экранов мини-аппа в портретном телефонном фрейме, каталог компонентов, дизайн-токены и правила переиспользования для разработки нашего приложения.
_diag/ сделаны диагностической утилитой ДО того, как splash-screen уйдёт (в _diag/*.json класс _splashScreen_m8nvh_48 с z-index 500 присутствует во всех слепках). Поэтому визуально на каждой плитке видна одна и та же заставка с логотипом «Grand City Holder» и парой персонажей, а реальный контент экрана (город / стройка / маркет / профиль / квиз и т.д.) под ней. Идентификация экрана идёт по URL (/city, /city/build, /feed, /market, /profile, /profile/customization, /quiz) и по разделам документации (docs/sections/04-screens.md, 08-tutorial.md). Структура и компонентный состав каждого экрана задокументированы в этой секции; для повторных захватов нужно подождать ~3-4 с (анимация splash) или принудительно скрыть _splashScreen_*.
Галерея экранов
Портретный iPhone-фрейм с Dynamic Island и home-индикатором. Изображения — захваты из разработческого мока (_diag/*.png, 840 × 1700) при css-вьюпорте 420 × 850.
Каталог компонентов
Базовые блоки UI, переиспользуемые между экранами. Имена — из star-estate/src/components/*.jsx и DOM-классов (_diag/*.json).
TabBar
Нижняя панель из 5 вкладок: Друзья · Задания · В город · Рейтинг · Стройка. fixed bottom-0, центральная вкладка визуально приподнята.
TopBar (UserProfile + CoinBadge)
Постоянная шапка: аватар, ник, панель валют (монеты, ключи престижа, люди, токены). Один компонент шапки на все главные вкладки.
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 с персонажами, виньетка, шиммер логотипа. CSS-модуль _m8nvh_.
OnboardingHeader
Шапка слайда онбординга: тег («Начало», «Строительство», ...), заголовок экрана и кнопка «Пропустить» в правом верхнем углу.
QuizCard / AnswerButton
Карточка вопроса с прогрессом сверху, вертикальный список ответов, плашка награды и таймер.
Дизайн-токены
Извлечены из _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
Правила переиспользования
- Базовый 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, единственный плавающий элемент в нижней зоне.
Покрытие (что захвачено vs документировано)
Не все экраны доступны в _diag/: wizard-этапы и часть модалок задокументированы только из исходников. Они показаны как «no-image» плейсхолдеры в галерее.