From f477cf3cd649c4ee680f28399da42ef74e87127f Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Tue, 7 Jul 2026 00:31:36 +0200
Subject: [PATCH 01/14] [perf] Add @tanstack/vue-virtual dependency

PERF-1 pilot: large productions (thousands of edits/shots/assets) freeze
the page because Kitsu's datatables render every row's DOM regardless of
scroll position. @tanstack/vue-virtual is a headless virtualizer that
fits the intricate sticky-header/sticky-column table layout used across
the list components, unlike component libraries that own their own DOM.

This commit only adds the dependency; EditList.vue is virtualized as the
pilot in the next commit.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 package-lock.json | 27 +++++++++++++++++++++++++++
 package.json      |  1 +
 2 files changed, 28 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index daec580127..e4c8caa547 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@fullcalendar/vue3": "6.1.21",
         "@google/model-viewer": "4.3.1",
         "@sentry/vue": "10.63.0",
+        "@tanstack/vue-virtual": "^3.13.31",
         "@unhead/vue": "3.1.7",
         "@vuepic/vue-datepicker": "14.0.0",
         "bowser": "2.14.1",
@@ -2771,6 +2772,32 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.17.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.17.3.tgz",
+      "integrity": "sha512-8Np/TFELpI0ySuJoVmjvOrQYXH/8sTX0Biv9szhFhY39xOdAAY+smrMxjxOum/ux3eM8MUJQsEJ0/R0UpvC8dw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/vue-virtual": {
+      "version": "3.13.31",
+      "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.13.31.tgz",
+      "integrity": "sha512-wZMEoSf852jQqaf3Ika1J7PiBae6341LNy/2CxmIyn0XKDQXMuK41wVX+xp6G0yx8jyR95Ef+Tdr13DK7mbJtQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.17.3"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "vue": "^2.7.0 || ^3.0.0"
+      }
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.3",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.3.tgz",
diff --git a/package.json b/package.json
index d3f42f9f66..508efdbe9f 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "@fullcalendar/vue3": "6.1.21",
     "@google/model-viewer": "4.3.1",
     "@sentry/vue": "10.63.0",
+    "@tanstack/vue-virtual": "^3.13.31",
     "@unhead/vue": "3.1.7",
     "@vuepic/vue-datepicker": "14.0.0",
     "bowser": "2.14.1",

From dfcc467274183391e52630f477f9543039b1f72f Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Tue, 7 Jul 2026 00:32:02 +0200
Subject: [PATCH 02/14] [edits] Virtualize EditList rows with
 @tanstack/vue-virtual

PERF-1 pilot on a single grid. EditList renders every edit's <tr>
unconditionally, so productions with thousands of edits freeze the
Edits page. useVirtualizer (added via a setup() hook, the rest of the
component stays Options API) now only mounts rows near the viewport.

Row-positioning technique: real <tr>/<td> spacer rows (top/bottom) sized
to the off-screen rows' total height, rather than absolutely-positioned
rows with a translateY transform. Several columns in this table
(metadata descriptors) have no explicit CSS width and rely on the
browser's native <table> auto-layout across all currently-rendered rows
to stay aligned with the header; a transform-based tbody would force
each row into its own independent `display:table` box, breaking that
shared column-width resolution. Spacer rows keep every rendered row (and
the header) in the same table layout context, so column widths and the
existing sticky header/columns (position: sticky + the offsets computed
in updateOffsets(), which only ever reads header refs) are unaffected.

Row height is content-driven (big-thumbnail toggle, wrapping
descriptions), so rows are dynamically measured via
rowVirtualizer.measureElement, with a rough per-thumbnail-size estimate
only used before a row's first measurement.

`i` (a row's real index into displayedEdits, not its position among the
rendered subset) is threaded through unchanged everywhere the template
already depended on it (isSelected, the editor-i-j/validation-i-j ref
names, the z-index stacking hack), by iterating a `visibleRows` computed
of `{ edit, i }` pairs instead of `displayedEdits` directly.

DOM-reads adapted: entity_list.js's onTaskSelected() rebuilds a
shift-click range-selection rectangle by reading
`this.$refs['validation-i-j']` for every cell in range, which silently
drops any cell outside the rendered window once rows are virtualized.
Overridden locally in EditList.vue (mixin methods lose to a same-named
component method, so ShotList/AssetList keep the original DOM-reading
version) to resolve the same rectangle from
displayedEdits/taskTypeMap/taskMap instead.

Known, not adapted (out of this pilot's contained scope - shared across
ShotList/AssetList/EpisodeList, not just EditList):
- descriptors.js keyMetadataNavigation (Ctrl+Arrow between metadata
  inputs) wraps first<->last row via `this.$refs['editor-i-j']`; once
  virtualized, wrapping to a far-away unrendered row is a silent no-op.
- selection.js select()/onKeyDown (Alt+Arrow between validation cells)
  steps by one row via the same ref pattern; in practice low-risk since
  overscan=10 keeps the adjacent row mounted, but not guaranteed at the
  rendered window's edge.
Both would need scrollToIndex + a wait-for-mount choreography that
belongs with the later EntityDataGrid extraction, not this single-list
pilot.

No component test added: @tanstack/virtual-core's default viewport
tracking needs ResizeObserver, which jsdom doesn't implement (guarded
with `if (!ResizeObserver) return` in observeElementRect), and jsdom's
getBoundingClientRect always returns zeros. Without either, the
virtualizer's viewport rect stays stuck at its {width:0, height:0}
default, so a test can't exercise "only visible rows render" - it would
either pass trivially regardless of correctness or require mocking the
entire size-observation pipeline. Matches this repo's existing testing
split (vite.config.js: components are exercised through the dev app;
coverage thresholds are scoped to src/lib and src/store only).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/lists/EditList.vue | 239 +++++++++++++++++++++++++++++-
 1 file changed, 238 insertions(+), 1 deletion(-)

diff --git a/src/components/lists/EditList.vue b/src/components/lists/EditList.vue
index 469a2ee361..96025c7598 100644
--- a/src/components/lists/EditList.vue
+++ b/src/components/lists/EditList.vue
@@ -207,12 +207,27 @@
         </thead>
         <tbody class="datatable-body">
           <template v-if="!isLoading && isListVisible">
+            <!--
+              PERF-1 pilot: virtualized rows (@tanstack/vue-virtual). Only
+              the rows near the viewport are actually rendered below; these
+              two spacer rows reproduce the true scroll height of the
+              rows above/below them so the scrollbar and column widths
+              behave like a fully-rendered table.
+            -->
+            <tr class="virtual-spacer-row" v-if="topSpacerHeight > 0">
+              <td
+                :colspan="totalColumnsCount"
+                :style="{ height: `${topSpacerHeight}px` }"
+              ></td>
+            </tr>
             <tr
               class="datatable-row"
               scope="row"
               :key="edit.id"
+              :ref="el => rowVirtualizer.measureElement(el)"
+              :data-index="i"
               :class="{ canceled: edit.canceled }"
-              v-for="(edit, i) in displayedEdits"
+              v-for="{ edit, i } in visibleRows"
             >
               <td class="episode" v-if="isTVShow">
                 <div class="flexrow">
@@ -448,6 +463,12 @@
               />
               <td class="actions" v-else></td>
             </tr>
+            <tr class="virtual-spacer-row" v-if="bottomSpacerHeight > 0">
+              <td
+                :colspan="totalColumnsCount"
+                :style="{ height: `${bottomSpacerHeight}px` }"
+              ></td>
+            </tr>
           </template>
         </tbody>
       </table>
@@ -513,6 +534,8 @@
 </template>
 
 <script>
+import { useVirtualizer } from '@tanstack/vue-virtual'
+import { computed, ref } from 'vue'
 import { mapGetters, mapActions } from 'vuex'
 
 import preferences from '@/lib/preferences'
@@ -537,6 +560,12 @@ import TableInfo from '@/components/widgets/TableInfo.vue'
 import ValidationCell from '@/components/cells/ValidationCell.vue'
 import ValidationHeader from '@/components/cells/ValidationHeader.vue'
 
+// PERF-1 pilot: rough row-height estimates used before a row is measured;
+// actual heights are then tracked precisely via rowVirtualizer.measureElement
+// (rows aren't fixed-height: big thumbnails and wrapped descriptions vary it).
+const ROW_HEIGHT_ESTIMATE = 52
+const ROW_HEIGHT_ESTIMATE_BIG_THUMBNAILS = 116
+
 export default {
   name: 'edit-list',
 
@@ -581,11 +610,35 @@ export default {
     'delete-clicked',
     'edit-clicked',
     'edit-history',
+    'keep-task-panel-open',
     'metadata-changed',
     'restore-clicked',
     'scroll'
   ],
 
+  // PERF-1 pilot: useVirtualizer is a composable, so it needs a setup()
+  // hook even though this component is otherwise Options API. `body` is
+  // returned so it doubles as `this.$refs.body` for the existing mixin
+  // methods (setScrollPosition, onBodyScroll's scrollHeight check, ...)
+  // and as the virtualizer's scroll element.
+  setup(props) {
+    const body = ref(null)
+    const rowVirtualizer = useVirtualizer(
+      computed(() => ({
+        count: props.displayedEdits.length,
+        getScrollElement: () => body.value,
+        estimateSize: () =>
+          props.displaySettings.bigThumbnails
+            ? ROW_HEIGHT_ESTIMATE_BIG_THUMBNAILS
+            : ROW_HEIGHT_ESTIMATE,
+        getItemKey: index => props.displayedEdits[index]?.id ?? index,
+        overscan: 10
+      }))
+    )
+
+    return { body, rowVirtualizer }
+  },
+
   data() {
     return {
       type: 'edit',
@@ -691,6 +744,93 @@ export default {
 
     localStorageStickKey() {
       return `stick-edits-${this.currentProduction?.id}`
+    },
+
+    // PERF-1 pilot: row virtualization. Only the rows tanstack decides are
+    // near the viewport are ever mounted; everything below reasons in terms
+    // of `displayedEdits` indexes (never DOM order), so filtering/sorting/
+    // real-time updates keep working exactly as before virtualization.
+    virtualRows() {
+      return this.rowVirtualizer.getVirtualItems()
+    },
+
+    totalRowsSize() {
+      return this.rowVirtualizer.getTotalSize()
+    },
+
+    topSpacerHeight() {
+      return this.virtualRows.length > 0 ? this.virtualRows[0].start : 0
+    },
+
+    bottomSpacerHeight() {
+      if (this.virtualRows.length === 0) return 0
+      const lastRow = this.virtualRows[this.virtualRows.length - 1]
+      return this.totalRowsSize - lastRow.end
+    },
+
+    // { edit, i } pairs for the rows tanstack currently renders, `i` being
+    // the row's real index in `displayedEdits` (not its position among the
+    // rendered subset) so every existing i-based computation (isSelected,
+    // z-index, editor/validation refs, ...) stays correct unchanged.
+    visibleRows() {
+      return this.virtualRows
+        .filter(
+          virtualRow => this.displayedEdits[virtualRow.index] !== undefined
+        )
+        .map(virtualRow => ({
+          edit: this.displayedEdits[virtualRow.index],
+          i: virtualRow.index
+        }))
+    },
+
+    // Sticked + non-sticked validation columns in the same order as the x/y
+    // grid coordinates used by isSelected()/onTaskSelected() below.
+    allDisplayedValidationColumns() {
+      return [
+        ...this.stickedDisplayedValidationColumns,
+        ...this.nonStickedDisplayedValidationColumns
+      ]
+    },
+
+    // Spans the spacer rows across every column currently in the header,
+    // so they don't leave a jagged one-column-wide row in the table.
+    totalColumnsCount() {
+      let count = 1 // edit name column, always present
+      if (this.isTVShow) count++
+      if (this.displaySettings.showInfos) {
+        count++ // resolution
+        count += this.stickedVisibleMetadataDescriptors.length
+        count += this.nonStickedVisibleMetadataDescriptors.length
+      }
+      if (!this.isLoading) {
+        count += this.stickedDisplayedValidationColumns.length
+        count += this.nonStickedDisplayedValidationColumns.length
+      }
+      if (
+        !this.isCurrentUserClient &&
+        this.displaySettings.showInfos &&
+        this.isEditDescription
+      ) {
+        count++
+      }
+      if (
+        !this.isCurrentUserClient &&
+        this.displaySettings.showInfos &&
+        this.isEditTime &&
+        this.metadataDisplayHeaders.timeSpent
+      ) {
+        count++
+      }
+      if (
+        !this.isCurrentUserClient &&
+        this.displaySettings.showInfos &&
+        this.isEditEstimation &&
+        this.metadataDisplayHeaders.estimation
+      ) {
+        count++
+      }
+      count++ // actions column, always present
+      return count
     }
   },
 
@@ -701,6 +841,96 @@ export default {
       return this.editSelectionGrid.has(`${lineIndex}-${columnIndex}`)
     },
 
+    // PERF-1 pilot: overrides entity_list.js's onTaskSelected(). The shared
+    // version rebuilds a shift-click range selection by reading
+    // `this.$refs['validation-i-j']` for every cell in the rectangle, which
+    // only works when every row is in the DOM. With rows virtualized, cells
+    // outside the rendered window have no ref and get silently dropped from
+    // the range. This override resolves the same range from
+    // displayedEdits/taskTypeMap/taskMap instead, so shift-click still
+    // selects the full range regardless of what is currently scrolled into
+    // view. Everything outside the double loop is unchanged from the mixin.
+    onTaskSelected(validationInfo, sticked) {
+      const columnOffset = this.stickedDisplayedValidationColumns.length
+      const selection = []
+      if (!sticked) {
+        validationInfo = { ...validationInfo }
+        validationInfo.y += columnOffset
+      }
+      this.$emit('keep-task-panel-open', true)
+      if (validationInfo.isShiftKey) {
+        if (this.lastSelection) {
+          let startX = this.lastSelection.x
+          let endX = validationInfo.x
+          let startY = this.lastSelection.y
+          if (!sticked) startY += columnOffset
+          let endY = validationInfo.y
+          const grid = this.editSelectionGrid
+          if (validationInfo.x < this.lastSelection.x) {
+            startX = validationInfo.x
+            endX = this.lastSelection.x
+          }
+          if (validationInfo.y < this.lastSelection.y) {
+            startY = validationInfo.y
+            endY = this.lastSelection.y
+            if (!sticked) endY += columnOffset
+          }
+
+          for (let i = startX; i <= endX; i++) {
+            const edit = this.displayedEdits[i]
+            if (edit) {
+              for (let j = startY; j <= endY; j++) {
+                const columnId = this.allDisplayedValidationColumns[j]
+                const isSelectedCell = grid?.has(`${i}-${j}`)
+                // ValidationCell's `selectable` prop defaults to true and is
+                // never bound in this list's template, so every column in
+                // range is selectable here (unlike the generic mixin
+                // version, which supports lists that do restrict it).
+                if (columnId && !isSelectedCell) {
+                  selection.push({
+                    entity: edit,
+                    column: this.taskTypeMap.get(columnId),
+                    task: this.taskMap.get(
+                      edit.validations ? edit.validations.get(columnId) : null
+                    ),
+                    x: i,
+                    y: j
+                  })
+                }
+              }
+            }
+          }
+          this.$store.commit('ADD_SELECTED_TASK', validationInfo)
+        }
+      } else if (!validationInfo.isCtrlKey) {
+        this.$store.commit('CLEAR_SELECTED_TASKS')
+      }
+      if (selection.length === 0) {
+        this.$store.commit('ADD_SELECTED_TASK', validationInfo)
+      } else {
+        this.$store.commit('ADD_SELECTED_TASKS', selection)
+      }
+      this.updateTaskInQuery()
+
+      if (!validationInfo.isShiftKey && validationInfo.isUserClick) {
+        const x = validationInfo.x
+        let y = validationInfo.y
+        if (!sticked) y -= columnOffset
+        this.lastSelection = { x, y }
+        // The clicked cell was necessarily visible to be clicked, so it is
+        // always currently rendered: this ref lookup stays safe unchanged.
+        const ref = `validation-${x}-${y}`
+        const validationCell = this.$refs[ref][0]
+        this.$nextTick(() => {
+          this.scrollToValidationCell(validationCell)
+        })
+      }
+
+      this.$nextTick(() => {
+        this.$emit('keep-task-panel-open', false)
+      })
+    },
+
     toggleLine(edit, event) {
       const selected = event.target.checked
       const editsToSelect = [edit]
@@ -853,6 +1083,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+// PERF-1 pilot: spacer rows standing in for the off-screen virtualized
+// rows above/below the rendered window (see the datatable-body template).
+.virtual-spacer-row td {
+  padding: 0;
+  border: none;
+}
+
 .project {
   min-width: 60px;
   width: 60px;

From 337e65b8da95ddd975b08d165bce7c308fd48bfe Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Tue, 7 Jul 2026 00:44:58 +0200
Subject: [PATCH 03/14] [cells] Add an opt-in assignee cap to ValidationCell

The assignee avatar stack sits in a flex-wrap:wrap wrapper, so a task
with many assignees wraps to a second line and grows its row. Fine for
plain tables, but a virtualized list needs row heights that do not
depend on assignation counts.

New maxAssignees prop (default 0 = no cap, historical wrapping behavior
untouched for ShotList/AssetList/every other consumer): when set, at
most that many avatars render, the rest collapses into a "+N" badge
whose tooltip lists the hidden names, and the status wrapper switches
to a single non-wrapping line (nowrap + overflow hidden + no shrink) so
the cell height is constant no matter the status-name length or people
count. The badge uses theme variables so it follows dark mode.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/cells/ValidationCell.vue | 52 ++++++++++++++++++++++++-
 1 file changed, 51 insertions(+), 1 deletion(-)

diff --git a/src/components/cells/ValidationCell.vue b/src/components/cells/ValidationCell.vue
index c6f29d99e2..61bf15956b 100644
--- a/src/components/cells/ValidationCell.vue
+++ b/src/components/cells/ValidationCell.vue
@@ -16,6 +16,7 @@
       <div class="filler" v-if="contactSheet"></div>
       <div
         class="wrapper status-wrapper"
+        :class="{ 'single-line': maxAssignees > 0 }"
         :style="statusWrapperStyle"
         v-if="!minimized"
       >
@@ -64,7 +65,7 @@
               'font-weight': isDarkTheme ? 'bold' : 'normal'
             }"
             :key="`avatar-${person.id}`"
-            v-for="person in assignees"
+            v-for="person in visibleAssignees"
           >
             <img
               loading="lazy"
@@ -74,6 +75,13 @@
             />
             <template v-else>{{ person.initials }}</template>
           </span>
+          <span
+            class="avatar has-text-centered more-assignees"
+            :title="extraAssigneesTitle"
+            v-if="extraAssigneesCount > 0"
+          >
+            +{{ extraAssigneesCount }}
+          </span>
         </template>
         <span class="subscribed" v-if="task?.is_subscribed">
           <eye-icon :size="12" />
@@ -111,6 +119,12 @@ const props = defineProps({
   isBorder: { type: Boolean, default: true },
   isCastingReady: { type: Boolean, default: false },
   left: { type: String, default: '0px' },
+  // Opt-in (0 = no cap, keeps the historical wrapping behavior): show at
+  // most this many assignee avatars and collapse the rest into a "+N"
+  // count on a single non-wrapping line. Virtualized lists (EditList) use
+  // it so a heavily-assigned task can never wrap the avatar stack and
+  // change the row height.
+  maxAssignees: { type: Number, default: 0 },
   minimized: { type: Boolean, default: false },
   rowX: { type: Number, default: 0 },
   selectable: { type: Boolean, default: true },
@@ -151,6 +165,23 @@ const assignees = computed(() =>
   )
 )
 
+const visibleAssignees = computed(() =>
+  props.maxAssignees > 0
+    ? assignees.value.slice(0, props.maxAssignees)
+    : assignees.value
+)
+
+const extraAssigneesCount = computed(
+  () => assignees.value.length - visibleAssignees.value.length
+)
+
+const extraAssigneesTitle = computed(() =>
+  assignees.value
+    .slice(props.maxAssignees)
+    .map(person => person.full_name)
+    .join('\n')
+)
+
 const priority = computed(() => formatPrioritySymbol(task.value.priority))
 
 const cellStyle = computed(() => {
@@ -276,6 +307,25 @@ defineExpose({
   width: 100%;
 }
 
+// Opt-in via the maxAssignees prop: the cell content stays on one line and
+// clips instead of wrapping, so the cell height is constant whatever the
+// status name length or assignee count.
+.status-wrapper.single-line {
+  flex-wrap: nowrap;
+  overflow: hidden;
+
+  > * {
+    flex-shrink: 0;
+  }
+}
+
+.avatar.more-assignees {
+  background: var(--background-alt);
+  color: var(--text);
+  font-size: 9px;
+  font-weight: bold;
+}
+
 .full-wrapper {
   flex: 1;
 }

From bc9a8abbed21a45166d38cdd2cd931390abba7f1 Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Tue, 7 Jul 2026 00:45:09 +0200
Subject: [PATCH 04/14] [edits] Fix EditList row heights per display mode

Follow-up to the virtualization pilot, from design review: rows should
have a fixed height within each display mode instead of relying on
per-row measurement, with measureElement kept only as a safety net.

Two height-breakers handled:

- Contact sheet mode goes through the same virtualized table rows (it
  is a ComboboxDisplayOptions toggle that EditList forwards to
  ValidationCell as :contact-sheet, which renders a fixed 150x100
  preview wrapper per cell), so it gets its own estimate:
  ROW_HEIGHT_ESTIMATE_CONTACT_SHEET = 102 (100px wrapper + row border;
  the validation td has no padding). estimateSize checks bigThumbnails
  first because in the combined mode the name column's 100px thumbnail
  plus its 6px cell padding is the taller constraint.

- Assignment overflow: EditList now passes max-assignees=3 to both
  validation-cell usages (opt-in prop added to ValidationCell in the
  previous commit; other lists keep the wrapping behavior). 3 avatars
  (23px each) plus the status tag fit the 150px validation cell on one
  line; anything beyond collapses into a "+N" badge and the cell clips
  instead of wrapping, so assignation counts can no longer change a
  row's height.

Estimates per mode: 52 normal, 116 big thumbnails (also when combined
with contact sheet), 102 contact sheet.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/lists/EditList.vue | 35 ++++++++++++++++++++++++-------
 1 file changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/components/lists/EditList.vue b/src/components/lists/EditList.vue
index 96025c7598..a26f801ceb 100644
--- a/src/components/lists/EditList.vue
+++ b/src/components/lists/EditList.vue
@@ -354,6 +354,7 @@
                       ? `${offsets['validation-' + j]}px`
                       : '0'
                   "
+                  :max-assignees="maxAssigneesPerCell"
                   :minimized="hiddenColumns[columnId]"
                   :row-x="i"
                   :selected="isSelected(i, j)"
@@ -440,6 +441,7 @@
                       edit.validations ? edit.validations.get(columnId) : null
                     )
                   "
+                  :max-assignees="maxAssigneesPerCell"
                   :minimized="hiddenColumns[columnId]"
                   :selected="
                     isSelected(i, j + stickedDisplayedValidationColumns.length)
@@ -560,11 +562,19 @@ import TableInfo from '@/components/widgets/TableInfo.vue'
 import ValidationCell from '@/components/cells/ValidationCell.vue'
 import ValidationHeader from '@/components/cells/ValidationHeader.vue'
 
-// PERF-1 pilot: rough row-height estimates used before a row is measured;
-// actual heights are then tracked precisely via rowVirtualizer.measureElement
-// (rows aren't fixed-height: big thumbnails and wrapped descriptions vary it).
+// PERF-1 pilot: row-height estimates per display mode. Heights are meant to
+// be fixed within a mode (the assignee-avatar stack is capped via
+// maxAssignees below so it can never wrap the row taller);
+// rowVirtualizer.measureElement stays in place as a safety net for anything
+// still content-driven.
 const ROW_HEIGHT_ESTIMATE = 52
 const ROW_HEIGHT_ESTIMATE_BIG_THUMBNAILS = 116
+const ROW_HEIGHT_ESTIMATE_CONTACT_SHEET = 102
+
+// Cap on assignee avatars per validation cell (rest collapses into "+N"):
+// 3 avatars + status tag fit the 150px cell on one line, keeping row
+// heights constant for the virtualizer whatever the assignation count.
+const MAX_ASSIGNEES_PER_CELL = 3
 
 export default {
   name: 'edit-list',
@@ -627,10 +637,17 @@ export default {
       computed(() => ({
         count: props.displayedEdits.length,
         getScrollElement: () => body.value,
-        estimateSize: () =>
-          props.displaySettings.bigThumbnails
-            ? ROW_HEIGHT_ESTIMATE_BIG_THUMBNAILS
-            : ROW_HEIGHT_ESTIMATE,
+        // bigThumbnails first: when combined with contact sheet, the name
+        // column's 100px thumbnail + cell padding is the taller of the two.
+        estimateSize: () => {
+          if (props.displaySettings.bigThumbnails) {
+            return ROW_HEIGHT_ESTIMATE_BIG_THUMBNAILS
+          }
+          if (props.displaySettings.contactSheetMode) {
+            return ROW_HEIGHT_ESTIMATE_CONTACT_SHEET
+          }
+          return ROW_HEIGHT_ESTIMATE
+        },
         getItemKey: index => props.displayedEdits[index]?.id ?? index,
         overscan: 10
       }))
@@ -783,6 +800,10 @@ export default {
         }))
     },
 
+    maxAssigneesPerCell() {
+      return MAX_ASSIGNEES_PER_CELL
+    },
+
     // Sticked + non-sticked validation columns in the same order as the x/y
     // grid coordinates used by isSelected()/onTaskSelected() below.
     allDisplayedValidationColumns() {

From e3ff17a1b2027e2d7ec5a36bb1f6a0fe143cbdd1 Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Tue, 7 Jul 2026 00:54:21 +0200
Subject: [PATCH 05/14] [edits] Stripe virtualized rows from data order, not
 DOM order

The zebra striping comes from global `.datatable-row:nth-child(even)`
rules in App.vue. With rows virtualized, the DOM only holds a window of
rows behind a spacer row, so nth-child parity re-anchors on whichever
row is rendered first: every visible stripe flips each time the scroll
window advances by one row, which reads as full-table flicker.

Bind stripe-even/stripe-odd classes from the row's data index instead
(i odd = --background-alt, matching what nth-child produced when all
rows were in the DOM) and override the nth-child rules in scoped CSS,
with hover redeclared after the stripes so it still wins. The only
nth-child cosmetic left untouched is the corner-radius / last-row
special-casing, which can be off by one row at the very bottom of the
list - invisible in practice and not worth a deeper override.

Also qualify the spacer-row reset with .datatable-body: it previously
tied with shared.scss's `.data-list .datatable-body td` padding rule
(same specificity), leaving the winner to injection order.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/lists/EditList.vue | 32 +++++++++++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/components/lists/EditList.vue b/src/components/lists/EditList.vue
index a26f801ceb..2a8b305754 100644
--- a/src/components/lists/EditList.vue
+++ b/src/components/lists/EditList.vue
@@ -226,7 +226,11 @@
               :key="edit.id"
               :ref="el => rowVirtualizer.measureElement(el)"
               :data-index="i"
-              :class="{ canceled: edit.canceled }"
+              :class="{
+                canceled: edit.canceled,
+                'stripe-even': i % 2 === 0,
+                'stripe-odd': i % 2 === 1
+              }"
               v-for="{ edit, i } in visibleRows"
             >
               <td class="episode" v-if="isTVShow">
@@ -1106,11 +1110,35 @@ export default {
 <style lang="scss" scoped>
 // PERF-1 pilot: spacer rows standing in for the off-screen virtualized
 // rows above/below the rendered window (see the datatable-body template).
-.virtual-spacer-row td {
+// Qualified with .datatable-body so it outranks shared.scss's
+// `.data-list .datatable-body td` padding by specificity, not by
+// stylesheet injection order.
+.datatable-body .virtual-spacer-row td {
   padding: 0;
   border: none;
 }
 
+// With virtualization the DOM only holds a window of rows, so the global
+// `.datatable-row:nth-child(even)` zebra rules (App.vue) re-anchor on
+// whatever row happens to be rendered first and every stripe flips each
+// time the window shifts by one row. Stripe from the data index instead
+// (stripe-even/stripe-odd bound in the row's :class). Hover is redeclared
+// after the stripes so it keeps winning over them.
+tr.datatable-row.stripe-even,
+tr.datatable-row.stripe-even .datatable-row-header {
+  background-color: var(--background);
+}
+
+tr.datatable-row.stripe-odd,
+tr.datatable-row.stripe-odd .datatable-row-header {
+  background-color: var(--background-alt);
+}
+
+tr.datatable-row:hover,
+tr.datatable-row:hover .datatable-row-header {
+  background-color: var(--background-hover);
+}
+
 .project {
   min-width: 60px;
   width: 60px;

From a3da0a28f1e03c6cc33844046c5228656c7ee601 Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Tue, 7 Jul 2026 00:58:00 +0200
Subject: [PATCH 06/14] [assets] Virtualize AssetList rows with
 @tanstack/vue-virtual

Port of the EditList pilot to the grouped assets grid, targeting the
5000-asset stress production. AssetList rendered one tbody per asset
type (type-header row + all asset rows), freezing the page on large
productions.

Flattening design: the grouped tbodys are linearized in setup() into one
flat items array mixing type-header entries ({ isHeader, group, k }) and
asset entries ({ asset, i, k }), in display order. A single virtualizer
windows over that flat list inside ONE tbody, between top/bottom spacer
rows (same table-auto-layout rationale as the pilot: several columns
have no explicit width and rely on shared column-width resolution, and
the sticky header/columns only read thead refs). Type-header rows keep
their exact markup and classes. filteredDisplayedAssets moved from the
Options computed block into setup() because the flattening derives from
it; logic unchanged.

`i` and `k` keep their historical meaning (index inside the filtered
group / group index), so every getIndex(i, k)-based selection
coordinate, ref name, and MetadataInput index is unchanged. getItemKey
uses asset.id for rows and `header-<asset_type_id>` for headers.

Estimates per mode: 52 normal, 116 big thumbnails, 102 contact sheet,
56 type-header rows; measureElement stays as safety net, overscan 10.
Assignee avatars capped via :max-assignees="3" (ValidationCell opt-in
prop) so assignation counts cannot change row heights.

Zebra striping switched from the global nth-child rules to data-driven
stripe-even/stripe-odd classes on the group-local index, matching the
parity the per-tbody nth-child rules produced (header at child 1, asset
i at child i+2, multi-section odd = alt => i odd = alt); without this,
stripes flip on every one-row window shift. Hover redeclared after.

All-rows assumptions found:
- entity_list.js onTaskSelected() shift-rectangle reads
  $refs['validation-x-y'] per cell: overridden locally (same duplicate
  as EditList; consolidating both copies into the shared mixin is
  ARCH-4's job). The override resolves the rectangle from a
  rowIndexToAsset map built in getIndex coordinates (offsets from the
  unfiltered groups, i within the filtered group - exactly what the
  rendered cells advertise), and mirrors template selectability: sticked
  cells always selectable, non-sticked via isSelectable() (workflow +
  shared-asset checks).
- toggleLine checkbox shift-select, onSelectColumn (select-all from the
  header menu, reads assetStore.cache.result), inWorkflowFilledColumns,
  AssetListNumbers per-type stats (fed assetCache.result), and
  selectTaskFromQuery are all data-driven already: untouched.
- updateOffsets/nameResizeObserver only read thead refs: untouched.
- selection.js Alt+Arrow select(i+-1) steps rows via refs: adjacent rows
  stay mounted thanks to overscan 10; silent no-op at the window edge
  (shared mixin, deferred to ARCH-4 like the pilot).
- descriptors.js keyMetadataNavigation: AssetList never had the
  editor-i-j row refs it looks up, so Ctrl+Arrow from the resolution
  input already threw before virtualization; pre-existing, unchanged.

Known cosmetic leftovers (same as pilot): multi-section nth-child(2) /
last-child corner-radius rules can hit a mid-list row at the window
edge under the sticky header; not worth a deeper override.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/lists/AssetList.vue | 430 ++++++++++++++++++++++++++---
 1 file changed, 394 insertions(+), 36 deletions(-)

diff --git a/src/components/lists/AssetList.vue b/src/components/lists/AssetList.vue
index e31d8f36c5..a06ba97ea1 100644
--- a/src/components/lists/AssetList.vue
+++ b/src/components/lists/AssetList.vue
@@ -240,15 +240,45 @@
           </tr>
         </thead>
 
-        <template v-if="!isLoading && isListVisible">
-          <tbody
-            class="datatable-body"
-            :key="'group-' + getGroupKey(group, k, 'asset_type_id')"
-            @mousedown="startBrowsing"
-            @touchstart="startBrowsing"
-            v-for="(group, k) in filteredDisplayedAssets"
+        <!--
+          PERF-1: virtualized rows (@tanstack/vue-virtual), ported from the
+          EditList pilot. The per-asset-type tbodys are linearized into one
+          flat list mixing type-header items and asset items (flattenedItems,
+          built in setup); only the items near the viewport render below,
+          between two spacer rows sized to the off-screen items' total
+          height. Type-header rows keep the exact markup/classes they had
+          when each group owned its tbody.
+        -->
+        <tbody
+          class="datatable-body"
+          @mousedown="startBrowsing"
+          @touchstart="startBrowsing"
+          v-if="!isLoading && isListVisible"
+        >
+          <tr class="virtual-spacer-row" v-if="topSpacerHeight > 0">
+            <td
+              :colspan="totalColumnsCount"
+              :style="{ height: `${topSpacerHeight}px` }"
+            ></td>
+          </tr>
+          <template
+            :key="key"
+            v-for="{
+              isHeader,
+              group,
+              asset,
+              i,
+              k,
+              flatIndex,
+              key
+            } in visibleItems"
           >
-            <tr class="datatable-type-header" v-if="group[0]">
+            <tr
+              class="datatable-type-header"
+              :ref="el => rowVirtualizer.measureElement(el)"
+              :data-index="flatIndex"
+              v-if="isHeader"
+            >
               <th scope="rowgroup">
                 <span
                   class="datatable-row-header pointer"
@@ -268,12 +298,15 @@
               class="datatable-row"
               :class="{
                 canceled: asset.canceled,
-                shared: asset.shared
+                shared: asset.shared,
+                'stripe-even': i % 2 === 0,
+                'stripe-odd': i % 2 === 1
               }"
               scope="row"
-              :key="`row${asset.id}`"
+              :ref="el => rowVirtualizer.measureElement(el)"
+              :data-index="flatIndex"
               :title="asset.shared ? $t('library.from_library') : undefined"
-              v-for="(asset, i) in group"
+              v-else
             >
               <th
                 :class="{
@@ -366,6 +399,7 @@
                   :selected="isSelected(i, k, j)"
                   :row-x="getIndex(i, k)"
                   :column-y="j"
+                  :max-assignees="maxAssigneesPerCell"
                   :minimized="hiddenColumns[columnId]"
                   :is-static="true"
                   :is-assignees="displaySettings.showAssignations"
@@ -520,6 +554,7 @@
                   "
                   :row-x="getIndex(i, k)"
                   :column-y="j"
+                  :max-assignees="maxAssigneesPerCell"
                   :minimized="hiddenColumns[columnId]"
                   :is-static="true"
                   :is-assignees="displaySettings.showAssignations"
@@ -541,8 +576,14 @@
 
               <td class="actions" v-else></td>
             </tr>
-          </tbody>
-        </template>
+          </template>
+          <tr class="virtual-spacer-row" v-if="bottomSpacerHeight > 0">
+            <td
+              :colspan="totalColumnsCount"
+              :style="{ height: `${bottomSpacerHeight}px` }"
+            ></td>
+          </tr>
+        </tbody>
       </table>
 
       <div
@@ -580,7 +621,9 @@
 </template>
 
 <script>
-import { mapGetters, mapActions } from 'vuex'
+import { useVirtualizer } from '@tanstack/vue-virtual'
+import { computed, ref } from 'vue'
+import { mapGetters, mapActions, useStore } from 'vuex'
 
 import { descriptorMixin } from '@/components/mixins/descriptors'
 import { domMixin } from '@/components/mixins/dom'
@@ -612,6 +655,22 @@ import assetTypeStore from '@/store/modules/assettypes'
 import episodeStore from '@/store/modules/episodes'
 import taskTypeStore from '@/store/modules/tasktypes'
 
+// PERF-1: row-height estimates per display mode (same technique as
+// EditList.vue). Heights are fixed within a mode — the assignee-avatar
+// stack is capped via maxAssignees below so it can never wrap a row
+// taller; rowVirtualizer.measureElement stays as a safety net for
+// anything still content-driven.
+const ROW_HEIGHT_ESTIMATE = 52
+const ROW_HEIGHT_ESTIMATE_BIG_THUMBNAILS = 116
+const ROW_HEIGHT_ESTIMATE_CONTACT_SHEET = 102
+// Asset-type header row: 1.5rem/0.5rem paddings + one line of 1.1em text.
+const TYPE_HEADER_HEIGHT_ESTIMATE = 56
+
+// Cap on assignee avatars per validation cell (rest collapses into "+N"):
+// 3 avatars + status tag fit the 150px cell on one line, keeping row
+// heights constant for the virtualizer whatever the assignation count.
+const MAX_ASSIGNEES_PER_CELL = 3
+
 export default {
   name: 'asset-list',
 
@@ -677,12 +736,102 @@ export default {
     'create-tasks',
     'delete-clicked',
     'edit-clicked',
+    'keep-task-panel-open',
     'metadata-changed',
     'new-clicked',
     'restore-clicked',
     'scroll'
   ],
 
+  // PERF-1: virtualized rows, ported from the EditList pilot. useVirtualizer
+  // is a composable so it needs a setup() hook even though this component is
+  // otherwise Options API. `body` is returned so it doubles as
+  // `this.$refs.body` for the existing mixin methods (setScrollPosition,
+  // onBodyScroll's scrollHeight check, drag-to-pan) and as the virtualizer's
+  // scroll element.
+  setup(props) {
+    const store = useStore()
+    const body = ref(null)
+
+    // Moved from the Options computed block (setup() cannot read Options
+    // computeds and the virtualizer's item list derives from it): filters
+    // the displayed assets by the display settings.
+    const filteredDisplayedAssets = computed(() => {
+      if (
+        props.displaySettings.showSharedAssets &&
+        props.displaySettings.showLinkedAssets
+      ) {
+        return props.displayedAssets
+      }
+      const episodeId = store.getters.currentEpisode?.id
+
+      return props.displayedAssets.map(typeList =>
+        typeList.filter(asset => {
+          if (!props.displaySettings.showSharedAssets && asset.shared) {
+            return false
+          }
+          if (
+            store.getters.isTVShow &&
+            !props.displaySettings.showLinkedAssets &&
+            !['all', asset.episode_id || 'main'].includes(episodeId)
+          ) {
+            return false
+          }
+          return true
+        })
+      )
+    })
+
+    // The grouped per-asset-type tbodys, linearized into one flat list of
+    // type-header items and asset items (display order preserved) so a
+    // single virtualizer can window over the whole grid. `i` and `k` keep
+    // their historical meaning (index inside the filtered group / group
+    // index), so every getIndex(i, k)-based selection coordinate is
+    // unchanged.
+    const flattenedItems = computed(() => {
+      const items = []
+      filteredDisplayedAssets.value.forEach((group, k) => {
+        if (group[0]) {
+          items.push({
+            isHeader: true,
+            group,
+            k,
+            key: `header-${group[0].asset_type_id}`
+          })
+          group.forEach((asset, i) => {
+            items.push({ isHeader: false, asset, i, k, key: asset.id })
+          })
+        }
+      })
+      return items
+    })
+
+    const rowVirtualizer = useVirtualizer(
+      computed(() => ({
+        count: flattenedItems.value.length,
+        getScrollElement: () => body.value,
+        // bigThumbnails first: combined with contact sheet, the name
+        // column's 100px thumbnail + cell padding is the taller of the two.
+        estimateSize: index => {
+          if (flattenedItems.value[index]?.isHeader) {
+            return TYPE_HEADER_HEIGHT_ESTIMATE
+          }
+          if (props.displaySettings.bigThumbnails) {
+            return ROW_HEIGHT_ESTIMATE_BIG_THUMBNAILS
+          }
+          if (props.displaySettings.contactSheetMode) {
+            return ROW_HEIGHT_ESTIMATE_CONTACT_SHEET
+          }
+          return ROW_HEIGHT_ESTIMATE
+        },
+        getItemKey: index => flattenedItems.value[index]?.key ?? index,
+        overscan: 10
+      }))
+    )
+
+    return { body, filteredDisplayedAssets, flattenedItems, rowVirtualizer }
+  },
+
   data() {
     return {
       type: 'asset',
@@ -875,31 +1024,120 @@ export default {
       return this.isTVShow && this.displaySettings.showInfos
     },
 
-    /** Filter the displayed assets by the display settings */
-    filteredDisplayedAssets() {
+    // PERF-1: virtualization plumbing (see the EditList pilot). Everything
+    // below reasons in data terms (flattenedItems / getIndex coordinates),
+    // never DOM order, so filtering, sorting and real-time updates keep
+    // working exactly as before virtualization.
+    virtualRows() {
+      return this.rowVirtualizer.getVirtualItems()
+    },
+
+    totalRowsSize() {
+      return this.rowVirtualizer.getTotalSize()
+    },
+
+    topSpacerHeight() {
+      return this.virtualRows.length > 0 ? this.virtualRows[0].start : 0
+    },
+
+    bottomSpacerHeight() {
+      if (this.virtualRows.length === 0) return 0
+      const lastRow = this.virtualRows[this.virtualRows.length - 1]
+      return this.totalRowsSize - lastRow.end
+    },
+
+    // The flattened items tanstack currently renders, `flatIndex` being the
+    // index in flattenedItems (used only for data-index / measurement, not
+    // for selection coordinates, which stay getIndex(i, k)-based).
+    visibleItems() {
+      return this.virtualRows
+        .filter(virtualRow => this.flattenedItems[virtualRow.index])
+        .map(virtualRow => ({
+          ...this.flattenedItems[virtualRow.index],
+          flatIndex: virtualRow.index
+        }))
+    },
+
+    // Maps a row's global selection index back to its asset, in the exact
+    // coordinate system the rendered cells advertise: getIndex(i, k) offsets
+    // come from the unfiltered displayedAssets groups while i indexes the
+    // filtered group, mirroring the template's v-for + :row-x combination.
+    rowIndexToAsset() {
+      const map = new Map()
+      this.filteredDisplayedAssets.forEach((group, k) => {
+        group.forEach((asset, i) => {
+          map.set(this.getIndex(i, k), asset)
+        })
+      })
+      return map
+    },
+
+    // Sticked + non-sticked validation columns in the same order as the x/y
+    // grid coordinates used by isSelected()/onTaskSelected().
+    allDisplayedValidationColumns() {
+      return [
+        ...this.stickedDisplayedValidationColumns,
+        ...this.nonStickedDisplayedValidationColumns
+      ]
+    },
+
+    maxAssigneesPerCell() {
+      return MAX_ASSIGNEES_PER_CELL
+    },
+
+    // Spans the spacer rows across every column currently in the header,
+    // so they don't leave a jagged one-column-wide row in the table.
+    totalColumnsCount() {
+      let count = 1 // asset name column, always present
+      if (this.hasStickyEpisode) count++
+      count += this.stickedVisibleMetadataDescriptors.length
+      if (!this.isLoading) {
+        count += this.stickedDisplayedValidationColumns.length
+        count += this.nonStickedDisplayedValidationColumns.length
+      }
       if (
-        this.displaySettings.showSharedAssets &&
-        this.displaySettings.showLinkedAssets
+        this.isCurrentUserManager &&
+        this.displaySettings.showInfos &&
+        !this.isAssetsOnly &&
+        this.metadataDisplayHeaders.readyFor
       ) {
-        return this.displayedAssets
+        count++
       }
-      const episodeId = this.currentEpisode?.id
-
-      return this.displayedAssets.map(typeList =>
-        typeList.filter(asset => {
-          if (!this.displaySettings.showSharedAssets && asset.shared) {
-            return false
-          }
-          if (
-            this.isTVShow &&
-            !this.displaySettings.showLinkedAssets &&
-            !['all', asset.episode_id || 'main'].includes(episodeId)
-          ) {
-            return false
-          }
-          return true
-        })
-      )
+      if (
+        !this.isCurrentUserClient &&
+        this.displaySettings.showInfos &&
+        this.isAssetDescription
+      ) {
+        count++
+      }
+      if (
+        !this.isCurrentUserClient &&
+        this.displaySettings.showInfos &&
+        this.isAssetTime &&
+        this.metadataDisplayHeaders.timeSpent
+      ) {
+        count++
+      }
+      if (
+        !this.isCurrentUserClient &&
+        this.displaySettings.showInfos &&
+        this.isAssetEstimation &&
+        this.metadataDisplayHeaders.estimation
+      ) {
+        count++
+      }
+      if (
+        this.isAssetResolution &&
+        this.displaySettings.showInfos &&
+        this.metadataDisplayHeaders.resolution
+      ) {
+        count++
+      }
+      if (this.displaySettings.showInfos) {
+        count += this.nonStickedVisibleMetadataDescriptors.length
+      }
+      count++ // actions column, always present
+      return count
     }
   },
 
@@ -952,6 +1190,94 @@ export default {
       return this.assetSelectionGrid.has(`${lineIndex}-${columnIndex}`)
     },
 
+    // PERF-1: overrides entity_list.js's onTaskSelected(), same local
+    // override as EditList (consolidating the two copies back into the
+    // shared mixin is ARCH-4's job). The mixin rebuilds a shift-click range
+    // selection by reading `this.$refs['validation-x-y']` for every cell in
+    // the rectangle, which silently drops cells outside the rendered window
+    // once rows are virtualized. This resolves the same rectangle from
+    // rowIndexToAsset/taskTypeMap/taskMap instead. Selectability mirrors the
+    // template exactly: sticked cells never bind :selectable (always
+    // selectable), non-sticked cells use isSelectable() (workflow + shared
+    // asset checks). Everything outside the double loop is unchanged from
+    // the mixin.
+    onTaskSelected(validationInfo, sticked) {
+      const columnOffset = this.stickedDisplayedValidationColumns.length
+      const selection = []
+      if (!sticked) {
+        validationInfo = { ...validationInfo }
+        validationInfo.y += columnOffset
+      }
+      this.$emit('keep-task-panel-open', true)
+      if (validationInfo.isShiftKey) {
+        if (this.lastSelection) {
+          let startX = this.lastSelection.x
+          let endX = validationInfo.x
+          let startY = this.lastSelection.y
+          if (!sticked) startY += columnOffset
+          let endY = validationInfo.y
+          const grid = this.assetSelectionGrid
+          if (validationInfo.x < this.lastSelection.x) {
+            startX = validationInfo.x
+            endX = this.lastSelection.x
+          }
+          if (validationInfo.y < this.lastSelection.y) {
+            startY = validationInfo.y
+            endY = this.lastSelection.y
+            if (!sticked) endY += columnOffset
+          }
+
+          for (let i = startX; i <= endX; i++) {
+            const asset = this.rowIndexToAsset.get(i)
+            if (asset) {
+              for (let j = startY; j <= endY; j++) {
+                const columnId = this.allDisplayedValidationColumns[j]
+                const isSelectedCell = grid?.has(`${i}-${j}`)
+                const selectable =
+                  j < columnOffset || this.isSelectable(asset, columnId)
+                if (columnId && selectable && !isSelectedCell) {
+                  selection.push({
+                    entity: asset,
+                    column: this.taskTypeMap.get(columnId),
+                    task: this.taskMap.get(asset.validations?.get(columnId)),
+                    x: i,
+                    y: j
+                  })
+                }
+              }
+            }
+          }
+          this.$store.commit('ADD_SELECTED_TASK', validationInfo)
+        }
+      } else if (!validationInfo.isCtrlKey) {
+        this.$store.commit('CLEAR_SELECTED_TASKS')
+      }
+      if (selection.length === 0) {
+        this.$store.commit('ADD_SELECTED_TASK', validationInfo)
+      } else {
+        this.$store.commit('ADD_SELECTED_TASKS', selection)
+      }
+      this.updateTaskInQuery()
+
+      if (!validationInfo.isShiftKey && validationInfo.isUserClick) {
+        const x = validationInfo.x
+        let y = validationInfo.y
+        if (!sticked) y -= columnOffset
+        this.lastSelection = { x, y }
+        // The clicked cell was necessarily visible to be clicked, so it is
+        // always currently rendered: this ref lookup stays safe unchanged.
+        const ref = `validation-${x}-${y}`
+        const validationCell = this.$refs[ref][0]
+        this.$nextTick(() => {
+          this.scrollToValidationCell(validationCell)
+        })
+      }
+
+      this.$nextTick(() => {
+        this.$emit('keep-task-panel-open', false)
+      })
+    },
+
     toggleLine(asset, event) {
       const selected = event.target.checked
       const assetsToSelect = [asset]
@@ -1130,6 +1456,38 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+// PERF-1: spacer rows standing in for the off-screen virtualized items
+// above/below the rendered window (see the datatable-body template).
+// Qualified with .datatable-body so it outranks shared.scss's
+// `.data-list .datatable-body td` padding by specificity, not by
+// stylesheet injection order.
+.datatable-body .virtual-spacer-row td {
+  padding: 0;
+  border: none;
+}
+
+// With virtualization the DOM only holds a window of rows, so the global
+// `.multi-section .datatable-row:nth-child(odd/even)` zebra rules
+// (App.vue) re-anchor on whatever row happens to be rendered first and
+// every stripe flips each time the window shifts by one row. Stripe from
+// the group-local data index instead (stripe-even/stripe-odd bound in the
+// row's :class, matching the per-tbody parity the nth-child rules
+// produced). Hover is redeclared after the stripes so it keeps winning.
+tr.datatable-row.stripe-even,
+tr.datatable-row.stripe-even .datatable-row-header {
+  background-color: var(--background);
+}
+
+tr.datatable-row.stripe-odd,
+tr.datatable-row.stripe-odd .datatable-row-header {
+  background-color: var(--background-alt);
+}
+
+tr.datatable-row:hover,
+tr.datatable-row:hover .datatable-row-header {
+  background-color: var(--background-hover);
+}
+
 .dark thead tr a {
   color: $light-grey;
 

From d5331842af112d2fd0de94074a4b3cc493e56fb5 Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Tue, 7 Jul 2026 01:18:10 +0200
Subject: [PATCH 07/14] [perf] Display the full asset/edit lists at once under
 virtualization

The progressive-display mechanism (PAGE_SIZE=200 initial slice +
displayMore* growing it on scroll-to-bottom) existed to keep the
rendered DOM small. With AssetList/EditList rows virtualized it only
throttled the virtualizer: the scrollbar reflected 200 rows and kept
growing, with a load-more hitch every page - measured on Assets with
1120 assets, the list felt non-virtualized.

Where the cap lived and what changed:
- assets.js LOAD_ASSETS_END and helpers.buildResult (search/filter/sort
  path): displayedAssets was cache/result.slice(0, PAGE_SIZE or current
  length); now the full result. edits.js LOAD_EDITS_END,
  helpers.buildResult and NEW_EDIT_END: same change.
- The lists still receive a copy (.slice()) of the cache arrays, never
  the array itself: mutations like NEW_ASSET_END push into both
  cache.result AND displayedAssets and rely on them being distinct
  (aliasing them would display freshly created entities twice).
- AssetList/EditList local onBodyScroll overrides (scroll emit +
  scroll-to-bottom -> displayMore dispatch) removed; the entityListMixin
  version (scroll-position emit only) takes over, so scroll-position
  persistence on the pages is unchanged.
- DISPLAY_MORE_ASSETS / DISPLAY_MORE_EDITS mutations kept: their own
  length guard makes them no-ops now. Breakdown and Playlist still
  dispatch displayMoreAssets from their non-virtualized side panels;
  those calls become harmless.

Deliberately NOT touched: the shots/sequences/episodes modules and
lib/pagination - their lists are not virtualized yet.

Consequence to watch (live pass): Breakdown's available-assets panel
(assetsByType) and Playlist's addition panel (displayedAssetsByType)
read the same displayedAssets state and are NOT virtualized, so they
now render every asset at once. Rows there are much lighter than the
grid and both panels are search-filtered, but on very large productions
they lose the paging cushion; if that measurably regresses, the
follow-up is local pagination (or virtualization) in those two panels,
not restoring the store cap.

Header counts were already total: setListStats always received the
full result, so displayedAssetsLength/Count semantics are unchanged.
No store spec updates needed: tests/unit/store/assets.spec.js has no
page-size assertions (and no batched-deletion describe exists on this
branch); the suite stays at its 1032-passed baseline.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/lists/AssetList.vue | 24 +++++++-----------------
 src/components/lists/EditList.vue  | 24 +++++++-----------------
 src/store/modules/assets.js        | 22 ++++++++++++++--------
 src/store/modules/edits.js         | 24 ++++++++++++++----------
 4 files changed, 42 insertions(+), 52 deletions(-)

diff --git a/src/components/lists/AssetList.vue b/src/components/lists/AssetList.vue
index a06ba97ea1..247e9df94b 100644
--- a/src/components/lists/AssetList.vue
+++ b/src/components/lists/AssetList.vue
@@ -739,8 +739,8 @@ export default {
     'keep-task-panel-open',
     'metadata-changed',
     'new-clicked',
-    'restore-clicked',
-    'scroll'
+    'restore-clicked'
+    // 'scroll' comes from entityListMixin's emits + onBodyScroll
   ],
 
   // PERF-1: virtualized rows, ported from the EditList pilot. useVirtualizer
@@ -1142,7 +1142,7 @@ export default {
   },
 
   methods: {
-    ...mapActions(['displayMoreAssets', 'editAsset', 'setAssetSelection']),
+    ...mapActions(['editAsset', 'setAssetSelection']),
 
     assetEpisodes(asset, full) {
       if (!this.episodeMap) return ''
@@ -1306,16 +1306,10 @@ export default {
       })
     },
 
-    onBodyScroll(event) {
-      if (!this.$refs.body) return
-      const position = event.target
-      this.$emit('scroll', position.scrollTop)
-      const maxHeight =
-        this.$refs.body.scrollHeight - this.$refs.body.offsetHeight
-      if (maxHeight < position.scrollTop + 100) {
-        this.loadMoreAssets()
-      }
-    },
+    // PERF-1: no local onBodyScroll anymore. The store now displays the
+    // full result at once (rows are virtualized), so the old
+    // scroll-to-bottom -> displayMoreAssets wiring is gone and the mixin's
+    // onBodyScroll (scroll-position emit only) takes over.
 
     onReadyForChanged(asset, taskTypeId) {
       if (this.selectedAssets.has(asset.id)) {
@@ -1329,10 +1323,6 @@ export default {
       }
     },
 
-    loadMoreAssets() {
-      this.displayMoreAssets()
-    },
-
     getIndex(i, k) {
       return this.getEntityLineNumber(this.displayedAssets, i, k)
     },
diff --git a/src/components/lists/EditList.vue b/src/components/lists/EditList.vue
index 2a8b305754..93c06975a5 100644
--- a/src/components/lists/EditList.vue
+++ b/src/components/lists/EditList.vue
@@ -626,8 +626,8 @@ export default {
     'edit-history',
     'keep-task-panel-open',
     'metadata-changed',
-    'restore-clicked',
-    'scroll'
+    'restore-clicked'
+    // 'scroll' comes from entityListMixin's emits + onBodyScroll
   ],
 
   // PERF-1 pilot: useVirtualizer is a composable, so it needs a setup()
@@ -860,7 +860,7 @@ export default {
   },
 
   methods: {
-    ...mapActions(['displayMoreEdits', 'setEditSelection']),
+    ...mapActions(['setEditSelection']),
 
     isSelected(lineIndex, columnIndex) {
       return this.editSelectionGrid.has(`${lineIndex}-${columnIndex}`)
@@ -984,20 +984,10 @@ export default {
       })
     },
 
-    onBodyScroll(event) {
-      if (!this.$refs.body) return
-      const position = event.target
-      this.$emit('scroll', position.scrollTop)
-      const maxHeight =
-        this.$refs.body.scrollHeight - this.$refs.body.offsetHeight
-      if (maxHeight < position.scrollTop + 100) {
-        this.loadMoreEdits()
-      }
-    },
-
-    loadMoreEdits() {
-      this.displayMoreEdits()
-    },
+    // PERF-1: no local onBodyScroll anymore. The store now displays the
+    // full result at once (rows are virtualized), so the old
+    // scroll-to-bottom -> displayMoreEdits wiring is gone and the mixin's
+    // onBodyScroll (scroll-position emit only) takes over.
 
     editPath(editId) {
       return this.getPath('edit', editId)
diff --git a/src/store/modules/assets.js b/src/store/modules/assets.js
index 6022352174..12fe5396ed 100644
--- a/src/store/modules/assets.js
+++ b/src/store/modules/assets.js
@@ -250,13 +250,14 @@ const helpers = {
     result = sortAssetResult(result, sorting, taskTypeMap, taskMap)
     cache.result = result
 
-    const limit =
-      state.displayedAssets.length > PAGE_SIZE
-        ? state.displayedAssets.length
-        : PAGE_SIZE
-    const displayedAssets = result.slice(0, limit)
-    state.displayedAssets = displayedAssets
-    state.assetFilledColumns = getFilledColumns(displayedAssets)
+    // PERF-1: the whole filtered result is displayed at once. AssetList
+    // virtualizes its rows, so the old PAGE_SIZE slice (which existed to
+    // keep the rendered DOM small) only capped the scrollbar and forced
+    // display-more hitches every page. Still a copy: mutations like
+    // NEW_ASSET_END push into both cache.result and displayedAssets and
+    // rely on them being distinct arrays.
+    state.displayedAssets = result.slice()
+    state.assetFilledColumns = getFilledColumns(result)
     helpers.setListStats(state, result)
     state.assetSearchText = query
     state.assetSelectionGrid = buildSelectionGrid()
@@ -977,7 +978,9 @@ const mutations = {
 
     const assetTypes = Array.from(assetTypeMap.values())
     cache.assetTypeIndex = buildNameIndex(assetTypes)
-    const displayedAssets = cache.assets.slice(0, PAGE_SIZE)
+    // PERF-1: full list displayed at once (as a copy, the cache arrays are
+    // mutated in place elsewhere), AssetList virtualizes its rows.
+    const displayedAssets = cache.assets.slice()
     const filledColumns = getFilledColumns(displayedAssets)
 
     state.assetValidationColumns = helpers.sortValidationColumns(
@@ -1283,6 +1286,9 @@ const mutations = {
     }
   },
 
+  // PERF-1: no-op since displayedAssets always holds the full result now;
+  // kept because Breakdown and Playlist still dispatch it from their own
+  // scroll wiring (the guard below makes those calls harmless).
   [DISPLAY_MORE_ASSETS](state) {
     const assets = cache.result
     const newLength = state.displayedAssets.length + PAGE_SIZE
diff --git a/src/store/modules/edits.js b/src/store/modules/edits.js
index c7f51926fc..1eea49247e 100644
--- a/src/store/modules/edits.js
+++ b/src/store/modules/edits.js
@@ -216,14 +216,13 @@ const helpers = {
     result = sortEditResult(result, sorting, taskTypeMap, taskMap)
     cache.result = result
 
-    const limit =
-      state.displayedEdits.length > PAGE_SIZE
-        ? state.displayedEdits.length
-        : PAGE_SIZE
-    const displayedEdits = result.slice(0, limit)
-
-    state.displayedEdits = displayedEdits
-    state.editFilledColumns = getFilledColumns(displayedEdits)
+    // PERF-1: the whole filtered result is displayed at once. EditList
+    // virtualizes its rows, so the old PAGE_SIZE slice (which existed to
+    // keep the rendered DOM small) only capped the scrollbar and forced
+    // display-more hitches every page. Still a copy: the cache arrays are
+    // mutated in place elsewhere and rely on displayedEdits being distinct.
+    state.displayedEdits = result.slice()
+    state.editFilledColumns = getFilledColumns(result)
     helpers.setListStats(state, result)
     state.editSearchText = editSearch
     state.editSelectionGrid = buildSelectionGrid()
@@ -748,7 +747,9 @@ const mutations = {
     cache.result = edits
     cache.editIndex = buildEditIndex(edits)
 
-    const displayedEdits = edits.slice(0, PAGE_SIZE)
+    // PERF-1: full list displayed at once (as a copy, the cache arrays are
+    // mutated in place elsewhere), EditList virtualizes its rows.
+    const displayedEdits = edits.slice()
     const filledColumns = getFilledColumns(displayedEdits)
 
     state.editValidationColumns = helpers.sortValidationColumns(
@@ -878,7 +879,7 @@ const mutations = {
 
     cache.edits.push(edit)
     cache.edits = sortEdits(cache.edits)
-    state.displayedEdits = cache.edits.slice(0, PAGE_SIZE)
+    state.displayedEdits = cache.edits.slice()
     helpers.setListStats(state, cache.edits)
     state.editFilledColumns = getFilledColumns(state.displayedEdits)
     cache.editMap.set(edit.id, edit)
@@ -906,6 +907,9 @@ const mutations = {
     })
   },
 
+  // PERF-1: no-op since displayedEdits always holds the full result now
+  // (the guard below never passes); kept for symmetry with the other
+  // entity modules until the progressive-display machinery is removed.
   [DISPLAY_MORE_EDITS](
     state,
     { taskTypeMap, taskStatusMap, taskMap, production }

From 8b740bd0210710ffd0d5caa01f021a32fc469bce Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Tue, 7 Jul 2026 01:27:32 +0200
Subject: [PATCH 08/14] [perf] Disable scroll anchoring on the virtualized list
 wrappers

Live testing showed scrolling noticeably smoother in Chrome than
Firefox on the virtualized Assets/Edits grids. Firefox's scroll
anchoring fights windowed updates: each time the scroll window shifts,
the top spacer row resizes and the browser re-anchors the scroll
position against it, producing micro-jumps. overflow-anchor: none on
the scroll container is the standard TanStack Virtual mitigation
(Chrome ignores anchoring inside these updates anyway, so it is a
no-op there).

The wrapper element lives inside each list component (the
div.datatable-wrapper carrying ref="body"), so a scoped style rule is
the narrowest possible scoping: it compiles to
.datatable-wrapper[data-v-...] and cannot affect the global
.datatable-wrapper rules that non-virtualized tables use. AssetList
already had a scoped wrapper rule (min-height/flex) - extended it;
EditList gets a new one.

Second Firefox factor identified but deliberately NOT acted on here:
every window shift re-runs table auto-layout across the rendered rows,
a direct consequence of the spacer-row + shared-auto-layout design the
pilot chose to keep unsized columns aligned with the header. If
Firefox still lags after the anchoring fix, the escalation path is
explicit column sizing + table-layout: fixed, which belongs to the
ARCH-4 EntityDataGrid generalization, not this branch.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/lists/AssetList.vue | 5 +++++
 src/components/lists/EditList.vue  | 8 ++++++++
 2 files changed, 13 insertions(+)

diff --git a/src/components/lists/AssetList.vue b/src/components/lists/AssetList.vue
index 247e9df94b..8e2210cd1b 100644
--- a/src/components/lists/AssetList.vue
+++ b/src/components/lists/AssetList.vue
@@ -1572,6 +1572,11 @@ td.ready-for {
 .datatable-wrapper {
   min-height: 200px;
   flex: 1;
+  // Firefox scroll anchoring fights windowed updates: when the top spacer
+  // row resizes it re-anchors the scroll position and produces micro-jumps
+  // (standard TanStack Virtual mitigation). Scoped: only this virtualized
+  // wrapper opts out, other datatables keep the default.
+  overflow-anchor: none;
 }
 
 .datatable-row.shared {
diff --git a/src/components/lists/EditList.vue b/src/components/lists/EditList.vue
index 93c06975a5..7869e77667 100644
--- a/src/components/lists/EditList.vue
+++ b/src/components/lists/EditList.vue
@@ -1098,6 +1098,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+// Firefox scroll anchoring fights windowed updates: when the top spacer
+// row resizes it re-anchors the scroll position and produces micro-jumps
+// (standard TanStack Virtual mitigation). Scoped: only this virtualized
+// wrapper opts out, other datatables keep the default.
+.datatable-wrapper {
+  overflow-anchor: none;
+}
+
 // PERF-1 pilot: spacer rows standing in for the off-screen virtualized
 // rows above/below the rendered window (see the datatable-body template).
 // Qualified with .datatable-body so it outranks shared.scss's

From f3b5259a804979cfd2b9f0aca621e2947963a255 Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Tue, 7 Jul 2026 09:27:26 +0200
Subject: [PATCH 09/14] [shots] Virtualize ShotList rows with
 @tanstack/vue-virtual

Port of the established recipe (EditList pilot -> AssetList) to the
largest grid. ShotList rendered one tbody per sequence (header row +
all shot rows), freezing the page on large productions.

Flattening: the per-sequence tbodys are linearized in setup() into one
flat items array mixing sequence-header entries ({ isHeader, group, k,
key: header-<sequence_id> }) and shot entries ({ shot, i, k, key:
shot.id }), windowed by a single virtualizer inside ONE tbody between
top/bottom spacer rows (same shared-auto-layout rationale as the
pilot). Sequence-header rows keep their exact markup/classes. Unlike
AssetList there is no local display-settings filtering layer: the
flattening derives straight from the displayedShots prop, so TV-show
episode scoping (applied upstream in the shots store when the route
changes episode) flows through unchanged.

`i`/`k` keep their historical meaning (index in group / group index):
getIndex(i, k) selection coordinates, validation-x-y and editor-x-y ref
names, and MetadataInput indexes are unchanged. Estimates per mode: 52
normal, 116 big thumbnails, 102 contact sheet, 56 sequence headers;
measureElement safety net, overscan 10. Assignee avatars capped via
:max-assignees="3" on both validation-cell usages. Data-driven
stripe-even/stripe-odd classes on the group-local index replace the
nth-child zebra (same parity mapping as AssetList), and the wrapper
gets scoped overflow-anchor: none (Firefox anchoring mitigation).

No v-memo existed anywhere in the template (checked per the PERF-10
note) - nothing to drop.

All-rows assumptions found:
- entity_list.js onTaskSelected() shift-rectangle reads
  $refs['validation-x-y'] per cell: overridden locally like
  EditList/AssetList (consolidation into the mixin is the next planned
  step). ShotList never binds :selectable on cells, so every column in
  range is selectable, matching the rendered default.
- toggleLine checkbox shift-select (displayedShots.flat()),
  onSelectColumn (shotStore.cache.result), the frame/drawing/time
  footer counts (displayedShots* store getters computed from the full
  result in setListStats), isEmptyList, selectTaskFromQuery and
  Shots.vue's setScrollPosition: all data-driven already, untouched.
- updateOffsets reads thead refs only: untouched.
- Ctrl+Arrow keyMetadataNavigation: ShotList DOES have editor-x-y row
  refs (unlike AssetList), so single-step navigation keeps working
  thanks to overscan 10; the first<->last wrap-around to a far
  unrendered row breaks (ref lookup throws) - shared mixin, deferred to
  ARCH-4 exactly like the pilot documented for EditList.
- Alt+Arrow selection.js select() steps one row via refs: adjacent rows
  stay mounted (overscan); silent no-op at the window edge (deferred,
  shared mixin).
- Drag-to-pan startBrowsing moved from per-sequence tbodys to the
  single tbody; document-level move/up handlers unchanged.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/lists/ShotList.vue | 406 +++++++++++++++++++++++++++++-
 1 file changed, 393 insertions(+), 13 deletions(-)

diff --git a/src/components/lists/ShotList.vue b/src/components/lists/ShotList.vue
index 3085a3026a..041dea4300 100644
--- a/src/components/lists/ShotList.vue
+++ b/src/components/lists/ShotList.vue
@@ -281,15 +281,45 @@
           </tr>
         </thead>
 
-        <template v-if="!isLoading && isListVisible">
-          <tbody
-            class="datatable-body"
-            :key="getGroupKey(group, k, 'sequence_id')"
-            @mousedown="startBrowsing"
-            @touchstart="startBrowsing"
-            v-for="(group, k) in displayedShots"
+        <!--
+          PERF-1: virtualized rows (@tanstack/vue-virtual), same recipe as
+          EditList/AssetList. The per-sequence tbodys are linearized into
+          one flat list mixing sequence-header items and shot items
+          (flattenedItems, built in setup); only the items near the
+          viewport render below, between two spacer rows sized to the
+          off-screen items' total height. Sequence-header rows keep the
+          exact markup/classes they had when each group owned its tbody.
+        -->
+        <tbody
+          class="datatable-body"
+          @mousedown="startBrowsing"
+          @touchstart="startBrowsing"
+          v-if="!isLoading && isListVisible"
+        >
+          <tr class="virtual-spacer-row" v-if="topSpacerHeight > 0">
+            <td
+              :colspan="totalColumnsCount"
+              :style="{ height: `${topSpacerHeight}px` }"
+            ></td>
+          </tr>
+          <template
+            :key="key"
+            v-for="{
+              isHeader,
+              group,
+              shot,
+              i,
+              k,
+              flatIndex,
+              key
+            } in visibleItems"
           >
-            <tr class="datatable-type-header">
+            <tr
+              class="datatable-type-header"
+              :ref="el => rowVirtualizer.measureElement(el)"
+              :data-index="flatIndex"
+              v-if="isHeader"
+            >
               <th scope="rowgroup">
                 <div
                   class="datatable-row-header pointer"
@@ -306,9 +336,14 @@
             </tr>
             <tr
               class="datatable-row"
-              :key="shot.id"
-              :class="{ canceled: shot.canceled }"
-              v-for="(shot, i) in group"
+              :class="{
+                canceled: shot.canceled,
+                'stripe-even': i % 2 === 0,
+                'stripe-odd': i % 2 === 1
+              }"
+              :ref="el => rowVirtualizer.measureElement(el)"
+              :data-index="flatIndex"
+              v-else
             >
               <th
                 scope="row"
@@ -396,6 +431,7 @@
                       ? `${offsets['validation-' + j]}px`
                       : '0'
                   "
+                  :max-assignees="maxAssigneesPerCell"
                   :minimized="hiddenColumns[columnId]"
                   :row-x="getIndex(i, k)"
                   :selected="isSelected(i, k, j)"
@@ -724,6 +760,7 @@
                       shot.validations ? shot.validations.get(columnId) : null
                     )
                   "
+                  :max-assignees="maxAssigneesPerCell"
                   :minimized="hiddenColumns[columnId]"
                   :selected="
                     isSelected(
@@ -753,8 +790,14 @@
               />
               <td class="actions" v-else></td>
             </tr>
-          </tbody>
-        </template>
+          </template>
+          <tr class="virtual-spacer-row" v-if="bottomSpacerHeight > 0">
+            <td
+              :colspan="totalColumnsCount"
+              :style="{ height: `${bottomSpacerHeight}px` }"
+            ></td>
+          </tr>
+        </tbody>
       </table>
     </div>
     <table-info :is-loading="isLoading" :is-error="isError" big-cells />
@@ -826,6 +869,8 @@
 </template>
 
 <script>
+import { useVirtualizer } from '@tanstack/vue-virtual'
+import { computed, ref } from 'vue'
 import { mapGetters, mapActions } from 'vuex'
 
 import preferences from '@/lib/preferences'
@@ -851,6 +896,22 @@ import TableInfo from '@/components/widgets/TableInfo.vue'
 import ValidationCell from '@/components/cells/ValidationCell.vue'
 import ValidationHeader from '@/components/cells/ValidationHeader.vue'
 
+// PERF-1: row-height estimates per display mode (same technique as
+// EditList/AssetList). Heights are fixed within a mode — the
+// assignee-avatar stack is capped via maxAssignees below so it can never
+// wrap a row taller; rowVirtualizer.measureElement stays as a safety net
+// for anything still content-driven.
+const ROW_HEIGHT_ESTIMATE = 52
+const ROW_HEIGHT_ESTIMATE_BIG_THUMBNAILS = 116
+const ROW_HEIGHT_ESTIMATE_CONTACT_SHEET = 102
+// Sequence header row: 1.5rem/0.5rem paddings + one line of 1.1em text.
+const TYPE_HEADER_HEIGHT_ESTIMATE = 56
+
+// Cap on assignee avatars per validation cell (rest collapses into "+N"):
+// 3 avatars + status tag fit the 150px cell on one line, keeping row
+// heights constant for the virtualizer whatever the assignation count.
+const MAX_ASSIGNEES_PER_CELL = 3
+
 export default {
   name: 'shot-list',
 
@@ -910,6 +971,7 @@ export default {
     'delete-clicked',
     'edit-clicked',
     'field-changed',
+    'keep-task-panel-open',
     'metadata-changed',
     'restore-clicked',
     'scroll',
@@ -917,6 +979,65 @@ export default {
     'shot-history'
   ],
 
+  // PERF-1: virtualized rows, same recipe as EditList/AssetList.
+  // useVirtualizer is a composable so it needs a setup() hook even though
+  // this component is otherwise Options API. `body` doubles as
+  // `this.$refs.body` for the existing mixin methods and as the
+  // virtualizer's scroll element. The flattening derives from the
+  // displayedShots prop, so episode scoping (handled upstream in the shots
+  // store for TV shows) is transparent here.
+  setup(props) {
+    const body = ref(null)
+
+    // The per-sequence tbodys, linearized into one flat list of
+    // sequence-header items and shot items (display order preserved) so a
+    // single virtualizer can window over the whole grid. `i` and `k` keep
+    // their historical meaning (index inside the group / group index), so
+    // every getIndex(i, k)-based selection coordinate is unchanged.
+    const flattenedItems = computed(() => {
+      const items = []
+      props.displayedShots.forEach((group, k) => {
+        if (group[0]) {
+          items.push({
+            isHeader: true,
+            group,
+            k,
+            key: `header-${group[0].sequence_id}`
+          })
+          group.forEach((shot, i) => {
+            items.push({ isHeader: false, shot, i, k, key: shot.id })
+          })
+        }
+      })
+      return items
+    })
+
+    const rowVirtualizer = useVirtualizer(
+      computed(() => ({
+        count: flattenedItems.value.length,
+        getScrollElement: () => body.value,
+        // bigThumbnails first: combined with contact sheet, the name
+        // column's 100px thumbnail + cell padding is the taller of the two.
+        estimateSize: index => {
+          if (flattenedItems.value[index]?.isHeader) {
+            return TYPE_HEADER_HEIGHT_ESTIMATE
+          }
+          if (props.displaySettings.bigThumbnails) {
+            return ROW_HEIGHT_ESTIMATE_BIG_THUMBNAILS
+          }
+          if (props.displaySettings.contactSheetMode) {
+            return ROW_HEIGHT_ESTIMATE_CONTACT_SHEET
+          }
+          return ROW_HEIGHT_ESTIMATE
+        },
+        getItemKey: index => flattenedItems.value[index]?.key ?? index,
+        overscan: 10
+      }))
+    )
+
+    return { body, flattenedItems, rowVirtualizer }
+  },
+
   data() {
     return {
       type: 'shot',
@@ -1037,6 +1158,143 @@ export default {
 
     localStorageStickKey() {
       return `stick-shots-${this.currentProduction?.id}`
+    },
+
+    // PERF-1: virtualization plumbing (see the EditList pilot). Everything
+    // below reasons in data terms (flattenedItems / getIndex coordinates),
+    // never DOM order, so filtering, sorting and real-time updates keep
+    // working exactly as before virtualization.
+    virtualRows() {
+      return this.rowVirtualizer.getVirtualItems()
+    },
+
+    totalRowsSize() {
+      return this.rowVirtualizer.getTotalSize()
+    },
+
+    topSpacerHeight() {
+      return this.virtualRows.length > 0 ? this.virtualRows[0].start : 0
+    },
+
+    bottomSpacerHeight() {
+      if (this.virtualRows.length === 0) return 0
+      const lastRow = this.virtualRows[this.virtualRows.length - 1]
+      return this.totalRowsSize - lastRow.end
+    },
+
+    // The flattened items tanstack currently renders, `flatIndex` being the
+    // index in flattenedItems (used only for data-index / measurement, not
+    // for selection coordinates, which stay getIndex(i, k)-based).
+    visibleItems() {
+      return this.virtualRows
+        .filter(virtualRow => this.flattenedItems[virtualRow.index])
+        .map(virtualRow => ({
+          ...this.flattenedItems[virtualRow.index],
+          flatIndex: virtualRow.index
+        }))
+    },
+
+    // Maps a row's global selection index (getIndex coordinates) back to
+    // its shot, for the data-driven shift selection below.
+    rowIndexToShot() {
+      const map = new Map()
+      this.displayedShots.forEach((group, k) => {
+        group.forEach((shot, i) => {
+          map.set(this.getIndex(i, k), shot)
+        })
+      })
+      return map
+    },
+
+    // Sticked + non-sticked validation columns in the same order as the x/y
+    // grid coordinates used by isSelected()/onTaskSelected().
+    allDisplayedValidationColumns() {
+      return [
+        ...this.stickedDisplayedValidationColumns,
+        ...this.nonStickedDisplayedValidationColumns
+      ]
+    },
+
+    maxAssigneesPerCell() {
+      return MAX_ASSIGNEES_PER_CELL
+    },
+
+    // Spans the spacer rows across every column currently in the header,
+    // so they don't leave a jagged one-column-wide row in the table.
+    totalColumnsCount() {
+      const showInfos = this.displaySettings.showInfos
+      let count = 1 // shot name column, always present
+      count += this.stickedVisibleMetadataDescriptors.length
+      if (!this.isLoading) {
+        count += this.stickedDisplayedValidationColumns.length
+        count += this.nonStickedDisplayedValidationColumns.length
+      }
+      if (!this.isCurrentUserClient && showInfos && this.isShotDescription) {
+        count++
+      }
+      if (
+        !this.isCurrentUserClient &&
+        showInfos &&
+        this.isShotTime &&
+        this.metadataDisplayHeaders.timeSpent
+      ) {
+        count++
+      }
+      if (
+        !this.isCurrentUserClient &&
+        showInfos &&
+        this.isShotEstimation &&
+        this.metadataDisplayHeaders.estimation
+      ) {
+        count++
+      }
+      if (
+        showInfos &&
+        this.isPaperProduction &&
+        this.metadataDisplayHeaders.drawings
+      ) {
+        count++
+      }
+      if (
+        this.isFrames &&
+        showInfos &&
+        !this.isPaperProduction &&
+        this.metadataDisplayHeaders.frames
+      ) {
+        count++
+      }
+      if (this.isFrameIn && showInfos && this.metadataDisplayHeaders.frameIn) {
+        count++
+      }
+      if (
+        this.isFrameOut &&
+        showInfos &&
+        this.metadataDisplayHeaders.frameOut
+      ) {
+        count++
+      }
+      if (this.isFps && showInfos && this.metadataDisplayHeaders.fps) {
+        count++
+      }
+      if (
+        this.isMaxRetakes &&
+        showInfos &&
+        this.metadataDisplayHeaders.maxRetakes
+      ) {
+        count++
+      }
+      if (
+        this.isResolution &&
+        showInfos &&
+        this.metadataDisplayHeaders.resolution
+      ) {
+        count++
+      }
+      if (showInfos) {
+        count += this.nonStickedVisibleMetadataDescriptors.length
+      }
+      count++ // actions column, always present
+      return count
     }
   },
 
@@ -1050,6 +1308,91 @@ export default {
       return this.shotSelectionGrid.has(`${lineIndex}-${columnIndex}`)
     },
 
+    // PERF-1: overrides entity_list.js's onTaskSelected(), same local
+    // override as EditList/AssetList (consolidating the copies back into
+    // the shared mixin is ARCH-4's job). The mixin rebuilds a shift-click
+    // range selection by reading `this.$refs['validation-x-y']` for every
+    // cell in the rectangle, which silently drops cells outside the
+    // rendered window once rows are virtualized. This resolves the same
+    // rectangle from rowIndexToShot/taskTypeMap/taskMap instead. ShotList
+    // never binds :selectable on its cells, so every column in range is
+    // selectable (matching the rendered cells' default). Everything outside
+    // the double loop is unchanged from the mixin.
+    onTaskSelected(validationInfo, sticked) {
+      const columnOffset = this.stickedDisplayedValidationColumns.length
+      const selection = []
+      if (!sticked) {
+        validationInfo = { ...validationInfo }
+        validationInfo.y += columnOffset
+      }
+      this.$emit('keep-task-panel-open', true)
+      if (validationInfo.isShiftKey) {
+        if (this.lastSelection) {
+          let startX = this.lastSelection.x
+          let endX = validationInfo.x
+          let startY = this.lastSelection.y
+          if (!sticked) startY += columnOffset
+          let endY = validationInfo.y
+          const grid = this.shotSelectionGrid
+          if (validationInfo.x < this.lastSelection.x) {
+            startX = validationInfo.x
+            endX = this.lastSelection.x
+          }
+          if (validationInfo.y < this.lastSelection.y) {
+            startY = validationInfo.y
+            endY = this.lastSelection.y
+            if (!sticked) endY += columnOffset
+          }
+
+          for (let i = startX; i <= endX; i++) {
+            const shot = this.rowIndexToShot.get(i)
+            if (shot) {
+              for (let j = startY; j <= endY; j++) {
+                const columnId = this.allDisplayedValidationColumns[j]
+                const isSelectedCell = grid?.has(`${i}-${j}`)
+                if (columnId && !isSelectedCell) {
+                  selection.push({
+                    entity: shot,
+                    column: this.taskTypeMap.get(columnId),
+                    task: this.taskMap.get(shot.validations?.get(columnId)),
+                    x: i,
+                    y: j
+                  })
+                }
+              }
+            }
+          }
+          this.$store.commit('ADD_SELECTED_TASK', validationInfo)
+        }
+      } else if (!validationInfo.isCtrlKey) {
+        this.$store.commit('CLEAR_SELECTED_TASKS')
+      }
+      if (selection.length === 0) {
+        this.$store.commit('ADD_SELECTED_TASK', validationInfo)
+      } else {
+        this.$store.commit('ADD_SELECTED_TASKS', selection)
+      }
+      this.updateTaskInQuery()
+
+      if (!validationInfo.isShiftKey && validationInfo.isUserClick) {
+        const x = validationInfo.x
+        let y = validationInfo.y
+        if (!sticked) y -= columnOffset
+        this.lastSelection = { x, y }
+        // The clicked cell was necessarily visible to be clicked, so it is
+        // always currently rendered: this ref lookup stays safe unchanged.
+        const ref = `validation-${x}-${y}`
+        const validationCell = this.$refs[ref][0]
+        this.$nextTick(() => {
+          this.scrollToValidationCell(validationCell)
+        })
+      }
+
+      this.$nextTick(() => {
+        this.$emit('keep-task-panel-open', false)
+      })
+    },
+
     isCastingReady(shot, columnId) {
       if (!shot.nb_entities_out) {
         return false
@@ -1245,6 +1588,43 @@ export default {
 <style lang="scss" scoped>
 .datatable-wrapper {
   min-height: 40px;
+  // Firefox scroll anchoring fights windowed updates: when the top spacer
+  // row resizes it re-anchors the scroll position and produces micro-jumps
+  // (standard TanStack Virtual mitigation). Scoped: only this virtualized
+  // wrapper opts out, other datatables keep the default.
+  overflow-anchor: none;
+}
+
+// PERF-1: spacer rows standing in for the off-screen virtualized items
+// above/below the rendered window (see the datatable-body template).
+// Qualified with .datatable-body so it outranks shared.scss's
+// `.data-list .datatable-body td` padding by specificity, not by
+// stylesheet injection order.
+.datatable-body .virtual-spacer-row td {
+  padding: 0;
+  border: none;
+}
+
+// With virtualization the DOM only holds a window of rows, so the global
+// `.multi-section .datatable-row:nth-child(odd/even)` zebra rules
+// (App.vue) re-anchor on whatever row happens to be rendered first and
+// every stripe flips each time the window shifts by one row. Stripe from
+// the group-local data index instead (stripe-even/stripe-odd bound in the
+// row's :class, matching the per-tbody parity the nth-child rules
+// produced). Hover is redeclared after the stripes so it keeps winning.
+tr.datatable-row.stripe-even,
+tr.datatable-row.stripe-even .datatable-row-header {
+  background-color: var(--background);
+}
+
+tr.datatable-row.stripe-odd,
+tr.datatable-row.stripe-odd .datatable-row-header {
+  background-color: var(--background-alt);
+}
+
+tr.datatable-row:hover,
+tr.datatable-row:hover .datatable-row-header {
+  background-color: var(--background-hover);
 }
 
 .actions {

From 87324e710e27e4ee9caec58a57439b91942857af Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Tue, 7 Jul 2026 09:30:33 +0200
Subject: [PATCH 10/14] [perf] Display the full shot list at once under
 virtualization

Same inversion as assets/edits (007408cd6): the PAGE_SIZE progressive
display only throttled the virtualized ShotList - short growing
scrollbar and a display-more hitch every 200 rows.

Where the cap lived and what changed in shots.js:
- LOAD_SHOTS_END, helpers.buildResult (search/filter/sort path) and
  NEW_SHOT_END sliced displayedShots to PAGE_SIZE; they now hold the
  full result. Still a .slice() copy: the cache arrays are mutated in
  place elsewhere and mutations rely on displayedShots being distinct.
- DISPLAY_MORE_SHOTS kept as a self-guarded no-op for external callers.
- ShotList's local onBodyScroll (scroll emit + scroll-to-bottom ->
  displayMoreShots) removed; the entityListMixin version (scroll emit
  only) takes over, so Shots.vue scroll-position persistence is
  unchanged.

Consumer inventory of state.displayedShots before removing the cap:
- ShotList (virtualized) - the target.
- Playlist.vue: non-virtualized addition panel iterating
  displayedShotsBySequence, plus its own scroll-more wiring dispatching
  displayMoreShots (now a harmless no-op). Same exposure as the assets
  change: the panel loses its paging cushion on huge productions;
  same follow-up path if it measurably regresses (paginate/virtualize
  that panel locally, not restore the store cap).
- Task.vue and Breakdown.vue map the displayedShots getter but never
  use it (dead mapGetters entries) - unaffected.
- ManageShotsModal has an unrelated local ref that shadows the name -
  unaffected.

displayedShotsLength/Count/Frames/Drawings/TimeSpent/Estimation were
already computed from the full result (setListStats receives
result/cache.shots in every path), so header and footer totals are
unchanged. No shots store spec exists, and no spec asserts paging.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/lists/ShotList.vue | 22 ++++++----------------
 src/store/modules/shots.js        | 20 +++++++++++++-------
 2 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/src/components/lists/ShotList.vue b/src/components/lists/ShotList.vue
index 041dea4300..0e929f7ace 100644
--- a/src/components/lists/ShotList.vue
+++ b/src/components/lists/ShotList.vue
@@ -974,9 +974,9 @@ export default {
     'keep-task-panel-open',
     'metadata-changed',
     'restore-clicked',
-    'scroll',
     'sequence-clicked',
     'shot-history'
+    // 'scroll' comes from entityListMixin's emits + onBodyScroll
   ],
 
   // PERF-1: virtualized rows, same recipe as EditList/AssetList.
@@ -1299,7 +1299,7 @@ export default {
   },
 
   methods: {
-    ...mapActions(['displayMoreShots', 'setShotSelection']),
+    ...mapActions(['setShotSelection']),
 
     formatToTimecode,
 
@@ -1443,20 +1443,10 @@ export default {
       })
     },
 
-    onBodyScroll(event) {
-      if (!this.$refs.body) return
-      const position = event.target
-      this.$emit('scroll', position.scrollTop)
-      const maxHeight =
-        this.$refs.body.scrollHeight - this.$refs.body.offsetHeight
-      if (maxHeight < position.scrollTop + 100) {
-        this.loadMoreShots()
-      }
-    },
-
-    loadMoreShots() {
-      this.displayMoreShots()
-    },
+    // PERF-1: no local onBodyScroll anymore. The store now displays the
+    // full result at once (rows are virtualized), so the old
+    // scroll-to-bottom -> displayMoreShots wiring is gone and the mixin's
+    // onBodyScroll (scroll-position emit only) takes over.
 
     shotPath(shotId) {
       return this.getPath('shot', shotId)
diff --git a/src/store/modules/shots.js b/src/store/modules/shots.js
index 4cbed70eac..8e22647664 100644
--- a/src/store/modules/shots.js
+++ b/src/store/modules/shots.js
@@ -245,11 +245,12 @@ const helpers = {
     result = sortShotResult(result, sorting, taskTypeMap, taskMap)
     cache.result = result
 
-    const limit =
-      state.displayedShots.length > PAGE_SIZE
-        ? state.displayedShots.length
-        : PAGE_SIZE
-    const displayedShots = result.slice(0, limit)
+    // PERF-1: the whole filtered result is displayed at once. ShotList
+    // virtualizes its rows, so the old PAGE_SIZE slice (which existed to
+    // keep the rendered DOM small) only capped the scrollbar and forced
+    // display-more hitches every page. Still a copy: the cache arrays are
+    // mutated in place elsewhere and rely on displayedShots being distinct.
+    const displayedShots = result.slice()
 
     helpers.setListStats(state, result)
     Object.assign(state, {
@@ -930,7 +931,9 @@ const mutations = {
     cache.result = shots
     cache.shotIndex = buildShotIndex(shots)
 
-    const displayedShots = shots.slice(0, PAGE_SIZE)
+    // PERF-1: full list displayed at once (as a copy, the cache arrays are
+    // mutated in place elsewhere), ShotList virtualizes its rows.
+    const displayedShots = shots.slice()
     const filledColumns = getFilledColumns(displayedShots)
 
     state.shotValidationColumns = helpers.sortValidationColumns(
@@ -1098,7 +1101,7 @@ const mutations = {
     shot.data = {}
 
     insertSortedShot(cache.shots, shot)
-    state.displayedShots = cache.shots.slice(0, PAGE_SIZE)
+    state.displayedShots = cache.shots.slice()
     helpers.setListStats(state, cache.shots)
     state.shotFilledColumns = getFilledColumns(state.displayedShots)
     cache.shotMap.set(shot.id, shot)
@@ -1133,6 +1136,9 @@ const mutations = {
     })
   },
 
+  // PERF-1: no-op since displayedShots always holds the full result now;
+  // kept because Playlist still dispatches it from its own scroll wiring
+  // (the guard below makes those calls harmless).
   [DISPLAY_MORE_SHOTS](
     state,
     { taskTypeMap, taskStatusMap, taskMap, production }

From e38003212afdb499c8667e4c03698d31d724177d Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Tue, 7 Jul 2026 09:37:18 +0200
Subject: [PATCH 11/14] [lists] Consolidate the shift-rectangle selection into
 entity_list.js

The virtualization work left three near-identical local onTaskSelected
overrides (EditList, AssetList, ShotList), each resolving the
shift-click rectangle from data because the mixin's version read
`this.$refs['validation-x-y']` for every cell - which silently drops
cells outside the rendered window once rows are virtualized.

Consumer check before promoting: among entityListMixin users
(the 5 entity grids + SequenceStatsList / EpisodeStatsList /
ProductionAssetTypeList / ShotLine / Breakdown), only the 5 entity
grids reference onTaskSelected at all; the pages' onTaskSelected(task)
handlers (Shot/Asset/Episode/Sequence/TaskType) are unrelated
single-argument methods from entity.js or local. So no $refs-dependent
consumer remains and the data-driven rectangle moves INTO the mixin.

The mixin now resolves the rectangle from two per-list hooks:
- entityForRow(lineIndex): global row index -> entity, in the exact
  coordinates the list's cells advertise as row-x. One-liners for the
  flat lists (displayedEdits/Sequences/Episodes[i]), Map lookups for
  the grouped ones (rowIndexToAsset / rowIndexToShot, which encode the
  getIndex(i, k) offsets). Default returns undefined (mixin consumers
  that never wire cell selection keep empty ranges).
- isCellSelectable(entity, columnId, columnIndex): default true
  (ValidationCell's selectable default); AssetList overrides it to
  mirror its template (sticked always selectable, non-sticked through
  isSelectable()'s workflow + shared-asset checks).
allDisplayedValidationColumns also moves into the mixin (was duplicated
per list). The local overrides in EditList/AssetList/ShotList are
deleted; SequenceList/EpisodeList (still full-DOM until their ports)
gain their entityForRow one-liners so behavior is identical - for
non-virtualized lists the data-driven rectangle selects exactly the
same cells the $refs walk did.

Deliberately NOT the ARCH-4 EntityDataGrid extraction: this only dedups
the selection logic; templates, virtualizers and column plumbing stay
per-list.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/lists/AssetList.vue    | 112 ++++----------------------
 src/components/lists/EditList.vue     | 103 +----------------------
 src/components/lists/EpisodeList.vue  |   5 ++
 src/components/lists/SequenceList.vue |   5 ++
 src/components/lists/ShotList.vue     |  98 +---------------------
 src/components/mixins/entity_list.js  |  63 +++++++++++----
 6 files changed, 83 insertions(+), 303 deletions(-)

diff --git a/src/components/lists/AssetList.vue b/src/components/lists/AssetList.vue
index 8e2210cd1b..91b9b1abe8 100644
--- a/src/components/lists/AssetList.vue
+++ b/src/components/lists/AssetList.vue
@@ -736,11 +736,10 @@ export default {
     'create-tasks',
     'delete-clicked',
     'edit-clicked',
-    'keep-task-panel-open',
     'metadata-changed',
     'new-clicked',
     'restore-clicked'
-    // 'scroll' comes from entityListMixin's emits + onBodyScroll
+    // 'scroll' and 'keep-task-panel-open' come from entityListMixin
   ],
 
   // PERF-1: virtualized rows, ported from the EditList pilot. useVirtualizer
@@ -1072,15 +1071,6 @@ export default {
       return map
     },
 
-    // Sticked + non-sticked validation columns in the same order as the x/y
-    // grid coordinates used by isSelected()/onTaskSelected().
-    allDisplayedValidationColumns() {
-      return [
-        ...this.stickedDisplayedValidationColumns,
-        ...this.nonStickedDisplayedValidationColumns
-      ]
-    },
-
     maxAssigneesPerCell() {
       return MAX_ASSIGNEES_PER_CELL
     },
@@ -1190,92 +1180,22 @@ export default {
       return this.assetSelectionGrid.has(`${lineIndex}-${columnIndex}`)
     },
 
-    // PERF-1: overrides entity_list.js's onTaskSelected(), same local
-    // override as EditList (consolidating the two copies back into the
-    // shared mixin is ARCH-4's job). The mixin rebuilds a shift-click range
-    // selection by reading `this.$refs['validation-x-y']` for every cell in
-    // the rectangle, which silently drops cells outside the rendered window
-    // once rows are virtualized. This resolves the same rectangle from
-    // rowIndexToAsset/taskTypeMap/taskMap instead. Selectability mirrors the
-    // template exactly: sticked cells never bind :selectable (always
-    // selectable), non-sticked cells use isSelectable() (workflow + shared
-    // asset checks). Everything outside the double loop is unchanged from
-    // the mixin.
-    onTaskSelected(validationInfo, sticked) {
-      const columnOffset = this.stickedDisplayedValidationColumns.length
-      const selection = []
-      if (!sticked) {
-        validationInfo = { ...validationInfo }
-        validationInfo.y += columnOffset
-      }
-      this.$emit('keep-task-panel-open', true)
-      if (validationInfo.isShiftKey) {
-        if (this.lastSelection) {
-          let startX = this.lastSelection.x
-          let endX = validationInfo.x
-          let startY = this.lastSelection.y
-          if (!sticked) startY += columnOffset
-          let endY = validationInfo.y
-          const grid = this.assetSelectionGrid
-          if (validationInfo.x < this.lastSelection.x) {
-            startX = validationInfo.x
-            endX = this.lastSelection.x
-          }
-          if (validationInfo.y < this.lastSelection.y) {
-            startY = validationInfo.y
-            endY = this.lastSelection.y
-            if (!sticked) endY += columnOffset
-          }
-
-          for (let i = startX; i <= endX; i++) {
-            const asset = this.rowIndexToAsset.get(i)
-            if (asset) {
-              for (let j = startY; j <= endY; j++) {
-                const columnId = this.allDisplayedValidationColumns[j]
-                const isSelectedCell = grid?.has(`${i}-${j}`)
-                const selectable =
-                  j < columnOffset || this.isSelectable(asset, columnId)
-                if (columnId && selectable && !isSelectedCell) {
-                  selection.push({
-                    entity: asset,
-                    column: this.taskTypeMap.get(columnId),
-                    task: this.taskMap.get(asset.validations?.get(columnId)),
-                    x: i,
-                    y: j
-                  })
-                }
-              }
-            }
-          }
-          this.$store.commit('ADD_SELECTED_TASK', validationInfo)
-        }
-      } else if (!validationInfo.isCtrlKey) {
-        this.$store.commit('CLEAR_SELECTED_TASKS')
-      }
-      if (selection.length === 0) {
-        this.$store.commit('ADD_SELECTED_TASK', validationInfo)
-      } else {
-        this.$store.commit('ADD_SELECTED_TASKS', selection)
-      }
-      this.updateTaskInQuery()
-
-      if (!validationInfo.isShiftKey && validationInfo.isUserClick) {
-        const x = validationInfo.x
-        let y = validationInfo.y
-        if (!sticked) y -= columnOffset
-        this.lastSelection = { x, y }
-        // The clicked cell was necessarily visible to be clicked, so it is
-        // always currently rendered: this ref lookup stays safe unchanged.
-        const ref = `validation-${x}-${y}`
-        const validationCell = this.$refs[ref][0]
-        this.$nextTick(() => {
-          this.scrollToValidationCell(validationCell)
-        })
-      }
+    // Hook for entity_list.js's data-driven shift-rectangle selection:
+    // getIndex(i, k) offsets come from the unfiltered displayedAssets
+    // groups while i indexes the filtered group, mirroring the template's
+    // v-for + :row-x combination (see rowIndexToAsset).
+    entityForRow(lineIndex) {
+      return this.rowIndexToAsset.get(lineIndex)
+    },
 
-      this.$nextTick(() => {
-        this.$emit('keep-task-panel-open', false)
-      })
+    // Selectability mirrors the template exactly: sticked cells never bind
+    // :selectable (always selectable), non-sticked cells use isSelectable()
+    // (workflow + shared-asset checks).
+    isCellSelectable(asset, columnId, columnIndex) {
+      return (
+        columnIndex < this.stickedDisplayedValidationColumns.length ||
+        this.isSelectable(asset, columnId)
+      )
     },
 
     toggleLine(asset, event) {
diff --git a/src/components/lists/EditList.vue b/src/components/lists/EditList.vue
index 7869e77667..f4b666a039 100644
--- a/src/components/lists/EditList.vue
+++ b/src/components/lists/EditList.vue
@@ -624,10 +624,9 @@ export default {
     'delete-clicked',
     'edit-clicked',
     'edit-history',
-    'keep-task-panel-open',
     'metadata-changed',
     'restore-clicked'
-    // 'scroll' comes from entityListMixin's emits + onBodyScroll
+    // 'scroll' and 'keep-task-panel-open' come from entityListMixin
   ],
 
   // PERF-1 pilot: useVirtualizer is a composable, so it needs a setup()
@@ -808,15 +807,6 @@ export default {
       return MAX_ASSIGNEES_PER_CELL
     },
 
-    // Sticked + non-sticked validation columns in the same order as the x/y
-    // grid coordinates used by isSelected()/onTaskSelected() below.
-    allDisplayedValidationColumns() {
-      return [
-        ...this.stickedDisplayedValidationColumns,
-        ...this.nonStickedDisplayedValidationColumns
-      ]
-    },
-
     // Spans the spacer rows across every column currently in the header,
     // so they don't leave a jagged one-column-wide row in the table.
     totalColumnsCount() {
@@ -866,94 +856,9 @@ export default {
       return this.editSelectionGrid.has(`${lineIndex}-${columnIndex}`)
     },
 
-    // PERF-1 pilot: overrides entity_list.js's onTaskSelected(). The shared
-    // version rebuilds a shift-click range selection by reading
-    // `this.$refs['validation-i-j']` for every cell in the rectangle, which
-    // only works when every row is in the DOM. With rows virtualized, cells
-    // outside the rendered window have no ref and get silently dropped from
-    // the range. This override resolves the same range from
-    // displayedEdits/taskTypeMap/taskMap instead, so shift-click still
-    // selects the full range regardless of what is currently scrolled into
-    // view. Everything outside the double loop is unchanged from the mixin.
-    onTaskSelected(validationInfo, sticked) {
-      const columnOffset = this.stickedDisplayedValidationColumns.length
-      const selection = []
-      if (!sticked) {
-        validationInfo = { ...validationInfo }
-        validationInfo.y += columnOffset
-      }
-      this.$emit('keep-task-panel-open', true)
-      if (validationInfo.isShiftKey) {
-        if (this.lastSelection) {
-          let startX = this.lastSelection.x
-          let endX = validationInfo.x
-          let startY = this.lastSelection.y
-          if (!sticked) startY += columnOffset
-          let endY = validationInfo.y
-          const grid = this.editSelectionGrid
-          if (validationInfo.x < this.lastSelection.x) {
-            startX = validationInfo.x
-            endX = this.lastSelection.x
-          }
-          if (validationInfo.y < this.lastSelection.y) {
-            startY = validationInfo.y
-            endY = this.lastSelection.y
-            if (!sticked) endY += columnOffset
-          }
-
-          for (let i = startX; i <= endX; i++) {
-            const edit = this.displayedEdits[i]
-            if (edit) {
-              for (let j = startY; j <= endY; j++) {
-                const columnId = this.allDisplayedValidationColumns[j]
-                const isSelectedCell = grid?.has(`${i}-${j}`)
-                // ValidationCell's `selectable` prop defaults to true and is
-                // never bound in this list's template, so every column in
-                // range is selectable here (unlike the generic mixin
-                // version, which supports lists that do restrict it).
-                if (columnId && !isSelectedCell) {
-                  selection.push({
-                    entity: edit,
-                    column: this.taskTypeMap.get(columnId),
-                    task: this.taskMap.get(
-                      edit.validations ? edit.validations.get(columnId) : null
-                    ),
-                    x: i,
-                    y: j
-                  })
-                }
-              }
-            }
-          }
-          this.$store.commit('ADD_SELECTED_TASK', validationInfo)
-        }
-      } else if (!validationInfo.isCtrlKey) {
-        this.$store.commit('CLEAR_SELECTED_TASKS')
-      }
-      if (selection.length === 0) {
-        this.$store.commit('ADD_SELECTED_TASK', validationInfo)
-      } else {
-        this.$store.commit('ADD_SELECTED_TASKS', selection)
-      }
-      this.updateTaskInQuery()
-
-      if (!validationInfo.isShiftKey && validationInfo.isUserClick) {
-        const x = validationInfo.x
-        let y = validationInfo.y
-        if (!sticked) y -= columnOffset
-        this.lastSelection = { x, y }
-        // The clicked cell was necessarily visible to be clicked, so it is
-        // always currently rendered: this ref lookup stays safe unchanged.
-        const ref = `validation-${x}-${y}`
-        const validationCell = this.$refs[ref][0]
-        this.$nextTick(() => {
-          this.scrollToValidationCell(validationCell)
-        })
-      }
-
-      this.$nextTick(() => {
-        this.$emit('keep-task-panel-open', false)
-      })
+    // Hook for entity_list.js's data-driven shift-rectangle selection.
+    entityForRow(lineIndex) {
+      return this.displayedEdits[lineIndex]
     },
 
     toggleLine(edit, event) {
diff --git a/src/components/lists/EpisodeList.vue b/src/components/lists/EpisodeList.vue
index 19a7599088..0f15a28b48 100644
--- a/src/components/lists/EpisodeList.vue
+++ b/src/components/lists/EpisodeList.vue
@@ -716,6 +716,11 @@ export default {
       return this.episodeSelectionGrid.has(`${lineIndex}-${columnIndex}`)
     },
 
+    // Hook for entity_list.js's data-driven shift-rectangle selection.
+    entityForRow(lineIndex) {
+      return this.displayedEpisodes[lineIndex]
+    },
+
     episodePath(episodeId) {
       return this.getPath('episode', episodeId)
     },
diff --git a/src/components/lists/SequenceList.vue b/src/components/lists/SequenceList.vue
index 0cbd61504e..965ef947b9 100644
--- a/src/components/lists/SequenceList.vue
+++ b/src/components/lists/SequenceList.vue
@@ -676,6 +676,11 @@ export default {
       return this.sequenceSelectionGrid.has(`${lineIndex}-${columnIndex}`)
     },
 
+    // Hook for entity_list.js's data-driven shift-rectangle selection.
+    entityForRow(lineIndex) {
+      return this.displayedSequences[lineIndex]
+    },
+
     sequencePath(sequenceId) {
       return this.getPath('sequence', sequenceId)
     },
diff --git a/src/components/lists/ShotList.vue b/src/components/lists/ShotList.vue
index 0e929f7ace..28f7fcda56 100644
--- a/src/components/lists/ShotList.vue
+++ b/src/components/lists/ShotList.vue
@@ -971,12 +971,11 @@ export default {
     'delete-clicked',
     'edit-clicked',
     'field-changed',
-    'keep-task-panel-open',
     'metadata-changed',
     'restore-clicked',
     'sequence-clicked',
     'shot-history'
-    // 'scroll' comes from entityListMixin's emits + onBodyScroll
+    // 'scroll' and 'keep-task-panel-open' come from entityListMixin
   ],
 
   // PERF-1: virtualized rows, same recipe as EditList/AssetList.
@@ -1206,15 +1205,6 @@ export default {
       return map
     },
 
-    // Sticked + non-sticked validation columns in the same order as the x/y
-    // grid coordinates used by isSelected()/onTaskSelected().
-    allDisplayedValidationColumns() {
-      return [
-        ...this.stickedDisplayedValidationColumns,
-        ...this.nonStickedDisplayedValidationColumns
-      ]
-    },
-
     maxAssigneesPerCell() {
       return MAX_ASSIGNEES_PER_CELL
     },
@@ -1308,89 +1298,9 @@ export default {
       return this.shotSelectionGrid.has(`${lineIndex}-${columnIndex}`)
     },
 
-    // PERF-1: overrides entity_list.js's onTaskSelected(), same local
-    // override as EditList/AssetList (consolidating the copies back into
-    // the shared mixin is ARCH-4's job). The mixin rebuilds a shift-click
-    // range selection by reading `this.$refs['validation-x-y']` for every
-    // cell in the rectangle, which silently drops cells outside the
-    // rendered window once rows are virtualized. This resolves the same
-    // rectangle from rowIndexToShot/taskTypeMap/taskMap instead. ShotList
-    // never binds :selectable on its cells, so every column in range is
-    // selectable (matching the rendered cells' default). Everything outside
-    // the double loop is unchanged from the mixin.
-    onTaskSelected(validationInfo, sticked) {
-      const columnOffset = this.stickedDisplayedValidationColumns.length
-      const selection = []
-      if (!sticked) {
-        validationInfo = { ...validationInfo }
-        validationInfo.y += columnOffset
-      }
-      this.$emit('keep-task-panel-open', true)
-      if (validationInfo.isShiftKey) {
-        if (this.lastSelection) {
-          let startX = this.lastSelection.x
-          let endX = validationInfo.x
-          let startY = this.lastSelection.y
-          if (!sticked) startY += columnOffset
-          let endY = validationInfo.y
-          const grid = this.shotSelectionGrid
-          if (validationInfo.x < this.lastSelection.x) {
-            startX = validationInfo.x
-            endX = this.lastSelection.x
-          }
-          if (validationInfo.y < this.lastSelection.y) {
-            startY = validationInfo.y
-            endY = this.lastSelection.y
-            if (!sticked) endY += columnOffset
-          }
-
-          for (let i = startX; i <= endX; i++) {
-            const shot = this.rowIndexToShot.get(i)
-            if (shot) {
-              for (let j = startY; j <= endY; j++) {
-                const columnId = this.allDisplayedValidationColumns[j]
-                const isSelectedCell = grid?.has(`${i}-${j}`)
-                if (columnId && !isSelectedCell) {
-                  selection.push({
-                    entity: shot,
-                    column: this.taskTypeMap.get(columnId),
-                    task: this.taskMap.get(shot.validations?.get(columnId)),
-                    x: i,
-                    y: j
-                  })
-                }
-              }
-            }
-          }
-          this.$store.commit('ADD_SELECTED_TASK', validationInfo)
-        }
-      } else if (!validationInfo.isCtrlKey) {
-        this.$store.commit('CLEAR_SELECTED_TASKS')
-      }
-      if (selection.length === 0) {
-        this.$store.commit('ADD_SELECTED_TASK', validationInfo)
-      } else {
-        this.$store.commit('ADD_SELECTED_TASKS', selection)
-      }
-      this.updateTaskInQuery()
-
-      if (!validationInfo.isShiftKey && validationInfo.isUserClick) {
-        const x = validationInfo.x
-        let y = validationInfo.y
-        if (!sticked) y -= columnOffset
-        this.lastSelection = { x, y }
-        // The clicked cell was necessarily visible to be clicked, so it is
-        // always currently rendered: this ref lookup stays safe unchanged.
-        const ref = `validation-${x}-${y}`
-        const validationCell = this.$refs[ref][0]
-        this.$nextTick(() => {
-          this.scrollToValidationCell(validationCell)
-        })
-      }
-
-      this.$nextTick(() => {
-        this.$emit('keep-task-panel-open', false)
-      })
+    // Hook for entity_list.js's data-driven shift-rectangle selection.
+    entityForRow(lineIndex) {
+      return this.rowIndexToShot.get(lineIndex)
     },
 
     isCastingReady(shot, columnId) {
diff --git a/src/components/mixins/entity_list.js b/src/components/mixins/entity_list.js
index 0fec467e7c..e036761e0d 100644
--- a/src/components/mixins/entity_list.js
+++ b/src/components/mixins/entity_list.js
@@ -85,6 +85,15 @@ export const entityListMixin = {
       )
     },
 
+    // Sticked + non-sticked validation columns in the same order as the x/y
+    // grid coordinates used by the selection grids and onTaskSelected().
+    allDisplayedValidationColumns() {
+      return [
+        ...this.stickedDisplayedValidationColumns,
+        ...this.nonStickedDisplayedValidationColumns
+      ]
+    },
+
     isEmptyTask() {
       return (
         !this.isEmptyList &&
@@ -188,6 +197,13 @@ export const entityListMixin = {
       }
     },
 
+    // PERF-1: with rows virtualized, cells outside the rendered window have
+    // no $refs entry, so the historical "read every validation-x-y ref in
+    // the rectangle" strategy silently dropped off-screen cells from a
+    // shift-click range. The rectangle is now resolved from data instead:
+    // each grid provides entityForRow() (global row index -> entity, in the
+    // exact coordinates its cells advertise as row-x) and may override
+    // isCellSelectable() when its template restricts cell selectability.
     onTaskSelected(validationInfo, sticked) {
       const columnOffset = this.stickedDisplayedValidationColumns.length
       const selection = []
@@ -215,20 +231,24 @@ export const entityListMixin = {
           }
 
           for (let i = startX; i <= endX; i++) {
-            for (let j = startY; j <= endY; j++) {
-              const validationCell = this.$refs[`validation-${i}-${j}`]?.[0]
-              const isSelectedCell = grid?.has(`${i}-${j}`)
-              if (validationCell?.selectable && !isSelectedCell) {
-                let y = validationCell.columnY
-                if (!sticked) y += columnOffset
-
-                selection.push({
-                  entity: validationCell.entity,
-                  column: validationCell.column,
-                  task: validationCell.task,
-                  x: validationCell.rowX,
-                  y
-                })
+            const entity = this.entityForRow(i)
+            if (entity) {
+              for (let j = startY; j <= endY; j++) {
+                const columnId = this.allDisplayedValidationColumns[j]
+                const isSelectedCell = grid?.has(`${i}-${j}`)
+                if (
+                  columnId &&
+                  this.isCellSelectable(entity, columnId, j) &&
+                  !isSelectedCell
+                ) {
+                  selection.push({
+                    entity,
+                    column: this.taskTypeMap.get(columnId),
+                    task: this.taskMap.get(entity.validations?.get(columnId)),
+                    x: i,
+                    y: j
+                  })
+                }
               }
             }
           }
@@ -261,6 +281,21 @@ export const entityListMixin = {
       })
     },
 
+    // Hook for onTaskSelected(): maps a global row index (the coordinate
+    // system the list's cells advertise as row-x) to its entity. Every
+    // entity grid provides its own; the default keeps shift-ranges empty
+    // for entityListMixin consumers that never wire cell selection.
+    entityForRow() {
+      return undefined
+    },
+
+    // Hook for onTaskSelected(): whether the (entity, column) cell may be
+    // range-selected. Default matches ValidationCell's `selectable` default;
+    // grids that bind :selectable in their template override this.
+    isCellSelectable() {
+      return true
+    },
+
     onTaskUnselected(validationInfo, sticked) {
       if (!sticked) {
         validationInfo = { ...validationInfo }

From 4b8490ff1c3918ce4cac25e3e97ba42dbf919ce0 Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Tue, 7 Jul 2026 09:39:40 +0200
Subject: [PATCH 12/14] [sequences] Virtualize SequenceList rows with
 @tanstack/vue-virtual

Mechanical port of the established recipe: SequenceList is a flat list
(single tbody, no group headers), so the virtualizer windows directly
over displayedSequences with sequence.id keys - no flattening layer
needed. Spacer rows, per-mode estimates (52 normal / 116 big thumbnails
/ 102 contact sheet), measureElement safety net, overscan 10,
:max-assignees="3" on both validation cells, data-driven
stripe-even/stripe-odd on the global index (plain .datatable-row
nth-child parity, like EditList), scoped overflow-anchor: none.

All-rows assumptions: none beyond what the consolidated
entity_list.js onTaskSelected already handles (entityForRow hook was
added in the previous commit). No local onBodyScroll or display-more
wiring existed (the sequences store never paged displayedSequences),
no row checkboxes, footer stats come from store getters. Pre-existing
and untouched: the resolution input's Ctrl+keyup handler references
getIndex(i, k), which never existed in this component (throws when
triggered today, before and after this change - flat lists have no
getIndex); flagged for a later cleanup pass.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/lists/SequenceList.vue | 183 +++++++++++++++++++++++++-
 1 file changed, 181 insertions(+), 2 deletions(-)

diff --git a/src/components/lists/SequenceList.vue b/src/components/lists/SequenceList.vue
index 965ef947b9..ad5c989b46 100644
--- a/src/components/lists/SequenceList.vue
+++ b/src/components/lists/SequenceList.vue
@@ -211,12 +211,29 @@
           @touchstart="startBrowsing"
         >
           <template v-if="!isLoading && isListVisible">
+            <!--
+              PERF-1: virtualized rows (@tanstack/vue-virtual). Only the rows
+              near the viewport render below, between two spacer rows sized
+              to the off-screen rows' total height.
+            -->
+            <tr class="virtual-spacer-row" v-if="topSpacerHeight > 0">
+              <td
+                :colspan="totalColumnsCount"
+                :style="{ height: `${topSpacerHeight}px` }"
+              ></td>
+            </tr>
             <tr
               class="datatable-row"
               scope="row"
               :key="sequence.id"
-              :class="{ canceled: sequence.canceled }"
-              v-for="(sequence, i) in displayedSequences"
+              :ref="el => rowVirtualizer.measureElement(el)"
+              :data-index="i"
+              :class="{
+                canceled: sequence.canceled,
+                'stripe-even': i % 2 === 0,
+                'stripe-odd': i % 2 === 1
+              }"
+              v-for="{ sequence, i } in visibleRows"
             >
               <th
                 :class="{
@@ -294,6 +311,7 @@
                       ? `${offsets['validation-' + j]}px`
                       : '0'
                   "
+                  :max-assignees="maxAssigneesPerCell"
                   :minimized="hiddenColumns[columnId]"
                   :row-x="i"
                   :selected="isSelected(i, j)"
@@ -424,6 +442,7 @@
                         : null
                     )
                   "
+                  :max-assignees="maxAssigneesPerCell"
                   :minimized="hiddenColumns[columnId]"
                   :selected="
                     isSelected(i, j + stickedDisplayedValidationColumns.length)
@@ -444,6 +463,12 @@
               />
               <td class="actions" v-else></td>
             </tr>
+            <tr class="virtual-spacer-row" v-if="bottomSpacerHeight > 0">
+              <td
+                :colspan="totalColumnsCount"
+                :style="{ height: `${bottomSpacerHeight}px` }"
+              ></td>
+            </tr>
           </template>
         </tbody>
       </table>
@@ -499,6 +524,8 @@
 </template>
 
 <script>
+import { useVirtualizer } from '@tanstack/vue-virtual'
+import { computed, ref } from 'vue'
 import { mapGetters, mapActions } from 'vuex'
 
 import { getEntityPath } from '@/lib/path'
@@ -521,6 +548,16 @@ import TableInfo from '@/components/widgets/TableInfo.vue'
 import ValidationCell from '@/components/cells/ValidationCell.vue'
 import ValidationHeader from '@/components/cells/ValidationHeader.vue'
 
+// PERF-1: row-height estimates per display mode (same technique as the
+// other virtualized entity grids); measureElement corrects the rest.
+const ROW_HEIGHT_ESTIMATE = 52
+const ROW_HEIGHT_ESTIMATE_BIG_THUMBNAILS = 116
+const ROW_HEIGHT_ESTIMATE_CONTACT_SHEET = 102
+
+// Cap on assignee avatars per validation cell (rest collapses into "+N"),
+// keeping row heights constant whatever the assignation count.
+const MAX_ASSIGNEES_PER_CELL = 3
+
 export default {
   name: 'sequence-list',
 
@@ -561,6 +598,33 @@ export default {
 
   emits: ['create-tasks', 'delete-clicked', 'edit-clicked', 'metadata-changed'],
 
+  // PERF-1: virtualized rows, same recipe as the other entity grids. The
+  // list is flat (no group headers), so the virtualizer windows directly
+  // over displayedSequences. `body` doubles as `this.$refs.body` for the
+  // mixin methods and as the virtualizer's scroll element.
+  setup(props) {
+    const body = ref(null)
+    const rowVirtualizer = useVirtualizer(
+      computed(() => ({
+        count: props.displayedSequences.length,
+        getScrollElement: () => body.value,
+        estimateSize: () => {
+          if (props.displaySettings.bigThumbnails) {
+            return ROW_HEIGHT_ESTIMATE_BIG_THUMBNAILS
+          }
+          if (props.displaySettings.contactSheetMode) {
+            return ROW_HEIGHT_ESTIMATE_CONTACT_SHEET
+          }
+          return ROW_HEIGHT_ESTIMATE
+        },
+        getItemKey: index => props.displayedSequences[index]?.id ?? index,
+        overscan: 10
+      }))
+    )
+
+    return { body, rowVirtualizer }
+  },
+
   data() {
     return {
       type: 'sequence',
@@ -666,6 +730,86 @@ export default {
 
     localStorageStickKey() {
       return `stick-sequences-${this.currentProduction?.id}`
+    },
+
+    // PERF-1: virtualization plumbing (see the EditList pilot).
+    virtualRows() {
+      return this.rowVirtualizer.getVirtualItems()
+    },
+
+    totalRowsSize() {
+      return this.rowVirtualizer.getTotalSize()
+    },
+
+    topSpacerHeight() {
+      return this.virtualRows.length > 0 ? this.virtualRows[0].start : 0
+    },
+
+    bottomSpacerHeight() {
+      if (this.virtualRows.length === 0) return 0
+      const lastRow = this.virtualRows[this.virtualRows.length - 1]
+      return this.totalRowsSize - lastRow.end
+    },
+
+    // { sequence, i } pairs for the rows tanstack currently renders, `i`
+    // being the row's real index in displayedSequences so every i-based
+    // computation (isSelected, refs, z-index) stays correct unchanged.
+    visibleRows() {
+      return this.virtualRows
+        .filter(
+          virtualRow => this.displayedSequences[virtualRow.index] !== undefined
+        )
+        .map(virtualRow => ({
+          sequence: this.displayedSequences[virtualRow.index],
+          i: virtualRow.index
+        }))
+    },
+
+    maxAssigneesPerCell() {
+      return MAX_ASSIGNEES_PER_CELL
+    },
+
+    // Spans the spacer rows across every column currently in the header,
+    // so they don't leave a jagged one-column-wide row in the table.
+    totalColumnsCount() {
+      const showInfos = this.displaySettings.showInfos
+      let count = 1 // sequence name column, always present
+      if (showInfos) {
+        count += this.stickedVisibleMetadataDescriptors.length
+        count += this.nonStickedVisibleMetadataDescriptors.length
+      }
+      count += this.stickedDisplayedValidationColumns.length
+      if (!this.isLoading) {
+        count += this.nonStickedDisplayedValidationColumns.length
+      }
+      if (
+        !this.isCurrentUserClient &&
+        showInfos &&
+        this.isSequenceDescription
+      ) {
+        count++
+      }
+      if (this.isSequenceResolution && showInfos) {
+        count++
+      }
+      if (
+        !this.isCurrentUserClient &&
+        showInfos &&
+        this.isSequenceTime &&
+        this.metadataDisplayHeaders.timeSpent
+      ) {
+        count++
+      }
+      if (
+        !this.isCurrentUserClient &&
+        showInfos &&
+        this.isSequenceEstimation &&
+        this.metadataDisplayHeaders.estimation
+      ) {
+        count++
+      }
+      count++ // actions column, always present
+      return count
     }
   },
 
@@ -734,6 +878,41 @@ export default {
 
 .datatable-wrapper {
   min-height: 40px;
+  // Firefox scroll anchoring fights windowed updates: when the top spacer
+  // row resizes it re-anchors the scroll position and produces micro-jumps
+  // (standard TanStack Virtual mitigation). Scoped: only this virtualized
+  // wrapper opts out, other datatables keep the default.
+  overflow-anchor: none;
+}
+
+// PERF-1: spacer rows standing in for the off-screen virtualized rows
+// above/below the rendered window. Qualified with .datatable-body so it
+// outranks shared.scss's `.data-list .datatable-body td` padding by
+// specificity, not by stylesheet injection order.
+.datatable-body .virtual-spacer-row td {
+  padding: 0;
+  border: none;
+}
+
+// With virtualization the DOM only holds a window of rows, so the global
+// `.datatable-row:nth-child(even)` zebra rules (App.vue) re-anchor on
+// whatever row happens to be rendered first and every stripe flips each
+// time the window shifts by one row. Stripe from the data index instead
+// (stripe-even/stripe-odd bound in the row's :class). Hover is redeclared
+// after the stripes so it keeps winning over them.
+tr.datatable-row.stripe-even,
+tr.datatable-row.stripe-even .datatable-row-header {
+  background-color: var(--background);
+}
+
+tr.datatable-row.stripe-odd,
+tr.datatable-row.stripe-odd .datatable-row-header {
+  background-color: var(--background-alt);
+}
+
+tr.datatable-row:hover,
+tr.datatable-row:hover .datatable-row-header {
+  background-color: var(--background-hover);
 }
 
 .actions {

From 619a524b207d9c4aea4d77ca62b8f8bb1817cd62 Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Tue, 7 Jul 2026 09:41:41 +0200
Subject: [PATCH 13/14] [episodes] Virtualize EpisodeList rows with
 @tanstack/vue-virtual

Mechanical port of the established recipe: EpisodeList is a flat list
(single tbody, no group headers), so the virtualizer windows directly
over displayedEpisodes with episode.id keys. Spacer rows, per-mode
estimates (52 normal / 116 big thumbnails / 102 contact sheet),
measureElement safety net, overscan 10, :max-assignees="3" on both
validation cells, data-driven stripe-even/stripe-odd on the global
index, scoped overflow-anchor: none on the wrapper.

All-rows assumptions: none beyond what the consolidated entity_list.js
onTaskSelected already handles (entityForRow hook added in the
consolidation commit). No local onBodyScroll or display-more wiring
existed (the episodes store never paged displayedEpisodes), no row
checkboxes, footer stats come from store getters, the per-row status
combobox emits field-changed with the row's own entity. Pre-existing
and untouched: the resolution input's Ctrl+keyup handler references
getIndex(i, k), which never existed in this component (throws when
triggered, before and after this change); flagged for a later cleanup
pass together with SequenceList's identical copy.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/lists/EpisodeList.vue | 185 ++++++++++++++++++++++++++-
 1 file changed, 183 insertions(+), 2 deletions(-)

diff --git a/src/components/lists/EpisodeList.vue b/src/components/lists/EpisodeList.vue
index 0f15a28b48..d16e28f6bb 100644
--- a/src/components/lists/EpisodeList.vue
+++ b/src/components/lists/EpisodeList.vue
@@ -224,12 +224,29 @@
         </thead>
         <tbody class="datatable-body">
           <template v-if="!isLoading && isListVisible">
+            <!--
+              PERF-1: virtualized rows (@tanstack/vue-virtual). Only the rows
+              near the viewport render below, between two spacer rows sized
+              to the off-screen rows' total height.
+            -->
+            <tr class="virtual-spacer-row" v-if="topSpacerHeight > 0">
+              <td
+                :colspan="totalColumnsCount"
+                :style="{ height: `${topSpacerHeight}px` }"
+              ></td>
+            </tr>
             <tr
               class="datatable-row"
               scope="row"
               :key="episode.id"
-              :class="{ canceled: episode.canceled }"
-              v-for="(episode, i) in displayedEpisodes"
+              :ref="el => rowVirtualizer.measureElement(el)"
+              :data-index="i"
+              :class="{
+                canceled: episode.canceled,
+                'stripe-even': i % 2 === 0,
+                'stripe-odd': i % 2 === 1
+              }"
+              v-for="{ episode, i } in visibleRows"
             >
               <th
                 :class="{
@@ -307,6 +324,7 @@
                       ? `${offsets['validation-' + j]}px`
                       : '0'
                   "
+                  :max-assignees="maxAssigneesPerCell"
                   :minimized="hiddenColumns[columnId]"
                   :row-x="i"
                   :selected="isSelected(i, j)"
@@ -459,6 +477,7 @@
                         : null
                     )
                   "
+                  :max-assignees="maxAssigneesPerCell"
                   :minimized="hiddenColumns[columnId]"
                   :selected="
                     isSelected(i, j + stickedDisplayedValidationColumns.length)
@@ -479,6 +498,12 @@
               />
               <td class="actions" v-else></td>
             </tr>
+            <tr class="virtual-spacer-row" v-if="bottomSpacerHeight > 0">
+              <td
+                :colspan="totalColumnsCount"
+                :style="{ height: `${bottomSpacerHeight}px` }"
+              ></td>
+            </tr>
           </template>
         </tbody>
       </table>
@@ -532,6 +557,8 @@
 </template>
 
 <script>
+import { useVirtualizer } from '@tanstack/vue-virtual'
+import { computed, ref } from 'vue'
 import { mapGetters, mapActions } from 'vuex'
 
 import { descriptorMixin } from '@/components/mixins/descriptors'
@@ -553,6 +580,16 @@ import TableInfo from '@/components/widgets/TableInfo.vue'
 import ValidationCell from '@/components/cells/ValidationCell.vue'
 import ValidationHeader from '@/components/cells/ValidationHeader.vue'
 
+// PERF-1: row-height estimates per display mode (same technique as the
+// other virtualized entity grids); measureElement corrects the rest.
+const ROW_HEIGHT_ESTIMATE = 52
+const ROW_HEIGHT_ESTIMATE_BIG_THUMBNAILS = 116
+const ROW_HEIGHT_ESTIMATE_CONTACT_SHEET = 102
+
+// Cap on assignee avatars per validation cell (rest collapses into "+N"),
+// keeping row heights constant whatever the assignation count.
+const MAX_ASSIGNEES_PER_CELL = 3
+
 export default {
   name: 'episode-list',
 
@@ -603,6 +640,33 @@ export default {
     'metadata-changed'
   ],
 
+  // PERF-1: virtualized rows, same recipe as the other entity grids. The
+  // list is flat (no group headers), so the virtualizer windows directly
+  // over displayedEpisodes. `body` doubles as `this.$refs.body` for the
+  // mixin methods and as the virtualizer's scroll element.
+  setup(props) {
+    const body = ref(null)
+    const rowVirtualizer = useVirtualizer(
+      computed(() => ({
+        count: props.displayedEpisodes.length,
+        getScrollElement: () => body.value,
+        estimateSize: () => {
+          if (props.displaySettings.bigThumbnails) {
+            return ROW_HEIGHT_ESTIMATE_BIG_THUMBNAILS
+          }
+          if (props.displaySettings.contactSheetMode) {
+            return ROW_HEIGHT_ESTIMATE_CONTACT_SHEET
+          }
+          return ROW_HEIGHT_ESTIMATE
+        },
+        getItemKey: index => props.displayedEpisodes[index]?.id ?? index,
+        overscan: 10
+      }))
+    )
+
+    return { body, rowVirtualizer }
+  },
+
   data() {
     return {
       type: 'episode',
@@ -706,6 +770,85 @@ export default {
 
     localStorageStickKey() {
       return `stick-episodes-${this.currentProduction?.id}`
+    },
+
+    // PERF-1: virtualization plumbing (see the EditList pilot).
+    virtualRows() {
+      return this.rowVirtualizer.getVirtualItems()
+    },
+
+    totalRowsSize() {
+      return this.rowVirtualizer.getTotalSize()
+    },
+
+    topSpacerHeight() {
+      return this.virtualRows.length > 0 ? this.virtualRows[0].start : 0
+    },
+
+    bottomSpacerHeight() {
+      if (this.virtualRows.length === 0) return 0
+      const lastRow = this.virtualRows[this.virtualRows.length - 1]
+      return this.totalRowsSize - lastRow.end
+    },
+
+    // { episode, i } pairs for the rows tanstack currently renders, `i`
+    // being the row's real index in displayedEpisodes so every i-based
+    // computation (isSelected, refs, z-index) stays correct unchanged.
+    visibleRows() {
+      return this.virtualRows
+        .filter(
+          virtualRow => this.displayedEpisodes[virtualRow.index] !== undefined
+        )
+        .map(virtualRow => ({
+          episode: this.displayedEpisodes[virtualRow.index],
+          i: virtualRow.index
+        }))
+    },
+
+    maxAssigneesPerCell() {
+      return MAX_ASSIGNEES_PER_CELL
+    },
+
+    // Spans the spacer rows across every column currently in the header,
+    // so they don't leave a jagged one-column-wide row in the table.
+    totalColumnsCount() {
+      const showInfos = this.displaySettings.showInfos
+      let count = 1 // episode name column, always present
+      if (showInfos) {
+        count += this.stickedVisibleMetadataDescriptors.length
+        count += this.nonStickedVisibleMetadataDescriptors.length
+      }
+      if (!this.isLoading) {
+        count += this.stickedDisplayedValidationColumns.length
+        count += this.nonStickedDisplayedValidationColumns.length
+      }
+      if (!this.isCurrentUserClient && showInfos && this.isEpisodeDescription) {
+        count++
+      }
+      if (
+        !this.isCurrentUserClient &&
+        showInfos &&
+        this.isEpisodeTime &&
+        this.metadataDisplayHeaders.timeSpent
+      ) {
+        count++
+      }
+      if (
+        !this.isCurrentUserClient &&
+        showInfos &&
+        this.isEpisodeEstimation &&
+        this.metadataDisplayHeaders.estimation
+      ) {
+        count++
+      }
+      if (showInfos && this.metadataDisplayHeaders.status) {
+        count++
+      }
+      if (!this.isCurrentUserClient && showInfos && this.isEpisodeResolution) {
+        count++
+      }
+      count++ // actions column, always present
+      return count
     }
   },
 
@@ -768,6 +911,44 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+// Firefox scroll anchoring fights windowed updates: when the top spacer
+// row resizes it re-anchors the scroll position and produces micro-jumps
+// (standard TanStack Virtual mitigation). Scoped: only this virtualized
+// wrapper opts out, other datatables keep the default.
+.datatable-wrapper {
+  overflow-anchor: none;
+}
+
+// PERF-1: spacer rows standing in for the off-screen virtualized rows
+// above/below the rendered window. Qualified with .datatable-body so it
+// outranks shared.scss's `.data-list .datatable-body td` padding by
+// specificity, not by stylesheet injection order.
+.datatable-body .virtual-spacer-row td {
+  padding: 0;
+  border: none;
+}
+
+// With virtualization the DOM only holds a window of rows, so the global
+// `.datatable-row:nth-child(even)` zebra rules (App.vue) re-anchor on
+// whatever row happens to be rendered first and every stripe flips each
+// time the window shifts by one row. Stripe from the data index instead
+// (stripe-even/stripe-odd bound in the row's :class). Hover is redeclared
+// after the stripes so it keeps winning over them.
+tr.datatable-row.stripe-even,
+tr.datatable-row.stripe-even .datatable-row-header {
+  background-color: var(--background);
+}
+
+tr.datatable-row.stripe-odd,
+tr.datatable-row.stripe-odd .datatable-row-header {
+  background-color: var(--background-alt);
+}
+
+tr.datatable-row:hover,
+tr.datatable-row:hover .datatable-row-header {
+  background-color: var(--background-hover);
+}
+
 .dark {
   th .input-editor,
   td .select select,

From 224342396a76471572b85b1f4b8dddaa718e5889 Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Tue, 7 Jul 2026 09:50:27 +0200
Subject: [PATCH 14/14] [lists] Bind column widths that windowing let collapse

Live regression: the Ready For column rendered 81px wide instead of
180px. Under row virtualization, table auto-layout computes column
widths from the ~25 rendered rows only; `width`/`max-width` are just
preferences the algorithm may shrink, so columns whose real width used
to be defended by row content across the full list collapse. min-width
is the only binding constraint.

Audit of all five virtualized lists - every thead column checked for a
binding min-width anchored in an always-rendered cell:

Constrained by this commit:
- AssetList th/td.ready-for: min-width 180px added (had width/max-width
  180px only - the reported regression).
- AssetList and SequenceList resolution: the existing 110px floor was
  declared on td only, which stops binding when no row is in the
  window; the rule now covers th.resolution as well (thead is never
  virtualized). Same 110px value.

Verified already bound, no change needed:
- Metadata/descriptor columns (the pilot's known width-less
  td.metadata-descriptor): anchored by MetadataHeader's own
  `th.metadata-descriptor { min-width: 120px }` - the thead is outside
  the window, so the floor survives virtualization in all five lists.
- Validation columns: ValidationHeader's root th carries
  .validation-cell, so each list's scoped 150px min-width binds in the
  thead (plus ValidationHeader's own 120px floor); minimized columns
  have the 30px hidden-validation-cell floors.
- Name (110-200px), episode (80/100px), description (200px),
  time-spent/estimation (60/70px), status (120px, EpisodeList),
  frames/drawings (80px), framein/frameout (60px), fps (70px),
  max-retakes (80px), actions (160px): all already min-width-bound in
  the lists' scoped styles.

No table-layout: fixed - explicit column sizing is the ARCH-4
escalation, out of scope here.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/lists/AssetList.vue    | 8 ++++++++
 src/components/lists/SequenceList.vue | 4 ++++
 2 files changed, 12 insertions(+)

diff --git a/src/components/lists/AssetList.vue b/src/components/lists/AssetList.vue
index 91b9b1abe8..e17bbfe1ae 100644
--- a/src/components/lists/AssetList.vue
+++ b/src/components/lists/AssetList.vue
@@ -1435,6 +1435,10 @@ td.estimation {
   width: 60px;
 }
 
+// Anchored on the th too: with rows virtualized, table auto-layout only
+// sees the rendered window, so a td-only min-width stops binding when no
+// row is rendered; the thead always is.
+th.resolution,
 td.resolution {
   min-width: 110px;
   max-width: 110px;
@@ -1443,6 +1447,10 @@ td.resolution {
 
 th.ready-for,
 td.ready-for {
+  // min-width is the only binding constraint in table auto-layout: with
+  // rows virtualized, widths are computed from the rendered window only
+  // and `width` alone let the column collapse to 81px.
+  min-width: 180px;
   max-width: 180px;
   width: 180px;
   padding: 1px 5px;
diff --git a/src/components/lists/SequenceList.vue b/src/components/lists/SequenceList.vue
index ad5c989b46..fe0d9fa76f 100644
--- a/src/components/lists/SequenceList.vue
+++ b/src/components/lists/SequenceList.vue
@@ -969,6 +969,10 @@ thead .name.sequence-name {
   width: 70px;
 }
 
+// Anchored on the th too: with rows virtualized, table auto-layout only
+// sees the rendered window, so a td-only min-width stops binding when no
+// row is rendered; the thead always is.
+th.resolution,
 td.resolution {
   min-width: 110px;
   max-width: 110px;