fix: correct sidebar drag index translation with coordinator children

Author: brooksc

src/components/Sidebar.tsx

@@ -7,7 +7,7 @@ import {
   toggleNewTaskDialog,
   setActiveTask,
   toggleSidebar,
-  reorderTask,
+  reorderTaskVisually,
   getTaskDotStatus,
   getTaskAttentionState,
   getTaskViewportVisibility,
@@ -126,18 +126,29 @@ export function Sidebar() {
     ImportableWorktree[] | null
   >(null);
   const [dragFromIndex, setDragFromIndex] = createSignal<number | null>(null);
+  const [dragFromTaskId, setDragFromTaskId] = createSignal<string | null>(null);
   const [dropTargetIndex, setDropTargetIndex] = createSignal<number | null>(null);
   const [resizing, setResizing] = createSignal(false);
   let taskListRef: HTMLDivElement | undefined;
 
   const sidebarWidth = () => getPanelUserSize(SIDEBAR_SIZE_KEY) ?? SIDEBAR_DEFAULT_WIDTH;
 
+  // Maps each visible draggable task ID to its visual position (0-based, excluding coordinated children).
+  // This keeps drag signals, drop indicators, and data-task-index in the same coordinate space.
   const taskIndexById = createMemo(() => {
     const map = new Map<string, number>();
-    store.taskOrder.forEach((taskId, idx) => map.set(taskId, idx));
+    let visIdx = 0;
+    for (const taskId of store.taskOrder) {
+      if (!isCoordinatedChild(taskId)) {
+        map.set(taskId, visIdx++);
+      }
+    }
     return map;
   });
 
+  // Number of visible draggable items (used for the end-of-list drop indicator).
+  const draggableTaskCount = createMemo(() => taskIndexById().size);
+
   const groupedTasks = createMemo(() => computeGroupedTasks());
 
   function handleResizeMouseDown(e: MouseEvent) {
@@ -170,12 +181,12 @@ export function Sidebar() {
       const handler = (e: MouseEvent) => {
         const target = (e.target as HTMLElement).closest<HTMLElement>('[data-task-index]');
         if (!target) return;
-        const index = Number(target.dataset.taskIndex);
-        const taskId = store.taskOrder[index];
+        const visibleIndex = Number(target.dataset.taskIndex);
+        // data-task-index is now the visible draggable index; look up the task ID from the visible order
+        const draggableOrder = store.taskOrder.filter((id) => !isCoordinatedChild(id));
+        const taskId = draggableOrder[visibleIndex];
         if (taskId === undefined || taskId === null) return;
-        // Don't allow dragging coordinated children
-        if (isCoordinatedChild(taskId)) return;
-        handleTaskMouseDown(e, taskId, index);
+        handleTaskMouseDown(e, taskId, visibleIndex);
       };
       el.addEventListener('mousedown', handler);
       onCleanup(() => el.removeEventListener('mousedown', handler));
@@ -262,7 +273,7 @@ export function Sidebar() {
     return items.length;
   }
 
-  function handleTaskMouseDown(e: MouseEvent, taskId: string, index: number) {
+  function handleTaskMouseDown(e: MouseEvent, taskId: string, visibleIndex: number) {
     if (e.button !== 0) return;
     e.preventDefault();
     const startX = e.clientX;
@@ -276,11 +287,12 @@ export function Sidebar() {
 
       if (!dragging) {
         dragging = true;
-        setDragFromIndex(index);
+        setDragFromIndex(visibleIndex);
+        setDragFromTaskId(taskId);
         document.body.classList.add('dragging-task');
       }
 
-      setDropTargetIndex(computeDropIndex(ev.clientY, index));
+      setDropTargetIndex(computeDropIndex(ev.clientY, visibleIndex));
     }
 
     function onUp() {
@@ -291,12 +303,14 @@ export function Sidebar() {
         document.body.classList.remove('dragging-task');
         const from = dragFromIndex();
         const to = dropTargetIndex();
+        const fromTaskId = dragFromTaskId();
         setDragFromIndex(null);
+        setDragFromTaskId(null);
         setDropTargetIndex(null);
 
-        if (from !== null && to !== null && from !== to) {
+        if (from !== null && to !== null && from !== to && fromTaskId !== null) {
           const adjustedTo = to > from ? to - 1 : to;
-          reorderTask(from, adjustedTo);
+          reorderTaskVisually(fromTaskId, adjustedTo);
         }
       } else {
         setActiveTask(taskId);
@@ -739,7 +753,7 @@ export function Sidebar() {
             </For>
           </Show>
 
-          <Show when={dropTargetIndex() === store.taskOrder.length}>
+          <Show when={dropTargetIndex() === draggableTaskCount()}>
             <div class="drop-indicator" />
           </Show>
         </div>

src/store/store.ts

@@ -41,6 +41,7 @@ export {
   clearPrefillPrompt,
   setPrefillPrompt,
   reorderTask,
+  reorderTaskVisually,
   spawnShellForTask,
   runBookmarkInTask,
   closeShell,

src/store/tasks.ts

@@ -27,7 +27,7 @@ import { parseGitHubUrl, taskNameFromGitHubUrl } from '../lib/github-url';
 import type { Agent, Task, GitIsolationMode } from './types';
 import type { DockerSource } from '../lib/docker';
 import { COORDINATOR_PREAMBLE } from './coordinator-preamble';
-import { getCoordinatorChildren } from './sidebar-order';
+import { getCoordinatorChildren, isCoordinatedChild } from './sidebar-order';
 
 function initTaskInStore(
   taskId: string,
@@ -607,6 +607,48 @@ export function reorderTask(fromIndex: number, toIndex: number): void {
   );
 }
 
+/**
+ * Reorder a task using visible sidebar indices (excluding hidden coordinated children).
+ * Keeps coordinator+children blocks contiguous in taskOrder.
+ *
+ * @param movedId - ID of the task being dragged
+ * @param targetVisibleIdx - target position in the visible draggable order (after removal of movedId)
+ */
+export function reorderTaskVisually(movedId: string, targetVisibleIdx: number): void {
+  // Visible draggable order: active tasks excluding coordinated children
+  const draggableOrder = store.taskOrder.filter((id) => !isCoordinatedChild(id));
+
+  // After removing the moved item, find what task should come after it
+  const remainingDraggable = draggableOrder.filter((id) => id !== movedId);
+  const insertBeforeId = remainingDraggable[targetVisibleIdx] ?? null;
+
+  // Build the block to move: movedId + its active children in taskOrder sequence
+  const { active: activeChildren } = getCoordinatorChildren(movedId);
+  const childSet = new Set(activeChildren);
+  const block = [movedId, ...store.taskOrder.filter((id) => childSet.has(id))];
+
+  // Remove the block from taskOrder
+  const blockSet = new Set(block);
+  const remaining = store.taskOrder.filter((id) => !blockSet.has(id));
+
+  // Find where to insert in the remaining raw order
+  const rawInsertAt =
+    insertBeforeId !== null ? remaining.indexOf(insertBeforeId) : remaining.length;
+  const finalInsertAt = rawInsertAt === -1 ? remaining.length : rawInsertAt;
+
+  const newOrder = [
+    ...remaining.slice(0, finalInsertAt),
+    ...block,
+    ...remaining.slice(finalInsertAt),
+  ];
+
+  setStore(
+    produce((s) => {
+      s.taskOrder = newOrder;
+    }),
+  );
+}
+
 export function spawnShellForTask(taskId: string, initialCommand?: string): string {
   const shellId = crypto.randomUUID();
   if (initialCommand) setPendingShellCommand(shellId, initialCommand);