Merge pull request #449 from corbitsdev/cl-7141-request_connections-fallback-link-pluginsconnectltidgt-is

Wire up request_connection's Plugins deep link

Author: TheGreatAxios

apps/web/src/pages/plugins-page.tsx

@@ -23,14 +23,17 @@ import {
 } from "@corbits/plugins-ui";
 import type { ResolvedPlugin } from "@workbench/connections/plugins";
 import { listPluginsForTenant } from "@workbench/connections/plugins";
+import { CONNECTOR_REGISTRY } from "@workbench/connections/registry";
+import { MCP_PRESETS } from "@workbench/connections/mcp-presets";
 import { Plus, SquaresFour, Warning } from "@corbits/icons";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 import { useBench } from "../bench-context";
 import { SKILLS_PATH_PREFIX } from "../path-ids";
 import {
   useClearPendingConnectProvider,
   usePendingConnectProvider,
+  useRequestPluginsConnect,
 } from "../shell/provider-health-context";
 import { StageTopBar } from "../shell/stage-top-bar";
 import {
@@ -85,40 +88,79 @@ export function PluginsRoute({
   // link silently no-oping, this renders a notice pointing back at the
   // gallery itself.
   const [connectDeepLinkNotFound, setConnectDeepLinkNotFound] = useState(false);
+  // A preset deep link's slug (CL-7141), passed to the MCP presets
+  // section so it can focus that preset's own card once its catalog
+  // has loaded — cleared as soon as the section has acted on it.
+  const [autoConnectPresetSlug, setAutoConnectPresetSlug] = useState<
+    string | null
+  >(null);
   const pendingConnectProvider = usePendingConnectProvider();
   const clearPendingConnectProvider = useClearPendingConnectProvider();
+  const requestPluginsConnect = useRequestPluginsConnect();
   const openPluginPanel = useCallback((plugin: ResolvedPlugin) => {
     setOpenPlugin(plugin);
     setConnectDeepLinkNotFound(false);
   }, []);
 
+  const [pluginsReloadKey, setPluginsReloadKey] = useState(0);
+  const [skillsReloadKey, setSkillsReloadKey] = useState(0);
+
   const reloadPlugins = useCallback(() => {
-    if (selectedTenantId === null) return;
-    listPluginsForTenant(selectedTenantId)
-      .then((plugins) => setPluginsState({ status: "ready", plugins }))
-      .catch((cause: unknown) =>
-        setPluginsState({ status: "error", message: messageOf(cause) }),
-      );
-  }, [selectedTenantId]);
+    setPluginsReloadKey((key) => key + 1);
+  }, []);
 
   const reloadSkills = useCallback(() => {
-    if (selectedTenantId === null) return;
-    listSkills(selectedTenantId)
-      .then((skills) => setSkillsState({ status: "ready", skills }))
-      .catch((cause: unknown) =>
-        setSkillsState({ status: "error", message: messageOf(cause) }),
-      );
-  }, [selectedTenantId]);
+    setSkillsReloadKey((key) => key + 1);
+  }, []);
+
+  // Guarded by `cancelled` (same pattern as settings-ui's `people-section`)
+  // so a tenant switch mid-flight can't have the previous tenant's late
+  // response overwrite the newly selected tenant's state. The loading
+  // skeleton only shows for a tenant this page hasn't fetched yet — an
+  // imperative reload (a connect/disconnect's `onChanged`, the error
+  // screen's Retry) keeps whatever is already on screen and swaps in the
+  // fresh data once it lands, the same way it worked before cancellation
+  // was added.
+  const pluginsLoadedTenantRef = useRef<string | null>(null);
+  const skillsLoadedTenantRef = useRef<string | null>(null);
 
   useEffect(() => {
-    setPluginsState({ status: "loading" });
-    reloadPlugins();
-  }, [reloadPlugins]);
+    if (selectedTenantId === null) return;
+    let cancelled = false;
+    const isTenantChange = pluginsLoadedTenantRef.current !== selectedTenantId;
+    pluginsLoadedTenantRef.current = selectedTenantId;
+    if (isTenantChange) setPluginsState({ status: "loading" });
+    listPluginsForTenant(selectedTenantId)
+      .then((plugins) => {
+        if (!cancelled) setPluginsState({ status: "ready", plugins });
+      })
+      .catch((cause: unknown) => {
+        if (!cancelled)
+          setPluginsState({ status: "error", message: messageOf(cause) });
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [selectedTenantId, pluginsReloadKey]);
 
   useEffect(() => {
-    setSkillsState({ status: "loading" });
-    reloadSkills();
-  }, [reloadSkills]);
+    if (selectedTenantId === null) return;
+    let cancelled = false;
+    const isTenantChange = skillsLoadedTenantRef.current !== selectedTenantId;
+    skillsLoadedTenantRef.current = selectedTenantId;
+    if (isTenantChange) setSkillsState({ status: "loading" });
+    listSkills(selectedTenantId)
+      .then((skills) => {
+        if (!cancelled) setSkillsState({ status: "ready", skills });
+      })
+      .catch((cause: unknown) => {
+        if (!cancelled)
+          setSkillsState({ status: "error", message: messageOf(cause) });
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [selectedTenantId, skillsReloadKey]);
 
   // The shell banner's "Fix it" deep link (CL-6092): once the gallery has
   // loaded, pick up any pending provider id and open its connect panel —
@@ -143,6 +185,42 @@ export function PluginsRoute({
     openPluginPanel,
   ]);
 
+  // `request_connection`'s fallback link (CL-7141): `/plugins?connect=<id>`
+  // hands the connector id off through the same `requestPluginsConnect`
+  // path the shell banner's "Fix it" click uses, then strips only the
+  // `connect` param — any other query param this route is ever opened
+  // with (e.g. an in-flight `mcpOauth` return) must survive the rewrite.
+  // A curated MCP preset (Exa, Granola, Linear, ...) has no fixed
+  // `CONNECTOR_REGISTRY` id, so its own deep link is `mcp:<slug>`
+  // (`presetDeepLink` in `packages/connections-tools/src/tool.ts`) and
+  // is matched against the preset catalog instead. An id neither side
+  // recognizes (typo, stale link) is ignored rather than surfaced as a
+  // notice.
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const connectId = params.get("connect");
+    if (connectId === null) return;
+    params.delete("connect");
+    const rest = params.toString();
+    window.history.replaceState(
+      null,
+      "",
+      rest === ""
+        ? window.location.pathname
+        : `${window.location.pathname}?${rest}`,
+    );
+    if (connectId.startsWith("mcp:")) {
+      const slug = connectId.slice("mcp:".length);
+      if (MCP_PRESETS.some((preset) => preset.slug === slug)) {
+        setAutoConnectPresetSlug(slug);
+      }
+      return;
+    }
+    if (CONNECTOR_REGISTRY[connectId] !== undefined) {
+      requestPluginsConnect(connectId);
+    }
+  }, [requestPluginsConnect]);
+
   function openSkill(name: string) {
     navigate(`${SKILLS_PATH_PREFIX}/${encodeURIComponent(name)}`);
   }
@@ -256,6 +334,8 @@ export function PluginsRoute({
           activeTab={activeTab}
           onTabChange={setActiveTab}
           query={galleryQuery}
+          autoConnectPresetSlug={autoConnectPresetSlug}
+          onAutoConnectPresetHandled={() => setAutoConnectPresetSlug(null)}
         />
       </PageShell>
       <PluginConnectPanel