From 810581a86fdc124cfd30a5bec236597426d69cd7 Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Wed, 26 Aug 2026 12:34:41 -0700
Subject: [PATCH 1/4] Polish sidebar hierarchy and section actions

---
 .../src/components/sidebar/ProjectList.tsx    | 74 ++++++++++++++----
 .../sidebar/ProjectListSectionHeader.test.tsx | 40 ++++++++++
 .../sidebar/ProjectRow.interactions.test.tsx  | 75 ++++++++++++++++++-
 .../app/src/components/sidebar/ProjectRow.tsx | 24 +++++-
 .../sidebar/SidebarChildToggleChevron.tsx     |  2 +-
 .../src/components/sidebar/ThreadRow.test.tsx | 18 ++++-
 apps/app/src/components/sidebar/ThreadRow.tsx |  2 +-
 .../sidebar/TopLevelSidebarSection.tsx        |  2 +-
 8 files changed, 212 insertions(+), 25 deletions(-)

diff --git a/apps/app/src/components/sidebar/ProjectList.tsx b/apps/app/src/components/sidebar/ProjectList.tsx
index 0458b87996..b5b2c3c8ea 100644
--- a/apps/app/src/components/sidebar/ProjectList.tsx
+++ b/apps/app/src/components/sidebar/ProjectList.tsx
@@ -229,6 +229,12 @@ interface ProjectListThreadsSectionActionsProps {
   onNewThread: () => void;
 }
 
+interface ProjectListManualPinnedSectionActionsProps {
+  displayOptions: ReactNode;
+  isCreatingSection: boolean;
+  onNewSection?: () => void;
+}
+
 interface SidebarDisplayOptionsMenuProps {
   activeCount?: number;
   draftCount?: number;
@@ -590,20 +596,10 @@ function ProjectListThreadsSectionActions({
 }: ProjectListThreadsSectionActionsProps) {
   return (
     <>
-      {onNewSection ? (
-        <ProjectListSectionIconButton
-          ariaLabel="New section"
-          title="New section"
-          disabled={isCreatingSection}
-          icon={
-            <Icon
-              name="SectionAdd"
-              className={COARSE_POINTER_ICON_SIZE_CLASS}
-            />
-          }
-          onClick={onNewSection}
-        />
-      ) : null}
+      <ProjectListNewSectionAction
+        isCreatingSection={isCreatingSection}
+        onNewSection={onNewSection}
+      />
       <ProjectListSectionIconButton
         ariaLabel="New thread"
         title="New thread"
@@ -619,6 +615,42 @@ function ProjectListThreadsSectionActions({
   );
 }
 
+function ProjectListNewSectionAction({
+  isCreatingSection,
+  onNewSection,
+}: Pick<
+  ProjectListThreadsSectionActionsProps,
+  "isCreatingSection" | "onNewSection"
+>) {
+  return onNewSection ? (
+    <ProjectListSectionIconButton
+      ariaLabel="New section"
+      title="New section"
+      disabled={isCreatingSection}
+      icon={
+        <Icon name="SectionAdd" className={COARSE_POINTER_ICON_SIZE_CLASS} />
+      }
+      onClick={onNewSection}
+    />
+  ) : null;
+}
+
+export function ProjectListManualPinnedSectionActions({
+  displayOptions,
+  isCreatingSection,
+  onNewSection,
+}: ProjectListManualPinnedSectionActionsProps) {
+  return (
+    <>
+      {displayOptions}
+      <ProjectListNewSectionAction
+        isCreatingSection={isCreatingSection}
+        onNewSection={onNewSection}
+      />
+    </>
+  );
+}
+
 // "Manually" is the user-facing name for chronological/drag-ordered mode;
 // the stored atom value stays "chronological".
 const SIDEBAR_ORGANIZE_OPTIONS = [
@@ -1375,6 +1407,7 @@ interface SectionModeSectionsProps extends BuiltInSectionRenderState {
   compareThreads: ThreadComparator;
   sections: readonly SidebarSectionDefinition[];
   isReady: boolean;
+  onCreateSection: () => void;
   onCreateThreadInSection: (sectionId: string) => void;
   onProjectSelect?: () => void;
   onRemoveSection: (section: SidebarSectionDefinition) => void;
@@ -1406,6 +1439,7 @@ function SectionModeSections({
   effectivePinnedThreadIds,
   sections,
   isReady,
+  onCreateSection,
   onCreateThreadInSection,
   onProjectSelect,
   onRemoveSection,
@@ -1455,6 +1489,7 @@ function SectionModeSections({
       collapsedThreadIds={collapsedThreadIds}
       collapsedEnvironmentIds={collapsedEnvironmentIds}
       onProjectSelect={onProjectSelect}
+      onCreateSection={onCreateSection}
       onCreateThreadInSection={onCreateThreadInSection}
       onRenameSection={onRenameSection}
       onRemoveSection={onRemoveSection}
@@ -2146,7 +2181,15 @@ function ProjectListComponent({
     collapsedThreads: pinnedSectionThreads,
     label: "Pinned",
     content: pinnedSectionContent,
-    actions: renderSectionDisplayOptions("pinned"),
+    actions: (
+      <ProjectListManualPinnedSectionActions
+        displayOptions={renderSectionDisplayOptions("pinned")}
+        isCreatingSection={isCreateThreadSectionPending}
+        onNewSection={
+          isSectionOrganizationMode ? handleOpenCreateSectionDialog : undefined
+        }
+      />
+    ),
     actionsOpen: isSectionDisplayOptionsOpen("pinned"),
   };
   const threadsSection = {
@@ -2273,6 +2316,7 @@ function ProjectListComponent({
                   collapsedEnvironmentIds={collapsedEnvironmentIds}
                   compareThreads={sidebarThreadComparator}
                   onProjectSelect={onProjectSelect}
+                  onCreateSection={handleOpenCreateSectionDialog}
                   onCreateThreadInSection={handleCreateThreadInSection}
                   onRenameSection={handleOpenRenameThreadSection}
                   onRemoveSection={handleRemoveThreadSection}
diff --git a/apps/app/src/components/sidebar/ProjectListSectionHeader.test.tsx b/apps/app/src/components/sidebar/ProjectListSectionHeader.test.tsx
index 60c4707ddf..a75aa508c9 100644
--- a/apps/app/src/components/sidebar/ProjectListSectionHeader.test.tsx
+++ b/apps/app/src/components/sidebar/ProjectListSectionHeader.test.tsx
@@ -18,6 +18,7 @@ import {
   setPluginThreadRowStatus,
 } from "@/lib/plugin-thread-row-status";
 import {
+  ProjectListManualPinnedSectionActions,
   ProjectListSectionIconButton,
   TopLevelSidebarSection,
 } from "./ProjectList";
@@ -76,6 +77,38 @@ describe("ProjectListSectionIconButton", () => {
   });
 });
 
+describe("ProjectListManualPinnedSectionActions", () => {
+  it("offers the shared New section action only in Manual view", () => {
+    const onNewSection = vi.fn();
+    const result = render(
+      <TooltipProvider>
+        <ProjectListManualPinnedSectionActions
+          displayOptions={<span>Display options</span>}
+          isCreatingSection={false}
+          onNewSection={onNewSection}
+        />
+      </TooltipProvider>,
+    );
+
+    expect(screen.getByText("Display options")).not.toBeNull();
+    const newSection = screen.getByRole("button", { name: "New section" });
+    expect(newSection.querySelector('[data-icon="SectionAdd"]')).not.toBeNull();
+
+    fireEvent.click(newSection);
+    expect(onNewSection).toHaveBeenCalledOnce();
+
+    result.rerender(
+      <TooltipProvider>
+        <ProjectListManualPinnedSectionActions
+          displayOptions={<span>Display options</span>}
+          isCreatingSection={false}
+        />
+      </TooltipProvider>,
+    );
+    expect(screen.queryByRole("button", { name: "New section" })).toBeNull();
+  });
+});
+
 describe("TopLevelSidebarSection", () => {
   it("exposes stable identity only for persisted sections", () => {
     const result = render(
@@ -144,6 +177,13 @@ describe("TopLevelSidebarSection", () => {
       label.compareDocumentPosition(disclosure) &
         Node.DOCUMENT_POSITION_FOLLOWING,
     ).not.toBe(0);
+    expect(disclosure.classList.contains("text-subtle-foreground/75")).toBe(
+      true,
+    );
+    expect(disclosure.classList.contains("text-subtle-foreground")).toBe(false);
+    expect(
+      disclosure.classList.contains("hover:text-sidebar-accent-foreground"),
+    ).toBe(true);
   });
 
   it("rolls a hidden split thread up to a collapsed top-level section", () => {
diff --git a/apps/app/src/components/sidebar/ProjectRow.interactions.test.tsx b/apps/app/src/components/sidebar/ProjectRow.interactions.test.tsx
index 09e37a21c0..6fd4ef8490 100644
--- a/apps/app/src/components/sidebar/ProjectRow.interactions.test.tsx
+++ b/apps/app/src/components/sidebar/ProjectRow.interactions.test.tsx
@@ -208,7 +208,7 @@ describe("ProjectRow interactions", () => {
   });
 
   it("shows generic runtime activity before a named workflow rollup", () => {
-    renderProjectRow(
+    const result = renderProjectRow(
       vi.fn(),
       {
         status: "ready",
@@ -252,6 +252,22 @@ describe("ProjectRow interactions", () => {
     ).not.toBeNull();
     expect(screen.getByLabelText("Thread working")).not.toBeNull();
     expect(screen.queryByLabelText("Workflow running")).toBeNull();
+    const folderIcon = result.container.querySelector(
+      '[data-icon="FolderGit"]',
+    );
+    const folderIconContainer = folderIcon?.parentElement;
+    expect(folderIconContainer).not.toBeNull();
+    expect(
+      folderIconContainer?.classList.contains("text-subtle-foreground/75"),
+    ).toBe(true);
+    expect(
+      folderIconContainer?.classList.contains("text-subtle-foreground"),
+    ).toBe(false);
+    expect(
+      folderIconContainer?.nextElementSibling?.classList.contains(
+        "text-subtle-foreground/80",
+      ),
+    ).toBe(true);
   });
 
   it("shows a working draft before named work for a collapsed environment", () => {
@@ -412,6 +428,63 @@ describe("ProjectRow interactions", () => {
     expect(screen.queryByLabelText("Plan mode active")).toBeNull();
   });
 
+  it("offers New section from a Manual-view section menu", async () => {
+    const store = createStore();
+    const queryClient = new QueryClient();
+    const sectionId = "sec_actions";
+    const onCreateSection = vi.fn();
+    const onRenameSection = vi.fn();
+    const onRemoveSection = vi.fn();
+
+    render(
+      <TooltipProvider>
+        <Provider store={store}>
+          <QueryClientProvider client={queryClient}>
+            <MemoryRouter>
+              <ChronologicalSectionThreadSections
+                threadListState={{
+                  status: "ready",
+                  threads: [makeThread({ sectionId })],
+                }}
+                compareThreads={() => 0}
+                sections={[{ id: sectionId, name: "Actionable" }]}
+                collapsedThreadIds={new Set()}
+                collapsedEnvironmentIds={new Set()}
+                onCreateSection={onCreateSection}
+                onRenameSection={onRenameSection}
+                onRemoveSection={onRemoveSection}
+                onToggleThreadCollapsed={vi.fn()}
+                onToggleEnvironmentCollapsed={vi.fn()}
+                topLevelSectionOrder={[
+                  buildSidebarEntitySectionId("section", sectionId),
+                ]}
+                onTopLevelSectionOrderChange={vi.fn()}
+                pinnedReorderPending={false}
+                pinnedThreads={[]}
+                onReorderPinnedThread={vi.fn()}
+              />
+            </MemoryRouter>
+          </QueryClientProvider>
+        </Provider>
+      </TooltipProvider>,
+    );
+
+    fireEvent.pointerDown(
+      screen.getByRole("button", { name: "Actionable section actions" }),
+      { button: 0 },
+    );
+
+    const newSection = await screen.findByRole("menuitem", {
+      name: "New section",
+    });
+    expect(newSection.querySelector('[data-icon="SectionAdd"]')).not.toBeNull();
+    expect(screen.getByRole("menuitem", { name: "Rename" })).not.toBeNull();
+    expect(screen.getByRole("menuitem", { name: "Remove" })).not.toBeNull();
+
+    fireEvent.click(newSection);
+    expect(onCreateSection).toHaveBeenCalledOnce();
+  });
+
   it("surfaces named activity when the project is collapsed", () => {
     renderProjectRow(
       vi.fn(),
diff --git a/apps/app/src/components/sidebar/ProjectRow.tsx b/apps/app/src/components/sidebar/ProjectRow.tsx
index c59648f214..e8080ca0a1 100644
--- a/apps/app/src/components/sidebar/ProjectRow.tsx
+++ b/apps/app/src/components/sidebar/ProjectRow.tsx
@@ -199,6 +199,7 @@ interface SectionThreadTreeProps {
   collapsedThreadIds: Set<string>;
   collapsedEnvironmentIds: Set<string>;
   onProjectSelect?: () => void;
+  onCreateSection?: () => void;
   onCreateThreadInSection?: (sectionId: string) => void;
   onRenameSection?: (section: SidebarSectionDefinition) => void;
   onRemoveSection?: (section: SidebarSectionDefinition) => void;
@@ -300,6 +301,7 @@ interface ThreadTreeItemRowProps {
   collapsedEnvironmentIds: Set<string>;
   variant: ProjectThreadTreeVariant;
   onProjectSelect?: () => void;
+  onCreateSection?: () => void;
   onCreateThreadInSection?: (sectionId: string) => void;
   onRenameSection?: (section: SidebarSectionDefinition) => void;
   onRemoveSection?: (section: SidebarSectionDefinition) => void;
@@ -322,6 +324,7 @@ interface SectionTreeItemRowProps {
   collapsedEnvironmentIds: Set<string>;
   variant: ProjectThreadTreeVariant;
   onProjectSelect?: () => void;
+  onCreateSection?: () => void;
   onCreateThreadInSection?: (sectionId: string) => void;
   onRenameSection?: (section: SidebarSectionDefinition) => void;
   onRemoveSection?: (section: SidebarSectionDefinition) => void;
@@ -960,7 +963,7 @@ function EnvironmentThreadGroupHeader({
       )}
       <span
         className={cn(
-          "pointer-events-none relative z-10 inline-flex shrink-0 items-center justify-center text-subtle-foreground",
+          "pointer-events-none relative z-10 inline-flex shrink-0 items-center justify-center text-subtle-foreground/75",
           COARSE_POINTER_GLYPH_BOX_CLASS,
         )}
         aria-hidden="true"
@@ -1184,6 +1187,7 @@ const ThreadTreeItemRow = memo(function ThreadTreeItemRow({
   collapsedEnvironmentIds,
   variant,
   onProjectSelect,
+  onCreateSection,
   onCreateThreadInSection,
   onRenameSection,
   onRemoveSection,
@@ -1207,6 +1211,7 @@ const ThreadTreeItemRow = memo(function ThreadTreeItemRow({
         collapsedEnvironmentIds={collapsedEnvironmentIds}
         variant={variant}
         onProjectSelect={onProjectSelect}
+        onCreateSection={onCreateSection}
         onCreateThreadInSection={onCreateThreadInSection}
         onRenameSection={onRenameSection}
         onRemoveSection={onRemoveSection}
@@ -1328,6 +1333,7 @@ const SectionTreeItemRow = memo(function SectionTreeItemRow({
   collapsedEnvironmentIds,
   variant,
   onProjectSelect,
+  onCreateSection,
   onCreateThreadInSection,
   onRenameSection,
   onRemoveSection,
@@ -1411,6 +1417,7 @@ const SectionTreeItemRow = memo(function SectionTreeItemRow({
                   collapsedEnvironmentIds={collapsedEnvironmentIds}
                   variant={variant}
                   onProjectSelect={onProjectSelect}
+                  onCreateSection={onCreateSection}
                   onCreateThreadInSection={onCreateThreadInSection}
                   onRenameSection={onRenameSection}
                   onRemoveSection={onRemoveSection}
@@ -1439,7 +1446,9 @@ const SectionTreeItemRow = memo(function SectionTreeItemRow({
 
   if (variant === "section" && depthOffset === 0) {
     const externalHeaderActions = renderTopLevelSectionHeaderActions?.(section);
-    const hasMenuActions = Boolean(onRenameSection || onRemoveSection);
+    const hasMenuActions = Boolean(
+      onCreateSection || onRenameSection || onRemoveSection,
+    );
     const hasTopLevelActions = Boolean(
       externalHeaderActions?.actions ||
       hasMenuActions ||
@@ -1470,6 +1479,12 @@ const SectionTreeItemRow = memo(function SectionTreeItemRow({
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
+              {onCreateSection ? (
+                <DropdownMenuItem onSelect={onCreateSection}>
+                  <Icon name="SectionAdd" aria-hidden="true" />
+                  New section
+                </DropdownMenuItem>
+              ) : null}
               {onRenameSection ? (
                 <DropdownMenuItem onSelect={() => onRenameSection(section)}>
                   <Icon name="Edit" aria-hidden="true" />
@@ -1746,6 +1761,7 @@ interface SectionThreadTreeItemsProps {
   onProjectSelect?: () => void;
   onToggleThreadCollapsed: (threadId: string) => void;
   onToggleEnvironmentCollapsed: (environmentId: string) => void;
+  onCreateSection?: () => void;
   onCreateThreadInSection?: (sectionId: string) => void;
   onRenameSection?: (section: SidebarSectionDefinition) => void;
   onRemoveSection?: (section: SidebarSectionDefinition) => void;
@@ -1822,6 +1838,7 @@ function SectionThreadTreeItems({
   onProjectSelect,
   onToggleThreadCollapsed,
   onToggleEnvironmentCollapsed,
+  onCreateSection,
   onCreateThreadInSection,
   onRenameSection,
   onRemoveSection,
@@ -1858,6 +1875,7 @@ function SectionThreadTreeItems({
             onProjectSelect={onProjectSelect}
             onToggleThreadCollapsed={onToggleThreadCollapsed}
             onToggleEnvironmentCollapsed={onToggleEnvironmentCollapsed}
+            onCreateSection={onCreateSection}
             onCreateThreadInSection={onCreateThreadInSection}
             onRenameSection={onRenameSection}
             onRemoveSection={onRemoveSection}
@@ -1971,6 +1989,7 @@ export const ChronologicalSectionThreadSections = memo(
     collapsedThreadIds,
     collapsedEnvironmentIds,
     onProjectSelect,
+    onCreateSection,
     onCreateThreadInSection,
     onRenameSection,
     onRemoveSection,
@@ -2105,6 +2124,7 @@ export const ChronologicalSectionThreadSections = memo(
         onProjectSelect={onProjectSelect}
         onToggleThreadCollapsed={onToggleThreadCollapsed}
         onToggleEnvironmentCollapsed={onToggleEnvironmentCollapsed}
+        onCreateSection={onCreateSection}
         onCreateThreadInSection={onCreateThreadInSection}
         onRenameSection={onRenameSection}
         onRemoveSection={onRemoveSection}
diff --git a/apps/app/src/components/sidebar/SidebarChildToggleChevron.tsx b/apps/app/src/components/sidebar/SidebarChildToggleChevron.tsx
index 029aa74659..f84e8949dc 100644
--- a/apps/app/src/components/sidebar/SidebarChildToggleChevron.tsx
+++ b/apps/app/src/components/sidebar/SidebarChildToggleChevron.tsx
@@ -36,7 +36,7 @@ export function SidebarChildToggleChevron({
       }}
       className={cn(
         revealOnHover ? SIDEBAR_HOVER_ACTIONS_CLASS : "pointer-events-auto",
-        "relative z-10 inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-md text-subtle-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2",
+        "relative z-10 inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-md text-subtle-foreground/75 outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2",
         LIST_HOVER_TRANSITION,
       )}
     >
diff --git a/apps/app/src/components/sidebar/ThreadRow.test.tsx b/apps/app/src/components/sidebar/ThreadRow.test.tsx
index 9543d5bbeb..aa0aab43d9 100644
--- a/apps/app/src/components/sidebar/ThreadRow.test.tsx
+++ b/apps/app/src/components/sidebar/ThreadRow.test.tsx
@@ -675,6 +675,8 @@ describe("ThreadRow", () => {
     );
     expect(marker?.getAttribute("aria-label")).toBe("In project Web App");
     expect(marker?.querySelector('[data-icon="FolderExport"]')).not.toBeNull();
+    expect(marker?.classList.contains("text-muted-foreground/75")).toBe(true);
+    expect(marker?.classList.contains("text-muted-foreground")).toBe(false);
     // The marker hugs the title; it never sits in the trailing status slot.
     expect(
       marker?.closest("[data-sidebar-thread-trailing-indicator]"),
@@ -813,11 +815,19 @@ describe("ThreadRow", () => {
       },
     });
 
+    const disclosure = screen.getByRole("button", {
+      name: "Collapse Parent thread threads",
+    });
+    expect(disclosure.getAttribute("data-sidebar-hover-actions-mobile")).toBe(
+      "always",
+    );
+    expect(disclosure.classList.contains("text-subtle-foreground/75")).toBe(
+      true,
+    );
+    expect(disclosure.classList.contains("text-subtle-foreground")).toBe(false);
     expect(
-      screen
-        .getByRole("button", { name: "Collapse Parent thread threads" })
-        .getAttribute("data-sidebar-hover-actions-mobile"),
-    ).toBe("always");
+      disclosure.classList.contains("hover:text-sidebar-accent-foreground"),
+    ).toBe(true);
   });
 
   it("shows its Command shortcut in place of an active indicator", () => {
diff --git a/apps/app/src/components/sidebar/ThreadRow.tsx b/apps/app/src/components/sidebar/ThreadRow.tsx
index c29e30a7b2..c0e9ed1204 100644
--- a/apps/app/src/components/sidebar/ThreadRow.tsx
+++ b/apps/app/src/components/sidebar/ThreadRow.tsx
@@ -751,7 +751,7 @@ function ThreadRowComponent({
                 // Sits above the row's full-size link so it can take hover;
                 // nudged 1px down so the glyph reads centered on the text.
                 // A click still opens the thread by forwarding to the link.
-                className="relative top-px z-10 flex shrink-0 items-center text-muted-foreground"
+                className="relative top-px z-10 flex shrink-0 items-center text-muted-foreground/75"
                 onClick={(event) => {
                   event.preventDefault();
                   event.stopPropagation();
diff --git a/apps/app/src/components/sidebar/TopLevelSidebarSection.tsx b/apps/app/src/components/sidebar/TopLevelSidebarSection.tsx
index c9125e34b6..9140387f65 100644
--- a/apps/app/src/components/sidebar/TopLevelSidebarSection.tsx
+++ b/apps/app/src/components/sidebar/TopLevelSidebarSection.tsx
@@ -167,7 +167,7 @@ export function TopLevelSidebarSection({
               }
               className={cn(
                 !collapseControl.isCollapsed && SIDEBAR_HOVER_ACTIONS_CLASS,
-                "relative z-20 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-subtle-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2",
+                "relative z-20 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-subtle-foreground/75 outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2",
                 LIST_HOVER_TRANSITION,
               )}
               onClick={handleCollapseControlClick}

From bc6a423bb63ec3f2fac1a8297ad97d269009f48f Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Thu, 27 Aug 2026 14:55:05 -0700
Subject: [PATCH 2/4] Remove unapproved sidebar section actions

---
 .../src/components/sidebar/ProjectList.tsx    | 74 ++++---------------
 .../sidebar/ProjectListSectionHeader.test.tsx | 33 ---------
 .../sidebar/ProjectRow.interactions.test.tsx  | 57 --------------
 .../app/src/components/sidebar/ProjectRow.tsx | 22 +-----
 4 files changed, 15 insertions(+), 171 deletions(-)

diff --git a/apps/app/src/components/sidebar/ProjectList.tsx b/apps/app/src/components/sidebar/ProjectList.tsx
index 7d5afea86f..b6283fa31d 100644
--- a/apps/app/src/components/sidebar/ProjectList.tsx
+++ b/apps/app/src/components/sidebar/ProjectList.tsx
@@ -209,12 +209,6 @@ interface ProjectListThreadsSectionActionsProps {
   onNewThread: () => void;
 }
 
-interface ProjectListManualPinnedSectionActionsProps {
-  displayOptions: ReactNode;
-  isCreatingSection: boolean;
-  onNewSection?: () => void;
-}
-
 interface SidebarDisplayOptionsMenuProps {
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
@@ -570,10 +564,20 @@ function ProjectListThreadsSectionActions({
 }: ProjectListThreadsSectionActionsProps) {
   return (
     <>
-      <ProjectListNewSectionAction
-        isCreatingSection={isCreatingSection}
-        onNewSection={onNewSection}
-      />
+      {onNewSection ? (
+        <ProjectListSectionIconButton
+          ariaLabel="New section"
+          title="New section"
+          disabled={isCreatingSection}
+          icon={
+            <Icon
+              name="SectionAdd"
+              className={COARSE_POINTER_ICON_SIZE_CLASS}
+            />
+          }
+          onClick={onNewSection}
+        />
+      ) : null}
       <ProjectListSectionIconButton
         ariaLabel="New thread"
         title="New thread"
@@ -589,42 +593,6 @@ function ProjectListThreadsSectionActions({
   );
 }
 
-function ProjectListNewSectionAction({
-  isCreatingSection,
-  onNewSection,
-}: Pick<
-  ProjectListThreadsSectionActionsProps,
-  "isCreatingSection" | "onNewSection"
->) {
-  return onNewSection ? (
-    <ProjectListSectionIconButton
-      ariaLabel="New section"
-      title="New section"
-      disabled={isCreatingSection}
-      icon={
-        <Icon name="SectionAdd" className={COARSE_POINTER_ICON_SIZE_CLASS} />
-      }
-      onClick={onNewSection}
-    />
-  ) : null;
-}
-
-export function ProjectListManualPinnedSectionActions({
-  displayOptions,
-  isCreatingSection,
-  onNewSection,
-}: ProjectListManualPinnedSectionActionsProps) {
-  return (
-    <>
-      {displayOptions}
-      <ProjectListNewSectionAction
-        isCreatingSection={isCreatingSection}
-        onNewSection={onNewSection}
-      />
-    </>
-  );
-}
-
 const SIDEBAR_ORGANIZE_OPTIONS = [
   { icon: "Folder", label: "By project", mode: "project" },
   { icon: "Laptop", label: "By machine", mode: "machine" },
@@ -1277,7 +1245,6 @@ interface SectionModeSectionsProps
   compareThreads: ThreadComparator;
   sections: readonly SidebarSectionDefinition[];
   isReady: boolean;
-  onCreateSection: () => void;
   onCreateThreadInSection: (sectionId: string) => void;
   onProjectSelect?: () => void;
   onRemoveSection: (section: SidebarSectionDefinition) => void;
@@ -1307,7 +1274,6 @@ function SectionModeSections({
   effectivePinnedThreadIds,
   sections,
   isReady,
-  onCreateSection,
   onCreateThreadInSection,
   onProjectSelect,
   onRemoveSection,
@@ -1357,7 +1323,6 @@ function SectionModeSections({
       collapsedThreadIds={collapsedThreadIds}
       collapsedEnvironmentIds={collapsedEnvironmentIds}
       onProjectSelect={onProjectSelect}
-      onCreateSection={onCreateSection}
       onCreateThreadInSection={onCreateThreadInSection}
       onRenameSection={onRenameSection}
       onRemoveSection={onRemoveSection}
@@ -2086,16 +2051,6 @@ function ProjectListComponent({
     collapsedThreads: pinnedSectionThreads,
     label: "Pinned",
     content: pinnedSectionContent,
-    actions: (
-      <ProjectListManualPinnedSectionActions
-        displayOptions={null}
-        isCreatingSection={isCreateThreadSectionPending}
-        onNewSection={
-          isSectionOrganizationMode ? handleOpenCreateSectionDialog : undefined
-        }
-      />
-    ),
-    actionsOpen: false,
   };
   const threadsSection = {
     label: "Threads",
@@ -2223,7 +2178,6 @@ function ProjectListComponent({
                   displayOptions={displayOptionsMenu}
                   displayOptionsOpen={displayOptionsOpen}
                   onProjectSelect={onProjectSelect}
-                  onCreateSection={handleOpenCreateSectionDialog}
                   onCreateThreadInSection={handleCreateThreadInSection}
                   onRenameSection={handleOpenRenameThreadSection}
                   onRemoveSection={handleRemoveThreadSection}
diff --git a/apps/app/src/components/sidebar/ProjectListSectionHeader.test.tsx b/apps/app/src/components/sidebar/ProjectListSectionHeader.test.tsx
index 2376ffadd1..e5a2b66cd5 100644
--- a/apps/app/src/components/sidebar/ProjectListSectionHeader.test.tsx
+++ b/apps/app/src/components/sidebar/ProjectListSectionHeader.test.tsx
@@ -18,7 +18,6 @@ import {
   setPluginThreadRowStatus,
 } from "@/lib/plugin-thread-row-status";
 import {
-  ProjectListManualPinnedSectionActions,
   ProjectListSectionIconButton,
   TopLevelSidebarSection,
 } from "./ProjectList";
@@ -77,38 +76,6 @@ describe("ProjectListSectionIconButton", () => {
   });
 });
 
-describe("ProjectListManualPinnedSectionActions", () => {
-  it("offers the shared New section action only in Manual view", () => {
-    const onNewSection = vi.fn();
-    const result = render(
-      <TooltipProvider>
-        <ProjectListManualPinnedSectionActions
-          displayOptions={<span>Display options</span>}
-          isCreatingSection={false}
-          onNewSection={onNewSection}
-        />
-      </TooltipProvider>,
-    );
-
-    expect(screen.getByText("Display options")).not.toBeNull();
-    const newSection = screen.getByRole("button", { name: "New section" });
-    expect(newSection.querySelector('[data-icon="SectionAdd"]')).not.toBeNull();
-
-    fireEvent.click(newSection);
-    expect(onNewSection).toHaveBeenCalledOnce();
-
-    result.rerender(
-      <TooltipProvider>
-        <ProjectListManualPinnedSectionActions
-          displayOptions={<span>Display options</span>}
-          isCreatingSection={false}
-        />
-      </TooltipProvider>,
-    );
-    expect(screen.queryByRole("button", { name: "New section" })).toBeNull();
-  });
-});
-
 describe("TopLevelSidebarSection", () => {
   it("exposes stable identity only for persisted sections", () => {
     const result = render(
diff --git a/apps/app/src/components/sidebar/ProjectRow.interactions.test.tsx b/apps/app/src/components/sidebar/ProjectRow.interactions.test.tsx
index aefc6fbcee..db50319db8 100644
--- a/apps/app/src/components/sidebar/ProjectRow.interactions.test.tsx
+++ b/apps/app/src/components/sidebar/ProjectRow.interactions.test.tsx
@@ -428,63 +428,6 @@ describe("ProjectRow interactions", () => {
     expect(screen.queryByLabelText("Plan mode active")).toBeNull();
   });
 
-  it("offers New section from a Manual-view section menu", async () => {
-    const store = createStore();
-    const queryClient = new QueryClient();
-    const sectionId = "sec_actions";
-    const onCreateSection = vi.fn();
-    const onRenameSection = vi.fn();
-    const onRemoveSection = vi.fn();
-
-    render(
-      <TooltipProvider>
-        <Provider store={store}>
-          <QueryClientProvider client={queryClient}>
-            <MemoryRouter>
-              <ChronologicalSectionThreadSections
-                threadListState={{
-                  status: "ready",
-                  threads: [makeThread({ sectionId })],
-                }}
-                compareThreads={() => 0}
-                sections={[{ id: sectionId, name: "Actionable" }]}
-                collapsedThreadIds={new Set()}
-                collapsedEnvironmentIds={new Set()}
-                onCreateSection={onCreateSection}
-                onRenameSection={onRenameSection}
-                onRemoveSection={onRemoveSection}
-                onToggleThreadCollapsed={vi.fn()}
-                onToggleEnvironmentCollapsed={vi.fn()}
-                topLevelSectionOrder={[
-                  buildSidebarEntitySectionId("section", sectionId),
-                ]}
-                onTopLevelSectionOrderChange={vi.fn()}
-                pinnedReorderPending={false}
-                pinnedThreads={[]}
-                onReorderPinnedThread={vi.fn()}
-              />
-            </MemoryRouter>
-          </QueryClientProvider>
-        </Provider>
-      </TooltipProvider>,
-    );
-
-    fireEvent.pointerDown(
-      screen.getByRole("button", { name: "Actionable section actions" }),
-      { button: 0 },
-    );
-
-    const newSection = await screen.findByRole("menuitem", {
-      name: "New section",
-    });
-    expect(newSection.querySelector('[data-icon="SectionAdd"]')).not.toBeNull();
-    expect(screen.getByRole("menuitem", { name: "Rename" })).not.toBeNull();
-    expect(screen.getByRole("menuitem", { name: "Remove" })).not.toBeNull();
-
-    fireEvent.click(newSection);
-    expect(onCreateSection).toHaveBeenCalledOnce();
-  });
-
   it("surfaces named activity when the project is collapsed", () => {
     renderProjectRow(
       vi.fn(),
diff --git a/apps/app/src/components/sidebar/ProjectRow.tsx b/apps/app/src/components/sidebar/ProjectRow.tsx
index c544419b3b..f280c5bca1 100644
--- a/apps/app/src/components/sidebar/ProjectRow.tsx
+++ b/apps/app/src/components/sidebar/ProjectRow.tsx
@@ -201,7 +201,6 @@ interface SectionThreadTreeProps {
   collapsedThreadIds: Set<string>;
   collapsedEnvironmentIds: Set<string>;
   onProjectSelect?: () => void;
-  onCreateSection?: () => void;
   onCreateThreadInSection?: (sectionId: string) => void;
   onRenameSection?: (section: SidebarSectionDefinition) => void;
   onRemoveSection?: (section: SidebarSectionDefinition) => void;
@@ -303,7 +302,6 @@ interface ThreadTreeItemRowProps {
   collapsedEnvironmentIds: Set<string>;
   variant: ProjectThreadTreeVariant;
   onProjectSelect?: () => void;
-  onCreateSection?: () => void;
   onCreateThreadInSection?: (sectionId: string) => void;
   onRenameSection?: (section: SidebarSectionDefinition) => void;
   onRemoveSection?: (section: SidebarSectionDefinition) => void;
@@ -326,7 +324,6 @@ interface SectionTreeItemRowProps {
   collapsedEnvironmentIds: Set<string>;
   variant: ProjectThreadTreeVariant;
   onProjectSelect?: () => void;
-  onCreateSection?: () => void;
   onCreateThreadInSection?: (sectionId: string) => void;
   onRenameSection?: (section: SidebarSectionDefinition) => void;
   onRemoveSection?: (section: SidebarSectionDefinition) => void;
@@ -1196,7 +1193,6 @@ const ThreadTreeItemRow = memo(function ThreadTreeItemRow({
   collapsedEnvironmentIds,
   variant,
   onProjectSelect,
-  onCreateSection,
   onCreateThreadInSection,
   onRenameSection,
   onRemoveSection,
@@ -1220,7 +1216,6 @@ const ThreadTreeItemRow = memo(function ThreadTreeItemRow({
         collapsedEnvironmentIds={collapsedEnvironmentIds}
         variant={variant}
         onProjectSelect={onProjectSelect}
-        onCreateSection={onCreateSection}
         onCreateThreadInSection={onCreateThreadInSection}
         onRenameSection={onRenameSection}
         onRemoveSection={onRemoveSection}
@@ -1342,7 +1337,6 @@ const SectionTreeItemRow = memo(function SectionTreeItemRow({
   collapsedEnvironmentIds,
   variant,
   onProjectSelect,
-  onCreateSection,
   onCreateThreadInSection,
   onRenameSection,
   onRemoveSection,
@@ -1426,7 +1420,6 @@ const SectionTreeItemRow = memo(function SectionTreeItemRow({
                   collapsedEnvironmentIds={collapsedEnvironmentIds}
                   variant={variant}
                   onProjectSelect={onProjectSelect}
-                  onCreateSection={onCreateSection}
                   onCreateThreadInSection={onCreateThreadInSection}
                   onRenameSection={onRenameSection}
                   onRemoveSection={onRemoveSection}
@@ -1455,9 +1448,7 @@ const SectionTreeItemRow = memo(function SectionTreeItemRow({
 
   if (variant === "section" && depthOffset === 0) {
     const externalHeaderActions = renderTopLevelSectionHeaderActions?.(section);
-    const hasMenuActions = Boolean(
-      onCreateSection || onRenameSection || onRemoveSection,
-    );
+    const hasMenuActions = Boolean(onRenameSection || onRemoveSection);
     const hasTopLevelActions = Boolean(
       externalHeaderActions?.actions ||
       hasMenuActions ||
@@ -1488,12 +1479,6 @@ const SectionTreeItemRow = memo(function SectionTreeItemRow({
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
-              {onCreateSection ? (
-                <DropdownMenuItem onSelect={onCreateSection}>
-                  <Icon name="SectionAdd" aria-hidden="true" />
-                  New section
-                </DropdownMenuItem>
-              ) : null}
               {onRenameSection ? (
                 <DropdownMenuItem onSelect={() => onRenameSection(section)}>
                   <Icon name="Edit" aria-hidden="true" />
@@ -1770,7 +1755,6 @@ interface SectionThreadTreeItemsProps {
   onProjectSelect?: () => void;
   onToggleThreadCollapsed: (threadId: string) => void;
   onToggleEnvironmentCollapsed: (environmentId: string) => void;
-  onCreateSection?: () => void;
   onCreateThreadInSection?: (sectionId: string) => void;
   onRenameSection?: (section: SidebarSectionDefinition) => void;
   onRemoveSection?: (section: SidebarSectionDefinition) => void;
@@ -1847,7 +1831,6 @@ function SectionThreadTreeItems({
   onProjectSelect,
   onToggleThreadCollapsed,
   onToggleEnvironmentCollapsed,
-  onCreateSection,
   onCreateThreadInSection,
   onRenameSection,
   onRemoveSection,
@@ -1884,7 +1867,6 @@ function SectionThreadTreeItems({
             onProjectSelect={onProjectSelect}
             onToggleThreadCollapsed={onToggleThreadCollapsed}
             onToggleEnvironmentCollapsed={onToggleEnvironmentCollapsed}
-            onCreateSection={onCreateSection}
             onCreateThreadInSection={onCreateThreadInSection}
             onRenameSection={onRenameSection}
             onRemoveSection={onRemoveSection}
@@ -1998,7 +1980,6 @@ export const ChronologicalSectionThreadSections = memo(
     collapsedThreadIds,
     collapsedEnvironmentIds,
     onProjectSelect,
-    onCreateSection,
     onCreateThreadInSection,
     onRenameSection,
     onRemoveSection,
@@ -2133,7 +2114,6 @@ export const ChronologicalSectionThreadSections = memo(
         onProjectSelect={onProjectSelect}
         onToggleThreadCollapsed={onToggleThreadCollapsed}
         onToggleEnvironmentCollapsed={onToggleEnvironmentCollapsed}
-        onCreateSection={onCreateSection}
         onCreateThreadInSection={onCreateThreadInSection}
         onRenameSection={onRenameSection}
         onRemoveSection={onRemoveSection}

From 68535c5f38d59ca5c78a4f034e3fe95768d8e0b9 Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Thu, 27 Aug 2026 15:36:27 -0700
Subject: [PATCH 3/4] Use approved plugin detail page label

---
 apps/app/src/components/plugin/PluginNavSidebarItems.test.tsx | 4 ++--
 apps/app/src/components/plugin/PluginNavSidebarItems.tsx      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/app/src/components/plugin/PluginNavSidebarItems.test.tsx b/apps/app/src/components/plugin/PluginNavSidebarItems.test.tsx
index b3c01d7d76..58a8365a89 100644
--- a/apps/app/src/components/plugin/PluginNavSidebarItems.test.tsx
+++ b/apps/app/src/components/plugin/PluginNavSidebarItems.test.tsx
@@ -306,7 +306,7 @@ describe("PluginNavSidebarItems", () => {
       ["Move to top", "ArrowUp"],
       ["Move to overflow", "ArrowDown"],
       ["Open in split", "Columns2"],
-      ["Plugin details", "Info"],
+      ["Detail page", "Info"],
       ["Disable", "Pause"],
     ] as const;
     expect(
@@ -349,7 +349,7 @@ describe("PluginNavSidebarItems", () => {
       screen.queryByRole("menuitem", { name: "Open in split" }),
     ).toBeNull();
     fireEvent.click(
-      await screen.findByRole("menuitem", { name: "Plugin details" }),
+      await screen.findByRole("menuitem", { name: "Detail page" }),
     );
     expect(screen.getByTestId("location-path").textContent).toBe(
       "/extensions/plugins/docs",
diff --git a/apps/app/src/components/plugin/PluginNavSidebarItems.tsx b/apps/app/src/components/plugin/PluginNavSidebarItems.tsx
index fd68ad8321..81756ab225 100644
--- a/apps/app/src/components/plugin/PluginNavSidebarItems.tsx
+++ b/apps/app/src/components/plugin/PluginNavSidebarItems.tsx
@@ -476,7 +476,7 @@ function PluginNavRowMenuItems({
         icon="Info"
         onSelect={onOpenDetails}
       >
-        Plugin details
+        Detail page
       </PluginNavRowMenuItem>
       <PluginNavRowMenuSeparator surface={surface} />
       <PluginNavRowMenuItem

From a9a46785839f654a030bddca27442aa986ab07f6 Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Thu, 27 Aug 2026 15:50:11 -0700
Subject: [PATCH 4/4] Provide plugin query client in integration tests

---
 .../plugin/plugin-slot-mounts.test.tsx        | 30 ++++++++++++++-----
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/apps/app/src/components/plugin/plugin-slot-mounts.test.tsx b/apps/app/src/components/plugin/plugin-slot-mounts.test.tsx
index 02764f698f..4c1c9592bc 100644
--- a/apps/app/src/components/plugin/plugin-slot-mounts.test.tsx
+++ b/apps/app/src/components/plugin/plugin-slot-mounts.test.tsx
@@ -1,7 +1,13 @@
 // @vitest-environment jsdom
 
 import { MemoryRouter, Route, Routes, useNavigate } from "react-router-dom";
-import { useLayoutEffect, useMemo, useRef, useState } from "react";
+import {
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
 import {
   act,
   cleanup,
@@ -10,6 +16,7 @@ import {
   screen,
 } from "@testing-library/react";
 import { createStore, Provider } from "jotai";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { PERSONAL_PROJECT_ID } from "@bb/domain";
 import type {
@@ -1258,6 +1265,15 @@ describe("useComposer", () => {
 });
 
 describe("PluginNavSidebarItems + PluginPanelView", () => {
+  function renderPluginNav(ui: ReactNode) {
+    const queryClient = new QueryClient({
+      defaultOptions: { queries: { retry: false } },
+    });
+    return render(
+      <QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>,
+    );
+  }
+
   function Board() {
     return <div>board panel body</div>;
   }
@@ -1282,7 +1298,7 @@ describe("PluginNavSidebarItems + PluginPanelView", () => {
   it("keeps built-in Automations out of the traditional plugin nav list", () => {
     registerAutomationsPanel();
 
-    render(
+    renderPluginNav(
       <MemoryRouter>
         <PluginNavSidebarItems />
       </MemoryRouter>,
@@ -1306,7 +1322,7 @@ describe("PluginNavSidebarItems + PluginPanelView", () => {
         ],
       }),
     );
-    render(
+    renderPluginNav(
       <MemoryRouter initialEntries={["/"]}>
         <PluginNavSidebarItems />
         <Routes>
@@ -1426,7 +1442,7 @@ describe("PluginNavSidebarItems + PluginPanelView", () => {
       },
     });
 
-    render(
+    renderPluginNav(
       <Provider store={store}>
         <MemoryRouter initialEntries={["/"]}>
           <PluginNavSidebarItems splitEnabled />
@@ -1456,7 +1472,7 @@ describe("PluginNavSidebarItems + PluginPanelView", () => {
         ],
       }),
     );
-    render(
+    renderPluginNav(
       <MemoryRouter
         initialEntries={[
           "/plugins/simple-notes/simple-notes/bb-plugin-marketplaces-and-compatible-updates.md",
@@ -1484,7 +1500,7 @@ describe("PluginNavSidebarItems + PluginPanelView", () => {
         icon: "columns",
       },
     ]);
-    render(
+    renderPluginNav(
       <MemoryRouter>
         <PluginNavSidebarItems />
       </MemoryRouter>,
@@ -1525,7 +1541,7 @@ describe("PluginNavSidebarItems + PluginPanelView", () => {
         icon: "columns",
       },
     ]);
-    render(
+    renderPluginNav(
       <MemoryRouter>
         <PluginNavSidebarItems />
       </MemoryRouter>,