@agent-native/core 0.123.0 → 0.123.2

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

@@ -0,0 +1,232 @@
+/**
+ * The record page: attribute panel on the left, tabs in the middle, list
+ * memberships and signals on the right.
+ *
+ * The page reads two actions on purpose. `get-crm-record` is the one that
+ * verifies provider read-through permission for a mirrored record and carries
+ * evidence, tasks, and relationships; `get-crm-record-page` carries the typed
+ * attribute schema, the current bitemporal values, and list memberships. The
+ * second does not replace the first.
+ */
+
+import { setClientAppState } from "@agent-native/core/client/application-state";
+import {
+  useActionMutation,
+  useActionQuery,
+} from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+import { useQueryClient } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+
+import { CrmSignalsPanel } from "@/components/crm/CrmSignalsPanel";
+import { AttributePanel } from "@/components/crm/record/AttributePanel";
+import {
+  applyEntryValue,
+  applyFieldValue,
+  rollbackEntryValue,
+  rollbackFieldValue,
+  type CrmRecordPage,
+  type CrmRecordPageListAttribute,
+  type RecordTab,
+} from "@/components/crm/record/record-data";
+import { RecordHeader } from "@/components/crm/record/RecordHeader";
+import { RecordLists } from "@/components/crm/record/RecordLists";
+import { RecordTabs } from "@/components/crm/record/RecordTabs";
+import { LoadingRows, SetupEmptyState } from "@/components/crm/Surface";
+import { TAB_ID } from "@/lib/tab-id";
+import type { CrmRecordDetail } from "@/lib/types";
+
+import type {
+  CrmAttributeDefinition,
+  CrmValue,
+} from "../../../shared/crm-contract";
+
+const RECORD_APP_STATE_KEY = "crm-record-workspace";
+
+export function RecordWorkspace({
+  record,
+  isLoading,
+  onCompleteTask,
+  isCompletingTask,
+  actions,
+}: {
+  record: CrmRecordDetail | undefined;
+  isLoading: boolean;
+  onCompleteTask: (taskId: string) => void;
+  isCompletingTask: boolean;
+  actions?: React.ReactNode;
+}) {
+  const t = useT();
+  const [tab, setTab] = useState<RecordTab>("activity");
+  const queryClient = useQueryClient();
+  const recordId = record?.id;
+
+  const pageParams = { recordId };
+  const pageQuery = useActionQuery<CrmRecordPage>(
+    "get-crm-record-page" as never,
+    pageParams as never,
+    { enabled: Boolean(recordId) },
+  );
+  const pageKey = ["action", "get-crm-record-page", pageParams] as const;
+
+  const updateRecord = useActionMutation<
+    { mutationId: string; status?: string },
+    {
+      recordId: string;
+      target: "local";
+      fields: Record<string, unknown>;
+      expectedRemoteRevision?: string;
+    }
+  >("update-crm-record" as never);
+  const updateEntry = useActionMutation<
+    unknown,
+    { entryId: string; values: Record<string, unknown> }
+  >("update-crm-list-entry" as never);
+
+  // The agent needs to know which record is open and which tab is showing.
+  useEffect(() => {
+    if (!recordId) return;
+    void setClientAppState(
+      `${RECORD_APP_STATE_KEY}:${TAB_ID}`,
+      { recordId, tab },
+      { requestSource: TAB_ID },
+    );
+  }, [recordId, tab]);
+
+  async function commitField(
+    attribute: CrmAttributeDefinition,
+    value: CrmValue,
+  ) {
+    const current = queryClient.getQueryData<CrmRecordPage>(pageKey);
+    if (!current) return;
+    const { page: optimistic, edit } = applyFieldValue(
+      current,
+      attribute.apiSlug,
+      value,
+      { since: new Date().toISOString(), actorType: "user", actorId: null },
+    );
+    queryClient.setQueryData(pageKey, optimistic);
+    try {
+      await updateRecord.mutateAsync({
+        recordId: current.record.id,
+        target: "local",
+        fields: { [attribute.apiSlug]: value },
+        ...(current.record.remoteRevision
+          ? { expectedRemoteRevision: current.record.remoteRevision }
+          : {}),
+      });
+    } catch (error) {
+      queryClient.setQueryData<CrmRecordPage>(pageKey, (previous) =>
+        rollbackFieldValue(previous ?? optimistic, edit),
+      );
+      toast.error(
+        error instanceof Error ? error.message : t("record.saveFailed"),
+      );
+    }
+  }
+
+  async function commitEntryValue(
+    entryId: string,
+    attribute: CrmRecordPageListAttribute,
+    value: CrmValue,
+  ) {
+    const current = queryClient.getQueryData<CrmRecordPage>(pageKey);
+    if (!current) return;
+    const { page: optimistic, previousValue } = applyEntryValue(
+      current,
+      entryId,
+      attribute.apiSlug,
+      value,
+    );
+    queryClient.setQueryData(pageKey, optimistic);
+    try {
+      await updateEntry.mutateAsync({
+        entryId,
+        values: { [attribute.apiSlug]: value },
+      });
+    } catch (error) {
+      queryClient.setQueryData<CrmRecordPage>(pageKey, (previous) =>
+        rollbackEntryValue(
+          previous ?? optimistic,
+          entryId,
+          attribute.apiSlug,
+          previousValue,
+        ),
+      );
+      toast.error(
+        error instanceof Error ? error.message : t("record.saveFailed"),
+      );
+    }
+  }
+
+  if (isLoading) return <LoadingRows rows={8} />;
+  if (!record)
+    return (
+      <SetupEmptyState
+        title={t("record.unavailableTitle")}
+        description={t("record.unavailableDescription")}
+      />
+    );
+
+  const page = pageQuery.data;
+
+  return (
+    <div className="flex min-h-full flex-col">
+      <RecordHeader
+        record={record}
+        recordUrl={page?.recordUrl ?? null}
+        recordUrlUnavailableReason={page?.recordUrlUnavailableReason ?? null}
+        actions={actions}
+      />
+      <div className="flex min-h-0 flex-1 flex-col lg:flex-row">
+        {/* A failed panel load is a visible error, not an empty attribute list:
+            "this record has no attributes" and "we could not read them" are
+            different answers and must not render the same. */}
+        {pageQuery.error ? (
+          <aside className="w-full border-border/70 p-5 lg:w-[22rem] lg:shrink-0 lg:border-r">
+            <p className="text-sm text-destructive">
+              {pageQuery.error instanceof Error
+                ? pageQuery.error.message
+                : t("record.panelLoadFailed")}
+            </p>
+          </aside>
+        ) : page ? (
+          <AttributePanel page={page} onCommit={commitField} />
+        ) : (
+          <aside className="w-full border-border/70 p-5 lg:w-[22rem] lg:shrink-0 lg:border-r">
+            <LoadingRows rows={6} />
+          </aside>
+        )}
+
+        <div className="min-w-0 flex-1">
+          <RecordTabs
+            record={record}
+            tab={tab}
+            onTabChange={setTab}
+            onCompleteTask={onCompleteTask}
+            isCompletingTask={isCompletingTask}
+          />
+        </div>
+
+        <div className="grid w-full content-start gap-6 border-border/70 p-5 lg:w-[22rem] lg:shrink-0 lg:border-l">
+          {page ? (
+            <RecordLists page={page} onEntryCommit={commitEntryValue} />
+          ) : null}
+          <section aria-labelledby="crm-record-signals">
+            <h2
+              id="crm-record-signals"
+              className="mb-2 text-xs font-medium uppercase tracking-[0.12em] text-muted-foreground"
+            >
+              {t("record.signals")}
+            </h2>
+            <CrmSignalsPanel
+              recordId={record.id}
+              evidence={record.evidence ?? []}
+            />
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,93 @@
+import { useActionMutation } from "@agent-native/core/client/hooks";
+import { DataTable } from "@agent-native/toolkit/dashboard";
+import { IconChartDots } from "@tabler/icons-react";
+import { useEffect, useRef } from "react";
+
+import { Badge } from "@/components/ui/badge";
+
+interface ProgramPreview {
+  ok: boolean;
+  rowCount?: number;
+  columns?: Array<{ name: string; type: string }>;
+  sampleRows?: Array<Record<string, unknown>>;
+  asOfMs?: number;
+  cacheHit?: boolean;
+  stale?: boolean;
+  truncated?: boolean;
+  message?: string;
+  lastGoodRun?: {
+    rowCount: number;
+    columns: Array<{ name: string; type: string }>;
+    sampleRows: Array<Record<string, unknown>>;
+    truncated: boolean;
+    asOfMs: number;
+  };
+}
+
+export function SavedViewDataProgram({ data }: { data: unknown }) {
+  const viewId = linkedProgramViewId(data);
+  const lastRunViewId = useRef<string | undefined>(undefined);
+  const run = useActionMutation<ProgramPreview, { viewId: string }>(
+    "run-crm-saved-view-program" as never,
+  );
+
+  useEffect(() => {
+    if (!viewId || lastRunViewId.current === viewId) return;
+    lastRunViewId.current = viewId;
+    run.mutate({ viewId });
+  }, [run, viewId]);
+
+  if (!viewId) return null;
+  const preview = run.data?.ok ? run.data : run.data?.lastGoodRun;
+  return (
+    <section className="mx-5 mt-5 rounded-lg border border-border/70 bg-card p-4 sm:mx-7">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="flex items-start gap-3">
+          <IconChartDots className="mt-0.5 size-4 text-muted-foreground" />
+          <div>
+            <h2 className="text-sm font-semibold">Cross-source context</h2>
+            <p className="mt-1 text-sm text-muted-foreground">
+              {run.isPending
+                ? "Running the saved data program…"
+                : run.isError
+                  ? "The saved data program is unavailable."
+                  : run.data?.ok
+                    ? `${run.data.rowCount ?? 0} rows from the linked data program.`
+                    : run.data?.message ||
+                      "Showing the last good program result."}
+            </p>
+          </div>
+        </div>
+        {preview ? (
+          <div className="flex gap-2">
+            {preview.truncated ? (
+              <Badge variant="outline">Truncated</Badge>
+            ) : null}
+            {run.data?.ok && run.data.cacheHit ? (
+              <Badge variant="secondary">Cached</Badge>
+            ) : null}
+          </div>
+        ) : null}
+      </div>
+      {preview?.sampleRows?.length ? (
+        <div className="mt-4 overflow-hidden rounded-md border border-border/70">
+          <DataTable
+            data={preview.sampleRows.slice(0, 5)}
+            columns={preview.columns?.slice(0, 8).map((column) => column.name)}
+            maxRows={5}
+          />
+        </div>
+      ) : null}
+    </section>
+  );
+}
+
+function linkedProgramViewId(data: unknown) {
+  if (!data || typeof data !== "object") return undefined;
+  const appliedView = (data as { appliedView?: unknown }).appliedView;
+  if (!appliedView || typeof appliedView !== "object") return undefined;
+  const view = appliedView as Record<string, unknown>;
+  return typeof view.id === "string" && typeof view.dataProgramId === "string"
+    ? view.id
+    : undefined;
+}

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

@@ -0,0 +1,97 @@
+import {
+  IconArrowUpRight,
+  IconDatabase,
+  IconDatabaseOff,
+} from "@tabler/icons-react";
+import { Link } from "react-router";
+
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function PageHeader({
+  eyebrow,
+  title,
+  description,
+  actions,
+}: {
+  eyebrow?: string;
+  title: string;
+  description?: string;
+  actions?: React.ReactNode;
+}) {
+  return (
+    <header className="flex flex-col gap-4 border-b border-border/70 px-5 py-5 sm:flex-row sm:items-end sm:justify-between sm:px-7">
+      <div className="min-w-0">
+        {eyebrow ? (
+          <p className="mb-1 text-xs font-medium uppercase tracking-[0.12em] text-muted-foreground">
+            {eyebrow}
+          </p>
+        ) : null}
+        <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
+        {description ? (
+          <p className="mt-1 max-w-2xl text-sm leading-6 text-muted-foreground">
+            {description}
+          </p>
+        ) : null}
+      </div>
+      {actions ? (
+        <div className="flex shrink-0 items-center gap-2">{actions}</div>
+      ) : null}
+    </header>
+  );
+}
+
+export function LoadingRows({ rows = 5 }: { rows?: number }) {
+  return (
+    <div className="grid gap-2 p-5 sm:p-7">
+      {Array.from({ length: rows }, (_, index) => (
+        <Skeleton key={index} className="h-12 w-full" />
+      ))}
+    </div>
+  );
+}
+
+export function SetupEmptyState({
+  title = "Start a CRM to begin",
+  description = "Start with the built-in SQL CRM, or connect a scoped workspace CRM. No provider credentials are stored in this app.",
+  onSync,
+  isSyncing = false,
+  actionLabel,
+}: {
+  title?: string;
+  description?: string;
+  onSync?: () => void;
+  isSyncing?: boolean;
+  actionLabel?: string;
+}) {
+  return (
+    <div className="grid min-h-[360px] place-items-center p-6">
+      <div className="max-w-sm text-center">
+        <div className="mx-auto grid size-10 place-items-center rounded-full bg-muted text-muted-foreground">
+          <IconDatabaseOff className="size-5" />
+        </div>
+        <h2 className="mt-4 text-base font-semibold">{title}</h2>
+        <p className="mt-2 text-sm leading-6 text-muted-foreground">
+          {description}
+        </p>
+        <div className="mt-5 flex flex-wrap justify-center gap-2">
+          <Button asChild className="gap-2">
+            <Link to="/setup">
+              <IconDatabase className="size-4" /> Start with Native SQL
+            </Link>
+          </Button>
+          <Button asChild variant="outline" className="gap-2">
+            <Link to="/settings/connections">
+              Open shared connections <IconArrowUpRight className="size-4" />
+            </Link>
+          </Button>
+          {onSync ? (
+            <Button onClick={onSync} disabled={isSyncing}>
+              {isSyncing ? "Working…" : (actionLabel ?? "Sync recent records")}
+            </Button>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,180 @@
+import { IconArrowRight, IconCheck, IconListCheck } from "@tabler/icons-react";
+import { Link } from "react-router";
+
+import { LoadingRows, SetupEmptyState } from "@/components/crm/Surface";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  normalizeRecords,
+  normalizeTasks,
+  type CrmOverview,
+} from "@/lib/types";
+
+export function WorkOverview({
+  overview,
+  isLoading,
+}: {
+  overview: CrmOverview | undefined;
+  isLoading: boolean;
+}) {
+  const tasks = normalizeTasks(overview?.tasks);
+  const records = normalizeRecords(overview?.records, "account");
+  const focus = overview?.focus ?? [];
+
+  if (isLoading) return <LoadingRows rows={7} />;
+  if (!overview) return <SetupEmptyState />;
+
+  return (
+    <div className="mx-auto grid max-w-6xl gap-8 p-5 sm:p-7 xl:grid-cols-[minmax(0,1fr)_320px]">
+      <div className="min-w-0">
+        <section>
+          <div className="flex items-center justify-between gap-3">
+            <div>
+              <h2 className="text-sm font-semibold">Today’s work</h2>
+              <p className="mt-1 text-sm text-muted-foreground">
+                A focused queue across your CRM workspace.
+              </p>
+            </div>
+            <Button
+              asChild
+              variant="ghost"
+              size="sm"
+              className="gap-1.5 text-muted-foreground"
+            >
+              <Link to="/views">
+                Saved views <IconArrowRight className="size-3.5" />
+              </Link>
+            </Button>
+          </div>
+          <div className="mt-3 divide-y divide-border rounded-lg border border-border/70 bg-card">
+            {tasks.length ? (
+              tasks.map((task) => (
+                <div
+                  key={task.id}
+                  className="flex min-h-14 items-center gap-3 px-3.5 py-2.5"
+                >
+                  <span className="grid size-5 shrink-0 place-items-center rounded-full border border-border text-muted-foreground">
+                    <IconCheck className="size-3" />
+                  </span>
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm font-medium">{task.title}</p>
+                    <p className="mt-0.5 text-xs text-muted-foreground">
+                      {task.dueAt
+                        ? `Due ${formatDate(task.dueAt)}`
+                        : "No due date"}
+                    </p>
+                  </div>
+                  {task.recordId ? (
+                    <Button asChild variant="ghost" size="sm">
+                      <Link
+                        to={`/records/${encodeURIComponent(task.recordId)}`}
+                      >
+                        Open
+                      </Link>
+                    </Button>
+                  ) : null}
+                </div>
+              ))
+            ) : (
+              <QuietEmpty
+                icon={<IconListCheck className="size-4" />}
+                text="No open CRM tasks right now."
+              />
+            )}
+          </div>
+        </section>
+
+        <section className="mt-8">
+          <div className="flex items-center justify-between">
+            <h2 className="text-sm font-semibold">Recently active</h2>
+            <Button
+              asChild
+              variant="ghost"
+              size="sm"
+              className="gap-1.5 text-muted-foreground"
+            >
+              <Link to="/accounts">
+                Accounts <IconArrowRight className="size-3.5" />
+              </Link>
+            </Button>
+          </div>
+          <div className="mt-3 divide-y divide-border rounded-lg border border-border/70 bg-card">
+            {records.length ? (
+              records.slice(0, 5).map((record) => (
+                <Link
+                  key={record.id}
+                  to={`/records/${encodeURIComponent(record.id)}`}
+                  className="flex items-center gap-3 px-3.5 py-3 transition-colors hover:bg-muted/50"
+                >
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm font-medium">
+                      {record.displayName}
+                    </p>
+                    <p className="mt-0.5 truncate text-xs text-muted-foreground">
+                      {record.subtitle ?? record.owner ?? "CRM record"}
+                    </p>
+                  </div>
+                  {record.stage ? (
+                    <Badge variant="secondary" className="font-normal">
+                      {record.stage}
+                    </Badge>
+                  ) : null}
+                </Link>
+              ))
+            ) : (
+              <QuietEmpty text="Recent activity will appear as CRM records are added or synced." />
+            )}
+          </div>
+        </section>
+      </div>
+
+      <aside className="self-start border-t border-border/70 pt-5 xl:border-l xl:border-t-0 xl:pl-7 xl:pt-0">
+        <h2 className="text-sm font-semibold">Focus</h2>
+        <p className="mt-1 text-sm text-muted-foreground">
+          Signals worth deciding on.
+        </p>
+        <div className="mt-4 grid gap-3">
+          {focus.length ? (
+            focus.map((item) => (
+              <div
+                key={item.label}
+                className="border-b border-border/70 pb-3 last:border-0"
+              >
+                <p className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">
+                  {item.label}
+                </p>
+                <p className="mt-1 text-sm font-medium">{item.value}</p>
+                {item.detail ? (
+                  <p className="mt-1 text-xs leading-5 text-muted-foreground">
+                    {item.detail}
+                  </p>
+                ) : null}
+              </div>
+            ))
+          ) : (
+            <p className="text-sm leading-6 text-muted-foreground">
+              CRM will surface follow-up signals as records and interactions
+              become available.
+            </p>
+          )}
+        </div>
+      </aside>
+    </div>
+  );
+}
+
+function QuietEmpty({ icon, text }: { icon?: React.ReactNode; text: string }) {
+  return (
+    <div className="flex min-h-20 items-center justify-center gap-2 px-4 text-sm text-muted-foreground">
+      {icon}
+      {text}
+    </div>
+  );
+}
+
+function formatDate(value: string) {
+  const date = new Date(value);
+  return Number.isNaN(date.valueOf())
+    ? value
+    : date.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+}