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:
+20
-17
@@ -46,15 +46,15 @@ logOk("default mode is SNAPSHOT", modeBefore === "SNAPSHOT", `was=${modeBefore}`
|
||||
// Tab strip + graph
|
||||
const tabCount = await page.locator(".mc-tab").count();
|
||||
logOk("tab strip has >= 7 scenarios", tabCount >= 7, `count=${tabCount}`);
|
||||
const reactFlowNodes = await page.locator(".node").count();
|
||||
logOk("graph rendered nodes > 0", reactFlowNodes > 0, `nodes=${reactFlowNodes}`);
|
||||
const reactFlowNodes = await page.locator(".bp-node").count();
|
||||
logOk("graph rendered blueprint nodes > 0", reactFlowNodes > 0, `nodes=${reactFlowNodes}`);
|
||||
|
||||
// Switch to AR blueprint
|
||||
await page.locator(".mc-tab", { hasText: "Accounts Receivable" }).click();
|
||||
await page.waitForTimeout(600);
|
||||
await page.screenshot({ path: `${OUT}/03-mission-ar.png` });
|
||||
logOk("AR scenario active", (await page.locator(".mc-hero-title").innerText()).toLowerCase().includes("refund"));
|
||||
logOk("AR shows BLUEPRINT badge (not SYNTHETIC)", await page.locator(".graph-overlay .tag-syn", { hasText: "BLUEPRINT" }).isVisible());
|
||||
logOk("AR shows BLUEPRINT readout (not SYNTHETIC)", await page.locator(".bp-readout-blueprint .bp-readout-val", { hasText: "BLUEPRINT" }).isVisible());
|
||||
|
||||
// Queue card → inspector update
|
||||
const qCards = await page.locator(".qcard").count();
|
||||
@@ -82,7 +82,12 @@ if (approveCount > 0) {
|
||||
await approveBtn.click();
|
||||
await page.waitForTimeout(300);
|
||||
const toastTxt = (await page.locator(".toast-msg").first().innerText()).trim();
|
||||
logOk("preview action fires toast", /preview[- ]only/i.test(toastTxt), `toast="${toastTxt.slice(0, 80)}"`);
|
||||
// After the real-mutations pass, the toast now names the LIVE-mode gate and the real endpoint.
|
||||
logOk(
|
||||
"action toast names live-mode gate + real endpoint",
|
||||
/(LIVE mode|preview-only|\/api\/runtime\/transactions)/i.test(toastTxt),
|
||||
`toast="${toastTxt.slice(0, 100)}"`,
|
||||
);
|
||||
} else {
|
||||
logOk("approve button preview-marker present", await page.locator(".preview-marker").first().isVisible());
|
||||
}
|
||||
@@ -95,24 +100,22 @@ await page.screenshot({ path: `${OUT}/05-command-palette.png` });
|
||||
logOk("command palette opens with ⌘K", await page.locator(".cmd").isVisible());
|
||||
logOk("Data mode group present in palette", await page.locator(".cmd").getByText(/data mode/i).isVisible());
|
||||
|
||||
await page.locator('.cmd [cmdk-input]').fill("tour");
|
||||
// Studio command appears in palette (replaces the deprecated tour command)
|
||||
await page.locator('.cmd [cmdk-input]').fill("studio");
|
||||
await page.waitForTimeout(150);
|
||||
logOk("tour command appears", await page.locator(".cmd").getByText(/start guided tour/i).isVisible());
|
||||
logOk("studio command appears in palette", await page.locator(".cmd").getByText(/process studio/i).isVisible());
|
||||
await page.keyboard.press("Escape");
|
||||
await page.waitForTimeout(100);
|
||||
|
||||
// Start tour
|
||||
await page.locator(".link-btn", { hasText: "Tour" }).click();
|
||||
await page.waitForSelector(".tour-card");
|
||||
// Studio scene renders + shows JSON preview + node editor
|
||||
await page.locator(".tab", { hasText: "Studio" }).click();
|
||||
await page.waitForSelector(".studio");
|
||||
await page.waitForTimeout(250);
|
||||
await page.screenshot({ path: `${OUT}/06-tour.png` });
|
||||
logOk("tour card renders", await page.locator(".tour-card").isVisible());
|
||||
const firstTourCombined = ((await page.locator(".tour-title").first().innerText()) + " " + (await page.locator(".tour-body").first().innerText())).toLowerCase();
|
||||
logOk("AR tour uses positive 'industry blueprint' framing", /industry blueprint/i.test(firstTourCombined), `text~="${firstTourCombined.slice(0, 100)}"`);
|
||||
await page.keyboard.press("ArrowRight");
|
||||
await page.waitForTimeout(450);
|
||||
logOk("tour advances", (await page.locator(".tour-title").first().innerText()).length > 0);
|
||||
await page.keyboard.press("Escape");
|
||||
await page.screenshot({ path: `${OUT}/06-studio.png` });
|
||||
logOk("studio scene renders", await page.locator(".studio-panel").count() >= 4);
|
||||
logOk("studio JSON preview shows config payload", /\"nodes\"/.test(await page.locator(".raw-json").first().innerText()));
|
||||
await page.locator(".tab", { hasText: "Mission" }).click();
|
||||
await page.waitForSelector(".bp-frame");
|
||||
|
||||
// Live-mode toggle (real network call to demo.flow-master.ai via vite proxy)
|
||||
const networkCalls = [];
|
||||
|
||||
Reference in New Issue
Block a user