feat(conversations): opt-in browser-storage mode for conversations

Add an optional mode where conversations are stored in IndexedDB on the
user's device instead of MongoDB. Gated by a new env var
PUBLIC_ENABLE_LOCAL_CONVERSATIONS (default false) and a user setting
useLocalConversations — production behavior is unchanged unless both
are enabled.

When the user opts in, the homepage routes new chats to /local/<uuid>,
backed by IndexedDB on the client and a new stateless streaming endpoint
POST /api/v2/chat/stream on the server. The existing /conversation/[id]
flow and persistence layer are untouched.

https://claude.ai/code/session_01GSjF6LBivXS8ZryKsWDzjc

Author: claude

.env

@@ -28,6 +28,9 @@ PUBLIC_SHARE_PREFIX=
 PUBLIC_GOOGLE_ANALYTICS_ID=
 PUBLIC_PLAUSIBLE_SCRIPT_URL=
 PUBLIC_APPLE_APP_ID=
+# Opt-in feature: expose a user setting to store conversations in the browser
+# (IndexedDB) instead of the server. Default off — production behavior unchanged.
+PUBLIC_ENABLE_LOCAL_CONVERSATIONS=false
 
 COUPLE_SESSION_WITH_COOKIE_NAME=
 # when OPEN_ID is configured, users are required to login after the welcome modal

src/lib/components/NavConversationItem.svelte

@@ -22,6 +22,14 @@
 
 	let { conv, readOnly, ondeleteConversation, oneditConversationTitle }: Props = $props();
 
+	// Conversations stored in IndexedDB use a "local:<uuid>" id and live at
+	// /local/<uuid> instead of /conversation/<id>.
+	const idStr = $derived(conv.id.toString());
+	const isLocal = $derived(idStr.startsWith("local:"));
+	const routeId = $derived(isLocal ? idStr.slice("local:".length) : idStr);
+	const href = $derived(isLocal ? `${base}/local/${routeId}` : `${base}/conversation/${routeId}`);
+	const isActive = $derived(routeId === page.params.id);
+
 	let deleteOpen = $state(false);
 	let renameOpen = $state(false);
 	let isMenuOpen = $state(false);
@@ -57,7 +65,7 @@
 
 <div
 	class="group flex h-8 flex-none items-center gap-1.5 rounded-lg pl-2 pr-1.5 text-base text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 max-sm:h-10 sm:text-sm
-		{conv.id === page.params.id ? 'bg-gray-100 dark:bg-gray-700' : ''}"
+		{isActive ? 'bg-gray-100 dark:bg-gray-700' : ''}"
 >
 	{#if inlineEditing}
 		<input
@@ -81,7 +89,7 @@
 		<a
 			data-sveltekit-noscroll
 			data-sveltekit-preload-data="tap"
-			href="{base}/conversation/{conv.id}"
+			{href}
 			class="min-w-0 flex-1 truncate py-2 first-letter:uppercase"
 			onclick={(e) => {
 				if (e.detail >= 2) {

src/lib/server/api/__tests__/user.spec.ts

@@ -91,6 +91,7 @@ describe("GET /api/v2/user/settings", () => {
 			toolsOverrides: {},
 			hidePromptExamples: {},
 			providerOverrides: {},
+			useLocalConversations: false,
 			welcomeModalSeenAt: new Date("2024-01-01"),
 			createdAt: new Date(),
 			updatedAt: new Date(),

src/lib/stores/localConversations.ts

@@ -0,0 +1,112 @@
+/**
+ * Local Conversations Store
+ *
+ * Stores conversations in IndexedDB on the user's device instead of MongoDB.
+ * Enabled only when the operator sets PUBLIC_ENABLE_LOCAL_CONVERSATIONS=true
+ * AND the user opts in via the `useLocalConversations` setting.
+ *
+ * Shape mirrors `Conversation` but `_id` is a string uuid (no MongoDB ObjectId).
+ */
+
+import { writable } from "svelte/store";
+import { browser } from "$app/environment";
+import { env as publicEnv } from "$env/dynamic/public";
+import { base } from "$app/paths";
+import type { Message } from "$lib/types/Message";
+
+export interface LocalConversation {
+	_id: string;
+	model: string;
+	title: string;
+	rootMessageId?: Message["id"];
+	messages: Message[];
+	preprompt?: string;
+	createdAt: Date;
+	updatedAt: Date;
+}
+
+function toKeyPart(s: string | undefined): string {
+	return (s || "").toLowerCase().replace(/[^a-z0-9_-]+/g, "-");
+}
+
+const appLabel = toKeyPart(publicEnv.PUBLIC_APP_ASSETS || publicEnv.PUBLIC_APP_NAME);
+const baseLabel = toKeyPart(typeof base === "string" ? base : "");
+const DB_NAME = `${appLabel || baseLabel || "app"}:local-conversations`;
+const STORE_NAME = "conversations";
+const DB_VERSION = 1;
+
+let dbPromise: Promise<IDBDatabase> | null = null;
+
+function openDB(): Promise<IDBDatabase> {
+	if (!browser) return Promise.reject(new Error("IndexedDB only available in browser"));
+	if (dbPromise) return dbPromise;
+	dbPromise = new Promise((resolve, reject) => {
+		const req = indexedDB.open(DB_NAME, DB_VERSION);
+		req.onupgradeneeded = () => {
+			const db = req.result;
+			if (!db.objectStoreNames.contains(STORE_NAME)) {
+				db.createObjectStore(STORE_NAME, { keyPath: "_id" });
+			}
+		};
+		req.onsuccess = () => resolve(req.result);
+		req.onerror = () => reject(req.error);
+	});
+	return dbPromise;
+}
+
+async function tx<T>(
+	mode: IDBTransactionMode,
+	fn: (store: IDBObjectStore) => IDBRequest<T>
+): Promise<T> {
+	const db = await openDB();
+	return new Promise((resolve, reject) => {
+		const transaction = db.transaction(STORE_NAME, mode);
+		const store = transaction.objectStore(STORE_NAME);
+		const req = fn(store);
+		req.onsuccess = () => resolve(req.result);
+		req.onerror = () => reject(req.error);
+	});
+}
+
+/** Reactive store of local conversations, sorted by updatedAt descending. */
+export const localConversations = writable<LocalConversation[]>([]);
+
+async function refreshStore() {
+	if (!browser) return;
+	try {
+		const all = await list();
+		localConversations.set(all);
+	} catch (err) {
+		console.error("Failed to load local conversations:", err);
+	}
+}
+
+export async function list(): Promise<LocalConversation[]> {
+	const all = await tx<LocalConversation[]>("readonly", (store) => store.getAll());
+	return all.sort((a, b) => b.updatedAt.getTime() - a.updatedAt.getTime());
+}
+
+export async function get(id: string): Promise<LocalConversation | undefined> {
+	const result = await tx<LocalConversation | undefined>("readonly", (store) => store.get(id));
+	return result;
+}
+
+export async function put(conv: LocalConversation): Promise<void> {
+	await tx("readwrite", (store) => store.put(conv));
+	await refreshStore();
+}
+
+export async function remove(id: string): Promise<void> {
+	await tx("readwrite", (store) => store.delete(id));
+	await refreshStore();
+}
+
+export async function clear(): Promise<void> {
+	await tx("readwrite", (store) => store.clear());
+	await refreshStore();
+}
+
+// Initialize the reactive store on module load (browser only).
+if (browser) {
+	refreshStore();
+}

src/lib/stores/settings.ts

@@ -24,6 +24,7 @@ type SettingsStore = {
 	directPaste: boolean;
 	hapticsEnabled: boolean;
 	billingOrganization?: string;
+	useLocalConversations: boolean;
 };
 
 type SettingsStoreWritable = Writable<SettingsStore> & {

src/lib/types/Settings.ts

@@ -80,6 +80,13 @@ export interface Settings extends Timestamps {
 	 * Stores the org's preferred_username. If empty/undefined, bills to personal account.
 	 */
 	billingOrganization?: string;
+
+	/**
+	 * When enabled, new conversations are stored in the browser (IndexedDB)
+	 * instead of the server. Only effective if the operator has enabled the
+	 * feature via PUBLIC_ENABLE_LOCAL_CONVERSATIONS.
+	 */
+	useLocalConversations: boolean;
 }
 
 export type SettingsEditable = Omit<Settings, "welcomeModalSeenAt" | "createdAt" | "updatedAt">;
@@ -98,4 +105,5 @@ export const DEFAULT_SETTINGS = {
 	streamingMode: "smooth",
 	directPaste: false,
 	hapticsEnabled: true,
+	useLocalConversations: false,
 } satisfies SettingsEditable;

src/lib/utils/messageUpdates.ts

@@ -26,6 +26,17 @@ type MessageUpdateRequestOptions = {
 	// User's IANA timezone (e.g. "America/New_York")
 	timezone?: string;
 	streamingMode?: StreamingMode;
+	/**
+	 * When set, POST a JSON body to `${base}${statelessEndpoint}` instead of
+	 * the default form-data POST to `${base}/conversation/${conversationId}`.
+	 * Used by the local-conversations mode which sends full history per request.
+	 */
+	statelessEndpoint?: string;
+	statelessRequest?: {
+		model: string;
+		messages: Array<{ from: "user" | "assistant" | "system"; content: string }>;
+		preprompt?: string;
+	};
 };
 
 type ChunkDetector = (buffer: string) => string | null;
@@ -50,32 +61,47 @@ export async function fetchMessageUpdates(
 	const abortController = new AbortController();
 	abortSignal.addEventListener("abort", () => abortController.abort());
 
-	const form = new FormData();
-
-	const optsJSON = JSON.stringify({
-		inputs: opts.inputs,
-		id: opts.messageId,
-		is_retry: opts.isRetry,
-		is_continue: Boolean(opts.isContinue),
-		// Will be ignored server-side if unsupported
-		selectedMcpServerNames: opts.selectedMcpServerNames,
-		selectedMcpServers: opts.selectedMcpServers,
-		timezone: opts.timezone,
-	});
+	let response: Response;
+	if (opts.statelessEndpoint && opts.statelessRequest) {
+		response = await fetch(`${opts.base}${opts.statelessEndpoint}`, {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({
+				...opts.statelessRequest,
+				selectedMcpServerNames: opts.selectedMcpServerNames,
+				selectedMcpServers: opts.selectedMcpServers,
+				timezone: opts.timezone,
+			}),
+			signal: abortController.signal,
+		});
+	} else {
+		const form = new FormData();
+
+		const optsJSON = JSON.stringify({
+			inputs: opts.inputs,
+			id: opts.messageId,
+			is_retry: opts.isRetry,
+			is_continue: Boolean(opts.isContinue),
+			// Will be ignored server-side if unsupported
+			selectedMcpServerNames: opts.selectedMcpServerNames,
+			selectedMcpServers: opts.selectedMcpServers,
+			timezone: opts.timezone,
+		});
 
-	opts.files?.forEach((file) => {
-		const name = file.type + ";" + file.name;
+		opts.files?.forEach((file) => {
+			const name = file.type + ";" + file.name;
 
-		form.append("files", new File([file.value], name, { type: file.mime }));
-	});
+			form.append("files", new File([file.value], name, { type: file.mime }));
+		});
 
-	form.append("data", optsJSON);
+		form.append("data", optsJSON);
 
-	const response = await fetch(`${opts.base}/conversation/${conversationId}`, {
-		method: "POST",
-		body: form,
-		signal: abortController.signal,
-	});
+		response = await fetch(`${opts.base}/conversation/${conversationId}`, {
+			method: "POST",
+			body: form,
+			signal: abortController.signal,
+		});
+	}
 
 	if (!response.ok) {
 		const errorMessage = await response

src/routes/+layout.svelte

@@ -10,6 +10,8 @@
 	import { createSettingsStore } from "$lib/stores/settings";
 	import { loading } from "$lib/stores/loading";
 	import { setHapticsEnabled } from "$lib/utils/haptics";
+	import { localConversations, remove as removeLocalConv } from "$lib/stores/localConversations";
+	import type { ConvSidebar } from "$lib/types/ConvSidebar";
 
 	import Toast from "$lib/components/Toast.svelte";
 	import NavMenu from "$lib/components/NavMenu.svelte";
@@ -33,9 +35,27 @@
 	const publicConfig = data.publicConfig;
 	const client = useAPIClient();
 
-	let conversations = $state(data.conversations);
+	let serverConversations = $state(data.conversations);
 	$effect(() => {
-		data.conversations && untrack(() => (conversations = data.conversations));
+		data.conversations && untrack(() => (serverConversations = data.conversations));
+	});
+
+	let localModeEnabled = $derived(
+		publicConfig.PUBLIC_ENABLE_LOCAL_CONVERSATIONS === "true" &&
+			Boolean(data.settings?.useLocalConversations)
+	);
+
+	let conversations = $derived.by<ConvSidebar[]>(() => {
+		if (!localModeEnabled) return serverConversations;
+		const local: ConvSidebar[] = $localConversations.map((c) => ({
+			id: `local:${c._id}`,
+			title: c.title,
+			model: c.model,
+			updatedAt: c.updatedAt,
+		}));
+		return [...local, ...serverConversations].sort(
+			(a, b) => b.updatedAt.getTime() - a.updatedAt.getTime()
+		);
 	});
 
 	let isNavCollapsed = $state(false);
@@ -66,12 +86,25 @@
 	);
 
 	async function deleteConversation(id: string) {
+		if (typeof id === "string" && id.startsWith("local:")) {
+			const localId = id.slice("local:".length);
+			try {
+				await removeLocalConv(localId);
+				if (page.params.id === localId) {
+					await goto(`${base}/`, { invalidateAll: true });
+				}
+			} catch (err) {
+				console.error(err);
+				$error = String(err);
+			}
+			return;
+		}
 		client
 			.conversations({ id })
 			.delete()
 			.then(handleResponse)
 			.then(async () => {
-				conversations = conversations.filter((conv) => conv.id !== id);
+				serverConversations = serverConversations.filter((conv) => conv.id !== id);
 
 				if (page.params.id === id) {
 					await goto(`${base}/`, { invalidateAll: true });
@@ -84,12 +117,18 @@
 	}
 
 	async function editConversationTitle(id: string, title: string) {
+		if (typeof id === "string" && id.startsWith("local:")) {
+			// Editing titles of local conversations is not supported in v1.
+			return;
+		}
 		client
 			.conversations({ id })
 			.patch({ title })
 			.then(handleResponse)
 			.then(async () => {
-				conversations = conversations.map((conv) => (conv.id === id ? { ...conv, title } : conv));
+				serverConversations = serverConversations.map((conv) =>
+					conv.id === id ? { ...conv, title } : conv
+				);
 			})
 			.catch((err) => {
 				console.error(err);
@@ -112,10 +151,13 @@
 
 	$effect(() => {
 		if ($titleUpdate) {
-			const convIdx = conversations.findIndex(({ id }) => id === $titleUpdate?.convId);
+			// Local convs sync their title through the localConversations store, so
+			// only mutate serverConversations here.
+			const convIdx = serverConversations.findIndex(({ id }) => id === $titleUpdate?.convId);
 
 			if (convIdx != -1) {
-				conversations[convIdx].title = $titleUpdate?.title ?? conversations[convIdx].title;
+				serverConversations[convIdx].title =
+					$titleUpdate?.title ?? serverConversations[convIdx].title;
 			}
 
 			$titleUpdate = null;

src/routes/+layout.ts

@@ -37,6 +37,7 @@ interface SettingsResponse {
 	reasoningEffortOverrides: Record<string, "low" | "medium" | "high">;
 	reasoningOverrides: Record<string, boolean>;
 	billingOrganization?: string;
+	useLocalConversations: boolean;
 }
 
 export const load = async ({ depends, fetch, url }) => {