Introduce compact codicons in chat components - #331771
Merged
Merged
Conversation
- Added `getCompactCodicon` function to retrieve compact variants of codicons. - Updated various components to use compact codicons, including: - Chat input notice widget - Chat input part - Chat completions - Mode picker action item - Model picker and its related styles - Permission and session target picker action items - Workspace picker action item - Various CSS updates to support compact icon sizes - Enhanced tests to verify the usage of compact icons in different scenarios. - Introduced new `chatIcons.ts` for managing chat-specific icon logic.
…act-icons # Conflicts: # src/vs/workbench/contrib/chat/browser/media/chatTurnPills.css
Contributor
There was a problem hiding this comment.
Pull request overview
Introduces compact codicon variants across dense chat UI surfaces for improved visual consistency.
Changes:
- Adds reusable compact-codicon conversion utilities.
- Migrates chat widgets, pickers, status indicators, and styles to compact glyphs and tokens.
- Updates tests and Sessions documentation.
Reviewed changes
Copilot reviewed 75 out of 75 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
src/vs/workbench/contrib/mcp/browser/mcpCommands.ts |
Compacts MCP status icons. |
src/vs/workbench/contrib/chat/test/browser/widget/input/modelPicker/modelProviderIcons.test.ts |
Tests compact model icons. |
src/vs/workbench/contrib/chat/test/browser/widget/chatForkActionViewItem.test.ts |
Updates fork icon expectations. |
src/vs/workbench/contrib/chat/test/browser/widget/chatContentParts/chatToolProgressPart.test.ts |
Recognizes compact loading icons. |
src/vs/workbench/contrib/chat/test/browser/widget/chatContentParts/chatThinkingContentPart.test.ts |
Updates thinking icon expectations. |
src/vs/workbench/contrib/chat/test/browser/widget/chatContentParts/chatSystemNotificationContentPart.test.ts |
Updates notification icon expectation. |
src/vs/workbench/contrib/chat/test/browser/widget/chatContentParts/chatSubagentContentPart.test.ts |
Updates subagent icon expectations. |
src/vs/workbench/contrib/chat/test/browser/widget/chatContentParts/chatRichLink.test.ts |
Tests compact rich-link icons. |
src/vs/workbench/contrib/chat/test/browser/widget/chatContentParts/chatQuestionCarouselPart.test.ts |
Updates answer icon expectation. |
src/vs/workbench/contrib/chat/test/browser/chatIcons.test.ts |
Tests compact-icon helpers. |
src/vs/workbench/contrib/chat/browser/widget/media/chat.css |
Applies compact chat icon styling. |
src/vs/workbench/contrib/chat/browser/widget/input/workspacePickerActionItem.ts |
Compacts workspace icon. |
src/vs/workbench/contrib/chat/browser/widget/input/sessionTargetPickerActionItem.ts |
Compacts session target icon. |
src/vs/workbench/contrib/chat/browser/widget/input/permissionPickerActionItem.ts |
Compacts permission icon. |
src/vs/workbench/contrib/chat/browser/widget/input/modePickerActionItem.ts |
Compacts mode icon. |
src/vs/workbench/contrib/chat/browser/widget/input/modelPicker/modelProviderIcons.ts |
Adds compact model icon resolution. |
src/vs/workbench/contrib/chat/browser/widget/input/modelPicker/modelPickerWidget.ts |
Uses compact picker and badge icons. |
src/vs/workbench/contrib/chat/browser/widget/input/modelPicker/modelPickerHover.ts |
Compacts warning icon. |
src/vs/workbench/contrib/chat/browser/widget/input/modelPicker/media/modelPicker.css |
Sizes compact model icons. |
src/vs/workbench/contrib/chat/browser/widget/input/editor/chatInputCompletions.ts |
Compacts prompt spinner. |
src/vs/workbench/contrib/chat/browser/widget/input/chatInputPart.ts |
Recognizes compact microphone icon. |
src/vs/workbench/contrib/chat/browser/widget/input/chatInputNoticeWidget.ts |
Compacts notice actions. |
src/vs/workbench/contrib/chat/browser/widget/input/chatFollowups.ts |
Compacts rendered follow-up icons. |
src/vs/workbench/contrib/chat/browser/widget/chatListRenderer.ts |
Compacts avatars in dense rows. |
src/vs/workbench/contrib/chat/browser/widget/chatForkActionViewItem.ts |
Compacts fork and loading glyphs. |
src/vs/workbench/contrib/chat/browser/widget/chatDragAndDrop.ts |
Compacts attachment overlay icon. |
src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatThinkingContent.css |
Updates thinking icon selectors and sizes. |
src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatMcpServersInteractionContent.css |
Sizes MCP interaction icon. |
src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatExtensionsContent.css |
Sizes extension loading icon. |
src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatDisabledClaudeHooksContent.css |
Sizes disabled-hooks icon. |
src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatConfirmationWidget.css |
Targets compact error glyph. |
src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatCodeBlockPill.css |
Updates compact pill glyph styling. |
src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatTurnPillsPart.ts |
Compacts disclosure chevron. |
src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatToolInputOutputContentPart.ts |
Compacts tool status icons. |
src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatThinkingContentPart.ts |
Compacts thinking-state icons. |
src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatSuggestNextWidget.ts |
Compacts dropdown chevron. |
src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatSubagentOpenChat.ts |
Compacts active-tool icon. |
src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatSubagentContentPart.ts |
Compacts subagent state icons. |
src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatRichLink.ts |
Uses compact rich-link glyphs. |
src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatQuestionCarouselPart.ts |
Compacts answer icons. |
src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatProgressContentPart.ts |
Compacts progress icons. |
src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatMcpAuthenticationContentPart.ts |
Compacts authentication icon. |
src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatExtensionsContentPart.ts |
Compacts extension spinner. |
src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatEditPillElement.ts |
Compacts edit status icons. |
src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatCollapsibleContentPart.ts |
Compacts collapsible icons. |
src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatChangesSummaryPart.ts |
Compacts summary chevron. |
src/vs/workbench/contrib/chat/browser/voiceInputMode/voiceInputModeActionViewItem.ts |
Compacts voice-mode icons. |
src/vs/workbench/contrib/chat/browser/speechToText/dictationOnboarding.ts |
Compacts onboarding microphone. |
src/vs/workbench/contrib/chat/browser/media/chatTurnPills.css |
Uses compact icon-size token. |
src/vs/workbench/contrib/chat/browser/chatStatus/media/chatStatus.css |
Sizes compact status icons. |
src/vs/workbench/contrib/chat/browser/chatStatus/chatStatusDashboard.ts |
Compacts disclosure chevrons. |
src/vs/workbench/contrib/chat/browser/chatSessions/media/chatSessionPickerActionItem.css |
Uses compact icon-size token. |
src/vs/workbench/contrib/chat/browser/chatSessions/chatSessionPickerActionItem.ts |
Compacts session picker icon. |
src/vs/workbench/contrib/chat/browser/chatManagement/media/chatModelsWidget.css |
Uses compact model icon sizing. |
src/vs/workbench/contrib/chat/browser/chatIcons.ts |
Adds compact-icon utilities. |
src/vs/workbench/contrib/chat/browser/chatEditing/media/chatEditingExplanationWidget.css |
Sizes explanation status icons. |
src/vs/workbench/contrib/chat/browser/chatEditing/media/chatEditingEditorOverlay.css |
Sizes overlay progress icon. |
src/vs/workbench/contrib/chat/browser/chatEditing/chatEditingExplanationWidget.ts |
Compacts read indicators. |
src/vs/workbench/contrib/chat/browser/chatEditing/chatEditingEditorOverlay.ts |
Compacts overlay spinner. |
src/vs/workbench/contrib/chat/browser/chatDebug/media/chatDebug.css |
Sizes compact debug icons. |
src/vs/workbench/contrib/chat/browser/chatDebug/chatDebugCacheExplorerView.ts |
Compacts supported category icons. |
src/vs/workbench/contrib/chat/browser/chatDebug/chatCustomizationDiscoveryRenderer.ts |
Compacts discovery result icons. |
src/vs/workbench/contrib/chat/browser/attachments/chatAttachmentWidgets.ts |
Compacts attachment glyphs contextually. |
src/vs/workbench/contrib/chat/browser/aiCustomization/toolsListWidget.ts |
Compacts tool-list chevrons. |
src/vs/workbench/contrib/chat/browser/aiCustomization/media/aiCustomizationManagement.css |
Uses compact icon-size tokens. |
src/vs/workbench/contrib/chat/browser/aiCustomization/customizationGroupHeaderRenderer.ts |
Compacts group chevrons. |
src/vs/workbench/contrib/chat/browser/aiCustomization/aiCustomizationManagementEditor.ts |
Compacts management chevrons. |
src/vs/workbench/contrib/chat/browser/aiCustomization/aiCustomizationListWidget.ts |
Compacts list chevrons. |
src/vs/workbench/contrib/chat/browser/agentSessions/media/agentsessionsviewer.css |
Uses compact icon-size token. |
src/vs/workbench/contrib/chat/browser/agentSessions/experiments/media/unifiedQuickAccess.css |
Normalizes send and badge icons. |
src/vs/workbench/contrib/chat/browser/agentSessions/agentHost/media/agentHostChatInputPicker.css |
Sizes compact picker icons. |
src/vs/workbench/contrib/chat/browser/agentSessions/agentHost/agentHostFolderPickerActionItem.ts |
Compacts folder icon. |
src/vs/workbench/contrib/chat/browser/agentSessions/agentHost/agentHostChatInputPicker.ts |
Compacts configuration icon. |
src/vs/workbench/contrib/chat/browser/actions/chatSpeechToTextActions.ts |
Compacts dictation action icon. |
src/vs/sessions/AI_CUSTOMIZATIONS.md |
Documents compact customization affordances. |
💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Lee Murray (mrleemurray)
marked this pull request as draft
August 20, 2026 10:18
auto-merge was automatically disabled
August 20, 2026 10:18
Pull request was converted to draft
Replace the :has(.chat-fork-action-icon) selectors with stable chat-fork-action-item/chat-fork-action-label classes applied during render, avoiding descendant-dependent style invalidation in a workbench-wide stylesheet (#324985). Render the restore-confirmation cancel affordance with the close-compact glyph so it is optically correct at the compact tier instead of being a regular glyph scaled down by the toolbar sizing rule. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Contributor
Screenshot ChangesBase: Changed (136)
|
| Before | After |
|---|---|
 |
 |
sessions/chat/input/chatInput/SessionsWindow/Light
| Before | After |
|---|---|
 |
 |
sessions/chat/input/chatInput/SessionsWindowSelection/Dark
| Before | After |
|---|---|
 |
 |
sessions/chat/input/chatInput/SessionsWindowSelection/Light
| Before | After |
|---|---|
 |
 |
sessions/sessionChatInputToolbar/SessionChatView_ChangesPill/Dark
| Before | After |
|---|---|
 |
 |
sessions/sessionChatInputToolbar/SessionChatView_ChangesPill/Light
| Before | After |
|---|---|
 |
 |
sessions/sessionChatInputToolbar/SessionChatView_ChangesAndExternalPreview/Dark
| Before | After |
|---|---|
|
|
sessions/sessionChatInputToolbar/SessionChatView_ChangesAndExternalPreview/Light
| Before | After |
|---|---|
|
|
chat/input/chatInput/Default/Dark
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/Default/Light
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithSandboxing/Dark
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithSandboxing/Light
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithProviderIcon/Dark
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithProviderIcon/Light
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/CompactWithProviderIcon/Dark
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/CompactWithProviderIcon/Light
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithArtifacts/Dark
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithArtifacts/Light
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithNotification/Dark
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithNotification/Light
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithNotificationAndTodos/Dark
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithNotificationAndTodos/Light
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithFileChanges/Dark
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithFileChanges/Light
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithTodos/Dark
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithTodos/Light
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithTodosAndFileChanges/Dark
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithTodosAndFileChanges/Light
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithArtifactsAndFileChanges/Dark
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithArtifactsAndFileChanges/Light
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/Full/Dark
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/Full/Light
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/VoiceDictationIdle/Dark
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/VoiceDictationIdle/Light
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/VoiceDictationRecording/Dark
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/VoiceDictationRecording/Light
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/VoiceDictationPreparing/Dark
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/VoiceDictationPreparing/Light
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/VoiceModeIdle/Dark
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/VoiceModeIdle/Light
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/VoiceModeConnecting/Dark
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/VoiceModeConnecting/Light
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/VoiceModeListening/Dark
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/VoiceModeListening/Light
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/VoiceModeSpeaking/Dark
| Before | After |
|---|---|
|
|
chat/input/chatInput/VoiceModeSpeaking/Light
| Before | After |
|---|---|
|
|
chat/input/chatInput/VoiceModeDisconnect/Dark
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/VoiceModeDisconnect/Light
| Before | After |
|---|---|
 |
 |
chat/chatProgressContentPart/WithCustomIcon/Dark
| Before | After |
|---|---|
 |
 |
chat/chatProgressContentPart/WithCustomIcon/Light
| Before | After |
|---|---|
 |
 |
chat/chatRichLink/sessionStates/Dark
| Before | After |
|---|---|
 |
 |
chat/chatRichLink/sessionStates/Light
| Before | After |
|---|---|
 |
 |
chat/chatRichLink/presentationKinds/Dark
| Before | After |
|---|---|
 |
 |
chat/chatRichLink/presentationKinds/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/GreenInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/GreenInContext/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/OrangeInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/OrangeInContext/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/RedInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/RedInContext/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/GreenElicitationInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/GreenElicitationInContext/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/OrangeElicitationInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/OrangeElicitationInContext/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/RedElicitationInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/RedElicitationInContext/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/BadgeOffInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/BadgeOffInContext/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/BadgeOffWithDisclaimerInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/BadgeOffWithDisclaimerInContext/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/BadgeOffUnsandboxedInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/BadgeOffUnsandboxedInContext/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/BadgeOffUnsandboxedWithDisclaimerInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/BadgeOffUnsandboxedWithDisclaimerInContext/Light
| Before | After |
|---|---|
 |
 |
chat/chatTurnPills/inChat/Changes/Dark
| Before | After |
|---|---|
 |
 |
chat/chatTurnPills/inChat/Changes/Light
| Before | After |
|---|---|
 |
 |
chat/chatTurnPills/inChat/ChangesAndExternalPreview/Dark
| Before | After |
|---|---|
 |
 |
chat/chatTurnPills/inChat/ChangesAndExternalPreview/Light
| Before | After |
|---|---|
 |
 |
chat/widget/chatWidget/SimpleQA/Dark
| Before | After |
|---|---|
 |
 |
chat/widget/chatWidget/SimpleQA/Light
| Before | After |
|---|---|
 |
 |
chat/widget/chatWidget/PendingToolApproval/Dark
| Before | After |
|---|---|
 |
 |
chat/widget/chatWidget/PendingToolApproval/Light
| Before | After |
|---|---|
 |
 |
chat/widget/chatWidget/CodeBlockInList/Dark
| Before | After |
|---|---|
 |
 |
chat/widget/chatWidget/CodeBlockInList/Light
| Before | After |
|---|---|
 |
 |
chat/widget/chatWidget/bugs/issue-309796-missing-backslash/Dark
| Before | After |
|---|---|
 |
 |
chat/widget/chatWidget/bugs/issue-309796-missing-backslash/Light
| Before | After |
|---|---|
 |
 |
chat/widget/chatWidget/MultiTurn/Dark
| Before | After |
|---|---|
 |
 |
chat/widget/chatWidget/MultiTurn/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationListWidget/InstructionsTabWithItems/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationListWidget/InstructionsTabWithItems/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/LocalHarness/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/LocalHarness/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/Sessions/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/Sessions/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/SessionsSkillsTab/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/SessionsSkillsTab/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTab/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTab/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTabActiveSession/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTabActiveSession/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsTab/Dark
| Before | After |
|---|---|
|
|
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsTab/Light
| Before | After |
|---|---|
|
|
chat/aiCustomizations/aiCustomizationManagementEditor/SkillsTab/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/SkillsTab/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/InstructionsTab/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/InstructionsTab/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/HooksTab/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/HooksTab/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PromptsTab/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PromptsTab/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PromptMigration/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PromptMigration/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/UserDataMigration/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/UserDataMigration/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PluginsTab/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PluginsTab/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PluginBrowseMode/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PluginBrowseMode/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PromptsTabScrolled/Dark
| Before | After |
|---|---|
|
|
chat/aiCustomizations/aiCustomizationManagementEditor/PromptsTabScrolled/Light
| Before | After |
|---|---|
|
|
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTabScrolled/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTabScrolled/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PluginsTabScrolled/Dark
| Before | After |
|---|---|
|
|
chat/aiCustomizations/aiCustomizationManagementEditor/PluginsTabScrolled/Light
| Before | After |
|---|---|
|
|
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTabNarrow/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTabNarrow/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsTabNarrow/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsTabNarrow/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsItemPreview/Dark
| Before | After |
|---|---|
|
|
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsItemPreview/Light
| Before | After |
|---|---|
|
|
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsItemRaw/Dark
| Before | After |
|---|---|
|
|
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsItemRaw/Light
| Before | After |
|---|---|
|
|
chat/aiCustomizations/aiCustomizationManagementEditor/BuiltinSkillItemPreview/Dark
| Before | After |
|---|---|
|
|
chat/aiCustomizations/aiCustomizationManagementEditor/BuiltinSkillItemPreview/Light
| Before | After |
|---|---|
|
|
chat/aiCustomizations/aiCustomizationManagementEditor/BuiltinSkillItemRaw/Dark
| Before | After |
|---|---|
|
|
chat/aiCustomizations/aiCustomizationManagementEditor/BuiltinSkillItemRaw/Light
| Before | After |
|---|---|
|
|
Lee Murray (mrleemurray)
marked this pull request as ready for review
August 20, 2026 14:09
Lee Murray (mrleemurray)
requested a review
from Sandeep Somavarapu (sandy081)
as a code owner
August 20, 2026 14:09
Justin Chen (justschen)
previously approved these changes
Aug 20, 2026
Collaborator
|
Lee Murray (@mrleemurray) the other PR gave this one merge conflcits |
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Contributor
Author
|
Justin Chen (@justschen) resolved :) |
Mohammad javad Dianat (dianatofficial)
left a comment
Mohammad javad Dianat (dianatofficial)
left a comment
There was a problem hiding this comment.
Looks good. Error handling is solid.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Justin Chen (justschen)
approved these changes
Aug 24, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request standardizes and updates the usage of compact codicon icons and their associated font sizes throughout the chat and AI customization features. The changes ensure a more consistent and visually compact UI by switching to compact icon variants and using a CSS variable for icon sizing. Additionally, some logic is updated to support these changes in both CSS and TypeScript/JavaScript code.
Icon and UI Standardization
Replaced standard codicon icons (e.g.,
Codicon.mic,Codicon.chevronRight,Codicon.folder,Codicon.warning) with their compact variants (e.g.,Codicon.micCompact,Codicon.chevronRightCompact,Codicon.folder-compact,Codicon.warningCompact) in various chat and AI customization components for a denser, more consistent UI. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16]Updated CSS to use the
--vscode-codiconFontSize-compactvariable for icon font sizes instead of hardcoded pixel values, ensuring consistent scaling and easier theming across the UI. [1] [2] [3] [4] [5] [6] [7] [8]Code and Logic Updates
Added the
getCompactCodiconutility where necessary to dynamically select compact codicon variants in TypeScript code, improving maintainability and consistency. [1] [2]Updated image attachment and notebook output widgets to support and render compact warning and file media icons, including passing a new
isCurrentInputoption to ensure the correct icon variant is used depending on context. [1] [2] [3] [4] [5] [6] [7] [8]Documentation