From 62cf884e81b816a80808776b46e052f1a1db5509 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Thu, 19 Mar 2026 16:53:38 +0100
Subject: [PATCH] fix(site): show PR number instead of title on mobile top bar
 (#23296)

---
 .../AgentsPage/AgentDetail/TopBar.stories.tsx | 83 +++++++++++++++++++
 .../pages/AgentsPage/AgentDetail/TopBar.tsx   | 45 ++--------
 2 files changed, 91 insertions(+), 37 deletions(-)

diff --git a/site/src/pages/AgentsPage/AgentDetail/TopBar.stories.tsx b/site/src/pages/AgentsPage/AgentDetail/TopBar.stories.tsx
index 2d0aa50819..a269aef5a8 100644
--- a/site/src/pages/AgentsPage/AgentDetail/TopBar.stories.tsx
+++ b/site/src/pages/AgentsPage/AgentDetail/TopBar.stories.tsx
@@ -143,6 +143,89 @@ export const WithClosedPR: Story = {
 	},
 };
 
+// ---------------------------------------------------------------
+// Mobile viewport stories — constrain width to 390px so the
+// responsive md: breakpoint triggers the compact PR number.
+// ---------------------------------------------------------------
+
+const mobileDecorator: Story["decorators"] = [
+	(Story) => (
+		<div style={{ width: 390 }}>
+			<Story />
+		</div>
+	),
+];
+
+export const MobileWithOpenPR: Story = {
+	decorators: mobileDecorator,
+	parameters: { chromatic: { viewports: [390] } },
+	args: {
+		diffStatusData: {
+			chat_id: "chat-1",
+			url: "https://github.com/coder/coder/pull/123",
+			pull_request_title: "fix: resolve race condition in workspace builds",
+			pull_request_draft: false,
+			changes_requested: false,
+			additions: 42,
+			deletions: 7,
+			changed_files: 5,
+		},
+	},
+};
+
+export const MobileWithDraftPR: Story = {
+	decorators: mobileDecorator,
+	parameters: { chromatic: { viewports: [390] } },
+	args: {
+		diffStatusData: {
+			chat_id: "chat-1",
+			url: "https://github.com/coder/coder/pull/456",
+			pull_request_title: "feat: add new notification system",
+			pull_request_draft: true,
+			changes_requested: false,
+			additions: 120,
+			deletions: 30,
+			changed_files: 8,
+		},
+	},
+};
+
+export const MobileWithMergedPR: Story = {
+	decorators: mobileDecorator,
+	parameters: { chromatic: { viewports: [390] } },
+	args: {
+		diffStatusData: {
+			chat_id: "chat-1",
+			url: "https://github.com/coder/coder/pull/789",
+			pull_request_title: "chore: update dependencies",
+			pull_request_state: "merged",
+			pull_request_draft: false,
+			changes_requested: false,
+			additions: 5,
+			deletions: 3,
+			changed_files: 1,
+		},
+	},
+};
+
+export const MobileWithClosedPR: Story = {
+	decorators: mobileDecorator,
+	parameters: { chromatic: { viewports: [390] } },
+	args: {
+		diffStatusData: {
+			chat_id: "chat-1",
+			url: "https://github.com/coder/coder/pull/101",
+			pull_request_title: "fix: deprecated API cleanup",
+			pull_request_state: "closed",
+			pull_request_draft: false,
+			changes_requested: false,
+			additions: 0,
+			deletions: 50,
+			changed_files: 3,
+		},
+	},
+};
+
 export const ArchivedWithUnarchive: Story = {
 	args: {
 		isArchived: true,
diff --git a/site/src/pages/AgentsPage/AgentDetail/TopBar.tsx b/site/src/pages/AgentsPage/AgentDetail/TopBar.tsx
index d833c54e62..3581a4d62c 100644
--- a/site/src/pages/AgentsPage/AgentDetail/TopBar.tsx
+++ b/site/src/pages/AgentsPage/AgentDetail/TopBar.tsx
@@ -16,10 +16,6 @@ import {
 	CopyIcon,
 	EllipsisIcon,
 	ExternalLinkIcon,
-	GitMergeIcon,
-	GitPullRequestArrowIcon,
-	GitPullRequestClosedIcon,
-	GitPullRequestDraftIcon,
 	MonitorIcon,
 	PanelLeftIcon,
 	PanelRightCloseIcon,
@@ -32,6 +28,7 @@ import { useNavigate } from "react-router";
 import { toast } from "sonner";
 import { cn } from "utils/cn";
 import { useEmbedContext } from "../EmbedContext";
+import { PrStateIcon } from "../GitPanel";
 import { parsePullRequestUrl } from "../pullRequest";
 
 interface SidebarPanelState {
@@ -64,35 +61,6 @@ type AgentDetailTopBarProps = {
 	diffStatusData?: ChatDiffStatus;
 };
 
-const PrStateIcon: FC<{
-	state?: string;
-	draft?: boolean;
-	className?: string;
-}> = ({ state, draft, className }) => {
-	if (state === "merged") {
-		return <GitMergeIcon className={cn("text-git-merged-bright", className)} />;
-	}
-	if (state === "closed") {
-		return (
-			<GitPullRequestClosedIcon
-				className={cn("text-git-deleted-bright", className)}
-			/>
-		);
-	}
-	if (draft) {
-		return (
-			<GitPullRequestDraftIcon
-				className={cn("text-content-secondary", className)}
-			/>
-		);
-	}
-	return (
-		<GitPullRequestArrowIcon
-			className={cn("text-git-added-bright", className)}
-		/>
-	);
-};
-
 export const AgentDetailTopBar: FC<AgentDetailTopBarProps> = ({
 	chatTitle,
 	parentChat,
@@ -169,9 +137,9 @@ export const AgentDetailTopBar: FC<AgentDetailTopBarProps> = ({
 					</div>
 				)}
 			</div>
-			{/* PR link — visible on mobile always, hidden on desktop
-				   when the sidebar panel is open (which already shows PR
-				   info). */}
+			{/* PR link — mobile: icon + number; desktop: icon + title.
+			   Hidden on desktop when the sidebar panel is open
+			   (which already shows PR info). */}
 			{prUrl && hasPR && (
 				<a
 					href={prUrl}
@@ -187,9 +155,12 @@ export const AgentDetailTopBar: FC<AgentDetailTopBarProps> = ({
 						draft={prDraft}
 						className="!size-3.5 shrink-0"
 					/>
-					<span className="truncate max-w-[120px]">
+					<span className="truncate max-w-[120px] hidden md:inline">
 						{prTitle || (prNumberMatch ? `#${prNumberMatch}` : "PR")}
 					</span>
+					<span className="md:hidden">
+						{prNumberMatch ? prNumberMatch : "PR"}
+					</span>
 				</a>
 			)}
 			{/* Actions area */}