-
diff --git a/apps/console/src/app/(console)/explore/explore-canvas.tsx b/apps/console/src/app/(console)/explore/explore-canvas.tsx
index 8ffb1d40c..71a895df9 100644
--- a/apps/console/src/app/(console)/explore/explore-canvas.tsx
+++ b/apps/console/src/app/(console)/explore/explore-canvas.tsx
@@ -1588,7 +1588,7 @@ function StreamDoorLink({
});
return (
- See all '{query}' records in
);
}
@@ -1610,7 +1610,7 @@ function StreamSeeAllLink({
const totalLabel = typeof link.total === "number" ? ` - ${link.total.toLocaleString()} records` : "";
return (
-
@@ -1742,7 +1742,7 @@ function ConnectionFacets({
excluded={excluded.includes(c.connectionId)}
key={c.connectionId}
label={c.displayName}
- leading={
-
{/* The source total is the SAME count KIND as each stream — loaded rows
@@ -2016,7 +2016,8 @@ function FeedRow({
`title` makes the full name recoverable on hover/long-press. */}
{loaded.toLocaleString()} {" "}
- {" "}in view
diff --git a/apps/console/src/app/(console)/explore/page.tsx b/apps/console/src/app/(console)/explore/page.tsx
index edffd5f43..d45a93014 100644
--- a/apps/console/src/app/(console)/explore/page.tsx
+++ b/apps/console/src/app/(console)/explore/page.tsx
@@ -40,6 +40,7 @@ import { dashboardRoutes } from "@pdpp/operator-ui/components/views/routes";
import { assembleExplorerData } from "@pdpp/operator-ui/explore/explore-data-assembler";
import { RecordroomShellWithPalette } from "@/app/(console)/components/recordroom-shell-with-palette.tsx";
import { ServerUnreachable } from "../components/server-unreachable.tsx";
+import { buildConnectorIconMap } from "../lib/connector-icon-map.ts";
import { liveDashboardDataSource } from "../lib/data-source.ts";
import { getRsInternalUrl, ReferenceServerUnreachableError } from "../lib/owner-token.ts";
import { listConnectorManifests } from "../lib/rs-client.ts";
@@ -128,12 +129,8 @@ export default async function RecordsExplorerPage({
try {
const data = await assembleExplorerData(params, liveDashboardDataSource, getRsInternalUrl());
- const connectorIcons = Object.fromEntries(
- (await listConnectorManifests().catch(() => [])).flatMap((manifest) => [
- [manifest.connector_id, manifest.icon] as const,
- ...(manifest.connector_key ? ([[manifest.connector_key, manifest.icon]] as const) : []),
- ])
- );
+ const manifests = await listConnectorManifests().catch(() => []);
+ const connectorIcons = await buildConnectorIconMap(manifests, []);
const order = data.supportsTimelineDirection && requestedOrder === "oldest" ? "oldest" : "newest";
// Relationships for the inspected record come from declared metadata via the
// SAME `records/lib/relationships.ts` helpers the records detail page uses —
diff --git a/apps/console/src/app/(console)/grants/approvals/[approvalId]/approval-review.tsx b/apps/console/src/app/(console)/grants/approvals/[approvalId]/approval-review.tsx
index 678e257d6..3d04abd49 100644
--- a/apps/console/src/app/(console)/grants/approvals/[approvalId]/approval-review.tsx
+++ b/apps/console/src/app/(console)/grants/approvals/[approvalId]/approval-review.tsx
@@ -136,7 +136,8 @@ function SingleArtifactFacts({ artifact, connectorIcons }: { artifact: SingleCon
{artifact.source.kind === "connector" ? (
{source.source.kind === "connector" ? (
{connectorId ? (
diff --git a/apps/console/src/app/(console)/grants/page.tsx b/apps/console/src/app/(console)/grants/page.tsx
index a8080894c..6b810c4a4 100644
--- a/apps/console/src/app/(console)/grants/page.tsx
+++ b/apps/console/src/app/(console)/grants/page.tsx
@@ -209,7 +209,7 @@ function GrantRow({
{connectorId ? (
- {grantRowLabel(grant)}
- {connectorId ?
: null}
+ {connectorId ?
: null}
{technicalClientCaption(approval.client_id) ?? "client —"}
{approval.grant_preview?.source ? ` · source ${formatSourceForDisplay(approval.grant_preview.source)}` : ""}
{previewStreams.length ? ` · streams ${previewStreams.join(", ")}` : ""}
diff --git a/apps/console/src/app/(console)/lib/connector-display-mark.cross-surface.test.ts b/apps/console/src/app/(console)/lib/connector-display-mark.cross-surface.test.ts
new file mode 100644
index 000000000..4353875ef
--- /dev/null
+++ b/apps/console/src/app/(console)/lib/connector-display-mark.cross-surface.test.ts
@@ -0,0 +1,67 @@
+// Copyright The PDP-Connect Contributors
+// SPDX-License-Identifier: Apache-2.0
+
+/**
+ * One connector, every surface. The real Amazon manifest names a white glyph
+ * file (`brand.icon`) and an orange `brand.background_color`. A white glyph
+ * with no backdrop is invisible on a light surface, so the setup pages, the
+ * summary pages and a console with no manifests on disk must paint the same
+ * backdrop.
+ */
+
+import assert from "node:assert/strict";
+import { mock, test } from "node:test";
+import React, { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+
+// The vendored renderer relies on the classic JSX runtime.
+(globalThis as { React?: typeof React }).React = React;
+
+// rs-client reaches `server-only`, which throws outside a server component.
+mock.module("server-only", { namedExports: {} });
+
+const AMAZON = "https://registry.pdpp.dev/connectors/amazon";
+const imports = Promise.all([
+ import("../components/connector-mark.tsx"),
+ import("../sources/lib/relationships.ts"),
+ import("./connector-icon-map.ts"),
+ import("./rs-client.ts"),
+]);
+
+function mark(
+ ConnectorMark: (typeof import("../components/connector-mark.tsx"))["ConnectorMark"],
+ icon: Parameters
[0]["icon"]
+): string {
+ return renderToStaticMarkup(createElement(ConnectorMark, { connectorId: AMAZON, icon, name: "Amazon" }));
+}
+
+test("setup, summary and manifest-less surfaces paint the same backdrop behind a white glyph", async () => {
+ const [{ ConnectorMark }, { findManifestForConnectorId }, { buildConnectorIconMap }, { listConnectorManifests }] =
+ await imports;
+ const manifests = await listConnectorManifests();
+ const manifest = findManifestForConnectorId(manifests, AMAZON);
+ assert.ok(manifest, "the installed connector package ships the Amazon manifest");
+ assert.equal(manifest.brand?.background_color, "#FF9900");
+ assert.equal(manifest.resolvedIconSource, "manifest", "the glyph came from brand.icon, not the bundled asset");
+
+ // Setup pages pass the manifest icon; summary pages read the icon map; a
+ // console with no manifests on disk passes nothing and uses the bundled mark.
+ const setup = mark(ConnectorMark, manifest.icon);
+ const summary = mark(ConnectorMark, (await buildConnectorIconMap(manifests, []))[AMAZON]);
+ const withoutManifests = mark(ConnectorMark, undefined);
+
+ assert.match(setup, /background-color:#FF9900/i);
+ assert.match(setup, /fill="#FFFFFF"/i, "the white glyph is kept, not forced to currentColor");
+ assert.equal(setup, summary);
+ assert.equal(setup, withoutManifests);
+});
+
+test("for every installed manifest the summary map and the setup mark are the same mark", async () => {
+ const [, , { buildConnectorIconMap }, { listConnectorManifests }] = await imports;
+ const manifests = await listConnectorManifests();
+ assert.ok(manifests.length > 0);
+ const icons = await buildConnectorIconMap(manifests, []);
+ for (const manifest of manifests) {
+ assert.deepEqual(icons[manifest.connector_id], manifest.icon ?? undefined, manifest.connector_id);
+ }
+});
diff --git a/apps/console/src/app/(console)/lib/connector-icon-corpus-checks.test.ts b/apps/console/src/app/(console)/lib/connector-icon-corpus-checks.test.ts
new file mode 100644
index 000000000..0356c97e1
--- /dev/null
+++ b/apps/console/src/app/(console)/lib/connector-icon-corpus-checks.test.ts
@@ -0,0 +1,78 @@
+// Copyright The PDP-Connect Contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import assert from "node:assert/strict";
+import test from "node:test";
+import { assertIconCorpusConsistent } from "./connector-icon-corpus-checks.ts";
+import iconCorpus from "./connector-icons/sanitized-assets.json" with { type: "json" };
+
+const SVG = ' = {}) {
+ return {
+ background_color: "#112233",
+ connector_id: `https://registry.pdpp.dev/connectors/${key}`,
+ connector_key: key,
+ source_id: null as string | null,
+ svg: SVG,
+ ...overrides,
+ };
+}
+
+test("the checked-in corpus is consistent", () => {
+ assert.doesNotThrow(() => assertIconCorpusConsistent(iconCorpus.entries));
+});
+
+test("two entries whose identities differ only by _/- spelling are rejected", () => {
+ assert.throws(() => assertIconCorpusConsistent([entry("foo-bar"), entry("foo_bar")]), FOO_BAR_COLLISION);
+});
+
+test("a registry-prefixed id that spells another entry's key is rejected", () => {
+ const first = entry("foo");
+ const second = entry("other", { connector_id: "https://registry.pdpp.dev/connectors/foo" });
+ assert.throws(() => assertIconCorpusConsistent([first, second]), FOO);
+});
+
+test("an exact duplicate key is still rejected", () => {
+ assert.throws(() => assertIconCorpusConsistent([entry("foo"), entry("foo")]), FOO);
+});
+
+test("a background that is not a hex color is rejected", () => {
+ for (const bad of ["transparent", "red", "#12", "#fff;x:y"]) {
+ assert.throws(() => assertIconCorpusConsistent([entry("foo", { background_color: bad })]), BACKGROUND, bad);
+ }
+ assert.doesNotThrow(() => assertIconCorpusConsistent([entry("foo", { background_color: undefined })]));
+ assert.doesNotThrow(() => assertIconCorpusConsistent([entry("foo", { background_color: "#fff" })]));
+});
+
+test("a source id shared by entries with different marks is rejected", () => {
+ const source = "https://registry.pdpp.dev/sources/foo";
+ assert.throws(
+ () =>
+ assertIconCorpusConsistent([
+ entry("foo", { source_id: source }),
+ entry("foo-live", { source_id: source, svg: OTHER_SVG }),
+ ]),
+ SOURCE
+ );
+ assert.throws(
+ () =>
+ assertIconCorpusConsistent([
+ entry("foo", { source_id: source }),
+ entry("foo-live", { background_color: "#445566", source_id: source }),
+ ]),
+ SOURCE
+ );
+});
+
+test("a source id shared by entries with the same mark is accepted", () => {
+ const source = "https://registry.pdpp.dev/sources/foo";
+ assert.doesNotThrow(() =>
+ assertIconCorpusConsistent([entry("foo", { source_id: source }), entry("foo-live", { source_id: source })])
+ );
+});
diff --git a/apps/console/src/app/(console)/lib/connector-icon-corpus-checks.ts b/apps/console/src/app/(console)/lib/connector-icon-corpus-checks.ts
new file mode 100644
index 000000000..0e5b1cd31
--- /dev/null
+++ b/apps/console/src/app/(console)/lib/connector-icon-corpus-checks.ts
@@ -0,0 +1,65 @@
+// Copyright The PDP-Connect Contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { hexColorOrNull } from "@pdpp/brand-react/hex-color";
+import { connectorIconIdentityKeys } from "./connector-icon-identity.ts";
+
+interface CorpusEntryLike {
+ readonly background_color?: string | null;
+ readonly connector_id: string;
+ readonly connector_key: string;
+ readonly source_id?: string | null;
+ readonly svg: string;
+}
+
+/**
+ * Fail when the pinned icon corpus could make a shipped mark depend on file
+ * order or carry a free-form style value. The runtime indexes marks by every
+ * accepted spelling of an identity, so the check runs on those spellings, not
+ * on the raw strings:
+ * - no two entries may claim one normalized identity (`foo_bar`/`foo-bar`,
+ * or a registry-prefixed id that spells another entry's key);
+ * - `background_color` is a hex color when present;
+ * - entries sharing a `source_id` carry the same svg and background, since
+ * the source lookup would otherwise resolve to no brand.
+ */
+export function assertIconCorpusConsistent(entries: readonly CorpusEntryLike[]): void {
+ const identityOwner = new Map();
+ const sourceMark = new Map();
+ for (const entry of entries) {
+ assertHexBackground(entry);
+ claimIdentities(entry, identityOwner);
+ if (entry.source_id) {
+ assertSameSourceMark(entry, entry.source_id, sourceMark);
+ }
+ }
+}
+
+function assertHexBackground(entry: CorpusEntryLike): void {
+ const background = entry.background_color;
+ if (background !== undefined && background !== null && hexColorOrNull(background) === null) {
+ throw new Error(`Icon ${entry.connector_key} has a background_color that is not a hex color.`);
+ }
+}
+
+function claimIdentities(entry: CorpusEntryLike, owners: Map): void {
+ for (const identity of [entry.connector_id, entry.connector_key]) {
+ for (const key of connectorIconIdentityKeys(identity)) {
+ const owner = owners.get(key);
+ if (owner !== undefined && owner !== entry) {
+ throw new Error(`Icons ${owner.connector_key} and ${entry.connector_key} claim the same identity "${key}".`);
+ }
+ owners.set(key, entry);
+ }
+ }
+}
+
+function assertSameSourceMark(entry: CorpusEntryLike, sourceId: string, first: Map): void {
+ const previous = first.get(sourceId);
+ if (previous && (previous.svg !== entry.svg || previous.background_color !== entry.background_color)) {
+ throw new Error(
+ `Icons ${previous.connector_key} and ${entry.connector_key} share source ${sourceId} with different marks.`
+ );
+ }
+ first.set(sourceId, previous ?? entry);
+}
diff --git a/apps/console/src/app/(console)/lib/connector-icon-identity.ts b/apps/console/src/app/(console)/lib/connector-icon-identity.ts
new file mode 100644
index 000000000..88b5a53dc
--- /dev/null
+++ b/apps/console/src/app/(console)/lib/connector-icon-identity.ts
@@ -0,0 +1,27 @@
+// Copyright The PDP-Connect Contributors
+// SPDX-License-Identifier: Apache-2.0
+
+const URI_SCHEME = /^[a-z][a-z\d+.-]*:/iu;
+const REGISTRY_PREFIX = "https://registry.pdpp.dev/connectors/";
+const TRAILING_SLASH = /\/$/u;
+
+/** Preserve the first-party registry/key aliases; unrelated URLs remain exact identities. */
+export function connectorIconIdentityKeys(connectorId: string): readonly string[] {
+ const value = connectorId.trim();
+ if (!value) {
+ return [];
+ }
+ const keys = new Set([value]);
+ let localKey: string | null = value;
+ if (value.startsWith(REGISTRY_PREFIX)) {
+ localKey = value.slice(REGISTRY_PREFIX.length).replace(TRAILING_SLASH, "");
+ } else if (URI_SCHEME.test(value)) {
+ localKey = null;
+ }
+ if (localKey !== null) {
+ const canonical = localKey.replaceAll("_", "-");
+ keys.add(canonical);
+ keys.add(canonical.replaceAll("-", "_"));
+ }
+ return [...keys];
+}
diff --git a/apps/console/src/app/(console)/lib/connector-icon-map.test.ts b/apps/console/src/app/(console)/lib/connector-icon-map.test.ts
new file mode 100644
index 000000000..08f17a595
--- /dev/null
+++ b/apps/console/src/app/(console)/lib/connector-icon-map.test.ts
@@ -0,0 +1,199 @@
+// Copyright The PDP-Connect Contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import assert from "node:assert/strict";
+import test, { mock } from "node:test";
+import { buildConnectorIconMap, catalogEntryIcon } from "./connector-icon-map.ts";
+import iconCorpus from "./connector-icons/sanitized-assets.json" with { type: "json" };
+import { resolveConnectorIcon } from "./resolve-connector-icon.ts";
+import { resolveManifestDisplayMark } from "./resolve-manifest-display-mark.ts";
+
+const UNSAFE_ONLOAD = /onload/iu;
+const GITHUB_SVG = iconCorpus.entries.find((entry) => entry.connector_key === "github")?.svg;
+assert.ok(GITHUB_SVG);
+
+const INLINE_MANIFEST_MARK = {
+ color: "#123456",
+ kind: "inline_svg",
+ svg: GITHUB_SVG,
+} as const;
+const INLINE_TEMPLATE_MARK = {
+ color: "#654321",
+ kind: "inline_svg",
+ svg: GITHUB_SVG,
+} as const;
+
+test("projects pinned upstream marks by exact connector key and canonical ID", async () => {
+ const icons = await buildConnectorIconMap(
+ [],
+ [{ connector_id: "https://registry.pdpp.dev/connectors/github", connector_key: "github" }]
+ );
+
+ assert.ok(icons.github?.svg?.startsWith(" {
+ const icons = await buildConnectorIconMap([], []);
+ assert.deepEqual(icons.apple_photos, icons["apple-photos"]);
+});
+
+test("preserves the valid inline owner-template mark over the pinned asset", async () => {
+ const icons = await buildConnectorIconMap(
+ [],
+ [{ connector_id: "github", connector_key: "github", icon: INLINE_TEMPLATE_MARK }]
+ );
+
+ assert.deepEqual(icons.github, INLINE_TEMPLATE_MARK);
+});
+
+test("a template mark beats a manifest's fallback mark but not the manifest's own", async () => {
+ const bundled = await resolveManifestDisplayMark({ connector_id: "github", connector_key: "github" }, "/nonexistent");
+ assert.equal(bundled.source, "bundled");
+ const withFallback = await buildConnectorIconMap(
+ [{ connector_id: "github", connector_key: "github", icon: bundled.icon, resolvedIconSource: bundled.source }],
+ [{ connector_id: "github", connector_key: "github", icon: INLINE_TEMPLATE_MARK }]
+ );
+ assert.deepEqual(withFallback.github, INLINE_TEMPLATE_MARK);
+
+ const own = await buildConnectorIconMap(
+ [{ connector_id: "github", connector_key: "github", icon: INLINE_MANIFEST_MARK, resolvedIconSource: "manifest" }],
+ [{ connector_id: "github", connector_key: "github", icon: INLINE_TEMPLATE_MARK }]
+ );
+ assert.deepEqual(own.github, INLINE_MANIFEST_MARK);
+});
+
+test("a manifest and a template that disagree yield the same mark on every surface", async () => {
+ const manifest = { connector_id: "github", connector_key: "github", icon: INLINE_MANIFEST_MARK } as const;
+ // Setup pages render the resolved manifest mark; summary and add pages read the map.
+ const setup = (await resolveManifestDisplayMark(manifest, "/nonexistent")).icon;
+ const withTemplate = await buildConnectorIconMap(
+ [manifest],
+ [{ connector_id: "github", connector_key: "github", icon: INLINE_TEMPLATE_MARK }]
+ );
+ const withoutTemplate = await buildConnectorIconMap([manifest], []);
+
+ assert.deepEqual(setup, withTemplate.github);
+ assert.deepEqual(setup, withoutTemplate.github);
+ assert.equal(withTemplate.github?.color, INLINE_MANIFEST_MARK.color);
+});
+
+test("preserves an explicitly supplied safe inline manifest mark over the pinned asset", async () => {
+ const icons = await buildConnectorIconMap(
+ [{ connector_id: "github", connector_key: "github", icon: INLINE_MANIFEST_MARK }],
+ []
+ );
+
+ assert.deepEqual(icons.github, INLINE_MANIFEST_MARK);
+});
+
+test("rejects unsafe inline SVG and keeps the pinned safe asset", async () => {
+ const icons = await buildConnectorIconMap(
+ [
+ {
+ connector_id: "github",
+ connector_key: "github",
+ icon: { kind: "inline_svg", svg: ' {
+ const icons = await buildConnectorIconMap([], []);
+ for (const entry of iconCorpus.entries) {
+ const icon = icons[entry.connector_key];
+ assert.equal(icon?.svg, entry.svg, entry.connector_key);
+ assert.equal(icon?.backgroundColor, entry.background_color, entry.connector_key);
+ assert.equal(icons[entry.connector_id], icon, entry.connector_key);
+ }
+});
+
+test("an iconless owner template preserves a custom manifest mark", async () => {
+ const icons = await buildConnectorIconMap(
+ [{ connector_id: "github", connector_key: "github", icon: INLINE_MANIFEST_MARK }],
+ [{ connector_id: "github", connector_key: "github" }]
+ );
+ assert.deepEqual(icons.github, INLINE_MANIFEST_MARK);
+});
+
+test("a catalog entry keeps its own mark when the map does not index its key", async () => {
+ const icons = await buildConnectorIconMap([], []);
+ assert.deepEqual(
+ catalogEntryIcon({ connectorKey: "not-in-the-map", icon: INLINE_TEMPLATE_MARK }, icons),
+ INLINE_TEMPLATE_MARK
+ );
+ assert.equal(catalogEntryIcon({ connectorKey: "not-in-the-map" }, icons), null);
+ assert.deepEqual(catalogEntryIcon({ connectorKey: "github", icon: INLINE_TEMPLATE_MARK }, icons), icons.github);
+});
+
+test("a catalog entry's own unsafe mark is rejected when the map misses its key", async () => {
+ const icons = await buildConnectorIconMap([], []);
+ const unsafe = {
+ kind: "inline_svg",
+ svg: '>;
+
+function layerForSource(
+ layers: Record>,
+ source: ConnectorManifest["resolvedIconSource"]
+): Map {
+ if (source === "bundled") {
+ return layers.bundled;
+ }
+ return source === "simple-icons" ? layers.generic : layers.manifest;
+}
+
+/**
+ * A display projection; it never adds or changes a connector manifest. Each
+ * source of marks fills one layer, and `pickDisplayMark` (the same function
+ * `resolveManifestDisplayMark` uses) chooses per identity, so the map cannot
+ * order marks differently from the setup pages.
+ */
+export async function buildConnectorIconMap(
+ manifests: readonly ConnectorManifest[],
+ templates: readonly OwnerConnectorTemplate[]
+): Promise {
+ const layers = {
+ bundled: bundledIconIdentities(),
+ generic: new Map(),
+ manifest: new Map(),
+ template: new Map(),
+ } satisfies Record>;
+ // Manifest marks are already normalized (resolveManifestDisplayMark). Which
+ // layer one belongs to follows the source it resolved from.
+ for (const manifest of manifests) {
+ indexConnectorIcon(
+ layerForSource(layers, manifest.resolvedIconSource),
+ [manifest.connector_id, manifest.connector_key],
+ validatedConnectorIcon(manifest.icon)
+ );
+ }
+ for (const template of templates) {
+ indexConnectorIcon(
+ layers.template,
+ [template.connector_id, template.connector_key],
+ validatedConnectorIcon(template.icon)
+ );
+ }
+ // Resolve only identities no layer covers yet, so the fallback cannot
+ // overwrite an approved mark through an alias.
+ const covered = (ids: readonly (string | null | undefined)[]) =>
+ Object.values(layers).some((layer) => hasConnectorIcon(layer, ids));
+ const missing = templates.filter(
+ (template) => template.connector_key && !covered([template.connector_id, template.connector_key])
+ );
+ const fallbacks = await Promise.all(
+ missing.map(async (template) => ({
+ identities: [template.connector_id, template.connector_key],
+ icon: await resolveConnectorIconFromSimpleIcons(template.connector_key ?? ""),
+ }))
+ );
+ for (const fallback of fallbacks) {
+ indexConnectorIcon(layers.generic, fallback.identities, fallback.icon);
+ }
+ const icons = new Map();
+ for (const key of new Set(Object.values(layers).flatMap((layer) => [...layer.keys()]))) {
+ const { icon } = pickDisplayMark({
+ bundled: layers.bundled.get(key),
+ generic: layers.generic.get(key),
+ manifest: layers.manifest.get(key),
+ template: layers.template.get(key),
+ });
+ if (icon) {
+ icons.set(key, icon);
+ }
+ }
+ return Object.fromEntries(icons);
+}
+
+/**
+ * The mark for a catalog entry: the map's choice, else the mark the entry
+ * already carries. A key the map does not index must not discard that mark.
+ */
+export function catalogEntryIcon(
+ entry: { readonly connectorKey: string; readonly icon?: ConnectorIconLike | null },
+ icons: ConnectorIconMap
+): ConnectorIconLike | null {
+ return icons[connectorLookupKey(entry.connectorKey)] ?? validatedConnectorIcon(entry.icon) ?? null;
+}
diff --git a/apps/console/src/app/(console)/lib/connector-icons/NOTICE b/apps/console/src/app/(console)/lib/connector-icons/NOTICE
new file mode 100644
index 000000000..c92397292
--- /dev/null
+++ b/apps/console/src/app/(console)/lib/connector-icons/NOTICE
@@ -0,0 +1,19 @@
+Copyright © 2026 The PDP-Connect Contributors
+Licensed under the Apache License, Version 2.0.
+
+## Third-party connector brand icons
+
+Shipped connector manifests in `packages/polyfill-connectors/manifests/` each
+declare a small brand glyph (`brand.icon`, under `manifests/icons/*.svg`) to
+identify the third-party service the connector connects to (e.g. Amazon,
+GitHub, Spotify). All product names, trademarks, and registered trademarks
+referenced or depicted by these icons are the property of their respective
+owners. These icons are used by the PDP-Connect project strictly to identify
+the products and companies a connector integrates with; their use implies no
+sponsorship, affiliation, or endorsement by the mark holder.
+
+A connector manifest with no legitimately available brand mark should not
+carry an invented or unofficial logo. Consumers of this package's
+`connector-index.json` render a deterministic monogram (the connector's
+initial(s) and a color derived from its name) as the correct default for
+that case — this is a normal, first-class fallback, not an error state.
diff --git a/apps/console/src/app/(console)/lib/connector-icons/sanitized-assets.json b/apps/console/src/app/(console)/lib/connector-icons/sanitized-assets.json
new file mode 100644
index 000000000..c78f24281
--- /dev/null
+++ b/apps/console/src/app/(console)/lib/connector-icons/sanitized-assets.json
@@ -0,0 +1,591 @@
+{
+ "repo": "PDP-Connect/data-connectors",
+ "revision": "23aee3aaeafad3a804d504e8614763f7845add60",
+ "entries": [
+ {
+ "background_color": "#FF9900",
+ "connector_key": "amazon",
+ "connector_id": "https://registry.pdpp.dev/connectors/amazon",
+ "display_name": "Amazon",
+ "path": "connectors/amazon/icon.svg",
+ "source_id": "https://registry.pdpp.dev/sources/amazon",
+ "svg": "Figma<\/title>/;
+
test("resolves a known brand by connector key (exact slug match)", async () => {
const icon = await resolveConnectorIconFromSimpleIcons("github");
assert.ok(icon);
@@ -28,3 +33,27 @@ test("returns null for an empty or blank connector key", async () => {
assert.equal(await resolveConnectorIconFromSimpleIcons(""), null);
assert.equal(await resolveConnectorIconFromSimpleIcons(" "), null);
});
+
+// Next's standalone tracer copies only the traced files (outputFileTracingIncludes
+// names data/simple-icons.json and icons/*.svg), never the package's own
+// package.json. The lookup must not require a file the build does not ship.
+test("resolves from a standalone-style layout that ships no package.json", async () => {
+ const source = join(process.cwd(), "..", "..", "node_modules", "simple-icons");
+ const root = mkdtempSync(join(tmpdir(), "standalone-layout-"));
+ const previous = process.cwd();
+ try {
+ const pkg = join(root, "node_modules", "simple-icons");
+ mkdirSync(join(pkg, "data"), { recursive: true });
+ mkdirSync(join(pkg, "icons"), { recursive: true });
+ cpSync(join(source, "data", "simple-icons.json"), join(pkg, "data", "simple-icons.json"));
+ cpSync(join(source, "icons", "figma.svg"), join(pkg, "icons", "figma.svg"));
+ mkdirSync(join(root, "apps", "console"), { recursive: true });
+ process.chdir(join(root, "apps", "console"));
+ const icon = await resolveConnectorIconFromSimpleIcons("figma");
+ assert.ok(icon, "a traced standalone package must still resolve");
+ assert.match(icon.svg ?? "", FIGMA_TITLE);
+ } finally {
+ process.chdir(previous);
+ rmSync(root, { force: true, recursive: true });
+ }
+});
diff --git a/apps/console/src/app/(console)/lib/resolve-connector-icon-simple-icons.ts b/apps/console/src/app/(console)/lib/resolve-connector-icon-simple-icons.ts
index e19463977..4a9a9cc4c 100644
--- a/apps/console/src/app/(console)/lib/resolve-connector-icon-simple-icons.ts
+++ b/apps/console/src/app/(console)/lib/resolve-connector-icon-simple-icons.ts
@@ -5,77 +5,79 @@ import { existsSync, readFileSync } from "node:fs";
import { readFile } from "node:fs/promises";
import { join } from "node:path";
import type { ConnectorIconLike } from "@pdpp/brand-react";
-import { sanitizeSvg } from "./sanitize-svg.ts";
+import { sanitizeSvg } from "@pdpp/brand-react/sanitize-svg";
/**
- * Icon-resolution LAYER 2: a vendored, offline lookup into the simple-icons
- * npm package (CC0-licensed SVG markup, ~3,300 brand icons), used only when
- * a connector's manifest declares no bundled icon of its own (layer 1 in
- * resolve-connector-icon-path.ts). This exists for connectors added AFTER
- * today's fix — every manifest currently shipped already has a bundled icon,
- * so layer 1 alone covers the reported bug.
+ * The `generic` layer of `pickDisplayMark` (resolve-manifest-display-mark.ts):
+ * an offline lookup into the installed simple-icons npm package (CC0-licensed
+ * SVG markup, ~3,400 brand icons), used only when neither the manifest nor
+ * the bundled corpus supplies a mark. This exists for connectors added AFTER
+ * the bundled corpus was generated.
*
* Offline/build-time only: this reads a file the npm package already
* installed on disk. It never fetches from a network at render time and
* never calls a third-party logo CDN (logo.dev and similar are explicitly
- * out of scope — see the manifests/icons NOTICE for why).
+ * out of scope — see the connector-icons NOTICE for the attribution terms).
*
* simple-icons' SVG markup is CC0 (public domain), but its LICENSE is
* explicit that CC0 does not waive trademark rights, and it runs a formal
* brand-owner takedown channel. Rendering one of its icons here is the same
- * nominative-fair-use posture as the vendored layer-1 icons: identification
- * only, no implied endorsement. See manifests/icons/NOTICE.md.
+ * nominative-fair-use posture as the bundled icons: identification only, no
+ * implied endorsement. See connector-icons/NOTICE.
*/
const PACKAGE_NAME = "simple-icons";
-const INSTALLED_PACKAGE_ROOT_CANDIDATES = [
- join(process.cwd(), "node_modules", PACKAGE_NAME),
- join(process.cwd(), "..", "..", "node_modules", PACKAGE_NAME),
-];
+/** What the lookup reads; the build's file tracer copies exactly these (next.config.mjs). */
+const SLUG_INDEX = join("data", "simple-icons.json");
interface SimpleIconEntry {
slug: string;
title: string;
}
-let cachedPackageRoot: string | null | undefined;
-let cachedSlugs: Set<string> | null | undefined;
+// Keyed by cwd, because the candidate roots are relative to it: Next's
+// standalone server.js chdirs into apps/console, and a test may chdir too.
+const packageRootByCwd = new Map<string, string | null>();
+const slugsByRoot = new Map<string, Set<string>>();
function resolvePackageRoot(): string | null {
- if (cachedPackageRoot !== undefined) {
- return cachedPackageRoot;
+ const cwd = process.cwd();
+ const cached = packageRootByCwd.get(cwd);
+ if (cached !== undefined) {
+ return cached;
}
- for (const candidate of INSTALLED_PACKAGE_ROOT_CANDIDATES) {
- if (existsSync(join(candidate, "package.json"))) {
- cachedPackageRoot = candidate;
- return candidate;
- }
- }
- cachedPackageRoot = null;
- return null;
+ const root =
+ [join(cwd, "node_modules", PACKAGE_NAME), join(cwd, "..", "..", "node_modules", PACKAGE_NAME)].find((candidate) =>
+ existsSync(join(candidate, SLUG_INDEX))
+ ) ?? null;
+ packageRootByCwd.set(cwd, root);
+ return root;
}
-/** The set of every valid simple-icons slug, loaded once and cached. */
+/** The set of every valid simple-icons slug, loaded once per package root and cached. */
function loadKnownSlugs(packageRoot: string): Set<string> {
- if (cachedSlugs !== undefined && cachedSlugs !== null) {
- return cachedSlugs;
+ const cached = slugsByRoot.get(packageRoot);
+ if (cached) {
+ return cached;
}
+ let slugs: Set<string>;
try {
- const raw = readFileSync(join(packageRoot, "data", "simple-icons.json"), "utf8");
- const entries = JSON.parse(raw) as SimpleIconEntry[];
- cachedSlugs = new Set(entries.map((entry) => entry.slug));
+ const raw = readFileSync(join(packageRoot, SLUG_INDEX), "utf8");
+ slugs = new Set((JSON.parse(raw) as SimpleIconEntry[]).map((entry) => entry.slug));
} catch {
- cachedSlugs = new Set();
+ slugs = new Set();
}
- return cachedSlugs;
+ slugsByRoot.set(packageRoot, slugs);
+ return slugs;
}
/**
* Normalize a connector key to the slug shape simple-icons uses: lowercase,
* digits and letters only. Matches simple-icons' own slug algorithm (a
* lowercased title with non-alphanumeric characters stripped), so this is a
- * direct lookup rather than a fuzzy guess — verified against every
- * currently-shipped connector key with no false positives.
+ * direct lookup rather than a fuzzy guess. Separators are dropped, so
+ * `foo-bar` and `foobar` name the same slug: a connector whose key only
+ * coincides with another brand's slug would show that brand's mark.
*/
function slugFromConnectorKey(connectorKey: string): string {
return connectorKey.toLowerCase().replace(/[^a-z0-9]/g, "");
@@ -86,7 +88,7 @@ function slugFromConnectorKey(connectorKey: string): string {
* connector key (e.g. "claude-code" -> slug "claudecode"). Returns null
* (never throws) when simple-icons is not installed, the key has no known
* slug match, the icon file is missing, or its content fails sanitizeSvg —
- * any of which falls through to the deterministic Monogram (layer 3).
+ * any of which falls through to the deterministic Monogram.
*/
export async function resolveConnectorIconFromSimpleIcons(connectorKey: string): Promise<ConnectorIconLike | null> {
if (typeof connectorKey !== "string" || connectorKey.trim().length === 0) {
@@ -97,7 +99,7 @@ export async function resolveConnectorIconFromSimpleIcons(connectorKey: string):
return null;
}
const slug = slugFromConnectorKey(connectorKey);
- if (!slug || !loadKnownSlugs(packageRoot).has(slug)) {
+ if (!(slug && loadKnownSlugs(packageRoot).has(slug))) {
return null;
}
let raw: string;
diff --git a/apps/console/src/app/(console)/lib/resolve-connector-icon.test.ts b/apps/console/src/app/(console)/lib/resolve-connector-icon.test.ts
index 888cf2a41..8effedfca 100644
--- a/apps/console/src/app/(console)/lib/resolve-connector-icon.test.ts
+++ b/apps/console/src/app/(console)/lib/resolve-connector-icon.test.ts
@@ -2,19 +2,163 @@
// SPDX-License-Identifier: Apache-2.0
import assert from "node:assert/strict";
+import { readdirSync, readFileSync } from "node:fs";
+import path from "node:path";
import test from "node:test";
-import { resolveConnectorIcon } from "./resolve-connector-icon.ts";
+import { fileURLToPath } from "node:url";
+import postcss from "postcss";
+import React, { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import ts from "typescript";
+import { ConnectorMark } from "../components/connector-mark.tsx";
+import { connectorIconIdentityKeys } from "./connector-icon-identity.ts";
+import corpus from "./connector-icons/sanitized-assets.json" with { type: "json" };
+import { resolveConnectorIcon, resolveSourceIcon } from "./resolve-connector-icon.ts";
-test("resolveConnectorIcon accepts a non-empty inline SVG", () => {
+// The repository test harness transpiles source JSX with the classic runtime.
+Object.assign(globalThis, { React });
+
+test("resolveConnectorIcon resolves every bundled mark by connector key and stable registry ID", () => {
+ for (const entry of corpus.entries) {
+ const byKey = resolveConnectorIcon(entry.connector_key);
+ const byId = resolveConnectorIcon(entry.connector_id);
+ assert.equal(byKey?.kind, "inline_svg", entry.connector_key);
+ assert.equal(byId?.kind, "inline_svg", entry.connector_id);
+ assert.equal(byKey?.svg, entry.svg, entry.connector_key);
+ assert.equal(byId?.svg, entry.svg, entry.connector_id);
+ }
+});
+
+test("known connector key aliases accept underscore and hyphen spellings", () => {
+ const hyphen = resolveConnectorIcon("apple-contacts");
+ assert.ok(hyphen);
+ assert.equal(resolveConnectorIcon("apple_contacts")?.svg, hyphen.svg);
+});
+
+test("safe supplied icon wins and unsafe SVG falls back to the genuine bundled mark", () => {
+ const custom = { kind: "inline_svg" as const, svg: '<svg viewBox="0 0 1 1"><path d="M0 0" /></svg>' };
+ assert.equal(resolveConnectorIcon("amazon", custom)?.svg, custom.svg);
+ const unsafe = { kind: "inline_svg" as const, svg: '<svg onload="alert(1)"><path d="M0 0" /></svg>' };
+ assert.equal(resolveConnectorIcon("amazon", unsafe)?.svg, resolveConnectorIcon("amazon")?.svg);
+});
+
+test("unknown IDs and arbitrary registry origins do not borrow a mark by basename", () => {
+ assert.equal(resolveConnectorIcon("not-a-known-connector"), null);
+ assert.equal(resolveConnectorIcon("https://attacker.example/connectors/amazon"), null);
+ assert.equal(resolveConnectorIcon(""), null);
+});
+
+test("ConnectorMark SSR uses stable connector identity when no optional icon was supplied", () => {
+ const markup = renderToStaticMarkup(
+ createElement(ConnectorMark, { connectorId: "amazon", name: "Custom account label" })
+ );
+ assert.ok(markup.includes("<svg"));
+ assert.ok(markup.includes('viewBox="0 0 24 24"'));
+ assert.equal(markup.includes("Custom account label"), false);
+});
+
+test("ConnectorMark keeps the genuine initials fallback for an unknown connector ID", () => {
+ const markup = renderToStaticMarkup(
+ createElement(ConnectorMark, { connectorId: "unknown-connector", name: "Example Source" })
+ );
+ assert.equal(markup.includes("<svg"), false);
+ assert.ok(markup.includes('data-initials="ES"'));
+});
+
+test("preserves first-party registry aliases without borrowing brands from unrelated URLs", () => {
assert.deepEqual(
- resolveConnectorIcon({ color: "#111", kind: "inline_svg", svg: " <svg /> " }),
- { color: "#111", kind: "inline_svg", svg: "<svg />" }
+ resolveConnectorIcon("https://registry.pdpp.dev/connectors/apple_contacts/"),
+ resolveConnectorIcon("apple-contacts")
+ );
+ assert.equal(resolveConnectorIcon("https://unrelated.example/connectors/apple-contacts"), null);
+});
+
+test("Core source display uses declared provenance without conflating connector identity", () => {
+ const sourceId = corpus.entries.find((entry) => entry.connector_key === "amazon")?.source_id;
+ assert.ok(sourceId);
+ const connector = resolveConnectorIcon("amazon");
+ assert.deepEqual(resolveSourceIcon(sourceId), connector);
+ assert.equal(resolveConnectorIcon(sourceId), null, "Core source identity is not an operational connector ID");
+ assert.equal(resolveSourceIcon("https://unrelated.example/sources/amazon"), null);
+ const markup = renderToStaticMarkup(createElement(ConnectorMark, { sourceId, name: "Personal source" }));
+ assert.ok(markup.includes("<svg"));
+});
+
+test("non-hierarchical URI identities never acquire local-key aliases", () => {
+ const underscored = "urn:vendor:foo_bar";
+ const hyphenated = "urn:vendor:foo-bar";
+ assert.equal(new URL(underscored).protocol, "urn:");
+ assert.deepEqual(connectorIconIdentityKeys(underscored), [underscored]);
+ assert.deepEqual(connectorIconIdentityKeys(hyphenated), [hyphenated]);
+});
+
+const SOURCE_FILE = /\.(?:[cm]?[jt]s|[jt]sx)$/u;
+
+// Geometry is a product-wide renderer decision. Parsing every caller catches
+// future pages too; a snapshot of today's two reported rows would miss them.
+test("product connector marks cannot bypass shared geometry through local rendering or CSS", () => {
+ const root = fileURLToPath(new URL("../../../", import.meta.url));
+ const wrapper = path.join("app", "(console)", "components", "connector-mark.tsx");
+ const violations: string[] = [];
+ for (const relative of readdirSync(root, { recursive: true })) {
+ if (typeof relative !== "string" || relative.includes(".test.")) {
+ continue;
+ }
+ const filename = path.join(root, relative);
+ if (relative.endsWith(".css")) {
+ postcss.parse(readFileSync(filename, "utf8")).walkRules((rule) => {
+ if (rule.selector.includes(".pdpp-connector-icon")) {
+ violations.push(`${relative}: icon CSS belongs to the shared renderer`);
+ }
+ });
+ continue;
+ }
+ if (!SOURCE_FILE.test(relative) || relative === wrapper) {
+ continue;
+ }
+ const source = ts.createSourceFile(
+ filename,
+ readFileSync(filename, "utf8"),
+ ts.ScriptTarget.Latest,
+ true,
+ ts.ScriptKind.TSX
+ );
+ for (const statement of source.statements) {
+ if (!ts.isImportDeclaration(statement)) {
+ continue;
+ }
+ const bindings = statement.importClause?.namedBindings;
+ if (
+ bindings &&
+ ts.isNamedImports(bindings) &&
+ bindings.elements.some((binding) => (binding.propertyName ?? binding.name).text === "ConnectorIcon")
+ ) {
+ violations.push(`${relative}: render ConnectorMark instead of importing ConnectorIcon`);
+ }
+ }
+ }
+ assert.deepEqual(violations, []);
+});
+
+test("product connector mark API reserves geometry and exposes only text spacing", () => {
+ type Overrides = Extract<keyof Parameters<typeof ConnectorMark>[0], "className" | "style" | "size">;
+ const acceptsNoGeometryOverrides: Overrides extends never ? true : false = true;
+ assert.equal(acceptsNoGeometryOverrides, true);
+ const markup = renderToStaticMarkup(
+ createElement(ConnectorMark, { connectorId: "claude-code", name: "Account", spacing: "after" })
);
+ assert.ok(markup.includes('class="pdpp-connector-icon mr-2"'));
});
-test("resolveConnectorIcon returns null for a missing or unusable mark", () => {
- assert.equal(resolveConnectorIcon(null), null);
- assert.equal(resolveConnectorIcon(undefined), null);
- assert.equal(resolveConnectorIcon({ kind: "inline_svg", svg: " " }), null);
- assert.equal(resolveConnectorIcon({ kind: "external_url", svg: "https://example.test/logo.svg" }), null);
+test("no two bundled connectors answer to the same identity with different marks", () => {
+ const owners = new Map<string, string>();
+ for (const entry of corpus.entries) {
+ for (const identity of [entry.connector_id, entry.connector_key]) {
+ for (const key of connectorIconIdentityKeys(identity)) {
+ const previous = owners.get(key);
+ assert.ok(previous === undefined || previous === entry.connector_key, `${key} is claimed by ${previous} and ${entry.connector_key}`);
+ owners.set(key, entry.connector_key);
+ }
+ }
+ }
});
diff --git a/apps/console/src/app/(console)/lib/resolve-connector-icon.ts b/apps/console/src/app/(console)/lib/resolve-connector-icon.ts
index 42a5f1eb6..ef84a8812 100644
--- a/apps/console/src/app/(console)/lib/resolve-connector-icon.ts
+++ b/apps/console/src/app/(console)/lib/resolve-connector-icon.ts
@@ -2,23 +2,147 @@
// SPDX-License-Identifier: Apache-2.0
import type { ConnectorIconLike } from "@pdpp/brand-react";
+import { hexColorOrNull } from "@pdpp/brand-react/hex-color";
+import { sanitizeSvg } from "@pdpp/brand-react/sanitize-svg";
+import { connectorIconIdentityKeys } from "./connector-icon-identity.ts";
+import iconCorpus from "./connector-icons/sanitized-assets.json" with { type: "json" };
+
+type CorpusEntry = (typeof iconCorpus.entries)[number];
+
+/** Validate an SVG mark at the shared display boundary. */
+export function validatedConnectorIcon(
+ icon: ConnectorIconLike | null | undefined,
+ declaredBackground?: string | null
+): ConnectorIconLike | null {
+ if (icon?.kind !== "inline_svg" || typeof icon.svg !== "string") {
+ return null;
+ }
+ const svg = sanitizeSvg(icon.svg);
+ if (!svg) {
+ return null;
+ }
+ const color = hexColorOrNull(icon.color);
+ const backgroundColor = hexColorOrNull(icon.backgroundColor ?? declaredBackground);
+ return { ...(color ? { color } : {}), ...(backgroundColor ? { backgroundColor } : {}), kind: "inline_svg", svg };
+}
+
+function corpusIcon(entry: CorpusEntry): ConnectorIconLike | null {
+ return validatedConnectorIcon({ backgroundColor: entry.background_color, kind: "inline_svg", svg: entry.svg });
+}
+
+const BUNDLED_ICONS_BY_IDENTITY = new Map<string, ConnectorIconLike>();
+const BUNDLED_ICONS_BY_SOURCE = new Map<string, ConnectorIconLike | null>();
+for (const entry of iconCorpus.entries) {
+ const icon = corpusIcon(entry);
+ if (!icon) {
+ continue;
+ }
+ if (entry.source_id) {
+ const previous = BUNDLED_ICONS_BY_SOURCE.get(entry.source_id);
+ const conflicts =
+ previous !== undefined &&
+ (previous === null || previous.svg !== icon.svg || previous.backgroundColor !== icon.backgroundColor);
+ BUNDLED_ICONS_BY_SOURCE.set(entry.source_id, conflicts ? null : icon);
+ }
+ for (const identity of [entry.connector_id, entry.connector_key]) {
+ for (const key of connectorIconIdentityKeys(identity)) {
+ BUNDLED_ICONS_BY_IDENTITY.set(key, icon);
+ }
+ }
+}
+
+/** A copy of the bundled corpus indexed by every accepted identity spelling, for callers that layer it. */
+export function bundledIconIdentities(): Map<string, ConnectorIconLike> {
+ return new Map(BUNDLED_ICONS_BY_IDENTITY);
+}
+
+/** Resolve an explicit safe icon first, then a bundled mark for the exact connector identity. */
+export function resolveConnectorIcon(
+ connectorId: string,
+ icon?: ConnectorIconLike | null,
+ declaredBackground?: string | null
+): ConnectorIconLike | null {
+ const supplied = validatedConnectorIcon(icon, declaredBackground);
+ if (supplied) {
+ return supplied;
+ }
+ for (const key of connectorIconIdentityKeys(connectorId)) {
+ const bundled = BUNDLED_ICONS_BY_IDENTITY.get(key);
+ if (bundled) {
+ return bundled;
+ }
+ }
+ return null;
+}
+
+const conflictedKeysByLayer = new WeakMap<Map<string, ConnectorIconLike>, Set<string>>();
+
+function sameMark(left: ConnectorIconLike, right: ConnectorIconLike): boolean {
+ return left.svg === right.svg && left.color === right.color && left.backgroundColor === right.backgroundColor;
+}
/**
- * Resolve the one icon shape shared by manifests, owner templates, and view
- * models. Invalid or absent marks intentionally return null so the shared
- * ConnectorMark can render the design-system monogram fallback.
- *
- * Manifests declare their brand glyph as a relative path string
- * (`brand.icon`, e.g. "icons/amazon.svg"), not inline markup. This
- * validator only ever sees the `inline_svg` shape because
- * resolve-connector-icon-path.ts (server-only) resolves that path to
- * sanitized SVG content in listConnectorManifests(), before the manifest
- * reaches this file — which is imported by connector-mark.tsx, a "use
- * client" component, and so must never itself touch the filesystem.
+ * Add a resolved mark under every accepted explicit connector spelling.
+ * Two different marks claiming one spelling in the same layer (for example
+ * `foo_bar` and `foo-bar`) is ambiguous: neither wins, the spelling gets no
+ * mark from this layer, and the collision is logged once.
*/
-export function resolveConnectorIcon(icon: ConnectorIconLike | null | undefined): ConnectorIconLike | null {
- if (icon?.kind !== "inline_svg" || typeof icon.svg !== "string" || icon.svg.trim().length === 0) {
- return null;
+export function indexConnectorIcon(
+ icons: Map<string, ConnectorIconLike>,
+ connectorIds: readonly (string | null | undefined)[],
+ icon: ConnectorIconLike | null
+): void {
+ if (!icon) {
+ return;
+ }
+ let conflicted = conflictedKeysByLayer.get(icons);
+ for (const connectorId of connectorIds) {
+ if (!connectorId) {
+ continue;
+ }
+ for (const key of connectorIconIdentityKeys(connectorId)) {
+ const existing = icons.get(key);
+ if (conflicted?.has(key)) {
+ continue;
+ }
+ if (existing && !sameMark(existing, icon)) {
+ conflicted ??= new Set();
+ conflictedKeysByLayer.set(icons, conflicted);
+ conflicted.add(key);
+ icons.delete(key);
+ console.warn(
+ `Connector icon identity "${key}" is claimed by two different marks in one layer; showing neither.`
+ );
+ continue;
+ }
+ icons.set(key, icon);
+ }
+ }
+}
+
+/** True when a map already contains a mark for one of these exact identities or spellings. */
+export function hasConnectorIcon(
+ icons: ReadonlyMap<string, ConnectorIconLike>,
+ connectorIds: readonly (string | null | undefined)[]
+): boolean {
+ return connectorIds.some(
+ (connectorId) => connectorId && connectorIconIdentityKeys(connectorId).some((key) => icons.has(key))
+ );
+}
+
+/** Core source IDs stay separate from connector IDs. This display-only lookup
+ * uses declared source provenance first. Only when no corpus entry declares
+ * the ID does it try an EXACT connector identity (key or canonical ID) for
+ * records that carry the connector key as their source ID; it never matches
+ * a partial or case-folded name. A source ID whose declarations conflict
+ * resolves to no brand, and is deliberately not rescued by that fallback. */
+export function resolveSourceIcon(sourceId: string, icon?: ConnectorIconLike | null): ConnectorIconLike | null {
+ const supplied = validatedConnectorIcon(icon);
+ if (supplied) {
+ return supplied;
+ }
+ if (BUNDLED_ICONS_BY_SOURCE.has(sourceId)) {
+ return BUNDLED_ICONS_BY_SOURCE.get(sourceId) ?? null;
}
- return { ...icon, svg: icon.svg.trim() };
+ return BUNDLED_ICONS_BY_IDENTITY.get(sourceId) ?? null;
}
diff --git a/apps/console/src/app/(console)/lib/resolve-manifest-display-mark.test.ts b/apps/console/src/app/(console)/lib/resolve-manifest-display-mark.test.ts
new file mode 100644
index 000000000..12a1897ee
--- /dev/null
+++ b/apps/console/src/app/(console)/lib/resolve-manifest-display-mark.test.ts
@@ -0,0 +1,106 @@
+// Copyright The PDP-Connect Contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import assert from "node:assert/strict";
+import { mkdir, mkdtemp, rm, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import test from "node:test";
+import { resolveManifestDisplayMark } from "./resolve-manifest-display-mark.ts";
+
+const WHITE_GLYPH = '<svg viewBox="0 0 24 24" fill="#FFFFFF"><path d="M1 2h20v20z"/></svg>';
+const INLINE_GLYPH = '<svg viewBox="0 0 24 24"><path d="M3 3h18v18z"/></svg>';
+
+async function withDir(run: (dir: string) => Promise<void>): Promise<void> {
+ const dir = await mkdtemp(join(tmpdir(), "display-mark-"));
+ try {
+ await mkdir(join(dir, "icons"));
+ await writeFile(join(dir, "icons", "white.svg"), WHITE_GLYPH);
+ await run(dir);
+ } finally {
+ await rm(dir, { force: true, recursive: true });
+ }
+}
+
+test("a path-resolved glyph takes the declared brand backdrop", async () => {
+ await withDir(async (dir) => {
+ const mark = await resolveManifestDisplayMark(
+ { brand: { background_color: "#FF9900", icon: "icons/white.svg" }, connector_id: "zz-new", connector_key: "zz-new" },
+ dir
+ );
+ assert.deepEqual(mark, {
+ icon: { backgroundColor: "#FF9900", kind: "inline_svg", svg: WHITE_GLYPH },
+ source: "manifest",
+ });
+ });
+});
+
+test("an inline mark wins over brand.icon, and its own backdrop wins over the declared one", async () => {
+ await withDir(async (dir) => {
+ const mark = await resolveManifestDisplayMark(
+ {
+ brand: { background_color: "#FF9900", icon: "icons/white.svg" },
+ connector_id: "zz-new",
+ icon: { backgroundColor: "#112233", kind: "inline_svg", svg: INLINE_GLYPH },
+ },
+ dir
+ );
+ assert.deepEqual(mark.icon, { backgroundColor: "#112233", kind: "inline_svg", svg: INLINE_GLYPH });
+ const declaredOnly = await resolveManifestDisplayMark(
+ { brand: { background_color: "#FF9900" }, connector_id: "zz-new", icon: { kind: "inline_svg", svg: INLINE_GLYPH } },
+ dir
+ );
+ assert.equal(declaredOnly.icon?.backgroundColor, "#FF9900");
+ });
+});
+
+test("a declared backdrop that is not a six-digit hex colour is dropped", async () => {
+ await withDir(async (dir) => {
+ const mark = await resolveManifestDisplayMark(
+ { brand: { background_color: "url(javascript:0)", icon: "icons/white.svg" }, connector_id: "zz-new" },
+ dir
+ );
+ assert.equal(mark.icon?.backgroundColor, undefined);
+ assert.equal(mark.icon?.svg, WHITE_GLYPH);
+ });
+});
+
+test("without an own mark, the bundled mark for the identity is used with its own backdrop", async () => {
+ await withDir(async (dir) => {
+ const mark = await resolveManifestDisplayMark(
+ { brand: { background_color: "#000001" }, connector_id: "https://registry.pdpp.dev/connectors/amazon", connector_key: "amazon" },
+ dir
+ );
+ assert.equal(mark.source, "bundled");
+ assert.equal(mark.icon?.backgroundColor, "#FF9900");
+ });
+});
+
+test("a bundled mark outranks the generic simple-icons mark for the same key", async () => {
+ await withDir(async (dir) => {
+ const mark = await resolveManifestDisplayMark({ connector_id: "github", connector_key: "github" }, dir);
+ assert.equal(mark.source, "bundled");
+ });
+});
+
+test("simple-icons is used only when nothing else matches, and nothing leaves the monogram", async () => {
+ await withDir(async (dir) => {
+ const generic = await resolveManifestDisplayMark({ connector_id: "figma", connector_key: "figma" }, dir);
+ assert.equal(generic.source, "simple-icons");
+ assert.ok(generic.icon?.svg);
+ assert.deepEqual(await resolveManifestDisplayMark({ connector_id: "zz-unknown" }, dir), {
+ icon: null,
+ source: undefined,
+ });
+ });
+});
+
+test("an unreadable brand.icon falls through to the bundled mark", async () => {
+ await withDir(async (dir) => {
+ const mark = await resolveManifestDisplayMark(
+ { brand: { icon: "icons/missing.svg" }, connector_id: "amazon", connector_key: "amazon" },
+ dir
+ );
+ assert.equal(mark.source, "bundled");
+ });
+});
diff --git a/apps/console/src/app/(console)/lib/resolve-manifest-display-mark.ts b/apps/console/src/app/(console)/lib/resolve-manifest-display-mark.ts
new file mode 100644
index 000000000..239f63308
--- /dev/null
+++ b/apps/console/src/app/(console)/lib/resolve-manifest-display-mark.ts
@@ -0,0 +1,83 @@
+// Copyright The PDP-Connect Contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ConnectorIconLike } from "@pdpp/brand-react";
+import { resolveConnectorIcon, validatedConnectorIcon } from "./resolve-connector-icon.ts";
+import { resolveConnectorIconFromManifestPath } from "./resolve-connector-icon-path.ts";
+import { resolveConnectorIconFromSimpleIcons } from "./resolve-connector-icon-simple-icons.ts";
+import type { ConnectorManifest } from "./rs-client.ts";
+
+type DisplayMarkSource = NonNullable<ConnectorManifest["resolvedIconSource"]>;
+
+/** Where a candidate display mark came from, strongest first. */
+export interface DisplayMarkLayers {
+ /** The mark the manifest itself owns: its inline `icon` or its `brand.icon` file. */
+ readonly manifest?: ConnectorIconLike | null;
+ /** The mark the server projected on the owner connector template. */
+ readonly template?: ConnectorIconLike | null;
+ /** The bundled mark for the connector identity (`sanitized-assets.json`). */
+ readonly bundled?: ConnectorIconLike | null;
+ /** The offline simple-icons mark for `connector_key`. */
+ readonly generic?: ConnectorIconLike | null;
+}
+
+const DISPLAY_MARK_ORDER = ["manifest", "template", "bundled", "generic"] as const;
+
+/**
+ * The one precedence rule for a connector's display mark, first hit wins:
+ * 1. `manifest`: a mark the manifest owns;
+ * 2. `template`: the server-projected template mark, used when the console
+ * has no manifest mark of its own (the server copy is not normalized);
+ * 3. `bundled`: the shipped mark for the connector identity;
+ * 4. `generic`: the offline simple-icons mark;
+ * 5. nothing, which renders the deterministic monogram.
+ * Every surface reaches a mark through this function, so no two surfaces can
+ * order the same layers differently.
+ */
+export function pickDisplayMark<L extends keyof DisplayMarkLayers>(
+ layers: Pick<DisplayMarkLayers, L>
+): { icon: ConnectorIconLike | null; layer: L | undefined } {
+ // `layers` holds only the keys the caller supplied, so a layer the caller
+ // never passes can never be reported as the source.
+ const supplied: DisplayMarkLayers = layers;
+ for (const layer of DISPLAY_MARK_ORDER) {
+ const icon = supplied[layer];
+ if (icon) {
+ return { icon, layer: layer as L };
+ }
+ }
+ return { icon: null, layer: undefined };
+}
+
+/**
+ * The one place a connector manifest becomes a display mark: sanitized SVG, a
+ * validated backdrop, and where it came from. Every surface renders the result
+ * (`ConnectorManifest.icon`) as is, so none of them re-derives a backdrop.
+ * Layers are ordered by `pickDisplayMark`; a manifest alone has no template.
+ * Marks from the manifest take their backdrop from the mark itself, else from
+ * `brand.background_color`. Bundled and simple-icons marks carry their own.
+ */
+export async function resolveManifestDisplayMark(
+ manifest: Pick<ConnectorManifest, "brand" | "connector_id" | "connector_key" | "icon">,
+ manifestsDir: string
+): Promise<{ icon: ConnectorIconLike | null; source: DisplayMarkSource | undefined }> {
+ const declaredBackground = manifest.brand?.background_color;
+ const inline = validatedConnectorIcon(manifest.icon, declaredBackground);
+ const fromPath =
+ !inline && manifest.brand?.icon
+ ? validatedConnectorIcon(
+ await resolveConnectorIconFromManifestPath(manifestsDir, manifest.brand.icon),
+ declaredBackground
+ )
+ : null;
+ const owned = inline ?? fromPath;
+ const bundled =
+ resolveConnectorIcon(manifest.connector_id) ??
+ (manifest.connector_key ? resolveConnectorIcon(manifest.connector_key) : null);
+ const generic =
+ !(owned || bundled) && manifest.connector_key
+ ? await resolveConnectorIconFromSimpleIcons(manifest.connector_key)
+ : null;
+ const { icon, layer } = pickDisplayMark({ bundled, generic, manifest: owned });
+ return { icon, source: layer === "generic" ? "simple-icons" : layer };
+}
diff --git a/apps/console/src/app/(console)/lib/rs-client.ts b/apps/console/src/app/(console)/lib/rs-client.ts
index 3b182ac07..dccb2454d 100644
--- a/apps/console/src/app/(console)/lib/rs-client.ts
+++ b/apps/console/src/app/(console)/lib/rs-client.ts
@@ -16,12 +16,11 @@
*/
import { readdir, readFile } from "node:fs/promises";
import { join } from "node:path";
+import type { ConnectorIconLike } from "@pdpp/brand-react";
import { findManifestForConnectorId } from "../sources/lib/relationships.ts";
import type { OwnerConnectorTemplateLike } from "./connection-catalog.ts";
import { resolveInstalledConnectorManifestsDir } from "./connector-manifests-dir.ts";
import { isActiveConnectorRunSummaryStatus } from "./connector-run-summary-status.ts";
-import { resolveConnectorIconFromManifestPath } from "./resolve-connector-icon-path.ts";
-import { resolveConnectorIconFromSimpleIcons } from "./resolve-connector-icon-simple-icons.ts";
import {
getOwnerToken,
getRsInternalUrl,
@@ -29,6 +28,7 @@ import {
ResourceServerHttpError,
} from "./owner-token.ts";
import { type CanonicalReadWarning, extractReadWarnings } from "./read-envelope.ts";
+import { resolveManifestDisplayMark } from "./resolve-manifest-display-mark.ts";
import type {
RefAcquisitionCoverageSummary,
RefCollectionReportEntry,
@@ -171,11 +171,9 @@ export interface ConnectorManifest {
connector_key?: string;
display_name?: string;
/** Optional manifest-declared brand glyph; absent renders the Monogram fallback (see ConnectorIcon). */
- icon?: {
- color?: string | null;
- kind?: string | null;
- svg?: string | null;
- } | null;
+ icon?: ConnectorIconLike | null;
+ /** Server-side enrichment provenance; never read from or written to a manifest. */
+ resolvedIconSource?: "manifest" | "bundled" | "simple-icons";
/**
* Shipped manifests declare their brand glyph here as a relative path
* under the connector-manifests directory (e.g. "icons/amazon.svg"), not
@@ -184,6 +182,7 @@ export interface ConnectorManifest {
* single `icon` (inline_svg) shape.
*/
brand?: {
+ background_color?: string | null;
icon?: string | null;
} | null;
name?: string;
@@ -817,21 +816,11 @@ export async function listConnectorManifests(): Promise<ConnectorManifest[]> {
try {
const raw = await readFile(join(dir, file), "utf8");
const manifest = JSON.parse(raw) as ConnectorManifest;
- // Three-layer icon resolution (first hit wins), so every reader
- // downstream keeps consuming the single `icon` (inline_svg) shape it
- // already knows:
- // 1. Bundled: the manifest's own `brand.icon` relative path (e.g.
- // "icons/amazon.svg"), shipped with every connector today.
- // 2. Vendored: a same-slug lookup into the offline simple-icons
- // corpus, for a connector added later with no bundled icon.
- // 3. Deterministic Monogram — @pdpp/brand-react's ConnectorIcon
- // fallback when `icon` is left unset here.
- if (!manifest.icon && manifest.brand?.icon) {
- manifest.icon = await resolveConnectorIconFromManifestPath(dir, manifest.brand.icon);
- }
- if (!manifest.icon && manifest.connector_key) {
- manifest.icon = await resolveConnectorIconFromSimpleIcons(manifest.connector_key);
- }
+ // `icon` leaves here as the one display mark every surface renders
+ // (sanitized SVG, validated backdrop); see resolveManifestDisplayMark.
+ const mark = await resolveManifestDisplayMark(manifest, dir);
+ manifest.icon = mark.icon;
+ manifest.resolvedIconSource = mark.source;
return manifest;
} catch {
return null;
diff --git a/apps/console/src/app/(console)/lib/sanitize-svg.test.ts b/apps/console/src/app/(console)/lib/sanitize-svg.test.ts
deleted file mode 100644
index 0611e4d34..000000000
--- a/apps/console/src/app/(console)/lib/sanitize-svg.test.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-// Copyright The PDP-Connect Contributors
-// SPDX-License-Identifier: Apache-2.0
-
-import assert from "node:assert/strict";
-import test from "node:test";
-import { sanitizeSvg } from "./sanitize-svg.ts";
-
-test("accepts a minimal bare svg", () => {
- assert.equal(sanitizeSvg('<svg viewBox="0 0 24 24"><path d="M1 2" /></svg>'), '<svg viewBox="0 0 24 24"><path d="M1 2" /></svg>');
-});
-
-test("accepts our shipped-manifest shape (aria-hidden, fill on root)", () => {
- const svg = '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M1 2" /></svg>';
- assert.equal(sanitizeSvg(svg), svg);
-});
-
-test("accepts the simple-icons shape (role, title)", () => {
- const svg = '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub x
${" `;
- assert.equal(sanitizeSvg(huge), null);
-});
diff --git a/apps/console/src/app/(console)/schedules/schedule-row.tsx b/apps/console/src/app/(console)/schedules/schedule-row.tsx
index 827606dc7..6d534bce8 100644
--- a/apps/console/src/app/(console)/schedules/schedule-row.tsx
+++ b/apps/console/src/app/(console)/schedules/schedule-row.tsx
@@ -261,7 +261,7 @@ export function ScheduleRow({ connectorIcon, summary, runsHref }: ScheduleRowPro
className="pdpp-body relative font-medium text-foreground before:absolute before:-inset-3 before:content-[''] hover:underline"
href={recordsHref}
>
- {connectorKey}
diff --git a/apps/console/src/app/(console)/sources/[connector]/[stream]/[recordKey]/page.tsx b/apps/console/src/app/(console)/sources/[connector]/[stream]/[recordKey]/page.tsx
index db67a791a..45eab3890 100644
--- a/apps/console/src/app/(console)/sources/[connector]/[stream]/[recordKey]/page.tsx
+++ b/apps/console/src/app/(console)/sources/[connector]/[stream]/[recordKey]/page.tsx
@@ -239,7 +239,7 @@ export default async function RecordDetailPage({
description={
<>
- {sourceLabel}
{ts.label}
- Source {sourceLabel}
}
@@ -283,11 +287,13 @@ function StreamHealthReport({
// to the records segment error boundary.
function StreamHealthUnavailable({
connectionId,
+ connectorId,
connectorIcon,
sourceLabel,
streamName,
}: {
connectionId: string;
+ connectorId: string;
connectorIcon: ConnectorManifest["icon"];
sourceLabel: string;
streamName: string;
@@ -303,7 +309,7 @@ function StreamHealthUnavailable({
]}
description={
- Source {sourceLabel}
}
diff --git a/apps/console/src/app/(console)/sources/[connector]/[stream]/page.tsx b/apps/console/src/app/(console)/sources/[connector]/[stream]/page.tsx
index a3bb1cbc4..e5c3a54fc 100644
--- a/apps/console/src/app/(console)/sources/[connector]/[stream]/page.tsx
+++ b/apps/console/src/app/(console)/sources/[connector]/[stream]/page.tsx
@@ -457,7 +457,7 @@ export default async function StreamPage({
count={headerCount}
description={
-
Source {sourceLabel}
diff --git a/apps/console/src/app/(console)/sources/[connector]/page.tsx b/apps/console/src/app/(console)/sources/[connector]/page.tsx
index b653295bc..fec3f69c5 100644
--- a/apps/console/src/app/(console)/sources/[connector]/page.tsx
+++ b/apps/console/src/app/(console)/sources/[connector]/page.tsx
@@ -846,7 +846,7 @@ function ConnectorPageView({
}
title={
-
>;
+ let connectorIcons: Awaited>;
let page: Awaited>;
try {
- const [pageResult, connectorManifests] = await Promise.all([fetchSourcesPage(pageState), listConnectorManifests()]);
+ const [pageResult, connectorManifests] = await Promise.all([
+ fetchSourcesPage(pageState),
+ listConnectorManifests(),
+ ]);
page = pageResult;
manifests = connectorManifests;
+ connectorIcons = await buildConnectorIconMap(manifests, []);
} catch (err) {
if (err instanceof ReferenceServerUnreachableError) {
return (
@@ -145,7 +151,7 @@ export default async function RecordsIndexPage({
const summaries = [...page.items];
const runtimeAdvisory: SourcesRuntimeAdvisory | null = buildSourcesRuntimeAdvisory(page.runtime);
- const instances = toSourcesView(summaries, { manifests });
+ const instances = toSourcesView(summaries, { connectorIcons, manifests });
// The poller is mounted unconditionally; `running` (derived from any active
// run) only selects the fast vs. idle cadence. Named `runningCount` to match
// the records-poller mount invariant.
diff --git a/apps/console/src/app/(console)/sources/sources-view-model.ts b/apps/console/src/app/(console)/sources/sources-view-model.ts
index 548cf568d..f638a255d 100644
--- a/apps/console/src/app/(console)/sources/sources-view-model.ts
+++ b/apps/console/src/app/(console)/sources/sources-view-model.ts
@@ -28,6 +28,7 @@
*/
import type { FusedSourceStatus, StreamManifestEntry } from "@pdpp/display";
+import type { ConnectorIconLike } from "@pdpp/brand-react";
import {
deriveSourceDisplayNameFallback,
formatConnectorNameForDisplay,
@@ -593,7 +594,11 @@ function sourceScopeForSummary(summary: RefConnectorSummary, revoked: boolean):
export function toSourceInstanceView(
summary: RefConnectorSummary,
- options: { fallbackDisambiguator?: string | null; manifests?: readonly SourceManifestLike[] } = {}
+ options: {
+ connectorIcons?: Readonly>;
+ fallbackDisambiguator?: string | null;
+ manifests?: readonly SourceManifestLike[];
+ } = {}
): SourceInstanceView {
const connectorId = summary.connector_id;
const connectionId = summary.connection_id;
@@ -727,7 +732,7 @@ export function toSourceInstanceView(
connectorNotInstalled,
detailHref: sourceDetailHrefFor(routeId, summary),
displayName,
- icon: manifest?.icon ?? null,
+ icon: options.connectorIcons?.[connectorId] ?? manifest?.icon ?? null,
id: routeId,
sourceScope,
isLocalDevicePush,
@@ -874,7 +879,10 @@ export function collapseSetupFailedSources(instances: readonly SourceInstanceVie
*/
export function toSourcesView(
summaries: RefConnectorSummary[],
- options: { manifests?: readonly SourceManifestLike[] } = {}
+ options: {
+ connectorIcons?: Readonly>;
+ manifests?: readonly SourceManifestLike[];
+ } = {}
): SourceInstanceView[] {
const visibleSummaries = summaries;
const fallbackCountByConnector = new Map();
diff --git a/apps/console/src/app/(console)/sources/sources-view.css b/apps/console/src/app/(console)/sources/sources-view.css
index 7fd98d1b4..5582350b8 100644
--- a/apps/console/src/app/(console)/sources/sources-view.css
+++ b/apps/console/src/app/(console)/sources/sources-view.css
@@ -75,10 +75,6 @@ a.rr-s-item {
min-width: 0;
}
-.rr-s-item__icon {
- flex-shrink: 0;
-}
-
.rr-s-item__name {
/* The bold human name is the clear primary identity on row 1. */
overflow: hidden;
diff --git a/apps/console/src/app/(console)/sources/sources-view.tsx b/apps/console/src/app/(console)/sources/sources-view.tsx
index e024d5559..458e0a489 100644
--- a/apps/console/src/app/(console)/sources/sources-view.tsx
+++ b/apps/console/src/app/(console)/sources/sources-view.tsx
@@ -394,7 +394,7 @@ function InstanceListItem({
const inner = (
<>
- {instance.displayName}
{/* Keep list rows comparable: connector kind lives in the selected detail
diff --git a/apps/console/src/app/(console)/syncs/[runId]/page.tsx b/apps/console/src/app/(console)/syncs/[runId]/page.tsx
index e3e5b64ff..2db5c04ed 100644
--- a/apps/console/src/app/(console)/syncs/[runId]/page.tsx
+++ b/apps/console/src/app/(console)/syncs/[runId]/page.tsx
@@ -218,11 +218,14 @@ export default async function RunDetailPage({
// Keep the label visible even when this timeline window has no connection id.
const connectorLabel = (
<>
-
run {statusLabel}
- {connector ? {title}
{description}
@@ -416,7 +416,7 @@ function UnavailableStreamSurface({ connector, runId }: { connector: ConnectorCo
{connector ? (
<>
- {" "}
needs browser control. Keep this page open while the secure browser prepares. The page updates
diff --git a/apps/console/src/app/(console)/syncs/[runId]/stream/stream-viewer.tsx b/apps/console/src/app/(console)/syncs/[runId]/stream/stream-viewer.tsx
index c222b2e40..504b1c647 100644
--- a/apps/console/src/app/(console)/syncs/[runId]/stream/stream-viewer.tsx
+++ b/apps/console/src/app/(console)/syncs/[runId]/stream/stream-viewer.tsx
@@ -1577,6 +1577,7 @@ export function StreamSurface({
- {connectorName ? (
+ {connectorName && connectorId ? (
-
) : null}
@@ -5951,7 +5954,7 @@ export function ResolvedSurface({ connector, runId }: { connector: ConnectorCont
>
-
@@ -5998,7 +6001,7 @@ function UnsupportedSurface({
>
{connector ? (
-
) : null}
diff --git a/apps/console/src/app/(console)/syncs/page.tsx b/apps/console/src/app/(console)/syncs/page.tsx
index 8069890ba..6d256e46d 100644
--- a/apps/console/src/app/(console)/syncs/page.tsx
+++ b/apps/console/src/app/(console)/syncs/page.tsx
@@ -37,6 +37,7 @@ import {
import { isPagedRequest, parseConnectorSummaryPageState } from "../components/connector-summary-pager.ts";
import { LivePoller } from "../components/live-poller.tsx";
import { ServerUnreachable } from "../components/server-unreachable.tsx";
+import { buildConnectorIconMap } from "../lib/connector-icon-map.ts";
import { ReferenceServerUnreachableError } from "../lib/owner-token.ts";
import { type ListResponse, listConnectorSummaries, listRuns, type RunSummary } from "../lib/ref-client.ts";
import { listConnectorManifests } from "../lib/rs-client.ts";
@@ -140,12 +141,12 @@ export default async function RunsPage({ searchParams }: { searchParams: Promise
const pageState = parseConnectorSummaryPageState(params);
let runsResult: ListResponse;
let connectorsPage: Awaited>;
- let connectorManifests: Awaited>;
+ let connectorIcons: Awaited>;
try {
- [runsResult, connectorsPage, connectorManifests] = await Promise.all([
+ [runsResult, connectorsPage, connectorIcons] = await Promise.all([
listRuns(runListQuery(params)),
fetchSyncsConnectorsPage(pageState),
- listConnectorManifests().catch(() => []),
+ listConnectorManifests().catch(() => []).then((manifests) => buildConnectorIconMap(manifests, [])),
]);
} catch (err) {
if (err instanceof ReferenceServerUnreachableError) {
@@ -172,13 +173,6 @@ export default async function RunsPage({ searchParams }: { searchParams: Promise
});
const liveRunCount = runsResult.data.filter(isLiveRun).length;
- const connectorIcons = Object.fromEntries(
- connectorManifests.flatMap((manifest) => [
- [manifest.connector_id, manifest.icon] as const,
- ...(manifest.connector_key ? ([[manifest.connector_key, manifest.icon]] as const) : []),
- ])
- );
-
return (
0} />
diff --git a/apps/console/src/app/(console)/syncs/syncs-view.tsx b/apps/console/src/app/(console)/syncs/syncs-view.tsx
index 873c88507..a24072abd 100644
--- a/apps/console/src/app/(console)/syncs/syncs-view.tsx
+++ b/apps/console/src/app/(console)/syncs/syncs-view.tsx
@@ -159,7 +159,7 @@ function FailureCardPanel({ card, connectorIcons }: { card: FailureCard; connect
-
{summary.prose}
@@ -211,7 +211,7 @@ function PendingSetupCardPanel({ card, connectorIcons }: { card: PendingSetupCar
-
{card.what}
@@ -299,7 +299,7 @@ function DuplicateSyncGroupPanel({ group, connectorIcons }: { group: DuplicateSy
Several sources need labels
-
@@ -338,7 +338,14 @@ function RecentSyncRow({ connectorIcons, entry }: { connectorIcons: ConnectorIco
-
{entry.runId}
@@ -676,7 +683,7 @@ function SyncGroupBlock({ connectorIcons, group }: { connectorIcons: ConnectorIc
-
{group.connectionId}
diff --git a/apps/console/src/components/consent-screen/consent-screen-client.tsx b/apps/console/src/components/consent-screen/consent-screen-client.tsx
index 33df1e608..e29bfa5db 100644
--- a/apps/console/src/components/consent-screen/consent-screen-client.tsx
+++ b/apps/console/src/components/consent-screen/consent-screen-client.tsx
@@ -7,7 +7,7 @@
* The consent screen — the page an owner uses to decide what an app may read.
*
* Built from the REAL `@pdpp/brand-react` components (IcButton, IcInput,
- * ConnectorIcon, Endorse) so there is zero drift by construction: this renders
+ * Endorse) so there is zero drift by construction: this renders
* the actual component modules the console's `/sources` and `/explore` pages
* render, not a transcription of their output. `consent-screen.module.css`
* supplies ONLY the structural rules those components have no equivalent for
@@ -21,10 +21,9 @@
* is true — what the client said its purpose was, whether it made a retention
* promise — the statement itself arrives in the model and is rendered as-is.
*
- * Connector icons come from each source's own manifest declaration, passed
- * straight to `ConnectorIcon`, which falls back to its Monogram for a
- * connector that declares none. There is no connector-id -> icon map here or
- * anywhere else.
+ * Connector marks use the resolved connector identity and optional icon from
+ * the server. Source IDs and opaque grant-selection values remain separate.
+ * Older servers without display identity retain their explicit-icon fallback.
*
* Preserves the owner feedback items from rounds 1-4 of the design task
* (/home/tnunamak/code/pdpp/local/CONSENT-OWNER-FEEDBACK-0902.md): arbitrary
@@ -35,7 +34,6 @@
*/
import {
- ConnectorIcon,
Endorse,
IcButton,
IcInput,
@@ -48,6 +46,7 @@ import {
IcTooltipTrigger,
} from "@pdpp/brand-react";
import { useEffect, useMemo, useState } from "react";
+import { ConnectorMark } from "@/app/(console)/components/connector-mark.tsx";
import { PdppLogo } from "@/components/pdpp-logo.tsx";
import { ThemeToggle } from "@/components/theme/theme-toggle.tsx";
import styles from "./consent-screen.module.css";
@@ -434,7 +433,7 @@ function SourceRow({
>
-
{/* Layout in CSS, not inline: the account handle can only truncate
diff --git a/apps/console/src/components/consent-screen/consent-screen-model.ts b/apps/console/src/components/consent-screen/consent-screen-model.ts
index 9e23d7c62..a5ce11cb8 100644
--- a/apps/console/src/components/consent-screen/consent-screen-model.ts
+++ b/apps/console/src/components/consent-screen/consent-screen-model.ts
@@ -56,6 +56,8 @@ export interface ConsentStreamModel {
export interface ConsentSourceModel {
readonly account: string;
+ /** Optional for compatibility with servers predating display identity. */
+ readonly connectorId?: string;
readonly icon?: ConsentSourceIcon | null;
readonly id: string;
readonly name: string;
diff --git a/apps/console/src/components/consent-screen/consent-screen-runtime.test.mjs b/apps/console/src/components/consent-screen/consent-screen-runtime.test.mjs
index 575e3016a..a673eb807 100644
--- a/apps/console/src/components/consent-screen/consent-screen-runtime.test.mjs
+++ b/apps/console/src/components/consent-screen/consent-screen-runtime.test.mjs
@@ -226,3 +226,27 @@ test("cleared dates and dates on deselected streams are omitted", async () => {
fireEvent.click(view.getByRole("checkbox", { name: `Share ${saved.label} from Spotify` }));
assert.deepEqual((await submit()).streamRanges, {});
});
+
+test("connector marks use resolved connector identity without changing consent selection", async () => {
+ const source = model.sources[0];
+ assert.equal(source.connectorId, manifest.connector_id);
+ assert.equal(source.id, "spotify:account");
+ assert.equal(source.selectionValue, "source");
+ const view = render(createElement(ConsentScreen, {
+ connectorIndex: {}, model, acceptAction: async () => "", rejectAction: async () => "",
+ }));
+ assert.ok(view.container.querySelector(".pdpp-connector-icon svg"), "the connector mark should not depend on an optional manifest icon");
+});
+
+test("older consent models without connector provenance keep the genuine fallback", () => {
+ const legacy = structuredClone(model);
+ for (const source of legacy.sources) {
+ delete source.connectorId;
+ source.icon = null;
+ }
+ const view = render(createElement(ConsentScreen, {
+ connectorIndex: {}, model: legacy, acceptAction: async () => "", rejectAction: async () => "",
+ }));
+ assert.ok(view.container.querySelector(".pdpp-connector-icon .pdpp-monogram"));
+ assert.equal(view.container.querySelector(".pdpp-connector-icon svg"), null, "do not infer a brand from a source ID or account name");
+});
diff --git a/apps/console/src/components/consent-screen/consent-screen.module.css b/apps/console/src/components/consent-screen/consent-screen.module.css
index 37443054c..d2de9ab92 100644
--- a/apps/console/src/components/consent-screen/consent-screen.module.css
+++ b/apps/console/src/components/consent-screen/consent-screen.module.css
@@ -232,8 +232,6 @@
}
.sourceIcon {
flex: 0 0 auto;
- width: 24px;
- height: 24px;
}
.sourceText {
display: flex;
diff --git a/apps/console/src/components/consent-screen/consent-screen.test.ts b/apps/console/src/components/consent-screen/consent-screen.test.ts
index f7deaae97..fcfecfc72 100644
--- a/apps/console/src/components/consent-screen/consent-screen.test.ts
+++ b/apps/console/src/components/consent-screen/consent-screen.test.ts
@@ -137,7 +137,7 @@ test("the digest covers the client identity the screen displayed", () => {
test("the consent screen uses the real @pdpp/brand-react component modules", () => {
assert.match(CLIENT_SOURCE, /from ["']@pdpp\/brand-react["']/);
- for (const component of ["ConnectorIcon", "Endorse", "IcButton", "IcInput"]) {
+ for (const component of ["Endorse", "IcButton", "IcInput"]) {
assert.ok(new RegExp(`\\b${component}\\b`).test(CLIENT_SOURCE), `must use the real ${component}`);
}
assert.match(CLIENT_SOURCE, /className="pdpp-sheet"/, "Terms box must use the real neutral sheet surface");
@@ -154,11 +154,10 @@ test("the consent screen carries the console's own theme control", () => {
assert.match(CLIENT_SOURCE, / {
+ assert.match(CLIENT_SOURCE, /import \{ ConnectorMark \} from "@\/app\/\(console\)\/components\/connector-mark\.tsx"/);
+ assert.match(CLIENT_SOURCE, /, c
const MANIFEST_ICON_ALLOWED_KEYS = new Set(["kind", "svg", "color"]);
const HEX_COLOR_RE = /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
-// A brand glyph is shapes, not behavior: this is the complete element and
-// attribute vocabulary an icon needs. Everything else — script, foreignObject,
-// iframe, use, image, animate/animateTransform/set, style, a, and every
-// href/xlink:href variant — is deliberately absent. There is no fetch, no
-// script execution, and no navigation surface reachable from an SVG built
-// only from this vocabulary.
-const SVG_ALLOWED_ELEMENTS = new Set([
- "svg",
- "g",
- "path",
- "circle",
- "rect",
- "ellipse",
- "line",
- "polyline",
- "polygon",
- "title",
- "defs",
-]);
-const SVG_ALLOWED_ATTRIBUTES = new Set([
- "viewbox",
- "xmlns",
- "width",
- "height",
- "fill",
- "stroke",
- "stroke-width",
- "stroke-linecap",
- "stroke-linejoin",
- "d",
- "cx",
- "cy",
- "r",
- "rx",
- "ry",
- "x",
- "y",
- "x1",
- "y1",
- "x2",
- "y2",
- "points",
- "opacity",
- "fill-rule",
- "clip-rule",
- "transform",
-]);
-// Any of these substrings inside an attribute value is grounds for outright
-// rejection regardless of which attribute carries it — a shape-only icon has
-// no legitimate use for a URL scheme or a CSS url() reference.
-const SVG_ATTRIBUTE_VALUE_DENY_RE = /javascript:|data:|url\(/i;
-const SVG_MAX_LENGTH = 10_000;
-
-// Tokenizes top-level XML/SVG markup into tags and the text between them.
-// Deliberately dumb: this only needs to walk ``, ` ` shapes far enough to hand each one to the allowlist checks below —
-// it is not a general XML parser and does not need to be, since anything it
-// cannot make sense of is rejected rather than passed through.
-const SVG_TAG_RE = /<([^>]*)>/g;
-// A single `name="value"` or `name='value'` pair inside a tag's attribute list.
-const SVG_ATTR_RE = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)\s*=\s*(?:"([^"]*)"|'([^']*)')/g;
-// The element/tag name at the start of a tag body (after any leading `/`).
-const SVG_TAG_NAME_RE = /^([a-zA-Z_:][-a-zA-Z0-9_:.]*)/;
-
-interface ParsedSvgTag {
- attrs: Map;
- attrsExhaustive: boolean;
- closing: boolean;
- name: string;
- selfClosing: boolean;
-}
-
-function parseSvgTag(raw: string): ParsedSvgTag | null {
- let body = raw.trim();
- const closing = body.startsWith("/");
- if (closing) {
- body = body.slice(1).trim();
- }
- const selfClosing = body.endsWith("/");
- if (selfClosing) {
- body = body.slice(0, -1).trim();
- }
- const nameMatch = SVG_TAG_NAME_RE.exec(body);
- const rawName = nameMatch?.[1];
- if (!rawName) {
- return null;
- }
- const name = rawName.toLowerCase();
- const attrSource = body.slice(rawName.length);
- const attrs = new Map();
- SVG_ATTR_RE.lastIndex = 0;
- let match = SVG_ATTR_RE.exec(attrSource);
- while (match) {
- const [, rawAttrName, doubleQuoted, singleQuoted] = match;
- if (rawAttrName) {
- attrs.set(rawAttrName.toLowerCase(), doubleQuoted ?? singleQuoted ?? "");
- }
- match = SVG_ATTR_RE.exec(attrSource);
- }
- // Anything left over after stripping every recognized `name="value"` pair
- // means the attribute list contains something the tokenizer could not
- // classify (an unmatched `<`/`>`, a stray quote, an unquoted value) — that
- // markup is rejected rather than silently dropped.
- const attrsExhaustive = attrSource.replace(SVG_ATTR_RE, "").trim().length === 0;
- return { attrs, attrsExhaustive, closing, name, selfClosing };
-}
-
-// Validates one already-tokenized tag against the element/attribute
-// allowlist (order-preserving). Split out of assertSvgIsAllowlisted so the
-// latter only handles tokenizing the markup and tracking the bare--root
-// invariant; this handles the per-tag allowlist gate.
-function assertTagIsAllowlisted(parsed: ParsedSvgTag, code: string): void {
- if (!parsed.attrsExhaustive) {
- throw invalidConnectorManifest("icon.svg contains malformed markup", code);
- }
- if (!SVG_ALLOWED_ELEMENTS.has(parsed.name)) {
- throw invalidConnectorManifest(`icon.svg contains a disallowed element: ${parsed.name}`, code);
- }
- for (const [attrName, attrValue] of parsed.attrs) {
- if (!SVG_ALLOWED_ATTRIBUTES.has(attrName)) {
- throw invalidConnectorManifest(`icon.svg contains a disallowed attribute: ${attrName}`, code);
- }
- if (SVG_ATTRIBUTE_VALUE_DENY_RE.test(attrValue)) {
- throw invalidConnectorManifest(`icon.svg attribute ${attrName} contains a disallowed value`, code);
- }
- }
-}
-
-/**
- * Validates that `svg` uses only the shape-only element/attribute vocabulary
- * declared above. This is the SOLE XSS defense for manifest-declared icons —
- * `icon.svg` reaches the DOM via dangerouslySetInnerHTML in
- * packages/pdpp-brand-react/src/connector-icon.tsx, and this function is the
- * single choke point that markup must pass through first. It is a strict
- * ALLOWLIST (reject anything not explicitly permitted), not a denylist —
- * nothing here enumerates attack vectors, because there is no elements/
- * attributes vocabulary through which script execution, external fetches, or
- * navigation are reachable in the first place.
- */
+// `icon.svg` is untrusted markup that reaches the DOM through
+// dangerouslySetInnerHTML. The console renders it only when `sanitizeSvg` accepts it,
+// so the server asks the same function instead of keeping its own allowlist:
+// one vocabulary, one verdict. Imported by relative path because the staged
+// reference stack resolves only LOCAL_PACKAGES, not workspace packages.
function assertSvgIsAllowlisted(svg: string, code: string): void {
- if (svg.length > SVG_MAX_LENGTH) {
- throw invalidConnectorManifest(`icon.svg must not exceed ${SVG_MAX_LENGTH} characters`, code);
- }
- SVG_TAG_RE.lastIndex = 0;
- const tags: ParsedSvgTag[] = [];
- let sawSvgRoot = false;
- let cursor = 0;
- let match = SVG_TAG_RE.exec(svg);
- while (match) {
- // Text strictly between tags is inert (SVG has no text-execution sink in
- // this vocabulary — content is the only text ever rendered, and
- // it is not markup), but a bare `<` or `>` outside a well-formed tag is
- // grounds for rejection rather than silent tolerance.
- if (match.index !== cursor && svg.slice(cursor, match.index).includes("<")) {
- throw invalidConnectorManifest("icon.svg contains malformed markup", code);
- }
- cursor = SVG_TAG_RE.lastIndex;
- const parsed = parseSvgTag(match[1] ?? "");
- if (!parsed) {
- throw invalidConnectorManifest("icon.svg contains malformed markup", code);
- }
- assertTagIsAllowlisted(parsed, code);
- if (parsed.name === "svg" && !parsed.closing) {
- sawSvgRoot = true;
- }
- tags.push(parsed);
- match = SVG_TAG_RE.exec(svg);
- }
- if (cursor < svg.length && svg.slice(cursor).includes("<")) {
- throw invalidConnectorManifest("icon.svg contains malformed markup", code);
- }
- if (!sawSvgRoot) {
- throw invalidConnectorManifest("icon.svg must be a bare <svg> element", code);
- }
- const [rootTag] = tags;
- if (rootTag?.name !== "svg" || rootTag.closing) {
- throw invalidConnectorManifest("icon.svg must be a bare <svg> element", code);
+ if (sanitizeSvg(svg) === null) {
+ throw invalidConnectorManifest(
+ "icon.svg must be one bare <svg> element built only from allowed shape elements and attributes",
+ code
+ );
}
}
diff --git a/reference-implementation/server/routes/as-consent-ui-helpers.ts b/reference-implementation/server/routes/as-consent-ui-helpers.ts
index 764a5bf3c..ff186f4a6 100644
--- a/reference-implementation/server/routes/as-consent-ui-helpers.ts
+++ b/reference-implementation/server/routes/as-consent-ui-helpers.ts
@@ -758,6 +758,8 @@ export interface HostedMcpConsentChallengeModel {
readonly reviewDigest: string;
readonly sources: ReadonlyArray<{
readonly account: string;
+ /** Display provenance only; grant selection still uses the opaque values below. */
+ readonly connectorId: string;
/** Manifest-declared brand glyph, passed straight to ConnectorIcon; null renders its Monogram. */
readonly icon: { readonly color: string | null; readonly kind: string | null; readonly svg: string | null } | null;
readonly id: string;
@@ -898,6 +900,7 @@ export async function buildHostedMcpConsentChallengeModel(
// separately, so using it as a fallback would display two conflicting
// "data types" facts on the same collapsed row.
account: row.connectionName ?? "",
+ connectorId: row.connectorId,
icon: icons.get(row.connectorId) ?? null,
id: row.sourceKey,
name: row.connectorTypeLabel,
diff --git a/reference-implementation/test/manifest-icon.test.ts b/reference-implementation/test/manifest-icon.test.ts
index c88e0bb8a..5691436b1 100644
--- a/reference-implementation/test/manifest-icon.test.ts
+++ b/reference-implementation/test/manifest-icon.test.ts
@@ -15,6 +15,7 @@ import assert from "node:assert/strict";
import test from "node:test";
import { validateManifestIcon } from "../server/connector-manifest-validation.ts";
import { startServer } from "../server/index.ts";
+import { sanitizeSvg } from "../vendor/brand-react/src/sanitize-svg.ts";
type StartedServer = Awaited<ReturnType<typeof startServer>>;
@@ -149,7 +150,7 @@ test("manifest icon.svg containing a script tag is rejected", async () => {
assert.equal(status, 400);
assert.ok(hasErrorBody(body));
// biome-ignore lint/performance/useTopLevelRegex: localized test assertion preserves its explicit contract.
- assert.match(body.error.message, /disallowed element: script/u);
+ assert.match(body.error.message, /icon\.svg must be one bare <svg> element/u);
});
});
@@ -164,7 +165,7 @@ test("manifest icon.svg with an event-handler attribute is rejected", async () =
assert.equal(status, 400);
assert.ok(hasErrorBody(body));
// biome-ignore lint/performance/useTopLevelRegex: localized test assertion preserves its explicit contract.
- assert.match(body.error.message, /disallowed attribute: onload/u);
+ assert.match(body.error.message, /icon\.svg must be one bare <svg> element/u);
});
});
@@ -176,11 +177,8 @@ test("manifest icon.svg not wrapped in a bare <svg> element is rejected", async
);
assert.equal(status, 400);
assert.ok(hasErrorBody(body));
- // <div> is rejected as a disallowed element before the bare-<svg>-root
- // check ever runs — a stronger rejection than the old denylist's, which
- // only checked the root shape.
// biome-ignore lint/performance/useTopLevelRegex: localized test assertion preserves its explicit contract.
- assert.match(body.error.message, /disallowed element: div/u);
+ assert.match(body.error.message, /icon\.svg must be one bare <svg> element/u);
});
});
@@ -193,7 +191,7 @@ test("manifest icon.svg whose root is not <svg> is rejected even when every elem
assert.equal(status, 400);
assert.ok(hasErrorBody(body));
// biome-ignore lint/performance/useTopLevelRegex: localized test assertion preserves its explicit contract.
- assert.match(body.error.message, /bare <svg>/u);
+ assert.match(body.error.message, /icon\.svg must be one bare <svg> element/u);
});
});
@@ -329,3 +327,51 @@ test("validateManifestIcon: allowlist rejects disallowed elements/attributes/val
validateManifestIcon({ icon: { kind: "inline_svg", svg: STEAM_SHAPED_SVG } }, "invalid_request")
);
});
+
+// ---------------------------------------------------------------------------
+// One allowlist. The console renders a manifest icon only if sanitizeSvg
+// (vendor/brand-react, the function behind validatedConnectorIcon) accepts it.
+// The server must therefore accept exactly what that function accepts: an icon
+// the server stores but the console drops silently shows a monogram, and an
+// icon the server rejects but the console would render is a second list to
+// keep in step. Every row below was decided differently by the two old lists.
+// ---------------------------------------------------------------------------
+
+const VERDICT_CASES: ReadonlyArray<{ name: string; svg: string }> = [
+ {
+ name: "root with role and aria-hidden",
+ svg: '<svg role="img" aria-hidden="true" viewBox="0 0 24 24"><path d="M0 0z"/></svg>',
+ },
+ { name: "<defs> wrapper", svg: '<svg viewBox="0 0 24 24"><defs><path d="M0 0z"/></defs></svg>' },
+ { name: "duplicate attribute", svg: '<svg viewBox="0 0 24 24"><path d="M0 0z" d="M1 1z"/></svg>' },
+ { name: "character reference in a value", svg: '<svg viewBox="0 0 24 24"><path d="M0 0z" fill="#fff"/></svg>' },
+ { name: "backslash escape in a value", svg: '<svg viewBox="0 0 24 24"><path d="M0 0z" fill="\\23fff"/></svg>' },
+ { name: "unclosed group", svg: '<svg viewBox="0 0 24 24"><g><path d="M0 0z"/></svg>' },
+ { name: "stray closing tag", svg: '<svg viewBox="0 0 24 24"></g><path d="M0 0z"/></svg>' },
+ { name: "mismatched closing tag", svg: '<svg viewBox="0 0 24 24"><g><path d="M0 0z"/></svg></g>' },
+ { name: "two roots", svg: '<svg><path d="M0 0z"/></svg><svg><path d="M0 0z"/></svg>' },
+ { name: "text after the root", svg: '<svg viewBox="0 0 24 24"><path d="M0 0z"/></svg>trailing' },
+ { name: "title caption", svg: '<svg viewBox="0 0 24 24"><title>Mark ' },
+ { name: "single-quoted attributes", svg: "
+
+ );
}
diff --git a/reference-implementation/vendor/brand-react/src/hex-color.test.ts b/reference-implementation/vendor/brand-react/src/hex-color.test.ts
new file mode 100644
index 000000000..c3a58ea29
--- /dev/null
+++ b/reference-implementation/vendor/brand-react/src/hex-color.test.ts
@@ -0,0 +1,27 @@
+// Copyright The PDP-Connect Contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import assert from "node:assert/strict";
+import test from "node:test";
+import { hexColorOrNull } from "./hex-color.ts";
+
+test("hexColorOrNull keeps #rgb and #rrggbb and drops everything else", () => {
+ assert.equal(hexColorOrNull("#1ED760"), "#1ED760");
+ assert.equal(hexColorOrNull("#fa0"), "#fa0");
+ for (const bad of [
+ "red",
+ "#12",
+ "#12345",
+ "#12345g",
+ "#1234567",
+ "transparent",
+ "#fff;x:y",
+ " #fff",
+ "",
+ null,
+ undefined,
+ 5,
+ ]) {
+ assert.equal(hexColorOrNull(bad), null, String(bad));
+ }
+});
diff --git a/reference-implementation/vendor/brand-react/src/hex-color.ts b/reference-implementation/vendor/brand-react/src/hex-color.ts
new file mode 100644
index 000000000..938507960
--- /dev/null
+++ b/reference-implementation/vendor/brand-react/src/hex-color.ts
@@ -0,0 +1,14 @@
+// Copyright The PDP-Connect Contributors
+// SPDX-License-Identifier: Apache-2.0
+
+const HEX_COLOR_RE = /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/u;
+
+/**
+ * Returns `value` when it is a `#rgb` / `#rrggbb` string, else `null`.
+ * The one check for every manifest color that reaches a browser style: a
+ * free-form CSS value could smuggle extra declarations, such as a `url()`
+ * fetch, into the `style` attribute.
+ */
+export function hexColorOrNull(value: unknown): string | null {
+ return typeof value === "string" && HEX_COLOR_RE.test(value) ? value : null;
+}
diff --git a/reference-implementation/vendor/brand-react/src/sanitize-svg.test.ts b/reference-implementation/vendor/brand-react/src/sanitize-svg.test.ts
new file mode 100644
index 000000000..2c4fcf765
--- /dev/null
+++ b/reference-implementation/vendor/brand-react/src/sanitize-svg.test.ts
@@ -0,0 +1,100 @@
+// Copyright The PDP-Connect Contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import assert from "node:assert/strict";
+import test from "node:test";
+import { sanitizeSvg } from "./sanitize-svg.ts";
+
+test("accepts a minimal bare svg", () => {
+ assert.equal(
+ sanitizeSvg('GitHub x
${' `;
+ assert.equal(sanitizeSvg(huge), null);
+});
+
+test("rejects browser-significant duplicate and character-encoded attributes", () => {
+ const unsafe = [
+ '", "prefix, and its only useful children
+// (gradients, clip paths) are not allowed elements, so it stays out.
+test("rejects ", () => {
+ assert.equal(sanitizeSvg('` root, and a denylist of
- * `javascript:`/`data:`/`url()` substrings inside any attribute value.
+ * `javascript:`/`data:`/`url()` substrings inside any attribute value. Text
+ * between elements (such as a ``'s caption) is kept verbatim: it is
+ * inert, and only text outside the root element is rejected.
* Returns the trimmed SVG on success, or null on any violation.
*/
export function sanitizeSvg(raw: string): string | null {
@@ -113,33 +152,26 @@ export function sanitizeSvg(raw: string): string | null {
return null;
}
SVG_TAG_RE.lastIndex = 0;
- const tags: ParsedSvgTag[] = [];
+ const openElements: string[] = [];
let sawSvgRoot = false;
let cursor = 0;
let match = SVG_TAG_RE.exec(svg);
while (match) {
- if (match.index !== cursor && svg.slice(cursor, match.index).includes("<")) {
+ const between = svg.slice(cursor, match.index);
+ if (between.includes("<") || (openElements.length === 0 && between.trim().length > 0)) {
return null;
}
cursor = SVG_TAG_RE.lastIndex;
const parsed = parseSvgTag(match[1] ?? "");
- if (!parsed || !parsed.attrsExhaustive || !SVG_ALLOWED_ELEMENTS.has(parsed.name)) {
+ if (!isAllowedSvgTag(parsed)) {
return null;
}
- for (const [attrName, attrValue] of parsed.attrs) {
- if (!SVG_ALLOWED_ATTRIBUTES.has(attrName) || SVG_ATTRIBUTE_VALUE_DENY_RE.test(attrValue)) {
- return null;
- }
- }
- if (parsed.name === "svg" && !parsed.closing) {
- sawSvgRoot = true;
+ const startsRoot = !parsed.closing && openElements.length === 0;
+ if ((startsRoot && sawSvgRoot) || !advanceSvgNesting(parsed, openElements)) {
+ return null;
}
- tags.push(parsed);
+ sawSvgRoot ||= startsRoot;
match = SVG_TAG_RE.exec(svg);
}
- if (cursor < svg.length && svg.slice(cursor).includes("<")) {
- return null;
- }
- const [rootTag] = tags;
- return sawSvgRoot && rootTag?.name === "svg" && !rootTag.closing ? svg : null;
+ return sawSvgRoot && openElements.length === 0 && svg.slice(cursor).trim().length === 0 ? svg : null;
}