Refactor theme and layout for sidebar, panel, and auxiliary components (#304447)

* refactor: update theme colors for sidebar, panel, and auxiliary bar components Co-authored-by: Copilot <copilot@github.com> * refactor: update sidebar and panel styles to remove right borders and adjust colors * refactor: adjust margin values for chatbar, auxiliary bar, and panel components Co-authored-by: Copilot <copilot@github.com> * refactor: adjust layout margins for chatbar, panel, and sidebar components Co-authored-by: Copilot <copilot@github.com> * refactor: update padding for account widget and agent sessions viewer components Co-authored-by: Copilot <copilot@github.com> * refactor: adjust footer margins and add bottom margin for sessions view pane Co-authored-by: Copilot <copilot@github.com> * Apply suggestion from @Copilot Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Apply suggestion from @Copilot Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * refactor: remove unused imports in sidebarPart.ts Co-authored-by: Copilot <copilot@github.com> * refactor: update theme colors for sessions components and adjust background properties Co-authored-by: Copilot <copilot@github.com> --------- Co-authored-by: mrleemurray <mrleemurray@users.noreply.github.com> Co-authored-by: Copilot <copilot@github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
2026-04-17 23:35:54 +01:00 · 2026-03-24 17:10:18 +00:00
parent a31e6e0080
commit ce19b8e0e9
14 changed files with 159 additions and 72 deletions
--- a/build/lib/stylelint/vscode-known-variables.json
+++ b/build/lib/stylelint/vscode-known-variables.json
@@ -646,6 +646,12 @@
 		"--vscode-searchEditor-findMatchBorder",
 		"--vscode-searchEditor-textInputBorder",
 		"--vscode-selection-background",
+		"--vscode-sessionsAuxiliaryBar-background",
+		"--vscode-sessionsChatBar-background",
+		"--vscode-sessionsPanel-background",
+		"--vscode-sessionsSidebar-background",
+		"--vscode-sessionsSidebarHeader-background",
+		"--vscode-sessionsSidebarHeader-foreground",
 		"--vscode-sessionsUpdateButton-downloadedBackground",
 		"--vscode-sessionsUpdateButton-downloadingBackground",
 		"--vscode-settings-checkboxBackground",
--- a/src/vs/sessions/browser/media/style.css
+++ b/src/vs/sessions/browser/media/style.css
@@ -20,35 +20,44 @@
 */

 .agent-sessions-workbench .part.sidebar {
-	background: var(--vscode-sideBar-background);
-	border-right: 1px solid var(--vscode-sideBar-border, transparent);
+	background: var(--vscode-sessionsSidebar-background);
 }

 .agent-sessions-workbench .part.chatbar {
-	margin: 0 16px 2px 16px;
+	margin: 0 12px 2px 12px;
 	background: var(--part-background);
 	border: 1px solid var(--part-border-color, transparent);
 	border-radius: 8px;
 	box-sizing: border-box;
 }

+.agent-sessions-workbench:not(.nosidebar) .part.chatbar {
+	margin-left: 0;
+}
+
 .agent-sessions-workbench .part.auxiliarybar {
-	margin: 0 16px 2px 0;
+	margin: 0 12px 2px 0;
 	background: var(--part-background);
 	border: 1px solid var(--part-border-color, transparent);
 	border-radius: 8px;
+	box-sizing: border-box;
 }

 .agent-sessions-workbench .part.panel {
-	margin: 0 16px 18px 16px;
+	margin: 0 12px 14px 12px;
 	background: var(--part-background);
 	border: 1px solid var(--part-border-color, transparent);
 	border-radius: 8px;
+	box-sizing: border-box;
 }

-/* Grid background matches the chat bar / sidebar background */
+.agent-sessions-workbench:not(.nosidebar) .part.panel {
+	margin-left: 0;
+}
+
+/* Grid background matches the sessions sidebar background */
 .agent-sessions-workbench > .monaco-grid-view {
-	background-color: var(--vscode-sideBar-background);
+	background-color: var(--vscode-sessionsSidebar-background);
 }

 /* ---- Chat Layout ---- */
--- a/src/vs/sessions/browser/parts/auxiliaryBarPart.ts
+++ b/src/vs/sessions/browser/parts/auxiliaryBarPart.ts
@@ -13,9 +13,9 @@ import { INotificationService } from '../../../platform/notification/common/noti
 import { IStorageService } from '../../../platform/storage/common/storage.js';
 import { IThemeService } from '../../../platform/theme/common/themeService.js';
 import { ActiveAuxiliaryContext, AuxiliaryBarFocusContext } from '../../../workbench/common/contextkeys.js';
-import { ACTIVITY_BAR_BADGE_BACKGROUND, ACTIVITY_BAR_BADGE_FOREGROUND, ACTIVITY_BAR_TOP_ACTIVE_BORDER, ACTIVITY_BAR_TOP_DRAG_AND_DROP_BORDER, ACTIVITY_BAR_TOP_FOREGROUND, ACTIVITY_BAR_TOP_INACTIVE_FOREGROUND, PANEL_ACTIVE_TITLE_BORDER, PANEL_ACTIVE_TITLE_FOREGROUND, PANEL_DRAG_AND_DROP_BORDER, PANEL_INACTIVE_TITLE_FOREGROUND, SIDE_BAR_BACKGROUND, SIDE_BAR_TITLE_BORDER, SIDE_BAR_FOREGROUND } from '../../../workbench/common/theme.js';
+import { ACTIVITY_BAR_BADGE_BACKGROUND, ACTIVITY_BAR_BADGE_FOREGROUND, ACTIVITY_BAR_TOP_ACTIVE_BORDER, ACTIVITY_BAR_TOP_DRAG_AND_DROP_BORDER, ACTIVITY_BAR_TOP_FOREGROUND, ACTIVITY_BAR_TOP_INACTIVE_FOREGROUND, PANEL_ACTIVE_TITLE_BORDER, PANEL_ACTIVE_TITLE_FOREGROUND, PANEL_BORDER, PANEL_DRAG_AND_DROP_BORDER, PANEL_INACTIVE_TITLE_FOREGROUND, SIDE_BAR_TITLE_BORDER, SIDE_BAR_FOREGROUND } from '../../../workbench/common/theme.js';
 import { contrastBorder } from '../../../platform/theme/common/colorRegistry.js';
-import { sessionsSidebarBorder } from '../../common/theme.js';
+import { sessionsAuxiliaryBarBackground } from '../../common/theme.js';
 import { IViewDescriptorService, ViewContainerLocation } from '../../../workbench/common/views.js';
 import { IExtensionService } from '../../../workbench/services/extensions/common/extensions.js';
 import { IWorkbenchLayoutService, Parts } from '../../../workbench/services/layout/browser/layoutService.js';
@@ -48,9 +48,9 @@ export class AuxiliaryBarPart extends AbstractPaneCompositePart {
 	static readonly viewContainersWorkspaceStateKey = 'workbench.agentsession.auxiliarybar.viewContainersWorkspaceState';

 	/** Visual margin values for the card-like appearance */
-	static readonly MARGIN_TOP = 16;
+	static readonly MARGIN_TOP = 12;
 	static readonly MARGIN_BOTTOM = 2;
-	static readonly MARGIN_RIGHT = 16;
+	static readonly MARGIN_RIGHT = 12;

 	// Action ID for run script - defined here to avoid layering issues
 	private static readonly RUN_SCRIPT_ACTION_ID = 'workbench.action.agentSessions.runScript';
@@ -107,7 +107,7 @@ export class AuxiliaryBarPart extends AbstractPaneCompositePart {
 			{
 				hasTitle: true,
 				trailingSeparator: false,
-				borderWidth: () => (this.getColor(sessionsSidebarBorder) || this.getColor(contrastBorder)) ? 1 : 0,
+				borderWidth: () => 0,
 			},
 			AuxiliaryBarPart.activeViewSettingsKey,
 			ActiveAuxiliaryContext.bindTo(contextKeyService),
@@ -142,9 +142,9 @@ export class AuxiliaryBarPart extends AbstractPaneCompositePart {
 		const container = assertReturnsDefined(this.getContainer());

 		// Store background and border as CSS variables for the card styling on .part
-		container.style.setProperty('--part-background', this.getColor(SIDE_BAR_BACKGROUND) || '');
-		container.style.setProperty('--part-border-color', this.getColor(sessionsSidebarBorder) || this.getColor(contrastBorder) || 'transparent');
-		container.style.backgroundColor = 'transparent';
+		container.style.setProperty('--part-background', this.getColor(sessionsAuxiliaryBarBackground) || '');
+		container.style.setProperty('--part-border-color', this.getColor(PANEL_BORDER) || this.getColor(contrastBorder) || 'transparent');
+		container.style.backgroundColor = this.getColor(sessionsAuxiliaryBarBackground) || '';
 		container.style.color = this.getColor(SIDE_BAR_FOREGROUND) || '';

 		// Clear borders - the card appearance uses border-radius instead
@@ -174,8 +174,8 @@ export class AuxiliaryBarPart extends AbstractPaneCompositePart {
 			iconSize: 16,
 			get overflowActionSize() { return $this.getCompositeBarPosition() === CompositeBarPosition.TITLE ? 40 : 30; },
 			colors: theme => ({
-				activeBackgroundColor: theme.getColor(SIDE_BAR_BACKGROUND),
-				inactiveBackgroundColor: theme.getColor(SIDE_BAR_BACKGROUND),
+				activeBackgroundColor: theme.getColor(sessionsAuxiliaryBarBackground),
+				inactiveBackgroundColor: theme.getColor(sessionsAuxiliaryBarBackground),
 				get activeBorderBottomColor() { return $this.getCompositeBarPosition() === CompositeBarPosition.TITLE ? theme.getColor(PANEL_ACTIVE_TITLE_BORDER) : theme.getColor(ACTIVITY_BAR_TOP_ACTIVE_BORDER); },
 				get activeForegroundColor() { return $this.getCompositeBarPosition() === CompositeBarPosition.TITLE ? theme.getColor(PANEL_ACTIVE_TITLE_FOREGROUND) : theme.getColor(ACTIVITY_BAR_TOP_FOREGROUND); },
 				get inactiveForegroundColor() { return $this.getCompositeBarPosition() === CompositeBarPosition.TITLE ? theme.getColor(PANEL_INACTIVE_TITLE_FOREGROUND) : theme.getColor(ACTIVITY_BAR_TOP_INACTIVE_FOREGROUND); },
@@ -262,10 +262,11 @@ export class AuxiliaryBarPart extends AbstractPaneCompositePart {
 			return;
 		}

-		// Layout content with reduced dimensions to account for visual margins
+		// Layout content with reduced dimensions to account for visual margins and border
+		const borderTotal = 2; // 1px border on each side
 		super.layout(
-			width - AuxiliaryBarPart.MARGIN_RIGHT,
-			height - AuxiliaryBarPart.MARGIN_TOP - AuxiliaryBarPart.MARGIN_BOTTOM,
+			width - AuxiliaryBarPart.MARGIN_RIGHT - borderTotal,
+			height - AuxiliaryBarPart.MARGIN_TOP - AuxiliaryBarPart.MARGIN_BOTTOM - borderTotal,
 			top, left
 		);

--- a/src/vs/sessions/browser/parts/chatBarPart.ts
+++ b/src/vs/sessions/browser/parts/chatBarPart.ts
@@ -11,9 +11,9 @@ import { IKeybindingService } from '../../../platform/keybinding/common/keybindi
 import { INotificationService } from '../../../platform/notification/common/notification.js';
 import { IStorageService } from '../../../platform/storage/common/storage.js';
 import { IThemeService } from '../../../platform/theme/common/themeService.js';
-import { ACTIVITY_BAR_BADGE_BACKGROUND, ACTIVITY_BAR_BADGE_FOREGROUND, PANEL_ACTIVE_TITLE_BORDER, PANEL_ACTIVE_TITLE_FOREGROUND, PANEL_DRAG_AND_DROP_BORDER, PANEL_INACTIVE_TITLE_FOREGROUND, SIDE_BAR_BACKGROUND, SIDE_BAR_TITLE_BORDER, SIDE_BAR_FOREGROUND } from '../../../workbench/common/theme.js';
+import { ACTIVITY_BAR_BADGE_BACKGROUND, ACTIVITY_BAR_BADGE_FOREGROUND, PANEL_ACTIVE_TITLE_BORDER, PANEL_ACTIVE_TITLE_FOREGROUND, PANEL_BORDER, PANEL_DRAG_AND_DROP_BORDER, PANEL_INACTIVE_TITLE_FOREGROUND, SIDE_BAR_TITLE_BORDER, SIDE_BAR_FOREGROUND } from '../../../workbench/common/theme.js';
 import { contrastBorder } from '../../../platform/theme/common/colorRegistry.js';
-import { sessionsSidebarBorder } from '../../common/theme.js';
+import { sessionsChatBarBackground } from '../../common/theme.js';
 import { IViewDescriptorService, ViewContainerLocation } from '../../../workbench/common/views.js';
 import { IExtensionService } from '../../../workbench/services/extensions/common/extensions.js';
 import { IWorkbenchLayoutService, Parts } from '../../../workbench/services/layout/browser/layoutService.js';
@@ -43,9 +43,9 @@ export class ChatBarPart extends AbstractPaneCompositePart {
 	override readonly maximumHeight: number = Number.POSITIVE_INFINITY;

 	/** Visual margin values for the card-like appearance */
-	static readonly MARGIN_TOP = 16;
-	static readonly MARGIN_LEFT = 16;
-	static readonly MARGIN_RIGHT = 16;
+	static readonly MARGIN_TOP = 12;
+	static readonly MARGIN_LEFT = 12;
+	static readonly MARGIN_RIGHT = 12;
 	static readonly MARGIN_BOTTOM = 2;

 	/** Border width on the card (1px each side) */
@@ -110,9 +110,9 @@ export class ChatBarPart extends AbstractPaneCompositePart {
 		const container = assertReturnsDefined(this.getContainer());

 		// Store background and border as CSS variables for the card styling on .part
-		container.style.setProperty('--part-background', this.getColor(SIDE_BAR_BACKGROUND) || '');
-		container.style.setProperty('--part-border-color', this.getColor(sessionsSidebarBorder) || this.getColor(contrastBorder) || 'transparent');
-		container.style.backgroundColor = 'transparent';
+		container.style.setProperty('--part-background', this.getColor(sessionsChatBarBackground) || '');
+		container.style.setProperty('--part-border-color', this.getColor(PANEL_BORDER) || this.getColor(contrastBorder) || 'transparent');
+		container.style.backgroundColor = this.getColor(sessionsChatBarBackground) || '';
 		container.style.color = this.getColor(SIDE_BAR_FOREGROUND) || '';
 	}

@@ -123,8 +123,9 @@ export class ChatBarPart extends AbstractPaneCompositePart {

 		// Layout content with reduced dimensions to account for visual margins and border
 		const borderTotal = ChatBarPart.BORDER_WIDTH * 2;
+		const marginLeft = this.layoutService.isVisible(Parts.SIDEBAR_PART) ? 0 : ChatBarPart.MARGIN_LEFT;
 		super.layout(
-			width - ChatBarPart.MARGIN_LEFT - ChatBarPart.MARGIN_RIGHT - borderTotal,
+			width - marginLeft - ChatBarPart.MARGIN_RIGHT - borderTotal,
 			height - ChatBarPart.MARGIN_TOP - ChatBarPart.MARGIN_BOTTOM - borderTotal,
 			top, left
 		);
@@ -150,8 +151,8 @@ export class ChatBarPart extends AbstractPaneCompositePart {
 			iconSize: 16,
 			overflowActionSize: 30,
 			colors: theme => ({
-				activeBackgroundColor: theme.getColor(SIDE_BAR_BACKGROUND),
-				inactiveBackgroundColor: theme.getColor(SIDE_BAR_BACKGROUND),
+				activeBackgroundColor: theme.getColor(sessionsChatBarBackground),
+				inactiveBackgroundColor: theme.getColor(sessionsChatBarBackground),
 				activeBorderBottomColor: theme.getColor(PANEL_ACTIVE_TITLE_BORDER),
 				activeForegroundColor: theme.getColor(PANEL_ACTIVE_TITLE_FOREGROUND),
 				inactiveForegroundColor: theme.getColor(PANEL_INACTIVE_TITLE_FOREGROUND),
--- a/src/vs/sessions/browser/parts/media/auxiliaryBarPart.css
+++ b/src/vs/sessions/browser/parts/media/auxiliaryBarPart.css
@@ -28,6 +28,7 @@
 .agent-sessions-workbench .part.auxiliarybar > .title {
 	padding-left: 4px;
 	padding-right: 2px;
+	background-color: var(--vscode-sessionsAuxiliaryBar-background);
 }

 /* Hide the underline indicator entirely */
@@ -40,3 +41,10 @@
 	background-color: var(--vscode-activityBarTop-activeBackground, color-mix(in srgb, var(--vscode-sideBarTitle-foreground) 5%, transparent)) !important;
 	border-radius: 4px;
 }
+
+/* Override base workbench monaco editor background in auxiliary bar content */
+.agent-sessions-workbench .part.auxiliarybar > .content .monaco-editor,
+.agent-sessions-workbench .part.auxiliarybar > .content .monaco-editor .margin,
+.agent-sessions-workbench .part.auxiliarybar > .content .monaco-editor .monaco-editor-background {
+	background-color: var(--vscode-sessionsAuxiliaryBar-background);
+}
--- a/src/vs/sessions/browser/parts/media/panelPart.css
+++ b/src/vs/sessions/browser/parts/media/panelPart.css
@@ -23,6 +23,7 @@
 .agent-sessions-workbench .part.panel > .title {
 	padding-left: 6px;
 	padding-right: 6px;
+	background-color: var(--vscode-sessionsPanel-background);
 }

 /* Active/checked state: background container instead of underline */
@@ -30,3 +31,15 @@
 	background-color: var(--vscode-activityBarTop-activeBackground, color-mix(in srgb, var(--vscode-sideBarTitle-foreground) 5%, transparent)) !important;
 	border-radius: 4px;
 }
+
+/* Override base workbench panel content background for terminal */
+.agent-sessions-workbench .part.panel > .content .monaco-editor,
+.agent-sessions-workbench .part.panel > .content .monaco-editor .margin,
+.agent-sessions-workbench .part.panel > .content .monaco-editor .monaco-editor-background {
+	background-color: var(--vscode-sessionsPanel-background);
+}
+
+/* Terminal body background */
+.agent-sessions-workbench .part.panel .terminal-wrapper {
+	background-color: var(--vscode-sessionsPanel-background);
+}
--- a/src/vs/sessions/browser/parts/media/sidebarPart.css
+++ b/src/vs/sessions/browser/parts/media/sidebarPart.css
@@ -30,15 +30,31 @@
 }

 /* Sidebar Footer Container */
-.monaco-workbench .part.sidebar > .sidebar-footer {
+.agent-sessions-workbench .part.sidebar > .sidebar-footer {
 	display: flex;
 	align-items: stretch;
 	gap: 4px;
-	padding: 6px;
-	border-top: 1px solid var(--vscode-sideBarSectionHeader-border, transparent);
+	padding: 6px 0;
+	border-top: 1px solid var(--vscode-panel-border, transparent);
+	margin: 0 12px 12px 12px;
 	flex-shrink: 0;
 }

+/* Inset pane section header borders — hide inline border-top, replace with inset pseudo-element */
+.agent-sessions-workbench .part.sidebar .pane > .pane-header {
+	border-top-color: transparent !important;
+}
+
+.agent-sessions-workbench .part.sidebar .split-view-view:not(:first-of-type) > .pane > .pane-header::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 12px;
+	right: 0;
+	height: 1px;
+	background-color: var(--vscode-panel-border, transparent);
+}
+
 /* Make the toolbar fill the footer width and stack actions vertically */
 .monaco-workbench .part.sidebar > .sidebar-footer .monaco-toolbar,
 .monaco-workbench .part.sidebar > .sidebar-footer .monaco-action-bar,
--- a/src/vs/sessions/browser/parts/panelPart.ts
+++ b/src/vs/sessions/browser/parts/panelPart.ts
@@ -14,9 +14,9 @@ import { IContextMenuService } from '../../../platform/contextview/browser/conte
 import { IKeybindingService } from '../../../platform/keybinding/common/keybinding.js';
 import { IInstantiationService } from '../../../platform/instantiation/common/instantiation.js';
 import { IThemeService } from '../../../platform/theme/common/themeService.js';
-import { PANEL_BACKGROUND, PANEL_TITLE_BORDER, PANEL_ACTIVE_TITLE_FOREGROUND, PANEL_INACTIVE_TITLE_FOREGROUND, PANEL_ACTIVE_TITLE_BORDER, PANEL_DRAG_AND_DROP_BORDER, PANEL_TITLE_BADGE_BACKGROUND, PANEL_TITLE_BADGE_FOREGROUND } from '../../../workbench/common/theme.js';
+import { PANEL_BORDER, PANEL_TITLE_BORDER, PANEL_ACTIVE_TITLE_FOREGROUND, PANEL_INACTIVE_TITLE_FOREGROUND, PANEL_ACTIVE_TITLE_BORDER, PANEL_DRAG_AND_DROP_BORDER, PANEL_TITLE_BADGE_BACKGROUND, PANEL_TITLE_BADGE_FOREGROUND } from '../../../workbench/common/theme.js';
 import { contrastBorder } from '../../../platform/theme/common/colorRegistry.js';
-import { sessionsSidebarBorder } from '../../common/theme.js';
+import { sessionsPanelBackground } from '../../common/theme.js';
 import { INotificationService } from '../../../platform/notification/common/notification.js';
 import { IContextKeyService } from '../../../platform/contextkey/common/contextkey.js';
 import { assertReturnsDefined } from '../../../base/common/types.js';
@@ -69,9 +69,9 @@ export class PanelPart extends AbstractPaneCompositePart {
 	static readonly activePanelSettingsKey = 'workbench.agentsession.panelpart.activepanelid';

 	/** Visual margin values for the card-like appearance */
-	static readonly MARGIN_BOTTOM = 18;
-	static readonly MARGIN_LEFT = 16;
-	static readonly MARGIN_RIGHT = 16;
+	static readonly MARGIN_BOTTOM = 14;
+	static readonly MARGIN_LEFT = 12;
+	static readonly MARGIN_RIGHT = 12;

 	constructor(
 		@INotificationService notificationService: INotificationService,
@@ -129,9 +129,9 @@ export class PanelPart extends AbstractPaneCompositePart {
 		const container = assertReturnsDefined(this.getContainer());

 		// Store background and border as CSS variables for the card styling on .part
-		container.style.setProperty('--part-background', this.getColor(PANEL_BACKGROUND) || '');
-		container.style.setProperty('--part-border-color', this.getColor(sessionsSidebarBorder) || this.getColor(contrastBorder) || 'transparent');
-		container.style.backgroundColor = 'transparent';
+		container.style.setProperty('--part-background', this.getColor(sessionsPanelBackground) || '');
+		container.style.setProperty('--part-border-color', this.getColor(PANEL_BORDER) || this.getColor(contrastBorder) || 'transparent');
+		container.style.backgroundColor = this.getColor(sessionsPanelBackground) || '';

 		// Clear inline borders - the card appearance uses CSS border-radius instead
 		container.style.borderTopColor = '';
@@ -157,8 +157,8 @@ export class PanelPart extends AbstractPaneCompositePart {
 			compact: true,
 			overflowActionSize: 44,
 			colors: theme => ({
-				activeBackgroundColor: theme.getColor(PANEL_BACKGROUND),
-				inactiveBackgroundColor: theme.getColor(PANEL_BACKGROUND),
+				activeBackgroundColor: theme.getColor(sessionsPanelBackground),
+				inactiveBackgroundColor: theme.getColor(sessionsPanelBackground),
 				activeBorderBottomColor: theme.getColor(PANEL_ACTIVE_TITLE_BORDER),
 				activeForegroundColor: theme.getColor(PANEL_ACTIVE_TITLE_FOREGROUND),
 				inactiveForegroundColor: theme.getColor(PANEL_INACTIVE_TITLE_FOREGROUND),
@@ -176,10 +176,12 @@ export class PanelPart extends AbstractPaneCompositePart {
 			return;
 		}

-		// Layout content with reduced dimensions to account for visual margins
+		// Layout content with reduced dimensions to account for visual margins and border
+		const borderTotal = 2; // 1px border on each side
+		const marginLeft = this.layoutService.isVisible(Parts.SIDEBAR_PART) ? 0 : PanelPart.MARGIN_LEFT;
 		super.layout(
-			width - PanelPart.MARGIN_LEFT - PanelPart.MARGIN_RIGHT,
-			height - PanelPart.MARGIN_BOTTOM,
+			width - marginLeft - PanelPart.MARGIN_RIGHT - borderTotal,
+			height - PanelPart.MARGIN_BOTTOM - borderTotal,
 			top, left
 		);

--- a/src/vs/sessions/browser/parts/sidebarPart.ts
+++ b/src/vs/sessions/browser/parts/sidebarPart.ts
@@ -12,9 +12,8 @@ import { IContextMenuService } from '../../../platform/contextview/browser/conte
 import { IKeybindingService } from '../../../platform/keybinding/common/keybinding.js';
 import { IInstantiationService } from '../../../platform/instantiation/common/instantiation.js';
 import { IThemeService } from '../../../platform/theme/common/themeService.js';
-import { SIDE_BAR_TITLE_FOREGROUND, SIDE_BAR_TITLE_BORDER, SIDE_BAR_BACKGROUND, SIDE_BAR_FOREGROUND, SIDE_BAR_DRAG_AND_DROP_BACKGROUND, ACTIVITY_BAR_BADGE_BACKGROUND, ACTIVITY_BAR_BADGE_FOREGROUND, ACTIVITY_BAR_TOP_FOREGROUND, ACTIVITY_BAR_TOP_ACTIVE_BORDER, ACTIVITY_BAR_TOP_INACTIVE_FOREGROUND, ACTIVITY_BAR_TOP_DRAG_AND_DROP_BORDER } from '../../../workbench/common/theme.js';
-import { contrastBorder } from '../../../platform/theme/common/colorRegistry.js';
-import { sessionsSidebarBorder, sessionsSidebarHeaderBackground, sessionsSidebarHeaderForeground } from '../../common/theme.js';
+import { SIDE_BAR_TITLE_FOREGROUND, SIDE_BAR_TITLE_BORDER, SIDE_BAR_FOREGROUND, SIDE_BAR_DRAG_AND_DROP_BACKGROUND, ACTIVITY_BAR_BADGE_BACKGROUND, ACTIVITY_BAR_BADGE_FOREGROUND, ACTIVITY_BAR_TOP_FOREGROUND, ACTIVITY_BAR_TOP_ACTIVE_BORDER, ACTIVITY_BAR_TOP_INACTIVE_FOREGROUND, ACTIVITY_BAR_TOP_DRAG_AND_DROP_BORDER } from '../../../workbench/common/theme.js';
+import { sessionsSidebarBackground, sessionsSidebarHeaderBackground, sessionsSidebarHeaderForeground } from '../../common/theme.js';
 import { INotificationService } from '../../../platform/notification/common/notification.js';
 import { IContextKeyService } from '../../../platform/contextkey/common/contextkey.js';
 import { AnchorAlignment } from '../../../base/browser/ui/contextview/contextview.js';
@@ -65,6 +64,8 @@ export class SidebarPart extends AbstractPaneCompositePart {
 	private static readonly FOOTER_ITEM_HEIGHT = 26;
 	private static readonly FOOTER_ITEM_GAP = 4;
 	private static readonly FOOTER_VERTICAL_PADDING = 6;
+	private static readonly FOOTER_BOTTOM_MARGIN = 12;
+	private static readonly FOOTER_BORDER_TOP = 1;

 	private footerContainer: HTMLElement | undefined;
 	private sideBarTitleArea: HTMLElement | undefined;
@@ -115,7 +116,7 @@ export class SidebarPart extends AbstractPaneCompositePart {
 	) {
 		super(
 			Parts.SIDEBAR_PART,
-			{ hasTitle: true, trailingSeparator: false, borderWidth: () => (this.getColor(sessionsSidebarBorder) || this.getColor(contrastBorder)) ? 1 : 0 },
+			{ hasTitle: true, trailingSeparator: false, borderWidth: () => 0 },
 			SidebarPart.activeViewletSettingsKey,
 			ActiveViewletContext.bindTo(contextKeyService),
 			SidebarFocusContext.bindTo(contextKeyService),
@@ -257,7 +258,9 @@ export class SidebarPart extends AbstractPaneCompositePart {

 		return SidebarPart.FOOTER_VERTICAL_PADDING * 2
 			+ (actionCount * SidebarPart.FOOTER_ITEM_HEIGHT)
-			+ ((actionCount - 1) * SidebarPart.FOOTER_ITEM_GAP);
+			+ ((actionCount - 1) * SidebarPart.FOOTER_ITEM_GAP)
+			+ SidebarPart.FOOTER_BOTTOM_MARGIN
+			+ SidebarPart.FOOTER_BORDER_TOP;
 	}

 	private updateFooterVisibility(): void {
@@ -274,15 +277,14 @@ export class SidebarPart extends AbstractPaneCompositePart {

 		const container = assertReturnsDefined(this.getContainer());

-		container.style.backgroundColor = this.getColor(SIDE_BAR_BACKGROUND) || '';
+		container.style.backgroundColor = this.getColor(sessionsSidebarBackground) || '';
 		container.style.color = this.getColor(SIDE_BAR_FOREGROUND) || '';
 		container.style.outlineColor = this.getColor(SIDE_BAR_DRAG_AND_DROP_BACKGROUND) ?? '';

-		// Right border to separate from the right section
-		const borderColor = this.getColor(sessionsSidebarBorder) || this.getColor(contrastBorder) || '';
-		container.style.borderRightWidth = borderColor ? '1px' : '';
-		container.style.borderRightStyle = borderColor ? 'solid' : '';
-		container.style.borderRightColor = borderColor;
+		// No right border in sessions sidebar
+		container.style.borderRightWidth = '';
+		container.style.borderRightStyle = '';
+		container.style.borderRightColor = '';

 		// Title area uses sessions-specific header colors
 		if (this.sideBarTitleArea) {
@@ -349,8 +351,8 @@ export class SidebarPart extends AbstractPaneCompositePart {
 			iconSize: 16,
 			overflowActionSize: 30,
 			colors: theme => ({
-				activeBackgroundColor: theme.getColor(SIDE_BAR_BACKGROUND),
-				inactiveBackgroundColor: theme.getColor(SIDE_BAR_BACKGROUND),
+				activeBackgroundColor: theme.getColor(sessionsSidebarBackground),
+				inactiveBackgroundColor: theme.getColor(sessionsSidebarBackground),
 				activeBorderBottomColor: theme.getColor(ACTIVITY_BAR_TOP_ACTIVE_BORDER),
 				activeForegroundColor: theme.getColor(ACTIVITY_BAR_TOP_FOREGROUND),
 				inactiveForegroundColor: theme.getColor(ACTIVITY_BAR_TOP_INACTIVE_FOREGROUND),
--- a/src/vs/sessions/common/theme.ts
+++ b/src/vs/sessions/common/theme.ts
@@ -6,7 +6,6 @@
 import { localize } from '../../nls.js';
 import { getColorRegistry, registerColor, transparent } from '../../platform/theme/common/colorUtils.js';
 import { contrastBorder, iconForeground } from '../../platform/theme/common/colorRegistry.js';
-import { Color } from '../../base/common/color.js';
 import { buttonBackground } from '../../platform/theme/common/colors/inputColors.js';
 import { editorBackground } from '../../platform/theme/common/colors/editorColors.js';
 import { PANEL_BACKGROUND, SIDE_BAR_BACKGROUND, SIDE_BAR_FOREGROUND } from '../../workbench/common/theme.js';
@@ -14,21 +13,35 @@ import { PANEL_BACKGROUND, SIDE_BAR_BACKGROUND, SIDE_BAR_FOREGROUND } from '../.
 // Sessions sidebar background color
 export const sessionsSidebarBackground = registerColor(
 	'sessionsSidebar.background',
-	SIDE_BAR_BACKGROUND,
+	editorBackground,
 	localize('sessionsSidebar.background', 'Background color of the sidebar view in the agent sessions window.')
 );

-// Sessions sidebar border color
-export const sessionsSidebarBorder = registerColor(
-	'sessionsSidebar.border',
-	{ dark: Color.fromHex('#808080').transparent(0.35), light: Color.fromHex('#808080').transparent(0.35), hcDark: contrastBorder, hcLight: contrastBorder },
-	localize('sessionsSidebar.border', 'Border color of the sidebar in the agent sessions window.')
+// Sessions auxiliary bar background color
+export const sessionsAuxiliaryBarBackground = registerColor(
+	'sessionsAuxiliaryBar.background',
+	SIDE_BAR_BACKGROUND,
+	localize('sessionsAuxiliaryBar.background', 'Background color of the auxiliary bar in the agent sessions window.')
+);
+
+// Sessions panel background color
+export const sessionsPanelBackground = registerColor(
+	'sessionsPanel.background',
+	SIDE_BAR_BACKGROUND,
+	localize('sessionsPanel.background', 'Background color of the panel in the agent sessions window.')
+);
+
+// Sessions chat bar background color
+export const sessionsChatBarBackground = registerColor(
+	'sessionsChatBar.background',
+	SIDE_BAR_BACKGROUND,
+	localize('sessionsChatBar.background', 'Background color of the chat bar in the agent sessions window.')
 );

 // Sessions sidebar header colors
 export const sessionsSidebarHeaderBackground = registerColor(
 	'sessionsSidebarHeader.background',
-	SIDE_BAR_BACKGROUND,
+	sessionsSidebarBackground,
 	localize('sessionsSidebarHeader.background', 'Background color of the sidebar header area in the agent sessions window.')
 );

@@ -41,7 +54,7 @@ export const sessionsSidebarHeaderForeground = registerColor(
 // Chat bar title colors
 export const chatBarTitleBackground = registerColor(
 	'chatBarTitle.background',
-	SIDE_BAR_BACKGROUND,
+	sessionsSidebarBackground,
 	localize('chatBarTitle.background', 'Background color of the chat bar title area in the agent sessions window.')
 );

--- a/src/vs/sessions/contrib/accountMenu/browser/media/accountWidget.css
+++ b/src/vs/sessions/contrib/accountMenu/browser/media/accountWidget.css
@@ -19,6 +19,11 @@
 	min-width: 0;
 }

+/* Hide the default action-label rendered by the toolbar — the account widget provides its own button */
+.account-widget > .action-label {
+	display: none;
+}
+
 /* Account Button */
 .monaco-workbench .part.sidebar > .sidebar-footer .account-widget-account {
 	overflow: hidden;
--- a/src/vs/sessions/contrib/sessions/browser/media/customizationsToolbar.css
+++ b/src/vs/sessions/contrib/sessions/browser/media/customizationsToolbar.css
@@ -7,8 +7,9 @@
 	display: flex;
 	flex-direction: column;
 	flex-shrink: 0;
-	border-top: 1px solid var(--vscode-widget-border);
-	padding: 6px;
+	border-top: 1px solid var(--vscode-panel-border, transparent);
+	margin: 0 12px;
+	padding: 6px 0;
 }

 /* Make the toolbar, action bar, and items fill full width and stack vertically */
--- a/src/vs/sessions/contrib/sessions/browser/media/sessionsViewPane.css
+++ b/src/vs/sessions/contrib/sessions/browser/media/sessionsViewPane.css
@@ -40,6 +40,7 @@
 		flex: 1;
 		overflow: hidden;
 		min-height: 0;
+		margin-bottom: 12px;
 	}

 	.agent-sessions-header {
@@ -73,7 +74,7 @@
 	}

 	.agent-sessions-new-button-container {
-		padding: 6px 12px 8px 12px;
+		padding: 8px 12px;
 	}

 	.agent-sessions-new-button-container .monaco-button {
--- a/src/vs/workbench/contrib/chat/browser/agentSessions/media/agentsessionsviewer.css
+++ b/src/vs/workbench/contrib/chat/browser/agentSessions/media/agentsessionsviewer.css
@@ -13,6 +13,15 @@
 		padding: 0 6px;
 	}

+	.agent-sessions-workbench .pane-body & .monaco-scrollable-element {
+		padding: 0 12px;
+	}
+
+	.agent-sessions-workbench .pane-body & .monaco-tree-sticky-container {
+		left: 12px;
+		width: calc(100% - 24px);
+	}
+
 	.monaco-list-row {
 		border-radius: 6px;
 	}