@agent-native/core 0.123.0 → 0.123.2

package/corpus/templates/crm/app/routes/records.$recordId.tsx

@@ -0,0 +1,53 @@
+import {
+  useActionMutation,
+  useActionQuery,
+} from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+import { useParams } from "react-router";
+
+import { RecordActions } from "@/components/crm/RecordActions";
+import { RecordWorkspace } from "@/components/crm/RecordWorkspace";
+import { normalizeRecord, type CrmRecordDetail } from "@/lib/types";
+
+export default function RecordRoute() {
+  const t = useT();
+  const { recordId } = useParams();
+  const query = useActionQuery<unknown>(
+    "get-crm-record" as never,
+    { recordId } as never,
+    { enabled: Boolean(recordId) },
+  );
+  const manageTask = useActionMutation<
+    unknown,
+    { taskId: string; status: "done" }
+  >("manage-crm-task" as never);
+  const summary = normalizeRecord(query.data, "account");
+  const detail = summary
+    ? ({ ...summary, ...(query.data as object) } as CrmRecordDetail)
+    : undefined;
+
+  // A read that failed is not a record that is gone. Rendering the "archived or
+  // no longer shared" empty state for a transport or permission error would
+  // tell the user something we do not know.
+  if (query.error)
+    return (
+      <div className="p-6">
+        <p className="text-sm font-medium">{t("record.loadFailedTitle")}</p>
+        <p className="mt-1 text-sm text-muted-foreground">
+          {query.error instanceof Error
+            ? query.error.message
+            : t("record.loadFailedDescription")}
+        </p>
+      </div>
+    );
+
+  return (
+    <RecordWorkspace
+      record={detail}
+      isLoading={query.isLoading}
+      isCompletingTask={manageTask.isPending}
+      onCompleteTask={(taskId) => manageTask.mutate({ taskId, status: "done" })}
+      actions={detail ? <RecordActions record={detail} /> : undefined}
+    />
+  );
+}

package/corpus/templates/crm/app/routes/records.tsx

@@ -0,0 +1,64 @@
+import { useT } from "@agent-native/core/client/i18n";
+import { useSearchParams } from "react-router";
+
+import { CreateCrmRecordDialog } from "@/components/crm/CreateCrmRecordDialog";
+import { RecordGrid } from "@/components/crm/RecordGrid";
+import { PageHeader } from "@/components/crm/Surface";
+import type { CrmKind } from "@/lib/types";
+import { cn } from "@/lib/utils";
+
+const KINDS: CrmKind[] = ["account", "person", "opportunity"];
+
+export function meta() {
+  return [{ title: "Records · CRM" }]; // i18n-ignore
+}
+
+export default function RecordsRoute() {
+  const t = useT();
+  const [params, setParams] = useSearchParams();
+  const raw = params.get("kind");
+  const kind: CrmKind = KINDS.includes(raw as CrmKind)
+    ? (raw as CrmKind)
+    : "account";
+
+  function selectKind(next: CrmKind) {
+    const updated = new URLSearchParams(params);
+    updated.set("kind", next);
+    // A cursor and a search term belong to the kind that produced them.
+    updated.delete("q");
+    setParams(updated, { replace: true });
+  }
+
+  return (
+    <>
+      <PageHeader
+        eyebrow={t("records.eyebrow")}
+        title={t("records.title")}
+        description={t("records.description")}
+        actions={<CreateCrmRecordDialog kind={kind} />}
+      />
+      <div className="flex items-center gap-1 border-b border-border/70 px-5 py-2">
+        {KINDS.map((candidate) => (
+          <button
+            key={candidate}
+            type="button"
+            onClick={() => selectKind(candidate)}
+            className={cn(
+              "cursor-pointer rounded-full px-3 py-1 text-sm transition-colors",
+              candidate === kind
+                ? "bg-primary text-primary-foreground"
+                : "text-muted-foreground hover:bg-muted hover:text-foreground",
+            )}
+          >
+            {t(`records.kind.${candidate}`)}
+          </button>
+        ))}
+      </div>
+      <RecordGrid
+        key={kind}
+        kind={kind}
+        emptyTitle={t(`records.empty.${kind}`)}
+      />
+    </>
+  );
+}

package/corpus/templates/crm/app/routes/settings.tsx

@@ -0,0 +1,118 @@
+import { ChangelogSettingsCard } from "@agent-native/core/client/changelog";
+import { useT } from "@agent-native/core/client/i18n";
+import {
+  SettingsTabsPage,
+  useAgentSettingsTabs,
+  type SettingsTabItem,
+} from "@agent-native/core/client/settings";
+import {
+  IconAdjustments,
+  IconColumns3,
+  IconListDetails,
+  IconPlugConnected,
+  IconWaveSine,
+} from "@tabler/icons-react";
+import { useMemo } from "react";
+import { useLocation } from "react-router";
+
+import { IntelligenceSettings } from "@/components/crm/IntelligenceSettings";
+import { AdvancedSettings } from "@/components/crm/settings/AdvancedSettings";
+import { ConnectionSettings } from "@/components/crm/settings/ConnectionSettings";
+import { FieldsSettings } from "@/components/crm/settings/FieldsSettings";
+import { ListsSettings } from "@/components/crm/settings/ListsSettings";
+
+import changelog from "../../CHANGELOG.md?raw";
+
+export function meta() {
+  return [{ title: "CRM settings" }];
+}
+
+/**
+ * `/settings/<section>` deep links. `connections` is the shared workspace tab
+ * and `connection` is the CRM one, so the segment is matched exactly rather
+ * than by substring.
+ */
+const SETTINGS_SECTIONS: readonly string[] = [
+  "fields",
+  "lists",
+  "intelligence",
+  "connection",
+  "connections",
+  "advanced",
+];
+
+function sectionFromPath(pathname: string): string {
+  const section = pathname.split("/settings/")[1]?.split("/")[0] ?? "";
+  return SETTINGS_SECTIONS.includes(section) ? section : "general";
+}
+
+export default function SettingsRoute() {
+  const t = useT();
+  const location = useLocation();
+  const agentSettingsTabs = useAgentSettingsTabs();
+  const tabs = useMemo<SettingsTabItem[]>(
+    () => [
+      {
+        id: "connection",
+        label: t("connection.tab"),
+        icon: IconPlugConnected,
+        keywords: "provider hubspot salesforce native mode mirror sync",
+        content: <ConnectionSettings />,
+      },
+      {
+        id: "fields",
+        label: t("fields.tab"),
+        icon: IconColumns3,
+        keywords:
+          "attributes schema columns slug type authority options status select stage",
+        content: <FieldsSettings />,
+      },
+      {
+        id: "lists",
+        label: t("lists.tab"),
+        icon: IconListDetails,
+        keywords: "lists entries pipeline workflow stage board",
+        content: <ListsSettings />,
+      },
+      {
+        id: "intelligence",
+        label: t("intelligence.tab"),
+        icon: IconWaveSine,
+        keywords: "signals trackers keywords smart detectors call evidence",
+        content: <IntelligenceSettings />,
+      },
+      {
+        id: "advanced",
+        label: t("advanced.tab"),
+        icon: IconAdjustments,
+        group: "workspace",
+        keywords: "danger reset reconfigure retention archive delete",
+        content: <AdvancedSettings />,
+      },
+      ...agentSettingsTabs,
+    ],
+    [agentSettingsTabs, t],
+  );
+
+  return (
+    <SettingsTabsPage
+      defaultTab={sectionFromPath(location.pathname)}
+      extraTabs={tabs}
+      general={
+        <div className="mx-auto w-full max-w-2xl space-y-3">
+          <h1 className="text-xl font-semibold tracking-tight">
+            {t("settings.title")}
+          </h1>
+          <p className="text-sm leading-6 text-muted-foreground">
+            {t("settings.description")}
+          </p>
+        </div>
+      }
+      whatsNew={
+        <div className="mx-auto w-full max-w-2xl">
+          <ChangelogSettingsCard markdown={changelog} />
+        </div>
+      }
+    />
+  );
+}

package/corpus/templates/crm/app/routes/setup.tsx

@@ -0,0 +1,308 @@
+import {
+  useActionMutation,
+  useActionQuery,
+} from "@agent-native/core/client/hooks";
+import { useMemo, useState } from "react";
+import { Link, useNavigate } from "react-router";
+import { toast } from "sonner";
+
+import { PageHeader } from "@/components/crm/Surface";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+interface WorkspaceConnection {
+  id: string;
+  provider: "hubspot" | "salesforce";
+  label: string;
+  accountLabel?: string | null;
+  status: string;
+}
+
+export default function SetupRoute() {
+  const navigate = useNavigate();
+  const connectionsQuery = useActionQuery<unknown>(
+    "list-workspace-connections" as never,
+    { includeDisabled: false } as never,
+  );
+  const connections = useMemo(
+    () => crmConnections(connectionsQuery.data),
+    [connectionsQuery.data],
+  );
+  const [workspaceConnectionId, setWorkspaceConnectionId] = useState("");
+  const [pipelineIds, setPipelineIds] = useState("");
+  const [historyDays, setHistoryDays] = useState("90");
+  const configure = useActionMutation<
+    { id: string },
+    {
+      workspaceConnectionId: string;
+      provider: "hubspot" | "salesforce";
+      selectedPipelineIds: string[];
+      selectedObjectTypes: string[];
+    }
+  >("configure-crm-connection" as never);
+  const configureNative = useActionMutation<
+    { id: string },
+    Record<string, never>
+  >("configure-native-crm" as never);
+  const sync = useActionMutation<
+    unknown,
+    {
+      connectionId: string;
+      objectType: string;
+      scope: { updatedAfter: string; pipelineIds?: string[] };
+      maxPages: number;
+    }
+  >("sync-crm" as never);
+
+  const selected = connections.find(
+    (connection) => connection.id === workspaceConnectionId,
+  );
+
+  async function syncRecentRecords() {
+    if (!selected) return;
+    const selectedPipelines = pipelineIds
+      .split(",")
+      .map((value) => value.trim())
+      .filter(Boolean)
+      .slice(0, 50);
+    const days = Math.max(
+      1,
+      Math.min(365, Number.parseInt(historyDays, 10) || 90),
+    );
+    try {
+      const connection = await configure.mutateAsync({
+        workspaceConnectionId,
+        provider: selected.provider,
+        selectedPipelineIds:
+          selected.provider === "hubspot" ? selectedPipelines : [],
+        selectedObjectTypes: objectTypesForProvider(selected.provider),
+      });
+      const updatedAfter = new Date(
+        Date.now() - days * 24 * 60 * 60 * 1_000,
+      ).toISOString();
+      for (const objectType of objectTypesForProvider(selected.provider)) {
+        await sync.mutateAsync({
+          connectionId: connection.id,
+          objectType,
+          scope: {
+            updatedAfter,
+            ...(selected.provider === "hubspot" &&
+            objectType === "deals" &&
+            selectedPipelines.length
+              ? { pipelineIds: selectedPipelines }
+              : {}),
+          },
+          maxPages: 2,
+        });
+      }
+      toast.success(
+        `Recent ${providerLabel(selected.provider)} records are ready.`,
+      );
+      navigate("/", { replace: true });
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "CRM sync failed.");
+    }
+  }
+
+  async function startNativeCrm() {
+    try {
+      await configureNative.mutateAsync({});
+      toast.success("Your native CRM is ready.");
+      navigate("/", { replace: true });
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Could not start native CRM.",
+      );
+    }
+  }
+
+  return (
+    <>
+      <PageHeader
+        eyebrow="CRM"
+        title="Set up CRM"
+        description="Start with CRM's built-in SQL store, or connect a scoped HubSpot or Salesforce companion."
+      />
+      <div className="mx-auto grid w-full max-w-xl gap-6 p-5 sm:p-7">
+        <section className="grid gap-4 rounded-lg border border-border/70 bg-card p-4">
+          <div className="grid gap-1">
+            <p className="text-sm font-medium">Start with Native SQL</p>
+            <p className="text-sm leading-6 text-muted-foreground">
+              Run accounts, people, opportunities, saved views, tasks, and
+              cadence without connecting another CRM. Your CRM is
+              local-authoritative and portable across SQLite, Postgres, and D1.
+            </p>
+          </div>
+          <Button
+            className="w-full sm:w-fit"
+            disabled={configureNative.isPending}
+            onClick={() => void startNativeCrm()}
+          >
+            {configureNative.isPending ? "Starting…" : "Start with Native SQL"}
+          </Button>
+        </section>
+        <div className="flex items-center gap-3 text-xs font-medium uppercase tracking-[0.12em] text-muted-foreground">
+          <span className="h-px flex-1 bg-border" />
+          Or connect an existing CRM
+          <span className="h-px flex-1 bg-border" />
+        </div>
+        <div className="grid gap-2">
+          <Label htmlFor="crm-connection">CRM connection</Label>
+          <Select
+            value={workspaceConnectionId}
+            onValueChange={setWorkspaceConnectionId}
+            disabled={connectionsQuery.isLoading}
+          >
+            <SelectTrigger id="crm-connection">
+              <SelectValue placeholder="Select HubSpot or Salesforce" />
+            </SelectTrigger>
+            <SelectContent>
+              {connections.map((connection) => (
+                <SelectItem key={connection.id} value={connection.id}>
+                  {connection.label} · {providerLabel(connection.provider)}
+                  {connection.accountLabel
+                    ? ` · ${connection.accountLabel}`
+                    : ""}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <p className="text-xs text-muted-foreground">
+            Only workspace Connections granted to this app can be used. CRM
+            never stores provider tokens.
+          </p>
+        </div>
+        <div className="grid gap-4 rounded-lg border border-border/70 bg-card p-4 sm:grid-cols-2">
+          <div className="grid gap-2">
+            <Label htmlFor="history-days">Recent history</Label>
+            <Input
+              id="history-days"
+              type="number"
+              min={1}
+              max={365}
+              value={historyDays}
+              onChange={(event) => setHistoryDays(event.target.value)}
+            />
+            <p className="text-xs text-muted-foreground">
+              Days, capped at 365.
+            </p>
+          </div>
+          {selected?.provider === "hubspot" ? (
+            <div className="grid gap-2">
+              <Label htmlFor="pipeline-ids">Deal pipeline IDs</Label>
+              <Input
+                id="pipeline-ids"
+                value={pipelineIds}
+                maxLength={8_000}
+                placeholder="Optional, comma-separated"
+                onChange={(event) => setPipelineIds(event.target.value)}
+              />
+              <p className="text-xs text-muted-foreground">
+                Leave blank for recently updated deals.
+              </p>
+            </div>
+          ) : selected?.provider === "salesforce" ? (
+            <div className="grid gap-2">
+              <p className="text-sm font-medium">Salesforce objects</p>
+              <p className="text-xs leading-5 text-muted-foreground">
+                CRM mirrors recently updated Accounts, Contacts, and
+                Opportunities in this initial cohort.
+              </p>
+            </div>
+          ) : (
+            <div className="grid gap-2">
+              <p className="text-sm font-medium">Cohort objects</p>
+              <p className="text-xs leading-5 text-muted-foreground">
+                Choose a connection to see its initial object cohort.
+              </p>
+            </div>
+          )}
+        </div>
+        {connections.length ? (
+          <Button
+            disabled={
+              !selected ||
+              selected.status !== "connected" ||
+              configure.isPending ||
+              sync.isPending
+            }
+            onClick={() => void syncRecentRecords()}
+          >
+            {configure.isPending || sync.isPending
+              ? "Syncing…"
+              : "Configure and sync"}
+          </Button>
+        ) : (
+          <div className="rounded-lg border border-dashed border-border p-5 text-center">
+            <p className="text-sm font-medium">
+              No connected HubSpot or Salesforce account is available.
+            </p>
+            <p className="mt-1 text-sm text-muted-foreground">
+              You can start with Native SQL above, or authorize a provider and
+              grant it to CRM from shared settings.
+            </p>
+            <Button asChild variant="outline" className="mt-4">
+              <Link to="/settings/connections">Open shared connections</Link>
+            </Button>
+            <p className="mt-3 text-xs text-muted-foreground">
+              Using a Salesforce sandbox?{" "}
+              <a
+                className="font-medium text-foreground underline underline-offset-4"
+                href="/_agent-native/connections/oauth/salesforce/start?environment=sandbox"
+              >
+                Authorize the sandbox directly
+              </a>
+              .
+            </p>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
+
+function crmConnections(data: unknown): WorkspaceConnection[] {
+  if (!data || typeof data !== "object") return [];
+  const rows = (data as { connections?: unknown }).connections;
+  if (!Array.isArray(rows)) return [];
+  return rows.flatMap((row) => {
+    if (!row || typeof row !== "object") return [];
+    const item = row as Record<string, unknown>;
+    if (
+      (item.provider !== "hubspot" && item.provider !== "salesforce") ||
+      typeof item.id !== "string" ||
+      typeof item.label !== "string" ||
+      typeof item.status !== "string"
+    ) {
+      return [];
+    }
+    return [
+      {
+        id: item.id,
+        provider: item.provider,
+        label: item.label,
+        accountLabel:
+          typeof item.accountLabel === "string" ? item.accountLabel : null,
+        status: item.status,
+      },
+    ];
+  });
+}
+
+function objectTypesForProvider(provider: WorkspaceConnection["provider"]) {
+  return provider === "hubspot"
+    ? ["companies", "contacts", "deals"]
+    : ["Account", "Contact", "Opportunity"];
+}
+
+function providerLabel(provider: WorkspaceConnection["provider"]) {
+  return provider === "hubspot" ? "HubSpot" : "Salesforce";
+}