feat(theme): promote industrial blueprint to the whole shell
Every scene now reads as the same FM doctrine: paper canvas + navy
frame + amber accent, 1px hairlines, square edges, monospace
uppercase labels, no glass, no shadows, no gradients.
WHAT CHANGED
- src/index.css rewritten end-to-end. Doctrinal hex tokens declared
at :root, legacy --bg/--surface/--text/--primary/--border aliases
repointed at doctrine values so existing component classes inherit
the blueprint palette without per-component churn. Global
* { border-radius: 0 } + box-shadow strip-out. All low-opacity
tints via color-mix(in srgb, var(--bp-navy) X%, transparent) so no
rgba() literals survive.
- Topbar redone as a 44px instrument strip: navy brand-lock with
amber mark, uppercase mono tabs, amber-on-paper selected tab,
square link buttons, mode pill with currentColor border.
- Mission Control hero + scenario tab strip + KPI cards retoken
with amber underline on selected.
- Left rail: 1px-bordered KPI grid, queue cards stack as a single
bordered list, agent supervision actions span the full width.
- Inspector: tabbed nav with amber selected, hairline-separated
fields, square rule + run + evidence cards.
- Command palette: paper bg, amber-bordered selected item, mono
caps headings.
- Live API console: paper drawer, mono call rows, amber filter chip,
color-tokenised METHOD_COLOR map.
- Toaster: left-border accent on paper surface.
- Telemetry: navy gauges, mono row, square tick.
- Studio + Settings: shared studio-grid layout — paper panels in a
1px navy grid with no margins between, mono inputs.
- Run History: mono table rows with amber selected filter chip.
- Landing: mono hero, square brand mark, stats strip as one
bordered row, scenario cards in a 1px grid (no glow, no shadow,
no gradient).
- Family accents in synthetic.ts and buildScenarios.ts retoken to
doctrine hex. src/scenarios.json snapshot patched in place.
- Console.tsx METHOD_COLOR map → var(--bp-muted/info/amber/err).
AUDIT
- qa/palette_audit.mjs upgraded: scans 31 source files (.ts/.tsx/
.json + index.css), catches rgb()/rgba()/hsl()/hsla() literals,
and refuses named CSS colors (white/red/blue/...) as background/
color/fill/stroke/border values. Hex regex uses (?![0-9a-fA-F])
lookahead so deploy-id text like '#d3f1a' is not a false positive.
Result: 0 non-doctrinal literals anywhere in src/.
- qa/smoke.mjs + qa/smoke_blueprint.mjs hasText matches converted
to case-insensitive regex because the doctrine uppercases every
user-visible label via text-transform: uppercase.
- qa/snap_all_scenes.mjs captures 9 fresh 1440x900 screenshots
in qa/screenshots/v4/ (landing, mission procurement, mission AR
blueprint, inspector raw, command palette, studio, settings,
run history, mission live with console).
VERIFY
- tsc -b clean
- vite build green (CSS 41 KB / 8 KB gz, JS 851 KB / 230 KB gz)
- vitest 5 files / 24 tests green
- main smoke 27/27, 0 console errors
- blueprint smoke 15/15, 0 console errors
- palette audit clean (31 files)
ORACLE-REVIEWED
Round 1 PASS with <promise>VERIFIED</promise>. Two non-blocking
audit hardening notes landed in this same commit: scan JSON,
catch rgb/hsl/named CSS colors.
Confidence: high
Scope-risk: moderate (theme sweep, all scenes touched)
Not-tested: pixel-level visual diff vs prior theme (Oracle could
not inspect images this round; relied on programmatic checks)
This commit is contained in:
+15
-15
@@ -50,11 +50,11 @@ 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.locator(".mc-tab", { hasText: /accounts receivable/i }).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 readout (not SYNTHETIC)", await page.locator(".bp-readout-blueprint .bp-readout-val", { hasText: "BLUEPRINT" }).isVisible());
|
||||
logOk("AR shows BLUEPRINT readout (not SYNTHETIC)", await page.locator(".bp-readout-blueprint .bp-readout-val", { hasText: /blueprint/i }).isVisible());
|
||||
|
||||
// Queue card → inspector update
|
||||
const qCards = await page.locator(".qcard").count();
|
||||
@@ -65,18 +65,18 @@ if (qCards > 0) {
|
||||
}
|
||||
|
||||
// Inspector tab switching
|
||||
await page.locator(".itab", { hasText: "Evidence" }).click();
|
||||
await page.locator(".itab", { hasText: /evidence/i }).click();
|
||||
await page.waitForTimeout(150);
|
||||
logOk("evidence tab opens", await page.locator(".evt, .empty").first().isVisible());
|
||||
await page.locator(".itab", { hasText: "Raw" }).click();
|
||||
await page.locator(".itab", { hasText: /^raw/i }).click();
|
||||
await page.waitForTimeout(150);
|
||||
logOk("raw tab opens", await page.locator(".raw-json").isVisible());
|
||||
await page.screenshot({ path: `${OUT}/04-inspector-raw.png` });
|
||||
|
||||
// Preview-only action toast
|
||||
await page.locator(".itab", { hasText: "Overview" }).click();
|
||||
await page.locator(".itab", { hasText: /overview/i }).click();
|
||||
await page.waitForTimeout(150);
|
||||
const approveBtn = page.locator(".i-actions .btn", { hasText: "Approve" }).first();
|
||||
const approveBtn = page.locator(".i-actions .btn", { hasText: /approve/i }).first();
|
||||
const approveCount = await approveBtn.count();
|
||||
if (approveCount > 0) {
|
||||
await approveBtn.click();
|
||||
@@ -108,13 +108,13 @@ await page.keyboard.press("Escape");
|
||||
await page.waitForTimeout(100);
|
||||
|
||||
// Studio scene renders + shows JSON preview + node editor
|
||||
await page.locator(".tab", { hasText: "Studio" }).click();
|
||||
await page.locator(".tab", { hasText: /studio/i }).click();
|
||||
await page.waitForSelector(".studio");
|
||||
await page.waitForTimeout(250);
|
||||
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.locator(".tab", { hasText: /mission/i }).click();
|
||||
await page.waitForSelector(".bp-frame");
|
||||
|
||||
// Live-mode toggle (real network call to demo.flow-master.ai via vite proxy)
|
||||
@@ -132,28 +132,28 @@ logOk("toggle to LIVE mode resolves and updates pill", liveOk);
|
||||
if (liveOk) {
|
||||
await page.waitForTimeout(400);
|
||||
await page.screenshot({ path: `${OUT}/09-live-mode.png` });
|
||||
logOk("Refresh button appears in live mode", await page.locator(".link-btn", { hasText: "Refresh" }).isVisible());
|
||||
logOk("Refresh button appears in live mode", await page.locator(".link-btn", { hasText: /refresh/i }).isVisible());
|
||||
|
||||
// Refresh must trigger ANOTHER /api/ea2/work-items request (Oracle round 2 fix).
|
||||
// Wait for the Refresh button to become enabled (initial fetch may still be settling).
|
||||
await page.locator(".link-btn", { hasText: "Refresh" }).waitFor({ state: "visible" });
|
||||
await page.locator(".link-btn", { hasText: /refresh/i }).waitFor({ state: "visible" });
|
||||
await page.waitForFunction(
|
||||
() => {
|
||||
const btns = Array.from(document.querySelectorAll(".link-btn"));
|
||||
const btn = btns.find((b) => (b.textContent || "").includes("Refresh"));
|
||||
const btn = btns.find((b) => /refresh/i.test(b.textContent || ""));
|
||||
return btn && !btn.disabled;
|
||||
},
|
||||
{ timeout: 10000 },
|
||||
);
|
||||
const before = networkCalls.length;
|
||||
await page.locator(".link-btn", { hasText: "Refresh" }).click();
|
||||
await page.locator(".link-btn", { hasText: /refresh/i }).click();
|
||||
await page.waitForTimeout(2500);
|
||||
logOk("Refresh re-fetches /api/ea2/work-items", networkCalls.length > before,
|
||||
`before=${before} after=${networkCalls.length}`);
|
||||
}
|
||||
|
||||
// LeftRail Confirm button: toast must name /api/runtime/transactions/{id}/actions
|
||||
await page.locator(".mc-tab", { hasText: "Accounts Receivable" }).click();
|
||||
await page.locator(".mc-tab", { hasText: /accounts receivable/i }).click();
|
||||
await page.waitForTimeout(400);
|
||||
const confirmBtn = page.locator(".agent-acts .btn-primary").first();
|
||||
if (await confirmBtn.count() > 0) {
|
||||
@@ -171,13 +171,13 @@ logOk("telemetry has no hardcoded 97.4%", !/97\.4%/.test(tel), `tel="${tel.repla
|
||||
logOk("telemetry labels SLA as derived", /derived/i.test(tel));
|
||||
|
||||
// Run history scene
|
||||
await page.locator(".tab", { hasText: "Runs" }).click();
|
||||
await page.locator(".tab", { hasText: /runs/i }).click();
|
||||
await page.waitForSelector(".rh");
|
||||
await page.waitForTimeout(250);
|
||||
await page.screenshot({ path: `${OUT}/07-run-history.png` });
|
||||
const rhRows = await page.locator(".rh-row").count();
|
||||
logOk("run-history rows present", rhRows > 0, `rows=${rhRows}`);
|
||||
await page.locator(".rh-chip", { hasText: "running" }).click();
|
||||
await page.locator(".rh-chip", { hasText: /^running/i }).click();
|
||||
await page.waitForTimeout(200);
|
||||
const rhRunning = await page.locator(".rh-row").count();
|
||||
logOk("run-history filter shrinks list", rhRunning > 0 && rhRunning <= rhRows, `running=${rhRunning} of ${rhRows}`);
|
||||
|
||||
Reference in New Issue
Block a user