@agent-native/core 0.114.16 → 0.115.3

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

@@ -0,0 +1,180 @@
+import { Badge } from "@agent-native/toolkit/ui/badge";
+import { Button } from "@agent-native/toolkit/ui/button";
+import { IconArrowRight, IconCheck, IconListCheck } from "@tabler/icons-react";
+import { Link } from "react-router";
+
+import { LoadingRows, SetupEmptyState } from "@/components/crm/Surface";
+import {
+  normalizeRecords,
+  normalizeTasks,
+  type CrmOverview,
+} from "@/lib/types";
+
+export function WorkOverview({
+  overview,
+  isLoading,
+}: {
+  overview: CrmOverview | undefined;
+  isLoading: boolean;
+}) {
+  const tasks = normalizeTasks(overview?.tasks);
+  const records = normalizeRecords(overview?.records, "account");
+  const focus = overview?.focus ?? [];
+
+  if (isLoading) return <LoadingRows rows={7} />;
+  if (!overview) return <SetupEmptyState />;
+
+  return (
+    <div className="mx-auto grid max-w-6xl gap-8 p-5 sm:p-7 xl:grid-cols-[minmax(0,1fr)_320px]">
+      <div className="min-w-0">
+        <section>
+          <div className="flex items-center justify-between gap-3">
+            <div>
+              <h2 className="text-sm font-semibold">Today’s work</h2>
+              <p className="mt-1 text-sm text-muted-foreground">
+                A focused queue across your CRM workspace.
+              </p>
+            </div>
+            <Button
+              asChild
+              variant="ghost"
+              size="sm"
+              className="gap-1.5 text-muted-foreground"
+            >
+              <Link to="/views">
+                Saved views <IconArrowRight className="size-3.5" />
+              </Link>
+            </Button>
+          </div>
+          <div className="mt-3 divide-y divide-border rounded-lg border border-border/70 bg-card">
+            {tasks.length ? (
+              tasks.map((task) => (
+                <div
+                  key={task.id}
+                  className="flex min-h-14 items-center gap-3 px-3.5 py-2.5"
+                >
+                  <span className="grid size-5 shrink-0 place-items-center rounded-full border border-border text-muted-foreground">
+                    <IconCheck className="size-3" />
+                  </span>
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm font-medium">{task.title}</p>
+                    <p className="mt-0.5 text-xs text-muted-foreground">
+                      {task.dueAt
+                        ? `Due ${formatDate(task.dueAt)}`
+                        : "No due date"}
+                    </p>
+                  </div>
+                  {task.recordId ? (
+                    <Button asChild variant="ghost" size="sm">
+                      <Link
+                        to={`/records/${encodeURIComponent(task.recordId)}`}
+                      >
+                        Open
+                      </Link>
+                    </Button>
+                  ) : null}
+                </div>
+              ))
+            ) : (
+              <QuietEmpty
+                icon={<IconListCheck className="size-4" />}
+                text="No open CRM tasks right now."
+              />
+            )}
+          </div>
+        </section>
+
+        <section className="mt-8">
+          <div className="flex items-center justify-between">
+            <h2 className="text-sm font-semibold">Recently active</h2>
+            <Button
+              asChild
+              variant="ghost"
+              size="sm"
+              className="gap-1.5 text-muted-foreground"
+            >
+              <Link to="/accounts">
+                Accounts <IconArrowRight className="size-3.5" />
+              </Link>
+            </Button>
+          </div>
+          <div className="mt-3 divide-y divide-border rounded-lg border border-border/70 bg-card">
+            {records.length ? (
+              records.slice(0, 5).map((record) => (
+                <Link
+                  key={record.id}
+                  to={`/records/${encodeURIComponent(record.id)}`}
+                  className="flex items-center gap-3 px-3.5 py-3 transition-colors hover:bg-muted/50"
+                >
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm font-medium">
+                      {record.displayName}
+                    </p>
+                    <p className="mt-0.5 truncate text-xs text-muted-foreground">
+                      {record.subtitle ?? record.owner ?? "CRM record"}
+                    </p>
+                  </div>
+                  {record.stage ? (
+                    <Badge variant="secondary" className="font-normal">
+                      {record.stage}
+                    </Badge>
+                  ) : null}
+                </Link>
+              ))
+            ) : (
+              <QuietEmpty text="Recent activity will appear as CRM records are added or synced." />
+            )}
+          </div>
+        </section>
+      </div>
+
+      <aside className="self-start border-t border-border/70 pt-5 xl:border-l xl:border-t-0 xl:pl-7 xl:pt-0">
+        <h2 className="text-sm font-semibold">Focus</h2>
+        <p className="mt-1 text-sm text-muted-foreground">
+          Signals worth deciding on.
+        </p>
+        <div className="mt-4 grid gap-3">
+          {focus.length ? (
+            focus.map((item) => (
+              <div
+                key={item.label}
+                className="border-b border-border/70 pb-3 last:border-0"
+              >
+                <p className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">
+                  {item.label}
+                </p>
+                <p className="mt-1 text-sm font-medium">{item.value}</p>
+                {item.detail ? (
+                  <p className="mt-1 text-xs leading-5 text-muted-foreground">
+                    {item.detail}
+                  </p>
+                ) : null}
+              </div>
+            ))
+          ) : (
+            <p className="text-sm leading-6 text-muted-foreground">
+              CRM will surface follow-up signals as records and interactions
+              become available.
+            </p>
+          )}
+        </div>
+      </aside>
+    </div>
+  );
+}
+
+function QuietEmpty({ icon, text }: { icon?: React.ReactNode; text: string }) {
+  return (
+    <div className="flex min-h-20 items-center justify-center gap-2 px-4 text-sm text-muted-foreground">
+      {icon}
+      {text}
+    </div>
+  );
+}
+
+function formatDate(value: string) {
+  const date = new Date(value);
+  return Number.isNaN(date.valueOf())
+    ? value
+    : date.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+}

package/corpus/templates/crm/app/components/layout/CrmLayout.tsx

@@ -0,0 +1,106 @@
+import {
+  AgentSidebar,
+  AgentToggleButton,
+  focusAgentChat,
+  navigateWithAgentChatViewTransition,
+  useAgentChatHomeHandoff,
+} from "@agent-native/core/client/agent-chat";
+import { Button } from "@agent-native/toolkit/ui/button";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetTitle,
+} from "@agent-native/toolkit/ui/sheet";
+import { IconMenu2 } from "@tabler/icons-react";
+import { useEffect, useState } from "react";
+import { useLocation, useNavigate } from "react-router";
+
+import { CrmSidebar } from "@/components/layout/CrmSidebar";
+import { TAB_ID } from "@/lib/tab-id";
+
+export function CrmLayout({ children }: { children: React.ReactNode }) {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const isAskRoute = location.pathname === "/ask";
+  const handoffActive = useAgentChatHomeHandoff({
+    storageKey: "crm",
+    activePath: location.pathname,
+    enabled: !isAskRoute,
+  });
+
+  useEffect(() => setMobileOpen(false), [location.pathname]);
+
+  const shell = (
+    <div className="flex h-full min-w-0 flex-1 flex-col overflow-hidden">
+      <header className="flex h-12 shrink-0 items-center gap-2 border-b border-border/70 px-3 md:hidden">
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          onClick={() => setMobileOpen(true)}
+          aria-label="Open CRM navigation"
+        >
+          <IconMenu2 className="size-4" />
+        </Button>
+        <p className="text-sm font-semibold">CRM</p>
+        {!isAskRoute ? <AgentToggleButton className="ms-auto" /> : null}
+      </header>
+      <main className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
+        {children}
+      </main>
+    </div>
+  );
+
+  const navigation = (
+    <>
+      <div className="hidden md:block">
+        <CrmSidebar />
+      </div>
+      <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
+        <SheetContent side="left" className="w-60 p-0">
+          <SheetTitle className="sr-only">CRM navigation</SheetTitle>
+          <SheetDescription className="sr-only">
+            Navigate CRM records and shared agent work.
+          </SheetDescription>
+          <CrmSidebar onNavigate={() => setMobileOpen(false)} />
+        </SheetContent>
+      </Sheet>
+    </>
+  );
+
+  if (isAskRoute)
+    return (
+      <div className="flex h-screen overflow-hidden bg-background text-foreground">
+        {navigation}
+        {shell}
+      </div>
+    );
+
+  return (
+    <div className="flex h-screen overflow-hidden bg-background text-foreground">
+      {navigation}
+      <AgentSidebar
+        position="right"
+        storageKey="crm"
+        browserTabId={TAB_ID}
+        chatViewTransition
+        openOnChatRunning={handoffActive}
+        onFullscreenRequest={() => {
+          focusAgentChat();
+          navigateWithAgentChatViewTransition(navigate, "/ask");
+        }}
+        emptyStateText="Ask CRM about your connected records"
+        suggestions={[
+          "What needs follow-up?",
+          "Summarize this account",
+          "Which opportunities need attention?",
+        ]}
+        agentPageHref="/agent"
+      >
+        {shell}
+      </AgentSidebar>
+    </div>
+  );
+}

package/corpus/templates/crm/app/components/layout/CrmSidebar.tsx

@@ -0,0 +1,84 @@
+import { Button } from "@agent-native/toolkit/ui/button";
+import {
+  IconBuilding,
+  IconChecklist,
+  IconLayoutDashboard,
+  IconChartBar,
+  IconMessageCircle,
+  IconPencilCheck,
+  IconRoute,
+  IconSettings,
+  IconUsers,
+  IconViewfinder,
+} from "@tabler/icons-react";
+import { Link, NavLink } from "react-router";
+
+import { cn } from "@/lib/utils";
+
+const navigation = [
+  { to: "/", label: "My work", icon: IconLayoutDashboard, end: true },
+  { to: "/dashboard", label: "Pipeline", icon: IconChartBar },
+  { to: "/accounts", label: "Accounts", icon: IconBuilding },
+  { to: "/people", label: "People", icon: IconUsers },
+  { to: "/opportunities", label: "Opportunities", icon: IconRoute },
+  { to: "/tasks", label: "Tasks", icon: IconChecklist },
+  { to: "/proposals", label: "Proposals", icon: IconPencilCheck },
+  { to: "/views", label: "Saved views", icon: IconViewfinder },
+];
+
+export function CrmSidebar({ onNavigate }: { onNavigate?: () => void }) {
+  return (
+    <nav className="flex h-full w-56 flex-col border-r border-sidebar-border bg-sidebar px-2 py-3 text-sidebar-foreground">
+      <div className="flex h-8 items-center px-2 text-sm font-semibold tracking-tight text-sidebar-primary">
+        CRM
+      </div>
+      <div className="mt-4 grid gap-0.5">
+        {navigation.map((item) => {
+          const Icon = item.icon;
+          return (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              end={item.end}
+              onClick={onNavigate}
+              className={({ isActive }) =>
+                cn(
+                  "flex h-8 items-center gap-2 rounded-md px-2 text-sm transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+                  isActive &&
+                    "bg-sidebar-accent font-medium text-sidebar-accent-foreground",
+                )
+              }
+            >
+              <Icon className="size-4" />
+              {item.label}
+            </NavLink>
+          );
+        })}
+      </div>
+      <div className="mt-auto grid gap-1 border-t border-sidebar-border pt-3">
+        <Button
+          asChild
+          variant="ghost"
+          size="sm"
+          className="justify-start gap-2 text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+        >
+          <NavLink to="/ask" onClick={onNavigate}>
+            <IconMessageCircle className="size-4" />
+            Ask CRM
+          </NavLink>
+        </Button>
+        <Button
+          asChild
+          variant="ghost"
+          size="sm"
+          className="justify-start gap-2 text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+        >
+          <Link to="/settings/connections" onClick={onNavigate}>
+            <IconSettings className="size-4" />
+            Connections
+          </Link>
+        </Button>
+      </div>
+    </nav>
+  );
+}

package/corpus/templates/crm/app/entry.client.tsx

@@ -0,0 +1,16 @@
+import { appBasePath } from "@agent-native/core/client/api-path";
+import { hydrateRoot } from "react-dom/client";
+import { HydratedRouter } from "react-router/dom";
+
+const basePath = appBasePath();
+const pathname = window.location.pathname;
+const routerBasePath =
+  basePath && (pathname === basePath || pathname.startsWith(`${basePath}/`))
+    ? basePath
+    : "";
+const context = (
+  window as Window & { __reactRouterContext?: { basename?: string } }
+).__reactRouterContext;
+if (context) context.basename = routerBasePath;
+
+hydrateRoot(document, <HydratedRouter />);

package/corpus/templates/crm/app/entry.server.tsx

@@ -0,0 +1,10 @@
+import {
+  createDocumentRequestHandler,
+  streamTimeout,
+} from "@agent-native/core/server/entry-server";
+import { ServerRouter } from "react-router";
+
+const handleDocumentRequest = createDocumentRequestHandler(ServerRouter);
+
+export { streamTimeout };
+export default handleDocumentRequest;

package/corpus/templates/crm/app/global.css

@@ -0,0 +1,167 @@
+@import "@fontsource-variable/inter";
+@import "tailwindcss";
+@import "@agent-native/core/styles/agent-native.css";
+@import "@agent-native/toolkit/styles.css";
+
+@source "./**/*.{ts,tsx}";
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 0 0% 10%;
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 10%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 10%;
+  --primary: 0 0% 15%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 0 0% 95%;
+  --secondary-foreground: 0 0% 15%;
+  --muted: 0 0% 95%;
+  --muted-foreground: 0 0% 45%;
+  --accent: 0 0% 95%;
+  --accent-foreground: 0 0% 15%;
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 0 0% 90%;
+  --input: 0 0% 90%;
+  --ring: 0 0% 40%;
+  --chart-1: 0 0% 20%;
+  --chart-2: 155 36% 42%;
+  --chart-3: 32 55% 50%;
+  --chart-4: 270 25% 55%;
+  --chart-5: 350 38% 55%;
+  --chart-6: 190 25% 48%;
+  --radius: 0.5rem;
+  --sidebar-background: 0 0% 97%;
+  --sidebar-foreground: 0 0% 45%;
+  --sidebar-primary: 0 0% 15%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 0 0% 95%;
+  --sidebar-accent-foreground: 0 0% 15%;
+  --sidebar-border: 0 0% 90%;
+  --sidebar-ring: 0 0% 40%;
+}
+
+.dark {
+  --background: 0 0% 13%;
+  --foreground: 0 0% 90%;
+  --card: 0 0% 15%;
+  --card-foreground: 0 0% 90%;
+  --popover: 0 0% 15%;
+  --popover-foreground: 0 0% 90%;
+  --primary: 0 0% 75%;
+  --primary-foreground: 0 0% 10%;
+  --secondary: 0 0% 18%;
+  --secondary-foreground: 0 0% 90%;
+  --muted: 0 0% 16%;
+  --muted-foreground: 0 0% 60%;
+  --accent: 0 0% 18%;
+  --accent-foreground: 0 0% 96%;
+  --destructive: 0 63% 51%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 0 0% 24%;
+  --input: 0 0% 24%;
+  --ring: 0 0% 60%;
+  --chart-1: 0 0% 78%;
+  --chart-2: 155 32% 58%;
+  --chart-3: 32 50% 62%;
+  --chart-4: 270 28% 68%;
+  --chart-5: 350 38% 66%;
+  --chart-6: 190 28% 62%;
+  --sidebar-background: 0 0% 10%;
+  --sidebar-foreground: 0 0% 60%;
+  --sidebar-primary: 0 0% 75%;
+  --sidebar-primary-foreground: 0 0% 10%;
+  --sidebar-accent: 0 0% 16%;
+  --sidebar-accent-foreground: 0 0% 90%;
+  --sidebar-border: 0 0% 20%;
+  --sidebar-ring: 0 0% 60%;
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  html,
+  body {
+    @apply bg-background text-foreground;
+    font-family: "Inter Variable", Inter, sans-serif;
+    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  }
+}
+
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  background: hsl(var(--border));
+}
+
+.crm-chat-intro {
+  display: none;
+}
+.crm-chat-panel [data-agent-empty-state="centered"] {
+  justify-content: center;
+  padding-bottom: clamp(4rem, 12vh, 8rem);
+}
+.crm-chat-panel [data-agent-empty-state="centered"] .crm-chat-intro {
+  display: grid;
+  width: 100%;
+  max-width: min(670px, 90%);
+  gap: 0.5rem;
+  margin: 0 auto 1rem;
+  text-align: center;
+}
+.crm-chat-intro h1 {
+  margin: 0;
+  font-size: clamp(1.75rem, 2.5vw, 2.5rem);
+  font-weight: 600;
+  letter-spacing: -0.03em;
+  line-height: 1.1;
+}
+.crm-chat-intro p {
+  margin: 0;
+  color: hsl(var(--muted-foreground));
+  font-size: 0.9375rem;
+  line-height: 1.5;
+}
+.crm-chat-panel [data-agent-empty-state="centered"] .agent-chat-scroll {
+  flex: 0 0 auto;
+  min-height: 0;
+  overflow: visible;
+}
+.crm-chat-panel [data-agent-empty-state="centered"] .agent-composer-area {
+  width: 100%;
+  max-width: min(670px, 90%);
+  padding: 0;
+}
+.crm-chat-panel [data-agent-empty-state="centered"] .agent-composer-root {
+  min-height: 7.5rem;
+  border-color: hsl(var(--border));
+  border-radius: 1rem;
+  background: hsl(var(--card));
+  box-shadow: none;
+}
+.crm-chat-panel
+  [data-agent-empty-state="centered"]
+  .agent-composer-prosemirror {
+  min-height: 4.75rem;
+  font-size: 1rem;
+  line-height: 1.625rem;
+}
+
+@media (max-width: 767px) {
+  .crm-chat-panel [data-agent-empty-state="centered"] {
+    padding: 1rem;
+    padding-bottom: 5rem;
+  }
+  .crm-chat-panel [data-agent-empty-state="centered"] .agent-composer-area,
+  .crm-chat-panel [data-agent-empty-state="centered"] .crm-chat-intro {
+    max-width: 100%;
+  }
+}

package/corpus/templates/crm/app/hooks/use-navigation-state.ts

@@ -0,0 +1,60 @@
+import { appPath } from "@agent-native/core/client/api-path";
+import { useAgentRouteState } from "@agent-native/core/client/navigation";
+
+import { pathForView, viewFromPath, type CrmView } from "@/lib/navigation";
+import { TAB_ID } from "@/lib/tab-id";
+
+export interface CrmNavigationState {
+  view: CrmView;
+  path: string;
+  recordId?: string;
+  viewId?: string;
+  query?: string;
+  settingsSection?: "intelligence";
+  dashboardId?: string;
+}
+
+export interface CrmNavigateCommand {
+  view?: CrmView;
+  recordId?: string;
+  viewId?: string;
+  query?: string;
+  settingsSection?: "intelligence";
+  dashboardId?: string;
+}
+
+export function useNavigationState() {
+  useAgentRouteState<CrmNavigationState, CrmNavigateCommand>({
+    browserTabId: TAB_ID,
+    requestSource: TAB_ID,
+    getNavigationState: ({ pathname, search }) => {
+      const params = new URLSearchParams(search);
+      const recordMatch = pathname.match(/^\/records\/([^/?#]+)/);
+      const settingsMatch = pathname.match(/^\/settings\/([^/?#]+)/);
+      return {
+        view: viewFromPath(pathname),
+        path: appPath(`${pathname}${search}`),
+        recordId: recordMatch?.[1]
+          ? decodeURIComponent(recordMatch[1])
+          : undefined,
+        viewId: params.get("view") ?? undefined,
+        dashboardId: params.get("id") ?? undefined,
+        query: params.get("q") ?? undefined,
+        settingsSection:
+          settingsMatch?.[1] === "intelligence" ? "intelligence" : undefined,
+      };
+    },
+    getCommandPath: (command) => {
+      const params = new URLSearchParams();
+      if (command.viewId) params.set("view", command.viewId);
+      if (command.dashboardId) params.set("id", command.dashboardId);
+      if (command.query) params.set("q", command.query);
+      const path = pathForView(
+        command.view,
+        command.recordId,
+        command.settingsSection,
+      );
+      return `${path}${params.size ? `?${params}` : ""}`;
+    },
+  });
+}