@myrialabs/clopen 0.2.1 → 0.2.3

package/frontend/{lib/components/common → components/common/overlay}/Lightbox.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { fade, scale } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
-	import { getFileIcon } from '$frontend/lib/utils/file-icon-mappings';
-	import { formatFileSize } from '$frontend/lib/components/chat/shared/utils';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
+	import { getFileIcon } from '$frontend/utils/file-icon-mappings';
+	import { formatFileSize } from '$frontend/components/chat/shared/utils';
 	import { debug } from '$shared/utils/logger';
 
 	interface Props {

package/frontend/{lib/components/common → components/common/overlay}/ModalProvider.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import Alert from './Alert.svelte';
+	import Alert from '../feedback/Alert.svelte';
 	import Dialog from './Dialog.svelte';
-	import { dialogStore, closeAlert, closeConfirm } from '$frontend/lib/stores/ui/dialog.svelte';
+	import { dialogStore, closeAlert, closeConfirm } from '$frontend/stores/ui/dialog.svelte';
 
 	const alertState = $derived(dialogStore.alert);
 	const confirmState = $derived(dialogStore.confirm);

package/frontend/{lib/components → components}/common/xterm/XTerm.svelte

@@ -4,14 +4,14 @@
 -->
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
-	import { browser } from '$frontend/lib/app-environment';
+	import { browser } from '$frontend/app-environment';
 	import type { TerminalSession } from '$shared/types/terminal';
 	import { XTermService } from './xterm-service';
 	import type { XTermProps, XTermMethods } from './types';
-	import { terminalStore } from '$frontend/lib/stores/features/terminal.svelte';
-	import { backgroundTerminalService } from '$frontend/lib/services/terminal/background';
-	import { terminalService } from '$frontend/lib/services/terminal';
-	import { settings } from '$frontend/lib/stores/features/settings.svelte';
+	import { terminalStore } from '$frontend/stores/features/terminal.svelte';
+	import { backgroundTerminalService } from '$frontend/services/terminal/background';
+	import { terminalService } from '$frontend/services/terminal';
+	import { settings } from '$frontend/stores/features/settings.svelte';
 	
 	// Import CSS directly - Vite will handle it properly
 	import '@xterm/xterm/css/xterm.css';

package/frontend/{lib/components → components}/common/xterm/xterm-service.ts

@@ -5,7 +5,7 @@
  * No command parsing, no prompt handling - everything handled by shell
  */
 
-import { browser } from '$frontend/lib/app-environment';
+import { browser } from '$frontend/app-environment';
 import type { Terminal } from '@xterm/xterm';
 import type { FitAddon } from '@xterm/addon-fit';
 import type { WebLinksAddon } from '@xterm/addon-web-links';
@@ -15,7 +15,7 @@ import type { LigaturesAddon } from '@xterm/addon-ligatures';
 import type { TerminalLine } from '$shared/types/terminal';
 import { terminalConfig } from './terminal-config';
 import { debug } from '$shared/utils/logger';
-import ws from '$frontend/lib/utils/ws';
+import ws from '$frontend/utils/ws';
 
 export class XTermService {
 	public terminal: Terminal | null = null;

package/frontend/{lib/components → components}/files/FileNode.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import type { FileNode as FileNodeType } from '$shared/types/filesystem';
 	import FileNode from './FileNode.svelte';
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
 	import type { IconName } from '$shared/types/ui/icons';
-	import { getFileIcon } from '$frontend/lib/utils/file-icon-mappings';
-	import { getFolderIcon } from '$frontend/lib/utils/folder-icon-mappings';
+	import { getFileIcon } from '$frontend/utils/file-icon-mappings';
+	import { getFolderIcon } from '$frontend/utils/folder-icon-mappings';
 	import { onMount } from 'svelte';
 
 	const {

package/frontend/{lib/components → components}/files/FileTree.svelte

@@ -4,14 +4,14 @@
 </script>
 
 <script lang="ts">
-	import { projectState } from '$frontend/lib/stores/core/projects.svelte';
+	import { projectState } from '$frontend/stores/core/projects.svelte';
 	import type { FileNode as FileNodeType } from '$shared/types/filesystem';
 	import FileNode from './FileNode.svelte';
 	import SearchResults from './SearchResults.svelte';
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
-	import ws from '$frontend/lib/utils/ws';
-	import { addNotification } from '$frontend/lib/stores/ui/notification.svelte';
-	import { showConfirm } from '$frontend/lib/stores/ui/dialog.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
+	import ws from '$frontend/utils/ws';
+	import { addNotification } from '$frontend/stores/ui/notification.svelte';
+	import { showConfirm } from '$frontend/stores/ui/dialog.svelte';
 	import { normalizePath } from '$shared/utils/path';
 	import { onDestroy } from 'svelte';
 

package/frontend/{lib/components → components}/files/FileViewer.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
 	import type { FileNode } from '$shared/types/filesystem';
-	import LoadingSpinner from '../common/LoadingSpinner.svelte';
-	import MonacoEditor from '../common/MonacoEditor.svelte';
-	import { themeStore } from '$frontend/lib/stores/ui/theme.svelte';
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
-	import { getFileIcon } from '$frontend/lib/utils/file-icon-mappings';
-	import { getFolderIcon } from '$frontend/lib/utils/folder-icon-mappings';
+	import LoadingSpinner from '../common/feedback/LoadingSpinner.svelte';
+	import MonacoEditor from '../common/editor/MonacoEditor.svelte';
+	import { themeStore } from '$frontend/stores/ui/theme.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
+	import { getFileIcon } from '$frontend/utils/file-icon-mappings';
+	import { getFolderIcon } from '$frontend/utils/folder-icon-mappings';
 	import { onMount, onDestroy } from 'svelte';
 	import type { IconName } from '$shared/types/ui/icons';
 	import type { editor } from 'monaco-editor';
 	import { debug } from '$shared/utils/logger';
-	import ws from '$frontend/lib/utils/ws';
+	import ws from '$frontend/utils/ws';
 
 	// Interface untuk MonacoEditor component
 	interface MonacoEditorComponent {

package/frontend/{lib/components → components}/files/SearchResults.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
-	import { getFileIcon } from '$frontend/lib/utils/file-icon-mappings';
-	import { getFolderIcon } from '$frontend/lib/utils/folder-icon-mappings';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
+	import { getFileIcon } from '$frontend/utils/file-icon-mappings';
+	import { getFolderIcon } from '$frontend/utils/folder-icon-mappings';
 	import { normalizePath } from '$shared/utils/path';
 	import type { IconName } from '$shared/types/ui/icons';
 

package/frontend/{lib/components → components}/git/BranchManager.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
-	import Modal from '$frontend/lib/components/common/Modal.svelte';
-	import Dialog from '$frontend/lib/components/common/Dialog.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
+	import Modal from '$frontend/components/common/overlay/Modal.svelte';
+	import Dialog from '$frontend/components/common/overlay/Dialog.svelte';
 	import type { GitBranchInfo, GitRemote } from '$shared/types/git';
-	import { projectState } from '$frontend/lib/stores/core/projects.svelte';
-	import { showError, showInfo } from '$frontend/lib/stores/ui/notification.svelte';
+	import { projectState } from '$frontend/stores/core/projects.svelte';
+	import { showError, showInfo } from '$frontend/stores/ui/notification.svelte';
 	import { debug } from '$shared/utils/logger';
-	import ws from '$frontend/lib/utils/ws';
+	import ws from '$frontend/utils/ws';
 
 	interface Props {
 		isOpen: boolean;

package/frontend/{lib/components → components}/git/ChangesSection.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
 	import FileChangeItem from './FileChangeItem.svelte';
 	import type { GitFileChange } from '$shared/types/git';
 	import type { IconName } from '$shared/types/ui/icons';

package/frontend/{lib/components → components}/git/CommitForm.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
 
 	interface Props {
 		stagedCount: number;

package/frontend/{lib/components → components}/git/ConflictResolver.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
 	import type { GitConflictFile } from '$shared/types/git';
 
 	interface Props {

package/frontend/{lib/components → components}/git/DiffViewer.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
 	import { onMount, onDestroy, untrack } from 'svelte';
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
-	import { getFileIcon } from '$frontend/lib/utils/file-icon-mappings';
-	import { getGitStatusBadgeLabel, getGitStatusBadgeColor } from '$frontend/lib/utils/git-status';
-	import { themeStore } from '$frontend/lib/stores/ui/theme.svelte';
-	import { projectState } from '$frontend/lib/stores/core/projects.svelte';
-	import { settings } from '$frontend/lib/stores/features/settings.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
+	import { getFileIcon } from '$frontend/utils/file-icon-mappings';
+	import { getGitStatusBadgeLabel, getGitStatusBadgeColor } from '$frontend/utils/git-status';
+	import { themeStore } from '$frontend/stores/ui/theme.svelte';
+	import { projectState } from '$frontend/stores/core/projects.svelte';
+	import { settings } from '$frontend/stores/features/settings.svelte';
 	import loader from '@monaco-editor/loader';
 	import type { editor } from 'monaco-editor';
 	import type { GitFileDiff } from '$shared/types/git';
 	import type { IconName } from '$shared/types/ui/icons';
 	import { debug } from '$shared/utils/logger';
-	import ws from '$frontend/lib/utils/ws';
+	import ws from '$frontend/utils/ws';
 
 	interface Props {
 		diff: GitFileDiff | null;

package/frontend/{lib/components → components}/git/FileChangeItem.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
-	import { getFileIcon } from '$frontend/lib/utils/file-icon-mappings';
-	import { getGitStatusLabel, getGitStatusColor } from '$frontend/lib/utils/git-status';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
+	import { getFileIcon } from '$frontend/utils/file-icon-mappings';
+	import { getGitStatusLabel, getGitStatusColor } from '$frontend/utils/git-status';
 	import type { GitFileChange } from '$shared/types/git';
 	import type { IconName } from '$shared/types/ui/icons';
 

package/frontend/{lib/components → components}/git/GitButton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
 
 	interface Props {
 		collapsed?: boolean;

package/frontend/{lib/components → components}/git/GitLog.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
-	import { addNotification } from '$frontend/lib/stores/ui/notification.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
+	import { addNotification } from '$frontend/stores/ui/notification.svelte';
 	import type { GitCommit } from '$shared/types/git';
 
 	interface Props {

package/frontend/{lib/components → components}/git/GitModal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import Modal from '$frontend/lib/components/common/Modal.svelte';
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
-	import GitPanel from '$frontend/lib/components/workspace/panels/GitPanel.svelte';
+	import Modal from '$frontend/components/common/overlay/Modal.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
+	import GitPanel from '$frontend/components/workspace/panels/GitPanel.svelte';
 
 	interface Props {
 		isOpen: boolean;

package/frontend/{lib/components → components}/history/HistoryModal.svelte

@@ -1,18 +1,17 @@
 <script lang="ts">
 	import { untrack } from 'svelte';
-	import { sessionState, setCurrentSession, removeSession, reloadSessionsForProject } from '$frontend/lib/stores/core/sessions.svelte';
-	import { projectState } from '$frontend/lib/stores/core/projects.svelte';
-	import { addNotification } from '$frontend/lib/stores/ui/notification.svelte';
-	import ws from '$frontend/lib/utils/ws';
+	import { sessionState, setCurrentSession, removeSession, reloadSessionsForProject } from '$frontend/stores/core/sessions.svelte';
+	import { projectState } from '$frontend/stores/core/projects.svelte';
+	import { addNotification } from '$frontend/stores/ui/notification.svelte';
+	import ws from '$frontend/utils/ws';
 	import type { ChatSession } from '$shared/types/database/schema';
-	import type { SDKMessage } from '$shared/types/messaging';
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
-	import AvatarBubble from '$frontend/lib/components/common/AvatarBubble.svelte';
-	import Modal from '$frontend/lib/components/common/Modal.svelte';
-	import Dialog from '$frontend/lib/components/common/Dialog.svelte';
-	import { presenceState, isSessionWaitingInput } from '$frontend/lib/stores/core/presence.svelte';
-	import { isSessionUnread } from '$frontend/lib/stores/core/app.svelte';
-	import { userStore } from '$frontend/lib/stores/features/user.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
+	import AvatarBubble from '$frontend/components/common/display/AvatarBubble.svelte';
+	import Modal from '$frontend/components/common/overlay/Modal.svelte';
+	import Dialog from '$frontend/components/common/overlay/Dialog.svelte';
+	import { presenceState, isSessionWaitingInput } from '$frontend/stores/core/presence.svelte';
+	import { isSessionUnread } from '$frontend/stores/core/app.svelte';
+	import { userStore } from '$frontend/stores/features/user.svelte';
 	import { debug } from '$shared/utils/logger';
 
 	interface Props {
@@ -55,7 +54,6 @@
 
 	// Cache for session data to avoid multiple API calls
 	let sessionDataCache = $state<Record<string, {
-		messages: SDKMessage[];
 		title: string;
 		summary: string;
 		count: number;
@@ -64,87 +62,30 @@
 	}>>({});
 	let loadingSessionData = $state(false);
 
-	// Helper to get session data from cache or API
+	// Helper to get session data from cache or API (single session fallback)
 	async function getSessionData(sessionId: string) {
 		if (sessionDataCache[sessionId]) {
 			return sessionDataCache[sessionId];
 		}
 
 		try {
-			const messages = await ws.http('messages:list', { session_id: sessionId, include_all: true });
-
-			const firstUserMessage = messages.find((m: SDKMessage) => m.type === 'user');
-			let title = 'New Conversation';
-			if (firstUserMessage) {
-				let textContent = '';
-				if (typeof firstUserMessage.message.content === 'string') {
-					textContent = firstUserMessage.message.content;
-				} else if (Array.isArray(firstUserMessage.message.content)) {
-					const textBlocks = firstUserMessage.message.content.filter((c: any) => c.type === 'text');
-					textContent = textBlocks.map((b: any) => 'text' in b ? b.text : '').join(' ');
-				}
-
-				if (textContent) {
-					title = textContent.slice(0, 60) + (textContent.length > 60 ? '...' : '');
-				}
+			const previews = await ws.http('sessions:preview', { session_ids: [sessionId] });
+			const preview = previews[0];
+			if (preview) {
+				sessionDataCache[sessionId] = {
+					title: preview.title,
+					summary: preview.summary,
+					count: preview.count,
+					userCount: preview.userCount,
+					assistantCount: preview.assistantCount
+				};
+				return sessionDataCache[sessionId];
 			}
-
-			const assistantMessages = messages.filter((m: SDKMessage) => m.type === 'assistant');
-			let summary = 'No messages yet';
-			if (assistantMessages.length > 0) {
-				const lastMessage = assistantMessages[assistantMessages.length - 1];
-				const textBlocks = lastMessage.message.content.filter((c: any) => c.type === 'text');
-				if (textBlocks.length > 0) {
-					const fullText = textBlocks.map((b: any) => 'text' in b ? b.text : '').join(' ');
-					const cleanText = fullText.replace(/```[\s\S]*?```/g, '').trim();
-					summary = cleanText.slice(0, 100) + (cleanText.length > 100 ? '...' : '');
-				}
-			}
-
-			const userMessages = messages.filter((m: SDKMessage) => {
-				if (m.type !== 'user') return false;
-				let textContent = '';
-				if (typeof m.message.content === 'string') {
-					textContent = m.message.content;
-				} else if (Array.isArray(m.message.content)) {
-					const textBlocks = m.message.content.filter(c => c.type === 'text');
-					textContent = textBlocks.map(b => 'text' in b ? b.text : '').join(' ');
-				}
-				return textContent.trim().length > 0;
-			});
-
-			const totalBubbles = userMessages.length + assistantMessages.length;
-
-			const data = {
-				messages,
-				title,
-				summary,
-				count: totalBubbles,
-				userCount: userMessages.length,
-				assistantCount: assistantMessages.length
-			};
-
-			sessionDataCache[sessionId] = data;
-			debug.log('session', `Loaded session ${sessionId}:`, {
-				title,
-				totalMessages: messages.length,
-				userCount: userMessages.length,
-				assistantCount: assistantMessages.length,
-				totalBubbles: totalBubbles,
-				summary: summary.substring(0, 50)
-			});
-			return data;
 		} catch (error) {
 			debug.error('session', 'Error fetching session data:', error);
-			return {
-				messages: [],
-				title: 'New Conversation',
-				summary: 'No messages yet',
-				count: 0,
-				userCount: 0,
-				assistantCount: 0
-			};
 		}
+
+		return { title: 'New Conversation', summary: 'No messages yet', count: 0, userCount: 0, assistantCount: 0 };
 	}
 
 	function getMessageCount(sessionId: string): number {
@@ -167,12 +108,23 @@
 		loadingSessionData = true;
 		try {
 			// Sort newest first and load top 20 so new sessions are always included
-			const sortedSessions = [...sessions]
+			const sessionIds = [...sessions]
 				.sort((a, b) => new Date(b.started_at).getTime() - new Date(a.started_at).getTime())
-				.slice(0, 20);
-			await Promise.all(
-				sortedSessions.map(session => getSessionData(session.id))
-			);
+				.slice(0, 20)
+				.map(s => s.id);
+
+			if (sessionIds.length === 0) return;
+
+			const previews = await ws.http('sessions:preview', { session_ids: sessionIds });
+			for (const preview of previews) {
+				sessionDataCache[preview.session_id] = {
+					title: preview.title,
+					summary: preview.summary,
+					count: preview.count,
+					userCount: preview.userCount,
+					assistantCount: preview.assistantCount
+				};
+			}
 		} catch (error) {
 			debug.error('session', 'Error preloading session data:', error);
 		} finally {

package/frontend/{lib/components → components}/history/HistoryView.svelte

@@ -1,19 +1,18 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { sessionState, removeSession, setCurrentSession } from '$frontend/lib/stores/core/sessions.svelte';
-	import { projectState, setCurrentProject } from '$frontend/lib/stores/core/projects.svelte';
-	import { addNotification } from '$frontend/lib/stores/ui/notification.svelte';
-	import { setCurrentView } from '$frontend/lib/stores/core/app.svelte';
-	import ws from '$frontend/lib/utils/ws';
+	import { sessionState, removeSession, setCurrentSession } from '$frontend/stores/core/sessions.svelte';
+	import { projectState, setCurrentProject } from '$frontend/stores/core/projects.svelte';
+	import { addNotification } from '$frontend/stores/ui/notification.svelte';
+	import { setCurrentView } from '$frontend/stores/core/app.svelte';
+	import ws from '$frontend/utils/ws';
 	import type { ChatSession, Project } from '$shared/types/database/schema';
-	import type { SDKMessage } from '$shared/types/messaging';
-	import Input from '../common/Input.svelte';
-	import Select from '../common/Select.svelte';
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
-	import PageTemplate from '../common/PageTemplate.svelte';
-	import Button from '../common/Button.svelte';
-	import { showConfirm } from '$frontend/lib/stores/ui/dialog.svelte';
-	import Modal from '$frontend/lib/components/common/Modal.svelte';
+	import Input from '../common/form/Input.svelte';
+	import Select from '../common/form/Select.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
+	import PageTemplate from '../common/display/PageTemplate.svelte';
+	import Button from '../common/display/Button.svelte';
+	import { showConfirm } from '$frontend/stores/ui/dialog.svelte';
+	import Modal from '$frontend/components/common/overlay/Modal.svelte';
 	import TimelineModal from '../checkpoint/TimelineModal.svelte';
 	import { debug } from '$shared/utils/logger';
 
@@ -62,7 +61,6 @@
 	
 	// Cache for session data to avoid multiple API calls
 	const sessionDataCache = $state<Record<string, {
-		messages: SDKMessage[];
 		title: string;
 		summary: string;
 		count: number;
@@ -71,95 +69,30 @@
 	}>>({});
 	let loadingSessionData = $state(true);
 
-	// Helper to get session data from cache or API
+	// Helper to get session data from cache or API (single session fallback)
 	async function getSessionData(sessionId: string) {
 		if (sessionDataCache[sessionId]) {
 			return sessionDataCache[sessionId];
 		}
 
 		try {
-			// Get messages from current HEAD checkpoint (active branch only)
-			const messages = await ws.http('messages:list', { session_id: sessionId, include_all: true });
-
-			// Get title from first user message in current HEAD
-			const firstUserMessage = messages.find((m: SDKMessage) => m.type === 'user');
-			let title = 'New Conversation';
-			if (firstUserMessage) {
-				// Handle content properly - it can be string or array of content blocks
-				let textContent = '';
-				if (typeof firstUserMessage.message.content === 'string') {
-					textContent = firstUserMessage.message.content;
-				} else if (Array.isArray(firstUserMessage.message.content)) {
-					// Extract text from content blocks
-					const textBlocks = firstUserMessage.message.content.filter((c: any) => c.type === 'text');
-					textContent = textBlocks.map((b: any) => 'text' in b ? b.text : '').join(' ');
-				}
-
-				if (textContent) {
-					title = textContent.slice(0, 60) + (textContent.length > 60 ? '...' : '');
-				}
-			}
-
-			// Get summary from last assistant message in current HEAD checkpoint
-			const assistantMessages = messages.filter((m: SDKMessage) => m.type === 'assistant');
-			let summary = 'No messages yet';
-			if (assistantMessages.length > 0) {
-				const lastMessage = assistantMessages[assistantMessages.length - 1];
-				const textBlocks = lastMessage.message.content.filter((c: any) => c.type === 'text');
-				if (textBlocks.length > 0) {
-					const fullText = textBlocks.map((b: any) => 'text' in b ? b.text : '').join(' ');
-					const cleanText = fullText.replace(/```[\s\S]*?```/g, '').trim();
-					summary = cleanText.slice(0, 150) + (cleanText.length > 150 ? '...' : '');
-				}
+			const previews = await ws.http('sessions:preview', { session_ids: [sessionId] });
+			const preview = previews[0];
+			if (preview) {
+				sessionDataCache[sessionId] = {
+					title: preview.title,
+					summary: preview.summary,
+					count: preview.count,
+					userCount: preview.userCount,
+					assistantCount: preview.assistantCount
+				};
+				return sessionDataCache[sessionId];
 			}
-
-			// Count user and assistant messages in current HEAD checkpoint
-			// Filter out empty user messages (same as ChatInterface.svelte timeline logic)
-			const userMessages = messages.filter((m: SDKMessage) => {
-				if (m.type !== 'user') return false;
-				// Extract text content
-				let textContent = '';
-				if (typeof m.message.content === 'string') {
-					textContent = m.message.content;
-				} else if (Array.isArray(m.message.content)) {
-					const textBlocks = m.message.content.filter(c => c.type === 'text');
-					textContent = textBlocks.map(b => 'text' in b ? b.text : '').join(' ');
-				}
-				return textContent.trim().length > 0;
-			});
-
-			const totalBubbles = userMessages.length + assistantMessages.length; // Total message bubbles in chat
-
-			const data = {
-				messages,
-				title,
-				summary,
-				count: totalBubbles, // Total bubbles (user + assistant with non-empty content)
-				userCount: userMessages.length, // Number of chat sessions/exchanges (non-empty user messages)
-				assistantCount: assistantMessages.length
-			};
-
-			sessionDataCache[sessionId] = data;
-			debug.log('session', `Loaded session ${sessionId}:`, {
-				title,
-				totalMessages: messages.length,
-				userCount: userMessages.length,
-				assistantCount: assistantMessages.length,
-				totalBubbles: totalBubbles,
-				summary: summary.substring(0, 50)
-			});
-			return data;
 		} catch (error) {
 			debug.error('session', 'Error fetching session data:', error);
-			return {
-				messages: [],
-				title: 'New Conversation',
-				summary: 'No messages yet',
-				count: 0,
-				userCount: 0,
-				assistantCount: 0
-			};
 		}
+
+		return { title: 'New Conversation', summary: 'No messages yet', count: 0, userCount: 0, assistantCount: 0 };
 	}
 
 	// Helper functions that use cached data
@@ -179,14 +112,23 @@
 		return sessionDataCache[sessionId]?.summary || 'No messages yet';
 	}
 
-	// Preload session data for visible sessions
+	// Preload session data for visible sessions using a single bulk request
 	async function preloadSessionData() {
 		loadingSessionData = true;
 		try {
-			// Load all sessions in parallel for better performance
-			await Promise.all(
-				sessions.slice(0, 20).map(session => getSessionData(session.id))
-			);
+			const sessionIds = sessions.slice(0, 20).map(s => s.id);
+			if (sessionIds.length === 0) return;
+
+			const previews = await ws.http('sessions:preview', { session_ids: sessionIds });
+			for (const preview of previews) {
+				sessionDataCache[preview.session_id] = {
+					title: preview.title,
+					summary: preview.summary,
+					count: preview.count,
+					userCount: preview.userCount,
+					assistantCount: preview.assistantCount
+				};
+			}
 		} catch (error) {
 			debug.error('session', 'Error preloading session data:', error);
 		} finally {
@@ -199,14 +141,25 @@
 		preloadSessionData();
 	});
 
-	// Reload session data when sessions change
+	// Reload session data when new sessions arrive
 	$effect(() => {
 		if (sessions.length > 0 && !loadingSessionData) {
-			// Check if there are sessions without cached data
-			const uncachedSessions = sessions.filter(s => !sessionDataCache[s.id]);
-			if (uncachedSessions.length > 0) {
-				debug.log('session', `Found ${uncachedSessions.length} uncached sessions, loading...`);
-				preloadSessionData();
+			const uncachedIds = sessions.filter(s => !sessionDataCache[s.id]).map(s => s.id);
+			if (uncachedIds.length > 0) {
+				debug.log('session', `Found ${uncachedIds.length} uncached sessions, loading...`);
+				ws.http('sessions:preview', { session_ids: uncachedIds }).then((previews: any[]) => {
+					for (const preview of previews) {
+						sessionDataCache[preview.session_id] = {
+							title: preview.title,
+							summary: preview.summary,
+							count: preview.count,
+							userCount: preview.userCount,
+							assistantCount: preview.assistantCount
+						};
+					}
+				}).catch((err: unknown) => {
+					debug.error('session', 'Error loading uncached sessions:', err);
+				});
 			}
 		}
 	});