From 3466806a66090738dec3cb16480c37a43b046aeb Mon Sep 17 00:00:00 2001
From: Jake Howell <jacob@coder.com>
Date: Tue, 21 Apr 2026 13:49:50 +1000
Subject: [PATCH] fix(site): implement agent logs improvements (#24455)

Polishes the agent logs panel in the workspace resources UI: consistent
padding, clearer behavior when switching log source tabs, and a more
usable download menu for long source lists.

- Use symmetric vertical padding on the logs container (`py-4` instead
of top-only padding).
- Add optional `showSourceIcons` on `AgentLogs` (defaults on);
`AgentRow` turns it off unless the **All** tab is active so filtered
tabs are not cluttered with redundant source icons.
- Anchor the download-logs dropdown below the trigger and cap menu
height to 6 items with scrolling so many sources do not overflow the
viewport.
---
 .../modules/resources/AgentLogs/AgentLogs.tsx | 30 +++++++++++--------
 site/src/modules/resources/AgentRow.tsx       |  7 +++--
 .../DownloadSelectedAgentLogsButton.tsx       |  6 +++-
 3 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/site/src/modules/resources/AgentLogs/AgentLogs.tsx b/site/src/modules/resources/AgentLogs/AgentLogs.tsx
index 6370701843..ad087742f6 100644
--- a/site/src/modules/resources/AgentLogs/AgentLogs.tsx
+++ b/site/src/modules/resources/AgentLogs/AgentLogs.tsx
@@ -29,6 +29,7 @@ type AgentLogsProps = Omit<
 	logs: readonly Line[];
 	sources: readonly WorkspaceAgentLogSource[];
 	overflowed: boolean;
+	showSourceIcons?: boolean;
 };
 
 export const AgentLogs: React.FC<AgentLogsProps> = ({
@@ -36,6 +37,7 @@ export const AgentLogs: React.FC<AgentLogsProps> = ({
 	sources,
 	overflowed,
 	className,
+	showSourceIcons = true,
 	...listProps
 }) => {
 	const logSourceById = Object.fromEntries(sources.map((s) => [s.id, s]));
@@ -51,7 +53,7 @@ export const AgentLogs: React.FC<AgentLogsProps> = ({
 				// We need the div selector to be able to apply the padding
 				// top from startupLogs
 				className={cn(
-					"pt-4 [&>div]:relative bg-surface-secondary",
+					"py-4 [&>div]:relative bg-surface-secondary",
 					// Add extra padding so that overflow indicator can't
 					// fully cover up lines of text
 					overflowed && "pb-10",
@@ -126,18 +128,20 @@ export const AgentLogs: React.FC<AgentLogsProps> = ({
 							line={log}
 							style={style}
 							sourceIcon={
-								<Tooltip>
-									<TooltipTrigger asChild>{icon}</TooltipTrigger>
-									<TooltipContent side="bottom">
-										{logSource.display_name}
-										{assignedIcon && (
-											<i>
-												<br />
-												No icon specified!
-											</i>
-										)}
-									</TooltipContent>
-								</Tooltip>
+								showSourceIcons ? (
+									<Tooltip>
+										<TooltipTrigger asChild>{icon}</TooltipTrigger>
+										<TooltipContent side="bottom">
+											{logSource.display_name}
+											{assignedIcon && (
+												<i>
+													<br />
+													No icon specified!
+												</i>
+											)}
+										</TooltipContent>
+									</Tooltip>
+								) : null
 							}
 						/>
 					);
diff --git a/site/src/modules/resources/AgentRow.tsx b/site/src/modules/resources/AgentRow.tsx
index 52ae1e1d04..dc7572980e 100644
--- a/site/src/modules/resources/AgentRow.tsx
+++ b/site/src/modules/resources/AgentRow.tsx
@@ -184,9 +184,11 @@ export const AgentRow: FC<AgentRowProps> = ({
 		if (!parent) {
 			return;
 		}
+		// Use the parent's scrollHeight (not the inner div's) so that
+		// any padding on the scroll container is included in the
+		// calculation and doesn't inflate the "at bottom" zone.
 		const distanceFromBottom =
-			logListDivRef.current.scrollHeight -
-			(props.scrollOffset + parent.clientHeight);
+			parent.scrollHeight - (props.scrollOffset + parent.clientHeight);
 		setBottomOfLogs(distanceFromBottom < AGENT_LOG_LINE_HEIGHT);
 	};
 
@@ -596,6 +598,7 @@ export const AgentRow: FC<AgentRowProps> = ({
 													sources={agent.log_sources}
 													overflowed={agent.logs_overflowed}
 													className="bg-transparent"
+													showSourceIcons={selectedLogTab === "all"}
 												/>
 											)}
 										</AutoSizer>
diff --git a/site/src/modules/resources/DownloadSelectedAgentLogsButton.tsx b/site/src/modules/resources/DownloadSelectedAgentLogsButton.tsx
index df75d9f091..fd2b9ecd07 100644
--- a/site/src/modules/resources/DownloadSelectedAgentLogsButton.tsx
+++ b/site/src/modules/resources/DownloadSelectedAgentLogsButton.tsx
@@ -61,7 +61,11 @@ export const DownloadSelectedAgentLogsButton: FC<
 					<ChevronDownIcon className="size-icon-sm" />
 				</Button>
 			</DropdownMenuTrigger>
-			<DropdownMenuContent align="end">
+			<DropdownMenuContent
+				side="bottom"
+				align="end"
+				className="max-h-56 overflow-y-auto"
+			>
 				<DropdownMenuItem
 					disabled={!hasAllLogs}
 					onSelect={() => {