Skip to content

Recommend connectors below the new chat composer - #341844

Merged
Hawk Ticehurst (hawkticehurst) merged 4 commits into
mainfrom
hawkticehurst/issue-341452-connector-recommendations
Oct 15, 2026
Merged

Hawk Ticehurst (hawkticehurst) merged 4 commits into
mainfrom
hawkticehurst/issue-341452-connector-recommendations

Conversation

@hawkticehurst

@hawkticehurst Hawk Ticehurst (hawkticehurst) commented Oct 15, 2026 •

Copy link
Copy Markdown
Member

Fixes #341452

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

Dark theme connector recommendation comparison

Light theme

Light theme connector recommendation comparison

High Contrast Dark

High Contrast Dark connector recommendation comparison

High Contrast Light

High Contrast Light connector recommendation comparison

Direct connector navigation

Connector card direct-navigation comparison

Activation steps

Step 1: Activate a connector recommendation card

Step 2: Open the connector detail directly

Independent dismissal

Connector recommendation dismissal comparison

One connector recommendation dismissed

Two connector recommendations dismissed

Phone coexistence

Phone connector and notice coexistence comparison

Phone cards, tip, migration, and pinned composer

Keyboard focus and missing product images

Connector card keyboard-focus comparison

Connector image fallback comparison

Cards with tips and migrations

Light theme support stack

High Contrast Dark support stack

High Contrast Light support stack

Constrained and custom-background layouts

Short desktop pane after review feedback

Short desktop pane keeps the composer visible while support surfaces scroll

Narrow connector recommendation layout

Connector recommendations over a custom background

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.

Copilot AI balanced review requested due to automatic review settings October 15, 2026 18:59
@hawkticehurst
Hawk Ticehurst (hawkticehurst) marked this pull request as draft October 15, 2026 19:00
@hawkticehurst
Hawk Ticehurst (hawkticehurst) marked this pull request as ready for review October 15, 2026 19:02
@hawkticehurst Hawk Ticehurst (hawkticehurst) changed the title sessions: recommend connectors below the new chat composer Recommend connectors below the new chat composer Oct 15, 2026
@github-actions

github-actions Bot commented Oct 15, 2026 •

Copy link
Copy Markdown
Contributor

Screenshot Changes

Base: d771f022 Current: 085edc74

Changed (23)

sessions/chat/newWidget/newChatWidget/Migrations/Light
Before After
before after
sessions/chat/newWidget/newChatWidget/MigrationsNarrow/Light
Before After
before after
sessions/chat/newWidget/newChatWidget/MigrationsBackground/Light
Before After
before after
sessions/chat/newWidget/newChatWidget/NewSessionExperimentalComposer/Light
Before After
before after
sessions/chat/newWidget/newChatWidget/NewSessionExperimentalComposerBackground/Light
Before After
before after
sessions/chat/newWidget/newChatWidget/NewSessionOptionsExpanded/Light
Before After
before after
sessions/chat/newWidget/newChatWidget/NewSessionOptionsCollapsed/Light
Before After
before after
sessions/chat/newWidget/newChatWidget/NewSessionOptionsIconRail/Light
Before After
before after
sessions/chat/newWidget/newChatWidget/NewSessionOptionsAnimated/Light
Before After
before after
sessions/chat/newWidget/newChatWidget/NewSessionOptionsExpandedNarrow/Light
Before After
before after
sessions/chat/newWidget/newChatWidget/NewSessionPromptPickers/Light
Before After
before after
sessions/chat/newWidget/newChatWidget/NewSessionVoicePickerSpacing/Light
Before After
before after
sessions/chat/newWidget/newChatWidget/NewSessionPromptPickersNarrow/Light
Before After
before after
sessions/chat/newWidget/newChatWidget/NewSessionPromptPickersCompact/Light
Before After
before after
sessions/chat/newWidget/newChatWidget/NewSessionPhoneAttachedContext/Light
Before After
before after
sessions/chat/newWidget/newChatWidget/NewSessionPhoneWelcomePhrase/Light
Before After
before after
sessions/chat/newWidget/newChatWidget/NewSessionPhoneSettingsDisabled/Light
Before After
before after
sessions/chat/newWidget/newChatWidget/NewSessionPhoneUnifiedWorkspacePicker/Light
Before After
before after
sessions/chat/newWidget/newChatWidget/NewSessionPhoneExperimentalComposer/Light
Before After
before after
sessions/blockedSessionsList/BlockedSessionsList_OneApproval/Light
Before After
before after
sessions/blockedSessionsList/BlockedSessionsList_TwoApprovals/Light
Before After
before after
sessions/blockedSessionsList/BlockedSessionsList_FiveApprovals/Light
Before After
before after
sessions/blockedSessionsList/BlockedSessionsList_FixCIAndApproval/Light
Before After
before after

Added (13)

sessions/chat/newWidget/newChatWidget/ConnectorRecommendationsBefore/Light

current

sessions/chat/newWidget/newChatWidget/ConnectorRecommendations/Light

current

sessions/chat/newWidget/newChatWidget/ConnectorRecommendationsNarrow/Light

current

sessions/chat/newWidget/newChatWidget/ConnectorRecommendationsOneDismissed/Light

current

sessions/chat/newWidget/newChatWidget/ConnectorRecommendationsTwoDismissed/Light

current

sessions/chat/newWidget/newChatWidget/ConnectorRecommendationsFallbackIcons/Light

current

sessions/chat/newWidget/newChatWidget/ConnectorRecommendationsBackground/Light

current

sessions/chat/newWidget/newChatWidget/ConnectorRecommendationsWithNotices/Light

current

sessions/chat/newWidget/newChatWidget/ConnectorRecommendationsShortAfterLayoutToggle/Light

current

sessions/chat/newWidget/newChatWidget/ConnectorRecommendationsFocused/Light

current

sessions/chat/newWidget/newChatWidget/ConnectorRecommendationsPhone/Light

current

sessions/chat/newWidget/newChatWidget/ConnectorRecommendationsPhoneWithNotices/Light

current

chat/aiCustomizations/aiCustomizationManagementEditor/DiscoverCopilotConnectorDetail/Light

current

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Changes recommended

Stale navigation, desktop clipping, and inconsistent focus and notice ordering remain unresolved.

4 open findings
What changed in this PR

Adds product-configured connector recommendations to the Agents window’s new-chat composer.

Changes:

  • Adds experiment-controlled cards with direct connector navigation and independent dismissal.
  • Groups recommendations, tips, and migration notices into a shared support area.
  • Adds accessibility help, behavior tests, and visual fixtures.
File Description
src/​vs/​workbench/​test/​browser/​componentFixtures/​sessions/​aiCustomizationManagementEditor.fixture.ts Adds direct connector-detail fixture.
src/​vs/​workbench/​contrib/​chat/​common/​aiCustomizationWorkspaceService.ts Extends marketplace navigation targets.
src/​vs/​workbench/​contrib/​chat/​browser/​aiCustomization/​aiCustomizationManagementEditor.ts Adds connector lookup and detail navigation.
src/​vs/​workbench/​contrib/​chat/​browser/​aiCustomization/​aiCustomizationManagement.contribution.ts Handles connector and search targets.
src/​vs/​sessions/​contrib/​chat/​test/​browser/​sessionsChatAccessibilityHelp.test.ts Tests recommendation help visibility.
src/​vs/​sessions/​contrib/​chat/​test/​browser/​newChatWidget.fixture.ts Adds recommendation and layout fixtures.
src/​vs/​sessions/​contrib/​chat/​test/​browser/​newChatConnectorRecommendations.test.ts Tests visibility, navigation, dismissal, and icons.
src/​vs/​sessions/​contrib/​chat/​common/​constants.ts Defines recommendation setting identifier.
src/​vs/​sessions/​contrib/​chat/​browser/​sessionsChatAccessibilityHelp.ts Documents recommendation interactions.
src/​vs/​sessions/​contrib/​chat/​browser/​newChatWidget.ts Integrates cards and shared support stack.
src/​vs/​sessions/​contrib/​chat/​browser/​newChatConnectorRecommendations.ts Implements recommendation cards.
src/​vs/​sessions/​contrib/​chat/​browser/​media/​newChatMigrationNotice.css Aligns migration notice styling.
src/​vs/​sessions/​contrib/​chat/​browser/​media/​newChatConnectorRecommendations.css Styles cards and focus indicators.
src/​vs/​sessions/​contrib/​chat/​browser/​media/​chatWidget.css Positions support surfaces across layouts.
src/​vs/​sessions/​contrib/​chat/​browser/​chat.contribution.ts Registers experimental setting.
src/​vs/​base/​common/​product.ts Defines recommendation metadata.

🧠 Review effort: Balanced


💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Add product-configured Linear, Notion, and WorkIQ recommendation cards behind an experiment, including direct connector-detail navigation, responsive and accessible dismissal behavior, and targeted fixture coverage.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Keep support surfaces scrollable in short panes, preserve dynamic ordering, advance dismissal focus, and cancel superseded connector detail navigation.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Verify a short desktop pane keeps the composer visible while recommendations and notices use a scrollable region after repeated layout toggles.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@hawkticehurst
Hawk Ticehurst (hawkticehurst) force-pushed the hawkticehurst/issue-341452-connector-recommendations branch from 75de1bb to 1482aa7 Compare October 15, 2026 20:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Agents window: Recommend connectors below the new chat composer

4 participants