@theia/ai-core 1.60.2 → 1.61.0

package/src/browser/ai-variable-uri-label-provider.ts

@@ -0,0 +1,66 @@
+// *****************************************************************************
+// Copyright (C) 2025 Eclipse GmbH and others.
+//
+// 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 { URI } from '@theia/core';
+import { LabelProvider, LabelProviderContribution } from '@theia/core/lib/browser';
+import { AI_VARIABLE_RESOURCE_SCHEME, AIVariableResourceResolver } from '../common/ai-variable-resource';
+import { AIVariableResolutionRequest, AIVariableService } from '../common/variable-service';
+
+@injectable()
+export class AIVariableUriLabelProvider implements LabelProviderContribution {
+
+    @inject(LabelProvider) protected readonly labelProvider: LabelProvider;
+    @inject(AIVariableResourceResolver) protected variableResourceResolver: AIVariableResourceResolver;
+    @inject(AIVariableService) protected readonly variableService: AIVariableService;
+
+    protected isMine(element: object): element is URI {
+        return element instanceof URI && element.scheme === AI_VARIABLE_RESOURCE_SCHEME;
+    }
+
+    canHandle(element: object): number {
+        return this.isMine(element) ? 150 : -1;
+    }
+
+    getIcon(element: object): string | undefined {
+        if (!this.isMine(element)) { return undefined; }
+        return this.labelProvider.getIcon(this.getResolutionRequest(element)!);
+    }
+
+    getName(element: object): string | undefined {
+        if (!this.isMine(element)) { return undefined; }
+        return this.labelProvider.getName(this.getResolutionRequest(element)!);
+    }
+
+    getLongName(element: object): string | undefined {
+        if (!this.isMine(element)) { return undefined; }
+        return this.labelProvider.getLongName(this.getResolutionRequest(element)!);
+    }
+
+    getDetails(element: object): string | undefined {
+        if (!this.isMine(element)) { return undefined; }
+        return this.labelProvider.getDetails(this.getResolutionRequest(element)!);
+    }
+
+    protected getResolutionRequest(element: object): AIVariableResolutionRequest | undefined {
+        if (!this.isMine(element)) { return undefined; }
+        const metadata = this.variableResourceResolver.fromUri(element);
+        if (!metadata) { return undefined; }
+        const { variableName, arg } = metadata;
+        const variable = this.variableService.getVariable(variableName);
+        return variable && { variable, arg };
+    }
+}

package/src/browser/file-variable-contribution.ts

@@ -15,7 +15,7 @@
 // *****************************************************************************
 
 import { Path, URI } from '@theia/core';
-import { codiconArray } from '@theia/core/lib/browser';
+import { OpenerService, codiconArray, open } from '@theia/core/lib/browser';
 import { inject, injectable } from '@theia/core/shared/inversify';
 import { FileService } from '@theia/filesystem/lib/browser/file-service';
 import { WorkspaceService } from '@theia/workspace/lib/browser/workspace-service';
@@ -23,11 +23,12 @@ import {
     AIVariable,
     AIVariableContext,
     AIVariableContribution,
+    AIVariableOpener,
     AIVariableResolutionRequest,
     AIVariableResolver,
-    AIVariableService,
     ResolvedAIContextVariable,
 } from '../common/variable-service';
+import { FrontendVariableService } from './frontend-variable-service';
 
 export namespace FileVariableArgs {
     export const uri = 'uri';
@@ -44,15 +45,19 @@ export const FILE_VARIABLE: AIVariable = {
 };
 
 @injectable()
-export class FileVariableContribution implements AIVariableContribution, AIVariableResolver {
+export class FileVariableContribution implements AIVariableContribution, AIVariableResolver, AIVariableOpener {
     @inject(FileService)
     protected readonly fileService: FileService;
 
     @inject(WorkspaceService)
     protected readonly wsService: WorkspaceService;
 
-    registerVariables(service: AIVariableService): void {
+    @inject(OpenerService)
+    protected readonly openerService: OpenerService;
+
+    registerVariables(service: FrontendVariableService): void {
         service.registerResolver(FILE_VARIABLE, this);
+        service.registerOpener(FILE_VARIABLE, this);
     }
 
     async canResolve(request: AIVariableResolutionRequest, _: AIVariableContext): Promise<number> {
@@ -60,21 +65,15 @@ export class FileVariableContribution implements AIVariableContribution, AIVaria
     }
 
     async resolve(request: AIVariableResolutionRequest, _: AIVariableContext): Promise<ResolvedAIContextVariable | undefined> {
-        if (request.variable.name !== FILE_VARIABLE.name || request.arg === undefined) {
-            return undefined;
-        }
+        const uri = await this.toUri(request);
 
-        const path = request.arg;
-        const absoluteUri = await this.makeAbsolute(path);
-        if (!absoluteUri) {
-            return undefined;
-        }
+        if (!uri) { return undefined; }
 
         try {
-            const content = await this.fileService.readFile(absoluteUri);
+            const content = await this.fileService.readFile(uri);
             return {
                 variable: request.variable,
-                value: await this.wsService.getWorkspaceRelativePath(absoluteUri),
+                value: await this.wsService.getWorkspaceRelativePath(uri),
                 contextValue: content.value.toString(),
             };
         } catch (error) {
@@ -82,6 +81,27 @@ export class FileVariableContribution implements AIVariableContribution, AIVaria
         }
     }
 
+    protected async toUri(request: AIVariableResolutionRequest): Promise<URI | undefined> {
+        if (request.variable.name !== FILE_VARIABLE.name || request.arg === undefined) {
+            return undefined;
+        }
+
+        const path = request.arg;
+        return this.makeAbsolute(path);
+    }
+
+    canOpen(request: AIVariableResolutionRequest, context: AIVariableContext): Promise<number> {
+        return this.canResolve(request, context);
+    }
+
+    async open(request: AIVariableResolutionRequest, context: AIVariableContext): Promise<void> {
+        const uri = await this.toUri(request);
+        if (!uri) {
+            throw new Error('Unable to resolve URI for request.');
+        }
+        await open(this.openerService, uri);
+    }
+
     protected async makeAbsolute(pathStr: string): Promise<URI | undefined> {
         const path = new Path(Path.normalizePathSeparator(pathStr));
         if (!path.isAbsolute) {

package/src/browser/frontend-prompt-customization-service.ts

@@ -519,46 +519,93 @@ export class FrontendPromptCustomizationServiceImpl implements PromptCustomizati
     }
 
     async getCustomAgents(): Promise<CustomAgentDescription[]> {
-        const customAgentYamlUri = (await this.getTemplatesDirectoryURI()).resolve('customAgents.yml');
+        const agentsById = new Map<string, CustomAgentDescription>();
+        // First, process additional (workspace) template directories to give them precedence
+        for (const dirPath of this.additionalTemplateDirs) {
+            const dirURI = URI.fromFilePath(dirPath);
+            await this.loadCustomAgentsFromDirectory(dirURI, agentsById);
+        }
+        // Then process global template directory (only adding agents that don't conflict)
+        const globalTemplateDir = await this.getTemplatesDirectoryURI();
+        await this.loadCustomAgentsFromDirectory(globalTemplateDir, agentsById);
+        // Return the merged list of agents
+        return Array.from(agentsById.values());
+    }
+
+    /**
+     * Load custom agents from a specific directory
+     * @param directoryURI The URI of the directory to load from
+     * @param agentsById Map to store the loaded agents by ID
+     */
+    protected async loadCustomAgentsFromDirectory(
+        directoryURI: URI,
+        agentsById: Map<string, CustomAgentDescription>
+    ): Promise<void> {
+        const customAgentYamlUri = directoryURI.resolve('customAgents.yml');
         const yamlExists = await this.fileService.exists(customAgentYamlUri);
         if (!yamlExists) {
-            return [];
+            return;
         }
-        const fileContent = await this.fileService.read(customAgentYamlUri, { encoding: 'utf-8' });
+
         try {
+            const fileContent = await this.fileService.read(customAgentYamlUri, { encoding: 'utf-8' });
             const doc = load(fileContent.value);
+
             if (!Array.isArray(doc) || !doc.every(entry => CustomAgentDescription.is(entry))) {
-                console.debug('Invalid customAgents.yml file content');
-                return [];
+                console.debug(`Invalid customAgents.yml file content in ${directoryURI.toString()}`);
+                return;
             }
+
             const readAgents = doc as CustomAgentDescription[];
-            // make sure all agents are unique (id and name)
-            const uniqueAgentIds = new Set<string>();
-            const uniqueAgents: CustomAgentDescription[] = [];
-            readAgents.forEach(agent => {
-                if (uniqueAgentIds.has(agent.id)) {
-                    return;
+
+            // Add agents to the map if they don't already exist
+            for (const agent of readAgents) {
+                if (!agentsById.has(agent.id)) {
+                    agentsById.set(agent.id, agent);
                 }
-                uniqueAgentIds.add(agent.id);
-                uniqueAgents.push(agent);
-            });
-            return uniqueAgents;
+            }
         } catch (e) {
-            console.debug(e.message, e);
-            return [];
+            console.debug(`Error loading customAgents.yml from ${directoryURI.toString()}: ${e.message}`, e);
         }
     }
 
-    async openCustomAgentYaml(): Promise<void> {
-        const customAgentYamlUri = (await this.getTemplatesDirectoryURI()).resolve('customAgents.yml');
+    /**
+     * Returns all locations of existing customAgents.yml files and potential locations where
+     * new customAgents.yml files could be created.
+     *
+     * @returns An array of objects containing the URI and whether the file exists
+     */
+    async getCustomAgentsLocations(): Promise<{ uri: URI, exists: boolean }[]> {
+        const locations: { uri: URI, exists: boolean }[] = [];
+        // Check global template directory
+        const globalTemplateDir = await this.getTemplatesDirectoryURI();
+        const globalAgentsUri = globalTemplateDir.resolve('customAgents.yml');
+        const globalExists = await this.fileService.exists(globalAgentsUri);
+        locations.push({ uri: globalAgentsUri, exists: globalExists });
+        // Check additional (workspace) template directories
+        for (const dirPath of this.additionalTemplateDirs) {
+            const dirURI = URI.fromFilePath(dirPath);
+            const agentsUri = dirURI.resolve('customAgents.yml');
+            const exists = await this.fileService.exists(agentsUri);
+            locations.push({ uri: agentsUri, exists: exists });
+        }
+        return locations;
+    }
+
+    /**
+     * Opens an existing customAgents.yml file at the given URI, or creates a new one if it doesn't exist.
+     *
+     * @param uri The URI of the customAgents.yml file to open or create
+     */
+    async openCustomAgentYaml(uri: URI): Promise<void> {
         const content = dump([templateEntry]);
-        if (! await this.fileService.exists(customAgentYamlUri)) {
-            await this.fileService.createFile(customAgentYamlUri, BinaryBuffer.fromString(content));
+        if (! await this.fileService.exists(uri)) {
+            await this.fileService.createFile(uri, BinaryBuffer.fromString(content));
         } else {
-            const fileContent = (await this.fileService.readFile(customAgentYamlUri)).value;
-            await this.fileService.writeFile(customAgentYamlUri, BinaryBuffer.concat([fileContent, BinaryBuffer.fromString(content)]));
+            const fileContent = (await this.fileService.readFile(uri)).value;
+            await this.fileService.writeFile(uri, BinaryBuffer.concat([fileContent, BinaryBuffer.fromString(content)]));
         }
-        const openHandler = await this.openerService.getOpener(customAgentYamlUri);
-        openHandler.open(customAgentYamlUri);
+        const openHandler = await this.openerService.getOpener(uri);
+        openHandler.open(uri);
     }
 }

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

@@ -14,10 +14,21 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { Disposable } from '@theia/core';
-import { FrontendApplicationContribution } from '@theia/core/lib/browser';
-import { injectable } from '@theia/core/shared/inversify';
-import { AIVariableContext, AIVariableResolutionRequest, AIVariableService, DefaultAIVariableService } from '../common';
+import { Disposable, MessageService, Prioritizeable } from '@theia/core';
+import { FrontendApplicationContribution, OpenerService, open } from '@theia/core/lib/browser';
+import { inject, injectable } from '@theia/core/shared/inversify';
+import {
+    AIVariable,
+    AIVariableArg,
+    AIVariableContext,
+    AIVariableOpener,
+    AIVariableResolutionRequest,
+    AIVariableResourceResolver,
+    AIVariableService,
+    DefaultAIVariableService,
+    PromptText
+} from '../common';
+import * as monaco from '@theia/monaco-editor-core';
 
 export type AIVariableDropHandler = (event: DragEvent, context: AIVariableContext) => Promise<AIVariableDropResult | undefined>;
 
@@ -26,11 +37,52 @@ export interface AIVariableDropResult {
     text?: string
 };
 
+export interface AIVariableCompletionContext {
+    /** Portion of user input to be used for filtering completion candidates. */
+    userInput: string;
+    /** The range of suggestion completions. */
+    range: monaco.Range
+    /** A prefix to be applied to each completion item's text */
+    prefix: string
+}
+
+export namespace AIVariableCompletionContext {
+    export function get(
+        variableName: string,
+        model: monaco.editor.ITextModel,
+        position: monaco.Position,
+        matchString?: string
+    ): AIVariableCompletionContext | undefined {
+        const lineContent = model.getLineContent(position.lineNumber);
+        const indexOfVariableTrigger = lineContent.lastIndexOf(matchString ?? PromptText.VARIABLE_CHAR, position.column - 1);
+
+        // check if there is a variable trigger and no space typed between the variable trigger and the cursor
+        if (indexOfVariableTrigger === -1 || lineContent.substring(indexOfVariableTrigger).includes(' ')) {
+            return undefined;
+        }
+
+        // determine whether we are providing completions before or after the variable argument separator
+        const indexOfVariableArgSeparator = lineContent.lastIndexOf(PromptText.VARIABLE_SEPARATOR_CHAR, position.column - 1);
+        const triggerCharIndex = Math.max(indexOfVariableTrigger, indexOfVariableArgSeparator);
+
+        const userInput = lineContent.substring(triggerCharIndex + 1, position.column - 1);
+        const range = new monaco.Range(position.lineNumber, triggerCharIndex + 2, position.lineNumber, position.column);
+        const matchVariableChar = lineContent[triggerCharIndex] === (matchString ? matchString : PromptText.VARIABLE_CHAR);
+        const prefix = matchVariableChar ? variableName + PromptText.VARIABLE_SEPARATOR_CHAR : '';
+        return { range, userInput, prefix };
+    }
+}
+
 export const FrontendVariableService = Symbol('FrontendVariableService');
 export interface FrontendVariableService extends AIVariableService {
     registerDropHandler(handler: AIVariableDropHandler): Disposable;
     unregisterDropHandler(handler: AIVariableDropHandler): void;
     getDropResult(event: DragEvent, context: AIVariableContext): Promise<AIVariableDropResult>;
+
+    registerOpener(variable: AIVariable, opener: AIVariableOpener): Disposable;
+    unregisterOpener(variable: AIVariable, opener: AIVariableOpener): void;
+    getOpener(name: string, arg: string | undefined, context: AIVariableContext): Promise<AIVariableOpener | undefined>;
+    open(variable: AIVariableArg, context?: AIVariableContext): Promise<void>
 }
 
 export interface FrontendVariableContribution {
@@ -38,9 +90,13 @@ export interface FrontendVariableContribution {
 }
 
 @injectable()
-export class DefaultFrontendVariableService extends DefaultAIVariableService implements FrontendApplicationContribution {
+export class DefaultFrontendVariableService extends DefaultAIVariableService implements FrontendApplicationContribution, FrontendVariableService {
     protected dropHandlers = new Set<AIVariableDropHandler>();
 
+    @inject(MessageService) protected readonly messageService: MessageService;
+    @inject(AIVariableResourceResolver) protected readonly aiResourceResolver: AIVariableResourceResolver;
+    @inject(OpenerService) protected readonly openerService: OpenerService;
+
     onStart(): void {
         this.initContributions();
     }
@@ -68,4 +124,58 @@ export class DefaultFrontendVariableService extends DefaultAIVariableService imp
         }
         return { variables, text };
     }
+
+    registerOpener(variable: AIVariable, opener: AIVariableOpener): Disposable {
+        const key = this.getKey(variable.name);
+        if (!this.variables.get(key)) {
+            this.variables.set(key, variable);
+            this.onDidChangeVariablesEmitter.fire();
+        }
+        const openers = this.openers.get(key) ?? [];
+        openers.push(opener);
+        this.openers.set(key, openers);
+        return Disposable.create(() => this.unregisterOpener(variable, opener));
+    }
+
+    unregisterOpener(variable: AIVariable, opener: AIVariableOpener): void {
+        const key = this.getKey(variable.name);
+        const registeredOpeners = this.openers.get(key);
+        registeredOpeners?.splice(registeredOpeners.indexOf(opener), 1);
+    }
+
+    async getOpener(name: string, arg: string | undefined, context: AIVariableContext = {}): Promise<AIVariableOpener | undefined> {
+        const variable = this.getVariable(name);
+        return variable && Prioritizeable.prioritizeAll(
+            this.openers.get(this.getKey(name)) ?? [],
+            opener => (async () => opener.canOpen({ variable, arg }, context))().catch(() => 0)
+        )
+            .then(prioritized => prioritized.at(0)?.value);
+    }
+
+    async open(request: AIVariableArg, context?: AIVariableContext | undefined): Promise<void> {
+        const { variableName, arg } = this.parseRequest(request);
+        const variable = this.getVariable(variableName);
+        if (!variable) {
+            this.messageService.warn('No variable found for open request.');
+            return;
+        }
+        const opener = await this.getOpener(variableName, arg, context);
+        try {
+            return opener ? opener.open({ variable, arg }, context ?? {}) : this.openReadonly({ variable, arg }, context);
+        } catch (err) {
+            console.error('Unable to open variable:', err);
+            this.messageService.error('Unable to display variable value.');
+        }
+    }
+
+    protected async openReadonly(request: AIVariableResolutionRequest, context: AIVariableContext = {}): Promise<void> {
+        const resolved = await this.resolveVariable(request, context);
+        if (resolved === undefined) {
+            this.messageService.warn('Unable to resolve variable.');
+            return;
+        }
+        const resource = this.aiResourceResolver.getOrCreate(request, context, resolved.value);
+        await open(this.openerService, resource.uri);
+        resource.dispose();
+    }
 }

package/src/browser/prompttemplate-contribution.ts

@@ -17,7 +17,7 @@
 import { inject, injectable } from '@theia/core/shared/inversify';
 import { GrammarDefinition, GrammarDefinitionProvider, LanguageGrammarDefinitionContribution, TextmateRegistry } from '@theia/monaco/lib/browser/textmate';
 import * as monaco from '@theia/monaco-editor-core';
-import { Command, CommandContribution, CommandRegistry, MessageService, nls } from '@theia/core';
+import { Command, CommandContribution, CommandRegistry, nls } from '@theia/core';
 import { TabBarToolbarContribution, TabBarToolbarRegistry } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
 
 import { codicon, Widget } from '@theia/core/lib/browser';
@@ -33,17 +33,10 @@ export const PROMPT_TEMPLATE_EXTENSION = '.prompttemplate';
 
 export const DISCARD_PROMPT_TEMPLATE_CUSTOMIZATIONS: Command = Command.toLocalizedCommand({
     id: 'theia-ai-prompt-template:discard',
+    label: 'Discard AI Prompt Template',
     iconClass: codicon('discard'),
-    category: 'Theia AI Prompt Templates'
-}, '', 'theia/ai/core/prompts/category');
-
-// TODO this command is mainly for testing purposes
-export const SHOW_ALL_PROMPTS_COMMAND: Command = Command.toLocalizedCommand({
-    id: 'theia-ai-prompt-template:show-prompts-command',
-    label: 'Show all prompts',
-    iconClass: codicon('beaker'),
-    category: 'Theia AI Prompt Templates',
-}, 'theia/ai/core/showAllPrompts/label', 'theia/ai/core/prompts/category');
+    category: 'AI Prompt Templates'
+}, 'theia/ai/core/discard/label', 'theia/ai/core/prompts/category');
 
 @injectable()
 export class PromptTemplateContribution implements LanguageGrammarDefinitionContribution, CommandContribution, TabBarToolbarContribution {
@@ -51,9 +44,6 @@ export class PromptTemplateContribution implements LanguageGrammarDefinitionCont
     @inject(PromptService)
     private readonly promptService: PromptService;
 
-    @inject(MessageService)
-    private readonly messageService: MessageService;
-
     @inject(PromptCustomizationService)
     protected readonly customizationService: PromptCustomizationService;
 
@@ -89,7 +79,7 @@ export class PromptTemplateContribution implements LanguageGrammarDefinitionCont
         monaco.languages.register({
             id: PROMPT_TEMPLATE_LANGUAGE_ID,
             'aliases': [
-                'Theia AI Prompt Templates'
+                'AI Prompt Template'
             ],
             'extensions': [
                 PROMPT_TEMPLATE_EXTENSION,
@@ -253,10 +243,6 @@ export class PromptTemplateContribution implements LanguageGrammarDefinitionCont
             isEnabled: (widget: EditorWidget) => this.canDiscard(widget),
             execute: (widget: EditorWidget) => this.discard(widget)
         });
-
-        commands.registerCommand(SHOW_ALL_PROMPTS_COMMAND, {
-            execute: () => this.showAllPrompts()
-        });
     }
 
     protected isPromptTemplateWidget(widget: Widget): boolean {
@@ -311,13 +297,6 @@ export class PromptTemplateContribution implements LanguageGrammarDefinitionCont
         });
     }
 
-    private showAllPrompts(): void {
-        const allPrompts = this.promptService.getAllPrompts();
-        Object.keys(allPrompts).forEach(id => {
-            this.messageService.info(`Prompt Template ID: ${id}\n${allPrompts[id].template}`, 'Got it');
-        });
-    }
-
     registerToolbarItems(registry: TabBarToolbarRegistry): void {
         registry.registerItem({
             id: DISCARD_PROMPT_TEMPLATE_CUSTOMIZATIONS.id,

package/src/browser/token-usage-frontend-service-impl.ts

@@ -0,0 +1,117 @@
+// *****************************************************************************
+// 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 { injectable, inject, postConstruct } from '@theia/core/shared/inversify';
+import { Emitter } from '@theia/core';
+import { ModelTokenUsageData, TokenUsageFrontendService } from './token-usage-frontend-service';
+import { TokenUsage, TokenUsageService } from '../common/token-usage-service';
+import { TokenUsageServiceClient } from '../common/protocol';
+
+@injectable()
+export class TokenUsageServiceClientImpl implements TokenUsageServiceClient {
+    private readonly _onTokenUsageUpdated = new Emitter<TokenUsage>();
+    readonly onTokenUsageUpdated = this._onTokenUsageUpdated.event;
+
+    notifyTokenUsage(usage: TokenUsage): void {
+        this._onTokenUsageUpdated.fire(usage);
+    }
+
+}
+
+@injectable()
+export class TokenUsageFrontendServiceImpl implements TokenUsageFrontendService {
+
+    @inject(TokenUsageServiceClient)
+    protected readonly tokenUsageServiceClient: TokenUsageServiceClient;
+
+    @inject(TokenUsageService)
+    protected readonly tokenUsageService: TokenUsageService;
+
+    private readonly _onTokenUsageUpdated = new Emitter<ModelTokenUsageData[]>();
+    readonly onTokenUsageUpdated = this._onTokenUsageUpdated.event;
+
+    private cachedUsageData: ModelTokenUsageData[] = [];
+
+    @postConstruct()
+    protected init(): void {
+        this.tokenUsageServiceClient.onTokenUsageUpdated(() => {
+            this.getTokenUsageData().then(data => {
+                this._onTokenUsageUpdated.fire(data);
+            });
+        });
+    }
+
+    /**
+     * Gets the current token usage data for all models
+     */
+    async getTokenUsageData(): Promise<ModelTokenUsageData[]> {
+        try {
+            const usages = await this.tokenUsageService.getTokenUsages();
+            this.cachedUsageData = this.aggregateTokenUsages(usages);
+            return this.cachedUsageData;
+        } catch (error) {
+            console.error('Failed to get token usage data:', error);
+            return [];
+        }
+    }
+
+    /**
+     * Aggregates token usages by model
+     */
+    private aggregateTokenUsages(usages: TokenUsage[]): ModelTokenUsageData[] {
+        // Group by model
+        const modelMap = new Map<string, {
+            inputTokens: number;
+            outputTokens: number;
+            lastUsed?: Date;
+        }>();
+
+        // Process each usage record
+        for (const usage of usages) {
+            const existing = modelMap.get(usage.model);
+
+            if (existing) {
+                existing.inputTokens += usage.inputTokens;
+                existing.outputTokens += usage.outputTokens;
+
+                // Update last used if this usage is more recent
+                if (!existing.lastUsed || (usage.timestamp && usage.timestamp > existing.lastUsed)) {
+                    existing.lastUsed = usage.timestamp;
+                }
+            } else {
+                modelMap.set(usage.model, {
+                    inputTokens: usage.inputTokens,
+                    outputTokens: usage.outputTokens,
+                    lastUsed: usage.timestamp
+                });
+            }
+        }
+
+        // Convert map to array of model usage data
+        const result: ModelTokenUsageData[] = [];
+
+        for (const [modelId, data] of modelMap.entries()) {
+            result.push({
+                modelId,
+                inputTokens: data.inputTokens,
+                outputTokens: data.outputTokens,
+                lastUsed: data.lastUsed
+            });
+        }
+
+        return result;
+    }
+}

package/src/browser/token-usage-frontend-service.ts

@@ -0,0 +1,47 @@
+// *****************************************************************************
+// 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 { Event } from '@theia/core';
+
+/**
+ * Data structure for token usage data specific to a model.
+ */
+export interface ModelTokenUsageData {
+    /** The model identifier */
+    modelId: string;
+    /** Number of input tokens used */
+    inputTokens: number;
+    /** Number of output tokens used */
+    outputTokens: number;
+    /** Date when the model was last used */
+    lastUsed?: Date;
+}
+
+/**
+ * Service for managing token usage data on the frontend.
+ */
+export const TokenUsageFrontendService = Symbol('TokenUsageFrontendService');
+export interface TokenUsageFrontendService {
+    /**
+     * Event emitted when token usage data is updated
+     */
+    readonly onTokenUsageUpdated: Event<ModelTokenUsageData[]>;
+
+    /**
+     * Gets the current token usage data for all models
+     */
+    getTokenUsageData(): Promise<ModelTokenUsageData[]>;
+}