@theia/ai-codex 1.67.0-next.56

package/src/browser/renderers/command-execution-renderer.tsx

@@ -0,0 +1,104 @@
+// *****************************************************************************
+// 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 { ChatResponseContent } from '@theia/ai-chat';
+import { ChatResponsePartRenderer } from '@theia/ai-chat-ui/lib/browser/chat-response-part-renderer';
+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 type { CommandExecutionItem } from '@openai/codex-sdk';
+import { CodexToolCallChatResponseContent } from '../codex-tool-call-content';
+import { nls } from '@theia/core';
+
+@injectable()
+export class CommandExecutionRenderer implements ChatResponsePartRenderer<CodexToolCallChatResponseContent> {
+    canHandle(response: ChatResponseContent): number {
+        return response.kind === 'toolCall' &&
+            (response as CodexToolCallChatResponseContent).name === 'command_execution'
+            ? 100
+            : 0;
+    }
+
+    render(content: CodexToolCallChatResponseContent): ReactNode {
+        let item: CommandExecutionItem | undefined;
+
+        if (content.result) {
+            try {
+                item = typeof content.result === 'string'
+                    ? JSON.parse(content.result)
+                    : content.result as CommandExecutionItem;
+            } catch (error) {
+                console.error('Failed to parse command execution result:', error);
+                return undefined;
+            }
+        }
+
+        if (!item) {
+            const args = content.arguments ? JSON.parse(content.arguments) : {};
+            return <CommandExecutionInProgressComponent command={args.command || 'executing...'} />;
+        }
+
+        return <CommandExecutionComponent item={item} />;
+    }
+}
+
+const CommandExecutionInProgressComponent: React.FC<{
+    command: string;
+}> = ({ command }) => (
+    <div className="codex-command-execution">
+        <div className="codex-tool-header">
+            <span className={`${codicon('loading')} codex-tool-icon codex-loading`}></span>
+            <span className="codex-tool-name">{nls.localizeByDefault('Terminal')}</span>
+            <code className="codex-command-line">{command}</code>
+            <span className="codex-exit-code in-progress">
+                {nls.localize('theia/ai/codex/running', 'Running...')}
+            </span>
+        </div>
+    </div>
+);
+
+const CommandExecutionComponent: React.FC<{
+    item: CommandExecutionItem;
+}> = ({ item }) => {
+    const [isExpanded, setIsExpanded] = React.useState(false);
+    const success = item.exit_code === 0;
+
+    const hasOutput = item.aggregated_output && item.aggregated_output.trim().length > 0;
+
+    return (
+        <div className="codex-command-execution">
+            <div
+                className={`codex-tool-header${hasOutput ? ' expandable' : ''}`}
+                onClick={() => hasOutput && setIsExpanded(!isExpanded)}
+                style={{ cursor: hasOutput ? 'pointer' : 'default' }}
+            >
+                {hasOutput && (
+                    <span className={`${codicon(isExpanded ? 'chevron-down' : 'chevron-right')} codex-expand-icon`} />
+                )}
+                <span className={`${codicon('terminal')} codex-tool-icon`}></span>
+                <span className="codex-tool-name">{nls.localizeByDefault('Terminal')}</span>
+                <code className="codex-command-line">{item.command}</code>
+                <span className={`codex-exit-code ${success ? 'success' : 'error'}`}>
+                    {nls.localize('theia/ai/codex/exitCode', 'Exit code: {0}', item.exit_code)}
+                </span>
+            </div>
+            {hasOutput && isExpanded && (
+                <pre className="codex-command-output">{item.aggregated_output}</pre>
+            )}
+        </div>
+    );
+};

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

@@ -0,0 +1,151 @@
+// *****************************************************************************
+// 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 } from '@theia/ai-chat/lib/common';
+import { codicon } from '@theia/core/lib/browser';
+import { nls } from '@theia/core';
+import { injectable } from '@theia/core/shared/inversify';
+import * as React from '@theia/core/shared/react';
+import { ReactNode } from '@theia/core/shared/react';
+import type { TodoListItem } from '@openai/codex-sdk';
+import { CodexToolCallChatResponseContent } from '../codex-tool-call-content';
+import { CollapsibleToolRenderer } from './collapsible-tool-renderer';
+
+@injectable()
+export class TodoListRenderer implements ChatResponsePartRenderer<CodexToolCallChatResponseContent> {
+
+    canHandle(response: ChatResponseContent): number {
+        return response.kind === 'toolCall' &&
+            (response as CodexToolCallChatResponseContent).name === 'todo_list'
+            ? 15
+            : 0;
+    }
+
+    render(content: CodexToolCallChatResponseContent, parentNode: ResponseNode): ReactNode {
+        let item: TodoListItem | undefined;
+
+        if (content.result) {
+            try {
+                item = typeof content.result === 'string'
+                    ? JSON.parse(content.result)
+                    : content.result as TodoListItem;
+            } catch (error) {
+                console.error('[TodoListRenderer] Failed to parse todo_list result:', error);
+            }
+        }
+
+        if (!item && content.arguments) {
+            try {
+                const args = JSON.parse(content.arguments);
+                if (args.items) {
+                    item = {
+                        id: args.id || 'unknown',
+                        type: 'todo_list',
+                        items: args.items
+                    };
+                }
+            } catch (error) {
+                console.error('[TodoListRenderer] Failed to parse todo_list arguments:', error);
+            }
+        }
+
+        if (!item) {
+            return undefined;
+        }
+
+        return <TodoListComponent item={item} />;
+    }
+}
+
+const TodoListComponent: React.FC<{ item: TodoListItem }> = ({ item }) => {
+    const items = item.items || [];
+    const completedCount = items.filter(todo => todo.completed).length;
+    const totalCount = items.length;
+
+    if (totalCount === 0) {
+        // Show empty state
+        return (
+            <div className="codex-tool container">
+                <div className="codex-tool header">
+                    <div className="codex-tool header-left">
+                        <span className="codex-tool title">{nls.localize('theia/ai/codex/todoList', 'Todo List')}</span>
+                        <span className={`${codicon('checklist')} codex-tool icon`} />
+                        <span className="codex-tool progress-text">
+                            {nls.localize('theia/ai/codex/loading', 'Loading...')}
+                        </span>
+                    </div>
+                    <div className="codex-tool header-right">
+                        <span className="codex-tool badge">
+                            {nls.localize('theia/ai/codex/noItems', 'No items')}
+                        </span>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    const compactHeader = (
+        <>
+            <div className="codex-tool header-left">
+                <span className="codex-tool title">{nls.localize('theia/ai/codex/todoList', 'Todo List')}</span>
+                <span className={`${codicon('checklist')} codex-tool icon`} />
+                <span className="codex-tool progress-text">
+                    {nls.localize('theia/ai/codex/completedCount', '{0}/{1} completed', completedCount, totalCount)}
+                </span>
+            </div>
+            <div className="codex-tool header-right">
+                <span className="codex-tool badge">
+                    {totalCount === 1
+                        ? nls.localize('theia/ai/codex/oneItem', '1 item')
+                        : nls.localize('theia/ai/codex/itemCount', '{0} items', totalCount)}
+                </span>
+            </div>
+        </>
+    );
+
+    const expandedContent = (
+        <div className="codex-tool details">
+            <div className="codex-tool todo-list-items">
+                {items.map((todo, index) => {
+                    const statusIcon = todo.completed
+                        ? <span className={`${codicon('check')} codex-tool todo-status-icon completed`} />
+                        : <span className={`${codicon('circle-outline')} codex-tool todo-status-icon pending`} />;
+
+                    return (
+                        <div key={index} className={`codex-tool todo-item ${todo.completed ? 'status-completed' : 'status-pending'}`}>
+                            <div className="codex-tool todo-item-main">
+                                <div className="codex-tool todo-item-status">{statusIcon}</div>
+                                <div className="codex-tool todo-item-content">
+                                    <span className="codex-tool todo-item-text">{todo.text}</span>
+                                </div>
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+
+    return (
+        <CollapsibleToolRenderer
+            compactHeader={compactHeader}
+            expandedContent={expandedContent}
+            defaultExpanded={true}
+        />
+    );
+};

package/src/browser/renderers/web-search-renderer.tsx

@@ -0,0 +1,88 @@
+// *****************************************************************************
+// 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 { ChatResponseContent } from '@theia/ai-chat/lib/common';
+import { codicon } from '@theia/core/lib/browser';
+import { nls } from '@theia/core';
+import { injectable } from '@theia/core/shared/inversify';
+import * as React from '@theia/core/shared/react';
+import { ReactNode } from '@theia/core/shared/react';
+import type { WebSearchItem } from '@openai/codex-sdk';
+import { CodexToolCallChatResponseContent } from '../codex-tool-call-content';
+
+@injectable()
+export class WebSearchRenderer implements ChatResponsePartRenderer<CodexToolCallChatResponseContent> {
+
+    canHandle(response: ChatResponseContent): number {
+        return response.kind === 'toolCall' &&
+            (response as CodexToolCallChatResponseContent).name === 'web_search'
+            ? 15
+            : 0;
+    }
+
+    render(content: CodexToolCallChatResponseContent): ReactNode {
+        let item: WebSearchItem | undefined;
+
+        if (content.result) {
+            try {
+                item = typeof content.result === 'string'
+                    ? JSON.parse(content.result)
+                    : content.result as WebSearchItem;
+            } catch (error) {
+                console.error('Failed to parse web_search result:', error);
+                return undefined;
+            }
+        }
+
+        if (!item) {
+            const args = content.arguments ? JSON.parse(content.arguments) : {};
+            return <WebSearchInProgressComponent query={args.query || ''} />;
+        }
+
+        return <WebSearchCompletedComponent item={item} />;
+    }
+}
+
+const WebSearchInProgressComponent: React.FC<{ query: string }> = ({ query }) => (
+    <div className="codex-tool container">
+        <div className="codex-tool header">
+            <div className="codex-tool header-left">
+                <span className="codex-tool title">{nls.localize('theia/ai/codex/searching', 'Searching')}</span>
+                <span className={`${codicon('loading')} codex-tool icon theia-animation-spin`} />
+                <span className="codex-tool command">{query}</span>
+            </div>
+            <div className="codex-tool header-right">
+                <span className="codex-tool badge">{nls.localize('theia/ai/codex/webSearch', 'Web Search')}</span>
+            </div>
+        </div>
+    </div>
+);
+
+const WebSearchCompletedComponent: React.FC<{ item: WebSearchItem }> = ({ item }) => (
+    <div className="codex-tool container">
+        <div className="codex-tool header">
+            <div className="codex-tool header-left">
+                <span className="codex-tool title">{nls.localize('theia/ai/codex/searched', 'Searched')}</span>
+                <span className={`${codicon('globe')} codex-tool icon`} />
+                <span className="codex-tool command">{item.query}</span>
+            </div>
+            <div className="codex-tool header-right">
+                <span className="codex-tool badge">{nls.localize('theia/ai/codex/webSearch', 'Web Search')}</span>
+            </div>
+        </div>
+    </div>
+);