🤖 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>
     );

src/browser/components/AgentListItem/AgentListItem.tsx

@@ -128,7 +128,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;
+  return 12 + Math.min(32, safeDepth) * 12;
 }
 
 function getSubAgentConnectorLeft(
@@ -294,31 +294,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 +676,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.

src/browser/components/ProjectSidebar/ProjectSidebar.tsx

@@ -87,8 +87,6 @@ import {
   ChevronRight,
   CircleHelp,
   EllipsisVertical,
-  Folder,
-  FolderOpen,
   KeyRound,
   Palette,
   Pencil,
@@ -102,6 +100,7 @@ import { usePopoverError } from "@/browser/hooks/usePopoverError";
 import { forkWorkspace } from "@/browser/utils/chatCommands";
 import { PopoverError } from "../PopoverError/PopoverError";
 import { SectionHeader } from "../SectionHeader/SectionHeader";
+import { AddSectionButton } from "../AddSectionButton/AddSectionButton";
 import { WorkspaceSectionDropZone } from "../WorkspaceSectionDropZone/WorkspaceSectionDropZone";
 import { WorkspaceDragLayer } from "../WorkspaceDragLayer/WorkspaceDragLayer";
 import { SectionDragLayer } from "../SectionDragLayer/SectionDragLayer";
@@ -284,9 +283,8 @@ function useWorkspaceAttentionSubscription(
 // Keep the project header visible while scrolling through long workspace lists.
 // Project rows are also drag handles, so disable text selection to avoid
 // highlighting the whole sidebar before a reorder gesture locks in.
-// pr-2 matches AgentListItem LIST_ITEM_BASE_CLASSES so project kebab aligns with workspace rows.
 const PROJECT_ITEM_BASE_CLASS =
-  "group sticky top-0 z-10 py-2 pl-2 pr-1 flex select-none items-center border-l-transparent bg-surface-primary transition-colors duration-150";
+  "sticky top-0 z-10 py-2 pl-2 pr-3 flex select-none items-center border-l-transparent bg-surface-primary transition-colors duration-150";
 
 function getProjectFallbackLabel(projectPath: string): string {
   const abbreviatedPath = PlatformPaths.abbreviate(projectPath);
@@ -985,6 +983,14 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
     }));
   };
 
+  const handleCreateSection = async (projectPath: string, name: string) => {
+    const result = await createSection(projectPath, name);
+    if (result.success) {
+      // Auto-expand the new section so the sidebar immediately shows the new bucket.
+      const key = getSectionExpandedKey(projectPath, result.data.id);
+      setExpandedSections((prev) => ({ ...prev, [key]: true }));
+    }
+  };
   const handleForkWorkspace = useCallback(
     async (workspaceId: string, buttonElement?: HTMLElement) => {
       if (!api) {
@@ -1791,28 +1797,22 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                 viewportClassName="overflow-x-hidden"
               >
                 {multiProjectWorkspaces.length > 0 && (
-                  <div>
+                  <div className="border-hover border-b">
                     <div className={PROJECT_ITEM_BASE_CLASS}>
                       <button
                         onClick={() => toggleProject(MULTI_PROJECT_SIDEBAR_SECTION_ID)}
                         aria-label={`${isMultiProjectSectionExpanded ? "Collapse" : "Expand"} multi-project workspaces`}
                         className="text-secondary hover:bg-hover hover:border-border-light mr-1.5 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded border border-transparent bg-transparent p-0 transition-all duration-200"
                       >
-                        <span className="relative flex h-4 w-4 items-center justify-center">
-                          <ChevronRight
-                            className="absolute inset-0 h-4 w-4 opacity-0 transition-[opacity,transform] duration-200 group-hover:opacity-100"
-                            style={{
-                              transform: isMultiProjectSectionExpanded
-                                ? "rotate(90deg)"
-                                : "rotate(0deg)",
-                            }}
-                          />
-                          {isMultiProjectSectionExpanded ? (
-                            <FolderOpen className="h-4 w-4 transition-opacity duration-200 group-hover:opacity-0" />
-                          ) : (
-                            <Folder className="h-4 w-4 transition-opacity duration-200 group-hover:opacity-0" />
-                          )}
-                        </span>
+                        <ChevronRight
+                          className="h-4 w-4 shrink-0 transition-transform duration-200"
+                          strokeWidth={1.8}
+                          style={{
+                            transform: isMultiProjectSectionExpanded
+                              ? "rotate(90deg)"
+                              : "rotate(0deg)",
+                          }}
+                        />
                       </button>
                       <div className="flex min-w-0 flex-1 items-center pr-2">
                         <span className="text-foreground truncate text-sm font-medium">
@@ -1889,13 +1889,12 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                     const isEditingProjectDisplayName = editingProjectPath === projectPath;
                     const projectWorkspaces =
                       singleProjectWorkspacesByProject.get(projectPath) ?? [];
-                    const projectAgentCount = projectWorkspaces.length;
                     const projectHasAttention = projectWorkspaces.some(
                       (workspace) => workspaceAttentionById.get(workspace.id) === true
                     );
 
                     return (
-                      <div key={projectPath}>
+                      <div key={projectPath} className="border-hover border-b">
                         <DraggableProjectItem
                           projectPath={projectPath}
                           onReorder={handleReorder}
@@ -1941,30 +1940,11 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                             data-project-path={projectPath}
                             className="text-secondary hover:bg-hover hover:border-border-light mr-1.5 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded border border-transparent bg-transparent p-0 transition-all duration-200"
                           >
-                            {/* Mobile: nudge folder icon left so it visually centers above connector line. */}
-                            <span className="relative flex h-4 w-4 -translate-x-2 items-center justify-center md:translate-x-0">
-                              <ChevronRight
-                                className="absolute inset-0 h-4 w-4 opacity-0 transition-[opacity,transform] duration-200 group-hover:opacity-100"
-                                style={{
-                                  transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)",
-                                }}
-                              />
-                              {isExpanded ? (
-                                <FolderOpen
-                                  className="h-4 w-4 transition-opacity duration-200 group-hover:opacity-0"
-                                  style={
-                                    projectFolderColor ? { color: projectFolderColor } : undefined
-                                  }
-                                />
-                              ) : (
-                                <Folder
-                                  className="h-4 w-4 transition-opacity duration-200 group-hover:opacity-0"
-                                  style={
-                                    projectFolderColor ? { color: projectFolderColor } : undefined
-                                  }
-                                />
-                              )}
-                            </span>
+                            <ChevronRight
+                              className="h-4 w-4 shrink-0 transition-transform duration-200"
+                              strokeWidth={1.8}
+                              style={{ transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)" }}
+                            />
                           </button>
                           <div
                             className="flex min-w-0 flex-1 items-center pr-2"
@@ -2011,27 +1991,17 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                                     }}
                                   />
                                 ) : (
-                                  <div className="text-muted-dark flex min-w-0 items-center gap-1.5 text-sm">
+                                  <div className="text-muted-dark flex gap-2 truncate text-sm">
                                     <span
                                       className={cn(
-                                        "min-w-0 flex-1 truncate font-medium",
+                                        "truncate font-medium",
                                         projectHasAttention
                                           ? "text-content-primary"
-                                          : "text-content-secondary"
+                                          : "text-foreground"
                                       )}
                                     >
                                       {displayProjectName}
                                     </span>
-                                    <span
-                                      className={cn(
-                                        "shrink-0",
-                                        projectHasAttention
-                                          ? "text-content-primary"
-                                          : "text-content-secondary"
-                                      )}
-                                    >
-                                      ({projectAgentCount})
-                                    </span>
                                   </div>
                                 )}
                               </TooltipTrigger>
@@ -2047,7 +2017,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                                 }}
                                 aria-label={`New chat in ${projectName}`}
                                 data-project-path={projectPath}
-                                className="text-content-secondary hover:bg-hover hover:border-border-light flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded border border-transparent bg-transparent text-sm leading-none transition-all duration-200"
+                                className="text-content-secondary hover:bg-hover hover:border-border-light mr-1 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded border border-transparent bg-transparent text-sm leading-none transition-all duration-200"
                               >
                                 <Plus className="h-4 w-4 shrink-0" strokeWidth={1.8} />
                               </button>
@@ -2698,8 +2668,16 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                                             : `Expand workspaces older than ${thresholdLabel}`
                                         }
                                         aria-expanded={isTierExpanded}
-                                        className="text-muted border-hover hover:text-label [&:hover_.arrow]:text-label flex w-full cursor-pointer items-center gap-1 border-t border-none bg-transparent px-3 py-2 pl-7 text-xs font-medium transition-all duration-150 hover:bg-white/3"
+                                        // Keep recency buckets styled like dividers instead of another tree
+                                        // node so “Older than …” still reads as a filter on the list.
+                                        className="text-muted border-hover hover:text-label [&:hover_.arrow]:text-label flex w-full cursor-pointer items-center justify-between border-t border-none bg-transparent px-3 py-2 pl-[22px] text-xs font-medium transition-all duration-150 hover:bg-white/[0.03]"
                                       >
+                                        <div className="flex items-center gap-1.5">
+                                          <span>Older than {thresholdLabel}</span>
+                                          <span className="text-dim font-normal">
+                                            ({displayCount})
+                                          </span>
+                                        </div>
                                         <span
                                           className="arrow text-dim text-[11px] transition-transform duration-200 ease-in-out"
                                           style={{
@@ -2708,14 +2686,11 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                                               : "rotate(0deg)",
                                           }}
                                         >
-                                          <ChevronRight className="h-4 w-4" />
+                                          <ChevronRight
+                                            className="h-4 w-4 shrink-0"
+                                            strokeWidth={1.8}
+                                          />
                                         </span>
-                                        <div className="flex items-center gap-1.5">
-                                          <span>Older than {thresholdLabel}</span>
-                                          <span className="text-dim font-normal">
-                                            ({displayCount})
-                                          </span>
-                                        </div>
                                       </button>
                                       {isTierExpanded && (
                                         <>
@@ -2968,6 +2943,12 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
 
                                   {/* Sections */}
                                   {sections.map(renderSection)}
+
+                                  <AddSectionButton
+                                    onCreateSection={(name) => {
+                                      void handleCreateSection(projectPath, name);
+                                    }}
+                                  />
                                 </>
                               );
                             })()}

src/browser/components/ProjectSidebar/TaskGroupListItem.tsx

@@ -56,7 +56,6 @@ export function TaskGroupListItem(props: TaskGroupListItemProps) {
       data-testid={`task-group-${props.groupId}`}
       className={cn(
         "bg-surface-primary relative flex items-start gap-1.5 rounded-l-sm py-2 pr-2 pl-1 select-none transition-all duration-150 hover:bg-surface-secondary",
-        props.sectionId != null ? "ml-7.5" : "ml-5",
         props.isSelected && "bg-surface-secondary"
       )}
       style={{ paddingLeft }}
@@ -72,7 +71,7 @@ export function TaskGroupListItem(props: TaskGroupListItemProps) {
     >
       <span
         aria-hidden="true"
-        className="text-muted mt-0.5 -ml-4 inline-flex h-4 w-4 shrink-0 items-center justify-center"
+        className="text-muted mt-0.5 inline-flex h-4 w-4 shrink-0 items-center justify-center"
       >
         <ChevronRight
           className="h-3 w-3 transition-transform duration-150"