diff --git a/apps/api/src/instrument-records/__tests__/export-worker.test.ts b/apps/api/src/instrument-records/__tests__/export-worker.test.ts
index 5d3e1fbf9..d2d85b065 100644
--- a/apps/api/src/instrument-records/__tests__/export-worker.test.ts
+++ b/apps/api/src/instrument-records/__tests__/export-worker.test.ts
@@ -2,7 +2,7 @@ import { EventEmitter } from 'events';
 
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import type { InitData, ParentMessage, RecordType } from '../thread-types';
+import type { InitPayload, ParentMessage, RecordType } from '../thread-types';
 
 class MockParentPort extends EventEmitter {
   postMessage = vi.fn();
@@ -14,7 +14,10 @@ class MockParentPort extends EventEmitter {
 
 const RUNTIME_INTERNAL_SPECIFIER = '#runtime/v1/@opendatacapture/runtime-internal/index.js';
 
-const initData: InitData = [{ edition: 2, id: 'instrument-1', name: 'Happiness Questionnaire' }];
+const initData: InitPayload = {
+  instruments: [{ edition: 2, id: 'instrument-1', name: 'Happiness Questionnaire' }],
+  seriesNames: { 'series-1': 'Happiness Series' }
+};
 
 const createRecord = (overrides: Partial<RecordType> = {}): RecordType => ({
   computedMeasures: { score: 85 },
@@ -22,6 +25,7 @@ const createRecord = (overrides: Partial<RecordType> = {}): RecordType => ({
   groupId: 'group-1',
   id: 'record-1',
   instrumentId: 'instrument-1',
+  seriesInstrumentId: null,
   session: {
     date: '2025-01-01',
     id: 'session-1',
@@ -42,6 +46,8 @@ const expectedRow = {
   instrumentEdition: 2,
   instrumentName: 'Happiness Questionnaire',
   measure: 'score',
+  seriesId: null,
+  seriesName: null,
   sessionDate: '2025-01-01',
   sessionId: 'session-1',
   sessionType: 'IN_PERSON',
@@ -102,6 +108,28 @@ describe('export-worker', () => {
     expect(parentPort.postMessage).toHaveBeenCalledWith({ success: true });
   });
 
+  // The id is the stable identifier an analysis keys on; the name is carried beside it only because
+  // a bare id in a CSV is unreadable.
+  it('should carry both the series id and its resolved title on a record a series orchestrated', async () => {
+    const parentPort = await loadInitializedWorker();
+    parentPort.send({ data: [createRecord({ seriesInstrumentId: 'series-1' })], type: 'BEGIN_CHUNK_PROCESSING' });
+    expect(parentPort.postMessage).toHaveBeenLastCalledWith({
+      data: [{ ...expectedRow, seriesId: 'series-1', seriesName: 'Happiness Series' }],
+      success: true
+    });
+  });
+
+  // A series deleted since its records were collected still has an id on them, and the export has to
+  // report what it knows rather than failing the whole download.
+  it('should report the series id with a null title when no title was resolved for it', async () => {
+    const parentPort = await loadInitializedWorker();
+    parentPort.send({ data: [createRecord({ seriesInstrumentId: 'series-missing' })], type: 'BEGIN_CHUNK_PROCESSING' });
+    expect(parentPort.postMessage).toHaveBeenLastCalledWith({
+      data: [{ ...expectedRow, seriesId: 'series-missing', seriesName: null }],
+      success: true
+    });
+  });
+
   it('should throw on an unknown message type, so a protocol mismatch is not silently ignored', async () => {
     const parentPort = (await loadWorker())!;
     expect(() => parentPort.emit('message', { type: 'UNKNOWN' })).toThrow('Unexpected message type: UNKNOWN');
diff --git a/apps/api/src/instrument-records/__tests__/instrument-records.controller.test.ts b/apps/api/src/instrument-records/__tests__/instrument-records.controller.test.ts
index 6353ca2f3..4d793332d 100644
--- a/apps/api/src/instrument-records/__tests__/instrument-records.controller.test.ts
+++ b/apps/api/src/instrument-records/__tests__/instrument-records.controller.test.ts
@@ -44,9 +44,24 @@ describe('InstrumentRecordsController', () => {
 
   it('should pass every query filter to find, scoped to the caller ability', async () => {
     const minDate = new Date('2025-01-01');
-    await instrumentRecordsController.find(ability, 'FORM', minDate, 'group-1', 'instrument-1', 'subject-1');
+    await instrumentRecordsController.find(
+      ability,
+      'FORM',
+      minDate,
+      'group-1',
+      'instrument-1',
+      'series-1',
+      'subject-1'
+    );
     expect(instrumentRecordsService.find).toHaveBeenCalledWith(
-      { groupId: 'group-1', instrumentId: 'instrument-1', kind: 'FORM', minDate, subjectId: 'subject-1' },
+      {
+        groupId: 'group-1',
+        instrumentId: 'instrument-1',
+        kind: 'FORM',
+        minDate,
+        seriesInstrumentId: 'series-1',
+        subjectId: 'subject-1'
+      },
       { ability }
     );
   });
@@ -79,6 +94,21 @@ describe('InstrumentRecordsController', () => {
     expect(instrumentRecordsService.summarizeBySubject).toHaveBeenCalledWith({ groupId: 'group-1' }, { ability });
   });
 
+  it('should summarize the records per instrument, scoped to the caller ability', async () => {
+    const summary = [{ instrumentId: 'instrument-1', lastCollectedAt: null, recordCount: 2, subjectCount: 1 }];
+    instrumentRecordsService.summarizeByInstrument.mockResolvedValueOnce(summary);
+    await expect(instrumentRecordsController.summarizeByInstrument(ability, 'group-1')).resolves.toBe(summary);
+    expect(instrumentRecordsService.summarizeByInstrument).toHaveBeenCalledWith({ groupId: 'group-1' }, { ability });
+  });
+
+  // A series owns no records under its own id, so its totals come from a separate aggregation.
+  it('should summarize the records per series, scoped to the caller ability', async () => {
+    const summary = [{ instrumentId: 'series-1', lastCollectedAt: null, recordCount: 4, subjectCount: 2 }];
+    instrumentRecordsService.summarizeBySeries.mockResolvedValueOnce(summary);
+    await expect(instrumentRecordsController.summarizeBySeries(ability, 'group-1')).resolves.toBe(summary);
+    expect(instrumentRecordsService.summarizeBySeries).toHaveBeenCalledWith({ groupId: 'group-1' }, { ability });
+  });
+
   it('should update the record with the unwrapped data, scoped to the caller ability', async () => {
     await instrumentRecordsController.updateById('record-1', { data: { score: 2 } }, ability);
     expect(instrumentRecordsService.updateById).toHaveBeenCalledWith('record-1', { score: 2 }, { ability });
diff --git a/apps/api/src/instrument-records/__tests__/instrument-records.service.test.ts b/apps/api/src/instrument-records/__tests__/instrument-records.service.test.ts
index 1a18a1bba..61e0d06f2 100644
--- a/apps/api/src/instrument-records/__tests__/instrument-records.service.test.ts
+++ b/apps/api/src/instrument-records/__tests__/instrument-records.service.test.ts
@@ -676,6 +676,27 @@ describe('InstrumentRecordsService', () => {
       expect(groupsService.findById).toHaveBeenCalledBefore(instrumentRecordModel.findMany);
     });
 
+    // Asking a scalar instrument for what it orchestrated is a mistake rather than an empty result,
+    // so it is refused instead of silently returning nothing.
+    it('should reject a seriesInstrumentId that names an instrument which is not a series', async () => {
+      instrumentsService.findById.mockResolvedValueOnce({ id: 'form-1', kind: 'FORM' } as any);
+
+      await expect(instrumentRecordsService.find({ seriesInstrumentId: 'form-1' })).rejects.toBeInstanceOf(
+        UnprocessableEntityException
+      );
+      expect(instrumentRecordModel.findMany).not.toHaveBeenCalled();
+    });
+
+    it('should query the records a series orchestrated', async () => {
+      instrumentsService.findById.mockResolvedValueOnce({ id: 'series-1', kind: 'SERIES' } as any);
+
+      await instrumentRecordsService.find({ seriesInstrumentId: 'series-1' });
+
+      expect(instrumentRecordModel.findMany.mock.lastCall?.[0].where.AND).toContainEqual({
+        seriesInstrumentId: 'series-1'
+      });
+    });
+
     it('should restrict the records to instruments of the requested kind', async () => {
       instrumentsService.find.mockResolvedValueOnce([{ id: 'form-1' }, { id: 'form-2' }]);
 
@@ -735,7 +756,7 @@ describe('InstrumentRecordsService', () => {
       await instrumentRecordsService.find({ subjectId: 'subject-1' });
 
       expect(sessionModel.findMany).toHaveBeenCalledWith({
-        select: { id: true, user: { select: { username: true } } },
+        select: { id: true, type: true, user: { select: { username: true } } },
         where: { AND: [{}, { id: { in: ['session-1', 'session-2'] } }] }
       });
     });
@@ -751,7 +772,7 @@ describe('InstrumentRecordsService', () => {
       await instrumentRecordsService.find({ subjectId: 'subject-1' }, { ability });
 
       expect(sessionModel.findMany).toHaveBeenCalledWith({
-        select: { id: true, user: { select: { username: true } } },
+        select: { id: true, type: true, user: { select: { username: true } } },
         where: { AND: [accessibleQuery(ability, 'read', 'Session'), { id: { in: ['session-1'] } }] }
       });
     });
@@ -786,6 +807,7 @@ describe('InstrumentRecordsService', () => {
           groupId: '123',
           id: 'record-1',
           instrumentId: 'instrument-1',
+          seriesInstrumentId: null,
           session: {
             date: '2023-01-01',
             id: 'session-1',
@@ -915,6 +937,47 @@ describe('InstrumentRecordsService', () => {
       expect(matchStage.$match.$expr).toStrictEqual({ $eq: ['$groupId', { $toObjectId: 'group-1' }] });
     });
 
+    // A series carries no language-independent name, so the worker is handed the titles resolved
+    // here rather than the ids — an export naming only ids says nothing about what collected a row.
+    it('should resolve the title of every series the records reference before handing them to the worker', async () => {
+      const record = {
+        computedMeasures: { score: 85 },
+        date: '2023-01-01',
+        groupId: 'group-1',
+        id: 'record-1',
+        instrumentId: 'instrument-1',
+        seriesInstrumentId: 'series-1',
+        session: { date: '2023-01-01', id: 'session-1', type: 'IN_PERSON' as const, user: null },
+        subject: { age: 20, groupIds: ['group-1'], id: 'subject-1', sex: 'MALE' }
+      } satisfies RecordType;
+      instrumentRecordModel.aggregateRaw.mockResolvedValueOnce([record]);
+      instrumentsService.findById
+        .mockResolvedValueOnce({ id: 'instrument-1', internal: { edition: 1, name: 'X' } } as any)
+        .mockResolvedValueOnce({
+          details: { title: 'Happiness Series' },
+          id: 'series-1',
+          kind: 'SERIES',
+          language: 'en'
+        } as any);
+      const worker = useFakeWorker();
+
+      const result = instrumentRecordsService.exportRecords(
+        {},
+        { ability: createAppAbility([{ action: 'manage', subject: 'all' }]) }
+      );
+      await vi.waitFor(() => expect(worker.postMessage).toHaveBeenCalledOnce());
+
+      expect(worker.postMessage).toHaveBeenCalledWith({
+        data: {
+          instruments: [{ edition: 1, id: 'instrument-1', name: 'X' }],
+          seriesNames: { 'series-1': 'Happiness Series' }
+        },
+        type: 'INIT'
+      });
+      worker.emit('error', new Error('settle'));
+      await expect(result).rejects.toThrow('settle');
+    });
+
     describe('when the worker fails', () => {
       const record = {
         computedMeasures: { score: 85 },
@@ -922,6 +985,7 @@ describe('InstrumentRecordsService', () => {
         groupId: 'group-1',
         id: 'record-1',
         instrumentId: 'instrument-1',
+        seriesInstrumentId: null,
         session: { date: '2023-01-01', id: 'session-1', type: 'IN_PERSON' as const, user: null },
         subject: { age: 20, groupIds: ['group-1'], id: 'subject-1', sex: 'MALE' }
       } satisfies RecordType;
@@ -1205,13 +1269,20 @@ describe('InstrumentRecordsService', () => {
       const [{ pipeline }] = instrumentRecordModel.aggregateRaw.mock.lastCall as [{ pipeline: any[] }];
       expect(pipeline.find((stage) => stage.$group).$group._id).toStrictEqual({
         groupId: { $ifNull: ['$groupId', null] },
+        key: { $ifNull: ['$subjectId', null] },
         subjectId: { $ifNull: ['$subjectId', null] }
       });
     });
 
     it('should key the summary on the subject, so the subject hub can read a row per subject', async () => {
       instrumentRecordModel.aggregateRaw.mockResolvedValueOnce([
-        { groupId: 'group-1', lastCollectedAt: '2025-02-02T00:00:00.000Z', recordCount: 4, subjectId: 'subject-1' }
+        {
+          groupId: 'group-1',
+          key: 'subject-1',
+          lastCollectedAt: '2025-02-02T00:00:00.000Z',
+          recordCount: 4,
+          subjectId: 'subject-1'
+        }
       ]);
 
       const [summary] = await instrumentRecordsService.summarizeBySubject({}, { ability: ADMIN });
@@ -1228,8 +1299,8 @@ describe('InstrumentRecordsService', () => {
         { action: 'read', conditions: { groupId: 'group-1' }, subject: 'InstrumentRecord' }
       ]);
       instrumentRecordModel.aggregateRaw.mockResolvedValueOnce([
-        { groupId: 'group-1', lastCollectedAt: null, recordCount: 2, subjectId: 'subject-1' },
-        { groupId: 'group-2', lastCollectedAt: null, recordCount: 7, subjectId: 'subject-1' }
+        { groupId: 'group-1', key: 'subject-1', lastCollectedAt: null, recordCount: 2, subjectId: 'subject-1' },
+        { groupId: 'group-2', key: 'subject-1', lastCollectedAt: null, recordCount: 7, subjectId: 'subject-1' }
       ]);
 
       const [summary] = await instrumentRecordsService.summarizeBySubject({}, { ability });
@@ -1241,8 +1312,20 @@ describe('InstrumentRecordsService', () => {
     // is the later of the two rather than whichever arrived last.
     it('should fold a subject appearing in several readable groups into one row', async () => {
       instrumentRecordModel.aggregateRaw.mockResolvedValueOnce([
-        { groupId: 'group-1', lastCollectedAt: '2025-01-01T00:00:00.000Z', recordCount: 2, subjectId: 'subject-1' },
-        { groupId: 'group-2', lastCollectedAt: '2025-03-03T00:00:00.000Z', recordCount: 3, subjectId: 'subject-1' }
+        {
+          groupId: 'group-1',
+          key: 'subject-1',
+          lastCollectedAt: '2025-01-01T00:00:00.000Z',
+          recordCount: 2,
+          subjectId: 'subject-1'
+        },
+        {
+          groupId: 'group-2',
+          key: 'subject-1',
+          lastCollectedAt: '2025-03-03T00:00:00.000Z',
+          recordCount: 3,
+          subjectId: 'subject-1'
+        }
       ]);
 
       const summaries = await instrumentRecordsService.summarizeBySubject({}, { ability: ADMIN });
@@ -1258,10 +1341,98 @@ describe('InstrumentRecordsService', () => {
 
     it('should skip a row whose subject could not be resolved, rather than keying a summary on null', async () => {
       instrumentRecordModel.aggregateRaw.mockResolvedValueOnce([
-        { groupId: 'group-1', lastCollectedAt: null, recordCount: 2, subjectId: null }
+        { groupId: 'group-1', key: null, lastCollectedAt: null, recordCount: 2, subjectId: null }
       ]);
 
       expect(await instrumentRecordsService.summarizeBySubject({}, { ability: ADMIN })).toStrictEqual([]);
     });
   });
+
+  describe('summarizeByInstrument', () => {
+    const ADMIN = createAppAbility([{ action: 'manage', subject: 'all' }]);
+
+    it('should group by the instrument, so the hub can read a row per instrument', async () => {
+      instrumentRecordModel.aggregateRaw.mockResolvedValueOnce([]);
+
+      await instrumentRecordsService.summarizeByInstrument({}, { ability: ADMIN });
+
+      const [{ pipeline }] = instrumentRecordModel.aggregateRaw.mock.lastCall as [{ pipeline: any[] }];
+      expect(pipeline.find((stage) => stage.$group).$group._id.key).toStrictEqual({
+        $ifNull: ['$instrumentId', null]
+      });
+    });
+
+    // The count is of subjects, not records, which is the whole reason the pipeline groups by subject
+    // and folds here: one subject completing an instrument four times is still one subject.
+    it('should count a subject once however many records they contributed', async () => {
+      instrumentRecordModel.aggregateRaw.mockResolvedValueOnce([
+        { groupId: 'group-1', key: 'instrument-1', lastCollectedAt: null, recordCount: 4, subjectId: 'subject-1' },
+        { groupId: 'group-1', key: 'instrument-1', lastCollectedAt: null, recordCount: 1, subjectId: 'subject-2' }
+      ]);
+
+      const [summary] = await instrumentRecordsService.summarizeByInstrument({}, { ability: ADMIN });
+
+      expect(summary).toStrictEqual({
+        instrumentId: 'instrument-1',
+        lastCollectedAt: null,
+        recordCount: 5,
+        subjectCount: 2
+      });
+    });
+
+    // Summing per-group counts would report this subject twice. Unioning the ids is what makes the
+    // count exact for a caller who can read both groups.
+    it('should count a subject shared by two readable groups once', async () => {
+      instrumentRecordModel.aggregateRaw.mockResolvedValueOnce([
+        { groupId: 'group-1', key: 'instrument-1', lastCollectedAt: null, recordCount: 1, subjectId: 'subject-1' },
+        { groupId: 'group-2', key: 'instrument-1', lastCollectedAt: null, recordCount: 1, subjectId: 'subject-1' }
+      ]);
+
+      const [summary] = await instrumentRecordsService.summarizeByInstrument({}, { ability: ADMIN });
+
+      expect(summary).toMatchObject({ recordCount: 2, subjectCount: 1 });
+    });
+
+    // A record written before subjects were required carries no subject, and counting `null` as one
+    // would report a subject nobody can open.
+    it('should count no subject for a row naming none, while still counting its records', async () => {
+      instrumentRecordModel.aggregateRaw.mockResolvedValueOnce([
+        { groupId: 'group-1', key: 'instrument-1', lastCollectedAt: null, recordCount: 2, subjectId: null }
+      ]);
+
+      const [summary] = await instrumentRecordsService.summarizeByInstrument({}, { ability: ADMIN });
+
+      expect(summary).toMatchObject({ recordCount: 2, subjectCount: 0 });
+    });
+  });
+
+  describe('summarizeBySeries', () => {
+    const ADMIN = createAppAbility([{ action: 'manage', subject: 'all' }]);
+
+    it('should group by the series instrument, so a series row spans the instruments it composes', async () => {
+      instrumentRecordModel.aggregateRaw.mockResolvedValueOnce([]);
+
+      await instrumentRecordsService.summarizeBySeries({}, { ability: ADMIN });
+
+      const [{ pipeline }] = instrumentRecordModel.aggregateRaw.mock.lastCall as [{ pipeline: any[] }];
+      expect(pipeline.find((stage) => stage.$group).$group._id.key).toStrictEqual({
+        $ifNull: ['$seriesInstrumentId', null]
+      });
+    });
+
+    // Grouping by series buckets every individually collected record under a null key. Those are not
+    // a series and must not become a row, or the hub would show one labelled nothing.
+    it('should drop the null bucket holding every record collected outside a series', async () => {
+      instrumentRecordModel.aggregateRaw.mockResolvedValueOnce([
+        { groupId: 'group-1', key: null, lastCollectedAt: null, recordCount: 90, subjectId: 'subject-1' },
+        { groupId: 'group-1', key: 'series-1', lastCollectedAt: null, recordCount: 2, subjectId: 'subject-1' }
+      ]);
+
+      const summaries = await instrumentRecordsService.summarizeBySeries({}, { ability: ADMIN });
+
+      expect(summaries).toStrictEqual([
+        { instrumentId: 'series-1', lastCollectedAt: null, recordCount: 2, subjectCount: 1 }
+      ]);
+    });
+  });
 });
diff --git a/apps/api/src/instrument-records/export-worker.js b/apps/api/src/instrument-records/export-worker.js
index 0bf932a8c..a542e5793 100644
--- a/apps/api/src/instrument-records/export-worker.js
+++ b/apps/api/src/instrument-records/export-worker.js
@@ -50,12 +50,19 @@ function expandData(listEntry) {
  */
 let initData;
 
+/**
+ * Internal cache mapping a series instrument id to its title.
+ * @type {{ [id: string]: string }}
+ */
+let seriesNames = {};
+
 /**
  * Initializes the worker with instrument metadata.
- * * @param {Array<{id: string, edition: number, name: string}>} data - The initialization payload.
+ * @param {import('./thread-types').InitPayload} data - The initialization payload.
  */
 function handleInit(data) {
-  initData = new Map(data.map((instrument) => [instrument.id, instrument]));
+  initData = new Map(data.instruments.map((instrument) => [instrument.id, instrument]));
+  seriesNames = data.seriesNames;
   parentPort?.postMessage({ success: true });
 }
 
@@ -87,6 +94,9 @@ function handleChunkComplete(_data) {
 
     const rows = [];
 
+    const seriesId = record.seriesInstrumentId ?? null;
+    const seriesName = seriesId ? (seriesNames[seriesId] ?? null) : null;
+
     for (const [measureKey, measureValue] of Object.entries(record.computedMeasures)) {
       if (measureValue == null) continue;
 
@@ -96,6 +106,8 @@ function handleChunkComplete(_data) {
           instrumentEdition: instrument.edition,
           instrumentName: instrument.name,
           measure: measureKey,
+          seriesId,
+          seriesName,
           sessionDate: record.session.date,
           sessionId: record.session.id,
           sessionType: record.session.type,
@@ -118,6 +130,8 @@ function handleChunkComplete(_data) {
           instrumentEdition: instrument.edition,
           instrumentName: instrument.name,
           measure: `${measureKey} - ${entry.measure}`,
+          seriesId,
+          seriesName,
           sessionDate: record.session.date,
           sessionId: record.session.id,
           sessionType: record.session.type,
diff --git a/apps/api/src/instrument-records/instrument-records.controller.ts b/apps/api/src/instrument-records/instrument-records.controller.ts
index e6ff8bbc3..4fcb2449f 100644
--- a/apps/api/src/instrument-records/instrument-records.controller.ts
+++ b/apps/api/src/instrument-records/instrument-records.controller.ts
@@ -62,9 +62,13 @@ export class InstrumentRecordsController {
     minDate?: Date,
     @Query('groupId') groupId?: string,
     @Query('instrumentId') instrumentId?: string,
+    @Query('seriesInstrumentId') seriesInstrumentId?: string,
     @Query('subjectId') subjectId?: string
   ) {
-    return this.instrumentRecordsService.find({ groupId, instrumentId, kind, minDate, subjectId }, { ability });
+    return this.instrumentRecordsService.find(
+      { groupId, instrumentId, kind, minDate, seriesInstrumentId, subjectId },
+      { ability }
+    );
   }
 
   @ApiOperation({ summary: 'Delete Record' })
@@ -94,6 +98,20 @@ export class InstrumentRecordsController {
     return this.instrumentRecordsService.linearModel({ groupId, instrumentId }, { ability });
   }
 
+  @ApiOperation({ description: 'Per-instrument record and subject counts', summary: 'Summarize Records By Instrument' })
+  @Get('summary/by-instrument')
+  @RouteAccess({ action: 'read', subject: 'InstrumentRecord' })
+  summarizeByInstrument(@CurrentUser('ability') ability: AppAbility, @Query('groupId') groupId?: string) {
+    return this.instrumentRecordsService.summarizeByInstrument({ groupId }, { ability });
+  }
+
+  @ApiOperation({ description: 'Per-series record counts', summary: 'Summarize Records By Series' })
+  @Get('summary/by-series')
+  @RouteAccess({ action: 'read', subject: 'InstrumentRecord' })
+  summarizeBySeries(@CurrentUser('ability') ability: AppAbility, @Query('groupId') groupId?: string) {
+    return this.instrumentRecordsService.summarizeBySeries({ groupId }, { ability });
+  }
+
   @ApiOperation({ description: 'Per-subject record counts', summary: 'Summarize Records By Subject' })
   @Get('summary/by-subject')
   @RouteAccess({ action: 'read', subject: 'InstrumentRecord' })
diff --git a/apps/api/src/instrument-records/instrument-records.service.ts b/apps/api/src/instrument-records/instrument-records.service.ts
index 877a17474..51727b735 100644
--- a/apps/api/src/instrument-records/instrument-records.service.ts
+++ b/apps/api/src/instrument-records/instrument-records.service.ts
@@ -14,12 +14,14 @@ import {
   ServiceUnavailableException,
   UnprocessableEntityException
 } from '@nestjs/common';
+import { translateInstrument } from '@opendatacapture/instrument-utils';
 import type { Json, ScalarInstrument } from '@opendatacapture/runtime-core';
 import type {
   CreateInstrumentRecordData,
   InstrumentRecord,
   InstrumentRecordQueryParams,
   InstrumentRecordsExport,
+  InstrumentRecordSummary,
   LinearRegressionResults,
   SubjectRecordSummary,
   UploadInstrumentRecordsData
@@ -41,7 +43,29 @@ import { UsersService } from '@/users/users.service';
 
 import { InstrumentMeasuresService } from './instrument-measures.service';
 
-import type { BeginChunkProcessingMessage, InitData, InitMessage, RecordType, WorkerMessage } from './thread-types';
+import type {
+  BeginChunkProcessingMessage,
+  InitInstruments,
+  InitMessage,
+  RecordType,
+  WorkerMessage
+} from './thread-types';
+
+type RecordSummaryFold = Map<string, { lastCollectedAt: Date | null; recordCount: number; subjectIds: Set<string> }>;
+
+/**
+ * Projects a fold keyed by instrument id into the wire shape, replacing the subject id set with its
+ * size. Shared by the per-instrument and per-series summaries, which differ only in what they keyed
+ * the fold on.
+ */
+function toInstrumentSummaries(summaries: RecordSummaryFold): InstrumentRecordSummary[] {
+  return Array.from(summaries, ([instrumentId, summary]) => ({
+    instrumentId,
+    lastCollectedAt: summary.lastCollectedAt,
+    recordCount: summary.recordCount,
+    subjectCount: summary.subjectIds.size
+  }));
+}
 
 @Injectable()
 export class InstrumentRecordsService {
@@ -201,6 +225,8 @@ export class InstrumentRecordsService {
 
     const instruments = new Map(instrumentsArray.map((instrument) => [instrument.id, instrument]));
 
+    const seriesNames = await this.resolveSeriesNames(records);
+
     const numWorkers = Math.min(cpus().length, Math.ceil(records.length / 100)); // Use up to CPU count, chunk size 100
     const chunkSize = Math.ceil(records.length / numWorkers);
     const chunks = [];
@@ -209,7 +235,7 @@ export class InstrumentRecordsService {
       chunks.push(records.slice(i, i + chunkSize));
     }
 
-    const availableInstrumentArray: InitData = instruments
+    const availableInstrumentArray: InitInstruments = instruments
       .values()
       .toArray()
       .map((item) => {
@@ -223,7 +249,10 @@ export class InstrumentRecordsService {
     const workerPromises = chunks.map((chunk) => {
       return new Promise<InstrumentRecordsExport>((resolve, reject) => {
         const worker = new Worker(join(import.meta.dirname, 'export-worker.js'));
-        worker.postMessage({ data: availableInstrumentArray, type: 'INIT' } satisfies InitMessage);
+        worker.postMessage({
+          data: { instruments: availableInstrumentArray, seriesNames },
+          type: 'INIT'
+        } satisfies InitMessage);
 
         // The worker only ever acknowledges INIT with `{ success: true }`; a failure inside it arrives
         // as an `error` event instead, handled below.
@@ -252,7 +281,7 @@ export class InstrumentRecordsService {
   }
 
   async find(
-    { groupId, instrumentId, kind, minDate, subjectId }: InstrumentRecordQueryParams,
+    { groupId, instrumentId, kind, minDate, seriesInstrumentId, subjectId }: InstrumentRecordQueryParams,
     { ability }: EntityOperationOptions = {}
   ): Promise<InstrumentRecord[]> {
     if (groupId) {
@@ -261,6 +290,14 @@ export class InstrumentRecordsService {
     if (instrumentId) {
       await this.instrumentsService.findById(instrumentId);
     }
+    if (seriesInstrumentId) {
+      const series = await this.instrumentsService.findById(seriesInstrumentId);
+      if (series.kind !== 'SERIES') {
+        throw new UnprocessableEntityException(
+          `Instrument '${seriesInstrumentId}' is not a series instrument, so it orchestrates no records`
+        );
+      }
+    }
 
     const instrumentKindIds = await this.instrumentsService
       .find({ kind })
@@ -276,6 +313,7 @@ export class InstrumentRecordsService {
           { groupId },
           { instrumentId },
           { instrumentId: { in: instrumentKindIds } },
+          { seriesInstrumentId },
           accessibleQuery(ability, 'read', 'InstrumentRecord'),
           { subjectId },
           // records created before the file instrument feature do not have the pending field at all,
@@ -285,14 +323,15 @@ export class InstrumentRecordsService {
       }
     });
 
-    // Only the per-subject view renders the username column. /dashboard fetches every record in the
-    // group and reads `instrumentId` alone, so labelling there would buy a second query with an `$in`
-    // as long as the group's record list for a field that is thrown away.
-    if (!subjectId) {
+    // The per-subject, per-instrument and per-series views render the collection method and username
+    // columns; /dashboard fetches every record in the group and reads `instrumentId` alone, so
+    // labelling there would buy a second query with an `$in` as long as the group's record list for
+    // fields it throws away. Any of these filters bounds the set enough to be worth joining.
+    if (!subjectId && !instrumentId && !seriesInstrumentId) {
       return records;
     }
 
-    return this.withSessionUsernames(records, ability);
+    return this.withSessionMetadata(records, ability);
   }
 
   async findById(id: string, { ability }: EntityOperationOptions = {}) {
@@ -354,82 +393,34 @@ export class InstrumentRecordsService {
   }
 
   /**
-   * Per-subject record counts and latest collection date, for the subject hub's listing.
+   * Per-instrument collection statistics for the instrument hub's listing.
    *
-   * Aggregation groups by group and subject rather than by subject alone, and the final fold happens
-   * here in JS, because the per-row `groupId` is what the ability check needs. The grouped set is
-   * bounded by subjects, not by records.
+   * See `summarizeRecords` for why the fold happens in JS rather than in the aggregation.
    */
-  async summarizeBySubject(
+  async summarizeByInstrument(
     { groupId }: { groupId?: string } = {},
     { ability }: Required<Pick<EntityOperationOptions, 'ability'>>
-  ): Promise<SubjectRecordSummary[]> {
-    if (groupId) {
-      await this.groupsService.findById(groupId);
-    }
-
-    const pipeline = [
-      {
-        $match: {
-          // records created before the file instrument feature do not have the field at all
-          $or: [{ pending: { $exists: false } }, { pending: null }, { pending: false }],
-          ...(groupId ? { $expr: { $eq: ['$groupId', { $toObjectId: groupId }] } } : {})
-        }
-      },
-      {
-        // `$ifNull` is load-bearing, not defensive. A grouping expression that resolves to nothing —
-        // `groupId` on a record belonging to no group — is omitted from `_id` entirely rather than
-        // stored as null, and `$project` then omits the field from the row too. Normalising here is
-        // what lets the fold below treat the shape as fixed instead of remembering a key can simply
-        // be missing.
-        $group: {
-          _id: {
-            groupId: { $ifNull: ['$groupId', null] },
-            subjectId: { $ifNull: ['$subjectId', null] }
-          },
-          lastCollectedAt: { $max: '$date' },
-          recordCount: { $sum: 1 }
-        }
-      },
-      {
-        $project: {
-          _id: 0,
-          groupId: { $toString: '$_id.groupId' },
-          lastCollectedAt: { $dateToString: { date: '$lastCollectedAt' } },
-          recordCount: 1,
-          subjectId: '$_id.subjectId'
-        }
-      }
-    ];
-
-    const rows = (await this.instrumentRecordModel.aggregateRaw({ pipeline })) as unknown as {
-      groupId: null | string;
-      lastCollectedAt: null | string;
-      recordCount: number;
-      subjectId: null | string;
-    }[];
+  ): Promise<InstrumentRecordSummary[]> {
+    return toInstrumentSummaries(await this.summarizeRecords('instrumentId', groupId, ability));
+  }
 
-    const summaries = new Map<string, { lastCollectedAt: Date | null; recordCount: number }>();
-    for (const row of rows) {
-      // Raw rows carry no model name, so CASL would resolve them as `Object` and match only `manage all`
-      if (!ability.can('read', forcedAppSubject('InstrumentRecord', { groupId: row.groupId }))) {
-        continue;
-      }
-      if (row.subjectId === null) {
-        continue;
-      }
-      let summary = summaries.get(row.subjectId);
-      if (!summary) {
-        summary = { lastCollectedAt: null, recordCount: 0 };
-        summaries.set(row.subjectId, summary);
-      }
-      summary.recordCount += row.recordCount;
-      const lastCollectedAt = row.lastCollectedAt ? new Date(row.lastCollectedAt) : null;
-      if (lastCollectedAt && (!summary.lastCollectedAt || lastCollectedAt > summary.lastCollectedAt)) {
-        summary.lastCollectedAt = lastCollectedAt;
-      }
-    }
+  /**
+   * Per-series collection statistics: everything a series orchestrated, across the scalar
+   * instruments it composes. This is what makes a series row in the instrument hub worth opening.
+   */
+  async summarizeBySeries(
+    { groupId }: { groupId?: string } = {},
+    { ability }: Required<Pick<EntityOperationOptions, 'ability'>>
+  ): Promise<InstrumentRecordSummary[]> {
+    return toInstrumentSummaries(await this.summarizeRecords('seriesInstrumentId', groupId, ability));
+  }
 
+  /** Per-subject collection statistics for the subject hub's listing. */
+  async summarizeBySubject(
+    { groupId }: { groupId?: string } = {},
+    { ability }: Required<Pick<EntityOperationOptions, 'ability'>>
+  ): Promise<SubjectRecordSummary[]> {
+    const summaries = await this.summarizeRecords('subjectId', groupId, ability);
     return Array.from(summaries, ([subjectId, summary]) => ({
       lastCollectedAt: summary.lastCollectedAt,
       recordCount: summary.recordCount,
@@ -643,13 +634,15 @@ export class InstrumentRecordsService {
               format: '%Y-%m-%d'
             }
           },
-          groupId: {
-            $toString: '$groupId'
-          },
+          // `$ifNull` for the same reason as in `summarizeRecords`: `$toString` of a missing field is
+          // itself missing, so a record belonging to no group would drop `groupId` from the row
+          // entirely and arrive as undefined behind a type that says it is a string.
+          groupId: { $toString: { $ifNull: ['$groupId', null] } },
           id: {
             $toString: '$_id'
           },
           instrumentId: 1,
+          seriesInstrumentId: { $ifNull: ['$seriesInstrumentId', null] },
           session: {
             date: {
               $dateToString: {
@@ -696,20 +689,136 @@ export class InstrumentRecordsService {
       .map((record) => ({ ...record }));
   }
 
+  /**
+   * Map every series instrument referenced by these records to its title.
+   *
+   * A series instrument has no `internal.name`, so unlike the scalar instruments beside it in the
+   * export there is no language-independent identifier to use — the title is translated here, to
+   * `en`, because a background worker has no request language. The stable identifier an analysis
+   * should key on is the accompanying `seriesId`.
+   */
+  private async resolveSeriesNames(records: RecordType[]): Promise<{ [id: string]: string }> {
+    const seriesIds = new Set(
+      records.flatMap((record) => (record.seriesInstrumentId ? [record.seriesInstrumentId] : []))
+    );
+    const entries = await Promise.all(
+      seriesIds.values().map(async (id) => {
+        const instrument = await this.instrumentsService.findById(id);
+        return [id, translateInstrument(instrument, 'en').details.title] as const;
+      })
+    );
+    return Object.fromEntries(entries);
+  }
+
   private serializeData(data: unknown) {
     return JSON.parse(JSON.stringify(data, replacer)) as unknown;
   }
 
   /**
-   * Label each record with the user who conducted its session, so clients can show that column
-   * without fetching every session in the group.
+   * Record counts, distinct subjects and the latest collection date, keyed by `by`.
+   *
+   * Aggregation groups by group, key and subject rather than by the key alone, and the final fold
+   * happens here in JS, for two reasons: the per-row `groupId` is what the ability check needs, and
+   * unioning subject ids across groups is what makes a distinct subject count exact for an unscoped
+   * caller instead of a sum that counts a shared subject twice. The grouped set is bounded by
+   * subjects × keys, not by records.
+   */
+  private async summarizeRecords(
+    by: 'instrumentId' | 'seriesInstrumentId' | 'subjectId',
+    groupId: string | undefined,
+    ability: AppAbility
+  ): Promise<RecordSummaryFold> {
+    if (groupId) {
+      await this.groupsService.findById(groupId);
+    }
+
+    const pipeline = [
+      {
+        $match: {
+          // records created before the file instrument feature do not have the field at all
+          $or: [{ pending: { $exists: false } }, { pending: null }, { pending: false }],
+          ...(groupId ? { $expr: { $eq: ['$groupId', { $toObjectId: groupId }] } } : {})
+        }
+      },
+      {
+        // `$ifNull` is load-bearing, not defensive. A grouping expression that resolves to nothing —
+        // `seriesInstrumentId` on a record collected outside any series, `groupId` on one belonging
+        // to no group — is omitted from `_id` entirely rather than stored as null, and `$project`
+        // then omits the field from the row too. Normalising here is what lets every consumer below
+        // treat the shape as fixed instead of remembering that a key can simply be missing.
+        $group: {
+          _id: {
+            groupId: { $ifNull: ['$groupId', null] },
+            key: { $ifNull: [`$${by}`, null] },
+            subjectId: { $ifNull: ['$subjectId', null] }
+          },
+          lastCollectedAt: { $max: '$date' },
+          recordCount: { $sum: 1 }
+        }
+      },
+      {
+        $project: {
+          _id: 0,
+          groupId: { $toString: '$_id.groupId' },
+          key: '$_id.key',
+          lastCollectedAt: { $dateToString: { date: '$lastCollectedAt' } },
+          recordCount: 1,
+          subjectId: '$_id.subjectId'
+        }
+      }
+    ];
+
+    /**
+     * Every field is present because the pipeline normalises each grouping key with `$ifNull`; the
+     * nullable ones are genuinely null rather than absent. Keep that guarantee if the pipeline
+     * changes, or the optionality has to come back here and at every use below.
+     */
+    const rows = (await this.instrumentRecordModel.aggregateRaw({ pipeline })) as unknown as {
+      groupId: null | string;
+      key: null | string;
+      lastCollectedAt: null | string;
+      recordCount: number;
+      subjectId: null | string;
+    }[];
+
+    const summaries: RecordSummaryFold = new Map();
+    for (const row of rows) {
+      // Raw rows carry no model name, so CASL would resolve them as `Object` and match only `manage all`
+      if (!ability.can('read', forcedAppSubject('InstrumentRecord', { groupId: row.groupId }))) {
+        continue;
+      }
+      // Grouping by series buckets every record collected outside one under a null key. Those are
+      // not a series and have no row to belong to.
+      if (row.key === null) {
+        continue;
+      }
+      let summary = summaries.get(row.key);
+      if (!summary) {
+        summary = { lastCollectedAt: null, recordCount: 0, subjectIds: new Set() };
+        summaries.set(row.key, summary);
+      }
+      summary.recordCount += row.recordCount;
+      if (row.subjectId !== null) {
+        summary.subjectIds.add(row.subjectId);
+      }
+      const lastCollectedAt = row.lastCollectedAt ? new Date(row.lastCollectedAt) : null;
+      if (lastCollectedAt && (!summary.lastCollectedAt || lastCollectedAt > summary.lastCollectedAt)) {
+        summary.lastCollectedAt = lastCollectedAt;
+      }
+    }
+    return summaries;
+  }
+
+  /**
+   * Label each record with its session's data collection method and the user who conducted it, so
+   * clients can show those columns without fetching every session in the group.
    *
    * Deliberately a second scoped query rather than an `include` on the relation: `session` is
    * declared required, so Prisma aborts the whole query with "Inconsistent query result" if any one
    * record's session has since been deleted. Looking the sessions up by id degrades to a missing
-   * username for that record instead of a failed request.
+   * type and username for that record instead of a failed request.
    */
-  private async withSessionUsernames(
+  private async withSessionMetadata(
     records: PrismaInstrumentRecord[],
     ability?: AppAbility
   ): Promise<InstrumentRecord[]> {
@@ -717,7 +826,7 @@ export class InstrumentRecordsService {
       return [];
     }
     const sessions = await this.sessionModel.findMany({
-      select: { id: true, user: { select: { username: true } } },
+      select: { id: true, type: true, user: { select: { username: true } } },
       where: {
         AND: [
           // Depends on the caller holding some `read Session` rule: given none at all, this throws a
@@ -728,10 +837,13 @@ export class InstrumentRecordsService {
         ]
       }
     });
-    const usernameBySessionId = new Map(sessions.map((session) => [session.id, session.user?.username ?? null]));
-    return records.map((record) => ({
-      ...record,
-      session: { user: { username: usernameBySessionId.get(record.sessionId) ?? null } }
-    }));
+    const sessionById = new Map(sessions.map((session) => [session.id, session]));
+    return records.map((record) => {
+      const session = sessionById.get(record.sessionId);
+      return {
+        ...record,
+        session: { type: session?.type ?? null, user: { username: session?.user?.username ?? null } }
+      };
+    });
   }
 }
diff --git a/apps/api/src/instrument-records/thread-types.ts b/apps/api/src/instrument-records/thread-types.ts
index d4ddfb90e..c5f7b73ae 100644
--- a/apps/api/src/instrument-records/thread-types.ts
+++ b/apps/api/src/instrument-records/thread-types.ts
@@ -3,9 +3,12 @@ import type { InstrumentRecordsExport } from '@opendatacapture/schemas/instrumen
 export type RecordType = {
   computedMeasures: null | { [key: string]: unknown };
   date: string;
-  groupId: string;
+  /** Null for a record belonging to no group; the pipeline normalises a missing field to null. */
+  groupId: null | string;
   id: string;
   instrumentId: string;
+  /** Null for a record collected outside any series */
+  seriesInstrumentId: null | string;
   session: {
     date: string;
     id: string;
@@ -22,14 +25,20 @@ export type RecordType = {
   };
 };
 
-export type InitData = {
+export type InitInstruments = {
   edition: number;
   id: string;
   name: string;
 }[];
 
+export type InitPayload = {
+  instruments: InitInstruments;
+  /** Series instrument id to its title, since a series carries no language-independent name */
+  seriesNames: { [id: string]: string };
+};
+
 export type InitMessage = {
-  data: InitData;
+  data: InitPayload;
   type: 'INIT';
 };
 
diff --git a/apps/web/package.json b/apps/web/package.json
index c87f65aa3..a4e0950dc 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -37,7 +37,6 @@
     "@tanstack/react-router": "^1.170.40",
     "@tanstack/react-router-devtools": "^1.167.2",
     "axios": "catalog:",
-    "html2canvas": "^1.4.1",
     "immer": "^11.1.18",
     "jwt-decode": "^4.0.0",
     "lodash-es": "workspace:lodash-es__4.x@*",
diff --git a/apps/web/src/components/CollectedFilterMenu/CollectedFilterMenu.tsx b/apps/web/src/components/CollectedFilterMenu/CollectedFilterMenu.tsx
new file mode 100644
index 000000000..6e914f9cb
--- /dev/null
+++ b/apps/web/src/components/CollectedFilterMenu/CollectedFilterMenu.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+
+import { toBasicISOString } from '@douglasneuroinformatics/libjs';
+import { useTranslation } from '@douglasneuroinformatics/libui/hooks';
+
+import { selectCollectedPreset } from '@/utils/collected-filter';
+import type { CollectedFilter, CollectedPreset } from '@/utils/collected-filter';
+
+type CollectedFilterMenuProps = {
+  onChange: (next: CollectedFilter) => void;
+  /** Prefixed onto each control's `data-testid`, so two tables on different pages stay addressable */
+  testIdPrefix: string;
+  value: CollectedFilter;
+};
+
+/**
+ * The collection-date window control, shared by the subject and instrument listings so both narrow
+ * by date the same way.
+ */
+export const CollectedFilterMenu = ({ onChange, testIdPrefix, value }: CollectedFilterMenuProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <React.Fragment>
+      <div className="relative flex items-center justify-between gap-1 rounded-xs px-2 pt-1.5 pb-1 text-sm transition-colors">
+        <span className="pb-1">{t({ en: 'Collected:', es: 'Recopilado:', fr: 'Collecté :' })}</span>
+        {/* A native select renders with the user agent's own white background, which reads as a
+            bright block in dark mode — so it carries the popover surface tokens explicitly, and
+            the options do too, since those are painted separately. */}
+        <select
+          className="bg-popover text-foreground [&>option]:bg-popover [&>option]:text-foreground pointer-events-auto rounded-sm border-b pb-0.5"
+          data-testid={`${testIdPrefix}-collected-preset`}
+          value={value.preset}
+          onChange={(event) => onChange(selectCollectedPreset(event.target.value as CollectedPreset, value))}
+        >
+          <option value="all">{t({ en: 'Any time', es: 'Cualquier fecha', fr: 'Toute période' })}</option>
+          <option value="pastWeek">{t({ en: 'This week', es: 'Esta semana', fr: 'Cette semaine' })}</option>
+          <option value="pastMonth">{t({ en: 'This month', es: 'Este mes', fr: 'Ce mois-ci' })}</option>
+          <option value="pastThreeMonths">{t({ en: '3 months', es: '3 meses', fr: '3 mois' })}</option>
+          <option value="pastSixMonths">{t({ en: '6 months', es: '6 meses', fr: '6 mois' })}</option>
+          <option value="pastYear">{t({ en: 'This year', es: 'Este año', fr: 'Cette année' })}</option>
+          <option value="pastTwoYears">{t({ en: '2 years', es: '2 años', fr: '2 ans' })}</option>
+          <option value="custom">{t({ en: 'Custom', es: 'Personalizado', fr: 'Personnalisé' })}</option>
+        </select>
+      </div>
+      {value.preset === 'custom' && (
+        <React.Fragment>
+          <div className="relative flex items-center justify-between gap-1 rounded-xs px-2 pt-1.5 pb-1 text-sm transition-colors">
+            <span className="pb-1">{t({ en: 'Min:', es: 'Mín.:', fr: 'Min :' })}</span>
+            <input
+              className="bg-popover text-foreground pointer-events-auto rounded-sm border-b pb-0.5"
+              data-testid={`${testIdPrefix}-collected-min`}
+              type="date"
+              value={value.min ? toBasicISOString(value.min) : ''}
+              onChange={(event) => onChange({ ...value, min: event.target.valueAsDate })}
+            />
+          </div>
+          <div className="relative flex items-center justify-between gap-1 rounded-xs px-2 pt-1.5 pb-1 text-sm transition-colors">
+            <span className="pb-1">{t({ en: 'Max:', es: 'Máx.:', fr: 'Max :' })}</span>
+            <input
+              className="bg-popover text-foreground pointer-events-auto rounded-sm border-b pb-0.5"
+              data-testid={`${testIdPrefix}-collected-max`}
+              type="date"
+              value={value.max ? toBasicISOString(value.max) : ''}
+              onChange={(event) => onChange({ ...value, max: event.target.valueAsDate })}
+            />
+          </div>
+        </React.Fragment>
+      )}
+    </React.Fragment>
+  );
+};
diff --git a/apps/web/src/components/CollectedFilterMenu/index.ts b/apps/web/src/components/CollectedFilterMenu/index.ts
new file mode 100644
index 000000000..3924ae438
--- /dev/null
+++ b/apps/web/src/components/CollectedFilterMenu/index.ts
@@ -0,0 +1 @@
+export * from './CollectedFilterMenu';
diff --git a/apps/web/src/components/InstrumentTable/InstrumentTable.tsx b/apps/web/src/components/InstrumentTable/InstrumentTable.tsx
new file mode 100644
index 000000000..14f80e88e
--- /dev/null
+++ b/apps/web/src/components/InstrumentTable/InstrumentTable.tsx
@@ -0,0 +1,444 @@
+import React, { useMemo, useState } from 'react';
+
+import { toBasicISOString } from '@douglasneuroinformatics/libjs';
+import { Button, DataTable, DropdownMenu } from '@douglasneuroinformatics/libui/components';
+import type { TanstackTable } from '@douglasneuroinformatics/libui/components';
+import { useDownload, useNotificationsStore, useTheme, useTranslation } from '@douglasneuroinformatics/libui/hooks';
+import type { InstrumentKind } from '@opendatacapture/runtime-core';
+import { ChevronDownIcon } from 'lucide-react';
+import { unparse } from 'papaparse';
+
+import { CollectedFilterMenu } from '@/components/CollectedFilterMenu';
+import { ColorTagCell } from '@/components/ColorTagCell';
+import { InstrumentPreviewDialog } from '@/components/InstrumentPreviewDialog';
+import type { InstrumentPreviewItem } from '@/components/InstrumentPreviewDialog';
+import { SortableHeader } from '@/components/SortableHeader';
+import { TruncatedCell } from '@/components/TruncatedCell';
+import { useInstrumentInfoQuery } from '@/hooks/useInstrumentInfoQuery';
+import { useInstrumentKindLabels } from '@/hooks/useInstrumentKindLabels';
+import { resolveTheme } from '@/utils/chart-theme';
+import { DEFAULT_COLLECTED_FILTER, matchesCollectedFilter } from '@/utils/collected-filter';
+import type { CollectedFilter } from '@/utils/collected-filter';
+import { downloadSubjectTableExcel } from '@/utils/excel';
+import { getInstrumentKindColor } from '@/utils/tag-colors';
+
+/** Listed in the order a reader is most likely to meet them, not the enum's own order. */
+const INSTRUMENT_KINDS = ['FORM', 'INTERACTIVE', 'FILE', 'SERIES'] as const satisfies readonly InstrumentKind[];
+
+const LISTING_FORMATS = ['CSV', 'JSON', 'Excel'] as const;
+
+/**
+ * Both shapes of each format. Wide carries every instrument's measures as columns, so a record
+ * leaves blank whatever its own instrument does not measure; long carries one row per measured
+ * value instead, which stays narrow however many instruments the series spans.
+ */
+const RECORD_FORMATS = [
+  { label: 'TSV', option: 'TSV' },
+  { label: 'TSV Long', option: 'TSV Long' },
+  { label: 'JSON', option: 'JSON' },
+  { label: 'CSV', option: 'CSV' },
+  { label: 'CSV Long', option: 'CSV Long' },
+  { label: 'Excel', option: 'Excel' },
+  { label: 'Excel Long', option: 'Excel Long' }
+] as const satisfies readonly { label: string; option: RecordExportOption }[];
+
+/** The formats a record export offers, matching the set every other record table already offers */
+type RecordExportOption = 'CSV' | 'CSV Long' | 'Excel' | 'Excel Long' | 'JSON' | 'TSV' | 'TSV Long';
+
+type InstrumentRow = {
+  edition: null | number;
+  id: string;
+  kind: InstrumentKind;
+  lastCollectedAt: Date | null;
+  recordCount: number;
+  source: null | string;
+  subjectCount: number;
+  title: string;
+};
+
+type KindFilter = InstrumentKind[];
+
+/** A kind tag, matching the treatment the subject table gives sex. */
+const InstrumentKindCell = ({ kind }: { kind: InstrumentKind }) => {
+  const [theme] = useTheme();
+  const labels = useInstrumentKindLabels();
+  return (
+    <ColorTagCell
+      color={getInstrumentKindColor(kind, resolveTheme(theme))}
+      data-testid="instrument-cell-kind"
+      label={labels[kind]}
+    />
+  );
+};
+
+/**
+ * The toolbar every instrument listing shares: filter by kind and by how much was collected, then
+ * export exactly the rows left on screen.
+ */
+const Toolbar = ({
+  recordExport,
+  rows,
+  table
+}: {
+  recordExport?: (option: RecordExportOption) => void;
+  rows: InstrumentRow[];
+  table: TanstackTable.Table<InstrumentRow>;
+}) => {
+  const { t } = useTranslation();
+  const download = useDownload();
+  const addNotification = useNotificationsStore((store) => store.addNotification);
+  const kindLabels = useInstrumentKindLabels();
+  const [isOpen, setIsOpen] = useState(false);
+  // Held as the raw string: coercing to a number on every keystroke re-seeded a `0` the moment the
+  // field was cleared, so typed digits landed after it instead of replacing it.
+  const [minRecords, setMinRecords] = useState('');
+
+  // Each column is declared below with these ids, and `initialState.columnFilters` seeds all three.
+  const columnsById = new Map(table.getAllColumns().map((column) => [column.id, column]));
+  const kindColumn = columnsById.get('kind')!;
+  const kindFilter = kindColumn.getFilterValue() as KindFilter;
+  const recordColumn = columnsById.get('recordCount')!;
+  const collectedColumn = columnsById.get('lastCollectedAt')!;
+  const collectedFilter = collectedColumn.getFilterValue() as CollectedFilter;
+
+  /** Export what the table is listing, so a filtered view and its download agree. */
+  const listed = useMemo(() => {
+    const visible = new Set(table.getFilteredRowModel().rows.map((row) => row.original.id));
+    return rows.filter((row) => visible.has(row.id));
+  }, [rows, table.getFilteredRowModel().rows]);
+
+  const handleExport = (option: (typeof LISTING_FORMATS)[number]) => {
+    if (listed.length === 0) {
+      addNotification({
+        message: t({
+          en: 'There is nothing to export',
+          es: 'No hay nada que exportar',
+          fr: "Il n'y a rien à exporter"
+        }),
+        type: 'error'
+      });
+      return;
+    }
+    // Built imperatively, in the order the table shows these columns: the key order is the header
+    // order, and `perfectionist/sort-objects` would alphabetize an object literal into a different
+    // one than the reader just looked at.
+    const exported = listed.map((row) => {
+      const exportedRow: { [key: string]: unknown } = {};
+      exportedRow.Instrument = row.title;
+      exportedRow.Subjects = row.subjectCount;
+      exportedRow.Records = row.recordCount;
+      exportedRow.LastCollected = row.lastCollectedAt ? toBasicISOString(row.lastCollectedAt) : 'None';
+      exportedRow.Kind = row.kind;
+      exportedRow.Edition = row.edition ?? 'None';
+      exportedRow.Source = row.source ?? 'manual';
+      return exportedRow;
+    });
+    const filename = `instruments_${new Date().toISOString()}`;
+    switch (option) {
+      case 'CSV':
+        void download(`${filename}.csv`, () => unparse(exported));
+        break;
+      case 'Excel':
+        downloadSubjectTableExcel(`${filename}.xlsx`, exported, 'Instruments');
+        break;
+      case 'JSON':
+        void download(`${filename}.json`, () => JSON.stringify(exported, null, 2));
+        break;
+    }
+  };
+
+  return (
+    <div className="flex gap-3">
+      <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
+        <DropdownMenu.Trigger asChild>
+          <Button
+            className="flex items-center justify-between gap-2"
+            data-testid="instrument-table-filters-trigger"
+            variant="outline"
+          >
+            {t('common.filters')}
+            <ChevronDownIcon className="opacity-50" />
+          </Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content align="end" className="w-56">
+          <DropdownMenu.Label>{t({ en: 'Kind', es: 'Tipo', fr: 'Type' })}</DropdownMenu.Label>
+          <DropdownMenu.Group>
+            {INSTRUMENT_KINDS.map((kind) => (
+              <DropdownMenu.CheckboxItem
+                checked={kindFilter.includes(kind)}
+                data-testid={`instrument-table-filter-kind-${kind}`}
+                key={kind}
+                onCheckedChange={(checked) => {
+                  kindColumn.setFilterValue((previous: KindFilter) =>
+                    checked ? [...previous, kind] : previous.filter((item) => item !== kind)
+                  );
+                }}
+                onSelect={(e) => e.preventDefault()}
+              >
+                {kindLabels[kind]}
+              </DropdownMenu.CheckboxItem>
+            ))}
+          </DropdownMenu.Group>
+          <DropdownMenu.Label>{t({ en: 'Records', es: 'Registros', fr: 'Enregistrements' })}</DropdownMenu.Label>
+          <DropdownMenu.Group>
+            <div className="relative flex items-center justify-between gap-1 rounded-xs px-2 pt-1.5 pb-1 text-sm transition-colors">
+              <span className="pb-1">{t({ en: 'At least:', es: 'Al menos:', fr: 'Au moins :' })}</span>
+              <input
+                className="bg-popover text-foreground pointer-events-auto w-16 rounded-sm border-b pb-0.5"
+                data-testid="instrument-table-filter-min-records"
+                min={0}
+                placeholder={t({ en: 'Any', es: 'Cualquiera', fr: 'Tous' })}
+                type="number"
+                value={minRecords}
+                onChange={(event) => {
+                  setMinRecords(event.target.value);
+                  // An empty field means no minimum, which is why the parse falls back to zero.
+                  recordColumn.setFilterValue(Number.parseInt(event.target.value, 10) || 0);
+                }}
+              />
+            </div>
+            <CollectedFilterMenu
+              testIdPrefix="instrument-table-filter"
+              value={collectedFilter}
+              onChange={(next) => collectedColumn.setFilterValue(next)}
+            />
+          </DropdownMenu.Group>
+        </DropdownMenu.Content>
+      </DropdownMenu>
+      <DropdownMenu>
+        <DropdownMenu.Trigger asChild>
+          <Button
+            className="flex items-center justify-between gap-2 font-medium"
+            data-testid="instrument-table-export-dropdown"
+            variant="outline"
+          >
+            {t('core.download')}
+            <ChevronDownIcon className="opacity-50" />
+          </Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content align="end" className="w-56">
+          {/* A heading earns its place only once there is a second section to tell apart from the
+              first; over one list of formats it says nothing the button did not already say. */}
+          {recordExport && (
+            <DropdownMenu.Label>
+              {t({ en: 'Instrument list', es: 'Lista de instrumentos', fr: 'Liste des instruments' })}
+            </DropdownMenu.Label>
+          )}
+          <DropdownMenu.Group>
+            {LISTING_FORMATS.map((format) => (
+              <DropdownMenu.Item
+                data-testid={`instrument-table-export-listing-${format}`}
+                key={format}
+                onSelect={() => handleExport(format)}
+              >
+                {format}
+              </DropdownMenu.Item>
+            ))}
+          </DropdownMenu.Group>
+          {recordExport && (
+            <React.Fragment>
+              <DropdownMenu.Separator />
+              <DropdownMenu.Label>
+                {t({ en: 'Subject data', es: 'Datos de sujetos', fr: 'Données des clients' })}
+              </DropdownMenu.Label>
+              <DropdownMenu.Group>
+                {RECORD_FORMATS.map(({ label, option }) => (
+                  <DropdownMenu.Item
+                    data-testid={`instrument-table-export-records-${label}`}
+                    key={label}
+                    onSelect={() => recordExport(option)}
+                  >
+                    {label}
+                  </DropdownMenu.Item>
+                ))}
+              </DropdownMenu.Group>
+            </React.Fragment>
+          )}
+        </DropdownMenu.Content>
+      </DropdownMenu>
+    </div>
+  );
+};
+
+type InstrumentTableProps = {
+  'data-testid'?: string;
+  onOpen: (row: InstrumentRow) => void;
+  /**
+   * Offered as a second export section, for the records behind the listing rather than the listing
+   * itself. Supplied only where those records are one coherent set — a series' own page — and
+   * omitted by the hub index, whose rows share nothing a single file could describe.
+   */
+  recordExport?: (option: RecordExportOption) => void;
+  rows: InstrumentRow[];
+};
+
+/**
+ * The instrument listing, shared by the hub's index and by a series' own page so the two read the
+ * same way: same columns, same sort affordances, same search, filters and export.
+ */
+export const InstrumentTable = ({ 'data-testid': testId, onOpen, recordExport, rows }: InstrumentTableProps) => {
+  const { t } = useTranslation();
+  const [highlightedRowId, setHighlightedRowId] = useState<null | string>(null);
+  const [preview, setPreview] = useState<InstrumentPreviewItem | null>(null);
+
+  // Every edition, so a row naming an older one previews that one rather than the current version.
+  const instrumentInfoQuery = useInstrumentInfoQuery({ params: { allEditions: true } });
+  const infoById = useMemo(
+    () => new Map((instrumentInfoQuery.data ?? []).map((info) => [info.id, info])),
+    [instrumentInfoQuery.data]
+  );
+
+  /** The shape the shared preview dialog takes, filled from the catalog the row only names by id. */
+  const toPreviewItem = (row: InstrumentRow): InstrumentPreviewItem => {
+    const info = infoById.get(row.id);
+    return {
+      authors: info?.details.authors ?? null,
+      availability: null,
+      createdAt: info?.createdAt ?? null,
+      description: info?.details.description,
+      id: row.id,
+      internal: info && info.kind !== 'SERIES' ? info.internal : null,
+      kind: row.kind,
+      seriesItems: info?.kind === 'SERIES' ? info.seriesItems : undefined,
+      source: row.source === null ? { kind: 'manual' } : { kind: 'repo', name: row.source },
+      title: row.title
+    };
+  };
+
+  /** Consulted only to name a series' children, which are instruments this catalog also holds. */
+  const previewableItems = useMemo(
+    () => (instrumentInfoQuery.data ?? []).map((info) => ({ id: info.id, title: info.details.title })),
+    [instrumentInfoQuery.data]
+  );
+
+  const ToolbarWithRows = useMemo(() => {
+    const Component = (props: { table: TanstackTable.Table<InstrumentRow> }) => (
+      <Toolbar {...props} recordExport={recordExport} rows={rows} />
+    );
+    Component.displayName = 'InstrumentTableToolbar';
+    return Component;
+  }, [recordExport, rows]);
+
+  return (
+    <div className="flex grow flex-col" data-testid={testId}>
+      <DataTable
+        // A middle column's width is (container - pinned) / the cap below, so a lower cap makes each
+        // one wider and lets the row scroll rather than squeezing five columns into whatever the
+        // pinned title leaves. The caps keep KIND wide enough for "Interactive" beside its dot.
+        columnBreakpoints={{ 0: 1, 512: 1, 768: 2, 1024: 3, 1280: 5 }}
+        columns={[
+          {
+            accessorKey: 'title',
+            // The one genuinely long value in the row, so it clips to a line and offers the whole
+            // title on hover rather than wrapping every row taller.
+            cell: (ctx) => {
+              const title = ctx.getValue() as string;
+              return (
+                <TruncatedCell
+                  title={title}
+                  value={
+                    <>
+                      {title}
+                      <span
+                        className="hidden"
+                        data-row-selected={highlightedRowId === ctx.row.original.id ? 'true' : 'false'}
+                      />
+                    </>
+                  }
+                />
+              );
+            },
+            header: ({ column }) => (
+              <SortableHeader column={column} label={t({ en: 'Instrument', es: 'Instrumento', fr: 'Instrument' })} />
+            ),
+            // `size` is honoured only for a pinned column: `calculateColumnSizing` overwrites every
+            // unpinned one with an equal share of the remaining width.
+            size: 420
+          },
+          {
+            accessorKey: 'subjectCount',
+            header: ({ column }) => (
+              <SortableHeader column={column} label={t({ en: 'Subjects', es: 'Sujetos', fr: 'Clients' })} />
+            )
+          },
+          {
+            accessorKey: 'recordCount',
+            // Carries the minimum-records filter: the value is the floor a row must reach, not a
+            // count to match. Zero admits everything, which is what an empty field means.
+            filterFn: (row, id, minimum: number) => row.getValue<number>(id) >= minimum,
+            header: ({ column }) => (
+              <SortableHeader column={column} label={t({ en: 'Records', es: 'Registros', fr: 'Enregistrements' })} />
+            )
+          },
+          {
+            accessorKey: 'lastCollectedAt',
+            cell: (ctx) => {
+              const value = ctx.getValue() as Date | null;
+              return value ? toBasicISOString(value) : t({ en: 'None', es: 'Ninguno', fr: 'Aucun' });
+            },
+            filterFn: (row, id, filter: CollectedFilter) =>
+              matchesCollectedFilter(row.getValue<Date | null>(id), filter),
+            header: ({ column }) => (
+              <SortableHeader
+                column={column}
+                label={t({ en: 'Last Collected', es: 'Última recopilación', fr: 'Dernière collecte' })}
+              />
+            ),
+            id: 'lastCollectedAt'
+          },
+          {
+            accessorKey: 'kind',
+            cell: (ctx) => <InstrumentKindCell kind={ctx.getValue() as InstrumentKind} />,
+            filterFn: (row, id, filter: KindFilter) => filter.includes(row.getValue(id)),
+            header: ({ column }) => (
+              <SortableHeader column={column} label={t({ en: 'Kind', es: 'Tipo', fr: 'Type' })} />
+            ),
+            id: 'kind'
+          },
+          {
+            accessorKey: 'edition',
+            cell: (ctx) => (ctx.getValue() as null | number) ?? t({ en: 'None', es: 'Ninguno', fr: 'Aucun' }),
+            header: ({ column }) => (
+              <SortableHeader column={column} label={t({ en: 'Edition', es: 'Edición', fr: 'Édition' })} />
+            )
+          },
+          {
+            accessorKey: 'source',
+            cell: (ctx) => {
+              const source =
+                (ctx.getValue() as null | string) ??
+                t({ en: 'Manual upload', es: 'Carga manual', fr: 'Téléversement manuel' });
+              return <TruncatedCell title={source} value={source} />;
+            },
+            header: ({ column }) => (
+              <SortableHeader column={column} label={t({ en: 'Source', es: 'Origen', fr: 'Source' })} />
+            )
+          }
+        ]}
+        data={rows}
+        initialState={{
+          columnPinning: { left: ['title'] },
+          // eslint-disable-next-line perfectionist/sort-objects
+          columnFilters: [
+            { id: 'kind', value: [...INSTRUMENT_KINDS] satisfies KindFilter },
+            { id: 'recordCount', value: 0 },
+            { id: 'lastCollectedAt', value: DEFAULT_COLLECTED_FILTER }
+          ]
+        }}
+        rowActions={[
+          { label: t('common.view'), onSelect: onOpen },
+          {
+            label: t({ en: 'Preview', es: 'Vista previa', fr: 'Aperçu' }),
+            onSelect: (row) => setPreview(toPreviewItem(row))
+          }
+        ]}
+        togglesComponent={ToolbarWithRows}
+        onRowClick={(row) => setHighlightedRowId(row.id)}
+        onRowDoubleClick={onOpen}
+      />
+      {preview && <InstrumentPreviewDialog item={preview} items={previewableItems} onClose={() => setPreview(null)} />}
+    </div>
+  );
+};
+
+export type { InstrumentRow };
diff --git a/apps/web/src/components/InstrumentTable/__tests__/InstrumentTable.test.tsx b/apps/web/src/components/InstrumentTable/__tests__/InstrumentTable.test.tsx
new file mode 100644
index 000000000..eb4663a81
--- /dev/null
+++ b/apps/web/src/components/InstrumentTable/__tests__/InstrumentTable.test.tsx
@@ -0,0 +1,436 @@
+import { i18n } from '@douglasneuroinformatics/libui/i18n';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { InstrumentTable } from '@/components/InstrumentTable';
+import type { InstrumentRow } from '@/components/InstrumentTable';
+
+import '@/services/i18n';
+
+const mocks = vi.hoisted(() => ({
+  addNotification: vi.fn(),
+  download: vi.fn(),
+  downloadExcel: vi.fn(),
+  instrumentInfo: [] as
+    | undefined
+    | {
+        createdAt?: Date;
+        details: { authors?: string[]; description?: string; title: string };
+        id: string;
+        internal?: { edition: number; name: string };
+        kind: string;
+        seriesItems?: { id: string }[];
+      }[],
+  preview: { current: null as null | { item: unknown; items: unknown; onClose: () => void } }
+}));
+
+vi.mock('@douglasneuroinformatics/libui/hooks', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('@douglasneuroinformatics/libui/hooks')>()),
+  useDownload: () => mocks.download,
+  useNotificationsStore: (selector: (store: { addNotification: typeof mocks.addNotification }) => unknown) =>
+    selector({ addNotification: mocks.addNotification })
+}));
+vi.mock('@/utils/excel', () => ({ downloadSubjectTableExcel: mocks.downloadExcel }));
+// The dialog fetches the instrument bundle to render it; what matters here is the item built for it.
+vi.mock('@/components/InstrumentPreviewDialog', () => ({
+  InstrumentPreviewDialog: (props: { item: unknown; items: unknown; onClose: () => void }) => {
+    mocks.preview.current = props;
+    return <button data-testid="close-preview" type="button" onClick={props.onClose} />;
+  }
+}));
+// The table resolves a row's full details for the preview dialog, which a row only names by id.
+vi.mock('@/hooks/useInstrumentInfoQuery', () => ({
+  useInstrumentInfoQuery: () => ({ data: mocks.instrumentInfo })
+}));
+
+const row = (overrides: Partial<InstrumentRow> = {}): InstrumentRow => ({
+  edition: 1,
+  id: 'hq-1',
+  kind: 'FORM',
+  lastCollectedAt: new Date('2025-02-02'),
+  recordCount: 3,
+  source: null,
+  subjectCount: 2,
+  title: 'Happiness Questionnaire',
+  ...overrides
+});
+
+const renderTable = (rows: InstrumentRow[], onOpen = vi.fn()) => {
+  render(<InstrumentTable rows={rows} onOpen={onOpen} />);
+  return onOpen;
+};
+
+const renderTableWithRecordExport = (rows: InstrumentRow[]) => {
+  const recordExport = vi.fn();
+  render(<InstrumentTable recordExport={recordExport} rows={rows} onOpen={vi.fn()} />);
+  return recordExport;
+};
+
+const openExport = () => fireEvent.keyDown(screen.getByRole('button', { name: 'Download' }), { key: 'Enter' });
+
+const exportItems = () => screen.queryAllByRole('menuitem').map((item) => item.textContent);
+
+const listedTitles = () =>
+  screen.queryAllByTestId('data-table-row').map((tableRow) => tableRow.querySelector('div')!.textContent?.trim() ?? '');
+
+const openFilters = () => fireEvent.keyDown(screen.getByTestId('instrument-table-filters-trigger'), { key: 'Enter' });
+
+const openRowMenu = () => fireEvent.keyDown(screen.getAllByTestId('row-actions-trigger')[0]!, { key: 'Enter' });
+
+const openPreview = () => {
+  openRowMenu();
+  fireEvent.click(screen.getByRole('menuitem', { name: 'Preview' }));
+};
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  mocks.instrumentInfo = [];
+  mocks.preview.current = null;
+  i18n.changeLanguage('en');
+});
+
+afterEach(cleanup);
+
+describe('InstrumentTable', () => {
+  it('should list a row per instrument it is given', () => {
+    renderTable([row(), row({ id: 'stroop-1', kind: 'INTERACTIVE', title: 'Stroop Task' })]);
+    expect(listedTitles()).toStrictEqual(['Happiness Questionnaire', 'Stroop Task']);
+  });
+
+  it('should show the record and subject counts as given, not one derived from the other', () => {
+    renderTable([row({ recordCount: 3, subjectCount: 2 })]);
+    const cells = screen.getAllByTestId('data-table-row')[0]!.textContent;
+    expect(cells).toContain('3');
+    expect(cells).toContain('2');
+  });
+
+  it('should tag the kind with its translated name rather than the stored enum', () => {
+    renderTable([row({ kind: 'INTERACTIVE' })]);
+    expect(screen.getByTestId('instrument-cell-kind').textContent).toBe('Interactive');
+  });
+
+  // The filter menu narrows on the same values the cells show, so offering the raw enum there while
+  // the cell is translated would read as two different vocabularies for one column.
+  it('should offer translated kind names in the filter menu', () => {
+    renderTable([row()]);
+    openFilters();
+    expect(screen.getByTestId('instrument-table-filter-kind-INTERACTIVE').textContent).toBe('Interactive');
+    expect(screen.getByTestId('instrument-table-filter-kind-SERIES').textContent).toBe('Series');
+  });
+
+  it('should hide an instrument whose kind is unchecked', () => {
+    renderTable([row(), row({ id: 'stroop-1', kind: 'INTERACTIVE', title: 'Stroop Task' })]);
+    openFilters();
+    fireEvent.click(screen.getByTestId('instrument-table-filter-kind-FORM'));
+    expect(listedTitles()).toStrictEqual(['Stroop Task']);
+  });
+
+  it('should list only instruments holding at least the minimum number of records', () => {
+    renderTable([row(), row({ id: 'never-1', recordCount: 0, subjectCount: 0, title: 'Never Collected' })]);
+    openFilters();
+    fireEvent.change(screen.getByTestId('instrument-table-filter-min-records'), { target: { value: '1' } });
+    expect(listedTitles()).toStrictEqual(['Happiness Questionnaire']);
+  });
+
+  it('should list every instrument again when the minimum record count is cleared', () => {
+    renderTable([row(), row({ id: 'never-1', recordCount: 0, subjectCount: 0, title: 'Never Collected' })]);
+    openFilters();
+    const minRecords = screen.getByTestId('instrument-table-filter-min-records');
+    fireEvent.change(minRecords, { target: { value: '1' } });
+    fireEvent.change(minRecords, { target: { value: '' } });
+    expect(listedTitles()).toStrictEqual(['Happiness Questionnaire', 'Never Collected']);
+  });
+
+  it('should exclude an instrument whose record count falls short of the minimum', () => {
+    renderTable([row({ recordCount: 3 })]);
+    openFilters();
+    fireEvent.change(screen.getByTestId('instrument-table-filter-min-records'), { target: { value: '4' } });
+    expect(listedTitles()).toStrictEqual([]);
+  });
+
+  it('should hide an instrument last collected outside the chosen window', () => {
+    renderTable([
+      row({ lastCollectedAt: new Date('2020-01-01') }),
+      row({ id: 'recent-1', lastCollectedAt: new Date(), title: 'Recently Collected' })
+    ]);
+    openFilters();
+    fireEvent.change(screen.getByTestId('instrument-table-filter-collected-preset'), {
+      target: { value: 'pastMonth' }
+    });
+    expect(listedTitles()).toStrictEqual(['Recently Collected']);
+  });
+
+  // An instrument nothing was collected for has no date to compare, so a window cannot admit it,
+  // but "any time" must leave it listed.
+  it('should keep a never-collected instrument only while the window is any time', () => {
+    renderTable([row({ id: 'never-1', lastCollectedAt: null, title: 'Never Collected' })]);
+    openFilters();
+    expect(listedTitles()).toStrictEqual(['Never Collected']);
+    fireEvent.change(screen.getByTestId('instrument-table-filter-collected-preset'), {
+      target: { value: 'pastYear' }
+    });
+    expect(listedTitles()).toStrictEqual([]);
+  });
+
+  it('should narrow to an explicit window when the preset is custom', () => {
+    renderTable([
+      row({ lastCollectedAt: new Date('2025-02-02') }),
+      row({ id: 'old-1', lastCollectedAt: new Date('2021-01-01'), title: 'Older' })
+    ]);
+    openFilters();
+    fireEvent.change(screen.getByTestId('instrument-table-filter-collected-preset'), { target: { value: 'custom' } });
+    fireEvent.change(screen.getByTestId('instrument-table-filter-collected-min'), {
+      target: { value: '2024-01-01' }
+    });
+    expect(listedTitles()).toStrictEqual(['Happiness Questionnaire']);
+  });
+
+  // Offered by the table itself rather than by each listing, so the hub index and a series' member
+  // list both have it instead of only whichever page remembered to wire it up.
+  it('should offer a preview beside view in every row menu', () => {
+    renderTable([row()]);
+    fireEvent.keyDown(screen.getAllByTestId('row-actions-trigger')[0]!, { key: 'Enter' });
+    expect(screen.queryAllByRole('menuitem').map((item) => item.textContent)).toStrictEqual(['View', 'Preview']);
+  });
+
+  it('should open an instrument when its row is double-clicked', () => {
+    const onOpen = renderTable([row()]);
+    fireEvent.doubleClick(screen.getAllByTestId('data-table-row')[0]!);
+    expect(onOpen).toHaveBeenCalledWith(expect.objectContaining({ id: 'hq-1' }));
+  });
+
+  it('should match the search against the instrument title', () => {
+    renderTable([row(), row({ id: 'stroop-1', title: 'Stroop Task' })]);
+    fireEvent.change(screen.getByRole('searchbox'), { target: { value: 'stroop' } });
+    expect(listedTitles()).toStrictEqual(['Stroop Task']);
+  });
+
+  // A download whose columns arrive in a different order than the table just showed makes the
+  // reader re-find every field, so the header order follows the column order rather than the
+  // alphabet `perfectionist/sort-objects` would impose on an object literal.
+  it('should order the exported columns the way the table shows them', () => {
+    renderTable([row()]);
+    openExport();
+    fireEvent.click(screen.getByTestId('instrument-table-export-listing-CSV'));
+    const [, getContents] = mocks.download.mock.lastCall!;
+    const [header] = (getContents as () => string)().split('\r\n');
+    expect(header).toBe('Instrument,Subjects,Records,LastCollected,Kind,Edition,Source');
+  });
+
+  it('should name the absence rather than leaving a blank cell for a never-collected instrument', () => {
+    renderTable([row({ edition: null, lastCollectedAt: null })]);
+    openExport();
+    fireEvent.click(screen.getByTestId('instrument-table-export-listing-JSON'));
+    const [, getContents] = mocks.download.mock.lastCall!;
+    const [exported] = JSON.parse((getContents as () => string)()) as { Edition: string; LastCollected: string }[];
+    expect(exported!.LastCollected).toBe('None');
+    expect(exported!.Edition).toBe('None');
+  });
+
+  // The export is of what the table is listing, so a filtered view and its download agree.
+  it('should export only the rows left after filtering', () => {
+    renderTable([row(), row({ id: 'stroop-1', kind: 'INTERACTIVE', title: 'Stroop Task' })]);
+    openFilters();
+    fireEvent.click(screen.getByTestId('instrument-table-filter-kind-FORM'));
+    // The open filter menu makes the rest of the page inert, so it has to be dismissed first.
+    fireEvent.keyDown(screen.getByRole('menu'), { key: 'Escape' });
+    openExport();
+    fireEvent.click(screen.getByTestId('instrument-table-export-listing-CSV'));
+    const [, getContents] = mocks.download.mock.lastCall!;
+    const csv = (getContents as () => string)();
+    expect(csv).toContain('Stroop Task');
+    expect(csv).not.toContain('Happiness Questionnaire');
+  });
+
+  // The hub index lists unrelated instruments, so there is no one set of records a single file
+  // could describe — only a series' own page supplies the second section.
+  it('should offer only the listing formats when no record export is supplied', () => {
+    renderTable([row()]);
+    openExport();
+    expect(screen.queryByText('Subject data')).toBeNull();
+    expect(exportItems()).toStrictEqual(['CSV', 'JSON', 'Excel']);
+  });
+
+  // With nothing to tell it apart from, the heading only repeats what the button said.
+  it('should leave the menu unheaded when it holds a single section', () => {
+    renderTable([row()]);
+    openExport();
+    expect(screen.queryByText('Instrument list')).toBeNull();
+  });
+
+  it('should hand the listing to the spreadsheet writer rather than downloading it as text', () => {
+    renderTable([row()]);
+    openExport();
+    fireEvent.click(screen.getByTestId('instrument-table-export-listing-Excel'));
+    expect(mocks.downloadExcel).toHaveBeenCalledWith(
+      expect.stringMatching(/\.xlsx$/),
+      [expect.objectContaining({ Instrument: 'Happiness Questionnaire' })],
+      'Instruments'
+    );
+    expect(mocks.download).not.toHaveBeenCalled();
+  });
+
+  it('should name the repository an imported instrument came from, and call a manual one manual', () => {
+    renderTable([row({ source: 'odc-instruments' }), row({ id: 'manual-1', source: null, title: 'Manual' })]);
+    openExport();
+    fireEvent.click(screen.getByTestId('instrument-table-export-listing-JSON'));
+    const [, getContents] = mocks.download.mock.lastCall!;
+    const exported = JSON.parse((getContents as () => string)()) as { Source: string }[];
+    expect(exported.map((entry) => entry.Source)).toStrictEqual(['odc-instruments', 'manual']);
+  });
+
+  // An empty file is indistinguishable from a broken download, so the filter is reported instead.
+  it('should report that there is nothing to export rather than saving an empty file', () => {
+    renderTable([row()]);
+    openFilters();
+    fireEvent.change(screen.getByTestId('instrument-table-filter-min-records'), { target: { value: '99' } });
+    fireEvent.keyDown(screen.getByRole('menu'), { key: 'Escape' });
+    openExport();
+    fireEvent.click(screen.getByTestId('instrument-table-export-listing-CSV'));
+    expect(mocks.addNotification).toHaveBeenCalledWith({ message: 'There is nothing to export', type: 'error' });
+    expect(mocks.download).not.toHaveBeenCalled();
+  });
+
+  it('should list an instrument again when its kind is checked back on', () => {
+    renderTable([row(), row({ id: 'stroop-1', kind: 'INTERACTIVE', title: 'Stroop Task' })]);
+    openFilters();
+    fireEvent.click(screen.getByTestId('instrument-table-filter-kind-FORM'));
+    expect(listedTitles()).toStrictEqual(['Stroop Task']);
+    fireEvent.click(screen.getByTestId('instrument-table-filter-kind-FORM'));
+    expect(listedTitles()).toStrictEqual(['Happiness Questionnaire', 'Stroop Task']);
+  });
+
+  it('should mark the row that was clicked as the highlighted one', () => {
+    renderTable([row()]);
+    const tableRow = () => screen.getAllByTestId('data-table-row')[0]!;
+    expect(tableRow().querySelector('[data-row-selected="false"]')).toBeTruthy();
+    fireEvent.click(tableRow());
+    expect(tableRow().querySelector('[data-row-selected="true"]')).toBeTruthy();
+  });
+
+  it('should open the instrument chosen from the row menu', () => {
+    const onOpen = renderTable([row()]);
+    openRowMenu();
+    fireEvent.click(screen.getByRole('menuitem', { name: 'View' }));
+    expect(onOpen.mock.lastCall?.[0]).toMatchObject({ id: 'hq-1' });
+  });
+});
+
+describe('InstrumentTable preview', () => {
+  // A row names an instrument by id alone, so the dialog's details come from the catalog.
+  it('should fill the preview from the catalog entry the row names', () => {
+    mocks.instrumentInfo = [
+      {
+        createdAt: new Date('2025-01-01'),
+        details: { authors: ['A. Author'], description: 'How happy are you?', title: 'Happiness Questionnaire' },
+        id: 'hq-1',
+        internal: { edition: 1, name: 'HQ' },
+        kind: 'FORM'
+      }
+    ];
+    renderTable([row({ source: 'odc-instruments' })]);
+    openPreview();
+    expect(mocks.preview.current?.item).toStrictEqual({
+      authors: ['A. Author'],
+      availability: null,
+      createdAt: new Date('2025-01-01'),
+      description: 'How happy are you?',
+      id: 'hq-1',
+      internal: { edition: 1, name: 'HQ' },
+      kind: 'FORM',
+      seriesItems: undefined,
+      source: { kind: 'repo', name: 'odc-instruments' },
+      title: 'Happiness Questionnaire'
+    });
+  });
+
+  // The catalog resolves after the first paint, and a row previewed meanwhile has only its own
+  // fields — which is still worth showing rather than refusing to open.
+  it('should preview a row the catalog does not hold, from the row alone', () => {
+    renderTable([row()]);
+    openPreview();
+    expect(mocks.preview.current?.item).toMatchObject({
+      authors: null,
+      createdAt: null,
+      description: undefined,
+      internal: null,
+      source: { kind: 'manual' },
+      title: 'Happiness Questionnaire'
+    });
+  });
+
+  // A series has no `internal`, and therefore no edition to read off it.
+  it('should preview a series by its members rather than by an edition it has none of', () => {
+    mocks.instrumentInfo = [
+      { details: { title: 'Member One' }, id: 'member-1', kind: 'FORM' },
+      { details: { title: 'Happiness Series' }, id: 'series-1', kind: 'SERIES', seriesItems: [{ id: 'member-1' }] }
+    ];
+    renderTable([row({ edition: null, id: 'series-1', kind: 'SERIES', title: 'Happiness Series' })]);
+    openPreview();
+    expect(mocks.preview.current?.item).toMatchObject({
+      internal: null,
+      kind: 'SERIES',
+      seriesItems: [{ id: 'member-1' }]
+    });
+  });
+
+  // A series names its members by id, so the dialog needs the catalog's titles to label them.
+  it('should offer the whole catalog as the names a series can be read against', () => {
+    mocks.instrumentInfo = [
+      { details: { title: 'Member One' }, id: 'member-1', kind: 'FORM' },
+      { details: { title: 'Happiness Series' }, id: 'series-1', kind: 'SERIES', seriesItems: [{ id: 'member-1' }] }
+    ];
+    renderTable([row()]);
+    openPreview();
+    expect(mocks.preview.current?.items).toStrictEqual([
+      { id: 'member-1', title: 'Member One' },
+      { id: 'series-1', title: 'Happiness Series' }
+    ]);
+  });
+
+  // The catalog is a plain `useQuery`, so the first render happens before it has resolved.
+  it('should preview a row while the catalog is still loading', () => {
+    mocks.instrumentInfo = undefined;
+    renderTable([row()]);
+    openPreview();
+    expect(mocks.preview.current?.item).toMatchObject({ title: 'Happiness Questionnaire' });
+    expect(mocks.preview.current?.items).toStrictEqual([]);
+  });
+
+  it('should close the preview, leaving the listing as it was', () => {
+    renderTable([row()]);
+    openPreview();
+    fireEvent.click(screen.getByTestId('close-preview'));
+    expect(screen.queryByTestId('instrument-preview-dialog')).toBeNull();
+    expect(listedTitles()).toStrictEqual(['Happiness Questionnaire']);
+  });
+});
+
+describe('InstrumentTable record export', () => {
+  it('should split the menu into a listing section and a subject-data section', () => {
+    renderTableWithRecordExport([row()]);
+    openExport();
+    expect(screen.getByText('Instrument list')).toBeTruthy();
+    expect(screen.getByText('Subject data')).toBeTruthy();
+  });
+
+  // Both shapes of every format: wide spreads each instrument's measures across columns, long
+  // carries one row per measured value, and a series is legible either way.
+  it.each(['TSV', 'TSV Long', 'JSON', 'CSV', 'CSV Long', 'Excel', 'Excel Long'])(
+    'should request the %s shape when it is chosen',
+    (option) => {
+      const recordExport = renderTableWithRecordExport([row()]);
+      openExport();
+      fireEvent.click(screen.getByTestId(`instrument-table-export-records-${option}`));
+      expect(recordExport).toHaveBeenCalledWith(option);
+    }
+  );
+
+  it('should keep the listing export separate from the subject-data export', () => {
+    const recordExport = renderTableWithRecordExport([row()]);
+    openExport();
+    fireEvent.click(screen.getByTestId('instrument-table-export-listing-JSON'));
+    expect(recordExport).not.toHaveBeenCalled();
+    expect(mocks.download).toHaveBeenCalledWith(expect.stringMatching(/\.json$/), expect.any(Function));
+  });
+});
diff --git a/apps/web/src/components/InstrumentTable/index.ts b/apps/web/src/components/InstrumentTable/index.ts
new file mode 100644
index 000000000..ae9941cb9
--- /dev/null
+++ b/apps/web/src/components/InstrumentTable/index.ts
@@ -0,0 +1 @@
+export * from './InstrumentTable';
diff --git a/apps/web/src/components/RecordDistributionChart/RecordDistributionChart.tsx b/apps/web/src/components/RecordDistributionChart/RecordDistributionChart.tsx
new file mode 100644
index 000000000..4045874a1
--- /dev/null
+++ b/apps/web/src/components/RecordDistributionChart/RecordDistributionChart.tsx
@@ -0,0 +1,87 @@
+import { useMemo } from 'react';
+
+import { useTheme } from '@douglasneuroinformatics/libui/hooks';
+import { Bar, BarChart, CartesianGrid, Label, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+
+import type { RecordChartSeries } from '@/hooks/useRecordChartSeries';
+import {
+  AXIS_STROKE,
+  inkColors,
+  resolveTheme,
+  tooltipStyles,
+  X_AXIS_HEIGHT,
+  X_AXIS_LABEL_OFFSET,
+  Y_AXIS_WIDTH
+} from '@/utils/chart-theme';
+import { binDistribution } from '@/utils/distribution';
+
+type RecordDistributionChartProps = {
+  countLabel: string;
+  /** False when the measure's values are categories, which are counted as-is rather than binned */
+  isNumeric: boolean;
+  measureLabel: string;
+  series: RecordChartSeries[];
+};
+
+/**
+ * How the selected measure is distributed across subjects, as counts per bin.
+ *
+ * A numeric measure is binned over the range spanned by every series at once, so bars from
+ * different groups line up and can be compared; a categorical measure is counted per distinct
+ * value instead, since binning a category is meaningless.
+ */
+export const RecordDistributionChart = ({
+  countLabel,
+  isNumeric,
+  measureLabel,
+  series
+}: RecordDistributionChartProps) => {
+  const [theme] = useTheme();
+  const resolvedTheme = resolveTheme(theme);
+
+  const data = useMemo(() => binDistribution(series, isNumeric), [isNumeric, series]);
+
+  return (
+    <ResponsiveContainer height={400} width="100%">
+      <BarChart barGap={2} data={data} margin={{ bottom: 5, left: 15, right: 15, top: 5 }}>
+        <CartesianGrid stroke={AXIS_STROKE} strokeDasharray="5 5" vertical={false} />
+        <XAxis
+          axisLine={{ stroke: AXIS_STROKE }}
+          dataKey="bin"
+          height={X_AXIS_HEIGHT}
+          stroke={inkColors[resolvedTheme]}
+          tickLine={{ stroke: AXIS_STROKE }}
+          tickMargin={8}
+          tickSize={8}
+        >
+          <Label
+            fill={inkColors[resolvedTheme]}
+            offset={X_AXIS_LABEL_OFFSET}
+            position="insideBottom"
+            value={measureLabel}
+          />
+        </XAxis>
+        <YAxis
+          allowDecimals={false}
+          axisLine={{ stroke: AXIS_STROKE }}
+          stroke={inkColors[resolvedTheme]}
+          tickLine={{ stroke: AXIS_STROKE }}
+          tickMargin={5}
+          tickSize={8}
+          width={Y_AXIS_WIDTH}
+        >
+          <Label angle={-90} fill={inkColors[resolvedTheme]} position="insideLeft" value={countLabel} />
+        </YAxis>
+        <Tooltip
+          contentStyle={tooltipStyles[resolvedTheme]}
+          cursor={{ fill: resolvedTheme === 'dark' ? 'rgba(255, 255, 255, 0.06)' : 'rgba(0, 0, 0, 0.06)' }}
+          labelStyle={{ color: inkColors[resolvedTheme], fontWeight: 500 }}
+        />
+        {series.map((item) => (
+          <Bar dataKey={item.key} fill={item.color} key={item.key} name={item.label} radius={[4, 4, 0, 0]} />
+        ))}
+        {series.length > 1 && <Legend wrapperStyle={{ paddingLeft: 40, paddingTop: 10 }} />}
+      </BarChart>
+    </ResponsiveContainer>
+  );
+};
diff --git a/apps/web/src/components/RecordDistributionChart/__tests__/RecordDistributionChart.test.tsx b/apps/web/src/components/RecordDistributionChart/__tests__/RecordDistributionChart.test.tsx
new file mode 100644
index 000000000..bf39c30bb
--- /dev/null
+++ b/apps/web/src/components/RecordDistributionChart/__tests__/RecordDistributionChart.test.tsx
@@ -0,0 +1,102 @@
+import { cloneElement } from 'react';
+import type { ReactElement } from 'react';
+
+import { act, cleanup, render } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import type { RecordChartSeries } from '@/hooks/useRecordChartSeries';
+
+import { RecordDistributionChart } from '../RecordDistributionChart';
+
+import '@/services/i18n';
+
+// happy-dom computes no layout, so the container would measure 0x0 and recharts would draw nothing.
+vi.mock('recharts', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('recharts')>()),
+  ResponsiveContainer: ({ children }: { children: ReactElement<{ height: number; width: number }> }) =>
+    cloneElement(children, { height: 400, width: 800 })
+}));
+
+const seriesOf = (key: string, color: string, values: number[]): RecordChartSeries => ({
+  color,
+  key,
+  label: key,
+  points: values.map((value, index) => ({ time: index, value }))
+});
+
+const renderChart = (series: RecordChartSeries[], isNumeric = true) => {
+  const { container } = render(
+    <RecordDistributionChart countLabel="Records" isNumeric={isNumeric} measureLabel="Total Score" series={series} />
+  );
+  return container;
+};
+
+const bars = (container: HTMLElement) => [...container.querySelectorAll('.recharts-bar')];
+
+const tickLabels = (container: HTMLElement) =>
+  [...container.querySelectorAll('.recharts-xAxis .recharts-cartesian-axis-tick-value')].map(
+    (tick) => tick.textContent
+  );
+
+describe('RecordDistributionChart', () => {
+  afterEach(() => {
+    cleanup();
+    vi.useRealTimers();
+    window.localStorage.clear();
+  });
+
+  it('should draw one bar series per group, so groups can be compared bin by bin', () => {
+    expect(bars(renderChart([seriesOf('a', '#111111', [1, 2]), seriesOf('b', '#222222', [2, 3])]))).toHaveLength(2);
+  });
+
+  // Recharts draws the rectangles only once the bar animation, driven by requestAnimationFrame, has finished.
+  it('should draw a bar in the colour its series was assigned', async () => {
+    vi.useFakeTimers({
+      toFake: ['requestAnimationFrame', 'cancelAnimationFrame', 'performance', 'setTimeout', 'clearTimeout', 'Date']
+    });
+    const container = renderChart([seriesOf('a', '#111111', [1, 2])]);
+    await act(() => vi.advanceTimersByTimeAsync(2000));
+    expect(container.querySelector('.recharts-bar-rectangle path')?.getAttribute('fill')).toBe('#111111');
+  });
+
+  it('should label the axis with the measure being distributed', () => {
+    expect(renderChart([seriesOf('a', '#111111', [1, 2])]).querySelector('.recharts-label')?.textContent).toBe(
+      'Total Score'
+    );
+  });
+
+  // Binning a category is meaningless, so a categorical measure gets one bar per distinct value.
+  it('should count a categorical measure per distinct value rather than binning it', () => {
+    const series: RecordChartSeries = {
+      color: '#111111',
+      key: 'a',
+      label: 'a',
+      points: [
+        { time: 0, value: 'high' },
+        { time: 1, value: 'low' }
+      ]
+    };
+    expect(tickLabels(renderChart([series], false))).toStrictEqual(['high', 'low']);
+  });
+
+  // A single series needs no legend — the axis label already says what the bars count.
+  it('should omit the legend for a single series', () => {
+    expect(renderChart([seriesOf('a', '#111111', [1, 2])]).querySelector('.recharts-legend-wrapper')).toBeNull();
+  });
+
+  it('should name each group in the legend once there is more than one', () => {
+    const container = renderChart([seriesOf('a', '#111111', [1, 2]), seriesOf('b', '#222222', [2, 3])]);
+    expect([...container.querySelectorAll('.recharts-legend-item-text')].map((item) => item.textContent)).toStrictEqual(
+      ['a', 'b']
+    );
+  });
+
+  it('should draw the axes in the dark theme ink, so they stay legible on a dark page', () => {
+    window.localStorage.setItem('theme', 'dark');
+    const container = renderChart([seriesOf('a', '#111111', [1, 2])]);
+    expect(container.querySelector('.recharts-xAxis .recharts-cartesian-axis-line')?.getAttribute('stroke')).toBe(
+      '#64748b'
+    );
+    expect(container.querySelector('.recharts-label')?.getAttribute('fill')).toBe('#cbd5e1');
+  });
+});
diff --git a/apps/web/src/components/RecordDistributionChart/index.ts b/apps/web/src/components/RecordDistributionChart/index.ts
new file mode 100644
index 000000000..858405184
--- /dev/null
+++ b/apps/web/src/components/RecordDistributionChart/index.ts
@@ -0,0 +1 @@
+export * from './RecordDistributionChart';
diff --git a/apps/web/src/components/RecordScatterChart/RecordScatterChart.tsx b/apps/web/src/components/RecordScatterChart/RecordScatterChart.tsx
new file mode 100644
index 000000000..3dc624488
--- /dev/null
+++ b/apps/web/src/components/RecordScatterChart/RecordScatterChart.tsx
@@ -0,0 +1,122 @@
+import { toBasicISOString } from '@douglasneuroinformatics/libjs';
+import { useTheme, useTranslation } from '@douglasneuroinformatics/libui/hooks';
+import {
+  CartesianGrid,
+  Label,
+  Legend,
+  ReferenceLine,
+  ResponsiveContainer,
+  Scatter,
+  ScatterChart,
+  Tooltip,
+  XAxis,
+  YAxis
+} from 'recharts';
+
+import type { RecordChartSeries } from '@/hooks/useRecordChartSeries';
+import {
+  AXIS_STROKE,
+  CHART_SURFACE,
+  inkColors,
+  resolveTheme,
+  tooltipStyles,
+  X_AXIS_HEIGHT,
+  X_AXIS_LABEL_OFFSET,
+  Y_AXIS_WIDTH
+} from '@/utils/chart-theme';
+
+type RecordScatterChartProps = {
+  measureLabel: string;
+  series: RecordChartSeries[];
+  /** The group-wide regression for the selected measure, drawn as a trend line when present */
+  trend?: { intercept: number; slope: number };
+  xLabel: string;
+};
+
+/**
+ * One dot per record: collection date against the selected measure, across every subject.
+ *
+ * The marks carry a surface-coloured ring so overlapping records stay countable, which matters here
+ * because a cohort assessed on the same day stacks vertically.
+ */
+export const RecordScatterChart = ({ measureLabel, series, trend, xLabel }: RecordScatterChartProps) => {
+  const [theme] = useTheme();
+  const { resolvedLanguage } = useTranslation();
+  const resolvedTheme = resolveTheme(theme);
+
+  const times = series.flatMap((item) => item.points.map((point) => point.time));
+  const trendSegment =
+    trend && times.length > 0
+      ? [
+          { x: Math.min(...times), y: trend.intercept + trend.slope * Math.min(...times) },
+          { x: Math.max(...times), y: trend.intercept + trend.slope * Math.max(...times) }
+        ]
+      : null;
+
+  return (
+    <ResponsiveContainer height={400} width="100%">
+      <ScatterChart margin={{ bottom: 5, left: 15, right: 15, top: 5 }}>
+        <CartesianGrid stroke={AXIS_STROKE} strokeDasharray="5 5" />
+        <XAxis
+          axisLine={{ stroke: AXIS_STROKE }}
+          dataKey="time"
+          domain={['auto', 'auto']}
+          height={X_AXIS_HEIGHT}
+          name={xLabel}
+          padding={{ left: 20, right: 20 }}
+          stroke={inkColors[resolvedTheme]}
+          tickFormatter={(time: number) => toBasicISOString(new Date(time))}
+          tickLine={{ stroke: AXIS_STROKE }}
+          tickMargin={8}
+          tickSize={8}
+          type="number"
+        >
+          <Label fill={inkColors[resolvedTheme]} offset={X_AXIS_LABEL_OFFSET} position="insideBottom" value={xLabel} />
+        </XAxis>
+        <YAxis
+          axisLine={{ stroke: AXIS_STROKE }}
+          dataKey="value"
+          domain={['auto', 'auto']}
+          name={measureLabel}
+          stroke={inkColors[resolvedTheme]}
+          tickLine={{ stroke: AXIS_STROKE }}
+          tickMargin={5}
+          tickSize={8}
+          type="number"
+          width={Y_AXIS_WIDTH}
+        />
+        <Tooltip
+          contentStyle={tooltipStyles[resolvedTheme]}
+          // A scatter's tooltip carries no label of its own, so the date is formatted in the row
+          // recharts names after the x axis rather than through `labelFormatter`, which is never
+          // called here. Both rows are named by their axis already.
+          formatter={(value: number, name) => [
+            name === xLabel ? new Intl.DateTimeFormat(resolvedLanguage, { dateStyle: 'medium' }).format(value) : value,
+            name
+          ]}
+          labelStyle={{ color: inkColors[resolvedTheme], fontWeight: 500 }}
+        />
+        {trendSegment && (
+          <ReferenceLine
+            ifOverflow="extendDomain"
+            segment={trendSegment}
+            stroke={inkColors[resolvedTheme]}
+            strokeDasharray="5 5"
+            strokeWidth={2}
+          />
+        )}
+        {series.map((item) => (
+          <Scatter
+            data={item.points}
+            fill={item.color}
+            key={item.key}
+            name={item.label}
+            stroke={CHART_SURFACE[resolvedTheme]}
+            strokeWidth={2}
+          />
+        ))}
+        {series.length > 1 && <Legend wrapperStyle={{ paddingLeft: 40, paddingTop: 10 }} />}
+      </ScatterChart>
+    </ResponsiveContainer>
+  );
+};
diff --git a/apps/web/src/components/RecordScatterChart/__tests__/RecordScatterChart.test.tsx b/apps/web/src/components/RecordScatterChart/__tests__/RecordScatterChart.test.tsx
new file mode 100644
index 000000000..7fa58ad36
--- /dev/null
+++ b/apps/web/src/components/RecordScatterChart/__tests__/RecordScatterChart.test.tsx
@@ -0,0 +1,152 @@
+import { cloneElement } from 'react';
+import type { ReactElement } from 'react';
+
+import { i18n } from '@douglasneuroinformatics/libui/i18n';
+import { act, cleanup, fireEvent, render } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import type { RecordChartSeries } from '@/hooks/useRecordChartSeries';
+
+import { RecordScatterChart } from '../RecordScatterChart';
+
+import '@/services/i18n';
+
+// happy-dom computes no layout, so the container would measure 0x0 and recharts would draw nothing.
+vi.mock('recharts', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('recharts')>()),
+  ResponsiveContainer: ({ children }: { children: ReactElement<{ height: number; width: number }> }) =>
+    cloneElement(children, { height: 400, width: 800 })
+}));
+
+const JANUARY_SECOND = new Date(2026, 0, 2, 12).getTime();
+
+const seriesOf = (key: string, color: string): RecordChartSeries => ({
+  color,
+  key,
+  label: key,
+  points: [
+    { time: new Date(2026, 0, 1, 12).getTime(), value: 10 },
+    { time: JANUARY_SECOND, value: 20 }
+  ]
+});
+
+const renderChart = ({
+  series = [seriesOf('a', '#111111')],
+  trend
+}: { series?: RecordChartSeries[]; trend?: { intercept: number; slope: number } } = {}) => {
+  const { container } = render(
+    <RecordScatterChart measureLabel="Total Score" series={series} trend={trend} xLabel="Date Collected" />
+  );
+  return container;
+};
+
+/**
+ * A scatter's tooltip is triggered by the mark rather than by the chart area, and recharts draws the
+ * marks only once its animation, driven by requestAnimationFrame, has finished.
+ */
+const hoverFirstMark = async (container: HTMLElement) => {
+  await act(() => vi.advanceTimersByTimeAsync(2000));
+  fireEvent.mouseOver(container.querySelector('.recharts-symbols')!);
+};
+
+describe('RecordScatterChart', () => {
+  beforeEach(() => {
+    void i18n.changeLanguage('en');
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.useRealTimers();
+    window.localStorage.clear();
+  });
+
+  it('should draw one scatter per group, so a group can be read apart from the rest', () => {
+    const container = renderChart({ series: [seriesOf('a', '#111111'), seriesOf('b', '#222222')] });
+    expect(container.querySelectorAll('.recharts-scatter')).toHaveLength(2);
+  });
+
+  // Recharts draws the marks only once the scatter animation, driven by requestAnimationFrame, has finished.
+  it('should draw a mark in the colour its series was assigned', async () => {
+    vi.useFakeTimers({
+      toFake: ['requestAnimationFrame', 'cancelAnimationFrame', 'performance', 'setTimeout', 'clearTimeout', 'Date']
+    });
+    const container = renderChart();
+    await act(() => vi.advanceTimersByTimeAsync(2000));
+    expect(container.querySelector('.recharts-symbols')?.getAttribute('fill')).toBe('#111111');
+  });
+
+  it('should label the x axis ticks with ISO dates, so time points read the same in every locale', () => {
+    const ticks = [...renderChart().querySelectorAll('.recharts-xAxis .recharts-cartesian-axis-tick-value')].map(
+      (tick) => tick.textContent
+    );
+    expect(ticks).toContain('2026-01-02');
+  });
+
+  it('should label the x axis with what the dates are', () => {
+    const labels = [...renderChart().querySelectorAll('.recharts-label')].map((label) => label.textContent);
+    expect(labels).toStrictEqual(['Date Collected']);
+  });
+
+  // The regression is computed group-wide, so it is drawn rather than recomputed per selection.
+  it('should draw a trend line across the plotted range when a regression is given', () => {
+    expect(renderChart({ trend: { intercept: 0, slope: 1 } }).querySelector('.recharts-reference-line')).toBeTruthy();
+  });
+
+  it('should draw no trend line when there is no regression', () => {
+    expect(renderChart().querySelector('.recharts-reference-line')).toBeNull();
+  });
+
+  // A regression with nothing plotted has no range to span, so there is no segment to draw.
+  it('should draw no trend line for a regression with no points to span', () => {
+    const empty: RecordChartSeries = { color: '#111111', key: 'a', label: 'a', points: [] };
+    expect(
+      renderChart({ series: [empty], trend: { intercept: 0, slope: 1 } }).querySelector('.recharts-reference-line')
+    ).toBeNull();
+  });
+
+  it('should omit the legend for a single series', () => {
+    expect(renderChart().querySelector('.recharts-legend-wrapper')).toBeNull();
+  });
+
+  it('should name each group in the legend once there is more than one', () => {
+    const container = renderChart({ series: [seriesOf('a', '#111111'), seriesOf('b', '#222222')] });
+    expect([...container.querySelectorAll('.recharts-legend-item-text')].map((item) => item.textContent)).toStrictEqual(
+      ['a', 'b']
+    );
+  });
+
+  const tooltipRows = (container: HTMLElement) =>
+    [...container.querySelectorAll('.recharts-tooltip-item')].map((item) => [
+      item.querySelector('.recharts-tooltip-item-name')?.textContent,
+      item.querySelector('.recharts-tooltip-item-value')?.textContent
+    ]);
+
+  it('should name the tooltip rows after the axes rather than the underlying keys', async () => {
+    vi.useFakeTimers({
+      toFake: ['requestAnimationFrame', 'cancelAnimationFrame', 'performance', 'setTimeout', 'clearTimeout', 'Date']
+    });
+    const container = renderChart();
+    await hoverFirstMark(container);
+    expect(tooltipRows(container).map(([name]) => name)).toStrictEqual(['Date Collected', 'Total Score']);
+  });
+
+  // The axis ticks are ISO, but the tooltip is prose and so follows the interface language. A raw
+  // epoch is what the row shows if the date is left unformatted.
+  it('should show the collection date in the interface language rather than its epoch', async () => {
+    void i18n.changeLanguage('fr');
+    vi.useFakeTimers({
+      toFake: ['requestAnimationFrame', 'cancelAnimationFrame', 'performance', 'setTimeout', 'clearTimeout', 'Date']
+    });
+    const container = renderChart();
+    await hoverFirstMark(container);
+    expect(tooltipRows(container)).toStrictEqual([
+      ['Date Collected', '1 janv. 2026'],
+      ['Total Score', '10']
+    ]);
+  });
+
+  it('should draw the axes in the dark theme ink, so they stay legible on a dark page', () => {
+    window.localStorage.setItem('theme', 'dark');
+    expect(renderChart().querySelector('.recharts-label')?.getAttribute('fill')).toBe('#cbd5e1');
+  });
+});
diff --git a/apps/web/src/components/RecordScatterChart/index.ts b/apps/web/src/components/RecordScatterChart/index.ts
new file mode 100644
index 000000000..149cc35c0
--- /dev/null
+++ b/apps/web/src/components/RecordScatterChart/index.ts
@@ -0,0 +1 @@
+export * from './RecordScatterChart';
diff --git a/apps/web/src/components/SelectChartPalette/SelectChartPalette.tsx b/apps/web/src/components/SelectChartPalette/SelectChartPalette.tsx
new file mode 100644
index 000000000..4947d04cb
--- /dev/null
+++ b/apps/web/src/components/SelectChartPalette/SelectChartPalette.tsx
@@ -0,0 +1,63 @@
+import { Select } from '@douglasneuroinformatics/libui/components';
+import { useTheme, useTranslation } from '@douglasneuroinformatics/libui/hooks';
+
+import { CHART_PALETTE_NAMES, getPaletteSwatch } from '@/utils/chart-palette';
+import type { ChartPaletteName } from '@/utils/chart-palette';
+import { resolveTheme } from '@/utils/chart-theme';
+
+/** The hues a palette would actually draw with, so the choice is visible rather than named. */
+const PaletteSwatch = ({ palette, slots }: { palette: ChartPaletteName; slots: number }) => {
+  const [theme] = useTheme();
+  return (
+    <span className="flex shrink-0 items-center gap-0.5">
+      {getPaletteSwatch(palette, resolveTheme(theme))
+        .slice(0, slots)
+        .map((color) => (
+          <span className="h-2.5 w-2.5 rounded-full" key={color} style={{ backgroundColor: color }} />
+        ))}
+    </span>
+  );
+};
+
+type SelectChartPaletteProps = {
+  'data-testid'?: string;
+  onSelect: (palette: ChartPaletteName) => void;
+  /** How many of the theme's hues the chart will actually draw with, so the swatch does not overpromise */
+  slots: number;
+  value: ChartPaletteName;
+};
+
+/**
+ * The palette control shared by the instrument and subject graphs, so the two offer the same themes
+ * under the same names and a chart means the same thing on either page.
+ */
+export const SelectChartPalette = ({ 'data-testid': testId, onSelect, slots, value }: SelectChartPaletteProps) => {
+  const { t } = useTranslation();
+
+  const paletteLabels: { [K in ChartPaletteName]: string } = {
+    berry: t({ en: 'Berry', es: 'Baya', fr: 'Baie' }),
+    default: t({ en: 'Default', es: 'Predeterminada', fr: 'Par défaut' }),
+    ember: t({ en: 'Ember', es: 'Brasa', fr: 'Braise' }),
+    jade: t({ en: 'Jade', es: 'Jade', fr: 'Jade' })
+  };
+
+  return (
+    <Select value={value} onValueChange={(selected) => onSelect(selected as ChartPaletteName)}>
+      <Select.Trigger className="min-w-36" data-testid={testId}>
+        <Select.Value />
+      </Select.Trigger>
+      <Select.Content>
+        <Select.Group>
+          {CHART_PALETTE_NAMES.map((name) => (
+            <Select.Item key={name} value={name}>
+              <span className="flex items-center gap-2">
+                <PaletteSwatch palette={name} slots={slots} />
+                {paletteLabels[name]}
+              </span>
+            </Select.Item>
+          ))}
+        </Select.Group>
+      </Select.Content>
+    </Select>
+  );
+};
diff --git a/apps/web/src/components/SelectChartPalette/__tests__/SelectChartPalette.test.tsx b/apps/web/src/components/SelectChartPalette/__tests__/SelectChartPalette.test.tsx
new file mode 100644
index 000000000..899c94155
--- /dev/null
+++ b/apps/web/src/components/SelectChartPalette/__tests__/SelectChartPalette.test.tsx
@@ -0,0 +1,81 @@
+import { i18n } from '@douglasneuroinformatics/libui/i18n';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { CHART_PALETTE_THEMES } from '@/utils/chart-palette';
+
+import { SelectChartPalette } from '../SelectChartPalette';
+
+import '@/services/i18n';
+
+const trigger = () => screen.getByTestId<HTMLButtonElement>('select-chart-palette');
+
+const renderSelect = ({ onSelect = vi.fn(), slots = 3 } = {}) => {
+  render(<SelectChartPalette data-testid="select-chart-palette" slots={slots} value="default" onSelect={onSelect} />);
+  return onSelect;
+};
+
+const open = () => fireEvent.keyDown(trigger(), { key: 'Enter' });
+
+const swatchColors = (option: HTMLElement) =>
+  [...option.querySelectorAll<HTMLElement>('span[style]')].map((dot) => dot.style.backgroundColor);
+
+describe('SelectChartPalette', () => {
+  beforeEach(() => {
+    i18n.changeLanguage('en');
+  });
+
+  afterEach(() => {
+    cleanup();
+    window.localStorage.clear();
+  });
+
+  it('should show the name of the selected palette', () => {
+    renderSelect();
+    expect(trigger().textContent).toContain('Default');
+  });
+
+  // `default` is pinned first so the control opens on the palette a chart is drawn with by default.
+  it('should offer every palette with the default first', () => {
+    renderSelect();
+    open();
+    expect(screen.getAllByRole('option').map((option) => option.textContent)).toStrictEqual([
+      'Default',
+      'Berry',
+      'Jade',
+      'Ember'
+    ]);
+  });
+
+  it('should report the chosen palette', () => {
+    const onSelect = renderSelect();
+    open();
+    fireEvent.click(screen.getByRole('option', { name: 'Jade' }));
+    expect(onSelect).toHaveBeenCalledWith('jade');
+  });
+
+  // Naming a palette says nothing about what it looks like, so the hues are shown beside the name.
+  it('should preview the hues a palette would draw with', () => {
+    renderSelect();
+    open();
+    expect(swatchColors(screen.getByRole('option', { name: 'Berry' }))).toStrictEqual(
+      CHART_PALETTE_THEMES.berry.light.slice(0, 3)
+    );
+  });
+
+  // The swatch would otherwise promise hues the chart never reaches.
+  it('should preview only as many hues as the chart will actually draw with', () => {
+    renderSelect({ slots: 2 });
+    open();
+    expect(swatchColors(screen.getByRole('option', { name: 'Berry' }))).toHaveLength(2);
+  });
+
+  it('should preview the dark hues on a dark page, which are re-stepped rather than inverted', () => {
+    window.localStorage.setItem('theme', 'dark');
+    renderSelect({ slots: 1 });
+    open();
+    expect(swatchColors(screen.getByRole('option', { name: 'Berry' }))).toStrictEqual([
+      CHART_PALETTE_THEMES.berry.dark[0]
+    ]);
+  });
+});
diff --git a/apps/web/src/components/SelectChartPalette/index.ts b/apps/web/src/components/SelectChartPalette/index.ts
new file mode 100644
index 000000000..3c5760bd4
--- /dev/null
+++ b/apps/web/src/components/SelectChartPalette/index.ts
@@ -0,0 +1 @@
+export * from './SelectChartPalette';
diff --git a/apps/web/src/components/TabLink/TabLink.tsx b/apps/web/src/components/TabLink/TabLink.tsx
index a6a9156f0..2bcff3c38 100644
--- a/apps/web/src/components/TabLink/TabLink.tsx
+++ b/apps/web/src/components/TabLink/TabLink.tsx
@@ -19,6 +19,9 @@ export const TabLink = ({ label, pathname, testId }: TabLinkProps) => {
       data-nav-url={pathname}
       data-spotlight-type="tab-link"
       data-testid={testId}
+      // The instrument hub keeps its filters in the search params so both tabs describe one set;
+      // navigating without this drops them, and the newly mounted tab silently widens the selection.
+      search={true}
       to={pathname}
     >
       {label}
diff --git a/apps/web/src/components/TruncatedCell/TruncatedCell.tsx b/apps/web/src/components/TruncatedCell/TruncatedCell.tsx
new file mode 100644
index 000000000..56f3dca32
--- /dev/null
+++ b/apps/web/src/components/TruncatedCell/TruncatedCell.tsx
@@ -0,0 +1,21 @@
+import type React from 'react';
+
+type TruncatedCellProps = {
+  'data-testid'?: string;
+  /** The full value, shown on hover when the cell is too narrow to hold it */
+  title: string;
+  value: React.ReactNode;
+};
+
+/**
+ * One line of cell text, clipped with an ellipsis rather than wrapping the row taller.
+ *
+ * The full value is exposed through the native `title` attribute rather than a tooltip component: a
+ * record table renders this in every cell of every row, and a few thousand tooltip roots is a real
+ * cost for a hint that is only ever wanted on the one cell a user is pointing at.
+ */
+export const TruncatedCell = ({ 'data-testid': testId, title, value }: TruncatedCellProps) => (
+  <p className="overflow-hidden text-ellipsis whitespace-nowrap" data-testid={testId} title={title}>
+    {value}
+  </p>
+);
diff --git a/apps/web/src/components/TruncatedCell/__tests__/TruncatedCell.test.tsx b/apps/web/src/components/TruncatedCell/__tests__/TruncatedCell.test.tsx
new file mode 100644
index 000000000..9be9531bb
--- /dev/null
+++ b/apps/web/src/components/TruncatedCell/__tests__/TruncatedCell.test.tsx
@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { TruncatedCell } from '@/components/TruncatedCell';
+
+describe('TruncatedCell', () => {
+  it('should render the value', () => {
+    render(<TruncatedCell title="Baseline Battery" value="Baseline Battery" />);
+    expect(screen.getByText('Baseline Battery')).toBeTruthy();
+  });
+
+  // A clipped cell is unreadable without this: the ellipsis hides exactly the part the user wants.
+  it('should expose the full value on hover, so a clipped cell is still recoverable', () => {
+    render(<TruncatedCell title="A very long series name" value="A very long series name" />);
+    expect(screen.getByText('A very long series name').getAttribute('title')).toBe('A very long series name');
+  });
+
+  // Wrapping is what pushed rows to two lines; clipping to one is the whole point of the component.
+  it('should clip to one line rather than wrapping the row taller', () => {
+    render(<TruncatedCell title="x" value="x" />);
+    const className = screen.getByText('x').getAttribute('class') ?? '';
+    expect(className).toContain('whitespace-nowrap');
+    expect(className).toContain('overflow-hidden');
+    expect(className).toContain('text-ellipsis');
+  });
+
+  it('should carry a test id through for the e2e suite to select on', () => {
+    render(<TruncatedCell data-testid="record-cell-series" title="x" value="x" />);
+    expect(screen.getByTestId('record-cell-series')).toBeTruthy();
+  });
+});
diff --git a/apps/web/src/components/TruncatedCell/index.ts b/apps/web/src/components/TruncatedCell/index.ts
new file mode 100644
index 000000000..817c1e324
--- /dev/null
+++ b/apps/web/src/components/TruncatedCell/index.ts
@@ -0,0 +1 @@
+export * from './TruncatedCell';
diff --git a/apps/web/src/hooks/__tests__/useCollectionMethodLabels.test.ts b/apps/web/src/hooks/__tests__/useCollectionMethodLabels.test.ts
new file mode 100644
index 000000000..291e76bfc
--- /dev/null
+++ b/apps/web/src/hooks/__tests__/useCollectionMethodLabels.test.ts
@@ -0,0 +1,32 @@
+import { i18n } from '@douglasneuroinformatics/libui/i18n';
+import { cleanup, renderHook } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import { useCollectionMethodLabels } from '../useCollectionMethodLabels';
+
+import '@/services/i18n';
+
+describe('useCollectionMethodLabels', () => {
+  beforeEach(() => {
+    i18n.changeLanguage('en');
+  });
+
+  afterEach(cleanup);
+
+  it('should name every session type, so no collection method renders as its stored enum', () => {
+    const { result } = renderHook(() => useCollectionMethodLabels());
+    expect(result.current).toStrictEqual({
+      IN_PERSON: 'In-Person',
+      REMOTE: 'Remote',
+      RETROSPECTIVE: 'Retrospective'
+    });
+  });
+
+  // Reuses the copy the session form already shows for the same concept, so a session started as
+  // "In-Person" is not later described with a different word in the datahub.
+  it('should follow the interface language', () => {
+    i18n.changeLanguage('fr');
+    const { result } = renderHook(() => useCollectionMethodLabels());
+    expect(result.current.REMOTE).toBe('À distance');
+  });
+});
diff --git a/apps/web/src/hooks/__tests__/useGraphData.test.ts b/apps/web/src/hooks/__tests__/useGraphData.test.ts
index 551f228c6..14306b543 100644
--- a/apps/web/src/hooks/__tests__/useGraphData.test.ts
+++ b/apps/web/src/hooks/__tests__/useGraphData.test.ts
@@ -9,6 +9,11 @@ import type { InstrumentVisualizationRecord } from '../useInstrumentVisualizatio
 const record = (time: number, measures: { [key: string]: number }): InstrumentVisualizationRecord => ({
   __date__: new Date(time),
   __id__: `record-${time}`,
+  __instrumentId__: 'instrument-1',
+  __method__: 'IN_PERSON',
+  __seriesId__: null,
+  __seriesName__: null,
+  __subjectId__: 'subject-1',
   __time__: time,
   ...measures
 });
diff --git a/apps/web/src/hooks/__tests__/useGraphLines.test.ts b/apps/web/src/hooks/__tests__/useGraphLines.test.ts
index a75228d8a..538b6cbbe 100644
--- a/apps/web/src/hooks/__tests__/useGraphLines.test.ts
+++ b/apps/web/src/hooks/__tests__/useGraphLines.test.ts
@@ -2,6 +2,8 @@ import { i18n } from '@douglasneuroinformatics/libui/i18n';
 import { act, cleanup, renderHook } from '@testing-library/react';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 
+import { CHART_PALETTE_THEMES } from '@/utils/chart-palette';
+
 import { useGraphLines } from '../useGraphLines';
 
 import '@/services/i18n';
@@ -15,6 +17,9 @@ const NO_MEASURES: { key: string; label: string }[] = [];
 const ONLY_SCORE = [SCORE];
 const SCORE_AND_MOOD = [SCORE, MOOD];
 
+// `useTheme` defaults to the light surface under happy-dom, which has no colour-scheme preference.
+const LIGHT = CHART_PALETTE_THEMES.default.light;
+
 describe('useGraphLines', () => {
   beforeEach(() => {
     i18n.changeLanguage('en');
@@ -23,18 +28,18 @@ describe('useGraphLines', () => {
   afterEach(cleanup);
 
   it('should draw no lines when no measure is selected', () => {
-    const { result } = renderHook(() => useGraphLines({ selectedMeasures: NO_MEASURES }));
+    const { result } = renderHook(() => useGraphLines({ palette: 'default', selectedMeasures: NO_MEASURES }));
     expect(result.current).toEqual([]);
   });
 
   it('should pair each measure with a dashed group trend line in the same colour', () => {
-    const { result } = renderHook(() => useGraphLines({ selectedMeasures: ONLY_SCORE }));
+    const { result } = renderHook(() => useGraphLines({ palette: 'default', selectedMeasures: ONLY_SCORE }));
     expect(result.current).toEqual([
-      { name: 'Score', stroke: '#D81B60', val: 'score' },
+      { name: 'Score', stroke: LIGHT[0], val: 'score' },
       {
         legendType: 'none',
         name: 'Score (Group Trend)',
-        stroke: '#D81B60',
+        stroke: LIGHT[0],
         strokeDasharray: '5 5',
         strokeWidth: 0.5,
         val: 'scoreGroup'
@@ -43,17 +48,23 @@ describe('useGraphLines', () => {
   });
 
   it('should give each measure its own colour, so the lines can be told apart', () => {
-    const { result } = renderHook(() => useGraphLines({ selectedMeasures: SCORE_AND_MOOD }));
+    const { result } = renderHook(() => useGraphLines({ palette: 'default', selectedMeasures: SCORE_AND_MOOD }));
     expect(result.current.map((line) => [line.val, line.stroke])).toEqual([
-      ['score', '#D81B60'],
-      ['scoreGroup', '#D81B60'],
-      ['mood', '#1E88E5'],
-      ['moodGroup', '#1E88E5']
+      ['score', LIGHT[0]],
+      ['scoreGroup', LIGHT[0]],
+      ['mood', LIGHT[1]],
+      ['moodGroup', LIGHT[1]]
     ]);
   });
 
+  // The palette is a search param, so a shared link has to reproduce the colours it was made with.
+  it('should draw from the chosen palette rather than always the default', () => {
+    const { result } = renderHook(() => useGraphLines({ palette: 'jade', selectedMeasures: ONLY_SCORE }));
+    expect(result.current[0]!.stroke).toBe(CHART_PALETTE_THEMES.jade.light[0]);
+  });
+
   it('should relabel the group trend when the language changes', () => {
-    const { result } = renderHook(() => useGraphLines({ selectedMeasures: ONLY_SCORE }));
+    const { result } = renderHook(() => useGraphLines({ palette: 'default', selectedMeasures: ONLY_SCORE }));
     act(() => {
       i18n.changeLanguage('fr');
     });
diff --git a/apps/web/src/hooks/__tests__/useInstrumentHubFacets.test.ts b/apps/web/src/hooks/__tests__/useInstrumentHubFacets.test.ts
new file mode 100644
index 000000000..6d23dc8c6
--- /dev/null
+++ b/apps/web/src/hooks/__tests__/useInstrumentHubFacets.test.ts
@@ -0,0 +1,110 @@
+import { cleanup, renderHook } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { NO_SERIES, useInstrumentHubFacets } from '../useInstrumentHubFacets';
+
+import '@/services/i18n';
+
+const mocks = vi.hoisted(() => ({
+  infos: [] as
+    | undefined
+    | { details: { title: string }; id: string; internal?: { edition: number; name: string }; kind: string }[],
+  instrumentId: 'hq-1',
+  records: [] as undefined | { seriesInstrumentId?: null | string }[],
+  seriesInfoById: {}
+}));
+
+vi.mock('@tanstack/react-router', () => ({
+  useParams: () => ({ instrumentId: mocks.instrumentId })
+}));
+vi.mock('@/hooks/useInstrumentInfoQuery', () => ({
+  useInstrumentInfoQuery: () => ({ data: mocks.infos })
+}));
+vi.mock('@/hooks/useInstrumentRecords', () => ({
+  useInstrumentRecords: () => ({ data: mocks.records })
+}));
+vi.mock('@/hooks/useInstrumentInfoById', () => ({
+  useInstrumentInfoById: () => mocks.seriesInfoById
+}));
+vi.mock('@/store', () => ({
+  useAppStore: (selector: (store: { currentGroup: null }) => unknown) => selector({ currentGroup: null })
+}));
+
+const scalar = (id: string, name: string, edition: number) => ({
+  details: { title: name },
+  id,
+  internal: { edition, name },
+  kind: 'FORM'
+});
+
+describe('useInstrumentHubFacets', () => {
+  beforeEach(() => {
+    mocks.infos = [scalar('hq-1', 'Happiness Questionnaire', 1)];
+    mocks.instrumentId = 'hq-1';
+    mocks.records = [];
+    mocks.seriesInfoById = {};
+  });
+
+  afterEach(cleanup);
+
+  it('should name the opened instrument from the catalog', () => {
+    const { result } = renderHook(() => useInstrumentHubFacets());
+    expect(result.current.title).toBe('Happiness Questionnaire');
+  });
+
+  it('should report no title for an instrument the catalog does not hold', () => {
+    mocks.instrumentId = 'missing';
+    const { result } = renderHook(() => useInstrumentHubFacets());
+    expect(result.current.title).toBeNull();
+  });
+
+  // The series page is a different shape — no shared measures, so no measure columns and no chart.
+  it('should flag a series, so its page can suppress the chart', () => {
+    mocks.infos = [{ details: { title: 'Happiness Series' }, id: 'series-1', kind: 'SERIES' }];
+    mocks.instrumentId = 'series-1';
+    const { result } = renderHook(() => useInstrumentHubFacets());
+    expect(result.current.isSeries).toBe(true);
+  });
+
+  it('should not flag a scalar instrument as a series', () => {
+    const { result } = renderHook(() => useInstrumentHubFacets());
+    expect(result.current.isSeries).toBe(false);
+  });
+
+  it('should offer every sibling edition of the opened instrument', () => {
+    mocks.infos = [scalar('hq-1', 'Happiness Questionnaire', 1), scalar('hq-2', 'Happiness Questionnaire', 2)];
+    const { result } = renderHook(() => useInstrumentHubFacets());
+    expect(result.current.editionOptions).toStrictEqual({ 'hq-1': 'Edition 1', 'hq-2': 'Edition 2' });
+  });
+
+  // The filter can only offer what the records actually reference, so a series nothing was
+  // collected under is not an option.
+  it('should offer only the series its records were collected under', () => {
+    mocks.records = [{ seriesInstrumentId: 'series-1' }];
+    mocks.seriesInfoById = { 'series-1': { edition: null, kind: 'SERIES', title: 'Happiness Series' } };
+    const { result } = renderHook(() => useInstrumentHubFacets());
+    expect(Array.from(result.current.seriesOptions)).toStrictEqual([['series-1', 'Happiness Series']]);
+  });
+
+  it('should bucket records collected outside any series under the no-series option', () => {
+    mocks.records = [{ seriesInstrumentId: null }];
+    const { result } = renderHook(() => useInstrumentHubFacets());
+    expect(Array.from(result.current.seriesOptions)).toStrictEqual([[NO_SERIES, null]]);
+  });
+
+  // Both queries are plain `useQuery`, so the first render happens before either has resolved.
+  it('should offer no editions or series while the catalog and records are still loading', () => {
+    mocks.infos = undefined;
+    mocks.records = undefined;
+    const { result } = renderHook(() => useInstrumentHubFacets());
+    expect(result.current.editionOptions).toStrictEqual({});
+    expect(result.current.seriesOptions.size).toBe(0);
+  });
+
+  // A record may name a series the caller cannot read, leaving the id as the only available label.
+  it('should offer a series it cannot name with no title rather than omitting it', () => {
+    mocks.records = [{ seriesInstrumentId: 'series-unreadable' }];
+    const { result } = renderHook(() => useInstrumentHubFacets());
+    expect(result.current.seriesOptions.get('series-unreadable')).toBeNull();
+  });
+});
diff --git a/apps/web/src/hooks/__tests__/useInstrumentHubRecords.test.ts b/apps/web/src/hooks/__tests__/useInstrumentHubRecords.test.ts
new file mode 100644
index 000000000..f5bbfd952
--- /dev/null
+++ b/apps/web/src/hooks/__tests__/useInstrumentHubRecords.test.ts
@@ -0,0 +1,132 @@
+import type { SessionType } from '@opendatacapture/schemas/session';
+import { cleanup, renderHook } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { useInstrumentHubRecords } from '../useInstrumentHubRecords';
+
+import type { InstrumentVisualizationRecord } from '../useInstrumentVisualization';
+
+type HubSearch = { methods?: SessionType[]; minDate?: Date; series?: string[] };
+
+type VisualizationParams = {
+  filterRecord: (record: InstrumentVisualizationRecord) => boolean;
+  instrumentId: string | undefined;
+  seriesInstrumentId: string | undefined;
+};
+
+const mocks: {
+  isSeries: boolean;
+  search: HubSearch;
+  /** Captured so the params the hook hands down can be asserted without rendering the real hook */
+  visualizationParams: undefined | VisualizationParams;
+} = vi.hoisted(() => ({
+  isSeries: false,
+  search: {},
+  visualizationParams: undefined
+}));
+
+vi.mock('@tanstack/react-router', () => ({
+  useParams: () => ({ instrumentId: 'instrument-1' }),
+  useSearch: () => mocks.search
+}));
+vi.mock('@/hooks/useInstrumentHubFacets', () => ({
+  NO_SERIES: '',
+  useInstrumentHubFacets: () => ({ isSeries: mocks.isSeries })
+}));
+vi.mock('@/hooks/useInstrumentVisualization', () => ({
+  useInstrumentVisualization: ({ params }: { params: VisualizationParams }) => {
+    mocks.visualizationParams = params;
+    return { records: [] };
+  }
+}));
+
+const record = (overrides: Partial<InstrumentVisualizationRecord> = {}): InstrumentVisualizationRecord => ({
+  __date__: new Date('2025-01-01'),
+  __id__: 'record-1',
+  __instrumentId__: 'instrument-1',
+  __method__: 'IN_PERSON',
+  __seriesId__: null,
+  __seriesName__: null,
+  __subjectId__: 'subject-1',
+  __time__: 0,
+  ...overrides
+});
+
+/** The predicate the hook hands down, which is what both tabs and the download are filtered by. */
+const filterRecord = (): ((record: InstrumentVisualizationRecord) => boolean) => {
+  renderHook(() => useInstrumentHubRecords());
+  return mocks.visualizationParams!.filterRecord;
+};
+
+describe('useInstrumentHubRecords', () => {
+  beforeEach(() => {
+    mocks.isSeries = false;
+    mocks.search = {};
+    mocks.visualizationParams = undefined;
+  });
+
+  afterEach(cleanup);
+
+  // The filter goes *into* the visualization hook rather than being applied to its result, because
+  // its download closes over its own records — a filter applied outside would narrow the table
+  // while the download kept every row the user believed they had excluded.
+  it('should hand the predicate to the visualization hook rather than filtering its output', () => {
+    renderHook(() => useInstrumentHubRecords());
+    expect(typeof mocks.visualizationParams!.filterRecord).toBe('function');
+  });
+
+  it('should keep every record when no filter is set', () => {
+    const matches = filterRecord();
+    expect(matches(record())).toBe(true);
+    expect(matches(record({ __method__: null }))).toBe(true);
+  });
+
+  it('should drop a record whose method is not selected', () => {
+    mocks.search = { methods: ['REMOTE'] };
+    expect(filterRecord()(record({ __method__: 'IN_PERSON' }))).toBe(false);
+  });
+
+  it('should keep a record whose method is selected', () => {
+    mocks.search = { methods: ['IN_PERSON'] };
+    expect(filterRecord()(record({ __method__: 'IN_PERSON' }))).toBe(true);
+  });
+
+  // A record whose session was deleted carries no method, so it matches no explicit selection.
+  // Exempting it meant unchecking every method still left rows on screen.
+  it('should drop a record with no method once the method filter narrows', () => {
+    mocks.search = { methods: ['IN_PERSON'] };
+    expect(filterRecord()(record({ __method__: null }))).toBe(false);
+  });
+
+  it('should show nothing when every method is unchecked, which an absent filter does not mean', () => {
+    mocks.search = { methods: [] };
+    const matches = filterRecord();
+    expect(matches(record({ __method__: 'IN_PERSON' }))).toBe(false);
+    expect(matches(record({ __method__: null }))).toBe(false);
+  });
+
+  it('should match a record collected outside any series against the no-series option', () => {
+    mocks.search = { series: [''] };
+    expect(filterRecord()(record({ __seriesId__: null }))).toBe(true);
+  });
+
+  it('should drop a record whose series is not selected', () => {
+    mocks.search = { series: ['series-1'] };
+    expect(filterRecord()(record({ __seriesId__: 'series-2' }))).toBe(false);
+  });
+
+  // A record never carries a series as its own `instrumentId`, so querying it that way for a series
+  // page would always come back empty.
+  it('should query a series through seriesInstrumentId, not instrumentId', () => {
+    mocks.isSeries = true;
+    renderHook(() => useInstrumentHubRecords());
+    expect(mocks.visualizationParams!.instrumentId).toBeUndefined();
+    expect(mocks.visualizationParams!.seriesInstrumentId).toBe('instrument-1');
+  });
+
+  it('should query a scalar instrument through instrumentId', () => {
+    renderHook(() => useInstrumentHubRecords());
+    expect(mocks.visualizationParams!.instrumentId).toBe('instrument-1');
+    expect(mocks.visualizationParams!.seriesInstrumentId).toBeUndefined();
+  });
+});
diff --git a/apps/web/src/hooks/__tests__/useInstrumentInfoById.test.ts b/apps/web/src/hooks/__tests__/useInstrumentInfoById.test.ts
new file mode 100644
index 000000000..b6b3b4986
--- /dev/null
+++ b/apps/web/src/hooks/__tests__/useInstrumentInfoById.test.ts
@@ -0,0 +1,62 @@
+import { cleanup, renderHook } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { useInstrumentInfoById } from '../useInstrumentInfoById';
+
+type InfoQueryParams = { allEditions?: boolean; kind?: string; subjectId?: string };
+
+const mocks = vi.hoisted(() => ({
+  data: undefined as
+    undefined | { details: { title: string }; id: string; internal?: { edition: number }; kind: string }[],
+  /** What the hook asked the catalog for, captured so the slice can be asserted */
+  params: undefined as InfoQueryParams | undefined
+}));
+
+vi.mock('@/hooks/useInstrumentInfoQuery', () => ({
+  useInstrumentInfoQuery: ({ params }: { params?: InfoQueryParams }) => {
+    mocks.params = params;
+    return { data: mocks.data };
+  }
+}));
+
+describe('useInstrumentInfoById', () => {
+  beforeEach(() => {
+    mocks.data = undefined;
+    mocks.params = undefined;
+  });
+
+  afterEach(cleanup);
+
+  it('should key every instrument by its id, carrying the kind beside the title', () => {
+    mocks.data = [
+      { details: { title: 'Happiness Questionnaire' }, id: 'hq-1', internal: { edition: 1 }, kind: 'FORM' },
+      { details: { title: 'Stroop Task' }, id: 'stroop-1', internal: { edition: 3 }, kind: 'INTERACTIVE' }
+    ];
+    const { result } = renderHook(() => useInstrumentInfoById());
+    expect(result.current).toStrictEqual({
+      'hq-1': { edition: 1, kind: 'FORM', title: 'Happiness Questionnaire' },
+      'stroop-1': { edition: 3, kind: 'INTERACTIVE', title: 'Stroop Task' }
+    });
+  });
+
+  // A series' member list reads the kind off this map, so an INTERACTIVE member must not be
+  // reported as a form.
+  it('should report a non-form kind as itself', () => {
+    mocks.data = [{ details: { title: 'Upload' }, id: 'file-1', internal: { edition: 1 }, kind: 'FILE' }];
+    const { result } = renderHook(() => useInstrumentInfoById());
+    expect(result.current['file-1']?.kind).toBe('FILE');
+    expect(result.current['file-1']?.edition).toBe(1);
+  });
+
+  it('should pass the requested slice of the catalog straight through to the query', () => {
+    renderHook(() => useInstrumentInfoById({ kind: 'SERIES' }));
+    expect(mocks.params).toStrictEqual({ kind: 'SERIES' });
+  });
+
+  // The hook is read during the first render, before the query settles, so an unresolved query has
+  // to be an empty map rather than undefined.
+  it('should be an empty map while the catalog has not loaded', () => {
+    const { result } = renderHook(() => useInstrumentInfoById());
+    expect(result.current).toStrictEqual({});
+  });
+});
diff --git a/apps/web/src/hooks/__tests__/useInstrumentKindLabels.test.ts b/apps/web/src/hooks/__tests__/useInstrumentKindLabels.test.ts
new file mode 100644
index 000000000..896769f78
--- /dev/null
+++ b/apps/web/src/hooks/__tests__/useInstrumentKindLabels.test.ts
@@ -0,0 +1,34 @@
+import { i18n } from '@douglasneuroinformatics/libui/i18n';
+import { cleanup, renderHook } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import { useInstrumentKindLabels } from '../useInstrumentKindLabels';
+
+import '@/services/i18n';
+
+describe('useInstrumentKindLabels', () => {
+  beforeEach(() => {
+    i18n.changeLanguage('en');
+  });
+
+  afterEach(cleanup);
+
+  it('should name every instrument kind, so none reaches the screen as its stored value', () => {
+    const { result } = renderHook(() => useInstrumentKindLabels());
+    expect(result.current).toStrictEqual({
+      FILE: 'File',
+      FORM: 'Form',
+      INTERACTIVE: 'Interactive',
+      SERIES: 'Series'
+    });
+  });
+
+  // The kind is shown in a table cell and in the filter that narrows on it; both read this map, so
+  // a reader cannot be offered "Formulaire" and then shown "Form".
+  it('should follow the interface language', () => {
+    i18n.changeLanguage('fr');
+    const { result } = renderHook(() => useInstrumentKindLabels());
+    expect(result.current.FORM).toBe('Formulaire');
+    expect(result.current.SERIES).toBe('Série');
+  });
+});
diff --git a/apps/web/src/hooks/__tests__/useInstrumentRecordSummaryQuery.test.ts b/apps/web/src/hooks/__tests__/useInstrumentRecordSummaryQuery.test.ts
new file mode 100644
index 000000000..0f2fd65aa
--- /dev/null
+++ b/apps/web/src/hooks/__tests__/useInstrumentRecordSummaryQuery.test.ts
@@ -0,0 +1,105 @@
+import type { PropsWithChildren } from 'react';
+import { createElement, Suspense } from 'react';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { renderHook, waitFor } from '@testing-library/react';
+import axios from 'axios';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import {
+  instrumentRecordSummaryQueryOptions,
+  useInstrumentRecordSummaryQuery
+} from '../useInstrumentRecordSummaryQuery';
+
+vi.mock('axios');
+
+const runQuery = (params: { bySeries?: boolean; groupId?: string }) =>
+  new QueryClient().fetchQuery(instrumentRecordSummaryQueryOptions({ params }));
+
+const renderSummaryQuery = () => {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  const wrapper = ({ children }: PropsWithChildren) =>
+    createElement(QueryClientProvider, { client: queryClient }, createElement(Suspense, { fallback: null }, children));
+  return renderHook(() => useInstrumentRecordSummaryQuery(), { wrapper });
+};
+
+// eslint-disable-next-line @typescript-eslint/unbound-method -- a vitest mock, never invoked as a method
+const get = vi.mocked(axios).get;
+
+const summary = (overrides: { [key: string]: unknown } = {}) => ({
+  instrumentId: 'instrument-1',
+  lastCollectedAt: null,
+  recordCount: 2,
+  subjectCount: 1,
+  ...overrides
+});
+
+describe('instrumentRecordSummaryQueryOptions', () => {
+  beforeEach(() => {
+    get.mockReset();
+  });
+
+  it('should summarize by instrument by default, which is what the hub lists', async () => {
+    get.mockResolvedValueOnce({ data: [] });
+    await runQuery({ groupId: 'group-1' });
+    expect(get).toHaveBeenCalledWith('/v1/instrument-records/summary/by-instrument', {
+      params: { groupId: 'group-1' }
+    });
+  });
+
+  // A series collects through the instruments it composes, so its totals come from a different
+  // aggregation rather than from filtering the per-instrument one.
+  it('should summarize by series when asked, since a series owns no records under its own id', async () => {
+    get.mockResolvedValueOnce({ data: [] });
+    await runQuery({ bySeries: true, groupId: 'group-1' });
+    expect(get).toHaveBeenCalledWith('/v1/instrument-records/summary/by-series', { params: { groupId: 'group-1' } });
+  });
+
+  it('should send only the group, so the series flag stays a client-side choice of endpoint', async () => {
+    get.mockResolvedValueOnce({ data: [] });
+    await runQuery({ bySeries: true, groupId: 'group-1' });
+    expect(get.mock.lastCall?.[1]).toStrictEqual({ params: { groupId: 'group-1' } });
+  });
+
+  it('should coerce the collection date, so the column can compare it as a date rather than a string', async () => {
+    get.mockResolvedValueOnce({ data: [summary({ lastCollectedAt: '2025-02-02T00:00:00.000Z' })] });
+    const [parsed] = await runQuery({ groupId: 'group-1' });
+    expect(parsed!.lastCollectedAt).toStrictEqual(new Date('2025-02-02T00:00:00.000Z'));
+  });
+
+  // An instrument the caller may read but has never collected belongs in the list with no date.
+  it('should accept a null collection date for an instrument never collected', async () => {
+    get.mockResolvedValueOnce({ data: [summary({ recordCount: 0, subjectCount: 0 })] });
+    await expect(runQuery({ groupId: 'group-1' })).resolves.toStrictEqual([
+      { instrumentId: 'instrument-1', lastCollectedAt: null, recordCount: 0, subjectCount: 0 }
+    ]);
+  });
+
+  it('should reject a fractional subject count, since subjects are counted not measured', async () => {
+    get.mockResolvedValueOnce({ data: [summary({ subjectCount: 1.5 })] });
+    await expect(runQuery({ groupId: 'group-1' })).rejects.toThrow();
+  });
+
+  // Called with no argument at all, which is how the hub lists every instrument across groups.
+  it('should suspend until the summary resolves, so the hub never lists an instrument without its counts', async () => {
+    get.mockResolvedValueOnce({ data: [summary()] });
+    const { result } = renderSummaryQuery();
+    await waitFor(() => expect(result.current?.data).toHaveLength(1));
+    expect(get).toHaveBeenCalledWith('/v1/instrument-records/summary/by-instrument', {
+      params: { groupId: undefined }
+    });
+  });
+
+  it('should key the cache on the group, so switching group does not serve the previous group counts', () => {
+    expect(instrumentRecordSummaryQueryOptions({ params: { groupId: 'group-1' } }).queryKey).not.toStrictEqual(
+      instrumentRecordSummaryQueryOptions({ params: { groupId: 'group-2' } }).queryKey
+    );
+  });
+
+  // Both summaries are fetched on the same page, so sharing a key would serve one as the other.
+  it('should key the cache on the series flag, so the two summaries do not share an entry', () => {
+    expect(instrumentRecordSummaryQueryOptions({ params: { groupId: 'group-1' } }).queryKey).not.toStrictEqual(
+      instrumentRecordSummaryQueryOptions({ params: { bySeries: true, groupId: 'group-1' } }).queryKey
+    );
+  });
+});
diff --git a/apps/web/src/hooks/__tests__/useInstrumentVisualization.test.ts b/apps/web/src/hooks/__tests__/useInstrumentVisualization.test.ts
index 910fb3526..bfd55e608 100644
--- a/apps/web/src/hooks/__tests__/useInstrumentVisualization.test.ts
+++ b/apps/web/src/hooks/__tests__/useInstrumentVisualization.test.ts
@@ -44,8 +44,10 @@ const createMockRecords = (data: { [key: string]: unknown }) => [
     computedMeasures: {},
     data,
     date: FIXED_TEST_DATE,
+    instrumentId: 'instrument-1',
     session: { user: { username: 'testusername' } },
-    sessionId: '123'
+    sessionId: '123',
+    subjectId: 'group-1$subject-1'
   }
 ];
 const mockInstrumentRecords: { data?: { [key: string]: unknown }[] } = {
@@ -113,7 +115,7 @@ describe('useInstrumentVisualization', () => {
       const result = await renderWithSetRecord();
       act(() => result.current.dl('CSV Long'));
       const [, getContentFn] = mockDownloadFn.mock.calls[0] ?? [];
-      expect(getContentFn()).toContain(`testusername,"FRIENDS, MONEY",causes`);
+      expect(getContentFn()).toContain(`testusername,causes,"FRIENDS, MONEY"`);
     });
 
     it('should export a set in JSON as the subject table displays it, not as {}', async () => {
@@ -138,7 +140,7 @@ describe('useInstrumentVisualization', () => {
       expect(filename).toContain('.csv');
       const csvContents = getContentFn();
       expect(csvContents).toMatch(
-        `GroupID,subjectId,Date,Username,someValue\r\ntestGroupId,testId,${toBasicISOString(FIXED_TEST_DATE)},testusername,abc`
+        `GroupID,SubjectID,InstrumentName,InstrumentEdition,Date,CollectionMethod,SeriesID,SeriesName,Username,someValue\r\ntestGroupId,subject-1,instrument-1,,${toBasicISOString(FIXED_TEST_DATE)},,,,testusername,abc`
       );
     });
   });
@@ -156,7 +158,7 @@ describe('useInstrumentVisualization', () => {
       expect(filename).toContain('.tsv');
       const tsvContents = getContentFn();
       expect(tsvContents).toMatch(
-        `GroupID\tsubjectId\tDate\tUsername\tsomeValue\r\ntestGroupId\ttestId\t${toBasicISOString(FIXED_TEST_DATE)}\ttestusername\tabc`
+        `GroupID\tSubjectID\tInstrumentName\tInstrumentEdition\tDate\tCollectionMethod\tSeriesID\tSeriesName\tUsername\tsomeValue\r\ntestGroupId\tsubject-1\tinstrument-1\t\t${toBasicISOString(FIXED_TEST_DATE)}\t\t\t\ttestusername\tabc`
       );
     });
   });
@@ -175,7 +177,7 @@ describe('useInstrumentVisualization', () => {
       expect(filename).toContain('.csv');
       const csvLongContents = getContentFn();
       expect(csvLongContents).toMatch(
-        `GroupID,Date,SubjectID,Username,Value,Variable\r\ntestGroupId,${toBasicISOString(FIXED_TEST_DATE)},testId,testusername,abc,someValue`
+        `GroupID,SubjectID,InstrumentName,InstrumentEdition,Date,CollectionMethod,SeriesID,SeriesName,Username,Variable,Value\r\ntestGroupId,subject-1,instrument-1,,${toBasicISOString(FIXED_TEST_DATE)},,,,testusername,someValue,abc`
       );
     });
   });
@@ -194,7 +196,7 @@ describe('useInstrumentVisualization', () => {
       expect(filename).toMatch('.tsv');
       const tsvLongContents = getContentFn();
       expect(tsvLongContents).toMatch(
-        `GroupID\tDate\tSubjectID\tUsername\tValue\tVariable\r\ntestGroupId\t${toBasicISOString(FIXED_TEST_DATE)}\ttestId\ttestusername\tabc\tsomeValue`
+        `GroupID\tSubjectID\tInstrumentName\tInstrumentEdition\tDate\tCollectionMethod\tSeriesID\tSeriesName\tUsername\tVariable\tValue\r\ntestGroupId\tsubject-1\tinstrument-1\t\t${toBasicISOString(FIXED_TEST_DATE)}\t\t\t\ttestusername\tsomeValue\tabc`
       );
     });
   });
@@ -214,9 +216,14 @@ describe('useInstrumentVisualization', () => {
 
       expect(excelContents).toEqual([
         {
+          CollectionMethod: null,
           Date: '2025-04-30',
           GroupID: 'testGroupId',
-          subjectId: 'testId',
+          InstrumentEdition: null,
+          InstrumentName: 'instrument-1',
+          SeriesID: null,
+          SeriesName: null,
+          SubjectID: 'subject-1',
           // eslint-disable-next-line perfectionist/sort-objects
           someValue: 'abc',
           Username: 'testusername'
@@ -241,9 +248,14 @@ describe('useInstrumentVisualization', () => {
 
       expect(excelContents).toEqual([
         {
+          CollectionMethod: null,
           Date: '2025-04-30',
           GroupID: 'testGroupId',
-          SubjectID: 'testId',
+          InstrumentEdition: null,
+          InstrumentName: 'instrument-1',
+          SeriesID: null,
+          SeriesName: null,
+          SubjectID: 'subject-1',
           Username: 'testusername',
           Value: 'abc',
           Variable: 'someValue'
@@ -251,6 +263,99 @@ describe('useInstrumentVisualization', () => {
       ]);
     });
   });
+  // A series' export spans several member instruments, so the instrument cannot be left to the
+  // filename the way a single instrument's export can — each row has to say what produced it.
+  describe('instrument provenance', () => {
+    const SERIES_RECORDS = [
+      {
+        computedMeasures: {},
+        data: { someValue: 'abc' },
+        date: FIXED_TEST_DATE,
+        instrumentId: 'member-1',
+        seriesInstrumentId: 'series-1',
+        session: { user: { username: 'testusername' } },
+        sessionId: '123',
+        subjectId: 'group-1$subject-1'
+      },
+      {
+        computedMeasures: {},
+        data: { otherValue: 7 },
+        date: FIXED_TEST_DATE,
+        instrumentId: 'member-2',
+        seriesInstrumentId: 'series-1',
+        session: { user: { username: 'testusername' } },
+        sessionId: '124',
+        subjectId: 'group-1$subject-1'
+      }
+    ];
+
+    const renderSeries = async () => {
+      mockUseInstrument.mockReturnValue(null);
+      mockInfoQuery.data = [
+        { details: { title: 'Member One' }, id: 'member-1', internal: { edition: 1, name: 'one' }, kind: 'FORM' },
+        { details: { title: 'Member Two' }, id: 'member-2', internal: { edition: 3, name: 'two' }, kind: 'FORM' }
+      ];
+      mockInstrumentRecords.data = SERIES_RECORDS;
+      const { result } = renderHook(() => useInstrumentVisualization({ params: { seriesInstrumentId: 'series-1' } }));
+      await waitFor(() => {
+        expect(result.current.records.length).toBe(2);
+      });
+      return result;
+    };
+
+    it('should name the instrument and edition that produced each row', async () => {
+      const result = await renderSeries();
+      act(() => result.current.dl('Excel Long'));
+      const [, rows] = mockExcelDownloadFn.mock.calls[0] ?? [];
+      expect(rows).toEqual([
+        expect.objectContaining({ InstrumentEdition: 1, InstrumentName: 'Member One', Variable: 'someValue' }),
+        expect.objectContaining({ InstrumentEdition: 3, InstrumentName: 'Member Two', Variable: 'otherValue' })
+      ]);
+    });
+
+    // Papaparse takes its header from the first row alone, so without the union of every record's
+    // measures a series export silently dropped whatever the first instrument did not measure.
+    it("should keep every instrument's fields as columns in a wide export", async () => {
+      const result = await renderSeries();
+      act(() => result.current.dl('CSV'));
+      const [, getContentFn] = mockDownloadFn.mock.calls[0] ?? [];
+      const [header, firstRow, secondRow] = (getContentFn() as string).split('\r\n');
+      expect(header).toContain('someValue');
+      expect(header).toContain('otherValue');
+      // Each row fills only its own instrument's field and leaves the other blank rather than
+      // claiming a value it never collected.
+      expect(firstRow!.endsWith('abc,')).toBe(true);
+      expect(secondRow!.endsWith(',7')).toBe(true);
+    });
+
+    // Every member's measures reach one file, which is the point of exporting a whole series.
+    it('should carry every member instrument into a single export', async () => {
+      const result = await renderSeries();
+      act(() => result.current.dl('CSV Long'));
+      const [filename, getContentFn] = mockDownloadFn.mock.calls[0] ?? [];
+      expect(filename).toContain('series');
+      const contents = getContentFn() as string;
+      expect(contents).toContain('Member One');
+      expect(contents).toContain('Member Two');
+    });
+
+    it('should fall back to the id so a row is never anonymous when the catalog has dropped it', async () => {
+      mockUseInstrument.mockReturnValue(null);
+      mockInfoQuery.data = [];
+      mockInstrumentRecords.data = SERIES_RECORDS;
+      const { result } = renderHook(() => useInstrumentVisualization({ params: { seriesInstrumentId: 'series-1' } }));
+      await waitFor(() => {
+        expect(result.current.records.length).toBe(2);
+      });
+      act(() => result.current.dl('Excel Long'));
+      const [, rows] = mockExcelDownloadFn.mock.calls[0] ?? [];
+      expect(rows).toEqual([
+        expect.objectContaining({ InstrumentEdition: null, InstrumentName: 'member-1' }),
+        expect.objectContaining({ InstrumentEdition: null, InstrumentName: 'member-2' })
+      ]);
+    });
+  });
+
   describe('editions', () => {
     it('should list only the latest edition of an instrument, with every edition available as an option', async () => {
       mockInfoQuery.data = [
@@ -317,7 +422,7 @@ describe('useInstrumentVisualization', () => {
       expect(filename).toMatch('.json');
       const jsonContents = await getContentFn();
       expect(jsonContents).toContain('"someValue": "abc"');
-      expect(jsonContents).toContain('"subjectID": "testId"');
+      expect(jsonContents).toContain('"SubjectID": "subject-1"');
     });
   });
 
@@ -383,12 +488,25 @@ describe('useInstrumentVisualization', () => {
 
     it('should merge the computed measures into the record, ignoring data that is not an object', async () => {
       const result = await renderWithRecords([
-        { computedMeasures: { total: 3 }, data: null, date: FIXED_TEST_DATE, id: 'record-1', session: null }
+        {
+          computedMeasures: { total: 3 },
+          data: null,
+          date: FIXED_TEST_DATE,
+          id: 'record-1',
+          instrumentId: 'instrument-1',
+          session: null,
+          subjectId: 'group-1$subject-1'
+        }
       ]);
       expect(result.current.records).toEqual([
         {
           __date__: FIXED_TEST_DATE,
           __id__: 'record-1',
+          __instrumentId__: 'instrument-1',
+          __method__: null,
+          __seriesId__: null,
+          __seriesName__: null,
+          __subjectId__: 'group-1$subject-1',
           __time__: FIXED_TEST_DATE.getTime(),
           total: 3,
           username: 'N/A'
@@ -433,5 +551,33 @@ describe('useInstrumentVisualization', () => {
       expect(result.current.instrumentOptions).toEqual({});
       expect(result.current.editionOptions).toEqual({});
     });
+
+    // The instrument table holds its filters in the URL and narrows every consumer through this
+    // predicate, which is what keeps a filtered table and its download describing the same set.
+    it('should narrow the records to those the supplied predicate keeps', async () => {
+      mockInstrumentRecords.data = [
+        ...createMockRecords({ someValue: 'abc' }),
+        { ...createMockRecords({ someValue: 'xyz' })[0]!, id: 'record-2', subjectId: 'group-1$subject-2' }
+      ];
+      const { result } = renderHook(() =>
+        useInstrumentVisualization({
+          params: { filterRecord: (record) => record.someValue === 'xyz', subjectId: 'testId' }
+        })
+      );
+      await waitFor(() => expect(result.current.records).toHaveLength(1));
+      expect(result.current.records[0]!.someValue).toBe('xyz');
+    });
+
+    // The per-instrument view takes its instrument from the route, so navigating between editions
+    // changes it underneath the hook rather than through setInstrumentId.
+    it('should adopt the instrument the route names when it changes underneath the hook', () => {
+      const { rerender, result } = renderHook(
+        ({ instrumentId }: { instrumentId: string }) => useInstrumentVisualization({ params: { instrumentId } }),
+        { initialProps: { instrumentId: 'hq-1' } }
+      );
+      expect(result.current.instrumentId).toBe('hq-1');
+      rerender({ instrumentId: 'hq-2' });
+      expect(result.current.instrumentId).toBe('hq-2');
+    });
   });
 });
diff --git a/apps/web/src/hooks/__tests__/useMeasureOptions.test.ts b/apps/web/src/hooks/__tests__/useMeasureOptions.test.ts
index d3731abc5..a7f76d5aa 100644
--- a/apps/web/src/hooks/__tests__/useMeasureOptions.test.ts
+++ b/apps/web/src/hooks/__tests__/useMeasureOptions.test.ts
@@ -1,5 +1,10 @@
 import { unilingualFormInstrument } from '@opendatacapture/instrument-stubs/forms';
-import type { AnyUnilingualFormInstrument } from '@opendatacapture/runtime-core';
+import { interactiveInstrument } from '@opendatacapture/instrument-stubs/interactive';
+import type {
+  AnyUnilingualFormInstrument,
+  AnyUnilingualInteractiveInstrument,
+  AnyUnilingualScalarInstrument
+} from '@opendatacapture/runtime-core';
 import { cleanup, renderHook } from '@testing-library/react';
 import { omit } from 'lodash-es';
 import { afterEach, describe, expect, it } from 'vitest';
@@ -21,7 +26,18 @@ function formInstrument({
   };
 }
 
-function measureOptionsFor(instrument: AnyUnilingualFormInstrument | null) {
+/**
+ * The interactive stub, retyped with the given measures. The stub's own type leaves `language` open,
+ * so it is narrowed here rather than at every call site.
+ */
+function interactiveWithMeasures(
+  measures: AnyUnilingualInteractiveInstrument['measures']
+): AnyUnilingualInteractiveInstrument {
+  const instance = interactiveInstrument.instance as AnyUnilingualInteractiveInstrument;
+  return { ...omit(instance, ['measures']), measures };
+}
+
+function measureOptionsFor(instrument: AnyUnilingualScalarInstrument | null) {
   return renderHook(() => useMeasureOptions(instrument)).result.current;
 }
 
@@ -74,6 +90,13 @@ describe('useMeasureOptions', () => {
     expect(measureOptionsFor(instrument)).toEqual([]);
   });
 
+  // An interactive instrument has no fields to borrow a label from, so the key is all there is.
+  it('should label a constant measure on a non-form instrument with its key', () => {
+    expect(
+      measureOptionsFor(interactiveWithMeasures({ favoriteNumber: { kind: 'const', ref: 'favoriteNumber' } }))
+    ).toEqual([{ key: 'favoriteNumber', label: 'favoriteNumber' }]);
+  });
+
   it('should find the fields of a form whose content is split into groups', () => {
     const instrument = formInstrument({
       content: [
diff --git a/apps/web/src/hooks/__tests__/useNavItems.test.ts b/apps/web/src/hooks/__tests__/useNavItems.test.ts
index 801642733..c52fe9d30 100644
--- a/apps/web/src/hooks/__tests__/useNavItems.test.ts
+++ b/apps/web/src/hooks/__tests__/useNavItems.test.ts
@@ -103,12 +103,22 @@ describe('useNavItems', () => {
 
   // The datahub is a parent over its views rather than a link of its own, so the subject listing is
   // reachable only as a child and the group itself carries no url to navigate to.
-  it('should offer the subject view nested under the data hub parent', () => {
-    const datahub = renderHook(() => useNavItems())
+  const datahubItem = () =>
+    renderHook(() => useNavItems())
       .result.current.flat()
       .find((item) => item.label === 'Data Hub');
+
+  it('should nest both views under the data hub parent, which is itself not a destination', () => {
+    const datahub = datahubItem();
     expect(datahub?.url).toBeUndefined();
-    expect(datahub?.children?.map((child) => child.url)).toStrictEqual(['/datahub/subjects']);
+    expect(datahub?.children?.map((child) => child.url)).toStrictEqual(['/datahub/subjects', '/datahub/instruments']);
+  });
+
+  // The two halves are gated independently, so a user who may read records but not the instrument
+  // catalog still gets a working menu rather than an empty group or no datahub at all.
+  it('should offer the subject view alone to a user who cannot read instruments', () => {
+    mocks.can.mockImplementation((action, subject) => !(action === 'read' && subject === 'Instrument'));
+    expect(datahubItem()?.children?.map((child) => child.url)).toStrictEqual(['/datahub/subjects']);
   });
 
   it('should omit the data hub entirely when the user cannot read both subjects and records', () => {
diff --git a/apps/web/src/hooks/__tests__/useRecordChartSeries.test.ts b/apps/web/src/hooks/__tests__/useRecordChartSeries.test.ts
new file mode 100644
index 000000000..20b5c4635
--- /dev/null
+++ b/apps/web/src/hooks/__tests__/useRecordChartSeries.test.ts
@@ -0,0 +1,186 @@
+import { renderHook } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { CHART_PALETTE_THEMES, MAX_CATEGORICAL_GROUPS, NEUTRAL_MARK, OTHER_GROUP_KEY } from '@/utils/chart-palette';
+
+import { useRecordChartSeries } from '../useRecordChartSeries';
+
+import type { InstrumentVisualizationRecord } from '../useInstrumentVisualization';
+
+const mocks = vi.hoisted(() => ({ theme: 'light' }));
+
+vi.mock('@douglasneuroinformatics/libui/hooks', () => ({
+  useTheme: () => [mocks.theme],
+  useTranslation: () => ({ t: (value: string | { en: string }) => (typeof value === 'string' ? value : value.en) })
+}));
+
+const recordOf = (overrides: Partial<InstrumentVisualizationRecord>): InstrumentVisualizationRecord => ({
+  __date__: new Date('2024-01-01'),
+  __id__: 'record-1',
+  __instrumentId__: 'instrument-1',
+  __method__: 'IN_PERSON',
+  __seriesId__: null,
+  __seriesName__: null,
+  __subjectId__: 'subject-1',
+  __time__: 0,
+  score: 1,
+  ...overrides
+});
+
+type Options = Parameters<typeof useRecordChartSeries>[0];
+
+const render = (options: Omit<Options, 'palette'> & { palette?: Options['palette'] }) =>
+  renderHook(() => useRecordChartSeries({ palette: 'default', ...options })).result.current;
+
+describe('useRecordChartSeries', () => {
+  afterEach(() => {
+    mocks.theme = 'light';
+  });
+
+  it('should produce nothing until a measure is chosen', () => {
+    const { series } = render({ colourBy: 'none', measure: undefined, records: [recordOf({})] });
+    expect(series).toStrictEqual([]);
+  });
+
+  it('should put every record in one series when no grouping is asked for', () => {
+    const { series } = render({
+      colourBy: 'none',
+      measure: 'score',
+      records: [recordOf({ __method__: 'IN_PERSON' }), recordOf({ __method__: 'REMOTE' })]
+    });
+    expect(series).toHaveLength(1);
+    expect(series[0]!.points).toHaveLength(2);
+  });
+
+  // Without this the palette control would be inert until a grouping was chosen.
+  it('should colour an ungrouped series from the chosen palette rather than a fixed grey', () => {
+    const records = [recordOf({})];
+    expect(render({ colourBy: 'none', measure: 'score', records }).series[0]!.color).toBe(
+      CHART_PALETTE_THEMES.default.light[0]
+    );
+    expect(render({ colourBy: 'none', measure: 'score', palette: 'jade', records }).series[0]!.color).toBe(
+      CHART_PALETTE_THEMES.jade.light[0]
+    );
+    expect(render({ colourBy: 'none', measure: 'score', records }).series[0]!.color).not.toBe(NEUTRAL_MARK.light);
+  });
+
+  it('should split records by collection method, which is why that column exists', () => {
+    const { series } = render({
+      colourBy: 'method',
+      measure: 'score',
+      records: [
+        recordOf({ __method__: 'REMOTE' }),
+        recordOf({ __method__: 'REMOTE' }),
+        recordOf({ __method__: 'IN_PERSON' })
+      ]
+    });
+    // The mocked translator echoes keys, so these are the session namespace's own labels — the
+    // point being that the method labels are reused rather than written again for the chart.
+    expect(series.map((item) => [item.label, item.points.length])).toStrictEqual([
+      ['session.type.remote', 2],
+      ['session.type.in-person', 1]
+    ]);
+  });
+
+  it('should label records collected outside a series as individual when grouping by series', () => {
+    const { series } = render({ colourBy: 'series', measure: 'score', records: [recordOf({})] });
+    expect(series[0]!.label).toBe('Individual');
+  });
+
+  // A record may name a series the caller cannot read, leaving the id as the only available label.
+  it('should fall back to the series id when the series cannot be named', () => {
+    const { series } = render({
+      colourBy: 'series',
+      measure: 'score',
+      records: [recordOf({ __seriesId__: 'series-unreadable', __seriesName__: null })]
+    });
+    expect(series[0]!.label).toBe('series-unreadable');
+  });
+
+  // A retrospective import may carry no session type, and those records still belong on the chart.
+  it('should group records with no collection method under an unknown group', () => {
+    const { series } = render({ colourBy: 'method', measure: 'score', records: [recordOf({ __method__: null })] });
+    expect(series[0]!.label).toBe('Unknown');
+  });
+
+  it('should draw from the dark column of the chosen palette on a dark page', () => {
+    mocks.theme = 'dark';
+    const { series } = render({ colourBy: 'none', measure: 'score', records: [recordOf({})] });
+    expect(series[0]!.color).toBe(CHART_PALETTE_THEMES.default.dark[0]);
+  });
+
+  // Colour must follow the group, never its rank, so the biggest group always takes the first slot
+  // and a group keeps its colour as the filters change the counts around it.
+  it('should order groups by size, so the palette is assigned deterministically', () => {
+    const { series } = render({
+      colourBy: 'series',
+      measure: 'score',
+      records: [
+        recordOf({ __seriesId__: 's1', __seriesName__: 'One' }),
+        recordOf({ __seriesId__: 's2', __seriesName__: 'Two' }),
+        recordOf({ __seriesId__: 's2', __seriesName__: 'Two' })
+      ]
+    });
+    expect(series.map((item) => item.label)).toStrictEqual(['Two', 'One']);
+  });
+
+  it('should fold the groups past the palette into one Other series rather than inventing hues', () => {
+    const records = Array.from({ length: MAX_CATEGORICAL_GROUPS + 2 }, (_, index) =>
+      recordOf({ __seriesId__: `s${index}`, __seriesName__: `Series ${index}` })
+    );
+    const { series } = render({ colourBy: 'series', measure: 'score', records });
+
+    expect(series).toHaveLength(MAX_CATEGORICAL_GROUPS + 1);
+    const folded = series.at(-1)!;
+    expect(folded.key).toBe(OTHER_GROUP_KEY);
+    expect(folded.label).toBe('Other (2)');
+    expect(folded.points).toHaveLength(2);
+  });
+
+  it('should report a measure holding text as non-numeric, since a scatter cannot plot it', () => {
+    const { isNumeric } = render({
+      colourBy: 'none',
+      measure: 'score',
+      records: [recordOf({ score: 'high' })]
+    });
+    expect(isNumeric).toBe(false);
+  });
+
+  it('should skip records with no value for the measure rather than plotting them as zero', () => {
+    const { series } = render({
+      colourBy: 'none',
+      measure: 'score',
+      records: [recordOf({ score: 1 }), recordOf({ score: null }), recordOf({ score: undefined })]
+    });
+    expect(series[0]!.points).toHaveLength(1);
+  });
+  // A record-array measure holds a list, which no axis can place — but the records beside it still
+  // belong on the chart.
+  it('should skip a value that is neither a number nor text rather than plotting it', () => {
+    const { series } = render({
+      colourBy: 'none',
+      measure: 'score',
+      records: [recordOf({ score: 1 }), recordOf({ score: [{ item: 1 }] })]
+    });
+    expect(series[0]!.points).toHaveLength(1);
+  });
+
+  // The palette is a search param, so a shared link has to reproduce the colours it was made with.
+  it('should draw a group from the chosen palette theme rather than always the default', () => {
+    const records = [recordOf({ __method__: 'REMOTE' })];
+    const asDefault = render({ colourBy: 'method', measure: 'score', records });
+    const asBerry = render({ colourBy: 'method', measure: 'score', palette: 'berry', records });
+
+    expect(asDefault.series[0]!.color).toBe(CHART_PALETTE_THEMES.default.light[0]);
+    expect(asBerry.series[0]!.color).toBe(CHART_PALETTE_THEMES.berry.light[0]);
+  });
+
+  // Colour follows the entity, not its rank, so the folded tail stays outside every theme.
+  it('should keep the folded tail neutral whichever palette is chosen', () => {
+    const records = Array.from({ length: MAX_CATEGORICAL_GROUPS + 2 }, (_, index) =>
+      recordOf({ __seriesId__: `s${index}`, __seriesName__: `Series ${index}` })
+    );
+    const { series } = render({ colourBy: 'series', measure: 'score', palette: 'jade', records });
+    expect(series.at(-1)!.color).toBe(NEUTRAL_MARK.light);
+  });
+});
diff --git a/apps/web/src/hooks/__tests__/useRecordMetadataColumns.test.tsx b/apps/web/src/hooks/__tests__/useRecordMetadataColumns.test.tsx
new file mode 100644
index 000000000..fb75c4667
--- /dev/null
+++ b/apps/web/src/hooks/__tests__/useRecordMetadataColumns.test.tsx
@@ -0,0 +1,116 @@
+import type { ReactNode } from 'react';
+
+import { i18n } from '@douglasneuroinformatics/libui/i18n';
+import type { SessionType } from '@opendatacapture/schemas/session';
+import { cleanup, fireEvent, render, renderHook, screen } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { useRecordMetadataColumns } from '../useRecordMetadataColumns';
+
+import type { InstrumentVisualizationRecord } from '../useInstrumentVisualization';
+
+import '@/services/i18n';
+
+const record = (overrides: Partial<InstrumentVisualizationRecord> = {}): InstrumentVisualizationRecord => ({
+  __date__: new Date('2025-01-01'),
+  __id__: 'record-1',
+  __instrumentId__: 'instrument-1',
+  __method__: 'IN_PERSON',
+  __seriesId__: null,
+  __seriesName__: null,
+  __subjectId__: 'subject-1',
+  __time__: 0,
+  ...overrides
+});
+
+const columns = (omitSeries = false) => renderHook(() => useRecordMetadataColumns({ omitSeries })).result.current;
+
+/** Renders one column's cell against a record, the way the table would. */
+const renderCell = (columnId: string, value: unknown, original: InstrumentVisualizationRecord) => {
+  const column = columns().find((candidate) => candidate.id === columnId)!;
+  const cell = (column as { cell: (ctx: unknown) => ReactNode }).cell;
+  render(<>{cell({ getValue: () => value, row: { original } })}</>);
+};
+
+/** Renders one column's header the way the table would, returning its sort toggle. */
+const renderHeader = (columnId: string, omitSeries = false) => {
+  const column = columns(omitSeries).find((candidate) => candidate.id === columnId)!;
+  const header = (column as { header: (ctx: unknown) => ReactNode }).header;
+  const toggleSorting = vi.fn();
+  render(<>{header({ column: { getIsSorted: () => false, toggleSorting } })}</>);
+  return toggleSorting;
+};
+
+describe('useRecordMetadataColumns', () => {
+  beforeEach(() => {
+    i18n.changeLanguage('en');
+  });
+
+  afterEach(cleanup);
+
+  it('should show both provenance columns under the names the export uses', () => {
+    expect(columns().map((column) => column.id)).toStrictEqual(['__method__', '__seriesName__']);
+    expect(renderHeader('__method__') && screen.getByRole('button').textContent).toBe('COLLECTION_METHOD');
+    cleanup();
+    expect(renderHeader('__seriesName__') && screen.getByRole('button').textContent).toBe('SERIES');
+  });
+
+  // Every row on a series' own page names that same series, so the column says nothing there.
+  it('should omit the series column when asked', () => {
+    expect(columns(true).map((column) => column.id)).toStrictEqual(['__method__']);
+  });
+
+  // These sit mid-table beside sortable columns, so a plain label would read as the odd one out.
+  it.each(['__method__', '__seriesName__'])('should let the %s column be sorted from its header', (columnId) => {
+    const toggleSorting = renderHeader(columnId);
+    fireEvent.click(screen.getByRole('button'));
+    expect(toggleSorting).toHaveBeenCalled();
+  });
+
+  it('should translate the collection method rather than showing the stored enum', () => {
+    renderCell('__method__', 'REMOTE', record({ __method__: 'REMOTE' }));
+    expect(screen.getByTestId('record-cell-collection-method').textContent).toBe('Remote');
+  });
+
+  // A record whose session was deleted reads back without a type, which must not render as blank
+  // or as "null".
+  it('should name the absence for a record whose collection method is unknown', () => {
+    renderCell('__method__', null, record({ __method__: null }));
+    expect(screen.getByTestId('record-cell-collection-method').textContent).toBe('None');
+  });
+
+  it('should show the series name when the record was collected under one', () => {
+    renderCell('__seriesName__', 'Happiness Series', record({ __seriesName__: 'Happiness Series' }));
+    expect(screen.getByTestId('record-cell-series').textContent).toBe('Happiness Series');
+  });
+
+  // The presence of a series name is itself the individual-vs-series answer, so the absence has to
+  // read as "none" rather than as missing data.
+  it('should name the absence for a record collected individually', () => {
+    renderCell('__seriesName__', null, record());
+    expect(screen.getByTestId('record-cell-series').textContent).toBe('None');
+  });
+
+  it('should filter the method column on the stored value, not the translated label', () => {
+    const column = columns().find((candidate) => candidate.id === '__method__')!;
+    const filterFn = column.filterFn as (row: unknown, id: string, filter: SessionType[]) => boolean;
+    const row = { getValue: () => 'IN_PERSON' };
+    expect(filterFn(row, '__method__', ['IN_PERSON'])).toBe(true);
+    expect(filterFn(row, '__method__', ['REMOTE'])).toBe(false);
+  });
+
+  // Filtered on the id rather than the displayed name, since a name is not a stable identity.
+  it('should filter the series column on the series id', () => {
+    const column = columns().find((candidate) => candidate.id === '__seriesName__')!;
+    const filterFn = column.filterFn as (row: unknown, id: string, filter: string[]) => boolean;
+    const inSeries = { original: record({ __seriesId__: 'series-1', __seriesName__: 'Happiness Series' }) };
+    expect(filterFn(inSeries, '__seriesName__', ['series-1'])).toBe(true);
+    expect(filterFn(inSeries, '__seriesName__', ['series-2'])).toBe(false);
+  });
+
+  it('should match a record collected outside any series against the no-series option', () => {
+    const column = columns().find((candidate) => candidate.id === '__seriesName__')!;
+    const filterFn = column.filterFn as (row: unknown, id: string, filter: string[]) => boolean;
+    expect(filterFn({ original: record() }, '__seriesName__', [''])).toBe(true);
+  });
+});
diff --git a/apps/web/src/hooks/useCollectionMethodLabels.ts b/apps/web/src/hooks/useCollectionMethodLabels.ts
new file mode 100644
index 000000000..5f8d3ce8c
--- /dev/null
+++ b/apps/web/src/hooks/useCollectionMethodLabels.ts
@@ -0,0 +1,17 @@
+import { useTranslation } from '@douglasneuroinformatics/libui/hooks';
+import type { SessionType } from '@opendatacapture/schemas/session';
+
+/**
+ * Display labels for a record's data collection method, keyed by the stored value.
+ *
+ * Reuses the copy the session form already shows for the same concept, so a session started as
+ * "In-Person" is not later described with a different word in the datahub.
+ */
+export function useCollectionMethodLabels(): { [K in SessionType]: string } {
+  const { t } = useTranslation();
+  return {
+    IN_PERSON: t('session.type.in-person'),
+    REMOTE: t('session.type.remote'),
+    RETROSPECTIVE: t('session.type.retrospective')
+  };
+}
diff --git a/apps/web/src/hooks/useGraphLines.ts b/apps/web/src/hooks/useGraphLines.ts
index b22a887f8..a4e779348 100644
--- a/apps/web/src/hooks/useGraphLines.ts
+++ b/apps/web/src/hooks/useGraphLines.ts
@@ -1,50 +1,43 @@
-import { useEffect, useState } from 'react';
+import { useMemo } from 'react';
 
 import type { ListboxDropdownOption } from '@douglasneuroinformatics/libui/components';
-import { useTranslation } from '@douglasneuroinformatics/libui/hooks';
+import { useTheme, useTranslation } from '@douglasneuroinformatics/libui/hooks';
 
 import type { LineGraphLine } from '@/components/LineGraph';
-
-const COLOR_PALETTE: readonly string[] = [
-  '#D81B60',
-  '#1E88E5',
-  '#FD08FA',
-  '#A06771',
-  '#353A9B',
-  '#D90323',
-  '#9C9218',
-  '#CF0583',
-  '#4075A3'
-];
+import { getMeasureColor } from '@/utils/chart-palette';
+import type { ChartPaletteName } from '@/utils/chart-palette';
+import { resolveTheme } from '@/utils/chart-theme';
 
 type UseGraphLinesOptions = {
+  palette: ChartPaletteName;
   selectedMeasures: ListboxDropdownOption[];
 };
 
-export function useGraphLines({ selectedMeasures }: UseGraphLinesOptions) {
+export function useGraphLines({ palette, selectedMeasures }: UseGraphLinesOptions) {
   const { resolvedLanguage, t } = useTranslation('common');
-  const [lines, setLines] = useState<LineGraphLine[]>([]);
+  const [theme] = useTheme();
+  const mode = resolveTheme(theme);
 
-  useEffect(() => {
+  return useMemo(() => {
     const lines: LineGraphLine[] = [];
-    for (let i = 0; i < selectedMeasures.length; i++) {
-      const measure = selectedMeasures[i]!;
+    for (const [index, measure] of selectedMeasures.entries()) {
+      const stroke = getMeasureColor(index, mode, palette);
       lines.push({
         name: measure.label,
-        stroke: COLOR_PALETTE[i],
+        stroke,
         val: measure.key
       });
       lines.push({
         legendType: 'none',
         name: `${measure.label} (${t('groupTrend')})`,
-        stroke: COLOR_PALETTE[i],
+        stroke,
         strokeDasharray: '5 5',
         strokeWidth: 0.5,
         val: measure.key + 'Group'
       });
     }
-    setLines(lines);
-  }, [resolvedLanguage, selectedMeasures]);
-
-  return lines;
+    return lines;
+    // Keyed on `resolvedLanguage` rather than `t`, which is a fresh closure every render and would
+    // make this memo recompute always. The language is what actually changes the trend label.
+  }, [mode, palette, resolvedLanguage, selectedMeasures]);
 }
diff --git a/apps/web/src/hooks/useInstrumentHubFacets.ts b/apps/web/src/hooks/useInstrumentHubFacets.ts
new file mode 100644
index 000000000..7fd8e655c
--- /dev/null
+++ b/apps/web/src/hooks/useInstrumentHubFacets.ts
@@ -0,0 +1,64 @@
+import { useMemo } from 'react';
+
+import { useTranslation } from '@douglasneuroinformatics/libui/hooks';
+import { useParams } from '@tanstack/react-router';
+
+import { useInstrumentInfoById } from '@/hooks/useInstrumentInfoById';
+import { useInstrumentInfoQuery } from '@/hooks/useInstrumentInfoQuery';
+import { useInstrumentRecords } from '@/hooks/useInstrumentRecords';
+import { useAppStore } from '@/store';
+import { getEditionOptions } from '@/utils/instrument-editions';
+
+/** Stands for "collected outside any series" wherever a series id is expected */
+const NO_SERIES = '';
+
+const INSTRUMENT_HUB_ROUTE = '/_app/datahub/instruments/$instrumentId';
+
+/**
+ * What the instrument hub's header and filter controls need: the instrument's title, its sibling
+ * editions, and the series its records were collected under.
+ *
+ * Deliberately built from the instrument catalog and the record list rather than from
+ * `useInstrumentVisualization`, because that hook interprets the instrument's bundle — which runs
+ * the bundle as a module, and validates it in development. Calling it here as well as in the active
+ * tab would do that twice per page for a title and two dropdowns that need none of it.
+ */
+export function useInstrumentHubFacets() {
+  const { instrumentId } = useParams({ from: INSTRUMENT_HUB_ROUTE });
+  const currentGroup = useAppStore((store) => store.currentGroup);
+  const { t } = useTranslation();
+
+  const infoQuery = useInstrumentInfoQuery({ params: { allEditions: true } });
+  const recordsQuery = useInstrumentRecords({ params: { groupId: currentGroup?.id, instrumentId } });
+
+  const seriesInfoById = useInstrumentInfoById({ kind: 'SERIES' });
+
+  const editionLabel = t({ en: 'Edition', es: 'Edición', fr: 'Édition' });
+  const editionOptions = useMemo(
+    () => getEditionOptions(infoQuery.data ?? [], instrumentId, editionLabel),
+    [infoQuery.data, instrumentId, editionLabel]
+  );
+
+  const info = useMemo(
+    () => infoQuery.data?.find((entry) => entry.id === instrumentId) ?? null,
+    [infoQuery.data, instrumentId]
+  );
+  const title = info?.details.title ?? null;
+  // A series orchestrates records across the instruments it composes, so its page is a different
+  // shape: no shared measures, and therefore no measure columns and no chart.
+  const isSeries = info?.kind === 'SERIES';
+
+  /** The series actually present for this instrument, which is what the filter can offer */
+  const seriesOptions = useMemo(() => {
+    const options = new Map<string, null | string>();
+    for (const record of recordsQuery.data ?? []) {
+      const seriesId = record.seriesInstrumentId ?? null;
+      options.set(seriesId ?? NO_SERIES, seriesId ? (seriesInfoById[seriesId]?.title ?? null) : null);
+    }
+    return options;
+  }, [recordsQuery.data, seriesInfoById]);
+
+  return { editionOptions, isSeries, seriesOptions, title };
+}
+
+export { NO_SERIES };
diff --git a/apps/web/src/hooks/useInstrumentHubRecords.ts b/apps/web/src/hooks/useInstrumentHubRecords.ts
new file mode 100644
index 000000000..6f9861b7f
--- /dev/null
+++ b/apps/web/src/hooks/useInstrumentHubRecords.ts
@@ -0,0 +1,51 @@
+import { useCallback } from 'react';
+
+import { useParams, useSearch } from '@tanstack/react-router';
+
+import { NO_SERIES, useInstrumentHubFacets } from '@/hooks/useInstrumentHubFacets';
+import { useInstrumentVisualization } from '@/hooks/useInstrumentVisualization';
+import type { InstrumentVisualizationRecord } from '@/hooks/useInstrumentVisualization';
+
+const INSTRUMENT_HUB_ROUTE = '/_app/datahub/instruments/$instrumentId';
+
+/**
+ * Every record collected with the instrument named by the route, narrowed by the search params the
+ * parent route owns.
+ *
+ * Both tabs read through this, and the filter is handed to the visualization hook rather than
+ * applied afterwards, so the table, the chart and the download always describe the same set.
+ */
+export function useInstrumentHubRecords() {
+  const { instrumentId } = useParams({ from: INSTRUMENT_HUB_ROUTE });
+  const { methods, minDate, series } = useSearch({ from: INSTRUMENT_HUB_ROUTE });
+
+  const filterRecord = useCallback(
+    (record: InstrumentVisualizationRecord) => {
+      // An absent `methods` filter means every method, which an empty array deliberately does not.
+      // A record whose session was deleted carries no method, so it matches no explicit selection —
+      // it survives the unfiltered view and is excluded as soon as the filter narrows.
+      if (methods && (!record.__method__ || !methods.includes(record.__method__))) {
+        return false;
+      }
+      // An absent `series` filter means every series, which is not an empty selection.
+      if (series && !series.includes(record.__seriesId__ ?? NO_SERIES)) {
+        return false;
+      }
+      return true;
+    },
+    [methods, series]
+  );
+
+  const { isSeries } = useInstrumentHubFacets();
+
+  // A series is named through `seriesInstrumentId`; records never carry it as their `instrumentId`,
+  // so asking for it that way would always come back empty.
+  return useInstrumentVisualization({
+    params: {
+      filterRecord,
+      instrumentId: isSeries ? undefined : instrumentId,
+      minDate,
+      seriesInstrumentId: isSeries ? instrumentId : undefined
+    }
+  });
+}
diff --git a/apps/web/src/hooks/useInstrumentInfoById.ts b/apps/web/src/hooks/useInstrumentInfoById.ts
new file mode 100644
index 000000000..57c05c701
--- /dev/null
+++ b/apps/web/src/hooks/useInstrumentInfoById.ts
@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+
+import type { InstrumentKind } from '@opendatacapture/runtime-core';
+
+import { useInstrumentInfoQuery } from '@/hooks/useInstrumentInfoQuery';
+
+type InstrumentInfoById = { [id: string]: { edition: null | number; kind: InstrumentKind; title: string } };
+
+/**
+ * The accessible instrument catalog keyed by id, narrowed by the same params the info query takes.
+ *
+ * A record names the instrument that collected it by id alone, so every view that shows records
+ * from more than one instrument — a series' member list, a series column, the collection-method
+ * facets — has to resolve those ids against the catalog. They differ only in which slice of it they
+ * ask for, which is why that is the parameter rather than three near-identical hooks.
+ */
+export function useInstrumentInfoById<TKind extends InstrumentKind>(params?: {
+  allEditions?: boolean;
+  kind?: TKind;
+  subjectId?: string;
+}): InstrumentInfoById {
+  const query = useInstrumentInfoQuery({ params });
+  return useMemo(
+    () =>
+      Object.fromEntries(
+        (query.data ?? []).map((info) => [
+          info.id,
+          {
+            edition: info.kind !== 'SERIES' ? info.internal.edition : null,
+            kind: info.kind,
+            title: info.details.title
+          }
+        ])
+      ),
+    [query.data]
+  );
+}
diff --git a/apps/web/src/hooks/useInstrumentKindLabels.ts b/apps/web/src/hooks/useInstrumentKindLabels.ts
new file mode 100644
index 000000000..c1f0c0828
--- /dev/null
+++ b/apps/web/src/hooks/useInstrumentKindLabels.ts
@@ -0,0 +1,18 @@
+import { useTranslation } from '@douglasneuroinformatics/libui/hooks';
+import type { InstrumentKind } from '@opendatacapture/runtime-core';
+
+/**
+ * Display labels for an instrument's kind, keyed by the stored value.
+ *
+ * Keyed over `InstrumentKind` rather than a loose record, so a kind added to the enum fails to
+ * compile here instead of reaching the screen as its raw stored value.
+ */
+export function useInstrumentKindLabels(): { [K in InstrumentKind]: string } {
+  const { t } = useTranslation();
+  return {
+    FILE: t({ en: 'File', es: 'Archivo', fr: 'Fichier' }),
+    FORM: t({ en: 'Form', es: 'Formulario', fr: 'Formulaire' }),
+    INTERACTIVE: t({ en: 'Interactive', es: 'Interactivo', fr: 'Interactif' }),
+    SERIES: t({ en: 'Series', es: 'Serie', fr: 'Série' })
+  };
+}
diff --git a/apps/web/src/hooks/useInstrumentRecordSummaryQuery.ts b/apps/web/src/hooks/useInstrumentRecordSummaryQuery.ts
new file mode 100644
index 000000000..753aa3a7c
--- /dev/null
+++ b/apps/web/src/hooks/useInstrumentRecordSummaryQuery.ts
@@ -0,0 +1,28 @@
+import { $InstrumentRecordSummary } from '@opendatacapture/schemas/instrument-records';
+import { queryOptions, useSuspenseQuery } from '@tanstack/react-query';
+import axios from 'axios';
+
+type InstrumentRecordSummaryQueryParams = {
+  /** Count what each series orchestrated instead of what each scalar instrument collected */
+  bySeries?: boolean;
+  groupId?: string;
+};
+
+export const instrumentRecordSummaryQueryOptions = ({
+  params
+}: { params?: InstrumentRecordSummaryQueryParams } = {}) => {
+  return queryOptions({
+    queryFn: async () => {
+      const path = params?.bySeries ? 'by-series' : 'by-instrument';
+      const response = await axios.get(`/v1/instrument-records/summary/${path}`, {
+        params: { groupId: params?.groupId }
+      });
+      return $InstrumentRecordSummary.array().parse(response.data);
+    },
+    queryKey: ['instrument-record-summary', params?.groupId, params?.bySeries ?? false]
+  });
+};
+
+export function useInstrumentRecordSummaryQuery({ params }: { params?: InstrumentRecordSummaryQueryParams } = {}) {
+  return useSuspenseQuery(instrumentRecordSummaryQueryOptions({ params }));
+}
diff --git a/apps/web/src/hooks/useInstrumentVisualization.ts b/apps/web/src/hooks/useInstrumentVisualization.ts
index 212bdf177..3247a77d0 100644
--- a/apps/web/src/hooks/useInstrumentVisualization.ts
+++ b/apps/web/src/hooks/useInstrumentVisualization.ts
@@ -3,29 +3,70 @@ import { useEffect, useMemo, useState } from 'react';
 import { toBasicISOString } from '@douglasneuroinformatics/libjs';
 import { useDownload, useNotificationsStore, useTranslation } from '@douglasneuroinformatics/libui/hooks';
 import type { AnyUnilingualScalarInstrument, InstrumentKind } from '@opendatacapture/runtime-core';
+import { DEFAULT_GROUP_NAME } from '@opendatacapture/schemas/core';
 import type { TranslatedInstrumentInfo } from '@opendatacapture/schemas/instrument';
+import type { SessionType } from '@opendatacapture/schemas/session';
 import { removeSubjectIdScope } from '@opendatacapture/subject-utils';
 import { mapValues, omit } from 'lodash-es';
 import { unparse } from 'papaparse';
 
 import { useInstrument } from '@/hooks/useInstrument';
+import { useInstrumentInfoById } from '@/hooks/useInstrumentInfoById';
 import { useInstrumentInfoQuery } from '@/hooks/useInstrumentInfoQuery';
 import { useInstrumentRecords } from '@/hooks/useInstrumentRecords';
 import { useAppStore } from '@/store';
 import { downloadSubjectTableExcel } from '@/utils/excel';
+import { getEditionOptions } from '@/utils/instrument-editions';
 import { formatRecordValue } from '@/utils/record-value';
 
 type InstrumentVisualizationRecord = {
   [key: string]: unknown;
   __date__: Date;
   __id__: string;
+  /** The scalar instrument actually administered, which varies across a series */
+  __instrumentId__: string;
+  /** The data collection method, from the session that collected the record */
+  __method__: null | SessionType;
+  /** The id of the series that collected the record, or null if it was collected individually */
+  __seriesId__: null | string;
+  /** That series' title, resolved for display; null if collected individually */
+  __seriesName__: null | string;
+  __subjectId__: string;
   __time__: number;
 };
 
+/** The record fields that become fixed metadata columns rather than measure columns */
+const EXPORT_METADATA_KEYS = [
+  '__date__',
+  '__id__',
+  '__instrumentId__',
+  '__method__',
+  '__seriesId__',
+  '__seriesName__',
+  '__subjectId__',
+  '__time__',
+  'username'
+] as const;
+
 type UseInstrumentVisualizationOptions = {
   params: {
+    /**
+     * Narrows the records every consumer sees, the export included — which is what keeps a filtered
+     * table and its download describing the same set. Must be referentially stable.
+     */
+    filterRecord?: (record: InstrumentVisualizationRecord) => boolean;
+    /** Fixes the instrument rather than leaving it to be chosen, for the per-instrument view */
+    instrumentId?: string;
     kind?: InstrumentKind;
-    subjectId: string;
+    /** Drives the earliest collection date externally, for a view holding it in the URL */
+    minDate?: Date;
+    /**
+     * Every record a series orchestrated, instead of one instrument's. The records then span several
+     * scalar instruments, so there is no single instrument to interpret and no coherent wide shape.
+     */
+    seriesInstrumentId?: string;
+    /** Omitted by the per-instrument view, which spans every subject */
+    subjectId?: string;
   };
 };
 
@@ -37,28 +78,50 @@ export function useInstrumentVisualization({ params }: UseInstrumentVisualizatio
   const notifications = useNotificationsStore();
   const { t } = useTranslation('common');
 
-  const [records, setRecords] = useState<InstrumentVisualizationRecord[]>([]);
-  const [minDate, setMinDate] = useState<Date | null>(null);
-  const [instrumentId, setInstrumentId] = useState<null | string>(null);
+  const [allRecords, setRecords] = useState<InstrumentVisualizationRecord[]>([]);
+  const [selectedMinDate, setMinDate] = useState<Date | null>(null);
+  const [instrumentId, setInstrumentId] = useState<null | string>(params.instrumentId ?? null);
+
+  // A caller holding the date in the URL owns it outright; everyone else drives it with setMinDate.
+  const minDate = params.minDate ?? selectedMinDate;
+
+  const filterRecord = params.filterRecord;
+  const records = useMemo(
+    () => (filterRecord ? allRecords.filter(filterRecord) : allRecords),
+    [allRecords, filterRecord]
+  );
+
+  // The per-instrument view takes its instrument from the route, so a navigation between editions
+  // changes it underneath this hook rather than through setInstrumentId.
+  useEffect(() => {
+    if (params.instrumentId) {
+      setInstrumentId(params.instrumentId);
+    }
+  }, [params.instrumentId]);
 
   const instrument = useInstrument(instrumentId) as AnyUnilingualScalarInstrument;
+  const seriesInfoById = useInstrumentInfoById({ kind: 'SERIES' });
+  // Every edition, because a record names the exact one administered — and across a series the
+  // export spans several instruments, so each row has to say which produced it.
+  const instrumentInfoById = useInstrumentInfoById({ allEditions: true });
 
   const instrumentInfoQuery = useInstrumentInfoQuery({
     params: { allEditions: true, kind: params.kind, subjectId: params.subjectId }
   });
   const recordsQuery = useInstrumentRecords({
-    enabled: instrumentId !== null,
+    enabled: instrumentId !== null || params.seriesInstrumentId !== undefined,
     params: {
       groupId: currentGroup?.id,
-      instrumentId: instrumentId!,
+      instrumentId: params.seriesInstrumentId ? undefined : instrumentId!,
       kind: params.kind,
       minDate: minDate ?? undefined,
+      seriesInstrumentId: params.seriesInstrumentId,
       subjectId: params.subjectId
     }
   });
 
   const dl = (option: 'CSV' | 'CSV Long' | 'Excel' | 'Excel Long' | 'JSON' | 'TSV' | 'TSV Long') => {
-    if (!instrument) {
+    if (!instrument && !params.seriesInstrumentId) {
       notifications.addNotification({ message: t('errors.noInstrumentSelected'), type: 'error' });
       return;
     } else if (records.length === 0) {
@@ -66,86 +129,97 @@ export function useInstrumentVisualization({ params }: UseInstrumentVisualizatio
       return;
     }
 
-    const baseFilename = `${currentUser!.username}_${instrument.internal.name}_${
-      instrument.internal.edition
-    }_${new Date().toISOString()}`;
+    const instrumentName = instrument ? `${instrument.internal.name}_${instrument.internal.edition}` : 'series';
+    const baseFilename = `${currentUser!.username}_${instrumentName}_${new Date().toISOString()}`;
 
-    const exportRecords = records.map((record) =>
-      mapValues(omit(record, ['__time__', '__id__']), (value) =>
+    // One subject's worth of records is named for the subject; an instrument's whole set, which
+    // spans subjects, is named for the instrument.
+    const sheetName = params.subjectId ? removeSubjectIdScope(params.subjectId) : instrumentName;
+
+    // Split each record into the metadata every exported row repeats and the measures that vary by
+    // row, so the long format cannot mistake a metadata field for a measure.
+    const exportRecords = records.map((record) => ({
+      measures: mapValues(omit(record, EXPORT_METADATA_KEYS), (value) =>
         value instanceof Set ? formatRecordValue(value) : value
-      )
-    );
+      ),
+      meta: {
+        collectionMethod: record.__method__,
+        date: toBasicISOString(record.__date__),
+        groupId: currentGroup ? currentGroup.id : DEFAULT_GROUP_NAME,
+        instrumentEdition: instrumentInfoById[record.__instrumentId__]?.edition ?? null,
+        // Falls back to the id so a row is never anonymous, even if the catalog no longer lists it.
+        instrumentName: instrumentInfoById[record.__instrumentId__]?.title ?? record.__instrumentId__,
+        seriesId: record.__seriesId__,
+        seriesName: record.__seriesName__,
+        subjectId: removeSubjectIdScope(record.__subjectId__),
+        username: record.username as string
+      }
+    }));
+
+    /** Built imperatively because the column order is the header order, which sorting would discard. */
+    const withMetadataColumns = (meta: (typeof exportRecords)[number]['meta']) => {
+      const row: { [key: string]: any } = {};
+      row.GroupID = meta.groupId;
+      row.SubjectID = meta.subjectId;
+      row.InstrumentName = meta.instrumentName;
+      row.InstrumentEdition = meta.instrumentEdition;
+      row.Date = meta.date;
+      row.CollectionMethod = meta.collectionMethod;
+      row.SeriesID = meta.seriesId;
+      row.SeriesName = meta.seriesName;
+      row.Username = meta.username;
+      return row;
+    };
+
+    /**
+     * Every measure any record carries, so a set spanning several instruments keeps all of their
+     * fields. Each row is given the whole key set because papaparse takes its header from the first
+     * row alone — without this, a series export silently dropped every column the first record's
+     * instrument happened not to measure.
+     */
+    const allMeasureKeys = Array.from(new Set(exportRecords.flatMap(({ measures }) => Object.keys(measures))));
 
     const makeWideRows = () => {
-      const columnNames = Object.keys(exportRecords[0]!);
-      return exportRecords.map((item) => {
-        const obj: { [key: string]: any } = {
-          GroupID: currentGroup ? currentGroup.id : 'root',
-          subjectId: removeSubjectIdScope(params.subjectId)
-        };
-        for (const key of columnNames) {
-          const val = item[key];
-          if (key === '__date__') {
-            obj.Date = toBasicISOString(val as Date);
-            continue;
-          }
-          if (key === 'username') {
-            obj.Username = val;
-            continue;
-          }
-          obj[key] = typeof val === 'object' ? JSON.stringify(val) : val;
+      return exportRecords.map(({ measures, meta }) => {
+        const row = withMetadataColumns(meta);
+        for (const key of allMeasureKeys) {
+          const value = measures[key];
+          // An instrument that does not measure this field leaves the cell empty rather than
+          // claiming a value it never collected.
+          row[key] = value === undefined ? '' : typeof value === 'object' ? JSON.stringify(value) : value;
         }
-        return obj;
+        return row;
       });
     };
 
-    const makeLongRows = () => {
-      const longRecord: { [key: string]: any }[] = [];
-
-      exportRecords.forEach((item) => {
-        let date: Date;
-        let username = 'N/A';
+    /** A measure holding an array of objects contributes one row per nested key. */
+    const expandMeasure = (measureKey: string, measureValue: unknown): { value: unknown; variable: string }[] => {
+      if (!Array.isArray(measureValue)) {
+        return [{ value: measureValue, variable: measureKey }];
+      }
+      return measureValue.flatMap((arrayItem) =>
+        Object.entries(arrayItem as object).map(([arrayKey, arrayValue]) => ({
+          value: arrayValue as unknown,
+          variable: `${measureKey}-${arrayKey}`
+        }))
+      );
+    };
 
-        Object.entries(item).forEach(([objKey, objVal]) => {
-          if (objKey === '__date__') {
-            date = objVal as Date;
-            return;
-          }
-          if (objKey === 'username') {
-            username = objVal as string;
-            return;
-          }
+    const makeLongRows = () => {
+      const longRecords: { [key: string]: any }[] = [];
 
-          if (Array.isArray(objVal)) {
-            objVal.forEach((arrayItem) => {
-              Object.entries(arrayItem as object).forEach(([arrKey, arrItem]) => {
-                longRecord.push({
-                  GroupID: currentGroup ? currentGroup.id : 'root',
-                  // eslint-disable-next-line perfectionist/sort-objects
-                  Date: toBasicISOString(date),
-                  SubjectID: removeSubjectIdScope(params.subjectId),
-                  Username: username,
-                  Variable: `${objKey}-${arrKey}`,
-                  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, perfectionist/sort-objects
-                  Value: arrItem
-                });
-              });
-            });
-          } else {
-            longRecord.push({
-              GroupID: currentGroup ? currentGroup.id : 'root',
-              // eslint-disable-next-line perfectionist/sort-objects
-              Date: toBasicISOString(date),
-              SubjectID: removeSubjectIdScope(params.subjectId),
-              Username: username,
-              Value: objVal,
-              Variable: objKey
-            });
+      for (const { measures, meta } of exportRecords) {
+        for (const [measureKey, measureValue] of Object.entries(measures)) {
+          for (const { value, variable } of expandMeasure(measureKey, measureValue)) {
+            const row = withMetadataColumns(meta);
+            row.Variable = variable;
+            row.Value = value;
+            longRecords.push(row);
           }
-        });
-      });
+        }
+      }
 
-      return longRecord;
+      return longRecords;
     };
 
     const parseHelper = (rows: unknown[], delimiter: string) => {
@@ -178,19 +252,17 @@ export function useInstrumentVisualization({ params }: UseInstrumentVisualizatio
       }
       case 'Excel': {
         const rows = makeWideRows();
-        downloadSubjectTableExcel(`${baseFilename}.xlsx`, rows, removeSubjectIdScope(params.subjectId));
+        downloadSubjectTableExcel(`${baseFilename}.xlsx`, rows, sheetName);
         break;
       }
       case 'Excel Long': {
         const rows = makeLongRows();
-        downloadSubjectTableExcel(`${baseFilename}.xlsx`, rows, removeSubjectIdScope(params.subjectId));
+        downloadSubjectTableExcel(`${baseFilename}.xlsx`, rows, sheetName);
         break;
       }
       case 'JSON': {
-        exportRecords.map((item) => {
-          item.subjectID = params.subjectId;
-        });
-        void download(`${baseFilename}.json`, () => Promise.resolve(JSON.stringify(exportRecords, null, 2)));
+        const rows = makeWideRows();
+        void download(`${baseFilename}.json`, () => Promise.resolve(JSON.stringify(rows, null, 2)));
         break;
       }
       case 'TSV':
@@ -217,10 +289,16 @@ export function useInstrumentVisualization({ params }: UseInstrumentVisualizatio
       if (recordsQuery.data) {
         const records: InstrumentVisualizationRecord[] = recordsQuery.data.map((record) => {
           const props = record.data && typeof record.data === 'object' ? record.data : {};
+          const seriesId = record.seriesInstrumentId ?? null;
 
           return {
             __date__: record.date,
             __id__: record.id,
+            __instrumentId__: record.instrumentId,
+            __method__: record.session?.type ?? null,
+            __seriesId__: seriesId,
+            __seriesName__: seriesId ? (seriesInfoById[seriesId]?.title ?? null) : null,
+            __subjectId__: record.subjectId,
             __time__: record.date.getTime(),
             username: record.session?.user?.username ?? 'N/A',
             ...record.computedMeasures,
@@ -241,7 +319,7 @@ export function useInstrumentVisualization({ params }: UseInstrumentVisualizatio
         type: 'error'
       });
     }
-  }, [recordsQuery.data]);
+  }, [recordsQuery.data, seriesInfoById]);
 
   const instrumentOptions: { [key: string]: string } = useMemo(() => {
     // only show the latest edition of each instrument; older editions are selectable via editionOptions
@@ -262,24 +340,15 @@ export function useInstrumentVisualization({ params }: UseInstrumentVisualizatio
     return options;
   }, [instrumentInfoQuery.data]);
 
-  const editionOptions: { [key: string]: string } = useMemo(() => {
-    const infos = instrumentInfoQuery.data ?? [];
-    const selected = infos.find((info) => info.id === instrumentId);
-    if (!selected || selected.kind === 'SERIES') {
-      return {};
-    }
-    const selectedName = selected.internal.name;
-    const options: { [key: string]: string } = {};
-    infos
-      .filter((info): info is typeof selected => info.kind !== 'SERIES' && info.internal.name === selectedName)
-      .sort((a, b) => a.internal.edition - b.internal.edition)
-      .forEach((info) => {
-        options[info.id] = `${t({ en: 'Edition', es: 'Edición', fr: 'Édition' })} ${info.internal.edition}`;
-      });
-    return options;
-  }, [instrumentInfoQuery.data, instrumentId]);
+  const editionLabel = t({ en: 'Edition', es: 'Edición', fr: 'Édition' });
+  const editionOptions = useMemo(
+    () => getEditionOptions(instrumentInfoQuery.data ?? [], instrumentId, editionLabel),
+    [instrumentInfoQuery.data, instrumentId, editionLabel]
+  );
 
   return {
+    /** Every record for the instrument, before `filterRecord` — what a filter's own options come from */
+    allRecords,
     dl,
     editionOptions,
     instrument,
diff --git a/apps/web/src/hooks/useMeasureOptions.ts b/apps/web/src/hooks/useMeasureOptions.ts
index c7d0fa919..8194dfb5f 100644
--- a/apps/web/src/hooks/useMeasureOptions.ts
+++ b/apps/web/src/hooks/useMeasureOptions.ts
@@ -2,14 +2,23 @@ import { useMemo } from 'react';
 
 import type { ListboxDropdownOption } from '@douglasneuroinformatics/libui/components';
 import { getFormFields } from '@opendatacapture/instrument-utils';
-import type { AnyUnilingualFormInstrument } from '@opendatacapture/runtime-core';
+import type { AnyUnilingualScalarInstrument, FormInstrument } from '@opendatacapture/runtime-core';
 import { match } from 'ts-pattern';
 
-export function useMeasureOptions(instrument: AnyUnilingualFormInstrument | null): ListboxDropdownOption[] {
+/**
+ * The measures of any scalar instrument, as dropdown options.
+ *
+ * A `const` measure may omit its own label and borrow the label of the form field it references,
+ * which is only possible for a form — every other kind has no fields to borrow from, so its
+ * measures fall back to the reference and then to the key.
+ */
+export function useMeasureOptions(instrument: AnyUnilingualScalarInstrument | null): ListboxDropdownOption[] {
   return useMemo(() => {
     const arr: ListboxDropdownOption[] = [];
     if (instrument) {
-      const formFields = getFormFields(instrument.content);
+      // The type argument is explicit because `content` is typed `any` on the scalar union, which
+      // leaves `TData` to collapse and `Fields` to resolve against the wrong shape.
+      const formFields = instrument.kind === 'FORM' ? getFormFields<FormInstrument.Data>(instrument.content) : null;
       for (const key in instrument.measures) {
         const label = match(instrument.measures[key]!)
           .with({ kind: 'computed' }, (measure) => measure.label)
@@ -17,6 +26,11 @@ export function useMeasureOptions(instrument: AnyUnilingualFormInstrument | null
             if (measure.label) {
               return measure.label;
             }
+            // Only a form has fields to borrow a label from; everything else falls back to the
+            // measure's own key, which is also what the record table's column header shows.
+            if (!formFields) {
+              return key;
+            }
             const field = formFields[key]!;
             if (field.kind === 'dynamic') {
               return field.render({})?.label;
diff --git a/apps/web/src/hooks/useNavItems.ts b/apps/web/src/hooks/useNavItems.ts
index 143eecac2..2b2da3062 100644
--- a/apps/web/src/hooks/useNavItems.ts
+++ b/apps/web/src/hooks/useNavItems.ts
@@ -70,8 +70,8 @@ export function useNavItems() {
         url: '/dashboard'
       });
     }
-    // The datahub becomes a group so its views can be read along different axes. Only the subject
-    // view exists today; the instrument one lands next and joins this group beside it.
+    // The two halves of the datahub read the same records along different axes, and are gated
+    // independently: holding only one must still surface a working menu.
     const datahubItems: NavItem[] = [];
     if (ability?.can('read', 'Subject') && ability.can('read', 'InstrumentRecord')) {
       datahubItems.push({
@@ -79,6 +79,13 @@ export function useNavItems() {
         label: t({ en: 'Subjects', es: 'Sujetos', fr: 'Clients' }),
         url: '/datahub/subjects'
       });
+      if (ability.can('read', 'Instrument')) {
+        datahubItems.push({
+          icon: ClipboardListIcon,
+          label: t({ en: 'Instruments', es: 'Instrumentos', fr: 'Instruments' }),
+          url: '/datahub/instruments'
+        });
+      }
     }
     if (datahubItems.length > 0) {
       globalItems.push({
diff --git a/apps/web/src/hooks/useRecordChartSeries.ts b/apps/web/src/hooks/useRecordChartSeries.ts
new file mode 100644
index 000000000..6911146cf
--- /dev/null
+++ b/apps/web/src/hooks/useRecordChartSeries.ts
@@ -0,0 +1,130 @@
+import { useMemo } from 'react';
+
+import { useTheme, useTranslation } from '@douglasneuroinformatics/libui/hooks';
+
+import { useCollectionMethodLabels } from '@/hooks/useCollectionMethodLabels';
+import type { InstrumentVisualizationRecord } from '@/hooks/useInstrumentVisualization';
+import { getCategoricalColor, MAX_CATEGORICAL_GROUPS, NEUTRAL_MARK, OTHER_GROUP_KEY } from '@/utils/chart-palette';
+import type { ChartPaletteName } from '@/utils/chart-palette';
+
+/** The grouping dimensions a chart may spend colour on. Source of truth for the search param. */
+const COLOUR_BY_OPTIONS = ['none', 'method', 'series'] as const;
+
+type ColourBy = (typeof COLOUR_BY_OPTIONS)[number];
+
+type RecordChartPoint = {
+  time: number;
+  value: number | string;
+};
+
+type RecordChartSeries = {
+  color: string;
+  key: string;
+  label: string;
+  points: RecordChartPoint[];
+};
+
+type UseRecordChartSeriesOptions = {
+  colourBy: ColourBy;
+  measure: string | undefined;
+  palette: ChartPaletteName;
+  records: InstrumentVisualizationRecord[];
+};
+
+/**
+ * Splits records into one coloured series per value of the grouping dimension, carrying the
+ * selected measure.
+ *
+ * Groups are ordered by size and the tail beyond the palette's three slots folds into one "Other"
+ * series, so a colour always means the same group no matter how many exist, and a grouping with
+ * many values degrades rather than inventing hues.
+ */
+export function useRecordChartSeries({ colourBy, measure, palette, records }: UseRecordChartSeriesOptions): {
+  isNumeric: boolean;
+  series: RecordChartSeries[];
+} {
+  const [theme] = useTheme();
+  const { t } = useTranslation();
+  const collectionMethodLabels = useCollectionMethodLabels();
+
+  const unlabelled = t({ en: 'Unknown', es: 'Desconocido', fr: 'Inconnu' });
+  const individual = t({ en: 'Individual', es: 'Individual', fr: 'Individuel' });
+  const ungrouped = t({ en: 'Records', es: 'Registros', fr: 'Enregistrements' });
+  const other = t({ en: 'Other', es: 'Otros', fr: 'Autres' });
+
+  return useMemo(() => {
+    const resolvedTheme = theme === 'dark' ? 'dark' : 'light';
+    if (!measure) {
+      return { isNumeric: true, series: [] };
+    }
+
+    const groupOf = (record: InstrumentVisualizationRecord): { key: string; label: string } => {
+      switch (colourBy) {
+        case 'method':
+          return record.__method__
+            ? { key: record.__method__, label: collectionMethodLabels[record.__method__] }
+            : { key: 'UNKNOWN', label: unlabelled };
+        case 'none':
+          return { key: 'ALL', label: ungrouped };
+        case 'series':
+          return record.__seriesId__
+            ? { key: record.__seriesId__, label: record.__seriesName__ ?? record.__seriesId__ }
+            : { key: 'NONE', label: individual };
+      }
+    };
+
+    let isNumeric = true;
+    const groups = new Map<string, { label: string; points: RecordChartPoint[] }>();
+    for (const record of records) {
+      const value = record[measure];
+      if (value === null || value === undefined) {
+        continue;
+      }
+      if (typeof value !== 'number') {
+        isNumeric = false;
+      }
+      if (typeof value !== 'number' && typeof value !== 'string') {
+        continue;
+      }
+      const { key, label } = groupOf(record);
+      let group = groups.get(key);
+      if (!group) {
+        group = { label, points: [] };
+        groups.set(key, group);
+      }
+      group.points.push({ time: record.__time__, value });
+    }
+
+    const ranked = Array.from(groups, ([key, group]) => ({ key, ...group })).sort(
+      (a, b) => b.points.length - a.points.length
+    );
+
+    // Ungrouped, every record is one series, which takes the chosen theme's first slot — so the
+    // palette control still does something without a grouping. Grey is left to mean "not a real
+    // group", which here is only the folded tail below.
+    if (colourBy === 'none') {
+      return {
+        isNumeric,
+        series: ranked.map((group) => ({ ...group, color: getCategoricalColor(0, resolvedTheme, palette) }))
+      };
+    }
+
+    const series: RecordChartSeries[] = ranked.slice(0, MAX_CATEGORICAL_GROUPS).map((group, index) => ({
+      ...group,
+      color: getCategoricalColor(index, resolvedTheme, palette)
+    }));
+    const tail = ranked.slice(MAX_CATEGORICAL_GROUPS);
+    if (tail.length > 0) {
+      series.push({
+        color: NEUTRAL_MARK[resolvedTheme],
+        key: OTHER_GROUP_KEY,
+        label: `${other} (${tail.length})`,
+        points: tail.flatMap((group) => group.points)
+      });
+    }
+    return { isNumeric, series };
+  }, [colourBy, collectionMethodLabels, individual, measure, other, palette, records, theme, ungrouped, unlabelled]);
+}
+
+export { COLOUR_BY_OPTIONS };
+export type { ColourBy, RecordChartSeries };
diff --git a/apps/web/src/hooks/useRecordMetadataColumns.tsx b/apps/web/src/hooks/useRecordMetadataColumns.tsx
new file mode 100644
index 000000000..6ea96eab1
--- /dev/null
+++ b/apps/web/src/hooks/useRecordMetadataColumns.tsx
@@ -0,0 +1,60 @@
+import { useMemo } from 'react';
+
+import { TanstackTable } from '@douglasneuroinformatics/libui/components';
+import { useTranslation } from '@douglasneuroinformatics/libui/hooks';
+import type { SessionType } from '@opendatacapture/schemas/session';
+
+import { SortableHeader } from '@/components/SortableHeader';
+import { TruncatedCell } from '@/components/TruncatedCell';
+import { useCollectionMethodLabels } from '@/hooks/useCollectionMethodLabels';
+import { NO_SERIES } from '@/hooks/useInstrumentHubFacets';
+import type { InstrumentVisualizationRecord } from '@/hooks/useInstrumentVisualization';
+
+/**
+ * The provenance columns every record table shows: how the record was collected, and the series it
+ * was collected under, if any. A series cell holding a name is itself the answer to whether the
+ * record was collected individually, which is why there is no separate column for that.
+ */
+export function useRecordMetadataColumns({
+  omitSeries = false
+}: {
+  /** Set on a series' own page, where every row names that same series and the column says nothing */
+  omitSeries?: boolean;
+} = {}): TanstackTable.ColumnDef<InstrumentVisualizationRecord>[] {
+  const collectionMethodLabels = useCollectionMethodLabels();
+  const { t } = useTranslation();
+  const noneLabel = t({ en: 'None', es: 'Ninguno', fr: 'Aucun' });
+  return useMemo(() => {
+    const columns: TanstackTable.ColumnDef<InstrumentVisualizationRecord>[] = [
+      {
+        accessorKey: '__method__',
+        cell: (ctx) => {
+          const value = ctx.getValue() as null | SessionType;
+          const label = value ? collectionMethodLabels[value] : noneLabel;
+          return <TruncatedCell data-testid="record-cell-collection-method" title={label} value={label} />;
+        },
+        filterFn: (row, id, filter: SessionType[]) => filter.includes(row.getValue(id)),
+        header: ({ column }) => <SortableHeader column={column} label="COLLECTION_METHOD" />,
+        id: '__method__'
+      }
+    ];
+    if (omitSeries) {
+      return columns;
+    }
+    columns.push({
+      accessorKey: '__seriesName__',
+      cell: (ctx) => {
+        // A series title is the longest thing in the row and the first to wrap, which is what
+        // drove this column to one clipped line.
+        const label = (ctx.getValue() as null | string) ?? noneLabel;
+        return <TruncatedCell data-testid="record-cell-series" title={label} value={label} />;
+      },
+      // Filtered on the id rather than the displayed name, since a name is not a stable identity.
+      // The empty string stands for a record collected outside any series.
+      filterFn: (row, _id, filter: string[]) => filter.includes(row.original.__seriesId__ ?? NO_SERIES),
+      header: ({ column }) => <SortableHeader column={column} label="SERIES" />,
+      id: '__seriesName__'
+    });
+    return columns;
+  }, [collectionMethodLabels, noneLabel, omitSeries]);
+}
diff --git a/apps/web/src/route-tree.ts b/apps/web/src/route-tree.ts
index 8500b2d8b..f30e021b1 100644
--- a/apps/web/src/route-tree.ts
+++ b/apps/web/src/route-tree.ts
@@ -39,9 +39,14 @@ import { Route as AppAdminInstrumentReposIndexRouteImport } from './routes/_app/
 import { Route as AppAdminUsersIndexRouteImport } from './routes/_app/admin/users/index'
 import { Route as AppAdminUsersUserIdRouteImport } from './routes/_app/admin/users/$userId'
 import { Route as AppAdminUsersCreateRouteImport } from './routes/_app/admin/users/create'
+import { Route as AppDatahubInstrumentsIndexRouteImport } from './routes/_app/datahub/instruments/index'
+import { Route as AppDatahubInstrumentsInstrumentIdRouteRouteImport } from './routes/_app/datahub/instruments/$instrumentId/route'
 import { Route as AppDatahubSubjectsIndexRouteImport } from './routes/_app/datahub/subjects/index'
 import { Route as AppDatahubSubjectsSubjectIdRouteRouteImport } from './routes/_app/datahub/subjects/$subjectId/route'
 import { Route as AppInstrumentsRenderIdRouteImport } from './routes/_app/instruments/render/$id'
+import { Route as AppDatahubInstrumentsInstrumentIdIndexRouteImport } from './routes/_app/datahub/instruments/$instrumentId/index'
+import { Route as AppDatahubInstrumentsInstrumentIdGraphRouteImport } from './routes/_app/datahub/instruments/$instrumentId/graph'
+import { Route as AppDatahubInstrumentsInstrumentIdTableRouteImport } from './routes/_app/datahub/instruments/$instrumentId/table'
 import { Route as AppDatahubSubjectsSubjectIdAssignmentsRouteImport } from './routes/_app/datahub/subjects/$subjectId/assignments'
 import { Route as AppDatahubSubjectsSubjectIdGraphRouteImport } from './routes/_app/datahub/subjects/$subjectId/graph'
 import { Route as AppDatahubSubjectsSubjectIdTableIndexRouteImport } from './routes/_app/datahub/subjects/$subjectId/table/index'
@@ -201,6 +206,18 @@ const AppAdminUsersCreateRoute = AppAdminUsersCreateRouteImport.update({
   path: '/admin/users/create',
   getParentRoute: () => AppRouteRoute,
 } as any)
+const AppDatahubInstrumentsIndexRoute =
+  AppDatahubInstrumentsIndexRouteImport.update({
+    id: '/datahub/instruments/',
+    path: '/datahub/instruments/',
+    getParentRoute: () => AppRouteRoute,
+  } as any)
+const AppDatahubInstrumentsInstrumentIdRouteRoute =
+  AppDatahubInstrumentsInstrumentIdRouteRouteImport.update({
+    id: '/datahub/instruments/$instrumentId',
+    path: '/datahub/instruments/$instrumentId',
+    getParentRoute: () => AppRouteRoute,
+  } as any)
 const AppDatahubSubjectsIndexRoute = AppDatahubSubjectsIndexRouteImport.update({
   id: '/datahub/subjects/',
   path: '/datahub/subjects/',
@@ -217,6 +234,24 @@ const AppInstrumentsRenderIdRoute = AppInstrumentsRenderIdRouteImport.update({
   path: '/instruments/render/$id',
   getParentRoute: () => AppRouteRoute,
 } as any)
+const AppDatahubInstrumentsInstrumentIdIndexRoute =
+  AppDatahubInstrumentsInstrumentIdIndexRouteImport.update({
+    id: '/',
+    path: '/',
+    getParentRoute: () => AppDatahubInstrumentsInstrumentIdRouteRoute,
+  } as any)
+const AppDatahubInstrumentsInstrumentIdGraphRoute =
+  AppDatahubInstrumentsInstrumentIdGraphRouteImport.update({
+    id: '/graph',
+    path: '/graph',
+    getParentRoute: () => AppDatahubInstrumentsInstrumentIdRouteRoute,
+  } as any)
+const AppDatahubInstrumentsInstrumentIdTableRoute =
+  AppDatahubInstrumentsInstrumentIdTableRouteImport.update({
+    id: '/table',
+    path: '/table',
+    getParentRoute: () => AppDatahubInstrumentsInstrumentIdRouteRoute,
+  } as any)
 const AppDatahubSubjectsSubjectIdAssignmentsRoute =
   AppDatahubSubjectsSubjectIdAssignmentsRouteImport.update({
     id: '/assignments',
@@ -263,6 +298,7 @@ export interface FileRoutesByFullPath {
   '/upload/$instrumentId': typeof AppUploadInstrumentIdRoute
   '/datahub/': typeof AppDatahubIndexRoute
   '/upload/': typeof AppUploadIndexRoute
+  '/datahub/instruments/$instrumentId': typeof AppDatahubInstrumentsInstrumentIdRouteRouteWithChildren
   '/datahub/subjects/$subjectId': typeof AppDatahubSubjectsSubjectIdRouteRouteWithChildren
   '/admin/audit/logs': typeof AppAdminAuditLogsRoute
   '/admin/branding/login-page': typeof AppAdminBrandingLoginPageRoute
@@ -274,9 +310,13 @@ export interface FileRoutesByFullPath {
   '/admin/groups/': typeof AppAdminGroupsIndexRoute
   '/admin/instrument-repos/': typeof AppAdminInstrumentReposIndexRoute
   '/admin/users/': typeof AppAdminUsersIndexRoute
+  '/datahub/instruments/': typeof AppDatahubInstrumentsIndexRoute
   '/datahub/subjects/': typeof AppDatahubSubjectsIndexRoute
+  '/datahub/instruments/$instrumentId/graph': typeof AppDatahubInstrumentsInstrumentIdGraphRoute
+  '/datahub/instruments/$instrumentId/table': typeof AppDatahubInstrumentsInstrumentIdTableRoute
   '/datahub/subjects/$subjectId/assignments': typeof AppDatahubSubjectsSubjectIdAssignmentsRoute
   '/datahub/subjects/$subjectId/graph': typeof AppDatahubSubjectsSubjectIdGraphRoute
+  '/datahub/instruments/$instrumentId/': typeof AppDatahubInstrumentsInstrumentIdIndexRoute
   '/datahub/subjects/$subjectId/table/$recordId': typeof AppDatahubSubjectsSubjectIdTableRecordIdRoute
   '/datahub/subjects/$subjectId/table/': typeof AppDatahubSubjectsSubjectIdTableIndexRoute
 }
@@ -312,9 +352,13 @@ export interface FileRoutesByTo {
   '/admin/groups': typeof AppAdminGroupsIndexRoute
   '/admin/instrument-repos': typeof AppAdminInstrumentReposIndexRoute
   '/admin/users': typeof AppAdminUsersIndexRoute
+  '/datahub/instruments': typeof AppDatahubInstrumentsIndexRoute
   '/datahub/subjects': typeof AppDatahubSubjectsIndexRoute
+  '/datahub/instruments/$instrumentId/graph': typeof AppDatahubInstrumentsInstrumentIdGraphRoute
+  '/datahub/instruments/$instrumentId/table': typeof AppDatahubInstrumentsInstrumentIdTableRoute
   '/datahub/subjects/$subjectId/assignments': typeof AppDatahubSubjectsSubjectIdAssignmentsRoute
   '/datahub/subjects/$subjectId/graph': typeof AppDatahubSubjectsSubjectIdGraphRoute
+  '/datahub/instruments/$instrumentId': typeof AppDatahubInstrumentsInstrumentIdIndexRoute
   '/datahub/subjects/$subjectId/table/$recordId': typeof AppDatahubSubjectsSubjectIdTableRecordIdRoute
   '/datahub/subjects/$subjectId/table': typeof AppDatahubSubjectsSubjectIdTableIndexRoute
 }
@@ -341,6 +385,7 @@ export interface FileRoutesById {
   '/_app/upload/$instrumentId': typeof AppUploadInstrumentIdRoute
   '/_app/datahub/': typeof AppDatahubIndexRoute
   '/_app/upload/': typeof AppUploadIndexRoute
+  '/_app/datahub/instruments/$instrumentId': typeof AppDatahubInstrumentsInstrumentIdRouteRouteWithChildren
   '/_app/datahub/subjects/$subjectId': typeof AppDatahubSubjectsSubjectIdRouteRouteWithChildren
   '/_app/admin/audit/logs': typeof AppAdminAuditLogsRoute
   '/_app/admin/branding/login-page': typeof AppAdminBrandingLoginPageRoute
@@ -352,9 +397,13 @@ export interface FileRoutesById {
   '/_app/admin/groups/': typeof AppAdminGroupsIndexRoute
   '/_app/admin/instrument-repos/': typeof AppAdminInstrumentReposIndexRoute
   '/_app/admin/users/': typeof AppAdminUsersIndexRoute
+  '/_app/datahub/instruments/': typeof AppDatahubInstrumentsIndexRoute
   '/_app/datahub/subjects/': typeof AppDatahubSubjectsIndexRoute
+  '/_app/datahub/instruments/$instrumentId/graph': typeof AppDatahubInstrumentsInstrumentIdGraphRoute
+  '/_app/datahub/instruments/$instrumentId/table': typeof AppDatahubInstrumentsInstrumentIdTableRoute
   '/_app/datahub/subjects/$subjectId/assignments': typeof AppDatahubSubjectsSubjectIdAssignmentsRoute
   '/_app/datahub/subjects/$subjectId/graph': typeof AppDatahubSubjectsSubjectIdGraphRoute
+  '/_app/datahub/instruments/$instrumentId/': typeof AppDatahubInstrumentsInstrumentIdIndexRoute
   '/_app/datahub/subjects/$subjectId/table/$recordId': typeof AppDatahubSubjectsSubjectIdTableRecordIdRoute
   '/_app/datahub/subjects/$subjectId/table/': typeof AppDatahubSubjectsSubjectIdTableIndexRoute
 }
@@ -381,6 +430,7 @@ export interface FileRouteTypes {
     | '/upload/$instrumentId'
     | '/datahub/'
     | '/upload/'
+    | '/datahub/instruments/$instrumentId'
     | '/datahub/subjects/$subjectId'
     | '/admin/audit/logs'
     | '/admin/branding/login-page'
@@ -392,9 +442,13 @@ export interface FileRouteTypes {
     | '/admin/groups/'
     | '/admin/instrument-repos/'
     | '/admin/users/'
+    | '/datahub/instruments/'
     | '/datahub/subjects/'
+    | '/datahub/instruments/$instrumentId/graph'
+    | '/datahub/instruments/$instrumentId/table'
     | '/datahub/subjects/$subjectId/assignments'
     | '/datahub/subjects/$subjectId/graph'
+    | '/datahub/instruments/$instrumentId/'
     | '/datahub/subjects/$subjectId/table/$recordId'
     | '/datahub/subjects/$subjectId/table/'
   fileRoutesByTo: FileRoutesByTo
@@ -430,9 +484,13 @@ export interface FileRouteTypes {
     | '/admin/groups'
     | '/admin/instrument-repos'
     | '/admin/users'
+    | '/datahub/instruments'
     | '/datahub/subjects'
+    | '/datahub/instruments/$instrumentId/graph'
+    | '/datahub/instruments/$instrumentId/table'
     | '/datahub/subjects/$subjectId/assignments'
     | '/datahub/subjects/$subjectId/graph'
+    | '/datahub/instruments/$instrumentId'
     | '/datahub/subjects/$subjectId/table/$recordId'
     | '/datahub/subjects/$subjectId/table'
   id:
@@ -458,6 +516,7 @@ export interface FileRouteTypes {
     | '/_app/upload/$instrumentId'
     | '/_app/datahub/'
     | '/_app/upload/'
+    | '/_app/datahub/instruments/$instrumentId'
     | '/_app/datahub/subjects/$subjectId'
     | '/_app/admin/audit/logs'
     | '/_app/admin/branding/login-page'
@@ -469,9 +528,13 @@ export interface FileRouteTypes {
     | '/_app/admin/groups/'
     | '/_app/admin/instrument-repos/'
     | '/_app/admin/users/'
+    | '/_app/datahub/instruments/'
     | '/_app/datahub/subjects/'
+    | '/_app/datahub/instruments/$instrumentId/graph'
+    | '/_app/datahub/instruments/$instrumentId/table'
     | '/_app/datahub/subjects/$subjectId/assignments'
     | '/_app/datahub/subjects/$subjectId/graph'
+    | '/_app/datahub/instruments/$instrumentId/'
     | '/_app/datahub/subjects/$subjectId/table/$recordId'
     | '/_app/datahub/subjects/$subjectId/table/'
   fileRoutesById: FileRoutesById
@@ -695,6 +758,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AppAdminUsersCreateRouteImport
       parentRoute: typeof AppRouteRoute
     }
+    '/_app/datahub/instruments/': {
+      id: '/_app/datahub/instruments/'
+      path: '/datahub/instruments'
+      fullPath: '/datahub/instruments/'
+      preLoaderRoute: typeof AppDatahubInstrumentsIndexRouteImport
+      parentRoute: typeof AppRouteRoute
+    }
+    '/_app/datahub/instruments/$instrumentId': {
+      id: '/_app/datahub/instruments/$instrumentId'
+      path: '/datahub/instruments/$instrumentId'
+      fullPath: '/datahub/instruments/$instrumentId'
+      preLoaderRoute: typeof AppDatahubInstrumentsInstrumentIdRouteRouteImport
+      parentRoute: typeof AppRouteRoute
+    }
     '/_app/datahub/subjects/': {
       id: '/_app/datahub/subjects/'
       path: '/datahub/subjects'
@@ -716,6 +793,27 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AppInstrumentsRenderIdRouteImport
       parentRoute: typeof AppRouteRoute
     }
+    '/_app/datahub/instruments/$instrumentId/': {
+      id: '/_app/datahub/instruments/$instrumentId/'
+      path: '/'
+      fullPath: '/datahub/instruments/$instrumentId/'
+      preLoaderRoute: typeof AppDatahubInstrumentsInstrumentIdIndexRouteImport
+      parentRoute: typeof AppDatahubInstrumentsInstrumentIdRouteRoute
+    }
+    '/_app/datahub/instruments/$instrumentId/graph': {
+      id: '/_app/datahub/instruments/$instrumentId/graph'
+      path: '/graph'
+      fullPath: '/datahub/instruments/$instrumentId/graph'
+      preLoaderRoute: typeof AppDatahubInstrumentsInstrumentIdGraphRouteImport
+      parentRoute: typeof AppDatahubInstrumentsInstrumentIdRouteRoute
+    }
+    '/_app/datahub/instruments/$instrumentId/table': {
+      id: '/_app/datahub/instruments/$instrumentId/table'
+      path: '/table'
+      fullPath: '/datahub/instruments/$instrumentId/table'
+      preLoaderRoute: typeof AppDatahubInstrumentsInstrumentIdTableRouteImport
+      parentRoute: typeof AppDatahubInstrumentsInstrumentIdRouteRoute
+    }
     '/_app/datahub/subjects/$subjectId/assignments': {
       id: '/_app/datahub/subjects/$subjectId/assignments'
       path: '/assignments'
@@ -747,6 +845,27 @@ declare module '@tanstack/react-router' {
   }
 }
 
+interface AppDatahubInstrumentsInstrumentIdRouteRouteChildren {
+  AppDatahubInstrumentsInstrumentIdGraphRoute: typeof AppDatahubInstrumentsInstrumentIdGraphRoute
+  AppDatahubInstrumentsInstrumentIdTableRoute: typeof AppDatahubInstrumentsInstrumentIdTableRoute
+  AppDatahubInstrumentsInstrumentIdIndexRoute: typeof AppDatahubInstrumentsInstrumentIdIndexRoute
+}
+
+const AppDatahubInstrumentsInstrumentIdRouteRouteChildren: AppDatahubInstrumentsInstrumentIdRouteRouteChildren =
+  {
+    AppDatahubInstrumentsInstrumentIdGraphRoute:
+      AppDatahubInstrumentsInstrumentIdGraphRoute,
+    AppDatahubInstrumentsInstrumentIdTableRoute:
+      AppDatahubInstrumentsInstrumentIdTableRoute,
+    AppDatahubInstrumentsInstrumentIdIndexRoute:
+      AppDatahubInstrumentsInstrumentIdIndexRoute,
+  }
+
+const AppDatahubInstrumentsInstrumentIdRouteRouteWithChildren =
+  AppDatahubInstrumentsInstrumentIdRouteRoute._addFileChildren(
+    AppDatahubInstrumentsInstrumentIdRouteRouteChildren,
+  )
+
 interface AppDatahubSubjectsSubjectIdRouteRouteChildren {
   AppDatahubSubjectsSubjectIdAssignmentsRoute: typeof AppDatahubSubjectsSubjectIdAssignmentsRoute
   AppDatahubSubjectsSubjectIdGraphRoute: typeof AppDatahubSubjectsSubjectIdGraphRoute
@@ -789,6 +908,7 @@ interface AppRouteRouteChildren {
   AppUploadInstrumentIdRoute: typeof AppUploadInstrumentIdRoute
   AppDatahubIndexRoute: typeof AppDatahubIndexRoute
   AppUploadIndexRoute: typeof AppUploadIndexRoute
+  AppDatahubInstrumentsInstrumentIdRouteRoute: typeof AppDatahubInstrumentsInstrumentIdRouteRouteWithChildren
   AppDatahubSubjectsSubjectIdRouteRoute: typeof AppDatahubSubjectsSubjectIdRouteRouteWithChildren
   AppAdminAuditLogsRoute: typeof AppAdminAuditLogsRoute
   AppAdminBrandingLoginPageRoute: typeof AppAdminBrandingLoginPageRoute
@@ -800,6 +920,7 @@ interface AppRouteRouteChildren {
   AppAdminGroupsIndexRoute: typeof AppAdminGroupsIndexRoute
   AppAdminInstrumentReposIndexRoute: typeof AppAdminInstrumentReposIndexRoute
   AppAdminUsersIndexRoute: typeof AppAdminUsersIndexRoute
+  AppDatahubInstrumentsIndexRoute: typeof AppDatahubInstrumentsIndexRoute
   AppDatahubSubjectsIndexRoute: typeof AppDatahubSubjectsIndexRoute
 }
 
@@ -822,6 +943,8 @@ const AppRouteRouteChildren: AppRouteRouteChildren = {
   AppUploadInstrumentIdRoute: AppUploadInstrumentIdRoute,
   AppDatahubIndexRoute: AppDatahubIndexRoute,
   AppUploadIndexRoute: AppUploadIndexRoute,
+  AppDatahubInstrumentsInstrumentIdRouteRoute:
+    AppDatahubInstrumentsInstrumentIdRouteRouteWithChildren,
   AppDatahubSubjectsSubjectIdRouteRoute:
     AppDatahubSubjectsSubjectIdRouteRouteWithChildren,
   AppAdminAuditLogsRoute: AppAdminAuditLogsRoute,
@@ -834,6 +957,7 @@ const AppRouteRouteChildren: AppRouteRouteChildren = {
   AppAdminGroupsIndexRoute: AppAdminGroupsIndexRoute,
   AppAdminInstrumentReposIndexRoute: AppAdminInstrumentReposIndexRoute,
   AppAdminUsersIndexRoute: AppAdminUsersIndexRoute,
+  AppDatahubInstrumentsIndexRoute: AppDatahubInstrumentsIndexRoute,
   AppDatahubSubjectsIndexRoute: AppDatahubSubjectsIndexRoute,
 }
 
diff --git a/apps/web/src/routes/_app/datahub/instruments/$instrumentId/__tests__/graph.test.tsx b/apps/web/src/routes/_app/datahub/instruments/$instrumentId/__tests__/graph.test.tsx
new file mode 100644
index 000000000..980eca60b
--- /dev/null
+++ b/apps/web/src/routes/_app/datahub/instruments/$instrumentId/__tests__/graph.test.tsx
@@ -0,0 +1,391 @@
+import type { ListboxDropdownOption } from '@douglasneuroinformatics/libui/components';
+import { unilingualFormInstrument } from '@opendatacapture/instrument-stubs/forms';
+import type { AnyUnilingualFormInstrument } from '@opendatacapture/runtime-core';
+import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import type { RecordChartSeries } from '@/hooks/useRecordChartSeries';
+import { Route } from '@/routes/_app/datahub/instruments/$instrumentId/graph';
+
+import '@/services/i18n';
+
+type Search = {
+  chart: 'distribution' | 'scatter';
+  colourBy: 'method' | 'none' | 'series';
+  measure?: string;
+  palette: 'berry' | 'default' | 'ember' | 'jade';
+};
+
+const mocks = vi.hoisted(() => ({
+  addNotification: vi.fn<(notification: { message: string; type: string }) => void>(),
+  chartImageFilename: vi.fn((stem: string) => `${stem}.png`),
+  download: vi.fn(),
+  downloadSelection: { current: null as ((option: string) => void) | null },
+  navigate: vi.fn(),
+  renderChartPng: vi.fn(),
+  useInstrumentHubRecords: vi.fn(),
+  useLinearModelQuery: vi.fn(),
+  useMeasureOptions: vi.fn(),
+  useRecordChartSeries: vi.fn()
+}));
+
+vi.mock('@/hooks/useInstrumentHubRecords', () => ({ useInstrumentHubRecords: mocks.useInstrumentHubRecords }));
+vi.mock('@/hooks/useLinearModelQuery', () => ({ useLinearModelQuery: mocks.useLinearModelQuery }));
+vi.mock('@/hooks/useMeasureOptions', () => ({ useMeasureOptions: mocks.useMeasureOptions }));
+vi.mock('@/hooks/useRecordChartSeries', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('@/hooks/useRecordChartSeries')>()),
+  useRecordChartSeries: mocks.useRecordChartSeries
+}));
+vi.mock('@/utils/chart-image', () => ({
+  chartImageFilename: mocks.chartImageFilename,
+  renderChartPng: mocks.renderChartPng
+}));
+vi.mock('@/store', () => ({
+  useAppStore: (selector: (store: { currentGroup: { id: string } }) => unknown) =>
+    selector({ currentGroup: { id: 'group-1' } })
+}));
+vi.mock('@douglasneuroinformatics/libui/hooks', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('@douglasneuroinformatics/libui/hooks')>()),
+  useDownload: () => mocks.download,
+  useNotificationsStore: (selector: (store: { addNotification: typeof mocks.addNotification }) => unknown) =>
+    selector({ addNotification: mocks.addNotification })
+}));
+vi.mock('@douglasneuroinformatics/libui/components', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('@douglasneuroinformatics/libui/components')>()),
+  ActionDropdown: ({
+    disabled,
+    onSelection,
+    title
+  }: {
+    disabled: boolean;
+    onSelection: (option: string) => void;
+    title: string;
+  }) => {
+    mocks.downloadSelection.current = onSelection;
+    return (
+      <button disabled={disabled} type="button" onClick={() => onSelection('png')}>
+        {title}
+      </button>
+    );
+  }
+}));
+vi.mock('@/components/SelectChartPalette', () => ({
+  SelectChartPalette: ({ onSelect, slots, value }: { onSelect: (p: string) => void; slots: number; value: string }) => (
+    <button
+      data-slots={slots}
+      data-testid="select-palette"
+      data-value={value}
+      type="button"
+      onClick={() => onSelect('jade')}
+    />
+  )
+}));
+vi.mock('@/components/RecordDistributionChart', () => ({
+  RecordDistributionChart: ({ isNumeric, measureLabel }: { isNumeric: boolean; measureLabel: string }) => (
+    <svg data-is-numeric={String(isNumeric)} data-measure-label={measureLabel} data-testid="distribution-chart" />
+  )
+}));
+vi.mock('@/components/RecordScatterChart', () => ({
+  RecordScatterChart: ({
+    measureLabel,
+    trend,
+    xLabel
+  }: {
+    measureLabel: string;
+    trend?: { intercept: number; slope: number };
+    xLabel: string;
+  }) => (
+    <svg
+      data-measure-label={measureLabel}
+      data-testid="scatter-chart"
+      data-trend={JSON.stringify(trend ?? null)}
+      data-x-label={xLabel}
+    />
+  )
+}));
+
+const instrument: AnyUnilingualFormInstrument = { ...unilingualFormInstrument.instance, measures: null };
+
+const measureOptions: ListboxDropdownOption[] = [
+  { key: 'score', label: 'Score' },
+  { key: 'mood', label: 'Mood' }
+];
+
+const records = [{ __id__: 'record-1' }];
+
+const seriesOf = (key: string): RecordChartSeries => ({
+  color: '#111111',
+  key,
+  label: key,
+  points: [{ time: 1, value: 3 }]
+});
+
+const renderGraph = ({
+  displayedInstrument = instrument,
+  instrumentId = 'hq-1',
+  isNumeric = true,
+  recordsOnPage = records,
+  search = {},
+  series = [seriesOf('ALL')]
+}: {
+  displayedInstrument?: AnyUnilingualFormInstrument | null;
+  instrumentId?: null | string;
+  isNumeric?: boolean;
+  recordsOnPage?: { __id__: string }[];
+  search?: Partial<Search>;
+  series?: RecordChartSeries[];
+} = {}) => {
+  mocks.useInstrumentHubRecords.mockReturnValue({
+    instrument: displayedInstrument,
+    instrumentId,
+    records: recordsOnPage
+  });
+  mocks.useRecordChartSeries.mockReturnValue({ isNumeric, series });
+  vi.spyOn(Route, 'useSearch').mockReturnValue({
+    chart: 'scatter',
+    colourBy: 'none',
+    palette: 'default',
+    ...search
+  });
+  const Component = Route.options.component!;
+  return render(<Component />);
+};
+
+const downloadChart = async () => {
+  fireEvent.click(screen.getByRole('button', { name: 'Download' }));
+  await waitFor(() => expect(mocks.download).toHaveBeenCalled());
+};
+
+const lastSearch = () => {
+  const [{ search }] = mocks.navigate.mock.lastCall as [{ search: (prev: object) => object }];
+  return search({});
+};
+
+beforeEach(() => {
+  mocks.useLinearModelQuery.mockReturnValue({ data: { score: { intercept: 1, slope: 2, stdErr: 0.5 } } });
+  mocks.useMeasureOptions.mockReturnValue(measureOptions);
+  mocks.renderChartPng.mockResolvedValue(new Blob(['png'], { type: 'image/png' }));
+  vi.spyOn(Route, 'useNavigate').mockReturnValue(mocks.navigate);
+});
+
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+  vi.restoreAllMocks();
+});
+
+describe('instrument graph route', () => {
+  it('should chart the first measure until one is chosen, so the page is never blank', () => {
+    renderGraph();
+    expect(mocks.useRecordChartSeries).toHaveBeenLastCalledWith(expect.objectContaining({ measure: 'score', records }));
+    expect(screen.getByTestId('scatter-chart').dataset.measureLabel).toBe('Score');
+  });
+
+  it('should chart the measure named in the url', () => {
+    renderGraph({ search: { measure: 'mood' } });
+    expect(screen.getByTestId('scatter-chart').dataset.measureLabel).toBe('Mood');
+  });
+
+  // A measure may be named in a shared link that this edition does not declare.
+  it('should label the chart with nothing when the url names a measure the instrument lacks', () => {
+    renderGraph({ search: { measure: 'absent' } });
+    expect(screen.getByTestId('scatter-chart').dataset.measureLabel).toBe('');
+  });
+
+  // An instrument declaring no measures has nothing to chart, and the control must still render.
+  it('should leave the measure control empty for an instrument with no measures', () => {
+    mocks.useMeasureOptions.mockReturnValue([]);
+    renderGraph();
+    expect(screen.getByTestId('instrument-hub-measure-trigger').textContent).toBe('Please select one or more measures');
+  });
+
+  it('should offer the measures of the opened instrument', () => {
+    renderGraph();
+    expect(mocks.useMeasureOptions).toHaveBeenCalledWith(instrument);
+  });
+
+  it.each([
+    ['measure', 'instrument-hub-measure-trigger', 'Mood', { measure: 'mood' }],
+    ['grouping', 'instrument-hub-colour-by-trigger', 'By series', { colourBy: 'series' }]
+  ])('should record the chosen %s in the url', (_, testId, option, expected) => {
+    renderGraph();
+    fireEvent.keyDown(screen.getByTestId(testId), { key: 'Enter' });
+    fireEvent.click(screen.getByRole('option', { name: option }));
+    expect(lastSearch()).toEqual(expected);
+  });
+
+  it('should record the chosen palette in the url', () => {
+    renderGraph();
+    fireEvent.click(screen.getByTestId('select-palette'));
+    expect(lastSearch()).toEqual({ palette: 'jade' });
+  });
+
+  it('should record the chosen chart in the url', () => {
+    renderGraph();
+    fireEvent.mouseDown(screen.getByRole('tab', { name: 'Distribution' }), { button: 0, ctrlKey: false });
+    expect(lastSearch()).toEqual({ chart: 'distribution' });
+  });
+
+  // The palette control previews only the hues the chart will reach, and an ungrouped chart draws
+  // with exactly one.
+  it('should preview one hue for an ungrouped chart and the grouping limit otherwise', () => {
+    renderGraph();
+    expect(screen.getByTestId('select-palette').dataset.slots).toBe('1');
+    cleanup();
+    renderGraph({ search: { colourBy: 'series' } });
+    expect(screen.getByTestId('select-palette').dataset.slots).toBe('3');
+  });
+
+  it('should show the distribution when it is the chosen chart', () => {
+    renderGraph({ search: { chart: 'distribution' } });
+    expect(screen.getByTestId('distribution-chart').dataset.isNumeric).toBe('true');
+    expect(screen.queryByTestId('scatter-chart')).toBeNull();
+  });
+
+  // A category has no position on a time axis, so a scatter of one would be meaningless.
+  it('should explain that a categorical measure can only be shown as a distribution', () => {
+    renderGraph({ isNumeric: false });
+    expect(screen.queryByTestId('scatter-chart')).toBeNull();
+    expect(screen.getByText(/can only be shown as a distribution/)).toBeTruthy();
+  });
+
+  it('should bin a categorical measure when the distribution is chosen', () => {
+    renderGraph({ isNumeric: false, search: { chart: 'distribution' } });
+    expect(screen.getByTestId('distribution-chart').dataset.isNumeric).toBe('false');
+  });
+
+  it('should say that nothing matches rather than drawing an empty chart', () => {
+    renderGraph({ series: [{ color: '#111111', key: 'ALL', label: 'ALL', points: [] }] });
+    expect(screen.queryByTestId('scatter-chart')).toBeNull();
+    expect(screen.getByText('No records match the current filters.')).toBeTruthy();
+  });
+
+  it('should plot the collection date on the x axis', () => {
+    renderGraph();
+    expect(screen.getByTestId('scatter-chart').dataset.xLabel).toBe('Date Collected');
+  });
+});
+
+describe('instrument graph trend', () => {
+  it('should overlay the group trend for the charted measure', () => {
+    renderGraph();
+    expect(mocks.useLinearModelQuery).toHaveBeenLastCalledWith({
+      enabled: true,
+      params: { groupId: 'group-1', instrumentId: 'hq-1' }
+    });
+    expect(screen.getByTestId('scatter-chart').dataset.trend).toBe(
+      JSON.stringify({ intercept: 1, slope: 2, stdErr: 0.5 })
+    );
+  });
+
+  it('should not fetch the trend before the instrument is known', () => {
+    renderGraph({ instrumentId: null });
+    expect(mocks.useLinearModelQuery).toHaveBeenLastCalledWith({
+      enabled: false,
+      params: { groupId: 'group-1', instrumentId: null }
+    });
+  });
+
+  it('should not fetch the trend for a measure holding categories, which no line fits', () => {
+    renderGraph({ isNumeric: false });
+    expect(mocks.useLinearModelQuery.mock.lastCall?.[0]).toMatchObject({ enabled: false });
+  });
+
+  // The regression describes the whole group, so drawing it over a subgroup would misdescribe it.
+  it('should drop the trend once the records are split into groups', () => {
+    renderGraph({ search: { colourBy: 'method' }, series: [seriesOf('REMOTE'), seriesOf('IN_PERSON')] });
+    expect(mocks.useLinearModelQuery.mock.lastCall?.[0]).toMatchObject({ enabled: false });
+    expect(screen.getByTestId('scatter-chart').dataset.trend).toBe('null');
+  });
+
+  it('should draw no trend when the instrument has no regression for the charted measure', () => {
+    mocks.useLinearModelQuery.mockReturnValue({ data: {} });
+    renderGraph();
+    expect(screen.getByTestId('scatter-chart').dataset.trend).toBe('null');
+  });
+});
+
+describe('instrument graph download', () => {
+  it('should save the capture as a png named after the instrument', async () => {
+    const blob = new Blob(['png'], { type: 'image/png' });
+    mocks.renderChartPng.mockResolvedValue(blob);
+    renderGraph();
+    await downloadChart();
+    const [filename, fetchData, options] = mocks.download.mock.lastCall as [string, () => Blob, object];
+    expect(mocks.chartImageFilename).toHaveBeenCalledWith('Unilingual Form');
+    expect(filename).toBe('Unilingual Form.png');
+    expect(fetchData()).toBe(blob);
+    expect(options).toEqual({ blobType: 'image/png' });
+  });
+
+  it('should caption the capture with the instrument and the charted measure', async () => {
+    renderGraph();
+    await downloadChart();
+    expect(mocks.renderChartPng.mock.lastCall?.[1]).toMatchObject({ headings: ['Unilingual Form', 'Score'] });
+  });
+
+  // The catalog resolves after the first paint, so a capture taken immediately has no title to name.
+  it('should caption the capture generically before the instrument is named', async () => {
+    renderGraph({ displayedInstrument: null });
+    await downloadChart();
+    expect(mocks.renderChartPng.mock.lastCall?.[1]).toMatchObject({ headings: ['Instrument', 'Score'] });
+  });
+
+  // Only a grouped chart carries a legend on screen, and a one-entry legend restates the heading.
+  it('should include a legend in the capture only once the chart is grouped', async () => {
+    renderGraph();
+    await downloadChart();
+    expect(mocks.renderChartPng.mock.lastCall?.[1]).toMatchObject({ legend: [] });
+
+    cleanup();
+    mocks.download.mockClear();
+    renderGraph({ search: { colourBy: 'method' }, series: [seriesOf('REMOTE'), seriesOf('IN_PERSON')] });
+    await downloadChart();
+    expect(mocks.renderChartPng.mock.lastCall?.[1]).toMatchObject({
+      legend: [
+        { color: '#111111', label: 'REMOTE' },
+        { color: '#111111', label: 'IN_PERSON' }
+      ]
+    });
+  });
+
+  it('should disable the download when there are no records to capture', () => {
+    renderGraph({ recordsOnPage: [] });
+    expect(screen.getByRole('button', { name: 'Download' }).hasAttribute('disabled')).toBe(true);
+  });
+
+  it('should not capture anything once the chart has unmounted', async () => {
+    const { unmount } = renderGraph();
+    unmount();
+    mocks.downloadSelection.current!('png');
+    await act(() => Promise.resolve());
+    expect(mocks.renderChartPng).not.toHaveBeenCalled();
+    expect(mocks.download).not.toHaveBeenCalled();
+  });
+
+  // A download that quietly does nothing is indistinguishable from a broken button.
+  it('should report the failure and save nothing when the capture cannot be rendered', async () => {
+    vi.spyOn(console, 'error').mockImplementation(() => undefined);
+    mocks.renderChartPng.mockRejectedValue(new Error('no chart on screen'));
+    renderGraph();
+    fireEvent.click(screen.getByRole('button', { name: 'Download' }));
+    await waitFor(() => expect(mocks.addNotification).toHaveBeenCalled());
+    expect(mocks.addNotification).toHaveBeenCalledWith({
+      message: 'The chart could not be saved as an image: no chart on screen',
+      type: 'error'
+    });
+    expect(mocks.download).not.toHaveBeenCalled();
+  });
+
+  it('should report a failure that is not an error, rather than letting it escape unreported', async () => {
+    vi.spyOn(console, 'error').mockImplementation(() => undefined);
+    mocks.renderChartPng.mockRejectedValue('canvas exploded');
+    renderGraph();
+    fireEvent.click(screen.getByRole('button', { name: 'Download' }));
+    await waitFor(() => expect(mocks.addNotification).toHaveBeenCalled());
+    expect(mocks.addNotification).toHaveBeenCalledWith({
+      message: 'The chart could not be saved as an image: canvas exploded',
+      type: 'error'
+    });
+  });
+});
diff --git a/apps/web/src/routes/_app/datahub/instruments/$instrumentId/__tests__/index.test.ts b/apps/web/src/routes/_app/datahub/instruments/$instrumentId/__tests__/index.test.ts
new file mode 100644
index 000000000..e512faaa1
--- /dev/null
+++ b/apps/web/src/routes/_app/datahub/instruments/$instrumentId/__tests__/index.test.ts
@@ -0,0 +1,29 @@
+import { isRedirect } from '@tanstack/react-router';
+import { describe, expect, it } from 'vitest';
+
+import { Route } from '@/routes/_app/datahub/instruments/$instrumentId/index';
+
+const runBeforeLoad = (args: { params: { instrumentId: string }; search: { palette: string } }) => {
+  const beforeLoad = Route.options.beforeLoad as (opts: typeof args) => void;
+  try {
+    beforeLoad(args);
+  } catch (err) {
+    return err;
+  }
+  return null;
+};
+
+describe('instrument hub index route', () => {
+  // The record table is the landing tab, so an instrument link with no tab still opens a page.
+  it('should redirect to the record table, carrying the instrument and its filters', () => {
+    const thrown = runBeforeLoad({ params: { instrumentId: 'hq-1' }, search: { palette: 'jade' } });
+    expect(isRedirect(thrown)).toBe(true);
+    expect(thrown).toMatchObject({
+      options: {
+        params: { instrumentId: 'hq-1' },
+        search: { palette: 'jade' },
+        to: '/datahub/instruments/$instrumentId/table'
+      }
+    });
+  });
+});
diff --git a/apps/web/src/routes/_app/datahub/instruments/$instrumentId/__tests__/route.test.tsx b/apps/web/src/routes/_app/datahub/instruments/$instrumentId/__tests__/route.test.tsx
new file mode 100644
index 000000000..d37c65fb9
--- /dev/null
+++ b/apps/web/src/routes/_app/datahub/instruments/$instrumentId/__tests__/route.test.tsx
@@ -0,0 +1,114 @@
+import type { PropsWithChildren, ReactNode } from 'react';
+
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { Route } from '@/routes/_app/datahub/instruments/$instrumentId/route';
+
+import '@/services/i18n';
+
+const mocks = vi.hoisted(() => ({
+  facets: { isSeries: false, title: null as null | string },
+  outlet: (): ReactNode => 'Outlet Content',
+  pathname: '/datahub/instruments/hq-1/table'
+}));
+
+vi.mock('@tanstack/react-router', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('@tanstack/react-router')>()),
+  Link: ({ children, className, to, ...props }: PropsWithChildren<{ className: string; to: string }>) => (
+    <a className={className} href={to} {...props}>
+      {children}
+    </a>
+  ),
+  Outlet: () => mocks.outlet(),
+  useLocation: () => ({ pathname: mocks.pathname })
+}));
+vi.mock('@/components/LoadingFallback', () => ({ LoadingFallback: () => 'Loading Fallback' }));
+vi.mock('@/hooks/useInstrumentHubFacets', () => ({ useInstrumentHubFacets: () => mocks.facets }));
+
+const renderLayout = () => {
+  const Component = Route.options.component!;
+  render(<Component />);
+};
+
+beforeEach(() => {
+  mocks.facets = { isSeries: false, title: 'Happiness Questionnaire' };
+  mocks.outlet = () => 'Outlet Content';
+  mocks.pathname = '/datahub/instruments/hq-1/table';
+  vi.spyOn(Route, 'useParams').mockReturnValue({ instrumentId: 'hq-1' });
+  vi.spyOn(Route, 'useSearch').mockReturnValue({ chart: 'scatter', colourBy: 'none', palette: 'default' });
+});
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+describe('instrument layout route', () => {
+  it('should name the opened instrument in the heading', () => {
+    renderLayout();
+    expect(screen.getByRole('heading').textContent).toBe('Happiness Questionnaire');
+  });
+
+  // The catalog resolves after the first paint, so the heading needs something to show meanwhile.
+  it('should fall back to a generic heading before the instrument is named', () => {
+    mocks.facets = { isSeries: false, title: null };
+    renderLayout();
+    expect(screen.getByRole('heading').textContent).toBe('Instrument');
+  });
+
+  it('should link each tab to its page under the instrument', () => {
+    renderLayout();
+    expect(screen.getByTestId('instrument-hub-table-tab').getAttribute('href')).toBe('/datahub/instruments/hq-1/table');
+    expect(screen.getByTestId('instrument-hub-graph-tab').getAttribute('href')).toBe('/datahub/instruments/hq-1/graph');
+  });
+
+  it('should highlight only the tab whose page is open', () => {
+    mocks.pathname = '/datahub/instruments/hq-1/graph';
+    renderLayout();
+    expect(screen.getByTestId('instrument-hub-graph-tab').classList.contains('border-sky-500')).toBe(true);
+    expect(screen.getByTestId('instrument-hub-table-tab').classList.contains('border-sky-500')).toBe(false);
+  });
+
+  // A series orchestrates records across the instruments it composes, so it has no shared measures
+  // to chart and the graph tab would open on nothing.
+  it('should offer no tabs for a series, which has no measures to chart', () => {
+    mocks.facets = { isSeries: true, title: 'Happiness Series' };
+    renderLayout();
+    expect(screen.queryByTestId('instrument-hub-graph-tab')).toBeNull();
+    expect(screen.queryByTestId('instrument-hub-table-tab')).toBeNull();
+  });
+
+  it('should return to the instrument index when the instrument was opened from it', () => {
+    renderLayout();
+    expect(screen.getByTestId('instrument-hub-back').getAttribute('href')).toBe('/datahub/instruments');
+  });
+
+  // Reached by drilling into a series, the instrument belongs to that series' listing — returning to
+  // the index would drop the reader somewhere they never were.
+  it('should return to the series the instrument was opened from', () => {
+    vi.spyOn(Route, 'useSearch').mockReturnValue({
+      chart: 'scatter',
+      colourBy: 'none',
+      fromSeries: 'series-1',
+      palette: 'default'
+    });
+    renderLayout();
+    expect(screen.getByTestId('instrument-hub-back').getAttribute('href')).toBe(
+      '/datahub/instruments/$instrumentId/table'
+    );
+  });
+
+  it('should render the selected tab page below the tabs', () => {
+    renderLayout();
+    expect(screen.getByText('Outlet Content')).toBeTruthy();
+  });
+
+  it('should show a loading fallback instead of the page while the page suspends', () => {
+    mocks.outlet = () => {
+      throw new Promise<never>(() => undefined);
+    };
+    renderLayout();
+    expect(screen.getByText('Loading Fallback')).toBeTruthy();
+  });
+});
diff --git a/apps/web/src/routes/_app/datahub/instruments/$instrumentId/__tests__/table.test.tsx b/apps/web/src/routes/_app/datahub/instruments/$instrumentId/__tests__/table.test.tsx
new file mode 100644
index 000000000..74aed38ca
--- /dev/null
+++ b/apps/web/src/routes/_app/datahub/instruments/$instrumentId/__tests__/table.test.tsx
@@ -0,0 +1,327 @@
+import { cleanup, fireEvent, render, screen, within } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import type { InstrumentRow } from '@/components/InstrumentTable';
+import { Route } from '@/routes/_app/datahub/instruments/$instrumentId/table';
+
+import '@/services/i18n';
+
+type VisualizationRecord = {
+  [key: string]: unknown;
+  __date__: unknown;
+  __id__: string;
+  __instrumentId__: string;
+  __method__: null | string;
+  __seriesId__: null | string;
+  __seriesName__: null | string;
+  __subjectId__: string;
+  __time__: number;
+};
+
+const mocks = vi.hoisted(() => ({
+  facets: {
+    editionOptions: {},
+    isSeries: false,
+    seriesOptions: new Map<string, null | string>(),
+    title: 'Happiness Questionnaire'
+  },
+  infoById: {},
+  openSeriesMember: { current: null as ((row: InstrumentRow) => void) | null },
+  records: [] as VisualizationRecord[],
+  subjectIdDisplayLength: undefined as number | undefined
+}));
+
+vi.mock('@/hooks/useInstrumentHubRecords', () => ({
+  useInstrumentHubRecords: () => ({ dl: vi.fn(), records: mocks.records })
+}));
+vi.mock('@/hooks/useInstrumentHubFacets', () => ({
+  NO_SERIES: '',
+  useInstrumentHubFacets: () => mocks.facets
+}));
+vi.mock('@/hooks/useInstrumentInfoById', () => ({ useInstrumentInfoById: () => mocks.infoById }));
+vi.mock('@/store', () => ({
+  useAppStore: (selector: (store: { currentGroup: { settings: { subjectIdDisplayLength?: number } } }) => unknown) =>
+    selector({ currentGroup: { settings: { subjectIdDisplayLength: mocks.subjectIdDisplayLength } } })
+}));
+// Captured rather than rendered: the listing itself is covered by instrument-table.test.tsx, and
+// what matters here is the search the drill-down navigates with.
+vi.mock('@/components/InstrumentTable', () => ({
+  InstrumentTable: ({ onOpen }: { onOpen: (row: InstrumentRow) => void }) => {
+    mocks.openSeriesMember.current = onOpen;
+    return <span data-testid="instrument-hub-series-members" />;
+  }
+}));
+vi.mock('@/components/SelectEdition', () => ({
+  SelectEdition: ({ onSelect, value }: { onSelect: (id: string) => void; value: null | string }) => (
+    <button data-testid="select-edition" data-value={value} type="button" onClick={() => onSelect('hq-2')} />
+  )
+}));
+vi.mock('@/components/TimeDropdown', () => ({
+  TimeDropdown: ({ setMinTime }: { setMinTime: (value: Date | null) => void }) => (
+    <span>
+      <button data-testid="select-time" type="button" onClick={() => setMinTime(new Date(2026, 0, 1))} />
+      <button data-testid="clear-time" type="button" onClick={() => setMinTime(null)} />
+    </span>
+  )
+}));
+
+const navigate = vi.fn();
+
+const record = (overrides: Partial<VisualizationRecord> = {}): VisualizationRecord => ({
+  __date__: new Date('2026-01-15'),
+  __id__: 'record-1',
+  __instrumentId__: 'hq-1',
+  __method__: 'IN_PERSON',
+  __seriesId__: null,
+  __seriesName__: null,
+  __subjectId__: 'ROOT$alice',
+  __time__: 0,
+  totalScore: 7,
+  ...overrides
+});
+
+const renderTable = () => {
+  const Component = Route.options.component!;
+  render(<Component />);
+};
+
+const headers = () =>
+  Array.from(screen.getByTestId('data-table-head').firstElementChild!.children, (header) => header.textContent).filter(
+    Boolean
+  );
+
+/** The sort control a header carries, or undefined when the header is plain text. */
+const headerButton = (label: string) =>
+  Array.from(screen.getByTestId('data-table-head').querySelectorAll('button')).find(
+    (button) => button.textContent === label
+  );
+
+const lastSearch = () => {
+  const [{ search }] = navigate.mock.lastCall as [{ search: (prev: object) => object }];
+  return search({});
+};
+
+beforeEach(() => {
+  navigate.mockReset();
+  mocks.facets.isSeries = false;
+  mocks.facets.seriesOptions = new Map();
+  mocks.infoById = {};
+  mocks.openSeriesMember.current = null;
+  mocks.records = [record()];
+  mocks.subjectIdDisplayLength = undefined;
+  vi.spyOn(Route, 'useNavigate').mockReturnValue(navigate);
+  vi.spyOn(Route, 'useParams').mockReturnValue({ instrumentId: 'hq-1' });
+  vi.spyOn(Route, 'useSearch').mockReturnValue({});
+});
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+describe('instrument hub table route', () => {
+  it('should name every column after the field the export uses', () => {
+    renderTable();
+    expect(headers()).toEqual(['SUBJECT', 'DATE_COLLECTED', 'COLLECTION_METHOD', 'SERIES', 'TOTAL_SCORE']);
+  });
+
+  // The hub's instrument listing sorts from its headers, so this table reading as fixed text made
+  // the two look like different kinds of table.
+  it.each(['SUBJECT', 'DATE_COLLECTED', 'COLLECTION_METHOD', 'SERIES', 'TOTAL_SCORE'])(
+    'should offer a sort control on the %s header',
+    (label) => {
+      renderTable();
+      expect(headerButton(label)).toBeTruthy();
+    }
+  );
+
+  it('should reorder the rows when a header control is used', () => {
+    mocks.records = [record({ __id__: 'r-1', totalScore: 2 }), record({ __id__: 'r-2', totalScore: 9 })];
+    renderTable();
+    const scores = () => screen.queryAllByTestId('instrument-table-cell-totalScore').map((cell) => cell.textContent);
+    expect(scores()).toEqual(['2', '9']);
+    fireEvent.click(headerButton('TOTAL_SCORE')!);
+    expect(scores()).toEqual(['9', '2']);
+  });
+
+  it('should show the collection date as an ISO date', () => {
+    renderTable();
+    expect(screen.getByText('2026-01-15')).toBeTruthy();
+  });
+
+  // A record whose date never parsed is shown as it stands rather than crashing the table.
+  it('should show a date that is not a date as it stands', () => {
+    mocks.records = [record({ __date__: 'not a date' })];
+    renderTable();
+    expect(screen.getByText('not a date')).toBeTruthy();
+  });
+
+  it("should truncate the subject id to the current group's display length", () => {
+    mocks.subjectIdDisplayLength = 3;
+    renderTable();
+    expect(screen.getByText('ali')).toBeTruthy();
+  });
+
+  it('should truncate the subject id to nine characters when the group sets no display length', () => {
+    mocks.records = [record({ __subjectId__: 'ROOT$abcdefghijkl' })];
+    renderTable();
+    expect(screen.getByText('abcdefghi')).toBeTruthy();
+  });
+
+  it('should open the record of the row that was double clicked', () => {
+    renderTable();
+    fireEvent.doubleClick(screen.getByTestId('data-table-row'));
+    expect(navigate).toHaveBeenCalledWith({
+      params: { recordId: 'record-1', subjectId: 'ROOT$alice' },
+      search: { fromInstrument: 'hq-1', fromSeries: undefined },
+      to: '/datahub/subjects/$subjectId/table/$recordId'
+    });
+  });
+
+  it('should mark the row that was clicked as the highlighted one', () => {
+    renderTable();
+    expect(screen.getByTestId('data-table-row').querySelector('[data-row-selected="false"]')).toBeTruthy();
+    fireEvent.click(screen.getByTestId('data-table-row'));
+    expect(screen.getByTestId('data-table-row').querySelector('[data-row-selected="true"]')).toBeTruthy();
+  });
+
+  it.each([
+    ['View Record', '/datahub/subjects/$subjectId/table/$recordId'],
+    ['View Subject', '/datahub/subjects/$subjectId/table']
+  ])('should open %s from the row actions, carrying where it was opened from', (label, to) => {
+    renderTable();
+    fireEvent.keyDown(screen.getByTestId('row-actions-trigger'), { key: 'Enter' });
+    fireEvent.click(within(screen.getByTestId('row-actions-dropdown')).getByRole('menuitem', { name: label }));
+    expect(navigate.mock.lastCall?.[0]).toMatchObject({ search: { fromInstrument: 'hq-1' }, to });
+  });
+
+  // The series the instrument was opened from has to survive onward navigation, or the subject hub's
+  // return link loses the trail back through the series.
+  it('should carry the series it was opened from onto the subject', () => {
+    vi.spyOn(Route, 'useSearch').mockReturnValue({ fromSeries: 'series-1' });
+    renderTable();
+    fireEvent.doubleClick(screen.getByTestId('data-table-row'));
+    expect(navigate.mock.lastCall?.[0]).toMatchObject({
+      search: { fromInstrument: 'hq-1', fromSeries: 'series-1' }
+    });
+  });
+
+  it('should open the chosen edition of the instrument', () => {
+    renderTable();
+    fireEvent.click(screen.getByTestId('select-edition'));
+    expect(navigate).toHaveBeenCalledWith({
+      params: { instrumentId: 'hq-2' },
+      to: '/datahub/instruments/$instrumentId/table'
+    });
+  });
+
+  it('should record the chosen timeframe in the url', () => {
+    renderTable();
+    fireEvent.click(screen.getByTestId('select-time'));
+    expect(lastSearch()).toEqual({ minDate: new Date(2026, 0, 1) });
+  });
+
+  // An undefined bound drops the parameter rather than putting a null in the url.
+  it('should drop the timeframe from the url when it is cleared', () => {
+    renderTable();
+    fireEvent.click(screen.getByTestId('clear-time'));
+    expect(lastSearch()).toEqual({ minDate: undefined });
+  });
+
+  it('should disable the export when there are no records to export', () => {
+    mocks.records = [];
+    renderTable();
+    expect(screen.getByRole('button', { name: 'Download' }).hasAttribute('disabled')).toBe(true);
+  });
+});
+
+describe('instrument hub table filters', () => {
+  const openFilters = () => fireEvent.keyDown(screen.getByTestId('instrument-hub-filters-trigger'), { key: 'Enter' });
+
+  it('should start with every collection method kept, so the table opens on the whole set', () => {
+    renderTable();
+    openFilters();
+    expect(screen.getByTestId('instrument-hub-filter-method-IN_PERSON').getAttribute('data-state')).toBe('checked');
+  });
+
+  it('should drop a collection method that is unchecked', () => {
+    renderTable();
+    openFilters();
+    fireEvent.click(screen.getByTestId('instrument-hub-filter-method-REMOTE'));
+    expect(lastSearch()).toEqual({ methods: ['RETROSPECTIVE', 'IN_PERSON'] });
+  });
+
+  it('should restore a collection method that is checked again', () => {
+    vi.spyOn(Route, 'useSearch').mockReturnValue({ methods: ['IN_PERSON'] });
+    renderTable();
+    openFilters();
+    fireEvent.click(screen.getByTestId('instrument-hub-filter-method-REMOTE'));
+    expect(lastSearch()).toEqual({ methods: ['IN_PERSON', 'REMOTE'] });
+  });
+
+  it('should offer each series its records were collected under by name', () => {
+    mocks.facets.seriesOptions = new Map([['series-1', 'Repeated Battery']]);
+    renderTable();
+    openFilters();
+    expect(screen.getByTestId('instrument-hub-filter-series-series-1').textContent).toBe('Repeated Battery');
+  });
+
+  // A record may name a series the caller cannot read, leaving the id as the only available label.
+  it('should offer a series it cannot name by its id', () => {
+    mocks.facets.seriesOptions = new Map([['series-1', null]]);
+    renderTable();
+    openFilters();
+    expect(screen.getByTestId('instrument-hub-filter-series-series-1').textContent).toBe('series-1');
+  });
+
+  it('should label the records collected outside any series as individual', () => {
+    mocks.facets.seriesOptions = new Map([['', null]]);
+    renderTable();
+    openFilters();
+    expect(screen.getByTestId('instrument-hub-filter-series-individual').textContent).toBe('Individual');
+  });
+
+  it('should drop a series that is unchecked', () => {
+    mocks.facets.seriesOptions = new Map([
+      ['series-1', 'Repeated Battery'],
+      ['series-2', 'Other Battery']
+    ]);
+    renderTable();
+    openFilters();
+    fireEvent.click(screen.getByTestId('instrument-hub-filter-series-series-1'));
+    expect(lastSearch()).toEqual({ series: ['series-2'] });
+  });
+
+  it('should restore a series that is checked again', () => {
+    mocks.facets.seriesOptions = new Map([
+      ['series-1', 'Repeated Battery'],
+      ['series-2', 'Other Battery']
+    ]);
+    vi.spyOn(Route, 'useSearch').mockReturnValue({ series: ['series-2'] });
+    renderTable();
+    openFilters();
+    fireEvent.click(screen.getByTestId('instrument-hub-filter-series-series-1'));
+    expect(lastSearch()).toEqual({ series: ['series-2', 'series-1'] });
+  });
+});
+
+describe('instrument hub series members', () => {
+  beforeEach(() => {
+    mocks.facets.isSeries = true;
+    mocks.infoById = { 'member-1': { edition: 2, kind: 'FORM', title: 'Member One' } };
+    mocks.records = [record({ __instrumentId__: 'member-1', __seriesId__: 'hq-1', __seriesName__: 'Repeated' })];
+  });
+
+  // Opening a member from a series means "the subjects this series collected", not every record the
+  // member instrument ever took — so the drill-down carries the series as a filter, not just as the
+  // breadcrumb the return link reads.
+  it('should narrow a member instrument to the series it was opened from', () => {
+    renderTable();
+    mocks.openSeriesMember.current!({ id: 'member-1' } as InstrumentRow);
+    expect(navigate).toHaveBeenCalledWith({
+      params: { instrumentId: 'member-1' },
+      search: { fromSeries: 'hq-1', series: ['hq-1'] },
+      to: '/datahub/instruments/$instrumentId/table'
+    });
+  });
+});
diff --git a/apps/web/src/routes/_app/datahub/instruments/$instrumentId/graph.tsx b/apps/web/src/routes/_app/datahub/instruments/$instrumentId/graph.tsx
new file mode 100644
index 000000000..51a382e84
--- /dev/null
+++ b/apps/web/src/routes/_app/datahub/instruments/$instrumentId/graph.tsx
@@ -0,0 +1,199 @@
+import { useRef } from 'react';
+
+import { ActionDropdown, Select, Tabs } from '@douglasneuroinformatics/libui/components';
+import { useDownload, useNotificationsStore, useTheme, useTranslation } from '@douglasneuroinformatics/libui/hooks';
+import { createFileRoute } from '@tanstack/react-router';
+
+import { RecordDistributionChart } from '@/components/RecordDistributionChart';
+import { RecordScatterChart } from '@/components/RecordScatterChart';
+import { SelectChartPalette } from '@/components/SelectChartPalette';
+import { useInstrumentHubRecords } from '@/hooks/useInstrumentHubRecords';
+import { useLinearModelQuery } from '@/hooks/useLinearModelQuery';
+import { useMeasureOptions } from '@/hooks/useMeasureOptions';
+import { useRecordChartSeries } from '@/hooks/useRecordChartSeries';
+import type { ColourBy } from '@/hooks/useRecordChartSeries';
+import { useAppStore } from '@/store';
+import { chartImageFilename, renderChartPng } from '@/utils/chart-image';
+import { MAX_CATEGORICAL_GROUPS } from '@/utils/chart-palette';
+import { resolveTheme } from '@/utils/chart-theme';
+
+const RouteComponent = () => {
+  const navigate = Route.useNavigate();
+  const { chart, colourBy, measure, palette } = Route.useSearch();
+  const currentGroup = useAppStore((store) => store.currentGroup);
+  const { instrument, instrumentId, records } = useInstrumentHubRecords();
+  const { t } = useTranslation();
+  const downloadFile = useDownload();
+  const addNotification = useNotificationsStore((store) => store.addNotification);
+  const [theme] = useTheme();
+  const chartContainerRef = useRef<HTMLDivElement>(null);
+
+  const title = instrument?.details.title ?? t({ en: 'Instrument', es: 'Instrumento', fr: 'Instrument' });
+
+  const measureOptions = useMeasureOptions(instrument);
+  const selectedMeasure = measure ?? measureOptions[0]?.key;
+  const measureLabel = measureOptions.find((option) => option.key === selectedMeasure)?.label ?? '';
+
+  const handlePngDownload = async () => {
+    if (!chartContainerRef.current) {
+      return;
+    }
+    try {
+      const blob = await renderChartPng(chartContainerRef.current, {
+        headings: [title, measureLabel].filter(Boolean),
+        // Only a grouped chart has a legend on screen, and only then does the capture need one.
+        legend: series.length > 1 ? series.map((item) => ({ color: item.color, label: item.label })) : [],
+        mode: resolveTheme(theme)
+      });
+      await downloadFile(chartImageFilename(title), () => blob, { blobType: 'image/png' });
+    } catch (error) {
+      console.error(error);
+      addNotification({
+        // The cause is named rather than swallowed: without it the toast says only that something
+        // went wrong, which is no more actionable than the button doing nothing.
+        message: `${t({
+          en: 'The chart could not be saved as an image',
+          es: 'No se pudo guardar el gráfico como imagen',
+          fr: "Le graphique n'a pas pu être enregistré comme image"
+        })}: ${error instanceof Error ? error.message : String(error)}`,
+        type: 'error'
+      });
+    }
+  };
+
+  const { isNumeric, series } = useRecordChartSeries({ colourBy, measure: selectedMeasure, palette, records });
+
+  // The regression is a property of the instrument across the whole group, so it is only an honest
+  // overlay when the plotted set has not been narrowed to a subgroup.
+  const isTrendComparable = colourBy === 'none' && series.length <= 1;
+  const linearModelQuery = useLinearModelQuery({
+    enabled: Boolean(instrumentId) && isNumeric && isTrendComparable,
+    params: { groupId: currentGroup?.id, instrumentId: instrumentId! }
+  });
+  const trend = isTrendComparable && selectedMeasure ? linearModelQuery.data?.[selectedMeasure] : undefined;
+
+  const hasData = series.some((item) => item.points.length > 0);
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex flex-col gap-2 lg:flex-row lg:justify-between">
+        <Tabs
+          value={chart}
+          onValueChange={(value) => {
+            void navigate({ search: (prev) => ({ ...prev, chart: value as 'distribution' | 'scatter' }) });
+          }}
+        >
+          <Tabs.List data-testid="instrument-hub-chart-toggle">
+            <Tabs.Trigger value="scatter">
+              {t({ en: 'Over Time', es: 'A lo largo del tiempo', fr: 'Dans le temps' })}
+            </Tabs.Trigger>
+            <Tabs.Trigger value="distribution">
+              {t({ en: 'Distribution', es: 'Distribución', fr: 'Distribution' })}
+            </Tabs.Trigger>
+          </Tabs.List>
+        </Tabs>
+        <div className="flex flex-col gap-2 lg:flex-row">
+          <Select
+            value={selectedMeasure ?? ''}
+            onValueChange={(value) => {
+              void navigate({ search: (prev) => ({ ...prev, measure: value }) });
+            }}
+          >
+            <Select.Trigger className="min-w-48" data-testid="instrument-hub-measure-trigger">
+              <Select.Value placeholder={t('datahub.visualization.selectMeasures')} />
+            </Select.Trigger>
+            <Select.Content>
+              <Select.Group>
+                {measureOptions.map((option) => (
+                  <Select.Item key={option.key} value={option.key}>
+                    {option.label}
+                  </Select.Item>
+                ))}
+              </Select.Group>
+            </Select.Content>
+          </Select>
+          <Select
+            value={colourBy}
+            onValueChange={(value) => {
+              void navigate({ search: (prev) => ({ ...prev, colourBy: value as ColourBy }) });
+            }}
+          >
+            <Select.Trigger className="min-w-40" data-testid="instrument-hub-colour-by-trigger">
+              <Select.Value />
+            </Select.Trigger>
+            <Select.Content>
+              <Select.Group>
+                <Select.Item value="none">
+                  {t({ en: 'No grouping', es: 'Sin agrupar', fr: 'Sans regroupement' })}
+                </Select.Item>
+                <Select.Item value="method">
+                  {t({ en: 'By collection method', es: 'Por método', fr: 'Par méthode' })}
+                </Select.Item>
+                <Select.Item value="series">{t({ en: 'By series', es: 'Por serie', fr: 'Par série' })}</Select.Item>
+              </Select.Group>
+            </Select.Content>
+          </Select>
+          <SelectChartPalette
+            data-testid="instrument-hub-palette-trigger"
+            slots={colourBy === 'none' ? 1 : MAX_CATEGORICAL_GROUPS}
+            value={palette}
+            onSelect={(selected) => {
+              void navigate({ search: (prev) => ({ ...prev, palette: selected }) });
+            }}
+          />
+          <ActionDropdown
+            data-testid="instrument-hub-graph-export-dropdown"
+            disabled={records.length === 0}
+            options={{ png: 'PNG' }}
+            title={t('datahub.downloadInfo.download')}
+            triggerClassName="min-w-32"
+            onSelection={() => {
+              void handlePngDownload();
+            }}
+          />
+        </div>
+      </div>
+      <div
+        className="bg-card text-muted-foreground rounded-md border p-6 tracking-tight shadow-xs"
+        data-testid="instrument-hub-chart"
+        ref={chartContainerRef}
+      >
+        {!hasData ? (
+          <p className="py-16 text-center">
+            {t({
+              en: 'No records match the current filters.',
+              es: 'Ningún registro coincide con los filtros actuales.',
+              fr: 'Aucun enregistrement ne correspond aux filtres actuels.'
+            })}
+          </p>
+        ) : chart === 'distribution' ? (
+          <RecordDistributionChart
+            countLabel={t({ en: 'Records', es: 'Registros', fr: 'Enregistrements' })}
+            isNumeric={isNumeric}
+            measureLabel={measureLabel}
+            series={series}
+          />
+        ) : !isNumeric ? (
+          <p className="py-16 text-center">
+            {t({
+              en: 'This measure holds categories rather than numbers, so it can only be shown as a distribution.',
+              es: 'Esta medida contiene categorías en lugar de números, por lo que solo puede mostrarse como distribución.',
+              fr: 'Cette mesure contient des catégories et non des nombres : elle ne peut être affichée que sous forme de distribution.'
+            })}
+          </p>
+        ) : (
+          <RecordScatterChart
+            measureLabel={measureLabel}
+            series={series}
+            trend={trend}
+            xLabel={t('datahub.visualization.xLabel')}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const Route = createFileRoute('/_app/datahub/instruments/$instrumentId/graph')({
+  component: RouteComponent
+});
diff --git a/apps/web/src/routes/_app/datahub/instruments/$instrumentId/index.tsx b/apps/web/src/routes/_app/datahub/instruments/$instrumentId/index.tsx
new file mode 100644
index 000000000..b456f0a37
--- /dev/null
+++ b/apps/web/src/routes/_app/datahub/instruments/$instrumentId/index.tsx
@@ -0,0 +1,7 @@
+import { createFileRoute, redirect } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/_app/datahub/instruments/$instrumentId/')({
+  beforeLoad: ({ params, search }) => {
+    throw redirect({ params, search, to: '/datahub/instruments/$instrumentId/table' });
+  }
+});
diff --git a/apps/web/src/routes/_app/datahub/instruments/$instrumentId/route.tsx b/apps/web/src/routes/_app/datahub/instruments/$instrumentId/route.tsx
new file mode 100644
index 000000000..5fb06accd
--- /dev/null
+++ b/apps/web/src/routes/_app/datahub/instruments/$instrumentId/route.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+
+import { Heading } from '@douglasneuroinformatics/libui/components';
+import { useTranslation } from '@douglasneuroinformatics/libui/hooks';
+import { ChevronLeftIcon } from '@heroicons/react/24/solid';
+import { $SessionType } from '@opendatacapture/schemas/session';
+import { createFileRoute, Link, Outlet } from '@tanstack/react-router';
+import { z } from 'zod/v4';
+
+import { LoadingFallback } from '@/components/LoadingFallback';
+import { PageHeader } from '@/components/PageHeader';
+import { TabLink } from '@/components/TabLink';
+import { useInstrumentHubFacets } from '@/hooks/useInstrumentHubFacets';
+import { COLOUR_BY_OPTIONS } from '@/hooks/useRecordChartSeries';
+import { CHART_PALETTE_NAMES } from '@/utils/chart-palette';
+
+const RouteComponent = () => {
+  const params = Route.useParams();
+  const search = Route.useSearch();
+  const { t } = useTranslation();
+  const { isSeries, title } = useInstrumentHubFacets();
+
+  const basePathname = `/datahub/instruments/${params.instrumentId}`;
+
+  return (
+    <React.Fragment>
+      <PageHeader>
+        <Heading className="text-center" variant="h2">
+          {title ?? t({ en: 'Instrument', es: 'Instrumento', fr: 'Instrument' })}
+        </Heading>
+      </PageHeader>
+      <Link
+        className="text-muted-foreground focus-visible:ring-ring mb-3 flex items-center gap-0.5 self-start rounded-sm text-[11px] font-semibold tracking-widest uppercase transition-colors hover:text-blue-600 focus-visible:ring-1 focus-visible:outline-hidden dark:hover:text-blue-400"
+        data-testid="instrument-hub-back"
+        params={search.fromSeries ? { instrumentId: search.fromSeries } : undefined}
+        to={search.fromSeries ? '/datahub/instruments/$instrumentId/table' : '/datahub/instruments'}
+      >
+        <ChevronLeftIcon className="h-3.5 w-3.5" />
+        {t({ en: 'Return', es: 'Volver', fr: 'Retour' })}
+      </Link>
+      {!isSeries && (
+        <div className="mb-5 flex">
+          <TabLink
+            label={t('datahub.layout.tabs.table')}
+            pathname={`${basePathname}/table`}
+            testId="instrument-hub-table-tab"
+          />
+          <TabLink
+            label={t('datahub.layout.tabs.graph')}
+            pathname={`${basePathname}/graph`}
+            testId="instrument-hub-graph-tab"
+          />
+        </div>
+      )}
+      <React.Suspense fallback={<LoadingFallback />}>
+        <Outlet />
+      </React.Suspense>
+    </React.Fragment>
+  );
+};
+
+export const Route = createFileRoute('/_app/datahub/instruments/$instrumentId')({
+  component: RouteComponent,
+  validateSearch: z.object({
+    chart: z.enum(['scatter', 'distribution']).default('scatter'),
+    colourBy: z.enum(COLOUR_BY_OPTIONS).default('none'),
+    fromSeries: z.string().optional(),
+    measure: z.string().optional(),
+    methods: $SessionType.array().optional(),
+    minDate: z.coerce.date().optional(),
+    palette: z.enum(CHART_PALETTE_NAMES).default('default'),
+    series: z.string().array().optional()
+  })
+});
diff --git a/apps/web/src/routes/_app/datahub/instruments/$instrumentId/table.tsx b/apps/web/src/routes/_app/datahub/instruments/$instrumentId/table.tsx
new file mode 100644
index 000000000..b077b47cf
--- /dev/null
+++ b/apps/web/src/routes/_app/datahub/instruments/$instrumentId/table.tsx
@@ -0,0 +1,294 @@
+import { useMemo, useState } from 'react';
+
+import { camelToSnakeCase, toBasicISOString } from '@douglasneuroinformatics/libjs';
+import {
+  ActionDropdown,
+  Button,
+  DataTable,
+  DropdownMenu,
+  TanstackTable
+} from '@douglasneuroinformatics/libui/components';
+import { useTranslation } from '@douglasneuroinformatics/libui/hooks';
+import type { InstrumentKind } from '@opendatacapture/runtime-core';
+import { $SessionType } from '@opendatacapture/schemas/session';
+import type { SessionType } from '@opendatacapture/schemas/session';
+import { removeSubjectIdScope } from '@opendatacapture/subject-utils';
+import { createFileRoute } from '@tanstack/react-router';
+import { ChevronDownIcon } from 'lucide-react';
+
+import { InstrumentTable } from '@/components/InstrumentTable';
+import type { InstrumentRow } from '@/components/InstrumentTable';
+import { SelectEdition } from '@/components/SelectEdition';
+import { SortableHeader } from '@/components/SortableHeader';
+import { TimeDropdown } from '@/components/TimeDropdown';
+import { TruncatedCell } from '@/components/TruncatedCell';
+import { useCollectionMethodLabels } from '@/hooks/useCollectionMethodLabels';
+import { NO_SERIES, useInstrumentHubFacets } from '@/hooks/useInstrumentHubFacets';
+import { useInstrumentHubRecords } from '@/hooks/useInstrumentHubRecords';
+import { useInstrumentInfoById } from '@/hooks/useInstrumentInfoById';
+import type { InstrumentVisualizationRecord } from '@/hooks/useInstrumentVisualization';
+import { useRecordMetadataColumns } from '@/hooks/useRecordMetadataColumns';
+import { useAppStore } from '@/store';
+import { formatRecordValue } from '@/utils/record-value';
+
+const COLLECTION_METHODS = $SessionType.options;
+
+const FIXED_COLUMN_PREFIX = '__';
+
+const INDIVIDUAL_LABEL_KEY = 'individual';
+
+const Filters = ({ seriesOptions }: { seriesOptions: Map<string, null | string> }) => {
+  const navigate = Route.useNavigate();
+  const { methods, series } = Route.useSearch();
+  const { t } = useTranslation();
+  const collectionMethodLabels = useCollectionMethodLabels();
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const selectedMethods = methods ?? COLLECTION_METHODS;
+  const selectedSeries = series ?? Array.from(seriesOptions.keys());
+
+  const setMethods = (next: SessionType[]) => {
+    void navigate({ search: (prev) => ({ ...prev, methods: next }) });
+  };
+  const setSeries = (next: string[]) => {
+    void navigate({ search: (prev) => ({ ...prev, series: next }) });
+  };
+
+  return (
+    <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
+      <DropdownMenu.Trigger asChild>
+        <Button
+          className="flex items-center justify-between gap-2"
+          data-testid="instrument-hub-filters-trigger"
+          variant="outline"
+        >
+          {t('common.filters')}
+          <ChevronDownIcon className="opacity-50" />
+        </Button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content align="end" className="w-64">
+        <DropdownMenu.Label>
+          {t({ en: 'Collection method', es: 'Método de recopilación', fr: 'Méthode de collecte' })}
+        </DropdownMenu.Label>
+        <DropdownMenu.Group>
+          {COLLECTION_METHODS.map((method) => (
+            <DropdownMenu.CheckboxItem
+              checked={selectedMethods.includes(method)}
+              data-testid={`instrument-hub-filter-method-${method}`}
+              key={method}
+              onCheckedChange={(checked) => {
+                setMethods(checked ? [...selectedMethods, method] : selectedMethods.filter((item) => item !== method));
+              }}
+              onSelect={(e) => e.preventDefault()}
+            >
+              {collectionMethodLabels[method]}
+            </DropdownMenu.CheckboxItem>
+          ))}
+        </DropdownMenu.Group>
+        <DropdownMenu.Label>{t({ en: 'Series', es: 'Serie', fr: 'Série' })}</DropdownMenu.Label>
+        <DropdownMenu.Group>
+          {Array.from(seriesOptions, ([id, name]) => (
+            <DropdownMenu.CheckboxItem
+              checked={selectedSeries.includes(id)}
+              data-testid={`instrument-hub-filter-series-${id === NO_SERIES ? INDIVIDUAL_LABEL_KEY : id}`}
+              key={id}
+              onCheckedChange={(checked) => {
+                setSeries(checked ? [...selectedSeries, id] : selectedSeries.filter((item) => item !== id));
+              }}
+              onSelect={(e) => e.preventDefault()}
+            >
+              {id === NO_SERIES ? t({ en: 'Individual', es: 'Individual', fr: 'Individuel' }) : (name ?? id)}
+            </DropdownMenu.CheckboxItem>
+          ))}
+        </DropdownMenu.Group>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  );
+};
+
+function useSeriesMemberRows(
+  records: InstrumentVisualizationRecord[],
+  infoById: { [id: string]: { edition: null | number; kind: InstrumentKind; title: string } }
+) {
+  return useMemo<InstrumentRow[]>(() => {
+    const members = new Map<string, { lastCollectedAt: Date | null; subjectIds: Set<string>; total: number }>();
+    for (const record of records) {
+      let member = members.get(record.__instrumentId__);
+      if (!member) {
+        member = { lastCollectedAt: null, subjectIds: new Set(), total: 0 };
+        members.set(record.__instrumentId__, member);
+      }
+      member.total += 1;
+      member.subjectIds.add(record.__subjectId__);
+      if (!member.lastCollectedAt || record.__date__ > member.lastCollectedAt) {
+        member.lastCollectedAt = record.__date__;
+      }
+    }
+    return Array.from(members, ([id, member]) => ({
+      edition: infoById[id]?.edition ?? null,
+      id,
+      kind: infoById[id]?.kind ?? 'FORM',
+      lastCollectedAt: member.lastCollectedAt,
+      recordCount: member.total,
+      source: null,
+      subjectCount: member.subjectIds.size,
+      title: infoById[id]?.title ?? id
+    }));
+  }, [records, infoById]);
+}
+
+const RouteComponent = () => {
+  const navigate = Route.useNavigate();
+  const { instrumentId: seriesInstrumentId } = Route.useParams();
+  const [highlightedRowId, setHighlightedRowId] = useState<null | string>(null);
+  const { dl, records } = useInstrumentHubRecords();
+  const { editionOptions, isSeries, seriesOptions } = useInstrumentHubFacets();
+  const instrumentInfoById = useInstrumentInfoById({ allEditions: true });
+  const metadataColumns = useRecordMetadataColumns({ omitSeries: isSeries });
+  const subjectIdDisplaySetting = useAppStore((store) => store.currentGroup?.settings.subjectIdDisplayLength);
+  const search = Route.useSearch();
+
+  const { t } = useTranslation();
+  const seriesMembers = useSeriesMemberRows(records, instrumentInfoById);
+
+  const measureColumns = useMemo<TanstackTable.ColumnDef<InstrumentVisualizationRecord>[]>(() => {
+    const columns: TanstackTable.ColumnDef<InstrumentVisualizationRecord>[] = [];
+    for (const key in records[0]) {
+      if (!key.startsWith(FIXED_COLUMN_PREFIX)) {
+        columns.push({
+          accessorKey: key,
+          cell: (ctx) => {
+            const value = formatRecordValue(ctx.getValue());
+            return <TruncatedCell data-testid={`instrument-table-cell-${key}`} title={String(value)} value={value} />;
+          },
+          header: ({ column }) => <SortableHeader column={column} label={camelToSnakeCase(key).toUpperCase()} />,
+          id: key
+        });
+      }
+    }
+    return columns;
+  }, [records[0]]);
+
+  // Both subject destinations carry where they were opened from, so the subject hub's return comes
+  // back to this record table rather than dropping the reader on the subject index.
+  const fromHere = { fromInstrument: seriesInstrumentId, fromSeries: search.fromSeries };
+
+  const viewRecord = (record: InstrumentVisualizationRecord) => {
+    void navigate({
+      params: { recordId: record.__id__, subjectId: record.__subjectId__ },
+      search: fromHere,
+      to: '/datahub/subjects/$subjectId/table/$recordId'
+    });
+  };
+
+  if (isSeries) {
+    return (
+      <InstrumentTable
+        data-testid="instrument-hub-series-members"
+        recordExport={dl}
+        rows={seriesMembers}
+        onOpen={(row) => {
+          void navigate({
+            params: { instrumentId: row.id },
+            // Narrowed to this series, not every record the member instrument ever collected: the
+            // reader asked for the series' subjects, and the member's own page is reachable from
+            // the hub index when they want the whole set.
+            search: { fromSeries: seriesInstrumentId, series: [seriesInstrumentId] },
+            to: '/datahub/instruments/$instrumentId/table'
+          });
+        }}
+      />
+    );
+  }
+
+  return (
+    <div>
+      <div className="mb-3">
+        <div className="flex flex-col gap-2 lg:flex-row lg:justify-between">
+          <div className="flex flex-col gap-2 lg:flex-row">
+            <SelectEdition
+              options={editionOptions}
+              value={seriesInstrumentId}
+              onSelect={(id) => {
+                void navigate({ params: { instrumentId: id }, to: '/datahub/instruments/$instrumentId/table' });
+              }}
+            />
+          </div>
+          <div className="flex flex-col gap-2 lg:flex-row">
+            <TimeDropdown
+              setMinTime={(minDate) => {
+                void navigate({ search: (prev) => ({ ...prev, minDate: minDate ?? undefined }) });
+              }}
+            />
+            <Filters seriesOptions={seriesOptions} />
+            <ActionDropdown
+              data-spotlight-type="export-data-dropdown"
+              data-testid="instrument-hub-export-dropdown"
+              disabled={records.length === 0}
+              options={['TSV', 'TSV Long', 'JSON', 'CSV', 'CSV Long', 'Excel', 'Excel Long']}
+              title={t('core.download')}
+              triggerClassName="min-w-32"
+              onSelection={dl}
+            />
+          </div>
+        </div>
+      </div>
+      <div data-testid="instrument-hub-records-table">
+        <DataTable
+          disableSearch
+          columns={[
+            {
+              accessorKey: '__subjectId__',
+              cell: (ctx) => (
+                <span className="flex items-center">
+                  {removeSubjectIdScope(ctx.getValue() as string).slice(0, subjectIdDisplaySetting ?? 9)}
+                  <span
+                    className="hidden"
+                    data-row-selected={highlightedRowId === ctx.row.original.__id__ ? 'true' : 'false'}
+                  />
+                </span>
+              ),
+              header: ({ column }) => <SortableHeader column={column} label="SUBJECT" />,
+              id: '__subjectId__'
+            },
+            {
+              accessorKey: '__date__',
+              cell: (ctx) => {
+                const value = ctx.getValue();
+                return value instanceof Date ? toBasicISOString(value) : value;
+              },
+              header: ({ column }) => <SortableHeader column={column} label="DATE_COLLECTED" />,
+              id: '__date__'
+            },
+            ...metadataColumns,
+            ...measureColumns
+          ]}
+          data={records}
+          rowActions={[
+            {
+              label: t({ en: 'View Record', es: 'Ver registro', fr: "Voir l'enregistrement" }),
+              onSelect: viewRecord
+            },
+            {
+              label: t({ en: 'View Subject', es: 'Ver sujeto', fr: 'Voir le client' }),
+              onSelect: (record) => {
+                void navigate({
+                  params: { subjectId: record.__subjectId__ },
+                  search: fromHere,
+                  to: '/datahub/subjects/$subjectId/table'
+                });
+              }
+            }
+          ]}
+          onRowClick={(row) => setHighlightedRowId(row.__id__)}
+          onRowDoubleClick={viewRecord}
+        />
+      </div>
+    </div>
+  );
+};
+
+export const Route = createFileRoute('/_app/datahub/instruments/$instrumentId/table')({
+  component: RouteComponent
+});
diff --git a/apps/web/src/routes/_app/datahub/instruments/__tests__/index.test.tsx b/apps/web/src/routes/_app/datahub/instruments/__tests__/index.test.tsx
new file mode 100644
index 000000000..942c2eb26
--- /dev/null
+++ b/apps/web/src/routes/_app/datahub/instruments/__tests__/index.test.tsx
@@ -0,0 +1,162 @@
+import type { InstrumentRecordSummary } from '@opendatacapture/schemas/instrument-records';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import type { InstrumentRow } from '@/components/InstrumentTable';
+import { Route } from '@/routes/_app/datahub/instruments/index';
+
+import '@/services/i18n';
+
+type InstrumentInfo = {
+  details: { title: string };
+  id: string;
+  internal?: { edition: number; name: string };
+  kind: string;
+  sourceRepo?: null | { name: string };
+};
+
+const mocks = vi.hoisted(() => ({
+  infos: undefined as InstrumentInfo[] | undefined,
+  instrumentRecordSummaryQueryOptions: vi.fn((options: object) => ({
+    options,
+    queryKey: ['instrument-record-summary']
+  })),
+  navigate: vi.fn(),
+  seriesSummaries: [] as InstrumentRecordSummary[],
+  store: { currentGroup: null as null | { id: string } },
+  summaries: [] as InstrumentRecordSummary[]
+}));
+
+vi.mock('@tanstack/react-router', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('@tanstack/react-router')>()),
+  useNavigate: () => mocks.navigate
+}));
+vi.mock('@/hooks/useInstrumentInfoQuery', () => ({ useInstrumentInfoQuery: () => ({ data: mocks.infos }) }));
+vi.mock('@/hooks/useInstrumentRecordSummaryQuery', () => ({
+  instrumentRecordSummaryQueryOptions: mocks.instrumentRecordSummaryQueryOptions,
+  useInstrumentRecordSummaryQuery: ({ params }: { params?: { bySeries?: boolean } } = {}) => ({
+    data: params?.bySeries ? mocks.seriesSummaries : mocks.summaries
+  })
+}));
+vi.mock('@/store', () => ({
+  useAppStore: Object.assign((selector: (store: typeof mocks.store) => unknown) => selector(mocks.store), {
+    getState: () => mocks.store
+  })
+}));
+
+/** The listing itself has its own test; this one is about the rows the route builds for it. */
+vi.mock('@/components/InstrumentTable', () => ({
+  InstrumentTable: ({ onOpen, rows }: { onOpen: (row: InstrumentRow) => void; rows: InstrumentRow[] }) => (
+    <ul>
+      {rows.map((row) => (
+        <li key={row.id}>
+          <button data-testid={`row-${row.id}`} type="button" onClick={() => onOpen(row)}>
+            {JSON.stringify(row)}
+          </button>
+        </li>
+      ))}
+    </ul>
+  )
+}));
+
+const summaryOf = (
+  instrumentId: string,
+  overrides: Partial<InstrumentRecordSummary> = {}
+): InstrumentRecordSummary => ({
+  instrumentId,
+  lastCollectedAt: new Date('2026-01-01'),
+  recordCount: 3,
+  subjectCount: 2,
+  ...overrides
+});
+
+const scalar = (id: string, overrides: Partial<InstrumentInfo> = {}): InstrumentInfo => ({
+  details: { title: 'Happiness Questionnaire' },
+  id,
+  internal: { edition: 1, name: 'HQ' },
+  kind: 'FORM',
+  ...overrides
+});
+
+const renderHub = () => {
+  const Component = Route.options.component!;
+  render(<Component />);
+};
+
+const rowFor = (id: string) => JSON.parse(screen.getByTestId(`row-${id}`).textContent) as InstrumentRow;
+
+beforeEach(() => {
+  mocks.infos = [scalar('hq-1')];
+  mocks.navigate.mockReset();
+  mocks.seriesSummaries = [];
+  mocks.store.currentGroup = null;
+  mocks.summaries = [summaryOf('hq-1')];
+  mocks.instrumentRecordSummaryQueryOptions.mockClear();
+});
+
+afterEach(cleanup);
+
+describe('instrument hub index route', () => {
+  it('should list an instrument with the counts collected under it', () => {
+    renderHub();
+    expect(rowFor('hq-1')).toMatchObject({ edition: 1, kind: 'FORM', recordCount: 3, subjectCount: 2 });
+  });
+
+  // A series holds no records under its own id, so counting the per-instrument summary would list
+  // every series as empty.
+  it('should count a series from what it orchestrated rather than from its own records', () => {
+    mocks.infos = [{ details: { title: 'Happiness Series' }, id: 'series-1', kind: 'SERIES' }];
+    mocks.seriesSummaries = [summaryOf('series-1', { recordCount: 9, subjectCount: 4 })];
+    renderHub();
+    expect(rowFor('series-1')).toMatchObject({ edition: null, kind: 'SERIES', recordCount: 9, subjectCount: 4 });
+  });
+
+  // An instrument the caller may read but has never collected still belongs in the listing.
+  it('should list an instrument with no records as empty rather than omitting it', () => {
+    mocks.summaries = [];
+    renderHub();
+    expect(rowFor('hq-1')).toMatchObject({ lastCollectedAt: null, recordCount: 0, subjectCount: 0 });
+  });
+
+  it('should name the repository an imported instrument came from', () => {
+    mocks.infos = [scalar('hq-1', { sourceRepo: { name: 'odc-instruments' } })];
+    renderHub();
+    expect(rowFor('hq-1').source).toBe('odc-instruments');
+  });
+
+  it('should leave the source empty for an instrument that came from no repository', () => {
+    renderHub();
+    expect(rowFor('hq-1').source).toBeNull();
+  });
+
+  it('should list nothing while the catalog is still loading', () => {
+    mocks.infos = undefined;
+    renderHub();
+    expect(screen.queryAllByRole('listitem')).toHaveLength(0);
+  });
+
+  it('should open the record table of the instrument that was clicked', () => {
+    renderHub();
+    fireEvent.click(screen.getByTestId('row-hq-1'));
+    expect(mocks.navigate).toHaveBeenCalledWith({
+      params: { instrumentId: 'hq-1' },
+      to: '/datahub/instruments/$instrumentId/table'
+    });
+  });
+
+  it('should prefetch both summaries, so the listing never renders a row without its counts', async () => {
+    mocks.store.currentGroup = { id: 'group-1' };
+    const loader = Route.options.loader as (opts: {
+      context: { queryClient: { ensureQueryData: (options: unknown) => Promise<unknown> } };
+    }) => Promise<void>;
+    const ensureQueryData = vi.fn().mockResolvedValue([]);
+
+    await loader({ context: { queryClient: { ensureQueryData } } });
+
+    expect(mocks.instrumentRecordSummaryQueryOptions).toHaveBeenCalledWith({ params: { groupId: 'group-1' } });
+    expect(mocks.instrumentRecordSummaryQueryOptions).toHaveBeenCalledWith({
+      params: { bySeries: true, groupId: 'group-1' }
+    });
+    expect(ensureQueryData).toHaveBeenCalledTimes(2);
+  });
+});
diff --git a/apps/web/src/routes/_app/datahub/instruments/index.tsx b/apps/web/src/routes/_app/datahub/instruments/index.tsx
new file mode 100644
index 000000000..3ed79f02e
--- /dev/null
+++ b/apps/web/src/routes/_app/datahub/instruments/index.tsx
@@ -0,0 +1,84 @@
+import React, { useMemo } from 'react';
+
+import { Heading } from '@douglasneuroinformatics/libui/components';
+import { useTranslation } from '@douglasneuroinformatics/libui/hooks';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
+
+import { InstrumentTable } from '@/components/InstrumentTable';
+import type { InstrumentRow } from '@/components/InstrumentTable';
+import { PageHeader } from '@/components/PageHeader';
+import { useInstrumentInfoQuery } from '@/hooks/useInstrumentInfoQuery';
+import {
+  instrumentRecordSummaryQueryOptions,
+  useInstrumentRecordSummaryQuery
+} from '@/hooks/useInstrumentRecordSummaryQuery';
+import { useAppStore } from '@/store';
+
+const RouteComponent = () => {
+  const navigate = useNavigate();
+  const currentGroup = useAppStore((store) => store.currentGroup);
+  const { t } = useTranslation();
+
+  // Every edition is its own row, so the list shows an instrument's full collection history rather
+  // than only its current version.
+  const instrumentInfoQuery = useInstrumentInfoQuery({ params: { allEditions: true } });
+  const summaryQuery = useInstrumentRecordSummaryQuery({ params: { groupId: currentGroup?.id } });
+  // A series holds no records of its own, so its counts come from what it orchestrated.
+  const seriesSummaryQuery = useInstrumentRecordSummaryQuery({
+    params: { bySeries: true, groupId: currentGroup?.id }
+  });
+
+  const data = useMemo<InstrumentRow[]>(() => {
+    const summaries = new Map(summaryQuery.data.map((summary) => [summary.instrumentId, summary]));
+    const seriesSummaries = new Map(seriesSummaryQuery.data.map((summary) => [summary.instrumentId, summary]));
+    return (instrumentInfoQuery.data ?? []).map((info) => {
+      const isSeries = info.kind === 'SERIES';
+      const summary = (isSeries ? seriesSummaries : summaries).get(info.id);
+      return {
+        // A series has no `internal`, and therefore no edition to show.
+        edition: isSeries ? null : info.internal.edition,
+        id: info.id,
+        kind: info.kind,
+        lastCollectedAt: summary?.lastCollectedAt ?? null,
+        recordCount: summary?.recordCount ?? 0,
+        source: info.sourceRepo?.name ?? null,
+        subjectCount: summary?.subjectCount ?? 0,
+        title: info.details.title
+      };
+    });
+  }, [instrumentInfoQuery.data, seriesSummaryQuery.data, summaryQuery.data]);
+
+  const openInstrument = (row: InstrumentRow) => {
+    void navigate({ params: { instrumentId: row.id }, to: '/datahub/instruments/$instrumentId/table' });
+  };
+
+  return (
+    <React.Fragment>
+      <PageHeader>
+        <Heading className="text-center" variant="h2">
+          {t({
+            en: 'Instruments',
+            es: 'Instrumentos',
+            fr: 'Instruments'
+          })}
+        </Heading>
+      </PageHeader>
+      <InstrumentTable data-testid="instrument-hub-table" rows={data} onOpen={openInstrument} />
+    </React.Fragment>
+  );
+};
+
+export const Route = createFileRoute('/_app/datahub/instruments/')({
+  component: RouteComponent,
+  loader: async ({ context }) => {
+    const { currentGroup } = useAppStore.getState();
+    await Promise.all([
+      context.queryClient.ensureQueryData(
+        instrumentRecordSummaryQueryOptions({ params: { groupId: currentGroup?.id } })
+      ),
+      context.queryClient.ensureQueryData(
+        instrumentRecordSummaryQueryOptions({ params: { bySeries: true, groupId: currentGroup?.id } })
+      )
+    ]);
+  }
+});
diff --git a/apps/web/src/routes/_app/datahub/subjects/$subjectId/__tests__/graph.test.tsx b/apps/web/src/routes/_app/datahub/subjects/$subjectId/__tests__/graph.test.tsx
index d3eeb01c5..ffcfb280f 100644
--- a/apps/web/src/routes/_app/datahub/subjects/$subjectId/__tests__/graph.test.tsx
+++ b/apps/web/src/routes/_app/datahub/subjects/$subjectId/__tests__/graph.test.tsx
@@ -9,14 +9,13 @@ import { Route } from '@/routes/_app/datahub/subjects/$subjectId/graph';
 
 import '@/services/i18n';
 
-type CloneHandler = (document: Document, element: HTMLElement) => void;
-
 type DownloadFunction = (filename: string, fetchData: () => Blob, options: { blobType: string }) => Promise<void>;
 
 const mocks = vi.hoisted(() => ({
+  addNotification: vi.fn<(notification: { message: string; type: string }) => void>(),
   download: vi.fn<DownloadFunction>(),
   downloadSelection: { current: null as ((option: string) => void) | null },
-  html2canvas: vi.fn<(element: HTMLElement, options: { onclone: CloneHandler }) => Promise<HTMLCanvasElement>>(),
+  navigate: vi.fn(),
   setInstrumentId: vi.fn(),
   setMinDate: vi.fn(),
   useGraphData: vi.fn(),
@@ -26,7 +25,6 @@ const mocks = vi.hoisted(() => ({
   useMeasureOptions: vi.fn()
 }));
 
-vi.mock('html2canvas', () => ({ default: mocks.html2canvas }));
 vi.mock('@/hooks/useGraphData', () => ({ useGraphData: mocks.useGraphData }));
 vi.mock('@/hooks/useGraphLines', () => ({ useGraphLines: mocks.useGraphLines }));
 vi.mock('@/hooks/useInstrumentVisualization', () => ({ useInstrumentVisualization: mocks.useInstrumentVisualization }));
@@ -38,7 +36,9 @@ vi.mock('@/store', () => ({
 }));
 vi.mock('@douglasneuroinformatics/libui/hooks', async (importOriginal) => ({
   ...(await importOriginal<typeof import('@douglasneuroinformatics/libui/hooks')>()),
-  useDownload: () => mocks.download
+  useDownload: () => mocks.download,
+  useNotificationsStore: (selector: (store: { addNotification: typeof mocks.addNotification }) => unknown) =>
+    selector({ addNotification: mocks.addNotification })
 }));
 vi.mock('@douglasneuroinformatics/libui/components', async (importOriginal) => ({
   ...(await importOriginal<typeof import('@douglasneuroinformatics/libui/components')>()),
@@ -76,7 +76,7 @@ vi.mock('@douglasneuroinformatics/libui/components', async (importOriginal) => (
 }));
 vi.mock('@/components/LineGraph', () => ({
   LineGraph: ({ data, lines, xAxis }: { data: unknown; lines: unknown; xAxis: { key: string; label: string } }) => (
-    <span
+    <svg
       data-graph-data={JSON.stringify(data)}
       data-key={xAxis.key}
       data-label={xAxis.label}
@@ -95,6 +95,17 @@ vi.mock('@/components/SelectEdition', () => ({
     <button data-testid="select-edition" data-value={value} type="button" onClick={() => onSelect('instrument-3')} />
   )
 }));
+vi.mock('@/components/SelectChartPalette', () => ({
+  SelectChartPalette: ({ onSelect, slots, value }: { onSelect: (p: string) => void; slots: number; value: string }) => (
+    <button
+      data-slots={slots}
+      data-testid="select-palette"
+      data-value={value}
+      type="button"
+      onClick={() => onSelect('jade')}
+    />
+  )
+}));
 vi.mock('@/components/TimeDropdown', () => ({
   TimeDropdown: ({ disabled, setMinTime }: { disabled: boolean; setMinTime: (value: Date | null) => void }) => (
     <button
@@ -119,15 +130,54 @@ const graphData = [{ __time__: 1, score: 3 }];
 const lines: LineGraphLine[] = [{ name: 'Score', val: 'score' }];
 const pngBlob = new Blob(['png'], { type: 'image/png' });
 
-let clonedChart: HTMLElement | null = null;
 let encodedBlob: Blob | null = pngBlob;
 
+/**
+ * The capture draws onto a canvas, which happy-dom has no 2D context for — so the context is
+ * recorded instead, letting a test assert what the image would say.
+ */
+let drawnText: string[] = [];
+let drawnImages = 0;
+
+const fakeContext = {
+  arc: () => undefined,
+  beginPath: () => undefined,
+  drawImage: () => {
+    drawnImages += 1;
+  },
+  fill: () => undefined,
+  fillRect: () => undefined,
+  fillStyle: '',
+  fillText: (text: string) => {
+    drawnText.push(text);
+  },
+  font: '',
+  measureText: (text: string) => ({ width: text.length * 6 }),
+  scale: () => undefined,
+  textAlign: ''
+};
+
+/** A detached image never loads a data URL under happy-dom, so the decode is resolved here. */
+class FakeImage {
+  private onLoad: (() => void) | null = null;
+
+  set src(_value: string) {
+    queueMicrotask(() => this.onLoad?.());
+  }
+
+  addEventListener(type: string, listener: () => void) {
+    if (type === 'load') {
+      this.onLoad = listener;
+    }
+  }
+}
+
 const renderGraph = ({
   displayedInstrument = instrument,
   instrumentId = 'instrument-1',
   minDate = null
 }: {
-  displayedInstrument?: AnyUnilingualFormInstrument;
+  displayedInstrument?: AnyUnilingualFormInstrument | null;
   instrumentId?: null | string;
   minDate?: Date | null;
 } = {}) => {
@@ -156,23 +206,22 @@ const downloadGraph = async () => {
   await waitFor(() => expect(mocks.download).toHaveBeenCalled());
 };
 
-const clonedText = () => Array.from(clonedChart!.querySelectorAll(':scope > p'), (paragraph) => paragraph.textContent);
-
 beforeEach(() => {
-  clonedChart = null;
   encodedBlob = pngBlob;
-  mocks.html2canvas.mockImplementation((_, { onclone }) => {
-    clonedChart = document.createElement('div');
-    onclone(document, clonedChart);
-    const canvas = document.createElement('canvas');
-    canvas.toBlob = (callback) => callback(encodedBlob);
-    return Promise.resolve(canvas);
-  });
+  drawnText = [];
+  drawnImages = 0;
+  vi.stubGlobal('Image', FakeImage);
+  vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(
+    fakeContext as unknown as CanvasRenderingContext2D
+  );
+  vi.spyOn(HTMLCanvasElement.prototype, 'toBlob').mockImplementation((callback) => callback(encodedBlob));
   mocks.useGraphData.mockReturnValue(graphData);
   mocks.useGraphLines.mockReturnValue(lines);
   mocks.useLinearModelQuery.mockReturnValue({ data: models });
   mocks.useMeasureOptions.mockReturnValue(measureOptions);
   vi.spyOn(Route, 'useParams').mockReturnValue({ subjectId: 'abcdefghijkl' });
+  vi.spyOn(Route, 'useSearch').mockReturnValue({ palette: 'default' });
+  vi.spyOn(Route, 'useNavigate').mockReturnValue(mocks.navigate);
 });
 
 afterEach(() => {
@@ -183,10 +232,12 @@ afterEach(() => {
 });
 
 describe('subject graph route', () => {
-  it('should visualize only the form records of the subject in the url', () => {
+  // Every kind the subject holds records for, not forms alone: an interactive instrument's measures
+  // plot the same way, and filtering to forms left them unreachable from the dropdown.
+  it('should visualize the records of the subject in the url whatever kind collected them', () => {
     renderGraph();
     expect(mocks.useInstrumentVisualization).toHaveBeenCalledWith({
-      params: { kind: 'FORM', subjectId: 'abcdefghijkl' }
+      params: { subjectId: 'abcdefghijkl' }
     });
   });
 
@@ -235,7 +286,7 @@ describe('subject graph route', () => {
     renderGraph();
     selectAllMeasures();
     expect(mocks.useGraphData).toHaveBeenLastCalledWith({ models, records, selectedMeasures: measureOptions });
-    expect(lastSelectedMeasures()).toEqual({ selectedMeasures: measureOptions });
+    expect(lastSelectedMeasures()).toEqual({ palette: 'default', selectedMeasures: measureOptions });
   });
 
   it('should plot the graph data and lines against collection time', () => {
@@ -259,7 +310,7 @@ describe('subject graph route', () => {
       selectAllMeasures();
       fireEvent.click(screen.getByTestId(testId));
       expect(mocks.setInstrumentId).toHaveBeenCalledWith(id);
-      expect(lastSelectedMeasures()).toEqual({ selectedMeasures: [] });
+      expect(lastSelectedMeasures()).toEqual({ palette: 'default', selectedMeasures: [] });
     }
   );
 
@@ -273,13 +324,22 @@ describe('subject graph route', () => {
     fireEvent.click(screen.getByTestId('select-time'));
     expect(mocks.setMinDate).toHaveBeenCalledWith(new Date(2026, 0, 1));
   });
+
+  // The palette is held in the url so a shared link reproduces the colours it was made with.
+  it('should record the chosen palette in the url', () => {
+    renderGraph();
+    fireEvent.click(screen.getByTestId('select-palette'));
+    const [{ search }] = mocks.navigate.mock.lastCall as [{ search: (prev: object) => object }];
+    expect(search({ palette: 'default' })).toEqual({ palette: 'jade' });
+  });
 });
 
 describe('subject graph download', () => {
-  it('should capture the rendered chart', async () => {
+  // The chart's own SVG is rasterized, rather than the page being screenshotted around it.
+  it('should draw the rendered chart into the capture', async () => {
     renderGraph();
     await downloadGraph();
-    expect(mocks.html2canvas.mock.lastCall?.[0]).toBe(screen.getByTestId('subject-graph-chart'));
+    expect(drawnImages).toBe(1);
   });
 
   it('should save the capture as a png named after the truncated subject id', async () => {
@@ -295,8 +355,9 @@ describe('subject graph download', () => {
     renderGraph();
     selectAllMeasures();
     await downloadGraph();
-    expect(clonedText()).toEqual([
+    expect(drawnText).toEqual([
       'Unilingual Form of Subject: abcdefg',
+      'Score',
       'Measures: Score, Mood',
       'Timeframe: All time'
     ]);
@@ -307,7 +368,35 @@ describe('subject graph download', () => {
     vi.setSystemTime(new Date(2026, 9, 4));
     renderGraph({ minDate: new Date(2026, 0, 1) });
     await downloadGraph();
-    expect(clonedText()[2]).toBe('Timeframe: 2026-01-01 - 2026-10-04');
+    expect(drawnText.at(-1)).toBe('Timeframe: 2026-01-01 - 2026-10-04');
+  });
+
+  // An empty selection has nothing to name, and the line read as "Measures: " with a dangling colon.
+  it('should leave out the measures caption when none is selected', async () => {
+    renderGraph();
+    await downloadGraph();
+    expect(drawnText).toEqual(['Unilingual Form of Subject: abcdefg', 'Score', 'Timeframe: All time']);
+  });
+
+  // The catalog resolves after the first paint, so a capture taken immediately has no title to name.
+  it('should caption the capture without an instrument name before the instrument is loaded', async () => {
+    renderGraph({ displayedInstrument: null });
+    await downloadGraph();
+    expect(drawnText[0]).toBe(' of Subject: abcdefg');
+  });
+
+  it('should report a failure that is not an error, rather than letting it escape unreported', async () => {
+    vi.spyOn(console, 'error').mockImplementation(() => undefined);
+    vi.spyOn(HTMLCanvasElement.prototype, 'toBlob').mockImplementation(() => {
+      throw 'canvas exploded';
+    });
+    renderGraph();
+    fireEvent.click(screen.getByRole('button', { name: 'Download' }));
+    await waitFor(() => expect(mocks.addNotification).toHaveBeenCalled());
+    expect(mocks.addNotification).toHaveBeenCalledWith({
+      message: 'The chart could not be saved as an image: canvas exploded',
+      type: 'error'
+    });
   });
 
   it('should not capture anything once the graph has unmounted', async () => {
@@ -315,22 +404,23 @@ describe('subject graph download', () => {
     unmount();
     mocks.downloadSelection.current!('png');
     await act(() => Promise.resolve());
-    expect(mocks.html2canvas).not.toHaveBeenCalled();
+    expect(drawnImages).toBe(0);
+    expect(mocks.download).not.toHaveBeenCalled();
   });
 
-  it('should not save a file when the capture cannot be encoded as a png', async () => {
+  // A download that quietly does nothing is indistinguishable from a broken button, so the failure
+  // is reported rather than left to escape as an unhandled rejection.
+  it('should report the failure and save nothing when the capture cannot be encoded as a png', async () => {
     encodedBlob = null;
-    const vitestListeners = process.listeners('unhandledRejection');
-    process.removeAllListeners('unhandledRejection');
-    try {
-      const rejection = new Promise((resolve) => process.once('unhandledRejection', resolve));
-      renderGraph();
-      fireEvent.click(screen.getByRole('button', { name: 'Download' }));
-      // The page fires the download without awaiting it, so the failure surfaces as an unhandled rejection.
-      await expect(rejection).resolves.toEqual(new Error('blob does not exist'));
-    } finally {
-      vitestListeners.forEach((listener) => process.on('unhandledRejection', listener));
-    }
+    vi.spyOn(console, 'error').mockImplementation(() => undefined);
+    renderGraph();
+    fireEvent.click(screen.getByRole('button', { name: 'Download' }));
+    await waitFor(() => expect(mocks.addNotification).toHaveBeenCalled());
+    // The cause is named in the message, so a failure is diagnosable rather than merely reported.
+    expect(mocks.addNotification).toHaveBeenCalledWith({
+      message: 'The chart could not be saved as an image: The chart could not be encoded as an image',
+      type: 'error'
+    });
     expect(mocks.download).not.toHaveBeenCalled();
   });
 });
diff --git a/apps/web/src/routes/_app/datahub/subjects/$subjectId/__tests__/route.test.tsx b/apps/web/src/routes/_app/datahub/subjects/$subjectId/__tests__/route.test.tsx
index f99f791c7..54fe2c3c8 100644
--- a/apps/web/src/routes/_app/datahub/subjects/$subjectId/__tests__/route.test.tsx
+++ b/apps/web/src/routes/_app/datahub/subjects/$subjectId/__tests__/route.test.tsx
@@ -42,6 +42,7 @@ beforeEach(() => {
   mocks.outlet = () => 'Outlet Content';
   mocks.pathname = '/datahub/subjects/root$abcdefghijkl/table';
   vi.spyOn(Route, 'useParams').mockReturnValue({ subjectId: 'root$abcdefghijkl' });
+  vi.spyOn(Route, 'useSearch').mockReturnValue({});
 });
 
 afterEach(() => {
@@ -89,6 +90,21 @@ describe('subject layout route', () => {
     expect(screen.queryByTestId('subject-assignment')).toBeNull();
   });
 
+  it('should return to the subject index when the subject was opened from it', () => {
+    renderLayout();
+    expect(screen.getByTestId('subject-hub-back').getAttribute('href')).toBe('/datahub/subjects');
+  });
+
+  // Reached from an instrument's record table, the subject belongs to that listing — returning to
+  // the subject index would drop the reader somewhere they never were.
+  it('should return to the instrument record table the subject was opened from', () => {
+    vi.spyOn(Route, 'useSearch').mockReturnValue({ fromInstrument: 'hq-1' });
+    renderLayout();
+    expect(screen.getByTestId('subject-hub-back').getAttribute('href')).toBe(
+      '/datahub/instruments/$instrumentId/table'
+    );
+  });
+
   it('should render the selected tab page below the tabs', () => {
     renderLayout();
     expect(screen.getByText('Outlet Content')).toBeTruthy();
diff --git a/apps/web/src/routes/_app/datahub/subjects/$subjectId/graph.tsx b/apps/web/src/routes/_app/datahub/subjects/$subjectId/graph.tsx
index 4ea8d444c..5cfbee8cc 100644
--- a/apps/web/src/routes/_app/datahub/subjects/$subjectId/graph.tsx
+++ b/apps/web/src/routes/_app/datahub/subjects/$subjectId/graph.tsx
@@ -3,12 +3,12 @@ import { useRef, useState } from 'react';
 import { toBasicISOString } from '@douglasneuroinformatics/libjs';
 import { ActionDropdown, ListboxDropdown } from '@douglasneuroinformatics/libui/components';
 import type { ListboxDropdownOption } from '@douglasneuroinformatics/libui/components';
-import { useDownload, useTranslation } from '@douglasneuroinformatics/libui/hooks';
-import type { AnyUnilingualFormInstrument } from '@opendatacapture/runtime-core';
+import { useDownload, useNotificationsStore, useTheme, useTranslation } from '@douglasneuroinformatics/libui/hooks';
 import { createFileRoute } from '@tanstack/react-router';
-import html2canvas from 'html2canvas';
+import { z } from 'zod/v4';
 
 import { LineGraph } from '@/components/LineGraph';
+import { SelectChartPalette } from '@/components/SelectChartPalette';
 import { SelectEdition } from '@/components/SelectEdition';
 import { SelectInstrument } from '@/components/SelectInstrument';
 import { TimeDropdown } from '@/components/TimeDropdown';
@@ -18,20 +18,26 @@ import { useInstrumentVisualization } from '@/hooks/useInstrumentVisualization';
 import { useLinearModelQuery } from '@/hooks/useLinearModelQuery';
 import { useMeasureOptions } from '@/hooks/useMeasureOptions';
 import { useAppStore } from '@/store';
+import { renderChartPng } from '@/utils/chart-image';
+import { CHART_PALETTE_NAMES } from '@/utils/chart-palette';
+import { inkColors, resolveTheme } from '@/utils/chart-theme';
 
 const RouteComponent = () => {
   const downloadCanvas = useDownload();
+  const addNotification = useNotificationsStore((store) => store.addNotification);
+  const [theme] = useTheme();
   const currentGroup = useAppStore((store) => store.currentGroup);
+  const navigate = Route.useNavigate();
   const params = Route.useParams();
+  const { palette } = Route.useSearch();
   const { editionOptions, instrument, instrumentId, instrumentOptions, minDate, records, setInstrumentId, setMinDate } =
     useInstrumentVisualization({
       params: {
-        kind: 'FORM',
         subjectId: params.subjectId
       }
     });
   const { t } = useTranslation();
-  const measureOptions = useMeasureOptions(instrument as AnyUnilingualFormInstrument);
+  const measureOptions = useMeasureOptions(instrument);
   const [selectedMeasures, setSelectedMeasures] = useState<ListboxDropdownOption[]>([]);
 
   const linearModelQuery = useLinearModelQuery({
@@ -47,56 +53,48 @@ const RouteComponent = () => {
     selectedMeasures
   });
 
-  const lines = useGraphLines({ selectedMeasures });
+  const lines = useGraphLines({ palette, selectedMeasures });
 
   const graphContainerRef = useRef<HTMLDivElement>(null);
 
   const handleGraphDownload = async () => {
-    if (!graphContainerRef.current) return;
-
-    const canvas = await html2canvas(graphContainerRef.current, {
-      onclone: (_, element) => {
-        const graphDesc = document.createElement('p');
-
-        const formType = instrument.details.title;
-        const subjectId = params.subjectId.slice(0, 7);
-
-        graphDesc.innerText = t('datahub.downloadInfo.subjectText', {
-          args: [formType, subjectId]
-        });
-
-        graphDesc.className = 'p-2 font-semibold text-center';
-        element.prepend(graphDesc);
-
-        const graphMeasure = document.createElement('p');
-        graphMeasure.innerText = t('datahub.downloadInfo.measurement');
-        graphMeasure.innerText += selectedMeasures.map((measure) => measure.label).join(', ');
-        graphMeasure.className = 'p-2 font-semibold';
-        element.append(graphMeasure);
-
-        const graphTime = document.createElement('p');
-        if (minDate) {
-          graphTime.innerText = t('datahub.downloadInfo.time');
-          graphTime.innerText += toBasicISOString(minDate) + ' - ' + toBasicISOString(new Date());
-
-          graphTime.className = 'p-2 font-semibold';
-          element.append(graphTime);
-        } else {
-          graphTime.innerText = t('datahub.downloadInfo.allTime');
-
-          graphTime.className = 'p-2 font-semibold';
-          element.append(graphTime);
-        }
-      }
-    });
-    const blobCanvas = await new Promise<Blob>((resolve, reject) => {
-      canvas.toBlob((blob) => {
-        if (!blob) return reject(new Error('blob does not exist'));
-        return resolve(blob);
+    if (!graphContainerRef.current) {
+      return;
+    }
+    const subjectId = params.subjectId.slice(0, 7);
+    const footnotes = [
+      minDate
+        ? t('datahub.downloadInfo.time') + toBasicISOString(minDate) + ' - ' + toBasicISOString(new Date())
+        : t('datahub.downloadInfo.allTime')
+    ];
+    if (selectedMeasures.length > 0) {
+      footnotes.unshift(
+        t('datahub.downloadInfo.measurement') + selectedMeasures.map((measure) => measure.label).join(', ')
+      );
+    }
+    try {
+      const blob = await renderChartPng(graphContainerRef.current, {
+        footnotes,
+        headings: [t('datahub.downloadInfo.subjectText', { args: [instrument?.details.title ?? '', subjectId] })],
+        // The trend lines carry `legendType: 'none'` on screen and are left out here for the same
+        // reason: each one restates the measure it accompanies.
+        legend: lines
+          .filter((line) => line.legendType !== 'none')
+          .map((line) => ({ color: line.stroke ?? inkColors[resolveTheme(theme)], label: line.name })),
+        mode: resolveTheme(theme)
       });
-    });
-
-    await downloadCanvas(`${params.subjectId.slice(0, 7)}.png`, () => blobCanvas, { blobType: 'image/png' });
+      await downloadCanvas(`${subjectId}.png`, () => blob, { blobType: 'image/png' });
+    } catch (error) {
+      console.error(error);
+      addNotification({
+        message: `${t({
+          en: 'The chart could not be saved as an image',
+          es: 'No se pudo guardar el gráfico como imagen',
+          fr: "Le graphique n'a pas pu être enregistré comme image"
+        })}: ${error instanceof Error ? error.message : String(error)}`,
+        type: 'error'
+      });
+    }
   };
 
   return (
@@ -141,6 +139,15 @@ const RouteComponent = () => {
             <div data-testid="time-select-dropdown-container">
               <TimeDropdown disabled={!instrumentId} setMinTime={setMinDate} />
             </div>
+            <div data-testid="palette-select-dropdown-container">
+              <SelectChartPalette
+                slots={Math.max(selectedMeasures.length, 1)}
+                value={palette}
+                onSelect={(selected) => {
+                  void navigate({ search: (prev) => ({ ...prev, palette: selected }) });
+                }}
+              />
+            </div>
             <div className="relative w-full whitespace-nowrap" data-testid="download-button-container">
               <ActionDropdown
                 widthFull
@@ -176,5 +183,8 @@ const RouteComponent = () => {
 };
 
 export const Route = createFileRoute('/_app/datahub/subjects/$subjectId/graph')({
-  component: RouteComponent
+  component: RouteComponent,
+  validateSearch: z.object({
+    palette: z.enum(CHART_PALETTE_NAMES).default('default')
+  })
 });
diff --git a/apps/web/src/routes/_app/datahub/subjects/$subjectId/route.tsx b/apps/web/src/routes/_app/datahub/subjects/$subjectId/route.tsx
index 0ca63c90d..3011d679b 100644
--- a/apps/web/src/routes/_app/datahub/subjects/$subjectId/route.tsx
+++ b/apps/web/src/routes/_app/datahub/subjects/$subjectId/route.tsx
@@ -2,8 +2,10 @@ import React from 'react';
 
 import { Heading } from '@douglasneuroinformatics/libui/components';
 import { useTranslation } from '@douglasneuroinformatics/libui/hooks';
+import { ChevronLeftIcon } from '@heroicons/react/24/solid';
 import { removeSubjectIdScope } from '@opendatacapture/subject-utils';
-import { createFileRoute, Outlet } from '@tanstack/react-router';
+import { createFileRoute, Link, Outlet } from '@tanstack/react-router';
+import { z } from 'zod/v4';
 
 import { LoadingFallback } from '@/components/LoadingFallback';
 import { PageHeader } from '@/components/PageHeader';
@@ -13,6 +15,7 @@ import { useAppStore } from '@/store';
 
 const RouteComponent = () => {
   const params = Route.useParams();
+  const search = Route.useSearch();
   const { t } = useTranslation('datahub');
   const subjectId = params.subjectId;
   const basePathname = `/datahub/subjects/${subjectId}`;
@@ -34,6 +37,18 @@ const RouteComponent = () => {
           )}
         </Heading>
       </PageHeader>
+      {/* A subject reached from an instrument's record table belongs to that listing, not to the
+          subject index — so the return goes back to where the reader actually was. */}
+      <Link
+        className="text-muted-foreground focus-visible:ring-ring mb-3 flex items-center gap-0.5 self-start rounded-sm text-[11px] font-semibold tracking-widest uppercase transition-colors hover:text-blue-600 focus-visible:ring-1 focus-visible:outline-hidden dark:hover:text-blue-400"
+        data-testid="subject-hub-back"
+        params={search.fromInstrument ? { instrumentId: search.fromInstrument } : undefined}
+        search={search.fromInstrument ? { fromSeries: search.fromSeries } : undefined}
+        to={search.fromInstrument ? '/datahub/instruments/$instrumentId/table' : '/datahub/subjects'}
+      >
+        <ChevronLeftIcon className="h-3.5 w-3.5" />
+        {t({ en: 'Return', es: 'Volver', fr: 'Retour' })}
+      </Link>
       <div className="mb-5 flex">
         <TabLink label={t('layout.tabs.table')} pathname={`${basePathname}/table`} testId="subject-table-tab" />
         <TabLink label={t('layout.tabs.graph')} pathname={`${basePathname}/graph`} testId="subject-graph" />
@@ -53,5 +68,11 @@ const RouteComponent = () => {
 };
 
 export const Route = createFileRoute('/_app/datahub/subjects/$subjectId')({
-  component: RouteComponent
+  component: RouteComponent,
+  validateSearch: z.object({
+    /** The instrument whose record table this subject was opened from, if it was */
+    fromInstrument: z.string().optional(),
+    /** Carried through so returning to that instrument keeps its own return pointing at the series */
+    fromSeries: z.string().optional()
+  })
 });
diff --git a/apps/web/src/routes/_app/datahub/subjects/$subjectId/table/__tests__/index.test.tsx b/apps/web/src/routes/_app/datahub/subjects/$subjectId/table/__tests__/index.test.tsx
index e03edb878..7723ff72d 100644
--- a/apps/web/src/routes/_app/datahub/subjects/$subjectId/table/__tests__/index.test.tsx
+++ b/apps/web/src/routes/_app/datahub/subjects/$subjectId/table/__tests__/index.test.tsx
@@ -65,12 +65,14 @@ afterEach(() => {
 describe('subject table route', () => {
   it('should add a snake-cased column for each record field, so the headers match the exported column names', () => {
     renderTable([record()]);
-    expect(headers()).toEqual(['DATE_COLLECTED', 'TOTAL_SCORE']);
+    expect(headers()).toEqual(['DATE_COLLECTED', 'COLLECTION_METHOD', 'SERIES', 'TOTAL_SCORE']);
   });
 
-  it('should show only the collection date column when there are no records', () => {
+  // The provenance columns describe where a record came from rather than what it measured, so they
+  // are fixed rather than derived from the records — they stand even with nothing to describe.
+  it('should show the date and provenance columns when there are no records', () => {
     renderTable([]);
-    expect(headers()).toEqual(['DATE_COLLECTED']);
+    expect(headers()).toEqual(['DATE_COLLECTED', 'COLLECTION_METHOD', 'SERIES']);
   });
 
   it('should render a multiple-choice answer as comma-separated text', () => {
diff --git a/apps/web/src/routes/_app/datahub/subjects/$subjectId/table/index.tsx b/apps/web/src/routes/_app/datahub/subjects/$subjectId/table/index.tsx
index 77ecd6eb9..e15731f23 100644
--- a/apps/web/src/routes/_app/datahub/subjects/$subjectId/table/index.tsx
+++ b/apps/web/src/routes/_app/datahub/subjects/$subjectId/table/index.tsx
@@ -8,8 +8,10 @@ import { createFileRoute } from '@tanstack/react-router';
 import { SelectEdition } from '@/components/SelectEdition';
 import { SelectInstrument } from '@/components/SelectInstrument';
 import { TimeDropdown } from '@/components/TimeDropdown';
+import { TruncatedCell } from '@/components/TruncatedCell';
 import { useInstrumentVisualization } from '@/hooks/useInstrumentVisualization';
 import type { InstrumentVisualizationRecord } from '@/hooks/useInstrumentVisualization';
+import { useRecordMetadataColumns } from '@/hooks/useRecordMetadataColumns';
 import { formatRecordValue } from '@/utils/record-value';
 
 const RouteComponent = () => {
@@ -21,6 +23,7 @@ const RouteComponent = () => {
     });
 
   const { t } = useTranslation();
+  const metadataColumns = useRecordMetadataColumns();
 
   const columns = useMemo<TanstackTable.ColumnDef<InstrumentVisualizationRecord>[]>(() => {
     const columns: TanstackTable.ColumnDef<InstrumentVisualizationRecord>[] = [];
@@ -29,15 +32,8 @@ const RouteComponent = () => {
         columns.push({
           accessorKey: subItem,
           cell: (ctx) => {
-            const value = ctx.getValue();
-            return (
-              <p
-                className="overflow-hidden text-ellipsis whitespace-nowrap"
-                data-testid={`subject-table-cell-${subItem}`}
-              >
-                {formatRecordValue(value)}
-              </p>
-            );
+            const value = formatRecordValue(ctx.getValue());
+            return <TruncatedCell data-testid={`subject-table-cell-${subItem}`} title={String(value)} value={value} />;
           },
           header: camelToSnakeCase(subItem).toUpperCase(),
           id: subItem
@@ -86,6 +82,7 @@ const RouteComponent = () => {
               },
               header: 'DATE_COLLECTED'
             },
+            ...metadataColumns,
             ...columns
           ]}
           data={records}
diff --git a/apps/web/src/routes/_app/datahub/subjects/__tests__/index.test.tsx b/apps/web/src/routes/_app/datahub/subjects/__tests__/index.test.tsx
index 2d6e30dc3..0545b5929 100644
--- a/apps/web/src/routes/_app/datahub/subjects/__tests__/index.test.tsx
+++ b/apps/web/src/routes/_app/datahub/subjects/__tests__/index.test.tsx
@@ -23,7 +23,7 @@ const mocks = vi.hoisted(() => ({
   addNotification: vi.fn<(notification: Notification) => void>(),
   axios: { get: vi.fn<(url: string, config?: AxiosGetConfig) => Promise<unknown>>() },
   download: vi.fn<(filename: string, data: string) => Promise<void>>(),
-  downloadExcel: vi.fn(),
+  downloadSubjectTableExcel: vi.fn(),
   navigate: vi.fn(),
   store: {
     currentGroup: null as null | StoreGroup,
@@ -66,7 +66,7 @@ vi.mock('@/store', () => ({
     getState: () => mocks.store
   })
 }));
-vi.mock('@/utils/excel', () => ({ downloadExcel: mocks.downloadExcel }));
+vi.mock('@/utils/excel', () => ({ downloadSubjectTableExcel: mocks.downloadSubjectTableExcel }));
 
 const subject = (id: string, overrides: Partial<Subject> = {}): Subject => ({
   createdAt: new Date('2026-01-01'),
@@ -87,6 +87,8 @@ const exportEntry = (subjectId: string): InstrumentRecordsExport[number] => ({
   instrumentEdition: 1,
   instrumentName: 'HAPPINESS_QUESTIONNAIRE',
   measure: 'overallHappiness',
+  seriesId: null,
+  seriesName: null,
   sessionDate: '2026-01-01',
   sessionId: 'session-1',
   sessionType: 'IN_PERSON',
@@ -123,7 +125,7 @@ const dateOfBirthInputs = () => {
 };
 
 const exportAs = (option: string) => {
-  fireEvent.keyDown(screen.getByRole('button', { name: 'Export' }), { key: 'Enter' });
+  fireEvent.keyDown(screen.getByRole('button', { name: 'Download' }), { key: 'Enter' });
   fireEvent.click(screen.getByRole('menuitem', { name: option }));
 };
 
@@ -471,7 +473,8 @@ describe('data hub export', () => {
     await settleExport();
     const [filename, content] = mocks.download.mock.calls[0] ?? [];
     expect(filename).toMatch(/^jdoe_.+\.json$/);
-    expect(JSON.parse(content ?? 'null')).toEqual([exportEntry('bob')]);
+    const { seriesId: _, ...expected } = exportEntry('bob');
+    expect(JSON.parse(content ?? 'null')).toEqual([expected]);
   });
 
   it('should download a CSV together with a README explaining its long format', async () => {
@@ -491,7 +494,12 @@ describe('data hub export', () => {
     renderDataHub();
     exportAs('Excel');
     await settleExport();
-    expect(mocks.downloadExcel).toHaveBeenCalledWith(expect.stringMatching(/^jdoe_.+\.xlsx$/), [exportEntry('bob')]);
+    const { seriesId: _, ...expected } = exportEntry('bob');
+    expect(mocks.downloadSubjectTableExcel).toHaveBeenCalledWith(
+      expect.stringMatching(/^jdoe_.+\.xlsx$/),
+      [expected],
+      'Records'
+    );
   });
 
   it('should confirm a successful export', async () => {
diff --git a/apps/web/src/routes/_app/datahub/subjects/index.tsx b/apps/web/src/routes/_app/datahub/subjects/index.tsx
index 8b8b349c6..d31faf644 100644
--- a/apps/web/src/routes/_app/datahub/subjects/index.tsx
+++ b/apps/web/src/routes/_app/datahub/subjects/index.tsx
@@ -20,6 +20,7 @@ import { ChevronDownIcon, UserSearchIcon } from 'lucide-react';
 import { unpack } from 'msgpackr/unpack';
 import { unparse } from 'papaparse';
 
+import { CollectedFilterMenu } from '@/components/CollectedFilterMenu';
 import { ColorTagCell } from '@/components/ColorTagCell';
 import { IdentificationForm } from '@/components/IdentificationForm';
 import { PageHeader } from '@/components/PageHeader';
@@ -28,13 +29,12 @@ import { SortableHeader } from '@/components/SortableHeader';
 import { subjectRecordSummaryQueryOptions, useSubjectRecordSummaryQuery } from '@/hooks/useSubjectRecordSummaryQuery';
 import { subjectsQueryOptions, useSubjectsQuery } from '@/hooks/useSubjectsQuery';
 import { useAppStore } from '@/store';
-import { downloadExcel } from '@/utils/excel';
+import { DEFAULT_COLLECTED_FILTER, matchesCollectedFilter } from '@/utils/collected-filter';
+import type { CollectedFilter } from '@/utils/collected-filter';
+import { downloadSubjectTableExcel } from '@/utils/excel';
 import { getListedSubjectIds } from '@/utils/table';
 import { getSexColor } from '@/utils/tag-colors';
 
-/** Shown where a subject has never had a record collected */
-const EMPTY_CELL = '—';
-
 type DateFilter = {
   allowNull: boolean;
   max: Date | null;
@@ -47,39 +47,6 @@ type HasSearchStringFilter = {
   searchString: string;
 };
 
-/** A named window over the collection date, or an explicit one the user typed */
-type CollectedPreset =
-  'all' | 'custom' | 'pastMonth' | 'pastSixMonths' | 'pastThreeMonths' | 'pastTwoYears' | 'pastWeek' | 'pastYear';
-
-type CollectedFilter = {
-  max: Date | null;
-  min: Date | null;
-  preset: CollectedPreset;
-};
-
-/** The earliest date a preset admits, or null for no lower bound */
-function presetMinDate(preset: CollectedPreset): Date | null {
-  const now = new Date();
-  const monthsAgo = (count: number) => new Date(new Date(now).setMonth(now.getMonth() - count));
-  const yearsAgo = (count: number) => new Date(new Date(now).setFullYear(now.getFullYear() - count));
-  switch (preset) {
-    case 'pastMonth':
-      return monthsAgo(1);
-    case 'pastSixMonths':
-      return monthsAgo(6);
-    case 'pastThreeMonths':
-      return monthsAgo(3);
-    case 'pastTwoYears':
-      return yearsAgo(2);
-    case 'pastWeek':
-      return new Date(new Date(now).setDate(now.getDate() - 7));
-    case 'pastYear':
-      return yearsAgo(1);
-    default:
-      return null;
-  }
-}
-
 const Filters: React.FC<{
   minRecords: string;
   setMinRecords: (v: string) => void;
@@ -226,70 +193,11 @@ const Filters: React.FC<{
               onChange={(event) => setMinRecords(event.target.value)}
             />
           </div>
-          <div className="relative flex items-center justify-between gap-1 rounded-xs px-2 pt-1.5 pb-1 text-sm transition-colors">
-            <span className="pb-1">{t({ en: 'Collected:', es: 'Recopilado:', fr: 'Collecté :' })}</span>
-            {/* A native select renders with the user agent's own white background, which reads as a
-                bright block in dark mode — so it carries the popover surface tokens explicitly, and
-                the options do too, since those are painted separately. */}
-            <select
-              className="bg-popover text-foreground [&>option]:bg-popover [&>option]:text-foreground pointer-events-auto rounded-sm border-b pb-0.5"
-              data-testid="datahub-filter-collected-preset"
-              value={collectedFilter.preset}
-              onChange={(event) => {
-                const preset = event.target.value as CollectedPreset;
-                collectedColumn.setFilterValue((prevValue: CollectedFilter): CollectedFilter => ({
-                  // A preset owns both bounds; only `custom` leaves them to the user, and it
-                  // starts from whatever window the preset had so the dates are a nudge, not blank.
-                  max: preset === 'custom' ? prevValue.max : null,
-                  min: preset === 'custom' ? (prevValue.min ?? presetMinDate(prevValue.preset)) : presetMinDate(preset),
-                  preset
-                }));
-              }}
-            >
-              <option value="all">{t({ en: 'Any time', es: 'Cualquier fecha', fr: 'Toute période' })}</option>
-              <option value="pastWeek">{t({ en: 'This week', es: 'Esta semana', fr: 'Cette semaine' })}</option>
-              <option value="pastMonth">{t({ en: 'This month', es: 'Este mes', fr: 'Ce mois-ci' })}</option>
-              <option value="pastThreeMonths">{t({ en: '3 months', es: '3 meses', fr: '3 mois' })}</option>
-              <option value="pastSixMonths">{t({ en: '6 months', es: '6 meses', fr: '6 mois' })}</option>
-              <option value="pastYear">{t({ en: 'This year', es: 'Este año', fr: 'Cette année' })}</option>
-              <option value="pastTwoYears">{t({ en: '2 years', es: '2 años', fr: '2 ans' })}</option>
-              <option value="custom">{t({ en: 'Custom', es: 'Personalizado', fr: 'Personnalisé' })}</option>
-            </select>
-          </div>
-          {collectedFilter.preset === 'custom' && (
-            <React.Fragment>
-              <div className="relative flex items-center justify-between gap-1 rounded-xs px-2 pt-1.5 pb-1 text-sm transition-colors">
-                <span className="pb-1">{t({ en: 'Min:', es: 'Mín.:', fr: 'Min :' })}</span>
-                <input
-                  className="bg-popover text-foreground pointer-events-auto rounded-sm border-b pb-0.5"
-                  data-testid="datahub-filter-collected-min"
-                  type="date"
-                  value={collectedFilter.min ? toBasicISOString(collectedFilter.min) : ''}
-                  onChange={(event) => {
-                    collectedColumn.setFilterValue((prevValue: CollectedFilter): CollectedFilter => ({
-                      ...prevValue,
-                      min: event.target.valueAsDate
-                    }));
-                  }}
-                />
-              </div>
-              <div className="relative flex items-center justify-between gap-1 rounded-xs px-2 pt-1.5 pb-1 text-sm transition-colors">
-                <span className="pb-1">{t({ en: 'Max:', es: 'Máx.:', fr: 'Max :' })}</span>
-                <input
-                  className="bg-popover text-foreground pointer-events-auto rounded-sm border-b pb-0.5"
-                  data-testid="datahub-filter-collected-max"
-                  type="date"
-                  value={collectedFilter.max ? toBasicISOString(collectedFilter.max) : ''}
-                  onChange={(event) => {
-                    collectedColumn.setFilterValue((prevValue: CollectedFilter): CollectedFilter => ({
-                      ...prevValue,
-                      max: event.target.valueAsDate
-                    }));
-                  }}
-                />
-              </div>
-            </React.Fragment>
-          )}
+          <CollectedFilterMenu
+            testIdPrefix="datahub-filter"
+            value={collectedFilter}
+            onChange={(next) => collectedColumn.setFilterValue(next)}
+          />
         </DropdownMenu.Group>
       </DropdownMenu.Content>
     </DropdownMenu>
@@ -369,15 +277,17 @@ const Toggles: React.FC<{
           );
         }
 
+        const exportData = filteredData.map(({ seriesId: _, ...rest }) => rest);
+
         switch (option) {
           case 'CSV':
             void download('README.txt', t('datahub.index.table.exportHelpText'));
-            void download(`${baseFilename}.csv`, unparse(filteredData));
+            void download(`${baseFilename}.csv`, unparse(exportData));
             break;
           case 'Excel':
-            return downloadExcel(`${baseFilename}.xlsx`, filteredData);
+            return downloadSubjectTableExcel(`${baseFilename}.xlsx`, exportData, 'Records');
           case 'JSON':
-            return download(`${baseFilename}.json`, JSON.stringify(filteredData, null, 2));
+            return download(`${baseFilename}.json`, JSON.stringify(exportData, null, 2));
         }
       })
       .then(() => {
@@ -439,7 +349,7 @@ const Toggles: React.FC<{
         data-spotlight-type="export-data-dropdown"
         data-testid="datahub-export-dropdown"
         options={['CSV', 'JSON', 'Excel']}
-        title={t('datahub.index.table.export')}
+        title={t('core.download')}
         onSelection={handleExportSelection}
       />
     </div>
@@ -579,19 +489,10 @@ const MasterDataTable: React.FC<{
             accessorFn: (subject) => summaries.get(subject.id)?.lastCollectedAt ?? null,
             cell: (ctx) => {
               const value = ctx.getValue() as Date | null;
-              return value ? toBasicISOString(value) : EMPTY_CELL;
-            },
-            filterFn: (row, id, filter: CollectedFilter) => {
-              const value = row.getValue(id);
-              // A subject with nothing collected cannot satisfy a window, but must survive "any time".
-              if (!value) {
-                return filter.preset === 'all';
-              }
-              if (filter.min && value < filter.min) {
-                return false;
-              }
-              return !(filter.max && value > filter.max);
+              return value ? toBasicISOString(value) : t({ en: 'None', es: 'Ninguno', fr: 'Aucun' });
             },
+            filterFn: (row, id, filter: CollectedFilter) =>
+              matchesCollectedFilter(row.getValue<Date | null>(id), filter),
             header: ({ column }) => (
               <SortableHeader
                 column={column}
@@ -627,7 +528,7 @@ const MasterDataTable: React.FC<{
             },
             {
               id: 'lastCollectedAt',
-              value: { max: null, min: null, preset: 'all' } satisfies CollectedFilter
+              value: DEFAULT_COLLECTED_FILTER
             }
           ]
         }}
diff --git a/apps/web/src/translations/datahub.json b/apps/web/src/translations/datahub.json
index da829e402..295bbc484 100644
--- a/apps/web/src/translations/datahub.json
+++ b/apps/web/src/translations/datahub.json
@@ -105,9 +105,9 @@
         "fr": "Exporter"
       },
       "exportHelpText": {
-        "en": "This data is provided in an ultra-long format. Each row corresponds to the value for a single measure. Rows corresponding to the same record will have matching subject identifiers and timestamps.",
-        "es": "Estos datos se proporcionan en un formato ultralargo. Cada fila corresponde al valor de una sola medida. Las filas correspondientes al mismo registro tendrán identificadores de sujeto y marcas de tiempo coincidentes.",
-        "fr": "Ces données sont fournies dans un format ultra-long. Chaque ligne correspond à la valeur d'une seule mesure. Les lignes correspondant à un même enregistrement auront des identifiants de sujet et des horodatages correspondants."
+        "en": "This data is provided in an ultra-long format. Each row corresponds to the value for a single measure. Rows corresponding to the same record will have matching subject identifiers and timestamps. The sessionType column is the data collection method. The seriesId and seriesName columns name the series that collected the record, and are empty for a record collected individually.",
+        "es": "Estos datos se proporcionan en un formato ultralargo. Cada fila corresponde al valor de una sola medida. Las filas correspondientes al mismo registro tendrán identificadores de sujeto y marcas de tiempo coincidentes. La columna sessionType es el método de recopilación de datos. Las columnas seriesId y seriesName indican la serie que recopiló el registro y están vacías si el registro se recopiló individualmente.",
+        "fr": "Ces données sont fournies dans un format ultra-long. Chaque ligne correspond à la valeur d'une seule mesure. Les lignes correspondant à un même enregistrement auront des identifiants de sujet et des horodatages correspondants. La colonne sessionType correspond à la méthode de collecte des données. Les colonnes seriesId et seriesName désignent la série qui a collecté l'enregistrement et sont vides pour un enregistrement collecté individuellement."
       },
       "subject": {
         "en": "Subject",
@@ -156,6 +156,11 @@
       "es": "Seleccione un instrumento",
       "fr": "Sélectionnez un instrument"
     },
+    "selectMeasures": {
+      "en": "Please select one or more measures",
+      "es": "Por favor, seleccione una o más medidas",
+      "fr": "Veuillez sélectionner au moins une mesure"
+    },
     "timeframe": {
       "en": "Timeframe",
       "es": "Periodo",
diff --git a/apps/web/src/translations/session.json b/apps/web/src/translations/session.json
index aa61bc4be..8b45222d7 100644
--- a/apps/web/src/translations/session.json
+++ b/apps/web/src/translations/session.json
@@ -45,6 +45,11 @@
       "en": "Retrospective",
       "es": "Retrospectiva",
       "fr": "Rétrospective"
+    },
+    "remote": {
+      "en": "Remote",
+      "es": "A distancia",
+      "fr": "À distance"
     }
   }
 }
diff --git a/apps/web/src/utils/__tests__/chart-image.test.ts b/apps/web/src/utils/__tests__/chart-image.test.ts
new file mode 100644
index 000000000..917777789
--- /dev/null
+++ b/apps/web/src/utils/__tests__/chart-image.test.ts
@@ -0,0 +1,146 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { chartImageFilename, renderChartPng } from '@/utils/chart-image';
+
+const pngBlob = new Blob(['png'], { type: 'image/png' });
+
+let encodedBlob: Blob | null = pngBlob;
+let drawnText: string[] = [];
+let imageSource = '';
+
+const fakeContext = {
+  arc: () => undefined,
+  beginPath: () => undefined,
+  drawImage: () => undefined,
+  fill: () => undefined,
+  fillRect: () => undefined,
+  fillStyle: '',
+  fillText: (text: string) => {
+    drawnText.push(text);
+  },
+  font: '',
+  measureText: (text: string) => ({ width: text.length * 6 }),
+  scale: () => undefined,
+  textAlign: ''
+};
+
+let decodeFails = false;
+
+/** A detached image never loads a data URL under happy-dom, so the decode is resolved here. */
+class FakeImage {
+  private listeners: { [type: string]: (() => void) | undefined } = {};
+
+  set src(value: string) {
+    imageSource = value;
+    queueMicrotask(() => this.listeners[decodeFails ? 'error' : 'load']?.());
+  }
+
+  addEventListener(type: string, listener: () => void) {
+    this.listeners[type] = listener;
+  }
+}
+
+const chartCard = (markup = '<svg width="600" height="300"><text>tick</text></svg>') => {
+  const container = document.createElement('div');
+  container.innerHTML = markup;
+  return container;
+};
+
+beforeEach(() => {
+  decodeFails = false;
+  encodedBlob = pngBlob;
+  drawnText = [];
+  imageSource = '';
+  vi.stubGlobal('Image', FakeImage);
+  vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(
+    fakeContext as unknown as CanvasRenderingContext2D
+  );
+  vi.spyOn(HTMLCanvasElement.prototype, 'toBlob').mockImplementation((callback) => callback(encodedBlob));
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+
+describe('renderChartPng', () => {
+  it('should encode the chart as a png', async () => {
+    await expect(renderChartPng(chartCard(), { mode: 'light' })).resolves.toBe(pngBlob);
+  });
+
+  // The chart is rasterized from its own markup, so the capture never depends on the page's CSS —
+  // which is what made html2canvas fail on the oklch the theme tokens resolve to.
+  it('should rasterize the chart from its own svg markup', async () => {
+    await renderChartPng(chartCard(), { mode: 'light' });
+    expect(imageSource.startsWith('data:image/svg+xml;charset=utf-8,')).toBe(true);
+    expect(decodeURIComponent(imageSource)).toContain('<text>tick</text>');
+  });
+
+  // A detached svg inherits no font, so one is declared rather than left to the renderer's default.
+  it('should declare a font on the serialized chart', async () => {
+    await renderChartPng(chartCard(), { mode: 'light' });
+    expect(decodeURIComponent(imageSource)).toContain('font-family');
+  });
+
+  it('should draw the headings above the chart and the footnotes below it', async () => {
+    await renderChartPng(chartCard(), {
+      footnotes: ['Timeframe: All time'],
+      headings: ['Happiness Questionnaire', 'Total Score'],
+      mode: 'light'
+    });
+    expect(drawnText).toEqual(['Happiness Questionnaire', 'Total Score', 'Timeframe: All time']);
+  });
+
+  // Recharts renders its legend as HTML beside the svg, so rasterizing the svg alone drops it.
+  it('should redraw the legend, which is not part of the chart markup', async () => {
+    await renderChartPng(chartCard(), {
+      legend: [
+        { color: '#111111', label: 'In Person' },
+        { color: '#222222', label: 'Remote' }
+      ],
+      mode: 'light'
+    });
+    expect(drawnText).toEqual(['In Person', 'Remote']);
+  });
+
+  it('should report that there is nothing to save when the card holds no chart', async () => {
+    await expect(
+      renderChartPng(chartCard('<p>No records match the current filters.</p>'), { mode: 'light' })
+    ).rejects.toThrow('There is no chart on screen to save');
+  });
+
+  // The serialized svg may name a font or an image the browser refuses, and the decode then never
+  // resolves — so the failure is surfaced rather than leaving the download hanging.
+  it('should report a failure to rasterize the chart', async () => {
+    decodeFails = true;
+    await expect(renderChartPng(chartCard(), { mode: 'light' })).rejects.toThrow('The chart could not be rasterized');
+  });
+
+  it('should report that the browser cannot encode an image rather than drawing onto nothing', async () => {
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(null);
+    await expect(renderChartPng(chartCard(), { mode: 'light' })).rejects.toThrow(
+      'This browser cannot encode the chart as an image'
+    );
+  });
+
+  it('should report a failure to encode rather than resolving with nothing', async () => {
+    encodedBlob = null;
+    await expect(renderChartPng(chartCard(), { mode: 'light' })).rejects.toThrow(
+      'The chart could not be encoded as an image'
+    );
+  });
+});
+
+describe('chartImageFilename', () => {
+  it('should keep a readable stem and stamp it so repeated downloads do not collide', () => {
+    expect(chartImageFilename('Happiness Questionnaire')).toMatch(/^Happiness_Questionnaire_.+\.png$/);
+  });
+
+  it('should drop the characters a filesystem would object to', () => {
+    expect(chartImageFilename('A/B: "C"')).toMatch(/^A_B_C_.+\.png$/);
+  });
+
+  it('should fall back to a generic stem when the label contributes nothing', () => {
+    expect(chartImageFilename('///')).toMatch(/^chart_.+\.png$/);
+  });
+});
diff --git a/apps/web/src/utils/__tests__/chart-palette.test.ts b/apps/web/src/utils/__tests__/chart-palette.test.ts
new file mode 100644
index 000000000..7bcde72dd
--- /dev/null
+++ b/apps/web/src/utils/__tests__/chart-palette.test.ts
@@ -0,0 +1,99 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  CHART_PALETTE_NAMES,
+  CHART_PALETTE_THEMES,
+  getCategoricalColor,
+  getMeasureColor,
+  getPaletteSwatch,
+  MAX_CATEGORICAL_GROUPS,
+  NEUTRAL_MARK
+} from '@/utils/chart-palette';
+
+describe('CHART_PALETTE_NAMES', () => {
+  // The themes object is alphabetised by eslint, which would otherwise put `default` in the middle.
+  it('should offer the default theme first, since that is the one most users want', () => {
+    expect(CHART_PALETTE_NAMES[0]).toBe('default');
+  });
+
+  it('should list every theme, so none is unreachable from the dropdown', () => {
+    expect([...CHART_PALETTE_NAMES].sort()).toStrictEqual(Object.keys(CHART_PALETTE_THEMES).sort());
+  });
+});
+
+describe('CHART_PALETTE_THEMES', () => {
+  // Both modes of every theme run the same length, so switching theme or mode never leaves a
+  // measure past the end of one column but not the other.
+  it.each(Object.keys(CHART_PALETTE_THEMES))('should give the %s theme the same slots in both modes', (name) => {
+    const theme = CHART_PALETTE_THEMES[name as keyof typeof CHART_PALETTE_THEMES];
+    expect(theme.light).toHaveLength(CHART_PALETTE_THEMES.default.light.length);
+    expect(theme.dark).toHaveLength(CHART_PALETTE_THEMES.default.light.length);
+  });
+
+  it('should carry more slots than a grouping may use, so a measure selection is not forced to cycle early', () => {
+    expect(CHART_PALETTE_THEMES.default.light.length).toBeGreaterThan(MAX_CATEGORICAL_GROUPS);
+  });
+
+  // A theme is named for the hue it leads with, because slot one is what an ungrouped chart draws
+  // with — so a reordering would quietly change what the name promises.
+  it('should lead the jade theme with its green', () => {
+    expect(CHART_PALETTE_THEMES.jade.light[0]).toBe('#1fa85c');
+    expect(CHART_PALETTE_THEMES.jade.dark[0]).toBe('#34c775');
+  });
+
+  it('should lead the ember theme with its deep red', () => {
+    expect(CHART_PALETTE_THEMES.ember.light[0]).toBe('#a52a1f');
+    expect(CHART_PALETTE_THEMES.ember.dark[0]).toBe('#c0392b');
+  });
+
+  it.each(Object.keys(CHART_PALETTE_THEMES))('should not repeat a hue within the %s theme', (name) => {
+    const theme = CHART_PALETTE_THEMES[name as keyof typeof CHART_PALETTE_THEMES];
+    expect(new Set(theme.light).size).toBe(theme.light.length);
+    expect(new Set(theme.dark).size).toBe(theme.dark.length);
+  });
+
+  it('should not reuse the neutral mark in any theme, which would blur a real group into the folded tail', () => {
+    for (const theme of Object.values(CHART_PALETTE_THEMES)) {
+      expect(theme.light).not.toContain(NEUTRAL_MARK.light);
+      expect(theme.dark).not.toContain(NEUTRAL_MARK.dark);
+    }
+  });
+});
+
+describe('getCategoricalColor', () => {
+  it('should return the theme colour for a slot that exists', () => {
+    expect(getCategoricalColor(0, 'light', 'berry')).toBe(CHART_PALETTE_THEMES.berry.light[0]);
+  });
+
+  // Past the palette the caller is meant to have folded into "Other", so grey is the honest answer
+  // rather than cycling back round to slot one and repeating a colour. The theme still holds hues
+  // at that index for a measure selection to use, so the bound has to be explicit.
+  it('should fall back to the neutral mark past the grouping cap rather than reading a further slot', () => {
+    expect(CHART_PALETTE_THEMES.default.light[MAX_CATEGORICAL_GROUPS]).toBeTruthy();
+    expect(getCategoricalColor(MAX_CATEGORICAL_GROUPS, 'light', 'default')).toBe(NEUTRAL_MARK.light);
+  });
+});
+
+describe('getMeasureColor', () => {
+  it('should give each measure its own hue across the whole theme, not just the grouping cap', () => {
+    const colors = CHART_PALETTE_THEMES.jade.light.map((_, index) => getMeasureColor(index, 'light', 'jade'));
+    expect(colors).toStrictEqual([...CHART_PALETTE_THEMES.jade.light]);
+  });
+
+  // A measure line carries its own name in the legend, so a repeated hue is readable in a way a
+  // repeated hue across two unlabelled groups would not be.
+  it('should cycle back to the first hue once the theme runs out', () => {
+    const slots = CHART_PALETTE_THEMES.berry.dark.length;
+    expect(getMeasureColor(slots, 'dark', 'berry')).toBe(CHART_PALETTE_THEMES.berry.dark[0]);
+  });
+
+  it('should never fall through to the neutral mark, which is reserved for a folded tail', () => {
+    expect(getMeasureColor(99, 'light', 'default')).not.toBe(NEUTRAL_MARK.light);
+  });
+});
+
+describe('getPaletteSwatch', () => {
+  it('should preview the theme in slot order, so the swatch matches what the chart will draw', () => {
+    expect(getPaletteSwatch('jade', 'light')).toStrictEqual(CHART_PALETTE_THEMES.jade.light);
+  });
+});
diff --git a/apps/web/src/utils/__tests__/chart-theme.test.ts b/apps/web/src/utils/__tests__/chart-theme.test.ts
new file mode 100644
index 000000000..c441b946f
--- /dev/null
+++ b/apps/web/src/utils/__tests__/chart-theme.test.ts
@@ -0,0 +1,16 @@
+import { describe, expect, it } from 'vitest';
+
+import { resolveTheme } from '@/utils/chart-theme';
+
+describe('resolveTheme', () => {
+  it('should resolve the dark surface, which the chart colour maps are keyed on', () => {
+    expect(resolveTheme('dark')).toBe('dark');
+  });
+
+  // `useTheme` may report 'system' or nothing at all, and neither keys the colour maps.
+  it('should resolve anything other than dark to light, so a chart is never keyed on a missing mode', () => {
+    expect(resolveTheme('light')).toBe('light');
+    expect(resolveTheme('system')).toBe('light');
+    expect(resolveTheme(undefined)).toBe('light');
+  });
+});
diff --git a/apps/web/src/utils/__tests__/collected-filter.test.ts b/apps/web/src/utils/__tests__/collected-filter.test.ts
new file mode 100644
index 000000000..475417f42
--- /dev/null
+++ b/apps/web/src/utils/__tests__/collected-filter.test.ts
@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  DEFAULT_COLLECTED_FILTER,
+  matchesCollectedFilter,
+  presetMinDate,
+  selectCollectedPreset
+} from '@/utils/collected-filter';
+
+const daysAgo = (count: number) => new Date(Date.now() - count * 24 * 60 * 60 * 1000);
+
+describe('presetMinDate', () => {
+  it('should leave the window open at both ends for any time, so nothing is excluded by default', () => {
+    expect(presetMinDate('all')).toBeNull();
+  });
+
+  // `custom` means the user owns the bounds, so the preset itself contributes none.
+  it('should contribute no lower bound for a custom window', () => {
+    expect(presetMinDate('custom')).toBeNull();
+  });
+
+  it.each(['pastWeek', 'pastMonth', 'pastThreeMonths', 'pastSixMonths', 'pastYear', 'pastTwoYears'] as const)(
+    'should put the %s lower bound in the past',
+    (preset) => {
+      expect(presetMinDate(preset)!.getTime()).toBeLessThan(Date.now());
+    }
+  );
+
+  it('should order the windows so a longer one reaches further back', () => {
+    expect(presetMinDate('pastWeek')!.getTime()).toBeGreaterThan(presetMinDate('pastYear')!.getTime());
+  });
+});
+
+describe('matchesCollectedFilter', () => {
+  it('should admit a date inside the window', () => {
+    expect(matchesCollectedFilter(daysAgo(2), { max: null, min: daysAgo(7), preset: 'pastWeek' })).toBe(true);
+  });
+
+  it('should reject a date before the lower bound', () => {
+    expect(matchesCollectedFilter(daysAgo(30), { max: null, min: daysAgo(7), preset: 'pastWeek' })).toBe(false);
+  });
+
+  it('should reject a date after the upper bound', () => {
+    expect(matchesCollectedFilter(daysAgo(1), { max: daysAgo(7), min: null, preset: 'custom' })).toBe(false);
+  });
+
+  // A row with nothing collected has no date to compare, so only an open window can keep it.
+  it('should keep a row with no date only while the window is any time', () => {
+    expect(matchesCollectedFilter(null, DEFAULT_COLLECTED_FILTER)).toBe(true);
+    expect(matchesCollectedFilter(null, { max: null, min: daysAgo(7), preset: 'pastWeek' })).toBe(false);
+  });
+});
+
+describe('selectCollectedPreset', () => {
+  it('should let a preset own both bounds, so an earlier custom window does not linger', () => {
+    const previous = { max: daysAgo(1), min: daysAgo(90), preset: 'custom' } as const;
+    const next = selectCollectedPreset('pastWeek', previous);
+    expect(next.max).toBeNull();
+    expect(next.min).toStrictEqual(expect.any(Date));
+  });
+
+  // Switching to custom seeds the dates from the window already on screen, so the inputs open as a
+  // nudge rather than blank.
+  it('should seed a custom window from the preset it replaces', () => {
+    const next = selectCollectedPreset('custom', DEFAULT_COLLECTED_FILTER);
+    expect(next.preset).toBe('custom');
+    expect(next.min).toBe(presetMinDate('all'));
+  });
+
+  it('should keep the bounds the user typed while the window stays custom', () => {
+    const previous = { max: daysAgo(1), min: daysAgo(30), preset: 'custom' } as const;
+    expect(selectCollectedPreset('custom', previous)).toStrictEqual(previous);
+  });
+});
diff --git a/apps/web/src/utils/__tests__/distribution.test.ts b/apps/web/src/utils/__tests__/distribution.test.ts
new file mode 100644
index 000000000..bf75c62da
--- /dev/null
+++ b/apps/web/src/utils/__tests__/distribution.test.ts
@@ -0,0 +1,60 @@
+import { describe, expect, it } from 'vitest';
+
+import type { RecordChartSeries } from '@/hooks/useRecordChartSeries';
+import { binDistribution } from '@/utils/distribution';
+
+const seriesOf = (key: string, values: (number | string)[]): RecordChartSeries => ({
+  color: '#000000',
+  key,
+  label: key,
+  points: values.map((value, index) => ({ time: index, value }))
+});
+
+describe('binDistribution', () => {
+  it('should return no rows for an empty set, so the chart can say there is nothing to show', () => {
+    expect(binDistribution([], true)).toStrictEqual([]);
+  });
+
+  it('should count the maximum value rather than letting it overflow past the last bin', () => {
+    const rows = binDistribution([seriesOf('all', [0, 10])], true);
+    const total = rows.reduce((sum, row) => sum + (row.all as number), 0);
+    expect(total).toBe(2);
+    expect(rows.at(-1)!.all).toBe(1);
+  });
+
+  it('should total every value exactly once across the bins', () => {
+    const values = [1, 2, 2, 3, 5, 8, 13, 21, 34, 55, 89];
+    const rows = binDistribution([seriesOf('all', values)], true);
+    expect(rows.reduce((sum, row) => sum + (row.all as number), 0)).toBe(values.length);
+  });
+
+  it('should give a measure whose every value is identical a single bin, having no range to divide', () => {
+    const rows = binDistribution([seriesOf('all', [7, 7, 7])], true);
+    expect(rows).toHaveLength(1);
+    expect(rows[0]).toMatchObject({ all: 3, bin: '7' });
+  });
+
+  // Bins come from the combined range so a bar in one group describes the same interval as the bar
+  // beside it; binning each series over its own range would make the groups incomparable.
+  it('should bin every series over the shared range, so bars from different groups line up', () => {
+    const rows = binDistribution([seriesOf('low', [0, 1]), seriesOf('high', [99, 100])], true);
+    expect(rows[0]).toMatchObject({ high: 0, low: 2 });
+    expect(rows.at(-1)).toMatchObject({ high: 2, low: 0 });
+  });
+
+  it('should give every series a zero in every bin, so a group absent from a bin renders as a gap rather than disappearing', () => {
+    const rows = binDistribution([seriesOf('a', [0, 10]), seriesOf('b', [5])], true);
+    for (const row of rows) {
+      expect(row).toHaveProperty('a');
+      expect(row).toHaveProperty('b');
+    }
+  });
+
+  it('should count a categorical measure per distinct value instead of binning it', () => {
+    const rows = binDistribution([seriesOf('all', ['yes', 'no', 'yes'])], false);
+    expect(rows).toStrictEqual([
+      { all: 1, bin: 'no' },
+      { all: 2, bin: 'yes' }
+    ]);
+  });
+});
diff --git a/apps/web/src/utils/__tests__/excel.test.ts b/apps/web/src/utils/__tests__/excel.test.ts
index 4216804d3..d126dd59a 100644
--- a/apps/web/src/utils/__tests__/excel.test.ts
+++ b/apps/web/src/utils/__tests__/excel.test.ts
@@ -27,6 +27,8 @@ const recordsExport: InstrumentRecordsExport = [
     instrumentEdition: 1,
     instrumentName: 'HAPPINESS_QUESTIONNAIRE',
     measure: 'overallHappiness',
+    seriesId: null,
+    seriesName: null,
     sessionDate: '2026-01-01',
     sessionId: 'session-1',
     sessionType: 'IN_PERSON',
diff --git a/apps/web/src/utils/__tests__/instrument-editions.test.ts b/apps/web/src/utils/__tests__/instrument-editions.test.ts
index 2ebff39b1..5e0348dde 100644
--- a/apps/web/src/utils/__tests__/instrument-editions.test.ts
+++ b/apps/web/src/utils/__tests__/instrument-editions.test.ts
@@ -1,9 +1,21 @@
+import type { TranslatedInstrumentInfo } from '@opendatacapture/schemas/instrument';
 import { describe, expect, it } from 'vitest';
 
-import { selectLatestEditions } from '../instrument-editions';
+import { getEditionOptions, selectLatestEditions } from '../instrument-editions';
 
 const instrument = (id: string, name: string, edition: number) => ({ id, internal: { edition, name } });
 
+const scalar = (id: string, name: string, edition: number) =>
+  ({
+    details: { title: name },
+    id,
+    internal: { edition, name },
+    kind: 'FORM'
+  }) as unknown as TranslatedInstrumentInfo;
+
+const series = (id: string) =>
+  ({ details: { title: id }, id, kind: 'SERIES', seriesItems: [] }) as unknown as TranslatedInstrumentInfo;
+
 describe('selectLatestEditions', () => {
   it('should keep only the highest edition of each instrument, whatever order the editions arrive in', () => {
     const result = selectLatestEditions([
@@ -14,3 +26,41 @@ describe('selectLatestEditions', () => {
     expect(result.map(({ id }) => id)).toEqual(['hq-2', 'bdi-1']);
   });
 });
+
+describe('getEditionOptions', () => {
+  it('should offer every edition sharing the selected instrument’s internal name', () => {
+    const infos = [scalar('bprs-2', 'BPRS', 2), scalar('bprs-1', 'BPRS', 1)];
+    expect(getEditionOptions(infos, 'bprs-2', 'Edition')).toStrictEqual({
+      'bprs-1': 'Edition 1',
+      'bprs-2': 'Edition 2'
+    });
+  });
+
+  it('should order the options by edition rather than by the order the catalog returned them', () => {
+    const infos = [scalar('bprs-3', 'BPRS', 3), scalar('bprs-1', 'BPRS', 1), scalar('bprs-2', 'BPRS', 2)];
+    expect(Object.values(getEditionOptions(infos, 'bprs-1', 'Edition'))).toStrictEqual([
+      'Edition 1',
+      'Edition 2',
+      'Edition 3'
+    ]);
+  });
+
+  // Editions are keyed on `internal.name`, so a different instrument that happens to be in the
+  // catalog alongside must not appear as an edition of this one.
+  it('should exclude instruments with a different internal name', () => {
+    const infos = [scalar('bprs-1', 'BPRS', 1), scalar('hq-1', 'HQ', 1)];
+    expect(getEditionOptions(infos, 'bprs-1', 'Edition')).toStrictEqual({ 'bprs-1': 'Edition 1' });
+  });
+
+  it('should offer nothing for a series, which has no internal name to have editions of', () => {
+    expect(getEditionOptions([series('series-1')], 'series-1', 'Edition')).toStrictEqual({});
+  });
+
+  it('should offer nothing when the instrument is not in the catalog', () => {
+    expect(getEditionOptions([scalar('bprs-1', 'BPRS', 1)], 'missing', 'Edition')).toStrictEqual({});
+  });
+
+  it('should offer nothing before an instrument has been chosen', () => {
+    expect(getEditionOptions([scalar('bprs-1', 'BPRS', 1)], null, 'Edition')).toStrictEqual({});
+  });
+});
diff --git a/apps/web/src/utils/chart-image.ts b/apps/web/src/utils/chart-image.ts
new file mode 100644
index 000000000..4e434eef7
--- /dev/null
+++ b/apps/web/src/utils/chart-image.ts
@@ -0,0 +1,176 @@
+import { CHART_SURFACE, inkColors } from '@/utils/chart-theme';
+
+/**
+ * Charts are captured by rasterizing their own SVG rather than by screenshotting the page.
+ *
+ * html2canvas re-implements CSS parsing and understands no colour function newer than `rgb()`, while
+ * this app's tokens resolve to Tailwind v4's palette, authored in `oklch()`. Pinning each element's
+ * colours inline was not enough, because it also parses pseudo-element styles, which no inline
+ * declaration can reach — hence "Attempting to parse an unsupported color function".
+ *
+ * The SVG has no such problem: every colour recharts draws with arrives as a hex attribute from
+ * `chart-theme` or the palette, so the markup is already self-contained. Nothing here consults a
+ * stylesheet, which is what makes the capture independent of how the page is themed.
+ */
+
+/** The capture's own typography, declared because a detached SVG inherits no font from the page. */
+const FONT_STACK = 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif';
+
+const HEADING_FONT = `600 16px ${FONT_STACK}`;
+
+const CAPTION_FONT = `500 13px ${FONT_STACK}`;
+
+const LINE_HEIGHT = 24;
+
+const GUTTER = 16;
+
+const LEGEND_SWATCH = 10;
+
+const LEGEND_GAP = 20;
+
+type LegendEntry = { color: string; label: string };
+
+type ChartImageOptions = {
+  /** Lines drawn below the chart, for the filters the capture was taken under */
+  footnotes?: string[];
+  /** Lines drawn above the chart, so the file says what it depicts once it is out of the app */
+  headings?: string[];
+  /**
+   * Redrawn from the series rather than captured: recharts renders its legend as HTML beside the
+   * SVG, so rasterizing the SVG alone would silently drop it.
+   */
+  legend?: LegendEntry[];
+  mode: 'dark' | 'light';
+};
+
+/** The chart's own markup, detached and made to stand alone as a document. */
+function serializeChart(svg: SVGSVGElement, width: number, height: number): string {
+  const clone = svg.cloneNode(true) as SVGSVGElement;
+  clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+  clone.setAttribute('width', String(width));
+  clone.setAttribute('height', String(height));
+  clone.setAttribute('viewBox', `0 0 ${width} ${height}`);
+  // Set on the root so every `<text>` inherits it, since the page's own font never reaches here.
+  clone.style.fontFamily = FONT_STACK;
+  return new XMLSerializer().serializeToString(clone);
+}
+
+async function loadImage(source: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.addEventListener('load', () => resolve(image));
+    image.addEventListener('error', () => reject(new Error('The chart could not be rasterized')));
+    image.src = source;
+  });
+}
+
+function drawLegend(
+  context: CanvasRenderingContext2D,
+  entries: LegendEntry[],
+  { ink, width, y }: { ink: string; width: number; y: number }
+): void {
+  context.font = CAPTION_FONT;
+  const entryWidth = (entry: LegendEntry) => LEGEND_SWATCH + 6 + context.measureText(entry.label).width;
+  const total = entries.reduce((sum, entry) => sum + entryWidth(entry), 0) + LEGEND_GAP * (entries.length - 1);
+  let x = Math.max(GUTTER, (width - total) / 2);
+  for (const entry of entries) {
+    context.fillStyle = entry.color;
+    context.beginPath();
+    context.arc(x + LEGEND_SWATCH / 2, y - 4, LEGEND_SWATCH / 2, 0, Math.PI * 2);
+    context.fill();
+    context.fillStyle = ink;
+    context.textAlign = 'left';
+    context.fillText(entry.label, x + LEGEND_SWATCH + 6, y);
+    x += entryWidth(entry) + LEGEND_GAP;
+  }
+}
+
+/**
+ * Rasterizes a chart to a PNG blob at twice its on-screen size.
+ *
+ * Throws rather than returning null on failure, so the caller reports it: a download that quietly
+ * does nothing is indistinguishable from a broken button.
+ */
+async function renderChartPng(
+  container: HTMLElement,
+  { footnotes = [], headings = [], legend = [], mode }: ChartImageOptions
+): Promise<Blob> {
+  const svg = container.querySelector('svg');
+  if (!svg) {
+    throw new Error('There is no chart on screen to save');
+  }
+
+  const bounds = svg.getBoundingClientRect();
+  const chartWidth = Math.round(bounds.width) || Number(svg.getAttribute('width')) || 800;
+  const chartHeight = Math.round(bounds.height) || Number(svg.getAttribute('height')) || 400;
+
+  const image = await loadImage(
+    `data:image/svg+xml;charset=utf-8,${encodeURIComponent(serializeChart(svg, chartWidth, chartHeight))}`
+  );
+
+  const legendHeight = legend.length > 0 ? LINE_HEIGHT : 0;
+  const width = chartWidth;
+  const height =
+    GUTTER * 2 + headings.length * LINE_HEIGHT + chartHeight + legendHeight + footnotes.length * LINE_HEIGHT;
+
+  const scale = 2;
+  const canvas = document.createElement('canvas');
+  canvas.width = width * scale;
+  canvas.height = height * scale;
+  const context = canvas.getContext('2d');
+  if (!context) {
+    throw new Error('This browser cannot encode the chart as an image');
+  }
+  context.scale(scale, scale);
+
+  const ink = inkColors[mode];
+  context.fillStyle = CHART_SURFACE[mode];
+  context.fillRect(0, 0, width, height);
+
+  let y = GUTTER;
+
+  context.font = HEADING_FONT;
+  context.fillStyle = ink;
+  context.textAlign = 'center';
+  for (const heading of headings) {
+    y += LINE_HEIGHT - 6;
+    context.fillText(heading, width / 2, y);
+    y += 6;
+  }
+
+  context.drawImage(image, 0, y, chartWidth, chartHeight);
+  y += chartHeight;
+
+  if (legend.length > 0) {
+    y += LINE_HEIGHT - 6;
+    drawLegend(context, legend, { ink, width, y });
+    y += 6;
+  }
+
+  context.font = CAPTION_FONT;
+  context.fillStyle = ink;
+  context.textAlign = 'left';
+  for (const footnote of footnotes) {
+    y += LINE_HEIGHT - 6;
+    context.fillText(footnote, GUTTER, y);
+    y += 6;
+  }
+
+  return new Promise<Blob>((resolve, reject) => {
+    canvas.toBlob((blob) => {
+      if (blob) {
+        resolve(blob);
+        return;
+      }
+      reject(new Error('The chart could not be encoded as an image'));
+    }, 'image/png');
+  });
+}
+
+/** A filesystem-safe stem for a chart capture, stamped so repeated downloads do not collide. */
+function chartImageFilename(label: string): string {
+  const stem = label.replace(/[^\w-]+/g, '_').replace(/^_+|_+$/g, '') || 'chart';
+  return `${stem}_${new Date().toISOString()}.png`;
+}
+
+export { chartImageFilename, renderChartPng };
diff --git a/apps/web/src/utils/chart-palette.ts b/apps/web/src/utils/chart-palette.ts
new file mode 100644
index 000000000..07e121ca5
--- /dev/null
+++ b/apps/web/src/utils/chart-palette.ts
@@ -0,0 +1,94 @@
+/**
+ * The categorical palettes every datahub chart draws with, so the instrument and subject graphs
+ * read the same way and a reader moving between them is not relearning the colours.
+ *
+ * Each theme leads with the three hues it is named for, then carries three more in the same key.
+ * The two consumers take different amounts of that run: a grouping dimension stops at
+ * `MAX_CATEGORICAL_GROUPS` and folds its tail into `OTHER_GROUP_KEY`, because an unbounded legend
+ * of near-hues is unreadable; a measure selection has a named line per entry and so spends the
+ * whole run before cycling.
+ *
+ * Each theme's dark column is the same hues re-stepped for the dark surface, not an inversion of
+ * the light one.
+ *
+ * - default: white / grey / light blue, then steel, slate and pale cyan.
+ * - berry: blue / purple / pink, then indigo, magenta and rose.
+ * - jade: green / yellow / orange, then teal, olive and red-orange.
+ * - ember: deep red / light yellow / beige, then burnt orange, olive and taupe.
+ */
+const CHART_PALETTE_THEMES = {
+  berry: {
+    dark: ['#5b9bd5', '#9b72cb', '#e57aad', '#6b5bd5', '#c850c8', '#e8859b'],
+    light: ['#3a7cc6', '#7b4fb8', '#d4548e', '#4a3cb5', '#a830a8', '#d4607a']
+  },
+  default: {
+    dark: ['#e0e0e0', '#9e9e9e', '#7db8e0', '#4a7fa5', '#6b7f8f', '#b5dce8'],
+    light: ['#b0b0b0', '#6b6b6b', '#4a90c4', '#2f6690', '#53697a', '#7fc4d8']
+  },
+  ember: {
+    dark: ['#c0392b', '#f5d76e', '#d8c3a5', '#e07b39', '#a8a847', '#8c6b52'],
+    light: ['#a52a1f', '#d4b63c', '#b39b7d', '#c2621f', '#86862f', '#6e5240']
+  },
+  jade: {
+    dark: ['#34c775', '#f0c040', '#e88a3a', '#2aa89a', '#b5c040', '#e05c2a'],
+    light: ['#1fa85c', '#d4a017', '#d06e1e', '#1a8f82', '#8f9a24', '#c04418']
+  }
+} as const;
+
+type ChartPaletteName = keyof typeof CHART_PALETTE_THEMES;
+
+/** Dropdown order, with `default` pinned first. `chart-palette.test.ts` pins both the leading entry and completeness. */
+const CHART_PALETTE_NAMES = ['default', 'berry', 'jade', 'ember'] as const satisfies readonly ChartPaletteName[];
+
+/**
+ * Grey, deliberately outside every theme, for the folded tail — a bucket, not a group. An ungrouped
+ * chart takes the chosen theme's first slot instead, so the palette control is never inert.
+ */
+const NEUTRAL_MARK = {
+  dark: '#a3a3a3',
+  light: '#525252'
+} as const;
+
+const OTHER_GROUP_KEY = '__other__';
+
+/**
+ * How many groups a colour-by dimension may draw before the rest fold into `OTHER_GROUP_KEY`. Three
+ * rather than the whole run: a scatter puts every pair of groups on screen at once, and only the
+ * leading trio holds a colourblind-safe separation as an all-pairs set.
+ */
+const MAX_CATEGORICAL_GROUPS = 3;
+
+/** The colour of a grouping's nth slot, or the neutral mark once the caller should have folded. */
+function getCategoricalColor(index: number, theme: 'dark' | 'light', palette: ChartPaletteName): string {
+  if (index >= MAX_CATEGORICAL_GROUPS) {
+    return NEUTRAL_MARK[theme];
+  }
+  return CHART_PALETTE_THEMES[palette][theme][index]!;
+}
+
+/**
+ * The colour of the nth measure in a selection, cycling once the theme runs out. Cycling is honest
+ * here in a way it would not be for a grouping, because every line carries its own name in the
+ * legend — whereas a repeated hue across two unlabelled groups is simply wrong.
+ */
+function getMeasureColor(index: number, theme: 'dark' | 'light', palette: ChartPaletteName): string {
+  const colors = CHART_PALETTE_THEMES[palette][theme];
+  return colors[index % colors.length]!;
+}
+
+/** The theme's colours in slot order, for rendering a swatch of what a palette looks like. */
+function getPaletteSwatch(palette: ChartPaletteName, theme: 'dark' | 'light'): readonly string[] {
+  return CHART_PALETTE_THEMES[palette][theme];
+}
+
+export {
+  CHART_PALETTE_NAMES,
+  CHART_PALETTE_THEMES,
+  getCategoricalColor,
+  getMeasureColor,
+  getPaletteSwatch,
+  MAX_CATEGORICAL_GROUPS,
+  NEUTRAL_MARK,
+  OTHER_GROUP_KEY
+};
+export type { ChartPaletteName };
diff --git a/apps/web/src/utils/chart-theme.ts b/apps/web/src/utils/chart-theme.ts
new file mode 100644
index 000000000..cdf12d2e3
--- /dev/null
+++ b/apps/web/src/utils/chart-theme.ts
@@ -0,0 +1,67 @@
+import type React from 'react';
+
+import type { Theme } from '@douglasneuroinformatics/libui/hooks';
+
+/** The recessive grey the grid, axis lines and ticks share */
+const AXIS_STROKE = '#64748b';
+
+/** Axis and legend text. Never a series colour — identity comes from the mark beside the text. */
+const inkColors: { [K in Theme]: string } = {
+  dark: '#cbd5e1',
+  light: '#475569'
+};
+
+/**
+ * The page surface a chart is drawn on.
+ *
+ * Named separately from the tooltip that also uses it, because a mark outlined against the surface
+ * needs the surface colour — reading it off the tooltip's own style made the ring change whenever
+ * the tooltip was restyled.
+ */
+const CHART_SURFACE: { [K in Theme]: string } = {
+  dark: '#0f172a',
+  light: '#f1f5f9'
+};
+
+const tooltipStyles: { [K in Theme]: React.CSSProperties } = {
+  dark: {
+    backgroundColor: CHART_SURFACE.dark,
+    borderColor: inkColors.light,
+    borderRadius: '2px'
+  },
+  light: {
+    backgroundColor: CHART_SURFACE.light,
+    borderColor: inkColors.dark,
+    borderRadius: '2px'
+  }
+};
+
+/**
+ * Axis bands sized to clear their own tick text before the axis title sits below it.
+ *
+ * The x band has to hold a tick row (`tickSize` + `tickMargin` + a line of text, about 28px) and
+ * then the title underneath with daylight between them, which is why it is a good deal taller than
+ * recharts' default. The y band is widened for the same reason on its own axis.
+ */
+const X_AXIS_HEIGHT = 72;
+
+/** Lifts the title off the very bottom edge of the band without closing the gap to the ticks */
+const X_AXIS_LABEL_OFFSET = 6;
+
+const Y_AXIS_WIDTH = 64;
+
+/** `useTheme` is typed more loosely than the two modes these maps are keyed on. */
+function resolveTheme(theme: string | undefined): Theme {
+  return theme === 'dark' ? 'dark' : 'light';
+}
+
+export {
+  AXIS_STROKE,
+  CHART_SURFACE,
+  inkColors,
+  resolveTheme,
+  tooltipStyles,
+  X_AXIS_HEIGHT,
+  X_AXIS_LABEL_OFFSET,
+  Y_AXIS_WIDTH
+};
diff --git a/apps/web/src/utils/collected-filter.ts b/apps/web/src/utils/collected-filter.ts
new file mode 100644
index 000000000..395aefd68
--- /dev/null
+++ b/apps/web/src/utils/collected-filter.ts
@@ -0,0 +1,63 @@
+/** A named window over the collection date, or an explicit one the user typed */
+type CollectedPreset =
+  'all' | 'custom' | 'pastMonth' | 'pastSixMonths' | 'pastThreeMonths' | 'pastTwoYears' | 'pastWeek' | 'pastYear';
+
+type CollectedFilter = {
+  max: Date | null;
+  min: Date | null;
+  preset: CollectedPreset;
+};
+
+const DEFAULT_COLLECTED_FILTER: CollectedFilter = { max: null, min: null, preset: 'all' };
+
+/** The earliest date a preset admits, or null for no lower bound */
+function presetMinDate(preset: CollectedPreset): Date | null {
+  const now = new Date();
+  const monthsAgo = (count: number) => new Date(new Date(now).setMonth(now.getMonth() - count));
+  const yearsAgo = (count: number) => new Date(new Date(now).setFullYear(now.getFullYear() - count));
+  switch (preset) {
+    case 'pastMonth':
+      return monthsAgo(1);
+    case 'pastSixMonths':
+      return monthsAgo(6);
+    case 'pastThreeMonths':
+      return monthsAgo(3);
+    case 'pastTwoYears':
+      return yearsAgo(2);
+    case 'pastWeek':
+      return new Date(new Date(now).setDate(now.getDate() - 7));
+    case 'pastYear':
+      return yearsAgo(1);
+    default:
+      return null;
+  }
+}
+
+/**
+ * Whether a row's collection date falls in the chosen window. A row with nothing collected cannot
+ * satisfy a window, but must survive "any time".
+ */
+function matchesCollectedFilter(value: Date | null | undefined, filter: CollectedFilter): boolean {
+  if (!value) {
+    return filter.preset === 'all';
+  }
+  if (filter.min && value < filter.min) {
+    return false;
+  }
+  return !(filter.max && value > filter.max);
+}
+
+/**
+ * The filter a preset selection produces. A preset owns both bounds; only `custom` leaves them to
+ * the user, and it starts from whatever window the preset had so the dates are a nudge, not blank.
+ */
+function selectCollectedPreset(preset: CollectedPreset, previous: CollectedFilter): CollectedFilter {
+  return {
+    max: preset === 'custom' ? previous.max : null,
+    min: preset === 'custom' ? (previous.min ?? presetMinDate(previous.preset)) : presetMinDate(preset),
+    preset
+  };
+}
+
+export { DEFAULT_COLLECTED_FILTER, matchesCollectedFilter, presetMinDate, selectCollectedPreset };
+export type { CollectedFilter, CollectedPreset };
diff --git a/apps/web/src/utils/distribution.ts b/apps/web/src/utils/distribution.ts
new file mode 100644
index 000000000..ddfcab967
--- /dev/null
+++ b/apps/web/src/utils/distribution.ts
@@ -0,0 +1,68 @@
+import type { RecordChartSeries } from '@/hooks/useRecordChartSeries';
+
+/** One bar group: the bin's label plus a count per series key */
+type DistributionRow = {
+  [seriesKey: string]: number | string;
+  bin: string;
+};
+
+const TARGET_BIN_COUNT = 10;
+
+/**
+ * Counts each series' values into shared bins.
+ *
+ * Bins span the range of every series at once rather than each series' own range, so bars from
+ * different groups describe the same interval and can be compared. A categorical measure is counted
+ * per distinct value instead, since binning a category is meaningless.
+ */
+function binDistribution(series: RecordChartSeries[], isNumeric: boolean): DistributionRow[] {
+  if (!isNumeric) {
+    const categories = new Map<string, DistributionRow>();
+    for (const item of series) {
+      for (const point of item.points) {
+        const category = String(point.value);
+        let row = categories.get(category);
+        if (!row) {
+          row = { bin: category };
+          categories.set(category, row);
+        }
+        row[item.key] = ((row[item.key] as number | undefined) ?? 0) + 1;
+      }
+    }
+    return Array.from(categories.values()).sort((a, b) => a.bin.localeCompare(b.bin));
+  }
+
+  const values = series.flatMap((item) => item.points.map((point) => Number(point.value)));
+  if (values.length === 0) {
+    return [];
+  }
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  // A measure whose every record holds the same value has no range to divide, so it gets one bin.
+  const binCount = min === max ? 1 : TARGET_BIN_COUNT;
+  const binWidth = min === max ? 1 : (max - min) / binCount;
+
+  const rows = Array.from({ length: binCount }, (_, index): DistributionRow => {
+    const start = min + index * binWidth;
+    const end = index === binCount - 1 ? max : start + binWidth;
+    const row: DistributionRow = {
+      bin: binCount === 1 ? String(min) : `${start.toFixed(1)}–${end.toFixed(1)}`
+    };
+    for (const item of series) {
+      row[item.key] = 0;
+    }
+    return row;
+  });
+
+  for (const item of series) {
+    for (const point of item.points) {
+      // The final bin is closed at the top, so the maximum value is counted rather than overflowing.
+      const index = Math.min(binCount - 1, Math.floor((Number(point.value) - min) / binWidth));
+      const row = rows[index]!;
+      row[item.key] = (row[item.key] as number) + 1;
+    }
+  }
+  return rows;
+}
+
+export { binDistribution };
diff --git a/apps/web/src/utils/instrument-editions.ts b/apps/web/src/utils/instrument-editions.ts
index 6b6c44278..0db67daba 100644
--- a/apps/web/src/utils/instrument-editions.ts
+++ b/apps/web/src/utils/instrument-editions.ts
@@ -1,7 +1,35 @@
+import type { TranslatedInstrumentInfo } from '@opendatacapture/schemas/instrument';
+
 type EditionedInstrument = {
   internal: { edition: number; name: string };
 };
 
+/**
+ * Every edition of the instrument the given id names, as dropdown options keyed by instrument id.
+ *
+ * Editions are a property of a scalar instrument's `internal.name`, so a series — which has no
+ * `internal` at all — offers none. Ordered by edition rather than by the catalog's own order.
+ */
+function getEditionOptions(
+  infos: TranslatedInstrumentInfo[],
+  instrumentId: null | string,
+  editionLabel: string
+): { [id: string]: string } {
+  const selected = infos.find((info) => info.id === instrumentId);
+  if (!selected || selected.kind === 'SERIES') {
+    return {};
+  }
+  const selectedName = selected.internal.name;
+  const options: { [id: string]: string } = {};
+  infos
+    .filter((info): info is typeof selected => info.kind !== 'SERIES' && info.internal.name === selectedName)
+    .sort((a, b) => a.internal.edition - b.internal.edition)
+    .forEach((info) => {
+      options[info.id] = `${editionLabel} ${info.internal.edition}`;
+    });
+  return options;
+}
+
 /** The highest edition of each instrument, in the order each name first appears. */
 function selectLatestEditions<TInstrument extends EditionedInstrument>(instruments: TInstrument[]): TInstrument[] {
   const latestByName = new Map<string, TInstrument>();
@@ -14,4 +42,4 @@ function selectLatestEditions<TInstrument extends EditionedInstrument>(instrumen
   return [...latestByName.values()];
 }
 
-export { selectLatestEditions };
+export { getEditionOptions, selectLatestEditions };
diff --git a/apps/web/src/utils/tag-colors.ts b/apps/web/src/utils/tag-colors.ts
index d983510ad..d9072bc6e 100644
--- a/apps/web/src/utils/tag-colors.ts
+++ b/apps/web/src/utils/tag-colors.ts
@@ -1,29 +1,45 @@
-type Mode = 'dark' | 'light';
+import type { InstrumentKind } from '@opendatacapture/runtime-core';
 
-/** Grey, for a subject whose sex was never recorded */
-const NEUTRAL_MARK = {
-  dark: '#a3a3a3',
-  light: '#525252'
-} as const;
+type Mode = 'dark' | 'light';
 
 /**
- * Baby pink for female, baby blue for male.
+ * Baby pink for female, baby blue for male, grey for a subject whose sex was never recorded.
  *
- * One value serves both modes, because a pastel reads well against the dark surface as-is. Against
- * the light surface both sit near 1.6:1, far under the 3:1 a mark would normally need — which is why
- * `ColorTagCell` rings the dot, and why the label is always beside it rather than the colour
- * carrying the value.
+ * Asked for by name, so these sit outside the validated categorical palette, and one value serves
+ * both modes because a pastel reads well against the dark surface as-is. Against the light surface
+ * both are near 1.6:1, far under the 3:1 a mark would normally need — which is why `ColorTagCell`
+ * rings the dot, and why the label is always beside it rather than the colour carrying the value.
  */
 const SEX_COLORS = {
   FEMALE: '#f9a8d4',
   MALE: '#89cff0'
 } as const;
 
+/**
+ * One named colour per instrument kind, held here rather than taken from the chart palette: the
+ * palette is a per-user chart setting, and choosing one must not recolour a table's kind column.
+ */
+const INSTRUMENT_KIND_COLORS = {
+  FILE: { dark: '#22c55e', light: '#16a34a' },
+  FORM: { dark: '#3b82f6', light: '#2563eb' },
+  INTERACTIVE: { dark: '#ef4444', light: '#dc2626' },
+  SERIES: { dark: '#eab308', light: '#ca8a04' }
+} as const satisfies { [K in InstrumentKind]: { dark: string; light: string } };
+
+const NEUTRAL_COLOR = {
+  dark: '#a3a3a3',
+  light: '#525252'
+} as const;
+
 function getSexColor(sex: null | string, mode: Mode): string {
   if (sex === 'FEMALE' || sex === 'MALE') {
     return SEX_COLORS[sex];
   }
-  return NEUTRAL_MARK[mode];
+  return NEUTRAL_COLOR[mode];
+}
+
+function getInstrumentKindColor(kind: InstrumentKind, mode: Mode): string {
+  return INSTRUMENT_KIND_COLORS[kind][mode];
 }
 
-export { getSexColor };
+export { getInstrumentKindColor, getSexColor };
diff --git a/packages/schemas/src/instrument-records/__tests__/instrument-records.test.ts b/packages/schemas/src/instrument-records/__tests__/instrument-records.test.ts
index b67982be0..e43651692 100644
--- a/packages/schemas/src/instrument-records/__tests__/instrument-records.test.ts
+++ b/packages/schemas/src/instrument-records/__tests__/instrument-records.test.ts
@@ -5,6 +5,7 @@ import {
   $InstrumentRecord,
   $InstrumentRecordFile,
   $InstrumentRecordFiles,
+  $InstrumentRecordSummary,
   $LinearRegressionResults,
   $UpdateInstrumentRecordData,
   $UploadInstrumentRecordsData
@@ -84,6 +85,50 @@ describe('$InstrumentRecord', () => {
   });
 });
 
+describe('$InstrumentRecord session metadata', () => {
+  const base = {
+    createdAt: '2024-01-01',
+    data: { value: 1 },
+    date: '2024-01-01',
+    id: 'record-1',
+    instrumentId: 'instrument-1',
+    sessionId: 'session-1',
+    subjectId: 'subject-1',
+    updatedAt: '2024-01-01'
+  };
+  it('should accept the data collection method on the session, which is the column the datahub renders', () => {
+    const result = $InstrumentRecord.safeParse({ ...base, session: { type: 'REMOTE', user: { username: 'alice' } } });
+    expect(result.success).toBe(true);
+    expect(result.data?.session?.type).toBe('REMOTE');
+  });
+  // A record whose session was deleted reads back without a type, which must not fail the response.
+  it('should accept a null collection method', () => {
+    expect($InstrumentRecord.safeParse({ ...base, session: { type: null, user: null } }).success).toBe(true);
+  });
+  it('should reject a collection method that is not a session type', () => {
+    expect($InstrumentRecord.safeParse({ ...base, session: { type: 'IN_CLINIC' } }).success).toBe(false);
+  });
+});
+
+describe('$InstrumentRecordSummary', () => {
+  const base = { instrumentId: 'instrument-1', lastCollectedAt: '2024-01-01', recordCount: 5, subjectCount: 3 };
+  it('should accept a summary and coerce its collection date', () => {
+    const result = $InstrumentRecordSummary.safeParse(base);
+    expect(result.success).toBe(true);
+    expect(result.data?.lastCollectedAt).toStrictEqual(new Date('2024-01-01'));
+  });
+  // An instrument accessible to the caller but never collected has no date to report.
+  it('should accept a null collection date', () => {
+    expect($InstrumentRecordSummary.safeParse({ ...base, lastCollectedAt: null }).success).toBe(true);
+  });
+  it('should reject a negative count, which no aggregation can legitimately produce', () => {
+    expect($InstrumentRecordSummary.safeParse({ ...base, recordCount: -1 }).success).toBe(false);
+  });
+  it('should reject a fractional subject count, since subjects are counted not measured', () => {
+    expect($InstrumentRecordSummary.safeParse({ ...base, subjectCount: 1.5 }).success).toBe(false);
+  });
+});
+
 describe('$LinearRegressionResults', () => {
   it('should accept a record of measure name to intercept, slope and stdErr', () => {
     expect($LinearRegressionResults.safeParse({ score: { intercept: 0, slope: 1, stdErr: 0.5 } }).success).toBe(true);
diff --git a/packages/schemas/src/instrument-records/instrument-records.ts b/packages/schemas/src/instrument-records/instrument-records.ts
index a349739bf..7b64824fa 100644
--- a/packages/schemas/src/instrument-records/instrument-records.ts
+++ b/packages/schemas/src/instrument-records/instrument-records.ts
@@ -3,6 +3,7 @@ import { z } from 'zod/v4';
 
 import { $BaseModel, $Json } from '../core/core.js';
 import { $InstrumentMeasureValue } from '../instrument/instrument.js';
+import { $SessionType } from '../session/session.js';
 import { $FileMetadata } from '../storage/storage.js';
 
 import type { SessionType } from '../session/session.js';
@@ -51,9 +52,13 @@ export const $InstrumentRecord = $BaseModel.extend({
   instrumentId: z.string(),
   pending: z.boolean().nullish(),
   seriesInstrumentId: z.string().nullish(),
-  /** The user who conducted the session, resolved server-side so clients need not join sessions themselves */
+  /**
+   * The session that collected this record, resolved server-side so clients need not join sessions
+   * themselves. `type` is the data collection method.
+   */
   session: z
     .object({
+      type: $SessionType.nullish(),
       user: z
         .object({
           username: z.string().nullish()
@@ -72,6 +77,10 @@ export type InstrumentRecordsExport = {
   instrumentEdition: number;
   instrumentName: string;
   measure: string;
+  /** The id of the series instrument that orchestrated collection, or null if collected individually */
+  seriesId: null | string;
+  /** The title of that series instrument, or null if collected individually */
+  seriesName: null | string;
   sessionDate: string;
   sessionId: string;
   sessionType: SessionType;
@@ -99,6 +108,8 @@ export type InstrumentRecordQueryParams = {
   instrumentId?: string;
   kind?: InstrumentKind;
   minDate?: Date;
+  /** Every record a series orchestrated, which spans the scalar instruments it composes */
+  seriesInstrumentId?: string;
   subjectId?: string;
 };
 
@@ -111,10 +122,20 @@ export const $InstrumentRecordFile = $FileMetadata.omit({ location: true }).exte
 export type $InstrumentRecordFiles = z.infer<typeof $InstrumentRecordFiles>;
 export const $InstrumentRecordFiles = z.record(z.string(), z.array($InstrumentRecordFile));
 
-export type SubjectRecordSummary = z.infer<typeof $SubjectRecordSummary>;
-export const $SubjectRecordSummary = z.object({
-  /** The most recent record date, or null for a subject whose records all lack one */
+export type InstrumentRecordSummary = z.infer<typeof $InstrumentRecordSummary>;
+export const $InstrumentRecordSummary = z.object({
+  instrumentId: z.string(),
+  /** The most recent record date, or null for an instrument whose records all lack one */
   lastCollectedAt: z.coerce.date().nullable(),
   recordCount: z.int().nonnegative(),
-  subjectId: z.string()
+  /** Distinct subjects, not records — a subject completing an instrument twice counts once */
+  subjectCount: z.int().nonnegative()
 });
+
+export type SubjectRecordSummary = z.infer<typeof $SubjectRecordSummary>;
+export const $SubjectRecordSummary = $InstrumentRecordSummary
+  .omit({
+    instrumentId: true,
+    subjectCount: true
+  })
+  .extend({ subjectId: z.string() });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 426e3addc..20f891563 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -723,9 +723,6 @@ importers:
       axios:
         specifier: 'catalog:'
         version: 1.20.0
-      html2canvas:
-        specifier: ^1.4.1
-        version: 1.4.1
       immer:
         specifier: ^11.1.18
         version: 11.1.18
@@ -6423,10 +6420,6 @@ packages:
   base-64@1.0.0:
     resolution: {integrity: sha512-kwDPIFCGx0NZHog36dj+tHiwP4QMzsZ3AgMViUBKI0+V5n4U0ufTCUMhnQ04diaRI8EX/QcPfql7zlhZ7j4zgg==}
 
-  base64-arraybuffer@1.0.2:
-    resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==}
-    engines: {node: '>= 0.6.0'}
-
   baseline-browser-mapping@2.10.33:
     resolution: {integrity: sha512-bA6+tcSLpz2tIEdDXZPpPTIuxBcC4+w6SieaYyfigIa4h8GlFxbA17v22Vx3JUtuZQj9SgOsnbK+aTBzyDyEuw==}
     engines: {node: '>=6.0.0'}
@@ -6788,9 +6781,6 @@ packages:
   crossws@0.3.5:
     resolution: {integrity: sha512-ojKiDvcmByhwa8YYqbQI/hg7MEU0NC03+pSdEq4ZUnZR9xXpwk7E43SMNGkn+JxJGPFtNvQ48+vV2p+P1ml5PA==}
 
-  css-line-break@2.1.0:
-    resolution: {integrity: sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==}
-
   css-select@5.2.2:
     resolution: {integrity: sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==}
 
@@ -7873,10 +7863,6 @@ packages:
   html-whitespace-sensitive-tag-names@3.0.1:
     resolution: {integrity: sha512-q+310vW8zmymYHALr1da4HyXUQ0zgiIwIicEfotYPWGN0OJVEN/58IJ3A4GBYcEq3LGAZqKb+ugvP0GNB9CEAA==}
 
-  html2canvas@1.4.1:
-    resolution: {integrity: sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==}
-    engines: {node: '>=8.0.0'}
-
   http-cache-semantics@4.2.0:
     resolution: {integrity: sha512-dTxcvPXqPvXBQpq5dUr6mEMJX4oIEFv6bwom3FDwKRDsuIjjJGANqhBuoAn9c1RQJIdAKav33ED65E2ys+87QQ==}
 
@@ -10270,9 +10256,6 @@ packages:
   text-decoder@1.2.7:
     resolution: {integrity: sha512-vlLytXkeP4xvEq2otHeJfSQIRyWxo/oZGEbXrtEEF9Hnmrdly59sUbzZ/QgyWuLYHctCHxFF4tRQZNQ9k60ExQ==}
 
-  text-segmentation@1.0.3:
-    resolution: {integrity: sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==}
-
   thread-stream@4.2.0:
     resolution: {integrity: sha512-e2zZ96wSChazBsbENf/Pcm/4swHt2cEKQ92rhUjkL9GCKiTDJIaTBenjE/m9DXi0QBmTMDkFDdOomUy20A1tDQ==}
     engines: {node: '>=20'}
@@ -10697,9 +10680,6 @@ packages:
     resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==}
     engines: {node: '>= 0.4.0'}
 
-  utrie@1.0.2:
-    resolution: {integrity: sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==}
-
   vary@1.1.2:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
@@ -16332,8 +16312,6 @@ snapshots:
 
   base-64@1.0.0: {}
 
-  base64-arraybuffer@1.0.2: {}
-
   baseline-browser-mapping@2.10.33: {}
 
   bcp-47-match@2.0.3: {}
@@ -16677,10 +16655,6 @@ snapshots:
     dependencies:
       uncrypto: 0.1.3
 
-  css-line-break@2.1.0:
-    dependencies:
-      utrie: 1.0.2
-
   css-select@5.2.2:
     dependencies:
       boolbase: 1.0.0
@@ -18153,11 +18127,6 @@ snapshots:
 
   html-whitespace-sensitive-tag-names@3.0.1: {}
 
-  html2canvas@1.4.1:
-    dependencies:
-      css-line-break: 2.1.0
-      text-segmentation: 1.0.3
-
   http-cache-semantics@4.2.0: {}
 
   http-errors@2.0.1:
@@ -21088,10 +21057,6 @@ snapshots:
     transitivePeerDependencies:
       - react-native-b4a
 
-  text-segmentation@1.0.3:
-    dependencies:
-      utrie: 1.0.2
-
   thread-stream@4.2.0:
     dependencies:
       real-require: 1.0.0
@@ -21463,10 +21428,6 @@ snapshots:
 
   utils-merge@1.0.1: {}
 
-  utrie@1.0.2:
-    dependencies:
-      base64-arraybuffer: 1.0.2
-
   vary@1.1.2: {}
 
   vaul@1.1.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
diff --git a/testing/src/pages/_app/datahub/instruments/$instrumentId/graph.page.ts b/testing/src/pages/_app/datahub/instruments/$instrumentId/graph.page.ts
new file mode 100644
index 000000000..49cc2fd34
--- /dev/null
+++ b/testing/src/pages/_app/datahub/instruments/$instrumentId/graph.page.ts
@@ -0,0 +1,41 @@
+import type { Locator, Page } from '@playwright/test';
+
+import { AppPage } from '../../../route.page';
+
+export class InstrumentHubGraphPage extends AppPage {
+  readonly chart: Locator;
+  readonly chartToggle: Locator;
+  readonly colourByTrigger: Locator;
+  readonly measureTrigger: Locator;
+  constructor(page: Page) {
+    super(page);
+    this.chart = page.getByTestId('instrument-hub-chart');
+    this.chartToggle = page.getByTestId('instrument-hub-chart-toggle');
+    this.colourByTrigger = page.getByTestId('instrument-hub-colour-by-trigger');
+    this.measureTrigger = page.getByTestId('instrument-hub-measure-trigger');
+  }
+
+  /** The distribution bars recharts renders, one per bin per series. */
+  get bars(): Locator {
+    return this.chart.locator('.recharts-bar-rectangle');
+  }
+
+  /** The scatter marks recharts renders, one per plotted record. */
+  get scatterMarks(): Locator {
+    return this.chart.locator('.recharts-scatter-symbol');
+  }
+
+  async selectChart(chart: 'Distribution' | 'Over Time') {
+    await this.chartToggle.getByRole('tab', { name: chart }).click();
+  }
+
+  async selectColourBy(label: string) {
+    await this.colourByTrigger.click();
+    await this.$ref.getByRole('option', { name: label }).click();
+  }
+
+  async selectMeasure(label: string) {
+    await this.measureTrigger.click();
+    await this.$ref.getByRole('option', { name: label }).click();
+  }
+}
diff --git a/testing/src/pages/_app/datahub/instruments/$instrumentId/table.page.ts b/testing/src/pages/_app/datahub/instruments/$instrumentId/table.page.ts
new file mode 100644
index 000000000..9ba2e7597
--- /dev/null
+++ b/testing/src/pages/_app/datahub/instruments/$instrumentId/table.page.ts
@@ -0,0 +1,39 @@
+import type { Download, Locator, Page } from '@playwright/test';
+
+import { AppPage } from '../../../route.page';
+
+export class InstrumentHubTablePage extends AppPage {
+  readonly collectionMethodCells: Locator;
+  readonly exportDropdown: Locator;
+  readonly filtersTrigger: Locator;
+  readonly pageHeader: Locator;
+  readonly rows: Locator;
+  readonly seriesCells: Locator;
+  readonly table: Locator;
+  constructor(page: Page) {
+    super(page);
+    this.exportDropdown = page.getByTestId('instrument-hub-export-dropdown');
+    this.filtersTrigger = page.getByTestId('instrument-hub-filters-trigger');
+    this.pageHeader = page.getByTestId('page-header');
+    this.table = page.getByTestId('instrument-hub-records-table');
+    this.rows = this.table.getByTestId('data-table-body').getByTestId('data-table-row');
+    this.collectionMethodCells = this.table.getByTestId('record-cell-collection-method');
+    this.seriesCells = this.table.getByTestId('record-cell-series');
+  }
+
+  /** Unchecks one collection method in the filter menu, narrowing both tabs and the export. */
+  async excludeCollectionMethod(method: 'IN_PERSON' | 'REMOTE' | 'RETROSPECTIVE') {
+    await this.filtersTrigger.click();
+    await this.$ref.getByTestId(`instrument-hub-filter-method-${method}`).click();
+    await this.$ref.keyboard.press('Escape');
+  }
+
+  /** Picks a format from the download menu and returns the file it produced. */
+  async exportAs(format: 'CSV' | 'CSV Long' | 'Excel' | 'JSON' | 'TSV'): Promise<Download> {
+    const extension = { CSV: '.csv', 'CSV Long': '.csv', Excel: '.xlsx', JSON: '.json', TSV: '.tsv' }[format];
+    const started = this.$ref.waitForEvent('download', (download) => download.suggestedFilename().endsWith(extension));
+    await this.exportDropdown.click();
+    await this.$ref.getByRole('menuitem', { exact: true, name: format }).click();
+    return started;
+  }
+}
diff --git a/testing/src/pages/_app/datahub/instruments/index.page.ts b/testing/src/pages/_app/datahub/instruments/index.page.ts
new file mode 100644
index 000000000..4f3fcb6fc
--- /dev/null
+++ b/testing/src/pages/_app/datahub/instruments/index.page.ts
@@ -0,0 +1,37 @@
+import type { Locator, Page } from '@playwright/test';
+
+import { AppPage } from '../../route.page';
+
+export class InstrumentHubPage extends AppPage {
+  readonly pageHeader: Locator;
+  readonly rows: Locator;
+  readonly searchInput: Locator;
+  constructor(page: Page) {
+    super(page);
+    this.pageHeader = page.getByTestId('page-header');
+    this.rows = page.getByTestId('data-table-body').getByTestId('data-table-row');
+    this.searchInput = page.getByTestId('data-table-search-bar').getByRole('searchbox');
+  }
+
+  /** Opens an instrument's detail page through its row action, as a user would. */
+  async open(title: string) {
+    await this.row(title).first().getByTestId('row-actions-trigger').click();
+    await this.$ref.getByRole('menuitem', { exact: true, name: 'View' }).click();
+  }
+
+  /** The row for an instrument, found by the title shown in its first column. */
+  row(title: string): Locator {
+    return this.rows.filter({ hasText: title });
+  }
+
+  /** Clicks a column header to cycle its sort. Removal is disabled, so this toggles asc ⇄ desc. */
+  async sortBy(label: string) {
+    await this.$ref.getByTestId('data-table-head').getByRole('button', { name: label }).click();
+  }
+
+  /** The visible title of every listed instrument, top to bottom — the first cell of each row. */
+  async titles(): Promise<string[]> {
+    const rows = await this.rows.all();
+    return Promise.all(rows.map(async (row) => (await row.locator('> div').first().innerText()).trim()));
+  }
+}
diff --git a/testing/src/specs/authorization.spec.ts b/testing/src/specs/authorization.spec.ts
index 6ba9366c0..3e39ce75f 100644
--- a/testing/src/specs/authorization.spec.ts
+++ b/testing/src/specs/authorization.spec.ts
@@ -125,6 +125,7 @@ const PRIVILEGED_REQUESTS: PrivilegedRequest[] = [
 const GROUP_MANAGER_ONLY_ROUTES = [
   '/dashboard',
   '/datahub/subjects',
+  '/datahub/instruments',
   '/group/manage',
   '/session/remote-assignment'
 ] as const;
diff --git a/testing/src/specs/instrument-hub.spec.ts b/testing/src/specs/instrument-hub.spec.ts
new file mode 100644
index 000000000..de35da7b8
--- /dev/null
+++ b/testing/src/specs/instrument-hub.spec.ts
@@ -0,0 +1,218 @@
+import { readFile } from 'node:fs/promises';
+
+import { InstrumentHubGraphPage } from '../pages/_app/datahub/instruments/$instrumentId/graph.page';
+import { InstrumentHubTablePage } from '../pages/_app/datahub/instruments/$instrumentId/table.page';
+import { InstrumentHubPage } from '../pages/_app/datahub/instruments/index.page';
+import { HAPPINESS_RECORD } from '../support/constants';
+import { expect, test } from '../support/fixtures';
+
+const HAPPINESS = 'DNP_HAPPINESS_QUESTIONNAIRE';
+
+test.describe('instrument hub', () => {
+  test('should list an instrument with the records and subjects collected for it @smoke', async ({
+    api,
+    isolatedGroupManager,
+    page,
+    uniqueId
+  }) => {
+    // A group of its own, so the counts are exactly what this test seeds rather than whatever else
+    // the suite has written for the same instrument.
+    const group = await isolatedGroupManager();
+    const instrumentId = await api.findInstrumentIdByName(HAPPINESS);
+    // Two records for one subject and one for another: 3 records, 2 subjects. A subject count that
+    // merely counted records would read 3.
+    await api.uploadRecords(group.id, instrumentId, [
+      { data: HAPPINESS_RECORD, date: new Date(), subjectId: `hub-${uniqueId}-a` },
+      { data: HAPPINESS_RECORD, date: new Date(), subjectId: `hub-${uniqueId}-a` },
+      { data: HAPPINESS_RECORD, date: new Date(), subjectId: `hub-${uniqueId}-b` }
+    ]);
+
+    const hubPage = new InstrumentHubPage(page);
+    await hubPage.goto('/datahub/instruments');
+
+    const row = hubPage.row('Happiness Questionnaire').first();
+    await expect(row).toBeVisible();
+    await expect(row).toContainText('3');
+    await expect(row).toContainText('2');
+  });
+
+  // A series' own counts are what it orchestrated, not its members' global totals, so the row is
+  // only meaningful once something has actually been collected through it.
+  test('should list a series with what it collected, and open it onto the instruments it is made of', async ({
+    api,
+    isolatedGroupManager,
+    page,
+    uniqueId
+  }) => {
+    const group = await isolatedGroupManager();
+    const seriesTitle = `Hub Series ${uniqueId}`;
+    const seriesId = await api.createSeries(group.id, seriesTitle);
+    const instrumentId = await api.findInstrumentIdByName(HAPPINESS);
+    const session = await api.createSession(group.id, { id: `series-${uniqueId}` });
+    await api.createRecord(group.id, instrumentId, session, HAPPINESS_RECORD, seriesId);
+
+    const hubPage = new InstrumentHubPage(page);
+    await hubPage.goto('/datahub/instruments');
+
+    const row = hubPage.row(seriesTitle).first();
+    await expect(row).toBeVisible();
+    await expect(row).toContainText('Series');
+
+    await hubPage.open(seriesTitle);
+    // The member list is the records' own instruments, so the instrument administered through the
+    // series is there even though the series itself holds no records under its own id.
+    await expect(page.getByTestId('instrument-hub-series-members')).toContainText('Happiness Questionnaire');
+  });
+
+  // Sorting is the only way to find an instrument in a long catalog without searching for it, so
+  // the header affordance has to actually reorder the rows rather than merely render a chevron.
+  test('should reorder the list when a column header is clicked', async ({ isolatedGroupManager, page }) => {
+    await isolatedGroupManager();
+    const hubPage = new InstrumentHubPage(page);
+    await hubPage.goto('/datahub/instruments');
+    await expect(hubPage.rows.first()).toBeVisible();
+
+    await hubPage.sortBy('Instrument');
+    const ascending = await hubPage.titles();
+    expect(ascending.length).toBeGreaterThan(1);
+    // Compared case-insensitively because that is what tanstack's `text` sorting function does;
+    // asserting against `localeCompare` would flake on any mixed-case pair.
+    const caseInsensitive = [...ascending].sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
+    expect(ascending).toStrictEqual(caseInsensitive);
+
+    // Sort removal is disabled on these tables, so a second click is descending rather than unsorted.
+    await hubPage.sortBy('Instrument');
+    expect(await hubPage.titles()).toStrictEqual([...ascending].reverse());
+  });
+
+  test("should show every subject's records for one instrument, with how each was collected", async ({
+    api,
+    isolatedGroupManager,
+    page,
+    uniqueId
+  }) => {
+    const group = await isolatedGroupManager();
+    const instrumentId = await api.findInstrumentIdByName(HAPPINESS);
+    // One record per collection method, so the column has to vary rather than printing a constant.
+    await api.uploadRecords(group.id, instrumentId, [
+      { data: HAPPINESS_RECORD, date: new Date(), subjectId: `method-${uniqueId}-retro` }
+    ]);
+    const session = await api.createSession(group.id, { id: `method-${uniqueId}-inperson` }, 'IN_PERSON');
+    await api.createRecord(group.id, instrumentId, session, HAPPINESS_RECORD);
+
+    const hubPage = new InstrumentHubPage(page);
+    await hubPage.goto('/datahub/instruments');
+    await hubPage.open('Happiness Questionnaire');
+
+    const tablePage = new InstrumentHubTablePage(page);
+    await expect(tablePage.rows).toHaveCount(2);
+    await expect(tablePage.collectionMethodCells.filter({ hasText: 'Retrospective' })).toHaveCount(1);
+    await expect(tablePage.collectionMethodCells.filter({ hasText: 'In-Person' })).toHaveCount(1);
+    // Neither record came through a series, so both series cells name the absence.
+    await expect(tablePage.seriesCells).toHaveCount(2);
+    await expect(tablePage.seriesCells.first()).toHaveText('None');
+  });
+
+  // The download is built from the rows the table holds, so a filter has to narrow both. Getting
+  // this wrong exports rows the user believed they had excluded.
+  test('should export only the records left by the collection method filter, with the metadata columns', async ({
+    api,
+    isolatedGroupManager,
+    page,
+    uniqueId
+  }) => {
+    const group = await isolatedGroupManager();
+    const instrumentId = await api.findInstrumentIdByName(HAPPINESS);
+    const retrospective = `export-${uniqueId}-retro`;
+    await api.uploadRecords(group.id, instrumentId, [
+      { data: HAPPINESS_RECORD, date: new Date(), subjectId: retrospective }
+    ]);
+    const session = await api.createSession(group.id, { id: `export-${uniqueId}-inperson` }, 'IN_PERSON');
+    await api.createRecord(group.id, instrumentId, session, HAPPINESS_RECORD);
+
+    const hubPage = new InstrumentHubPage(page);
+    await hubPage.goto('/datahub/instruments');
+    await hubPage.open('Happiness Questionnaire');
+
+    const tablePage = new InstrumentHubTablePage(page);
+    await expect(tablePage.rows).toHaveCount(2);
+
+    await tablePage.excludeCollectionMethod('IN_PERSON');
+    await expect(tablePage.rows).toHaveCount(1);
+
+    const download = await tablePage.exportAs('JSON');
+    const payload = JSON.parse(await readFile(await download.path(), 'utf8')) as {
+      CollectionMethod: string;
+      SeriesID: null | string;
+      SubjectID: string;
+    }[];
+
+    expect(payload).toHaveLength(1);
+    // Exports carry the stored value, not the translated label, so analysis keys on something that
+    // does not change with the reader's language.
+    expect(payload[0]!.CollectionMethod).toBe('RETROSPECTIVE');
+    expect(payload[0]!.SeriesID).toBeNull();
+    expect(payload[0]!.SubjectID).toBe(retrospective);
+  });
+
+  test('should plot the records of the instrument on its graph tab', async ({
+    api,
+    isolatedGroupManager,
+    page,
+    uniqueId
+  }) => {
+    const group = await isolatedGroupManager();
+    const instrumentId = await api.findInstrumentIdByName(HAPPINESS);
+    await api.uploadRecords(
+      group.id,
+      instrumentId,
+      ['a', 'b'].map((suffix) => ({
+        data: HAPPINESS_RECORD,
+        date: new Date(),
+        subjectId: `graph-${uniqueId}-${suffix}`
+      }))
+    );
+
+    const hubPage = new InstrumentHubPage(page);
+    await hubPage.goto('/datahub/instruments');
+    await hubPage.open('Happiness Questionnaire');
+
+    // Reached by clicking the tab rather than through `getPageModel`, whose exact-URL assertion the
+    // route's own search-param defaults would fail.
+    await page.getByTestId('instrument-hub-graph-tab').click();
+    const graphPage = new InstrumentHubGraphPage(page);
+    await expect(graphPage.chart).toBeVisible();
+    await expect(graphPage.scatterMarks).toHaveCount(2);
+
+    await graphPage.selectChart('Distribution');
+    await expect(graphPage.bars.first()).toBeVisible();
+  });
+
+  test('should keep the filters when switching between the table and graph tabs, so both describe one set', async ({
+    api,
+    isolatedGroupManager,
+    page,
+    uniqueId
+  }) => {
+    const group = await isolatedGroupManager();
+    const instrumentId = await api.findInstrumentIdByName(HAPPINESS);
+    await api.uploadRecords(group.id, instrumentId, [
+      { data: HAPPINESS_RECORD, date: new Date(), subjectId: `shared-${uniqueId}` }
+    ]);
+
+    const hubPage = new InstrumentHubPage(page);
+    await hubPage.goto('/datahub/instruments');
+    await hubPage.open('Happiness Questionnaire');
+
+    const tablePage = new InstrumentHubTablePage(page);
+    await expect(tablePage.rows).toHaveCount(1);
+    await tablePage.excludeCollectionMethod('RETROSPECTIVE');
+    await expect(page.getByTestId('data-table-empty-state')).toBeVisible();
+
+    // The filter lives in the URL, so it survives the tab change rather than resetting with the
+    // newly mounted tab's own state.
+    await page.getByTestId('instrument-hub-graph-tab').click();
+    await expect(page).toHaveURL(/methods=/);
+    await expect(page.getByTestId('instrument-hub-chart')).toContainText('No records match');
+  });
+});
diff --git a/testing/src/specs/subject-detail.spec.ts b/testing/src/specs/subject-detail.spec.ts
index 06c15353b..3f7aa50d7 100644
--- a/testing/src/specs/subject-detail.spec.ts
+++ b/testing/src/specs/subject-detail.spec.ts
@@ -62,7 +62,8 @@ test.describe('subject detail', () => {
     await seedSubjectWithRecord(getPageModel, page, `Graph${uniqueId}`);
 
     await page.getByRole('link', { name: 'Graph' }).click();
-    await page.waitForURL('**/graph');
+    // The tab links carry the chart palette, so the glob has to allow a query string.
+    await page.waitForURL(/\/graph(\?|$)/);
 
     const graphPage = new SubjectGraphPage(page);
     await graphPage.selectInstrument(INSTRUMENT_TITLE);
@@ -99,7 +100,7 @@ test.describe('subject detail', () => {
     await page.waitForURL('**/datahub/subjects/**/table');
 
     await page.getByRole('link', { name: 'Assignments' }).click();
-    await page.waitForURL('**/assignments');
+    await page.waitForURL(/\/assignments(\?|$)/);
 
     const assignmentsPage = new SubjectAssignmentsPage(page);
     await expect(assignmentsPage.assignmentRows).toHaveCount(1);
diff --git a/testing/src/support/api-client.ts b/testing/src/support/api-client.ts
index 78a2d443f..6bd59b1fa 100644
--- a/testing/src/support/api-client.ts
+++ b/testing/src/support/api-client.ts
@@ -5,10 +5,14 @@ import type { $LoginCredentials } from '@opendatacapture/schemas/auth';
 import type { Permissions } from '@opendatacapture/schemas/core';
 import type { $CreateGroupData, Group } from '@opendatacapture/schemas/group';
 import type { InstrumentInfo } from '@opendatacapture/schemas/instrument';
-import type { UploadInstrumentRecordsData } from '@opendatacapture/schemas/instrument-records';
+import type {
+  $CreateInstrumentRecordData,
+  InstrumentRecord,
+  UploadInstrumentRecordsData
+} from '@opendatacapture/schemas/instrument-records';
 import { MAIL_CLIENT_TIMEOUT } from '@opendatacapture/schemas/mail';
 import type { $SendAssignmentEmailData, EmailDeliveryResult } from '@opendatacapture/schemas/mail';
-import type { $CreateSessionData, Session } from '@opendatacapture/schemas/session';
+import type { $CreateSessionData, Session, SessionType } from '@opendatacapture/schemas/session';
 import type { $CreateSubjectData } from '@opendatacapture/schemas/subject';
 import type { $CreateUserData, $UpdateUserData, User } from '@opendatacapture/schemas/user';
 import type { APIRequestContext } from '@playwright/test';
@@ -75,6 +79,34 @@ export class ApiClient {
     return group;
   }
 
+  /**
+   * Creates one record against a session, the way the app does when an instrument is completed in a
+   * sitting. Unlike {@link uploadRecords}, which always writes a RETROSPECTIVE session, this lets a
+   * spec choose the collection method the record will report.
+   */
+  async createRecord(
+    groupId: string,
+    instrumentId: string,
+    session: Session,
+    data: $CreateInstrumentRecordData['data'],
+    seriesInstrumentId?: string
+  ): Promise<InstrumentRecord> {
+    const body: $CreateInstrumentRecordData = {
+      data,
+      date: new Date(),
+      groupId,
+      instrumentId,
+      seriesInstrumentId,
+      sessionId: session.id,
+      subjectId: session.subjectId
+    };
+    return this.expectJson<InstrumentRecord>(
+      this.request.post(`${API}/instrument-records`, { data: body, headers: this.authHeaders }),
+      201,
+      'create instrument record'
+    );
+  }
+
   /** Assembles a series owned by the group out of the first two forms available, returning its id. */
   async createSeries(groupId: string, title: string): Promise<string> {
     const items = (await this.getInstrumentInfo())
@@ -95,8 +127,12 @@ export class ApiClient {
    * Creates a session, and with it the subject it names. A subject seeded this way holds no
    * instrument records, which is what distinguishes it under the "with records only" filter.
    */
-  async createSession(groupId: null | string, subjectData: $CreateSubjectData): Promise<Session> {
-    const data: $CreateSessionData = { date: new Date(), groupId, subjectData, type: 'IN_PERSON' };
+  async createSession(
+    groupId: null | string,
+    subjectData: $CreateSubjectData,
+    type: SessionType = 'IN_PERSON'
+  ): Promise<Session> {
+    const data: $CreateSessionData = { date: new Date(), groupId, subjectData, type };
     return this.expectJson<Session>(
       this.request.post(`${API}/sessions`, { data, headers: this.authHeaders }),
       201,
diff --git a/testing/src/support/fixtures.ts b/testing/src/support/fixtures.ts
index d87cff91c..320cb23a0 100644
--- a/testing/src/support/fixtures.ts
+++ b/testing/src/support/fixtures.ts
@@ -16,6 +16,9 @@ import { AdminSettingsPage } from '../pages/_app/admin/settings.page';
 import { AdminUserPage } from '../pages/_app/admin/users/$userId.page';
 import { ContactPage } from '../pages/_app/contact.page';
 import { DashboardPage } from '../pages/_app/dashboard.page';
+import { InstrumentHubGraphPage } from '../pages/_app/datahub/instruments/$instrumentId/graph.page';
+import { InstrumentHubTablePage } from '../pages/_app/datahub/instruments/$instrumentId/table.page';
+import { InstrumentHubPage } from '../pages/_app/datahub/instruments/index.page';
 import { SubjectAssignmentsPage } from '../pages/_app/datahub/subjects/$subjectId/assignments.page';
 import { DatahubPage } from '../pages/_app/datahub/subjects/index.page';
 import { GroupEmailTemplatesPage } from '../pages/_app/group/email-templates.page';
@@ -45,6 +48,9 @@ const pageModels = {
   '/auth/login': LoginPage,
   '/contact': ContactPage,
   '/dashboard': DashboardPage,
+  '/datahub/instruments': InstrumentHubPage,
+  '/datahub/instruments/$instrumentId/graph': InstrumentHubGraphPage,
+  '/datahub/instruments/$instrumentId/table': InstrumentHubTablePage,
   '/datahub/subjects': DatahubPage,
   '/datahub/subjects/$subjectId/assignments': SubjectAssignmentsPage,
   '/group/email-templates': GroupEmailTemplatesPage,