@graph8/sdk 0.370.0 → 0.374.0

package/blocks/integrations/block.json

@@ -12,25 +12,63 @@
     "foundation"
   ],
   "operations": [
-    "list_crm_syncs_crm_syncs_get",
-    "list_connections_integrations_connections_get",
-    "get_slack_status_integrations_slack_status_get",
-    "get_google_workspace_status_integrations_google_workspace_get",
-    "get_roam_status_integrations_roam_status_get",
+    "cancel_migration_integrations_migrations__migration_id__cancel_post",
+    "confirm_migration_integrations_migrations__migration_id__confirm_post",
+    "create_webhook_webhooks_post",
     "delete_connection_integrations_connections__connection_id__delete",
-    "get_crm_status_crm_syncs__provider__status_get",
+    "delete_webhook_webhooks__webhook_id__delete",
+    "disconnect_sugarcrm_integrations_sugarcrm_delete",
+    "discover_crm_fields_integrations_crm_fields_get",
+    "get_crm_company_integrations_crm_connections__connection_id__companies__company_id__get",
+    "get_crm_connection_integrations_crm_connections__connection_id__get",
+    "get_crm_connection_metadata_integrations_crm_connections__connection_id__metadata_get",
+    "get_crm_connection_status_integrations_crm_connections__connection_id__status_get",
+    "get_crm_contact_integrations_crm_connections__connection_id__contacts__contact_id__get",
+    "get_crm_deal_integrations_crm_connections__connection_id__deals__deal_id__get",
     "get_crm_fields_crm_syncs__provider__fields_get",
-    "set_push_sync_enabled_integrations_crm_sync_push_enabled_put",
-    "set_pull_sync_enabled_integrations_crm_sync_pull_enabled_put",
+    "get_crm_lead_integrations_crm_connections__connection_id__leads__lead_id__get",
+    "get_crm_status_crm_syncs__provider__status_get",
+    "get_google_workspace_status_integrations_google_workspace_get",
+    "get_last_completed_migration_integrations_connections__connection_id__last_migration_get",
+    "get_migration_status_integrations_migrations__migration_id__get",
+    "get_roam_status_integrations_roam_status_get",
+    "get_slack_status_integrations_slack_status_get",
     "get_sync_job_integrations_crm_sync_jobs__job_id__get",
-    "push_contacts_to_crm_crm_syncs__provider__contacts_push_post",
-    "list_webhooks_webhooks_get",
+    "get_webhook_webhooks__webhook_id__get",
+    "list_ad_account_health_audience_syncs_account_health_get",
+    "list_ad_accounts_audience_syncs_accounts_get",
+    "list_ad_platforms_audience_syncs_platforms_get",
+    "list_connections_integrations_connections_get",
+    "list_crm_activities_integrations_crm_activities_get",
+    "list_crm_companies_integrations_crm_connections__connection_id__companies_get",
+    "list_crm_contact_activities_integrations_crm_connections__connection_id__contacts__contact_id__activities_get",
+    "list_crm_contacts_integrations_crm_connections__connection_id__contacts_get",
+    "list_crm_deals_integrations_crm_connections__connection_id__deals_get",
+    "list_crm_leads_integrations_crm_connections__connection_id__leads_get",
+    "list_crm_syncs_crm_syncs_get",
+    "list_google_drive_folder_files_integrations_google_workspace_folders__folder_id__files_get",
+    "list_google_drive_folders_integrations_google_workspace_folders_get",
+    "list_lead_statuses_integrations_crm_sync_leads_statuses_get",
+    "list_mappable_graph8_fields_integrations_crm_fields_mappable_get",
+    "list_webhook_deliveries_webhooks__webhook_id__deliveries_get",
     "list_webhook_events_webhooks_events_get",
-    "create_webhook_webhooks_post",
-    "update_webhook_webhooks__webhook_id__patch",
+    "list_webhooks_webhooks_get",
+    "preview_lead_push_integrations_crm_sync_leads_push_preview_get",
+    "pull_all_contacts_integrations_crm_sync_contacts_pull_post",
+    "pull_all_deals_integrations_crm_sync_deals_pull_post",
+    "pull_all_leads_integrations_crm_sync_leads_pull_post",
+    "push_all_contacts_integrations_crm_sync_contacts_push_post",
+    "push_all_deals_integrations_crm_sync_deals_push_post",
+    "push_all_leads_integrations_crm_sync_leads_push_post",
+    "push_contacts_to_crm_crm_syncs__provider__contacts_push_post",
     "rotate_webhook_secret_webhooks__webhook_id__rotate_secret_post",
-    "list_webhook_deliveries_webhooks__webhook_id__deliveries_get",
-    "delete_webhook_webhooks__webhook_id__delete"
+    "set_pull_sync_enabled_integrations_crm_sync_pull_enabled_put",
+    "set_push_sync_enabled_integrations_crm_sync_push_enabled_put",
+    "start_delta_sync_integrations_migrations_delta_sync_post",
+    "start_migration_discovery_integrations_migrations_discovery_post",
+    "test_google_workspace_connection_integrations_google_workspace_test_post",
+    "update_webhook_webhooks__webhook_id__patch",
+    "validate_sugarcrm_integrations_sugarcrm_validate_post"
   ],
   "components": [
     {
@@ -122,13 +160,137 @@
         "list_webhook_deliveries_webhooks__webhook_id__deliveries_get",
         "update_webhook_webhooks__webhook_id__patch",
         "rotate_webhook_secret_webhooks__webhook_id__rotate_secret_post",
-        "delete_webhook_webhooks__webhook_id__delete"
+        "delete_webhook_webhooks__webhook_id__delete",
+        "get_webhook_webhooks__webhook_id__get"
+      ],
+      "tiers": [
+        "read",
+        "external",
+        "destructive"
+      ]
+    },
+    {
+      "name": "ConnectionHealth",
+      "file": "components/connection-health.tsx",
+      "purpose": "Live status, connection record, CRM account details and the last historic import for one CRM connection.",
+      "operations": [
+        "get_crm_connection_integrations_crm_connections__connection_id__get",
+        "get_crm_connection_status_integrations_crm_connections__connection_id__status_get",
+        "get_crm_connection_metadata_integrations_crm_connections__connection_id__metadata_get",
+        "get_last_completed_migration_integrations_connections__connection_id__last_migration_get"
+      ],
+      "tiers": [
+        "read"
+      ]
+    },
+    {
+      "name": "SyncTriggers",
+      "file": "components/sync-triggers.tsx",
+      "purpose": "Run a sync now: push or pull contacts, deals and leads as background jobs with a lead push preview; every sync confirmed.",
+      "operations": [
+        "get_sync_job_integrations_crm_sync_jobs__job_id__get",
+        "list_lead_statuses_integrations_crm_sync_leads_statuses_get",
+        "preview_lead_push_integrations_crm_sync_leads_push_preview_get",
+        "push_all_contacts_integrations_crm_sync_contacts_push_post",
+        "pull_all_contacts_integrations_crm_sync_contacts_pull_post",
+        "push_all_deals_integrations_crm_sync_deals_push_post",
+        "pull_all_deals_integrations_crm_sync_deals_pull_post",
+        "push_all_leads_integrations_crm_sync_leads_push_post",
+        "pull_all_leads_integrations_crm_sync_leads_pull_post"
+      ],
+      "tiers": [
+        "read",
+        "external"
+      ]
+    },
+    {
+      "name": "CrmRecords",
+      "file": "components/crm-records.tsx",
+      "purpose": "Browse the contacts, companies, deals, leads and activity log inside a connected CRM, read only.",
+      "operations": [
+        "list_crm_contact_activities_integrations_crm_connections__connection_id__contacts__contact_id__activities_get",
+        "list_crm_activities_integrations_crm_activities_get",
+        "list_crm_contacts_integrations_crm_connections__connection_id__contacts_get",
+        "list_crm_companies_integrations_crm_connections__connection_id__companies_get",
+        "list_crm_deals_integrations_crm_connections__connection_id__deals_get",
+        "list_crm_leads_integrations_crm_connections__connection_id__leads_get",
+        "get_crm_contact_integrations_crm_connections__connection_id__contacts__contact_id__get",
+        "get_crm_company_integrations_crm_connections__connection_id__companies__company_id__get",
+        "get_crm_deal_integrations_crm_connections__connection_id__deals__deal_id__get",
+        "get_crm_lead_integrations_crm_connections__connection_id__leads__lead_id__get"
+      ],
+      "tiers": [
+        "read"
+      ]
+    },
+    {
+      "name": "FieldMappings",
+      "file": "components/field-mappings.tsx",
+      "purpose": "The CRM's fields next to the graph8 fields they can map to, searchable, read only.",
+      "operations": [
+        "discover_crm_fields_integrations_crm_fields_get",
+        "list_mappable_graph8_fields_integrations_crm_fields_mappable_get"
+      ],
+      "tiers": [
+        "read"
+      ]
+    },
+    {
+      "name": "MigrationPanel",
+      "file": "components/migration-panel.tsx",
+      "purpose": "Scan a CRM, review the counts, import its history, sync later changes; every step confirmed.",
+      "operations": [
+        "get_last_completed_migration_integrations_connections__connection_id__last_migration_get",
+        "get_migration_status_integrations_migrations__migration_id__get",
+        "start_migration_discovery_integrations_migrations_discovery_post",
+        "start_delta_sync_integrations_migrations_delta_sync_post",
+        "confirm_migration_integrations_migrations__migration_id__confirm_post",
+        "cancel_migration_integrations_migrations__migration_id__cancel_post"
       ],
       "tiers": [
         "read",
         "external",
         "destructive"
       ]
+    },
+    {
+      "name": "SugarCrmConnect",
+      "file": "components/sugarcrm-connect.tsx",
+      "purpose": "Connect SugarCRM with an instance address and login (the one CRM the API can sign in to), check, update credentials, remove.",
+      "operations": [
+        "validate_sugarcrm_integrations_sugarcrm_validate_post",
+        "disconnect_sugarcrm_integrations_sugarcrm_delete"
+      ],
+      "tiers": [
+        "read",
+        "destructive"
+      ]
+    },
+    {
+      "name": "WorkspaceTools",
+      "file": "components/workspace-tools.tsx",
+      "purpose": "Slack, Google Workspace and Roam with live status and a connect link-out; Google connection test and Drive browser.",
+      "operations": [
+        "list_google_drive_folders_integrations_google_workspace_folders_get",
+        "list_google_drive_folder_files_integrations_google_workspace_folders__folder_id__files_get",
+        "test_google_workspace_connection_integrations_google_workspace_test_post"
+      ],
+      "tiers": [
+        "read"
+      ]
+    },
+    {
+      "name": "AdAccounts",
+      "file": "components/ad-accounts.tsx",
+      "purpose": "Ad platforms, their accounts and any account the platform has paused, with a connect link-out.",
+      "operations": [
+        "list_ad_platforms_audience_syncs_platforms_get",
+        "list_ad_accounts_audience_syncs_accounts_get",
+        "list_ad_account_health_audience_syncs_account_health_get"
+      ],
+      "tiers": [
+        "read"
+      ]
     }
   ],
   "hooks": [],
@@ -136,6 +298,18 @@
     {
       "file": "lib/integrations-utils.ts",
       "purpose": "CRM provider list and labels, status types and envelope helpers shared by the integrations components."
+    },
+    {
+      "file": "lib/load-more.tsx",
+      "purpose": "Paging helpers (useLoadMoreList, useGrowingList, LoadMore) so no list stops silently at a cap."
+    },
+    {
+      "file": "lib/crm-utils.ts",
+      "purpose": "Readers for records in a CRM's own shape: title, subtitle, flattened fields."
+    },
+    {
+      "file": "lib/facts.tsx",
+      "purpose": "FactList: renders an open-shaped API object as labelled facts."
     }
   ],
   "recipes": [

package/blocks/integrations/components/ad-accounts.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+/**
+ * AdAccounts: the ad platforms graph8 can sync audiences to (Google Ads, Meta, LinkedIn and others), whether each is connected, how many syncs
+ * it carries, which accounts are available, and a warning for any account the platform has paused or de-authorised (the usual reason a
+ * sync stopped). A platform that is not connected shows a "Connect in graph8" link: the sign-in screen only runs in the graph8 app.
+ * All reads; the health list is the last hourly check, not a live call. Creating and running the syncs themselves is on the Ads screen.
+ *
+ * SDK operations, in order:
+ *   1. listAdPlatforms       GET /audience-syncs/platforms        (read)  platform, connected, active_syncs
+ *   2. listAdAccounts        GET /audience-syncs/accounts         (read)  the accounts you can sync to
+ *   3. listAdAccountHealth   GET /audience-syncs/account-health   (read)  only the accounts that are NOT healthy
+ */
+import { Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { brandUrl, useBrand } from "@/g8/hooks/use-brand";
+import { g8Get } from "@/g8/lib/g8-client";
+import { arrayOf, GRAPH8_APP_INTEGRATIONS_PATH } from "../lib/integrations-utils";
+
+export interface AdAccountsProps {
+  /** Where "Connect" sends people. Default: graph8 Settings > Integrations. */
+  connectUrl?: string;
+  className?: string;
+}
+
+interface Platform { platform: string; connected?: boolean; account_name?: string | null; account_id?: string | null; active_syncs?: number }
+// /audience-syncs/accounts answers ad_account_id / ad_account_name.
+interface Account { platform?: string; ad_account_id?: string | number; ad_account_name?: string }
+interface Health { platform?: string; account_id?: string | number; health?: string; reason?: string; message?: string; detail?: string }
+const label = (s: string): string => s.replace(/[_-]/g, " ").replace(/^./, (c) => c.toUpperCase());
+
+export function AdAccounts({ connectUrl: connectUrlProp, className }: AdAccountsProps) {
+  const brand = useBrand();
+  const connectUrl = connectUrlProp ?? brandUrl(brand, GRAPH8_APP_INTEGRATIONS_PATH);
+  const platforms = useG8Query((signal) => g8Get("/audience-syncs/platforms", undefined, { signal }), []);
+  const accounts = useG8Query((signal) => g8Get("/audience-syncs/accounts", undefined, { signal }), []);
+  const health = useG8Query((signal) => g8Get("/audience-syncs/account-health", undefined, { signal }), []);
+  const unhealthy = arrayOf<Health>(health.data);
+  const accountRows = arrayOf<Account>(accounts.data);
+  const platformRows = arrayOf<Platform>(platforms.data);
+
+  return (
+    <div className={`flex flex-col gap-4 ${className ?? ""}`}>
+      {unhealthy.length > 0 ? (
+        <div role="alert" className="rounded-md border border-error-foreground/25 bg-error p-3 text-sm text-error-foreground" data-testid="ad-health-warning">
+          <p className="font-medium">{unhealthy.length === 1 ? "An ad account needs attention" : `${unhealthy.length} ad accounts need attention`}</p>
+          <ul className="mt-1 list-disc pl-5">{unhealthy.map((h, i) => <li key={`${h.platform}-${h.account_id}-${i}`}>{label(h.platform ?? "Platform")} account {String(h.account_id ?? "")}: {label(h.health ?? "unhealthy")}{h.reason || h.message || h.detail ? ` (${h.reason ?? h.message ?? h.detail})` : ""}</li>)}</ul>
+        </div>
+      ) : null}
+      {health.error ? <ApiError compact error={health.error} title="Could not check account health" onRetry={() => void health.refetch()} /> : null}
+      <SectionCard title="Ad platforms" description={`Where ${brand.name} can sync audiences`} flush>
+        {platforms.error ? <div className="p-3"><ApiError error={platforms.error} title="Could not load the platforms" onRetry={() => void platforms.refetch()} /></div> : null}
+        {platforms.loading && !platforms.data ? <Skeleton className="m-3 h-12" /> : null}
+        <ul className="divide-y" aria-label="Ad platforms">
+          {platformRows.map((p) => (
+            <li key={p.platform} data-platform={p.platform} className="flex flex-wrap items-center justify-between gap-2 px-4 py-3 text-sm">
+              <span><span className="font-medium">{label(p.platform)}</span><span className="block text-xs text-muted-foreground">{p.connected ? `${p.active_syncs ?? 0} active ${p.active_syncs === 1 ? "sync" : "syncs"}${p.account_name ? `, ${p.account_name}` : ""}` : "Not connected"}</span></span>
+              {p.connected ? <StatusPill tone="positive" dot>Connected</StatusPill> : <a className="text-sm underline" href={connectUrl} target="_blank" rel="noreferrer">Connect in {brand.linkLabel}</a>}
+            </li>
+          ))}
+        </ul>
+        {platforms.data && platformRows.length === 0 ? <EmptyState compact title="No ad platforms" description="Ad platforms appear here once they are available to your workspace." /> : null}
+      </SectionCard>
+      <SectionCard title="Accounts" description="The ad accounts you can sync to" flush>
+        {accounts.error ? <div className="p-3"><ApiError error={accounts.error} title="Could not load the accounts" onRetry={() => void accounts.refetch()} /></div> : null}
+        {accounts.loading && !accounts.data ? <Skeleton className="m-3 h-12" /> : null}
+        <ul className="divide-y" aria-label="Ad accounts">
+          {accountRows.map((a, i) => {
+            const id = String(a.ad_account_id ?? "");
+            const bad = unhealthy.find((h) => String(h.account_id) === id && (!h.platform || !a.platform || h.platform === a.platform));
+            return <li key={`${a.platform}-${id}-${i}`} className="flex items-center justify-between gap-2 px-4 py-2 text-sm"><span>{a.ad_account_name || id}<span className="ml-2 text-xs text-muted-foreground">{a.platform ? label(a.platform) : ""} {id}</span></span><StatusPill tone={bad ? "negative" : "positive"} dot>{bad ? label(bad.health ?? "unhealthy") : "Healthy"}</StatusPill></li>;
+          })}
+        </ul>
+        {accounts.data && accountRows.length === 0 ? <EmptyState compact title="No ad accounts" description={`Connect an ad platform in ${brand.linkLabel} to see its accounts here.`} /> : null}
+      </SectionCard>
+    </div>
+  );
+}

package/blocks/integrations/components/connection-health.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+/**
+ * ConnectionHealth: is this CRM connection actually working? Its connection record, its live status check ("Recheck" asks the CRM again)
+ * and the CRM's account metadata (which edition, which objects it exposes). Reads only; nothing here changes the connection.
+ * The checks are read-only but reach the CRM, so a CRM that is down answers with an error and Retry rather than a stale "connected".
+ *
+ * SDK operations, in order:
+ *   1. getCrmConnection         GET /integrations/crm/connections/{connection_id}                         (read)
+ *   2. getCrmConnectionStatus   GET /integrations/crm/connections/{connection_id}/status                  (read)
+ *   3. getCrmConnectionMetadata GET /integrations/crm/connections/{connection_id}/metadata?crm_type       (read)
+ *   4. getLastCompletedMigration GET /integrations/connections/{connection_id}/last-migration             (read)  last historic import
+ */
+import { Button, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get } from "@/g8/lib/g8-client";
+import { FactList } from "../lib/facts";
+import { crmType } from "../lib/integrations-utils";
+
+export interface ConnectionHealthProps {
+  connectionId: string;
+  /** hubspot, salesforce, ... (sent as crm_type for the metadata read). */
+  provider: string;
+  className?: string;
+}
+
+const enc = encodeURIComponent;
+const data = (res: unknown): Record<string, unknown> => ((res as { data?: Record<string, unknown> } | null)?.data ?? {}) as Record<string, unknown>;
+
+function Card({ title, query, empty }: { title: string; query: { data: unknown; error: unknown; loading: boolean; refetch: () => Promise<unknown> }; empty: string }) {
+  return (
+    <SectionCard title={title} actions={<Button size="sm" variant="ghost" onClick={() => void query.refetch()}>Recheck</Button>}>
+      {query.error ? <ApiError error={query.error} title={`Could not check: ${title.toLowerCase()}`} onRetry={() => void query.refetch()} /> : null}
+      {query.loading && !query.data ? <Skeleton className="h-12 w-full" /> : null}
+      {query.data && !query.error ? <FactList data={data(query.data)} empty={empty} /> : null}
+    </SectionCard>
+  );
+}
+
+export function ConnectionHealth({ connectionId, provider, className }: ConnectionHealthProps) {
+  const connection = useG8Query((signal) => g8Get(`/integrations/crm/connections/${enc(connectionId)}`, undefined, { signal }), [connectionId]);
+  const status = useG8Query((signal) => g8Get(`/integrations/crm/connections/${enc(connectionId)}/status`, undefined, { signal }), [connectionId]);
+  const metadata = useG8Query((signal) => g8Get(`/integrations/crm/connections/${enc(connectionId)}/metadata`, { crm_type: crmType(provider) }, { signal }), [connectionId, provider]);
+  const last = useG8Query((signal) => g8Get(`/integrations/connections/${enc(connectionId)}/last-migration`, undefined, { signal }), [connectionId]);
+  const s = data(status.data);
+  const ok = s.connected ?? s.is_connected ?? s.healthy;
+  return (
+    <div className={`flex flex-col gap-4 ${className ?? ""}`}>
+      {status.data && !status.error ? <div className="flex items-center gap-2"><StatusPill tone={ok === false ? "negative" : "positive"} dot>{ok === false ? "Not healthy" : "Healthy"}</StatusPill><span className="text-xs text-muted-foreground">Checked just now</span></div> : null}
+      <Card title="Live status" query={status} empty="The CRM reported no details." />
+      <Card title="Connection" query={connection} empty="No connection details." />
+      <Card title="CRM account" query={metadata} empty="The CRM reported no account details." />
+      <Card title="Last historic import" query={last} empty="No historic import has completed for this connection." />
+    </div>
+  );
+}

package/blocks/integrations/components/crm-detail.tsx

@@ -11,6 +11,10 @@
  *   2. listConnections  GET    /integrations/connections                        (read; the connection to disconnect)
  *   3. deleteConnection DELETE /integrations/connections/{id}?provider_config_key= (destructive, confirmed)
  *   4. SyncStatus       see sync-status.tsx (getCrmStatus, getCrmFields, set push/pull enabled, getSyncJob, pushContactsToCrm)
+ * A connected CRM also gets: Health (ConnectionHealth), Sync now (SyncTriggers: push/pull contacts, deals and leads as background jobs),
+ * CRM records (CrmRecords: browse what is in the CRM), Fields (FieldMappings) and Historic import (MigrationPanel). SugarCRM, whose sign-in
+ * the API can run, gets a Connection tab (SugarCrmConnect) instead of the link-out; the other CRMs link out because their OAuth screen only
+ * runs in the graph8 app.
  */
 import type { ReactNode } from "react";
 import { Skeleton } from "@graph8/sdk/ui";
@@ -25,7 +29,13 @@ import { arrayOf, formatWhen, GRAPH8_APP_INTEGRATIONS_PATH, PROVIDER_LABELS } fr
 import type { ConnectionRow, CrmProvider, CrmSyncRow } from "../lib/integrations-utils";
 import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
 import { AskButton, useConfirmAction } from "@/g8/components/confirmed-action";
+import { ConnectionHealth } from "./connection-health";
+import { CrmRecords } from "./crm-records";
+import { FieldMappings } from "./field-mappings";
+import { MigrationPanel } from "./migration-panel";
+import { SugarCrmConnect } from "./sugarcrm-connect";
 import { SyncStatus } from "./sync-status";
+import { SyncTriggers } from "./sync-triggers";
 import { brandUrl, useBrand } from "@/g8/hooks/use-brand";
 
 export interface CrmDetailProps {
@@ -60,6 +70,7 @@ export function CrmDetail({ provider, connectUrl: connectUrlProp, records, onClo
   const connected = Boolean(row && CONNECTED.includes(row.status?.toLowerCase()));
   const all = arrayOf<ConnectionRow>(connections.data).filter((c) => (c.provider ?? "").toLowerCase() === provider || (c.provider_config_key ?? "").toLowerCase().split(/[-_]/)[0] === provider);
   const connection = all.find((c) => row?.connection_id && c.connection_id === row.connection_id) ?? (all.length === 1 ? all[0] : undefined);
+  const connectionId = row?.connection_id ?? connection?.connection_id ?? "";
   const changed = () => { void syncs.refetch(); void connections.refetch(); onChanged?.(); };
 
   const actions = connected ? (
@@ -68,7 +79,7 @@ export function CrmDetail({ provider, connectUrl: connectUrlProp, records, onClo
       description="Syncs configured against this connection stop working. Records already synced stay."
       run={() => g8Delete(`/integrations/connections/${connection!.connection_id}`, { query: { provider_config_key: connection!.provider_config_key } })} onDone={changed} />
   ) : (
-    <a className="text-sm underline" href={connectUrl} target="_blank" rel="noreferrer">Connect in {brand.linkLabel}</a>
+    provider === "sugarcrm" ? null : <a className="text-sm underline" href={connectUrl} target="_blank" rel="noreferrer">Connect in {brand.linkLabel}</a>
   );
 
   const tabs = [
@@ -87,6 +98,14 @@ export function CrmDetail({ provider, connectUrl: connectUrlProp, records, onClo
       ),
     },
     { id: "sync", label: "Sync", content: <SyncStatus provider={provider} records={records} /> },
+    ...(provider === "sugarcrm" ? [{ id: "connection", label: "Connection", content: <SugarCrmConnect connected={connected} onChanged={changed} /> }] : []),
+    ...(connected && connectionId ? [
+      { id: "health", label: "Health", content: <ConnectionHealth connectionId={connectionId} provider={provider} /> },
+      { id: "sync-now", label: "Sync now", content: <SyncTriggers connectionId={connectionId} provider={provider} /> },
+      { id: "records", label: "CRM records", content: <CrmRecords connectionId={connectionId} /> },
+      { id: "fields", label: "Fields", content: <FieldMappings connectionId={connectionId} /> },
+      { id: "import", label: "Historic import", content: <MigrationPanel connectionId={connectionId} provider={provider} /> },
+    ] : []),
   ];
   return (
     <>

package/blocks/integrations/components/crm-records.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+/**
+ * CrmRecords: look inside a connected CRM without leaving graph8. Contacts, Companies, Deals and Leads as lists (25 at a time, "Load more"
+ * pages through all of them), the CRM's own activity log, and a record's fields (plus a contact's activities) when you open one.
+ * Read only: changing CRM records from here is deliberately not offered (use the sync to push graph8 data; edit in the CRM itself).
+ * Not every CRM has every kind (Pipedrive has no leads in the same sense); a kind the CRM refuses shows its error with Retry.
+ *
+ * SDK operations, in order (connection_id from the connection):
+ *   1. listCrmContacts / listCrmCompanies / listCrmDeals / listCrmLeads   GET /integrations/crm/connections/{connection_id}/{kind}?limit&offset[&name]  (read)
+ *   2. getCrmContact / getCrmCompany / getCrmDeal / getCrmLead             GET /integrations/crm/connections/{connection_id}/{kind}/{id}   (read)
+ *   3. listCrmContactActivities   GET /integrations/crm/connections/{connection_id}/contacts/{contact_id}/activities?limit   (read)
+ *   4. listCrmActivities          GET /integrations/crm/activities?connection_id&limit&offset   (read)
+ */
+import { useEffect, useState } from "react";
+import { Button, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { Toolbar } from "@/g8/components/screen/toolbar";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get } from "@/g8/lib/g8-client";
+import { CRM_ENTITIES, crmRecordSubtitle, crmRecordTitle, flattenRecord } from "../lib/crm-utils";
+import type { CrmEntity, CrmRecord } from "../lib/crm-utils";
+import { FactList } from "../lib/facts";
+import { LoadMore, useLoadMoreList } from "../lib/load-more";
+import { arrayOf, formatWhen } from "../lib/integrations-utils";
+
+export interface CrmRecordsProps {
+  connectionId: string;
+  className?: string;
+}
+
+type Tab = CrmEntity | "activity";
+const enc = encodeURIComponent;
+
+function RecordFacts({ connectionId, entity, id }: { connectionId: string; entity: CrmEntity; id: string }) {
+  const rec = useG8Query((signal) => g8Get<CrmRecord>(`/integrations/crm/connections/${enc(connectionId)}/${entity}/${enc(id)}`, undefined, { signal }), [connectionId, entity, id]);
+  const acts = useG8Query((signal) => g8Get(`/integrations/crm/connections/${enc(connectionId)}/contacts/${enc(id)}/activities`, { limit: 20 }, { signal }), [connectionId, id], { enabled: entity === "contacts" });
+  const data = ((rec.data as { data?: CrmRecord } | undefined)?.data ?? {}) as CrmRecord;
+  const rows = arrayOf<Record<string, unknown>>(acts.data);
+  return (
+    <SectionCard title={crmRecordTitle(data) || "Record"} description={rec.loading ? "Loading..." : crmRecordSubtitle(data) || undefined}>
+      {rec.error ? <ApiError error={rec.error} title="Could not load the record" onRetry={() => void rec.refetch()} /> : null}
+      {rec.loading && !rec.data ? <Skeleton className="h-16 w-full" /> : null}
+      {rec.data ? <FactList data={flattenRecord(data)} empty="This record has no fields we can show." /> : null}
+      {entity === "contacts" ? (
+        <div className="mt-4">
+          <h4 className="mb-1 text-sm font-medium">Recent activity</h4>
+          {acts.error ? <ApiError compact error={acts.error} title="Could not load the activities" onRetry={() => void acts.refetch()} /> : null}
+          {acts.loading && !acts.data ? <Skeleton className="h-8 w-full" /> : null}
+          {acts.data && rows.length === 0 ? <p className="text-sm text-muted-foreground">No activity in the CRM.</p> : null}
+          {rows.length > 0 ? <><ul className="divide-y rounded-md border text-sm">{rows.map((a, i) => <li key={String(a.id ?? i)} className="px-3 py-1.5">{String(a.subject ?? a.type ?? a.title ?? "Activity")}<span className="ml-2 text-xs text-muted-foreground">{formatWhen(String(a.timestamp ?? a.created_at ?? a.date ?? "") || null)}</span></li>)}</ul>{rows.length >= 20 ? <p className="mt-1 text-xs text-muted-foreground">Showing the latest 20 activities.</p> : null}</> : null}
+        </div>
+      ) : null}
+    </SectionCard>
+  );
+}
+
+export function CrmRecords({ connectionId, className }: CrmRecordsProps) {
+  const [tab, setTab] = useState<Tab>("contacts");
+  const [search, setSearch] = useState("");
+  const [open, setOpen] = useState<string | null>(null);
+  useEffect(() => { setOpen(null); setSearch(""); }, [connectionId, tab]);
+  const q = search.trim();
+  const list = useLoadMoreList<CrmRecord>(async (offset, limit, signal) => {
+    const base = `/integrations/crm/connections/${enc(connectionId)}`;
+    const res = tab === "activity" ? await g8Get("/integrations/crm/activities", { connection_id: connectionId, limit, offset }, { signal })
+      : await g8Get(`${base}/${tab}`, { limit, offset, name: tab === "contacts" ? q || undefined : undefined }, { signal });
+    return arrayOf<CrmRecord>(res);
+  }, [connectionId, tab, q], { pageSize: 25 });
+
+  return (
+    <div className={`flex flex-col gap-3 ${className ?? ""}`}>
+      <div role="tablist" aria-label="CRM record kinds" className="flex flex-wrap gap-1 border-b">
+        {([...CRM_ENTITIES, { id: "activity", label: "Activity log" }] as const).map((t) => (
+          <button key={t.id} type="button" role="tab" aria-selected={tab === t.id} onClick={() => setTab(t.id as Tab)} className={`px-3 py-2 text-sm ${tab === t.id ? "border-b-2 border-foreground font-medium" : "text-muted-foreground"}`}>{t.label}</button>
+        ))}
+      </div>
+      {tab === "contacts" ? <Toolbar search={{ value: search, onChange: setSearch, placeholder: "Search contacts by name" }} /> : null}
+      {list.error ? <ApiError error={list.error} title="Could not load these records" onRetry={list.reload} /> : null}
+      {list.loading ? <Skeleton className="h-24 w-full" aria-label="Loading records" /> : null}
+      <ul className="divide-y rounded-md border" aria-label="CRM records">
+        {list.items.map((r, i) => {
+          const id = String(r.id ?? "");
+          return tab === "activity" ? (
+            <li key={id || i} className="px-3 py-2 text-sm">{String(r.subject ?? r.type ?? r.title ?? "Activity")}<span className="ml-2 text-xs text-muted-foreground">{formatWhen(String(r.timestamp ?? r.created_at ?? r.date ?? "") || null)}</span></li>
+          ) : (
+            <li key={id || i} className={open === id ? "bg-accent" : ""}>
+              <button type="button" className="block w-full px-3 py-2 text-left text-sm" onClick={() => setOpen(open === id ? null : id)} disabled={!id}>
+                <span className="block font-medium">{crmRecordTitle(r)}</span><span className="block text-xs text-muted-foreground">{crmRecordSubtitle(r)}</span>
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+      {!list.loading && !list.error && list.items.length === 0 ? <EmptyState compact title={q ? "No contacts match" : "Nothing here"} description={tab === "activity" ? "The CRM has no activity for this connection yet." : "This CRM has no records of this kind."} /> : null}
+      <LoadMore list={list} noun="records" />
+      {open && tab !== "activity" ? <RecordFacts key={`${tab}:${open}`} connectionId={connectionId} entity={tab} id={open} /> : null}
+      {open ? <Button size="sm" variant="ghost" className="self-start" onClick={() => setOpen(null)}>Close record</Button> : null}
+    </div>
+  );
+}

package/blocks/integrations/components/field-mappings.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+/**
+ * FieldMappings: which fields exist on each side of the sync. The CRM's fields for a kind of record (contact, company, deal) next to the
+ * graph8 fields they can map to, each searchable. Read only: the mapping itself is chosen in graph8 (the API has no call to save one),
+ * so this view is for checking that a field you expect on the CRM side exists before you sync.
+ *
+ * SDK operations, in order:
+ *   1. discoverCrmFields          GET /integrations/crm/fields?connection_id&entity_type        (read)  the CRM's fields
+ *   2. listMappableGraph8Fields   GET /integrations/crm/fields/mappable?object_type             (read)  graph8 fields a CRM field can map to
+ */
+import { useState } from "react";
+import { Input, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get } from "@/g8/lib/g8-client";
+import { useBrand } from "@/g8/hooks/use-brand";
+import { arrayOf } from "../lib/integrations-utils";
+
+export interface FieldMappingsProps {
+  connectionId: string;
+  className?: string;
+}
+
+interface Field { name?: string; key?: string; label?: string; type?: string; field_type?: string }
+// The API accepts only the plural object names (CrmFieldEntityType / Graph8FieldObjectType).
+const KINDS = [{ id: "contacts", label: "Contacts" }, { id: "companies", label: "Companies" }, { id: "deals", label: "Deals" }];
+const nameOf = (f: Field): string => f.label ?? f.name ?? f.key ?? "";
+
+function FieldColumn({ title, query, filter }: { title: string; query: { data: unknown; error: unknown; loading: boolean; refetch: () => Promise<unknown> }; filter: string }) {
+  const rows = arrayOf<Field>(query.data).filter((f) => nameOf(f).toLowerCase().includes(filter.toLowerCase()));
+  return (
+    <SectionCard title={title} description={query.data ? `${rows.length} fields` : undefined} flush>
+      {query.error ? <div className="p-3"><ApiError error={query.error} title="Could not load the fields" onRetry={() => void query.refetch()} /></div> : null}
+      {query.loading && !query.data ? <Skeleton className="m-3 h-16" /> : null}
+      <ul className="max-h-80 divide-y overflow-y-auto text-sm">{rows.map((f, i) => <li key={`${nameOf(f)}-${i}`} className="flex justify-between gap-2 px-3 py-1.5"><span>{nameOf(f)}</span><span className="text-xs text-muted-foreground">{f.type ?? f.field_type ?? ""}</span></li>)}</ul>
+      {query.data && !query.error && rows.length === 0 ? <p className="px-3 py-2 text-sm text-muted-foreground">No fields match.</p> : null}
+    </SectionCard>
+  );
+}
+
+export function FieldMappings({ connectionId, className }: FieldMappingsProps) {
+  const brand = useBrand();
+  const [kind, setKind] = useState("contacts");
+  const [filter, setFilter] = useState("");
+  const crm = useG8Query((signal) => g8Get("/integrations/crm/fields", { connection_id: connectionId, entity_type: kind }, { signal }), [connectionId, kind]);
+  const mine = useG8Query((signal) => g8Get("/integrations/crm/fields/mappable", { object_type: kind }, { signal }), [kind]);
+  return (
+    <div className={`flex flex-col gap-3 ${className ?? ""}`}>
+      <div className="flex flex-wrap items-center gap-2">
+        <div role="group" aria-label="Record kind" className="flex gap-1">{KINDS.map((k) => <button key={k.id} type="button" aria-pressed={kind === k.id} onClick={() => setKind(k.id)} className={`rounded-md border px-3 py-1 text-sm ${kind === k.id ? "bg-foreground text-background" : ""}`}>{k.label}</button>)}</div>
+        <Input aria-label="Filter fields" className="h-8 max-w-xs" placeholder="Filter fields" value={filter} onChange={(e) => setFilter(e.target.value)} />
+      </div>
+      <div className="grid gap-4 md:grid-cols-2">
+        <FieldColumn title="In the CRM" query={crm} filter={filter} />
+        <FieldColumn title={`In ${brand.name}`} query={mine} filter={filter} />
+      </div>
+    </div>
+  );
+}