diff --git a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessages.svelte b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessages.svelte
index 4042afdcb8..020873dc6e 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessages.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessages.svelte
@@ -2,15 +2,14 @@
 	import { ChatMessage } from '$lib/components/app';
 	import { DatabaseService } from '$lib/services/database';
 	import {
-		activeConversation,
 		continueAssistantMessage,
 		deleteMessage,
 		editAssistantMessage,
 		editMessageWithBranching,
 		editUserMessagePreserveResponses,
-		navigateToSibling,
 		regenerateMessageWithBranching
 	} from '$lib/stores/chat.svelte';
+	import { activeConversation, navigateToSibling } from '$lib/stores/conversations.svelte';
 	import { getMessageSiblings } from '$lib/utils/branching';
 
 	interface Props {
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte b/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte
index 175730a349..3c8df964ae 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte
@@ -19,15 +19,17 @@
 		INITIAL_SCROLL_DELAY
 	} from '$lib/constants/auto-scroll';
 	import {
-		activeMessages,
-		activeConversation,
-		deleteConversation,
 		dismissErrorDialog,
 		errorDialog,
 		isLoading,
 		sendMessage,
 		stopGeneration
 	} from '$lib/stores/chat.svelte';
+	import {
+		activeMessages,
+		activeConversation,
+		deleteConversation
+	} from '$lib/stores/conversations.svelte';
 	import { config } from '$lib/stores/settings.svelte';
 	import {
 		supportsVision,
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreenProcessingInfo.svelte b/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreenProcessingInfo.svelte
index ecab2321b6..28f1356f28 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreenProcessingInfo.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreenProcessingInfo.svelte
@@ -2,7 +2,8 @@
 	import { PROCESSING_INFO_TIMEOUT } from '$lib/constants/processing-info';
 	import { useProcessingState } from '$lib/hooks/use-processing-state.svelte';
 	import { slotsService } from '$lib/services/slots';
-	import { isLoading, activeMessages, activeConversation } from '$lib/stores/chat.svelte';
+	import { isLoading } from '$lib/stores/chat.svelte';
+	import { activeMessages, activeConversation } from '$lib/stores/conversations.svelte';
 	import { config } from '$lib/stores/settings.svelte';
 
 	const processingState = useProcessingState();
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettingsImportExportTab.svelte b/tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettingsImportExportTab.svelte
index d92a53684f..14c9faea2d 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettingsImportExportTab.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettingsImportExportTab.svelte
@@ -5,7 +5,7 @@
 	import { DatabaseService } from '$lib/services/database';
 	import type { ExportedConversations } from '$lib/types/database';
 	import { createMessageCountMap } from '$lib/utils/conversation-utils';
-	import { chatStore } from '$lib/stores/chat.svelte';
+	import { conversationsStore } from '$lib/stores/conversations.svelte';
 
 	let exportedConversations = $state<DatabaseConversation[]>([]);
 	let importedConversations = $state<DatabaseConversation[]>([]);
@@ -138,7 +138,7 @@
 
 			await DatabaseService.importConversations(selectedData);
 
-			await chatStore.loadConversations();
+			await conversationsStore.loadConversations();
 
 			importedConversations = selectedConversations;
 			showImportSummary = true;
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatSidebar/ChatSidebar.svelte b/tools/server/webui/src/lib/components/app/chat/ChatSidebar/ChatSidebar.svelte
index bb3a6c50f3..3f6a699c3f 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatSidebar/ChatSidebar.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatSidebar/ChatSidebar.svelte
@@ -11,7 +11,7 @@
 		conversations,
 		deleteConversation,
 		updateConversationName
-	} from '$lib/stores/chat.svelte';
+	} from '$lib/stores/conversations.svelte';
 	import ChatSidebarActions from './ChatSidebarActions.svelte';
 
 	const sidebar = Sidebar.useSidebar();
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatSidebar/ChatSidebarConversationItem.svelte b/tools/server/webui/src/lib/components/app/chat/ChatSidebar/ChatSidebarConversationItem.svelte
index 51692c8cfd..6a05766f4a 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatSidebar/ChatSidebarConversationItem.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatSidebar/ChatSidebarConversationItem.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { Trash2, Pencil, MoreHorizontal, Download, Loader2 } from '@lucide/svelte';
 	import { ActionDropdown } from '$lib/components/app';
-	import { downloadConversation, getAllLoadingConversations } from '$lib/stores/chat.svelte';
+	import { getAllLoadingChats } from '$lib/stores/chat.svelte';
+	import { downloadConversation } from '$lib/stores/conversations.svelte';
 	import { onMount } from 'svelte';
 
 	interface Props {
@@ -25,7 +26,7 @@
 	let renderActionsDropdown = $state(false);
 	let dropdownOpen = $state(false);
 
-	let isLoading = $derived(getAllLoadingConversations().includes(conversation.id));
+	let isLoading = $derived(getAllLoadingChats().includes(conversation.id));
 
 	function handleEdit(event: Event) {
 		event.stopPropagation();
diff --git a/tools/server/webui/src/lib/services/chat.ts b/tools/server/webui/src/lib/services/chat.ts
index fef8c6954f..90b99cf66b 100644
--- a/tools/server/webui/src/lib/services/chat.ts
+++ b/tools/server/webui/src/lib/services/chat.ts
@@ -22,26 +22,32 @@ import type {
 } from '$lib/types/database';
 import type { ChatMessagePromptProgress, ChatMessageTimings } from '$lib/types/chat';
 import type { SettingsChatServiceOptions } from '$lib/types/settings';
+
 /**
- * ChatService - Low-level API communication layer for llama.cpp server interactions
+ * ChatService - Low-level API communication layer for Chat Completions
  *
- * This service handles direct communication with the llama.cpp server's chat completion API.
+ * **Terminology - Chat vs Conversation:**
+ * - **Chat**: The active interaction space with the Chat Completions API. This service
+ *   handles the real-time communication with the AI backend - sending messages, receiving
+ *   streaming responses, and managing request lifecycles. "Chat" is ephemeral and runtime-focused.
+ * - **Conversation**: The persistent database entity storing all messages and metadata.
+ *   Managed by ConversationsService/Store, conversations persist across sessions.
+ *
+ * This service handles direct communication with the llama-server's Chat Completions API.
  * It provides the network layer abstraction for AI model interactions while remaining
  * stateless and focused purely on API communication.
  *
- * **Architecture & Relationship with ChatStore:**
+ * **Architecture & Relationships:**
  * - **ChatService** (this class): Stateless API communication layer
- *   - Handles HTTP requests/responses with llama.cpp server
+ *   - Handles HTTP requests/responses with the llama-server
  *   - Manages streaming and non-streaming response parsing
- *   - Provides request abortion capabilities
+ *   - Provides per-conversation request abortion capabilities
  *   - Converts database messages to API format
  *   - Handles error translation for server responses
  *
- * - **ChatStore**: Stateful orchestration and UI state management
- *   - Uses ChatService for all AI model communication
- *   - Manages conversation state, message history, and UI reactivity
- *   - Coordinates with DatabaseService for persistence
- *   - Handles complex workflows like branching and regeneration
+ * - **ChatStore**: Uses ChatService for all AI model communication
+ * - **SlotsService**: Receives timing data updates during streaming
+ * - **ConversationsStore**: Provides message context for API requests
  *
  * **Key Responsibilities:**
  * - Message format conversion (DatabaseMessage → API format)
@@ -694,7 +700,7 @@ export class ChatService {
 	}
 
 	/**
-	 * Get server properties - static method for API compatibility
+	 * Get server properties - static method for API compatibility (to be refactored)
 	 */
 	static async getServerProps(): Promise<ApiLlamaCppServerProps> {
 		try {
@@ -721,7 +727,7 @@ export class ChatService {
 	}
 
 	/**
-	 * Get model information from /models endpoint
+	 * Get model information from /models endpoint (to be refactored)
 	 */
 	static async getModels(): Promise<ApiModelListResponse> {
 		try {
@@ -753,7 +759,7 @@ export class ChatService {
 	 *
 	 * @public
 	 */
-	public abort(conversationId?: string): void {
+	public abortChatCompletionRequest(conversationId?: string): void {
 		if (conversationId) {
 			const abortController = this.abortControllers.get(conversationId);
 			if (abortController) {
@@ -828,6 +834,14 @@ export class ChatService {
 		}
 	}
 
+	/**
+	 * Extracts model name from Chat Completions API response data.
+	 * Handles various response formats including streaming chunks and final responses.
+	 *
+	 * @param data - Raw response data from the Chat Completions API
+	 * @returns Model name string if found, undefined otherwise
+	 * @private
+	 */
 	private extractModelName(data: unknown): string | undefined {
 		const asRecord = (value: unknown): Record<string, unknown> | undefined => {
 			return typeof value === 'object' && value !== null
@@ -861,6 +875,15 @@ export class ChatService {
 		return undefined;
 	}
 
+	/**
+	 * Updates the processing state in SlotsService with timing data from streaming response.
+	 * Calculates tokens per second and forwards metrics for UI display.
+	 *
+	 * @param timings - Timing information from the Chat Completions API response
+	 * @param promptProgress - Prompt processing progress data
+	 * @param conversationId - Optional conversation ID for per-conversation state tracking
+	 * @private
+	 */
 	private updateProcessingState(
 		timings?: ChatMessageTimings,
 		promptProgress?: ChatMessagePromptProgress,
diff --git a/tools/server/webui/src/lib/services/conversations.ts b/tools/server/webui/src/lib/services/conversations.ts
new file mode 100644
index 0000000000..2784311699
--- /dev/null
+++ b/tools/server/webui/src/lib/services/conversations.ts
@@ -0,0 +1,279 @@
+import { goto } from '$app/navigation';
+import { toast } from 'svelte-sonner';
+import { DatabaseService } from '$lib/services/database';
+import type {
+	DatabaseConversation,
+	DatabaseMessage,
+	ExportedConversations
+} from '$lib/types/database';
+
+/**
+ * ConversationsService - Database operations for persistent conversation management
+ *
+ * **Terminology - Chat vs Conversation:**
+ * - **Chat**: The active interaction space with the Chat Completions API. Represents the
+ *   real-time streaming session and UI visualization. Managed by ChatService/Store.
+ * - **Conversation**: The persistent database entity storing all messages and metadata.
+ *   This service handles all database operations for conversations - they survive across
+ *   sessions, page reloads, and browser restarts. Contains message history, branching
+ *   structure, timestamps, and conversation metadata.
+ *
+ * This service handles all conversation-level database operations including CRUD,
+ * import/export, and navigation. It provides a stateless abstraction layer between
+ * ConversationsStore and DatabaseService.
+ *
+ * **Architecture & Relationships:**
+ * - **ConversationsService** (this class): Stateless database operations layer
+ *   - Handles conversation CRUD operations via DatabaseService
+ *   - Manages import/export with JSON serialization
+ *   - Provides navigation helpers for routing
+ *   - Does not manage reactive UI state
+ *
+ * - **ConversationsStore**: Uses this service for all database operations
+ * - **DatabaseService**: Low-level IndexedDB operations
+ * - **ChatStore**: Indirectly uses conversation data for AI context
+ *
+ * **Key Responsibilities:**
+ * - Conversation CRUD (create, read, update, delete)
+ * - Message retrieval for conversations
+ * - Import/export with file download/upload
+ * - Navigation helpers (goto conversation, new chat)
+ */
+export class ConversationsService {
+	/**
+	 * Creates a new conversation in the database
+	 * @param name - Optional name for the conversation, defaults to timestamped name
+	 * @returns The created conversation
+	 */
+	async createConversation(name?: string): Promise<DatabaseConversation> {
+		const conversationName = name || `Chat ${new Date().toLocaleString()}`;
+		return await DatabaseService.createConversation(conversationName);
+	}
+
+	/**
+	 * Loads all conversations from the database
+	 * @returns Array of all conversations
+	 */
+	async loadAllConversations(): Promise<DatabaseConversation[]> {
+		return await DatabaseService.getAllConversations();
+	}
+
+	/**
+	 * Loads a specific conversation by ID
+	 * @param convId - The conversation ID to load
+	 * @returns The conversation or null if not found
+	 */
+	async loadConversation(convId: string): Promise<DatabaseConversation | null> {
+		return await DatabaseService.getConversation(convId);
+	}
+
+	/**
+	 * Gets all messages for a conversation
+	 * @param convId - The conversation ID
+	 * @returns Array of messages in the conversation
+	 */
+	async getConversationMessages(convId: string): Promise<DatabaseMessage[]> {
+		return await DatabaseService.getConversationMessages(convId);
+	}
+
+	/**
+	 * Updates the name of a conversation
+	 * @param convId - The conversation ID to update
+	 * @param name - The new name for the conversation
+	 */
+	async updateConversationName(convId: string, name: string): Promise<void> {
+		await DatabaseService.updateConversation(convId, { name });
+	}
+
+	/**
+	 * Updates the current node (currNode) of a conversation
+	 * @param convId - The conversation ID to update
+	 * @param nodeId - The new current node ID
+	 */
+	async updateCurrentNode(convId: string, nodeId: string): Promise<void> {
+		await DatabaseService.updateCurrentNode(convId, nodeId);
+	}
+
+	/**
+	 * Updates the lastModified timestamp of a conversation
+	 * @param convId - The conversation ID to update
+	 */
+	async updateTimestamp(convId: string): Promise<void> {
+		await DatabaseService.updateConversation(convId, { lastModified: Date.now() });
+	}
+
+	/**
+	 * Deletes a conversation and all its messages
+	 * @param convId - The conversation ID to delete
+	 */
+	async deleteConversation(convId: string): Promise<void> {
+		await DatabaseService.deleteConversation(convId);
+	}
+
+	/**
+	 * Downloads a conversation as JSON file
+	 * @param conversation - The conversation to download
+	 * @param messages - The messages in the conversation
+	 */
+	downloadConversation(conversation: DatabaseConversation, messages: DatabaseMessage[]): void {
+		const conversationData: ExportedConversations = {
+			conv: conversation,
+			messages
+		};
+
+		this.triggerDownload(conversationData);
+	}
+
+	/**
+	 * Exports all conversations with their messages as a JSON file
+	 * @returns The list of exported conversations
+	 */
+	async exportAllConversations(): Promise<DatabaseConversation[]> {
+		const allConversations = await DatabaseService.getAllConversations();
+
+		if (allConversations.length === 0) {
+			throw new Error('No conversations to export');
+		}
+
+		const allData: ExportedConversations = await Promise.all(
+			allConversations.map(async (conv) => {
+				const messages = await DatabaseService.getConversationMessages(conv.id);
+				return { conv, messages };
+			})
+		);
+
+		const blob = new Blob([JSON.stringify(allData, null, 2)], {
+			type: 'application/json'
+		});
+		const url = URL.createObjectURL(blob);
+		const a = document.createElement('a');
+		a.href = url;
+		a.download = `all_conversations_${new Date().toISOString().split('T')[0]}.json`;
+		document.body.appendChild(a);
+		a.click();
+		document.body.removeChild(a);
+		URL.revokeObjectURL(url);
+
+		toast.success(`All conversations (${allConversations.length}) prepared for download`);
+
+		return allConversations;
+	}
+
+	/**
+	 * Imports conversations from a JSON file
+	 * Opens file picker and processes the selected file
+	 * @returns Promise resolving to the list of imported conversations
+	 */
+	async importConversations(): Promise<DatabaseConversation[]> {
+		return new Promise((resolve, reject) => {
+			const input = document.createElement('input');
+			input.type = 'file';
+			input.accept = '.json';
+
+			input.onchange = async (e) => {
+				const file = (e.target as HTMLInputElement)?.files?.[0];
+
+				if (!file) {
+					reject(new Error('No file selected'));
+					return;
+				}
+
+				try {
+					const text = await file.text();
+					const parsedData = JSON.parse(text);
+					let importedData: ExportedConversations;
+
+					if (Array.isArray(parsedData)) {
+						importedData = parsedData;
+					} else if (
+						parsedData &&
+						typeof parsedData === 'object' &&
+						'conv' in parsedData &&
+						'messages' in parsedData
+					) {
+						// Single conversation object
+						importedData = [parsedData];
+					} else {
+						throw new Error(
+							'Invalid file format: expected array of conversations or single conversation object'
+						);
+					}
+
+					const result = await DatabaseService.importConversations(importedData);
+
+					toast.success(`Imported ${result.imported} conversation(s), skipped ${result.skipped}`);
+
+					// Extract the conversation objects from imported data
+					const importedConversations = (
+						Array.isArray(importedData) ? importedData : [importedData]
+					).map((item) => item.conv);
+
+					resolve(importedConversations);
+				} catch (err: unknown) {
+					const message = err instanceof Error ? err.message : 'Unknown error';
+					console.error('Failed to import conversations:', err);
+					toast.error('Import failed', {
+						description: message
+					});
+					reject(new Error(`Import failed: ${message}`));
+				}
+			};
+
+			input.click();
+		});
+	}
+
+	/**
+	 * Navigates to a specific conversation route
+	 * @param convId - The conversation ID to navigate to
+	 */
+	async navigateToConversation(convId: string): Promise<void> {
+		await goto(`#/chat/${convId}`);
+	}
+
+	/**
+	 * Navigates to new chat route
+	 */
+	async navigateToNewChat(): Promise<void> {
+		await goto(`?new_chat=true#/`);
+	}
+
+	/**
+	 * Triggers file download in browser
+	 * @param data - Data to download
+	 * @param filename - Optional filename
+	 */
+	private triggerDownload(data: ExportedConversations, filename?: string): void {
+		const conversation =
+			'conv' in data ? data.conv : Array.isArray(data) ? data[0]?.conv : undefined;
+
+		if (!conversation) {
+			console.error('Invalid data: missing conversation');
+			return;
+		}
+
+		const conversationName = conversation.name ? conversation.name.trim() : '';
+		const convId = conversation.id || 'unknown';
+		const truncatedSuffix = conversationName
+			.toLowerCase()
+			.replace(/[^a-z0-9]/gi, '_')
+			.replace(/_+/g, '_')
+			.substring(0, 20);
+		const downloadFilename = filename || `conversation_${convId}_${truncatedSuffix}.json`;
+
+		const conversationJson = JSON.stringify(data, null, 2);
+		const blob = new Blob([conversationJson], {
+			type: 'application/json'
+		});
+		const url = URL.createObjectURL(blob);
+		const a = document.createElement('a');
+		a.href = url;
+		a.download = downloadFilename;
+		document.body.appendChild(a);
+		a.click();
+		document.body.removeChild(a);
+		URL.revokeObjectURL(url);
+	}
+}
+
+export const conversationsService = new ConversationsService();
diff --git a/tools/server/webui/src/lib/services/database.ts b/tools/server/webui/src/lib/services/database.ts
index eb8dff4ea8..62353a3b95 100644
--- a/tools/server/webui/src/lib/services/database.ts
+++ b/tools/server/webui/src/lib/services/database.ts
@@ -1,5 +1,5 @@
 import Dexie, { type EntityTable } from 'dexie';
-import { filterByLeafNodeId, findDescendantMessages } from '$lib/utils/branching';
+import { findDescendantMessages } from '$lib/utils/branching';
 
 class LlamacppDatabase extends Dexie {
 	conversations!: EntityTable<DatabaseConversation, string>;
@@ -16,61 +16,56 @@ class LlamacppDatabase extends Dexie {
 }
 
 const db = new LlamacppDatabase();
+import { v4 as uuid } from 'uuid';
 
 /**
- * DatabaseService - Persistent data layer for conversation and message management
+ * DatabaseService - Stateless IndexedDB communication layer
  *
- * This service provides a comprehensive data access layer built on IndexedDB using Dexie.
- * It handles all persistent storage operations for conversations, messages, and application settings
- * with support for complex conversation branching and message threading.
+ * **Terminology - Chat vs Conversation:**
+ * - **Chat**: The active interaction space with the Chat Completions API (ephemeral, runtime).
+ * - **Conversation**: The persistent database entity storing all messages and metadata.
+ *   This service handles raw database operations for conversations - the lowest layer
+ *   in the persistence stack.
  *
- * **Architecture & Relationships:**
- * - **DatabaseService** (this class): Stateless data persistence layer
- *   - Manages IndexedDB operations through Dexie ORM
- *   - Handles conversation and message CRUD operations
- *   - Supports complex branching with parent-child relationships
+ * This service provides a stateless data access layer built on IndexedDB using Dexie ORM.
+ * It handles all low-level storage operations for conversations and messages with support
+ * for complex branching and message threading. All methods are static - no instance state.
+ *
+ * **Architecture & Relationships (bottom to top):**
+ * - **DatabaseService** (this class): Stateless IndexedDB operations
+ *   - Lowest layer - direct Dexie/IndexedDB communication
+ *   - Pure CRUD operations without business logic
+ *   - Handles branching tree structure (parent-child relationships)
  *   - Provides transaction safety for multi-table operations
  *
- * - **ChatStore & ConversationsStore**: Primary consumers for state management
- *   - Use DatabaseService for all persistence operations
- *   - Coordinate UI state with database state
- *   - Handle conversation lifecycle and message branching
+ * - **ConversationsService**: Stateless business logic layer
+ *   - Uses DatabaseService for all persistence operations
+ *   - Adds import/export, navigation, and higher-level operations
+ *
+ * - **ConversationsStore**: Reactive state management for conversations
+ *   - Uses ConversationsService for database operations
+ *   - Manages conversation list, active conversation, and messages in memory
+ *
+ * - **ChatStore**: Active AI interaction management
+ *   - Uses ConversationsStore for conversation context
+ *   - Directly uses DatabaseService for message CRUD during streaming
  *
  * **Key Features:**
- * - **Conversation Management**: Create, read, update, delete conversations
- * - **Message Branching**: Support for tree-like conversation structures
+ * - **Conversation CRUD**: Create, read, update, delete conversations
+ * - **Message CRUD**: Add, update, delete messages with branching support
+ * - **Branch Operations**: Create branches, find descendants, cascade deletions
  * - **Transaction Safety**: Atomic operations for data consistency
- * - **Path Resolution**: Navigate conversation branches and find leaf nodes
- * - **Cascading Deletion**: Remove entire conversation branches
  *
  * **Database Schema:**
- * - `conversations`: Conversation metadata with current node tracking
- * - `messages`: Individual messages with parent-child relationships
+ * - `conversations`: id, lastModified, currNode, name
+ * - `messages`: id, convId, type, role, timestamp, parent, children
  *
  * **Branching Model:**
  * Messages form a tree structure where each message can have multiple children,
  * enabling conversation branching and alternative response paths. The conversation's
  * `currNode` tracks the currently active branch endpoint.
  */
-import { v4 as uuid } from 'uuid';
-
 export class DatabaseService {
-	/**
-	 * Adds a new message to the database.
-	 *
-	 * @param message - Message to add (without id)
-	 * @returns The created message
-	 */
-	static async addMessage(message: Omit<DatabaseMessage, 'id'>): Promise<DatabaseMessage> {
-		const newMessage: DatabaseMessage = {
-			...message,
-			id: uuid()
-		};
-
-		await db.messages.add(newMessage);
-		return newMessage;
-	}
-
 	/**
 	 * Creates a new conversation.
 	 *
@@ -255,18 +250,6 @@ export class DatabaseService {
 		return await db.conversations.get(id);
 	}
 
-	/**
-	 * Gets all leaf nodes (messages with no children) in a conversation.
-	 * Useful for finding all possible conversation endpoints.
-	 *
-	 * @param convId - Conversation ID
-	 * @returns Array of leaf node message IDs
-	 */
-	static async getConversationLeafNodes(convId: string): Promise<string[]> {
-		const allMessages = await this.getConversationMessages(convId);
-		return allMessages.filter((msg) => msg.children.length === 0).map((msg) => msg.id);
-	}
-
 	/**
 	 * Gets all messages in a conversation, sorted by timestamp (oldest first).
 	 *
@@ -277,34 +260,6 @@ export class DatabaseService {
 		return await db.messages.where('convId').equals(convId).sortBy('timestamp');
 	}
 
-	/**
-	 * Gets the conversation path from root to the current leaf node.
-	 * Uses the conversation's currNode to determine the active branch.
-	 *
-	 * @param convId - Conversation ID
-	 * @returns Array of messages in the current conversation path
-	 */
-	static async getConversationPath(convId: string): Promise<DatabaseMessage[]> {
-		const conversation = await this.getConversation(convId);
-
-		if (!conversation) {
-			return [];
-		}
-
-		const allMessages = await this.getConversationMessages(convId);
-
-		if (allMessages.length === 0) {
-			return [];
-		}
-
-		// If no currNode is set, use the latest message as leaf
-		const leafNodeId =
-			conversation.currNode ||
-			allMessages.reduce((latest, msg) => (msg.timestamp > latest.timestamp ? msg : latest)).id;
-
-		return filterByLeafNodeId(allMessages, leafNodeId, false) as DatabaseMessage[];
-	}
-
 	/**
 	 * Updates a conversation.
 	 *
diff --git a/tools/server/webui/src/lib/services/index.ts b/tools/server/webui/src/lib/services/index.ts
index fea892e2ab..0b5405ea35 100644
--- a/tools/server/webui/src/lib/services/index.ts
+++ b/tools/server/webui/src/lib/services/index.ts
@@ -1,3 +1,4 @@
 export { chatService } from './chat';
 export { slotsService } from './slots';
 export { PropsService } from './props';
+export { conversationsService } from './conversations';
diff --git a/tools/server/webui/src/lib/services/slots.ts b/tools/server/webui/src/lib/services/slots.ts
index 7dab3df87e..e669acfbe0 100644
--- a/tools/server/webui/src/lib/services/slots.ts
+++ b/tools/server/webui/src/lib/services/slots.ts
@@ -279,8 +279,8 @@ export class SlotsService {
 			return this.lastKnownState;
 		}
 		try {
-			const { chatStore } = await import('$lib/stores/chat.svelte');
-			const messages = chatStore.activeMessages;
+			const { conversationsStore } = await import('$lib/stores/conversations.svelte');
+			const messages = conversationsStore.activeMessages;
 
 			for (let i = messages.length - 1; i >= 0; i--) {
 				const message = messages[i];
diff --git a/tools/server/webui/src/lib/stores/chat.svelte.ts b/tools/server/webui/src/lib/stores/chat.svelte.ts
index 83992a65c8..8580712be3 100644
--- a/tools/server/webui/src/lib/stores/chat.svelte.ts
+++ b/tools/server/webui/src/lib/stores/chat.svelte.ts
@@ -1,562 +1,152 @@
 import { DatabaseService } from '$lib/services/database';
 import { chatService, slotsService } from '$lib/services';
+import { conversationsStore } from '$lib/stores/conversations.svelte';
 import { config } from '$lib/stores/settings.svelte';
 import { normalizeModelName } from '$lib/utils/model-names';
-import { filterByLeafNodeId, findLeafNode, findDescendantMessages } from '$lib/utils/branching';
-import { browser } from '$app/environment';
-import { goto } from '$app/navigation';
-import { toast } from 'svelte-sonner';
+import { filterByLeafNodeId, findDescendantMessages, findLeafNode } from '$lib/utils/branching';
 import { SvelteMap } from 'svelte/reactivity';
-import type { ExportedConversations } from '$lib/types/database';
+import type { ChatMessageTimings, ChatRole, ChatMessageType } from '$lib/types/chat';
+import type { DatabaseMessage, DatabaseMessageExtra } from '$lib/types/database';
 
 /**
- * ChatStore - State management for chat messages and AI interactions
+ * ChatStore - Active AI interaction and streaming state management
  *
- * This store manages message-level operations and AI streaming:
- * - Message management with branching support for conversation trees
- * - Real-time AI response streaming with reasoning content support
- * - File attachment handling and processing
- * - Context error management and recovery
- * - Per-conversation loading and streaming states
- * - Database persistence through DatabaseService integration
+ * **Terminology - Chat vs Conversation:**
+ * - **Chat**: The active interaction space with the Chat Completions API. Represents the
+ *   real-time streaming session, loading states, and UI visualization of AI communication.
+ *   A "chat" is ephemeral - it exists only while the user is actively interacting with the AI.
+ * - **Conversation**: The persistent database entity storing all messages and metadata.
+ *   Managed by ConversationsStore, conversations persist across sessions and page reloads.
+ *
+ * This store manages all active AI interactions including real-time streaming, response
+ * generation, and per-chat loading states. It handles the runtime layer between UI and
+ * AI backend, supporting concurrent streaming across multiple conversations.
  *
  * **Architecture & Relationships:**
- * - **ChatService**: Handles low-level API communication with AI models
- *   - ChatStore orchestrates ChatService for streaming responses
- *   - ChatService provides abort capabilities and error handling
- *   - ChatStore manages the UI state while ChatService handles network layer
+ * - **ChatStore** (this class): Active AI session and streaming management
+ *   - Manages real-time AI response streaming via ChatService
+ *   - Tracks per-chat loading and streaming states for concurrent sessions
+ *   - Handles message operations (send, edit, regenerate, branch)
+ *   - Coordinates with ConversationsStore for persistence
  *
- * - **ConversationsStore**: Manages conversation lifecycle and list
- *   - To be added
- *
- * - **DatabaseService**: Provides persistent storage for messages
- *   - To be added
- *
- * - **SlotsService**: Monitors server resource usage during AI generation
- *   - ChatStore coordinates slots polling during streaming
- *   - Provides real-time feedback on server capacity
+ * - **ConversationsStore**: Provides conversation data and message arrays for chat context
+ * - **ChatService**: Low-level API communication with llama.cpp server
+ * - **SlotsService**: Processing state monitoring during streaming
+ * - **DatabaseService**: Message persistence and retrieval
  *
  * **Key Features:**
- * - Reactive state management using Svelte 5 runes ($state)
- * - Message branching for exploring different response paths
- * - Streaming AI responses with real-time content updates
- * - File attachment support (images, PDFs, text files, audio)
- * - Partial response saving when generation is interrupted
- * - Message editing with automatic response regeneration
- * - Per-conversation loading and streaming state tracking
+ * - **AI Streaming**: Real-time token streaming with abort support
+ * - **Concurrent Chats**: Independent loading/streaming states per conversation
+ * - **Message Branching**: Edit, regenerate, and branch conversation trees
+ * - **Error Handling**: Timeout and server error recovery with user feedback
+ * - **Graceful Stop**: Save partial responses when stopping generation
+ *
+ * **State Management:**
+ * - Global `isLoading` and `currentResponse` for active chat UI
+ * - `chatLoadingStates` Map for per-conversation streaming tracking
+ * - `chatStreamingStates` Map for per-conversation streaming content
+ * - Automatic state sync when switching between conversations
  */
 class ChatStore {
-	activeConversation = $state<DatabaseConversation | null>(null);
-	activeMessages = $state<DatabaseMessage[]>([]);
-	conversations = $state<DatabaseConversation[]>([]);
 	currentResponse = $state('');
 	errorDialogState = $state<{ type: 'timeout' | 'server'; message: string } | null>(null);
-	isInitialized = $state(false);
 	isLoading = $state(false);
-	conversationLoadingStates = new SvelteMap<string, boolean>();
-	conversationStreamingStates = new SvelteMap<string, { response: string; messageId: string }>();
-	titleUpdateConfirmationCallback?: (currentTitle: string, newTitle: string) => Promise<boolean>;
+	chatLoadingStates = new SvelteMap<string, boolean>();
+	chatStreamingStates = new SvelteMap<string, { response: string; messageId: string }>();
 
-	constructor() {
-		if (browser) {
-			this.initialize();
-		}
-	}
+	// ============ API Options ============
 
-	/**
-	 * Initializes the chat store by loading conversations from the database
-	 * Sets up the initial state and loads existing conversations
-	 */
-	async initialize(): Promise<void> {
-		try {
-			await this.loadConversations();
-
-			this.isInitialized = true;
-		} catch (error) {
-			console.error('Failed to initialize chat store:', error);
-		}
-	}
-
-	/**
-	 * Loads all conversations from the database
-	 * Refreshes the conversations list from persistent storage
-	 */
-	async loadConversations(): Promise<void> {
-		this.conversations = await DatabaseService.getAllConversations();
-	}
-
-	/**
-	 * Creates a new conversation and navigates to it
-	 * @param name - Optional name for the conversation, defaults to timestamped name
-	 * @returns The ID of the created conversation
-	 */
-	async createConversation(name?: string): Promise<string> {
-		const conversationName = name || `Chat ${new Date().toLocaleString()}`;
-		const conversation = await DatabaseService.createConversation(conversationName);
-
-		this.conversations.unshift(conversation);
-
-		this.activeConversation = conversation;
-		this.activeMessages = [];
-
-		slotsService.setActiveConversation(conversation.id);
-
-		const isConvLoading = this.isConversationLoading(conversation.id);
-		this.isLoading = isConvLoading;
-
-		this.currentResponse = '';
-
-		await goto(`#/chat/${conversation.id}`);
-
-		return conversation.id;
-	}
-
-	/**
-	 * Loads a specific conversation and its messages
-	 * @param convId - The conversation ID to load
-	 * @returns True if conversation was loaded successfully, false otherwise
-	 */
-	async loadConversation(convId: string): Promise<boolean> {
-		try {
-			const conversation = await DatabaseService.getConversation(convId);
-
-			if (!conversation) {
-				return false;
-			}
-
-			this.activeConversation = conversation;
-
-			slotsService.setActiveConversation(convId);
-
-			const isConvLoading = this.isConversationLoading(convId);
-			this.isLoading = isConvLoading;
-
-			const streamingState = this.getConversationStreaming(convId);
-			this.currentResponse = streamingState?.response || '';
-
-			if (conversation.currNode) {
-				const allMessages = await DatabaseService.getConversationMessages(convId);
-				this.activeMessages = filterByLeafNodeId(
-					allMessages,
-					conversation.currNode,
-					false
-				) as DatabaseMessage[];
-			} else {
-				// Load all messages for conversations without currNode (backward compatibility)
-				this.activeMessages = await DatabaseService.getConversationMessages(convId);
-			}
-
-			return true;
-		} catch (error) {
-			console.error('Failed to load conversation:', error);
-
-			return false;
-		}
-	}
-
-	/**
-	 * Adds a new message to the active conversation
-	 * @param role - The role of the message sender (user/assistant)
-	 * @param content - The message content
-	 * @param type - The message type, defaults to 'text'
-	 * @param parent - Parent message ID, defaults to '-1' for auto-detection
-	 * @param extras - Optional extra data (files, attachments, etc.)
-	 * @returns The created message or null if failed
-	 */
-	async addMessage(
-		role: ChatRole,
-		content: string,
-		type: ChatMessageType = 'text',
-		parent: string = '-1',
-		extras?: DatabaseMessageExtra[]
-	): Promise<DatabaseMessage | null> {
-		if (!this.activeConversation) {
-			console.error('No active conversation when trying to add message');
-			return null;
-		}
-
-		try {
-			let parentId: string | null = null;
-
-			if (parent === '-1') {
-				if (this.activeMessages.length > 0) {
-					parentId = this.activeMessages[this.activeMessages.length - 1].id;
-				} else {
-					const allMessages = await DatabaseService.getConversationMessages(
-						this.activeConversation.id
-					);
-					const rootMessage = allMessages.find((m) => m.parent === null && m.type === 'root');
-
-					if (!rootMessage) {
-						const rootId = await DatabaseService.createRootMessage(this.activeConversation.id);
-						parentId = rootId;
-					} else {
-						parentId = rootMessage.id;
-					}
-				}
-			} else {
-				parentId = parent;
-			}
-
-			const message = await DatabaseService.createMessageBranch(
-				{
-					convId: this.activeConversation.id,
-					role,
-					content,
-					type,
-					timestamp: Date.now(),
-					thinking: '',
-					toolCalls: '',
-					children: [],
-					extra: extras
-				},
-				parentId
-			);
-
-			this.activeMessages.push(message);
-
-			await DatabaseService.updateCurrentNode(this.activeConversation.id, message.id);
-			this.activeConversation.currNode = message.id;
-
-			this.updateConversationTimestamp();
-
-			return message;
-		} catch (error) {
-			console.error('Failed to add message:', error);
-			return null;
-		}
-	}
-
-	/**
-	 * Gets API options from current configuration settings
-	 * Converts settings store values to API-compatible format
-	 * @returns API options object for chat completion requests
-	 */
 	private getApiOptions(): Record<string, unknown> {
 		const currentConfig = config();
 		const hasValue = (value: unknown): boolean =>
 			value !== undefined && value !== null && value !== '';
 
-		const apiOptions: Record<string, unknown> = {
-			stream: true,
-			timings_per_token: true
-		};
+		const apiOptions: Record<string, unknown> = { stream: true, timings_per_token: true };
 
-		if (hasValue(currentConfig.temperature)) {
+		if (hasValue(currentConfig.temperature))
 			apiOptions.temperature = Number(currentConfig.temperature);
-		}
-		if (hasValue(currentConfig.max_tokens)) {
+		if (hasValue(currentConfig.max_tokens))
 			apiOptions.max_tokens = Number(currentConfig.max_tokens);
-		}
-		if (hasValue(currentConfig.dynatemp_range)) {
+		if (hasValue(currentConfig.dynatemp_range))
 			apiOptions.dynatemp_range = Number(currentConfig.dynatemp_range);
-		}
-		if (hasValue(currentConfig.dynatemp_exponent)) {
+		if (hasValue(currentConfig.dynatemp_exponent))
 			apiOptions.dynatemp_exponent = Number(currentConfig.dynatemp_exponent);
-		}
-		if (hasValue(currentConfig.top_k)) {
-			apiOptions.top_k = Number(currentConfig.top_k);
-		}
-		if (hasValue(currentConfig.top_p)) {
-			apiOptions.top_p = Number(currentConfig.top_p);
-		}
-		if (hasValue(currentConfig.min_p)) {
-			apiOptions.min_p = Number(currentConfig.min_p);
-		}
-		if (hasValue(currentConfig.xtc_probability)) {
+		if (hasValue(currentConfig.top_k)) apiOptions.top_k = Number(currentConfig.top_k);
+		if (hasValue(currentConfig.top_p)) apiOptions.top_p = Number(currentConfig.top_p);
+		if (hasValue(currentConfig.min_p)) apiOptions.min_p = Number(currentConfig.min_p);
+		if (hasValue(currentConfig.xtc_probability))
 			apiOptions.xtc_probability = Number(currentConfig.xtc_probability);
-		}
-		if (hasValue(currentConfig.xtc_threshold)) {
+		if (hasValue(currentConfig.xtc_threshold))
 			apiOptions.xtc_threshold = Number(currentConfig.xtc_threshold);
-		}
-		if (hasValue(currentConfig.typ_p)) {
-			apiOptions.typ_p = Number(currentConfig.typ_p);
-		}
-		if (hasValue(currentConfig.repeat_last_n)) {
+		if (hasValue(currentConfig.typ_p)) apiOptions.typ_p = Number(currentConfig.typ_p);
+		if (hasValue(currentConfig.repeat_last_n))
 			apiOptions.repeat_last_n = Number(currentConfig.repeat_last_n);
-		}
-		if (hasValue(currentConfig.repeat_penalty)) {
+		if (hasValue(currentConfig.repeat_penalty))
 			apiOptions.repeat_penalty = Number(currentConfig.repeat_penalty);
-		}
-		if (hasValue(currentConfig.presence_penalty)) {
+		if (hasValue(currentConfig.presence_penalty))
 			apiOptions.presence_penalty = Number(currentConfig.presence_penalty);
-		}
-		if (hasValue(currentConfig.frequency_penalty)) {
+		if (hasValue(currentConfig.frequency_penalty))
 			apiOptions.frequency_penalty = Number(currentConfig.frequency_penalty);
-		}
-		if (hasValue(currentConfig.dry_multiplier)) {
+		if (hasValue(currentConfig.dry_multiplier))
 			apiOptions.dry_multiplier = Number(currentConfig.dry_multiplier);
-		}
-		if (hasValue(currentConfig.dry_base)) {
-			apiOptions.dry_base = Number(currentConfig.dry_base);
-		}
-		if (hasValue(currentConfig.dry_allowed_length)) {
+		if (hasValue(currentConfig.dry_base)) apiOptions.dry_base = Number(currentConfig.dry_base);
+		if (hasValue(currentConfig.dry_allowed_length))
 			apiOptions.dry_allowed_length = Number(currentConfig.dry_allowed_length);
-		}
-		if (hasValue(currentConfig.dry_penalty_last_n)) {
+		if (hasValue(currentConfig.dry_penalty_last_n))
 			apiOptions.dry_penalty_last_n = Number(currentConfig.dry_penalty_last_n);
-		}
-		if (currentConfig.samplers) {
-			apiOptions.samplers = currentConfig.samplers;
-		}
-		if (currentConfig.custom) {
-			apiOptions.custom = currentConfig.custom;
-		}
+		if (currentConfig.samplers) apiOptions.samplers = currentConfig.samplers;
+		if (currentConfig.custom) apiOptions.custom = currentConfig.custom;
 
 		return apiOptions;
 	}
 
-	/**
-	 * Helper methods for per-conversation loading state management
-	 */
-	private setConversationLoading(convId: string, loading: boolean): void {
+	// ============ Loading State Management ============
+
+	private setChatLoading(convId: string, loading: boolean): void {
 		if (loading) {
-			this.conversationLoadingStates.set(convId, true);
-			if (this.activeConversation?.id === convId) {
-				this.isLoading = true;
-			}
+			this.chatLoadingStates.set(convId, true);
+			if (conversationsStore.activeConversation?.id === convId) this.isLoading = true;
 		} else {
-			this.conversationLoadingStates.delete(convId);
-			if (this.activeConversation?.id === convId) {
-				this.isLoading = false;
-			}
+			this.chatLoadingStates.delete(convId);
+			if (conversationsStore.activeConversation?.id === convId) this.isLoading = false;
 		}
 	}
 
-	private isConversationLoading(convId: string): boolean {
-		return this.conversationLoadingStates.get(convId) || false;
+	private isChatLoading(convId: string): boolean {
+		return this.chatLoadingStates.get(convId) || false;
 	}
 
-	private setConversationStreaming(convId: string, response: string, messageId: string): void {
-		this.conversationStreamingStates.set(convId, { response, messageId });
-		if (this.activeConversation?.id === convId) {
-			this.currentResponse = response;
-		}
+	private setChatStreaming(convId: string, response: string, messageId: string): void {
+		this.chatStreamingStates.set(convId, { response, messageId });
+		if (conversationsStore.activeConversation?.id === convId) this.currentResponse = response;
 	}
 
-	private clearConversationStreaming(convId: string): void {
-		this.conversationStreamingStates.delete(convId);
-		if (this.activeConversation?.id === convId) {
-			this.currentResponse = '';
-		}
+	private clearChatStreaming(convId: string): void {
+		this.chatStreamingStates.delete(convId);
+		if (conversationsStore.activeConversation?.id === convId) this.currentResponse = '';
 	}
 
-	private getConversationStreaming(
-		convId: string
-	): { response: string; messageId: string } | undefined {
-		return this.conversationStreamingStates.get(convId);
+	private getChatStreaming(convId: string): { response: string; messageId: string } | undefined {
+		return this.chatStreamingStates.get(convId);
+	}
+
+	syncLoadingStateForChat(convId: string): void {
+		this.isLoading = this.isChatLoading(convId);
+		const streamingState = this.getChatStreaming(convId);
+		this.currentResponse = streamingState?.response || '';
 	}
 
 	/**
-	 * Handles streaming chat completion with the AI model
-	 * @param allMessages - All messages in the conversation
-	 * @param assistantMessage - The assistant message to stream content into
-	 * @param onComplete - Optional callback when streaming completes
-	 * @param onError - Optional callback when an error occurs
+	 * Clears global UI state without affecting background streaming.
+	 * Used when navigating to empty/new chat while other chats stream in background.
 	 */
-	private async streamChatCompletion(
-		allMessages: DatabaseMessage[],
-		assistantMessage: DatabaseMessage,
-		onComplete?: (content: string) => Promise<void>,
-		onError?: (error: Error) => void
-	): Promise<void> {
-		let streamedContent = '';
-		let streamedReasoningContent = '';
-		let streamedToolCallContent = '';
-
-		let resolvedModel: string | null = null;
-		let modelPersisted = false;
-
-		const recordModel = (modelName: string | null | undefined, persistImmediately = true): void => {
-			if (!modelName) {
-				return;
-			}
-
-			const normalizedModel = normalizeModelName(modelName);
-
-			console.log('Resolved model:', normalizedModel);
-
-			if (!normalizedModel || normalizedModel === resolvedModel) {
-				return;
-			}
-
-			resolvedModel = normalizedModel;
-
-			const messageIndex = this.findMessageIndex(assistantMessage.id);
-
-			this.updateMessageAtIndex(messageIndex, { model: normalizedModel });
-
-			if (persistImmediately && !modelPersisted) {
-				modelPersisted = true;
-				DatabaseService.updateMessage(assistantMessage.id, { model: normalizedModel }).catch(
-					(error) => {
-						console.error('Failed to persist model name:', error);
-						modelPersisted = false;
-						resolvedModel = null;
-					}
-				);
-			}
-		};
-
-		slotsService.startStreaming();
-		slotsService.setActiveConversation(assistantMessage.convId);
-
-		await chatService.sendMessage(
-			allMessages,
-			{
-				...this.getApiOptions(),
-
-				onChunk: (chunk: string) => {
-					streamedContent += chunk;
-					this.setConversationStreaming(
-						assistantMessage.convId,
-						streamedContent,
-						assistantMessage.id
-					);
-
-					const messageIndex = this.findMessageIndex(assistantMessage.id);
-					this.updateMessageAtIndex(messageIndex, {
-						content: streamedContent
-					});
-				},
-
-				onReasoningChunk: (reasoningChunk: string) => {
-					streamedReasoningContent += reasoningChunk;
-
-					const messageIndex = this.findMessageIndex(assistantMessage.id);
-
-					this.updateMessageAtIndex(messageIndex, { thinking: streamedReasoningContent });
-				},
-
-				onToolCallChunk: (toolCallChunk: string) => {
-					const chunk = toolCallChunk.trim();
-
-					if (!chunk) {
-						return;
-					}
-
-					streamedToolCallContent = chunk;
-
-					const messageIndex = this.findMessageIndex(assistantMessage.id);
-
-					this.updateMessageAtIndex(messageIndex, { toolCalls: streamedToolCallContent });
-				},
-
-				onModel: (modelName: string) => {
-					recordModel(modelName);
-				},
-
-				onComplete: async (
-					finalContent?: string,
-					reasoningContent?: string,
-					timings?: ChatMessageTimings,
-					toolCallContent?: string
-				) => {
-					slotsService.stopStreaming();
-
-					const updateData: {
-						content: string;
-						thinking: string;
-						toolCalls: string;
-						timings?: ChatMessageTimings;
-						model?: string;
-					} = {
-						content: finalContent || streamedContent,
-						thinking: reasoningContent || streamedReasoningContent,
-						toolCalls: toolCallContent || streamedToolCallContent,
-						timings: timings
-					};
-
-					if (resolvedModel && !modelPersisted) {
-						updateData.model = resolvedModel;
-						modelPersisted = true;
-					}
-
-					await DatabaseService.updateMessage(assistantMessage.id, updateData);
-
-					const messageIndex = this.findMessageIndex(assistantMessage.id);
-
-					const localUpdateData: {
-						timings?: ChatMessageTimings;
-						model?: string;
-						toolCalls?: string;
-					} = {
-						timings: timings
-					};
-
-					if (updateData.model) {
-						localUpdateData.model = updateData.model;
-					}
-
-					if (updateData.toolCalls !== undefined) {
-						localUpdateData.toolCalls = updateData.toolCalls;
-					}
-
-					this.updateMessageAtIndex(messageIndex, localUpdateData);
-
-					await DatabaseService.updateCurrentNode(assistantMessage.convId, assistantMessage.id);
-
-					if (this.activeConversation?.id === assistantMessage.convId) {
-						this.activeConversation.currNode = assistantMessage.id;
-						await this.refreshActiveMessages();
-					}
-
-					if (onComplete) {
-						await onComplete(streamedContent);
-					}
-
-					this.setConversationLoading(assistantMessage.convId, false);
-					this.clearConversationStreaming(assistantMessage.convId);
-					slotsService.clearConversationState(assistantMessage.convId);
-				},
-
-				onError: (error: Error) => {
-					slotsService.stopStreaming();
-
-					if (this.isAbortError(error)) {
-						this.setConversationLoading(assistantMessage.convId, false);
-						this.clearConversationStreaming(assistantMessage.convId);
-						slotsService.clearConversationState(assistantMessage.convId);
-						return;
-					}
-
-					console.error('Streaming error:', error);
-					this.setConversationLoading(assistantMessage.convId, false);
-					this.clearConversationStreaming(assistantMessage.convId);
-					slotsService.clearConversationState(assistantMessage.convId);
-
-					const messageIndex = this.activeMessages.findIndex(
-						(m: DatabaseMessage) => m.id === assistantMessage.id
-					);
-
-					if (messageIndex !== -1) {
-						const [failedMessage] = this.activeMessages.splice(messageIndex, 1);
-
-						if (failedMessage) {
-							DatabaseService.deleteMessage(failedMessage.id).catch((cleanupError) => {
-								console.error('Failed to remove assistant message after error:', cleanupError);
-							});
-						}
-					}
-
-					const dialogType = error.name === 'TimeoutError' ? 'timeout' : 'server';
-
-					this.showErrorDialog(dialogType, error.message);
-
-					if (onError) {
-						onError(error);
-					}
-				}
-			},
-			assistantMessage.convId
-		);
+	clearUIState(): void {
+		this.isLoading = false;
+		this.currentResponse = '';
 	}
 
-	/**
-	 * Checks if an error is an abort error (user cancelled operation)
-	 * @param error - The error to check
-	 * @returns True if the error is an abort error
-	 */
+	// ============ Error Handling ============
+
 	private isAbortError(error: unknown): boolean {
 		return error instanceof Error && (error.name === 'AbortError' || error instanceof DOMException);
 	}
@@ -569,37 +159,74 @@ class ChatStore {
 		this.errorDialogState = null;
 	}
 
-	/**
-	 * Finds the index of a message in the active messages array
-	 * @param messageId - The message ID to find
-	 * @returns The index of the message, or -1 if not found
-	 */
-	private findMessageIndex(messageId: string): number {
-		return this.activeMessages.findIndex((m) => m.id === messageId);
-	}
+	// ============ Message Creation ============
 
-	/**
-	 * Updates a message at a specific index with partial data
-	 * @param index - The index of the message to update
-	 * @param updates - Partial message data to update
-	 */
-	private updateMessageAtIndex(index: number, updates: Partial<DatabaseMessage>): void {
-		if (index !== -1) {
-			Object.assign(this.activeMessages[index], updates);
+	async addMessage(
+		role: ChatRole,
+		content: string,
+		type: ChatMessageType = 'text',
+		parent: string = '-1',
+		extras?: DatabaseMessageExtra[]
+	): Promise<DatabaseMessage | null> {
+		const activeConv = conversationsStore.activeConversation;
+		if (!activeConv) {
+			console.error('No active conversation when trying to add message');
+			return null;
+		}
+
+		try {
+			let parentId: string | null = null;
+
+			if (parent === '-1') {
+				const activeMessages = conversationsStore.activeMessages;
+				if (activeMessages.length > 0) {
+					parentId = activeMessages[activeMessages.length - 1].id;
+				} else {
+					const allMessages = await conversationsStore.getConversationMessages(activeConv.id);
+					const rootMessage = allMessages.find((m) => m.parent === null && m.type === 'root');
+					if (!rootMessage) {
+						parentId = await DatabaseService.createRootMessage(activeConv.id);
+					} else {
+						parentId = rootMessage.id;
+					}
+				}
+			} else {
+				parentId = parent;
+			}
+
+			const message = await DatabaseService.createMessageBranch(
+				{
+					convId: activeConv.id,
+					role,
+					content,
+					type,
+					timestamp: Date.now(),
+					thinking: '',
+					toolCalls: '',
+					children: [],
+					extra: extras
+				},
+				parentId
+			);
+
+			conversationsStore.addMessageToActive(message);
+			await conversationsStore.updateCurrentNode(message.id);
+			conversationsStore.updateConversationTimestamp();
+
+			return message;
+		} catch (error) {
+			console.error('Failed to add message:', error);
+			return null;
 		}
 	}
 
-	/**
-	 * Creates a new assistant message in the database
-	 * @param parentId - Optional parent message ID, defaults to '-1'
-	 * @returns The created assistant message or null if failed
-	 */
 	private async createAssistantMessage(parentId?: string): Promise<DatabaseMessage | null> {
-		if (!this.activeConversation) return null;
+		const activeConv = conversationsStore.activeConversation;
+		if (!activeConv) return null;
 
 		return await DatabaseService.createMessageBranch(
 			{
-				convId: this.activeConversation.id,
+				convId: activeConv.id,
 				type: 'text',
 				role: 'assistant',
 				content: '',
@@ -613,169 +240,204 @@ class ChatStore {
 		);
 	}
 
-	/**
-	 * Updates conversation lastModified timestamp and moves it to top of list
-	 * Ensures recently active conversations appear first in the sidebar
-	 */
-	private updateConversationTimestamp(): void {
-		if (!this.activeConversation) return;
+	// ============ Streaming ============
 
-		const chatIndex = this.conversations.findIndex((c) => c.id === this.activeConversation!.id);
+	private async streamChatCompletion(
+		allMessages: DatabaseMessage[],
+		assistantMessage: DatabaseMessage,
+		onComplete?: (content: string) => Promise<void>,
+		onError?: (error: Error) => void
+	): Promise<void> {
+		let streamedContent = '';
+		let streamedReasoningContent = '';
+		let streamedToolCallContent = '';
+		let resolvedModel: string | null = null;
+		let modelPersisted = false;
 
-		if (chatIndex !== -1) {
-			this.conversations[chatIndex].lastModified = Date.now();
-			const updatedConv = this.conversations.splice(chatIndex, 1)[0];
-			this.conversations.unshift(updatedConv);
-		}
+		const recordModel = (modelName: string | null | undefined, persistImmediately = true): void => {
+			if (!modelName) return;
+			const normalizedModel = normalizeModelName(modelName);
+			if (!normalizedModel || normalizedModel === resolvedModel) return;
+			resolvedModel = normalizedModel;
+			const messageIndex = conversationsStore.findMessageIndex(assistantMessage.id);
+			conversationsStore.updateMessageAtIndex(messageIndex, { model: normalizedModel });
+			if (persistImmediately && !modelPersisted) {
+				modelPersisted = true;
+				DatabaseService.updateMessage(assistantMessage.id, { model: normalizedModel }).catch(() => {
+					modelPersisted = false;
+					resolvedModel = null;
+				});
+			}
+		};
+
+		slotsService.startStreaming();
+		slotsService.setActiveConversation(assistantMessage.convId);
+
+		await chatService.sendMessage(
+			allMessages,
+			{
+				...this.getApiOptions(),
+				onChunk: (chunk: string) => {
+					streamedContent += chunk;
+					this.setChatStreaming(assistantMessage.convId, streamedContent, assistantMessage.id);
+					const idx = conversationsStore.findMessageIndex(assistantMessage.id);
+					conversationsStore.updateMessageAtIndex(idx, { content: streamedContent });
+				},
+				onReasoningChunk: (reasoningChunk: string) => {
+					streamedReasoningContent += reasoningChunk;
+					const idx = conversationsStore.findMessageIndex(assistantMessage.id);
+					conversationsStore.updateMessageAtIndex(idx, { thinking: streamedReasoningContent });
+				},
+				onToolCallChunk: (toolCallChunk: string) => {
+					const chunk = toolCallChunk.trim();
+					if (!chunk) return;
+					streamedToolCallContent = chunk;
+					const idx = conversationsStore.findMessageIndex(assistantMessage.id);
+					conversationsStore.updateMessageAtIndex(idx, { toolCalls: streamedToolCallContent });
+				},
+				onModel: (modelName: string) => recordModel(modelName),
+				onComplete: async (
+					finalContent?: string,
+					reasoningContent?: string,
+					timings?: ChatMessageTimings,
+					toolCallContent?: string
+				) => {
+					slotsService.stopStreaming();
+
+					// Build update data - only include model if not already persisted
+					const updateData: Record<string, unknown> = {
+						content: finalContent || streamedContent,
+						thinking: reasoningContent || streamedReasoningContent,
+						toolCalls: toolCallContent || streamedToolCallContent,
+						timings
+					};
+					if (resolvedModel && !modelPersisted) {
+						updateData.model = resolvedModel;
+					}
+					await DatabaseService.updateMessage(assistantMessage.id, updateData);
+
+					// Update UI state - always include model and timings if available
+					const idx = conversationsStore.findMessageIndex(assistantMessage.id);
+					const uiUpdate: Partial<DatabaseMessage> = {
+						content: updateData.content as string,
+						toolCalls: updateData.toolCalls as string
+					};
+					if (timings) uiUpdate.timings = timings;
+					if (resolvedModel) uiUpdate.model = resolvedModel;
+
+					conversationsStore.updateMessageAtIndex(idx, uiUpdate);
+					await conversationsStore.updateCurrentNode(assistantMessage.id);
+
+					if (onComplete) await onComplete(streamedContent);
+					this.setChatLoading(assistantMessage.convId, false);
+					this.clearChatStreaming(assistantMessage.convId);
+					slotsService.clearConversationState(assistantMessage.convId);
+				},
+				onError: (error: Error) => {
+					slotsService.stopStreaming();
+					if (this.isAbortError(error)) {
+						this.setChatLoading(assistantMessage.convId, false);
+						this.clearChatStreaming(assistantMessage.convId);
+						slotsService.clearConversationState(assistantMessage.convId);
+						return;
+					}
+					console.error('Streaming error:', error);
+					this.setChatLoading(assistantMessage.convId, false);
+					this.clearChatStreaming(assistantMessage.convId);
+					slotsService.clearConversationState(assistantMessage.convId);
+					const idx = conversationsStore.findMessageIndex(assistantMessage.id);
+					if (idx !== -1) {
+						const failedMessage = conversationsStore.removeMessageAtIndex(idx);
+						if (failedMessage) DatabaseService.deleteMessage(failedMessage.id).catch(console.error);
+					}
+					this.showErrorDialog(error.name === 'TimeoutError' ? 'timeout' : 'server', error.message);
+					if (onError) onError(error);
+				}
+			},
+			assistantMessage.convId
+		);
 	}
 
-	/**
-	 * Sends a new message and generates AI response
-	 * @param content - The message content to send
-	 * @param extras - Optional extra data (files, attachments, etc.)
-	 */
+	// ============ Send Message ============
+
 	async sendMessage(content: string, extras?: DatabaseMessageExtra[]): Promise<void> {
 		if (!content.trim() && (!extras || extras.length === 0)) return;
-
-		if (this.activeConversation && this.isConversationLoading(this.activeConversation.id)) {
-			console.log('Cannot send message: current conversation is already processing a message');
-			return;
-		}
+		const activeConv = conversationsStore.activeConversation;
+		if (activeConv && this.isChatLoading(activeConv.id)) return;
 
 		let isNewConversation = false;
-
-		if (!this.activeConversation) {
-			await this.createConversation();
+		if (!activeConv) {
+			await conversationsStore.createConversation();
 			isNewConversation = true;
 		}
-
-		if (!this.activeConversation) {
-			console.error('No active conversation available for sending message');
-			return;
-		}
+		const currentConv = conversationsStore.activeConversation;
+		if (!currentConv) return;
 
 		this.errorDialogState = null;
-
-		this.setConversationLoading(this.activeConversation.id, true);
-		this.clearConversationStreaming(this.activeConversation.id);
-
-		let userMessage: DatabaseMessage | null = null;
+		this.setChatLoading(currentConv.id, true);
+		this.clearChatStreaming(currentConv.id);
 
 		try {
-			userMessage = await this.addMessage('user', content, 'text', '-1', extras);
-
-			if (!userMessage) {
-				throw new Error('Failed to add user message');
-			}
-
-			if (isNewConversation && content) {
-				const title = content.trim();
-				await this.updateConversationName(this.activeConversation.id, title);
-			}
+			const userMessage = await this.addMessage('user', content, 'text', '-1', extras);
+			if (!userMessage) throw new Error('Failed to add user message');
+			if (isNewConversation && content)
+				await conversationsStore.updateConversationName(currentConv.id, content.trim());
 
 			const assistantMessage = await this.createAssistantMessage(userMessage.id);
-
-			if (!assistantMessage) {
-				throw new Error('Failed to create assistant message');
-			}
-
-			this.activeMessages.push(assistantMessage);
-
-			const conversationContext = this.activeMessages.slice(0, -1);
-
-			await this.streamChatCompletion(conversationContext, assistantMessage);
+			if (!assistantMessage) throw new Error('Failed to create assistant message');
+			conversationsStore.addMessageToActive(assistantMessage);
+			await this.streamChatCompletion(
+				conversationsStore.activeMessages.slice(0, -1),
+				assistantMessage
+			);
 		} catch (error) {
 			if (this.isAbortError(error)) {
-				this.setConversationLoading(this.activeConversation!.id, false);
+				this.setChatLoading(currentConv.id, false);
 				return;
 			}
-
 			console.error('Failed to send message:', error);
-			this.setConversationLoading(this.activeConversation!.id, false);
+			this.setChatLoading(currentConv.id, false);
 			if (!this.errorDialogState) {
-				if (error instanceof Error) {
-					const dialogType = error.name === 'TimeoutError' ? 'timeout' : 'server';
-					this.showErrorDialog(dialogType, error.message);
-				} else {
-					this.showErrorDialog('server', 'Unknown error occurred while sending message');
-				}
+				const dialogType =
+					error instanceof Error && error.name === 'TimeoutError' ? 'timeout' : 'server';
+				this.showErrorDialog(dialogType, error instanceof Error ? error.message : 'Unknown error');
 			}
 		}
 	}
 
-	/**
-	 * Stops the current message generation
-	 * Aborts ongoing requests and saves partial response if available
-	 */
+	// ============ Graceful Stop ============
+
 	async stopGeneration(): Promise<void> {
-		if (!this.activeConversation) return;
-
-		const convId = this.activeConversation.id;
-
-		await this.savePartialResponseIfNeeded(convId);
-
+		const activeConv = conversationsStore.activeConversation;
+		if (!activeConv) return;
+		await this.savePartialResponseIfNeeded(activeConv.id);
 		slotsService.stopStreaming();
-		chatService.abort(convId);
-
-		this.setConversationLoading(convId, false);
-		this.clearConversationStreaming(convId);
-		slotsService.clearConversationState(convId);
+		chatService.abortChatCompletionRequest(activeConv.id);
+		this.setChatLoading(activeConv.id, false);
+		this.clearChatStreaming(activeConv.id);
+		slotsService.clearConversationState(activeConv.id);
 	}
 
-	/**
-	 * Gracefully stops generation and saves partial response
-	 */
-	async gracefulStop(): Promise<void> {
-		if (!this.isLoading) return;
-
-		slotsService.stopStreaming();
-		chatService.abort();
-		await this.savePartialResponseIfNeeded();
-
-		this.conversationLoadingStates.clear();
-		this.conversationStreamingStates.clear();
-		this.isLoading = false;
-		this.currentResponse = '';
-	}
-
-	/**
-	 * Saves partial response if generation was interrupted
-	 * Preserves user's partial content and timing data when generation is stopped early
-	 */
 	private async savePartialResponseIfNeeded(convId?: string): Promise<void> {
-		const conversationId = convId || this.activeConversation?.id;
+		const conversationId = convId || conversationsStore.activeConversation?.id;
 		if (!conversationId) return;
-
-		const streamingState = this.conversationStreamingStates.get(conversationId);
-		if (!streamingState || !streamingState.response.trim()) {
-			return;
-		}
+		const streamingState = this.chatStreamingStates.get(conversationId);
+		if (!streamingState || !streamingState.response.trim()) return;
 
 		const messages =
-			conversationId === this.activeConversation?.id
-				? this.activeMessages
-				: await DatabaseService.getConversationMessages(conversationId);
-
+			conversationId === conversationsStore.activeConversation?.id
+				? conversationsStore.activeMessages
+				: await conversationsStore.getConversationMessages(conversationId);
 		if (!messages.length) return;
 
 		const lastMessage = messages[messages.length - 1];
-
-		if (lastMessage && lastMessage.role === 'assistant') {
+		if (lastMessage?.role === 'assistant') {
 			try {
-				const updateData: {
-					content: string;
-					thinking?: string;
-					timings?: ChatMessageTimings;
-				} = {
+				const updateData: { content: string; thinking?: string; timings?: ChatMessageTimings } = {
 					content: streamingState.response
 				};
-
-				if (lastMessage.thinking?.trim()) {
-					updateData.thinking = lastMessage.thinking;
-				}
-
+				if (lastMessage.thinking?.trim()) updateData.thinking = lastMessage.thinking;
 				const lastKnownState = await slotsService.getCurrentState();
-
 				if (lastKnownState) {
 					updateData.timings = {
 						prompt_n: lastKnownState.promptTokens || 0,
@@ -787,448 +449,125 @@ class ChatStore {
 								: undefined
 					};
 				}
-
 				await DatabaseService.updateMessage(lastMessage.id, updateData);
-
 				lastMessage.content = this.currentResponse;
-
-				if (updateData.thinking !== undefined) {
-					lastMessage.thinking = updateData.thinking;
-				}
-
-				if (updateData.timings) {
-					lastMessage.timings = updateData.timings;
-				}
+				if (updateData.thinking) lastMessage.thinking = updateData.thinking;
+				if (updateData.timings) lastMessage.timings = updateData.timings;
 			} catch (error) {
 				lastMessage.content = this.currentResponse;
 				console.error('Failed to save partial response:', error);
 			}
-		} else {
-			console.error('Last message is not an assistant message');
 		}
 	}
 
-	/**
-	 * Updates a user message and regenerates the assistant response
-	 * @param messageId - The ID of the message to update
-	 * @param newContent - The new content for the message
-	 */
-	async updateMessage(messageId: string, newContent: string): Promise<void> {
-		if (!this.activeConversation) return;
+	// ============ Message Updates ============
 
-		if (this.isLoading) {
-			this.stopGeneration();
-		}
+	async updateMessage(messageId: string, newContent: string): Promise<void> {
+		const activeConv = conversationsStore.activeConversation;
+		if (!activeConv) return;
+		if (this.isLoading) this.stopGeneration();
 
 		try {
-			const messageIndex = this.findMessageIndex(messageId);
-			if (messageIndex === -1) {
-				console.error('Message not found for update');
-				return;
-			}
+			const messageIndex = conversationsStore.findMessageIndex(messageId);
+			if (messageIndex === -1) return;
 
-			const messageToUpdate = this.activeMessages[messageIndex];
+			const messageToUpdate = conversationsStore.activeMessages[messageIndex];
 			const originalContent = messageToUpdate.content;
+			if (messageToUpdate.role !== 'user') return;
 
-			if (messageToUpdate.role !== 'user') {
-				console.error('Only user messages can be edited');
-				return;
-			}
-
-			const allMessages = await DatabaseService.getConversationMessages(this.activeConversation.id);
+			const allMessages = await conversationsStore.getConversationMessages(activeConv.id);
 			const rootMessage = allMessages.find((m) => m.type === 'root' && m.parent === null);
-			const isFirstUserMessage =
-				rootMessage && messageToUpdate.parent === rootMessage.id && messageToUpdate.role === 'user';
+			const isFirstUserMessage = rootMessage && messageToUpdate.parent === rootMessage.id;
 
-			this.updateMessageAtIndex(messageIndex, { content: newContent });
+			conversationsStore.updateMessageAtIndex(messageIndex, { content: newContent });
 			await DatabaseService.updateMessage(messageId, { content: newContent });
 
 			if (isFirstUserMessage && newContent.trim()) {
-				await this.updateConversationTitleWithConfirmation(
-					this.activeConversation.id,
+				await conversationsStore.updateConversationTitleWithConfirmation(
+					activeConv.id,
 					newContent.trim(),
-					this.titleUpdateConfirmationCallback
+					conversationsStore.titleUpdateConfirmationCallback
 				);
 			}
 
-			const messagesToRemove = this.activeMessages.slice(messageIndex + 1);
-			for (const message of messagesToRemove) {
-				await DatabaseService.deleteMessage(message.id);
-			}
+			const messagesToRemove = conversationsStore.activeMessages.slice(messageIndex + 1);
+			for (const message of messagesToRemove) await DatabaseService.deleteMessage(message.id);
+			conversationsStore.sliceActiveMessages(messageIndex + 1);
+			conversationsStore.updateConversationTimestamp();
 
-			this.activeMessages = this.activeMessages.slice(0, messageIndex + 1);
-			this.updateConversationTimestamp();
+			this.setChatLoading(activeConv.id, true);
+			this.clearChatStreaming(activeConv.id);
 
-			this.setConversationLoading(this.activeConversation.id, true);
-			this.clearConversationStreaming(this.activeConversation.id);
-
-			try {
-				const assistantMessage = await this.createAssistantMessage();
-				if (!assistantMessage) {
-					throw new Error('Failed to create assistant message');
-				}
-
-				this.activeMessages.push(assistantMessage);
-				await DatabaseService.updateCurrentNode(this.activeConversation.id, assistantMessage.id);
-				this.activeConversation.currNode = assistantMessage.id;
-
-				await this.streamChatCompletion(
-					this.activeMessages.slice(0, -1),
-					assistantMessage,
-					undefined,
-					() => {
-						const editedMessageIndex = this.findMessageIndex(messageId);
-						this.updateMessageAtIndex(editedMessageIndex, { content: originalContent });
-					}
-				);
-			} catch (regenerateError) {
-				console.error('Failed to regenerate response:', regenerateError);
-				this.setConversationLoading(this.activeConversation!.id, false);
-
-				const messageIndex = this.findMessageIndex(messageId);
-				this.updateMessageAtIndex(messageIndex, { content: originalContent });
-			}
-		} catch (error) {
-			if (this.isAbortError(error)) {
-				return;
-			}
-
-			console.error('Failed to update message:', error);
-		}
-	}
-
-	/**
-	 * Regenerates an assistant message with a new response
-	 * @param messageId - The ID of the assistant message to regenerate
-	 */
-	async regenerateMessage(messageId: string): Promise<void> {
-		if (!this.activeConversation || this.isLoading) return;
-
-		try {
-			const messageIndex = this.findMessageIndex(messageId);
-			if (messageIndex === -1) {
-				console.error('Message not found for regeneration');
-				return;
-			}
-
-			const messageToRegenerate = this.activeMessages[messageIndex];
-			if (messageToRegenerate.role !== 'assistant') {
-				console.error('Only assistant messages can be regenerated');
-				return;
-			}
-
-			const messagesToRemove = this.activeMessages.slice(messageIndex);
-			for (const message of messagesToRemove) {
-				await DatabaseService.deleteMessage(message.id);
-			}
-
-			this.activeMessages = this.activeMessages.slice(0, messageIndex);
-			this.updateConversationTimestamp();
-
-			this.setConversationLoading(this.activeConversation.id, true);
-			this.clearConversationStreaming(this.activeConversation.id);
-
-			try {
-				const parentMessageId =
-					this.activeMessages.length > 0
-						? this.activeMessages[this.activeMessages.length - 1].id
-						: null;
-
-				const assistantMessage = await this.createAssistantMessage(parentMessageId);
-
-				if (!assistantMessage) {
-					throw new Error('Failed to create assistant message');
-				}
-
-				this.activeMessages.push(assistantMessage);
-
-				const conversationContext = this.activeMessages.slice(0, -1);
-
-				await this.streamChatCompletion(conversationContext, assistantMessage);
-			} catch (regenerateError) {
-				console.error('Failed to regenerate response:', regenerateError);
-				this.setConversationLoading(this.activeConversation!.id, false);
-			}
-		} catch (error) {
-			if (this.isAbortError(error)) return;
-			console.error('Failed to regenerate message:', error);
-		}
-	}
-
-	/**
-	 * Updates the name of a conversation
-	 * @param convId - The conversation ID to update
-	 * @param name - The new name for the conversation
-	 */
-	async updateConversationName(convId: string, name: string): Promise<void> {
-		try {
-			await DatabaseService.updateConversation(convId, { name });
-
-			const convIndex = this.conversations.findIndex((c) => c.id === convId);
-
-			if (convIndex !== -1) {
-				this.conversations[convIndex].name = name;
-			}
-
-			if (this.activeConversation?.id === convId) {
-				this.activeConversation.name = name;
-			}
-		} catch (error) {
-			console.error('Failed to update conversation name:', error);
-		}
-	}
-
-	/**
-	 * Sets the callback function for title update confirmations
-	 * @param callback - Function to call when confirmation is needed
-	 */
-	setTitleUpdateConfirmationCallback(
-		callback: (currentTitle: string, newTitle: string) => Promise<boolean>
-	): void {
-		this.titleUpdateConfirmationCallback = callback;
-	}
-
-	/**
-	 * Updates conversation title with optional confirmation dialog based on settings
-	 * @param convId - The conversation ID to update
-	 * @param newTitle - The new title content
-	 * @param onConfirmationNeeded - Callback when user confirmation is needed
-	 * @returns Promise<boolean> - True if title was updated, false if cancelled
-	 */
-	async updateConversationTitleWithConfirmation(
-		convId: string,
-		newTitle: string,
-		onConfirmationNeeded?: (currentTitle: string, newTitle: string) => Promise<boolean>
-	): Promise<boolean> {
-		try {
-			const currentConfig = config();
-
-			if (currentConfig.askForTitleConfirmation && onConfirmationNeeded) {
-				const conversation = await DatabaseService.getConversation(convId);
-				if (!conversation) return false;
-
-				const shouldUpdate = await onConfirmationNeeded(conversation.name, newTitle);
-				if (!shouldUpdate) return false;
-			}
-
-			await this.updateConversationName(convId, newTitle);
-			return true;
-		} catch (error) {
-			console.error('Failed to update conversation title with confirmation:', error);
-			return false;
-		}
-	}
-
-	/**
-	 * Downloads a conversation as JSON file
-	 * @param convId - The conversation ID to download
-	 */
-	async downloadConversation(convId: string): Promise<void> {
-		if (!this.activeConversation || this.activeConversation.id !== convId) {
-			// Load the conversation if not currently active
-			const conversation = await DatabaseService.getConversation(convId);
-			if (!conversation) return;
-
-			const messages = await DatabaseService.getConversationMessages(convId);
-			const conversationData = {
-				conv: conversation,
-				messages
-			};
-
-			this.triggerDownload(conversationData);
-		} else {
-			// Use current active conversation data
-			const conversationData: ExportedConversations = {
-				conv: this.activeConversation!,
-				messages: this.activeMessages
-			};
-
-			this.triggerDownload(conversationData);
-		}
-	}
-
-	/**
-	 * Triggers file download in browser
-	 * @param data - Data to download (expected: { conv: DatabaseConversation, messages: DatabaseMessage[] })
-	 * @param filename - Optional filename
-	 */
-	private triggerDownload(data: ExportedConversations, filename?: string): void {
-		const conversation =
-			'conv' in data ? data.conv : Array.isArray(data) ? data[0]?.conv : undefined;
-		if (!conversation) {
-			console.error('Invalid data: missing conversation');
-			return;
-		}
-		const conversationName = conversation.name ? conversation.name.trim() : '';
-		const convId = conversation.id || 'unknown';
-		const truncatedSuffix = conversationName
-			.toLowerCase()
-			.replace(/[^a-z0-9]/gi, '_')
-			.replace(/_+/g, '_')
-			.substring(0, 20);
-		const downloadFilename = filename || `conversation_${convId}_${truncatedSuffix}.json`;
-
-		const conversationJson = JSON.stringify(data, null, 2);
-		const blob = new Blob([conversationJson], {
-			type: 'application/json'
-		});
-		const url = URL.createObjectURL(blob);
-		const a = document.createElement('a');
-		a.href = url;
-		a.download = downloadFilename;
-		document.body.appendChild(a);
-		a.click();
-		document.body.removeChild(a);
-		URL.revokeObjectURL(url);
-	}
-
-	/**
-	 * Exports all conversations with their messages as a JSON file
-	 * Returns the list of exported conversations
-	 */
-	async exportAllConversations(): Promise<DatabaseConversation[]> {
-		try {
-			const allConversations = await DatabaseService.getAllConversations();
-			if (allConversations.length === 0) {
-				throw new Error('No conversations to export');
-			}
-
-			const allData: ExportedConversations = await Promise.all(
-				allConversations.map(async (conv) => {
-					const messages = await DatabaseService.getConversationMessages(conv.id);
-					return { conv, messages };
-				})
-			);
-
-			const blob = new Blob([JSON.stringify(allData, null, 2)], {
-				type: 'application/json'
-			});
-			const url = URL.createObjectURL(blob);
-			const a = document.createElement('a');
-			a.href = url;
-			a.download = `all_conversations_${new Date().toISOString().split('T')[0]}.json`;
-			document.body.appendChild(a);
-			a.click();
-			document.body.removeChild(a);
-			URL.revokeObjectURL(url);
-
-			toast.success(`All conversations (${allConversations.length}) prepared for download`);
-			return allConversations;
-		} catch (err) {
-			console.error('Failed to export conversations:', err);
-			throw err;
-		}
-	}
-
-	/**
-	 * Imports conversations from a JSON file.
-	 * Supports both single conversation (object) and multiple conversations (array).
-	 * Uses DatabaseService for safe, encapsulated data access
-	 * Returns the list of imported conversations
-	 */
-	async importConversations(): Promise<DatabaseConversation[]> {
-		return new Promise((resolve, reject) => {
-			const input = document.createElement('input');
-			input.type = 'file';
-			input.accept = '.json';
-
-			input.onchange = async (e) => {
-				const file = (e.target as HTMLInputElement)?.files?.[0];
-				if (!file) {
-					reject(new Error('No file selected'));
-					return;
-				}
-
-				try {
-					const text = await file.text();
-					const parsedData = JSON.parse(text);
-					let importedData: ExportedConversations;
-
-					if (Array.isArray(parsedData)) {
-						importedData = parsedData;
-					} else if (
-						parsedData &&
-						typeof parsedData === 'object' &&
-						'conv' in parsedData &&
-						'messages' in parsedData
-					) {
-						// Single conversation object
-						importedData = [parsedData];
-					} else {
-						throw new Error(
-							'Invalid file format: expected array of conversations or single conversation object'
-						);
-					}
-
-					const result = await DatabaseService.importConversations(importedData);
-
-					// Refresh UI
-					await this.loadConversations();
-
-					toast.success(`Imported ${result.imported} conversation(s), skipped ${result.skipped}`);
-
-					// Extract the conversation objects from imported data
-					const importedConversations = importedData.map((item) => item.conv);
-					resolve(importedConversations);
-				} catch (err: unknown) {
-					const message = err instanceof Error ? err.message : 'Unknown error';
-					console.error('Failed to import conversations:', err);
-					toast.error('Import failed', {
-						description: message
+			const assistantMessage = await this.createAssistantMessage();
+			if (!assistantMessage) throw new Error('Failed to create assistant message');
+			conversationsStore.addMessageToActive(assistantMessage);
+			await conversationsStore.updateCurrentNode(assistantMessage.id);
+			await this.streamChatCompletion(
+				conversationsStore.activeMessages.slice(0, -1),
+				assistantMessage,
+				undefined,
+				() => {
+					conversationsStore.updateMessageAtIndex(conversationsStore.findMessageIndex(messageId), {
+						content: originalContent
 					});
-					reject(new Error(`Import failed: ${message}`));
 				}
-			};
-
-			input.click();
-		});
-	}
-
-	/**
-	 * Deletes a conversation and all its messages
-	 * @param convId - The conversation ID to delete
-	 */
-	async deleteConversation(convId: string): Promise<void> {
-		try {
-			await DatabaseService.deleteConversation(convId);
-
-			this.conversations = this.conversations.filter((c) => c.id !== convId);
-
-			if (this.activeConversation?.id === convId) {
-				this.activeConversation = null;
-				this.activeMessages = [];
-				await goto(`?new_chat=true#/`);
-			}
+			);
 		} catch (error) {
-			console.error('Failed to delete conversation:', error);
+			if (!this.isAbortError(error)) console.error('Failed to update message:', error);
+		}
+	}
+
+	async regenerateMessage(messageId: string): Promise<void> {
+		const activeConv = conversationsStore.activeConversation;
+		if (!activeConv || this.isLoading) return;
+
+		try {
+			const messageIndex = conversationsStore.findMessageIndex(messageId);
+			if (messageIndex === -1) return;
+			const messageToRegenerate = conversationsStore.activeMessages[messageIndex];
+			if (messageToRegenerate.role !== 'assistant') return;
+
+			const messagesToRemove = conversationsStore.activeMessages.slice(messageIndex);
+			for (const message of messagesToRemove) await DatabaseService.deleteMessage(message.id);
+			conversationsStore.sliceActiveMessages(messageIndex);
+			conversationsStore.updateConversationTimestamp();
+
+			this.setChatLoading(activeConv.id, true);
+			this.clearChatStreaming(activeConv.id);
+
+			const parentMessageId =
+				conversationsStore.activeMessages.length > 0
+					? conversationsStore.activeMessages[conversationsStore.activeMessages.length - 1].id
+					: undefined;
+			const assistantMessage = await this.createAssistantMessage(parentMessageId);
+			if (!assistantMessage) throw new Error('Failed to create assistant message');
+			conversationsStore.addMessageToActive(assistantMessage);
+			await this.streamChatCompletion(
+				conversationsStore.activeMessages.slice(0, -1),
+				assistantMessage
+			);
+		} catch (error) {
+			if (!this.isAbortError(error)) console.error('Failed to regenerate message:', error);
+			this.setChatLoading(activeConv?.id || '', false);
 		}
 	}
 
-	/**
-	 * Gets information about what messages will be deleted when deleting a specific message
-	 * @param messageId - The ID of the message to be deleted
-	 * @returns Object with deletion info including count and types of messages
-	 */
 	async getDeletionInfo(messageId: string): Promise<{
 		totalCount: number;
 		userMessages: number;
 		assistantMessages: number;
 		messageTypes: string[];
 	}> {
-		if (!this.activeConversation) {
+		const activeConv = conversationsStore.activeConversation;
+		if (!activeConv)
 			return { totalCount: 0, userMessages: 0, assistantMessages: 0, messageTypes: [] };
-		}
-
-		const allMessages = await DatabaseService.getConversationMessages(this.activeConversation.id);
+		const allMessages = await conversationsStore.getConversationMessages(activeConv.id);
 		const descendants = findDescendantMessages(allMessages, messageId);
 		const allToDelete = [messageId, ...descendants];
-
 		const messagesToDelete = allMessages.filter((m) => allToDelete.includes(m.id));
-
-		let userMessages = 0;
-		let assistantMessages = 0;
+		let userMessages = 0,
+			assistantMessages = 0;
 		const messageTypes: string[] = [];
-
 		for (const msg of messagesToDelete) {
 			if (msg.role === 'user') {
 				userMessages++;
@@ -1238,409 +577,185 @@ class ChatStore {
 				if (!messageTypes.includes('assistant response')) messageTypes.push('assistant response');
 			}
 		}
-
-		return {
-			totalCount: allToDelete.length,
-			userMessages,
-			assistantMessages,
-			messageTypes
-		};
+		return { totalCount: allToDelete.length, userMessages, assistantMessages, messageTypes };
 	}
 
-	/**
-	 * Deletes a message and all its descendants, updating conversation path if needed
-	 * @param messageId - The ID of the message to delete
-	 */
 	async deleteMessage(messageId: string): Promise<void> {
+		const activeConv = conversationsStore.activeConversation;
+		if (!activeConv) return;
 		try {
-			if (!this.activeConversation) return;
-
-			// Get all messages to find siblings before deletion
-			const allMessages = await DatabaseService.getConversationMessages(this.activeConversation.id);
+			const allMessages = await conversationsStore.getConversationMessages(activeConv.id);
 			const messageToDelete = allMessages.find((m) => m.id === messageId);
+			if (!messageToDelete) return;
 
-			if (!messageToDelete) {
-				console.error('Message to delete not found');
-				return;
-			}
-
-			// Check if the deleted message is in the current conversation path
-			const currentPath = filterByLeafNodeId(
-				allMessages,
-				this.activeConversation.currNode || '',
-				false
-			);
+			const currentPath = filterByLeafNodeId(allMessages, activeConv.currNode || '', false);
 			const isInCurrentPath = currentPath.some((m) => m.id === messageId);
 
-			// If the deleted message is in the current path, we need to update currNode
 			if (isInCurrentPath && messageToDelete.parent) {
-				// Find all siblings (messages with same parent)
 				const siblings = allMessages.filter(
 					(m) => m.parent === messageToDelete.parent && m.id !== messageId
 				);
-
 				if (siblings.length > 0) {
-					// Find the latest sibling (highest timestamp)
 					const latestSibling = siblings.reduce((latest, sibling) =>
 						sibling.timestamp > latest.timestamp ? sibling : latest
 					);
-
-					// Find the leaf node for this sibling branch to get the complete conversation path
-					const leafNodeId = findLeafNode(allMessages, latestSibling.id);
-
-					// Update conversation to use the leaf node of the latest remaining sibling
-					await DatabaseService.updateCurrentNode(this.activeConversation.id, leafNodeId);
-					this.activeConversation.currNode = leafNodeId;
-				} else {
-					// No siblings left, navigate to parent if it exists
-					if (messageToDelete.parent) {
-						const parentLeafId = findLeafNode(allMessages, messageToDelete.parent);
-						await DatabaseService.updateCurrentNode(this.activeConversation.id, parentLeafId);
-						this.activeConversation.currNode = parentLeafId;
-					}
+					await conversationsStore.updateCurrentNode(findLeafNode(allMessages, latestSibling.id));
+				} else if (messageToDelete.parent) {
+					await conversationsStore.updateCurrentNode(
+						findLeafNode(allMessages, messageToDelete.parent)
+					);
 				}
 			}
-
-			// Use cascading deletion to remove the message and all its descendants
-			await DatabaseService.deleteMessageCascading(this.activeConversation.id, messageId);
-
-			// Refresh active messages to show the updated branch
-			await this.refreshActiveMessages();
-
-			// Update conversation timestamp
-			this.updateConversationTimestamp();
+			await DatabaseService.deleteMessageCascading(activeConv.id, messageId);
+			await conversationsStore.refreshActiveMessages();
+			conversationsStore.updateConversationTimestamp();
 		} catch (error) {
 			console.error('Failed to delete message:', error);
 		}
 	}
 
-	/**
-	 * Clears the active conversation and messages
-	 * Used when navigating away from chat or starting fresh
-	 * Note: Does not stop ongoing streaming to allow background completion
-	 */
-	clearActiveConversation(): void {
-		this.activeConversation = null;
-		this.activeMessages = [];
-		this.isLoading = false;
-		this.currentResponse = '';
-		slotsService.setActiveConversation(null);
-	}
+	// ============ Branching Operations ============
 
-	/** Refreshes active messages based on currNode after branch navigation */
-	async refreshActiveMessages(): Promise<void> {
-		if (!this.activeConversation) return;
-
-		const allMessages = await DatabaseService.getConversationMessages(this.activeConversation.id);
-		if (allMessages.length === 0) {
-			this.activeMessages = [];
-			return;
-		}
-
-		const leafNodeId =
-			this.activeConversation.currNode ||
-			allMessages.reduce((latest, msg) => (msg.timestamp > latest.timestamp ? msg : latest)).id;
-
-		const currentPath = filterByLeafNodeId(allMessages, leafNodeId, false) as DatabaseMessage[];
-
-		this.activeMessages.length = 0;
-		this.activeMessages.push(...currentPath);
-	}
-
-	/**
-	 * Navigates to a specific sibling branch by updating currNode and refreshing messages
-	 * @param siblingId - The sibling message ID to navigate to
-	 */
-	async navigateToSibling(siblingId: string): Promise<void> {
-		if (!this.activeConversation) return;
-
-		// Get the current first user message before navigation
-		const allMessages = await DatabaseService.getConversationMessages(this.activeConversation.id);
-		const rootMessage = allMessages.find((m) => m.type === 'root' && m.parent === null);
-		const currentFirstUserMessage = this.activeMessages.find(
-			(m) => m.role === 'user' && m.parent === rootMessage?.id
-		);
-
-		const currentLeafNodeId = findLeafNode(allMessages, siblingId);
-
-		await DatabaseService.updateCurrentNode(this.activeConversation.id, currentLeafNodeId);
-		this.activeConversation.currNode = currentLeafNodeId;
-		await this.refreshActiveMessages();
-
-		// Only show title dialog if we're navigating between different first user message siblings
-		if (rootMessage && this.activeMessages.length > 0) {
-			// Find the first user message in the new active path
-			const newFirstUserMessage = this.activeMessages.find(
-				(m) => m.role === 'user' && m.parent === rootMessage.id
-			);
-
-			// Only show dialog if:
-			// 1. We have a new first user message
-			// 2. It's different from the previous one (different ID or content)
-			// 3. The new message has content
-			if (
-				newFirstUserMessage &&
-				newFirstUserMessage.content.trim() &&
-				(!currentFirstUserMessage ||
-					newFirstUserMessage.id !== currentFirstUserMessage.id ||
-					newFirstUserMessage.content.trim() !== currentFirstUserMessage.content.trim())
-			) {
-				await this.updateConversationTitleWithConfirmation(
-					this.activeConversation.id,
-					newFirstUserMessage.content.trim(),
-					this.titleUpdateConfirmationCallback
-				);
-			}
-		}
-	}
-
-	/**
-	 * Edits an assistant message with optional branching
-	 * @param messageId - The ID of the assistant message to edit
-	 * @param newContent - The new content for the message
-	 * @param shouldBranch - Whether to create a branch or replace in-place
-	 */
 	async editAssistantMessage(
 		messageId: string,
 		newContent: string,
 		shouldBranch: boolean
 	): Promise<void> {
-		if (!this.activeConversation || this.isLoading) return;
-
+		const activeConv = conversationsStore.activeConversation;
+		if (!activeConv || this.isLoading) return;
 		try {
-			const messageIndex = this.findMessageIndex(messageId);
-
-			if (messageIndex === -1) {
-				console.error('Message not found for editing');
-				return;
-			}
-
-			const messageToEdit = this.activeMessages[messageIndex];
-
-			if (messageToEdit.role !== 'assistant') {
-				console.error('Only assistant messages can be edited with this method');
-				return;
-			}
+			const idx = conversationsStore.findMessageIndex(messageId);
+			if (idx === -1) return;
+			const msg = conversationsStore.activeMessages[idx];
+			if (msg.role !== 'assistant') return;
 
 			if (shouldBranch) {
 				const newMessage = await DatabaseService.createMessageBranch(
 					{
-						convId: messageToEdit.convId,
-						type: messageToEdit.type,
+						convId: msg.convId,
+						type: msg.type,
 						timestamp: Date.now(),
-						role: messageToEdit.role,
+						role: msg.role,
 						content: newContent,
-						thinking: messageToEdit.thinking || '',
-						toolCalls: messageToEdit.toolCalls || '',
+						thinking: msg.thinking || '',
+						toolCalls: msg.toolCalls || '',
 						children: [],
-						model: messageToEdit.model // Preserve original model info when branching
+						model: msg.model
 					},
-					messageToEdit.parent!
+					msg.parent!
 				);
-
-				await DatabaseService.updateCurrentNode(this.activeConversation.id, newMessage.id);
-				this.activeConversation.currNode = newMessage.id;
+				await conversationsStore.updateCurrentNode(newMessage.id);
 			} else {
-				await DatabaseService.updateMessage(messageToEdit.id, {
-					content: newContent,
-					timestamp: Date.now()
-				});
-
-				// Ensure currNode points to the edited message to maintain correct path
-				await DatabaseService.updateCurrentNode(this.activeConversation.id, messageToEdit.id);
-				this.activeConversation.currNode = messageToEdit.id;
-
-				this.updateMessageAtIndex(messageIndex, {
+				await DatabaseService.updateMessage(msg.id, { content: newContent, timestamp: Date.now() });
+				await conversationsStore.updateCurrentNode(msg.id);
+				conversationsStore.updateMessageAtIndex(idx, {
 					content: newContent,
 					timestamp: Date.now()
 				});
 			}
-
-			this.updateConversationTimestamp();
-			await this.refreshActiveMessages();
+			conversationsStore.updateConversationTimestamp();
+			await conversationsStore.refreshActiveMessages();
 		} catch (error) {
 			console.error('Failed to edit assistant message:', error);
 		}
 	}
 
-	/**
-	 * Edits a user message and preserves all responses below
-	 * Updates the message content in-place without deleting or regenerating responses
-	 *
-	 * **Use Case**: When you want to fix a typo or rephrase a question without losing the assistant's response
-	 *
-	 * **Important Behavior:**
-	 * - Does NOT create a branch (unlike editMessageWithBranching)
-	 * - Does NOT regenerate assistant responses
-	 * - Only updates the user message content in the database
-	 * - Preserves the entire conversation tree below the edited message
-	 * - Updates conversation title if this is the first user message
-	 *
-	 * @param messageId - The ID of the user message to edit
-	 * @param newContent - The new content for the message
-	 */
 	async editUserMessagePreserveResponses(messageId: string, newContent: string): Promise<void> {
-		if (!this.activeConversation) return;
-
+		const activeConv = conversationsStore.activeConversation;
+		if (!activeConv) return;
 		try {
-			const messageIndex = this.findMessageIndex(messageId);
-			if (messageIndex === -1) {
-				console.error('Message not found for editing');
-				return;
-			}
+			const idx = conversationsStore.findMessageIndex(messageId);
+			if (idx === -1) return;
+			const msg = conversationsStore.activeMessages[idx];
+			if (msg.role !== 'user') return;
 
-			const messageToEdit = this.activeMessages[messageIndex];
-			if (messageToEdit.role !== 'user') {
-				console.error('Only user messages can be edited with this method');
-				return;
-			}
-
-			// Simply update the message content in-place
 			await DatabaseService.updateMessage(messageId, {
 				content: newContent,
 				timestamp: Date.now()
 			});
+			conversationsStore.updateMessageAtIndex(idx, { content: newContent, timestamp: Date.now() });
 
-			this.updateMessageAtIndex(messageIndex, {
-				content: newContent,
-				timestamp: Date.now()
-			});
-
-			// Check if first user message for title update
-			const allMessages = await DatabaseService.getConversationMessages(this.activeConversation.id);
+			const allMessages = await conversationsStore.getConversationMessages(activeConv.id);
 			const rootMessage = allMessages.find((m) => m.type === 'root' && m.parent === null);
-			const isFirstUserMessage =
-				rootMessage && messageToEdit.parent === rootMessage.id && messageToEdit.role === 'user';
-
-			if (isFirstUserMessage && newContent.trim()) {
-				await this.updateConversationTitleWithConfirmation(
-					this.activeConversation.id,
+			if (rootMessage && msg.parent === rootMessage.id && newContent.trim()) {
+				await conversationsStore.updateConversationTitleWithConfirmation(
+					activeConv.id,
 					newContent.trim(),
-					this.titleUpdateConfirmationCallback
+					conversationsStore.titleUpdateConfirmationCallback
 				);
 			}
-
-			this.updateConversationTimestamp();
+			conversationsStore.updateConversationTimestamp();
 		} catch (error) {
 			console.error('Failed to edit user message:', error);
 		}
 	}
 
-	/**
-	 * Edits a message by creating a new branch with the edited content
-	 * @param messageId - The ID of the message to edit
-	 * @param newContent - The new content for the message
-	 */
 	async editMessageWithBranching(messageId: string, newContent: string): Promise<void> {
-		if (!this.activeConversation || this.isLoading) return;
-
+		const activeConv = conversationsStore.activeConversation;
+		if (!activeConv || this.isLoading) return;
 		try {
-			const messageIndex = this.findMessageIndex(messageId);
-			if (messageIndex === -1) {
-				console.error('Message not found for editing');
-				return;
-			}
+			const idx = conversationsStore.findMessageIndex(messageId);
+			if (idx === -1) return;
+			const msg = conversationsStore.activeMessages[idx];
+			if (msg.role !== 'user') return;
 
-			const messageToEdit = this.activeMessages[messageIndex];
-			if (messageToEdit.role !== 'user') {
-				console.error('Only user messages can be edited');
-				return;
-			}
-
-			// Check if this is the first user message in the conversation
-			// First user message is one that has the root message as its parent
-			const allMessages = await DatabaseService.getConversationMessages(this.activeConversation.id);
+			const allMessages = await conversationsStore.getConversationMessages(activeConv.id);
 			const rootMessage = allMessages.find((m) => m.type === 'root' && m.parent === null);
-			const isFirstUserMessage =
-				rootMessage && messageToEdit.parent === rootMessage.id && messageToEdit.role === 'user';
-
-			let parentId = messageToEdit.parent;
-
-			if (parentId === undefined || parentId === null) {
-				const rootMessage = allMessages.find((m) => m.type === 'root' && m.parent === null);
-				if (rootMessage) {
-					parentId = rootMessage.id;
-				} else {
-					console.error('No root message found for editing');
-					return;
-				}
-			}
+			const isFirstUserMessage = rootMessage && msg.parent === rootMessage.id;
+			const parentId = msg.parent || rootMessage?.id;
+			if (!parentId) return;
 
 			const newMessage = await DatabaseService.createMessageBranch(
 				{
-					convId: messageToEdit.convId,
-					type: messageToEdit.type,
+					convId: msg.convId,
+					type: msg.type,
 					timestamp: Date.now(),
-					role: messageToEdit.role,
+					role: msg.role,
 					content: newContent,
-					thinking: messageToEdit.thinking || '',
-					toolCalls: messageToEdit.toolCalls || '',
+					thinking: msg.thinking || '',
+					toolCalls: msg.toolCalls || '',
 					children: [],
-					extra: messageToEdit.extra ? JSON.parse(JSON.stringify(messageToEdit.extra)) : undefined,
-					model: messageToEdit.model // Preserve original model info when branching
+					extra: msg.extra ? JSON.parse(JSON.stringify(msg.extra)) : undefined,
+					model: msg.model
 				},
 				parentId
 			);
+			await conversationsStore.updateCurrentNode(newMessage.id);
+			conversationsStore.updateConversationTimestamp();
 
-			await DatabaseService.updateCurrentNode(this.activeConversation.id, newMessage.id);
-			this.activeConversation.currNode = newMessage.id;
-			this.updateConversationTimestamp();
-
-			// If this is the first user message, update the conversation title with confirmation if needed
 			if (isFirstUserMessage && newContent.trim()) {
-				await this.updateConversationTitleWithConfirmation(
-					this.activeConversation.id,
+				await conversationsStore.updateConversationTitleWithConfirmation(
+					activeConv.id,
 					newContent.trim(),
-					this.titleUpdateConfirmationCallback
+					conversationsStore.titleUpdateConfirmationCallback
 				);
 			}
-
-			await this.refreshActiveMessages();
-
-			if (messageToEdit.role === 'user') {
-				await this.generateResponseForMessage(newMessage.id);
-			}
+			await conversationsStore.refreshActiveMessages();
+			await this.generateResponseForMessage(newMessage.id);
 		} catch (error) {
 			console.error('Failed to edit message with branching:', error);
 		}
 	}
 
-	/**
-	 * Regenerates an assistant message by creating a new branch with a new response
-	 * @param messageId - The ID of the assistant message to regenerate
-	 */
 	async regenerateMessageWithBranching(messageId: string): Promise<void> {
-		if (!this.activeConversation || this.isLoading) return;
-
+		const activeConv = conversationsStore.activeConversation;
+		if (!activeConv || this.isLoading) return;
 		try {
-			const messageIndex = this.findMessageIndex(messageId);
-			if (messageIndex === -1) {
-				console.error('Message not found for regeneration');
-				return;
-			}
+			const idx = conversationsStore.findMessageIndex(messageId);
+			if (idx === -1) return;
+			const msg = conversationsStore.activeMessages[idx];
+			if (msg.role !== 'assistant') return;
 
-			const messageToRegenerate = this.activeMessages[messageIndex];
-			if (messageToRegenerate.role !== 'assistant') {
-				console.error('Only assistant messages can be regenerated');
-				return;
-			}
+			const allMessages = await conversationsStore.getConversationMessages(activeConv.id);
+			const parentMessage = allMessages.find((m) => m.id === msg.parent);
+			if (!parentMessage) return;
 
-			// Find parent message in all conversation messages, not just active path
-			const conversationMessages = await DatabaseService.getConversationMessages(
-				this.activeConversation.id
-			);
-			const parentMessage = conversationMessages.find((m) => m.id === messageToRegenerate.parent);
-			if (!parentMessage) {
-				console.error('Parent message not found for regeneration');
-				return;
-			}
-
-			this.setConversationLoading(this.activeConversation.id, true);
-			this.clearConversationStreaming(this.activeConversation.id);
+			this.setChatLoading(activeConv.id, true);
+			this.clearChatStreaming(activeConv.id);
 
 			const newAssistantMessage = await DatabaseService.createMessageBranch(
 				{
-					convId: this.activeConversation.id,
+					convId: activeConv.id,
 					type: 'text',
 					timestamp: Date.now(),
 					role: 'assistant',
@@ -1652,54 +767,40 @@ class ChatStore {
 				},
 				parentMessage.id
 			);
+			await conversationsStore.updateCurrentNode(newAssistantMessage.id);
+			conversationsStore.updateConversationTimestamp();
+			await conversationsStore.refreshActiveMessages();
 
-			await DatabaseService.updateCurrentNode(this.activeConversation.id, newAssistantMessage.id);
-			this.activeConversation.currNode = newAssistantMessage.id;
-			this.updateConversationTimestamp();
-			await this.refreshActiveMessages();
-
-			const allConversationMessages = await DatabaseService.getConversationMessages(
-				this.activeConversation.id
-			);
 			const conversationPath = filterByLeafNodeId(
-				allConversationMessages,
+				allMessages,
 				parentMessage.id,
 				false
 			) as DatabaseMessage[];
-
 			await this.streamChatCompletion(conversationPath, newAssistantMessage);
 		} catch (error) {
-			if (this.isAbortError(error)) return;
-
-			console.error('Failed to regenerate message with branching:', error);
-			this.setConversationLoading(this.activeConversation!.id, false);
+			if (!this.isAbortError(error))
+				console.error('Failed to regenerate message with branching:', error);
+			this.setChatLoading(activeConv?.id || '', false);
 		}
 	}
 
-	/**
-	 * Generates a new assistant response for a given user message
-	 * @param userMessageId - ID of user message to respond to
-	 */
 	private async generateResponseForMessage(userMessageId: string): Promise<void> {
-		if (!this.activeConversation) return;
-
+		const activeConv = conversationsStore.activeConversation;
+		if (!activeConv) return;
 		this.errorDialogState = null;
-		this.setConversationLoading(this.activeConversation.id, true);
-		this.clearConversationStreaming(this.activeConversation.id);
+		this.setChatLoading(activeConv.id, true);
+		this.clearChatStreaming(activeConv.id);
 
 		try {
-			// Get conversation path up to the user message
-			const allMessages = await DatabaseService.getConversationMessages(this.activeConversation.id);
+			const allMessages = await conversationsStore.getConversationMessages(activeConv.id);
 			const conversationPath = filterByLeafNodeId(
 				allMessages,
 				userMessageId,
 				false
 			) as DatabaseMessage[];
-
-			// Create new assistant message branch
 			const assistantMessage = await DatabaseService.createMessageBranch(
 				{
-					convId: this.activeConversation.id,
+					convId: activeConv.id,
 					type: 'text',
 					timestamp: Date.now(),
 					role: 'assistant',
@@ -1711,120 +812,65 @@ class ChatStore {
 				},
 				userMessageId
 			);
-
-			// Add assistant message to active messages immediately for UI reactivity
-			this.activeMessages.push(assistantMessage);
-
-			// Stream response to new assistant message
+			conversationsStore.addMessageToActive(assistantMessage);
 			await this.streamChatCompletion(conversationPath, assistantMessage);
 		} catch (error) {
 			console.error('Failed to generate response:', error);
-			this.setConversationLoading(this.activeConversation!.id, false);
+			this.setChatLoading(activeConv.id, false);
 		}
 	}
 
-	/**
-	 * Continues generation for an existing assistant message
-	 * @param messageId - The ID of the assistant message to continue
-	 */
 	async continueAssistantMessage(messageId: string): Promise<void> {
-		if (!this.activeConversation || this.isLoading) return;
-
+		const activeConv = conversationsStore.activeConversation;
+		if (!activeConv || this.isLoading) return;
 		try {
-			const messageIndex = this.findMessageIndex(messageId);
-			if (messageIndex === -1) {
-				console.error('Message not found for continuation');
-				return;
-			}
-
-			const messageToContinue = this.activeMessages[messageIndex];
-			if (messageToContinue.role !== 'assistant') {
-				console.error('Only assistant messages can be continued');
-				return;
-			}
-
-			// Race condition protection: Check if this specific conversation is already loading
-			// This prevents multiple rapid clicks on "Continue" from creating concurrent operations
-			if (this.isConversationLoading(this.activeConversation.id)) {
-				console.warn('Continuation already in progress for this conversation');
-				return;
-			}
+			const idx = conversationsStore.findMessageIndex(messageId);
+			if (idx === -1) return;
+			const msg = conversationsStore.activeMessages[idx];
+			if (msg.role !== 'assistant') return;
+			if (this.isChatLoading(activeConv.id)) return;
 
 			this.errorDialogState = null;
-			this.setConversationLoading(this.activeConversation.id, true);
-			this.clearConversationStreaming(this.activeConversation.id);
+			this.setChatLoading(activeConv.id, true);
+			this.clearChatStreaming(activeConv.id);
 
-			// IMPORTANT: Fetch the latest content from the database to ensure we have
-			// the most up-to-date content, especially after a stopped generation
-			// This prevents issues where the in-memory state might be stale
-			const allMessages = await DatabaseService.getConversationMessages(this.activeConversation.id);
+			const allMessages = await conversationsStore.getConversationMessages(activeConv.id);
 			const dbMessage = allMessages.find((m) => m.id === messageId);
-
 			if (!dbMessage) {
-				console.error('Message not found in database for continuation');
-				this.setConversationLoading(this.activeConversation.id, false);
-
+				this.setChatLoading(activeConv.id, false);
 				return;
 			}
 
-			// Use content from database as the source of truth
 			const originalContent = dbMessage.content;
 			const originalThinking = dbMessage.thinking || '';
-
-			// Get conversation context up to (but not including) the message to continue
-			const conversationContext = this.activeMessages.slice(0, messageIndex);
-
+			const conversationContext = conversationsStore.activeMessages.slice(0, idx);
 			const contextWithContinue = [
-				...conversationContext.map((msg) => {
-					if ('id' in msg && 'convId' in msg && 'timestamp' in msg) {
-						return msg as DatabaseMessage & { extra?: DatabaseMessageExtra[] };
-					}
-					return msg as ApiChatMessageData;
-				}),
-				{
-					role: 'assistant' as const,
-					content: originalContent
-				}
+				...conversationContext,
+				{ role: 'assistant' as const, content: originalContent }
 			];
 
-			let appendedContent = '';
-			let appendedThinking = '';
-			let hasReceivedContent = false;
+			let appendedContent = '',
+				appendedThinking = '',
+				hasReceivedContent = false;
 
 			await chatService.sendMessage(
 				contextWithContinue,
 				{
 					...this.getApiOptions(),
-
 					onChunk: (chunk: string) => {
 						hasReceivedContent = true;
 						appendedContent += chunk;
-						// Preserve originalContent exactly as-is, including any trailing whitespace
-						// The concatenation naturally preserves any whitespace at the end of originalContent
 						const fullContent = originalContent + appendedContent;
-
-						this.setConversationStreaming(
-							messageToContinue.convId,
-							fullContent,
-							messageToContinue.id
-						);
-
-						this.updateMessageAtIndex(messageIndex, {
-							content: fullContent
-						});
+						this.setChatStreaming(msg.convId, fullContent, msg.id);
+						conversationsStore.updateMessageAtIndex(idx, { content: fullContent });
 					},
-
 					onReasoningChunk: (reasoningChunk: string) => {
 						hasReceivedContent = true;
 						appendedThinking += reasoningChunk;
-
-						const fullThinking = originalThinking + appendedThinking;
-
-						this.updateMessageAtIndex(messageIndex, {
-							thinking: fullThinking
+						conversationsStore.updateMessageAtIndex(idx, {
+							thinking: originalThinking + appendedThinking
 						});
 					},
-
 					onComplete: async (
 						finalContent?: string,
 						reasoningContent?: string,
@@ -1832,158 +878,121 @@ class ChatStore {
 					) => {
 						const fullContent = originalContent + (finalContent || appendedContent);
 						const fullThinking = originalThinking + (reasoningContent || appendedThinking);
-
-						const updateData: {
-							content: string;
-							thinking: string;
-							timestamp: number;
-							timings?: ChatMessageTimings;
-						} = {
+						await DatabaseService.updateMessage(msg.id, {
 							content: fullContent,
 							thinking: fullThinking,
 							timestamp: Date.now(),
-							timings: timings
-						};
-
-						await DatabaseService.updateMessage(messageToContinue.id, updateData);
-
-						this.updateMessageAtIndex(messageIndex, updateData);
-
-						this.updateConversationTimestamp();
-
-						this.setConversationLoading(messageToContinue.convId, false);
-						this.clearConversationStreaming(messageToContinue.convId);
-						slotsService.clearConversationState(messageToContinue.convId);
+							timings
+						});
+						conversationsStore.updateMessageAtIndex(idx, {
+							content: fullContent,
+							thinking: fullThinking,
+							timestamp: Date.now(),
+							timings
+						});
+						conversationsStore.updateConversationTimestamp();
+						this.setChatLoading(msg.convId, false);
+						this.clearChatStreaming(msg.convId);
+						slotsService.clearConversationState(msg.convId);
 					},
-
 					onError: async (error: Error) => {
 						if (this.isAbortError(error)) {
-							// User cancelled - save partial continuation if any content was received
 							if (hasReceivedContent && appendedContent) {
-								const partialContent = originalContent + appendedContent;
-								const partialThinking = originalThinking + appendedThinking;
-
-								await DatabaseService.updateMessage(messageToContinue.id, {
-									content: partialContent,
-									thinking: partialThinking,
+								await DatabaseService.updateMessage(msg.id, {
+									content: originalContent + appendedContent,
+									thinking: originalThinking + appendedThinking,
 									timestamp: Date.now()
 								});
-
-								this.updateMessageAtIndex(messageIndex, {
-									content: partialContent,
-									thinking: partialThinking,
+								conversationsStore.updateMessageAtIndex(idx, {
+									content: originalContent + appendedContent,
+									thinking: originalThinking + appendedThinking,
 									timestamp: Date.now()
 								});
 							}
-
-							this.setConversationLoading(messageToContinue.convId, false);
-							this.clearConversationStreaming(messageToContinue.convId);
-							slotsService.clearConversationState(messageToContinue.convId);
-
+							this.setChatLoading(msg.convId, false);
+							this.clearChatStreaming(msg.convId);
+							slotsService.clearConversationState(msg.convId);
 							return;
 						}
-
-						// Non-abort error - rollback to original content
 						console.error('Continue generation error:', error);
-
-						// Rollback: Restore original content in UI
-						this.updateMessageAtIndex(messageIndex, {
+						conversationsStore.updateMessageAtIndex(idx, {
 							content: originalContent,
 							thinking: originalThinking
 						});
-
-						// Ensure database has original content (in case of partial writes)
-						await DatabaseService.updateMessage(messageToContinue.id, {
+						await DatabaseService.updateMessage(msg.id, {
 							content: originalContent,
 							thinking: originalThinking
 						});
-
-						this.setConversationLoading(messageToContinue.convId, false);
-						this.clearConversationStreaming(messageToContinue.convId);
-						slotsService.clearConversationState(messageToContinue.convId);
-
-						const dialogType = error.name === 'TimeoutError' ? 'timeout' : 'server';
-						this.showErrorDialog(dialogType, error.message);
+						this.setChatLoading(msg.convId, false);
+						this.clearChatStreaming(msg.convId);
+						slotsService.clearConversationState(msg.convId);
+						this.showErrorDialog(
+							error.name === 'TimeoutError' ? 'timeout' : 'server',
+							error.message
+						);
 					}
 				},
-				messageToContinue.convId
+				msg.convId
 			);
 		} catch (error) {
-			if (this.isAbortError(error)) return;
-			console.error('Failed to continue message:', error);
-			if (this.activeConversation) {
-				this.setConversationLoading(this.activeConversation.id, false);
-			}
+			if (!this.isAbortError(error)) console.error('Failed to continue message:', error);
+			if (activeConv) this.setChatLoading(activeConv.id, false);
 		}
 	}
 
-	/**
-	 * Public methods for accessing per-conversation states
-	 */
-	public isConversationLoadingPublic(convId: string): boolean {
-		return this.isConversationLoading(convId);
-	}
+	// ============ Public Methods for Per-Conversation State ============
 
-	public getConversationStreamingPublic(
+	public isChatLoadingPublic(convId: string): boolean {
+		return this.isChatLoading(convId);
+	}
+	public getChatStreamingPublic(
 		convId: string
 	): { response: string; messageId: string } | undefined {
-		return this.getConversationStreaming(convId);
+		return this.getChatStreaming(convId);
 	}
-
-	public getAllLoadingConversations(): string[] {
-		return Array.from(this.conversationLoadingStates.keys());
+	public getAllLoadingChats(): string[] {
+		return Array.from(this.chatLoadingStates.keys());
 	}
-
-	public getAllStreamingConversations(): string[] {
-		return Array.from(this.conversationStreamingStates.keys());
+	public getAllStreamingChats(): string[] {
+		return Array.from(this.chatStreamingStates.keys());
 	}
 }
 
 export const chatStore = new ChatStore();
 
-export const conversations = () => chatStore.conversations;
-export const activeConversation = () => chatStore.activeConversation;
-export const activeMessages = () => chatStore.activeMessages;
+// ChatStore state exports
 export const isLoading = () => chatStore.isLoading;
 export const currentResponse = () => chatStore.currentResponse;
-export const isInitialized = () => chatStore.isInitialized;
 export const errorDialog = () => chatStore.errorDialogState;
 
-export const createConversation = chatStore.createConversation.bind(chatStore);
-export const downloadConversation = chatStore.downloadConversation.bind(chatStore);
-export const exportAllConversations = chatStore.exportAllConversations.bind(chatStore);
-export const importConversations = chatStore.importConversations.bind(chatStore);
-export const deleteConversation = chatStore.deleteConversation.bind(chatStore);
+// ChatStore method exports
 export const sendMessage = chatStore.sendMessage.bind(chatStore);
 export const dismissErrorDialog = chatStore.dismissErrorDialog.bind(chatStore);
-
-export const gracefulStop = chatStore.gracefulStop.bind(chatStore);
-
-// Branching operations
-export const refreshActiveMessages = chatStore.refreshActiveMessages.bind(chatStore);
-export const navigateToSibling = chatStore.navigateToSibling.bind(chatStore);
-export const editAssistantMessage = chatStore.editAssistantMessage.bind(chatStore);
-export const editMessageWithBranching = chatStore.editMessageWithBranching.bind(chatStore);
-export const editUserMessagePreserveResponses =
-	chatStore.editUserMessagePreserveResponses.bind(chatStore);
-export const regenerateMessageWithBranching =
-	chatStore.regenerateMessageWithBranching.bind(chatStore);
-export const continueAssistantMessage = chatStore.continueAssistantMessage.bind(chatStore);
-export const deleteMessage = chatStore.deleteMessage.bind(chatStore);
-export const getDeletionInfo = chatStore.getDeletionInfo.bind(chatStore);
-export const updateConversationName = chatStore.updateConversationName.bind(chatStore);
-export const setTitleUpdateConfirmationCallback =
-	chatStore.setTitleUpdateConfirmationCallback.bind(chatStore);
-
 export function stopGeneration() {
 	chatStore.stopGeneration();
 }
-export const messages = () => chatStore.activeMessages;
+
+// Message operations
+export const updateMessage = chatStore.updateMessage.bind(chatStore);
+export const regenerateMessage = chatStore.regenerateMessage.bind(chatStore);
+export const deleteMessage = chatStore.deleteMessage.bind(chatStore);
+export const getDeletionInfo = chatStore.getDeletionInfo.bind(chatStore);
+
+// Branching operations
+export const editAssistantMessage = chatStore.editAssistantMessage.bind(chatStore);
+export const editUserMessagePreserveResponses =
+	chatStore.editUserMessagePreserveResponses.bind(chatStore);
+export const editMessageWithBranching = chatStore.editMessageWithBranching.bind(chatStore);
+export const regenerateMessageWithBranching =
+	chatStore.regenerateMessageWithBranching.bind(chatStore);
+export const continueAssistantMessage = chatStore.continueAssistantMessage.bind(chatStore);
 
 // Per-conversation state access
-export const isConversationLoading = (convId: string) =>
-	chatStore.isConversationLoadingPublic(convId);
-export const getConversationStreaming = (convId: string) =>
-	chatStore.getConversationStreamingPublic(convId);
-export const getAllLoadingConversations = () => chatStore.getAllLoadingConversations();
-export const getAllStreamingConversations = () => chatStore.getAllStreamingConversations();
+export const isChatLoading = (convId: string) => chatStore.isChatLoadingPublic(convId);
+export const getChatStreaming = (convId: string) => chatStore.getChatStreamingPublic(convId);
+export const getAllLoadingChats = () => chatStore.getAllLoadingChats();
+export const getAllStreamingChats = () => chatStore.getAllStreamingChats();
+
+// Sync/clear UI state when switching conversations
+export const syncLoadingStateForChat = chatStore.syncLoadingStateForChat.bind(chatStore);
+export const clearUIState = chatStore.clearUIState.bind(chatStore);
diff --git a/tools/server/webui/src/lib/stores/conversations.svelte.ts b/tools/server/webui/src/lib/stores/conversations.svelte.ts
new file mode 100644
index 0000000000..5bab0c7a8a
--- /dev/null
+++ b/tools/server/webui/src/lib/stores/conversations.svelte.ts
@@ -0,0 +1,459 @@
+import { browser } from '$app/environment';
+import { conversationsService } from '$lib/services/conversations';
+import { slotsService } from '$lib/services/slots';
+import { config } from '$lib/stores/settings.svelte';
+import { filterByLeafNodeId, findLeafNode } from '$lib/utils/branching';
+import type { DatabaseConversation, DatabaseMessage } from '$lib/types/database';
+
+/**
+ * ConversationsStore - Persistent conversation data and lifecycle management
+ *
+ * **Terminology - Chat vs Conversation:**
+ * - **Chat**: The active interaction space with the Chat Completions API. Represents the
+ *   real-time streaming session, loading states, and UI visualization of AI communication.
+ *   Managed by ChatStore, a "chat" is ephemeral and exists during active AI interactions.
+ * - **Conversation**: The persistent database entity storing all messages and metadata.
+ *   A "conversation" survives across sessions, page reloads, and browser restarts.
+ *   It contains the complete message history, branching structure, and conversation metadata.
+ *
+ * This store manages all conversation-level data and operations including creation, loading,
+ * deletion, and navigation. It maintains the list of conversations and the currently active
+ * conversation with its message history, providing reactive state for UI components.
+ *
+ * **Architecture & Relationships:**
+ * - **ConversationsStore** (this class): Persistent conversation data management
+ *   - Manages conversation list and active conversation state
+ *   - Handles conversation CRUD operations via ConversationsService
+ *   - Maintains active message array for current conversation
+ *   - Coordinates branching navigation (currNode tracking)
+ *
+ * - **ChatStore**: Uses conversation data as context for active AI streaming
+ * - **ConversationsService**: Database operations for conversation persistence
+ * - **SlotsService**: Notified of active conversation changes
+ * - **DatabaseService**: Low-level storage for conversations and messages
+ *
+ * **Key Features:**
+ * - **Conversation Lifecycle**: Create, load, update, delete conversations
+ * - **Message Management**: Active message array with branching support
+ * - **Import/Export**: JSON-based conversation backup and restore
+ * - **Branch Navigation**: Navigate between message tree branches
+ * - **Title Management**: Auto-update titles with confirmation dialogs
+ * - **Reactive State**: Svelte 5 runes for automatic UI updates
+ *
+ * **State Properties:**
+ * - `conversations`: All conversations sorted by last modified
+ * - `activeConversation`: Currently viewed conversation
+ * - `activeMessages`: Messages in current conversation path
+ * - `isInitialized`: Store initialization status
+ */
+class ConversationsStore {
+	/** List of all conversations */
+	conversations = $state<DatabaseConversation[]>([]);
+
+	/** Currently active conversation */
+	activeConversation = $state<DatabaseConversation | null>(null);
+
+	/** Messages in the active conversation (filtered by currNode path) */
+	activeMessages = $state<DatabaseMessage[]>([]);
+
+	/** Whether the store has been initialized */
+	isInitialized = $state(false);
+
+	/** Callback for title update confirmation dialog */
+	titleUpdateConfirmationCallback?: (currentTitle: string, newTitle: string) => Promise<boolean>;
+
+	constructor() {
+		if (browser) {
+			this.initialize();
+		}
+	}
+
+	/**
+	 * Initializes the conversations store by loading conversations from the database
+	 */
+	async initialize(): Promise<void> {
+		try {
+			await this.loadConversations();
+			this.isInitialized = true;
+		} catch (error) {
+			console.error('Failed to initialize conversations store:', error);
+		}
+	}
+
+	/**
+	 * Loads all conversations from the database
+	 */
+	async loadConversations(): Promise<void> {
+		this.conversations = await conversationsService.loadAllConversations();
+	}
+
+	/**
+	 * Creates a new conversation and navigates to it
+	 * @param name - Optional name for the conversation
+	 * @returns The ID of the created conversation
+	 */
+	async createConversation(name?: string): Promise<string> {
+		const conversation = await conversationsService.createConversation(name);
+
+		this.conversations.unshift(conversation);
+		this.activeConversation = conversation;
+		this.activeMessages = [];
+
+		slotsService.setActiveConversation(conversation.id);
+
+		await conversationsService.navigateToConversation(conversation.id);
+
+		return conversation.id;
+	}
+
+	/**
+	 * Loads a specific conversation and its messages
+	 * @param convId - The conversation ID to load
+	 * @returns True if conversation was loaded successfully
+	 */
+	async loadConversation(convId: string): Promise<boolean> {
+		try {
+			const conversation = await conversationsService.loadConversation(convId);
+
+			if (!conversation) {
+				return false;
+			}
+
+			this.activeConversation = conversation;
+
+			slotsService.setActiveConversation(convId);
+
+			if (conversation.currNode) {
+				const allMessages = await conversationsService.getConversationMessages(convId);
+				this.activeMessages = filterByLeafNodeId(
+					allMessages,
+					conversation.currNode,
+					false
+				) as DatabaseMessage[];
+			} else {
+				// Load all messages for conversations without currNode (backward compatibility)
+				this.activeMessages = await conversationsService.getConversationMessages(convId);
+			}
+
+			return true;
+		} catch (error) {
+			console.error('Failed to load conversation:', error);
+			return false;
+		}
+	}
+
+	/**
+	 * Clears the active conversation and messages
+	 * Used when navigating away from chat or starting fresh
+	 */
+	clearActiveConversation(): void {
+		this.activeConversation = null;
+		this.activeMessages = [];
+		slotsService.setActiveConversation(null);
+	}
+
+	/**
+	 * Refreshes active messages based on currNode after branch navigation
+	 */
+	async refreshActiveMessages(): Promise<void> {
+		if (!this.activeConversation) return;
+
+		const allMessages = await conversationsService.getConversationMessages(
+			this.activeConversation.id
+		);
+
+		if (allMessages.length === 0) {
+			this.activeMessages = [];
+			return;
+		}
+
+		const leafNodeId =
+			this.activeConversation.currNode ||
+			allMessages.reduce((latest, msg) => (msg.timestamp > latest.timestamp ? msg : latest)).id;
+
+		const currentPath = filterByLeafNodeId(allMessages, leafNodeId, false) as DatabaseMessage[];
+
+		this.activeMessages.length = 0;
+		this.activeMessages.push(...currentPath);
+	}
+
+	/**
+	 * Updates the name of a conversation
+	 * @param convId - The conversation ID to update
+	 * @param name - The new name for the conversation
+	 */
+	async updateConversationName(convId: string, name: string): Promise<void> {
+		try {
+			await conversationsService.updateConversationName(convId, name);
+
+			const convIndex = this.conversations.findIndex((c) => c.id === convId);
+
+			if (convIndex !== -1) {
+				this.conversations[convIndex].name = name;
+			}
+
+			if (this.activeConversation?.id === convId) {
+				this.activeConversation.name = name;
+			}
+		} catch (error) {
+			console.error('Failed to update conversation name:', error);
+		}
+	}
+
+	/**
+	 * Sets the callback function for title update confirmations
+	 * @param callback - Function to call when confirmation is needed
+	 */
+	setTitleUpdateConfirmationCallback(
+		callback: (currentTitle: string, newTitle: string) => Promise<boolean>
+	): void {
+		this.titleUpdateConfirmationCallback = callback;
+	}
+
+	/**
+	 * Updates conversation title with optional confirmation dialog based on settings
+	 * @param convId - The conversation ID to update
+	 * @param newTitle - The new title content
+	 * @param onConfirmationNeeded - Callback when user confirmation is needed
+	 * @returns True if title was updated, false if cancelled
+	 */
+	async updateConversationTitleWithConfirmation(
+		convId: string,
+		newTitle: string,
+		onConfirmationNeeded?: (currentTitle: string, newTitle: string) => Promise<boolean>
+	): Promise<boolean> {
+		try {
+			const currentConfig = config();
+
+			if (currentConfig.askForTitleConfirmation && onConfirmationNeeded) {
+				const conversation = await conversationsService.loadConversation(convId);
+				if (!conversation) return false;
+
+				const shouldUpdate = await onConfirmationNeeded(conversation.name, newTitle);
+				if (!shouldUpdate) return false;
+			}
+
+			await this.updateConversationName(convId, newTitle);
+			return true;
+		} catch (error) {
+			console.error('Failed to update conversation title with confirmation:', error);
+			return false;
+		}
+	}
+
+	/**
+	 * Updates the current node of the active conversation
+	 * @param nodeId - The new current node ID
+	 */
+	async updateCurrentNode(nodeId: string): Promise<void> {
+		if (!this.activeConversation) return;
+
+		await conversationsService.updateCurrentNode(this.activeConversation.id, nodeId);
+		this.activeConversation.currNode = nodeId;
+	}
+
+	/**
+	 * Updates conversation lastModified timestamp and moves it to top of list
+	 */
+	updateConversationTimestamp(): void {
+		if (!this.activeConversation) return;
+
+		const chatIndex = this.conversations.findIndex((c) => c.id === this.activeConversation!.id);
+
+		if (chatIndex !== -1) {
+			this.conversations[chatIndex].lastModified = Date.now();
+			const updatedConv = this.conversations.splice(chatIndex, 1)[0];
+			this.conversations.unshift(updatedConv);
+		}
+	}
+
+	/**
+	 * Navigates to a specific sibling branch by updating currNode and refreshing messages
+	 * @param siblingId - The sibling message ID to navigate to
+	 */
+	async navigateToSibling(siblingId: string): Promise<void> {
+		if (!this.activeConversation) return;
+
+		// Get the current first user message before navigation
+		const allMessages = await conversationsService.getConversationMessages(
+			this.activeConversation.id
+		);
+		const rootMessage = allMessages.find((m) => m.type === 'root' && m.parent === null);
+		const currentFirstUserMessage = this.activeMessages.find(
+			(m) => m.role === 'user' && m.parent === rootMessage?.id
+		);
+
+		const currentLeafNodeId = findLeafNode(allMessages, siblingId);
+
+		await conversationsService.updateCurrentNode(this.activeConversation.id, currentLeafNodeId);
+		this.activeConversation.currNode = currentLeafNodeId;
+		await this.refreshActiveMessages();
+
+		// Only show title dialog if we're navigating between different first user message siblings
+		if (rootMessage && this.activeMessages.length > 0) {
+			const newFirstUserMessage = this.activeMessages.find(
+				(m) => m.role === 'user' && m.parent === rootMessage.id
+			);
+
+			if (
+				newFirstUserMessage &&
+				newFirstUserMessage.content.trim() &&
+				(!currentFirstUserMessage ||
+					newFirstUserMessage.id !== currentFirstUserMessage.id ||
+					newFirstUserMessage.content.trim() !== currentFirstUserMessage.content.trim())
+			) {
+				await this.updateConversationTitleWithConfirmation(
+					this.activeConversation.id,
+					newFirstUserMessage.content.trim(),
+					this.titleUpdateConfirmationCallback
+				);
+			}
+		}
+	}
+
+	/**
+	 * Deletes a conversation and all its messages
+	 * @param convId - The conversation ID to delete
+	 */
+	async deleteConversation(convId: string): Promise<void> {
+		try {
+			await conversationsService.deleteConversation(convId);
+
+			this.conversations = this.conversations.filter((c) => c.id !== convId);
+
+			if (this.activeConversation?.id === convId) {
+				this.activeConversation = null;
+				this.activeMessages = [];
+				await conversationsService.navigateToNewChat();
+			}
+		} catch (error) {
+			console.error('Failed to delete conversation:', error);
+		}
+	}
+
+	/**
+	 * Downloads a conversation as JSON file
+	 * @param convId - The conversation ID to download
+	 */
+	async downloadConversation(convId: string): Promise<void> {
+		if (this.activeConversation?.id === convId) {
+			// Use current active conversation data
+			conversationsService.downloadConversation(this.activeConversation, this.activeMessages);
+		} else {
+			// Load the conversation if not currently active
+			const conversation = await conversationsService.loadConversation(convId);
+			if (!conversation) return;
+
+			const messages = await conversationsService.getConversationMessages(convId);
+			conversationsService.downloadConversation(conversation, messages);
+		}
+	}
+
+	/**
+	 * Exports all conversations with their messages as a JSON file
+	 * @returns The list of exported conversations
+	 */
+	async exportAllConversations(): Promise<DatabaseConversation[]> {
+		return await conversationsService.exportAllConversations();
+	}
+
+	/**
+	 * Imports conversations from a JSON file
+	 * @returns The list of imported conversations
+	 */
+	async importConversations(): Promise<DatabaseConversation[]> {
+		const importedConversations = await conversationsService.importConversations();
+
+		// Refresh conversations list after import
+		await this.loadConversations();
+
+		return importedConversations;
+	}
+
+	/**
+	 * Gets all messages for a specific conversation
+	 * @param convId - The conversation ID
+	 * @returns Array of messages
+	 */
+	async getConversationMessages(convId: string): Promise<DatabaseMessage[]> {
+		return await conversationsService.getConversationMessages(convId);
+	}
+
+	/**
+	 * Adds a message to the active messages array
+	 * Used by ChatStore when creating new messages
+	 * @param message - The message to add
+	 */
+	addMessageToActive(message: DatabaseMessage): void {
+		this.activeMessages.push(message);
+	}
+
+	/**
+	 * Updates a message at a specific index in active messages
+	 * Creates a new object to trigger Svelte 5 reactivity
+	 * @param index - The index of the message to update
+	 * @param updates - Partial message data to update
+	 */
+	updateMessageAtIndex(index: number, updates: Partial<DatabaseMessage>): void {
+		if (index !== -1 && this.activeMessages[index]) {
+			// Create new object to trigger Svelte 5 reactivity
+			this.activeMessages[index] = { ...this.activeMessages[index], ...updates };
+		}
+	}
+
+	/**
+	 * Finds the index of a message in active messages
+	 * @param messageId - The message ID to find
+	 * @returns The index of the message, or -1 if not found
+	 */
+	findMessageIndex(messageId: string): number {
+		return this.activeMessages.findIndex((m) => m.id === messageId);
+	}
+
+	/**
+	 * Removes messages from active messages starting at an index
+	 * @param startIndex - The index to start removing from
+	 */
+	sliceActiveMessages(startIndex: number): void {
+		this.activeMessages = this.activeMessages.slice(0, startIndex);
+	}
+
+	/**
+	 * Removes a message from active messages by index
+	 * @param index - The index to remove
+	 * @returns The removed message or undefined
+	 */
+	removeMessageAtIndex(index: number): DatabaseMessage | undefined {
+		if (index !== -1) {
+			return this.activeMessages.splice(index, 1)[0];
+		}
+		return undefined;
+	}
+}
+
+export const conversationsStore = new ConversationsStore();
+
+// Export getter functions for reactive access
+export const conversations = () => conversationsStore.conversations;
+export const activeConversation = () => conversationsStore.activeConversation;
+export const activeMessages = () => conversationsStore.activeMessages;
+export const isConversationsInitialized = () => conversationsStore.isInitialized;
+
+// Export conversation operations
+export const createConversation = conversationsStore.createConversation.bind(conversationsStore);
+export const loadConversation = conversationsStore.loadConversation.bind(conversationsStore);
+export const deleteConversation = conversationsStore.deleteConversation.bind(conversationsStore);
+export const clearActiveConversation =
+	conversationsStore.clearActiveConversation.bind(conversationsStore);
+export const updateConversationName =
+	conversationsStore.updateConversationName.bind(conversationsStore);
+export const downloadConversation =
+	conversationsStore.downloadConversation.bind(conversationsStore);
+export const exportAllConversations =
+	conversationsStore.exportAllConversations.bind(conversationsStore);
+export const importConversations = conversationsStore.importConversations.bind(conversationsStore);
+export const navigateToSibling = conversationsStore.navigateToSibling.bind(conversationsStore);
+export const refreshActiveMessages =
+	conversationsStore.refreshActiveMessages.bind(conversationsStore);
+export const setTitleUpdateConfirmationCallback =
+	conversationsStore.setTitleUpdateConfirmationCallback.bind(conversationsStore);
diff --git a/tools/server/webui/src/routes/+layout.svelte b/tools/server/webui/src/routes/+layout.svelte
index dfe094c079..f618257b56 100644
--- a/tools/server/webui/src/routes/+layout.svelte
+++ b/tools/server/webui/src/routes/+layout.svelte
@@ -2,11 +2,11 @@
 	import '../app.css';
 	import { page } from '$app/state';
 	import { ChatSidebar, DialogConversationTitleUpdate } from '$lib/components/app';
+	import { isLoading } from '$lib/stores/chat.svelte';
 	import {
 		activeMessages,
-		isLoading,
 		setTitleUpdateConfirmationCallback
-	} from '$lib/stores/chat.svelte';
+	} from '$lib/stores/conversations.svelte';
 	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
 	import { serverStore } from '$lib/stores/server.svelte';
 	import { config, settingsStore } from '$lib/stores/settings.svelte';
diff --git a/tools/server/webui/src/routes/+page.svelte b/tools/server/webui/src/routes/+page.svelte
index cd18dabccb..4437b4bf11 100644
--- a/tools/server/webui/src/routes/+page.svelte
+++ b/tools/server/webui/src/routes/+page.svelte
@@ -1,21 +1,28 @@
 <script lang="ts">
 	import { ChatScreen } from '$lib/components/app';
-	import { chatStore, isInitialized } from '$lib/stores/chat.svelte';
+	import { sendMessage, clearUIState } from '$lib/stores/chat.svelte';
+	import {
+		conversationsStore,
+		isConversationsInitialized,
+		clearActiveConversation,
+		createConversation
+	} from '$lib/stores/conversations.svelte';
 	import { onMount } from 'svelte';
 	import { page } from '$app/state';
 
 	let qParam = $derived(page.url.searchParams.get('q'));
 
 	onMount(async () => {
-		if (!isInitialized) {
-			await chatStore.initialize();
+		if (!isConversationsInitialized()) {
+			await conversationsStore.initialize();
 		}
 
-		chatStore.clearActiveConversation();
+		clearActiveConversation();
+		clearUIState();
 
 		if (qParam !== null) {
-			await chatStore.createConversation();
-			await chatStore.sendMessage(qParam);
+			await createConversation();
+			await sendMessage(qParam);
 		}
 	});
 </script>
diff --git a/tools/server/webui/src/routes/chat/[id]/+page.svelte b/tools/server/webui/src/routes/chat/[id]/+page.svelte
index bca064a977..172629bcc1 100644
--- a/tools/server/webui/src/routes/chat/[id]/+page.svelte
+++ b/tools/server/webui/src/routes/chat/[id]/+page.svelte
@@ -3,13 +3,12 @@
 	import { page } from '$app/state';
 	import { afterNavigate } from '$app/navigation';
 	import { ChatScreen } from '$lib/components/app';
+	import { isLoading, stopGeneration, syncLoadingStateForChat } from '$lib/stores/chat.svelte';
 	import {
-		chatStore,
 		activeConversation,
-		isLoading,
-		stopGeneration,
-		activeMessages
-	} from '$lib/stores/chat.svelte';
+		activeMessages,
+		loadConversation
+	} from '$lib/stores/conversations.svelte';
 	import { selectModel, modelOptions, selectedModelId } from '$lib/stores/models.svelte';
 
 	let chatId = $derived(page.params.id);
@@ -67,9 +66,10 @@
 			}
 
 			(async () => {
-				const success = await chatStore.loadConversation(chatId);
-
-				if (!success) {
+				const success = await loadConversation(chatId);
+				if (success) {
+					syncLoadingStateForChat(chatId);
+				} else {
 					await goto('#/');
 				}
 			})();