@delmaredigital/payload-experiments 0.2.0-rc.7 → 0.3.0-rc.1

package/dist/admin/surface/results/ResultsHeader.js

@@ -0,0 +1,177 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { formatAdminURL } from 'payload/shared';
+import { SurfaceShell } from '../SurfaceShell.js';
+import { Button } from '../../../ui/Button.js';
+import { Banner, StatusChip } from '../../../ui/Feedback.js';
+import { createApi } from '../../api.js';
+import { availableActions, actionGroupLabel } from '../../actions/actions.model.js';
+import { AllocateAction, ConfirmAction } from '../readiness/ActionDialogs.js';
+import { READINESS, daysRemaining, displayDate, nextStep } from '../readiness/readiness.model.js';
+import { READINESS_COPY as R, runningCopy, stoppedCopy, decidedCopy } from '../../copy/readiness.js';
+import { RESULTS_COPY as C } from '../../copy/results.js';
+import { TEST_PAGE } from '../../copy/testPage.js';
+export function ResultsHeader({ test, surface, resultsVersion, children, actions, released }) {
+    const doc = test.doc;
+    const [selected, setSelected] = useState(null);
+    const [people, setPeople] = useState(null);
+    useEffect(()=>{
+        let active = true;
+        if (surface.canReadResults && doc.status === 'running') {
+            void createApi(surface.apiRoute).summary([
+                doc.id
+            ]).then((result)=>{
+                const count = result.ok ? result.data?.[doc.id]?.exposures : undefined;
+                if (active && typeof count === 'number' && Number.isFinite(count)) setPeople(count);
+            }).catch(()=>{});
+        }
+        return ()=>{
+            active = false;
+        };
+    }, [
+        doc.id,
+        doc.status,
+        surface.apiRoute,
+        surface.canReadResults,
+        resultsVersion
+    ]);
+    const decision = doc.decision;
+    const winner = actionGroupLabel(decision?.winnerArm ?? 'control', doc.arms.find((item)=>item.key === decision?.winnerArm)?.label);
+    const available = availableActions({
+        status: doc.status,
+        kind: doc.kind,
+        arms: doc.arms,
+        decision,
+        canManage: surface.canManage
+    }).filter((action)=>doc.status === 'running' ? [
+            'allocate',
+            'stop'
+        ].includes(action.id) : action.id !== 'decide').sort((a, b)=>doc.status === 'running' ? [
+            'allocate',
+            'stop'
+        ].indexOf(a.id) - [
+            'allocate',
+            'stop'
+        ].indexOf(b.id) : 0);
+    const next = nextStep(test.preflight, {
+        ...doc,
+        flagPoints: surface.flagPoints
+    });
+    const ready = Boolean(test.preflight && !test.preflightPending && !test.preflightError && test.preflight.checks.every((check)=>check.ok));
+    const startReason = next?.sentence ?? (!ready ? test.preflightError ? R.checkError : R.checking : undefined);
+    const action = available.find((item)=>item.id === selected);
+    const sentence = doc.status === 'running' ? runningCopy(displayDate(doc.startedAt), people, daysRemaining(doc, Date.now())) : doc.status === 'stopped' ? stoppedCopy(displayDate(doc.stoppedAt)) : doc.status === 'decided' ? decidedCopy(displayDate(doc.decidedAt), winner) : doc.status === 'archived' ? R.archived : null;
+    const testURL = formatAdminURL({
+        adminRoute: surface.adminRoute,
+        path: `/experiments/${encodeURIComponent(String(doc.id))}`
+    });
+    return /*#__PURE__*/ _jsxs(SurfaceShell, {
+        adminRoute: surface.adminRoute,
+        title: doc.name,
+        crumbs: [
+            {
+                label: C.tests,
+                href: formatAdminURL({
+                    adminRoute: surface.adminRoute,
+                    path: '/experiments'
+                })
+            },
+            {
+                label: doc.name,
+                href: testURL
+            },
+            {
+                label: C.results
+            }
+        ],
+        status: /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                /*#__PURE__*/ _jsx("span", {
+                    className: "xp-tests-kind",
+                    children: TEST_PAGE.kinds[doc.kind]
+                }),
+                /*#__PURE__*/ _jsx(StatusChip, {
+                    status: doc.status
+                })
+            ]
+        }),
+        subtitle: /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                sentence ? /*#__PURE__*/ _jsx("p", {
+                    role: "status",
+                    children: sentence
+                }) : null,
+                released,
+                surface.canManage ? test.preflight?.checks.filter((check)=>check.code === 'make-content-unsupported' && check.warning).map((check, index)=>/*#__PURE__*/ _jsx(Banner, {
+                        tone: "warning",
+                        children: READINESS[check.code].next(check.detail, doc)
+                    }, `${check.code}/${index}`)) : null
+            ]
+        }),
+        actions: /*#__PURE__*/ _jsxs("div", {
+            className: "xp-ui-button-group",
+            children: [
+                /*#__PURE__*/ _jsx(Button, {
+                    variant: "quiet",
+                    href: testURL,
+                    children: C.backToSetup
+                }),
+                available.map((item)=>/*#__PURE__*/ _jsx(Button, {
+                        variant: item.tone === 'danger' ? 'danger' : 'secondary',
+                        disabled: item.id === 'start' && !!startReason || !!selected || test.hasUnsaved || test.saving === 'saving' || item.id === 'allocate' && doc.allocation >= 100,
+                        title: item.id === 'start' ? startReason : item.id === 'allocate' && doc.allocation >= 100 ? R.everyone : undefined,
+                        onClick: ()=>setSelected(item.id),
+                        children: item.id === 'allocate' ? R.allocate : item.label
+                    }, item.id)),
+                actions
+            ]
+        }),
+        children: [
+            test.errors._section ? /*#__PURE__*/ _jsx(Banner, {
+                tone: "error",
+                children: test.errors._section
+            }) : null,
+            test.preflightError ? /*#__PURE__*/ _jsx(Banner, {
+                tone: "error",
+                children: test.preflightError
+            }) : null,
+            children,
+            action?.id === 'allocate' ? /*#__PURE__*/ _jsx(AllocateAction, {
+                test: test,
+                surface: surface,
+                onClose: ()=>setSelected(null)
+            }) : action ? /*#__PURE__*/ _jsx(ConfirmAction, {
+                test: test,
+                surface: surface,
+                action: action,
+                winnerLabel: winner,
+                onClose: ()=>setSelected(null)
+            }) : null
+        ]
+    });
+}
+export function ReaderResultsShell({ surface, children, data }) {
+    // CORE-48 sends a missing name as an empty string.
+    const title = data?.experiment?.name?.trim() || C.test;
+    return /*#__PURE__*/ _jsx(SurfaceShell, {
+        adminRoute: surface.adminRoute,
+        title: title,
+        crumbs: [
+            {
+                label: C.tests,
+                href: formatAdminURL({
+                    adminRoute: surface.adminRoute,
+                    path: '/experiments'
+                })
+            },
+            {
+                label: title
+            },
+            {
+                label: C.results
+            }
+        ],
+        children: children
+    });
+}

package/dist/admin/surface/results/recommendation.model.js

@@ -1,3 +1,4 @@
+import { formatDate } from '../../format/date.js';
 import { armLabel } from '../../labels.js';
 import { formatCount, formatPercent } from '../../results/format.js';
 import { RECOMMENDATION_COPY as C, collectingRecommendation, guardrailRecommendation, mixedRecommendation, rolloutCollectingRecommendation, rolloutReadoutRecommendation, runningRecommendation, winnerRecommendation, worseRecommendation, storedGuardrailFinding } from '../../copy/recommendation.js';
@@ -42,12 +43,7 @@ const winner = (ctx)=>label(ctx, ctx.snapshot.winnerArm ?? ctx.snapshot.verdict.
         const days = ctx.plannedDurationDays;
         const start = Date.parse(ctx.phase?.startedAt ?? '');
         const end = days != null && Number.isFinite(days) && days > 0 ? start + days * 86_400_000 : NaN;
-        return Number.isFinite(end) ? runningRecommendation(new Intl.DateTimeFormat('en-US', {
-            month: 'short',
-            day: 'numeric',
-            year: 'numeric',
-            timeZone: 'UTC'
-        }).format(end)) : C.keepRunning;
+        return Number.isFinite(end) ? runningRecommendation(formatDate(end)) : C.keepRunning;
     },
     'no-difference': ()=>C.noDifference,
     'rollout-collecting': (ctx)=>rolloutCollectingRecommendation(winner(ctx)),

package/dist/admin/surface/results/useResults.d.ts

@@ -1,14 +1,17 @@
 import type { DocId, Status } from '../../../types/contracts.js';
 import type { PhaseSummary, ResultsResponse } from '../../../types/endpoints.js';
 import { type ApiResult } from '../../api.js';
+import type { PageReleaseDecision } from '../../results/releasePages.model.js';
 export interface ResultsDocument {
+    flagPoint?: string;
+    kind?: string;
     status: Status;
     arms: Array<{
         key: string;
         kind?: string;
         label?: string;
     }>;
-    decision?: {
+    decision?: PageReleaseDecision & {
         phase: number;
         winnerArm?: string;
     } | null;
@@ -27,18 +30,33 @@ export declare function useResults(id: DocId, { apiRoute, canReadResults, canMan
 }): {
     api: {
         start: (id: DocId) => Promise<ApiResult<import("../../../types/endpoints.js").TransitionSuccess>>;
-        allocate: (id: DocId, body: import("../../../types/endpoints.js").AllocateBody) => Promise<ApiResult<import("../../../types/endpoints.js").TransitionSuccess>>;
-        addMetric: (id: DocId, body: import("../../../types/endpoints.js").AddMetricBody) => Promise<ApiResult<import("../../../types/endpoints.js").TransitionSuccess>>;
+        allocate: (id: DocId, body: import("../../../types/endpoints.js").AllocateBody, options?: {
+            notFound?: string;
+            codes?: Readonly<Record<string, string>>;
+            fallback?: string;
+        }) => Promise<ApiResult<import("../../../types/endpoints.js").TransitionSuccess>>;
+        addMetric: (id: DocId, body: import("../../../types/endpoints.js").AddMetricBody, options?: {
+            notFound?: string;
+            codes?: Readonly<Record<string, string>>;
+            fallback?: string;
+        }) => Promise<ApiResult<import("../../../types/endpoints.js").TransitionSuccess>>;
         stop: (id: DocId) => Promise<ApiResult<import("../../../types/endpoints.js").TransitionSuccess>>;
         decide: (id: DocId, body: import("../../../types/endpoints.js").DecideBody) => Promise<ApiResult<import("../../../types/endpoints.js").TransitionSuccess>>;
         releaseHoldout: (id: DocId) => Promise<ApiResult<import("../../../types/endpoints.js").TransitionSuccess>>;
+        releasePages: (id: DocId) => Promise<ApiResult<import("../../../types/endpoints.js").TransitionSuccess>>;
         makeContent: (id: DocId) => Promise<ApiResult<import("../../../types/endpoints.js").MakeContentResult>>;
+        dismissContentEntry: (id: DocId, body: import("../../../types/endpoints.js").DismissContentEntryBody) => Promise<ApiResult<import("../../../types/endpoints.js").DismissContentEntryResult>>;
+        restoreContentEntry: (id: DocId, body: import("../../../types/endpoints.js").RestoreContentEntryBody) => Promise<ApiResult<import("../../../types/endpoints.js").RestoreContentEntryResult>>;
         archive: (id: DocId, body: import("../../../types/endpoints.js").ArchiveBody) => Promise<ApiResult<import("../../../types/endpoints.js").TransitionSuccess>>;
         preflight: (id: DocId) => Promise<ApiResult<import("../../../types/endpoints.js").PreflightResult>>;
         previewToken: (id: DocId, arm: string) => Promise<ApiResult<import("../../../types/endpoints.js").PreviewTokenResult>>;
         results: (id: DocId, options?: {
             phase?: number;
             series?: boolean;
+        } & {
+            notFound?: string;
+            codes?: Readonly<Record<string, string>>;
+            fallback?: string;
         }) => Promise<ApiResult<ResultsResponse>>;
         recompute: (id: DocId) => Promise<ApiResult<{
             snapshotId: string;

package/dist/admin/surface/results/useResults.js

@@ -85,7 +85,8 @@ export function useResults(id, { apiRoute, canReadResults, canManage = true }) {
             }),
             api.results(id, {
                 phase: round ?? undefined,
-                series: true
+                series: true,
+                notFound: round === null ? undefined : API_MESSAGES.roundNotFound
             })
         ]).then(([document, result])=>{
             if (signal.aborted) return;

package/dist/admin/surface/setting/parts.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useState } from 'react';
-import { CheckboxInput, TextareaInput, TextInput } from '@payloadcms/ui';
+import { Checkbox, Textarea, TextInput, NumberInput, Select } from '../../../ui/Inputs.js';
 import { EDITABLE_BY_STATUS, isEditable } from '../../../collections/experiments/editability.js';
 import { coerceParam, paramIssue, paramsForArm, setParam } from '../../arms/params.model.js';
 import { SETTING_COPY } from '../../copy/setting.js';
@@ -18,36 +18,31 @@ function Binding({ test, surface }) {
     return /*#__PURE__*/ _jsxs("div", {
         className: "xp-setting-binding",
         children: [
-            editable ? /*#__PURE__*/ _jsxs("label", {
-                htmlFor: id,
+            editable ? /*#__PURE__*/ _jsxs(Select, {
+                id: id,
+                label: SETTING_COPY.setting,
+                value: point?.id ?? '',
+                "aria-describedby": point ? `${id}-description` : undefined,
+                onChange: (event)=>{
+                    const current = test.doc;
+                    if (!current || !surface.canManage || !isEditable(current.status, 'flagPoint') || event.target.value === current.flagPoint) return;
+                    const next = surface.flagPoints.find((point)=>point.id === event.target.value);
+                    if (!next) return;
+                    test.stage({
+                        flagPoint: next.id,
+                        arms: bindSetting(current.arms, next)
+                    });
+                    void test.commit();
+                },
                 children: [
-                    SETTING_COPY.setting,
-                    /*#__PURE__*/ _jsxs("select", {
-                        id: id,
-                        value: point?.id ?? '',
-                        "aria-describedby": point ? `${id}-description` : undefined,
-                        onChange: (event)=>{
-                            const current = test.doc;
-                            if (!current || !surface.canManage || !isEditable(current.status, 'flagPoint') || event.target.value === current.flagPoint) return;
-                            const next = surface.flagPoints.find((point)=>point.id === event.target.value);
-                            if (!next) return;
-                            test.stage({
-                                flagPoint: next.id,
-                                arms: bindSetting(current.arms, next)
-                            });
-                            void test.commit();
-                        },
-                        children: [
-                            !point ? /*#__PURE__*/ _jsx("option", {
-                                value: "",
-                                children: SETTING_COPY.choose
-                            }) : null,
-                            surface.flagPoints.map((point)=>/*#__PURE__*/ _jsx("option", {
-                                    value: point.id,
-                                    children: point.label
-                                }, point.id))
-                        ]
-                    })
+                    !point ? /*#__PURE__*/ _jsx("option", {
+                        value: "",
+                        children: SETTING_COPY.choose
+                    }) : null,
+                    surface.flagPoints.map((point)=>/*#__PURE__*/ _jsx("option", {
+                            value: point.id,
+                            children: point.label
+                        }, point.id))
                 ]
             }) : /*#__PURE__*/ _jsxs("p", {
                 title: reason ?? undefined,
@@ -111,7 +106,7 @@ function Parameter({ test, surface, armIndex, paramKey, field }) {
     };
     const control = paramControl(field);
     const shared = {
-        path: id,
+        id,
         label: field.label,
         required: field.required
     };
@@ -146,12 +141,12 @@ function Parameter({ test, surface, armIndex, paramKey, field }) {
                         children: reason
                     }) : null
                 ]
-            }) : control === 'checkbox' ? /*#__PURE__*/ _jsx(CheckboxInput, {
+            }) : control === 'checkbox' ? /*#__PURE__*/ _jsx(Checkbox, {
                 ...shared,
-                id: id,
+                error: issue ?? undefined,
                 name: id,
                 checked: value === true,
-                onToggle: (event)=>save(event.target.checked)
+                onChange: (event)=>save(event.target.checked)
             }) : control === 'segmented' ? /*#__PURE__*/ _jsxs("fieldset", {
                 "aria-describedby": issue ? `${id}-error` : undefined,
                 children: [
@@ -177,61 +172,45 @@ function Parameter({ test, surface, armIndex, paramKey, field }) {
                             }, option.value))
                     })
                 ]
-            }) : control === 'select' ? /*#__PURE__*/ _jsxs("label", {
-                htmlFor: id,
-                children: [
-                    field.label,
-                    /*#__PURE__*/ _jsxs("select", {
-                        id: id,
-                        value: text,
-                        required: field.required,
-                        "aria-invalid": !!issue,
-                        "aria-describedby": issue ? `${id}-error` : undefined,
-                        onChange: (event)=>save(event.target.value),
-                        children: [
-                            /*#__PURE__*/ _jsx("option", {
-                                value: "",
-                                children: SETTING_COPY.empty
-                            }),
-                            field.options?.map((option)=>/*#__PURE__*/ _jsx("option", {
-                                    value: option.value,
-                                    children: option.label
-                                }, option.value))
-                        ]
-                    })
-                ]
-            }) : control === 'number' ? /*#__PURE__*/ _jsxs("label", {
-                htmlFor: id,
+            }) : control === 'select' ? /*#__PURE__*/ _jsxs(Select, {
+                id: id,
+                label: field.label,
+                value: text,
+                required: field.required,
+                error: issue ?? undefined,
+                onChange: (event)=>save(event.target.value),
                 children: [
-                    field.label,
-                    /*#__PURE__*/ _jsx("input", {
-                        id: id,
-                        type: "number",
-                        min: field.min,
-                        max: field.max,
-                        step: "any",
-                        required: field.required,
-                        value: typeof value === 'number' && Number.isFinite(value) || typeof value === 'string' ? value : '',
-                        "aria-invalid": !!issue,
-                        "aria-describedby": issue ? `${id}-error` : undefined,
-                        onChange: (event)=>editDraft(event.target.value)
-                    })
+                    /*#__PURE__*/ _jsx("option", {
+                        value: "",
+                        children: SETTING_COPY.empty
+                    }),
+                    field.options?.map((option)=>/*#__PURE__*/ _jsx("option", {
+                            value: option.value,
+                            children: option.label
+                        }, option.value))
                 ]
-            }) : control === 'textarea' ? /*#__PURE__*/ _jsx(TextareaInput, {
+            }) : control === 'number' ? /*#__PURE__*/ _jsx(NumberInput, {
+                id: id,
+                label: field.label,
+                min: field.min,
+                max: field.max,
+                step: "any",
+                required: field.required,
+                value: typeof value === 'number' && Number.isFinite(value) || typeof value === 'string' ? value : '',
+                error: issue ?? undefined,
+                onChange: (event)=>editDraft(event.target.value)
+            }) : control === 'textarea' ? /*#__PURE__*/ _jsx(Textarea, {
                 ...shared,
-                Error: inlineError,
-                showError: !!issue,
+                error: issue ?? undefined,
                 value: text,
                 onChange: (event)=>editDraft(event.target.value)
             }) : /*#__PURE__*/ _jsx(TextInput, {
                 ...shared,
-                Error: inlineError,
-                showError: !!issue,
-                hasMany: false,
+                error: issue ?? undefined,
                 value: text,
                 onChange: (event)=>editDraft(event.target.value)
             }),
-            arm.kind === 'control' || !editable || control !== 'text' && control !== 'textarea' ? inlineError : null
+            arm.kind === 'control' || !editable || control === 'segmented' ? inlineError : null
         ]
     });
 }
@@ -239,22 +218,30 @@ function VersionContent({ test, surface, armIndex }) {
     const doc = test.doc;
     const arm = doc?.arms[armIndex];
     if (!doc || !arm) return null;
-    if (arm.kind === 'holdout') return /*#__PURE__*/ _jsx("p", {
+    if (arm.kind === 'holdout') return /*#__PURE__*/ _jsx("span", {
+        className: "xp-content-chip",
         children: SETTING_COPY.holdout
     });
     const point = surface.flagPoints.find((point)=>point.id === doc.flagPoint);
     if (!point) return /*#__PURE__*/ _jsx("p", {
         children: SETTING_COPY.choose
     });
-    return /*#__PURE__*/ _jsx("div", {
+    const ready = Object.entries(point.params).every(([key, field])=>!paramIssue(field, paramsForArm(arm, point)[key]));
+    return /*#__PURE__*/ _jsxs("div", {
         className: "xp-setting-values",
-        children: Object.entries(point.params).map(([key, field])=>/*#__PURE__*/ _jsx(Parameter, {
-                test: test,
-                surface: surface,
-                armIndex: armIndex,
-                paramKey: key,
-                field: field
-            }, `${doc.id}:${point.id}:${arm.key}:${key}:${doc.status}:${surface.canManage}`))
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                className: `xp-content-chip ${ready ? 'xp-content-ready' : 'xp-content-empty'}`,
+                children: ready ? SETTING_COPY.valuesReady : SETTING_COPY.setValues
+            }),
+            Object.entries(point.params).map(([key, field])=>/*#__PURE__*/ _jsx(Parameter, {
+                    test: test,
+                    surface: surface,
+                    armIndex: armIndex,
+                    paramKey: key,
+                    field: field
+                }, `${doc.id}:${point.id}:${arm.key}:${key}:${doc.status}:${surface.canManage}`))
+        ]
     });
 }
 export const settingParts = {

package/dist/admin/surface/setting/setting.css

@@ -1,16 +1,4 @@
-.xp-setting-binding select,
-.xp-setting-parameter select,
-.xp-setting-parameter input[type='number'] {
-  display: block;
-  width: 100%;
-  padding: 0.65rem;
-  margin-top: 0.4rem;
-  border: 1px solid var(--xp-border);
-  border-radius: var(--xp-radius);
-  background: var(--xp-input-bg);
-  color: var(--xp-text);
-}
-.xp-setting-values { display: grid; gap: 1rem; }
+.xp-setting-values { display: grid; gap: var(--xp-space-3); }
 .xp-setting-value { white-space: pre-wrap; }
 .xp-setting-lock { color: var(--xp-text-muted); }
 .xp-setting-parameter fieldset { border: 0; padding: 0; margin: 0; }
@@ -25,5 +13,5 @@
   background: var(--xp-input-bg);
   color: var(--xp-text);
 }
-.xp-setting-segments input:checked + span { background: var(--xp-border); border-color: var(--xp-text); }
-.xp-setting-segments input:focus-visible + span { outline: 2px solid var(--xp-text); outline-offset: 2px; }
+.xp-setting-segments input:checked + span { background: var(--xp-accent-subtle); border-color: var(--xp-accent); }
+.xp-setting-segments input:focus-visible + span { outline: 2px solid var(--xp-focus); outline-offset: 2px; }

package/dist/admin/surface/surface.css

@@ -1,50 +1,65 @@
-.xp-tests-surface {
-  min-height: 100dvh;
-  width: 100%;
-  color: var(--xp-text);
-  background: var(--xp-bg);
+/* Full-screen shell shared by every Tests surface. */
+.xp-tests-surface { min-height: 100dvh; width: 100%; color: var(--xp-text); background: var(--xp-bg); font: var(--xp-text-body); }
+.xp-tests-surface a:not(.xp-ui-button) { color: var(--xp-text); }
+.xp-tests-surface a:not(.xp-ui-button):hover { text-decoration: underline; text-underline-offset: 3px; }
+.xp-tests-container { box-sizing: border-box; width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--xp-space-8); }
+.xp-tests-shell-header { background: var(--xp-surface); border-bottom: 1px solid var(--xp-border); }
+.xp-tests-shell-top { display: flex; align-items: center; justify-content: space-between; gap: var(--xp-space-4); min-height: 48px; }
+.xp-tests-shell-top .xp-ui-breadcrumb { min-width: 0; overflow-wrap: anywhere; }
+.xp-tests-shell-top > .xp-ui-button { flex-shrink: 0; }
+.xp-tests-shell-main { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--xp-space-6); padding-top: var(--xp-space-3); padding-bottom: var(--xp-space-6); }
+.xp-tests-shell-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; overflow-wrap: anywhere; }
+.xp-tests-shell-title h1 { margin: 0; font: var(--xp-text-display); letter-spacing: -0.01em; }
+.xp-tests-shell-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--xp-space-2); min-width: 0; }
+.xp-tests-main { padding-block: var(--xp-space-8) 48px; }
+.xp-tests-search { position: relative; width: 260px; max-width: 100%; }
+.xp-tests-search label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
+.xp-tests-search svg { position: absolute; top: 10px; left: 10px; width: 16px; height: 16px; color: var(--xp-text-3); pointer-events: none; }
+.xp-tests-search input { padding-left: var(--xp-space-8); }
+.xp-tests-group { margin-top: var(--xp-space-8); }
+.xp-tests-group:first-child { margin-top: 0; }
+.xp-tests-group-head { display: flex; align-items: baseline; gap: var(--xp-space-2); padding-inline: 2px; margin-bottom: 10px; }
+.xp-tests-group-head h2, h2.xp-tests-group-head { margin: 0; font: 600 15px/22px var(--xp-font); }
+.xp-tests-group-head > span { color: var(--xp-text-3); font: var(--xp-text-small); font-variant-numeric: tabular-nums; }
+.xp-tests-list { border: 1px solid var(--xp-border); border-radius: var(--xp-radius-card); background: var(--xp-surface); }
+.xp-tests-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--xp-space-2) var(--xp-space-6); padding: var(--xp-space-4) var(--xp-space-5); }
+.xp-tests-row + .xp-tests-row { border-top: 1px solid var(--xp-border); }
+.xp-tests-row-main { min-width: 0; overflow-wrap: anywhere; }
+.xp-tests-row-name { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
+.xp-tests-row-name > a { color: var(--xp-text); font: 500 15px/22px var(--xp-font); text-decoration: none; border-radius: var(--xp-radius-chip); }
+.xp-tests-row-name > a:hover { text-decoration: underline; text-underline-offset: 3px; }
+.xp-tests-row-name > a:focus-visible, .xp-tests-group > summary:focus-visible { outline: 2px solid var(--xp-focus); outline-offset: 2px; }
+.xp-tests-kind { display: inline-flex; align-items: center; height: 22px; padding-inline: var(--xp-space-2); border: 1px solid var(--xp-border); border-radius: var(--xp-radius-chip); color: var(--xp-text-2); font: 500 12px/18px var(--xp-font); white-space: nowrap; }
+.xp-tests-row-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--xp-space-1) 14px; margin-top: var(--xp-space-1); color: var(--xp-text-2); font: 400 14px/20px var(--xp-font); }
+.xp-tests-row-action { justify-self: end; }
+.xp-tests-health { display: inline-flex; align-items: center; gap: 7px; font: 500 13px/18px var(--xp-font); }
+.xp-tests-health::before { content: ''; width: var(--xp-space-2); height: var(--xp-space-2); border-radius: 50%; flex: none; }
+.xp-tests-health--red::before { background: var(--xp-error); }
+.xp-tests-health--amber::before { background: var(--xp-warning); }
+.xp-tests-health--green::before { background: var(--xp-success); }
+.xp-tests-group > summary { display: inline-flex; align-items: baseline; gap: var(--xp-space-2); cursor: pointer; list-style: none; border-radius: var(--xp-radius-chip); }
+.xp-tests-group > summary::-webkit-details-marker { display: none; }
+.xp-tests-group > summary .xp-tests-group-head { margin-bottom: 0; }
+.xp-tests-group-chevron { align-self: center; color: var(--xp-text-3); }
+.xp-tests-group[open] .xp-tests-group-chevron { transform: rotate(90deg); }
+.xp-tests-group > summary + .xp-tests-list { margin-top: 10px; }
+.xp-tests-limited { margin-top: var(--xp-space-4); color: var(--xp-text-2); font: var(--xp-text-small); }
+.xp-tests-no-matches { display: flex; flex-wrap: wrap; align-items: center; gap: var(--xp-space-2); }
+.xp-tests-no-matches p { margin: 0; }
+@media (max-width: 720px) {
+  .xp-tests-container { padding-inline: var(--xp-space-4); }
+  .xp-tests-shell-main { flex-direction: column; align-items: stretch; gap: var(--xp-space-4); }
+  .xp-tests-shell-actions { justify-content: flex-start; }
+  .xp-tests-search { width: 100%; }
+  .xp-tests-row { grid-template-columns: minmax(0, 1fr); }
+  .xp-tests-row-action { justify-self: start; }
 }
-.xp-tests-shell-header {
-  display: flex;
-  align-items: center;
-  gap: var(--xp-space-4);
-  padding: var(--xp-space-5) var(--xp-space-6);
-  border-bottom: 1px solid var(--xp-border);
-}
-.xp-tests-main { padding: var(--xp-space-6); }
-.xp-tests-surface a { color: var(--xp-text); }
-.xp-tests-toolbar, .xp-tests-card-heading {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--xp-space-4);
-}
-.xp-tests-toolbar { margin-bottom: var(--xp-space-6); }
+/* Existing screens retain their controls until their design-system lanes. */
+.xp-tests-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--xp-space-4); margin-bottom: var(--xp-space-6); }
 .xp-tests-toolbar h1 { margin: 0; margin-right: auto; }
 .xp-tests-toolbar label { display: grid; gap: var(--xp-space-1); }
-.xp-tests-toolbar input, .xp-tests-surface button {
-  color: var(--xp-text);
-  background: var(--xp-input-bg);
-  border: 1px solid var(--xp-input-border);
-  border-radius: var(--xp-radius);
-  padding: var(--xp-space-2);
-}
-.xp-tests-primary {
-  padding: var(--xp-space-2) var(--xp-space-4);
-  border: 1px solid var(--xp-accent);
-  border-radius: var(--xp-radius);
-}
-.xp-tests-group { margin-bottom: var(--xp-space-6); }
-.xp-tests-group summary { cursor: pointer; padding: var(--xp-space-4) 0; }
-.xp-tests-cards { display: grid; gap: var(--xp-space-4); }
-.xp-tests-card {
-  border: 1px solid var(--xp-border);
-  border-radius: var(--xp-radius-large);
-  padding: var(--xp-space-5);
-  background: var(--xp-surface);
-}
-.xp-tests-card h3 { margin: 0; margin-right: auto; }
-.xp-tests-health { width: var(--xp-space-2); height: var(--xp-space-2); border-radius: 50%; }
-.xp-tests-health--red { background: var(--xp-error); }
-.xp-tests-health--amber { background: var(--xp-warning); }
-.xp-tests-health--green { background: var(--xp-success); }
+.xp-tests-toolbar input, .xp-tests-toolbar button:not(.xp-ui-button) { color: var(--xp-text); background: var(--xp-input-bg); border: 1px solid var(--xp-input-border); border-radius: var(--xp-radius); padding: var(--xp-space-2); }
+.xp-tests-primary { color: var(--xp-text); padding: var(--xp-space-2) var(--xp-space-4); border: 1px solid var(--xp-accent); border-radius: var(--xp-radius); }
+.xp-tests-shell-heading { min-width: 0; }
+.xp-tests-shell-subtitle { margin-top: var(--xp-space-2); color: var(--xp-text-2); font: var(--xp-text-small); }
+.xp-tests-shell-subtitle p { margin: 0; }