From e3bf19f7a842201f0bd26adcf21356a1851079a7 Mon Sep 17 00:00:00 2001
From: lihong <leehom0123@qq.com>
Date: Tue, 10 Nov 2026 22:27:44 +0800
Subject: [PATCH 1/2] fix(sidebar): make child session disclosure visible

---
 .../sidebar-conversation-card.test.tsx        |  6 +-
 .../sidebar-conversation-card.tsx             | 58 +++++++++----------
 2 files changed, 30 insertions(+), 34 deletions(-)

diff --git a/src/components/conversations/sidebar-conversation-card.test.tsx b/src/components/conversations/sidebar-conversation-card.test.tsx
index f92538e0c57..fd390ad3aeb 100644
--- a/src/components/conversations/sidebar-conversation-card.test.tsx
+++ b/src/components/conversations/sidebar-conversation-card.test.tsx
@@ -530,13 +530,13 @@ describe("SidebarConversationCard sub-session chevron", () => {
     expect(queryByLabelText("Expand sub-conversations")).toBeNull()
   })
 
-  it("overlays the chevron on the rail axis (the agent-icon position)", () => {
+  it("keeps the chevron on the rail axis", () => {
     const { getByLabelText } = renderCard(conv(2), {
       hasChildren: true,
       expanded: false,
     })
-    // The chevron now sits at the agent-icon's rail-axis x (revealed on hover),
-    // not in the right-hand time/action slot.
+    // The chevron stays on the rail axis, separate from the agent icon
+    // and the right-hand time/action slot.
     const chevron = getByLabelText("Expand sub-conversations")
     expect(chevron.style.left).toContain("--conv-rail-axis")
   })
diff --git a/src/components/conversations/sidebar-conversation-card.tsx b/src/components/conversations/sidebar-conversation-card.tsx
index 9e0c4ae0940..cca741c2df8 100644
--- a/src/components/conversations/sidebar-conversation-card.tsx
+++ b/src/components/conversations/sidebar-conversation-card.tsx
@@ -384,12 +384,13 @@ export const SidebarConversationCard = memo(function SidebarConversationCard({
                       "rounded-full",
                       "pr-[0.25rem]"
                     )}
-                    // Rail-axis-relative left padding (was a fixed `pl-7`): at depth 0
-                    // this resolves to 0.875rem + 0.875rem = 1.75rem (= pl-7), so root
-                    // rows are pixel-identical; deeper rows inherit the shifted var.
+                    // Parents reserve room for both the persistent chevron and
+                    // their agent icon. Leaves keep the existing rail spacing.
                     style={{
                       paddingLeft:
-                        "calc(var(--conv-rail-axis, 0.875rem) + 0.875rem)",
+                        hasChildren && onToggleExpand
+                          ? "calc(var(--conv-rail-axis, 0.875rem) + 1.875rem)"
+                          : "calc(var(--conv-rail-axis, 0.875rem) + 0.875rem)",
                     }}
                   >
                     {/* Ancestor guide rails (depth ≥ 1): keep each parent's vertical
@@ -412,18 +413,12 @@ export const SidebarConversationCard = memo(function SidebarConversationCard({
                       }}
                     />
                     <div
-                      className={cn(
-                        "pointer-events-none absolute top-1/2 z-10 flex items-center justify-center",
-                        // With children, the row hover (or focus) swaps this agent
-                        // icon out for the expand chevron at the same spot — fade it
-                        // so the two cross-fade in place. On touch (no hover) the
-                        // chevron is always shown, so the icon is always hidden.
-                        hasChildren &&
-                          onToggleExpand &&
-                          "transition-opacity duration-150 group-hover:opacity-0 group-focus-within:opacity-0 [@media(hover:none)]:opacity-0"
-                      )}
+                      className="pointer-events-none absolute top-1/2 z-10 flex items-center justify-center"
                       style={{
-                        left: "var(--conv-rail-axis, 0.875rem)",
+                        left:
+                          hasChildren && onToggleExpand
+                            ? "calc(var(--conv-rail-axis, 0.875rem) + 1rem)"
+                            : "var(--conv-rail-axis, 0.875rem)",
                         width: "0.875rem",
                         height: "0.875rem",
                         transform: "translate(-50%, -50%)",
@@ -462,6 +457,18 @@ export const SidebarConversationCard = memo(function SidebarConversationCard({
                       {formatConversationTitle(conversation.title) ||
                         t("untitledConversation")}
                     </span>
+                    {hasChildren && conversation.child_count > 0 && (
+                      <span
+                        className="relative -ml-1 inline-flex h-4 min-w-4 shrink-0 items-center justify-center rounded bg-sidebar-accent px-1 text-[0.625rem] font-medium text-muted-foreground tabular-nums"
+                        title={
+                          expanded
+                            ? t("collapseSubsessions")
+                            : t("expandSubsessions")
+                        }
+                      >
+                        {conversation.child_count}
+                      </span>
+                    )}
                     {/* Inline, inside the row's fixed 2rem height: the list's
                     virtualizer and rail geometry assume one line per row. The
                     full set of tags is in the hover bubble. Capped so the
@@ -495,13 +502,9 @@ export const SidebarConversationCard = memo(function SidebarConversationCard({
                     the hover bubble names the original path instead. */}
                   </button>
 
-                  {/* Expand/collapse affordance for delegation children. It overlays
-                  the agent icon at the rail axis: idle shows the icon, and
-                  hovering (or focusing) the row swaps in this chevron at the very
-                  same spot while the icon fades. A sibling of the row button (HTML
-                  forbids nested buttons) with `stopPropagation` so a toggle never
-                  selects the row; pointer events stay off until revealed so a
-                  click on the icon area still selects the row when not hovering. */}
+                  {/* Keep the child toggle visible at the rail axis, alongside
+                  the agent icon. It is a sibling of the row button so expanding
+                  a subtree never selects the conversation. */}
                   {hasChildren && onToggleExpand && (
                     <button
                       type="button"
@@ -520,14 +523,7 @@ export const SidebarConversationCard = memo(function SidebarConversationCard({
                           ? t("collapseSubsessions")
                           : t("expandSubsessions")
                       }
-                      className={cn(
-                        "absolute top-0 bottom-0 z-20 flex items-center justify-center",
-                        "cursor-pointer outline-none",
-                        "opacity-0 pointer-events-none transition-opacity duration-150",
-                        "group-hover:opacity-100 group-hover:pointer-events-auto",
-                        "group-focus-within:opacity-100 group-focus-within:pointer-events-auto",
-                        "[@media(hover:none)]:opacity-100 [@media(hover:none)]:pointer-events-auto"
-                      )}
+                      className="absolute top-0 bottom-0 z-20 flex cursor-pointer items-center justify-center rounded-sm text-sidebar-foreground outline-none hover:bg-sidebar-accent focus-visible:ring-2 focus-visible:ring-ring"
                       style={{
                         left: "var(--conv-rail-axis, 0.875rem)",
                         width: "0.875rem",
@@ -537,7 +533,7 @@ export const SidebarConversationCard = memo(function SidebarConversationCard({
                       <ChevronRight
                         aria-hidden
                         className={cn(
-                          "h-3 w-3 shrink-0 text-muted-foreground/70",
+                          "h-3.5 w-3.5 shrink-0",
                           "transition-transform duration-200 ease-out",
                           expanded && "rotate-90"
                         )}

From f7169e277f69170742c55c9504fc38a95694f69f Mon Sep 17 00:00:00 2001
From: lihong <leehom0123@qq.com>
Date: Tue, 10 Nov 2026 22:38:02 +0800
Subject: [PATCH 2/2] fix(sidebar): align session rows and clarify child count

---
 .../sidebar-conversation-card.test.tsx        |  4 +-
 .../sidebar-conversation-card.tsx             | 69 ++++++++++++-------
 2 files changed, 46 insertions(+), 27 deletions(-)

diff --git a/src/components/conversations/sidebar-conversation-card.test.tsx b/src/components/conversations/sidebar-conversation-card.test.tsx
index fd390ad3aeb..fe7619d8e85 100644
--- a/src/components/conversations/sidebar-conversation-card.test.tsx
+++ b/src/components/conversations/sidebar-conversation-card.test.tsx
@@ -530,12 +530,12 @@ describe("SidebarConversationCard sub-session chevron", () => {
     expect(queryByLabelText("Expand sub-conversations")).toBeNull()
   })
 
-  it("keeps the chevron on the rail axis", () => {
+  it("anchors the chevron to the rail gutter", () => {
     const { getByLabelText } = renderCard(conv(2), {
       hasChildren: true,
       expanded: false,
     })
-    // The chevron stays on the rail axis, separate from the agent icon
+    // The chevron stays in the rail gutter, separate from the agent icon
     // and the right-hand time/action slot.
     const chevron = getByLabelText("Expand sub-conversations")
     expect(chevron.style.left).toContain("--conv-rail-axis")
diff --git a/src/components/conversations/sidebar-conversation-card.tsx b/src/components/conversations/sidebar-conversation-card.tsx
index cca741c2df8..8e444f0fa94 100644
--- a/src/components/conversations/sidebar-conversation-card.tsx
+++ b/src/components/conversations/sidebar-conversation-card.tsx
@@ -20,6 +20,7 @@ import {
   CheckCircle2,
   Info,
   ChevronRight,
+  MessagesSquare,
   SquareTerminal,
 } from "lucide-react"
 import { useTranslations } from "next-intl"
@@ -384,13 +385,11 @@ export const SidebarConversationCard = memo(function SidebarConversationCard({
                       "rounded-full",
                       "pr-[0.25rem]"
                     )}
-                    // Parents reserve room for both the persistent chevron and
-                    // their agent icon. Leaves keep the existing rail spacing.
+                    // Keep agent icons and titles aligned for parents and leaves.
+                    // The child chevron occupies the gutter before the rail.
                     style={{
                       paddingLeft:
-                        hasChildren && onToggleExpand
-                          ? "calc(var(--conv-rail-axis, 0.875rem) + 1.875rem)"
-                          : "calc(var(--conv-rail-axis, 0.875rem) + 0.875rem)",
+                        "calc(var(--conv-rail-axis, 0.875rem) + 0.875rem)",
                     }}
                   >
                     {/* Ancestor guide rails (depth ≥ 1): keep each parent's vertical
@@ -415,10 +414,7 @@ export const SidebarConversationCard = memo(function SidebarConversationCard({
                     <div
                       className="pointer-events-none absolute top-1/2 z-10 flex items-center justify-center"
                       style={{
-                        left:
-                          hasChildren && onToggleExpand
-                            ? "calc(var(--conv-rail-axis, 0.875rem) + 1rem)"
-                            : "var(--conv-rail-axis, 0.875rem)",
+                        left: "var(--conv-rail-axis, 0.875rem)",
                         width: "0.875rem",
                         height: "0.875rem",
                         transform: "translate(-50%, -50%)",
@@ -457,18 +453,6 @@ export const SidebarConversationCard = memo(function SidebarConversationCard({
                       {formatConversationTitle(conversation.title) ||
                         t("untitledConversation")}
                     </span>
-                    {hasChildren && conversation.child_count > 0 && (
-                      <span
-                        className="relative -ml-1 inline-flex h-4 min-w-4 shrink-0 items-center justify-center rounded bg-sidebar-accent px-1 text-[0.625rem] font-medium text-muted-foreground tabular-nums"
-                        title={
-                          expanded
-                            ? t("collapseSubsessions")
-                            : t("expandSubsessions")
-                        }
-                      >
-                        {conversation.child_count}
-                      </span>
-                    )}
                     {/* Inline, inside the row's fixed 2rem height: the list's
                     virtualizer and rail geometry assume one line per row. The
                     full set of tags is in the hover bubble. Capped so the
@@ -502,8 +486,8 @@ export const SidebarConversationCard = memo(function SidebarConversationCard({
                     the hover bubble names the original path instead. */}
                   </button>
 
-                  {/* Keep the child toggle visible at the rail axis, alongside
-                  the agent icon. It is a sibling of the row button so expanding
+                  {/* Keep the child toggle visible in the gutter before the
+                  agent icon. It is a sibling of the row button so expanding
                   a subtree never selects the conversation. */}
                   {hasChildren && onToggleExpand && (
                     <button
@@ -525,8 +509,8 @@ export const SidebarConversationCard = memo(function SidebarConversationCard({
                       }
                       className="absolute top-0 bottom-0 z-20 flex cursor-pointer items-center justify-center rounded-sm text-sidebar-foreground outline-none hover:bg-sidebar-accent focus-visible:ring-2 focus-visible:ring-ring"
                       style={{
-                        left: "var(--conv-rail-axis, 0.875rem)",
-                        width: "0.875rem",
+                        left: "calc(var(--conv-rail-axis, 0.875rem) - 0.75rem)",
+                        width: "0.75rem",
                         transform: "translateX(-50%)",
                       }}
                     >
@@ -541,6 +525,41 @@ export const SidebarConversationCard = memo(function SidebarConversationCard({
                     </button>
                   )}
 
+                  {hasChildren &&
+                    onToggleExpand &&
+                    conversation.child_count > 0 && (
+                      <button
+                        type="button"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          onToggleExpand(conversation.id)
+                        }}
+                        aria-label={`${
+                          expanded
+                            ? t("collapseSubsessions")
+                            : t("expandSubsessions")
+                        } (${conversation.child_count})`}
+                        aria-expanded={expanded}
+                        title={
+                          expanded
+                            ? t("collapseSubsessions")
+                            : t("expandSubsessions")
+                        }
+                        className={cn(
+                          "mr-1 inline-flex h-5 shrink-0 cursor-pointer items-center gap-1 rounded-full border border-sidebar-foreground/15 px-1.5 text-[0.6875rem] font-semibold text-sidebar-foreground outline-none transition-colors",
+                          "hover:bg-sidebar-foreground/15 focus-visible:ring-2 focus-visible:ring-ring",
+                          expanded
+                            ? "bg-sidebar-foreground/12"
+                            : "bg-sidebar-foreground/6"
+                        )}
+                      >
+                        <MessagesSquare className="h-3 w-3" aria-hidden />
+                        <span className="tabular-nums">
+                          {conversation.child_count}
+                        </span>
+                      </button>
+                    )}
+
                   {/* Right slot: sizes to its content — the time / status badge
                   normally, the two quick-action buttons (pin, done) on hover —
                   so it never reserves more width than what is actually shown