@myrialabs/clopen 0.0.7 → 0.1.1

package/frontend/lib/components/chat/ChatInterface.svelte

@@ -12,7 +12,7 @@
 <script lang="ts">
 	import { sessionState, setCurrentSession, createNewChatSession, clearMessages, loadMessagesForSession } from '$frontend/lib/stores/core/sessions.svelte';
 	import { projectState } from '$frontend/lib/stores/core/projects.svelte';
-	import { appState } from '$frontend/lib/stores/core/app.svelte';
+	import { appState, getSessionProcessState } from '$frontend/lib/stores/core/app.svelte';
 	import { presenceState } from '$frontend/lib/stores/core/presence.svelte';
 	import { userStore } from '$frontend/lib/stores/features/user.svelte';
 	import { addNotification } from '$frontend/lib/stores/ui/notification.svelte';
@@ -310,11 +310,18 @@
 											</div>
 										{/if}
 										{#if isStreaming}
+										{#if getSessionProcessState(session.id).isWaitingInput}
+											<span class="shrink-0 flex items-center gap-1 px-1.5 py-0.5 text-3xs font-medium rounded-full bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400">
+												<span class="w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse"></span>
+												Input
+											</span>
+										{:else}
 											<span class="shrink-0 flex items-center gap-1 px-1.5 py-0.5 text-3xs font-medium rounded-full bg-violet-100 dark:bg-violet-900/30 text-violet-600 dark:text-violet-400">
 												<span class="w-1.5 h-1.5 rounded-full bg-violet-500 animate-pulse"></span>
 												AI
 											</span>
 										{/if}
+									{/if}
 									</button>
 								{/each}
 							</div>

package/frontend/lib/components/chat/formatters/MessageFormatter.svelte

@@ -9,6 +9,7 @@
 
 	import type { SDKMessage, SDKPartialAssistantMessage } from '$shared/types/messaging';
 	import type { SDKMessageFormatter } from '$shared/types/database/schema';
+	import { getCompactSummary } from '$frontend/lib/utils/chat/message-grouper';
 
 	const { message }: { message: SDKMessageFormatter } = $props();
 
@@ -39,6 +40,25 @@
 	function parseContent() {
 		const elements: ContentElement[] = [];
 
+		// Handle compact boundary messages (conversation compaction indicator)
+		if (message.type === 'system' && (message as any).subtype === 'compact_boundary') {
+			const compactMeta = (message as any).compact_metadata;
+			const trigger = compactMeta?.trigger === 'manual' ? 'Manual' : 'Auto';
+			elements.push({
+				type: 'text',
+				content: `Context was compacted (${trigger}). Previous messages have been summarized to free up context space.`
+			});
+			// Include synthetic user content (continuation summary) via side-channel lookup
+			const summary = getCompactSummary(message);
+			if (summary) {
+				elements.push({
+					type: 'text',
+					content: summary
+				});
+			}
+			return elements;
+		}
+
 		// Handle partial messages (streaming) — both text and reasoning
 		if (message.type === 'stream_event') {
 			if ('partialText' in message && message.partialText) {

package/frontend/lib/components/chat/formatters/TextMessage.svelte

@@ -91,8 +91,7 @@
 	const processedContent = $derived(processContent(content));
 </script>
 
-<div class="message-content">
-	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+<div class="message-content space-y-4 wrap-break-word">
 	{@html processedContent}
 </div>
 
@@ -101,7 +100,6 @@
 	:global(.message-content) {
 		color: rgb(30 41 59);
 		line-height: 1.5;
-		margin-bottom: -1rem;
 	}
 
 	:global(.dark .message-content) {
@@ -109,21 +107,11 @@
 	}
 	
 	/* Headings */
-	:global(.message-content h1:first-child),
-	:global(.message-content h2:first-child),
-	:global(.message-content h3:first-child),
-	:global(.message-content h4:first-child),
-	:global(.message-content h5:first-child),
-	:global(.message-content h6:first-child) {
+	:global(.message-content *:first-child) {
 		margin-top: 0;
 	}
 
-	:global(.message-content h1:last-child),
-	:global(.message-content h2:last-child),
-	:global(.message-content h3:last-child),
-	:global(.message-content h4:last-child),
-	:global(.message-content h5:last-child),
-	:global(.message-content h6:last-child) {
+	:global(.message-content *:last-child) {
 		margin-bottom: 0;
 	}
 

package/frontend/lib/components/chat/formatters/Tools.svelte

@@ -2,11 +2,12 @@
 	import Icon from '$frontend/lib/components/common/Icon.svelte';
 	import type { ToolInput } from '$shared/types/messaging';
 	import {
-		BashTool, BashOutputTool, EditTool, ExitPlanModeTool,
-		GlobTool, GrepTool, KillShellTool, ListMcpResourcesTool,
+		BashTool, BashOutputTool, EditTool, EnterPlanModeTool, ExitPlanModeTool,
+		GlobTool, GrepTool, TaskStopTool, ListMcpResourcesTool,
 		NotebookEditTool,
-		ReadTool, ReadMcpResourceTool, TaskTool, TodoWriteTool,
-		WebFetchTool, WebSearchTool, WriteTool, CustomMcpTool
+		ReadTool, ReadMcpResourceTool, AgentTool, TaskTool, TodoWriteTool,
+		WebFetchTool, WebSearchTool, WriteTool, CustomMcpTool,
+		AskUserQuestionTool
 	} from '../tools';
 
 	const { toolInput }: { toolInput: ToolInput } = $props();
@@ -32,14 +33,16 @@
 	<BashOutputTool {toolInput} />
 {:else if toolInput.name === 'Edit'}
 	<EditTool {toolInput} />
+{:else if toolInput.name === 'EnterPlanMode'}
+	<EnterPlanModeTool {toolInput} />
 {:else if toolInput.name === 'ExitPlanMode'}
 	<ExitPlanModeTool {toolInput} />
 {:else if toolInput.name === 'Glob'}
 	<GlobTool {toolInput} />
 {:else if toolInput.name === 'Grep'}
 	<GrepTool {toolInput} />
-{:else if toolInput.name === 'KillShell'}
-	<KillShellTool {toolInput} />
+{:else if toolInput.name === 'TaskStop'}
+	<TaskStopTool {toolInput} />
 {:else if toolInput.name === 'ListMcpResources'}
 	<ListMcpResourcesTool {toolInput} />
 {:else if toolInput.name === 'NotebookEdit'}
@@ -48,6 +51,8 @@
 	<ReadTool {toolInput} />
 {:else if toolInput.name === 'ReadMcpResource'}
 	<ReadMcpResourceTool {toolInput} />
+{:else if toolInput.name === 'Agent'}
+	<AgentTool {toolInput} />
 {:else if toolInput.name === 'Task'}
 	<TaskTool {toolInput} />
 {:else if toolInput.name === 'WebFetch'}
@@ -56,8 +61,10 @@
 	<WebSearchTool {toolInput} />
 {:else if toolInput.name === 'Write'}
 	<WriteTool {toolInput} />
+{:else if toolInput.name === 'AskUserQuestion'}
+	<AskUserQuestionTool {toolInput} />
 {:else}
-	<!-- Generic fallback for unknown tools -->
+	<!-- Generic fallback for unknown tools (Config, EnterWorktree, etc.) -->
 	<div class="bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg p-4 mb-4">
 		<div class="flex items-center gap-2 mb-2">
 			<Icon name="lucide:wrench" class="text-green-600 dark:text-green-400 w-5 h-5" />
@@ -67,4 +74,4 @@
 			<pre class="text-xs text-slate-600 dark:text-slate-400 whitespace-pre-wrap font-mono">{JSON.stringify((toolInput as any).input, null, 2)}</pre>
 		</div>
 	</div>
-{/if}
+{/if}

package/frontend/lib/components/chat/input/ChatInput.svelte

@@ -146,6 +146,9 @@
 		if (chatBlockedReason === 'no-model') {
 			return 'No model selected. Please select a model to start chatting.';
 		}
+		if (appState.isWaitingInput) {
+			return 'Answer the question above to continue...';
+		}
 		return placeholderAnimation.placeholderText;
 	});
 
@@ -238,8 +241,10 @@
 	async function catchupActiveStream(status: any) {
 		if (!status?.streams?.length || !sessionState.currentSession?.id) return;
 
-		// Find the active stream
-		const activeStream = status.streams.find((s: any) => s.status === 'active');
+		// Find the active stream for the current session
+		const activeStream = status.streams.find(
+			(s: any) => s.status === 'active' && s.chatSessionId === sessionState.currentSession?.id
+		);
 		if (!activeStream) return;
 
 		try {
@@ -248,27 +253,67 @@
 			});
 
 			if (streamState && streamState.status === 'active' && streamState.processId) {
-				// Check if we already have a streaming message for this processId
-				const hasStreamingMessage = sessionState.messages.some(
-					(m: any) => m.type === 'stream_event' && m.processId === streamState.processId
-				);
+				// ── Inject reasoning stream_event (if available) ──
+				if (streamState.currentReasoningText) {
+					const hasReasoningStream = sessionState.messages.some(
+						(m: any) => m.type === 'stream_event' && m.metadata?.reasoning && m.processId === streamState.processId
+					);
+
+					if (!hasReasoningStream) {
+						const reasoningMessage = {
+							type: 'stream_event' as const,
+							processId: streamState.processId,
+							partialText: streamState.currentReasoningText,
+							metadata: { reasoning: true }
+						};
+						(sessionState.messages as any[]).push(reasoningMessage);
+					} else {
+						const existingReasoning = sessionState.messages.find(
+							(m: any) => m.type === 'stream_event' && m.metadata?.reasoning && m.processId === streamState.processId
+						);
+						if (existingReasoning) {
+							(existingReasoning as any).partialText = streamState.currentReasoningText;
+						}
+					}
+				}
 
-				if (!hasStreamingMessage) {
-					// Inject streaming message with the current partial text from the server
-					const streamingMessage = {
-						type: 'stream_event' as const,
-						processId: streamState.processId,
-						partialText: streamState.currentPartialText || '',
-						timestamp: new Date().toISOString()
-					};
-					(sessionState.messages as any[]).push(streamingMessage);
-				} else {
-					// Update existing stream_event with latest partial text
-					const existingMsg = sessionState.messages.find(
+				// ── Inject regular text stream_event (if available) ──
+				if (streamState.currentPartialText) {
+					const hasTextStream = sessionState.messages.some(
+						(m: any) => m.type === 'stream_event' && !m.metadata?.reasoning && m.processId === streamState.processId
+					);
+
+					if (!hasTextStream) {
+						const streamingMessage = {
+							type: 'stream_event' as const,
+							processId: streamState.processId,
+							partialText: streamState.currentPartialText,
+							metadata: {}
+						};
+						(sessionState.messages as any[]).push(streamingMessage);
+					} else {
+						const existingMsg = sessionState.messages.find(
+							(m: any) => m.type === 'stream_event' && !m.metadata?.reasoning && m.processId === streamState.processId
+						);
+						if (existingMsg) {
+							(existingMsg as any).partialText = streamState.currentPartialText;
+						}
+					}
+				}
+
+				// If neither text nor reasoning is available yet, inject an empty
+				// stream_event placeholder so the loading indicator is visible
+				if (!streamState.currentPartialText && !streamState.currentReasoningText) {
+					const hasAnyStream = sessionState.messages.some(
 						(m: any) => m.type === 'stream_event' && m.processId === streamState.processId
 					);
-					if (existingMsg && streamState.currentPartialText) {
-						(existingMsg as any).partialText = streamState.currentPartialText;
+					if (!hasAnyStream) {
+						(sessionState.messages as any[]).push({
+							type: 'stream_event' as const,
+							processId: streamState.processId,
+							partialText: '',
+							metadata: {}
+						});
 					}
 				}
 
@@ -278,9 +323,13 @@
 					streamState.processId
 				);
 
+				// Detect if an interactive tool (e.g. AskUserQuestion) is pending in existing messages
+				chatService.detectPendingInteractiveTools();
+
 				debug.log('chat', 'Caught up with active stream:', {
 					processId: streamState.processId,
-					partialLength: streamState.currentPartialText?.length || 0
+					partialLength: streamState.currentPartialText?.length || 0,
+					reasoningLength: streamState.currentReasoningText?.length || 0
 				});
 			}
 		} catch (error) {

package/frontend/lib/components/chat/input/components/LoadingIndicator.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { appState } from '$frontend/lib/stores/core/app.svelte';
+	import Icon from '$frontend/lib/components/common/Icon.svelte';
 	import { fly } from 'svelte/transition';
 
 	interface Props {
@@ -15,17 +16,28 @@
 		class="absolute z-20 {isWelcomeState ? '-top-16' : '-top-14'} left-0 right-0 flex justify-center pointer-events-none"
 		transition:fly={{ y: 100, duration: 300 }}
 	>
-		<div class="flex items-center gap-2.5 px-4 py-2 bg-slate-100 dark:bg-slate-800 rounded-full border border-slate-300 dark:border-slate-600 shadow-sm">
-			<!-- Simple spinner -->
-			<svg class="animate-spin h-4 w-4 text-slate-700 dark:text-slate-300" viewBox="0 0 24 24">
-				<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"></circle>
-				<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-			</svg>
+		{#if appState.isWaitingInput}
+			<!-- Waiting for user input state -->
+			<div class="flex items-center gap-2.5 px-4 py-2 bg-amber-50 dark:bg-amber-900/30 rounded-full border border-amber-300 dark:border-amber-700 shadow-sm">
+				<Icon name="lucide:message-circle-question-mark" class="w-4 h-4 text-amber-600 dark:text-amber-400" />
+				<span class="text-sm font-medium text-amber-700 dark:text-amber-300">
+					Waiting for your input...
+				</span>
+			</div>
+		{:else}
+			<!-- Normal loading state -->
+			<div class="flex items-center gap-2.5 px-4 py-2 bg-slate-100 dark:bg-slate-800 rounded-full border border-slate-300 dark:border-slate-600 shadow-sm">
+				<!-- Simple spinner -->
+				<svg class="animate-spin h-4 w-4 text-slate-700 dark:text-slate-300" viewBox="0 0 24 24">
+					<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"></circle>
+					<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+				</svg>
 
-			<!-- Text with typewriter effect -->
-			<span class="text-sm font-medium text-slate-700 dark:text-slate-300 capitalize">
-				{visibleLoadingText}
-			</span>
-		</div>
+				<!-- Text with typewriter effect -->
+				<span class="text-sm font-medium text-slate-700 dark:text-slate-300 capitalize">
+					{visibleLoadingText}
+				</span>
+			</div>
+		{/if}
 	</div>
 {/if}

package/frontend/lib/components/chat/input/composables/use-chat-actions.svelte.ts

@@ -34,7 +34,7 @@ export function useChatActions(params: ChatActionsParams) {
 
 	// Handle send message with SDK streaming
 	async function sendMessage(messageText: string, setMessageText: (value: string) => void) {
-		if ((!messageText.trim() && params.attachedFiles.length === 0) || appState.isLoading) return;
+		if ((!messageText.trim() && params.attachedFiles.length === 0) || appState.isLoading || appState.isWaitingInput) return;
 
 		// Initialize sound notifications on first user interaction (browser policy requirement)
 		soundNotification.initialize();

package/frontend/lib/components/chat/message/ChatMessage.svelte

@@ -61,6 +61,10 @@
 	const shouldBeDimmed = $derived(shouldDimMessage(messageId));
 
 	const roleCategory = $derived.by(() => {
+		// Compact boundary messages (conversation compaction indicator)
+		if (message.type === 'system' && (message as any).subtype === 'compact_boundary') {
+			return 'compact';
+		}
 		// Reasoning messages (from both engines)
 		if (message.metadata?.reasoning) {
 			return 'reasoning';
@@ -164,7 +168,7 @@
 	// Detect agent processing status
 	// When stream is no longer active (not loading) and tools don't have results,
 	// mark them as failed (cancelled/interrupted) instead of perpetually "processing"
-	const agentStatus = $derived.by((): 'processing' | 'success' | 'error' | null => {
+	const agentStatus = $derived.by((): 'processing' | 'waiting' | 'success' | 'error' | null => {
 		if (roleCategory !== 'agent') return null;
 
 		if (message.type === 'assistant' && 'message' in message && Array.isArray(message.message.content)) {
@@ -176,6 +180,8 @@
 			const allHaveResults = toolUses.every((tool: any) => '$result' in tool && tool.$result);
 
 			if (!allHaveResults) {
+				// If stream is active and waiting for user input → show as waiting
+				if (appState.isWaitingInput) return 'waiting';
 				// If stream is still active, tools are processing
 				// If stream ended (not loading), tools were interrupted/cancelled → show as error
 				return appState.isLoading ? 'processing' : 'error';
@@ -191,6 +197,12 @@
 
 	const roleConfig = $derived.by((): { gradient: string; icon: IconName; name: string } => {
 		switch (roleCategory) {
+			case 'compact':
+				return {
+					gradient: 'from-amber-500 to-orange-600',
+					icon: 'lucide:layers',
+					name: 'System'
+				};
 			case 'reasoning':
 				return {
 					gradient: 'from-emerald-500 to-green-600',

package/frontend/lib/components/chat/message/ChatMessages.svelte

@@ -48,8 +48,8 @@
 
 	// Process messages through grouping and embedding
 	const processedMessages = $derived.by(() => {
-		const { groups, toolUseMap } = groupMessages(sessionState.messages);
-		return embedToolResults(groups, toolUseMap);
+		const { groups, toolUseMap, subAgentMap } = groupMessages(sessionState.messages);
+		return embedToolResults(groups, toolUseMap, subAgentMap);
 	});
 
 	// Filter out messages with empty content arrays

package/frontend/lib/components/chat/message/DateSeparator.svelte

@@ -62,7 +62,7 @@
 </script>
 
 <!-- Date Separator -->
-<div class="flex items-center justify-center my-3 md:my-4 px-4 md:px-6 select-none">
+<div class="flex items-center justify-center mt-6 mb-3 md:mt-8 md:mb-4 px-4 md:px-6 select-none">
 	<div class="relative flex items-center w-full max-w-md">
 		<!-- Left line -->
 		<div

package/frontend/lib/components/chat/message/MessageBubble.svelte

@@ -36,7 +36,7 @@
 		isLastUserMessage?: boolean;
 		roleConfig: { gradient: string; icon: IconName; name: string };
 		roleCategory: 'user' | 'assistant' | 'agent' | string;
-		agentStatus: 'processing' | 'success' | 'error' | null;
+		agentStatus: 'processing' | 'waiting' | 'success' | 'error' | null;
 		senderName: string | null;
 		hasTokenUsageData: any;
 		formatTime: (timestamp?: string) => string;
@@ -74,7 +74,7 @@
 
 		<!-- Message Content -->
 		<div class="p-3 md:p-4">
-			<div class="max-w-none">
+			<div class="max-w-none space-y-4">
 				<!-- Content rendering using MessageFormatter component -->
 				<MessageFormatter {message} />
 			</div>

package/frontend/lib/components/chat/message/MessageHeader.svelte

@@ -35,7 +35,7 @@
 		isLastUserMessage?: boolean;
 		roleConfig: { gradient: string; icon: IconName; name: string };
 		roleCategory: 'user' | 'assistant' | 'agent' | string;
-		agentStatus: 'processing' | 'success' | 'error' | null;
+		agentStatus: 'processing' | 'waiting' | 'success' | 'error' | null;
 		senderName: string | null;
 		hasTokenUsageData: any;
 		formatTime: (timestamp?: string) => string;
@@ -59,7 +59,7 @@
 	}
 </script>
 
-<div class="flex items-center justify-between gap-5 px-3 md:px-4 py-1 border-b border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800">
+<div class="flex items-center justify-between gap-5 h-8 px-3 md:px-4 py-1 border-b border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800">
 	<!-- Timestamp and Type -->
 	<div class="flex items-center gap-2">
 		<span class="text-xs text-slate-500 dark:text-slate-400 font-medium">
@@ -76,6 +76,10 @@
 					<span title="Agent is processing...">
 						<Icon name="lucide:loader" class="w-3 h-3 text-violet-500 dark:text-violet-400 animate-spin" />
 					</span>
+				{:else if agentStatus === 'waiting'}
+					<span title="Waiting for your input...">
+						<Icon name="lucide:message-circle-question-mark" class="w-3 h-3 text-amber-500 dark:text-amber-400" />
+					</span>
 				{:else if agentStatus === 'success'}
 					<span title="Agent completed successfully">
 						<Icon name="lucide:check" class="w-3 h-3 text-green-500 dark:text-green-400" />
@@ -143,15 +147,13 @@
 		{/if}
 
 		<!-- Debug toggle button -->
-		{#if 'parent_tool_use_id' in message}
-			<button
-				onclick={onShowDebug}
-				class="inline-flex p-1.5 rounded-md hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors opacity-60 hover:opacity-100"
-				aria-label="Show debug info"
-				title="Debug info"
-			>
-				<Icon name="lucide:bug" class="w-3.5 h-3.5" />
-			</button>
-		{/if}
+		<button
+			onclick={onShowDebug}
+			class="inline-flex p-1.5 rounded-md hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors opacity-60 hover:opacity-100"
+			aria-label="Show debug info"
+			title="Debug info"
+		>
+			<Icon name="lucide:bug" class="w-3.5 h-3.5" />
+		</button>
 	</div>
 </div>

package/frontend/lib/components/chat/tools/AgentTool.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import type { AgentToolInput, SubAgentActivity } from '$shared/types/messaging';
+	import { InfoLine } from './components';
+	import TextMessage from '../formatters/TextMessage.svelte';
+
+	const { toolInput }: { toolInput: AgentToolInput } = $props();
+
+	const description = toolInput.input.description || '';
+	const subagentType = toolInput.input.subagent_type || 'general-purpose';
+	const subMessages = (toolInput as any).$subMessages as SubAgentActivity[] | undefined;
+	const toolUseCount = subMessages?.filter(a => a.type === 'tool_use').length ?? 0;
+
+	let scrollContainer: HTMLDivElement | undefined = $state();
+
+	// Auto-scroll to bottom when new activities arrive
+	$effect(() => {
+		const _len = subMessages?.length ?? 0;
+		if (_len > 0 && scrollContainer) {
+			tick().then(() => {
+				if (scrollContainer) {
+					scrollContainer.scrollTop = scrollContainer.scrollHeight;
+				}
+			});
+		}
+	});
+
+	function getToolBrief(activity: SubAgentActivity): string {
+		if (!activity.toolInput) return '';
+		switch (activity.toolName) {
+			case 'Bash': return activity.toolInput.command || '';
+			case 'Read': return activity.toolInput.file_path || '';
+			case 'Write': return activity.toolInput.file_path || '';
+			case 'Edit': return activity.toolInput.file_path || '';
+			case 'Glob': return activity.toolInput.pattern || '';
+			case 'Grep': return activity.toolInput.pattern || '';
+			case 'WebFetch': return activity.toolInput.url || '';
+			case 'WebSearch': return activity.toolInput.query || '';
+			default: return '';
+		}
+	}
+</script>
+
+<!-- Header card -->
+<div class="bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3">
+	<div class="space-y-1">
+		<InfoLine icon="lucide:search" text={description} />
+		<InfoLine icon="lucide:bot" text="Using {subagentType} agent" />
+	</div>
+</div>
+
+<!-- Sub-agent tool calls (separate from header) -->
+{#if subMessages && subMessages.length > 0}
+<div class="bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3">
+	<div class="text-xs text-slate-500 dark:text-slate-400 mb-2">
+		{toolUseCount} tool {toolUseCount === 1 ? 'call' : 'calls'}:
+	</div>
+	<div bind:this={scrollContainer} class="max-h-64 overflow-y-auto">
+		<ul class="list-disc pl-5 space-y-0.5">
+			{#each subMessages as activity}
+				{#if activity.type === 'tool_use'}
+					<li class="text-xs text-slate-600 dark:text-slate-400">
+						<span class="font-medium">{activity.toolName}</span>
+						{#if getToolBrief(activity)}
+							<span class="text-slate-400 dark:text-slate-500 ml-1">{getToolBrief(activity)}</span>
+						{/if}
+					</li>
+				{:else if activity.type === 'text'}
+					<li class="text-xs text-slate-600 dark:text-slate-400 line-clamp-2">
+						{activity.text}
+					</li>
+				{/if}
+			{/each}
+		</ul>
+	</div>
+</div>
+{/if}
+
+<!-- Tool Result -->
+{#if toolInput.$result}
+	{@const resultContent = toolInput.$result.content as any}
+	<div class="mt-4">
+		{#if typeof resultContent === 'string'}
+			<TextMessage content={resultContent} />
+		{:else if Array.isArray(resultContent)}
+			{#each resultContent as block}
+				{#if typeof block === 'object' && block.type === 'text'}
+					<TextMessage content={block.text} />
+				{/if}
+			{/each}
+		{:else}
+			<TextMessage content={JSON.stringify(resultContent)} />
+		{/if}
+	</div>
+{/if}