-
-
+
-
- The generated definition for this specifier is withheld pending qualified clinician review. Confirm the
- specifier against current DSM-5-TR / ICD-11 materials before documenting.
-
-
- ) : null}
+
+
+
- {enrichment ? (
-
-
-
-
-
-
Curated clinical reasoning
-
Fit and exclusions
-
-
-
- {enrichment.checks.length ? (
-
- ) : null}
+ {hasWithheldDefinition ? (
+
+
+ The generated definition for this specifier is withheld pending qualified clinician review. Confirm
+ the specifier against current DSM-5-TR / ICD-11 materials before documenting.
+
+
+ ) : null}
- {item.icd11Context ? (
-
- {item.icd11Context}
-
- ) : null}
-
-
-
-
-
-
- {[
- ["Source", sourceStatusLabel[item.review.sourceVerificationStatus]],
- ["Clinician review", "Pending qualified review"],
- ["Source family", item.definition?.sourceFamily ?? item.review.sourceFamily ?? "—"],
- ["Content hash", item.review.contentHash],
- ].map(([label, body]) => (
-
-
{label}
-
{body}
+ {enrichment ? (
+
+
+
+
+
+
Curated clinical reasoning
+
Fit and exclusions
+
+
+
- ))}
-
-
+ {enrichment.checks.length ? (
+
+ ) : null}
+
+ ) : null}
-
- Diagnosis
- {item.disorderName}
-
-
-
+ {item.icd11Context ? (
+
+ {item.icd11Context}
+
+ ) : null}
+
-
More in this diagnosis
+
Review status
- {related.map((entry) => (
-
-
- {entry.label}
-
- {entry.groupLabel}
-
-
-
-
+
+ {[
+ ["Source", sourceStatusLabel[item.review.sourceVerificationStatus]],
+ ["Clinician review", "Pending qualified review"],
+ ["Source family", item.definition?.sourceFamily ?? item.review.sourceFamily ?? "—"],
+ ["Content hash", item.review.contentHash],
+ ].map(([label, body]) => (
+
+
{label}
+ {body}
+
))}
+
+
+
+
+ Diagnosis
+ {item.disorderName}
+
+
- ) : null}
-
-
+
+
More in this diagnosis
+
+ {related.map((entry) => (
+
+
+ {entry.label}
+
+ {entry.groupLabel}
+
+
+
+
+ ))}
+
+ ) : null}
+
+
` while an information page publishes onto
+ * `documentElement` (its header is portaled out of the page subtree on phones,
+ * so there is no single page root that contains both header and anchors).
+ */
+export type StickyChromeMetricsOptions = {
+ /** The universal collapse row, whose height and hide state drive everything. */
+ collapseSelector: string;
+ /** The page-owned sticky header that jumps must clear on sm+. */
+ stickyHeaderSelector: string;
+ phoneMediaQuery: string;
+ /** Custom property carrying the scroll-margin an anchored section needs. */
+ anchorOffsetProperty: string;
+ /** Custom property carrying the page-owned header's measured height. */
+ stickyHeaderHeightProperty: string;
+ /** Optional custom property carrying the live collapse-row height. */
+ collapseHeightProperty?: string;
+ /**
+ * Where the sticky header is looked up and where the properties are published.
+ * A ref scopes both to that page root; `"document"` looks the header up
+ * globally and publishes on `documentElement`.
+ */
+ scope: RefObject | "document";
+};
+
+export function useStickyChromeMetrics({
+ collapseSelector,
+ stickyHeaderSelector,
+ phoneMediaQuery,
+ anchorOffsetProperty,
+ stickyHeaderHeightProperty,
+ collapseHeightProperty,
+ scope,
+}: StickyChromeMetricsOptions) {
+ const [headerHidden, setHeaderHidden] = useState(false);
+
+ useEffect(() => {
+ if (typeof window === "undefined") return;
+
+ const collapse = window.document.querySelector(collapseSelector);
+ const documentScoped = scope === "document";
+ const root = documentScoped ? window.document.documentElement : scope.current;
+ const isPhone = () => window.matchMedia(phoneMediaQuery).matches;
+
+ const stickyHeader = () =>
+ (documentScoped
+ ? window.document.querySelector(stickyHeaderSelector)
+ : root?.querySelector(stickyHeaderSelector)) ?? null;
+
+ const measureStickyHeader = () => stickyHeader()?.offsetHeight ?? 0;
+
+ const syncOffset = () => {
+ if (!root) return;
+ const collapseHidden = collapse?.getAttribute("data-scroll-hidden") === "true";
+ const collapseHeight = collapse && !collapseHidden ? collapse.offsetHeight : 0;
+ // On phones the page-owned header is portaled into the collapse row, so its
+ // height is already folded into `collapseHeight` and must not be added
+ // again. On sm+ both sticky bands pin at top:0 and overlap while the
+ // universal bar is visible; only when that bar hides must the page-owned
+ // sticky header be added so jumps do not land underneath it.
+ const stickyHeaderHeight = isPhone() ? 0 : measureStickyHeader();
+ const anchorClearance = collapseHeight + (collapseHidden ? stickyHeaderHeight : 0);
+ root.style.setProperty(anchorOffsetProperty, `${Math.round(anchorClearance) + 16}px`);
+ root.style.setProperty(stickyHeaderHeightProperty, `${Math.round(stickyHeaderHeight)}px`);
+ // The live height of the universal collapse row, so page-owned sticky
+ // chrome can offset from what is actually on screen rather than from a
+ // hand-copied pixel value that drifts with type size and chrome changes.
+ if (collapseHeightProperty) {
+ root.style.setProperty(collapseHeightProperty, `${Math.round(collapseHeight)}px`);
+ }
+ };
+
+ const syncHidden = () => {
+ setHeaderHidden(collapse?.getAttribute("data-scroll-hidden") === "true");
+ syncOffset();
+ };
+
+ syncHidden();
+
+ const cleanup: Array<() => void> = [];
+
+ if (collapse) {
+ const attributes = new MutationObserver(syncHidden);
+ attributes.observe(collapse, { attributes: true, attributeFilter: ["data-scroll-hidden"] });
+ cleanup.push(() => attributes.disconnect());
+
+ if (typeof ResizeObserver !== "undefined") {
+ const resize = new ResizeObserver(() => window.requestAnimationFrame(syncOffset));
+ resize.observe(collapse);
+ cleanup.push(() => resize.disconnect());
+ }
+ }
+
+ const headerEl = stickyHeader();
+ if (headerEl && typeof ResizeObserver !== "undefined") {
+ const headerResize = new ResizeObserver(() => window.requestAnimationFrame(syncOffset));
+ headerResize.observe(headerEl);
+ cleanup.push(() => headerResize.disconnect());
+ }
+
+ const phoneMedia = window.matchMedia(phoneMediaQuery);
+ const onPhoneChange = () => syncOffset();
+ phoneMedia.addEventListener("change", onPhoneChange);
+ cleanup.push(() => phoneMedia.removeEventListener("change", onPhoneChange));
+
+ return () => cleanup.forEach((dispose) => dispose());
+ // Destructured primitives rather than the options object: an inline object
+ // literal would be a new reference every render and re-run the effect.
+ }, [
+ collapseSelector,
+ stickyHeaderSelector,
+ phoneMediaQuery,
+ anchorOffsetProperty,
+ stickyHeaderHeightProperty,
+ collapseHeightProperty,
+ scope,
+ ]);
+
+ return { headerHidden };
+}
diff --git a/tests/audit-content-services-regressions.test.ts b/tests/audit-content-services-regressions.test.ts
index cfe694e0a..219d691fd 100644
--- a/tests/audit-content-services-regressions.test.ts
+++ b/tests/audit-content-services-regressions.test.ts
@@ -201,7 +201,13 @@ describe("content and services audit regressions", () => {
});
it("claims and renders a form source link only when the record has a URL", () => {
- expect(normalizedFormDetailSource).toContain("sourceHref={form.source?.url ?? null}");
+ // The duplicated `ActionPanel` that used to carry this moved into the
+ // in-page header's actions sheet, so the URL is resolved once, up front —
+ // and the sheet still renders an explicit disabled placeholder rather than
+ // an "Open official source" control that goes nowhere.
+ expect(normalizedFormDetailSource).toContain("const sourceHref = form.source?.url ?? null;");
+ expect(normalizedFormDetailSource).toContain("{sourceHref ? (");
+ expect(normalizedFormDetailSource).toContain("No official source URL is recorded for this form.");
expect(normalizedFormDetailSource).toContain("href={form.source.url}");
expect(normalizedFormDetailSource).toContain('target="_blank"');
expect(normalizedFormDetailSource).toContain('rel="noopener noreferrer"');
diff --git a/tests/in-page-nav-header.dom.test.tsx b/tests/in-page-nav-header.dom.test.tsx
index 2c3868897..f6f791d82 100644
--- a/tests/in-page-nav-header.dom.test.tsx
+++ b/tests/in-page-nav-header.dom.test.tsx
@@ -1,4 +1,5 @@
import { render, screen, waitFor, within } from "@testing-library/react";
+import Link from "next/link";
import userEvent from "@testing-library/user-event";
import { Compass, ShieldCheck, Stethoscope } from "lucide-react";
import { afterEach, describe, expect, it, vi } from "vitest";
@@ -7,6 +8,10 @@ import { InPageNavHeader } from "@/components/in-page-nav/in-page-nav-header";
import { toDocumentSections, type PageSection } from "@/components/in-page-nav/page-section-index";
import { phoneHeaderCollapseAddonSlotId } from "@/lib/mode-home-composer";
+/** Reassigned per case so a rerender can simulate a route change. */
+let pathname: string | null = null;
+vi.mock("next/navigation", () => ({ usePathname: () => pathname }));
+
/** `PhoneHeaderCollapsePortal` resolves its host only below this breakpoint. */
function stubPhoneBreakpoint(isPhone: boolean) {
vi.spyOn(window, "matchMedia").mockImplementation(
@@ -196,6 +201,49 @@ describe("InPageNavHeader", () => {
await waitFor(() => expect(screen.queryByTestId("service-actions-sheet")).toBeNull());
});
+ it("accepts plain node actions from a Server Component page", async () => {
+ // Four of the seven converted pages are Server Components. React cannot pass
+ // a function across that boundary, so the render-prop form alone would fail
+ // to build there; server-rendered JSX passed as a slot is fine.
+ const user = userEvent.setup();
+ renderHeader({
+ actionsNoun: "specifier",
+ actions: undefined}
+ testIdPrefix="service"
+ actionsNoun="specifier"
+ actions={` rendered three of five
+ * declared anchors, and its `/differentials` child rendered one of four.
+ *
+ * The stop rule from that issue is what shapes this file: **assert against the
+ * rendered DOM, never a source grep**. Several anchors reach the DOM through a
+ * prop (`SpecifierSafetyNote id=…`, the local `Section` helper on the services
+ * page), so a scan for `id="…"` reports live sections as dead.
+ */
+type RouteCase = {
+ name: string;
+ sections: readonly PageSection[];
+ render: () => ReactElement;
+ /**
+ * Anchors that legitimately depend on the record. Each is asserted present on
+ * a fixture that has the data and absent on one that does not, rather than
+ * being skipped.
+ */
+ conditional?: readonly string[];
+};
+
+const specifierRecord = specifierRecords[0];
+const specifierCatalogItem = specifierCatalogItems().find((item) => curatedEnrichmentFor(item));
+const dsmDiagnosisWithKeyFeatures = dsmDiagnoses.find(
+ (diagnosis) => diagnosis.key_features.length > 0 && diagnosis.criteria_display.length > 0,
+);
+const dsmDiagnosisWithDifferentials = dsmDiagnoses.find((diagnosis) => diagnosis.differentials.length > 0);
+
+function buildConsiderations(values: string[]): DsmDifferentialConsideration[] {
+ return values.map((value, index) => ({
+ id: `${index}-consideration`,
+ title: value,
+ fullText: value,
+ rationale: "Listed as a differential consideration in the supplied diagnosis record.",
+ group: "overlap",
+ }));
+}
+
+const routes: RouteCase[] = [
+ {
+ name: "/services/[slug]",
+ sections: serviceNavSections,
+ render: () => record.
- //
- // The anchors are planted here rather than taken from the real page on
- // purpose: this asserts branch ORDER only. That form-detail-page.tsx now
- // renders these ids for real is the separate binding guard above — jsdom
- // applies no Tailwind, so `lg:hidden` produces no `display:none` here and
- // this could not tell a -mobile target from its -desktop twin anyway.
- render(
- ,
- );
- expect(await screen.findByRole("navigation", { name: "On this page" })).toBeVisible();
- });
-
it("gives an adopted mode the shared header bar on its workflow routes", () => {
render(
);
@@ -96,8 +95,8 @@ describe("SecondaryNavigation", () => {
sticky={false}
activeId="one"
items={[
- { kind: "section", id: "one", label: "Overview", targetId: "section-one" },
- { kind: "section", id: "two", label: "Safety", targetId: "section-two" },
+ { kind: "action", id: "one", label: "Overview", onSelect: vi.fn() },
+ { kind: "action", id: "two", label: "Safety", onSelect: vi.fn() },
]}
/>,
);
@@ -110,8 +109,8 @@ describe("SecondaryNavigation", () => {
sticky={false}
activeId="two"
items={[
- { kind: "section", id: "one", label: "Overview", targetId: "section-one" },
- { kind: "section", id: "two", label: "Safety", targetId: "section-two" },
+ { kind: "action", id: "one", label: "Overview", onSelect: vi.fn() },
+ { kind: "action", id: "two", label: "Safety", onSelect: vi.fn() },
]}
/>,
);
@@ -120,46 +119,6 @@ describe("SecondaryNavigation", () => {
expect(Element.prototype.scrollIntoView).not.toHaveBeenCalled();
});
- it("uses fragment links, location semantics, history, and reduced-motion-aware scrolling", async () => {
- vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(function getRect(this: HTMLElement) {
- const top = this.id === "section-two" ? 500 : 0;
- return { x: 0, y: top, top, left: 0, right: 100, bottom: top + 40, width: 100, height: 40, toJSON() {} };
- });
- document.documentElement.setAttribute("data-motion", "reduced");
- window.history.replaceState({ nextRouteTree: "preserved" }, "", "/");
-
- render(
-
-
,
- );
-
- await waitFor(() =>
- expect(screen.getByRole("link", { name: "Overview" })).toHaveAttribute("aria-current", "location"),
- );
- const safety = screen.getByRole("link", { name: "Safety" });
- expect(safety).toHaveAttribute("href", "#safety");
- fireEvent.click(safety);
- expect(window.location.hash).toBe("#safety");
- expect(window.history.state).toEqual({ nextRouteTree: "preserved" });
- expect(safety).toHaveAttribute("aria-current", "location");
- expect(Element.prototype.scrollIntoView).toHaveBeenCalledWith({ behavior: "auto", block: "start" });
- });
-
it("implements roving tab focus with Arrow, Home, and End keys", async () => {
const user = userEvent.setup();
render(
);
@@ -184,63 +143,6 @@ describe("SecondaryNavigation", () => {
expect(summary).toHaveAttribute("aria-selected", "true");
});
- it("aligns an initial deep-linked fragment below the pinned bar", async () => {
- window.history.replaceState(null, "", "/#section-two");
- render(
-
-
,
- );
-
- await waitFor(() =>
- expect(screen.getByRole("link", { name: "Safety" })).toHaveAttribute("aria-current", "location"),
- );
- await waitFor(() =>
- expect(Element.prototype.scrollIntoView).toHaveBeenCalledWith({ behavior: "auto", block: "start" }),
- );
- });
-
- it("keeps a fragment-selected section current at the shared scroll-margin offset", async () => {
- let safetyTop = 500;
- vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(function getRect(this: HTMLElement) {
- const top = this.id === "section-two" ? safetyTop : this.tagName === "NAV" ? 0 : -200;
- const height = this.tagName === "NAV" ? 56 : 40;
- return { x: 0, y: top, top, left: 0, right: 100, bottom: top + height, width: 100, height, toJSON() {} };
- });
- vi.mocked(Element.prototype.scrollIntoView).mockImplementation(function scrollIntoView(this: Element) {
- if (this.id === "section-two") safetyTop = 136;
- });
-
- render(
-
-
,
- );
-
- fireEvent.click(screen.getByRole("link", { name: "Safety" }));
- fireEvent.scroll(window);
-
- await waitFor(() =>
- expect(screen.getByRole("link", { name: "Safety" })).toHaveAttribute("aria-current", "location"),
- );
- });
-
it("reveals the active item horizontally without overriding motion preferences", async () => {
document.documentElement.setAttribute("data-motion", "reduced");
const scrollTo = vi.fn();
diff --git a/tests/ui-forms-section-nav.spec.ts b/tests/ui-forms-section-nav.spec.ts
index b2fab3f40..ed8d72396 100644
--- a/tests/ui-forms-section-nav.spec.ts
+++ b/tests/ui-forms-section-nav.spec.ts
@@ -3,18 +3,17 @@ import { expect, test } from "playwright/test";
/**
* `/issues` #256, proven where it actually failed: in the browser.
*
- * `informationPageSectionDefinitions` claims `/forms/
` before the mode
- * branch in `PageSecondaryNavigation`, then `AvailableInformationPageNavigation`
- * drops every section whose `targetIds` are absent from the DOM and returns
- * `null` when all are dropped. `form-detail-page.tsx` rendered no `id`
- * attributes at all, so the route was claimed and nothing was drawn — silently,
- * with no error and no failing test.
+ * The route used to declare its sections in a table beside the page, and the
+ * shell dropped every section whose target was absent from the DOM — so a set
+ * could rot to nothing and the only symptom was a route silently drawing no
+ * navigation, with no error and no failing test. `/forms/` now mounts the
+ * shared `InPageNavHeader` and declares its own sections, but the failure mode
+ * is the same one: `useResolvedPageSections` still drops what it cannot see.
*
- * The unit-level binding guard in `tests/page-secondary-navigation.dom.test.tsx`
- * matches `id="…"` in the source, which is necessary but not sufficient: it
- * cannot see whether an anchor is inside a branch that never renders, and jsdom
- * applies no Tailwind, so it cannot distinguish a `-mobile` target from its
- * `-desktop` twin. Only a real browser at a real width can.
+ * `tests/in-page-nav-route-sections.dom.test.tsx` asserts every declared anchor
+ * renders. That is necessary but not sufficient: jsdom applies no Tailwind, so
+ * it cannot distinguish a `-mobile` target from its `-desktop` twin. Only a real
+ * browser at a real width can.
*/
/**
* A real catalogue slug, not the `/forms/form-1` placeholder the unit tests
@@ -24,22 +23,40 @@ import { expect, test } from "playwright/test";
const FORM_ROUTE = "/forms/transport-crisis-form";
test.describe("Forms section navigation", () => {
- test("renders On this page against anchors the form record actually paints", async ({ page }) => {
+ test("opens a section sheet listing the anchors the form record actually paints", async ({ page }) => {
await page.setViewportSize({ width: 1280, height: 900 });
await page.goto(FORM_ROUTE, { waitUntil: "domcontentloaded" });
- const onThisPage = page.getByRole("navigation", { name: "On this page" });
- await expect(onThisPage).toBeVisible({ timeout: 20_000 });
+ const trigger = page.getByTestId("form-section-trigger");
+ await expect(trigger).toBeVisible({ timeout: 20_000 });
+ await trigger.click();
- // Every declared section resolves. Before the fix this nav did not exist.
- await expect(onThisPage.getByRole("link")).toHaveCount(6);
- await expect(onThisPage.getByRole("link", { name: "Overview" })).toBeVisible();
- await expect(onThisPage.getByRole("link", { name: "Legal boundary" })).toBeVisible();
+ const sheet = page.getByTestId("form-section-sheet");
+ await expect(sheet).toBeVisible();
+ // Every declared section resolves. Before the header existed this route drew
+ // no in-page navigation at all.
+ await expect(sheet.getByRole("button", { name: "Overview" })).toBeVisible();
+ await expect(sheet.getByRole("button", { name: "Legal boundary" })).toBeVisible();
+ await expect(sheet.getByRole("button", { name: "Decision context" })).toBeVisible();
+ await expect(sheet.getByRole("button", { name: "Source / verification" })).toBeVisible();
+ });
+
+ test("moves the reader to a section and records the stable fragment", async ({ page }) => {
+ await page.setViewportSize({ width: 1280, height: 900 });
+ await page.goto(FORM_ROUTE, { waitUntil: "domcontentloaded" });
+
+ await page.getByTestId("form-section-trigger").click();
+ await page.getByTestId("form-section-sheet").getByRole("button", { name: "Source / verification" }).click();
+
+ // The breakpoint-independent fragment, not whichever copy is displayed, so
+ // a link copied on a phone still resolves on a desktop.
+ await expect(page).toHaveURL(/#form-source-verification$/);
+ await expect(page.getByTestId("form-section-sheet")).toBeHidden();
});
test("resolves each breakpoint variant to the side that is actually visible", async ({ page }) => {
// The -mobile/-desktop pairs are the part a source scan cannot check.
- // `AvailableInformationPageNavigation` takes the FIRST VISIBLE target, and
+ // `useResolvedPageSections` takes the FIRST VISIBLE target, and
// `lg:hidden` / `hidden lg:block` make exactly one side display:none per
// width. If both resolved, or neither, the section would silently drop.
for (const [label, width] of [
@@ -48,7 +65,7 @@ test.describe("Forms section navigation", () => {
] as const) {
await page.setViewportSize({ width, height: 900 });
await page.goto(FORM_ROUTE, { waitUntil: "domcontentloaded" });
- await expect(page.getByRole("navigation", { name: "On this page" })).toBeVisible({ timeout: 20_000 });
+ await expect(page.getByTestId("form-detail-header")).toBeVisible({ timeout: 20_000 });
const visible = await page.evaluate(() =>
[
diff --git a/tests/ui-formulation.spec.ts b/tests/ui-formulation.spec.ts
index afb2a463d..45ee9be11 100644
--- a/tests/ui-formulation.spec.ts
+++ b/tests/ui-formulation.spec.ts
@@ -81,14 +81,16 @@ test("searches patient language, opens a mechanism guide, and carries it into th
await page.getByRole("link", { name: "Open Rumination" }).click();
await expect(page).toHaveURL(/\/formulation\/rumination$/, { timeout: 30_000 });
await expect(page.getByRole("heading", { name: "Rumination", exact: true })).toBeVisible();
- // The record's own section label, addressed by id rather than by text. Since
- // the declared section anchors were wired up, `/formulation/` also
- // renders an "On this page" nav whose link carries the same words, and a bare
- // text locator matches both under Playwright strict mode.
+ // The record's own section label, addressed by id rather than by text: the
+ // in-page section sheet carries the same words, and a bare text locator
+ // matches both under Playwright strict mode.
await expect(page.locator("#formulation-what-matters-now-label")).toBeVisible();
+ await page.getByTestId("formulation-section-trigger").click();
await expect(
- page.getByRole("navigation", { name: "On this page" }).getByRole("link", { name: "What matters now", exact: true }),
+ page.getByTestId("formulation-section-sheet").getByRole("button", { name: "What matters now", exact: true }),
).toBeVisible();
+ await page.keyboard.press("Escape");
+ await expect(page.getByTestId("formulation-section-sheet")).toBeHidden();
await page.getByRole("link", { name: "Use in formulation", exact: true }).first().click();
await expect(page.getByRole("heading", { name: "Build a formulation that can be tested" })).toBeVisible();
@@ -128,8 +130,13 @@ test("keeps mobile search, domain filtering, record actions, and universal chrom
await expect(page).toHaveURL(/\/formulation\/worry$/);
}).toPass({ timeout: 30_000 });
await expect(page.getByRole("heading", { name: "Worry", exact: true })).toBeVisible({ timeout: 30_000 });
- await expect(page.getByRole("link", { name: "Compare", exact: true }).last()).toBeVisible();
- await expect(page.getByRole("link", { name: "Use in formulation", exact: true }).first()).toBeVisible();
+ // The record's actions moved into the in-page header's ellipsis sheet.
+ await page.getByTestId("formulation-actions-trigger").click();
+ const mechanismActions = page.getByTestId("formulation-actions-sheet");
+ await expect(mechanismActions.getByRole("link", { name: "Compare", exact: true })).toBeVisible();
+ await expect(mechanismActions.getByRole("link", { name: "Use in formulation", exact: true })).toBeVisible();
+ await page.keyboard.press("Escape");
+ await expect(mechanismActions).toBeHidden();
await expectNoHorizontalOverflow(page);
await expectNoBlockingAxeViolations(page, testInfo);
});
diff --git a/tests/ui-smoke.spec.ts b/tests/ui-smoke.spec.ts
index 68d38e8a8..d2190f491 100644
--- a/tests/ui-smoke.spec.ts
+++ b/tests/ui-smoke.spec.ts
@@ -3031,7 +3031,9 @@ test.describe("Clinical KB UI smoke coverage", () => {
await expect(page).toHaveURL(/\/dsm\/diagnoses\/major-depressive-disorder$/, { timeout: 30_000 });
await expect(page.getByTestId("dsm-diagnosis-page")).toBeVisible({ timeout: 30_000 });
await expect(page.getByRole("heading", { level: 1, name: "Major depressive disorder" })).toBeVisible();
- await expect(page.getByRole("link", { name: "DSM-5 Diagnosis home" })).toHaveAttribute("href", "/dsm");
+ // The breadcrumb row went with the in-page header: its back control is the
+ // one route out to the mode home, and a breadcrumb under it is a second.
+ await expect(page.getByRole("link", { name: "Back to dsm-5" })).toHaveAttribute("href", "/dsm");
await expectNoPageHorizontalOverflow(page);
});
diff --git a/tests/ui-specifiers.spec.ts b/tests/ui-specifiers.spec.ts
index aec4945c9..22ac5c677 100644
--- a/tests/ui-specifiers.spec.ts
+++ b/tests/ui-specifiers.spec.ts
@@ -90,9 +90,9 @@ test("searches clinical language without provenance fields and carries a result
await page.getByRole("link", { name: "Open With mixed features" }).click();
await expect(page).toHaveURL(/\/specifiers\/with-mixed-features$/, { timeout: 30_000 });
await expect(page.getByRole("heading", { name: "With mixed features", exact: true })).toBeVisible();
- // Address the record label by id. Specifier "On this page" labels do not
+ // Address the record label by id. The in-page section sheet's labels do not
// currently include these words, but the formulation sibling failed CI under
- // Playwright strict mode once a nav link shared the same text — pin the
+ // Playwright strict mode once a nav control shared the same text — pin the
// unique target rather than relying on that coincidence.
await expect(page.locator("#what-matters-now")).toBeVisible();
@@ -137,8 +137,13 @@ test("keeps mobile search, filters, results, and the fixed composer usable", asy
await page.getByRole("link", { name: "Open With seasonal pattern" }).click();
await expect(page.getByRole("heading", { name: "With seasonal pattern", exact: true })).toBeVisible();
- await expect(page.getByRole("link", { name: "Compare", exact: true }).last()).toBeVisible();
- await expect(page.getByRole("link", { name: "Build wording", exact: true }).last()).toBeVisible();
+ // The record's actions moved into the in-page header's ellipsis sheet.
+ await page.getByTestId("specifier-actions-trigger").click();
+ const recordActions = page.getByTestId("specifier-actions-sheet");
+ await expect(recordActions.getByRole("link", { name: "Compare", exact: true })).toBeVisible();
+ await expect(recordActions.getByRole("link", { name: "Build wording", exact: true })).toBeVisible();
+ await page.keyboard.press("Escape");
+ await expect(recordActions).toBeHidden();
await expectNoHorizontalOverflow(page);
await expectNoBlockingAxeViolations(page, testInfo);
});
diff --git a/tests/ui-tools.spec.ts b/tests/ui-tools.spec.ts
index e8da24945..5cb1800b3 100644
--- a/tests/ui-tools.spec.ts
+++ b/tests/ui-tools.spec.ts
@@ -2235,14 +2235,20 @@ test.describe("Clinical KB service detail page", () => {
await gotoLauncher(page, "/services/13yarn");
const servicePage = page.locator('[data-testid="service-detail-page"]:visible').last();
- const copyContactButton = servicePage.getByRole("button", { name: "Copy contact" }).last();
await expect(servicePage).toBeVisible();
await expect(servicePage.getByRole("heading", { level: 1, name: "13YARN" })).toBeVisible();
- await expect(servicePage.getByRole("link", { name: "Services" })).toBeVisible();
- await expect(servicePage.getByRole("button", { name: "Save service" })).toBeVisible();
- await expect(copyContactButton).toBeVisible();
- await expect(servicePage.getByRole("link", { name: "Call" })).toHaveAttribute("href", "tel:139276");
- await expect(servicePage.getByRole("button", { name: "Use in navigator" })).toBeVisible();
+ // The record's controls live in the in-page header's actions sheet, and
+ // the header is a sibling of the shell rather than inside it — one page
+ // header per route, portaled into the phone collapse row below `sm`.
+ await expect(page.getByRole("link", { name: "Back to services" })).toBeVisible();
+ await page.getByTestId("service-actions-trigger").click();
+ const actions = page.getByTestId("service-actions-sheet");
+ await expect(actions.getByRole("button", { name: "Save service" })).toBeVisible();
+ await expect(actions.getByRole("button", { name: "Copy contact" })).toBeVisible();
+ await expect(actions.getByRole("link", { name: "Call" })).toHaveAttribute("href", "tel:139276");
+ await expect(actions.getByRole("button", { name: "Use in navigator" })).toBeVisible();
+ await page.keyboard.press("Escape");
+ await expect(actions).toBeHidden();
await expect(page.getByTestId("global-search-input")).toHaveCount(1);
await expect(page.getByTestId("global-search-input")).toBeVisible();
await expect(servicePage.locator('[data-testid="global-search-input"]')).toHaveCount(0);
@@ -2318,7 +2324,8 @@ test.describe("Clinical KB service detail page", () => {
await page.setViewportSize({ width: 1280, height: 900 });
await gotoLauncher(page, "/services/13yarn");
- await page.getByTestId("service-detail-page").getByRole("button", { name: "Use in navigator" }).click();
+ await page.getByTestId("service-actions-trigger").click();
+ await page.getByTestId("service-actions-sheet").getByRole("button", { name: "Use in navigator" }).click();
await expect(page).toHaveURL(/\/services\?/);
await expect(page).toHaveURL(/run=1/);
await expect(page).toHaveURL(/focus=1/);
@@ -2329,15 +2336,22 @@ test.describe("Clinical KB service detail page", () => {
await page.setViewportSize({ width: 1280, height: 900 });
await gotoLauncher(page, "/services/13yarn");
- const servicePage = page.getByTestId("service-detail-page");
- await servicePage.getByRole("button", { name: "Save service" }).click();
+ const actionsTrigger = page.getByTestId("service-actions-trigger");
+ const actions = page.getByTestId("service-actions-sheet");
+
+ // Each action closes the sheet, so the feedback banner it writes has to stay
+ // mounted on the page behind it — that banner is the only confirmation a
+ // save or a copy ever gets.
+ await actionsTrigger.click();
+ await actions.getByRole("button", { name: "Save service" }).click();
await expect(page.getByRole("status")).toContainText("Service saved");
- await expect(servicePage.getByRole("button", { name: "Remove saved service" })).toBeVisible();
- await servicePage.getByRole("button", { name: "Copy contact" }).last().click();
+ await actionsTrigger.click();
+ await expect(actions.getByRole("button", { name: "Remove saved service" })).toBeVisible();
+ await actions.getByRole("button", { name: "Copy contact" }).click();
await expect(page.getByRole("status")).toContainText("Contact copied");
- await servicePage.getByRole("link", { name: "Services" }).click();
+ await page.getByRole("link", { name: "Back to services" }).click();
await expect(page).toHaveURL(/\/services(?:\?|$)/);
});
});
From 5f2c308d181a43d16480a608447b73102de1bc6e Mon Sep 17 00:00:00 2001
From: BigSimmo <87357024+BigSimmo@users.noreply.github.com>
Date: Sun, 9 Aug 2026 09:57:12 +0800
Subject: [PATCH 2/3] docs(ledger): record the in-page-nav PR 2 review
Co-Authored-By: Claude Opus 5
---
docs/branch-review-ledger.md | 1 +
1 file changed, 1 insertion(+)
diff --git a/docs/branch-review-ledger.md b/docs/branch-review-ledger.md
index 4d5d32a14..9e5e14a13 100644
--- a/docs/branch-review-ledger.md
+++ b/docs/branch-review-ledger.md
@@ -761,3 +761,4 @@ Records before 2026-07-28 were written by hand and had drifted: 146 lines carrie
| 2026-08-08 | claude/document-viewer-optimization-tu8tnj | 2359e158cb7bca5954e9c5ee84ca0766964ad901 | PR #1741 document-viewer phone/PWA review-and-fix | supersede: fixed Production UI phone Zoom/section-trigger; handlePdfLoadSuccess clamp; prior P1/P2 fixes retained; merge-tree clean | prior verify:cheap+pr-local green; ui-smoke selectors fixed for overflow Zoom + revealPhoneHeaderControl; no provider gates |
| 2026-08-08 | claude/mode-routing-search-pages-jabe17 | 6d1099b479358caa05c92f236848117feb920d4e | shared-home mode-routed search navigation | no high-confidence P0-P2 PR-introduced defects; prior bug-hunt P1/P2s appear fixed on tip; residual: prescribing submit-from-shared-home URL omits run=1 (pre-existing path), seed effect untested behaviourally, no browser/UI proof this pass | vitest app-modes+search-route-ownership+audit-navigation+pwa-manifest 61 pass; static read of focus files vs origin/main; ledger:lookup NOT REVIEWED; no provider/UI |
| 2026-08-08 | cursor/safety-plan-phone-safe-area-624a (PR #1711) | ad1b1f5db24ed68ee4c0d5963620e4562829884e | heavy review-and-fix PR #1711 | fixed CodeRabbit sm:py guard parity; late-synced #1720 behind-but-clean; no P0/P1; Bugbot none; threads cleared; merge-tree clean; required CI green on 78c14205 pre-sync | vitest safety-plan+standalone 18p; verify:cheap 523/5582; verify:pr-local format+lint+typecheck+test+build+rag-fixtures; Production UI critical+(1)(2)(3)+PR required SUCCESS on 78c14205; no provider gates |
+| 2026-08-09 | claude/inpage-nav-pr-2-6d32f9 | 249526988ea3d65c54e69ee7ca05e514bff50ed8 | in-page-nav PR 2: convert six information routes onto InPageNavHeader; delete the shell-owned pill rail | Shipped as PR #1766. Seven components converted; actions API widened for Server Components; two DSM routes' missing anchors wired; rail and section kind removed; new per-route rendered-DOM section contract added. | verify:pr-local 527/530 files 5708 tests; verify:cheap 529/530 5710 tests; verify:phone-chrome escalated to full Chromium 398 passed then 13/13 updated specs pass; typecheck + prettier clean; Playwright production build compiled. Residual failures proven pre-existing on pristine base 9ab3b73a (issues #285, pr-handoff-stop env). |
From f99c22e1d24cee3f8aa6b7c7e09f1e956831c782 Mon Sep 17 00:00:00 2001
From: BigSimmo <87357024+BigSimmo@users.noreply.github.com>
Date: Sun, 9 Aug 2026 10:44:52 +0800
Subject: [PATCH 3/3] fix(in-page-nav): repair the service-detail test mock and
share the slug-detail test
`InPageNavHeader` calls `usePathname()`, so every test that renders a converted
page needs it on the `next/navigation` mock. `tests/service-detail-page.dom.test.tsx`
mocked only `useRouter`, which failed three cases in CI's Unit coverage job with
`No "usePathname" export is defined on the "next/navigation" mock`. It was the
only such gap: the other eight test files mocking `next/navigation` without
`usePathname` render no converted page.
Review follow-ups:
- `tests/in-page-nav-header.dom.test.tsx` resets its module-level `pathname` in
`beforeEach`. The route-change case left it at `/specifiers/compare`, so
outcomes depended on file order.
- `header-addon-slot.ts` now calls the exported `isSlugDetail` from
`information-pages.ts` instead of its own hand-copied equivalent. Every
claimant route it names must also be `isInformationPage`, and two slug tests
are how that agreement would silently diverge.
Co-Authored-By: Claude Opus 5
---
src/components/mode-nav/header-addon-slot.ts | 17 +++++------------
src/lib/information-pages.ts | 9 ++++++++-
tests/in-page-nav-header.dom.test.tsx | 8 +++++++-
tests/service-detail-page.dom.test.tsx | 3 +++
4 files changed, 23 insertions(+), 14 deletions(-)
diff --git a/src/components/mode-nav/header-addon-slot.ts b/src/components/mode-nav/header-addon-slot.ts
index f71a1dc3e..70977b594 100644
--- a/src/components/mode-nav/header-addon-slot.ts
+++ b/src/components/mode-nav/header-addon-slot.ts
@@ -1,4 +1,5 @@
import { isDocumentViewerOwnedRoute } from "@/components/clinical-dashboard/mobile-composer-reserve";
+import { isSlugDetail } from "@/lib/information-pages";
/**
* Routes whose page already portals a header into the header's single addon
@@ -32,21 +33,13 @@ export function isHeaderAddonSlotOwnedRoute(pathname: string): boolean {
// which portals through `PhoneHeaderCollapsePortal` exactly as the two above
// do. Each is a slug detail page, never the mode home or a
// builder/compare/map/search surface.
- if (isSlugDetailRoute(pathname, "/services")) return true;
- if (isSlugDetailRoute(pathname, "/forms")) return true;
- if (isSlugDetailRoute(pathname, "/specifiers")) return true;
- if (isSlugDetailRoute(pathname, "/formulation")) return true;
+ if (isSlugDetail(pathname, "/services", ["search"])) return true;
+ if (isSlugDetail(pathname, "/forms", ["search"])) return true;
+ if (isSlugDetail(pathname, "/specifiers", ["search"])) return true;
+ if (isSlugDetail(pathname, "/formulation", ["search"])) return true;
// dsm/dsm-diagnosis-page.tsx and dsm/dsm-differential-considerations-page.tsx
// — the record and its `/differentials` child, but not /dsm/search or
// /dsm/compare.
if (pathname.startsWith("/dsm/diagnoses/")) return true;
return false;
}
-
-/** `/services/some-slug`, but not `/services`, `/services/compare` or a deeper path. */
-function isSlugDetailRoute(pathname: string, home: string): boolean {
- if (!pathname.startsWith(`${home}/`)) return false;
- const rest = pathname.slice(home.length + 1);
- if (!rest || rest.includes("/")) return false;
- return !["builder", "compare", "map", "search"].includes(rest);
-}
diff --git a/src/lib/information-pages.ts b/src/lib/information-pages.ts
index 0f045d04e..2389db9ec 100644
--- a/src/lib/information-pages.ts
+++ b/src/lib/information-pages.ts
@@ -22,7 +22,14 @@ export type InformationPageMode =
const TOOL_SUFFIXES = new Set(["builder", "compare", "map"]);
-function isSlugDetail(pathname: string, home: string, extraExcluded: string[] = []): boolean {
+/**
+ * `/services/some-slug`, but not `/services`, a tool suffix, or a deeper path.
+ *
+ * Exported so `isHeaderAddonSlotOwnedRoute` can share the one implementation:
+ * every claimant route it names must also be `isInformationPage`, and a second
+ * hand-copied slug test is how that agreement would silently diverge.
+ */
+export function isSlugDetail(pathname: string, home: string, extraExcluded: string[] = []): boolean {
if (!pathname.startsWith(`${home}/`) || pathname === home) return false;
const rest = pathname.slice(home.length + 1);
if (!rest || rest.includes("/")) return false;
diff --git a/tests/in-page-nav-header.dom.test.tsx b/tests/in-page-nav-header.dom.test.tsx
index f6f791d82..d92d88bcf 100644
--- a/tests/in-page-nav-header.dom.test.tsx
+++ b/tests/in-page-nav-header.dom.test.tsx
@@ -2,7 +2,7 @@ import { render, screen, waitFor, within } from "@testing-library/react";
import Link from "next/link";
import userEvent from "@testing-library/user-event";
import { Compass, ShieldCheck, Stethoscope } from "lucide-react";
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import { InPageNavHeader } from "@/components/in-page-nav/in-page-nav-header";
import { toDocumentSections, type PageSection } from "@/components/in-page-nav/page-section-index";
@@ -12,6 +12,12 @@ import { phoneHeaderCollapseAddonSlotId } from "@/lib/mode-home-composer";
let pathname: string | null = null;
vi.mock("next/navigation", () => ({ usePathname: () => pathname }));
+// Module state, so a case that navigates would otherwise hand its final
+// pathname to whichever case runs next.
+beforeEach(() => {
+ pathname = null;
+});
+
/** `PhoneHeaderCollapsePortal` resolves its host only below this breakpoint. */
function stubPhoneBreakpoint(isPhone: boolean) {
vi.spyOn(window, "matchMedia").mockImplementation(
diff --git a/tests/service-detail-page.dom.test.tsx b/tests/service-detail-page.dom.test.tsx
index 44a81aade..ce1e7690f 100644
--- a/tests/service-detail-page.dom.test.tsx
+++ b/tests/service-detail-page.dom.test.tsx
@@ -6,6 +6,9 @@ import type { ServiceRecord } from "@/lib/service-ranker";
vi.mock("next/navigation", () => ({
useRouter: () => ({ push: vi.fn(), replace: vi.fn(), back: vi.fn() }),
+ // InPageNavHeader derives its sheet state from the pathname; without this the
+ // mock throws before the page renders.
+ usePathname: () => "/services/test-service",
}));
vi.mock("@/components/account-data-provider", () => ({