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)
57 lines
2.1 KiB
JavaScript
57 lines
2.1 KiB
JavaScript
// Doctrine palette audit (S6).
|
|
// 1. Every hex color inside the INDUSTRIAL BLUEPRINT CANVAS CSS section
|
|
// must be one of the doctrinal tokens.
|
|
// 2. Blueprint TSX files must not introduce hardcoded hex/rgb literals —
|
|
// they should reference --bp-* tokens via var(...).
|
|
import { readFileSync } from "node:fs";
|
|
|
|
const DOCTRINE = new Set([
|
|
"#f5f7fb", "#e8edf5", "#d5dde9",
|
|
"#1a2740", "#243453",
|
|
"#4a5b80", "#7a8aa8",
|
|
"#c46a14", "#3d6a2c", "#a6342a", "#1d6f82",
|
|
]);
|
|
|
|
function fail(msg) { console.log("✗", msg); process.exitCode = 1; }
|
|
function pass(msg) { console.log("✓", msg); }
|
|
|
|
const css = readFileSync("src/index.css", "utf8");
|
|
const idx = css.indexOf("INDUSTRIAL BLUEPRINT CANVAS");
|
|
if (idx < 0) { fail("blueprint CSS block not found"); process.exit(1); }
|
|
const cssBlock = css.slice(idx);
|
|
const cssHexes = cssBlock.match(/#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3}/g) || [];
|
|
const cssOffending = cssHexes.filter((h) => !DOCTRINE.has(h.toLowerCase()));
|
|
if (cssOffending.length === 0) {
|
|
pass(`CSS palette: ${cssHexes.length} hex tokens, all doctrinal`);
|
|
} else {
|
|
fail(`CSS non-doctrinal hex tokens: ${cssOffending.join(", ")}`);
|
|
}
|
|
|
|
const cssRgba = cssBlock.match(/rgba?\([^)]*\)/g) || [];
|
|
if (cssRgba.length === 0) {
|
|
pass("CSS has no raw rgba() literals (alpha goes through color-mix tokens)");
|
|
} else {
|
|
fail(`CSS raw rgba() literals: ${cssRgba.join(", ")}`);
|
|
}
|
|
|
|
const tsxFiles = [
|
|
"src/components/ProcessGraph.tsx",
|
|
"src/components/BlueprintFrame.tsx",
|
|
];
|
|
let tsxOffending = 0;
|
|
for (const f of tsxFiles) {
|
|
const src = readFileSync(f, "utf8");
|
|
const hex = (src.match(/#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3}/g) || []).filter(
|
|
(h) => !DOCTRINE.has(h.toLowerCase()),
|
|
);
|
|
const rgba = src.match(/rgba?\(\s*\d+/g) || [];
|
|
if (hex.length || rgba.length) {
|
|
fail(`${f}: hardcoded color literals: hex=${hex.join(",") || "none"} rgba=${rgba.join(",") || "none"}`);
|
|
tsxOffending += hex.length + rgba.length;
|
|
}
|
|
}
|
|
if (tsxOffending === 0) pass(`TSX palette: ${tsxFiles.length} blueprint TSX files clean (no hardcoded color literals)`);
|
|
|
|
if (process.exitCode === 1) console.log("\nPalette audit FAILED");
|
|
else console.log("\nPalette audit PASSED");
|