@agent-native/core 0.117.2 → 0.118.1

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

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

@@ -1,112 +0,0 @@
-import {
-  AgentSidebar,
-  AgentToggleButton,
-  focusAgentChat,
-  navigateWithAgentChatViewTransition,
-  useAgentChatHomeHandoff,
-  useAgentChatHomeHandoffLinks,
-} 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,
-  });
-  useAgentChatHomeHandoffLinks({
-    storageKey: "crm",
-    chatPath: "/ask",
-    requireActiveHandoff: false,
-  });
-
-  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

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

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

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

@@ -1,167 +0,0 @@
-@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 84% 60%;
-  --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

@@ -1,60 +0,0 @@
-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}` : ""}`;
-    },
-  });
-}