@myrialabs/clopen 0.0.1

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

@@ -0,0 +1,157 @@
+<!--
+  Message Header Component
+
+  Features:
+  - Timestamp display
+  - Sender name and role badge
+  - Agent status indicator
+  - Action buttons (copy, undo, edit, token usage, debug)
+-->
+
+<script lang="ts">
+	import type { SDKMessageFormatter } from '$shared/types/database/schema';
+	import type { IconName } from '$shared/types/ui/icons';
+	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import { appState } from '$frontend/lib/stores/core/app.svelte';
+
+	const {
+		message,
+		messageTimestamp,
+		isLastUserMessage = false,
+		roleConfig,
+		roleCategory,
+		agentStatus,
+		senderName,
+		hasTokenUsageData,
+		formatTime,
+		onCopy,
+		onRestore,
+		onEdit,
+		onShowTokenUsage,
+		onShowDebug
+	}: {
+		message: SDKMessageFormatter;
+		messageTimestamp: string;
+		isLastUserMessage?: boolean;
+		roleConfig: { gradient: string; icon: IconName; name: string };
+		roleCategory: 'user' | 'assistant' | 'agent' | string;
+		agentStatus: 'processing' | 'success' | 'error' | null;
+		senderName: string | null;
+		hasTokenUsageData: any;
+		formatTime: (timestamp?: string) => string;
+		onCopy: () => void;
+		onRestore: () => void;
+		onEdit: () => void;
+		onShowTokenUsage: () => void;
+		onShowDebug: () => void;
+	} = $props();
+
+	// State untuk copy button
+	let isCopied = $state(false);
+
+	// Handle copy dengan perubahan icon
+	function handleCopy() {
+		onCopy();
+		isCopied = true;
+		setTimeout(() => {
+			isCopied = false;
+		}, 1000);
+	}
+</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">
+	<!-- Timestamp and Type -->
+	<div class="flex items-center gap-2">
+		<span class="text-xs text-slate-500 dark:text-slate-400 font-medium">
+			{formatTime(messageTimestamp)}
+		</span>
+		<span class="w-1 h-1 bg-current rounded-full opacity-50"></span>
+		<div class="flex items-center gap-1.5">
+			<span class="text-xs text-slate-400 dark:text-slate-500 capitalize">
+				{roleCategory === 'user' && senderName ? senderName : roleConfig.name}
+			</span>
+			<!-- Agent Status Indicator -->
+			{#if agentStatus}
+				{#if agentStatus === 'processing'}
+					<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 === 'success'}
+					<span title="Agent completed successfully">
+						<Icon name="lucide:check" class="w-3 h-3 text-green-500 dark:text-green-400" />
+					</span>
+				{:else if agentStatus === 'error'}
+					<span title="Agent encountered an error">
+						<Icon name="lucide:x" class="w-3 h-3 text-red-500 dark:text-red-400" />
+					</span>
+				{/if}
+			{/if}
+		</div>
+	</div>
+
+	<!-- Compact Actions - Always visible but subtle -->
+	<div class="flex items-center space-x-1 -mr-1">
+		<!-- Copy button - hanya untuk user dan assistant (tidak untuk agent) -->
+		{#if roleCategory === 'user' || roleCategory === 'assistant'}
+			<button
+				onclick={handleCopy}
+				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="Copy message"
+				title="Copy message"
+			>
+				<Icon name={isCopied ? "lucide:check" : "lucide:copy"} class="w-3.5 h-3.5" />
+			</button>
+		{/if}
+
+		<!-- Undo and Edit buttons for user messages (disabled saat streaming) -->
+		{#if roleCategory === 'user'}
+			<!-- Undo button (not shown for last user message) -->
+			{#if !isLastUserMessage}
+				<button
+					onclick={onRestore}
+					disabled={appState.isLoading}
+					class="inline-flex p-1.5 rounded-md transition-colors {appState.isLoading ? 'cursor-not-allowed opacity-40' : 'hover:bg-slate-200 dark:hover:bg-slate-600 opacity-60 hover:opacity-100'}"
+					aria-label="Undo to this checkpoint"
+					title="Undo to this checkpoint"
+				>
+					<Icon name="lucide:undo-2" class="w-3.5 h-3.5" />
+				</button>
+			{/if}
+
+			<!-- Edit button for user messages -->
+			<button
+				onclick={onEdit}
+				disabled={appState.isLoading}
+				class="inline-flex p-1.5 rounded-md transition-colors {appState.isLoading ? 'cursor-not-allowed opacity-40' : 'hover:bg-slate-200 dark:hover:bg-slate-600 opacity-60 hover:opacity-100'}"
+				aria-label="Edit message"
+				title="Edit message"
+			>
+				<Icon name="lucide:pencil" class="w-3.5 h-3.5" />
+			</button>
+		{/if}
+
+		<!-- Token Usage button -->
+		{#if hasTokenUsageData}
+			<button
+				onclick={onShowTokenUsage}
+				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 token usage info"
+				title="Token usage"
+			>
+				<Icon name="lucide:zap" class="w-3.5 h-3.5" />
+			</button>
+		{/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}
+	</div>
+</div>

package/frontend/lib/components/chat/modal/DebugModal.svelte

@@ -0,0 +1,59 @@
+<!--
+  Debug Modal Component
+
+  Features:
+  - Display raw message data
+  - JSON formatting
+  - Copy to clipboard
+-->
+
+<script lang="ts">
+	import type { SDKMessageFormatter } from '$shared/types/database/schema';
+	import Modal from '$frontend/lib/components/common/Modal.svelte';
+	import Icon from '$frontend/lib/components/common/Icon.svelte';
+
+	let {
+		isOpen = $bindable(),
+		message,
+		onClose
+	}: {
+		isOpen: boolean;
+		message: SDKMessageFormatter;
+		onClose: () => void;
+	} = $props();
+
+	function copyToClipboard() {
+		navigator.clipboard.writeText(JSON.stringify(message, null, 2));
+	}
+</script>
+
+<Modal
+	bind:isOpen
+	title="Debug Information"
+	size="lg"
+	{onClose}
+>
+	{#snippet children()}
+		<div class="space-y-6">
+			<!-- Raw Message Data -->
+			<div>
+				<h4 class="font-medium text-slate-900 dark:text-slate-100 mb-2 flex items-center gap-2">
+					<Icon name="lucide:code" class="w-4 h-4" />
+					Raw Message
+				</h4>
+				<div class="bg-slate-100 dark:bg-slate-800 rounded-lg p-3 border border-slate-200 dark:border-slate-700">
+					<pre class="text-xs font-mono text-slate-700 dark:text-slate-300 overflow-x-auto max-h-80 overflow-y-auto whitespace-pre-wrap break-words">{JSON.stringify(message, null, 2)}</pre>
+				</div>
+				<div class="mt-3 flex justify-end">
+					<button
+						onclick={copyToClipboard}
+						class="px-3 py-1.5 bg-violet-500 hover:bg-violet-600 text-white rounded-md text-xs font-medium transition-colors flex items-center gap-1"
+					>
+						<Icon name="lucide:copy" class="w-3 h-3" />
+						Copy JSON
+					</button>
+				</div>
+			</div>
+		</div>
+	{/snippet}
+</Modal>

package/frontend/lib/components/chat/modal/TokenUsageModal.svelte

@@ -0,0 +1,124 @@
+<!--
+  Token Usage Modal Component
+
+  Features:
+  - Display token usage statistics
+  - Cache read and creation stats
+  - Request information
+-->
+
+<script lang="ts">
+	import Modal from '$frontend/lib/components/common/Modal.svelte';
+	import Icon from '$frontend/lib/components/common/Icon.svelte';
+
+	let {
+		isOpen = $bindable(),
+		tokenUsage,
+		timestamp,
+		onClose
+	}: {
+		isOpen: boolean;
+		tokenUsage: any;
+		timestamp: string;
+		onClose: () => void;
+	} = $props();
+
+	// Format timestamp
+	const formatTime = (timestamp?: string) => {
+		if (!timestamp) return 'Unknown';
+		const date = new Date(timestamp);
+		return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+	};
+</script>
+
+<Modal
+	bind:isOpen
+	title="Token Usage"
+	size="md"
+	{onClose}
+>
+	{#snippet children()}
+		{#if tokenUsage}
+			<div class="space-y-4">
+				<!-- Token Usage Stats -->
+				<div class="bg-violet-50 dark:bg-violet-900/20 rounded-lg p-4">
+					<h4 class="font-medium text-violet-900 dark:text-violet-100 mb-2 flex items-center gap-2">
+						<Icon name="lucide:zap" class="w-4 h-4" />
+						Token Usage
+					</h4>
+					<div class="space-y-3 text-slate-600 dark:text-slate-400">
+						<div class="flex justify-between items-center">
+							<span class="text-sm">Input Tokens:</span>
+							<span class="font-mono font-semibold text-violet-600 dark:text-violet-400">
+								{(tokenUsage.input_tokens ?? 0).toLocaleString()}
+							</span>
+						</div>
+						<div class="flex justify-between items-center">
+							<span class="text-sm">Output Tokens:</span>
+							<span class="font-mono font-semibold text-violet-600 dark:text-violet-400">
+								{(tokenUsage.output_tokens ?? 0).toLocaleString()}
+							</span>
+						</div>
+						<div class="flex justify-between items-center">
+							<span class="text-sm">Cache Read:</span>
+							<span class="font-mono font-semibold text-green-600 dark:text-green-400">
+								{(tokenUsage.cache_read_input_tokens ?? 0).toLocaleString()}
+							</span>
+						</div>
+						<div class="flex justify-between items-center">
+							<span class="text-sm">Cache Creation:</span>
+							<span class="font-mono font-semibold text-violet-600 dark:text-violet-400">
+								{(tokenUsage.cache_creation_input_tokens ?? 0).toLocaleString()}
+							</span>
+						</div>
+						<!-- Total -->
+						<div class="border-t border-violet-200/50 dark:border-violet-800/50 pt-3 mt-3">
+							<div class="flex justify-between items-center">
+								<span class="text-sm font-medium">Total Tokens:</span>
+								<span class="font-mono font-bold text-lg text-violet-600 dark:text-violet-400">
+									{((tokenUsage.input_tokens || 0) + (tokenUsage.output_tokens || 0)).toLocaleString()}
+								</span>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<!-- Request Info -->
+				<div class="bg-slate-50 dark:bg-slate-800 rounded-lg p-4 border border-slate-200 dark:border-slate-700">
+					<h4 class="font-medium text-slate-900 dark:text-slate-100 mb-2 flex items-center gap-2">
+						<Icon name="lucide:info" class="w-4 h-4" />
+						Request Info
+					</h4>
+					<div class="space-y-2">
+						<div class="flex justify-between items-center">
+							<span class="text-sm text-slate-600 dark:text-slate-400">Time:</span>
+							<span class="text-sm font-mono text-slate-900 dark:text-slate-100">
+								{formatTime(timestamp || new Date().toISOString())}
+							</span>
+						</div>
+						<div class="flex justify-between items-center">
+							<span class="text-sm text-slate-600 dark:text-slate-400">Date:</span>
+							<span class="text-sm font-mono text-slate-900 dark:text-slate-100">
+								{timestamp ? new Date(timestamp).toLocaleDateString() : 'Unknown'}
+							</span>
+						</div>
+						{#if tokenUsage.service_tier}
+							<div class="flex justify-between items-center">
+								<span class="text-sm text-slate-600 dark:text-slate-400">Service Tier:</span>
+								<span class="text-sm font-medium capitalize text-slate-900 dark:text-slate-100">
+									{tokenUsage.service_tier}
+								</span>
+							</div>
+						{/if}
+					</div>
+				</div>
+			</div>
+		{:else}
+			<div class="text-center py-8">
+				<Icon name="lucide:info" class="w-12 h-12 text-slate-400 mx-auto mb-2" />
+				<p class="text-slate-600 dark:text-slate-400">No token usage data available</p>
+				<p class="text-sm text-slate-500 dark:text-slate-500 mt-1">This message doesn't contain token usage information</p>
+			</div>
+		{/if}
+	{/snippet}
+</Modal>

package/frontend/lib/components/chat/shared/index.ts

@@ -0,0 +1,2 @@
+// Utility functions for chat components
+export * from './utils';

package/frontend/lib/components/chat/shared/utils.ts

@@ -0,0 +1,116 @@
+// Utility functions for tool displays
+
+/**
+ * Format file path for display by shortening long paths
+ */
+export function formatPath(path: string): string {
+	if (path === 'current directory') return path;
+	
+	if (path.length > 60) {
+		const parts = path.split(/[/\\]/);
+		if (parts.length > 3) {
+			return `.../${parts.slice(-3).join('/')}`;
+		}
+	}
+	return path;
+}
+
+/**
+ * Format content by truncating long text intelligently
+ */
+export function formatContent(content: string, maxLength: number = 500): string {
+	if (content.length <= maxLength) {
+		return content;
+	}
+
+	const lines = content.split('\n');
+	if (lines.length > 10) {
+		return lines.slice(0, 5).join('\n') + 
+			'\n... (' + (lines.length - 10) + ' more lines) ...\n' + 
+			lines.slice(-5).join('\n');
+	}
+	return content.substring(0, maxLength) + '...';
+}
+
+/**
+ * Format file size in human readable format
+ */
+export function formatFileSize(bytes: number): string {
+	if (bytes < 1024) return `${bytes} B`;
+	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+	if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+	return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+}
+
+/**
+ * Truncate text with ellipsis
+ */
+export function truncateText(text: string, maxLength: number): string {
+	if (text.length > maxLength) {
+		return text.substring(0, maxLength - 3) + '...';
+	}
+	return text;
+}
+
+/**
+ * Remove common indentation from a string
+ */
+export function removeCommonIndentation(input: string): string {
+	const lines = input.split('\n');
+	
+	// Find minimum indentation across all non-empty lines
+	let minIndent = Infinity;
+	
+	for (const line of lines) {
+		if (line.trim()) { // Skip empty lines
+			const match = line.match(/^(\s*)/);
+			if (match) {
+				minIndent = Math.min(minIndent, match[1].length);
+			}
+		}
+	}
+	
+	// Remove common indentation from all lines
+	if (minIndent > 0 && minIndent < Infinity) {
+		return lines.map(line => {
+			if (line.trim()) {
+				return line.substring(minIndent);
+			}
+			return line;
+		}).join('\n');
+	}
+	
+	return input;
+}
+
+/**
+ * Remove common indentation from an array of lines
+ */
+export function removeCommonIndentationFromLines(lines: string[]): { lines: string[], commonIndent: string } {
+	// Find minimum indentation across all non-empty lines
+	let minIndent = Infinity;
+	let commonIndent = '';
+	
+	for (const line of lines) {
+		if (line.trim()) { // Skip empty lines
+			const match = line.match(/^(\s*)/);
+			if (match) {
+				const indent = match[1].length;
+				if (indent < minIndent) {
+					minIndent = indent;
+					commonIndent = match[1].substring(0, minIndent);
+				}
+			}
+		}
+	}
+	
+	// Remove common indentation from all lines
+	if (minIndent > 0 && minIndent < Infinity) {
+		return {
+			lines: lines.map(line => line.startsWith(commonIndent) ? line.substring(minIndent) : line),
+			commonIndent
+		};
+	}
+	
+	return { lines, commonIndent: '' };
+}

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

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { BashOutputToolInput } from '$shared/types/messaging';
+	import { InfoLine } from './components';
+	import TextMessage from '../formatters/TextMessage.svelte';
+
+	const { toolInput }: { toolInput: BashOutputToolInput } = $props();
+
+	const taskId = toolInput.input.task_id;
+	const block = toolInput.input.block;
+	const timeout = toolInput.input.timeout;
+</script>
+
+<div class="bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3">
+	<!-- Command Info -->
+	<div class="flex gap-3">
+		<InfoLine icon="lucide:terminal" text="Reading output from task: {taskId}" />
+		{#if block}
+			<InfoLine icon="lucide:clock" text="Blocking: {block}" />
+		{/if}
+		{#if timeout}
+			<InfoLine icon="lucide:timer" text="Timeout: {timeout}ms" />
+		{/if}
+	</div>
+</div>
+
+<!-- Tool Result -->
+{#if toolInput.$result}
+	<div class="mt-4 bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3">
+		{#if typeof toolInput.$result.content === 'string'}
+			<TextMessage content={toolInput.$result.content} />
+		{:else}
+			<TextMessage content={JSON.stringify(toolInput.$result.content)} />
+		{/if}
+	</div>
+{/if}

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

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import type { BashToolInput, BashOutputToolOutput } from '$shared/types/messaging';
+	import { TerminalCommand } from './components';
+	import CodeBlock from './components/CodeBlock.svelte';
+
+	const { toolInput }: { toolInput: BashToolInput } = $props();
+
+	const command = toolInput.input.command || '';
+	const description = toolInput.input.description;
+	const timeout = toolInput.input.timeout;
+	const isBackground = toolInput.input.run_in_background;
+
+	function parseBashOutputToolOutput(content: string): BashOutputToolOutput {
+		const statusMatch = content.match(/<status>(.*?)<\/status>/);
+		const stdoutMatch = content.match(/<stdout>(.*?)<\/stdout>/s);
+		const timestampMatch = content.match(/<timestamp>(.*?)<\/timestamp>/);
+
+		return {
+			status: statusMatch ? statusMatch[1] as BashOutputToolOutput['status'] : 'completed',
+			output: stdoutMatch ? stdoutMatch[1].trim() : ""
+		};
+	}
+
+	// Parse the output content if it's from BashOutput format
+	const outputContent = $derived.by(() => {
+		if (!toolInput.$result?.content) return '';
+
+		// Check if this is a background command that has been merged with BashOutput
+		if (isBackground && toolInput.$result.content.includes('<status>')) {
+			const parsed = parseBashOutputToolOutput(toolInput.$result.content);
+			return parsed.output;
+		}
+
+		return toolInput.$result.content;
+	});
+
+</script>
+
+<TerminalCommand {command} {description} {timeout} />
+
+<!-- Tool Result -->
+{#if outputContent}
+	<div class="mt-4 bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3">
+		<CodeBlock code={outputContent} type="neutral" label="Output" />
+	</div>
+{/if}

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

@@ -0,0 +1,139 @@
+<script lang="ts">
+	import { FileHeader, CodeBlock } from './components';
+	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import type { ToolInput } from '$shared/types/messaging';
+
+	const { toolInput }: { toolInput: ToolInput } = $props();
+
+	/**
+	 * Parse MCP tool name
+	 * Format: mcp__server-name__tool-name
+	 */
+	interface ParsedToolName {
+		server: string;
+		tool: string;
+	}
+
+	function parseMcpToolName(fullName: string): ParsedToolName {
+		// Remove "mcp__" prefix
+		const withoutPrefix = fullName.replace('mcp__', '');
+		const parts = withoutPrefix.split('__');
+
+		return {
+			server: parts[0] || 'unknown',
+			tool: parts[1] || 'unknown'
+		};
+	}
+
+	const { server, tool } = parseMcpToolName(toolInput.name);
+
+	// Format server name for display (e.g., "weather-service" -> "Weather Service")
+	const serverDisplayName = $derived.by(() => {
+		return server
+			.split('-')
+			.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+			.join(' ');
+	});
+
+	// Format tool name for display (e.g., "get_temperature" -> "Get Temperature")
+	const toolDisplayName = $derived.by(() => {
+		return tool
+			.split('_')
+			.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+			.join(' ');
+	});
+
+	// Extract result content
+	const resultContent = $derived.by(() => {
+		if (!toolInput.$result?.content) return null;
+
+		const content = toolInput.$result.content;
+
+		// If content is already a string, return it
+		if (typeof content === 'string') {
+			return content;
+		}
+
+		// If content is an array (MCP format)
+		if (Array.isArray(content)) {
+			// Extract text from first text block
+			const textBlock = (content as any[]).find((block: any) => block.type === 'text');
+			if (textBlock && textBlock.text) {
+				return textBlock.text;
+			}
+			// Fallback: stringify the array
+			return JSON.stringify(content, null, 2);
+		}
+
+		// If content is an object, stringify it
+		if (typeof content === 'object' && content !== null) {
+			return JSON.stringify(content, null, 2);
+		}
+
+		// Fallback: convert to string
+		return String(content);
+	});
+
+	// Check if result is an error
+	const isError = $derived.by(() => {
+		if (!toolInput.$result?.content) return false;
+
+		const content = toolInput.$result.content;
+
+		// Check for error markers in string content
+		if (typeof content === 'string') {
+			return content.toLowerCase().includes('error:');
+		}
+
+		// Check for error markers in array content (MCP format)
+		if (Array.isArray(content)) {
+			const textBlock = (content as any[]).find((block: any) => block.type === 'text');
+			if (textBlock && textBlock.text) {
+				return textBlock.text.toLowerCase().includes('error:');
+			}
+		}
+
+		// Check for isError property in object content
+		if (typeof content === 'object' && content !== null) {
+			return (content as any).isError === true;
+		}
+
+		return false;
+	});
+
+	// Format input for display
+	const formattedInput = $derived(JSON.stringify(toolInput.input, null, 2));
+</script>
+
+<div class="mb-2">
+	<h3 class="text-slate-900 dark:text-slate-100 flex items-center gap-x-3 gap-y-1 flex-wrap">
+		<div class="flex items-center gap-1.5">
+			<Icon name="lucide:tool-case" class="w-4 h-4" />
+			<span>{serverDisplayName}</span>
+		</div>
+		<div class="flex items-center gap-1.5">
+			<Icon name="lucide:hammer" class="w-4 h-4" />
+			<span>{toolDisplayName}</span>
+		</div>
+	</h3>
+</div>
+
+<!-- Tool Input -->
+{#if toolInput.input && Object.keys(toolInput.input).length > 0}
+	<div class="bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3">
+		<CodeBlock code={formattedInput} type="neutral" label="Input" />
+	</div>
+{/if}
+
+<!-- Tool Result -->
+{#if resultContent}
+	<div class="mt-4 bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3">
+		<CodeBlock code={resultContent} type="neutral" label={isError ? 'Error' : 'Result'} />
+		<!-- {@html resultContent.replace(/\n/g, '<br>')} -->
+	</div>
+{:else if toolInput.$result}
+	<!-- Empty result -->
+	<div class="mt-4 bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3">
+		<p class="text-sm text-slate-500 dark:text-slate-400 italic">No result returned</p>
+	</div>
+{/if}