@agent-native/core 0.122.4 → 0.123.1

package/corpus/templates/crm/app/i18n/index.ts

@@ -0,0 +1,34 @@
+import { type AgentNativeI18nCatalog } from "@agent-native/core/client/i18n";
+
+import enUS from "./en-US";
+
+export const i18nCatalog = {
+  sourceLocale: "en-US",
+  messages: enUS,
+  loadMessages: async (locale) => {
+    switch (locale) {
+      case "ar-SA":
+        return (await import("./ar-SA")).default;
+      case "de-DE":
+        return (await import("./de-DE")).default;
+      case "es-ES":
+        return (await import("./es-ES")).default;
+      case "fr-FR":
+        return (await import("./fr-FR")).default;
+      case "hi-IN":
+        return (await import("./hi-IN")).default;
+      case "ja-JP":
+        return (await import("./ja-JP")).default;
+      case "ko-KR":
+        return (await import("./ko-KR")).default;
+      case "pt-BR":
+        return (await import("./pt-BR")).default;
+      case "zh-CN":
+        return (await import("./zh-CN")).default;
+      case "zh-TW":
+        return (await import("./zh-TW")).default;
+      default:
+        return null;
+    }
+  },
+} satisfies AgentNativeI18nCatalog;

package/corpus/templates/crm/app/lib/dashboard.ts

@@ -0,0 +1,13 @@
+import type { CrmDashboardPanelConfig } from "./types";
+
+export function dashboardDataPanelId(
+  panels: CrmDashboardPanelConfig[],
+  panel: CrmDashboardPanelConfig,
+): string {
+  return (
+    panels.find(
+      (candidate) =>
+        candidate.source === panel.source && candidate.query === panel.query,
+    )?.id ?? panel.id
+  );
+}

package/corpus/templates/crm/app/lib/navigation.ts

@@ -0,0 +1,17 @@
+import {
+  CRM_VIEW_PATHS,
+  crmNavigationPath,
+  viewFromPath,
+  type CrmNavigationTarget,
+  type CrmSettingsSection,
+  type CrmView,
+} from "../../shared/crm-navigation";
+
+export {
+  CRM_VIEW_PATHS,
+  crmNavigationPath,
+  viewFromPath,
+  type CrmNavigationTarget,
+  type CrmSettingsSection,
+  type CrmView,
+};

package/corpus/templates/crm/app/lib/tab-id.ts

@@ -0,0 +1 @@
+export const TAB_ID = `crm-${Math.random().toString(36).slice(2, 8)}`;

package/corpus/templates/crm/app/lib/types.ts

@@ -0,0 +1,172 @@
+export type CrmKind = "account" | "person" | "opportunity";
+
+export interface CrmRecordSummary {
+  id: string;
+  displayName: string;
+  kind: CrmKind;
+  subtitle?: string;
+  owner?: string;
+  stage?: string;
+  cadence?: string;
+  nextStep?: string;
+  updatedAt?: string;
+  fields?: Record<string, unknown>;
+}
+
+export interface CrmRecordDetail extends CrmRecordSummary {
+  provider?: "hubspot" | "salesforce" | string;
+  description?: string;
+  remoteRevision?: string;
+  activity?: Array<{
+    id: string;
+    title: string;
+    summary?: string;
+    occurredAt?: string;
+    actor?: string;
+  }>;
+  evidence?: Array<{
+    id: string;
+    label: string;
+    quote?: string;
+    url?: string;
+    observedAt?: string;
+  }>;
+  tasks?: Array<CrmTask>;
+  relatedRecords?: Array<{
+    id: string;
+    displayName: string;
+    kind: CrmKind;
+    relationshipType: string;
+    relationshipLabel?: string;
+    subtitle?: string;
+  }>;
+}
+
+export interface CrmTask {
+  id: string;
+  title: string;
+  status: "open" | "done" | "blocked" | string;
+  dueAt?: string;
+  recordId?: string;
+}
+
+export interface CrmSavedView {
+  id: string;
+  name: string;
+  description?: string;
+  kind?: CrmKind;
+  query?: string;
+  dataProgramId?: string;
+}
+
+export interface CrmOverview {
+  focus?: Array<{ label: string; value: string; detail?: string }>;
+  tasks?: CrmTask[];
+  records?: CrmRecordSummary[];
+}
+
+export interface CrmDashboardPanelConfig {
+  id: string;
+  title: string;
+  source: "program";
+  query: string;
+  chartType: "metric" | "bar" | "table";
+}
+
+export interface CrmDashboard {
+  id: string;
+  kind: "pipeline";
+  title: string;
+  config: { version: 1; panels: CrmDashboardPanelConfig[] };
+  updatedAt: string;
+}
+
+export function recordId(record: unknown): string | undefined {
+  if (!record || typeof record !== "object") return undefined;
+  const value = record as Record<string, unknown>;
+  const ref = value.ref as Record<string, unknown> | undefined;
+  return (
+    asText(value.id) ??
+    asText(value.recordId) ??
+    asText(ref?.localId) ??
+    asText(ref?.remoteId)
+  );
+}
+
+export function asText(value: unknown): string | undefined {
+  return typeof value === "string" && value.length ? value : undefined;
+}
+
+export function normalizeRecord(
+  record: unknown,
+  fallbackKind: CrmKind,
+): CrmRecordSummary | null {
+  if (!record || typeof record !== "object") return null;
+  const value = record as Record<string, unknown>;
+  const id = recordId(value);
+  if (!id) return null;
+  const fields = isObject(value.fields) ? value.fields : undefined;
+  const ref = isObject(value.ref) ? value.ref : undefined;
+  const kind = asKind(value.kind) ?? asKind(ref?.kind) ?? fallbackKind;
+  return {
+    id,
+    displayName: asText(value.displayName) ?? asText(value.name) ?? id,
+    kind,
+    subtitle:
+      asText(value.subtitle) ?? asText(fields?.domain) ?? asText(fields?.email),
+    owner: asText(value.owner) ?? asText(fields?.owner),
+    stage: asText(value.stage) ?? asText(fields?.stage),
+    cadence: asText(value.cadence) ?? asText(fields?.cadence),
+    nextStep: asText(value.nextStep) ?? asText(fields?.nextStep),
+    updatedAt: asText(value.updatedAt) ?? asText(value.remoteUpdatedAt),
+    fields,
+  };
+}
+
+export function normalizeRecords(
+  data: unknown,
+  kind: CrmKind,
+): CrmRecordSummary[] {
+  const values = Array.isArray(data)
+    ? data
+    : isObject(data) && Array.isArray(data.records)
+      ? data.records
+      : [];
+  return values.flatMap((value) => {
+    const record = normalizeRecord(value, kind);
+    return record ? [record] : [];
+  });
+}
+
+export function normalizeTasks(data: unknown): CrmTask[] {
+  const values = Array.isArray(data)
+    ? data
+    : isObject(data) && Array.isArray(data.tasks)
+      ? data.tasks
+      : [];
+  return values.flatMap((value) => {
+    if (!isObject(value)) return [];
+    const id = asText(value.id) ?? asText(value.taskId);
+    const title = asText(value.title) ?? asText(value.name);
+    if (!id || !title) return [];
+    return [
+      {
+        id,
+        title,
+        status: asText(value.status) ?? "open",
+        dueAt: asText(value.dueAt),
+        recordId: asText(value.recordId),
+      },
+    ];
+  });
+}
+
+function asKind(value: unknown): CrmKind | undefined {
+  return value === "account" || value === "person" || value === "opportunity"
+    ? value
+    : undefined;
+}
+
+function isObject(value: unknown): value is Record<string, unknown> {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}

package/corpus/templates/crm/app/lib/utils.ts

@@ -0,0 +1 @@
+export { cn } from "@agent-native/toolkit/utils";

package/corpus/templates/crm/app/root.tsx

@@ -0,0 +1,93 @@
+import { configureTracking } from "@agent-native/core/client/analytics";
+import { appPath } from "@agent-native/core/client/api-path";
+import {
+  AppProviders,
+  createAgentNativeQueryClient,
+  useDbSync,
+} from "@agent-native/core/client/hooks";
+import { getLocaleInitScript } from "@agent-native/core/client/i18n";
+import { getThemeInitScript } from "@agent-native/core/client/ui";
+import { useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
+import type { LinksFunction } from "react-router";
+
+import { CrmCommandMenu } from "@/components/layout/CrmCommandMenu";
+import { CrmLayout } from "@/components/layout/CrmLayout";
+import { AppToolkitProvider } from "@/components/ui/toolkit-provider";
+import { useNavigationState } from "@/hooks/use-navigation-state";
+import { i18nCatalog } from "@/i18n";
+import { TAB_ID } from "@/lib/tab-id";
+
+import stylesheet from "./global.css?url";
+
+configureTracking({
+  getDefaultProps: (_name, properties) => ({
+    ...properties,
+    app: "crm",
+    template: "crm",
+  }),
+});
+
+export const links: LinksFunction = () => [
+  { rel: "stylesheet", href: stylesheet },
+];
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <meta charSet="utf-8" />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
+        />
+        <script
+          data-agent-native-theme-init
+          suppressHydrationWarning
+          dangerouslySetInnerHTML={{ __html: getThemeInitScript() }}
+        />
+        <script
+          data-agent-native-locale-init
+          suppressHydrationWarning
+          dangerouslySetInnerHTML={{ __html: getLocaleInitScript() }}
+        />
+        <link rel="manifest" href={appPath("/manifest.json")} />
+        <meta name="theme-color" content="#71717A" />
+        <link rel="icon" type="image/svg+xml" href={appPath("/favicon.svg")} />
+        <link rel="apple-touch-icon" href={appPath("/icon-180.svg")} />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+function SyncBridge() {
+  const queryClient = useQueryClient();
+  useNavigationState();
+  useDbSync({ queryClient, ignoreSource: TAB_ID });
+  return null;
+}
+
+export default function Root() {
+  const [queryClient] = useState(() => createAgentNativeQueryClient());
+  return (
+    <AppToolkitProvider>
+      <AppProviders queryClient={queryClient} i18n={{ catalog: i18nCatalog }}>
+        <SyncBridge />
+        <CrmCommandMenu />
+        <CrmLayout>
+          <Outlet />
+        </CrmLayout>
+      </AppProviders>
+    </AppToolkitProvider>
+  );
+}
+
+export { ErrorBoundary } from "@agent-native/core/client/ui";

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

@@ -0,0 +1,26 @@
+import { useActionQuery } from "@agent-native/core/client/hooks";
+
+import { PageHeader } from "@/components/crm/Surface";
+import { WorkOverview } from "@/components/crm/WorkOverview";
+import type { CrmOverview } from "@/lib/types";
+
+export function meta() {
+  return [{ title: "My work · CRM" }];
+}
+
+export default function WorkRoute() {
+  const overview = useActionQuery<CrmOverview>(
+    "get-crm-overview" as never,
+    {} as never,
+  );
+  return (
+    <>
+      <PageHeader
+        eyebrow="CRM"
+        title="My work"
+        description="A calm view of follow-up work and current relationship context."
+      />
+      <WorkOverview overview={overview.data} isLoading={overview.isLoading} />
+    </>
+  );
+}

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

@@ -0,0 +1,41 @@
+import { useActionQuery } from "@agent-native/core/client/hooks";
+import { useSearchParams } from "react-router";
+
+import { CreateCrmRecordDialog } from "@/components/crm/CreateCrmRecordDialog";
+import { RecordGrid } from "@/components/crm/RecordGrid";
+import { SavedViewDataProgram } from "@/components/crm/SavedViewDataProgram";
+import { PageHeader } from "@/components/crm/Surface";
+import { normalizeRecords } from "@/lib/types";
+
+export function meta() {
+  return [{ title: "Accounts · CRM" }];
+}
+export default function AccountsRoute() {
+  const [searchParams] = useSearchParams();
+  const viewId = searchParams.get("view") ?? undefined;
+  const query = useActionQuery<unknown>(
+    "list-crm-records" as never,
+    { kind: "account", viewId } as never,
+  );
+  return (
+    <>
+      <PageHeader
+        eyebrow="Records"
+        title="Accounts"
+        description={
+          viewId
+            ? "Accounts matching this saved view."
+            : "Accounts from your Native SQL workspace and connected CRM mirrors."
+        }
+        actions={<CreateCrmRecordDialog kind="account" />}
+      />
+      <SavedViewDataProgram data={query.data} />
+      <RecordGrid
+        kind="account"
+        records={normalizeRecords(query.data, "account")}
+        isLoading={query.isLoading}
+        emptyTitle="No accounts yet"
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,5 @@
+import { AgentTabsPage } from "@agent-native/core/client/agent-chat";
+
+export default function AgentRoute() {
+  return <AgentTabsPage appName="CRM" />;
+}

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

@@ -0,0 +1,53 @@
+import {
+  AgentChatSurface,
+  markAgentChatHomeHandoff,
+} from "@agent-native/core/client/agent-chat";
+import { useEffect } from "react";
+
+import { TAB_ID } from "@/lib/tab-id";
+
+export function meta() {
+  return [{ title: "Ask CRM" }];
+}
+
+export default function AskCrmRoute() {
+  useEffect(() => {
+    const onChatRunning = (event: Event) => {
+      if ((event as CustomEvent<{ isRunning?: boolean }>).detail?.isRunning)
+        markAgentChatHomeHandoff("crm");
+    };
+    window.addEventListener("agentNative.chatRunning", onChatRunning);
+    return () =>
+      window.removeEventListener("agentNative.chatRunning", onChatRunning);
+  }, []);
+  return (
+    <div className="flex h-full min-h-0 flex-col bg-background">
+      <AgentChatSurface
+        mode="page"
+        chatViewTransition
+        className="crm-chat-panel"
+        storageKey="crm"
+        browserTabId={TAB_ID}
+        defaultMode="chat"
+        showHeader={false}
+        showTabBar={false}
+        dynamicSuggestions={false}
+        suggestions={[]}
+        emptyStateText="Ask CRM"
+        emptyStateDisplay="hidden"
+        centerComposerWhenEmpty
+        composerLayoutVariant="hero"
+        composerPlaceholder="Ask about your CRM"
+        composerSlot={
+          <div className="crm-chat-intro">
+            <h1>Ask CRM</h1>
+            <p>
+              Explore permitted account context, follow-up work, and evidence
+              across Native SQL and connected records.
+            </p>
+          </div>
+        }
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,118 @@
+import {
+  useActionMutation,
+  useActionQuery,
+} from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+import { IconRefresh } from "@tabler/icons-react";
+import { useMemo } from "react";
+import { useNavigate, useSearchParams } from "react-router";
+import { toast } from "sonner";
+
+import { CrmDashboardPanel } from "@/components/crm/CrmDashboardPanel";
+import { PageHeader, SetupEmptyState } from "@/components/crm/Surface";
+import { Button } from "@/components/ui/button";
+import { crmDashboardMetaTitle } from "@/i18n/en-US";
+import { dashboardDataPanelId } from "@/lib/dashboard";
+import type { CrmDashboard } from "@/lib/types";
+
+export function meta() {
+  return [{ title: crmDashboardMetaTitle }];
+}
+
+export default function DashboardRoute() {
+  const t = useT();
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const dashboards = useActionQuery<CrmDashboard[]>(
+    "list-crm-dashboards" as never,
+    {} as never,
+  );
+  const install = useActionMutation<
+    { dashboardId: string },
+    Record<string, never>
+  >("install-crm-pipeline-dashboard" as never);
+  const dashboard = useMemo(() => {
+    const requested = searchParams.get("id");
+    return (
+      dashboards.data?.find((item) => item.id === requested) ??
+      dashboards.data?.find((item) => item.kind === "pipeline")
+    );
+  }, [dashboards.data, searchParams]);
+
+  async function installDashboard() {
+    try {
+      const result = await install.mutateAsync({});
+      navigate(`/dashboard?id=${encodeURIComponent(result.dashboardId)}`, {
+        replace: true,
+      });
+      toast.success(t("dashboard.ready"));
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : t("dashboard.installFailed"),
+      );
+    }
+  }
+
+  if (dashboards.isLoading) {
+    return (
+      <PageHeader
+        eyebrow="CRM"
+        title={t("dashboard.pipeline")}
+        description={t("dashboard.loadingDescription")}
+      />
+    );
+  }
+
+  if (!dashboard) {
+    return (
+      <>
+        <PageHeader
+          eyebrow="CRM"
+          title={t("dashboard.pipeline")}
+          description={t("dashboard.emptyDescription")}
+        />
+        <SetupEmptyState
+          title={t("dashboard.installTitle")}
+          description={t("dashboard.installDescription")}
+          onSync={installDashboard}
+          isSyncing={install.isPending}
+          actionLabel={t("dashboard.installAction")}
+        />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <PageHeader
+        eyebrow="CRM"
+        title={dashboard.title}
+        description={t("dashboard.liveDescription")}
+        actions={
+          <Button
+            variant="outline"
+            size="sm"
+            className="gap-2"
+            onClick={installDashboard}
+            disabled={install.isPending}
+          >
+            <IconRefresh className="size-4" />
+            {install.isPending
+              ? t("dashboard.updating")
+              : t("dashboard.updatePack")}
+          </Button>
+        }
+      />
+      <div className="grid gap-4 p-5 sm:grid-cols-2 sm:p-7 xl:grid-cols-3">
+        {dashboard.config.panels.map((panel) => (
+          <CrmDashboardPanel
+            key={panel.id}
+            dashboardId={dashboard.id}
+            panel={panel}
+            dataPanelId={dashboardDataPanelId(dashboard.config.panels, panel)}
+          />
+        ))}
+      </div>
+    </>
+  );
+}