@codingame/monaco-vscode-katex-common 27.0.0 → 28.0.0

package/vscode/src/vs/workbench/contrib/chat/browser/widget/media/chat.css

@@ -313,10 +313,13 @@
 	font-weight: 600;
 }
 
-.interactive-item-container .value .rendered-markdown table {
+.interactive-item-container .value .rendered-markdown .rendered-markdown-table-scroll-wrapper {
 	width: 100%;
-	text-align: left;
 	margin-bottom: 16px;
+}
+
+.interactive-item-container .value .rendered-markdown table {
+	text-align: left;
 	border-radius: var(--vscode-cornerRadius-medium);
 	overflow: hidden;
 	border-collapse: separate;
@@ -332,6 +335,11 @@
 	padding: 4px 6px;
 }
 
+.interactive-item-container .value .rendered-markdown table th {
+	white-space: normal;
+	overflow-wrap: break-word;
+}
+
 .interactive-item-container .value .rendered-markdown table td:last-child,
 .interactive-item-container .value .rendered-markdown table th:last-child {
 	border-right: none;
@@ -812,11 +820,26 @@ have to be updated for changes to the rules above, or to support more deeply nes
 	position: relative;
 }
 
-/* Context usage widget container - positioned in the bottom toolbar */
-.interactive-session .chat-input-toolbars .chat-context-usage-container {
+/* Prevent contents from covering border corners. Not applied in compact mode
+	because overflow:hidden creates a BFC that causes a ResizeObserver ↔ layout
+	feedback loop when toolbars share width with the editor. */
+.interactive-session .interactive-input-part:not(.compact) .chat-input-container {
+	/* Prevent contents from covering border corner */
+	overflow: hidden;
+}
+
+/* Context usage widget container - positioned in the secondary toolbar below input */
+.interactive-session .chat-input-toolbars .chat-context-usage-container,
+.interactive-session .chat-secondary-toolbar .chat-context-usage-container {
 	display: flex;
 	align-items: center;
 	flex-shrink: 0;
+	margin-left: auto;
+	order: 1;
+}
+
+/* When context usage is inside the toolbars (compact mode), keep the ordering */
+.interactive-session .chat-input-toolbars .chat-context-usage-container {
 	order: 1;
 }
 
@@ -1257,6 +1280,8 @@ have to be updated for changes to the rules above, or to support more deeply nes
 	display: flex;
 	justify-content: space-between;
 	padding-bottom: 0;
+	/* no scrollbar */
+	padding-right: 6px;
 	border-radius: var(--vscode-cornerRadius-small);
 }
 
@@ -1272,7 +1297,12 @@ have to be updated for changes to the rules above, or to support more deeply nes
 }
 
 .chat-editor-container {
-	padding: 0 4px;
+	padding: 0 0 0 4px;
+}
+
+.interactive-session .interactive-input-part.compact .chat-editor-container {
+	/* No scrollbar */
+	padding-right: 4px;
 }
 
 .chat-editor-container .monaco-editor .mtk1 {
@@ -1313,10 +1343,94 @@ have to be updated for changes to the rules above, or to support more deeply nes
 	margin-top: 4px;
 }
 
+/* Secondary toolbar below the input box */
+.interactive-session .chat-secondary-toolbar {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	padding: 0 4px 0 5px;
+}
+
+.interactive-session .chat-secondary-toolbar:empty {
+	display: none;
+}
+
+.interactive-session .chat-secondary-toolbar > .chat-secondary-input-toolbar {
+	overflow: hidden;
+	min-width: 0px;
+	color: var(--vscode-icon-foreground);
+
+	.monaco-action-bar .action-item .codicon {
+		color: var(--vscode-icon-foreground);
+	}
+
+	.chat-input-picker-item {
+		min-width: 0px;
+		overflow: hidden;
+
+		.action-label {
+			min-width: 0px;
+			overflow: hidden;
+			position: relative;
+
+			.chat-input-picker-label {
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+
+			span + .chat-input-picker-label {
+				margin-left: 2px;
+			}
+
+			.codicon {
+				font-size: 12px;
+			}
+		}
+
+		.codicon {
+			flex-shrink: 0;
+		}
+	}
+}
+
+.interactive-session .chat-secondary-toolbar .chat-input-picker-item .action-label {
+	height: 16px;
+	padding: 3px 0px 3px 6px;
+	display: flex;
+	align-items: center;
+	color: var(--vscode-icon-foreground);
+}
+
+.interactive-session .chat-secondary-toolbar .chat-input-picker-item .action-label.warning {
+	color: var(--vscode-problemsWarningIcon-foreground);
+}
+
+.interactive-session .chat-secondary-toolbar .chat-input-picker-item .action-label.warning .codicon {
+	color: var(--vscode-problemsWarningIcon-foreground) !important;
+}
+
+.interactive-session .chat-secondary-toolbar .chat-input-picker-item .action-label.info {
+	color: var(--vscode-problemsInfoIcon-foreground);
+}
+
+.interactive-session .chat-secondary-toolbar .chat-input-picker-item .action-label.info .codicon {
+	color: var(--vscode-problemsInfoIcon-foreground) !important;
+}
+
+.monaco-workbench .interactive-session .chat-secondary-toolbar .chat-input-picker-item .action-label .codicon-chevron-down {
+	font-size: 10px;
+	margin-left: 4px;
+	opacity: 0.75;
+}
+
 .interactive-session .chat-input-toolbars :not(.responsive.chat-input-toolbar) .actions-container:first-child {
 	margin-right: auto;
 }
 
+.interactive-session .chat-input-toolbars > .chat-input-toolbar .actions-container:first-child {
+	margin-right: 0;
+}
+
 .interactive-session .chat-input-toolbars .tool-warning-indicator {
 	position: absolute;
 	bottom: 0;
@@ -1394,19 +1508,57 @@ have to be updated for changes to the rules above, or to support more deeply nes
 .interactive-session .chat-input-toolbar .chat-input-picker-item .action-label,
 .interactive-session .chat-input-toolbar .chat-sessionPicker-item .action-label {
 	height: 16px;
-	padding: 3px 0px 3px 6px;
+	padding: 3px 1px 3px 7px;
 	display: flex;
 	align-items: center;
 	color: var(--vscode-icon-foreground);
 }
 
+/* Keep hover background while picker dropdown is open */
+.interactive-session .chat-input-toolbar .action-label[aria-expanded="true"],
+.interactive-session .chat-secondary-toolbar .action-label[aria-expanded="true"] {
+	background-color: var(--vscode-toolbar-hoverBackground);
+}
+
+/* When chevrons are hidden and only showing an icon (no label), size to 22x22 with centered icon */
+.interactive-session .chat-input-toolbar .chat-input-picker-item .action-label.hide-chevrons:not(:has(.chat-input-picker-label)),
+.interactive-session .chat-input-toolbar .chat-input-picker-item.hide-chevrons .action-label:not(:has(.chat-input-picker-label)),
+.interactive-session .chat-input-toolbar .chat-sessionPicker-item .action-label.hide-chevrons:not(:has(.chat-input-picker-label)) {
+	width: 22px;
+	min-width: 22px;
+	height: 22px;
+	padding: 0;
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	.codicon {
+		justify-content: center;
+	}
+}
+
+
+/* Add context button icon sizing */
+.interactive-session .chat-input-toolbar .action-item:has(.codicon-add) .action-label {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.interactive-session .chat-input-toolbar .action-item:has(.codicon-add) .codicon-add {
+	font-size: 14px;
+}
+
 .monaco-workbench .interactive-session .chat-input-toolbar .chat-input-picker-item .action-label .codicon-chevron-down,
 .monaco-workbench .interactive-session .chat-input-toolbar .chat-sessionPicker-item .action-label .codicon-chevron-down {
-	font-size: 12px;
-	margin-left: 2px;
+	font-size: 10px;
+	margin-left: 4px;
+	opacity: 0.75;
 }
 
-.interactive-session .chat-input-toolbars .monaco-action-bar .actions-container {
+.interactive-session .chat-input-toolbars .monaco-action-bar .actions-container,
+.interactive-session .chat-secondary-toolbar .monaco-action-bar .actions-container {
 	display: flex;
 	gap: 4px;
 }
@@ -1436,6 +1588,18 @@ have to be updated for changes to the rules above, or to support more deeply nes
 	color: var(--vscode-textLink-activeForeground);
 }
 
+.action-widget .action-list-filter-input.chat-model-picker-filter-input,
+.action-widget .action-list-filter-input.chat-model-picker-filter-input:focus {
+	outline: none;
+	box-shadow: none;
+	border-color: transparent;
+	background-color: transparent;
+}
+
+.action-widget .action-list-filter:has(.chat-model-picker-filter-input) {
+	margin-bottom: 4px;
+}
+
 .interactive-session .chat-input-toolbars .codicon-debug-stop {
 	color: var(--vscode-icon-foreground) !important;
 }
@@ -1606,7 +1770,7 @@ have to be updated for changes to the rules above, or to support more deeply nes
 
 .interactive-session .interactive-input-part {
 	margin: 0px 12px;
-	padding: 4px 0 12px 0px;
+	padding: 4px 0 4px 0px;
 	display: flex;
 	flex-direction: column;
 	gap: 4px;

package/vscode/src/vs/workbench/contrib/chat/browser/widget/media/chatViewWelcome.css

@@ -16,7 +16,7 @@
 
 .interactive-session.chat-view-getting-started-disabled {
 
-	/* hide most welcome pieces (except suggested actions) when we show recent sessions to make some space */
+	/* hide most welcome pieces when we show recent sessions to make some space */
 	.chat-welcome-view .chat-welcome-view-icon,
 	.chat-welcome-view .chat-welcome-view-title,
 	.chat-welcome-view .chat-welcome-view-message,
@@ -157,7 +157,7 @@ div.chat-welcome-view {
 	}
 
 	& > .chat-welcome-view-disclaimer {
-		color: var(--vscode-input-placeholderForeground);
+		color: var(--vscode-descriptionForeground);
 		text-align: center;
 		margin: 0;
 		max-width: 256px;
@@ -225,16 +225,6 @@ div.chat-welcome-view {
 			color: var(--vscode-editorWidget-foreground);
 			white-space: nowrap;
 		}
-
-		& > .chat-welcome-view-suggested-prompt-description {
-			font-size: 11px;
-			color: var(--vscode-descriptionForeground);
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-			flex: 0 1 auto;
-			min-width: 0;
-		}
 	}
 
 	> .chat-welcome-view-suggested-prompt:hover {

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

@@ -20,23 +20,19 @@ let ChatContextUsageDetails = class ChatContextUsageDetails extends Disposable {
         this.menuService = menuService;
         this.contextKeyService = contextKeyService;
         this.domNode = $(".chat-context-usage-details");
-        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(6774, "Context Window"));
-        const tokenRow = this.quotaItem.appendChild($(".token-row"));
-        this.tokenCountLabel = tokenRow.appendChild($(".token-count-label"));
-        this.percentageLabel = tokenRow.appendChild($(".quota-item-value"));
+        this.quotaItem = this.domNode.appendChild($(".quota-indicator"));
+        const header = this.domNode.insertBefore($("div.header"), this.quotaItem);
+        header.textContent = ( localize(6886, "Context Window"));
+        const quotaLabel = this.quotaItem.appendChild($(".quota-label"));
+        this.tokenCountLabel = quotaLabel.appendChild($("span"));
+        this.percentageLabel = quotaLabel.appendChild($("span.quota-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(6775, "Quality may decline as limit nears."));
+        this.warningMessage = this.domNode.appendChild($("div.description"));
+        this.warningMessage.textContent = ( localize(6887, "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(6776, "Actions"));
         const buttonBarContainer = this.actionsSection.appendChild($(".button-bar-container"));
         this._register(this.instantiationService.createInstance(
             MenuWorkbenchButtonBar,
@@ -70,12 +66,12 @@ let ChatContextUsageDetails = class ChatContextUsageDetails extends Disposable {
             promptTokenDetails
         } = data;
         this.tokenCountLabel.textContent = ( localize(
-            6777,
+            6888,
             "{0} / {1} tokens",
             this.formatTokenCount(usedTokens, 1),
             this.formatTokenCount(totalContextWindow, 0)
         ));
-        this.percentageLabel.textContent = `• ${percentage.toFixed(0)}%`;
+        this.percentageLabel.textContent = ( localize(6889, "{0}%", percentage.toFixed(0)));
         this.progressFill.style.width = `${Math.min(100, percentage)}%`;
         this.quotaItem.classList.remove("warning", "error");
         if (percentage >= 90) {
@@ -115,8 +111,8 @@ let ChatContextUsageDetails = class ChatContextUsageDetails extends Disposable {
         }
         if (totalPercentage < 100) {
             const uncategorizedPercentage = 100 - totalPercentage;
-            categoryMap.set(( localize(6778, "Uncategorized")), [{
-                label: ( localize(6779, "Other")),
+            categoryMap.set(( localize(6890, "Uncategorized")), [{
+                label: ( localize(6891, "Other")),
                 percentageOfPrompt: uncategorizedPercentage
             }]);
         }

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

@@ -42,6 +42,7 @@ export declare class ChatContextUsageWidget extends Disposable {
     readonly onDidChangeVisibility: Event<void>;
     readonly domNode: HTMLElement;
     private readonly progressIndicator;
+    private readonly percentageLabel;
     private readonly _isVisible;
     get isVisible(): IObservable<boolean>;
     private readonly _lastRequestDisposable;

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

@@ -110,10 +110,11 @@ let ChatContextUsageWidget = class ChatContextUsageWidget extends Disposable {
         this.domNode.style.display = "none";
         this.domNode.setAttribute("tabindex", "0");
         this.domNode.setAttribute("role", "button");
-        this.domNode.setAttribute("aria-label", ( localize(6780, "Context window usage")));
+        this.domNode.setAttribute("aria-label", ( localize(6892, "Context window usage")));
         const iconContainer = this.domNode.appendChild($(".icon-container"));
         this.progressIndicator = ( new CircularProgressIndicator());
         iconContainer.appendChild(this.progressIndicator.domNode);
+        this.percentageLabel = this.domNode.appendChild($(".percentage-label"));
         this._contextUsageOpenedKey = ChatContextKeys.contextUsageHasBeenOpened.bindTo(this.contextKeyService);
         if (this.storageService.getBoolean(
             ChatContextUsageWidget_1._OPENED_STORAGE_KEY,
@@ -238,6 +239,9 @@ let ChatContextUsageWidget = class ChatContextUsageWidget extends Disposable {
             promptTokenDetails
         };
         this.progressIndicator.setProgress(percentage);
+        const roundedPercentage = Math.round(percentage);
+        this.percentageLabel.textContent = `${roundedPercentage}%`;
+        this.domNode.setAttribute("aria-label", ( localize(6893, "Context window usage: {0}%", roundedPercentage)));
         this.domNode.classList.remove("warning", "error");
         if (percentage >= 90) {
             this.domNode.classList.add("error");

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

@@ -15,7 +15,8 @@
 .chat-context-usage-details {
 	display: flex;
 	flex-direction: column;
-	padding: 4px 0;
+	margin-top: 4px;
+	margin-bottom: 4px;
 	min-width: 200px;
 }
 
@@ -23,97 +24,88 @@
 	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 {
+/* Section headers — matching ChatStatusDashboard */
+.chat-context-usage-details div.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);
+	margin-bottom: 4px;
+	font-weight: 600;
 }
 
-.chat-context-usage-details .token-row {
+/* Quota indicator — matching ChatStatusDashboard */
+.chat-context-usage-details .quota-indicator .quota-label {
 	display: flex;
-	align-items: center;
-	gap: 4px;
-	margin-bottom: 2px;
+	justify-content: space-between;
+	gap: 20px;
+	margin-bottom: 3px;
 }
 
-.chat-context-usage-details .token-count-label {
-	font-size: 12px;
+.chat-context-usage-details .quota-indicator .quota-label .quota-value {
 	color: var(--vscode-descriptionForeground);
 }
 
-/* Progress bar - matching chat usage implementation */
-.chat-context-usage-details .quota-item .quota-bar {
+.chat-context-usage-details .quota-indicator .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;
+	margin: 4px 0;
 }
 
-.chat-context-usage-details .quota-item .quota-bar .quota-bit {
+.chat-context-usage-details .quota-indicator .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 {
+.chat-context-usage-details .quota-indicator.warning .quota-bar {
 	background-color: var(--vscode-gauge-warningBackground);
 }
 
-.chat-context-usage-details .quota-item.warning .quota-bar .quota-bit {
+.chat-context-usage-details .quota-indicator.warning .quota-bar .quota-bit {
 	background-color: var(--vscode-gauge-warningForeground);
 }
 
-.chat-context-usage-details .quota-item.error .quota-bar {
+.chat-context-usage-details .quota-indicator.error .quota-bar {
 	background-color: var(--vscode-gauge-errorBackground);
 }
 
-.chat-context-usage-details .quota-item.error .quota-bar .quota-bit {
+.chat-context-usage-details .quota-indicator.error .quota-bar .quota-bit {
 	background-color: var(--vscode-gauge-errorForeground);
 }
 
-.chat-context-usage-details .warning-message {
-	font-size: 12px;
+/* Description / warning text — matching ChatStatusDashboard */
+.chat-context-usage-details div.description {
+	font-size: 11px;
 	color: var(--vscode-descriptionForeground);
-	margin-bottom: 4px;
+	display: flex;
+	align-items: center;
+	gap: 3px;
 }
 
 /* Token details breakdown */
-.chat-context-usage-details .token-details-container {
-	margin-top: 4px;
-}
-
 .chat-context-usage-details .token-category {
-	margin-bottom: 4px;
+	margin-bottom: 6px;
 }
 
 .chat-context-usage-details .token-category-header {
+	display: flex;
+	align-items: center;
+	color: var(--vscode-descriptionForeground);
+	margin-top: 16px;
+	margin-bottom: 4px;
 	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;
+	gap: 20px;
+	margin-bottom: 2px;
 }
 
 .chat-context-usage-details .token-detail-label {
@@ -124,15 +116,9 @@
 	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;
+/* Actions section */
+.chat-context-usage-details .actions-section {
+	margin-top: 8px;
 }
 
 .chat-context-usage-details .actions-section .button-bar-container {

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

@@ -6,9 +6,7 @@
 .chat-context-usage-widget {
 	display: flex;
 	align-items: center;
-	justify-content: center;
-	height: 22px;
-	width: 22px;
+	gap: 4px;
 	flex-shrink: 0;
 	cursor: pointer;
 	padding: 3px;
@@ -55,7 +53,7 @@
 
 .chat-context-usage-widget .progress-arc {
 	fill: none;
-	stroke: var(--vscode-descriptionForeground);
+	stroke: var(--vscode-icon-foreground);
 	stroke-width: 4;
 	stroke-linecap: round;
 	transform: rotate(-90deg);
@@ -70,3 +68,20 @@
 .chat-context-usage-widget.error .progress-arc {
 	stroke: var(--vscode-editorError-foreground);
 }
+
+.chat-context-usage-widget .percentage-label {
+	font-size: 11px;
+	line-height: 1;
+	color: var(--vscode-descriptionForeground);
+	white-space: nowrap;
+	max-width: 0;
+	opacity: 0;
+	overflow: hidden;
+	transition: max-width 0.1s ease-out, opacity 0.1s ease-out;
+}
+
+.chat-context-usage-widget:hover .percentage-label,
+.chat-context-usage-widget:focus .percentage-label {
+	max-width: 4em;
+	opacity: 1;
+}

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

@@ -64,12 +64,24 @@ function annotateSpecialMarkdownContent(response) {
                     });
                 }
             }
-        } else if (item.kind === "markdownContent" && previousItem?.kind === "markdownContent" && canMergeMarkdownStrings(previousItem.content, item.content)) {
-            const merged = appendMarkdownString(previousItem.content, item.content);
-            result[previousItemIndex] = {
-                ...previousItem,
-                content: merged
-            };
+        } else if (item.kind === "markdownContent" && previousItem?.kind === "markdownContent") {
+            if (canMergeMarkdownStrings(previousItem.content, item.content)) {
+                const merged = appendMarkdownString(previousItem.content, item.content);
+                result[previousItemIndex] = {
+                    ...previousItem,
+                    content: merged
+                };
+            } else if (previousItem.inlineReferences && isContentRefOnly(previousItem.content.value)) {
+                result[previousItemIndex] = {
+                    ...previousItem,
+                    content: {
+                        ...item.content,
+                        value: previousItem.content.value + item.content.value
+                    }
+                };
+            } else {
+                result.push(item);
+            }
         } else if (item.kind === "markdownVuln") {
             const vulnText = encodeURIComponent(JSON.stringify(item.vulnerabilities));
             const markdownText = `<vscode_annotation details='${vulnText}'>${item.content.value}</vscode_annotation>`;
@@ -103,6 +115,10 @@ function annotateSpecialMarkdownContent(response) {
     }
     return result;
 }
+const contentRefPattern = ( new RegExp(`^(\\[.*?\\]\\(${contentRefUrl}/\\d+\\))+$`));
+function isContentRefOnly(text) {
+    return contentRefPattern.test(text);
+}
 function isInsideCodeContext(text) {
     const lines = text.split("\n");
     let inFencedBlock = false;