Improve chat streaming and harden UI updates

Author: 0xGingi

api-docs.md

@@ -165,7 +165,25 @@ data: {
 }
 ```
 
-4. **`error`** - Sent if an error occurs during generation
+4. **`title_updated`** - Sent when server-side title generation finishes
+
+```
+event: title_updated
+data: {"conversation_id":"conv_abc123","title":"France Capital Question"}
+```
+
+5. **`follow_ups_updated`** - Sent when server-side follow-up suggestions are stored
+
+```
+event: follow_ups_updated
+data: {
+  "conversation_id":"conv_abc123",
+  "message_id":"msg_xyz789",
+  "suggestions":["What is the population of Paris?","What language is spoken there?"]
+}
+```
+
+6. **`error`** - Sent if an error occurs during generation
 
 ```
 event: error
@@ -181,6 +199,7 @@ On an `error`, the server also persists the error on the assistant message (when
 - Messages are still saved to the database, preserving conversation history.
 - Client disconnection is handled gracefully (generation is cancelled).
 - Supports all features of the non-streaming endpoint (web search, MCP tools, reasoning models, etc.).
+- Title generation and follow-up suggestions are produced server-side and streamed back as additional SSE events when available.
 
 **CURL Example**:
 
@@ -1872,6 +1891,7 @@ Get messages for a conversation.
 
 - `conversationId`: (Required) Conversation ID.
 - `public`: Set to `"true"` for public conversations.
+- `limit`: Optional positive integer. Returns only the most recent `limit` messages in ascending order.
 
 **Response**:
 
@@ -1896,7 +1916,7 @@ Get messages for a conversation.
 **CURL Example**:
 
 ```bash
-curl -X GET "http://localhost:3432/api/db/messages?conversationId=conv_abc123" \
+curl -X GET "http://localhost:3432/api/db/messages?conversationId=conv_abc123&limit=121" \
   -b "session_cookie=your_session"
 ```
 

src/lib/cache/cached-query.svelte.ts

@@ -21,6 +21,8 @@ export interface QueryResult<T> {
 	refetch?: () => Promise<void>;
 }
 
+type QueryArgs = Record<string, unknown> | undefined;
+
 const globalCache = new SessionStorageCache('query-cache');
 const inFlightRequests = new Map<string, Promise<unknown>>();
 
@@ -41,8 +43,14 @@ async function dedupedFetch<TResult>(
 	}
 }
 
-type Listener = (key: string) => void;
+type CacheEvent =
+	| { type: 'invalidate'; key: string }
+	| { type: 'update'; key: string };
+
+type Listener = (event: CacheEvent) => void;
 const listeners = new Set<Listener>();
+let pendingEvents: CacheEvent[] = [];
+let cacheFlushScheduled = false;
 
 function subscribeToCacheInvalidation(listener: Listener) {
 	listeners.add(listener);
@@ -51,8 +59,60 @@ function subscribeToCacheInvalidation(listener: Listener) {
 	};
 }
 
+function flushCacheEvents() {
+	cacheFlushScheduled = false;
+	const events = pendingEvents;
+	pendingEvents = [];
+
+	for (const event of events) {
+		listeners.forEach((listener) => listener(event));
+	}
+}
+
+function enqueueCacheEvent(event: CacheEvent) {
+	pendingEvents.push(event);
+
+	if (cacheFlushScheduled) {
+		return;
+	}
+
+	cacheFlushScheduled = true;
+	queueMicrotask(flushCacheEvents);
+}
+
 function notifyInvalidation(key: string) {
-	listeners.forEach((listener) => listener(key));
+	enqueueCacheEvent({ type: 'invalidate', key });
+}
+
+function notifyUpdate(key: string) {
+	enqueueCacheEvent({ type: 'update', key });
+}
+
+function buildQueryKey(queryConfig: QueryConfig, queryArgs: QueryArgs): string {
+	return `${queryConfig.url}:${JSON.stringify(queryArgs || {})}`;
+}
+
+function matchesCacheKey(eventKey: string, currentKey: string): boolean {
+	return eventKey === currentKey || (eventKey.endsWith('*') && currentKey.startsWith(eventKey.slice(0, -1)));
+}
+
+function parseCacheKey(key: string): { url: string; args: QueryArgs } | null {
+	const separatorIndex = key.indexOf(':');
+	if (separatorIndex === -1) {
+		return null;
+	}
+
+	const url = key.slice(0, separatorIndex);
+	const rawArgs = key.slice(separatorIndex + 1);
+
+	try {
+		return {
+			url,
+			args: rawArgs ? (JSON.parse(rawArgs) as QueryArgs) : undefined,
+		};
+	} catch {
+		return null;
+	}
 }
 
 /**
@@ -77,7 +137,7 @@ export function useCachedQuery<TResult>(
 	let isStale = $state(false);
 
 	const getArgs = () => (typeof queryArgs === 'function' ? queryArgs() : queryArgs);
-	const getCacheKey = () => cacheKey || `${queryConfig.url}:${JSON.stringify(getArgs())}`;
+	const getCacheKey = () => cacheKey || buildQueryKey(queryConfig, getArgs());
 	const isEnabled = () => (typeof enabled === 'function' ? enabled() : enabled);
 
 	async function fetchData() {
@@ -161,9 +221,22 @@ export function useCachedQuery<TResult>(
 
 	// Subscribe to cache invalidations
 	$effect(() => {
-		const unsubscribe = subscribeToCacheInvalidation((key) => {
+		const unsubscribe = subscribeToCacheInvalidation((event) => {
 			const currentKey = getCacheKey();
-			if (key === currentKey || (key.endsWith('*') && currentKey.startsWith(key.slice(0, -1)))) {
+			if (!matchesCacheKey(event.key, currentKey)) {
+				return;
+			}
+
+			if (event.type === 'update') {
+				const cached = globalCache.get(currentKey);
+				data = cached as TResult | undefined;
+				error = undefined;
+				isLoading = false;
+				isStale = false;
+				return;
+			}
+
+			if (event.type === 'invalidate') {
 				fetchData();
 			}
 		});
@@ -304,11 +377,62 @@ export const api = {
 } as const;
 
 export function invalidateQuery(query: QueryConfig, queryArgs?: unknown): void {
-	const key = `${query.url}:${JSON.stringify(queryArgs || {})}`;
+	const key = buildQueryKey(query, (queryArgs as QueryArgs) ?? undefined);
 	globalCache.delete(key);
 	notifyInvalidation(key);
 }
 
+export function setCachedQueryData<TResult>(
+	query: QueryConfig,
+	queryArgs: QueryArgs,
+	updater: TResult | ((current: TResult | undefined) => TResult | undefined),
+	options: { ttl?: number } = {}
+): void {
+	const key = buildQueryKey(query, queryArgs);
+	const current = globalCache.get(key) as TResult | undefined;
+	const next =
+		typeof updater === 'function'
+			? (updater as (current: TResult | undefined) => TResult | undefined)(current)
+			: updater;
+
+	if (next === undefined) {
+		globalCache.delete(key);
+	} else {
+		globalCache.set(key, next, options.ttl);
+	}
+
+	notifyUpdate(key);
+}
+
+export function setCachedQueryDataMatching<TResult>(
+	matcher: (entry: { key: string; url: string; args: QueryArgs }) => boolean,
+	updater: (current: TResult | undefined, entry: { key: string; url: string; args: QueryArgs }) => TResult | undefined,
+	options: { ttl?: number } = {}
+): void {
+	for (const key of globalCache.keys()) {
+		const parsed = parseCacheKey(key);
+		if (!parsed) {
+			continue;
+		}
+
+		const entry = { key, url: parsed.url, args: parsed.args };
+		if (!matcher(entry)) {
+			continue;
+		}
+
+		const current = globalCache.get(key) as TResult | undefined;
+		const next = updater(current, entry);
+
+		if (next === undefined) {
+			globalCache.delete(key);
+		} else {
+			globalCache.set(key, next, options.ttl);
+		}
+
+		notifyUpdate(key);
+	}
+}
+
 export function invalidateQueryPattern(urlPrefix: string): void {
 	const keys = Array.from(globalCache.keys());
 	for (const key of keys) {

src/lib/components/app-sidebar.svelte

@@ -140,40 +140,18 @@
 	const projectsQuery = useCachedQuery<Project[]>(api.projects.list, {
 		cache_scope: session.current?.user.id ?? 'anonymous',
 	});
+	const safeProjects = $derived(Array.isArray(projectsQuery.data) ? projectsQuery.data : []);
+	const safeConversations = $derived(
+		Array.isArray(conversationsQuery.data) ? conversationsQuery.data : []
+	);
 
 	let expandedProjects = $state<Record<string, boolean>>({});
 
 	function toggleProject(projectId: string) {
 		expandedProjects[projectId] = !expandedProjects[projectId];
 	}
 
-	// Track previous generating state to detect when generation completes
-	let wasGenerating = $state(false);
-	const hasGeneratingConversation = $derived(
-		conversationsQuery.data?.some((c) => c.generating) ?? false
-	);
-
-	// Poll for updates while a conversation is generating (to catch title updates)
-	// and do a final refresh when generation completes
-	$effect(() => {
-		if (hasGeneratingConversation) {
-			wasGenerating = true;
-			// Poll every 3 seconds while generating to catch title updates
-			const interval = setInterval(() => {
-				invalidateQueryPattern(api.conversations.get.url);
-			}, 3000);
-			return () => clearInterval(interval);
-		} else if (wasGenerating) {
-			// Generation just completed, do a final refresh to catch the title
-			wasGenerating = false;
-			// Small delay to ensure title generation has completed
-			setTimeout(() => {
-				invalidateQueryPattern(api.conversations.get.url);
-			}, 1000);
-		}
-	});
-
-	function groupConversationsByTime(conversations: Doc<'conversations'>[]) {
+		function groupConversationsByTime(conversations: Doc<'conversations'>[]) {
 		const now = Date.now();
 		const oneDay = 24 * 60 * 60 * 1000;
 		const sevenDays = 7 * oneDay;
@@ -225,7 +203,7 @@
 		return groups;
 	}
 
-	const groupedConversations = $derived(groupConversationsByTime(conversationsQuery.data ?? []));
+	const groupedConversations = $derived(groupConversationsByTime(safeConversations));
 
 	const templateConversations = $derived([
 		{ key: 'pinned', label: 'Pinned', conversations: groupedConversations.pinned, icon: PinIcon },
@@ -235,6 +213,18 @@
 		{ key: 'lastMonth', label: 'Last 30 days', conversations: groupedConversations.lastMonth },
 		{ key: 'older', label: 'Older', conversations: groupedConversations.older },
 	]);
+	const userInitials = $derived.by(() => {
+		const userName = page.data.session?.user?.name;
+		if (typeof userName !== 'string' || userName.trim().length === 0) {
+			return '';
+		}
+
+		return userName
+			.split(' ')
+			.filter(Boolean)
+			.map((name) => name[0]?.toUpperCase() ?? '')
+			.join('');
+	});
 </script>
 
 <Sidebar.Sidebar class="flex flex-col overflow-clip p-2">
@@ -323,15 +313,14 @@
 		<div class="flex flex-col gap-0.5">
 			{#if projectsQuery.isLoading}
 				<div class="text-muted-foreground px-2 py-1 text-xs">Loading...</div>
-			{:else if !projectsQuery.data || projectsQuery.data.length === 0}
+			{:else if safeProjects.length === 0}
 				<div class="text-muted-foreground px-2 py-1 text-xs italic">
 					No projects. Create one above.
 				</div>
 			{:else}
-				{#each projectsQuery.data as project (project.id)}
+				{#each safeProjects as project (project.id)}
 					{@const isExpanded = expandedProjects[project.id]}
-					{@const projectConversations =
-						conversationsQuery.data?.filter((c) => c.projectId === project.id) ?? []}
+					{@const projectConversations = safeConversations.filter((c) => c.projectId === project.id)}
 
 					<div class="flex flex-col">
 						<div class="group/project flex w-full items-center gap-1">
@@ -408,8 +397,8 @@
 														>
 															Remove from project
 														</DropdownMenu.Item>
-														{#if projectsQuery.data && projectsQuery.data.length > 0}
-															{#each projectsQuery.data as project (project.id)}
+														{#if safeProjects.length > 0}
+															{#each safeProjects as project (project.id)}
 																<DropdownMenu.Item
 																	disabled={conversation.projectId === project.id}
 																	onclick={() => setConversationProject(conversation.id, project.id)}
@@ -623,8 +612,8 @@
 											>
 												Remove from project
 											</DropdownMenu.Item>
-											{#if projectsQuery.data && projectsQuery.data.length > 0}
-												{#each projectsQuery.data as project (project.id)}
+											{#if safeProjects.length > 0}
+												{#each safeProjects as project (project.id)}
 													<DropdownMenu.Item
 														disabled={conversation.projectId === project.id}
 														onclick={() => setConversationProject(conversation.id, project.id)}
@@ -696,10 +685,7 @@
 								}
 							)}
 						>
-							{page.data.session?.user.name
-								.split(' ')
-								.map((name: string) => name[0]?.toUpperCase())
-								.join('')}
+							{userInitials}
 						</span>
 					{/snippet}
 				</Avatar>