@codingame/monaco-vscode-katex-common 25.1.1 → 26.0.0

package/vscode/src/vs/workbench/contrib/chat/browser/widgetHosts/viewPane/chatContextUsageDetails.js

@@ -0,0 +1,143 @@
+
+import { registerCss } from '@codingame/monaco-vscode-api/css';
+import { __decorate, __param } from '@codingame/monaco-vscode-api/external/tslib/tslib.es6';
+import * as chatContextUsageDetails from './media/chatContextUsageDetails.css';
+import { $ as $$1, clearNode } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
+import { Disposable } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
+import { localize } from '@codingame/monaco-vscode-api/vscode/vs/nls';
+import { MenuId } from '@codingame/monaco-vscode-api/vscode/vs/platform/actions/common/actions';
+import { IMenuService } from '@codingame/monaco-vscode-api/vscode/vs/platform/actions/common/actions.service';
+import { IInstantiationService } from '@codingame/monaco-vscode-api/vscode/vs/platform/instantiation/common/instantiation';
+import { MenuWorkbenchButtonBar } from '../../../../../../platform/actions/browser/buttonbar.js';
+import { IContextKeyService } from '@codingame/monaco-vscode-api/vscode/vs/platform/contextkey/common/contextkey.service';
+
+registerCss(chatContextUsageDetails);
+const $ = $$1;
+let ChatContextUsageDetails = class ChatContextUsageDetails extends Disposable {
+    constructor(instantiationService, menuService, contextKeyService) {
+        super();
+        this.instantiationService = instantiationService;
+        this.menuService = menuService;
+        this.contextKeyService = contextKeyService;
+        this.domNode = $(".chat-context-usage-details");
+        this.domNode.setAttribute("tabindex", "0");
+        this.quotaItem = this.domNode.appendChild($(".quota-item"));
+        const quotaItemHeader = this.quotaItem.appendChild($(".quota-item-header"));
+        const quotaItemLabel = quotaItemHeader.appendChild($(".quota-item-label"));
+        quotaItemLabel.textContent = ( localize(6140, "Context Window"));
+        const tokenRow = this.quotaItem.appendChild($(".token-row"));
+        this.tokenCountLabel = tokenRow.appendChild($(".token-count-label"));
+        this.percentageLabel = tokenRow.appendChild($(".quota-item-value"));
+        const progressBar = this.quotaItem.appendChild($(".quota-bar"));
+        this.progressFill = progressBar.appendChild($(".quota-bit"));
+        this.tokenDetailsContainer = this.domNode.appendChild($(".token-details-container"));
+        this.warningMessage = this.domNode.appendChild($(".warning-message"));
+        this.warningMessage.textContent = ( localize(6141, "Quality may decline as limit nears."));
+        this.warningMessage.style.display = "none";
+        this.actionsSection = this.domNode.appendChild($(".actions-section"));
+        this.actionsSection.appendChild($(".separator"));
+        const actionsHeader = this.actionsSection.appendChild($(".actions-header"));
+        actionsHeader.textContent = ( localize(6142, "Actions"));
+        const buttonBarContainer = this.actionsSection.appendChild($(".button-bar-container"));
+        this._register(this.instantiationService.createInstance(
+            MenuWorkbenchButtonBar,
+            buttonBarContainer,
+            MenuId.ChatContextUsageActions,
+            {
+                toolbarOptions: {
+                    primaryGroup: () => true
+                },
+                buttonConfigProvider: () => ({
+                    isSecondary: true
+                })
+            }
+        ));
+        const menu = this._register(
+            this.menuService.createMenu(MenuId.ChatContextUsageActions, this.contextKeyService)
+        );
+        const updateActionsVisibility = () => {
+            const actions = menu.getActions();
+            const hasActions = actions.length > 0 && ( actions.some(([, items]) => items.length > 0));
+            this.actionsSection.style.display = hasActions ? "" : "none";
+        };
+        this._register(menu.onDidChange(updateActionsVisibility));
+        updateActionsVisibility();
+    }
+    update(data) {
+        const {
+            percentage,
+            promptTokens,
+            maxInputTokens,
+            promptTokenDetails
+        } = data;
+        this.tokenCountLabel.textContent = ( localize(
+            6143,
+            "{0} / {1} tokens",
+            this.formatTokenCount(promptTokens, 1),
+            this.formatTokenCount(maxInputTokens, 0)
+        ));
+        this.percentageLabel.textContent = `• ${percentage.toFixed(0)}%`;
+        this.progressFill.style.width = `${Math.min(100, percentage)}%`;
+        this.quotaItem.classList.remove("warning", "error");
+        if (percentage >= 90) {
+            this.quotaItem.classList.add("error");
+        } else if (percentage >= 75) {
+            this.quotaItem.classList.add("warning");
+        }
+        this.renderTokenDetails(promptTokenDetails, percentage);
+        this.warningMessage.style.display = percentage >= 75 ? "" : "none";
+    }
+    formatTokenCount(count, decimals) {
+        if (count >= 1000000) {
+            return `${(count / 1000000).toFixed(decimals)}M`;
+        } else if (count >= 1000) {
+            return `${(count / 1000).toFixed(decimals)}K`;
+        }
+        return ( count.toString());
+    }
+    renderTokenDetails(details, contextWindowPercentage) {
+        clearNode(this.tokenDetailsContainer);
+        if (!details || details.length === 0) {
+            this.tokenDetailsContainer.style.display = "none";
+            return;
+        }
+        this.tokenDetailsContainer.style.display = "";
+        const categoryMap = ( new Map());
+        let totalPercentage = 0;
+        for (const detail of details) {
+            const existing = categoryMap.get(detail.category) || [];
+            existing.push({
+                label: detail.label,
+                percentageOfPrompt: detail.percentageOfPrompt
+            });
+            categoryMap.set(detail.category, existing);
+            totalPercentage += detail.percentageOfPrompt;
+        }
+        if (totalPercentage < 100) {
+            const uncategorizedPercentage = 100 - totalPercentage;
+            categoryMap.set(( localize(6144, "Uncategorized")), [{
+                label: ( localize(6145, "Other")),
+                percentageOfPrompt: uncategorizedPercentage
+            }]);
+        }
+        for (const [category, items] of categoryMap) {
+            const categorySection = this.tokenDetailsContainer.appendChild($(".token-category"));
+            const categoryHeader = categorySection.appendChild($(".token-category-header"));
+            categoryHeader.textContent = category;
+            for (const item of items) {
+                const itemRow = categorySection.appendChild($(".token-detail-item"));
+                const itemLabel = itemRow.appendChild($(".token-detail-label"));
+                itemLabel.textContent = item.label;
+                const contextRelativePercentage = (item.percentageOfPrompt / 100) * contextWindowPercentage;
+                const itemValue = itemRow.appendChild($(".token-detail-value"));
+                itemValue.textContent = `${contextRelativePercentage.toFixed(1)}%`;
+            }
+        }
+    }
+    focus() {
+        this.domNode.focus();
+    }
+};
+ChatContextUsageDetails = ( __decorate([( __param(0, IInstantiationService)), ( __param(1, IMenuService)), ( __param(2, IContextKeyService))], ChatContextUsageDetails));
+
+export { ChatContextUsageDetails };

package/vscode/src/vs/workbench/contrib/chat/browser/widgetHosts/viewPane/chatContextUsageWidget.d.ts

@@ -0,0 +1,56 @@
+import { Event } from "@codingame/monaco-vscode-api/vscode/vs/base/common/event";
+import { Disposable } from "@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle";
+import { IObservable } from "@codingame/monaco-vscode-api/vscode/vs/base/common/observable";
+import { IHoverService } from "@codingame/monaco-vscode-api/vscode/vs/platform/hover/browser/hover.service";
+import { IInstantiationService } from "@codingame/monaco-vscode-api/vscode/vs/platform/instantiation/common/instantiation";
+import { IChatRequestModel } from "@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/model/chatModel";
+import { ILanguageModelsService } from "@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/languageModels.service";
+/**
+ * A reusable circular progress indicator that displays a pie chart.
+ * The pie fills clockwise from the top based on the percentage value.
+ */
+export declare class CircularProgressIndicator {
+    readonly domNode: SVGSVGElement;
+    private readonly progressPie;
+    private static readonly CENTER_X;
+    private static readonly CENTER_Y;
+    private static readonly RADIUS;
+    constructor();
+    /**
+     * Updates the pie chart to display the given percentage (0-100).
+     * @param percentage The percentage of the pie to fill (clamped to 0-100)
+     */
+    setProgress(percentage: number): void;
+}
+/**
+ * Widget that displays the context/token usage for the current chat session.
+ * Shows a circular progress icon that expands on hover/focus to show token counts,
+ * and on click shows the detailed context usage widget.
+ */
+export declare class ChatContextUsageWidget extends Disposable {
+    private readonly hoverService;
+    private readonly instantiationService;
+    private readonly languageModelsService;
+    private readonly _onDidChangeVisibility;
+    readonly onDidChangeVisibility: Event<void>;
+    readonly domNode: HTMLElement;
+    private readonly progressIndicator;
+    private readonly _isVisible;
+    get isVisible(): IObservable<boolean>;
+    private readonly _lastRequestDisposable;
+    private readonly _hoverDisposable;
+    private readonly _contextUsageDetails;
+    private currentData;
+    constructor(hoverService: IHoverService, instantiationService: IInstantiationService, languageModelsService: ILanguageModelsService);
+    private setupHover;
+    /**
+     * Updates the widget with the latest request/response data.
+     * The model is retrieved from the request's modelId.
+     * @param lastRequest The last request in the session
+     */
+    update(lastRequest: IChatRequestModel | undefined): void;
+    private updateFromResponse;
+    private render;
+    private show;
+    private hide;
+}

package/vscode/src/vs/workbench/contrib/chat/browser/widgetHosts/viewPane/chatContextUsageWidget.js

@@ -0,0 +1,206 @@
+
+import { registerCss } from '@codingame/monaco-vscode-api/css';
+import { __decorate, __param } from '@codingame/monaco-vscode-api/external/tslib/tslib.es6';
+import * as chatContextUsageWidget from './media/chatContextUsageWidget.css';
+import { $ as $$1, addDisposableListener, EventType } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
+import { Emitter } from '@codingame/monaco-vscode-api/vscode/vs/base/common/event';
+import { Disposable, MutableDisposable, DisposableStore } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
+import '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/index';
+import { localize } from '@codingame/monaco-vscode-api/vscode/vs/nls';
+import { IHoverService } from '@codingame/monaco-vscode-api/vscode/vs/platform/hover/browser/hover.service';
+import { IInstantiationService } from '@codingame/monaco-vscode-api/vscode/vs/platform/instantiation/common/instantiation';
+import { ILanguageModelsService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/languageModels.service';
+import { ChatContextUsageDetails } from './chatContextUsageDetails.js';
+import { StandardKeyboardEvent } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/keyboardEvent';
+import { KeyCode } from '@codingame/monaco-vscode-api/vscode/vs/base/common/keyCodes';
+import { observableValue } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/observables/observableValue';
+import { autorun } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/reactions/autorun';
+
+registerCss(chatContextUsageWidget);
+const $ = $$1;
+class CircularProgressIndicator {
+    static {
+        this.CENTER_X = 18;
+    }
+    static {
+        this.CENTER_Y = 18;
+    }
+    static {
+        this.RADIUS = 16;
+    }
+    constructor() {
+        this.domNode = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        this.domNode.setAttribute("viewBox", "0 0 36 36");
+        this.domNode.classList.add("circular-progress");
+        const bgCircle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+        bgCircle.setAttribute("cx", String(CircularProgressIndicator.CENTER_X));
+        bgCircle.setAttribute("cy", String(CircularProgressIndicator.CENTER_Y));
+        bgCircle.setAttribute("r", String(CircularProgressIndicator.RADIUS));
+        bgCircle.classList.add("progress-bg");
+        this.domNode.appendChild(bgCircle);
+        this.progressPie = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        this.progressPie.classList.add("progress-pie");
+        this.domNode.appendChild(this.progressPie);
+    }
+    setProgress(percentage) {
+        const cx = CircularProgressIndicator.CENTER_X;
+        const cy = CircularProgressIndicator.CENTER_Y;
+        const r = CircularProgressIndicator.RADIUS;
+        if (percentage >= 100) {
+            this.progressPie.setAttribute("d", `M ${cx} ${cy - r} A ${r} ${r} 0 1 1 ${cx - 0.001} ${cy - r} Z`);
+        } else if (percentage <= 0) {
+            this.progressPie.setAttribute("d", "");
+        } else {
+            const angle = (percentage / 100) * 360;
+            const radians = (angle - 90) * (Math.PI / 180);
+            const x = cx + r * Math.cos(radians);
+            const y = cy + r * Math.sin(radians);
+            const largeArcFlag = angle > 180 ? 1 : 0;
+            const d = [
+            `M ${cx} ${cy}`,
+            `L ${cx} ${cy - r}`,
+            `A ${r} ${r} 0 ${largeArcFlag} 1 ${x} ${y}`,
+            "Z"].join(" ");
+            this.progressPie.setAttribute("d", d);
+        }
+    }
+}
+let ChatContextUsageWidget = class ChatContextUsageWidget extends Disposable {
+    get isVisible() {
+        return this._isVisible;
+    }
+    constructor(hoverService, instantiationService, languageModelsService) {
+        super();
+        this.hoverService = hoverService;
+        this.instantiationService = instantiationService;
+        this.languageModelsService = languageModelsService;
+        this._onDidChangeVisibility = this._register(( new Emitter()));
+        this.onDidChangeVisibility = this._onDidChangeVisibility.event;
+        this._isVisible = observableValue(this, false);
+        this._lastRequestDisposable = this._register(( new MutableDisposable()));
+        this._hoverDisposable = this._register(( new MutableDisposable()));
+        this._contextUsageDetails = this._register(( new MutableDisposable()));
+        this.domNode = $(".chat-context-usage-widget");
+        this.domNode.style.display = "none";
+        this.domNode.setAttribute("tabindex", "0");
+        this.domNode.setAttribute("role", "button");
+        this.domNode.setAttribute("aria-label", ( localize(6146, "Context window usage")));
+        const iconContainer = this.domNode.appendChild($(".icon-container"));
+        this.progressIndicator = ( new CircularProgressIndicator());
+        iconContainer.appendChild(this.progressIndicator.domNode);
+        this.setupHover();
+    }
+    setupHover() {
+        this._hoverDisposable.clear();
+        const store = ( new DisposableStore());
+        this._hoverDisposable.value = store;
+        const createDetails = () => {
+            if (!this._isVisible.get() || !this.currentData) {
+                return undefined;
+            }
+            this._contextUsageDetails.value = this.instantiationService.createInstance(ChatContextUsageDetails);
+            this._contextUsageDetails.value.update(this.currentData);
+            return this._contextUsageDetails.value;
+        };
+        const hoverOptions = {
+            appearance: {
+                showPointer: true,
+                compact: true
+            },
+            persistence: {
+                hideOnHover: false
+            },
+            trapFocus: true
+        };
+        store.add(this.hoverService.setupDelayedHover(this.domNode, () => ({
+            ...hoverOptions,
+            content: createDetails()?.domNode ?? ""
+        })));
+        const showStickyHover = () => {
+            const details = createDetails();
+            if (details) {
+                this.hoverService.showInstantHover({
+                    ...hoverOptions,
+                    content: details.domNode,
+                    target: this.domNode,
+                    persistence: {
+                        hideOnHover: false,
+                        sticky: true
+                    }
+                }, true);
+            }
+        };
+        store.add(addDisposableListener(this.domNode, EventType.CLICK, e => {
+            e.stopPropagation();
+            showStickyHover();
+        }));
+        store.add(addDisposableListener(this.domNode, EventType.KEY_DOWN, e => {
+            const evt = ( new StandardKeyboardEvent(e));
+            if (evt.equals(KeyCode.Space) || evt.equals(KeyCode.Enter)) {
+                e.preventDefault();
+                showStickyHover();
+            }
+        }));
+    }
+    update(lastRequest) {
+        this._lastRequestDisposable.clear();
+        if (!lastRequest?.response || !lastRequest.modelId) {
+            this.hide();
+            return;
+        }
+        const response = lastRequest.response;
+        const modelId = lastRequest.modelId;
+        this._lastRequestDisposable.value = autorun(reader => {
+            const isComplete = !response.isInProgress.read(reader);
+            if (isComplete) {
+                this.updateFromResponse(response, modelId);
+            }
+        });
+    }
+    updateFromResponse(response, modelId) {
+        const usage = response.result?.usage;
+        const modelMetadata = this.languageModelsService.lookupLanguageModel(modelId);
+        const maxInputTokens = modelMetadata?.maxInputTokens;
+        if (!usage || !maxInputTokens || maxInputTokens <= 0) {
+            this.hide();
+            return;
+        }
+        const promptTokens = usage.promptTokens;
+        const promptTokenDetails = usage.promptTokenDetails;
+        const percentage = Math.min(100, (promptTokens / maxInputTokens) * 100);
+        this.render(percentage, promptTokens, maxInputTokens, promptTokenDetails);
+        this.show();
+    }
+    render(percentage, promptTokens, maxTokens, promptTokenDetails) {
+        this.currentData = {
+            promptTokens,
+            maxInputTokens: maxTokens,
+            percentage,
+            promptTokenDetails
+        };
+        this.progressIndicator.setProgress(percentage);
+        this.domNode.classList.remove("warning", "error");
+        if (percentage >= 90) {
+            this.domNode.classList.add("error");
+        } else if (percentage >= 75) {
+            this.domNode.classList.add("warning");
+        }
+    }
+    show() {
+        if (this.domNode.style.display === "none") {
+            this.domNode.style.display = "";
+            this._isVisible.set(true, undefined);
+            this._onDidChangeVisibility.fire();
+        }
+    }
+    hide() {
+        if (this.domNode.style.display !== "none") {
+            this.domNode.style.display = "none";
+            this._isVisible.set(false, undefined);
+            this._onDidChangeVisibility.fire();
+        }
+    }
+};
+ChatContextUsageWidget = ( __decorate([( __param(0, IHoverService)), ( __param(1, IInstantiationService)), ( __param(2, ILanguageModelsService))], ChatContextUsageWidget));
+
+export { ChatContextUsageWidget, CircularProgressIndicator };

package/vscode/src/vs/workbench/contrib/chat/browser/widgetHosts/viewPane/media/chatContextUsageDetails.css

@@ -0,0 +1,152 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+/* Remove the outline and change border color on focus instead */
+.workbench-hover-container.locked:has(.chat-context-usage-details) .monaco-hover.workbench-hover {
+	outline: none;
+}
+.workbench-hover-container:focus-within.locked:has(.chat-context-usage-details) .monaco-hover.workbench-hover {
+	outline: none;
+	border-color: var(--vscode-focusBorder);
+}
+
+.chat-context-usage-details {
+	display: flex;
+	flex-direction: column;
+	padding: 4px 0;
+	min-width: 200px;
+}
+
+.chat-context-usage-details:focus {
+	outline: none;
+}
+
+/* Using same structure as ChatUsageWidget quota items */
+.chat-context-usage-details .quota-item {
+	margin-bottom: 4px;
+}
+
+.chat-context-usage-details .quota-item-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 2px;
+}
+
+.chat-context-usage-details .quota-item-label {
+	color: var(--vscode-foreground);
+}
+
+.chat-context-usage-details .quota-item-value {
+	color: var(--vscode-descriptionForeground);
+}
+
+.chat-context-usage-details .token-row {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	margin-bottom: 2px;
+}
+
+.chat-context-usage-details .token-count-label {
+	font-size: 12px;
+	color: var(--vscode-descriptionForeground);
+}
+
+/* Progress bar - matching chat usage implementation */
+.chat-context-usage-details .quota-item .quota-bar {
+	width: 100%;
+	height: 4px;
+	background-color: var(--vscode-gauge-background);
+	border-radius: 4px;
+	border: 1px solid var(--vscode-gauge-border);
+	margin: 2px 0;
+}
+
+.chat-context-usage-details .quota-item .quota-bar .quota-bit {
+	height: 100%;
+	background-color: var(--vscode-gauge-foreground);
+	border-radius: 4px;
+	transition: width 0.3s ease;
+}
+
+.chat-context-usage-details .quota-item.warning .quota-bar {
+	background-color: var(--vscode-gauge-warningBackground);
+}
+
+.chat-context-usage-details .quota-item.warning .quota-bar .quota-bit {
+	background-color: var(--vscode-gauge-warningForeground);
+}
+
+.chat-context-usage-details .quota-item.error .quota-bar {
+	background-color: var(--vscode-gauge-errorBackground);
+}
+
+.chat-context-usage-details .quota-item.error .quota-bar .quota-bit {
+	background-color: var(--vscode-gauge-errorForeground);
+}
+
+.chat-context-usage-details .warning-message {
+	font-size: 12px;
+	color: var(--vscode-descriptionForeground);
+	margin-bottom: 4px;
+}
+
+/* Token details breakdown */
+.chat-context-usage-details .token-details-container {
+	margin-top: 4px;
+}
+
+.chat-context-usage-details .token-category {
+	margin-bottom: 4px;
+}
+
+.chat-context-usage-details .token-category-header {
+	font-weight: 600;
+	color: var(--vscode-foreground);
+	margin-bottom: 2px;
+}
+
+.chat-context-usage-details .token-detail-item {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding-left: 8px;
+}
+
+.chat-context-usage-details .token-detail-label {
+	color: var(--vscode-foreground);
+}
+
+.chat-context-usage-details .token-detail-value {
+	color: var(--vscode-descriptionForeground);
+}
+
+.chat-context-usage-details .actions-section .separator {
+	border-top: 1px solid var(--vscode-editorHoverWidget-border);
+	margin: 4px 0;
+}
+
+.chat-context-usage-details .actions-section .actions-header {
+	font-weight: 600;
+	color: var(--vscode-foreground);
+	margin-bottom: 4px;
+}
+
+.chat-context-usage-details .actions-section .button-bar-container {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.chat-context-usage-details .actions-section .button-bar-container .monaco-button-bar {
+	flex-direction: column;
+	gap: 4px;
+}
+
+.chat-context-usage-details .actions-section .button-bar-container .monaco-button {
+	width: 100%;
+	justify-content: center;
+}

package/vscode/src/vs/workbench/contrib/chat/browser/widgetHosts/viewPane/media/chatContextUsageWidget.css

@@ -0,0 +1,67 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+.chat-context-usage-widget {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 22px;
+	flex-shrink: 0;
+	cursor: pointer;
+	padding: 3px;
+	border-radius: 5px;
+	box-sizing: border-box;
+}
+
+.chat-context-usage-widget .icon-container {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 16px;
+	height: 16px;
+	flex-shrink: 0;
+}
+
+.chat-context-usage-widget:hover {
+	background-color: var(--vscode-toolbar-hoverBackground);
+	outline: 1px dashed var(--vscode-toolbar-hoverOutline);
+	outline-offset: -1px;
+}
+
+.chat-context-usage-widget:focus {
+	outline: 1px solid var(--vscode-focusBorder);
+	outline-offset: -1px;
+}
+
+.chat-context-usage-widget:active {
+	background-color: var(--vscode-toolbar-activeBackground);
+}
+
+.chat-context-usage-widget .circular-progress {
+	width: 100%;
+	height: 100%;
+	pointer-events: none;
+}
+
+.chat-context-usage-widget .progress-bg {
+	fill: transparent;
+	stroke: var(--vscode-icon-foreground);
+	stroke-width: 2;
+	opacity: 0.4;
+}
+
+.chat-context-usage-widget .progress-pie {
+	fill: var(--vscode-icon-foreground);
+	opacity: 0.8;
+	pointer-events: none;
+}
+
+.chat-context-usage-widget.warning .progress-pie {
+	fill: var(--vscode-editorWarning-foreground);
+}
+
+.chat-context-usage-widget.error .progress-pie {
+	fill: var(--vscode-editorError-foreground);
+}

package/vscode/src/vs/workbench/contrib/chat/common/widget/annotations.d.ts

@@ -0,0 +1,22 @@
+import { URI } from "@codingame/monaco-vscode-api/vscode/vs/base/common/uri";
+import { IRange } from "@codingame/monaco-vscode-api/vscode/vs/editor/common/core/range";
+import { IChatProgressRenderableResponseContent, IChatProgressResponseContent } from "@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/model/chatModel";
+export declare const contentRefUrl = "http://_vscodecontentref_";
+export declare function annotateSpecialMarkdownContent(response: Iterable<IChatProgressResponseContent>): IChatProgressRenderableResponseContent[];
+export interface IMarkdownVulnerability {
+    readonly title: string;
+    readonly description: string;
+    readonly range: IRange;
+}
+export declare function extractCodeblockUrisFromText(text: string): {
+    uri: URI;
+    isEdit?: boolean;
+    subAgentInvocationId?: string;
+    textWithoutResult: string;
+} | undefined;
+export declare function extractSubAgentInvocationIdFromText(text: string): string | undefined;
+export declare function hasCodeblockUriTag(text: string): boolean;
+export declare function extractVulnerabilitiesFromText(text: string): {
+    newText: string;
+    vulnerabilities: IMarkdownVulnerability[];
+};