@burdenoff/microfe-movethewheels 2026.1031.5 → 2026.1101.1

package/src/movethewheels/pages/IntegrationsPage.tsx

@@ -0,0 +1,752 @@
+/**
+ * Integrations Page (BOFF-4404)
+ *
+ * Connect external carrier, ELD and GPS feeds to MoveTheWheels. Each
+ * integration is a signed webhook: the sender posts tracking updates to the
+ * integration's URL, signed with HMAC-SHA256 over the raw body, and every
+ * accepted update becomes a tracking event on the matching shipment.
+ *
+ * The signing secret is generated in the browser, shown exactly once and never
+ * read back from the service. Named carrier networks (project44, FourKites,
+ * Descartes) are listed as not yet available: they need vendor agreements
+ * before an adapter can ship, and the service refuses them.
+ */
+import { useEffect, useRef, useState, type FormEvent } from 'react';
+import {
+  Activity,
+  Check,
+  ChevronDown,
+  ChevronUp,
+  Copy,
+  KeyRound,
+  Pause,
+  Play,
+  Plug,
+  Plus,
+  RefreshCw,
+  ShieldCheck,
+  Trash2,
+} from 'lucide-react';
+import {
+  CTAOverflowMenu,
+  PagePurpose,
+  ResponsiveDialog,
+  ResponsiveDialogContent,
+  ResponsiveDialogDescription,
+  ResponsiveDialogFooter,
+  ResponsiveDialogHeader,
+  ResponsiveDialogTitle,
+} from '@burdenoff/fe-libs/ui';
+import { PageLayout } from '../components/PageLayout';
+import { MetricCard, MetricGrid } from '../components/MetricCard';
+import { Notice, useNotice } from '../components/Notice';
+import { FormError } from '../components/FormError';
+import {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Skeleton,
+} from '../components/ui';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import {
+  useCarrierIntegrationActions,
+  useCarrierIntegrationCounts,
+  useCarrierIntegrationEvents,
+  useCarrierIntegrations,
+} from '../hooks/useCarrierIntegrations';
+import {
+  INTEGRATION_STATUSES,
+  MAX_UPDATES_PER_DELIVERY,
+  ROADMAP_PROVIDERS,
+  SIGNATURE_HEADER,
+  TRACKING_EVENT_TYPES,
+  curlExample,
+  eventStatusTone,
+  examplePayload,
+  generateSigningSecret,
+  humanize,
+  integrationNameError,
+  integrationStatusTone,
+  signingSecretError,
+  statusExplanation,
+  webhookUrl,
+  type CarrierIntegration,
+  type IntegrationStatus,
+} from '../utils/carrierIntegrations';
+import { formatDateTime } from '../utils/formatters';
+
+const PAGE_SIZE = 20;
+const ALL = 'ALL';
+
+function errorMessage(error: unknown, fallback: string): string {
+  return error instanceof Error && error.message ? error.message : fallback;
+}
+
+function CopyField({
+  label,
+  value,
+  multiline,
+}: {
+  label: string;
+  value: string;
+  multiline?: boolean;
+}) {
+  const [copied, setCopied] = useState(false);
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 2000);
+    } catch {
+      setCopied(false);
+    }
+  };
+  return (
+    <div className="space-y-1">
+      <div className="flex items-center justify-between gap-2">
+        <span className="text-xs font-medium text-text-secondary">{label}</span>
+        <Button
+          type="button"
+          size="sm"
+          variant="ghost"
+          onClick={() => void copy()}
+          aria-label={`Copy ${label.toLowerCase()}`}
+        >
+          {copied ? <Check size={14} className="mr-1" /> : <Copy size={14} className="mr-1" />}
+          {copied ? 'Copied' : 'Copy'}
+        </Button>
+      </div>
+      {multiline ? (
+        <pre className="max-h-64 overflow-auto whitespace-pre-wrap break-all rounded-lg bg-bg-sunken px-3 py-2 font-mono text-xs text-text-primary">
+          {value}
+        </pre>
+      ) : (
+        <code className="block break-all rounded-lg bg-bg-sunken px-3 py-2 font-mono text-xs text-text-primary">
+          {value}
+        </code>
+      )}
+    </div>
+  );
+}
+
+/** Shown once after a secret is generated; the service never returns it again. */
+function SecretRevealDialog({
+  secret,
+  integrationName,
+  onClose,
+}: {
+  secret: string | null;
+  integrationName: string;
+  onClose: () => void;
+}) {
+  return (
+    <ResponsiveDialog open={secret !== null} onOpenChange={(open) => !open && onClose()}>
+      <ResponsiveDialogContent>
+        <ResponsiveDialogHeader>
+          <ResponsiveDialogTitle>Signing secret for {integrationName}</ResponsiveDialogTitle>
+          <ResponsiveDialogDescription>
+            Copy it into the sending system now. MoveTheWheels stores it to verify deliveries but
+            will not show it again; rotate it if it is lost.
+          </ResponsiveDialogDescription>
+        </ResponsiveDialogHeader>
+        {secret ? <CopyField key={secret} label="Signing secret" value={secret} /> : null}
+        <ResponsiveDialogFooter>
+          <Button onClick={onClose}>I have saved it</Button>
+        </ResponsiveDialogFooter>
+      </ResponsiveDialogContent>
+    </ResponsiveDialog>
+  );
+}
+
+function CreateIntegrationDialog({
+  open,
+  onOpenChange,
+  onCreated,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onCreated: (integration: CarrierIntegration, secret: string) => void;
+}) {
+  const actions = useCarrierIntegrationActions();
+  const [name, setName] = useState('');
+  const [secret, setSecret] = useState(() => generateSigningSecret());
+  const [error, setError] = useState<string | null>(null);
+  const [isSaving, setIsSaving] = useState(false);
+
+  const reset = () => {
+    setName('');
+    setSecret(generateSigningSecret());
+    setError(null);
+  };
+
+  const submit = async (event: FormEvent) => {
+    event.preventDefault();
+    const problem = integrationNameError(name) ?? signingSecretError(secret);
+    if (problem) {
+      setError(problem);
+      return;
+    }
+    setIsSaving(true);
+    setError(null);
+    try {
+      const created = await actions.create({
+        provider: 'GENERIC_WEBHOOK',
+        name,
+        apiSecret: secret,
+      });
+      onCreated(created, secret);
+      reset();
+      onOpenChange(false);
+    } catch (createError) {
+      setError(errorMessage(createError, 'Could not create the integration.'));
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <ResponsiveDialog
+      open={open}
+      onOpenChange={(next) => {
+        if (!next) reset();
+        onOpenChange(next);
+      }}
+    >
+      <ResponsiveDialogContent>
+        <form onSubmit={(event) => void submit(event)} className="space-y-4">
+          <ResponsiveDialogHeader>
+            <ResponsiveDialogTitle>Connect a tracking feed</ResponsiveDialogTitle>
+            <ResponsiveDialogDescription>
+              A signed webhook for a carrier, ELD or GPS provider. Updates it sends become tracking
+              events on the matching shipments.
+            </ResponsiveDialogDescription>
+          </ResponsiveDialogHeader>
+          <div className="space-y-1.5">
+            <Label htmlFor="integration-name">Name</Label>
+            <Input
+              id="integration-name"
+              value={name}
+              maxLength={120}
+              placeholder="e.g. Fleet GPS feed"
+              onChange={(event) => setName(event.target.value)}
+              autoFocus
+            />
+          </div>
+          <div className="space-y-1.5">
+            <Label>Type</Label>
+            <p className="rounded-lg border border-border-default px-3 py-2 text-sm">
+              Signed webhook (any carrier, ELD or GPS system that can send HTTPS POSTs)
+            </p>
+          </div>
+          <div className="space-y-1.5">
+            <div className="flex items-center justify-between">
+              <Label>Signing secret</Label>
+              <Button
+                type="button"
+                size="sm"
+                variant="ghost"
+                onClick={() => setSecret(generateSigningSecret())}
+              >
+                <RefreshCw size={14} className="mr-1" />
+                Generate another
+              </Button>
+            </div>
+            <code className="block break-all rounded-lg bg-bg-sunken px-3 py-2 font-mono text-xs">
+              {secret}
+            </code>
+            <p className="text-xs text-text-secondary">
+              Generated in your browser. You can copy it on the next step.
+            </p>
+          </div>
+          <FormError message={error} />
+          <ResponsiveDialogFooter>
+            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isSaving}>
+              {isSaving ? 'Connecting…' : 'Connect'}
+            </Button>
+          </ResponsiveDialogFooter>
+        </form>
+      </ResponsiveDialogContent>
+    </ResponsiveDialog>
+  );
+}
+
+function DeliveryLog({ integrationId, refreshKey }: { integrationId: string; refreshKey: number }) {
+  const { events, isLoading, error } = useCarrierIntegrationEvents(integrationId, refreshKey);
+  return (
+    <div className="space-y-2">
+      <p className="text-sm font-medium">Recent deliveries</p>
+      <FormError message={error?.message} />
+      {isLoading && events.length === 0 ? (
+        <Skeleton className="h-12 w-full" />
+      ) : events.length === 0 ? (
+        <p className="text-sm text-text-secondary">
+          No deliveries yet. Send a signed test update with the example below.
+        </p>
+      ) : (
+        <ul className="space-y-2">
+          {events.map((event) => (
+            <li
+              key={event.id}
+              className="flex flex-wrap items-start justify-between gap-3 rounded-lg bg-bg-sunken px-3 py-2"
+            >
+              <div className="min-w-0">
+                <p className="text-sm font-medium">
+                  {event.eventType ? humanize(event.eventType) : 'Delivery'}
+                  {event.externalEventId ? (
+                    <span className="ml-2 font-mono text-xs text-text-tertiary">
+                      {event.externalEventId}
+                    </span>
+                  ) : null}
+                </p>
+                <p className="text-xs text-text-secondary">{formatDateTime(event.receivedAt)}</p>
+                {event.errorMessage ? (
+                  <p className="mt-1 break-words text-xs text-status-error-text">
+                    {event.errorMessage}
+                  </p>
+                ) : null}
+              </div>
+              <Badge variant={eventStatusTone(event.status)}>{humanize(event.status)}</Badge>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+function SetupInstructions({ url }: { url: string }) {
+  return (
+    <div className="space-y-3">
+      <p className="text-sm font-medium">How to send updates</p>
+      <CopyField label="Webhook URL" value={url} />
+      <ul className="list-disc space-y-1 pl-5 text-xs text-text-secondary">
+        <li>POST JSON: one update object, or an array of up to {MAX_UPDATES_PER_DELIVERY}.</li>
+        <li>
+          Sign the exact raw body with HMAC-SHA256 using the signing secret and send the hex digest
+          in the <code className="font-mono">{SIGNATURE_HEADER}</code> header (a{' '}
+          <code className="font-mono">sha256=</code> prefix is accepted).
+        </li>
+        <li>
+          Identify the shipment with <code className="font-mono">trackingNumber</code> or its{' '}
+          <code className="font-mono">shipmentId</code>. Event types:{' '}
+          {TRACKING_EVENT_TYPES.join(', ')}.
+        </li>
+        <li>
+          Send a stable <code className="font-mono">externalEventId</code> so retries are recorded
+          once instead of twice.
+        </li>
+      </ul>
+      <CopyField label="Example body" value={examplePayload()} multiline />
+      <CopyField label="Example request" value={curlExample(url)} multiline />
+    </div>
+  );
+}
+
+function IntegrationCard({
+  integration,
+  url,
+  expanded,
+  refreshKey,
+  busy,
+  onToggle,
+  onSetStatus,
+  onRotate,
+  onDelete,
+}: {
+  integration: CarrierIntegration;
+  url: string;
+  expanded: boolean;
+  refreshKey: number;
+  /** An action on this integration is in flight; its other actions wait. */
+  busy: boolean;
+  onToggle: () => void;
+  onSetStatus: (status: IntegrationStatus) => void;
+  onRotate: () => void;
+  onDelete: () => void;
+}) {
+  const isActive = integration.status === 'ACTIVE';
+  return (
+    <Card>
+      <CardContent className="p-5">
+        <div className="flex flex-wrap items-start justify-between gap-3">
+          <div className="min-w-0 space-y-1">
+            <div className="flex flex-wrap items-center gap-2">
+              <p className="text-base font-semibold">{integration.name}</p>
+              <Badge variant={integrationStatusTone(integration.status)}>
+                {humanize(integration.status)}
+              </Badge>
+            </div>
+            <p className="text-xs text-text-secondary">
+              Signed webhook · {statusExplanation(integration.status)}
+            </p>
+            <p className="text-xs text-text-secondary">
+              Last accepted update:{' '}
+              {integration.lastSyncAt ? formatDateTime(integration.lastSyncAt) : 'none yet'}
+              {integration.lastErrorAt
+                ? ` · Last error ${formatDateTime(integration.lastErrorAt)}`
+                : ''}
+            </p>
+            {integration.lastErrorMessage ? (
+              <p className="break-words text-xs text-status-error-text">
+                {integration.lastErrorMessage}
+              </p>
+            ) : null}
+          </div>
+          <div className="flex flex-wrap items-center gap-2">
+            <Button
+              size="sm"
+              variant="outline"
+              disabled={busy}
+              onClick={() => onSetStatus(isActive ? 'PAUSED' : 'ACTIVE')}
+            >
+              {isActive ? (
+                <Pause size={14} className="mr-1" />
+              ) : (
+                <Play size={14} className="mr-1" />
+              )}
+              {isActive ? 'Pause' : 'Resume'}
+            </Button>
+            <Button size="sm" variant="outline" disabled={busy} onClick={onRotate}>
+              <KeyRound size={14} className="mr-1" />
+              Rotate secret
+            </Button>
+            <Button
+              size="sm"
+              variant="ghost"
+              disabled={busy}
+              onClick={onDelete}
+              aria-label={`Delete ${integration.name}`}
+            >
+              <Trash2 size={14} />
+            </Button>
+            <Button
+              size="sm"
+              variant="ghost"
+              onClick={onToggle}
+              aria-expanded={expanded}
+              aria-label={expanded ? 'Hide details' : 'Show details'}
+            >
+              {expanded ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
+            </Button>
+          </div>
+        </div>
+        {expanded ? (
+          <div className="mt-4 grid gap-6 border-t border-border-subtle pt-4 lg:grid-cols-2">
+            <SetupInstructions url={url} />
+            <DeliveryLog integrationId={integration.id} refreshKey={refreshKey} />
+          </div>
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+}
+
+/**
+ * Remounts the page whenever the host switches tenant or workspace, so no
+ * server state, filter, page, pending reveal or in-flight mutation from the
+ * previous workspace survives into the next one.
+ */
+export default function IntegrationsPage() {
+  const { tenantId, workspaceId } = useMoveTheWheels();
+  return <WorkspaceIntegrationsPage key={`${tenantId ?? ''}:${workspaceId ?? ''}`} />;
+}
+
+function WorkspaceIntegrationsPage() {
+  const { apiGatewayUrl } = useMoveTheWheels();
+  const actions = useCarrierIntegrationActions();
+  const { message: notice, notify } = useNotice();
+  const [actionError, setActionError] = useState<string | null>(null);
+  const [status, setStatus] = useState<IntegrationStatus | typeof ALL>(ALL);
+  const [page, setPage] = useState(0);
+  const [refreshKey, setRefreshKey] = useState(0);
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+  const [createOpen, setCreateOpen] = useState(false);
+  // Secrets waiting to be shown, oldest first. Each is shown once and cannot be
+  // read back, so concurrent rotations on different feeds queue instead of
+  // replacing an unacknowledged secret.
+  const [reveals, setReveals] = useState<{ name: string; secret: string }[]>([]);
+  const revealed = reveals[0] ?? null;
+  const reveal = (name: string, secret: string) =>
+    setReveals((queue) => [...queue, { name, secret }]);
+  // One write per integration at a time: two overlapping secret rotations
+  // could otherwise reveal a secret the server has already replaced.
+  const busyRef = useRef(new Set<string>());
+  const [busyIds, setBusyIds] = useState<ReadonlySet<string>>(() => new Set());
+  const exclusive = async (id: string, action: () => Promise<void>) => {
+    if (busyRef.current.has(id)) return;
+    busyRef.current.add(id);
+    setBusyIds(new Set(busyRef.current));
+    try {
+      await action();
+    } finally {
+      busyRef.current.delete(id);
+      setBusyIds(new Set(busyRef.current));
+    }
+  };
+
+  const { integrations, total, isLoading, error, refetch } = useCarrierIntegrations({
+    status: status === ALL ? undefined : status,
+    limit: PAGE_SIZE,
+    offset: page * PAGE_SIZE,
+  });
+  // Workspace-wide totals, independent of the status filter and page.
+  const {
+    all: allFeeds,
+    active: activeFeeds,
+    refetch: refetchCounts,
+  } = useCarrierIntegrationCounts();
+  const pageCount = Math.max(1, Math.ceil(total / PAGE_SIZE));
+  // A delete or pause can empty the last page; step back to the last page
+  // that still has feeds instead of showing a false empty state.
+  useEffect(() => {
+    if (!isLoading && page > 0 && page >= pageCount) setPage(pageCount - 1);
+  }, [isLoading, page, pageCount]);
+  const syncTimes = integrations
+    .map((integration) => integration.lastSyncAt)
+    .filter((value): value is string => Boolean(value))
+    .sort();
+  const lastSync = syncTimes.length > 0 ? syncTimes[syncTimes.length - 1] : undefined;
+
+  const urlFor = (integration: CarrierIntegration) =>
+    // The row's own workspace, never the host's current one: the URL must
+    // address the workspace that owns the integration.
+    webhookUrl(apiGatewayUrl, integration.workspaceId, integration.id, window.location.origin);
+
+  const refresh = () => {
+    setRefreshKey((key) => key + 1);
+    void refetch();
+    void refetchCounts();
+  };
+  const done = (message: string) => {
+    setActionError(null);
+    notify(message);
+    refresh();
+  };
+
+  const setIntegrationStatus = async (integration: CarrierIntegration, next: IntegrationStatus) => {
+    try {
+      await actions.update(integration.id, { status: next });
+      done(next === 'ACTIVE' ? `Resumed ${integration.name}.` : `Paused ${integration.name}.`);
+    } catch (updateError) {
+      setActionError(errorMessage(updateError, 'Could not change the integration status.'));
+    }
+  };
+
+  const rotateSecret = async (integration: CarrierIntegration) => {
+    if (
+      !window.confirm(
+        `Rotate the signing secret for ${integration.name}? Deliveries signed with the old secret are refused as soon as it changes.`
+      )
+    )
+      return;
+    const secret = generateSigningSecret();
+    try {
+      await actions.update(integration.id, { apiSecret: secret });
+      reveal(integration.name, secret);
+      done(`Rotated the signing secret for ${integration.name}.`);
+    } catch (rotateError) {
+      setActionError(errorMessage(rotateError, 'Could not rotate the signing secret.'));
+    }
+  };
+
+  const removeIntegration = async (integration: CarrierIntegration) => {
+    if (
+      !window.confirm(
+        `Delete ${integration.name}? Its webhook URL stops working; tracking events it already created stay on their shipments.`
+      )
+    )
+      return;
+    try {
+      await actions.remove(integration.id);
+      if (expandedId === integration.id) setExpandedId(null);
+      done(`Deleted ${integration.name}.`);
+    } catch (removeError) {
+      setActionError(errorMessage(removeError, 'Could not delete the integration.'));
+    }
+  };
+
+  return (
+    <PageLayout
+      title="Integrations"
+      subtitle="Carrier, ELD and GPS tracking feeds"
+      icon={<Plug size={24} />}
+      headerActions={
+        <CTAOverflowMenu
+          primary={{
+            label: 'Connect feed',
+            icon: <Plus size={16} />,
+            onSelect: () => setCreateOpen(true),
+          }}
+          actions={[{ label: 'Refresh', icon: <RefreshCw size={16} />, onSelect: refresh }]}
+        />
+      }
+    >
+      <PagePurpose icon={<Plug size={18} />}>
+        Connect the systems that already know where your freight is. Each feed gets its own signed
+        webhook; every update it sends becomes a tracking event on the matching shipment, so status
+        and ETA stay current without manual entry.
+      </PagePurpose>
+
+      <Notice message={notice} />
+      <FormError message={actionError} />
+
+      <MetricGrid columns={3}>
+        <MetricCard label="Feeds" value={allFeeds} icon={<Plug size={20} />} accent="brand" />
+        <MetricCard
+          label="Active"
+          value={activeFeeds}
+          icon={<ShieldCheck size={20} />}
+          accent="success"
+        />
+        <MetricCard
+          label="Last accepted update (shown)"
+          value={lastSync ? formatDateTime(lastSync) : '—'}
+          icon={<Activity size={20} />}
+          accent="blue"
+        />
+      </MetricGrid>
+
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+        <Select
+          value={status}
+          onValueChange={(value) => {
+            setStatus(value as IntegrationStatus | typeof ALL);
+            setPage(0);
+          }}
+        >
+          <SelectTrigger aria-label="Status" className="sm:w-56">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value={ALL}>All statuses</SelectItem>
+            {INTEGRATION_STATUSES.map((option) => (
+              <SelectItem key={option} value={option}>
+                {humanize(option)}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      <FormError message={error?.message} />
+
+      {isLoading && integrations.length === 0 ? (
+        <div className="grid gap-4">
+          <Skeleton className="h-28 w-full" />
+          <Skeleton className="h-28 w-full" />
+        </div>
+      ) : integrations.length === 0 && !error ? (
+        <Card>
+          <CardContent className="flex flex-col items-center gap-3 p-10 text-center">
+            <Plug size={32} className="text-text-tertiary" />
+            <p className="font-medium">
+              {status === ALL ? 'No tracking feeds connected' : 'No feeds with this status'}
+            </p>
+            <p className="max-w-md text-sm text-text-secondary">
+              {status === ALL
+                ? 'Connect a carrier portal, ELD or GPS tracker so shipment updates arrive on their own.'
+                : 'Choose another status to see the rest of your feeds.'}
+            </p>
+            {status === ALL ? (
+              <Button onClick={() => setCreateOpen(true)}>
+                <Plus size={16} className="mr-1.5" />
+                Connect feed
+              </Button>
+            ) : null}
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="grid gap-4">
+          {integrations.map((integration) => (
+            <IntegrationCard
+              key={integration.id}
+              integration={integration}
+              url={urlFor(integration)}
+              expanded={expandedId === integration.id}
+              refreshKey={refreshKey}
+              busy={busyIds.has(integration.id)}
+              onToggle={() =>
+                setExpandedId((id) => (id === integration.id ? null : integration.id))
+              }
+              onSetStatus={(next) =>
+                void exclusive(integration.id, () => setIntegrationStatus(integration, next))
+              }
+              onRotate={() => void exclusive(integration.id, () => rotateSecret(integration))}
+              onDelete={() => void exclusive(integration.id, () => removeIntegration(integration))}
+            />
+          ))}
+        </div>
+      )}
+
+      {total > PAGE_SIZE ? (
+        <div className="flex items-center justify-between text-sm">
+          <span className="text-text-secondary">
+            Page {page + 1} of {pageCount} · {total} feeds
+          </span>
+          <div className="flex gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              disabled={page === 0}
+              onClick={() => setPage((p) => p - 1)}
+            >
+              Previous
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              disabled={page + 1 >= pageCount}
+              onClick={() => setPage((p) => p + 1)}
+            >
+              Next
+            </Button>
+          </div>
+        </div>
+      ) : null}
+
+      <Card>
+        <CardContent className="space-y-2 p-5">
+          <p className="text-sm font-medium">Carrier networks</p>
+          <p className="text-sm text-text-secondary">
+            Direct connections to {ROADMAP_PROVIDERS.map((provider) => provider.label).join(', ')}{' '}
+            are not available yet. Until they are, any carrier or telematics system that can send
+            HTTPS webhooks connects through a signed feed above.
+          </p>
+          <div className="flex flex-wrap gap-2">
+            {ROADMAP_PROVIDERS.map((provider) => (
+              <Badge key={provider.id} variant="outline">
+                {provider.label} · not available yet
+              </Badge>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+
+      <CreateIntegrationDialog
+        open={createOpen}
+        onOpenChange={setCreateOpen}
+        onCreated={(integration, secret) => {
+          setExpandedId(integration.id);
+          reveal(integration.name, secret);
+          done(`Connected ${integration.name}.`);
+        }}
+      />
+      <SecretRevealDialog
+        secret={revealed?.secret ?? null}
+        integrationName={revealed?.name ?? ''}
+        onClose={() => setReveals((queue) => queue.slice(1))}
+      />
+    </PageLayout>
+  );
+}