import type {  EnvironmentId,  PullRequestCheck,  PullRequestChecksState,  PullRequestRef,  ScopedThreadRef,} from "@t3tools/contracts"; import { useOpenLink } from "~/browser/useOpenLink";import { cn } from "~/lib/utils";import { pullRequestEnvironment } from "~/state/pullRequests";import { useEnvironmentQuery } from "~/state/query"; import { Popover, PopoverPopup, PopoverTrigger } from "../ui/popover";import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";import { toastManager } from "../ui/toast";import {  PullRequestCheckStatusIcon,  pullRequestCheckStatusLabel,  pullRequestChecksStatePresentation,  summarizePullRequestChecks,} from "./pullRequestPresentation"; /** * The checks behind the rollup, for a row that only carries the rollup. Mounted by the popup, so * the read starts when somebody opens it rather than once per row of a listing — the detail read * is a request per pull request, and a page of them at rest would be a hundred. */function LazyChecksBody({  environmentId,  reference,  threadRef,}: {  environmentId: EnvironmentId;  reference: PullRequestRef;  threadRef: ScopedThreadRef | null;}) {  const detailQuery = useEnvironmentQuery(    pullRequestEnvironment.detail({ environmentId, input: reference }),  );  if (detailQuery.error !== null) {    return <p className="text-muted-foreground text-xs">{detailQuery.error}</p>;  }  if (detailQuery.data === null) {    return (      <p className="text-muted-foreground text-xs">        {detailQuery.isPending ? "Loading checks…" : "No checks reported"}      </p>    );  }  return <ChecksBody checks={detailQuery.data.checks} threadRef={threadRef} />;} function ChecksBody({  checks,  threadRef,}: {  checks: ReadonlyArray<PullRequestCheck>;  threadRef: ScopedThreadRef | null;}) {  const openLink = useOpenLink(threadRef);  if (checks.length === 0) {    return <p className="text-muted-foreground text-xs">No checks reported</p>;  }  return (    <ul className="flex flex-col gap-1">      {/* Keyed by position as well as by name: the host is the one that decides how many runs          share a name, and a repeated key is a rendering fault rather than a wrong list. */}      {checks.map((check, index) => (        <li key={`${index}:${check.name}`} className="flex items-center gap-2 text-xs">          <PullRequestCheckStatusIcon status={check.status} />          <Tooltip>            <TooltipTrigger              render={<span className="min-w-0 flex-1 truncate">{check.name}</span>}            />            <TooltipPopup side="top">{check.description ?? check.name}</TooltipPopup>          </Tooltip>          <span className="shrink-0 text-muted-foreground">            {pullRequestCheckStatusLabel(check)}          </span>          {check.url === null ? null : (            <button              type="button"              className="shrink-0 text-primary hover:underline"              onClick={() => {                if (!check.url) return;                void openLink(check.url).catch((error: unknown) => {                  console.error(error);                  toastManager.add({ type: "error", title: "Unable to open check details" });                });              }}            >              Details            </button>          )}        </li>      ))}    </ul>  );} /** * The checks indicator and what it opens, in both places a change request is shown: a listing * row, which knows only the rollup, and the detail header, which is already holding every check. * * `checks` decides between the two. Given them, nothing is read; without them, the popup reads * the detail itself, which is why the row must also say which environment it came from. */export function PullRequestChecksPopover({  checksState,  checks,  environmentId,  reference,  threadRef = null,  className,}: {  checksState: PullRequestChecksState;  /** The checks already in hand, for the detail header. Absent on a listing row. */  checks?: ReadonlyArray<PullRequestCheck>;  environmentId?: EnvironmentId;  reference?: PullRequestRef;  /** Thread the popover sits beside; a listing row has none. */  threadRef?: ScopedThreadRef | null;  className?: string;}) {  const presentation = pullRequestChecksStatePresentation(checksState);  // Counts beat the rollup's own wording where they are known, the way GitHub's own header reads.  const summary = checks === undefined ? null : summarizePullRequestChecks(checks);  return (    <Popover>      {/* A listing row is itself a button, so the trigger renders as a span: a nested button is          not valid inside one. The click is stopped here so opening the checks does not also          select the row it sits on. */}      <PopoverTrigger        nativeButton={false}        render={          <span            role="button"            tabIndex={0}            aria-label={`Checks: ${presentation.label}`}            className={cn("inline-flex shrink-0 cursor-pointer items-center", className)}          />        }        onClick={(event) => event.stopPropagation()}      >        <presentation.Icon aria-hidden className={cn("size-3.5", presentation.toneClassName)} />      </PopoverTrigger>      <PopoverPopup align="start" className="w-80 max-w-full" side="bottom">        <p className="mb-2 font-medium text-sm">{presentation.label}</p>        {summary === null ? null : <p className="mb-2 text-muted-foreground text-xs">{summary}</p>}        {checks !== undefined ? (          <ChecksBody checks={checks} threadRef={threadRef} />        ) : environmentId !== undefined && reference !== undefined ? (          <LazyChecksBody            environmentId={environmentId}            reference={reference}            threadRef={threadRef}          />        ) : null}      </PopoverPopup>    </Popover>  );}