Commit a850895f6833b99d90fc6c50192b5eaa4966d5c7 | the-knife

author	maria <maria@kuuro.net> 2026-08-19 17:49:55-04:00
committer	GitHub <noreply@github.com> 2026-08-19 17:49:55-04:00
log	a850895f6833b99d90fc6c50192b5eaa4966d5c7
tree	38c556bc3452f70e441a623da0030df3058b03c3
parent	0508792c572abd39b1afd6f68cd420f2ca00a484
signature	Signed by PGP key B5690EEEBB952194

feat(web): refresh pull request details (#7148)

12 files changed, 734 insertions(+), 564 deletions(-)

apps
- web
  - src
    components
    ChatView.tsx
    chat
    PanelLayoutControls.test.tsx
    PanelLayoutControls.tsx
    pullRequest
    PullRequestDetailPanel.tsx
    PullRequestGhosts.tsx
    PullRequestListFilters.tsx
    PullRequestSummaryTab.tsx
    pullRequestDetail.logic.test.ts
    pullRequestDetail.logic.ts
    lib
    openPullRequestLink.test.ts
    openPullRequestLink.ts
    routes
    _chat.pull-requests.tsx

apps/web/src/components/ChatView.tsx-1

...	...	@@ -6244,7 +6244,6 @@ function ChatViewContent(props: ChatViewProps) {
6244	6244	? "thread"
6245	6245	: "page"
6246	6246	}
6247		chromeVariant="collapse"
6248	6247	composerDraftTarget={composerDraftTarget}
6249	6248	onStateChange={handlePullRequestTabStatusChange}
6250	6249	/>

apps/web/src/components/chat/PanelLayoutControls.test.tsx created+28

...	...	@@ -0,0 +1,28 @@
	1	import { renderToStaticMarkup } from "react-dom/server";
	2	import { describe, expect, it } from "vite-plus/test";
	3
	4	import { PanelLayoutControls } from "./PanelLayoutControls";
	5
	6	describe("PanelLayoutControls", () => {
	7	it("keeps unavailable panel tooltip triggers interactive", () => {
	8	const markup = renderToStaticMarkup(
	9	<PanelLayoutControls
	10	showTerminalControl
	11	terminalAvailable={false}
	12	terminalOpen={false}
	13	terminalShortcutLabel={null}
	14	rightPanelAvailable={false}
	15	rightPanelOpen={false}
	16	rightPanelShortcutLabel={null}
	17	liveAgentCount={0}
	18	onToggleTerminal={() => {}}
	19	onToggleRightPanel={() => {}}
	20	/>,
	21	);
	22
	23	expect(markup.match(/data-slot="tooltip-trigger"/g)).toHaveLength(2);
	24	expect(markup.match(/data-slot="tooltip-trigger"[^>]><button[^>]disabled=""/g)).toHaveLength(
	25	2,
	26	);
	27	});
	28	});

apps/web/src/components/chat/PanelLayoutControls.tsx+41-43

...	...	@@ -12,6 +12,7 @@ interface PanelLayoutControlsProps {
12	12	rightPanelAvailable: boolean;
13	13	rightPanelOpen: boolean;
14	14	rightPanelShortcutLabel: string \| null;
	15	rightPanelUnavailableLabel?: string;
15	16	/** Running + waiting subagents in this thread; badges the right panel toggle. */
16	17	liveAgentCount: number;
17	18	onToggleTerminal: () => void;
...	...	@@ -26,6 +27,7 @@ export const PanelLayoutControls = memo(function PanelLayoutControls({
26	27	rightPanelAvailable,
27	28	rightPanelOpen,
28	29	rightPanelShortcutLabel,
	30	rightPanelUnavailableLabel = "Right panel is unavailable",
29	31	liveAgentCount,
30	32	onToggleTerminal,
31	33	onToggleRightPanel,
...	...	@@ -37,21 +39,19 @@ export const PanelLayoutControls = memo(function PanelLayoutControls({
37	39	>
38	40	{showTerminalControl ? (
39	41	<Tooltip>
40		<TooltipTrigger
41		render={
42		<Toggle
43		className="shrink-0 [-webkit-app-region:no-drag]"
44		pressed={terminalOpen}
45		onPressedChange={onToggleTerminal}
46		aria-label="Toggle terminal drawer"
47		variant="ghost"
48		size="sm"
49		disabled={!terminalAvailable}
50		>
51		<PanelBottomIcon className="size-4" />
52		</Toggle>
53		}
54		/>
	42	<TooltipTrigger render={<span className="flex shrink-0" />}>
	43	<Toggle
	44	className="shrink-0 [-webkit-app-region:no-drag]"
	45	pressed={terminalOpen}
	46	onPressedChange={onToggleTerminal}
	47	aria-label="Toggle terminal drawer"
	48	variant="ghost"
	49	size="sm"
	50	disabled={!terminalAvailable}
	51	>
	52	<PanelBottomIcon className="size-4" />
	53	</Toggle>
	54	</TooltipTrigger>
55	55	<TooltipPopup side="bottom">
56	56	{terminalAvailable
57	57	? `Toggle terminal drawer${terminalShortcutLabel ? ` (${terminalShortcutLabel})` : ""}`
...	...	@@ -60,33 +60,31 @@ export const PanelLayoutControls = memo(function PanelLayoutControls({
60	60	</Tooltip>
61	61	) : null}
62	62	<Tooltip>
63		<TooltipTrigger
64		render={
65		<Toggle
66		className="shrink-0 [-webkit-app-region:no-drag]"
67		pressed={rightPanelOpen}
68		onPressedChange={onToggleRightPanel}
69		aria-label={
70		liveAgentCount > 0
71		? `Toggle right panel, ${liveAgentCount} ${liveAgentCount === 1 ? "agent" : "agents"} working`
72		: "Toggle right panel"
73		}
74		variant="ghost"
75		size="sm"
76		disabled={!rightPanelAvailable}
77		>
78		<PanelRightIcon className="size-4" />
79		{liveAgentCount > 0 ? (
80		<span
81		aria-hidden
82		className="absolute -top-1 -right-1 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-info px-1 text-[9px] font-semibold tabular-nums text-white"
83		>
84		{liveAgentCount}
85		</span>
86		) : null}
87		</Toggle>
88		}
89		/>
	63	<TooltipTrigger render={<span className="flex shrink-0" />}>
	64	<Toggle
	65	className="shrink-0 [-webkit-app-region:no-drag]"
	66	pressed={rightPanelOpen}
	67	onPressedChange={onToggleRightPanel}
	68	aria-label={
	69	liveAgentCount > 0
	70	? `Toggle right panel, ${liveAgentCount} ${liveAgentCount === 1 ? "agent" : "agents"} working`
	71	: "Toggle right panel"
	72	}
	73	variant="ghost"
	74	size="sm"
	75	disabled={!rightPanelAvailable}
	76	>
	77	<PanelRightIcon className="size-4" />
	78	{liveAgentCount > 0 ? (
	79	<span
	80	aria-hidden
	81	className="absolute -top-1 -right-1 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-info px-1 text-[9px] font-semibold tabular-nums text-white"
	82	>
	83	{liveAgentCount}
	84	</span>
	85	) : null}
	86	</Toggle>
	87	</TooltipTrigger>
90	88	<TooltipPopup side="bottom">
91	89	{rightPanelAvailable
92	90	? `Toggle right panel${rightPanelShortcutLabel ? ` (${rightPanelShortcutLabel})` : ""}${
...	...	@@ -94,7 +92,7 @@ export const PanelLayoutControls = memo(function PanelLayoutControls({
94	92	? ` · ${liveAgentCount} ${liveAgentCount === 1 ? "agent" : "agents"} working`
95	93	: ""
96	94	}`
97		: "Right panel is unavailable"}
	95	: rightPanelUnavailableLabel}
98	96	</TooltipPopup>
99	97	</Tooltip>
100	98	</div>

apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx+410-431

...	...	@@ -25,6 +25,7 @@ import {
25	25	GitPullRequestDraftIcon,
26	26	GitPullRequestIcon,
27	27	HammerIcon,
	28	LayersIcon,
28	29	MessageCircleQuestionIcon,
29	30	MessageSquareIcon,
30	31	LinkIcon,
...	...	@@ -50,6 +51,7 @@ import {
50	51	import { type DraftId, useComposerDraftStore } from "~/composerDraftStore";
51	52	import { useNewThreadHandler } from "~/hooks/useHandleNewThread";
52	53	import { useCopyToClipboard, writeTextToClipboard } from "~/hooks/useCopyToClipboard";
	54	import { changeRequestRepositoryUrl } from "~/lib/openPullRequestLink";
53	55	import { usePreparePullRequestThreadAction } from "~/lib/sourceControlActions";
54	56	import { cn } from "~/lib/utils";
55	57	import { readLocalApi } from "~/localApi";
...	...	@@ -60,6 +62,7 @@ import { useEnvironmentQuery } from "~/state/query";
60	62	import { useLiveRefresh } from "~/hooks/useLiveRefresh";
61	63	import { pullRequestEnvironment } from "~/state/pullRequests";
62	64	import { useAtomCommand } from "~/state/use-atom-command";
	65	import { vcsEnvironment } from "~/state/vcs";
63	66	import { formatRelativeTimeLabel } from "~/timestampFormat";
64	67
65	68	import {
...	...	@@ -74,6 +77,7 @@ import {
74	77	import { Badge } from "../ui/badge";
75	78	import { Button } from "../ui/button";
76	79	import { Input } from "../ui/input";
	80	import { Toggle, ToggleGroup } from "../ui/toggle-group";
77	81	import {
78	82	Menu,
79	83	MenuItem,
...	...	@@ -104,6 +108,7 @@ import {
104	108	handoffPrompt,
105	109	handoffReviewComments,
106	110	latestPullRequestReviewOutcomes,
	111	isStackedPullRequestBase,
107	112	pullRequestActionMenuHasGroup,
108	113	pullRequestActionNeedsHostRefresh,
109	114	pullRequestComposerTarget,
...	...	@@ -121,6 +126,7 @@ import {
121	126	} from "./pullRequestProjectAssignment.logic";
122	127	import { PullRequestChecksPopover } from "./PullRequestChecksPopover";
123	128	import {
	129	PullRequestActorAvatar,
124	130	PullRequestActorLabel,
125	131	PullRequestDiffStat,
126	132	PullRequestMetaLine,
...	...	@@ -362,7 +368,6 @@ export function PullRequestDetailPanel({
362	368	onClose,
363	369	onStateChange,
364	370	context = "page",
365		chromeVariant = "full",
366	371	composerDraftTarget,
367	372	}: {
368	373	environmentId: EnvironmentId;
...	...	@@ -394,12 +399,6 @@ export function PullRequestDetailPanel({
394	399	* again is at best a no-op and at worst git refusing a branch two checkouts.
395	400	*/
396	401	context?: "page" \| "thread";
397		/**
398		* How the metadata above the content behaves: `full` keeps every row pinned; `collapse`
399		* folds the whole of it into the top row once the active tab scrolls, and unfolds at the
400		* top — the chrome spends its height on what is being read.
401		*/
402		chromeVariant?: "full" \| "collapse";
403	402	/**
404	403	* The open thread's composer. Beside the thread whose own pull request this is, hand-offs
405	404	* land here instead of opening a new thread — the branch is already under the reader's feet.
...	...	@@ -436,27 +435,16 @@ export function PullRequestDetailPanel({
436	435	);
437	436	}, [tab]);
438	437	const [chromeCondensed, setChromeCondensed] = useState(false);
439		// Each tab remembers whether its chrome was condensed. Only the active tab can emit scroll
440		// events, so the capture handler always writes the active tab's entry — and a tab switch
441		// reads the destination's memory instead of inheriting the tab being left. A tab too short
442		// to scroll remembers "expanded", which is what keeps it from being stranded under a chrome
443		// it has no scrollbar to reopen.
	438	// Each mounted tab remembers its own scroll chrome; short tabs cannot scroll to reopen it.
444	439	const chromeStateByTab = useRef<Partial<Record<DetailTab, boolean>>>({});
445	440	useEffect(() => {
446	441	setChromeCondensed(chromeStateByTab.current[tab] ?? false);
447	442	}, [tab]);
448		const condensed = chromeVariant === "collapse" && chromeCondensed;
449		// Collapsing removes the fold's height from the chrome, which would otherwise hand that
450		// height to the scrollport and leap the content up by it mid-scroll. The cure is exact
451		// compensation: collapse only once the reader has scrolled at least the fold's height,
452		// then give that height back to `scrollTop` before the next paint — the content under
453		// their eyes does not move, and the collapse itself is the only thing that changes.
	443	const condensed = chromeCondensed;
454	444	const scrollerRef = useRef<HTMLElement \| null>(null);
455	445	const foldRef = useRef<HTMLDivElement \| null>(null);
456		// The condensed chrome's second row opens as the fold closes, so the height the scrollport
457		// gains is the fold's minus this row's. Measured the same way the fold is: `scrollHeight`
458		// through a zero track reads its natural height in either state.
459	446	const condensedRowRef = useRef<HTMLDivElement \| null>(null);
	447	// Refund after the fold commits so the content under the reader does not jump with its height.
460	448	const compensationRef = useRef<number \| null>(null);
461	449	useLayoutEffect(() => {
462	450	if (compensationRef.current === null) return;
...	...	@@ -478,7 +466,6 @@ export function PullRequestDetailPanel({
478	466	target: "branch name",
479	467	timeout: 1600,
480	468	});
481
482	469	// The chunk is fetched as soon as the panel exists rather than waiting for the Code tab to be
483	470	// clicked, so a reader who does click it lands on a chunk already in the module cache.
484	471	useEffect(() => {
...	...	@@ -517,6 +504,23 @@ export function PullRequestDetailPanel({
517	504	},
518	505	[activity, coreDetail],
519	506	);
	507	const repositoryUrl = detail === null ? null : changeRequestRepositoryUrl(detail.url);
	508	const branchRefsQuery = useEnvironmentQuery(
	509	detail === null
	510	? null
	511	: vcsEnvironment.listRefs({
	512	environmentId,
	513	input: {
	514	cwd: detail.workspaceRoot,
	515	includeMatchingRemoteRefs: true,
	516	// listRefs keeps the current ref first and a known default second.
	517	limit: 2,
	518	},
	519	}),
	520	);
	521	const isStackedPullRequest =
	522	detail !== null &&
	523	isStackedPullRequestBase(detail.baseBranch, branchRefsQuery.data?.refs ?? []);
520	524	const activityPending = activityQuery.isPending && activity === null;
521	525	const activityError = activity === null ? activityQuery.error : null;
522	526	const refreshDetail = useCallback(() => {
...	...	@@ -1046,17 +1050,17 @@ export function PullRequestDetailPanel({
1046	1050	const can = (action: PullRequestAction) =>
1047	1051	detail?.capabilities.actions.includes(action) === true &&
1048	1052	detail.viewerPermissions.actions.includes(action);
1049		// One live action holds the slot. A conflicting change cannot be merged now, so the slot goes
1050		// to the thing that would help instead of a Merge button that only ever says no.
	1053	// One live action holds the slot. Conflicts take priority because every other completion action
	1054	// depends on resolving them first, even for a reader who cannot merge on the host themselves.
1051	1055	const primaryAction =
1052	1056	detail === null \|\| detail.state !== "open"
1053	1057	? null
1054		: detail.isDraft && can("ready")
1055		? "ready"
1056		: !can("merge")
1057		? null
1058		: conflicting
1059		? "resolve"
	1058	: conflicting
	1059	? "resolve"
	1060	: detail.isDraft && can("ready")
	1061	? "ready"
	1062	: !can("merge")
	1063	? null
1060	1064	: allowedMergeMethods.length > 0
1061	1065	? "merge"
1062	1066	: null;
...	...	@@ -1081,7 +1085,7 @@ export function PullRequestDetailPanel({
1081	1085	!conflicting &&
1082	1086	allowedMergeMethods.length > 1;
1083	1087	// The pull request number carries this state in the overview and the right-panel tab mirrors
1084		// it. Conflicts keep their own row below: an open pull request remains green there.
	1088	// it. The conflict action is separate from this state: an open pull request remains green.
1085	1089	const statePresentation = detail
1086	1090	? resolvePullRequestState({ state: detail.state, isDraft: detail.isDraft })
1087	1091	: null;
...	...	@@ -1101,34 +1105,47 @@ export function PullRequestDetailPanel({
1101	1105	).length
1102	1106	: 0;
1103	1107
	1108	if (detailQuery.isPending && !detail) {
	1109	return <PullRequestDetailGhost />;
	1110	}
	1111
1104	1112	return (
1105	1113	<div className="flex h-full min-h-0 w-full flex-col bg-background">
1106		{/* The top row's geometry never changes: both of its states occupy the same stacked
1107		cell and crossfade, so the actions on the right have one home whatever the chrome
1108		is doing below. The fold and this fade share one 200ms clock. */}
1109	1114	<div className="grid shrink-0 grid-cols-[minmax(0,1fr)_auto] items-start gap-x-2 border-b border-border/60">
1110		{/* The fixed height lives on the two top-row cells — not the grid, whose later rows
1111		are the fold — so the actions have one immovable home in both states. */}
1112		<div className="ml-4 grid h-11 min-w-0 items-center">
	1115	<div className="ml-4 grid h-7 min-w-0 items-center">
1113	1116	<div
1114	1117	aria-hidden={condensed}
1115	1118	inert={condensed}
1116	1119	className={cn(
1117		"col-start-1 row-start-1 flex min-w-0 items-center gap-1 text-sm text-muted-foreground transition-opacity sm:text-xs motion-reduce:transition-none",
1118		// Sequenced, not simultaneous: the leaving layer clears quickly before the
1119		// arriving one lands, so no frame shows both texts superimposed at half opacity.
	1120	"col-start-1 row-start-1 flex min-w-0 items-center gap-1 text-sm text-muted-foreground transition-[opacity,transform] ease-out motion-reduce:transform-none motion-reduce:transition-none sm:text-xs",
1120	1121	condensed
1121		? "pointer-events-none opacity-0 duration-100"
1122		: "opacity-100 delay-75 duration-150",
	1122	? "pointer-events-none -translate-y-1 opacity-0 duration-100"
	1123	: "translate-y-0 opacity-100 delay-50 duration-150",
1123	1124	)}
1124	1125	>
1125	1126	{detail && statePresentation ? (
1126	1127	<>
1127	1128	<Tooltip>
1128	1129	<TooltipTrigger
1129		render={<span className="min-w-0 truncate">{detail.repository}</span>}
	1130	render={
	1131	repositoryUrl ? (
	1132	<button
	1133	type="button"
	1134	onClick={() => void readLocalApi()?.shell.openExternal(repositoryUrl)}
	1135	className="min-w-0 cursor-pointer truncate text-left font-medium text-muted-foreground underline-offset-2 hover:text-foreground hover:underline"
	1136	>
	1137	{detail.repository}
	1138	</button>
	1139	) : (
	1140	<span className="min-w-0 truncate font-medium text-muted-foreground">
	1141	{detail.repository}
	1142	</span>
	1143	)
	1144	}
1130	1145	/>
1131		<TooltipPopup side="top">{detail.repository}</TooltipPopup>
	1146	<TooltipPopup side="top">
	1147	{repositoryUrl ? `Open ${detail.repository} repository` : detail.repository}
	1148	</TooltipPopup>
1132	1149	</Tooltip>
1133	1150	<Tooltip>
1134	1151	<TooltipTrigger
...	...	@@ -1156,10 +1173,10 @@ export function PullRequestDetailPanel({
1156	1173	aria-hidden={!condensed}
1157	1174	inert={!condensed}
1158	1175	className={cn(
1159		"col-start-1 row-start-1 flex min-w-0 items-center gap-1.5 text-sm transition-opacity sm:text-xs motion-reduce:transition-none",
	1176	"col-start-1 row-start-1 flex min-w-0 items-center gap-1 text-sm text-muted-foreground transition-[opacity,transform] ease-out motion-reduce:transform-none motion-reduce:transition-none sm:text-xs",
1160	1177	condensed
1161		? "opacity-100 delay-75 duration-150"
1162		: "pointer-events-none opacity-0 duration-100",
	1178	? "translate-y-0 opacity-100 delay-50 duration-150"
	1179	: "pointer-events-none translate-y-1 opacity-0 duration-100",
1163	1180	)}
1164	1181	>
1165	1182	{detail && statePresentation ? (
...	...	@@ -1194,29 +1211,103 @@ export function PullRequestDetailPanel({
1194	1211	/>
1195	1212	<TooltipPopup side="top">{detail.title}</TooltipPopup>
1196	1213	</Tooltip>
1197		{conflicting ? (
1198		<Badge
1199		variant="error"
1200		className="h-5 shrink-0 gap-1 rounded px-1.5 text-[10px] text-destructive"
1201		>
1202		<TriangleAlertIcon className="size-3" />
1203		Conflicts
1204		</Badge>
1205		) : checksSummary ? (
1206		<span className="flex shrink-0 items-center gap-1 text-[10px] text-muted-foreground">
1207		{detail && checksState !== null ? (
1208		<PullRequestChecksPopover checks={detail.checks} checksState={checksState} />
1209		) : null}
1210		{checksSummary}
1211		</span>
1212		) : null}
1213	1214	</>
1214	1215	) : null}
1215	1216	</div>
1216	1217	</div>
1217		<div className="mr-4 flex h-11 min-w-0 flex-nowrap items-center justify-end gap-1">
	1218	<div className="mr-4 flex h-7 min-w-0 flex-nowrap items-center justify-end gap-1">
1218	1219	{detail ? (
1219	1220	<>
	1221	{/* Checking a pull request out is the reason to open one here at all, so it is a
	1222	button of its own rather than a side effect of asking an agent for something.
	1223	It asks where, because the two answers are not interchangeable: one leaves your
	1224	work where it is, the other moves the repository you are standing in. Only on
	1225	the page: beside a thread the branch is already checked out right there. */}
	1226	{context === "page" ? (
	1227	<Menu>
	1228	<MenuTrigger
	1229	disabled={handoff !== null}
	1230	render={
	1231	<Button size="xs" variant="outline">
	1232	<GitBranchIcon aria-hidden className="size-3.5" />
	1233	{handoff?.startsWith("checkout") ? "Checking out..." : "Check out"}
	1234	<ChevronDownIcon aria-hidden className="size-3.5 text-muted-foreground" />
	1235	</Button>
	1236	}
	1237	/>
	1238	<MenuPopup align="end" side="bottom" className="min-w-72">
	1239	<MenuItem onClick={() => startCheckout("worktree")}>
	1240	<GitBranchIcon className="mt-0.5 size-3.5 shrink-0 self-start" />
	1241	<span className="flex min-w-0 flex-col">
	1242	<span>In a separate worktree</span>
	1243	<span className="text-xs text-muted-foreground">
	1244	Its own folder and thread. Nothing you have open moves.
	1245	</span>
	1246	</span>
	1247	</MenuItem>
	1248	<MenuItem onClick={() => startCheckout("local")}>
	1249	<FolderGit2Icon className="mt-0.5 size-3.5 shrink-0 self-start" />
	1250	<span className="flex min-w-0 flex-col">
	1251	<span>In this repository</span>
	1252	<span className="text-xs text-muted-foreground">
	1253	Switches the branch you are working in, like `gh pr checkout`.
	1254	</span>
	1255	</span>
	1256	</MenuItem>
	1257	{pickableEnvironments.length > 0 ? (
	1258	<ActOnEnvironmentPicker
	1259	environments={pickableEnvironments}
	1260	value={actingEnvironmentId}
	1261	onChange={(next) => setActingScope({ pullRequestKey, environmentId: next })}
	1262	disabled={handoff !== null}
	1263	/>
	1264	) : null}
	1265	</MenuPopup>
	1266	</Menu>
	1267	) : null}
	1268	{/* Said where the Merge button is, because it is the answer to why nobody has
	1269	pressed it: the merge is already asked for, and the host is holding it. */}
	1270	{autoMergeArmed ? (
	1271	<Tooltip>
	1272	<TooltipTrigger
	1273	render={
	1274	<Badge
	1275	variant="info"
	1276	className="h-5 shrink-0 gap-1 rounded px-1.5 text-[10px]"
	1277	>
	1278	<GitMergeIcon aria-hidden className="size-3" />
	1279	Auto-merge
	1280	</Badge>
	1281	}
	1282	/>
	1283	<TooltipPopup side="top">
	1284	The host will merge this on its own once its requirements are met
	1285	</TooltipPopup>
	1286	</Tooltip>
	1287	) : null}
	1288	{primaryAction === "resolve" ? (
	1289	<Button
	1290	size="xs"
	1291	variant="destructive-outline"
	1292	disabled={handoff !== null}
	1293	onClick={startResolveConflicts}
	1294	>
	1295	<TriangleAlertIcon className="size-3.5" />
	1296	{handoff === "conflicts" ? "Preparing..." : "Resolve conflicts"}
	1297	</Button>
	1298	) : primaryAction === "ready" ? (
	1299	<Button size="xs" disabled={actionPending} onClick={() => void perform("ready")}>
	1300	Ready for review
	1301	</Button>
	1302	) : primaryAction === "merge" ? (
	1303	<Button
	1304	size="xs"
	1305	disabled={actionPending}
	1306	onClick={() => setConfirmation({ open: true, action: "merge" })}
	1307	>
	1308	{pendingAction === "merge" ? "Merging..." : selectedMergeMethodLabel}
	1309	</Button>
	1310	) : null}
1220	1311	<Menu>
1221	1312	<MenuTrigger
1222	1313	render={
...	...	@@ -1361,13 +1452,6 @@ export function PullRequestDetailPanel({
1361	1452	<LinkIcon className="size-3.5" />
1362	1453	Copy link
1363	1454	</MenuItem>
1364		{/* Only where the button row could not take it, so it is never offered twice. */}
1365		{conflicting && primaryAction !== "resolve" ? (
1366		<MenuItem disabled={handoff !== null} onClick={startResolveConflicts}>
1367		<GitMergeIcon className="size-3.5" />
1368		{handoff === "conflicts" ? "Preparing..." : handoffLabels.resolveConflicts}
1369		</MenuItem>
1370		) : null}
1371	1455	{detail.state === "open" && can("close") ? (
1372	1456	<>
1373	1457	<MenuSeparator />
...	...	@@ -1391,92 +1475,6 @@ export function PullRequestDetailPanel({
1391	1475	) : null}
1392	1476	</MenuPopup>
1393	1477	</Menu>
1394		{/* Checking a pull request out is the reason to open one here at all, so it is a
1395		button of its own rather than a side effect of asking an agent for something.
1396		It asks where, because the two answers are not interchangeable: one leaves your
1397		work where it is, the other moves the repository you are standing in. Only on
1398		the page: beside a thread the branch is already checked out right there. */}
1399		{context === "page" ? (
1400		<Menu>
1401		<MenuTrigger
1402		disabled={handoff !== null}
1403		render={
1404		<Button size="xs" variant="outline">
1405		{handoff?.startsWith("checkout") ? (
1406		"Checking out..."
1407		) : (
1408		<>
1409		<GitBranchIcon className="size-3" />
1410		Check out
1411		<ChevronDownIcon className="size-3 text-muted-foreground" />
1412		</>
1413		)}
1414		</Button>
1415		}
1416		/>
1417		<MenuPopup align="end" side="bottom" className="min-w-72">
1418		<MenuItem onClick={() => startCheckout("worktree")}>
1419		<GitBranchIcon className="mt-0.5 size-3.5 shrink-0 self-start" />
1420		<span className="flex min-w-0 flex-col">
1421		<span>In a separate worktree</span>
1422		<span className="text-xs text-muted-foreground">
1423		Its own folder and thread. Nothing you have open moves.
1424		</span>
1425		</span>
1426		</MenuItem>
1427		<MenuItem onClick={() => startCheckout("local")}>
1428		<FolderGit2Icon className="mt-0.5 size-3.5 shrink-0 self-start" />
1429		<span className="flex min-w-0 flex-col">
1430		<span>In this repository</span>
1431		<span className="text-xs text-muted-foreground">
1432		Switches the branch you are working in, like `gh pr checkout`.
1433		</span>
1434		</span>
1435		</MenuItem>
1436		{pickableEnvironments.length > 0 ? (
1437		<ActOnEnvironmentPicker
1438		environments={pickableEnvironments}
1439		value={actingEnvironmentId}
1440		onChange={(next) => setActingScope({ pullRequestKey, environmentId: next })}
1441		disabled={handoff !== null}
1442		/>
1443		) : null}
1444		</MenuPopup>
1445		</Menu>
1446		) : null}
1447		{/* Said where the Merge button is, because it is the answer to why nobody has
1448		pressed it: the merge is already asked for, and the host is holding it. */}
1449		{autoMergeArmed ? (
1450		<Tooltip>
1451		<TooltipTrigger
1452		render={
1453		<Badge
1454		variant="info"
1455		className="h-5 shrink-0 gap-1 rounded px-1.5 text-[10px]"
1456		>
1457		<GitMergeIcon aria-hidden className="size-3" />
1458		Auto-merge
1459		</Badge>
1460		}
1461		/>
1462		<TooltipPopup side="top">
1463		The host will merge this on its own once its requirements are met
1464		</TooltipPopup>
1465		</Tooltip>
1466		) : null}
1467		{primaryAction === "ready" ? (
1468		<Button size="xs" disabled={actionPending} onClick={() => void perform("ready")}>
1469		Ready for review
1470		</Button>
1471		) : primaryAction === "merge" ? (
1472		<Button
1473		size="xs"
1474		disabled={actionPending}
1475		onClick={() => setConfirmation({ open: true, action: "merge" })}
1476		>
1477		{pendingAction === "merge" ? "Merging..." : selectedMergeMethodLabel}
1478		</Button>
1479		) : null}
1480	1478	</>
1481	1479	) : null}
1482	1480	{onClose ? (
...	...	@@ -1491,14 +1489,9 @@ export function PullRequestDetailPanel({
1491	1489	) : null}
1492	1490	</div>
1493	1491
1494		{/* The condensed chrome's second row: the tabs that the closing fold takes with it,
1495		and compact copies of the branch pair and diff stat so they stay in sight while
1496		the full rows are folded away. Same zero-track mechanism as the fold, inverted. */}
1497	1492	<div
1498	1493	className={cn(
1499	1494	"col-span-2 grid",
1500		// Inverse of the fold's track: closing eases while the fold above eases open,
1501		// so the chrome trades rows in one motion instead of two jumps.
1502	1495	condensed
1503	1496	? "grid-rows-[1fr]"
1504	1497	: "grid-rows-[0fr] transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none",
...	...	@@ -1507,84 +1500,103 @@ export function PullRequestDetailPanel({
1507	1500	<div
1508	1501	ref={condensedRowRef}
1509	1502	className={cn(
1510		"min-h-0 overflow-hidden",
	1503	"min-h-0 overflow-hidden transition-[opacity,transform] duration-150 ease-out motion-reduce:transform-none motion-reduce:transition-none",
1511	1504	condensed
1512		? "opacity-100 transition-opacity duration-200 ease-out motion-reduce:transition-none"
1513		: "opacity-0",
	1505	? "translate-y-0 opacity-100 delay-50"
	1506	: "translate-y-1 opacity-0 duration-100",
1514	1507	)}
1515	1508	inert={!condensed}
1516	1509	>
1517	1510	{detail ? (
1518		<div className="flex min-w-0 items-center gap-1 px-4 pb-2">
1519		<nav aria-label="Pull request tabs" className="flex shrink-0 items-center gap-0.5">
1520		{visibleTabs.map((item) => (
1521		<button
1522		key={item.value}
1523		type="button"
1524		tabIndex={condensed ? 0 : -1}
1525		aria-pressed={tab === item.value}
1526		onClick={() => setTab(item.value)}
1527		className={cn(
1528		"rounded-md px-2 py-1 text-[11px] transition-colors",
1529		tab === item.value
1530		? "bg-accent text-foreground"
1531		: "text-muted-foreground hover:text-foreground",
1532		)}
	1511	<div className="col-span-2 min-w-0 px-4 pb-2 pt-1">
	1512	<div className="flex min-w-0 items-center gap-2 text-xs text-muted-foreground">
	1513	<span className="flex min-w-0 shrink items-center gap-1.5 overflow-hidden text-xs text-muted-foreground">
	1514	<Tooltip>
	1515	<TooltipTrigger
	1516	render={
	1517	<span
	1518	className="shrink-0 rounded-full"
	1519	aria-label={detail.author?.login ?? "ghost"}
	1520	/>
	1521	}
	1522	>
	1523	<PullRequestActorAvatar actor={detail.author} />
	1524	</TooltipTrigger>
	1525	<TooltipPopup side="top">{detail.author?.login ?? "ghost"}</TooltipPopup>
	1526	</Tooltip>
	1527	<span className="shrink-0">{formatRelativeTimeLabel(detail.updatedAt)}</span>
	1528	</span>
	1529	<span aria-hidden className="h-3 w-px shrink-0 bg-border/70" />
	1530	<span className="flex min-w-0 flex-1 items-center gap-1.5 font-mono text-[11px] text-muted-foreground/65">
	1531	<Tooltip>
	1532	<TooltipTrigger
	1533	render={
	1534	<span className="inline-flex min-w-0 max-w-[40%] shrink-0 items-center gap-1">
	1535	{isStackedPullRequest ? (
	1536	<LayersIcon
	1537	aria-label="Stacked pull request"
	1538	className="size-3 shrink-0"
	1539	/>
	1540	) : null}
	1541	<code className="min-w-0 truncate">{detail.baseBranch}</code>
	1542	</span>
	1543	}
	1544	/>
	1545	<TooltipPopup side="top">
	1546	{isStackedPullRequest
	1547	? `Stacked on ${detail.baseBranch}`
	1548	: detail.baseBranch}
	1549	</TooltipPopup>
	1550	</Tooltip>
	1551	{freshness ? (
	1552	<PullRequestBaseFreshnessWarning
	1553	baseBranch={detail.baseBranch}
	1554	freshness={freshness}
	1555	pending={actionPending}
	1556	onUpdate={(method) => void perform("update-branch", undefined, method)}
	1557	iconClassName="size-3"
	1558	/>
	1559	) : null}
	1560	<ArrowLeftIcon
	1561	aria-label="receives changes from"
	1562	className="size-3 shrink-0 opacity-60"
	1563	/>
	1564	<Tooltip>
	1565	<TooltipTrigger
	1566	render={
	1567	<code className="min-w-0 flex-1 truncate">{detail.headBranch}</code>
	1568	}
	1569	/>
	1570	<TooltipPopup side="top">{detail.headBranch}</TooltipPopup>
	1571	</Tooltip>
	1572	</span>
	1573	<span className="ml-auto inline-flex shrink-0 items-center justify-end gap-2 text-[11px]">
	1574	<span
	1575	className="inline-flex items-center gap-1 tabular-nums"
	1576	aria-label={`${detail.changedFiles.toLocaleString()} changed ${
	1577	detail.changedFiles === 1 ? "file" : "files"
	1578	}`}
1533	1579	>
1534		{item.label}
1535		</button>
1536		))}
1537		</nav>
1538		<span className="ml-auto inline-flex min-w-0 shrink items-center gap-1 font-mono text-[11px] text-muted-foreground">
1539		<Tooltip>
1540		<TooltipTrigger render={<span className="truncate" />}>
1541		{detail.baseBranch}
1542		</TooltipTrigger>
1543		<TooltipPopup side="top">{`${detail.baseBranch} ← ${detail.headBranch}`}</TooltipPopup>
1544		</Tooltip>
1545		{freshness ? (
1546		<PullRequestBaseFreshnessWarning
1547		baseBranch={detail.baseBranch}
1548		freshness={freshness}
1549		pending={actionPending}
1550		onUpdate={(method) => void perform("update-branch", undefined, method)}
1551		iconClassName="size-3"
	1580	<FileDiffIcon aria-hidden className="size-3" />
	1581	{detail.changedFiles.toLocaleString()}
	1582	</span>
	1583	<PullRequestDiffStat
	1584	additions={detail.additions}
	1585	deletions={detail.deletions}
	1586	className="shrink-0 font-mono text-[11px]"
1552	1587	/>
1553		) : null}
1554		<ArrowLeftIcon aria-label="receives changes from" className="size-3 shrink-0" />
1555		<Tooltip>
1556		<TooltipTrigger render={<span className="truncate" />}>
1557		{detail.headBranch}
1558		</TooltipTrigger>
1559		<TooltipPopup side="top">{`${detail.baseBranch} ← ${detail.headBranch}`}</TooltipPopup>
1560		</Tooltip>
1561		</span>
1562		<span className="ml-2 inline-flex shrink-0 items-center gap-2 text-[11px] text-muted-foreground">
1563		<span className="inline-flex items-center gap-1 tabular-nums">
1564		<FileDiffIcon className="size-3" />
1565		{detail.changedFiles.toLocaleString()}
1566	1588	</span>
1567		<PullRequestDiffStat
1568		additions={detail.additions}
1569		deletions={detail.deletions}
1570		className="shrink-0 font-mono text-[11px]"
1571		/>
1572		</span>
	1589	</div>
1573	1590	</div>
1574	1591	) : null}
1575	1592	</div>
1576	1593	</div>
1577	1594
1578		{/* Folding is a grid track going to zero: the rows below stay mounted, the track
1579		animates closed over them, and `inert` takes the hidden controls out of the tab
1580		order for as long as the chrome is condensed. */}
1581	1595	<div
1582	1596	className={cn(
1583	1597	"col-span-2 grid",
1584		// Collapse is instant: it happens mid-scroll, and the compensation that keeps the
1585		// content pinned would fight an animated track frame by frame. Reopening happens
1586		// at the top with no compensation, so the fold can ease back in instead of
1587		// snapping the content down.
	1598	// Collapse before the scroll refund paints; only reopening eases back in. Animating
	1599	// both directions makes the shrinking track fight the scrollTop correction.
1588	1600	condensed
1589	1601	? "grid-rows-[0fr]"
1590	1602	: "grid-rows-[1fr] transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none",
...	...	@@ -1592,19 +1604,16 @@ export function PullRequestDetailPanel({
1592	1604	>
1593	1605	<div
1594	1606	ref={foldRef}
1595		// One-way on purpose: appearing content eases in over ground the instant track
1596		// already reserved; departing content cuts, because its ground is gone in the
1597		// same frame and the scroll compensation reads it as scrolled past.
1598	1607	className={cn(
1599		"min-h-0 overflow-hidden",
	1608	"min-h-0 overflow-hidden transition-[opacity,transform] duration-150 ease-out motion-reduce:transform-none motion-reduce:transition-none",
1600	1609	condensed
1601		? "opacity-0"
1602		: "opacity-100 transition-opacity duration-200 ease-out motion-reduce:transition-none",
	1610	? "-translate-y-1 opacity-0 duration-100"
	1611	: "translate-y-0 opacity-100 delay-50",
1603	1612	)}
1604	1613	inert={condensed}
1605	1614	>
1606	1615	{detail ? (
1607		<div className="col-span-2 mt-3 min-w-0 px-4 pb-4">
	1616	<div className="col-span-2 mt-1 min-w-0 px-4 pb-4">
1608	1617	{titleDraft === null ? (
1609	1618	<div className="group flex min-w-0 items-start gap-1">
1610	1619	<h1 className="min-w-0 flex-1 text-base font-semibold leading-snug">
...	...	@@ -1671,60 +1680,75 @@ export function PullRequestDetailPanel({
1671	1680	</PullRequestMetaLine>
1672	1681
1673	1682	<div className="mt-4 flex min-w-0 items-center gap-2 text-xs text-muted-foreground">
1674		<Tooltip>
1675		<TooltipTrigger
1676		render={
1677		<code className="min-w-0 max-w-48 shrink truncate rounded-md bg-muted px-2 py-1 font-mono text-xs text-foreground">
1678		{detail.baseBranch}
1679		</code>
1680		}
1681		/>
1682		<TooltipPopup side="top">{detail.baseBranch}</TooltipPopup>
1683		</Tooltip>
1684		{freshness ? (
1685		<PullRequestBaseFreshnessWarning
1686		baseBranch={detail.baseBranch}
1687		freshness={freshness}
1688		pending={actionPending}
1689		onUpdate={(method) => void perform("update-branch", undefined, method)}
	1683	<span className="flex min-w-0 flex-1 items-center gap-1.5 font-mono text-xs text-muted-foreground/70">
	1684	<Tooltip>
	1685	<TooltipTrigger
	1686	render={
	1687	<span className="inline-flex min-w-0 max-w-[40%] shrink-0 items-center gap-1">
	1688	{isStackedPullRequest ? (
	1689	<LayersIcon
	1690	aria-label="Stacked pull request"
	1691	className="size-3 shrink-0"
	1692	/>
	1693	) : null}
	1694	<code className="min-w-0 truncate">{detail.baseBranch}</code>
	1695	</span>
	1696	}
	1697	/>
	1698	<TooltipPopup side="top">
	1699	{isStackedPullRequest
	1700	? `Stacked on ${detail.baseBranch}`
	1701	: detail.baseBranch}
	1702	</TooltipPopup>
	1703	</Tooltip>
	1704	{freshness ? (
	1705	<PullRequestBaseFreshnessWarning
	1706	baseBranch={detail.baseBranch}
	1707	freshness={freshness}
	1708	pending={actionPending}
	1709	onUpdate={(method) => void perform("update-branch", undefined, method)}
	1710	/>
	1711	) : null}
	1712	<ArrowLeftIcon
	1713	aria-label="receives changes from"
	1714	className="size-3.5 shrink-0 opacity-60"
1690	1715	/>
1691		) : null}
1692		<ArrowLeftIcon aria-label="receives changes from" className="size-4 shrink-0" />
1693		<Tooltip>
1694		<TooltipTrigger
1695		render={
1696		<button
1697		type="button"
1698		className="grid min-w-0 max-w-64 shrink cursor-pointer rounded-md bg-muted px-2 py-1 font-mono text-xs text-foreground outline-none transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background"
1699		aria-label={
1700		isBranchCopied ? "Branch name copied" : "Copy pull request branch"
1701		}
1702		onClick={() => copyBranchToClipboard(detail.headBranch)}
1703		/>
1704		}
1705		>
1706		<code
1707		className={cn(
1708		"col-start-1 row-start-1 min-w-0 truncate transition-opacity duration-150 motion-reduce:transition-none",
1709		isBranchCopied ? "opacity-0" : "opacity-100",
1710		)}
1711		>
1712		{detail.headBranch}
1713		</code>
1714		<span
1715		aria-hidden="true"
1716		className={cn(
1717		"col-start-1 row-start-1 truncate text-center transition-opacity duration-150 motion-reduce:transition-none",
1718		isBranchCopied ? "opacity-100" : "opacity-0",
1719		)}
	1716	<Tooltip>
	1717	<TooltipTrigger
	1718	render={
	1719	<button
	1720	type="button"
	1721	className="grid w-fit min-w-0 max-w-full shrink cursor-pointer rounded px-1 py-0.5 text-left outline-none transition-colors hover:bg-accent/45 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background"
	1722	aria-label={
	1723	isBranchCopied ? "Branch name copied" : "Copy pull request branch"
	1724	}
	1725	onClick={() => copyBranchToClipboard(detail.headBranch)}
	1726	/>
	1727	}
1720	1728	>
1721		Copied
1722		</span>
1723		</TooltipTrigger>
1724		<TooltipPopup side="top">
1725		{`${isBranchCopied ? "Copied" : "Copy pull request branch"}: ${detail.headBranch}`}
1726		</TooltipPopup>
1727		</Tooltip>
	1729	<code
	1730	className={cn(
	1731	"col-start-1 row-start-1 min-w-0 truncate transition-opacity duration-150 motion-reduce:transition-none",
	1732	isBranchCopied ? "opacity-0" : "opacity-100",
	1733	)}
	1734	>
	1735	{detail.headBranch}
	1736	</code>
	1737	<span
	1738	aria-hidden="true"
	1739	className={cn(
	1740	"col-start-1 row-start-1 truncate text-center transition-opacity duration-150 motion-reduce:transition-none",
	1741	isBranchCopied ? "opacity-100" : "opacity-0",
	1742	)}
	1743	>
	1744	Copied
	1745	</span>
	1746	</TooltipTrigger>
	1747	<TooltipPopup side="top">
	1748	{`${isBranchCopied ? "Copied" : "Copy pull request branch"}: ${detail.headBranch}`}
	1749	</TooltipPopup>
	1750	</Tooltip>
	1751	</span>
1728	1752	<span className="ml-auto inline-flex shrink-0 items-center justify-end gap-2">
1729	1753	<span className="inline-flex items-center gap-1.5 tabular-nums">
1730	1754	<FileDiffIcon className="size-3.5" />
...	...	@@ -1740,165 +1764,130 @@ export function PullRequestDetailPanel({
1740	1764	</div>
1741	1765	</div>
1742	1766	) : null}
	1767	</div>
	1768	</div>
1743	1769
1744		{detail && conflicting ? (
1745		<div className="col-span-2 flex items-center gap-1 px-4 pb-3">
1746		<Badge
1747		variant="error"
1748		className="h-auto gap-1.5 rounded-md px-3 py-1.5 text-xs text-destructive"
1749		>
1750		<TriangleAlertIcon className="size-3.5" />
1751		Merge conflicts
1752		</Badge>
1753		<Button
1754		size="xs"
1755		variant="ghost"
1756		className="ml-auto text-destructive hover:bg-destructive/8 hover:text-destructive"
1757		disabled={handoff !== null}
1758		onClick={startResolveConflicts}
1759		>
1760		{handoff === "conflicts" ? "Preparing..." : handoffLabels.resolve}
1761		<ArrowUpRightIcon className="size-3.5 text-destructive" />
1762		</Button>
1763		</div>
1764		) : null}
1765
1766		{detail ? (
1767		<nav
1768		className="col-span-2 flex min-w-0 items-center gap-1 overflow-x-auto border-t border-border/60 px-4 py-2 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
1769		aria-label="Pull request tabs"
	1770	{detail ? (
	1771	<nav
	1772	className="col-span-2 flex min-w-0 items-center gap-1 overflow-x-auto border-t border-border/60 px-4 py-2 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
	1773	aria-label="Pull request tabs"
	1774	>
	1775	<ToggleGroup
	1776	size="segmented"
	1777	variant="segmented"
	1778	value={[tab]}
	1779	onValueChange={(next) => {
	1780	const nextTab = visibleTabs.find((item) => item.value === next[0])?.value;
	1781	if (nextTab) setTab(nextTab);
	1782	}}
	1783	>
	1784	{visibleTabs.map((item) => (
	1785	<Toggle key={item.value} value={item.value}>
	1786	{item.label}
	1787	</Toggle>
	1788	))}
	1789	</ToggleGroup>
	1790	{tab === "summary" ? (
	1791	<span
	1792	className="ml-auto inline-flex shrink-0 items-center gap-1.5 text-xs text-muted-foreground"
	1793	aria-label={checksSummary ? `Checks: ${checksSummary}` : "Checks"}
1770	1794	>
1771		{visibleTabs.map((item) => (
1772		<button
1773		key={item.value}
1774		type="button"
1775		aria-pressed={tab === item.value}
1776		onClick={() => setTab(item.value)}
1777		className={cn(
1778		"inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs transition-colors",
1779		tab === item.value
1780		? "bg-accent text-foreground"
1781		: "text-muted-foreground hover:text-foreground",
1782		)}
	1795	{checksState !== null ? (
	1796	<PullRequestChecksPopover checks={detail.checks} checksState={checksState} />
	1797	) : (
	1798	<CircleDotIcon aria-hidden className="size-3.5" />
	1799	)}
	1800	{checksSummary}
	1801	</span>
	1802	) : tab === "timeline" ? (
	1803	<div className="ml-auto flex shrink-0 items-center gap-2 text-xs text-muted-foreground">
	1804	<PullRequestMetaLine
	1805	className={cn(
	1806	"whitespace-nowrap text-[11px] transition-opacity",
	1807	(activityPending \|\| activityError) && "opacity-35",
	1808	)}
	1809	>
	1810	<span
	1811	className="inline-flex items-center gap-1"
	1812	aria-label={
	1813	activityError
	1814	? "Comments unavailable"
	1815	: `${detail.commentCount.toLocaleString()} ${
	1816	detail.commentCount === 1 ? "comment" : "comments"
	1817	}`
	1818	}
1783	1819	>
1784		{item.label}
1785		</button>
1786		))}
1787		{tab === "summary" ? (
	1820	<MessageSquareIcon aria-hidden className="size-3" />
	1821	{activityError
	1822	? "—"
	1823	: activityPending
	1824	? "…"
	1825	: detail.commentCount.toLocaleString()}
	1826	</span>
1788	1827	<span
1789		className="ml-auto inline-flex shrink-0 items-center gap-1.5 text-xs text-muted-foreground"
1790		aria-label={checksSummary ? `Checks: ${checksSummary}` : "Checks"}
	1828	className="inline-flex items-center gap-1"
	1829	aria-label={
	1830	activityError
	1831	? "Commits unavailable"
	1832	: `${detail.commits.length.toLocaleString()} ${
	1833	detail.commits.length === 1 ? "commit" : "commits"
	1834	}`
	1835	}
1791	1836	>
1792		{/* The rollup icon opens the checks behind the summary; with none reported
1793		there is nothing to open, so the plain glyph stays. */}
1794		{detail && checksState !== null ? (
1795		<PullRequestChecksPopover checks={detail.checks} checksState={checksState} />
1796		) : (
1797		<CircleDotIcon aria-hidden className="size-3.5" />
1798		)}
1799		{checksSummary}
	1837	<GitCommitHorizontalIcon aria-hidden className="size-3" />
	1838	{activityError
	1839	? "—"
	1840	: activityPending
	1841	? "…"
	1842	: detail.commits.length.toLocaleString()}
1800	1843	</span>
1801		) : tab === "timeline" ? (
1802		<div className="ml-auto flex shrink-0 items-center gap-2 text-xs text-muted-foreground">
1803		<PullRequestMetaLine
	1844	{approvalCount > 0 ? (
	1845	<span
1804	1846	className={cn(
1805		"whitespace-nowrap text-[11px] transition-opacity",
1806		(activityPending \|\| activityError) && "opacity-35",
	1847	"inline-flex items-center gap-1",
	1848	pullRequestReviewOutcomeToneClassName("approved"),
1807	1849	)}
1808	1850	>
1809		<span
1810		className="inline-flex items-center gap-1"
1811		aria-label={
1812		activityError
1813		? "Comments unavailable"
1814		: `${detail.commentCount.toLocaleString()} ${
1815		detail.commentCount === 1 ? "comment" : "comments"
1816		}`
1817		}
1818		>
1819		<MessageSquareIcon aria-hidden className="size-3" />
1820		{activityError
1821		? "—"
1822		: activityPending
1823		? "…"
1824		: detail.commentCount.toLocaleString()}
1825		</span>
1826		<span
1827		className="inline-flex items-center gap-1"
1828		aria-label={
1829		activityError
1830		? "Commits unavailable"
1831		: `${detail.commits.length.toLocaleString()} ${
1832		detail.commits.length === 1 ? "commit" : "commits"
1833		}`
1834		}
1835		>
1836		<GitCommitHorizontalIcon aria-hidden className="size-3" />
1837		{activityError
1838		? "—"
1839		: activityPending
1840		? "…"
1841		: detail.commits.length.toLocaleString()}
	1851	<PullRequestReviewOutcomeIcon outcome="approved" className="size-3" />
	1852	{approvalCount.toLocaleString()}
	1853	<span className="sr-only">
	1854	{approvalCount === 1 ? "approval" : "approvals"}
1842	1855	</span>
1843		{/* Only once somebody has approved: a nought beside a tick would read as a
1844		verdict of its own on a change nobody has looked at yet. */}
1845		{approvalCount > 0 ? (
1846		<span
1847		className={cn(
1848		"inline-flex items-center gap-1",
1849		pullRequestReviewOutcomeToneClassName("approved"),
1850		)}
1851		>
1852		<PullRequestReviewOutcomeIcon outcome="approved" className="size-3" />
1853		{approvalCount.toLocaleString()}
1854		{/* The icon is decorative and a name written onto a generic span is
1855		not announced, so the bare number says what it counts in words. */}
1856		<span className="sr-only">
1857		{approvalCount === 1 ? "approval" : "approvals"}
1858		</span>
1859		</span>
1860		) : null}
1861		</PullRequestMetaLine>
1862		<Button
1863		size="xs"
1864		variant="ghost"
1865		className="h-7 px-2 text-[10px] text-muted-foreground"
1866		aria-label={
1867		timelineOrder === "newest"
1868		? "Show oldest activity first"
1869		: "Show newest activity first"
1870		}
1871		onClick={() =>
1872		setTimelineOrder((value) => (value === "newest" ? "oldest" : "newest"))
1873		}
1874		>
1875		<ArrowDownUpIcon aria-hidden className="size-3" />
1876		{timelineOrder === "newest" ? "Newest first" : "Oldest first"}
1877		</Button>
1878		</div>
1879		) : null}
1880		</nav>
	1856	</span>
	1857	) : null}
	1858	</PullRequestMetaLine>
	1859	<Button
	1860	size="xs"
	1861	variant="ghost"
	1862	className="h-7 px-2 text-[10px] text-muted-foreground"
	1863	aria-label={
	1864	timelineOrder === "newest"
	1865	? "Show oldest activity first"
	1866	: "Show newest activity first"
	1867	}
	1868	onClick={() =>
	1869	setTimelineOrder((value) => (value === "newest" ? "oldest" : "newest"))
	1870	}
	1871	>
	1872	<ArrowDownUpIcon aria-hidden className="size-3" />
	1873	{timelineOrder === "newest" ? "Newest first" : "Oldest first"}
	1874	</Button>
	1875	</div>
1881	1876	) : null}
1882		</div>
1883		</div>
	1877	</nav>
	1878	) : null}
1884	1879	</div>
1885	1880
1886	1881	<div
1887	1882	className="relative min-h-0 flex-1 overflow-hidden"
1888		// Scroll does not bubble, but it captures: one listener hears every tab's own scroll
1889		// container. Collapse past two line-heights, expand only back at the very top, so the
1890		// boundary row cannot flap the chrome open and shut.
1891	1883	onScrollCapture={(event) => {
1892		if (chromeVariant !== "collapse") return;
1893	1884	const scroller = event.target as HTMLElement;
1894	1885	scrollerRef.current = scroller;
1895	1886	const top = scroller.scrollTop;
1896	1887	setChromeCondensed((previous) => {
1897	1888	let next = previous;
1898		// `scrollHeight` reads the fold's natural height whichever state the track is in.
1899	1889	const foldHeight = foldRef.current?.scrollHeight ?? 0;
1900		// The chrome trades the fold for the condensed second row, so the height the
1901		// scrollport actually gains is the difference between the two.
	1890	// The condensed row remains mounted, so refund only the height that actually leaves.
1902	1891	const chromeDelta = foldHeight - (condensedRowRef.current?.scrollHeight ?? 0);
1903	1892	if (previous) {
1904	1893	// The hard top reopens the chrome with no refund: the reader asked for the top,
...	...	@@ -1916,17 +1905,7 @@ export function PullRequestDetailPanel({
1916	1905	});
1917	1906	}}
1918	1907	>
1919		{detailQuery.isPending && !detail ? (
1920		// The ghost wears the shape of the tab being waited on, so switching tabs mid-load
1921		// does not flash a summary outline under a timeline heading.
1922		tab === "timeline" ? (
1923		<PullRequestTimelineGhost />
1924		) : tab === "code" ? (
1925		<DiffPanelLoadingState label="Loading pull request diff..." />
1926		) : (
1927		<PullRequestDetailGhost />
1928		)
1929		) : detailQuery.error && !detail ? (
	1908	{detailQuery.error && !detail ? (
1930	1909	<PullRequestsUnavailableState error={detailQuery.error} onRetry={refreshDetail} />
1931	1910	) : detail ? (
1932	1911	<>

apps/web/src/components/pullRequest/PullRequestGhosts.tsx+91-24

...	...	@@ -45,13 +45,11 @@ export function PullRequestListGhost({
45	45	<GhostBar className="size-4 rounded-full" />
46	46	<div className="min-w-0 space-y-1.5">
47	47	<GhostBar className={cn("h-3.5", TITLE_WIDTHS[index % TITLE_WIDTHS.length])} />
48		<GhostBar
49		className={cn("bg-muted-foreground/10", META_WIDTHS[index % META_WIDTHS.length])}
50		/>
	48	<GhostBar className={META_WIDTHS[index % META_WIDTHS.length]} />
51	49	</div>
52	50	<div className="flex flex-col items-end gap-1.5">
53	51	<GhostBar className="w-12" />
54		<GhostBar className="w-16 bg-muted-foreground/10" />
	52	<GhostBar className="w-16" />
55	53	</div>
56	54	</div>
57	55	))}
...	...	@@ -59,32 +57,101 @@ export function PullRequestListGhost({
59	57	);
60	58	}
61	59
62		/** The summary's own shape: a title, a byline, the facts rows, the description. */
	60	/**
	61	* The detail panel's current expanded shape. Keeping the chrome, summary facts, and description
	62	* boundaries in the ghost prevents the loaded pull request from replacing one layout with
	63	* another a moment later.
	64	*/
63	65	export function PullRequestDetailGhost() {
64	66	return (
65	67	<div
66	68	role="status"
67	69	aria-label="Loading pull request"
68		className="animate-ghost-pulse space-y-6 px-4 py-5"
	70	className="animate-ghost-pulse flex h-full min-h-0 flex-col overflow-hidden bg-background"
69	71	>
70		<div className="space-y-2">
71		<GhostBar className="h-5 w-4/5" />
72		<GhostBar className="w-2/5 bg-muted-foreground/10" />
	72	<div className="shrink-0 border-b border-border/60">
	73	<div className="flex h-7 items-center justify-between gap-3 px-4">
	74	<div className="flex min-w-0 flex-1 items-center gap-1.5">
	75	<GhostBar className="w-24" />
	76	<GhostBar className="w-9" />
	77	</div>
	78	<div className="flex shrink-0 items-center gap-1">
	79	<GhostBar className="h-5 w-16 rounded-md" />
	80	<GhostBar className="size-5 rounded-md" />
	81	</div>
	82	</div>
	83
	84	<div className="px-4 pb-4 pt-1">
	85	<GhostBar className="h-5 w-4/5 max-w-md" />
	86	<div className="mt-2 flex items-center gap-1.5">
	87	<GhostBar className="size-4 rounded-full" />
	88	<GhostBar className="w-24" />
	89	</div>
	90	<div className="mt-4 flex min-w-0 items-center gap-2">
	91	<GhostBar className="h-6 w-24 rounded-md" />
	92	<GhostBar className="size-3 rounded-full" />
	93	<GhostBar className="h-6 w-32 rounded-md" />
	94	<div className="ml-auto flex shrink-0 items-center gap-2">
	95	<GhostBar className="w-10" />
	96	<GhostBar className="w-20" />
	97	</div>
	98	</div>
	99	</div>
	100
	101	<div className="flex min-h-10 items-center justify-between gap-3 border-t border-border/60 px-4 py-2">
	102	<div className="flex items-center gap-1 p-0.5">
	103	<GhostBar className="h-6 w-16 rounded-md" />
	104	<GhostBar className="h-6 w-16 rounded-md" />
	105	<GhostBar className="h-6 w-12 rounded-md" />
	106	</div>
	107	<GhostBar className="w-20" />
	108	</div>
73	109	</div>
74		<div className="space-y-3">
75		{Array.from({ length: 4 }, (_, index) => (
76		<div key={index} className="flex items-center gap-3">
	110
	111	<div className="min-h-0 flex-1 overflow-hidden">
	112	<section className="px-4 py-3">
	113	<div className="grid min-h-8 grid-cols-[6rem_minmax(0,1fr)] items-center gap-2">
	114	<div className="flex items-center gap-1.5">
	115	<GhostBar className="size-3.5 rounded-full" />
	116	<GhostBar className="w-14" />
	117	</div>
	118	<div className="flex items-center gap-1">
	119	<GhostBar className="size-4 rounded-full" />
	120	<GhostBar className="size-4 rounded-full" />
	121	<GhostBar className="ml-1 size-5 rounded-md" />
	122	</div>
	123	</div>
	124	<div className="grid min-h-8 grid-cols-[6rem_minmax(0,1fr)] items-center gap-2">
	125	<div className="flex items-center gap-1.5">
	126	<GhostBar className="size-3.5 rounded-full" />
	127	<GhostBar className="w-10" />
	128	</div>
	129	<div className="flex items-center gap-1">
	130	<GhostBar className="h-5 w-24 rounded-full" />
	131	<GhostBar className="h-5 w-20 rounded-full" />
	132	</div>
	133	</div>
	134	<div className="grid min-h-8 grid-cols-[6rem_minmax(0,1fr)] items-center gap-2">
	135	<div className="flex items-center gap-1.5">
	136	<GhostBar className="size-3.5 rounded-full" />
	137	<GhostBar className="w-14" />
	138	</div>
	139	<GhostBar className="w-20" />
	140	</div>
	141	</section>
	142
	143	<section className="border-t border-border/60">
	144	<div className="flex min-h-11 items-center gap-1.5 px-4 py-3">
	145	<GhostBar className="h-4 w-24" />
77	146	<GhostBar className="size-3.5 rounded-full" />
78		<GhostBar className="w-20 bg-muted-foreground/10" />
79		<GhostBar className={TITLE_WIDTHS[(index + 1) % TITLE_WIDTHS.length]} />
80	147	</div>
81		))}
82		</div>
83		<div className="space-y-2 pt-1">
84		<GhostBar className="w-full bg-muted-foreground/10" />
85		<GhostBar className="w-11/12 bg-muted-foreground/10" />
86		<GhostBar className="w-4/5 bg-muted-foreground/10" />
87		<GhostBar className="w-2/3 bg-muted-foreground/10" />
	148	<div className="space-y-2 px-4 pb-4">
	149	<GhostBar className="w-full" />
	150	<GhostBar className="w-11/12" />
	151	<GhostBar className="w-4/5" />
	152	<GhostBar className="w-2/3" />
	153	</div>
	154	</section>
88	155	</div>
89	156	</div>
90	157	);
...	...	@@ -113,7 +180,7 @@ export function PullRequestTimelineGhost({ rows = 6 }: { rows?: number }) {
113	180	<div key={index} className="relative pb-5">
114	181	<GhostBar className="absolute -left-[1.55rem] top-1 size-2 rounded-full" />
115	182	<GhostBar className={cn("h-3.5", TITLE_WIDTHS[index % TITLE_WIDTHS.length])} />
116		<GhostBar className="mt-1.5 w-16 bg-muted-foreground/10" />
	183	<GhostBar className="mt-1.5 w-16" />
117	184	</div>
118	185	))}
119	186	</div>
...	...	@@ -134,8 +201,8 @@ export function PullRequestConversationGhost({ rows = 3 }: { rows?: number }) {
134	201	<GhostBar className="size-5 shrink-0 rounded-full" />
135	202	<div className="flex-1 space-y-1.5">
136	203	<GhostBar className={META_WIDTHS[index % META_WIDTHS.length]} />
137		<GhostBar className="w-full bg-muted-foreground/10" />
138		<GhostBar className="w-3/4 bg-muted-foreground/10" />
	204	<GhostBar className="w-full" />
	205	<GhostBar className="w-3/4" />
139	206	</div>
140	207	</div>
141	208	))}

apps/web/src/components/pullRequest/PullRequestListFilters.tsx+9-6

...	...	@@ -25,6 +25,7 @@ import { cn } from "~/lib/utils";
25	25	import { getSourceControlPresentationForKind } from "~/sourceControlPresentation";
26	26	import { ProjectFavicon } from "../ProjectFavicon";
27	27	import { InputGroup, InputGroupAddon, InputGroupInput } from "../ui/input-group";
	28	import { Button } from "../ui/button";
28	29
29	30	import {
30	31	Menu,
...	...	@@ -273,12 +274,14 @@ export function PullRequestFiltersMenu({
273	274	return (
274	275	<Menu>
275	276	<MenuTrigger
276		className={cn(
277		// The icon-button size that pairs with a full-height input, so the two read as one strip.
278		"relative inline-flex size-9 shrink-0 items-center justify-center rounded-lg border border-input text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground sm:size-8",
279		filtered && "text-foreground",
280		)}
281		aria-label="Filter pull requests"
	277	render={
	278	<Button
	279	className={cn("relative", filtered && "[--control-icon-color:currentColor]")}
	280	size="icon"
	281	variant="outline"
	282	aria-label="Filter pull requests"
	283	/>
	284	}
282	285	>
283	286	<ListFilterIcon className="size-4" />
284	287	{filtered ? (

apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx+3-3

...	...	@@ -220,12 +220,12 @@ function MetaRow({
220	220	children: ReactNode;
221	221	}) {
222	222	return (
223		<div className="flex items-center gap-2 py-1.5 text-xs">
224		<span className="flex w-24 shrink-0 items-center gap-1.5 text-muted-foreground">
	223	<div className="grid min-h-8 grid-cols-[6rem_minmax(0,1fr)] items-center gap-2 py-1.5 text-xs">
	224	<span className="flex min-w-0 items-center gap-1.5 text-muted-foreground">
225	225	{icon}
226	226	{label}
227	227	</span>
228		<span className="min-w-0 flex-1 text-foreground">{children}</span>
	228	<span className="min-w-0 text-foreground">{children}</span>
229	229	</div>
230	230	);
231	231	}

apps/web/src/components/pullRequest/pullRequestDetail.logic.test.ts+42-4

...	...	@@ -17,6 +17,7 @@ import {
17	17	handoffPrompt,
18	18	handoffReviewComments,
19	19	isPullRequestVerdictStale,
	20	isStackedPullRequestBase,
20	21	isThreadOwnPullRequest,
21	22	latestPullRequestReviewOutcomes,
22	23	newestPullRequestCommitAt,
...	...	@@ -142,8 +143,6 @@ describe("pull request handoff labels", () => {
142	143	fixFinding: "Fix in this thread",
143	144	fixCheck: "Fix in this thread",
144	145	fixFindings: "Fix findings in this thread",
145		resolve: "Resolve in this thread",
146		resolveConflicts: "Resolve conflicts in this thread",
147	146	});
148	147	});
149	148
...	...	@@ -152,8 +151,6 @@ describe("pull request handoff labels", () => {
152	151	fixFinding: "Fix in a thread",
153	152	fixCheck: "Fix",
154	153	fixFindings: "Fix findings in a thread",
155		resolve: "Resolve in a new thread",
156		resolveConflicts: "Resolve conflicts in a thread",
157	154	});
158	155	});
159	156	});
...	...	@@ -167,6 +164,47 @@ describe("pull request composer target", () => {
167	164	});
168	165	});
169	166
	167	describe("stacked pull request classification", () => {
	168	it("requires a known default branch", () => {
	169	expect(isStackedPullRequestBase("main", [{ name: "main", isDefault: false }])).toBe(false);
	170	});
	171
	172	it("recognizes local and remote forms of the default branch", () => {
	173	expect(
	174	isStackedPullRequestBase("main", [{ name: "main", isDefault: true, isRemote: false }]),
	175	).toBe(false);
	176	expect(
	177	isStackedPullRequestBase("main", [
	178	{ name: "origin/main", isDefault: true, isRemote: true, remoteName: "origin" },
	179	]),
	180	).toBe(false);
	181	});
	182
	183	it("classifies a non-default base as stacked once the default is known", () => {
	184	expect(
	185	isStackedPullRequestBase("feature-base", [
	186	{ name: "origin/main", isDefault: true, isRemote: true, remoteName: "origin" },
	187	]),
	188	).toBe(true);
	189	});
	190
	191	it("does not mistake a nested branch suffix for the default branch", () => {
	192	expect(
	193	isStackedPullRequestBase("main", [
	194	{
	195	name: "origin/feature/main",
	196	isDefault: true,
	197	isRemote: true,
	198	remoteName: "origin",
	199	},
	200	]),
	201	).toBe(true);
	202	expect(
	203	isStackedPullRequestBase("1.0", [{ name: "release/1.0", isDefault: true, isRemote: false }]),
	204	).toBe(true);
	205	});
	206	});
	207
170	208	describe("ordering comments", () => {
171	209	it("reverses the chronological list for newest first, and leaves oldest first alone", () => {
172	210	const comments = [{ createdAt: "a" }, { createdAt: "b" }, { createdAt: "c" }];

apps/web/src/components/pullRequest/pullRequestDetail.logic.ts+15-4

...	...	@@ -11,6 +11,7 @@ import type {
11	11	PullRequestReviewThread,
12	12	PullRequestState,
13	13	PullRequestUpdateMethod,
	14	VcsRef,
14	15	} from "@t3tools/contracts";
15	16
16	17	import { inferReviewCommentFenceLanguage, type ReviewCommentContext } from "~/reviewCommentContext";
...	...	@@ -75,15 +76,11 @@ export function pullRequestHandoffLabels(inThisThread: boolean) {
75	76	fixFinding: "Fix in this thread",
76	77	fixCheck: "Fix in this thread",
77	78	fixFindings: "Fix findings in this thread",
78		resolve: "Resolve in this thread",
79		resolveConflicts: "Resolve conflicts in this thread",
80	79	}
81	80	: {
82	81	fixFinding: "Fix in a thread",
83	82	fixCheck: "Fix",
84	83	fixFindings: "Fix findings in a thread",
85		resolve: "Resolve in a new thread",
86		resolveConflicts: "Resolve conflicts in a thread",
87	84	};
88	85	}
89	86
...	...	@@ -103,6 +100,20 @@ export function pullRequestActionMenuHasGroup(
103	100	return showsDraftToggle \|\| showsAutoMerge \|\| showsMergeMethods;
104	101	}
105	102
	103	export function isStackedPullRequestBase(
	104	baseBranch: string,
	105	refs: ReadonlyArray<Pick<VcsRef, "name" \| "isDefault" \| "isRemote" \| "remoteName">>,
	106	): boolean {
	107	const defaultRef = refs.find((refName) => refName.isDefault);
	108	if (!defaultRef) return false;
	109	if (defaultRef.isRemote !== true) return defaultRef.name !== baseBranch;
	110	const remotePrefix = `${defaultRef.remoteName ?? defaultRef.name.split("/")[0]}/`;
	111	const defaultBranch = defaultRef.name.startsWith(remotePrefix)
	112	? defaultRef.name.slice(remotePrefix.length)
	113	: defaultRef.name;
	114	return defaultBranch !== baseBranch;
	115	}
	116
106	117	/** Plain-language state, shown beside the author. Conflicts are a merge signal, not a state. */
107	118	export function describePullRequestState(state: PullRequestState, isDraft: boolean): string {
108	119	if (state === "merged") return "Merged";

apps/web/src/lib/openPullRequestLink.test.ts+19

...	...	@@ -1,6 +1,7 @@
1	1	import { describe, expect, it, vi } from "vite-plus/test";
2	2
3	3	import {
	4	changeRequestRepositoryUrl,
4	5	findProjectForChangeRequest,
5	6	openPullRequestLink,
6	7	parseChangeRequestUrl,
...	...	@@ -8,6 +9,24 @@ import {
8	9	shouldOpenPullRequestExternally,
9	10	} from "./openPullRequestLink";
10	11
	12	describe("changeRequestRepositoryUrl", () => {
	13	it("preserves repository path casing", () => {
	14	expect(
	15	changeRequestRepositoryUrl(
	16	"https://gitlab.example.test/Team/Platform/Repo/-/merge_requests/42/diffs#note_1",
	17	),
	18	).toBe("https://gitlab.example.test/Team/Platform/Repo");
	19	});
	20
	21	it("keeps pull-like segments inside nested GitLab repository paths", () => {
	22	expect(
	23	changeRequestRepositoryUrl(
	24	"https://gitlab.example.test/group/pull/123/repo/-/merge_requests/42",
	25	),
	26	).toBe("https://gitlab.example.test/group/pull/123/repo");
	27	});
	28	});
	29
11	30	describe("openPullRequestLink", () => {
12	31	it("opens the requested pull request URL", async () => {
13	32	const openExternal = vi.fn(async () => undefined);

apps/web/src/lib/openPullRequestLink.ts+17

...	...	@@ -118,6 +118,23 @@ export function parseChangeRequestUrl(targetUrl: string): ChangeRequestLink \| nu
118	118	return null;
119	119	}
120	120
	121	/** The repository root behind a recognised change-request URL, without PR-specific state. */
	122	export function changeRequestRepositoryUrl(targetUrl: string): string \| null {
	123	const changeRequest = parseChangeRequestUrl(targetUrl);
	124	if (changeRequest === null) return null;
	125	const url = new URL(targetUrl);
	126	const repositoryPath =
	127	/^(.*?)\/-\/merge_requests\/\d+(?:\/\|$)/iu.exec(url.pathname)?.[1] ??
	128	/^(.*?)(?:\/pull\/\d+\|\/-\/merge_requests\/\d+\|\/pull-requests\/\d+\|\/pullrequest\/\d+)(?:\/\|$)/iu.exec(
	129	url.pathname,
	130	)?.[1];
	131	if (!repositoryPath) return null;
	132	url.pathname = repositoryPath;
	133	url.search = "";
	134	url.hash = "";
	135	return url.toString();
	136	}
	137
121	138	function claim(host: string, match: RegExpExecArray \| null): ChangeRequestLink \| null {
122	139	const repository = match?.[1];
123	140	const number = Number(match?.[2]);

apps/web/src/routes/_chat.pull-requests.tsx+59-48

...	...	@@ -74,6 +74,9 @@ import {
74	74	WorkspaceBreadcrumbItem,
75	75	WorkspaceBreadcrumbSeparator,
76	76	} from "../components/WorkspaceBreadcrumb";
	77	import { WorkspacePageContainer } from "../components/WorkspacePageContainer";
	78	import { WorkspacePageHeader } from "../components/WorkspacePageHeader";
	79	import { isElectron } from "../env";
77	80	import { PanelLayoutControls } from "../components/chat/PanelLayoutControls";
78	81	import { Button } from "../components/ui/button";
79	82	import { Menu, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuTrigger } from "../components/ui/menu";
...	...	@@ -100,7 +103,6 @@ import {
100	103	import { useAtomCommand } from "../state/use-atom-command";
101	104	import { cn } from "~/lib/utils";
102	105	import { getSourceControlPresentationForKind } from "~/sourceControlPresentation";
103		import { COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS } from "~/workspaceTitlebar";
104	106
105	107	export interface PullRequestsSearch {
106	108	readonly involvement: PullRequestInvolvement;
...	...	@@ -1181,6 +1183,7 @@ function PullRequestsRouteView() {
1181	1183	: null,
1182	1184	[search.number, search.repository, selectedProject],
1183	1185	);
	1186	const rightPanelAvailable = selectedPullRequestSurface !== null;
1184	1187	useEffect(() => {
1185	1188	if (!pullRequestsSupported \|\| rightPanelRef === null \|\| linkedSelection === null) return;
1186	1189	useRightPanelStore.getState().openPullRequest(rightPanelRef, linkedSelection);
...	...	@@ -1294,9 +1297,10 @@ function PullRequestsRouteView() {
1294	1297	terminalAvailable={false}
1295	1298	terminalOpen={false}
1296	1299	terminalShortcutLabel={null}
1297		rightPanelAvailable={rightPanelState.surfaces.length > 0}
	1300	rightPanelAvailable={rightPanelAvailable}
1298	1301	rightPanelOpen={rightPanelState.isOpen}
1299	1302	rightPanelShortcutLabel={null}
	1303	rightPanelUnavailableLabel="Select a pull request first"
1300	1304	liveAgentCount={0}
1301	1305	onToggleTerminal={() => undefined}
1302	1306	onToggleRightPanel={toggleRightPanel}
...	...	@@ -1603,7 +1607,6 @@ function PullRequestsRouteView() {
1603	1607	reviewingQuery.refresh();
1604	1608	}}
1605	1609	onStateChange={handlePullRequestTabStatusChange}
1606		chromeVariant="collapse"
1607	1610	/>
1608	1611	</RightPanelTabs>
1609	1612	) : null}
...	...	@@ -1612,10 +1615,7 @@ function PullRequestsRouteView() {
1612	1615	);
1613	1616	}
1614	1617
1615		/**
1616		* A compact stand-in for one pill group: the trigger wears the current choice, the choices
1617		* live in a menu. Same options, same handler — only the footprint changes.
1618		*/
	1618	/** A compact stand-in for one pill group when the header is narrow. */
1619	1619	function CompactFilterMenu<Value extends string>({
1620	1620	label,
1621	1621	value,
...	...	@@ -1627,7 +1627,8 @@ function CompactFilterMenu<Value extends string>({
1627	1627	options: ReadonlyArray<PullRequestFilterOption<Value>>;
1628	1628	onChange: (value: Value) => void;
1629	1629	}) {
1630		const current = options.find((option) => option.value === value) ?? options[0]!;
	1630	const current = options.find((option) => option.value === value) ?? options[0];
	1631	if (!current) return null;
1631	1632	return (
1632	1633	<Menu>
1633	1634	<MenuTrigger
...	...	@@ -1640,15 +1641,12 @@ function CompactFilterMenu<Value extends string>({
1640	1641	<MenuPopup align="start" side="bottom" className="min-w-40">
1641	1642	<MenuRadioGroup value={value} onValueChange={(next) => onChange(next as Value)}>
1642	1643	{options.map((option) => {
1643		// A host the server has already said it cannot read is not a choice here either.
1644		// The pills disable it; a menu that offers it would answer the press by replacing
1645		// a working list with the same failure the pill row exists to explain.
1646	1644	const item = (
1647	1645	<MenuRadioItem
1648	1646	key={option.value}
1649	1647	value={option.value}
1650		className={option.unavailable ? "data-disabled:pointer-events-auto" : undefined}
1651	1648	disabled={option.unavailable !== undefined}
	1649	className="data-disabled:pointer-events-auto"
1652	1650	>
1653	1651	<span className="flex min-w-0 items-center gap-2">
1654	1652	<option.Icon aria-hidden className="size-3.5" />
...	...	@@ -1656,11 +1654,12 @@ function CompactFilterMenu<Value extends string>({
1656	1654	</span>
1657	1655	</MenuRadioItem>
1658	1656	);
1659		if (!option.unavailable) return item;
1660		return (
	1657	return option.unavailable === undefined ? (
	1658	item
	1659	) : (
1661	1660	<Tooltip key={option.value}>
1662	1661	<TooltipTrigger render={item} />
1663		<TooltipPopup side="top" className="max-w-80">
	1662	<TooltipPopup side="right" className="max-w-64 break-words">
1664	1663	{option.unavailable}
1665	1664	</TooltipPopup>
1666	1665	</Tooltip>
...	...	@@ -1838,18 +1837,10 @@ function PullRequestsColumn({
1838	1837	// Painted flat like the chat column: the inset underneath carries the chrome grain, and a
1839	1838	// content surface that lets it show reads as a different background than every thread.
1840	1839	<div className="flex min-h-0 min-w-0 flex-1 flex-col bg-background">
1841		<header
1842		className={cn(
1843		"drag-region flex h-[var(--workspace-topbar-height)] min-h-[var(--workspace-topbar-height)] shrink-0 items-center gap-1.5 px-3 sm:px-5",
1844		// A closed right panel leaves this column full-width, so its header runs
1845		// underneath the native window controls on Windows; reserve the inset the
1846		// way Settings and the chat view do. While the panel is open the column
1847		// ends at the panel's left edge and the absolute controls strip (already
1848		// WCO-aware) owns the top-right corner.
1849		!rightPanelOpen && "wco:pr-[var(--workspace-native-controls-inset)]",
1850		COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS,
1851		)}
1852		>
	1840	{/* A closed right panel leaves this column full-width, so the shared header
	1841	reserves native window controls. While the panel is open, the column ends
	1842	at the panel and the absolute controls strip owns the top-right corner. */}
	1843	<WorkspacePageHeader electron={isElectron} reserveNativeControls={!rightPanelOpen}>
1853	1844	{condensed ? (
1854	1845	<WorkspaceBreadcrumb ariaLabel="Pull request scope">
1855	1846	{/* The page name remains the foreground anchor in both states; the live filters are
...	...	@@ -1891,27 +1882,22 @@ function PullRequestsColumn({
1891	1882	)}
1892	1883	<div className="min-w-0 flex-1" />
1893	1884	{condensed ? (
1894		<ExpandableSearch
1895		searchInput={searchInput}
1896		searchValue={searchValue}
1897		open={searchOpen}
1898		onOpenChange={setSearchOpen}
1899		focusToken={searchFocusToken}
1900		onFocusWithin={(focused) => {
1901		topbarSearchFocusedRef.current = focused;
1902		}}
1903		/>
	1885	<div className="flex shrink-0 items-center gap-1.5">
	1886	<ExpandableSearch
	1887	searchInput={searchInput}
	1888	searchValue={searchValue}
	1889	open={searchOpen}
	1890	onOpenChange={setSearchOpen}
	1891	focusToken={searchFocusToken}
	1892	onFocusWithin={(focused) => {
	1893	topbarSearchFocusedRef.current = focused;
	1894	}}
	1895	/>
	1896	<PullRequestRefreshControl compact refreshing={refreshing} onRefresh={onRefresh} />
	1897	</div>
1904	1898	) : null}
1905		<Button
1906		size="icon-sm"
1907		variant="ghost"
1908		aria-label="Refresh pull requests"
1909		onClick={onRefresh}
1910		>
1911		<RefreshCwIcon className={cn("size-4", refreshing && "animate-spin")} />
1912		</Button>
1913	1899	{rightPanelControl}
1914		</header>
	1900	</WorkspacePageHeader>
1915	1901
1916	1902	<div
1917	1903	ref={scrollRef}
...	...	@@ -1920,19 +1906,44 @@ function PullRequestsColumn({
1920	1906	{/* The top padding is the fade band's own height (1.5rem here), the same pairing the
1921	1907	settings page makes: at rest the controls sit fully below the mask, and only
1922	1908	content actually passing under the chrome fades. */}
1923		<div className="mx-auto flex w-full max-w-4xl flex-col gap-4 px-5 pt-6 pb-12">
	1909	<WorkspacePageContainer className="gap-4">
1924	1910	<div className="flex flex-col gap-3">
1925	1911	<div ref={inFlowSearchRef} className="flex items-center gap-2">
1926	1912	{searchInput}
1927	1913	{filtersMenu}
	1914	{!condensed ? (
	1915	<PullRequestRefreshControl refreshing={refreshing} onRefresh={onRefresh} />
	1916	) : null}
1928	1917	</div>
1929	1918	{/* Scrolled past this marker, the controls are gone and the title takes over. */}
1930	1919	<div ref={markerRef} aria-hidden className="-mt-3 h-px w-full" />
1931	1920	</div>
1932	1921
1933	1922	{listBody}
1934		</div>
	1923	</WorkspacePageContainer>
1935	1924	</div>
1936	1925	</div>
1937	1926	);
1938	1927	}
	1928
	1929	function PullRequestRefreshControl({
	1930	compact = false,
	1931	refreshing,
	1932	onRefresh,
	1933	}: {
	1934	compact?: boolean;
	1935	refreshing: boolean;
	1936	onRefresh: () => void;
	1937	}) {
	1938	return (
	1939	<Button
	1940	size={compact ? "icon-sm" : "icon"}
	1941	variant={compact ? "ghost" : "outline"}
	1942	aria-label="Refresh pull requests"
	1943	onClick={onRefresh}
	1944	disabled={refreshing}
	1945	>
	1946	<RefreshCwIcon className={cn("size-4", refreshing && "animate-spin")} />
	1947	</Button>
	1948	);
	1949	}