From 18c5a1d2dfbb02856ec51b54edac82952852a58a Mon Sep 17 00:00:00 2001
From: maria <maria@kuuro.net>
Date: Fri, 11 Sep 2026 01:23:45 -0300
Subject: [PATCH] fix(web): simplify pull request summary sections (#10612)

---
 .../pullRequest/PullRequestDetailPanel.tsx    |   4 +-
 .../pullRequest/PullRequestMarkdown.tsx       |   8 +-
 .../components/pullRequest/PullRequestRow.tsx |  52 ++---
 .../pullRequest/PullRequestSummaryTab.tsx     | 188 +++++++++---------
 .../pullRequest/ThreadPullRequestsPanel.tsx   |  23 +--
 .../pullRequest/pullRequestPresentation.tsx   |  18 +-
 6 files changed, 152 insertions(+), 141 deletions(-)

diff --git a/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx b/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
index 5b86ef5ee3ba8d3fd705e061ba9c51a2eb214cfa..0284a2e6cdecb6be47b3f563dbc3a926a5e35ab6 100644
--- a/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
@@ -1654,7 +1654,7 @@ export function PullRequestDetailPanel({
                           render={
                             <Button
                               size="xs"
-                              variant="ghost"
+                              variant="outline"
                               aria-label={
                                 handoff?.startsWith("checkout") ? "Checking out..." : "Check out"
                               }
@@ -1734,7 +1734,7 @@ export function PullRequestDetailPanel({
                       <span className="inline-flex shrink-0">
                         <Button
                           size="xs"
-                          variant="default"
+                          variant="destructive-outline"
                           disabled={handoff !== null}
                           onClick={startResolveConflicts}
                           aria-label={
diff --git a/apps/web/src/components/pullRequest/PullRequestMarkdown.tsx b/apps/web/src/components/pullRequest/PullRequestMarkdown.tsx
index edfc1c19f104a17693f2e9dea12897edfeac2546..9a4b63044ad2d47ddac1ce35a956c59c515552cc 100644
--- a/apps/web/src/components/pullRequest/PullRequestMarkdown.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestMarkdown.tsx
@@ -39,7 +39,13 @@ export function PullRequestMarkdown({
     [repositoryUrl],
   );
   return (
-    <div className={cn("space-y-3", className)} data-image-gallery>
+    <div
+      className={cn(
+        "space-y-3 [&_[data-markdown-details]]:border-0 [&_[data-markdown-details-summary]]:text-foreground/80 [&_[data-markdown-details-summary]>svg]:text-muted-foreground/60",
+        className,
+      )}
+      data-image-gallery
+    >
       {segments.map((segment) => {
         if (segment.kind === "markdown") {
           return (
diff --git a/apps/web/src/components/pullRequest/PullRequestRow.tsx b/apps/web/src/components/pullRequest/PullRequestRow.tsx
index be6b61ae2d45ed04c7d819585b1fb8305e75c543..69017444ce80bfee1138be4358da959148395e91 100644
--- a/apps/web/src/components/pullRequest/PullRequestRow.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestRow.tsx
@@ -1,4 +1,4 @@
-import { SearchIcon, UserCheckIcon } from "lucide-react";
+import { SearchIcon } from "lucide-react";
 import { PullRequestStackPopover } from "./PullRequestStackPopover";
 import { memo, type RefCallback } from "react";
 
@@ -14,6 +14,7 @@ import {
   PullRequestActorLabel,
   PullRequestDiffStat,
   PullRequestMetaLine,
+  PullRequestApprovalGlyph,
   PullRequestStateGlyph,
 } from "./pullRequestPresentation";
 
@@ -137,6 +138,26 @@ function PullRequestRowImpl({
               }
             />
           ) : null}
+          {/* Only a verdict somebody has actually given: "review required" is the absence of
+              one, and saying so on every unreviewed row would say nothing. */}
+          {entry.reviewDecision === "approved" ? (
+            <PullRequestApprovalGlyph />
+          ) : entry.reviewDecision === "changes-requested" ? (
+            <span className="min-w-0 truncate text-amber-600/90 dark:text-amber-400/80">
+              Changes requested
+            </span>
+          ) : null}
+          {entry.checksState === undefined ? null : (
+            <PullRequestChecksPopover
+              checksState={entry.checksState}
+              environmentId={entry.environmentId}
+              reference={{
+                projectId: entry.projectId,
+                repository: entry.repository,
+                number: entry.number,
+              }}
+            />
+          )}
           <PullRequestDiffStat
             additions={entry.additions}
             deletions={entry.deletions}
@@ -195,35 +216,6 @@ function PullRequestRowImpl({
             labelClassName="sr-only @xs/pr-row-meta:not-sr-only @xs/pr-row-meta:truncate"
           />
           {entry.labels.length > 0 ? <PullRequestRowLabels labels={entry.labels} /> : null}
-          {/* Only a verdict somebody has actually given: "review required" is the absence of
-              one, and saying so on every unreviewed row would say nothing. */}
-          {entry.reviewDecision === "approved" ? (
-            <Tooltip>
-              <TooltipTrigger render={<span className="inline-flex shrink-0" />}>
-                <UserCheckIcon
-                  aria-hidden
-                  className="size-3.5 text-emerald-600/90 dark:text-emerald-400/80"
-                />
-                <span className="sr-only">Approved</span>
-              </TooltipTrigger>
-              <TooltipPopup>Approved</TooltipPopup>
-            </Tooltip>
-          ) : entry.reviewDecision === "changes-requested" ? (
-            <span className="min-w-0 truncate text-amber-600/90 dark:text-amber-400/80">
-              Changes requested
-            </span>
-          ) : null}
-          {entry.checksState === undefined ? null : (
-            <PullRequestChecksPopover
-              checksState={entry.checksState}
-              environmentId={entry.environmentId}
-              reference={{
-                projectId: entry.projectId,
-                repository: entry.repository,
-                number: entry.number,
-              }}
-            />
-          )}
         </PullRequestMetaLine>
         <span className="col-start-2 row-start-2 flex items-center justify-self-end gap-3 whitespace-nowrap text-[11px] text-muted-foreground/70 tabular-nums">
           <span className="hidden @sm/pr-row:inline">
diff --git a/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx b/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx
index 9501d61a67e25171c889221fa17e7ae8f9092a85..239ebeb7950e4a7ebdf829ed58c46c31642ea948 100644
--- a/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx
@@ -12,14 +12,13 @@ import {
   ChevronRightIcon,
   GitPullRequestClosedIcon,
   HammerIcon,
-  MessageSquareIcon,
   PencilIcon,
   RotateCcwIcon,
   SendIcon,
   TagIcon,
   UsersIcon,
 } from "lucide-react";
-import { useRef, useState, type ReactNode } from "react";
+import { useId, useRef, useState, type ReactNode } from "react";
 
 import { useAtomCommand } from "~/state/use-atom-command";
 import { pullRequestEnvironment } from "~/state/pullRequests";
@@ -187,7 +186,7 @@ function CollapsedComment({
           <ChevronDownIcon
             aria-hidden
             className={cn(
-              "size-3.5 shrink-0 text-muted-foreground transition-transform",
+              "size-3.5 shrink-0 text-muted-foreground/60 transition-transform",
               open && "rotate-180",
             )}
           />
@@ -229,8 +228,8 @@ function MetaRow({
   children: ReactNode;
 }) {
   return (
-    <div className="grid min-h-8 grid-cols-[6rem_minmax(0,1fr)] items-center gap-2 py-1.5 text-xs">
-      <span className="flex min-w-0 items-center gap-1.5 text-muted-foreground">
+    <div className="grid min-w-0 grid-cols-[6rem_minmax(0,1fr)] items-center gap-2 text-xs">
+      <span className="flex items-center gap-1.5 text-muted-foreground">
         {icon}
         {label}
       </span>
@@ -241,16 +240,13 @@ function MetaRow({
 
 function Section({
   title,
-  count,
   defaultOpen = true,
   actions,
   children,
 }: {
   title: string;
-  count?: number;
   defaultOpen?: boolean;
-  /** Controls riding on the heading row itself. A sibling of the trigger, not a child of it —
-      a button cannot hold a button — and only while open, since they act on what is shown. */
+  /** Heading controls stay separate from the collapse trigger so they remain independently usable. */
   actions?: ReactNode;
   children: ReactNode;
 }) {
@@ -286,24 +282,19 @@ function Section({
           where it started. Opaque, because the rows it covers scroll beneath it. */}
       <div
         ref={headingRef}
-        className="sticky top-0 z-10 flex w-full items-center border-t border-border/60 bg-background pr-4"
+        className="sticky top-0 z-10 flex w-full items-center bg-background pr-4"
       >
-        {/* Title first, chevron riding to its right, count last: the row reads as a heading
-            with an affordance rather than a tree node. */}
-        <CollapsibleTrigger className="flex min-w-0 flex-1 items-center gap-1.5 px-4 py-3 text-left text-sm font-medium">
+        <CollapsibleTrigger className="flex min-w-0 flex-1 items-center gap-1.5 px-4 py-3 text-left text-xs font-medium text-muted-foreground hover:text-foreground">
           <span>{title}</span>
           <ChevronRightIcon
             aria-hidden
             className={cn(
-              "size-3.5 text-muted-foreground transition-transform",
+              "size-3.5 text-muted-foreground/60 transition-transform",
               open && "rotate-90",
             )}
           />
-          {count === undefined ? null : (
-            <span className="text-xs tabular-nums text-muted-foreground">{count}</span>
-          )}
         </CollapsibleTrigger>
-        {open ? actions : null}
+        {actions}
       </div>
       <CollapsiblePanel>
         <div className="px-4 pb-4">{children}</div>
@@ -461,6 +452,9 @@ export function PullRequestSummaryTab({
   // Keyed by the pull request, so opening another one starts at the end of its conversation
   // rather than wherever the last one had been read back to.
   const [shown, setShown] = useState({ url: detail.url, count: COMMENT_PAGE });
+  const checksId = useId();
+  const [expandedChecksUrl, setExpandedChecksUrl] = useState<string | null>(null);
+  const showChecks = expandedChecksUrl === detail.url;
   const shownComments = shown.url === detail.url ? shown.count : COMMENT_PAGE;
   // Windowed by recency regardless of display order: expanding always reaches further back in
   // time, whether the newest comment currently reads first or last.
@@ -596,8 +590,8 @@ export function PullRequestSummaryTab({
 
   return (
     <div className="h-full overflow-y-auto" data-pull-request-summary-scroll>
-      <section className="px-4 py-3">
-        <div>
+      <section className="px-4 py-2.5">
+        <div className="space-y-2">
           <MetaRow icon={<UsersIcon className="size-3.5" />} label="Reviewers">
             <span className="flex min-w-0 flex-wrap items-center gap-1.5">
               {reviewerEntries.length === 0 ? (
@@ -700,7 +694,7 @@ export function PullRequestSummaryTab({
                     return (
                       <span
                         key={label.name}
-                        className="inline-flex max-w-48 items-center gap-1.5 rounded-full border border-border/70 bg-muted/40 py-0.5 pl-1.5 pr-2 text-xs"
+                        className="inline-flex max-w-48 items-center gap-1.5 rounded-full bg-muted/40 py-0.5 pl-1.5 pr-2 text-xs"
                       >
                         <span
                           aria-hidden
@@ -722,19 +716,10 @@ export function PullRequestSummaryTab({
               </span>
             </MetaRow>
           ) : null}
-          <MetaRow icon={<MessageSquareIcon className="size-3.5" />} label="Comments">
-            {activityPending
-              ? "Loading conversation…"
-              : activityError
-                ? "Conversation unavailable"
-                : detail.commentCount === 1
-                  ? "1 comment"
-                  : `${detail.commentCount} comments`}
-          </MetaRow>
         </div>
       </section>
 
-      <Section title="Description">
+      <section aria-label="Description" className="px-4 pt-2 pb-4">
         <div className="group">
           {bodyScope === detail.url ? (
             <PullRequestMarkdownEditor
@@ -781,81 +766,96 @@ export function PullRequestSummaryTab({
             onRefresh={onRefresh}
           />
         </div>
-      </Section>
+      </section>
 
-      <Section title="Checks" count={detail.checks.length}>
+      <section aria-label="Checks" className="px-4 py-3">
         {detail.checks.length === 0 ? (
           <p className="text-xs text-muted-foreground">No checks reported.</p>
         ) : (
-          <div className="space-y-0.5">
-            {detail.checks.map((check, index) => {
-              const finding = { kind: "check", check } as const;
-              const failing = check.status === "failure" || check.status === "cancelled";
-              return (
-                <div
-                  // Position too: the host decides how many runs share a name, and a repeated
-                  // key would be a rendering fault on top of whatever the list already says.
-                  key={`${index}:${check.name}:${check.url ?? ""}`}
-                  className="group flex items-center gap-1 rounded-md pr-1 hover:bg-accent/60"
-                >
-                  <button
-                    type="button"
-                    disabled={!check.url}
-                    onClick={() => check.url && openCheck(check.url)}
-                    className={cn(
-                      "flex min-w-0 flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs",
-                      check.url ? undefined : "cursor-default",
-                    )}
+          <div>
+            <div className="flex items-center gap-1 text-xs">
+              <span className="font-medium text-muted-foreground">Checks</span>
+              <Button
+                size="icon-xs"
+                variant="ghost-muted"
+                aria-label={showChecks ? "Hide checks" : "Show checks"}
+                aria-expanded={showChecks}
+                aria-controls={checksId}
+                onClick={() => setExpandedChecksUrl(showChecks ? null : detail.url)}
+              >
+                <ChevronRightIcon
+                  aria-hidden
+                  className={cn("size-3.5 text-muted-foreground/60", showChecks && "rotate-90")}
+                />
+              </Button>
+            </div>
+            <div id={checksId} className={showChecks ? "mt-2" : "hidden"}>
+              {(showChecks ? detail.checks : []).map((check, index) => {
+                const finding = { kind: "check", check } as const;
+                const failing = check.status === "failure" || check.status === "cancelled";
+                return (
+                  <div
+                    // Position too: the host decides how many runs share a name, and a repeated
+                    // key would be a rendering fault on top of whatever the list already says.
+                    key={`${index}:${check.name}:${check.url ?? ""}`}
+                    className="group flex items-center gap-2 rounded-md pr-1 hover:bg-accent/60"
                   >
-                    <PullRequestCheckStatusIcon status={check.status} />
-                    <span className="min-w-0 flex-1 truncate">{check.name}</span>
-                    <span className="shrink-0 text-muted-foreground">
-                      {pullRequestCheckStatusLabel(check)}
-                    </span>
-                  </button>
-                  {/* Only where there is something to fix. A passing check has no failure to
+                    <button
+                      type="button"
+                      disabled={!check.url}
+                      onClick={() => check.url && openCheck(check.url)}
+                      className={cn(
+                        "flex min-w-0 flex-1 items-start gap-2 rounded-md px-2 py-2 text-left text-xs leading-5 [&>svg]:mt-0.5",
+                        check.url ? undefined : "cursor-default",
+                      )}
+                    >
+                      <PullRequestCheckStatusIcon status={check.status} />
+                      <span className="min-w-0 flex-1 wrap-anywhere">{check.name}</span>
+                      <span className="shrink-0 text-muted-foreground">
+                        {pullRequestCheckStatusLabel(check)}
+                      </span>
+                    </button>
+                    {/* Only where there is something to fix. A passing check has no failure to
                       reproduce, and the button would be an invitation to waste a thread. */}
-                  {onFixFinding && failing ? (
-                    <Button
-                      size="xs"
-                      variant="ghost"
-                      className="shrink-0"
-                      disabled={pendingFinding !== null && pendingFinding !== undefined}
-                      onClick={() => onFixFinding(finding)}
-                    >
-                      <HammerIcon className="size-3" />
-                      {pendingFinding === pullRequestFindingKey(finding)
-                        ? "Preparing..."
-                        : fixCheckLabel}
-                    </Button>
-                  ) : null}
-                </div>
-              );
-            })}
+                    {onFixFinding && failing ? (
+                      <Button
+                        size="xs"
+                        variant="ghost"
+                        className="shrink-0"
+                        disabled={pendingFinding !== null && pendingFinding !== undefined}
+                        onClick={() => onFixFinding(finding)}
+                      >
+                        <HammerIcon className="size-3" />
+                        {pendingFinding === pullRequestFindingKey(finding)
+                          ? "Preparing..."
+                          : fixCheckLabel}
+                      </Button>
+                    ) : null}
+                  </div>
+                );
+              })}
+            </div>
           </div>
         )}
-      </Section>
+      </section>
 
       <Section
         title="Comments"
-        {...(activityPending || activityError ? {} : { count: detail.commentCount })}
         actions={
-          !activityPending && !activityError && detail.comments.length > 0 ? (
-            <Button
-              size="xs"
-              variant="ghost"
-              className="h-7 shrink-0 px-2 text-[10px] text-muted-foreground"
-              aria-label={
-                commentOrder === "newest"
-                  ? "Show oldest comments first"
-                  : "Show newest comments first"
-              }
-              onClick={() => setCommentOrder((value) => (value === "newest" ? "oldest" : "newest"))}
-            >
-              <ArrowDownUpIcon aria-hidden className="size-3" />
-              {commentOrder === "newest" ? "Newest first" : "Oldest first"}
-            </Button>
-          ) : null
+          <Button
+            size="xs"
+            variant="ghost"
+            className="h-7 shrink-0 px-2 text-[10px] text-muted-foreground"
+            aria-label={
+              commentOrder === "newest"
+                ? "Show oldest comments first"
+                : "Show newest comments first"
+            }
+            onClick={() => setCommentOrder((value) => (value === "newest" ? "oldest" : "newest"))}
+          >
+            <ArrowDownUpIcon aria-hidden className="size-3" />
+            {commentOrder === "newest" ? "Newest first" : "Oldest first"}
+          </Button>
         }
       >
         {activityPending ? (
diff --git a/apps/web/src/components/pullRequest/ThreadPullRequestsPanel.tsx b/apps/web/src/components/pullRequest/ThreadPullRequestsPanel.tsx
index c9ef8974ef1318452c05e6b2da5a2504078ce0ea..35a449a3da79befc70fabb2d5ee152da97604640 100644
--- a/apps/web/src/components/pullRequest/ThreadPullRequestsPanel.tsx
+++ b/apps/web/src/components/pullRequest/ThreadPullRequestsPanel.tsx
@@ -29,6 +29,7 @@ import { pullRequestListLines, type PullRequestListLine } from "./pullRequestLis
 import {
   PullRequestActorAvatar,
   PullRequestDiffStat,
+  PullRequestApprovalGlyph,
   PullRequestStateGlyph,
   pullRequestChecksStatePresentation,
 } from "./pullRequestPresentation";
@@ -111,27 +112,23 @@ function LinkRow({
           <span className="min-w-0 flex-1 truncate text-sm">
             {snapshot?.title ?? link.repository}
           </span>
-          {/* Right-aligned signals, in the order a reviewer scans them: are checks green,
-              has someone ruled, how big is it. Each is absent rather than neutral when the
+          {/* Match the full PR list: review verdict, checks, then diff counts.
+              Each is absent rather than neutral when the
               host said nothing, so a row without them reads as unknown, not as fine. */}
           <span className="ml-auto flex shrink-0 items-center gap-1.5 text-[11px]">
-            {snapshot?.checksState ? <ChecksGlyph state={snapshot.checksState} /> : null}
             {snapshot?.state === "open" &&
             (snapshot.reviewDecision === "approved" ||
               snapshot.reviewDecision === "changes-requested") ? (
-              <span
-                className={cn(
-                  snapshot.reviewDecision === "approved"
-                    ? "text-emerald-600/90 dark:text-emerald-400/80"
-                    : "text-amber-600/90 dark:text-amber-400/80",
-                )}
-              >
-                {snapshot.reviewDecision === "approved" ? "Approved" : "Changes requested"}
-              </span>
+              snapshot.reviewDecision === "approved" ? (
+                <PullRequestApprovalGlyph />
+              ) : (
+                <span className="text-amber-600/90 dark:text-amber-400/80">Changes requested</span>
+              )
             ) : null}
             {snapshot?.state === "open" && snapshot.mergeability === "conflicting" ? (
               <span className="text-destructive">Conflicts</span>
             ) : null}
+            {snapshot?.checksState ? <ChecksGlyph state={snapshot.checksState} /> : null}
             <PullRequestDiffStat
               additions={snapshot?.additions ?? 0}
               deletions={snapshot?.deletions ?? 0}
@@ -173,7 +170,7 @@ function LinkRow({
               : `${link.host}/${link.repository}`}
           </span>
           {snapshot?.updatedAt ? (
-            <span className="shrink-0">· {formatRelativeTimeLabel(snapshot.updatedAt)}</span>
+            <span className="ml-auto shrink-0">{formatRelativeTimeLabel(snapshot.updatedAt)}</span>
           ) : null}
         </span>
       </a>
diff --git a/apps/web/src/components/pullRequest/pullRequestPresentation.tsx b/apps/web/src/components/pullRequest/pullRequestPresentation.tsx
index 9cd3340832ddfe2ccf36209f5ffdc9e7f8260892..890efb67cb9bf027f58dd09076737b860e06ec6f 100644
--- a/apps/web/src/components/pullRequest/pullRequestPresentation.tsx
+++ b/apps/web/src/components/pullRequest/pullRequestPresentation.tsx
@@ -17,6 +17,7 @@ import {
   GitPullRequestDraftIcon,
   GitPullRequestIcon,
   TriangleAlertIcon,
+  UserCheckIcon,
 } from "lucide-react";
 import { Children, isValidElement, type ReactNode } from "react";
 
@@ -32,6 +33,21 @@ interface StatePresentation {
   readonly Icon: typeof GitPullRequestIcon;
 }
 
+export function PullRequestApprovalGlyph() {
+  return (
+    <Tooltip>
+      <TooltipTrigger render={<span className="inline-flex shrink-0" />}>
+        <UserCheckIcon
+          aria-hidden
+          className={cn("size-3.5", CHECK_STATUS_PRESENTATION.success.toneClassName)}
+        />
+        <span className="sr-only">Approved</span>
+      </TooltipTrigger>
+      <TooltipPopup>Approved</TooltipPopup>
+    </Tooltip>
+  );
+}
+
 /**
  * How a pull request's state reads on this page. Open, closed, merged, and draft use the same
  * ink as the thread badge in `ThreadStatusIndicators`, so one pull request cannot look like two
@@ -173,7 +189,7 @@ const CHECKS_STATE_PRESENTATION = {
   passing: {
     label: "All checks have passed",
     Icon: CircleCheckIcon,
-    toneClassName: "text-emerald-600 dark:text-emerald-300/90",
+    toneClassName: CHECK_STATUS_PRESENTATION.success.toneClassName,
   },
   failing: {
     label: "Some checks were not successful",
-- 
2.54.0