Simple web search tool renderer

Author: jahooma

cli/src/components/tools/registry.ts

@@ -8,6 +8,7 @@ import { ReadFilesComponent } from './read-files'
 import { ReadSubtreeComponent } from './read-subtree'
 import { ReadURLComponent } from './read-url'
 import { RenderUIComponent } from './render-ui'
+import { WebSearchComponent } from './web-search'
 import { RunTerminalCommandComponent } from './run-terminal-command'
 import { SkillComponent } from './skill'
 import { StrReplaceComponent } from './str-replace'
@@ -41,6 +42,7 @@ const toolComponentRegistry = new Map<ToolName, ToolComponent>([
   [ReadSubtreeComponent.toolName, ReadSubtreeComponent],
   [ReadURLComponent.toolName, ReadURLComponent],
   [RenderUIComponent.toolName, RenderUIComponent],
+  [WebSearchComponent.toolName, WebSearchComponent],
   [WriteTodosComponent.toolName, WriteTodosComponent],
   [StrReplaceComponent.toolName, StrReplaceComponent],
   [SuggestFollowupsComponent.toolName, SuggestFollowupsComponent],

cli/src/components/tools/web-search.tsx

@@ -0,0 +1,33 @@
+import { SimpleToolCallItem } from './tool-call-item'
+import { defineToolComponent } from './types'
+
+import type { ChatTheme } from '../../types/theme-system'
+import type { ToolRenderConfig } from './types'
+
+/**
+ * UI component for web_search tool.
+ * Displays the search query in a compact format.
+ */
+export const WebSearchComponent = defineToolComponent({
+  toolName: 'web_search',
+
+  render(toolBlock, theme): ToolRenderConfig {
+    const input = toolBlock.input as { query?: string } | undefined
+
+    const query = typeof input?.query === 'string' ? input.query.trim() : ''
+
+    if (!query) {
+      return { content: null }
+    }
+
+    return {
+      content: (
+        <SimpleToolCallItem
+          name="Web Search"
+          description={query}
+          descriptionColor={theme.muted}
+        />
+      ),
+    }
+  },
+})