@codingame/monaco-vscode-workbench-service-override 37.2.0 → 37.3.0

package/vscode/src/vs/sessions/browser/parts/media/chatCompositeBar.css

@@ -0,0 +1,559 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+.chat-composite-bar {
+	display: flex;
+	flex-direction: column;
+	background-color: var(--session-view-background);
+	color: var(--session-view-foreground);
+	flex-shrink: 0;
+	overflow: hidden;
+}
+
+/* Header host. */
+.chat-composite-bar.session-header-bar {
+	padding: 0;
+	box-sizing: border-box;
+}
+
+.monaco-workbench.agent-sessions-workbench .part.sessionspart.has-chat-background .chat-composite-bar.session-header-bar {
+	background-color: color-mix(in srgb, var(--session-view-background) 85%, transparent);
+}
+
+:is(.hc-black, .hc-light).monaco-workbench.agent-sessions-workbench .part.sessionspart.has-chat-background .chat-composite-bar.session-header-bar {
+	background-color: var(--session-view-background);
+}
+
+.session-header-bar > .chat-composite-bar-header {
+	width: 100%;
+	max-width: var(--session-view-centered-content-max-width, 950px);
+	margin: 0 auto;
+	padding: 0 var(--session-view-content-horizontal-padding, var(--vscode-spacing-size320));
+	box-sizing: border-box;
+}
+
+.session-view.grid-layout .session-header-bar > .chat-composite-bar-header {
+	max-width: none;
+	padding: 0 var(--session-view-content-horizontal-padding, var(--vscode-spacing-size320));
+}
+
+/* Tabs host: the chat tab strip, shown only when the session has multiple chats. */
+.chat-composite-bar.session-chat-tabs-bar {
+	padding: 0 var(--vscode-spacing-size20);
+	box-sizing: border-box;
+	container-type: inline-size;
+
+	/* Tab width cap: 200px, but never more than 40% of the tab strip width
+		(cqi = container-query inline-size unit, enabled by container-type). */
+	--chat-tab-max-width: min(200px, 40cqi);
+}
+
+/* Header: a status icon column next to the title row. */
+.chat-composite-bar-header {
+	display: flex;
+	flex-direction: row;
+	align-items: flex-start;
+	gap: 6px;
+	height: var(--vscode-spacing-size320, 32px);
+	margin: 0 calc(-1 * var(--vscode-spacing-size80));
+	padding: 0 var(--vscode-spacing-size20);
+	box-sizing: border-box;
+}
+
+.agent-sessions-workbench.editor-tabs-compact-height .chat-composite-bar.session-header-bar .chat-composite-bar-header {
+	height: var(--vscode-spacing-size280, 28px);
+}
+
+/* Main column hosts the title row. */
+.chat-composite-bar-header-main {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	flex: 1 1 auto;
+	min-width: 0;
+	height: 100%;
+}
+
+/* Title row: title + actions */
+.chat-composite-bar-title-row {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	height: 100%;
+}
+
+/* Status icon column — sits beside the main column, centered on the title line.
+	The compound selector (with .session-header-bar) raises specificity above the
+	base `.codicon { display: inline-block }` rule so the flex centering wins. */
+.session-header-bar .chat-composite-bar-session-icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	height: 100%;
+	font-size: var(--vscode-codiconFontSize, 16px);
+	color: var(--session-view-foreground);
+}
+
+.chat-composite-bar-session-title {
+	flex: 0 1 auto;
+	min-width: 0;
+	overflow: hidden;
+	display: flex;
+	align-items: center;
+	font-weight: var(--vscode-fontWeight-regular, 400);
+	font-size: var(--vscode-fontSize-heading3, 13px);
+	color: var(--chat-tab-active-foreground, var(--session-view-foreground));
+	border-radius: var(--vscode-cornerRadius-small);
+	min-height: 22px;
+	/* Match the input's inner padding so the rendered text and the rename
+		input's text occupy the same horizontal position. */
+	padding: 0 4px;
+	margin: 0 -4px;
+}
+
+.chat-composite-bar-session-title-text {
+	flex: 0 1 auto;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+/* Hover feedback: only when the title can actually be renamed and we aren't
+	currently editing it. */
+.chat-composite-bar-session-title.editable {
+	cursor: text;
+}
+
+.chat-composite-bar-session-title.editable:hover {
+	background-color: var(--vscode-toolbar-hoverBackground);
+}
+
+.chat-composite-bar-session-title.editing {
+	flex: 1 1 auto;
+	cursor: default;
+	background-color: transparent;
+	/* Remove the read-mode padding; the input has its own border + padding that
+		together match the read-mode padding so the text doesn't shift. */
+	padding: 0;
+}
+
+/* Inline rename input. Sized and styled to closely match the rendered title
+	so swapping in/out doesn't shift the row's layout. */
+.chat-composite-bar-session-title-input {
+	flex: 1 1 auto;
+	min-width: 0;
+	width: 100%;
+	box-sizing: border-box;
+	font-family: inherit;
+	font-weight: inherit;
+	font-size: inherit;
+	line-height: inherit;
+	color: var(--vscode-input-foreground, inherit);
+	background-color: var(--vscode-input-background, transparent);
+	border: 1px solid var(--vscode-focusBorder, var(--vscode-input-border, transparent));
+	border-radius: var(--vscode-cornerRadius-small);
+	padding: 0 4px;
+	margin: 0;
+	outline: none;
+	min-height: 22px;
+}
+
+.chat-composite-bar-session-title-input::selection {
+	background-color: var(--vscode-selection-background, var(--vscode-editor-selectionBackground));
+}
+
+.chat-composite-bar-title-actions {
+	display: flex;
+	align-items: center;
+	gap: 2px;
+	flex-shrink: 0;
+	margin-left: auto;
+}
+
+/* Metadata action fixture host. */
+.session-metadata-pill-toolbar,
+.session-metadata-pill-toolbar .monaco-action-bar,
+.session-metadata-pill-toolbar .actions-container {
+	display: inline-flex;
+	align-items: center;
+	height: 100%;
+	min-width: 0;
+	max-width: 100%;
+}
+
+/* Spacing between contributed metadata buttons. */
+.session-metadata-pill-toolbar .actions-container {
+	gap: 6px;
+}
+
+/* Tabs row */
+.chat-composite-bar-tabs-row {
+	display: flex;
+	align-items: center;
+	height: var(--vscode-spacing-size320, 32px);
+	box-sizing: border-box;
+	overflow: hidden;
+}
+
+.chat-composite-bar.compact-height .chat-composite-bar-tabs-row {
+	--editor-group-tab-height: var(--vscode-spacing-size200, 20px);
+	height: var(--vscode-spacing-size280, 28px);
+}
+
+.session-view.tabs-replace-header .chat-groups-view.single-group .chat-composite-bar-tabs-row {
+	border-bottom: var(--vscode-strokeThickness) solid color-mix(in srgb, var(--session-view-foreground, var(--chat-tab-active-foreground)) 12%, transparent);
+}
+
+:is(.hc-black, .hc-light) .session-view.tabs-replace-header .chat-groups-view.single-group .chat-composite-bar-tabs-row {
+	border-bottom-color: var(--vscode-contrastBorder);
+}
+
+/* The ScrollableElement wrapper holding the tabs is the shrinkable flex item */
+.chat-composite-bar-tabs-row > .monaco-scrollable-element {
+	flex: 0 1 auto;
+	min-width: 0;
+	height: 100%;
+}
+
+.session-chat-tabs-actions {
+	display: flex;
+	align-items: center;
+	margin-left: auto;
+	padding-right: var(--vscode-spacing-size40);
+	flex-shrink: 0;
+}
+
+.session-chat-tabs-actions.hidden {
+	display: none;
+}
+
+.chat-composite-bar-tabs {
+	display: flex;
+	align-items: center;
+	height: 100%;
+	min-height: calc(var(--editor-group-tab-height, var(--vscode-spacing-size240)) + var(--vscode-spacing-size40) * 2);
+}
+
+.chat-composite-bar-toolbar {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+}
+
+/* Keep header toolbar buttons from dictating the row height */
+.chat-composite-bar-title-actions .action-item .action-label {
+	height: 20px;
+	line-height: 20px;
+	padding: 0 2px;
+}
+
+.chat-composite-bar-toolbar .monaco-action-bar .actions-container {
+	gap: 4px;
+}
+
+/* Floating variant: a lightweight, absolutely positioned toolbar with no header chrome */
+.chat-composite-bar.chat-composite-bar-toolbar-floating {
+	position: absolute;
+	top: 0px;
+	right: 0px;
+	height: 35px;
+	flex-direction: row;
+	align-items: center;
+	padding: 0 4px;
+	border-bottom: none;
+	background: transparent;
+	container-type: unset;
+}
+
+/* The shared modern editor-tab hooks own tab geometry, typography, and states.
+	This file only supplies chat-specific layout and adornments. */
+.session-chat-tabs-bar .chat-composite-bar-tabs > .chat-composite-bar-tab {
+	display: flex;
+	align-items: center;
+	position: relative;
+	cursor: pointer;
+	color: var(--chat-tab-inactive-foreground);
+	user-select: none;
+	flex-shrink: 0;
+	max-width: var(--chat-tab-max-width);
+}
+
+/* Keep keyboard focus on the rounded fill; high-contrast styling is provided by the shared tab styles. */
+.monaco-workbench .session-chat-tabs-bar .chat-composite-bar-tab:focus {
+	outline: none;
+}
+
+.monaco-workbench:not(:is(.hc-black, .hc-light)) .session-chat-tabs-bar .chat-composite-bar-tab:focus-visible > .chat-composite-bar-tab-fill {
+	outline: var(--vscode-strokeThickness) solid var(--vscode-focusBorder);
+	outline-offset: calc(-1 * var(--vscode-strokeThickness));
+}
+
+.session-chat-tabs-bar .chat-composite-bar-tab-fill {
+	display: block;
+	pointer-events: none;
+}
+
+.session-chat-tabs-bar .chat-composite-bar-tab-label {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	min-width: 0;
+}
+
+.chat-composite-bar-tab-lock,
+.chat-composite-bar-tab-input-container,
+.chat-composite-bar-tab-indicator {
+	position: relative;
+	z-index: 1;
+}
+
+/* Lock icon for read-only (non-interactive) chats, shown before the label.
+	Include the tab-strip owner to outrank
+	`.monaco-workbench .codicon[class*='codicon-']`, which otherwise resets the
+	compact 12px lock to 16px when the workbench stylesheet loads later. */
+.session-chat-tabs-bar .chat-composite-bar-tab .chat-composite-bar-tab-lock.codicon {
+	display: none;
+	flex-shrink: 0;
+	align-items: center;
+	margin-right: 4px;
+	font-size: var(--vscode-codiconFontSize-compact, 12px);
+}
+
+.chat-composite-bar-tab.read-only .chat-composite-bar-tab-lock.codicon {
+	display: inline-flex;
+}
+
+/* While editing, the tab expands to its max width. */
+.session-chat-tabs-bar .chat-composite-bar-tabs > .chat-composite-bar-tab.editing {
+	cursor: default;
+	padding: 0 var(--vscode-spacing-size20);
+	width: var(--chat-tab-max-width);
+	max-width: var(--chat-tab-max-width);
+}
+
+/* Hide the label and adornments so the input fills the tab while editing. */
+.session-chat-tabs-bar .chat-composite-bar-tab.editing .chat-composite-bar-tab-label,
+.session-chat-tabs-bar .chat-composite-bar-tab.editing .chat-composite-bar-tab-lock,
+.session-chat-tabs-bar .chat-composite-bar-tab.editing .chat-composite-bar-tab-indicator,
+.session-chat-tabs-bar .chat-composite-bar-tab.editing .chat-composite-bar-tab-actions {
+	display: none;
+}
+
+.chat-composite-bar-tab-input-container {
+	display: none;
+	flex: 1 1 auto;
+	min-width: 0;
+}
+
+.chat-composite-bar-tab.editing .chat-composite-bar-tab-input-container {
+	display: flex;
+}
+
+.chat-composite-bar-tab-input.monaco-inputbox {
+	flex: 1 1 auto;
+	min-width: 0;
+	height: 22px;
+}
+
+/* Include the tab owner to outrank `.monaco-inputbox > .ibwrapper > .input`,
+ * which otherwise restores the base 4px 6px padding around the rename input. */
+.chat-composite-bar-tab .chat-composite-bar-tab-input.monaco-inputbox .input {
+	font-family: inherit;
+	font-weight: inherit;
+	font-size: inherit;
+	padding: 0 4px;
+}
+
+/* Indicator: rendered inline after the label and beneath the overlaid close action.
+	Shows a small blue dot for unread, a yellow dot when input is needed,
+	or a spinner for in-progress.
+	Only one mode is set on the element at a time (mutually exclusive in JS). */
+.chat-composite-bar-tab-indicator {
+	display: none;
+	width: 16px;
+	height: 16px;
+	align-items: center;
+	justify-content: center;
+	pointer-events: none;
+	flex-shrink: 0;
+	margin-left: 4px;
+}
+
+.chat-composite-bar-tab.unread .chat-composite-bar-tab-indicator,
+.chat-composite-bar-tab.needs-input .chat-composite-bar-tab-indicator,
+.chat-composite-bar-tab.in-progress .chat-composite-bar-tab-indicator {
+	display: flex;
+}
+
+.chat-composite-bar-tab-indicator-icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.chat-composite-bar-tab.unread .chat-composite-bar-tab-indicator-icon::before,
+.chat-composite-bar-tab.needs-input .chat-composite-bar-tab-indicator-icon::before {
+	content: '';
+	width: 6px;
+	height: 6px;
+	border-radius: 50%;
+}
+
+.chat-composite-bar-tab.unread .chat-composite-bar-tab-indicator-icon::before {
+	background-color: var(--vscode-textLink-foreground);
+}
+
+.chat-composite-bar-tab.needs-input .chat-composite-bar-tab-indicator-icon::before {
+	background-color: var(--vscode-list-warningForeground);
+}
+
+/* Include the tab-strip owner to outrank
+ * `.monaco-workbench .codicon[class*='codicon-']` and keep the in-progress
+ * indicator at the compact 12px size. */
+.session-chat-tabs-bar .chat-composite-bar-tab.in-progress .chat-composite-bar-tab-indicator-icon {
+	font-size: var(--vscode-codiconFontSize-compact, 12px);
+}
+
+.session-chat-tabs-bar .chat-composite-bar-tab-actions {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: absolute;
+	z-index: 7;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	margin: 0 var(--vscode-spacing-size20);
+	width: var(--vscode-spacing-size240);
+	overflow: visible;
+	border-block: var(--vscode-strokeThickness) solid transparent;
+	border-right: var(--vscode-strokeThickness) solid transparent;
+	border-radius: 0 var(--vscode-cornerRadius-small) var(--vscode-cornerRadius-small) 0;
+	background-clip: padding-box;
+	box-sizing: border-box;
+	pointer-events: none;
+}
+
+.session-chat-tabs-bar .chat-composite-bar-tab-actions > .monaco-action-bar {
+	width: var(--vscode-spacing-size240);
+}
+
+.session-chat-tabs-bar .chat-composite-bar-tab-actions .actions-container {
+	justify-content: center;
+}
+
+.monaco-workbench:not(:is(.hc-black, .hc-light)) .session-chat-tabs-bar .chat-composite-bar-tab:hover > .chat-composite-bar-tab-actions::before,
+.monaco-workbench:not(:is(.hc-black, .hc-light)) .session-chat-tabs-bar .chat-composite-bar-tab > .chat-composite-bar-tab-actions:focus-within::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	right: 100%;
+	bottom: 0;
+	width: var(--vscode-spacing-size160);
+	border-block: var(--vscode-strokeThickness) solid transparent;
+	background-image: linear-gradient(to right, transparent, var(--modern-ui-editor-tab-action-hover-background));
+	background-clip: padding-box;
+	box-sizing: border-box;
+	pointer-events: none;
+}
+
+.session-chat-tabs-bar .chat-composite-bar-tab:hover > .chat-composite-bar-tab-actions,
+.session-chat-tabs-bar .chat-composite-bar-tab > .chat-composite-bar-tab-actions:focus-within {
+	background-color: var(--modern-ui-editor-tab-action-hover-background);
+	pointer-events: auto;
+}
+
+.modern-ui-editor-tab-group:not(.modern-ui-editor-tab-group-active) .session-chat-tabs-bar .chat-composite-bar-tab:hover > .chat-composite-bar-tab-actions,
+.modern-ui-editor-tab-group:not(.modern-ui-editor-tab-group-active) .session-chat-tabs-bar .chat-composite-bar-tab > .chat-composite-bar-tab-actions:focus-within {
+	background-color: var(--modern-ui-editor-tab-action-unfocused-hover-background);
+}
+
+.monaco-workbench:not(:is(.hc-black, .hc-light)) .modern-ui-editor-tab-group:not(.modern-ui-editor-tab-group-active) .session-chat-tabs-bar .chat-composite-bar-tab:hover > .chat-composite-bar-tab-actions::before,
+.monaco-workbench:not(:is(.hc-black, .hc-light)) .modern-ui-editor-tab-group:not(.modern-ui-editor-tab-group-active) .session-chat-tabs-bar .chat-composite-bar-tab > .chat-composite-bar-tab-actions:focus-within::before {
+	background-image: linear-gradient(to right, transparent, var(--modern-ui-editor-tab-action-unfocused-hover-background));
+}
+
+.session-chat-tabs-bar .chat-composite-bar-tab.active:hover > .chat-composite-bar-tab-actions,
+.session-chat-tabs-bar .chat-composite-bar-tab.active > .chat-composite-bar-tab-actions:focus-within {
+	background-color: var(--modern-ui-editor-tab-action-active-background);
+}
+
+.monaco-workbench:not(:is(.hc-black, .hc-light)) .session-chat-tabs-bar .chat-composite-bar-tab.active:hover > .chat-composite-bar-tab-actions::before,
+.monaco-workbench:not(:is(.hc-black, .hc-light)) .session-chat-tabs-bar .chat-composite-bar-tab.active > .chat-composite-bar-tab-actions:focus-within::before {
+	background-image: linear-gradient(to right, transparent, var(--modern-ui-editor-tab-action-active-background));
+}
+
+.modern-ui-editor-tab-group:not(.modern-ui-editor-tab-group-active) .session-chat-tabs-bar .chat-composite-bar-tab.active:hover > .chat-composite-bar-tab-actions,
+.modern-ui-editor-tab-group:not(.modern-ui-editor-tab-group-active) .session-chat-tabs-bar .chat-composite-bar-tab.active > .chat-composite-bar-tab-actions:focus-within {
+	background-color: var(--modern-ui-editor-tab-action-unfocused-active-background);
+}
+
+.monaco-workbench:not(:is(.hc-black, .hc-light)) .modern-ui-editor-tab-group:not(.modern-ui-editor-tab-group-active) .session-chat-tabs-bar .chat-composite-bar-tab.active:hover > .chat-composite-bar-tab-actions::before,
+.monaco-workbench:not(:is(.hc-black, .hc-light)) .modern-ui-editor-tab-group:not(.modern-ui-editor-tab-group-active) .session-chat-tabs-bar .chat-composite-bar-tab.active > .chat-composite-bar-tab-actions:focus-within::before {
+	background-image: linear-gradient(to right, transparent, var(--modern-ui-editor-tab-action-unfocused-active-background));
+}
+
+.session-chat-tabs-bar .chat-composite-bar-tab.active:hover > .chat-composite-bar-tab-actions {
+	background-color: var(--modern-ui-editor-tab-action-active-hover-background);
+}
+
+.monaco-workbench:not(:is(.hc-black, .hc-light)) .session-chat-tabs-bar .chat-composite-bar-tab.active:hover > .chat-composite-bar-tab-actions::before {
+	background-image: linear-gradient(to right, transparent, var(--modern-ui-editor-tab-action-active-hover-background));
+}
+
+.modern-ui-editor-tab-group:not(.modern-ui-editor-tab-group-active) .session-chat-tabs-bar .chat-composite-bar-tab.active:hover > .chat-composite-bar-tab-actions {
+	background-color: var(--modern-ui-editor-tab-action-unfocused-active-hover-background);
+}
+
+.monaco-workbench:not(:is(.hc-black, .hc-light)) .modern-ui-editor-tab-group:not(.modern-ui-editor-tab-group-active) .session-chat-tabs-bar .chat-composite-bar-tab.active:hover > .chat-composite-bar-tab-actions::before {
+	background-image: linear-gradient(to right, transparent, var(--modern-ui-editor-tab-action-unfocused-active-hover-background));
+}
+
+.session-chat-tabs-bar .chat-composite-bar-tab:not(:hover) > .chat-composite-bar-tab-actions .action-label:not(:focus) {
+	opacity: 0;
+}
+
+.session-chat-tabs-bar .chat-composite-bar-tab:hover > .chat-composite-bar-tab-actions .action-label,
+.session-chat-tabs-bar .chat-composite-bar-tab > .chat-composite-bar-tab-actions .action-label:focus {
+	opacity: 1;
+}
+
+.session-chat-tabs-bar .chat-composite-bar-tab-actions .action-label.codicon {
+	box-sizing: content-box;
+	color: inherit;
+	font-size: var(--vscode-codiconFontSize);
+	padding: var(--vscode-spacing-size20);
+	width: var(--vscode-codiconFontSize);
+	height: var(--vscode-codiconFontSize);
+}
+
+:is(.hc-black, .hc-light) .session-chat-tabs-bar .chat-composite-bar-tab:hover .chat-composite-bar-tab-actions,
+:is(.hc-black, .hc-light) .session-chat-tabs-bar .chat-composite-bar-tab-actions:focus-within {
+	background-color: var(--session-view-background);
+}
+
+:is(.hc-black, .hc-light) .session-chat-tabs-bar .chat-composite-bar-tab-actions .action-label {
+	background-color: transparent;
+}
+
+:is(.hc-black, .hc-light) .session-chat-tabs-bar .chat-composite-bar-tab.active:hover > .chat-composite-bar-tab-actions {
+	border-block: var(--vscode-strokeThickness) solid var(--vscode-contrastActiveBorder);
+	border-right: var(--vscode-strokeThickness) solid var(--vscode-contrastActiveBorder);
+	box-sizing: border-box;
+}
+
+:is(.hc-black, .hc-light) .session-chat-tabs-bar .chat-composite-bar-tab:not(.active):hover > .chat-composite-bar-tab-actions {
+	border-block: var(--vscode-strokeThickness) dashed var(--vscode-contrastActiveBorder);
+	border-right: var(--vscode-strokeThickness) dashed var(--vscode-contrastActiveBorder);
+	box-sizing: border-box;
+}
+
+:is(.hc-black, .hc-light) .session-chat-tabs-bar .chat-composite-bar-tab > .chat-composite-bar-tab-actions:focus-within {
+	border-block: var(--vscode-strokeThickness) solid var(--vscode-focusBorder);
+	border-right: var(--vscode-strokeThickness) solid var(--vscode-focusBorder);
+	box-sizing: border-box;
+}

package/vscode/src/vs/sessions/browser/parts/media/chatGroupDropTarget.css

@@ -0,0 +1,27 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+#monaco-workbench-chat-group-drop-overlay {
+	position: absolute;
+	z-index: 10000;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
+#monaco-workbench-chat-group-drop-overlay > .chat-group-drop-overlay-indicator {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	pointer-events: none; /* important: do not steal events from the parent */
+	opacity: 0; /* hidden initially */
+}
+
+.monaco-workbench.monaco-enable-motion #monaco-workbench-chat-group-drop-overlay > .chat-group-drop-overlay-indicator {
+	transition: top 70ms ease-out, left 70ms ease-out, width 70ms ease-out, height 70ms ease-out, opacity 150ms ease-out;
+}

package/vscode/src/vs/sessions/browser/parts/media/chatGroupsView.css

@@ -0,0 +1,60 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+/* The grid of chat groups that fills the session view's content area. */
+.chat-groups-view {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
+/* A single chat group: a tab strip on top of a chat view. Sized imperatively
+ * by the grid; children stack in normal flow (bar has an explicit height, the
+ * content takes the remaining height the chat view is laid out to). */
+.chat-group-view {
+	position: relative;
+	overflow: hidden;
+	background-color: var(--session-view-background);
+	color: var(--session-view-foreground);
+}
+
+.chat-group-view-bar {
+	position: relative;
+	overflow: hidden;
+}
+
+.chat-group-view-content {
+	position: relative;
+}
+
+/* When the session shows a grid of chats (more than one group), each chat fills
+ * its full leaf width instead of being capped to the centered band, so the grid
+ * spans the entire session view. A lone group keeps the centered cap. */
+.agent-sessions-workbench .part.sessionspart .chat-groups-view:not(.single-group) .interactive-session .interactive-item-container,
+.agent-sessions-workbench .part.sessionspart .chat-groups-view:not(.single-group) .interactive-session > .chat-suggest-next-widget,
+.agent-sessions-workbench .part.sessionspart .chat-groups-view:not(.single-group) .interactive-session .interactive-input-part,
+.agent-sessions-workbench .part.sessionspart .chat-groups-view:not(.single-group) .chat-view > .monaco-progress-container {
+	max-width: none;
+}
+
+/* With a lone group, the tab strip aligns with the centered header/content band
+ * rather than spanning the full leaf width. With more than one group it spans
+ * the full leaf (the default) so the grid reads edge-to-edge. */
+.session-view .chat-groups-view.single-group .session-chat-tabs-bar {
+	max-width: var(--session-view-centered-content-max-width);
+	width: 100%;
+	margin: 0 auto;
+}
+
+/* Keep the read-only banner aligned with the tab strip: with a lone group cap it
+ * to the centered band and center it too (overriding only the banner's own
+ * horizontal margins, so its negative top offset is preserved). With more than
+ * one group it spans the full leaf like the tab strip. */
+.session-view .chat-groups-view.single-group .session-readonly-banner {
+	max-width: var(--session-view-centered-content-max-width);
+	width: 100%;
+	margin-left: auto;
+	margin-right: auto;
+}