From 1cf8e24507032bb2c120316e686d7591ad532e58 Mon Sep 17 00:00:00 2001
From: Dawson Toth <dawson@harperdb.io>
Date: Thu, 23 Jul 2026 11:36:58 -0400
Subject: [PATCH] fix(browse): make record editors worker-free to end Monaco
 JSON OOM (#1370/#1499)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The browse Add/Edit record editors used `language="json"`, whose worker receives
the model's full text (and every change delta) over a structured-clone
postMessage. A large record — a big blob/array field, or a bulk-insert array
pasted into Add row — overflows that clone and crashes the worker with
"DataCloneError: ... out of memory.", which Monaco retries in a tight loop (the
RUM recurrence of #1370/#1499 this PR was opened for).

A size-based json->plaintext switch (the earlier approach) can't close the paste
path: @monaco-editor/react applies a changed language prop in a later effect, and
once the model is synced the worker's own change listener posts the oversized
delta before any switch runs. Instead register a worker-free JSON language
(WORKER_FREE_JSON_LANGUAGE_ID) — Monaco's main-thread JSON tokenizer plus the
standard JSON language configuration, and none of the worker-backed providers —
and use it for both record editors. There is no language worker to overflow, at
any size; highlighting and bracket/auto-close are unchanged.

Because that removes the worker's validation markers, the live onValidate signal
is replaced with a cheap main-thread parse for content under the size limit
(keeps "Save disabled while invalid" for normal records without parsing a huge
buffer per keystroke) plus a caught JSON.parse at submit time that toasts on
malformed input instead of throwing. EditTableRowModal also resets its draft when
a different record is opened, since that modal instance is reused across rows.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../modals/AddTableRowModal.test.tsx          | 136 ++++++++++++++++++
 .../databases/modals/AddTableRowModal.tsx     |  97 +++++++------
 .../modals/EditTableRowModal.test.tsx         | 125 +++++++++++++---
 .../databases/modals/EditTableRowModal.tsx    |  43 ++++--
 .../databases/modals/recordEditorJson.test.ts |  46 ++++++
 .../databases/modals/recordEditorJson.ts      |  43 ++++++
 src/lib/monaco/monacoJsonTokenization.d.ts    |  13 ++
 src/lib/monaco/setup.ts                       |   6 +
 src/lib/monaco/workerFreeJsonLanguage.test.ts |  66 +++++++++
 src/lib/monaco/workerFreeJsonLanguage.ts      |  76 ++++++++++
 10 files changed, 576 insertions(+), 75 deletions(-)
 create mode 100644 src/features/instance/databases/modals/AddTableRowModal.test.tsx
 create mode 100644 src/features/instance/databases/modals/recordEditorJson.test.ts
 create mode 100644 src/features/instance/databases/modals/recordEditorJson.ts
 create mode 100644 src/lib/monaco/monacoJsonTokenization.d.ts
 create mode 100644 src/lib/monaco/workerFreeJsonLanguage.test.ts
 create mode 100644 src/lib/monaco/workerFreeJsonLanguage.ts

diff --git a/src/features/instance/databases/modals/AddTableRowModal.test.tsx b/src/features/instance/databases/modals/AddTableRowModal.test.tsx
new file mode 100644
index 000000000..37a23b0df
--- /dev/null
+++ b/src/features/instance/databases/modals/AddTableRowModal.test.tsx
@@ -0,0 +1,136 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { AddTableRowModal } from '@/features/instance/databases/modals/AddTableRowModal';
+import type { InstanceTable } from '@/integrations/api/api.patch';
+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 { toast } from 'sonner';
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
+
+const { mutate } = vi.hoisted(() => ({ mutate: vi.fn() }));
+
+// Monaco can't load in jsdom; stub the editor with a <textarea> that exposes the language it was
+// given and forwards edits (including a pasted bulk array) through `onChange`.
+vi.mock('@/lib/monaco/MonacoEditor', () => ({
+	Editor: (
+		{ value, language, onChange }: {
+			value?: string;
+			language?: string;
+			onChange?: (value: string | undefined) => void;
+		},
+	) => (
+		<textarea
+			data-testid="editor"
+			data-language={language}
+			value={value ?? ''}
+			onChange={event => 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() } }));
+vi.mock('@/config/useInstanceClient', () => ({
+	useInstanceClientIdParams: () => ({ instanceClient: {}, entityId: 'entity-1', entityType: 'instance' }),
+}));
+vi.mock('@/integrations/api/instance/database/insertTableRecords', () => ({
+	useInsertTableRecords: () => ({ mutate, isPending: false }),
+}));
+vi.mock(
+	'@/features/instance/databases/functions/relationshipAttributes',
+	() => ({ isSyntheticAttribute: () => false }),
+);
+
+beforeAll(() => {
+	// Radix Dialog relies on DOM APIs jsdom doesn't implement.
+	Element.prototype.hasPointerCapture ??= () => false;
+	Element.prototype.setPointerCapture ??= () => undefined;
+	Element.prototype.releasePointerCapture ??= () => undefined;
+	Element.prototype.scrollIntoView ??= () => undefined;
+	window.matchMedia ??= ((query: string) => ({
+		matches: false,
+		media: query,
+		onchange: null,
+		addEventListener() {},
+		removeEventListener() {},
+		addListener() {},
+		removeListener() {},
+		dispatchEvent() {
+			return false;
+		},
+	})) as unknown as typeof window.matchMedia;
+	if (typeof window.PointerEvent === 'undefined') {
+		window.PointerEvent = class extends MouseEvent {} as typeof PointerEvent;
+	}
+});
+
+afterEach(() => {
+	cleanup();
+	vi.clearAllMocks();
+});
+
+const instanceTable = {
+	schema: 'dev',
+	name: 'dog',
+	primary_key: 'id',
+	audit: false,
+	schema_defined: true,
+	db_size: 0,
+	sources: [],
+	table_size: 0,
+	db_audit_size: 0,
+	attributes: [
+		{ attribute: 'id', type: 'ID', is_primary_key: true },
+		{ attribute: 'name', type: 'String' },
+		{ attribute: 'age', type: 'Int' },
+	],
+} as unknown as InstanceTable;
+
+const noop = () => {};
+
+function renderModal(overrides: Record<string, unknown> = {}) {
+	return render(
+		<AddTableRowModal
+			isModalOpen
+			instanceTable={instanceTable}
+			setIsModalOpen={noop}
+			refreshTable={noop}
+			{...overrides}
+		/>,
+	);
+}
+
+describe('AddTableRowModal', () => {
+	it('edits with the worker-free JSON language, so no language worker can OOM', () => {
+		renderModal();
+		expect(screen.getByTestId('editor').getAttribute('data-language')).toBe(WORKER_FREE_JSON_LANGUAGE_ID);
+	});
+
+	it('inserts the parsed records when the JSON is valid', () => {
+		renderModal();
+
+		fireEvent.change(screen.getByTestId('editor'), { target: { value: '[{"name":"Rex"},{"name":"Fido"}]' } });
+		fireEvent.click(screen.getByRole('button', { name: /Save Changes/i }));
+
+		expect(mutate).toHaveBeenCalledTimes(1);
+		expect(mutate.mock.calls[0][0]).toMatchObject({ records: [{ name: 'Rex' }, { name: 'Fido' }] });
+		expect(toast.error).not.toHaveBeenCalled();
+	});
+
+	// Regression for the reported crash vector: a large bulk-insert array pasted into "Add row".
+	// It stays on the worker-free language (no OOM), and a malformed one is caught at submit time
+	// rather than throwing an uncaught SyntaxError.
+	it('does not insert an oversized, malformed bulk paste, and shows an error', () => {
+		renderModal();
+
+		const oversizedMalformed = `[{"name":"${'x'.repeat(MAX_WORKER_MODEL_CHARS)}`; // unterminated
+		fireEvent.change(screen.getByTestId('editor'), { target: { value: oversizedMalformed } });
+		expect(screen.getByTestId('editor').getAttribute('data-language')).toBe(WORKER_FREE_JSON_LANGUAGE_ID);
+
+		fireEvent.click(screen.getByRole('button', { name: /Save Changes/i }));
+
+		expect(mutate).not.toHaveBeenCalled();
+		expect(toast.error).toHaveBeenCalledTimes(1);
+	});
+});
diff --git a/src/features/instance/databases/modals/AddTableRowModal.tsx b/src/features/instance/databases/modals/AddTableRowModal.tsx
index 0639912fa..3027bdbf4 100644
--- a/src/features/instance/databases/modals/AddTableRowModal.tsx
+++ b/src/features/instance/databases/modals/AddTableRowModal.tsx
@@ -7,11 +7,13 @@ import { useMonacoTheme } from '@/hooks/useMonacoTheme';
 import { InstanceAttribute, InstanceDatabaseTableMap, InstanceTable } from '@/integrations/api/api.patch';
 import { useInsertTableRecords } from '@/integrations/api/instance/database/insertTableRecords';
 import { Editor } from '@/lib/monaco/MonacoEditor';
+import { WORKER_FREE_JSON_LANGUAGE_ID } from '@/lib/monaco/workerFreeJsonLanguage';
 import { pluralize } from '@/lib/pluralize';
 import type { EditorProps, OnMount } from '@monaco-editor/react';
 import { Save, TerminalIcon } from 'lucide-react';
 import { useCallback, useMemo, useState } from 'react';
 import { toast } from 'sonner';
+import { isRecordJsonProbablyValid, tryParseRecordJson } from './recordEditorJson';
 
 export function AddTableRowModal({
 	isModalOpen,
@@ -52,55 +54,57 @@ export function AddTableRowModal({
 		return JSON.stringify(sample, null, 4);
 	}, [instanceTable, databaseTables]);
 
-	const onValidate = useCallback((markers: unknown[]) => {
-		setMadeChanges(true);
-		setIsValidJSON(markers.length === 0);
-	}, [setIsValidJSON]);
-
 	const onSubmitClick = useCallback(() => {
-		if (addTableRecordData && isValidJSON) {
-			const data = JSON.parse(addTableRecordData);
-			const records = Array.isArray(data) ? data : [data];
-			const toastId = toast.loading(`Adding ${records.length} records...`);
-			addTableRecords(
-				{
-					...instanceParams,
-					databaseName: instanceTable.schema,
-					tableName: instanceTable.name,
-					records,
-				},
-				{
-					onSuccess: (response) => {
-						void refreshTable();
-						if (!response.skipped_hashes?.length) {
-							setIsModalOpen(false);
-						}
-						setSkippedHashes(response.skipped_hashes);
-						(response.skipped_hashes?.length > 0 ? toast.warning : toast.success)(
-							response.skipped_hashes?.length > 0 ? 'Warning!' : 'Success!',
-							{
-								id: toastId,
-								description: (
-									<>
-										{response.inserted_hashes.length > 0
-											&& <p>Added {pluralize(response.inserted_hashes.length, 'record', 'records')}</p>}
-										{response.skipped_hashes.length > 0
-											&& <p>Skipped {pluralize(response.skipped_hashes.length, 'record', 'records')}</p>}
-									</>
-								),
-							},
-						);
-					},
-				},
-			);
+		if (!addTableRecordData) {
+			return;
+		}
+		// Authoritative parse: the live check skips oversized content, so a large,
+		// malformed bulk paste can reach here with isValidJSON still true — parse it
+		// in a catch rather than letting Save throw an uncaught SyntaxError.
+		const parsed = tryParseRecordJson(addTableRecordData);
+		if (!parsed.ok) {
+			toast.error("This record isn't valid JSON — fix the syntax and try again.");
+			return;
 		}
+		const records = (Array.isArray(parsed.value) ? parsed.value : [parsed.value]) as object[];
+		const toastId = toast.loading(`Adding ${records.length} records...`);
+		addTableRecords(
+			{
+				...instanceParams,
+				databaseName: instanceTable.schema,
+				tableName: instanceTable.name,
+				records,
+			},
+			{
+				onSuccess: (response) => {
+					void refreshTable();
+					if (!response.skipped_hashes?.length) {
+						setIsModalOpen(false);
+					}
+					setSkippedHashes(response.skipped_hashes);
+					(response.skipped_hashes?.length > 0 ? toast.warning : toast.success)(
+						response.skipped_hashes?.length > 0 ? 'Warning!' : 'Success!',
+						{
+							id: toastId,
+							description: (
+								<>
+									{response.inserted_hashes.length > 0
+										&& <p>Added {pluralize(response.inserted_hashes.length, 'record', 'records')}</p>}
+									{response.skipped_hashes.length > 0
+										&& <p>Skipped {pluralize(response.skipped_hashes.length, 'record', 'records')}</p>}
+								</>
+							),
+						},
+					);
+				},
+			},
+		);
 	}, [
 		addTableRecordData,
 		addTableRecords,
 		instanceParams,
 		instanceTable.name,
 		instanceTable.schema,
-		isValidJSON,
 		refreshTable,
 		setIsModalOpen,
 	]);
@@ -140,11 +144,16 @@ export function AddTableRowModal({
 				<div className="flex-1 min-h-0 w-full">
 					<Editor
 						className="w-full h-full"
-						language="json"
+						// Worker-free JSON: highlighting without a language worker that a large bulk-insert
+						// array pasted here could overflow and crash (studio#1370/#1499).
+						language={WORKER_FREE_JSON_LANGUAGE_ID}
 						theme={monacoTheme}
 						value={sampleJSON}
-						onValidate={onValidate}
-						onChange={setAddTableRecordData}
+						onChange={(updatedValue) => {
+							setAddTableRecordData(updatedValue);
+							setMadeChanges(true);
+							setIsValidJSON(isRecordJsonProbablyValid(updatedValue));
+						}}
 						options={{ minimap: { enabled: false }, automaticLayout: true }}
 						onMount={handleEditorDidMount}
 					/>
diff --git a/src/features/instance/databases/modals/EditTableRowModal.test.tsx b/src/features/instance/databases/modals/EditTableRowModal.test.tsx
index 3cb01c756..329d51c4c 100644
--- a/src/features/instance/databases/modals/EditTableRowModal.test.tsx
+++ b/src/features/instance/databases/modals/EditTableRowModal.test.tsx
@@ -2,17 +2,36 @@
  * @vitest-environment jsdom
  */
 import { EditTableRowModal } from '@/features/instance/databases/modals/EditTableRowModal';
+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 { toast } from 'sonner';
 import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
 
-// Monaco can't load in jsdom; stub the editor with a plain element that exposes the value it was
-// given and whether it was rendered read-only.
+// 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.
 vi.mock('@/lib/monaco/MonacoEditor', () => ({
-	Editor: ({ value, options }: { value?: string; options?: { readOnly?: boolean } }) => (
-		<div data-testid="editor" data-readonly={String(Boolean(options?.readOnly))}>{value}</div>
+	Editor: (
+		{ value, language, options, onChange }: {
+			value?: string;
+			language?: string;
+			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)}
+		/>
 	),
 }));
 vi.mock('@/hooks/useMonacoTheme', () => ({ useMonacoTheme: () => 'light' }));
+vi.mock('sonner', () => ({ toast: { error: vi.fn(), loading: vi.fn(), success: vi.fn(), warning: vi.fn() } }));
 
 beforeAll(() => {
 	// Radix Dialog relies on DOM APIs jsdom doesn't implement.
@@ -37,28 +56,30 @@ beforeAll(() => {
 	}
 });
 
-afterEach(() => cleanup());
+afterEach(() => {
+	cleanup();
+	vi.clearAllMocks();
+});
 
 const noop = () => {};
 const row = { name: 'Ada Lovelace', city: 'London', id: 'abc-123' };
 
 function renderModal(overrides: Record<string, unknown> = {}) {
-	return render(
-		<EditTableRowModal
-			canEditRecords
-			canDeleteRecords
-			setIsModalOpen={noop}
-			isModalOpen
-			primaryKey="email"
-			syntheticAttributes={[]}
-			data={[row]}
-			onSaveChanges={noop}
-			onDeleteRecord={noop}
-			isUpdateTableRecordsPending={false}
-			isDeleteTableRecordsPending={false}
-			{...overrides}
-		/>,
-	);
+	const props = {
+		canEditRecords: true,
+		canDeleteRecords: true,
+		setIsModalOpen: noop,
+		isModalOpen: true,
+		primaryKey: 'email',
+		syntheticAttributes: [],
+		data: [row],
+		onSaveChanges: noop,
+		onDeleteRecord: noop,
+		isUpdateTableRecordsPending: false,
+		isDeleteTableRecordsPending: false,
+		...overrides,
+	};
+	return render(<EditTableRowModal {...props} />);
 }
 
 describe('EditTableRowModal', () => {
@@ -109,4 +130,66 @@ describe('EditTableRowModal', () => {
 		expect(screen.getByRole('button', { name: /Save Changes/i })).toBeTruthy();
 		expect(screen.getByRole('button', { name: /Delete Row/i })).toBeTruthy();
 	});
+
+	it('edits with the worker-free JSON language, so no language worker can OOM', () => {
+		renderModal();
+		expect(screen.getByTestId('editor').getAttribute('data-language')).toBe(WORKER_FREE_JSON_LANGUAGE_ID);
+	});
+
+	it('saves the parsed record when the edited JSON is valid', () => {
+		const onSaveChanges = vi.fn();
+		renderModal({ onSaveChanges });
+
+		fireEvent.change(screen.getByTestId('editor'), { target: { value: '[{"name":"Grace"}]' } });
+		fireEvent.click(screen.getByRole('button', { name: /Save Changes/i }));
+
+		expect(onSaveChanges).toHaveBeenCalledWith([{ name: 'Grace' }]);
+		expect(toast.error).not.toHaveBeenCalled();
+	});
+
+	// Regression for the large-paste path: an oversized edit is not live-validated (the button
+	// stays enabled), so a malformed one reaches Save — which must catch it and surface a toast
+	// rather than throw an uncaught SyntaxError.
+	it('shows an error and does not save an oversized, malformed record', () => {
+		const onSaveChanges = vi.fn();
+		renderModal({ onSaveChanges });
+
+		const oversizedMalformed = `[{"blob":"${'x'.repeat(MAX_WORKER_MODEL_CHARS)}`; // unterminated
+		fireEvent.change(screen.getByTestId('editor'), { target: { value: oversizedMalformed } });
+		fireEvent.click(screen.getByRole('button', { name: /Save Changes/i }));
+
+		expect(onSaveChanges).not.toHaveBeenCalled();
+		expect(toast.error).toHaveBeenCalledTimes(1);
+	});
+
+	// The modal instance is reused across rows; opening a different record must not carry the
+	// previous row's draft (which would otherwise be saved for the new row).
+	it('resets the draft when a different record is opened', () => {
+		const onSaveChanges = vi.fn();
+		const setIsModalOpen = vi.fn();
+		const { rerender } = renderModal({ onSaveChanges, setIsModalOpen, data: [{ id: 'a', name: 'A' }] });
+
+		// Edit the first row, then open a different row without touching it.
+		fireEvent.change(screen.getByTestId('editor'), { target: { value: '[{"name":"edited A"}]' } });
+		rerender(
+			<EditTableRowModal
+				canEditRecords
+				canDeleteRecords
+				setIsModalOpen={setIsModalOpen}
+				isModalOpen
+				primaryKey="email"
+				syntheticAttributes={[]}
+				data={[{ id: 'b', name: 'B' }]}
+				onSaveChanges={onSaveChanges}
+				onDeleteRecord={noop}
+				isUpdateTableRecordsPending={false}
+				isDeleteTableRecordsPending={false}
+			/>,
+		);
+		fireEvent.click(screen.getByRole('button', { name: /Save Changes/i }));
+
+		// The stale "edited A" draft was discarded, so Save just closes rather than persisting it.
+		expect(onSaveChanges).not.toHaveBeenCalled();
+		expect(setIsModalOpen).toHaveBeenCalledWith(false);
+	});
 });
diff --git a/src/features/instance/databases/modals/EditTableRowModal.tsx b/src/features/instance/databases/modals/EditTableRowModal.tsx
index 766c4f0e0..73e4be577 100644
--- a/src/features/instance/databases/modals/EditTableRowModal.tsx
+++ b/src/features/instance/databases/modals/EditTableRowModal.tsx
@@ -4,8 +4,11 @@ import { Button } from '@/components/ui/button';
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { useMonacoTheme } from '@/hooks/useMonacoTheme';
 import { Editor } from '@/lib/monaco/MonacoEditor';
+import { WORKER_FREE_JSON_LANGUAGE_ID } from '@/lib/monaco/workerFreeJsonLanguage';
 import { Save, Trash, TriangleAlert } from 'lucide-react';
-import { useCallback, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
+import { toast } from 'sonner';
+import { isRecordJsonProbablyValid, tryParseRecordJson } from './recordEditorJson';
 
 export function EditTableRowModal({
 	canEditRecords,
@@ -64,10 +67,19 @@ export function EditTableRowModal({
 		});
 		return JSON.stringify(dataWithoutTimes, null, 4);
 	}, [data, syntheticAttributes]);
-	const onValidate = useCallback((markers: unknown[]) => {
-		setMadeChanges(true);
-		setIsValidJSON(markers.length === 0);
-	}, [setIsValidJSON]);
+
+	// This modal instance is reused across rows (it stays mounted; only `open`
+	// toggles), so the draft/validity have to be reset when a different record is
+	// loaded — otherwise a previous row's edit could be saved for, or classify, the
+	// newly opened row. Resetting during render (not in an effect) avoids a frame
+	// where the stale draft is still live.
+	const [recordSnapshot, setRecordSnapshot] = useState(value);
+	if (value !== recordSnapshot) {
+		setRecordSnapshot(value);
+		setUpdatedTableRecordData(undefined);
+		setIsValidJSON(true);
+		setMadeChanges(false);
+	}
 
 	return (
 		<Dialog onOpenChange={setIsModalOpen} open={isModalOpen}>
@@ -129,13 +141,16 @@ export function EditTableRowModal({
 						<div className="flex-1 min-h-0 w-full">
 							<Editor
 								className="w-full h-full"
-								language="json"
+								// Worker-free JSON: highlighting without a language worker that an oversized
+								// record could overflow and crash (studio#1370/#1499).
+								language={WORKER_FREE_JSON_LANGUAGE_ID}
 								theme={monacoTheme}
 								options={{ readOnly: isReadOnly, automaticLayout: true }}
 								value={value}
-								onValidate={onValidate}
 								onChange={(updatedValue) => {
 									setUpdatedTableRecordData(updatedValue);
+									setMadeChanges(true);
+									setIsValidJSON(isRecordJsonProbablyValid(updatedValue));
 								}}
 							/>
 						</div>
@@ -165,11 +180,19 @@ export function EditTableRowModal({
 								autoFocus={true}
 								accessKey="s"
 								onClick={() => {
-									if (updatedTableRecordData && isValidJSON) {
-										onSaveChanges(JSON.parse(updatedTableRecordData));
-									} else {
+									if (!updatedTableRecordData) {
 										setIsModalOpen(false);
+										return;
+									}
+									// Authoritative parse: the live check skips oversized content, so a large,
+									// malformed edit can reach here with isValidJSON still true — parse it in a
+									// catch rather than letting Save throw an uncaught SyntaxError.
+									const parsed = tryParseRecordJson(updatedTableRecordData);
+									if (!parsed.ok) {
+										toast.error("This record isn't valid JSON — fix the syntax and try again.");
+										return;
 									}
+									onSaveChanges(parsed.value as Record<string, unknown>[]);
 								}}
 								disabled={!isValidJSON || isUpdateTableRecordsPending}
 							>
diff --git a/src/features/instance/databases/modals/recordEditorJson.test.ts b/src/features/instance/databases/modals/recordEditorJson.test.ts
new file mode 100644
index 000000000..9b8ee9306
--- /dev/null
+++ b/src/features/instance/databases/modals/recordEditorJson.test.ts
@@ -0,0 +1,46 @@
+import { MAX_WORKER_MODEL_CHARS } from '@/lib/monaco/workerLimits';
+import { describe, expect, it } from 'vitest';
+import { isRecordJsonProbablyValid, tryParseRecordJson } from './recordEditorJson';
+
+describe('isRecordJsonProbablyValid', () => {
+	it('is true for well-formed JSON', () => {
+		expect(isRecordJsonProbablyValid('{"id":1,"name":"widget"}')).toBe(true);
+		expect(isRecordJsonProbablyValid('[{"id":1},{"id":2}]')).toBe(true);
+	});
+
+	it('is false for malformed JSON', () => {
+		expect(isRecordJsonProbablyValid('{"id":1,}')).toBe(false);
+		expect(isRecordJsonProbablyValid('not json')).toBe(false);
+	});
+
+	it('is false for empty or nullish content (nothing to save)', () => {
+		expect(isRecordJsonProbablyValid('')).toBe(false);
+		expect(isRecordJsonProbablyValid(undefined)).toBe(false);
+		expect(isRecordJsonProbablyValid(null)).toBe(false);
+	});
+
+	it('does not parse oversized content — defers to the submit-time parse', () => {
+		// A malformed buffer past the size limit: parsing it on every keystroke is the
+		// cost we avoid, so it is optimistically valid here and left to submit time.
+		const huge = `{"blob":"${'x'.repeat(MAX_WORKER_MODEL_CHARS)}`; // deliberately unterminated
+		expect(huge.length).toBeGreaterThan(MAX_WORKER_MODEL_CHARS);
+		expect(isRecordJsonProbablyValid(huge)).toBe(true);
+	});
+});
+
+describe('tryParseRecordJson', () => {
+	it('returns the parsed value for well-formed JSON', () => {
+		expect(tryParseRecordJson('{"id":1}')).toEqual({ ok: true, value: { id: 1 } });
+		expect(tryParseRecordJson('[1,2,3]')).toEqual({ ok: true, value: [1, 2, 3] });
+	});
+
+	it('returns { ok: false } for malformed JSON rather than throwing', () => {
+		expect(tryParseRecordJson('{"id":1,}')).toEqual({ ok: false });
+		expect(tryParseRecordJson('')).toEqual({ ok: false });
+	});
+
+	it('rejects an oversized malformed buffer without throwing', () => {
+		const huge = `{"blob":"${'x'.repeat(MAX_WORKER_MODEL_CHARS)}`; // unterminated
+		expect(tryParseRecordJson(huge)).toEqual({ ok: false });
+	});
+});
diff --git a/src/features/instance/databases/modals/recordEditorJson.ts b/src/features/instance/databases/modals/recordEditorJson.ts
new file mode 100644
index 000000000..80538a0d5
--- /dev/null
+++ b/src/features/instance/databases/modals/recordEditorJson.ts
@@ -0,0 +1,43 @@
+import { MAX_WORKER_MODEL_CHARS } from '@/lib/monaco/workerLimits';
+
+/**
+ * The record editors highlight JSON with a worker-free language (see
+ * `workerFreeJsonLanguage.ts`), so there are no inline validation markers to
+ * gate the Save button on. These helpers replace that signal:
+ *
+ * - {@link isRecordJsonProbablyValid} is a cheap, main-thread check for the Save
+ *   button, run on every change but only *parsing* content small enough to be
+ *   safe to parse repeatedly.
+ * - {@link tryParseRecordJson} is the authoritative, caught parse the submit
+ *   handlers run once, so an oversized/never-live-checked buffer that turns out
+ *   to be malformed surfaces a toast instead of throwing an uncaught
+ *   `SyntaxError`.
+ */
+
+export type ParsedRecordJson = { ok: true; value: unknown } | { ok: false };
+
+/**
+ * Whether `content` is worth enabling Save for. Empty content is nothing to
+ * save. Content over {@link MAX_WORKER_MODEL_CHARS} is not parsed here — parsing
+ * a multi-hundred-KB buffer on every keystroke is the cost we are avoiding — so
+ * it is treated as valid and left to {@link tryParseRecordJson} at submit time.
+ * Everything else is validated with a real parse.
+ */
+export function isRecordJsonProbablyValid(content: string | undefined | null): boolean {
+	if (!content) {
+		return false;
+	}
+	if (content.length > MAX_WORKER_MODEL_CHARS) {
+		return true;
+	}
+	return tryParseRecordJson(content).ok;
+}
+
+/** Parse `content` as JSON, returning a result object rather than throwing. */
+export function tryParseRecordJson(content: string): ParsedRecordJson {
+	try {
+		return { ok: true, value: JSON.parse(content) };
+	} catch {
+		return { ok: false };
+	}
+}
diff --git a/src/lib/monaco/monacoJsonTokenization.d.ts b/src/lib/monaco/monacoJsonTokenization.d.ts
new file mode 100644
index 000000000..86cea4580
--- /dev/null
+++ b/src/lib/monaco/monacoJsonTokenization.d.ts
@@ -0,0 +1,13 @@
+/**
+ * Monaco's built-in JSON tokenizer, reused for the worker-free JSON highlight
+ * language (see `workerFreeJsonLanguage.ts`). It is a synchronous, main-thread
+ * line scanner (from the bundled jsonc-parser) with no language worker, but the
+ * curated Monaco build ships it without type declarations — the same situation
+ * `languageServices.ts` describes for the language-service defaults. Typed here
+ * against the public `languages.TokensProvider` shape it already satisfies.
+ */
+declare module 'monaco-editor/esm/vs/language/json/tokenization.js' {
+	export function createTokenizationSupport(
+		supportComments: boolean,
+	): import('monaco-editor/esm/vs/editor/editor.api.js').languages.TokensProvider;
+}
diff --git a/src/lib/monaco/setup.ts b/src/lib/monaco/setup.ts
index 6e5b4f7d6..feea5ec06 100644
--- a/src/lib/monaco/setup.ts
+++ b/src/lib/monaco/setup.ts
@@ -18,6 +18,7 @@
  * so it is imported at the top of `main.tsx`.
  */
 import { reportPossibleStaleDeploy } from '@/lib/installStaleDeployReload';
+import { registerWorkerFreeJsonLanguage } from '@/lib/monaco/workerFreeJsonLanguage';
 import { loader } from '@monaco-editor/react';
 // Typed Monaco API namespace.
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
@@ -90,6 +91,11 @@ globalScope.MonacoEnvironment = {
 	},
 };
 
+// A JSON highlight language with no language worker, for the browse record
+// editors — see `workerFreeJsonLanguage.ts`. Registered here, alongside the
+// built-in `json` contribution above, so it exists before the first editor mounts.
+registerWorkerFreeJsonLanguage(monaco.languages);
+
 // Point @monaco-editor/react at the locally bundled Monaco rather than the CDN.
 loader.config({ monaco });
 
diff --git a/src/lib/monaco/workerFreeJsonLanguage.test.ts b/src/lib/monaco/workerFreeJsonLanguage.test.ts
new file mode 100644
index 000000000..551c5d7b4
--- /dev/null
+++ b/src/lib/monaco/workerFreeJsonLanguage.test.ts
@@ -0,0 +1,66 @@
+import { describe, expect, it, vi } from 'vitest';
+import type { WorkerFreeJsonMonaco } from './workerFreeJsonLanguage';
+
+// Stub Monaco's JSON tokenizer so the test doesn't pull in the editor runtime;
+// we only care that it is handed to `setTokensProvider`.
+const tokensProvider = { getInitialState: () => null, tokenize: () => ({ tokens: [], endState: null }) };
+vi.mock('monaco-editor/esm/vs/language/json/tokenization.js', () => ({
+	createTokenizationSupport: () => tokensProvider,
+}));
+
+function makeFakeLanguages() {
+	return {
+		register: vi.fn(),
+		setLanguageConfiguration: vi.fn(),
+		setTokensProvider: vi.fn(),
+		// Worker-backed providers — registering ANY of these for the record editor
+		// language would reintroduce the OOM the language exists to avoid.
+		registerCompletionItemProvider: vi.fn(),
+		registerHoverProvider: vi.fn(),
+		registerFoldingRangeProvider: vi.fn(),
+		registerColorProvider: vi.fn(),
+		registerDocumentFormattingEditProvider: vi.fn(),
+		registerDocumentRangeFormattingEditProvider: vi.fn(),
+		registerDocumentSymbolProvider: vi.fn(),
+		registerSelectionRangeProvider: vi.fn(),
+	};
+}
+
+describe('registerWorkerFreeJsonLanguage', () => {
+	it('registers highlighting + language configuration but no worker-backed providers', async () => {
+		vi.resetModules();
+		const { registerWorkerFreeJsonLanguage, WORKER_FREE_JSON_LANGUAGE_ID } = await import('./workerFreeJsonLanguage');
+		const languages = makeFakeLanguages();
+
+		registerWorkerFreeJsonLanguage(languages as unknown as WorkerFreeJsonMonaco);
+
+		expect(languages.register).toHaveBeenCalledWith({ id: WORKER_FREE_JSON_LANGUAGE_ID });
+		expect(languages.setTokensProvider).toHaveBeenCalledWith(WORKER_FREE_JSON_LANGUAGE_ID, tokensProvider);
+		expect(languages.setLanguageConfiguration).toHaveBeenCalledWith(
+			WORKER_FREE_JSON_LANGUAGE_ID,
+			expect.objectContaining({ brackets: expect.any(Array), autoClosingPairs: expect.any(Array) }),
+		);
+
+		// The whole point of the language: no language worker is ever wired up.
+		expect(languages.registerCompletionItemProvider).not.toHaveBeenCalled();
+		expect(languages.registerHoverProvider).not.toHaveBeenCalled();
+		expect(languages.registerFoldingRangeProvider).not.toHaveBeenCalled();
+		expect(languages.registerColorProvider).not.toHaveBeenCalled();
+		expect(languages.registerDocumentFormattingEditProvider).not.toHaveBeenCalled();
+		expect(languages.registerDocumentRangeFormattingEditProvider).not.toHaveBeenCalled();
+		expect(languages.registerDocumentSymbolProvider).not.toHaveBeenCalled();
+		expect(languages.registerSelectionRangeProvider).not.toHaveBeenCalled();
+	});
+
+	it('registers once, even if called repeatedly (HMR / repeated setup imports)', async () => {
+		vi.resetModules();
+		const { registerWorkerFreeJsonLanguage } = await import('./workerFreeJsonLanguage');
+		const languages = makeFakeLanguages();
+
+		registerWorkerFreeJsonLanguage(languages as unknown as WorkerFreeJsonMonaco);
+		registerWorkerFreeJsonLanguage(languages as unknown as WorkerFreeJsonMonaco);
+
+		expect(languages.register).toHaveBeenCalledTimes(1);
+		expect(languages.setTokensProvider).toHaveBeenCalledTimes(1);
+	});
+});
diff --git a/src/lib/monaco/workerFreeJsonLanguage.ts b/src/lib/monaco/workerFreeJsonLanguage.ts
new file mode 100644
index 000000000..2b202d050
--- /dev/null
+++ b/src/lib/monaco/workerFreeJsonLanguage.ts
@@ -0,0 +1,76 @@
+import type * as Monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
+import { createTokenizationSupport } from 'monaco-editor/esm/vs/language/json/tokenization.js';
+
+/**
+ * Language id for a JSON editor that highlights but never spins up a language
+ * worker.
+ *
+ * Monaco's built-in `json` language backs validation, folding, colors, and
+ * completion with a web worker, and syncs the model's full text (and every
+ * change delta) to it over `postMessage` — a structured clone. A large enough
+ * record (a row with a big blob/array, or a bulk-insert array pasted into "Add
+ * row") overflows the clone buffer and crashes the worker with "DataCloneError:
+ * ... out of memory.", which Monaco reports as an unhandled error and then
+ * retries, flooding the session (HarperFast/studio#1370 / #1499, recurring
+ * through the browse record editors).
+ *
+ * Switching to `plaintext` once the content is already oversized cannot prevent
+ * that: `@monaco-editor/react` applies a changed `language` prop in a later
+ * effect, and once the model has been synced the worker's own change listener
+ * posts the oversized delta before any language switch runs — so the guard the
+ * Applications/log editors use (size-based `json`→`plaintext`) leaves the paste
+ * path exposed for an *editable* editor. This language sidesteps the race
+ * entirely: it registers only the main-thread JSON tokenizer plus the standard
+ * JSON language configuration (brackets, auto-closing pairs), and no
+ * worker-backed providers — so there is no language worker to overflow, at any
+ * size. Records lose worker-only affordances (inline validation squiggles,
+ * folding, format-on-type); highlighting and bracket handling are unchanged.
+ */
+export const WORKER_FREE_JSON_LANGUAGE_ID = 'json-worker-free';
+
+/** Mirrors Monaco's built-in `json` rich-edit configuration (see monaco-json's
+ * `jsonMode`) so editing feels identical to the worker-backed `json` language.
+ * Records are strict JSON, but the comment settings are kept for parity — a
+ * saved comment is rejected by the submit-time `JSON.parse`, not silently. */
+const jsonLanguageConfiguration: Monaco.languages.LanguageConfiguration = {
+	wordPattern: /(-?\d*\.\d\w*)|([^[{\]}:"\s,]+)/g,
+	comments: {
+		lineComment: '//',
+		blockComment: ['/*', '*/'],
+	},
+	brackets: [
+		['{', '}'],
+		['[', ']'],
+	],
+	autoClosingPairs: [
+		{ open: '{', close: '}', notIn: ['string'] },
+		{ open: '[', close: ']', notIn: ['string'] },
+		{ open: '"', close: '"', notIn: ['string'] },
+	],
+};
+
+/** The pieces of the Monaco namespace this registration touches. Narrowed so the
+ * registration is unit-testable without a real editor, and so a test can assert
+ * that no worker-backed provider is ever registered for this language. */
+export type WorkerFreeJsonMonaco = Pick<
+	typeof Monaco.languages,
+	'register' | 'setLanguageConfiguration' | 'setTokensProvider'
+>;
+
+let registered = false;
+
+/**
+ * Register {@link WORKER_FREE_JSON_LANGUAGE_ID}. Idempotent — safe across HMR and
+ * repeated setup imports. Registers only tokenization + language configuration;
+ * deliberately registers none of the worker-backed JSON providers.
+ */
+export function registerWorkerFreeJsonLanguage(monaco: WorkerFreeJsonMonaco): void {
+	if (registered) {
+		return;
+	}
+	registered = true;
+	monaco.register({ id: WORKER_FREE_JSON_LANGUAGE_ID });
+	monaco.setLanguageConfiguration(WORKER_FREE_JSON_LANGUAGE_ID, jsonLanguageConfiguration);
+	// `true` = tokenize comments, matching monaco-json's own tokenizer setup.
+	monaco.setTokensProvider(WORKER_FREE_JSON_LANGUAGE_ID, createTokenizationSupport(true));
+}