@agent-native/core 0.117.2 → 0.118.1

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

@@ -1,367 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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

@@ -1,96 +0,0 @@
-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>
-  );
-}