@agent-native/core 0.123.0 → 0.123.2

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

@@ -0,0 +1,228 @@
+/**
+ * Lists index. A list is the workflow overlay over one object type: its entries
+ * and their attribute values are local on every backend, so a pipeline works
+ * over a HubSpot or Salesforce mirror without a provider write.
+ */
+
+import {
+  useActionMutation,
+  useActionQuery,
+} from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+import { IconList, IconPlus } from "@tabler/icons-react";
+import { useState } from "react";
+import { Link, useNavigate } from "react-router";
+import { toast } from "sonner";
+
+import {
+  LoadingRows,
+  PageHeader,
+  SetupEmptyState,
+} from "@/components/crm/Surface";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+interface ListsResponse {
+  lists: Array<{
+    id: string;
+    name: string;
+    description: string | null;
+    parentObjectType: string;
+    entryCount: number;
+    defaultViewId: string | null;
+    archived: boolean;
+  }>;
+}
+
+const OBJECT_TYPES = ["accounts", "people", "opportunities"] as const;
+
+/** Opens the list's default view, or an ad-hoc board when it has none. */
+export function listHref(listId: string): string {
+  return `/views?list=${encodeURIComponent(listId)}`;
+}
+
+export default function ListsRoute() {
+  const t = useT();
+  const query = useActionQuery<ListsResponse>(
+    "list-crm-lists" as never,
+    { limit: 100 } as never,
+  );
+  const lists = query.data?.lists ?? [];
+
+  return (
+    <>
+      <PageHeader
+        eyebrow={t("lists.eyebrow")}
+        title={t("lists.title")}
+        description={t("lists.description")}
+        actions={<CreateListDialog onCreated={() => void query.refetch()} />}
+      />
+      {query.isLoading ? (
+        <LoadingRows rows={5} />
+      ) : query.error ? (
+        <div className="m-5 rounded-lg border border-border/70 bg-card p-4 sm:m-7">
+          <p className="text-sm text-muted-foreground">
+            {query.error instanceof Error
+              ? query.error.message
+              : t("lists.loadFailed")}
+          </p>
+          <Button
+            size="sm"
+            variant="outline"
+            className="mt-3"
+            onClick={() => void query.refetch()}
+          >
+            {t("lists.retry")}
+          </Button>
+        </div>
+      ) : lists.length ? (
+        <div className="grid gap-2 p-5 sm:grid-cols-2 sm:p-7 xl:grid-cols-3">
+          {lists.map((list) => (
+            <Link
+              key={list.id}
+              to={listHref(list.id)}
+              className="group rounded-lg border border-border/70 bg-card p-4 transition-colors hover:bg-muted/50"
+            >
+              <div className="flex items-start gap-3">
+                <IconList className="mt-0.5 size-4 text-muted-foreground" />
+                <div className="min-w-0 flex-1">
+                  <p className="truncate text-sm font-medium">{list.name}</p>
+                  {list.description ? (
+                    <p className="mt-1 line-clamp-2 text-sm text-muted-foreground">
+                      {list.description}
+                    </p>
+                  ) : null}
+                  <div className="mt-3 flex flex-wrap gap-2">
+                    <Badge variant="secondary" className="font-normal">
+                      {t("lists.entryCount", { count: list.entryCount })}
+                    </Badge>
+                    <Badge variant="outline" className="font-normal">
+                      {list.parentObjectType}
+                    </Badge>
+                  </div>
+                </div>
+              </div>
+            </Link>
+          ))}
+        </div>
+      ) : (
+        <SetupEmptyState
+          title={t("lists.emptyTitle")}
+          description={t("lists.emptyDescription")}
+        />
+      )}
+    </>
+  );
+}
+
+function CreateListDialog({ onCreated }: { onCreated: () => void }) {
+  const t = useT();
+  const navigate = useNavigate();
+  const [open, setOpen] = useState(false);
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [parentObjectType, setParentObjectType] = useState<string>("accounts");
+  const create = useActionMutation<{ id: string }, Record<string, unknown>>(
+    "create-crm-list" as never,
+  );
+
+  async function createList() {
+    try {
+      const list = await create.mutateAsync({
+        name: name.trim(),
+        parentObjectType,
+        ...(description.trim() ? { description: description.trim() } : {}),
+      });
+      setOpen(false);
+      onCreated();
+      navigate(listHref(list.id));
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : t("lists.createFailed"),
+      );
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button size="sm" className="gap-2">
+          <IconPlus className="size-4" />
+          {t("lists.newList")}
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>{t("lists.createTitle")}</DialogTitle>
+          <DialogDescription>{t("lists.createDescription")}</DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-2">
+          <div className="grid gap-2">
+            <Label htmlFor="list-name">{t("lists.nameLabel")}</Label>
+            <Input
+              id="list-name"
+              value={name}
+              maxLength={120}
+              onChange={(event) => setName(event.target.value)}
+            />
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="list-object">{t("lists.objectTypeLabel")}</Label>
+            <Select
+              value={parentObjectType}
+              onValueChange={setParentObjectType}
+            >
+              <SelectTrigger id="list-object">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {OBJECT_TYPES.map((objectType) => (
+                  <SelectItem key={objectType} value={objectType}>
+                    {t(`lists.objectType.${objectType}`)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="list-description">
+              {t("lists.descriptionLabel")}
+            </Label>
+            <Input
+              id="list-description"
+              value={description}
+              maxLength={500}
+              onChange={(event) => setDescription(event.target.value)}
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button
+            disabled={!name.trim() || create.isPending}
+            onClick={() => void createList()}
+          >
+            {t("lists.createList")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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,388 @@
+import {
+  useActionMutation,
+  useActionQuery,
+} from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+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";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+
+interface ProposalField {
+  name: string;
+  before?: unknown;
+  after?: unknown;
+  beforeKnown?: boolean;
+}
+
+interface ProposalPreview {
+  id: string;
+  recordId?: string;
+  recordName?: string;
+  provider?: string;
+  operation: string;
+  status: string;
+  risk?: string;
+  createdAt?: string;
+  appliedAt?: string;
+  recordUrl?: string;
+  recordUrlUnavailableReason?: string;
+  fields?: ProposalField[];
+}
+
+interface PreparedHandoff {
+  proposalId: string;
+  providerLabel: string;
+  recordUrl: string | null;
+  recordUrlUnavailableReason: string | null;
+  fields: Array<{
+    name: string;
+    beforeKnown: boolean;
+    before: unknown;
+    after: unknown;
+  }>;
+}
+
+export default function ProposalsRoute() {
+  const t = useT();
+  const query = useActionQuery<unknown>(
+    "list-crm-proposals" as never,
+    { limit: 100 } as never,
+  );
+  const prepare = useActionMutation<PreparedHandoff, { proposalId: string }>(
+    "apply-crm-proposals" as never,
+  );
+  const proposals = normalizeProposals(query.data);
+  const [preparingIds, setPreparingIds] = useState<Set<string>>(new Set());
+
+  async function prepareHandoff(proposal: ProposalPreview) {
+    setPreparingIds((current) => new Set(current).add(proposal.id));
+    try {
+      const handoff = await prepare.mutateAsync({ proposalId: proposal.id });
+      await query.refetch();
+      // Never phrased as a completed upstream write, and never as a failure.
+      toast.info(
+        t("proposals.preparedToast", { provider: handoff.providerLabel }),
+      );
+    } catch (error) {
+      toast.error(
+        error instanceof Error
+          ? error.message
+          : t("proposals.prepareFailedToast"),
+      );
+    } finally {
+      setPreparingIds((current) => {
+        const next = new Set(current);
+        next.delete(proposal.id);
+        return next;
+      });
+    }
+  }
+
+  return (
+    <>
+      <PageHeader
+        eyebrow={t("proposals.eyebrow")}
+        title={t("proposals.title")}
+        description={t("proposals.description")}
+      />
+      {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 || t("proposals.untitledRecord")}
+                    </p>
+                    <Badge variant="secondary" className="font-normal">
+                      {t(`proposals.status.${statusKey(proposal)}`)}
+                    </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)}`}
+                      >
+                        {t("proposals.openRecord")}
+                        <IconExternalLink className="size-3.5" />
+                      </Link>
+                    </Button>
+                  ) : null}
+                  {proposal.status === "pending" ? (
+                    <PrepareButton
+                      proposal={proposal}
+                      pending={preparingIds.has(proposal.id)}
+                      onPrepare={() => void prepareHandoff(proposal)}
+                    />
+                  ) : proposal.recordUrl ? (
+                    <Button asChild size="sm" className="gap-1.5">
+                      <a
+                        href={proposal.recordUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        {t("proposals.completeUpstream", {
+                          provider: providerLabel(proposal.provider),
+                        })}
+                        <IconExternalLink className="size-3.5" />
+                      </a>
+                    </Button>
+                  ) : null}
+                </div>
+              </div>
+              {proposal.status === "approved" && !proposal.appliedAt ? (
+                <p className="mt-3 text-xs text-muted-foreground">
+                  {t("proposals.handedOffNote", {
+                    provider: providerLabel(proposal.provider),
+                  })}
+                </p>
+              ) : null}
+              {proposal.recordUrl ||
+              proposal.status === "pending" ||
+              !proposal.recordUrlUnavailableReason ? null : (
+                <p className="mt-3 text-xs text-muted-foreground">
+                  {t("proposals.recordLinkUnavailable", {
+                    provider: providerLabel(proposal.provider),
+                    reason: proposal.recordUrlUnavailableReason,
+                  })}
+                </p>
+              )}
+              <ProposalFields fields={proposal.fields} />
+            </section>
+          ))}
+        </div>
+      ) : (
+        <SetupEmptyState
+          title={t("proposals.emptyTitle")}
+          description={t("proposals.emptyDescription")}
+        />
+      )}
+    </>
+  );
+}
+
+function PrepareButton({
+  proposal,
+  pending,
+  onPrepare,
+}: {
+  proposal: ProposalPreview;
+  pending: boolean;
+  onPrepare: () => void;
+}) {
+  const t = useT();
+  const provider = providerLabel(proposal.provider);
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button size="sm" className="gap-1.5" disabled={pending}>
+          <IconShieldCheck className="size-4" />{" "}
+          {t("proposals.prepareChange", { provider })}
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            {t("proposals.prepareTitle", { provider })}
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+            {t("proposals.prepareDescription", {
+              provider,
+              record: proposal.recordName || t("proposals.untitledRecord"),
+            })}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <ProposalFields fields={proposal.fields} />
+        {proposal.recordUrl || !proposal.recordUrlUnavailableReason ? null : (
+          <p className="text-sm text-muted-foreground">
+            {t("proposals.recordLinkUnavailable", {
+              provider,
+              reason: proposal.recordUrlUnavailableReason,
+            })}
+          </p>
+        )}
+        <AlertDialogFooter>
+          <AlertDialogCancel>{t("proposals.cancel")}</AlertDialogCancel>
+          {/* The upstream tab has to open from the click itself — opening it
+              after the prepare round-trip trips popup blockers. */}
+          {proposal.recordUrl ? (
+            <AlertDialogAction asChild>
+              <a
+                href={proposal.recordUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={onPrepare}
+              >
+                {t("proposals.prepareAndOpen", { provider })}
+              </a>
+            </AlertDialogAction>
+          ) : (
+            <AlertDialogAction onClick={onPrepare}>
+              {t("proposals.prepareWithoutLink")}
+            </AlertDialogAction>
+          )}
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
+
+function ProposalFields({ fields }: { fields?: ProposalField[] }) {
+  const t = useT();
+  if (!fields?.length) {
+    return (
+      <p className="mt-4 text-sm text-muted-foreground">
+        {t("proposals.fieldPreviewUnavailable")}
+      </p>
+    );
+  }
+  return (
+    <dl className="mt-4 divide-y divide-border/70 overflow-x-auto 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 text-muted-foreground">
+            {field.beforeKnown === false
+              ? t("proposals.notMirrored")
+              : displayValue(field.before, t)}
+          </dd>
+          <dd className="break-words font-medium">
+            {displayValue(field.after, t)}
+          </dd>
+        </div>
+      ))}
+    </dl>
+  );
+}
+
+/**
+ * `approved` without `appliedAt` is a prepared handoff, not an upstream write.
+ * Labelling it "Approved" would read as done.
+ */
+function statusKey(proposal: ProposalPreview) {
+  if (proposal.status === "approved" && !proposal.appliedAt) return "prepared";
+  return proposal.status;
+}
+
+function providerLabel(provider?: string) {
+  return provider === "salesforce" ? "Salesforce" : "HubSpot";
+}
+
+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,
+                  ...(typeof field.beforeKnown === "boolean"
+                    ? { beforeKnown: field.beforeKnown }
+                    : {}),
+                },
+              ]
+            : [],
+        )
+      : 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,
+        appliedAt:
+          typeof row.appliedAt === "string" ? row.appliedAt : undefined,
+        recordUrl:
+          typeof row.recordUrl === "string" ? row.recordUrl : undefined,
+        recordUrlUnavailableReason:
+          typeof row.recordUrlUnavailableReason === "string"
+            ? row.recordUrlUnavailableReason
+            : undefined,
+        fields,
+      },
+    ];
+  });
+}
+
+function isObject(value: unknown): value is Record<string, unknown> {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+
+function displayValue(
+  value: unknown,
+  t: (key: string, options?: Record<string, unknown>) => string,
+) {
+  if (value === null || value === undefined || value === "")
+    return t("proposals.emptyValue");
+  if (typeof value === "string" || typeof value === "number")
+    return String(value);
+  if (typeof value === "boolean")
+    return value ? t("proposals.booleanTrue") : t("proposals.booleanFalse");
+  return t("proposals.structuredValue");
+}
+
+function formatDate(value: string) {
+  const date = new Date(value);
+  return Number.isNaN(date.valueOf()) ? value : date.toLocaleString();
+}