fix(site/src/pages/AgentsPage/components/ChatElements/tools): special-case Notion block logo in ToolIcon#26233
Draft
tracyjohnsonux wants to merge 1 commit into
Draft
fix(site/src/pages/AgentsPage/components/ChatElements/tools): special-case Notion block logo in ToolIcon#26233tracyjohnsonux wants to merge 1 commit into
tracyjohnsonux wants to merge 1 commit into
Conversation
…-case Notion block logo in ToolIcon The MCP tool icon pipeline applies a `brightness-0 dark:invert` filter to every advertised icon so external brand glyphs match the monochrome lucide style of the built-in tools. Notion's MCP server advertises a "block" logo (`notion-logo-block-*.svg`) that ships a coloured backdrop with the glyph overlaid in the same SVG, so the silhouette filter collapses both layers into a featureless square. Route URLs matching `/notion-logo-block/i` through a separate branch that renders the SVG in its natural colours inside a small rounded badge frame. Everything else keeps the existing monochrome path. Add a `MCPToolNotionIcon` regression story that asserts the rendered img keeps the block-logo URL, drops the silhouette classes, and sits inside the rounded badge frame. This is a minimal targeted fix. PR #26228 takes the alternative approach of bundling Notion (plus Linear and Figma) icons in `site/static/icon/`, routing every tool icon through the single `ExternalImage` pipeline, and prefilling MCP server form fields from a known-server registry keyed on URL host. Land whichever direction the team prefers.
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
1 participant
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.
What
Minimal fix for the Notion MCP tool icon rendering as a featureless square in the agent chat timeline.
ToolIconapplies abrightness-0 dark:invertfilter to every advertised MCP icon so external brand glyphs match the monochrome lucide style of the built-in tools. Notion advertises a "block" logo (notion-logo-block-*.svg) that ships a coloured backdrop with the glyph overlaid in the same SVG, so the silhouette filter collapses both layers into a solid square.This PR routes URLs matching
/notion-logo-block/ithrough a separate branch that renders the SVG in its natural colours inside a small rounded badge frame. Everything else keeps the existing monochrome path.Why a comparison PR
This is intentionally the smallest possible change so the team can compare it against the broader architectural fix in #26228 before picking a direction.
ToolIcononlyToolIcon,ExternalImagedefaults, MCP admin form, bundled icons, known-server registryToolIconnotion.svgregistered asmonochrome+ unifiedExternalImagepipelinedefaultParametersForBuiltinIconsdisplayName,slug,iconURLfor known MCP hosts; clearing the icon restores the bundled defaultMCPToolNotionIcon)Tool.stories.tsxandMCPServerAdminPanel.stories.tsxThe regex approach is brittle (every new vendor that ships a composite block logo needs another entry), but it lands the Notion-only fix immediately without touching the form or shipping new assets. Land whichever direction the team prefers; close the other.
Test plan
pnpm exec biome checkclean on the changed files.pnpm exec tsc --noEmit -p tsconfig.jsonclean.pnpm test:storybook run src/pages/AgentsPage/components/ChatElements/tools/Tool.stories.tsx-> 114 / 114 passing, including the newMCPToolNotionIconstory that asserts the rendered<img>keeps the block-logo URL, dropsbrightness-0anddark:invert, and sits inside arounded-smframe.Decision log
notion.svg,linear.svg, and two Figma variants insite/static/icon/, registers the monochrome variants indefaultParametersForBuiltinIcons, drops the class-based filter inToolIcon, and adds a URL-hostknownMcpServersregistry that prefills the MCP admin form.findByAltText("notion__fetch icon")rather thangetByRole("img")so it survives sibling icons in the row, and asserts on the parent'srounded-smclass to lock in the badge frame.This PR was generated by Coder Agents.