Replace specifiers page breadcrumb/header with compact SpecifierToolHeader

docs/design-system/adoption-manifest.json

@@ -254,6 +254,7 @@
         "tests/design-sync-visual-exports.test.ts",
         "tests/in-page-nav-playwright-contract.test.ts",
         "tests/information-page-shell.dom.test.tsx",
+        "tests/ui-route-coverage.spec.ts",
         "tests/ui-specifiers.spec.ts"
       ],
       "baseline": {

src/components/specifiers/specifier-compare-page.tsx

@@ -5,10 +5,10 @@ import { ArrowRight, GitCompareArrows, HelpCircle, Repeat2, Tags } from "lucide-
 import { useState } from "react";
 
 import {
-  SpecifierBreadcrumbs,
   SpecifierFamilyBadge,
   SpecifierPageShell,
   SpecifierSafetyNote,
+  SpecifierToolHeader,
   specifierCard,
 } from "@/components/specifiers/specifier-ui";
 import { cn, eyebrowText } from "@/components/ui-primitives";
@@ -94,18 +94,7 @@ export function SpecifierComparePage({ initialLeft, initialRight }: { initialLef
 
   return (
     <SpecifierPageShell>
-      <SpecifierBreadcrumbs current="Compare" />
-
-      <header className="grid gap-2 border-b border-[color:var(--border)] pb-5">
-        <p className={eyebrowText}>Close-call reasoning</p>
-        <h1 className="text-3xl font-extrabold tracking-tight text-[color:var(--text-heading)] sm:text-4xl">
-          Compare specifiers
-        </h1>
-        <p className="max-w-3xl text-sm font-medium leading-6 text-[color:var(--text-muted)]">
-          Clarify the deciding signal, chronology, and common overcalls. This comparison changes as you choose either
-          specifier.
-        </p>
-      </header>
+      <SpecifierToolHeader icon={GitCompareArrows} title="Compare specifiers" />
 
       <section
         className={cn(

src/components/specifiers/specifier-map-page.tsx

@@ -6,10 +6,10 @@ import { useState } from "react";
 
 import {
   DiagnosisChips,
-  SpecifierBreadcrumbs,
   SpecifierFamilyBadge,
   SpecifierPageShell,
   SpecifierSafetyNote,
+  SpecifierToolHeader,
   SpecifierWordingPathway,
   specifierCard,
 } from "@/components/specifiers/specifier-ui";
@@ -22,18 +22,7 @@ export function SpecifierMapPage({ initialSlug }: { initialSlug?: string }) {
 
   return (
     <SpecifierPageShell>
-      <SpecifierBreadcrumbs current="Map" />
-
-      <header className="grid gap-2 border-b border-[color:var(--border)] pb-5">
-        <p className={eyebrowText}>Diagnostic architecture</p>
-        <h1 className="text-3xl font-extrabold tracking-tight text-[color:var(--text-heading)] sm:text-4xl">
-          Specifier map
-        </h1>
-        <p className="max-w-3xl text-sm font-medium leading-6 text-[color:var(--text-muted)]">
-          Browse by the job each specifier performs. The sequence keeps diagnostic wording clear without implying that
-          every diagnosis uses every category.
-        </p>
-      </header>
+      <SpecifierToolHeader icon={Waypoints} title="Specifier map" />
 
       <SpecifierWordingPathway />
 

src/components/specifiers/specifier-ui.tsx

@@ -15,6 +15,25 @@ export function SpecifierPageShell({ children, className }: { children: ReactNod
   return <InformationPageShell className={className}>{children}</InformationPageShell>;
 }
 
+export function SpecifierToolHeader({
+  icon: Icon,
+  title,
+}: {
+  icon: ComponentType<{ className?: string; "aria-hidden"?: boolean }>;
+  title: string;
+}) {
+  return (
+    <header className="flex items-center gap-3 border-b border-[color:var(--border)] pb-4 sm:gap-4 sm:pb-5">
+      <span className="grid size-12 shrink-0 place-items-center rounded-xl bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)] ring-1 ring-inset ring-[color:var(--clinical-accent-border)] sm:size-12">
+        <Icon className="size-icon-lg" aria-hidden />
+      </span>
+      <h1 className="text-balance text-2xl font-extrabold leading-tight tracking-tight text-[color:var(--text-heading)] sm:text-3xl">
+        {title}
+      </h1>
+    </header>
+  );
+}
+
 export function SpecifierBreadcrumbs({ current }: { current?: string }) {
   return <InformationPageBreadcrumbs home={{ label: "Specifiers", href: "/specifiers" }} current={current} />;
 }
@@ -54,7 +73,7 @@ export function SpecifierWordingPathway() {
 }
 
 const familyChipBase =
-  "inline-flex min-h-tap shrink-0 items-center rounded-lg border px-3 text-xs font-semibold transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)] sm:text-sm";
+  "inline-flex min-h-12 shrink-0 items-center rounded-lg border px-3 text-xs font-semibold transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)] sm:text-sm";
 const familyChipActive =
   "border-[color:var(--clinical-accent)] bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)]";
 const familyChipIdle =
@@ -105,7 +124,7 @@ export function SpecifierDiagnosisFilter({
     <label
       className={cn(
         // Content-sized control: wide enough for “All diagnoses” without becoming a full-width field.
-        "relative inline-flex min-h-tap w-auto max-w-full shrink-0 items-center gap-1.5 rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] py-1 pl-2.5 pr-7 text-xs font-bold shadow-[var(--shadow-inset)]",
+        "relative inline-flex min-h-12 w-auto max-w-full shrink-0 items-center gap-1.5 rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] py-1 pl-2.5 pr-7 text-xs font-bold shadow-[var(--shadow-inset)]",
         "focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-[color:var(--focus)]",
       )}
     >

tests/ui-route-coverage.spec.ts

@@ -432,6 +432,7 @@ test.describe("previously uncovered production routes", () => {
       async (currentPage) => {
         await expect(currentPage.getByRole("main")).toBeVisible();
         await expect(currentPage.getByRole("heading", { name: "Compare specifiers", level: 1 })).toBeVisible();
+        await expect(currentPage.getByRole("navigation", { name: "Breadcrumb" })).toHaveCount(0);
       },
       async (currentPage) => {
         const selects = currentPage.locator("select");
@@ -453,6 +454,7 @@ test.describe("previously uncovered production routes", () => {
       async (currentPage) => {
         await expect(currentPage.getByRole("main")).toBeVisible();
         await expect(currentPage.getByRole("heading", { name: "Specifier map", level: 1 })).toBeVisible();
+        await expect(currentPage.getByRole("navigation", { name: "Breadcrumb" })).toHaveCount(0);
       },
       async (currentPage) => {
         const mixedFeatures = currentPage.getByRole("button", { name: "Mixed features" });