@theia/ai-claude-code 1.65.0

package/src/browser/claude-code-frontend-service.ts

@@ -0,0 +1,215 @@
+// *****************************************************************************
+// 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 { CancellationToken, generateUuid, ILogger, PreferenceService } from '@theia/core';
+import { FileUri } from '@theia/core/lib/common/file-uri';
+import { inject, injectable, LazyServiceIdentifier } from '@theia/core/shared/inversify';
+import {
+    OutputChannel,
+    OutputChannelManager,
+    OutputChannelSeverity
+} from '@theia/output/lib/browser/output-channel';
+import { WorkspaceService } from '@theia/workspace/lib/browser';
+import {
+    ClaudeCodeClient,
+    ClaudeCodeOptions,
+    ClaudeCodeRequest,
+    ClaudeCodeService,
+    SDKMessage,
+    StreamMessage,
+    ToolApprovalResponseMessage
+} from '../common/claude-code-service';
+import { CLAUDE_CODE_EXECUTABLE_PATH_PREF } from '../common/claude-code-preferences';
+
+export const API_KEY_PREF = 'ai-features.anthropic.AnthropicApiKey';
+
+@injectable()
+export class ClaudeCodeClientImpl implements ClaudeCodeClient {
+    protected tokenHandlers = new Map<string, (token?: StreamMessage) => void>();
+    protected errorHandlers = new Map<string, (error: Error) => void>();
+
+    // invoked by the backend
+    sendToken(streamId: string, token?: StreamMessage): void {
+        const handler = this.tokenHandlers.get(streamId);
+        if (handler) {
+            handler(token);
+        }
+    }
+
+    // invoked by the backend
+    sendError(streamId: string, error: Error): void {
+        const handler = this.errorHandlers.get(streamId);
+        if (handler) {
+            handler(error);
+        }
+    }
+
+    registerTokenHandler(streamId: string, handler: (token?: StreamMessage) => void): void {
+        this.tokenHandlers.set(streamId, handler);
+    }
+
+    registerErrorHandler(streamId: string, handler: (error: Error) => void): void {
+        this.errorHandlers.set(streamId, handler);
+    }
+
+    unregisterHandlers(streamId: string): void {
+        this.tokenHandlers.delete(streamId);
+        this.errorHandlers.delete(streamId);
+    }
+}
+
+interface StreamState {
+    id: string;
+    tokens: (StreamMessage | undefined)[];
+    isComplete: boolean;
+    hasError: boolean;
+    error?: Error;
+    pendingResolve?: () => void;
+    pendingReject?: (error: Error) => void;
+}
+
+@injectable()
+export class ClaudeCodeFrontendService {
+
+    @inject(ClaudeCodeService)
+    protected claudeCodeBackendService: ClaudeCodeService;
+
+    @inject(new LazyServiceIdentifier(() => ClaudeCodeClientImpl))
+    protected client: ClaudeCodeClientImpl;
+
+    @inject(WorkspaceService)
+    protected readonly workspaceService: WorkspaceService;
+
+    @inject(PreferenceService)
+    protected preferenceService: PreferenceService;
+
+    @inject(OutputChannelManager)
+    protected readonly outputChannelManager: OutputChannelManager;
+
+    @inject(ILogger)
+    protected logger: ILogger;
+
+    protected streams = new Map<string, StreamState>();
+
+    async send(request: ClaudeCodeRequest, cancellationToken?: CancellationToken): Promise<AsyncIterable<StreamMessage>> {
+        const streamState: StreamState = {
+            id: this.generateStreamId(),
+            tokens: [],
+            isComplete: false,
+            hasError: false
+        };
+        this.streams.set(streamState.id, streamState);
+        this.setupStreamHandlers(streamState);
+
+        cancellationToken?.onCancellationRequested(() => this.claudeCodeBackendService.cancel(streamState.id));
+
+        const roots = await this.workspaceService.roots;
+        const rootsUris = roots.map(root => FileUri.fsPath(root.resource.toString()));
+
+        const prompt = request.prompt;
+        const apiKey = this.preferenceService.get<string>(API_KEY_PREF, undefined);
+        const claudeCodePath = this.preferenceService.get<string>(CLAUDE_CODE_EXECUTABLE_PATH_PREF, undefined);
+        this.getOutputChannel()?.appendLine(JSON.stringify(request, undefined, 2));
+
+        await this.claudeCodeBackendService.send({
+            prompt,
+            apiKey,
+            claudeCodePath,
+            options: <ClaudeCodeOptions>{
+                cwd: rootsUris[0],
+                ...request.options
+            }
+        }, streamState.id);
+
+        return this.createAsyncIterable(streamState);
+    }
+
+    protected generateStreamId(): string {
+        return generateUuid();
+    }
+
+    protected setupStreamHandlers(streamState: StreamState): void {
+        this.client.registerTokenHandler(streamState.id, (token?: SDKMessage) => {
+            if (token === undefined) {
+                streamState.isComplete = true;
+            } else {
+                this.getOutputChannel()?.appendLine(JSON.stringify(token, undefined, 2));
+                streamState.tokens.push(token);
+            }
+
+            // Resolve any pending iterator
+            if (streamState.pendingResolve) {
+                streamState.pendingResolve();
+                streamState.pendingResolve = undefined;
+            }
+        });
+
+        this.client.registerErrorHandler(streamState.id, (error: Error) => {
+            streamState.hasError = true;
+            streamState.error = error;
+            this.getOutputChannel()?.appendLine(JSON.stringify(error, undefined, 2), OutputChannelSeverity.Error);
+
+            // Reject any pending iterator
+            if (streamState.pendingReject) {
+                streamState.pendingReject(error);
+                streamState.pendingReject = undefined;
+            }
+        });
+    }
+
+    protected async *createAsyncIterable(streamState: StreamState): AsyncIterable<StreamMessage> {
+        let currentIndex = 0;
+
+        while (true) {
+            // Check for available tokens
+            if (currentIndex < streamState.tokens.length) {
+                const token = streamState.tokens[currentIndex];
+                currentIndex++;
+                if (token !== undefined) {
+                    yield token;
+                }
+                continue;
+            }
+
+            if (streamState.isComplete) {
+                break;
+            }
+            if (streamState.hasError && streamState.error) {
+                throw streamState.error;
+            }
+
+            // Wait for next token
+            await new Promise<void>((resolve, reject) => {
+                streamState.pendingResolve = resolve;
+                streamState.pendingReject = reject;
+            });
+        }
+
+        // Cleanup
+        this.client.unregisterHandlers(streamState.id);
+        this.streams.delete(streamState.id);
+    }
+
+    sendApprovalResponse(response: ToolApprovalResponseMessage): void {
+        this.getOutputChannel()?.appendLine(JSON.stringify(response, undefined, 2));
+        this.claudeCodeBackendService.handleApprovalResponse(response);
+    }
+
+    protected getOutputChannel(): OutputChannel | undefined {
+        return this.outputChannelManager.getChannel('Claude Code');
+    }
+
+}

package/src/browser/claude-code-slash-commands-contribution.ts

@@ -0,0 +1,175 @@
+// *****************************************************************************
+// 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 { CHAT_VIEW_LANGUAGE_ID } from '@theia/ai-chat-ui/lib/browser/chat-view-language-contribution';
+import { URI } from '@theia/core';
+import { FrontendApplicationContribution } from '@theia/core/lib/browser';
+import { ContextKeyService } from '@theia/core/lib/browser/context-key-service';
+import { inject, injectable } from '@theia/core/shared/inversify';
+import { FileService } from '@theia/filesystem/lib/browser/file-service';
+import * as monaco from '@theia/monaco-editor-core';
+import { WorkspaceService } from '@theia/workspace/lib/browser';
+import { CLAUDE_CHAT_AGENT_ID } from './claude-code-chat-agent';
+
+const CLAUDE_COMMANDS = '.claude/commands';
+
+interface StaticSlashCommand {
+    name: string;
+    description: string;
+}
+
+@injectable()
+export class ClaudeCodeSlashCommandsContribution implements FrontendApplicationContribution {
+
+    private readonly staticCommands: StaticSlashCommand[] = [
+        {
+            name: 'clear',
+            description: 'Create a new session',
+        },
+        {
+            name: 'compact',
+            description: 'Compact conversation with optional focus instructions',
+        },
+        {
+            name: 'config',
+            description: 'Open Claude Code Configuration',
+        },
+        {
+            name: 'init',
+            description: 'Initialize project with CLAUDE.md guide',
+        },
+        {
+            name: 'memory',
+            description: 'Edit CLAUDE.md memory file',
+        },
+        {
+            name: 'review',
+            description: 'Request code review',
+        },
+        {
+            name: 'resume',
+            description: 'Resume a session',
+        }
+    ];
+
+    @inject(ContextKeyService)
+    protected readonly contextKeyService: ContextKeyService;
+
+    @inject(WorkspaceService)
+    protected readonly workspaceService: WorkspaceService;
+
+    @inject(FileService)
+    protected readonly fileService: FileService;
+
+    onStart(): void {
+        monaco.languages.registerCompletionItemProvider(CHAT_VIEW_LANGUAGE_ID, {
+            triggerCharacters: ['/'],
+            provideCompletionItems: (model, position, _context, _token) =>
+                this.provideSlashCompletions(model, position),
+        });
+    }
+
+    protected async provideSlashCompletions(
+        model: monaco.editor.ITextModel,
+        position: monaco.Position
+    ): Promise<monaco.languages.CompletionList> {
+        const isClaudeCode = this.contextKeyService.match(`chatInputReceivingAgent == '${CLAUDE_CHAT_AGENT_ID}'`);
+        if (!isClaudeCode) {
+            return { suggestions: [] };
+        }
+
+        const completionRange = this.getCompletionRange(model, position, '/');
+        if (completionRange === undefined) {
+            return { suggestions: [] };
+        }
+
+        try {
+            const suggestions: monaco.languages.CompletionItem[] = [];
+
+            // Add static commands
+            this.staticCommands.forEach(command => {
+                suggestions.push({
+                    insertText: `${command.name} `,
+                    kind: monaco.languages.CompletionItemKind.Function,
+                    label: command.name,
+                    range: completionRange,
+                    detail: command.description
+                });
+            });
+
+            // Add dynamic commands from .claude/commands directory
+            const roots = this.workspaceService.tryGetRoots();
+            if (roots.length >= 1) {
+                const uri = roots[0].resource;
+                const claudeCommandsUri = uri.resolve(CLAUDE_COMMANDS);
+                const files = await this.listFilesDirectly(claudeCommandsUri);
+                const commands = files
+                    .filter(file => file.endsWith('.md'))
+                    .map(file => file.replace(/\.md$/, ''));
+
+                commands.forEach(commandName => {
+                    suggestions.push({
+                        insertText: `${commandName} `,
+                        kind: monaco.languages.CompletionItemKind.Function,
+                        label: commandName,
+                        range: completionRange,
+                        detail: `Claude command: ${commandName}`
+                    });
+                });
+            }
+
+            return { suggestions };
+        } catch (error) {
+            console.error('Error in Claude completion provider:', error);
+            return { suggestions: [] };
+        }
+    }
+
+    protected getCompletionRange(model: monaco.editor.ITextModel, position: monaco.Position, triggerCharacter: string): monaco.Range | undefined {
+        const wordInfo = model.getWordUntilPosition(position);
+        const lineContent = model.getLineContent(position.lineNumber);
+
+        // one to the left, and -1 for 0-based index
+        const characterBeforeCurrentWord = lineContent[wordInfo.startColumn - 1 - 1];
+        if (characterBeforeCurrentWord !== triggerCharacter) {
+            return undefined;
+        }
+
+        return new monaco.Range(
+            position.lineNumber,
+            wordInfo.startColumn,
+            position.lineNumber,
+            position.column
+        );
+    }
+
+    protected async listFilesDirectly(uri: URI): Promise<string[]> {
+        const result: string[] = [];
+        if (!await this.fileService.exists(uri)) {
+            return result;
+        }
+
+        const stat = await this.fileService.resolve(uri);
+        if (stat && stat.isDirectory && stat.children) {
+            for (const child of stat.children) {
+                result.push(child.resource.path.base);
+            }
+        }
+
+        return result;
+    }
+
+}

package/src/browser/claude-code-tool-call-content.ts

@@ -0,0 +1,30 @@
+// *****************************************************************************
+// 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 { ToolCallChatResponseContentImpl } from '@theia/ai-chat/lib/common';
+import { ToolCallResult } from '@theia/ai-core';
+
+export class ClaudeCodeToolCallChatResponseContent extends ToolCallChatResponseContentImpl {
+    static readonly type = 'claude-code-tool-call';
+
+    constructor(id?: string, name?: string, arg_string?: string, finished?: boolean, result?: ToolCallResult) {
+        super(id, name, arg_string, finished, result);
+    }
+
+    static is(content: unknown): content is ClaudeCodeToolCallChatResponseContent {
+        return content instanceof ClaudeCodeToolCallChatResponseContent;
+    }
+}

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

@@ -0,0 +1,97 @@
+// *****************************************************************************
+// 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 BashToolInput {
+    command: string;
+    description?: string;
+    timeout?: number;
+}
+
+@injectable()
+export class BashToolRenderer implements ChatResponsePartRenderer<ToolCallChatResponseContent> {
+
+    canHandle(response: ChatResponseContent): number {
+        if (ClaudeCodeToolCallChatResponseContent.is(response) && response.name === 'Bash') {
+            return 15; // Higher than default ToolCallPartRenderer (10)
+        }
+        return -1;
+    }
+
+    render(response: ToolCallChatResponseContent, parentNode: ResponseNode): ReactNode {
+        try {
+            const input = JSON.parse(response.arguments || '{}') as BashToolInput;
+            return <BashToolComponent input={input} />;
+        } catch (error) {
+            console.warn('Failed to parse Bash tool input:', error);
+            return <div className="claude-code-tool error">Failed to parse Bash tool data</div>;
+        }
+    }
+}
+
+const BashToolComponent: React.FC<{
+    input: BashToolInput;
+}> = ({ input }) => {
+    const compactHeader = (
+        <>
+            <div className="claude-code-tool header-left">
+                <span className="claude-code-tool title">Terminal</span>
+                <span className={`${codicon('terminal')} claude-code-tool icon`} />
+                <span className="claude-code-tool command">{input.command}</span>
+            </div>
+            <div className="claude-code-tool header-right">
+                {input.timeout && (
+                    <span className="claude-code-tool badge">Timeout: {input.timeout}ms</span>
+                )}
+            </div>
+        </>
+    );
+
+    const expandedContent = input.description ? (
+        <div className="claude-code-tool details">
+            <div className="claude-code-tool detail-row">
+                <span className="claude-code-tool detail-label">Command</span>
+                <code className="claude-code-tool detail-value">{input.command}</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">{input.description}</span>
+            </div>
+            {input.timeout && (
+                <div className="claude-code-tool detail-row">
+                    <span className="claude-code-tool detail-label">Timeout</span>
+                    <span className="claude-code-tool detail-value">{input.timeout}ms</span>
+                </div>
+            )}
+        </div>
+    ) : undefined;
+
+    return (
+        <CollapsibleToolRenderer
+            compactHeader={compactHeader}
+            expandedContent={expandedContent}
+        />
+    );
+};

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

@@ -0,0 +1,78 @@
+// *****************************************************************************
+// 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 { codicon } from '@theia/core/lib/browser';
+import * as React from '@theia/core/shared/react';
+import { ReactNode } from '@theia/core/shared/react';
+
+interface CollapsibleToolRendererProps {
+    compactHeader: ReactNode;
+    expandedContent?: ReactNode;
+    onHeaderClick?: () => void;
+    headerStyle?: React.CSSProperties;
+    defaultExpanded?: boolean;
+}
+
+export const CollapsibleToolRenderer: React.FC<CollapsibleToolRendererProps> = ({
+    compactHeader,
+    expandedContent,
+    onHeaderClick,
+    headerStyle,
+    defaultExpanded = false
+}) => {
+    const [isExpanded, setIsExpanded] = React.useState(defaultExpanded);
+
+    const hasExpandableContent = expandedContent !== undefined;
+
+    const handleHeaderClick = (event: React.MouseEvent) => {
+        // Check if the clicked element or any of its parents has the 'clickable' class
+        // If so, don't trigger collapse/expand behavior
+        const target = event.target as HTMLElement;
+        if (target.closest('.clickable-element')) {
+            onHeaderClick?.();
+            return;
+        }
+
+        // Normal header click behavior
+        if (hasExpandableContent) {
+            setIsExpanded(!isExpanded);
+        }
+        onHeaderClick?.();
+    };
+
+    return (
+        <div className="claude-code-tool container">
+            <div
+                className={`claude-code-tool header${hasExpandableContent ? ' expandable' : ''}`}
+                onClick={handleHeaderClick}
+                style={{
+                    cursor: hasExpandableContent || onHeaderClick ? 'pointer' : 'default',
+                    ...headerStyle
+                }}
+            >
+                {hasExpandableContent && (
+                    <span className={`${codicon(isExpanded ? 'chevron-down' : 'chevron-right')} claude-code-tool expand-icon`} />
+                )}
+                {compactHeader}
+            </div>
+            {hasExpandableContent && isExpanded && (
+                <div className="claude-code-tool expanded-content">
+                    {expandedContent}
+                </div>
+            )}
+        </div>
+    );
+};