mirror of
https://github.com/claude-code-best/claude-code.git
synced 2026-06-18 22:35:51 +00:00
332 lines
9.2 KiB
TypeScript
332 lines
9.2 KiB
TypeScript
import * as React from 'react'
|
|
import { MessageResponse } from '../../components/MessageResponse.js'
|
|
import { supportsHyperlinks } from '@anthropic/ink'
|
|
import { Link, Text } from '@anthropic/ink'
|
|
import { renderToolResultMessage as renderDefaultMCPToolResultMessage } from '../../tools/MCPTool/UI.js'
|
|
import type { MCPToolResult } from '../../utils/mcpValidation.js'
|
|
import { truncateToWidth } from '../format.js'
|
|
import { trackClaudeInChromeTabId } from './common.js'
|
|
|
|
export type { Tool } from '@modelcontextprotocol/sdk/types.js'
|
|
|
|
/**
|
|
* All tool names from BROWSER_TOOLS in @ant/claude-for-chrome-mcp.
|
|
* Keep in sync with the package's BROWSER_TOOLS array.
|
|
*/
|
|
export type ChromeToolName =
|
|
| 'javascript_tool'
|
|
| 'read_page'
|
|
| 'find'
|
|
| 'form_input'
|
|
| 'computer'
|
|
| 'navigate'
|
|
| 'resize_window'
|
|
| 'gif_creator'
|
|
| 'upload_image'
|
|
| 'get_page_text'
|
|
| 'tabs_context_mcp'
|
|
| 'tabs_create_mcp'
|
|
| 'update_plan'
|
|
| 'read_console_messages'
|
|
| 'read_network_requests'
|
|
| 'shortcuts_list'
|
|
| 'shortcuts_execute'
|
|
|
|
const CHROME_EXTENSION_FOCUS_TAB_URL_BASE = 'https://clau.de/chrome/tab/'
|
|
|
|
function renderChromeToolUseMessage(
|
|
input: Record<string, unknown>,
|
|
toolName: ChromeToolName,
|
|
verbose: boolean,
|
|
): React.ReactNode {
|
|
const tabId = input.tabId
|
|
if (typeof tabId === 'number') {
|
|
trackClaudeInChromeTabId(tabId)
|
|
}
|
|
|
|
// Build secondary info based on tool type and input
|
|
const secondaryInfo: string[] = []
|
|
|
|
switch (toolName) {
|
|
case 'navigate':
|
|
if (typeof input.url === 'string') {
|
|
try {
|
|
const url = new URL(input.url)
|
|
secondaryInfo.push(url.hostname)
|
|
} catch {
|
|
secondaryInfo.push(truncateToWidth(input.url, 30))
|
|
}
|
|
}
|
|
break
|
|
|
|
case 'find':
|
|
if (typeof input.query === 'string') {
|
|
secondaryInfo.push(`pattern: ${truncateToWidth(input.query, 30)}`)
|
|
}
|
|
break
|
|
|
|
case 'computer':
|
|
if (typeof input.action === 'string') {
|
|
const action = input.action
|
|
if (
|
|
action === 'left_click' ||
|
|
action === 'right_click' ||
|
|
action === 'double_click' ||
|
|
action === 'middle_click'
|
|
) {
|
|
if (typeof input.ref === 'string') {
|
|
secondaryInfo.push(`${action} on ${input.ref}`)
|
|
} else if (Array.isArray(input.coordinate)) {
|
|
secondaryInfo.push(`${action} at (${input.coordinate.join(', ')})`)
|
|
} else {
|
|
secondaryInfo.push(action)
|
|
}
|
|
} else if (action === 'type' && typeof input.text === 'string') {
|
|
secondaryInfo.push(`type "${truncateToWidth(input.text, 15)}"`)
|
|
} else if (action === 'key' && typeof input.text === 'string') {
|
|
secondaryInfo.push(`key ${input.text}`)
|
|
} else if (
|
|
action === 'scroll' &&
|
|
typeof input.scroll_direction === 'string'
|
|
) {
|
|
secondaryInfo.push(`scroll ${input.scroll_direction}`)
|
|
} else if (action === 'wait' && typeof input.duration === 'number') {
|
|
secondaryInfo.push(`wait ${input.duration}s`)
|
|
} else if (action === 'left_click_drag') {
|
|
secondaryInfo.push('drag')
|
|
} else {
|
|
secondaryInfo.push(action)
|
|
}
|
|
}
|
|
break
|
|
|
|
case 'gif_creator':
|
|
if (typeof input.action === 'string') {
|
|
secondaryInfo.push(`${input.action}`)
|
|
}
|
|
break
|
|
|
|
case 'resize_window':
|
|
if (typeof input.width === 'number' && typeof input.height === 'number') {
|
|
secondaryInfo.push(`${input.width}x${input.height}`)
|
|
}
|
|
break
|
|
|
|
case 'read_console_messages':
|
|
if (typeof input.pattern === 'string') {
|
|
secondaryInfo.push(`pattern: ${truncateToWidth(input.pattern, 20)}`)
|
|
}
|
|
if (input.onlyErrors === true) {
|
|
secondaryInfo.push('errors only')
|
|
}
|
|
break
|
|
|
|
case 'read_network_requests':
|
|
if (typeof input.urlPattern === 'string') {
|
|
secondaryInfo.push(`pattern: ${truncateToWidth(input.urlPattern, 20)}`)
|
|
}
|
|
break
|
|
|
|
case 'shortcuts_execute':
|
|
if (typeof input.shortcutId === 'string') {
|
|
secondaryInfo.push(`shortcut_id: ${input.shortcutId}`)
|
|
}
|
|
break
|
|
|
|
case 'javascript_tool':
|
|
// In verbose mode, show the full code
|
|
if (verbose && typeof input.text === 'string') {
|
|
return input.text
|
|
}
|
|
// In non-verbose mode, return empty string to preserve View Tab layout
|
|
return ''
|
|
|
|
case 'tabs_create_mcp':
|
|
case 'tabs_context_mcp':
|
|
case 'form_input':
|
|
case 'shortcuts_list':
|
|
case 'read_page':
|
|
case 'upload_image':
|
|
case 'get_page_text':
|
|
case 'update_plan':
|
|
// These tools don't have meaningful secondary info to show inline.
|
|
// Return empty string (not null) to ensure tool header still renders.
|
|
return ''
|
|
}
|
|
|
|
return secondaryInfo.join(', ') || null
|
|
}
|
|
|
|
/**
|
|
* Renders a clickable "View Tab" link for Claude in Chrome MCP tools.
|
|
* Returns null if:
|
|
* - The tool is not a Claude in Chrome MCP tool
|
|
* - The input doesn't have a valid tabId
|
|
* - Hyperlinks are not supported
|
|
*/
|
|
function renderChromeViewTabLink(input: unknown): React.ReactNode {
|
|
if (!supportsHyperlinks()) {
|
|
return null
|
|
}
|
|
if (typeof input !== 'object' || input === null || !('tabId' in input)) {
|
|
return null
|
|
}
|
|
const tabId =
|
|
typeof input.tabId === 'number'
|
|
? input.tabId
|
|
: typeof input.tabId === 'string'
|
|
? parseInt(input.tabId, 10)
|
|
: NaN
|
|
if (isNaN(tabId)) {
|
|
return null
|
|
}
|
|
const linkUrl = `${CHROME_EXTENSION_FOCUS_TAB_URL_BASE}${tabId}`
|
|
return (
|
|
<Text>
|
|
{' '}
|
|
<Link url={linkUrl}>
|
|
<Text color="subtle">[View Tab]</Text>
|
|
</Link>
|
|
</Text>
|
|
)
|
|
}
|
|
|
|
/**
|
|
* Custom tool result message rendering for claude-in-chrome tools.
|
|
* Shows a brief summary for successful results. Errors are handled by
|
|
* the default renderToolUseErrorMessage when is_error is set.
|
|
*/
|
|
export function renderChromeToolResultMessage(
|
|
output: MCPToolResult,
|
|
toolName: ChromeToolName,
|
|
verbose: boolean,
|
|
): React.ReactNode {
|
|
if (verbose) {
|
|
return renderDefaultMCPToolResultMessage(output, [], { verbose })
|
|
}
|
|
|
|
let summary: string | null = null
|
|
switch (toolName) {
|
|
case 'navigate':
|
|
summary = 'Navigation completed'
|
|
break
|
|
case 'tabs_create_mcp':
|
|
summary = 'Tab created'
|
|
break
|
|
case 'tabs_context_mcp':
|
|
summary = 'Tabs read'
|
|
break
|
|
case 'form_input':
|
|
summary = 'Input completed'
|
|
break
|
|
case 'computer':
|
|
summary = 'Action completed'
|
|
break
|
|
case 'resize_window':
|
|
summary = 'Window resized'
|
|
break
|
|
case 'find':
|
|
summary = 'Search completed'
|
|
break
|
|
case 'gif_creator':
|
|
summary = 'GIF action completed'
|
|
break
|
|
case 'read_console_messages':
|
|
summary = 'Console messages retrieved'
|
|
break
|
|
case 'read_network_requests':
|
|
summary = 'Network requests retrieved'
|
|
break
|
|
case 'shortcuts_list':
|
|
summary = 'Shortcuts retrieved'
|
|
break
|
|
case 'shortcuts_execute':
|
|
summary = 'Shortcut executed'
|
|
break
|
|
case 'javascript_tool':
|
|
summary = 'Script executed'
|
|
break
|
|
case 'read_page':
|
|
summary = 'Page read'
|
|
break
|
|
case 'upload_image':
|
|
summary = 'Image uploaded'
|
|
break
|
|
case 'get_page_text':
|
|
summary = 'Page text retrieved'
|
|
break
|
|
case 'update_plan':
|
|
summary = 'Plan updated'
|
|
break
|
|
}
|
|
|
|
if (summary) {
|
|
return (
|
|
<MessageResponse height={1}>
|
|
<Text dimColor>{summary}</Text>
|
|
</MessageResponse>
|
|
)
|
|
}
|
|
|
|
return null
|
|
}
|
|
|
|
/**
|
|
* Returns tool method overrides for Claude in Chrome MCP tools. Use this to customize
|
|
* rendering for chrome tools in a single spread operation.
|
|
*/
|
|
export function getClaudeInChromeMCPToolOverrides(toolName: string): {
|
|
userFacingName: (input?: Record<string, unknown>) => string
|
|
renderToolUseMessage: (
|
|
input: Record<string, unknown>,
|
|
options: { verbose: boolean },
|
|
) => React.ReactNode
|
|
renderToolUseTag: (input: Partial<Record<string, unknown>>) => React.ReactNode
|
|
renderToolResultMessage: (
|
|
output: string | MCPToolResult,
|
|
progressMessagesForMessage: unknown[],
|
|
options: { verbose: boolean },
|
|
) => React.ReactNode
|
|
} {
|
|
return {
|
|
userFacingName(_input?: Record<string, unknown>) {
|
|
// Trim the _mcp postfix that show up in some of the tool names
|
|
const displayName = toolName.replace(/_mcp$/, '')
|
|
return `Claude in Chrome[${displayName}]`
|
|
},
|
|
renderToolUseMessage(
|
|
input: Record<string, unknown>,
|
|
{ verbose }: { verbose: boolean },
|
|
): React.ReactNode {
|
|
return renderChromeToolUseMessage(
|
|
input,
|
|
toolName as ChromeToolName,
|
|
verbose,
|
|
)
|
|
},
|
|
renderToolUseTag(input: Partial<Record<string, unknown>>): React.ReactNode {
|
|
return renderChromeViewTabLink(input)
|
|
},
|
|
renderToolResultMessage(
|
|
output: string | MCPToolResult,
|
|
_progressMessagesForMessage: unknown[],
|
|
{ verbose }: { verbose: boolean },
|
|
): React.ReactNode {
|
|
if (!isMCPToolResult(output)) {
|
|
return null
|
|
}
|
|
return renderChromeToolResultMessage(
|
|
output,
|
|
toolName as ChromeToolName,
|
|
verbose,
|
|
)
|
|
},
|
|
}
|
|
}
|
|
|
|
function isMCPToolResult(
|
|
output: string | MCPToolResult,
|
|
): output is MCPToolResult {
|
|
return typeof output === 'object' && output !== null
|
|
}
|