agent sessions - UI tweaks (#276287)

Author: bpasero

src/vs/workbench/contrib/chat/browser/agentSessions/agentSessionViewModel.ts

@@ -182,7 +182,7 @@ export class AgentSessionsViewModel extends Disposable implements IAgentSessions
 						break;
 					case AgentSessionProviders.Background:
 						providerLabel = localize('chat.session.providerLabel.background', "Background");
-						icon = Codicon.layers;
+						icon = Codicon.serverProcess;
 						break;
 					case AgentSessionProviders.Cloud:
 						providerLabel = localize('chat.session.providerLabel.cloud', "Cloud");

src/vs/workbench/contrib/chat/browser/agentSessions/agentSessionsViewer.ts

@@ -45,10 +45,12 @@ interface IAgentSessionItemTemplate {
 	// Column 2 Row 1
 	readonly title: IconLabel;
 
-	// Column 2 Row 2
-	readonly description: HTMLElement;
+	readonly diffFiles: HTMLElement;
 	readonly diffAdded: HTMLElement;
 	readonly diffRemoved: HTMLElement;
+
+	// Column 2 Row 2
+	readonly description: HTMLElement;
 	readonly status: HTMLElement;
 
 	readonly elementDisposable: DisposableStore;
@@ -86,13 +88,14 @@ export class AgentSessionRenderer implements ICompressibleTreeRenderer<IAgentSes
 				h('div.agent-session-main-col', [
 					h('div.agent-session-title-row', [
 						h('div.agent-session-title@title'),
-					]),
-					h('div.agent-session-details-row', [
-						h('div.agent-session-description@description'),
 						h('div.agent-session-diff', [
+							h('span.agent-session-diff-files@diffFiles'),
 							h('span.agent-session-diff-added@diffAdded'),
 							h('span.agent-session-diff-removed@diffRemoved')
 						]),
+					]),
+					h('div.agent-session-details-row', [
+						h('div.agent-session-description@description'),
 						h('div.agent-session-status@status')
 					])
 				])
@@ -106,6 +109,7 @@ export class AgentSessionRenderer implements ICompressibleTreeRenderer<IAgentSes
 			icon: elements.icon,
 			title: disposables.add(new IconLabel(elements.title, { supportHighlights: true, supportIcons: true })),
 			description: elements.description,
+			diffFiles: elements.diffFiles,
 			diffAdded: elements.diffAdded,
 			diffRemoved: elements.diffRemoved,
 			status: elements.status,
@@ -125,8 +129,9 @@ export class AgentSessionRenderer implements ICompressibleTreeRenderer<IAgentSes
 
 		// Diff
 		const { statistics: diff } = session.element;
-		template.diffAdded.textContent = diff ? `+${diff.insertions}` : '';
-		template.diffRemoved.textContent = diff ? `-${diff.deletions}` : '';
+		template.diffFiles.textContent = diff?.files && diff.files > 0 ? `${diff.files}` : '';
+		template.diffAdded.textContent = diff?.insertions && diff.insertions > 0 ? `+${diff.insertions}` : '';
+		template.diffRemoved.textContent = diff?.deletions && diff.deletions > 0 ? `-${diff.deletions}` : '';
 
 		// Description
 		if (typeof session.element.description === 'string') {

src/vs/workbench/contrib/chat/browser/agentSessions/media/agentsessionsview.css

@@ -14,7 +14,7 @@
 	}
 
 	.agent-sessions-new-session-container {
-		padding: 5px 12px;
+		padding: 6px 12px;
 		flex: 0 0 auto !important;
 	}
 

src/vs/workbench/contrib/chat/browser/agentSessions/media/agentsessionsviewer.css

@@ -10,16 +10,22 @@
 	}
 
 	.monaco-list-row.selected .agent-session-details-row,
+	.monaco-list-row.selected span.agent-session-diff-files,
 	.monaco-list-row.selected span.agent-session-diff-added,
 	.monaco-list-row.selected span.agent-session-diff-removed {
 		color: unset;
+
+		.rendered-markdown {
+			a {
+				color: unset;
+			}
+		}
 	}
 
 	.agent-session-item {
 		display: flex;
 		flex-direction: row;
-		padding: 0 12px;
-		gap: 2px;
+		padding: 0 8px;
 
 		.agent-session-main-col,
 		.agent-session-title-row,
@@ -38,6 +44,10 @@
 				width: 16px;
 				height: 16px;
 				font-size: 16px;
+
+				&.codicon-terminal {
+					font-size: 15px; /* TODO@bpasero remove once we settle on icon */
+				}
 			}
 		}
 
@@ -64,7 +74,7 @@
 					align-items: center;
 					margin: 0;
 
-					>span.codicon {
+					> span.codicon {
 						margin-right: 2px;
 					}
 				}
@@ -77,19 +87,23 @@
 
 		.agent-session-title,
 		.agent-session-description {
+			flex: 1; /* push other items to the end */
 			text-overflow: ellipsis;
 			overflow: hidden;
 		}
 
 		/* #region Diff Styling */
 
 		.agent-session-diff {
-			flex: 1; /* push status to the end */
-			font-weight: 700;
+			font-size: 12px;
 			display: flex;
 			gap: 4px;
 		}
 
+		span.agent-session-diff-files {
+			color: var(--vscode-descriptionForeground);
+		}
+
 		span.agent-session-diff-added {
 			color: var(--vscode-chat-linesAddedForeground);
 		}