@myrialabs/clopen 0.0.1

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

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import type { EditToolInput } from '$shared/types/messaging';
+	import { FileHeader, DiffBlock } from './components';
+	import Icon from '$frontend/lib/components/common/Icon.svelte';
+
+	const { toolInput }: { toolInput: EditToolInput } = $props();
+
+	const filePath = toolInput.input.file_path || '';
+	const fileName = filePath.split(/[/\\]/).pop() || filePath || 'unknown';
+	const oldString = toolInput.input.old_string || '';
+	const newString = toolInput.input.new_string || '';
+	const replaceAll = toolInput.input.replace_all || false;
+
+	const badges = replaceAll ? [{ text: 'Replace All', color: 'bg-amber-100 dark:bg-amber-900 text-amber-700 dark:text-amber-300' }] : [];
+</script>
+
+<FileHeader
+	{filePath}
+	{fileName}
+	iconColor="text-emerald-600 dark:text-emerald-400"
+	{badges}
+/>
+
+<!-- Replace All Info -->
+<!-- {#if replaceAll}
+	<div class="mt-3 flex items-start gap-2 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800 rounded-md p-3">
+		<Icon name="lucide:info" class="w-4 h-4 text-amber-600 dark:text-amber-400 flex-shrink-0 mt-0.5" />
+		<p class="text-xs text-amber-700 dark:text-amber-300">
+			This edit will replace <strong>all occurrences</strong> of the old string in the file. The actual file changes may affect multiple lines beyond what is shown in the diff preview below.
+		</p>
+	</div>
+{/if} -->
+
+<!-- Code Changes -->
+<div class="mt-4">
+	<DiffBlock {oldString} {newString} label="Edit" />
+</div>
+
+<!-- Tool Result -->
+<!-- {#if toolInput.$result?.content}
+	<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/ExitPlanModeTool.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { ExitPlanModeToolInput } from '$shared/types/messaging';
+	import { InfoLine, CodeBlock } from './components';
+	import TextMessage from '../formatters/TextMessage.svelte';
+
+	const { toolInput }: { toolInput: ExitPlanModeToolInput } = $props();
+
+	const plan = (toolInput.input as any).plan as string || '';
+</script>
+
+<div class="bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3">
+	<!-- Plan Info -->
+	<div class="flex gap-3 mb-2">
+		<InfoLine icon="lucide:map" text="Exiting plan mode with proposed plan" />
+	</div>
+	
+	<!-- Plan Content -->
+	<div class="border-t border-slate-200 dark:border-slate-700 pt-3">
+		<CodeBlock code={plan} type="neutral" label="Plan" />
+	</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/GlobTool.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import type { GlobToolInput } from '$shared/types/messaging';
+	import { InfoLine } from './components';
+	import { formatPath } from '../shared/utils';
+	import CodeBlock from './components/CodeBlock.svelte';
+
+	const { toolInput }: { toolInput: GlobToolInput } = $props();
+
+	const pattern = toolInput.input.pattern || '';
+	const searchPath = toolInput.input.path || 'current directory';
+
+	// Parse the pattern to get a readable description
+	function getPatternDescription(pattern: string): string {
+		if (pattern.includes('**/*.')) {
+			const ext = pattern.split('**/*.')[1];
+			return `all .${ext} files`;
+		} else if (pattern.includes('**/')) {
+			const rest = pattern.split('**/')[1];
+			return `all ${rest} in subdirectories`;
+		} else if (pattern.includes('*.')) {
+			const ext = pattern.split('*.')[1];
+			return `.${ext} files`;
+		}
+		return pattern;
+	}
+
+	const patternDescription = getPatternDescription(pattern);
+	const formattedPath = formatPath(searchPath);
+</script>
+
+<div class="bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3">
+	<div class="mb-2">
+		<h3 class="font-medium text-slate-900 dark:text-slate-100">
+			Searching for {patternDescription}
+		</h3>
+		<p class="text-xs text-slate-600 dark:text-slate-400 truncate" title={searchPath}>
+			in {formattedPath}
+		</p>
+	</div>
+
+	<div class="flex gap-2 border-t border-slate-200/60 dark:border-slate-700/60 pt-2">
+		<InfoLine icon="lucide:file-search-2" text={pattern} />
+	</div>
+</div>
+
+<!-- Tool Result -->
+{#if toolInput.$result?.content}
+	<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={toolInput.$result.content} type="neutral" label="Output" />
+	</div>
+{/if}

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

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import type { GrepToolInput } from '$shared/types/messaging';
+	import type { IconName } from '$shared/types/ui';
+	import { InfoLine } from './components';
+	import { formatPath, truncateText } from '../shared/utils';
+	import CodeBlock from './components/CodeBlock.svelte';
+
+	const { toolInput }: { toolInput: GrepToolInput } = $props();
+
+	const pattern = toolInput.input.pattern || '';
+	const searchPath = toolInput.input.path || 'current directory';
+
+	// Get active search parameters for display
+	function getActiveParameters() {
+		const params: { label: string; value: string; icon: IconName }[] = [];
+
+		params.push({ label: 'Output', value: toolInput.input.output_mode || 'files_with_matches', icon: 'lucide:filter' });
+
+		if (toolInput.input.glob) {
+			params.push({ label: 'Glob', value: toolInput.input.glob, icon: 'lucide:folder-search' });
+		}
+
+		if (toolInput.input.type) {
+			params.push({ label: 'File type', value: toolInput.input.type, icon: 'lucide:file-type' });
+		}
+
+		if (toolInput.input['-i']) {
+			params.push({ label: 'Case insensitive', value: '', icon: 'lucide:case-sensitive' });
+		}
+
+		if (toolInput.input['-n']) {
+			params.push({ label: 'Line numbers', value: '', icon: 'lucide:hash' });
+		}
+
+		if (toolInput.input['-A']) {
+			params.push({ label: 'After context', value: `${toolInput.input['-A']} lines`, icon: 'lucide:arrow-down' });
+		}
+
+		if (toolInput.input['-B']) {
+			params.push({ label: 'Before context', value: `${toolInput.input['-B']} lines`, icon: 'lucide:arrow-up' });
+		}
+
+		if (toolInput.input['-C']) {
+			params.push({ label: 'Context', value: `${toolInput.input['-C']} lines`, icon: 'lucide:arrow-up-down' });
+		}
+
+		if (toolInput.input.head_limit) {
+			params.push({ label: 'Limit', value: `${toolInput.input.head_limit} results`, icon: 'lucide:list-end' });
+		}
+
+		if (toolInput.input.multiline) {
+			params.push({ label: 'Multiline', value: '', icon: 'lucide:text' });
+		}
+
+		return params;
+	}
+
+	const activeParameters = getActiveParameters();
+
+	const formattedPattern = truncateText(pattern, 40);
+	const formattedPath = formatPath(searchPath);
+</script>
+
+<div class="bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3">
+	<div class="mb-2">
+		<h3 class="font-medium text-slate-900 dark:text-slate-100 truncate" title={pattern}>
+			Searching for: <span class="font-mono">{formattedPattern}</span>
+		</h3>
+		<p class="text-xs text-slate-600 dark:text-slate-400 truncate" title={searchPath}>
+			in {formattedPath}
+		</p>
+	</div>
+
+	{#if activeParameters.length > 0}
+		<div class="border-t border-slate-200 dark:border-slate-700 pt-3">
+			<div class="flex gap-x-3 gap-y-2 flex-wrap">
+				{#each activeParameters as param}
+					<InfoLine icon={param.icon} text={param.value == '' ? param.label : param.value} title={param.value == '' ? param.label : `${param.label}: ${param.value}`} />
+				{/each}
+			</div>
+		</div>
+	{/if}
+</div>
+
+<!-- Tool Result -->
+{#if toolInput.$result?.content}
+	<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={toolInput.$result.content} type="neutral" label="Output" />
+	</div>
+{/if}

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

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { KillShellToolInput } from '$shared/types/messaging';
+	import { InfoLine } from './components';
+	import TextMessage from '../formatters/TextMessage.svelte';
+
+	const { toolInput }: { toolInput: KillShellToolInput } = $props();
+	
+	const shellId = toolInput.input.shell_id;
+</script>
+
+<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 gap-3">
+		<InfoLine icon="lucide:circle-x" text="Terminating shell process: {shellId}" />
+	</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/ListMcpResourcesTool.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { ListMcpResourcesToolInput } from '$shared/types/messaging';
+	import { InfoLine } from './components';
+	import TextMessage from '../formatters/TextMessage.svelte';
+
+	const { toolInput }: { toolInput: ListMcpResourcesToolInput } = $props();
+	
+	const server = toolInput.input.server;
+</script>
+
+<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 gap-3">
+		<InfoLine icon="lucide:server" text="Listing MCP resources" />
+		{#if server}
+			<InfoLine icon="lucide:filter" text="Server: {server}" />
+		{:else}
+			<InfoLine icon="lucide:globe" text="All servers" />
+		{/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/NotebookEditTool.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import type { NotebookEditToolInput } from '$shared/types/messaging';
+	import { FileHeader, InfoLine, CodeBlock } from './components';
+	import TextMessage from '../formatters/TextMessage.svelte';
+
+	const { toolInput }: { toolInput: NotebookEditToolInput } = $props();
+	
+	const notebookPath = toolInput.input.notebook_path;
+	const fileName = notebookPath.split(/[/\\]/).pop() || notebookPath;
+	const cellId = toolInput.input.cell_id;
+	const cellType = toolInput.input.cell_type || 'code';
+	const editMode = toolInput.input.edit_mode || 'replace';
+	const newSource = toolInput.input.new_source;
+</script>
+
+<FileHeader filePath={notebookPath} fileName={fileName} />
+
+<!-- Edit Details -->
+<div class="flex gap-2 border-t border-slate-200/60 dark:border-slate-700/60 pt-2 mt-3">
+	<InfoLine icon="lucide:notebook" text="{editMode} {cellType} cell" />
+	{#if cellId}
+		<InfoLine icon="lucide:hash" text="Cell ID: {cellId}" />
+	{/if}
+</div>
+
+<!-- New Source -->
+<CodeBlock code={newSource} type={editMode === 'insert' ? 'add' : editMode === 'delete' ? 'remove' : 'neutral'} label="{editMode === 'insert' ? 'Adding' : editMode === 'delete' ? 'Deleting' : 'Updating'} cell content" />
+
+<!-- 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/ReadMcpResourceTool.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { ReadMcpResourceToolInput } from '$shared/types/messaging';
+	import { InfoLine, CodeBlock } from './components';
+	import TextMessage from '../formatters/TextMessage.svelte';
+
+	const { toolInput }: { toolInput: ReadMcpResourceToolInput } = $props();
+	
+	const server = toolInput.input.server;
+	const uri = toolInput.input.uri;
+</script>
+
+<div class="bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3">
+	<!-- Resource Info -->
+	<div class="flex gap-3 mb-2">
+		<InfoLine icon="lucide:file-text" text="Reading MCP resource" />
+		<InfoLine icon="lucide:server" text="Server: {server}" />
+	</div>
+	
+	<!-- URI -->
+	<div class="border-t border-slate-200 dark:border-slate-700 pt-3">
+		<CodeBlock code={uri} type="neutral" label="Resource URI" />
+	</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/ReadTool.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import type { ReadToolInput } from '$shared/types/messaging';
+	import { FileHeader, InfoLine } from './components';
+	import TextMessage from '../formatters/TextMessage.svelte';
+
+	const { toolInput }: { toolInput: ReadToolInput } = $props();
+	
+	const filePath = toolInput.input.file_path || '';
+	const fileName = filePath.split(/[/\\]/).pop() || filePath || 'unknown';
+	const hasLimit = toolInput.input.limit !== undefined;
+	const hasOffset = toolInput.input.offset !== undefined;
+</script>
+
+<div class="bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3">
+	<FileHeader {filePath} {fileName} box={false} />
+
+	<!-- Reading Options -->
+	<div class="flex gap-2 border-t border-slate-200/60 dark:border-slate-700/60 pt-2 mt-2">
+		{#if hasLimit || hasOffset}
+			{#if hasOffset}
+				<InfoLine icon="lucide:skip-forward" text="Starting from line {toolInput.input.offset}" />
+			{/if}
+			{#if hasLimit}
+				<InfoLine icon="lucide:list" text="Reading {toolInput.input.limit} lines" />
+			{/if}
+		{:else}
+			<InfoLine icon="lucide:file-scan" text="Reading entire file" />
+		{/if}
+	</div>
+</div>
+
+<!-- Tool Result -->
+<!-- {#if toolInput.$result?.content}
+	<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/TaskTool.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import type { TaskToolInput } from '$shared/types/messaging';
+	import { InfoLine, CodeBlock } from './components';
+	import TextMessage from '../formatters/TextMessage.svelte';
+
+	const { toolInput }: { toolInput: TaskToolInput } = $props();
+
+	const showFullPrompt = $state(false);
+
+	// Format description for display
+	function formatDescription(desc: string): string {
+		if (desc.length > 50) {
+			return desc.substring(0, 47) + '...';
+		}
+		return desc;
+	}
+
+	const formattedDesc = formatDescription(toolInput.input.description || '');
+</script>
+
+<div class="bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3">
+	<div class="mb-2">
+		<h3 class="font-medium text-slate-900 dark:text-slate-100">
+			{formattedDesc}
+		</h3>
+		<p class="text-xs text-slate-600 dark:text-slate-400" title={toolInput.input.subagent_type}>
+			Using {toolInput.input.subagent_type} agent
+		</p>
+	</div>
+
+	<!-- <div class="border-t border-slate-200 dark:border-slate-700 pt-3">
+		<div class="flex gap-3">
+			<InfoLine icon="lucide:file-text" text="Full task prompt provided" />
+			<button
+				onclick={() => showFullPrompt = !showFullPrompt}
+				class="text-xs text-violet-600 dark:text-violet-400 hover:underline"
+			>
+				{showFullPrompt ? 'Hide' : 'Show'} details
+			</button>
+		</div>
+
+		{#if showFullPrompt}
+			<div class="mt-2 p-3 bg-slate-50 dark:bg-slate-800 rounded-md border border-slate-200 dark:border-slate-700">
+				<pre class="text-xs text-slate-700 dark:text-slate-300 whitespace-pre-wrap">{toolInput.input.prompt}</pre>
+			</div>
+		{/if}
+	</div> -->
+</div>
+
+<TextMessage content={toolInput.input.prompt} />
+
+<!-- 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>
+	<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={toolInput.input.prompt} type="neutral" label="Output" />
+	</div>
+{/if} -->

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

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import type { TodoWriteToolInput } from '$shared/types/messaging';
+	import type { IconName } from '$shared/types/ui/icons';
+
+	const { toolInput }: { toolInput: TodoWriteToolInput } = $props();
+
+	const todos = toolInput.input.todos;
+	const totalTodos = todos.length;
+	const completedTodos = todos.filter((t) => t.status === 'completed').length;
+	const percentage = totalTodos > 0 ? Math.round((completedTodos / totalTodos) * 100) : 0;
+
+	// Helper functions for todo items
+	function getStatusIcon(status: string): IconName {
+		switch (status) {
+			case 'completed': return 'lucide:circle-check';
+			case 'in_progress': return 'lucide:clock';
+			case 'pending': return 'lucide:circle';
+			default: return 'lucide:circle';
+		}
+	}
+
+	function getStatusColor(status: string): string {
+		switch (status) {
+			case 'completed': return 'text-green-600 dark:text-green-400';
+			case 'in_progress': return 'text-violet-600 dark:text-violet-400';
+			case 'pending': return 'text-slate-500 dark:text-slate-400';
+			default: return 'text-slate-500 dark:text-slate-400';
+		}
+	}
+
+</script>
+
+<!-- Header -->
+<div class="flex items-center gap-2 mb-2">
+	<Icon name="lucide:list-todo" class="text-violet-600 dark:text-violet-400 w-4 h-4" />
+	<span class="font-medium text-sm text-violet-700 dark:text-violet-300">Task Planning</span>
+	<div class="ml-auto flex items-center gap-4 text-sm">
+		<div class="text-xs text-slate-600 dark:text-slate-400">
+			Progress: {percentage}%
+		</div>
+	</div>
+</div>
+
+<!-- Progress Bar -->
+{#if totalTodos > 0}
+	<div class="mb-4">
+		<div class="w-full bg-slate-200 dark:bg-slate-700 rounded-full h-1.5">
+			<div
+				class="bg-violet-600 dark:bg-violet-400 h-1.5 rounded-full transition-all duration-300"
+				style="width: {percentage}%"
+			></div>
+		</div>
+	</div>
+{/if}
+
+<!-- Todo List -->
+<div class="space-y-2">
+	{#each todos as todo}
+		<div class="flex items-start gap-3 p-3 bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700">
+			<!-- Status Icon -->
+			<Icon
+				name={getStatusIcon(todo.status)}
+				class="{getStatusColor(todo.status)} w-4 h-4 mt-0.5 flex-shrink-0"
+			/>
+
+			<!-- Content -->
+			<div class="flex-1 min-w-0">
+				<p class="text-sm text-slate-900 dark:text-slate-100 {todo.status === 'completed' ? 'line-through opacity-75' : ''}">
+					{todo.status === 'in_progress' && todo.activeForm ? todo.activeForm : todo.content}
+				</p>
+			</div>
+		</div>
+	{/each}
+</div>

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

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { WebFetchToolInput } from '$shared/types/messaging';
+	import TextMessage from '../formatters/TextMessage.svelte';
+
+	const { toolInput }: { toolInput: WebFetchToolInput } = $props();
+</script>
+
+<div class="bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3">
+	<div class="mb-2">
+		<h3 class="font-medium text-slate-900 dark:text-slate-100">
+			Web Fetch
+		</h3>
+		<p class="text-sm text-slate-700 dark:text-slate-300 mt-1">
+			Fetching: <span class="font-mono text-xs bg-slate-100 dark:bg-slate-800 px-1 rounded">{toolInput.input.url || ''}</span>
+		</p>
+	</div>
+
+	<div class="border-t border-slate-200 dark:border-slate-700 pt-3">
+		<p class="text-xs font-medium text-slate-700 dark:text-slate-300 mb-1">Processing prompt:</p>
+		<p class="text-xs text-slate-600 dark:text-slate-400 font-mono leading-relaxed">
+			{toolInput.input.prompt || ''}
+		</p>
+	</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/WebSearchTool.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import type { WebSearchToolInput } from '$shared/types/messaging';
+	import { InfoLine } from './components';
+	import TextMessage from '../formatters/TextMessage.svelte';
+
+	const { toolInput }: { toolInput: WebSearchToolInput } = $props();
+
+	let showDetails = $state(false);
+
+	// Format query for display
+	function formatQuery(query: string): string {
+		if (query.length > 60) {
+			return query.substring(0, 57) + '...';
+		}
+		return query;
+	}
+
+	const formattedQuery = formatQuery(toolInput.input.query || '');
+</script>
+
+<div class="bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3">
+	<div class="mb-2">
+		<h3 class="font-medium text-slate-900 dark:text-slate-100">
+			Web Search
+		</h3>
+		<p class="text-sm text-slate-700 dark:text-slate-300 mt-1">
+			{formattedQuery}
+		</p>
+	</div>
+
+	<div class="border-t border-slate-200 dark:border-slate-700 pt-3">
+		<div class="flex gap-3 items-center">
+			<InfoLine icon="lucide:globe" text="Searching the web" />
+			{#if toolInput.input.allowed_domains?.length || toolInput.input.blocked_domains?.length}
+				<button
+					onclick={() => showDetails = !showDetails}
+					class="text-xs text-violet-600 dark:text-violet-400 hover:underline"
+				>
+					{showDetails ? 'Hide' : 'Show'} filters
+				</button>
+			{/if}
+		</div>
+
+		{#if showDetails && (toolInput.input.allowed_domains?.length || toolInput.input.blocked_domains?.length)}
+			<div class="mt-2 p-3 bg-slate-50 dark:bg-slate-800 rounded-md border border-slate-200 dark:border-slate-700">
+				{#if toolInput.input.allowed_domains?.length}
+					<div class="mb-2">
+						<p class="text-xs font-medium text-slate-700 dark:text-slate-300 mb-1">Allowed domains:</p>
+						<div class="flex flex-wrap gap-1">
+							{#each toolInput.input.allowed_domains as domain}
+								<span class="inline-block px-2 py-1 text-xs bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded">
+									{domain}
+								</span>
+							{/each}
+						</div>
+					</div>
+				{/if}
+				{#if toolInput.input.blocked_domains?.length}
+					<div>
+						<p class="text-xs font-medium text-slate-700 dark:text-slate-300 mb-1">Blocked domains:</p>
+						<div class="flex flex-wrap gap-1">
+							{#each toolInput.input.blocked_domains as domain}
+								<span class="inline-block px-2 py-1 text-xs bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 rounded">
+									{domain}
+								</span>
+							{/each}
+						</div>
+					</div>
+				{/if}
+			</div>
+		{/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} -->