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

package/dist/admin/results/CiChart.js

@@ -3,16 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { theme } from '../theme.js';
 import { RESULTS_COPY as C, chartSummary, contentChangeTitle } from '../copy/results.js';
 import { chartModel } from './chart.model.js';
+import { formatDate } from '../format/date.js';
 import { formatPercent } from './format.js';
-const colors = [
-    theme.color.textStrong,
-    theme.color.textMuted,
-    theme.color.borderAccent
-];
-const date = (t)=>new Intl.DateTimeFormat('en-US', {
-        dateStyle: 'medium',
-        timeZone: 'UTC'
-    }).format(t);
+import { seriesColor } from './DataTable.js';
 export function CiChart({ series, metricId, metricName, phase, contentChanges }) {
     const model = chartModel({
         series,
@@ -32,9 +25,6 @@ export function CiChart({ series, metricId, metricName, phase, contentChanges })
             color: theme.color.text
         },
         children: [
-            /*#__PURE__*/ _jsx("h2", {
-                children: C.chart
-            }),
             /*#__PURE__*/ _jsxs("svg", {
                 viewBox: "0 0 760 280",
                 style: {
@@ -42,8 +32,8 @@ export function CiChart({ series, metricId, metricName, phase, contentChanges })
                     height: 'auto'
                 },
                 role: "img",
-                "aria-label": chartSummary(metricName, model.variants.map((variant)=>variant.label).join(', '), date(from), date(to), [
-                    ...new Set(model.markers.map((marker)=>date(marker.t)))
+                "aria-label": chartSummary(metricName, model.variants.map((variant)=>variant.label).join(', '), formatDate(from), formatDate(to), [
+                    ...new Set(model.markers.map((marker)=>formatDate(marker.t)))
                 ]),
                 children: [
                     /*#__PURE__*/ _jsx("line", {
@@ -70,7 +60,7 @@ export function CiChart({ series, metricId, metricName, phase, contentChanges })
                         y: 260,
                         fill: "currentColor",
                         fontSize: 12,
-                        children: date(from)
+                        children: formatDate(from)
                     }),
                     /*#__PURE__*/ _jsx("text", {
                         x: 680,
@@ -78,9 +68,9 @@ export function CiChart({ series, metricId, metricName, phase, contentChanges })
                         textAnchor: "end",
                         fill: "currentColor",
                         fontSize: 12,
-                        children: date(to)
+                        children: formatDate(to)
                     }),
-                    model.variants.map((variant, index)=>{
+                    model.variants.map((variant)=>{
                         const path = (points)=>{
                             let connected = false;
                             return points.map((point)=>{
@@ -93,7 +83,7 @@ export function CiChart({ series, metricId, metricName, phase, contentChanges })
                                 return `${command}${x(point.t)},${y(point.value)}`;
                             }).join(' ');
                         };
-                        const color = colors[index % colors.length];
+                        const color = seriesColor(variant.arm);
                         const upper = variant.points.map((point)=>`${x(point.t)},${y(point.hi ?? high)}`);
                         const lower = [
                             ...variant.points
@@ -140,7 +130,7 @@ export function CiChart({ series, metricId, metricName, phase, contentChanges })
                     model.markers.map((marker, index)=>/*#__PURE__*/ _jsxs("g", {
                             children: [
                                 /*#__PURE__*/ _jsx("title", {
-                                    children: contentChangeTitle(date(marker.t))
+                                    children: contentChangeTitle(formatDate(marker.t))
                                 }),
                                 /*#__PURE__*/ _jsx("line", {
                                     x1: x(marker.t),
@@ -155,7 +145,7 @@ export function CiChart({ series, metricId, metricName, phase, contentChanges })
                 ]
             }),
             /*#__PURE__*/ _jsx("ul", {
-                children: model.variants.map((variant, index)=>/*#__PURE__*/ _jsxs("li", {
+                children: model.variants.map((variant)=>/*#__PURE__*/ _jsxs("li", {
                         style: {
                             color: theme.color.text
                         },
@@ -167,7 +157,7 @@ export function CiChart({ series, metricId, metricName, phase, contentChanges })
                                     width: '1em',
                                     height: '0.5em',
                                     marginRight: '0.5em',
-                                    backgroundColor: colors[index % colors.length]
+                                    backgroundColor: seriesColor(variant.arm)
                                 }
                             }),
                             variant.label

package/dist/admin/results/DataQualityPanel.d.ts

@@ -1,4 +1,6 @@
 import type { DataQualityItem } from './results.model.js';
-export declare function DataQualityPanel({ items }: {
+import './results.css';
+export declare function DataQualityPanel({ items, problem }: {
     items: DataQualityItem[];
-}): import("react").JSX.Element | null;
+    problem?: boolean;
+}): import("react").JSX.Element;

package/dist/admin/results/DataQualityPanel.js

@@ -1,28 +1,37 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { theme } from '../theme.js';
-import { RESULTS_COPY } from '../copy/results.js';
-export function DataQualityPanel({ items }) {
-    if (items.length === 0) return null;
-    return /*#__PURE__*/ _jsxs("section", {
-        className: "xp-data-quality",
-        "aria-label": RESULTS_COPY.quality,
-        style: {
-            color: theme.color.text,
-            background: theme.color.surface,
-            padding: '1rem'
-        },
+import { RESULTS_COPY as C } from '../copy/results.js';
+import './results.css';
+const quality = (item)=>item.id === 'srm' || item.id.startsWith('version-page-unavailable') ? 'problem' : 'watch';
+export function DataQualityPanel({ items, problem = false }) {
+    const overall = problem || items.some((item)=>quality(item) === 'problem') ? 'problem' : items.length ? 'watch' : 'ok';
+    return /*#__PURE__*/ _jsxs("details", {
+        className: "xp-results-panel xp-data-quality",
+        open: overall !== 'ok',
         children: [
-            /*#__PURE__*/ _jsx("h2", {
-                children: RESULTS_COPY.quality
+            /*#__PURE__*/ _jsxs("summary", {
+                children: [
+                    C.quality,
+                    /*#__PURE__*/ _jsx("span", {
+                        className: `xp-quality-chip xp-quality-chip--${overall}`,
+                        children: C.qualityStates[overall]
+                    })
+                ]
             }),
-            /*#__PURE__*/ _jsx("ul", {
-                children: items.map((item)=>/*#__PURE__*/ _jsxs("li", {
+            /*#__PURE__*/ _jsx("section", {
+                "aria-label": C.quality,
+                children: items.length ? items.map((item)=>/*#__PURE__*/ _jsxs("div", {
+                        className: "xp-quality-row",
                         children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                className: `xp-quality-chip xp-quality-chip--${quality(item)}`,
+                                children: C.qualityStates[quality(item)]
+                            }),
                             /*#__PURE__*/ _jsx("p", {
                                 children: item.message
                             }),
                             item.detail ? /*#__PURE__*/ _jsx("p", {
+                                className: "xp-quality-detail",
                                 children: item.detail
                             }) : null,
                             item.shares ? /*#__PURE__*/ _jsx("ul", {
@@ -31,10 +40,14 @@ export function DataQualityPanel({ items }) {
                                     }, index))
                             }) : null,
                             /*#__PURE__*/ _jsx("p", {
+                                className: "xp-quality-next",
                                 children: item.nextStep
                             })
                         ]
-                    }, item.id))
+                    }, item.id)) : /*#__PURE__*/ _jsx("p", {
+                    className: "xp-quality-row",
+                    children: C.qualityOK
+                })
             })
         ]
     });

package/dist/admin/results/DataTable.d.ts

@@ -0,0 +1,16 @@
+import type { ArmRow } from './results.model.js';
+export interface DataTableProps {
+    rows: ArmRow[];
+    caption: string;
+    method: 'sequential' | 'bayesian';
+    metricKind: 'binomial' | 'count' | 'revenue';
+}
+import './results.css';
+export declare const seriesColor: (key: string) => "var(--xp-series-a)" | "var(--xp-series-b)" | "var(--xp-series-muted)" | "var(--xp-series-c)";
+export declare function Swatch({ arm }: {
+    arm: string;
+}): import("react").JSX.Element;
+export declare function DataTable({ rows, caption, metricKind, leader, primary }: DataTableProps & {
+    leader?: string | null;
+    primary?: boolean;
+}): import("react").JSX.Element;

package/dist/admin/results/DataTable.js

@@ -0,0 +1,152 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { RESULTS_COPY as C } from '../copy/results.js';
+import { CappedCell } from './CappedCell.js';
+import './results.css';
+export const seriesColor = (key)=>key === 'variantA' ? 'var(--xp-series-a)' : key === 'variantB' ? 'var(--xp-series-b)' : key === 'variantC' ? 'var(--xp-series-c)' : 'var(--xp-series-muted)';
+export function Swatch({ arm }) {
+    return /*#__PURE__*/ _jsx("span", {
+        className: "xp-results-swatch",
+        style: {
+            background: seriesColor(arm)
+        },
+        "aria-hidden": "true"
+    });
+}
+function updateScrollCues(wrap) {
+    wrap.parentElement?.classList.toggle('has-left', wrap.scrollLeft > 0);
+    wrap.parentElement?.classList.toggle('has-right', wrap.scrollLeft + wrap.clientWidth < wrap.scrollWidth - 1);
+}
+export function DataTable({ rows, caption, metricKind, leader, primary = false }) {
+    const scrollRef = useRef(null);
+    useEffect(()=>{
+        const wrap = scrollRef.current;
+        if (!wrap) return;
+        const update = ()=>updateScrollCues(wrap);
+        update();
+        const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(update);
+        observer?.observe(wrap);
+        if (wrap.firstElementChild) observer?.observe(wrap.firstElementChild);
+        window.addEventListener('resize', update);
+        return ()=>{
+            observer?.disconnect();
+            window.removeEventListener('resize', update);
+        };
+    }, [
+        rows
+    ]);
+    return /*#__PURE__*/ _jsx("div", {
+        className: "xp-data-table-frame",
+        children: /*#__PURE__*/ _jsx("div", {
+            ref: scrollRef,
+            className: "xp-data-table-wrap",
+            tabIndex: 0,
+            role: "region",
+            "aria-label": caption,
+            onScroll: (event)=>updateScrollCues(event.currentTarget),
+            children: /*#__PURE__*/ _jsxs("table", {
+                className: "xp-data-table",
+                children: [
+                    /*#__PURE__*/ _jsx("caption", {
+                        children: caption
+                    }),
+                    /*#__PURE__*/ _jsx("thead", {
+                        children: /*#__PURE__*/ _jsxs("tr", {
+                            children: [
+                                /*#__PURE__*/ _jsx("th", {
+                                    scope: "col",
+                                    children: C.group
+                                }),
+                                /*#__PURE__*/ _jsx("th", {
+                                    scope: "col",
+                                    className: "num",
+                                    children: C.people
+                                }),
+                                primary && metricKind === 'binomial' ? /*#__PURE__*/ _jsx("th", {
+                                    scope: "col",
+                                    className: "num",
+                                    children: C.conversions
+                                }) : null,
+                                /*#__PURE__*/ _jsx("th", {
+                                    scope: "col",
+                                    className: "num",
+                                    children: metricKind === 'binomial' ? C.rate : C.average
+                                }),
+                                /*#__PURE__*/ _jsx("th", {
+                                    scope: "col",
+                                    className: "num",
+                                    children: C.lift
+                                }),
+                                /*#__PURE__*/ _jsx("th", {
+                                    scope: "col",
+                                    className: "num",
+                                    children: C.ci
+                                }),
+                                primary ? /*#__PURE__*/ _jsx("th", {
+                                    scope: "col",
+                                    className: "num",
+                                    children: C.chanceToWin
+                                }) : null
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("tbody", {
+                        children: rows.map((row)=>/*#__PURE__*/ _jsxs("tr", {
+                                className: primary && leader && row.key === leader ? 'is-lead' : undefined,
+                                children: [
+                                    /*#__PURE__*/ _jsxs("th", {
+                                        scope: "row",
+                                        children: [
+                                            /*#__PURE__*/ _jsxs("span", {
+                                                className: "xp-results-group",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Swatch, {
+                                                        arm: row.key
+                                                    }),
+                                                    row.label
+                                                ]
+                                            }),
+                                            row.key === 'holdout' && row.baseline ? /*#__PURE__*/ _jsx("div", {
+                                                className: "muted",
+                                                children: row.baseline
+                                            }) : null
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsx("td", {
+                                        className: "num",
+                                        children: row.n
+                                    }),
+                                    primary && metricKind === 'binomial' ? /*#__PURE__*/ _jsx("td", {
+                                        className: "num",
+                                        children: row.value
+                                    }) : null,
+                                    /*#__PURE__*/ _jsx("td", {
+                                        className: "num",
+                                        children: metricKind === 'revenue' ? /*#__PURE__*/ _jsx(CappedCell, {
+                                            model: {
+                                                ...row.capped,
+                                                notice: undefined
+                                            }
+                                        }) : row.rate ?? row.capped.statistic
+                                    }),
+                                    /*#__PURE__*/ _jsx("td", {
+                                        className: `num${row.baseline ? ' muted' : ''}`,
+                                        children: row.baseline ? '—' : row.lift ?? '—'
+                                    }),
+                                    /*#__PURE__*/ _jsx("td", {
+                                        className: `num${row.baseline ? ' muted' : ''}`,
+                                        children: row.baseline ? '—' : row.comparison?.method === 'sequential' ? row.comparison.adjustedCI ?? row.comparison.ci : row.comparison?.ci ?? '—'
+                                    }),
+                                    primary ? /*#__PURE__*/ _jsx("td", {
+                                        className: "num",
+                                        children: row.baseline ? '—' : row.chanceToWin ?? '—'
+                                    }) : null
+                                ]
+                            }, row.key))
+                    })
+                ]
+            })
+        })
+    });
+}

package/dist/admin/results/StatTile.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+import './results.css';
+export declare function StatTile({ label, value, detail }: {
+    label: string;
+    value: ReactNode;
+    detail?: ReactNode;
+}): import("react").JSX.Element;

package/dist/admin/results/StatTile.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './results.css';
+export function StatTile({ label, value, detail }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "xp-stat-tile",
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: "xp-stat-tile-label",
+                children: label
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "xp-stat-tile-value",
+                children: value
+            }),
+            detail ? /*#__PURE__*/ _jsx("div", {
+                className: "xp-stat-tile-detail",
+                children: detail
+            }) : null
+        ]
+    });
+}

package/dist/admin/results/VerdictHero.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import type { VerdictCardModel, guardrailChips } from './results.model.js';
+export interface VerdictHeroProps {
+    model: VerdictCardModel;
+    guardrails?: ReturnType<typeof guardrailChips>;
+    power?: string | null;
+    collecting?: string | null;
+    sinceShipping?: string | null;
+    meta?: ReactNode;
+    recommendation?: string;
+}
+import './results.css';
+export declare function VerdictHero({ model, guardrails, power, collecting, sinceShipping, meta, recommendation }: VerdictHeroProps): import("react").JSX.Element;

package/dist/admin/results/{VerdictCard.js → VerdictHero.js}

@@ -1,14 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { theme } from '../theme.js';
-export function VerdictCard({ model, guardrails = [], power, collecting, sinceShipping }) {
+import './results.css';
+export function VerdictHero({ model, guardrails = [], power, collecting, sinceShipping, meta, recommendation }) {
     return /*#__PURE__*/ _jsxs("section", {
-        className: "xp-verdict-card",
-        style: {
-            color: theme.color.text,
-            background: theme.color.surface,
-            padding: '1rem'
-        },
+        className: "xp-verdict-hero",
         children: [
             sinceShipping ? /*#__PURE__*/ _jsx("p", {
                 className: "xp-since-shipping",
@@ -30,10 +25,14 @@ export function VerdictCard({ model, guardrails = [], power, collecting, sinceSh
                 className: "xp-collecting",
                 children: collecting
             }) : null,
-            guardrails.length > 0 ? /*#__PURE__*/ _jsx("ul", {
-                className: "xp-guardrails",
+            recommendation ? /*#__PURE__*/ _jsx("p", {
+                className: "xp-recommendation",
+                children: recommendation
+            }) : null,
+            guardrails.length ? /*#__PURE__*/ _jsx("ul", {
+                className: "xp-results-chips",
                 children: guardrails.map((item, index)=>/*#__PURE__*/ _jsxs("li", {
-                        className: "xp-chip",
+                        className: "xp-tests-kind",
                         children: [
                             item.name,
                             ": ",
@@ -44,7 +43,11 @@ export function VerdictCard({ model, guardrails = [], power, collecting, sinceSh
             !('title' in model) && power ? /*#__PURE__*/ _jsx("p", {
                 className: "xp-power",
                 children: power
-            }) : null
+            }) : null,
+            /*#__PURE__*/ _jsx("div", {
+                className: "xp-verdict-meta",
+                children: meta
+            })
         ]
     });
 }

package/dist/admin/results/legacy.d.ts

@@ -0,0 +1,16 @@
+import type { PhaseSummary } from '../../types/endpoints.js';
+import type { ResultsContext } from './results.model.js';
+import type { LegacySnapshot } from './snapshot.js';
+/** Stands in for CORE-15a winnerArm, borrowing the live decision only for the newest rollout. */
+export declare function legacyRolloutLine(snapshot: LegacySnapshot, phase: PhaseSummary, phases: PhaseSummary[], decision?: {
+    winnerArm?: string;
+}): string;
+/** Stands in for CORE-15a minExposuresPerArm; absent historical minima keep the old dash. */
+export declare function legacyMinimum(snapshot: LegacySnapshot, ctx: ResultsContext): number | undefined;
+/** Stands in for CORE-15a minExposuresPerArm by deriving the old notice from the frozen verdict. */
+export declare function legacyTooFew(snapshot: LegacySnapshot): boolean;
+/** Stands in for CORE-15a winnerArm in rollout recommendations using the old recommended arm and label. */
+export declare function legacyRecommendationWinner(snapshot: LegacySnapshot, phase?: PhaseSummary): {
+    key: string | null;
+    label: string;
+};

package/dist/admin/results/legacy.js

@@ -0,0 +1,27 @@
+import { RESULTS_COPY, shippingTitle } from '../copy/results.js';
+import { armLabel } from '../labels.js';
+/** Stands in for CORE-15a winnerArm, borrowing the live decision only for the newest rollout. */ export function legacyRolloutLine(snapshot, phase, phases, decision) {
+    const newestRollout = phases.filter((phase)=>phase.phaseKind === 'rollout').reduce((latest, phase)=>latest === null || phase.phase > latest ? phase.phase : latest, null);
+    const winner = snapshot.winnerArm ?? (snapshot.phase === newestRollout ? decision?.winnerArm : undefined);
+    return shippingTitle(winner ? phase.arms.find((arm)=>arm.key === winner)?.label ?? armLabel(winner) : RESULTS_COPY.shippedGroup);
+}
+/** Stands in for CORE-15a minExposuresPerArm; absent historical minima keep the old dash. */ export function legacyMinimum(snapshot, ctx) {
+    return snapshot.minExposuresPerArm ?? ctx.minExposuresPerArm;
+}
+/** Stands in for CORE-15a minExposuresPerArm by deriving the old notice from the frozen verdict. */ export function legacyTooFew(snapshot) {
+    return snapshot.verdict.code === 'collecting' || snapshot.verdict.code === 'rollout-collecting';
+}
+/** Stands in for CORE-15a winnerArm in rollout recommendations using the old recommended arm and label. */ export function legacyRecommendationWinner(snapshot, phase) {
+    const key = snapshot.winnerArm ?? snapshot.verdict.recommendedArm;
+    const stored = phase?.arms.find((arm)=>arm.key === key)?.label.trim();
+    return {
+        key,
+        label: stored || (key && [
+            'control',
+            'variantA',
+            'variantB',
+            'variantC',
+            'holdout'
+        ].includes(key) ? armLabel(key) : RESULTS_COPY.shippedGroup)
+    };
+}

package/dist/admin/results/releasePages.model.d.ts

@@ -0,0 +1,17 @@
+import type { DocId } from '../../types/contracts.js';
+export interface PageReleaseDecision {
+    winnerArm?: string | null;
+    discardedAt?: string | null;
+    pagesReleasedAt?: string | null;
+    pagesReleasedBy?: string | null;
+}
+/** Mirrors the release-pages transition's gate; permission is checked by the caller. */
+export declare function canReleasePages(doc: {
+    kind?: string;
+    status: string;
+    decision?: PageReleaseDecision | null;
+}): boolean;
+export declare function pagesReleasedBy(by: string | null | undefined, currentUserId?: DocId | null, author?: {
+    name?: string | null;
+    email?: string | null;
+} | null): string | undefined;

package/dist/admin/results/releasePages.model.js

@@ -0,0 +1,10 @@
+import { RESULTS_COPY } from '../copy/results.js';
+/** Mirrors the release-pages transition's gate; permission is checked by the caller. */ export function canReleasePages(doc) {
+    const decision = doc.decision;
+    return doc.kind === 'page' && doc.status === 'archived' && Boolean(decision?.winnerArm) && !decision?.discardedAt && !decision?.pagesReleasedAt;
+}
+export function pagesReleasedBy(by, currentUserId, author) {
+    if (by == null) return undefined;
+    if (currentUserId != null && by === String(currentUserId)) return RESULTS_COPY.you;
+    return author?.name ?? author?.email ?? undefined;
+}

package/dist/admin/results/results.css

@@ -0,0 +1,64 @@
+.xp-results { max-width: 1120px; display: grid; gap: var(--xp-space-8); min-width: 0; }
+.xp-results h2, .xp-results h3, .xp-results p { margin: 0; }
+.xp-verdict-hero { background: var(--xp-surface); border: 1px solid var(--xp-border); border-radius: var(--xp-radius-card); padding: 28px; min-width: 0; }
+.xp-verdict-hero h2 { font: var(--xp-text-display); letter-spacing: -0.01em; max-width: 36ch; }
+.xp-verdict-hero p { margin-top: var(--xp-space-2); color: var(--xp-text-2); }
+.xp-verdict-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--xp-space-3); margin-top: var(--xp-space-5); padding-top: var(--xp-space-4); border-top: 1px solid var(--xp-border); color: var(--xp-text-3); font: var(--xp-text-small); }
+.xp-round-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--xp-space-2); min-width: 0; }
+.xp-round-meta .xp-ui-field { display: flex; align-items: center; gap: var(--xp-space-2); margin: 0; min-width: 0; }
+.xp-round-meta select { width: auto; max-width: 100%; }
+.xp-results-chips { display: flex; flex-wrap: wrap; gap: var(--xp-space-2); list-style: none; padding: 0; margin-bottom: 0; }
+.xp-stat-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--xp-border); border-radius: var(--xp-radius-card); background: var(--xp-surface); overflow: hidden; }
+.xp-stat-tile { padding: 20px; min-width: 0; }
+.xp-stat-tile + .xp-stat-tile { border-left: 1px solid var(--xp-border); }
+.xp-stat-tile-label, .xp-stat-tile-detail { font: var(--xp-text-small); color: var(--xp-text-2); }
+.xp-stat-tile-value { margin-top: 6px; font: 600 32px/36px var(--xp-font); font-variant-numeric: tabular-nums; }
+.xp-stat-tile-detail { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
+.xp-results-block { min-width: 0; }
+.xp-results-block-head { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
+.xp-results-block-head h2 { font: var(--xp-text-title); }
+.xp-results-block-meta { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--xp-text-2); }
+.xp-data-table-frame { position: relative; min-width: 0; border-radius: var(--xp-radius-card); }
+.xp-data-table-wrap { overflow-x: auto; overflow-y: auto; max-height: 70vh; border: 1px solid var(--xp-border); border-radius: var(--xp-radius-card); background: var(--xp-surface); }
+.xp-data-table-wrap:focus-visible { outline: 2px solid var(--xp-focus); outline-offset: 2px; }
+/* Overlays stay visible above opaque sticky headers and the highlighted row. */
+.xp-data-table-frame::before, .xp-data-table-frame::after { content: ''; position: absolute; top: 1px; bottom: 1px; width: var(--xp-space-6); z-index: 3; pointer-events: none; opacity: 0; }
+.xp-data-table-frame::before { left: 1px; border-radius: var(--xp-radius-card) 0 0 var(--xp-radius-card); background: linear-gradient(to right, var(--xp-border-strong), transparent); }
+.xp-data-table-frame::after { right: 1px; border-radius: 0 var(--xp-radius-card) var(--xp-radius-card) 0; background: linear-gradient(to left, var(--xp-border-strong), transparent); }
+.xp-data-table-frame.has-left::before, .xp-data-table-frame.has-right::after { opacity: 1; }
+.xp-data-table { width: 100%; border-collapse: separate; border-spacing: 0; font: 400 14px/20px var(--xp-font); }
+.xp-data-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+.xp-data-table th, .xp-data-table td { padding: 12px 14px; white-space: nowrap; border-bottom: 1px solid var(--xp-border); text-align: left; }
+.xp-data-table thead th { position: sticky; top: 0; z-index: 1; background: var(--xp-surface); font: var(--xp-text-small); color: var(--xp-text-2); }
+.xp-data-table tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--xp-surface); }
+.xp-data-table thead tr > :first-child { z-index: 2; }
+.xp-data-table tbody th { font-weight: 400; }
+.xp-data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
+.xp-data-table .muted { color: var(--xp-text-3); }
+.xp-data-table tr:last-child > * { border-bottom: 0; }
+.xp-data-table tr.is-lead > * { background: var(--xp-surface-2); font-weight: 600; }
+.xp-results-group { display: inline-flex; align-items: center; gap: 8px; }
+.xp-results-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
+.xp-results-panel { border: 1px solid var(--xp-border); border-radius: var(--xp-radius-card); background: var(--xp-surface); min-width: 0; }
+.xp-results-panel > summary { padding: 16px 20px; cursor: pointer; font: var(--xp-text-title); }
+.xp-results-panel > summary:focus-visible { outline: 2px solid var(--xp-focus); outline-offset: 2px; }
+.xp-results-panel > summary .xp-quality-chip { margin-left: 12px; }
+.xp-quality-row { padding: 14px 20px; border-top: 1px solid var(--xp-border); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; }
+.xp-quality-row > :not(:first-child) { grid-column: 2; }
+.xp-quality-row ul { margin: 0; padding-left: 20px; }
+.xp-quality-detail, .xp-quality-next, .xp-results-cap-help { color: var(--xp-text-2); font: var(--xp-text-small); }
+.xp-quality-chip { display: inline-flex; align-self: start; padding: 2px 8px; border-radius: var(--xp-radius-chip); font: var(--xp-text-small); color: var(--xp-success); background: var(--xp-success-bg); }
+.xp-quality-chip--watch { color: var(--xp-warning); background: var(--xp-warning-bg); }
+.xp-quality-chip--problem { color: var(--xp-error); background: var(--xp-error-bg); }
+.xp-ci-chart { padding: 20px; overflow-x: auto; }
+.xp-ci-chart svg { display: block; min-width: 560px; }
+.xp-ci-chart ul { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; margin: 0; padding: 0; font: var(--xp-text-small); }
+.xp-preview-links { display: grid; gap: 12px; }
+.xp-preview-row { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--xp-border); padding-bottom: 12px; }
+@media (max-width: 720px) {
+  .xp-stat-tiles { grid-template-columns: minmax(0, 1fr); }
+  .xp-stat-tile + .xp-stat-tile { border-left: 0; border-top: 1px solid var(--xp-border); }
+  .xp-verdict-hero { padding: 20px; }
+  .xp-verdict-hero h2 { font-size: 24px; line-height: 30px; }
+}
+.xp-results-as-of { color: var(--xp-text-2); }

package/dist/admin/results/results.model.d.ts

@@ -1,13 +1,13 @@
 import type { DocId, Status } from '../../types/contracts.js';
 import type { PhaseSummary, ResultsResponse } from '../../types/endpoints.js';
 import type { Snapshot } from '../../types/snapshot.js';
+import { type DisplaySnapshot } from './snapshot.js';
 type Metric = Snapshot['metrics'][number];
 type Arm = Metric['perArm'][number];
 type Decision = {
     phase: number;
     winnerArm?: string;
 };
-type DisplaySnapshot = Snapshot;
 export declare function defaultRound({ phases, decision, status }: Pick<ResultsResponse, 'phases'> & {
     decision?: Decision | null;
     status: Status;
@@ -26,8 +26,8 @@ export type VerdictCardModel = {
     guardrailLine?: string;
 };
 export declare function verdictCard({ snapshot, decisionSnapshot, isDecidedTestRound, winnerLabel }: {
-    snapshot: Snapshot;
-    decisionSnapshot?: Snapshot;
+    snapshot: DisplaySnapshot;
+    decisionSnapshot?: DisplaySnapshot;
     isDecidedTestRound: boolean;
     winnerLabel: string;
 }): VerdictCardModel;
@@ -66,17 +66,20 @@ export interface ArmRow {
     n: string;
     value: string;
     capped: CappedCellModel;
+    rate?: string;
+    lift?: string;
+    chanceToWin?: string;
     baseline?: string;
     comparison?: ComparisonModel;
 }
 export declare function armRows({ snapshot, phase, metricId }: {
-    snapshot: Snapshot;
+    snapshot: DisplaySnapshot;
     phase: PhaseSummary;
     metricId: DocId;
 }): ArmRow[];
-export declare function guardrailChips(snapshot: Snapshot): {
+export declare function guardrailChips(snapshot: DisplaySnapshot): {
     name: string;
-    status: "Failing" | "OK" | "Watch" | "Too little data";
+    status: "OK" | "Watch" | "Failing" | "Too little data";
 }[];
 interface RoundLineInput {
     snapshot: DisplaySnapshot;
@@ -85,6 +88,7 @@ interface RoundLineInput {
 }
 export declare function powerLine({ snapshot, phaseKind, status }: RoundLineInput): string | null;
 export interface ResultsContext {
+    status?: string;
     phase?: PhaseSummary;
     minExposuresPerArm?: number;
     inLayer?: boolean;
@@ -101,5 +105,5 @@ export interface DataQualityItem {
     shares?: string[];
 }
 export declare function dataQuality(snapshot: DisplaySnapshot, ctx?: ResultsContext): DataQualityItem[];
-export declare function verdictLabel(snapshot: Snapshot): string;
+export declare function verdictLabel(snapshot: DisplaySnapshot): string;
 export {};