@agent-native/core 0.123.0 → 0.123.2

package/corpus/templates/crm/app/components/crm/record/RecordLists.tsx

@@ -0,0 +1,235 @@
+/**
+ * List memberships for one record.
+ *
+ * A record may hold more than one entry in the same list — two open renewals on
+ * one account — so every entry is its own card. Collapsing them into a
+ * membership flag would silently drop the second pipeline.
+ */
+
+import {
+  useActionMutation,
+  useActionQuery,
+} from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+import { IconPlus } from "@tabler/icons-react";
+import { useState } from "react";
+import { Link } from "react-router";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+import type { CrmValue } from "../../../../shared/crm-contract";
+import { FieldEditor } from "./field-editors";
+import { FieldHistoryButton } from "./FieldHistory";
+import {
+  entryAttributeAsEditable,
+  type CrmRecordPage,
+  type CrmRecordPageList,
+  type CrmRecordPageListAttribute,
+} from "./record-data";
+
+interface ListsResponse {
+  lists?: Array<{
+    id: string;
+    name: string;
+    parentObjectType: string;
+    archived?: boolean;
+  }>;
+}
+
+export function RecordLists({
+  page,
+  onEntryCommit,
+}: {
+  page: CrmRecordPage;
+  onEntryCommit: (
+    entryId: string,
+    attribute: CrmRecordPageListAttribute,
+    value: CrmValue,
+  ) => void;
+}) {
+  const t = useT();
+  return (
+    <section className="grid gap-3" aria-labelledby="crm-record-lists">
+      <div className="flex items-center justify-between gap-2">
+        <h2
+          id="crm-record-lists"
+          className="text-xs font-medium uppercase tracking-[0.12em] text-muted-foreground"
+        >
+          {t("record.lists")}
+        </h2>
+        <AddToListControl page={page} />
+      </div>
+      {page.lists.length ? (
+        page.lists.map((list) => (
+          <ListCard
+            key={list.id}
+            recordId={page.record.id}
+            list={list}
+            onEntryCommit={onEntryCommit}
+          />
+        ))
+      ) : (
+        <p className="text-sm text-muted-foreground">
+          {t("record.listsEmpty")}
+        </p>
+      )}
+      {page.listMembershipsTruncated ? (
+        <p className="text-xs text-muted-foreground">
+          {t("record.listsTruncated")}
+        </p>
+      ) : null}
+    </section>
+  );
+}
+
+function ListCard({
+  recordId,
+  list,
+  onEntryCommit,
+}: {
+  recordId: string;
+  list: CrmRecordPageList;
+  onEntryCommit: (
+    entryId: string,
+    attribute: CrmRecordPageListAttribute,
+    value: CrmValue,
+  ) => void;
+}) {
+  const t = useT();
+  return (
+    <div className="rounded-lg border border-border/70 bg-card">
+      <div className="flex items-center justify-between gap-2 border-b border-border/70 px-3 py-2">
+        <Link
+          to={`/lists/${encodeURIComponent(list.id)}`}
+          className="truncate text-sm font-medium hover:underline"
+        >
+          {list.name}
+        </Link>
+        <span className="shrink-0 text-xs text-muted-foreground">
+          {t("record.entryCount", { count: list.entries.length })}
+        </span>
+      </div>
+      <div className="divide-y divide-border/70">
+        {list.entries.map((entry, index) => (
+          <div key={entry.id} className="grid gap-1.5 px-3 py-2.5">
+            {list.entries.length > 1 ? (
+              <p className="text-[11px] uppercase tracking-[0.1em] text-muted-foreground">
+                {t("record.entryOrdinal", { index: index + 1 })}
+              </p>
+            ) : null}
+            {list.attributes.length ? (
+              list.attributes.map((attribute) => (
+                <div
+                  key={attribute.id}
+                  className="group grid grid-cols-[minmax(5rem,0.7fr)_minmax(0,1.3fr)] items-center gap-2"
+                >
+                  <div className="flex min-w-0 items-start gap-1">
+                    {/* An entry attribute is the list's own workflow value, not
+                        the record's — an opportunity's `Stage` and a pipeline's
+                        `Stage` are different fields, and moving one does not
+                        move the other. This label still reads identically to
+                        the object attribute in the left panel; qualifying it
+                        needs a new i18n key, which is reported rather than
+                        added here. */}
+                    <span className="min-w-0 text-xs text-muted-foreground">
+                      {attribute.label}
+                    </span>
+                    <FieldHistoryButton
+                      recordId={recordId}
+                      entryId={entry.id}
+                      attribute={entryAttributeAsEditable(attribute)}
+                    />
+                  </div>
+                  <FieldEditor
+                    attribute={entryAttributeAsEditable(attribute)}
+                    value={entry.values[attribute.apiSlug]}
+                    onCommit={(value) =>
+                      onEntryCommit(entry.id, attribute, value)
+                    }
+                  />
+                </div>
+              ))
+            ) : (
+              <p className="text-xs text-muted-foreground">
+                {t("record.listNoAttributes")}
+              </p>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function AddToListControl({ page }: { page: CrmRecordPage }) {
+  const t = useT();
+  const [selected, setSelected] = useState<string>("");
+  const listsQuery = useActionQuery<ListsResponse>(
+    "list-crm-lists" as never,
+    { limit: 100 } as never,
+  );
+  const add = useActionMutation<
+    { entryId: string },
+    { listId: string; recordId: string }
+  >("add-crm-record-to-list" as never);
+
+  const candidates = (listsQuery.data?.lists ?? []).filter(
+    (list) =>
+      !list.archived && list.parentObjectType === page.record.objectType,
+  );
+
+  if (listsQuery.error)
+    return (
+      <span className="text-xs text-destructive">
+        {t("record.listsLoadFailed")}
+      </span>
+    );
+  if (!candidates.length) return null;
+
+  async function submit(listId: string) {
+    setSelected("");
+    try {
+      await add.mutateAsync({ listId, recordId: page.record.id });
+      toast.success(t("record.addedToList"));
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : t("record.addToListFailed"),
+      );
+    }
+  }
+
+  return (
+    <div className="flex items-center gap-1.5">
+      <Select
+        value={selected}
+        onValueChange={(value) => {
+          setSelected(value);
+          void submit(value);
+        }}
+      >
+        <SelectTrigger
+          className="h-7 w-auto gap-1 border-none px-2 text-xs shadow-none"
+          aria-label={t("record.addToList")}
+        >
+          <IconPlus className="size-3.5" />
+          <SelectValue placeholder={t("record.addToList")} />
+        </SelectTrigger>
+        <SelectContent>
+          {candidates.map((list) => (
+            <SelectItem key={list.id} value={list.id}>
+              {list.name}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}

package/corpus/templates/crm/app/components/crm/record/RecordTabs.tsx

@@ -0,0 +1,206 @@
+/**
+ * The centre pane: Activity, Notes, Tasks, Related.
+ *
+ * Two of these are deliberately honest about not existing yet rather than
+ * dressed up with a plausible-looking feed:
+ *  - Activity reads `crm_interactions`, which nothing in this app writes today.
+ *  - Notes has no table at all; inventing one here would be a schema change.
+ */
+
+import { useT } from "@agent-native/core/client/i18n";
+import {
+  IconChecklist,
+  IconHistory,
+  IconLink,
+  IconNotes,
+} from "@tabler/icons-react";
+import { Link } from "react-router";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import type { CrmRecordDetail } from "@/lib/types";
+import { normalizeTasks } from "@/lib/types";
+
+import { resolveActivityState, type RecordTab } from "./record-data";
+
+export function RecordTabs({
+  record,
+  tab,
+  onTabChange,
+  onCompleteTask,
+  isCompletingTask,
+}: {
+  record: CrmRecordDetail;
+  tab: RecordTab;
+  onTabChange: (tab: RecordTab) => void;
+  onCompleteTask: (taskId: string) => void;
+  isCompletingTask: boolean;
+}) {
+  const t = useT();
+  const tasks = normalizeTasks(record.tasks);
+  const activity = resolveActivityState(record.activity);
+
+  return (
+    <Tabs
+      value={tab}
+      onValueChange={(next) => onTabChange(next as RecordTab)}
+      className="flex min-h-full flex-col p-5 sm:p-6"
+    >
+      <TabsList className="h-9 self-start bg-muted/70">
+        <TabsTrigger value="activity" className="gap-1.5">
+          <IconHistory className="size-3.5" />
+          {t("record.tabActivity")}
+        </TabsTrigger>
+        <TabsTrigger value="notes" className="gap-1.5">
+          <IconNotes className="size-3.5" />
+          {t("record.tabNotes")}
+        </TabsTrigger>
+        <TabsTrigger value="tasks" className="gap-1.5">
+          <IconChecklist className="size-3.5" />
+          {t("record.tabTasks")}
+        </TabsTrigger>
+        <TabsTrigger value="related" className="gap-1.5">
+          <IconLink className="size-3.5" />
+          {t("record.tabRelated")}
+        </TabsTrigger>
+      </TabsList>
+
+      <TabsContent value="activity" className="mt-4 max-w-2xl">
+        {activity.kind === "not-ingested" ? (
+          <ComingSoon
+            title={t("record.activityNotIngestedTitle")}
+            description={t("record.activityNotIngestedDescription")}
+          />
+        ) : (
+          <div className="divide-y divide-border rounded-lg border border-border/70 bg-card">
+            {activity.items.map((item) => (
+              <div key={item.id} className="px-4 py-3">
+                <p className="text-sm font-medium">{item.title}</p>
+                {item.summary ? (
+                  <p className="mt-1 text-sm text-muted-foreground">
+                    {item.summary}
+                  </p>
+                ) : null}
+                <p className="mt-2 text-xs text-muted-foreground">
+                  {[
+                    item.actor,
+                    item.occurredAt ? formatDate(item.occurredAt) : undefined,
+                  ]
+                    .filter(Boolean)
+                    .join(" · ")}
+                </p>
+              </div>
+            ))}
+          </div>
+        )}
+      </TabsContent>
+
+      <TabsContent value="notes" className="mt-4 max-w-2xl">
+        <ComingSoon
+          title={t("record.notesComingSoonTitle")}
+          description={t("record.notesComingSoonDescription")}
+        />
+      </TabsContent>
+
+      <TabsContent value="tasks" className="mt-4 max-w-2xl">
+        <div className="divide-y divide-border rounded-lg border border-border/70 bg-card">
+          {tasks.length ? (
+            tasks.map((task) => (
+              <div key={task.id} className="flex items-center gap-3 px-4 py-3">
+                <div className="min-w-0 flex-1">
+                  <p className="text-sm font-medium">{task.title}</p>
+                  <p className="mt-0.5 text-xs text-muted-foreground">
+                    {task.dueAt
+                      ? t("record.taskDue", { when: formatDate(task.dueAt) })
+                      : task.status}
+                  </p>
+                </div>
+                {task.status === "done" ? (
+                  <Badge variant="secondary">{t("record.taskDone")}</Badge>
+                ) : (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="cursor-pointer"
+                    disabled={isCompletingTask}
+                    onClick={() => onCompleteTask(task.id)}
+                  >
+                    {t("record.completeTask")}
+                  </Button>
+                )}
+              </div>
+            ))
+          ) : (
+            <p className="px-4 py-8 text-center text-sm text-muted-foreground">
+              {t("record.tasksEmpty")}
+            </p>
+          )}
+        </div>
+      </TabsContent>
+
+      <TabsContent value="related" className="mt-4 max-w-2xl">
+        <div className="divide-y divide-border rounded-lg border border-border/70 bg-card">
+          {record.relatedRecords?.length ? (
+            record.relatedRecords.map((related) => (
+              <Link
+                key={`${related.id}:${related.relationshipType}`}
+                to={`/records/${encodeURIComponent(related.id)}`}
+                className="flex items-center gap-3 px-4 py-3 hover:bg-muted/50"
+              >
+                <div className="min-w-0 flex-1">
+                  <p className="truncate text-sm font-medium">
+                    {related.displayName}
+                  </p>
+                  <p className="mt-0.5 truncate text-xs text-muted-foreground">
+                    {[
+                      related.relationshipLabel ?? related.relationshipType,
+                      related.subtitle,
+                    ]
+                      .filter(Boolean)
+                      .join(" · ")}
+                  </p>
+                </div>
+                <Badge variant="secondary" className="font-normal capitalize">
+                  {related.kind}
+                </Badge>
+              </Link>
+            ))
+          ) : (
+            <p className="px-4 py-8 text-center text-sm text-muted-foreground">
+              {t("record.relatedEmpty")}
+            </p>
+          )}
+        </div>
+      </TabsContent>
+    </Tabs>
+  );
+}
+
+function ComingSoon({
+  title,
+  description,
+}: {
+  title: string;
+  description: string;
+}) {
+  return (
+    <div className="rounded-lg border border-dashed border-border/70 bg-card px-5 py-8 text-center">
+      <p className="text-sm font-medium">{title}</p>
+      <p className="mx-auto mt-1.5 max-w-md text-sm leading-6 text-muted-foreground">
+        {description}
+      </p>
+    </div>
+  );
+}
+
+function formatDate(value: string) {
+  const date = new Date(value);
+  return Number.isNaN(date.valueOf())
+    ? value
+    : date.toLocaleDateString(undefined, {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+      });
+}

package/corpus/templates/crm/app/components/crm/record/field-editors.tsx

@@ -0,0 +1,245 @@
+/**
+ * The record panel's display and inline editors.
+ *
+ * What a value says, which option it resolves to, and how typed input parses
+ * back all come from `../shared/attribute-value`, the one registry the
+ * spreadsheet grid reads too. This file owns only the panel's own affordances:
+ * a labelled full-width row, a shadcn `Select` instead of the grid's popover,
+ * and commit-on-blur instead of the grid's commit-and-advance.
+ */
+
+import { useT } from "@agent-native/core/client/i18n";
+import { IconAlertTriangle } from "@tabler/icons-react";
+import { useEffect, useRef, useState } from "react";
+
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+
+import type {
+  CrmAttributeDefinition,
+  CrmValue,
+} from "../../../../shared/crm-contract";
+import {
+  activeOptions,
+  editorDraftFor,
+  valueSpecFor,
+} from "../shared/attribute-value";
+import {
+  AttributeOptionChip,
+  AttributeRating,
+} from "../shared/AttributeValueParts";
+import {
+  fieldInputValue,
+  formatFieldValue,
+  parseFieldInput,
+  type FieldLockReason,
+} from "./record-data";
+
+/** Sentinel for "clear this option" — shadcn `SelectItem` rejects an empty value. */
+const CLEAR_OPTION = "__crm_clear__";
+
+type EditableAttribute = Pick<
+  CrmAttributeDefinition,
+  | "apiSlug"
+  | "attributeType"
+  | "multi"
+  | "options"
+  | "config"
+  | "archived"
+  | "storagePolicy"
+  | "updateable"
+  | "required"
+>;
+
+export function FieldValueDisplay({
+  attribute,
+  value,
+}: {
+  attribute: EditableAttribute;
+  value: CrmValue | undefined;
+}) {
+  const t = useT();
+  const display = formatFieldValue(attribute, value);
+  if (display.kind === "empty")
+    return (
+      <span className="text-muted-foreground">{t("record.fieldEmpty")}</span>
+    );
+  if (attribute.attributeType === "rating")
+    return <AttributeRating value={value ?? null} />;
+  if (display.kind === "boolean")
+    return <span>{display.value ? t("record.yes") : t("record.no")}</span>;
+  if (display.kind === "tokens")
+    return (
+      <span className="flex flex-wrap gap-1">
+        {display.tokens.map((token, index) => (
+          <AttributeOptionChip key={`${token.label}:${index}`} token={token} />
+        ))}
+      </span>
+    );
+  if (display.kind === "structured")
+    return (
+      <code className="break-all text-xs text-muted-foreground">
+        {display.text}
+      </code>
+    );
+  return <span className="break-words">{display.text}</span>;
+}
+
+const LOCK_KEYS: Record<FieldLockReason, string> = {
+  archived: "record.lockArchived",
+  "read-only": "record.lockReadOnly",
+  redacted: "record.lockRedacted",
+  "provider-owned": "record.lockProviderOwned",
+  derived: "record.lockDerived",
+  "unsupported-type": "record.lockUnsupportedType",
+};
+
+export function FieldLockNote({ reason }: { reason: FieldLockReason }) {
+  const t = useT();
+  return (
+    <span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
+      <IconAlertTriangle className="size-3.5" />
+      {t(LOCK_KEYS[reason])}
+    </span>
+  );
+}
+
+/**
+ * One editable value. Options and checkboxes commit on change; free text
+ * commits on blur or Enter and reverts on Escape. `onCommit` is expected to be
+ * optimistic — nothing here blocks on the write.
+ */
+export function FieldEditor({
+  attribute,
+  value,
+  onCommit,
+  autoFocus = false,
+  onDone,
+}: {
+  attribute: EditableAttribute;
+  value: CrmValue | undefined;
+  onCommit: (next: CrmValue) => void;
+  autoFocus?: boolean;
+  onDone?: () => void;
+}) {
+  const t = useT();
+  const seed = fieldInputValue(attribute, value);
+  const [state, setState] = useState(() => editorDraftFor(undefined, seed));
+  const [error, setError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Re-seeded during render, not from an effect: an effect re-seed lands after
+  // the browser has already applied the keystroke it is about to overwrite.
+  const current = editorDraftFor(state, seed);
+  if (current !== state) setState(current);
+  const draft = current.draft;
+
+  useEffect(() => {
+    if (!autoFocus) return;
+    const input = inputRef.current;
+    if (!input) return;
+    input.focus();
+    // Select, not just focus — the grid does the same. A bare focus leaves the
+    // caret inside the existing text, so the first thing typed is inserted into
+    // the old value rather than replacing it.
+    input.select();
+  }, [autoFocus]);
+
+  function commit(raw: string | boolean) {
+    const parsed = parseFieldInput(attribute, raw);
+    if (!parsed.ok) {
+      setError(
+        parsed.code === "not-a-number"
+          ? t("record.invalidNumber")
+          : parsed.code === "not-a-date"
+            ? t("record.invalidDate")
+            : parsed.code === "unknown-option"
+              ? t("record.unknownOption")
+              : t("record.notEditable"),
+      );
+      return;
+    }
+    setError(null);
+    onCommit(parsed.value);
+    onDone?.();
+  }
+
+  const spec = valueSpecFor(attribute);
+
+  if (spec.control === "checkbox") {
+    return (
+      <Switch
+        checked={value === true}
+        aria-label={attribute.apiSlug}
+        onCheckedChange={(next) => commit(next)}
+      />
+    );
+  }
+
+  const options = activeOptions(attribute);
+  if (!attribute.multi && spec.control === "options") {
+    return (
+      <Select
+        value={typeof value === "string" && value ? value : undefined}
+        onValueChange={(next) => commit(next === CLEAR_OPTION ? "" : next)}
+      >
+        <SelectTrigger className="h-8" aria-label={attribute.apiSlug}>
+          <SelectValue placeholder={t("record.fieldEmpty")} />
+        </SelectTrigger>
+        <SelectContent>
+          {attribute.required ? null : (
+            <SelectItem value={CLEAR_OPTION}>
+              {t("record.clearValue")}
+            </SelectItem>
+          )}
+          {options.map((option) => (
+            <SelectItem key={option.id} value={option.value}>
+              {option.title}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    );
+  }
+
+  // A multi value is a comma-separated list, which no typed input accepts.
+  const inputType = attribute.multi ? "text" : spec.inputType;
+
+  return (
+    <div className="grid gap-1">
+      <Input
+        ref={inputRef}
+        className="h-8"
+        type={inputType}
+        value={draft}
+        aria-label={attribute.apiSlug}
+        placeholder={attribute.multi ? t("record.multiValueHint") : undefined}
+        maxLength={4_000}
+        onChange={(event) =>
+          setState({ ...current, draft: event.target.value })
+        }
+        onBlur={() => commit(draft)}
+        onKeyDown={(event) => {
+          if (event.key === "Enter") {
+            event.preventDefault();
+            commit(draft);
+          }
+          if (event.key === "Escape") {
+            event.preventDefault();
+            setState(editorDraftFor(undefined, seed));
+            setError(null);
+            onDone?.();
+          }
+        }}
+      />
+      {error ? <p className="text-xs text-destructive">{error}</p> : null}
+    </div>
+  );
+}