@codingame/monaco-vscode-katex-common 25.1.2 → 26.0.1

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

@@ -30,6 +30,10 @@
 	display: none !important;
 }
 
+.interactive-list > .chat-scroll-down {
+	padding: 4px;
+}
+
 .interactive-item-container {
 	padding: 12px 16px;
 	display: flex;
@@ -116,6 +120,15 @@
 	}
 }
 
+@keyframes chat-thinking-shimmer {
+	0% {
+		background-position: 120% 0;
+	}
+	100% {
+		background-position: -120% 0;
+	}
+}
+
 .interactive-item-container .chat-animated-ellipsis::after {
 	content: '';
 	white-space: nowrap;
@@ -261,7 +274,7 @@
 }
 
 .interactive-item-container > .value .chat-used-context {
-	margin-bottom: 8px;
+	margin-bottom: 10px;
 }
 
 .interactive-item-container .value .rendered-markdown:not(:has(.chat-extensions-content-part)) {
@@ -536,6 +549,21 @@
 			font-size: var(--vscode-chat-font-size-body-m);
 		}
 
+		.webview-output {
+			position: relative;
+		}
+
+		.progress-container {
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			margin: auto;
+			width: fit-content;
+			height: fit-content;
+		}
+
 		.output-error {
 			margin: 6px 4px;
 			color: var(--vscode-errorForeground);
@@ -559,16 +587,7 @@
 	}
 
 	&:not(:last-child) {
-		margin-bottom: 8px;
-	}
-}
-
-.interactive-item-container .value .from-sub-agent {
-	&.chat-tool-invocation-part,
-	&.chat-confirmation-widget,
-	&.chat-terminal-confirmation-widget,
-	&.chat-codeblock-pill-widget {
-		margin-left: 18px;
+		margin-bottom: 12px;
 	}
 }
 
@@ -757,6 +776,20 @@ have to be updated for changes to the rules above, or to support more deeply nes
 	padding: 0 6px 6px 6px;
 	/* top padding is inside the editor widget */
 	width: 100%;
+	position: relative;
+}
+
+/* Context usage widget container - positioned at top right of chat input */
+.interactive-session .chat-input-container .chat-context-usage-container {
+	position: absolute;
+	top: 4px;
+	right: 6px;
+	z-index: 1;
+}
+
+/* Hide context usage widget in compact mode (quick chat) */
+.interactive-session .interactive-input-part.compact .chat-context-usage-container {
+	display: none;
 }
 
 .interactive-input-part:has(.chat-editing-session > .chat-editing-session-container) .chat-input-container,
@@ -776,7 +809,7 @@ have to be updated for changes to the rules above, or to support more deeply nes
 }
 
 .interactive-session .chat-editing-session .chat-editing-session-container {
-	padding: 6px 3px 6px 3px;
+	padding: 4px 3px 4px 3px;
 	box-sizing: border-box;
 	background-color: var(--vscode-editor-background);
 	border: 1px solid var(--vscode-input-border, transparent);
@@ -817,13 +850,15 @@ have to be updated for changes to the rules above, or to support more deeply nes
 	flex-direction: row;
 	justify-content: space-between;
 	gap: 6px;
-	padding-right: 4px;
+	padding-right: 3px;
+	height: 22px;
+	line-height: 22px;
 	cursor: pointer;
 }
 
 .interactive-session .chat-editing-session .chat-editing-session-container .chat-editing-session-overview > .working-set-title {
 	color: var(--vscode-descriptionForeground);
-	font-size: 11px;
+	font-size: 12px;
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -839,6 +874,7 @@ have to be updated for changes to the rules above, or to support more deeply nes
 	display: inline-flex;
 	gap: 4px;
 	margin-left: 6px;
+	font-size: 11px;
 	font-weight: 500;
 }
 
@@ -851,7 +887,7 @@ have to be updated for changes to the rules above, or to support more deeply nes
 }
 
 .interactive-session .chat-editing-session .chat-editing-session-list .working-set-line-counts {
-	margin-left: 6px;
+	margin: 0 6px;
 	display: inline-flex;
 	gap: 4px;
 	font-size: 11px;
@@ -900,10 +936,7 @@ have to be updated for changes to the rules above, or to support more deeply nes
 }
 
 .interactive-session .chat-editing-session .monaco-button {
-	height: 18px;
 	width: fit-content;
-	padding: 2px 6px;
-	font-size: 11px;
 }
 
 .interactive-session .chat-editing-session .chat-editing-session-toolbar-actions .monaco-button:hover {
@@ -948,98 +981,20 @@ have to be updated for changes to the rules above, or to support more deeply nes
 	flex-direction: row;
 	gap: 4px;
 	margin-top: 6px;
+	margin-right: 20px;
 	flex-wrap: wrap;
 	cursor: default;
 }
 
-.chat-related-files {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: 4px;
-	max-width: 100%;
-}
-
-.chat-related-files .monaco-button-dropdown .monaco-text-button {
-	font-size: 11px;
-	justify-content: left;
-	width: fit-content;
-	padding: 0px;
-	border: none;
-	height: 18px;
-}
-
-.chat-related-files .monaco-button-dropdown .monaco-text-button span {
-	font-style: italic;
-	height: 18px;
-	opacity: 0.7;
-}
-
-.chat-related-files .monaco-button-dropdown {
-	border-radius: 4px;
-	height: 18px;
-	border: 1px solid var(--vscode-input-border);
-	border-style: dashed;
-	align-items: center;
-	overflow: hidden;
-	gap: 2px;
-	padding: 0 4px;
-}
-
-.chat-related-files .monaco-button.codicon.codicon-add {
-	display: flex;
-	flex-direction: column;
-	color: var(--vscode-descriptionForeground);
-	padding-top: 3px;
-	margin-left: -4px;
-	padding-left: 4px;
-	font-size: 14px;
-	/* The + codicon is large, make it look more like the x codicon */
-	height: calc(100% - 3px);
-	width: 17px;
-	outline-offset: -2px !important;
-}
-
-.interactive-session .chat-related-files .monaco-icon-label::before {
-	padding: 4px 3px 0 2px;
-}
-
-.interactive-session .chat-editing-session .chat-related-files .monaco-button.secondary:first-child {
-	margin: 3px 0px 3px 3px;
-	flex-shrink: 0;
-}
-
-.interactive-session .chat-editing-session .chat-related-files .monaco-button.secondary.monaco-icon-label::before {
-	display: inline-flex;
-	align-items: center;
-}
-
-.interactive-session .chat-editing-session .chat-related-files .monaco-button.secondary:only-child {
-	width: 100%;
-}
-
-.interactive-session .chat-editing-session .chat-related-files .monaco-button.secondary.disabled {
-	cursor: initial;
-}
-
-.interactive-session .chat-editing-session .chat-related-files .monaco-button.secondary .codicon {
-	font-size: 12px;
-	margin-left: 4px;
-}
-
 .interactive-session .chat-editing-session .chat-editing-session-actions .monaco-button.secondary.monaco-text-button.codicon {
-	background-color: transparent;
-	border-color: transparent;
-	color: var(--vscode-foreground);
 	cursor: pointer;
-	padding: 0px;
-	border-radius: 2px;
+	padding: 2px;
+	border-radius: 4px;
 	display: inline-flex;
 }
 
 .interactive-session .chat-editing-session .chat-editing-session-actions .monaco-button.secondary.monaco-text-button {
 	background-color: var(--vscode-button-secondaryBackground);
-	border: 1px solid var(--vscode-button-border);
 	color: var(--vscode-button-secondaryForeground);
 }
 
@@ -1053,7 +1008,6 @@ have to be updated for changes to the rules above, or to support more deeply nes
 	background-color: var(--vscode-toolbar-hoverBackground);
 }
 
-.interactive-session .chat-editing-session .chat-editing-session-actions .monaco-button.secondary.monaco-text-button.codicon:not(.disabled):hover,
 .interactive-session .chat-editing-session .chat-editing-session-toolbar-actions .monaco-button:hover {
 	background-color: var(--vscode-toolbar-hoverBackground);
 }
@@ -1105,7 +1059,7 @@ have to be updated for changes to the rules above, or to support more deeply nes
 }
 
 .interactive-session .interactive-input-part > .chat-todo-list-widget-container .chat-todo-list-widget {
-	padding: 6px 3px 6px 3px;
+	padding: 4px 3px 4px 3px;
 	box-sizing: border-box;
 	border: 1px solid var(--vscode-input-border, transparent);
 	background-color: var(--vscode-editor-background);
@@ -1144,16 +1098,16 @@ have to be updated for changes to the rules above, or to support more deeply nes
 	display: flex;
 	align-items: center;
 	flex: 1;
-	font-size: 11px;
+	font-size: 12px;
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
-	line-height: 16px;
+	line-height: 22px;
 }
 
 .interactive-session .interactive-input-part > .chat-todo-list-widget-container .chat-todo-list-widget .todo-list-expand .todo-list-title-section .codicon {
 	font-size: 16px;
-	line-height: 16px;
+	line-height: 22px;
 	flex-shrink: 0;
 }
 
@@ -1171,14 +1125,12 @@ have to be updated for changes to the rules above, or to support more deeply nes
 	color: var(--vscode-foreground);
 	cursor: pointer;
 	height: 16px;
-	padding: 2px;
+	padding: 3px;
 	border-radius: 2px;
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
 	min-width: unset;
-	width: 14px;
-	margin-right: 1px;
 }
 
 .interactive-session .interactive-input-part > .chat-todo-list-widget-container .chat-todo-list-widget .todo-clear-button-container .monaco-button:hover {
@@ -1203,7 +1155,7 @@ have to be updated for changes to the rules above, or to support more deeply nes
 
 .interactive-session .interactive-input-part > .chat-todo-list-widget-container .chat-todo-list-widget .todo-list-title {
 	font-weight: normal;
-	font-size: 11px;
+	font-size: 12px;
 	display: flex;
 	align-items: center;
 	overflow: hidden;
@@ -1323,7 +1275,7 @@ have to be updated for changes to the rules above, or to support more deeply nes
 	display: flex;
 }
 
-.interactive-session .chat-input-toolbars :first-child {
+.interactive-session .chat-input-toolbars :not(.responsive.chat-input-toolbar) .actions-container:first-child {
 	margin-right: auto;
 }
 
@@ -1342,14 +1294,17 @@ have to be updated for changes to the rules above, or to support more deeply nes
 .interactive-session .chat-input-toolbars > .chat-input-toolbar {
 	overflow: hidden;
 	min-width: 0px;
+	width: 100%;
 
-	.chat-modelPicker-item {
+	.chat-input-picker-item {
 		min-width: 0px;
+		overflow: hidden;
 
 		.action-label {
 			min-width: 0px;
+			overflow: hidden;
 
-			.chat-model-label {
+			.chat-input-picker-label {
 				overflow: hidden;
 				text-overflow: ellipsis;
 			}
@@ -1358,9 +1313,19 @@ have to be updated for changes to the rules above, or to support more deeply nes
 				color: var(--vscode-problemsWarningIcon-foreground);
 			}
 
-			span + .chat-model-label {
+			span + .chat-input-picker-label {
 				margin-left: 2px;
 			}
+
+			.codicon {
+				font-size: 12px;
+			}
+		}
+
+		.action-label.disabled {
+			.codicon {
+				color: var(--vscode-disabledForeground);
+			}
 		}
 
 		.codicon {
@@ -1369,11 +1334,9 @@ have to be updated for changes to the rules above, or to support more deeply nes
 	}
 }
 
-.interactive-session .chat-input-toolbars.scroll-top-decoration {
-	box-shadow: var(--vscode-scrollbar-shadow) 0 6px 6px -6px inset
-}
 
-.interactive-session .chat-input-toolbar .chat-modelPicker-item .action-label,
+
+.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;
@@ -1382,7 +1345,7 @@ have to be updated for changes to the rules above, or to support more deeply nes
 }
 
 
-.interactive-session .chat-input-toolbar .chat-modelPicker-item .action-label .codicon-chevron-down,
+.interactive-session .chat-input-toolbar .chat-input-picker-item .action-label .codicon-chevron-down,
 .interactive-session .chat-input-toolbar .chat-sessionPicker-item .action-label .codicon-chevron-down {
 	font-size: 12px;
 	margin-left: 2px;
@@ -1567,7 +1530,7 @@ have to be updated for changes to the rules above, or to support more deeply nes
 }
 
 .interactive-session .interactive-input-part {
-	margin: 0px 16px;
+	margin: 0px 12px;
 	padding: 4px 0 12px 0px;
 	display: flex;
 	flex-direction: column;
@@ -1628,16 +1591,18 @@ have to be updated for changes to the rules above, or to support more deeply nes
 }
 
 .action-item.chat-mcp {
+	min-width: 22px !important;
 
 	.chat-mcp-state-indicator {
 		position: absolute;
 		bottom: 0;
-		right: 0;
+		left: 12px;
 		font-size: 12px !important;
 		background: var(--vscode-input-background);
 		width: fit-content;
 		height: fit-content;
 		border-radius: 100%;
+		pointer-events: none;
 
 		&.chat-mcp-state-new {
 			color: var(--vscode-button-foreground);
@@ -1673,7 +1638,6 @@ have to be updated for changes to the rules above, or to support more deeply nes
 	font-size: 11px;
 }
 
-.chat-related-files .monaco-button.codicon.codicon-add:hover,
 .action-item.chat-attached-context-attachment.chat-add-files:hover,
 .interactive-session .chat-attached-context .chat-attached-context-attachment .monaco-button:hover {
 	cursor: pointer;
@@ -1785,7 +1749,7 @@ have to be updated for changes to the rules above, or to support more deeply nes
 }
 
 .interactive-session .interactive-item-container.interactive-request .chat-attached-context .chat-attached-context-attachment {
-	padding-right: 6px;
+	padding: 0 6px 0 4px;
 }
 
 .interactive-session-followups {
@@ -2072,6 +2036,7 @@ have to be updated for changes to the rules above, or to support more deeply nes
 	display: flex;
 	flex-direction: column;
 	gap: 2px;
+	line-height: 1.5em;
 }
 
 .interactive-response-progress-tree,
@@ -2110,41 +2075,6 @@ have to be updated for changes to the rules above, or to support more deeply nes
 	display: none;
 }
 
-.interactive-session .chat-list-divider {
-	display: flex;
-	align-items: center;
-	padding: 4px 3px 2px 3px;
-	font-size: 11px;
-	color: var(--vscode-descriptionForeground);
-	gap: 8px;
-	pointer-events: none;
-	user-select: none;
-}
-
-.interactive-session .monaco-list .monaco-list-row:has(.chat-list-divider) {
-	background-color: transparent !important;
-	cursor: default;
-}
-
-.interactive-session .chat-list-divider .chat-list-divider-label {
-	text-transform: uppercase;
-	letter-spacing: 0.04em;
-	flex-shrink: 0;
-}
-
-.interactive-session .chat-list-divider .chat-list-divider-line {
-	flex: 1;
-	height: 1px;
-	background-color: var(--vscode-editorWidget-border, var(--vscode-contrastBorder));
-	opacity: 0.5;
-}
-
-.interactive-session .chat-list-divider .chat-list-divider-toolbar {
-	display: flex;
-	align-items: center;
-	pointer-events: auto;
-}
-
 .interactive-session .chat-summary-list .monaco-list .monaco-list-row {
 	border-radius: 4px;
 }
@@ -2168,6 +2098,10 @@ have to be updated for changes to the rules above, or to support more deeply nes
 	color: var(--vscode-descriptionForeground);
 	user-select: none;
 
+	a {
+		color: var(--vscode-descriptionForeground);
+	}
+
 	code {
 		font-size: var(--vscode-chat-font-size-body-xs);
 	}
@@ -2199,6 +2133,8 @@ have to be updated for changes to the rules above, or to support more deeply nes
 
 .interactive-session .chat-used-context-label .monaco-button {
 	padding: 2px 6px 2px 2px;
+	font-size: var(--vscode-chat-font-size-body-m);
+	line-height: unset;
 }
 
 .interactive-session .chat-file-changes-label .monaco-button:hover {
@@ -2230,8 +2166,8 @@ have to be updated for changes to the rules above, or to support more deeply nes
 .interactive-item-container .progress-container {
 	display: flex;
 	align-items: center;
-	gap: 7px;
-	margin: 0 0 6px 4px;
+	gap: 4px;
+	margin: 0 0 6px 2px;
 
 	/* Tool calls transition from a progress to a collapsible list part, which needs to have this top padding.
 	The working progress also can be replaced by a tool progress part. So align this padding so the text doesn't appear to shift. */
@@ -2239,15 +2175,13 @@ have to be updated for changes to the rules above, or to support more deeply nes
 
 	> .codicon[class*='codicon-'] {
 		font-size: var(--vscode-chat-font-size-body-s);
-
-		&::before {
-			font-size: var(--vscode-chat-font-size-body-s);
-		}
 	}
 
 	.codicon {
 		/* Very aggressive list styles try to apply focus colors to every codicon in a list row. */
 		color: var(--vscode-icon-foreground) !important;
+		/* Matching the margin on all .monaco-text-button .codicon */
+		margin: 0 .2em;
 
 		&.codicon-error {
 			color: var(--vscode-editorError-foreground) !important;
@@ -2271,10 +2205,29 @@ have to be updated for changes to the rules above, or to support more deeply nes
 			display: inline;
 		}
 	}
+
+	/* shimmer animation for working progress only */
+	&.working-progress:has(.codicon-loading) .rendered-markdown.progress-step > p {
+		background: linear-gradient(
+			90deg,
+			var(--vscode-descriptionForeground) 0%,
+			var(--vscode-descriptionForeground) 30%,
+			var(--vscode-chat-thinkingShimmer) 50%,
+			var(--vscode-descriptionForeground) 70%,
+			var(--vscode-descriptionForeground) 100%
+		);
+		background-size: 400% 100%;
+		background-clip: text;
+		-webkit-background-clip: text;
+		-webkit-text-fill-color: transparent;
+		animation: chat-thinking-shimmer 2s linear infinite;
+	}
 }
 
 .interactive-item-container .chat-command-button {
 	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
 	margin-bottom: 16px;
 }
 
@@ -2367,18 +2320,24 @@ have to be updated for changes to the rules above, or to support more deeply nes
 	user-select: none;
 	outline: none;
 	border: none;
+
+	.codicon.codicon-file-media {
+		font-size: 12px;
+	}
 }
 
 .chat-attached-context-attachment .attachment-additional-info {
 	opacity: 0.7;
 	font-size: .9em;
+	padding-left: 4px;
 }
 
 .chat-attached-context-attachment .chat-attached-context-pill-image {
-	width: 14px;
-	height: 14px;
+	width: 13px;
+	height: 13px;
 	border-radius: 2px;
 	object-fit: cover;
+	margin-right: 3px;
 }
 
 .chat-attached-context-attachment .chat-attached-context-custom-text {
@@ -2428,7 +2387,6 @@ have to be updated for changes to the rules above, or to support more deeply nes
 
 	.monaco-button {
 		width: fit-content;
-		padding: 2px 11px;
 	}
 
 	.chat-quota-error-button,
@@ -2512,6 +2470,10 @@ have to be updated for changes to the rules above, or to support more deeply nes
 		border: 1px dotted var(--vscode-focusBorder);
 	}
 
+	.interactive-item-container.interactive-request .value .rendered-markdown > :first-child {
+		margin-top: 0px;
+	}
+
 	.interactive-item-container.interactive-request .value .rendered-markdown > :last-child {
 		margin-bottom: 0px;
 	}
@@ -2750,7 +2712,6 @@ have to be updated for changes to the rules above, or to support more deeply nes
 .chat-buttons-container .monaco-button:not(.monaco-dropdown-button) {
 	text-align: left;
 	width: initial;
-	padding: 4px 8px;
 }
 
 .interactive-item-container .chat-edit-input-container {
@@ -2758,7 +2719,8 @@ have to be updated for changes to the rules above, or to support more deeply nes
 }
 
 .chat-row-disabled-overlay,
-.interactive-item-container .chat-edit-input-container .chat-editing-session {
+.interactive-item-container .chat-edit-input-container .chat-editing-session,
+.chat-input-overlay {
 	display: none;
 }
 

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

@@ -85,13 +85,15 @@ div.chat-welcome-view {
 		max-width: 100%;
 		padding: 0 20px;
 		margin: 0 auto;
-		color: var(--vscode-input-placeholderForeground);
+		color: var(--vscode-foreground);
 
 		a {
 			color: var(--vscode-textLink-foreground);
 		}
 
+		a:hover,
 		a:focus {
+			text-decoration: underline;
 			outline: 1px solid var(--vscode-focusBorder);
 		}
 
@@ -104,13 +106,22 @@ div.chat-welcome-view {
 	.monaco-button {
 		display: inline-block;
 		width: initial;
-		padding: 4px 7px;
 	}
 
 	& > .chat-welcome-view-tips {
 		max-width: 250px;
 		margin: 10px 5px 0px;
 
+		a {
+			color: var(--vscode-textLink-foreground);
+		}
+
+		a:hover,
+		a:focus {
+			text-decoration: underline;
+			outline: 1px solid var(--vscode-focusBorder);
+		}
+
 		.rendered-markdown {
 			gap: 6px;
 			display: flex;
@@ -130,7 +141,7 @@ div.chat-welcome-view {
 	}
 
 	& > .chat-welcome-view-disclaimer {
-		color: var(--vscode-input-placeholderForeground);
+		color: var(--vscode-foreground);
 		text-align: center;
 		margin: -16px auto;
 		max-width: 400px;
@@ -140,7 +151,9 @@ div.chat-welcome-view {
 			color: var(--vscode-textLink-foreground);
 		}
 
+		a:hover,
 		a:focus {
+			text-decoration: underline;
 			outline: 1px solid var(--vscode-focusBorder);
 		}
 	}

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

@@ -0,0 +1,37 @@
+import { Disposable } from "@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle";
+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 { IContextKeyService } from "@codingame/monaco-vscode-api/vscode/vs/platform/contextkey/common/contextkey.service";
+export interface IChatContextUsagePromptTokenDetail {
+    category: string;
+    label: string;
+    percentageOfPrompt: number;
+}
+export interface IChatContextUsageData {
+    promptTokens: number;
+    maxInputTokens: number;
+    percentage: number;
+    promptTokenDetails?: readonly IChatContextUsagePromptTokenDetail[];
+}
+/**
+ * Detailed widget that shows context usage breakdown.
+ * Displayed when the user clicks on the ChatContextUsageIcon.
+ */
+export declare class ChatContextUsageDetails extends Disposable {
+    private readonly instantiationService;
+    private readonly menuService;
+    private readonly contextKeyService;
+    readonly domNode: HTMLElement;
+    private readonly quotaItem;
+    private readonly percentageLabel;
+    private readonly tokenCountLabel;
+    private readonly progressFill;
+    private readonly tokenDetailsContainer;
+    private readonly warningMessage;
+    private readonly actionsSection;
+    constructor(instantiationService: IInstantiationService, menuService: IMenuService, contextKeyService: IContextKeyService);
+    update(data: IChatContextUsageData): void;
+    private formatTokenCount;
+    private renderTokenDetails;
+    focus(): void;
+}