diff --git a/client/dive-common/apispec.ts b/client/dive-common/apispec.ts
index 16d42c657..e6164e192 100644
--- a/client/dive-common/apispec.ts
+++ b/client/dive-common/apispec.ts
@@ -471,9 +471,15 @@ interface Api {
   deleteScoringResult?(datasetId: string, resultId: string): Promise<void>;
   /** Annotation sets, revisions or on-disk files a source on this dataset can point at. */
   listScoringSources?(datasetId: string): Promise<ScoringSourceOptions>;
-  /** Datasets that may be named as the other side of a comparison. */
+  /**
+   * Datasets that may be named as the other side of a comparison; also the
+   * dataset list the review page offers.
+   */
   listScoringDatasets?(): Promise<ScoringDatasetSummary[]>;
-  /** Open a platform dataset picker; returns null when the user cancels. */
+  /**
+   * Open a platform dataset picker; returns null when the user cancels.
+   * Shared by the scoring and review pages.
+   */
   pickScoringDataset?(excludeIds: string[]): Promise<ScoringDatasetSummary | null>;
   /** Save a text export where the user chooses; resolves false when they cancel. */
   saveScoringExport?(args: { filename: string; mime: string; content: string }): Promise<boolean>;
@@ -487,6 +493,12 @@ interface Api {
   ): Promise<boolean>;
 
   loadConfig(datasetId: string): Promise<DatasetConfig>;
+  /**
+   * loadConfig without the platform's viewer bookkeeping (desktop recents,
+   * web browse location), for pages that read many datasets at once such as
+   * Review. Callers fall back to loadConfig when absent.
+   */
+  peekConfig?(datasetId: string): Promise<DatasetConfig>;
   loadDetections(datasetId: string, revision?: number, set?: string): Promise<AnnotationSchemaList>;
   loadFrameMetadata(datasetId: string): Promise<FrameMetadataSourcesResponse>;
 
diff --git a/client/dive-common/components/Review/ReviewCell.vue b/client/dive-common/components/Review/ReviewCell.vue
new file mode 100644
index 000000000..17b0e2ac7
--- /dev/null
+++ b/client/dive-common/components/Review/ReviewCell.vue
@@ -0,0 +1,359 @@
+<script lang="ts">
+import {
+  computed, defineComponent, onBeforeUnmount, PropType, ref, watch,
+} from 'vue';
+import type { ChipTransform } from 'dive-common/review/chipRenderer';
+import type { ReviewFrameRef } from 'dive-common/review/types';
+import ReviewChip, { ChipView, ReviewChipGeometryEdit } from './ReviewChip.vue';
+import ReviewTypeField from './ReviewTypeField.vue';
+
+/** One chip of an entry: a track in one camera. */
+export interface ReviewCellView {
+  key: string;
+  src: string | null;
+  srcs: (string | null)[] | null;
+  transform: ChipTransform | null;
+  transforms: (ChipTransform | null)[] | null;
+  frames: ReviewFrameRef[];
+  failure: string | null;
+  frameCount: number;
+  /** Camera name, empty for single-camera entries. */
+  label: string;
+}
+
+export type ReviewCellGeometryEdit = ReviewChipGeometryEdit;
+
+/**
+ * One grid entry: the track's chips (one per camera it appears in, side by
+ * side) with the annotation's type editable underneath. Presentation-only;
+ * the page supplies the images and applies edits, so other item sources
+ * (e.g. search results) can reuse it with their own actions through the
+ * `actions` slot. Single-chip users may pass the chip props directly
+ * instead of `views`.
+ */
+export default defineComponent({
+  name: 'ReviewCell',
+  components: { ReviewChip, ReviewTypeField },
+  props: {
+    /** Chips of the entry, one per camera. Overrides the single-chip props. */
+    views: {
+      type: Array as PropType<ReviewCellView[] | null>,
+      default: null,
+    },
+    /** Primary chip data URL, null while loading (single-chip form). */
+    src: {
+      type: String as PropType<string | null>,
+      default: null,
+    },
+    /** Sampled track frames to cycle through; null slots are still loading. */
+    srcs: {
+      type: Array as PropType<(string | null)[] | null>,
+      default: null,
+    },
+    /** How the primary chip maps to the frame, once rendered. */
+    transform: {
+      type: Object as PropType<ChipTransform | null>,
+      default: null,
+    },
+    /** Per-slot transforms of the sampled frames. */
+    transforms: {
+      type: Array as PropType<(ChipTransform | null)[] | null>,
+      default: null,
+    },
+    /** The frames shown, primary first, with their boxes and geometry. */
+    frames: {
+      type: Array as PropType<ReviewFrameRef[]>,
+      default: () => [],
+    },
+    /** Why the chip could not be rendered, or null. */
+    failure: {
+      type: String as PropType<string | null>,
+      default: null,
+    },
+    /** Frames in the track, shown as a badge when animated. */
+    frameCount: {
+      type: Number,
+      default: 1,
+    },
+    animate: {
+      type: Boolean,
+      default: true,
+    },
+    cycleIntervalMs: {
+      type: Number,
+      default: 400,
+    },
+    /** Live type of the annotation. */
+    type: {
+      type: String,
+      default: '',
+    },
+    /** Confidence of the shown pair; null hides the badge. */
+    confidence: {
+      type: Number as PropType<number | null>,
+      default: null,
+    },
+    /** Types offered by the type field's dropdown. */
+    typeOptions: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
+    /** Accessible name for the entry (not shown as a tooltip). */
+    title: {
+      type: String,
+      default: '',
+    },
+    subtitle: {
+      type: String,
+      default: '',
+    },
+    /** Edited but not yet saved. */
+    pending: {
+      type: Boolean,
+      default: false,
+    },
+    editable: {
+      type: Boolean,
+      default: true,
+    },
+    /** Offer the delete action on the chips. */
+    deletable: {
+      type: Boolean,
+      default: true,
+    },
+    /** Attribute mode: what matched, shown in place of nothing. */
+    attributeText: {
+      type: String,
+      default: '',
+    },
+    /** Size factor for the footer text, 1 being the base size. */
+    scale: {
+      type: Number,
+      default: 1,
+    },
+    /** Draw polygons and head/tail points over the chips. */
+    showGeometry: {
+      type: Boolean,
+      default: true,
+    },
+    /** The annotation type's colour, used for boxes and editing handles. */
+    color: {
+      type: String,
+      default: '#00e5ff',
+    },
+  },
+  setup(props, { emit }) {
+    /** Chips currently in edit mode, to outline the whole entry. */
+    const editingCount = ref(0);
+
+    const viewList = computed<ReviewCellView[]>(() => props.views ?? [{
+      key: 'single',
+      src: props.src,
+      srcs: props.srcs,
+      transform: props.transform,
+      transforms: props.transforms,
+      frames: props.frames,
+      failure: props.failure,
+      frameCount: props.frameCount,
+      label: '',
+    }]);
+
+    // ---- shared cycling: every camera of an entry shows the same frame ----
+
+    const shared = computed(() => viewList.value.length > 1);
+    const sharedSlot = ref(0);
+    const sharedPaused = ref(false);
+    /** One zoom and pan for every camera of the entry. */
+    const sharedView = ref<ChipView>({ scale: 1, x: 0, y: 0 });
+    let timer: number | null = null;
+
+    const sequenceLength = computed(() => (
+      viewList.value.reduce((longest, view) => Math.max(longest, view.srcs?.length ?? 0), 0)
+    ));
+
+    /** Whether any camera has the frame for a slot, so the cycle never stalls on a gap. */
+    function slotLoaded(slot: number) {
+      return viewList.value.some((view) => Boolean(view.srcs?.[slot]));
+    }
+
+    function advanceShared(direction: 1 | -1 = 1) {
+      const length = sequenceLength.value;
+      if (length < 2) return;
+      for (let count = 1; count <= length; count += 1) {
+        const next = (sharedSlot.value + direction * count + length * count) % length;
+        if (slotLoaded(next)) {
+          sharedSlot.value = next;
+          return;
+        }
+      }
+    }
+
+    function syncSharedTimer() {
+      const shouldRun = shared.value && props.animate && sequenceLength.value > 1
+        && !sharedPaused.value && editingCount.value === 0;
+      if (shouldRun && timer === null) {
+        timer = window.setInterval(() => advanceShared(1), props.cycleIntervalMs);
+      } else if (!shouldRun && timer !== null) {
+        window.clearInterval(timer);
+        timer = null;
+      }
+    }
+    watch(
+      [shared, () => props.animate, sequenceLength, sharedPaused, editingCount, () => props.cycleIntervalMs],
+      () => {
+        if (timer !== null) {
+          window.clearInterval(timer);
+          timer = null;
+        }
+        syncSharedTimer();
+      },
+      { immediate: true },
+    );
+    onBeforeUnmount(() => {
+      if (timer !== null) window.clearInterval(timer);
+    });
+
+    function stepShared(direction: 1 | -1) {
+      sharedPaused.value = true;
+      advanceShared(direction);
+    }
+
+    function toggleSharedPaused() {
+      sharedPaused.value = !sharedPaused.value;
+    }
+
+    function commitType(next: string) {
+      if (next !== props.type) emit('assign', next);
+    }
+
+    return {
+      viewList,
+      editingCount,
+      commitType,
+      shared,
+      sharedSlot,
+      sharedPaused,
+      sharedView,
+      stepShared,
+      toggleSharedPaused,
+    };
+  },
+});
+</script>
+
+<template>
+  <div
+    class="review-cell"
+    :class="{ 'cell-pending': pending, 'cell-editing': editingCount > 0 }"
+    :style="{ '--cell-scale': scale }"
+  >
+    <div class="cell-views">
+      <ReviewChip
+        v-for="(view, index) in viewList"
+        :key="view.key"
+        :src="view.src"
+        :srcs="view.srcs"
+        :transform="view.transform"
+        :transforms="view.transforms"
+        :frames="view.frames"
+        :failure="view.failure"
+        :frame-count="view.frameCount"
+        :label="view.label"
+        :animate="animate"
+        :cycle-interval-ms="cycleIntervalMs"
+        :type="type"
+        :confidence="index === 0 ? confidence : null"
+        :title="title"
+        :pending="pending"
+        :editable="editable"
+        :deletable="deletable"
+        :show-geometry="showGeometry"
+        :color="color"
+        :controlled-slot="shared ? sharedSlot : null"
+        :controlled-paused="sharedPaused"
+        :controlled-view="shared ? sharedView : null"
+        @view-change="sharedView = $event"
+        @step="stepShared"
+        @toggle-paused="toggleSharedPaused"
+        @pause="sharedPaused = true"
+        @accept="$emit('accept')"
+        @delete="$emit('delete')"
+        @open="$emit('open', $event, index)"
+        @edit-geometry="$emit('edit-geometry', $event, index)"
+        @add-box="$emit('add-box', $event, index)"
+        @edit-start="editingCount += 1"
+        @edit-end="editingCount = Math.max(0, editingCount - 1)"
+      >
+        <template
+          v-if="$scopedSlots.actions"
+          #actions
+        >
+          <slot name="actions" />
+        </template>
+      </ReviewChip>
+    </div>
+    <div class="cell-footer">
+      <slot name="footer">
+        <ReviewTypeField
+          :value="type"
+          :options="typeOptions"
+          :disabled="!editable"
+          @commit="commitType"
+        />
+        <div
+          v-if="subtitle || attributeText"
+          class="grey--text cell-caption-line"
+          :title="attributeText || subtitle"
+        >
+          {{ attributeText || subtitle }}
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.review-cell {
+  --cell-scale: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+  border: 1px solid #3a3a3a;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #1e1e1e;
+
+  &.cell-pending {
+    border-color: #ffb300;
+  }
+
+  &.cell-editing {
+    border-color: #90caf9;
+  }
+}
+
+.cell-views {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 32px;
+  min-width: 0;
+  gap: 2px;
+  background: #101010;
+}
+
+.cell-footer {
+  flex: 0 0 auto;
+  padding: calc(3px * var(--cell-scale)) calc(4px * var(--cell-scale));
+  min-width: 0;
+}
+
+.cell-caption-line {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: calc(11.5px * var(--cell-scale));
+  line-height: 1.3;
+  margin-top: calc(2px * var(--cell-scale));
+}
+</style>
diff --git a/client/dive-common/components/Review/ReviewChip.vue b/client/dive-common/components/Review/ReviewChip.vue
new file mode 100644
index 000000000..2c58a8462
--- /dev/null
+++ b/client/dive-common/components/Review/ReviewChip.vue
@@ -0,0 +1,1292 @@
+<script lang="ts">
+import {
+  computed, defineComponent, onBeforeUnmount, PropType, ref, watch,
+} from 'vue';
+import type { RectBounds } from 'vue-media-annotator/utils';
+import { ChipTransform, toChipPoint, toImagePoint } from 'dive-common/review/chipRenderer';
+import type { ReviewFrameRef, ReviewPolygon } from 'dive-common/review/types';
+
+/** Geometry of one frame while it is being edited, in image coordinates. */
+interface GeometryDraft {
+  bounds: RectBounds;
+  polygons: ReviewPolygon[];
+  head: [number, number] | null;
+  tail: [number, number] | null;
+}
+
+/** What is emitted when an edit is applied. */
+/** Zoom about the chip's origin plus a pan, in chip pixels. */
+export interface ChipView {
+  scale: number;
+  x: number;
+  y: number;
+}
+
+export interface ReviewChipGeometryEdit {
+  /** Sequence slot edited (0 is the primary frame). */
+  slot: number;
+  frame: number;
+  bounds: RectBounds;
+  polygons: ReviewPolygon[];
+  head: [number, number] | null;
+  tail: [number, number] | null;
+}
+
+type BoxHandle = 'move' | 'n' | 's' | 'e' | 'w' | 'nw' | 'ne' | 'sw' | 'se';
+
+type DragTarget =
+  | { kind: 'box'; handle: BoxHandle }
+  | { kind: 'vertex'; polygon: number; vertex: number }
+  | { kind: 'point'; key: 'head' | 'tail' };
+
+const BOX_HANDLES: { handle: BoxHandle; cursor: string }[] = [
+  { handle: 'nw', cursor: 'nwse-resize' },
+  { handle: 'n', cursor: 'ns-resize' },
+  { handle: 'ne', cursor: 'nesw-resize' },
+  { handle: 'e', cursor: 'ew-resize' },
+  { handle: 'se', cursor: 'nwse-resize' },
+  { handle: 's', cursor: 'ns-resize' },
+  { handle: 'sw', cursor: 'nesw-resize' },
+  { handle: 'w', cursor: 'ew-resize' },
+];
+
+/**
+ * One cropped chip of a grid entry, cycling through a track's sampled
+ * frames once they load. Polygons and head/tail points are drawn over it,
+ * and a right click opens the frame's box, polygon vertices and points for
+ * dragging in place. The wheel zooms and dragging pans at any time. A cell
+ * holds one chip per camera the track appears in.
+ */
+export default defineComponent({
+  name: 'ReviewChip',
+  props: {
+    /** Primary chip data URL, null while loading. */
+    src: {
+      type: String as PropType<string | null>,
+      default: null,
+    },
+    /** Sampled track frames to cycle through; null slots are still loading. */
+    srcs: {
+      type: Array as PropType<(string | null)[] | null>,
+      default: null,
+    },
+    /** How the primary chip maps to the frame, once rendered. */
+    transform: {
+      type: Object as PropType<ChipTransform | null>,
+      default: null,
+    },
+    /** Per-slot transforms of the sampled frames. */
+    transforms: {
+      type: Array as PropType<(ChipTransform | null)[] | null>,
+      default: null,
+    },
+    /** The frames shown, primary first, with their boxes and geometry. */
+    frames: {
+      type: Array as PropType<ReviewFrameRef[]>,
+      default: () => [],
+    },
+    animate: {
+      type: Boolean,
+      default: true,
+    },
+    cycleIntervalMs: {
+      type: Number,
+      default: 400,
+    },
+    /** Why the chip could not be rendered, or null. */
+    failure: {
+      type: String as PropType<string | null>,
+      default: null,
+    },
+    /** Live type of the annotation. */
+    type: {
+      type: String,
+      default: '',
+    },
+    /** Confidence of the shown pair; null hides the badge. */
+    confidence: {
+      type: Number as PropType<number | null>,
+      default: null,
+    },
+    /** Accessible name for the entry (not shown as a tooltip). */
+    title: {
+      type: String,
+      default: '',
+    },
+    /** Edited but not yet saved. */
+    pending: {
+      type: Boolean,
+      default: false,
+    },
+    /** Frames in the track, shown as a badge when animated. */
+    frameCount: {
+      type: Number,
+      default: 1,
+    },
+    editable: {
+      type: Boolean,
+      default: true,
+    },
+    /** Camera name shown on the chip when an entry spans several cameras. */
+    label: {
+      type: String,
+      default: '',
+    },
+    /** Offer a delete action next to the accept action. */
+    deletable: {
+      type: Boolean,
+      default: true,
+    },
+    /**
+     * Sequence slot chosen by the cell, so the cameras of an entry stay on
+     * the same frame; null lets the chip cycle on its own.
+     */
+    controlledSlot: {
+      type: Number as PropType<number | null>,
+      default: null,
+    },
+    controlledPaused: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * Zoom and pan chosen by the cell, so the cameras of an entry zoom
+     * together; null lets the chip keep its own.
+     */
+    controlledView: {
+      type: Object as PropType<ChipView | null>,
+      default: null,
+    },
+    /** Draw polygons and head/tail points over the chip. */
+    showGeometry: {
+      type: Boolean,
+      default: true,
+    },
+    /** The annotation type's colour, used for the editing handles like the annotator. */
+    color: {
+      type: String,
+      default: '#00e5ff',
+    },
+  },
+  setup(props, { emit }) {
+    const cycleIndex = ref(0);
+    const overlay = ref<SVGSVGElement | null>(null);
+    const editing = ref(false);
+    const draft = ref<GeometryDraft | null>(null);
+    /** Cycling stopped by the user stepping through frames. */
+    const paused = ref(false);
+    /** Handle being dragged, drawn highlighted like the annotator's selected handle. */
+    const activeHandle = ref<string | null>(null);
+    /** The chip's own zoom and pan, used unless the cell controls the view. */
+    const ownView = ref<ChipView>({ scale: 1, x: 0, y: 0 });
+    const view = computed<ChipView>(() => props.controlledView ?? ownView.value);
+    const wrap = ref<HTMLElement | null>(null);
+    let pan: {
+      startX: number; startY: number; originX: number; originY: number; pointerId: number; capture: Element | null;
+    } | null = null;
+    let timer: number | null = null;
+    let drag: { target: DragTarget; startImage: [number, number]; startDraft: GeometryDraft } | null = null;
+
+    const hasSequence = computed(() => Boolean(props.srcs && props.srcs.length > 1));
+    const controlled = computed(() => props.controlledSlot !== null);
+
+    watch(() => props.controlledSlot, (slot) => {
+      if (slot !== null) cycleIndex.value = Math.max(0, slot);
+    }, { immediate: true });
+
+    /** Sequence slot on screen; 0 while only the primary chip is available. */
+    const currentSlot = computed(() => (hasSequence.value && props.animate ? cycleIndex.value : 0));
+
+    const displaySrc = computed(() => {
+      if (hasSequence.value && props.animate) {
+        return props.srcs?.[cycleIndex.value] ?? props.src;
+      }
+      return props.src;
+    });
+
+    /** Transform of the chip on screen (the primary's when a slot is still loading). */
+    const displayTransform = computed<ChipTransform | null>(() => {
+      if (hasSequence.value && props.animate) {
+        const slotSrc = props.srcs?.[cycleIndex.value];
+        if (slotSrc) return props.transforms?.[cycleIndex.value] ?? null;
+      }
+      return props.transform;
+    });
+
+    const currentFrame = computed<ReviewFrameRef | null>(() => (
+      props.frames[currentSlot.value] ?? props.frames[0] ?? null
+    ));
+
+    /** This camera has no detection on the frame shown; only an interpolated crop. */
+    const missing = computed(() => Boolean(currentFrame.value?.missing));
+
+    /** Which sampled frame is showing, for the badge. */
+    const frameLabel = computed(() => {
+      if (!hasSequence.value || !props.srcs) return '';
+      return `${cycleIndex.value + 1}/${props.srcs.length}`;
+    });
+
+    function advance() {
+      const srcs = props.srcs ?? [];
+      for (let step = 1; step <= srcs.length; step += 1) {
+        const next = (cycleIndex.value + step) % srcs.length;
+        if (srcs[next]) {
+          cycleIndex.value = next;
+          return;
+        }
+      }
+    }
+
+    function syncTimer() {
+      const shouldRun = props.animate && hasSequence.value && !editing.value && !paused.value
+        && !controlled.value;
+      if (shouldRun && timer === null) {
+        timer = window.setInterval(advance, props.cycleIntervalMs);
+      } else if (!shouldRun && timer !== null) {
+        window.clearInterval(timer);
+        timer = null;
+        if (!editing.value && !paused.value) cycleIndex.value = 0;
+      }
+    }
+    watch([() => props.animate, () => props.srcs, () => props.cycleIntervalMs, editing, paused], () => {
+      if (timer !== null) {
+        window.clearInterval(timer);
+        timer = null;
+      }
+      syncTimer();
+    }, { immediate: true });
+    onBeforeUnmount(() => {
+      if (timer !== null) window.clearInterval(timer);
+    });
+
+    /** Step to the previous/next loaded frame by hand, pausing the cycling there. */
+    function step(direction: 1 | -1) {
+      if (controlled.value) {
+        emit('step', direction);
+        return;
+      }
+      const srcs = props.srcs ?? [];
+      if (srcs.length < 2) return;
+      paused.value = true;
+      for (let count = 1; count <= srcs.length; count += 1) {
+        const next = (cycleIndex.value + direction * count + srcs.length * count) % srcs.length;
+        if (srcs[next]) {
+          cycleIndex.value = next;
+          return;
+        }
+      }
+    }
+
+    function togglePaused() {
+      if (controlled.value) {
+        emit('toggle-paused');
+        return;
+      }
+      paused.value = !paused.value;
+    }
+
+    const shownPaused = computed(() => (controlled.value ? props.controlledPaused : paused.value));
+
+    const confidenceText = computed(() => (
+      props.confidence === null ? '' : `${Math.round(props.confidence * 100)}%`
+    ));
+
+    // ---- overlay geometry, in chip pixels ---------------------------------
+
+    /** Geometry drawn: the draft while editing, else the frame's own. */
+    const shownGeometry = computed<GeometryDraft | null>(() => {
+      if (editing.value && draft.value) return draft.value;
+      const frame = currentFrame.value;
+      if (!frame) return null;
+      return {
+        bounds: frame.bounds,
+        polygons: frame.polygons ?? [],
+        head: frame.head ?? null,
+        tail: frame.tail ?? null,
+      };
+    });
+
+    /** The box is always drawn over the chip, so edits show without re-cropping. */
+    const overlayVisible = computed(() => (
+      Boolean(displayTransform.value) && Boolean(shownGeometry.value)
+    ));
+
+    const viewStyle = computed(() => ({
+      transform: `translate(${view.value.x}px, ${view.value.y}px) scale(${view.value.scale})`,
+      transformOrigin: '0 0',
+    }));
+
+    const viewBox = computed(() => {
+      const t = displayTransform.value;
+      return t ? `0 0 ${t.width} ${t.height}` : '0 0 1 1';
+    });
+
+    function chip(point: [number, number]): [number, number] {
+      const t = displayTransform.value;
+      return t ? toChipPoint(t, point[0], point[1]) : point;
+    }
+
+    const polygonPoints = computed(() => (shownGeometry.value?.polygons ?? []).map(
+      (polygon) => polygon.map((p) => chip(p).map((v) => v.toFixed(1)).join(',')).join(' '),
+    ));
+
+    const polygonVertices = computed(() => (shownGeometry.value?.polygons ?? []).map(
+      (polygon) => polygon.map((p) => chip(p)),
+    ));
+
+    const headPoint = computed(() => (shownGeometry.value?.head ? chip(shownGeometry.value.head) : null));
+    const tailPoint = computed(() => (shownGeometry.value?.tail ? chip(shownGeometry.value.tail) : null));
+
+    const boxRect = computed(() => {
+      const g = shownGeometry.value;
+      if (!g) return null;
+      const [x1, y1, x2, y2] = g.bounds;
+      const a = chip([Math.min(x1, x2), Math.min(y1, y2)]);
+      const b = chip([Math.max(x1, x2), Math.max(y1, y2)]);
+      return {
+        x: a[0], y: a[1], width: Math.max(0, b[0] - a[0]), height: Math.max(0, b[1] - a[1]),
+      };
+    });
+
+    /**
+     * Stroke and handle sizes in chip pixels, so they look the same at any
+     * chip resolution and stay the same on screen as the view zooms.
+     */
+    const unit = computed(() => {
+      const t = displayTransform.value;
+      const shown = t ? Math.max(t.width, t.height) : 256;
+      return Math.max(1, shown / 180) / view.value.scale;
+    });
+
+    /**
+     * Box handles as the annotator draws them: circles on the corners
+     * (vertex handles) and smaller ones on the edge midpoints.
+     */
+    const boxHandles = computed(() => {
+      const r = boxRect.value;
+      if (!r) return [];
+      const cx = r.x + r.width / 2;
+      const cy = r.y + r.height / 2;
+      const at: Record<BoxHandle, [number, number]> = {
+        move: [cx, cy],
+        nw: [r.x, r.y],
+        n: [cx, r.y],
+        ne: [r.x + r.width, r.y],
+        e: [r.x + r.width, cy],
+        se: [r.x + r.width, r.y + r.height],
+        s: [cx, r.y + r.height],
+        sw: [r.x, r.y + r.height],
+        w: [r.x, cy],
+      };
+      return BOX_HANDLES.map(({ handle, cursor }) => ({
+        handle,
+        cursor,
+        x: at[handle][0],
+        y: at[handle][1],
+        radius: unit.value * (handle.length === 2 ? 3 : 2),
+      }));
+    });
+
+    function handleFill(id: string) {
+      return activeHandle.value === id ? '#ff0000' : props.color;
+    }
+
+    function handleOpacity(id: string) {
+      return activeHandle.value === id ? 1 : 0.25;
+    }
+
+    // ---- editing --------------------------------------------------------------
+
+    function cloneDraft(g: GeometryDraft): GeometryDraft {
+      return {
+        bounds: [...g.bounds] as RectBounds,
+        polygons: g.polygons.map((polygon) => polygon.map((p) => [p[0], p[1]] as [number, number])),
+        head: g.head ? [g.head[0], g.head[1]] : null,
+        tail: g.tail ? [g.tail[0], g.tail[1]] : null,
+      };
+    }
+
+    /** Turn the interpolated position into a real box the user can then adjust. */
+    function addBox() {
+      const frame = currentFrame.value;
+      if (!props.editable || !frame || !frame.missing) return;
+      emit('add-box', { frame: frame.frame, bounds: frame.bounds });
+    }
+
+    function beginEdit(event: MouseEvent) {
+      event.preventDefault();
+      if (!props.editable || !displayTransform.value || !shownGeometry.value || editing.value) return;
+      if (missing.value) {
+        addBox();
+        return;
+      }
+      draft.value = cloneDraft(shownGeometry.value);
+      editing.value = true;
+      // Editing pins the frame; cycling stays paused afterwards until resumed.
+      paused.value = true;
+      if (controlled.value) emit('pause');
+      emit('edit-start');
+      requestAnimationFrame(() => overlay.value?.focus());
+    }
+
+    // ---- zoom and pan ----------------------------------------------------
+
+    const MIN_ZOOM = 1;
+    const MAX_ZOOM = 16;
+
+    function setView(next: ChipView) {
+      if (props.controlledView) emit('view-change', next);
+      else ownView.value = next;
+    }
+
+    /** Wheel zooms about the cursor, like the annotator's map, whether editing or not. */
+    function onWheel(event: WheelEvent) {
+      if (!wrap.value || !displaySrc.value) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const rect = wrap.value.getBoundingClientRect();
+      const px = event.clientX - rect.left;
+      const py = event.clientY - rect.top;
+      const current = view.value;
+      const next = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, current.scale * Math.exp(-event.deltaY * 0.0015)));
+      if (next === current.scale) return;
+      if (next <= MIN_ZOOM) {
+        setView({ scale: 1, x: 0, y: 0 });
+        return;
+      }
+      const ratio = next / current.scale;
+      setView({
+        scale: next,
+        x: px - (px - current.x) * ratio,
+        y: py - (py - current.y) * ratio,
+      });
+    }
+
+    /** Drag on the zoomed image (empty overlay space while editing) pans the view. */
+    function startPan(event: PointerEvent) {
+      // Left button on the image, or the middle button anywhere.
+      if ((event.button !== 0 && event.button !== 1) || view.value.scale <= MIN_ZOOM) return;
+      if (event.button === 1) event.preventDefault();
+      const capture = event.currentTarget as Element | null;
+      pan = {
+        startX: event.clientX,
+        startY: event.clientY,
+        originX: view.value.x,
+        originY: view.value.y,
+        pointerId: event.pointerId,
+        capture,
+      };
+      capture?.setPointerCapture(event.pointerId);
+    }
+
+    function onPanMove(event: PointerEvent) {
+      if (!pan) return;
+      setView({
+        scale: view.value.scale,
+        x: pan.originX + (event.clientX - pan.startX),
+        y: pan.originY + (event.clientY - pan.startY),
+      });
+    }
+
+    function endPan(event: PointerEvent) {
+      if (!pan) return;
+      const { capture } = pan;
+      pan = null;
+      try {
+        capture?.releasePointerCapture(event.pointerId);
+      } catch {
+        // Capture may already be gone.
+      }
+    }
+
+    /**
+     * Outside editing there is no overlay, so the wrap pans the image itself.
+     * Only the image starts a pan, so the action buttons keep their clicks.
+     */
+    function onWrapPointerDown(event: PointerEvent) {
+      if (editing.value) return;
+      const target = event.target as Element | null;
+      if (event.button === 0 && !target?.classList.contains('cell-image')) return;
+      startPan(event);
+    }
+
+    /** The middle button pans; keep the browser's autoscroll out of it. */
+    function onWrapMouseDown(event: MouseEvent) {
+      if (event.button === 1) event.preventDefault();
+    }
+
+    function onWrapPointerMove(event: PointerEvent) {
+      if (!editing.value) onPanMove(event);
+    }
+
+    function onWrapPointerUp(event: PointerEvent) {
+      if (!editing.value) endPan(event);
+    }
+
+    function cancelEdit() {
+      editing.value = false;
+      draft.value = null;
+      drag = null;
+      emit('edit-end');
+    }
+
+    function applyEdit() {
+      const frame = currentFrame.value;
+      const original: GeometryDraft | null = frame ? {
+        bounds: frame.bounds,
+        polygons: frame.polygons ?? [],
+        head: frame.head ?? null,
+        tail: frame.tail ?? null,
+      } : null;
+      const changed = draft.value && original
+        && JSON.stringify(draft.value) !== JSON.stringify(original);
+      if (editing.value && draft.value && frame && changed) {
+        const edit: ReviewChipGeometryEdit = {
+          slot: currentSlot.value,
+          frame: frame.frame,
+          bounds: draft.value.bounds,
+          polygons: draft.value.polygons,
+          head: draft.value.head,
+          tail: draft.value.tail,
+        };
+        emit('edit-geometry', edit);
+      }
+      cancelEdit();
+    }
+
+    function imagePointFromEvent(event: PointerEvent): [number, number] | null {
+      const svg = overlay.value;
+      const t = displayTransform.value;
+      if (!svg || !t) return null;
+      const matrix = svg.getScreenCTM();
+      if (!matrix) return null;
+      const point = new DOMPoint(event.clientX, event.clientY).matrixTransform(matrix.inverse());
+      return toImagePoint(t, point.x, point.y);
+    }
+
+    function handleId(target: DragTarget): string {
+      if (target.kind === 'box') return `box-${target.handle}`;
+      if (target.kind === 'vertex') return `v-${target.polygon}-${target.vertex}`;
+      return target.key;
+    }
+
+    function startDrag(target: DragTarget, event: PointerEvent) {
+      if (!editing.value || !draft.value || event.button !== 0) return;
+      const start = imagePointFromEvent(event);
+      if (!start) return;
+      event.preventDefault();
+      event.stopPropagation();
+      drag = { target, startImage: start, startDraft: cloneDraft(draft.value) };
+      activeHandle.value = handleId(target);
+      overlay.value?.setPointerCapture(event.pointerId);
+    }
+
+    function moveBox(handle: BoxHandle, from: RectBounds, dx: number, dy: number): RectBounds {
+      let [x1, y1, x2, y2] = from;
+      if (handle === 'move') {
+        return [x1 + dx, y1 + dy, x2 + dx, y2 + dy];
+      }
+      if (handle.includes('w')) x1 += dx;
+      if (handle.includes('e')) x2 += dx;
+      if (handle.includes('n')) y1 += dy;
+      if (handle.includes('s')) y2 += dy;
+      return [Math.min(x1, x2), Math.min(y1, y2), Math.max(x1, x2), Math.max(y1, y2)];
+    }
+
+    function onPointerMove(event: PointerEvent) {
+      if (pan) {
+        onPanMove(event);
+        return;
+      }
+      if (!drag || !draft.value) return;
+      const current = imagePointFromEvent(event);
+      if (!current) return;
+      const dx = current[0] - drag.startImage[0];
+      const dy = current[1] - drag.startImage[1];
+      const { target, startDraft } = drag;
+      if (target.kind === 'box') {
+        draft.value.bounds = moveBox(target.handle, startDraft.bounds, dx, dy);
+      } else if (target.kind === 'vertex') {
+        const origin = startDraft.polygons[target.polygon]?.[target.vertex];
+        if (origin) {
+          // Replace the arrays: index assignment is invisible to Vue 2.
+          const polygons = startDraft.polygons.map((polygon) => polygon.map((p) => [p[0], p[1]] as [number, number]));
+          polygons[target.polygon][target.vertex] = [origin[0] + dx, origin[1] + dy];
+          draft.value.polygons = polygons;
+        }
+      } else {
+        const origin = startDraft[target.key];
+        if (origin) draft.value[target.key] = [origin[0] + dx, origin[1] + dy];
+      }
+    }
+
+    function endDrag(event: PointerEvent) {
+      if (pan) {
+        endPan(event);
+        return;
+      }
+      if (!drag) return;
+      drag = null;
+      activeHandle.value = null;
+      try {
+        overlay.value?.releasePointerCapture(event.pointerId);
+      } catch {
+        // Capture may already be gone.
+      }
+    }
+
+    function onOverlayKeydown(event: KeyboardEvent) {
+      if (!editing.value) return;
+      if (event.key === 'Escape') {
+        cancelEdit();
+      } else if (event.key === 'Enter') {
+        applyEdit();
+      } else {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+    /** Double click opens the viewer; a single click is left alone so edits are not lost to a slip. */
+    function onImageDoubleClick() {
+      if (editing.value) return;
+      emit('open', currentFrame.value?.frame);
+    }
+
+    /** Right click: start editing, or, while editing, lock the changes in like the annotator. */
+    function onContextMenu(event: MouseEvent) {
+      event.preventDefault();
+      if (editing.value) {
+        applyEdit();
+      } else {
+        beginEdit(event);
+      }
+    }
+
+    return {
+      displaySrc,
+      hasSequence,
+      frameLabel,
+      confidenceText,
+      overlay,
+      overlayVisible,
+      viewBox,
+      polygonPoints,
+      polygonVertices,
+      headPoint,
+      tailPoint,
+      boxRect,
+      boxHandles,
+      unit,
+      editing,
+      beginEdit,
+      cancelEdit,
+      applyEdit,
+      startDrag,
+      onPointerMove,
+      endDrag,
+      onOverlayKeydown,
+      onImageDoubleClick,
+      onContextMenu,
+      currentFrame,
+      paused: shownPaused,
+      step,
+      togglePaused,
+      handleFill,
+      handleOpacity,
+      activeHandle,
+      wrap,
+      viewStyle,
+      onWheel,
+      startPan,
+      zoomed: computed(() => view.value.scale > 1),
+      onWrapPointerDown,
+      onWrapMouseDown,
+      onWrapPointerMove,
+      onWrapPointerUp,
+      missing,
+      addBox,
+    };
+  },
+});
+</script>
+
+<template>
+  <div
+    ref="wrap"
+    class="cell-image-wrap"
+    :class="{ 'chip-editing': editing }"
+    :aria-label="title"
+    @dblclick="onImageDoubleClick"
+    @contextmenu="onContextMenu"
+    @wheel="onWheel"
+    @mousedown="onWrapMouseDown"
+    @pointerdown="onWrapPointerDown"
+    @pointermove="onWrapPointerMove"
+    @pointerup="onWrapPointerUp"
+    @pointercancel="onWrapPointerUp"
+  >
+    <img
+      v-if="displaySrc"
+      :src="displaySrc"
+      class="cell-image"
+      :class="{ 'cell-image-zoomed': zoomed }"
+      :style="viewStyle"
+      draggable="false"
+    >
+    <div
+      v-else-if="failure"
+      class="cell-image cell-placeholder d-flex flex-column align-center justify-center"
+      :title="failure"
+    >
+      <v-icon color="grey darken-1">
+        mdi-image-off-outline
+      </v-icon>
+      <span class="text-caption grey--text text-truncate px-2 failure-text">{{ failure }}</span>
+    </div>
+    <div
+      v-else
+      class="cell-image cell-placeholder d-flex align-center justify-center"
+    >
+      <v-progress-circular
+        indeterminate
+        size="20"
+        width="2"
+        color="grey"
+      />
+    </div>
+    <svg
+      v-if="displaySrc && overlayVisible"
+      ref="overlay"
+      class="cell-image cell-overlay"
+      :class="{ 'overlay-editing': editing }"
+      :viewBox="viewBox"
+      :style="viewStyle"
+      preserveAspectRatio="xMidYMid meet"
+      tabindex="-1"
+      @keydown="onOverlayKeydown"
+      @pointerdown="startPan"
+      @pointermove="onPointerMove"
+      @pointerup="endDrag"
+      @pointercancel="endDrag"
+    >
+      <rect
+        v-if="!editing && boxRect && !missing"
+        :x="boxRect.x"
+        :y="boxRect.y"
+        :width="boxRect.width"
+        :height="boxRect.height"
+        class="overlay-box-static"
+        :stroke="color"
+        :stroke-width="unit * 1.5"
+      />
+      <polygon
+        v-for="(points, index) in polygonPoints"
+        :key="`poly-${index}`"
+        :points="points"
+        class="overlay-polygon"
+        :stroke-width="unit"
+      />
+      <line
+        v-if="headPoint && tailPoint"
+        :x1="headPoint[0]"
+        :y1="headPoint[1]"
+        :x2="tailPoint[0]"
+        :y2="tailPoint[1]"
+        class="overlay-headtail-line"
+        :stroke-width="unit"
+      />
+      <template v-if="editing && boxRect">
+        <rect
+          :x="boxRect.x"
+          :y="boxRect.y"
+          :width="boxRect.width"
+          :height="boxRect.height"
+          class="overlay-box"
+          :stroke="color"
+          :stroke-width="unit * 1.5"
+          @pointerdown="startDrag({ kind: 'box', handle: 'move' }, $event)"
+        />
+        <circle
+          v-for="handle in boxHandles"
+          :key="handle.handle"
+          :cx="handle.x"
+          :cy="handle.y"
+          :r="handle.radius"
+          class="overlay-handle"
+          :style="{ cursor: handle.cursor }"
+          :fill="handleFill(`box-${handle.handle}`)"
+          :fill-opacity="handleOpacity(`box-${handle.handle}`)"
+          :stroke="handleFill(`box-${handle.handle}`)"
+          :stroke-width="unit * 0.6"
+          @pointerdown="startDrag({ kind: 'box', handle: handle.handle }, $event)"
+        />
+        <template v-for="(vertices, polygonIndex) in polygonVertices">
+          <circle
+            v-for="(vertex, vertexIndex) in vertices"
+            :key="`v-${polygonIndex}-${vertexIndex}`"
+            :cx="vertex[0]"
+            :cy="vertex[1]"
+            :r="unit * 3"
+            class="overlay-vertex"
+            :fill="handleFill(`v-${polygonIndex}-${vertexIndex}`)"
+            :fill-opacity="handleOpacity(`v-${polygonIndex}-${vertexIndex}`)"
+            :stroke="handleFill(`v-${polygonIndex}-${vertexIndex}`)"
+            :stroke-width="unit * 0.6"
+            @pointerdown="startDrag({ kind: 'vertex', polygon: polygonIndex, vertex: vertexIndex }, $event)"
+          />
+        </template>
+      </template>
+      <circle
+        v-if="headPoint"
+        :cx="headPoint[0]"
+        :cy="headPoint[1]"
+        :r="unit * (editing ? 3.5 : 2.5)"
+        class="overlay-head"
+        :stroke-width="unit"
+        @pointerdown="startDrag({ kind: 'point', key: 'head' }, $event)"
+      />
+      <circle
+        v-if="tailPoint"
+        :cx="tailPoint[0]"
+        :cy="tailPoint[1]"
+        :r="unit * (editing ? 3.5 : 2.5)"
+        class="overlay-tail"
+        :stroke-width="unit"
+        @pointerdown="startDrag({ kind: 'point', key: 'tail' }, $event)"
+      />
+    </svg>
+    <div
+      v-if="(confidenceText || label || missing) && !editing"
+      class="cell-badge cell-confidence text-caption"
+    >
+      <span
+        v-if="label"
+        class="chip-label"
+      >{{ label }}</span>{{ confidenceText }}<span
+        v-if="missing"
+        class="chip-missing"
+      >no box</span>
+    </div>
+    <div
+      v-if="hasSequence && !editing"
+      class="cell-badge cell-sequence cell-sequence-controls text-caption"
+      :class="{ 'cell-sequence-bottom': label }"
+      @click.stop
+      @dblclick.stop
+      @contextmenu.stop.prevent
+    >
+      <button
+        type="button"
+        class="sequence-button"
+        title="Previous frame (pauses cycling)"
+        @click="step(-1)"
+      >
+        <v-icon x-small>
+          mdi-chevron-left
+        </v-icon>
+      </button>
+      <button
+        type="button"
+        class="sequence-button"
+        :title="paused ? 'Resume cycling' : 'Pause cycling'"
+        @click="togglePaused"
+      >
+        <v-icon x-small>
+          {{ paused ? 'mdi-play' : 'mdi-pause' }}
+        </v-icon>
+      </button>
+      <span class="sequence-label">{{ frameLabel }}</span>
+      <button
+        type="button"
+        class="sequence-button"
+        title="Next frame (pauses cycling)"
+        @click="step(1)"
+      >
+        <v-icon x-small>
+          mdi-chevron-right
+        </v-icon>
+      </button>
+    </div>
+    <div
+      v-else-if="frameCount > 1 && !editing"
+      class="cell-badge cell-sequence text-caption"
+      title="Loading track frames"
+    >
+      <v-icon
+        x-small
+        color="grey lighten-1"
+      >
+        mdi-filmstrip
+      </v-icon>
+    </div>
+    <div
+      v-if="pending && !editing && !label"
+      class="cell-badge cell-pending-badge text-caption"
+      title="Changed; not saved yet"
+    >
+      <v-icon
+        x-small
+        color="amber"
+      >
+        mdi-pencil
+      </v-icon>
+    </div>
+    <div
+      v-if="editing"
+      class="cell-edit-bar"
+      @click.stop
+      @contextmenu.stop.prevent
+    >
+      <span class="text-caption edit-hint">
+        Frame {{ currentFrame ? currentFrame.frame : '' }}: drag to adjust, wheel to zoom, middle drag to pan, right click to keep
+      </span>
+      <v-btn
+        x-small
+        depressed
+        color="primary"
+        class="ml-1"
+        title="Apply (Enter)"
+        @click="applyEdit"
+      >
+        Apply
+      </v-btn>
+      <v-btn
+        x-small
+        text
+        class="ml-1"
+        title="Cancel (Esc)"
+        @click="cancelEdit"
+      >
+        Cancel
+      </v-btn>
+    </div>
+    <div
+      v-if="!editing"
+      class="cell-actions"
+      @click.stop
+    >
+      <slot name="actions">
+        <v-tooltip
+          bottom
+          open-delay="600"
+        >
+          <template #activator="{ on }">
+            <v-btn
+              icon
+              small
+              class="cell-action"
+              :disabled="!editable || !type"
+              v-on="on"
+              @click.stop="$emit('accept')"
+            >
+              <v-icon
+                :color="confidence !== null && confidence >= 1 ? 'success' : 'grey lighten-1'"
+              >
+                mdi-check-circle-outline
+              </v-icon>
+            </v-btn>
+          </template>
+          <span>Mark this type as correct (confidence 1)</span>
+        </v-tooltip>
+        <v-tooltip
+          v-if="deletable"
+          bottom
+          open-delay="600"
+        >
+          <template #activator="{ on }">
+            <v-btn
+              icon
+              small
+              class="cell-action"
+              :disabled="!editable"
+              v-on="on"
+              @click.stop="$emit('delete')"
+            >
+              <v-icon color="red lighten-1">
+                mdi-close-circle-outline
+              </v-icon>
+            </v-btn>
+          </template>
+          <span>Delete this annotation</span>
+        </v-tooltip>
+        <v-tooltip
+          v-if="missing"
+          bottom
+          open-delay="600"
+        >
+          <template #activator="{ on }">
+            <v-btn
+              icon
+              small
+              class="cell-action"
+              :disabled="!editable"
+              v-on="on"
+              @click.stop="addBox"
+            >
+              <v-icon color="grey lighten-1">
+                mdi-vector-square-plus
+              </v-icon>
+            </v-btn>
+          </template>
+          <span>No detection on this frame here: add a box at the interpolated position</span>
+        </v-tooltip>
+        <v-tooltip
+          v-else
+          bottom
+          open-delay="600"
+        >
+          <template #activator="{ on }">
+            <v-btn
+              icon
+              small
+              class="cell-action"
+              :disabled="!editable"
+              v-on="on"
+              @click.stop="beginEdit($event)"
+            >
+              <v-icon color="grey lighten-1">
+                mdi-vector-square-edit
+              </v-icon>
+            </v-btn>
+          </template>
+          <span>Edit this frame's box and geometry (or right click)</span>
+        </v-tooltip>
+        <v-tooltip
+          bottom
+          open-delay="600"
+        >
+          <template #activator="{ on }">
+            <v-btn
+              icon
+              small
+              class="cell-action"
+              v-on="on"
+              @click.stop="$emit('open', currentFrame ? currentFrame.frame : undefined)"
+            >
+              <v-icon color="grey lighten-1">
+                mdi-open-in-new
+              </v-icon>
+            </v-btn>
+          </template>
+          <span>Open in the annotation viewer at this frame (or double click)</span>
+        </v-tooltip>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.cell-image-wrap {
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 32px;
+  background: #101010;
+  cursor: pointer;
+  min-width: 0;
+  flex: 1 1 0;
+}
+
+.cell-image-wrap.chip-editing {
+  cursor: default;
+}
+
+.cell-image-zoomed {
+  cursor: grab;
+}
+
+.cell-image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  user-select: none;
+}
+
+.cell-overlay {
+  pointer-events: none;
+  outline: none;
+  overflow: visible;
+
+  &.overlay-editing {
+    pointer-events: auto;
+    touch-action: none;
+  }
+}
+
+.overlay-polygon {
+  fill: rgba(255, 193, 7, 0.12);
+  stroke: #ffc107;
+  vector-effect: non-scaling-stroke;
+}
+
+.overlay-headtail-line {
+  stroke: rgba(255, 255, 255, 0.7);
+  stroke-dasharray: 4 3;
+}
+
+.overlay-head {
+  fill: #66bb6a;
+  stroke: #fff;
+  pointer-events: auto;
+}
+
+.overlay-tail {
+  fill: #ef5350;
+  stroke: #fff;
+  pointer-events: auto;
+}
+
+.overlay-editing .overlay-head,
+.overlay-editing .overlay-tail {
+  cursor: grab;
+}
+
+.overlay-box {
+  fill: rgba(255, 255, 255, 0.04);
+  cursor: move;
+}
+
+.overlay-box-static {
+  fill: none;
+}
+
+.overlay-vertex {
+  cursor: grab;
+}
+
+.cell-placeholder {
+  background: #181818;
+  cursor: default;
+}
+
+.failure-text {
+  max-width: 100%;
+}
+
+.cell-badge {
+  position: absolute;
+  padding: 0 5px;
+  border-radius: 3px;
+  background: rgba(0, 0, 0, 0.65);
+  color: #fff;
+  line-height: 18px;
+  pointer-events: none;
+}
+
+.cell-confidence {
+  top: 3px;
+  left: 3px;
+}
+
+.cell-sequence {
+  top: 3px;
+  right: 3px;
+  display: flex;
+  align-items: center;
+}
+
+.cell-sequence-controls {
+  pointer-events: auto;
+  padding: 0 2px;
+  gap: 1px;
+}
+
+// Narrow camera chips: keep the frame controls clear of the camera label
+.cell-sequence-bottom {
+  top: auto;
+  right: auto;
+  bottom: 3px;
+  left: 3px;
+}
+
+.sequence-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: 0;
+  border-radius: 2px;
+  background: transparent;
+  color: #ddd;
+  cursor: pointer;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.15);
+  }
+
+  .v-icon {
+    color: #ddd;
+  }
+}
+
+.sequence-label {
+  padding: 0 2px;
+  min-width: 26px;
+  text-align: center;
+}
+
+.cell-pending-badge {
+  bottom: 3px;
+  left: 3px;
+}
+
+.cell-edit-bar {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  right: 2px;
+  display: flex;
+  align-items: center;
+  padding: 2px 4px;
+  border-radius: 3px;
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.edit-hint {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #ddd;
+}
+
+.cell-actions {
+  position: absolute;
+  right: 2px;
+  bottom: 2px;
+  display: flex;
+  border-radius: 3px;
+  background: rgba(0, 0, 0, 0.55);
+  opacity: 0;
+  transition: opacity 120ms;
+}
+
+.cell-image-wrap:hover .cell-actions {
+  opacity: 1;
+}
+
+.cell-action {
+  transition: transform 100ms;
+
+  &:hover {
+    transform: scale(1.25);
+  }
+}
+
+.chip-label {
+  margin-right: 5px;
+  color: #90caf9;
+  font-weight: 500;
+}
+
+.chip-missing {
+  margin-left: 5px;
+  color: #ffb74d;
+}
+</style>
diff --git a/client/dive-common/components/Review/ReviewDatasetsPanel.vue b/client/dive-common/components/Review/ReviewDatasetsPanel.vue
new file mode 100644
index 000000000..6e3fa67ee
--- /dev/null
+++ b/client/dive-common/components/Review/ReviewDatasetsPanel.vue
@@ -0,0 +1,200 @@
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue';
+import { useApi } from 'dive-common/apispec';
+import { useReview } from 'dive-common/use/useReview';
+import DatasetPicker from 'dive-common/components/DatasetPicker.vue';
+
+/**
+ * Which datasets the review grid draws from: pick them from the library
+ * listing (or the platform's dataset browser on the web), see each one's
+ * load state, reload or drop it.
+ */
+export default defineComponent({
+  name: 'ReviewDatasetsPanel',
+  components: { DatasetPicker },
+  setup() {
+    const api = useApi();
+    const review = useReview();
+    const picking = ref(false);
+    const usePicker = computed(() => typeof api.pickScoringDataset === 'function');
+
+    const selectedIds = computed(() => review.datasets.value.map((d) => d.id));
+
+    /** Picked datasets queue up; they load when the Results view opens. */
+    async function add(id: string) {
+      const summary = review.available.value.find((d) => d.id === id);
+      await review.addDataset(id, summary, { defer: true });
+    }
+
+    async function addMany(ids: string[]) {
+      await Promise.all(ids.map((id) => add(id)));
+    }
+
+    function removeMany(ids: string[]) {
+      ids.forEach((id) => review.removeDataset(id));
+    }
+
+    async function openPicker() {
+      if (!api.pickScoringDataset || picking.value) return;
+      picking.value = true;
+      try {
+        const picked = await api.pickScoringDataset(selectedIds.value);
+        if (picked) await review.addDataset(picked.id, picked, { defer: true });
+      } finally {
+        picking.value = false;
+      }
+    }
+
+    function statusIcon(status: string) {
+      if (status === 'ready') return { icon: 'mdi-check-circle', color: 'success' };
+      if (status === 'error') return { icon: 'mdi-alert-circle', color: 'error' };
+      if (status === 'queued') return { icon: 'mdi-clock-outline', color: 'grey' };
+      return { icon: 'mdi-progress-clock', color: 'grey' };
+    }
+
+    function statusText(status: string) {
+      if (status === 'ready') return 'Ready';
+      if (status === 'queued') return 'Loads when Results opens';
+      return 'Loading…';
+    }
+
+    return {
+      review,
+      statusText,
+      selectedIds,
+      add,
+      addMany,
+      removeMany,
+      usePicker,
+      picking,
+      openPicker,
+      statusIcon,
+    };
+  },
+});
+</script>
+
+<template>
+  <div class="review-datasets">
+    <DatasetPicker
+      :items="review.available.value"
+      :selected-ids="selectedIds"
+      :picker-label="usePicker ? 'Browse…' : ''"
+      :picking="picking"
+      hint="Every dataset here contributes its annotations to the grid. Multicamera datasets are added one camera at a time."
+      no-data-text="No datasets in the library."
+      compact
+      class="mb-3"
+      @add="add"
+      @add-many="addMany"
+      @remove="review.removeDataset"
+      @remove-many="removeMany"
+      @pick="openPicker"
+    />
+    <div class="text-subtitle-2 mb-1">
+      Selected datasets ({{ review.datasets.value.length }})
+    </div>
+    <div
+      v-if="review.datasets.value.length === 0"
+      class="text-caption grey--text py-2"
+    >
+      None yet. Add datasets from the list above, or select them in the library and choose Review.
+    </div>
+    <v-simple-table
+      v-else
+      dense
+      class="datasets-table"
+    >
+      <thead>
+        <tr>
+          <th>Dataset</th>
+          <th>Type</th>
+          <th class="text-right">
+            Tracks
+          </th>
+          <th>Status</th>
+          <th />
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="dataset in review.datasets.value"
+          :key="dataset.id"
+        >
+          <td class="name-cell">
+            <a @click="$emit('open-dataset', dataset.id)">{{ dataset.name }}</a>
+          </td>
+          <td class="text-caption">
+            {{ dataset.type || '' }}
+          </td>
+          <td class="text-right">
+            {{ dataset.status === 'ready' ? dataset.trackCount : '' }}
+          </td>
+          <td>
+            <span class="d-inline-flex align-center">
+              <v-icon
+                small
+                :color="statusIcon(dataset.status).color"
+                class="mr-1"
+              >
+                {{ statusIcon(dataset.status).icon }}
+              </v-icon>
+              <span
+                v-if="dataset.status === 'error'"
+                class="text-caption error--text"
+              >{{ dataset.error }}</span>
+              <span
+                v-else-if="dataset.status === 'ready' && !dataset.croppable"
+                class="text-caption warning--text"
+              >Loaded; media cannot be cropped into chips</span>
+              <span
+                v-else
+                class="text-caption grey--text"
+              >{{ statusText(dataset.status) }}</span>
+            </span>
+          </td>
+          <td class="text-right actions-cell">
+            <v-btn
+              icon
+              x-small
+              title="Reload annotations"
+              :disabled="dataset.status === 'loading'"
+              @click="review.reloadDataset(dataset.id)"
+            >
+              <v-icon small>
+                mdi-refresh
+              </v-icon>
+            </v-btn>
+            <v-btn
+              icon
+              x-small
+              title="Remove from review"
+              @click="review.removeDataset(dataset.id)"
+            >
+              <v-icon small>
+                mdi-close
+              </v-icon>
+            </v-btn>
+          </td>
+        </tr>
+      </tbody>
+    </v-simple-table>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.name-cell {
+  max-width: 320px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.actions-cell {
+  white-space: nowrap;
+}
+
+.datasets-table ::v-deep td {
+  padding: 4px 8px !important;
+}
+</style>
diff --git a/client/dive-common/components/Review/ReviewGrid.vue b/client/dive-common/components/Review/ReviewGrid.vue
new file mode 100644
index 000000000..153b1fa27
--- /dev/null
+++ b/client/dive-common/components/Review/ReviewGrid.vue
@@ -0,0 +1,81 @@
+<script lang="ts">
+import {
+  computed, defineComponent, onBeforeUnmount, onMounted, ref,
+} from 'vue';
+
+/**
+ * A fixed rows x columns grid filling whatever space it is given; the
+ * cells are slotted in by the page. Reports its cell size so chips can be
+ * rendered at a matching resolution.
+ */
+export default defineComponent({
+  name: 'ReviewGrid',
+  props: {
+    columns: {
+      type: Number,
+      required: true,
+    },
+    rows: {
+      type: Number,
+      required: true,
+    },
+    gap: {
+      type: Number,
+      default: 6,
+    },
+  },
+  setup(props, { emit }) {
+    const container = ref<HTMLElement | null>(null);
+    let observer: ResizeObserver | null = null;
+
+    function measure() {
+      const el = container.value;
+      if (!el) return;
+      const width = (el.clientWidth - props.gap * (props.columns - 1)) / props.columns;
+      const height = (el.clientHeight - props.gap * (props.rows - 1)) / props.rows;
+      emit('cell-size', { width: Math.max(0, width), height: Math.max(0, height) });
+    }
+
+    onMounted(() => {
+      measure();
+      if (typeof ResizeObserver !== 'undefined' && container.value) {
+        observer = new ResizeObserver(() => measure());
+        observer.observe(container.value);
+      }
+    });
+    onBeforeUnmount(() => {
+      observer?.disconnect();
+      observer = null;
+    });
+
+    const gridStyle = computed(() => ({
+      gridTemplateColumns: `repeat(${props.columns}, minmax(0, 1fr))`,
+      gridTemplateRows: `repeat(${props.rows}, minmax(0, 1fr))`,
+      gap: `${props.gap}px`,
+    }));
+
+    return { container, gridStyle, measure };
+  },
+});
+</script>
+
+<template>
+  <div
+    ref="container"
+    class="review-grid"
+    :style="gridStyle"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.review-grid {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+</style>
diff --git a/client/dive-common/components/Review/ReviewGridControls.vue b/client/dive-common/components/Review/ReviewGridControls.vue
new file mode 100644
index 000000000..29d47de15
--- /dev/null
+++ b/client/dive-common/components/Review/ReviewGridControls.vue
@@ -0,0 +1,157 @@
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { REVIEW_GRID_LIMITS, ReviewGridSettings } from 'dive-common/review/types';
+
+/**
+ * The grid-shape, zoom, context and paging controls shared by chip grids.
+ * Extra controls go in the `before` (left) and default (middle) slots.
+ */
+export default defineComponent({
+  name: 'ReviewGridControls',
+  props: {
+    grid: {
+      type: Object as PropType<ReviewGridSettings>,
+      required: true,
+    },
+    page: {
+      type: Number,
+      required: true,
+    },
+    pageCount: {
+      type: Number,
+      required: true,
+    },
+    /** Text describing the item count, shown before the pager. */
+    countLabel: {
+      type: String,
+      default: '',
+    },
+    canZoomIn: {
+      type: Boolean,
+      default: true,
+    },
+    canZoomOut: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  setup() {
+    return { limits: REVIEW_GRID_LIMITS };
+  },
+});
+</script>
+
+<template>
+  <div class="review-controls d-flex align-center flex-wrap px-2 py-1">
+    <slot name="before" />
+    <span class="text-caption grey--text mr-1">Grid</span>
+    <v-text-field
+      :value="grid.columns"
+      type="number"
+      :min="limits.columns[0]"
+      :max="limits.columns[1]"
+      dense
+      outlined
+      hide-details
+      class="grid-number"
+      title="Columns"
+      @change="$emit('set-columns', Number($event))"
+    />
+    <span class="text-caption grey--text mx-1">×</span>
+    <v-text-field
+      :value="grid.rows"
+      type="number"
+      :min="limits.rows[0]"
+      :max="limits.rows[1]"
+      dense
+      outlined
+      hide-details
+      class="grid-number"
+      title="Rows"
+      @change="$emit('set-rows', Number($event))"
+    />
+    <v-btn
+      icon
+      small
+      title="Zoom out: more, smaller entries"
+      :disabled="!canZoomOut"
+      @click="$emit('zoom', 1)"
+    >
+      <v-icon small>
+        mdi-magnify-minus-outline
+      </v-icon>
+    </v-btn>
+    <v-btn
+      icon
+      small
+      title="Zoom in: fewer, larger entries"
+      :disabled="!canZoomIn"
+      class="mr-3"
+      @click="$emit('zoom', -1)"
+    >
+      <v-icon small>
+        mdi-magnify-plus-outline
+      </v-icon>
+    </v-btn>
+    <span
+      class="text-caption grey--text mr-2 text-no-wrap"
+      title="Extra image shown around each box, as a fraction of the box size"
+    >Context {{ Math.round(grid.padding * 100) }}%</span>
+    <v-slider
+      :value="grid.padding"
+      :min="limits.padding[0]"
+      :max="limits.padding[1]"
+      step="0.05"
+      hide-details
+      class="padding-slider mr-3"
+      @input="$emit('set-padding', Number($event))"
+    />
+    <slot />
+    <v-spacer />
+    <span
+      v-if="countLabel"
+      class="text-caption grey--text mr-2 text-no-wrap"
+    >{{ countLabel }}</span>
+    <v-btn
+      icon
+      small
+      :disabled="page === 0"
+      @click="$emit('update:page', page - 1)"
+    >
+      <v-icon>mdi-chevron-left</v-icon>
+    </v-btn>
+    <span class="text-caption mx-1 text-no-wrap">Page {{ page + 1 }} / {{ pageCount }}</span>
+    <v-btn
+      icon
+      small
+      :disabled="page >= pageCount - 1"
+      @click="$emit('update:page', page + 1)"
+    >
+      <v-icon>mdi-chevron-right</v-icon>
+    </v-btn>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.review-controls {
+  flex: 0 0 auto;
+  gap: 4px 0;
+  border-top: 1px solid #333;
+  border-bottom: 1px solid #333;
+}
+
+.grid-number {
+  max-width: 66px;
+  font-size: 0.75rem;
+
+  ::v-deep input {
+    font-size: 0.75rem;
+    font-weight: 500;
+  }
+}
+
+.padding-slider {
+  min-width: 170px;
+  max-width: 260px;
+}
+</style>
diff --git a/client/dive-common/components/Review/ReviewPage.spec.ts b/client/dive-common/components/Review/ReviewPage.spec.ts
new file mode 100644
index 000000000..fd37f2fad
--- /dev/null
+++ b/client/dive-common/components/Review/ReviewPage.spec.ts
@@ -0,0 +1,111 @@
+import { shallowMount } from '@vue/test-utils';
+import Vue, { ComponentOptions, CreateElement, nextTick } from 'vue';
+import type { NavigationGuard } from 'vue-router';
+import type { DatasetConfig } from 'dive-common/apispec';
+import type { ReviewService } from 'dive-common/use/useReview';
+import { takeReviewSession } from 'dive-common/review/reviewSession';
+import ReviewPage from './ReviewPage.vue';
+
+const mocks = vi.hoisted(() => ({
+  guard: null as NavigationGuard | null,
+  loadDetections: vi.fn(),
+  saveDetections: vi.fn(async () => undefined),
+}));
+vi.mock('vue-router/composables', () => ({
+  onBeforeRouteLeave: (guard: NavigationGuard) => { mocks.guard = guard; },
+}));
+vi.mock('dive-common/apispec', () => ({
+  useApi: () => ({
+    loadConfig: async (id: string) => ({
+      id,
+      name: id,
+      type: 'image-sequence',
+      fps: 1,
+      imageData: [],
+      videoUrl: undefined,
+      createdAt: '',
+      subType: null,
+      multiCamMedia: null,
+    } as DatasetConfig),
+    loadDetections: mocks.loadDetections,
+    saveDetections: mocks.saveDetections,
+  }),
+}));
+vi.mock('dive-common/vue-utilities/prompt-service', () => ({ usePrompt: () => ({ prompt: vi.fn() }) }));
+vi.mock('dive-common/store/settings', () => ({
+  clientSettings: { autoSaveSettings: { enabled: false, delaySeconds: 60 } },
+}));
+vi.mock('dive-common/review/frameSource', () => ({ createFrameSource: () => null }));
+vi.mock('dive-common/components/UserSettingsDialog.vue', () => ({ default: {} }));
+vi.mock('./ReviewDatasetsPanel.vue', () => ({ default: {} }));
+vi.mock('./ReviewGrid.vue', () => ({ default: {} }));
+vi.mock('./ReviewGridControls.vue', () => ({ default: {} }));
+vi.mock('./ReviewCell.vue', () => ({ default: {} }));
+
+interface PageState {
+  review: ReviewService;
+  resolveLeave(choice: 'save' | 'discard' | 'cancel'): void;
+  leaveDialog: boolean;
+}
+
+function mountPage() {
+  // Exercise the real setup/lifecycle and guard, without rendering Vuetify/media.
+  return shallowMount({ ...(ReviewPage as unknown as ComponentOptions<Vue>), render: (h: CreateElement) => h('div') });
+}
+
+beforeEach(() => {
+  takeReviewSession()?.review.dispose();
+  mocks.loadDetections.mockReset().mockResolvedValue({
+    tracks: [{
+      id: 1,
+      begin: 0,
+      end: 0,
+      confidencePairs: [['fish', 0.9]],
+      attributes: {},
+      features: [{ frame: 0, keyframe: true, bounds: [0, 0, 10, 10] }],
+    }],
+    groups: [],
+    sets: [],
+    version: 2,
+  });
+});
+
+it('stays mounted with pending edits when Discard and Leave fails', async () => {
+  const wrapper = mountPage();
+  const page = wrapper.vm as unknown as PageState;
+  await page.review.addDataset('a');
+  page.review.assignType(page.review.items.value[0], 'shark');
+  mocks.loadDetections.mockRejectedValue(new Error('offline'));
+  const next = vi.fn();
+  const navigation = mocks.guard!({} as never, {} as never, next);
+  expect(page.leaveDialog).toBe(true);
+  page.resolveLeave('discard');
+  await navigation;
+  expect(next).toHaveBeenCalledWith(false);
+  expect(page.review.pendingCount.value).toBe(1);
+  expect(page.review.error.value).toContain('Could not discard');
+  wrapper.destroy();
+});
+
+it('refreshes data and guards edits after leaving and remounting Review', async () => {
+  const first = mountPage();
+  const original = first.vm as unknown as PageState;
+  await original.review.addDataset('a');
+  await mocks.guard!({} as never, {} as never, vi.fn());
+  first.destroy();
+  const second = mountPage();
+  const resumed = second.vm as unknown as PageState;
+  await new Promise((resolve) => setTimeout(resolve, 0));
+  await nextTick();
+  expect(resumed.review).toBe(original.review);
+  expect(mocks.loadDetections).toHaveBeenCalledTimes(2);
+  resumed.review.assignType(resumed.review.items.value[0], 'shark');
+  expect(resumed.review.pendingCount.value).toBe(1);
+  const next = vi.fn();
+  const navigation = mocks.guard!({} as never, {} as never, next);
+  expect(resumed.leaveDialog).toBe(true);
+  resumed.resolveLeave('cancel');
+  await navigation;
+  expect(next).toHaveBeenCalledWith(false);
+  second.destroy();
+});
diff --git a/client/dive-common/components/Review/ReviewPage.vue b/client/dive-common/components/Review/ReviewPage.vue
new file mode 100644
index 000000000..bc9054f74
--- /dev/null
+++ b/client/dive-common/components/Review/ReviewPage.vue
@@ -0,0 +1,944 @@
+<script lang="ts">
+import {
+  computed, nextTick, defineComponent, onBeforeUnmount, onMounted, PropType, ref, watch,
+} from 'vue';
+import { onBeforeRouteLeave } from 'vue-router/composables';
+import { debounce } from 'lodash';
+import { clientSettings } from 'dive-common/store/settings';
+import { useApi } from 'dive-common/apispec';
+import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
+import { createReviewService, provideReview } from 'dive-common/use/useReview';
+import { useReviewGrid } from 'dive-common/review/useReviewGrid';
+import { cellScaleFor } from 'dive-common/review/gridSettings';
+import { cycleIntervalFor } from 'dive-common/review/reviewItems';
+import {
+  holdReviewSession, sessionKey, shouldResume, takeReviewSession,
+} from 'dive-common/review/reviewSession';
+import { ReviewEntry, ReviewSortOrder } from 'dive-common/review/types';
+import type { ViewerFocus } from 'dive-common/review/viewerNavigation';
+import UserSettingsDialog from 'dive-common/components/UserSettingsDialog.vue';
+import ReviewDatasetsPanel from './ReviewDatasetsPanel.vue';
+import ReviewGrid from './ReviewGrid.vue';
+import ReviewGridControls from './ReviewGridControls.vue';
+import ReviewCell, { ReviewCellGeometryEdit, ReviewCellView } from './ReviewCell.vue';
+
+const TYPE_LIST_ID = 'reviewTypeOptions';
+
+/** Base footer height of a cell at scale 1 (type field plus caption). */
+const CELL_FOOTER_BASE_PX = 48;
+
+type ReviewView = 'results' | 'datasets';
+
+const SORT_OPTIONS: { value: ReviewSortOrder; text: string }[] = [
+  { value: 'confidence-desc', text: 'Confidence, high first' },
+  { value: 'confidence-asc', text: 'Confidence, low first' },
+  { value: 'dataset', text: 'Dataset, track id' },
+  { value: 'frame', text: 'Frame' },
+];
+
+const SCOPE_OPTIONS = [
+  { value: 'any', text: 'Track or detection' },
+  { value: 'track', text: 'Track attributes' },
+  { value: 'detection', text: 'Detection attributes' },
+];
+
+/**
+ * The review page: pick datasets, then page through every annotation of a
+ * type (above a confidence) or carrying an attribute as a grid of cropped
+ * chips, correcting types in place. Platform shells own routing; this emits
+ * `open-viewer` with a dataset id and a {@link ViewerFocus}.
+ */
+export default defineComponent({
+  name: 'ReviewPage',
+  components: {
+    ReviewDatasetsPanel, ReviewGrid, ReviewGridControls, ReviewCell, UserSettingsDialog,
+  },
+  props: {
+    initialDatasetIds: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
+  },
+  setup(props, { emit }) {
+    const api = useApi();
+    // Coming back to the page resumes where it was left, unless the library
+    // sent a new selection (and nothing is unsaved).
+    const held = takeReviewSession();
+    const resumed = held && shouldResume(held, props.initialDatasetIds) ? held : null;
+    if (held && !resumed) held.review.dispose();
+    const review = resumed ? resumed.review : createReviewService({ api });
+    const datasetKey = resumed ? resumed.datasetKey : sessionKey(props.initialDatasetIds);
+    provideReview(review);
+    const { prompt } = usePrompt();
+
+    // Empty first visit opens Datasets; coming back with loaded data opens Results.
+    const hasReady = review.datasets.value.some((d) => d.status === 'ready');
+    const view = ref<ReviewView>(hasReady ? 'results' : 'datasets');
+    const resuming = ref(!!resumed);
+    const pageTypeInput = ref('');
+    const showSettings = ref(false);
+    const typeField = ref<{ isMenuActive: boolean; activateMenu(): void; blur(): void } | null>(null);
+
+    /** The type field's arrow opens its list, and closes it again on a second press. */
+    function toggleTypeMenu() {
+      const field = typeField.value;
+      if (!field) return;
+      if (field.isMenuActive) {
+        field.isMenuActive = false;
+        field.blur();
+      } else {
+        field.activateMenu();
+      }
+    }
+    const gridActive = computed(() => view.value === 'results' && !resuming.value);
+    const cellScale = computed(() => cellScaleFor(review.grid.columns, review.grid.rows));
+    const footerPx = computed(() => Math.round(CELL_FOOTER_BASE_PX * cellScale.value));
+    const grid = useReviewGrid<ReviewEntry>({
+      items: review.entries,
+      chipItemsOf: (entry) => entry.items,
+      grid: review.grid,
+      chipStore: review.chipStore,
+      active: gridActive,
+      footerPx,
+      // The box is drawn over the chip (and follows edits), not into it.
+      outline: '',
+    });
+
+    const showDatasetNames = computed(() => review.datasets.value.length > 1);
+    const readyDatasets = computed(() => review.datasets.value.filter((d) => d.status === 'ready').length);
+
+    /** Per-cell display data; carries dataRevision so edits re-render. */
+    const cells = computed(() => {
+      if (resuming.value) return [];
+      const revision = review.dataRevision.value;
+      const { chipStore } = review;
+      return grid.pageItems.value.map((entry) => {
+        const [item] = entry.items;
+        const current = review.currentType(item);
+        const attribute = item.matchedAttribute;
+        const attributeText = attribute
+          ? `${attribute.key}${attribute.value === true ? '' : ` = ${String(attribute.value)}`}`
+          : '';
+        const fps = review.datasetFps(item.datasetId);
+        const parent = review.parentOf(item.datasetId);
+        const subtitleBits = [];
+        if (showDatasetNames.value) subtitleBits.push(review.datasetName(parent));
+        subtitleBits.push(`#${item.trackId}`);
+        subtitleBits.push(item.frames.length > 1 ? `${item.keyframeCount} frames` : `frame ${item.primary.frame}`);
+        const views: ReviewCellView[] = entry.items.map((view, index) => ({
+          key: view.key,
+          src: chipStore.chips.value[view.key] || null,
+          srcs: chipStore.sequences.value[view.key] || null,
+          transform: chipStore.transforms.value[view.key] || null,
+          transforms: chipStore.sequenceTransforms.value[view.key] || null,
+          frames: view.frames,
+          failure: chipStore.failures.value[view.key] || null,
+          frameCount: view.keyframeCount,
+          label: entry.labels[index],
+        }));
+        return {
+          entry,
+          item,
+          revision,
+          views,
+          type: current.type,
+          confidence: current.confidence,
+          pending: entry.items.some((view) => review.isPending(view)),
+          title: `${review.datasetName(parent)} · track ${item.trackId} · frame ${item.primary.frame}`,
+          subtitle: subtitleBits.join(' · '),
+          attributeText,
+          cycleIntervalMs: cycleIntervalFor(item.frames, fps, review.grid.cycleIntervalMs),
+        };
+      });
+    });
+
+    const typeItems = computed(() => [
+      { value: '', text: 'Any type' },
+      ...review.types.value.map((t) => ({ value: t, text: t })),
+    ]);
+
+    const countLabel = computed(() => {
+      const count = review.entries.value.length;
+      return `${count} entr${count === 1 ? 'y' : 'ies'}`;
+    });
+
+    function setView(next: ReviewView) {
+      view.value = next;
+      // Datasets picked on the Datasets view load only now, when results are wanted.
+      if (next === 'results') review.loadQueued();
+    }
+
+    /** Open the viewer on the frame the chip is showing (its first frame otherwise). */
+    function openItem(entry: ReviewEntry, frame?: number, viewIndex = 0) {
+      const item = entry.items[viewIndex] ?? entry.items[0];
+      const focus: ViewerFocus = { frame: frame ?? item.primary.frame, trackId: item.trackId };
+      // A camera of a rig opens as the rig, which shows every camera.
+      emit('open-viewer', review.parentOf(item.datasetId), focus);
+    }
+
+    function applyGeometry(entry: ReviewEntry, edit: ReviewCellGeometryEdit, viewIndex = 0) {
+      const item = entry.items[viewIndex];
+      if (!item) return;
+      review.updateGeometry(item, edit.frame, {
+        bounds: edit.bounds,
+        polygons: edit.polygons,
+        head: edit.head,
+        tail: edit.tail,
+      });
+      grid.ensureVisible();
+    }
+
+    function addBox(entry: ReviewEntry, added: { frame: number; bounds: [number, number, number, number] }, viewIndex = 0) {
+      const item = entry.items[viewIndex];
+      if (!item) return;
+      review.addKeyframe(item, added.frame, added.bounds);
+      grid.ensureVisible();
+    }
+
+    /** Type edits apply to the track in every camera of the entry. */
+    function assignEntryType(entry: ReviewEntry, type: string) {
+      entry.items.forEach((item) => review.assignType(item, type));
+    }
+
+    function acceptEntry(entry: ReviewEntry) {
+      entry.items.forEach((item) => review.acceptType(item));
+    }
+
+    function deleteEntry(entry: ReviewEntry) {
+      entry.items.forEach((item) => review.deleteTrack(item));
+    }
+
+    function openDataset(datasetId: string) {
+      emit('open-viewer', datasetId, {});
+    }
+
+    function applyTypeToPage() {
+      const type = pageTypeInput.value.trim();
+      if (!type) return;
+      grid.pageItems.value.forEach((entry) => assignEntryType(entry, type));
+    }
+
+    function acceptPage() {
+      grid.pageItems.value.forEach((entry) => acceptEntry(entry));
+    }
+
+    async function discard() {
+      if (review.pendingCount.value === 0) return;
+      const ok = await prompt({
+        title: 'Discard changes',
+        text: `Throw away ${review.pendingCount.value} unsaved type change${review.pendingCount.value === 1 ? '' : 's'}?`,
+        confirm: true,
+      });
+      if (ok) await review.discardChanges();
+    }
+
+    const saveTooltipText = computed(() => {
+      if (review.saving.value) return 'Saving changes...';
+      const count = review.pendingCount.value;
+      if (count === 0) return 'No unsaved changes';
+      const changeLabel = count === 1 ? 'change' : 'changes';
+      let tooltip = `Save ${count} ${changeLabel}`;
+      if (clientSettings.autoSaveSettings.enabled) {
+        tooltip += `. Auto-save is on (delay: ${clientSettings.autoSaveSettings.delaySeconds} seconds)`;
+      }
+      return tooltip;
+    });
+
+    // Three-way leave prompt: save, discard, or stay. The shared prompt service
+    // is only two-button, so this dialog lives on the page.
+    const leaveDialog = ref(false);
+    const leavePendingCount = ref(0);
+    let leaveResolve: ((choice: 'save' | 'discard' | 'cancel') => void) | null = null;
+
+    function askLeaveUnsaved(count: number): Promise<'save' | 'discard' | 'cancel'> {
+      leavePendingCount.value = count;
+      leaveDialog.value = true;
+      return new Promise((resolve) => {
+        leaveResolve = resolve;
+      });
+    }
+
+    function resolveLeave(choice: 'save' | 'discard' | 'cancel') {
+      const resolve = leaveResolve;
+      leaveResolve = null;
+      leaveDialog.value = false;
+      resolve?.(choice);
+    }
+
+    function onLeaveDialogInput(show: boolean) {
+      if (!show) resolveLeave('cancel');
+      else leaveDialog.value = true;
+    }
+
+    function onKeydown(event: KeyboardEvent) {
+      grid.handleKeydown(event);
+    }
+
+    // Auto-save follows the annotator's setting: edits are written after the
+    // configured delay, so leaving the page rarely finds anything unsaved.
+    const autoSaveDelayMs = () => Math.max(1, Number(clientSettings.autoSaveSettings.delaySeconds) || 60) * 1000;
+    let autoSave = debounce(() => {
+      if (review.pendingCount.value > 0 && !review.saving.value) review.save();
+    }, autoSaveDelayMs());
+    watch(() => clientSettings.autoSaveSettings.delaySeconds, () => {
+      autoSave.cancel();
+      autoSave = debounce(() => {
+        if (review.pendingCount.value > 0 && !review.saving.value) review.save();
+      }, autoSaveDelayMs());
+    });
+    watch(review.pendingCount, (count, previous) => {
+      if (clientSettings.autoSaveSettings.enabled && count > previous) autoSave();
+    });
+    watch(review.saving, (saving, wasSaving) => {
+      if (wasSaving && !saving && clientSettings.autoSaveSettings.enabled && review.pendingCount.value > 0) autoSave();
+    });
+
+    function onBeforeUnload(event: BeforeUnloadEvent) {
+      if (review.pendingCount.value > 0) {
+        event.preventDefault();
+        // eslint-disable-next-line no-param-reassign
+        event.returnValue = '';
+      }
+    }
+
+    function holdSession() {
+      holdReviewSession({
+        review, view: view.value, page: grid.page.value, datasetKey,
+      });
+    }
+
+    onBeforeRouteLeave(async (_to, _from, next) => {
+      const pending = review.pendingCount.value;
+      if (pending === 0) {
+        holdSession();
+        next();
+        return;
+      }
+      // Cancel any pending auto-save so it does not race the user's choice.
+      autoSave.cancel();
+      const choice = await askLeaveUnsaved(pending);
+      if (choice === 'cancel') {
+        if (clientSettings.autoSaveSettings.enabled && review.pendingCount.value > 0) {
+          autoSave();
+        }
+        next(false);
+        return;
+      }
+      if (choice === 'save') {
+        await review.save();
+        if (review.pendingCount.value > 0) {
+          // Save failed; the page already shows the error — stay put.
+          next(false);
+          return;
+        }
+      } else if (!await review.discardChanges()) {
+        next(false);
+        return;
+      }
+      holdSession();
+      next();
+    });
+
+    async function applyInitial(ids: string[]) {
+      if (ids.length === 0) return;
+      await review.addDatasets(ids);
+      if (review.datasets.value.some((d) => d.status === 'ready')) {
+        view.value = 'results';
+      }
+    }
+
+    onMounted(async () => {
+      window.addEventListener('keydown', onKeydown);
+      window.addEventListener('beforeunload', onBeforeUnload);
+      if (resumed) {
+        await review.refreshOnResume();
+        await review.loadQueued();
+        resuming.value = false;
+        await nextTick();
+        grid.goToPage(resumed.page);
+      }
+      await review.refreshAvailable();
+      // A resumed session still takes a new library selection in when the
+      // held key differs (pending edits are resolved on leave nowadays).
+      if (!resumed || datasetKey !== sessionKey(props.initialDatasetIds)) {
+        await applyInitial(props.initialDatasetIds);
+      }
+    });
+    watch(() => props.initialDatasetIds, (ids) => { applyInitial(ids); });
+    onBeforeUnmount(() => {
+      window.removeEventListener('keydown', onKeydown);
+      window.removeEventListener('beforeunload', onBeforeUnload);
+      autoSave.cancel();
+      grid.dispose();
+      // Disposed here only when not handed over to the next visit.
+      if (!takeReviewSession()) review.dispose();
+      else {
+        holdReviewSession({
+          review, view: view.value, page: grid.page.value, datasetKey,
+        });
+      }
+    });
+
+    return {
+      review,
+      view,
+      typeField,
+      toggleTypeMenu,
+      grid,
+      cells,
+      cellScale,
+      typeItems,
+      typeListId: TYPE_LIST_ID,
+      sortOptions: SORT_OPTIONS,
+      scopeOptions: SCOPE_OPTIONS,
+      readyDatasets,
+      countLabel,
+      pageTypeInput,
+      showSettings,
+      setView,
+      openItem,
+      openDataset,
+      applyGeometry,
+      addBox,
+      assignEntryType,
+      acceptEntry,
+      deleteEntry,
+      applyTypeToPage,
+      acceptPage,
+      discard,
+      saveTooltipText,
+      leaveDialog,
+      leavePendingCount,
+      resolveLeave,
+      onLeaveDialogInput,
+      clientSettings,
+    };
+  },
+});
+</script>
+
+<template>
+  <div class="review-page">
+    <div class="review-toolbar d-flex align-center flex-wrap px-2 pt-2">
+      <v-btn-toggle
+        :value="view"
+        mandatory
+        dense
+        class="mr-3"
+        @change="setView"
+      >
+        <v-btn
+          small
+          value="results"
+        >
+          <v-icon
+            small
+            left
+          >
+            mdi-view-grid
+          </v-icon>
+          Results
+        </v-btn>
+        <v-btn
+          small
+          value="datasets"
+        >
+          <v-icon
+            small
+            left
+          >
+            mdi-database
+          </v-icon>
+          Datasets
+          <span class="ml-1 grey--text">({{ review.datasets.value.length }})</span>
+        </v-btn>
+      </v-btn-toggle>
+
+      <template v-if="view === 'results' && readyDatasets > 0">
+        <v-btn-toggle
+          :value="review.query.mode"
+          mandatory
+          dense
+          class="mr-2"
+          @change="review.query.mode = $event"
+        >
+          <v-btn
+            small
+            value="type"
+          >
+            Type
+          </v-btn>
+          <v-btn
+            small
+            value="attribute"
+          >
+            Attribute
+          </v-btn>
+        </v-btn-toggle>
+
+        <template v-if="review.query.mode === 'type'">
+          <v-autocomplete
+            ref="typeField"
+            :value="review.query.type"
+            :items="typeItems"
+            dense
+            outlined
+            hide-details
+            class="query-field type-field mr-2"
+            @change="review.query.type = $event || ''"
+            @click:append="toggleTypeMenu"
+          />
+          <div class="d-flex align-center threshold-field mr-2">
+            <span class="text-caption grey--text mr-2 text-no-wrap">Min confidence</span>
+            <v-slider
+              :value="review.query.threshold"
+              min="0"
+              max="1"
+              step="0.01"
+              hide-details
+              class="threshold-slider"
+              @input="review.query.threshold = Number($event)"
+            />
+            <v-text-field
+              :value="review.query.threshold"
+              type="number"
+              min="0"
+              max="1"
+              step="0.05"
+              dense
+              outlined
+              hide-details
+              class="threshold-number ml-2"
+              @change="review.query.threshold = Math.min(1, Math.max(0, Number($event) || 0))"
+            />
+          </div>
+        </template>
+        <template v-else>
+          <v-combobox
+            :value="review.query.attributeKey"
+            :items="review.attributeKeys.value"
+            label="Attribute"
+            dense
+            outlined
+            hide-details
+            class="query-field mr-2"
+            @input="review.query.attributeKey = $event || ''"
+          />
+          <v-text-field
+            :value="review.query.attributeValue"
+            label="Value (any when empty)"
+            dense
+            outlined
+            hide-details
+            clearable
+            class="query-field mr-2"
+            @input="review.query.attributeValue = $event || ''"
+          />
+          <v-select
+            :value="review.query.attributeScope"
+            :items="scopeOptions"
+            dense
+            outlined
+            hide-details
+            class="query-field scope-field mr-2"
+            @change="review.query.attributeScope = $event"
+          />
+        </template>
+      </template>
+
+      <v-spacer />
+
+      <v-btn
+        small
+        text
+        :disabled="review.pendingCount.value === 0 || review.saving.value"
+        class="mr-1"
+        @click="discard"
+      >
+        Discard
+      </v-btn>
+      <v-btn
+        icon
+        small
+        class="mr-1"
+        title="Settings (auto-save and more)"
+        @click="showSettings = true"
+      >
+        <v-icon>mdi-cog</v-icon>
+      </v-btn>
+      <v-tooltip bottom>
+        <template #activator="{ on }">
+          <v-badge
+            overlap
+            bottom
+            :content="review.pendingCount.value"
+            :value="review.pendingCount.value > 0"
+            offset-x="14"
+            offset-y="12"
+          >
+            <v-btn
+              small
+              depressed
+              color="primary"
+              :disabled="review.pendingCount.value === 0"
+              :loading="review.saving.value"
+              v-on="on"
+              @click="review.save()"
+            >
+              <v-icon
+                small
+                left
+              >
+                {{
+                  clientSettings.autoSaveSettings.enabled
+                    ? 'mdi-content-save-cog'
+                    : 'mdi-content-save'
+                }}
+              </v-icon>
+              Save
+            </v-btn>
+          </v-badge>
+        </template>
+        <span>{{ saveTooltipText }}</span>
+      </v-tooltip>
+    </div>
+
+    <ReviewGridControls
+      v-if="view === 'results' && readyDatasets > 0"
+      :grid="review.grid"
+      :page="grid.page.value"
+      :page-count="grid.pageCount.value"
+      :count-label="countLabel"
+      :can-zoom-in="grid.canZoomIn.value"
+      :can-zoom-out="grid.canZoomOut.value"
+      @update:page="grid.goToPage"
+      @set-columns="grid.setColumns"
+      @set-rows="grid.setRows"
+      @set-padding="grid.setPadding"
+      @zoom="grid.zoom"
+    >
+      <template #before>
+        <v-select
+          :value="review.sort.value"
+          :items="sortOptions"
+          dense
+          outlined
+          hide-details
+          class="sort-field mr-3"
+          prepend-inner-icon="mdi-sort"
+          @change="review.sort.value = $event"
+        />
+      </template>
+      <v-menu
+        offset-y
+        :close-on-content-click="false"
+      >
+        <template #activator="{ on }">
+          <v-btn
+            small
+            text
+            :disabled="grid.pageItems.value.length === 0"
+            v-on="on"
+          >
+            <v-icon
+              small
+              left
+            >
+              mdi-select-all
+            </v-icon>
+            Page actions
+          </v-btn>
+        </template>
+        <v-card class="pa-3 page-actions">
+          <div class="text-caption grey--text mb-2">
+            Applies to the {{ grid.pageItems.value.length }} entries on this page.
+          </div>
+          <div class="d-flex align-center mb-2">
+            <input
+              v-model="pageTypeInput"
+              type="text"
+              class="page-type-input mr-2"
+              placeholder="Type"
+              :list="typeListId"
+              @keydown.enter="applyTypeToPage"
+            >
+            <v-btn
+              small
+              depressed
+              :disabled="!pageTypeInput.trim()"
+              @click="applyTypeToPage"
+            >
+              Set type
+            </v-btn>
+          </div>
+          <v-btn
+            small
+            outlined
+            block
+            @click="acceptPage"
+          >
+            <v-icon
+              small
+              left
+            >
+              mdi-check-all
+            </v-icon>
+            Mark all correct
+          </v-btn>
+        </v-card>
+      </v-menu>
+    </ReviewGridControls>
+
+    <v-alert
+      v-if="review.error.value"
+      dense
+      dismissible
+      type="error"
+      class="mx-2 my-1"
+      @input="review.clearError()"
+    >
+      {{ review.error.value }}
+    </v-alert>
+
+    <div class="review-body px-2 pb-2">
+      <ReviewDatasetsPanel
+        v-if="view === 'datasets'"
+        @open-dataset="openDataset"
+      />
+      <template v-else>
+        <div
+          v-if="readyDatasets === 0"
+          class="d-flex flex-column align-center justify-center fill-height grey--text"
+        >
+          <v-icon
+            large
+            color="grey darken-1"
+            class="mb-2"
+          >
+            mdi-database-outline
+          </v-icon>
+          <div v-if="review.loading.value">
+            Loading annotations…
+          </div>
+          <template v-else>
+            <div class="mb-3">
+              No datasets are selected. Select one or more on the Datasets panel.
+            </div>
+            <v-btn
+              small
+              outlined
+              @click="setView('datasets')"
+            >
+              <v-icon
+                small
+                left
+              >
+                mdi-database
+              </v-icon>
+              Datasets
+            </v-btn>
+          </template>
+        </div>
+        <div
+          v-else-if="review.items.value.length === 0"
+          class="d-flex flex-column align-center justify-center fill-height grey--text"
+        >
+          <v-icon
+            large
+            color="grey darken-1"
+            class="mb-2"
+          >
+            mdi-image-search-outline
+          </v-icon>
+          <div v-if="review.loading.value">
+            Loading annotations…
+          </div>
+          <div v-else-if="review.query.mode === 'type'">
+            No annotations of {{ review.query.type ? `type "${review.query.type}"` : 'any type' }}
+            at or above confidence {{ review.query.threshold }}.
+          </div>
+          <div v-else-if="!review.query.attributeKey">
+            Pick an attribute to look for.
+          </div>
+          <div v-else>
+            No annotations carry attribute "{{ review.query.attributeKey }}"{{ review.query.attributeValue ? ` = ${review.query.attributeValue}` : '' }}.
+          </div>
+        </div>
+        <ReviewGrid
+          v-else
+          :columns="review.grid.columns"
+          :rows="review.grid.rows"
+          @cell-size="grid.cellSize.value = $event"
+        >
+          <ReviewCell
+            v-for="cell in cells"
+            :key="cell.entry.key"
+            :views="cell.views"
+            :animate="true"
+            :cycle-interval-ms="cell.cycleIntervalMs"
+            :scale="cellScale"
+            :color="review.colorFor(cell.type)"
+            :type="cell.type"
+            :confidence="cell.confidence"
+            :pending="cell.pending"
+            :title="cell.title"
+            :subtitle="cell.subtitle"
+            :attribute-text="cell.attributeText"
+            :type-options="review.knownTypes.value"
+            @assign="assignEntryType(cell.entry, $event)"
+            @accept="acceptEntry(cell.entry)"
+            @delete="deleteEntry(cell.entry)"
+            @open="(frame, index) => openItem(cell.entry, frame, index)"
+            @edit-geometry="(edit, index) => applyGeometry(cell.entry, edit, index)"
+            @add-box="(added, index) => addBox(cell.entry, added, index)"
+          />
+        </ReviewGrid>
+      </template>
+    </div>
+
+    <UserSettingsDialog
+      :value="showSettings"
+      @input="showSettings = $event"
+    />
+
+    <v-dialog
+      :value="leaveDialog"
+      max-width="560"
+      persistent
+      @input="onLeaveDialogInput"
+    >
+      <v-card>
+        <v-card-title style="word-break: normal;">
+          Unsaved changes
+        </v-card-title>
+        <v-card-text>
+          You have {{ leavePendingCount }} unsaved
+          change{{ leavePendingCount === 1 ? '' : 's' }}.
+          Save them before leaving, or discard them?
+        </v-card-text>
+        <v-card-actions>
+          <v-btn
+            text
+            @click="resolveLeave('cancel')"
+          >
+            Stay
+          </v-btn>
+          <v-spacer />
+          <v-btn
+            text
+            @click="resolveLeave('discard')"
+          >
+            Discard and Leave
+          </v-btn>
+          <v-btn
+            color="primary"
+            text
+            :loading="review.saving.value"
+            @click="resolveLeave('save')"
+          >
+            Save and Leave
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <datalist :id="typeListId">
+      <option
+        v-for="type in review.knownTypes.value"
+        :key="type"
+        :value="type"
+      />
+    </datalist>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+// Every query control reads at the same size as the Results / Datasets
+// buttons, whatever it currently shows.
+$toolbar-font: 0.75rem;
+
+.review-page {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+}
+
+.review-toolbar {
+  flex: 0 0 auto;
+  gap: 4px 0;
+}
+
+.review-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  position: relative;
+  overflow: auto;
+}
+
+.query-field,
+.threshold-number,
+.sort-field {
+  font-size: $toolbar-font;
+
+  ::v-deep input,
+  ::v-deep .v-select__selection,
+  ::v-deep .v-select__selection--comma,
+  ::v-deep .v-label,
+  ::v-deep .v-list-item__title {
+    font-size: $toolbar-font;
+    font-weight: 500;
+    letter-spacing: 0.0892857143em;
+  }
+}
+
+.query-field {
+  max-width: 240px;
+}
+
+.type-field {
+  max-width: 220px;
+}
+
+.scope-field {
+  max-width: 200px;
+}
+
+.threshold-field {
+  min-width: 320px;
+}
+
+.threshold-slider {
+  min-width: 170px;
+}
+
+.threshold-number {
+  max-width: 90px;
+}
+
+.sort-field {
+  max-width: 240px;
+}
+
+.page-actions {
+  min-width: 260px;
+}
+
+.page-type-input {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 3px 6px;
+  font-size: 13px;
+  color: #eee;
+  background: #2a2a2a;
+  border: 1px solid #555;
+  border-radius: 3px;
+  outline: none;
+
+  &:focus {
+    border-color: #90caf9;
+  }
+}
+</style>
diff --git a/client/dive-common/components/Review/ReviewTypeField.vue b/client/dive-common/components/Review/ReviewTypeField.vue
new file mode 100644
index 000000000..4cbe54290
--- /dev/null
+++ b/client/dive-common/components/Review/ReviewTypeField.vue
@@ -0,0 +1,309 @@
+<script lang="ts">
+import {
+  computed, defineComponent, onBeforeUnmount, PropType, ref, watch,
+} from 'vue';
+
+/**
+ * The type field under a review entry: a text input with a dropdown of the
+ * known types. The dropdown is our own rather than a native datalist so its
+ * button opens and closes it, it filters as you type, and it can float out
+ * of the clipped cell. Commits on Enter, blur or picking an entry; Escape
+ * reverts.
+ */
+export default defineComponent({
+  name: 'ReviewTypeField',
+  props: {
+    value: {
+      type: String,
+      default: '',
+    },
+    options: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, { emit }) {
+    const text = ref(props.value);
+    const open = ref(false);
+    const input = ref<HTMLInputElement | null>(null);
+    const root = ref<HTMLElement | null>(null);
+    const menuStyle = ref<Record<string, string>>({});
+    /** Index of the highlighted entry while the list is open. */
+    const highlighted = ref(-1);
+
+    watch(() => props.value, (next) => { text.value = next; });
+
+    /** Typing filters the list; an untouched field shows every type. */
+    const listed = computed(() => {
+      const needle = text.value.trim().toLowerCase();
+      if (!needle || text.value === props.value) return props.options;
+      return props.options.filter((option) => option.toLowerCase().includes(needle));
+    });
+
+    function commit() {
+      const next = text.value.trim();
+      if (!next) {
+        text.value = props.value;
+      } else if (next !== props.value) {
+        emit('commit', next);
+      }
+    }
+
+    function place() {
+      const el = input.value;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      const below = window.innerHeight - rect.bottom;
+      const height = Math.min(200, Math.max(below, rect.top) - 8);
+      const above = below < 120 && rect.top > below;
+      menuStyle.value = {
+        left: `${rect.left}px`,
+        width: `${rect.width}px`,
+        maxHeight: `${height}px`,
+        ...(above ? { bottom: `${window.innerHeight - rect.top}px` } : { top: `${rect.bottom}px` }),
+      };
+    }
+
+    function onDocumentPointerDown(event: PointerEvent) {
+      if (root.value && !root.value.contains(event.target as Node)) close();
+    }
+
+    function openMenu() {
+      if (props.disabled || open.value) return;
+      place();
+      highlighted.value = listed.value.indexOf(props.value);
+      open.value = true;
+      document.addEventListener('pointerdown', onDocumentPointerDown, true);
+    }
+
+    function close() {
+      if (!open.value) return;
+      open.value = false;
+      document.removeEventListener('pointerdown', onDocumentPointerDown, true);
+    }
+
+    function toggle() {
+      if (open.value) close();
+      else {
+        openMenu();
+        input.value?.focus();
+      }
+    }
+
+    function pick(option: string) {
+      text.value = option;
+      close();
+      commit();
+    }
+
+    function onInput() {
+      if (!open.value) openMenu();
+      highlighted.value = -1;
+    }
+
+    function onKeydown(event: KeyboardEvent) {
+      if (event.key === 'Enter') {
+        if (open.value && highlighted.value >= 0 && listed.value[highlighted.value] !== undefined) {
+          pick(listed.value[highlighted.value]);
+        } else {
+          close();
+          commit();
+          input.value?.blur();
+        }
+      } else if (event.key === 'Escape') {
+        text.value = props.value;
+        close();
+        input.value?.blur();
+      } else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+        if (!open.value) openMenu();
+        const count = listed.value.length;
+        if (count) {
+          const step = event.key === 'ArrowDown' ? 1 : -1;
+          highlighted.value = (highlighted.value + step + count) % count;
+        }
+        event.preventDefault();
+      }
+      // Arrow keys page the grid; keep them inside the field while typing.
+      event.stopPropagation();
+    }
+
+    function onBlur() {
+      // A click on the list blurs the input first; let the pick land.
+      window.setTimeout(() => {
+        if (!open.value) commit();
+      }, 0);
+    }
+
+    onBeforeUnmount(close);
+
+    return {
+      text,
+      open,
+      input,
+      root,
+      menuStyle,
+      highlighted,
+      listed,
+      toggle,
+      pick,
+      onInput,
+      onKeydown,
+      onBlur,
+      close,
+      commit,
+    };
+  },
+});
+</script>
+
+<template>
+  <div
+    ref="root"
+    class="type-field"
+    :class="{ 'type-field-open': open }"
+  >
+    <input
+      ref="input"
+      v-model="text"
+      type="text"
+      class="cell-type-input"
+      :disabled="disabled"
+      :title="value"
+      spellcheck="false"
+      autocomplete="off"
+      @input="onInput"
+      @keydown="onKeydown"
+      @blur="onBlur"
+    >
+    <button
+      type="button"
+      class="type-toggle"
+      :disabled="disabled"
+      :title="open ? 'Close the type list' : 'Choose a type'"
+      tabindex="-1"
+      @mousedown.prevent
+      @click="toggle"
+    >
+      <v-icon small>
+        {{ open ? 'mdi-menu-up' : 'mdi-menu-down' }}
+      </v-icon>
+    </button>
+    <div
+      v-if="open"
+      class="type-menu"
+      :style="menuStyle"
+      @mousedown.prevent
+    >
+      <div
+        v-if="listed.length === 0"
+        class="type-option type-option-empty"
+      >
+        No matching type
+      </div>
+      <div
+        v-for="(option, index) in listed"
+        :key="option"
+        class="type-option"
+        :class="{ 'type-option-current': option === value, 'type-option-highlighted': index === highlighted }"
+        @mouseenter="highlighted = index"
+        @click="pick(option)"
+      >
+        {{ option }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.type-field {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+}
+
+.cell-type-input {
+  flex: 1 1 auto;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  padding: calc(2px * var(--cell-scale, 1)) calc(5px * var(--cell-scale, 1));
+  padding-right: calc(22px * var(--cell-scale, 1));
+  font-size: calc(13px * var(--cell-scale, 1));
+  line-height: calc(19px * var(--cell-scale, 1));
+  color: #eee;
+  background: #2a2a2a;
+  border: 1px solid #444;
+  border-radius: 3px;
+  outline: none;
+
+  &:focus {
+    border-color: #90caf9;
+  }
+
+  &:disabled {
+    color: #888;
+  }
+}
+
+.type-toggle {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: calc(22px * var(--cell-scale, 1));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  background: transparent;
+  color: #bbb;
+  cursor: pointer;
+
+  &:hover:not(:disabled) {
+    color: #fff;
+  }
+
+  &:disabled {
+    color: #555;
+    cursor: default;
+  }
+}
+
+.type-menu {
+  position: fixed;
+  z-index: 20;
+  overflow-y: auto;
+  background: #2a2a2a;
+  border: 1px solid #555;
+  border-radius: 3px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+  font-size: calc(13px * var(--cell-scale, 1));
+}
+
+.type-option {
+  padding: 3px 8px;
+  color: #ddd;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &.type-option-highlighted {
+    background: #3a3a3a;
+  }
+
+  &.type-option-current {
+    color: #90caf9;
+  }
+
+  &.type-option-empty {
+    color: #888;
+    cursor: default;
+  }
+}
+</style>
diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index e2c3f1e8b..75b3710e4 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -175,6 +175,16 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    /** Deep link: frame to seek to once the media is ready (e.g. from the review grid). */
+    initialFrame: {
+      type: Number as PropType<number | undefined>,
+      default: undefined,
+    },
+    /** Deep link: track to select once annotations are loaded. */
+    initialTrackId: {
+      type: Number as PropType<number | undefined>,
+      default: undefined,
+    },
   },
   setup(props, { emit }) {
     const { prompt, visible } = usePrompt();
@@ -2033,6 +2043,32 @@ export default defineComponent({
     };
     loadData();
 
+    /**
+     * Apply a deep link (initialFrame / initialTrackId) once: after the
+     * annotations are loaded and the media controller reports its frame
+     * range, so the seek is not swallowed by the annotator's own init seek.
+     */
+    let initialFocusApplied = false;
+    watch(
+      () => [progress.loaded, aggregateController.value.maxFrame.value] as const,
+      ([loaded, maxFrame]) => {
+        if (initialFocusApplied || !loaded) return;
+        if (props.initialFrame === undefined && props.initialTrackId === undefined) return;
+        if (props.initialFrame !== undefined && maxFrame <= 0) return;
+        initialFocusApplied = true;
+        nextTick(() => {
+          if (props.initialFrame !== undefined) {
+            handler.seekFrame(Math.min(props.initialFrame, maxFrame));
+          }
+          if (props.initialTrackId !== undefined
+            && cameraStore.getAnyPossibleTrack(props.initialTrackId)) {
+            handler.trackSelect(props.initialTrackId, false);
+          }
+        });
+      },
+      { immediate: true },
+    );
+
     const reloadAnnotations = async () => {
       progress.loaded = false;
       discardChanges();
diff --git a/client/dive-common/review/chipRenderer.spec.ts b/client/dive-common/review/chipRenderer.spec.ts
new file mode 100644
index 000000000..1903cf9f2
--- /dev/null
+++ b/client/dive-common/review/chipRenderer.spec.ts
@@ -0,0 +1,66 @@
+import {
+  chipRegion, chipScale, chipSizeFor, toChipPoint, toImagePoint,
+} from './chipRenderer';
+
+describe('chipRegion', () => {
+  it('is a square centred on the box, padded on every side', () => {
+    const region = chipRegion([10, 20, 30, 60], 0.5);
+    // Longer side 40, padded by 50% each side -> 80.
+    expect(region).toEqual({
+      x: 20 - 40, y: 40 - 40, width: 80, height: 80,
+    });
+  });
+
+  it('extends the square to the requested aspect ratio, keeping the box centred', () => {
+    const wide = chipRegion([10, 20, 30, 60], 0, 2);
+    expect(wide).toEqual({
+      x: 20 - 40, y: 40 - 20, width: 80, height: 40,
+    });
+    const tall = chipRegion([10, 20, 30, 60], 0, 0.5);
+    expect(tall).toEqual({
+      x: 20 - 20, y: 40 - 40, width: 40, height: 80,
+    });
+    expect(chipRegion([0, 0, 10, 10], 0, Number.NaN).width).toBe(10);
+  });
+
+  it('tolerates inverted or degenerate boxes', () => {
+    expect(chipRegion([30, 60, 10, 20], 0).width).toBe(40);
+    expect(chipRegion([5, 5, 5, 5], 0).width).toBe(1);
+    expect(chipRegion([0, 0, 10, 10], -1).width).toBe(10);
+  });
+});
+
+describe('chipSizeFor', () => {
+  it('rounds cell sizes up to a bucket and caps at the largest', () => {
+    expect(chipSizeFor(100)).toBe(128);
+    expect(chipSizeFor(128)).toBe(128);
+    expect(chipSizeFor(129)).toBe(192);
+    expect(chipSizeFor(5000)).toBe(768);
+  });
+});
+
+describe('chipScale', () => {
+  it('fills the requested size, upscaling small crops and downscaling large ones', () => {
+    expect(chipScale({
+      x: 0, y: 0, width: 32, height: 32,
+    }, 256)).toBe(8);
+    expect(chipScale({
+      x: 0, y: 0, width: 1024, height: 512,
+    }, 256)).toBe(0.25);
+  });
+});
+
+describe('chip point mapping', () => {
+  it('round-trips between image and chip coordinates', () => {
+    const transform = {
+      region: {
+        x: 100, y: 50, width: 40, height: 20,
+      },
+      scale: 4,
+      width: 160,
+      height: 80,
+    };
+    expect(toChipPoint(transform, 110, 60)).toEqual([40, 40]);
+    expect(toImagePoint(transform, 40, 40)).toEqual([110, 60]);
+  });
+});
diff --git a/client/dive-common/review/chipRenderer.ts b/client/dive-common/review/chipRenderer.ts
new file mode 100644
index 000000000..33ed44207
--- /dev/null
+++ b/client/dive-common/review/chipRenderer.ts
@@ -0,0 +1,145 @@
+/**
+ * Crops one box out of a decoded frame into a chip image. The crop is a
+ * square centred on the box so the object stays centred as a track cycles
+ * through frames of different sizes; area past the frame edge is left dark
+ * rather than shifting the object off centre.
+ */
+import type { RectBounds } from 'vue-media-annotator/utils';
+import type { DecodedFrame } from './frameSource';
+
+export interface ChipRenderOptions {
+  /** Context around the box as a fraction of its longer side. */
+  padding: number;
+  /** Longer output edge in pixels. */
+  size: number;
+  /** Output width / height; the crop region widens or heightens to match. */
+  aspect?: number;
+  /** Box outline colour; omit to draw no outline. */
+  outline?: string;
+  /** JPEG quality. */
+  quality?: number;
+}
+
+export interface ChipRegion {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+/** How a rendered chip maps to the frame: chip px = (image px - region.x) * scale. */
+export interface ChipTransform {
+  region: ChipRegion;
+  scale: number;
+  /** Chip image size in pixels. */
+  width: number;
+  height: number;
+}
+
+export interface RenderedChip {
+  dataUrl: string;
+  transform: ChipTransform;
+}
+
+/** Chip pixel coordinates of an image point. */
+export function toChipPoint(transform: ChipTransform, x: number, y: number): [number, number] {
+  return [(x - transform.region.x) * transform.scale, (y - transform.region.y) * transform.scale];
+}
+
+/** Image coordinates of a chip pixel. */
+export function toImagePoint(transform: ChipTransform, x: number, y: number): [number, number] {
+  return [transform.region.x + x / transform.scale, transform.region.y + y / transform.scale];
+}
+
+/**
+ * Crop region (may extend past the image) for a box with padding: the
+ * padded square around the box, widened or heightened to the requested
+ * aspect ratio so the object stays centred whatever the cell's shape.
+ */
+export function chipRegion(bounds: RectBounds, padding: number, aspect = 1): ChipRegion {
+  const [x1, y1, x2, y2] = bounds;
+  const w = Math.max(1, Math.abs(x2 - x1));
+  const h = Math.max(1, Math.abs(y2 - y1));
+  const side = Math.max(w, h) * (1 + 2 * Math.max(0, padding));
+  const ratio = aspect > 0 && Number.isFinite(aspect) ? aspect : 1;
+  const width = ratio >= 1 ? side * ratio : side;
+  const height = ratio >= 1 ? side : side / ratio;
+  const cx = (x1 + x2) / 2;
+  const cy = (y1 + y2) / 2;
+  return {
+    x: cx - width / 2, y: cy - height / 2, width, height,
+  };
+}
+
+/** Pixel sizes chips are rendered at; cells pick the smallest that covers them. */
+export const CHIP_SIZE_BUCKETS = [128, 192, 256, 384, 512, 768];
+
+export function chipSizeFor(cellPixels: number): number {
+  const wanted = Math.ceil(cellPixels);
+  return CHIP_SIZE_BUCKETS.find((size) => size >= wanted) ?? CHIP_SIZE_BUCKETS[CHIP_SIZE_BUCKETS.length - 1];
+}
+
+/**
+ * Scale from frame pixels to chip pixels: the crop's longer side fills the
+ * requested size. Small crops are upscaled so the chip is rendered once at
+ * the cell's resolution with high-quality resampling, instead of the browser
+ * stretching a tiny image (and its compression artifacts) on every paint.
+ */
+export function chipScale(region: ChipRegion, size: number): number {
+  const longest = Math.max(1, Math.max(region.width, region.height));
+  return Math.max(16, size) / longest;
+}
+
+export function renderChip(frame: DecodedFrame, bounds: RectBounds, options: ChipRenderOptions): RenderedChip {
+  const region = chipRegion(bounds, options.padding, options.aspect);
+  const scale = chipScale(region, options.size);
+  const canvas = document.createElement('canvas');
+  canvas.width = Math.max(1, Math.round(region.width * scale));
+  canvas.height = Math.max(1, Math.round(region.height * scale));
+  const ctx = canvas.getContext('2d');
+  if (!ctx) throw new Error('Canvas unavailable');
+  ctx.imageSmoothingEnabled = true;
+  ctx.imageSmoothingQuality = 'high';
+  ctx.fillStyle = '#101010';
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  // Source rectangle clipped to the frame; the destination shifts by the same amount.
+  const sx = Math.max(0, region.x);
+  const sy = Math.max(0, region.y);
+  const ex = Math.min(frame.width, region.x + region.width);
+  const ey = Math.min(frame.height, region.y + region.height);
+  if (ex > sx && ey > sy) {
+    const sw = ex - sx;
+    const sh = ey - sy;
+    ctx.drawImage(
+      frame.source,
+      sx,
+      sy,
+      sw,
+      sh,
+      (sx - region.x) * scale,
+      (sy - region.y) * scale,
+      sw * scale,
+      sh * scale,
+    );
+  }
+  if (options.outline) {
+    const [x1, y1, x2, y2] = bounds;
+    ctx.strokeStyle = options.outline;
+    ctx.lineWidth = Math.max(1, Math.round(Math.max(canvas.width, canvas.height) / 160));
+    ctx.strokeRect(
+      (Math.min(x1, x2) - region.x) * scale,
+      (Math.min(y1, y2) - region.y) * scale,
+      Math.abs(x2 - x1) * scale,
+      Math.abs(y2 - y1) * scale,
+    );
+  }
+  const transform: ChipTransform = {
+    region, scale, width: canvas.width, height: canvas.height,
+  };
+  // Upscaled crops hold few source pixels; keep them lossless so the little
+  // detail there is does not pick up compression noise.
+  const dataUrl = scale > 1
+    ? canvas.toDataURL('image/png')
+    : canvas.toDataURL('image/jpeg', options.quality ?? 0.92);
+  return { dataUrl, transform };
+}
diff --git a/client/dive-common/review/chipStore.ts b/client/dive-common/review/chipStore.ts
new file mode 100644
index 000000000..4ebe84933
--- /dev/null
+++ b/client/dive-common/review/chipStore.ts
@@ -0,0 +1,211 @@
+/**
+ * Reactive cache of rendered chips for review items, filled by a small
+ * priority queue: the first box of every requested item ("primary") is
+ * rendered before any of the extra frames a track cycles through
+ * ("sequence"), so a page paints as fast as possible and then animates.
+ *
+ * Loads run with limited concurrency: a video dataset decodes frames by
+ * seeking one hidden element, and image sequences would otherwise fire a
+ * whole page of requests at once.
+ */
+import { ref, set, del } from 'vue';
+import type { FrameSource } from './frameSource';
+import { renderChip, ChipTransform, RenderedChip } from './chipRenderer';
+import type { ReviewItem } from './types';
+
+export interface ChipStoreOptions {
+  padding: number;
+  size: number;
+  /** Chip width / height, matching the cells the chips are shown in. */
+  aspect: number;
+  outline: string;
+}
+
+export interface ChipStoreDeps {
+  /** Frame access for a dataset; null when the dataset cannot be cropped. */
+  frameSourceFor(datasetId: string): FrameSource | null;
+  concurrency?: number;
+}
+
+interface ChipJob {
+  item: ReviewItem;
+  /** Sequence slot to fill, or null for the primary chip. */
+  slot: number | null;
+  generation: number;
+}
+
+export type ChipSequence = Array<string | null>;
+export type ChipTransformSequence = Array<ChipTransform | null>;
+
+export function createChipStore(deps: ChipStoreDeps, initial: ChipStoreOptions) {
+  const concurrency = deps.concurrency ?? 4;
+  const chips = ref<Record<string, string>>({});
+  const sequences = ref<Record<string, ChipSequence>>({});
+  const failures = ref<Record<string, string>>({});
+  /** How each rendered chip maps to its frame, for overlays and editing. */
+  const transforms = ref<Record<string, ChipTransform>>({});
+  const sequenceTransforms = ref<Record<string, ChipTransformSequence>>({});
+  let options: ChipStoreOptions = { ...initial };
+  let generation = 0;
+  let active = 0;
+  const primaryQueue: ChipJob[] = [];
+  const sequenceQueue: ChipJob[] = [];
+  /** Item keys with a primary job queued or running, and its generation. */
+  const pendingPrimary = new Map<string, number>();
+  const sequenceQueued = new Map<string, number>();
+
+  function reset() {
+    generation += 1;
+    chips.value = {};
+    sequences.value = {};
+    failures.value = {};
+    transforms.value = {};
+    sequenceTransforms.value = {};
+    primaryQueue.length = 0;
+    sequenceQueue.length = 0;
+    pendingPrimary.clear();
+    sequenceQueued.clear();
+  }
+
+  /** Re-render everything when the crop or resolution changes. */
+  function setOptions(next: ChipStoreOptions) {
+    if (next.padding === options.padding && next.size === options.size
+      && next.aspect === options.aspect && next.outline === options.outline) {
+      return;
+    }
+    options = { ...next };
+    reset();
+  }
+
+  async function render(job: ChipJob): Promise<RenderedChip> {
+    const source = deps.frameSourceFor(job.item.datasetId);
+    if (!source) throw new Error('Media for this dataset cannot be cropped');
+    const frameRef = job.slot === null ? job.item.primary : job.item.frames[job.slot];
+    const frame = await source.getFrame(frameRef.frame);
+    return renderChip(frame, frameRef.bounds, options);
+  }
+
+  function complete(job: ChipJob, rendered: RenderedChip | null, error?: unknown) {
+    if (job.generation !== generation) return;
+    const { key } = job.item;
+    if (job.slot === null) {
+      if (rendered) {
+        set(chips.value, key, rendered.dataUrl);
+        set(transforms.value, key, rendered.transform);
+      } else {
+        set(failures.value, key, error instanceof Error ? error.message : 'Could not render this chip');
+      }
+    } else if (rendered) {
+      const slots = sequences.value[key];
+      if (slots) set(slots, job.slot, rendered.dataUrl);
+      const slotTransforms = sequenceTransforms.value[key];
+      if (slotTransforms) set(slotTransforms, job.slot, rendered.transform);
+    }
+  }
+
+  function finish(job: ChipJob) {
+    active -= 1;
+    if (job.slot === null && pendingPrimary.get(job.item.key) === job.generation) {
+      pendingPrimary.delete(job.item.key);
+    }
+    pump();
+  }
+
+  function start(job: ChipJob) {
+    active += 1;
+    render(job)
+      .then((rendered) => complete(job, rendered))
+      .catch((err) => complete(job, null, err))
+      .finally(() => finish(job));
+  }
+
+  function pump() {
+    while (active < concurrency) {
+      const job = primaryQueue.shift() ?? sequenceQueue.shift();
+      if (!job) return;
+      start(job);
+    }
+  }
+
+  /** Queue the first box of each item not already rendered or queued. */
+  function ensurePrimary(items: readonly ReviewItem[]) {
+    items.forEach((item) => {
+      if (chips.value[item.key] || failures.value[item.key]) return;
+      if (pendingPrimary.get(item.key) === generation) return;
+      pendingPrimary.set(item.key, generation);
+      primaryQueue.push({ item, slot: null, generation });
+    });
+    pump();
+  }
+
+  /**
+   * Queue the cycling frames of track items. Call with just the visible
+   * page: every frame of a video dataset costs a seek.
+   */
+  function ensureSequences(items: readonly ReviewItem[]) {
+    items.forEach((item) => {
+      if (item.frames.length < 2) return;
+      if (sequenceQueued.get(item.key) === generation) return;
+      sequenceQueued.set(item.key, generation);
+      // Fixed-size, null-filled so cells can show frames as they arrive.
+      set(sequences.value, item.key, item.frames.map((): string | null => null));
+      set(sequenceTransforms.value, item.key, item.frames.map((): ChipTransform | null => null));
+      item.frames.forEach((_, slot) => {
+        sequenceQueue.push({ item, slot, generation });
+      });
+    });
+    pump();
+  }
+
+  /** Drop queued work that is no longer visible (rendered chips stay cached). */
+  function trimQueues(visibleKeys: ReadonlySet<string>) {
+    const keep = (job: ChipJob) => visibleKeys.has(job.item.key);
+    const droppedPrimary = primaryQueue.filter((job) => !keep(job));
+    droppedPrimary.forEach((job) => {
+      if (pendingPrimary.get(job.item.key) === job.generation) pendingPrimary.delete(job.item.key);
+    });
+    primaryQueue.splice(0, primaryQueue.length, ...primaryQueue.filter(keep));
+    const droppedSequence = sequenceQueue.filter((job) => !keep(job));
+    droppedSequence.forEach((job) => {
+      sequenceQueued.delete(job.item.key);
+      if (job.generation === generation) {
+        del(sequences.value, job.item.key);
+        del(sequenceTransforms.value, job.item.key);
+      }
+    });
+    sequenceQueue.splice(0, sequenceQueue.length, ...sequenceQueue.filter(keep));
+  }
+
+  /**
+   * Forget an item's chips (its boxes changed) so the next ensure call
+   * renders them again. Queued work for the item is dropped too.
+   */
+  function invalidate(key: string) {
+    del(chips.value, key);
+    del(failures.value, key);
+    del(transforms.value, key);
+    del(sequences.value, key);
+    del(sequenceTransforms.value, key);
+    pendingPrimary.delete(key);
+    sequenceQueued.delete(key);
+    primaryQueue.splice(0, primaryQueue.length, ...primaryQueue.filter((job) => job.item.key !== key));
+    sequenceQueue.splice(0, sequenceQueue.length, ...sequenceQueue.filter((job) => job.item.key !== key));
+  }
+
+  return {
+    chips,
+    sequences,
+    failures,
+    transforms,
+    sequenceTransforms,
+    setOptions,
+    ensurePrimary,
+    ensureSequences,
+    trimQueues,
+    invalidate,
+    reset,
+    get options() { return options; },
+  };
+}
+
+export type ChipStore = ReturnType<typeof createChipStore>;
diff --git a/client/dive-common/review/frameSource.ts b/client/dive-common/review/frameSource.ts
new file mode 100644
index 000000000..dd843b134
--- /dev/null
+++ b/client/dive-common/review/frameSource.ts
@@ -0,0 +1,234 @@
+/**
+ * Per-dataset access to decoded frames for chip cropping. Image sequences
+ * load their frame images directly; videos are decoded by a hidden
+ * HTMLVideoElement seeking to each requested frame.
+ */
+import type { DatasetConfig } from 'dive-common/apispec';
+import { frameToVideoTime } from 'vue-media-annotator/components/annotators/videoSeek';
+
+/** Anything drawImage accepts, with its pixel size. */
+export interface DecodedFrame {
+  source: CanvasImageSource;
+  width: number;
+  height: number;
+}
+
+export interface FrameSource {
+  /** Frames the dataset has; null when unknown (video before metadata loads). */
+  frameCount: number | null;
+  getFrame(frame: number): Promise<DecodedFrame>;
+  dispose(): void;
+}
+
+export interface FrameSourceOptions {
+  /** Decoded frames kept per dataset. */
+  cacheSize?: number;
+}
+
+const DefaultCacheSize = 24;
+
+class FrameCache {
+  private entries = new Map<number, DecodedFrame>();
+
+  private readonly limit: number;
+
+  constructor(limit: number) {
+    this.limit = limit;
+  }
+
+  get(frame: number): DecodedFrame | undefined {
+    const hit = this.entries.get(frame);
+    if (hit) {
+      // Re-insert so the map keeps least-recently-used order.
+      this.entries.delete(frame);
+      this.entries.set(frame, hit);
+    }
+    return hit;
+  }
+
+  set(frame: number, decoded: DecodedFrame) {
+    this.entries.delete(frame);
+    this.entries.set(frame, decoded);
+    while (this.entries.size > this.limit) {
+      const oldest = this.entries.keys().next().value;
+      if (oldest === undefined) break;
+      this.entries.delete(oldest);
+    }
+  }
+
+  clear() {
+    this.entries.clear();
+  }
+}
+
+export function loadImage(url: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    // Needed so the crop canvas is not tainted; both platforms serve media with CORS headers.
+    image.crossOrigin = 'anonymous';
+    image.onload = () => resolve(image);
+    image.onerror = () => reject(new Error(`Could not load ${url}`));
+    image.src = url;
+  });
+}
+
+/** Dedupes concurrent requests for the same frame in front of a loader. */
+function withCache(
+  cache: FrameCache,
+  load: (frame: number) => Promise<DecodedFrame>,
+): (frame: number) => Promise<DecodedFrame> {
+  const inflight = new Map<number, Promise<DecodedFrame>>();
+  return (frame: number) => {
+    const cached = cache.get(frame);
+    if (cached) return Promise.resolve(cached);
+    const pending = inflight.get(frame);
+    if (pending) return pending;
+    const promise = load(frame).then((decoded) => {
+      cache.set(frame, decoded);
+      return decoded;
+    }).finally(() => inflight.delete(frame));
+    inflight.set(frame, promise);
+    return promise;
+  };
+}
+
+function imageFrameSource(urlFor: (frame: number) => Promise<string>, frameCount: number | null, cacheSize: number): FrameSource {
+  const cache = new FrameCache(cacheSize);
+  const getFrame = withCache(cache, async (frame) => {
+    const image = await loadImage(await urlFor(frame));
+    return { source: image, width: image.naturalWidth, height: image.naturalHeight };
+  });
+  return {
+    frameCount,
+    getFrame,
+    dispose: () => cache.clear(),
+  };
+}
+
+const SeekTimeoutMs = 15000;
+
+/**
+ * One hidden video element per dataset; seeks are serialized because an
+ * element can only sit on one frame at a time. Each decoded frame is copied
+ * to its own canvas so the cache survives the next seek.
+ */
+function videoFrameSource(config: DatasetConfig, cacheSize: number): FrameSource {
+  const cache = new FrameCache(cacheSize);
+  let video: HTMLVideoElement | null = null;
+  let metadata: Promise<HTMLVideoElement> | null = null;
+  let queue: Promise<unknown> = Promise.resolve();
+  let disposed = false;
+
+  function element(): Promise<HTMLVideoElement> {
+    if (metadata) return metadata;
+    metadata = new Promise((resolve, reject) => {
+      const el = document.createElement('video');
+      el.crossOrigin = 'anonymous';
+      el.muted = true;
+      el.preload = 'auto';
+      el.playsInline = true;
+      el.onloadedmetadata = () => resolve(el);
+      el.onerror = () => reject(new Error(`Could not open video for ${config.name}`));
+      el.src = config.videoUrl || '';
+      video = el;
+    });
+    return metadata;
+  }
+
+  function seekTo(el: HTMLVideoElement, time: number): Promise<void> {
+    return new Promise((resolve, reject) => {
+      let settled = false;
+      const timer = window.setTimeout(() => {
+        if (settled) return;
+        settled = true;
+        cleanup();
+        reject(new Error('Timed out seeking the video'));
+      }, SeekTimeoutMs);
+      function cleanup() {
+        el.removeEventListener('seeked', onSeeked);
+        el.removeEventListener('error', onError);
+        window.clearTimeout(timer);
+      }
+      function onSeeked() {
+        if (settled) return;
+        settled = true;
+        cleanup();
+        resolve();
+      }
+      function onError() {
+        if (settled) return;
+        settled = true;
+        cleanup();
+        reject(new Error('The video failed while seeking'));
+      }
+      el.addEventListener('seeked', onSeeked);
+      el.addEventListener('error', onError);
+      // Seeking to the time the element already sits at fires no event.
+      if (Math.abs(el.currentTime - time) < 1e-6 && el.readyState >= 2) {
+        onSeeked();
+        return;
+      }
+      // eslint-disable-next-line no-param-reassign
+      el.currentTime = time;
+    });
+  }
+
+  const getFrame = withCache(cache, (frame) => {
+    const run = queue.then(async () => {
+      if (disposed) throw new Error('Frame source disposed');
+      const el = await element();
+      await seekTo(el, frameToVideoTime(frame, config.fps, config.originalFps ?? null));
+      const canvas = document.createElement('canvas');
+      canvas.width = el.videoWidth;
+      canvas.height = el.videoHeight;
+      const ctx = canvas.getContext('2d');
+      if (!ctx) throw new Error('Canvas unavailable');
+      ctx.drawImage(el, 0, 0);
+      return { source: canvas, width: canvas.width, height: canvas.height } as DecodedFrame;
+    });
+    // Failures must not wedge the queue for later frames.
+    queue = run.catch(() => undefined);
+    return run;
+  });
+
+  return {
+    frameCount: null,
+    getFrame,
+    dispose: () => {
+      disposed = true;
+      cache.clear();
+      if (video) {
+        video.removeAttribute('src');
+        video.load();
+        video = null;
+      }
+      metadata = null;
+    },
+  };
+}
+
+/**
+ * Pick the loader for a dataset, or throw for media the review grid cannot
+ * crop (tiled large images, multicamera parents).
+ */
+export function createFrameSource(config: DatasetConfig, options: FrameSourceOptions = {}): FrameSource {
+  const cacheSize = options.cacheSize ?? DefaultCacheSize;
+  if (config.type === 'large-image') {
+    throw new Error('Tiled large-image datasets cannot be reviewed as chips yet');
+  }
+  if (config.type === 'multi') {
+    throw new Error('Review the cameras of a multicamera dataset individually');
+  }
+  if (config.type === 'video') {
+    if (config.videoUrl) {
+      return videoFrameSource(config, cacheSize);
+    }
+    throw new Error('This video has no playable media');
+  }
+  const { imageData } = config;
+  return imageFrameSource(async (frame) => {
+    const entry = imageData[frame];
+    if (!entry) throw new Error(`No image for frame ${frame}`);
+    return entry.url;
+  }, imageData.length, cacheSize);
+}
diff --git a/client/dive-common/review/gridSettings.spec.ts b/client/dive-common/review/gridSettings.spec.ts
new file mode 100644
index 000000000..be1a0abb3
--- /dev/null
+++ b/client/dive-common/review/gridSettings.spec.ts
@@ -0,0 +1,33 @@
+import { cellScaleFor, clampGrid } from './gridSettings';
+import { DEFAULT_REVIEW_GRID } from './types';
+
+describe('clampGrid', () => {
+  it('rounds and clamps columns and rows and clamps padding', () => {
+    expect(clampGrid({
+      ...DEFAULT_REVIEW_GRID, columns: 40, rows: 0.4, padding: -2,
+    })).toMatchObject({
+      columns: 12, rows: 1, padding: 0,
+    });
+    expect(clampGrid({
+      ...DEFAULT_REVIEW_GRID, columns: 3.6, rows: 2.2, padding: 0.5,
+    })).toMatchObject({
+      columns: 4, rows: 2, padding: 0.5,
+    });
+  });
+
+  it('falls back to defaults for non-numbers', () => {
+    expect(clampGrid({ ...DEFAULT_REVIEW_GRID, columns: Number.NaN, rows: Infinity })).toMatchObject({
+      columns: DEFAULT_REVIEW_GRID.columns, rows: DEFAULT_REVIEW_GRID.rows,
+    });
+  });
+});
+
+describe('cellScaleFor', () => {
+  it('grows footer text as the grid shows fewer cells, within limits', () => {
+    expect(cellScaleFor(5, 4)).toBeCloseTo(1.12, 2);
+    expect(cellScaleFor(3, 3)).toBe(1.35);
+    expect(cellScaleFor(1, 1)).toBe(1.35);
+    expect(cellScaleFor(8, 6)).toBe(1);
+    expect(cellScaleFor(12, 10)).toBe(1);
+  });
+});
diff --git a/client/dive-common/review/gridSettings.ts b/client/dive-common/review/gridSettings.ts
new file mode 100644
index 000000000..cc10bdbb7
--- /dev/null
+++ b/client/dive-common/review/gridSettings.ts
@@ -0,0 +1,60 @@
+/**
+ * Grid presentation settings (columns, rows, context margin) shared by every
+ * chip grid in the app and remembered per browser.
+ */
+import { reactive, watch } from 'vue';
+import { DEFAULT_REVIEW_GRID, REVIEW_GRID_LIMITS, ReviewGridSettings } from './types';
+
+/**
+ * Size factor for a cell's footer text: a 5x4 grid reads about a tenth
+ * larger than the base size, a 3x3 grid about a third larger, and dense
+ * grids stay at the base size.
+ */
+export function cellScaleFor(columns: number, rows: number): number {
+  const cells = Math.max(1, columns * rows);
+  return Math.round(Math.min(1.35, Math.max(1, 5 / Math.sqrt(cells))) * 100) / 100;
+}
+
+const GRID_STORAGE_KEY = 'dive.review.grid';
+
+export function loadGridSettings(): ReviewGridSettings {
+  try {
+    const raw = window.localStorage.getItem(GRID_STORAGE_KEY);
+    if (raw) {
+      const parsed = JSON.parse(raw);
+      if (parsed && typeof parsed === 'object') {
+        return { ...DEFAULT_REVIEW_GRID, ...parsed };
+      }
+    }
+  } catch {
+    // Storage may be unavailable; defaults are fine.
+  }
+  return { ...DEFAULT_REVIEW_GRID };
+}
+
+export function storeGridSettings(grid: ReviewGridSettings) {
+  try {
+    window.localStorage.setItem(GRID_STORAGE_KEY, JSON.stringify(grid));
+  } catch {
+    // Ignore storage failures.
+  }
+}
+
+export function clampGrid(grid: ReviewGridSettings): ReviewGridSettings {
+  const clamp = (value: number, [min, max]: readonly [number, number], fallback: number) => (
+    Number.isFinite(value) ? Math.min(max, Math.max(min, value)) : fallback
+  );
+  return {
+    ...grid,
+    columns: Math.round(clamp(grid.columns, REVIEW_GRID_LIMITS.columns, DEFAULT_REVIEW_GRID.columns)),
+    rows: Math.round(clamp(grid.rows, REVIEW_GRID_LIMITS.rows, DEFAULT_REVIEW_GRID.rows)),
+    padding: clamp(grid.padding, REVIEW_GRID_LIMITS.padding, DEFAULT_REVIEW_GRID.padding),
+  };
+}
+
+/** A reactive settings object seeded from storage and written back on change. */
+export function usePersistentGridSettings(): ReviewGridSettings {
+  const grid = reactive<ReviewGridSettings>(clampGrid(loadGridSettings()));
+  watch(grid, () => storeGridSettings({ ...grid }), { deep: true });
+  return grid;
+}
diff --git a/client/dive-common/review/reviewItems.spec.ts b/client/dive-common/review/reviewItems.spec.ts
new file mode 100644
index 000000000..ae6d0d952
--- /dev/null
+++ b/client/dive-common/review/reviewItems.spec.ts
@@ -0,0 +1,277 @@
+import type { TrackData } from 'vue-media-annotator/track';
+import {
+  attributeMatches,
+  buildReviewItems,
+  collectAttributeKeys,
+  collectTypes,
+  cycleIntervalFor,
+  frameGeometry,
+  groupReviewItems,
+  interpolateBounds,
+  matchTypePair,
+  sampleFrames,
+  sortReviewItems,
+} from './reviewItems';
+import { DEFAULT_REVIEW_QUERY } from './types';
+
+function track(
+  id: number,
+  pairs: [string, number][],
+  frames: number[],
+  extra: Partial<TrackData> = {},
+): TrackData {
+  return {
+    id,
+    begin: Math.min(...frames),
+    end: Math.max(...frames),
+    confidencePairs: pairs,
+    attributes: {},
+    features: frames.map((frame) => ({
+      frame, keyframe: true, bounds: [frame, 0, frame + 10, 10],
+    })),
+    ...extra,
+  };
+}
+
+describe('sampleFrames', () => {
+  it('keeps a single detection as one frame', () => {
+    const [only] = track(1, [['a', 1]], [3]).features;
+    expect(sampleFrames([only], 8)).toEqual([{ frame: 3, bounds: [3, 0, 13, 10] }]);
+  });
+
+  it('samples evenly including both ends and never repeats a frame', () => {
+    const { features } = track(1, [['a', 1]], [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
+    const frames = sampleFrames(features, 4).map((f) => f.frame);
+    expect(frames).toEqual([0, 3, 7, 10]);
+    expect(sampleFrames(features, 50)).toHaveLength(11);
+  });
+});
+
+describe('matchTypePair', () => {
+  it('uses the top pair when no type is requested', () => {
+    expect(matchTypePair([['fish', 0.4], ['shark', 0.9]], '', 0.5)).toEqual(['shark', 0.9]);
+    expect(matchTypePair([['fish', 0.4]], '', 0.5)).toBeNull();
+  });
+
+  it('matches the named type against the threshold', () => {
+    expect(matchTypePair([['fish', 0.4], ['shark', 0.9]], 'fish', 0.3)).toEqual(['fish', 0.4]);
+    expect(matchTypePair([['fish', 0.4], ['shark', 0.9]], 'fish', 0.5)).toBeNull();
+    expect(matchTypePair([['shark', 0.9]], 'fish', 0)).toBeNull();
+  });
+
+  it('only shows untyped tracks when everything is requested', () => {
+    expect(matchTypePair([], '', 0)).toEqual(['', 0]);
+    expect(matchTypePair([], '', 0.1)).toBeNull();
+  });
+});
+
+describe('attributeMatches', () => {
+  it('requires presence, then compares as text ignoring case', () => {
+    expect(attributeMatches(undefined, '')).toBe(false);
+    expect(attributeMatches('Yes', '')).toBe(true);
+    expect(attributeMatches('Yes', 'yes')).toBe(true);
+    expect(attributeMatches(3, '3')).toBe(true);
+    expect(attributeMatches(true, 'false')).toBe(false);
+  });
+});
+
+describe('buildReviewItems', () => {
+  const tracks = [
+    track(2, [['fish', 0.8], ['shark', 0.2]], [10, 11, 12]),
+    track(1, [['shark', 0.95]], [5]),
+    track(3, [['fish', 0.05]], [0]),
+    { ...track(4, [['fish', 0.9]], [7]), features: [{ frame: 7, keyframe: false }] },
+  ];
+
+  it('filters by type and threshold and orders by track id', () => {
+    const items = buildReviewItems('ds', tracks, { ...DEFAULT_REVIEW_QUERY, type: 'fish', threshold: 0.1 }, 8);
+    expect(items.map((i) => i.trackId)).toEqual([2]);
+    expect(items[0]).toMatchObject({
+      key: 'ds#2', type: 'fish', confidence: 0.8, keyframeCount: 3,
+    });
+    expect(items[0].primary.frame).toBe(10);
+    expect(items[0].frames).toHaveLength(3);
+  });
+
+  it('shows every class above the threshold when no type is picked', () => {
+    const items = buildReviewItems('ds', tracks, { ...DEFAULT_REVIEW_QUERY, type: '', threshold: 0.5 }, 8);
+    expect(items.map((i) => [i.trackId, i.type])).toEqual([[1, 'shark'], [2, 'fish']]);
+  });
+
+  it('finds track and detection attributes', () => {
+    const withAttributes = [
+      track(1, [['fish', 1]], [0, 1], { attributes: { verified: true } }),
+      {
+        ...track(2, [['fish', 1]], [4, 5, 6]),
+        features: [
+          { frame: 4, keyframe: true, bounds: [0, 0, 1, 1] as [number, number, number, number] },
+          {
+            frame: 5, keyframe: true, bounds: [0, 0, 1, 1] as [number, number, number, number], attributes: { occluded: 'partial' },
+          },
+          {
+            frame: 6, keyframe: true, bounds: [0, 0, 1, 1] as [number, number, number, number], attributes: { occluded: 'partial' },
+          },
+        ],
+      },
+    ];
+    const query = { ...DEFAULT_REVIEW_QUERY, mode: 'attribute' as const };
+    const verified = buildReviewItems('ds', withAttributes, { ...query, attributeKey: 'verified' }, 8);
+    expect(verified.map((i) => i.trackId)).toEqual([1]);
+    expect(verified[0].matchedAttribute).toEqual({ key: 'verified', value: true, scope: 'track' });
+
+    const occluded = buildReviewItems('ds', withAttributes, { ...query, attributeKey: 'occluded', attributeValue: 'PARTIAL' }, 8);
+    expect(occluded).toHaveLength(1);
+    expect(occluded[0]).toMatchObject({ key: 'ds#2@5', trackId: 2, type: 'fish' });
+    expect(occluded[0].primary.frame).toBe(5);
+    expect(occluded[0].frames.map((f) => f.frame)).toEqual([5, 6]);
+
+    const trackOnly = buildReviewItems('ds', withAttributes, { ...query, attributeKey: 'occluded', attributeScope: 'track' }, 8);
+    expect(trackOnly).toHaveLength(0);
+  });
+});
+
+describe('sortReviewItems', () => {
+  const items = [
+    ...buildReviewItems('b', [track(1, [['a', 0.5]], [9]), track(2, [['a', 0.9]], [3])], DEFAULT_REVIEW_QUERY, 8),
+    ...buildReviewItems('a', [track(7, [['a', 0.7]], [1])], DEFAULT_REVIEW_QUERY, 8),
+  ];
+
+  it('orders by dataset selection order, confidence or frame', () => {
+    const keys = (order: Parameters<typeof sortReviewItems>[1]) => (
+      sortReviewItems(items, order, ['a', 'b']).map((i) => i.key)
+    );
+    expect(keys('dataset')).toEqual(['a#7', 'b#1', 'b#2']);
+    expect(keys('confidence-asc')).toEqual(['b#1', 'a#7', 'b#2']);
+    expect(keys('confidence-desc')).toEqual(['b#2', 'a#7', 'b#1']);
+    expect(keys('frame')).toEqual(['a#7', 'b#2', 'b#1']);
+  });
+});
+
+describe('vocabularies', () => {
+  it('collects sorted types and attribute keys', () => {
+    const tracks = [
+      track(1, [['zeta', 0.1], ['alpha', 0.9]], [0], { attributes: { trackAttr: 1 } }),
+      {
+        ...track(2, [['beta', 1]], [0]),
+        features: [{
+          frame: 0, keyframe: true, bounds: [0, 0, 1, 1] as [number, number, number, number], attributes: { detAttr: 'x' },
+        }],
+      },
+    ];
+    expect(collectTypes(tracks)).toEqual(['alpha', 'beta', 'zeta']);
+    expect(collectTypes(tracks, 0.5)).toEqual(['alpha', 'beta']);
+    expect(collectAttributeKeys(tracks, {
+      defined: {
+        belongs: 'track', datatype: 'text', name: 'defined', key: 'track_defined',
+      },
+    })).toEqual(['defined', 'detAttr', 'trackAttr']);
+  });
+});
+
+describe('frameGeometry', () => {
+  it('reads polygons and head/tail points from the GeoJSON features', () => {
+    const geometry = frameGeometry({
+      frame: 2,
+      bounds: [0, 0, 10, 10],
+      geometry: {
+        type: 'FeatureCollection',
+        features: [
+          {
+            type: 'Feature',
+            properties: { key: '' },
+            geometry: { type: 'Polygon', coordinates: [[[1, 1], [9, 1], [9, 9], [1, 1]]] },
+          },
+          { type: 'Feature', properties: { key: 'head' }, geometry: { type: 'Point', coordinates: [3, 4] } },
+          { type: 'Feature', properties: { key: 'tail' }, geometry: { type: 'Point', coordinates: [7, 8] } },
+          { type: 'Feature', properties: { key: 'HeadTails' }, geometry: { type: 'LineString', coordinates: [[3, 4], [7, 8]] } },
+        ],
+      },
+    });
+    expect(geometry).toEqual({
+      polygons: [[[1, 1], [9, 1], [9, 9]]],
+      head: [3, 4],
+      tail: [7, 8],
+    });
+  });
+
+  it('falls back to the feature head/tail fields and leaves plain boxes bare', () => {
+    expect(frameGeometry({ frame: 0, bounds: [0, 0, 1, 1], head: [1, 2] })).toEqual({ head: [1, 2] });
+    expect(frameGeometry({ frame: 0, bounds: [0, 0, 1, 1] })).toEqual({});
+  });
+});
+
+describe('cycleIntervalFor', () => {
+  it('plays consecutive frames at the dataset rate and sparse samples proportionally slower', () => {
+    const consecutive = [0, 1, 2, 3].map((frame) => ({ frame, bounds: [0, 0, 1, 1] as [number, number, number, number] }));
+    expect(cycleIntervalFor(consecutive, 10, 400)).toBe(100);
+    const sparse = [0, 30, 60, 90].map((frame) => ({ frame, bounds: [0, 0, 1, 1] as [number, number, number, number] }));
+    expect(cycleIntervalFor(sparse, 30, 400)).toBe(1000);
+    expect(cycleIntervalFor(sparse, 1, 400)).toBe(2000);
+    expect(cycleIntervalFor(consecutive, 120, 400)).toBe(33);
+  });
+
+  it('falls back when the rate is unknown or there is nothing to cycle', () => {
+    const one = [{ frame: 5, bounds: [0, 0, 1, 1] as [number, number, number, number] }];
+    expect(cycleIntervalFor(one, 30, 400)).toBe(400);
+    expect(cycleIntervalFor([...one, { frame: 6, bounds: [0, 0, 1, 1] }], 0, 400)).toBe(400);
+  });
+});
+
+describe('interpolateBounds', () => {
+  it('holds the nearest box at the ends and interpolates between keyframes', () => {
+    const t = track(1, [['fish', 1]], [0, 10]);
+    expect(interpolateBounds(t, 5)).toEqual([5, 0, 15, 10]);
+    expect(interpolateBounds(t, -3)).toEqual([0, 0, 10, 10]);
+    expect(interpolateBounds(t, 20)).toEqual([10, 0, 20, 10]);
+    expect(interpolateBounds(t, 10)).toEqual([10, 0, 20, 10]);
+    expect(interpolateBounds({ ...t, features: [] }, 3)).toBeNull();
+  });
+});
+
+describe('groupReviewItems', () => {
+  it('joins a track across the cameras of a rig with aligned frames and box-less gaps', () => {
+    const left = track(7, [['fish', 1]], [0, 4]);
+    const right = track(7, [['fish', 1]], [4, 8]);
+    const query = { ...DEFAULT_REVIEW_QUERY, threshold: 0 };
+    const items = [
+      ...buildReviewItems('rig/right', [right], query, 8),
+      ...buildReviewItems('rig/left', [left], query, 8),
+      ...buildReviewItems('solo', [track(1, [['fish', 1]], [2])], query, 8),
+    ];
+    const membership = (id: string) => (id.startsWith('rig/')
+      ? { parent: 'rig', camera: id.slice(4), rank: id === 'rig/left' ? 0 : 1 }
+      : undefined);
+    const tracks: Record<string, TrackData> = { 'rig/left': left, 'rig/right': right };
+    const entries = groupReviewItems(items, membership, (item) => tracks[item.datasetId], 8);
+
+    expect(entries.map((e) => e.key)).toEqual(['rig#7', 'solo#1']);
+    const rig = entries[0];
+    expect(rig.labels).toEqual(['left', 'right']);
+    expect(rig.items.map((i) => i.datasetId)).toEqual(['rig/left', 'rig/right']);
+    // Both cameras show frames 0, 4 and 8; the sides without a detection are interpolated.
+    expect(rig.items[0].frames.map((f) => [f.frame, f.missing ?? false])).toEqual([[0, false], [4, false], [8, true]]);
+    expect(rig.items[1].frames.map((f) => [f.frame, f.missing ?? false])).toEqual([[0, true], [4, false], [8, false]]);
+    expect(rig.items[0].frames[2].bounds).toEqual([4, 0, 14, 10]);
+    expect(entries[1].labels).toEqual(['']);
+  });
+});
+
+it('groups detection matches from different frames into the same camera track', () => {
+  const left = track(7, [['fish', 1]], [0]);
+  const right = track(7, [['fish', 1]], [4]);
+  left.features[0].attributes = { checked: true };
+  right.features[0].attributes = { checked: true };
+  const query = { ...DEFAULT_REVIEW_QUERY, mode: 'attribute' as const, attributeKey: 'checked' };
+  const items = [
+    ...buildReviewItems('rig/left', [left], query, 8),
+    ...buildReviewItems('rig/right', [right], query, 8),
+  ];
+  const entries = groupReviewItems(
+    items,
+    (id) => ({ parent: 'rig', camera: id, rank: id === 'rig/left' ? 0 : 1 }),
+    (item) => (item.datasetId === 'rig/left' ? left : right),
+    8,
+  );
+  expect(entries).toHaveLength(1);
+  expect(entries[0].items).toHaveLength(2);
+});
diff --git a/client/dive-common/review/reviewItems.ts b/client/dive-common/review/reviewItems.ts
new file mode 100644
index 000000000..0a99f4bad
--- /dev/null
+++ b/client/dive-common/review/reviewItems.ts
@@ -0,0 +1,394 @@
+/**
+ * Pure helpers that turn a dataset's tracks into review grid items for a
+ * query, plus the type/attribute vocabularies the query controls offer.
+ */
+import type { TrackData, Feature } from 'vue-media-annotator/track';
+import type { StringKeyObject } from 'vue-media-annotator/BaseAnnotation';
+import type { Attribute } from 'vue-media-annotator/use/AttributeTypes';
+import { compareTypeNames } from 'dive-common/typeHierarchy';
+import type { RectBounds } from 'vue-media-annotator/utils';
+import type {
+  ReviewEntry, ReviewFrameGeometry, ReviewFrameRef, ReviewItem, ReviewPolygon, ReviewQuery, ReviewSortOrder,
+} from './types';
+
+function isPoint(value: unknown): value is [number, number] {
+  return Array.isArray(value) && value.length >= 2
+    && Number.isFinite(value[0]) && Number.isFinite(value[1]);
+}
+
+/**
+ * Polygons and head/tail points of a keyframe. Points come from the
+ * GeoJSON features keyed "head"/"tail" (how DIVE stores them), falling back
+ * to the feature's own head/tail fields.
+ */
+export function frameGeometry(feature: Feature): ReviewFrameGeometry {
+  const geometry: ReviewFrameGeometry = {};
+  const polygons: ReviewPolygon[] = [];
+  (feature.geometry?.features || []).forEach((geo) => {
+    const key = (geo.properties as { key?: unknown } | null)?.key;
+    if (geo.geometry.type === 'Polygon') {
+      const ring = (geo.geometry.coordinates[0] || []).filter(isPoint).map(([x, y]) => [x, y] as [number, number]);
+      if (ring.length > 1 && ring[0][0] === ring[ring.length - 1][0] && ring[0][1] === ring[ring.length - 1][1]) {
+        ring.pop();
+      }
+      if (ring.length >= 3) polygons.push(ring);
+    } else if (geo.geometry.type === 'Point' && (key === 'head' || key === 'tail')) {
+      const point = geo.geometry.coordinates;
+      if (isPoint(point)) geometry[key] = [point[0], point[1]];
+    }
+  });
+  if (!geometry.head && isPoint(feature.head)) geometry.head = [feature.head[0], feature.head[1]];
+  if (!geometry.tail && isPoint(feature.tail)) geometry.tail = [feature.tail[0], feature.tail[1]];
+  if (polygons.length) geometry.polygons = polygons;
+  return geometry;
+}
+
+/** A frame reference for a keyframe, carrying its extra geometry when present. */
+export function frameRefFor(feature: Feature): ReviewFrameRef | null {
+  if (!feature.bounds) return null;
+  return { frame: feature.frame, bounds: feature.bounds, ...frameGeometry(feature) };
+}
+
+/** Keyframes carrying a box, in frame order. */
+export function boxedFeatures(track: TrackData): Feature[] {
+  return track.features
+    .filter((f) => !!f.bounds)
+    .sort((a, b) => a.frame - b.frame);
+}
+
+/** Up to `max` boxes evenly sampled along `features` (which must be in frame order). */
+export function sampleFrames(features: Feature[], max: number): ReviewFrameRef[] {
+  if (features.length === 0) return [];
+  const count = Math.max(1, Math.min(max, features.length));
+  const chosen: ReviewFrameRef[] = [];
+  const seen = new Set<number>();
+  for (let i = 0; i < count; i += 1) {
+    const index = count === 1 ? 0 : Math.round((i * (features.length - 1)) / (count - 1));
+    const feature = features[index];
+    const ref = frameRefFor(feature);
+    if (ref && !seen.has(feature.frame)) {
+      seen.add(feature.frame);
+      chosen.push(ref);
+    }
+  }
+  return chosen;
+}
+
+/**
+ * Milliseconds between the sampled frames of a track so that cycling
+ * through them plays at the dataset's real-time rate: consecutive frames
+ * advance every 1/fps seconds, and sparser samples wait proportionally
+ * longer. Clamped so a loop is neither a strobe nor a slideshow.
+ */
+export function cycleIntervalFor(frames: readonly ReviewFrameRef[], fps: number, fallbackMs: number): number {
+  if (frames.length < 2 || !(fps > 0)) return fallbackMs;
+  const span = frames[frames.length - 1].frame - frames[0].frame;
+  const stride = Math.max(1, span / (frames.length - 1));
+  return Math.min(2000, Math.max(33, Math.round((stride / fps) * 1000)));
+}
+
+/** The pair a type query matches on, or null when the track does not qualify. */
+export function matchTypePair(
+  pairs: readonly (readonly [string, number])[],
+  type: string,
+  threshold: number,
+): [string, number] | null {
+  if (pairs.length === 0) {
+    // Untyped annotations only show up when every type is requested.
+    return type === '' && threshold <= 0 ? ['', 0] : null;
+  }
+  // Stored pairs are normally sorted by confidence, but files are not guaranteed to be.
+  const candidates = type === '' ? pairs : pairs.filter(([name]) => name === type);
+  const best = candidates.reduce<readonly [string, number] | null>(
+    (acc, pair) => (acc === null || pair[1] > acc[1] ? pair : acc),
+    null,
+  );
+  if (!best || best[1] < threshold) return null;
+  return [best[0], best[1]];
+}
+
+function ownAttributes(attributes: StringKeyObject | undefined): [string, unknown][] {
+  if (!attributes) return [];
+  return Object.entries(attributes).filter(([key]) => key !== 'userAttributes');
+}
+
+/** Attribute values compare as strings, case-insensitively; empty wanted means "present". */
+export function attributeMatches(value: unknown, wanted: string): boolean {
+  if (value === undefined || value === null) return false;
+  if (wanted === '') return true;
+  const asText = Array.isArray(value) ? value.map(String).join(',') : String(value);
+  return asText.toLowerCase() === wanted.trim().toLowerCase();
+}
+
+function trackTopPair(track: TrackData): [string, number] {
+  const top = track.confidencePairs.reduce<readonly [string, number] | null>(
+    (acc, pair) => (acc === null || pair[1] > acc[1] ? pair : acc),
+    null,
+  );
+  return top ? [top[0], top[1]] : ['', 0];
+}
+
+function attributeItem(
+  datasetId: string,
+  track: TrackData,
+  query: ReviewQuery,
+  maxSequenceFrames: number,
+): ReviewItem | null {
+  const key = query.attributeKey.trim();
+  if (!key) return null;
+  const features = boxedFeatures(track);
+  if (features.length === 0) return null;
+  const [type, confidence] = trackTopPair(track);
+  const base = {
+    datasetId,
+    trackId: track.id,
+    keyframeCount: features.length,
+    type,
+    confidence,
+  };
+  if (query.attributeScope !== 'detection') {
+    const hit = ownAttributes(track.attributes).find(
+      ([name, value]) => name === key && attributeMatches(value, query.attributeValue),
+    );
+    if (hit) {
+      const frames = sampleFrames(features, maxSequenceFrames);
+      return {
+        ...base,
+        key: `${datasetId}#${track.id}`,
+        primary: frames[0],
+        frames,
+        matchedAttribute: { key, value: hit[1], scope: 'track' },
+      };
+    }
+  }
+  if (query.attributeScope !== 'track') {
+    const matching = features.filter((f) => ownAttributes(f.attributes).some(
+      ([name, value]) => name === key && attributeMatches(value, query.attributeValue),
+    ));
+    if (matching.length > 0) {
+      const frames = sampleFrames(matching, maxSequenceFrames);
+      const hit = ownAttributes(matching[0].attributes).find(([name]) => name === key);
+      return {
+        ...base,
+        key: `${datasetId}#${track.id}@${matching[0].frame}`,
+        primary: frames[0],
+        frames,
+        matchedAttribute: { key, value: hit ? hit[1] : undefined, scope: 'detection' },
+      };
+    }
+  }
+  return null;
+}
+
+function typeItem(
+  datasetId: string,
+  track: TrackData,
+  query: ReviewQuery,
+  maxSequenceFrames: number,
+): ReviewItem | null {
+  const pair = matchTypePair(track.confidencePairs, query.type, query.threshold);
+  if (!pair) return null;
+  const features = boxedFeatures(track);
+  if (features.length === 0) return null;
+  const frames = sampleFrames(features, maxSequenceFrames);
+  return {
+    key: `${datasetId}#${track.id}`,
+    datasetId,
+    trackId: track.id,
+    primary: frames[0],
+    frames,
+    keyframeCount: features.length,
+    type: pair[0],
+    confidence: pair[1],
+  };
+}
+
+/** Every grid item one dataset contributes to a query, in track id order. */
+export function buildReviewItems(
+  datasetId: string,
+  tracks: Iterable<TrackData>,
+  query: ReviewQuery,
+  maxSequenceFrames: number,
+): ReviewItem[] {
+  const items: ReviewItem[] = [];
+  Array.from(tracks)
+    .sort((a, b) => a.id - b.id)
+    .forEach((track) => {
+      const item = query.mode === 'attribute'
+        ? attributeItem(datasetId, track, query, maxSequenceFrames)
+        : typeItem(datasetId, track, query, maxSequenceFrames);
+      if (item) items.push(item);
+    });
+  return items;
+}
+
+export function sortReviewItems(
+  items: ReviewItem[],
+  order: ReviewSortOrder,
+  datasetOrder: readonly string[],
+): ReviewItem[] {
+  const rank = new Map(datasetOrder.map((id, index) => [id, index]));
+  const byDataset = (a: ReviewItem, b: ReviewItem) => (
+    (rank.get(a.datasetId) ?? Infinity) - (rank.get(b.datasetId) ?? Infinity)
+  );
+  const sorted = [...items];
+  switch (order) {
+    case 'confidence-asc':
+      sorted.sort((a, b) => a.confidence - b.confidence || byDataset(a, b) || a.trackId - b.trackId);
+      break;
+    case 'confidence-desc':
+      sorted.sort((a, b) => b.confidence - a.confidence || byDataset(a, b) || a.trackId - b.trackId);
+      break;
+    case 'frame':
+      sorted.sort((a, b) => byDataset(a, b) || a.primary.frame - b.primary.frame || a.trackId - b.trackId);
+      break;
+    default:
+      sorted.sort((a, b) => byDataset(a, b) || a.trackId - b.trackId);
+  }
+  return sorted;
+}
+
+/** Which multicamera parent and camera a dataset id belongs to, if any. */
+export interface CameraMembership {
+  parent: string;
+  camera: string;
+  /** Position of the camera in the rig's display order. */
+  rank: number;
+}
+
+/**
+ * Box a track would have on `frame` in one camera, interpolated between
+ * its nearest keyframes with boxes (held at the ends), or null when the
+ * track has no boxes there at all.
+ */
+export function interpolateBounds(track: TrackData, frame: number): RectBounds | null {
+  const features = boxedFeatures(track);
+  if (features.length === 0) return null;
+  const exact = features.find((f) => f.frame === frame);
+  if (exact?.bounds) return exact.bounds;
+  const before = [...features].reverse().find((f) => f.frame < frame);
+  const after = features.find((f) => f.frame > frame);
+  if (before?.bounds && after?.bounds) {
+    const t = (frame - before.frame) / (after.frame - before.frame);
+    return before.bounds.map((v, i) => v + ((after.bounds as RectBounds)[i] - v) * t) as RectBounds;
+  }
+  return (before?.bounds ?? after?.bounds) ?? null;
+}
+
+/**
+ * Give the items of a multicamera entry the same frames: the union of their
+ * keyframes sampled once, with a camera that lacks a detection on a frame
+ * getting an interpolated, box-less reference there.
+ */
+export function alignCameraFrames(
+  items: ReviewItem[],
+  trackOf: (item: ReviewItem) => TrackData | undefined,
+  maxSequenceFrames: number,
+): ReviewItem[] {
+  if (items.length < 2) return items;
+  const byFrame = new Map<number, Feature>();
+  items.forEach((item) => {
+    const track = trackOf(item);
+    if (!track) return;
+    boxedFeatures(track).forEach((feature) => {
+      if (!byFrame.has(feature.frame)) byFrame.set(feature.frame, feature);
+    });
+  });
+  const union = Array.from(byFrame.values()).sort((a, b) => a.frame - b.frame);
+  // Detection matches keep their own frame first so the query hit stays visible.
+  const sampled = sampleFrames(union, maxSequenceFrames).map((ref) => ref.frame);
+  const anchor = items.find((item) => item.key.includes('@'))?.primary.frame;
+  if (anchor !== undefined && !sampled.includes(anchor)) sampled.unshift(anchor);
+
+  return items.map((item) => {
+    const track = trackOf(item);
+    if (!track) return item;
+    const frames: ReviewFrameRef[] = [];
+    sampled.forEach((frame) => {
+      const feature = track.features.find((f) => f.frame === frame && f.bounds);
+      if (feature) {
+        const ref = frameRefFor(feature);
+        if (ref) frames.push(ref);
+        return;
+      }
+      const bounds = interpolateBounds(track, frame);
+      if (bounds) frames.push({ frame, bounds, missing: true });
+    });
+    if (frames.length === 0) return item;
+    return {
+      ...item, primary: frames[0], frames, keyframeCount: boxedFeatures(track).length,
+    };
+  });
+}
+
+/**
+ * Group items into grid entries: one per track, holding an item per camera
+ * the track appears in (in rig order) for multicamera datasets.
+ */
+export function groupReviewItems(
+  items: readonly ReviewItem[],
+  membershipOf: (datasetId: string) => CameraMembership | undefined,
+  trackOf: (item: ReviewItem) => TrackData | undefined,
+  maxSequenceFrames: number,
+): ReviewEntry[] {
+  const entries: ReviewEntry[] = [];
+  const byKey = new Map<string, { items: ReviewItem[]; ranks: number[]; labels: string[] }>();
+  items.forEach((item) => {
+    const membership = membershipOf(item.datasetId);
+    if (!membership) {
+      entries.push({ key: item.key, items: [item], labels: [''] });
+      return;
+    }
+    const key = `${membership.parent}#${item.trackId}`;
+    let group = byKey.get(key);
+    if (!group) {
+      group = { items: [], ranks: [], labels: [] };
+      byKey.set(key, group);
+      entries.push({ key, items: group.items, labels: group.labels });
+    }
+    // Keep cameras in rig order whatever order the items arrived in.
+    let at = group.ranks.findIndex((rank) => rank > membership.rank);
+    if (at < 0) at = group.ranks.length;
+    group.items.splice(at, 0, item);
+    group.ranks.splice(at, 0, membership.rank);
+    group.labels.splice(at, 0, membership.camera);
+  });
+  return entries.map((entry) => (entry.items.length > 1
+    ? { ...entry, items: alignCameraFrames(entry.items, trackOf, maxSequenceFrames) }
+    : entry));
+}
+
+/** Every type named by any confidence pair, in type order. */
+/**
+ * Types present on the tracks, sorted; with a threshold, only those some
+ * track carries at that confidence or above, so a type query built from
+ * the list always finds something.
+ */
+export function collectTypes(tracks: Iterable<TrackData>, threshold = 0): string[] {
+  const types = new Set<string>();
+  Array.from(tracks).forEach((track) => {
+    track.confidencePairs.forEach(([type, confidence]) => {
+      if (type && confidence >= threshold) types.add(type);
+    });
+  });
+  return Array.from(types).sort(compareTypeNames);
+}
+
+/**
+ * Attribute keys the query control can offer: those defined in the dataset
+ * configuration plus any actually present on tracks or detections.
+ */
+export function collectAttributeKeys(
+  tracks: Iterable<TrackData>,
+  definitions: Readonly<Record<string, Attribute>> | undefined,
+): string[] {
+  const keys = new Set<string>();
+  Object.values(definitions || {}).forEach((attribute) => keys.add(attribute.name));
+  Array.from(tracks).forEach((track) => {
+    ownAttributes(track.attributes).forEach(([key]) => keys.add(key));
+    track.features.forEach((feature) => {
+      ownAttributes(feature.attributes).forEach(([key]) => keys.add(key));
+    });
+  });
+  return Array.from(keys).sort((a, b) => a.localeCompare(b));
+}
diff --git a/client/dive-common/review/reviewSession.spec.ts b/client/dive-common/review/reviewSession.spec.ts
new file mode 100644
index 000000000..da8750a01
--- /dev/null
+++ b/client/dive-common/review/reviewSession.spec.ts
@@ -0,0 +1,46 @@
+import { describe, expect, it } from 'vitest';
+import { ref } from 'vue';
+import type { ReviewService } from 'dive-common/use/useReview';
+import {
+  holdReviewSession, peekReviewSession, sessionKey, shouldResume, takeReviewSession,
+  useReviewSessionHeld,
+} from './reviewSession';
+
+function session(datasetIds: string[], pending = 0) {
+  return {
+    review: { pendingCount: ref(pending) } as unknown as ReviewService,
+    view: 'results' as const,
+    page: 3,
+    datasetKey: sessionKey(datasetIds),
+  };
+}
+
+describe('review session', () => {
+  it('is handed over once', () => {
+    expect(takeReviewSession()).toBeNull();
+    const held = session(['a']);
+    holdReviewSession(held);
+    expect(takeReviewSession()).toBe(held);
+    expect(takeReviewSession()).toBeNull();
+  });
+
+  it('can be peeked without taking ownership', () => {
+    expect(peekReviewSession()).toBeNull();
+    const heldFlag = useReviewSessionHeld();
+    expect(heldFlag.value).toBe(false);
+    const held = session(['a']);
+    holdReviewSession(held);
+    expect(peekReviewSession()).toBe(held);
+    expect(heldFlag.value).toBe(true);
+    expect(takeReviewSession()).toBe(held);
+    expect(peekReviewSession()).toBeNull();
+    expect(heldFlag.value).toBe(false);
+  });
+
+  it('resumes for a plain visit, the same selection, or unsaved edits', () => {
+    expect(shouldResume(session(['a', 'b']), [])).toBe(true);
+    expect(shouldResume(session(['a', 'b']), ['b', 'a'])).toBe(true);
+    expect(shouldResume(session(['a', 'b']), ['c'])).toBe(false);
+    expect(shouldResume(session(['a', 'b'], 2), ['c'])).toBe(true);
+  });
+});
diff --git a/client/dive-common/review/reviewSession.ts b/client/dive-common/review/reviewSession.ts
new file mode 100644
index 000000000..55a383f40
--- /dev/null
+++ b/client/dive-common/review/reviewSession.ts
@@ -0,0 +1,59 @@
+import { computed, shallowRef, type ComputedRef } from 'vue';
+import type { ReviewService } from 'dive-common/use/useReview';
+
+/**
+ * The review page hands its state here when it is left and takes it back
+ * when it is next shown, so navigating away and back resumes the same
+ * datasets and page (Results when any are loaded, otherwise Datasets).
+ * Unsaved edits are resolved (saved or discarded) before the leave
+ * completes. Only one session is held; a fresh start (new datasets
+ * picked in the library) replaces it.
+ */
+export interface ReviewSession {
+  review: ReviewService;
+  view: 'results' | 'datasets';
+  page: number;
+  /** Key of the datasets the session was started with, see `sessionKey`. */
+  datasetKey: string;
+}
+
+/** Shallow: the service itself must not be deeply unwrapped. */
+const held = shallowRef<ReviewSession | null>(null);
+
+export function sessionKey(ids: readonly string[]): string {
+  return [...ids].sort().join('\n');
+}
+
+export function holdReviewSession(session: ReviewSession) {
+  held.value = session;
+}
+
+/** The held session, if any; the caller now owns it. */
+export function takeReviewSession(): ReviewSession | null {
+  const session = held.value;
+  held.value = null;
+  return session;
+}
+
+/** Look at the held session without taking ownership. */
+export function peekReviewSession(): ReviewSession | null {
+  return held.value;
+}
+
+/** True while a review session is parked (e.g. the user opened the viewer). */
+export function useReviewSessionHeld(): ComputedRef<boolean> {
+  return computed(() => held.value !== null);
+}
+
+/**
+ * Whether a held session should be resumed for a page opened with
+ * `initialIds`: always when the page is opened plainly, or when the same
+ * datasets are asked for again. A held session that still has pending edits
+ * (e.g. after a hard refresh path that could not prompt) is also resumed so
+ * those edits are not dropped by a new library selection.
+ */
+export function shouldResume(session: ReviewSession, initialIds: readonly string[]): boolean {
+  if (initialIds.length === 0) return true;
+  if (session.review.pendingCount.value > 0) return true;
+  return session.datasetKey === sessionKey(initialIds);
+}
diff --git a/client/dive-common/review/types.ts b/client/dive-common/review/types.ts
new file mode 100644
index 000000000..1f5a4442e
--- /dev/null
+++ b/client/dive-common/review/types.ts
@@ -0,0 +1,130 @@
+/**
+ * Review mode: contract shared by the review page, the chip loader and the
+ * platform shells. The page shows many detections at once as cropped chips
+ * so a user can audit and correct their types (or find them by attribute)
+ * without opening every sequence in the viewer.
+ */
+import type { AnnotationId } from 'vue-media-annotator/BaseAnnotation';
+import type { RectBounds } from 'vue-media-annotator/utils';
+
+export type ReviewQueryMode = 'type' | 'attribute';
+
+/** Where an attribute query looks for the attribute. */
+export type ReviewAttributeScope = 'any' | 'track' | 'detection';
+
+export interface ReviewQuery {
+  mode: ReviewQueryMode;
+  /** Type mode: the class to show; empty for every class. */
+  type: string;
+  /** Type mode: minimum confidence of the matching pair (0 shows everything). */
+  threshold: number;
+  /** Attribute mode: the attribute key to look for. */
+  attributeKey: string;
+  /** Attribute mode: required value (string compared); empty just requires presence. */
+  attributeValue: string;
+  attributeScope: ReviewAttributeScope;
+}
+
+export type ReviewSortOrder = 'dataset' | 'confidence-asc' | 'confidence-desc' | 'frame';
+
+/** A polygon outline in image coordinates: [[x, y], ...] without a closing repeat. */
+export type ReviewPolygon = [number, number][];
+
+/** Extra geometry a detection may carry besides its box. */
+export interface ReviewFrameGeometry {
+  polygons?: ReviewPolygon[];
+  head?: [number, number];
+  tail?: [number, number];
+}
+
+/** One box of a track shown in a chip, in the dataset's own frame numbers. */
+export interface ReviewFrameRef extends ReviewFrameGeometry {
+  frame: number;
+  bounds: RectBounds;
+  /**
+   * The track has no detection on this frame in this camera; `bounds` is
+   * interpolated from its neighbours so the chip can still be cropped there,
+   * and no box is drawn.
+   */
+  missing?: boolean;
+}
+
+/**
+ * One grid entry: a track (or one detection of it) in one dataset. Built
+ * once per query run; the live type is read from the review service so
+ * edits show without the grid reshuffling.
+ */
+export interface ReviewItem {
+  /** Stable within a query run: `${datasetId}#${trackId}` or with `@frame`. */
+  key: string;
+  datasetId: string;
+  trackId: AnnotationId;
+  /** The box shown first: the matched detection, or the track's first keyframe. */
+  primary: ReviewFrameRef;
+  /**
+   * Boxes sampled along the track for the cycling animation, primary first.
+   * A single entry means a static detection.
+   */
+  frames: ReviewFrameRef[];
+  /** Number of keyframes in the track. */
+  keyframeCount: number;
+  /** Type and confidence of the pair the query matched on (top pair otherwise). */
+  type: string;
+  confidence: number;
+  /** Attribute mode: what matched. */
+  matchedAttribute?: {
+    key: string;
+    value: unknown;
+    scope: 'track' | 'detection';
+  };
+}
+
+/**
+ * One grid entry: a track shown once per camera it appears in. Single
+ * camera datasets have one item per entry; the cameras of a multicamera
+ * dataset share the entry, with their items' frames aligned.
+ */
+export interface ReviewEntry {
+  key: string;
+  items: ReviewItem[];
+  /** Camera name per item; empty strings for single-camera entries. */
+  labels: string[];
+}
+
+/** Grid presentation settings, persisted per browser. */
+export interface ReviewGridSettings {
+  columns: number;
+  rows: number;
+  /**
+   * Context around the box as a fraction of its longer side: 0.3 shows the
+   * box plus 30% of its size on each side.
+   */
+  padding: number;
+  /** Milliseconds between frames of a cycling track. */
+  cycleIntervalMs: number;
+  /** Most frames sampled along a track. */
+  maxSequenceFrames: number;
+}
+
+export const DEFAULT_REVIEW_QUERY: ReviewQuery = {
+  mode: 'type',
+  type: '',
+  threshold: 0.1,
+  attributeKey: '',
+  attributeValue: '',
+  attributeScope: 'any',
+};
+
+export const DEFAULT_REVIEW_GRID: ReviewGridSettings = {
+  columns: 5,
+  rows: 4,
+  padding: 0.3,
+  cycleIntervalMs: 400,
+  maxSequenceFrames: 8,
+};
+
+export const REVIEW_GRID_LIMITS = {
+  columns: [1, 12] as const,
+  rows: [1, 10] as const,
+  padding: [0, 3] as const,
+};
diff --git a/client/dive-common/review/useReviewGrid.ts b/client/dive-common/review/useReviewGrid.ts
new file mode 100644
index 000000000..a69105af0
--- /dev/null
+++ b/client/dive-common/review/useReviewGrid.ts
@@ -0,0 +1,181 @@
+/**
+ * Paging, zoom and chip-loading behaviour shared by every chip grid: the
+ * review page and any other view that shows {@link ReviewItem}s in a
+ * {@link ReviewGrid}. Owns the current page, keeps the chip store rendering
+ * at the cells' resolution and aspect ratio, and loads chips for the
+ * visible page (plus a prefetch of the next one).
+ */
+import {
+  computed, ref, Ref, unref, watch,
+} from 'vue';
+import { debounce } from 'lodash';
+import type { ChipStore } from './chipStore';
+import { chipSizeFor } from './chipRenderer';
+import { clampGrid } from './gridSettings';
+import { REVIEW_GRID_LIMITS, ReviewGridSettings, ReviewItem } from './types';
+
+const CHIP_OUTLINE = '#00e5ff';
+/** Height of a cell's footer (type field and caption), excluded from the image area. */
+const CELL_FOOTER_PX = 46;
+
+/** Chip aspect for a cell, coarsened so window resizes rarely force a re-render. */
+export function chipAspectFor(cellWidth: number, cellHeight: number, footerPx = CELL_FOOTER_PX): number {
+  const imageHeight = cellHeight - footerPx;
+  if (cellWidth <= 0 || imageHeight <= 0) return 1;
+  const ratio = Math.min(3, Math.max(1 / 3, cellWidth / imageHeight));
+  return Math.round(ratio * 10) / 10;
+}
+
+export interface ReviewGridOptions<T> {
+  /** What the grid pages over: review items, or entries holding several. */
+  items: Ref<readonly T[]>;
+  /** Items whose chips an entry needs; defaults to the entry being an item. */
+  chipItemsOf?: (entry: T) => readonly ReviewItem[];
+  /** Reactive grid settings (mutated in place by the setters below). */
+  grid: ReviewGridSettings;
+  chipStore: ChipStore;
+  /** Whether the grid is on screen; chips only load and keys only page while true. */
+  active: Ref<boolean>;
+  /** Footer height to exclude from the chip aspect ratio. */
+  footerPx?: number | Ref<number>;
+  /** Box outline burned into the chips; empty draws none (the cell overlays it). */
+  outline?: string;
+}
+
+/** How long paging must be idle before chips load, so skipped pages never render. */
+const PAGE_SETTLE_MS = 250;
+
+export function useReviewGrid<T = ReviewItem>(options: ReviewGridOptions<T>) {
+  const {
+    items, grid, chipStore, active,
+  } = options;
+  const chipItemsOf = options.chipItemsOf ?? ((entry: T) => [entry as unknown as ReviewItem]);
+  const chipItems = (entries: readonly T[]) => entries.flatMap((entry) => chipItemsOf(entry));
+  const page = ref(0);
+  const cellSize = ref({ width: 0, height: 0 });
+
+  const perPage = computed(() => grid.columns * grid.rows);
+  const pageCount = computed(() => Math.max(1, Math.ceil(items.value.length / perPage.value)));
+  const pageItems = computed(() => items.value.slice(page.value * perPage.value, (page.value + 1) * perPage.value));
+  const nextPageItems = computed(() => items.value.slice((page.value + 1) * perPage.value, (page.value + 2) * perPage.value));
+
+  function ensureVisible() {
+    if (!active.value) return;
+    const visible = chipItems(pageItems.value);
+    const prefetch = chipItems(nextPageItems.value);
+    chipStore.trimQueues(new Set([...visible, ...prefetch].map((i) => i.key)));
+    chipStore.ensurePrimary([...visible, ...prefetch]);
+    chipStore.ensureSequences(visible);
+  }
+
+  const applyChipOptions = debounce(() => {
+    const pixels = Math.max(cellSize.value.width, cellSize.value.height)
+      * (window.devicePixelRatio || 1);
+    if (pixels <= 0) return;
+    chipStore.setOptions({
+      padding: grid.padding,
+      size: chipSizeFor(pixels),
+      aspect: chipAspectFor(cellSize.value.width, cellSize.value.height, unref(options.footerPx)),
+      outline: options.outline ?? CHIP_OUTLINE,
+    });
+    ensureVisible();
+  }, 200);
+
+  /**
+   * Rapid paging only loads the page landed on: queued work for pages
+   * passed over is dropped at once, and new work waits for paging to settle.
+   */
+  const ensureVisibleSettled = debounce(ensureVisible, PAGE_SETTLE_MS);
+  function onPageChanged() {
+    if (!active.value) return;
+    chipStore.trimQueues(new Set(chipItems(pageItems.value).map((i) => i.key)));
+    ensureVisibleSettled();
+  }
+
+  watch(() => [grid.padding, cellSize.value.width, cellSize.value.height, unref(options.footerPx)], applyChipOptions);
+  watch(page, onPageChanged);
+  watch(active, ensureVisible);
+  watch(items, () => {
+    page.value = 0;
+    ensureVisible();
+  });
+  watch(perPage, () => {
+    page.value = Math.min(page.value, pageCount.value - 1);
+    ensureVisible();
+  });
+
+  function goToPage(next: number) {
+    page.value = Math.min(Math.max(0, next), pageCount.value - 1);
+  }
+
+  function setColumns(value: number) {
+    Object.assign(grid, clampGrid({ ...grid, columns: Number(value) }));
+  }
+
+  function setRows(value: number) {
+    Object.assign(grid, clampGrid({ ...grid, rows: Number(value) }));
+  }
+
+  function setPadding(value: number) {
+    Object.assign(grid, clampGrid({ ...grid, padding: Number(value) }));
+  }
+
+  /** Fewer, larger cells (-1) or more, smaller cells (+1), keeping the shape. */
+  function zoom(direction: 1 | -1) {
+    const ratio = grid.rows / grid.columns;
+    const columns = grid.columns + direction;
+    const rows = Math.max(1, Math.round(columns * ratio));
+    Object.assign(grid, clampGrid({ ...grid, columns, rows }));
+  }
+
+  const canZoomIn = computed(() => grid.columns > REVIEW_GRID_LIMITS.columns[0]);
+  const canZoomOut = computed(() => grid.columns < REVIEW_GRID_LIMITS.columns[1]);
+
+  function isTypingTarget(target: EventTarget | null) {
+    if (!(target instanceof HTMLElement)) return false;
+    return ['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName) || target.isContentEditable;
+  }
+
+  /** Arrow / page keys page the grid; returns true when the key was consumed. */
+  function handleKeydown(event: KeyboardEvent): boolean {
+    if (!active.value || isTypingTarget(event.target)) return false;
+    if (event.key === 'ArrowLeft' || event.key === 'PageUp') {
+      goToPage(page.value - 1);
+    } else if (event.key === 'ArrowRight' || event.key === 'PageDown') {
+      goToPage(page.value + 1);
+    } else if (event.key === 'Home') {
+      goToPage(0);
+    } else if (event.key === 'End') {
+      goToPage(pageCount.value - 1);
+    } else {
+      return false;
+    }
+    event.preventDefault();
+    return true;
+  }
+
+  function dispose() {
+    applyChipOptions.cancel();
+    ensureVisibleSettled.cancel();
+  }
+
+  return {
+    page,
+    pageCount,
+    perPage,
+    pageItems,
+    cellSize,
+    ensureVisible,
+    goToPage,
+    setColumns,
+    setRows,
+    setPadding,
+    zoom,
+    canZoomIn,
+    canZoomOut,
+    handleKeydown,
+    dispose,
+  };
+}
+
+export type ReviewGridController = ReturnType<typeof useReviewGrid>;
diff --git a/client/dive-common/review/viewerNavigation.spec.ts b/client/dive-common/review/viewerNavigation.spec.ts
new file mode 100644
index 000000000..9ccd2de8a
--- /dev/null
+++ b/client/dive-common/review/viewerNavigation.spec.ts
@@ -0,0 +1,15 @@
+import { parseViewerFocus, reviewViewerLocation } from './viewerNavigation';
+
+describe('review viewer navigation', () => {
+  it('round-trips a frame and track through the query', () => {
+    const location = reviewViewerLocation('abc', { frame: 12, trackId: 7 });
+    expect(location).toEqual({ name: 'viewer', params: { id: 'abc' }, query: { frame: '12', track: '7' } });
+    expect(parseViewerFocus(location.query)).toEqual({ frame: 12, trackId: 7 });
+  });
+
+  it('ignores missing or malformed values', () => {
+    expect(reviewViewerLocation('abc', {}).query).toEqual({});
+    expect(parseViewerFocus({ frame: 'x', track: ['3'] })).toEqual({ trackId: 3 });
+    expect(parseViewerFocus({ frame: '-1' })).toEqual({});
+  });
+});
diff --git a/client/dive-common/review/viewerNavigation.ts b/client/dive-common/review/viewerNavigation.ts
new file mode 100644
index 000000000..995da442e
--- /dev/null
+++ b/client/dive-common/review/viewerNavigation.ts
@@ -0,0 +1,45 @@
+/**
+ * Deep links from the review grid into the annotation viewer: the viewer
+ * route plus query parameters naming the frame to seek to and the track to
+ * select once media is ready.
+ */
+export const VIEWER_FRAME_QUERY = 'frame';
+export const VIEWER_TRACK_QUERY = 'track';
+
+export interface ViewerFocus {
+  frame?: number;
+  trackId?: number;
+}
+
+export interface ReviewViewerLocation {
+  name: string;
+  params: Record<string, string>;
+  query: Record<string, string>;
+}
+
+/** Both platforms name their single-dataset viewer route `viewer` with an `id` param. */
+export function reviewViewerLocation(
+  datasetId: string,
+  focus: ViewerFocus,
+): ReviewViewerLocation {
+  const query: Record<string, string> = {};
+  if (focus.frame !== undefined) query[VIEWER_FRAME_QUERY] = String(focus.frame);
+  if (focus.trackId !== undefined) query[VIEWER_TRACK_QUERY] = String(focus.trackId);
+  return { name: 'viewer', params: { id: datasetId }, query };
+}
+
+function integerParam(value: unknown): number | undefined {
+  const text = Array.isArray(value) ? value[0] : value;
+  if (typeof text !== 'string' || !/^-?\d+$/.test(text)) return undefined;
+  return Number(text);
+}
+
+/** Read the focus back out of a route query (unknown values are ignored). */
+export function parseViewerFocus(query: Record<string, unknown>): ViewerFocus {
+  const frame = integerParam(query[VIEWER_FRAME_QUERY]);
+  const trackId = integerParam(query[VIEWER_TRACK_QUERY]);
+  const focus: ViewerFocus = {};
+  if (frame !== undefined && frame >= 0) focus.frame = frame;
+  if (trackId !== undefined) focus.trackId = trackId;
+  return focus;
+}
diff --git a/client/dive-common/use/useReview.spec.ts b/client/dive-common/use/useReview.spec.ts
new file mode 100644
index 000000000..ddb43d716
--- /dev/null
+++ b/client/dive-common/use/useReview.spec.ts
@@ -0,0 +1,436 @@
+import { effectScope, nextTick } from 'vue';
+import type { TrackData } from 'vue-media-annotator/track';
+import type { DatasetConfig } from 'dive-common/apispec';
+import { createReviewService, ReviewApi } from './useReview';
+
+vi.mock('dive-common/review/frameSource', () => ({
+  createFrameSource: vi.fn(() => ({
+    frameCount: 1,
+    getFrame: vi.fn(),
+    dispose: vi.fn(),
+  })),
+}));
+
+function track(id: number, pairs: [string, number][], frames: number[]): TrackData {
+  return {
+    id,
+    begin: Math.min(...frames),
+    end: Math.max(...frames),
+    confidencePairs: pairs,
+    attributes: {},
+    features: frames.map((frame) => ({
+      frame, keyframe: true, bounds: [0, 0, 10, 10],
+    })),
+  };
+}
+
+function config(id: string, overrides: Partial<DatasetConfig> = {}): DatasetConfig {
+  return {
+    id,
+    name: `Dataset ${id}`,
+    type: 'image-sequence',
+    fps: 1,
+    createdAt: '',
+    subType: null,
+    multiCamMedia: null,
+    imageData: [{ url: 'a.jpg', filename: 'a.jpg' }],
+    videoUrl: undefined,
+    ...overrides,
+  } as DatasetConfig;
+}
+
+function makeApi(tracksById: Record<string, TrackData[]>, overrides: Partial<ReviewApi> = {}): ReviewApi {
+  return {
+    loadConfig: vi.fn(async (id: string) => config(id)),
+    // Fresh copies each call, as a real platform returns them.
+    loadDetections: vi.fn(async (id: string) => ({
+      version: 2, tracks: JSON.parse(JSON.stringify(tracksById[id] || [])), groups: [], sets: [],
+    })),
+    saveDetections: vi.fn(async () => undefined),
+    listScoringDatasets: vi.fn(async () => [{ id: 'a', name: 'Alpha' }, { id: 'b', name: 'Beta' }]),
+    ...overrides,
+  };
+}
+
+describe('createReviewService', () => {
+  it('keeps deferred datasets queued until loadQueued', async () => {
+    const api = makeApi({ a: [track(1, [['fish', 0.9]], [0])] });
+    const service = createReviewService({ api });
+    await service.addDataset('a', { id: 'a', name: 'Alpha' }, { defer: true });
+    expect(service.datasets.value.map((d) => d.status)).toEqual(['queued']);
+    expect(api.loadDetections).not.toHaveBeenCalled();
+    await service.loadQueued();
+    expect(service.datasets.value.map((d) => [d.status, d.trackCount])).toEqual([['ready', 1]]);
+    expect(api.loadDetections).toHaveBeenCalledTimes(1);
+  });
+
+  it('loads datasets, prefers peekConfig, and builds items for a query', async () => {
+    const peekConfig = vi.fn(async (id: string) => config(id));
+    const api = makeApi({
+      a: [track(1, [['fish', 0.9]], [0, 1, 2]), track(2, [['shark', 0.3]], [4])],
+    }, { peekConfig });
+    const service = createReviewService({ api });
+    await service.refreshAvailable();
+    await service.addDatasets(['a', 'a']);
+    expect(peekConfig).toHaveBeenCalledTimes(1);
+    expect(api.loadConfig).not.toHaveBeenCalled();
+    expect(service.datasets.value).toHaveLength(1);
+    expect(service.datasets.value[0]).toMatchObject({
+      id: 'a', name: 'Alpha', status: 'ready', trackCount: 2, croppable: true,
+    });
+    expect(service.types.value).toEqual(['fish', 'shark']);
+    expect(service.items.value.map((i) => i.key)).toEqual(['a#1', 'a#2']);
+
+    service.query.threshold = 0.5;
+    service.runQuery();
+    expect(service.stale.value).toBe(false);
+    expect(service.items.value.map((i) => i.key)).toEqual(['a#1']);
+    expect(service.items.value[0].frames).toHaveLength(3);
+  });
+
+  it('expands a multicamera parent into its cameras', async () => {
+    const api = makeApi({ 'm/left': [track(1, [['fish', 1]], [0])], 'm/right': [] }, {
+      loadConfig: vi.fn(async (id: string) => (id === 'm'
+        ? config(id, {
+          type: 'multi',
+          multiCamMedia: {
+            defaultDisplay: 'left',
+            cameras: {
+              left: { type: 'image-sequence', imageData: [], videoUrl: '' },
+              right: { type: 'image-sequence', imageData: [], videoUrl: '' },
+            },
+          },
+        })
+        : config(id))),
+    });
+    const service = createReviewService({ api });
+    await service.addDataset('m', { id: 'm', name: 'Rig' });
+    expect(service.datasets.value.map((d) => [d.id, d.name, d.status])).toEqual([
+      ['m/left', 'Rig (left)', 'ready'],
+      ['m/right', 'Rig (right)', 'ready'],
+    ]);
+  });
+
+  it('reassigns and accepts types, tracks pending edits, and saves them', async () => {
+    const api = makeApi({
+      a: [track(1, [['fish', 0.6], ['shark', 0.4]], [0]), track(2, [['fish', 0.9]], [0])],
+    });
+    const service = createReviewService({ api });
+    await service.addDataset('a');
+    service.query.type = 'fish';
+    service.query.threshold = 0;
+    service.runQuery();
+    const first = service.items.value.find((i) => i.trackId === 1)!;
+    const second = service.items.value.find((i) => i.trackId === 2)!;
+
+    service.assignType(first, 'shark');
+    expect(service.currentType(first)).toEqual({ type: 'shark', confidence: 1 });
+    expect(service.trackOf('a', 1)?.confidencePairs).toEqual([['shark', 1]]);
+    expect(service.isPending(first)).toBe(true);
+    expect(service.pendingCount.value).toBe(1);
+    // The grid keeps the item until the query is run again.
+    expect(service.items.value).toHaveLength(2);
+
+    service.acceptType(second);
+    expect(service.trackOf('a', 2)?.confidencePairs).toEqual([['fish', 1]]);
+    expect(service.pendingCount.value).toBe(2);
+
+    await service.save();
+    expect(api.saveDetections).toHaveBeenCalledTimes(1);
+    const [datasetId, args] = (api.saveDetections as ReturnType<typeof vi.fn>).mock.calls[0];
+    expect(datasetId).toBe('a');
+    expect(args.tracks.upsert.map((t: TrackData) => t.id).sort()).toEqual([1, 2]);
+    expect(args.groups).toEqual({ upsert: [], delete: [] });
+    expect(service.pendingCount.value).toBe(0);
+    expect(service.error.value).toBeNull();
+  });
+
+  it('edits a keyframe box and points, marks the track pending, and refreshes the item', async () => {
+    const api = makeApi({ a: [track(1, [['fish', 0.6]], [0, 4])] });
+    const service = createReviewService({ api });
+    await service.addDataset('a');
+    service.query.type = '';
+    service.query.threshold = 0;
+    service.runQuery();
+    const [item] = service.items.value;
+    expect(item.primary.bounds).toEqual([0, 0, 10, 10]);
+
+    service.updateGeometry(item, 4, { bounds: [22.4, 8, 2.6, 30], head: [5, 5], tail: [9, 9] });
+    const feature = service.trackOf('a', 1)?.features.find((f) => f.frame === 4);
+    expect(feature?.bounds).toEqual([3, 8, 22, 30]);
+    expect(feature?.head).toEqual([5, 5]);
+    const keys = feature?.geometry?.features.map((g) => (g.properties as { key: string }).key).sort();
+    expect(keys).toEqual(['HeadTails', 'head', 'tail']);
+    expect(item.frames.find((f) => f.frame === 4)).toMatchObject({ bounds: [3, 8, 22, 30], head: [5, 5], tail: [9, 9] });
+    expect(item.primary.bounds).toEqual([0, 0, 10, 10]);
+    expect(service.isPending(item)).toBe(true);
+
+    service.updateGeometry(item, 4, { tail: null });
+    expect(feature?.tail).toBeUndefined();
+    expect(feature?.geometry?.features.map((g) => (g.properties as { key: string }).key)).toEqual(['head']);
+  });
+
+  it('groups a track across cameras, adds boxes where a side is missing, and deletes tracks', async () => {
+    const api = makeApi({ 'm/left': [track(3, [['fish', 1]], [0, 4])], 'm/right': [track(3, [['fish', 1]], [4])] }, {
+      loadConfig: vi.fn(async (id: string) => (id === 'm'
+        ? config(id, {
+          type: 'multi',
+          multiCamMedia: {
+            defaultDisplay: 'left',
+            cameras: {
+              left: { type: 'image-sequence', imageData: [], videoUrl: '' },
+              right: { type: 'image-sequence', imageData: [], videoUrl: '' },
+            },
+          },
+        })
+        : config(id))),
+    });
+    const service = createReviewService({ api });
+    await service.addDataset('m', { id: 'm', name: 'Rig' });
+    service.query.threshold = 0;
+    service.runQuery();
+
+    expect(service.entries.value).toHaveLength(1);
+    const [entry] = service.entries.value;
+    expect(entry.labels).toEqual(['left', 'right']);
+    expect(service.parentOf('m/right')).toBe('m');
+    const right = entry.items[1];
+    expect(right.frames.map((f) => f.missing ?? false)).toEqual([true, false]);
+
+    service.addKeyframe(right, 0, right.frames[0].bounds);
+    expect(service.trackOf('m/right', 3)?.features.map((f) => f.frame)).toEqual([0, 4]);
+    expect(service.trackOf('m/right', 3)?.begin).toBe(0);
+    expect(service.entries.value[0].items[1].frames.every((f) => !f.missing)).toBe(true);
+    expect(service.pendingCount.value).toBe(1);
+
+    service.deleteTrack(entry.items[0]);
+    service.deleteTrack(entry.items[1]);
+    expect(service.entries.value).toHaveLength(0);
+    expect(service.pendingCount.value).toBe(2);
+    await service.save();
+    const { calls } = (api.saveDetections as ReturnType<typeof vi.fn>).mock;
+    expect(calls.map(([id, args]) => [id, args.tracks.delete])).toEqual([['m/left', [3]], ['m/right', [3]]]);
+    expect(service.pendingCount.value).toBe(0);
+  });
+
+  it('reports a failed save and keeps the edits pending', async () => {
+    const api = makeApi({ a: [track(1, [['fish', 0.6]], [0])] }, {
+      saveDetections: vi.fn(async () => { throw new Error('disk full'); }),
+    });
+    const service = createReviewService({ api });
+    await service.addDataset('a');
+    service.runQuery();
+    service.assignType(service.items.value[0], 'shark');
+    await service.save();
+    expect(service.error.value).toBe('disk full');
+    expect(service.pendingCount.value).toBe(1);
+  });
+
+  it('keeps edits and deletions made while a save is in flight', async () => {
+    let resolveFirst: (() => void) | undefined;
+    const api = makeApi({
+      a: [track(1, [['fish', 0.6]], [0]), track(2, [['shark', 0.4]], [0]), track(3, [['ray', 0.5]], [0])],
+    }, {
+      saveDetections: vi.fn(() => new Promise<void>((resolve) => { resolveFirst = resolve; })),
+    });
+    const service = createReviewService({ api });
+    await service.addDataset('a');
+    service.query.threshold = 0;
+    service.runQuery();
+    const first = service.items.value.find((i) => i.trackId === 1)!;
+    const second = service.items.value.find((i) => i.trackId === 2)!;
+    const third = service.items.value.find((i) => i.trackId === 3)!;
+
+    service.assignType(first, 'shark');
+    const savePromise = service.save();
+    await Promise.resolve();
+    expect(api.saveDetections).toHaveBeenCalledTimes(1);
+    expect((api.saveDetections as ReturnType<typeof vi.fn>).mock.calls[0][1].tracks.upsert
+      .map((t: TrackData) => t.id)).toEqual([1]);
+
+    // A later edit of another track, a re-edit of the submitted track, and a
+    // deletion must all survive acknowledgement of the first request.
+    service.assignType(second, 'fish');
+    service.assignType(first, 'ray');
+    service.deleteTrack(third);
+    expect(service.pendingCount.value).toBe(3);
+
+    resolveFirst?.();
+    await savePromise;
+    expect(service.pendingCount.value).toBe(3);
+    expect(service.isPending(first)).toBe(true);
+    expect(service.isPending(second)).toBe(true);
+    expect(service.trackOf('a', 1)?.confidencePairs).toEqual([['ray', 1]]);
+
+    (api.saveDetections as ReturnType<typeof vi.fn>).mockResolvedValue(undefined);
+    await service.save();
+    expect(api.saveDetections).toHaveBeenCalledTimes(2);
+    const secondArgs = (api.saveDetections as ReturnType<typeof vi.fn>).mock.calls[1][1];
+    expect(secondArgs.tracks.upsert.map((t: TrackData) => t.id).sort()).toEqual([1, 2]);
+    expect(secondArgs.tracks.delete).toEqual([3]);
+    expect(service.pendingCount.value).toBe(0);
+  });
+
+  it('sends a snapshot so mid-flight edits do not alter the in-flight payload', async () => {
+    let resolveFirst: (() => void) | undefined;
+    const api = makeApi({ a: [track(1, [['fish', 0.6]], [0])] }, {
+      saveDetections: vi.fn(() => new Promise<void>((resolve) => { resolveFirst = resolve; })),
+    });
+    const service = createReviewService({ api });
+    await service.addDataset('a');
+    service.runQuery();
+    const [item] = service.items.value;
+    service.assignType(item, 'shark');
+    const savePromise = service.save();
+    await Promise.resolve();
+    service.assignType(item, 'ray');
+    resolveFirst?.();
+    await savePromise;
+
+    const firstUpsert = (api.saveDetections as ReturnType<typeof vi.fn>).mock.calls[0][1]
+      .tracks.upsert[0] as TrackData;
+    expect(firstUpsert.confidencePairs).toEqual([['shark', 1]]);
+    expect(service.trackOf('a', 1)?.confidencePairs).toEqual([['ray', 1]]);
+    expect(service.pendingCount.value).toBe(1);
+  });
+
+  it('discards edits by reloading the changed datasets', async () => {
+    const api = makeApi({ a: [track(1, [['fish', 0.6]], [0])] });
+    const service = createReviewService({ api });
+    await service.addDataset('a');
+    service.runQuery();
+    service.assignType(service.items.value[0], 'shark');
+    await service.discardChanges();
+    expect(api.loadDetections).toHaveBeenCalledTimes(2);
+    expect(service.pendingCount.value).toBe(0);
+    expect(service.trackOf('a', 1)?.confidencePairs).toEqual([['fish', 0.6]]);
+  });
+
+  it('marks a dataset that failed to load and lets it be removed', async () => {
+    const api = makeApi({}, {
+      loadDetections: vi.fn(async () => { throw new Error('missing'); }),
+    });
+    const service = createReviewService({ api });
+    await service.addDataset('a');
+    expect(service.datasets.value[0]).toMatchObject({ status: 'error', error: 'missing' });
+    service.removeDataset('a');
+    await nextTick();
+    expect(service.datasets.value).toHaveLength(0);
+    expect(service.types.value).toEqual([]);
+  });
+});
+describe('review session regressions', () => {
+  it('does not strand another dataset when one is removed during loading', async () => {
+    let finish!: (value: Awaited<ReturnType<ReviewApi['loadDetections']>>) => void;
+    const api = makeApi({}, {
+      loadDetections: vi.fn(() => new Promise<Awaited<ReturnType<ReviewApi['loadDetections']>>>((resolve) => { finish = resolve; })),
+    });
+    const service = createReviewService({ api });
+    await service.addDataset('a', undefined, { defer: true });
+    const loading = service.addDataset('b');
+    await Promise.resolve();
+    service.removeDataset('a');
+    finish({
+      tracks: [], groups: [], sets: [], version: 2,
+    });
+    await loading;
+    expect(service.datasets.value[0].status).toBe('ready');
+    service.dispose();
+  });
+
+  it('edits both cameras when only one meets the type threshold', async () => {
+    const api = makeApi({
+      'm/left': [track(1, [['fish', 0.9]], [0])],
+      'm/right': [track(1, [['fish', 0.2]], [0])],
+    }, {
+      loadConfig: vi.fn(async (id) => (id === 'm' ? config(id, {
+        type: 'multi',
+        multiCamMedia: {
+          defaultDisplay: 'left',
+          cameras: {
+            left: { type: 'image-sequence', imageData: [], videoUrl: '' },
+            right: { type: 'image-sequence', imageData: [], videoUrl: '' },
+          },
+        },
+      }) : config(id))),
+    });
+    const service = createReviewService({ api });
+    await service.addDataset('m');
+    service.query.type = 'fish';
+    service.query.threshold = 0.5;
+    service.runQuery();
+    expect(service.entries.value[0].items).toHaveLength(2);
+    service.entries.value[0].items.forEach((item) => service.assignType(item, 'shark'));
+    await service.save();
+    const { calls } = (api.saveDetections as ReturnType<typeof vi.fn>).mock;
+    expect(calls.map(([id, args]) => [id, args.tracks.upsert[0].confidencePairs])).toEqual([
+      ['m/left', [['shark', 1]]], ['m/right', [['shark', 1]]],
+    ]);
+    service.dispose();
+  });
+
+  it('keeps query watches and dirty counts active after the owner unmounts', async () => {
+    const scope = effectScope();
+    const service = scope.run(() => createReviewService({
+      api: makeApi({ a: [track(1, [['fish', 0.9]], [0]), track(2, [['shark', 0.8]], [0])] }),
+    }))!;
+    await service.addDataset('a');
+    expect(service.pendingCount.value).toBe(0);
+    scope.stop();
+    service.query.type = 'shark';
+    await nextTick();
+    await new Promise((resolve) => setTimeout(resolve, 250));
+    expect(service.items.value.map((item) => item.trackId)).toEqual([2]);
+    service.assignType(service.items.value[0], 'ray');
+    expect(service.pendingCount.value).toBe(1);
+    service.dispose();
+  });
+
+  it('reports failure and retains edits when discard cannot reload', async () => {
+    const api = makeApi({ a: [track(1, [['fish', 0.9]], [0])] });
+    const service = createReviewService({ api });
+    await service.addDataset('a');
+    service.assignType(service.items.value[0], 'shark');
+    api.loadDetections = vi.fn(async () => { throw new Error('offline'); });
+    expect(await service.discardChanges()).toBe(false);
+    expect(service.pendingCount.value).toBe(1);
+    expect(service.datasets.value[0].status).toBe('error');
+    service.dispose();
+  });
+});
+
+it('refreshes viewer changes before another review edit is saved', async () => {
+  const stored = { a: [track(1, [['fish', 0.9]], [0])] };
+  const api = makeApi(stored);
+  const service = createReviewService({ api });
+  await service.addDataset('a');
+  stored.a[0].features[0].bounds = [20, 20, 40, 40];
+  expect(await service.refreshOnResume()).toBe(true);
+  service.assignType(service.items.value[0], 'shark');
+  await service.save();
+  const args = (api.saveDetections as ReturnType<typeof vi.fn>).mock.calls[0][1];
+  expect(args.tracks.upsert[0].features[0].bounds).toEqual([20, 20, 40, 40]);
+  service.dispose();
+});
+
+it('does not expose stale tracks if the resume refresh fails', async () => {
+  const api = makeApi({ a: [track(1, [['fish', 0.9]], [0])] });
+  const service = createReviewService({ api });
+  await service.addDataset('a');
+  (api.loadDetections as ReturnType<typeof vi.fn>).mockRejectedValue(new Error('offline'));
+  expect(await service.refreshOnResume()).toBe(false);
+  expect(service.items.value).toEqual([]);
+  expect(service.trackOf('a', 1)).toBeUndefined();
+  expect(service.datasets.value[0].status).toBe('error');
+  service.dispose();
+});
+
+it('preserves dirty data instead of replacing it on resume', async () => {
+  const service = createReviewService({ api: makeApi({ a: [track(1, [['fish', 0.9]], [0])] }) });
+  await service.addDataset('a');
+  service.assignType(service.items.value[0], 'shark');
+  expect(await service.refreshOnResume()).toBe(false);
+  expect(service.pendingCount.value).toBe(1);
+  expect(service.trackOf('a', 1)?.confidencePairs).toEqual([['shark', 1]]);
+  service.dispose();
+});
diff --git a/client/dive-common/use/useReview.ts b/client/dive-common/use/useReview.ts
new file mode 100644
index 000000000..dbfd67405
--- /dev/null
+++ b/client/dive-common/use/useReview.ts
@@ -0,0 +1,774 @@
+/**
+ * State behind the Review page: the datasets under review (with their
+ * tracks held in memory), the query, the grid settings, the rendered
+ * chips, and the type edits waiting to be saved back.
+ */
+import {
+  computed, effectScope, inject, provide, reactive, ref, Ref, watch,
+} from 'vue';
+import { debounce } from 'lodash';
+import type { Api, DatasetConfig } from 'dive-common/apispec';
+import type { ScoringDatasetSummary } from 'dive-common/scoring/types';
+import type { Feature, TrackData } from 'vue-media-annotator/track';
+import type { AnnotationId, ConfidencePair } from 'vue-media-annotator/BaseAnnotation';
+import type { RectBounds } from 'vue-media-annotator/utils';
+import StyleManager from 'vue-media-annotator/StyleManager';
+import {
+  acceptPairAsCorrect, compileHierarchy, reassignPairs, TypeHierarchyIndex,
+} from 'dive-common/typeHierarchy';
+import { createFrameSource, FrameSource } from 'dive-common/review/frameSource';
+import { createChipStore, ChipStore } from 'dive-common/review/chipStore';
+import {
+  buildReviewItems, CameraMembership, collectAttributeKeys, collectTypes, frameRefFor, groupReviewItems,
+  sortReviewItems,
+} from 'dive-common/review/reviewItems';
+import { usePersistentGridSettings } from 'dive-common/review/gridSettings';
+import {
+  DEFAULT_REVIEW_QUERY,
+  ReviewEntry,
+  ReviewGridSettings,
+  ReviewItem,
+  ReviewPolygon,
+  ReviewQuery,
+  ReviewSortOrder,
+} from 'dive-common/review/types';
+
+const CHIP_OUTLINE = '#00e5ff';
+
+/** Geometry edits for one keyframe; omitted fields are left alone, null removes a point. */
+export interface ReviewGeometryEdit {
+  bounds?: RectBounds;
+  polygons?: ReviewPolygon[];
+  head?: [number, number] | null;
+  tail?: [number, number] | null;
+}
+
+export type ReviewApi = Pick<Api,
+  'loadConfig' | 'peekConfig' | 'loadDetections' | 'saveDetections'
+  | 'listScoringDatasets' | 'pickScoringDataset'>;
+
+export interface ReviewServiceDeps {
+  api: ReviewApi;
+}
+
+/** `queued` datasets were picked but load only once results are wanted. */
+export type ReviewDatasetStatus = 'queued' | 'loading' | 'ready' | 'error';
+
+export interface ReviewDataset {
+  id: string;
+  name: string;
+  type?: string;
+  status: ReviewDatasetStatus;
+  error?: string;
+  trackCount: number;
+  /** True when the media can be cropped into chips. */
+  croppable: boolean;
+}
+
+export interface ReviewService {
+  datasets: Readonly<Ref<ReviewDataset[]>>;
+  available: Readonly<Ref<ScoringDatasetSummary[]>>;
+  query: ReviewQuery;
+  grid: ReviewGridSettings;
+  sort: Ref<ReviewSortOrder>;
+  items: Readonly<Ref<ReviewItem[]>>;
+  /** Items grouped into grid entries (one per track across its cameras). */
+  entries: Readonly<Ref<ReviewEntry[]>>;
+  /** Bumps whenever tracks load or change; computeds that read tracks depend on it. */
+  dataRevision: Readonly<Ref<number>>;
+  /** True once tracks or the query changed after the last run. */
+  stale: Readonly<Ref<boolean>>;
+  types: Readonly<Ref<string[]>>;
+  knownTypes: Readonly<Ref<string[]>>;
+  attributeKeys: Readonly<Ref<string[]>>;
+  pendingCount: Readonly<Ref<number>>;
+  saving: Readonly<Ref<boolean>>;
+  loading: Readonly<Ref<boolean>>;
+  error: Readonly<Ref<string | null>>;
+  chipStore: ChipStore;
+  datasetName(id: string): string;
+  refreshAvailable(): Promise<void>;
+  addDataset(id: string, summary?: ScoringDatasetSummary, options?: { defer?: boolean }): Promise<void>;
+  loadQueued(): Promise<void>;
+  addDatasets(ids: string[]): Promise<void>;
+  removeDataset(id: string): void;
+  reloadDataset(id: string): Promise<void>;
+  runQuery(): void;
+  trackOf(datasetId: string, trackId: AnnotationId): TrackData | undefined;
+  /** The item's live top type/confidence after any edits. */
+  currentType(item: ReviewItem): { type: string; confidence: number };
+  /** The colour the annotator draws a type in (custom dataset styles applied). */
+  colorFor(type: string): string;
+  /** Frames per second the dataset is annotated at, or 0 when unknown. */
+  datasetFps(id: string): number;
+  /** The multicamera parent a camera dataset was expanded from, or the id itself. */
+  parentOf(id: string): string;
+  /** Add a keyframe with a box to a track, e.g. where one camera lacks a detection. */
+  addKeyframe(item: ReviewItem, frame: number, bounds: RectBounds): void;
+  /** Remove the track behind an item; written on the next save. */
+  deleteTrack(item: ReviewItem): void;
+  isPending(item: ReviewItem): boolean;
+  assignType(item: ReviewItem, type: string): void;
+  acceptType(item: ReviewItem): void;
+  /** Change a keyframe's box, polygons or head/tail points; re-renders the item's chips. */
+  updateGeometry(item: ReviewItem, frame: number, edit: ReviewGeometryEdit): void;
+  save(): Promise<void>;
+  discardChanges(): Promise<boolean>;
+  refreshOnResume(): Promise<boolean>;
+  clearError(): void;
+  dispose(): void;
+}
+
+interface LoadedDataset {
+  config: DatasetConfig;
+  tracks: Map<AnnotationId, TrackData>;
+  hierarchy: TypeHierarchyIndex;
+  frameSource: FrameSource | null;
+  pending: Set<AnnotationId>;
+  /**
+   * Monotonic edit version per pending track. A save snapshots these and only
+   * acknowledges a track when the version still matches, so an edit made while
+   * the request is in flight stays dirty.
+   */
+  pendingVersions: Map<AnnotationId, number>;
+  /** Tracks removed here and not yet deleted on the platform. */
+  deleted: Set<AnnotationId>;
+}
+
+type GeoFeature = NonNullable<Feature['geometry']>['features'][number];
+
+function featureKey(geo: GeoFeature): unknown {
+  return (geo.properties as { key?: unknown } | null)?.key;
+}
+
+/** Write a head/tail point into the keyframe the way DIVE stores it. */
+function setKeypoint(feature: Feature, key: 'head' | 'tail', point: [number, number] | null) {
+  const collection = feature.geometry || { type: 'FeatureCollection' as const, features: [] };
+  const remaining = collection.features.filter(
+    (geo) => !(geo.geometry.type === 'Point' && featureKey(geo) === key),
+  );
+  if (point) {
+    remaining.push({
+      type: 'Feature',
+      properties: { key },
+      geometry: { type: 'Point', coordinates: [point[0], point[1]] },
+    });
+  }
+  collection.features = remaining;
+  // eslint-disable-next-line no-param-reassign
+  feature.geometry = collection;
+  if (point) {
+    // eslint-disable-next-line no-param-reassign
+    feature[key] = [point[0], point[1]];
+  } else {
+    // eslint-disable-next-line no-param-reassign
+    delete feature[key];
+  }
+}
+
+/** Keep the head-to-tail line in step with its end points. */
+function syncHeadTailLine(feature: Feature) {
+  const collection = feature.geometry;
+  if (!collection) return;
+  const head = collection.features.find((g) => g.geometry.type === 'Point' && featureKey(g) === 'head');
+  const tail = collection.features.find((g) => g.geometry.type === 'Point' && featureKey(g) === 'tail');
+  collection.features = collection.features.filter(
+    (geo) => !(geo.geometry.type === 'LineString' && featureKey(geo) === 'HeadTails'),
+  );
+  if (head && tail && head.geometry.type === 'Point' && tail.geometry.type === 'Point') {
+    collection.features.push({
+      type: 'Feature',
+      properties: { key: 'HeadTails' },
+      geometry: { type: 'LineString', coordinates: [head.geometry.coordinates, tail.geometry.coordinates] },
+    });
+  }
+}
+
+/** Replace the outer rings of the keyframe's polygons, in order. */
+function setPolygons(feature: Feature, polygons: ReviewPolygon[]) {
+  const collection = feature.geometry;
+  if (!collection) return;
+  let index = 0;
+  collection.features.forEach((geo) => {
+    if (geo.geometry.type !== 'Polygon') return;
+    const ring = polygons[index];
+    index += 1;
+    if (!ring || ring.length < 3) return;
+    const holes = geo.geometry.coordinates.slice(1);
+    // eslint-disable-next-line no-param-reassign
+    geo.geometry.coordinates = [[...ring.map(([x, y]) => [x, y]), [ring[0][0], ring[0][1]]], ...holes];
+  });
+}
+
+function topPair(pairs: readonly ConfidencePair[]): { type: string; confidence: number } {
+  const top = pairs.reduce<ConfidencePair | null>(
+    (acc, pair) => (acc === null || pair[1] > acc[1] ? pair : acc),
+    null,
+  );
+  return top ? { type: top[0], confidence: top[1] } : { type: '', confidence: 0 };
+}
+
+export function createReviewService(deps: ReviewServiceDeps): ReviewService {
+  const scope = effectScope(true);
+  const service = scope.run(() => createScopedReviewService(deps))!;
+  const { dispose } = service;
+  service.dispose = () => {
+    dispose();
+    scope.stop();
+  };
+  return service;
+}
+
+function createScopedReviewService(deps: ReviewServiceDeps): ReviewService {
+  const { api } = deps;
+  const datasets = ref<ReviewDataset[]>([]);
+  const available = ref<ScoringDatasetSummary[]>([]);
+  const query = reactive<ReviewQuery>({ ...DEFAULT_REVIEW_QUERY });
+  const grid = usePersistentGridSettings();
+  const sort = ref<ReviewSortOrder>('confidence-desc');
+  const items = ref<ReviewItem[]>([]);
+  const dataRevision = ref(0);
+  const stale = ref(false);
+  const saving = ref(false);
+  const loading = ref(false);
+  const error = ref<string | null>(null);
+  /** Tracks and media, deliberately outside Vue reactivity (they can be large). */
+  const loaded = new Map<string, LoadedDataset>();
+  /** Loads still in flight, so a removal during load is honoured. */
+  const loadTokens = new Map<string, symbol>();
+  /** Type colours as the annotator assigns them, seeded from each dataset's custom styles. */
+  const styles = new StyleManager({ markChangesPending: () => undefined });
+  /** Camera datasets expanded from a multicamera parent. */
+  const memberships = new Map<string, CameraMembership>();
+
+  // Query changes apply as soon as they settle; the grid only reshuffles
+  // for those, never for edits made in it.
+  const runQuerySettled = debounce(() => runQuery(), 200);
+  watch(query, () => {
+    stale.value = true;
+    runQuerySettled();
+  }, { deep: true });
+
+  const chipStore = createChipStore({
+    frameSourceFor: (datasetId) => loaded.get(datasetId)?.frameSource ?? null,
+  }, {
+    padding: grid.padding, size: 256, aspect: 1, outline: CHIP_OUTLINE,
+  });
+
+  function fail(reason: unknown, fallback: string) {
+    const message = reason instanceof Error ? reason.message : String(reason || fallback);
+    error.value = message || fallback;
+  }
+
+  function datasetName(id: string) {
+    return datasets.value.find((d) => d.id === id)?.name
+      || available.value.find((d) => d.id === id)?.name
+      || id;
+  }
+
+  function entry(id: string) {
+    return datasets.value.find((d) => d.id === id);
+  }
+
+  function patch(id: string, changes: Partial<ReviewDataset>) {
+    datasets.value = datasets.value.map((d) => (d.id === id ? { ...d, ...changes } : d));
+  }
+
+  async function refreshAvailable() {
+    if (!api.listScoringDatasets) return;
+    try {
+      available.value = await api.listScoringDatasets();
+    } catch (err) {
+      fail(err, 'Could not list datasets');
+    }
+  }
+
+  function loadConfig(id: string) {
+    return api.peekConfig ? api.peekConfig(id) : api.loadConfig(id);
+  }
+
+  function frameSourceFor(config: DatasetConfig): FrameSource | null {
+    try {
+      return createFrameSource(config);
+    } catch {
+      return null;
+    }
+  }
+
+  function dropLoaded(id: string) {
+    const existing = loaded.get(id);
+    if (existing) {
+      existing.frameSource?.dispose();
+      loaded.delete(id);
+    }
+  }
+
+  async function load(id: string) {
+    const token = Symbol(id);
+    loadTokens.set(id, token);
+    const isCurrent = () => loadTokens.get(id) === token && !!entry(id);
+    loading.value = true;
+    try {
+      const config = await loadConfig(id);
+      if (!isCurrent()) return;
+      if (config.type === 'multi') {
+        // Review the cameras of a multicamera dataset as separate sequences.
+        const cameras = Object.keys(config.multiCamMedia?.cameras || {});
+        const parentName = entry(id)?.name || config.name;
+        datasets.value = datasets.value.filter((d) => d.id !== id);
+        cameras.forEach((camera, rank) => memberships.set(`${id}/${camera}`, { parent: id, camera, rank }));
+        await Promise.all(cameras.map((camera) => addDataset(`${id}/${camera}`, {
+          id: `${id}/${camera}`, name: `${parentName} (${camera})`, type: config.multiCamMedia?.cameras[camera]?.type,
+        })));
+        return;
+      }
+      const detections = await api.loadDetections(id);
+      if (!isCurrent()) return;
+      dropLoaded(id);
+      const tracks = new Map<AnnotationId, TrackData>();
+      detections.tracks.forEach((track) => tracks.set(track.id, track));
+      const frameSource = frameSourceFor(config);
+      if (config.customTypeStyling) {
+        styles.populateTypeStyles({ ...styles.customStyles.value, ...config.customTypeStyling });
+      }
+      loaded.set(id, {
+        config,
+        tracks,
+        hierarchy: compileHierarchy(config.typeHierarchy || {}),
+        frameSource,
+        pending: new Set(),
+        pendingVersions: new Map(),
+        deleted: new Set(),
+      });
+      patch(id, {
+        status: 'ready',
+        error: undefined,
+        name: entry(id)?.name || config.name,
+        type: config.type,
+        trackCount: tracks.size,
+        croppable: frameSource !== null,
+      });
+      dataRevision.value += 1;
+      // Newly loaded tracks join the grid without any further action.
+      runQuery();
+    } catch (err) {
+      if (!isCurrent()) return;
+      patch(id, {
+        status: 'error',
+        error: err instanceof Error ? err.message : String(err),
+      });
+    } finally {
+      loading.value = datasets.value.some((d) => d.status === 'loading');
+    }
+  }
+
+  /**
+   * Add a dataset; with `defer` it only joins the list and loads on the
+   * next `loadQueued`, so picking many datasets costs nothing until the
+   * results are actually wanted.
+   */
+  async function addDataset(id: string, summary?: ScoringDatasetSummary, options: { defer?: boolean } = {}) {
+    if (!id || entry(id)) return;
+    datasets.value = [...datasets.value, {
+      id,
+      name: summary?.name || datasetName(id),
+      type: summary?.type,
+      status: options.defer ? 'queued' : 'loading',
+      trackCount: 0,
+      croppable: false,
+    }];
+    if (options.defer) return;
+    await load(id);
+  }
+
+  /** Load every queued dataset; annotations are read and the query rerun as each arrives. */
+  async function loadQueued() {
+    const queued = datasets.value.filter((d) => d.status === 'queued').map((d) => d.id);
+    queued.forEach((id) => patch(id, { status: 'loading' }));
+    await Promise.all(queued.map((id) => load(id)));
+  }
+
+  async function addDatasets(ids: string[]) {
+    const unique = Array.from(new Set(ids.filter(Boolean)));
+    await Promise.all(unique.map((id) => addDataset(id)));
+  }
+
+  function removeDataset(id: string) {
+    datasets.value = datasets.value.filter((d) => d.id !== id);
+    dropLoaded(id);
+    loadTokens.delete(id);
+    dataRevision.value += 1;
+    runQuery();
+  }
+
+  async function reloadDataset(id: string) {
+    if (!entry(id)) return;
+    patch(id, { status: 'loading', error: undefined });
+    await load(id);
+  }
+
+  function allTracks(): TrackData[] {
+    const all: TrackData[] = [];
+    loaded.forEach((dataset) => all.push(...dataset.tracks.values()));
+    return all;
+  }
+
+  /** Read inside a computed so it re-runs when tracks load or change. */
+  function dependOnData(): number {
+    return dataRevision.value;
+  }
+
+  /** Types the query can ask for: present on the selected datasets at the current threshold. */
+  const types = computed(() => {
+    dependOnData();
+    return collectTypes(allTracks(), query.threshold);
+  });
+
+  /** Every type on the selected datasets, offered when assigning a type. */
+  const knownTypes = computed(() => {
+    dependOnData();
+    return collectTypes(allTracks());
+  });
+
+  const attributeKeys = computed(() => {
+    dependOnData();
+    const keys = new Set<string>();
+    loaded.forEach((dataset) => {
+      collectAttributeKeys(dataset.tracks.values(), dataset.config.attributes).forEach((k) => keys.add(k));
+    });
+    return Array.from(keys).sort((a, b) => a.localeCompare(b));
+  });
+
+  function runQuery() {
+    const order = datasets.value.map((d) => d.id);
+    const built: ReviewItem[] = [];
+    order.forEach((id) => {
+      const dataset = loaded.get(id);
+      if (dataset) {
+        built.push(...buildReviewItems(id, dataset.tracks.values(), { ...query }, grid.maxSequenceFrames));
+      }
+    });
+    // A matching camera selects the logical track. Include every other camera
+    // of that track, even when its label/confidence/attributes do not match.
+    const matched = new Map<string, Set<AnnotationId>>();
+    built.forEach((item) => {
+      const parent = memberships.get(item.datasetId)?.parent;
+      if (!parent) return;
+      if (!matched.has(parent)) matched.set(parent, new Set());
+      matched.get(parent)!.add(item.trackId);
+    });
+    const included = new Set(built.map((item) => `${item.datasetId}#${item.trackId}`));
+    loaded.forEach((dataset, id) => {
+      const parent = memberships.get(id)?.parent;
+      const trackIds = parent ? matched.get(parent) : undefined;
+      if (!trackIds) return;
+      const cameras = buildReviewItems(id, dataset.tracks.values(), {
+        ...DEFAULT_REVIEW_QUERY, mode: 'type', type: '', threshold: 0,
+      }, grid.maxSequenceFrames);
+      cameras.forEach((item) => {
+        if (trackIds.has(item.trackId) && !included.has(`${id}#${item.trackId}`)) built.push(item);
+      });
+    });
+    items.value = sortReviewItems(built, sort.value, order);
+    stale.value = false;
+  }
+
+  watch(sort, () => {
+    items.value = sortReviewItems(items.value, sort.value, datasets.value.map((d) => d.id));
+  });
+
+  function trackOf(datasetId: string, trackId: AnnotationId) {
+    return loaded.get(datasetId)?.tracks.get(trackId);
+  }
+
+  function parentOf(id: string) {
+    return memberships.get(id)?.parent ?? id;
+  }
+
+  const entries = computed(() => {
+    dependOnData();
+    return groupReviewItems(
+      items.value,
+      (datasetId) => memberships.get(datasetId),
+      (item) => trackOf(item.datasetId, item.trackId),
+      grid.maxSequenceFrames,
+    );
+  });
+
+  function currentType(item: ReviewItem) {
+    const track = trackOf(item.datasetId, item.trackId);
+    if (!track) return { type: item.type, confidence: item.confidence };
+    if (query.mode === 'type' && query.type) {
+      // Keep showing the queried pair while it still exists, so an edit that
+      // demotes it is visible as such.
+      const pair = track.confidencePairs.find(([type]) => type === query.type);
+      const top = topPair(track.confidencePairs);
+      if (pair && top.type === query.type) return { type: pair[0], confidence: pair[1] };
+      return top;
+    }
+    return topPair(track.confidencePairs);
+  }
+
+  function colorFor(type: string) {
+    return styles.typeStyling.value.color(type);
+  }
+
+  function datasetFps(id: string) {
+    const fps = Number(loaded.get(id)?.config.fps);
+    return Number.isFinite(fps) && fps > 0 ? fps : 0;
+  }
+
+  function isPending(item: ReviewItem) {
+    return loaded.get(item.datasetId)?.pending.has(item.trackId) ?? false;
+  }
+
+  const pendingCount = computed(() => {
+    dependOnData();
+    let count = 0;
+    loaded.forEach((dataset) => { count += dataset.pending.size + dataset.deleted.size; });
+    return count;
+  });
+
+  /** Mark a track dirty and bump its edit version so in-flight saves cannot clear it. */
+  function markPending(dataset: LoadedDataset, trackId: AnnotationId) {
+    dataset.pending.add(trackId);
+    dataset.pendingVersions.set(trackId, (dataset.pendingVersions.get(trackId) ?? 0) + 1);
+  }
+
+  function updatePairs(item: ReviewItem, update: (pairs: ConfidencePair[], hierarchy: TypeHierarchyIndex) => ConfidencePair[]) {
+    const dataset = loaded.get(item.datasetId);
+    const track = dataset?.tracks.get(item.trackId);
+    if (!dataset || !track) return;
+    const next = update(track.confidencePairs.map(([t, c]) => [t, c] as ConfidencePair), dataset.hierarchy);
+    track.confidencePairs = next;
+    markPending(dataset, item.trackId);
+    dataRevision.value += 1;
+  }
+
+  function assignType(item: ReviewItem, type: string) {
+    const trimmed = type.trim();
+    if (!trimmed) return;
+    const current = currentType(item);
+    if (current.type === trimmed && current.confidence >= 1) return;
+    updatePairs(item, (pairs, hierarchy) => reassignPairs(
+      hierarchy,
+      pairs,
+      current.type || trimmed,
+      trimmed,
+      1,
+    ));
+  }
+
+  function acceptType(item: ReviewItem) {
+    const current = currentType(item);
+    if (!current.type) return;
+    updatePairs(item, (pairs, hierarchy) => acceptPairAsCorrect(hierarchy, pairs, current.type));
+  }
+
+  function deleteTrack(item: ReviewItem) {
+    const dataset = loaded.get(item.datasetId);
+    if (!dataset || !dataset.tracks.has(item.trackId)) return;
+    dataset.tracks.delete(item.trackId);
+    dataset.pending.delete(item.trackId);
+    dataset.pendingVersions.delete(item.trackId);
+    dataset.deleted.add(item.trackId);
+    // The entry leaves the grid at once; everything else stays put.
+    items.value = items.value.filter(
+      (other) => !(other.datasetId === item.datasetId && other.trackId === item.trackId),
+    );
+    dataRevision.value += 1;
+  }
+
+  function addKeyframe(item: ReviewItem, frame: number, bounds: RectBounds) {
+    const dataset = loaded.get(item.datasetId);
+    const track = dataset?.tracks.get(item.trackId);
+    if (!dataset || !track || track.features.some((f) => f.frame === frame && f.bounds)) return;
+    const [x1, y1, x2, y2] = bounds;
+    const previous = [...track.features].reverse().find((f) => f.frame < frame);
+    const feature: Feature = {
+      frame,
+      keyframe: true,
+      interpolate: previous?.interpolate ?? false,
+      bounds: [
+        Math.round(Math.min(x1, x2)), Math.round(Math.min(y1, y2)),
+        Math.round(Math.max(x1, x2)), Math.round(Math.max(y1, y2)),
+      ],
+    };
+    track.features = [...track.features.filter((f) => f.frame !== frame), feature]
+      .sort((a, b) => a.frame - b.frame);
+    track.begin = Math.min(track.begin, frame);
+    track.end = Math.max(track.end, frame);
+    markPending(dataset, item.trackId);
+    dataRevision.value += 1;
+  }
+
+  function updateGeometry(item: ReviewItem, frame: number, edit: ReviewGeometryEdit) {
+    const dataset = loaded.get(item.datasetId);
+    const track = dataset?.tracks.get(item.trackId);
+    const feature = track?.features.find((f) => f.frame === frame);
+    if (!dataset || !track || !feature) return;
+
+    if (edit.bounds) {
+      const [x1, y1, x2, y2] = edit.bounds;
+      feature.bounds = [
+        Math.round(Math.min(x1, x2)), Math.round(Math.min(y1, y2)),
+        Math.round(Math.max(x1, x2)), Math.round(Math.max(y1, y2)),
+      ];
+    }
+    if (edit.head !== undefined) setKeypoint(feature, 'head', edit.head);
+    if (edit.tail !== undefined) setKeypoint(feature, 'tail', edit.tail);
+    if (edit.head !== undefined || edit.tail !== undefined) syncHeadTailLine(feature);
+    if (edit.polygons) setPolygons(feature, edit.polygons);
+
+    // The grid item mirrors the keyframe; refresh it so overlays and the
+    // re-rendered chip follow the edit.
+    const refreshed = frameRefFor(feature);
+    if (refreshed) {
+      item.frames.forEach((ref) => {
+        if (ref.frame === frame) Object.assign(ref, refreshed);
+      });
+      if (item.primary.frame === frame) Object.assign(item.primary, refreshed);
+    }
+    markPending(dataset, item.trackId);
+    dataRevision.value += 1;
+    // The chip keeps its crop: the box is drawn over it, so the view does
+    // not jump when an edit lands.
+  }
+
+  async function save() {
+    if (saving.value) return;
+    saving.value = true;
+    error.value = null;
+    try {
+      const targets = Array.from(loaded.entries())
+        .filter(([, d]) => d.pending.size > 0 || d.deleted.size > 0);
+      // Snapshot payloads and versions before awaiting so mid-flight edits
+      // neither mutate what we send nor get cleared on success.
+      const results = await Promise.allSettled(targets.map(async ([id, dataset]) => {
+        const submittedVersions = new Map<AnnotationId, number>();
+        const upsert: TrackData[] = [];
+        dataset.pending.forEach((trackId) => {
+          const track = dataset.tracks.get(trackId);
+          if (!track) return;
+          submittedVersions.set(trackId, dataset.pendingVersions.get(trackId) ?? 0);
+          upsert.push(JSON.parse(JSON.stringify(track)) as TrackData);
+        });
+        const submittedDeleted = Array.from(dataset.deleted);
+        await api.saveDetections(id, {
+          tracks: { upsert, delete: submittedDeleted },
+          groups: { upsert: [], delete: [] },
+        });
+        submittedVersions.forEach((version, trackId) => {
+          if (dataset.pendingVersions.get(trackId) === version) {
+            dataset.pending.delete(trackId);
+            dataset.pendingVersions.delete(trackId);
+          }
+        });
+        submittedDeleted.forEach((trackId) => {
+          dataset.deleted.delete(trackId);
+        });
+      }));
+      const failed = results.find((r) => r.status === 'rejected') as PromiseRejectedResult | undefined;
+      if (failed) throw failed.reason;
+    } catch (err) {
+      fail(err, 'Could not save the changed annotations');
+    } finally {
+      dataRevision.value += 1;
+      saving.value = false;
+    }
+  }
+
+  async function discardChanges() {
+    const dirty = Array.from(loaded.entries())
+      .filter(([, d]) => d.pending.size > 0 || d.deleted.size > 0).map(([id]) => id);
+    await Promise.all(dirty.map((id) => reloadDataset(id)));
+    const discarded = dirty.every((id) => !loaded.get(id)?.pending.size && !loaded.get(id)?.deleted.size);
+    if (!discarded) error.value = 'Could not discard all changes. Retry when the datasets are available.';
+    return discarded;
+  }
+
+  /** Reload clean snapshots before the resumed page can edit them. */
+  async function refreshOnResume() {
+    if (pendingCount.value > 0 || saving.value) {
+      error.value = 'Save or discard pending changes before refreshing the review session.';
+      return false;
+    }
+    const ids = datasets.value.filter((dataset) => dataset.status !== 'queued').map((dataset) => dataset.id);
+    ids.forEach((id) => dropLoaded(id));
+    chipStore.reset();
+    dataRevision.value += 1;
+    runQuery();
+    await Promise.all(ids.map((id) => reloadDataset(id)));
+    return ids.every((id) => entry(id)?.status === 'ready');
+  }
+
+  function clearError() {
+    error.value = null;
+  }
+
+  function dispose() {
+    runQuerySettled.cancel();
+    loadTokens.clear();
+    loaded.forEach((dataset) => dataset.frameSource?.dispose());
+    loaded.clear();
+    chipStore.reset();
+  }
+
+  return {
+    datasets,
+    available,
+    query,
+    grid,
+    sort,
+    items,
+    entries,
+    dataRevision,
+    stale,
+    types,
+    knownTypes,
+    attributeKeys,
+    pendingCount,
+    saving,
+    loading,
+    error,
+    chipStore,
+    datasetName,
+    refreshAvailable,
+    addDataset,
+    addDatasets,
+    loadQueued,
+    removeDataset,
+    reloadDataset,
+    runQuery,
+    trackOf,
+    currentType,
+    colorFor,
+    datasetFps,
+    parentOf,
+    addKeyframe,
+    deleteTrack,
+    isPending,
+    assignType,
+    acceptType,
+    updateGeometry,
+    save,
+    discardChanges,
+    refreshOnResume,
+    clearError,
+    dispose,
+  };
+}
+
+const ReviewSymbol = Symbol('review');
+
+export function provideReview(service: ReviewService) {
+  provide(ReviewSymbol, service);
+}
+
+export function useReview(): ReviewService {
+  const service = inject<ReviewService | null>(ReviewSymbol, null);
+  if (!service) {
+    throw new Error('Review service not provided');
+  }
+  return service;
+}
diff --git a/client/platform/desktop/frontend/api.ts b/client/platform/desktop/frontend/api.ts
index 26e14b08e..ad1a48489 100644
--- a/client/platform/desktop/frontend/api.ts
+++ b/client/platform/desktop/frontend/api.ts
@@ -826,6 +826,11 @@ async function loadConfig(id: string) {
   return { ...data, calibration: data.multiCam?.calibration ?? null };
 }
 
+/** loadConfig without the recents bookkeeping the stateful wrapper adds. */
+function peekConfig(id: string) {
+  return loadConfig(id);
+}
+
 let scoringAnnotationPreviewFile: string | null = null;
 
 /** One-shot annotation file to load in the viewer (from scoring result links). */
@@ -939,6 +944,7 @@ export {
   exportScoringPdf,
   /* Standard Specification APIs */
   loadConfig,
+  peekConfig,
   loadDetections,
   loadFrameMetadata,
   getPipelineList,
diff --git a/client/platform/desktop/frontend/components/NavigationBar.vue b/client/platform/desktop/frontend/components/NavigationBar.vue
index 04ff20a0e..e78ecfb3c 100644
--- a/client/platform/desktop/frontend/components/NavigationBar.vue
+++ b/client/platform/desktop/frontend/components/NavigationBar.vue
@@ -31,6 +31,9 @@ export default defineComponent({
       <v-tab :to="{ name: 'training' }">
         Training<v-icon>mdi-brain</v-icon>
       </v-tab>
+      <v-tab :to="{ name: 'review' }">
+        Review<v-icon>mdi-view-grid-outline</v-icon>
+      </v-tab>
       <v-tab :to="{ name: 'scoring' }">
         Scoring<v-icon>mdi-chart-box-outline</v-icon>
       </v-tab>
diff --git a/client/platform/desktop/frontend/components/Recent.vue b/client/platform/desktop/frontend/components/Recent.vue
index 27630ab0b..040fca447 100644
--- a/client/platform/desktop/frontend/components/Recent.vue
+++ b/client/platform/desktop/frontend/components/Recent.vue
@@ -265,6 +265,10 @@ export default defineComponent({
     function scoreSelected() {
       router.push({ name: 'scoring', query: selectedIdsQuery() });
     }
+
+    function reviewSelected() {
+      router.push({ name: 'review', query: selectedIdsQuery() });
+    }
     function getTypeIcon(recent: JsonConfigCache) {
       if (recent.subType) {
         if (recent.subType === 'stereo') {
@@ -360,6 +364,7 @@ export default defineComponent({
       runPipelineOnSelected,
       runTrainingOnSelected,
       scoreSelected,
+      reviewSelected,
       isSelected,
       toggleSelected,
       toggleSelectAll,
@@ -649,6 +654,27 @@ export default defineComponent({
                   </template>
                   <span>Score the selected datasets against ground truth</span>
                 </v-tooltip>
+                <v-tooltip bottom>
+                  <template #activator="{ on }">
+                    <v-btn
+                      class="ml-2 align-self-center"
+                      color="primary"
+                      outlined
+                      small
+                      v-on="on"
+                      @click="reviewSelected"
+                    >
+                      <v-icon
+                        left
+                        small
+                      >
+                        mdi-view-grid-outline
+                      </v-icon>
+                      Review
+                    </v-btn>
+                  </template>
+                  <span>Review the selected datasets' annotations as a grid</span>
+                </v-tooltip>
                 <v-tooltip bottom>
                   <template #activator="{ on }">
                     <v-btn
diff --git a/client/platform/desktop/frontend/components/ReviewPage.vue b/client/platform/desktop/frontend/components/ReviewPage.vue
new file mode 100644
index 000000000..4c6eb8af9
--- /dev/null
+++ b/client/platform/desktop/frontend/components/ReviewPage.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router/composables';
+import SharedReviewPage from 'dive-common/components/Review/ReviewPage.vue';
+import { reviewViewerLocation, ViewerFocus } from 'dive-common/review/viewerNavigation';
+import NavigationBar from './NavigationBar.vue';
+
+const route = useRoute();
+const router = useRouter();
+
+/** Dataset ids handed off by another page (e.g. the Library selection). */
+const initialDatasetIds = computed(() => {
+  const query = route.query.datasetIds;
+  const values = Array.isArray(query) ? query : [query];
+  return values.flatMap((value) => (value || '').split(',')).filter(Boolean);
+});
+
+function openViewer(datasetId: string, focus: ViewerFocus) {
+  router.push(reviewViewerLocation(datasetId, focus));
+}
+</script>
+
+<template>
+  <v-main>
+    <navigation-bar />
+    <shared-review-page
+      :initial-dataset-ids="initialDatasetIds"
+      @open-viewer="openViewer"
+    />
+  </v-main>
+</template>
diff --git a/client/platform/desktop/frontend/components/ViewerLoader.vue b/client/platform/desktop/frontend/components/ViewerLoader.vue
index 56eaef38b..4ea303611 100644
--- a/client/platform/desktop/frontend/components/ViewerLoader.vue
+++ b/client/platform/desktop/frontend/components/ViewerLoader.vue
@@ -3,6 +3,8 @@ import {
   computed, defineComponent, ref, watch, Ref, onMounted, onBeforeUnmount, nextTick,
 } from 'vue';
 import { ANNOTATION_SOURCE_QUERY } from 'dive-common/scoring/viewerNavigation';
+import { parseViewerFocus } from 'dive-common/review/viewerNavigation';
+import { useReviewSessionHeld } from 'dive-common/review/reviewSession';
 import { useRoute, useRouter } from 'vue-router/composables';
 import Viewer from 'dive-common/components/Viewer.vue';
 import RunPipelineMenu from 'dive-common/components/RunPipelineMenu.vue';
@@ -131,6 +133,10 @@ export default defineComponent({
       return typeof value === 'string' ? value : '';
     });
     const annotationSourceReturnable = computed(() => !!annotationSourceLabel.value);
+    /** Frame / track deep link from the review grid. */
+    const viewerFocus = computed(() => parseViewerFocus(route.query));
+    /** Jump back to Review when a session was parked by opening the viewer. */
+    const reviewSessionHeld = useReviewSessionHeld();
 
     function returnToCurrentAnnotations() {
       router.replace({ name: 'viewer', params: { id: props.id } });
@@ -2032,6 +2038,8 @@ export default defineComponent({
       onCalibrationDeleted,
       annotationSourceLabel,
       annotationSourceReturnable,
+      viewerFocus,
+      reviewSessionHeld,
       returnToCurrentAnnotations,
     };
   },
@@ -2046,6 +2054,8 @@ export default defineComponent({
       :read-only-mode="readOnlyMode || runningPipelines.length > 0"
       :annotation-source-label="annotationSourceLabel"
       :annotation-source-returnable="annotationSourceReturnable"
+      :initial-frame="viewerFocus.frame"
+      :initial-track-id="viewerFocus.trackId"
       :text-query-enabled="true"
       :text-query-available="textQueryAvailable"
       @return-to-current-annotations="returnToCurrentAnnotations"
@@ -2074,6 +2084,12 @@ export default defineComponent({
             Library<v-icon>mdi-folder-open</v-icon>
           </v-tab>
           <job-tab />
+          <v-tab
+            v-if="reviewSessionHeld"
+            :to="{ name: 'review' }"
+          >
+            Review<v-icon>mdi-view-grid-outline</v-icon>
+          </v-tab>
           <v-tab :to="{ name: 'training' }">
             Training<v-icon>mdi-brain</v-icon>
           </v-tab>
diff --git a/client/platform/desktop/router.ts b/client/platform/desktop/router.ts
index 77ef9aeac..90c3bd8b0 100644
--- a/client/platform/desktop/router.ts
+++ b/client/platform/desktop/router.ts
@@ -8,6 +8,7 @@ import TrainingPage from './frontend/components/TrainingPage.vue';
 import ViewerLoader from './frontend/components/ViewerLoader.vue';
 import PipelinePage from './frontend/components/PipelinePage.vue';
 import ScoringPage from './frontend/components/ScoringPage.vue';
+import ReviewPage from './frontend/components/ReviewPage.vue';
 
 Vue.use(Router);
 
@@ -28,6 +29,11 @@ export default new Router({
       name: 'training',
       component: TrainingPage,
     },
+    {
+      path: '/review',
+      name: 'review',
+      component: ReviewPage,
+    },
     {
       path: '/pipeline',
       name: 'pipeline',
diff --git a/client/platform/web-girder/App.vue b/client/platform/web-girder/App.vue
index 6bf18cbac..5c82a1f62 100644
--- a/client/platform/web-girder/App.vue
+++ b/client/platform/web-girder/App.vue
@@ -30,6 +30,7 @@ import {
   importAnnotationFile,
   importCameraRegistration,
   loadDetections,
+  loadDatasetConfig,
   saveDetections,
   unwrap,
   getTiles,
@@ -95,6 +96,7 @@ export default defineComponent({
       saveAttributes: unwrap(saveAttributes),
       saveAttributeTrackFilters: unwrap(saveAttributeTrackFilters),
       loadConfig,
+      peekConfig: loadDatasetConfig,
       hasCalibrationFile,
       openFromDisk: openFromDiskWithRegistry,
       getLastCalibration,
diff --git a/client/platform/web-girder/api/dataset.service.ts b/client/platform/web-girder/api/dataset.service.ts
index a8ab3cb92..871a30971 100644
--- a/client/platform/web-girder/api/dataset.service.ts
+++ b/client/platform/web-girder/api/dataset.service.ts
@@ -9,12 +9,12 @@ import {
   SaveAttributeArgs, SaveAttributeTrackFilterArgs,
 } from 'dive-common/apispec';
 import {
-  calibrationFileMarker, frameMetadataFileMarker, jsonCalibrationFileMarker,
+  calibrationFileMarker, frameMetadataFileMarker, jsonCalibrationFileMarker, MultiType,
 } from 'dive-common/constants';
 import { attachFrameTimestamps } from 'dive-common/frameTimestamp';
 import { parentDatasetId } from 'dive-common/compositeDatasetId';
 import { isStereoCalibrationFileName } from 'dive-common/stereoParentFolder';
-import { GirderConfigStatic } from 'platform/web-girder/constants';
+import type { GirderConfig, GirderConfigStatic } from 'platform/web-girder/constants';
 import girderRest from 'platform/web-girder/plugins/girder';
 import { resolveDatasetFolderId } from './multicamResolve';
 import { postProcess } from './rpc.service';
@@ -77,6 +77,43 @@ async function getDatasetMedia(datasetId: string) {
   return response;
 }
 
+/**
+ * The dataset's static metadata merged with its media, as the viewer
+ * consumes it. A multicamera parent keeps its per-camera media and no
+ * media of its own.
+ */
+function mergeDatasetConfig(
+  metaStatic: GirderConfigStatic,
+  media: DatasetSourceMedia,
+  compositeId: string | null | undefined,
+): GirderConfig {
+  const dsMeta: GirderConfig = {
+    ...metaStatic,
+    ...media,
+    id: compositeId ?? metaStatic.id,
+    videoUrl: media.video?.url,
+  };
+  if (dsMeta.type === MultiType && !compositeId) {
+    dsMeta.multiCamMedia = metaStatic.multiCamMedia;
+    dsMeta.imageData = [];
+    dsMeta.videoUrl = undefined;
+  }
+  return dsMeta;
+}
+
+/**
+ * Load a dataset's config without touching any shared store (see
+ * useDataset.loadDataset for the stateful variant the viewer uses).
+ */
+async function loadDatasetConfig(datasetId: string): Promise<GirderConfig> {
+  const { compositeId } = await resolveDatasetFolderId(datasetId);
+  const [metaStatic, media] = await Promise.all([
+    getDataset(datasetId),
+    getDatasetMedia(datasetId),
+  ]);
+  return mergeDatasetConfig(metaStatic.data, media.data, compositeId);
+}
+
 function clone({
   folderId, name, parentFolderId, revision,
 }: {
@@ -496,6 +533,8 @@ export {
   getDataset,
   getDatasetList,
   getDatasetMedia,
+  loadDatasetConfig,
+  mergeDatasetConfig,
   hasCalibrationFile,
   getDatasetCalibration,
   importAnnotationFile,
diff --git a/client/platform/web-girder/router.ts b/client/platform/web-girder/router.ts
index 98568bb60..5a9246a38 100644
--- a/client/platform/web-girder/router.ts
+++ b/client/platform/web-girder/router.ts
@@ -6,6 +6,7 @@ import Home from './views/Home.vue';
 import Jobs from './views/Jobs.vue';
 import TrainedModels from './views/TrainedModels.vue';
 import Scoring from './views/Scoring.vue';
+import Review from './views/Review.vue';
 import Login from './views/Login.vue';
 import RouterPage from './views/RouterPage.vue';
 import AdminPage from './views/AdminPage.vue';
@@ -105,6 +106,12 @@ const router = new Router({
           component: Scoring,
           beforeEnter,
         },
+        {
+          path: 'review',
+          name: 'review',
+          component: Review,
+          beforeEnter,
+        },
         {
           path: '',
           component: Home,
diff --git a/client/platform/web-girder/store/useDataset.ts b/client/platform/web-girder/store/useDataset.ts
index b992d1ac9..623bec3e9 100644
--- a/client/platform/web-girder/store/useDataset.ts
+++ b/client/platform/web-girder/store/useDataset.ts
@@ -3,7 +3,7 @@ import type { GirderModelType } from '@girder/components/src';
 import type { GirderConfig } from 'platform/web-girder/constants';
 import { ref } from 'vue';
 import {
-  getDataset, getDatasetMedia, getFolder, resolveDatasetFolderId,
+  getDataset, getDatasetMedia, getFolder, mergeDatasetConfig, resolveDatasetFolderId,
 } from 'platform/web-girder/api';
 import { parentDatasetId } from 'dive-common/compositeDatasetId';
 import { MultiType } from 'dive-common/constants';
@@ -28,17 +28,7 @@ export function useDataset() {
       getDataset(datasetId),
       getDatasetMedia(datasetId),
     ]);
-    const dsMeta: GirderConfig = {
-      ...metaStatic.data,
-      ...media.data,
-      id: compositeId ?? metaStatic.data.id,
-      videoUrl: media.data.video?.url,
-    };
-    if (dsMeta.type === MultiType && !compositeId) {
-      dsMeta.multiCamMedia = metaStatic.data.multiCamMedia;
-      dsMeta.imageData = [];
-      dsMeta.videoUrl = undefined;
-    }
+    const dsMeta = mergeDatasetConfig(metaStatic.data, media.data, compositeId);
     // Only update the shared store for the parent dataset. Per-camera composite
     // loads (parentId/cameraName) must not overwrite multicam metadata used by
     // ViewerLoader pipeline filters and other chrome.
diff --git a/client/platform/web-girder/views/Home.vue b/client/platform/web-girder/views/Home.vue
index b73b7896e..e922a3676 100644
--- a/client/platform/web-girder/views/Home.vue
+++ b/client/platform/web-girder/views/Home.vue
@@ -177,6 +177,12 @@ export default defineComponent({
         query: { datasetIds: this.selectedViameFolderIds.join(',') },
       });
     },
+    reviewSelection() {
+      this.$router.push({
+        name: 'review',
+        query: { datasetIds: this.selectedViameFolderIds.join(',') },
+      });
+    },
     async deleteSelection() {
       const result = await this.prompt({
         title: 'Confirm',
@@ -271,6 +277,18 @@ export default defineComponent({
                     Score
                   </span>
                 </v-btn>
+                <v-btn
+                  v-if="selectedViameFolderIds.length > 0"
+                  v-bind="buttonOptions"
+                  @click="reviewSelection"
+                >
+                  <v-icon>
+                    mdi-view-grid-outline
+                  </v-icon>
+                  <span class="pl-1">
+                    Review
+                  </span>
+                </v-btn>
                 <export
                   v-bind="{ buttonOptions, menuOptions }"
                   :dataset-ids="locationInputs"
diff --git a/client/platform/web-girder/views/NavigationBar.vue b/client/platform/web-girder/views/NavigationBar.vue
index 475542196..f1d81a7b4 100644
--- a/client/platform/web-girder/views/NavigationBar.vue
+++ b/client/platform/web-girder/views/NavigationBar.vue
@@ -82,6 +82,9 @@ export default defineComponent({
         >
           Models <v-icon>mdi-brain</v-icon>
         </v-tab>
+        <v-tab to="/review">
+          Review <v-icon>mdi-view-grid-outline</v-icon>
+        </v-tab>
         <v-tab
           v-if="pipelinesEnabled"
           to="/scoring"
diff --git a/client/platform/web-girder/views/Review.vue b/client/platform/web-girder/views/Review.vue
new file mode 100644
index 000000000..3b14a5207
--- /dev/null
+++ b/client/platform/web-girder/views/Review.vue
@@ -0,0 +1,34 @@
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+import { useRoute, useRouter } from 'vue-router/composables';
+import ReviewPage from 'dive-common/components/Review/ReviewPage.vue';
+import { reviewViewerLocation, ViewerFocus } from 'dive-common/review/viewerNavigation';
+
+export default defineComponent({
+  name: 'Review',
+  components: { ReviewPage },
+  setup() {
+    const route = useRoute();
+    const router = useRouter();
+
+    const initialDatasetIds = computed(() => {
+      const raw = route.query.datasetIds;
+      const joined = Array.isArray(raw) ? raw.join(',') : raw;
+      return typeof joined === 'string' ? joined.split(',').filter((id) => id) : [];
+    });
+
+    function openViewer(datasetId: string, focus: ViewerFocus) {
+      router.push(reviewViewerLocation(datasetId, focus));
+    }
+
+    return { initialDatasetIds, openViewer };
+  },
+});
+</script>
+
+<template>
+  <ReviewPage
+    :initial-dataset-ids="initialDatasetIds"
+    @open-viewer="openViewer"
+  />
+</template>
diff --git a/client/platform/web-girder/views/ViewerLoader.vue b/client/platform/web-girder/views/ViewerLoader.vue
index 0b3d4b145..ca69c0f9e 100644
--- a/client/platform/web-girder/views/ViewerLoader.vue
+++ b/client/platform/web-girder/views/ViewerLoader.vue
@@ -25,6 +25,8 @@ import { webExcludedPipelineTerms } from 'dive-common/constants';
 import { convertLargeImage } from 'platform/web-girder/api/rpc.service';
 import { useRouter, useRoute } from 'vue-router/composables';
 import { ANNOTATION_SOURCE_QUERY } from 'dive-common/scoring/viewerNavigation';
+import { parseViewerFocus } from 'dive-common/review/viewerNavigation';
+import { useReviewSessionHeld } from 'dive-common/review/reviewSession';
 import useStereoOnnxWeb from 'platform/web-girder/useStereoOnnxWeb';
 import {
   STEREO_LENGTH_METHOD_ATTR, STEREO_MEASUREMENT_ATTRS,
@@ -427,6 +429,10 @@ export default defineComponent({
       return typeof value === 'string' ? value : '';
     });
     const annotationSourceReturnable = computed(() => !!annotationSourceLabel.value);
+    /** Frame / track deep link from the review grid. */
+    const viewerFocus = computed(() => parseViewerFocus(route.query));
+    /** Jump back to Review when a session was parked by opening the viewer. */
+    const reviewSessionHeld = useReviewSessionHeld();
 
     function returnToCurrentAnnotations() {
       router.replace({ name: 'viewer', params: { id: props.id } });
@@ -470,6 +476,8 @@ export default defineComponent({
       handleStereoWarpImported,
       annotationSourceLabel,
       annotationSourceReturnable,
+      viewerFocus,
+      reviewSessionHeld,
       returnToCurrentAnnotations,
     };
   },
@@ -488,6 +496,8 @@ export default defineComponent({
       :comparison-sets="comparisonSets"
       :annotation-source-label="annotationSourceLabel"
       :annotation-source-returnable="annotationSourceReturnable"
+      :initial-frame="viewerFocus.frame"
+      :initial-track-id="viewerFocus.trackId"
       @return-to-current-annotations="returnToCurrentAnnotations"
       @large-image-warning="largeImageWarning()"
       @update:set="routeSet"
@@ -509,6 +519,13 @@ export default defineComponent({
             <v-icon>mdi-database</v-icon>
           </v-tab>
           <JobsTab />
+          <v-tab
+            v-if="reviewSessionHeld"
+            :to="{ name: 'review' }"
+          >
+            Review
+            <v-icon>mdi-view-grid-outline</v-icon>
+          </v-tab>
         </v-tabs>
       </template>
       <template #title-right>
diff --git a/client/src/components/annotators/VideoAnnotator.vue b/client/src/components/annotators/VideoAnnotator.vue
index 2ea308f17..f66c50d82 100644
--- a/client/src/components/annotators/VideoAnnotator.vue
+++ b/client/src/components/annotators/VideoAnnotator.vue
@@ -7,64 +7,8 @@ import { Flick, SetTimeFunc } from '../../use/useTimeObserver';
 import AnnotatorImageCursor from './AnnotatorImageCursor.vue';
 import useAnnotatorImageCursor from './useAnnotatorImageCursor';
 import { injectCameraInitializer } from './useMediaController';
-/**
- * For MPEG codecs, the PTS (Presentation Timestamp)
- * should be forced ahead 1 tick. currentTime has a finite
- * resolution of 90MHZ
- *
- * Chrome has a PTS precision bug:
- * https://bugs.chromium.org/p/chromium/issues/detail?id=555376
- * "currentTime must be in the range [PTS, PTS + duration)",
- * but Chrome behaves as if currentTime in = [PTS, PTS + duration]
- *
- * Firefox behaves correctly, so it's harmless to advance a single
- * tick into the already correct PTS.
- *
- * Other browsers can be wrong by more than an entire frame and are
- * futile to attempt to correct.
- *
- * TODO: VideoAnnotator _should_not_ report this PTS force hack
- * when reporting currentTime, as it would be inaccurate re: the
- * MPEG specification.
- */
-const OnePTSTick = 1 / (90 * 1000);
-/**
- * The Kwiver seek function performs seek based on
- * downsampled frame number such that the converse of the
- * function (maping timestamp to downsampled frame)
- * is consistent with the implementation in kwiver:
- *
- * https://github.com/Kitware/kwiver/blob/1c97ad72c8b6237cb4b9618665d042be16825005/sprokit/processes/core/downsample_process.cxx#L267
- */
-function kwiverSeek(frame: number, frameRate: number, originalFps: number) {
-  /**
-   * If the downsample rate is truly lower than the original,
-   * ceiling to find the sample boundary, else floor
-   */
-  const roundOrFloor = frameRate < originalFps ? Math.ceil : Math.floor;
-  /**
-   * requestedTimeInSeconds is the position, in seconds, that was
-   * requested for seek
-   */
-  const requestedTimeInSeconds = frame / frameRate;
-  /**
-   * RequestedTrueVideoFrame is the floating point frame number
-   * expected to be found at requested time
-   */
-  const requestedTrueVideoFrame = requestedTimeInSeconds * originalFps;
-  /**
-   * nextTrueFrameBoundary is the time, in seconds, of the
-   * next frame transition boundary ASSUMING even frame spacing.
-   *
-   * For videos with b frames or inconsistent frame widths, this
-   * will only be an aggregate approximation
-   */
-  const nextTrueFrameBoundary = roundOrFloor(requestedTrueVideoFrame) / originalFps;
-  /**
-   * Return one tick over the appropriate boundary
-   */
-  return nextTrueFrameBoundary + OnePTSTick;
-}
+import { kwiverSeek, OnePTSTick } from './videoSeek';
+
 export default defineComponent({
   name: 'VideoAnnotator',
   components: { AnnotatorImageCursor },
diff --git a/client/src/components/annotators/videoSeek.ts b/client/src/components/annotators/videoSeek.ts
new file mode 100644
index 000000000..988abc68a
--- /dev/null
+++ b/client/src/components/annotators/videoSeek.ts
@@ -0,0 +1,80 @@
+/**
+ * Frame number to video time mapping shared by the video annotator and any
+ * other code that has to land an HTMLVideoElement on a DIVE frame (e.g. the
+ * review grid cropping detections out of a video).
+ */
+
+/**
+ * For MPEG codecs, the PTS (Presentation Timestamp)
+ * should be forced ahead 1 tick. currentTime has a finite
+ * resolution of 90MHZ
+ *
+ * Chrome has a PTS precision bug:
+ * https://bugs.chromium.org/p/chromium/issues/detail?id=555376
+ * "currentTime must be in the range [PTS, PTS + duration)",
+ * but Chrome behaves as if currentTime in = [PTS, PTS + duration]
+ *
+ * Firefox behaves correctly, so it's harmless to advance a single
+ * tick into the already correct PTS.
+ *
+ * Other browsers can be wrong by more than an entire frame and are
+ * futile to attempt to correct.
+ *
+ * TODO: VideoAnnotator _should_not_ report this PTS force hack
+ * when reporting currentTime, as it would be inaccurate re: the
+ * MPEG specification.
+ */
+export const OnePTSTick = 1 / (90 * 1000);
+
+/**
+ * The Kwiver seek function performs seek based on
+ * downsampled frame number such that the converse of the
+ * function (maping timestamp to downsampled frame)
+ * is consistent with the implementation in kwiver:
+ *
+ * https://github.com/Kitware/kwiver/blob/1c97ad72c8b6237cb4b9618665d042be16825005/sprokit/processes/core/downsample_process.cxx#L267
+ */
+export function kwiverSeek(frame: number, frameRate: number, originalFps: number) {
+  /**
+   * If the downsample rate is truly lower than the original,
+   * ceiling to find the sample boundary, else floor
+   */
+  const roundOrFloor = frameRate < originalFps ? Math.ceil : Math.floor;
+  /**
+   * requestedTimeInSeconds is the position, in seconds, that was
+   * requested for seek
+   */
+  const requestedTimeInSeconds = frame / frameRate;
+  /**
+   * RequestedTrueVideoFrame is the floating point frame number
+   * expected to be found at requested time
+   */
+  const requestedTrueVideoFrame = requestedTimeInSeconds * originalFps;
+  /**
+   * nextTrueFrameBoundary is the time, in seconds, of the
+   * next frame transition boundary ASSUMING even frame spacing.
+   *
+   * For videos with b frames or inconsistent frame widths, this
+   * will only be an aggregate approximation
+   */
+  const nextTrueFrameBoundary = roundOrFloor(requestedTrueVideoFrame) / originalFps;
+  /**
+   * Return one tick over the appropriate boundary
+   */
+  return nextTrueFrameBoundary + OnePTSTick;
+}
+
+/**
+ * The video currentTime that shows DIVE frame `frame`: the kwiver-consistent
+ * boundary when the true video rate is known, else a plain division.
+ */
+export function frameToVideoTime(
+  frame: number,
+  frameRate: number,
+  originalFps?: number | null,
+): number {
+  if (originalFps) {
+    return kwiverSeek(frame, frameRate, originalFps);
+  }
+  return frame / frameRate + OnePTSTick;
+}
diff --git a/docs/Review.md b/docs/Review.md
new file mode 100644
index 000000000..7f18fa4a6
--- /dev/null
+++ b/docs/Review.md
@@ -0,0 +1,90 @@
+# Review
+
+Review shows many annotations at once as a grid of cropped image chips, so you can audit a whole class (or everything carrying an attribute) across one or more datasets and fix wrong types in place, without stepping through each sequence in the annotation viewer. It is available on both DIVE Web and DIVE Desktop as the **Review** tab in the navigation bar.
+
+## Opening the Review page
+
+### Web
+
+* Click the **Review** tab in the top navigation.
+* Or select one or more datasets on the **Data** home page and click **Review**.
+* Direct URL: `/review?datasetIds=<id1>,<id2>`.
+
+### Desktop
+
+* Click the **Review** tab in the navigation bar.
+* Or on the **Library** page, select projects and click **Review**.
+
+## Choosing datasets
+
+The page has two views, toggled with the **Datasets** / **Grid** buttons at the top left; only one is shown at a time to keep the grid uncluttered.
+
+The **Datasets** view has the same dataset picker as the Training and Pipelines pages: search the library, add datasets one at a time or with **Select all**, and drop them again with **Remove all** (on the web, **Browse** opens the folder picker instead). The selected datasets are listed underneath with their type, how many tracks they hold and their load state; reload a dataset's annotations or remove it from there. Datasets picked here are only queued: their annotations are read when you switch to **Results**, so picking many costs nothing until you look at them.
+
+Notes:
+
+* Multicamera datasets are added one camera at a time; adding the parent expands it into its cameras automatically.
+* Tiled large-image datasets load, but their media cannot be cropped into chips yet; their entries show a placeholder.
+* On web, the dataset's default annotation set is used.
+
+## The grid
+
+The **Datasets** panel opens on a first visit with nothing loaded; coming back with loaded datasets opens **Results**. The Results grid shows the annotations that match the current query. Until a dataset has been added and loaded it only says so. Each entry shows:
+
+* the annotation's box, outlined, cropped out of the image or video frame with some extra context around it;
+* the confidence of the shown type (top left);
+* an editable **type** field underneath, with every type seen across the loaded datasets offered as suggestions;
+* the dataset name (when more than one is loaded), track id, and frame or frame count;
+* any polygon outline and head/tail points the detection carries, drawn over the chip.
+
+Hover an entry for its actions (they grow under the mouse): **mark correct** (sets the shown type's confidence to 1 and drops other candidate types), **delete** (a red X; the annotation is removed on the next save), **edit geometry**, and **open in viewer**. Double clicking the image also opens the annotation viewer on that dataset, seeks to the frame the entry is showing, and selects the track. While a review session is open, the viewer's top bar shows a **Review** tab so you can jump back to the same grid and page.
+
+Tracks cycle through their sampled frames at the dataset's real-time rate (sparser samples wait proportionally longer, so a loop lasts about as long as the track does). The arrows in the filmstrip badge step through them by hand, which pauses the cycling on that frame until the play button resumes it; starting an edit pauses it too.
+
+The type field and caption grow a little as the grid shows fewer entries, so a 3 by 3 grid is comfortably readable while a dense grid stays compact.
+
+### Stereo and multi-camera datasets
+
+Each camera of a multi-camera (or stereo) dataset is loaded as its own sequence, but a track that appears in several cameras is one entry, showing a chip per camera side by side with the camera named on it. The chips show the same frames on every side, and zooming or panning one side moves the others with it. Where one camera has no detection on a frame the track has elsewhere, that side is still cropped at a position interpolated from its own neighbouring boxes and shows **no box**; its **add box** action creates a detection there, at the interpolated position, ready to be adjusted. The type field applies to the track in every camera, and opening the viewer opens the whole rig.
+
+### Editing boxes, polygons and points in place
+
+Right click an entry (or use its edit action) to adjust the frame it is showing without opening the viewer. The cycling pauses on that frame, the box gains the same handles the annotator uses (in the type's colour, red while dragged), and any polygon vertices and head/tail points can be dragged too. The mouse wheel zooms into the chip about the cursor and dragging empty space or middle-dragging anywhere pans it, as in the annotator; the zoom stays until you wheel back out. Right click again, or press **Enter** or **Apply**, to keep the change; **Esc** or **Cancel** drops it. The chip keeps its crop after an edit, with the box drawn over it at its new position. Edits are held with the type edits until you **Save**; when auto-save is enabled in the settings, review edits are saved after the same delay the annotator uses.
+
+**Tracks** spanning several frames first show their first box, then, once the extra frames have loaded, cycle through up to eight boxes evenly sampled along the track. The object stays centred in the entry as it cycles. A filmstrip badge shows which sampled frame is on screen.
+
+### Querying
+
+Two query modes are available in the toolbar:
+
+* **Type**: pick a type (or *Any type*) and a minimum confidence. The list offers only the types found on the selected datasets at that confidence or above, so every choice has results. Every track whose matching type meets the threshold is listed once.
+* **Attribute**: pick an attribute key, optionally a value, and whether to look at track attributes, detection (per-frame) attributes, or both. Matches on detection attributes show the frames that carry the attribute.
+
+Changes to the query take effect as soon as they settle. The grid otherwise keeps its entries, so editing a type never reshuffles the page you are working on.
+
+The gear next to **Save** opens the same settings as the annotator, including the auto-save switch and delay.
+
+Entries are sorted by confidence, highest first, by default; the sort field also offers lowest first, dataset and track id, or frame.
+
+### Grid size and zoom
+
+The mouse wheel over any entry zooms into it about the cursor, editing or not, and dragging the zoomed image (with the left or the middle button) pans it; wheel back out to return to the full chip.
+
+The default grid is 5 columns by 4 rows. Set the columns and rows directly, or use the zoom buttons: zoom in shows fewer, larger entries and zoom out shows more, smaller ones, keeping the grid's shape. The **Context** slider controls how much image is shown around each box, as a fraction of the box size (30% by default). These settings are remembered per browser.
+
+Use the arrow keys, Page Up / Page Down, Home and End to page through the results. Paging quickly only loads the page you stop on; pages passed over are skipped.
+
+Chips are rendered at the resolution of the cell they fill. A box a few pixels across still has only a few pixels of image behind it, but it is resampled once at full cell size rather than being stretched by the browser, so small objects come out as sharp as the source allows.
+
+### Editing types
+
+Type into an entry's type field and press Enter (or click away), or open its dropdown with the arrow button (which also closes it) and pick one of the known types, to reassign the annotation's type; the new type becomes the top confidence pair with confidence 1, the same as changing the type in the viewer's track list. Edited entries get an amber border and a pencil badge until saved.
+
+**Page actions** applies to every entry on the current page: set them all to one type, or mark them all correct.
+
+Nothing is written until you press **Save**; the Save button stays disabled until there is something to write, and a badge on it shows how many annotations are queued. **Discard** reloads the affected datasets. Leaving the page (or opening the viewer) with unsaved changes asks whether to **Save and Leave**, **Discard and Leave**, or **Stay**. After a clean leave, coming back to Review resumes the same datasets and page, opening Results when any are loaded. Starting Review from the library with a different selection begins a fresh session. Closing the browser tab or the application with unsaved changes asks for confirmation.
+
+
+When you return from the viewer, Review reloads saved annotations before showing the chips, so a later type edit preserves geometry changed in the viewer. The query and page are retained. If a dataset cannot be refreshed, its stale annotations are not editable; retry loading it on the Datasets panel. If **Discard and Leave** cannot reload the original annotations, Review stays open with your changes pending and shows an error.
+
+For multicamera queries, a match in any camera selects the logical track. Type changes, acceptance and deletion apply to all its displayed camera tracks, including cameras whose confidence or attributes did not match the query.
diff --git a/mkdocs.yml b/mkdocs.yml
index 3d6ef7d57..1f2111ddb 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -73,6 +73,7 @@ nav:
       - Image Enhancements: UI-Image-Enhancements.md
       - Annotation Sets: Annotation-Sets.md
       - Scoring: Scoring.md
+      - Review: Review.md
     - Keyboard Shortcut Reference: Mouse-Keyboard-Shortcuts.md
     - Advanced features:
       - Pipeline Import and Export: Pipeline-Import-Export.md