🤖 fix: align variant sub-agent connectors (#3199)

## Summary

Fixes sidebar connector alignment for expanded variants/best-of
sub-agent groups by rendering grouped members on the same indentation
grid as the task-group header icon.

## Background

Grouped sub-agents use a task-group header row with an extra disclosure
chevron before the group icon. Expanded members were only indented one
depth level below that header, which left the parent-to-child connector
rail visually offset from the grouped parent row.

## Implementation

- Added a shared task-group member depth helper in the sidebar layout
utilities.
- Applied that helper when rendering expanded task-group members from
`ProjectSidebar`.
- Added tests that assert grouped member depth/layout propagation and
rendered connector geometry.

## Validation

- `bun test src/browser/components/sidebarItemLayout.test.ts
src/browser/components/AgentListItem/AgentListItem.test.tsx
src/browser/components/ProjectSidebar/ProjectSidebar.test.tsx`
- `make typecheck`
- `make fmt-check`
- `make lint`
- `make static-check`

## Risks

Low-to-medium risk, scoped to left-sidebar task-group sub-agent row
indentation and connector geometry.

---

_Generated with `mux` • Model: `openai:gpt-5.5` • Thinking: `high` •
Cost: `$8.04`_

<!-- mux-attribution: model=openai:gpt-5.5 thinking=high costs=8.04 -->

Author: ammar-agent

src/browser/components/AgentListItem/AgentListItem.test.tsx

@@ -168,6 +168,10 @@ function installAgentListItemTestDoubles() {
     }),
   }));
 
+  void mock.module("../WorkspaceHeartbeatModal", () => ({
+    WorkspaceHeartbeatModal: () => null,
+  }));
+
   void mock.module("@/browser/hooks/useContextMenuPosition", () => ({
     ...actualContextMenuPosition,
     useContextMenuPosition: () => ({
@@ -218,6 +222,7 @@ function renderWorkspaceItem(
     isArchiving?: boolean;
     depth?: number;
     rowRenderMeta?: AgentRowRenderMeta;
+    subAgentConnectorLayout?: "default" | "task-group-member";
     completedChildrenExpanded?: boolean;
     onToggleCompletedChildren?: (workspaceId: string) => void;
   } = {}
@@ -232,6 +237,7 @@ function renderWorkspaceItem(
       isArchiving={options.isArchiving}
       depth={options.depth ?? options.rowRenderMeta?.depth}
       rowRenderMeta={options.rowRenderMeta}
+      subAgentConnectorLayout={options.subAgentConnectorLayout}
       completedChildrenExpanded={options.completedChildrenExpanded}
       onToggleCompletedChildren={options.onToggleCompletedChildren}
       onSelectWorkspace={() => undefined}
@@ -329,6 +335,31 @@ describe("AgentListItem", () => {
     expect(elbow.getAttribute("style")).toContain("width: 8px");
   });
 
+  test("anchors task-group member connectors to the task-group rail", () => {
+    const { view } = renderWorkspaceItem({
+      depth: 2.5,
+      subAgentConnectorLayout: "task-group-member",
+      rowRenderMeta: {
+        depth: 1,
+        rowKind: "subagent",
+        connectorPosition: "single",
+        connectorStartsAtParent: true,
+        sharedTrunkActiveThroughRow: false,
+        sharedTrunkActiveBelowRow: false,
+        ancestorTrunks: [],
+        hasHiddenCompletedChildren: false,
+        visibleCompletedChildrenCount: 0,
+      },
+    });
+
+    const topSegment = view.getByTestId("subagent-connector-top-segment");
+    const elbow = view.getByTestId("subagent-connector-elbow");
+
+    expect(topSegment.getAttribute("style")).toContain("left: 38px");
+    expect(elbow.getAttribute("style")).toContain("left: 38px");
+    expect(elbow.getAttribute("style")).toContain("width: 1px");
+  });
+
   test("does not render a heartbeat icon fallback when completed children indicator is shown", () => {
     mockWorkspaceHeartbeatsEnabled = true;
 

src/browser/components/ProjectSidebar/ProjectSidebar.test.tsx

@@ -94,6 +94,7 @@ interface MockAgentListItemProps {
   };
   depth?: number;
   rowRenderMeta?: AgentRowRenderMeta;
+  subAgentConnectorLayout?: "default" | "task-group-member";
   completedChildrenExpanded?: boolean;
   onToggleCompletedChildren?: (workspaceId: string) => void;
   onArchiveWorkspace?: (workspaceId: string, button: HTMLElement) => Promise<void>;
@@ -230,6 +231,7 @@ function installProjectSidebarTestDoubles() {
           data-testid={agentItemTestId(metadata.id)}
           data-depth={String(props.depth ?? -1)}
           data-row-kind={props.rowRenderMeta?.rowKind ?? "unknown"}
+          data-connector-layout={props.subAgentConnectorLayout ?? "default"}
           data-completed-expanded={String(props.completedChildrenExpanded ?? false)}
         >
           <span>{displayTitle}</span>
@@ -862,6 +864,13 @@ describe("ProjectSidebar multi-project completed-subagent toggles", () => {
       expect(view.getByText("frontend · Split review")).toBeTruthy();
       expect(view.getByText("backend · Split review")).toBeTruthy();
     });
+
+    const childOneRow = view.getByTestId(agentItemTestId("child-1"));
+    const childTwoRow = view.getByTestId(agentItemTestId("child-2"));
+    expect(childOneRow.dataset.depth).toBe("2.5");
+    expect(childOneRow.dataset.connectorLayout).toBe("task-group-member");
+    expect(childTwoRow.dataset.depth).toBe("2.5");
+    expect(childTwoRow.dataset.connectorLayout).toBe("task-group-member");
   });
 
   test("does not coalesce a best-of group when one candidate still has hidden child tasks", () => {

src/browser/components/ProjectSidebar/ProjectSidebar.tsx

@@ -70,6 +70,7 @@ import { ProjectDeleteConfirmationModal } from "../ProjectDeleteConfirmationModa
 import { useSettings } from "@/browser/contexts/SettingsContext";
 
 import { AgentListItem, type WorkspaceSelection } from "../AgentListItem/AgentListItem";
+import { getTaskGroupMemberDepth } from "../sidebarItemLayout";
 import { TaskGroupListItem } from "./TaskGroupListItem";
 import { TitleEditProvider, useTitleEdit } from "@/browser/contexts/WorkspaceTitleEditContext";
 import { useConfirmDialog } from "@/browser/contexts/ConfirmDialogContext";
@@ -2325,7 +2326,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                                           member,
                                           sectionId,
                                           rowMetaByWorkspaceId.get(member.id) ?? null,
-                                          depth + 1,
+                                          getTaskGroupMemberDepth(depth),
                                           `task-group-member:${taskGroupId}:${member.id}`,
                                           "task-group-member"
                                         )

src/browser/components/sidebarItemLayout.test.ts

@@ -6,6 +6,7 @@ import {
   getSidebarItemPaddingLeft,
   getSubAgentChildStatusCenterX,
   getSubAgentParentRailX,
+  getTaskGroupMemberDepth,
 } from "./sidebarItemLayout";
 
 describe("sidebarItemLayout", () => {
@@ -24,7 +25,15 @@ describe("sidebarItemLayout", () => {
   });
 
   test("keeps grouped members on their dedicated shared rail", () => {
-    expect(getSubAgentParentRailX(2, "task-group-member")).toBe(30);
-    expect(getAncestorRailX(2, "task-group-member")).toBe(32);
+    const groupDepth = 1;
+    const memberDepth = getTaskGroupMemberDepth(groupDepth);
+
+    expect(memberDepth).toBe(2.5);
+    // The task-group header has a disclosure chevron before its group icon, so
+    // expanded variants/best-of members use a half-step offset that keeps both
+    // the connector rail and child status dot under the group icon.
+    expect(getSubAgentParentRailX(memberDepth, "task-group-member")).toBe(38);
+    expect(getSubAgentChildStatusCenterX(memberDepth)).toBe(38);
+    expect(getAncestorRailX(memberDepth, "task-group-member")).toBe(36);
   });
 });

src/browser/components/sidebarItemLayout.ts

@@ -4,14 +4,23 @@ const SIDEBAR_BASE_PADDING_LEFT_PX = 10;
 const SIDEBAR_DEPTH_INDENT_PX = 8;
 export const SIDEBAR_LEADING_SLOT_SIZE_PX = 16;
 const SIDEBAR_LEADING_SLOT_CENTER_OFFSET_PX = SIDEBAR_LEADING_SLOT_SIZE_PX / 2;
-const TASK_GROUP_MEMBER_PARENT_RAIL_OFFSET_PX = 4;
+const TASK_GROUP_MEMBER_DEPTH_OFFSET = 1.5;
+const TASK_GROUP_MEMBER_PARENT_RAIL_OFFSET_PX = SIDEBAR_LEADING_SLOT_CENTER_OFFSET_PX;
 const TASK_GROUP_MEMBER_ANCESTOR_RAIL_OFFSET_PX = 6;
 
 export function getSidebarItemPaddingLeft(depth?: number): number {
   const safeDepth = typeof depth === "number" && Number.isFinite(depth) ? Math.max(0, depth) : 0;
   return SIDEBAR_BASE_PADDING_LEFT_PX + Math.min(32, safeDepth) * SIDEBAR_DEPTH_INDENT_PX;
 }
 
+export function getTaskGroupMemberDepth(taskGroupDepth: number): number {
+  // Expanded variants/best-of members sit under a task-group header that has a
+  // disclosure chevron before its group icon. One-and-a-half grid steps puts
+  // member status dots under that group icon while keeping member labels aligned
+  // with the task-group title.
+  return taskGroupDepth + TASK_GROUP_MEMBER_DEPTH_OFFSET;
+}
+
 export function getSidebarLeadingSlotCenterX(depth: number): number {
   return getSidebarItemPaddingLeft(depth) + SIDEBAR_LEADING_SLOT_CENTER_OFFSET_PX;
 }