feat: add pinned threads to sidebar (pin/unpin, persisted, menu & UI)

src/App.tsx

@@ -594,6 +594,10 @@ function MainApp() {
     lastAgentMessageByThread,
     interruptTurn,
     removeThread,
+    pinThread,
+    unpinThread,
+    isThreadPinned,
+    getPinTimestamp,
     renameThread,
     startThreadForWorkspace,
     listThreadsForWorkspace,
@@ -1185,6 +1189,10 @@ function MainApp() {
       });
       removeImagesForThread(threadId);
     },
+    pinThread,
+    unpinThread,
+    isThreadPinned,
+    getPinTimestamp,
     onRenameThread: (workspaceId, threadId) => {
       handleRenameThread(workspaceId, threadId);
     },

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>
+  );
+}

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";
@@ -54,6 +55,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;
   onRenameThread: (workspaceId: string, threadId: string) => void;
   onDeleteWorkspace: (workspaceId: string) => void;
   onDeleteWorktree: (workspaceId: string) => void;
@@ -87,6 +92,10 @@ export function Sidebar({
   onToggleWorkspaceCollapse,
   onSelectThread,
   onDeleteThread,
+  pinThread,
+  unpinThread,
+  isThreadPinned,
+  getPinTimestamp,
   onRenameThread,
   onDeleteWorkspace,
   onDeleteWorktree,
@@ -116,6 +125,9 @@ export function Sidebar({
   const { showThreadMenu, showWorkspaceMenu, showWorktreeMenu } =
     useSidebarMenus({
       onDeleteThread,
+      onPinThread: pinThread,
+      onUnpinThread: unpinThread,
+      isThreadPinned,
       onRenameThread,
       onReloadWorkspaceThreads,
       onDeleteWorkspace,
@@ -130,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
@@ -197,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(
@@ -218,9 +307,14 @@ export function Sidebar({
                   const isCollapsed = entry.settings.sidebarCollapsed;
                   const isExpanded = expandedWorkspaces.has(entry.id);
                   const {
-                    rows: threadRows,
+                    unpinnedRows,
                     totalRoots: totalThreadRoots,
-                  } = getThreadRows(threads, isExpanded);
+                  } = getThreadRows(
+                    threads,
+                    isExpanded,
+                    entry.id,
+                    getPinTimestamp,
+                  );
                   const showThreads = !isCollapsed && threads.length > 0;
                   const isLoadingThreads =
                     threadListLoadingByWorkspace[entry.id] ?? false;
@@ -293,6 +387,8 @@ export function Sidebar({
                           activeThreadId={activeThreadId}
                           getThreadRows={getThreadRows}
                           getThreadTime={getThreadTime}
+                          isThreadPinned={isThreadPinned}
+                          getPinTimestamp={getPinTimestamp}
                           onSelectWorkspace={onSelectWorkspace}
                           onConnectWorkspace={onConnectWorkspace}
                           onToggleWorkspaceCollapse={onToggleWorkspaceCollapse}
@@ -306,7 +402,8 @@ export function Sidebar({
                       {showThreads && (
                         <ThreadList
                           workspaceId={entry.id}
-                          threadRows={threadRows}
+                          pinnedRows={[]}
+                          unpinnedRows={unpinnedRows}
                           totalThreadRoots={totalThreadRoots}
                           isExpanded={isExpanded}
                           nextCursor={nextCursor}
@@ -315,6 +412,7 @@ export function Sidebar({
                           activeThreadId={activeThreadId}
                           threadStatusById={threadStatusById}
                           getThreadTime={getThreadTime}
+                          isThreadPinned={isThreadPinned}
                           onToggleExpanded={handleToggleExpanded}
                           onLoadOlderThreads={onLoadOlderThreads}
                           onSelectThread={onSelectThread}