lael-labs/executor

e2e/local/codex-plugins.test.ts+23−1

@@ -28,7 +28,7 @@ import { composePluginApi } from "@executor-js/api/server"; · 27 unmodified lines
28	import { mcpHttpPlugin } from "@executor-js/plugin-mcp/api";	28	import { mcpHttpPlugin } from "@executor-js/plugin-mcp/api";
29		29
30	import { scenario } from "../src/scenario";	30	import { scenario } from "../src/scenario";
31	import { Cli, RunDir } from "../src/services";	31	import { Browser, Cli, RunDir, Target } from "../src/services";
32	import { withLocalServer } from "./local-server";	32	import { withLocalServer } from "./local-server";
33		33
34	const api = composePluginApi([mcpHttpPlugin()] as const);	34	const api = composePluginApi([mcpHttpPlugin()] as const);
@@ -109,7 +109,10 @@ scenario( · 74 unmodified lines
109	{ timeout: 300_000 },	109	{ timeout: 300_000 },
110	Effect.gen(function* () {	110	Effect.gen(function* () {
111	const cli = yield* Cli;	111	const cli = yield* Cli;
		112	const browser = yield* Browser;
112	const runDir = yield* RunDir;	113	const runDir = yield* RunDir;
		114	const target = yield* Target;
		115	const identity = yield* target.newIdentity();
113	const codexHome = makeCodexHome();	116	const codexHome = makeCodexHome();
114		117
115	yield* withLocalServer(	118	yield* withLocalServer(
@@ -142,6 +145,25 @@ scenario( · 26 unmodified lines
142	CODEX_HOME: codexHome,	145	CODEX_HOME: codexHome,
143	});	146	});
144	}	147	}
		148
		149	yield* browser.session(identity, async ({ page, step }) => {
		150	await step("Find Computer Use on the integration browse page", async () => {
		151	await page.goto(server.url, { waitUntil: "domcontentloaded" });
		152	await page.getByRole("link", { name: "Add integration" }).click();
		153	await page
		154	.getByRole("textbox", { name: "Search integrations, or paste a URL" })
		155	.fill("Computer Use");
		156
		157	const card = page.getByTestId("preset-mcp-codex-computer-use");
		158	await card.getByText("Computer Use MCP").waitFor({ timeout: 30_000 });
		159	await card
		160	.locator(
		161	'img[src="https://learn.chatgpt.com/images/codex/icons/computer-use-plugin-icon.png"]',
		162	)
		163	.waitFor({ timeout: 30_000 });
		164	});
		165	});
		166
145	// Curated entries carry the app-server bridge recipe: `codex	167	// Curated entries carry the app-server bridge recipe: `codex
146	// app-server`, the server name the bridge calls tools on, and the	168	// app-server`, the server name the bridge calls tools on, and the
147	// preset it came from — that last one is what lets a macOS refusal	169	// preset it came from — that last one is what lets a macOS refusal

packages/plugins/mcp/src/react/CodexPluginAdd.tsx+6−4

 import { Button } from "@executor-js/react/components/button";
 import { FloatActions } from "@executor-js/react/components/float-actions";
+import { IntegrationFavicon } from "@executor-js/react/components/integration-favicon";
 import { integrationsOptimisticAtom } from "@executor-js/react/api/atoms";
 import { integrationWriteKeys } from "@executor-js/react/api/reactivity-keys";
 import { addIntegrationErrorMessage } from "@executor-js/react/lib/integration-add";
         {/* The plugin's own icon comes from the local Codex install; without
             one the card still identifies its provider rather than showing a
             gap, which matters most on the machines that have no install. */}
-        <img
+        <IntegrationFavicon
-          src={plugin.icon ?? plugin.fallbackIcon ?? "https://integrations.sh/logo/openai.com"}
+          icon={plugin.icon}
-          alt=""
+          fallbackSrc={plugin.fallbackIcon ?? "https://integrations.sh/logo/openai.com"}
-          className="size-16 rounded-2xl"
+          size={64}
+          className="rounded-2xl"
         />
         <div className="min-w-0">
           <div className="flex items-baseline gap-2">

packages/plugins/mcp/src/sdk/presets.ts+1−1

@@ -37,7 +37,7 @@ export type McpPreset = McpRemotePreset \| McpStdioPreset; · 36 unmodified lines
37	// use", …). `command` is deliberately empty: the real spawn recipe is	37	// use", …). `command` is deliberately empty: the real spawn recipe is
38	// machine-specific and comes from the server-side scanner	38	// machine-specific and comes from the server-side scanner
39	// (`codex-plugins.ts`); picking one of these opens the focused Codex add	39	// (`codex-plugins.ts`); picking one of these opens the focused Codex add
40	// screen. The icon uses the `executor:` scheme (see preset-icon.tsx): the	40	// screen. The icon uses the `executor:` scheme (see integration-favicon.tsx): the
41	// plugin's own icon is a machine-local file, so it is served by the local API	41	// plugin's own icon is a machine-local file, so it is served by the local API
42	// and resolved with the auth header — a static URL cannot reach it.	42	// and resolved with the auth header — a static URL cannot reach it.
43	const codexPluginPresets: readonly McpStdioPreset[] = CURATED_CODEX_PLUGINS.map((plugin) => ({	43	const codexPluginPresets: readonly McpStdioPreset[] = CURATED_CODEX_PLUGINS.map((plugin) => ({

packages/react/src/components/command-palette.tsx+4−11

 import { trackEvent } from "../api/analytics";
 import type { Integration } from "@executor-js/sdk/shared";
 import { IntegrationFavicon, integrationPresetIconUrl } from "./integration-favicon";
-import { PresetIcon } from "./preset-icon";
 import { integrationsOptimisticAtom } from "../api/atoms";
 import { useIntegrationPlugins } from "@executor-js/sdk/client";
 import {
                 value={`preset ${e.presetName} ${e.presetSummary ?? ""} ${e.pluginLabel}`}
                 onSelect={() => goToPreset(e.pluginKey, e.presetId, e.presetUrl)}
               >
-                <PresetIcon
+                <IntegrationFavicon
-                  {...(e.presetIcon ? { icon: e.presetIcon } : {})}
+                  icon={e.presetIcon}
-                  {...(e.presetFallbackIcon ? { fallbackSrc: e.presetFallbackIcon } : {})}
+                  fallbackSrc={e.presetFallbackIcon}
-                  className="size-4 shrink-0 object-contain"
+                  size={16}
-                  fallback={
-                    <span
-                      aria-hidden
-                      className="size-4 shrink-0 rounded-sm bg-muted-foreground/20"
-                    />
-                  }
                 />
                 <span className="flex-1 truncate">{e.presetName}</span>
                 <CommandShortcut>{e.pluginLabel}</CommandShortcut>

packages/react/src/components/integration-favicon.test.tsx+20−0

@@ -33,6 +33,26 @@ describe("IntegrationFavicon", () => { · 32 unmodified lines
33	expect(integrationFaviconSrc({ url, size: 20, failedSrcs: [primary ?? ""] })).toBeNull();	33	expect(integrationFaviconSrc({ url, size: 20, failedSrcs: [primary ?? ""] })).toBeNull();
34	});	34	});
35		35
		36	it("tries the explicit fallback before the integration-derived favicon", () => {
		37	const icon = "executor:/mcp/codex-plugins/computer-use/icon";
		38	const fallbackSrc = "https://integrations.sh/logo/openai.com";
		39	const url = "https://example.com/mcp";
		40
		41	expect(integrationFaviconSrc({ icon, fallbackSrc, url, size: 20 })).toBe(icon);
		42	expect(integrationFaviconSrc({ icon, fallbackSrc, url, size: 20, failedSrcs: [icon] })).toBe(
		43	fallbackSrc,
		44	);
		45	expect(
		46	integrationFaviconSrc({
		47	icon,
		48	fallbackSrc,
		49	url,
		50	size: 20,
		51	failedSrcs: [icon, fallbackSrc],
		52	}),
		53	).toBe("https://integrations.sh/logo/example.com?sz=40");
		54	});
		55
36	it("uses the Executor favicon for the built-in executor integration", () => {	56	it("uses the Executor favicon for the built-in executor integration", () => {
37	expect(integrationLocalIconUrl("executor")).toBe("/favicon-32.png");	57	expect(integrationLocalIconUrl("executor")).toBe("/favicon-32.png");
38	expect(integrationLocalIconUrl("openapi")).toBeNull();	58	expect(integrationLocalIconUrl("openapi")).toBeNull();

packages/react/src/components/integration-favicon.tsx+61−9

 import { BoxIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import type { IntegrationPlugin } from "@executor-js/sdk/client";
+import * as Effect from "effect/Effect";
+import * as Option from "effect/Option";
+import * as Schema from "effect/Schema";
 import { getDomain } from "tldts";
-import { EXECUTOR_ICON_SCHEME, resolveExecutorIcon } from "./preset-icon";
+import {
+  getExecutorApiBaseUrl,
+  getExecutorServerAuthorizationHeader,
+} from "../api/server-connection";
+import { cn } from "../lib/utils";
+// ---------------------------------------------------------------------------
+const EXECUTOR_ICON_SCHEME = "executor:";
+const IconResponse = Schema.Struct({ icon: Schema.NullOr(Schema.String) });
+const decodeIconResponse = Schema.decodeUnknownOption(IconResponse);
+const resolvedExecutorIcons = new Map<string, Promise<string | null>>();
+/** Resolves an authenticated local icon path once per browser session. */
+const resolveExecutorIcon = (path: string): Promise<string | null> => {
+  const cached = resolvedExecutorIcons.get(path);
+  if (cached) return cached;
+  const authorization = getExecutorServerAuthorizationHeader();
+  const request = Effect.runPromise(
+    Effect.tryPromise(async () => {
+      const response = await fetch(`${getExecutorApiBaseUrl()}${path}`, {
+        headers: authorization === null ? {} : { authorization },
+      });
+      if (!response.ok) return null;
+      const body: unknown = await response.json();
+      return Option.match(decodeIconResponse(body), {
+        onNone: () => null,
+        onSome: ({ icon }) => icon,
+      });
+    }).pipe(Effect.orElseSucceed(() => null)),
+  );
+  resolvedExecutorIcons.set(path, request);
+  return request;
+};
 // ---------------------------------------------------------------------------
 // IntegrationFavicon — renders a small favicon derived from an integration URL.
 }
 // Resolution cascade for the rendered favicon: first non-null, non-failed of an
-// explicit preset icon, the bundled local icon for a known integration id, then
+// explicit preset icon, its explicit fallback image, the bundled local icon for
-// the integrations.sh logo proxy derived from the integration URL (which owns
+// a known integration id, then the integrations.sh logo proxy derived from the
-// its own upstream fallbacks). The built-in executor integration has no preset
+// integration URL (which owns its own upstream fallbacks). The built-in executor
-// icon and no URL, so it resolves ONLY through the integrationId branch: callers
+// integration has no preset icon and no URL, so it resolves ONLY through the
-// that drop integrationId fall through to the neutral BoxIcon placeholder.
+// integrationId branch: callers that drop integrationId fall through to the
+// neutral BoxIcon placeholder.
 export function integrationFaviconSrc(args: {
   icon?: string | null;
+  fallbackSrc?: string | null;
   integrationId?: string;
   url?: string;
   size: number;
   return (
     [
       args.icon ?? null,
+      args.fallbackSrc ?? null,
       integrationLocalIconUrl(args.integrationId),
       integrationFaviconUrl(args.url, args.size),
     ].find((candidate) => candidate !== null && !failedSrcs.includes(candidate)) ?? null
 export function IntegrationFavicon({
   icon,
+  fallbackSrc,
   integrationId,
   url,
   size = 16,
+  className,
 }: {
   icon?: string | null;
+  fallbackSrc?: string | null;
   integrationId?: string;
   url?: string;
   size?: number;
+  className?: string;
 }) {
   const [failedSrcs, setFailedSrcs] = useState<readonly string[]>([]);
   // `executor:`-scheme icons (served by the local API behind the bearer gate,
   // e.g. a Codex plugin's own icon) resolve asynchronously to a data URI; a
   // null resolution marks the candidate failed so the cascade continues.
   const [executorIcons, setExecutorIcons] = useState<Readonly<Record<string, string>>>({});
-  const cascadeSrc = integrationFaviconSrc({ icon, integrationId, url, size, failedSrcs });
+  const cascadeSrc = integrationFaviconSrc({
+    icon,
+    fallbackSrc,
+    integrationId,
+    url,
+    size,
+    failedSrcs,
+  });
   const isExecutorSrc = cascadeSrc?.startsWith(EXECUTOR_ICON_SCHEME) ?? false;
   useEffect(() => {
     return (
       <BoxIcon
         aria-hidden
-        className="shrink-0 text-muted-foreground"
+        className={cn("shrink-0 text-muted-foreground", className)}
         style={{ width: size, height: size }}
       />
     );
           current.includes(failedCandidate) ? current : [...current, failedCandidate],
         )
       }
-      className="shrink-0 rounded-sm"
+      className={cn("shrink-0 rounded-sm object-contain", className)}
       style={{ width: size, height: size }}
     />
   );

packages/react/src/components/preset-icon.tsx+0−84

@@ -1,84 +0,0 @@
1	// ---------------------------------------------------------------------------
2	// Preset icon — a preset's `icon` is usually a plain image URL. A preset whose
3	// icon can only come from the local server (e.g. a Codex plugin's own icon,
4	// read off this machine at runtime) uses the `executor:` scheme instead: the
5	// path after the scheme is fetched from the executor API with the server auth
6	// header and must answer `{ icon: string \| null }` (a data URI). The
7	// indirection exists because local auth is deliberately bearer-header-only —
8	// an <img> cannot authenticate itself.
9	// ---------------------------------------------------------------------------
10
11	import { useEffect, useState } from "react";
12	import * as Effect from "effect/Effect";
13	import * as Option from "effect/Option";
14	import * as Schema from "effect/Schema";
15
16	import {
17	getExecutorApiBaseUrl,
18	getExecutorServerAuthorizationHeader,
19	} from "../api/server-connection";
20
21	export const EXECUTOR_ICON_SCHEME = "executor:";
22
23	const IconResponse = Schema.Struct({ icon: Schema.NullOr(Schema.String) });
24	const decodeIconResponse = Schema.decodeUnknownOption(IconResponse);
25
26	const resolved = new Map<string, Promise<string \| null>>();
27
28	/** Resolve an `executor:`-scheme icon path to its data URI (or null). Shared
29	* by every surface that renders preset icons, including IntegrationFavicon's
30	* cascade. Results are memoized per path for the session; any failure is
31	* "no icon", never an error. */
32	export const resolveExecutorIcon = (path: string): Promise<string \| null> => {
33	const cached = resolved.get(path);
34	if (cached) return cached;
35	const authorization = getExecutorServerAuthorizationHeader();
36	const request = Effect.runPromise(
37	Effect.tryPromise(async () => {
38	const response = await fetch(`${getExecutorApiBaseUrl()}${path}`, {
39	headers: authorization === null ? {} : { authorization },
40	});
41	if (!response.ok) return null;
42	const body: unknown = await response.json();
43	return Option.match(decodeIconResponse(body), {
44	onNone: () => null,
45	onSome: ({ icon }) => icon,
46	});
47	}).pipe(Effect.orElseSucceed(() => null)),
48	);
49	resolved.set(path, request);
50	return request;
51	};
52
53	/** Renders a preset icon, resolving `executor:` scheme icons through the
54	* authenticated API.
55	*
56	* `fallbackSrc` is a plain image URL to use when the machine-local icon is
57	* unavailable — a Codex plugin card still shows its provider's mark on a
58	* machine where Codex is not installed, which is exactly when the card is
59	* most in need of explaining itself. `fallback` is the last resort, for when
60	* there is no image of any kind. */
61	export function PresetIcon(props: {
62	readonly icon?: string;
63	readonly fallbackSrc?: string;
64	readonly className?: string;
65	readonly fallback?: React.ReactNode;
66	}) {
67	const isExecutorIcon = props.icon?.startsWith(EXECUTOR_ICON_SCHEME) ?? false;
68	const [fetched, setFetched] = useState<string \| null>(null);
69
70	useEffect(() => {
71	if (!isExecutorIcon \|\| props.icon === undefined) return;
72	let live = true;
73	void resolveExecutorIcon(props.icon.slice(EXECUTOR_ICON_SCHEME.length)).then((icon) => {
74	if (live) setFetched(icon);
75	});
76	return () => {
77	live = false;
78	};
79	}, [isExecutorIcon, props.icon]);
80
81	const src = (isExecutorIcon ? fetched : (props.icon ?? null)) ?? props.fallbackSrc ?? null;
82	if (src === null) return <>{props.fallback ?? null}</>;
83	return <img src={src} alt="" className={props.className} loading="lazy" />;
84	}

packages/react/src/pages/integration-browse.tsx+36−61

 import { Input } from "../components/input";
 import { PageHeader } from "../components/page";
 import {
-  integrationFaviconUrl,
+  IntegrationFavicon,
   integrationInferredUrl,
   integrationPresetIconUrl,
 } from "../components/integration-favicon";
 import { useExecutorDocumentTitle } from "../lib/document-title";
 import {
   availableCatalogKinds,
-  catalogLogoUrl,
   filterCatalogEntries,
   resolveConnectTarget,
   useCatalogBrowse,
    *  distinguishable. Omitted when the title is already the domain. */
   readonly domain?: string;
   readonly description?: string;
-  readonly iconUrl?: string;
+  readonly icon?: string;
+  readonly fallbackSrc?: string;
+  readonly integrationId?: string;
+  readonly url?: string;
   readonly onSelect: () => void;
   readonly added: boolean;
   /** Namespace of the installed integration this row matched — the View
 // Row
 // ---------------------------------------------------------------------------
-/** Registry logos 404 for plenty of hosts; a broken-image glyph in a list of
- *  brand marks looks like a bug, so failures fall back to a neutral mark. */
-function RowIcon(props: { readonly src?: string; readonly alt: string }) {
-  const [failed, setFailed] = useState(false);
-  if (!props.src || failed) {
-    return (
-      <span
-        aria-hidden
-        className="flex size-5 items-center justify-center rounded-sm bg-muted text-[10px] font-medium text-muted-foreground"
-      >
-        {props.alt.charAt(0).toUpperCase()}
-      </span>
-    );
-  }
-  return (
-    <img
-      src={props.src}
-      alt=""
-      width={20}
-      height={20}
-      // NOT lazy. The console scrolls inside a nested container, and Chrome's
-      // lazy loading never brings these into view there — every icon sits
-      // pending forever while an eager load of the same URL succeeds instantly.
-      // A 20px favicon is not worth deferring anyway.
-      onError={() => setFailed(true)}
-      className="size-5 object-contain"
-    />
-  );
-}
 function ResultCard(props: { readonly row: Row }) {
   const { row } = props;
   return (
     >
       <div className="flex items-start justify-between gap-2">
         <span className="flex size-8 shrink-0 items-center justify-center">
-          <RowIcon {...(row.iconUrl ? { src: row.iconUrl } : {})} alt={row.title} />
+          <IntegrationFavicon
+            icon={row.icon}
+            fallbackSrc={row.fallbackSrc}
+            integrationId={row.integrationId}
+            url={row.url}
+            size={20}
+          />
         </span>
         {row.added ? (
           // The add happened HERE — the card is the receipt. View jumps to
         title,
         kindKey,
         ...(entry.preset.summary ? { description: entry.preset.summary } : {}),
-        ...(entry.preset.icon ? { iconUrl: entry.preset.icon } : {}),
+        ...(entry.preset.icon ? { icon: entry.preset.icon } : {}),
+        ...(entry.preset.fallbackIcon ? { fallbackSrc: entry.preset.fallbackIcon } : {}),
         onSelect: () => pickPreset(entry),
         // The rendered title is also what the add flow derives the namespace
         // from, so the card recognises an add made through it even when the
           kindKey: surface.kind,
           domain: entry.domain,
           ...(description ? { description } : {}),
-          iconUrl:
+          ...(known && "icon" in known && known.icon ? { icon: known.icon } : {}),
-            (known && "icon" in known ? known.icon : undefined) ?? catalogLogoUrl(entry.domain, 10),
+          url: `https://${entry.domain}`,
           onSelect: () =>
             void pickCatalogEntry(entry, surface.kind, title, rowKey, known ?? undefined),
           added:
             String(row.slug).includes(text)),
       )
       .map((row): Row => {
-        // The SAME icon cascade the sidebar runs — preset icon by exact
+        const integrationId = String(row.slug);
-        // identity, else the logo proxy from the integration's own URL. Two
+        const url =
-        // resolvers for one integration is how the sidebar and the picker
+          row.displayUrl ??
-        // ended up disagreeing about what DeepWiki looks like.
+          integrationInferredUrl({ id: integrationId, name: row.name }) ??
-        const iconUrl =
+          undefined;
-          integrationPresetIconUrl(
-            {
-              id: String(row.slug),
-              kind: row.kind,
-              name: row.name,
-              ...(row.displayUrl ? { url: row.displayUrl } : {}),
-            },
-            integrationPlugins,
-          ) ??
-          integrationFaviconUrl(
-            row.displayUrl ??
-              integrationInferredUrl({ id: String(row.slug), name: row.name }) ??
-              undefined,
-            10,
-          );
         return {
-          key: `installed-${String(row.slug)}`,
+          key: `installed-${integrationId}`,
-          testId: `installed-${String(row.slug)}`,
+          testId: `installed-${integrationId}`,
           title: row.name,
           kindKey: row.kind,
           ...(row.description && row.description !== row.name
             ? { description: tidyDescription(row.description) }
             : {}),
-          ...(iconUrl ? { iconUrl } : {}),
+          icon:
+            integrationPresetIconUrl(
+              {
+                id: integrationId,
+                kind: row.kind,
+                name: row.name,
+                ...(row.displayUrl ? { url: row.displayUrl } : {}),
+              },
+              integrationPlugins,
+            ) ?? undefined,
+          integrationId,
+          url,
           onSelect: () => {},
           added: true,
-          viewSlug: String(row.slug),
+          viewSlug: integrationId,
           busy: false,
         };
       });