@agent-native/core 0.114.16 → 0.115.3

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

@@ -0,0 +1,367 @@
+import { Badge } from "@agent-native/toolkit/ui/badge";
+import { Button } from "@agent-native/toolkit/ui/button";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@agent-native/toolkit/ui/tabs";
+import {
+  IconChecklist,
+  IconExternalLink,
+  IconFileSearch,
+  IconHistory,
+  IconNotes,
+  IconSparkles,
+} from "@tabler/icons-react";
+import { useMemo } from "react";
+import { Link } from "react-router";
+
+import { CrmSignalsPanel } from "@/components/crm/CrmSignalsPanel";
+import { LoadingRows, SetupEmptyState } from "@/components/crm/Surface";
+import {
+  asText,
+  normalizeTasks,
+  recordId,
+  type CrmRecordDetail,
+} from "@/lib/types";
+
+export function RecordWorkspace({
+  record,
+  isLoading,
+  onCompleteTask,
+  isCompletingTask,
+  actions,
+}: {
+  record: CrmRecordDetail | undefined;
+  isLoading: boolean;
+  onCompleteTask: (taskId: string) => void;
+  isCompletingTask: boolean;
+  actions?: React.ReactNode;
+}) {
+  const details = useMemo(
+    () =>
+      Object.entries(record?.fields ?? {})
+        .filter(([, value]) => typeof value !== "object" || value === null)
+        .slice(0, 10),
+    [record?.fields],
+  );
+  const tasks = normalizeTasks(record?.tasks);
+
+  if (isLoading) return <LoadingRows rows={8} />;
+  if (!record)
+    return (
+      <SetupEmptyState
+        title="This CRM record is unavailable"
+        description="It may have been archived, removed from a connected scope, or no longer shared with you."
+      />
+    );
+
+  return (
+    <div className="min-h-full">
+      <header className="border-b border-border/70 px-5 py-5 sm:px-7">
+        <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+          <span className="capitalize">{record.kind}</span>
+          {record.stage ? (
+            <>
+              <span>•</span>
+              <Badge variant="secondary" className="font-normal">
+                {record.stage}
+              </Badge>
+            </>
+          ) : null}
+        </div>
+        <div className="mt-2 flex flex-wrap items-start justify-between gap-4">
+          <div>
+            <h1 className="text-2xl font-semibold tracking-tight">
+              {record.displayName}
+            </h1>
+            {record.subtitle ? (
+              <p className="mt-1 text-sm text-muted-foreground">
+                {record.subtitle}
+              </p>
+            ) : null}
+          </div>
+          <div className="grid justify-items-end gap-3">
+            {record.owner ? (
+              <p className="text-sm text-muted-foreground">
+                Owner · {record.owner}
+              </p>
+            ) : null}
+            {actions}
+          </div>
+        </div>
+      </header>
+      <Tabs defaultValue="details" className="px-5 py-5 sm:px-7">
+        <TabsList className="h-9 bg-muted/70">
+          <TabsTrigger value="details" className="gap-1.5">
+            <IconNotes className="size-3.5" />
+            Details
+          </TabsTrigger>
+          <TabsTrigger value="cadence">Cadence</TabsTrigger>
+          <TabsTrigger value="evidence" className="gap-1.5">
+            <IconFileSearch className="size-3.5" />
+            Evidence
+          </TabsTrigger>
+          <TabsTrigger value="signals" className="gap-1.5">
+            <IconSparkles className="size-3.5" />
+            Signals
+          </TabsTrigger>
+          <TabsTrigger value="activity" className="gap-1.5">
+            <IconHistory className="size-3.5" />
+            Activity
+          </TabsTrigger>
+          <TabsTrigger value="tasks" className="gap-1.5">
+            <IconChecklist className="size-3.5" />
+            Tasks
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent value="details" className="mt-5 max-w-3xl">
+          <SectionTitle
+            title="Details"
+            description="Permitted fields owned locally or mirrored from a connected CRM."
+          />
+          <dl className="mt-4 divide-y divide-border rounded-lg border border-border/70 bg-card">
+            {details.length ? (
+              details.map(([key, value]) => (
+                <div
+                  key={key}
+                  className="grid grid-cols-[minmax(9rem,0.45fr)_minmax(0,1fr)] gap-4 px-4 py-3"
+                >
+                  <dt className="text-sm text-muted-foreground">
+                    {displayFieldName(key)}
+                  </dt>
+                  <dd className="break-words text-sm">{displayValue(value)}</dd>
+                </div>
+              ))
+            ) : (
+              <EmptyCopy text="No permitted fields are mirrored for this record." />
+            )}
+          </dl>
+          <div className="mt-6">
+            <SectionTitle
+              title="Related records"
+              description="Permitted records linked in this CRM workspace."
+            />
+            <div className="mt-4 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 transition-colors 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="capitalize font-normal"
+                    >
+                      {related.kind}
+                    </Badge>
+                  </Link>
+                ))
+              ) : (
+                <EmptyCopy text="No permitted linked records are available." />
+              )}
+            </div>
+          </div>
+        </TabsContent>
+        <TabsContent value="cadence" className="mt-5 max-w-3xl">
+          <SectionTitle
+            title="Cadence"
+            description="The next contact rhythm is based on permitted CRM activity."
+          />
+          <div className="mt-4 grid gap-3 rounded-lg border border-border/70 bg-card p-4 sm:grid-cols-3">
+            <Metric label="Cadence" value={record.cadence ?? "Not set"} />
+            <Metric
+              label="Next step"
+              value={record.nextStep ?? "No next step"}
+            />
+            <Metric
+              label="Last updated"
+              value={
+                record.updatedAt ? formatDate(record.updatedAt) : "Unknown"
+              }
+            />
+          </div>
+        </TabsContent>
+        <TabsContent value="evidence" className="mt-5 max-w-3xl">
+          <SectionTitle
+            title="Evidence"
+            description="Bounded references supporting CRM context."
+          />
+          <div className="mt-4 divide-y divide-border rounded-lg border border-border/70 bg-card">
+            {record.evidence?.length ? (
+              record.evidence.map((evidence) => (
+                <div key={evidence.id} className="px-4 py-3">
+                  <div className="flex items-start justify-between gap-3">
+                    <p className="text-sm font-medium">{evidence.label}</p>
+                    {evidence.url ? (
+                      <a
+                        href={evidence.url}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="text-muted-foreground hover:text-foreground"
+                        aria-label={`Open ${evidence.label}`}
+                      >
+                        <IconExternalLink className="size-4" />
+                      </a>
+                    ) : null}
+                  </div>
+                  {evidence.quote ? (
+                    <p className="mt-1 text-sm leading-6 text-muted-foreground">
+                      {evidence.quote}
+                    </p>
+                  ) : null}
+                </div>
+              ))
+            ) : (
+              <EmptyCopy text="No evidence references are available yet." />
+            )}
+          </div>
+        </TabsContent>
+        <TabsContent value="signals" className="mt-5">
+          <CrmSignalsPanel
+            recordId={record.id}
+            evidence={record.evidence ?? []}
+          />
+        </TabsContent>
+        <TabsContent value="activity" className="mt-5 max-w-3xl">
+          <SectionTitle
+            title="Activity"
+            description="Recent permitted interaction metadata."
+          />
+          <div className="mt-4 divide-y divide-border rounded-lg border border-border/70 bg-card">
+            {record.activity?.length ? (
+              record.activity.map((activity) => (
+                <div key={activity.id} className="px-4 py-3">
+                  <p className="text-sm font-medium">{activity.title}</p>
+                  {activity.summary ? (
+                    <p className="mt-1 text-sm text-muted-foreground">
+                      {activity.summary}
+                    </p>
+                  ) : null}
+                  <p className="mt-2 text-xs text-muted-foreground">
+                    {[
+                      activity.actor,
+                      activity.occurredAt
+                        ? formatDate(activity.occurredAt)
+                        : undefined,
+                    ]
+                      .filter(Boolean)
+                      .join(" · ")}
+                  </p>
+                </div>
+              ))
+            ) : (
+              <EmptyCopy text="No recent activity is available." />
+            )}
+          </div>
+        </TabsContent>
+        <TabsContent value="tasks" className="mt-5 max-w-3xl">
+          <SectionTitle
+            title="Tasks"
+            description="Keep follow-up work connected to the record."
+          />
+          <div className="mt-4 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
+                        ? `Due ${formatDate(task.dueAt)}`
+                        : task.status}
+                    </p>
+                  </div>
+                  {task.status !== "done" ? (
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      disabled={isCompletingTask}
+                      onClick={() => onCompleteTask(task.id)}
+                    >
+                      Complete
+                    </Button>
+                  ) : (
+                    <Badge variant="secondary">Done</Badge>
+                  )}
+                </div>
+              ))
+            ) : (
+              <EmptyCopy text="No follow-up tasks are attached to this record." />
+            )}
+          </div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
+
+function SectionTitle({
+  title,
+  description,
+}: {
+  title: string;
+  description: string;
+}) {
+  return (
+    <div>
+      <h2 className="text-sm font-semibold">{title}</h2>
+      <p className="mt-1 text-sm text-muted-foreground">{description}</p>
+    </div>
+  );
+}
+function Metric({ label, value }: { label: string; value: string }) {
+  return (
+    <div>
+      <p className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">
+        {label}
+      </p>
+      <p className="mt-1 text-sm font-medium">{value}</p>
+    </div>
+  );
+}
+function EmptyCopy({ text }: { text: string }) {
+  return (
+    <p className="px-4 py-8 text-center text-sm text-muted-foreground">
+      {text}
+    </p>
+  );
+}
+function displayFieldName(value: string) {
+  return value
+    .replace(/([A-Z])/g, " $1")
+    .replace(/_/g, " ")
+    .replace(/^./, (letter: string) => letter.toUpperCase());
+}
+function displayValue(value: unknown) {
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  return asText(value) ?? String(value ?? "—");
+}
+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/SavedViewDataProgram.tsx

@@ -0,0 +1,92 @@
+import { useActionMutation } from "@agent-native/core/client/hooks";
+import { DataTable } from "@agent-native/toolkit/dashboard";
+import { Badge } from "@agent-native/toolkit/ui/badge";
+import { IconChartDots } from "@tabler/icons-react";
+import { useEffect, useRef } from "react";
+
+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,96 @@
+import { Button } from "@agent-native/toolkit/ui/button";
+import { Skeleton } from "@agent-native/toolkit/ui/skeleton";
+import {
+  IconArrowUpRight,
+  IconDatabase,
+  IconDatabaseOff,
+} from "@tabler/icons-react";
+import { Link } from "react-router";
+
+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>
+  );
+}