Move connect-agent above sources and preload plugin chunks (#494)

- Sources page: render McpInstallCard above the connected sources list so
  agent-pairing is the primary affordance on an empty workspace.
- Add optional `preload` to SourcePlugin and call it from
  ExecutorPluginsProvider on mount, so navigating into a plugin's add/edit
  page no longer trips Suspense waiting on the lazy chunk.
- Drop the visible "Loading…" Suspense fallback in sources-add — the
  preload now covers warm sessions, and a flash of nothing is better than
  a layout-shifting label on cold ones.

Author: RhysSullivan

packages/core/sdk/src/client.ts

@@ -13,6 +13,7 @@ import {
   createContext,
   createElement,
   useContext,
+  useEffect,
   useMemo,
   type ComponentType,
   type ReactNode,
@@ -130,6 +131,10 @@ export interface SourcePlugin {
     readonly sourceId: string;
   }>;
   readonly presets?: readonly SourcePreset[];
+  /** Trigger early download of the plugin's lazy component chunks (add/edit/etc.).
+   *  Call from the host on intent (hover/focus) so the chunks land before the
+   *  user navigates into the add page. Idempotent. */
+  readonly preload?: () => void;
 }
 
 // ---------------------------------------------------------------------------
@@ -269,6 +274,11 @@ export function ExecutorPluginsProvider(
     }),
     [plugins],
   );
+  // Kick off lazy chunk downloads for every source plugin once the host
+  // mounts, so navigating into an add/edit page doesn't suspend.
+  useEffect(() => {
+    for (const sp of value.sourcePlugins) sp.preload?.();
+  }, [value.sourcePlugins]);
   return createElement(ExecutorPluginsContext.Provider, { value }, children);
 }
 

packages/plugins/google-discovery/src/react/source-plugin.ts

@@ -2,12 +2,23 @@ import { lazy } from "react";
 import type { SourcePlugin } from "@executor-js/sdk/client";
 import { googleDiscoveryPresets } from "../sdk/presets";
 
+const importAdd = () => import("./AddGoogleDiscoverySource");
+const importEdit = () => import("./EditGoogleDiscoverySource");
+const importSummary = () => import("./GoogleDiscoverySourceSummary");
+const importSignIn = () => import("./GoogleDiscoverySignInButton");
+
 export const googleDiscoverySourcePlugin: SourcePlugin = {
   key: "googleDiscovery",
   label: "Google Discovery",
-  add: lazy(() => import("./AddGoogleDiscoverySource")),
-  edit: lazy(() => import("./EditGoogleDiscoverySource")),
-  summary: lazy(() => import("./GoogleDiscoverySourceSummary")),
-  signIn: lazy(() => import("./GoogleDiscoverySignInButton")),
+  add: lazy(importAdd),
+  edit: lazy(importEdit),
+  summary: lazy(importSummary),
+  signIn: lazy(importSignIn),
   presets: googleDiscoveryPresets,
+  preload: () => {
+    void importAdd();
+    void importEdit();
+    void importSummary();
+    void importSignIn();
+  },
 };

packages/plugins/graphql/src/react/source-plugin.ts

@@ -2,12 +2,23 @@ import { lazy } from "react";
 import type { SourcePlugin } from "@executor-js/sdk/client";
 import { graphqlPresets } from "../sdk/presets";
 
+const importAdd = () => import("./AddGraphqlSource");
+const importEdit = () => import("./EditGraphqlSource");
+const importSummary = () => import("./GraphqlSourceSummary");
+const importSignIn = () => import("./GraphqlSignInButton");
+
 export const graphqlSourcePlugin: SourcePlugin = {
   key: "graphql",
   label: "GraphQL",
-  add: lazy(() => import("./AddGraphqlSource")),
-  edit: lazy(() => import("./EditGraphqlSource")),
-  summary: lazy(() => import("./GraphqlSourceSummary")),
-  signIn: lazy(() => import("./GraphqlSignInButton")),
+  add: lazy(importAdd),
+  edit: lazy(importEdit),
+  summary: lazy(importSummary),
+  signIn: lazy(importSignIn),
   presets: graphqlPresets,
+  preload: () => {
+    void importAdd();
+    void importEdit();
+    void importSummary();
+    void importSignIn();
+  },
 };

packages/plugins/mcp/src/react/source-plugin.tsx

@@ -2,9 +2,13 @@ import { lazy, type ComponentProps, type ComponentType } from "react";
 import type { SourcePlugin } from "@executor-js/sdk/client";
 import { mcpPresets } from "../sdk/presets";
 
-const LazyAddMcpSource = lazy(() => import("./AddMcpSource"));
-const LazyEditMcpSource = lazy(() => import("./EditMcpSource"));
-const LazyMcpSignInButton = lazy(() => import("./McpSignInButton"));
+const importAdd = () => import("./AddMcpSource");
+const importEdit = () => import("./EditMcpSource");
+const importSignIn = () => import("./McpSignInButton");
+
+const LazyAddMcpSource = lazy(importAdd);
+const LazyEditMcpSource = lazy(importEdit);
+const LazyMcpSignInButton = lazy(importSignIn);
 
 type AddProps = ComponentProps<SourcePlugin["add"]>;
 
@@ -41,6 +45,11 @@ export const createMcpSourcePlugin = (
     edit: LazyEditMcpSource,
     signIn: LazyMcpSignInButton,
     presets,
+    preload: () => {
+      void importAdd();
+      void importEdit();
+      void importSignIn();
+    },
   };
 };
 

packages/plugins/openapi/src/react/source-plugin.ts

@@ -2,11 +2,20 @@ import { lazy } from "react";
 import type { SourcePlugin } from "@executor-js/sdk/client";
 import { openApiPresets } from "../sdk/presets";
 
+const importAdd = () => import("./AddOpenApiSource");
+const importEdit = () => import("./EditOpenApiSource");
+const importSummary = () => import("./OpenApiSourceSummary");
+
 export const openApiSourcePlugin: SourcePlugin = {
   key: "openapi",
   label: "OpenAPI",
-  add: lazy(() => import("./AddOpenApiSource")),
-  edit: lazy(() => import("./EditOpenApiSource")),
-  summary: lazy(() => import("./OpenApiSourceSummary")),
+  add: lazy(importAdd),
+  edit: lazy(importEdit),
+  summary: lazy(importSummary),
   presets: openApiPresets,
+  preload: () => {
+    void importAdd();
+    void importEdit();
+    void importSummary();
+  },
 };

packages/react/src/pages/sources-add.tsx

@@ -46,7 +46,7 @@ export function SourcesAddPage(props: {
   return (
     <div className="relative min-h-0 flex-1 overflow-y-auto">
       <div className="mx-auto flex min-h-full max-w-4xl flex-col px-6 py-10 lg:px-10 lg:py-14">
-        <Suspense fallback={<p className="text-sm text-muted-foreground">Loading…</p>}>
+        <Suspense fallback={null}>
           <AddComponent
             initialUrl={url}
             initialPreset={preset}

packages/react/src/pages/sources.tsx

@@ -81,6 +81,12 @@ export function SourcesPage() {
           </Button>
         </div>
 
+        <div className="mb-8">
+          <McpInstallCard />
+        </div>
+
+        <div className="mb-8 border-t border-border/50" />
+
         {AsyncResult.match(sources, {
           onInitial: () => <SourcesGridSkeleton />,
           onFailure: () => <p className="text-sm text-destructive">Failed to load sources</p>,
@@ -106,12 +112,6 @@ export function SourcesPage() {
             );
           },
         })}
-
-        <div className="mb-8 border-t border-border/50" />
-
-        <div className="mb-8">
-          <McpInstallCard />
-        </div>
       </div>
 
       <ConnectDialog open={connectOpen} onOpenChange={setConnectOpen} />