From 2f28655ab4c30c228f4766fa2f1761ddca3072d2 Mon Sep 17 00:00:00 2001
From: RomeoCavazza <romeo.cavazza@gmail.com>
Date: Mon, 20 Jul 2026 09:57:13 +0200
Subject: [PATCH 1/4] fix(web): expose semantic app navigation

---
 client-web/components/layout/BottomBar.tsx    | 13 +++++--
 client-web/components/layout/Sidebar.tsx      | 33 ++++++++++-------
 .../components/layout/navigation.test.ts      | 31 +++++++++++++++-
 client-web/components/layout/navigation.ts    | 35 ++++++++++++++++---
 client-web/messages/en.json                   |  4 ++-
 client-web/messages/fr.json                   |  4 ++-
 tooling/e2e/layout-contract.spec.ts           | 32 +++++++++++++++++
 7 files changed, 129 insertions(+), 23 deletions(-)

diff --git a/client-web/components/layout/BottomBar.tsx b/client-web/components/layout/BottomBar.tsx
index 8f96b0a..496c5b9 100644
--- a/client-web/components/layout/BottomBar.tsx
+++ b/client-web/components/layout/BottomBar.tsx
@@ -4,7 +4,11 @@ import React from "react";
 import { Link, usePathname } from "@/i18n/routing";
 import { cn } from "@/lib/utils";
 import { useTranslations } from "next-intl";
-import { primaryNavigationItems, settingsNavigationItem } from "./navigation";
+import {
+  isNavigationItemActive,
+  primaryNavigationItems,
+  settingsNavigationItem,
+} from "./navigation";
 import { useTeamScope } from "@/components/teams/TeamScope";
 
 export function BottomBar({ className }: { className?: string }) {
@@ -15,24 +19,27 @@ export function BottomBar({ className }: { className?: string }) {
 
   return (
     <nav
+      aria-label={t("mobileNavigation")}
       className={cn(
         "glass fixed right-0 bottom-0 left-0 z-50 flex h-16 items-center justify-around px-2",
         className,
       )}
     >
       {links.map((link) => {
-        const isActive = pathname === link.href || pathname.startsWith(link.href + "/");
+        const isActive = isNavigationItemActive(pathname, link);
 
         return (
           <Link
             key={link.labelKey}
             href={link.href}
+            aria-current={isActive ? "page" : undefined}
+            data-app-navigation-item="true"
             className={cn(
               "flex h-full min-w-0 flex-1 flex-col items-center justify-center gap-1 transition-colors",
               isActive ? "text-gold" : "text-muted hover:text-gold",
             )}
           >
-            <link.icon className="h-5 w-5" />
+            <link.icon className="h-5 w-5" aria-hidden="true" />
             <span className="w-full truncate px-0.5 text-center text-[10px] font-medium">
               {t(link.labelKey)}
             </span>
diff --git a/client-web/components/layout/Sidebar.tsx b/client-web/components/layout/Sidebar.tsx
index 8e1d9c0..bc8584c 100644
--- a/client-web/components/layout/Sidebar.tsx
+++ b/client-web/components/layout/Sidebar.tsx
@@ -7,10 +7,13 @@ import Image from "next/image";
 import { cn } from "@/lib/utils";
 import { useAuthStore } from "@/store/auth";
 import { useTranslations } from "next-intl";
-import { primaryNavigationItems } from "./navigation";
+import {
+  isNavigationItemActive,
+  primaryNavigationItems,
+  settingsNavigationItem,
+} from "./navigation";
 import { IconButton } from "@/components/ui/Button";
 import { useTeamScope } from "@/components/teams/TeamScope";
-import { parseTeamPath } from "@/lib/team-routing";
 
 export function Sidebar({ className }: { className?: string }) {
   const pathname = usePathname();
@@ -18,9 +21,7 @@ export function Sidebar({ className }: { className?: string }) {
   const user = useAuthStore((state) => state.user);
   const { activeTeam, hrefFor } = useTeamScope();
   const navigationItems = primaryNavigationItems(activeTeam?.team_id);
-  const teamRoute = parseTeamPath(pathname);
-
-  const isSettingsActive = pathname === "/settings" || pathname.startsWith("/settings/");
+  const isSettingsActive = isNavigationItemActive(pathname, settingsNavigationItem);
 
   return (
     <aside className={cn("glass flex w-80 flex-col", className)}>
@@ -46,22 +47,25 @@ export function Sidebar({ className }: { className?: string }) {
         />
       </Link>
 
-      <nav className="flex-1 space-y-2 overflow-y-auto px-4 py-6">
+      <nav
+        aria-label={t("primaryNavigation")}
+        className="flex-1 space-y-2 overflow-y-auto px-4 py-6"
+      >
         {navigationItems.map((link) => {
-          const isActive = teamRoute
-            ? link.activeSections.some((section) => section === teamRoute.section)
-            : pathname === link.href || pathname.startsWith(link.href + "/");
+          const isActive = isNavigationItemActive(pathname, link);
 
           return (
             <Link
               key={link.labelKey}
               href={link.href}
+              aria-current={isActive ? "page" : undefined}
+              data-app-navigation-item="true"
               className={cn(
                 "group flex items-center gap-4 px-4 py-3 text-lg transition-colors",
                 isActive ? "text-gold font-medium" : "text-muted hover:text-gold",
               )}
             >
-              <link.icon className="h-6 w-6" />
+              <link.icon className="h-6 w-6" aria-hidden="true" />
               <span>{t(link.labelKey)}</span>
             </Link>
           );
@@ -72,12 +76,15 @@ export function Sidebar({ className }: { className?: string }) {
         <Link
           href="/settings"
           title={t("settings")}
+          aria-label={t("settings")}
+          aria-current={isSettingsActive ? "page" : undefined}
+          data-app-navigation-item="true"
           className={cn(
             "flex min-w-0 flex-1 items-center gap-4 px-2 transition-colors",
             isSettingsActive ? "text-gold" : "text-text hover:text-gold",
           )}
         >
-          <CircleUser className="h-9 w-9 shrink-0" strokeWidth={1.5} />
+          <CircleUser className="h-9 w-9 shrink-0" strokeWidth={1.5} aria-hidden="true" />
           <div className="flex min-w-0 flex-1 flex-col">
             <span className="truncate text-lg font-medium capitalize">
               {user?.email?.split("@")[0] || t("operator")}
@@ -86,7 +93,7 @@ export function Sidebar({ className }: { className?: string }) {
               {activeTeam?.role || t("noStation")}
             </span>
           </div>
-          <Settings className="h-5 w-5 shrink-0" />
+          <Settings className="h-5 w-5 shrink-0" aria-hidden="true" />
         </Link>
         <IconButton
           label={t("logout")}
@@ -104,7 +111,7 @@ export function Sidebar({ className }: { className?: string }) {
           className="ml-4"
           title={t("logout")}
         >
-          <LogOut className="h-5 w-5" />
+          <LogOut className="h-5 w-5" aria-hidden="true" />
         </IconButton>
       </div>
     </aside>
diff --git a/client-web/components/layout/navigation.test.ts b/client-web/components/layout/navigation.test.ts
index 5a02b24..6da2923 100644
--- a/client-web/components/layout/navigation.test.ts
+++ b/client-web/components/layout/navigation.test.ts
@@ -1,5 +1,9 @@
 import { describe, expect, it } from "vitest";
-import { primaryNavigationItems } from "./navigation";
+import {
+  isNavigationItemActive,
+  primaryNavigationItems,
+  settingsNavigationItem,
+} from "./navigation";
 
 describe("primaryNavigationItems", () => {
   it("does not invent an Incidents link before a Team is known", () => {
@@ -17,3 +21,28 @@ describe("primaryNavigationItems", () => {
     expect(new Set(items.map((item) => item.labelKey)).size).toBe(items.length);
   });
 });
+
+describe("isNavigationItemActive", () => {
+  const [incidents, releases, teams] = primaryNavigationItems("team-1");
+
+  it("keeps Team resource details attached to their collection", () => {
+    expect(isNavigationItemActive("/teams/team-1/incidents/incident-1", incidents)).toBe(true);
+    expect(isNavigationItemActive("/teams/team-1/incidents/incident-1", releases)).toBe(false);
+    expect(isNavigationItemActive("/teams/team-1/releases/release-1", releases)).toBe(true);
+  });
+
+  it("groups the Team workspace sections under Teams", () => {
+    for (const section of ["overview", "members", "automations", "settings"]) {
+      expect(isNavigationItemActive(`/teams/team-1/${section}`, teams)).toBe(true);
+    }
+
+    expect(isNavigationItemActive("/teams", teams)).toBe(true);
+    expect(isNavigationItemActive("/teams/team-1/incidents", teams)).toBe(false);
+  });
+
+  it("keeps account settings distinct from Team settings", () => {
+    expect(isNavigationItemActive("/settings", settingsNavigationItem)).toBe(true);
+    expect(isNavigationItemActive("/settings/connectors", settingsNavigationItem)).toBe(true);
+    expect(isNavigationItemActive("/teams/team-1/settings", settingsNavigationItem)).toBe(false);
+  });
+});
diff --git a/client-web/components/layout/navigation.ts b/client-web/components/layout/navigation.ts
index 363c2a2..6a971ec 100644
--- a/client-web/components/layout/navigation.ts
+++ b/client-web/components/layout/navigation.ts
@@ -1,5 +1,25 @@
 import { Rocket, Settings, ShieldAlert, Users } from "lucide-react";
-import { teamPath } from "@/lib/team-routing";
+import { parseTeamPath, teamPath, type TeamSection } from "@/lib/team-routing";
+
+type NavigationItem = {
+  href: string;
+  activeSections?: readonly TeamSection[];
+  activePaths?: readonly string[];
+};
+
+/**
+ * Resolve the current product area once for every navigation surface.
+ *
+ * Team detail routes stay attached to their collection, while exact non-Team
+ * paths (the Team directory and account settings) can opt into a stable root.
+ */
+export function isNavigationItemActive(pathname: string, item: NavigationItem) {
+  const teamRoute = parseTeamPath(pathname);
+  if (teamRoute) return item.activeSections?.includes(teamRoute.section) ?? false;
+
+  const activePaths = item.activePaths ?? [item.href];
+  return activePaths.some((path) => pathname === path || pathname.startsWith(`${path}/`));
+}
 
 export function primaryNavigationItems(teamId?: string) {
   const teamItems = teamId
@@ -8,13 +28,13 @@ export function primaryNavigationItems(teamId?: string) {
           href: teamPath(teamId, "incidents"),
           icon: ShieldAlert,
           labelKey: "incidents" as const,
-          activeSections: ["incidents"] as const,
+          activeSections: ["incidents"] satisfies readonly TeamSection[],
         },
         {
           href: teamPath(teamId, "releases"),
           icon: Rocket,
           labelKey: "releases" as const,
-          activeSections: ["releases"] as const,
+          activeSections: ["releases"] satisfies readonly TeamSection[],
         },
       ]
     : [];
@@ -25,7 +45,13 @@ export function primaryNavigationItems(teamId?: string) {
       href: teamId ? teamPath(teamId, "overview") : "/teams",
       icon: Users,
       labelKey: "teams" as const,
-      activeSections: ["overview", "members", "automations", "settings"] as const,
+      activeSections: [
+        "overview",
+        "members",
+        "automations",
+        "settings",
+      ] satisfies readonly TeamSection[],
+      activePaths: ["/teams"],
     },
   ];
 }
@@ -34,4 +60,5 @@ export const settingsNavigationItem = {
   href: "/settings",
   icon: Settings,
   labelKey: "settings",
+  activePaths: ["/settings"],
 } as const;
diff --git a/client-web/messages/en.json b/client-web/messages/en.json
index 6274503..737c7df 100644
--- a/client-web/messages/en.json
+++ b/client-web/messages/en.json
@@ -24,7 +24,9 @@
     "logout": "Log out",
     "operator": "Operator",
     "noStation": "No Organization",
-    "releases": "Releases"
+    "releases": "Releases",
+    "primaryNavigation": "Primary navigation",
+    "mobileNavigation": "Mobile navigation"
   },
   "TeamSwitcher": {
     "label": "Current team",
diff --git a/client-web/messages/fr.json b/client-web/messages/fr.json
index 46b0781..8985ef3 100644
--- a/client-web/messages/fr.json
+++ b/client-web/messages/fr.json
@@ -24,7 +24,9 @@
     "logout": "Déconnexion",
     "operator": "Opérateur",
     "noStation": "Aucune organisation",
-    "releases": "Releases"
+    "releases": "Releases",
+    "primaryNavigation": "Navigation principale",
+    "mobileNavigation": "Navigation mobile"
   },
   "TeamSwitcher": {
     "label": "Équipe active",
diff --git a/tooling/e2e/layout-contract.spec.ts b/tooling/e2e/layout-contract.spec.ts
index eb1e5b8..cee8f84 100644
--- a/tooling/e2e/layout-contract.spec.ts
+++ b/tooling/e2e/layout-contract.spec.ts
@@ -90,6 +90,38 @@ test("root resolves to the canonical incident queue", async ({ page }) => {
   await expect(page).toHaveURL(new RegExp(`/en/teams/${TEAM_ID}/incidents$`));
 });
 
+test("desktop and mobile navigation expose one current product area", async ({ page }) => {
+  test.setTimeout(90_000);
+  await login(page);
+
+  const navigationCases = [
+    { path: `/en/teams/${TEAM_ID}/incidents/${INCIDENT_ID}`, current: "Incidents" },
+    { path: `/en/teams/${TEAM_ID}/releases/${RELEASE_ID}`, current: "Releases" },
+    { path: `/en/teams/${TEAM_ID}/members`, current: "Teams" },
+    { path: "/en/teams", current: "Teams" },
+    { path: "/en/settings", current: "Settings" },
+  ];
+
+  for (const viewportWidth of [320, 1280]) {
+    await page.setViewportSize({ width: viewportWidth, height: 900 });
+    const navigationName = viewportWidth < 768 ? "Mobile navigation" : "Primary navigation";
+
+    for (const navigationCase of navigationCases) {
+      await test.step(`${navigationCase.current} at ${viewportWidth}px`, async () => {
+        await page.goto(navigationCase.path);
+
+        const navigation = page.getByRole("navigation", { name: navigationName });
+        await expect(navigation).toBeVisible();
+        const currentItem = page.locator(
+          'a[data-app-navigation-item="true"]:visible[aria-current="page"]',
+        );
+        await expect(currentItem).toHaveCount(1);
+        await expect(currentItem).toHaveAccessibleName(navigationCase.current);
+      });
+    }
+  }
+});
+
 test("expired product routes are no longer exposed", async ({ page }) => {
   await login(page);
 

From 710db7db997cac818c967a7798c5817ab2be519b Mon Sep 17 00:00:00 2001
From: RomeoCavazza <romeo.cavazza@gmail.com>
Date: Mon, 20 Jul 2026 10:09:56 +0200
Subject: [PATCH 2/4] fix(web): honor platform accessibility preferences

---
 client-web/app/design-tokens.test.ts          |  94 +++++++++++
 client-web/app/globals.css                    |  78 ++++++++-
 .../components/incidents/GifSearchPanel.tsx   |   2 +-
 .../components/incidents/IncidentRow.tsx      |   2 +-
 .../components/incidents/IncidentsPage.tsx    |   2 +-
 .../components/incidents/SeverityChip.tsx     |   2 +-
 .../components/releases/ReleaseStateChip.tsx  |   2 +-
 .../components/settings/ProfilePanel.tsx      |   8 +-
 .../components/teams/DirectMessageDialog.tsx  |   2 +-
 client-web/components/ui/ActionMenu.test.tsx  |   2 +
 client-web/components/ui/ActionMenu.tsx       |   5 +-
 client-web/components/ui/Button.test.tsx      |   3 +-
 client-web/components/ui/Button.tsx           |   4 +-
 client-web/tailwind.config.ts                 |   1 +
 tooling/e2e/platform-preferences.spec.ts      | 152 ++++++++++++++++++
 15 files changed, 336 insertions(+), 23 deletions(-)
 create mode 100644 client-web/app/design-tokens.test.ts
 create mode 100644 tooling/e2e/platform-preferences.spec.ts

diff --git a/client-web/app/design-tokens.test.ts b/client-web/app/design-tokens.test.ts
new file mode 100644
index 0000000..9292707
--- /dev/null
+++ b/client-web/app/design-tokens.test.ts
@@ -0,0 +1,94 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { describe, expect, it } from "vitest";
+
+const stylesheet = readFileSync(resolve(process.cwd(), "app/globals.css"), "utf8");
+
+const p4RegressionPairs = [
+  { legacyForeground: "--ow-muted-2", foreground: "--ow-muted-2", background: "--bg" },
+  { legacyForeground: "--ow-muted-2", foreground: "--ow-muted-2", background: "--panel" },
+  { legacyForeground: "--ow-muted-2", foreground: "--ow-muted-2", background: "--panel-2" },
+  { legacyForeground: "--danger", foreground: "--danger-text", background: "--panel-2" },
+  { legacyForeground: "--sev-low", foreground: "--sev-low", background: "--panel-2" },
+  {
+    legacyForeground: "--sev-critical",
+    foreground: "--sev-critical",
+    background: "--panel-2",
+  },
+  { legacyForeground: "--st-open", foreground: "--st-open", background: "--panel-2" },
+  { legacyForeground: "--st-ack", foreground: "--st-ack", background: "--panel-2" },
+] as const;
+
+function cssToken(name: string) {
+  const match = stylesheet.match(new RegExp(`${name}:\\s*(#[0-9a-f]{3,8})`, "i"));
+  if (!match) throw new Error(`Missing opaque token ${name}`);
+  return match[1];
+}
+
+function rgb(hex: string) {
+  const value = hex.slice(1);
+  const expanded = value.length === 3 ? [...value].map((digit) => digit.repeat(2)).join("") : value;
+  return expanded
+    .match(/.{2}/g)!
+    .slice(0, 3)
+    .map((channel) => Number.parseInt(channel, 16) / 255);
+}
+
+function luminance(hex: string) {
+  const [red, green, blue] = rgb(hex).map((channel) =>
+    channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4,
+  );
+  return 0.2126 * red + 0.7152 * green + 0.0722 * blue;
+}
+
+function contrast(foreground: string, background: string) {
+  const light = Math.max(luminance(foreground), luminance(background));
+  const dark = Math.min(luminance(foreground), luminance(background));
+  return (light + 0.05) / (dark + 0.05);
+}
+
+function composite(foreground: string, background: string, opacity: number) {
+  const foregroundChannels = rgb(foreground);
+  const backgroundChannels = rgb(background);
+  const channels = foregroundChannels.map(
+    (channel, index) => channel * opacity + backgroundChannels[index] * (1 - opacity),
+  );
+  return `#${channels
+    .map((channel) =>
+      Math.round(channel * 255)
+        .toString(16)
+        .padStart(2, "0"),
+    )
+    .join("")}`;
+}
+
+describe("design token contrast contract", () => {
+  it.each(p4RegressionPairs)(
+    "$legacyForeground on $background passes as $foreground",
+    ({ foreground, background }) => {
+      expect(contrast(cssToken(foreground), cssToken(background))).toBeGreaterThanOrEqual(4.5);
+    },
+  );
+
+  it.each(["--danger", "--danger-hover"])("keeps danger ink readable on %s", (background) => {
+    expect(contrast(cssToken("--danger-ink"), cssToken(background))).toBeGreaterThanOrEqual(4.5);
+  });
+
+  it.each(["--sev-low", "--sev-critical", "--st-open", "--st-ack"])(
+    "keeps %s readable over its 10% status surface",
+    (foreground) => {
+      const text = cssToken(foreground);
+      const statusSurface = composite(text, cssToken("--panel"), 0.1);
+      expect(contrast(text, statusSurface)).toBeGreaterThanOrEqual(4.5);
+    },
+  );
+});
+
+describe("platform preference contract", () => {
+  it("defines shared reduced-motion and forced-colors policies", () => {
+    expect(stylesheet).toMatch(/@media\s*\(prefers-reduced-motion:\s*reduce\)/);
+    expect(stylesheet).toMatch(/@media\s*\(forced-colors:\s*active\)/);
+    expect(stylesheet).toContain(".ow-progress-spinner");
+    expect(stylesheet).toContain(".ow-action-menu-item");
+  });
+});
diff --git a/client-web/app/globals.css b/client-web/app/globals.css
index 618479e..8a466fc 100644
--- a/client-web/app/globals.css
+++ b/client-web/app/globals.css
@@ -12,24 +12,25 @@
     --ow-border-2: rgb(255 255 255 / 12%);
     --text: #e7e7ea;
     --ow-muted: #989ba1;
-    --ow-muted-2: #6f737a;
+    --ow-muted-2: #878b93;
     --gold: #fbc02d;
     --gold-hover: #f9a825;
     --gold-dim: #fbc02d;
     --gold-ink: #1a1405;
-    --danger: #ff2d2d;
-    --danger-hover: #e91919;
+    --danger: #c62828;
+    --danger-hover: #b71c1c;
     --danger-ink: #fff;
+    --danger-text: #f55;
 
     /* severities */
-    --sev-low: #3b82f6;
+    --sev-low: #5798f5;
     --sev-medium: #f59e0b;
     --sev-high: #fb7d3c;
-    --sev-critical: #ef4444;
+    --sev-critical: #f55;
 
     /* states */
-    --st-open: #ef4444;
-    --st-ack: #3b82f6;
+    --st-open: #f55;
+    --st-ack: #5798f5;
     --st-esc: #c084fc;
     --st-res: #22c55e;
   }
@@ -110,11 +111,72 @@
 
   .ow-input:focus-visible {
     border-color: color-mix(in srgb, var(--gold) 70%, transparent);
-    outline: none;
+    outline: 2px solid transparent;
+    outline-offset: 2px;
     box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent);
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+
+  *:not(.ow-progress-spinner),
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-delay: 0ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+@media (forced-colors: active) {
+  body {
+    background-image: none;
+  }
+
+  .glass,
+  .surface,
+  .ow-action-menu {
+    border-color: CanvasText;
+    box-shadow: none;
+  }
+
+  .ow-input {
+    color: FieldText;
+    background: Field;
+    border-color: FieldText;
+    forced-color-adjust: auto;
+  }
+
+  select.ow-input {
+    background-image: none;
+  }
+
+  .ow-button {
+    border: 1px solid ButtonText;
+    forced-color-adjust: auto;
+  }
+
+  .ow-input:focus-visible,
+  .ow-button:focus-visible {
+    outline: 2px solid Highlight !important;
+    outline-offset: 2px;
+    box-shadow: none;
+  }
+
+  .ow-action-menu-item[data-highlighted],
+  [aria-current="page"],
+  [aria-selected="true"],
+  [aria-pressed="true"] {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+}
+
 /* Autofill override to preserve background and text color */
 input:-webkit-autofill,
 input:-webkit-autofill:hover,
diff --git a/client-web/components/incidents/GifSearchPanel.tsx b/client-web/components/incidents/GifSearchPanel.tsx
index 6ed7da6..c975315 100644
--- a/client-web/components/incidents/GifSearchPanel.tsx
+++ b/client-web/components/incidents/GifSearchPanel.tsx
@@ -80,7 +80,7 @@ export function GifSearchPanel({
         )}
       </div>
 
-      <div className="text-muted/60 mt-2 text-right text-[10px] tracking-wide uppercase">
+      <div className="text-muted-2 mt-2 text-right text-[10px] tracking-wide uppercase">
         {t("poweredByGiphy")}
       </div>
     </div>
diff --git a/client-web/components/incidents/IncidentRow.tsx b/client-web/components/incidents/IncidentRow.tsx
index f908b59..9e3981a 100644
--- a/client-web/components/incidents/IncidentRow.tsx
+++ b/client-web/components/incidents/IncidentRow.tsx
@@ -40,7 +40,7 @@ export function IncidentRow({ incident }: { incident: IncidentListItem }) {
         >
           {incident.title}
         </Link>
-        <div className="text-muted/70 mt-1 font-mono text-xs">
+        <div className="text-muted-2 mt-1 font-mono text-xs">
           {t("shortId", { id: incident.id.split("-")[0] })}
         </div>
       </td>
diff --git a/client-web/components/incidents/IncidentsPage.tsx b/client-web/components/incidents/IncidentsPage.tsx
index 6b0b43d..33dc90d 100644
--- a/client-web/components/incidents/IncidentsPage.tsx
+++ b/client-web/components/incidents/IncidentsPage.tsx
@@ -60,7 +60,7 @@ function IncidentSearch({
         value={value}
         onChange={(event) => setValue(event.target.value)}
         placeholder={placeholder}
-        className="border-border bg-panel text-text placeholder:text-muted/60 focus:border-gold h-9 w-full rounded-md border pr-3 pl-9 text-sm outline-none"
+        className="border-border bg-panel text-text placeholder:text-muted-2 focus:border-gold h-9 w-full rounded-md border pr-3 pl-9 text-sm outline-none"
       />
     </label>
   );
diff --git a/client-web/components/incidents/SeverityChip.tsx b/client-web/components/incidents/SeverityChip.tsx
index 349ccf2..0e18f8d 100644
--- a/client-web/components/incidents/SeverityChip.tsx
+++ b/client-web/components/incidents/SeverityChip.tsx
@@ -31,7 +31,7 @@ export function SeverityChip({ severity }: { severity: IncidentSeverity }) {
     case "critical":
       return (
         <span className="text-sev-critical inline-flex items-center gap-1 text-xs font-bold uppercase">
-          <Flame className="h-3.5 w-3.5 animate-pulse" />
+          <Flame className="ow-decorative-motion h-3.5 w-3.5 animate-pulse" />
           {t("severityCritical")}
         </span>
       );
diff --git a/client-web/components/releases/ReleaseStateChip.tsx b/client-web/components/releases/ReleaseStateChip.tsx
index d78f6c4..ecc24bb 100644
--- a/client-web/components/releases/ReleaseStateChip.tsx
+++ b/client-web/components/releases/ReleaseStateChip.tsx
@@ -41,7 +41,7 @@ export function ReleaseStateChip({ state }: { state: ReleaseState }) {
       );
     case "cancelled":
       return (
-        <span className={`${base} border-border text-muted/60 bg-white/[0.03]`}>
+        <span className={`${base} border-border text-muted-2 bg-white/[0.03]`}>
           <XCircle className="h-3 w-3" />
           {t("stateCancelled")}
         </span>
diff --git a/client-web/components/settings/ProfilePanel.tsx b/client-web/components/settings/ProfilePanel.tsx
index 1f06bb5..5706535 100644
--- a/client-web/components/settings/ProfilePanel.tsx
+++ b/client-web/components/settings/ProfilePanel.tsx
@@ -77,19 +77,19 @@ export function ProfilePanel() {
         </h2>
         <div className="mt-4 grid grid-cols-1 gap-6 text-sm sm:grid-cols-2">
           <div>
-            <span className="text-muted/70 mb-1 block text-xs font-medium tracking-wider uppercase">
+            <span className="text-muted-2 mb-1 block text-xs font-medium tracking-wider uppercase">
               {t("emailLabel")}
             </span>
             <span className="text-text font-medium">{user?.email ?? t("unknown")}</span>
           </div>
           <div>
-            <span className="text-muted/70 mb-1 block text-xs font-medium tracking-wider uppercase">
+            <span className="text-muted-2 mb-1 block text-xs font-medium tracking-wider uppercase">
               {t("userId")}
             </span>
             <span className="text-text font-mono text-xs">{user?.id ?? t("unknown")}</span>
           </div>
           <div>
-            <span className="text-muted/70 mb-1 block text-xs font-medium tracking-wider uppercase">
+            <span className="text-muted-2 mb-1 block text-xs font-medium tracking-wider uppercase">
               {t("role")}
             </span>
             <span className="text-text font-medium capitalize">
@@ -97,7 +97,7 @@ export function ProfilePanel() {
             </span>
           </div>
           <div>
-            <span className="text-muted/70 mb-1 block text-xs font-medium tracking-wider uppercase">
+            <span className="text-muted-2 mb-1 block text-xs font-medium tracking-wider uppercase">
               {t("organization")}
             </span>
             <span className="text-text font-medium">
diff --git a/client-web/components/teams/DirectMessageDialog.tsx b/client-web/components/teams/DirectMessageDialog.tsx
index bcb17a8..4a91369 100644
--- a/client-web/components/teams/DirectMessageDialog.tsx
+++ b/client-web/components/teams/DirectMessageDialog.tsx
@@ -54,7 +54,7 @@ export function DirectMessageDialog({
         <div className="border-border flex items-center justify-between gap-2 border-b px-4 py-3">
           <div className="min-w-0">
             <h2 className="text-text truncate text-sm font-semibold">{t("title")}</h2>
-            <p className="text-muted/70 truncate text-xs">{peer.email}</p>
+            <p className="text-muted-2 truncate text-xs">{peer.email}</p>
           </div>
           <IconButton onClick={onClose} label={t("close")} size="sm" variant="ghost">
             <X className="h-4 w-4" />
diff --git a/client-web/components/ui/ActionMenu.test.tsx b/client-web/components/ui/ActionMenu.test.tsx
index d9a229d..e58e64c 100644
--- a/client-web/components/ui/ActionMenu.test.tsx
+++ b/client-web/components/ui/ActionMenu.test.tsx
@@ -23,6 +23,8 @@ describe("ActionMenu", () => {
       ctrlKey: false,
     });
     const item = await screen.findByRole("menuitem", { name: "Change role" });
+    expect(item).toHaveClass("ow-action-menu-item");
+    expect(screen.getByRole("menu")).toHaveClass("ow-action-menu");
     fireEvent.click(item);
 
     expect(onSelect).toHaveBeenCalledOnce();
diff --git a/client-web/components/ui/ActionMenu.tsx b/client-web/components/ui/ActionMenu.tsx
index 80daf5d..e051530 100644
--- a/client-web/components/ui/ActionMenu.tsx
+++ b/client-web/components/ui/ActionMenu.tsx
@@ -37,7 +37,7 @@ export function ActionMenu({
         <DropdownMenu.Content
           align="end"
           sideOffset={6}
-          className="surface z-50 min-w-48 rounded-md p-1 shadow-xl outline-none"
+          className="ow-action-menu surface z-50 min-w-48 rounded-md p-1 shadow-xl outline-none"
         >
           {items.map((item) => {
             if ("separator" in item) {
@@ -49,9 +49,10 @@ export function ActionMenu({
               <DropdownMenu.Item
                 key={item.id}
                 disabled={item.disabled}
+                data-tone={item.tone ?? "neutral"}
                 onSelect={item.onSelect}
                 className={cn(
-                  "data-[highlighted]:bg-panel-2 flex cursor-default items-center gap-2 rounded px-2.5 py-2 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+                  "ow-action-menu-item data-[highlighted]:bg-panel-2 flex cursor-default items-center gap-2 rounded px-2.5 py-2 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
                   item.tone === "danger"
                     ? "text-sev-critical data-[highlighted]:bg-sev-critical/10"
                     : "text-text",
diff --git a/client-web/components/ui/Button.test.tsx b/client-web/components/ui/Button.test.tsx
index 952b69f..00ba989 100644
--- a/client-web/components/ui/Button.test.tsx
+++ b/client-web/components/ui/Button.test.tsx
@@ -10,7 +10,7 @@ describe("Button", () => {
 
     const button = screen.getByRole("button", { name: "Cancel" });
     expect(button).toHaveAttribute("type", "button");
-    expect(button).toHaveClass("bg-panel", "border-border", "h-9");
+    expect(button).toHaveClass("ow-button", "bg-panel", "border-border", "h-9");
   });
 
   it("forwards clicks and supports explicit variants and sizes", () => {
@@ -41,6 +41,7 @@ describe("Button", () => {
 
     expect(button).toBeDisabled();
     expect(button).toHaveAttribute("aria-busy", "true");
+    expect(button.querySelector(".ow-progress-spinner")).toBeInTheDocument();
     expect(onClick).not.toHaveBeenCalled();
   });
 });
diff --git a/client-web/components/ui/Button.tsx b/client-web/components/ui/Button.tsx
index b627436..d7385eb 100644
--- a/client-web/components/ui/Button.tsx
+++ b/client-web/components/ui/Button.tsx
@@ -56,7 +56,7 @@ export function buttonClassNames({
   variant = "secondary",
 }: ButtonClassNamesOptions = {}) {
   return cn(
-    "focus-visible:ring-gold/50 focus-visible:ring-offset-bg inline-flex shrink-0 items-center justify-center rounded-md font-medium whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
+    "ow-button focus-visible:ring-gold/50 focus-visible:ring-offset-bg inline-flex shrink-0 items-center justify-center rounded-md font-medium whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-2 focus-visible:outline-transparent disabled:pointer-events-none disabled:opacity-50",
     variantClasses[variant],
     sizeClasses[size],
     fullWidth && "w-full",
@@ -95,7 +95,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
     >
       {loading ? (
         <span
-          className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent"
+          className="ow-progress-spinner h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent"
           aria-hidden="true"
         />
       ) : null}
diff --git a/client-web/tailwind.config.ts b/client-web/tailwind.config.ts
index 307748a..54a5a08 100644
--- a/client-web/tailwind.config.ts
+++ b/client-web/tailwind.config.ts
@@ -46,6 +46,7 @@ const config = {
           DEFAULT: "var(--danger)",
           hover: "var(--danger-hover)",
           ink: "var(--danger-ink)",
+          text: "var(--danger-text)",
         },
         sev: {
           low: "var(--sev-low)",
diff --git a/tooling/e2e/platform-preferences.spec.ts b/tooling/e2e/platform-preferences.spec.ts
new file mode 100644
index 0000000..76bdffa
--- /dev/null
+++ b/tooling/e2e/platform-preferences.spec.ts
@@ -0,0 +1,152 @@
+import { expect, test, type Locator, type Page } from "@playwright/test";
+
+const TEAM_ID = "39aa8884-22cc-4764-a9e7-7df7c7619ba6";
+
+async function login(page: Page) {
+  await page.goto("/en/login");
+  await page.getByLabel("Email").fill("manager@opswarden.local");
+  await page.getByLabel("Password", { exact: true }).fill("sudo");
+  await page.getByRole("button", { name: "Log in", exact: true }).click();
+  await expect(page).toHaveURL(/\/en\/teams\//);
+}
+
+async function renderedContrast(locator: Locator, pseudoElement?: "::placeholder") {
+  return locator.evaluate((element, pseudo) => {
+    type Color = [red: number, green: number, blue: number, alpha: number];
+
+    const parse = (value: string): Color => {
+      const canvas = document.createElement("canvas");
+      canvas.width = 1;
+      canvas.height = 1;
+      const context = canvas.getContext("2d", { willReadFrequently: true });
+      if (!context) throw new Error("Canvas color parser is unavailable");
+      context.clearRect(0, 0, 1, 1);
+      context.fillStyle = value;
+      context.fillRect(0, 0, 1, 1);
+      const [red, green, blue, alpha] = context.getImageData(0, 0, 1, 1).data;
+      return [red, green, blue, alpha / 255];
+    };
+
+    const over = (foreground: Color, background: Color): Color => {
+      const alpha = foreground[3] + background[3] * (1 - foreground[3]);
+      if (alpha === 0) return [0, 0, 0, 0];
+      return [
+        (foreground[0] * foreground[3] + background[0] * background[3] * (1 - foreground[3])) /
+          alpha,
+        (foreground[1] * foreground[3] + background[1] * background[3] * (1 - foreground[3])) /
+          alpha,
+        (foreground[2] * foreground[3] + background[2] * background[3] * (1 - foreground[3])) /
+          alpha,
+        alpha,
+      ];
+    };
+
+    let background: Color = [0, 0, 0, 0];
+    for (let current: Element | null = element; current; current = current.parentElement) {
+      background = over(background, parse(getComputedStyle(current).backgroundColor));
+      if (background[3] >= 0.999) break;
+    }
+
+    const foreground = over(parse(getComputedStyle(element, pseudo).color), background);
+    const luminance = ([red, green, blue]: Color) => {
+      const channels = [red, green, blue].map((channel) => {
+        const normalized = channel / 255;
+        return normalized <= 0.04045 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4;
+      });
+      return 0.2126 * channels[0] + 0.7152 * channels[1] + 0.0722 * channels[2];
+    };
+
+    const foregroundLuminance = luminance(foreground);
+    const backgroundLuminance = luminance(background);
+    return (
+      (Math.max(foregroundLuminance, backgroundLuminance) + 0.05) /
+      (Math.min(foregroundLuminance, backgroundLuminance) + 0.05)
+    );
+  }, pseudoElement);
+}
+
+test("reduced motion keeps progress but neutralizes decorative motion", async ({ page }) => {
+  await page.emulateMedia({ reducedMotion: "reduce" });
+  await page.goto("/en/login");
+
+  const result = await page.evaluate(() => {
+    const decorative = document.createElement("span");
+    decorative.className = "animate-pulse";
+    const progress = document.createElement("span");
+    progress.className = "ow-progress-spinner animate-spin";
+    document.body.append(decorative, progress);
+
+    const transition = getComputedStyle(document.querySelector("input")!).transitionDuration;
+    const decorativeDuration = getComputedStyle(decorative).animationDuration;
+    const progressDuration = getComputedStyle(progress).animationDuration;
+    decorative.remove();
+    progress.remove();
+    return { decorativeDuration, progressDuration, transition };
+  });
+
+  const seconds = (duration: string) => Number.parseFloat(duration.replace("s", ""));
+  expect(seconds(result.transition)).toBeLessThanOrEqual(0.00001);
+  expect(seconds(result.decorativeDuration)).toBeLessThanOrEqual(0.00001);
+  expect(seconds(result.progressDuration)).toBeGreaterThan(0.00001);
+});
+
+test("forced colors preserve focus, selection and action-menu geometry", async ({ page }) => {
+  const session = await page.context().newCDPSession(page);
+  await session.send("Emulation.setEmulatedMedia", {
+    media: "screen",
+    features: [{ name: "forced-colors", value: "active" }],
+  });
+
+  await page.goto("/en/login");
+  expect(await page.evaluate(() => matchMedia("(forced-colors: active)").matches)).toBe(true);
+
+  const email = page.getByLabel("Email");
+  await email.focus();
+  await expect(email).toBeFocused();
+  expect(await email.evaluate((element) => getComputedStyle(element).outlineWidth)).toBe("2px");
+
+  await login(page);
+  const currentNavigationItem = page.locator(
+    'a[data-app-navigation-item="true"]:visible[aria-current="page"]',
+  );
+  await expect(currentNavigationItem).toHaveCount(1);
+  expect(
+    await currentNavigationItem.evaluate((element) => getComputedStyle(element).outlineWidth),
+  ).toBe("2px");
+
+  await page.goto(`/en/teams/${TEAM_ID}/members`);
+  await page.getByRole("button", { name: "Team Actions" }).first().click();
+  const menuItem = page.getByRole("menuitem").first();
+  await menuItem.hover();
+  expect(await menuItem.evaluate((element) => getComputedStyle(element).outlineWidth)).toBe("2px");
+});
+
+test("browser-composited incident text remains above 4.5:1", async ({ page }) => {
+  await login(page);
+
+  const samples = [
+    { path: `/en/teams/${TEAM_ID}/incidents`, selector: ".text-st-open" },
+    { path: `/en/teams/${TEAM_ID}/incidents`, selector: ".text-sev-critical" },
+    { path: `/en/teams/${TEAM_ID}/incidents`, selector: ".text-sev-low" },
+    {
+      path: `/en/teams/${TEAM_ID}/incidents?view=acknowledged`,
+      selector: ".text-st-ack",
+    },
+  ];
+
+  for (const sample of samples) {
+    await page.goto(sample.path);
+    const element = page.locator(sample.selector).first();
+    await expect(element).toBeVisible();
+    expect(
+      await renderedContrast(element),
+      `${sample.selector} rendered contrast`,
+    ).toBeGreaterThanOrEqual(4.5);
+  }
+
+  const search = page.getByPlaceholder("Search by title, ID or assignee");
+  expect(
+    await renderedContrast(search, "::placeholder"),
+    "search placeholder contrast",
+  ).toBeGreaterThanOrEqual(4.5);
+});

From 9eec5d15f226285c0f054ace7e7d735689f2569c Mon Sep 17 00:00:00 2001
From: RomeoCavazza <romeo.cavazza@gmail.com>
Date: Mon, 20 Jul 2026 10:25:21 +0200
Subject: [PATCH 3/4] refactor(web): establish shared dialog shell

---
 .../incidents/CreateIncidentDialog.tsx        | 208 +++++++++---------
 client-web/components/ui/ConfirmDialog.tsx    | 100 ++++-----
 client-web/components/ui/Dialog.test.tsx      |  69 ++++++
 client-web/components/ui/Dialog.tsx           | 120 ++++++++++
 client-web/messages/en.json                   |   1 +
 client-web/messages/fr.json                   |   1 +
 tooling/e2e/create-incident-dialog.spec.ts    | 102 +++++++++
 tooling/seed_demo.sql                         |   5 +-
 8 files changed, 440 insertions(+), 166 deletions(-)
 create mode 100644 client-web/components/ui/Dialog.test.tsx
 create mode 100644 client-web/components/ui/Dialog.tsx
 create mode 100644 tooling/e2e/create-incident-dialog.spec.ts

diff --git a/client-web/components/incidents/CreateIncidentDialog.tsx b/client-web/components/incidents/CreateIncidentDialog.tsx
index ded5b43..031909c 100644
--- a/client-web/components/incidents/CreateIncidentDialog.tsx
+++ b/client-web/components/incidents/CreateIncidentDialog.tsx
@@ -1,14 +1,16 @@
-import React, { useState } from "react";
-import { AlertCircle, X } from "lucide-react";
+import React, { useRef, useState } from "react";
+import { AlertCircle } from "lucide-react";
 import { useCreateIncident, IncidentSeverity } from "@/lib/queries/incidents";
 import { useTranslations } from "next-intl";
-import { Button, IconButton } from "@/components/ui/Button";
+import { Button } from "@/components/ui/Button";
+import { Dialog, DialogClose } from "@/components/ui/Dialog";
 
 export function CreateIncidentDialog({ teamId }: { teamId: string }) {
   const [open, setOpen] = useState(false);
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
   const [severity, setSeverity] = useState<IncidentSeverity>("medium");
+  const titleRef = useRef<HTMLInputElement>(null);
   const createIncident = useCreateIncident();
   const t = useTranslations("Incidents");
 
@@ -29,113 +31,103 @@ export function CreateIncidentDialog({ teamId }: { teamId: string }) {
   };
 
   return (
-    <>
-      <Button onClick={() => setOpen(true)} disabled={!teamId} variant="danger">
-        <AlertCircle className="h-4 w-4" />
-        {t("declareIncident")}
-      </Button>
-
-      {open && (
-        <div className="bg-bg/80 fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
-          <div className="surface relative w-full max-w-lg rounded-md p-6 shadow-2xl">
-            <IconButton
-              onClick={() => setOpen(false)}
-              className="absolute top-3 right-3"
-              label="Close dialog"
-              size="sm"
-              variant="ghost"
-            >
-              <X className="h-5 w-5" />
-            </IconButton>
-            <div className="mb-6 flex items-center gap-3">
-              <div className="bg-sev-critical/15 text-sev-critical flex h-10 w-10 items-center justify-center rounded-full">
-                <AlertCircle className="h-5 w-5" />
-              </div>
-              <div>
-                <h2 className="text-text font-sans text-lg font-bold">{t("declareTitle")}</h2>
-                <p className="text-muted text-xs">{t("declareWarning")}</p>
-              </div>
-            </div>
-
-            <form onSubmit={handleSubmit} className="space-y-4">
-              <div>
-                <label htmlFor="inc-title" className="text-muted mb-1 block font-sans text-xs">
-                  {t("colTitle")}
-                </label>
-                <input
-                  id="inc-title"
-                  type="text"
-                  autoFocus
-                  value={title}
-                  onChange={(e) => setTitle(e.target.value)}
-                  className="ow-input flex h-10 w-full rounded-md px-3 py-2 text-sm transition-colors"
-                  placeholder={t("titlePlaceholder")}
-                />
-              </div>
-
-              <div>
-                <label
-                  htmlFor="inc-description"
-                  className="text-muted mb-1 block font-sans text-xs"
-                >
-                  {t("fieldDescription")}
-                </label>
-                <textarea
-                  id="inc-description"
-                  value={description}
-                  onChange={(e) => setDescription(e.target.value)}
-                  rows={3}
-                  className="ow-input flex w-full rounded-md px-3 py-2 text-sm transition-colors"
-                  placeholder={t("descriptionPlaceholder")}
-                />
-              </div>
+    <Dialog
+      open={open}
+      onOpenChange={setOpen}
+      trigger={
+        <Button disabled={!teamId} variant="danger">
+          <AlertCircle className="h-4 w-4" aria-hidden="true" />
+          {t("declareIncident")}
+        </Button>
+      }
+      title={t("declareTitle")}
+      description={t("declareWarning")}
+      closeLabel={t("close")}
+      initialFocus={titleRef}
+      icon={
+        <div className="bg-sev-critical/15 text-sev-critical flex h-10 w-10 shrink-0 items-center justify-center rounded-full">
+          <AlertCircle className="h-5 w-5" aria-hidden="true" />
+        </div>
+      }
+      footer={
+        <>
+          <DialogClose>
+            <Button size="lg">{t("cancel")}</Button>
+          </DialogClose>
+          <Button
+            type="submit"
+            form="create-incident-form"
+            disabled={createIncident.isPending || !title.trim()}
+            loading={createIncident.isPending}
+            size="lg"
+            variant="danger"
+          >
+            {createIncident.isPending ? t("declaring") : t("declare")}
+          </Button>
+        </>
+      }
+    >
+      <form id="create-incident-form" onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label htmlFor="inc-title" className="text-muted mb-1 block font-sans text-xs">
+            {t("colTitle")}
+          </label>
+          <input
+            ref={titleRef}
+            id="inc-title"
+            type="text"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            className="ow-input flex h-10 w-full rounded-md px-3 py-2 text-sm transition-colors"
+            placeholder={t("titlePlaceholder")}
+          />
+        </div>
 
-              <div>
-                <label htmlFor="inc-sev" className="text-muted mb-1 block font-sans text-xs">
-                  {t("severity")}
-                </label>
-                <select
-                  id="inc-sev"
-                  value={severity}
-                  onChange={(e) => setSeverity(e.target.value as IncidentSeverity)}
-                  className="ow-input flex h-10 w-full rounded-md px-3 py-2 text-sm transition-colors"
-                >
-                  <option value="low" className="bg-bg text-text">
-                    {t("sevLowDesc")}
-                  </option>
-                  <option value="medium" className="bg-bg text-text">
-                    {t("sevMediumDesc")}
-                  </option>
-                  <option value="high" className="bg-bg text-text">
-                    {t("sevHighDesc")}
-                  </option>
-                  <option value="critical" className="bg-bg text-text">
-                    {t("sevCriticalDesc")}
-                  </option>
-                </select>
-              </div>
+        <div>
+          <label htmlFor="inc-description" className="text-muted mb-1 block font-sans text-xs">
+            {t("fieldDescription")}
+          </label>
+          <textarea
+            id="inc-description"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            rows={3}
+            className="ow-input flex w-full rounded-md px-3 py-2 text-sm transition-colors"
+            placeholder={t("descriptionPlaceholder")}
+          />
+        </div>
 
-              <div className="flex justify-end gap-2 pt-4">
-                <Button size="lg" onClick={() => setOpen(false)}>
-                  {t("cancel")}
-                </Button>
-                <Button
-                  type="submit"
-                  disabled={createIncident.isPending || !title.trim()}
-                  loading={createIncident.isPending}
-                  size="lg"
-                  variant="danger"
-                >
-                  {createIncident.isPending ? t("declaring") : t("declare")}
-                </Button>
-              </div>
-              {createIncident.isError && (
-                <p className="text-sev-critical mt-2 text-sm">{createIncident.error.message}</p>
-              )}
-            </form>
-          </div>
+        <div>
+          <label htmlFor="inc-sev" className="text-muted mb-1 block font-sans text-xs">
+            {t("severity")}
+          </label>
+          <select
+            id="inc-sev"
+            value={severity}
+            onChange={(e) => setSeverity(e.target.value as IncidentSeverity)}
+            className="ow-input flex h-10 w-full rounded-md px-3 py-2 text-sm transition-colors"
+          >
+            <option value="low" className="bg-bg text-text">
+              {t("sevLowDesc")}
+            </option>
+            <option value="medium" className="bg-bg text-text">
+              {t("sevMediumDesc")}
+            </option>
+            <option value="high" className="bg-bg text-text">
+              {t("sevHighDesc")}
+            </option>
+            <option value="critical" className="bg-bg text-text">
+              {t("sevCriticalDesc")}
+            </option>
+          </select>
         </div>
-      )}
-    </>
+
+        {createIncident.isError ? (
+          <p className="text-sev-critical text-sm" role="alert">
+            {createIncident.error.message}
+          </p>
+        ) : null}
+      </form>
+    </Dialog>
   );
 }
diff --git a/client-web/components/ui/ConfirmDialog.tsx b/client-web/components/ui/ConfirmDialog.tsx
index 31ed1e7..e233503 100644
--- a/client-web/components/ui/ConfirmDialog.tsx
+++ b/client-web/components/ui/ConfirmDialog.tsx
@@ -1,9 +1,9 @@
 "use client";
 
-import * as Dialog from "@radix-ui/react-dialog";
 import React, { useRef, useState } from "react";
 import { AlertTriangle } from "lucide-react";
 import { Button } from "./Button";
+import { Dialog, DialogClose } from "./Dialog";
 
 interface ConfirmDialogProps {
   open: boolean;
@@ -33,11 +33,7 @@ interface ConfirmDialogProps {
  * mounts while open, so the typed sentinel resets on every open without an effect.
  */
 export function ConfirmDialog(props: ConfirmDialogProps) {
-  return (
-    <Dialog.Root open={props.open} onOpenChange={(open) => !open && props.onClose()}>
-      {props.open ? <ConfirmDialogBody {...props} /> : null}
-    </Dialog.Root>
-  );
+  return props.open ? <ConfirmDialogBody {...props} /> : null;
 }
 
 function ConfirmDialogBody({
@@ -60,57 +56,26 @@ function ConfirmDialogBody({
   const confirmDisabled = pending || (requireType ? typed !== requireType : false);
 
   return (
-    <Dialog.Portal>
-      <Dialog.Overlay className="bg-bg/80 fixed inset-0 z-50 backdrop-blur-sm" />
-      <Dialog.Content
-        className="surface fixed top-1/2 left-1/2 z-50 w-[calc(100%-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 space-y-5 rounded-md p-6 shadow-2xl outline-none"
-        onOpenAutoFocus={(event) => {
-          event.preventDefault();
-          cancelRef.current?.focus();
-        }}
-      >
-        <div className="flex gap-3">
-          {danger ? (
-            <AlertTriangle
-              className="text-sev-critical mt-0.5 h-5 w-5 shrink-0"
-              aria-hidden="true"
-            />
-          ) : null}
-          <div>
-            <Dialog.Title className="text-text text-lg font-semibold">{title}</Dialog.Title>
-            <Dialog.Description className="text-muted mt-2 text-sm">
-              {description}
-            </Dialog.Description>
-          </div>
-        </div>
-
-        {children}
-
-        {requireType ? (
-          <label className="text-text block text-sm font-medium">
-            <span>{requireTypeLabel ?? requireType}</span>
-            <input
-              value={typed}
-              onChange={(event) => setTyped(event.target.value)}
-              className="ow-input focus-visible:ring-sev-critical/50 mt-2 flex h-10 w-full rounded-md px-3 py-2 text-sm transition-colors"
-              autoComplete="off"
-              spellCheck={false}
-            />
-          </label>
-        ) : null}
-
-        {error ? (
-          <p className="text-sev-critical text-sm" role="alert">
-            {error}
-          </p>
-        ) : null}
-
-        <div className="flex justify-end gap-3 pt-2">
-          <Dialog.Close asChild>
+    <Dialog
+      open
+      onOpenChange={(open) => !open && onClose()}
+      title={title}
+      description={description}
+      initialFocus={cancelRef}
+      size="sm"
+      icon={
+        danger ? (
+          <AlertTriangle className="text-sev-critical mt-0.5 h-5 w-5 shrink-0" aria-hidden="true" />
+        ) : undefined
+      }
+      bodyClassName="space-y-5"
+      footer={
+        <>
+          <DialogClose>
             <Button ref={cancelRef} size="lg">
               {cancelLabel}
             </Button>
-          </Dialog.Close>
+          </DialogClose>
           <Button
             size="lg"
             variant={danger ? "danger" : "primary"}
@@ -120,8 +85,29 @@ function ConfirmDialogBody({
           >
             {pending ? (pendingLabel ?? confirmLabel) : confirmLabel}
           </Button>
-        </div>
-      </Dialog.Content>
-    </Dialog.Portal>
+        </>
+      }
+    >
+      {children}
+
+      {requireType ? (
+        <label className="text-text block text-sm font-medium">
+          <span>{requireTypeLabel ?? requireType}</span>
+          <input
+            value={typed}
+            onChange={(event) => setTyped(event.target.value)}
+            className="ow-input focus-visible:ring-sev-critical/50 mt-2 flex h-10 w-full rounded-md px-3 py-2 text-sm transition-colors"
+            autoComplete="off"
+            spellCheck={false}
+          />
+        </label>
+      ) : null}
+
+      {error ? (
+        <p className="text-sev-critical text-sm" role="alert">
+          {error}
+        </p>
+      ) : null}
+    </Dialog>
   );
 }
diff --git a/client-web/components/ui/Dialog.test.tsx b/client-web/components/ui/Dialog.test.tsx
new file mode 100644
index 0000000..244677e
--- /dev/null
+++ b/client-web/components/ui/Dialog.test.tsx
@@ -0,0 +1,69 @@
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { useRef, useState } from "react";
+import { afterEach, describe, expect, it } from "vitest";
+import { Button } from "./Button";
+import { Dialog, DialogClose } from "./Dialog";
+
+afterEach(cleanup);
+
+function DialogHarness() {
+  const [open, setOpen] = useState(false);
+  const initialFocus = useRef<HTMLInputElement>(null);
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={setOpen}
+      trigger={<Button>Open dialog</Button>}
+      title="Edit incident"
+      description="Change the operational incident."
+      closeLabel="Close dialog"
+      initialFocus={initialFocus}
+      footer={
+        <DialogClose>
+          <Button>Cancel</Button>
+        </DialogClose>
+      }
+    >
+      <label>
+        Incident title
+        <input ref={initialFocus} />
+      </label>
+    </Dialog>
+  );
+}
+
+describe("Dialog", () => {
+  it("owns naming, initial focus, Escape and focus restoration", async () => {
+    render(<DialogHarness />);
+
+    const trigger = screen.getByRole("button", { name: "Open dialog" });
+    fireEvent.click(trigger);
+
+    const dialog = screen.getByRole("dialog", { name: "Edit incident" });
+    expect(dialog).toHaveAccessibleDescription("Change the operational incident.");
+    await waitFor(() =>
+      expect(screen.getByRole("textbox", { name: "Incident title" })).toHaveFocus(),
+    );
+
+    fireEvent.keyDown(document.activeElement ?? document.body, { key: "Escape" });
+    await waitFor(() => expect(dialog).not.toBeInTheDocument());
+    await waitFor(() => expect(trigger).toHaveFocus());
+  });
+
+  it("keeps the scrolling body separate from the visible footer", () => {
+    render(<DialogHarness />);
+    fireEvent.click(screen.getByRole("button", { name: "Open dialog" }));
+
+    expect(document.querySelector('[data-dialog-part="content"]')).toHaveClass(
+      "max-h-[calc(100dvh-2rem)]",
+      "flex-col",
+    );
+    expect(document.querySelector('[data-dialog-part="body"]')).toHaveClass(
+      "min-h-0",
+      "overflow-y-auto",
+    );
+    expect(document.querySelector('[data-dialog-part="footer"]')).toBeVisible();
+    expect(screen.getByRole("button", { name: "Close dialog" })).toBeVisible();
+  });
+});
diff --git a/client-web/components/ui/Dialog.tsx b/client-web/components/ui/Dialog.tsx
new file mode 100644
index 0000000..f2e48f6
--- /dev/null
+++ b/client-web/components/ui/Dialog.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import * as RadixDialog from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import type { ReactElement, ReactNode, RefObject } from "react";
+import { cn } from "@/lib/utils";
+import { IconButton } from "./Button";
+
+type DialogSize = "sm" | "md" | "lg";
+
+const sizeClasses: Record<DialogSize, string> = {
+  sm: "max-w-md",
+  md: "max-w-lg",
+  lg: "max-w-2xl",
+};
+
+interface DialogProps {
+  bodyClassName?: string;
+  children: ReactNode;
+  /** Renders the header close button when provided; the visible footer may be the only close action. */
+  closeLabel?: string;
+  contentClassName?: string;
+  description: ReactNode;
+  footer?: ReactNode;
+  icon?: ReactNode;
+  initialFocus?: RefObject<HTMLElement | null>;
+  onOpenChange: (open: boolean) => void;
+  open: boolean;
+  size?: DialogSize;
+  title: ReactNode;
+  trigger?: ReactElement;
+}
+
+/**
+ * Shared modal shell. Radix owns modal semantics, focus containment, Escape and
+ * focus restoration; feature dialogs only provide content and state.
+ */
+export function Dialog({
+  bodyClassName,
+  children,
+  closeLabel,
+  contentClassName,
+  description,
+  footer,
+  icon,
+  initialFocus,
+  onOpenChange,
+  open,
+  size = "md",
+  title,
+  trigger,
+}: DialogProps) {
+  return (
+    <RadixDialog.Root open={open} onOpenChange={onOpenChange}>
+      {trigger ? <RadixDialog.Trigger asChild>{trigger}</RadixDialog.Trigger> : null}
+
+      <RadixDialog.Portal>
+        <RadixDialog.Overlay className="bg-bg/80 fixed inset-0 z-50 backdrop-blur-sm" />
+        <RadixDialog.Content
+          data-dialog-part="content"
+          className={cn(
+            "surface fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-md shadow-2xl outline-none",
+            sizeClasses[size],
+            contentClassName,
+          )}
+          onOpenAutoFocus={(event) => {
+            if (!initialFocus?.current) return;
+            event.preventDefault();
+            initialFocus.current.focus();
+          }}
+        >
+          <header className="border-border relative flex shrink-0 items-start gap-3 border-b p-6 pr-14">
+            {icon}
+            <div className="min-w-0">
+              <RadixDialog.Title className="text-text text-lg font-semibold">
+                {title}
+              </RadixDialog.Title>
+              <RadixDialog.Description className="text-muted mt-1 text-sm">
+                {description}
+              </RadixDialog.Description>
+            </div>
+            {closeLabel ? (
+              <RadixDialog.Close asChild>
+                <IconButton
+                  className="absolute top-4 right-4"
+                  label={closeLabel}
+                  size="sm"
+                  variant="ghost"
+                >
+                  <X className="h-4 w-4" aria-hidden="true" />
+                </IconButton>
+              </RadixDialog.Close>
+            ) : null}
+          </header>
+
+          <div
+            data-dialog-part="body"
+            className={cn("min-h-0 flex-1 overflow-y-auto p-6", bodyClassName)}
+          >
+            {children}
+          </div>
+
+          {footer ? (
+            <footer
+              data-dialog-part="footer"
+              className="border-border flex shrink-0 justify-end gap-2 border-t px-6 py-4"
+            >
+              {footer}
+            </footer>
+          ) : null}
+        </RadixDialog.Content>
+      </RadixDialog.Portal>
+    </RadixDialog.Root>
+  );
+}
+
+/** Close action for a button rendered inside the shared Dialog shell. */
+export function DialogClose({ children }: { children: ReactElement }) {
+  return <RadixDialog.Close asChild>{children}</RadixDialog.Close>;
+}
diff --git a/client-web/messages/en.json b/client-web/messages/en.json
index 737c7df..ed4a40a 100644
--- a/client-web/messages/en.json
+++ b/client-web/messages/en.json
@@ -427,6 +427,7 @@
     "declaring": "Declaring...",
     "declareTitle": "Declare New Incident",
     "declareWarning": "This will immediately alert the on-call engineers.",
+    "close": "Close dialog",
     "titlePlaceholder": "e.g. Primary database latency spike",
     "sevLowDesc": "Low - Minor impact",
     "sevMediumDesc": "Medium - Partial degradation",
diff --git a/client-web/messages/fr.json b/client-web/messages/fr.json
index 8985ef3..c4b038f 100644
--- a/client-web/messages/fr.json
+++ b/client-web/messages/fr.json
@@ -427,6 +427,7 @@
     "declaring": "Déclaration...",
     "declareTitle": "Déclarer un nouvel incident",
     "declareWarning": "Cela alertera immédiatement les ingénieurs d'astreinte.",
+    "close": "Fermer la boîte de dialogue",
     "titlePlaceholder": "ex: Pic de latence sur la base de données",
     "sevLowDesc": "Basse - Impact mineur",
     "sevMediumDesc": "Moyenne - Dégradation partielle",
diff --git a/tooling/e2e/create-incident-dialog.spec.ts b/tooling/e2e/create-incident-dialog.spec.ts
new file mode 100644
index 0000000..3ba0de5
--- /dev/null
+++ b/tooling/e2e/create-incident-dialog.spec.ts
@@ -0,0 +1,102 @@
+import { expect, test, type Page } from "@playwright/test";
+
+const TEAM_ID = "39aa8884-22cc-4764-a9e7-7df7c7619ba6";
+const INCIDENTS_URL = `/en/teams/${TEAM_ID}/incidents`;
+
+async function loginAsManager(page: Page) {
+  await page.goto("/en/login");
+  await page.getByLabel("Email").fill("manager@opswarden.local");
+  await page.getByLabel("Password", { exact: true }).fill("sudo");
+  await page.getByRole("button", { name: "Log in", exact: true }).click();
+  await expect(page).toHaveURL(/\/en\/teams\//);
+  await page.goto(INCIDENTS_URL);
+}
+
+async function openCreateIncident(page: Page) {
+  const trigger = page.getByRole("button", { name: "Declare Incident", exact: true });
+  await trigger.click();
+  const dialog = page.getByRole("dialog", { name: "Declare New Incident" });
+  await expect(dialog).toBeVisible();
+  await expect(dialog.getByLabel("Title", { exact: true })).toBeFocused();
+  return { dialog, trigger };
+}
+
+test("Manager can cancel with Escape and returns to the trigger", async ({ page }) => {
+  await loginAsManager(page);
+  const { dialog, trigger } = await openCreateIncident(page);
+
+  await dialog.getByLabel("Title", { exact: true }).fill("Draft incident");
+  await page.keyboard.press("Escape");
+
+  await expect(dialog).toHaveCount(0);
+  await expect(trigger).toBeFocused();
+});
+
+test("Manager can declare an incident through the shared footer", async ({ page }) => {
+  await loginAsManager(page);
+  const { dialog } = await openCreateIncident(page);
+  const title = `E2E dialog contract ${Date.now()}`;
+
+  await dialog.getByLabel("Title", { exact: true }).fill(title);
+  await dialog.getByLabel("Description", { exact: true }).fill("Created by the L03 browser test.");
+  await dialog.getByLabel("Severity", { exact: true }).selectOption("critical");
+  await dialog.getByRole("button", { name: "Declare", exact: true }).click();
+
+  await expect(dialog).toHaveCount(0);
+  await expect(page.getByText(title, { exact: true })).toBeVisible();
+});
+
+test("server errors stay in the dialog and are announced", async ({ page }) => {
+  await page.route("**/api/incidents", async (route) => {
+    if (route.request().method() !== "POST") return route.continue();
+    await route.fulfill({
+      status: 500,
+      contentType: "application/json",
+      body: JSON.stringify({ code: "unexpected_error" }),
+    });
+  });
+  await loginAsManager(page);
+  const { dialog } = await openCreateIncident(page);
+
+  await dialog.getByLabel("Title", { exact: true }).fill("Rejected incident");
+  await dialog.getByRole("button", { name: "Declare", exact: true }).click();
+
+  await expect(dialog.getByRole("alert")).toHaveText("Failed to create incident");
+  await expect(dialog.locator('[data-dialog-part="footer"]')).toBeVisible();
+});
+
+test("small viewport scrolls the body while keeping the footer visible and focus trapped", async ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 320, height: 320 });
+  await loginAsManager(page);
+  const { dialog } = await openCreateIncident(page);
+  const body = dialog.locator('[data-dialog-part="body"]');
+  const footer = dialog.locator('[data-dialog-part="footer"]');
+
+  const geometry = await dialog.evaluate((element) => {
+    const body = element.querySelector<HTMLElement>('[data-dialog-part="body"]')!;
+    const footer = element.querySelector<HTMLElement>('[data-dialog-part="footer"]')!;
+    const dialogBox = element.getBoundingClientRect();
+    const footerBox = footer.getBoundingClientRect();
+    return {
+      bodyScrolls: body.scrollHeight > body.clientHeight,
+      dialogTop: dialogBox.top,
+      dialogBottom: dialogBox.bottom,
+      footerBottom: footerBox.bottom,
+    };
+  });
+
+  expect(geometry.bodyScrolls).toBe(true);
+  expect(geometry.dialogTop).toBeGreaterThanOrEqual(0);
+  expect(geometry.dialogBottom).toBeLessThanOrEqual(320);
+  expect(geometry.footerBottom).toBeLessThanOrEqual(320);
+  await expect(footer).toBeVisible();
+  await expect(body).toBeVisible();
+
+  for (let step = 0; step < 8; step += 1) await page.keyboard.press("Tab");
+  expect(
+    await dialog.evaluate((element) => element.contains(document.activeElement)),
+    "focus remains inside the modal",
+  ).toBe(true);
+});
diff --git a/tooling/seed_demo.sql b/tooling/seed_demo.sql
index 4f9a161..edc058e 100644
--- a/tooling/seed_demo.sql
+++ b/tooling/seed_demo.sql
@@ -49,7 +49,10 @@ where rule_id in (
 
 delete from incidents
 where team_id = '39aa8884-22cc-4764-a9e7-7df7c7619ba6'
-  and title in ('CI failed on GitHub', 'CI failed on opswarden/demo');
+  and (
+    title in ('CI failed on GitHub', 'CI failed on opswarden/demo')
+    or title like 'E2E dialog contract %'
+  );
 
 insert into incidents (id, team_id, title, status, severity, assignee_id, created_at) values
   ('10000000-0000-4000-8000-000000000001', '39aa8884-22cc-4764-a9e7-7df7c7619ba6', 'Payment API returning 502 in Europe', 'open', 'critical', :'responder_id', now() - interval '18 minutes'),

From 516846cd67c2229ea189c019b556cc996780d99e Mon Sep 17 00:00:00 2001
From: RomeoCavazza <romeo.cavazza@gmail.com>
Date: Mon, 20 Jul 2026 10:34:57 +0200
Subject: [PATCH 4/4] refactor(web): migrate team dialogs to shared shell

---
 .../components/teams/CreateTeamDialog.tsx     | 127 ++++++++++--------
 .../components/teams/JoinTeamDialog.tsx       | 127 ++++++++++--------
 client-web/messages/en.json                   |   2 +
 client-web/messages/fr.json                   |   2 +
 tooling/e2e/team-dialogs.spec.ts              |  99 ++++++++++++++
 tooling/seed_demo.sql                         |   4 +
 6 files changed, 245 insertions(+), 116 deletions(-)
 create mode 100644 tooling/e2e/team-dialogs.spec.ts

diff --git a/client-web/components/teams/CreateTeamDialog.tsx b/client-web/components/teams/CreateTeamDialog.tsx
index 13ce142..c3cc77c 100644
--- a/client-web/components/teams/CreateTeamDialog.tsx
+++ b/client-web/components/teams/CreateTeamDialog.tsx
@@ -1,15 +1,25 @@
-import React, { useState } from "react";
-import { Plus, X } from "lucide-react";
+import React, { useRef, useState } from "react";
+import { Plus } from "lucide-react";
 import { useCreateTeam } from "@/lib/queries/teams";
 import { useTranslations } from "next-intl";
-import { Button, IconButton } from "@/components/ui/Button";
+import { Button } from "@/components/ui/Button";
+import { Dialog, DialogClose } from "@/components/ui/Dialog";
 
 export function CreateTeamDialog() {
   const [open, setOpen] = useState(false);
   const [name, setName] = useState("");
+  const nameRef = useRef<HTMLInputElement>(null);
   const createTeam = useCreateTeam();
   const t = useTranslations("Teams");
 
+  const handleOpenChange = (nextOpen: boolean) => {
+    if (nextOpen) {
+      setName("");
+      createTeam.reset();
+    }
+    setOpen(nextOpen);
+  };
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     if (!name.trim()) return;
@@ -22,61 +32,62 @@ export function CreateTeamDialog() {
   };
 
   return (
-    <>
-      <Button onClick={() => setOpen(true)} variant="primary">
-        <Plus className="h-4 w-4" />
-        {t("createTeam")}
-      </Button>
-
-      {open && (
-        <div className="bg-bg/80 fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
-          <div className="surface relative w-full max-w-md rounded-md p-6 shadow-2xl">
-            <IconButton
-              onClick={() => setOpen(false)}
-              className="absolute top-3 right-3"
-              label="Close dialog"
-              size="sm"
-              variant="ghost"
-            >
-              <X className="h-5 w-5" />
-            </IconButton>
-            <h2 className="text-text mb-4 font-sans text-lg font-bold">{t("createTitle")}</h2>
-            <form onSubmit={handleSubmit} className="space-y-4">
-              <div>
-                <label htmlFor="team-name" className="text-muted mb-1 block font-sans text-xs">
-                  {t("name")}
-                </label>
-                <input
-                  id="team-name"
-                  type="text"
-                  autoFocus
-                  value={name}
-                  onChange={(e) => setName(e.target.value)}
-                  className="ow-input flex h-10 w-full rounded-md px-3 py-2 text-sm transition-colors"
-                  placeholder="e.g. NOC-Alpha"
-                />
-              </div>
-              <div className="flex justify-end gap-2 pt-2">
-                <Button size="lg" onClick={() => setOpen(false)}>
-                  {t("cancel")}
-                </Button>
-                <Button
-                  type="submit"
-                  disabled={createTeam.isPending || !name.trim()}
-                  loading={createTeam.isPending}
-                  size="lg"
-                  variant="primary"
-                >
-                  {createTeam.isPending ? t("creating") : t("create")}
-                </Button>
-              </div>
-              {createTeam.isError && (
-                <p className="text-sev-critical mt-2 text-sm">{createTeam.error.message}</p>
-              )}
-            </form>
-          </div>
+    <Dialog
+      open={open}
+      onOpenChange={handleOpenChange}
+      trigger={
+        <Button variant="primary">
+          <Plus className="h-4 w-4" aria-hidden="true" />
+          {t("createTeam")}
+        </Button>
+      }
+      title={t("createTitle")}
+      description={t("createDesc")}
+      closeLabel={t("close")}
+      initialFocus={nameRef}
+      size="sm"
+      icon={
+        <div className="bg-gold/15 text-gold flex h-10 w-10 shrink-0 items-center justify-center rounded-full">
+          <Plus className="h-5 w-5" aria-hidden="true" />
         </div>
-      )}
-    </>
+      }
+      footer={
+        <>
+          <DialogClose>
+            <Button size="lg">{t("cancel")}</Button>
+          </DialogClose>
+          <Button
+            type="submit"
+            form="create-team-form"
+            disabled={createTeam.isPending || !name.trim()}
+            loading={createTeam.isPending}
+            size="lg"
+            variant="primary"
+          >
+            {createTeam.isPending ? t("creating") : t("create")}
+          </Button>
+        </>
+      }
+    >
+      <form id="create-team-form" onSubmit={handleSubmit}>
+        <label htmlFor="team-name" className="text-muted mb-1 block font-sans text-xs">
+          {t("name")}
+        </label>
+        <input
+          ref={nameRef}
+          id="team-name"
+          type="text"
+          value={name}
+          onChange={(event) => setName(event.target.value)}
+          className="ow-input flex h-10 w-full rounded-md px-3 py-2 text-sm transition-colors"
+          placeholder={t("namePlaceholder")}
+        />
+        {createTeam.isError ? (
+          <p className="text-sev-critical mt-3 text-sm" role="alert">
+            {createTeam.error.message}
+          </p>
+        ) : null}
+      </form>
+    </Dialog>
   );
 }
diff --git a/client-web/components/teams/JoinTeamDialog.tsx b/client-web/components/teams/JoinTeamDialog.tsx
index 2cfc5a9..ae799c8 100644
--- a/client-web/components/teams/JoinTeamDialog.tsx
+++ b/client-web/components/teams/JoinTeamDialog.tsx
@@ -1,15 +1,25 @@
-import React, { useState } from "react";
-import { Users, X } from "lucide-react";
+import React, { useRef, useState } from "react";
+import { Users } from "lucide-react";
 import { useJoinTeam } from "@/lib/queries/teams";
 import { useTranslations } from "next-intl";
-import { Button, IconButton } from "@/components/ui/Button";
+import { Button } from "@/components/ui/Button";
+import { Dialog, DialogClose } from "@/components/ui/Dialog";
 
 export function JoinTeamDialog() {
   const [open, setOpen] = useState(false);
   const [code, setCode] = useState("");
+  const codeRef = useRef<HTMLInputElement>(null);
   const joinTeam = useJoinTeam();
   const t = useTranslations("Teams");
 
+  const handleOpenChange = (nextOpen: boolean) => {
+    if (nextOpen) {
+      setCode("");
+      joinTeam.reset();
+    }
+    setOpen(nextOpen);
+  };
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     if (!code.trim()) return;
@@ -22,61 +32,62 @@ export function JoinTeamDialog() {
   };
 
   return (
-    <>
-      <Button onClick={() => setOpen(true)}>
-        <Users className="h-4 w-4" />
-        {t("joinTeam")}
-      </Button>
-
-      {open && (
-        <div className="bg-bg/80 fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
-          <div className="surface relative w-full max-w-md rounded-md p-6 shadow-2xl">
-            <IconButton
-              onClick={() => setOpen(false)}
-              className="absolute top-3 right-3"
-              label="Close dialog"
-              size="sm"
-              variant="ghost"
-            >
-              <X className="h-5 w-5" />
-            </IconButton>
-            <h2 className="text-text mb-4 font-sans text-lg font-bold">{t("joinTitle")}</h2>
-            <form onSubmit={handleSubmit} className="space-y-4">
-              <div>
-                <label htmlFor="join-code" className="text-muted mb-1 block font-sans text-xs">
-                  {t("colInvitationCode")}
-                </label>
-                <input
-                  id="join-code"
-                  type="text"
-                  autoFocus
-                  value={code}
-                  onChange={(e) => setCode(e.target.value.toUpperCase())}
-                  className="ow-input flex h-10 w-full rounded-md px-3 py-2 font-mono text-sm tracking-widest uppercase transition-colors"
-                  placeholder="OPS-XXXXXX"
-                />
-              </div>
-              <div className="flex justify-end gap-2 pt-2">
-                <Button size="lg" onClick={() => setOpen(false)}>
-                  {t("cancel")}
-                </Button>
-                <Button
-                  type="submit"
-                  disabled={joinTeam.isPending || !code.trim()}
-                  loading={joinTeam.isPending}
-                  size="lg"
-                  variant="primary"
-                >
-                  {joinTeam.isPending ? t("joining") : t("join")}
-                </Button>
-              </div>
-              {joinTeam.isError && (
-                <p className="text-sev-critical mt-2 text-sm">{joinTeam.error.message}</p>
-              )}
-            </form>
-          </div>
+    <Dialog
+      open={open}
+      onOpenChange={handleOpenChange}
+      trigger={
+        <Button>
+          <Users className="h-4 w-4" aria-hidden="true" />
+          {t("joinTeam")}
+        </Button>
+      }
+      title={t("joinTitle")}
+      description={t("joinDesc")}
+      closeLabel={t("close")}
+      initialFocus={codeRef}
+      size="sm"
+      icon={
+        <div className="bg-panel-2 text-text flex h-10 w-10 shrink-0 items-center justify-center rounded-full">
+          <Users className="h-5 w-5" aria-hidden="true" />
         </div>
-      )}
-    </>
+      }
+      footer={
+        <>
+          <DialogClose>
+            <Button size="lg">{t("cancel")}</Button>
+          </DialogClose>
+          <Button
+            type="submit"
+            form="join-team-form"
+            disabled={joinTeam.isPending || !code.trim()}
+            loading={joinTeam.isPending}
+            size="lg"
+            variant="primary"
+          >
+            {joinTeam.isPending ? t("joining") : t("join")}
+          </Button>
+        </>
+      }
+    >
+      <form id="join-team-form" onSubmit={handleSubmit}>
+        <label htmlFor="join-code" className="text-muted mb-1 block font-sans text-xs">
+          {t("colInvitationCode")}
+        </label>
+        <input
+          ref={codeRef}
+          id="join-code"
+          type="text"
+          value={code}
+          onChange={(event) => setCode(event.target.value.toUpperCase())}
+          className="ow-input flex h-10 w-full rounded-md px-3 py-2 font-mono text-sm tracking-widest uppercase transition-colors"
+          placeholder="OPS-XXXXXX"
+        />
+        {joinTeam.isError ? (
+          <p className="text-sev-critical mt-3 text-sm" role="alert">
+            {joinTeam.error.message}
+          </p>
+        ) : null}
+      </form>
+    </Dialog>
   );
 }
diff --git a/client-web/messages/en.json b/client-web/messages/en.json
index ed4a40a..bc99241 100644
--- a/client-web/messages/en.json
+++ b/client-web/messages/en.json
@@ -265,11 +265,13 @@
     "cancel": "Cancel",
     "createDesc": "Create a new organization to coordinate your operations.",
     "name": "Organization Name",
+    "namePlaceholder": "e.g. NOC Alpha",
     "creating": "Creating...",
     "joinTitle": "Join Existing Team",
     "createTitle": "Create New Team",
     "join": "Join",
     "create": "Create",
+    "close": "Close dialog",
     "openWorkspace": "Open members and team settings",
     "teamUnavailable": "This team is unavailable or you are no longer a member."
   },
diff --git a/client-web/messages/fr.json b/client-web/messages/fr.json
index c4b038f..655fde0 100644
--- a/client-web/messages/fr.json
+++ b/client-web/messages/fr.json
@@ -265,11 +265,13 @@
     "cancel": "Annuler",
     "createDesc": "Créez une nouvelle organisation pour coordonner vos opérations.",
     "name": "Nom de l'organisation",
+    "namePlaceholder": "ex. NOC Alpha",
     "creating": "Création...",
     "joinTitle": "Rejoindre une équipe existante",
     "createTitle": "Créer une nouvelle équipe",
     "join": "Rejoindre",
     "create": "Créer",
+    "close": "Fermer la boîte de dialogue",
     "openWorkspace": "Ouvrir les membres et les paramètres de l’équipe",
     "teamUnavailable": "Cette équipe est indisponible ou vous n’en êtes plus membre."
   },
diff --git a/tooling/e2e/team-dialogs.spec.ts b/tooling/e2e/team-dialogs.spec.ts
new file mode 100644
index 0000000..f38c47f
--- /dev/null
+++ b/tooling/e2e/team-dialogs.spec.ts
@@ -0,0 +1,99 @@
+import { expect, test, type APIRequestContext, type Page } from "@playwright/test";
+
+const API_URL = process.env.OPSWARDEN_API_URL ?? "http://localhost:8080";
+const TEAMS_URL = "/en/teams";
+
+async function login(page: Page, email: string) {
+  await page.goto("/en/login");
+  await page.getByLabel("Email").fill(email);
+  await page.getByLabel("Password", { exact: true }).fill("sudo");
+  await page.getByRole("button", { name: "Log in", exact: true }).click();
+  await expect(page).toHaveURL(/\/en\/teams\//);
+  await page.goto(TEAMS_URL);
+}
+
+async function managerToken(request: APIRequestContext) {
+  const response = await request.post(`${API_URL}/api/auth/sign-in`, {
+    data: { email: "manager@opswarden.local", password: "sudo" },
+  });
+  expect(response.ok()).toBe(true);
+  return ((await response.json()) as { token: string }).token;
+}
+
+async function createJoinableTeam(request: APIRequestContext) {
+  const token = await managerToken(request);
+  const name = `E2E team dialog join ${Date.now()}`;
+  const response = await request.post(`${API_URL}/api/teams`, {
+    headers: { Authorization: `Bearer ${token}` },
+    data: { name },
+  });
+  expect(response.ok()).toBe(true);
+  return (await response.json()) as {
+    invitation_code: string;
+    name: string;
+    team_id: string;
+  };
+}
+
+test("Create Team owns focus, Escape, restoration and fresh state", async ({ page }) => {
+  await login(page, "manager@opswarden.local");
+  const trigger = page.getByRole("button", { name: "Create Team", exact: true });
+  await trigger.click();
+
+  const dialog = page.getByRole("dialog", { name: "Create New Team" });
+  const name = dialog.getByLabel("Organization Name");
+  await expect(dialog).toBeVisible();
+  await expect(name).toBeFocused();
+  await name.fill("Draft workspace");
+  await page.keyboard.press("Escape");
+
+  await expect(dialog).toHaveCount(0);
+  await expect(trigger).toBeFocused();
+  await trigger.click();
+  await expect(dialog.getByLabel("Organization Name")).toHaveValue("");
+});
+
+test("Manager creates a Team through the shared footer", async ({ page }) => {
+  await login(page, "manager@opswarden.local");
+  const name = `E2E team dialog create ${Date.now()}`;
+  await page.getByRole("button", { name: "Create Team", exact: true }).click();
+  const dialog = page.getByRole("dialog", { name: "Create New Team" });
+
+  await dialog.getByLabel("Organization Name").fill(name);
+  await dialog.getByRole("button", { name: "Create", exact: true }).click();
+
+  await expect(dialog).toHaveCount(0);
+  await expect(page.getByText(name, { exact: true })).toBeVisible();
+});
+
+test("Responder joins a Team with a real invitation code", async ({ page, request }) => {
+  const team = await createJoinableTeam(request);
+  await login(page, "responder@opswarden.local");
+  await page.getByRole("button", { name: "Join Team", exact: true }).click();
+  const dialog = page.getByRole("dialog", { name: "Join Existing Team" });
+
+  await expect(dialog.getByLabel("Invitation Code")).toBeFocused();
+  await dialog.getByLabel("Invitation Code").fill(team.invitation_code.toLowerCase());
+  await expect(dialog.getByLabel("Invitation Code")).toHaveValue(team.invitation_code);
+  await dialog.getByRole("button", { name: "Join", exact: true }).click();
+
+  await expect(dialog).toHaveCount(0);
+  await expect(page.getByText(team.name, { exact: true })).toBeVisible();
+});
+
+test("Join Team announces errors and clears them on a new open", async ({ page }) => {
+  await login(page, "observer@opswarden.local");
+  const trigger = page.getByRole("button", { name: "Join Team", exact: true });
+  await trigger.click();
+  const dialog = page.getByRole("dialog", { name: "Join Existing Team" });
+
+  await dialog.getByLabel("Invitation Code").fill("OPS-NOPE00");
+  await dialog.getByRole("button", { name: "Join", exact: true }).click();
+  await expect(dialog.getByRole("alert")).toHaveText("Failed to join team. Check your code.");
+
+  await dialog.getByRole("button", { name: "Cancel", exact: true }).click();
+  await expect(trigger).toBeFocused();
+  await trigger.click();
+  await expect(dialog.getByLabel("Invitation Code")).toHaveValue("");
+  await expect(dialog.getByRole("alert")).toHaveCount(0);
+});
diff --git a/tooling/seed_demo.sql b/tooling/seed_demo.sql
index edc058e..25873c5 100644
--- a/tooling/seed_demo.sql
+++ b/tooling/seed_demo.sql
@@ -2,6 +2,10 @@
 
 begin;
 
+-- Team dialog E2E scenarios create real workspaces. Remove only their
+-- namespaced fixtures before restoring the deterministic demo directory.
+delete from teams where name like 'E2E team dialog %';
+
 -- Stable Team IDs make demo URLs, screenshots and webhook configuration
 -- reproducible across runs. Existing rows are refreshed, never duplicated.
 insert into teams (id, name, invitation_code, created_at) values