@jupyterlite/ai 0.15.0 → 0.17.0

package/src/providers/generated-context-windows.ts

@@ -0,0 +1,102 @@
+/**
+ * This file is generated by `jlpm sync:model-context-windows`.
+ * Source: https://models.dev/api.json
+ * Backed by: https://github.com/anomalyco/models.dev
+ * Generated: 2026-04-08T16:23:34.080Z
+ */
+
+import type { IProviderModelInfo } from '../tokens';
+
+export const BUILT_IN_PROVIDER_MODEL_INFO: Record<
+  string,
+  Record<string, IProviderModelInfo>
+> = {
+  anthropic: {
+    'claude-opus-4-6': { contextWindow: 1000000 },
+    'claude-sonnet-4-6': { contextWindow: 1000000 },
+    'claude-opus-4-5': { contextWindow: 200000 },
+    'claude-opus-4-5-20251101': { contextWindow: 200000 },
+    'claude-sonnet-4-5': { contextWindow: 200000 },
+    'claude-sonnet-4-5-20250929': { contextWindow: 200000 },
+    'claude-haiku-4-5': { contextWindow: 200000 },
+    'claude-haiku-4-5-20251001': { contextWindow: 200000 },
+    'claude-opus-4-1': { contextWindow: 200000 },
+    'claude-opus-4-1-20250805': { contextWindow: 200000 },
+    'claude-opus-4-0': { contextWindow: 200000 },
+    'claude-opus-4-20250514': { contextWindow: 200000 },
+    'claude-sonnet-4-0': { contextWindow: 200000 },
+    'claude-sonnet-4-20250514': { contextWindow: 200000 }
+  },
+  google: {
+    'gemini-3.1-pro-preview': { contextWindow: 1048576 },
+    'gemini-3.1-pro-preview-customtools': { contextWindow: 1048576 },
+    'gemini-3.1-flash-image-preview': { contextWindow: 131072 },
+    'gemini-3.1-flash-lite-preview': { contextWindow: 1048576 },
+    'gemini-3-flash-preview': { contextWindow: 1048576 },
+    'gemini-2.5-pro': { contextWindow: 1048576 },
+    'gemini-2.5-flash': { contextWindow: 1048576 },
+    'gemini-2.5-flash-image': { contextWindow: 32768 },
+    'gemini-2.5-flash-lite': { contextWindow: 1048576 },
+    'gemini-flash-latest': { contextWindow: 1048576 },
+    'gemini-flash-lite-latest': { contextWindow: 1048576 }
+  },
+  mistral: {
+    'mistral-large-latest': { contextWindow: 262144 },
+    'mistral-medium-latest': { contextWindow: 128000 },
+    'mistral-medium-2508': { contextWindow: 262144 },
+    'mistral-small-latest': { contextWindow: 256000 },
+    'mistral-small-2506': { contextWindow: 128000 },
+    'ministral-3b-latest': { contextWindow: 128000 },
+    'ministral-8b-latest': { contextWindow: 128000 },
+    'magistral-small-latest': { contextWindow: 128000 },
+    'magistral-medium-latest': { contextWindow: 128000 },
+    'pixtral-large-latest': { contextWindow: 128000 },
+    'codestral-latest': { contextWindow: 256000 },
+    'devstral-latest': { contextWindow: 262144 },
+    'devstral-2512': { contextWindow: 262144 }
+  },
+  openai: {
+    'gpt-5.4': { contextWindow: 1050000 },
+    'gpt-5.4-mini': { contextWindow: 400000 },
+    'gpt-5.4-nano': { contextWindow: 400000 },
+    'gpt-5.2': { contextWindow: 400000 },
+    'gpt-5.2-2025-12-11': { contextWindow: 400000 },
+    'gpt-5.2-chat-latest': { contextWindow: 128000 },
+    'gpt-5.2-pro': { contextWindow: 400000 },
+    'gpt-5.2-pro-2025-12-11': { contextWindow: 400000 },
+    'gpt-5.2-codex': { contextWindow: 400000 },
+    'gpt-5.1': { contextWindow: 400000 },
+    'gpt-5.1-2025-11-13': { contextWindow: 400000 },
+    'gpt-5.1-chat-latest': { contextWindow: 128000 },
+    'gpt-5': { contextWindow: 400000 },
+    'gpt-5-2025-08-07': { contextWindow: 400000 },
+    'gpt-5-chat-latest': { contextWindow: 400000 },
+    'gpt-5-mini': { contextWindow: 400000 },
+    'gpt-5-mini-2025-08-07': { contextWindow: 400000 },
+    'gpt-5-nano': { contextWindow: 400000 },
+    'gpt-5-nano-2025-08-07': { contextWindow: 400000 },
+    'o4-mini': { contextWindow: 200000 },
+    'o4-mini-2025-04-16': { contextWindow: 200000 },
+    'o3-pro': { contextWindow: 200000 },
+    o3: { contextWindow: 200000 },
+    'o3-2025-04-16': { contextWindow: 200000 },
+    'o3-mini': { contextWindow: 200000 },
+    'o3-mini-2025-01-31': { contextWindow: 200000 },
+    o1: { contextWindow: 200000 },
+    'o1-2024-12-17': { contextWindow: 200000 },
+    'gpt-4.1': { contextWindow: 1047576 },
+    'gpt-4.1-2025-04-14': { contextWindow: 1047576 },
+    'gpt-4.1-mini': { contextWindow: 1047576 },
+    'gpt-4.1-mini-2025-04-14': { contextWindow: 1047576 },
+    'gpt-4.1-nano': { contextWindow: 1047576 },
+    'gpt-4.1-nano-2025-04-14': { contextWindow: 1047576 },
+    'gpt-4o': { contextWindow: 128000 },
+    'gpt-4o-2024-05-13': { contextWindow: 128000 },
+    'gpt-4o-2024-08-06': { contextWindow: 128000 },
+    'gpt-4o-2024-11-20': { contextWindow: 128000 },
+    'gpt-4o-mini': { contextWindow: 128000 },
+    'gpt-4o-mini-2024-07-18': { contextWindow: 128000 },
+    'gpt-3.5-turbo': { contextWindow: 16385 },
+    'gpt-3.5-turbo-0125': { contextWindow: 16385 }
+  }
+};

package/src/providers/model-info.ts

@@ -0,0 +1,88 @@
+import type {
+  IProviderConfig,
+  IProviderInfo,
+  IProviderModelInfo,
+  IProviderRegistry
+} from '../tokens';
+
+const DATE_SUFFIX = /^(.*)-\d{4}-\d{2}-\d{2}$/;
+const SHORT_VERSION_SUFFIX = /^(.*)-\d{4}$/;
+
+// Treat rolling aliases and dated releases as the same model family so they
+// can share provider metadata such as context windows.
+function normalizeModelId(modelId: string): string {
+  if (modelId.endsWith('-latest')) {
+    return modelId.slice(0, -7);
+  }
+
+  const dateSuffixMatch = modelId.match(DATE_SUFFIX);
+  if (dateSuffixMatch) {
+    return dateSuffixMatch[1];
+  }
+
+  const shortVersionSuffixMatch = modelId.match(SHORT_VERSION_SUFFIX);
+  if (shortVersionSuffixMatch) {
+    return shortVersionSuffixMatch[1];
+  }
+
+  return modelId;
+}
+
+function getCandidateModelIds(modelId: string): string[] {
+  const candidates = [modelId];
+  const normalizedModelId = normalizeModelId(modelId);
+
+  candidates.push(normalizedModelId);
+
+  if (normalizedModelId !== modelId) {
+    candidates.push(`${normalizedModelId}-latest`);
+  }
+
+  return [...new Set(candidates)];
+}
+
+export function getProviderModelInfo(
+  providerInfo: IProviderInfo | null | undefined,
+  model: string | undefined
+): IProviderModelInfo | undefined {
+  if (!providerInfo || !model) {
+    return undefined;
+  }
+
+  const modelInfo = providerInfo.modelInfo;
+  if (!modelInfo) {
+    return undefined;
+  }
+
+  for (const candidateId of getCandidateModelIds(model)) {
+    if (modelInfo[candidateId]) {
+      return modelInfo[candidateId];
+    }
+  }
+
+  const normalizedModelId = normalizeModelId(model);
+  // As a last resort, match any known model entry that normalizes to the same
+  // base ID, even if the exact alias/version string differs.
+  return Object.entries(modelInfo).find(([candidateId]) => {
+    return normalizeModelId(candidateId) === normalizedModelId;
+  })?.[1];
+}
+
+export function getEffectiveContextWindow(
+  providerConfig: IProviderConfig | undefined,
+  providerRegistry?: IProviderRegistry
+): number | undefined {
+  if (!providerConfig) {
+    return undefined;
+  }
+
+  if (providerConfig.parameters?.contextWindow !== undefined) {
+    return providerConfig.parameters.contextWindow;
+  }
+
+  const providerInfo = providerRegistry?.getProviderInfo(
+    providerConfig.provider
+  );
+  return getProviderModelInfo(providerInfo, providerConfig.model)
+    ?.contextWindow;
+}

package/src/tokens.ts

@@ -4,7 +4,7 @@ import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { Token } from '@lumino/coreutils';
 import type { IDisposable } from '@lumino/disposable';
 import { ISignal } from '@lumino/signaling';
-import type { Tool, LanguageModel } from 'ai';
+import type { Tool, LanguageModel, UserContent, ModelMessage } from 'ai';
 import { ISecretsManager } from 'jupyter-secrets-manager';
 
 import type { IModelOptions } from './providers/models';
@@ -30,6 +30,7 @@ export namespace CommandIds {
   export const openSettings = '@jupyterlite/ai:open-settings';
   export const reposition = '@jupyterlite/ai:reposition';
   export const openChat = '@jupyterlite/ai:open-chat';
+  export const openOrRevealChat = '@jupyterlite/ai:open-or-reveal-chat';
   export const moveChat = '@jupyterlite/ai:move-chat';
   export const refreshSkills = '@jupyterlite/ai:refresh-skills';
   export const saveChat = '@jupyterlite/ai:save-chat';
@@ -102,7 +103,7 @@ export interface IToolRegistry {
  * The tool registry token.
  */
 export const IToolRegistry = new Token<IToolRegistry>(
-  '@jupyterlite/ai:tool-registry',
+  '@jupyterlite/ai:IToolRegistry',
   'Tool registry for AI agent functionality'
 );
 
@@ -145,7 +146,7 @@ export interface ISkillRegistry {
  * The skill registry token.
  */
 export const ISkillRegistry = new Token<ISkillRegistry>(
-  '@jupyterlite/ai:skill-registry',
+  '@jupyterlite/ai:ISkillRegistry',
   'Skill registry for AI agent functionality'
 );
 
@@ -204,6 +205,13 @@ export interface IProviderToolCapabilities {
 /**
  * Provider information
  */
+export interface IProviderModelInfo {
+  /**
+   * Default context window for the model in tokens.
+   */
+  contextWindow?: number;
+}
+
 export interface IProviderInfo {
   /**
    * Unique identifier for the provider
@@ -228,6 +236,11 @@ export interface IProviderInfo {
    */
   defaultModels: string[];
 
+  /**
+   * Optional per-model metadata keyed by model ID.
+   */
+  modelInfo?: Record<string, IProviderModelInfo>;
+
   /**
    * Whether this provider supports custom base URLs
    */
@@ -311,7 +324,7 @@ export interface IProviderRegistry {
  * Token for the provider registry.
  */
 export const IProviderRegistry = new Token<IProviderRegistry>(
-  '@jupyterlite/ai:provider-registry',
+  '@jupyterlite/ai:IProviderRegistry',
   'Registry for AI providers'
 );
 
@@ -321,6 +334,7 @@ export interface IProviderParameters {
   temperature?: number;
   maxOutputTokens?: number;
   maxTurns?: number;
+  contextWindow?: number;
   supportsFillInMiddle?: boolean;
   useFilterText?: boolean;
 }
@@ -368,6 +382,8 @@ export interface IAIConfig {
   sendWithShiftEnter: boolean;
   // Token usage display setting
   showTokenUsage: boolean;
+  // Context usage display setting
+  showContextUsage: boolean;
   // Commands that require approval before execution
   commandsRequiringApproval: string[];
   // Commands whose execute_command outputs may auto-render MIME bundles in chat
@@ -569,7 +585,7 @@ export interface IAgentManager {
   /**
    * Clears conversation history and resets agent state.
    */
-  clearHistory(): void;
+  clearHistory(): Promise<void>;
   /**
    * Sets the conversation history with a list of messages from the chat.
    * @param messages The chat messages to set as history
@@ -596,7 +612,12 @@ export interface IAgentManager {
    * Handles the complete execution cycle including tool calls.
    * @param message The user message to respond to (may include processed attachment content)
    */
-  generateResponse(message: string): Promise<void>;
+  generateResponse(message: UserContent): Promise<void>;
+  /**
+   * Create a transient language model to request a text response, which won't be added to history.
+   * @param messages - the messages sequence to send to the model.
+   */
+  textResponse(messages: ModelMessage[]): Promise<string>;
   /**
    * Initializes the AI agent with current settings and tools.
    * Sets up the agent with model configuration, tools, and MCP tools.
@@ -608,7 +629,7 @@ export interface IAgentManager {
  * Token for the agent manager.
  */
 export const IAgentManager = new Token<IAgentManager>(
-  '@jupyterlite/ai:agent-manager'
+  '@jupyterlite/ai:IAgentManager'
 );
 
 /* The AGENT MANAGER FACTORY */
@@ -640,7 +661,7 @@ export interface IAgentManagerFactory {
  * Token for the agent manager factory.
  */
 export const IAgentManagerFactory = new Token<IAgentManagerFactory>(
-  '@jupyterlite/ai:agent-manager-factory'
+  '@jupyterlite/ai:IAgentManagerFactory'
 );
 
 /* THE CHAT MODELS HANDLER */
@@ -680,12 +701,16 @@ export interface ICreateChatOptions {
    * Whether the chat is autosaved or not.
    */
   autosave?: boolean;
+  /**
+   * An optional title to the chat.
+   */
+  title?: string | null;
 }
 /**
  * Token for the chat model handler.
  */
 export const IChatModelHandler = new Token<IChatModelHandler>(
-  '@jupyterlite/ai:chat-model-handler'
+  '@jupyterlite/ai:IChatModelHandler'
 );
 
 /* THE DIFF MANAGER */
@@ -760,7 +785,7 @@ export interface IDiffManager {
  * Token for the diff manager.
  */
 export const IDiffManager = new Token<IDiffManager>(
-  '@jupyterlite/ai:diff-manager'
+  '@jupyterlite/ai:IDiffManager'
 );
 
 /**
@@ -776,6 +801,17 @@ export interface ITokenUsage {
    * Number of output tokens generated (completion tokens)
    */
   outputTokens: number;
+
+  /**
+   * Estimated prompt tokens used by the most recent model request.
+   * This is based on the final step of the latest request.
+   */
+  lastRequestInputTokens?: number;
+
+  /**
+   * Configured context window size for the active provider/model.
+   */
+  contextWindow?: number;
 }
 
 /**

package/src/widgets/ai-settings.tsx

@@ -45,6 +45,7 @@ import {
   createTheme
 } from '@mui/material';
 import React, { useEffect, useMemo, useState } from 'react';
+import { getEffectiveContextWindow } from '../providers/model-info';
 import {
   type IAgentManagerFactory,
   type IAIConfig,
@@ -670,6 +671,10 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
                       const providerToolCapabilities =
                         providerInfo?.providerToolCapabilities;
                       const params = provider.parameters;
+                      const effectiveContextWindow = getEffectiveContextWindow(
+                        provider,
+                        providerRegistry
+                      );
                       const webSearchEnabled =
                         !!providerToolCapabilities?.webSearch &&
                         provider.customSettings?.webSearch?.enabled === true;
@@ -741,6 +746,7 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
                               {(params?.temperature !== undefined ||
                                 params?.maxOutputTokens !== undefined ||
                                 params?.maxTurns !== undefined ||
+                                effectiveContextWindow !== undefined ||
                                 webSearchEnabled ||
                                 webFetchEnabled) && (
                                 <Box
@@ -781,6 +787,16 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
                                       variant="outlined"
                                     />
                                   )}
+                                  {effectiveContextWindow !== undefined && (
+                                    <Chip
+                                      label={trans.__(
+                                        'Context: %1',
+                                        effectiveContextWindow
+                                      )}
+                                      size="small"
+                                      variant="outlined"
+                                    />
+                                  )}
                                   {webSearchEnabled && (
                                     <Chip
                                       label={trans.__('Web Search')}
@@ -935,6 +951,32 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
                   }
                 />
 
+                <FormControlLabel
+                  control={
+                    <Switch
+                      checked={config.showContextUsage}
+                      onChange={e =>
+                        handleConfigUpdate({
+                          showContextUsage: e.target.checked
+                        })
+                      }
+                      color="primary"
+                    />
+                  }
+                  label={
+                    <Box>
+                      <Typography variant="body1">
+                        {trans.__('Show Context Usage')}
+                      </Typography>
+                      <Typography variant="caption" color="text.secondary">
+                        {trans.__(
+                          'Display estimated context usage in the chat toolbar'
+                        )}
+                      </Typography>
+                    </Box>
+                  }
+                />
+
                 <FormControlLabel
                   control={
                     <Switch

package/src/widgets/main-area-chat.ts

@@ -6,7 +6,7 @@ import { CommandRegistry } from '@lumino/commands';
 
 import { AIChatModel } from '../chat-model';
 import { SaveComponentWidget } from '../components/save-button';
-import { TokenUsageWidget } from '../components/token-usage-display';
+import { UsageWidget } from '../components/usage-display';
 import { RenderedMessageOutputAreaCompat } from '../rendered-message-outputarea';
 import { CommandIds, type IAISettingsModel } from '../tokens';
 
@@ -24,7 +24,8 @@ export namespace MainAreaChat {
 export class MainAreaChat extends MainAreaWidget<ChatWidget> {
   constructor(options: MainAreaChat.IOptions) {
     super(options);
-    this.title.label = this.content.model.name;
+    this.title.label = this.model.name;
+    this.title.caption = this.model.title ?? this.model.name;
 
     const { trans } = options;
 
@@ -54,13 +55,13 @@ export class MainAreaChat extends MainAreaWidget<ChatWidget> {
     }
 
     // Add the token usage button.
-    const tokenUsageWidget = new TokenUsageWidget({
+    const usageWidget = new UsageWidget({
       tokenUsageChanged: this.model.tokenUsageChanged,
       settingsModel: options.settingsModel,
       initialTokenUsage: this.model.agentManager.tokenUsage,
       translator: trans
     });
-    this.toolbar.addItem('token-usage', tokenUsageWidget);
+    this.toolbar.addItem('usage', usageWidget);
 
     // Temporary compat: keep output-area CSS context for MIME renderers
     // until jupyter-chat provides it natively.
@@ -69,6 +70,8 @@ export class MainAreaChat extends MainAreaWidget<ChatWidget> {
     });
 
     this.model.writersChanged.connect(this._writersChanged);
+
+    this.model.titleChanged.connect(this._titleChanged);
   }
 
   dispose(): void {
@@ -76,6 +79,7 @@ export class MainAreaChat extends MainAreaWidget<ChatWidget> {
     // Dispose of the approval buttons widget when the chat is disposed.
     this._outputAreaCompat.dispose();
     this.model.writersChanged.disconnect(this._writersChanged);
+    this.model.titleChanged.disconnect(this._titleChanged);
   }
 
   /**
@@ -107,5 +111,9 @@ export class MainAreaChat extends MainAreaWidget<ChatWidget> {
     }
   };
 
+  private _titleChanged = () => {
+    this.title.caption = this.model.title ?? this.model.name;
+  };
+
   private _outputAreaCompat: RenderedMessageOutputAreaCompat;
 }

package/src/widgets/provider-config-dialog.tsx

@@ -37,6 +37,7 @@ import type {
   IProviderRegistry,
   IProviderToolCapabilities
 } from '../tokens';
+import { getProviderModelInfo } from '../providers/model-info';
 
 /**
  * Default parameter values for provider configuration
@@ -168,6 +169,10 @@ export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
   );
   const providerToolCapabilities =
     selectedProviderInfo?.providerToolCapabilities;
+  const selectedModelInfo = React.useMemo(
+    () => getProviderModelInfo(selectedProviderInfo, model),
+    [selectedProviderInfo, model]
+  );
   const webSearchImplementation =
     providerToolCapabilities?.webSearch?.implementation;
   const supportsWebSearch = !!providerToolCapabilities?.webSearch;
@@ -653,7 +658,7 @@ export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
                   }
                   placeholder={trans.__('Leave empty for provider default')}
                   helperText={trans.__('Maximum length of AI responses')}
-                  inputProps={{ min: 1 }}
+                  slotProps={{ htmlInput: { min: 1 } }}
                 />
 
                 <TextField
@@ -673,7 +678,42 @@ export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
                   helperText={trans.__(
                     'Maximum number of tool execution turns'
                   )}
-                  inputProps={{ min: 1, max: 100 }}
+                  slotProps={{ htmlInput: { min: 1, max: 100 } }}
+                />
+
+                <TextField
+                  fullWidth
+                  label={trans.__('Context Window (Optional)')}
+                  type="number"
+                  value={parameters.contextWindow ?? ''}
+                  onChange={e =>
+                    setParameters({
+                      ...parameters,
+                      contextWindow: e.target.value
+                        ? Number(e.target.value)
+                        : undefined
+                    })
+                  }
+                  placeholder={
+                    selectedModelInfo?.contextWindow !== undefined
+                      ? trans.__(
+                          'Default: %1',
+                          selectedModelInfo.contextWindow.toLocaleString()
+                        )
+                      : trans.__('e.g., 128000')
+                  }
+                  helperText={
+                    selectedModelInfo?.contextWindow !== undefined &&
+                    parameters.contextWindow === undefined
+                      ? trans.__(
+                          'Using provider metadata default of %1 tokens for this model unless you override it here.',
+                          selectedModelInfo.contextWindow.toLocaleString()
+                        )
+                      : trans.__(
+                          'Model context window size in tokens (used for context usage estimation)'
+                        )
+                  }
+                  slotProps={{ htmlInput: { min: 1 } }}
                 />
 
                 <Typography
@@ -830,7 +870,7 @@ export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
                                         : undefined
                                     )
                                   }
-                                  inputProps={{ min: 1 }}
+                                  slotProps={{ htmlInput: { min: 1 } }}
                                 />
                                 {renderDomainList(
                                   'webSearch.blockedDomains',
@@ -888,7 +928,7 @@ export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
                                     : undefined
                                 )
                               }
-                              inputProps={{ min: 1 }}
+                              slotProps={{ htmlInput: { min: 1 } }}
                             />
                             <TextField
                               fullWidth
@@ -904,7 +944,7 @@ export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
                                     : undefined
                                 )
                               }
-                              inputProps={{ min: 1 }}
+                              slotProps={{ htmlInput: { min: 1 } }}
                             />
                             {renderDomainList(
                               'webFetch.allowedDomains',

package/lib/components/token-usage-display.js

@@ -1,72 +0,0 @@
-import { ReactWidget, UseSignal } from '@jupyterlab/ui-components';
-import React from 'react';
-/**
- * React component that displays token usage information.
- * Shows input/output token counts with up/down arrows.
- * Only renders when token usage display is enabled in settings.
- */
-export const TokenUsageDisplay = ({ tokenUsageChanged, settingsModel, initialTokenUsage, translator: trans }) => {
-    return (React.createElement(UseSignal, { signal: settingsModel.stateChanged, initialArgs: undefined }, () => {
-        const config = settingsModel.config;
-        if (!config.showTokenUsage) {
-            return null;
-        }
-        return (React.createElement(UseSignal, { signal: tokenUsageChanged, initialArgs: initialTokenUsage }, (_, tokenUsage) => {
-            if (!tokenUsage) {
-                return null;
-            }
-            const total = tokenUsage.inputTokens + tokenUsage.outputTokens;
-            if (total === 0) {
-                return null;
-            }
-            return (React.createElement("div", { style: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '6px',
-                    fontSize: '12px',
-                    color: 'var(--jp-ui-font-color2)',
-                    padding: '4px 8px',
-                    backgroundColor: 'var(--jp-layout-color1)',
-                    border: '1px solid var(--jp-border-color1)',
-                    borderRadius: '4px',
-                    whiteSpace: 'nowrap'
-                }, title: trans.__('Token Usage - Sent: %1, Received: %2, Total: %3', tokenUsage.inputTokens.toLocaleString(), tokenUsage.outputTokens.toLocaleString(), total.toLocaleString()) },
-                React.createElement("span", { style: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: '2px'
-                    } },
-                    React.createElement("span", null, "\u2191"),
-                    React.createElement("span", null, tokenUsage.inputTokens.toLocaleString())),
-                React.createElement("span", { style: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: '2px'
-                    } },
-                    React.createElement("span", null, "\u2193"),
-                    React.createElement("span", null, tokenUsage.outputTokens.toLocaleString()))));
-        }));
-    }));
-};
-/**
- * JupyterLab widget wrapper for the TokenUsageDisplay component.
- * Extends ReactWidget to integrate with the JupyterLab widget system.
- */
-export class TokenUsageWidget extends ReactWidget {
-    /**
-     * Creates a new TokenUsageWidget instance.
-     * @param options - Configuration options containing required models
-     */
-    constructor(options) {
-        super();
-        this._options = options;
-    }
-    /**
-     * Renders the React component within the widget.
-     * @returns The TokenUsageDisplay React element
-     */
-    render() {
-        return React.createElement(TokenUsageDisplay, { ...this._options });
-    }
-    _options;
-}