From 488d2790bec2e808b0c0b9922b128eeb6113e169 Mon Sep 17 00:00:00 2001
From: Tracy Johnson <tracy@coder.com>
Date: Wed, 19 Aug 2026 20:04:25 +0000
Subject: [PATCH 1/4] feat(site/src/pages/AgentsPage/components/ChatsSidebar):
 move PR icon to diff line, center unread dot, persist kebab

The linked pull request icon (open, draft, merged, closed) now renders on
the second line next to the diff stats in both the sidebar tree and the
chat search results, instead of replacing the status icon when idle. The
unread dot is centered on the kebab axis so it stops jumping when the
actions trigger swaps in. The row actions trigger stays visible on the
selected chat without hovering, and the timestamp is hidden there.

Cherry-picked from #28317 without the subagent status icon variants.
---
 .../ChatsSidebar/ChatsSidebar.stories.tsx     | 47 ++++++++++++++
 .../dialogs/ChatSearchResults.tsx             | 16 ++++-
 .../ChatsSidebar/tree/ChatTreeNode.tsx        | 36 ++++++++--
 .../ChatsSidebar/tree/statusConfig.ts         | 65 ++++++++++++++-----
 4 files changed, 140 insertions(+), 24 deletions(-)

diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/ChatsSidebar.stories.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/ChatsSidebar.stories.tsx
index cbcbd3b35f1..ada70da5e03 100644
--- a/site/src/pages/AgentsPage/components/ChatsSidebar/ChatsSidebar.stories.tsx
+++ b/site/src/pages/AgentsPage/components/ChatsSidebar/ChatsSidebar.stories.tsx
@@ -1860,6 +1860,53 @@ export const WithPRStateIcons: Story = {
 			routing: agentsRouting,
 		}),
 	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await waitFor(() => {
+			expect(canvas.getByLabelText("Pull request open")).toBeInTheDocument();
+			expect(canvas.getByLabelText("Draft pull request")).toBeInTheDocument();
+			expect(canvas.getByLabelText("Pull request merged")).toBeInTheDocument();
+			expect(canvas.getByLabelText("Pull request closed")).toBeInTheDocument();
+		});
+	},
+};
+
+export const ActiveChatKebabPersistent: Story = {
+	args: {
+		chats: [
+			buildChat({
+				id: "active-chat",
+				title: "Active chat",
+				updated_at: recentTimestamp,
+			}),
+			buildChat({
+				id: "other-chat",
+				title: "Other chat",
+				updated_at: recentTimestamp,
+			}),
+		],
+	},
+	parameters: {
+		reactRouter: reactRouterParameters({
+			location: {
+				path: "/agents/active-chat",
+				pathParams: { agentId: "active-chat" },
+			},
+			routing: agentsRouting,
+		}),
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const activeTrigger = await canvas.findByLabelText(
+			"Open actions for Active chat",
+		);
+		// The active chat keeps its actions trigger visible without hover.
+		await waitFor(() => {
+			expect(window.getComputedStyle(activeTrigger).opacity).toBe("1");
+		});
+		const otherTrigger = canvas.getByLabelText("Open actions for Other chat");
+		expect(window.getComputedStyle(otherTrigger).opacity).toBe("0");
+	},
 };
 
 export const WithUnreadChats: Story = {
diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/dialogs/ChatSearchResults.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/dialogs/ChatSearchResults.tsx
index 6e6edc2e477..0fbdf3fdab1 100644
--- a/site/src/pages/AgentsPage/components/ChatsSidebar/dialogs/ChatSearchResults.tsx
+++ b/site/src/pages/AgentsPage/components/ChatsSidebar/dialogs/ChatSearchResults.tsx
@@ -255,8 +255,11 @@ const ChatSearchResultRow: FC<ChatSearchResultRowProps> = ({
 	const {
 		icon: StatusIcon,
 		className: statusClassName,
+		label: statusLabel,
+		prIcon,
 		diffStatus,
 	} = getChatDisplayConfig(chat);
+	const PRIcon = prIcon?.icon;
 	const additions = diffStatus?.additions ?? 0;
 	const deletions = diffStatus?.deletions ?? 0;
 	const changedFiles = diffStatus?.changed_files ?? 0;
@@ -285,12 +288,23 @@ const ChatSearchResultRow: FC<ChatSearchResultRowProps> = ({
 				isSelected && "bg-surface-tertiary/40 text-content-primary",
 			)}
 		>
-			<StatusIcon className={cn("mt-1 size-3.5 shrink-0", statusClassName)} />
+			<StatusIcon
+				role="img"
+				aria-label={statusLabel}
+				className={cn("mt-1 size-3.5 shrink-0", statusClassName)}
+			/>
 			<div className="min-w-0">
 				<div className="truncate text-sm text-content-primary">
 					{chat.title}
 				</div>
 				<div className="flex min-w-0 items-center gap-1.5 text-xs">
+					{PRIcon && prIcon && (
+						<PRIcon
+							role="img"
+							aria-label={prIcon.label}
+							className={cn("size-3.5 shrink-0", prIcon.className)}
+						/>
+					)}
 					{hasLineStats && (
 						<span className="inline-flex shrink-0 items-center gap-0.5 tabular-nums">
 							<span className="text-git-added-bright">+{additions}</span>
diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx
index 04ed47cc7a0..cd40901417c 100644
--- a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx
+++ b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx
@@ -127,8 +127,11 @@ export const ChatTreeNode: FC<ChatTreeNodeProps> = ({ chat, isChildNode }) => {
 	const {
 		icon: StatusIcon,
 		className: statusClassName,
+		label: statusLabel,
+		prIcon,
 		diffStatus,
 	} = getChatDisplayConfig(chat);
+	const PRIcon = prIcon?.icon;
 	const hasLinkedDiffStatus = Boolean(diffStatus?.url);
 	const changedFiles = diffStatus?.changed_files ?? 0;
 	const additions = diffStatus?.additions ?? 0;
@@ -199,6 +202,8 @@ export const ChatTreeNode: FC<ChatTreeNodeProps> = ({ chat, isChildNode }) => {
 											? `agents-tree-executing-${chat.id}`
 											: undefined
 									}
+									role="img"
+									aria-label={statusLabel}
 									className={cn("size-3.5 shrink-0", statusClassName)}
 								/>
 							</div>
@@ -253,6 +258,13 @@ export const ChatTreeNode: FC<ChatTreeNodeProps> = ({ chat, isChildNode }) => {
 												<BotIcon className="size-3.5" aria-hidden="true" />
 											</span>
 										)}
+										{PRIcon && prIcon && (
+											<PRIcon
+												role="img"
+												aria-label={prIcon.label}
+												className={cn("size-3.5 shrink-0", prIcon.className)}
+											/>
+										)}
 										{hasLinkedDiffStatus && hasLineStats && (
 											<span
 												className="inline-flex shrink-0 items-center gap-0.5 text-[13px] leading-4 tabular-nums"
@@ -297,14 +309,21 @@ export const ChatTreeNode: FC<ChatTreeNodeProps> = ({ chat, isChildNode }) => {
 											// keep the timestamp visible.
 											hasMenuActions &&
 												"[@media(hover:hover)]:group-hover:hidden group-has-[[data-state=open]]:hidden",
+											// The active chat keeps the actions trigger visible, so
+											// the timestamp stays hidden there.
+											hasMenuActions && isActiveChat && "hidden",
 										)}
 									>
 										{chat.has_unread && !isActiveChat ? (
-											<span
-												className="size-2 shrink-0 rounded-full bg-content-link pr-1"
-												data-testid={`unread-indicator-${chat.id}`}
-												aria-hidden="true"
-											/>
+											// The w-3.5 box matches the kebab icon's width so the
+											// dot centers on the same axis as the ellipsis glyph.
+											<span className="flex w-3.5 shrink-0 justify-center">
+												<span
+													className="size-2 rounded-full bg-content-link"
+													data-testid={`unread-indicator-${chat.id}`}
+													aria-hidden="true"
+												/>
+											</span>
 										) : (
 											<>
 												{/* Pin the ignored mask width so Pixel does not diff bounding rect changes. */}
@@ -331,7 +350,12 @@ export const ChatTreeNode: FC<ChatTreeNodeProps> = ({ chat, isChildNode }) => {
 										<Button
 											size="icon"
 											variant="subtle"
-											className="absolute inset-0 flex h-6 w-7 min-w-0 justify-end rounded-none px-0 opacity-0 text-content-secondary hover:text-content-primary [@media(hover:hover)]:group-hover:opacity-100 data-[state=open]:opacity-100"
+											className={cn(
+												"absolute inset-0 flex h-6 w-7 min-w-0 justify-end rounded-none px-0 opacity-0 text-content-secondary hover:text-content-primary [@media(hover:hover)]:group-hover:opacity-100 data-[state=open]:opacity-100",
+												// Keep the trigger visible on the active chat so it is
+												// reachable without hovering.
+												isActiveChat && "opacity-100",
+											)}
 											aria-label={`Open actions for ${chat.title}`}
 										>
 											<EllipsisVerticalIcon className="size-3.5" />
diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/statusConfig.ts b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/statusConfig.ts
index 30130480c1f..842ffddb577 100644
--- a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/statusConfig.ts
+++ b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/statusConfig.ts
@@ -14,15 +14,36 @@ import type { Chat, ChatDiffStatus, ChatStatus } from "#/api/typesGenerated";
 type ChatIconConfig = {
 	icon: LucideIcon;
 	className: string;
+	label: string;
 };
 
 const statusConfig = {
-	waiting: { icon: CheckIcon, className: "text-content-secondary" },
-	running: { icon: Loader2Icon, className: "text-content-link animate-spin" },
-	interrupting: { icon: PauseIcon, className: "text-content-warning" },
-	requires_action: { icon: PauseIcon, className: "text-content-warning" },
-	error: { icon: AlertTriangleIcon, className: "text-content-destructive" },
-} as const;
+	waiting: {
+		icon: CheckIcon,
+		className: "text-content-secondary",
+		label: "Idle",
+	},
+	running: {
+		icon: Loader2Icon,
+		className: "text-content-link animate-spin",
+		label: "Working",
+	},
+	interrupting: {
+		icon: PauseIcon,
+		className: "text-content-warning",
+		label: "Interrupting",
+	},
+	requires_action: {
+		icon: PauseIcon,
+		className: "text-content-warning",
+		label: "Requires action",
+	},
+	error: {
+		icon: AlertTriangleIcon,
+		className: "text-content-destructive",
+		label: "Error",
+	},
+} as const satisfies Record<ChatStatus, ChatIconConfig>;
 
 const getStatusConfig = (status: ChatStatus): ChatIconConfig => {
 	return statusConfig[status] ?? statusConfig.waiting;
@@ -36,21 +57,31 @@ const getPRIconConfig = (
 		return undefined;
 	}
 	if (state === "merged") {
-		return { icon: GitMergeIcon, className: "text-git-merged-bright" };
+		return {
+			icon: GitMergeIcon,
+			className: "text-git-merged-bright",
+			label: "Pull request merged",
+		};
 	}
 	if (state === "closed") {
 		return {
 			icon: GitPullRequestClosedIcon,
 			className: "text-git-deleted-bright",
+			label: "Pull request closed",
 		};
 	}
 	if (diffStatus?.pull_request_draft) {
 		return {
 			icon: GitPullRequestDraftIcon,
 			className: "text-content-secondary",
+			label: "Draft pull request",
 		};
 	}
-	return { icon: GitPullRequestArrowIcon, className: "text-git-added-bright" };
+	return {
+		icon: GitPullRequestArrowIcon,
+		className: "text-git-added-bright",
+		label: "Pull request open",
+	};
 };
 
 const getChatDiffStatus = (chat: Chat): ChatDiffStatus | undefined => {
@@ -58,28 +89,28 @@ const getChatDiffStatus = (chat: Chat): ChatDiffStatus | undefined => {
 };
 
 /**
- * Returns the icon and styling that represents a chat's current state.
+ * Returns the icons and styling that represent a chat's current state.
  *
- * Combines `getStatusConfig` and `getPRIconConfig`: when the chat is in the
- * settled `waiting` state and has a linked PR, the PR icon takes precedence
- * so list rows surface the merge / closed / draft state instead of the
- * generic status icon.
+ * The status icon always reflects the chat status. Any linked pull
+ * request is surfaced separately via `prIcon` so rows can render it
+ * next to the diff stats.
  */
 export const getChatDisplayConfig = (
 	chat: Chat,
 ): {
 	icon: LucideIcon;
 	className: string;
+	label: string;
+	prIcon: ChatIconConfig | undefined;
 	diffStatus: ChatDiffStatus | undefined;
 } => {
 	const diffStatus = getChatDiffStatus(chat);
-	const baseConfig = getStatusConfig(chat.status);
-	const prConfig =
-		chat.status === "waiting" ? getPRIconConfig(diffStatus) : undefined;
-	const config = prConfig ?? baseConfig;
+	const config = getStatusConfig(chat.status);
 	return {
 		icon: config.icon,
 		className: config.className,
+		label: config.label,
+		prIcon: getPRIconConfig(diffStatus),
 		diffStatus,
 	};
 };

From abfd6d74f6d6c4259575ee5c1f0db6b4211b9129 Mon Sep 17 00:00:00 2001
From: Tracy Johnson <tracy@coder.com>
Date: Wed, 19 Aug 2026 20:36:32 +0000
Subject: [PATCH 2/4] feat(site/src/pages/AgentsPage/components/ChatsSidebar):
 remove subagent count badge from chat row metadata line

The count and bot icon added in #28234 no longer render on the second
line, making room for the PR icon and diff stats. The "Show subagents"
menu toggle and expand behavior are unchanged.
---
 .../components/ChatsSidebar/tree/ChatTreeNode.tsx    | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx
index cd40901417c..81f1e7353ba 100644
--- a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx
+++ b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx
@@ -1,5 +1,4 @@
 import {
-	BotIcon,
 	ChevronDownIcon,
 	ChevronRightIcon,
 	EllipsisVerticalIcon,
@@ -247,17 +246,6 @@ export const ChatTreeNode: FC<ChatTreeNodeProps> = ({ chat, isChildNode }) => {
 										)}
 									</div>
 									<div className="flex min-w-0 items-center gap-1.5">
-										{hasChildren && (
-											<span
-												className="inline-flex shrink-0 items-center gap-0.5 text-[13px] leading-4 tabular-nums text-content-secondary"
-												title={`${childIDs.length} ${
-													childIDs.length === 1 ? "subagent" : "subagents"
-												}`}
-											>
-												{childIDs.length}
-												<BotIcon className="size-3.5" aria-hidden="true" />
-											</span>
-										)}
 										{PRIcon && prIcon && (
 											<PRIcon
 												role="img"

From 818fec7daa53f051c0df1a742e5328bb8a787ec0 Mon Sep 17 00:00:00 2001
From: Tracy Johnson <tracy@coder.com>
Date: Wed, 19 Aug 2026 20:43:45 +0000
Subject: [PATCH 3/4] chore(site/src/pages/AgentsPage/components/ChatsSidebar):
 drop redundant comments in ChatTreeNode

---
 .../components/ChatsSidebar/tree/ChatTreeNode.tsx           | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx
index 81f1e7353ba..ce2bacc0f9b 100644
--- a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx
+++ b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx
@@ -297,14 +297,10 @@ export const ChatTreeNode: FC<ChatTreeNodeProps> = ({ chat, isChildNode }) => {
 											// keep the timestamp visible.
 											hasMenuActions &&
 												"[@media(hover:hover)]:group-hover:hidden group-has-[[data-state=open]]:hidden",
-											// The active chat keeps the actions trigger visible, so
-											// the timestamp stays hidden there.
 											hasMenuActions && isActiveChat && "hidden",
 										)}
 									>
 										{chat.has_unread && !isActiveChat ? (
-											// The w-3.5 box matches the kebab icon's width so the
-											// dot centers on the same axis as the ellipsis glyph.
 											<span className="flex w-3.5 shrink-0 justify-center">
 												<span
 													className="size-2 rounded-full bg-content-link"
@@ -340,8 +336,6 @@ export const ChatTreeNode: FC<ChatTreeNodeProps> = ({ chat, isChildNode }) => {
 											variant="subtle"
 											className={cn(
 												"absolute inset-0 flex h-6 w-7 min-w-0 justify-end rounded-none px-0 opacity-0 text-content-secondary hover:text-content-primary [@media(hover:hover)]:group-hover:opacity-100 data-[state=open]:opacity-100",
-												// Keep the trigger visible on the active chat so it is
-												// reachable without hovering.
 												isActiveChat && "opacity-100",
 											)}
 											aria-label={`Open actions for ${chat.title}`}

From 1ad93c9bc064b38c9fb829ad5dc11cae5d7e38d1 Mon Sep 17 00:00:00 2001
From: Tracy Johnson <tracy@coder.com>
Date: Wed, 19 Aug 2026 20:51:11 +0000
Subject: [PATCH 4/4] chore(site/src/pages/AgentsPage/components/ChatsSidebar):
 trim getChatDisplayConfig doc comment

---
 .../AgentsPage/components/ChatsSidebar/tree/statusConfig.ts   | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/statusConfig.ts b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/statusConfig.ts
index 842ffddb577..4a2449e46ae 100644
--- a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/statusConfig.ts
+++ b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/statusConfig.ts
@@ -91,9 +91,7 @@ const getChatDiffStatus = (chat: Chat): ChatDiffStatus | undefined => {
 /**
  * Returns the icons and styling that represent a chat's current state.
  *
- * The status icon always reflects the chat status. Any linked pull
- * request is surfaced separately via `prIcon` so rows can render it
- * next to the diff stats.
+ * The status icon always reflects the chat status.
  */
 export const getChatDisplayConfig = (
 	chat: Chat,