Skip to content

Add inline badge to customization list items for context instructions#303598

Merged
joshspicer merged 6 commits intomainfrom
copilot/positive-bird
Mar 20, 2026
Merged

Add inline badge to customization list items for context instructions#303598
joshspicer merged 6 commits intomainfrom
copilot/positive-bird

Conversation

@joshspicer
Copy link
Member

Summary

Instructions with applyTo patterns previously baked context info into the display name string (e.g. "Name - context matching '*.ts'"). This PR replaces that with a visual inline badge — the same style used for the MCP "Bridged" badge — making it cleaner and more scannable.

Changes

Generic badge support on IAICustomizationListItem:

  • badge?: string — small inline tag rendered next to the item name
  • badgeTooltip?: string — hover tooltip explaining the badge
  • Badge text is included in search filtering
  • DOM: .item-name is now wrapped in a .item-name-row flex container with a .item-badge sibling

Instructions usage:

  • applyTo: '**' → badge shows "always added", tooltip: "This instruction is automatically included in every interaction."
  • applyTo: 'src/auth/**' → badge shows src/auth/**, tooltip: "This instruction is automatically included when files matching 'src/auth/**' are in context."

CSS: .item-badge matches the existing .mcp-bridged-badge visual style (small rounded tag, descriptionForeground color, toolbar-hoverBackground background).

Spec: Updated AI_CUSTOMIZATIONS.md with "Item Badges" section.

Testing

  • TypeScript compilation ✅
  • Layering check ✅
  • Hygiene pre-commit hook ✅
  • Component explorer screenshots verified in both dark and light themes

joshspicer and others added 2 commits March 20, 2026 12:27
Instructions with applyTo patterns now show context info (e.g.
'always added', 'context matching *.ts') as an inline badge next to
the item name instead of baking it into the display name string. The
badge uses the same visual style as the MCP 'Bridged' badge.

The badge field is generic on IAICustomizationListItem so other
customization types can use it in the future. Badge text is also
included in search filtering.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Badge now shows just the applyTo pattern (e.g. '**/*.ts') or 'always
added', instead of 'context matching ...'. Hovering the badge shows a
tooltip explaining the behavior. Added badgeTooltip field to
IAICustomizationListItem for generic reuse.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot AI review requested due to automatic review settings March 20, 2026 19:43
@vs-code-engineering vs-code-engineering bot added this to the 1.113.0 milestone Mar 20, 2026
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

This PR improves the AI Customization management list UI by replacing context-instruction metadata appended to display names with a dedicated inline badge (visually aligned with the existing MCP “Bridged” badge), and updates filtering/docs accordingly.

Changes:

  • Add optional badge / badgeTooltip support to IAICustomizationListItem and render the badge inline next to the item name (with managed hover tooltip).
  • Update context-instruction items to use the badge for applyTo information instead of baking it into displayName.
  • Extend search filtering to match against badge text and document the badge behavior.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

File Description
src/vs/workbench/contrib/chat/browser/aiCustomization/media/aiCustomizationManagement.css Adds layout container for name+badge and introduces .item-badge styling aligned with MCP badge visuals.
src/vs/workbench/contrib/chat/browser/aiCustomization/aiCustomizationListWidget.ts Adds badge fields to list items, renders badge+tooltip, updates context-instruction item construction, and includes badge text in filtering.
src/vs/sessions/AI_CUSTOMIZATIONS.md Documents the new list item badge concept and intended usage.

joshspicer and others added 2 commits March 20, 2026 12:48
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Extract shared .inline-badge class used by both MCP bridged badge
  and item badges to avoid style drift.
- Add min-width: 0 and flex: 1 1 auto to .item-name so long names
  truncate correctly inside the flex row.
- Update AI_CUSTOMIZATIONS.md to reflect that badges show the raw
  applyTo pattern with tooltip explanation.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@joshspicer joshspicer enabled auto-merge (squash) March 20, 2026 20:19
@joshspicer joshspicer disabled auto-merge March 20, 2026 20:19
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@joshspicer joshspicer enabled auto-merge (squash) March 20, 2026 20:21
@joshspicer joshspicer merged commit ef1e52a into main Mar 20, 2026
29 of 30 checks passed
@joshspicer joshspicer deleted the copilot/positive-bird branch March 20, 2026 20:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants