@theia/ai-claude-code 1.65.0

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

@@ -0,0 +1,180 @@
+// *****************************************************************************
+// 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 EditToolInput {
+    file_path: string;
+    old_string: string;
+    new_string: string;
+    replace_all?: boolean;
+}
+
+@injectable()
+export class EditToolRenderer 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 === 'Edit') {
+            return 15; // Higher than default ToolCallPartRenderer (10)
+        }
+        return -1;
+    }
+
+    render(response: ToolCallChatResponseContent, parentNode: ResponseNode): ReactNode {
+        try {
+            const input = JSON.parse(response.arguments || '{}') as EditToolInput;
+            return <EditToolComponent
+                input={input}
+                workspaceService={this.workspaceService}
+                labelProvider={this.labelProvider}
+                editorManager={this.editorManager}
+            />;
+        } catch (error) {
+            console.warn('Failed to parse Edit tool input:', error);
+            return <div className="claude-code-tool error">Failed to parse Edit tool data</div>;
+        }
+    }
+}
+
+const EditToolComponent: React.FC<{
+    input: EditToolInput;
+    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 = () => {
+        const oldLines = input.old_string.split('\n').length;
+        const newLines = input.new_string.split('\n').length;
+        return { oldLines, newLines };
+    };
+
+    const compactHeader = (
+        <>
+            <div className="claude-code-tool header-left">
+                <span className="claude-code-tool title">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().oldLines}</span>
+                <span className="claude-code-tool badge added">+{getChangeInfo().newLines}</span>
+                {input.replace_all && (
+                    <span className="claude-code-tool badge">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">From</span>
+                <pre className="claude-code-tool detail-value code-preview">
+                    {input.old_string.length > 200
+                        ? input.old_string.substring(0, 200) + '...'
+                        : input.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">
+                    {input.new_string.length > 200
+                        ? input.new_string.substring(0, 200) + '...'
+                        : input.new_string}
+                </pre>
+            </div>
+            {input.replace_all && (
+                <div className="claude-code-tool detail-row">
+                    <span className="claude-code-tool detail-label">Mode</span>
+                    <span className="claude-code-tool detail-value">Replace all occurrences</span>
+                </div>
+            )}
+        </div>
+    );
+
+    return (
+        <CollapsibleToolRenderer
+            compactHeader={compactHeader}
+            expandedContent={expandedContent}
+        />
+    );
+};

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

@@ -0,0 +1,136 @@
+// *****************************************************************************
+// 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, 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 { WorkspaceService } from '@theia/workspace/lib/browser';
+import { ClaudeCodeToolCallChatResponseContent } from '../claude-code-tool-call-content';
+import { CollapsibleToolRenderer } from './collapsible-tool-renderer';
+
+interface GlobToolInput {
+    pattern: string;
+    path?: string;
+}
+
+@injectable()
+export class GlobToolRenderer implements ChatResponsePartRenderer<ToolCallChatResponseContent> {
+
+    @inject(WorkspaceService)
+    protected readonly workspaceService: WorkspaceService;
+
+    @inject(LabelProvider)
+    protected readonly labelProvider: LabelProvider;
+
+    canHandle(response: ChatResponseContent): number {
+        if (ClaudeCodeToolCallChatResponseContent.is(response) && response.name === 'Glob') {
+            return 15; // Higher than default ToolCallPartRenderer (10)
+        }
+        return -1;
+    }
+
+    render(response: ToolCallChatResponseContent, parentNode: ResponseNode): ReactNode {
+        try {
+            const input = JSON.parse(response.arguments || '{}') as GlobToolInput;
+            return <GlobToolComponent
+                input={input}
+                workspaceService={this.workspaceService}
+                labelProvider={this.labelProvider}
+            />;
+        } catch (error) {
+            console.warn('Failed to parse Glob tool input:', error);
+            return <div className="claude-code-tool error">Failed to parse Glob tool data</div>;
+        }
+    }
+}
+
+const GlobToolComponent: React.FC<{
+    input: GlobToolInput;
+    workspaceService: WorkspaceService;
+    labelProvider: LabelProvider;
+}> = ({ input, workspaceService, labelProvider }) => {
+    const getSearchScope = (): string => {
+        if (input.path) {
+            return input.path.split('/').pop() || input.path;
+        }
+        return 'project';
+    };
+
+    const getWorkspaceRelativePath = async (filePath: string): Promise<string> => {
+        try {
+            const absoluteUri = new URI(filePath);
+            const workspaceRelativePath = await workspaceService.getWorkspaceRelativePath(absoluteUri);
+            return workspaceRelativePath || '';
+        } catch {
+            return '';
+        }
+    };
+
+    const [relativePath, setRelativePath] = React.useState<string>('');
+
+    React.useEffect(() => {
+        if (input.path) {
+            getWorkspaceRelativePath(input.path).then(setRelativePath);
+        }
+    }, [input.path]);
+
+    const compactHeader = (
+        <>
+            <div className="claude-code-tool header-left">
+                <span className="claude-code-tool title">Finding</span>
+                <span className={`${codicon('files')} claude-code-tool icon`} />
+                <span className="claude-code-tool glob-pattern">{input.pattern}</span>
+                <span className="claude-code-tool scope">in {getSearchScope()}</span>
+                {relativePath && <span className="claude-code-tool relative-path">{relativePath}</span>}
+            </div>
+            <div className="claude-code-tool header-right">
+                <span className="claude-code-tool badge">glob pattern</span>
+            </div>
+        </>
+    );
+
+    const expandedContent = (
+        <div className="claude-code-tool details">
+            <div className="claude-code-tool detail-row">
+                <span className="claude-code-tool detail-label">Pattern</span>
+                <code className="claude-code-tool detail-value">{input.pattern}</code>
+            </div>
+            <div className="claude-code-tool detail-row">
+                <span className="claude-code-tool detail-label">Search Path</span>
+                <code className="claude-code-tool detail-value">{input.path || 'current directory'}</code>
+            </div>
+            <div className="claude-code-tool detail-row">
+                <span className="claude-code-tool detail-label">Description</span>
+                <span className="claude-code-tool detail-value">
+                    Find files matching the glob pattern "{input.pattern}"
+                    {input.path ? ` within ${input.path}` : ' in the current directory'}
+                </span>
+            </div>
+        </div>
+    );
+
+    return (
+        <CollapsibleToolRenderer
+            compactHeader={compactHeader}
+            expandedContent={expandedContent}
+        />
+    );
+};

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

@@ -0,0 +1,190 @@
+// *****************************************************************************
+// 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, 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 { WorkspaceService } from '@theia/workspace/lib/browser';
+import { ClaudeCodeToolCallChatResponseContent } from '../claude-code-tool-call-content';
+import { CollapsibleToolRenderer } from './collapsible-tool-renderer';
+
+interface GrepToolInput {
+    pattern: string;
+    path?: string;
+    output_mode?: 'content' | 'files_with_matches' | 'count';
+    glob?: string;
+    type?: string;
+    '-i'?: boolean;
+    '-n'?: boolean;
+    '-A'?: number;
+    '-B'?: number;
+    '-C'?: number;
+    multiline?: boolean;
+    head_limit?: number;
+}
+
+@injectable()
+export class GrepToolRenderer implements ChatResponsePartRenderer<ToolCallChatResponseContent> {
+
+    @inject(WorkspaceService)
+    protected readonly workspaceService: WorkspaceService;
+
+    @inject(LabelProvider)
+    protected readonly labelProvider: LabelProvider;
+
+    canHandle(response: ChatResponseContent): number {
+        if (ClaudeCodeToolCallChatResponseContent.is(response) && response.name === 'Grep') {
+            return 15; // Higher than default ToolCallPartRenderer (10)
+        }
+        return -1;
+    }
+
+    render(response: ToolCallChatResponseContent, parentNode: ResponseNode): ReactNode {
+        try {
+            const input = JSON.parse(response.arguments || '{}') as GrepToolInput;
+            return <GrepToolComponent
+                input={input}
+                workspaceService={this.workspaceService}
+                labelProvider={this.labelProvider}
+            />;
+        } catch (error) {
+            console.warn('Failed to parse Grep tool input:', error);
+            return <div className="claude-code-tool error">Failed to parse Grep tool data</div>;
+        }
+    }
+}
+
+const GrepToolComponent: React.FC<{
+    input: GrepToolInput;
+    workspaceService: WorkspaceService;
+    labelProvider: LabelProvider;
+}> = ({ input, workspaceService, labelProvider }) => {
+    const getSearchScope = (): string => {
+        if (input.path) {
+            return input.path.split('/').pop() || input.path;
+        }
+        return 'project';
+    };
+
+    const getWorkspaceRelativePath = async (filePath: string): Promise<string> => {
+        try {
+            const absoluteUri = new URI(filePath);
+            const workspaceRelativePath = await workspaceService.getWorkspaceRelativePath(absoluteUri);
+            return workspaceRelativePath || '';
+        } catch {
+            return '';
+        }
+    };
+
+    const [relativePath, setRelativePath] = React.useState<string>('');
+
+    React.useEffect(() => {
+        if (input.path) {
+            getWorkspaceRelativePath(input.path).then(setRelativePath);
+        }
+    }, [input.path]);
+
+    const getOptionsInfo = (): { label: string; count: number } => {
+        const options = [];
+        if (input['-i']) { options.push('case-insensitive'); }
+        if (input['-n']) { options.push('line numbers'); }
+        if (input['-A']) { options.push(`+${input['-A']} after`); }
+        if (input['-B']) { options.push(`+${input['-B']} before`); }
+        if (input['-C']) { options.push(`±${input['-C']} context`); }
+        if (input.multiline) { options.push('multiline'); }
+        if (input.glob) { options.push(`glob: ${input.glob}`); }
+        if (input.type) { options.push(`type: ${input.type}`); }
+        if (input.head_limit) { options.push(`limit: ${input.head_limit}`); }
+
+        return {
+            label: options.length > 0 ? options.join(', ') : '',
+            count: options.length
+        };
+    };
+
+    const optionsInfo = getOptionsInfo();
+
+    const compactHeader = (
+        <>
+            <div className="claude-code-tool header-left">
+                <span className="claude-code-tool title">Searching</span>
+                <span className={`${codicon('search')} claude-code-tool icon`} />
+                <span className="claude-code-tool pattern">"{input.pattern}"</span>
+                <span className="claude-code-tool scope">in {getSearchScope()}</span>
+                {relativePath && <span className="claude-code-tool relative-path">{relativePath}</span>}
+            </div>
+            <div className="claude-code-tool header-right">
+                {input.output_mode && input.output_mode !== 'files_with_matches' && (
+                    <span className="claude-code-tool badge">{input.output_mode}</span>
+                )}
+                {optionsInfo.count > 0 && (
+                    <span className="claude-code-tool badge" title={optionsInfo.label}>
+                        {optionsInfo.count} option{optionsInfo.count > 1 ? 's' : ''}
+                    </span>
+                )}
+            </div>
+        </>
+    );
+
+    const expandedContent = (
+        <div className="claude-code-tool details">
+            <div className="claude-code-tool detail-row">
+                <span className="claude-code-tool detail-label">Pattern</span>
+                <code className="claude-code-tool detail-value">"{input.pattern}"</code>
+            </div>
+            <div className="claude-code-tool detail-row">
+                <span className="claude-code-tool detail-label">Search Path</span>
+                <code className="claude-code-tool detail-value">{input.path || 'project root'}</code>
+            </div>
+            {input.output_mode && (
+                <div className="claude-code-tool detail-row">
+                    <span className="claude-code-tool detail-label">Mode</span>
+                    <span className="claude-code-tool detail-value">{input.output_mode}</span>
+                </div>
+            )}
+            {input.glob && (
+                <div className="claude-code-tool detail-row">
+                    <span className="claude-code-tool detail-label">File Filter</span>
+                    <code className="claude-code-tool detail-value">{input.glob}</code>
+                </div>
+            )}
+            {input.type && (
+                <div className="claude-code-tool detail-row">
+                    <span className="claude-code-tool detail-label">File Type</span>
+                    <span className="claude-code-tool detail-value">{input.type}</span>
+                </div>
+            )}
+            {optionsInfo.label && (
+                <div className="claude-code-tool detail-row">
+                    <span className="claude-code-tool detail-label">Options</span>
+                    <span className="claude-code-tool detail-value">{optionsInfo.label}</span>
+                </div>
+            )}
+        </div>
+    );
+
+    return (
+        <CollapsibleToolRenderer
+            compactHeader={compactHeader}
+            expandedContent={expandedContent}
+        />
+    );
+};

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

@@ -0,0 +1,160 @@
+// *****************************************************************************
+// 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, 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 LSToolInput {
+    path: string;
+    ignore?: string[];
+}
+
+@injectable()
+export class LSToolRenderer 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 === 'LS') {
+            return 15; // Higher than default ToolCallPartRenderer (10)
+        }
+        return -1;
+    }
+
+    render(response: ToolCallChatResponseContent, parentNode: ResponseNode): ReactNode {
+        try {
+            const input = JSON.parse(response.arguments || '{}') as LSToolInput;
+            return <LSToolComponent
+                input={input}
+                workspaceService={this.workspaceService}
+                labelProvider={this.labelProvider}
+                editorManager={this.editorManager}
+            />;
+        } catch (error) {
+            console.warn('Failed to parse LS tool input:', error);
+            return <div className="claude-code-tool error">Failed to parse LS tool data</div>;
+        }
+    }
+}
+
+const LSToolComponent: React.FC<{
+    input: LSToolInput;
+    workspaceService: WorkspaceService;
+    labelProvider: LabelProvider;
+    editorManager: EditorManager;
+}> = ({ input, workspaceService, labelProvider, editorManager }) => {
+    const getDirectoryName = (dirPath: string): string => dirPath.split('/').pop() || dirPath;
+    const getWorkspaceRelativePath = async (dirPath: string): Promise<string> => {
+        try {
+            const absoluteUri = new URI(dirPath);
+            const workspaceRelativePath = await workspaceService.getWorkspaceRelativePath(absoluteUri);
+            return workspaceRelativePath || '';
+        } catch {
+            return '';
+        }
+    };
+
+    const handleOpenDirectory = async () => {
+        try {
+            const uri = new URI(input.path);
+            // Note: This might need to be adjusted based on how directories are opened in Theia
+            await editorManager.open(uri);
+        } catch (error) {
+            console.error('Failed to open directory:', error);
+        }
+    };
+
+    const [relativePath, setRelativePath] = React.useState<string>('');
+
+    React.useEffect(() => {
+        getWorkspaceRelativePath(input.path).then(setRelativePath);
+    }, [input.path]);
+
+    const compactHeader = (
+        <>
+            <div className="claude-code-tool header-left">
+                <span className="claude-code-tool title">Listing</span>
+                <span className={`${codicon('checklist')} claude-code-tool icon`} />
+                <span
+                    className="claude-code-tool file-name clickable-element"
+                    onClick={handleOpenDirectory}
+                    title="Click to open directory"
+                >
+                    {getDirectoryName(input.path)}
+                </span>
+                {relativePath && <span className="claude-code-tool relative-path">{relativePath}</span>}
+            </div>
+            <div className="claude-code-tool header-right">
+                {input.ignore && input.ignore.length > 0 && (
+                    <span className="claude-code-tool badge">Ignoring {input.ignore.length} patterns</span>
+                )}
+            </div>
+        </>
+    );
+
+    const expandedContent = (
+        <div className="claude-code-tool details">
+            <div className="claude-code-tool detail-row">
+                <span className="claude-code-tool detail-label">Directory</span>
+                <code className="claude-code-tool detail-value">{input.path}</code>
+            </div>
+            {input.ignore && input.ignore.length > 0 && (
+                <div className="claude-code-tool detail-row">
+                    <span className="claude-code-tool detail-label">Ignored Patterns</span>
+                    <div className="claude-code-tool detail-value">
+                        {input.ignore.map((pattern, index) => (
+                            <code key={index} className="claude-code-tool ignore-pattern">
+                                {pattern}{index < input.ignore!.length - 1 ? ', ' : ''}
+                            </code>
+                        ))}
+                    </div>
+                </div>
+            )}
+            <div className="claude-code-tool detail-row">
+                <span className="claude-code-tool detail-label">Description</span>
+                <span className="claude-code-tool detail-value">
+                    List directory contents{input.ignore && input.ignore.length > 0
+                        ? ` (excluding ${input.ignore.length} pattern${input.ignore.length > 1 ? 's' : ''})`
+                        : ''}
+                </span>
+            </div>
+        </div>
+    );
+
+    return (
+        <CollapsibleToolRenderer
+            compactHeader={compactHeader}
+            expandedContent={expandedContent}
+        />
+    );
+};