diff --git a/src/browser/components/AddSectionButton/AddSectionButton.tsx b/src/browser/components/AddSectionButton/AddSectionButton.tsx
index beff820652..7b993e7cfd 100644
--- a/src/browser/components/AddSectionButton/AddSectionButton.tsx
+++ b/src/browser/components/AddSectionButton/AddSectionButton.tsx
@@ -3,11 +3,17 @@ import { Plus } from "lucide-react";
 // import { Tooltip, TooltipTrigger, TooltipContent } from "../Tooltip/Tooltip";
 
 interface AddSectionButtonProps {
-  onCreateSection: (name: string) => void;
+  onCreateSection: (name: string) => Promise<boolean>;
 }
 
+const alignWithSectionCaretStyle: React.CSSProperties = {
+  borderLeftWidth: 3,
+  borderLeftColor: "transparent",
+};
+
 export const AddSectionButton: React.FC<AddSectionButtonProps> = ({ onCreateSection }) => {
   const [isCreating, setIsCreating] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [name, setName] = useState("");
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -17,26 +23,62 @@ export const AddSectionButton: React.FC<AddSectionButtonProps> = ({ onCreateSect
     }
   }, [isCreating]);
 
-  const handleSubmit = () => {
+  const handleSubmit = async () => {
+    if (isSubmitting) {
+      return;
+    }
+
     const trimmed = name.trim();
-    if (trimmed) {
-      onCreateSection(trimmed);
+    if (!trimmed) {
+      setName("");
+      setIsCreating(false);
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      // Keep the input open until creation succeeds so backend/IPC failures do not
+      // look like they created a section successfully.
+      const didCreateSection = await onCreateSection(trimmed);
+      if (!didCreateSection) {
+        return;
+      }
+      setName("");
+      setIsCreating(false);
+    } catch {
+      // The caller owns error presentation; keep the current draft visible so the
+      // user can retry instead of losing their typed section name.
+    } finally {
+      setIsSubmitting(false);
     }
-    setName("");
-    setIsCreating(false);
+  };
+
+  const submitWithoutThrowing = () => {
+    handleSubmit().catch(() => undefined);
   };
 
   if (isCreating) {
     return (
-      <div className="flex items-center px-2 py-0.5">
+      <div
+        // Match the section header's reserved 3px color rail so the add affordance's
+        // plus icon stays horizontally aligned with the section caret.
+        className="flex items-center gap-1 px-2 py-0.5"
+        style={alignWithSectionCaretStyle}
+      >
+        <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"
           value={name}
           onChange={(e) => setName(e.target.value)}
-          onBlur={handleSubmit}
+          disabled={isSubmitting}
+          onBlur={submitWithoutThrowing}
           onKeyDown={(e) => {
-            if (e.key === "Enter") handleSubmit();
+            if (e.key === "Enter") {
+              submitWithoutThrowing();
+            }
             if (e.key === "Escape") {
               setName("");
               setIsCreating(false);
@@ -44,7 +86,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 +96,14 @@ 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"
+      style={alignWithSectionCaretStyle}
     >
-      <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>
   );
diff --git a/src/browser/components/AgentListItem/AgentListItem.tsx b/src/browser/components/AgentListItem/AgentListItem.tsx
index c02b474b80..83559aad6b 100644
--- a/src/browser/components/AgentListItem/AgentListItem.tsx
+++ b/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;
@@ -121,26 +120,18 @@ const LIST_ITEM_BASE_CLASSES =
   "bg-surface-primary relative flex items-start gap-1.5 rounded-l-sm py-2 pr-1.5 select-none transition-all duration-150";
 
 const HIDE_INLINE_ACTIONS_ON_MOBILE_TOUCH =
-  "[@media(max-width:768px)_and_(hover:none)_and_(pointer:coarse)]:invisible [@media(max-width:768px)_and_(hover:none)_and_(pointer:coarse)]:pointer-events-none";
+  "[@media(max-width:768px)_and_(hover:none)_and_(pointer:coarse)]:hidden";
 const SHOW_INLINE_ACTIONS_ON_WIDE_TOUCH =
-  "[@media(min-width:769px)_and_(hover:none)_and_(pointer:coarse)]:opacity-100";
+  "[@media(min-width:769px)_and_(hover:none)_and_(pointer:coarse)]:pointer-events-auto [@media(min-width:769px)_and_(hover:none)_and_(pointer:coarse)]:opacity-100";
+// Dense sidebar icon buttons should not inherit the global 44px coarse-pointer
+// minimum, otherwise hidden/inline actions still reserve row width and push the
+// visible controls off-screen.
+const COMPACT_SIDEBAR_ICON_BUTTON_CLASSES = "!min-h-0 !min-w-0";
 
 /** 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";
@@ -257,7 +248,12 @@ function QuickArchiveButton(props: {
         <TooltipTrigger asChild>
           <button
             type="button"
-            className="text-muted hover:text-foreground focus-visible:text-foreground pointer-events-none inline-flex h-4 w-4 cursor-pointer items-center justify-center border-none bg-transparent p-0 opacity-0 transition-[color,opacity] duration-200 group-focus-within/row:pointer-events-auto group-focus-within/row:opacity-100 group-hover/row:pointer-events-auto group-hover/row:opacity-100"
+            className={cn(
+              "text-muted hover:text-foreground focus-visible:text-foreground pointer-events-none inline-flex h-4 w-4 cursor-pointer items-center justify-center border-none bg-transparent p-0 opacity-0 transition-[color,opacity] duration-200 group-focus-within/row:pointer-events-auto group-focus-within/row:opacity-100 group-hover/row:pointer-events-auto group-hover/row:opacity-100",
+              COMPACT_SIDEBAR_ICON_BUTTON_CLASSES,
+              HIDE_INLINE_ACTIONS_ON_MOBILE_TOUCH,
+              SHOW_INLINE_ACTIONS_ON_WIDE_TOUCH
+            )}
             onKeyDown={stopKeyboardPropagation}
             onClick={(event) => {
               event.stopPropagation();
@@ -294,19 +290,9 @@ 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 });
 
@@ -314,11 +300,10 @@ function DraftAgentListItemInner(props: DraftAgentListItemProps) {
     <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();
@@ -374,6 +359,7 @@ function DraftAgentListItemInner(props: DraftAgentListItemProps) {
               type="button"
               className={cn(
                 "text-muted hover:text-content-destructive inline-flex h-4 w-4 cursor-pointer items-center justify-center border-none bg-transparent p-0 opacity-0 transition-colors duration-200",
+                COMPACT_SIDEBAR_ICON_BUTTON_CLASSES,
                 // Keep long-press as the compact mobile affordance on narrow
                 // touch layouts, but show the button on wider touch screens so
                 // it never becomes an invisible tappable hotspot.
@@ -687,7 +673,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.
@@ -813,6 +798,7 @@ function RegularAgentListItemInner(props: AgentListItemProps) {
                   type="button"
                   className={cn(
                     "text-muted inline-flex h-4 w-4 items-center justify-center border-none bg-transparent p-0 transition-colors duration-200",
+                    COMPACT_SIDEBAR_ICON_BUTTON_CLASSES,
                     // Keep cancel affordance hidden until row-hover while initializing,
                     // but force it visible as a spinner once deletion starts.
                     isRemoving
@@ -873,6 +859,7 @@ function RegularAgentListItemInner(props: AgentListItemProps) {
                     ref={overflowMenuButtonRef}
                     className={cn(
                       "text-muted hover:text-foreground inline-flex h-4 w-4 cursor-pointer items-center justify-center border-none bg-transparent p-0 transition-colors duration-200",
+                      COMPACT_SIDEBAR_ICON_BUTTON_CLASSES,
                       ctxMenu.isOpen ? "opacity-100" : "opacity-0",
                       HIDE_INLINE_ACTIONS_ON_MOBILE_TOUCH,
                       SHOW_INLINE_ACTIONS_ON_WIDE_TOUCH
@@ -992,7 +979,7 @@ function RegularAgentListItemInner(props: AgentListItemProps) {
         )}
 
         {/* Keep title row anchored so status dot/title align across single+double-line states. */}
-        <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+        <div className="flex min-w-0 flex-1 flex-col gap-0.5 overflow-hidden">
           <div
             className={cn(
               // Keep the title column shrinkable on narrow/mobile viewports so the
@@ -1013,7 +1000,7 @@ function RegularAgentListItemInner(props: AgentListItemProps) {
                 data-workspace-id={workspaceId}
               />
             ) : (
-              <div className="flex min-w-0 items-center gap-1">
+              <div className="flex min-w-0 flex-1 items-center gap-1 overflow-hidden">
                 <span
                   className={cn(
                     "min-w-0 flex-1 truncate text-left text-[14px] leading-6 transition-colors duration-200",
@@ -1104,15 +1091,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 +1104,7 @@ function AgentListItemInner(props: UnifiedAgentListItemProps) {
         sharedTrunkActiveThroughRow={rowMeta.sharedTrunkActiveThroughRow}
         sharedTrunkActiveBelowRow={rowMeta.sharedTrunkActiveBelowRow}
         ancestorTrunks={ancestorTrunks}
-        connectorLeft={connectorLeft}
+        indentLeft={indentLeft}
         isSelected={props.isSelected}
         isElbowActive={isElbowActive}
       >
diff --git a/src/browser/components/AgentListItem/SubAgentListItem.tsx b/src/browser/components/AgentListItem/SubAgentListItem.tsx
index 02f523f9d6..693c89c135 100644
--- a/src/browser/components/AgentListItem/SubAgentListItem.tsx
+++ b/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)";
diff --git a/src/browser/components/ProjectSidebar/ProjectSidebar.tsx b/src/browser/components/ProjectSidebar/ProjectSidebar.tsx
index d031caef3f..fbb86099c4 100644
--- a/src/browser/components/ProjectSidebar/ProjectSidebar.tsx
+++ b/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,12 @@ 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";
+// Project rows already provide large touch targets via the full-width row and
+// long-press menu. Keep the inline icon buttons compact so they do not expand
+// the header and shove the visible actions out of the sidebar.
+const COMPACT_PROJECT_ICON_BUTTON_CLASSES = "!min-h-0 !min-w-0";
 
 function getProjectFallbackLabel(projectPath: string): string {
   const abbreviatedPath = PlatformPaths.abbreviate(projectPath);
@@ -985,6 +987,17 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
     }));
   };
 
+  const handleCreateSection = async (projectPath: string, name: string): Promise<boolean> => {
+    const result = await createSection(projectPath, name);
+    if (!result.success) {
+      return false;
+    }
+
+    // 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 }));
+    return true;
+  };
   const handleForkWorkspace = useCallback(
     async (workspaceId: string, buttonElement?: HTMLElement) => {
       if (!api) {
@@ -1791,28 +1804,25 @@ 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"
+                        className={cn(
+                          "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",
+                          COMPACT_PROJECT_ICON_BUTTON_CLASSES
+                        )}
                       >
-                        <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">
@@ -1876,7 +1886,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                   sortedProjectPaths.map((projectPath) => {
                     const config = userProjects.get(projectPath);
                     if (!config) return null;
-                    const projectFolderColor = config.color
+                    const projectColor = config.color
                       ? resolveSectionColor(config.color)
                       : undefined;
                     const projectName = getProjectNameFromPath(projectPath);
@@ -1889,13 +1899,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}
@@ -1939,32 +1948,16 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                             }}
                             aria-label={`${isExpanded ? "Collapse" : "Expand"} project ${projectName}`}
                             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"
+                            className={cn(
+                              "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",
+                              COMPACT_PROJECT_ICON_BUTTON_CLASSES
+                            )}
                           >
-                            {/* 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 +2004,24 @@ 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 min-w-0 flex-1 items-center gap-2 overflow-hidden text-sm">
+                                    {projectColor && (
+                                      <span
+                                        aria-hidden="true"
+                                        className="h-2 w-2 shrink-0 rounded-full"
+                                        style={{ backgroundColor: projectColor }}
+                                      />
+                                    )}
                                     <span
                                       className={cn(
                                         "min-w-0 flex-1 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 +2037,10 @@ 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={cn(
+                                  "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",
+                                  COMPACT_PROJECT_ICON_BUTTON_CLASSES
+                                )}
                               >
                                 <Plus className="h-4 w-4 shrink-0" strokeWidth={1.8} />
                               </button>
@@ -2065,7 +2058,10 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                                 }}
                                 aria-label={`Project options for ${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 transition-all duration-200"
+                                className={cn(
+                                  "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 transition-all duration-200",
+                                  COMPACT_PROJECT_ICON_BUTTON_CLASSES
+                                )}
                               >
                                 <EllipsisVertical className="h-4 w-4 shrink-0" strokeWidth={1.8} />
                               </button>
@@ -2079,17 +2075,8 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                             id={workspaceListId}
                             role="region"
                             aria-label={`Workspaces for ${projectName}`}
-                            className="relative pt-1"
+                            className="pt-1"
                           >
-                            <div
-                              aria-hidden="true"
-                              className="bg-border pointer-events-none absolute top-1 bottom-0 left-4.5 w-px"
-                              style={
-                                projectFolderColor
-                                  ? { backgroundColor: projectFolderColor }
-                                  : undefined
-                              }
-                            />
                             {(() => {
                               // Archived workspaces are excluded from workspaceMetadata so won't appear here
 
@@ -2175,8 +2162,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                                 sectionId?: string,
                                 rowRenderMetaOverride?: AgentRowRenderMeta | null,
                                 depthOverride?: number,
-                                keyOverride?: string,
-                                subAgentConnectorLayout?: "default" | "task-group-member"
+                                keyOverride?: string
                               ) => {
                                 const rowRenderMeta =
                                   rowRenderMetaOverride === undefined
@@ -2208,7 +2194,6 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                                     }
                                     sectionId={sectionId}
                                     rowRenderMeta={rowRenderMeta}
-                                    subAgentConnectorLayout={subAgentConnectorLayout}
                                     completedChildrenExpanded={
                                       expandedCompletedSubAgents[metadata.id] ?? false
                                     }
@@ -2427,8 +2412,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                                           sectionId,
                                           rowMetaByWorkspaceId.get(member.id) ?? null,
                                           depth + 1,
-                                          `task-group-member:${taskGroupId}:${member.id}`,
-                                          "task-group-member"
+                                          `task-group-member:${taskGroupId}:${member.id}`
                                         )
                                       );
                                     }
@@ -2698,8 +2682,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 +2700,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 +2957,12 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
 
                                   {/* Sections */}
                                   {sections.map(renderSection)}
+
+                                  <AddSectionButton
+                                    onCreateSection={(name) =>
+                                      handleCreateSection(projectPath, name)
+                                    }
+                                  />
                                 </>
                               );
                             })()}
diff --git a/src/browser/components/ProjectSidebar/TaskGroupListItem.tsx b/src/browser/components/ProjectSidebar/TaskGroupListItem.tsx
index 9b38797c67..c98721fefe 100644
--- a/src/browser/components/ProjectSidebar/TaskGroupListItem.tsx
+++ b/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"
diff --git a/src/browser/components/SectionHeader/SectionHeader.tsx b/src/browser/components/SectionHeader/SectionHeader.tsx
index 348956f567..e71e58d2be 100644
--- a/src/browser/components/SectionHeader/SectionHeader.tsx
+++ b/src/browser/components/SectionHeader/SectionHeader.tsx
@@ -1,15 +1,6 @@
 import React, { useState, useRef, useEffect } from "react";
 import { cn } from "@/common/lib/utils";
-import {
-  ChevronRight,
-  EllipsisVertical,
-  Folder,
-  FolderOpen,
-  Palette,
-  Pencil,
-  Trash2,
-  Plus,
-} from "lucide-react";
+import { ChevronRight, EllipsisVertical, Palette, Pencil, Trash2, Plus } from "lucide-react";
 import type { SectionConfig } from "@/common/types/project";
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipIfPresent } from "../Tooltip/Tooltip";
 import { resolveSectionColor, SECTION_COLOR_PALETTE } from "@/common/constants/ui";
@@ -32,6 +23,10 @@ interface SectionHeaderProps {
   onAutoCreateRenameCancel?: () => void;
 }
 
+// Section rows already expose a large click target via the full header, so keep
+// the inline icon buttons compact even on coarse-pointer layouts.
+const COMPACT_SECTION_ICON_BUTTON_CLASSES = "!min-h-0 !min-w-0";
+
 export const SectionHeader: React.FC<SectionHeaderProps> = ({
   section,
   isExpanded,
@@ -107,36 +102,33 @@ export const SectionHeader: React.FC<SectionHeaderProps> = ({
 
   return (
     <div
-      className="group relative ml-4 flex items-center gap-1 py-1.5 pr-1 pl-3 select-none"
+      className="group relative flex items-center gap-1 border-t border-white/5 px-2 py-1.5 select-none"
+      style={{
+        // Keep sections visually distinct from project rows so age buckets do not read like
+        // another folder level in the hierarchy after reverting the sidebar redesign.
+        backgroundColor: `${sectionColor}10`,
+        borderLeftWidth: 3,
+        borderLeftColor: sectionColor,
+      }}
       data-section-id={section.id}
     >
-      {/* Expand/Collapse Button */}
       <button
         onClick={onToggleExpand}
-        className="text-secondary hover:text-foreground flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded border-none bg-transparent p-0 transition-colors"
+        className={cn(
+          "text-secondary hover:text-foreground flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded border-none bg-transparent p-0 transition-colors",
+          COMPACT_SECTION_ICON_BUTTON_CLASSES
+        )}
         aria-label={isExpanded ? "Collapse section" : "Expand section"}
         aria-expanded={isExpanded}
       >
-        <span className="relative flex h-3.5 w-3.5 items-center justify-center">
-          <ChevronRight
-            className="absolute inset-0 h-3.5 w-3.5 opacity-0 transition-[opacity,transform] duration-200 group-hover:opacity-100"
-            style={{ transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)" }}
-          />
-          {isExpanded ? (
-            <FolderOpen
-              className="h-3.5 w-3.5 transition-opacity duration-200 group-hover:opacity-0"
-              style={{ color: sectionColor }}
-            />
-          ) : (
-            <Folder
-              className="h-3.5 w-3.5 transition-opacity duration-200 group-hover:opacity-0"
-              style={{ color: sectionColor }}
-            />
-          )}
-        </span>
+        <ChevronRight
+          size={12}
+          className="h-3 w-3 shrink-0 transition-transform duration-200"
+          strokeWidth={1.8}
+          style={{ transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)" }}
+        />
       </button>
 
-      {/* Section Name */}
       {isEditing ? (
         <input
           ref={inputRef}
@@ -172,7 +164,7 @@ export const SectionHeader: React.FC<SectionHeaderProps> = ({
           onDoubleClick={startEditing}
           className={cn(
             "min-w-0 flex-1 cursor-pointer truncate border-none bg-transparent p-0 text-left text-xs font-medium",
-            hasAttention ? "text-content-primary" : "text-content-secondary"
+            hasAttention ? "text-content-primary" : "text-foreground"
           )}
         >
           {section.name}
@@ -180,23 +172,7 @@ export const SectionHeader: React.FC<SectionHeaderProps> = ({
         </button>
       )}
 
-      {/* Right-side controls: add chat + section actions */}
-      <div className="flex items-center opacity-0 transition-opacity group-hover:opacity-100 [@media(hover:none)_and_(pointer:coarse)]:opacity-100">
-        {/* Add Chat — always visible on touch devices */}
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <button
-              onClick={onAddWorkspace}
-              className="text-secondary hover:text-foreground hover:bg-hover flex h-5 w-5 cursor-pointer items-center justify-center rounded border-none bg-transparent p-0 text-sm transition-colors"
-              aria-label="New chat in section"
-            >
-              <Plus className="h-4 w-4" />
-            </button>
-          </TooltipTrigger>
-          <TooltipContent>New chat</TooltipContent>
-        </Tooltip>
-
-        {/* Section actions kebab sits immediately to the right of New chat */}
+      <div className="flex items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100 [@media(hover:none)_and_(pointer:coarse)]:opacity-100">
         <Tooltip>
           <TooltipTrigger asChild>
             <button
@@ -215,7 +191,10 @@ export const SectionHeader: React.FC<SectionHeaderProps> = ({
                 }
                 sectionMenu.onContextMenu(e);
               }}
-              className="text-muted hover:text-foreground hover:bg-hover flex h-5 w-5 cursor-pointer items-center justify-center rounded border-none bg-transparent p-0 transition-colors"
+              className={cn(
+                "text-muted hover:text-foreground hover:bg-hover flex h-5 w-5 cursor-pointer items-center justify-center rounded border-none bg-transparent p-0 transition-colors",
+                COMPACT_SECTION_ICON_BUTTON_CLASSES
+              )}
               aria-label="Section actions"
             >
               <EllipsisVertical className="h-3.5 w-3.5" />
@@ -224,6 +203,22 @@ export const SectionHeader: React.FC<SectionHeaderProps> = ({
           <TooltipContent>Section actions</TooltipContent>
         </Tooltip>
 
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              onClick={onAddWorkspace}
+              className={cn(
+                "text-secondary hover:text-foreground hover:bg-hover flex h-5 w-5 cursor-pointer items-center justify-center rounded border-none bg-transparent p-0 text-sm transition-colors",
+                COMPACT_SECTION_ICON_BUTTON_CLASSES
+              )}
+              aria-label="New chat in section"
+            >
+              <Plus className="h-4 w-4" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent>New chat</TooltipContent>
+        </Tooltip>
+
         <PositionedMenu
           open={sectionMenu.isOpen}
           onOpenChange={(open) => {