@agent-native/core-corpus 0.210.2 → 0.211.0

package/corpus/templates/mail/app/components/email/IntegrationsSidebar.tsx

@@ -1,6 +1,13 @@
 import { useT } from "@agent-native/core/client/i18n";
+import {
+  useCreateMcpServer,
+  useMcpServers,
+  type CreateMcpServerArgs,
+} from "@agent-native/core/client/resources";
+import { buildSettingsRoute } from "@agent-native/core/navigation";
 import { useSendToAgentChat } from "@agent-native/toolkit/app/chat/composer";
 import { ExtensionSlot } from "@agent-native/toolkit/app/extensions";
+import { McpIntegrationDialog } from "@agent-native/toolkit/app/resources";
 import {
   IconPlus,
   IconCheck,
@@ -8,8 +15,10 @@ import {
   IconChevronLeft,
   IconArrowUp,
 } from "@tabler/icons-react";
-import { useState, useEffect, useRef } from "react";
+import { useCallback, useState, useEffect, useRef } from "react";
+import { useNavigate } from "react-router";
 
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -36,6 +45,10 @@ import {
   usePylonContact,
   isAuthError,
 } from "@/hooks/use-integrations";
+import {
+  canManageGongConnection,
+  hasConnectedGongMcpServer,
+} from "@/lib/gong-connection";
 import type { MailIntegrationStatuses } from "@/lib/integration-status";
 import { isMcpEmbedSurface } from "@/lib/mcp-embed";
 import { cn } from "@/lib/utils";
@@ -58,9 +71,11 @@ interface IntegrationDef {
   id: ProviderId;
   name: string;
   descriptionKey: string;
-  keyPlaceholder: string;
-  helpUrl: string;
-  helpSteps: string[];
+  keyPlaceholder?: string;
+  keyPlaceholderKey?: string;
+  helpUrl?: string;
+  helpSteps?: string[];
+  helpStepKeys?: string[];
   logo: React.ReactNode;
 }
 
@@ -131,13 +146,9 @@ const INTEGRATIONS: IntegrationDef[] = [
     id: "gong",
     name: "Gong",
     descriptionKey: "mail.integrations.gongDescription",
-    keyPlaceholder: "Gong API key or access_key:secret...",
+    keyPlaceholderKey: "mail.integrations.gongKeyPlaceholder",
     helpUrl: "https://app.gong.io/company/api",
-    helpSteps: [
-      "Go to Gong > Company Settings > API",
-      "Generate API credentials",
-      "Copy the access key (or key:secret)",
-    ],
+    helpStepKeys: ["mail.integrations.gongKeyFormatHint"],
     logo: (
       <svg
         viewBox="0 0 42 42"
@@ -275,8 +286,35 @@ export function IntegrationsSidebar({
 }
 
 function IntegrationSetup({ statuses }: { statuses: MailIntegrationStatuses }) {
+  const t = useT();
+  const navigate = useNavigate();
   const [expanded, setExpanded] = useState(false);
   const [configuring, setConfiguring] = useState<ProviderId | null>(null);
+  const [gongDialogOpen, setGongDialogOpen] = useState(false);
+  const mcpServersQuery = useMcpServers({ defer: true });
+  const createMcpServer = useCreateMcpServer();
+  const mcpServers = mcpServersQuery.data;
+  const canManageGong = canManageGongConnection(mcpServers);
+  const canCreateOrgMcp = Boolean(mcpServers?.orgId && canManageGong);
+  const gongConnected = hasConnectedGongMcpServer(mcpServers);
+  const canRetryGongAccessCheck =
+    mcpServersQuery.isError && (!mcpServers || canManageGong);
+  const handleCreateMcpServer = useCallback(
+    async (args: CreateMcpServerArgs) => {
+      if (args.scope === "org" && !canCreateOrgMcp) {
+        throw new Error(t("mail.error.failedToConnect"));
+      }
+      return createMcpServer.mutateAsync(args);
+    },
+    [canCreateOrgMcp, createMcpServer, t],
+  );
+  const gongPermissionError = canRetryGongAccessCheck ? (
+    <GongPermissionLookupError
+      isRetrying={mcpServersQuery.isFetching}
+      onRetry={() => void mcpServersQuery.refetch()}
+    />
+  ) : null;
+  const showGong = canManageGong || statuses.gong || gongConnected;
 
   if (configuring) {
     const def = INTEGRATIONS.find((i) => i.id === configuring)!;
@@ -289,17 +327,19 @@ function IntegrationSetup({ statuses }: { statuses: MailIntegrationStatuses }) {
     const connectedCount = [
       statuses.apollo,
       statuses.hubspot,
-      statuses.gong,
+      statuses.gong || gongConnected,
       statuses.pylon,
     ].filter(Boolean).length;
+    const visibleIntegrationCount = INTEGRATIONS.length - Number(!showGong);
     return (
       <div className="px-4 py-2">
+        {gongPermissionError}
         <button
           onClick={() => setExpanded(true)}
           className="text-[11px] text-muted-foreground/70 hover:text-muted-foreground transition-colors"
         >
           {connectedCount > 0
-            ? `Integrations (${connectedCount}/${INTEGRATIONS.length})`
+            ? `Integrations (${connectedCount}/${visibleIntegrationCount})`
             : "Add integrations"}
         </button>
       </div>
@@ -308,6 +348,7 @@ function IntegrationSetup({ statuses }: { statuses: MailIntegrationStatuses }) {
 
   return (
     <div className="px-4 py-3">
+      {gongPermissionError}
       <div className="flex items-center justify-between mb-3">
         <h4 className="text-[11px] font-medium text-muted-foreground uppercase tracking-wider">
           Integrations
@@ -320,19 +361,74 @@ function IntegrationSetup({ statuses }: { statuses: MailIntegrationStatuses }) {
         </button>
       </div>
       <div className="space-y-1.5">
-        {INTEGRATIONS.map((def) => {
-          const connected = statuses[def.id];
-          return (
-            <IntegrationRow
-              key={def.id}
-              def={def}
-              connected={connected}
-              onConfigure={() => setConfiguring(def.id)}
-            />
-          );
-        })}
+        {INTEGRATIONS.filter((def) => def.id !== "gong" || showGong).map(
+          (def) => {
+            const connected =
+              def.id === "gong"
+                ? statuses.gong || gongConnected
+                : statuses[def.id];
+            return (
+              <IntegrationRow
+                key={def.id}
+                def={def}
+                connected={connected}
+                mcpConnected={def.id === "gong" && gongConnected}
+                legacyConnected={def.id === "gong" && statuses.gong}
+                canManageMcpSetup={def.id !== "gong" || canManageGong}
+                onManage={() =>
+                  void navigate(buildSettingsRoute("integrations"))
+                }
+                onConfigure={() => {
+                  if (def.id === "gong") setGongDialogOpen(true);
+                  else setConfiguring(def.id);
+                }}
+                onLegacyConfigure={
+                  def.id === "gong" ? () => setConfiguring("gong") : undefined
+                }
+              />
+            );
+          },
+        )}
         <AddIntegrationButton />
       </div>
+      <McpIntegrationDialog
+        open={gongDialogOpen}
+        onOpenChange={setGongDialogOpen}
+        initialIntegrationId={gongDialogOpen ? "gong" : null}
+        defaultScope="org"
+        canCreateOrgMcp={canCreateOrgMcp}
+        hasOrg={Boolean(mcpServers?.orgId)}
+        onCreateMcpServer={handleCreateMcpServer}
+        onCreated={() => void mcpServersQuery.refetch()}
+      />
+    </div>
+  );
+}
+
+function GongPermissionLookupError({
+  isRetrying,
+  onRetry,
+}: {
+  isRetrying: boolean;
+  onRetry: () => void;
+}) {
+  const t = useT();
+
+  return (
+    <div className="mb-2 flex items-center justify-between gap-2" role="alert">
+      <p className="text-[11px] text-muted-foreground">
+        {t("mail.integrations.gongAccessCheckFailed")}
+      </p>
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        className="h-auto shrink-0 px-2 py-1 text-[11px]"
+        onClick={onRetry}
+        disabled={isRetrying}
+      >
+        {t(isRetrying ? "mail.error.retrying" : "mail.error.tryAgain")}
+      </Button>
     </div>
   );
 }
@@ -450,14 +546,26 @@ function AddIntegrationButton() {
 function IntegrationRow({
   def,
   connected,
+  mcpConnected = false,
+  legacyConnected = false,
+  canManageMcpSetup = true,
+  onManage,
   onConfigure,
+  onLegacyConfigure,
 }: {
   def: IntegrationDef;
   connected: boolean;
+  mcpConnected?: boolean;
+  legacyConnected?: boolean;
+  canManageMcpSetup?: boolean;
+  onManage?: () => void;
   onConfigure: () => void;
+  onLegacyConfigure?: () => void;
 }) {
   const t = useT();
   const { disconnect } = useIntegration(def.id);
+  const showSettings =
+    def.id !== "gong" || canManageMcpSetup || legacyConnected;
 
   return (
     <div className="flex items-center gap-2.5 py-1.5 group relative">
@@ -475,32 +583,70 @@ function IntegrationRow({
           <div className="h-5 w-5 rounded-full bg-emerald-500/20 flex items-center justify-center">
             <IconCheck className="h-3 w-3 text-emerald-400" />
           </div>
-          <DropdownMenu>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <DropdownMenuTrigger asChild>
-                  <button className="h-5 w-5 flex items-center justify-center rounded text-muted-foreground/30 hover:text-muted-foreground transition-colors">
-                    <IconSettings className="h-3.5 w-3.5" />
-                  </button>
-                </DropdownMenuTrigger>
-              </TooltipTrigger>
-              <TooltipContent>{t("mail.toolbar.settings")}</TooltipContent>
-            </Tooltip>
-            <DropdownMenuContent align="end" className="w-36">
-              <DropdownMenuItem
-                onClick={() => onConfigure()}
-                className="text-[12px] text-foreground/70"
-              >
-                {t("mail.integrations.updateKey")}
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                onClick={() => disconnect.mutate()}
-                className="text-[12px] text-red-400/80"
-              >
-                {t("mail.integrations.disconnect")}
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
+          {showSettings && (
+            <DropdownMenu>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <DropdownMenuTrigger asChild>
+                    <button
+                      aria-label={t("mail.toolbar.settings")}
+                      className="h-5 w-5 flex items-center justify-center rounded text-muted-foreground/30 hover:text-muted-foreground transition-colors"
+                    >
+                      <IconSettings className="h-3.5 w-3.5" />
+                    </button>
+                  </DropdownMenuTrigger>
+                </TooltipTrigger>
+                <TooltipContent>{t("mail.toolbar.settings")}</TooltipContent>
+              </Tooltip>
+              <DropdownMenuContent align="end" className="w-36">
+                {def.id === "gong" ? (
+                  <>
+                    {canManageMcpSetup && (
+                      <DropdownMenuItem
+                        onClick={mcpConnected ? onManage : onConfigure}
+                        className="text-[12px] text-foreground/70"
+                      >
+                        {mcpConnected
+                          ? t("mail.toolbar.settings")
+                          : t("mail.integrations.connect")}
+                      </DropdownMenuItem>
+                    )}
+                    {legacyConnected && (
+                      <>
+                        <DropdownMenuItem
+                          onClick={onLegacyConfigure}
+                          className="text-[12px] text-foreground/70"
+                        >
+                          {t("mail.integrations.updateKey")}
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          onClick={() => disconnect.mutate()}
+                          className="text-[12px] text-destructive/80"
+                        >
+                          {t("mail.integrations.disconnect")}
+                        </DropdownMenuItem>
+                      </>
+                    )}
+                  </>
+                ) : (
+                  <>
+                    <DropdownMenuItem
+                      onClick={() => onConfigure()}
+                      className="text-[12px] text-foreground/70"
+                    >
+                      {t("mail.integrations.updateKey")}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onClick={() => disconnect.mutate()}
+                      className="text-[12px] text-destructive/80"
+                    >
+                      {t("mail.integrations.disconnect")}
+                    </DropdownMenuItem>
+                  </>
+                )}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
         </div>
       ) : (
         <button
@@ -552,7 +698,11 @@ function IntegrationKeyEntry({
             setApiKey(e.target.value);
             if (connect.error) connect.reset();
           }}
-          placeholder={def.keyPlaceholder}
+          placeholder={
+            def.keyPlaceholderKey
+              ? t(def.keyPlaceholderKey)
+              : def.keyPlaceholder
+          }
           autoFocus
           className="flex-1 min-w-0 rounded-md border border-border bg-background px-2 py-1 text-[12px] outline-none focus:border-primary/50 placeholder:text-muted-foreground/40"
         />
@@ -581,9 +731,12 @@ function IntegrationKeyEntry({
           {t("mail.integrations.getApiKey")}
         </p>
         <ol className="text-[11px] text-muted-foreground/50 space-y-0.5 list-decimal ps-3 mb-1.5">
-          {def.helpSteps.map((step, i) => (
+          {def.helpSteps?.map((step, i) => (
             <li key={i}>{step}</li>
           ))}
+          {def.helpStepKeys?.map((key) => (
+            <li key={key}>{t(key)}</li>
+          ))}
         </ol>
         <a
           href={def.helpUrl}
@@ -610,6 +763,7 @@ function IntegrationNotice({
   error: unknown;
   providerId: ProviderId;
 }) {
+  const t = useT();
   const authErr = isAuthError(error);
   const [reconnecting, setReconnecting] = useState(false);
   const def = INTEGRATIONS.find((i) => i.id === providerId)!;
@@ -641,7 +795,11 @@ function IntegrationNotice({
               setApiKey(e.target.value);
               if (connect.error) connect.reset();
             }}
-            placeholder={def.keyPlaceholder}
+            placeholder={
+              def.keyPlaceholderKey
+                ? t(def.keyPlaceholderKey)
+                : def.keyPlaceholder
+            }
             autoFocus
             className="flex-1 min-w-0 rounded-md border border-border bg-background px-2 py-1 text-[12px] outline-none focus:border-primary/50 placeholder:text-muted-foreground/40"
           />
@@ -1037,11 +1195,10 @@ function GongSection({ email }: { email: string }) {
 
   if (isLoading) return <SectionLoading />;
   if (!calls || calls.length === 0) {
-    if (error) {
+    if (error)
       return (
         <IntegrationNotice email={email} error={error} providerId="gong" />
       );
-    }
     return null;
   }
 

package/corpus/templates/mail/app/hooks/use-inbox-threads.ts

@@ -1,5 +1,7 @@
 import {
   callActionWithRetry,
+  currentActionQueryCacheBinding,
+  recordActionQueryBrowserPersist,
   useActionMutation,
 } from "@agent-native/core/client/hooks";
 import { agentNativeApiDisabledReason } from "@agent-native/core/client/host";
@@ -243,7 +245,20 @@ export function keepInboxProgressOrder(
   return { ...incoming, items };
 }
 
-let nextInboxSnapshotId = 0;
+// Pages restored from the persisted query cache keep the ids of the page load
+// that fetched them, so ids start from the clock and any fetch in this load
+// outranks a restored page instead of losing to it.
+const PAGE_LOAD_INBOX_SNAPSHOT_ID = Date.now();
+let nextInboxSnapshotId = PAGE_LOAD_INBOX_SNAPSHOT_ID;
+
+/** A restored page paints at once but is refetched on mount; this load's pages stay fresh. */
+export function inboxThreadsStaleTime(query: {
+  state: { data?: { clientSnapshotId?: number } };
+}): number {
+  return (query.state.data?.clientSnapshotId ?? 0) > PAGE_LOAD_INBOX_SNAPSHOT_ID
+    ? INBOX_THREADS_STALE_TIME_MS
+    : 0;
+}
 
 function readInboxQueryParams(key: QueryKey): Record<string, unknown> | null {
   const params = key[2];
@@ -297,6 +312,9 @@ function fetchInboxThreads(
   queryKey: QueryKey,
 ): Promise<InboxQueryResult> {
   const clientSnapshotId = ++nextInboxSnapshotId;
+  const query = qc.getQueryCache().find({ queryKey, exact: true });
+  const cacheBinding = currentActionQueryCacheBinding();
+  let response: Response | undefined;
   return callActionWithRetry<ListInboxThreadsResult>(
     "list-inbox-threads",
     input,
@@ -304,8 +322,14 @@ function fetchInboxThreads(
       method: "GET",
       signal,
       timeoutMs: INBOX_THREADS_REQUEST_TIMEOUT_MS,
+      onResponse: (next) => {
+        response = next;
+      },
     },
   ).then((data) => {
+    if (query && !signal.aborted) {
+      recordActionQueryBrowserPersist(query, response, cacheBinding);
+    }
     const incoming = { ...data, clientSnapshotId };
     publishInboxOverview(qc, input.accountEmails, {
       tabs: incoming.tabs,
@@ -361,7 +385,7 @@ export function useInboxThreads(
     enabled: (opts?.enabled ?? true) && !agentNativeApiDisabledReason(),
     retry: false,
     refetchInterval: inboxThreadsRefetchInterval,
-    staleTime: INBOX_THREADS_STALE_TIME_MS,
+    staleTime: inboxThreadsStaleTime,
     select: (data) => applyInboxMutationOverlay(qc, data) as InboxQueryResult,
   });
 }

package/corpus/templates/mail/app/i18n/en-US.ts

@@ -305,7 +305,11 @@ const messages = {
       openProviderSettings: "Open {{provider}} Settings",
       apolloDescription: "Contact enrichment & company data",
       hubspotDescription: "CRM contacts, deals & tickets",
-      gongDescription: "Recent calls & conversation intelligence",
+      gongDescription: "Gong call history",
+      gongAccessCheckFailed: "Couldn't check whether you can connect to Gong.",
+      gongKeyPlaceholder: "Gong API key",
+      gongKeyFormatHint:
+        "Enter the access key and secret as access_key:secret.",
       pylonDescription: "Support issues & account data",
       gongCalls: "Gong Calls",
       deals: "Deals",

package/corpus/templates/mail/app/lib/gong-connection.ts

@@ -0,0 +1,27 @@
+import type { McpServersList } from "@agent-native/core/client/resources";
+
+export function canManageGongConnection(
+  servers: McpServersList | undefined,
+): boolean {
+  if (!servers) return false;
+  if (servers.orgId === null) return true;
+  return servers.role === "owner" || servers.role === "admin";
+}
+
+export function hasConnectedGongMcpServer(
+  servers: McpServersList | undefined,
+): boolean {
+  if (!servers) return false;
+  return [...servers.user, ...servers.org].some(
+    (server) => server.status.state === "connected" && isGongMcpUrl(server.url),
+  );
+}
+
+function isGongMcpUrl(value: string): boolean {
+  if (!URL.canParse(value)) return false;
+  const url = new URL(value);
+  return (
+    url.origin === "https://mcp.gong.io" &&
+    url.pathname.replace(/\/+$/, "") === "/mcp"
+  );
+}