> ## Documentation Index
> Fetch the complete documentation index at: https://aspect.build/llms.txt
> Use this file to discover all available pages before exploring further.

# Build Results UI for Bazel: Trends, Flakes and Build Comparison

> Every Bazel build, explained: target trends, flake rates and a verdict on any two builds. Free on Aspect Cloud, and included with every Aspect Enterprise deployment.

export const MarketingPage = () => <div className="marketing-page-marker" style={{
  display: "none"
}} />;

export const CTA = ({title, subtitle, primaryCta, primaryHref = "#", secondaryCta, secondaryHref = "#"}) => <section className="w-full flex justify-center px-4 py-16 md:py-20">
    <div className="w-full rounded-2xl text-white flex flex-col md:flex-row items-center justify-center gap-10 md:gap-16 p-8 md:p-12 text-center md:text-left" style={{
  maxWidth: "1140px",
  background: "linear-gradient(135deg, #1a3a5c 0%, #176ACC 100%)"
}}>
      <div>
        <h2 className="text-2xl md:text-3xl font-semibold tracking-tight">{title}</h2>
        {subtitle && <div className="mt-3 text-blue-100 text-base">{subtitle}</div>}
      </div>
      <div className="flex flex-wrap gap-3 shrink-0 justify-center">
        {primaryCta && <a href={primaryHref} className="inline-flex items-center px-6 py-3 rounded-lg bg-white text-blue-700 font-semibold hover:bg-blue-50 transition whitespace-nowrap shadow-sm">
            {primaryCta}
          </a>}
        {secondaryCta && <a href={secondaryHref} className={`inline-flex items-center px-6 py-3 rounded-lg border border-blue-300/50 text-white font-semibold hover:bg-blue-700/30 transition whitespace-nowrap ${secondaryHref === "/request-demo" ? "demo-gradient-btn" : ""}`}>
            {secondaryCta}
          </a>}
      </div>
    </div>
  </section>;

export const McpMock = () => <div className="mcp-mock" role="img" aria-label="An AI assistant using the Aspect MCP server to explain a failed build">
    <div className="mcp-mock-bar"><span /><span /><span /><span className="mcp-mock-title">AI assistant · aspect mcp</span></div>
    <div className="mcp-mock-body">
      <div className="mcp-msg mcp-user">Why did last night's main build fail? Is it flaky?</div>
      <div className="mcp-tool">list_invocations</div>
      <div className="mcp-tool">tail_build_log</div>
      <div className="mcp-tool">get_target_stats</div>
      <div className="mcp-msg mcp-agent">It failed on <code>//app/server:integration_test</code>, a timeout on the log's last page. That test has failed intermittently across recent main builds, so it's flaky, not broken by this change.</div>
    </div>
  </div>;

export const FeatureShowcase = ({title, description, href, linkText = "Learn more", flipped = false, label, children}) => <div className={`flex flex-col ${flipped ? "md:flex-row-reverse" : "md:flex-row"} items-center gap-10 md:gap-16 py-10`}>
    <div className="flex-1 min-w-0">
      {label && <p className="text-xs font-semibold tracking-widest text-blue-600 dark:text-blue-400 uppercase mb-3">{label}</p>}
      <h3 className="text-2xl md:text-3xl font-bold text-zinc-900 dark:text-white tracking-tight">{title}</h3>
      <p className="mt-4 text-zinc-500 dark:text-zinc-300 leading-relaxed text-base">{description}</p>
      {href && <div className="mt-6">
          <a href={href} className="inline-flex items-center text-blue-600 dark:text-blue-400 font-semibold text-sm hover:underline underline-offset-2">
            {linkText} →
          </a>
        </div>}
    </div>
    <div className="flex-1 min-w-0 feature-showcase-image">
      {children}
    </div>
  </div>;

export const PlatformFeature = ({title, description, href, linkText = "Learn more"}) => <div className="flex flex-col p-5 rounded-xl border border-zinc-200 dark:border-zinc-700/60 bg-white dark:bg-zinc-800/40 hover:border-blue-200 dark:hover:border-blue-700 hover:shadow-sm transition-all duration-200">
    <h3 className="text-sm font-semibold text-zinc-900 dark:text-white">{title}</h3>
    <p className="mt-1.5 text-xs text-zinc-500 dark:text-zinc-400 leading-relaxed">{description}</p>
    {href && <a href={href} className="inline-flex items-center mt-3 text-xs text-blue-600 dark:text-blue-400 font-semibold hover:underline underline-offset-2">
        {linkText} →
      </a>}
  </div>;

export const FeatureGrid3 = ({children}) => <div className="marketing-grid-3">{children}</div>;

export const FeatureGrid2 = ({children}) => <div className="marketing-grid-2">{children}</div>;

export const SectionHeader = ({title, subtitle, centered = true, label}) => <div className={`mb-12 ${centered ? "text-center" : ""}`}>
    {label && <p className="text-xs font-semibold tracking-widest text-blue-600 dark:text-blue-400 uppercase mb-3">
        {label}
      </p>}
    <h2 className="text-3xl md:text-5xl font-semibold text-zinc-900 dark:text-white tracking-tight">{title}</h2>
    {subtitle && <div className={`subtitle-gap text-lg md:text-xl text-zinc-500 dark:text-zinc-300 leading-relaxed ${centered ? "mx-auto" : ""}`} style={{
  marginTop: "1rem",
  maxWidth: centered ? "700px" : "none"
}}>
        {subtitle}
      </div>}
  </div>;

export const Section = ({children, className = "", gray = false, dark = false, id}) => <section id={id} className={`w-full flex justify-center px-4 py-16 md:py-24 ${gray ? "bg-gray-50 dark:bg-zinc-900" : dark ? "bg-zinc-900 dark:bg-zinc-950" : ""} ${className}`}>
    <div className="w-full" style={{
  maxWidth: "1140px"
}}>
      {children}
    </div>
  </section>;

export const Hero = ({title, subtitle, badge, eyebrow, heroImageClassName = "", primaryCta, primaryHref = "#", secondaryCta, secondaryHref = "#", note, centered = true, children}) => <section className="w-full flex justify-center px-4 pt-16 pb-16 md:pt-24 md:pb-24" style={{
  background: "linear-gradient(180deg, var(--hero-gradient-start, #f8fafc) 0%, var(--hero-gradient-end, #ffffff) 100%)"
}}>
    <div className="w-full" style={{
  maxWidth: "1140px"
}}>
      {centered && !children ? <div className="flex flex-col items-center text-center">
          {badge && <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700 text-blue-700 dark:text-blue-300 text-sm font-medium mb-6">
              {badge}
            </div>}
          {eyebrow && <div className="text-xs font-semibold tracking-widest uppercase text-blue-600 dark:text-blue-400 mb-4">
              {eyebrow}
            </div>}
          <h1 className="text-4xl md:text-5xl font-semibold text-zinc-900 dark:text-white leading-tight tracking-tight" style={{
  maxWidth: "820px"
}}>
            {String(title).split(/\\n|\n/).map((line, i) => i ? [<br key={i} />, line] : line)}
          </h1>
          {subtitle && <div className="subtitle-gap text-lg md:text-xl text-zinc-500 dark:text-zinc-300 leading-relaxed" style={{
  marginTop: "1rem",
  maxWidth: "600px"
}}>
              {subtitle}
            </div>}
          {(primaryCta || secondaryCta) && <div className="flex flex-wrap gap-3 mt-10 justify-center">
            {primaryCta && <a href={primaryHref} className="inline-flex items-center px-6 py-3 rounded-lg bg-blue-600 text-white font-semibold hover:bg-blue-700 transition shadow-sm">
                {primaryCta}
              </a>}
            {secondaryCta && <a href={secondaryHref} className={`inline-flex items-center px-6 py-3 rounded-lg border border-zinc-300 dark:border-zinc-600 text-zinc-700 dark:text-zinc-200 font-semibold hover:bg-zinc-50 dark:hover:bg-zinc-800 transition ${secondaryHref === "/request-demo" ? "demo-gradient-btn" : ""}`}>
                {secondaryCta}
              </a>}
          </div>}
          {note && <div className="mt-4 text-sm text-center text-zinc-500 dark:text-zinc-400">{note}</div>}
        </div> : <div className="flex flex-col md:flex-row items-center gap-10 md:gap-16">
          <div className="flex-1 min-w-0">
            {badge && <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700 text-blue-700 dark:text-blue-300 text-sm font-medium mb-6">
                {badge}
              </div>}
            {eyebrow && <div className="text-xs font-semibold tracking-widest uppercase text-blue-600 dark:text-blue-400 mb-4">
                {eyebrow}
              </div>}
            <h1 className="text-4xl md:text-5xl font-semibold text-zinc-900 dark:text-white leading-tight tracking-tight">
            {String(title).split(/\\n|\n/).map((line, i) => i ? [<br key={i} />, line] : line)}
          </h1>
            {subtitle && <div className="subtitle-gap text-lg md:text-xl text-zinc-500 dark:text-zinc-300 leading-relaxed" style={{
  marginTop: "1rem"
}}>
                {subtitle}
              </div>}
            <div className="flex flex-wrap gap-3 mt-8">
              {primaryCta && <a href={primaryHref} className="inline-flex items-center px-6 py-3 rounded-lg bg-blue-600 text-white font-semibold hover:bg-blue-700 transition shadow-sm">
                  {primaryCta}
                </a>}
              {secondaryCta && <a href={secondaryHref} className={`inline-flex items-center px-6 py-3 rounded-lg border border-zinc-300 dark:border-zinc-600 text-zinc-700 dark:text-zinc-200 font-semibold hover:bg-zinc-50 dark:hover:bg-zinc-800 transition ${secondaryHref === "/request-demo" ? "demo-gradient-btn" : ""}`}>
                  {secondaryCta}
                </a>}
            </div>
            {note && <div className="mt-4 text-sm text-zinc-500 dark:text-zinc-400">{note}</div>}
          </div>
          {children && <div className={`flex-1 min-w-0 hero-image ${heroImageClassName}`}>
              {children}
            </div>}
        </div>}
    </div>
  </section>;

<MarketingPage />

<Hero eyebrow="Build Results UI" title={"Every target,\nevery build, explained."} subtitle="Trends, flake rate and artifact size, a verdict on any two builds, and an MCP server for your AI assistant." primaryCta="Get started for free" primaryHref="https://signup.aspect.build/" secondaryCta="Try Aspect Enterprise" secondaryHref="/trial" centered={false} heroImageClassName="hero-image-bleed">
  <div className="browser-frame">
    <img src="https://mintcdn.com/aspectbuild/mPlChZw_LzKUv7Pq/images/marketing/web-ui/builds-overview.png?fit=max&auto=format&n=mPlChZw_LzKUv7Pq&q=85&s=4dad950d7cb6f8647a8881d70476ded6" alt="Builds list in the Build Results UI with pass rate, average build time, and filters" width="1285" height="700" data-path="images/marketing/web-ui/builds-overview.png" />
  </div>
</Hero>

<Section>
  <SectionHeader title="Stop reconstructing builds by hand" subtitle="Answering “why was the build slow?” usually means digging the log out of CI, squinting at a profile, guessing whether the cache worked, and arguing about whether anything changed." />

  <FeatureGrid3>
    <PlatformFeature title="See everything" description="Duration, cache hit rate, targets, actions, output size, and where the time actually went, down to the critical path." />

    <PlatformFeature title="Prove anything" description="“It’s flaky” becomes a number. Every attempt of every test is kept, and any two builds can be compared." />

    <PlatformFeature title="Waste nothing" description="When the cache misses you get the reason. Input churn becomes a number you can attack." />
  </FeatureGrid3>
</Section>

<Section gray>
  <FeatureShowcase label="Trends" title="Every target, across every build" description="Rank every target by volume, critical-path share, P90 wall time, P90 artifact size, cache hit rate, flake rate or pass rate over a day, a month or a year. Then switch from snapshot to trend, where each cell becomes a sparkline with its percentage change. Regressions surface without anyone going looking.">
    <img src="https://mintcdn.com/aspectbuild/mPlChZw_LzKUv7Pq/images/marketing/web-ui/target-trends.png?fit=max&auto=format&n=mPlChZw_LzKUv7Pq&q=85&s=a39e3372b301bcbd7b67645603dcd773" alt="Targets page with month-long sparklines and a ranked target table, including P90 artifact size" width="2336" height="736" data-path="images/marketing/web-ui/target-trends.png" />
  </FeatureShowcase>

  <div className="mt-8">
    <FeatureGrid2>
      <PlatformFeature title="Flakes, with evidence" description="Flake rate and pass rate per target, over time. Every attempt is kept, so a flaky test comes with a number that can outrank feature work." />

      <PlatformFeature title="Team build history" description="Every invocation, newest first, with pass rate and build-time trend on top. Filter by status, repository, branch, author, task, command, CI host, date range or your own custom fields." />

      <PlatformFeature title="Cache, explained" description="A Cache tab on every build, and when the cache misses, the reason: digest mismatch, not cached, or unconditional execution." />

      <PlatformFeature title="Dependency attribution" description="Expand a target to see its dependencies with their own critical-path share. “My test is slow” becomes “this library is on the critical path of most builds.”" />

      <PlatformFeature title="Artifact size, per target" description="Sort by P90 artifact size to find the targets whose outputs keep growing, before they slow down every cache download and deploy." />

      <PlatformFeature title="Build Results API" description="Scripts get the same build and test results you see, over a REST API." href="/docs/aspect-workflows/platform/guides/build-results-api" linkText="Read the API guide" />
    </FeatureGrid2>
  </div>
</Section>

<Section>
  <FeatureShowcase flipped label="MCP server" title="Your AI assistant reads the same builds you do" description="Fourteen read-only tools cover builds, logs, targets, metrics, and cross-build failure and flake rates. It signs in with your stored login, so there's no URL or token to configure, and it can't start, cancel or change a build. On Aspect Cloud and Aspect Enterprise." href="/docs/aspect-workflows/platform/guides/build-results-mcp" linkText="Set up the MCP server">
    <McpMock />
  </FeatureShowcase>
</Section>

<Section gray>
  <FeatureShowcase label="Compare builds" title="The tab that ends the argument" description="Pick any two builds, or shift-click them in the list, and get the verdict first: faster or slower, and by how much. Then the deltas, a likely cause, the targets whose outcome changed, the cache-miss blast radius, and the command-line flags diffed. When a build gets slower and nobody changed anything, something changed. Usually a flag.">
    <img src="https://mintcdn.com/aspectbuild/mPlChZw_LzKUv7Pq/images/marketing/web-ui/build-compare.png?fit=max&auto=format&n=mPlChZw_LzKUv7Pq&q=85&s=81a8f96973b38cd0fc5a99c80e4a423a" alt="Comparing two builds: duration, cache hit, actions and critical-path deltas with a likely cause" width="1225" height="285" data-path="images/marketing/web-ui/build-compare.png" />
  </FeatureShowcase>
</Section>

<Section>
  <SectionHeader title="One build, every angle" />

  <div className="marketing-grid-2" style={{ rowGap: "3rem" }}>
    <div>
      <div className="shot-frame">
        <img src="https://mintcdn.com/aspectbuild/mPlChZw_LzKUv7Pq/images/marketing/web-ui/build-overview.png?fit=max&auto=format&n=mPlChZw_LzKUv7Pq&q=85&s=92cbbc6c7edabd2089373f4ce8b8256e" alt="Build overview with the metric strip and where the time went" width="2332" height="736" data-path="images/marketing/web-ui/build-overview.png" />
      </div>

      <h3 style={{ marginTop: "1.25rem" }} className="text-lg font-semibold text-zinc-900 dark:text-white">The whole invocation on one page</h3>
      <div className="mt-2 text-sm text-zinc-500 dark:text-zinc-400 leading-relaxed">Duration, cache hit rate, targets, actions executed, output bytes and parallelism, then where the time went and the critical path: the chain you'd have to shorten to make the build faster.</div>
    </div>

    <div>
      <div className="shot-frame">
        <img src="https://mintcdn.com/aspectbuild/mPlChZw_LzKUv7Pq/images/marketing/web-ui/build-timeline.png?fit=max&auto=format&n=mPlChZw_LzKUv7Pq&q=85&s=1ac2f5f8aa49aa7d30e884f4d3f94e7f" alt="Build timeline showing the critical path, main thread, and evaluator threads" width="1285" height="680" data-path="images/marketing/web-ui/build-timeline.png" />
      </div>

      <h3 style={{ marginTop: "1.25rem" }} className="text-lg font-semibold text-zinc-900 dark:text-white">The Bazel profile, in the browser</h3>
      <div className="mt-2 text-sm text-zinc-500 dark:text-zinc-400 leading-relaxed">The build timeline renders in place, with the critical path on top. Zoom, pan, measure a span, and highlight by target or mnemonic to find one action among a hundred thousand.</div>
    </div>

    <div>
      <div className="shot-frame">
        <img src="https://mintcdn.com/aspectbuild/mPlChZw_LzKUv7Pq/images/marketing/web-ui/build-targets.png?fit=max&auto=format&n=mPlChZw_LzKUv7Pq&q=85&s=e7be759250ae835ca6b2b07a6fa656ad" alt="Targets tab listing each target with its result, rule, and whether it was cached or built locally" width="1285" height="640" data-path="images/marketing/web-ui/build-targets.png" />
      </div>

      <h3 style={{ marginTop: "1.25rem" }} className="text-lg font-semibold text-zinc-900 dark:text-white">Reduce the noise</h3>
      <div className="mt-2 text-sm text-zinc-500 dark:text-zinc-400 leading-relaxed">Every target with its result, its rule, and whether it came from the cache or was built locally, filtered down to the one you care about. Logs are searchable, downloadable and full-screen.</div>
    </div>

    <div>
      <div className="shot-frame">
        <img src="https://mintcdn.com/aspectbuild/mPlChZw_LzKUv7Pq/images/marketing/web-ui/build-tests.png?fit=max&auto=format&n=mPlChZw_LzKUv7Pq&q=85&s=de14a392d4a2bf3fcc22978ce8e85173" alt="Tests filter showing each test target's result, rule, source and duration, with one expanded to its attempts" width="1285" height="620" data-path="images/marketing/web-ui/build-tests.png" />
      </div>

      <h3 style={{ marginTop: "1.25rem" }} className="text-lg font-semibold text-zinc-900 dark:text-white">Inspect your tests to find what failed</h3>
      <div className="mt-2 text-sm text-zinc-500 dark:text-zinc-400 leading-relaxed">Every test target with its result, where it ran and how long it took. Expand one to see each attempt: attempt one timed out, attempt two passed, and both logs are still there.</div>
    </div>
  </div>
</Section>

<Section gray>
  <FeatureShowcase flipped title="The Workflows bot leads you to your CI results" description="The Workflows bot for GitHub and GitLab posts live-updating CI results directly to your PR with one click into the Build Results UI. Share a deep link to the exact invocation instead of pasting log fragments into Slack.">
    <img src="https://mintcdn.com/aspectbuild/4wAijf_e0qg5Bve0/images/marketing/web-ui/marvin-pr-comment.webp?fit=max&auto=format&n=4wAijf_e0qg5Bve0&q=85&s=556a01dcad48d5248d83fc93e6d69f10" alt="Workflows bot comment on a GitHub pull request listing each Aspect Workflows task with its status, duration, and links to the build results" width="1432" height="1552" data-path="images/marketing/web-ui/marvin-pr-comment.webp" />
  </FeatureShowcase>
</Section>

<Section>
  <SectionHeader title="Built on the protocol you already emit" subtitle="It reads the Build Event Protocol, the stream Bazel already produces, so it knows targets, actions and test attempts rather than job output. Nothing to instrument, no fork, no plugin." />

  <FeatureGrid2>
    <div className="flex flex-col p-8 rounded-xl border-2 border-blue-600 bg-white dark:bg-zinc-800">
      <div className="text-xs font-semibold tracking-widest uppercase text-blue-600 dark:text-blue-400">Aspect Cloud</div>
      <h3 className="mt-2 text-xl font-bold text-zinc-900 dark:text-white">Nothing to deploy</h3>

      <ul className="check-list mt-4 space-y-2 text-sm text-zinc-600 dark:text-zinc-400">
        <li>Sign up and point your repository at it</li>
        <li>Scoped to your organization</li>
        <li>Free for 10 users and 1 TB of cache egress a month</li>
      </ul>

      <div className="mt-auto pt-6">
        <a href="https://signup.aspect.build/" className="flex items-center justify-center px-6 py-3 rounded-lg bg-blue-600 text-white font-semibold hover:bg-blue-700 transition">Get started for free</a>
      </div>
    </div>

    <div className="flex flex-col p-8 rounded-xl border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800">
      <div className="text-xs font-semibold tracking-widest uppercase text-zinc-500 dark:text-zinc-400">Aspect Enterprise</div>
      <h3 className="mt-2 text-xl font-bold text-zinc-900 dark:text-white">In every isolated deployment</h3>

      <ul className="check-list mt-4 space-y-2 text-sm text-zinc-600 dark:text-zinc-400">
        <li>Hosted by Aspect or self-hosted in your own AWS or GCP account</li>
        <li>Behind your identity provider with SSO</li>
        <li>SCIM provisioning to sync with your directory, coming soon</li>
      </ul>

      <div className="mt-auto pt-6">
        <a href="/trial" className="flex items-center justify-center px-6 py-3 rounded-lg border border-zinc-300 dark:border-zinc-600 text-zinc-900 dark:text-white font-semibold hover:bg-zinc-50 dark:hover:bg-zinc-700 transition">Start a 30-day trial</a>
      </div>
    </div>
  </FeatureGrid2>

  <p className="mt-8 text-center text-zinc-600 dark:text-zinc-300">
    Not a CI product: it explains your builds, it doesn't run them, and it works alongside the CI you already have.
  </p>
</Section>

<CTA title="Triage your next red build in seconds" subtitle="On Aspect Cloud and on Aspect Enterprise." primaryCta="Get started for free" primaryHref="https://signup.aspect.build/" secondaryCta="Try Aspect Enterprise" secondaryHref="/trial" />


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.