From ca29b14ba9a24277c52a09afd957d1d629345860 Mon Sep 17 00:00:00 2001
From: Thomas Ricouard <ricouard77@gmail.com>
Date: Mon, 19 Jan 2026 07:44:39 +0100
Subject: [PATCH 1/2] feat: add pinned threads in sidebar

---
 src/App.tsx                                   |   8 +
 src/features/app/components/Sidebar.tsx       |  27 +++-
 src/features/app/components/ThreadList.tsx    | 112 +++++++------
 .../app/components/WorktreeSection.tsx        |  31 +++-
 src/features/app/hooks/useSidebarMenus.ts     |  34 +++-
 src/features/app/hooks/useThreadRows.ts       |  55 +++++--
 src/features/layout/hooks/useLayoutNodes.tsx  |   8 +
 src/features/threads/hooks/useThreads.ts      | 148 ++++++++++++++++--
 src/styles/sidebar.css                        |  20 +++
 9 files changed, 356 insertions(+), 87 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 843ad4eb7..54f2a305a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -579,6 +579,10 @@ function MainApp() {
     lastAgentMessageByThread,
     interruptTurn,
     removeThread,
+    pinThread,
+    unpinThread,
+    isThreadPinned,
+    getPinTimestamp,
     startThreadForWorkspace,
     listThreadsForWorkspace,
     loadOlderThreadsForWorkspace,
@@ -1044,6 +1048,10 @@ function MainApp() {
       });
       removeImagesForThread(threadId);
     },
+    pinThread,
+    unpinThread,
+    isThreadPinned,
+    getPinTimestamp,
     onDeleteWorkspace: (workspaceId) => {
       void removeWorkspace(workspaceId);
     },
diff --git a/src/features/app/components/Sidebar.tsx b/src/features/app/components/Sidebar.tsx
index 10b5aba28..325955311 100644
--- a/src/features/app/components/Sidebar.tsx
+++ b/src/features/app/components/Sidebar.tsx
@@ -54,6 +54,10 @@ type SidebarProps = {
   onToggleWorkspaceCollapse: (workspaceId: string, collapsed: boolean) => void;
   onSelectThread: (workspaceId: string, threadId: string) => void;
   onDeleteThread: (workspaceId: string, threadId: string) => void;
+  pinThread: (workspaceId: string, threadId: string) => boolean;
+  unpinThread: (workspaceId: string, threadId: string) => void;
+  isThreadPinned: (workspaceId: string, threadId: string) => boolean;
+  getPinTimestamp: (workspaceId: string, threadId: string) => number | null;
   onDeleteWorkspace: (workspaceId: string) => void;
   onDeleteWorktree: (workspaceId: string) => void;
   onLoadOlderThreads: (workspaceId: string) => void;
@@ -86,6 +90,10 @@ export function Sidebar({
   onToggleWorkspaceCollapse,
   onSelectThread,
   onDeleteThread,
+  pinThread,
+  unpinThread,
+  isThreadPinned,
+  getPinTimestamp,
   onDeleteWorkspace,
   onDeleteWorktree,
   onLoadOlderThreads,
@@ -114,6 +122,9 @@ export function Sidebar({
   const { showThreadMenu, showWorkspaceMenu, showWorktreeMenu } =
     useSidebarMenus({
       onDeleteThread,
+      onPinThread: pinThread,
+      onUnpinThread: unpinThread,
+      isThreadPinned,
       onReloadWorkspaceThreads,
       onDeleteWorkspace,
       onDeleteWorktree,
@@ -215,9 +226,15 @@ export function Sidebar({
                   const isCollapsed = entry.settings.sidebarCollapsed;
                   const isExpanded = expandedWorkspaces.has(entry.id);
                   const {
-                    rows: threadRows,
+                    pinnedRows,
+                    unpinnedRows,
                     totalRoots: totalThreadRoots,
-                  } = getThreadRows(threads, isExpanded);
+                  } = getThreadRows(
+                    threads,
+                    isExpanded,
+                    entry.id,
+                    getPinTimestamp,
+                  );
                   const showThreads = !isCollapsed && threads.length > 0;
                   const isLoadingThreads =
                     threadListLoadingByWorkspace[entry.id] ?? false;
@@ -290,6 +307,8 @@ export function Sidebar({
                           activeThreadId={activeThreadId}
                           getThreadRows={getThreadRows}
                           getThreadTime={getThreadTime}
+                          isThreadPinned={isThreadPinned}
+                          getPinTimestamp={getPinTimestamp}
                           onSelectWorkspace={onSelectWorkspace}
                           onConnectWorkspace={onConnectWorkspace}
                           onToggleWorkspaceCollapse={onToggleWorkspaceCollapse}
@@ -303,7 +322,8 @@ export function Sidebar({
                       {showThreads && (
                         <ThreadList
                           workspaceId={entry.id}
-                          threadRows={threadRows}
+                          pinnedRows={pinnedRows}
+                          unpinnedRows={unpinnedRows}
                           totalThreadRoots={totalThreadRoots}
                           isExpanded={isExpanded}
                           nextCursor={nextCursor}
@@ -312,6 +332,7 @@ export function Sidebar({
                           activeThreadId={activeThreadId}
                           threadStatusById={threadStatusById}
                           getThreadTime={getThreadTime}
+                          isThreadPinned={isThreadPinned}
                           onToggleExpanded={handleToggleExpanded}
                           onLoadOlderThreads={onLoadOlderThreads}
                           onSelectThread={onSelectThread}
diff --git a/src/features/app/components/ThreadList.tsx b/src/features/app/components/ThreadList.tsx
index 1a0987867..4e4502396 100644
--- a/src/features/app/components/ThreadList.tsx
+++ b/src/features/app/components/ThreadList.tsx
@@ -14,7 +14,8 @@ type ThreadRow = {
 
 type ThreadListProps = {
   workspaceId: string;
-  threadRows: ThreadRow[];
+  pinnedRows: ThreadRow[];
+  unpinnedRows: ThreadRow[];
   totalThreadRoots: number;
   isExpanded: boolean;
   nextCursor: string | null;
@@ -24,6 +25,7 @@ type ThreadListProps = {
   activeThreadId: string | null;
   threadStatusById: ThreadStatusMap;
   getThreadTime: (thread: ThreadSummary) => string | null;
+  isThreadPinned: (workspaceId: string, threadId: string) => boolean;
   onToggleExpanded: (workspaceId: string) => void;
   onLoadOlderThreads: (workspaceId: string) => void;
   onSelectThread: (workspaceId: string, threadId: string) => void;
@@ -31,12 +33,14 @@ type ThreadListProps = {
     event: MouseEvent,
     workspaceId: string,
     threadId: string,
+    canPin: boolean,
   ) => void;
 };
 
 export function ThreadList({
   workspaceId,
-  threadRows,
+  pinnedRows,
+  unpinnedRows,
   totalThreadRoots,
   isExpanded,
   nextCursor,
@@ -46,59 +50,71 @@ export function ThreadList({
   activeThreadId,
   threadStatusById,
   getThreadTime,
+  isThreadPinned,
   onToggleExpanded,
   onLoadOlderThreads,
   onSelectThread,
   onShowThreadMenu,
 }: ThreadListProps) {
-  return (
-    <div className={`thread-list${nested ? " thread-list-nested" : ""}`}>
-      {threadRows.map(({ thread, depth }) => {
-        const relativeTime = getThreadTime(thread);
-        const indentStyle =
-          depth > 0
-            ? ({ "--thread-indent": `${depth * 14}px` } as CSSProperties)
-            : undefined;
-        const status = threadStatusById[thread.id];
-        const statusClass = status?.isReviewing
-          ? "reviewing"
-          : status?.isProcessing
-            ? "processing"
-            : status?.hasUnread
-              ? "unread"
-              : "ready";
+  const renderThreadRow = ({ thread, depth }: ThreadRow) => {
+    const relativeTime = getThreadTime(thread);
+    const indentStyle =
+      depth > 0
+        ? ({ "--thread-indent": `${depth * 14}px` } as CSSProperties)
+        : undefined;
+    const status = threadStatusById[thread.id];
+    const statusClass = status?.isReviewing
+      ? "reviewing"
+      : status?.isProcessing
+        ? "processing"
+        : status?.hasUnread
+          ? "unread"
+          : "ready";
+    const canPin = depth === 0;
+    const isPinned = canPin && isThreadPinned(workspaceId, thread.id);
 
-        return (
-          <div
-            key={thread.id}
-            className={`thread-row ${
-              workspaceId === activeWorkspaceId && thread.id === activeThreadId
-                ? "active"
-                : ""
-            }`}
-            style={indentStyle}
-            onClick={() => onSelectThread(workspaceId, thread.id)}
-            onContextMenu={(event) => onShowThreadMenu(event, workspaceId, thread.id)}
-            role="button"
-            tabIndex={0}
-            onKeyDown={(event) => {
-              if (event.key === "Enter" || event.key === " ") {
-                event.preventDefault();
-                onSelectThread(workspaceId, thread.id);
-              }
-            }}
-          >
-            <span className={`thread-status ${statusClass}`} aria-hidden />
-            <span className="thread-name">{thread.name}</span>
-            <div className="thread-meta">
-              {relativeTime && <span className="thread-time">{relativeTime}</span>}
-              <div className="thread-menu">
-                <div className="thread-menu-trigger" aria-hidden="true" />
-              </div>
-            </div>
+    return (
+      <div
+        key={thread.id}
+        className={`thread-row ${
+          workspaceId === activeWorkspaceId && thread.id === activeThreadId
+            ? "active"
+            : ""
+        }`}
+        style={indentStyle}
+        onClick={() => onSelectThread(workspaceId, thread.id)}
+        onContextMenu={(event) =>
+          onShowThreadMenu(event, workspaceId, thread.id, canPin)
+        }
+        role="button"
+        tabIndex={0}
+        onKeyDown={(event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            onSelectThread(workspaceId, thread.id);
+          }
+        }}
+      >
+        <span className={`thread-status ${statusClass}`} aria-hidden />
+        {isPinned && <span className="thread-pin-icon" aria-label="Pinned">📌</span>}
+        <span className="thread-name">{thread.name}</span>
+        <div className="thread-meta">
+          {relativeTime && <span className="thread-time">{relativeTime}</span>}
+          <div className="thread-menu">
+            <div className="thread-menu-trigger" aria-hidden="true" />
           </div>
-        );
-      })}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className={`thread-list${nested ? " thread-list-nested" : ""}`}>
+      {pinnedRows.map((row) => renderThreadRow(row))}
+      {pinnedRows.length > 0 && unpinnedRows.length > 0 && (
+        <div className="thread-list-separator" aria-hidden="true" />
+      )}
+      {unpinnedRows.map((row) => renderThreadRow(row))}
       {totalThreadRoots > 3 && (
         <button
           className="thread-more"
diff --git a/src/features/app/components/WorktreeSection.tsx b/src/features/app/components/WorktreeSection.tsx
index 6ce375613..d4d6cf665 100644
--- a/src/features/app/components/WorktreeSection.tsx
+++ b/src/features/app/components/WorktreeSection.tsx
@@ -12,7 +12,8 @@ type ThreadStatusMap = Record<
 >;
 
 type ThreadRowsResult = {
-  rows: Array<{ thread: ThreadSummary; depth: number }>;
+  pinnedRows: Array<{ thread: ThreadSummary; depth: number }>;
+  unpinnedRows: Array<{ thread: ThreadSummary; depth: number }>;
   totalRoots: number;
   hasMoreRoots: boolean;
 };
@@ -27,8 +28,15 @@ type WorktreeSectionProps = {
   expandedWorkspaces: Set<string>;
   activeWorkspaceId: string | null;
   activeThreadId: string | null;
-  getThreadRows: (threads: ThreadSummary[], isExpanded: boolean) => ThreadRowsResult;
+  getThreadRows: (
+    threads: ThreadSummary[],
+    isExpanded: boolean,
+    workspaceId: string,
+    getPinTimestamp: (workspaceId: string, threadId: string) => number | null,
+  ) => ThreadRowsResult;
   getThreadTime: (thread: ThreadSummary) => string | null;
+  isThreadPinned: (workspaceId: string, threadId: string) => boolean;
+  getPinTimestamp: (workspaceId: string, threadId: string) => number | null;
   onSelectWorkspace: (id: string) => void;
   onConnectWorkspace: (workspace: WorkspaceInfo) => void;
   onToggleWorkspaceCollapse: (workspaceId: string, collapsed: boolean) => void;
@@ -37,6 +45,7 @@ type WorktreeSectionProps = {
     event: MouseEvent,
     workspaceId: string,
     threadId: string,
+    canPin: boolean,
   ) => void;
   onShowWorktreeMenu: (event: MouseEvent, workspaceId: string) => void;
   onToggleExpanded: (workspaceId: string) => void;
@@ -55,6 +64,8 @@ export function WorktreeSection({
   activeThreadId,
   getThreadRows,
   getThreadTime,
+  isThreadPinned,
+  getPinTimestamp,
   onSelectWorkspace,
   onConnectWorkspace,
   onToggleWorkspaceCollapse,
@@ -91,8 +102,16 @@ export function WorktreeSection({
           const isWorktreePaging =
             threadListPagingByWorkspace[worktree.id] ?? false;
           const isWorktreeExpanded = expandedWorkspaces.has(worktree.id);
-          const { rows: worktreeThreadRows, totalRoots: totalWorktreeRoots } =
-            getThreadRows(worktreeThreads, isWorktreeExpanded);
+          const {
+            pinnedRows: worktreePinnedRows,
+            unpinnedRows: worktreeThreadRows,
+            totalRoots: totalWorktreeRoots,
+          } = getThreadRows(
+            worktreeThreads,
+            isWorktreeExpanded,
+            worktree.id,
+            getPinTimestamp,
+          );
 
           return (
             <WorktreeCard
@@ -107,7 +126,8 @@ export function WorktreeSection({
               {showWorktreeThreads && (
                 <ThreadList
                   workspaceId={worktree.id}
-                  threadRows={worktreeThreadRows}
+                  pinnedRows={worktreePinnedRows}
+                  unpinnedRows={worktreeThreadRows}
                   totalThreadRoots={totalWorktreeRoots}
                   isExpanded={isWorktreeExpanded}
                   nextCursor={worktreeNextCursor}
@@ -117,6 +137,7 @@ export function WorktreeSection({
                   activeThreadId={activeThreadId}
                   threadStatusById={threadStatusById}
                   getThreadTime={getThreadTime}
+                  isThreadPinned={isThreadPinned}
                   onToggleExpanded={onToggleExpanded}
                   onLoadOlderThreads={onLoadOlderThreads}
                   onSelectThread={onSelectThread}
diff --git a/src/features/app/hooks/useSidebarMenus.ts b/src/features/app/hooks/useSidebarMenus.ts
index 3eff26c34..d7cd3791b 100644
--- a/src/features/app/hooks/useSidebarMenus.ts
+++ b/src/features/app/hooks/useSidebarMenus.ts
@@ -5,6 +5,9 @@ import { getCurrentWindow } from "@tauri-apps/api/window";
 
 type SidebarMenuHandlers = {
   onDeleteThread: (workspaceId: string, threadId: string) => void;
+  onPinThread: (workspaceId: string, threadId: string) => void;
+  onUnpinThread: (workspaceId: string, threadId: string) => void;
+  isThreadPinned: (workspaceId: string, threadId: string) => boolean;
   onReloadWorkspaceThreads: (workspaceId: string) => void;
   onDeleteWorkspace: (workspaceId: string) => void;
   onDeleteWorktree: (workspaceId: string) => void;
@@ -12,14 +15,38 @@ type SidebarMenuHandlers = {
 
 export function useSidebarMenus({
   onDeleteThread,
+  onPinThread,
+  onUnpinThread,
+  isThreadPinned,
   onReloadWorkspaceThreads,
   onDeleteWorkspace,
   onDeleteWorktree,
 }: SidebarMenuHandlers) {
   const showThreadMenu = useCallback(
-    async (event: MouseEvent, workspaceId: string, threadId: string) => {
+    async (
+      event: MouseEvent,
+      workspaceId: string,
+      threadId: string,
+      canPin: boolean,
+    ) => {
       event.preventDefault();
       event.stopPropagation();
+      const items = [];
+      if (canPin) {
+        const isPinned = isThreadPinned(workspaceId, threadId);
+        items.push(
+          await MenuItem.new({
+            text: isPinned ? "Unpin" : "Pin",
+            action: () => {
+              if (isPinned) {
+                onUnpinThread(workspaceId, threadId);
+              } else {
+                onPinThread(workspaceId, threadId);
+              }
+            },
+          }),
+        );
+      }
       const archiveItem = await MenuItem.new({
         text: "Archive",
         action: () => onDeleteThread(workspaceId, threadId),
@@ -30,12 +57,13 @@ export function useSidebarMenus({
           await navigator.clipboard.writeText(threadId);
         },
       });
-      const menu = await Menu.new({ items: [copyItem, archiveItem] });
+      items.push(copyItem, archiveItem);
+      const menu = await Menu.new({ items });
       const window = getCurrentWindow();
       const position = new LogicalPosition(event.clientX, event.clientY);
       await menu.popup(position, window);
     },
-    [onDeleteThread],
+    [isThreadPinned, onDeleteThread, onPinThread, onUnpinThread],
   );
 
   const showWorkspaceMenu = useCallback(
diff --git a/src/features/app/hooks/useThreadRows.ts b/src/features/app/hooks/useThreadRows.ts
index d8f59d71b..9d1ae9e52 100644
--- a/src/features/app/hooks/useThreadRows.ts
+++ b/src/features/app/hooks/useThreadRows.ts
@@ -8,14 +8,20 @@ type ThreadRow = {
 };
 
 type ThreadRowResult = {
-  rows: ThreadRow[];
+  pinnedRows: ThreadRow[];
+  unpinnedRows: ThreadRow[];
   totalRoots: number;
   hasMoreRoots: boolean;
 };
 
 export function useThreadRows(threadParentById: Record<string, string>) {
   const getThreadRows = useCallback(
-    (threads: ThreadSummary[], isExpanded: boolean): ThreadRowResult => {
+    (
+      threads: ThreadSummary[],
+      isExpanded: boolean,
+      workspaceId: string,
+      getPinTimestamp: (workspaceId: string, threadId: string) => number | null,
+    ): ThreadRowResult => {
       const threadIds = new Set(threads.map((thread) => thread.id));
       const childrenByParent = new Map<string, ThreadSummary[]>();
       const roots: ThreadSummary[] = [];
@@ -31,21 +37,48 @@ export function useThreadRows(threadParentById: Record<string, string>) {
         }
       });
 
-      const visibleRootCount = isExpanded ? roots.length : 3;
-      const visibleRoots = roots.slice(0, visibleRootCount);
-      const rows: ThreadRow[] = [];
-      const appendThread = (thread: ThreadSummary, depth: number) => {
+      const pinnedRoots: ThreadSummary[] = [];
+      const unpinnedRoots: ThreadSummary[] = [];
+
+      roots.forEach((thread) => {
+        const pinTime = getPinTimestamp(workspaceId, thread.id);
+        if (pinTime !== null) {
+          pinnedRoots.push(thread);
+        } else {
+          unpinnedRoots.push(thread);
+        }
+      });
+
+      pinnedRoots.sort((a, b) => {
+        const aTime = getPinTimestamp(workspaceId, a.id) ?? 0;
+        const bTime = getPinTimestamp(workspaceId, b.id) ?? 0;
+        return aTime - bTime;
+      });
+
+      const visibleRootCount = isExpanded ? unpinnedRoots.length : 3;
+      const visibleRoots = unpinnedRoots.slice(0, visibleRootCount);
+
+      const appendThread = (
+        thread: ThreadSummary,
+        depth: number,
+        rows: ThreadRow[],
+      ) => {
         rows.push({ thread, depth });
         const children = childrenByParent.get(thread.id) ?? [];
-        children.forEach((child) => appendThread(child, depth + 1));
+        children.forEach((child) => appendThread(child, depth + 1, rows));
       };
 
-      visibleRoots.forEach((thread) => appendThread(thread, 0));
+      const pinnedRows: ThreadRow[] = [];
+      pinnedRoots.forEach((thread) => appendThread(thread, 0, pinnedRows));
+
+      const unpinnedRows: ThreadRow[] = [];
+      visibleRoots.forEach((thread) => appendThread(thread, 0, unpinnedRows));
 
       return {
-        rows,
-        totalRoots: roots.length,
-        hasMoreRoots: roots.length > visibleRootCount,
+        pinnedRows,
+        unpinnedRows,
+        totalRoots: unpinnedRoots.length,
+        hasMoreRoots: unpinnedRoots.length > visibleRootCount,
       };
     },
     [threadParentById],
diff --git a/src/features/layout/hooks/useLayoutNodes.tsx b/src/features/layout/hooks/useLayoutNodes.tsx
index d1b20a131..cf13a870c 100644
--- a/src/features/layout/hooks/useLayoutNodes.tsx
+++ b/src/features/layout/hooks/useLayoutNodes.tsx
@@ -95,6 +95,10 @@ type LayoutNodesOptions = {
   onToggleWorkspaceCollapse: (workspaceId: string, collapsed: boolean) => void;
   onSelectThread: (workspaceId: string, threadId: string) => void;
   onDeleteThread: (workspaceId: string, threadId: string) => void;
+  pinThread: (workspaceId: string, threadId: string) => boolean;
+  unpinThread: (workspaceId: string, threadId: string) => void;
+  isThreadPinned: (workspaceId: string, threadId: string) => boolean;
+  getPinTimestamp: (workspaceId: string, threadId: string) => number | null;
   onDeleteWorkspace: (workspaceId: string) => void;
   onDeleteWorktree: (workspaceId: string) => void;
   onLoadOlderThreads: (workspaceId: string) => void;
@@ -308,6 +312,10 @@ export function useLayoutNodes(options: LayoutNodesOptions): LayoutNodesResult {
       onToggleWorkspaceCollapse={options.onToggleWorkspaceCollapse}
       onSelectThread={options.onSelectThread}
       onDeleteThread={options.onDeleteThread}
+      pinThread={options.pinThread}
+      unpinThread={options.unpinThread}
+      isThreadPinned={options.isThreadPinned}
+      getPinTimestamp={options.getPinTimestamp}
       onDeleteWorkspace={options.onDeleteWorkspace}
       onDeleteWorktree={options.onDeleteWorktree}
       onLoadOlderThreads={options.onLoadOlderThreads}
diff --git a/src/features/threads/hooks/useThreads.ts b/src/features/threads/hooks/useThreads.ts
index cfb497e8f..ea756101e 100644
--- a/src/features/threads/hooks/useThreads.ts
+++ b/src/features/threads/hooks/useThreads.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useReducer, useRef } from "react";
+import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from "react";
 import type {
   ApprovalRequest,
   AppServerEvent,
@@ -37,8 +37,11 @@ import { expandCustomPromptText } from "../../../utils/customPrompts";
 import { initialState, threadReducer } from "./useThreadsReducer";
 
 const STORAGE_KEY_THREAD_ACTIVITY = "codexmonitor.threadLastUserActivity";
+const STORAGE_KEY_PINNED_THREADS = "codexmonitor.pinnedThreads";
+const MAX_PINS_SOFT_LIMIT = 5;
 
 type ThreadActivityMap = Record<string, Record<string, number>>;
+type PinnedThreadsMap = Record<string, number>;
 
 function loadThreadActivity(): ThreadActivityMap {
   if (typeof window === "undefined") {
@@ -73,6 +76,43 @@ function saveThreadActivity(activity: ThreadActivityMap) {
   }
 }
 
+function makePinKey(workspaceId: string, threadId: string): string {
+  return `${workspaceId}:${threadId}`;
+}
+
+function loadPinnedThreads(): PinnedThreadsMap {
+  if (typeof window === "undefined") {
+    return {};
+  }
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY_PINNED_THREADS);
+    if (!raw) {
+      return {};
+    }
+    const parsed = JSON.parse(raw) as PinnedThreadsMap;
+    if (!parsed || typeof parsed !== "object") {
+      return {};
+    }
+    return parsed;
+  } catch {
+    return {};
+  }
+}
+
+function savePinnedThreads(pinned: PinnedThreadsMap) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  try {
+    window.localStorage.setItem(
+      STORAGE_KEY_PINNED_THREADS,
+      JSON.stringify(pinned),
+    );
+  } catch {
+    // Best-effort persistence; ignore write failures.
+  }
+}
+
 type UseThreadsOptions = {
   activeWorkspace: WorkspaceInfo | null;
   onWorkspaceConnected: (id: string) => void;
@@ -348,6 +388,9 @@ export function useThreads({
   const [state, dispatch] = useReducer(threadReducer, initialState);
   const loadedThreads = useRef<Record<string, boolean>>({});
   const threadActivityRef = useRef<ThreadActivityMap>(loadThreadActivity());
+  const pinnedThreadsRef = useRef<PinnedThreadsMap>(loadPinnedThreads());
+  const [pinnedThreadsVersion, setPinnedThreadsVersion] = useState(0);
+  void pinnedThreadsVersion;
 
   const recordThreadActivity = useCallback(
     (workspaceId: string, threadId: string, timestamp = Date.now()) => {
@@ -365,6 +408,69 @@ export function useThreads({
     [],
   );
 
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    pinnedThreadsRef.current = loadPinnedThreads();
+    const handleStorage = (event: StorageEvent) => {
+      if (event.key !== STORAGE_KEY_PINNED_THREADS) {
+        return;
+      }
+      pinnedThreadsRef.current = loadPinnedThreads();
+      setPinnedThreadsVersion((version) => version + 1);
+    };
+    window.addEventListener("storage", handleStorage);
+    return () => window.removeEventListener("storage", handleStorage);
+  }, []);
+
+  const pinThread = useCallback((workspaceId: string, threadId: string): boolean => {
+    const key = makePinKey(workspaceId, threadId);
+    if (key in pinnedThreadsRef.current) {
+      return false;
+    }
+    const currentPinsForWorkspace = Object.keys(pinnedThreadsRef.current).filter(
+      (entry) => entry.startsWith(`${workspaceId}:`),
+    ).length;
+    if (currentPinsForWorkspace >= MAX_PINS_SOFT_LIMIT) {
+      console.warn(
+        `Pin limit reached (${MAX_PINS_SOFT_LIMIT}). Consider unpinning some threads.`,
+      );
+    }
+    const next = { ...pinnedThreadsRef.current, [key]: Date.now() };
+    pinnedThreadsRef.current = next;
+    savePinnedThreads(next);
+    setPinnedThreadsVersion((version) => version + 1);
+    return true;
+  }, []);
+
+  const unpinThread = useCallback((workspaceId: string, threadId: string) => {
+    const key = makePinKey(workspaceId, threadId);
+    if (!(key in pinnedThreadsRef.current)) {
+      return;
+    }
+    const { [key]: _removed, ...rest } = pinnedThreadsRef.current;
+    pinnedThreadsRef.current = rest;
+    savePinnedThreads(rest);
+    setPinnedThreadsVersion((version) => version + 1);
+  }, []);
+
+  const isThreadPinned = useCallback(
+    (workspaceId: string, threadId: string): boolean => {
+      const key = makePinKey(workspaceId, threadId);
+      return key in pinnedThreadsRef.current;
+    },
+    [],
+  );
+
+  const getPinTimestamp = useCallback(
+    (workspaceId: string, threadId: string): number | null => {
+      const key = makePinKey(workspaceId, threadId);
+      return pinnedThreadsRef.current[key] ?? null;
+    },
+    [],
+  );
+
   const activeWorkspaceId = activeWorkspace?.id ?? null;
   const activeThreadId = useMemo(() => {
     if (!activeWorkspaceId) {
@@ -1489,22 +1595,26 @@ export function useThreads({
     [activeWorkspaceId, resumeThreadForWorkspace],
   );
 
-  const removeThread = useCallback((workspaceId: string, threadId: string) => {
-    dispatch({ type: "removeThread", workspaceId, threadId });
-    (async () => {
-      try {
-        await archiveThreadService(workspaceId, threadId);
-      } catch (error) {
-        onDebug?.({
-          id: `${Date.now()}-client-thread-archive-error`,
-          timestamp: Date.now(),
-          source: "error",
-          label: "thread/archive error",
-          payload: error instanceof Error ? error.message : String(error),
-        });
-      }
-    })();
-  }, [onDebug]);
+  const removeThread = useCallback(
+    (workspaceId: string, threadId: string) => {
+      unpinThread(workspaceId, threadId);
+      dispatch({ type: "removeThread", workspaceId, threadId });
+      (async () => {
+        try {
+          await archiveThreadService(workspaceId, threadId);
+        } catch (error) {
+          onDebug?.({
+            id: `${Date.now()}-client-thread-archive-error`,
+            timestamp: Date.now(),
+            source: "error",
+            label: "thread/archive error",
+            payload: error instanceof Error ? error.message : String(error),
+          });
+        }
+      })();
+    },
+    [onDebug, unpinThread],
+  );
 
   useEffect(() => {
     if (activeWorkspace?.connected) {
@@ -1531,6 +1641,10 @@ export function useThreads({
     refreshAccountRateLimits,
     interruptTurn,
     removeThread,
+    pinThread,
+    unpinThread,
+    isThreadPinned,
+    getPinTimestamp,
     startThread,
     startThreadForWorkspace,
     listThreadsForWorkspace,
diff --git a/src/styles/sidebar.css b/src/styles/sidebar.css
index 73301f298..7cdb5497b 100644
--- a/src/styles/sidebar.css
+++ b/src/styles/sidebar.css
@@ -441,6 +441,16 @@
   margin-left: 4px;
 }
 
+.thread-pin-icon {
+  font-size: 10px;
+  margin-right: 2px;
+  opacity: 0.7;
+}
+
+.thread-row:hover .thread-pin-icon {
+  opacity: 1;
+}
+
 .thread-status.processing {
   background: #ff9f43;
   box-shadow: 0 0 8px rgba(255, 159, 67, 0.8);
@@ -535,6 +545,16 @@
   color: var(--text-stronger);
 }
 
+.thread-list-separator {
+  height: 1px;
+  margin: 6px 16px 6px 10px;
+  background: linear-gradient(
+    90deg,
+    var(--border-subtle) 0%,
+    transparent 100%
+  );
+}
+
 .worktree-section {
   margin-top: 6px;
   padding-left: 12px;

From ae247294a362e3847b20c976157f6fdfceaedb76 Mon Sep 17 00:00:00 2001
From: Thomas Ricouard <ricouard77@gmail.com>
Date: Mon, 19 Jan 2026 09:17:53 +0100
Subject: [PATCH 2/2] feat: add pinned threads section

---
 .../app/components/PinnedThreadList.tsx       | 101 ++++++++++++++++++
 src/features/app/components/Sidebar.tsx       |  81 +++++++++++++-
 .../app/components/WorktreeSection.tsx        |   3 +-
 src/styles/sidebar.css                        |   7 ++
 4 files changed, 188 insertions(+), 4 deletions(-)
 create mode 100644 src/features/app/components/PinnedThreadList.tsx

diff --git a/src/features/app/components/PinnedThreadList.tsx b/src/features/app/components/PinnedThreadList.tsx
new file mode 100644
index 000000000..19eddb0a0
--- /dev/null
+++ b/src/features/app/components/PinnedThreadList.tsx
@@ -0,0 +1,101 @@
+import type { CSSProperties, MouseEvent } from "react";
+
+import type { ThreadSummary } from "../../../types";
+
+type ThreadStatusMap = Record<
+  string,
+  { isProcessing: boolean; hasUnread: boolean; isReviewing: boolean }
+>;
+
+type PinnedThreadRow = {
+  thread: ThreadSummary;
+  depth: number;
+  workspaceId: string;
+};
+
+type PinnedThreadListProps = {
+  rows: PinnedThreadRow[];
+  activeWorkspaceId: string | null;
+  activeThreadId: string | null;
+  threadStatusById: ThreadStatusMap;
+  getThreadTime: (thread: ThreadSummary) => string | null;
+  isThreadPinned: (workspaceId: string, threadId: string) => boolean;
+  onSelectThread: (workspaceId: string, threadId: string) => void;
+  onShowThreadMenu: (
+    event: MouseEvent,
+    workspaceId: string,
+    threadId: string,
+    canPin: boolean,
+  ) => void;
+};
+
+export function PinnedThreadList({
+  rows,
+  activeWorkspaceId,
+  activeThreadId,
+  threadStatusById,
+  getThreadTime,
+  isThreadPinned,
+  onSelectThread,
+  onShowThreadMenu,
+}: PinnedThreadListProps) {
+  return (
+    <div className="thread-list pinned-thread-list">
+      {rows.map(({ thread, depth, workspaceId }) => {
+        const relativeTime = getThreadTime(thread);
+        const indentStyle =
+          depth > 0
+            ? ({ "--thread-indent": `${depth * 14}px` } as CSSProperties)
+            : undefined;
+        const status = threadStatusById[thread.id];
+        const statusClass = status?.isReviewing
+          ? "reviewing"
+          : status?.isProcessing
+            ? "processing"
+            : status?.hasUnread
+              ? "unread"
+              : "ready";
+        const canPin = depth === 0;
+        const isPinned = canPin && isThreadPinned(workspaceId, thread.id);
+
+        return (
+          <div
+            key={`${workspaceId}:${thread.id}`}
+            className={`thread-row ${
+              workspaceId === activeWorkspaceId && thread.id === activeThreadId
+                ? "active"
+                : ""
+            }`}
+            style={indentStyle}
+            onClick={() => onSelectThread(workspaceId, thread.id)}
+            onContextMenu={(event) =>
+              onShowThreadMenu(event, workspaceId, thread.id, canPin)
+            }
+            role="button"
+            tabIndex={0}
+            onKeyDown={(event) => {
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                onSelectThread(workspaceId, thread.id);
+              }
+            }}
+          >
+            <span className={`thread-status ${statusClass}`} aria-hidden />
+            {isPinned && (
+              <span className="thread-pin-icon" aria-label="Pinned">
+                📌
+              </span>
+            )}
+            <span className="thread-name">{thread.name}</span>
+            <div className="thread-meta">
+              {relativeTime && <span className="thread-time">{relativeTime}</span>}
+              <div className="thread-menu">
+                <div className="thread-menu-trigger" aria-hidden="true" />
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/features/app/components/Sidebar.tsx b/src/features/app/components/Sidebar.tsx
index ac958de21..cd17de694 100644
--- a/src/features/app/components/Sidebar.tsx
+++ b/src/features/app/components/Sidebar.tsx
@@ -7,6 +7,7 @@ import { SidebarHeader } from "./SidebarHeader";
 import { ThreadList } from "./ThreadList";
 import { ThreadLoading } from "./ThreadLoading";
 import { WorktreeSection } from "./WorktreeSection";
+import { PinnedThreadList } from "./PinnedThreadList";
 import { WorkspaceCard } from "./WorkspaceCard";
 import { WorkspaceGroup } from "./WorkspaceGroup";
 import { useCollapsedGroups } from "../hooks/useCollapsedGroups";
@@ -141,6 +142,66 @@ export function Sidebar({
     showWeekly,
   } = getUsageLabels(accountRateLimits);
 
+  const pinnedThreadRows = (() => {
+    type ThreadRow = { thread: ThreadSummary; depth: number };
+    const groups: Array<{
+      pinTime: number;
+      workspaceId: string;
+      rows: ThreadRow[];
+    }> = [];
+
+    workspaces.forEach((workspace) => {
+      const threads = threadsByWorkspace[workspace.id] ?? [];
+      if (!threads.length) {
+        return;
+      }
+      const { pinnedRows } = getThreadRows(
+        threads,
+        true,
+        workspace.id,
+        getPinTimestamp,
+      );
+      if (!pinnedRows.length) {
+        return;
+      }
+      let currentRows: ThreadRow[] = [];
+      let currentPinTime: number | null = null;
+
+      pinnedRows.forEach((row) => {
+        if (row.depth === 0) {
+          if (currentRows.length && currentPinTime !== null) {
+            groups.push({
+              pinTime: currentPinTime,
+              workspaceId: workspace.id,
+              rows: currentRows,
+            });
+          }
+          currentRows = [row];
+          currentPinTime = getPinTimestamp(workspace.id, row.thread.id);
+        } else {
+          currentRows.push(row);
+        }
+      });
+
+      if (currentRows.length && currentPinTime !== null) {
+        groups.push({
+          pinTime: currentPinTime,
+          workspaceId: workspace.id,
+          rows: currentRows,
+        });
+      }
+    });
+
+    return groups
+      .sort((a, b) => a.pinTime - b.pinTime)
+      .flatMap((group) =>
+        group.rows.map((row) => ({
+          ...row,
+          workspaceId: group.workspaceId,
+        })),
+      );
+  })();
+
   const worktreesByParent = useMemo(() => {
     const worktrees = new Map<string, WorkspaceInfo[]>();
     workspaces
@@ -208,6 +269,23 @@ export function Sidebar({
         ref={sidebarBodyRef}
       >
         <div className="workspace-list">
+          {pinnedThreadRows.length > 0 && (
+            <div className="pinned-section">
+              <div className="workspace-group-header">
+                <div className="workspace-group-label">Pinned</div>
+              </div>
+              <PinnedThreadList
+                rows={pinnedThreadRows}
+                activeWorkspaceId={activeWorkspaceId}
+                activeThreadId={activeThreadId}
+                threadStatusById={threadStatusById}
+                getThreadTime={getThreadTime}
+                isThreadPinned={isThreadPinned}
+                onSelectThread={onSelectThread}
+                onShowThreadMenu={showThreadMenu}
+              />
+            </div>
+          )}
           {groupedWorkspaces.map((group) => {
             const groupId = group.id;
             const isGroupCollapsed = Boolean(
@@ -229,7 +307,6 @@ export function Sidebar({
                   const isCollapsed = entry.settings.sidebarCollapsed;
                   const isExpanded = expandedWorkspaces.has(entry.id);
                   const {
-                    pinnedRows,
                     unpinnedRows,
                     totalRoots: totalThreadRoots,
                   } = getThreadRows(
@@ -325,7 +402,7 @@ export function Sidebar({
                       {showThreads && (
                         <ThreadList
                           workspaceId={entry.id}
-                          pinnedRows={pinnedRows}
+                          pinnedRows={[]}
                           unpinnedRows={unpinnedRows}
                           totalThreadRoots={totalThreadRoots}
                           isExpanded={isExpanded}
diff --git a/src/features/app/components/WorktreeSection.tsx b/src/features/app/components/WorktreeSection.tsx
index d4d6cf665..4a670b102 100644
--- a/src/features/app/components/WorktreeSection.tsx
+++ b/src/features/app/components/WorktreeSection.tsx
@@ -103,7 +103,6 @@ export function WorktreeSection({
             threadListPagingByWorkspace[worktree.id] ?? false;
           const isWorktreeExpanded = expandedWorkspaces.has(worktree.id);
           const {
-            pinnedRows: worktreePinnedRows,
             unpinnedRows: worktreeThreadRows,
             totalRoots: totalWorktreeRoots,
           } = getThreadRows(
@@ -126,7 +125,7 @@ export function WorktreeSection({
               {showWorktreeThreads && (
                 <ThreadList
                   workspaceId={worktree.id}
-                  pinnedRows={worktreePinnedRows}
+                  pinnedRows={[]}
                   unpinnedRows={worktreeThreadRows}
                   totalThreadRoots={totalWorktreeRoots}
                   isExpanded={isWorktreeExpanded}
diff --git a/src/styles/sidebar.css b/src/styles/sidebar.css
index 7cdb5497b..950f6c2be 100644
--- a/src/styles/sidebar.css
+++ b/src/styles/sidebar.css
@@ -382,6 +382,13 @@
   margin-left: 0;
 }
 
+.pinned-section {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 12px;
+}
+
 .thread-list-nested {
   margin-left: 16px;
 }