@rebasepro/plugin-ai 0.12.0 → 0.12.1-canary.g009ed95

package/dist/index.es.js

@@ -1,143 +1,193 @@
-import React, { useCallback, useContext, useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
-import { AIIcon, useAuthController, useLargeLayout, useSnackbarController } from "@rebasepro/app";
-import { getFieldId, useUrlController } from "@rebasepro/admin";
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { getFieldId } from "@rebasepro/admin";
 import { isPropertyBuilder, stripCollectionPath } from "@rebasepro/common";
 import { getValueInPath } from "@rebasepro/utils";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Button, CircularProgress, IconButton, Menu, MenuItem, SendIcon, Separator, TextareaAutosize, XIcon, cls, focusedDisabled, iconSize } from "@rebasepro/ui";
-//#region src/utils/values.ts
-function flatMapEntityValues(values, path = "") {
-	if (!values) return {};
-	return Object.entries(values).flatMap(([key, value]) => {
-		const currentPath = path ? `${path}.${key}` : key;
-		if (typeof value === "object") return flatMapEntityValues(value, currentPath);
-		else return { [currentPath]: value };
-	}).reduce((acc, curr) => ({
-		...acc,
-		...curr
-	}), {});
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, Checkbox, CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Menu, MenuItem, SendIcon, Separator, TextareaAutosize, Typography, XIcon, cls, focusedDisabled, iconSize } from "@rebasepro/ui";
+import { AIIcon } from "@rebasepro/app";
+/**
+* ## No credentials cross this boundary
+*
+* The old client sent the tenant's Rebase JWT as `Authorization: Basic <jwt>`
+* plus a hardcoded `fcms-…` key compiled into the published package. Both were
+* wrong in the same way: a self-hosted backend signs its tokens with its own
+* secret, so no external service can verify one — sending it only handed a live
+* credential to a third party that had no use for it.
+*
+* These requests are anonymous. The service bounds cost by rate limit and daily
+* ceiling rather than by identity, and reports through {@link fetchAiStatus}
+* when it can no longer serve — which is what keeps the UI from offering an
+* action that is going to fail.
+*/
+function endpointOf(endpoint, path) {
+	return (endpoint ?? "https://app.rebase.pro/api/functions/ai").replace(/\/+$/, "") + path;
 }
-//#endregion
-//#region src/api.ts
-var DEFAULT_SERVER = "https://api.rebase.pro";
-async function enhanceDataAPIStream(props) {
-	const flatValues = flatMapEntityValues(props.values);
-	const properties = props.properties;
-	const request = {
-		inputEntity: {
-			entityId: props.entityId,
-			values: flatValues
-		},
-		properties,
-		entityName: props.entityName,
-		entityDescription: props.entityDescription,
-		propertyKey: props.propertyKey,
-		propertyInstructions: props.propertyInstructions,
-		instructions: props.instructions
-	};
-	console.debug("enhanceDataAPIStream", request);
-	return fetch((props.host ?? DEFAULT_SERVER) + "/data/enhance_stream/", {
-		method: "POST",
-		headers: {
-			"Content-Type": "application/json",
-			Authorization: `Basic ${props.firebaseToken}`,
-			"x-de-api-key": `Basic ${props.apiKey}`
-		},
-		body: JSON.stringify(request)
-	}).then(async (res) => {
-		if (!res.ok) {
-			console.error("enhanceDataAPIStream error", res);
-			throw await res.json();
-		}
-		const reader = res.body?.getReader();
-		if (!reader) throw new Error("No reader");
-		for await (const chunk of readChunks(reader)) {
-			const str = new TextDecoder().decode(chunk);
-			try {
-				str.split("&$# ").forEach((s) => {
-					if (s && s.length > 0) {
-						const data = JSON.parse(s.trim());
-						if (data.type === "suggestion_delta") props.onUpdateDelta(data.data.propertyKey, data.data.partialValue);
-						else if (data.type === "suggestion") props.onUpdate(data.data);
-						else if (data.type === "result") props.onEnd(data.data);
-					}
-				});
-			} catch (e) {
-				console.error("str", str);
-				console.error("Error parsing stream", e);
-				props.onError(e instanceof Error ? e : new Error(String(e)));
-			}
+/** Not global: `exec` must not carry `lastIndex` between buffer reads. */
+var SSE_SEPARATOR = /\r?\n\r?\n/;
+/**
+* Parse an SSE body incrementally.
+*
+* The framing this replaces split each chunk on the literal `"&$# "` and
+* `JSON.parse`d the pieces, which corrupted itself the moment a delimiter
+* straddled two reads — and network reads land wherever they land. Buffering
+* until a blank line is the fix, and it is also just what SSE specifies.
+*/
+async function* readServerSentEvents(response) {
+	const reader = response.body?.getReader();
+	if (!reader) throw new Error("The AI service returned no response body");
+	const decoder = new TextDecoder();
+	let buffer = "";
+	for (;;) {
+		const { done, value } = await reader.read();
+		if (done) break;
+		buffer += decoder.decode(value, { stream: true });
+		let match = SSE_SEPARATOR.exec(buffer);
+		while (match) {
+			const raw = buffer.slice(0, match.index);
+			buffer = buffer.slice(match.index + match[0].length);
+			const parsed = parseEventBlock(raw);
+			if (parsed) yield parsed;
+			match = SSE_SEPARATOR.exec(buffer);
 		}
-	});
+	}
 }
-function readChunks(reader) {
-	return { async *[Symbol.asyncIterator]() {
-		let readResult = await reader.read();
-		while (!readResult.done) {
-			yield readResult.value;
-			readResult = await reader.read();
-		}
-	} };
+function parseEventBlock(block) {
+	let event = "message";
+	const dataLines = [];
+	for (const line of block.split(/\r?\n/)) {
+		if (line.startsWith(":")) continue;
+		const separator = line.indexOf(":");
+		const field = separator === -1 ? line : line.slice(0, separator);
+		const rawValue = separator === -1 ? "" : line.slice(separator + 1);
+		const value = rawValue.startsWith(" ") ? rawValue.slice(1) : rawValue;
+		if (field === "event") event = value;
+		else if (field === "data") dataLines.push(value);
+	}
+	if (dataLines.length === 0) return void 0;
+	return {
+		event,
+		data: dataLines.join("\n")
+	};
+}
+/** Pull a message out of the control plane's `{ error: { message } }` envelope. */
+async function errorFrom(response, fallback) {
+	try {
+		const message = (await response.json())?.error?.message;
+		if (typeof message === "string" && message) return new Error(message);
+	} catch {}
+	return new Error(fallback);
 }
-async function fetchEntityPromptSuggestion(props) {
-	return fetch((props.host ?? DEFAULT_SERVER) + "/data/prompt_autocomplete/", {
+/**
+* Ask the service whether it can serve a request at all.
+*
+* The plugin gates every affordance on this. A missing provider key, an
+* exhausted daily quota or an unreachable host all resolve to `available:
+* false`, and the Autofill button is simply not rendered — rather than
+* rendered, clicked, and failed.
+*/
+async function fetchAiStatus(props) {
+	const response = await fetch(endpointOf(props.endpoint, "/status"), {
+		method: "GET",
+		signal: props.signal
+	});
+	if (!response.ok) return { available: false };
+	const body = await response.json();
+	return {
+		available: Boolean(body?.available),
+		model: typeof body?.model === "string" ? body.model : void 0,
+		features: Array.isArray(body?.features) ? body.features : void 0
+	};
+}
+/**
+* Fill a record, streaming each field as the service writes it.
+*
+* `onDelta` fires with more text for a field still being written; `onValue`
+* fires once a field is complete and carries its final, correctly typed value.
+* A caller that implements only `onValue` still ends up with the right record —
+* the deltas exist so a long text field fills in visibly instead of appearing
+* all at once.
+*/
+async function autofillStream(props) {
+	const response = await fetch(endpointOf(props.endpoint, "/autofill"), {
 		method: "POST",
-		headers: {
-			"Content-Type": "application/json",
-			Authorization: `Basic ${props.firebaseToken}`,
-			"x-de-api-key": `Basic ${props.apiKey}`
-		},
-		body: JSON.stringify({
-			entityName: props.entityName,
-			input: props.input ?? null
-		})
-	}).then(async (res) => {
-		const data = await res.json();
-		if (!res.ok) {
-			console.error("fetchEntityPromptSuggestion", data);
-			throw Error(data.message);
-		}
-		return { prompts: data.data.prompts.map((e) => ({
-			prompt: e,
-			type: "sample"
-		})) };
+		headers: { "Content-Type": "application/json" },
+		body: JSON.stringify(props.request),
+		signal: props.signal
 	});
+	if (!response.ok) throw await errorFrom(response, "The AI service could not complete this request.");
+	let result = { suggestions: {} };
+	for await (const { event, data } of readServerSentEvents(response)) {
+		let payload;
+		try {
+			payload = JSON.parse(data);
+		} catch {
+			continue;
+		}
+		if (event === "suggestion_delta") props.onDelta(payload.key, payload.text);
+		else if (event === "suggestion") props.onValue(payload.key, payload.value);
+		else if (event === "done") result = {
+			suggestions: payload.suggestions ?? {},
+			usage: payload.usage
+		};
+		else if (event === "error") throw new Error(payload.message ?? "The AI service reported an error.");
+	}
+	return result;
 }
+/** Inline continuation for the rich-text editor. Streams plain text. */
 async function autocompleteStream(props) {
-	let result = "";
-	return fetch((props.host ?? DEFAULT_SERVER) + "/data/autocomplete/", {
+	const response = await fetch(endpointOf(props.endpoint, "/autocomplete"), {
 		method: "POST",
-		headers: {
-			"Content-Type": "application/json",
-			Authorization: `Basic ${props.firebaseToken}`
-		},
+		headers: { "Content-Type": "application/json" },
 		body: JSON.stringify({
-			textBefore: props.textBefore,
-			textAfter: props.textAfter
-		})
-	}).then(async (res) => {
-		if (!res.ok) {
-			console.error("enhanceDataAPIStream error", res);
-			throw await res.json();
+			textBefore: props.textBefore ?? "",
+			textAfter: props.textAfter ?? ""
+		}),
+		signal: props.signal
+	});
+	if (!response.ok) throw await errorFrom(response, "The AI service could not complete this request.");
+	let text = "";
+	for await (const { event, data } of readServerSentEvents(response)) {
+		let payload;
+		try {
+			payload = JSON.parse(data);
+		} catch {
+			continue;
 		}
-		const reader = res.body?.getReader();
-		if (!reader) throw new Error("No reader");
-		for await (const chunk of readChunks(reader)) {
-			const str = new TextDecoder().decode(chunk);
-			result += str;
-			console.debug("Autocomplete update:", str);
-			props.onUpdate(str);
+		if (event === "error") throw new Error(payload?.message ?? "The AI service reported an error.");
+		if (event === "delta" && typeof payload?.text === "string") {
+			text += payload.text;
+			props.onDelta(payload.text);
 		}
-	}).then(() => {
-		console.debug("Autocomplete result:", result);
-		return result;
-	});
+	}
+	return text;
 }
-//#endregion
-//#region src/utils/suggestions.ts
-function getAppendableSuggestion(suggestion, value) {
-	const suggestionIncludesValue = typeof suggestion === "string" && typeof value === "string" && suggestion.toLowerCase().trim().startsWith(value.toLowerCase().trim());
-	return typeof value === "string" && suggestionIncludesValue ? suggestion.substring(suggestion.toLowerCase().trim().indexOf(value.toLowerCase().trim()) + value.trim().length) : void 0;
+/**
+* Sample prompts for the Autofill menu.
+*
+* Failure is deliberately not thrown: the menu has built-in prompts to fall
+* back on, and an empty suggestion list is a far better outcome than an error
+* toast for something nobody asked for.
+*/
+async function fetchPromptSuggestions(props) {
+	try {
+		const response = await fetch(endpointOf(props.endpoint, "/prompts"), {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({
+				entityName: props.entityName,
+				input: props.input
+			}),
+			signal: props.signal
+		});
+		if (!response.ok) return { prompts: [] };
+		const body = await response.json();
+		return { prompts: (Array.isArray(body?.prompts) ? body.prompts : []).filter((p) => typeof p === "string").map((prompt) => ({
+			prompt,
+			type: "sample"
+		})) };
+	} catch {
+		return { prompts: [] };
+	}
 }
 //#endregion
 //#region src/utils/properties.ts
@@ -262,18 +312,36 @@ function getSimpleEnumValues(enumValues) {
 	throw Error("getSimpleEnumValues: Invalid enumValues");
 }
 //#endregion
+//#region src/utils/values.ts
+function flatMapEntityValues(values, path = "") {
+	if (!values) return {};
+	return Object.entries(values).flatMap(([key, value]) => {
+		const currentPath = path ? `${path}.${key}` : key;
+		if (typeof value === "object") return flatMapEntityValues(value, currentPath);
+		else return { [currentPath]: value };
+	}).reduce((acc, curr) => ({
+		...acc,
+		...curr
+	}), {});
+}
+//#endregion
 //#region src/editor/useEditorAIController.tsx
-function useEditorAIController({ getAuthToken }) {
-	const autocomplete = async (textBefore, textAfter, onUpdate) => {
-		if (!getAuthToken) throw new Error("Firebase token is required");
-		return autocompleteStream({
-			firebaseToken: await getAuthToken(),
-			textBefore,
-			textAfter,
-			onUpdate
-		});
-	};
-	return { autocomplete };
+/**
+* Inline continuation for the rich-text editor's slash command.
+*
+* No token is threaded through any more. The previous version demanded a
+* Firebase ID token and threw `"Firebase token is required"` when it could not
+* get one — in a Rebase app there is no such thing, and the token it actually
+* sent was a Rebase JWT the receiving service had no way to verify. The hosted
+* service authenticates nobody; see `src/api.ts`.
+*/
+function useEditorAIController({ endpoint } = {}) {
+	return React.useMemo(() => ({ autocomplete: (textBefore, textAfter, onUpdate) => autocompleteStream({
+		endpoint,
+		textBefore,
+		textAfter,
+		onDelta: onUpdate
+	}) }), [endpoint]);
 }
 //#endregion
 //#region src/components/DataEnhancementControllerProvider.tsx
@@ -281,224 +349,213 @@ var DataEnhancementControllerContext = React.createContext(null);
 var useDataEnhancementController = () => useContext(DataEnhancementControllerContext);
 function getPropertyFromKey(properties, propertyKey) {
 	if (propertyKey in properties) return properties[propertyKey];
-	else {
-		const split = propertyKey.split(".");
-		if (split.length === 1) return;
-		return getPropertyFromKey(properties, split.slice(0, split.length - 1).join("."));
+	const split = propertyKey.split(".");
+	if (split.length === 1) return void 0;
+	return getPropertyFromKey(properties, split.slice(0, -1).join("."));
+}
+/**
+* Convert a value off the wire into what the form field expects.
+*
+* Only dates need converting: the service answers ISO-8601 strings because JSON
+* has no date type, and handing a date field a string stores the wrong type
+* without complaining. Everything else — strings, numbers, booleans, arrays of
+* scalars — is already the shape the field wants, which is the point of having
+* the service constrain its answer to a schema derived from these properties.
+*/
+function coerceToProperty(value, property) {
+	if (property?.type === "date" && typeof value === "string") {
+		const date = new Date(value);
+		return Number.isNaN(date.getTime()) ? void 0 : date;
 	}
+	return value;
 }
-function DataEnhancementControllerProvider({ apiKey, getConfigForPath, children, host, path, collection, formContext }) {
-	const [enabled, setEnabled] = useState(false);
-	const [suggestions, setSuggestions] = useState({});
-	const [loadingSuggestions, setLoadingSuggestions] = useState([]);
-	const enhancingInProgress = useRef(false);
-	const authController = useAuthController();
-	const snackbarController = useSnackbarController();
-	const properties = useMemo(() => getSimplifiedProperties(collection.properties, formContext?.values ?? {}), [formContext?.values]);
-	const valuesRef = React.useRef(formContext?.values ?? {});
+function DataEnhancementControllerProvider({ getConfigForPath, children, endpoint, path, collection, formContext }) {
+	const [allowedHere, setAllowedHere] = useState(false);
+	const [serviceAvailable, setServiceAvailable] = useState(false);
+	const [review, setReview] = useState(null);
+	const properties = useMemo(() => getSimplifiedProperties(collection.properties, formContext?.values ?? {}), [collection.properties, formContext?.values]);
+	/**
+	* Read inside the streaming callbacks, which outlive the render that
+	* started the run.
+	*
+	* The operator is free to keep typing while the model works — nothing here
+	* writes to the form — so the callbacks must not close over a stale
+	* property map from whichever render happened to kick the run off.
+	*/
+	const propertiesRef = useRef(properties);
+	propertiesRef.current = properties;
+	/** The host app's own opt-out. */
 	useEffect(() => {
-		if (!enhancingInProgress.current) valuesRef.current = formContext?.values ?? {};
-	}, [formContext?.values]);
-	const allowReferenceDataSelection = false;
-	const updateConfig = useCallback(async () => {
-		if (!getConfigForPath) return;
-		if (getConfigForPath({
+		if (!getConfigForPath) {
+			setAllowedHere(true);
+			return;
+		}
+		setAllowedHere(Boolean(getConfigForPath({
 			path,
 			collection
-		})) setEnabled(true);
+		})));
 	}, [
-		collection,
 		getConfigForPath,
-		path
+		path,
+		collection
 	]);
+	/**
+	* The service's own availability.
+	*
+	* Nothing renders until this comes back true. An unreachable host, an
+	* unconfigured provider key or an exhausted daily quota all land here, and
+	* all of them mean the same thing to the operator: no Autofill button,
+	* rather than a button that fails when clicked.
+	*/
 	useEffect(() => {
-		if (!getConfigForPath) setEnabled(true);
-		else updateConfig();
-	}, [getConfigForPath, updateConfig]);
-	const urlController = useUrlController();
-	const clearSuggestion = useCallback((propertyKey) => {
-		setSuggestions((prev) => {
-			const { [propertyKey]: _, ...rest } = prev;
-			return rest;
+		if (!allowedHere) return;
+		const abort = new AbortController();
+		fetchAiStatus({
+			endpoint,
+			signal: abort.signal
+		}).then((status) => setServiceAvailable(status.available)).catch(() => setServiceAvailable(false));
+		return () => abort.abort();
+	}, [allowedHere, endpoint]);
+	const enabled = allowedHere && serviceAvailable;
+	/** Add or update one row in the review, preserving arrival order. */
+	const upsertField = useCallback((key, update) => {
+		setReview((current) => {
+			if (!current) return current;
+			const index = current.fields.findIndex((f) => f.key === key);
+			const next = update(index === -1 ? void 0 : current.fields[index]);
+			const fields = index === -1 ? [...current.fields, next] : current.fields.map((f, i) => i === index ? next : f);
+			return {
+				...current,
+				fields
+			};
 		});
 	}, []);
-	const appendValueDelta = useCallback((propertyKey, delta) => {
-		const property = getPropertyFromKey(properties, propertyKey);
-		if (delta === null || property?.disabled) return;
-		const value = getValueInPath(valuesRef.current, propertyKey);
-		const updatedValue = (value ? value + "" : "") + delta;
-		valuesRef.current = {
-			...valuesRef.current,
-			[propertyKey]: updatedValue
-		};
-		formContext?.setFieldValue(propertyKey, updatedValue, false);
-		setSuggestions((prev) => ({
-			...prev,
-			[propertyKey]: (prev[propertyKey] ?? "") + delta
-		}));
-	}, [properties, formContext]);
-	const updateSuggestedValues = useCallback((currentValues, updatedValues, replaceValues) => {
-		setLoadingSuggestions((prev) => {
-			return prev.filter((p) => !Object.keys(updatedValues).includes(p));
-		});
-		Object.entries(updatedValues).forEach(([propertyKey, suggestion]) => {
-			const value = getValueInPath(currentValues, propertyKey);
-			const property = getPropertyFromKey(properties, propertyKey);
-			if (!property || suggestion === null || property?.disabled) return;
-			if (typeof suggestion === "number") {
-				formContext?.setFieldValue(propertyKey, suggestion);
-				return;
-			}
-			if (replaceValues) {
-				formContext?.setFieldValue(propertyKey, suggestion);
-				return;
-			}
-			const appendableValue = getAppendableSuggestion(suggestion, value);
-			const currentValue = value ? value + "" : "";
-			if (appendableValue) formContext?.setFieldValue(propertyKey, suggestion);
-			else {
-				const multiline = property?.fieldConfigId === "multiline" || property?.fieldConfigId === "markdown";
-				const trimmedValue = currentValue.trimEnd();
-				if (multiline && (trimmedValue.endsWith(".") || trimmedValue.endsWith("?") || trimmedValue.endsWith("!") || trimmedValue.endsWith(":"))) formContext?.setFieldValue(propertyKey, trimmedValue + "\n\n" + suggestion.trimStart());
-				else formContext?.setFieldValue(propertyKey, trimmedValue + (trimmedValue.length > 0 ? " " : "") + suggestion);
-			}
-		});
-		setSuggestions((prev) => ({
-			...prev,
-			...Object.keys(updatedValues).reduce((acc, key) => {
-				const value = getValueInPath(formContext?.values, key);
-				const suggestion = updatedValues[key];
-				return {
-					...acc,
-					[key]: getAppendableSuggestion(suggestion, value) ?? suggestion
-				};
-			}, {})
-		}));
-	}, [properties, formContext]);
-	const displayNeededSubscriptionSnackbar = useCallback((projectId) => {
-		snackbarController.open({
-			type: "warning",
-			message: "A valid subscription is needed in order to use this function.",
-			autoHideDuration: 4e3
+	const generate = useCallback(async (params) => {
+		const currentProperties = propertiesRef.current;
+		const flatValues = flatMapEntityValues(params.values ?? {});
+		setReview({
+			status: "generating",
+			fields: [],
+			instructions: params.instructions
 		});
-	}, [snackbarController]);
-	const editorAIController = useEditorAIController({ getAuthToken: authController.getAuthToken });
-	const clearAllSuggestions = useCallback(() => {
-		setSuggestions({});
-	}, []);
-	const enhance = useCallback(async (props) => {
-		if (!authController.user) {
-			snackbarController.open({
-				type: "warning",
-				message: "You need to be logged in to enhance data"
-			});
-			return Promise.reject(/* @__PURE__ */ new Error("Not logged in"));
-		}
-		const resolvedPath = urlController.resolveDatabasePathsFrom(path);
-		const firebaseToken = await authController.getAuthToken();
-		if (props.propertyKey) clearSuggestion(props.propertyKey);
-		else clearAllSuggestions();
-		setLoadingSuggestions((prev) => [...prev, ...props.propertyKey ? [props.propertyKey] : Object.keys(properties)]);
-		enhancingInProgress.current = true;
-		const currentValues = valuesRef.current ?? {};
-		return new Promise((resolve, reject) => {
-			function onError(e) {
-				setLoadingSuggestions([]);
-				const errorObj = e instanceof Error ? e : typeof e === "object" && e !== null ? e : new Error(String(e));
-				if (errorObj.code === "payment-required") {
-					const projectId = errorObj.data?.projectId;
-					displayNeededSubscriptionSnackbar(projectId);
-				} else console.error("Enhance error", e);
-				reject(e);
-				enhancingInProgress.current = false;
-			}
-			try {
-				enhanceDataAPIStream({
-					...props,
-					host,
-					apiKey,
-					properties,
-					path: resolvedPath,
+		const labelFor = (key) => currentProperties[key]?.name ?? key;
+		try {
+			await autofillStream({
+				endpoint,
+				request: {
 					entityName: collection.singularName ?? collection.name,
 					entityDescription: collection.description,
-					firebaseToken,
-					onUpdate: (suggestions) => {
-						console.debug("de onUpdate", suggestions);
-						updateSuggestedValues(currentValues, suggestions, props.replaceValues ?? false);
-					},
-					onUpdateDelta: (propertyKey, partialValue) => {
-						appendValueDelta(propertyKey, partialValue);
-					},
-					onError,
-					onEnd: (result) => {
-						console.debug("de onEnd", result);
-						if (result.errors) result.errors.forEach((error) => {
-							snackbarController.open({
-								type: "warning",
-								message: error
-							});
-						});
-						if (Object.keys(result.suggestions).length === 0) snackbarController.open({
-							type: "info",
-							autoHideDuration: 1800,
-							message: "No fields were updated"
-						});
-						setLoadingSuggestions([]);
-						resolve(result);
-						enhancingInProgress.current = false;
-					}
-				}).catch(onError);
-			} catch (e) {
-				onError(e);
-			}
-		});
+					values: flatValues,
+					properties: currentProperties,
+					propertyKey: params.propertyKey,
+					propertyInstructions: params.propertyInstructions,
+					instructions: params.instructions
+				},
+				onDelta: (key, text) => {
+					upsertField(key, (existing) => existing ? {
+						...existing,
+						proposed: String(existing.proposed ?? "") + text
+					} : {
+						key,
+						label: labelFor(key),
+						currentValue: getValueInPath(params.values, key),
+						proposed: text,
+						pending: true,
+						selected: true
+					});
+				},
+				onValue: (key, value) => {
+					const coerced = coerceToProperty(value, getPropertyFromKey(currentProperties, key));
+					upsertField(key, (existing) => ({
+						key,
+						label: existing?.label ?? labelFor(key),
+						currentValue: existing?.currentValue ?? getValueInPath(params.values, key),
+						proposed: coerced,
+						pending: false,
+						selected: existing?.selected ?? true
+					}));
+				}
+			});
+			setReview((current) => current && {
+				...current,
+				status: "ready",
+				fields: current.fields.map((f) => ({
+					...f,
+					pending: false
+				}))
+			});
+		} catch (e) {
+			const message = e instanceof Error ? e.message : "Autofill could not be completed";
+			setReview((current) => current && {
+				...current,
+				status: "failed",
+				error: message,
+				fields: current.fields.map((f) => ({
+					...f,
+					pending: false
+				}))
+			});
+		}
 	}, [
-		authController,
-		urlController,
-		path,
-		clearSuggestion,
-		clearAllSuggestions,
-		properties,
-		host,
-		apiKey,
 		collection,
-		updateSuggestedValues,
-		appendValueDelta,
-		displayNeededSubscriptionSnackbar,
-		snackbarController
+		endpoint,
+		upsertField
 	]);
-	const getSamplePrompts = useCallback(async (entityName, input) => {
-		return fetchEntityPromptSuggestion({
-			host,
-			entityName,
-			firebaseToken: await authController.getAuthToken(),
-			apiKey,
-			input
+	const toggleField = useCallback((key) => {
+		setReview((current) => current && {
+			...current,
+			fields: current.fields.map((f) => f.key === key ? {
+				...f,
+				selected: !f.selected
+			} : f)
 		});
-	}, [
-		apiKey,
-		authController.getAuthToken,
-		host
-	]);
+	}, []);
+	const toggleAll = useCallback((selected) => {
+		setReview((current) => current && {
+			...current,
+			fields: current.fields.map((f) => ({
+				...f,
+				selected
+			}))
+		});
+	}, []);
+	const dismissReview = useCallback(() => setReview(null), []);
+	const applyReview = useCallback(() => {
+		setReview((current) => {
+			if (!current) return null;
+			for (const field of current.fields) {
+				if (!field.selected || field.pending) continue;
+				if (field.proposed === void 0 || field.proposed === null) continue;
+				formContext?.setFieldValue(field.key, field.proposed);
+			}
+			return null;
+		});
+	}, [formContext]);
+	const editorAIController = useEditorAIController({ endpoint });
+	const getSamplePrompts = useCallback((entityName, input) => fetchPromptSuggestions({
+		endpoint,
+		entityName,
+		input
+	}), [endpoint]);
 	const dataEnhancementController = useMemo(() => ({
 		enabled,
-		suggestions,
-		clearSuggestion,
-		enhance,
-		allowReferenceDataSelection,
-		clearAllSuggestions,
+		review,
+		generate,
+		toggleField,
+		toggleAll,
+		applyReview,
+		dismissReview,
 		getSamplePrompts,
-		loadingSuggestions,
 		editorAIController
 	}), [
 		enabled,
-		suggestions,
-		clearSuggestion,
-		enhance,
-		allowReferenceDataSelection,
-		clearAllSuggestions,
+		review,
+		generate,
+		toggleField,
+		toggleAll,
+		applyReview,
+		dismissReview,
 		getSamplePrompts,
-		loadingSuggestions,
 		editorAIController
 	]);
 	return /* @__PURE__ */ jsx(DataEnhancementControllerContext.Provider, {
@@ -507,15 +564,191 @@ function DataEnhancementControllerProvider({ apiKey, getConfigForPath, children,
 	});
 }
 //#endregion
+//#region src/components/AutofillReviewDialog.tsx
+/**
+* The review step.
+*
+* Autofill used to write generated text into the live form as it streamed —
+* fields mutating under the cursor, half-written sentences that looked like
+* bugs, and a pile of heuristics deciding whether each token should append to
+* or replace what the operator had already typed. Getting the old value back
+* meant retyping it.
+*
+* So the generated values land here instead. Streaming still happens, and is
+* still worth having — rows appear and fill in as the model works, so a long
+* run shows progress — but it happens in a surface that owns nothing. The
+* record changes on **Apply**, once, for the rows still ticked.
+*/
+function AutofillReviewDialog() {
+	const controller = useDataEnhancementController();
+	const review = controller?.review;
+	if (!review) return null;
+	const generating = review.status === "generating";
+	const applicable = review.fields.filter((f) => !f.pending && f.selected);
+	const allSelected = review.fields.length > 0 && review.fields.every((f) => f.selected);
+	return /* @__PURE__ */ jsxs(Dialog, {
+		open: true,
+		maxWidth: "2xl",
+		onOpenChange: (open) => {
+			if (!open) controller.dismissReview();
+		},
+		children: [
+			/* @__PURE__ */ jsx(DialogTitle, {
+				variant: "subtitle1",
+				gutterBottom: false,
+				children: "Review autofill"
+			}),
+			/* @__PURE__ */ jsxs(DialogContent, {
+				className: "flex flex-col gap-2",
+				children: [
+					review.instructions && /* @__PURE__ */ jsxs(Typography, {
+						variant: "body2",
+						color: "secondary",
+						className: "italic",
+						children: [
+							"“",
+							review.instructions,
+							"”"
+						]
+					}),
+					review.fields.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("label", {
+						className: "flex items-center gap-3 py-1 cursor-pointer select-none",
+						children: [/* @__PURE__ */ jsx(Checkbox, {
+							checked: allSelected,
+							size: "small",
+							onCheckedChange: () => controller.toggleAll(!allSelected)
+						}), /* @__PURE__ */ jsx(Typography, {
+							variant: "label",
+							color: "secondary",
+							children: allSelected ? "Deselect all" : "Select all"
+						})]
+					}), /* @__PURE__ */ jsx(Separator, {
+						orientation: "horizontal",
+						className: "my-0"
+					})] }),
+					/* @__PURE__ */ jsx("div", {
+						className: "flex flex-col divide-y divide-surface-accent-100 dark:divide-surface-accent-800",
+						children: review.fields.map((field) => /* @__PURE__ */ jsx(ProposedFieldRow, {
+							field,
+							onToggle: () => controller.toggleField(field.key)
+						}, field.key))
+					}),
+					generating && /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-3 py-4 text-text-secondary dark:text-text-secondary-dark",
+						children: [/* @__PURE__ */ jsx(CircularProgress, { size: "smallest" }), /* @__PURE__ */ jsx(Typography, {
+							variant: "body2",
+							color: "secondary",
+							children: review.fields.length === 0 ? "Thinking…" : "Writing the remaining fields…"
+						})]
+					}),
+					review.status === "failed" && /* @__PURE__ */ jsxs(Typography, {
+						variant: "body2",
+						className: "py-2 text-red-600 dark:text-red-400",
+						children: [review.error, review.fields.length > 0 && " You can still apply what was written before it stopped."]
+					}),
+					!generating && review.fields.length === 0 && review.status !== "failed" && /* @__PURE__ */ jsx(Typography, {
+						variant: "body2",
+						color: "secondary",
+						className: "py-4",
+						children: "Nothing to fill in — every field either already has a value the model would not improve on, or is not one it can write."
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs(DialogActions, { children: [/* @__PURE__ */ jsx(Button, {
+				variant: "text",
+				color: "neutral",
+				onClick: controller.dismissReview,
+				children: "Discard"
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "filled",
+				disabled: applicable.length === 0,
+				onClick: controller.applyReview,
+				children: applicable.length === 1 ? "Apply 1 field" : `Apply ${applicable.length} fields`
+			})] })
+		]
+	});
+}
+function ProposedFieldRow({ field, onToggle }) {
+	const replaces = hasValue(field.currentValue) && !isSameValue(field.currentValue, field.proposed);
+	return /* @__PURE__ */ jsxs("label", {
+		className: cls("flex items-start gap-3 py-3 cursor-pointer", !field.selected && "opacity-50"),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "mt-0.5 shrink-0",
+			children: /* @__PURE__ */ jsx(Checkbox, {
+				checked: field.selected,
+				size: "small",
+				onCheckedChange: onToggle
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-1 min-w-0 grow",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ jsx(Typography, {
+							variant: "label",
+							children: field.label
+						}),
+						replaces && /* @__PURE__ */ jsx(Typography, {
+							variant: "caption",
+							color: "secondary",
+							children: "replaces the current value"
+						}),
+						field.pending && /* @__PURE__ */ jsx(CircularProgress, { size: "smallest" })
+					]
+				}),
+				replaces && /* @__PURE__ */ jsx(Typography, {
+					variant: "body2",
+					color: "secondary",
+					className: "line-through whitespace-pre-wrap break-words",
+					children: renderValue(field.currentValue)
+				}),
+				/* @__PURE__ */ jsx(Typography, {
+					variant: "body2",
+					className: "whitespace-pre-wrap break-words",
+					children: renderValue(field.proposed)
+				})
+			]
+		})]
+	});
+}
+function hasValue(value) {
+	if (value === null || value === void 0) return false;
+	if (typeof value === "string") return value.trim().length > 0;
+	if (Array.isArray(value)) return value.length > 0;
+	return true;
+}
+function isSameValue(a, b) {
+	if (a === b) return true;
+	if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime();
+	if (Array.isArray(a) && Array.isArray(b)) return a.length === b.length && a.every((v, i) => isSameValue(v, b[i]));
+	return false;
+}
+/** Values are shown, never edited here — so a readable string is all that is needed. */
+function renderValue(value) {
+	if (value === null || value === void 0) return "";
+	if (value instanceof Date) return value.toLocaleString();
+	if (Array.isArray(value)) return value.map((v) => renderValue(v)).join(", ");
+	if (typeof value === "boolean") return value ? "Yes" : "No";
+	if (typeof value === "object") return JSON.stringify(value);
+	return String(value);
+}
+//#endregion
 //#region src/components/FormEnhanceAction.tsx
-function FormEnhanceAction({ entityId, path, status, collection, formContext, openEntityMode }) {
-	const largeLayout = useLargeLayout();
+function FormEnhanceAction({ path, status, collection, formContext }) {
 	const storageKey = createLocalStorageKey(path, status);
-	const [loading, setLoading] = React.useState(false);
 	const dataEnhancementController = useDataEnhancementController();
 	const [samplePrompts, setSamplePrompts] = React.useState(void 0);
 	const [instructions, setInstructions] = React.useState("");
 	const getSamplePrompts = dataEnhancementController?.getSamplePrompts;
+	/**
+	* Driven by the controller rather than by local state.
+	*
+	* There is exactly one run at a time, and the review owns it — a second
+	* `loading` flag here could disagree with the dialog about whether the
+	* model is still writing.
+	*/
+	const loading = dataEnhancementController?.review?.status === "generating";
 	const loadingPrompts = useRef(false);
 	const updateSuggestedPrompts = useCallback(async function updateSuggestedPrompts(instructions) {
 		if (!getSamplePrompts) return;
@@ -532,7 +765,6 @@ function FormEnhanceAction({ entityId, path, status, collection, formContext, op
 		getSamplePrompts,
 		status
 	]);
-	useDeferredValue(formContext?.values);
 	useEffect(() => {
 		if (!dataEnhancementController) return;
 		if (!samplePrompts) {
@@ -551,9 +783,12 @@ function FormEnhanceAction({ entityId, path, status, collection, formContext, op
 		if (!dataEnhancementController) return;
 		updateSuggestedPrompts().then();
 	}, [dataEnhancementController, status]);
-	const enhance = (prompt) => {
+	/**
+	* Starts a run and opens the review. Nothing is written to the form here —
+	* see {@link AutofillReviewDialog}.
+	*/
+	const generate = (prompt) => {
 		if (!dataEnhancementController || !formContext?.values) return;
-		setLoading(true);
 		if (prompt) {
 			addRecentPrompt(storageKey, prompt);
 			setSamplePrompts([{
@@ -561,30 +796,22 @@ function FormEnhanceAction({ entityId, path, status, collection, formContext, op
 				type: "recent"
 			}, ...(samplePrompts ?? []).slice(0, 5)]);
 		}
-		return dataEnhancementController.enhance({
-			entityId,
+		dataEnhancementController.generate({
 			values: formContext.values,
-			instructions: prompt,
-			replaceValues: true
-		}).finally(() => {
-			setLoading(false);
-		});
+			instructions: prompt
+		}).catch(() => void 0);
 	};
 	if (!dataEnhancementController?.enabled) return null;
-	const suggestions = dataEnhancementController.suggestions;
-	Object.values(suggestions).filter(Boolean).length;
-	(samplePrompts ?? []).length > 0 && instructions.length;
 	function submit() {
-		enhance(instructions);
+		generate(instructions);
 	}
-	return /* @__PURE__ */ jsxs(Menu, {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Menu, {
 		align: "end",
 		sideOffset: 8,
 		className: "max-w-[100vw]",
 		trigger: /* @__PURE__ */ jsxs(Button, {
 			variant: "filled",
 			color: "neutral",
-			fullWidth: largeLayout && openEntityMode === "full_screen",
 			size: "small",
 			disabled: loading,
 			children: [
@@ -597,7 +824,7 @@ function FormEnhanceAction({ entityId, path, status, collection, formContext, op
 			/* @__PURE__ */ jsxs(MenuItem, {
 				className: "py-4",
 				onClick: () => {
-					enhance();
+					generate();
 				},
 				children: [/* @__PURE__ */ jsx(AIIcon, { size: "small" }), "Autofill based on the current content"]
 			}),
@@ -609,7 +836,7 @@ function FormEnhanceAction({ entityId, path, status, collection, formContext, op
 				return /* @__PURE__ */ jsxs(MenuItem, {
 					onClick: () => {
 						setInstructions(samplePrompt.prompt);
-						enhance(samplePrompt.prompt);
+						generate(samplePrompt.prompt);
 					},
 					children: [/* @__PURE__ */ jsx("div", {
 						className: "pl-9 grow text-text-secondary dark:text-text-secondary-dark",
@@ -660,7 +887,7 @@ function FormEnhanceAction({ entityId, path, status, collection, formContext, op
 						children: /* @__PURE__ */ jsx(XIcon, { size: iconSize.small })
 					}),
 					/* @__PURE__ */ jsxs(IconButton, {
-						onClick: () => enhance(instructions),
+						onClick: () => generate(instructions),
 						size: "small",
 						color: !instructions ? "primary" : void 0,
 						disabled: loading || !instructions,
@@ -669,7 +896,7 @@ function FormEnhanceAction({ entityId, path, status, collection, formContext, op
 				]
 			})
 		]
-	});
+	}), /* @__PURE__ */ jsx(AutofillReviewDialog, {})] });
 }
 function getPromptsForExistingEntities(properties) {
 	const multilineProperties = Object.values(properties).filter((p) => {
@@ -704,15 +931,14 @@ var removeRecentPrompt = (storageKey, prompt) => {
 };
 //#endregion
 //#region src/useDataEnhancementPlugin.tsx
-var DEFAULT_API_KEY = "fcms-U9jdDii0xXWSDC34asfrf54lbkFJBfKfRWcEDEwdc4V5wDWEDF";
 /**
 * Use this hook to initialise the data enhancement plugin.
 * This is likely the only hook you will need to use.
 * @param props
 */
 function useDataEnhancementPlugin(props) {
-	const apiKey = props?.apiKey ?? DEFAULT_API_KEY;
 	const getConfigForPath = props?.getConfigForPath;
+	const endpoint = props?.endpoint;
 	return React.useMemo(() => ({
 		key: "data_enhancement",
 		slots: [{
@@ -724,16 +950,11 @@ function useDataEnhancementPlugin(props) {
 			scope: "form",
 			Component: DataEnhancementControllerProvider,
 			props: {
-				apiKey,
 				getConfigForPath,
-				host: props?.host
+				endpoint
 			}
 		}]
-	}), [
-		apiKey,
-		getConfigForPath,
-		props?.host
-	]);
+	}), [getConfigForPath, endpoint]);
 }
 //#endregion
 export { useDataEnhancementPlugin, useEditorAIController };