@theia/ai-claude-code 1.65.0

package/src/browser/renderers/multiedit-tool-renderer.tsx

@@ -0,0 +1,204 @@
+// *****************************************************************************
+// Copyright (C) 2025 EclipseSource GmbH.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { ChatResponsePartRenderer } from '@theia/ai-chat-ui/lib/browser/chat-response-part-renderer';
+import { ResponseNode } from '@theia/ai-chat-ui/lib/browser/chat-tree-view';
+import { ChatResponseContent, ToolCallChatResponseContent } from '@theia/ai-chat/lib/common';
+import { LabelProvider } from '@theia/core/lib/browser';
+import { URI } from '@theia/core/lib/common/uri';
+import { inject, injectable } from '@theia/core/shared/inversify';
+import * as React from '@theia/core/shared/react';
+import { ReactNode } from '@theia/core/shared/react';
+import { EditorManager } from '@theia/editor/lib/browser';
+import { WorkspaceService } from '@theia/workspace/lib/browser';
+import { ClaudeCodeToolCallChatResponseContent } from '../claude-code-tool-call-content';
+import { CollapsibleToolRenderer } from './collapsible-tool-renderer';
+
+interface EditOperation {
+    old_string: string;
+    new_string: string;
+    replace_all?: boolean;
+}
+
+interface MultiEditToolInput {
+    file_path: string;
+    edits: EditOperation[];
+}
+
+@injectable()
+export class MultiEditToolRenderer implements ChatResponsePartRenderer<ToolCallChatResponseContent> {
+
+    @inject(WorkspaceService)
+    protected readonly workspaceService: WorkspaceService;
+
+    @inject(LabelProvider)
+    protected readonly labelProvider: LabelProvider;
+
+    @inject(EditorManager)
+    protected readonly editorManager: EditorManager;
+
+    canHandle(response: ChatResponseContent): number {
+        if (ClaudeCodeToolCallChatResponseContent.is(response) && response.name === 'MultiEdit') {
+            return 15; // Higher than default ToolCallPartRenderer (10)
+        }
+        return -1;
+    }
+
+    render(response: ToolCallChatResponseContent, parentNode: ResponseNode): ReactNode {
+        try {
+            const input = JSON.parse(response.arguments || '{}') as MultiEditToolInput;
+            return <MultiEditToolComponent
+                input={input}
+                workspaceService={this.workspaceService}
+                labelProvider={this.labelProvider}
+                editorManager={this.editorManager}
+            />;
+        } catch (error) {
+            console.warn('Failed to parse MultiEdit tool input:', error);
+            return <div className="claude-code-tool error">Failed to parse MultiEdit tool data</div>;
+        }
+    }
+}
+
+const MultiEditToolComponent: React.FC<{
+    input: MultiEditToolInput;
+    workspaceService: WorkspaceService;
+    labelProvider: LabelProvider;
+    editorManager: EditorManager;
+}> = ({ input, workspaceService, labelProvider, editorManager }) => {
+    const getFileName = (filePath: string): string => filePath.split('/').pop() || filePath;
+    const getWorkspaceRelativePath = async (filePath: string): Promise<string> => {
+        try {
+            const absoluteUri = new URI(filePath).parent;
+            const workspaceRelativePath = await workspaceService.getWorkspaceRelativePath(absoluteUri);
+            return workspaceRelativePath || '';
+        } catch {
+            return '';
+        }
+    };
+
+    const getIcon = (filePath: string): string => {
+        try {
+            const uri = new URI(filePath);
+            return labelProvider.getIcon(uri) || 'codicon-file';
+        } catch {
+            return 'codicon-file';
+        }
+    };
+
+    const handleOpenFile = async () => {
+        try {
+            const uri = new URI(input.file_path);
+            await editorManager.open(uri);
+        } catch (error) {
+            console.error('Failed to open file:', error);
+        }
+    };
+
+    const [relativePath, setRelativePath] = React.useState<string>('');
+
+    React.useEffect(() => {
+        getWorkspaceRelativePath(input.file_path).then(setRelativePath);
+    }, [input.file_path]);
+
+    const getChangeInfo = () => {
+        let totalOldLines = 0;
+        let totalNewLines = 0;
+
+        input.edits.forEach(edit => {
+            totalOldLines += edit.old_string.split('\n').length;
+            totalNewLines += edit.new_string.split('\n').length;
+        });
+
+        return { totalOldLines, totalNewLines };
+    };
+
+    const replaceAllCount = input.edits.filter(edit => edit.replace_all).length;
+    const totalEdits = input.edits.length;
+
+    const compactHeader = (
+        <>
+            <div className="claude-code-tool header-left">
+                <span className="claude-code-tool title">Multi-editing</span>
+                <span className={`${getIcon(input.file_path)} claude-code-tool icon`} />
+                <span
+                    className="claude-code-tool file-name clickable-element"
+                    onClick={handleOpenFile}
+                    title="Click to open file in editor"
+                >
+                    {getFileName(input.file_path)}
+                </span>
+                {relativePath && <span className="claude-code-tool relative-path" title={relativePath}>{relativePath}</span>}
+            </div>
+            <div className="claude-code-tool header-right">
+                <span className="claude-code-tool badge deleted">-{getChangeInfo().totalOldLines}</span>
+                <span className="claude-code-tool badge added">+{getChangeInfo().totalNewLines}</span>
+                <span className="claude-code-tool badge">{totalEdits} edit{totalEdits !== 1 ? 's' : ''}</span>
+                {replaceAllCount > 0 && (
+                    <span className="claude-code-tool badge">{replaceAllCount} replace-all</span>
+                )}
+            </div>
+        </>
+    );
+
+    const expandedContent = (
+        <div className="claude-code-tool details">
+            <div className="claude-code-tool detail-row">
+                <span className="claude-code-tool detail-label">File Path</span>
+                <code className="claude-code-tool detail-value">{input.file_path}</code>
+            </div>
+            <div className="claude-code-tool detail-row">
+                <span className="claude-code-tool detail-label">Total Edits</span>
+                <span className="claude-code-tool detail-value">{totalEdits}</span>
+            </div>
+            {input.edits.map((edit, index) => (
+                <div key={index} className="claude-code-tool edit-preview">
+                    <div className="claude-code-tool edit-preview-header">
+                        <span className="claude-code-tool edit-preview-title">Edit {index + 1}</span>
+                        {edit.replace_all && (
+                            <span className="claude-code-tool edit-preview-badge">
+                                Replace all
+                            </span>
+                        )}
+                    </div>
+                    <div className="claude-code-tool detail-row">
+                        <span className="claude-code-tool detail-label">From</span>
+                        <pre className="claude-code-tool detail-value code-preview">
+                            {edit.old_string.length > 100
+                                ? edit.old_string.substring(0, 100) + '...'
+                                : edit.old_string}
+                        </pre>
+                    </div>
+                    <div className="claude-code-tool detail-row">
+                        <span className="claude-code-tool detail-label">To</span>
+                        <pre className="claude-code-tool detail-value code-preview">
+                            {edit.new_string.length > 100
+                                ? edit.new_string.substring(0, 100) + '...'
+                                : edit.new_string}
+                        </pre>
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+
+    return (
+        <CollapsibleToolRenderer
+            compactHeader={compactHeader}
+            expandedContent={expandedContent}
+        />
+    );
+};

package/src/browser/renderers/read-tool-renderer.tsx

@@ -0,0 +1,170 @@
+// *****************************************************************************
+// Copyright (C) 2025 EclipseSource GmbH.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { ChatResponsePartRenderer } from '@theia/ai-chat-ui/lib/browser/chat-response-part-renderer';
+import { ResponseNode } from '@theia/ai-chat-ui/lib/browser/chat-tree-view';
+import { ChatResponseContent, ToolCallChatResponseContent } from '@theia/ai-chat/lib/common';
+import { LabelProvider } from '@theia/core/lib/browser';
+import { URI } from '@theia/core/lib/common/uri';
+import { inject, injectable } from '@theia/core/shared/inversify';
+import * as React from '@theia/core/shared/react';
+import { ReactNode } from '@theia/core/shared/react';
+import { EditorManager } from '@theia/editor/lib/browser';
+import { WorkspaceService } from '@theia/workspace/lib/browser';
+import { ClaudeCodeToolCallChatResponseContent } from '../claude-code-tool-call-content';
+import { CollapsibleToolRenderer } from './collapsible-tool-renderer';
+
+interface ReadToolInput {
+    file_path: string;
+    limit?: number;
+    offset?: number;
+}
+
+@injectable()
+export class ReadToolRenderer implements ChatResponsePartRenderer<ToolCallChatResponseContent> {
+
+    @inject(WorkspaceService)
+    protected readonly workspaceService: WorkspaceService;
+
+    @inject(LabelProvider)
+    protected readonly labelProvider: LabelProvider;
+
+    @inject(EditorManager)
+    protected readonly editorManager: EditorManager;
+
+    canHandle(response: ChatResponseContent): number {
+        if (ClaudeCodeToolCallChatResponseContent.is(response) && response.name === 'Read') {
+            return 15; // Higher than default ToolCallPartRenderer (10)
+        }
+        return -1;
+    }
+
+    render(response: ToolCallChatResponseContent, parentNode: ResponseNode): ReactNode {
+        try {
+            const input = JSON.parse(response.arguments || '{}') as ReadToolInput;
+            return <ReadToolComponent
+                input={input}
+                workspaceService={this.workspaceService}
+                labelProvider={this.labelProvider}
+                editorManager={this.editorManager}
+            />;
+        } catch (error) {
+            console.warn('Failed to parse Read tool input:', error);
+            return <div className="claude-code-tool error">Failed to parse Read tool data</div>;
+        }
+    }
+}
+
+const ReadToolComponent: React.FC<{
+    input: ReadToolInput;
+    workspaceService: WorkspaceService;
+    labelProvider: LabelProvider;
+    editorManager: EditorManager;
+}> = ({ input, workspaceService, labelProvider, editorManager }) => {
+    const getFileName = (filePath: string): string => filePath.split('/').pop() || filePath;
+    const getWorkspaceRelativePath = async (filePath: string): Promise<string> => {
+        try {
+            const absoluteUri = new URI(filePath).parent;
+            const workspaceRelativePath = await workspaceService.getWorkspaceRelativePath(absoluteUri);
+            return workspaceRelativePath || '';
+        } catch {
+            return '';
+        }
+    };
+
+    const getIcon = (filePath: string): string => {
+        try {
+            const uri = new URI(filePath);
+            return labelProvider.getIcon(uri) || 'codicon-file';
+        } catch {
+            return 'codicon-file';
+        }
+    };
+
+    const handleOpenFile = async () => {
+        try {
+            const uri = new URI(input.file_path);
+            await editorManager.open(uri);
+        } catch (error) {
+            console.error('Failed to open file:', error);
+        }
+    };
+
+    const [relativePath, setRelativePath] = React.useState<string>('');
+
+    React.useEffect(() => {
+        getWorkspaceRelativePath(input.file_path).then(setRelativePath);
+    }, [input.file_path]);
+
+    const isEntireFile = !input.limit && !input.offset;
+
+    const compactHeader = (
+        <>
+            <div className="claude-code-tool header-left">
+                <span className="claude-code-tool title">Reading</span>
+                <span className={`${getIcon(input.file_path)} claude-code-tool icon`} />
+                <span
+                    className="claude-code-tool file-name clickable-element"
+                    onClick={handleOpenFile}
+                    title="Click to open file in editor"
+                >
+                    {getFileName(input.file_path)}
+                </span>
+                {relativePath && <span className="claude-code-tool relative-path">{relativePath}</span>}
+            </div>
+            <div className="claude-code-tool header-right">
+                {isEntireFile && (
+                    <span className="claude-code-tool badge">Entire File</span>
+                )}
+                {!isEntireFile && (
+                    <span className="claude-code-tool badge">Partial</span>
+                )}
+            </div>
+        </>
+    );
+
+    const expandedContent = (
+        <div className="claude-code-tool details">
+            <div className="claude-code-tool detail-row">
+                <span className="claude-code-tool detail-label">File Path</span>
+                <code className="claude-code-tool detail-value">{input.file_path}</code>
+            </div>
+            {input.offset && (
+                <div className="claude-code-tool detail-row">
+                    <span className="claude-code-tool detail-label">Starting Line</span>
+                    <span className="claude-code-tool detail-value">{input.offset}</span>
+                </div>
+            )}
+            {input.limit && (
+                <div className="claude-code-tool detail-row">
+                    <span className="claude-code-tool detail-label">Line Limit</span>
+                    <span className="claude-code-tool detail-value">{input.limit}</span>
+                </div>
+            )}
+            <div className="claude-code-tool detail-row">
+                <span className="claude-code-tool detail-label">Read Mode</span>
+                <span className="claude-code-tool detail-value">{isEntireFile ? 'Entire file' : 'Partial read'}</span>
+            </div>
+        </div>
+    );
+
+    return (
+        <CollapsibleToolRenderer
+            compactHeader={compactHeader}
+            expandedContent={expandedContent}
+        />
+    );
+};

package/src/browser/renderers/todo-write-renderer.tsx

@@ -0,0 +1,178 @@
+// *****************************************************************************
+// Copyright (C) 2025 EclipseSource GmbH.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { ChatResponsePartRenderer } from '@theia/ai-chat-ui/lib/browser/chat-response-part-renderer';
+import { ResponseNode } from '@theia/ai-chat-ui/lib/browser/chat-tree-view';
+import { ChatResponseContent, ToolCallChatResponseContent } from '@theia/ai-chat/lib/common';
+import { codicon } from '@theia/core/lib/browser';
+import { injectable } from '@theia/core/shared/inversify';
+import * as React from '@theia/core/shared/react';
+import { ReactNode } from '@theia/core/shared/react';
+import { ClaudeCodeToolCallChatResponseContent } from '../claude-code-tool-call-content';
+import { CollapsibleToolRenderer } from './collapsible-tool-renderer';
+
+interface TodoItem {
+    id: string;
+    content: string;
+    status: 'pending' | 'in_progress' | 'completed';
+    priority: 'high' | 'medium' | 'low';
+}
+
+interface TodoWriteInput {
+    todos: TodoItem[];
+}
+
+// Session-scoped registry to track TodoWrite renderer instances per session
+class TodoWriteRegistry {
+    private static sessionInstances: Map<string, Set<() => void>> = new Map();
+
+    static register(sessionId: string, hideFn: () => void): void {
+        // Get or create instances set for this session
+        let sessionSet = this.sessionInstances.get(sessionId);
+        if (!sessionSet) {
+            sessionSet = new Set();
+            this.sessionInstances.set(sessionId, sessionSet);
+        }
+
+        // Hide all previous instances in this session
+        sessionSet.forEach(fn => fn());
+        // Clear the session registry
+        sessionSet.clear();
+        // Add the new instance
+        sessionSet.add(hideFn);
+    }
+
+    static unregister(sessionId: string, hideFn: () => void): void {
+        const sessionSet = this.sessionInstances.get(sessionId);
+        if (sessionSet) {
+            sessionSet.delete(hideFn);
+            // Clean up empty session entries
+            if (sessionSet.size === 0) {
+                this.sessionInstances.delete(sessionId);
+            }
+        }
+    }
+}
+
+@injectable()
+export class TodoWriteRenderer implements ChatResponsePartRenderer<ToolCallChatResponseContent> {
+
+    canHandle(response: ChatResponseContent): number {
+        if (ClaudeCodeToolCallChatResponseContent.is(response) && response.name === 'TodoWrite') {
+            return 15; // Higher than default ToolCallPartRenderer (10)
+        }
+        return -1;
+    }
+
+    render(response: ToolCallChatResponseContent, parentNode: ResponseNode): ReactNode {
+        try {
+            const input = JSON.parse(response.arguments || '{}') as TodoWriteInput;
+            return <TodoListComponent todos={input.todos || []} sessionId={parentNode.sessionId} />;
+        } catch (error) {
+            console.warn('Failed to parse TodoWrite input:', error);
+            return <div className="claude-code-tool todo-list-error">Failed to parse todo list data</div>;
+        }
+    }
+}
+
+const TodoListComponent: React.FC<{ todos: TodoItem[]; sessionId: string }> = ({ todos, sessionId }) => {
+    const [isHidden, setIsHidden] = React.useState(false);
+
+    React.useEffect(() => {
+        const hideFn = () => setIsHidden(true);
+        TodoWriteRegistry.register(sessionId, hideFn);
+
+        return () => {
+            TodoWriteRegistry.unregister(sessionId, hideFn);
+        };
+    }, [sessionId]);
+
+    if (isHidden) {
+        // eslint-disable-next-line no-null/no-null
+        return null;
+    }
+    const getStatusIcon = (status: TodoItem['status']) => {
+        switch (status) {
+            case 'completed':
+                return <span className={`${codicon('check')} claude-code-tool todo-status-icon completed`} />;
+            case 'in_progress':
+                return <span className={`${codicon('loading')} claude-code-tool todo-status-icon in-progress theia-animation-spin`} />;
+            case 'pending':
+            default:
+                return <span className={`${codicon('circle-outline')} claude-code-tool todo-status-icon pending`} />;
+        }
+    };
+
+    const getPriorityBadge = (priority: TodoItem['priority']) => (
+        <span className={`claude-code-tool todo-priority priority-${priority}`}>{priority}</span>
+    );
+
+    if (!todos || todos.length === 0) {
+        return (
+            <div className="claude-code-tool todo-list-container">
+                <div className="claude-code-tool todo-list-header">
+                    <span className={`${codicon('checklist')} claude-code-tool todo-list-icon`} />
+                    <span className="claude-code-tool todo-list-title">Todo List</span>
+                </div>
+                <div className="claude-code-tool todo-list-empty">No todos available</div>
+            </div>
+        );
+    }
+
+    const completedCount = todos.filter(todo => todo.status === 'completed').length;
+    const totalCount = todos.length;
+
+    const compactHeader = (
+        <>
+            <div className="claude-code-tool header-left">
+                <span className="claude-code-tool title">Todo List</span>
+                <span className={`${codicon('checklist')} claude-code-tool icon`} />
+                <span className="claude-code-tool progress-text">{completedCount}/{totalCount} completed</span>
+            </div>
+            <div className="claude-code-tool header-right">
+                <span className="claude-code-tool badge">{totalCount} item{totalCount !== 1 ? 's' : ''}</span>
+            </div>
+        </>
+    );
+
+    const expandedContent = (
+        <div className="claude-code-tool details">
+            <div className="claude-code-tool todo-list-items">
+                {todos.map(todo => (
+                    <div key={todo.id || todo.content} className={`claude-code-tool todo-item status-${todo.status}`}>
+                        <div className="claude-code-tool todo-item-main">
+                            <div className="claude-code-tool todo-item-status">
+                                {getStatusIcon(todo.status)}
+                            </div>
+                            <div className="claude-code-tool todo-item-content">
+                                <span className="claude-code-tool todo-item-text">{todo.content}</span>
+                                {getPriorityBadge(todo.priority)}
+                            </div>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+
+    return (
+        <CollapsibleToolRenderer
+            compactHeader={compactHeader}
+            expandedContent={expandedContent}
+            defaultExpanded={true}
+        />
+    );
+};

package/src/browser/renderers/web-fetch-tool-renderer.tsx

@@ -0,0 +1,108 @@
+// *****************************************************************************
+// Copyright (C) 2025 EclipseSource GmbH.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { ChatResponsePartRenderer } from '@theia/ai-chat-ui/lib/browser/chat-response-part-renderer';
+import { ResponseNode } from '@theia/ai-chat-ui/lib/browser/chat-tree-view';
+import { ChatResponseContent, ToolCallChatResponseContent } from '@theia/ai-chat/lib/common';
+import { codicon } from '@theia/core/lib/browser';
+import { injectable } from '@theia/core/shared/inversify';
+import * as React from '@theia/core/shared/react';
+import { ReactNode } from '@theia/core/shared/react';
+import { ClaudeCodeToolCallChatResponseContent } from '../claude-code-tool-call-content';
+import { CollapsibleToolRenderer } from './collapsible-tool-renderer';
+
+interface WebFetchToolInput {
+    url: string;
+    prompt: string;
+}
+
+@injectable()
+export class WebFetchToolRenderer implements ChatResponsePartRenderer<ToolCallChatResponseContent> {
+
+    canHandle(response: ChatResponseContent): number {
+        if (ClaudeCodeToolCallChatResponseContent.is(response) && response.name === 'WebFetch') {
+            return 15; // Higher than default ToolCallPartRenderer (10)
+        }
+        return -1;
+    }
+
+    render(response: ToolCallChatResponseContent, parentNode: ResponseNode): ReactNode {
+        try {
+            const input = JSON.parse(response.arguments || '{}') as WebFetchToolInput;
+            return <WebFetchToolComponent input={input} />;
+        } catch (error) {
+            console.warn('Failed to parse WebFetch tool input:', error);
+            return <div className="claude-code-tool error">Failed to parse WebFetch tool data</div>;
+        }
+    }
+}
+
+const WebFetchToolComponent: React.FC<{
+    input: WebFetchToolInput;
+}> = ({ input }) => {
+    const getDomain = (url: string): string => {
+        try {
+            return new URL(url).hostname;
+        } catch {
+            return url;
+        }
+    };
+
+    const truncatePrompt = (prompt: string, maxLength: number = 100): string => {
+        if (prompt.length <= maxLength) { return prompt; }
+        return prompt.substring(0, maxLength) + '...';
+    };
+
+    const compactHeader = (
+        <>
+            <div className="claude-code-tool header-left">
+                <span className="claude-code-tool title">Fetching</span>
+                <span className={`${codicon('globe')} claude-code-tool icon`} />
+                <span className="claude-code-tool command">{getDomain(input.url)}</span>
+                <span className="claude-code-tool description" title={input.prompt}>
+                    {truncatePrompt(input.prompt)}
+                </span>
+            </div>
+            <div className="claude-code-tool header-right">
+                <span className="claude-code-tool badge">Web Fetch</span>
+            </div>
+        </>
+    );
+
+    const expandedContent = (
+        <div className="claude-code-tool details">
+            <div className="claude-code-tool detail-row">
+                <span className="claude-code-tool detail-label">URL</span>
+                <code className="claude-code-tool detail-value">{input.url}</code>
+            </div>
+            <div className="claude-code-tool detail-row">
+                <span className="claude-code-tool detail-label">Domain</span>
+                <span className="claude-code-tool detail-value">{getDomain(input.url)}</span>
+            </div>
+            <div className="claude-code-tool detail-row">
+                <span className="claude-code-tool detail-label">Prompt</span>
+                <span className="claude-code-tool detail-value">{input.prompt}</span>
+            </div>
+        </div>
+    );
+
+    return (
+        <CollapsibleToolRenderer
+            compactHeader={compactHeader}
+            expandedContent={expandedContent}
+        />
+    );
+};