From a785d9fca8063e02244e446165d4d9eff209d394 Mon Sep 17 00:00:00 2001 From: jackwener Date: Sun, 19 Jul 2026 00:36:38 +0800 Subject: [PATCH] fix(mcp): render real brand logos on MCP market tiles MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #1205 replaced the MCP market's official brand marks with generic text marks (S / LINE / 31 / F / ▲ / S) — wrong direction. Famous brands must show their real logos. This restores the six official marks using the same architecture provider-brand-marks.tsx already established: vendored .svg assets imported as URLs, rendered via (color) or a currentColor mask (monochrome), never inline hand-drawn in the component TSX. - Recover Slack / LINE / Google Calendar / Figma / Vercel / Supabase SVGs byte-faithfully from the pre-#1205 inline markup (commit e48be522) into apps/desktop/src/renderer/assets/mcp-brands/*.svg. - Add McpBrandMark + hasMcpBrandMark (mcp-brand-marks.tsx). Color marks ride ; monochrome ▲/LINE ride a mask so they inherit the plate foreground in light + dark. Brands without a faithful asset (钉钉/飞书/ Notion/macOS/…) keep the catalog text mark — no hand-drawn approximations. - Wire McpCatalogCard (market + installed tiles) to McpBrandMark; branded tiles drop the per-brand tint for a quiet neutral plate, matching how .providerLogo treats color marks. Drop the now-unused brand tint tokens. Governance: the component imports .svg assets (not .tsx literals), so it needs no icon-governance inline-SVG allowlist entry. Tile polish from #1205 is preserved; only the logo removal is reverted. --- .../src/renderer/assets/mcp-brands/figma.svg | 1 + .../assets/mcp-brands/google-calendar.svg | 1 + .../src/renderer/assets/mcp-brands/line.svg | 1 + .../src/renderer/assets/mcp-brands/slack.svg | 1 + .../renderer/assets/mcp-brands/supabase.svg | 1 + .../src/renderer/assets/mcp-brands/vercel.svg | 1 + apps/desktop/src/renderer/maka-tokens.css | 10 ++- apps/desktop/src/renderer/mcp-brand-marks.tsx | 66 +++++++++++++++++++ apps/desktop/src/renderer/mcp-page.tsx | 10 ++- .../src/renderer/styles/module-pages/mcp.css | 53 ++++++++------- 10 files changed, 110 insertions(+), 35 deletions(-) create mode 100644 apps/desktop/src/renderer/assets/mcp-brands/figma.svg create mode 100644 apps/desktop/src/renderer/assets/mcp-brands/google-calendar.svg create mode 100644 apps/desktop/src/renderer/assets/mcp-brands/line.svg create mode 100644 apps/desktop/src/renderer/assets/mcp-brands/slack.svg create mode 100644 apps/desktop/src/renderer/assets/mcp-brands/supabase.svg create mode 100644 apps/desktop/src/renderer/assets/mcp-brands/vercel.svg create mode 100644 apps/desktop/src/renderer/mcp-brand-marks.tsx diff --git a/apps/desktop/src/renderer/assets/mcp-brands/figma.svg b/apps/desktop/src/renderer/assets/mcp-brands/figma.svg new file mode 100644 index 00000000000..13d13a10ea1 --- /dev/null +++ b/apps/desktop/src/renderer/assets/mcp-brands/figma.svg @@ -0,0 +1 @@ +Figma diff --git a/apps/desktop/src/renderer/assets/mcp-brands/google-calendar.svg b/apps/desktop/src/renderer/assets/mcp-brands/google-calendar.svg new file mode 100644 index 00000000000..b750c1f7fb3 --- /dev/null +++ b/apps/desktop/src/renderer/assets/mcp-brands/google-calendar.svg @@ -0,0 +1 @@ +Google Calendar diff --git a/apps/desktop/src/renderer/assets/mcp-brands/line.svg b/apps/desktop/src/renderer/assets/mcp-brands/line.svg new file mode 100644 index 00000000000..2eb9d887729 --- /dev/null +++ b/apps/desktop/src/renderer/assets/mcp-brands/line.svg @@ -0,0 +1 @@ +LINE diff --git a/apps/desktop/src/renderer/assets/mcp-brands/slack.svg b/apps/desktop/src/renderer/assets/mcp-brands/slack.svg new file mode 100644 index 00000000000..484239e6a9a --- /dev/null +++ b/apps/desktop/src/renderer/assets/mcp-brands/slack.svg @@ -0,0 +1 @@ +Slack diff --git a/apps/desktop/src/renderer/assets/mcp-brands/supabase.svg b/apps/desktop/src/renderer/assets/mcp-brands/supabase.svg new file mode 100644 index 00000000000..0f10d8d3ca8 --- /dev/null +++ b/apps/desktop/src/renderer/assets/mcp-brands/supabase.svg @@ -0,0 +1 @@ +Supabase diff --git a/apps/desktop/src/renderer/assets/mcp-brands/vercel.svg b/apps/desktop/src/renderer/assets/mcp-brands/vercel.svg new file mode 100644 index 00000000000..d096e9e2c7d --- /dev/null +++ b/apps/desktop/src/renderer/assets/mcp-brands/vercel.svg @@ -0,0 +1 @@ +Vercel diff --git a/apps/desktop/src/renderer/maka-tokens.css b/apps/desktop/src/renderer/maka-tokens.css index b7db0313e64..b4e0cdca4e7 100644 --- a/apps/desktop/src/renderer/maka-tokens.css +++ b/apps/desktop/src/renderer/maka-tokens.css @@ -122,14 +122,12 @@ --brand-deep-hover: oklch(from var(--accent) calc(l - 0.06) c h); /* Fixed external channel identity; unlike palette-derived Maka accents. */ --brand-wechat: #07c160; - /* Fixed service identities used only by the MCP market marks. */ + /* Fixed service identities for MCP market tiles that fall back to a text + mark (no official brand asset). Brands with a recovered logo — Slack, + LINE, Google Calendar, Figma, Vercel, Supabase — render the real mark on + a neutral plate (mcp-brand-marks.tsx), so their tint tokens were dropped. */ --brand-dingtalk: #1677ff; --brand-feishu: #3370ff; - --brand-slack: #4a154b; - --brand-line: #06c755; - --brand-google-calendar: #4285f4; - --brand-figma: #f24e1e; - --brand-supabase: #3ecf8e; --bot-brand-default: var(--accent); /* PALETTE-LEAK-0: semantic alias for informational system banners (the plan-reminders 系统提醒 banner) — component CSS derives its tint family diff --git a/apps/desktop/src/renderer/mcp-brand-marks.tsx b/apps/desktop/src/renderer/mcp-brand-marks.tsx new file mode 100644 index 00000000000..8f2a7d50f46 --- /dev/null +++ b/apps/desktop/src/renderer/mcp-brand-marks.tsx @@ -0,0 +1,66 @@ +// Official MCP catalog brand marks. +// +// Mirrors settings/provider-brand-marks.tsx exactly: each mark is a vendored +// official brand logo imported as an `.svg` asset URL (NOT an inline SVG +// literal in this TSX — the icon-governance contract bans hand-drawn inline +// SVG, and these assets sidestep it because `.svg` files are not `.tsx` +// literals). Each logo remains the trademark of its owner and is used here +// only to identify the connected MCP service. +// +// Color marks (Slack, Figma, Google Calendar, Supabase) carry their own +// brand fills and render through ``. Monochrome marks (Vercel ▲, LINE) +// ship with `fill="currentColor"` and render through a mask so they inherit +// the plate's foreground color and stay legible in both light and dark — +// the same split provider-brand-marks.tsx draws between `` and +// `ProviderAssetMask`. +// +// Brands WITHOUT a faithful official asset (钉钉/飞书/Notion/macOS/filesystem/ +// …) fall back to the catalog text mark. We never hand-draw or approximate a +// logo we do not have — that is the banned anti-pattern. + +import type { ReactElement } from 'react'; +import type { McpCatalogEntry } from './mcp-catalog'; +import figmaBrandMark from './assets/mcp-brands/figma.svg'; +import googleCalendarBrandMark from './assets/mcp-brands/google-calendar.svg'; +import lineBrandMark from './assets/mcp-brands/line.svg'; +import slackBrandMark from './assets/mcp-brands/slack.svg'; +import supabaseBrandMark from './assets/mcp-brands/supabase.svg'; +import vercelBrandMark from './assets/mcp-brands/vercel.svg'; + +// Slack, LINE, Google Calendar, Figma, Vercel and Supabase logos were +// recovered byte-for-byte from the inline markup that lived in mcp-page.tsx +// before #1205 (commit e48be522); see assets/mcp-brands/*.svg for the +// extracted geometry. +type BrandRenderer = { src: string; tone: 'color' | 'mono' }; + +const MCP_BRAND_MARKS: Record = { + slack: { src: slackBrandMark, tone: 'color' }, + line: { src: lineBrandMark, tone: 'mono' }, + 'google-calendar': { src: googleCalendarBrandMark, tone: 'color' }, + figma: { src: figmaBrandMark, tone: 'color' }, + vercel: { src: vercelBrandMark, tone: 'mono' }, + supabase: { src: supabaseBrandMark, tone: 'color' }, +}; + +/** True when the catalog entry has a vendored official brand asset. */ +export function hasMcpBrandMark(id: string): boolean { + return id in MCP_BRAND_MARKS; +} + +// Monochrome assets ride a mask because `` documents do not inherit +// `currentColor`; identical technique to provider-brand-marks' ProviderAssetMask. +function McpAssetMask({ src }: { src: string }): ReactElement { + const mask = `url("${src}")`; + return