Improve chat todo list progress title, ARIA labels, and truncation (microsoft#273158)

* Improve chat todo list progress title, ARIA labels, and truncation; adjust input padding

* Reduce bottom padding for chat todo list widget to tighten spacing

Author: bhavyaus

src/vs/workbench/contrib/chat/browser/chatContentParts/chatTodoListWidget.ts

@@ -448,19 +448,19 @@ export class ChatTodoListWidget extends Disposable {
 		const notStartedTodos = todoList.filter(todo => todo.status === 'not-started');
 		const firstNotStartedTodo = notStartedTodos.length > 0 ? notStartedTodos[0] : undefined;
 
-		const progressText = dom.$('span');
-		if (totalCount === 0) {
-			progressText.textContent = localize('chat.todoList.title', 'Todos');
-		} else {
-			// Show the current task number (1-indexed): completed + in-progress, or just completed if none in-progress
-			// Ensure we show at least 1 when tasks exist
-			const currentTaskNumber = inProgressTodos.length > 0 ? completedCount + 1 : Math.max(1, completedCount);
-			progressText.textContent = localize('chat.todoList.titleWithProgressExpanded', 'Todos ({0}/{1})', currentTaskNumber, totalCount);
-		}
-		titleElement.appendChild(progressText);
+		// Calculate current task number (1-indexed)
+		const currentTaskNumber = inProgressTodos.length > 0 ? completedCount + 1 : Math.max(1, completedCount);
+		const progressCount = totalCount > 0 ? ` (${currentTaskNumber}/${totalCount})` : '';
+
+		const titleText = dom.$('span');
+		titleText.textContent = this._isExpanded
+			? localize('chat.todoList.title', 'Todos') + progressCount
+			: progressCount;
+		titleElement.appendChild(titleText);
+
 		const expandButtonLabel = this._isExpanded
-			? localize('chat.todoList.collapseButtonWithProgress', 'Collapse {0}', progressText.textContent)
-			: localize('chat.todoList.expandButtonWithProgress', 'Expand {0}', progressText.textContent);
+			? localize('chat.todoList.collapseButton', 'Collapse Todos {0}', progressCount)
+			: localize('chat.todoList.expandButton', 'Expand Todos {0}', progressCount);
 		this.expandoElement.setAttribute('aria-label', expandButtonLabel);
 		this.expandoElement.setAttribute('aria-expanded', this._isExpanded ? 'true' : 'false');
 		if (!this._isExpanded) {
@@ -488,6 +488,10 @@ export class ChatTodoListWidget extends Disposable {
 				const todoText = dom.$('span');
 				todoText.textContent = todoToShow.title;
 				todoText.style.verticalAlign = 'middle';
+				todoText.style.overflow = 'hidden';
+				todoText.style.textOverflow = 'ellipsis';
+				todoText.style.whiteSpace = 'nowrap';
+				todoText.style.minWidth = '0';
 				titleElement.appendChild(todoText);
 			}
 			// Show "Done" when all tasks are completed

src/vs/workbench/contrib/chat/browser/chatInputPart.ts

@@ -2095,7 +2095,7 @@ export class ChatInputPart extends Disposable implements IHistoryNavigationWidge
 			followupsHeight: this.followupsContainer.offsetHeight,
 			inputPartEditorHeight: Math.min(this._inputEditor.getContentHeight(), this.inputEditorMaxHeight),
 			inputPartHorizontalPadding: this.options.renderStyle === 'compact' ? 16 : 32,
-			inputPartVerticalPadding: this.options.renderStyle === 'compact' ? 12 : (16 /* entire part */ + 6 /* input container */ + (2 * 4) /* flex gap: edits|input */),
+			inputPartVerticalPadding: this.options.renderStyle === 'compact' ? 12 : (16 /* entire part */ + 6 /* input container */ + (1 * 4) /* flex gap: todo|edits|input */),
 			attachmentsHeight: this.attachmentsHeight,
 			editorBorder: 2,
 			inputPartHorizontalPaddingInside: 12,

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

@@ -1094,7 +1094,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 8px 6px 12px;
+	padding: 6px 8px 5px 12px;
 	box-sizing: border-box;
 	border: 1px solid var(--vscode-input-border, transparent);
 	background-color: var(--vscode-editor-background);
@@ -1186,6 +1186,8 @@ have to be updated for changes to the rules above, or to support more deeply nes
 	color: var(--vscode-foreground);
 	display: flex;
 	align-items: center;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .interactive-session .interactive-input-part > .chat-todo-list-widget-container .chat-todo-list-widget .todo-list-container {

src/vs/workbench/contrib/chat/test/browser/chatTodoListWidget.test.ts

@@ -62,7 +62,8 @@ suite('ChatTodoListWidget Accessibility', () => {
 
 		const titleElement = widget.domNode.querySelector('#todo-list-title');
 		assert.ok(titleElement, 'Should have title element with ID todo-list-title');
-		assert.ok(titleElement?.textContent?.includes('Todos'));
+		// When collapsed, title shows progress and current task without "Todos" prefix
+		assert.ok(titleElement?.textContent, 'Title should have content');
 
 		// The todo list container itself acts as the list (no nested ul element)
 		const todoItems = todoListContainer?.querySelectorAll('li.todo-item');
@@ -113,13 +114,13 @@ suite('ChatTodoListWidget Accessibility', () => {
 		assert.strictEqual(expandoElement?.getAttribute('aria-expanded'), 'false'); // Should be collapsed due to in-progress task
 		assert.strictEqual(expandoElement?.getAttribute('aria-controls'), 'todo-list-container');
 
-		// The title element should have aria-label with progress information
+		// The title element should have progress information
 		const titleElement = expandoElement?.querySelector('.todo-list-title');
 		assert.ok(titleElement, 'Should have title element');
 		const titleText = titleElement?.textContent;
-		// When collapsed, title shows progress and current task: "Todos (2/3) - Second task"
+		// When collapsed, title shows progress and current task: " (2/3) - Second task"
 		// Progress is 2/3 because: 1 completed + 1 in-progress (current) = task 2 of 3
-		assert.ok(titleText?.includes('Todos (2/3)'), `Title should show progress format, but got: "${titleText}"`);
+		assert.ok(titleText?.includes('(2/3)'), `Title should show progress format, but got: "${titleText}"`);
 		assert.ok(titleText?.includes('Second task'), `Title should show current task when collapsed, but got: "${titleText}"`);
 	}); test('hidden status text elements exist for screen readers', () => {
 		widget.render('test-session');
@@ -178,11 +179,11 @@ suite('ChatTodoListWidget Accessibility', () => {
 		const titleElement = widget.domNode.querySelector('#todo-list-title');
 		assert.ok(titleElement, 'Should have title element with ID');
 
-		// Title should show progress format: "Todos (2/3)" since one todo is completed and one is in-progress
-		// When collapsed, it also shows the current task: "Todos (2/3) - Second task"
+		// Title should show progress format: " (2/3)" since one todo is completed and one is in-progress
+		// When collapsed, it also shows the current task: " (2/3) - Second task"
 		// Progress is 2/3 because: 1 completed + 1 in-progress (current) = task 2 of 3
 		const titleText = titleElement?.textContent;
-		assert.ok(titleText?.includes('Todos (2/3)'), `Title should show progress format, but got: "${titleText}"`);
+		assert.ok(titleText?.includes('(2/3)'), `Title should show progress format, but got: "${titleText}"`);
 		assert.ok(titleText?.includes('Second task'), `Title should show current task when collapsed, but got: "${titleText}"`);
 
 		// Verify aria-labelledby connection works