controlled A/B playground

Compare built code readers

Both candidates are the shipped lf-code widget. One width gesture reaches both; candidate settings stay explicit and copyable.

Which built code-reader treatment should the agent keep?

A · compact · scroll

Measuring…

export function releaseLabel(service, checks) {
  const detail = `${checks.passed} passed · ${checks.pending} pending · ${checks.failed} failed`;
  const state = checks.failed > 0 ? "blocked" : checks.pending > 0 ? "rolling" : "ready";
  return `${service} (${state}): ${detail}`;
}

export function releaseLabels(releases) {
  return releases
    .filter((release) => release.checks.total > 0)
    .map((release) => releaseLabel(release.service, release.checks));
}

B · comfortable · wrap

Measuring…

export function releaseLabel(service, checks) {
  const detail = `${checks.passed} passed · ${checks.pending} pending · ${checks.failed} failed`;
  const state = checks.failed > 0 ? "blocked" : checks.pending > 0 ? "rolling" : "ready";
  return `${service} (${state}): ${detail}`;
}

export function releaseLabels(releases) {
  return releases
    .filter((release) => release.checks.total > 0)
    .map((release) => releaseLabel(release.service, release.checks));
}

Update the built Leaf code reader and show the focused browser measurement test.

Which exact reader element should change?

Targeting keeps element identity separate from the comparison's visual labels and settings.

Built reader treatment

export const summarize = checks =>
  `${checks.passed} passed · ${checks.pending} pending · ${checks.failed} failed`;