feat(chat): add task dragging and visible drag ghost for sidebar items

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/add-resource-dropdown.tsx

@@ -27,6 +27,7 @@ import type {
 import { useFolders } from '@/hooks/queries/folders'
 import { useKnowledgeBasesQuery } from '@/hooks/queries/kb/knowledge'
 import { useTablesList } from '@/hooks/queries/tables'
+import { useTasks } from '@/hooks/queries/tasks'
 import { useWorkflows } from '@/hooks/queries/workflows'
 import { useWorkspaceFiles } from '@/hooks/queries/workspace-files'
 
@@ -53,6 +54,7 @@ export function useAvailableResources(
   const { data: files = [] } = useWorkspaceFiles(workspaceId)
   const { data: knowledgeBases } = useKnowledgeBasesQuery(workspaceId)
   const { data: folders = [] } = useFolders(workspaceId)
+  const { data: tasks = [] } = useTasks(workspaceId)
 
   return useMemo(
     () => [
@@ -97,8 +99,16 @@ export function useAvailableResources(
           isOpen: existingKeys.has(`knowledgebase:${kb.id}`),
         })),
       },
+      {
+        type: 'task' as const,
+        items: tasks.map((t) => ({
+          id: t.id,
+          name: t.name,
+          isOpen: existingKeys.has(`task:${t.id}`),
+        })),
+      },
     ],
-    [workflows, folders, tables, files, knowledgeBases, existingKeys]
+    [workflows, folders, tables, files, knowledgeBases, tasks, existingKeys]
   )
 }
 

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx

@@ -4,6 +4,7 @@ import { type ElementType, type ReactNode, useMemo } from 'react'
 import type { QueryClient } from '@tanstack/react-query'
 import { useParams } from 'next/navigation'
 import {
+  Blimp,
   Database,
   File as FileIcon,
   Folder as FolderIcon,
@@ -19,6 +20,7 @@ import type {
 } from '@/app/workspace/[workspaceId]/home/types'
 import { knowledgeKeys } from '@/hooks/queries/kb/knowledge'
 import { tableKeys } from '@/hooks/queries/tables'
+import { taskKeys } from '@/hooks/queries/tasks'
 import { folderKeys } from '@/hooks/queries/utils/folder-keys'
 import { invalidateWorkflowLists } from '@/hooks/queries/utils/invalidate-workflow-lists'
 import { useWorkflows } from '@/hooks/queries/workflows'
@@ -151,6 +153,15 @@ export const RESOURCE_REGISTRY: Record<MothershipResourceType, ResourceTypeConfi
     ),
     renderDropdownItem: (props) => <IconDropdownItem {...props} icon={FolderIcon} />,
   },
+  task: {
+    type: 'task',
+    label: 'Tasks',
+    icon: Blimp,
+    renderTabIcon: (_resource, className) => (
+      <Blimp className={cn(className, 'text-[var(--text-icon)]')} />
+    ),
+    renderDropdownItem: (props) => <IconDropdownItem {...props} icon={Blimp} />,
+  },
 } as const
 
 export const RESOURCE_TYPES = Object.values(RESOURCE_REGISTRY)
@@ -185,6 +196,9 @@ const RESOURCE_INVALIDATORS: Record<
   folder: (qc) => {
     qc.invalidateQueries({ queryKey: folderKeys.lists() })
   },
+  task: (qc, wId) => {
+    qc.invalidateQueries({ queryKey: taskKeys.list(wId) })
+  },
 }
 
 /**

apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts

@@ -89,6 +89,8 @@ export function mapResourceToContext(resource: MothershipResource): ChatContext
       return { kind: 'file', fileId: resource.id, label: resource.title }
     case 'folder':
       return { kind: 'folder', folderId: resource.id, label: resource.title }
+    case 'task':
+      return { kind: 'past_chat', chatId: resource.id, label: resource.title }
     default:
       return { kind: 'docs', label: resource.title }
   }

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

@@ -19,7 +19,10 @@ import {
   useSidebarDragContext,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
 import { SIDEBAR_SCROLL_EVENT } from '@/app/workspace/[workspaceId]/w/components/sidebar/sidebar'
-import { buildDragResources } from '@/app/workspace/[workspaceId]/w/components/sidebar/utils'
+import {
+  buildDragResources,
+  createSidebarDragGhost,
+} from '@/app/workspace/[workspaceId]/w/components/sidebar/utils'
 import {
   useCanDelete,
   useDeleteFolder,
@@ -138,6 +141,7 @@ export function FolderItem({
   })
 
   const isEditingRef = useRef(false)
+  const dragGhostRef = useRef<HTMLElement | null>(null)
 
   const handleCreateWorkflowInFolder = useCallback(() => {
     const name = generateCreativeWorkflowName()
@@ -205,9 +209,16 @@ export function FolderItem({
         e.dataTransfer.setData(SIM_RESOURCES_DRAG_TYPE, JSON.stringify(resources))
       }
 
+      const total = selection.folderIds.length + selection.workflowIds.length
+      const ghostLabel = total > 1 ? `${folder.name} +${total - 1} more` : folder.name
+      const ghost = createSidebarDragGhost(ghostLabel)
+      void ghost.offsetHeight
+      e.dataTransfer.setDragImage(ghost, ghost.offsetWidth / 2, ghost.offsetHeight / 2)
+      dragGhostRef.current = ghost
+
       onDragStartProp?.()
     },
-    [folder.id, workspaceId, onDragStartProp]
+    [folder.id, folder.name, workspaceId, onDragStartProp]
   )
 
   const {
@@ -220,6 +231,10 @@ export function FolderItem({
   })
 
   const handleDragEnd = useCallback(() => {
+    if (dragGhostRef.current) {
+      dragGhostRef.current.remove()
+      dragGhostRef.current = null
+    }
     handleDragEndBase()
     onDragEndProp?.()
   }, [handleDragEndBase, onDragEndProp])

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

@@ -17,7 +17,10 @@ import {
   useItemRename,
   useSidebarDragContext,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
-import { buildDragResources } from '@/app/workspace/[workspaceId]/w/components/sidebar/utils'
+import {
+  buildDragResources,
+  createSidebarDragGhost,
+} from '@/app/workspace/[workspaceId]/w/components/sidebar/utils'
 import {
   useCanDelete,
   useDeleteSelection,
@@ -200,6 +203,7 @@ export function WorkflowItem({
   }, [isActiveWorkflow, isWorkflowLocked])
 
   const isEditingRef = useRef(false)
+  const dragGhostRef = useRef<HTMLElement | null>(null)
 
   const {
     isOpen: isContextMenuOpen,
@@ -346,9 +350,17 @@ export function WorkflowItem({
         e.dataTransfer.setData(SIM_RESOURCES_DRAG_TYPE, JSON.stringify(resources))
       }
 
+      const total = selection.workflowIds.length + selection.folderIds.length
+      const ghostLabel = total > 1 ? `${workflow.name} +${total - 1} more` : workflow.name
+      const ghost = createSidebarDragGhost(ghostLabel)
+      // Force reflow so the browser can capture the rendered element
+      void ghost.offsetHeight
+      e.dataTransfer.setDragImage(ghost, ghost.offsetWidth / 2, ghost.offsetHeight / 2)
+      dragGhostRef.current = ghost
+
       onDragStartProp?.()
     },
-    [workflow.id, workspaceId, onDragStartProp]
+    [workflow.id, workflow.name, workspaceId, onDragStartProp]
   )
 
   const {
@@ -361,6 +373,10 @@ export function WorkflowItem({
   })
 
   const handleDragEnd = useCallback(() => {
+    if (dragGhostRef.current) {
+      dragGhostRef.current.remove()
+      dragGhostRef.current = null
+    }
     handleDragEndBase()
     onDragEndProp?.()
   }, [handleDragEndBase, onDragEndProp])

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

@@ -37,6 +37,7 @@ import {
   Wordmark,
 } from '@/components/emcn/icons'
 import { useSession } from '@/lib/auth/auth-client'
+import { SIM_RESOURCES_DRAG_TYPE } from '@/lib/copilot/resource-types'
 import { cn } from '@/lib/core/utils/cn'
 import { isMacPlatform } from '@/lib/core/utils/platform'
 import { buildFolderTree } from '@/lib/folders/tree'
@@ -72,7 +73,10 @@ import {
   useWorkflowOperations,
   useWorkspaceManagement,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
-import { groupWorkflowsByFolder } from '@/app/workspace/[workspaceId]/w/components/sidebar/utils'
+import {
+  createSidebarDragGhost,
+  groupWorkflowsByFolder,
+} from '@/app/workspace/[workspaceId]/w/components/sidebar/utils'
 import {
   useDuplicateWorkspace,
   useExportWorkspace,
@@ -159,6 +163,30 @@ const SidebarTaskItem = memo(function SidebarTaskItem({
   onMorePointerDown: () => void
   onMoreClick: (e: React.MouseEvent<HTMLButtonElement>, taskId: string) => void
 }) {
+  const dragGhostRef = useRef<HTMLElement | null>(null)
+
+  const handleDragStart = useCallback(
+    (e: React.DragEvent) => {
+      e.dataTransfer.effectAllowed = 'copyMove'
+      e.dataTransfer.setData(
+        SIM_RESOURCES_DRAG_TYPE,
+        JSON.stringify([{ type: 'task', id: task.id, title: task.name }])
+      )
+      const ghost = createSidebarDragGhost(task.name)
+      void ghost.offsetHeight
+      e.dataTransfer.setDragImage(ghost, ghost.offsetWidth / 2, ghost.offsetHeight / 2)
+      dragGhostRef.current = ghost
+    },
+    [task.id, task.name]
+  )
+
+  const handleDragEnd = useCallback(() => {
+    if (dragGhostRef.current) {
+      dragGhostRef.current.remove()
+      dragGhostRef.current = null
+    }
+  }, [])
+
   return (
     <SidebarTooltip label={task.name} enabled={showCollapsedTooltips}>
       <Link
@@ -182,6 +210,9 @@ const SidebarTaskItem = memo(function SidebarTaskItem({
           }
         }}
         onContextMenu={task.id !== 'new' ? (e) => onContextMenu(e, task.id) : undefined}
+        draggable={task.id !== 'new'}
+        onDragStart={task.id !== 'new' ? handleDragStart : undefined}
+        onDragEnd={task.id !== 'new' ? handleDragEnd : undefined}
       >
         <Blimp className='h-[16px] w-[16px] flex-shrink-0 text-[var(--text-icon)]' />
         <div className='min-w-0 flex-1 truncate font-base text-[var(--text-body)]'>{task.name}</div>

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

@@ -28,6 +28,38 @@ export function buildDragResources(
   ]
 }
 
+/**
+ * Creates a lightweight drag ghost element showing the label of the item(s) being dragged.
+ * Append to `document.body`, pass to `e.dataTransfer.setDragImage`, then remove on dragend.
+ */
+export function createSidebarDragGhost(label: string): HTMLElement {
+  const ghost = document.createElement('div')
+  ghost.style.cssText = `
+    position: fixed;
+    top: -500px;
+    left: 0;
+    display: inline-flex;
+    align-items: center;
+    padding: 4px 10px;
+    background: var(--surface-active);
+    border: 1px solid rgba(255,255,255,0.08);
+    border-radius: 8px;
+    font-family: system-ui, -apple-system, sans-serif;
+    font-size: 13px;
+    color: var(--text-body);
+    white-space: nowrap;
+    max-width: 220px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    pointer-events: none;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
+    z-index: 9999;
+  `
+  ghost.textContent = label
+  document.body.appendChild(ghost)
+  return ghost
+}
+
 export function compareByOrder<T extends { sortOrder: number; createdAt?: Date; id: string }>(
   a: T,
   b: T

apps/sim/lib/copilot/resource-types.ts

@@ -4,6 +4,7 @@ export type MothershipResourceType =
   | 'workflow'
   | 'knowledgebase'
   | 'folder'
+  | 'task'
   | 'generic'
 
 export interface MothershipResource {