@agent-native/core 0.114.16 → 0.115.1

package/corpus/templates/crm/app/routes/dashboard.tsx

@@ -0,0 +1,118 @@
+import {
+  useActionMutation,
+  useActionQuery,
+} from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+import { Button } from "@agent-native/toolkit/ui/button";
+import { IconRefresh } from "@tabler/icons-react";
+import { useMemo } from "react";
+import { useNavigate, useSearchParams } from "react-router";
+import { toast } from "sonner";
+
+import { CrmDashboardPanel } from "@/components/crm/CrmDashboardPanel";
+import { PageHeader, SetupEmptyState } from "@/components/crm/Surface";
+import { crmDashboardMetaTitle } from "@/i18n/en-US";
+import { dashboardDataPanelId } from "@/lib/dashboard";
+import type { CrmDashboard } from "@/lib/types";
+
+export function meta() {
+  return [{ title: crmDashboardMetaTitle }];
+}
+
+export default function DashboardRoute() {
+  const t = useT();
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const dashboards = useActionQuery<CrmDashboard[]>(
+    "list-crm-dashboards" as never,
+    {} as never,
+  );
+  const install = useActionMutation<
+    { dashboardId: string },
+    Record<string, never>
+  >("install-crm-pipeline-dashboard" as never);
+  const dashboard = useMemo(() => {
+    const requested = searchParams.get("id");
+    return (
+      dashboards.data?.find((item) => item.id === requested) ??
+      dashboards.data?.find((item) => item.kind === "pipeline")
+    );
+  }, [dashboards.data, searchParams]);
+
+  async function installDashboard() {
+    try {
+      const result = await install.mutateAsync({});
+      navigate(`/dashboard?id=${encodeURIComponent(result.dashboardId)}`, {
+        replace: true,
+      });
+      toast.success(t("dashboard.ready"));
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : t("dashboard.installFailed"),
+      );
+    }
+  }
+
+  if (dashboards.isLoading) {
+    return (
+      <PageHeader
+        eyebrow="CRM"
+        title={t("dashboard.pipeline")}
+        description={t("dashboard.loadingDescription")}
+      />
+    );
+  }
+
+  if (!dashboard) {
+    return (
+      <>
+        <PageHeader
+          eyebrow="CRM"
+          title={t("dashboard.pipeline")}
+          description={t("dashboard.emptyDescription")}
+        />
+        <SetupEmptyState
+          title={t("dashboard.installTitle")}
+          description={t("dashboard.installDescription")}
+          onSync={installDashboard}
+          isSyncing={install.isPending}
+          actionLabel={t("dashboard.installAction")}
+        />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <PageHeader
+        eyebrow="CRM"
+        title={dashboard.title}
+        description={t("dashboard.liveDescription")}
+        actions={
+          <Button
+            variant="outline"
+            size="sm"
+            className="gap-2"
+            onClick={installDashboard}
+            disabled={install.isPending}
+          >
+            <IconRefresh className="size-4" />
+            {install.isPending
+              ? t("dashboard.updating")
+              : t("dashboard.updatePack")}
+          </Button>
+        }
+      />
+      <div className="grid gap-4 p-5 sm:grid-cols-2 sm:p-7 xl:grid-cols-3">
+        {dashboard.config.panels.map((panel) => (
+          <CrmDashboardPanel
+            key={panel.id}
+            dashboardId={dashboard.id}
+            panel={panel}
+            dataPanelId={dashboardDataPanelId(dashboard.config.panels, panel)}
+          />
+        ))}
+      </div>
+    </>
+  );
+}

package/corpus/templates/crm/app/routes/opportunities.tsx

@@ -0,0 +1,41 @@
+import { useActionQuery } from "@agent-native/core/client/hooks";
+import { useSearchParams } from "react-router";
+
+import { CreateCrmRecordDialog } from "@/components/crm/CreateCrmRecordDialog";
+import { RecordGrid } from "@/components/crm/RecordGrid";
+import { SavedViewDataProgram } from "@/components/crm/SavedViewDataProgram";
+import { PageHeader } from "@/components/crm/Surface";
+import { normalizeRecords } from "@/lib/types";
+
+export function meta() {
+  return [{ title: "Opportunities · CRM" }];
+}
+export default function OpportunitiesRoute() {
+  const [searchParams] = useSearchParams();
+  const viewId = searchParams.get("view") ?? undefined;
+  const query = useActionQuery<unknown>(
+    "list-crm-records" as never,
+    { kind: "opportunity", viewId } as never,
+  );
+  return (
+    <>
+      <PageHeader
+        eyebrow="Records"
+        title="Opportunities"
+        description={
+          viewId
+            ? "Opportunities matching this saved view."
+            : "Opportunities in your Native SQL workspace and connected CRM mirrors."
+        }
+        actions={<CreateCrmRecordDialog kind="opportunity" />}
+      />
+      <SavedViewDataProgram data={query.data} />
+      <RecordGrid
+        kind="opportunity"
+        records={normalizeRecords(query.data, "opportunity")}
+        isLoading={query.isLoading}
+        emptyTitle="No opportunities yet"
+      />
+    </>
+  );
+}

package/corpus/templates/crm/app/routes/people.tsx

@@ -0,0 +1,41 @@
+import { useActionQuery } from "@agent-native/core/client/hooks";
+import { useSearchParams } from "react-router";
+
+import { CreateCrmRecordDialog } from "@/components/crm/CreateCrmRecordDialog";
+import { RecordGrid } from "@/components/crm/RecordGrid";
+import { SavedViewDataProgram } from "@/components/crm/SavedViewDataProgram";
+import { PageHeader } from "@/components/crm/Surface";
+import { normalizeRecords } from "@/lib/types";
+
+export function meta() {
+  return [{ title: "People · CRM" }];
+}
+export default function PeopleRoute() {
+  const [searchParams] = useSearchParams();
+  const viewId = searchParams.get("view") ?? undefined;
+  const query = useActionQuery<unknown>(
+    "list-crm-records" as never,
+    { kind: "person", viewId } as never,
+  );
+  return (
+    <>
+      <PageHeader
+        eyebrow="Records"
+        title="People"
+        description={
+          viewId
+            ? "People matching this saved view."
+            : "People in your Native SQL workspace and connected CRM mirrors."
+        }
+        actions={<CreateCrmRecordDialog kind="person" />}
+      />
+      <SavedViewDataProgram data={query.data} />
+      <RecordGrid
+        kind="person"
+        records={normalizeRecords(query.data, "person")}
+        isLoading={query.isLoading}
+        emptyTitle="No people yet"
+      />
+    </>
+  );
+}

package/corpus/templates/crm/app/routes/proposals.tsx

@@ -0,0 +1,266 @@
+import {
+  useActionMutation,
+  useActionQuery,
+} from "@agent-native/core/client/hooks";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@agent-native/toolkit/ui/alert-dialog";
+import { Badge } from "@agent-native/toolkit/ui/badge";
+import { Button } from "@agent-native/toolkit/ui/button";
+import { IconExternalLink, IconShieldCheck } from "@tabler/icons-react";
+import { useState } from "react";
+import { Link } from "react-router";
+import { toast } from "sonner";
+
+import {
+  LoadingRows,
+  PageHeader,
+  SetupEmptyState,
+} from "@/components/crm/Surface";
+
+interface ProposalPreview {
+  id: string;
+  recordId?: string;
+  recordName?: string;
+  provider?: string;
+  operation: string;
+  status: string;
+  risk?: string;
+  createdAt?: string;
+  fields?: Array<{ name: string; before?: unknown; after?: unknown }>;
+}
+
+export default function ProposalsRoute() {
+  const query = useActionQuery<unknown>(
+    "list-crm-proposals" as never,
+    { limit: 100 } as never,
+  );
+  const apply = useActionMutation<
+    { status?: string; message?: string },
+    { proposalId: string }
+  >("apply-crm-proposals" as never);
+  const proposals = normalizeProposals(query.data);
+  const [pendingProposalIds, setPendingProposalIds] = useState<Set<string>>(
+    new Set(),
+  );
+
+  async function applyProposal(proposalId: string) {
+    setPendingProposalIds((current) => new Set(current).add(proposalId));
+    try {
+      const result = await apply.mutateAsync({ proposalId });
+      toast.info(
+        result.message ||
+          "Proposal reviewed. Complete the approved change in the connected CRM.",
+      );
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Proposal failed.");
+    } finally {
+      setPendingProposalIds((current) => {
+        const next = new Set(current);
+        next.delete(proposalId);
+        return next;
+      });
+    }
+  }
+
+  return (
+    <>
+      <PageHeader
+        eyebrow="Review"
+        title="Proposals"
+        description="Review the exact record and field scope before completing provider changes upstream."
+      />
+      {query.isLoading ? (
+        <LoadingRows rows={6} />
+      ) : proposals.length ? (
+        <div className="grid gap-3 p-5 sm:p-7">
+          {proposals.map((proposal) => (
+            <section
+              key={proposal.id}
+              className="rounded-lg border border-border/70 bg-card p-4"
+            >
+              <div className="flex flex-wrap items-start justify-between gap-3">
+                <div>
+                  <div className="flex flex-wrap items-center gap-2">
+                    <p className="text-sm font-medium">
+                      {proposal.recordName || "CRM record"}
+                    </p>
+                    <Badge
+                      variant="secondary"
+                      className="font-normal capitalize"
+                    >
+                      {proposal.status}
+                    </Badge>
+                    {proposal.risk ? (
+                      <Badge
+                        variant="outline"
+                        className="font-normal capitalize"
+                      >
+                        {proposal.risk}
+                      </Badge>
+                    ) : null}
+                  </div>
+                  <p className="mt-1 text-xs text-muted-foreground">
+                    {proposal.operation}
+                    {proposal.createdAt
+                      ? ` · ${formatDate(proposal.createdAt)}`
+                      : ""}
+                  </p>
+                </div>
+                <div className="flex items-center gap-2">
+                  {proposal.recordId ? (
+                    <Button
+                      asChild
+                      variant="ghost"
+                      size="sm"
+                      className="gap-1.5"
+                    >
+                      <Link
+                        to={`/records/${encodeURIComponent(proposal.recordId)}`}
+                      >
+                        Record <IconExternalLink className="size-3.5" />
+                      </Link>
+                    </Button>
+                  ) : null}
+                  {proposal.status === "pending" ? (
+                    <ApprovalButton
+                      proposal={proposal}
+                      pending={pendingProposalIds.has(proposal.id)}
+                      onApprove={() => void applyProposal(proposal.id)}
+                    />
+                  ) : null}
+                </div>
+              </div>
+              <ProposalFields fields={proposal.fields} />
+            </section>
+          ))}
+        </div>
+      ) : (
+        <SetupEmptyState
+          title="No CRM proposals"
+          description="Agent-initiated provider edits appear here before anything changes upstream."
+        />
+      )}
+    </>
+  );
+}
+
+function ApprovalButton({
+  proposal,
+  pending,
+  onApprove,
+}: {
+  proposal: ProposalPreview;
+  pending: boolean;
+  onApprove: () => void;
+}) {
+  const fieldNames = proposal.fields?.map((field) => field.name).join(", ");
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button size="sm" className="gap-1.5" disabled={pending}>
+          <IconShieldCheck className="size-4" /> Review upstream change
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Review this provider change</AlertDialogTitle>
+          <AlertDialogDescription>
+            This connection has not proved an atomic expected-revision write.
+            Review
+            {proposal.recordName ? ` ${proposal.recordName}` : " this record"}
+            {fieldNames ? ` in ${fieldNames}` : ""}, then make the change in
+            {proposal.provider === "salesforce" ? " Salesforce" : " HubSpot"}.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <ProposalFields fields={proposal.fields} />
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={onApprove}>Acknowledge</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
+
+function ProposalFields({ fields }: { fields?: ProposalPreview["fields"] }) {
+  if (!fields?.length) {
+    return (
+      <p className="mt-4 text-sm text-muted-foreground">
+        The field preview is unavailable. Approval remains scoped to this single
+        record.
+      </p>
+    );
+  }
+  return (
+    <dl className="mt-4 divide-y divide-border/70 rounded-md border border-border/70">
+      {fields.slice(0, 20).map((field) => (
+        <div
+          key={field.name}
+          className="grid grid-cols-[8rem_1fr_1fr] gap-3 px-3 py-2 text-sm"
+        >
+          <dt className="truncate text-muted-foreground">{field.name}</dt>
+          <dd className="break-words">{displayValue(field.before)}</dd>
+          <dd className="break-words font-medium">
+            {displayValue(field.after)}
+          </dd>
+        </div>
+      ))}
+    </dl>
+  );
+}
+
+function normalizeProposals(data: unknown): ProposalPreview[] {
+  const rows =
+    isObject(data) && Array.isArray(data.proposals) ? data.proposals : [];
+  return rows.flatMap((row) => {
+    if (!isObject(row) || typeof row.id !== "string") return [];
+    const fields = Array.isArray(row.fields)
+      ? row.fields.flatMap((field) =>
+          isObject(field) && typeof field.name === "string"
+            ? [{ name: field.name, before: field.before, after: field.after }]
+            : [],
+        )
+      : undefined;
+    return [
+      {
+        id: row.id,
+        recordId: typeof row.recordId === "string" ? row.recordId : undefined,
+        recordName:
+          typeof row.recordName === "string" ? row.recordName : undefined,
+        provider: typeof row.provider === "string" ? row.provider : undefined,
+        operation: typeof row.operation === "string" ? row.operation : "update",
+        status: typeof row.status === "string" ? row.status : "pending",
+        risk: typeof row.risk === "string" ? row.risk : undefined,
+        createdAt:
+          typeof row.createdAt === "string" ? row.createdAt : undefined,
+        fields,
+      },
+    ];
+  });
+}
+
+function isObject(value: unknown): value is Record<string, unknown> {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+
+function displayValue(value: unknown) {
+  if (value === null || value === undefined || value === "") return "—";
+  if (typeof value === "string" || typeof value === "number")
+    return String(value);
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  return "Structured value";
+}
+
+function formatDate(value: string) {
+  const date = new Date(value);
+  return Number.isNaN(date.valueOf()) ? value : date.toLocaleString();
+}

package/corpus/templates/crm/app/routes/records.$recordId.tsx

@@ -0,0 +1,35 @@
+import {
+  useActionMutation,
+  useActionQuery,
+} from "@agent-native/core/client/hooks";
+import { useParams } from "react-router";
+
+import { RecordActions } from "@/components/crm/RecordActions";
+import { RecordWorkspace } from "@/components/crm/RecordWorkspace";
+import { normalizeRecord, type CrmRecordDetail } from "@/lib/types";
+
+export default function RecordRoute() {
+  const { recordId } = useParams();
+  const query = useActionQuery<unknown>(
+    "get-crm-record" as never,
+    { recordId } as never,
+    { enabled: Boolean(recordId) },
+  );
+  const manageTask = useActionMutation<
+    unknown,
+    { taskId: string; status: "done" }
+  >("manage-crm-task" as never);
+  const summary = normalizeRecord(query.data, "account");
+  const detail = summary
+    ? ({ ...summary, ...(query.data as object) } as CrmRecordDetail)
+    : undefined;
+  return (
+    <RecordWorkspace
+      record={detail}
+      isLoading={query.isLoading}
+      isCompletingTask={manageTask.isPending}
+      onCompleteTask={(taskId) => manageTask.mutate({ taskId, status: "done" })}
+      actions={detail ? <RecordActions record={detail} /> : undefined}
+    />
+  );
+}

package/corpus/templates/crm/app/routes/settings.tsx

@@ -0,0 +1,63 @@
+import { ChangelogSettingsCard } from "@agent-native/core/client/changelog";
+import {
+  SettingsTabsPage,
+  useAgentSettingsTabs,
+  type SettingsTabItem,
+} from "@agent-native/core/client/settings";
+import { IconWaveSine } from "@tabler/icons-react";
+import { useMemo } from "react";
+import { useLocation } from "react-router";
+
+import { IntelligenceSettings } from "@/components/crm/IntelligenceSettings";
+
+import changelog from "../../CHANGELOG.md?raw";
+
+export function meta() {
+  return [{ title: "CRM settings" }];
+}
+
+export default function SettingsRoute() {
+  const location = useLocation();
+  const agentSettingsTabs = useAgentSettingsTabs();
+  const tabs = useMemo<SettingsTabItem[]>(
+    () => [
+      {
+        id: "intelligence",
+        label: "Intelligence",
+        icon: IconWaveSine,
+        keywords: "signals trackers keywords smart detectors call evidence",
+        content: <IntelligenceSettings />,
+      },
+      ...agentSettingsTabs,
+    ],
+    [agentSettingsTabs],
+  );
+  const defaultTab = location.pathname.includes("connections")
+    ? "connections"
+    : location.pathname.includes("intelligence")
+      ? "intelligence"
+      : "general";
+
+  return (
+    <SettingsTabsPage
+      defaultTab={defaultTab}
+      extraTabs={tabs}
+      general={
+        <div className="mx-auto w-full max-w-2xl space-y-3">
+          <h1 className="text-xl font-semibold tracking-tight">CRM settings</h1>
+          <p className="text-sm leading-6 text-muted-foreground">
+            Native SQL keeps CRM-owned records local and portable. HubSpot and
+            Salesforce use workspace Connections; their mirrors store only
+            allow-listed fields, scoped metadata, and bounded evidence
+            references.
+          </p>
+        </div>
+      }
+      whatsNew={
+        <div className="mx-auto w-full max-w-2xl">
+          <ChangelogSettingsCard markdown={changelog} />
+        </div>
+      }
+    />
+  );
+}