Рабочий стол
Последние треды
Проверки системы
Треды
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.