@agent-native/core 0.106.3 → 0.107.0

package/corpus/core/src/client/integrations/IntegrationsPanel.tsx

@@ -14,6 +14,7 @@ import {
 } from "@tabler/icons-react";
 import React, { useState, useCallback, useEffect } from "react";
 
+import { AgentAskPopover } from "../AgentAskPopover.js";
 import { agentNativePath } from "../api-path.js";
 import {
   Tooltip,
@@ -511,6 +512,14 @@ export function IntegrationsPanel() {
         <div className="text-[10px] font-medium text-muted-foreground mb-1.5">
           {t("integrations.addChatIntegration")}
         </div>
+        <AgentAskPopover
+          label={t("integrations.addSomething")}
+          title={t("integrations.addSomethingTitle")}
+          placeholder={t("integrations.addSomethingPlaceholder")}
+          prompt=""
+          context="The user wants to add a chat or workspace integration that is not in the current directory. Research the provider's official OAuth or MCP setup, explain any app registration or allowlist requirements, and add a reusable integration preset when it is supported. Never ask the user to paste credentials into a prompt."
+          className="mb-2 h-7 w-full justify-center border-dashed px-2 text-[10px]"
+        />
         <AddIntegrationPicker
           connectedIds={connectedIds}
           onSelect={(p) => {
@@ -533,17 +542,27 @@ export function IntegrationsPanel() {
             {t("integrations.chatIntegrationsDescription")}
           </div>
         </div>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <button
-              onClick={() => setShowPicker(true)}
-              className="flex h-5 w-5 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50"
-            >
-              <IconPlus size={12} />
-            </button>
-          </TooltipTrigger>
-          <TooltipContent>{t("integrations.addIntegration")}</TooltipContent>
-        </Tooltip>
+        <div className="flex items-center gap-1">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                onClick={() => setShowPicker(true)}
+                className="flex h-5 w-5 items-center justify-center rounded text-muted-foreground hover:bg-accent/50 hover:text-foreground"
+              >
+                <IconPlus size={12} />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>{t("integrations.addIntegration")}</TooltipContent>
+          </Tooltip>
+          <AgentAskPopover
+            label={t("integrations.addSomething")}
+            title={t("integrations.addSomethingTitle")}
+            placeholder={t("integrations.addSomethingPlaceholder")}
+            prompt=""
+            context="The user wants to add a chat or workspace integration that is not in the current directory. Research the provider's official OAuth or MCP setup, explain any app registration or allowlist requirements, and add a reusable integration preset when it is supported. Never ask the user to paste credentials into a prompt."
+            className="h-7 px-2 text-[10px]"
+          />
+        </div>
       </div>
 
       {loading ? (

package/corpus/core/src/client/resources/McpConnectionSuggestion.tsx

@@ -0,0 +1,240 @@
+import {
+  IconArrowUpRight,
+  IconLoader2,
+  IconPlugConnected,
+  IconX,
+} from "@tabler/icons-react";
+import { useEffect, useMemo, useState } from "react";
+
+import { agentNativePath } from "../api-path.js";
+import { useT } from "../i18n.js";
+import {
+  buildMcpOAuthStartUrl,
+  findMcpIntegrationForText,
+  getDefaultMcpIntegrations,
+  isMcpConnectionFailureText,
+  type DefaultMcpIntegration,
+} from "./mcp-integration-catalog.js";
+import { McpIntegrationDialog } from "./McpIntegrationDialog.js";
+import {
+  useCreateMcpServer,
+  useMcpServers,
+  type McpServer,
+} from "./use-mcp-servers.js";
+
+export type McpConnectionSuggestionVariant = "composer" | "response";
+
+interface McpConnectionSuggestionProps {
+  text: string;
+  contextText?: string;
+  variant?: McpConnectionSuggestionVariant;
+}
+
+function compareUrl(value: string): string {
+  try {
+    const url = new URL(value.trim());
+    url.hash = "";
+    return url.toString().replace(/\/+$/, "");
+  } catch {
+    return value.trim().replace(/\/+$/, "");
+  }
+}
+
+function isConnected(
+  integration: DefaultMcpIntegration,
+  servers: McpServer[],
+): boolean {
+  const targetUrl = compareUrl(integration.url);
+  return servers.some(
+    (server) =>
+      server.status.state === "connected" &&
+      compareUrl(server.url) === targetUrl,
+  );
+}
+
+function returnUrl(): string {
+  if (typeof window === "undefined") return "/";
+  return (
+    window.location.pathname + window.location.search + window.location.hash
+  );
+}
+
+function canStartOAuth(integration: DefaultMcpIntegration): boolean {
+  return (
+    integration.authMode === "oauth" &&
+    integration.connectionMode === "oauth" &&
+    integration.availability === "ready"
+  );
+}
+
+export function McpConnectionSuggestion({
+  text,
+  contextText = "",
+  variant = "composer",
+}: McpConnectionSuggestionProps) {
+  const t = useT();
+  const mcpServersQuery = useMcpServers();
+  const createMcpServer = useCreateMcpServer();
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [dismissedId, setDismissedId] = useState<string | null>(null);
+  const [connecting, setConnecting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const integrations = useMemo(() => getDefaultMcpIntegrations(), []);
+  const textIntegration = useMemo(
+    () => findMcpIntegrationForText(text, integrations),
+    [integrations, text],
+  );
+  const contextIntegration = useMemo(
+    () =>
+      contextText ? findMcpIntegrationForText(contextText, integrations) : null,
+    [contextText, integrations],
+  );
+  const integration =
+    variant === "response" &&
+    textIntegration &&
+    contextIntegration &&
+    textIntegration.id !== contextIntegration.id
+      ? null
+      : (textIntegration ?? contextIntegration);
+  const servers = useMemo(
+    () => [
+      ...(mcpServersQuery.data?.user ?? []),
+      ...(mcpServersQuery.data?.org ?? []),
+    ],
+    [mcpServersQuery.data],
+  );
+  const connected = integration ? isConnected(integration, servers) : false;
+  const shouldSuggest =
+    mcpServersQuery.isSuccess &&
+    integration &&
+    !connected &&
+    dismissedId !== integration.id &&
+    (variant === "composer" || isMcpConnectionFailureText(text));
+
+  useEffect(() => {
+    setError(null);
+    setConnecting(false);
+  }, [integration?.id, variant]);
+
+  if (!shouldSuggest) return null;
+
+  const connect = async () => {
+    if (!integration || connecting) return;
+    setError(null);
+
+    if (canStartOAuth(integration)) {
+      window.location.assign(
+        agentNativePath(
+          buildMcpOAuthStartUrl({
+            name: integration.name,
+            url: integration.url,
+            description: integration.description,
+            scope: "user",
+            returnUrl: returnUrl(),
+          }),
+        ),
+      );
+      return;
+    }
+
+    if (
+      integration.authMode === "none" &&
+      integration.connectionMode === "direct"
+    ) {
+      setConnecting(true);
+      try {
+        await createMcpServer.mutateAsync({
+          scope: "user",
+          name: integration.name,
+          url: integration.url,
+          description: integration.description,
+        });
+        setDismissedId(integration.id);
+      } catch (cause) {
+        setError(
+          cause instanceof Error ? cause.message : t("mcpIntegrations.failed"),
+        );
+      } finally {
+        setConnecting(false);
+      }
+      return;
+    }
+
+    setDialogOpen(true);
+  };
+
+  const actionLabel = canStartOAuth(integration)
+    ? t("mcpIntegrations.connectWithOAuth")
+    : integration.availability === "client-restricted" ||
+        integration.availability === "provider-setup"
+      ? t("mcpIntegrations.viewSetup")
+      : t("mcpIntegrations.connect");
+
+  return (
+    <>
+      <div
+        className={
+          variant === "response"
+            ? "mt-3 flex max-w-[520px] items-center gap-2 rounded-lg border border-primary/20 bg-primary/5 px-3 py-2 text-[12px]"
+            : "mx-auto mb-2 flex w-[min(100%,680px)] items-center gap-2 rounded-lg border border-primary/20 bg-primary/5 px-3 py-2 text-[12px]"
+        }
+        data-mcp-connection-suggestion={integration.id}
+      >
+        <div className="relative flex h-6 w-6 shrink-0 items-center justify-center overflow-hidden rounded-md border border-border bg-background text-[10px] font-semibold text-muted-foreground">
+          <span aria-hidden="true">{integration.name.slice(0, 1)}</span>
+          {integration.logoUrl && (
+            <img
+              src={integration.logoUrl}
+              alt=""
+              className="absolute h-5 w-5 object-contain"
+              onError={(event) => {
+                event.currentTarget.hidden = true;
+              }}
+            />
+          )}
+        </div>
+        <span className="min-w-0 flex-1 leading-snug text-foreground">
+          {t("mcpIntegrations.connectSuggestion", { name: integration.name })}
+        </span>
+        <button
+          type="button"
+          onClick={() => void connect()}
+          disabled={connecting}
+          className="inline-flex shrink-0 items-center gap-1 rounded-md bg-primary px-2.5 py-1.5 text-[11px] font-medium text-primary-foreground hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-60"
+        >
+          {connecting && <IconLoader2 className="h-3 w-3 animate-spin" />}
+          {!connecting && canStartOAuth(integration) && (
+            <IconPlugConnected className="h-3 w-3" />
+          )}
+          {actionLabel}
+          {!connecting && !canStartOAuth(integration) && (
+            <IconArrowUpRight className="h-3 w-3" />
+          )}
+        </button>
+        <button
+          type="button"
+          onClick={() => setDismissedId(integration.id)}
+          className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-background hover:text-foreground"
+          aria-label={t("mcpIntegrations.dismissSuggestion")}
+        >
+          <IconX className="h-3.5 w-3.5" />
+        </button>
+      </div>
+      {error && (
+        <div className="mx-auto mb-2 w-[min(100%,680px)] text-[11px] text-destructive">
+          {error}
+        </div>
+      )}
+      <McpIntegrationDialog
+        open={dialogOpen}
+        onOpenChange={setDialogOpen}
+        initialIntegrationId={integration.id}
+        defaultScope="user"
+        canCreateOrgMcp={false}
+        hasOrg={Boolean(mcpServersQuery.data?.orgId)}
+        onCreateMcpServer={(args) => createMcpServer.mutateAsync(args)}
+        onCreated={() => setDismissedId(integration.id)}
+      />
+    </>
+  );
+}

package/corpus/core/src/client/resources/McpIntegrationDialog.tsx

@@ -7,6 +7,7 @@ import {
 } from "@tabler/icons-react";
 import { useEffect, useMemo, useRef, useState } from "react";
 
+import { AgentAskPopover } from "../AgentAskPopover.js";
 import { agentNativePath } from "../api-path.js";
 import {
   Dialog,
@@ -45,6 +46,7 @@ type DialogMode = "catalog" | "form";
 interface McpIntegrationDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
+  initialIntegrationId?: string | null;
   defaultScope: McpServerScope;
   canCreateOrgMcp: boolean;
   hasOrg: boolean;
@@ -85,6 +87,7 @@ function compareUrl(value: string): string {
 export function McpIntegrationDialog({
   open,
   onOpenChange,
+  initialIntegrationId = null,
   defaultScope,
   canCreateOrgMcp,
   hasOrg,
@@ -138,21 +141,41 @@ export function McpIntegrationDialog({
     [defaultIntegrations, query],
   );
 
+  const selectedRequiresSetup = Boolean(
+    selected &&
+    (selected.connectionMode === "manual" ||
+      selected.availability === "provider-setup" ||
+      selected.availability === "client-restricted"),
+  );
+
   useEffect(() => {
     if (!open) return;
-    setMode(showCatalog ? "catalog" : "form");
+    const initialIntegration = initialIntegrationId
+      ? defaultIntegrations.find(
+          (integration) => integration.id === initialIntegrationId,
+        )
+      : null;
+    const initialDefaults =
+      createMcpIntegrationFormDefaults(initialIntegration);
+    setMode(initialIntegration || !showCatalog ? "form" : "catalog");
     setQuery("");
-    setSelected(null);
+    setSelected(initialIntegration ?? null);
     setScope(safeDefaultScope);
-    setName("");
-    setUrl("");
-    setDescription("");
-    setHeadersText("");
+    setName(initialDefaults.name);
+    setUrl(initialDefaults.url);
+    setDescription(initialDefaults.description);
+    setHeadersText(initialDefaults.headersText);
     setBusy(false);
     setQuickBusyId(null);
     setError(null);
     setTestResult(null);
-  }, [open, safeDefaultScope, showCatalog]);
+  }, [
+    defaultIntegrations,
+    initialIntegrationId,
+    open,
+    safeDefaultScope,
+    showCatalog,
+  ]);
 
   useEffect(() => {
     if (open && mode === "form") {
@@ -268,6 +291,12 @@ export function McpIntegrationDialog({
   };
 
   const quickConnect = (integration: DefaultMcpIntegration) => {
+    if (
+      integration.connectionMode === "manual" ||
+      integration.availability === "provider-setup"
+    ) {
+      return;
+    }
     if (integration.authMode === "oauth") {
       connectWithOAuth(integration);
       return;
@@ -399,6 +428,14 @@ export function McpIntegrationDialog({
               >
                 {t("mcpIntegrations.addYourOwn")}
               </button>
+              <AgentAskPopover
+                label={t("mcpIntegrations.addSomething")}
+                title={t("mcpIntegrations.addSomethingTitle")}
+                placeholder={t("mcpIntegrations.addSomethingPlaceholder")}
+                prompt=""
+                context="The user wants to add an MCP or provider integration that is not in the current directory. Research the provider's official remote MCP endpoint and OAuth, client-registration, or allowlist requirements. Prefer Streamable HTTP endpoints over legacy SSE, reuse an existing provider OAuth connector when appropriate, and never ask the user to paste credentials into a prompt. If this should become a reusable preset, update the integration catalog, official docs link, bundled logo, localization, and tests."
+                className="h-9 whitespace-nowrap border-dashed px-3 text-[12px] font-medium"
+              />
             </div>
             <div className="min-h-0 flex-1 overflow-y-auto px-7 pb-7">
               {error && (
@@ -412,42 +449,101 @@ export function McpIntegrationDialog({
                     compareUrl(integration.url),
                   );
                   const requiresHeaders = integration.authMode === "headers";
+                  const setupOnly =
+                    integration.connectionMode === "manual" ||
+                    integration.availability === "provider-setup" ||
+                    integration.availability === "client-restricted";
                   return (
                     <article
                       key={integration.id}
                       className="flex min-h-[128px] flex-col rounded-md border border-border bg-card p-4 transition-colors hover:border-border/80 hover:bg-accent/20"
                     >
-                      <h3 className="truncate text-[13px] font-semibold text-foreground">
-                        {integration.name}
-                      </h3>
+                      <div className="flex items-center gap-3">
+                        <div className="relative flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-md border border-border bg-background text-[11px] font-semibold text-muted-foreground">
+                          <span aria-hidden="true">
+                            {integration.name.slice(0, 1)}
+                          </span>
+                          <img
+                            src={integration.logoUrl}
+                            alt=""
+                            loading="lazy"
+                            decoding="async"
+                            className="absolute inset-1 h-6 w-6 object-contain"
+                            onError={(event) => {
+                              event.currentTarget.hidden = true;
+                            }}
+                          />
+                        </div>
+                        <div className="min-w-0">
+                          <h3 className="truncate text-[13px] font-semibold text-foreground">
+                            {integration.name}
+                          </h3>
+                          {integration.availability !== "ready" && (
+                            <span className="mt-0.5 inline-flex rounded-full border border-amber-500/20 bg-amber-500/5 px-1.5 py-0.5 text-[9px] font-medium text-amber-700 dark:text-amber-300">
+                              {integration.availability === "beta"
+                                ? t("mcpIntegrations.status.beta")
+                                : integration.availability ===
+                                    "client-restricted"
+                                  ? t("mcpIntegrations.status.clientRestricted")
+                                  : t("mcpIntegrations.status.setupRequired")}
+                            </span>
+                          )}
+                          <span className="ms-1 mt-0.5 inline-flex rounded-full border border-border/70 bg-muted/40 px-1.5 py-0.5 text-[9px] font-medium text-muted-foreground">
+                            {integration.verification === "verified"
+                              ? t("mcpIntegrations.status.verified")
+                              : integration.verification === "restricted"
+                                ? t("mcpIntegrations.status.restricted")
+                                : t("mcpIntegrations.status.preflightOnly")}
+                          </span>
+                        </div>
+                      </div>
                       <p className="mt-1 line-clamp-2 flex-1 text-[12px] leading-relaxed text-muted-foreground">
                         {t(integration.descriptionKey)}
                       </p>
+                      {integration.setupNoteKey && (
+                        <p className="mt-2 line-clamp-3 text-[10px] leading-relaxed text-amber-700 dark:text-amber-300">
+                          {t(integration.setupNoteKey)}
+                        </p>
+                      )}
                       <div className="mt-3 flex items-center gap-2">
-                        <button
-                          type="button"
-                          onClick={() => quickConnect(integration)}
-                          disabled={busy || connected}
-                          className={cn(
-                            "inline-flex h-8 flex-1 items-center justify-center gap-1.5 rounded-md px-2.5 text-[12px] font-medium",
-                            connected
-                              ? "border border-border bg-muted text-muted-foreground"
-                              : "bg-primary text-primary-foreground hover:bg-primary/90",
-                            (busy || connected) &&
-                              "cursor-not-allowed opacity-70",
-                          )}
-                        >
-                          {quickBusyId === integration.id ? (
-                            <IconLoader2 className="h-3.5 w-3.5 animate-spin" />
-                          ) : null}
-                          {connected
-                            ? t("mcpIntegrations.connected")
-                            : integration.authMode === "oauth"
+                        {connected ? (
+                          <button
+                            type="button"
+                            disabled
+                            className="inline-flex h-8 flex-1 cursor-not-allowed items-center justify-center gap-1.5 rounded-md border border-border bg-muted px-2.5 text-[12px] font-medium text-muted-foreground opacity-70"
+                          >
+                            {t("mcpIntegrations.connected")}
+                          </button>
+                        ) : setupOnly ? (
+                          <a
+                            href={integration.docsUrl}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="inline-flex h-8 flex-1 items-center justify-center gap-1.5 rounded-md border border-border bg-background px-2.5 text-[12px] font-medium text-foreground hover:bg-accent"
+                          >
+                            {t("mcpIntegrations.viewSetup")}
+                            <IconExternalLink className="h-3.5 w-3.5" />
+                          </a>
+                        ) : (
+                          <button
+                            type="button"
+                            onClick={() => quickConnect(integration)}
+                            disabled={busy}
+                            className={cn(
+                              "inline-flex h-8 flex-1 items-center justify-center gap-1.5 rounded-md bg-primary px-2.5 text-[12px] font-medium text-primary-foreground hover:bg-primary/90",
+                              busy && "cursor-not-allowed opacity-70",
+                            )}
+                          >
+                            {quickBusyId === integration.id ? (
+                              <IconLoader2 className="h-3.5 w-3.5 animate-spin" />
+                            ) : null}
+                            {integration.authMode === "oauth"
                               ? t("mcpIntegrations.connectWithOAuth")
                               : requiresHeaders
                                 ? t("mcpIntegrations.configure")
                                 : t("mcpIntegrations.connect")}
-                        </button>
+                          </button>
+                        )}
                         {integration.docsUrl && (
                           <Tooltip>
                             <TooltipTrigger asChild>
@@ -638,7 +734,16 @@ export function McpIntegrationDialog({
               >
                 {t("mcpIntegrations.test")}
               </button>
-              {!selected && (
+              {selected?.authMode === "oauth" && !selectedRequiresSetup ? (
+                <button
+                  type="button"
+                  onClick={() => connectWithOAuth(selected)}
+                  disabled={!name.trim() || !url.trim() || busy}
+                  className="rounded-md border border-border bg-background px-3 py-1.5 text-[12px] font-medium text-foreground hover:bg-accent disabled:pointer-events-none disabled:opacity-40"
+                >
+                  {t("mcpIntegrations.connectWithOAuth")}
+                </button>
+              ) : !selected ? (
                 <button
                   type="button"
                   onClick={connectCustomWithOAuth}
@@ -647,16 +752,30 @@ export function McpIntegrationDialog({
                 >
                   {t("mcpIntegrations.connectWithOAuth")}
                 </button>
+              ) : null}
+              {selectedRequiresSetup ? (
+                selected?.docsUrl ? (
+                  <a
+                    href={selected.docsUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="inline-flex min-w-[92px] items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-[12px] font-medium text-primary-foreground hover:bg-primary/90"
+                  >
+                    {t("mcpIntegrations.viewSetup")}
+                    <IconExternalLink className="h-3 w-3" />
+                  </a>
+                ) : null
+              ) : (
+                <button
+                  type="button"
+                  onClick={submitForm}
+                  disabled={!name.trim() || !url.trim() || busy}
+                  className="inline-flex min-w-[92px] items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-[12px] font-medium text-primary-foreground hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-40"
+                >
+                  {busy && <IconLoader2 className="h-3.5 w-3.5 animate-spin" />}
+                  {t("mcpIntegrations.connect")}
+                </button>
               )}
-              <button
-                type="button"
-                onClick={submitForm}
-                disabled={!name.trim() || !url.trim() || busy}
-                className="inline-flex min-w-[92px] items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-[12px] font-medium text-primary-foreground hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-40"
-              >
-                {busy && <IconLoader2 className="h-3.5 w-3.5 animate-spin" />}
-                {t("mcpIntegrations.connect")}
-              </button>
             </div>
           </>
         )}