diff --git a/lib/github-package.js b/lib/github-package.js
index 25649e86fc..5a4e240876 100644
--- a/lib/github-package.js
+++ b/lib/github-package.js
@@ -16,9 +16,9 @@ export default class GithubPackage {
     this.project = project
     this.commandRegistry = commandRegistry
     this.notificationManager = notificationManager
-    this.changeObserver = process.platform === 'linux' ?
-      new WorkspaceChangeObserver(window, atom.workspace) :
-      new FileSystemChangeObserver()
+    this.changeObserver = process.platform === 'linux'
+      ? new WorkspaceChangeObserver(window, atom.workspace)
+      : new FileSystemChangeObserver()
     this.activeRepository = null
     this.repositoriesByProjectDirectory = new Map()
     this.subscriptions = new CompositeDisposable()
@@ -83,7 +83,7 @@ export default class GithubPackage {
   }
 
   didSelectFilePatch (filePatch, stagingStatus, {focus} = {}) {
-    if (!filePatch) return
+    if (!filePatch || filePatch.isDestroyed()) return
     const repository = this.getActiveRepository()
     let containingPane
     if (this.filePatchController) {
@@ -144,7 +144,9 @@ export default class GithubPackage {
     }
 
     if (activeItem instanceof FilePatchController) {
-      activeRepository = activeItem.props.repository
+      if (!activeItem.props.repository.isDestroyed()) {
+        activeRepository = activeItem.props.repository
+      }
     }
 
     if (activeRepository && activeRepository !== this.activeRepository) {
diff --git a/lib/models/repository.js b/lib/models/repository.js
index 3fa5bb511a..bc92250908 100644
--- a/lib/models/repository.js
+++ b/lib/models/repository.js
@@ -49,13 +49,19 @@ export default class Repository {
     this.unstagedFilePatchesByPath = new Map()
     this.mergeConflictsByPath = new Map()
     this.git = gitStrategy
+    this.destroyed = false
   }
 
   destroy () {
+    this.destroyed = true
     this.emitter.emit('did-destroy')
     this.emitter.dispose()
   }
 
+  isDestroyed () {
+    return this.destroyed
+  }
+
   onDidDestroy (callback) {
     return this.emitter.on('did-destroy', callback)
   }
diff --git a/lib/views/composite-list-selection.js b/lib/views/composite-list-selection.js
new file mode 100644
index 0000000000..9fcc97a448
--- /dev/null
+++ b/lib/views/composite-list-selection.js
@@ -0,0 +1,143 @@
+/** @babel */
+
+import ListSelection from './list-selection'
+
+export default class CompositeListSelection {
+  constructor ({listsByKey, idForItem}) {
+    this.keysBySelection = new Map()
+    this.selections = []
+    this.idForItem = idForItem || (item => item)
+
+    for (const key in listsByKey) {
+      const selection = new ListSelection({items: listsByKey[key]})
+      this.keysBySelection.set(selection, key)
+      this.selections.push(selection)
+    }
+
+    this.activeSelectionIndex = 0
+  }
+
+  updateLists (listsByKey) {
+    const keys = Object.keys(listsByKey)
+    for (let i = 0; i < keys.length; i++) {
+      const newItems = listsByKey[keys[i]]
+      const selection = this.selections[i]
+      const oldHeadItem = selection.getHeadItem()
+      selection.setItems(newItems)
+      const newHeadItem = oldHeadItem ? newItems.find(item => this.idForItem(item) === this.idForItem(oldHeadItem)) : null
+      if (newHeadItem) selection.selectItem(newHeadItem)
+    }
+    if (this.getActiveSelection().getItems().length === 0) {
+      this.activateNextSelection() || this.activatePreviousSelection()
+    }
+  }
+
+  getActiveListKey () {
+    return this.keysBySelection.get(this.getActiveSelection())
+  }
+
+  getSelectedItems () {
+    return this.getActiveSelection().getSelectedItems()
+  }
+
+  getHeadItem () {
+    return this.getActiveSelection().getHeadItem()
+  }
+
+  getActiveSelection () {
+    return this.selections[this.activeSelectionIndex]
+  }
+
+  activateSelection (selection) {
+    const index = this.selections.indexOf(selection)
+    if (index === -1) throw new Error('Selection not found')
+    this.activeSelectionIndex = index
+  }
+
+  activateNextSelection () {
+    for (let i = this.activeSelectionIndex + 1; i < this.selections.length; i++) {
+      if (this.selections[i].getItems().length > 0) {
+        this.activeSelectionIndex = i
+        return true
+      }
+    }
+    return false
+  }
+
+  activatePreviousSelection () {
+    for (let i = this.activeSelectionIndex - 1; i >= 0; i--) {
+      if (this.selections[i].getItems().length > 0) {
+        this.activeSelectionIndex = i
+        return true
+      }
+    }
+    return false
+  }
+
+  selectItem (item, preserveTail = false) {
+    const selection = this.selectionForItem(item)
+    if (!selection) throw new Error(`No item found: ${item}`)
+    if (!preserveTail) this.activateSelection(selection)
+    if (selection === this.getActiveSelection()) selection.selectItem(item, preserveTail)
+  }
+
+  addOrSubtractSelection (item) {
+    const selection = this.selectionForItem(item)
+    if (!selection) throw new Error(`No item found: ${item}`)
+
+    if (selection === this.getActiveSelection()) {
+      selection.addOrSubtractSelection(item)
+    } else {
+      this.activateSelection(selection)
+      selection.selectItem(item)
+    }
+  }
+
+  selectAllItems () {
+    this.getActiveSelection().selectAllItems()
+  }
+
+  selectFirstItem (preserveTail) {
+    this.getActiveSelection().selectFirstItem(preserveTail)
+  }
+
+  selectLastItem (preserveTail) {
+    this.getActiveSelection().selectLastItem(preserveTail)
+  }
+
+  coalesce () {
+    this.getActiveSelection().coalesce()
+  }
+
+  selectionForItem (item) {
+    return this.selections.find(selection => selection.getItems().indexOf(item) > -1)
+  }
+
+  listKeyForItem (item) {
+    return this.keysBySelection.get(this.selectionForItem(item))
+  }
+
+  selectNextItem (preserveTail = false) {
+    if (!preserveTail && this.getActiveSelection().getHeadItem() === this.getActiveSelection().getLastItem()) {
+      if (this.activateNextSelection()) {
+        this.getActiveSelection().selectFirstItem()
+      } else {
+        this.getActiveSelection().selectLastItem()
+      }
+    } else {
+      this.getActiveSelection().selectNextItem(preserveTail)
+    }
+  }
+
+  selectPreviousItem (preserveTail = false) {
+    if (!preserveTail && this.getActiveSelection().getHeadItem() === this.getActiveSelection().getItems()[0]) {
+      if (this.activatePreviousSelection()) {
+        this.getActiveSelection().selectLastItem()
+      } else {
+        this.getActiveSelection().selectFirstItem()
+      }
+    } else {
+      this.getActiveSelection().selectPreviousItem(preserveTail)
+    }
+  }
+}
diff --git a/lib/views/file-patch-list-item-view.js b/lib/views/file-patch-list-item-view.js
index 884773e056..5b14f21e80 100644
--- a/lib/views/file-patch-list-item-view.js
+++ b/lib/views/file-patch-list-item-view.js
@@ -2,30 +2,31 @@
 /** @jsx etch.dom */
 
 import etch from 'etch'
-import stateless from 'etch-stateless'
-
 import {classNameForStatus} from '../helpers'
 
-export default stateless(etch, ({filePatch, selected, selectItem, selectionEnabled, ...others}) => {
-  const status = classNameForStatus[filePatch.getStatus()]
-  const className = selected ? 'is-selected' : ''
+export default class FilePatchListItemView {
+  constructor (props) {
+    this.props = props
+    etch.initialize(this)
+    this.props.registerItemElement(this.props.filePatch, this.element)
+  }
 
-  let itemAlreadySelected = false
-  const selectItemIfSelectionEnabled = () => {
-    if (!itemAlreadySelected) {
-      if (selectionEnabled) {
-        selectItem(filePatch)
-        itemAlreadySelected = true
-      }
-    }
+  update (props) {
+    this.props = props
+    this.props.registerItemElement(this.props.filePatch, this.element)
+    return etch.update(this)
   }
 
-  return (
-    <div {...others} className={`git-FilePatchListView-item is-${status} ${className}`}
-        onmousemove={() => selectItemIfSelectionEnabled()}
-        onmouseup={() => selectItemIfSelectionEnabled()}>
-      <span className={`git-FilePatchListView-icon icon icon-diff-${status} status-${status}`} />
-      <span className='git-FilePatchListView-path'>{filePatch.getPath()}</span>
-    </div>
-  )
-})
+  render () {
+    const {filePatch, selected, ...others} = this.props
+    const status = classNameForStatus[filePatch.getStatus()]
+    const className = selected ? 'is-selected' : ''
+
+    return (
+      <div {...others} className={`git-FilePatchListView-item is-${status} ${className}`}>
+        <span className={`git-FilePatchListView-icon icon icon-diff-${status} status-${status}`} />
+        <span className='git-FilePatchListView-path'>{filePatch.getPath()}</span>
+      </div>
+    )
+  }
+}
diff --git a/lib/views/file-patch-selection.js b/lib/views/file-patch-selection.js
index c9ff427117..46b098469f 100644
--- a/lib/views/file-patch-selection.js
+++ b/lib/views/file-patch-selection.js
@@ -1,21 +1,22 @@
 /** @babel */
 
+import ListSelection from './list-selection'
+
 export default class FilePatchSelection {
   constructor (hunks) {
     this.mode = 'hunk'
-    this.selections = [{head: 0, tail: 0}]
+    this.hunksSelection = new ListSelection()
+    this.linesSelection = new ListSelection({isItemSelectable: (line) => line.isChanged()})
     this.updateHunks(hunks)
   }
 
   toggleMode () {
     if (this.mode === 'hunk') {
-      this.mode = 'line'
-      const firstLineOfSelectedHunk = this.hunks[this.selections[0].head].lines[0]
+      const firstLineOfSelectedHunk = this.getHeadHunk().lines[0]
       this.selectLine(firstLineOfSelectedHunk)
       if (!firstLineOfSelectedHunk.isChanged()) this.selectNextLine()
     } else {
-      this.mode = 'hunk'
-      const selectedLine = this.lines[this.selections[0].head]
+      const selectedLine = this.getHeadLine()
       const hunkContainingSelectedLine = this.hunksByLine.get(selectedLine)
       this.selectHunk(hunkContainingSelectedLine)
     }
@@ -65,199 +66,91 @@ export default class FilePatchSelection {
     }
   }
 
-  selectNextHunk (preserveTail) {
-    let nextHunkIndex = this.selections[0].head
-    if (nextHunkIndex < this.hunks.length - 1) nextHunkIndex++
-    this.selectHunk(this.hunks[nextHunkIndex], preserveTail)
-  }
-
-  selectPreviousHunk (preserveTail) {
-    let previousHunkIndex = this.selections[0].head
-    if (previousHunkIndex > 0) previousHunkIndex--
-    this.selectHunk(this.hunks[previousHunkIndex], preserveTail)
-  }
-
-  selectNextLine (preserveTail = false) {
-    if (this.selections.length === 0) {
-      this.selectFirstLine()
-      return
-    }
-
-    let lineIndex = this.selections[0].head
-    let nextLineIndex = lineIndex
-
-    while (lineIndex < this.lines.length - 1) {
-      lineIndex++
-      if (this.lines[lineIndex].isChanged()) {
-        nextLineIndex = lineIndex
-        break
-      }
-    }
-
-    this.selectLine(this.lines[nextLineIndex], preserveTail)
+  selectHunk (hunk, preserveTail = false) {
+    this.mode = 'hunk'
+    this.hunksSelection.selectItem(hunk, preserveTail)
   }
 
-  selectPreviousLine (preserveTail = false) {
-    if (this.selections.length === 0) {
-      this.selectLastLine()
-      return
-    }
-
-    let lineIndex = this.selections[0].head
-    let previousLineIndex = lineIndex
-
-    while (lineIndex > 0) {
-      lineIndex--
-      if (this.lines[lineIndex].isChanged()) {
-        previousLineIndex = lineIndex
-        break
-      }
-    }
-
-    this.selectLine(this.lines[previousLineIndex], preserveTail)
+  addOrSubtractHunkSelection (hunk) {
+    this.mode = 'hunk'
+    this.hunksSelection.addOrSubtractSelection(hunk)
   }
 
   selectAllHunks () {
-    this.selectFirstHunk()
-    this.selectLastHunk(true)
+    this.mode = 'hunk'
+    this.hunksSelection.selectAllItems()
   }
 
   selectFirstHunk (preserveTail) {
-    this.selectHunk(this.hunks[0], preserveTail)
+    this.mode = 'hunk'
+    this.hunksSelection.selectFirstItem(preserveTail)
   }
 
   selectLastHunk (preserveTail) {
-    this.selectHunk(this.hunks[this.hunks.length - 1], preserveTail)
+    this.mode = 'hunk'
+    this.hunksSelection.selectLastItem(preserveTail)
   }
 
-  selectAllLines () {
-    this.selectFirstLine()
-    this.selectLastLine(true)
+  selectNextHunk (preserveTail) {
+    this.mode = 'hunk'
+    this.hunksSelection.selectNextItem(preserveTail)
   }
 
-  selectFirstLine (preserveTail) {
-    for (let i = 0; i < this.lines.length; i++) {
-      const line = this.lines[i]
-      if (line.isChanged()) {
-        this.selectLine(line, preserveTail)
-        break
-      }
-    }
+  selectPreviousHunk (preserveTail) {
+    this.mode = 'hunk'
+    this.hunksSelection.selectPreviousItem(preserveTail)
   }
 
-  selectLastLine (preserveTail) {
-    for (let i = this.lines.length - 1; i > 0; i--) {
-      const line = this.lines[i]
-      if (line.isChanged()) {
-        this.selectLine(line, preserveTail)
-        break
-      }
+  getSelectedHunks (hunk) {
+    if (this.mode === 'line') {
+      const selectedHunks = new Set()
+      const selectedLines = this.getSelectedLines()
+      selectedLines.forEach(line => selectedHunks.add(this.hunksByLine.get(line)))
+      return selectedHunks
+    } else {
+      return this.hunksSelection.getSelectedItems()
     }
   }
 
-  selectHunk (hunk, preserveTail = false) {
-    this.mode = 'hunk'
-    this.selectItem(this.hunks, hunk, preserveTail, false)
+  getHeadHunk () {
+    if (this.mode === 'hunk') {
+      return this.hunksSelection.getHeadItem()
+    }
   }
 
   selectLine (line, preserveTail = false) {
     this.mode = 'line'
-    this.selectItem(this.lines, line, preserveTail, false)
+    this.linesSelection.selectItem(line, preserveTail)
   }
 
-  coalesce () {
-    if (this.selections.length === 0) return
-
-    const mostRecent = this.selections[0]
-    let mostRecentStart = Math.min(mostRecent.head, mostRecent.tail)
-    let mostRecentEnd = Math.max(mostRecent.head, mostRecent.tail)
-    while (mostRecentStart > 0 && !this.lines[mostRecentStart - 1].isChanged()) {
-      mostRecentStart--
-    }
-    while (mostRecentEnd < (this.lines.length - 1) && !this.lines[mostRecentEnd + 1].isChanged()) {
-      mostRecentEnd++
-    }
-
-    for (let i = 1; i < this.selections.length;) {
-      const current = this.selections[i]
-      const currentStart = Math.min(current.head, current.tail)
-      const currentEnd = Math.max(current.head, current.tail)
-      if (mostRecentStart <= currentEnd + 1 && currentStart - 1 <= mostRecentEnd) {
-        if (mostRecent.negate) {
-          const truncatedSelections = []
-          if (current.head > current.tail) {
-            if (currentEnd > mostRecentEnd) { // suffix
-              truncatedSelections.push({tail: mostRecentEnd + 1, head: currentEnd})
-            }
-            if (currentStart < mostRecentStart) { // prefix
-              truncatedSelections.push({tail: currentStart, head: mostRecentStart - 1})
-            }
-          } else {
-            if (currentStart < mostRecentStart) { // prefix
-              truncatedSelections.push({head: currentStart, tail: mostRecentStart - 1})
-            }
-            if (currentEnd > mostRecentEnd) { // suffix
-              truncatedSelections.push({head: mostRecentEnd + 1, tail: currentEnd})
-            }
-          }
-          this.selections.splice(i, 1, ...truncatedSelections)
-          i += truncatedSelections.length
-        } else {
-          if (mostRecent.head > mostRecent.tail) {
-            mostRecent.head = Math.max(mostRecentEnd, currentEnd)
-            mostRecent.tail = Math.min(mostRecentStart, currentStart)
-          } else {
-            mostRecent.head = Math.min(mostRecentStart, currentStart)
-            mostRecent.tail = Math.max(mostRecentEnd, currentEnd)
-          }
-          this.selections.splice(i, 1)
-        }
-      } else {
-        i++
-      }
-    }
-
-    if (mostRecent.negate) this.selections.shift()
+  addOrSubtractLineSelection (line) {
+    this.mode = 'line'
+    this.linesSelection.addOrSubtractSelection(line)
   }
 
-  addHunkSelection (hunk) {
-    this.mode = 'hunk'
-    this.selectItem(this.hunks, hunk, false, true)
+  selectAllLines (preserveTail) {
+    this.mode = 'line'
+    this.linesSelection.selectAllItems(preserveTail)
   }
 
-  addOrSubtractLineSelection (line) {
+  selectFirstLine (preserveTail) {
     this.mode = 'line'
-    this.selectItem(this.lines, line, false, true)
+    this.linesSelection.selectFirstItem(preserveTail)
   }
 
-  selectItem (items, item, preserveTail, addOrSubtract) {
-    if (addOrSubtract && preserveTail) {
-      throw new Error('addOrSubtract and preserveTail cannot both be true at the same time')
-    }
+  selectLastLine (preserveTail) {
+    this.mode = 'line'
+    this.linesSelection.selectLastItem(preserveTail)
+  }
 
-    const itemIndex = items.indexOf(item)
-    if (preserveTail) {
-      this.selections[0].head = itemIndex
-    } else {
-      const selection = {head: itemIndex, tail: itemIndex}
-      if (addOrSubtract) {
-        if (this.getSelectedItems().has(item)) selection.negate = true
-        this.selections.unshift(selection)
-      } else {
-        this.selections = [selection]
-      }
-    }
+  selectNextLine (preserveTail = false) {
+    this.mode = 'line'
+    this.linesSelection.selectNextItem(preserveTail)
   }
 
-  getSelectedHunks (hunk) {
-    if (this.mode === 'line') {
-      const selectedHunks = new Set()
-      const selectedLines = this.getSelectedLines()
-      selectedLines.forEach(line => selectedHunks.add(this.hunksByLine.get(line)))
-      return selectedHunks
-    } else {
-      return this.getSelectedItems()
-    }
+  selectPreviousLine (preserveTail = false) {
+    this.mode = 'line'
+    this.linesSelection.selectPreviousItem(preserveTail)
   }
 
   getSelectedLines () {
@@ -270,78 +163,54 @@ export default class FilePatchSelection {
       })
       return selectedLines
     } else {
-      return this.getSelectedItems()
-    }
-  }
-
-  getHeadHunk () {
-    if (this.mode === 'hunk' && this.selections.length > 0) {
-      return this.hunks[this.selections[0].head]
+      return this.linesSelection.getSelectedItems()
     }
   }
 
   getHeadLine () {
-    if (this.mode === 'line' && this.selections.length > 0) {
-      return this.lines[this.selections[0].head]
-    }
-  }
-
-  getSelectedItems () {
-    const selectedItems = new Set()
-    const items = (this.mode === 'hunk') ? this.hunks : this.lines
-    for (let {head, tail, negate} of this.selections.slice().reverse()) {
-      let start = Math.min(head, tail)
-      let end = Math.max(head, tail)
-      for (let i = start; i <= end; i++) {
-        const item = items[i]
-        if (this.mode === 'hunk' || item.isChanged()) {
-          if (negate) {
-            selectedItems.delete(item)
-          } else {
-            selectedItems.add(item)
-          }
-        }
-      }
+    if (this.mode === 'line') {
+      return this.linesSelection.getHeadItem()
     }
-    return selectedItems
   }
 
-  updateHunks (hunks) {
-    const oldLines = this.lines
-    this.hunks = hunks
-    this.lines = []
+  updateHunks (newHunks) {
     this.hunksByLine = new Map()
-    for (let hunk of hunks) {
+    const newLines = []
+    for (let hunk of newHunks) {
       for (let line of hunk.lines) {
-        this.lines.push(line)
+        newLines.push(line)
         this.hunksByLine.set(line, hunk)
       }
     }
 
-    if (this.lines.length > 0) {
-      const oldSelectionStart = Math.min(this.selections[0].head, this.selections[0].tail)
-      let newSelectionHeadAndTail
+    // Update hunks, preserving selection index
+    this.hunksSelection.setItems(newHunks)
 
-      if (this.mode === 'hunk') {
-        newSelectionHeadAndTail = Math.min(this.hunks.length - 1, oldSelectionStart)
-      } else {
-        let changedLineCount = 0
-        for (let i = 0; i < oldSelectionStart; i++) {
-          if (oldLines[i].isChanged()) changedLineCount++
-        }
+    // Update lines, preserving selection index in *changed* lines
+    const oldLines = this.linesSelection.getItems()
+    let newSelectedLine
+    if (oldLines.length > 0 && newLines.length > 0) {
+      const oldSelectionStartIndex = this.linesSelection.getMostRecentSelectionStartIndex()
+      let changedLineCount = 0
+      for (let i = 0; i < oldSelectionStartIndex; i++) {
+        if (oldLines[i].isChanged()) changedLineCount++
+      }
 
-        for (let i = 0; i < this.lines.length; i++) {
-          if (this.lines[i].isChanged()) {
-            newSelectionHeadAndTail = i
-            if (changedLineCount === 0) break
-            changedLineCount--
-          }
+      for (let i = 0; i < newLines.length; i++) {
+        const line = newLines[i]
+        if (line.isChanged()) {
+          newSelectedLine = line
+          if (changedLineCount === 0) break
+          changedLineCount--
         }
       }
-
-      this.selections = [{head: newSelectionHeadAndTail, tail: newSelectionHeadAndTail}]
-    } else {
-      this.selections = []
     }
+    this.linesSelection.setItems(newLines)
+    if (newSelectedLine) this.linesSelection.selectItem(newSelectedLine)
+  }
+
+  coalesce () {
+    this.hunksSelection.coalesce()
+    this.linesSelection.coalesce()
   }
 }
diff --git a/lib/views/file-patch-view.js b/lib/views/file-patch-view.js
index b041c912b5..f3be001ad0 100644
--- a/lib/views/file-patch-view.js
+++ b/lib/views/file-patch-view.js
@@ -7,8 +7,6 @@ import etch from 'etch'
 import HunkView from './hunk-view'
 import FilePatchSelection from './file-patch-selection'
 
-const EMPTY_SET = new Set()
-
 export default class FilePatchView {
   constructor (props) {
     this.props = props
diff --git a/lib/views/list-selection.js b/lib/views/list-selection.js
new file mode 100644
index 0000000000..1af2f30c30
--- /dev/null
+++ b/lib/views/list-selection.js
@@ -0,0 +1,211 @@
+/** @babel */
+
+export default class ListSelection {
+  constructor (options = {}) {
+    if (options.isItemSelectable) this.isItemSelectable = options.isItemSelectable
+    this.setItems(options.items || [])
+  }
+
+  isItemSelectable (item) {
+    return true
+  }
+
+  setItems (items) {
+    let newSelectionIndex
+    if (this.selections && this.selections.length > 0) {
+      const [{head, tail}] = this.selections
+      newSelectionIndex = Math.min(head, tail, items.length - 1)
+    } else {
+      newSelectionIndex = 0
+    }
+
+    this.items = items
+    if (items.length > 0) {
+      this.selections = [{head: newSelectionIndex, tail: newSelectionIndex}]
+    } else {
+      this.selections = []
+    }
+  }
+
+  getItems () {
+    return this.items
+  }
+
+  getLastItem () {
+    return this.items[this.items.length - 1]
+  }
+
+  selectFirstItem (preserveTail) {
+    for (let i = 0; i < this.items.length; i++) {
+      const item = this.items[i]
+      if (this.isItemSelectable(item)) {
+        this.selectItem(item, preserveTail)
+        break
+      }
+    }
+  }
+
+  selectLastItem (preserveTail) {
+    for (let i = this.items.length - 1; i > 0; i--) {
+      const item = this.items[i]
+      if (this.isItemSelectable(item)) {
+        this.selectItem(item, preserveTail)
+        break
+      }
+    }
+  }
+
+  selectAllItems () {
+    this.selectFirstItem()
+    this.selectLastItem(true)
+  }
+
+  selectNextItem (preserveTail) {
+    if (this.selections.length === 0) {
+      this.selectFirstItem()
+      return
+    }
+
+    let itemIndex = this.selections[0].head
+    let nextItemIndex = itemIndex
+    while (itemIndex < this.items.length - 1) {
+      itemIndex++
+      if (this.isItemSelectable(this.items[itemIndex])) {
+        nextItemIndex = itemIndex
+        break
+      }
+    }
+
+    this.selectItem(this.items[nextItemIndex], preserveTail)
+  }
+
+  selectPreviousItem (preserveTail) {
+    if (this.selections.length === 0) {
+      this.selectLastItem()
+      return
+    }
+
+    let itemIndex = this.selections[0].head
+    let previousItemIndex = itemIndex
+
+    while (itemIndex > 0) {
+      itemIndex--
+      if (this.isItemSelectable(this.items[itemIndex])) {
+        previousItemIndex = itemIndex
+        break
+      }
+    }
+
+    this.selectItem(this.items[previousItemIndex], preserveTail)
+  }
+
+  selectItem (item, preserveTail, addOrSubtract) {
+    if (addOrSubtract && preserveTail) {
+      throw new Error('addOrSubtract and preserveTail cannot both be true at the same time')
+    }
+
+    const itemIndex = this.items.indexOf(item)
+    if (preserveTail) {
+      this.selections[0].head = itemIndex
+    } else {
+      const selection = {head: itemIndex, tail: itemIndex}
+      if (addOrSubtract) {
+        if (this.getSelectedItems().has(item)) selection.negate = true
+        this.selections.unshift(selection)
+      } else {
+        this.selections = [selection]
+      }
+    }
+  }
+
+  addOrSubtractSelection (item) {
+    this.selectItem(item, false, true)
+  }
+
+  coalesce () {
+    if (this.selections.length === 0) return
+
+    const mostRecent = this.selections[0]
+    let mostRecentStart = Math.min(mostRecent.head, mostRecent.tail)
+    let mostRecentEnd = Math.max(mostRecent.head, mostRecent.tail)
+    while (mostRecentStart > 0 && !this.isItemSelectable(this.items[mostRecentStart - 1])) {
+      mostRecentStart--
+    }
+    while (mostRecentEnd < (this.items.length - 1) && !this.isItemSelectable(this.items[mostRecentEnd + 1])) {
+      mostRecentEnd++
+    }
+
+    for (let i = 1; i < this.selections.length;) {
+      const current = this.selections[i]
+      const currentStart = Math.min(current.head, current.tail)
+      const currentEnd = Math.max(current.head, current.tail)
+      if (mostRecentStart <= currentEnd + 1 && currentStart - 1 <= mostRecentEnd) {
+        if (mostRecent.negate) {
+          const truncatedSelections = []
+          if (current.head > current.tail) {
+            if (currentEnd > mostRecentEnd) { // suffix
+              truncatedSelections.push({tail: mostRecentEnd + 1, head: currentEnd})
+            }
+            if (currentStart < mostRecentStart) { // prefix
+              truncatedSelections.push({tail: currentStart, head: mostRecentStart - 1})
+            }
+          } else {
+            if (currentStart < mostRecentStart) { // prefix
+              truncatedSelections.push({head: currentStart, tail: mostRecentStart - 1})
+            }
+            if (currentEnd > mostRecentEnd) { // suffix
+              truncatedSelections.push({head: mostRecentEnd + 1, tail: currentEnd})
+            }
+          }
+          this.selections.splice(i, 1, ...truncatedSelections)
+          i += truncatedSelections.length
+        } else {
+          mostRecentStart = Math.min(mostRecentStart, currentStart)
+          mostRecentEnd = Math.max(mostRecentEnd, currentEnd)
+          if (mostRecent.head >= mostRecent.tail) {
+            mostRecent.head = mostRecentEnd
+            mostRecent.tail = mostRecentStart
+          } else {
+            mostRecent.head = mostRecentStart
+            mostRecent.tail = mostRecentEnd
+          }
+          this.selections.splice(i, 1)
+        }
+      } else {
+        i++
+      }
+    }
+
+    if (mostRecent.negate) this.selections.shift()
+  }
+
+  getSelectedItems () {
+    const selectedItems = new Set()
+    for (let {head, tail, negate} of this.selections.slice().reverse()) {
+      let start = Math.min(head, tail)
+      let end = Math.max(head, tail)
+      for (let i = start; i <= end; i++) {
+        const item = this.items[i]
+        if (this.isItemSelectable(item)) {
+          if (negate) {
+            selectedItems.delete(item)
+          } else {
+            selectedItems.add(item)
+          }
+        }
+      }
+    }
+    return selectedItems
+  }
+
+  getHeadItem () {
+    if (this.selections.length > 0) {
+      return this.items[this.selections[0].head]
+    }
+  }
+
+  getMostRecentSelectionStartIndex () {
+    const selection = this.selections[0]
+    return Math.min(selection.head, selection.tail)
+  }
+}
diff --git a/lib/views/merge-conflict-list-item-view.js b/lib/views/merge-conflict-list-item-view.js
index 8af74ddb69..d7bb5652e9 100644
--- a/lib/views/merge-conflict-list-item-view.js
+++ b/lib/views/merge-conflict-list-item-view.js
@@ -2,8 +2,6 @@
 /** @jsx etch.dom */
 
 import etch from 'etch'
-import stateless from 'etch-stateless'
-
 import {classNameForStatus} from '../helpers'
 
 const statusSymbolMap = {
@@ -12,28 +10,33 @@ const statusSymbolMap = {
   modified: '*'
 }
 
-export default stateless(etch, ({mergeConflict, selected, selectItem, selectionEnabled, ...others}) => {
-  let status = classNameForStatus[mergeConflict.getFileStatus()]
-  const className = selected ? 'is-selected' : ''
+export default class FilePatchListItemView {
+  constructor (props) {
+    this.props = props
+    etch.initialize(this)
+    this.props.registerItemElement(this.props.mergeConflict, this.element)
+  }
 
-  let mousedOverItem = false
-  const selectItemIfSelectionEnabled = () => {
-    if (!mousedOverItem) {
-      if (selectionEnabled) selectItem(mergeConflict)
-      mousedOverItem = true
-    }
+  update (props) {
+    this.props = props
+    this.props.registerItemElement(this.props.mergeConflict, this.element)
+    return etch.update(this)
   }
 
-  return (
-    <div {...others} className={`git-FilePatchListView-item is-${status} ${className}`}
-        onmousemove={() => selectItemIfSelectionEnabled()}
-        onmouseup={() => selectItemIfSelectionEnabled()}>
-      <span className={`git-FilePatchListView-icon icon icon-diff-${status} status-${status}`} />
-      <span className='git-FilePatchListView-path'>{mergeConflict.getPath()}</span>
-      <span className={'git-FilePatchListView ours-theirs-info'}>
-        {statusSymbolMap[mergeConflict.getOursStatus()]}
-        {statusSymbolMap[mergeConflict.getTheirsStatus()]}
-      </span>
-    </div>
-  )
-})
+  render () {
+    const {mergeConflict, selected, ...others} = this.props
+    const status = classNameForStatus[mergeConflict.getFileStatus()]
+    const className = selected ? 'is-selected' : ''
+
+    return (
+      <div {...others} className={`git-FilePatchListView-item is-${status} ${className}`}>
+        <span className={`git-FilePatchListView-icon icon icon-diff-${status} status-${status}`} />
+        <span className='git-FilePatchListView-path'>{mergeConflict.getPath()}</span>
+        <span className={'git-FilePatchListView ours-theirs-info'}>
+          {statusSymbolMap[mergeConflict.getOursStatus()]}
+          {statusSymbolMap[mergeConflict.getTheirsStatus()]}
+        </span>
+      </div>
+    )
+  }
+}
diff --git a/lib/views/staging-view.js b/lib/views/staging-view.js
index df2368f2d8..7adb8dfdb5 100644
--- a/lib/views/staging-view.js
+++ b/lib/views/staging-view.js
@@ -2,270 +2,255 @@
 /** @jsx etch.dom */
 
 import etch from 'etch'
-import {Disposable} from 'atom'
+import {Disposable, CompositeDisposable} from 'atom'
 
-import ListView from './list-view'
-import FilePatch from '../models/file-patch'
-import MergeConflict from '../models/merge-conflict'
 import FilePatchListItemView from './file-patch-list-item-view'
 import MergeConflictListItemView from './merge-conflict-list-item-view'
-import MultiListCollection from '../multi-list-collection'
+import CompositeListSelection from './composite-list-selection'
 import {shortenSha} from '../helpers'
 
-export const ListTypes = {
-  STAGED: Symbol('LIST_STAGED'),
-  UNSTAGED: Symbol('LIST_UNSTAGED'),
-  CONFLICTS: Symbol('LIST_CONFLICTS')
-}
-
-const ListNames = {
-  [ListTypes.STAGED]: 'staged',
-  [ListTypes.UNSTAGED]: 'unstaged',
-  [ListTypes.CONFLICTS]: 'conflicts'
-}
-
 export default class StagingView {
   constructor (props) {
     this.props = props
-    this.didSelectItem = this.didSelectItem.bind(this)
-    this.selectItem = this.selectItem.bind(this)
-    this.stageFilePatch = this.stageFilePatch.bind(this)
-    this.unstageFilePatch = this.unstageFilePatch.bind(this)
-    this.enableSelections = this.enableSelections.bind(this)
-    this.disableSelections = this.disableSelections.bind(this)
-    this.renderFilePatchListItem = this.renderFilePatchListItem.bind(this)
-    this.renderMergeConflictListItem = this.renderMergeConflictListItem.bind(this)
-    this.multiListCollection = new MultiListCollection([
-      { key: ListTypes.UNSTAGED, items: this.props.unstagedChanges },
-      { key: ListTypes.CONFLICTS, items: this.props.mergeConflicts || [] },
-      { key: ListTypes.STAGED, items: this.props.stagedChanges }
-    ], this.didSelectItem)
+    this.mouseSelectionInProgress = false
+    this.listElementsByItem = new WeakMap()
+    this.registerItemElement = this.registerItemElement.bind(this)
+    this.mousedownOnItem = this.mousedownOnItem.bind(this)
+    this.mousemoveOnItem = this.mousemoveOnItem.bind(this)
+    this.mouseup = this.mouseup.bind(this)
+    this.selection = new CompositeListSelection({
+      listsByKey: {
+        unstaged: this.props.unstagedChanges,
+        conflicts: this.props.mergeConflicts || [],
+        staged: this.props.stagedChanges
+      },
+      idForItem: item => item.getPath()
+    })
+    this.reportSelectedItem()
     etch.initialize(this)
 
-    this.subscriptions = atom.commands.add(this.element, {
-      'core:move-up': this.selectPreviousFilePatch.bind(this),
-      'core:move-down': this.selectNextFilePatch.bind(this),
-      'core:select-up': this.selectPreviousFilePatch.bind(this, {addToExisting: true, stopAtBounds: true}),
-      'core:select-down': this.selectNextFilePatch.bind(this, {addToExisting: true, stopAtBounds: true}),
-      'core:confirm': this.confirmSelectedItems.bind(this),
-      'git:focus-next-list': this.focusNextList.bind(this),
-      'git:focus-previous-list': this.focusPreviousList.bind(this),
-      'git:focus-diff-view': this.focusFilePatchView.bind(this)
-    })
-    window.addEventListener('mouseup', this.disableSelections)
-    this.subscriptions.add(new Disposable(() => window.removeEventListener('mouseup', this.disableSelections)))
+    this.subscriptions = new CompositeDisposable()
+    this.subscriptions.add(atom.commands.add(this.element, {
+      'core:move-up': () => this.selectPrevious(),
+      'core:move-down': () => this.selectNext(),
+      'core:select-up': () => this.selectPrevious(true),
+      'core:select-down': () => this.selectNext(true),
+      'core:select-all': () => this.selectAll(),
+      'core:move-to-top': () => this.selectFirst(),
+      'core:move-to-bottom': () => this.selectLast(),
+      'core:select-to-top': () => this.selectFirst(true),
+      'core:select-to-bottom': () => this.selectLast(true),
+      'core:confirm': () => this.confirmSelectedItems(),
+      'git:activate-next-list': () => this.activateNextList(),
+      'git:activate-previous-list': () => this.activatePreviousList(),
+      'git:focus-diff-view': () => this.focusFilePatchView()
+    }))
+    window.addEventListener('mouseup', this.mouseup)
+    this.subscriptions.add(new Disposable(() => window.removeEventListener('mouseup', this.mouseup)))
   }
 
   update (props) {
     this.props = props
-    this.multiListCollection.updateLists([
-      { key: ListTypes.UNSTAGED, items: this.props.unstagedChanges },
-      { key: ListTypes.CONFLICTS, items: this.props.mergeConflicts || [] },
-      { key: ListTypes.STAGED, items: this.props.stagedChanges }
-    ])
-    return etch.update(this)
-  }
-
-  enableSelections () {
-    this.validItems = new Set(this.multiListCollection.getItemsForKey(this.getSelectedListKey()))
-    this.selectionEnabled = true
-    return etch.update(this)
-  }
-
-  disableSelections () {
-    this.tail = null
-    this.validItems = null
-    this.selectionEnabled = false
-    return etch.update(this)
-  }
-
-  selectList (listKey, {suppressCallback} = {}) {
-    if (this.multiListCollection.getItemsForKey(listKey).length) {
-      this.multiListCollection.selectKeys([listKey], {suppressCallback})
-    }
-    this.enableSelections()
+    this.selection.updateLists({
+      unstaged: this.props.unstagedChanges,
+      conflicts: this.props.mergeConflicts || [],
+      staged: this.props.stagedChanges
+    })
     return etch.update(this)
   }
 
-  focusNextList () {
-    this.multiListCollection.selectNextList({wrap: true})
+  activateNextList () {
+    this.selection.activateNextSelection()
     return etch.update(this)
   }
 
-  focusPreviousList () {
-    this.multiListCollection.selectPreviousList({wrap: true})
+  activatePreviousList () {
+    this.selection.activatePreviousSelection()
     return etch.update(this)
   }
 
   confirmSelectedItems () {
-    this.disableSelections()
-    const itemPaths = Array.from(this.getSelectedItems()).map(item => item.getPath())
-    const listKey = this.getSelectedListKey()
-    if (listKey === ListTypes.STAGED) {
+    const itemPaths = Array.from(this.selection.getSelectedItems()).map(item => item.getPath())
+    if (this.selection.getActiveListKey() === 'staged') {
       return this.props.unstageFiles(itemPaths)
     } else {
       return this.props.stageFiles(itemPaths)
     }
   }
 
-  getSelectedListKey () {
-    return this.multiListCollection.getActiveListKey()
-  }
-
-  getSelectedItems () {
-    return this.multiListCollection.getSelectedItems()
+  selectPrevious (preserveTail = false) {
+    this.selection.selectPreviousItem(preserveTail)
+    this.selection.coalesce()
+    return etch.update(this)
   }
 
-  stageFilePatch (filePatch) {
-    return this.props.stageFiles([filePatch.getPath()])
+  selectNext (preserveTail = false) {
+    this.selection.selectNextItem(preserveTail)
+    this.selection.coalesce()
+    return etch.update(this)
   }
 
-  unstageFilePatch (filePatch) {
-    return this.props.unstageFiles([filePatch.getPath()])
+  selectAll () {
+    this.selection.selectAllItems()
+    this.selection.coalesce()
+    return etch.update(this)
   }
 
-  selectPreviousFilePatch (options = {}) {
-    this.multiListCollection.selectPreviousItem(options)
+  selectFirst (preserveTail = false) {
+    this.selection.selectFirstItem(preserveTail)
+    this.selection.coalesce()
     return etch.update(this)
   }
 
-  selectNextFilePatch (options = {}) {
-    this.multiListCollection.selectNextItem(options)
+  selectLast (preserveTail = false) {
+    this.selection.selectLastItem(preserveTail)
+    this.selection.coalesce()
     return etch.update(this)
   }
 
-  selectItem (item) {
-    if (!this.validItems.has(item)) return
-    const selectedList = this.getSelectedListKey()
-    if (!this.tail) this.tail = {key: selectedList, item}
-    this.head = {key: selectedList, item}
-    this.multiListCollection.selectItemsAndKeysInRange(this.tail, this.head)
-    return etch.update(this)
+  writeAfterUpdate () {
+    this.reportSelectedItem()
+    const headItem = this.selection.getHeadItem()
+    if (headItem) this.listElementsByItem.get(headItem).scrollIntoViewIfNeeded()
   }
 
-  didSelectItem (item, listKey, {focus} = {}) {
-    if (!item || !this.isFocused()) return
-    if (item.constructor === FilePatch && this.props.didSelectFilePatch) {
-      const listName = ListNames[listKey]
-      this.props.didSelectFilePatch(item, listName, {focus})
-    } else if (item.constructor === MergeConflict && this.props.didSelectMergeConflictFile) {
-      this.props.didSelectMergeConflictFile(item.getPath(), {focus})
+  reportSelectedItem () {
+    if (this.selection.getActiveListKey() === 'conflicts') {
+      if (this.props.didSelectMergeConflictFile) {
+        this.props.didSelectMergeConflictFile(this.selection.getHeadItem())
+      }
+    } else {
+      if (this.props.didSelectFilePatch) {
+        this.props.didSelectFilePatch(this.selection.getHeadItem())
+      }
     }
   }
 
-  focusFilePatchView () {
-    const item = this.multiListCollection.getActiveItem()
-    const listKey = this.multiListCollection.getActiveListKey()
-    this.didSelectItem(item, listKey, {focus: true})
+  async mousedownOnItem (event, item) {
+    if (event.detail >= 2) {
+      if (this.selection.listKeyForItem(item) === 'staged') {
+        await this.props.unstageFiles([item.getPath()])
+      } else {
+        await this.props.stageFiles([item.getPath()])
+      }
+    } else {
+      if (event.ctrlKey || event.metaKey) {
+        this.selection.addOrSubtractSelection(item)
+      } else {
+        this.selection.selectItem(item, event.shiftKey)
+      }
+      this.mouseSelectionInProgress = true
+    }
+    await etch.update(this)
   }
 
-  buildDebugData () {
-    const getPath = (fp) => fp ? fp.getNewPath() : '<none>'
-    const multiListData = this.multiListCollection.toObject()
-    return {
-      ...multiListData,
-      lists: multiListData.lists.map(list => list.map(getPath))
+  mousemoveOnItem (event, item) {
+    if (this.mouseSelectionInProgress) {
+      this.selection.selectItem(item, true)
+      return etch.update(this)
+    } else {
+      return Promise.resolve()
     }
   }
 
-  render () {
-    let stagedClassName = ''
-    let unstagedClassName = ''
-    let conflictsClassName = ''
-    const selectedList = this.getSelectedListKey()
-    if (selectedList === ListTypes.STAGED) {
-      stagedClassName = 'is-focused'
-    } else if (selectedList === ListTypes.UNSTAGED) {
-      unstagedClassName = 'is-focused'
-    } else if (selectedList === ListTypes.CONFLICTS) {
-      conflictsClassName = 'is-focused'
-    }
+  mouseup () {
+    this.mouseSelectionInProgress = false
+    this.selection.coalesce()
+  }
 
-    const mergeConflictsView = (
-      <div className={`git-StagingView-group git-MergeConflictPaths ${conflictsClassName}`}>
-        <header className='git-StagingView-header'>
-          <span className={'git-FilePatchListView-icon icon icon-alert status-modified'} />
-          <span className='git-StagingView-title'>Merge Conflicts</span>
-        </header>
-        <ListView
-          onmousedown={() => this.selectList(ListTypes.CONFLICTS, {suppressCallback: true}) }
-          className='git-StagingView-list git-FilePatchListView'
-          ref='mergeConflictListView'
-          didConfirmItem={this.stageFilePatch}
-          items={this.multiListCollection.getItemsForKey(ListTypes.CONFLICTS)}
-          selectedItems={this.getSelectedItems()}
-          renderItem={this.renderMergeConflictListItem}
-        />
-      </div>
-    )
+  render () {
+    const selectedItems = this.selection.getSelectedItems()
 
     return (
-      <div className={`git-StagingView ${ListNames[selectedList]}-changes-focused`} style={{width: 200}} tabIndex='-1'
-           onmouseup={() => this.disableSelections()}>
-        <div className={`git-StagingView-group git-UnstagedChanges ${unstagedClassName}`}>
+      <div className={`git-StagingView ${this.selection.getActiveListKey()}-changes-focused`} style={{width: 200}} tabIndex='-1' >
+        <div className={`git-StagingView-group git-UnstagedChanges ${this.getFocusClass('unstaged')}`}>
           <header className='git-StagingView-header'>
             <span className='icon icon-diff'></span>
             <span className='git-StagingView-title'>Unstaged Changes</span>
           </header>
-          <ListView
-            onmousedown={() => this.selectList(ListTypes.UNSTAGED, {suppressCallback: true})}
-            className='git-StagingView-list git-FilePatchListView'
-            ref='unstagedChangesView'
-            didConfirmItem={this.stageFilePatch}
-            items={this.multiListCollection.getItemsForKey(ListTypes.UNSTAGED)}
-            selectedItems={this.getSelectedItems()}
-            renderItem={this.renderFilePatchListItem}
-          />
+
+          <div ref='unstagedChanges' className='git-StagingView-list git-FilePatchListView'>
+            {
+              this.props.unstagedChanges.map((filePatch) => (
+                <FilePatchListItemView
+                  registerItemElement={this.registerItemElement}
+                  filePatch={filePatch}
+                  onmousedown={(event) => this.mousedownOnItem(event, filePatch)}
+                  onmousemove={(event) => this.mousemoveOnItem(event, filePatch)}
+                  selected={selectedItems.has(filePatch)}
+                />
+              ))
+            }
+          </div>
         </div>
-        { this.multiListCollection.getItemsForKey(ListTypes.CONFLICTS).length ? mergeConflictsView : <noscript /> }
-        <div className={`git-StagingView-group git-StagedChanges ${stagedClassName}`} >
+        { this.renderMergeConflicts() }
+        <div className={`git-StagingView-group git-StagedChanges ${this.getFocusClass('staged')}`} >
           <header className='git-StagingView-header'>
             <span className='icon icon-checklist'></span>
             <span className='git-StagingView-title'>
               Staged Changes
               {
-                this.props.isAmending ?
-                  ` (amending ${shortenSha(this.props.lastCommit.sha)})` :
-                  ''
+                this.props.isAmending
+                  ? ` (amending ${shortenSha(this.props.lastCommit.sha)})`
+                  : ''
               }
             </span>
           </header>
-          <ListView
-            onmousedown={() => this.selectList(ListTypes.STAGED, {suppressCallback: true})}
-            className='git-StagingView-list git-FilePatchListView'
-            ref='stagedChangesView'
-            didConfirmItem={this.unstageFilePatch}
-            items={this.multiListCollection.getItemsForKey(ListTypes.STAGED)}
-            selectedItems={this.getSelectedItems()}
-            renderItem={this.renderFilePatchListItem}
-          />
+          <div ref='stagedChanges' className='git-StagingView-list git-FilePatchListView'>
+            {
+              this.props.stagedChanges.map((filePatch) => (
+                <FilePatchListItemView
+                  filePatch={filePatch}
+                  registerItemElement={this.registerItemElement}
+                  onmousedown={(event) => this.mousedownOnItem(event, filePatch)}
+                  onmousemove={(event) => this.mousemoveOnItem(event, filePatch)}
+                  selected={selectedItems.has(filePatch)}
+                />
+              ))
+            }
+          </div>
         </div>
       </div>
     )
   }
 
-  renderFilePatchListItem (filePatch, selected, handleItemClickEvent) {
-    return (
-      <FilePatchListItemView
-        filePatch={filePatch}
-        selected={selected}
-        onclick={handleItemClickEvent}
-        selectionEnabled={this.selectionEnabled}
-        selectItem={this.selectItem}
-      />
-    )
+  renderMergeConflicts (selectedItems) {
+    const mergeConflicts = this.props.mergeConflicts
+
+    if (mergeConflicts && mergeConflicts.length > 0) {
+      const selectedItems = this.selection.getSelectedItems()
+      return (
+        <div className={`git-StagingView-group git-MergeConflictPaths ${this.getFocusClass('conflicts')}`}>
+          <header className='git-StagingView-header'>
+            <span className={'git-FilePatchListView-icon icon icon-alert status-modified'} />
+            <span className='git-StagingView-title'>Merge Conflicts</span>
+          </header>
+          <div ref='mergeConflicts' className='git-StagingView-list git-FilePatchListView'>
+            {
+              mergeConflicts.map((mergeConflict) => (
+                <MergeConflictListItemView
+                  mergeConflict={mergeConflict}
+                  registerItemElement={this.registerItemElement}
+                  onmousedown={(event) => this.mousedownOnItem(event, mergeConflict)}
+                  onmousemove={(event) => this.mousemoveOnItem(event, mergeConflict)}
+                  selected={selectedItems.has(mergeConflict)}
+                />
+              ))
+            }
+          </div>
+        </div>
+      )
+    } else {
+      return <noscript />
+    }
   }
 
-  renderMergeConflictListItem (mergeConflict, selected, handleItemClickEvent) {
-    return (
-      <MergeConflictListItemView
-        mergeConflict={mergeConflict}
-        selected={selected}
-        onclick={handleItemClickEvent}
-        selectionEnabled={this.selectionEnabled}
-        selectItem={this.selectItem}
-      />
-    )
+  getFocusClass (listKey) {
+    return this.selection.getActiveListKey() === listKey ? 'is-focused' : ''
+  }
+
+  registerItemElement (item, element) {
+    this.listElementsByItem.set(item, element)
   }
 
   destroy () {
diff --git a/package.json b/package.json
index a7981bdd6d..93d833955e 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,6 @@
     "compare-sets": "^1.0.1",
     "diff": "2.2.2",
     "etch": "0.8.0",
-    "etch-stateless": "^1.0.0",
     "git-kitchen-sink": "1.11.0",
     "multi-list-selection": "^0.1.1",
     "nsfw": "1.0.12",
diff --git a/test/controllers/git-panel-controller.test.js b/test/controllers/git-panel-controller.test.js
index a331ecf8dc..2389bb330c 100644
--- a/test/controllers/git-panel-controller.test.js
+++ b/test/controllers/git-panel-controller.test.js
@@ -107,13 +107,13 @@ describe('GitPanelController', () => {
 
       assert.equal(stagingView.props.unstagedChanges.length, 2)
       assert.equal(stagingView.props.stagedChanges.length, 0)
-      await stagingView.stageFilePatch(stagingView.props.unstagedChanges[0])
+      await stagingView.mousedownOnItem({detail: 2}, stagingView.props.unstagedChanges[0])
       await controller.getLastModelDataRefreshPromise()
-      await stagingView.stageFilePatch(stagingView.props.unstagedChanges[0])
+      await stagingView.mousedownOnItem({detail: 2}, stagingView.props.unstagedChanges[0])
       await controller.getLastModelDataRefreshPromise()
       assert.equal(stagingView.props.unstagedChanges.length, 0)
       assert.equal(stagingView.props.stagedChanges.length, 2)
-      await stagingView.unstageFilePatch(stagingView.props.stagedChanges[1])
+      await stagingView.mousedownOnItem({detail: 2}, stagingView.props.stagedChanges[1])
       await controller.getLastModelDataRefreshPromise()
       assert.equal(stagingView.props.unstagedChanges.length, 1)
       assert.equal(stagingView.props.stagedChanges.length, 1)
@@ -154,7 +154,7 @@ describe('GitPanelController', () => {
 
       // click Cancel
       choice = 1
-      await stagingView.stageFilePatch(conflict1)
+      await stagingView.mousedownOnItem({detail: 2}, conflict1)
       await controller.getLastModelDataRefreshPromise()
       assert.equal(atom.confirm.calledOnce, true)
       assert.equal(stagingView.props.mergeConflicts.length, 5)
@@ -163,7 +163,7 @@ describe('GitPanelController', () => {
       // click Stage
       choice = 0
       atom.confirm.reset()
-      await stagingView.stageFilePatch(conflict1)
+      await stagingView.mousedownOnItem({detail: 2}, conflict1)
       await controller.getLastModelDataRefreshPromise()
       assert.equal(atom.confirm.calledOnce, true)
       assert.equal(stagingView.props.mergeConflicts.length, 4)
@@ -173,7 +173,7 @@ describe('GitPanelController', () => {
       const conflict2 = stagingView.props.mergeConflicts.filter((c) => c.getPath() === 'modified-on-both-theirs.txt')[0]
       atom.confirm.reset()
       fs.writeFileSync(path.join(workdirPath, conflict2.getPath()), 'text with no merge markers')
-      await stagingView.stageFilePatch(conflict2)
+      await stagingView.mousedownOnItem({detail: 2}, conflict2)
       await controller.getLastModelDataRefreshPromise()
       assert.equal(atom.confirm.called, false)
       assert.equal(stagingView.props.mergeConflicts.length, 3)
diff --git a/test/helpers.js b/test/helpers.js
index 3c3e1af273..c77dbe8858 100644
--- a/test/helpers.js
+++ b/test/helpers.js
@@ -64,3 +64,8 @@ export function assertDeepPropertyVals (actual, expected) {
 
   assert.deepEqual(extractObjectSubset(actual, expected), expected)
 }
+
+export function assertEqualSets (a, b) {
+  assert.equal(a.size, b.size, 'Sets are a different size')
+  a.forEach(item => assert(b.has(item), 'Sets have different elements'))
+}
diff --git a/test/views/composite-list-selection.test.js b/test/views/composite-list-selection.test.js
new file mode 100644
index 0000000000..ddb0249bb4
--- /dev/null
+++ b/test/views/composite-list-selection.test.js
@@ -0,0 +1,302 @@
+/** @babel */
+
+import CompositeListSelection from '../../lib/views/composite-list-selection'
+import {assertEqualSets} from '../helpers'
+
+describe('CompositeListSelection', () => {
+  describe('selection', function () {
+    it('allows specific items to be selected, but does not select across lists', function () {
+      const selection = new CompositeListSelection({
+        listsByKey: {
+          unstaged: ['a', 'b'],
+          conflicts: ['c'],
+          staged: ['d', 'e', 'f']
+        }
+      })
+
+      selection.selectItem('e')
+      assert.equal(selection.getActiveListKey(), 'staged')
+      assertEqualSets(selection.getSelectedItems(), new Set(['e']))
+      selection.selectItem('f', true)
+      assert.equal(selection.getActiveListKey(), 'staged')
+      assertEqualSets(selection.getSelectedItems(), new Set(['e', 'f']))
+      selection.selectItem('d', true)
+
+      assert.equal(selection.getActiveListKey(), 'staged')
+      assertEqualSets(selection.getSelectedItems(), new Set(['d', 'e']))
+      selection.selectItem('c', true)
+      assert.equal(selection.getActiveListKey(), 'staged')
+      assertEqualSets(selection.getSelectedItems(), new Set(['d', 'e']))
+    })
+
+    it('allows the next and previous item to be selected', function () {
+      const selection = new CompositeListSelection({
+        listsByKey: {
+          unstaged: ['a', 'b'],
+          conflicts: ['c'],
+          staged: ['d', 'e']
+        }
+      })
+
+      assert.equal(selection.getActiveListKey(), 'unstaged')
+      assertEqualSets(selection.getSelectedItems(), new Set(['a']))
+
+      selection.selectNextItem()
+      assert.equal(selection.getActiveListKey(), 'unstaged')
+      assertEqualSets(selection.getSelectedItems(), new Set(['b']))
+
+      selection.selectNextItem()
+      assert.equal(selection.getActiveListKey(), 'conflicts')
+      assertEqualSets(selection.getSelectedItems(), new Set(['c']))
+
+      selection.selectNextItem()
+      assert.equal(selection.getActiveListKey(), 'staged')
+      assertEqualSets(selection.getSelectedItems(), new Set(['d']))
+
+      selection.selectNextItem()
+      assert.equal(selection.getActiveListKey(), 'staged')
+      assertEqualSets(selection.getSelectedItems(), new Set(['e']))
+
+      selection.selectNextItem()
+      assert.equal(selection.getActiveListKey(), 'staged')
+      assertEqualSets(selection.getSelectedItems(), new Set(['e']))
+
+      selection.selectPreviousItem()
+      assert.equal(selection.getActiveListKey(), 'staged')
+      assertEqualSets(selection.getSelectedItems(), new Set(['d']))
+
+      selection.selectPreviousItem()
+      assert.equal(selection.getActiveListKey(), 'conflicts')
+      assertEqualSets(selection.getSelectedItems(), new Set(['c']))
+
+      selection.selectPreviousItem()
+      assert.equal(selection.getActiveListKey(), 'unstaged')
+      assertEqualSets(selection.getSelectedItems(), new Set(['b']))
+
+      selection.selectPreviousItem()
+      assert.equal(selection.getActiveListKey(), 'unstaged')
+      assertEqualSets(selection.getSelectedItems(), new Set(['a']))
+
+      selection.selectPreviousItem()
+      assert.equal(selection.getActiveListKey(), 'unstaged')
+      assertEqualSets(selection.getSelectedItems(), new Set(['a']))
+    })
+
+    it('allows the selection to be expanded to the next or previous item', function () {
+      const selection = new CompositeListSelection({
+        listsByKey: {
+          unstaged: ['a', 'b'],
+          conflicts: ['c'],
+          staged: ['d', 'e']
+        }
+      })
+
+      assert.equal(selection.getActiveListKey(), 'unstaged')
+      assertEqualSets(selection.getSelectedItems(), new Set(['a']))
+
+      selection.selectNextItem(true)
+      assert.equal(selection.getActiveListKey(), 'unstaged')
+      assertEqualSets(selection.getSelectedItems(), new Set(['a', 'b']))
+
+      // Does not expand selections across lists
+      selection.selectNextItem(true)
+      assert.equal(selection.getActiveListKey(), 'unstaged')
+      assertEqualSets(selection.getSelectedItems(), new Set(['a', 'b']))
+
+      selection.selectItem('e')
+      selection.selectPreviousItem(true)
+      selection.selectPreviousItem(true)
+      assert.equal(selection.getActiveListKey(), 'staged')
+      assertEqualSets(selection.getSelectedItems(), new Set(['d', 'e']))
+    })
+
+    it('skips empty lists when selecting the next or previous item', function () {
+      const selection = new CompositeListSelection({
+        listsByKey: {
+          unstaged: ['a', 'b'],
+          conflicts: [],
+          staged: ['d', 'e']
+        }
+      })
+
+      selection.selectNextItem()
+      selection.selectNextItem()
+      assert.equal(selection.getActiveListKey(), 'staged')
+      assertEqualSets(selection.getSelectedItems(), new Set(['d']))
+      selection.selectPreviousItem()
+      assert.equal(selection.getActiveListKey(), 'unstaged')
+      assertEqualSets(selection.getSelectedItems(), new Set(['b']))
+    })
+
+    it('collapses the selection when moving down with the next list empty or up with the previous list empty', function () {
+      const selection = new CompositeListSelection({
+        listsByKey: {
+          unstaged: ['a', 'b'],
+          conflicts: [],
+          staged: []
+        }
+      })
+
+      selection.selectNextItem(true)
+      assertEqualSets(selection.getSelectedItems(), new Set(['a', 'b']))
+      selection.selectNextItem()
+      assertEqualSets(selection.getSelectedItems(), new Set(['b']))
+
+      selection.updateLists({
+        unstaged: [],
+        conflicts: [],
+        staged: ['a', 'b']
+      })
+
+      selection.selectNextItem()
+      selection.selectPreviousItem(true)
+      assertEqualSets(selection.getSelectedItems(), new Set(['a', 'b']))
+      selection.selectPreviousItem()
+      assertEqualSets(selection.getSelectedItems(), new Set(['a']))
+    })
+
+    it('allows selections to be added in the current active list, but updates the existing seleciton when activating a different list', function () {
+      const selection = new CompositeListSelection({
+        listsByKey: {
+          unstaged: ['a', 'b', 'c'],
+          conflicts: [],
+          staged: ['e', 'f', 'g']
+        }
+      })
+
+      selection.addOrSubtractSelection('c')
+      assertEqualSets(selection.getSelectedItems(), new Set(['a', 'c']))
+
+      selection.addOrSubtractSelection('g')
+      assertEqualSets(selection.getSelectedItems(), new Set(['g']))
+    })
+
+    it('allows all items in the active list to be selected', function () {
+      const selection = new CompositeListSelection({
+        listsByKey: {
+          unstaged: ['a', 'b', 'c'],
+          conflicts: [],
+          staged: ['e', 'f', 'g']
+        }
+      })
+
+      selection.selectAllItems()
+      assertEqualSets(selection.getSelectedItems(), new Set(['a', 'b', 'c']))
+
+      selection.activateNextSelection()
+      selection.selectAllItems()
+      assertEqualSets(selection.getSelectedItems(), new Set(['e', 'f', 'g']))
+    })
+
+    it('allows the first or last item in the active list to be selected', function () {
+      const selection = new CompositeListSelection({
+        listsByKey: {
+          unstaged: ['a', 'b', 'c'],
+          conflicts: [],
+          staged: ['e', 'f', 'g']
+        }
+      })
+
+      selection.activateNextSelection()
+      selection.selectLastItem()
+      assertEqualSets(selection.getSelectedItems(), new Set(['g']))
+      selection.selectFirstItem()
+      assertEqualSets(selection.getSelectedItems(), new Set(['e']))
+      selection.selectLastItem(true)
+      assertEqualSets(selection.getSelectedItems(), new Set(['e', 'f', 'g']))
+      selection.selectNextItem()
+      assertEqualSets(selection.getSelectedItems(), new Set(['g']))
+      selection.selectFirstItem(true)
+      assertEqualSets(selection.getSelectedItems(), new Set(['e', 'f', 'g']))
+    })
+  })
+
+  describe('updateLists(listsByKey)', function () {
+    it('keeps the selection head of each list pointed to an item with the same id', function () {
+      let listsByKey = {
+        unstaged: [{filePath: 'a'}, {filePath: 'b'}],
+        conflicts: [{filePath: 'c'}],
+        staged: [{filePath: 'd'}, {filePath: 'e'}, {filePath: 'f'}]
+      }
+      const selection = new CompositeListSelection({
+        listsByKey, idForItem: (item) => item.filePath
+      })
+
+      selection.selectItem(listsByKey.unstaged[1])
+      selection.selectItem(listsByKey.staged[1])
+      selection.selectItem(listsByKey.staged[2], true)
+
+      listsByKey = {
+        unstaged: [{filePath: 'a'}, {filePath: 'q'}, {filePath: 'b'}, {filePath: 'r'}],
+        conflicts: [{filePath: 's'}, {filePath: 'c'}],
+        staged: [{filePath: 'd'}, {filePath: 't'}, {filePath: 'e'}, {filePath: 'f'}]
+      }
+
+      selection.updateLists(listsByKey)
+
+      assert.equal(selection.getActiveListKey(), 'staged')
+      assertEqualSets(selection.getSelectedItems(), new Set([listsByKey.staged[3]]))
+
+      selection.activatePreviousSelection()
+      assert.equal(selection.getActiveListKey(), 'conflicts')
+      assertEqualSets(selection.getSelectedItems(), new Set([listsByKey.conflicts[1]]))
+
+      selection.activatePreviousSelection()
+      assert.equal(selection.getActiveListKey(), 'unstaged')
+      assertEqualSets(selection.getSelectedItems(), new Set([listsByKey.unstaged[2]]))
+    })
+
+    it('collapses to the start of the previous selection if the old head item is removed', function () {
+      let listsByKey = {
+        unstaged: [{filePath: 'a'}, {filePath: 'b'}, {filePath: 'c'}],
+        conflicts: [],
+        staged: [{filePath: 'd'}, {filePath: 'e'}, {filePath: 'f'}]
+      }
+      const selection = new CompositeListSelection({
+        listsByKey, idForItem: (item) => item.filePath
+      })
+
+      selection.selectItem(listsByKey.unstaged[1])
+      selection.selectItem(listsByKey.unstaged[2], true)
+      selection.selectItem(listsByKey.staged[1])
+
+      listsByKey = {
+        unstaged: [{filePath: 'a'}],
+        conflicts: [],
+        staged: [{filePath: 'd'}, {filePath: 'f'}]
+      }
+      selection.updateLists(listsByKey)
+
+      assert.equal(selection.getActiveListKey(), 'staged')
+      assertEqualSets(selection.getSelectedItems(), new Set([listsByKey.staged[1]]))
+
+      selection.activatePreviousSelection()
+      assert.equal(selection.getActiveListKey(), 'unstaged')
+      assertEqualSets(selection.getSelectedItems(), new Set([listsByKey.unstaged[0]]))
+    })
+
+    it('activates the first non-empty list following or preceding the current active list if one exists', function () {
+      const selection = new CompositeListSelection({
+        listsByKey: {
+          unstaged: ['a', 'b'],
+          conflicts: [],
+          staged: []
+        }
+      })
+
+      selection.updateLists({
+        unstaged: [],
+        conflicts: [],
+        staged: ['a', 'b']
+      })
+      assert.equal(selection.getActiveListKey(), 'staged')
+
+      selection.updateLists({
+        unstaged: ['a', 'b'],
+        conflicts: [],
+        staged: []
+      })
+      assert.equal(selection.getActiveListKey(), 'unstaged')
+    })
+  })
+})
diff --git a/test/views/file-patch-selection.test.js b/test/views/file-patch-selection.test.js
index 73b157c97a..9e89365749 100644
--- a/test/views/file-patch-selection.test.js
+++ b/test/views/file-patch-selection.test.js
@@ -3,15 +3,11 @@
 import FilePatchSelection from '../../lib/views/file-patch-selection'
 import Hunk from '../../lib/models/hunk'
 import HunkLine from '../../lib/models/hunk-line'
-
-function assertEqualSets (a, b) {
-  assert.equal(a.size, b.size, 'Sets are a different size')
-  a.forEach(item => assert(b.has(item), 'Sets have different elements'))
-}
+import {assertEqualSets} from '../helpers'
 
 describe('FilePatchSelection', () => {
   describe('line selection', () => {
-    it('starts a new line selection with selectLine and updates an existing selection when preserveTail is true',  () => {
+    it('starts a new line selection with selectLine and updates an existing selection when preserveTail is true', () => {
       const hunks = [
         new Hunk(1, 1, 1, 3, [
           new HunkLine('line-1', 'added', -1, 1),
@@ -509,7 +505,7 @@ describe('FilePatchSelection', () => {
       it('does not blow up when coalescing with no selections', function () {
         const hunks = [
           new Hunk(1, 1, 0, 1, [
-            new HunkLine('line-1', 'added', -1, 1),
+            new HunkLine('line-1', 'added', -1, 1)
           ])
         ]
         const selection = new FilePatchSelection(hunks)
@@ -526,11 +522,11 @@ describe('FilePatchSelection', () => {
     it('selects the first hunk by default', function () {
       const hunks = [
         new Hunk(1, 1, 0, 1, [
-          new HunkLine('line-1', 'added', -1, 1),
+          new HunkLine('line-1', 'added', -1, 1)
         ]),
         new Hunk(5, 6, 0, 1, [
-          new HunkLine('line-2', 'added', -1, 6),
-        ]),
+          new HunkLine('line-2', 'added', -1, 6)
+        ])
       ]
       const selection = new FilePatchSelection(hunks)
       assertEqualSets(selection.getSelectedHunks(), new Set([hunks[0]]))
@@ -539,16 +535,16 @@ describe('FilePatchSelection', () => {
     it('starts a new hunk selection with selectHunk and updates an existing selection when preserveTail is true', function () {
       const hunks = [
         new Hunk(1, 1, 0, 1, [
-          new HunkLine('line-1', 'added', -1, 1),
+          new HunkLine('line-1', 'added', -1, 1)
         ]),
         new Hunk(5, 6, 0, 1, [
-          new HunkLine('line-2', 'added', -1, 6),
+          new HunkLine('line-2', 'added', -1, 6)
         ]),
         new Hunk(10, 12, 0, 1, [
-          new HunkLine('line-3', 'added', -1, 12),
+          new HunkLine('line-3', 'added', -1, 12)
         ]),
         new Hunk(15, 18, 0, 1, [
-          new HunkLine('line-4', 'added', -1, 18),
+          new HunkLine('line-4', 'added', -1, 18)
         ])
       ]
       const selection = new FilePatchSelection(hunks)
@@ -563,24 +559,24 @@ describe('FilePatchSelection', () => {
       assertEqualSets(selection.getSelectedHunks(), new Set([hunks[0], hunks[1]]))
     })
 
-    it('adds a new hunk selection with addHunkSelection and always updates the head of the most recent hunk selection', function () {
+    it('adds a new hunk selection with addOrSubtractHunkSelection and always updates the head of the most recent hunk selection', function () {
       const hunks = [
         new Hunk(1, 1, 0, 1, [
-          new HunkLine('line-1', 'added', -1, 1),
+          new HunkLine('line-1', 'added', -1, 1)
         ]),
         new Hunk(5, 6, 0, 1, [
-          new HunkLine('line-2', 'added', -1, 6),
+          new HunkLine('line-2', 'added', -1, 6)
         ]),
         new Hunk(10, 12, 0, 1, [
-          new HunkLine('line-3', 'added', -1, 12),
+          new HunkLine('line-3', 'added', -1, 12)
         ]),
         new Hunk(15, 18, 0, 1, [
-          new HunkLine('line-4', 'added', -1, 18),
+          new HunkLine('line-4', 'added', -1, 18)
         ])
       ]
       const selection = new FilePatchSelection(hunks)
 
-      selection.addHunkSelection(hunks[2])
+      selection.addOrSubtractHunkSelection(hunks[2])
       assertEqualSets(selection.getSelectedHunks(), new Set([hunks[0], hunks[2]]))
 
       selection.selectHunk(hunks[3], true)
diff --git a/test/views/list-selection.test.js b/test/views/list-selection.test.js
new file mode 100644
index 0000000000..56a05e33bf
--- /dev/null
+++ b/test/views/list-selection.test.js
@@ -0,0 +1,25 @@
+/** @babel */
+
+import ListSelection from '../../lib/views/list-selection'
+import {assertEqualSets} from '../helpers'
+
+// This class is mostly tested via CompositeListSelection and
+// FilePatchSelection. This file contains unit tests that are more convenient to
+// write directly against this class.
+describe('ListSelection', () => {
+  describe('coalesce', () => {
+    it('correctly handles adding and subtracting a single item (regression)', function () {
+      const selection = new ListSelection({items: ['a', 'b', 'c']})
+      selection.selectLastItem(true)
+      selection.coalesce()
+      assertEqualSets(selection.getSelectedItems(), new Set(['a', 'b', 'c']))
+      selection.addOrSubtractSelection('b')
+      selection.coalesce()
+      assertEqualSets(selection.getSelectedItems(), new Set(['a', 'c']))
+      selection.addOrSubtractSelection('b')
+      global.debug = true
+      selection.coalesce()
+      assertEqualSets(selection.getSelectedItems(), new Set(['a', 'b', 'c']))
+    })
+  })
+})
diff --git a/test/views/staging-view.test.js b/test/views/staging-view.test.js
index 021f19398d..41ca902b67 100644
--- a/test/views/staging-view.test.js
+++ b/test/views/staging-view.test.js
@@ -1,53 +1,47 @@
 /** @babel */
 
-import {cloneRepository, buildRepository} from '../helpers'
-import path from 'path'
-import fs from 'fs'
 import sinon from 'sinon'
-
-import StagingView, {ListTypes} from '../../lib/views/staging-view'
+import path from 'path'
+import StagingView from '../../lib/views/staging-view'
+import FilePatch from '../../lib/models/file-patch'
 
 describe('StagingView', () => {
   describe('staging and unstaging files', () => {
     it('renders staged and unstaged files', async () => {
-      const workdirPath = await cloneRepository('three-files')
-      const repository = await buildRepository(workdirPath)
-      fs.writeFileSync(path.join(workdirPath, 'a.txt'), 'a change\n')
-      fs.unlinkSync(path.join(workdirPath, 'b.txt'))
-      const filePatches = await repository.getUnstagedChanges()
-      const view = new StagingView({repository, stagedChanges: [], unstagedChanges: filePatches})
-      const {stagedChangesView, unstagedChangesView} = view.refs
-      assert.deepEqual(stagedChangesView.props.items, [])
-      assert.deepEqual(unstagedChangesView.props.items, filePatches)
+      const filePatches = [
+        new FilePatch('a.txt', 'a.txt', 'modified', []),
+        new FilePatch('b.txt', null, 'deleted', [])
+      ]
+      const view = new StagingView({unstagedChanges: filePatches, stagedChanges: []})
+      const {refs} = view
+      function textContentOfChildren (element) {
+        return Array.from(element.children).map(child => child.textContent)
+      }
 
-      await view.update({repository, stagedChanges: [filePatches[1]], unstagedChanges: [filePatches[0]]})
-      assert.deepEqual(stagedChangesView.props.items, [filePatches[1]])
-      assert.deepEqual(unstagedChangesView.props.items, [filePatches[0]])
+      assert.deepEqual(textContentOfChildren(refs.unstagedChanges), ['a.txt', 'b.txt'])
+      assert.deepEqual(textContentOfChildren(refs.stagedChanges), [])
 
-      await view.update({repository, stagedChanges: [], unstagedChanges: filePatches})
-      assert.deepEqual(stagedChangesView.props.items, [])
-      assert.deepEqual(unstagedChangesView.props.items, filePatches)
+      await view.update({unstagedChanges: [filePatches[0]], stagedChanges: [filePatches[1]]})
+      assert.deepEqual(textContentOfChildren(refs.unstagedChanges), ['a.txt'])
+      assert.deepEqual(textContentOfChildren(refs.stagedChanges), ['b.txt'])
     })
 
     describe('confirmSelectedItems()', () => {
       it('calls stageFilePatch or unstageFilePatch depending on the current staging state of the toggled file patch', async () => {
-        const workdirPath = await cloneRepository('three-files')
-        const repository = await buildRepository(workdirPath)
-        fs.writeFileSync(path.join(workdirPath, 'a.txt'), 'a change\n')
-        fs.unlinkSync(path.join(workdirPath, 'b.txt'))
-        const filePatches = await repository.getUnstagedChanges()
+        const filePatches = [
+          new FilePatch('a.txt', 'a.txt', 'modified', []),
+          new FilePatch('b.txt', null, 'deleted', [])
+        ]
         const stageFiles = sinon.spy()
         const unstageFiles = sinon.spy()
-        const view = new StagingView({repository, stagedChanges: [], unstagedChanges: filePatches, stageFiles, unstageFiles})
+        const view = new StagingView({unstagedChanges: filePatches, stagedChanges: [], stageFiles, unstageFiles})
 
-        view.selectList(ListTypes.UNSTAGED)
-        view.selectItem(filePatches[1])
+        view.mousedownOnItem({detail: 1}, filePatches[1])
         view.confirmSelectedItems()
         assert.isTrue(stageFiles.calledWith(['b.txt']))
 
-        await view.update({repository, stagedChanges: [filePatches[1]], unstagedChanges: [filePatches[0]], stageFiles, unstageFiles})
-        await view.selectList(ListTypes.STAGED)
-        view.selectItem(filePatches[1])
+        await view.update({unstagedChanges: [filePatches[0]], stagedChanges: [filePatches[1]], stageFiles, unstageFiles})
+        view.mousedownOnItem({detail: 1}, filePatches[1])
         view.confirmSelectedItems()
         assert.isTrue(unstageFiles.calledWith(['b.txt']))
       })
@@ -56,311 +50,77 @@ describe('StagingView', () => {
 
   describe('merge conflicts list', () => {
     it('is visible only when conflicted paths are passed', async () => {
-      const workdirPath = await cloneRepository('three-files')
-      const repository = await buildRepository(workdirPath)
-      const view = new StagingView({repository, stagedChanges: [], unstagedChanges: []})
+      const view = new StagingView({unstagedChanges: [], stagedChanges: []})
 
-      assert.isUndefined(view.refs.mergeConflictListView)
+      assert.isUndefined(view.refs.mergeConflicts)
 
-      const mergeConflict = {
+      const mergeConflicts = [{
         getPath: () => 'conflicted-path',
         getFileStatus: () => 'modified',
         getOursStatus: () => 'deleted',
         getTheirsStatus: () => 'modified'
-      }
-      await view.update({repository, mergeConflicts: [mergeConflict], stagedChanges: [], unstagedChanges: []})
-      assert.isDefined(view.refs.mergeConflictListView)
-    })
-  })
-
-  describe('selectList()', () => {
-    describe('when lists are not empty', () => {
-      it('focuses lists accordingly', async () => {
-        const workdirPath = await cloneRepository('three-files')
-        const repository = await buildRepository(workdirPath)
-        fs.writeFileSync(path.join(workdirPath, 'a.txt'), 'a change\n')
-        fs.unlinkSync(path.join(workdirPath, 'b.txt'))
-        const filePatches = await repository.getUnstagedChanges()
-        const view = new StagingView({repository, stagedChanges: [filePatches[0]], unstagedChanges: [filePatches[1]]})
-
-        await view.selectList(ListTypes.STAGED)
-        assert.equal(view.getSelectedListKey(), ListTypes.STAGED)
-        let selectedLists = view.element.querySelectorAll('.git-StagingView-group.is-focused .git-StagingView-header')
-        assert.equal(selectedLists.length, 1)
-        assert.equal(selectedLists[0].textContent, 'Staged Changes')
-
-        await view.selectList(ListTypes.UNSTAGED)
-        assert.equal(view.getSelectedListKey(), ListTypes.UNSTAGED)
-        selectedLists = view.element.querySelectorAll('.git-StagingView-group.is-focused .git-StagingView-header')
-        assert.equal(selectedLists.length, 1)
-        assert.equal(selectedLists[0].textContent, 'Unstaged Changes')
-
-        await view.selectList(ListTypes.STAGED)
-        assert.equal(view.getSelectedListKey(), ListTypes.STAGED)
-        selectedLists = view.element.querySelectorAll('.git-StagingView-group.is-focused .git-StagingView-header')
-        assert.equal(selectedLists.length, 1)
-        assert.equal(selectedLists[0].textContent, 'Staged Changes')
-      })
-    })
-
-    describe('when list is empty', () => {
-      it('doesn\'t select list', async () => {
-        const workdirPath = await cloneRepository('three-files')
-        const repository = await buildRepository(workdirPath)
-        fs.writeFileSync(path.join(workdirPath, 'a.txt'), 'a change\n')
-        const filePatches = await repository.getUnstagedChanges()
-        const view = new StagingView({repository, stagedChanges: [], unstagedChanges: filePatches})
-        const {stagedChangesView, unstagedChangesView} = view.refs
-
-        await view.selectList(ListTypes.UNSTAGED)
-        assert.equal(view.getSelectedListKey(), ListTypes.UNSTAGED)
-
-        await view.selectList(ListTypes.STAGED)
-        assert.notEqual(view.getSelectedListKey(), ListTypes.STAGED)
-        assert.equal(view.getSelectedListKey(), ListTypes.UNSTAGED)
-      })
+      }]
+      await view.update({unstagedChanges: [], mergeConflicts, stagedChanges: []})
+      assert.isDefined(view.refs.mergeConflicts)
     })
   })
 
-  describe('focusNextList()', () => {
-    it('focuses lists accordingly', async () => {
-      const workdirPath = await cloneRepository('three-files')
-      const repository = await buildRepository(workdirPath)
-      fs.writeFileSync(path.join(workdirPath, 'a.txt'), 'a change\n')
-      fs.unlinkSync(path.join(workdirPath, 'b.txt'))
-      const filePatches = await repository.getUnstagedChanges()
-      const view = new StagingView({repository, stagedChanges: [filePatches[0]], unstagedChanges: [filePatches[1]]})
-
-      await view.focusNextList()
-      assert.equal(view.getSelectedListKey(), ListTypes.STAGED)
-      let selectedLists = view.element.querySelectorAll('.git-StagingView-group.is-focused .git-StagingView-header')
-      assert.equal(selectedLists.length, 1)
-      assert.equal(selectedLists[0].textContent, 'Staged Changes')
-
-      await view.focusNextList()
-      assert.equal(view.getSelectedListKey(), ListTypes.UNSTAGED)
-      selectedLists = view.element.querySelectorAll('.git-StagingView-group.is-focused .git-StagingView-header')
-      assert.equal(selectedLists.length, 1)
-      assert.equal(selectedLists[0].textContent, 'Unstaged Changes')
-
-      await view.focusNextList()
-      assert.equal(view.getSelectedListKey(), ListTypes.STAGED)
-      selectedLists = view.element.querySelectorAll('.git-StagingView-group.is-focused .git-StagingView-header')
-      assert.equal(selectedLists.length, 1)
-      assert.equal(selectedLists[0].textContent, 'Staged Changes')
-
-      // skips empty lists
-      await view.update({repository, stagedChanges: [filePatches[0]], unstagedChanges: []})
-      await view.focusNextList()
-      assert.equal(view.getSelectedListKey(), ListTypes.STAGED)
-      selectedLists = view.element.querySelectorAll('.git-StagingView-group.is-focused .git-StagingView-header')
-      assert.equal(selectedLists.length, 1)
-      assert.equal(selectedLists[0].textContent, 'Staged Changes')
-    })
-  })
-
-  describe('selecting files', () => {
-    describe('selectNextFilePatch({addToExisting, stopAtBounds}) and selectPreviousFilePatch({addToExisting, stopAtBounds})', () => {
-      it('selects next/previous staged filePatch if there is one, crossing the boundary between the unstaged and staged files unless stopAtBounds is true', async () => {
-        const workdirPath = await cloneRepository('three-files')
-        const repository = await buildRepository(workdirPath)
-        fs.writeFileSync(path.join(workdirPath, 'a.txt'), 'a change\n')
-        fs.unlinkSync(path.join(workdirPath, 'b.txt'))
-        fs.writeFileSync(path.join(workdirPath, 'c.txt'), 'another change\n')
-        fs.writeFileSync(path.join(workdirPath, 'd.txt'), 'new file 1\n')
-        fs.writeFileSync(path.join(workdirPath, 'e.txt'), 'new file 2\n')
-        fs.writeFileSync(path.join(workdirPath, 'f.txt'), 'new file 3\n')
-        const filePatches = await repository.getUnstagedChanges()
-        await repository.applyPatchToIndex(filePatches[0])
-        await repository.applyPatchToIndex(filePatches[1])
-        await repository.applyPatchToIndex(filePatches[2])
-        const stagedFilePatches = await repository.getStagedChanges()
-        const unstagedFilePatches = await repository.getUnstagedChanges()
-        const view = new StagingView({repository, stagedChanges: stagedFilePatches, unstagedChanges: unstagedFilePatches})
-
-        assert.equal(view.getSelectedListKey(), ListTypes.UNSTAGED)
-        assert.deepEqual(Array.from(view.getSelectedItems()), [unstagedFilePatches[0]])
-
-        view.selectPreviousFilePatch()
-        assert.equal(view.getSelectedListKey(), ListTypes.UNSTAGED)
-        assert.deepEqual(Array.from(view.getSelectedItems()), [unstagedFilePatches[0]])
-
-        view.selectNextFilePatch()
-        assert.equal(view.getSelectedListKey(), ListTypes.UNSTAGED)
-        assert.deepEqual(Array.from(view.getSelectedItems()), [unstagedFilePatches[1]])
-
-        view.selectNextFilePatch()
-        assert.equal(view.getSelectedListKey(), ListTypes.UNSTAGED)
-        assert.deepEqual(Array.from(view.getSelectedItems()), [unstagedFilePatches[2]])
-
-        view.selectNextFilePatch({stopAtBounds: true})
-        assert.equal(view.getSelectedListKey(), ListTypes.UNSTAGED)
-        assert.deepEqual(Array.from(view.getSelectedItems()), [unstagedFilePatches[2]])
-
-        view.selectNextFilePatch()
-        assert.equal(view.getSelectedListKey(), ListTypes.STAGED)
-        assert.deepEqual(Array.from(view.getSelectedItems()), [stagedFilePatches[0]])
-
-        view.selectNextFilePatch()
-        assert.equal(view.getSelectedListKey(), ListTypes.STAGED)
-        assert.deepEqual(Array.from(view.getSelectedItems()), [stagedFilePatches[1]])
-
-        view.selectNextFilePatch()
-        assert.equal(view.getSelectedListKey(), ListTypes.STAGED)
-        assert.deepEqual(Array.from(view.getSelectedItems()), [stagedFilePatches[2]])
-
-        view.selectNextFilePatch()
-        assert.equal(view.getSelectedListKey(), ListTypes.STAGED)
-        assert.deepEqual(Array.from(view.getSelectedItems()), [stagedFilePatches[2]])
-
-        view.selectPreviousFilePatch()
-        assert.equal(view.getSelectedListKey(), ListTypes.STAGED)
-        assert.deepEqual(Array.from(view.getSelectedItems()), [stagedFilePatches[1]])
-
-        view.selectPreviousFilePatch()
-        assert.equal(view.getSelectedListKey(), ListTypes.STAGED)
-        assert.deepEqual(Array.from(view.getSelectedItems()), [stagedFilePatches[0]])
-
-        view.selectPreviousFilePatch({stopAtBounds: true})
-        assert.equal(view.getSelectedListKey(), ListTypes.STAGED)
-        assert.deepEqual(Array.from(view.getSelectedItems()), [stagedFilePatches[0]])
-
-        view.selectPreviousFilePatch()
-        assert.equal(view.getSelectedListKey(), ListTypes.UNSTAGED)
-        assert.deepEqual(Array.from(view.getSelectedItems()), [unstagedFilePatches[2]])
-      })
-
-      it('retains currently selected filePatches when addToExisting is true', async () => {
-        const workdirPath = await cloneRepository('three-files')
-        const repository = await buildRepository(workdirPath)
-        fs.writeFileSync(path.join(workdirPath, 'a.txt'), 'a change\n')
-        fs.unlinkSync(path.join(workdirPath, 'b.txt'))
-        fs.writeFileSync(path.join(workdirPath, 'c.txt'), 'another change\n')
-        fs.writeFileSync(path.join(workdirPath, 'd.txt'), 'new file 1\n')
-        fs.writeFileSync(path.join(workdirPath, 'e.txt'), 'new file 2\n')
-        fs.writeFileSync(path.join(workdirPath, 'f.txt'), 'new file 3\n')
-        const filePatches = await repository.getUnstagedChanges()
-        await repository.applyPatchToIndex(filePatches[0])
-        await repository.applyPatchToIndex(filePatches[1])
-        await repository.applyPatchToIndex(filePatches[2])
-        const stagedFilePatches = await repository.getStagedChanges()
-        const unstagedFilePatches = await repository.getUnstagedChanges()
-        const view = new StagingView({repository, stagedChanges: stagedFilePatches, unstagedChanges: unstagedFilePatches})
-
-        assert.equal(view.getSelectedListKey(), ListTypes.UNSTAGED)
-        assert.deepEqual(Array.from(view.getSelectedItems()).length, 1)
-
-        view.selectPreviousFilePatch({addToExisting: true})
-        assert.equal(view.getSelectedListKey(), ListTypes.UNSTAGED)
-        assert.deepEqual(Array.from(view.getSelectedItems()).length, 1)
-
-        view.selectNextFilePatch({addToExisting: true})
-        assert.equal(view.getSelectedListKey(), ListTypes.UNSTAGED)
-        assert.deepEqual(Array.from(view.getSelectedItems()).length, 2)
-
-        view.selectNextFilePatch({addToExisting: true})
-        assert.equal(view.getSelectedListKey(), ListTypes.UNSTAGED)
-        assert.deepEqual(Array.from(view.getSelectedItems()).length, 3)
-
-        view.selectNextFilePatch({addToExisting: true, stopAtBounds: true})
-        assert.equal(view.getSelectedListKey(), ListTypes.UNSTAGED)
-        assert.deepEqual(Array.from(view.getSelectedItems()).length, 3)
-
-        view.selectNextFilePatch()
-        assert.equal(view.getSelectedListKey(), ListTypes.STAGED)
-        assert.deepEqual(Array.from(view.getSelectedItems()).length, 1)
-
-        view.selectNextFilePatch({addToExisting: true})
-        assert.equal(view.getSelectedListKey(), ListTypes.STAGED)
-        assert.deepEqual(Array.from(view.getSelectedItems()).length, 2)
-
-        view.selectNextFilePatch({addToExisting: true})
-        assert.equal(view.getSelectedListKey(), ListTypes.STAGED)
-        assert.deepEqual(Array.from(view.getSelectedItems()).length, 3)
-
-        view.selectNextFilePatch({addToExisting: true})
-        assert.equal(view.getSelectedListKey(), ListTypes.STAGED)
-        assert.deepEqual(Array.from(view.getSelectedItems()).length, 3)
-
-        view.selectNextFilePatch()
-        assert.equal(view.getSelectedListKey(), ListTypes.STAGED)
-        assert.deepEqual(Array.from(view.getSelectedItems()).length, 1)
-
-        view.selectPreviousFilePatch({addToExisting: true})
-        assert.equal(view.getSelectedListKey(), ListTypes.STAGED)
-        assert.deepEqual(Array.from(view.getSelectedItems()).length, 2)
-
-        view.selectPreviousFilePatch({addToExisting: true})
-        assert.equal(view.getSelectedListKey(), ListTypes.STAGED)
-        assert.deepEqual(Array.from(view.getSelectedItems()).length, 3)
-
-        view.selectPreviousFilePatch({addToExisting: true, stopAtBounds: true})
-        assert.equal(view.getSelectedListKey(), ListTypes.STAGED)
-        assert.deepEqual(Array.from(view.getSelectedItems()).length, 3)
-      })
-    })
+  describe('when the selection changes', function () {
+    it('notifies the parent component via the appropriate callback', async function () {
+      const filePatches = [
+        new FilePatch('a.txt', 'a.txt', 'modified', []),
+        new FilePatch('b.txt', null, 'deleted', [])
+      ]
+      const mergeConflicts = [{
+        getPath: () => 'c.txt',
+        getFileStatus: () => 'modified',
+        getOursStatus: () => 'deleted',
+        getTheirsStatus: () => 'modified'
+      }]
 
-    it('calls didSelectFilePatch when a file patch is selected via the mouse or keyboard if StagingView has focus', async () => {
       const didSelectFilePatch = sinon.spy()
+      const didSelectMergeConflictFile = sinon.spy()
 
-      const workdirPath = await cloneRepository('three-files')
-      const repository = await buildRepository(workdirPath)
-      fs.writeFileSync(path.join(workdirPath, 'a.txt'), 'a change\n')
-      fs.unlinkSync(path.join(workdirPath, 'b.txt'))
-      fs.writeFileSync(path.join(workdirPath, 'c.txt'), 'another change\n')
-      const filePatches = await repository.getUnstagedChanges()
-      await repository.applyPatchToIndex(filePatches[0])
-      await repository.applyPatchToIndex(filePatches[1])
-      const stagedChanges = await repository.getStagedChanges()
-      const unstagedChanges = await repository.getUnstagedChanges()
-
-      const view = new StagingView({repository, stagedChanges, unstagedChanges, didSelectFilePatch})
-      const {stagedChangesView, unstagedChangesView} = view.refs
-
-      // doesn't get called if StagingView is not focused
-      assert.isFalse(view.isFocused())
-      view.enableSelections()
-      view.selectItem(unstagedChangesView.props.items[0])
-      assert.equal(didSelectFilePatch.callCount, 0)
-
-      sinon.stub(view, 'isFocused', () => {
-        return true
+      const view = new StagingView({
+        didSelectFilePatch, didSelectMergeConflictFile,
+        unstagedChanges: filePatches, mergeConflicts, stagedChanges: []
       })
-      assert.isTrue(view.isFocused())
-
-      // selection via mouse in unstaged changes
-      view.enableSelections()
-      view.selectItem(unstagedChangesView.props.items[0])
-      assert.equal(didSelectFilePatch.callCount, 1)
-      assert.deepEqual(didSelectFilePatch.args[0], [unstagedChangesView.props.items[0], 'unstaged', {focus: undefined}])
-
-      // focus staged changes list and first item gets selected
-      view.focusNextList()
-      assert.equal(didSelectFilePatch.callCount, 2)
-      assert.deepEqual(didSelectFilePatch.args[1], [stagedChangesView.props.items[0], 'staged', {focus: undefined}])
-      view.disableSelections()
-
-      // select another item in staged changes list via mouse
-      view.enableSelections()
-      view.selectItem(stagedChangesView.props.items[1])
-      assert.equal(didSelectFilePatch.callCount, 3)
-      assert.deepEqual(didSelectFilePatch.args[2], [stagedChangesView.props.items[1], 'staged', {focus: undefined}])
-      view.disableSelections()
-
-      // select next via keyboard
-      await view.selectNextFilePatch()
-      assert.equal(didSelectFilePatch.callCount, 3)
-      assert.deepEqual(didSelectFilePatch.args[2], [stagedChangesView.props.items[1], 'staged', {focus: undefined}])
-
-      // select previous via keyboard
-      await view.selectPreviousFilePatch()
-      assert.equal(didSelectFilePatch.callCount, 4)
-      assert.deepEqual(didSelectFilePatch.args[3], [stagedChangesView.props.items[0], 'staged', {focus: undefined}])
+      assert.isTrue(didSelectFilePatch.calledWith(filePatches[0]))
+      await view.selectNext()
+      assert.isTrue(didSelectFilePatch.calledWith(filePatches[1]))
+      await view.selectNext()
+      assert.isTrue(didSelectMergeConflictFile.calledWith(mergeConflicts[0]))
+    })
 
-      // select previous via keyboard, cross boundary
-      await view.selectPreviousFilePatch()
-      assert.equal(didSelectFilePatch.callCount, 5)
-      assert.deepEqual(didSelectFilePatch.args[4], [unstagedChangesView.props.items[0], 'unstaged', {focus: undefined}])
+    it('autoscroll to the selected item if it is out of view', async function () {
+      const unstagedChanges = [
+        new FilePatch('a.txt', 'a.txt', 'modified', []),
+        new FilePatch('b.txt', 'b.txt', 'modified', []),
+        new FilePatch('c.txt', 'c.txt', 'modified', []),
+        new FilePatch('d.txt', 'd.txt', 'modified', []),
+        new FilePatch('e.txt', 'e.txt', 'modified', []),
+        new FilePatch('f.txt', 'f.txt', 'modified', []),
+      ]
+      const view = new StagingView({unstagedChanges, stagedChanges: []})
+
+      // Actually loading the style sheet is complicated and prone to timing
+      // issues, so this applies some minimal styling to allow the unstaged
+      // changes list to scroll.
+      document.body.appendChild(view.element)
+      view.refs.unstagedChanges.style.flex = 'inherit';
+      view.refs.unstagedChanges.style.overflow = 'scroll';
+      view.refs.unstagedChanges.style.height = '50px';
+
+      assert.equal(view.refs.unstagedChanges.scrollTop, 0)
+
+      await view.selectNext()
+      await view.selectNext()
+      await view.selectNext()
+      await view.selectNext()
+
+      assert.isAbove(view.refs.unstagedChanges.scrollTop, 0)
+
+      view.element.remove()
     })
   })
 })