feat(mothership): pin tasks to keep them at the top of the sidebar

Author: waleedlatif1

apps/sim/app/api/mothership/chats/[chatId]/route.ts

@@ -142,7 +142,7 @@ export const PATCH = withRouteHandler(
       const parsed = await parseRequest(updateMothershipChatContract, request, context)
       if (!parsed.success) return parsed.response
       const { chatId } = parsed.data.params
-      const { title, isUnread } = parsed.data.body
+      const { title, isUnread, pinned } = parsed.data.body
 
       const updates: Record<string, unknown> = {}
 
@@ -157,6 +157,9 @@ export const PATCH = withRouteHandler(
       if (isUnread !== undefined) {
         updates.lastSeenAt = isUnread ? null : sql`GREATEST(${copilotChats.updatedAt}, NOW())`
       }
+      if (pinned !== undefined) {
+        updates.pinned = pinned
+      }
 
       const [updatedChat] = await db
         .update(copilotChats)
@@ -203,6 +206,16 @@ export const PATCH = withRouteHandler(
             }
           )
         }
+        if (pinned !== undefined) {
+          captureServerEvent(
+            userId,
+            pinned ? 'task_pinned' : 'task_unpinned',
+            { workspace_id: updatedChat.workspaceId },
+            {
+              groups: { workspace: updatedChat.workspaceId },
+            }
+          )
+        }
       }
 
       return NextResponse.json({ success: true })

apps/sim/app/api/mothership/chats/route.ts

@@ -45,6 +45,7 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
         updatedAt: copilotChats.updatedAt,
         activeStreamId: copilotChats.conversationId,
         lastSeenAt: copilotChats.lastSeenAt,
+        pinned: copilotChats.pinned,
       })
       .from(copilotChats)
       .where(
@@ -54,7 +55,7 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
           eq(copilotChats.type, 'mothership')
         )
       )
-      .orderBy(desc(copilotChats.updatedAt))
+      .orderBy(desc(copilotChats.pinned), desc(copilotChats.updatedAt))
 
     const streamMarkers = await reconcileChatStreamMarkers(
       chats.map((c) => ({ chatId: c.id, streamId: c.activeStreamId })),

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { type RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { Pin, PinOff } from 'lucide-react'
 import {
   Button,
   DropdownMenu,
@@ -234,6 +235,7 @@ interface ContextMenuProps {
   onOpenInNewTab?: () => void
   onMarkAsRead?: () => void
   onMarkAsUnread?: () => void
+  onTogglePin?: () => void
   onRename?: () => void
   onCreate?: () => void
   onCreateFolder?: () => void
@@ -245,6 +247,9 @@ interface ContextMenuProps {
   showOpenInNewTab?: boolean
   showMarkAsRead?: boolean
   showMarkAsUnread?: boolean
+  showPin?: boolean
+  isPinned?: boolean
+  disablePin?: boolean
   showRename?: boolean
   showCreate?: boolean
   showCreateFolder?: boolean
@@ -288,6 +293,7 @@ export function ContextMenu({
   onOpenInNewTab,
   onMarkAsRead,
   onMarkAsUnread,
+  onTogglePin,
   onRename,
   onCreate,
   onCreateFolder,
@@ -299,6 +305,9 @@ export function ContextMenu({
   showOpenInNewTab = false,
   showMarkAsRead = false,
   showMarkAsUnread = false,
+  showPin = false,
+  isPinned = false,
+  disablePin = false,
   showRename = true,
   showCreate = false,
   showCreateFolder = false,
@@ -375,7 +384,10 @@ export function ContextMenu({
   }, [])
 
   const hasNavigationSection = showOpenInNewTab && onOpenInNewTab
-  const hasStatusSection = (showMarkAsRead && onMarkAsRead) || (showMarkAsUnread && onMarkAsUnread)
+  const hasStatusSection =
+    (showMarkAsRead && onMarkAsRead) ||
+    (showMarkAsUnread && onMarkAsUnread) ||
+    (showPin && onTogglePin)
   const hasEditSection =
     (showRename && onRename) ||
     (showCreate && onCreate) ||
@@ -447,6 +459,18 @@ export function ContextMenu({
             Mark as unread
           </DropdownMenuItem>
         )}
+        {showPin && onTogglePin && (
+          <DropdownMenuItem
+            disabled={disablePin}
+            onSelect={() => {
+              onTogglePin()
+              onClose()
+            }}
+          >
+            {isPinned ? <PinOff className='size-[14px]' /> : <Pin className='size-[14px]' />}
+            {isPinned ? 'Unpin' : 'Pin'}
+          </DropdownMenuItem>
+        )}
         {hasStatusSection && (hasEditSection || hasCopySection) && <DropdownMenuSeparator />}
 
         {showRename && onRename && (

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx

@@ -2,7 +2,7 @@
 
 import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { Compass, MoreHorizontal } from 'lucide-react'
+import { Compass, MoreHorizontal, Pin } from 'lucide-react'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useParams, usePathname, useRouter } from 'next/navigation'
@@ -91,6 +91,7 @@ import {
   useMarkTaskRead,
   useMarkTaskUnread,
   useRenameTask,
+  useSetTaskPinned,
   useTasks,
 } from '@/hooks/queries/tasks'
 import { useUpdateWorkflow } from '@/hooks/queries/workflows'
@@ -144,6 +145,7 @@ const SidebarTaskItem = memo(function SidebarTaskItem({
   isSelected,
   isActive,
   isUnread,
+  isPinned,
   isMenuOpen,
   showCollapsedTooltips,
   onMultiSelectClick,
@@ -156,6 +158,7 @@ const SidebarTaskItem = memo(function SidebarTaskItem({
   isSelected: boolean
   isActive: boolean
   isUnread: boolean
+  isPinned: boolean
   isMenuOpen: boolean
   showCollapsedTooltips: boolean
   onMultiSelectClick: (taskId: string, shiftKey: boolean) => void
@@ -219,6 +222,9 @@ const SidebarTaskItem = memo(function SidebarTaskItem({
           {!isActive && isUnread && !isCurrentRoute && !isMenuOpen && (
             <span className='absolute size-[7px] rounded-full bg-[var(--brand-accent)] group-hover:hidden' />
           )}
+          {!isActive && !isUnread && isPinned && !isCurrentRoute && !isMenuOpen && (
+            <Pin className='absolute size-[12px] text-[var(--text-icon)] group-hover:hidden' />
+          )}
           <button
             type='button'
             aria-label='Task options'
@@ -581,6 +587,7 @@ export const Sidebar = memo(function Sidebar() {
   const deleteTasksMutation = useDeleteTasks(workspaceId)
   const markTaskReadMutation = useMarkTaskRead(workspaceId)
   const markTaskUnreadMutation = useMarkTaskUnread(workspaceId)
+  const setTaskPinnedMutation = useSetTaskPinned(workspaceId)
   const renameTaskMutation = useRenameTask(workspaceId)
   const tasksHover = useHoverMenu()
   const workflowsHover = useHoverMenu()
@@ -930,6 +937,15 @@ export const Sidebar = memo(function Sidebar() {
     markTaskUnreadMutation.mutate(ids[0])
   }, [])
 
+  const handleToggleTaskPin = useCallback(() => {
+    const { taskIds: ids } = contextMenuSelectionRef.current
+    if (ids.length !== 1) return
+    const taskId = ids[0]
+    const task = tasks.find((t) => t.id === taskId)
+    if (!task) return
+    setTaskPinnedMutation.mutate({ chatId: taskId, pinned: !task.isPinned })
+  }, [tasks])
+
   const handleStartTaskRename = useCallback(() => {
     const { taskIds: ids } = contextMenuSelectionRef.current
     if (ids.length !== 1) return
@@ -1521,6 +1537,7 @@ export const Sidebar = memo(function Sidebar() {
                                     isSelected={isSelected}
                                     isActive={!!task.isActive}
                                     isUnread={!!task.isUnread}
+                                    isPinned={!!task.isPinned}
                                     isMenuOpen={menuOpenTaskId === task.id}
                                     showCollapsedTooltips={showCollapsedTooltips}
                                     onMultiSelectClick={handleTaskClick}
@@ -1771,6 +1788,7 @@ export const Sidebar = memo(function Sidebar() {
                   onOpenInNewTab={handleTaskOpenInNewTab}
                   onMarkAsRead={handleMarkTaskAsRead}
                   onMarkAsUnread={handleMarkTaskAsUnread}
+                  onTogglePin={handleToggleTaskPin}
                   onRename={handleStartTaskRename}
                   onDelete={handleDeleteTask}
                   showOpenInNewTab={!isMultiTaskContextMenu}
@@ -1780,6 +1798,8 @@ export const Sidebar = memo(function Sidebar() {
                     !!activeTaskContextMenuItem &&
                     !activeTaskContextMenuItem.isUnread
                   }
+                  showPin={!isMultiTaskContextMenu && !!activeTaskContextMenuItem}
+                  isPinned={!!activeTaskContextMenuItem?.isPinned}
                   showRename={!isMultiTaskContextMenu}
                   showDuplicate={false}
                   showColorChange={false}

apps/sim/hooks/queries/tasks.test.ts

@@ -54,6 +54,7 @@ describe('tasks query boundary parsing', () => {
             updatedAt: '2026-04-11T10:00:00.000Z',
             activeStreamId: 'stream-1',
             lastSeenAt: null,
+            pinned: false,
           },
         ],
       })
@@ -68,6 +69,7 @@ describe('tasks query boundary parsing', () => {
         name: 'Launch plan',
         isActive: true,
         isUnread: false,
+        isPinned: false,
       })
     )
     expect(tasks[0]?.updatedAt.toISOString()).toBe('2026-04-11T10:00:00.000Z')
@@ -84,6 +86,7 @@ describe('tasks query boundary parsing', () => {
             updatedAt: '2026-04-11T10:00:00.000Z',
             activeStreamId: null,
             lastSeenAt: null,
+            pinned: false,
           },
         ],
       })

apps/sim/hooks/queries/tasks.ts

@@ -34,6 +34,7 @@ export interface TaskMetadata {
   updatedAt: Date
   isActive: boolean
   isUnread: boolean
+  isPinned: boolean
 }
 
 export interface TaskChatHistory {
@@ -193,6 +194,7 @@ function mapTask(chat: MothershipTask): TaskMetadata {
     isUnread:
       chat.activeStreamId === null &&
       (chat.lastSeenAt === null || updatedAt > new Date(chat.lastSeenAt)),
+    isPinned: chat.pinned,
   }
 }
 
@@ -538,6 +540,57 @@ export function useMarkTaskUnread(workspaceId?: string) {
   })
 }
 
+async function setTaskPinned({
+  chatId,
+  pinned,
+}: {
+  chatId: string
+  pinned: boolean
+}): Promise<void> {
+  await requestJson(updateMothershipChatContract, {
+    params: { chatId },
+    body: { pinned },
+  })
+}
+
+/**
+ * Pins or unpins a task with optimistic update. Pinned tasks are sorted to
+ * the top of the list by the server; the optimistic reducer preserves that
+ * ordering by partitioning pinned and unpinned tasks while keeping each
+ * partition in its existing order (server returns desc(updatedAt) within).
+ */
+export function useSetTaskPinned(workspaceId?: string) {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: setTaskPinned,
+    onMutate: async ({ chatId, pinned }) => {
+      await queryClient.cancelQueries({ queryKey: taskKeys.list(workspaceId) })
+      const previousTasks = queryClient.getQueryData<TaskMetadata[]>(taskKeys.list(workspaceId))
+      if (!previousTasks) return { previousTasks: undefined }
+
+      const updated = previousTasks.map((task) =>
+        task.id === chatId ? { ...task, isPinned: pinned } : task
+      )
+      const pinnedTasks = updated.filter((task) => task.isPinned)
+      const unpinnedTasks = updated.filter((task) => !task.isPinned)
+      queryClient.setQueryData<TaskMetadata[]>(taskKeys.list(workspaceId), [
+        ...pinnedTasks,
+        ...unpinnedTasks,
+      ])
+
+      return { previousTasks }
+    },
+    onError: (_err, _variables, context) => {
+      if (context?.previousTasks) {
+        queryClient.setQueryData(taskKeys.list(workspaceId), context.previousTasks)
+      }
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: taskKeys.list(workspaceId) })
+    },
+  })
+}
+
 async function createChat(workspaceId: string): Promise<{ id: string }> {
   const { id } = await requestJson(createMothershipChatContract, { body: { workspaceId } })
   return { id }
@@ -559,6 +612,7 @@ export function useCreateTask(workspaceId?: string) {
         updatedAt: new Date(),
         isActive: false,
         isUnread: false,
+        isPinned: false,
       }
       queryClient.setQueryData<TaskMetadata[]>(taskKeys.list(workspaceId), [newTask, ...existing])
     },
@@ -597,6 +651,7 @@ export function useForkTask(workspaceId?: string) {
           updatedAt: new Date(),
           isActive: false,
           isUnread: false,
+          isPinned: false,
         }
         queryClient.setQueryData<TaskMetadata[]>(taskKeys.list(workspaceId), [
           optimisticTask,

apps/sim/lib/api/contracts/mothership-tasks.ts

@@ -17,10 +17,14 @@ export const updateMothershipChatBodySchema = z
   .object({
     title: z.string().trim().min(1).max(200).optional(),
     isUnread: z.boolean().optional(),
+    pinned: z.boolean().optional(),
   })
-  .refine((data) => data.title !== undefined || data.isUnread !== undefined, {
-    message: 'At least one field must be provided',
-  })
+  .refine(
+    (data) => data.title !== undefined || data.isUnread !== undefined || data.pinned !== undefined,
+    {
+      message: 'At least one field must be provided',
+    }
+  )
 
 export const createMothershipChatBodySchema = z.object({
   workspaceId: z.string().min(1),
@@ -188,6 +192,7 @@ export const mothershipTaskSchema = z.object({
   updatedAt: dateStringSchema,
   activeStreamId: z.string().nullable(),
   lastSeenAt: dateStringSchema.nullable(),
+  pinned: z.boolean(),
 })
 
 export const listMothershipChatsContract = defineRouteContract({

packages/db/migrations/0207_colorful_secret_warriors.sql

@@ -0,0 +1 @@
+ALTER TABLE "copilot_chats" ADD COLUMN "pinned" boolean DEFAULT false NOT NULL;