@theia/ai-codex 1.67.0-next.56

package/src/browser/codex-frontend-module.ts

@@ -0,0 +1,61 @@
+// *****************************************************************************
+// 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 { ChatAgent } from '@theia/ai-chat';
+import { ChatResponsePartRenderer } from '@theia/ai-chat-ui/lib/browser/chat-response-part-renderer';
+import { Agent } from '@theia/ai-core';
+import { PreferenceContribution } from '@theia/core';
+import { RemoteConnectionProvider, ServiceConnectionProvider } from '@theia/core/lib/browser';
+import { ContainerModule } from '@theia/core/shared/inversify';
+import {
+    CODEX_SERVICE_PATH,
+    CodexClient,
+    CodexService
+} from '../common/codex-service';
+import { CodexPreferencesSchema } from '../common/codex-preferences';
+import { CodexChatAgent } from './codex-chat-agent';
+import { CodexClientImpl, CodexFrontendService } from './codex-frontend-service';
+import { CommandExecutionRenderer } from './renderers/command-execution-renderer';
+import { TodoListRenderer } from './renderers/todo-list-renderer';
+import { WebSearchRenderer } from './renderers/web-search-renderer';
+import '../../src/browser/style/codex-tool-renderers.css';
+
+export default new ContainerModule(bind => {
+    bind(PreferenceContribution).toConstantValue({ schema: CodexPreferencesSchema });
+
+    bind(CodexFrontendService).toSelf().inSingletonScope();
+    bind(CodexClientImpl).toSelf().inSingletonScope();
+    bind(CodexClient).toService(CodexClientImpl);
+
+    bind(CodexService).toDynamicValue(ctx => {
+        const connection = ctx.container.get<ServiceConnectionProvider>(RemoteConnectionProvider);
+        const backendClient: CodexClient = ctx.container.get(CodexClient);
+        return connection.createProxy(CODEX_SERVICE_PATH, backendClient);
+    }).inSingletonScope();
+
+    bind(CodexChatAgent).toSelf().inSingletonScope();
+    bind(Agent).toService(CodexChatAgent);
+    bind(ChatAgent).toService(CodexChatAgent);
+
+    bind(CommandExecutionRenderer).toSelf().inSingletonScope();
+    bind(ChatResponsePartRenderer).toService(CommandExecutionRenderer);
+
+    bind(TodoListRenderer).toSelf().inSingletonScope();
+    bind(ChatResponsePartRenderer).toService(TodoListRenderer);
+
+    bind(WebSearchRenderer).toSelf().inSingletonScope();
+    bind(ChatResponsePartRenderer).toService(WebSearchRenderer);
+});

package/src/browser/codex-frontend-service.spec.ts

@@ -0,0 +1,245 @@
+// *****************************************************************************
+// 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 { enableJSDOM } from '@theia/core/lib/browser/test/jsdom';
+let disableJSDOM = enableJSDOM();
+import { FrontendApplicationConfigProvider } from '@theia/core/lib/browser/frontend-application-config-provider';
+FrontendApplicationConfigProvider.set({});
+import * as path from 'path';
+
+import { expect } from 'chai';
+import * as sinon from 'sinon';
+import { Container, interfaces } from '@theia/core/shared/inversify';
+import { PreferenceService } from '@theia/core';
+import { WorkspaceService } from '@theia/workspace/lib/browser';
+import { URI } from '@theia/core/lib/common/uri';
+import { CODEX_API_KEY_PREF, CodexService, CodexBackendRequest } from '../common';
+import { API_KEY_PREF } from '@theia/ai-openai/lib/common/openai-preferences';
+
+import type { CodexFrontendService, CodexClientImpl } from './codex-frontend-service';
+
+disableJSDOM();
+
+describe('CodexFrontendService', () => {
+    let container: Container;
+    let CodexFrontendServiceConstructor: interfaces.Newable<CodexFrontendService>;
+    let CodexClientImplConstructor: interfaces.Newable<CodexClientImpl>;
+    let mockPreferenceService: PreferenceService;
+    let mockBackendService: CodexService;
+
+    before(async () => {
+        disableJSDOM = enableJSDOM();
+
+        const serviceModule = await import('./codex-frontend-service');
+        CodexFrontendServiceConstructor = serviceModule.CodexFrontendService;
+        CodexClientImplConstructor = serviceModule.CodexClientImpl;
+    });
+
+    beforeEach(() => {
+        container = new Container();
+
+        mockPreferenceService = {
+            get: sinon.stub()
+        } as unknown as PreferenceService;
+
+        mockBackendService = {
+            send: sinon.stub<[CodexBackendRequest, string], Promise<void>>().resolves(),
+            cancel: sinon.stub<[string], void>()
+        };
+
+        const mockWorkspaceService = {
+            roots: Promise.resolve([{ resource: new URI('file:///test/workspace') }])
+        } as WorkspaceService;
+
+        container.bind(PreferenceService).toConstantValue(mockPreferenceService);
+        container.bind(CodexService).toConstantValue(mockBackendService);
+        container.bind(WorkspaceService).toConstantValue(mockWorkspaceService);
+        container.bind(CodexClientImplConstructor).toSelf().inSingletonScope();
+        container.bind(CodexFrontendServiceConstructor).toSelf();
+    });
+
+    afterEach(() => {
+        sinon.restore();
+    });
+
+    after(() => {
+        disableJSDOM();
+    });
+
+    describe('API Key Preference Hierarchy', () => {
+        it('should prioritize Codex-specific API key over shared OpenAI key', async () => {
+            (mockPreferenceService.get as sinon.SinonStub).withArgs(CODEX_API_KEY_PREF).returns('codex-key-123');
+            (mockPreferenceService.get as sinon.SinonStub).withArgs(API_KEY_PREF).returns('openai-key-456');
+
+            const service = container.get<CodexFrontendService>(CodexFrontendServiceConstructor);
+            await service.send({ prompt: 'test', sessionId: 'session-1' });
+
+            expect((mockBackendService.send as sinon.SinonStub).calledOnce).to.be.true;
+            const backendRequest = (mockBackendService.send as sinon.SinonStub).firstCall.args[0];
+            expect(backendRequest.apiKey).to.equal('codex-key-123');
+        });
+
+        it('should fall back to shared OpenAI API key when Codex key not set', async () => {
+            (mockPreferenceService.get as sinon.SinonStub).withArgs(CODEX_API_KEY_PREF).returns(undefined);
+            (mockPreferenceService.get as sinon.SinonStub).withArgs(API_KEY_PREF).returns('openai-key-456');
+
+            const service = container.get<CodexFrontendService>(CodexFrontendServiceConstructor);
+            await service.send({ prompt: 'test', sessionId: 'session-1' });
+
+            const backendRequest = (mockBackendService.send as sinon.SinonStub).firstCall.args[0];
+            expect(backendRequest.apiKey).to.equal('openai-key-456');
+        });
+
+        it('should return undefined when neither key is set', async () => {
+            (mockPreferenceService.get as sinon.SinonStub).withArgs(CODEX_API_KEY_PREF).returns(undefined);
+            (mockPreferenceService.get as sinon.SinonStub).withArgs(API_KEY_PREF).returns(undefined);
+
+            const service = container.get<CodexFrontendService>(CodexFrontendServiceConstructor);
+            await service.send({ prompt: 'test', sessionId: 'session-1' });
+
+            const backendRequest = (mockBackendService.send as sinon.SinonStub).firstCall.args[0];
+            expect(backendRequest.apiKey).to.be.undefined;
+        });
+
+        it('should treat empty Codex key as not set', async () => {
+            (mockPreferenceService.get as sinon.SinonStub).withArgs(CODEX_API_KEY_PREF).returns('');
+            (mockPreferenceService.get as sinon.SinonStub).withArgs(API_KEY_PREF).returns('openai-key-456');
+
+            const service = container.get<CodexFrontendService>(CodexFrontendServiceConstructor);
+            await service.send({ prompt: 'test', sessionId: 'session-1' });
+
+            const backendRequest = (mockBackendService.send as sinon.SinonStub).firstCall.args[0];
+            expect(backendRequest.apiKey).to.equal('openai-key-456');
+        });
+
+        it('should treat whitespace-only Codex key as not set', async () => {
+            (mockPreferenceService.get as sinon.SinonStub).withArgs(CODEX_API_KEY_PREF).returns('   ');
+            (mockPreferenceService.get as sinon.SinonStub).withArgs(API_KEY_PREF).returns('openai-key-456');
+
+            const service = container.get<CodexFrontendService>(CodexFrontendServiceConstructor);
+            await service.send({ prompt: 'test', sessionId: 'session-1' });
+
+            const backendRequest = (mockBackendService.send as sinon.SinonStub).firstCall.args[0];
+            expect(backendRequest.apiKey).to.equal('openai-key-456');
+        });
+
+        it('should treat empty OpenAI key as not set', async () => {
+            (mockPreferenceService.get as sinon.SinonStub).withArgs(CODEX_API_KEY_PREF).returns(undefined);
+            (mockPreferenceService.get as sinon.SinonStub).withArgs(API_KEY_PREF).returns('');
+
+            const service = container.get<CodexFrontendService>(CodexFrontendServiceConstructor);
+            await service.send({ prompt: 'test', sessionId: 'session-1' });
+
+            const backendRequest = (mockBackendService.send as sinon.SinonStub).firstCall.args[0];
+            expect(backendRequest.apiKey).to.be.undefined;
+        });
+
+        it('should treat whitespace-only OpenAI key as not set', async () => {
+            (mockPreferenceService.get as sinon.SinonStub).withArgs(CODEX_API_KEY_PREF).returns(undefined);
+            (mockPreferenceService.get as sinon.SinonStub).withArgs(API_KEY_PREF).returns('   ');
+
+            const service = container.get<CodexFrontendService>(CodexFrontendServiceConstructor);
+            await service.send({ prompt: 'test', sessionId: 'session-1' });
+
+            const backendRequest = (mockBackendService.send as sinon.SinonStub).firstCall.args[0];
+            expect(backendRequest.apiKey).to.be.undefined;
+        });
+    });
+
+    describe('Sandbox Mode Configuration', () => {
+        beforeEach(() => {
+            (mockPreferenceService.get as sinon.SinonStub).withArgs(CODEX_API_KEY_PREF).returns('test-key');
+        });
+
+        it('should default to workspace-write when no sandboxMode is provided in request', async () => {
+            const service = container.get<CodexFrontendService>(CodexFrontendServiceConstructor);
+            await service.send({ prompt: 'test', sessionId: 'session-1' });
+
+            const backendRequest = (mockBackendService.send as sinon.SinonStub).firstCall.args[0];
+            expect(backendRequest.options?.sandboxMode).to.equal('workspace-write');
+        });
+
+        it('should use sandboxMode from request when provided', async () => {
+            const service = container.get<CodexFrontendService>(CodexFrontendServiceConstructor);
+            await service.send({ prompt: 'test', sessionId: 'session-1', sandboxMode: 'read-only' });
+
+            const backendRequest = (mockBackendService.send as sinon.SinonStub).firstCall.args[0];
+            expect(backendRequest.options?.sandboxMode).to.equal('read-only');
+        });
+
+        it('should use danger-full-access when provided in request', async () => {
+            const service = container.get<CodexFrontendService>(CodexFrontendServiceConstructor);
+            await service.send({ prompt: 'test', sessionId: 'session-1', sandboxMode: 'danger-full-access' });
+
+            const backendRequest = (mockBackendService.send as sinon.SinonStub).firstCall.args[0];
+            expect(backendRequest.options?.sandboxMode).to.equal('danger-full-access');
+        });
+
+        it('should default to workspace-write when request sandboxMode is undefined', async () => {
+            const service = container.get<CodexFrontendService>(CodexFrontendServiceConstructor);
+            await service.send({ prompt: 'test', sessionId: 'session-1', sandboxMode: undefined });
+
+            const backendRequest = (mockBackendService.send as sinon.SinonStub).firstCall.args[0];
+            expect(backendRequest.options?.sandboxMode).to.equal('workspace-write');
+        });
+    });
+
+    describe('Request Building', () => {
+        beforeEach(() => {
+            (mockPreferenceService.get as sinon.SinonStub).withArgs(CODEX_API_KEY_PREF).returns('test-key');
+        });
+
+        it('should include workspace root in request', async () => {
+            const service = container.get<CodexFrontendService>(CodexFrontendServiceConstructor);
+            await service.send({ prompt: 'test prompt', sessionId: 'session-1' });
+
+            const backendRequest = (mockBackendService.send as sinon.SinonStub).firstCall.args[0];
+            const expectedPath = path.join('test', 'workspace');
+            expect(backendRequest.options?.workingDirectory).to.include(expectedPath);
+        });
+
+        it('should pass prompt to backend', async () => {
+            const service = container.get<CodexFrontendService>(CodexFrontendServiceConstructor);
+            await service.send({ prompt: 'my test prompt', sessionId: 'session-1' });
+
+            const backendRequest = (mockBackendService.send as sinon.SinonStub).firstCall.args[0];
+            expect(backendRequest.prompt).to.equal('my test prompt');
+        });
+
+        it('should pass sessionId to backend', async () => {
+            const service = container.get<CodexFrontendService>(CodexFrontendServiceConstructor);
+            await service.send({ prompt: 'test', sessionId: 'my-session-123' });
+
+            const backendRequest = (mockBackendService.send as sinon.SinonStub).firstCall.args[0];
+            expect(backendRequest.sessionId).to.equal('my-session-123');
+        });
+
+        it('should merge custom options with defaults', async () => {
+            const service = container.get<CodexFrontendService>(CodexFrontendServiceConstructor);
+            await service.send({
+                prompt: 'test',
+                sessionId: 'session-1',
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                options: { customOption: 'value' } as any // Testing dynamic options extension
+            });
+
+            const backendRequest = (mockBackendService.send as sinon.SinonStub).firstCall.args[0];
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            expect((backendRequest.options as any)?.customOption).to.equal('value'); // Accessing dynamic test property
+            expect(backendRequest.options?.sandboxMode).to.equal('workspace-write');
+        });
+    });
+});

package/src/browser/codex-frontend-service.ts

@@ -0,0 +1,221 @@
+// *****************************************************************************
+// 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 { inject, injectable } from '@theia/core/shared/inversify';
+import { CancellationToken, generateUuid, PreferenceService } from '@theia/core';
+import { FileUri } from '@theia/core/lib/common/file-uri';
+import { WorkspaceService } from '@theia/workspace/lib/browser';
+import { API_KEY_PREF } from '@theia/ai-openai/lib/common/openai-preferences';
+import type { ThreadEvent } from '@openai/codex-sdk';
+import {
+    CodexClient,
+    CodexRequest,
+    CodexService,
+    CodexBackendRequest,
+    CODEX_API_KEY_PREF
+} from '../common';
+
+@injectable()
+export class CodexClientImpl implements CodexClient {
+    protected tokenHandlers = new Map<string, (token?: ThreadEvent) => void>();
+    protected errorHandlers = new Map<string, (error: Error) => void>();
+
+    /**
+     * `undefined` token signals end of stream per RPC protocol.
+     */
+    sendToken(streamId: string, token?: ThreadEvent): void {
+        const handler = this.tokenHandlers.get(streamId);
+        if (handler) {
+            handler(token);
+        }
+    }
+
+    sendError(streamId: string, error: Error): void {
+        const handler = this.errorHandlers.get(streamId);
+        if (handler) {
+            handler(error);
+        }
+    }
+
+    registerTokenHandler(streamId: string, handler: (token?: ThreadEvent) => 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: (ThreadEvent | undefined)[];
+    isComplete: boolean;
+    hasError: boolean;
+    error?: Error;
+    pendingResolve?: () => void;
+    pendingReject?: (error: Error) => void;
+}
+
+@injectable()
+export class CodexFrontendService {
+
+    @inject(CodexService)
+    protected readonly backendService: CodexService;
+
+    @inject(CodexClientImpl)
+    protected readonly client: CodexClientImpl;
+
+    @inject(PreferenceService)
+    protected readonly preferenceService: PreferenceService;
+
+    @inject(WorkspaceService)
+    protected readonly workspaceService: WorkspaceService;
+
+    protected streams = new Map<string, StreamState>();
+
+    async send(request: CodexRequest, cancellationToken?: CancellationToken): Promise<AsyncIterable<ThreadEvent>> {
+        const streamState: StreamState = {
+            id: this.generateStreamId(),
+            tokens: [],
+            isComplete: false,
+            hasError: false
+        };
+        this.streams.set(streamState.id, streamState);
+        this.setupStreamHandlers(streamState);
+
+        cancellationToken?.onCancellationRequested(() => {
+            this.backendService.cancel(streamState.id);
+            this.cleanup(streamState.id);
+        });
+
+        const apiKey = this.getApiKey();
+        const sandboxMode = request.sandboxMode ?? 'workspace-write';
+        const workingDirectory = await this.getWorkspaceRoot();
+
+        const backendRequest: CodexBackendRequest = {
+            prompt: request.prompt,
+            options: {
+                workingDirectory,
+                ...request.options,
+                sandboxMode
+            },
+            apiKey,
+            sessionId: request.sessionId
+        };
+
+        await this.backendService.send(backendRequest, streamState.id);
+
+        return this.createAsyncIterable(streamState);
+    }
+
+    protected generateStreamId(): string {
+        return generateUuid();
+    }
+
+    protected setupStreamHandlers(streamState: StreamState): void {
+        this.client.registerTokenHandler(streamState.id, (token?: ThreadEvent) => {
+            if (token === undefined) {
+                streamState.isComplete = true;
+            } else {
+                streamState.tokens.push(token);
+            }
+
+            if (streamState.pendingResolve) {
+                streamState.pendingResolve();
+                streamState.pendingResolve = undefined;
+            }
+        });
+
+        this.client.registerErrorHandler(streamState.id, (error: Error) => {
+            streamState.hasError = true;
+            streamState.error = error;
+
+            if (streamState.pendingReject) {
+                streamState.pendingReject(error);
+                streamState.pendingReject = undefined;
+            }
+        });
+    }
+
+    protected async *createAsyncIterable(streamState: StreamState): AsyncIterable<ThreadEvent> {
+        let currentIndex = 0;
+
+        while (true) {
+            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) {
+                this.cleanup(streamState.id);
+                throw streamState.error;
+            }
+
+            await new Promise<void>((resolve, reject) => {
+                streamState.pendingResolve = resolve;
+                streamState.pendingReject = reject;
+            });
+        }
+
+        this.cleanup(streamState.id);
+    }
+
+    protected cleanup(streamId: string): void {
+        this.client.unregisterHandlers(streamId);
+        this.streams.delete(streamId);
+    }
+
+    /**
+     * Fallback hierarchy:
+     * 1. Codex-specific API key (highest priority)
+     * 2. Shared OpenAI API key
+     * 3. undefined (backend will check OPENAI_API_KEY env var)
+     */
+    protected getApiKey(): string | undefined {
+        const codexKey = this.preferenceService.get<string>(CODEX_API_KEY_PREF);
+        if (codexKey && codexKey.trim()) {
+            return codexKey;
+        }
+
+        const openaiKey = this.preferenceService.get<string>(API_KEY_PREF);
+        if (openaiKey && openaiKey.trim()) {
+            return openaiKey;
+        }
+
+        return undefined;
+    }
+
+    protected async getWorkspaceRoot(): Promise<string | undefined> {
+        const roots = await this.workspaceService.roots;
+        if (roots && roots.length > 0) {
+            return FileUri.fsPath(roots[0].resource.toString());
+        }
+        return undefined;
+    }
+}

package/src/browser/codex-tool-call-content.ts

@@ -0,0 +1,42 @@
+// *****************************************************************************
+// 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 CodexToolCallChatResponseContent extends ToolCallChatResponseContentImpl {
+    static readonly type = 'codex-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 CodexToolCallChatResponseContent {
+        return content instanceof CodexToolCallChatResponseContent;
+    }
+
+    update(args?: string, finished?: boolean, result?: ToolCallResult): void {
+        if (args !== undefined) {
+            this._arguments = args;
+        }
+        if (finished !== undefined) {
+            this._finished = finished;
+        }
+        if (result !== undefined) {
+            this._result = result;
+        }
+    }
+}

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

@@ -0,0 +1,75 @@
+// *****************************************************************************
+// 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) => {
+        const target = event.target as HTMLElement;
+        if (target.closest('.clickable-element')) {
+            onHeaderClick?.();
+            return;
+        }
+
+        if (hasExpandableContent) {
+            setIsExpanded(!isExpanded);
+        }
+        onHeaderClick?.();
+    };
+
+    return (
+        <div className="codex-tool container">
+            <div
+                className={`codex-tool header${hasExpandableContent ? ' expandable' : ''}`}
+                onClick={handleHeaderClick}
+                style={{
+                    cursor: hasExpandableContent || onHeaderClick ? 'pointer' : 'default',
+                    ...headerStyle
+                }}
+            >
+                {hasExpandableContent && (
+                    <span className={`${codicon(isExpanded ? 'chevron-down' : 'chevron-right')} codex-tool expand-icon`} />
+                )}
+                {compactHeader}
+            </div>
+            {hasExpandableContent && isExpanded && (
+                <div className="codex-tool expanded-content">
+                    {expandedContent}
+                </div>
+            )}
+        </div>
+    );
+};