feat(canvas): reimagine ProcessGraph as FM industrial blueprint
Pulls the actual FM06/flow-master-design-philosophy doctrine
(DESIGN_PHILOSOPHY.md + SYNTHESIS.md + IMPLEMENTATION_STANDARD.md
+ ADR 0001/0002) and rebuilds the canvas to match: 'operations
cockpit', 'industrial, instrumented, accountable'. Light paper
canvas + navy frame + amber accent + 1px rules + square edges +
monospace operational labels.
WHAT CHANGED
- ProcessGraph.tsx rewritten: square 1px navy nodes, mono uppercase
labels, orthogonal step edges (ReactFlow type:'step' → MLHV only),
two-layer Background (8px minor + 64px major navy hairline grid),
doctrinal palette tokens via var(--bp-*).
- BlueprintFrame.tsx (new): top instrument readout strip
(DEF / VERSION / HUB / NODES / EDGES / SRC / MODE / TX), top + left
rulers with 8/64px ticks, navy corner glyph at origin, bottom
status legend.
- index.css: scoped [data-canvas="blueprint"] block (~280 lines)
declaring 11 doctrinal hex tokens once; opacity derivatives go
through CSS color-mix(in srgb, var(--bp-navy) 13%, transparent)
not raw rgba(). No box-shadow on selected node (outline instead).
- LeftRail.tsx: gate toast now names the real endpoint
(POST /api/runtime/transactions/{id}/actions/{submit,save_draft})
on the unsigned-in path too, restoring the convention from the
prior real-mutations pass.
- qa/smoke.mjs updated for the new selectors (.bp-node,
.bp-readout-blueprint). Old guided-tour assertions replaced with
Studio scene assertions. 27/27 PASS.
- qa/smoke_blueprint.mjs (new): 15 assertions covering S1–S3 + S5.
- qa/palette_audit.mjs (new): three checks — doctrinal CSS hex,
no raw rgba() in blueprint scope, no hardcoded color literals in
blueprint TSX. All pass.
ORACLE-REVIEWED
Round 1 FAIL: hardcoded TSX color literals + box-shadow + rgba +
narrow palette audit. Round 2 PASS after fixing all four.
CONTRACT EVIDENCE
- vitest: 5 files, 24 tests, all green
- main smoke: 27/27, 0 console errors
- blueprint smoke: 15/15, 0 console errors
- palette audit: 11 CSS doctrinal hex tokens, 0 raw rgba, 2 TSX files clean
- vite build: green
Confidence: high
Scope-risk: narrow (scoped [data-canvas="blueprint"])
Not-tested: pixel-level visual diff (Oracle could not inspect images
this round; relied on programmatic DOM + path-command assertions)
This commit is contained in:
+285
@@ -834,3 +834,288 @@ textarea.studio-input { resize: vertical; min-height: 64px; }
|
||||
.settings-link { color: var(--primary); text-decoration: underline; }
|
||||
.quick-users { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
|
||||
.quick-users .link-btn { font-family: var(--mono); font-size: 11px; }
|
||||
|
||||
/* =====================================================================
|
||||
INDUSTRIAL BLUEPRINT CANVAS
|
||||
Doctrine: FM06/flow-master-design-philosophy (DESIGN_PHILOSOPHY.md,
|
||||
SYNTHESIS.md). Paper + navy + amber. 1px rules. Square edges.
|
||||
Monospace operational labels. Scoped to [data-canvas="blueprint"]
|
||||
so the rest of the app keeps its existing chrome.
|
||||
===================================================================== */
|
||||
[data-canvas="blueprint"] {
|
||||
--bp-paper: #f5f7fb;
|
||||
--bp-paper-2: #e8edf5;
|
||||
--bp-paper-3: #d5dde9;
|
||||
--bp-navy: #1a2740;
|
||||
--bp-navy-2: #243453;
|
||||
--bp-muted: #4a5b80;
|
||||
--bp-muted-2: #7a8aa8;
|
||||
--bp-amber: #c46a14;
|
||||
--bp-ok: #3d6a2c;
|
||||
--bp-err: #a6342a;
|
||||
--bp-info: #1d6f82;
|
||||
--bp-mono: 'Fira Code', ui-monospace, monospace;
|
||||
/* Derived token aliases for ReactFlow background lines + minimap mask.
|
||||
These keep the navy hairline grid and mask honest about being
|
||||
the doctrine navy ink at low opacity, not a separate color. */
|
||||
--bp-grid-minor: color-mix(in srgb, var(--bp-navy) 13%, transparent);
|
||||
--bp-grid-major: color-mix(in srgb, var(--bp-navy) 33%, transparent);
|
||||
--bp-mask: color-mix(in srgb, var(--bp-navy) 18%, transparent);
|
||||
--bp-amber-soft: color-mix(in srgb, var(--bp-amber) 8%, transparent);
|
||||
--bp-amber-strong: color-mix(in srgb, var(--bp-amber) 16%, transparent);
|
||||
--bp-ok-soft: color-mix(in srgb, var(--bp-ok) 8%, transparent);
|
||||
}
|
||||
|
||||
.bp-frame {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-rows: 32px 1fr 24px;
|
||||
background: var(--bp-paper);
|
||||
border: 1px solid var(--bp-navy);
|
||||
color: var(--bp-navy);
|
||||
font-family: var(--bp-mono);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* ---- top + bottom instrument readouts ---- */
|
||||
.bp-readout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
padding: 0;
|
||||
background: var(--bp-paper);
|
||||
border-bottom: 1px solid var(--bp-navy);
|
||||
font-size: 10.5px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--bp-navy);
|
||||
}
|
||||
.bp-readout-bottom {
|
||||
border-bottom: 0;
|
||||
border-top: 1px solid var(--bp-navy);
|
||||
font-size: 10px;
|
||||
padding: 0 0 0 4px;
|
||||
gap: 16px;
|
||||
color: var(--bp-muted);
|
||||
}
|
||||
.bp-readout-cell {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 0 10px;
|
||||
border-right: 1px solid var(--bp-navy);
|
||||
gap: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.bp-readout-lbl {
|
||||
color: var(--bp-muted);
|
||||
font-size: 9.5px;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
.bp-readout-val {
|
||||
color: var(--bp-navy);
|
||||
font-weight: 700;
|
||||
}
|
||||
.bp-readout-sep {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
border-left: 1px dashed var(--bp-muted-2);
|
||||
margin: 0;
|
||||
}
|
||||
.bp-readout-status .bp-readout-val { padding: 1px 6px; border: 1px solid currentColor; }
|
||||
.bp-readout-live .bp-readout-val { color: var(--bp-ok); background: var(--bp-ok-soft); }
|
||||
.bp-readout-blueprint .bp-readout-val { color: var(--bp-amber); background: var(--bp-amber-soft); }
|
||||
.bp-readout-live { color: var(--bp-ok); }
|
||||
.bp-readout-blueprint { color: var(--bp-amber); }
|
||||
.bp-readout-snapshot .bp-readout-val { color: var(--bp-muted); }
|
||||
.bp-readout-tx .bp-readout-val { color: var(--bp-info); }
|
||||
|
||||
/* ---- canvas surface ---- */
|
||||
.bp-canvas-wrap {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--bp-paper);
|
||||
}
|
||||
.bp-canvas {
|
||||
position: absolute;
|
||||
inset: 18px 0 0 18px;
|
||||
background: var(--bp-paper);
|
||||
}
|
||||
|
||||
/* ---- rulers ---- */
|
||||
.bp-ruler {
|
||||
position: absolute;
|
||||
background: var(--bp-paper-2);
|
||||
color: var(--bp-muted);
|
||||
font-family: var(--bp-mono);
|
||||
font-size: 8.5px;
|
||||
letter-spacing: 0.04em;
|
||||
overflow: hidden;
|
||||
}
|
||||
.bp-ruler-top {
|
||||
top: 0; left: 18px; right: 0;
|
||||
height: 18px;
|
||||
border-bottom: 1px solid var(--bp-navy);
|
||||
}
|
||||
.bp-ruler-left {
|
||||
top: 18px; left: 0; bottom: 0;
|
||||
width: 18px;
|
||||
border-right: 1px solid var(--bp-navy);
|
||||
}
|
||||
.bp-tick {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
background: var(--bp-muted-2);
|
||||
pointer-events: none;
|
||||
}
|
||||
.bp-ruler-top .bp-tick { top: 12px; bottom: 0; }
|
||||
.bp-ruler-top .bp-tick.is-major { top: 6px; background: var(--bp-navy); }
|
||||
.bp-ruler-left .bp-tick {
|
||||
width: auto; height: 1px;
|
||||
left: 12px; right: 0;
|
||||
top: auto;
|
||||
background: var(--bp-muted-2);
|
||||
}
|
||||
.bp-ruler-left .bp-tick.is-major { left: 6px; background: var(--bp-navy); }
|
||||
.bp-tick-label {
|
||||
position: absolute;
|
||||
color: var(--bp-navy);
|
||||
font-weight: 600;
|
||||
}
|
||||
.bp-ruler-top .bp-tick-label { top: -10px; left: 2px; }
|
||||
.bp-ruler-left .bp-tick-label {
|
||||
left: -2px;
|
||||
top: -12px;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: left top;
|
||||
}
|
||||
.bp-corner-tl {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 18px; height: 18px;
|
||||
background: var(--bp-navy);
|
||||
color: var(--bp-paper);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-family: var(--bp-mono);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* ---- legend ---- */
|
||||
.bp-legend { display: inline-flex; align-items: center; gap: 6px; }
|
||||
.bp-swatch { display: inline-block; width: 12px; height: 4px; border: 1px solid var(--bp-navy); }
|
||||
.bp-swatch-done { background: var(--bp-ok); border-color: var(--bp-ok); }
|
||||
.bp-swatch-running { background: var(--bp-amber); border-color: var(--bp-amber); }
|
||||
.bp-swatch-queued { background: var(--bp-info); border-color: var(--bp-info); }
|
||||
.bp-swatch-errored { background: var(--bp-err); border-color: var(--bp-err); }
|
||||
.bp-swatch-idle { background: transparent; border-color: var(--bp-muted-2); border-style: dashed; }
|
||||
|
||||
/* ---- nodes: square, 1px navy stroke, mono uppercase ---- */
|
||||
[data-canvas="blueprint"] .bp-node {
|
||||
width: 256px;
|
||||
background: var(--bp-paper);
|
||||
border: 1px solid var(--bp-navy);
|
||||
border-radius: 0;
|
||||
font-family: var(--bp-mono);
|
||||
color: var(--bp-navy);
|
||||
font-size: 11px;
|
||||
position: relative;
|
||||
}
|
||||
.bp-node-head {
|
||||
display: grid;
|
||||
grid-template-columns: 22px 1fr auto;
|
||||
align-items: center;
|
||||
background: var(--bp-navy);
|
||||
color: var(--bp-paper);
|
||||
padding: 3px 8px 3px 6px;
|
||||
border-bottom: 1px solid var(--bp-navy);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.bp-node-mark { font-size: 12px; line-height: 1; }
|
||||
.bp-node-kind { font-weight: 700; }
|
||||
.bp-node-state { color: var(--bp-paper-2); font-weight: 500; font-size: 9.5px; }
|
||||
.bp-node-body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 10px 10px 9px;
|
||||
border-bottom: 1px solid var(--bp-navy);
|
||||
}
|
||||
.bp-node-name {
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--bp-navy);
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.bp-node-foot {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 3px 8px;
|
||||
background: var(--bp-paper-2);
|
||||
font-size: 9.5px;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--bp-muted);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.bp-node-id { font-weight: 700; color: var(--bp-navy); }
|
||||
.bp-node-gov { display: inline-flex; align-items: center; gap: 4px; color: var(--bp-amber); }
|
||||
|
||||
.bp-node-running { border-color: var(--bp-amber); }
|
||||
.bp-node-running .bp-node-head { background: var(--bp-amber); }
|
||||
.bp-node-errored { border-color: var(--bp-err); }
|
||||
.bp-node-errored .bp-node-head { background: var(--bp-err); }
|
||||
.bp-node-done .bp-node-head { background: var(--bp-ok); }
|
||||
.bp-node-done { border-color: var(--bp-ok); }
|
||||
.bp-node-queued .bp-node-head { background: var(--bp-info); }
|
||||
.bp-node-queued { border-color: var(--bp-info); }
|
||||
.bp-node-idle .bp-node-head { background: var(--bp-muted); }
|
||||
.bp-node-idle { border-color: var(--bp-muted-2); border-style: dashed; }
|
||||
|
||||
.bp-node-sel { outline: 2px solid var(--bp-amber); outline-offset: 0; }
|
||||
.bp-node-sel .bp-node-foot { background: var(--bp-amber-strong); }
|
||||
.bp-handle { background: var(--bp-navy); width: 6px; height: 6px; border-radius: 0; border: 0; }
|
||||
|
||||
/* ---- ReactFlow control overrides under blueprint scope ---- */
|
||||
[data-canvas="blueprint"] .react-flow__controls {
|
||||
background: var(--bp-paper);
|
||||
border: 1px solid var(--bp-navy);
|
||||
border-radius: 0;
|
||||
overflow: hidden;
|
||||
box-shadow: none;
|
||||
}
|
||||
[data-canvas="blueprint"] .react-flow__controls-button {
|
||||
background: var(--bp-paper);
|
||||
border-bottom: 1px solid var(--bp-navy);
|
||||
color: var(--bp-navy);
|
||||
border-radius: 0;
|
||||
}
|
||||
[data-canvas="blueprint"] .react-flow__controls-button:hover {
|
||||
background: var(--bp-paper-2);
|
||||
color: var(--bp-navy);
|
||||
}
|
||||
[data-canvas="blueprint"] .react-flow__controls-button svg { fill: var(--bp-navy); }
|
||||
[data-canvas="blueprint"] .react-flow__minimap,
|
||||
[data-canvas="blueprint"] .bp-minimap {
|
||||
border-radius: 0;
|
||||
background: var(--bp-paper);
|
||||
border: 1px solid var(--bp-navy);
|
||||
}
|
||||
[data-canvas="blueprint"] .react-flow__edge-text { font-family: var(--bp-mono); }
|
||||
[data-canvas="blueprint"] .react-flow__edge.selected .react-flow__edge-path,
|
||||
[data-canvas="blueprint"] .react-flow__edge:focus .react-flow__edge-path { stroke: var(--bp-amber); }
|
||||
[data-canvas="blueprint"] .react-flow__attribution { display: none; }
|
||||
|
||||
/* Override the dotted .mc-main background when blueprint is mounted inside it. */
|
||||
.mc-main:has([data-canvas="blueprint"]) { background: transparent; padding: 8px; }
|
||||
|
||||
Reference in New Issue
Block a user