@agent-native/core 0.117.2 → 0.118.1

package/corpus/templates/crm/app/components/crm/RecordActions.tsx

@@ -1,510 +0,0 @@
-import { sendToAgentChat } from "@agent-native/core/client/agent-chat";
-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 {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@agent-native/toolkit/ui/dialog";
-import { Input } from "@agent-native/toolkit/ui/input";
-import { Label } from "@agent-native/toolkit/ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@agent-native/toolkit/ui/select";
-import { Textarea } from "@agent-native/toolkit/ui/textarea";
-import {
-  IconBolt,
-  IconChecklist,
-  IconExternalLink,
-  IconFilePlus,
-  IconPencil,
-} from "@tabler/icons-react";
-import { useState } from "react";
-import { Link } from "react-router";
-import { toast } from "sonner";
-
-import type { CrmRecordDetail } from "@/lib/types";
-
-export function RecordActions({ record }: { record: CrmRecordDetail }) {
-  return (
-    <div className="flex flex-wrap items-center gap-2">
-      <EditFieldDialog record={record} />
-      <CreateRecordTaskDialog recordId={record.id} />
-      <AttachEvidenceDialog recordId={record.id} />
-      <CallEvidenceAutomationDialog record={record} />
-    </div>
-  );
-}
-
-function EditFieldDialog({ record }: { record: CrmRecordDetail }) {
-  const isNative = record.provider === "native";
-  const [open, setOpen] = useState(false);
-  const [target, setTarget] = useState<"local" | "provider">(
-    isNative ? "local" : "provider",
-  );
-  const [field, setField] = useState("");
-  const [value, setValue] = useState("");
-  const [valueType, setValueType] = useState<"string" | "number" | "boolean">(
-    "string",
-  );
-  const update = useActionMutation<
-    { mutationId: string; status?: string },
-    {
-      recordId: string;
-      target: "local" | "provider";
-      fields: Record<string, string | number | boolean>;
-      expectedRemoteRevision?: string;
-    }
-  >("update-crm-record" as never);
-  const apply = useActionMutation<
-    { status?: string; message?: string },
-    { proposalId: string }
-  >("apply-crm-proposals" as never);
-
-  async function submit() {
-    const nextValue =
-      valueType === "number"
-        ? Number(value)
-        : valueType === "boolean"
-          ? value === "true"
-          : value;
-    if (valueType === "number" && !Number.isFinite(nextValue)) {
-      toast.error("Enter a valid number.");
-      return;
-    }
-    try {
-      const result = await update.mutateAsync({
-        recordId: record.id,
-        target,
-        fields: { [field.trim()]: nextValue },
-        ...((isNative || target === "provider") && record.remoteRevision
-          ? { expectedRemoteRevision: record.remoteRevision }
-          : {}),
-      });
-      if (target === "provider" && result.status === "pending") {
-        const applied = await apply.mutateAsync({
-          proposalId: result.mutationId,
-        });
-        if (applied.status !== "applied") {
-          throw new Error(
-            applied.message ||
-              `Provider update finished as ${applied.status ?? "unknown"}.`,
-          );
-        }
-      }
-      setOpen(false);
-      setField("");
-      setValue("");
-      toast.success(
-        target === "provider"
-          ? "Connected CRM field updated."
-          : "Local CRM field updated.",
-      );
-    } catch (error) {
-      toast.error(
-        error instanceof Error ? error.message : "CRM update failed.",
-      );
-    }
-  }
-
-  function setDialogOpen(nextOpen: boolean) {
-    setOpen(nextOpen);
-    if (nextOpen && isNative) setTarget("local");
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={setDialogOpen}>
-      <DialogTrigger asChild>
-        <Button variant="outline" size="sm" className="gap-1.5">
-          <IconPencil className="size-4" /> Edit field
-        </Button>
-      </DialogTrigger>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle>Edit CRM field</DialogTitle>
-          <DialogDescription>
-            {isNative
-              ? "Native SQL records are local-authoritative, so changes save directly to this workspace."
-              : "Provider edits become reviewable proposals and remain fail-closed unless the connected CRM proves an atomic expected-revision write. Local changes are limited to local-authoritative fields."}
-          </DialogDescription>
-        </DialogHeader>
-        <div className="grid gap-4 py-2">
-          {isNative ? null : (
-            <FormField label="Authority" htmlFor="field-target">
-              <Select
-                value={target}
-                onValueChange={(next) =>
-                  setTarget(next as "local" | "provider")
-                }
-              >
-                <SelectTrigger id="field-target">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="provider">
-                    Connected CRM proposal
-                  </SelectItem>
-                  <SelectItem value="local">Local CRM field</SelectItem>
-                </SelectContent>
-              </Select>
-            </FormField>
-          )}
-          <FormField label="Field name" htmlFor="field-name">
-            <Input
-              id="field-name"
-              value={field}
-              maxLength={120}
-              placeholder={
-                isNative || target === "local"
-                  ? "desiredCadenceDays"
-                  : record.provider === "salesforce"
-                    ? "StageName"
-                    : "lifecyclestage"
-              }
-              onChange={(event) => setField(event.target.value)}
-            />
-          </FormField>
-          <FormField label="Value type" htmlFor="field-type">
-            <Select
-              value={valueType}
-              onValueChange={(next) => setValueType(next as typeof valueType)}
-            >
-              <SelectTrigger id="field-type">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="string">Text</SelectItem>
-                <SelectItem value="number">Number</SelectItem>
-                <SelectItem value="boolean">Boolean</SelectItem>
-              </SelectContent>
-            </Select>
-          </FormField>
-          <FormField label="New value" htmlFor="field-value">
-            {valueType === "boolean" ? (
-              <Select value={value} onValueChange={setValue}>
-                <SelectTrigger id="field-value">
-                  <SelectValue placeholder="Choose a value" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="true">True</SelectItem>
-                  <SelectItem value="false">False</SelectItem>
-                </SelectContent>
-              </Select>
-            ) : (
-              <Input
-                id="field-value"
-                type={valueType === "number" ? "number" : "text"}
-                value={value}
-                maxLength={4_000}
-                onChange={(event) => setValue(event.target.value)}
-              />
-            )}
-          </FormField>
-        </div>
-        <DialogFooter>
-          <Button
-            disabled={
-              !field.trim() || !value || update.isPending || apply.isPending
-            }
-            onClick={() => void submit()}
-          >
-            {isNative
-              ? "Save field"
-              : target === "provider"
-                ? `Prepare ${record.provider === "salesforce" ? "Salesforce" : "HubSpot"} change`
-                : "Update locally"}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-function CreateRecordTaskDialog({ recordId }: { recordId: string }) {
-  const [open, setOpen] = useState(false);
-  const [title, setTitle] = useState("");
-  const [dueAt, setDueAt] = useState("");
-  const create = useActionMutation<
-    unknown,
-    { recordId: string; title: string; dueAt?: string; status: "open" }
-  >("manage-crm-task" as never);
-
-  async function submit() {
-    try {
-      await create.mutateAsync({
-        recordId,
-        title: title.trim(),
-        dueAt: dueAt ? new Date(dueAt).toISOString() : undefined,
-        status: "open",
-      });
-      setOpen(false);
-      setTitle("");
-      setDueAt("");
-      toast.success("Follow-up task created.");
-    } catch (error) {
-      toast.error(
-        error instanceof Error ? error.message : "Task creation failed.",
-      );
-    }
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <Button variant="outline" size="sm" className="gap-1.5">
-          <IconChecklist className="size-4" /> Add task
-        </Button>
-      </DialogTrigger>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle>Add record task</DialogTitle>
-          <DialogDescription>
-            Keep a local follow-up next to this CRM record.
-          </DialogDescription>
-        </DialogHeader>
-        <div className="grid gap-4 py-2">
-          <FormField label="Title" htmlFor="record-task-title">
-            <Input
-              id="record-task-title"
-              value={title}
-              maxLength={300}
-              onChange={(event) => setTitle(event.target.value)}
-            />
-          </FormField>
-          <FormField label="Due" htmlFor="record-task-due">
-            <Input
-              id="record-task-due"
-              type="datetime-local"
-              value={dueAt}
-              onChange={(event) => setDueAt(event.target.value)}
-            />
-          </FormField>
-        </div>
-        <DialogFooter>
-          <Button
-            disabled={!title.trim() || create.isPending}
-            onClick={() => void submit()}
-          >
-            Create task
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-function AttachEvidenceDialog({ recordId }: { recordId: string }) {
-  const t = useT();
-  const [open, setOpen] = useState(false);
-  const [artifactId, setArtifactId] = useState("");
-  const [sourceUrl, setSourceUrl] = useState("");
-  const [quote, setQuote] = useState("");
-  const [summary, setSummary] = useState("");
-  const attach = useActionMutation<
-    unknown,
-    {
-      recordId: string;
-      artifactId: string;
-      sourceUrl: string;
-      sourceApp: "clips";
-      quote?: string;
-      summary?: string;
-    }
-  >("attach-call-evidence" as never);
-
-  async function submit() {
-    try {
-      await attach.mutateAsync({
-        recordId,
-        artifactId: artifactId.trim(),
-        sourceUrl: sourceUrl.trim(),
-        sourceApp: "clips",
-        quote: quote.trim() || undefined,
-        summary: summary.trim() || undefined,
-      });
-      setOpen(false);
-      setArtifactId("");
-      setSourceUrl("");
-      setQuote("");
-      setSummary("");
-      toast.success(t("recordActions.evidenceAttached"));
-    } catch (error) {
-      toast.error(
-        error instanceof Error
-          ? error.message
-          : t("recordActions.evidenceAttachFailed"),
-      );
-    }
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <Button variant="outline" size="sm" className="gap-1.5">
-          <IconFilePlus className="size-4" /> {t("recordActions.addEvidence")}
-        </Button>
-      </DialogTrigger>
-      <DialogContent className="sm:max-w-lg">
-        <DialogHeader>
-          <DialogTitle>{t("recordActions.attachEvidenceTitle")}</DialogTitle>
-          <DialogDescription>
-            {t("recordActions.attachEvidenceDescription")}
-          </DialogDescription>
-        </DialogHeader>
-        <div className="grid gap-4 py-2 sm:grid-cols-2">
-          <FormField
-            label={t("recordActions.artifactId")}
-            htmlFor="evidence-id"
-          >
-            <Input
-              id="evidence-id"
-              value={artifactId}
-              maxLength={256}
-              onChange={(event) => setArtifactId(event.target.value)}
-            />
-          </FormField>
-          <FormField label={t("recordActions.clipsUrl")} htmlFor="evidence-url">
-            <Input
-              id="evidence-url"
-              type="url"
-              value={sourceUrl}
-              maxLength={2_048}
-              onChange={(event) => setSourceUrl(event.target.value)}
-            />
-          </FormField>
-          <FormField
-            label={t("recordActions.summary")}
-            htmlFor="evidence-summary"
-            className="sm:col-span-2"
-          >
-            <Input
-              id="evidence-summary"
-              value={summary}
-              maxLength={2_000}
-              onChange={(event) => setSummary(event.target.value)}
-            />
-          </FormField>
-          <FormField
-            label={t("recordActions.shortExcerpt")}
-            htmlFor="evidence-quote"
-            className="sm:col-span-2"
-          >
-            <Textarea
-              id="evidence-quote"
-              value={quote}
-              maxLength={1_200}
-              onChange={(event) => setQuote(event.target.value)}
-            />
-          </FormField>
-        </div>
-        <DialogFooter>
-          <Button
-            disabled={
-              !artifactId.trim() || !sourceUrl.trim() || attach.isPending
-            }
-            onClick={() => void submit()}
-          >
-            {t("recordActions.attachEvidence")}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-function CallEvidenceAutomationDialog({ record }: { record: CrmRecordDetail }) {
-  const t = useT();
-  const [open, setOpen] = useState(false);
-  const recipeQuery = useActionQuery<{
-    title: string;
-    description: string;
-    enabledByDefault: false;
-    agentContext: string;
-  }>("get-crm-automation-recipe" as never, { recordId: record.id } as never, {
-    enabled: open,
-  });
-  const recipe = recipeQuery.data;
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <Button variant="outline" size="sm" className="gap-1.5">
-          <IconBolt className="size-4" /> {t("recordActions.automate")}
-        </Button>
-      </DialogTrigger>
-      <DialogContent className="sm:max-w-lg">
-        <DialogHeader>
-          <DialogTitle>
-            {recipe?.title ?? t("recordActions.reviewNewClipsCalls")}
-          </DialogTitle>
-          <DialogDescription>
-            {recipe?.description ?? t("recordActions.reviewDescription")}
-          </DialogDescription>
-        </DialogHeader>
-        <div className="space-y-3 text-sm text-muted-foreground">
-          <p>
-            {t("recordActions.disabledAutomationDescription", {
-              name: record.displayName,
-            })}
-          </p>
-          <p>{t("recordActions.handoffDescription", { path: "/r" })}</p>
-        </div>
-        <DialogFooter className="flex-row flex-wrap justify-end gap-2 sm:justify-end">
-          <Button asChild variant="ghost" size="sm" className="gap-1.5">
-            <Link to="/agent#jobs" onClick={() => setOpen(false)}>
-              <IconExternalLink className="size-4" />{" "}
-              {t("recordActions.manageAutomations")}
-            </Link>
-          </Button>
-          <Button
-            size="sm"
-            disabled={!recipe || recipeQuery.isLoading}
-            onClick={() => {
-              if (!recipe) return;
-              sendToAgentChat({
-                message: `Set up the disabled Clips call-evidence review recipe for ${record.displayName}.`,
-                context: recipe.agentContext,
-                submit: true,
-                newTab: true,
-              });
-              setOpen(false);
-            }}
-          >
-            {t("recordActions.configureWithAgent")}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-function FormField({
-  label,
-  htmlFor,
-  className,
-  children,
-}: {
-  label: string;
-  htmlFor: string;
-  className?: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <div className={`grid gap-2 ${className ?? ""}`}>
-      <Label htmlFor={htmlFor}>{label}</Label>
-      {children}
-    </div>
-  );
-}

package/corpus/templates/crm/app/components/crm/RecordGrid.tsx

@@ -1,134 +0,0 @@
-import { Badge } from "@agent-native/toolkit/ui/badge";
-import { Input } from "@agent-native/toolkit/ui/input";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@agent-native/toolkit/ui/table";
-import { IconArrowUpRight, IconSearch } from "@tabler/icons-react";
-import { useEffect, useState } from "react";
-import { Link, useSearchParams } from "react-router";
-
-import { LoadingRows, SetupEmptyState } from "@/components/crm/Surface";
-import type { CrmKind, CrmRecordSummary } from "@/lib/types";
-
-const labels: Record<CrmKind, string> = {
-  account: "Account",
-  person: "Person",
-  opportunity: "Opportunity",
-};
-
-export function RecordGrid({
-  kind,
-  records,
-  isLoading,
-  emptyTitle,
-}: {
-  kind: CrmKind;
-  records: CrmRecordSummary[];
-  isLoading: boolean;
-  emptyTitle: string;
-}) {
-  const [params, setParams] = useSearchParams();
-  const [draftQuery, setDraftQuery] = useState(params.get("q") ?? "");
-  const query = (params.get("q") ?? "").trim().toLowerCase();
-  useEffect(() => {
-    setDraftQuery(params.get("q") ?? "");
-  }, [params]);
-  const filtered = records.filter((record) =>
-    `${record.displayName} ${record.subtitle ?? ""} ${record.owner ?? ""}`
-      .toLowerCase()
-      .includes(query),
-  );
-
-  function updateSearch(value: string) {
-    setDraftQuery(value);
-    const next = new URLSearchParams(params);
-    if (value) next.set("q", value);
-    else next.delete("q");
-    setParams(next, { replace: true });
-  }
-
-  if (isLoading) return <LoadingRows rows={7} />;
-  if (!records.length) return <SetupEmptyState title={emptyTitle} />;
-
-  return (
-    <div className="p-5 sm:p-7">
-      <div className="mb-4 flex max-w-sm items-center gap-2 rounded-md border border-input bg-background px-3 shadow-sm">
-        <IconSearch className="size-4 shrink-0 text-muted-foreground" />
-        <Input
-          value={draftQuery}
-          onChange={(event) => updateSearch(event.target.value)}
-          placeholder={`Search ${labels[kind].toLowerCase()}s`}
-          className="h-9 border-0 bg-transparent px-0 shadow-none focus-visible:ring-0"
-        />
-      </div>
-      <div className="overflow-hidden rounded-lg border border-border/70 bg-card">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>{labels[kind]}</TableHead>
-              <TableHead className="hidden md:table-cell">Owner</TableHead>
-              <TableHead className="hidden lg:table-cell">Cadence</TableHead>
-              <TableHead>Next step</TableHead>
-              <TableHead className="w-8">
-                <span className="sr-only">Open</span>
-              </TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {filtered.map((record) => (
-              <TableRow key={record.id}>
-                <TableCell className="min-w-[220px]">
-                  <Link
-                    to={`/records/${encodeURIComponent(record.id)}`}
-                    className="block rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                  >
-                    <p className="font-medium">{record.displayName}</p>
-                    {record.subtitle ? (
-                      <p className="mt-0.5 text-xs text-muted-foreground">
-                        {record.subtitle}
-                      </p>
-                    ) : null}
-                  </Link>
-                </TableCell>
-                <TableCell className="hidden text-muted-foreground md:table-cell">
-                  {record.owner ?? "—"}
-                </TableCell>
-                <TableCell className="hidden lg:table-cell">
-                  {record.cadence ? (
-                    <Badge variant="secondary" className="font-normal">
-                      {record.cadence}
-                    </Badge>
-                  ) : (
-                    "—"
-                  )}
-                </TableCell>
-                <TableCell className="max-w-[260px] truncate text-muted-foreground">
-                  {record.nextStep ?? record.stage ?? "—"}
-                </TableCell>
-                <TableCell>
-                  <Link
-                    to={`/records/${encodeURIComponent(record.id)}`}
-                    className="inline-flex size-7 items-center justify-center rounded-sm text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                    aria-label={`Open ${record.displayName}`}
-                  >
-                    <IconArrowUpRight className="size-4" />
-                  </Link>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </div>
-      {records.length > 0 && filtered.length === 0 ? (
-        <p className="py-10 text-center text-sm text-muted-foreground">
-          No matching {labels[kind].toLowerCase()}s.
-        </p>
-      ) : null}
-    </div>
-  );
-}