feat: cmd+click and shift+click multi-select for kanban and sidebar

apps/web/components/kanban-board.tsx

@@ -394,6 +394,7 @@ export function KanbanBoard({ onPreviewTask, onOpenTask, onBeforeEdit }: KanbanB
         selectedRepositoryIds={s.userSettings.repositoryIds}
         selectedIds={s.multiSelect.selectedIds}
         onToggleSelect={s.multiSelect.toggleSelect}
+        onSelectRange={s.multiSelect.selectRange}
         isMultiSelectMode={s.multiSelect.isMultiSelectMode}
         onToggleMultiSelect={s.multiSelect.toggleMultiSelect}
       />

apps/web/components/kanban-card-click.test.ts

@@ -0,0 +1,64 @@
+import { describe, it, expect, vi } from "vitest";
+import { dispatchKanbanCardClick, type Task } from "./kanban-card";
+
+function fakeEvent(mods: Partial<MouseEvent> = {}) {
+  return {
+    metaKey: false,
+    ctrlKey: false,
+    shiftKey: false,
+    preventDefault: vi.fn(),
+    ...mods,
+  } as unknown as React.MouseEvent;
+}
+
+const task = { id: "t1", title: "T", workflowStepId: "s1" } as Task;
+
+function handlers() {
+  return {
+    onToggleSelect: vi.fn(),
+    onRangeSelect: vi.fn(),
+    onClick: vi.fn(),
+    isMultiSelectMode: false,
+  };
+}
+
+describe("dispatchKanbanCardClick", () => {
+  it("cmd/meta-click toggles and prevents default", () => {
+    const h = handlers();
+    const e = fakeEvent({ metaKey: true });
+    dispatchKanbanCardClick(e, task.id, task, h);
+    expect(e.preventDefault).toHaveBeenCalled();
+    expect(h.onToggleSelect).toHaveBeenCalledWith("t1");
+    expect(h.onClick).not.toHaveBeenCalled();
+    expect(h.onRangeSelect).not.toHaveBeenCalled();
+  });
+
+  it("ctrl-click toggles (Windows/Linux)", () => {
+    const h = handlers();
+    dispatchKanbanCardClick(fakeEvent({ ctrlKey: true }), task.id, task, h);
+    expect(h.onToggleSelect).toHaveBeenCalledWith("t1");
+  });
+
+  it("shift-click range-selects and prevents default", () => {
+    const h = handlers();
+    const e = fakeEvent({ shiftKey: true });
+    dispatchKanbanCardClick(e, task.id, task, h);
+    expect(e.preventDefault).toHaveBeenCalled();
+    expect(h.onRangeSelect).toHaveBeenCalledWith("t1");
+    expect(h.onToggleSelect).not.toHaveBeenCalled();
+  });
+
+  it("plain click while in multi-select mode toggles", () => {
+    const h = { ...handlers(), isMultiSelectMode: true };
+    dispatchKanbanCardClick(fakeEvent(), task.id, task, h);
+    expect(h.onToggleSelect).toHaveBeenCalledWith("t1");
+    expect(h.onClick).not.toHaveBeenCalled();
+  });
+
+  it("plain click outside multi-select mode previews/opens", () => {
+    const h = handlers();
+    dispatchKanbanCardClick(fakeEvent(), task.id, task, h);
+    expect(h.onClick).toHaveBeenCalledWith(task);
+    expect(h.onToggleSelect).not.toHaveBeenCalled();
+  });
+});

apps/web/components/kanban-card-content.tsx

@@ -58,7 +58,7 @@ export type KanbanCardShellProps = KanbanCardActionProps &
     isSelected?: boolean;
     isMultiSelectMode?: boolean;
     isPreviewed: boolean;
-    onClick: () => void;
+    onClick: (e: React.MouseEvent) => void;
     onCheckboxClick: (e: React.MouseEvent) => void;
   };
 

apps/web/components/kanban-card.tsx

@@ -14,6 +14,7 @@ import { TaskDeleteConfirmDialog } from "@/components/task/task-delete-confirm-d
 import { TaskGitHubIssueDialog } from "@/components/task/task-github-issue-dialog";
 import { TaskGitHubPRDialog } from "@/components/task/task-github-pr-dialog";
 import { useTaskWorkflowMove } from "@/hooks/use-task-workflow-move";
+import { useTaskMultiSelectStore } from "@/hooks/use-task-multi-select";
 import { repositorySlug } from "@/lib/repository-slug";
 import { formatUserHomePath } from "@/lib/utils";
 import { repositoryId as toRepositoryId, type Repository, type TaskState } from "@/lib/types/http";
@@ -82,6 +83,8 @@ interface KanbanCardProps {
   isSelected?: boolean;
   selectedIds?: Set<string>;
   onToggleSelect?: (taskId: string) => void;
+  /** Shift-click range select within this card's column. */
+  onRangeSelect?: (taskId: string) => void;
   isMultiSelectMode?: boolean;
 }
 
@@ -111,6 +114,7 @@ function useKanbanCardMenus({
 >) {
   const moveTargets = useKanbanCardMoveTargets(task.id, steps);
   const moveTasks = useTaskWorkflowMove();
+  const { sortByDisplayOrder, getWorkflowIdForTask } = useTaskMultiSelectStore();
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const [showArchiveConfirm, setShowArchiveConfirm] = useState(false);
   const [showPRDialog, setShowPRDialog] = useState(false);
@@ -134,13 +138,22 @@ function useKanbanCardMenus({
   };
 
   const selectedTaskIds = isSelected && selectedIds?.size ? [...selectedIds] : [task.id];
+  // Sort into board order lazily (only when a move actually fires) so a backward
+  // range selection isn't scrambled — and we don't pay it on every card render.
+  const orderedSelectedIds = () => sortByDisplayOrder(selectedTaskIds);
+  // A selection spanning workflows can't safely use same-workflow "Move to" (it
+  // would drag other-workflow cards into this card's workflow), so gate it — only
+  // computed for a genuine multi-selection to avoid per-render snapshot scans.
+  const isMixedWorkflowSelection =
+    selectedTaskIds.length > 1 &&
+    new Set(selectedTaskIds.map((id) => getWorkflowIdForTask(id))).size > 1;
   const moveSelectedToStep = (stepId: string) => {
     if (selectedTaskIds.length === 1 && selectedTaskIds[0] === task.id && onMove) {
       onMove(task, stepId);
       return;
     }
     if (!moveTargets.currentWorkflowId) return;
-    runMoveTasks(selectedTaskIds, moveTargets.currentWorkflowId, stepId);
+    runMoveTasks(orderedSelectedIds(), moveTargets.currentWorkflowId, stepId);
   };
 
   const menuBase = {
@@ -168,9 +181,11 @@ function useKanbanCardMenus({
     }),
     contextMenuEntries: buildKanbanCardMenuEntries({
       ...menuBase,
-      onMoveToStep: moveSelectedToStep,
+      // Hide same-workflow "Move to" for a mixed-workflow selection; only the
+      // explicit "Send to workflow" path remains (matches the toolbar guard).
+      onMoveToStep: isMixedWorkflowSelection ? undefined : moveSelectedToStep,
       onSendToWorkflow: (workflowId, stepId) => {
-        runMoveTasks(selectedTaskIds, workflowId, stepId);
+        runMoveTasks(orderedSelectedIds(), workflowId, stepId);
       },
     }),
     showDeleteConfirm,
@@ -251,6 +266,42 @@ function KanbanCardDialogs({
   );
 }
 
+/**
+ * Cmd/Ctrl-click toggles a single card; Shift-click range-selects within the
+ * column; either modifier enters multi-select mode without the toggle button.
+ * A plain click toggles while in multi-select mode, otherwise previews/opens.
+ */
+/** @internal Exported for unit testing the four-branch click dispatch. */
+export function dispatchKanbanCardClick(
+  e: React.MouseEvent,
+  taskId: string,
+  task: Task,
+  handlers: {
+    onToggleSelect?: (taskId: string) => void;
+    onRangeSelect?: (taskId: string) => void;
+    onClick?: (task: Task) => void;
+    isMultiSelectMode?: boolean;
+  },
+): void {
+  // Only intercept a modifier click when the matching handler is wired, so a
+  // card rendered without selection handlers still opens on Cmd/Shift click.
+  if ((e.metaKey || e.ctrlKey) && handlers.onToggleSelect) {
+    e.preventDefault();
+    handlers.onToggleSelect(taskId);
+    return;
+  }
+  if (e.shiftKey && handlers.onRangeSelect) {
+    e.preventDefault();
+    handlers.onRangeSelect(taskId);
+    return;
+  }
+  if (handlers.isMultiSelectMode && handlers.onToggleSelect) {
+    handlers.onToggleSelect(taskId);
+    return;
+  }
+  handlers.onClick?.(task);
+}
+
 function useActiveWorkspaceRepositories() {
   const activeWorkspaceId = useAppStore((state) => state.workspaces.activeId);
   return useAppStore((state) =>
@@ -274,6 +325,7 @@ export function KanbanCard({
   isSelected,
   selectedIds,
   onToggleSelect,
+  onRangeSelect,
   isMultiSelectMode,
 }: KanbanCardProps) {
   const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
@@ -306,18 +358,13 @@ export function KanbanCard({
     onMove,
   });
 
-  const handleClick = () => {
-    if (isMultiSelectMode) {
-      onToggleSelect?.(task.id);
-      return;
-    }
-    onClick?.(task);
-  };
-
-  const handleCheckboxClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    onToggleSelect?.(task.id);
-  };
+  const handleClick = (e: React.MouseEvent) =>
+    dispatchKanbanCardClick(e, task.id, task, {
+      onToggleSelect,
+      onRangeSelect,
+      onClick,
+      isMultiSelectMode,
+    });
 
   return (
     <>
@@ -338,7 +385,10 @@ export function KanbanCard({
           isArchiving={isArchiving}
           menuEntries={dropdownMenuEntries}
           onClick={handleClick}
-          onCheckboxClick={handleCheckboxClick}
+          onCheckboxClick={(e) => {
+            e.stopPropagation();
+            onToggleSelect?.(task.id);
+          }}
           onOpenFullPage={onOpenFullPage}
         />
       </KanbanCardContextMenu>

apps/web/components/kanban-column.tsx

@@ -34,6 +34,8 @@ interface KanbanColumnProps {
   hideHeader?: boolean;
   selectedIds?: Set<string>;
   onToggleSelect?: (taskId: string) => void;
+  /** Shift-click range select; receives the clicked id + this column's ordered ids. */
+  onSelectRange?: (taskId: string, orderedIds: string[]) => void;
   isMultiSelectMode?: boolean;
 }
 
@@ -53,6 +55,7 @@ export function KanbanColumn({
   hideHeader = false,
   selectedIds,
   onToggleSelect,
+  onSelectRange,
   isMultiSelectMode,
 }: KanbanColumnProps) {
   const { setNodeRef, isOver } = useDroppable({
@@ -66,6 +69,10 @@ export function KanbanColumn({
     [repositoriesByWorkspace],
   );
 
+  // Ordered ids of the cards rendered in this column — the source of truth for
+  // shift-click range selection (matches exactly what the user sees).
+  const columnTaskIds = useMemo(() => tasks.map((t) => t.id), [tasks]);
+
   return (
     <div
       ref={setNodeRef}
@@ -109,6 +116,9 @@ export function KanbanColumn({
             isSelected={selectedIds?.has(task.id)}
             selectedIds={selectedIds}
             onToggleSelect={onToggleSelect}
+            onRangeSelect={
+              onSelectRange ? (taskId) => onSelectRange(taskId, columnTaskIds) : undefined
+            }
             isMultiSelectMode={isMultiSelectMode}
           />
         ))}

apps/web/components/kanban/swimlane-container.tsx

@@ -48,6 +48,7 @@ export type SwimlaneContainerProps = {
   selectedRepositoryIds?: string[];
   selectedIds?: Set<string>;
   onToggleSelect?: (taskId: string) => void;
+  onSelectRange?: (taskId: string, orderedIds: string[]) => void;
   isMultiSelectMode?: boolean;
   onToggleMultiSelect?: () => void;
 };
@@ -119,6 +120,7 @@ type WorkflowItemProps = {
   showMaximizeButton?: boolean;
   selectedIds?: Set<string>;
   onToggleSelect?: (taskId: string) => void;
+  onSelectRange?: (taskId: string, orderedIds: string[]) => void;
   isMultiSelectMode?: boolean;
   onToggleMultiSelect?: () => void;
 };
@@ -263,6 +265,7 @@ export function SwimlaneContainer({
   selectedRepositoryIds = [],
   selectedIds,
   onToggleSelect,
+  onSelectRange,
   isMultiSelectMode,
   onToggleMultiSelect,
 }: SwimlaneContainerProps) {
@@ -332,6 +335,7 @@ export function SwimlaneContainer({
                 showMaximizeButton={showMaximizeButton}
                 selectedIds={selectedIds}
                 onToggleSelect={onToggleSelect}
+                onSelectRange={onSelectRange}
                 isMultiSelectMode={isMultiSelectMode}
                 onToggleMultiSelect={index === 0 ? onToggleMultiSelect : undefined}
               />