@mcp-b/react-components 0.45.0 → 0.46.0

package/dist/styles/composer-link.css

@@ -0,0 +1,99 @@
+.composer-link {
+  --composer-link-fill: var(
+    --composer-link-color,
+    light-dark(var(--sigvelo-color-primary-600), var(--sigvelo-color-primary-400))
+  );
+
+  display: inline;
+  max-inline-size: 100%;
+  /* Official mark hexes (Linear 5E6AD2, Gmail EA4335) miss 4.5:1 on the user
+     bubble. Mix toward --sigvelo-color-text so light darkens and dark lightens
+     while the hue stays the brand. */
+  color: color-mix(in oklab, var(--composer-link-fill) 80%, var(--sigvelo-color-text));
+  text-decoration: none;
+  font: inherit;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: inherit;
+  white-space: nowrap;
+  cursor: default;
+}
+
+.composer-link:hover {
+  color: color-mix(in oklab, var(--composer-link-fill) 70%, var(--sigvelo-color-text));
+  text-decoration: none;
+}
+
+.composer-link:focus-visible {
+  outline: var(--sigvelo-focus-ring);
+  outline-offset: 2px;
+  border-radius: var(--sigvelo-radius-sm);
+}
+
+.composer-link__icon {
+  display: inline-block;
+  /* Larger than cap-height, under the 1.5 line-height so Linear tiles and
+     Lucide glyphs share one box. */
+  inline-size: 1.2em;
+  block-size: 1.2em;
+  margin-inline-end: var(--sigvelo-spacing-1);
+  vertical-align: -0.25em;
+  overflow: visible;
+  color: inherit;
+}
+
+.composer-link__icon :is(svg, img, .app-icon),
+.composer-link__icon.app-icon {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.composer-link__icon :is(img, .app-icon__image) {
+  object-fit: cover;
+}
+
+/* Nested AppIcon tiles add radius, shadow, and inset — flatten so the mark
+   fills the icon box. */
+.composer-link:not(.prompt-input__tab-item) .app-icon {
+  --sigvelo-recipe-app-icon-size: 100%;
+  padding: 0;
+  border-radius: 0;
+  overflow: visible;
+  filter: none;
+}
+
+.composer-link__label {
+  min-inline-size: 0;
+  font-weight: inherit;
+}
+
+.prompt-input__textarea .composer-link {
+  pointer-events: none;
+}
+
+.prompt-input__tab-item.composer-link,
+.prompt-input__tab-item.composer-link:hover {
+  display: flex;
+  color: inherit;
+  text-decoration: none;
+  font-weight: inherit;
+  margin-inline: 0;
+}
+
+.prompt-input__tab-item .composer-link__icon {
+  display: inline-flex;
+  margin-inline-end: 0;
+  vertical-align: unset;
+}
+
+@media (forced-colors: active) {
+  .composer-link {
+    color: LinkText;
+    forced-color-adjust: none;
+  }
+
+  .composer-link:hover,
+  .composer-link:focus-visible {
+    color: LinkText;
+  }
+}

package/dist/styles/connected-app-card.css

@@ -15,6 +15,15 @@
   align-items: center;
 }
 
+.connected-app-card__icon > :is(svg, img) {
+  inline-size: var(--sigvelo-control-icon-size-md);
+  block-size: var(--sigvelo-control-icon-size-md);
+}
+
+.connected-app-card__icon :is(img, .app-icon__image) {
+  color: unset;
+}
+
 .connected-app-card__status {
   display: inline-flex;
   align-items: center;

package/dist/styles/github-motion-mark.css

@@ -5,12 +5,13 @@
   place-items: center;
   inline-size: 1.625em;
   block-size: 1.625em;
-  color: currentColor;
+  color: inherit;
   line-height: 0;
 }
 
 .github-motion-mark svg {
   grid-area: 1 / 1;
+  fill: currentColor;
   transform-origin: 50% 50%;
   animation: github-motion-mark-breathe 2.6s ease-in-out infinite;
 }
@@ -89,3 +90,9 @@
     animation: none;
   }
 }
+
+@media (forced-colors: active) {
+  .github-motion-mark {
+    color: CanvasText;
+  }
+}

package/dist/styles/index.css

@@ -40,6 +40,7 @@
 @import "./fieldset.css" layer(components);
 @import "./form.css" layer(components);
 @import "./github-motion-mark.css" layer(components);
+@import "./brand-marks.css" layer(components);
 @import "./input.css" layer(components);
 @import "./kbd.css" layer(components);
 @import "./label.css" layer(components);
@@ -107,6 +108,7 @@
 @import "./chatgpt-sign-in-screen.css" layer(components);
 @import "./plan.css" layer(components);
 @import "./prompt-input.css" layer(components);
+@import "./composer-link.css" layer(components);
 @import "./queue.css" layer(components);
 @import "./reasoning.css" layer(components);
 @import "./resizable-side-panel.css" layer(components);

package/dist/styles/manager-office.css

@@ -910,6 +910,9 @@
 .manager-office__connection-icons .app-icon {
   filter: none;
 }
+.manager-office__connection-icons .app-icon :is(img, .app-icon__image) {
+  color: unset;
+}
 .manager-office__dashboard-card-actions {
   display: flex;
   align-items: center;
@@ -1548,9 +1551,13 @@
   block-size: 100%;
 }
 
-.manager-office__channel-mark > svg {
-  inline-size: 65%;
-  block-size: 65%;
+.manager-office__channel-mark > :is(svg, img, .app-icon__image) {
+  inline-size: var(--sigvelo-control-icon-size-md);
+  block-size: var(--sigvelo-control-icon-size-md);
+}
+
+.manager-office__channel-mark :is(img, .app-icon__image) {
+  color: unset;
 }
 
 .manager-office__channel-direction {

package/dist/styles/mcp-plugin-catalog.css

@@ -225,6 +225,10 @@
   gap: var(--sigvelo-spacing-3-5);
 }
 
+.mcp-plugin-details__identity :is(img, .app-icon__image) {
+  color: unset;
+}
+
 .mcp-plugin-details__identity > .separator {
   block-size: var(--sigvelo-spacing-8);
   background-color: color-mix(in oklab, currentcolor, transparent 30%);

package/dist/styles/mcp-server-picker.css

@@ -55,6 +55,8 @@
   justify-content: center;
   inline-size: var(--sigvelo-control-icon-size-lg);
   block-size: var(--sigvelo-control-icon-size-lg);
+  /* Lucide and monochrome protocol marks tint from this. Hardcoded brand
+     fills ignore it; Discord sets its own color on the mark. */
   color: var(--sigvelo-color-text-muted);
 }
 

package/dist/styles/prompt-input.css

@@ -212,14 +212,22 @@
   font-family: inherit;
   font-size: var(--sigvelo-density-compact-control-font-size);
   line-height: var(--sigvelo-leading-normal);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
   resize: none;
   overflow-block: hidden;
 }
 
-.prompt-input__textarea::placeholder {
+.prompt-input__textarea::placeholder,
+.prompt-input__textarea[data-empty]::before {
   color: var(--sigvelo-control-placeholder-color);
 }
 
+.prompt-input__textarea[data-empty]::before {
+  content: attr(data-placeholder);
+  pointer-events: none;
+}
+
 .prompt-input__textarea:focus,
 .prompt-input__textarea:focus-visible {
   border: none;
@@ -553,11 +561,15 @@
   flex: 0 0 auto;
 }
 
-.prompt-input__command-icon > svg {
+.prompt-input__command-icon > :is(svg, img, .app-icon) {
   inline-size: var(--sigvelo-density-compact-control-icon-size);
   block-size: var(--sigvelo-density-compact-control-icon-size);
 }
 
+.prompt-input__command-icon :is(img, .app-icon__image) {
+  color: unset;
+}
+
 .prompt-input__command-copy {
   display: grid;
   grid-template-columns: auto var(--sigvelo-layout-track-fill) auto;
@@ -584,51 +596,6 @@
   overflow-wrap: anywhere;
 }
 
-.prompt-input__references {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--sigvelo-spacing-1);
-}
-
-.prompt-input__reference {
-  position: relative;
-  gap: var(--sigvelo-spacing-1);
-  padding-inline: var(--sigvelo-spacing-1);
-  color: var(--sigvelo-color-primary-text);
-  font-weight: inherit;
-  font-size: var(--sigvelo-density-compact-control-font-size);
-}
-
-.prompt-input__reference-icon,
-.prompt-input__reference-remove {
-  display: inline-flex;
-  flex: 0 0 auto;
-}
-
-.prompt-input__reference-label {
-  max-inline-size: 18rem;
-}
-
-.prompt-input__reference-remove {
-  position: absolute;
-  inset-inline-end: calc(-1 * var(--sigvelo-spacing-3));
-  color: var(--sigvelo-color-text-muted);
-  opacity: 0;
-  pointer-events: none;
-}
-
-.prompt-input__reference:hover .prompt-input__reference-remove,
-.prompt-input__reference:focus-visible .prompt-input__reference-remove {
-  opacity: 1;
-}
-
-/* Local wrap. Not --sigvelo-layout-break-compact. */
-@container prompt-input (inline-size < 28rem) {
-  .prompt-input__reference-label {
-    max-inline-size: 12rem;
-  }
-}
-
 .prompt-input__command-description,
 .prompt-input__context-description {
   color: var(--sigvelo-color-text-muted);
@@ -674,7 +641,6 @@
   .prompt-input__button,
   .prompt-input__attachment-remove,
   .prompt-input__recording-button,
-  .prompt-input__reference,
   .prompt-input__submit {
     --sigvelo-recipe-button-height: var(--sigvelo-control-height-xl);
   }
@@ -690,11 +656,6 @@
     min-block-size: var(--sigvelo-control-height-xl);
   }
 
-  .prompt-input__reference-remove {
-    position: static;
-    opacity: 1;
-  }
-
   .prompt-input__attachment[data-image] .prompt-input__attachment-remove {
     position: static;
   }

package/dist/styles/think-sidepanel.css

@@ -60,6 +60,15 @@
   color: var(--sigvelo-color-text-muted);
 }
 
+.think-sidepanel .app-icon-stack .app-icon :is(img, .app-icon__image) {
+  color: unset;
+}
+
+.think-sidepanel .button .app-icon-stack .app-icon :is(svg, img) {
+  inline-size: 100%;
+  block-size: 100%;
+}
+
 @media (forced-colors: active) {
   .think-sidepanel,
   .think-sidepanel__gate {

package/dist/utils/composer-link.d.ts

@@ -0,0 +1,59 @@
+//#region src/utils/composer-link.d.ts
+declare const COMPOSER_LINK_ORIGIN = "https://composer.invalid";
+declare const COMPOSER_LINK_KINDS: readonly ["command", "mcp", "skill", "tab", "file"];
+type ComposerLinkKind = (typeof COMPOSER_LINK_KINDS)[number];
+declare const COMPOSER_CHROME_ICONS: readonly ["box"];
+type ComposerChromeIcon = (typeof COMPOSER_CHROME_ICONS)[number];
+interface ComposerLinkParts {
+  kind: ComposerLinkKind;
+  value: string;
+  label?: string;
+  iconSrc?: string;
+  chromeIcon?: ComposerChromeIcon;
+}
+interface ParsedComposerLink extends ComposerLinkParts {
+  href: string;
+  label: string;
+}
+type ComposerDraftSegment = {
+  type: "text";
+  value: string;
+} | {
+  type: "link";
+  href: string;
+  label: string;
+  parts: ParsedComposerLink;
+};
+declare function isComposerLinkKind(value: string): value is ComposerLinkKind;
+declare function isComposerChromeIcon(value: string): value is ComposerChromeIcon;
+declare function composerLinkHref(parts: ComposerLinkParts): string;
+declare function parseComposerHref(href: string | undefined): ParsedComposerLink | undefined;
+declare function escapeComposerLinkLabel(label: string): string;
+/** Brand hex from a Simple Icons URL, skipped when it would vanish as text. */
+declare function brandHexFromIconSrc(src: string | undefined): string | undefined;
+/** Most chromatic opaque pixel, skipped when the mark is charcoal, white, or gray. */
+declare function chromaticHexFromPixels(data: Uint8ClampedArray): string | undefined;
+declare function sampleImageAccent(image: HTMLImageElement): string | undefined;
+declare function serializeComposerLink(parts: ComposerLinkParts & {
+  label: string;
+}): string;
+declare function splitComposerDraft(text: string): ComposerDraftSegment[];
+declare function parseComposerLinks(text: string): ParsedComposerLink[];
+declare function composerTriggerMatch(text: string): {
+  trigger: "/" | "@";
+  query: string;
+  triggerIndex: number;
+} | undefined;
+declare function inferComposerLinkKind(command: {
+  id?: string;
+}, trigger: "/" | "@"): ComposerLinkKind;
+declare function replaceComposerTrigger(draft: string, command: {
+  id?: string;
+  value: string;
+  label: string;
+  href?: string;
+  iconSrc?: string;
+}, trigger: "/" | "@"): string;
+declare function composerDraftToPrompt(text: string): string;
+//#endregion
+export { COMPOSER_CHROME_ICONS, COMPOSER_LINK_KINDS, COMPOSER_LINK_ORIGIN, ComposerChromeIcon, ComposerDraftSegment, ComposerLinkKind, ComposerLinkParts, ParsedComposerLink, brandHexFromIconSrc, chromaticHexFromPixels, composerDraftToPrompt, composerLinkHref, composerTriggerMatch, escapeComposerLinkLabel, inferComposerLinkKind, isComposerChromeIcon, isComposerLinkKind, parseComposerHref, parseComposerLinks, replaceComposerTrigger, sampleImageAccent, serializeComposerLink, splitComposerDraft };

package/dist/utils/composer-link.js

@@ -0,0 +1,203 @@
+//#region src/utils/composer-link.ts
+const COMPOSER_LINK_ORIGIN = "https://composer.invalid";
+const COMPOSER_LINK_KINDS = [
+	"command",
+	"mcp",
+	"skill",
+	"tab",
+	"file"
+];
+const COMPOSER_CHROME_ICONS = ["box"];
+const COMPOSER_LINK_KIND_SET = new Set(COMPOSER_LINK_KINDS);
+const COMPOSER_MARKDOWN_LINK = /\[([^\]]+)\]\((https:\/\/composer\.invalid\/(?:command|mcp|skill|tab|file)\/[^)\s]+)\)/g;
+const TRAILING_TRIGGER = /(?:^|\s)([/@])([^\n]*)$/u;
+function isComposerLinkKind(value) {
+	return COMPOSER_LINK_KIND_SET.has(value);
+}
+const COMPOSER_CHROME_ICON_SET = new Set(COMPOSER_CHROME_ICONS);
+function isComposerChromeIcon(value) {
+	return COMPOSER_CHROME_ICON_SET.has(value);
+}
+function defaultChromeIcon(kind) {
+	return kind === "command" || kind === "skill" ? "box" : void 0;
+}
+function parseIconParam(value) {
+	if (!value) return {};
+	if (isComposerChromeIcon(value)) return { chromeIcon: value };
+	return { iconSrc: value };
+}
+function composerLinkHref(parts) {
+	const url = new URL(`${COMPOSER_LINK_ORIGIN}/${parts.kind}/${encodeURIComponent(parts.value)}`);
+	if (parts.label) url.searchParams.set("label", parts.label);
+	const icon = parts.iconSrc ?? parts.chromeIcon ?? defaultChromeIcon(parts.kind);
+	if (icon) url.searchParams.set("icon", icon);
+	return url.href;
+}
+function parseComposerHref(href) {
+	if (!href) return void 0;
+	let url;
+	try {
+		url = new URL(href);
+	} catch {
+		return;
+	}
+	if (url.origin !== "https://composer.invalid") return void 0;
+	const segments = url.pathname.split("/").filter(Boolean);
+	const kind = segments[0];
+	const encodedValue = segments.slice(1).join("/");
+	if (!kind || !isComposerLinkKind(kind) || !encodedValue) return void 0;
+	const value = decodeURIComponent(encodedValue);
+	const label = url.searchParams.get("label")?.trim() || void 0;
+	const iconParam = parseIconParam(url.searchParams.get("icon")?.trim() || void 0);
+	return {
+		kind,
+		value,
+		href: url.href,
+		label: label ?? value,
+		...iconParam,
+		...!iconParam.iconSrc && !iconParam.chromeIcon && defaultChromeIcon(kind) ? { chromeIcon: defaultChromeIcon(kind) } : {}
+	};
+}
+function escapeComposerLinkLabel(label) {
+	return label.replaceAll("[", "").replaceAll("]", "").trim() || label.trim();
+}
+const SIMPLE_ICONS_HEX = /\/([0-9a-fA-F]{6})(?:[/?#]|$)/;
+function srgbChannel(value) {
+	const channel = value / 255;
+	return channel <= .03928 ? channel / 12.92 : ((channel + .055) / 1.055) ** 2.4;
+}
+function isUsableTextColor(red, green, blue) {
+	const luminance = .2126 * srgbChannel(red) + .7152 * srgbChannel(green) + .0722 * srgbChannel(blue);
+	return luminance >= .12 && luminance <= .82;
+}
+/** Brand hex from a Simple Icons URL, skipped when it would vanish as text. */
+function brandHexFromIconSrc(src) {
+	if (!src) return void 0;
+	const hex = SIMPLE_ICONS_HEX.exec(src)?.[1];
+	if (!hex) return void 0;
+	return isUsableTextColor(Number.parseInt(hex.slice(0, 2), 16), Number.parseInt(hex.slice(2, 4), 16), Number.parseInt(hex.slice(4, 6), 16)) ? `#${hex}` : void 0;
+}
+/** Most chromatic opaque pixel, skipped when the mark is charcoal, white, or gray. */
+function chromaticHexFromPixels(data) {
+	let bestChroma = 0;
+	let best;
+	for (let index = 0; index + 3 < data.length; index += 4) {
+		if ((data[index + 3] ?? 0) < 128) continue;
+		const red = data[index] ?? 0;
+		const green = data[index + 1] ?? 0;
+		const blue = data[index + 2] ?? 0;
+		const chroma = Math.max(red, green, blue) / 255 - Math.min(red, green, blue) / 255;
+		if (chroma < .18 || !isUsableTextColor(red, green, blue)) continue;
+		if (chroma > bestChroma) {
+			bestChroma = chroma;
+			best = `#${[
+				red,
+				green,
+				blue
+			].map((channel) => channel.toString(16).padStart(2, "0")).join("")}`;
+		}
+	}
+	return best;
+}
+function sampleImageAccent(image) {
+	if (!image.naturalWidth) return void 0;
+	const canvas = document.createElement("canvas");
+	canvas.width = 32;
+	canvas.height = 32;
+	const context = canvas.getContext("2d", { willReadFrequently: true });
+	if (!context) return void 0;
+	try {
+		context.drawImage(image, 0, 0, 32, 32);
+		return chromaticHexFromPixels(context.getImageData(0, 0, 32, 32).data);
+	} catch {
+		return;
+	}
+}
+function serializeComposerLink(parts) {
+	const label = escapeComposerLinkLabel(parts.label);
+	return `[${label}](${composerLinkHref({
+		...parts,
+		label
+	})})`;
+}
+function splitComposerDraft(text) {
+	const segments = [];
+	let lastIndex = 0;
+	for (const match of text.matchAll(COMPOSER_MARKDOWN_LINK)) {
+		const index = match.index ?? 0;
+		if (index > lastIndex) segments.push({
+			type: "text",
+			value: text.slice(lastIndex, index)
+		});
+		const parsed = parseComposerHref(match[2] ?? "");
+		const label = match[1] ?? parsed?.label ?? "";
+		if (!parsed) segments.push({
+			type: "text",
+			value: match[0] ?? ""
+		});
+		else segments.push({
+			type: "link",
+			href: parsed.href,
+			label,
+			parts: {
+				...parsed,
+				label
+			}
+		});
+		lastIndex = index + (match[0]?.length ?? 0);
+	}
+	if (lastIndex < text.length) segments.push({
+		type: "text",
+		value: text.slice(lastIndex)
+	});
+	return segments;
+}
+function parseComposerLinks(text) {
+	return splitComposerDraft(text).flatMap((segment) => segment.type === "link" ? [segment.parts] : []);
+}
+function composerTriggerMatch(text) {
+	const match = TRAILING_TRIGGER.exec(text);
+	if (!match) return void 0;
+	const trigger = match[1];
+	if (trigger !== "/" && trigger !== "@") return void 0;
+	const matchIndex = match.index ?? 0;
+	const triggerIndex = text[matchIndex] === "/" || text[matchIndex] === "@" ? matchIndex : matchIndex + 1;
+	return {
+		trigger,
+		query: match[2] ?? "",
+		triggerIndex
+	};
+}
+function inferComposerLinkKind(command, trigger) {
+	const id = command.id ?? "";
+	if (id.startsWith("mcp:")) return "mcp";
+	if (id.startsWith("tab:")) return "tab";
+	if (id.startsWith("skill:")) return "skill";
+	if (id.startsWith("file:")) return "file";
+	return trigger === "@" ? "mcp" : "command";
+}
+function replaceComposerTrigger(draft, command, trigger) {
+	const href = command.href ?? composerLinkHref({
+		kind: inferComposerLinkKind(command, trigger),
+		value: command.value,
+		label: command.label,
+		iconSrc: command.iconSrc
+	});
+	const markdown = `[${escapeComposerLinkLabel(command.label)}](${href})`;
+	const match = composerTriggerMatch(draft);
+	if (!match) {
+		const trimmed = draft.trimEnd();
+		return trimmed ? `${trimmed} ${markdown} ` : `${markdown} `;
+	}
+	return `${draft.slice(0, match.triggerIndex)}${markdown} `;
+}
+function composerDraftToPrompt(text) {
+	return splitComposerDraft(text).map((segment) => {
+		if (segment.type === "text") return segment.value;
+		if (segment.parts.kind === "mcp" || segment.parts.kind === "tab") return `@${segment.parts.value}`;
+		if (segment.parts.kind === "file") return segment.parts.value;
+		return `/${segment.parts.value}`;
+	}).join("").replace(/[^\S\n]+/g, " ").trim();
+}
+//#endregion
+export { COMPOSER_CHROME_ICONS, COMPOSER_LINK_KINDS, COMPOSER_LINK_ORIGIN, brandHexFromIconSrc, chromaticHexFromPixels, composerDraftToPrompt, composerLinkHref, composerTriggerMatch, escapeComposerLinkLabel, inferComposerLinkKind, isComposerChromeIcon, isComposerLinkKind, parseComposerHref, parseComposerLinks, replaceComposerTrigger, sampleImageAccent, serializeComposerLink, splitComposerDraft };

package/dist/utils/mcp-server-catalog.d.ts

@@ -1,2 +1,2 @@
-import { a as MCP_SERVER_SETUP_AUTH, c as McpServerManualSetup, d as McpServerSetupAuthFieldName, f as McpServerSetupLink, h as getMcpServerRuntimeState, i as MANUAL_MCP_SERVER_CARDS, l as McpServerSetupAuth, m as getMcpServerIconSrc, n as DCR_MCP_SERVER_CARDS, o as McpServerCard, p as getMcpServerEntry, r as DEFAULT_MCP_SERVER_CARDS, s as McpServerCardIcon, t as CUSTOM_MCP_SERVER_CARD, u as McpServerSetupAuthField } from "../mcp-server-catalog-CCj2ItkV.js";
+import { a as MCP_SERVER_SETUP_AUTH, c as McpServerManualSetup, d as McpServerSetupAuthFieldName, f as McpServerSetupLink, h as getMcpServerRuntimeState, i as MANUAL_MCP_SERVER_CARDS, l as McpServerSetupAuth, m as getMcpServerIconSrc, n as DCR_MCP_SERVER_CARDS, o as McpServerCard, p as getMcpServerEntry, r as DEFAULT_MCP_SERVER_CARDS, s as McpServerCardIcon, t as CUSTOM_MCP_SERVER_CARD, u as McpServerSetupAuthField } from "../mcp-server-catalog-Cbu483Zb.js";
 export { CUSTOM_MCP_SERVER_CARD, DCR_MCP_SERVER_CARDS, DEFAULT_MCP_SERVER_CARDS, MANUAL_MCP_SERVER_CARDS, MCP_SERVER_SETUP_AUTH, McpServerCard, McpServerCardIcon, McpServerManualSetup, McpServerSetupAuth, McpServerSetupAuthField, McpServerSetupAuthFieldName, McpServerSetupLink, getMcpServerEntry, getMcpServerIconSrc, getMcpServerRuntimeState };

package/dist/utils/mcp-server-catalog.js

@@ -274,7 +274,7 @@ const DCR_MCP_SERVER_CARDS = [
 		url: "https://mcp.miro.com/mcp",
 		description: "Work with boards and diagrams",
 		category: DCR_CATEGORY,
-		icon: "https://cdn.simpleicons.org/miro/FFD02F"
+		icon: "https://cdn.simpleicons.org/miro/050038"
 	},
 	{
 		id: "monday",
@@ -298,7 +298,7 @@ const DCR_MCP_SERVER_CARDS = [
 		url: "https://mcp.notion.com/mcp",
 		description: "Work across docs, wikis, and project notes",
 		category: DCR_CATEGORY,
-		icon: "https://cdn.simpleicons.org/notion/A1A1AA"
+		icon: "https://cdn.simpleicons.org/notion/000000"
 	},
 	{
 		id: "paypal",
@@ -306,7 +306,7 @@ const DCR_MCP_SERVER_CARDS = [
 		url: "https://mcp.paypal.com/mcp",
 		description: "Use PayPal merchant tools",
 		category: DCR_CATEGORY,
-		icon: "https://cdn.simpleicons.org/paypal/003087"
+		icon: "https://cdn.simpleicons.org/paypal/002991"
 	},
 	{
 		id: "postman",
@@ -322,7 +322,7 @@ const DCR_MCP_SERVER_CARDS = [
 		url: "https://mcp.railway.com",
 		description: "Manage Railway projects and services",
 		category: DCR_CATEGORY,
-		icon: "https://cdn.simpleicons.org/railway/8957E5"
+		icon: "https://cdn.simpleicons.org/railway/0B0D0E"
 	},
 	{
 		id: "ramp",
@@ -338,7 +338,7 @@ const DCR_MCP_SERVER_CARDS = [
 		url: "https://mcp.sentry.dev/mcp",
 		description: "Debug errors and inspect projects",
 		category: DCR_CATEGORY,
-		icon: "https://cdn.simpleicons.org/sentry/8957E5"
+		icon: "https://cdn.simpleicons.org/sentry/362D59"
 	},
 	{
 		id: "square",
@@ -362,7 +362,7 @@ const DCR_MCP_SERVER_CARDS = [
 		url: "https://mcp.supabase.com/mcp",
 		description: "Manage Supabase projects",
 		category: DCR_CATEGORY,
-		icon: "https://cdn.simpleicons.org/supabase/3ECF8E"
+		icon: "https://cdn.simpleicons.org/supabase/3FCF8E"
 	},
 	{
 		id: "vercel",
@@ -370,7 +370,7 @@ const DCR_MCP_SERVER_CARDS = [
 		url: "https://mcp.vercel.com",
 		description: "Manage projects and deployments",
 		category: DCR_CATEGORY,
-		icon: "https://cdn.simpleicons.org/vercel/A1A1AA"
+		icon: "https://cdn.simpleicons.org/vercel/000000"
 	},
 	{
 		id: "webflow",
@@ -386,7 +386,7 @@ const DCR_MCP_SERVER_CARDS = [
 		url: "https://mcp.wix.com/mcp",
 		description: "Work with Wix sites and apps",
 		category: DCR_CATEGORY,
-		icon: "https://cdn.simpleicons.org/wix/A1A1AA"
+		icon: "https://cdn.simpleicons.org/wix/0C6EFC"
 	},
 	{
 		id: "zapier",
@@ -491,7 +491,7 @@ const MANUAL_MCP_SERVER_CARDS = [
 		url: "https://chatmcp.googleapis.com/mcp/v1",
 		description: "Read spaces, memberships, and messages",
 		category: MANUAL_CATEGORY,
-		icon: "https://cdn.simpleicons.org/googlechat/00AC47",
+		icon: "https://cdn.simpleicons.org/googlechat/34A853",
 		manualSetup: {
 			auth: MCP_SERVER_SETUP_AUTH.manualOAuthClientSecret,
 			description: "Enable Chat and Chat MCP APIs, configure a Chat app, and create a web OAuth client.",