@agent-native/core 0.117.2 → 0.118.1

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

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

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