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)

qa/palette_audit.mjs

@@ -0,0 +1,56 @@
+// 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");

qa/smoke.mjs

@@ -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 = [];

qa/smoke_blueprint.mjs

@@ -0,0 +1,83 @@
+// Blueprint canvas smoke covering S1, S2, S3 from the canvas-reimagine
+// scenario contract. Run after `vite dev` is up at 127.0.0.1:5173.
+import { chromium } from "playwright";
+import { mkdirSync } from "node:fs";
+
+const URL = process.env.URL || "http://127.0.0.1:5173";
+const OUT = "qa/screenshots";
+mkdirSync(OUT, { recursive: true });
+
+function ok(label, cond, detail = "") {
+  console.log(`${cond ? "✓" : "✗"} ${label}${detail ? " · " + detail : ""}`);
+  if (!cond) process.exitCode = 1;
+}
+
+const b = await chromium.launch({ headless: true });
+const ctx = await b.newContext({ viewport: { width: 1440, height: 900 } });
+const p = await ctx.newPage();
+const errors = [];
+p.on("pageerror", (e) => errors.push(`pageerror ${e.message}`));
+p.on("console", (m) => { if (m.type() === "error") errors.push(`console.error ${m.text().slice(0, 200)}`); });
+
+await p.goto(URL, { waitUntil: "networkidle" });
+await p.locator(".sc-card").first().click();
+await p.waitForSelector(".mc");
+await p.waitForTimeout(800);
+await p.screenshot({ path: `${OUT}/blueprint-canvas.png`, fullPage: false });
+
+// S1: paper background + navy hairline grid + square nodes
+const frame = p.locator(".bp-frame").first();
+ok("S1.a blueprint frame mounted", await frame.isVisible());
+const nodeStyle = await p.locator(".bp-node").first().evaluate((el) => {
+  const cs = getComputedStyle(el);
+  return {
+    radius: cs.borderTopLeftRadius,
+    borderColor: cs.borderTopColor,
+    fontFamily: cs.fontFamily,
+  };
+});
+ok("S1.b node has zero border radius", nodeStyle.radius === "0px", `was ${nodeStyle.radius}`);
+ok("S1.c node uses monospace font", /mono|Fira Code/i.test(nodeStyle.fontFamily), `font=${nodeStyle.fontFamily}`);
+const canvasBg = await p.locator(".bp-canvas-wrap").first().evaluate((el) => getComputedStyle(el).backgroundColor);
+ok("S1.d canvas background is paper #f5f7fb", canvasBg === "rgb(245, 247, 251)", `was ${canvasBg}`);
+const gridLines = await p.locator(".react-flow__background").count();
+ok("S1.e two grid backgrounds rendered (8px minor + 64px major)", gridLines >= 2, `count=${gridLines}`);
+
+// S2: edges use step (orthogonal) — path commands are only M/L/H/V
+const pathD = await p.locator(".react-flow__edge-path").first().evaluate((el) => el.getAttribute("d") || "");
+const hasCurve = /[CQcq]/.test(pathD);
+ok("S2 edges are orthogonal (no curve commands)", !hasCurve, `d=${pathD.slice(0, 60)}…`);
+
+// S3: ruler chrome + corner readout
+ok("S3.a top ruler present", await p.locator(".bp-ruler-top").isVisible());
+ok("S3.b left ruler present", await p.locator(".bp-ruler-left").isVisible());
+const tickCount = await p.locator(".bp-tick.is-major").count();
+ok("S3.c major ticks rendered (>= 4)", tickCount >= 4, `major ticks=${tickCount}`);
+ok("S3.d corner glyph present", await p.locator(".bp-corner-tl").isVisible());
+const readouts = await p.locator(".bp-readout-top .bp-readout-cell").count();
+ok("S3.e top readout has >= 6 cells", readouts >= 6, `cells=${readouts}`);
+ok("S3.f legend swatches present", await p.locator(".bp-swatch").count() >= 5);
+
+// S5: Studio + Settings + Console still render
+await p.locator(".tab", { hasText: "Studio" }).click();
+await p.waitForSelector(".studio");
+ok("S5.a studio renders", await p.locator(".studio-panel").count() >= 4);
+await p.locator(".tab", { hasText: "Settings" }).click();
+await p.waitForSelector(".settings");
+ok("S5.b settings renders", await p.locator(".quick-users .link-btn").count() >= 1);
+await p.locator(".tab", { hasText: "Mission" }).click();
+await p.waitForSelector(".bp-frame");
+await p.locator(".link-btn", { hasText: "Console" }).first().click();
+await p.waitForSelector(".console");
+ok("S5.c console renders", await p.locator(".console").isVisible());
+
+// S6 cleanup: take a final picture of the canvas
+await p.locator(".link-btn", { hasText: "Console" }).first().click();
+await p.waitForTimeout(300);
+await p.screenshot({ path: `${OUT}/blueprint-canvas-clean.png`, fullPage: false });
+
+console.log(`\nconsole errors: ${errors.length}`);
+errors.slice(0, 5).forEach((e) => console.log("  -", e));
+if (errors.length > 0) process.exitCode = 1;
+
+await b.close();