🤖 fix: restore pre-redesign sidebar hierarchy

Restore the flatter sidebar hierarchy so project rows, section headers, and
"Older than …" buckets read as distinct layers again.

---

_Generated with `mux` • Model: `openai:gpt-5.4` • Thinking: `xhigh` • Cost: `n/a`_

<!-- mux-attribution: model=openai:gpt-5.4 thinking=xhigh costs=n/a -->

Author: ammar-agent

src/browser/components/AddSectionButton/AddSectionButton.tsx

@@ -28,7 +28,10 @@ export const AddSectionButton: React.FC<AddSectionButtonProps> = ({ onCreateSect
 
   if (isCreating) {
     return (
-      <div className="flex items-center px-2 py-0.5">
+      <div className="flex items-center gap-1 px-2 py-0.5">
+        <div className="flex h-5 w-5 shrink-0 items-center justify-center">
+          <Plus size={12} className="text-muted/60" />
+        </div>
         <input
           ref={inputRef}
           type="text"
@@ -44,7 +47,7 @@ export const AddSectionButton: React.FC<AddSectionButtonProps> = ({ onCreateSect
           }}
           placeholder="Section name..."
           data-testid="add-section-input"
-          className="bg-background/50 text-foreground ml-6 min-w-0 flex-1 rounded border border-white/20 px-1.5 py-0.5 text-[11px] outline-none select-text"
+          className="bg-background/50 text-foreground min-w-0 flex-1 rounded border border-white/20 px-1.5 py-0.5 text-[11px] outline-none select-text"
         />
       </div>
     );
@@ -54,9 +57,13 @@ export const AddSectionButton: React.FC<AddSectionButtonProps> = ({ onCreateSect
     <button
       onClick={() => setIsCreating(true)}
       data-testid="add-section-button"
-      className="text-muted/60 hover:text-muted flex w-full cursor-pointer items-center justify-center gap-1 border-none bg-transparent px-2 py-0.5 text-[11px] transition-colors"
+      // Keep the affordance in the same icon/text columns as section rows so the
+      // add-sub-folder action reads as part of the project hierarchy.
+      className="text-muted/60 hover:text-muted flex w-full cursor-pointer items-center gap-1 border-none bg-transparent px-2 py-0.5 text-left text-[11px] transition-colors"
     >
-      <Plus size={12} />
+      <div className="flex h-5 w-5 shrink-0 items-center justify-center">
+        <Plus size={12} />
+      </div>
       <span>Add section</span>
     </button>
   );

src/browser/components/AgentListItem/AgentListItem.tsx

@@ -86,7 +86,6 @@ export interface AgentListItemProps extends AgentListItemBaseProps {
   variant?: "workspace";
   metadata: FrontendWorkspaceMetadata;
   projectName: string;
-  subAgentConnectorLayout?: "default" | "task-group-member";
   isArchiving?: boolean;
   /** True when deletion is in-flight (optimistic UI while backend removes). */
   isRemoving?: boolean;
@@ -128,19 +127,7 @@ const SHOW_INLINE_ACTIONS_ON_WIDE_TOUCH =
 /** Calculate left padding based on nesting depth */
 function getItemPaddingLeft(depth?: number): number {
   const safeDepth = typeof depth === "number" && Number.isFinite(depth) ? Math.max(0, depth) : 0;
-  return 8 + Math.min(32, safeDepth) * 12;
-}
-
-function getSubAgentConnectorLeft(
-  indentLeft: number,
-  layout: "default" | "task-group-member"
-): number {
-  return layout === "task-group-member" ? indentLeft - 2 : indentLeft + 9;
-}
-
-function getAncestorTrunkLeft(depth: number, layout: "default" | "task-group-member"): number {
-  const indentLeft = getItemPaddingLeft(depth);
-  return layout === "task-group-member" ? indentLeft + 6 : indentLeft + 8;
+  return 12 + Math.min(32, safeDepth) * 12;
 }
 
 type VisualState = "active" | "idle" | "seen" | "hidden" | "error" | "question";
@@ -294,31 +281,20 @@ function ActionButtonWrapper(props: { children: React.ReactNode; className?: str
 // ─────────────────────────────────────────────────────────────────────────────
 
 function DraftAgentListItemInner(props: DraftAgentListItemProps) {
-  const { projectPath, isSelected, depth, sectionId, draft } = props;
+  const { projectPath, isSelected, depth, draft } = props;
   const paddingLeft = getItemPaddingLeft(depth);
   const hasPromptPreview = draft.promptPreview.length > 0;
-  const draftBorderStyle: React.CSSProperties = {
-    backgroundImage: [
-      "repeating-linear-gradient(to right, var(--color-border) 0 5px, transparent 5px 10px)",
-      "repeating-linear-gradient(to right, var(--color-border) 0 5px, transparent 5px 10px)",
-      "repeating-linear-gradient(to bottom, var(--color-border) 0 5px, transparent 5px 10px)",
-    ].join(", "),
-    backgroundSize: "100% 1.5px, 100% 1.5px, 1.5px 100%",
-    backgroundPosition: "left top, left bottom, left top",
-    backgroundRepeat: "no-repeat",
-  };
 
   const ctxMenu = useContextMenuPosition({ longPress: true });
 
   return (
     <div
       className={cn(
         LIST_ITEM_BASE_CLASSES,
-        sectionId != null ? "ml-8" : "ml-6.5",
-        "cursor-pointer pl-1 hover:bg-surface-secondary [&:hover_button]:opacity-100",
+        "border-border cursor-pointer border-t border-b border-l border-dashed pl-1 hover:bg-surface-secondary [&:hover_button]:opacity-100",
         isSelected && "bg-surface-secondary"
       )}
-      style={{ paddingLeft, ...draftBorderStyle }}
+      style={{ paddingLeft }}
       onClick={() => {
         if (ctxMenu.suppressClickIfLongPress()) return;
         draft.onOpen();
@@ -687,7 +663,6 @@ function RegularAgentListItemInner(props: AgentListItemProps) {
         className={cn(
           LIST_ITEM_BASE_CLASSES,
           "group/row",
-          sectionId != null ? "ml-7.5" : "ml-5",
           isDragging && "opacity-50",
           isRemoving && "opacity-70",
           // Keep hover styles enabled for initializing workspaces so the row feels interactive.
@@ -1104,15 +1079,9 @@ function AgentListItemInner(props: UnifiedAgentListItemProps) {
     // Connector geometry is driven by render metadata so visible siblings keep
     // consistent single/middle/last shapes as parents expand/collapse children.
     const isElbowActive = props.metadata.taskStatus === "running";
-    // Task-group members use a slightly different left rail so their connector
-    // trunk aligns with the group's leading chevron column.
-    const connectorLayout = props.subAgentConnectorLayout ?? "default";
-    const connectorLeft = getSubAgentConnectorLeft(
-      getItemPaddingLeft(props.depth),
-      connectorLayout
-    );
+    const indentLeft = getItemPaddingLeft(props.depth);
     const ancestorTrunks = rowMeta.ancestorTrunks.map((trunk) => ({
-      left: getAncestorTrunkLeft(trunk.depth, connectorLayout),
+      left: getItemPaddingLeft(trunk.depth) - 4,
       active: trunk.active,
     }));
 
@@ -1123,7 +1092,7 @@ function AgentListItemInner(props: UnifiedAgentListItemProps) {
         sharedTrunkActiveThroughRow={rowMeta.sharedTrunkActiveThroughRow}
         sharedTrunkActiveBelowRow={rowMeta.sharedTrunkActiveBelowRow}
         ancestorTrunks={ancestorTrunks}
-        connectorLeft={connectorLeft}
+        indentLeft={indentLeft}
         isSelected={props.isSelected}
         isElbowActive={isElbowActive}
       >

src/browser/components/AgentListItem/SubAgentListItem.tsx

@@ -7,15 +7,14 @@ interface SubAgentListItemProps {
   sharedTrunkActiveThroughRow: boolean;
   sharedTrunkActiveBelowRow: boolean;
   ancestorTrunks: ReadonlyArray<{ left: number; active: boolean }>;
-  connectorLeft: number;
+  indentLeft: number;
   isSelected: boolean;
   isElbowActive: boolean;
   children: React.ReactNode;
 }
 
 export function SubAgentListItem(props: SubAgentListItemProps) {
-  // The parent passes the absolute row-space x position for this connector trunk.
-  const connectorLeft = props.connectorLeft;
+  const connectorLeft = props.indentLeft - 10;
   const connectorFillClass = props.isSelected ? "bg-border" : "bg-border-light";
   const connectorBorderClass = props.isSelected ? "border-border" : "border-border-light";
   const connectorColor = props.isSelected ? "var(--color-border)" : "var(--color-border-light)";