From 7f137ccf94ecdf12b249f17635221cf434c5f60f Mon Sep 17 00:00:00 2001 From: Tracy Johnson Date: Thu, 20 Aug 2026 12:49:59 +0000 Subject: [PATCH 01/12] feat(site/src/pages/AgentsPage): dim unselected sidebar chat titles --- .../AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx index ce2bacc0f9b..b82a3568714 100644 --- a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx +++ b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx @@ -236,7 +236,7 @@ export const ChatTreeNode: FC = ({ chat, isChildNode }) => { {chat.title} From 1fc94ad677669e90193774fd039d6494767a9926 Mon Sep 17 00:00:00 2001 From: Tracy Johnson Date: Thu, 20 Aug 2026 13:15:13 +0000 Subject: [PATCH 02/12] feat(site/src/pages/AgentsPage): restore full title opacity on hover --- .../AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx index b82a3568714..1a9532248cd 100644 --- a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx +++ b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx @@ -236,7 +236,9 @@ export const ChatTreeNode: FC = ({ chat, isChildNode }) => { {chat.title} From 4c99f72c03b911c831a7eebe2a6992e701d33caf Mon Sep 17 00:00:00 2001 From: Tracy Johnson Date: Thu, 20 Aug 2026 13:23:17 +0000 Subject: [PATCH 03/12] feat(site/src/pages/AgentsPage): increase selected chat background opacity --- .../AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx index 1a9532248cd..d0a6b096746 100644 --- a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx +++ b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx @@ -179,7 +179,7 @@ export const ChatTreeNode: FC = ({ chat, isChildNode }) => { className={cn( "group relative flex min-w-0 select-none [@media(pointer:coarse)]:[-webkit-touch-callout:none] items-start gap-1.5 rounded-md pl-1 pr-1.5 text-content-secondary", "transition-none [@media(hover:hover)]:hover:bg-surface-tertiary/50 [@media(hover:hover)]:hover:text-content-primary has-[[data-state=open]]:bg-surface-tertiary", - "has-[[aria-current=page]]:bg-surface-quaternary/25 has-[[aria-current=page]]:text-content-primary [@media(hover:hover)]:has-[[aria-current=page]]:hover:bg-surface-quaternary/50", + "has-[[aria-current=page]]:bg-surface-quaternary/50 has-[[aria-current=page]]:text-content-primary [@media(hover:hover)]:has-[[aria-current=page]]:hover:bg-surface-quaternary/50", )} >
Date: Thu, 20 Aug 2026 15:00:08 +0000 Subject: [PATCH 04/12] feat(site/src/pages/AgentsPage): full-bleed selected chat row with left accent border --- .../AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx index d0a6b096746..f0454d63b1f 100644 --- a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx +++ b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx @@ -180,6 +180,7 @@ export const ChatTreeNode: FC = ({ chat, isChildNode }) => { "group relative flex min-w-0 select-none [@media(pointer:coarse)]:[-webkit-touch-callout:none] items-start gap-1.5 rounded-md pl-1 pr-1.5 text-content-secondary", "transition-none [@media(hover:hover)]:hover:bg-surface-tertiary/50 [@media(hover:hover)]:hover:text-content-primary has-[[data-state=open]]:bg-surface-tertiary", "has-[[aria-current=page]]:bg-surface-quaternary/50 has-[[aria-current=page]]:text-content-primary [@media(hover:hover)]:has-[[aria-current=page]]:hover:bg-surface-quaternary/50", + "has-[[aria-current=page]]:-mx-2 has-[[aria-current=page]]:rounded-none has-[[aria-current=page]]:border-l has-[[aria-current=page]]:border-content-primary has-[[aria-current=page]]:pl-[11px] has-[[aria-current=page]]:pr-3.5", )} >
Date: Thu, 20 Aug 2026 15:21:46 +0000 Subject: [PATCH 05/12] feat(site/src/pages/AgentsPage): full-bleed square hover highlight for chat rows --- .../AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx index f0454d63b1f..1afa85b79c5 100644 --- a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx +++ b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx @@ -179,8 +179,9 @@ export const ChatTreeNode: FC = ({ chat, isChildNode }) => { className={cn( "group relative flex min-w-0 select-none [@media(pointer:coarse)]:[-webkit-touch-callout:none] items-start gap-1.5 rounded-md pl-1 pr-1.5 text-content-secondary", "transition-none [@media(hover:hover)]:hover:bg-surface-tertiary/50 [@media(hover:hover)]:hover:text-content-primary has-[[data-state=open]]:bg-surface-tertiary", + "[@media(hover:hover)]:hover:-mx-2 [@media(hover:hover)]:hover:rounded-none [@media(hover:hover)]:hover:pl-3 [@media(hover:hover)]:hover:pr-3.5", "has-[[aria-current=page]]:bg-surface-quaternary/50 has-[[aria-current=page]]:text-content-primary [@media(hover:hover)]:has-[[aria-current=page]]:hover:bg-surface-quaternary/50", - "has-[[aria-current=page]]:-mx-2 has-[[aria-current=page]]:rounded-none has-[[aria-current=page]]:border-l has-[[aria-current=page]]:border-content-primary has-[[aria-current=page]]:pl-[11px] has-[[aria-current=page]]:pr-3.5", + "has-[[aria-current=page]]:-mx-2 has-[[aria-current=page]]:rounded-none has-[[aria-current=page]]:border-l has-[[aria-current=page]]:border-content-primary has-[[aria-current=page]]:pl-[11px] has-[[aria-current=page]]:pr-3.5 [@media(hover:hover)]:has-[[aria-current=page]]:hover:pl-[11px]", )} >
Date: Thu, 20 Aug 2026 15:32:59 +0000 Subject: [PATCH 06/12] feat(site/src/pages/AgentsPage): round left corners of subagent row highlight --- .../ChatsSidebar/tree/ChatTreeNode.tsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx index 1afa85b79c5..acf16911dfc 100644 --- a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx +++ b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx @@ -147,6 +147,16 @@ export const ChatTreeNode: FC = ({ chat, isChildNode }) => { isArchived: chat.archived, isChildChat: isChildNode, }); + + // Child rows are indented and never touch the sidebar's left edge, so their + // highlight keeps rounded left corners while the right side stays flush. + // Top-level rows go fully square (edge to edge). + const hoverRounding = isChildNode + ? "[@media(hover:hover)]:hover:rounded-l-md [@media(hover:hover)]:hover:rounded-r-none" + : "[@media(hover:hover)]:hover:rounded-none"; + const activeRounding = isChildNode + ? "has-[[aria-current=page]]:rounded-l-md has-[[aria-current=page]]:rounded-r-none" + : "has-[[aria-current=page]]:rounded-none"; const sharedMenuItemProps = { isArchived: chat.archived, isPinned: chat.pin_order > 0, @@ -179,9 +189,11 @@ export const ChatTreeNode: FC = ({ chat, isChildNode }) => { className={cn( "group relative flex min-w-0 select-none [@media(pointer:coarse)]:[-webkit-touch-callout:none] items-start gap-1.5 rounded-md pl-1 pr-1.5 text-content-secondary", "transition-none [@media(hover:hover)]:hover:bg-surface-tertiary/50 [@media(hover:hover)]:hover:text-content-primary has-[[data-state=open]]:bg-surface-tertiary", - "[@media(hover:hover)]:hover:-mx-2 [@media(hover:hover)]:hover:rounded-none [@media(hover:hover)]:hover:pl-3 [@media(hover:hover)]:hover:pr-3.5", + "[@media(hover:hover)]:hover:-mx-2 [@media(hover:hover)]:hover:pl-3 [@media(hover:hover)]:hover:pr-3.5", + hoverRounding, "has-[[aria-current=page]]:bg-surface-quaternary/50 has-[[aria-current=page]]:text-content-primary [@media(hover:hover)]:has-[[aria-current=page]]:hover:bg-surface-quaternary/50", - "has-[[aria-current=page]]:-mx-2 has-[[aria-current=page]]:rounded-none has-[[aria-current=page]]:border-l has-[[aria-current=page]]:border-content-primary has-[[aria-current=page]]:pl-[11px] has-[[aria-current=page]]:pr-3.5 [@media(hover:hover)]:has-[[aria-current=page]]:hover:pl-[11px]", + "has-[[aria-current=page]]:-mx-2 has-[[aria-current=page]]:border-l has-[[aria-current=page]]:border-content-primary has-[[aria-current=page]]:pl-[11px] has-[[aria-current=page]]:pr-3.5 [@media(hover:hover)]:has-[[aria-current=page]]:hover:pl-[11px]", + activeRounding, )} >
Date: Thu, 20 Aug 2026 15:44:35 +0000 Subject: [PATCH 07/12] feat(site/src/pages/AgentsPage): tighten subagent highlight left inset by 4px --- .../ChatsSidebar/tree/ChatTreeNode.tsx | 23 +++++++++---------- 1 file changed, 11 insertions(+), 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 acf16911dfc..35338d866b4 100644 --- a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx +++ b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx @@ -149,14 +149,15 @@ export const ChatTreeNode: FC = ({ chat, isChildNode }) => { }); // Child rows are indented and never touch the sidebar's left edge, so their - // highlight keeps rounded left corners while the right side stays flush. - // Top-level rows go fully square (edge to edge). - const hoverRounding = isChildNode - ? "[@media(hover:hover)]:hover:rounded-l-md [@media(hover:hover)]:hover:rounded-r-none" - : "[@media(hover:hover)]:hover:rounded-none"; - const activeRounding = isChildNode - ? "has-[[aria-current=page]]:rounded-l-md has-[[aria-current=page]]:rounded-r-none" - : "has-[[aria-current=page]]:rounded-none"; + // highlight keeps rounded left corners and a tighter left inset while the + // right side stays flush. Top-level rows go fully square, edge to edge. + // Left padding compensates the negative margin so text never shifts. + const hoverLayout = isChildNode + ? "[@media(hover:hover)]:hover:-ml-1 [@media(hover:hover)]:hover:-mr-2 [@media(hover:hover)]:hover:pl-2 [@media(hover:hover)]:hover:pr-3.5 [@media(hover:hover)]:hover:rounded-l-md [@media(hover:hover)]:hover:rounded-r-none" + : "[@media(hover:hover)]:hover:-mx-2 [@media(hover:hover)]:hover:pl-3 [@media(hover:hover)]:hover:pr-3.5 [@media(hover:hover)]:hover:rounded-none"; + const activeLayout = isChildNode + ? "has-[[aria-current=page]]:-ml-1 has-[[aria-current=page]]:-mr-2 has-[[aria-current=page]]:pl-[7px] has-[[aria-current=page]]:pr-3.5 has-[[aria-current=page]]:rounded-l-md has-[[aria-current=page]]:rounded-r-none has-[[aria-current=page]]:border-l has-[[aria-current=page]]:border-content-primary [@media(hover:hover)]:has-[[aria-current=page]]:hover:pl-[7px]" + : "has-[[aria-current=page]]:-mx-2 has-[[aria-current=page]]:pl-[11px] has-[[aria-current=page]]:pr-3.5 has-[[aria-current=page]]:rounded-none has-[[aria-current=page]]:border-l has-[[aria-current=page]]:border-content-primary [@media(hover:hover)]:has-[[aria-current=page]]:hover:pl-[11px]"; const sharedMenuItemProps = { isArchived: chat.archived, isPinned: chat.pin_order > 0, @@ -189,11 +190,9 @@ export const ChatTreeNode: FC = ({ chat, isChildNode }) => { className={cn( "group relative flex min-w-0 select-none [@media(pointer:coarse)]:[-webkit-touch-callout:none] items-start gap-1.5 rounded-md pl-1 pr-1.5 text-content-secondary", "transition-none [@media(hover:hover)]:hover:bg-surface-tertiary/50 [@media(hover:hover)]:hover:text-content-primary has-[[data-state=open]]:bg-surface-tertiary", - "[@media(hover:hover)]:hover:-mx-2 [@media(hover:hover)]:hover:pl-3 [@media(hover:hover)]:hover:pr-3.5", - hoverRounding, "has-[[aria-current=page]]:bg-surface-quaternary/50 has-[[aria-current=page]]:text-content-primary [@media(hover:hover)]:has-[[aria-current=page]]:hover:bg-surface-quaternary/50", - "has-[[aria-current=page]]:-mx-2 has-[[aria-current=page]]:border-l has-[[aria-current=page]]:border-content-primary has-[[aria-current=page]]:pl-[11px] has-[[aria-current=page]]:pr-3.5 [@media(hover:hover)]:has-[[aria-current=page]]:hover:pl-[11px]", - activeRounding, + hoverLayout, + activeLayout, )} >
Date: Thu, 20 Aug 2026 15:46:03 +0000 Subject: [PATCH 08/12] refactor(site/src/pages/AgentsPage): drop layout comments --- .../AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx index 35338d866b4..0e835a0fe9b 100644 --- a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx +++ b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx @@ -148,10 +148,6 @@ export const ChatTreeNode: FC = ({ chat, isChildNode }) => { isChildChat: isChildNode, }); - // Child rows are indented and never touch the sidebar's left edge, so their - // highlight keeps rounded left corners and a tighter left inset while the - // right side stays flush. Top-level rows go fully square, edge to edge. - // Left padding compensates the negative margin so text never shifts. const hoverLayout = isChildNode ? "[@media(hover:hover)]:hover:-ml-1 [@media(hover:hover)]:hover:-mr-2 [@media(hover:hover)]:hover:pl-2 [@media(hover:hover)]:hover:pr-3.5 [@media(hover:hover)]:hover:rounded-l-md [@media(hover:hover)]:hover:rounded-r-none" : "[@media(hover:hover)]:hover:-mx-2 [@media(hover:hover)]:hover:pl-3 [@media(hover:hover)]:hover:pr-3.5 [@media(hover:hover)]:hover:rounded-none"; From ee2934e9e23411a52b0a371e4d54e24045c294df Mon Sep 17 00:00:00 2001 From: Tracy Johnson Date: Thu, 20 Aug 2026 15:49:59 +0000 Subject: [PATCH 09/12] feat(site/src/pages/AgentsPage): drop bold on selected chat title --- .../AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx index 0e835a0fe9b..eb3d78abeae 100644 --- a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx +++ b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx @@ -245,9 +245,8 @@ export const ChatTreeNode: FC = ({ chat, isChildNode }) => { {chat.title} From 40ef57ed900eebf5cbf1e6413469a4d1144da9ae Mon Sep 17 00:00:00 2001 From: Tracy Johnson Date: Thu, 20 Aug 2026 15:55:24 +0000 Subject: [PATCH 10/12] feat(site/src/pages/AgentsPage): drop left border on selected subagent rows --- .../AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx index eb3d78abeae..f3276370f8c 100644 --- a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx +++ b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx @@ -152,7 +152,7 @@ export const ChatTreeNode: FC = ({ chat, isChildNode }) => { ? "[@media(hover:hover)]:hover:-ml-1 [@media(hover:hover)]:hover:-mr-2 [@media(hover:hover)]:hover:pl-2 [@media(hover:hover)]:hover:pr-3.5 [@media(hover:hover)]:hover:rounded-l-md [@media(hover:hover)]:hover:rounded-r-none" : "[@media(hover:hover)]:hover:-mx-2 [@media(hover:hover)]:hover:pl-3 [@media(hover:hover)]:hover:pr-3.5 [@media(hover:hover)]:hover:rounded-none"; const activeLayout = isChildNode - ? "has-[[aria-current=page]]:-ml-1 has-[[aria-current=page]]:-mr-2 has-[[aria-current=page]]:pl-[7px] has-[[aria-current=page]]:pr-3.5 has-[[aria-current=page]]:rounded-l-md has-[[aria-current=page]]:rounded-r-none has-[[aria-current=page]]:border-l has-[[aria-current=page]]:border-content-primary [@media(hover:hover)]:has-[[aria-current=page]]:hover:pl-[7px]" + ? "has-[[aria-current=page]]:-ml-1 has-[[aria-current=page]]:-mr-2 has-[[aria-current=page]]:pl-2 has-[[aria-current=page]]:pr-3.5 has-[[aria-current=page]]:rounded-l-md has-[[aria-current=page]]:rounded-r-none [@media(hover:hover)]:has-[[aria-current=page]]:hover:pl-2" : "has-[[aria-current=page]]:-mx-2 has-[[aria-current=page]]:pl-[11px] has-[[aria-current=page]]:pr-3.5 has-[[aria-current=page]]:rounded-none has-[[aria-current=page]]:border-l has-[[aria-current=page]]:border-content-primary [@media(hover:hover)]:has-[[aria-current=page]]:hover:pl-[11px]"; const sharedMenuItemProps = { isArchived: chat.archived, From 1face839b30810dac447de969c7c06e497c5763f Mon Sep 17 00:00:00 2001 From: Tracy Johnson Date: Thu, 20 Aug 2026 16:09:25 +0000 Subject: [PATCH 11/12] feat(site/src/pages/AgentsPage): full-bleed subagent rows matching top-level chats --- .../ChatsSidebar/tree/ChatTreeNode.tsx | 33 ++++++++++++++----- 1 file changed, 24 insertions(+), 9 deletions(-) diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx index f3276370f8c..334638a7a6f 100644 --- a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx +++ b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx @@ -39,9 +39,18 @@ import { getChatDisplayConfig } from "./statusConfig"; interface ChatTreeNodeProps { readonly chat: Chat; readonly isChildNode: boolean; + readonly depth?: number; } -export const ChatTreeNode: FC = ({ chat, isChildNode }) => { +// Horizontal indentation applied per nesting level to a row's content. The row +// highlight itself stays full width; only the content is indented. +const CHILD_INDENT_PX = 26; + +export const ChatTreeNode: FC = ({ + chat, + isChildNode, + depth = 0, +}) => { const location = useLocation(); const locationSearch = normalizeLocationSearch(location.search); const { @@ -148,12 +157,10 @@ export const ChatTreeNode: FC = ({ chat, isChildNode }) => { isChildChat: isChildNode, }); - const hoverLayout = isChildNode - ? "[@media(hover:hover)]:hover:-ml-1 [@media(hover:hover)]:hover:-mr-2 [@media(hover:hover)]:hover:pl-2 [@media(hover:hover)]:hover:pr-3.5 [@media(hover:hover)]:hover:rounded-l-md [@media(hover:hover)]:hover:rounded-r-none" - : "[@media(hover:hover)]:hover:-mx-2 [@media(hover:hover)]:hover:pl-3 [@media(hover:hover)]:hover:pr-3.5 [@media(hover:hover)]:hover:rounded-none"; - const activeLayout = isChildNode - ? "has-[[aria-current=page]]:-ml-1 has-[[aria-current=page]]:-mr-2 has-[[aria-current=page]]:pl-2 has-[[aria-current=page]]:pr-3.5 has-[[aria-current=page]]:rounded-l-md has-[[aria-current=page]]:rounded-r-none [@media(hover:hover)]:has-[[aria-current=page]]:hover:pl-2" - : "has-[[aria-current=page]]:-mx-2 has-[[aria-current=page]]:pl-[11px] has-[[aria-current=page]]:pr-3.5 has-[[aria-current=page]]:rounded-none has-[[aria-current=page]]:border-l has-[[aria-current=page]]:border-content-primary [@media(hover:hover)]:has-[[aria-current=page]]:hover:pl-[11px]"; + const hoverLayout = + "[@media(hover:hover)]:hover:-mx-2 [@media(hover:hover)]:hover:pl-3 [@media(hover:hover)]:hover:pr-3.5 [@media(hover:hover)]:hover:rounded-none"; + const activeLayout = + "has-[[aria-current=page]]:-mx-2 has-[[aria-current=page]]:pl-[11px] has-[[aria-current=page]]:pr-3.5 has-[[aria-current=page]]:rounded-none has-[[aria-current=page]]:border-l has-[[aria-current=page]]:border-content-primary [@media(hover:hover)]:has-[[aria-current=page]]:hover:pl-[11px]"; const sharedMenuItemProps = { isArchived: chat.archived, isPinned: chat.pin_order > 0, @@ -196,6 +203,9 @@ export const ChatTreeNode: FC = ({ chat, isChildNode }) => { "group/icon relative mt-1.5 size-5 shrink-0", hasChildren && "cursor-pointer", )} + style={ + depth > 0 ? { marginLeft: depth * CHILD_INDENT_PX } : undefined + } >
= ({ chat, isChildNode }) => { {hasChildren && isExpanded && ( -
+
{childIDs.map((childID) => { const childChat = chatById.get(childID); if (!childChat) return null; return ( - + ); })}
From 80e63bd944b251418333a824d586a306dd009f2c Mon Sep 17 00:00:00 2001 From: Tracy Johnson Date: Thu, 20 Aug 2026 16:12:33 +0000 Subject: [PATCH 12/12] refactor(site/src/pages/AgentsPage): drop indent constant comment --- .../AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx index 334638a7a6f..411dfecfb13 100644 --- a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx +++ b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx @@ -42,8 +42,6 @@ interface ChatTreeNodeProps { readonly depth?: number; } -// Horizontal indentation applied per nesting level to a row's content. The row -// highlight itself stays full width; only the content is indented. const CHILD_INDENT_PX = 26; export const ChatTreeNode: FC = ({