Planning context for notebook cell drag-and-drop reordering PR

BRANCH-SUMMARY-positron-nb-drag-to-reorder-cells-experiment.md

Branch: positron-nb-drag-to-reorder-cells-experiment

Base: main Last Updated: 2026-02-04 Stats: 12 feature commits (+ 11 merged from main), +7456 -914 across 75 files

---

Overview

This branch implements drag-and-drop cell reordering for Positron Notebooks using the @dnd-kit library. The work includes integrating sortable components, supporting multi-cell selection drag, adding visual feedback with drag overlays, and comprehensive E2E test coverage.

Key Files

• src/vs/workbench/contrib/positronNotebook/browser/notebookCells/SortableCellList.tsx - Main sortable container with DnD context
• src/vs/workbench/contrib/positronNotebook/browser/notebookCells/SortableCell.tsx - Individual sortable cell wrapper
• src/vs/workbench/contrib/positronNotebook/browser/notebookCells/SortableCell.css - Drag styling and animations
• src/vs/workbench/contrib/positronNotebook/browser/PositronNotebookInstance.ts - Cell reordering logic
• test/e2e/tests/positron-notebook/notebook-cell-reordering.test.ts - E2E tests for drag-and-drop

What Changed

Core Implementation

• Added @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities, @dnd-kit/accessibility dependencies
• Created SortableCellList component with DndContext and SortableContext
• Created SortableCell wrapper component for individual cells
• Integrated with existing NotebookCellWrapper via composition

Notebook Instance

• Added moveCells(sourceIndices, targetIndex) method for reordering
• Added selectedCellIndices getter for multi-selection support
• Implemented batch cell movement with proper selection preservation

UI/UX

• Custom drag overlay showing selected cell count badge
• Visual placeholder during drag with CSS transitions
• Drag handle cursor behavior and styling
• Height limiting for large cell overlays

Tests

• New E2E test file with 5 test cases covering:
  • Single cell drag-and-drop (downward and upward)
  • Multi-cell selection and drag
  • Auto-scrolling in long notebooks
  • Basic drag interaction

Build System

• Added ESM dependency shims for @dnd-kit packages
• Updated package.json with new dependencies
• Added @dnd-kit scripts to workbench HTML files
• Added Claude Code helper scripts (build-check.sh, build-ps.sh, deemon-status.mjs)

Documentation

• Research on drag-and-drop library options
• Implementation plan with 6-phase approach
• Analysis of potential custom implementation vs @dnd-kit
• Handoff documentation for Phase 2 completion

Commit History

Drag-and-Drop Implementation

1. d4fcbefe8a - Add @dnd-kit integration (Phase 1 & 2) - Initial setup and basic components
2. 69816c29a0 - Fix React hooks rule violation in SortableCellList
3. 83adc39451 - Integrate dnd-kit sortable components with notebook (Phase 3)
4. 913c9470dc - Fix positioning and cursor behavior
5. 4631ffac31 - Use DOM.getActiveWindow() for multi-window support
6. b02b368dee - Limit drag overlay height for large cells
7. a479b00eef - Add multi-cell drag-and-drop support
8. 5ca0c82cb7 - Fix lint warnings

Testing

9. 0b75e31317 - Improve E2E test robustness
10. 17bcc9be06 - Add auto-scroll test for long notebooks

Research & Planning

11. 636e128091 - Add planning docs
12. ffad600537 - Add research on replacing dnd-kit with custom implementation

Current State

Completed:

• Core drag-and-drop functionality with @dnd-kit
• Single cell reordering
• Multi-cell selection and drag
• Visual feedback (overlays, placeholders, badges)
• E2E test coverage
• Multi-window support
• Auto-scroll during drag

Possible Future Work:

• Custom implementation analysis suggests @dnd-kit could potentially be replaced with ~600 LOC custom solution (see thoughts/shared/research/2026-01-28-dnd-kit-replacement-analysis.md)

---

Notes

Space for your notes...