From db508a45eb536b4df18330424554a16c6700662f Mon Sep 17 00:00:00 2001
From: Chris Barber <chris@harperdb.io>
Date: Wed, 9 Sep 2026 00:25:15 -0500
Subject: [PATCH 1/2] feat(browse): step between records from the record editor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The editor opened on one row and had no way out but the grid, so reading a
handful of records in order meant close, click, close, click.

- Prev/Next in the dialog footer, with the open record's place in the result
  set between them. A step past either end of the page turns the grid's page
  and opens its first/last record.
- "Edit Row" is now "Edit Record", and "Delete Row" "Delete Record" — the
  button above the grid says "Add New Record(s)", so each row is a record.
- The total is shown only where it describes the result set: `record_count`
  counts the whole table, so a filtered list shows the position alone.
- Whether another record follows is answered by page fullness, not by that
  count. Both list queries page by offset/limit, so a page shorter than
  `pageSize` is the last page — exact, where the count is a whole-table
  estimate that would offer a next record that isn't there and leave the grid
  on an empty page.
- A step that can't complete — an empty page, or a request that failed and
  (with `retry: false`) will never produce one — puts the grid back where it
  was and keeps the editor open, rather than stranding either.
- The loading logo belongs to the dialog's first record only. Swapping Monaco
  out for it on every step made the whole dialog flash, so the editor now
  stays mounted and empties while the next record loads.

Also fixes a bug this made visible but did not introduce: @monaco-editor/react
pushes a `value` into a READ-ONLY editor with `setValue`, which fires `onChange`
exactly like a keystroke (its writable path suppresses the event), and reports
it through the PREVIOUS render's handler, since the change subscription is
refreshed in an effect declared after the one that pushes the value. Any record
refetch under a read-only editor therefore registered as an unsaved edit, and
the next one claimed to have discarded it. An edit is now recognised by the
text differing from what this component last pushed in — not by comparing
against the value on screen, which would swallow a user's undo back to the
stored record and save the abandoned draft instead.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../components/DatabaseTableView.tsx          | 156 ++++++-
 .../modals/EditTableRowModal.test.tsx         | 338 ++++++++++++++-
 .../databases/modals/EditTableRowModal.tsx    | 395 ++++++++++++------
 3 files changed, 728 insertions(+), 161 deletions(-)

diff --git a/src/features/instance/databases/components/DatabaseTableView.tsx b/src/features/instance/databases/components/DatabaseTableView.tsx
index a11f46441..95e35e654 100644
--- a/src/features/instance/databases/components/DatabaseTableView.tsx
+++ b/src/features/instance/databases/components/DatabaseTableView.tsx
@@ -10,7 +10,7 @@ import {
 } from '@/features/instance/databases/functions/relationshipAttributes';
 import { getSchemaRelationshipsQueryOptions } from '@/features/instance/databases/functions/schemaRelationships';
 import { useExportTableCsv } from '@/features/instance/databases/hooks/useExportTableCsv';
-import { EditTableRowModal } from '@/features/instance/databases/modals/EditTableRowModal';
+import { EditTableRowModal, RecordNavigation } from '@/features/instance/databases/modals/EditTableRowModal';
 import { useStaffPermission } from '@/hooks/useAuth';
 import { useEffectedState } from '@/hooks/useEffectedState';
 import {
@@ -148,6 +148,18 @@ export function DatabaseTableView({ instanceDatabaseMap, databaseName, tableName
 	// either the row has no value for that key, or it has one but nothing is stored under it (both
 	// happen when a table's primary key was changed after rows existed; see #1199).
 	const [clickedRow, setClickedRow] = useEffectedState<Record<string, unknown> | null>(null, allParams);
+	// Where the open record sits in the page the grid is showing, so the editor can say which record
+	// it is and step to its neighbours. Null when nothing is open.
+	const [openRowIndex, setOpenRowIndex] = useEffectedState<number | null>(null, allParams);
+	// A step off either end of the page can only open its record once the neighbouring page has been
+	// fetched: which end of it to open, plus the page to put the grid back on if that fetch brings
+	// nothing (an empty page, or a failed request -- both list queries are `retry: false`).
+	const [pendingRecordStep, setPendingRecordStep] = useState<{ end: 'first' | 'last'; fromPage: number } | null>(
+		null,
+	);
+	// While that page loads, the open record is the one the user stepped away from -- so the editor
+	// shows nothing rather than a record its own header can no longer name.
+	const isStepPending = pendingRecordStep !== null;
 
 	const isLastTableInDatabase = useMemo(() => {
 		const tableNames = databaseName ? Object.keys(instanceDatabaseMap?.[databaseName] || []).sort() : [];
@@ -253,6 +265,20 @@ export function DatabaseTableView({ instanceDatabaseMap, databaseName, tableName
 	const [pageIndex, setPageIndex] = useEffectedState(0, [databaseName, tableName, appliedSearchConditions]);
 	const [pageSize, setPageSize] = useState(20);
 
+	// The index of a page a step has proven to be the last one. A full page can't say whether more
+	// records follow, so the step probes; an empty answer is the only proof, and remembering it
+	// keeps the Next button from offering that same dead probe again.
+	const [knownLastPage, setKnownLastPage] = useEffectedState<number | null>(null, [
+		databaseName,
+		tableName,
+		appliedSearchConditions,
+		// A page index means nothing once the page size changes: page 0 proven terminal at 250 rows
+		// says nothing about page 0 at 20. The cache mode changes which records the list returns at
+		// all, so it retires the proof too.
+		pageSize,
+		onlyIfCached,
+	]);
+
 	// The count comes from whichever describe carries it: the map when the server still returns counts
 	// (older backends), otherwise describe_table's async backfill. The first pass is always the cheap
 	// estimate (a plain describe_table caps the count scan at ~500ms); the server returns an exact value
@@ -297,7 +323,9 @@ export function DatabaseTableView({ instanceDatabaseMap, databaseName, tableName
 		getAttributes: relationshipGetAttributes,
 	};
 	const searchByValueOptions = getSearchByValueOptions(searchByValueParams);
-	const { data: fullTableData, isFetching: tableDataFetching } = useQuery(searchByValueOptions);
+	const { data: fullTableData, isFetching: tableDataFetching, isError: isFullTableError } = useQuery(
+		searchByValueOptions,
+	);
 
 	// Filtered list
 	const searchByConditionsParams = {
@@ -313,10 +341,20 @@ export function DatabaseTableView({ instanceDatabaseMap, databaseName, tableName
 		getAttributes: relationshipGetAttributes,
 	};
 	const searchByConditionsOptions = getSearchByConditionsOptions(searchByConditionsParams);
-	const { data: filteredTableData, isFetching: tableConditionsDataFetching } = useQuery(searchByConditionsOptions);
+	const { data: filteredTableData, isFetching: tableConditionsDataFetching, isError: isFilteredTableError } = useQuery(
+		searchByConditionsOptions,
+	);
 
 	const tableData = useFilteredList ? filteredTableData : fullTableData;
 	const isFetching = tableDataFetching || tableConditionsDataFetching;
+	// Whether the page the grid is asking for came back as a failure. Needed by the pending step
+	// below: with `retry: false`, a failed page leaves `pageRows` undefined forever, which is
+	// otherwise indistinguishable from a fetch still in flight.
+	const isPageError = useFilteredList ? isFilteredTableError : isFullTableError;
+	// The page the grid is showing. Undefined while a page is in flight -- neither list query keeps
+	// the previous page's data -- which is what tells a pending record step that its page hasn't
+	// arrived yet.
+	const pageRows = tableData?.data;
 
 	// One by id
 	const { data: searchByIdData, isFetching: isSearchByIdFetching, isError: isSearchByIdError } = useQuery(
@@ -335,9 +373,11 @@ export function DatabaseTableView({ instanceDatabaseMap, databaseName, tableName
 	//   - recordUnavailable: it has a value, we looked it up, but nothing is stored under that key
 	//     (Harper kept keying rows by the original attribute), so the fetch comes back empty.
 	// In both cases we show the row the list already gave us, read-only, with an explanation.
-	const missingPrimaryKey = isEditModalOpen && !!clickedRow && (primaryKey ? clickedRow[primaryKey] == null : true);
+	const missingPrimaryKey = isEditModalOpen && !isStepPending && !!clickedRow
+		&& (primaryKey ? clickedRow[primaryKey] == null : true);
 	const fetchedRecord = searchByIdData?.data;
 	const recordUnavailable = !missingPrimaryKey
+		&& !isStepPending
 		&& !!selectedIds?.length
 		&& !isSearchByIdFetching
 		&& (isSearchByIdError || (Array.isArray(fetchedRecord) && fetchedRecord.length === 0));
@@ -349,8 +389,13 @@ export function DatabaseTableView({ instanceDatabaseMap, databaseName, tableName
 
 	const queryClient = useQueryClient();
 	const refreshTable = useCallback(
-		() => queryClient.invalidateQueries({ queryKey: [instanceParams.entityId, databaseName, tableName] }),
-		[queryClient, instanceParams.entityId, databaseName, tableName],
+		() => {
+			// Records may have been added since a step proved a page terminal, so that proof retires
+			// with the data it was made against.
+			setKnownLastPage(null);
+			return queryClient.invalidateQueries({ queryKey: [instanceParams.entityId, databaseName, tableName] });
+		},
+		[queryClient, instanceParams.entityId, databaseName, tableName, setKnownLastPage],
 	);
 	// `refreshTable`'s prefix does NOT reach the open record: `getSearchById` keys on
 	// `[entityId, 'search_by_id', databaseName, tableName, ids]`, so `'search_by_id'` sits where the
@@ -477,12 +522,79 @@ export function DatabaseTableView({ instanceDatabaseMap, databaseName, tableName
 		);
 	}, [deleteTableRecords, instanceParams, databaseName, tableName, refreshTable]);
 
-	const onRowClick = (rowData: Row<Record<string, unknown>>) => {
-		const primaryKeyValue = primaryKey ? rowData.original[primaryKey] : undefined;
-		setClickedRow(rowData.original);
+	// Point the editor at a record on the page the grid is showing. The row is kept as well as its
+	// id because the editor falls back to it when the record can't be fetched by that id.
+	const openRecordAt = useCallback((index: number, row: Record<string, unknown>) => {
+		const primaryKeyValue = primaryKey ? row[primaryKey] : undefined;
+		setClickedRow(row);
 		// With no usable primary key there's nothing to look up, so skip the (doomed) fetch; otherwise
 		// fetch the fresh record. Either way the modal can fall back to `clickedRow`.
 		setSelectedIds(primaryKeyValue == null ? null : [primaryKeyValue]);
+		setOpenRowIndex(index);
+	}, [primaryKey, setClickedRow, setSelectedIds, setOpenRowIndex]);
+
+	const stepToRecord = useCallback((offset: -1 | 1) => {
+		if (openRowIndex === null || !pageRows) {
+			return;
+		}
+		const index = openRowIndex + offset;
+		const row = pageRows[index];
+		if (row) {
+			openRecordAt(index, row);
+			return;
+		}
+		// Off the end of the page: turn the page and open its first/last record once it loads.
+		const targetPage = pageIndex + offset;
+		if (targetPage < 0) {
+			return;
+		}
+		setPageIndex(targetPage);
+		setPendingRecordStep({ end: offset === 1 ? 'first' : 'last', fromPage: pageIndex });
+	}, [openRowIndex, pageRows, openRecordAt, pageIndex, setPageIndex]);
+
+	useEffect(function openTheRecordWaitingOnTheNeighbouringPage() {
+		if (!pendingRecordStep) {
+			return;
+		}
+		if (!isEditModalOpen) {
+			setPendingRecordStep(null);
+			return;
+		}
+		const index = pendingRecordStep.end === 'first' ? 0 : (pageRows?.length ?? 0) - 1;
+		const row = index >= 0 ? pageRows?.[index] : undefined;
+		if (row) {
+			setPendingRecordStep(null);
+			openRecordAt(index, row);
+			return;
+		}
+		if (!pageRows && !isPageError) {
+			// Still fetching the page the step moved to. Anything else -- an empty page, or a request
+			// that failed and (with `retry: false`) will never produce one -- has settled with nothing,
+			// so fall through rather than wait for a page that isn't coming.
+			return;
+		}
+		// The step can't complete, so put the grid back where it was and leave the editor on the
+		// record it stepped away from, rather than closing it or stranding the grid on a page that
+		// holds nothing.
+		setPendingRecordStep(null);
+		setPageIndex(pendingRecordStep.fromPage);
+		if (isPageError) {
+			toast.error("Couldn't load the next page of records");
+			return;
+		}
+		if (pendingRecordStep.end === 'first') {
+			// An empty page forward is proof there is nothing past the page we came from -- the only
+			// proof available when that page was full. Backwards it means something else entirely
+			// (records disappeared behind us), so it must not mark that page as the last one.
+			setKnownLastPage(pendingRecordStep.fromPage);
+			toast.info('This is the last record');
+			return;
+		}
+		toast.info('This is the first record');
+	}, [pendingRecordStep, pageRows, isPageError, isEditModalOpen, openRecordAt, setPageIndex, setKnownLastPage]);
+
+	const onRowClick = (rowData: Row<Record<string, unknown>>) => {
+		openRecordAt(rowData.index, rowData.original);
 		setIsEditModalOpen(true);
 	};
 	const onColumnClick = (accessorKey: string, isAscending: boolean) => {
@@ -513,6 +625,25 @@ export function DatabaseTableView({ instanceDatabaseMap, databaseName, tableName
 		...storedColumnVisibility,
 	}), [relationshipInfoMap, storedColumnVisibility]);
 
+	// A step onto another page leaves the open record briefly behind the grid, so the position and
+	// the buttons wait for that page rather than describing the record the user stepped away from.
+	const recordNavigation: RecordNavigation | undefined = openRowIndex === null ? undefined : {
+		position: isStepPending ? undefined : pageIndex * pageSize + openRowIndex + 1,
+		// The count describes the whole table, so it only counts the result set when nothing filters it.
+		total: useFilteredList ? undefined : totalRecords,
+		isTotalEstimated: isEstimatedCount,
+		hasPrevious: !isStepPending && (openRowIndex > 0 || pageIndex > 0),
+		// A page shorter than `pageSize` is the last page: both list queries page by offset/limit, so
+		// a short page means the server had no more rows. That is exact, where `totalRecords` is a
+		// whole-table estimate that says nothing about a filtered result set -- using it offered a
+		// next record that wasn't there and left the grid on an empty page.
+		hasNext: !isStepPending && !!pageRows
+			&& (openRowIndex + 1 < pageRows.length
+				|| (pageRows.length === pageSize && knownLastPage !== pageIndex)),
+		onPrevious: () => stepToRecord(-1),
+		onNext: () => stepToRecord(1),
+	};
+
 	const [columnSizing, setColumnSizing] = useSessionStorage(
 		`ColumnSizing/${databaseName}/${tableName}` as 'ColumnSizing/{database}/{table}',
 		{} satisfies ColumnSizingState,
@@ -663,7 +794,7 @@ export function DatabaseTableView({ instanceDatabaseMap, databaseName, tableName
 
 			<TableView<Record<string, unknown>>
 				primaryKey={primaryKey}
-				data={tableData?.data}
+				data={pageRows}
 				isFetching={isFetching}
 				filtersToggled={filtersToggled}
 				columns={dataTableColumns}
@@ -697,7 +828,10 @@ export function DatabaseTableView({ instanceDatabaseMap, databaseName, tableName
 				missingPrimaryKey={missingPrimaryKey}
 				recordUnavailable={recordUnavailable}
 				syntheticAttributes={syntheticAttributes}
-				data={missingPrimaryKey || recordUnavailable
+				recordNavigation={recordNavigation}
+				data={isStepPending
+					? undefined
+					: missingPrimaryKey || recordUnavailable
 					? (clickedRow ? [clickedRow] : undefined)
 					: searchByIdData?.data}
 				onSaveChanges={onRecordUpdate}
diff --git a/src/features/instance/databases/modals/EditTableRowModal.test.tsx b/src/features/instance/databases/modals/EditTableRowModal.test.tsx
index 2b1229d62..732a227e0 100644
--- a/src/features/instance/databases/modals/EditTableRowModal.test.tsx
+++ b/src/features/instance/databases/modals/EditTableRowModal.test.tsx
@@ -5,12 +5,20 @@ import { EditTableRowModal } from '@/features/instance/databases/modals/EditTabl
 import { WORKER_FREE_JSON_LANGUAGE_ID } from '@/lib/monaco/workerFreeJsonLanguage';
 import { MAX_WORKER_MODEL_CHARS } from '@/lib/monaco/workerLimits';
 import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { useEffect, useRef, useState } from 'react';
 import { toast } from 'sonner';
 import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
 
 // Monaco can't load in jsdom; stub the editor with a <textarea> that exposes the value and
 // language it was given, is read-only when told, and forwards edits through `onChange` so a
 // test can drive typing/pasting.
+//
+// The stub also reproduces the two @monaco-editor/react behaviours this modal has to survive,
+// because both of them have caused bugs here:
+//   - a `value` pushed into a READ-ONLY editor goes in with `setValue`, which fires `onChange`
+//     exactly like a keystroke (the writable path suppresses the event; that one does not), and
+//   - the change subscription is refreshed in an effect declared AFTER the one that pushes the
+//     value, so that programmatic change is reported through the PREVIOUS render's handler.
 vi.mock('@/lib/monaco/MonacoEditor', () => ({
 	Editor: (
 		{ value, language, options, onChange }: {
@@ -19,16 +27,42 @@ vi.mock('@/lib/monaco/MonacoEditor', () => ({
 			options?: { readOnly?: boolean };
 			onChange?: (value: string | undefined) => void;
 		},
-	) => (
-		<textarea
-			data-testid="editor"
-			data-language={language}
-			data-readonly={String(Boolean(options?.readOnly))}
-			readOnly={Boolean(options?.readOnly)}
-			value={value ?? ''}
-			onChange={event => onChange?.(event.target.value)}
-		/>
-	),
+	) => {
+		const subscribed = useRef(onChange);
+		const shown = useRef(value);
+		// The editor owns its buffer, as Monaco does — a typed edit survives re-renders, and the
+		// `value` prop is *pushed* into it rather than driving it every render. Without this the
+		// stub could never hold text that differs from the prop, which is the state every
+		// unsaved-draft case in this file is about.
+		const [buffer, setBuffer] = useState(value ?? '');
+		useEffect(() => {
+			if (shown.current === value) {
+				return;
+			}
+			const pushedIntoReadOnlyEditor = Boolean(options?.readOnly);
+			shown.current = value;
+			setBuffer(value ?? '');
+			if (pushedIntoReadOnlyEditor) {
+				subscribed.current?.(value ?? '');
+			}
+		}, [value, options?.readOnly]);
+		useEffect(() => {
+			subscribed.current = onChange;
+		});
+		return (
+			<textarea
+				data-testid="editor"
+				data-language={language}
+				data-readonly={String(Boolean(options?.readOnly))}
+				readOnly={Boolean(options?.readOnly)}
+				value={buffer}
+				onChange={event => {
+					setBuffer(event.target.value);
+					onChange?.(event.target.value);
+				}}
+			/>
+		);
+	},
 }));
 vi.mock('@/hooks/useMonacoTheme', () => ({ useMonacoTheme: () => 'light' }));
 vi.mock('sonner', () => ({ toast: { error: vi.fn(), loading: vi.fn(), success: vi.fn(), warning: vi.fn() } }));
@@ -106,36 +140,36 @@ describe('EditTableRowModal', () => {
 	it('warns, goes read-only, and hides write actions when the primary key is missing', () => {
 		renderModal({ missingPrimaryKey: true });
 
-		expect(screen.getByText('This row has no primary key value')).toBeTruthy();
+		expect(screen.getByText('This record has no primary key value')).toBeTruthy();
 		// The banner names the missing primary-key attribute.
 		expect(screen.getByText('email')).toBeTruthy();
 		expect(screen.getByRole('heading').textContent).toContain('View');
 		expect(screen.getByTestId('editor').getAttribute('data-readonly')).toBe('true');
 		// No way to save or delete a row that can't be addressed.
 		expect(screen.queryByRole('button', { name: /Save Changes/i })).toBeNull();
-		expect(screen.queryByRole('button', { name: /Delete Row/i })).toBeNull();
+		expect(screen.queryByRole('button', { name: /Delete Record/i })).toBeNull();
 	});
 
 	it("warns and hides write actions when the record can't be loaded by its primary key", () => {
 		renderModal({ recordUnavailable: true });
 
-		expect(screen.getByText("This row couldn't be loaded")).toBeTruthy();
+		expect(screen.getByText("This record couldn't be loaded")).toBeTruthy();
 		expect(screen.getByText('email')).toBeTruthy();
 		expect(screen.getByRole('heading').textContent).toContain('View');
 		expect(screen.getByTestId('editor').getAttribute('data-readonly')).toBe('true');
 		expect(screen.queryByRole('button', { name: /Save Changes/i })).toBeNull();
-		expect(screen.queryByRole('button', { name: /Delete Row/i })).toBeNull();
+		expect(screen.queryByRole('button', { name: /Delete Record/i })).toBeNull();
 	});
 
-	it('does not throw when Delete Row is clicked before the record has loaded', () => {
+	it('does not throw when Delete Record is clicked before the record has loaded', () => {
 		// The parent passes `data={searchByIdData?.data}`, which is undefined while the
-		// record fetch is in flight — but the Delete Row button renders regardless. Clicking
+		// record fetch is in flight — but the Delete Record button renders regardless. Clicking
 		// it then used to do an unguarded `data[0]` and throw an unhandled
 		// "Cannot read properties of undefined (reading '0')" (RUM, browse table view).
 		const onDeleteRecord = vi.fn();
 		renderModal({ data: undefined, onDeleteRecord });
 
-		const deleteButton = screen.getByRole('button', { name: /Delete Row/i });
+		const deleteButton = screen.getByRole('button', { name: /Delete Record/i });
 		expect(() => fireEvent.click(deleteButton)).not.toThrow();
 		// Nothing to delete without a loaded record, so the delete is a no-op.
 		expect(onDeleteRecord).not.toHaveBeenCalled();
@@ -144,11 +178,11 @@ describe('EditTableRowModal', () => {
 	it('lets a normal row be edited and deleted', () => {
 		renderModal();
 
-		expect(screen.queryByText('This row has no primary key value')).toBeNull();
+		expect(screen.queryByText('This record has no primary key value')).toBeNull();
 		expect(screen.getByRole('heading').textContent).toContain('Edit');
 		expect(screen.getByTestId('editor').getAttribute('data-readonly')).toBe('false');
 		expect(screen.getByRole('button', { name: /Save Changes/i })).toBeTruthy();
-		expect(screen.getByRole('button', { name: /Delete Row/i })).toBeTruthy();
+		expect(screen.getByRole('button', { name: /Delete Record/i })).toBeTruthy();
 	});
 
 	it('edits with the worker-free JSON language, so no language worker can OOM', () => {
@@ -495,10 +529,10 @@ describe('EditTableRowModal', () => {
 	// Delete and Save are cross-disabled in both directions. A delete that landed while a `put` was
 	// still in flight would be undone by the replace re-creating the record, so neither action may
 	// start while the other is going.
-	it('disables Delete Row while a save is in flight', () => {
+	it('disables Delete Record while a save is in flight', () => {
 		renderModal({ isUpdateTableRecordsPending: true });
 
-		expect(screen.getByRole('button', { name: /Delete Row/i }).hasAttribute('disabled')).toBe(true);
+		expect(screen.getByRole('button', { name: /Delete Record/i }).hasAttribute('disabled')).toBe(true);
 	});
 
 	it('disables Save Changes while a delete is in flight', () => {
@@ -507,6 +541,268 @@ describe('EditTableRowModal', () => {
 		expect(saveButton().hasAttribute('disabled')).toBe(true);
 	});
 
+	// The editor is opened from the grid's page of records, so it can also step through them. The
+	// parent owns where the record sits and what the neighbours are; the modal owns the draft, which
+	// is why the step goes through it rather than straight to the parent.
+	describe('stepping through the result set', () => {
+		const navigation = (overrides: Record<string, unknown> = {}) => ({
+			position: 21,
+			total: 1234,
+			hasPrevious: true,
+			hasNext: true,
+			onPrevious: noop,
+			onNext: noop,
+			...overrides,
+		});
+		const previousButton = () => screen.getByRole('button', { name: 'Previous record' });
+		const nextButton = () => screen.getByRole('button', { name: 'Next record' });
+
+		it('has no navigation when the caller has no result set to step through', () => {
+			renderModal();
+
+			expect(screen.queryByRole('button', { name: 'Next record' })).toBeNull();
+		});
+
+		it('says where the record sits in the result set', () => {
+			renderModal({ recordNavigation: navigation() });
+
+			expect(screen.getByText(/^Record 21 of 1,234$/)).toBeTruthy();
+		});
+
+		it('marks an estimated total as an estimate rather than stating it', () => {
+			renderModal({ recordNavigation: navigation({ isTotalEstimated: true }) });
+
+			expect(screen.getByText(/^Record 21 of ~1,234$/)).toBeTruthy();
+		});
+
+		// A filtered list is only ever counted by the whole table's count, so there is no honest
+		// total to show — the position still is one.
+		it('shows the position alone when the size of the result set is unknown', () => {
+			renderModal({ recordNavigation: navigation({ total: undefined }) });
+
+			expect(screen.getByText(/^Record 21$/)).toBeTruthy();
+		});
+
+		it('steps to the neighbouring records', () => {
+			const onPrevious = vi.fn();
+			const onNext = vi.fn();
+			renderModal({ recordNavigation: navigation({ onPrevious, onNext }) });
+
+			fireEvent.click(previousButton());
+			fireEvent.click(nextButton());
+
+			expect(onPrevious).toHaveBeenCalledTimes(1);
+			expect(onNext).toHaveBeenCalledTimes(1);
+		});
+
+		it('offers no step past either end of the result set', () => {
+			renderModal({ recordNavigation: navigation({ hasPrevious: false, hasNext: false }) });
+
+			expect(previousButton().hasAttribute('disabled')).toBe(true);
+			expect(nextButton().hasAttribute('disabled')).toBe(true);
+		});
+
+		// Leaving mid-write would leave the user watching a record that isn't the one being written.
+		it('waits out a save before stepping away', () => {
+			renderModal({ recordNavigation: navigation(), isUpdateTableRecordsPending: true });
+
+			expect(nextButton().hasAttribute('disabled')).toBe(true);
+		});
+
+		it('waits out a delete before stepping away', () => {
+			renderModal({ recordNavigation: navigation(), isDeleteTableRecordsPending: true });
+
+			expect(nextButton().hasAttribute('disabled')).toBe(true);
+		});
+
+		// The next record replaces the editor's contents, so an unsaved draft would go with it —
+		// silently, the way Escape used to before it was blocked for the same reason.
+		it('asks before a step discards unsaved edits, and stays put when refused', () => {
+			const onNext = vi.fn();
+			const confirmed = vi.spyOn(window, 'confirm').mockReturnValue(false);
+			renderModal({ recordNavigation: navigation({ onNext }) });
+
+			edit('[{"name":"Grace"}]');
+			fireEvent.click(nextButton());
+
+			expect(confirmed).toHaveBeenCalled();
+			expect(onNext).not.toHaveBeenCalled();
+			confirmed.mockRestore();
+		});
+
+		it('steps once the discard is confirmed', () => {
+			const onNext = vi.fn();
+			const confirmed = vi.spyOn(window, 'confirm').mockReturnValue(true);
+			renderModal({ recordNavigation: navigation({ onNext }) });
+
+			edit('[{"name":"Grace"}]');
+			fireEvent.click(nextButton());
+
+			expect(onNext).toHaveBeenCalledTimes(1);
+			confirmed.mockRestore();
+		});
+
+		it('does not ask when there is nothing to discard', () => {
+			const confirmed = vi.spyOn(window, 'confirm').mockReturnValue(true);
+			renderModal({ recordNavigation: navigation() });
+
+			fireEvent.click(nextButton());
+
+			expect(confirmed).not.toHaveBeenCalled();
+			confirmed.mockRestore();
+		});
+
+		// The record arriving after a step is a different record, not this one changing underfoot —
+		// the warning for that would be describing something that never happened.
+		it('does not warn about a changed record when the user stepped to another one', () => {
+			const confirmed = vi.spyOn(window, 'confirm').mockReturnValue(true);
+			const recordNavigation = navigation();
+			const { rerender } = renderModal({ recordNavigation, data: [{ id: 'a', name: 'A' }] });
+
+			edit('[{"id":"a","name":"edited A"}]');
+			fireEvent.click(nextButton());
+			rerender(modal({ recordNavigation, data: [{ id: 'b', name: 'B' }] }));
+
+			expect(screen.queryByText('This record changed while you were editing it')).toBeNull();
+			confirmed.mockRestore();
+		});
+	});
+
+	// Monaco is expensive to mount, so swapping it for the loading logo on every step made the whole
+	// dialog flash. The logo belongs to the first record of an open dialog; after that the editor
+	// stays put and empties while the next record is fetched.
+	describe('while the next record loads', () => {
+		const loadingLogo = () => screen.queryByAltText('HDB Dog Logo Loading');
+
+		it('shows the loading logo before the first record arrives', () => {
+			renderModal({ data: undefined });
+
+			expect(loadingLogo()).toBeTruthy();
+			expect(screen.queryByTestId('editor')).toBeNull();
+		});
+
+		it('keeps the editor mounted and empties it once a record has been shown', () => {
+			const { rerender } = renderModal();
+
+			rerender(modal({ data: undefined }));
+
+			expect(loadingLogo()).toBeNull();
+			const editor = screen.getByTestId('editor') as HTMLTextAreaElement;
+			expect(editor.value).toBe('');
+			// Nothing typed into an empty buffer could survive the record that is about to replace it.
+			expect(editor.getAttribute('data-readonly')).toBe('true');
+		});
+
+		it('puts the loaded record back in the same editor', () => {
+			const { rerender } = renderModal();
+
+			rerender(modal({ data: undefined }));
+			rerender(modal({ data: [{ id: 'b', name: 'B' }] }));
+
+			const editor = screen.getByTestId('editor') as HTMLTextAreaElement;
+			expect(editor.value).toContain('"name": "B"');
+			expect(editor.getAttribute('data-readonly')).toBe('false');
+		});
+
+		// The logo is per open dialog, not per session: a fresh open with nothing loaded yet is the
+		// first record again.
+		it('shows the logo again the next time the dialog is opened', () => {
+			const { rerender } = renderModal();
+
+			rerender(modal({ isModalOpen: false }));
+			rerender(modal({ data: undefined }));
+
+			expect(loadingLogo()).toBeTruthy();
+		});
+	});
+
+	// The stub above reports a programmatic value push the way the real editor does. None of it is
+	// the user editing anything, so none of it may read as an unsaved edit.
+	describe('a value the component pushed into the editor', () => {
+		it('is not an unsaved edit when the editor is emptied for the next record', () => {
+			const { rerender } = renderAddressableModal({ data: [{ id: 'a', name: 'A' }] });
+
+			// Stepping: the editor empties and goes read-only, then the next record lands.
+			rerender(modal({ primaryKey: 'id', data: undefined }));
+			rerender(modal({ primaryKey: 'id', data: [{ id: 'b', name: 'B' }] }));
+
+			expect(screen.queryByText('This record changed while you were editing it')).toBeNull();
+			// Nothing of the user's is pending, so Save has nothing to send.
+			const onSaveChanges = vi.fn();
+			const setIsModalOpen = vi.fn();
+			rerender(modal({ primaryKey: 'id', data: [{ id: 'b', name: 'B' }], onSaveChanges, setIsModalOpen }));
+			fireEvent.click(saveButton());
+			expect(onSaveChanges).not.toHaveBeenCalled();
+			expect(setIsModalOpen).toHaveBeenCalledWith(false);
+		});
+
+		// The phantom is transient — the arriving record resets the draft — so catch it in the window
+		// it lives in: while the next record is still loading, there is nothing to discard, so a
+		// further step must not stop to ask (Escape is refused on the same flag).
+		it('leaves nothing to discard while the next record is still loading', () => {
+			const onNext = vi.fn();
+			const confirmed = vi.spyOn(window, 'confirm').mockReturnValue(true);
+			const recordNavigation = {
+				position: 1,
+				total: 3,
+				hasPrevious: true,
+				hasNext: true,
+				onPrevious: noop,
+				onNext,
+			};
+			const { rerender } = renderAddressableModal({ recordNavigation, data: [{ id: 'a', name: 'A' }] });
+
+			rerender(modal({ primaryKey: 'id', recordNavigation, data: undefined }));
+			fireEvent.click(screen.getByRole('button', { name: 'Next record' }));
+
+			expect(confirmed).not.toHaveBeenCalled();
+			expect(onNext).toHaveBeenCalledTimes(1);
+			confirmed.mockRestore();
+		});
+
+		// The echo is recognised by "we just pushed this", not by "the text matches the record": a
+		// user who undoes an edit back to the stored record types that text deliberately, and the
+		// buffer on screen — not the edit they undid — is what Save must write.
+		it('does not swallow an edit that restores the stored record exactly', () => {
+			const onSaveChanges = vi.fn();
+			renderAddressableModal({ onSaveChanges });
+			const stored = (screen.getByTestId('editor') as HTMLTextAreaElement).value;
+
+			edit('[{"id":"abc-123","name":"Grace"}]');
+			edit(stored); // undone
+			fireEvent.click(saveButton());
+
+			// The reverted buffer is what goes out; the abandoned "Grace" edit must not.
+			expect(onSaveChanges).toHaveBeenCalledWith(JSON.parse(stored));
+		});
+
+		it('is not an unsaved edit in a read-only editor', () => {
+			const { rerender } = renderAddressableModal({ canEditRecords: false, data: [{ id: 'a', name: 'A' }] });
+
+			rerender(modal({ primaryKey: 'id', canEditRecords: false, data: [{ id: 'a', name: 'A (changed)' }] }));
+			rerender(modal({ primaryKey: 'id', canEditRecords: false, data: [{ id: 'b', name: 'B' }] }));
+
+			expect(screen.queryByText('This record changed while you were editing it')).toBeNull();
+		});
+	});
+
+	// The warning is about the STORED record moving under an open editor. Pointing the editor at a
+	// different record is not that, whatever state the draft is in — it discards nothing that
+	// belonged to the record arriving.
+	it('does not warn about a changed record when the editor moved to a different one', () => {
+		const { rerender } = renderAddressableModal({ data: [{ id: 'a', name: 'A' }] });
+
+		edit('[{"id":"a","name":"edited A"}]');
+
+		// Asserted in the loading window too: the warning used to appear here and then clear itself
+		// when the record landed, which is a banner that flashes on every step rather than no banner.
+		rerender(modal({ primaryKey: 'id', data: undefined }));
+		expect(screen.queryByText('This record changed while you were editing it')).toBeNull();
+
+		rerender(modal({ primaryKey: 'id', data: [{ id: 'b', name: 'B' }] }));
+		expect(screen.queryByText('This record changed while you were editing it')).toBeNull();
+	});
+
 	// The editor hides `__createdtime__`/`__updatedtime__` and read-only synthetic attributes, so
 	// their absence from the edited JSON must never read as the user having removed them.
 	it('does not treat the attributes it hides from the editor as removed', () => {
diff --git a/src/features/instance/databases/modals/EditTableRowModal.tsx b/src/features/instance/databases/modals/EditTableRowModal.tsx
index 999aa2687..4f1c20de4 100644
--- a/src/features/instance/databases/modals/EditTableRowModal.tsx
+++ b/src/features/instance/databases/modals/EditTableRowModal.tsx
@@ -8,14 +8,31 @@ import {
 	removedRecordAttributes,
 } from '@/features/instance/databases/functions/removedRecordAttributes';
 import { useMonacoTheme } from '@/hooks/useMonacoTheme';
+import { addCommasToNumbers } from '@/lib/addCommasToNumbers';
 import { Editor } from '@/lib/monaco/MonacoEditor';
 import { WORKER_FREE_JSON_LANGUAGE_ID } from '@/lib/monaco/workerFreeJsonLanguage';
-import { Save, Trash, TriangleAlert } from 'lucide-react';
-import { useMemo, useState } from 'react';
+import { ChevronLeftIcon, ChevronRightIcon, Save, Trash, TriangleAlert } from 'lucide-react';
+import { useMemo, useRef, useState } from 'react';
 import { toast } from 'sonner';
 import { describeRecordJsonError, tryParseRecordJson } from './recordEditorJson';
 import { useRecordJsonErrorMarker } from './recordJsonErrorMarker';
 
+/** Where the open record sits in the browse result set, and how to step through it. */
+export interface RecordNavigation {
+	/** 1-based position in the result set. Undefined while the neighbouring page it stepped onto is
+	 * still loading, so the label has nothing truthful to show yet. */
+	position?: number;
+	/** How many records the position counts within. Undefined when that isn't known — a filtered
+	 * list is only ever counted by the whole table's count, and "of 40,000" under a filter is a lie. */
+	total?: number;
+	/** The total is the server's estimate rather than a counted value, so it is shown as "~N". */
+	isTotalEstimated?: boolean;
+	hasPrevious: boolean;
+	hasNext: boolean;
+	onPrevious: () => void;
+	onNext: () => void;
+}
+
 export function EditTableRowModal({
 	canEditRecords,
 	canDeleteRecords,
@@ -27,6 +44,7 @@ export function EditTableRowModal({
 	missingPrimaryKey,
 	recordUnavailable,
 	syntheticAttributes,
+	recordNavigation,
 	data,
 	onSaveChanges,
 	onReplaceRecord,
@@ -56,6 +74,9 @@ export function EditTableRowModal({
 	/** Relationship/computed attribute names — read-only, so they are hidden from the editable JSON
 	 * (saving a record that assigns one fails, even with null). */
 	syntheticAttributes?: string[];
+	/** Where this record sits in the browse result set, and how to step to its neighbours. Omitted
+	 * by a caller that doesn't have a result set to step through, which hides the nav entirely. */
+	recordNavigation?: RecordNavigation;
 	/** Undefined while the record fetch is in flight (the parent passes `searchByIdData?.data`), so
 	 * every read must tolerate it — the editor renders a loading state and the write actions guard it. */
 	data?: { __createdtime__?: number; __updatedtime__?: number; [record: string]: unknown }[];
@@ -90,7 +111,21 @@ export function EditTableRowModal({
 			}),
 		[data, syntheticAttributes],
 	);
-	const value = useMemo(() => JSON.stringify(editableRecords, null, 4), [editableRecords]);
+	const value = useMemo(() => editableRecords && JSON.stringify(editableRecords, null, 4), [editableRecords]);
+	const editorValue = value ?? '';
+	// A value this component hands the editor comes back through `onChange` when the editor is
+	// read-only (`setValue` fires the change; the writable path suppresses it), and it arrives at
+	// the PREVIOUS render's handler, because @monaco-editor/react refreshes its change subscription
+	// in an effect declared after the one that pushes the value. So the echo can't be recognised
+	// from props — it is recognised by arming this ref during the render that changes the value,
+	// and disarming it on the first change that matches. Matching on the text alone would be wrong:
+	// a user who undoes an edit back to the stored record types that same text deliberately.
+	const renderedValueRef = useRef(editorValue);
+	const pushedValueRef = useRef<string | null>(null);
+	if (renderedValueRef.current !== editorValue) {
+		renderedValueRef.current = editorValue;
+		pushedValueRef.current = editorValue;
+	}
 
 	// This modal instance is reused across rows (it stays mounted; only `open` toggles), so the
 	// draft has to be reset both when a different record is loaded — otherwise a previous row's
@@ -99,18 +134,57 @@ export function EditTableRowModal({
 	// the editor it was typed in (#1600). Tracking `null` while closed gives both: re-opening the
 	// same row is a change of snapshot. Resetting during render (not in an effect) avoids a frame
 	// where the stale draft is still live.
+	// Which record is open, independent of its contents. The editor can now be pointed at a
+	// different record without closing (the footer's record nav), so a change of contents is only a
+	// refetch of the same record when the keys still match.
+	const recordIdentity = useMemo(
+		() => data && JSON.stringify(data.map((record) => record[primaryKey] ?? null)),
+		[data, primaryKey],
+	);
 	const openRecord = isModalOpen ? value : null;
+	const openIdentity = isModalOpen ? recordIdentity : null;
 	const [recordSnapshot, setRecordSnapshot] = useState(openRecord);
+	const [identitySnapshot, setIdentitySnapshot] = useState(openIdentity);
 	const [discardedUnsavedEdits, setDiscardedUnsavedEdits] = useState(false);
+	// Whether this open dialog has had a record in it yet, which is what the loading logo is for.
+	// Stepping to another record leaves `data` undefined until it arrives, and swapping the editor
+	// out for the logo each time made the whole dialog flash — so from the second record on, the
+	// editor stays mounted and simply empties. Unsticks when the dialog closes.
+	const [hasShownARecord, setHasShownARecord] = useState(false);
 	if (openRecord !== recordSnapshot) {
-		// A record that changes under an open editor is a refetch, not a different row (the dialog
-		// is modal, so no other row can be clicked): the user's edits are about to be replaced by
-		// the stored record, and a Save that silently closed instead of saving was the only sign.
-		setDiscardedUnsavedEdits(isModalOpen && recordSnapshot !== null && madeChanges);
+		// The stored record changing under an open editor takes the user's edits with it, and a Save
+		// that silently closed instead of saving was the only sign. Only warn when it really is that:
+		// the same record, with different contents. Stepping to another record discards nothing that
+		// belonged to it, and the draft is dropped by `stepToRecord` before it gets here.
+		const isSameRecord = openIdentity != null && openIdentity === identitySnapshot;
+		setDiscardedUnsavedEdits(isModalOpen && isSameRecord && madeChanges);
 		setRecordSnapshot(openRecord);
+		setIdentitySnapshot(openIdentity);
 		setUpdatedTableRecordData(undefined);
 		setMadeChanges(false);
 	}
+	// Sticky for as long as the dialog stays open, and independent of the snapshot above: a dialog
+	// that opens straight onto a cached record never changes snapshot, but it has still shown one.
+	const showsARecord = isModalOpen && (data !== undefined || hasShownARecord);
+	if (hasShownARecord !== showsARecord) {
+		setHasShownARecord(showsARecord);
+	}
+
+	const isWritePending = isUpdateTableRecordsPending || isDeleteTableRecordsPending;
+
+	// Stepping to another record replaces what the editor is showing, so an unsaved draft has to be
+	// dealt with first (Escape is blocked for the same reason). Dropping the draft here rather than
+	// leaving it for the reset above also keeps that reset's warning meaning what it says: the
+	// stored record moved, not the user stepping away from it.
+	const stepToRecord = (step: () => void) => {
+		if (madeChanges && !confirm('Discard your unsaved changes to this record?')) {
+			return;
+		}
+		setUpdatedTableRecordData(undefined);
+		setMadeChanges(false);
+		setDiscardedUnsavedEdits(false);
+		step();
+	};
 
 	return (
 		<Dialog onOpenChange={setIsModalOpen} open={isModalOpen}>
@@ -128,13 +202,13 @@ export function EditTableRowModal({
 					: undefined}
 			>
 				<DialogHeader>
-					<DialogTitle>{isReadOnly ? 'View' : 'Edit'} Row</DialogTitle>
+					<DialogTitle>{isReadOnly ? 'View' : 'Edit'} Record</DialogTitle>
 				</DialogHeader>
 				{unaddressable && (
 					<Alert variant="warning">
 						<TriangleAlert />
 						<AlertTitle>
-							{missingPrimaryKey ? 'This row has no primary key value' : "This row couldn't be loaded"}
+							{missingPrimaryKey ? 'This record has no primary key value' : "This record couldn't be loaded"}
 						</AlertTitle>
 						<AlertDescription>
 							<p>
@@ -157,7 +231,7 @@ export function EditTableRowModal({
 										: `Nothing is stored under its primary key, so it can't be edited or deleted individually.`)}
 							</p>
 							<p>
-								This usually means the table's primary key was changed after the row was created, so the value shown
+								This usually means the table's primary key was changed after the record was created, so the value shown
 								here isn't the key the record is actually stored under. To remove it, recreate the table or restore the
 								original primary key attribute.
 							</p>
@@ -174,7 +248,7 @@ export function EditTableRowModal({
 						</AlertDescription>
 					</Alert>
 				)}
-				{data
+				{data || hasShownARecord
 					? (
 						// Wrapper owns the flex sizing: @monaco-editor/react applies `className` to its inner
 						// element, not the layout wrapper, so `flex-1 min-h-0` has to live on a div we control
@@ -186,10 +260,21 @@ export function EditTableRowModal({
 								// record could overflow and crash (studio#1370/#1499).
 								language={WORKER_FREE_JSON_LANGUAGE_ID}
 								theme={monacoTheme}
-								options={{ readOnly: isReadOnly, automaticLayout: true }}
-								value={value}
+								// Read-only while the next record loads too: there is no record to edit yet, and
+								// anything typed would be overwritten the moment it arrives.
+								options={{ readOnly: isReadOnly || !data, automaticLayout: true }}
+								value={editorValue}
 								onMount={onEditorMount}
 								onChange={(updatedValue) => {
+									// The editor reporting back the value this component just pushed into it is not an
+									// edit (see `pushedValueRef`). Every other change is the user's, including one that
+									// restores the stored record exactly -- an undone edit is still an edit, and the text
+									// on screen is what Save must write.
+									const isEchoOfOurOwnPush = pushedValueRef.current !== null && updatedValue === pushedValueRef.current;
+									pushedValueRef.current = null;
+									if (isEchoOfOurOwnPush) {
+										return;
+									}
 									setUpdatedTableRecordData(updatedValue);
 									setMadeChanges(true);
 									setDiscardedUnsavedEdits(false);
@@ -201,135 +286,187 @@ export function EditTableRowModal({
 					)
 					: <Loading />}
 				<DialogFooter>
-					<div className="flex justify-between w-full">
-						{canDeleteRecords && !unaddressable && (
-							<Button
-								variant="destructive"
-								type="button"
-								autoFocus={false}
-								onClick={() => {
-									const primaryKeyValue = data?.[0]?.[primaryKey];
-									if (primaryKeyValue != null) {
-										onDeleteRecord([primaryKeyValue]);
-									}
-								}}
-								// Cross-disabled against a save in flight (the parent folds `put` into that prop): a
-								// delete that landed while a `put` was still going would be undone by the replace
-								// re-creating the record.
-								disabled={isDeleteTableRecordsPending || isUpdateTableRecordsPending}
-							>
-								<Trash /> Delete Row
-							</Button>
+					{
+						/* Three slots, so the record nav stays centred whichever actions the user's
+					    permissions leave on either side of it. */
+					}
+					<div className="flex items-center justify-between gap-3 w-full">
+						<div className="flex">
+							{canDeleteRecords && !unaddressable && (
+								<Button
+									variant="destructive"
+									type="button"
+									autoFocus={false}
+									onClick={() => {
+										const primaryKeyValue = data?.[0]?.[primaryKey];
+										if (primaryKeyValue != null) {
+											onDeleteRecord([primaryKeyValue]);
+										}
+									}}
+									// Cross-disabled against a save in flight (the parent folds `put` into that prop): a
+									// delete that landed while a `put` was still going would be undone by the replace
+									// re-creating the record.
+									disabled={isDeleteTableRecordsPending || isUpdateTableRecordsPending}
+								>
+									<Trash /> Delete Record
+								</Button>
+							)}
+						</div>
+						{recordNavigation && (
+							<RecordNavigationControls
+								{...recordNavigation}
+								disabled={isWritePending}
+								onPrevious={() => stepToRecord(recordNavigation.onPrevious)}
+								onNext={() => stepToRecord(recordNavigation.onNext)}
+							/>
 						)}
-						{canEditRecords && !unaddressable && (
-							<Button
-								variant="submit"
-								autoFocus={true}
-								accessKey="s"
-								onClick={() => {
-									// Undefined means the editor was never touched (or the draft was reset because
-									// the stored record changed), so there is nothing of the user's to save. An
-									// *emptied* editor is a real edit, and falls through to the parse below, which
-									// says why it can't be saved.
-									if (updatedTableRecordData === undefined) {
-										setIsModalOpen(false);
-										return;
-									}
-									// The only validation the record editors get. Save is deliberately not gated on
-									// it: a disabled button explained nothing and could outlive the edit that
-									// disabled it (#1600), so a bad record is reported here instead — the reason and
-									// its location in a toast, plus a marker on the offending line.
-									const parsed = tryParseRecordJson(updatedTableRecordData);
-									if (!parsed.ok) {
-										toast.error("This record isn't valid JSON", {
-											description: describeRecordJsonError(parsed.error),
-										});
-										showRecordJsonError(parsed.error);
-										return;
-									}
-									// The editor opens on an array of one, but an edit that drops the brackets still
-									// means that record — `update` only takes a list, so send one either way.
-									const records = Array.isArray(parsed.value) ? parsed.value : [parsed.value];
-									// Checked before the routing below: a key edit is not an attribute removal, so nothing
-									// downstream would notice it. See `primaryKeyMismatch`.
-									const mismatch = primaryKeyMismatch(editableRecords, records, primaryKey);
-									if (mismatch) {
-										toast.error(
-											mismatch.kind === 'lost'
-												? `This record's ${primaryKey} is missing from the save`
-												: mismatch.kind === 'unknown'
-												? `This edit names a ${primaryKey} the editor didn't load`
-												: `This edit ${mismatch.added ? 'adds' : 'drops'} ${
-													(mismatch.added || mismatch.dropped) === 1
-														? 'a record'
-														: `${mismatch.added || mismatch.dropped} records`
-												} with no ${primaryKey}`,
-											{
-												description: mismatch.kind === 'lost'
-													? `${primaryKey} identifies the record, so restore ${
-														mismatch.keys.join(', ')
-													} to save this edit. Changing it doesn't rename a record — the save would do nothing, or overwrite whatever is stored under the new value. To delete the record, use Delete Row.`
-													: mismatch.kind === 'unknown'
-													? `Saving would edit the record stored under ${
-														mismatch.keys.join(', ')
-													}, which isn't the record open here. Remove it from the JSON and edit that record directly.`
-													: mismatch.added
-													? `A record with no ${primaryKey} can't be written from here — the save would skip it and still report success. Remove it, and use Add Record to create a record.`
-													: `Removing a record from the JSON doesn't delete it, so the save would report success having left it alone. Put it back, and use Delete Row to delete a record.`,
-											},
-										);
-										return;
-									}
-									// Removals go to `put` (a replace); everything else keeps merging through `update`.
-									// See `removedRecordAttributes` for why the split matters.
-									const removals = removedRecordAttributes(editableRecords, records, primaryKey);
-									if (removals.length) {
-										// A replace is last-writer-wins over the whole record, so it is only safe for a
-										// record the user is deliberately rewriting. The editor loads one record, but its
-										// JSON is free text: a pasted batch where only some records drop an attribute
-										// would send the untouched ones through `put` too, clobbering concurrent writes
-										// to them. Refuse rather than pick a victim.
-										if (removals.length < records.length) {
-											toast.error("Removing an attribute can't be combined with other record edits", {
-												description:
-													'Removing an attribute replaces the whole record, which would overwrite any concurrent change to the other records in this payload. Remove the same attribute from every record here, or put it back and save the value changes on their own — the records loaded together have to be saved together.',
+						<div className="flex">
+							{canEditRecords && !unaddressable && (
+								<Button
+									variant="submit"
+									autoFocus={true}
+									accessKey="s"
+									onClick={() => {
+										// Undefined means the editor was never touched (or the draft was reset because
+										// the stored record changed), so there is nothing of the user's to save. An
+										// *emptied* editor is a real edit, and falls through to the parse below, which
+										// says why it can't be saved.
+										if (updatedTableRecordData === undefined) {
+											setIsModalOpen(false);
+											return;
+										}
+										// The only validation the record editors get. Save is deliberately not gated on
+										// it: a disabled button explained nothing and could outlive the edit that
+										// disabled it (#1600), so a bad record is reported here instead — the reason and
+										// its location in a toast, plus a marker on the offending line.
+										const parsed = tryParseRecordJson(updatedTableRecordData);
+										if (!parsed.ok) {
+											toast.error("This record isn't valid JSON", {
+												description: describeRecordJsonError(parsed.error),
 											});
+											showRecordJsonError(parsed.error);
 											return;
 										}
-										if (!canReplaceRecords) {
-											const attributes = removedAttributeNames(removals);
-											const subject = attributes.length === 1 ? 'an attribute' : 'attributes';
-											const removing = `Removing ${attributes.join(', ')}`;
+										// The editor opens on an array of one, but an edit that drops the brackets still
+										// means that record — `update` only takes a list, so send one either way.
+										const records = Array.isArray(parsed.value) ? parsed.value : [parsed.value];
+										// Checked before the routing below: a key edit is not an attribute removal, so nothing
+										// downstream would notice it. See `primaryKeyMismatch`.
+										const mismatch = primaryKeyMismatch(editableRecords, records, primaryKey);
+										if (mismatch) {
 											toast.error(
-												replaceBlockedReason === 'permission'
-													? `You don't have permission to remove ${subject}`
-													: `This Harper version can't remove ${subject}`,
+												mismatch.kind === 'lost'
+													? `This record's ${primaryKey} is missing from the save`
+													: mismatch.kind === 'unknown'
+													? `This edit names a ${primaryKey} the editor didn't load`
+													: `This edit ${mismatch.added ? 'adds' : 'drops'} ${
+														(mismatch.added || mismatch.dropped) === 1
+															? 'a record'
+															: `${mismatch.added || mismatch.dropped} records`
+													} with no ${primaryKey}`,
 												{
-													description: replaceBlockedReason === 'permission'
-														? `${removing} rewrites the record through the 'put' operation, which needs both insert and update on this table, and 'put' in the role's allowed operations. Ask an administrator for those grants, or set the value to null instead of removing it.`
-														: `${removing} needs the 'put' operation, added in Harper 5.3.0. On this instance the update operation can only merge, so the attribute would silently stay. Upgrade the instance, or set the value to null instead of removing it.`,
+													description: mismatch.kind === 'lost'
+														? `${primaryKey} identifies the record, so restore ${
+															mismatch.keys.join(', ')
+														} to save this edit. Changing it doesn't rename a record — the save would do nothing, or overwrite whatever is stored under the new value. To delete the record, use Delete Record.`
+														: mismatch.kind === 'unknown'
+														? `Saving would edit the record stored under ${
+															mismatch.keys.join(', ')
+														}, which isn't the record open here. Remove it from the JSON and edit that record directly.`
+														: mismatch.added
+														? `A record with no ${primaryKey} can't be written from here — the save would skip it and still report success. Remove it, and use Add Record to create a record.`
+														: `Removing a record from the JSON doesn't delete it, so the save would report success having left it alone. Put it back, and use Delete Record to delete a record.`,
 												},
 											);
 											return;
 										}
-										onReplaceRecord(records);
-										return;
-									}
-									onSaveChanges(records);
-								}}
-								// Also waits out a delete in flight: this modal offers Delete Row beside Save, and a
-								// `put` racing that delete would re-create the record the user just removed.
-								disabled={isUpdateTableRecordsPending || isDeleteTableRecordsPending}
-							>
-								<Save />{' '}
-								<span>
-									<u>S</u>ave Changes
-								</span>
-							</Button>
-						)}
+										// Removals go to `put` (a replace); everything else keeps merging through `update`.
+										// See `removedRecordAttributes` for why the split matters.
+										const removals = removedRecordAttributes(editableRecords, records, primaryKey);
+										if (removals.length) {
+											// A replace is last-writer-wins over the whole record, so it is only safe for a
+											// record the user is deliberately rewriting. The editor loads one record, but its
+											// JSON is free text: a pasted batch where only some records drop an attribute
+											// would send the untouched ones through `put` too, clobbering concurrent writes
+											// to them. Refuse rather than pick a victim.
+											if (removals.length < records.length) {
+												toast.error("Removing an attribute can't be combined with other record edits", {
+													description:
+														'Removing an attribute replaces the whole record, which would overwrite any concurrent change to the other records in this payload. Remove the same attribute from every record here, or put it back and save the value changes on their own — the records loaded together have to be saved together.',
+												});
+												return;
+											}
+											if (!canReplaceRecords) {
+												const attributes = removedAttributeNames(removals);
+												const subject = attributes.length === 1 ? 'an attribute' : 'attributes';
+												const removing = `Removing ${attributes.join(', ')}`;
+												toast.error(
+													replaceBlockedReason === 'permission'
+														? `You don't have permission to remove ${subject}`
+														: `This Harper version can't remove ${subject}`,
+													{
+														description: replaceBlockedReason === 'permission'
+															? `${removing} rewrites the record through the 'put' operation, which needs both insert and update on this table, and 'put' in the role's allowed operations. Ask an administrator for those grants, or set the value to null instead of removing it.`
+															: `${removing} needs the 'put' operation, added in Harper 5.3.0. On this instance the update operation can only merge, so the attribute would silently stay. Upgrade the instance, or set the value to null instead of removing it.`,
+													},
+												);
+												return;
+											}
+											onReplaceRecord(records);
+											return;
+										}
+										onSaveChanges(records);
+									}}
+									// Also waits out a delete in flight: this modal offers Delete Record beside Save, and a
+									// `put` racing that delete would re-create the record the user just removed.
+									disabled={isUpdateTableRecordsPending || isDeleteTableRecordsPending}
+								>
+									<Save />{' '}
+									<span>
+										<u>S</u>ave Changes
+									</span>
+								</Button>
+							)}
+						</div>
 					</div>
 				</DialogFooter>
 			</DialogContent>
 		</Dialog>
 	);
 }
+
+function RecordNavigationControls(
+	{ position, total, isTotalEstimated, hasPrevious, hasNext, onPrevious, onNext, disabled }:
+		& RecordNavigation
+		& { disabled?: boolean },
+) {
+	// Echoes the grid's own pager below the table: bordered pill, a chevron either side.
+	return (
+		<div className="flex items-center rounded-lg border border-border text-sm text-muted-foreground">
+			<Button
+				type="button"
+				variant="ghost"
+				size="icon"
+				aria-label="Previous record"
+				disabled={disabled || !hasPrevious}
+				onClick={onPrevious}
+			>
+				<ChevronLeftIcon />
+			</Button>
+			<span className="whitespace-nowrap px-1 tabular-nums" aria-live="polite">
+				Record {position === undefined ? '…' : addCommasToNumbers(position)}
+				{total !== undefined && <>{' of '}{isTotalEstimated ? '~' : ''}{addCommasToNumbers(total)}</>}
+			</span>
+			<Button
+				type="button"
+				variant="ghost"
+				size="icon"
+				aria-label="Next record"
+				disabled={disabled || !hasNext}
+				onClick={onNext}
+			>
+				<ChevronRightIcon />
+			</Button>
+		</div>
+	);
+}

From 117fddc5d08023b86f849054c247c1b6d84f6431 Mon Sep 17 00:00:00 2001
From: Chris Barber <chris@harperdb.io>
Date: Wed, 9 Sep 2026 00:49:11 -0500
Subject: [PATCH 2/2] refactor(browse): arm the editor echo guard in a layout
 effect, not during render
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Writing the ref during render is what React discourages: a render that gets
thrown away leaves the guard armed. A layout effect is safe here because
@monaco-editor/react pushes the value in a passive effect (its bundle uses no
layout effects at all), and a parent's layout effect runs before a child's
passive one — so the guard is still armed before the push it has to recognise.
---
 .../databases/modals/EditTableRowModal.tsx       | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/features/instance/databases/modals/EditTableRowModal.tsx b/src/features/instance/databases/modals/EditTableRowModal.tsx
index 4f1c20de4..e348fc3d7 100644
--- a/src/features/instance/databases/modals/EditTableRowModal.tsx
+++ b/src/features/instance/databases/modals/EditTableRowModal.tsx
@@ -12,7 +12,7 @@ import { addCommasToNumbers } from '@/lib/addCommasToNumbers';
 import { Editor } from '@/lib/monaco/MonacoEditor';
 import { WORKER_FREE_JSON_LANGUAGE_ID } from '@/lib/monaco/workerFreeJsonLanguage';
 import { ChevronLeftIcon, ChevronRightIcon, Save, Trash, TriangleAlert } from 'lucide-react';
-import { useMemo, useRef, useState } from 'react';
+import { useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { toast } from 'sonner';
 import { describeRecordJsonError, tryParseRecordJson } from './recordEditorJson';
 import { useRecordJsonErrorMarker } from './recordJsonErrorMarker';
@@ -117,15 +117,17 @@ export function EditTableRowModal({
 	// read-only (`setValue` fires the change; the writable path suppresses it), and it arrives at
 	// the PREVIOUS render's handler, because @monaco-editor/react refreshes its change subscription
 	// in an effect declared after the one that pushes the value. So the echo can't be recognised
-	// from props — it is recognised by arming this ref during the render that changes the value,
-	// and disarming it on the first change that matches. Matching on the text alone would be wrong:
+	// from props — it is recognised by arming this ref in a layout effect before Monaco pushes the
+	// value, then disarming it on the first change that matches. Matching on the text alone would be wrong:
 	// a user who undoes an edit back to the stored record types that same text deliberately.
 	const renderedValueRef = useRef(editorValue);
 	const pushedValueRef = useRef<string | null>(null);
-	if (renderedValueRef.current !== editorValue) {
-		renderedValueRef.current = editorValue;
-		pushedValueRef.current = editorValue;
-	}
+	useLayoutEffect(() => {
+		if (renderedValueRef.current !== editorValue) {
+			renderedValueRef.current = editorValue;
+			pushedValueRef.current = editorValue;
+		}
+	}, [editorValue]);
 
 	// This modal instance is reused across rows (it stays mounted; only `open` toggles), so the
 	// draft has to be reset both when a different record is loaded — otherwise a previous row's