@graph8/sdk 0.362.0 → 0.373.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": [
     {
@@ -85,6 +123,174 @@
         "external",
         "destructive"
       ]
+    },
+    {
+      "name": "IntegrationsScreen",
+      "file": "components/integrations-screen.tsx",
+      "purpose": "Finished integrations page: CRM and tool connections with a sync side panel, plus webhook management.",
+      "operations": [
+        "list_crm_syncs_crm_syncs_get",
+        "list_webhooks_webhooks_get"
+      ],
+      "tiers": [
+        "read"
+      ]
+    },
+    {
+      "name": "CrmDetail",
+      "file": "components/crm-detail.tsx",
+      "purpose": "Complete screen for one CRM integration: connection, sync switches, manual push, disconnect.",
+      "operations": [
+        "list_crm_syncs_crm_syncs_get",
+        "list_connections_integrations_connections_get",
+        "delete_connection_integrations_connections__connection_id__delete"
+      ],
+      "tiers": [
+        "read",
+        "destructive"
+      ]
+    },
+    {
+      "name": "WebhookDetail",
+      "file": "components/webhook-detail.tsx",
+      "purpose": "Complete screen for one webhook: every field, edit, deliveries, pause, rotate secret, delete.",
+      "operations": [
+        "list_webhooks_webhooks_get",
+        "list_webhook_events_webhooks_events_get",
+        "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",
+        "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": [],
@@ -92,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": [
@@ -167,6 +385,7 @@
     }
   ],
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "lucide-react": ">=0.400"
   }
 }

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

@@ -0,0 +1,119 @@
+"use client";
+
+/**
+ * CrmDetail: the complete screen for one CRM integration (HubSpot, Salesforce, Pipedrive, Zoho, SugarCRM). Shows its connection
+ * (status, connected and last sync time, connection id), the continuous sync switches, job progress, manual push and contact fields
+ * (SyncStatus), and the actions: disconnect (destructive) when connected, or a link to connect in graph8 when it is not.
+ * Connecting is a link out: the OAuth consent screen only runs in the graph8 app.
+ *
+ * SDK operations, in order:
+ *   1. listCrmSyncs     GET    /crm-syncs                                       (read)
+ *   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";
+import { ApiError } from "@/g8/components/api-error";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Delete, g8Get } from "@/g8/lib/g8-client";
+import { DetailPanel } from "@/g8/components/screen/detail-panel";
+import { EntityAvatar } from "@/g8/components/screen/entity-avatar";
+import { KeyValueList } from "@/g8/components/screen/key-value-list";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { arrayOf, formatWhen, GRAPH8_APP_INTEGRATIONS_PATH, PROVIDER_LABELS } from "../lib/integrations-utils";
+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 {
+  provider: CrmProvider;
+  /** Where "Connect in graph8" sends the person. */
+  connectUrl?: string;
+  /** Contact records (in the CRM's field names) offered for a manual push. */
+  records?: ReadonlyArray<Record<string, unknown>>;
+  onClose?: () => void;
+  onExpand?: () => void;
+  onCollapse?: () => void;
+  onChanged?: () => void;
+  /** Extra header actions from the screen's `renderDetailActions` slot. */
+  extraActions?: ReactNode;
+  /** Extra tabs from the screen's `extraDetailTabs` slot, after the built-in ones. */
+  extraTabs?: { id: string; label: string; content: ReactNode }[];
+}
+
+const CONNECTED = ["connected", "active", "ok", "healthy", "syncing", "synced", "enabled", "linked"];
+
+export function CrmDetail({ provider, connectUrl: connectUrlProp, records, onClose, onExpand, onCollapse, onChanged, extraActions, extraTabs }: CrmDetailProps) {
+  const brand = useBrand();
+  const connectUrl = connectUrlProp ?? brandUrl(brand, GRAPH8_APP_INTEGRATIONS_PATH);
+  const { ask, dialog, failure } = useConfirmAction();
+  const syncs = useG8Query((signal) => g8Get("/crm-syncs", undefined, { signal }), []);
+  const connections = useG8Query((signal) => g8Get("/integrations/connections", undefined, { signal }), []);
+  const label = PROVIDER_LABELS[provider];
+
+  if (syncs.error) return <ApiError error={syncs.error} title="Could not load the integration" onRetry={() => void syncs.refetch()} />;
+  if (!syncs.data) return <Skeleton className="h-40 w-full" />;
+  const row = arrayOf<CrmSyncRow>(syncs.data).find((r) => r.provider?.toLowerCase() === provider);
+  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 ? (
+    <AskButton ask={ask} label="Disconnect" variant="ghost" tier="destructive" title={`Disconnect ${label}`} confirmLabel="Disconnect"
+      disabled={!connection?.connection_id || !connection.provider_config_key}
+      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} />
+  ) : (
+    provider === "sugarcrm" ? null : <a className="text-sm underline" href={connectUrl} target="_blank" rel="noreferrer">Connect in {brand.linkLabel}</a>
+  );
+
+  const tabs = [
+    {
+      id: "overview",
+      label: "Overview",
+      content: (
+        <KeyValueList columns={2} items={[
+          { label: "Provider", value: label },
+          { label: "Status", value: row?.status ?? "not connected" },
+          { label: "Connected", value: formatWhen(row?.connected_at) },
+          { label: "Last sync", value: formatWhen(row?.last_sync_at) },
+          { label: "Connection", value: row?.connection_id ?? connection?.connection_id ?? "-" },
+          { label: "Config key", value: connection?.provider_config_key ?? "-" },
+        ]} />
+      ),
+    },
+    { 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 (
+    <>
+    <DetailPanel title={label} subtitle="CRM integration" avatar={<EntityAvatar name={label} kind="company" size="lg" />}
+      badges={<StatusPill tone={connected ? "positive" : "neutral"}>{connected ? "Connected" : row?.status ?? "Not connected"}</StatusPill>}
+      actions={extraActions ? <>{actions}{extraActions}</> : actions} tabs={extraTabs?.length ? [...tabs, ...extraTabs] : tabs} onClose={onClose} onExpand={onExpand} onCollapse={onCollapse} />
+      {failure ? <ApiError error={failure} title="That did not work" /> : null}
+      <ConfirmSpendDialog {...dialog} />
+    </>
+  );
+}