ui: Refactor Built-In Tools naming (Server/Browser) (#27271)

* server: rename built-in tools to server tools

* ui: rename built-in tools to server/browser tools

tools/ui/src/lib/constants/browser-info.ts

@@ -2,7 +2,9 @@ import { CLI_FLAGS } from './cli-flags.constants';
 import { BuiltInTool, JsonSchemaType, ToolCallType } from '$lib/enums';
 import type { OpenAIToolDefinition } from '$lib/types';
 
-export const BROWSER_INFO_TOOL_NAME = BuiltInTool.GET_INFO;
+// get_info is served by the server, but the browser falls back to this
+// implementation when the server does not provide it - same wire name.
+export const BROWSER_INFO_TOOL_NAME = BuiltInTool.SERVER_GET_INFO;
 
 /** UA token to OS name, first match wins - Android and iOS UAs also carry the Linux / Mac OS X tokens */
 export const BROWSER_INFO_OS_UA_PATTERNS: readonly [RegExp, string][] = [

tools/ui/src/lib/constants/built-in-tools.constants.ts

@@ -1,52 +0,0 @@
-// Registry of built-in and frontend (browser) tools whose renderer
-// shows a recognizable icon and friendly label inline in the chat UI.
-//
-// To add a new built-in tool, add an entry to BUILTIN_TOOL_UI. To give a
-// tool a custom title or body renderer, add a dedicated component under
-// ChatMessageToolCall/ and route it in ChatMessageToolCallBlock.svelte
-// (see ChatMessageToolCallBlockGetDatetime and
-// ChatMessageToolCallBlockSearchResults for prior art).
-
-import {
-	Braces,
-	Clock,
-	Eye,
-	FilePen,
-	FilePlus,
-	FileSearch,
-	FileText,
-	Info,
-	SearchCode,
-	Terminal
-} from '@lucide/svelte';
-import { BuiltInTool, ToolSource } from '$lib/enums';
-import type { BuiltinToolUiEntry } from '$lib/types';
-
-export const BUILTIN_TOOL_UI: Readonly<Record<BuiltInTool, BuiltinToolUiEntry>> = {
-	[BuiltInTool.EDIT_FILE]: { icon: FilePen, label: 'Edit file', source: ToolSource.BUILTIN },
-	[BuiltInTool.EXEC_SHELL_COMMAND]: {
-		icon: Terminal,
-		label: 'Run command',
-		source: ToolSource.BUILTIN
-	},
-	[BuiltInTool.FILE_GLOB_SEARCH]: {
-		icon: FileSearch,
-		label: 'Search files',
-		source: ToolSource.BUILTIN
-	},
-	[BuiltInTool.GET_DATETIME]: { icon: Clock, label: 'Current time', source: ToolSource.FRONTEND },
-	[BuiltInTool.GET_INFO]: { icon: Info, label: 'Runtime info', source: ToolSource.BUILTIN },
-	[BuiltInTool.GREP_SEARCH]: {
-		icon: SearchCode,
-		label: 'Search in files',
-		source: ToolSource.BUILTIN
-	},
-	[BuiltInTool.READ_FILE]: { icon: FileText, label: 'Read file', source: ToolSource.BUILTIN },
-	[BuiltInTool.READ_MEDIA]: { icon: Eye, label: 'Read media', source: ToolSource.FRONTEND },
-	[BuiltInTool.RUN_JAVASCRIPT]: {
-		icon: Braces,
-		label: 'Run JavaScript',
-		source: ToolSource.FRONTEND
-	},
-	[BuiltInTool.WRITE_FILE]: { icon: FilePlus, label: 'Write file', source: ToolSource.BUILTIN }
-} as const;

tools/ui/src/lib/constants/get-datetime.ts

@@ -1,7 +1,7 @@
 import { BuiltInTool, JsonSchemaType, ToolCallType } from '$lib/enums';
 import type { OpenAIToolDefinition } from '$lib/types';
 
-export const GET_DATETIME_TOOL_NAME = BuiltInTool.GET_DATETIME;
+export const GET_DATETIME_TOOL_NAME = BuiltInTool.BROWSER_GET_DATETIME;
 
 export function buildGetDatetimeToolDefinition(): OpenAIToolDefinition {
 	return {

tools/ui/src/lib/constants/index.ts

@@ -15,7 +15,7 @@ export * from './context-gauge-popup.constants';
 export * from './conversation-import.constants';
 export * from './binary-detection.constants';
 export * from './content-detection.constants';
-export * from './built-in-tools.constants';
+export * from './tool-ui.constants';
 export * from './cache.constants';
 export * from './chat-form.constants';
 export * from './cli-flags.constants';

tools/ui/src/lib/constants/read-media.ts

@@ -7,7 +7,7 @@ import {
 } from '$lib/enums';
 import type { OpenAIToolDefinition } from '$lib/types';
 
-export const READ_MEDIA_TOOL_NAME = BuiltInTool.READ_MEDIA;
+export const READ_MEDIA_TOOL_NAME = BuiltInTool.BROWSER_READ_MEDIA;
 
 // header lines of the tool result, parsed back by the read_media renderer
 export const PREFIX_FILE = 'File: ';

tools/ui/src/lib/constants/sandbox.constants.ts

@@ -1,6 +1,6 @@
 import { BuiltInTool } from '$lib/enums';
 
-export const SANDBOX_TOOL_NAME = BuiltInTool.RUN_JAVASCRIPT;
+export const SANDBOX_TOOL_NAME = BuiltInTool.BROWSER_RUN_JAVASCRIPT;
 
 export const SANDBOX_TIMEOUT_MS_DEFAULT = 10000;
 

tools/ui/src/lib/constants/tool-ui.constants.ts

@@ -0,0 +1,60 @@
+// Registry of server and browser tools whose renderer
+// shows a recognizable icon and friendly label inline in the chat UI.
+//
+// To add a new tool, add an entry to TOOL_UI. To give a
+// tool a custom title or body renderer, add a dedicated component under
+// ChatMessageToolCall/ and route it in ChatMessageToolCallBlock.svelte
+// (see ChatMessageToolCallBlockGetDatetime and
+// ChatMessageToolCallBlockSearchResults for prior art).
+
+import {
+	Braces,
+	Clock,
+	Eye,
+	FilePen,
+	FilePlus,
+	FileSearch,
+	FileText,
+	Info,
+	SearchCode,
+	Terminal
+} from '@lucide/svelte';
+import { BuiltInTool, ToolSource } from '$lib/enums';
+import type { ToolUiEntry } from '$lib/types';
+
+export const TOOL_UI: Readonly<Record<BuiltInTool, ToolUiEntry>> = {
+	[BuiltInTool.BROWSER_GET_DATETIME]: {
+		icon: Clock,
+		label: 'Current time',
+		source: ToolSource.BROWSER
+	},
+	[BuiltInTool.BROWSER_READ_MEDIA]: { icon: Eye, label: 'Read media', source: ToolSource.BROWSER },
+	[BuiltInTool.BROWSER_RUN_JAVASCRIPT]: {
+		icon: Braces,
+		label: 'Run JavaScript',
+		source: ToolSource.BROWSER
+	},
+	[BuiltInTool.SERVER_EDIT_FILE]: { icon: FilePen, label: 'Edit file', source: ToolSource.SERVER },
+	[BuiltInTool.SERVER_EXEC_SHELL_COMMAND]: {
+		icon: Terminal,
+		label: 'Run command',
+		source: ToolSource.SERVER
+	},
+	[BuiltInTool.SERVER_FILE_GLOB_SEARCH]: {
+		icon: FileSearch,
+		label: 'Search files',
+		source: ToolSource.SERVER
+	},
+	[BuiltInTool.SERVER_GET_INFO]: { icon: Info, label: 'Runtime info', source: ToolSource.SERVER },
+	[BuiltInTool.SERVER_GREP_SEARCH]: {
+		icon: SearchCode,
+		label: 'Search in files',
+		source: ToolSource.SERVER
+	},
+	[BuiltInTool.SERVER_READ_FILE]: { icon: FileText, label: 'Read file', source: ToolSource.SERVER },
+	[BuiltInTool.SERVER_WRITE_FILE]: {
+		icon: FilePlus,
+		label: 'Write file',
+		source: ToolSource.SERVER
+	}
+} as const;

tools/ui/src/lib/constants/ui.constants.ts

@@ -18,15 +18,15 @@ export const UI_DATA_ATTRS = {
 } as const;
 
 export const TOOL_GROUP_LABELS = {
-	[ToolSource.BUILTIN]: 'Built-in',
+	[ToolSource.BROWSER]: 'Browser',
 	[ToolSource.CUSTOM]: 'JSON Schema',
-	[ToolSource.FRONTEND]: 'Browser'
+	[ToolSource.SERVER]: 'Server'
 } as const;
 
 export const TOOL_SERVER_LABELS = {
-	[ToolSource.BUILTIN]: 'Built-in Tools',
+	[ToolSource.BROWSER]: 'Browser Tools',
 	[ToolSource.CUSTOM]: 'Custom Tools',
-	[ToolSource.FRONTEND]: 'Browser Tools'
+	[ToolSource.SERVER]: 'Server Tools'
 } as const;
 
 export const TOOLTIP_DELAY_DURATION = 500;