add light animations for editing and todo/editing list

[justschen]

video incoming sorry github isn't letting me upload

[Copilot]

Pull request overview

Adds new UI animations to the chat experience (above-input widgets, todo title flip, and edit bubble expansion) and updates supporting code/types used by the chat workbench.

Changes:

• Add reveal/collapse and title-flip animations for above-input widgets (todo list, editing list, status/tip widgets, question carousel).
• Animate the “edit request” input bubble expanding from the original bubble width.
• Update Monaco type declarations and register a new CSS custom property for stylelint.

Reviewed changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
src/vs/workbench/contrib/chat/browser/widget/media/chat.css	Adds new keyframes and classes for above-input reveal/collapse, todo title flip, and edit bubble expansion.
src/vs/workbench/contrib/chat/browser/widget/input/chatStatusWidget.ts	Triggers the new reveal animation when the status widget becomes visible.
src/vs/workbench/contrib/chat/browser/widget/input/chatInputPart.ts	Triggers reveal/collapse animations for the question carousel and working set list.
src/vs/workbench/contrib/chat/browser/widget/chatWidget.ts	Captures bubble width and triggers reveal animation for the getting-started tip.
src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatTodoListWidget.ts	Adds todo list expand/collapse animations, title flip animation logic, and shared animation helper functions.
src/vs/monaco.d.ts	Tightens types for some editor options (notably placeholder).
build/lib/stylelint/vscode-known-variables.json	Adds --chat-edit-bubble-width to the known variables list.

Comments suppressed due to low confidence (3)

src/vs/workbench/contrib/chat/browser/widget/media/chat.css:872

• The reveal keyframe ends with max-height: 500px. Combined with animation-fill-mode: forwards on the reveal class, this can leave the element permanently capped at 500px (clipping content). Consider restoring max-height after the animation (e.g. removing the reveal class on animationend) or avoiding a fixed max-height in the final keyframe.

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
		max-height: 500px;
	}

src/vs/workbench/contrib/chat/browser/widget/media/chat.css:883

• Please add a reduced-motion override for these animations. VS Code commonly disables animations under .monaco-workbench.monaco-reduce-motion (see src/vs/workbench/contrib/chat/electron-browser/actions/media/voiceChatActions.css).

	animation: kf-chat-above-input-reveal 350ms cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
	transform-origin: bottom center;

src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatTodoListWidget.ts:505

• triggerRevealAnimation always leaves the chat-above-input-reveal class on the element. Since the CSS uses animation-fill-mode: forwards and animates max-height, consider removing the reveal class on animationend (or otherwise restoring layout styles) so the element doesn’t remain in an animation-filled state after the transition.

export function triggerRevealAnimation(element: HTMLElement): void {
	element.classList.remove('chat-above-input-reveal');
	element.classList.remove('chat-above-input-collapse');
	void element.offsetWidth; // Force reflow to restart animation
	element.classList.add('chat-above-input-reveal');

---

You can also share your feedback on Copilot code review. Take the survey.