feat(graphql): add iconUrl field with auto-favicon preview

Add iconUrl to GraphQL source connect input schema and form component.
The form displays an auto-generated favicon preview derived from the
endpoint, with manual override capability.

Author: aryasaatvik

plugins/graphql/react/components.tsx

@@ -51,6 +51,7 @@ type GraphqlToolRouteParams = {
 
 const defaultGraphqlInput = (): GraphqlConnectInput => ({
   name: "My GraphQL Source",
+  iconUrl: undefined,
   endpoint: "https://example.com/graphql",
   defaultHeaders: null,
   auth: {
@@ -61,6 +62,63 @@ const defaultGraphqlInput = (): GraphqlConnectInput => ({
 const DEFAULT_BEARER_HEADER_NAME = "Authorization";
 const DEFAULT_BEARER_PREFIX = "Bearer ";
 
+const COMMON_COMPOUND_SUFFIXES = new Set([
+  "ac.uk",
+  "co.in",
+  "co.jp",
+  "co.nz",
+  "co.uk",
+  "com.au",
+  "com.br",
+  "com.mx",
+  "net.au",
+  "org.au",
+  "org.uk",
+]);
+
+const isIpv4Address = (value: string): boolean =>
+  /^\d{1,3}(?:\.\d{1,3}){3}$/.test(value);
+
+const toRegistrableDomain = (hostname: string): string | null => {
+  const normalized = hostname.trim().toLowerCase().replace(/^\.+|\.+$/g, "");
+  if (!normalized) {
+    return null;
+  }
+
+  if (normalized === "localhost" || isIpv4Address(normalized)) {
+    return normalized;
+  }
+
+  const parts = normalized.split(".").filter((part) => part.length > 0);
+  if (parts.length < 2) {
+    return null;
+  }
+
+  const suffix = parts.slice(-2).join(".");
+  if (parts.length >= 3 && COMMON_COMPOUND_SUFFIXES.has(suffix)) {
+    return parts.slice(-3).join(".");
+  }
+
+  return parts.slice(-2).join(".");
+};
+
+const getPreviewFaviconUrl = (value: string): string | null => {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return null;
+  }
+
+  try {
+    const url = new URL(trimmed);
+    const domain = toRegistrableDomain(url.hostname);
+    return domain
+      ? `https://www.google.com/s2/favicons?domain=${encodeURIComponent(domain)}&sz=32`
+      : null;
+  } catch {
+    return null;
+  }
+};
+
 const presetString = (
   search: Record<string, unknown>,
   key: string,
@@ -196,6 +254,7 @@ function GraphqlSourceForm(props: {
 }) {
   const submitMutation = useExecutorMutation<GraphqlConnectInput, void>(props.onSubmit);
   const [name, setName] = useState(props.initialValue.name);
+  const [iconUrl, setIconUrl] = useState(props.initialValue.iconUrl ?? "");
   const [endpoint, setEndpoint] = useState(props.initialValue.endpoint);
   const [headersText, setHeadersText] = useState(
     stringifyStringMap(props.initialValue.defaultHeaders),
@@ -211,6 +270,7 @@ function GraphqlSourceForm(props: {
     bearerPrefixValue(props.initialValue.auth),
   );
   const [error, setError] = useState<string | null>(null);
+  const resolvedIconUrl = iconUrl.trim() || getPreviewFaviconUrl(endpoint);
 
   return (
     <div className="space-y-6 rounded-lg border border-border bg-card p-6 text-sm ring-1 ring-foreground/[0.04]">
@@ -223,6 +283,22 @@ function GraphqlSourceForm(props: {
           />
         </div>
 
+        <div className="grid gap-2">
+          <Label>Icon URL</Label>
+          <Input
+            value={iconUrl}
+            onChange={(event) => setIconUrl(event.target.value)}
+            placeholder="https://cdn.example.com/icon.png"
+            className="font-mono text-xs"
+          />
+          {resolvedIconUrl && (
+            <div className="flex items-center gap-2 text-xs text-muted-foreground">
+              <img src={resolvedIconUrl} alt="" className="size-4 rounded-sm object-contain" />
+              <span>{iconUrl.trim() ? "Using override" : "Auto preview"}</span>
+            </div>
+          )}
+        </div>
+
         <div className="grid gap-2">
           <Label>Endpoint</Label>
           <Input
@@ -305,6 +381,7 @@ function GraphqlSourceForm(props: {
               try {
                 await submitMutation.mutateAsync({
                   name: name.trim(),
+                  ...(iconUrl.trim() ? { iconUrl: iconUrl.trim() } : {}),
                   endpoint: endpoint.trim(),
                   defaultHeaders: parseStringMap(headersText),
                   auth: authFromSecretValue(

plugins/graphql/sdk/index.ts

@@ -97,6 +97,7 @@ export type GraphqlSdk = {
 const GraphqlExecutorAddInputSchema = Schema.Struct({
   kind: Schema.Literal("graphql"),
   name: Schema.String,
+  iconUrl: Schema.optional(Schema.String),
   endpoint: Schema.String,
   defaultHeaders: Schema.NullOr(Schema.Record({ key: Schema.String, value: Schema.String })),
   auth: GraphqlConnectionAuthSchema,
@@ -318,8 +319,10 @@ const storedSourceDataFromInput = (
 const sourceConfigFromStored = (
   source: Source,
   stored: GraphqlStoredSourceData,
+  configSource: { iconUrl?: string } | null,
 ): GraphqlSourceConfigPayload => ({
   name: source.name,
+  ...(configSource?.iconUrl ? { iconUrl: configSource.iconUrl } : {}),
   endpoint: stored.endpoint,
   defaultHeaders: stored.defaultHeaders,
   auth: stored.auth,
@@ -329,6 +332,7 @@ const graphqlConnectInputFromAddInput = (
   input: GraphqlExecutorAddInput,
 ): GraphqlConnectInput => ({
   name: input.name,
+  ...(input.iconUrl ? { iconUrl: input.iconUrl } : {}),
   endpoint: input.endpoint,
   defaultHeaders: input.defaultHeaders,
   auth: input.auth,
@@ -394,14 +398,20 @@ export const graphqlSdkPlugin = (options: {
         },
         stored: storedSourceDataFromInput(config),
       }),
-      toConfig: ({ source, stored }) =>
-        sourceConfigFromStored(source, normalizeStoredSourceData(stored)),
+      toConfig: ({ source, stored, configSource }) =>
+        sourceConfigFromStored(source, normalizeStoredSourceData(stored), configSource),
     },
     scopeConfig: {
-      toConfigSource: ({ source, stored }) =>
+      toConfigSource: ({ source, stored, configInput }) =>
         pluginScopeConfigSourceFromConfig({
           source,
           config: normalizeStoredSourceData(stored),
+          iconUrl:
+            configInput && typeof configInput === "object" && "iconUrl" in configInput
+              ? (typeof configInput.iconUrl === "string"
+                  ? configInput.iconUrl.trim() || null
+                  : null)
+              : null,
         }),
       recoverStored: ({ config, loadedConfig }) =>
         graphqlStoredSourceDataFromLocalConfig({

plugins/graphql/shared/index.ts

@@ -23,6 +23,7 @@ export const GraphqlConnectionAuthSchema = Schema.Union(
 
 export const GraphqlConnectInputSchema = Schema.Struct({
   name: Schema.String,
+  iconUrl: Schema.optional(Schema.String),
   endpoint: Schema.String,
   defaultHeaders: Schema.NullOr(StringMapSchema),
   auth: GraphqlConnectionAuthSchema,