@agent-native/core 0.122.4 → 0.123.1

package/corpus/templates/crm/app/components/crm/settings/ListsSettings.tsx

@@ -0,0 +1,339 @@
+import {
+  useActionMutation,
+  useActionQuery,
+} from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+import {
+  IconAlertTriangle,
+  IconArchive,
+  IconListDetails,
+  IconPlus,
+} from "@tabler/icons-react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import { Link } from "react-router";
+import { toast } from "sonner";
+
+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";
+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";
+import { Textarea } from "@/components/ui/textarea";
+
+interface CrmListRow {
+  id: string;
+  connectionId: string;
+  name: string;
+  apiSlug: string;
+  parentObjectType: string;
+  description: string | null;
+  archived: boolean;
+  entryCount?: number;
+}
+
+interface CrmConnectionSummary {
+  id: string;
+  label: string;
+  objectTypes: string[];
+}
+
+const LISTS_PARAMS = { limit: 100 } as const;
+const LISTS_KEY = ["action", "list-crm-lists", LISTS_PARAMS];
+
+export function ListsSettings() {
+  const t = useT();
+  const queryClient = useQueryClient();
+  const listsQuery = useActionQuery<{ lists: CrmListRow[] }>(
+    "list-crm-lists" as never,
+    LISTS_PARAMS as never,
+  );
+  const connectionsQuery = useActionQuery<{
+    connections: CrmConnectionSummary[];
+  }>("list-crm-connections" as never, {} as never);
+  const archive = useActionMutation<
+    unknown,
+    { listId: string; archived: boolean }
+  >("update-crm-list" as never);
+  const lists = listsQuery.data?.lists ?? [];
+
+  async function archiveList(list: CrmListRow) {
+    void queryClient.cancelQueries({ queryKey: LISTS_KEY });
+    const previous = queryClient.getQueryData<{ lists: CrmListRow[] }>(
+      LISTS_KEY,
+    );
+    queryClient.setQueryData(LISTS_KEY, {
+      ...previous,
+      lists: (previous?.lists ?? []).filter((row) => row.id !== list.id),
+    });
+    try {
+      await archive.mutateAsync({ listId: list.id, archived: true });
+    } catch (error) {
+      queryClient.setQueryData(LISTS_KEY, previous);
+      toast.error(
+        error instanceof Error ? error.message : t("lists.archiveFailed"),
+      );
+    }
+  }
+
+  return (
+    <div className="mx-auto w-full max-w-2xl">
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div className="min-w-0">
+          <h1 className="text-xl font-semibold tracking-tight">
+            {t("lists.title")}
+          </h1>
+          <p className="mt-1 max-w-xl text-sm leading-6 text-muted-foreground">
+            {t("lists.description")}
+          </p>
+        </div>
+        <CreateListDialog
+          connections={connectionsQuery.data?.connections ?? []}
+          onCreated={() =>
+            void queryClient.invalidateQueries({
+              queryKey: ["action", "list-crm-lists"],
+            })
+          }
+        />
+      </div>
+
+      {listsQuery.isError ? (
+        <div className="mt-6 flex items-center gap-3 rounded-lg border border-destructive/40 bg-destructive/5 px-4 py-3">
+          <IconAlertTriangle className="size-4 shrink-0 text-destructive" />
+          <p className="flex-1 text-sm">
+            {listsQuery.error instanceof Error
+              ? listsQuery.error.message
+              : t("lists.loadFailed")}
+          </p>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => void listsQuery.refetch()}
+          >
+            {t("lists.retry")}
+          </Button>
+        </div>
+      ) : lists.length ? (
+        <div className="mt-6 divide-y divide-border/70 rounded-lg border border-border/70 bg-card">
+          {lists.map((list) => (
+            <section
+              key={list.id}
+              className="flex flex-wrap items-center gap-4 px-4 py-3.5"
+            >
+              <IconListDetails className="size-4 shrink-0 text-muted-foreground" />
+              <div className="min-w-0 flex-1">
+                <div className="flex flex-wrap items-center gap-2">
+                  <Link
+                    to={`/lists/${encodeURIComponent(list.id)}`}
+                    className="truncate text-sm font-medium hover:underline"
+                  >
+                    {list.name}
+                  </Link>
+                  <Badge variant="outline" className="font-normal">
+                    {list.parentObjectType}
+                  </Badge>
+                </div>
+                <p className="mt-1 text-xs text-muted-foreground">
+                  {t("lists.entryCount", { entries: list.entryCount ?? 0 })}
+                  {" · "}
+                  <code>{list.apiSlug}</code>
+                </p>
+              </div>
+              <AlertDialog>
+                <AlertDialogTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    aria-label={t("lists.archiveAria", { name: list.name })}
+                  >
+                    <IconArchive className="size-4" />
+                  </Button>
+                </AlertDialogTrigger>
+                <AlertDialogContent>
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>
+                      {t("lists.archiveTitle", { name: list.name })}
+                    </AlertDialogTitle>
+                    <AlertDialogDescription>
+                      {t("lists.archiveDescription")}
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel>{t("lists.cancel")}</AlertDialogCancel>
+                    <AlertDialogAction onClick={() => void archiveList(list)}>
+                      {t("lists.archive")}
+                    </AlertDialogAction>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
+            </section>
+          ))}
+        </div>
+      ) : (
+        <div className="mt-6 rounded-lg border border-dashed border-border px-4 py-10 text-center">
+          <p className="text-sm font-medium">
+            {listsQuery.isLoading ? t("lists.loading") : t("lists.emptyTitle")}
+          </p>
+          <p className="mt-1 text-sm text-muted-foreground">
+            {t("lists.emptyDescription")}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function CreateListDialog({
+  connections,
+  onCreated,
+}: {
+  connections: CrmConnectionSummary[];
+  onCreated: () => void;
+}) {
+  const t = useT();
+  const [open, setOpen] = useState(false);
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [parentObjectType, setParentObjectType] = useState("");
+  const create = useActionMutation<
+    unknown,
+    {
+      name: string;
+      parentObjectType: string;
+      description?: string;
+      connectionId?: string;
+    }
+  >("create-crm-list" as never);
+
+  const objectTypes = connections.flatMap((connection) =>
+    connection.objectTypes.map((objectType) => ({
+      connectionId: connection.id,
+      objectType,
+      label: `${connection.label} · ${objectType}`,
+      key: `${connection.id}:${objectType}`,
+    })),
+  );
+  const selected = objectTypes.find((entry) => entry.key === parentObjectType);
+
+  function openChange(next: boolean) {
+    if (!next) {
+      setName("");
+      setDescription("");
+      setParentObjectType("");
+    }
+    setOpen(next);
+  }
+
+  async function submit() {
+    if (!selected) return;
+    try {
+      await create.mutateAsync({
+        name: name.trim(),
+        parentObjectType: selected.objectType,
+        connectionId: selected.connectionId,
+        ...(description.trim() ? { description: description.trim() } : {}),
+      });
+      openChange(false);
+      onCreated();
+      toast.success(t("lists.created"));
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : t("lists.createFailed"),
+      );
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={openChange}>
+      <DialogTrigger asChild>
+        <Button size="sm" className="gap-1.5">
+          <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="new-list-name">{t("lists.name")}</Label>
+            <Input
+              id="new-list-name"
+              value={name}
+              maxLength={120}
+              onChange={(event) => setName(event.target.value)}
+            />
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="new-list-object">{t("lists.parentObject")}</Label>
+            <Select
+              value={parentObjectType}
+              onValueChange={setParentObjectType}
+              disabled={!objectTypes.length}
+            >
+              <SelectTrigger id="new-list-object">
+                <SelectValue placeholder={t("lists.parentObjectPlaceholder")} />
+              </SelectTrigger>
+              <SelectContent>
+                {objectTypes.map((entry) => (
+                  <SelectItem key={entry.key} value={entry.key}>
+                    {entry.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="new-list-description">
+              {t("lists.listDescription")}
+            </Label>
+            <Textarea
+              id="new-list-description"
+              value={description}
+              maxLength={500}
+              onChange={(event) => setDescription(event.target.value)}
+            />
+          </div>
+          <p className="text-xs leading-5 text-muted-foreground">
+            {t("lists.stageSeedNote")}
+          </p>
+        </div>
+        <DialogFooter>
+          <Button
+            disabled={!name.trim() || !selected || create.isPending}
+            onClick={() => void submit()}
+          >
+            {t("lists.create")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/corpus/templates/crm/app/components/crm/settings/settings-admin.ts

@@ -0,0 +1,377 @@
+/**
+ * Decision logic behind the CRM settings surfaces.
+ *
+ * It lives outside the components because `vitest.config.ts` collects
+ * `**\/*.test.ts` in a node environment: a `.tsx` component cannot be reached
+ * from a test at all, so anything worth proving has to be a plain module.
+ *
+ * Type behaviour is read from `ATTRIBUTE_TYPE_SPECS`, never re-derived here.
+ */
+
+import {
+  ATTRIBUTE_TYPE_SPECS,
+  CRM_ATTRIBUTE_TYPES,
+  type CrmAttributeType,
+} from "../../../../shared/crm-attributes";
+import {
+  CRM_CONNECTION_MODES,
+  type CrmAttributeAuthority,
+  type CrmAttributeDefinition,
+  type CrmAttributeOption,
+  type CrmConnectionMode,
+} from "../../../../shared/crm-contract";
+
+// ---------------------------------------------------------------------------
+// Attribute types
+// ---------------------------------------------------------------------------
+
+/** Types a person may author. `interaction` and `personal-name` are system-only. */
+export const AUTHORED_ATTRIBUTE_TYPES: readonly CrmAttributeType[] =
+  CRM_ATTRIBUTE_TYPES.filter((type) => !ATTRIBUTE_TYPE_SPECS[type].systemOnly);
+
+export interface AttributeTypeCapabilities {
+  supportsMulti: boolean;
+  usesOptions: boolean;
+  /** `targetDays` and `celebrate` describe a pipeline stage: status only. */
+  showsStageFields: boolean;
+}
+
+export function attributeTypeCapabilities(
+  type: CrmAttributeType,
+): AttributeTypeCapabilities {
+  const spec = ATTRIBUTE_TYPE_SPECS[type];
+  return {
+    supportsMulti: spec.supportsMulti,
+    usesOptions: spec.usesOptions,
+    showsStageFields: type === "status",
+  };
+}
+
+/**
+ * `api_slug` keys every stored value row and the type chose the column those
+ * values live in, so `update-crm-attribute` rejects a change to either.
+ * Rendering them as editable would offer a control the server always refuses.
+ */
+export const IMMUTABLE_ATTRIBUTE_FIELDS = ["apiSlug", "attributeType"] as const;
+
+export type ImmutableAttributeField =
+  (typeof IMMUTABLE_ATTRIBUTE_FIELDS)[number];
+
+export function isImmutableAttributeField(
+  field: string,
+): field is ImmutableAttributeField {
+  return (IMMUTABLE_ATTRIBUTE_FIELDS as readonly string[]).includes(field);
+}
+
+// ---------------------------------------------------------------------------
+// Authority
+// ---------------------------------------------------------------------------
+
+export interface AttributeAuthorityInfo {
+  labelKey: string;
+  descriptionKey: string;
+  /** A local edit cannot be written upstream; it is recorded as a proposal. */
+  editsBecomeProposals: boolean;
+  badge: "default" | "secondary" | "outline";
+}
+
+export const ATTRIBUTE_AUTHORITY_INFO: Record<
+  CrmAttributeAuthority,
+  AttributeAuthorityInfo
+> = {
+  provider: {
+    labelKey: "fields.authorityProvider",
+    descriptionKey: "fields.authorityProviderHelp",
+    editsBecomeProposals: true,
+    badge: "secondary",
+  },
+  "derived-local": {
+    labelKey: "fields.authorityDerived",
+    descriptionKey: "fields.authorityDerivedHelp",
+    editsBecomeProposals: false,
+    badge: "outline",
+  },
+  "local-authoritative": {
+    labelKey: "fields.authorityLocal",
+    descriptionKey: "fields.authorityLocalHelp",
+    editsBecomeProposals: false,
+    badge: "default",
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Drafts and action payloads
+// ---------------------------------------------------------------------------
+
+export interface AttributeOptionDraft {
+  value: string;
+  title: string;
+  color: string | null;
+  targetDays: number | null;
+  celebrate: boolean;
+}
+
+export interface AttributeDraft {
+  title: string;
+  type: CrmAttributeType;
+  description: string;
+  multi: boolean;
+  required: boolean;
+  uniqueValue: boolean;
+  historyTracked: boolean;
+  options: AttributeOptionDraft[];
+}
+
+export function emptyAttributeDraft(): AttributeDraft {
+  return {
+    title: "",
+    type: "text",
+    description: "",
+    multi: false,
+    required: false,
+    uniqueValue: false,
+    historyTracked: true,
+    options: [],
+  };
+}
+
+export function emptyAttributeOptionDraft(): AttributeOptionDraft {
+  return {
+    value: "",
+    title: "",
+    color: null,
+    targetDays: null,
+    celebrate: false,
+  };
+}
+
+export interface CrmAttributeTarget {
+  target: "object" | "list";
+  targetId: string;
+  connectionId?: string;
+}
+
+export interface CreateAttributeInput extends CrmAttributeTarget {
+  title: string;
+  type: CrmAttributeType;
+  multi: boolean;
+  required: boolean;
+  uniqueValue: boolean;
+  historyTracked: boolean;
+  description?: string;
+  options?: Array<{
+    value: string;
+    title: string;
+    color?: string;
+    targetDays?: number | null;
+    celebrate?: boolean;
+  }>;
+}
+
+/**
+ * The exact payload `create-crm-attribute` accepts for a draft. Options and
+ * stage fields are dropped for types that do not take them: the action rejects
+ * both with a 422, and the picker that produced the draft may have been showing
+ * them before the type changed.
+ */
+export function buildCreateAttributeInput(
+  draft: AttributeDraft,
+  target: CrmAttributeTarget,
+): CreateAttributeInput {
+  const capabilities = attributeTypeCapabilities(draft.type);
+  const description = draft.description.trim();
+  const options = capabilities.usesOptions
+    ? draft.options
+        .filter((option) => option.value.trim())
+        .map((option) => ({
+          value: option.value.trim(),
+          title: option.title.trim() || option.value.trim(),
+          ...(option.color ? { color: option.color } : {}),
+          ...(capabilities.showsStageFields
+            ? { targetDays: option.targetDays, celebrate: option.celebrate }
+            : {}),
+        }))
+    : [];
+
+  return {
+    target: target.target,
+    targetId: target.targetId,
+    ...(target.connectionId ? { connectionId: target.connectionId } : {}),
+    title: draft.title.trim(),
+    type: draft.type,
+    multi: capabilities.supportsMulti && draft.multi,
+    required: draft.required,
+    uniqueValue: draft.uniqueValue,
+    historyTracked: draft.historyTracked,
+    ...(description ? { description } : {}),
+    ...(options.length ? { options } : {}),
+  };
+}
+
+export interface AttributeEditDraft {
+  title: string;
+  description: string;
+  required: boolean;
+  historyTracked: boolean;
+}
+
+export interface UpdateAttributeInput {
+  attributeId: string;
+  title?: string;
+  description?: string | null;
+  required?: boolean;
+  historyTracked?: boolean;
+}
+
+export function attributeEditDraft(
+  attribute: CrmAttributeDefinition,
+): AttributeEditDraft {
+  return {
+    title: attribute.label,
+    description: attribute.description ?? "",
+    required: attribute.required,
+    historyTracked: attribute.historyTracked,
+  };
+}
+
+/**
+ * Only the fields that actually changed, and never `apiSlug` or `type`: the
+ * action accepts those two solely to reject them with an explanation.
+ */
+export function buildUpdateAttributeInput(
+  attribute: CrmAttributeDefinition,
+  draft: AttributeEditDraft,
+): UpdateAttributeInput {
+  const title = draft.title.trim();
+  const description = draft.description.trim();
+  const current = attributeEditDraft(attribute);
+  return {
+    attributeId: attribute.id,
+    ...(title && title !== current.title ? { title } : {}),
+    ...(description === current.description.trim()
+      ? {}
+      : { description: description || null }),
+    ...(draft.required === current.required
+      ? {}
+      : { required: draft.required }),
+    ...(draft.historyTracked === current.historyTracked
+      ? {}
+      : { historyTracked: draft.historyTracked }),
+  };
+}
+
+export function hasAttributeEdits(input: UpdateAttributeInput): boolean {
+  return Object.keys(input).length > 1;
+}
+
+// ---------------------------------------------------------------------------
+// Optimistic cache patching
+// ---------------------------------------------------------------------------
+
+export interface CrmAttributeListResult {
+  target: "object" | "list";
+  targetId: string;
+  attributes: CrmAttributeDefinition[];
+}
+
+export function applyAttributePatch(
+  result: CrmAttributeListResult | undefined,
+  attributeId: string,
+  patch: Partial<CrmAttributeDefinition>,
+): CrmAttributeListResult | undefined {
+  if (!result) return result;
+  return {
+    ...result,
+    attributes: result.attributes.map((attribute) =>
+      attribute.id === attributeId ? { ...attribute, ...patch } : attribute,
+    ),
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Option ordering
+// ---------------------------------------------------------------------------
+
+/** A copy with `from` moved to `to`. Out-of-range indices leave the order alone. */
+export function moveItem<T>(
+  items: readonly T[],
+  from: number,
+  to: number,
+): T[] {
+  const next = [...items];
+  if (
+    from < 0 ||
+    to < 0 ||
+    from >= next.length ||
+    to >= next.length ||
+    from === to
+  ) {
+    return next;
+  }
+  const [moved] = next.splice(from, 1);
+  next.splice(to, 0, moved as T);
+  return next;
+}
+
+/** The `optionIds` payload `manage-crm-attribute-option` reorder expects. */
+export function reorderedOptionIds(
+  options: readonly CrmAttributeOption[],
+  from: number,
+  to: number,
+): string[] {
+  return moveItem(options, from, to).map((option) => option.id);
+}
+
+// ---------------------------------------------------------------------------
+// Connection modes
+// ---------------------------------------------------------------------------
+
+export interface CrmConnectionModeInfo {
+  mode: CrmConnectionMode;
+  labelKey: string;
+  descriptionKey: string;
+  /** Deprecated modes still render for existing rows; they are never offered. */
+  deprecated: boolean;
+}
+
+export const CRM_CONNECTION_MODE_INFO: Record<
+  CrmConnectionMode,
+  CrmConnectionModeInfo
+> = {
+  native: {
+    mode: "native",
+    labelKey: "connection.modeNative",
+    descriptionKey: "connection.modeNativeHelp",
+    deprecated: false,
+  },
+  connected: {
+    mode: "connected",
+    labelKey: "connection.modeConnected",
+    descriptionKey: "connection.modeConnectedHelp",
+    deprecated: false,
+  },
+  hybrid: {
+    mode: "hybrid",
+    labelKey: "connection.modeHybrid",
+    descriptionKey: "connection.modeHybridHelp",
+    deprecated: true,
+  },
+};
+
+/**
+ * The only set a mode picker may offer. `hybrid` is derived out rather than
+ * hand-omitted so it cannot reappear by someone extending a literal list.
+ */
+export const SELECTABLE_CRM_CONNECTION_MODES: readonly CrmConnectionMode[] =
+  CRM_CONNECTION_MODES.filter(
+    (mode) => !CRM_CONNECTION_MODE_INFO[mode].deprecated,
+  );
+
+/**
+ * Null for a mode this build does not know. The caller must render that as
+ * unrecognized — falling back to a default would print a confident wrong label
+ * for a row whose real mode nobody can read.
+ */
+export function connectionModeInfo(mode: string): CrmConnectionModeInfo | null {
+  return CRM_CONNECTION_MODE_INFO[mode as CrmConnectionMode] ?? null;
+}