@graph8/sdk 0.361.0 → 0.370.0

package/blocks/integrations/block.json

@@ -85,6 +85,50 @@
         "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"
+      ],
+      "tiers": [
+        "read",
+        "external",
+        "destructive"
+      ]
     }
   ],
   "hooks": [],
@@ -167,6 +211,7 @@
     }
   ],
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "lucide-react": ">=0.400"
   }
 }

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

@@ -0,0 +1,100 @@
+"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)
+ */
+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 { SyncStatus } from "./sync-status";
+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 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} />
+  ) : (
+    <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} /> },
+  ];
+  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} />
+    </>
+  );
+}

package/blocks/integrations/components/integration-list.tsx

@@ -26,17 +26,20 @@ import {
   arrayOf,
   CRM_PROVIDERS,
   formatWhen,
-  GRAPH8_APP_INTEGRATIONS_URL,
+  GRAPH8_APP_INTEGRATIONS_PATH,
   looksConnected,
   PROVIDER_LABELS,
 } from "../lib/integrations-utils";
 import type { ConnectionRow, CrmProvider, CrmSyncRow } from "../lib/integrations-utils";
+import { brandUrl, useBrand } from "@/g8/hooks/use-brand";
 
 export interface IntegrationListProps {
   /** Where "Connect" sends the person. Default: graph8 Settings > Integrations. */
   connectUrl?: string;
   /** Called when the person opens a CRM's sync panel (render SyncStatus for it). */
   onOpenSync?: (provider: CrmProvider) => void;
+  /** Called when a person opens any CRM, connected or not (show a CrmDetail). */
+  onSelectCrm?: (provider: CrmProvider) => void;
   className?: string;
 }
 
@@ -78,7 +81,9 @@ function ChatTools() {
   );
 }
 
-export function IntegrationList({ connectUrl = GRAPH8_APP_INTEGRATIONS_URL, onOpenSync, className }: IntegrationListProps) {
+export function IntegrationList({ connectUrl: connectUrlProp, onOpenSync, onSelectCrm, className }: IntegrationListProps) {
+  const brand = useBrand();
+  const connectUrl = connectUrlProp ?? brandUrl(brand, GRAPH8_APP_INTEGRATIONS_PATH);
   const [disconnecting, setDisconnecting] = useState<{ provider: CrmProvider; connection: ConnectionRow } | null>(null);
   const syncs = useG8Query((signal) => g8Get("/crm-syncs", undefined, { signal }), []);
   const connections = useG8Query((signal) => g8Get("/integrations/connections", undefined, { signal }), []);
@@ -113,7 +118,7 @@ export function IntegrationList({ connectUrl = GRAPH8_APP_INTEGRATIONS_URL, onOp
           return (
             <li key={p} className="flex flex-wrap items-center justify-between gap-2 px-3 py-3" data-provider={p}>
               <div>
-                <div className="font-medium">{PROVIDER_LABELS[p]}</div>
+                {onSelectCrm ? <button type="button" className="font-medium hover:underline" onClick={() => onSelectCrm(p)}>{PROVIDER_LABELS[p]}</button> : <div className="font-medium">{PROVIDER_LABELS[p]}</div>}
                 <div className="text-xs text-gray-500">
                   {connected ? `Last sync: ${formatWhen(row?.last_sync_at)}` : "Connect to sync contacts and companies."}
                 </div>
@@ -137,7 +142,7 @@ export function IntegrationList({ connectUrl = GRAPH8_APP_INTEGRATIONS_URL, onOp
                 ) : (
                   <Button size="sm" asChild>
                     <a href={connectUrl} target="_blank" rel="noreferrer">
-                      Connect in graph8
+                      Connect in {brand.linkLabel}
                     </a>
                   </Button>
                 )}

package/blocks/integrations/components/integrations-screen.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+/**
+ * IntegrationsScreen: the finished integrations settings page. Two tabs:
+ *   Connections  the five CRMs and the workspace tools with their status (IntegrationList). Every CRM, connected or not, opens its
+ *                complete detail screen (CrmDetail: connection, push/pull switches, job progress, manual push, disconnect; `?id=hubspot`).
+ *                "Connect in graph8" links out: the OAuth consent screen only runs in the graph8 app.
+ *   Webhooks     create webhooks (WebhookManager); each opens its complete detail screen (WebhookDetail: every field, edit, deliveries,
+ *                pause, rotate secret, delete; `?id=`). Every detail also opens as a full page with `?view=full`.
+ *
+ * SDK operations: two reads for the stat strip (GET /crm-syncs, GET /webhooks). Composes IntegrationList (read +
+ * destructive, confirmed), SyncStatus (external, confirmed) and WebhookManager (external + destructive, confirmed).
+ * Prerequisites: a CRM connected in the app (where: "app"); a public https route with G8_WEBHOOK_SECRET for webhooks.
+ */
+import type { ReactNode } from "react";
+import { useState } from "react";
+import { Plug } from "lucide-react";
+import { g8Get } from "@/g8/lib/g8-client";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { useUrlState } from "@/g8/hooks/use-url-state";
+import { ScreenLayout } from "@/g8/components/screen/screen-layout";
+import type { StatItem } from "@/g8/components/screen/stat-strip";
+import { SplitView } from "@/g8/components/screen/split-view";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { arrayOf, CRM_PROVIDERS, GRAPH8_APP_INTEGRATIONS_PATH, PROVIDER_LABELS } from "../lib/integrations-utils";
+import type { CrmProvider, CrmSyncRow } from "../lib/integrations-utils";
+import { IntegrationList } from "./integration-list";
+import { CrmDetail } from "./crm-detail";
+import { WebhookDetail } from "./webhook-detail";
+import { WebhookManager } from "./webhook-manager";
+import { brandUrl, useBrand } from "@/g8/hooks/use-brand";
+
+export interface IntegrationsScreenProps {
+  /** Where "Connect" sends people. Default: graph8 Settings > Integrations. */
+  connectUrl?: string;
+  /** Pre-fill the webhook endpoint URL (your /api/webhooks/graph8 route). */
+  defaultWebhookUrl?: string;
+  /** Contact records (in the CRM's field names) offered for a manual push in the sync panel. */
+  pushRecords?: ReadonlyArray<Record<string, unknown>>;
+  toolbarActions?: ReactNode;
+  /** Buttons added to the open record's header: a CRM connection or a webhook. */
+  renderDetailActions?: (record: IntegrationRecord) => ReactNode;
+  /** Tabs added after the built-in ones on the open record. */
+  extraDetailTabs?: { id: string; label: string; render: (record: IntegrationRecord) => ReactNode }[];
+  className?: string;
+}
+
+/** The record open in the detail panel, passed to the slot props. */
+export type IntegrationRecord = { kind: "crm"; provider: CrmProvider } | { kind: "webhook"; id: string };
+
+const CONNECTED = ["connected", "active", "ok", "healthy", "syncing", "synced", "enabled", "linked"];
+
+function useStats(): StatItem[] | undefined {
+  const syncs = useG8Query((signal) => g8Get("/crm-syncs", undefined, { signal }), []);
+  const hooks = useG8Query((signal) => g8Get("/webhooks", undefined, { signal }), []);
+  if (syncs.error) return undefined;
+  const rows = arrayOf<CrmSyncRow>(syncs.data);
+  const connected = rows.filter((r) => CONNECTED.includes(r.status?.toLowerCase())).length;
+  const items: StatItem[] = [
+    { label: "CRMs connected", value: `${connected} of ${CRM_PROVIDERS.length}`, tone: connected ? "positive" : "neutral" },
+  ];
+  if (!hooks.error && hooks.data) items.push({ label: "Webhooks", value: arrayOf<unknown>(hooks.data).length });
+  return syncs.data ? items : undefined;
+}
+
+export function IntegrationsScreen(props: IntegrationsScreenProps) {
+  const brand = useBrand();
+  const connectUrl = props.connectUrl ?? brandUrl(brand, GRAPH8_APP_INTEGRATIONS_PATH);
+  const [tabValue, setTab] = useUrlState("tab", "connections");
+  const tab = tabValue === "webhooks" ? "webhooks" : "connections";
+  const [id, setId] = useUrlState("id", "");
+  const [view, setView] = useUrlState("view", "");
+  const expanded = view === "full" && Boolean(id);
+  const [tick, setTick] = useState(0);
+  const stats = useStats();
+  const close = () => {
+    setId("");
+    setView("");
+  };
+  const panel = {
+    onClose: close,
+    onExpand: expanded ? undefined : () => setView("full"),
+    onCollapse: expanded ? () => setView("") : undefined,
+    onChanged: () => setTick((t) => t + 1),
+  };
+  const provider = (CRM_PROVIDERS as readonly string[]).includes(id) ? (id as CrmProvider) : null;
+  const slots = (record: IntegrationRecord) => ({
+    extraActions: props.renderDetailActions?.(record),
+    extraTabs: (props.extraDetailTabs ?? []).map((t) => ({ id: t.id, label: t.label, content: t.render(record) })),
+  });
+  const split = (list: ReactNode, detail: ReactNode, open: boolean) => (
+    <SplitView detailOpen={open} onCloseDetail={close} expanded={expanded} onExpandedChange={(next) => setView(next ? "full" : "")} detailWidth="lg" list={list} detail={open ? detail : null} />
+  );
+
+  return (
+    <ScreenLayout
+      title="Integrations"
+      description={`Connect your CRM, keep it in sync, and send ${brand.linkLabel} events to your own systems.`}
+      icon={<Plug className="size-5" />}
+      actions={props.toolbarActions}
+      tabs={[
+        { id: "connections", label: "Connections" },
+        { id: "webhooks", label: "Webhooks" },
+      ]}
+      activeTab={tab}
+      onTabChange={(next) => {
+        setTab(next);
+        close();
+      }}
+      stats={stats}
+      className={props.className}
+    >
+      {tab === "connections" ? (
+        <div className="space-y-4">
+          <SectionCard title="Connecting an account" description={`Sign-in with your CRM happens in ${brand.linkLabel}. Connect there, then manage the sync here.`}>
+            <a className="text-sm underline" href={connectUrl} target="_blank" rel="noreferrer">
+              Connect in {brand.linkLabel}
+            </a>
+          </SectionCard>
+          {split(
+            <IntegrationList key={tick} connectUrl={connectUrl} onSelectCrm={(p) => setId(p)} onOpenSync={(p) => setId(p)} />,
+            provider ? <CrmDetail key={provider} provider={provider} connectUrl={connectUrl} records={props.pushRecords} {...panel} {...slots({ kind: "crm", provider })} /> : null,
+            provider != null,
+          )}
+        </div>
+      ) : (
+        split(
+          <WebhookManager key={tick} defaultUrl={props.defaultWebhookUrl} onSelectWebhook={(h) => setId(h.id)} />,
+          <WebhookDetail key={id} webhookId={id} {...panel} {...slots({ kind: "webhook", id })} />,
+          Boolean(id),
+        )
+      )}
+    </ScreenLayout>
+  );
+}

package/blocks/integrations/components/sync-status.tsx

@@ -26,6 +26,7 @@ import { ApiError } from "@/g8/components/api-error";
 import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
 import { formatWhen, PROVIDER_LABELS, TERMINAL_JOB_STATES } from "../lib/integrations-utils";
 import type { CrmProvider, CrmStatus } from "../lib/integrations-utils";
+import { useBrand } from "@/g8/hooks/use-brand";
 
 export interface SyncStatusProps {
   provider: CrmProvider;
@@ -59,6 +60,7 @@ function JobProgress({ jobId }: { jobId: string }) {
 }
 
 export function SyncStatus({ provider, records, className }: SyncStatusProps) {
+  const brand = useBrand();
   const [pending, setPending] = useState<Pending | null>(null);
   const [jobId, setJobId] = useState<string | null>(null);
   const [pushed, setPushed] = useState<string | null>(null);
@@ -116,7 +118,7 @@ export function SyncStatus({ provider, records, className }: SyncStatusProps) {
   if (!s?.connected) {
     return (
       <p role="status" className={`rounded border border-amber-200 bg-amber-50 p-3 text-sm text-amber-900 ${className ?? ""}`}>
-        {label} is not connected. {s?.message ?? "Connect it in graph8, then come back."}
+        {label} is not connected. {s?.message ?? `Connect it in ${brand.linkLabel}, then come back.`}
       </p>
     );
   }
@@ -132,7 +134,7 @@ export function SyncStatus({ provider, records, className }: SyncStatusProps) {
         ? {
             title: `${pending.enabled ? "Turn on" : "Turn off"} continuous ${pending.direction} with ${label}`,
             description: pending.enabled
-              ? `graph8 will keep ${pending.direction === "push" ? "writing contacts to" : "reading contacts from"} your CRM.`
+              ? `${brand.linkLabel} will keep ${pending.direction === "push" ? "writing contacts to" : "reading contacts from"} your CRM.`
               : "Syncing in this direction stops.",
             label: pending.enabled ? "Turn on" : "Turn off",
           }
@@ -152,7 +154,7 @@ export function SyncStatus({ provider, records, className }: SyncStatusProps) {
 
       {(["push", "pull"] as const).map((direction) => (
         <div key={direction} className="flex items-center justify-between rounded border border-gray-200 px-3 py-2 text-sm">
-          <span>{direction === "push" ? "Send graph8 contacts to the CRM" : "Bring CRM contacts into graph8"}</span>
+          <span>{direction === "push" ? `Send ${brand.linkLabel} contacts to the CRM` : `Bring CRM contacts into ${brand.linkLabel}`}</span>
           <span className="flex gap-2">
             <Button
               size="sm"

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

@@ -0,0 +1,160 @@
+"use client";
+
+/**
+ * WebhookDetail: the complete screen for one webhook. Finds it by id (so `?id=` deep links work), shows every field (endpoint, name,
+ * events, active state, field filters, created and updated times), its delivery log, and every action: rename, change the endpoint or
+ * the events, pause or resume, rotate the signing secret (shown once), delete.
+ *
+ * SDK operations, in order:
+ *   1. listWebhooks          GET    /webhooks                          (read)
+ *   2. listWebhookEvents     GET    /webhooks/events                   (read; the event names to pick from)
+ *   3. listWebhookDeliveries GET    /webhooks/{id}/deliveries          (read)
+ *   4. updateWebhook         PATCH  /webhooks/{id}                     (external, confirmed; edit, pause, resume)
+ *   5. rotateWebhookSecret   POST   /webhooks/{id}/rotate-secret       (external, confirmed; new secret shown once)
+ *   6. deleteWebhook         DELETE /webhooks/{id}                     (destructive, confirmed; 404 counts as done)
+ * Verify deliveries on the server with g8.webhooks.constructEvent; the secret never belongs in browser code.
+ */
+import { useEffect, useState, type ReactNode } from "react";
+import { Button, Input, Label, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Delete, g8Get, g8Patch, g8Post } from "@/g8/lib/g8-client";
+import { DetailPanel } from "@/g8/components/screen/detail-panel";
+import { KeyValueList } from "@/g8/components/screen/key-value-list";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { arrayOf, formatWhen } from "../lib/integrations-utils";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { AskButton, useConfirmAction } from "@/g8/components/confirmed-action";
+import { useBrand } from "@/g8/hooks/use-brand";
+
+export interface WebhookDetailProps {
+  webhookId: string;
+  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 }[];
+}
+
+interface Hook { id: string; url: string; name?: string | null; events?: string[]; is_active?: boolean; created_at?: string | null; updated_at?: string | null; field_filters?: Record<string, string[]> | null; secret?: string | null }
+interface EventType { event: string; category?: string | null; description?: string | null }
+interface Delivery { id: string; event: string; status: string; attempts?: number; max_attempts?: number; response_code?: number | null; error_message?: string | null; created_at?: string | null; completed_at?: string | null }
+
+export function WebhookDetail({ webhookId, onClose, onExpand, onCollapse, onChanged, extraActions, extraTabs }: WebhookDetailProps) {
+  const brand = useBrand();
+  const { ask, dialog, failure } = useConfirmAction();
+  const hooks = useG8Query((signal) => g8Get("/webhooks", undefined, { signal }), []);
+  const events = useG8Query((signal) => g8Get("/webhooks/events", undefined, { signal }), []);
+  const deliveries = useG8Query((signal) => g8Get(`/webhooks/${webhookId}/deliveries`, { page: 1, limit: 20 }, { signal }), [webhookId]);
+  const hook = arrayOf<Hook>(hooks.data).find((h) => h.id === webhookId);
+  const [form, setForm] = useState({ url: "", name: "", events: [] as string[] });
+  const [secret, setSecret] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (hook) setForm({ url: hook.url, name: hook.name ?? "", events: hook.events ?? [] });
+  }, [hook?.id, hook?.url, hook?.name, hook?.events?.join(",")]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (hooks.error) return <ApiError error={hooks.error} title="Could not load the webhook" onRetry={() => void hooks.refetch()} />;
+  if (!hooks.data) return <Skeleton className="h-40 w-full" />;
+  if (!hook) return <EmptyState title="Webhook not found" description="It may have been deleted." />;
+  const changed = () => { void hooks.refetch(); onChanged?.(); };
+  const active = hook.is_active !== false;
+  const byCategory = arrayOf<EventType>(events.data).reduce<Record<string, EventType[]>>((acc, e) => ({ ...acc, [e.category ?? "other"]: [...(acc[e.category ?? "other"] ?? []), e] }), {});
+  const toggle = (event: string) => setForm((f) => ({ ...f, events: f.events.includes(event) ? f.events.filter((x) => x !== event) : [...f.events, event] }));
+  const urlOk = /^https:\/\/\S+$/.test(form.url.trim());
+  const rows = arrayOf<Delivery>(deliveries.data);
+
+  const actions = (
+    <div className="flex flex-wrap gap-1">
+      <AskButton ask={ask} label={active ? "Pause" : "Resume"} tier="external" title={`${active ? "Pause" : "Resume"} deliveries to ${hook.url}`} confirmLabel={active ? "Pause" : "Resume"}
+        description={active ? "Events stop being sent to this endpoint until you resume." : "Events are sent to this endpoint again."} run={() => g8Patch(`/webhooks/${hook.id}`, { is_active: !active })} onDone={changed} />
+      <AskButton ask={ask} label="Rotate secret" tier="external" title={`Rotate the signing secret for ${hook.url}`} confirmLabel="Rotate"
+        description="The old secret stops verifying deliveries as soon as you rotate. Update your server before or right after."
+        run={async () => { const res = await g8Post<Hook>(`/webhooks/${hook.id}/rotate-secret`); if (res.data?.secret) setSecret(res.data.secret); }} onDone={changed} />
+      <AskButton ask={ask} label="Delete" variant="ghost" tier="destructive" title={`Delete the webhook for ${hook.url}`} confirmLabel="Delete" tolerateStatus={[404]}
+        description={`${brand.linkLabel} stops sending events to this endpoint and removes its delivery log.`} run={() => g8Delete(`/webhooks/${hook.id}`)} onDone={() => { changed(); onClose?.(); }} />
+    </div>
+  );
+
+  const tabs = [
+    {
+      id: "overview",
+      label: "Overview",
+      content: (
+        <div className="space-y-4">
+          {secret ? (
+            <div role="alert" className="rounded border border-amber-300 bg-amber-50 p-3 text-sm">
+              <p className="font-medium">New signing secret. It is shown once.</p>
+              <code className="mt-1 block break-all rounded bg-white p-2">{secret}</code>
+              <p className="mt-1 text-xs">Store it as G8_WEBHOOK_SECRET on your server. Never put it in browser code.</p>
+              <Button size="sm" variant="outline" className="mt-2" onClick={() => setSecret(null)}>I saved it</Button>
+            </div>
+          ) : null}
+          <KeyValueList columns={2} items={[
+            { label: "Endpoint", value: hook.url },
+            { label: "Name", value: hook.name ?? "-" },
+            { label: "Status", value: active ? "active" : "paused" },
+            { label: "Created", value: formatWhen(hook.created_at) },
+            { label: "Updated", value: formatWhen(hook.updated_at) },
+            { label: "Events", value: (hook.events ?? []).length },
+          ]} />
+          <SectionCard title="Subscribed events"><ul className="flex flex-wrap gap-1 text-xs">{(hook.events ?? []).map((e) => <li key={e}><StatusPill tone="neutral">{e}</StatusPill></li>)}</ul></SectionCard>
+          {hook.field_filters && Object.keys(hook.field_filters).length > 0 ? (
+            <SectionCard title="Field filters" description="crm.record.updated fires only when a watched field changed."><pre className="overflow-x-auto text-xs">{JSON.stringify(hook.field_filters, null, 2)}</pre></SectionCard>
+          ) : null}
+        </div>
+      ),
+    },
+    {
+      id: "edit",
+      label: "Edit",
+      content: (
+        <SectionCard title="Edit webhook" description="Changing where events go is confirmed first.">
+          <div className="space-y-3">
+            <div className="flex flex-col gap-1"><Label htmlFor="wd-url">Endpoint URL</Label><Input id="wd-url" value={form.url} onChange={(e) => setForm({ ...form, url: e.target.value })} /></div>
+            {form.url && !urlOk ? <p className="text-xs text-error-foreground">The endpoint must be an https:// URL.</p> : null}
+            <div className="flex flex-col gap-1"><Label htmlFor="wd-name">Name</Label><Input id="wd-name" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} /></div>
+            {Object.entries(byCategory).map(([category, items]) => (
+              <fieldset key={category}>
+                <legend className="text-xs font-medium uppercase text-muted-foreground">{category}</legend>
+                <div className="flex flex-wrap gap-x-4 gap-y-1">
+                  {items.map((e) => <label key={e.event} className="flex items-center gap-1 text-sm" title={e.description ?? undefined}><input type="checkbox" checked={form.events.includes(e.event)} onChange={() => toggle(e.event)} />{e.event}</label>)}
+                </div>
+              </fieldset>
+            ))}
+            <AskButton ask={ask} label="Save changes" variant="default" tier="external" title={`Update the webhook for ${hook.url}`} confirmLabel="Save" disabled={!urlOk || form.events.length === 0}
+              description={`Changes where ${brand.linkLabel} sends your data.`} run={() => g8Patch(`/webhooks/${hook.id}`, { url: form.url.trim(), name: form.name.trim() || null, events: form.events })} onDone={changed} />
+          </div>
+        </SectionCard>
+      ),
+    },
+    {
+      id: "deliveries",
+      label: "Deliveries",
+      content: deliveries.loading && !deliveries.data ? <Skeleton className="h-16 w-full" /> : deliveries.error ? <ApiError error={deliveries.error} onRetry={() => void deliveries.refetch()} /> : rows.length === 0 ? <p className="text-sm text-muted-foreground">No deliveries yet.</p> : (
+        <table className="w-full text-sm" aria-label="Deliveries">
+          <thead><tr className="text-left text-muted-foreground"><th>Event</th><th>Status</th><th>Code</th><th>Attempts</th><th>When</th></tr></thead>
+          <tbody>
+            {rows.map((d) => (
+              <tr key={d.id} className="border-t" title={d.error_message ?? undefined}>
+                <td>{d.event}</td><td>{d.status}</td><td>{d.response_code ?? "-"}</td><td>{d.attempts ?? 1}{d.max_attempts ? ` of ${d.max_attempts}` : ""}</td><td>{formatWhen(d.created_at)}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      ),
+    },
+  ];
+  return (
+    <>
+      <DetailPanel title={hook.name || hook.url} subtitle={hook.name ? hook.url : undefined} badges={<StatusPill tone={active ? "positive" : "neutral"}>{active ? "active" : "paused"}</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} />
+    </>
+  );
+}

package/blocks/integrations/components/webhook-manager.tsx

@@ -27,10 +27,14 @@ import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
 import type { ConfirmTier } from "@/g8/components/confirm-spend-dialog";
 import { EmptyState } from "@/g8/components/empty-state";
 import { arrayOf, formatWhen } from "../lib/integrations-utils";
+import { plural } from "@/g8/lib/plural";
+import { DEFAULT_BRAND, useBrand } from "@/g8/hooks/use-brand";
 
 export interface WebhookManagerProps {
   /** Pre-fill the endpoint URL of the create form (your /api/webhooks/graph8 route). */
   defaultUrl?: string;
+  /** Called when a person opens a webhook (show a WebhookDetail). */
+  onSelectWebhook?: (webhook: { id: string; url: string; name?: string | null }) => void;
   className?: string;
 }
 
@@ -65,13 +69,13 @@ type Pending =
   | { kind: "rotate"; hook: Webhook }
   | { kind: "delete"; hook: Webhook };
 
-function copyFor(p: Pending): { tier: ConfirmTier; title: string; description: string; label: string } {
+function copyFor(p: Pending, platform: string = DEFAULT_BRAND.linkLabel): { tier: ConfirmTier; title: string; description: string; label: string } {
   switch (p.kind) {
     case "create":
       return {
         tier: "external",
-        title: `Send ${p.events.length} event type${p.events.length === 1 ? "" : "s"} to ${p.url}`,
-        description: "graph8 will POST signed events to this URL as they happen.",
+        title: `Send ${plural(p.events.length, "event type")} to ${p.url}`,
+        description: `${platform} will POST signed events to this URL as they happen.`,
         label: "Create webhook",
       };
     case "toggle":
@@ -80,7 +84,7 @@ function copyFor(p: Pending): { tier: ConfirmTier; title: string; description: s
         title: `${p.hook.is_active === false ? "Resume" : "Pause"} deliveries to ${p.hook.url}`,
         description:
           p.hook.is_active === false
-            ? "graph8 starts sending events to this URL again."
+            ? `${platform} starts sending events to this URL again.`
             : "Events stop being sent to this URL until you resume.",
         label: p.hook.is_active === false ? "Resume" : "Pause",
       };
@@ -133,7 +137,8 @@ function Deliveries({ hook }: { hook: Webhook }) {
   );
 }
 
-export function WebhookManager({ defaultUrl = "", className }: WebhookManagerProps) {
+export function WebhookManager({ defaultUrl = "", onSelectWebhook, className }: WebhookManagerProps) {
+  const brand = useBrand();
   const hooks = useG8Query((signal) => g8Get("/webhooks", undefined, { signal }), []);
   const events = useG8Query((signal) => g8Get("/webhooks/events", undefined, { signal }), []);
   const [url, setUrl] = useState(defaultUrl);
@@ -169,7 +174,7 @@ export function WebhookManager({ defaultUrl = "", className }: WebhookManagerPro
   );
   const urlOk = /^https:\/\/\S+$/.test(url.trim());
   const toggle = (event: string) => setChosen((c) => (c.includes(event) ? c.filter((x) => x !== event) : [...c, event]));
-  const confirm = pending ? copyFor(pending) : null;
+  const confirm = pending ? copyFor(pending, brand.linkLabel) : null;
 
   return (
     <div className={`space-y-4 ${className ?? ""}`}>
@@ -178,7 +183,7 @@ export function WebhookManager({ defaultUrl = "", className }: WebhookManagerPro
         <div className="grid gap-2 md:grid-cols-2">
           <Input
             aria-label="Endpoint URL"
-            placeholder="https://yourapp.com/api/webhooks/graph8"
+            placeholder={`https://yourapp.com/api/webhooks/${brand.linkLabel.toLowerCase().replace(/[^a-z0-9-]+/g, "-")}`}
             value={url}
             onChange={(e) => setUrl(e.target.value)}
           />
@@ -238,7 +243,7 @@ export function WebhookManager({ defaultUrl = "", className }: WebhookManagerPro
             <li key={h.id} className="space-y-2 px-3 py-3">
               <div className="flex flex-wrap items-center justify-between gap-2">
                 <div>
-                  <div className="font-medium">{h.name || h.url}</div>
+                  {onSelectWebhook ? <button type="button" className="font-medium hover:underline" onClick={() => onSelectWebhook(h)}>{h.name || h.url}</button> : <div className="font-medium">{h.name || h.url}</div>}
                   <div className="text-xs text-gray-500">
                     {h.name ? `${h.url} - ` : ""}
                     {(h.events ?? []).length} events - {h.is_active === false ? "paused" : "active"}