@agent-native/core 0.114.16 → 0.115.3

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

@@ -0,0 +1,308 @@
+import {
+  useActionMutation,
+  useActionQuery,
+} from "@agent-native/core/client/hooks";
+import { Button } from "@agent-native/toolkit/ui/button";
+import { Input } from "@agent-native/toolkit/ui/input";
+import { Label } from "@agent-native/toolkit/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@agent-native/toolkit/ui/select";
+import { useMemo, useState } from "react";
+import { Link, useNavigate } from "react-router";
+import { toast } from "sonner";
+
+import { PageHeader } from "@/components/crm/Surface";
+
+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";
+}

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

@@ -0,0 +1,252 @@
+import {
+  useActionMutation,
+  useActionQuery,
+} from "@agent-native/core/client/hooks";
+import { Badge } from "@agent-native/toolkit/ui/badge";
+import { Button } from "@agent-native/toolkit/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@agent-native/toolkit/ui/dialog";
+import { Input } from "@agent-native/toolkit/ui/input";
+import { Label } from "@agent-native/toolkit/ui/label";
+import { Textarea } from "@agent-native/toolkit/ui/textarea";
+import { IconCheck, IconPlus, IconX } from "@tabler/icons-react";
+import { useState } from "react";
+import { Link } from "react-router";
+import { toast } from "sonner";
+
+import {
+  LoadingRows,
+  PageHeader,
+  SetupEmptyState,
+} from "@/components/crm/Surface";
+import { normalizeTasks } from "@/lib/types";
+
+interface ManageTaskInput {
+  taskId?: string;
+  title?: string;
+  description?: string;
+  dueAt?: string;
+  status?: "open" | "done" | "cancelled";
+}
+
+export default function TasksRoute() {
+  const query = useActionQuery<unknown>(
+    "list-crm-tasks" as never,
+    { limit: 100 } as never,
+  );
+  const manage = useActionMutation<unknown, ManageTaskInput>(
+    "manage-crm-task" as never,
+  );
+  const tasks = normalizeTasks(query.data);
+  const [pendingTaskIds, setPendingTaskIds] = useState<Set<string>>(new Set());
+
+  async function setStatus(
+    taskId: string,
+    status: "open" | "done" | "cancelled",
+  ) {
+    setPendingTaskIds((current) => new Set(current).add(taskId));
+    try {
+      await manage.mutateAsync({ taskId, status });
+      toast.success(status === "done" ? "Task completed." : "Task updated.");
+    } catch (error) {
+      const message =
+        error instanceof Error ? error.message : "Task update failed.";
+      toast.error(
+        message.includes("mirrored provider task")
+          ? "This is a mirrored provider task. Create a CRM proposal or complete it upstream."
+          : message,
+      );
+    } finally {
+      setPendingTaskIds((current) => {
+        const next = new Set(current);
+        next.delete(taskId);
+        return next;
+      });
+    }
+  }
+
+  return (
+    <>
+      <PageHeader
+        eyebrow="Work"
+        title="Tasks"
+        description="Local follow-up work connected to the records you can access."
+        actions={<CreateTaskDialog mutation={manage} />}
+      />
+      {query.isLoading ? (
+        <LoadingRows rows={7} />
+      ) : tasks.length ? (
+        <div className="divide-y divide-border/70">
+          {tasks.map((task) => (
+            <div
+              key={task.id}
+              className="flex flex-wrap items-center gap-3 px-5 py-4 sm:px-7"
+            >
+              <div className="min-w-0 flex-1">
+                <div className="flex flex-wrap items-center gap-2">
+                  <p className="text-sm font-medium">{task.title}</p>
+                  <Badge variant="secondary" className="font-normal capitalize">
+                    {task.status}
+                  </Badge>
+                </div>
+                <p className="mt-1 text-xs text-muted-foreground">
+                  {task.dueAt ? `Due ${formatDate(task.dueAt)}` : "No due date"}
+                  {task.recordId ? (
+                    <>
+                      {" · "}
+                      <Link
+                        to={`/records/${encodeURIComponent(task.recordId)}`}
+                        className="underline-offset-4 hover:underline"
+                      >
+                        Open record
+                      </Link>
+                    </>
+                  ) : null}
+                </p>
+              </div>
+              <div className="flex items-center gap-2">
+                {task.status !== "done" ? (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="gap-1.5"
+                    disabled={pendingTaskIds.has(task.id)}
+                    onClick={() => void setStatus(task.id, "done")}
+                  >
+                    <IconCheck className="size-4" /> Complete
+                  </Button>
+                ) : (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    disabled={pendingTaskIds.has(task.id)}
+                    onClick={() => void setStatus(task.id, "open")}
+                  >
+                    Reopen
+                  </Button>
+                )}
+                {task.status !== "cancelled" ? (
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    disabled={pendingTaskIds.has(task.id)}
+                    aria-label={`Cancel ${task.title}`}
+                    onClick={() => void setStatus(task.id, "cancelled")}
+                  >
+                    <IconX className="size-4" />
+                  </Button>
+                ) : null}
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <SetupEmptyState
+          title="No follow-up tasks"
+          description="Create a task here or from a CRM record to keep the next action visible."
+        />
+      )}
+    </>
+  );
+}
+
+function CreateTaskDialog({
+  mutation,
+}: {
+  mutation: {
+    isPending: boolean;
+    mutateAsync: (input: ManageTaskInput) => Promise<unknown>;
+  };
+}) {
+  const [open, setOpen] = useState(false);
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [dueAt, setDueAt] = useState("");
+
+  async function createTask() {
+    try {
+      await mutation.mutateAsync({
+        title,
+        description: description || undefined,
+        dueAt: dueAt ? new Date(dueAt).toISOString() : undefined,
+        status: "open",
+      });
+      setOpen(false);
+      setTitle("");
+      setDescription("");
+      setDueAt("");
+      toast.success("Task created.");
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Task creation failed.",
+      );
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button size="sm" className="gap-2">
+          <IconPlus className="size-4" /> New task
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Create follow-up task</DialogTitle>
+          <DialogDescription>
+            Tasks are local by default and never write to the provider silently.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-2">
+          <div className="grid gap-2">
+            <Label htmlFor="task-title">Title</Label>
+            <Input
+              id="task-title"
+              value={title}
+              maxLength={300}
+              onChange={(event) => setTitle(event.target.value)}
+            />
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="task-description">Description</Label>
+            <Textarea
+              id="task-description"
+              value={description}
+              maxLength={2_000}
+              onChange={(event) => setDescription(event.target.value)}
+            />
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="task-due">Due</Label>
+            <Input
+              id="task-due"
+              type="datetime-local"
+              value={dueAt}
+              onChange={(event) => setDueAt(event.target.value)}
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button
+            onClick={() => void createTask()}
+            disabled={!title.trim() || mutation.isPending}
+          >
+            Create task
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function formatDate(value: string) {
+  const date = new Date(value);
+  return Number.isNaN(date.valueOf()) ? value : date.toLocaleString();
+}