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.
This commit is contained in:
Jake Howell
2026-04-21 03:49:50 +00:00
committed by GitHub
parent ac6c9452c0
commit 3466806a66
3 changed files with 27 additions and 16 deletions
@@ -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
}
/>
);
+5 -2
View File
@@ -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>
@@ -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={() => {