Agents window: Recommend connectors below the new chat composer

Description

Add a connector recommendation UI below the new chat composer in the Agents window. For the initial version, hard-code recommendations for these three connectors:

Linear
Notion
WorkIQ

This first iteration should not include dynamic recommendation logic.

Prototype with possible list and card directions: https://digitarald.github.io/proto-vibes-playground/prototypes/contextual-connector-recommendations/

Design considerations

The area below the composer already contains tips and migration warning banners. The new recommendations need to coexist with those surfaces without creating a fragmented or overly busy experience. Directions worth exploring include:

Three horizontal connector cards
A single recommendation component that has a clear relationship to the existing banners
A broader rethink of the tips, migration warnings, and connector recommendations so they form one cohesive system

Before settling on an implementation, kick off exploratory design subagents to propose and evaluate multiple directions. Synthesize the strongest approach based on all of the constraints above, the VS Code design language, and relevant modern UI principles such as clear hierarchy, progressive disclosure, accessibility, responsiveness, and appropriate information density.

Scope

Target the new chat composer in the Agents window.
Recommend Linear, Notion, and WorkIQ using a hard-coded set.
Determine how the recommendations should interact with or reshape the existing tips and migration warning banners.
Keep dynamic prompt/keyword-based recommendations out of this issue.

Acceptance criteria

The Agents window new chat composer can present recommendations for Linear, Notion, and WorkIQ.
The chosen design accounts for the existing tips and migration warning banners below the composer.
The design direction is informed by exploratory alternatives and is consistent with VS Code's design language and accessibility expectations.
The implementation remains static; it does not infer recommendations from composer content.

Sharing media and context from merged PR #341844 for verification:

Companion product metadata: microsoft/vscode-distro#1467

The Agents window did not help users discover useful connectors from the new-chat composer. This adds compact, independently dismissible Linear, Notion, and WorkIQ recommendation cards that use product-configured metadata and open the selected connector's detail page directly.

Implementation

Adds the experiment-controlled sessions.chat.experimental.connectorRecommendations setting and records its experiment trigger before control/treatment divergence.
Reads connector identifiers, names, descriptions, and image URLs from product.connectorRecommendations.
Opens the selected Copilot Connector detail directly instead of routing through a pre-filtered Discover search.
Keeps the composer visible across desktop, narrow, and phone layouts; phone recommendations and notices scroll above the pinned composer.
Supports keyboard activation, visible focus, accessible labels/help, MCP server fallback icons, independent dismissal, and predictable focus transfer.
Aligns recommendation cards, the getting-started tip, and migration notice with the same support-surface border, background, and corner treatment.

Screenshots

Dark theme

Light theme

High Contrast Dark

High Contrast Light

Direct connector navigation

Activation steps

Independent dismissal

Phone coexistence

Keyboard focus and missing product images

Cards with tips and migrations

Constrained and custom-background layouts

Short desktop pane after review feedback

Validation

npm run compile-client — Passed with 0 errors.
.\scripts\test.bat --reporter dot --run src/vs/sessions/contrib/chat/test/browser/newChatConnectorRecommendations.test.ts --run src/vs/sessions/contrib/chat/test/browser/sessionsChatAccessibilityHelp.test.ts — Passed, 49 tests.
npm run eslint -- src/vs/base/common/product.ts src/vs/sessions/contrib/chat/browser/chat.contribution.ts src/vs/sessions/contrib/chat/browser/newChatConnectorRecommendations.ts src/vs/sessions/contrib/chat/browser/newChatWidget.ts src/vs/sessions/contrib/chat/browser/sessionsChatAccessibilityHelp.ts src/vs/sessions/contrib/chat/common/constants.ts src/vs/sessions/contrib/chat/test/browser/newChatConnectorRecommendations.test.ts src/vs/sessions/contrib/chat/test/browser/newChatWidget.fixture.ts src/vs/sessions/contrib/chat/test/browser/sessionsChatAccessibilityHelp.test.ts src/vs/workbench/contrib/chat/common/aiCustomizationWorkspaceService.ts src/vs/workbench/contrib/chat/browser/aiCustomization/aiCustomizationManagement.contribution.ts src/vs/workbench/contrib/chat/browser/aiCustomization/aiCustomizationManagementEditor.ts src/vs/workbench/test/browser/componentFixtures/sessions/aiCustomizationManagementEditor.fixture.ts — Passed for all 13 requested files.
npm run stylelint -- src/vs/sessions/contrib/chat/browser/media/chatWidget.css src/vs/sessions/contrib/chat/browser/media/newChatConnectorRecommendations.css src/vs/sessions/contrib/chat/browser/media/newChatMigrationNotice.css — Passed for all 3 requested files.
Component Explorer fixture error check for ConnectorRecommendations|DiscoverCopilotConnector — Passed, 32 of 32 fixtures rendered without errors.
npm run typecheck-client — Passed.
npm run valid-layers-check — Passed.

Source PR: #341844

Navigation Menu

Repository navigation

Agents window: Recommend connectors below the new chat composer #341452

Description

Design considerations

Scope

Acceptance criteria

Implementation