feat(web): align environment colors to the canon palette

Matches cmds-app/platform, whose ramp changed on 2026-08-12. Green left
test because admins read it as a traffic light - green means "passing"
everywhere else in the app - and the green/red pair it made with live
gave a red-green color blind operator no signal. Live drops red for a
hueless token that inverts by theme, since red read as "stop" and
competed with the danger color on destructive buttons.

Category keys now use the canonical roster tokens (work, test, stage,
live, special). The old keys were all aliases, which infra's rule
against writing aliases forbids in new code.

Author: daniel-miller

web/src/lib/environmentColors.ts

@@ -1,36 +1,55 @@
 // Canonical color legend for environment categories. Mapped by handle or alias
 // so admin pages, status boards, and service rows all paint the same swatch
 // for the same environment.
+//
+// The palette is canon in daniel-miller/infra/README.md ("Environment
+// colors"); cmds-app/platform/web/src/lib/environments.ts carries the same
+// values. Keep this file in step with those, not ahead of them.
+//
+// The ramp says how far a mistake travels, not whether a thing is healthy.
+// Green left it on 2026-08-12 because admins read it as a traffic light: green
+// means "passing" and "healthy" everywhere else in the app, and the green/red
+// pair it made with live gave a red-green color blind operator no signal.
+// Violet work, blue test, amber stage, then live with no hue. Amber sits at
+// the loud end because stage is the one that looks like production without
+// being it.
 
 export const ENVIRONMENT_COLORS = {
-  local: "#4A90D9",
-  development: "#2ECC71",
-  sandbox: "#F5A623",
-  production: "#E74C3C",
-  other: "#5D6472",
+  work: "rgb(150, 122, 214)",
+  test: "rgb(74, 144, 217)",
+  stage: "rgb(245, 166, 35)",
+  // Theme-aware token rather than a literal: a near-black swatch disappears
+  // against a dark card. See --color-env-live in styles/globals.css. Red left
+  // here on 2026-08-12 - it read as "stop", and it competed with the danger
+  // color marking destructive actions on the same screen.
+  live: "var(--color-env-live)",
+  // Cold, echo, and demo share one gray. Unmapped handles land here too: a
+  // token nobody has categorized should look unremarkable rather than borrow a
+  // lifecycle color.
+  special: "rgb(93, 100, 114)",
 } as const;
 
 export type EnvironmentCategory = keyof typeof ENVIRONMENT_COLORS;
 
-const LOCAL_TAGS = new Set(["local", "work"]);
-const DEVELOPMENT_TAGS = new Set(["development", "dev", "test", "qa", "uat"]);
+const WORK_TAGS = new Set(["work", "local"]);
+const TEST_TAGS = new Set(["test", "dev", "development", "qa", "uat"]);
 // "demo" is deliberately absent: since the 2026-07-31 roster rename it names
-// the demonstration environment (gray "other"), not the pre-production gate.
-const SANDBOX_TAGS = new Set(["sandbox", "stage", "staging"]);
-const PRODUCTION_TAGS = new Set(["production", "prod", "live"]);
+// the demonstration environment (gray "special"), not the pre-production gate.
+const STAGE_TAGS = new Set(["stage", "sandbox", "staging"]);
+const LIVE_TAGS = new Set(["live", "prod", "production"]);
 
 export function categorizeEnvironment(
   handle: string,
   aliases: readonly string[] = [],
 ): EnvironmentCategory {
   const tags = [handle, ...aliases].map((t) => t.toLowerCase());
   for (const t of tags) {
-    if (LOCAL_TAGS.has(t)) return "local";
-    if (DEVELOPMENT_TAGS.has(t)) return "development";
-    if (SANDBOX_TAGS.has(t)) return "sandbox";
-    if (PRODUCTION_TAGS.has(t)) return "production";
+    if (WORK_TAGS.has(t)) return "work";
+    if (TEST_TAGS.has(t)) return "test";
+    if (STAGE_TAGS.has(t)) return "stage";
+    if (LIVE_TAGS.has(t)) return "live";
   }
-  return "other";
+  return "special";
 }
 
 export function environmentColor(handle: string, aliases: readonly string[] = []): string {

web/src/styles/globals.css

@@ -29,6 +29,14 @@
 
   --radius-card: 0.75rem;
   --radius-badge: 0.375rem;
+
+  /* Live's roster color, hueless on purpose: production is the ordinary place
+     to be, and the lifecycle ramp spends its color saying "you are not in
+     production". A fixed near-black would disappear against a dark card, so the
+     token inverts by theme instead. Lighter than the gray the derived and
+     independent environments share, so live still reads apart from them.
+     Canon: daniel-miller/infra/README.md, "Environment colors". */
+  --color-env-live: oklch(0.32 0.02 265);
 }
 
 .dark {
@@ -50,6 +58,8 @@
   --color-success: oklch(0.75 0.17 152);
   --color-warning: oklch(0.83 0.17 82);
   --color-danger: oklch(0.68 0.22 27);
+
+  --color-env-live: oklch(0.75 0.015 265);
 }
 
 html,