@myrialabs/clopen 0.0.1

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

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { WriteToolInput } from '$shared/types/messaging';
+	import { FileHeader, DiffBlock } from './components';
+	import TextMessage from '../formatters/TextMessage.svelte';
+
+	const { toolInput }: { toolInput: WriteToolInput } = $props();
+
+	const filePath = toolInput.input.file_path || '';
+	const fileName = filePath.split(/[/\\]/).pop() || filePath || 'unknown';
+	const content = toolInput.input.content || '';
+</script>
+
+<FileHeader
+	{filePath}
+	{fileName}
+	iconColor="text-violet-600 dark:text-violet-400"
+/>
+
+<!-- Code Changes -->
+<div class="mt-4">
+	<DiffBlock oldString="" newString={content} label="Write" />
+</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/components/CodeBlock.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import type { IconName } from '$shared/types/ui/icons';
+	import { removeCommonIndentation } from '../../shared/utils';
+	import { isTerminalOutput, processAnsiCodes, escapeHtml } from '$frontend/lib/utils/terminalFormatter';
+
+	interface Props {
+		code: string;
+		type: 'add' | 'remove' | 'neutral';
+		label?: string;
+		showTruncation?: boolean;
+	}
+
+	const { code, type, label }: Props = $props();
+
+	function formatCode(code: string) {
+		// First remove common indentation
+		const cleanCode = removeCommonIndentation(code);
+
+		// Check if it's terminal output and process ANSI codes if needed
+		if (isTerminalOutput(cleanCode)) {
+			// For terminal output, process ANSI codes but don't escape HTML
+			// since we're displaying it in a <pre> tag
+			return processAnsiCodes(cleanCode);
+		}
+
+		// For non-terminal code, don't escape HTML either since it's in <pre>
+		// The <pre> tag already handles text display safely
+		return cleanCode;
+	}
+
+	const styles = {
+		add: {
+			icon: 'lucide:circle-plus' as IconName,
+			iconColor: 'text-green-500',
+			labelColor: 'text-green-700 dark:text-green-300',
+			bgColor: 'bg-green-50 dark:bg-green-950',
+			borderColor: 'border-green-200 dark:border-green-800',
+			textColor: 'text-green-800 dark:text-green-200'
+		},
+		remove: {
+			icon: 'lucide:circle-minus' as IconName,
+			iconColor: 'text-red-500',
+			labelColor: 'text-red-700 dark:text-red-300',
+			bgColor: 'bg-red-50 dark:bg-red-950',
+			borderColor: 'border-red-200 dark:border-red-800',
+			textColor: 'text-red-800 dark:text-red-200'
+		},
+		neutral: {
+			icon: 'lucide:code' as IconName,
+			iconColor: 'text-slate-500',
+			labelColor: 'text-slate-700 dark:text-slate-300',
+			bgColor: 'bg-slate-50 dark:bg-slate-950',
+			borderColor: 'border-slate-200 dark:border-slate-800',
+			textColor: 'text-slate-800 dark:text-slate-200'
+		}
+	};
+
+	const style = styles[type];
+	const formattedCode = formatCode(code);
+	const isTerminal = isTerminalOutput(code);
+</script>
+
+<div>
+	{#if label}
+		<div class="flex items-center gap-2 mb-2">
+			<!-- <Icon name={style.icon} class="{style.iconColor} w-4 h-4" /> -->
+			<span class="text-xs font-medium {style.labelColor}">{label}:</span>
+		</div>
+	{/if}
+	<div class="max-h-72 {style.bgColor} border {style.borderColor} rounded-md py-2.5 px-3 whitespace-pre-wrap overflow-auto">
+		{#if isTerminal}
+			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+			<pre class="text-xs {style.textColor} font-mono">{@html formattedCode}</pre>
+		{:else}
+			<pre class="text-xs {style.textColor} font-mono">{formattedCode}</pre>
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,408 @@
+<script lang="ts">
+	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import { removeCommonIndentationFromLines } from '../../shared/utils';
+
+	interface Props {
+		oldString: string;
+		newString: string;
+		label?: string;
+	}
+
+	interface DiffLine {
+		type: 'unchanged' | 'removed' | 'added';
+		content: string;
+		highlights?: Array<{ start: number; end: number }>;
+	}
+
+	interface GroupedDiff {
+		type: 'unchanged' | 'change';
+		removed?: DiffLine[];
+		added?: DiffLine[];
+		lines?: DiffLine[];
+	}
+
+	const { oldString, newString, label }: Props = $props();
+
+	// Myers diff algorithm for finding longest common subsequence
+	function findLCS(arr1: string[], arr2: string[]): number[][] {
+		const m = arr1.length;
+		const n = arr2.length;
+		const dp: number[][] = Array(m + 1).fill(null).map(() => Array(n + 1).fill(0));
+
+		for (let i = 1; i <= m; i++) {
+			for (let j = 1; j <= n; j++) {
+				if (arr1[i - 1] === arr2[j - 1]) {
+					dp[i][j] = dp[i - 1][j - 1] + 1;
+				} else {
+					dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);
+				}
+			}
+		}
+
+		return dp;
+	}
+
+	// Character-level diff for highlighting specific changes within lines
+	function findCharacterDiff(oldLine: string, newLine: string): { oldHighlights: Array<{ start: number; end: number }>, newHighlights: Array<{ start: number; end: number }> } {
+		// Use patience diff algorithm for better results
+		const oldHighlights: Array<{ start: number; end: number }> = [];
+		const newHighlights: Array<{ start: number; end: number }> = [];
+
+		// Find common prefix
+		let prefixLen = 0;
+		const minLen = Math.min(oldLine.length, newLine.length);
+		while (prefixLen < minLen && oldLine[prefixLen] === newLine[prefixLen]) {
+			prefixLen++;
+		}
+
+		// Find common suffix
+		let suffixLen = 0;
+		const maxSuffixLen = minLen - prefixLen;
+		while (suffixLen < maxSuffixLen &&
+			   oldLine[oldLine.length - 1 - suffixLen] === newLine[newLine.length - 1 - suffixLen]) {
+			suffixLen++;
+		}
+
+		// Extract the differing middle parts
+		const oldMiddleStart = prefixLen;
+		const oldMiddleEnd = oldLine.length - suffixLen;
+		const newMiddleStart = prefixLen;
+		const newMiddleEnd = newLine.length - suffixLen;
+
+		if (oldMiddleStart < oldMiddleEnd || newMiddleStart < newMiddleEnd) {
+			// There are differences
+			const oldMiddle = oldLine.substring(oldMiddleStart, oldMiddleEnd);
+			const newMiddle = newLine.substring(newMiddleStart, newMiddleEnd);
+
+			// If the middle parts are completely different or one is empty, highlight the whole middle
+			if (oldMiddle.length === 0 || newMiddle.length === 0 ||
+				!hasCommonSubstring(oldMiddle, newMiddle)) {
+				if (oldMiddle.length > 0) {
+					oldHighlights.push({ start: oldMiddleStart, end: oldMiddleEnd });
+				}
+				if (newMiddle.length > 0) {
+					newHighlights.push({ start: newMiddleStart, end: newMiddleEnd });
+				}
+			} else {
+				// Find fine-grained differences using recursive approach
+				const middleDiff = findFineDiff(oldMiddle, newMiddle);
+
+				// Adjust positions relative to full string
+				for (const range of middleDiff.oldRanges) {
+					oldHighlights.push({
+						start: oldMiddleStart + range.start,
+						end: oldMiddleStart + range.end
+					});
+				}
+				for (const range of middleDiff.newRanges) {
+					newHighlights.push({
+						start: newMiddleStart + range.start,
+						end: newMiddleStart + range.end
+					});
+				}
+			}
+		}
+
+		return { oldHighlights, newHighlights };
+	}
+
+	// Helper function to check if strings have common substrings
+	function hasCommonSubstring(str1: string, str2: string, minLength: number = 3): boolean {
+		if (str1.length < minLength || str2.length < minLength) return false;
+
+		for (let i = 0; i <= str1.length - minLength; i++) {
+			const substr = str1.substring(i, i + minLength);
+			if (str2.includes(substr)) return true;
+		}
+		return false;
+	}
+
+	// Fine-grained diff for the middle differing part
+	function findFineDiff(oldStr: string, newStr: string): {
+		oldRanges: Array<{ start: number; end: number }>,
+		newRanges: Array<{ start: number; end: number }>
+	} {
+		const oldRanges: Array<{ start: number; end: number }> = [];
+		const newRanges: Array<{ start: number; end: number }> = [];
+
+		// Use word-based chunking for better diff
+		const oldChunks = splitIntoChunks(oldStr);
+		const newChunks = splitIntoChunks(newStr);
+
+		// Find LCS of chunks
+		const dp = findLCS(oldChunks.map(c => c.text), newChunks.map(c => c.text));
+
+		let i = oldChunks.length;
+		let j = newChunks.length;
+
+		// Backtrack to find differences
+		while (i > 0 || j > 0) {
+			if (i > 0 && j > 0 && oldChunks[i - 1].text === newChunks[j - 1].text) {
+				// Chunks match
+				i--;
+				j--;
+			} else if (j === 0 || (i > 0 && dp[i][j] === dp[i - 1][j])) {
+				// Chunk deleted from old
+				const chunk = oldChunks[i - 1];
+				oldRanges.unshift({ start: chunk.start, end: chunk.end });
+				i--;
+			} else {
+				// Chunk added to new
+				const chunk = newChunks[j - 1];
+				newRanges.unshift({ start: chunk.start, end: chunk.end });
+				j--;
+			}
+		}
+
+		// Merge adjacent ranges
+		return {
+			oldRanges: mergeRanges(oldRanges),
+			newRanges: mergeRanges(newRanges)
+		};
+	}
+
+	// Split string into chunks (words and delimiters)
+	function splitIntoChunks(str: string): Array<{ text: string; start: number; end: number }> {
+		const chunks: Array<{ text: string; start: number; end: number }> = [];
+		const regex = /(\w+|[^\w]+)/g;
+		let match;
+
+		while ((match = regex.exec(str)) !== null) {
+			chunks.push({
+				text: match[0],
+				start: match.index,
+				end: match.index + match[0].length
+			});
+		}
+
+		return chunks;
+	}
+
+	// Merge adjacent or overlapping ranges
+	function mergeRanges(ranges: Array<{ start: number; end: number }>): Array<{ start: number; end: number }> {
+		if (ranges.length === 0) return [];
+
+		ranges.sort((a, b) => a.start - b.start);
+		const merged: Array<{ start: number; end: number }> = [];
+		let current = ranges[0];
+
+		for (let i = 1; i < ranges.length; i++) {
+			const next = ranges[i];
+			if (next.start <= current.end) {
+				// Merge overlapping or adjacent regions
+				current = { start: current.start, end: Math.max(current.end, next.end) };
+			} else {
+				merged.push(current);
+				current = next;
+			}
+		}
+		merged.push(current);
+
+		return merged;
+	}
+
+	function computeDiff(oldStr: string, newStr: string): GroupedDiff[] {
+		const oldLines = oldStr.split('\n');
+		const newLines = newStr.split('\n');
+
+		// Remove common indentation from both old and new strings
+		const { lines: cleanOldLines } = removeCommonIndentationFromLines(oldLines);
+		const { lines: cleanNewLines } = removeCommonIndentationFromLines(newLines);
+
+		// Compute line-level diff using LCS
+		const dp = findLCS(cleanOldLines, cleanNewLines);
+
+		const diffLines: DiffLine[] = [];
+		let i = cleanOldLines.length;
+		let j = cleanNewLines.length;
+
+		// Backtrack to generate diff
+		while (i > 0 || j > 0) {
+			if (i > 0 && j > 0 && cleanOldLines[i - 1] === cleanNewLines[j - 1]) {
+				diffLines.unshift({ type: 'unchanged', content: cleanOldLines[i - 1] });
+				i--;
+				j--;
+			} else if (j === 0 || (i > 0 && dp[i][j] === dp[i - 1][j])) {
+				diffLines.unshift({ type: 'removed', content: cleanOldLines[i - 1] });
+				i--;
+			} else {
+				diffLines.unshift({ type: 'added', content: cleanNewLines[j - 1] });
+				j--;
+			}
+		}
+
+		// Group consecutive changes and apply character-level diff
+		const grouped: GroupedDiff[] = [];
+		let current: GroupedDiff | null = null;
+
+		for (const line of diffLines) {
+			if (line.type === 'unchanged') {
+				if (current) {
+					grouped.push(current);
+					current = null;
+				}
+				grouped.push({ type: 'unchanged', lines: [line] });
+			} else {
+				if (!current) {
+					current = { type: 'change', removed: [], added: [] };
+				}
+				if (line.type === 'removed') {
+					current.removed!.push(line);
+				} else {
+					current.added!.push(line);
+				}
+			}
+		}
+
+		if (current) {
+			grouped.push(current);
+		}
+
+		// Apply character-level diff to changed line pairs
+		for (const group of grouped) {
+			if (group.type === 'change' && group.removed && group.added) {
+				const minLen = Math.min(group.removed.length, group.added.length);
+
+				// For paired lines, compute character-level diff
+				for (let idx = 0; idx < minLen; idx++) {
+					const oldLine = group.removed[idx];
+					const newLine = group.added[idx];
+
+					// Only compute character diff if lines are similar enough
+					if (oldLine.content.length > 0 && newLine.content.length > 0) {
+						const similarity = computeSimilarity(oldLine.content, newLine.content);
+						if (similarity > 0.3) { // Lines are at least 30% similar
+							const { oldHighlights, newHighlights } = findCharacterDiff(oldLine.content, newLine.content);
+							if (oldHighlights.length > 0) {
+								oldLine.highlights = oldHighlights;
+							}
+							if (newHighlights.length > 0) {
+								newLine.highlights = newHighlights;
+							}
+						}
+					}
+				}
+			}
+		}
+
+		return grouped;
+	}
+
+	// Compute similarity ratio between two strings
+	function computeSimilarity(str1: string, str2: string): number {
+		const chars1 = str1.split('');
+		const chars2 = str2.split('');
+		const dp = findLCS(chars1, chars2);
+		const lcsLength = dp[chars1.length][chars2.length];
+		const maxLen = Math.max(chars1.length, chars2.length);
+		return maxLen === 0 ? 0 : lcsLength / maxLen;
+	}
+
+	// Render text with highlights
+	function renderLineWithHighlights(line: DiffLine): string {
+		if (!line.highlights || line.highlights.length === 0) {
+			return line.content;
+		}
+
+		let result = '';
+		let lastEnd = 0;
+
+		for (const highlight of line.highlights) {
+			// Add non-highlighted part
+			if (highlight.start > lastEnd) {
+				result += line.content.substring(lastEnd, highlight.start);
+			}
+			// Add highlighted part with special marker
+			result += '{{HIGHLIGHT_START}}' + line.content.substring(highlight.start, highlight.end) + '{{HIGHLIGHT_END}}';
+			lastEnd = highlight.end;
+		}
+
+		// Add any remaining non-highlighted part
+		if (lastEnd < line.content.length) {
+			result += line.content.substring(lastEnd);
+		}
+
+		return result;
+	}
+
+	const diffGroups = computeDiff(oldString, newString);
+	const hasChanges = diffGroups.some(group => group.type === 'change');
+</script>
+
+<div>
+	{#if label}
+		<div class="flex items-center gap-2 mb-2">
+			<Icon name="lucide:git-compare" class="text-violet-500 w-4 h-4" />
+			<span class="text-sm font-medium text-slate-700 dark:text-slate-300">{label}</span>
+		</div>
+	{/if}
+
+	<div class="relative max-h-96 bg-slate-50 dark:bg-slate-950 border border-slate-200/60 dark:border-slate-800/60 rounded-md overflow-auto">
+		{#if hasChanges}
+			<div class="text-xs font-mono leading-5 min-w-fit"><!--
+			-->{#each diffGroups as group}<!--
+				-->{#if group.type === 'unchanged'}<!--
+					-->{#each group.lines || [] as line}<!--
+				--><div class="relative flex"><!--
+					--><div class="sticky left-0 w-1 bg-slate-50 dark:bg-slate-950"></div><!--
+					--><pre class="flex-1 px-3 text-slate-600 dark:text-slate-400 whitespace-pre">{line.content}</pre><!--
+				--></div><!--
+					-->{/each}<!--
+				-->{:else if group.type === 'change'}<!--
+					-->{#each group.removed || [] as line}<!--
+				--><div class="relative flex bg-red-100 dark:bg-red-500/10"><!--
+					--><div class="sticky left-0 w-1 bg-red-500 dark:bg-red-500/80"></div><!--
+					--><pre class="flex-1 px-3 whitespace-pre"><!--
+						-->{#if line.highlights && line.highlights.length > 0}<!--
+							-->{@const rendered = line.content}<!--
+							-->{#each line.highlights as highlight, idx}<!--
+								-->{#if idx === 0 && highlight.start > 0}<!--
+									--><span class="text-red-700 dark:text-red-300">{rendered.substring(0, highlight.start)}</span><!--
+								-->{/if}<!--
+								--><span class="bg-red-300 dark:bg-red-400/30 text-red-900 dark:text-red-100 px-0.5">{rendered.substring(highlight.start, highlight.end)}</span><!--
+								-->{#if idx < line.highlights.length - 1}<!--
+									--><span class="text-red-700 dark:text-red-300">{rendered.substring(highlight.end, line.highlights[idx + 1].start)}</span><!--
+								-->{:else if highlight.end < rendered.length}<!--
+									--><span class="text-red-700 dark:text-red-300">{rendered.substring(highlight.end)}</span><!--
+								-->{/if}<!--
+							-->{/each}<!--
+						-->{:else}<!--
+							--><span class="text-red-700 dark:text-red-300">{line.content}</span><!--
+						-->{/if}<!--
+					--></pre><!--
+				--></div><!--
+					-->{/each}<!--
+					-->{#each group.added || [] as line}<!--
+				--><div class="relative flex bg-green-100 dark:bg-green-500/10"><!--
+					--><div class="sticky left-0 w-1 bg-green-500 dark:bg-green-500/80"></div><!--
+					--><pre class="flex-1 px-3 whitespace-pre"><!--
+						-->{#if line.highlights && line.highlights.length > 0}<!--
+							-->{@const rendered = line.content}<!--
+							-->{#each line.highlights as highlight, idx}<!--
+								-->{#if idx === 0 && highlight.start > 0}<!--
+									--><span class="text-green-700 dark:text-green-300">{rendered.substring(0, highlight.start)}</span><!--
+								-->{/if}<!--
+								--><span class="bg-green-300 dark:bg-green-400/30 text-green-900 dark:text-green-100 px-0.5">{rendered.substring(highlight.start, highlight.end)}</span><!--
+								-->{#if idx < line.highlights.length - 1}<!--
+									--><span class="text-green-700 dark:text-green-300">{rendered.substring(highlight.end, line.highlights[idx + 1].start)}</span><!--
+								-->{:else if highlight.end < rendered.length}<!--
+									--><span class="text-green-700 dark:text-green-300">{rendered.substring(highlight.end)}</span><!--
+								-->{/if}<!--
+							-->{/each}<!--
+						-->{:else}<!--
+							--><span class="text-green-700 dark:text-green-300">{line.content}</span><!--
+						-->{/if}<!--
+					--></pre><!--
+				--></div>
+<!--
+					-->{/each}<!--
+				-->{/if}<!--
+			-->{/each}<!--
+			--></div>
+		{:else}
+			<div class="text-sm text-slate-600 dark:text-slate-400">
+				No changes detected
+			</div>
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import type { IconName } from '$shared/types/ui/icons';
+	import { getFileIcon } from '$frontend/lib/utils/file-icon-mappings';
+	import { formatPath } from '../../shared/utils';
+
+	interface Props {
+		filePath: string;
+		fileName?: string;
+		iconColor?: string;
+		badges?: Array<{ text: string; color: string }>;
+		box?: boolean;
+	}
+
+	const { filePath, fileName, iconColor, badges = [], box = true }: Props = $props();
+
+	const displayFileName = fileName || filePath.split(/[/\\]/).pop() || filePath;
+</script>
+
+<div class={box ? "bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3" : ""}>
+	<div class="flex items-center gap-3 mb-1">
+		<Icon 
+			name={getFileIcon(displayFileName)} 
+			class="w-6 h-6 {iconColor || ''}" 
+		/>
+		<div class="flex-1 min-w-0">
+			<h3 class="font-medium text-slate-900 dark:text-slate-100 truncate">
+				{displayFileName}
+			</h3>
+			<p class="text-xs text-slate-600 dark:text-slate-400 truncate" title={filePath}>
+				{formatPath(filePath)}
+			</p>
+		</div>
+	</div>
+	
+	{#if badges.length > 0}
+		<div class="flex gap-2 mt-3">
+			{#each badges as badge}
+				<div class="text-xs px-2 py-1 rounded {badge.color}">
+					{badge.text}
+				</div>
+			{/each}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import type { IconName } from '$shared/types/ui/icons';
+
+	interface Props {
+		icon: IconName;
+		text: string;
+		iconColor?: string;
+		textColor?: string;
+		title?: string;
+	}
+
+	const { icon, text, iconColor = 'text-slate-500', textColor = 'text-slate-600 dark:text-slate-400', title="" }: Props = $props();
+</script>
+
+<div class="flex items-center gap-1.5" {title}>
+	<Icon name={icon} class="{iconColor} w-3.5 h-3.5" />
+	<span class="text-xs {textColor}">{text}</span>
+</div>

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+	interface StatItem {
+		label: string;
+		value: string | number;
+		color: string;
+	}
+
+	interface Props {
+		stats: StatItem[];
+		columns?: number;
+	}
+
+	const { stats, columns = 3 }: Props = $props();
+
+	const gridClass = columns === 2 ? 'grid-cols-2' : columns === 4 ? 'grid-cols-4' : 'grid-cols-3';
+</script>
+
+<div class="grid {gridClass} gap-4 text-center text-sm">
+	{#each stats as stat}
+		<div>
+			<div class="text-lg font-bold {stat.color}">
+				{stat.value}
+			</div>
+			<div class="text-slate-500 dark:text-slate-400 text-xs">{stat.label}</div>
+		</div>
+	{/each}
+</div>

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

@@ -0,0 +1,54 @@
+<script lang="ts">
+	interface Props {
+		command: string;
+		description?: string;
+		timeout?: number;
+	}
+
+	const { command, description, timeout }: Props = $props();
+
+	// Parse command parts for better display
+	function parseCommandParts(cmd: string) {
+		const parts = cmd.split(' ');
+		const mainCommand = parts[0];
+		const args = parts.slice(1);
+		return { mainCommand, args };
+	}
+
+	const { mainCommand, args } = parseCommandParts(command);
+</script>
+
+<!-- Description (if provided) -->
+{#if description}
+	<p class="mb-2 text-slate-700 dark:text-slate-300">
+		{description}
+	</p>
+{/if}
+
+<!-- Command Display -->
+<div class="bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3">
+	<div class="flex items-center justify-between gap-2 mb-2">
+		<div class="flex items-center gap-2">
+			<div class="w-2 h-2 bg-green-500 rounded-full"></div>
+			<span class="text-xs font-medium text-slate-700 dark:text-slate-300">Command:</span>
+		</div>
+		{#if timeout}
+			<div class="inline-block ml-auto text-xs bg-orange-100 dark:bg-orange-900 text-orange-700 dark:text-orange-300 px-2 py-0.5 rounded">
+				Timeout: {timeout}ms
+			</div>
+		{/if}
+	</div>
+	
+	<!-- Terminal-style command display -->
+	<div class="bg-slate-50 dark:bg-slate-950 border border-slate-200/60 dark:border-slate-800/60 rounded-md p-2.5 font-mono text-sm">
+		<div class="flex items-start gap-2">
+			<span class="text-green-600 dark:text-green-400 select-none">$</span>
+			<div class="flex-1 text-slate-900 dark:text-slate-200 break-all">
+				<span class="text-violet-600 dark:text-violet-300 font-medium">{mainCommand}</span>
+				{#if args.length > 0}
+					<span class="text-slate-700 dark:text-slate-300"> {args.join(' ')}</span>
+				{/if}
+			</div>
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,7 @@
+// Shared UI components for tool displays
+export { default as FileHeader } from './FileHeader.svelte';
+export { default as CodeBlock } from './CodeBlock.svelte';
+export { default as DiffBlock } from './DiffBlock.svelte';
+export { default as StatsBadges } from './StatsBadges.svelte';
+export { default as InfoLine } from './InfoLine.svelte';
+export { default as TerminalCommand } from './TerminalCommand.svelte';