[diegosouzapw]

What & why

Standardize the OmniRoute dashboard and the marketing site into one visual identity. Full analysis + plan in design.md (repo root). Base: release/v3.8.29.

The colors were already shared — the site's tokens.css mirrors src/app/globals.css (verified token-by-token). No palette change; this finishes the identity.

Phase 1 — Graph-paper grid wallpaper

Grid tokens + a single fixed body::before behind every screen (z-index:-1, contrast unchanged); drop the opaque bg-bg wrapper that hid it; identity tokens --surface-2/--grad-brand/--radius.

Phase 2 — Primitives adopt the shared scale

Semantic radius utils rounded-card (14px) / rounded-control (9px) via @theme (custom names — defaults untouched). Button primary → --grad-brand (red→violet) + new accent variant; Card/Modal → rounded-card, Card border → border-border; Input/Select → rounded-control.

Phase 3 — Status colors + theme-aware tables

statusColors.ts (STATUS_HEX single source; edgeStyles + TokenHealthBadge repointed). --font-mono token. DataTable → theme-aware via --table-* tokens whose dark values exactly equal the old hardcoded rgba (dark byte-identical) and whose light values fix the previously-buggy always-dark light theme.

Phase 4 — cn() merge + form-control primitives

cn() → twMerge(clsx(...)) (clsx + tailwind-merge added; lock synced via --package-lock-only, node_modules untouched) so a caller's className correctly replaces a primitive's conflicting class. New token-driven Checkbox + Textarea primitives (barrel-exported; additive).

⚠️ Reviewer — please do a visual pass

• Grid in dark + light on a busy screen (providers/logs).
• Light-theme tables (the one behavioral change — they were buggy-dark) + the table secondary-text shift #888→--color-text-muted.
• Button gradient, rounder cards/inputs.
• cn() is now tailwind-merge (global) — low-risk (last-conflicting-wins is what CSS already did) but worth a glance.

Deferred (intentional — see design.md)

• Do NOT blind-sweep remaining hex: ConsoleLogViewer is an always-dark terminal; ReactFlow strokes are SVG. C6 focus-ring reconcile (taste). logTableStyles.ts/legacy Ant rules. Adoption of the 32 raw checkboxes / 41 raw textareas can follow incrementally.

Validation

• guard test → 12/12 pass · typecheck:core clean · eslint clean · pre-commit hooks (docs-sync, any-budget, tracked-artifacts) clean
• npm run build → exit 0; compiled CSS confirms rounded-card/rounded-control/grad-brand/accent-color:var(--color-accent)/grid-line.

🤖 Generated with Claude Code

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[gemini-code-assist]

Code Review

This pull request implements Phase 1 of the OmniRoute design system standardization, introducing a global, theme-aware graph-paper grid wallpaper and adding shared identity tokens to globals.css. It also updates DashboardLayout to allow the grid to show through and adds static guard tests. Feedback on the tests suggests migrating from the native Node.js test runner to Vitest to align with the repository's standard testing framework, and refactoring the CSS rule selector to avoid matching comments.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

The test file currently uses the native Node.js test runner (node:test and node:assert) instead of Vitest, which is the standard testing framework configured for this repository (as indicated by vitest.config.ts). Using Vitest's native APIs (test, expect) ensures consistency across the test suite, proper integration with Vitest's reporter, watch mode, and coverage tools.

Additionally, globalsCss.indexOf("body::before") matches the comment on line 91 of globals.css rather than the actual CSS rule on line 238. Searching for "body::before {" is much more robust and avoids matching comments.

Here is the refactored test suite using Vitest and the robust selector match.

import { test, expect } from "vitest";
import fs from "node:fs";

// Static guards for the shared visual identity (Phase 1: graph-paper grid wallpaper).
// These lock in the cross-product design contract so an accidental edit can't silently
// remove the grid or re-introduce the opaque wrapper that hides it. See design.md.

const globalsCss = fs.readFileSync(
  new URL("../../src/app/globals.css", import.meta.url),
  "utf8"
);
const dashboardLayout = fs.readFileSync(
  new URL("../../src/shared/components/layouts/DashboardLayout.tsx", import.meta.url),
  "utf8"
);

test("globals.css defines the grid wallpaper tokens for both themes", () => {
  // light
  expect(globalsCss).toMatch(/--grid-line:\s*rgba\(0,\s*0,\s*0,\s*0\.045\)/);
  // dark
  expect(globalsCss).toMatch(/--grid-line:\s*rgba\(255,\s*255,\s*255,\s*0\.035\)/);
  // size + alternating-section overlay
  expect(globalsCss).toMatch(/--grid-size:\s*46px/);
  expect(globalsCss).toMatch(/--section-alt:\s*rgba\(0,\s*0,\s*0,\s*0\.022\)/);
  expect(globalsCss).toMatch(/--section-alt:\s*rgba\(255,\s*255,\s*255,\s*0\.018\)/);
});

test("globals.css renders the grid via a body::before fixed layer", () => {
  // The pseudo-element must exist and be the grid renderer.
  // Using "body::before {" avoids matching comments containing "body::before".
  const ruleIndex = globalsCss.indexOf("body::before {");
  expect(ruleIndex).not.toBe(-1);
  const before = globalsCss.slice(ruleIndex);
  expect(before).toMatch(/position:\s*fixed/);
  expect(before).toMatch(/z-index:\s*-1/);
  expect(before).toMatch(/pointer-events:\s*none/);
  expect(before).toMatch(
    /linear-gradient\(to right,\s*var\(--grid-line\) 1px, transparent 1px\)/
  );
  expect(before).toMatch(
    /linear-gradient\(to bottom,\s*var\(--grid-line\) 1px, transparent 1px\)/
  );
  expect(before).toMatch(/background-size:\s*var\(--grid-size\) var\(--grid-size\)/);
});

test("globals.css adds the shared identity tokens", () => {
  expect(globalsCss).toMatch(/--surface-2:\s*#f5f5fa/);
  expect(globalsCss).toMatch(/--surface-2:\s*#1c2230/);
  expect(globalsCss).toMatch(/--radius:\s*14px/);
  expect(globalsCss).toMatch(
    /--grad-brand:\s*linear-gradient\(135deg,\s*var\(--color-primary\),\s*var\(--color-accent-light\)\)/
  );
  // exposed to Tailwind as bg-surface-2 for later phases
  expect(globalsCss).toMatch(/--color-surface-2:\s*var\(--surface-2\)/);
});

test("DashboardLayout wrapper stays transparent so the grid shows through", () => {
  // Regression guard: the outer shell must NOT paint an opaque bg over the body grid.
  expect(dashboardLayout).not.toContain("overflow-hidden bg-bg");
  expect(dashboardLayout).toContain('className="flex h-dvh min-h-0 w-full overflow-hidden"');
});

[github-actions]

CI Coverage Report

• Coverage job: skipped
• PR test policy: success

Coverage artifact was not available for this run.