From b1279705e549c4ba2254fc1ef23a7d80f1b108f8 Mon Sep 17 00:00:00 2001
From: Iliya Lyan <68940374+12ya@users.noreply.github.com>
Date: Sun, 12 Jul 2026 23:17:00 +0900
Subject: [PATCH 01/13] feat(sidebar): pin chats within projects

Persist pinned thread keys per logical project, keep pinned chats above the project's normal sort order, and separate pinned chats with a compact divider.
---
 apps/web/src/components/Sidebar.logic.test.ts |  13 ++
 apps/web/src/components/Sidebar.logic.ts      |  13 ++
 apps/web/src/components/Sidebar.tsx           | 119 ++++++++++++------
 apps/web/src/uiStateStore.test.ts             |  22 ++++
 apps/web/src/uiStateStore.ts                  |  37 ++++++
 5 files changed, 168 insertions(+), 36 deletions(-)

diff --git a/apps/web/src/components/Sidebar.logic.test.ts b/apps/web/src/components/Sidebar.logic.test.ts
index 574e33d4dab..f2f6b70aeb6 100644
--- a/apps/web/src/components/Sidebar.logic.test.ts
+++ b/apps/web/src/components/Sidebar.logic.test.ts
@@ -11,6 +11,7 @@ import {
   isContextMenuPointerDown,
   isTrailingDoubleClick,
   orderItemsByPreferredIds,
+  prioritizeThreadsByPinnedKeys,
   resolveProjectStatusIndicator,
   resolveSidebarNewThreadSeedContext,
   resolveSidebarNewThreadEnvMode,
@@ -37,6 +38,18 @@ import {
 
 const localEnvironmentId = EnvironmentId.make("environment-local");
 
+describe("prioritizeThreadsByPinnedKeys", () => {
+  it("moves only pinned threads to the front while preserving the current sort order", () => {
+    const threads = [{ id: "newest" }, { id: "pinned" }, { id: "oldest" }];
+
+    expect(prioritizeThreadsByPinnedKeys(threads, ["pinned"], (thread) => thread.id)).toEqual([
+      { id: "pinned" },
+      { id: "newest" },
+      { id: "oldest" },
+    ]);
+  });
+});
+
 describe("resolveSidebarStageBadgeLabel", () => {
   it("returns Nightly for nightly primary server versions", () => {
     expect(
diff --git a/apps/web/src/components/Sidebar.logic.ts b/apps/web/src/components/Sidebar.logic.ts
index 4e7614ed551..1ebea4a391b 100644
--- a/apps/web/src/components/Sidebar.logic.ts
+++ b/apps/web/src/components/Sidebar.logic.ts
@@ -26,6 +26,19 @@ type SidebarProject = {
 
 export type ThreadTraversalDirection = "previous" | "next";
 
+export function prioritizeThreadsByPinnedKeys<T>(
+  threads: readonly T[],
+  pinnedKeys: readonly string[],
+  getKey: (thread: T) => string,
+): T[] {
+  if (pinnedKeys.length === 0) return [...threads];
+  const pinned = new Set(pinnedKeys);
+  return [
+    ...threads.filter((thread) => pinned.has(getKey(thread))),
+    ...threads.filter((thread) => !pinned.has(getKey(thread))),
+  ];
+}
+
 export interface ThreadStatusPill {
   label:
     | "Working"
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 21525b56b77..7a28f88256e 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -195,6 +195,7 @@ import {
   resolveThreadRowClassName,
   resolveThreadStatusPill,
   orderItemsByPreferredIds,
+  prioritizeThreadsByPinnedKeys,
   shouldClearThreadSelectionOnMouseDown,
   sortProjectsForSidebar,
   useThreadJumpHintVisibility,
@@ -898,6 +899,7 @@ interface SidebarProjectThreadListProps {
   projectCwd: string;
   activeRouteThreadKey: string | null;
   threadJumpLabelByKey: ReadonlyMap<string, string>;
+  pinnedThreadKeys: readonly string[];
   appSettingsConfirmThreadArchive: boolean;
   renamingThreadKey: string | null;
   renamingTitle: string;
@@ -949,6 +951,7 @@ const SidebarProjectThreadList = memo(function SidebarProjectThreadList(
     projectCwd,
     activeRouteThreadKey,
     threadJumpLabelByKey,
+    pinnedThreadKeys,
     appSettingsConfirmThreadArchive,
     renamingThreadKey,
     renamingTitle,
@@ -991,36 +994,53 @@ const SidebarProjectThreadList = memo(function SidebarProjectThreadList(
         </SidebarMenuSubItem>
       ) : null}
       {shouldShowThreadPanel &&
-        renderedThreads.map((thread) => {
+        renderedThreads.map((thread, index) => {
           const threadKey = scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id));
+          const showPinnedSeparator =
+            index > 0 &&
+            pinnedThreadKeys.includes(
+              scopedThreadKey(
+                scopeThreadRef(
+                  renderedThreads[index - 1]!.environmentId,
+                  renderedThreads[index - 1]!.id,
+                ),
+              ),
+            ) &&
+            !pinnedThreadKeys.includes(threadKey);
           return (
-            <SidebarThreadRow
-              key={threadKey}
-              thread={thread}
-              projectCwd={projectCwd}
-              orderedProjectThreadKeys={orderedProjectThreadKeys}
-              isActive={activeRouteThreadKey === threadKey}
-              jumpLabel={threadJumpLabelByKey.get(threadKey) ?? null}
-              appSettingsConfirmThreadArchive={appSettingsConfirmThreadArchive}
-              renamingThreadKey={renamingThreadKey}
-              renamingTitle={renamingTitle}
-              setRenamingTitle={setRenamingTitle}
-              startThreadRename={startThreadRename}
-              renamingInputRef={renamingInputRef}
-              renamingCommittedRef={renamingCommittedRef}
-              confirmingArchiveThreadKey={confirmingArchiveThreadKey}
-              setConfirmingArchiveThreadKey={setConfirmingArchiveThreadKey}
-              confirmArchiveButtonRefs={confirmArchiveButtonRefs}
-              handleThreadClick={handleThreadClick}
-              navigateToThread={navigateToThread}
-              handleMultiSelectContextMenu={handleMultiSelectContextMenu}
-              handleThreadContextMenu={handleThreadContextMenu}
-              clearSelection={clearSelection}
-              commitRename={commitRename}
-              cancelRename={cancelRename}
-              attemptArchiveThread={attemptArchiveThread}
-              openPrLink={openPrLink}
-            />
+            <React.Fragment key={threadKey}>
+              {showPinnedSeparator && (
+                <SidebarMenuSubItem aria-hidden="true" className="h-1.5 w-full px-2">
+                  <div className="h-px w-full bg-linear-to-r from-transparent via-border/80 to-transparent" />
+                </SidebarMenuSubItem>
+              )}
+              <SidebarThreadRow
+                thread={thread}
+                projectCwd={projectCwd}
+                orderedProjectThreadKeys={orderedProjectThreadKeys}
+                isActive={activeRouteThreadKey === threadKey}
+                jumpLabel={threadJumpLabelByKey.get(threadKey) ?? null}
+                appSettingsConfirmThreadArchive={appSettingsConfirmThreadArchive}
+                renamingThreadKey={renamingThreadKey}
+                renamingTitle={renamingTitle}
+                setRenamingTitle={setRenamingTitle}
+                startThreadRename={startThreadRename}
+                renamingInputRef={renamingInputRef}
+                renamingCommittedRef={renamingCommittedRef}
+                confirmingArchiveThreadKey={confirmingArchiveThreadKey}
+                setConfirmingArchiveThreadKey={setConfirmingArchiveThreadKey}
+                confirmArchiveButtonRefs={confirmArchiveButtonRefs}
+                handleThreadClick={handleThreadClick}
+                navigateToThread={navigateToThread}
+                handleMultiSelectContextMenu={handleMultiSelectContextMenu}
+                handleThreadContextMenu={handleThreadContextMenu}
+                clearSelection={clearSelection}
+                commitRename={commitRename}
+                cancelRename={cancelRename}
+                attemptArchiveThread={attemptArchiveThread}
+                openPrLink={openPrLink}
+              />
+            </React.Fragment>
           );
         })}
 
@@ -1126,6 +1146,7 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
   const router = useRouter();
   const { isMobile, setOpenMobile } = useSidebar();
   const markThreadUnread = useUiStateStore((state) => state.markThreadUnread);
+  const setThreadPinned = useUiStateStore((state) => state.setThreadPinned);
   const setProjectExpanded = useUiStateStore((state) => state.setProjectExpanded);
   const toggleThreadSelection = useThreadSelectionStore((state) => state.toggleThread);
   const rangeSelectTo = useThreadSelectionStore((state) => state.rangeSelectTo);
@@ -1194,6 +1215,9 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
   const projectExpanded = useUiStateStore((state) =>
     resolveProjectExpanded(state.projectExpandedById, projectPreferenceKeys),
   );
+  const pinnedThreadKeys = useUiStateStore(
+    useShallow((state) => state.pinnedThreadKeysByProject[project.projectKey] ?? []),
+  );
   const threadLastVisitedAts = useUiStateStore(
     useShallow((state) =>
       projectThreads.map(
@@ -1263,9 +1287,13 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
         },
       });
     };
-    const visibleProjectThreads = sortThreads(
-      projectThreads.filter((thread) => thread.archivedAt === null),
-      threadSortOrder,
+    const visibleProjectThreads = prioritizeThreadsByPinnedKeys(
+      sortThreads(
+        projectThreads.filter((thread) => thread.archivedAt === null),
+        threadSortOrder,
+      ),
+      pinnedThreadKeys,
+      (thread) => scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id)),
     );
     const projectStatus = resolveProjectStatusIndicator(
       visibleProjectThreads.map((thread) => resolveProjectThreadStatus(thread)),
@@ -1277,7 +1305,7 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
       projectStatus,
       visibleProjectThreads,
     };
-  }, [projectThreads, threadLastVisitedAts, threadSortOrder]);
+  }, [pinnedThreadKeys, projectThreads, threadLastVisitedAts, threadSortOrder]);
   const pinnedCollapsedThread = useMemo(() => {
     const activeThreadKey = activeRouteThreadKey ?? undefined;
     if (!activeThreadKey || projectExpanded) {
@@ -2125,6 +2153,10 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
         thread.worktreePath ?? threadProject?.workspaceRoot ?? project.workspaceRoot ?? null;
       const clicked = await api.contextMenu.show(
         [
+          {
+            id: "toggle-pin",
+            label: pinnedThreadKeys.includes(threadKey) ? "Unpin from project" : "Pin in project",
+          },
           { id: "rename", label: "Rename thread" },
           { id: "mark-unread", label: "Mark unread" },
           { id: "copy-path", label: "Copy Path" },
@@ -2134,6 +2166,11 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
         position,
       );
 
+      if (clicked === "toggle-pin") {
+        setThreadPinned(project.projectKey, threadKey, !pinnedThreadKeys.includes(threadKey));
+        return;
+      }
+
       if (clicked === "rename") {
         startThreadRename(threadKey, thread.title);
         return;
@@ -2192,7 +2229,10 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
       deleteThread,
       markThreadUnread,
       memberProjectByScopedKey,
+      pinnedThreadKeys,
+      project.projectKey,
       project.workspaceRoot,
+      setThreadPinned,
       startThreadRename,
     ],
   );
@@ -2318,6 +2358,7 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
         projectCwd={project.workspaceRoot}
         activeRouteThreadKey={activeRouteThreadKey}
         threadJumpLabelByKey={threadJumpLabelByKey}
+        pinnedThreadKeys={pinnedThreadKeys}
         appSettingsConfirmThreadArchive={appSettingsConfirmThreadArchive}
         renamingThreadKey={renamingThreadKey}
         renamingTitle={renamingTitle}
@@ -3106,6 +3147,7 @@ export default function Sidebar() {
   const projects = useProjects();
   const sidebarThreads = useThreadShells();
   const projectExpandedById = useUiStateStore((store) => store.projectExpandedById);
+  const pinnedThreadKeysByProject = useUiStateStore((store) => store.pinnedThreadKeysByProject);
   const projectOrder = useUiStateStore((store) => store.projectOrder);
   const reorderProjects = useUiStateStore((store) => store.reorderProjects);
   const navigate = useNavigate();
@@ -3404,11 +3446,15 @@ export default function Sidebar() {
   const visibleSidebarThreadKeys = useMemo(
     () =>
       sortedProjects.flatMap((project) => {
-        const projectThreads = sortThreads(
-          (threadsByProjectKey.get(project.projectKey) ?? []).filter(
-            (thread) => thread.archivedAt === null,
+        const projectThreads = prioritizeThreadsByPinnedKeys(
+          sortThreads(
+            (threadsByProjectKey.get(project.projectKey) ?? []).filter(
+              (thread) => thread.archivedAt === null,
+            ),
+            sidebarThreadSortOrder,
           ),
-          sidebarThreadSortOrder,
+          pinnedThreadKeysByProject[project.projectKey] ?? [],
+          (thread) => scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id)),
         );
         const projectExpanded = resolveProjectExpanded(
           projectExpandedById,
@@ -3443,6 +3489,7 @@ export default function Sidebar() {
       sidebarThreadPreviewCount,
       expandedThreadListsByProject,
       projectExpandedById,
+      pinnedThreadKeysByProject,
       routeThreadKey,
       sortedProjects,
       threadsByProjectKey,
diff --git a/apps/web/src/uiStateStore.test.ts b/apps/web/src/uiStateStore.test.ts
index 0fbbd79ec27..223a1ccdb9f 100644
--- a/apps/web/src/uiStateStore.test.ts
+++ b/apps/web/src/uiStateStore.test.ts
@@ -14,6 +14,7 @@ import {
   setDefaultAdvertisedEndpointKey,
   setProjectExpanded,
   setThreadChangedFilesExpanded,
+  setThreadPinned,
   type UiState,
 } from "./uiStateStore";
 
@@ -23,12 +24,21 @@ function makeUiState(overrides: Partial<UiState> = {}): UiState {
     projectOrder: [],
     threadLastVisitedAtById: {},
     threadChangedFilesExpandedById: {},
+    pinnedThreadKeysByProject: {},
     defaultAdvertisedEndpointKey: null,
     ...overrides,
   };
 }
 
 describe("uiStateStore pure functions", () => {
+  it("keeps pinned threads scoped to their project", () => {
+    const pinned = setThreadPinned(makeUiState(), "project-a", "thread-1", true);
+    const otherProject = setThreadPinned(pinned, "project-b", "thread-2", true);
+    const unpinned = setThreadPinned(otherProject, "project-a", "thread-1", false);
+
+    expect(unpinned.pinnedThreadKeysByProject).toEqual({ "project-b": ["thread-2"] });
+  });
+
   it("stores server timestamps without moving visit state backwards", () => {
     const threadId = ThreadId.make("thread-1");
     const initialState = makeUiState();
@@ -161,6 +171,9 @@ describe("parsePersistedState", () => {
           "turn-2": true,
         },
       },
+      pinnedThreadKeysByProject: {
+        logical: ["environment:thread-1"],
+      },
     });
 
     expect(parsed).toEqual({
@@ -177,6 +190,9 @@ describe("parsePersistedState", () => {
           "turn-1": false,
         },
       },
+      pinnedThreadKeysByProject: {
+        logical: ["environment:thread-1"],
+      },
     });
   });
 
@@ -262,6 +278,9 @@ describe("uiStateStore persistence", () => {
         },
       },
       defaultAdvertisedEndpointKey: "desktop-core:lan:http",
+      pinnedThreadKeysByProject: {
+        logical: ["environment:thread-1"],
+      },
     });
 
     persistState(state);
@@ -283,6 +302,9 @@ describe("uiStateStore persistence", () => {
           "turn-1": false,
         },
       },
+      pinnedThreadKeysByProject: {
+        logical: ["environment:thread-1"],
+      },
     });
     expect(parsePersistedState(persisted)).toEqual({
       ...state,
diff --git a/apps/web/src/uiStateStore.ts b/apps/web/src/uiStateStore.ts
index 4a97f0542b4..7e62dab2648 100644
--- a/apps/web/src/uiStateStore.ts
+++ b/apps/web/src/uiStateStore.ts
@@ -25,6 +25,7 @@ export interface PersistedUiState {
   projectOrderCwds?: string[];
   defaultAdvertisedEndpointKey?: string | null;
   threadChangedFilesExpandedById?: Record<string, Record<string, boolean>>;
+  pinnedThreadKeysByProject?: Record<string, string[]>;
 }
 
 export interface UiProjectState {
@@ -35,6 +36,7 @@ export interface UiProjectState {
 export interface UiThreadState {
   threadLastVisitedAtById: Record<string, string>;
   threadChangedFilesExpandedById: Record<string, Record<string, boolean>>;
+  pinnedThreadKeysByProject: Record<string, string[]>;
 }
 
 export interface UiEndpointState {
@@ -48,6 +50,7 @@ const initialState: UiState = {
   projectOrder: [],
   threadLastVisitedAtById: {},
   threadChangedFilesExpandedById: {},
+  pinnedThreadKeysByProject: {},
   defaultAdvertisedEndpointKey: null,
 };
 
@@ -96,6 +99,16 @@ function sanitizeTimestampRecord(value: unknown): Record<string, string> {
   );
 }
 
+function sanitizeStringArrayRecord(value: unknown): Record<string, string[]> {
+  if (!value || typeof value !== "object") return {};
+  return Object.fromEntries(
+    Object.entries(value).flatMap(([key, entries]) => {
+      const sanitized = sanitizeStringArray(entries);
+      return key.length > 0 && sanitized.length > 0 ? [[key, sanitized]] : [];
+    }),
+  );
+}
+
 export function parsePersistedState(parsed: PersistedUiState): UiState {
   const projectExpandedById =
     parsed.projectExpandedById === undefined
@@ -127,6 +140,7 @@ export function parsePersistedState(parsed: PersistedUiState): UiState {
     threadChangedFilesExpandedById: sanitizePersistedThreadChangedFilesExpanded(
       parsed.threadChangedFilesExpandedById,
     ),
+    pinnedThreadKeysByProject: sanitizeStringArrayRecord(parsed.pinnedThreadKeysByProject),
     defaultAdvertisedEndpointKey:
       typeof parsed.defaultAdvertisedEndpointKey === "string" &&
       parsed.defaultAdvertisedEndpointKey.length > 0
@@ -211,6 +225,7 @@ export function persistState(state: UiState): void {
         threadLastVisitedAtById: state.threadLastVisitedAtById,
         defaultAdvertisedEndpointKey: state.defaultAdvertisedEndpointKey,
         threadChangedFilesExpandedById,
+        pinnedThreadKeysByProject: state.pinnedThreadKeysByProject,
       } satisfies PersistedUiState),
     );
     if (!legacyKeysCleanedUp) {
@@ -334,6 +349,25 @@ export function setDefaultAdvertisedEndpointKey(state: UiState, key: string | nu
   };
 }
 
+export function setThreadPinned(
+  state: UiState,
+  projectKey: string,
+  threadKey: string,
+  pinned: boolean,
+): UiState {
+  const current = state.pinnedThreadKeysByProject[projectKey] ?? [];
+  const isPinned = current.includes(threadKey);
+  if (isPinned === pinned) return state;
+
+  const nextProjectPins = pinned
+    ? [...current, threadKey]
+    : current.filter((key) => key !== threadKey);
+  const pinnedThreadKeysByProject = { ...state.pinnedThreadKeysByProject };
+  if (nextProjectPins.length === 0) delete pinnedThreadKeysByProject[projectKey];
+  else pinnedThreadKeysByProject[projectKey] = nextProjectPins;
+  return { ...state, pinnedThreadKeysByProject };
+}
+
 export function resolveProjectExpanded(
   projectExpandedById: Readonly<Record<string, boolean>>,
   preferenceKeys: readonly string[],
@@ -416,6 +450,7 @@ interface UiStateStore extends UiState {
   markThreadUnread: (threadId: string, latestTurnCompletedAt: string | null | undefined) => void;
   setThreadChangedFilesExpanded: (threadId: string, turnId: string, expanded: boolean) => void;
   setDefaultAdvertisedEndpointKey: (key: string | null) => void;
+  setThreadPinned: (projectKey: string, threadKey: string, pinned: boolean) => void;
   setProjectExpanded: (projectIds: string | readonly string[], expanded: boolean) => void;
   reorderProjects: (
     currentProjectOrder: readonly string[],
@@ -434,6 +469,8 @@ export const useUiStateStore = create<UiStateStore>((set) => ({
     set((state) => setThreadChangedFilesExpanded(state, threadId, turnId, expanded)),
   setDefaultAdvertisedEndpointKey: (key) =>
     set((state) => setDefaultAdvertisedEndpointKey(state, key)),
+  setThreadPinned: (projectKey, threadKey, pinned) =>
+    set((state) => setThreadPinned(state, projectKey, threadKey, pinned)),
   setProjectExpanded: (projectIds, expanded) =>
     set((state) => setProjectExpanded(state, projectIds, expanded)),
   reorderProjects: (currentProjectOrder, draggedProjectIds, targetProjectIds) =>

From 53a27cbfcc02f107e5154a24dafa4b990dc3a841 Mon Sep 17 00:00:00 2001
From: Iliya Lyan <68940374+12ya@users.noreply.github.com>
Date: Sun, 12 Jul 2026 23:26:33 +0900
Subject: [PATCH 02/13] feat(sidebar): pin threads with drag and drop

---
 apps/web/src/components/Sidebar.logic.test.ts |  52 +++
 apps/web/src/components/Sidebar.logic.ts      |  27 ++
 apps/web/src/components/Sidebar.tsx           | 333 +++++++++++++-----
 3 files changed, 316 insertions(+), 96 deletions(-)

diff --git a/apps/web/src/components/Sidebar.logic.test.ts b/apps/web/src/components/Sidebar.logic.test.ts
index f2f6b70aeb6..8a0d7afbdf2 100644
--- a/apps/web/src/components/Sidebar.logic.test.ts
+++ b/apps/web/src/components/Sidebar.logic.test.ts
@@ -19,6 +19,7 @@ import {
   resolveThreadRowClassName,
   resolveThreadStatusPill,
   shouldClearThreadSelectionOnMouseDown,
+  resolveThreadPinDropAction,
   sortProjectsForSidebar,
   THREAD_JUMP_HINT_SHOW_DELAY_MS,
 } from "./Sidebar.logic";
@@ -50,6 +51,57 @@ describe("prioritizeThreadsByPinnedKeys", () => {
   });
 });
 
+describe("resolveThreadPinDropAction", () => {
+  it("pins an unpinned thread dropped on its project's pin target", () => {
+    expect(
+      resolveThreadPinDropAction({
+        activeThreadKey: "thread-1",
+        overId: "project-a:pin-drop:thread-2",
+        pinDropPrefix: "project-a:pin-drop:",
+        unpinDropPrefix: "project-a:unpin-drop:",
+        dividerDropId: "project-a:pin-divider",
+        pinnedThreadKeys: [],
+      }),
+    ).toBe("pin");
+  });
+
+  it("unpins a pinned thread dropped in the regular thread area", () => {
+    expect(
+      resolveThreadPinDropAction({
+        activeThreadKey: "thread-1",
+        overId: "project-a:unpin-drop:thread-2",
+        pinDropPrefix: "project-a:pin-drop:",
+        unpinDropPrefix: "project-a:unpin-drop:",
+        dividerDropId: "project-a:pin-divider",
+        pinnedThreadKeys: ["thread-1"],
+      }),
+    ).toBe("unpin");
+  });
+
+  it("uses the divider to toggle based on the dragged thread's current state", () => {
+    expect(
+      resolveThreadPinDropAction({
+        activeThreadKey: "thread-1",
+        overId: "project-a:pin-divider",
+        pinDropPrefix: "project-a:pin-drop:",
+        unpinDropPrefix: "project-a:unpin-drop:",
+        dividerDropId: "project-a:pin-divider",
+        pinnedThreadKeys: ["thread-1"],
+      }),
+    ).toBe("unpin");
+    expect(
+      resolveThreadPinDropAction({
+        activeThreadKey: "thread-1",
+        overId: "project-a:pin-drop:thread-2",
+        pinDropPrefix: "project-a:pin-drop:",
+        unpinDropPrefix: "project-a:unpin-drop:",
+        dividerDropId: "project-a:pin-divider",
+        pinnedThreadKeys: [],
+      }),
+    ).toBe("pin");
+  });
+});
+
 describe("resolveSidebarStageBadgeLabel", () => {
   it("returns Nightly for nightly primary server versions", () => {
     expect(
diff --git a/apps/web/src/components/Sidebar.logic.ts b/apps/web/src/components/Sidebar.logic.ts
index 1ebea4a391b..e4c1c43cdec 100644
--- a/apps/web/src/components/Sidebar.logic.ts
+++ b/apps/web/src/components/Sidebar.logic.ts
@@ -39,6 +39,33 @@ export function prioritizeThreadsByPinnedKeys<T>(
   ];
 }
 
+export type ThreadPinDropAction = "pin" | "unpin";
+
+export function resolveThreadPinDropAction(input: {
+  activeThreadKey: string;
+  overId: string | null;
+  pinDropPrefix: string;
+  unpinDropPrefix: string;
+  dividerDropId: string;
+  pinnedThreadKeys: readonly string[];
+}): ThreadPinDropAction | null {
+  if (input.overId === null) return null;
+  const activeIsPinned = input.pinnedThreadKeys.includes(input.activeThreadKey);
+  if (
+    !activeIsPinned &&
+    (input.overId === input.dividerDropId || input.overId.startsWith(input.pinDropPrefix))
+  ) {
+    return "pin";
+  }
+  if (
+    activeIsPinned &&
+    (input.overId === input.dividerDropId || input.overId.startsWith(input.unpinDropPrefix))
+  ) {
+    return "unpin";
+  }
+  return null;
+}
+
 export interface ThreadStatusPill {
   label:
     | "Working"
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 7a28f88256e..a6948bca753 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -7,6 +7,8 @@ import {
   FolderPlusIcon,
   Globe2Icon,
   LoaderIcon,
+  PinIcon,
+  PinOffIcon,
   SearchIcon,
   SettingsIcon,
   SquarePenIcon,
@@ -30,10 +32,13 @@ import {
   DndContext,
   type DragCancelEvent,
   type CollisionDetection,
+  type DragOverEvent,
   PointerSensor,
   type DragStartEvent,
   closestCorners,
   pointerWithin,
+  useDraggable,
+  useDroppable,
   useSensor,
   useSensors,
   type DragEndEvent,
@@ -197,6 +202,8 @@ import {
   orderItemsByPreferredIds,
   prioritizeThreadsByPinnedKeys,
   shouldClearThreadSelectionOnMouseDown,
+  resolveThreadPinDropAction,
+  type ThreadPinDropAction,
   sortProjectsForSidebar,
   useThreadJumpHintVisibility,
   ThreadStatusPill,
@@ -324,6 +331,9 @@ interface SidebarThreadRowProps {
   orderedProjectThreadKeys: readonly string[];
   isActive: boolean;
   jumpLabel: string | null;
+  threadDropId: string;
+  isPinned: boolean;
+  togglePinned: (threadKey: string, pinned: boolean) => void;
   appSettingsConfirmThreadArchive: boolean;
   renamingThreadKey: string | null;
   renamingTitle: string;
@@ -361,6 +371,9 @@ export const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThr
     orderedProjectThreadKeys,
     isActive,
     jumpLabel,
+    threadDropId,
+    isPinned,
+    togglePinned,
     appSettingsConfirmThreadArchive,
     renamingThreadKey,
     renamingTitle,
@@ -384,6 +397,15 @@ export const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThr
   } = props;
   const threadRef = scopeThreadRef(thread.environmentId, thread.id);
   const threadKey = scopedThreadKey(threadRef);
+  const threadDrag = useDraggable({ id: threadKey });
+  const threadPinDrop = useDroppable({ id: threadDropId });
+  const setThreadDragDropRef = useCallback(
+    (node: HTMLLIElement | null) => {
+      threadDrag.setNodeRef(node);
+      threadPinDrop.setNodeRef(node);
+    },
+    [threadDrag, threadPinDrop],
+  );
   const lastVisitedAt = useUiStateStore((state) => state.threadLastVisitedAtById[threadKey]);
   const isSelected = useThreadSelectionStore((state) => state.selectedThreadKeys.has(threadKey));
   const runningTerminalIds = useThreadRunningTerminalIds({
@@ -668,10 +690,23 @@ export const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThr
     },
     [attemptArchiveThread, threadRef],
   );
+  const handleTogglePinnedClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+      togglePinned(threadKey, !isPinned);
+    },
+    [isPinned, threadKey, togglePinned],
+  );
   const rowButtonRender = useMemo(() => <div role="button" tabIndex={0} />, []);
 
   return (
     <SidebarMenuSubItem
+      ref={setThreadDragDropRef}
+      style={{
+        transform: CSS.Translate.toString(threadDrag.transform),
+        opacity: threadDrag.isDragging ? 0.55 : undefined,
+      }}
       className="w-full"
       data-thread-item
       onMouseLeave={handleMouseLeave}
@@ -690,6 +725,8 @@ export const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThr
         onDoubleClick={handleRowDoubleClick}
         onKeyDown={handleRowKeyDown}
         onContextMenu={handleRowContextMenu}
+        {...threadDrag.attributes}
+        {...threadDrag.listeners}
       >
         <div className="flex min-w-0 flex-1 items-center gap-1.5 text-left">
           {prStatus && (
@@ -782,6 +819,32 @@ export const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThr
               isRemoteThread ? "max-sm:min-w-24" : "max-sm:min-w-20"
             }`}
           >
+            {!isConfirmingArchive && (
+              <Tooltip>
+                <TooltipTrigger
+                  render={
+                    <div className="pointer-events-none absolute top-1/2 right-7 -translate-y-1/2 opacity-0 transition-opacity duration-150 max-sm:pointer-events-auto max-sm:opacity-100 group-hover/menu-sub-item:pointer-events-auto group-hover/menu-sub-item:opacity-100 group-focus-within/menu-sub-item:pointer-events-auto group-focus-within/menu-sub-item:opacity-100">
+                      <button
+                        type="button"
+                        data-thread-selection-safe
+                        data-testid={`thread-pin-${thread.id}`}
+                        aria-label={`${isPinned ? "Unpin" : "Pin"} ${thread.title}`}
+                        className={SIDEBAR_ICON_ACTION_BUTTON_CLASS}
+                        onPointerDown={stopPropagationOnPointerDown}
+                        onClick={handleTogglePinnedClick}
+                      >
+                        {isPinned ? (
+                          <PinOffIcon className="size-3.5" />
+                        ) : (
+                          <PinIcon className="size-3.5" />
+                        )}
+                      </button>
+                    </div>
+                  }
+                />
+                <TooltipPopup side="top">{isPinned ? "Unpin" : "Pin"}</TooltipPopup>
+              </Tooltip>
+            )}
             {isConfirmingArchive ? (
               <button
                 ref={handleConfirmArchiveRef}
@@ -900,6 +963,7 @@ interface SidebarProjectThreadListProps {
   activeRouteThreadKey: string | null;
   threadJumpLabelByKey: ReadonlyMap<string, string>;
   pinnedThreadKeys: readonly string[];
+  toggleThreadPinned: (threadKey: string, pinned: boolean) => void;
   appSettingsConfirmThreadArchive: boolean;
   renamingThreadKey: string | null;
   renamingTitle: string;
@@ -935,6 +999,25 @@ interface SidebarProjectThreadListProps {
   collapseThreadListForProject: (projectKey: string) => void;
 }
 
+function SidebarPinnedDivider({ id, flow }: { id: string; flow: ThreadPinDropAction | null }) {
+  const { setNodeRef } = useDroppable({ id });
+  const colorClass =
+    flow === "pin"
+      ? "text-emerald-500 before:bg-emerald-500/70 after:bg-emerald-500/70"
+      : flow === "unpin"
+        ? "text-amber-500 before:bg-amber-500/70 after:bg-amber-500/70"
+        : "text-muted-foreground/45 before:bg-border/80 after:bg-border/80";
+  return (
+    <SidebarMenuSubItem
+      ref={setNodeRef}
+      aria-hidden="true"
+      className={`flex h-3 w-full items-center gap-1.5 px-2 transition-colors before:h-px before:flex-1 after:h-px after:flex-1 ${colorClass}`}
+    >
+      <PinIcon className="size-2.5 shrink-0 transition-colors" />
+    </SidebarMenuSubItem>
+  );
+}
+
 const SidebarProjectThreadList = memo(function SidebarProjectThreadList(
   props: SidebarProjectThreadListProps,
 ) {
@@ -952,6 +1035,7 @@ const SidebarProjectThreadList = memo(function SidebarProjectThreadList(
     activeRouteThreadKey,
     threadJumpLabelByKey,
     pinnedThreadKeys,
+    toggleThreadPinned,
     appSettingsConfirmThreadArchive,
     renamingThreadKey,
     renamingTitle,
@@ -977,107 +1061,159 @@ const SidebarProjectThreadList = memo(function SidebarProjectThreadList(
   } = props;
   const showMoreButtonRender = useMemo(() => <button type="button" />, []);
   const showLessButtonRender = useMemo(() => <button type="button" />, []);
+  const threadDragSensor = useSensor(PointerSensor, { activationConstraint: { distance: 6 } });
+  const threadDragSensors = useSensors(threadDragSensor);
+  const pinDropPrefix = `${projectKey}:pin-drop:`;
+  const unpinDropPrefix = `${projectKey}:unpin-drop:`;
+  const dividerDropId = `${projectKey}:pin-divider`;
+  const [dragFlow, setDragFlow] = useState<ThreadPinDropAction | null>(null);
+
+  const resolveDropAction = useCallback(
+    (activeThreadKey: string, overId: string | null) =>
+      resolveThreadPinDropAction({
+        activeThreadKey,
+        overId,
+        pinDropPrefix,
+        unpinDropPrefix,
+        dividerDropId,
+        pinnedThreadKeys,
+      }),
+    [dividerDropId, pinDropPrefix, pinnedThreadKeys, unpinDropPrefix],
+  );
+
+  const handleThreadDragOver = useCallback(
+    (event: DragOverEvent) => {
+      setDragFlow(
+        resolveDropAction(String(event.active.id), event.over ? String(event.over.id) : null),
+      );
+    },
+    [resolveDropAction],
+  );
+
+  const handleThreadDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const activeThreadKey = String(event.active.id);
+      const action = resolveDropAction(activeThreadKey, event.over ? String(event.over.id) : null);
+      setDragFlow(null);
+      if (action !== null) {
+        toggleThreadPinned(activeThreadKey, action === "pin");
+      }
+    },
+    [resolveDropAction, toggleThreadPinned],
+  );
 
   return (
-    <SidebarMenuSub
-      ref={attachThreadListAutoAnimateRef}
-      className="mx-0.5 my-0 w-full translate-x-0 gap-0.5 overflow-hidden px-1 py-0 sm:mx-1 sm:px-1.5"
+    <DndContext
+      sensors={threadDragSensors}
+      collisionDetection={pointerWithin}
+      onDragOver={handleThreadDragOver}
+      onDragCancel={() => setDragFlow(null)}
+      onDragEnd={handleThreadDragEnd}
     >
-      {shouldShowThreadPanel && showEmptyThreadState ? (
-        <SidebarMenuSubItem className="w-full" data-thread-selection-safe>
-          <div
-            data-thread-selection-safe
-            className="flex h-6 w-full translate-x-0 items-center px-2 text-left text-[10px] text-muted-foreground/60"
-          >
-            <span>No threads yet</span>
-          </div>
-        </SidebarMenuSubItem>
-      ) : null}
-      {shouldShowThreadPanel &&
-        renderedThreads.map((thread, index) => {
-          const threadKey = scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id));
-          const showPinnedSeparator =
-            index > 0 &&
-            pinnedThreadKeys.includes(
-              scopedThreadKey(
-                scopeThreadRef(
-                  renderedThreads[index - 1]!.environmentId,
-                  renderedThreads[index - 1]!.id,
+      <SidebarMenuSub
+        ref={attachThreadListAutoAnimateRef}
+        className="mx-0.5 my-0 w-full translate-x-0 gap-0.5 overflow-hidden px-1 py-0 sm:mx-1 sm:px-1.5"
+      >
+        {shouldShowThreadPanel && showEmptyThreadState ? (
+          <SidebarMenuSubItem className="w-full" data-thread-selection-safe>
+            <div
+              data-thread-selection-safe
+              className="flex h-6 w-full translate-x-0 items-center px-2 text-left text-[10px] text-muted-foreground/60"
+            >
+              <span>No threads yet</span>
+            </div>
+          </SidebarMenuSubItem>
+        ) : null}
+        {shouldShowThreadPanel &&
+          renderedThreads.map((thread, index) => {
+            const threadKey = scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id));
+            const showPinnedSeparator =
+              index > 0 &&
+              pinnedThreadKeys.includes(
+                scopedThreadKey(
+                  scopeThreadRef(
+                    renderedThreads[index - 1]!.environmentId,
+                    renderedThreads[index - 1]!.id,
+                  ),
                 ),
-              ),
-            ) &&
-            !pinnedThreadKeys.includes(threadKey);
-          return (
-            <React.Fragment key={threadKey}>
-              {showPinnedSeparator && (
-                <SidebarMenuSubItem aria-hidden="true" className="h-1.5 w-full px-2">
-                  <div className="h-px w-full bg-linear-to-r from-transparent via-border/80 to-transparent" />
-                </SidebarMenuSubItem>
-              )}
-              <SidebarThreadRow
-                thread={thread}
-                projectCwd={projectCwd}
-                orderedProjectThreadKeys={orderedProjectThreadKeys}
-                isActive={activeRouteThreadKey === threadKey}
-                jumpLabel={threadJumpLabelByKey.get(threadKey) ?? null}
-                appSettingsConfirmThreadArchive={appSettingsConfirmThreadArchive}
-                renamingThreadKey={renamingThreadKey}
-                renamingTitle={renamingTitle}
-                setRenamingTitle={setRenamingTitle}
-                startThreadRename={startThreadRename}
-                renamingInputRef={renamingInputRef}
-                renamingCommittedRef={renamingCommittedRef}
-                confirmingArchiveThreadKey={confirmingArchiveThreadKey}
-                setConfirmingArchiveThreadKey={setConfirmingArchiveThreadKey}
-                confirmArchiveButtonRefs={confirmArchiveButtonRefs}
-                handleThreadClick={handleThreadClick}
-                navigateToThread={navigateToThread}
-                handleMultiSelectContextMenu={handleMultiSelectContextMenu}
-                handleThreadContextMenu={handleThreadContextMenu}
-                clearSelection={clearSelection}
-                commitRename={commitRename}
-                cancelRename={cancelRename}
-                attemptArchiveThread={attemptArchiveThread}
-                openPrLink={openPrLink}
-              />
-            </React.Fragment>
-          );
-        })}
+              ) &&
+              !pinnedThreadKeys.includes(threadKey);
+            return (
+              <React.Fragment key={threadKey}>
+                {showPinnedSeparator && <SidebarPinnedDivider id={dividerDropId} flow={dragFlow} />}
+                <SidebarThreadRow
+                  thread={thread}
+                  projectCwd={projectCwd}
+                  orderedProjectThreadKeys={orderedProjectThreadKeys}
+                  isActive={activeRouteThreadKey === threadKey}
+                  jumpLabel={threadJumpLabelByKey.get(threadKey) ?? null}
+                  threadDropId={
+                    pinnedThreadKeys.includes(threadKey) ||
+                    (index === 0 && pinnedThreadKeys.length === 0)
+                      ? `${pinDropPrefix}${threadKey}`
+                      : `${unpinDropPrefix}${threadKey}`
+                  }
+                  isPinned={pinnedThreadKeys.includes(threadKey)}
+                  togglePinned={toggleThreadPinned}
+                  appSettingsConfirmThreadArchive={appSettingsConfirmThreadArchive}
+                  renamingThreadKey={renamingThreadKey}
+                  renamingTitle={renamingTitle}
+                  setRenamingTitle={setRenamingTitle}
+                  startThreadRename={startThreadRename}
+                  renamingInputRef={renamingInputRef}
+                  renamingCommittedRef={renamingCommittedRef}
+                  confirmingArchiveThreadKey={confirmingArchiveThreadKey}
+                  setConfirmingArchiveThreadKey={setConfirmingArchiveThreadKey}
+                  confirmArchiveButtonRefs={confirmArchiveButtonRefs}
+                  handleThreadClick={handleThreadClick}
+                  navigateToThread={navigateToThread}
+                  handleMultiSelectContextMenu={handleMultiSelectContextMenu}
+                  handleThreadContextMenu={handleThreadContextMenu}
+                  clearSelection={clearSelection}
+                  commitRename={commitRename}
+                  cancelRename={cancelRename}
+                  attemptArchiveThread={attemptArchiveThread}
+                  openPrLink={openPrLink}
+                />
+              </React.Fragment>
+            );
+          })}
 
-      {projectExpanded && hasOverflowingThreads && !isThreadListExpanded && (
-        <SidebarMenuSubItem className="w-full">
-          <SidebarMenuSubButton
-            render={showMoreButtonRender}
-            data-thread-selection-safe
-            size="sm"
-            className="h-6 w-full translate-x-0 justify-start px-2 text-left text-[10px] text-muted-foreground/60 hover:bg-accent hover:text-muted-foreground/80"
-            onClick={() => {
-              expandThreadListForProject(projectKey);
-            }}
-          >
-            <span className="flex min-w-0 flex-1 items-center gap-2">
-              {hiddenThreadStatus && <ThreadStatusLabel status={hiddenThreadStatus} compact />}
-              <span>Show more</span>
-            </span>
-          </SidebarMenuSubButton>
-        </SidebarMenuSubItem>
-      )}
-      {projectExpanded && hasOverflowingThreads && isThreadListExpanded && (
-        <SidebarMenuSubItem className="w-full">
-          <SidebarMenuSubButton
-            render={showLessButtonRender}
-            data-thread-selection-safe
-            size="sm"
-            className="h-6 w-full translate-x-0 justify-start px-2 text-left text-[10px] text-muted-foreground/60 hover:bg-accent hover:text-muted-foreground/80"
-            onClick={() => {
-              collapseThreadListForProject(projectKey);
-            }}
-          >
-            <span>Show less</span>
-          </SidebarMenuSubButton>
-        </SidebarMenuSubItem>
-      )}
-    </SidebarMenuSub>
+        {projectExpanded && hasOverflowingThreads && !isThreadListExpanded && (
+          <SidebarMenuSubItem className="w-full">
+            <SidebarMenuSubButton
+              render={showMoreButtonRender}
+              data-thread-selection-safe
+              size="sm"
+              className="h-6 w-full translate-x-0 justify-start px-2 text-left text-[10px] text-muted-foreground/60 hover:bg-accent hover:text-muted-foreground/80"
+              onClick={() => {
+                expandThreadListForProject(projectKey);
+              }}
+            >
+              <span className="flex min-w-0 flex-1 items-center gap-2">
+                {hiddenThreadStatus && <ThreadStatusLabel status={hiddenThreadStatus} compact />}
+                <span>Show more</span>
+              </span>
+            </SidebarMenuSubButton>
+          </SidebarMenuSubItem>
+        )}
+        {projectExpanded && hasOverflowingThreads && isThreadListExpanded && (
+          <SidebarMenuSubItem className="w-full">
+            <SidebarMenuSubButton
+              render={showLessButtonRender}
+              data-thread-selection-safe
+              size="sm"
+              className="h-6 w-full translate-x-0 justify-start px-2 text-left text-[10px] text-muted-foreground/60 hover:bg-accent hover:text-muted-foreground/80"
+              onClick={() => {
+                collapseThreadListForProject(projectKey);
+              }}
+            >
+              <span>Show less</span>
+            </SidebarMenuSubButton>
+          </SidebarMenuSubItem>
+        )}
+      </SidebarMenuSub>
+    </DndContext>
   );
 });
 
@@ -1218,6 +1354,10 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
   const pinnedThreadKeys = useUiStateStore(
     useShallow((state) => state.pinnedThreadKeysByProject[project.projectKey] ?? []),
   );
+  const toggleThreadPinned = useCallback(
+    (threadKey: string, pinned: boolean) => setThreadPinned(project.projectKey, threadKey, pinned),
+    [project.projectKey, setThreadPinned],
+  );
   const threadLastVisitedAts = useUiStateStore(
     useShallow((state) =>
       projectThreads.map(
@@ -2359,6 +2499,7 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
         activeRouteThreadKey={activeRouteThreadKey}
         threadJumpLabelByKey={threadJumpLabelByKey}
         pinnedThreadKeys={pinnedThreadKeys}
+        toggleThreadPinned={toggleThreadPinned}
         appSettingsConfirmThreadArchive={appSettingsConfirmThreadArchive}
         renamingThreadKey={renamingThreadKey}
         renamingTitle={renamingTitle}

From 5833599eb7476027ac1cf60c31da9a31a65d2382 Mon Sep 17 00:00:00 2001
From: Iliya Lyan <68940374+12ya@users.noreply.github.com>
Date: Sun, 12 Jul 2026 23:30:52 +0900
Subject: [PATCH 03/13] refactor(sidebar): simplify thread pin controls

---
 apps/web/src/components/Sidebar.tsx | 37 ++++++++++-------------------
 1 file changed, 12 insertions(+), 25 deletions(-)

diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index a6948bca753..fc2e9772913 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -331,7 +331,6 @@ interface SidebarThreadRowProps {
   orderedProjectThreadKeys: readonly string[];
   isActive: boolean;
   jumpLabel: string | null;
-  threadDropId: string;
   isPinned: boolean;
   togglePinned: (threadKey: string, pinned: boolean) => void;
   appSettingsConfirmThreadArchive: boolean;
@@ -371,7 +370,6 @@ export const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThr
     orderedProjectThreadKeys,
     isActive,
     jumpLabel,
-    threadDropId,
     isPinned,
     togglePinned,
     appSettingsConfirmThreadArchive,
@@ -398,14 +396,6 @@ export const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThr
   const threadRef = scopeThreadRef(thread.environmentId, thread.id);
   const threadKey = scopedThreadKey(threadRef);
   const threadDrag = useDraggable({ id: threadKey });
-  const threadPinDrop = useDroppable({ id: threadDropId });
-  const setThreadDragDropRef = useCallback(
-    (node: HTMLLIElement | null) => {
-      threadDrag.setNodeRef(node);
-      threadPinDrop.setNodeRef(node);
-    },
-    [threadDrag, threadPinDrop],
-  );
   const lastVisitedAt = useUiStateStore((state) => state.threadLastVisitedAtById[threadKey]);
   const isSelected = useThreadSelectionStore((state) => state.selectedThreadKeys.has(threadKey));
   const runningTerminalIds = useThreadRunningTerminalIds({
@@ -702,7 +692,7 @@ export const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThr
 
   return (
     <SidebarMenuSubItem
-      ref={setThreadDragDropRef}
+      ref={threadDrag.setNodeRef}
       style={{
         transform: CSS.Translate.toString(threadDrag.transform),
         opacity: threadDrag.isDragging ? 0.55 : undefined,
@@ -1003,9 +993,9 @@ function SidebarPinnedDivider({ id, flow }: { id: string; flow: ThreadPinDropAct
   const { setNodeRef } = useDroppable({ id });
   const colorClass =
     flow === "pin"
-      ? "text-emerald-500 before:bg-emerald-500/70 after:bg-emerald-500/70"
+      ? "text-amber-400 before:bg-amber-400/75 after:bg-amber-400/75"
       : flow === "unpin"
-        ? "text-amber-500 before:bg-amber-500/70 after:bg-amber-500/70"
+        ? "text-rose-500 before:bg-rose-500/75 after:bg-rose-500/75"
         : "text-muted-foreground/45 before:bg-border/80 after:bg-border/80";
   return (
     <SidebarMenuSubItem
@@ -1018,6 +1008,15 @@ function SidebarPinnedDivider({ id, flow }: { id: string; flow: ThreadPinDropAct
   );
 }
 
+function SidebarThreadDropSection({ id, children }: { id: string; children: React.ReactNode }) {
+  const { setNodeRef } = useDroppable({ id });
+  return (
+    <SidebarMenuSubItem ref={setNodeRef} className="w-full">
+      <ul className="flex w-full flex-col gap-0.5">{children}</ul>
+    </SidebarMenuSubItem>
+  );
+}
+
 const SidebarProjectThreadList = memo(function SidebarProjectThreadList(
   props: SidebarProjectThreadListProps,
 ) {
@@ -2293,10 +2292,6 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
         thread.worktreePath ?? threadProject?.workspaceRoot ?? project.workspaceRoot ?? null;
       const clicked = await api.contextMenu.show(
         [
-          {
-            id: "toggle-pin",
-            label: pinnedThreadKeys.includes(threadKey) ? "Unpin from project" : "Pin in project",
-          },
           { id: "rename", label: "Rename thread" },
           { id: "mark-unread", label: "Mark unread" },
           { id: "copy-path", label: "Copy Path" },
@@ -2306,11 +2301,6 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
         position,
       );
 
-      if (clicked === "toggle-pin") {
-        setThreadPinned(project.projectKey, threadKey, !pinnedThreadKeys.includes(threadKey));
-        return;
-      }
-
       if (clicked === "rename") {
         startThreadRename(threadKey, thread.title);
         return;
@@ -2369,10 +2359,7 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
       deleteThread,
       markThreadUnread,
       memberProjectByScopedKey,
-      pinnedThreadKeys,
-      project.projectKey,
       project.workspaceRoot,
-      setThreadPinned,
       startThreadRename,
     ],
   );

From a06830f1e35e904b005b79ca460c640ddfba0f9f Mon Sep 17 00:00:00 2001
From: Iliya Lyan <68940374+12ya@users.noreply.github.com>
Date: Sun, 12 Jul 2026 23:36:37 +0900
Subject: [PATCH 04/13] refactor(sidebar): pin threads by divider crossing

---
 apps/web/src/components/Sidebar.logic.test.ts |  59 +++---
 apps/web/src/components/Sidebar.logic.ts      |  28 +--
 apps/web/src/components/Sidebar.tsx           | 180 +++++++++---------
 3 files changed, 121 insertions(+), 146 deletions(-)

diff --git a/apps/web/src/components/Sidebar.logic.test.ts b/apps/web/src/components/Sidebar.logic.test.ts
index 8a0d7afbdf2..a1ef139d506 100644
--- a/apps/web/src/components/Sidebar.logic.test.ts
+++ b/apps/web/src/components/Sidebar.logic.test.ts
@@ -19,7 +19,7 @@ import {
   resolveThreadRowClassName,
   resolveThreadStatusPill,
   shouldClearThreadSelectionOnMouseDown,
-  resolveThreadPinDropAction,
+  resolveThreadPinCrossingAction,
   sortProjectsForSidebar,
   THREAD_JUMP_HINT_SHOW_DELAY_MS,
 } from "./Sidebar.logic";
@@ -51,54 +51,39 @@ describe("prioritizeThreadsByPinnedKeys", () => {
   });
 });
 
-describe("resolveThreadPinDropAction", () => {
-  it("pins an unpinned thread dropped on its project's pin target", () => {
+describe("resolveThreadPinCrossingAction", () => {
+  it("pins an unpinned thread after its center crosses above the divider", () => {
     expect(
-      resolveThreadPinDropAction({
-        activeThreadKey: "thread-1",
-        overId: "project-a:pin-drop:thread-2",
-        pinDropPrefix: "project-a:pin-drop:",
-        unpinDropPrefix: "project-a:unpin-drop:",
-        dividerDropId: "project-a:pin-divider",
-        pinnedThreadKeys: [],
+      resolveThreadPinCrossingAction({
+        activeIsPinned: false,
+        draggedCenterY: 90,
+        dividerCenterY: 100,
       }),
     ).toBe("pin");
-  });
-
-  it("unpins a pinned thread dropped in the regular thread area", () => {
     expect(
-      resolveThreadPinDropAction({
-        activeThreadKey: "thread-1",
-        overId: "project-a:unpin-drop:thread-2",
-        pinDropPrefix: "project-a:pin-drop:",
-        unpinDropPrefix: "project-a:unpin-drop:",
-        dividerDropId: "project-a:pin-divider",
-        pinnedThreadKeys: ["thread-1"],
+      resolveThreadPinCrossingAction({
+        activeIsPinned: false,
+        draggedCenterY: 110,
+        dividerCenterY: 100,
       }),
-    ).toBe("unpin");
+    ).toBeNull();
   });
 
-  it("uses the divider to toggle based on the dragged thread's current state", () => {
+  it("unpins a pinned thread after its center crosses below the divider", () => {
     expect(
-      resolveThreadPinDropAction({
-        activeThreadKey: "thread-1",
-        overId: "project-a:pin-divider",
-        pinDropPrefix: "project-a:pin-drop:",
-        unpinDropPrefix: "project-a:unpin-drop:",
-        dividerDropId: "project-a:pin-divider",
-        pinnedThreadKeys: ["thread-1"],
+      resolveThreadPinCrossingAction({
+        activeIsPinned: true,
+        draggedCenterY: 110,
+        dividerCenterY: 100,
       }),
     ).toBe("unpin");
     expect(
-      resolveThreadPinDropAction({
-        activeThreadKey: "thread-1",
-        overId: "project-a:pin-drop:thread-2",
-        pinDropPrefix: "project-a:pin-drop:",
-        unpinDropPrefix: "project-a:unpin-drop:",
-        dividerDropId: "project-a:pin-divider",
-        pinnedThreadKeys: [],
+      resolveThreadPinCrossingAction({
+        activeIsPinned: true,
+        draggedCenterY: 90,
+        dividerCenterY: 100,
       }),
-    ).toBe("pin");
+    ).toBeNull();
   });
 });
 
diff --git a/apps/web/src/components/Sidebar.logic.ts b/apps/web/src/components/Sidebar.logic.ts
index e4c1c43cdec..dd1ceec2ca6 100644
--- a/apps/web/src/components/Sidebar.logic.ts
+++ b/apps/web/src/components/Sidebar.logic.ts
@@ -41,29 +41,15 @@ export function prioritizeThreadsByPinnedKeys<T>(
 
 export type ThreadPinDropAction = "pin" | "unpin";
 
-export function resolveThreadPinDropAction(input: {
-  activeThreadKey: string;
-  overId: string | null;
-  pinDropPrefix: string;
-  unpinDropPrefix: string;
-  dividerDropId: string;
-  pinnedThreadKeys: readonly string[];
+export function resolveThreadPinCrossingAction(input: {
+  activeIsPinned: boolean;
+  draggedCenterY: number;
+  dividerCenterY: number;
 }): ThreadPinDropAction | null {
-  if (input.overId === null) return null;
-  const activeIsPinned = input.pinnedThreadKeys.includes(input.activeThreadKey);
-  if (
-    !activeIsPinned &&
-    (input.overId === input.dividerDropId || input.overId.startsWith(input.pinDropPrefix))
-  ) {
-    return "pin";
+  if (input.activeIsPinned) {
+    return input.draggedCenterY > input.dividerCenterY ? "unpin" : null;
   }
-  if (
-    activeIsPinned &&
-    (input.overId === input.dividerDropId || input.overId.startsWith(input.unpinDropPrefix))
-  ) {
-    return "unpin";
-  }
-  return null;
+  return input.draggedCenterY < input.dividerCenterY ? "pin" : null;
 }
 
 export interface ThreadStatusPill {
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index fc2e9772913..d251271db75 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -32,13 +32,12 @@ import {
   DndContext,
   type DragCancelEvent,
   type CollisionDetection,
-  type DragOverEvent,
+  type DragMoveEvent,
   PointerSensor,
   type DragStartEvent,
   closestCorners,
   pointerWithin,
   useDraggable,
-  useDroppable,
   useSensor,
   useSensors,
   type DragEndEvent,
@@ -202,7 +201,7 @@ import {
   orderItemsByPreferredIds,
   prioritizeThreadsByPinnedKeys,
   shouldClearThreadSelectionOnMouseDown,
-  resolveThreadPinDropAction,
+  resolveThreadPinCrossingAction,
   type ThreadPinDropAction,
   sortProjectsForSidebar,
   useThreadJumpHintVisibility,
@@ -989,8 +988,13 @@ interface SidebarProjectThreadListProps {
   collapseThreadListForProject: (projectKey: string) => void;
 }
 
-function SidebarPinnedDivider({ id, flow }: { id: string; flow: ThreadPinDropAction | null }) {
-  const { setNodeRef } = useDroppable({ id });
+function SidebarPinnedDivider({
+  nodeRef,
+  flow,
+}: {
+  nodeRef: (node: HTMLLIElement | null) => void;
+  flow: ThreadPinDropAction | null;
+}) {
   const colorClass =
     flow === "pin"
       ? "text-amber-400 before:bg-amber-400/75 after:bg-amber-400/75"
@@ -999,7 +1003,7 @@ function SidebarPinnedDivider({ id, flow }: { id: string; flow: ThreadPinDropAct
         : "text-muted-foreground/45 before:bg-border/80 after:bg-border/80";
   return (
     <SidebarMenuSubItem
-      ref={setNodeRef}
+      ref={nodeRef}
       aria-hidden="true"
       className={`flex h-3 w-full items-center gap-1.5 px-2 transition-colors before:h-px before:flex-1 after:h-px after:flex-1 ${colorClass}`}
     >
@@ -1008,10 +1012,9 @@ function SidebarPinnedDivider({ id, flow }: { id: string; flow: ThreadPinDropAct
   );
 }
 
-function SidebarThreadDropSection({ id, children }: { id: string; children: React.ReactNode }) {
-  const { setNodeRef } = useDroppable({ id });
+function SidebarThreadSection({ children }: { children: React.ReactNode }) {
   return (
-    <SidebarMenuSubItem ref={setNodeRef} className="w-full">
+    <SidebarMenuSubItem className="w-full">
       <ul className="flex w-full flex-col gap-0.5">{children}</ul>
     </SidebarMenuSubItem>
   );
@@ -1062,51 +1065,95 @@ const SidebarProjectThreadList = memo(function SidebarProjectThreadList(
   const showLessButtonRender = useMemo(() => <button type="button" />, []);
   const threadDragSensor = useSensor(PointerSensor, { activationConstraint: { distance: 6 } });
   const threadDragSensors = useSensors(threadDragSensor);
-  const pinDropPrefix = `${projectKey}:pin-drop:`;
-  const unpinDropPrefix = `${projectKey}:unpin-drop:`;
-  const dividerDropId = `${projectKey}:pin-divider`;
   const [dragFlow, setDragFlow] = useState<ThreadPinDropAction | null>(null);
+  const dragFlowRef = useRef<ThreadPinDropAction | null>(null);
+  const dividerElementRef = useRef<HTMLLIElement | null>(null);
+  const setDividerElement = useCallback((node: HTMLLIElement | null) => {
+    dividerElementRef.current = node;
+  }, []);
 
-  const resolveDropAction = useCallback(
-    (activeThreadKey: string, overId: string | null) =>
-      resolveThreadPinDropAction({
-        activeThreadKey,
-        overId,
-        pinDropPrefix,
-        unpinDropPrefix,
-        dividerDropId,
-        pinnedThreadKeys,
-      }),
-    [dividerDropId, pinDropPrefix, pinnedThreadKeys, unpinDropPrefix],
-  );
+  const updateDragFlow = useCallback((flow: ThreadPinDropAction | null) => {
+    dragFlowRef.current = flow;
+    setDragFlow(flow);
+  }, []);
 
-  const handleThreadDragOver = useCallback(
-    (event: DragOverEvent) => {
-      setDragFlow(
-        resolveDropAction(String(event.active.id), event.over ? String(event.over.id) : null),
+  const handleThreadDragMove = useCallback(
+    (event: DragMoveEvent) => {
+      const draggedRect = event.active.rect.current.translated;
+      const dividerRect = dividerElementRef.current?.getBoundingClientRect();
+      if (!draggedRect || !dividerRect) {
+        updateDragFlow(null);
+        return;
+      }
+      updateDragFlow(
+        resolveThreadPinCrossingAction({
+          activeIsPinned: pinnedThreadKeys.includes(String(event.active.id)),
+          draggedCenterY: draggedRect.top + draggedRect.height / 2,
+          dividerCenterY: dividerRect.top + dividerRect.height / 2,
+        }),
       );
     },
-    [resolveDropAction],
+    [pinnedThreadKeys, updateDragFlow],
   );
 
   const handleThreadDragEnd = useCallback(
     (event: DragEndEvent) => {
       const activeThreadKey = String(event.active.id);
-      const action = resolveDropAction(activeThreadKey, event.over ? String(event.over.id) : null);
-      setDragFlow(null);
+      const action = dragFlowRef.current;
+      updateDragFlow(null);
       if (action !== null) {
         toggleThreadPinned(activeThreadKey, action === "pin");
       }
     },
-    [resolveDropAction, toggleThreadPinned],
+    [toggleThreadPinned, updateDragFlow],
+  );
+  const renderedPinnedThreads = renderedThreads.filter((thread) =>
+    pinnedThreadKeys.includes(scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id))),
   );
+  const renderedRegularThreads = renderedThreads.filter(
+    (thread) =>
+      !pinnedThreadKeys.includes(scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id))),
+  );
+  const renderThreadRow = (thread: SidebarThreadSummary) => {
+    const threadKey = scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id));
+    return (
+      <SidebarThreadRow
+        key={threadKey}
+        thread={thread}
+        projectCwd={projectCwd}
+        orderedProjectThreadKeys={orderedProjectThreadKeys}
+        isActive={activeRouteThreadKey === threadKey}
+        jumpLabel={threadJumpLabelByKey.get(threadKey) ?? null}
+        isPinned={pinnedThreadKeys.includes(threadKey)}
+        togglePinned={toggleThreadPinned}
+        appSettingsConfirmThreadArchive={appSettingsConfirmThreadArchive}
+        renamingThreadKey={renamingThreadKey}
+        renamingTitle={renamingTitle}
+        setRenamingTitle={setRenamingTitle}
+        startThreadRename={startThreadRename}
+        renamingInputRef={renamingInputRef}
+        renamingCommittedRef={renamingCommittedRef}
+        confirmingArchiveThreadKey={confirmingArchiveThreadKey}
+        setConfirmingArchiveThreadKey={setConfirmingArchiveThreadKey}
+        confirmArchiveButtonRefs={confirmArchiveButtonRefs}
+        handleThreadClick={handleThreadClick}
+        navigateToThread={navigateToThread}
+        handleMultiSelectContextMenu={handleMultiSelectContextMenu}
+        handleThreadContextMenu={handleThreadContextMenu}
+        clearSelection={clearSelection}
+        commitRename={commitRename}
+        cancelRename={cancelRename}
+        attemptArchiveThread={attemptArchiveThread}
+        openPrLink={openPrLink}
+      />
+    );
+  };
 
   return (
     <DndContext
       sensors={threadDragSensors}
-      collisionDetection={pointerWithin}
-      onDragOver={handleThreadDragOver}
-      onDragCancel={() => setDragFlow(null)}
+      onDragMove={handleThreadDragMove}
+      onDragCancel={() => updateDragFlow(null)}
       onDragEnd={handleThreadDragEnd}
     >
       <SidebarMenuSub
@@ -1123,60 +1170,17 @@ const SidebarProjectThreadList = memo(function SidebarProjectThreadList(
             </div>
           </SidebarMenuSubItem>
         ) : null}
+        {shouldShowThreadPanel && renderedPinnedThreads.length > 0 && (
+          <SidebarThreadSection>{renderedPinnedThreads.map(renderThreadRow)}</SidebarThreadSection>
+        )}
         {shouldShowThreadPanel &&
-          renderedThreads.map((thread, index) => {
-            const threadKey = scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id));
-            const showPinnedSeparator =
-              index > 0 &&
-              pinnedThreadKeys.includes(
-                scopedThreadKey(
-                  scopeThreadRef(
-                    renderedThreads[index - 1]!.environmentId,
-                    renderedThreads[index - 1]!.id,
-                  ),
-                ),
-              ) &&
-              !pinnedThreadKeys.includes(threadKey);
-            return (
-              <React.Fragment key={threadKey}>
-                {showPinnedSeparator && <SidebarPinnedDivider id={dividerDropId} flow={dragFlow} />}
-                <SidebarThreadRow
-                  thread={thread}
-                  projectCwd={projectCwd}
-                  orderedProjectThreadKeys={orderedProjectThreadKeys}
-                  isActive={activeRouteThreadKey === threadKey}
-                  jumpLabel={threadJumpLabelByKey.get(threadKey) ?? null}
-                  threadDropId={
-                    pinnedThreadKeys.includes(threadKey) ||
-                    (index === 0 && pinnedThreadKeys.length === 0)
-                      ? `${pinDropPrefix}${threadKey}`
-                      : `${unpinDropPrefix}${threadKey}`
-                  }
-                  isPinned={pinnedThreadKeys.includes(threadKey)}
-                  togglePinned={toggleThreadPinned}
-                  appSettingsConfirmThreadArchive={appSettingsConfirmThreadArchive}
-                  renamingThreadKey={renamingThreadKey}
-                  renamingTitle={renamingTitle}
-                  setRenamingTitle={setRenamingTitle}
-                  startThreadRename={startThreadRename}
-                  renamingInputRef={renamingInputRef}
-                  renamingCommittedRef={renamingCommittedRef}
-                  confirmingArchiveThreadKey={confirmingArchiveThreadKey}
-                  setConfirmingArchiveThreadKey={setConfirmingArchiveThreadKey}
-                  confirmArchiveButtonRefs={confirmArchiveButtonRefs}
-                  handleThreadClick={handleThreadClick}
-                  navigateToThread={navigateToThread}
-                  handleMultiSelectContextMenu={handleMultiSelectContextMenu}
-                  handleThreadContextMenu={handleThreadContextMenu}
-                  clearSelection={clearSelection}
-                  commitRename={commitRename}
-                  cancelRename={cancelRename}
-                  attemptArchiveThread={attemptArchiveThread}
-                  openPrLink={openPrLink}
-                />
-              </React.Fragment>
-            );
-          })}
+          renderedPinnedThreads.length > 0 &&
+          renderedRegularThreads.length > 0 && (
+            <SidebarPinnedDivider nodeRef={setDividerElement} flow={dragFlow} />
+          )}
+        {shouldShowThreadPanel && renderedRegularThreads.length > 0 && (
+          <SidebarThreadSection>{renderedRegularThreads.map(renderThreadRow)}</SidebarThreadSection>
+        )}
 
         {projectExpanded && hasOverflowingThreads && !isThreadListExpanded && (
           <SidebarMenuSubItem className="w-full">

From 6656e1c482770c2894f4261fe7a3e35524387071 Mon Sep 17 00:00:00 2001
From: Iliya Lyan <68940374+12ya@users.noreply.github.com>
Date: Sun, 12 Jul 2026 23:41:59 +0900
Subject: [PATCH 05/13] fix(sidebar): animate pinned thread groups

---
 apps/web/src/components/Sidebar.tsx | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index d251271db75..8acbcf2d56d 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -1012,10 +1012,18 @@ function SidebarPinnedDivider({
   );
 }
 
-function SidebarThreadSection({ children }: { children: React.ReactNode }) {
+function SidebarThreadSection({
+  children,
+  attachAutoAnimateRef,
+}: {
+  children: React.ReactNode;
+  attachAutoAnimateRef: (node: HTMLElement | null) => void;
+}) {
   return (
     <SidebarMenuSubItem className="w-full">
-      <ul className="flex w-full flex-col gap-0.5">{children}</ul>
+      <ul ref={attachAutoAnimateRef} className="flex w-full flex-col gap-0.5">
+        {children}
+      </ul>
     </SidebarMenuSubItem>
   );
 }
@@ -1171,7 +1179,9 @@ const SidebarProjectThreadList = memo(function SidebarProjectThreadList(
           </SidebarMenuSubItem>
         ) : null}
         {shouldShowThreadPanel && renderedPinnedThreads.length > 0 && (
-          <SidebarThreadSection>{renderedPinnedThreads.map(renderThreadRow)}</SidebarThreadSection>
+          <SidebarThreadSection attachAutoAnimateRef={attachThreadListAutoAnimateRef}>
+            {renderedPinnedThreads.map(renderThreadRow)}
+          </SidebarThreadSection>
         )}
         {shouldShowThreadPanel &&
           renderedPinnedThreads.length > 0 &&
@@ -1179,7 +1189,9 @@ const SidebarProjectThreadList = memo(function SidebarProjectThreadList(
             <SidebarPinnedDivider nodeRef={setDividerElement} flow={dragFlow} />
           )}
         {shouldShowThreadPanel && renderedRegularThreads.length > 0 && (
-          <SidebarThreadSection>{renderedRegularThreads.map(renderThreadRow)}</SidebarThreadSection>
+          <SidebarThreadSection attachAutoAnimateRef={attachThreadListAutoAnimateRef}>
+            {renderedRegularThreads.map(renderThreadRow)}
+          </SidebarThreadSection>
         )}
 
         {projectExpanded && hasOverflowingThreads && !isThreadListExpanded && (

From fd614e58ce86cc8f1412fad5bb0f79123d4ae179 Mon Sep 17 00:00:00 2001
From: Iliya Lyan <68940374+12ya@users.noreply.github.com>
Date: Mon, 13 Jul 2026 09:32:41 +0900
Subject: [PATCH 06/13] fix(sidebar): ignore controls when starting thread
 drags

---
 apps/web/src/components/Sidebar.logic.test.ts | 13 +++++++++++++
 apps/web/src/components/Sidebar.logic.ts      |  7 +++++++
 apps/web/src/components/Sidebar.tsx           | 12 +++++++++++-
 3 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/Sidebar.logic.test.ts b/apps/web/src/components/Sidebar.logic.test.ts
index a1ef139d506..ee891e4fb71 100644
--- a/apps/web/src/components/Sidebar.logic.test.ts
+++ b/apps/web/src/components/Sidebar.logic.test.ts
@@ -19,6 +19,7 @@ import {
   resolveThreadRowClassName,
   resolveThreadStatusPill,
   shouldClearThreadSelectionOnMouseDown,
+  shouldBlockThreadDragActivation,
   resolveThreadPinCrossingAction,
   sortProjectsForSidebar,
   THREAD_JUMP_HINT_SHOW_DELAY_MS,
@@ -39,6 +40,18 @@ import {
 
 const localEnvironmentId = EnvironmentId.make("environment-local");
 
+describe("shouldBlockThreadDragActivation", () => {
+  it("blocks drag activation from interactive descendants", () => {
+    const input = { closest: vi.fn(() => ({})) } as unknown as HTMLElement;
+    const button = { closest: vi.fn(() => ({})) } as unknown as HTMLElement;
+    const row = { closest: vi.fn(() => null) } as unknown as HTMLElement;
+
+    expect(shouldBlockThreadDragActivation(input)).toBe(true);
+    expect(shouldBlockThreadDragActivation(button)).toBe(true);
+    expect(shouldBlockThreadDragActivation(row)).toBe(false);
+  });
+});
+
 describe("prioritizeThreadsByPinnedKeys", () => {
   it("moves only pinned threads to the front while preserving the current sort order", () => {
     const threads = [{ id: "newest" }, { id: "pinned" }, { id: "oldest" }];
diff --git a/apps/web/src/components/Sidebar.logic.ts b/apps/web/src/components/Sidebar.logic.ts
index dd1ceec2ca6..96db41fd72e 100644
--- a/apps/web/src/components/Sidebar.logic.ts
+++ b/apps/web/src/components/Sidebar.logic.ts
@@ -194,6 +194,13 @@ export function shouldClearThreadSelectionOnMouseDown(target: HTMLElement | null
   return !target.closest(THREAD_SELECTION_SAFE_SELECTOR);
 }
 
+const THREAD_DRAG_BLOCKED_SELECTOR =
+  "input, textarea, select, button, a, [contenteditable='true'], [data-thread-selection-safe]";
+
+export function shouldBlockThreadDragActivation(target: HTMLElement | null): boolean {
+  return target !== null && target.closest(THREAD_DRAG_BLOCKED_SELECTOR) !== null;
+}
+
 // A double-click dispatches two `click` events before `dblclick`: the first has
 // `detail === 1`, the second `detail === 2`. The second click must not run the
 // row's single-click navigation, otherwise double-click-to-rename would also
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 8acbcf2d56d..1c84cca9ff5 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -201,6 +201,7 @@ import {
   orderItemsByPreferredIds,
   prioritizeThreadsByPinnedKeys,
   shouldClearThreadSelectionOnMouseDown,
+  shouldBlockThreadDragActivation,
   resolveThreadPinCrossingAction,
   type ThreadPinDropAction,
   sortProjectsForSidebar,
@@ -687,6 +688,15 @@ export const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThr
     },
     [isPinned, threadKey, togglePinned],
   );
+  const handleThreadDragPointerDown = useCallback(
+    (event: React.PointerEvent<HTMLElement>) => {
+      if (shouldBlockThreadDragActivation(event.target as HTMLElement)) {
+        return;
+      }
+      threadDrag.listeners?.onPointerDown?.(event);
+    },
+    [threadDrag.listeners],
+  );
   const rowButtonRender = useMemo(() => <div role="button" tabIndex={0} />, []);
 
   return (
@@ -714,8 +724,8 @@ export const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThr
         onDoubleClick={handleRowDoubleClick}
         onKeyDown={handleRowKeyDown}
         onContextMenu={handleRowContextMenu}
+        onPointerDown={handleThreadDragPointerDown}
         {...threadDrag.attributes}
-        {...threadDrag.listeners}
       >
         <div className="flex min-w-0 flex-1 items-center gap-1.5 text-left">
           {prStatus && (

From d2c46a72e4c935d8254b0567dadf9f80110c4007 Mon Sep 17 00:00:00 2001
From: Iliya Lyan <68940374+12ya@users.noreply.github.com>
Date: Mon, 13 Jul 2026 09:33:09 +0900
Subject: [PATCH 07/13] fix(sidebar): scope thread actions to active rows

Track row hover and focus directly instead of relying on nested group selectors, and hide row actions while a thread drag is active.
---
 apps/web/src/components/Sidebar.tsx | 42 ++++++++++++++++++++++++-----
 1 file changed, 35 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 1c84cca9ff5..903162c39de 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -332,6 +332,7 @@ interface SidebarThreadRowProps {
   isActive: boolean;
   jumpLabel: string | null;
   isPinned: boolean;
+  isThreadDragActive: boolean;
   togglePinned: (threadKey: string, pinned: boolean) => void;
   appSettingsConfirmThreadArchive: boolean;
   renamingThreadKey: string | null;
@@ -371,6 +372,7 @@ export const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThr
     isActive,
     jumpLabel,
     isPinned,
+    isThreadDragActive,
     togglePinned,
     appSettingsConfirmThreadArchive,
     renamingThreadKey,
@@ -472,6 +474,8 @@ export const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThr
   );
   const isThreadRunning =
     thread.session?.status === "running" && thread.session.activeTurnId != null;
+  const [rowActionsFocusedOrHovered, setRowActionsFocusedOrHovered] = useState(false);
+  const showRowActions = !isThreadDragActive && (isMobile || rowActionsFocusedOrHovered);
   const threadStatus = resolveThreadStatusPill({
     thread: {
       ...thread,
@@ -484,15 +488,23 @@ export const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThr
   const isConfirmingArchive = confirmingArchiveThreadKey === threadKey && !isThreadRunning;
   const threadMetaClassName = isConfirmingArchive
     ? "pointer-events-none opacity-0"
-    : !isThreadRunning
-      ? "pointer-events-none transition-opacity duration-150 max-sm:pr-6 group-hover/menu-sub-item:opacity-0 group-focus-within/menu-sub-item:opacity-0"
-      : "pointer-events-none";
+    : `pointer-events-none transition-opacity duration-150 ${showRowActions ? "opacity-0" : ""}`;
+  const rowActionVisibilityClass = showRowActions
+    ? "pointer-events-auto opacity-100"
+    : "pointer-events-none opacity-0";
   const clearConfirmingArchive = useCallback(() => {
     setConfirmingArchiveThreadKey((current) => (current === threadKey ? null : current));
   }, [setConfirmingArchiveThreadKey, threadKey]);
   const handleMouseLeave = useCallback(() => {
+    setRowActionsFocusedOrHovered(false);
     clearConfirmingArchive();
   }, [clearConfirmingArchive]);
+  const handleMouseEnter = useCallback(() => {
+    setRowActionsFocusedOrHovered(true);
+  }, []);
+  const handleFocusCapture = useCallback(() => {
+    setRowActionsFocusedOrHovered(true);
+  }, []);
   const handleBlurCapture = useCallback(
     (event: React.FocusEvent<HTMLLIElement>) => {
       const currentTarget = event.currentTarget;
@@ -500,6 +512,7 @@ export const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThr
         if (currentTarget.contains(document.activeElement)) {
           return;
         }
+        setRowActionsFocusedOrHovered(false);
         clearConfirmingArchive();
       });
     },
@@ -708,7 +721,9 @@ export const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThr
       }}
       className="w-full"
       data-thread-item
+      onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
+      onFocusCapture={handleFocusCapture}
       onBlurCapture={handleBlurCapture}
     >
       <SidebarMenuSubButton
@@ -822,7 +837,9 @@ export const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThr
               <Tooltip>
                 <TooltipTrigger
                   render={
-                    <div className="pointer-events-none absolute top-1/2 right-7 -translate-y-1/2 opacity-0 transition-opacity duration-150 max-sm:pointer-events-auto max-sm:opacity-100 group-hover/menu-sub-item:pointer-events-auto group-hover/menu-sub-item:opacity-100 group-focus-within/menu-sub-item:pointer-events-auto group-focus-within/menu-sub-item:opacity-100">
+                    <div
+                      className={`${rowActionVisibilityClass} absolute top-1/2 right-7 -translate-y-1/2 transition-opacity duration-150`}
+                    >
                       <button
                         type="button"
                         data-thread-selection-safe
@@ -859,7 +876,9 @@ export const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThr
               </button>
             ) : !isThreadRunning ? (
               appSettingsConfirmThreadArchive ? (
-                <div className="pointer-events-none absolute top-1/2 right-0.5 -translate-y-1/2 opacity-0 transition-opacity duration-150 max-sm:pointer-events-auto max-sm:opacity-100 group-hover/menu-sub-item:pointer-events-auto group-hover/menu-sub-item:opacity-100 group-focus-within/menu-sub-item:pointer-events-auto group-focus-within/menu-sub-item:opacity-100">
+                <div
+                  className={`${rowActionVisibilityClass} absolute top-1/2 right-0.5 -translate-y-1/2 transition-opacity duration-150`}
+                >
                   <button
                     type="button"
                     data-thread-selection-safe
@@ -876,7 +895,9 @@ export const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThr
                 <Tooltip>
                   <TooltipTrigger
                     render={
-                      <div className="pointer-events-none absolute top-1/2 right-0.5 -translate-y-1/2 opacity-0 transition-opacity duration-150 max-sm:pointer-events-auto max-sm:opacity-100 group-hover/menu-sub-item:pointer-events-auto group-hover/menu-sub-item:opacity-100 group-focus-within/menu-sub-item:pointer-events-auto group-focus-within/menu-sub-item:opacity-100">
+                      <div
+                        className={`${rowActionVisibilityClass} absolute top-1/2 right-0.5 -translate-y-1/2 transition-opacity duration-150`}
+                      >
                         <button
                           type="button"
                           data-thread-selection-safe
@@ -1084,6 +1105,7 @@ const SidebarProjectThreadList = memo(function SidebarProjectThreadList(
   const threadDragSensor = useSensor(PointerSensor, { activationConstraint: { distance: 6 } });
   const threadDragSensors = useSensors(threadDragSensor);
   const [dragFlow, setDragFlow] = useState<ThreadPinDropAction | null>(null);
+  const [isThreadDragActive, setIsThreadDragActive] = useState(false);
   const dragFlowRef = useRef<ThreadPinDropAction | null>(null);
   const dividerElementRef = useRef<HTMLLIElement | null>(null);
   const setDividerElement = useCallback((node: HTMLLIElement | null) => {
@@ -1118,6 +1140,7 @@ const SidebarProjectThreadList = memo(function SidebarProjectThreadList(
     (event: DragEndEvent) => {
       const activeThreadKey = String(event.active.id);
       const action = dragFlowRef.current;
+      setIsThreadDragActive(false);
       updateDragFlow(null);
       if (action !== null) {
         toggleThreadPinned(activeThreadKey, action === "pin");
@@ -1143,6 +1166,7 @@ const SidebarProjectThreadList = memo(function SidebarProjectThreadList(
         isActive={activeRouteThreadKey === threadKey}
         jumpLabel={threadJumpLabelByKey.get(threadKey) ?? null}
         isPinned={pinnedThreadKeys.includes(threadKey)}
+        isThreadDragActive={isThreadDragActive}
         togglePinned={toggleThreadPinned}
         appSettingsConfirmThreadArchive={appSettingsConfirmThreadArchive}
         renamingThreadKey={renamingThreadKey}
@@ -1170,8 +1194,12 @@ const SidebarProjectThreadList = memo(function SidebarProjectThreadList(
   return (
     <DndContext
       sensors={threadDragSensors}
+      onDragStart={() => setIsThreadDragActive(true)}
       onDragMove={handleThreadDragMove}
-      onDragCancel={() => updateDragFlow(null)}
+      onDragCancel={() => {
+        setIsThreadDragActive(false);
+        updateDragFlow(null);
+      }}
       onDragEnd={handleThreadDragEnd}
     >
       <SidebarMenuSub

From b8c812d24df46b6cb6574941356163a0627f4dc1 Mon Sep 17 00:00:00 2001
From: Iliya Lyan <68940374+12ya@users.noreply.github.com>
Date: Mon, 13 Jul 2026 09:38:35 +0900
Subject: [PATCH 08/13] fix(sidebar): enable drag pinning at group edges

Render the pinned divider during active drags when all threads are in one group, allowing the first pin and last unpin gestures to cross a measurable boundary.
---
 apps/web/src/components/Sidebar.logic.test.ts | 24 +++++++++++++++++++
 apps/web/src/components/Sidebar.logic.ts      | 11 +++++++++
 apps/web/src/components/Sidebar.tsx           | 10 ++++----
 3 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/Sidebar.logic.test.ts b/apps/web/src/components/Sidebar.logic.test.ts
index ee891e4fb71..72f3dd7d8da 100644
--- a/apps/web/src/components/Sidebar.logic.test.ts
+++ b/apps/web/src/components/Sidebar.logic.test.ts
@@ -20,6 +20,7 @@ import {
   resolveThreadStatusPill,
   shouldClearThreadSelectionOnMouseDown,
   shouldBlockThreadDragActivation,
+  shouldShowPinnedThreadDivider,
   resolveThreadPinCrossingAction,
   sortProjectsForSidebar,
   THREAD_JUMP_HINT_SHOW_DELAY_MS,
@@ -100,6 +101,29 @@ describe("resolveThreadPinCrossingAction", () => {
   });
 });
 
+describe("shouldShowPinnedThreadDivider", () => {
+  it("shows between mixed groups and during edge-case drags", () => {
+    expect(
+      shouldShowPinnedThreadDivider({ isDragging: false, pinnedCount: 1, regularCount: 1 }),
+    ).toBe(true);
+    expect(
+      shouldShowPinnedThreadDivider({ isDragging: true, pinnedCount: 0, regularCount: 2 }),
+    ).toBe(true);
+    expect(
+      shouldShowPinnedThreadDivider({ isDragging: true, pinnedCount: 2, regularCount: 0 }),
+    ).toBe(true);
+  });
+
+  it("stays hidden outside a drag when only one group exists", () => {
+    expect(
+      shouldShowPinnedThreadDivider({ isDragging: false, pinnedCount: 0, regularCount: 2 }),
+    ).toBe(false);
+    expect(
+      shouldShowPinnedThreadDivider({ isDragging: false, pinnedCount: 2, regularCount: 0 }),
+    ).toBe(false);
+  });
+});
+
 describe("resolveSidebarStageBadgeLabel", () => {
   it("returns Nightly for nightly primary server versions", () => {
     expect(
diff --git a/apps/web/src/components/Sidebar.logic.ts b/apps/web/src/components/Sidebar.logic.ts
index 96db41fd72e..48057f398e1 100644
--- a/apps/web/src/components/Sidebar.logic.ts
+++ b/apps/web/src/components/Sidebar.logic.ts
@@ -52,6 +52,17 @@ export function resolveThreadPinCrossingAction(input: {
   return input.draggedCenterY < input.dividerCenterY ? "pin" : null;
 }
 
+export function shouldShowPinnedThreadDivider(input: {
+  isDragging: boolean;
+  pinnedCount: number;
+  regularCount: number;
+}): boolean {
+  return (
+    (input.pinnedCount > 0 && input.regularCount > 0) ||
+    (input.isDragging && input.pinnedCount + input.regularCount > 0)
+  );
+}
+
 export interface ThreadStatusPill {
   label:
     | "Working"
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 903162c39de..777dcc6f372 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -202,6 +202,7 @@ import {
   prioritizeThreadsByPinnedKeys,
   shouldClearThreadSelectionOnMouseDown,
   shouldBlockThreadDragActivation,
+  shouldShowPinnedThreadDivider,
   resolveThreadPinCrossingAction,
   type ThreadPinDropAction,
   sortProjectsForSidebar,
@@ -1222,10 +1223,11 @@ const SidebarProjectThreadList = memo(function SidebarProjectThreadList(
           </SidebarThreadSection>
         )}
         {shouldShowThreadPanel &&
-          renderedPinnedThreads.length > 0 &&
-          renderedRegularThreads.length > 0 && (
-            <SidebarPinnedDivider nodeRef={setDividerElement} flow={dragFlow} />
-          )}
+          shouldShowPinnedThreadDivider({
+            isDragging: isThreadDragActive,
+            pinnedCount: renderedPinnedThreads.length,
+            regularCount: renderedRegularThreads.length,
+          }) && <SidebarPinnedDivider nodeRef={setDividerElement} flow={dragFlow} />}
         {shouldShowThreadPanel && renderedRegularThreads.length > 0 && (
           <SidebarThreadSection attachAutoAnimateRef={attachThreadListAutoAnimateRef}>
             {renderedRegularThreads.map(renderThreadRow)}

From 9ceec8290ac32a5689d4153bebecd52b721e0ed5 Mon Sep 17 00:00:00 2001
From: Iliya Lyan <68940374+12ya@users.noreply.github.com>
Date: Mon, 13 Jul 2026 09:49:00 +0900
Subject: [PATCH 09/13] fix(sidebar): harden thread row interactions

Prevent drag activation from interactive controls, preserve mobile row metadata beside actions, and keep scoped active threads visible in collapsed previews.
---
 apps/web/src/components/Sidebar.logic.test.ts | 47 +++++++++++++++++
 apps/web/src/components/Sidebar.logic.ts      | 24 ++++++---
 apps/web/src/components/Sidebar.tsx           | 50 +++++++++++++------
 3 files changed, 99 insertions(+), 22 deletions(-)

diff --git a/apps/web/src/components/Sidebar.logic.test.ts b/apps/web/src/components/Sidebar.logic.test.ts
index 72f3dd7d8da..fda23dffa83 100644
--- a/apps/web/src/components/Sidebar.logic.test.ts
+++ b/apps/web/src/components/Sidebar.logic.test.ts
@@ -21,6 +21,7 @@ import {
   shouldClearThreadSelectionOnMouseDown,
   shouldBlockThreadDragActivation,
   shouldShowPinnedThreadDivider,
+  shouldHideThreadMeta,
   resolveThreadPinCrossingAction,
   sortProjectsForSidebar,
   THREAD_JUMP_HINT_SHOW_DELAY_MS,
@@ -53,6 +54,35 @@ describe("shouldBlockThreadDragActivation", () => {
   });
 });
 
+describe("shouldHideThreadMeta", () => {
+  it("keeps mobile metadata visible beside always-visible actions", () => {
+    expect(
+      shouldHideThreadMeta({
+        isConfirmingArchive: false,
+        isMobile: true,
+        showRowActions: true,
+      }),
+    ).toBe(false);
+  });
+
+  it("hides metadata for desktop actions and archive confirmation", () => {
+    expect(
+      shouldHideThreadMeta({
+        isConfirmingArchive: false,
+        isMobile: false,
+        showRowActions: true,
+      }),
+    ).toBe(true);
+    expect(
+      shouldHideThreadMeta({
+        isConfirmingArchive: true,
+        isMobile: true,
+        showRowActions: true,
+      }),
+    ).toBe(true);
+  });
+});
+
 describe("prioritizeThreadsByPinnedKeys", () => {
   it("moves only pinned threads to the front while preserving the current sort order", () => {
     const threads = [{ id: "newest" }, { id: "pinned" }, { id: "oldest" }];
@@ -877,6 +907,23 @@ describe("getVisibleThreadsForProject", () => {
     );
     expect(result.hiddenThreads).toEqual([]);
   });
+
+  it("supports scoped identities for grouped projects", () => {
+    const threads = [
+      { id: ThreadId.make("shared"), scopedKey: "env-a:shared" },
+      { id: ThreadId.make("shared"), scopedKey: "env-b:shared" },
+    ];
+
+    const result = getVisibleThreadsForProject({
+      threads,
+      activeThreadId: "env-b:shared",
+      isThreadListExpanded: false,
+      previewLimit: 1,
+      getThreadId: (thread) => thread.scopedKey,
+    });
+
+    expect(result.visibleThreads).toEqual(threads);
+  });
 });
 
 function makeProject(overrides: Partial<Project> = {}): Project {
diff --git a/apps/web/src/components/Sidebar.logic.ts b/apps/web/src/components/Sidebar.logic.ts
index 48057f398e1..1c81031130f 100644
--- a/apps/web/src/components/Sidebar.logic.ts
+++ b/apps/web/src/components/Sidebar.logic.ts
@@ -212,6 +212,14 @@ export function shouldBlockThreadDragActivation(target: HTMLElement | null): boo
   return target !== null && target.closest(THREAD_DRAG_BLOCKED_SELECTOR) !== null;
 }
 
+export function shouldHideThreadMeta(input: {
+  isConfirmingArchive: boolean;
+  isMobile: boolean;
+  showRowActions: boolean;
+}): boolean {
+  return input.isConfirmingArchive || (!input.isMobile && input.showRowActions);
+}
+
 // A double-click dispatches two `click` events before `dblclick`: the first has
 // `detail === 1`, the second `detail === 2`. The second click must not run the
 // row's single-click navigation, otherwise double-click-to-rename would also
@@ -488,15 +496,17 @@ export function resolveProjectStatusIndicator(
 
 export function getVisibleThreadsForProject<T extends Pick<Thread, "id">>(input: {
   threads: readonly T[];
-  activeThreadId: T["id"] | undefined;
+  activeThreadId: string | undefined;
   isThreadListExpanded: boolean;
   previewLimit: number;
+  getThreadId?: (thread: T) => string;
 }): {
   hasHiddenThreads: boolean;
   visibleThreads: T[];
   hiddenThreads: T[];
 } {
   const { activeThreadId, isThreadListExpanded, previewLimit, threads } = input;
+  const getThreadId = input.getThreadId ?? ((thread: T) => thread.id);
   const hasHiddenThreads = threads.length > previewLimit;
 
   if (!hasHiddenThreads || isThreadListExpanded) {
@@ -508,7 +518,7 @@ export function getVisibleThreadsForProject<T extends Pick<Thread, "id">>(input:
   }
 
   const previewThreads = threads.slice(0, previewLimit);
-  if (!activeThreadId || previewThreads.some((thread) => thread.id === activeThreadId)) {
+  if (!activeThreadId || previewThreads.some((thread) => getThreadId(thread) === activeThreadId)) {
     return {
       hasHiddenThreads: true,
       hiddenThreads: threads.slice(previewLimit),
@@ -516,7 +526,7 @@ export function getVisibleThreadsForProject<T extends Pick<Thread, "id">>(input:
     };
   }
 
-  const activeThread = threads.find((thread) => thread.id === activeThreadId);
+  const activeThread = threads.find((thread) => getThreadId(thread) === activeThreadId);
   if (!activeThread) {
     return {
       hasHiddenThreads: true,
@@ -525,12 +535,14 @@ export function getVisibleThreadsForProject<T extends Pick<Thread, "id">>(input:
     };
   }
 
-  const visibleThreadIds = new Set([...previewThreads, activeThread].map((thread) => thread.id));
+  const visibleThreadIds = new Set(
+    [...previewThreads, activeThread].map((thread) => getThreadId(thread)),
+  );
 
   return {
     hasHiddenThreads: true,
-    hiddenThreads: threads.filter((thread) => !visibleThreadIds.has(thread.id)),
-    visibleThreads: threads.filter((thread) => visibleThreadIds.has(thread.id)),
+    hiddenThreads: threads.filter((thread) => !visibleThreadIds.has(getThreadId(thread))),
+    visibleThreads: threads.filter((thread) => visibleThreadIds.has(getThreadId(thread))),
   };
 }
 
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 777dcc6f372..5740a3ad8a9 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -189,6 +189,7 @@ import { useThreadSelectionStore } from "../threadSelectionStore";
 import { useOpenAddProjectCommandPalette } from "../commandPaletteContext";
 import {
   getSidebarThreadIdsToPrewarm,
+  getVisibleThreadsForProject,
   resolveAdjacentThreadId,
   isContextMenuPointerDown,
   isTrailingDoubleClick,
@@ -203,6 +204,7 @@ import {
   shouldClearThreadSelectionOnMouseDown,
   shouldBlockThreadDragActivation,
   shouldShowPinnedThreadDivider,
+  shouldHideThreadMeta,
   resolveThreadPinCrossingAction,
   type ThreadPinDropAction,
   sortProjectsForSidebar,
@@ -487,9 +489,14 @@ export const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThr
   const prStatus = prStatusIndicator(pr, gitStatus.data?.sourceControlProvider);
   const terminalStatus = terminalStatusFromRunningIds(runningTerminalIds);
   const isConfirmingArchive = confirmingArchiveThreadKey === threadKey && !isThreadRunning;
-  const threadMetaClassName = isConfirmingArchive
+  const hideThreadMeta = shouldHideThreadMeta({
+    isConfirmingArchive,
+    isMobile,
+    showRowActions,
+  });
+  const threadMetaClassName = hideThreadMeta
     ? "pointer-events-none opacity-0"
-    : `pointer-events-none transition-opacity duration-150 ${showRowActions ? "opacity-0" : ""}`;
+    : "pointer-events-none transition-opacity duration-150 max-sm:pr-12";
   const rowActionVisibilityClass = showRowActions
     ? "pointer-events-auto opacity-100"
     : "pointer-events-none opacity-0";
@@ -1538,11 +1545,15 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
         },
       });
     };
-    const hasOverflowingThreads = visibleProjectThreads.length > sidebarThreadPreviewCount;
-    const previewThreads =
-      isThreadListExpanded || !hasOverflowingThreads
-        ? visibleProjectThreads
-        : visibleProjectThreads.slice(0, sidebarThreadPreviewCount);
+    const threadPreview = getVisibleThreadsForProject({
+      threads: visibleProjectThreads,
+      activeThreadId: activeRouteThreadKey ?? undefined,
+      isThreadListExpanded,
+      previewLimit: sidebarThreadPreviewCount,
+      getThreadId: (thread) => scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id)),
+    });
+    const hasOverflowingThreads = threadPreview.hasHiddenThreads;
+    const previewThreads = threadPreview.visibleThreads;
     const visibleThreadKeys = new Set(
       [...previewThreads, ...(pinnedCollapsedThread ? [pinnedCollapsedThread] : [])].map((thread) =>
         scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id)),
@@ -1553,10 +1564,14 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
       : visibleProjectThreads.filter((thread) =>
           visibleThreadKeys.has(scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id))),
         );
-    const hiddenThreads = visibleProjectThreads.filter(
-      (thread) =>
-        !visibleThreadKeys.has(scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id))),
-    );
+    const hiddenThreads = pinnedCollapsedThread
+      ? visibleProjectThreads.filter(
+          (thread) =>
+            !visibleThreadKeys.has(
+              scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id)),
+            ),
+        )
+      : threadPreview.hiddenThreads;
     return {
       hasOverflowingThreads,
       hiddenThreadStatus: resolveProjectStatusIndicator(
@@ -3658,11 +3673,14 @@ export default function Sidebar() {
           return [];
         }
         const isThreadListExpanded = expandedThreadListsByProject.has(project.projectKey);
-        const hasOverflowingThreads = projectThreads.length > sidebarThreadPreviewCount;
-        const previewThreads =
-          isThreadListExpanded || !hasOverflowingThreads
-            ? projectThreads
-            : projectThreads.slice(0, sidebarThreadPreviewCount);
+        const threadPreview = getVisibleThreadsForProject({
+          threads: projectThreads,
+          activeThreadId: activeThreadKey,
+          isThreadListExpanded,
+          previewLimit: sidebarThreadPreviewCount,
+          getThreadId: (thread) => scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id)),
+        });
+        const previewThreads = threadPreview.visibleThreads;
         const renderedThreads = pinnedCollapsedThread ? [pinnedCollapsedThread] : previewThreads;
         return renderedThreads.map((thread) =>
           scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id)),

From 02c19ff7d88f489beaa7addec204da7ac14fafa9 Mon Sep 17 00:00:00 2001
From: Iliya Lyan <68940374+12ya@users.noreply.github.com>
Date: Mon, 13 Jul 2026 09:54:23 +0900
Subject: [PATCH 10/13] fix(sidebar): prevent edge divider drag jumps

Overlay the temporary divider when only pinned or unpinned threads exist so mounting it during a drag does not shift the active row.
---
 apps/web/src/components/Sidebar.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 5740a3ad8a9..13dafacff07 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -1030,9 +1030,11 @@ interface SidebarProjectThreadListProps {
 function SidebarPinnedDivider({
   nodeRef,
   flow,
+  overlaysThreadList = false,
 }: {
   nodeRef: (node: HTMLLIElement | null) => void;
   flow: ThreadPinDropAction | null;
+  overlaysThreadList?: boolean;
 }) {
   const colorClass =
     flow === "pin"
@@ -1044,7 +1046,7 @@ function SidebarPinnedDivider({
     <SidebarMenuSubItem
       ref={nodeRef}
       aria-hidden="true"
-      className={`flex h-3 w-full items-center gap-1.5 px-2 transition-colors before:h-px before:flex-1 after:h-px after:flex-1 ${colorClass}`}
+      className={`flex h-3 w-full items-center gap-1.5 px-2 transition-colors before:h-px before:flex-1 after:h-px after:flex-1 ${overlaysThreadList ? "absolute inset-x-0 z-10" : ""} ${colorClass}`}
     >
       <PinIcon className="size-2.5 shrink-0 transition-colors" />
     </SidebarMenuSubItem>
@@ -1163,6 +1165,8 @@ const SidebarProjectThreadList = memo(function SidebarProjectThreadList(
     (thread) =>
       !pinnedThreadKeys.includes(scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id))),
   );
+  const pinnedDividerOverlaysThreadList =
+    renderedPinnedThreads.length === 0 || renderedRegularThreads.length === 0;
   const renderThreadRow = (thread: SidebarThreadSummary) => {
     const threadKey = scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id));
     return (
@@ -1212,7 +1216,7 @@ const SidebarProjectThreadList = memo(function SidebarProjectThreadList(
     >
       <SidebarMenuSub
         ref={attachThreadListAutoAnimateRef}
-        className="mx-0.5 my-0 w-full translate-x-0 gap-0.5 overflow-hidden px-1 py-0 sm:mx-1 sm:px-1.5"
+        className="relative mx-0.5 my-0 w-full translate-x-0 gap-0.5 overflow-hidden px-1 py-0 sm:mx-1 sm:px-1.5"
       >
         {shouldShowThreadPanel && showEmptyThreadState ? (
           <SidebarMenuSubItem className="w-full" data-thread-selection-safe>
@@ -1234,7 +1238,13 @@ const SidebarProjectThreadList = memo(function SidebarProjectThreadList(
             isDragging: isThreadDragActive,
             pinnedCount: renderedPinnedThreads.length,
             regularCount: renderedRegularThreads.length,
-          }) && <SidebarPinnedDivider nodeRef={setDividerElement} flow={dragFlow} />}
+          }) && (
+            <SidebarPinnedDivider
+              nodeRef={setDividerElement}
+              flow={dragFlow}
+              overlaysThreadList={pinnedDividerOverlaysThreadList}
+            />
+          )}
         {shouldShowThreadPanel && renderedRegularThreads.length > 0 && (
           <SidebarThreadSection attachAutoAnimateRef={attachThreadListAutoAnimateRef}>
             {renderedRegularThreads.map(renderThreadRow)}

From f5a4caf8a0568ece8ae7d7bf01a89ec277acb655 Mon Sep 17 00:00:00 2001
From: Iliya Lyan <68940374+12ya@users.noreply.github.com>
Date: Mon, 13 Jul 2026 22:10:38 +0900
Subject: [PATCH 11/13] fix(sidebar): refresh previews on active thread changes

---
 apps/web/src/components/Sidebar.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 13dafacff07..82b7adf67b0 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -1592,6 +1592,7 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
       shouldShowThreadPanel: projectExpanded || pinnedCollapsedThread !== null,
     };
   }, [
+    activeRouteThreadKey,
     isThreadListExpanded,
     pinnedCollapsedThread,
     projectExpanded,

From 44e562b28ed33b1fc073018cd50f41118bfec3ee Mon Sep 17 00:00:00 2001
From: Iliya Lyan <68940374+12ya@users.noreply.github.com>
Date: Mon, 13 Jul 2026 22:10:55 +0900
Subject: [PATCH 12/13] fix(sidebar): anchor overlay dividers to group edges

---
 apps/web/src/components/Sidebar.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 82b7adf67b0..c080560b73c 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -1030,11 +1030,11 @@ interface SidebarProjectThreadListProps {
 function SidebarPinnedDivider({
   nodeRef,
   flow,
-  overlaysThreadList = false,
+  overlayEdge = null,
 }: {
   nodeRef: (node: HTMLLIElement | null) => void;
   flow: ThreadPinDropAction | null;
-  overlaysThreadList?: boolean;
+  overlayEdge?: "start" | "end" | null;
 }) {
   const colorClass =
     flow === "pin"
@@ -1046,7 +1046,7 @@ function SidebarPinnedDivider({
     <SidebarMenuSubItem
       ref={nodeRef}
       aria-hidden="true"
-      className={`flex h-3 w-full items-center gap-1.5 px-2 transition-colors before:h-px before:flex-1 after:h-px after:flex-1 ${overlaysThreadList ? "absolute inset-x-0 z-10" : ""} ${colorClass}`}
+      className={`flex h-3 w-full items-center gap-1.5 px-2 transition-colors before:h-px before:flex-1 after:h-px after:flex-1 ${overlayEdge ? `absolute inset-x-0 z-10 ${overlayEdge === "start" ? "top-0" : "bottom-0"}` : ""} ${colorClass}`}
     >
       <PinIcon className="size-2.5 shrink-0 transition-colors" />
     </SidebarMenuSubItem>
@@ -1165,8 +1165,12 @@ const SidebarProjectThreadList = memo(function SidebarProjectThreadList(
     (thread) =>
       !pinnedThreadKeys.includes(scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id))),
   );
-  const pinnedDividerOverlaysThreadList =
-    renderedPinnedThreads.length === 0 || renderedRegularThreads.length === 0;
+  const pinnedDividerOverlayEdge =
+    renderedPinnedThreads.length === 0
+      ? "start"
+      : renderedRegularThreads.length === 0
+        ? "end"
+        : null;
   const renderThreadRow = (thread: SidebarThreadSummary) => {
     const threadKey = scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id));
     return (
@@ -1242,7 +1246,7 @@ const SidebarProjectThreadList = memo(function SidebarProjectThreadList(
             <SidebarPinnedDivider
               nodeRef={setDividerElement}
               flow={dragFlow}
-              overlaysThreadList={pinnedDividerOverlaysThreadList}
+              overlayEdge={pinnedDividerOverlayEdge}
             />
           )}
         {shouldShowThreadPanel && renderedRegularThreads.length > 0 && (

From 3ad218d5d0c665781e436d4a74e26802a8206139 Mon Sep 17 00:00:00 2001
From: Iliya Lyan <68940374+12ya@users.noreply.github.com>
Date: Mon, 13 Jul 2026 22:11:22 +0900
Subject: [PATCH 13/13] fix(sidebar): hide empty thread overflow controls

---
 apps/web/src/components/Sidebar.logic.test.ts |  2 ++
 apps/web/src/components/Sidebar.logic.ts      | 11 ++++++-----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/components/Sidebar.logic.test.ts b/apps/web/src/components/Sidebar.logic.test.ts
index fda23dffa83..0b191925f0d 100644
--- a/apps/web/src/components/Sidebar.logic.test.ts
+++ b/apps/web/src/components/Sidebar.logic.test.ts
@@ -922,6 +922,8 @@ describe("getVisibleThreadsForProject", () => {
       getThreadId: (thread) => thread.scopedKey,
     });
 
+    expect(result.hasHiddenThreads).toBe(false);
+    expect(result.hiddenThreads).toEqual([]);
     expect(result.visibleThreads).toEqual(threads);
   });
 });
diff --git a/apps/web/src/components/Sidebar.logic.ts b/apps/web/src/components/Sidebar.logic.ts
index 1c81031130f..80712716f29 100644
--- a/apps/web/src/components/Sidebar.logic.ts
+++ b/apps/web/src/components/Sidebar.logic.ts
@@ -507,11 +507,11 @@ export function getVisibleThreadsForProject<T extends Pick<Thread, "id">>(input:
 } {
   const { activeThreadId, isThreadListExpanded, previewLimit, threads } = input;
   const getThreadId = input.getThreadId ?? ((thread: T) => thread.id);
-  const hasHiddenThreads = threads.length > previewLimit;
+  const exceedsPreviewLimit = threads.length > previewLimit;
 
-  if (!hasHiddenThreads || isThreadListExpanded) {
+  if (!exceedsPreviewLimit || isThreadListExpanded) {
     return {
-      hasHiddenThreads,
+      hasHiddenThreads: exceedsPreviewLimit,
       hiddenThreads: [],
       visibleThreads: [...threads],
     };
@@ -539,9 +539,10 @@ export function getVisibleThreadsForProject<T extends Pick<Thread, "id">>(input:
     [...previewThreads, activeThread].map((thread) => getThreadId(thread)),
   );
 
+  const hiddenThreads = threads.filter((thread) => !visibleThreadIds.has(getThreadId(thread)));
   return {
-    hasHiddenThreads: true,
-    hiddenThreads: threads.filter((thread) => !visibleThreadIds.has(getThreadId(thread))),
+    hasHiddenThreads: hiddenThreads.length > 0,
+    hiddenThreads,
     visibleThreads: threads.filter((thread) => visibleThreadIds.has(getThreadId(thread))),
   };
 }