ui: Stores architecture improvements (#26910)

* refactor: Stores barrel imports + SSR gates * refactor: Drop agenticStore wrapper exports * refactor: Drop chatStore wrapper exports * refactor: Drop modelsStore wrapper exports * refactor: Drop serverStore wrapper exports * refactor: Drop unused mcpStore wrapper exports * refactor: Drop mcpResourceStore wrapper exports * refactor: Drop conversationsStore wrapper exports + move buildConversationTree to utils * refactor: Drop settingsStore wrapper exports * refactor: Drop unused toolsStore wrapper exports * refactor: Fix lint errors from store wrapper removal * fix: Missing change * refactor: Cleanup * refactor: Context Stats store
2026-08-13 08:11:30 +02:00
parent a6040c925c
commit 094e53db1c
116 changed files with 937 additions and 945 deletions
@@ -3,7 +3,7 @@
 	import { X } from '@lucide/svelte';
 	import { ActionIcon } from '$lib/components/app';
 	import * as Tooltip from '$lib/components/ui/tooltip';
-	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { mcpStore } from '$lib/stores';
 	import type { MCPResourceAttachment } from '$lib/types';
 	import { getResourceDisplayName, getResourceIcon } from '$lib/utils';

@@ -5,7 +5,7 @@
 		ChatAttachmentsPreviewNavButtons,
 		ChatAttachmentsPreviewThumbnailStrip
 	} from '$lib/components/app';
-	import { modelsStore } from '$lib/stores/models.svelte';
+	import { modelsStore } from '$lib/stores';
 	import {
 		createBase64DataUrl,
 		formatFileSize,
@@ -26,19 +26,16 @@
 		SpecialFileType
 	} from '$lib/enums';
 	import { useChatFormPickers } from '$lib/hooks/use-chat-form-pickers.svelte';
-	import { chatStore } from '$lib/stores/chat.svelte';
 	import {
-		activeConversation,
-		activeMessages,
+		chatStore,
 		conversationsStore,
-		pendingCwd
-	} from '$lib/stores/conversations.svelte';
-	import { mcpStore } from '$lib/stores/mcp.svelte';
-	import { mcpHasResourceAttachments } from '$lib/stores/mcp-resources.svelte';
-	import { modelOptions, selectedModelId } from '$lib/stores/models.svelte';
-	import { isRouterMode } from '$lib/stores/server.svelte';
-	import { config } from '$lib/stores/settings.svelte';
-	import { toolsStore } from '$lib/stores/tools.svelte';
+		mcpResourceStore,
+		mcpStore,
+		modelsStore,
+		serverStore,
+		settingsStore,
+		toolsStore
+	} from '$lib/stores';
 	import type {
 		FileMentionEntry,
 		GetPromptResult,
@@ -143,7 +140,7 @@
 	// float above the box.
 	let mentionAnchor: HTMLDivElement | null = $state(null);

-	let cwd = $derived(activeConversation()?.cwd ?? pendingCwd());
+	let cwd = $derived(conversationsStore.activeConversation?.cwd ?? conversationsStore.pendingCwd);

 	const pickers = useChatFormPickers({
 		focusInput: refocusInput,
@@ -184,7 +181,7 @@
 	let isResourceDialogOpen = $state(false);
 	let preSelectedResourceUri = $state<string | undefined>(undefined);

-	let currentConfig = $derived(config());
+	let currentConfig = $derived(settingsStore.config);

 	let pasteLongTextToFileLength = $derived.by(() => {
 		const n = Number(currentConfig.pasteLongTextToFileLen);
@@ -192,18 +189,18 @@
 		return Number.isNaN(n) ? Number(SETTING_CONFIG_DEFAULT.pasteLongTextToFileLen) : n;
 	});

-	let isRouter = $derived(isRouterMode());
+	let isRouter = $derived(serverStore.isRouterMode);
 	let conversationModel = $derived(
-		chatStore.getConversationModel(activeMessages() as DatabaseMessage[])
+		chatStore.getConversationModel(conversationsStore.activeMessages as DatabaseMessage[])
 	);
 	let activeModelId = $derived.by(() => {
-		const options = modelOptions();
+		const options = modelsStore.models;

 		if (!isRouter) {
 			return options.length > 0 ? options[0].model : null;
 		}

-		const selectedId = selectedModelId();
+		const selectedId = modelsStore.selectedModelId;

 		if (selectedId) {
 			const model = options.find((m) => m.id === selectedId);
@@ -220,7 +217,9 @@
 		return null;
 	});

-	let hasModelSelected = $derived(!isRouter || !!conversationModel || !!selectedModelId());
+	let hasModelSelected = $derived(
+		!isRouter || !!conversationModel || !!modelsStore.selectedModelId
+	);
 	let hasLoadingAttachments = $derived(uploadedFiles.some((f) => f.isLoading));
 	let hasAttachments = $derived(
 		(attachments && attachments.length > 0) || (uploadedFiles && uploadedFiles.length > 0)
@@ -634,7 +633,7 @@
 				/>
 			{/if}

-			{#if mcpHasResourceAttachments()}
+			{#if mcpResourceStore.hasAttachments}
 				<ChatFormMcpResourcesList
 					class="mb-3"
 					onResourceClick={(uri) => {
@@ -6,8 +6,7 @@
 	import { Switch } from '$lib/components/ui/switch';
 	import { ICON_CLASS_DEFAULT, ROUTES } from '$lib/constants';
 	import { HealthCheckStatus } from '$lib/enums';
-	import { conversationsStore } from '$lib/stores/conversations.svelte';
-	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { conversationsStore, mcpStore } from '$lib/stores';
 	import type { MCPServerSettingsEntry } from '$lib/types';

 	interface Props {
@@ -24,8 +24,7 @@
 	import { useAttachmentMenu } from '$lib/hooks/use-attachment-menu.svelte';
 	import { useReasoningMenu } from '$lib/hooks/use-reasoning-menu.svelte';
 	import { useToolsPanel } from '$lib/hooks/use-tools-panel.svelte';
-	import { conversationsStore } from '$lib/stores/conversations.svelte';
-	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { conversationsStore, mcpStore } from '$lib/stores';
 	import type { Snippet } from 'svelte';

 	interface Props {
@@ -6,8 +6,7 @@
 	import * as Tooltip from '$lib/components/ui/tooltip';
 	import { CLI_FLAGS, ICON_CLASS_DEFAULT } from '$lib/constants';
 	import { useToolsPanel } from '$lib/hooks/use-tools-panel.svelte';
-	import { mcpStore } from '$lib/stores/mcp.svelte';
-	import { toolsStore } from '$lib/stores/tools.svelte';
+	import { mcpStore, toolsStore } from '$lib/stores';

 	const toolsPanel = useToolsPanel();
 	const hasMcpServersAvailable = $derived(mcpStore.getServers().length > 0);
@@ -2,7 +2,7 @@
 	import ChatFormActionAddButton from './ChatFormActionAddButton.svelte';
 	import ChatFormActionAddDropdown from './ChatFormActionAddDropdown.svelte';
 	import ChatFormActionAddSheet from './ChatFormActionAddSheet.svelte';
-	import { isMobile } from '$lib/stores/viewport.svelte';
+	import { isMobile } from '$lib/stores';

 	interface Props {
 		disabled?: boolean;
@@ -1,15 +1,6 @@
 <script lang="ts">
 	import { ModelsSelectorDropdown, ModelsSelectorSheet } from '$lib/components/app';
-	import { chatStore } from '$lib/stores/chat.svelte';
-	import { activeMessages } from '$lib/stores/conversations.svelte';
-	import {
-		modelOptions,
-		modelsStore,
-		selectedModelId,
-		selectedModelName
-	} from '$lib/stores/models.svelte';
-	import { isRouterMode, serverError } from '$lib/stores/server.svelte';
-	import { isMobile } from '$lib/stores/viewport.svelte';
+	import { chatStore, conversationsStore, isMobile, modelsStore, serverStore } from '$lib/stores';

 	interface Props {
 		disabled?: boolean;
@@ -35,17 +26,17 @@
 		useGlobalSelection = false
 	}: Props = $props();

-	let isRouter = $derived(isRouterMode());
-	let isOffline = $derived(!!serverError());
+	let isRouter = $derived(serverStore.isRouterMode);
+	let isOffline = $derived(!!serverStore.error);

 	let conversationModel = $derived(
-		chatStore.getConversationModel(activeMessages() as DatabaseMessage[])
+		chatStore.getConversationModel(conversationsStore.activeMessages as DatabaseMessage[])
 	);

 	let lastSyncedConversationModel: string | null = null;

 	let selectorModel = $derived.by(() => {
-		const storeModel = selectedModelName();
+		const storeModel = modelsStore.selectedModelName;

 		if (storeModel && storeModel !== conversationModel) {
 			return storeModel;
@@ -60,7 +51,7 @@

 	$effect(() => {
 		if (conversationModel && conversationModel !== lastSyncedConversationModel) {
-			if (modelOptions().some((m) => m.model === conversationModel)) {
+			if (modelsStore.models.some((m) => m.model === conversationModel)) {
 				modelsStore.selectedModelName = conversationModel;
 				modelsStore.selectModelByName(conversationModel);
 			} else {
@@ -73,24 +64,24 @@
 			isRouter &&
 			!modelsStore.selectedModelId &&
 			modelsStore.loadedModelIds.length > 0 &&
-			activeMessages().length > 0 &&
+			conversationsStore.activeMessages.length > 0 &&
 			!conversationModel
 		) {
 			lastSyncedConversationModel = null;
-			const first = modelOptions().find((m) => modelsStore.loadedModelIds.includes(m.model));
+			const first = modelsStore.models.find((m) => modelsStore.loadedModelIds.includes(m.model));

 			if (first) modelsStore.selectModelById(first.id);
 		}
 	});

 	let activeModelId = $derived.by(() => {
-		const options = modelOptions();
+		const options = modelsStore.models;

 		if (!isRouter) {
 			return options.length > 0 ? options[0].model : null;
 		}

-		const selectedId = selectedModelId();
+		const selectedId = modelsStore.selectedModelId;

 		if (selectedId) {
 			const model = options.find((m) => m.id === selectedId);
@@ -140,21 +131,23 @@
 	});

 	$effect(() => {
-		hasModelSelected = !isRouter || !!conversationModel || !!selectedModelId();
+		hasModelSelected = !isRouter || !!conversationModel || !!modelsStore.selectedModelId;
 	});

 	$effect(() => {
 		if (!isRouter) {
 			isSelectedModelInCache = true;
 		} else if (conversationModel) {
-			isSelectedModelInCache = modelOptions().some((option) => option.model === conversationModel);
+			isSelectedModelInCache = modelsStore.models.some(
+				(option) => option.model === conversationModel
+			);
 		} else {
-			const currentModelId = selectedModelId();
+			const currentModelId = modelsStore.selectedModelId;

 			if (!currentModelId) {
 				isSelectedModelInCache = false;
 			} else {
-				isSelectedModelInCache = modelOptions().some((option) => option.id === currentModelId);
+				isSelectedModelInCache = modelsStore.models.some((option) => option.id === currentModelId);
 			}
 		}
 	});
@@ -13,14 +13,7 @@
 	import { ICON_CLASS_DEFAULT, ROUTES } from '$lib/constants';
 	import { FileTypeCategory, MessageRole } from '$lib/enums';
 	import { ChatService } from '$lib/services';
-	import {
-		activeProcessingState,
-		isChatStreaming,
-		isLoading as chatIsLoading
-	} from '$lib/stores/chat.svelte';
-	import { activeMessages, conversationsStore } from '$lib/stores/conversations.svelte';
-	import { mcpStore } from '$lib/stores/mcp.svelte';
-	import { config } from '$lib/stores/settings.svelte';
+	import { chatStore, conversationsStore, mcpStore, settingsStore } from '$lib/stores';
 	import { getFileTypeCategory } from '$lib/utils';

 	interface Props {
@@ -61,7 +54,7 @@
 		uploadedFiles = []
 	}: Props = $props();

-	let currentConfig = $derived(config());
+	let currentConfig = $derived(settingsStore.config);

 	let hasMcpPromptsSupport = $derived.by(() => {
 		const perChatOverrides = conversationsStore.getAllMcpServerOverrides();
@@ -103,7 +96,7 @@
 	let hasProcessedTokens = $derived.by(() => {
 		if (!page.params.id) return false;

-		const messages = activeMessages() as DatabaseMessage[];
+		const messages = conversationsStore.activeMessages as DatabaseMessage[];

 		let totalHistoricalTokens = 0;

@@ -125,9 +118,9 @@

 		if (totalHistoricalTokens > 0) return true;

-		if (!chatIsLoading() && !isChatStreaming()) return false;
+		if (!chatStore.isLoading && !chatStore.isStreaming()) return false;

-		const processingState = activeProcessingState();
+		const processingState = chatStore.activeProcessingState;

 		if (!processingState) return false;

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { CODE_BLOCK } from '$lib/constants';
 	import { ColorMode } from '$lib/enums';
-	import { isMobile } from '$lib/stores/viewport.svelte';
+	import { isMobile } from '$lib/stores';
 	import type { ContentEditableToken } from '$lib/types';
 	import type { SourceHistoryEntry } from '$lib/utils';
 	import {
@@ -1,32 +1,32 @@
 <script lang="ts">
 	import ContextGaugeDial from './ContextGaugeDial.svelte';
 	import { useContextGauge } from '$lib/hooks/use-context-gauge.svelte';
-	import { chatStore, isChatStreaming, isLoading } from '$lib/stores/chat.svelte';
 	import {
+		chatStore,
+		conversationsStore,
 		gaugeTriggerClick,
 		gaugeTriggerEnter,
 		gaugeTriggerKeydown,
 		gaugeTriggerLeave,
 		gaugeTriggerPointerDown
-	} from '$lib/stores/context-gauge-popup.svelte';
-	import { activeConversation, activeMessages } from '$lib/stores/conversations.svelte';
+	} from '$lib/stores';
 	import { untrack } from 'svelte';

 	const gauge = useContextGauge();

 	$effect(() => {
-		const conv = activeConversation();
+		const conv = conversationsStore.activeConversation;

 		untrack(() => chatStore.setActiveProcessingConversation(conv?.id ?? null));
 	});

 	$effect(() => {
-		const conv = activeConversation();
-		const messages = activeMessages() as DatabaseMessage[];
+		const conv = conversationsStore.activeConversation;
+		const messages = conversationsStore.activeMessages as DatabaseMessage[];

 		if (!conv) return;

-		if (isLoading() || isChatStreaming()) return;
+		if (chatStore.isLoading || chatStore.isStreaming()) return;

 		if (messages.length === 0) {
 			untrack(() => chatStore.clearProcessingState(conv.id));
@@ -3,12 +3,7 @@
 	import ContextGaugeDetails from './ContextGaugeDetails.svelte';
 	import ContextGaugeLoadModel from './ContextGaugeLoadModel.svelte';
 	import { useContextGauge } from '$lib/hooks/use-context-gauge.svelte';
-	import {
-		gaugeCardEnter,
-		gaugeCardLeave,
-		gaugePopup,
-		gaugePopupClose
-	} from '$lib/stores/context-gauge-popup.svelte';
+	import { gaugeCardEnter, gaugeCardLeave, gaugePopup, gaugePopupClose } from '$lib/stores';
 	import { formatParameters } from '$lib/utils/formatters';

 	const gauge = useContextGauge();
@@ -92,7 +87,7 @@
 						<span class={colorLevelTextClass(gauge.colorLevel)}>{gauge.contextPercent}%</span> used
 					</span>
 					<span>
-						{formatParameters((gauge.contextTotal ?? 0) - gauge.contextUsed)} remaining
+						{formatParameters(gauge.contextAvailable ?? 0)} remaining
 					</span>
 				</div>
 			{:else}
@@ -3,11 +3,7 @@
 		ChatAttachmentsListItemMcpResource,
 		HorizontalScrollCarousel
 	} from '$lib/components/app';
-	import { mcpStore } from '$lib/stores/mcp.svelte';
-	import {
-		mcpHasResourceAttachments,
-		mcpResourceAttachments
-	} from '$lib/stores/mcp-resources.svelte';
+	import { mcpResourceStore, mcpStore } from '$lib/stores';

 	interface Props {
 		class?: string;
@@ -16,8 +12,8 @@

 	let { class: className, onResourceClick }: Props = $props();

-	const attachments = $derived(mcpResourceAttachments());
-	const hasAttachments = $derived(mcpHasResourceAttachments());
+	const attachments = $derived(mcpResourceStore.attachments);
+	const hasAttachments = $derived(mcpResourceStore.hasAttachments);

 	function handleRemove(attachmentId: string) {
 		mcpStore.removeResourceAttachment(attachmentId);
@@ -8,9 +8,7 @@
 	import { BuiltInTool, FileMentionEntryType, GlobSearchType, KeyboardKey } from '$lib/enums';
 	import { useDebouncedSearch } from '$lib/hooks/use-debounced-search.svelte';
 	import { usePickerNavigation } from '$lib/hooks/use-picker-navigation.svelte';
-	import { config } from '$lib/stores/settings.svelte';
-	import { toolsStore } from '$lib/stores/tools.svelte';
-	import { isMobile } from '$lib/stores/viewport.svelte';
+	import { isMobile, settingsStore, toolsStore } from '$lib/stores';
 	import type { FileMentionEntry, GlobEntryResult } from '$lib/types';
 	import { abbreviateHome, runGlobSearchWithChildren } from '$lib/utils';

@@ -64,7 +62,7 @@
 	// Coerce the depth setting to a positive integer; an invalid value
 	// would otherwise reach the server as max_depth 0 = unlimited.
 	const searchDepth = $derived.by(() => {
-		const n = Number(config().mentionSearchMaxDepth);
+		const n = Number(settingsStore.config.mentionSearchMaxDepth);

 		return Number.isInteger(n) && n > 0 ? n : FILE_GLOB_SEARCH_PICKERS.DEFAULT_SEARCH_DEPTH;
 	});
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { mcpStore } from '$lib/stores';
 	import type { MCPServerSettingsEntry } from '$lib/types';
 	import type { Snippet } from 'svelte';

@@ -9,8 +9,7 @@
 	} from '$lib/components/app/chat';
 	import Badge from '$lib/components/ui/badge/badge.svelte';
 	import { KeyboardKey } from '$lib/enums';
-	import { conversationsStore } from '$lib/stores/conversations.svelte';
-	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { conversationsStore, mcpStore } from '$lib/stores';
 	import type { GetPromptResult, MCPPromptInfo, MCPServerSettingsEntry } from '$lib/types';
 	import { debounce, uuid } from '$lib/utils';
 	import { SvelteMap } from 'svelte/reactivity';
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { isMobile } from '$lib/stores/viewport.svelte';
+	import { isMobile } from '$lib/stores';
 	import { autoResizeTextarea } from '$lib/utils';
 	import { onMount } from 'svelte';

@@ -10,7 +10,7 @@
 	import { usePickerNavigation } from '$lib/hooks/use-picker-navigation.svelte';
 	import { useScrollActiveRow } from '$lib/hooks/use-scroll-active-row.svelte';
 	import { ToolsService } from '$lib/services/tools.service';
-	import { toolsStore } from '$lib/stores/tools.svelte';
+	import { toolsStore } from '$lib/stores';
 	import type { GlobEntry } from '$lib/types';
 	import {
 		abbreviateHome,
@@ -11,9 +11,7 @@
 	import { getChatActionsContext, setMessageEditContext } from '$lib/contexts';
 	import { AgenticSectionType, AttachmentType, MessageRole } from '$lib/enums';
 	import { DatabaseService } from '$lib/services/database.service';
-	import { chatStore, pendingEditMessageId } from '$lib/stores/chat.svelte';
-	import { conversationsStore } from '$lib/stores/conversations.svelte';
-	import { isMobile } from '$lib/stores/viewport.svelte';
+	import { chatStore, conversationsStore, isMobile } from '$lib/stores';
 	import type { DatabaseMessageExtraMcpPrompt } from '$lib/types';
 	import { deriveAgenticSections } from '$lib/utils';
 	import { parseFilesToMessageExtras } from '$lib/utils/browser-only';
@@ -185,7 +183,7 @@
 	});

 	$effect(() => {
-		const pendingId = pendingEditMessageId();
+		const pendingId = chatStore.pendingEditMessageId;

 		if (pendingId && pendingId === message.id && !isEditing) {
 			handleEdit();
@@ -11,10 +11,7 @@
 	import { getMessageEditContext } from '$lib/contexts';
 	import { MessageRole } from '$lib/enums';
 	import { useProcessingState } from '$lib/hooks/use-processing-state.svelte';
-	import { chatStore, isChatStreaming, isLoading } from '$lib/stores/chat.svelte';
-	import { modelsStore } from '$lib/stores/models.svelte';
-	import { isRouterMode } from '$lib/stores/server.svelte';
-	import { config } from '$lib/stores/settings.svelte';
+	import { chatStore, modelsStore, serverStore, settingsStore } from '$lib/stores';
 	import { modelLoadProgressText } from '$lib/utils';
 	import { hasAgenticContent } from '$lib/utils';

@@ -69,15 +66,15 @@
 	const isAgentic = $derived(hasAgenticContent(message, toolMessages));
 	const processingState = useProcessingState();

-	let currentConfig = $derived(config());
-	let isRouter = $derived(isRouterMode());
+	let currentConfig = $derived(settingsStore.config);
+	let isRouter = $derived(serverStore.isRouterMode);

 	let showRawOutput = $state(false);

 	let displayedModel = $derived(message.model ?? null);

-	let isCurrentlyLoading = $derived(isLoading());
-	let isStreaming = $derived(isChatStreaming());
+	let isCurrentlyLoading = $derived(chatStore.isLoading);
+	let isStreaming = $derived(chatStore.isStreaming());
 	let hasNoContent = $derived(!message?.content?.trim());
 	let isActivelyProcessing = $derived(isCurrentlyLoading || isStreaming);

@@ -175,7 +172,7 @@
 			<ChatMessageAgenticContent
 				{message}
 				{toolMessages}
-				isStreaming={isChatStreaming()}
+				isStreaming={chatStore.isStreaming()}
 				{isLastAssistantMessage}
 			/>
 		{/if}
@@ -190,14 +187,14 @@
 			<div class="inline-flex flex-wrap items-start gap-2 text-xs text-muted-foreground">
 				<ChatMessageAssistantModel
 					{displayedModel}
-					isLoading={isLoading()}
+					isLoading={chatStore.isLoading}
 					{isRouter}
 					{onRegenerate}
 				/>

 				<ChatMessageAssistantStatistics
 					{message}
-					isLoading={isLoading()}
+					isLoading={chatStore.isLoading}
 					{processingState}
 					showMessageStats={currentConfig.showMessageStats}
 				/>
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { ModelBadge, ModelsSelectorDropdown } from '$lib/components/app';
 	import { ServerModelStatus } from '$lib/enums';
-	import { modelsStore } from '$lib/stores/models.svelte';
+	import { modelsStore } from '$lib/stores';
 	import { copyToClipboard } from '$lib/utils';

 	interface Props {
@@ -10,7 +10,7 @@

 	let { modelLoadingText, position, processingState }: Props = $props();

-	const marginClass = position === 'top' ? 'mt-6' : 'mt-4';
+	const marginClass = $derived(position === 'top' ? 'mt-6' : 'mt-4');
 </script>

 <div class="{marginClass} w-full max-w-3xl" in:fade>
@@ -2,6 +2,7 @@
 	import { ChatMessageStatistics } from '$lib/components/app';
 	import { ChatMessageStatisticsMode } from '$lib/enums';
 	import type { UseProcessingStateReturn } from '$lib/hooks/use-processing-state.svelte';
+	import { agenticStore } from '$lib/stores';

 	interface Props {
 		message: DatabaseMessage;
@@ -11,9 +12,26 @@
 	}

 	let { isLoading, message, processingState, showMessageStats }: Props = $props();
+
+	// A running agentic flow stamps per-turn timings on its root message at each
+	// turn boundary and the cumulative agentic totals only on exit; while it runs,
+	// show the session's live totals on the root message instead.
+	const liveLlm = $derived(agenticStore.getLiveLlmTotals(message.convId));
+	const isLiveFlowRoot = $derived(
+		liveLlm !== null && agenticStore.getFlowRootMessageId(message.convId) === message.id
+	);
 </script>

-{#if showMessageStats && message.timings && message.timings.predicted_n && message.timings.predicted_ms}
+{#if showMessageStats && isLiveFlowRoot && liveLlm}
+	<ChatMessageStatistics
+		mode={ChatMessageStatisticsMode.GENERATION}
+		isLive
+		promptTokens={liveLlm.prompt_n}
+		promptMs={liveLlm.prompt_ms}
+		predictedTokens={liveLlm.predicted_n}
+		predictedMs={liveLlm.predicted_ms}
+	/>
+{:else if showMessageStats && message.timings && message.timings.predicted_n && message.timings.predicted_ms}
 	{@const agentic = message.timings.agentic}
 	<ChatMessageStatistics
 		mode={ChatMessageStatisticsMode.GENERATION}
@@ -3,7 +3,7 @@
 	import { Card } from '$lib/components/ui/card';
 	import * as Tooltip from '$lib/components/ui/tooltip';
 	import { McpPromptVariant } from '$lib/enums';
-	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { mcpStore } from '$lib/stores';
 	import type { DatabaseMessageExtraMcpPrompt } from '$lib/types';
 	import { SvelteMap } from 'svelte/reactivity';

@@ -6,7 +6,7 @@
 	import { INPUT_CLASSES } from '$lib/constants';
 	import { getMessageEditContext } from '$lib/contexts';
 	import { KeyboardKey, MessageRole } from '$lib/enums';
-	import { config } from '$lib/stores/settings.svelte';
+	import { settingsStore } from '$lib/stores';
 	import { autoResizeTextarea, isIMEComposing } from '$lib/utils';

 	interface Props {
@@ -64,7 +64,7 @@
 	let contentHeight = $state(0);

 	const MAX_HEIGHT = 200; // pixels
-	const currentConfig = config();
+	const currentConfig = settingsStore.config;

 	let showExpandButton = $derived(contentHeight > MAX_HEIGHT);

@@ -3,7 +3,7 @@
 	import ToolCallBlock from './ToolCallBlock.svelte';
 	import { XCircle } from '@lucide/svelte';
 	import { MAX_HEIGHT_CODE_BLOCK, RESULT_STAT_SEPARATOR } from '$lib/constants';
-	import { toolsStore } from '$lib/stores/tools.svelte';
+	import { toolsStore } from '$lib/stores';
 	import type { AgenticSection } from '$lib/types';
 	import { abbreviateHome, computeLineDiff, prefixFor } from '$lib/utils';

@@ -12,8 +12,7 @@
 	import { CollapsibleTerminalBlock } from '$lib/components/app';
 	import { SETTINGS_KEYS, TOOL_RUNTIME_SCROLL_AT_BOTTOM_THRESHOLD_PX } from '$lib/constants';
 	import { AttachmentType } from '$lib/enums';
-	import { config } from '$lib/stores/settings.svelte';
-	import { toolsStore } from '$lib/stores/tools.svelte';
+	import { settingsStore, toolsStore } from '$lib/stores';
 	import type { AgenticSection, ToolResultLine } from '$lib/types';
 	import type { DatabaseMessageExtra } from '$lib/types';
 	import {
@@ -93,7 +92,7 @@
 	);

 	const useFullHeightCodeBlocks = $derived(
-		Boolean(config()[SETTINGS_KEYS.FULL_HEIGHT_CODE_BLOCKS])
+		Boolean(settingsStore.config[SETTINGS_KEYS.FULL_HEIGHT_CODE_BLOCKS])
 	);

 	const autoScroll = $derived(isLive && !useFullHeightCodeBlocks);
@@ -2,7 +2,7 @@
 	import { parseFileGlobSearchMeta } from './parsers/file-glob-search';
 	import ToolCallBlock from './ToolCallBlock.svelte';
 	import { XCircle } from '@lucide/svelte';
-	import { toolsStore } from '$lib/stores/tools.svelte';
+	import { toolsStore } from '$lib/stores';
 	import type { AgenticSection } from '$lib/types';
 	import { abbreviateHome } from '$lib/utils';

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Info, Loader2 } from '@lucide/svelte';
 	import { AgenticSectionType } from '$lib/enums';
-	import { toolsStore } from '$lib/stores/tools.svelte';
+	import { toolsStore } from '$lib/stores';
 	import type { AgenticSection } from '$lib/types';
 	import { abbreviateHome } from '$lib/utils';

@@ -2,7 +2,7 @@
 	import { parseGrepSearchMeta } from './parsers/grep-search';
 	import ToolCallBlock from './ToolCallBlock.svelte';
 	import { XCircle } from '@lucide/svelte';
-	import { toolsStore } from '$lib/stores/tools.svelte';
+	import { toolsStore } from '$lib/stores';
 	import type { AgenticSection } from '$lib/types';
 	import { abbreviateHome } from '$lib/utils';

@@ -4,7 +4,7 @@
 	import * as HoverCard from '$lib/components/ui/hover-card';
 	import { ICON_CLASS_DEFAULT, ICON_CLASS_SPIN } from '$lib/constants';
 	import { AgenticSectionType } from '$lib/enums';
-	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { mcpStore } from '$lib/stores';
 	import type { AgenticSection, SearchResult } from '$lib/types';
 	import {
 		extractSearchQuery,
@@ -4,7 +4,7 @@
 	import { XCircle } from '@lucide/svelte';
 	import { SyntaxHighlightedCode } from '$lib/components/app';
 	import { MAX_HEIGHT_CODE_BLOCK, RESULT_STAT_SEPARATOR } from '$lib/constants';
-	import { toolsStore } from '$lib/stores/tools.svelte';
+	import { toolsStore } from '$lib/stores';
 	import type { AgenticSection } from '$lib/types';
 	import { abbreviateHome } from '$lib/utils';

@@ -13,7 +13,7 @@
 	import { CollapsibleContentBlock } from '$lib/components/app';
 	import { ICON_CLASS_DEFAULT, ICON_CLASS_SPIN } from '$lib/constants';
 	import { AgenticSectionType } from '$lib/enums';
-	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { mcpStore } from '$lib/stores';
 	import type { AgenticSection, BuiltinToolUiEntry } from '$lib/types';
 	import { getBuiltinToolUi } from '$lib/utils';
 	import type { Component, Snippet } from 'svelte';
@@ -8,8 +8,7 @@
 	import { getMessageEditContext } from '$lib/contexts';
 	import { ChatMessageStatisticsMode, MessageRole } from '$lib/enums';
 	import { useProcessingState } from '$lib/hooks/use-processing-state.svelte';
-	import { isLoading } from '$lib/stores/chat.svelte';
-	import { config } from '$lib/stores/settings.svelte';
+	import { chatStore, settingsStore } from '$lib/stores';

 	interface Props {
 		class?: string;
@@ -54,8 +53,8 @@
 	const editCtx = getMessageEditContext();
 	const processingState = useProcessingState();

-	const currentConfig = $derived(config());
-	const isActivelyProcessing = $derived(isLastUserMessage && isLoading());
+	const currentConfig = $derived(settingsStore.config);
+	const isActivelyProcessing = $derived(isLastUserMessage && chatStore.isLoading);

 	// For agentic turns, prefer the cumulative agentic.llm totals over per-call timings.
 	let storedReadingStats = $derived.by(() => {
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { ChatAttachmentsList, MarkdownContent, MentionText } from '$lib/components/app';
 	import { Card } from '$lib/components/ui/card';
-	import { config } from '$lib/stores/settings.svelte';
+	import { settingsStore } from '$lib/stores';
 	import type { DatabaseMessageExtra } from '$lib/types/database';

 	interface Props {
@@ -24,7 +24,7 @@

 	let isMultiline = $state(false);
 	let messageElement: HTMLElement | undefined = $state();
-	const currentConfig = config();
+	const currentConfig = settingsStore.config;

 	$effect(() => {
 		if (!messageElement || !content.trim()) return;
@@ -7,7 +7,7 @@
 	import { cn } from '$lib/components/ui/utils';
 	import { TOOL_SERVER_LABELS } from '$lib/constants';
 	import { ToolPermissionDecision, ToolSource } from '$lib/enums';
-	import { toolsStore } from '$lib/stores/tools.svelte';
+	import { toolsStore } from '$lib/stores';

 	interface Props {
 		toolName: string;
@@ -10,7 +10,7 @@
 	import Label from '$lib/components/ui/label/label.svelte';
 	import { Switch } from '$lib/components/ui/switch';
 	import { MessageRole } from '$lib/enums';
-	import { activeConversation } from '$lib/stores/conversations.svelte';
+	import { conversationsStore } from '$lib/stores';

 	interface Props {
 		role: MessageRole.USER | MessageRole.ASSISTANT;
@@ -69,7 +69,7 @@
 	}

 	function handleOpenForkDialog() {
-		const conv = activeConversation();
+		const conv = conversationsStore.activeConversation;

 		forkName = `Fork of ${conv?.name ?? 'Conversation'}`;
 		forkIncludeAttachments = true;
@@ -8,15 +8,7 @@
 		MarkdownContent
 	} from '$lib/components/app';
 	import { AgenticSectionType, ChatMessageStatsView, ToolPermissionDecision } from '$lib/enums';
-	import {
-		agenticExecutingToolCallId,
-		agenticLastError,
-		agenticPendingContinueRequest,
-		agenticPendingPermissionRequest,
-		agenticResolveContinue,
-		agenticResolvePermission
-	} from '$lib/stores/agentic.svelte';
-	import { config } from '$lib/stores/settings.svelte';
+	import { agenticStore, settingsStore } from '$lib/stores';
 	import type { AgenticSection } from '$lib/types';
 	import type {
 		ChatMessageAgenticTimings,
@@ -41,19 +33,25 @@

 	let expandedStates: Record<number, boolean> = $state({});

-	const showThoughtInProgress = $derived(Boolean(config().showThoughtInProgress));
-	const alwaysShowToolCallContent = $derived(Boolean(config().alwaysShowToolCallContent));
-	const showMessageStats = $derived(Boolean(config().showMessageStats));
-	const showAgenticTurnStats = $derived(showMessageStats && Boolean(config().showAgenticTurnStats));
+	const showThoughtInProgress = $derived(Boolean(settingsStore.config.showThoughtInProgress));
+	const alwaysShowToolCallContent = $derived(
+		Boolean(settingsStore.config.alwaysShowToolCallContent)
+	);
+	const showMessageStats = $derived(Boolean(settingsStore.config.showMessageStats));
+	const showAgenticTurnStats = $derived(
+		showMessageStats && Boolean(settingsStore.config.showAgenticTurnStats)
+	);

 	const hasReasoningError = $derived(
-		isLastAssistantMessage ? !!agenticLastError(message.convId) : false
+		isLastAssistantMessage ? !!agenticStore.lastError(message.convId) : false
 	);

 	let permissionDismissed = $state(false);

 	const pendingPermission = $derived(
-		isStreaming && isLastAssistantMessage ? agenticPendingPermissionRequest(message.convId) : null
+		isStreaming && isLastAssistantMessage
+			? agenticStore.pendingPermissionRequest(message.convId)
+			: null
 	);

 	let prevPendingRef: typeof pendingPermission = null;
@@ -69,13 +67,15 @@

 	function handlePermission(decision: ToolPermissionDecision) {
 		permissionDismissed = true;
-		agenticResolvePermission(message.convId, decision);
+		agenticStore.resolvePermission(message.convId, decision);
 	}

 	let continueDismissed = $state(false);

 	const pendingContinue = $derived(
-		isStreaming && isLastAssistantMessage ? agenticPendingContinueRequest(message.convId) : false
+		isStreaming && isLastAssistantMessage
+			? agenticStore.pendingContinueRequest(message.convId)
+			: false
 	);

 	let prevContinueRef = false;
@@ -91,13 +91,13 @@

 	function handleContinue(shouldContinue: boolean) {
 		continueDismissed = true;
-		agenticResolveContinue(message.convId, shouldContinue);
+		agenticStore.resolveContinue(message.convId, shouldContinue);
 	}

 	const sections = $derived(deriveAgenticSections(message, toolMessages, [], isStreaming));

 	const currentlyExecutingToolCallId = $derived(
-		isStreaming ? agenticExecutingToolCallId(message.convId) : null
+		isStreaming ? agenticStore.executingToolCallId(message.convId) : null
 	);

 	type TurnGroup = {
@@ -5,7 +5,7 @@
 	import { Switch } from '$lib/components/ui/switch';
 	import { getMessageEditContext } from '$lib/contexts';
 	import { KeyboardKey, MessageRole } from '$lib/enums';
-	import { chatStore } from '$lib/stores/chat.svelte';
+	import { chatStore } from '$lib/stores';
 	import { processFilesToChatUploaded } from '$lib/utils/browser-only';

 	const editCtx = getMessageEditContext();
@@ -3,7 +3,7 @@
 	import { CollapsibleContentBlock, MarkdownContent } from '$lib/components/app';
 	import { REASONING_SCROLL_AT_BOTTOM_THRESHOLD_PX } from '$lib/constants';
 	import { AgenticSectionType } from '$lib/enums';
-	import { config } from '$lib/stores/settings.svelte';
+	import { settingsStore } from '$lib/stores';
 	import type { DatabaseMessageExtra } from '$lib/types';
 	import type { AgenticSection } from '$lib/types';

@@ -25,7 +25,7 @@
 		section
 	}: Props = $props();

-	const currentConfig = config();
+	const currentConfig = settingsStore.config;

 	const REASONING_HEADER = 'Reasoning';
 	const REASONING_HEADER_PENDING = 'Reasoning...';
@@ -2,21 +2,7 @@
 	import { ChatMessage, ChatMessageUserPending } from '$lib/components/app';
 	import { setChatActionsContext } from '$lib/contexts';
 	import { MessageRole } from '$lib/enums';
-	import {
-		agenticClearSteeringMessage,
-		agenticInjectSteeringMessage,
-		agenticPendingSteeringMessageContent,
-		agenticPendingSteeringMessageExtras
-	} from '$lib/stores/agentic.svelte';
-	import { chatStore } from '$lib/stores/chat.svelte';
-	import {
-		chatClearPendingMessage,
-		chatInjectPendingMessage,
-		chatPendingMessageContent,
-		chatPendingMessageExtras
-	} from '$lib/stores/chat.svelte';
-	import { activeConversation, conversationsStore } from '$lib/stores/conversations.svelte';
-	import { config } from '$lib/stores/settings.svelte';
+	import { agenticStore, chatStore, conversationsStore, settingsStore } from '$lib/stores';
 	import {
 		buildSiblingInfoMap,
 		copyToClipboard,
@@ -34,7 +20,7 @@

 	let allConversationMessages = $state<DatabaseMessage[]>([]);

-	const currentConfig = config();
+	const currentConfig = settingsStore.config;

 	setChatActionsContext({
 		continueAssistantMessage: async (message: DatabaseMessage) => {
@@ -108,7 +94,7 @@
 	});

 	function refreshAllMessages() {
-		const conversation = activeConversation();
+		const conversation = conversationsStore.activeConversation;

 		if (conversation) {
 			conversationsStore.getConversationMessages(conversation.id).then((messages) => {
@@ -121,7 +107,7 @@

 	// Refresh messages whenever the active conversation changes
 	$effect(() => {
-		if (activeConversation()) {
+		if (conversationsStore.activeConversation) {
 			refreshAllMessages();
 		}
 	});
@@ -251,32 +237,33 @@
 		/>
 	{/each}

-	{#if activeConversation() && agenticPendingSteeringMessageContent(activeConversation()!.id)}
-		{@const convId = activeConversation()!.id}
-		{@const pendingContent = agenticPendingSteeringMessageContent(convId)}
+	{#if conversationsStore.activeConversation && agenticStore.pendingSteeringMessageContent(conversationsStore.activeConversation!.id)}
+		{@const convId = conversationsStore.activeConversation!.id}
+		{@const pendingContent = agenticStore.pendingSteeringMessageContent(convId)}

 		{#if pendingContent}
 			<ChatMessageUserPending
 				class="mx-auto mt-12 w-full max-w-[48rem]"
 				content={pendingContent}
-				extras={agenticPendingSteeringMessageExtras(convId)}
+				extras={agenticStore.pendingSteeringMessageExtras(convId)}
 				onSendImmediately={() => chatStore.abortCurrentFlow(convId)}
-				onEdit={(newContent, extras) => agenticInjectSteeringMessage(convId, newContent, extras)}
-				onDelete={() => agenticClearSteeringMessage(convId)}
+				onEdit={(newContent, extras) =>
+					agenticStore.injectSteeringMessage(convId, newContent, extras)}
+				onDelete={() => agenticStore.clearSteeringMessage(convId)}
 			/>
 		{/if}
-	{:else if activeConversation() && chatPendingMessageContent(activeConversation()!.id)}
-		{@const convId = activeConversation()!.id}
-		{@const pendingContent = chatPendingMessageContent(convId)}
+	{:else if conversationsStore.activeConversation && chatStore.pendingMessageContent(conversationsStore.activeConversation!.id)}
+		{@const convId = conversationsStore.activeConversation!.id}
+		{@const pendingContent = chatStore.pendingMessageContent(convId)}

 		{#if pendingContent}
 			<ChatMessageUserPending
 				class="mx-auto mt-12 w-full max-w-[48rem]"
 				content={pendingContent}
-				extras={chatPendingMessageExtras(convId)}
+				extras={chatStore.pendingMessageExtras(convId)}
 				onSendImmediately={() => chatStore.abortCurrentFlow(convId)}
-				onEdit={(newContent, extras) => chatInjectPendingMessage(convId, newContent, extras)}
-				onDelete={() => chatClearPendingMessage(convId)}
+				onEdit={(newContent, extras) => chatStore.injectPendingMessage(convId, newContent, extras)}
+				onDelete={() => chatStore.clearPendingMessage(convId)}
 			/>
 		{/if}
 	{/if}
@@ -20,26 +20,20 @@
 	import { useKeyboardShortcuts } from '$lib/hooks/use-keyboard-shortcuts.svelte';
 	import {
 		chatStore,
-		errorDialog,
-		isChatStreaming,
-		isEditing,
-		isLoading
-	} from '$lib/stores/chat.svelte';
-	import {
-		activeConversation,
-		activeMessages,
-		conversationsStore
-	} from '$lib/stores/conversations.svelte';
-	import { device } from '$lib/stores/device.svelte';
-	import { serverError, serverLoading } from '$lib/stores/server.svelte';
-	import { config } from '$lib/stores/settings.svelte';
-	import { isMobile } from '$lib/stores/viewport.svelte';
+		conversationsStore,
+		device,
+		isMobile,
+		serverStore,
+		settingsStore
+	} from '$lib/stores';
 	import { parseFilesToMessageExtras } from '$lib/utils/browser-only';
 	import { onDestroy, onMount, tick } from 'svelte';

 	let { showCenteredEmpty = false } = $props();

-	let disableAutoScroll = $derived(Boolean(config().disableAutoScroll) || isMobile.current);
+	let disableAutoScroll = $derived(
+		Boolean(settingsStore.config.disableAutoScroll) || isMobile.current
+	);
 	let isMobileUserScrolledUp = $state(false);
 	let mobileScrollDownHint = $state(false);
 	let mobileScrollDownHintLockedUntil = $state(0);
@@ -48,12 +42,15 @@
 	let showDeleteDialog = $state(false);
 	let showEmptyFileDialog = $state(false);
 	let isEmpty = $derived(
-		showCenteredEmpty && !activeConversation() && activeMessages().length === 0 && !isLoading()
+		showCenteredEmpty &&
+			!conversationsStore.activeConversation &&
+			conversationsStore.activeMessages.length === 0 &&
+			!chatStore.isLoading
 	);
-	let activeErrorDialog = $derived(errorDialog());
-	let isServerLoading = $derived(serverLoading());
-	let hasPropsError = $derived(!!serverError());
-	let isCurrentConversationLoading = $derived(isLoading() || isChatStreaming());
+	let activeErrorDialog = $derived(chatStore.errorDialogState);
+	let isServerLoading = $derived(serverStore.loading);
+	let hasPropsError = $derived(!!serverStore.error);
+	let isCurrentConversationLoading = $derived(chatStore.isLoading || chatStore.isStreaming());
 	let chatFormBottomPosition = $derived.by(() => {
 		if (!isMobile.current) return '1rem';

@@ -80,7 +77,7 @@
 	});
 	const { handleKeydown } = useKeyboardShortcuts({
 		deleteActiveConversation: () => {
-			if (activeConversation()) {
+			if (conversationsStore.activeConversation) {
 				showDeleteDialog = true;
 			}
 		}
@@ -100,7 +97,7 @@
 	}

 	async function handleDeleteConfirm() {
-		const conversation = activeConversation();
+		const conversation = conversationsStore.activeConversation;

 		if (conversation) {
 			await conversationsStore.deleteConversation(conversation.id);
@@ -148,7 +145,7 @@
 	async function handleMessagesReady(messageCount: number) {
 		if (messageCount === 0) return;

-		const id = activeConversation()?.id ?? null;
+		const id = conversationsStore.activeConversation?.id ?? null;

 		if (!id || id === lastScrolledConversationId) return;

@@ -168,7 +165,7 @@
 		const settle = () => {
 			if (autoScroll.userScrolledUp) return;

-			if (activeConversation()?.id !== id) return;
+			if (conversationsStore.activeConversation?.id !== id) return;

 			autoScroll.scrollToBottom();
 			const height = container.scrollHeight;
@@ -246,7 +243,7 @@

 	$effect(() => {
 		const shouldDisableAutoScroll =
-			config().disableAutoScroll || (isMobile.current && isCurrentConversationLoading);
+			settingsStore.config.disableAutoScroll || (isMobile.current && isCurrentConversationLoading);

 		autoScroll.setDisabled(shouldDisableAutoScroll);

@@ -310,7 +307,7 @@
 	>
 		{#if !isEmpty}
 			<ChatMessages
-				messages={activeMessages()}
+				messages={conversationsStore.activeMessages}
 				onMessagesReady={handleMessagesReady}
 				onUserAction={() => {
 					handleSendLikeScroll();
@@ -354,7 +351,7 @@

 			<ChatScreenForm
 				class="pointer-events-auto conversation-chat-form"
-				disabled={hasPropsError || isEditing()}
+				disabled={hasPropsError || chatStore.isEditing()}
 				{initialMessage}
 				isLoading={isCurrentConversationLoading}
 				onFileRemove={fileUpload.handleFileRemove}
@@ -3,7 +3,7 @@
 	import { page } from '$app/state';
 	import { ChatForm } from '$lib/components/app';
 	import { useDraftMessages } from '$lib/hooks/use-draft-messages.svelte';
-	import { isMobile } from '$lib/stores/viewport.svelte';
+	import { isMobile } from '$lib/stores';
 	import { onMount } from 'svelte';

 	interface Props {
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { serverStore } from '$lib/stores/server.svelte';
+	import { serverStore } from '$lib/stores';

 	interface Props {
 		isEmpty: boolean;
@@ -2,10 +2,10 @@
 	import { AlertTriangle, Loader2, RefreshCw } from '@lucide/svelte';
 	import * as Alert from '$lib/components/ui/alert';
 	import { ICON_CLASS_DEFAULT } from '$lib/constants';
-	import { serverError, serverLoading, serverStatus, serverStore } from '$lib/stores/server.svelte';
+	import { serverStore } from '$lib/stores';

-	let hasError = $derived(!!serverError());
-	let isLoadingModel = $derived(serverStatus() === 503);
+	let hasError = $derived(!!serverStore.error);
+	let isLoadingModel = $derived(serverStore.status === 503);
 </script>

 {#if hasError}
@@ -23,17 +23,17 @@
 				{#if !isLoadingModel}
 					<button
 						onclick={() => serverStore.fetch()}
-						disabled={serverLoading()}
+						disabled={serverStore.loading}
 						class="flex items-center gap-1.5 rounded-lg bg-destructive/20 px-2 py-1 text-xs font-medium hover:bg-destructive/30 disabled:opacity-50"
 					>
-						<RefreshCw class="h-3 w-3 {serverLoading() ? 'animate-spin' : ''}" />
-						{serverLoading() ? 'Retrying...' : 'Retry'}
+						<RefreshCw class="h-3 w-3 {serverStore.loading ? 'animate-spin' : ''}" />
+						{serverStore.loading ? 'Retrying...' : 'Retry'}
 					</button>
 				{/if}
 			</Alert.Title>

 			{#if !isLoadingModel}
-				<Alert.Description>{serverError()}</Alert.Description>
+				<Alert.Description>{serverStore.error}</Alert.Description>
 			{/if}
 		</Alert.Root>
 	</div>
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Loader2 } from '@lucide/svelte';
 	import { StreamConnectionState } from '$lib/enums';
-	import { chatStore } from '$lib/stores/chat.svelte';
+	import { chatStore } from '$lib/stores';

 	let state = $derived(chatStore.streamConnectionState);
 </script>