@agent-native/core 0.123.0 → 0.123.2

package/corpus/templates/crm/app/components/layout/sidebar-lists.ts

@@ -0,0 +1,109 @@
+/**
+ * Shapes the sidebar and command menu need from `list-crm-lists` and
+ * `list-crm-saved-views`. Both actions are read defensively because the wave-1
+ * contract widened saved views (`viewKind`/`targetKind`/`targetId`) while the
+ * older `kind` field is still in flight.
+ */
+
+export interface CrmSidebarList {
+  id: string;
+  name: string;
+  parentObjectType?: string;
+}
+
+export interface CrmSidebarSavedView {
+  id: string;
+  name: string;
+  viewKind: "table" | "board";
+  targetKind: "object" | "list";
+  targetId?: string;
+  pinned: boolean;
+}
+
+const OBJECT_ROUTES: Record<string, string> = {
+  account: "/accounts",
+  accounts: "/accounts",
+  person: "/people",
+  people: "/people",
+  contact: "/people",
+  opportunity: "/opportunities",
+  opportunities: "/opportunities",
+  deal: "/opportunities",
+};
+
+function rowsOf(payload: unknown, ...keys: string[]): unknown[] {
+  if (Array.isArray(payload)) return payload;
+  if (!payload || typeof payload !== "object") return [];
+  for (const key of keys) {
+    const value = (payload as Record<string, unknown>)[key];
+    if (Array.isArray(value)) return value;
+  }
+  return [];
+}
+
+function text(value: unknown): string | undefined {
+  return typeof value === "string" && value.trim().length > 0
+    ? value.trim()
+    : undefined;
+}
+
+export function normalizeCrmLists(payload: unknown): CrmSidebarList[] {
+  return rowsOf(payload, "lists", "items", "rows").flatMap((row) => {
+    if (!row || typeof row !== "object") return [];
+    const record = row as Record<string, unknown>;
+    const id = text(record.id);
+    const name = text(record.name);
+    if (!id || !name) return [];
+    if (record.archived === true) return [];
+    return [
+      {
+        id,
+        name,
+        ...(text(record.parentObjectType)
+          ? { parentObjectType: text(record.parentObjectType) as string }
+          : {}),
+      },
+    ];
+  });
+}
+
+export function normalizeCrmSavedViews(
+  payload: unknown,
+): CrmSidebarSavedView[] {
+  return rowsOf(payload, "views", "savedViews", "items", "rows").flatMap(
+    (row) => {
+      if (!row || typeof row !== "object") return [];
+      const record = row as Record<string, unknown>;
+      const id = text(record.id);
+      const name = text(record.name);
+      if (!id || !name) return [];
+
+      const targetKind = record.targetKind === "list" ? "list" : "object";
+      const targetId =
+        text(record.targetId) ??
+        (targetKind === "object" ? text(record.kind) : undefined);
+
+      return [
+        {
+          id,
+          name,
+          viewKind: record.viewKind === "board" ? "board" : "table",
+          targetKind,
+          ...(targetId ? { targetId } : {}),
+          pinned: record.pinned === true,
+        } satisfies CrmSidebarSavedView,
+      ];
+    },
+  );
+}
+
+export function savedViewHref(view: CrmSidebarSavedView): string {
+  const query = `?view=${encodeURIComponent(view.id)}`;
+  if (view.targetKind === "list" && view.targetId) {
+    return `/lists/${encodeURIComponent(view.targetId)}${query}`;
+  }
+  const objectRoute = view.targetId
+    ? OBJECT_ROUTES[view.targetId.toLowerCase()]
+    : undefined;
+  return `${objectRoute ?? "/views"}${query}`;
+}

package/corpus/templates/crm/app/components/ui/alert-dialog.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/alert-dialog";

package/corpus/templates/crm/app/components/ui/badge.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/badge";

package/corpus/templates/crm/app/components/ui/button.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/button";

package/corpus/templates/crm/app/components/ui/card.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/card";

package/corpus/templates/crm/app/components/ui/checkbox.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/checkbox";

package/corpus/templates/crm/app/components/ui/dialog.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/dialog";

package/corpus/templates/crm/app/components/ui/dropdown-menu.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/dropdown-menu";

package/corpus/templates/crm/app/components/ui/hover-card.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/hover-card";

package/corpus/templates/crm/app/components/ui/input.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/input";

package/corpus/templates/crm/app/components/ui/label.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/label";

package/corpus/templates/crm/app/components/ui/popover.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/popover";

package/corpus/templates/crm/app/components/ui/select.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/select";

package/corpus/templates/crm/app/components/ui/sheet.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/sheet";

package/corpus/templates/crm/app/components/ui/skeleton.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/skeleton";

package/corpus/templates/crm/app/components/ui/switch.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/switch";

package/corpus/templates/crm/app/components/ui/table.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/table";

package/corpus/templates/crm/app/components/ui/tabs.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/tabs";

package/corpus/templates/crm/app/components/ui/textarea.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/textarea";

package/corpus/templates/crm/app/components/ui/toolkit-provider.tsx

@@ -0,0 +1,17 @@
+import { ToolkitProvider, type ToolkitComponents } from "@agent-native/toolkit";
+import type { ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+import { designSystem } from "@/design-system";
+
+const components: ToolkitComponents = {
+  Button: Button as ToolkitComponents["Button"],
+};
+
+export function AppToolkitProvider({ children }: { children: ReactNode }) {
+  return (
+    <ToolkitProvider components={components} designSystem={designSystem}>
+      {children}
+    </ToolkitProvider>
+  );
+}

package/corpus/templates/crm/app/components/ui/tooltip.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/tooltip";

package/corpus/templates/crm/app/design-system.ts

@@ -0,0 +1,3 @@
+import { defineDesignSystem } from "@agent-native/toolkit/design-system";
+
+export const designSystem = defineDesignSystem({});

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

@@ -0,0 +1,19 @@
+import { appBasePath } from "@agent-native/core/client/api-path";
+import { installRouteChunkRecovery } from "@agent-native/core/client/route-chunk-recovery";
+import { hydrateRoot } from "react-dom/client";
+import { HydratedRouter } from "react-router/dom";
+
+installRouteChunkRecovery();
+
+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 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-keyboard-shortcuts.ts

@@ -0,0 +1,206 @@
+import { useEffect, useRef } from "react";
+
+export interface KeyboardShortcut {
+  /** Single key, compared case-insensitively against `KeyboardEvent.key`. */
+  key: string;
+  /** Requires Cmd (macOS) or Ctrl. */
+  meta?: boolean;
+  shift?: boolean;
+  handler: (event: KeyboardEvent) => void;
+}
+
+export interface SequenceShortcut {
+  /** Lower-case keys in order, e.g. `["g", "a"]`. */
+  keys: string[];
+  handler: () => void;
+}
+
+/** The parts of an event target the shortcut layer inspects. */
+export interface ShortcutEventTarget {
+  tagName?: string;
+  isContentEditable?: boolean;
+  closest?: (selector: string) => unknown;
+}
+
+/** The parts of a keyboard event the shortcut layer inspects. */
+export interface ShortcutKeyEvent {
+  key: string;
+  metaKey?: boolean;
+  ctrlKey?: boolean;
+  altKey?: boolean;
+  shiftKey?: boolean;
+  target?: ShortcutEventTarget | null;
+}
+
+export const SEQUENCE_SHORTCUT_TIMEOUT_MS = 1000;
+
+export function shouldIgnoreShortcutTarget(
+  target: ShortcutEventTarget | null | undefined,
+): boolean {
+  if (!target) return false;
+  const tag = target.tagName?.toLowerCase();
+  if (tag === "input" || tag === "textarea" || tag === "select") return true;
+  if (target.isContentEditable) return true;
+  return Boolean(target.closest?.("[contenteditable]"));
+}
+
+export function resolveShortcut<T extends KeyboardShortcut>(
+  event: ShortcutKeyEvent,
+  shortcuts: readonly T[],
+): T | null {
+  if (shouldIgnoreShortcutTarget(event.target)) return null;
+  if (event.altKey) return null;
+
+  const key = event.key.toLowerCase();
+  const modified = Boolean(event.metaKey || event.ctrlKey);
+
+  for (const shortcut of shortcuts) {
+    if (key !== shortcut.key.toLowerCase()) continue;
+    if (Boolean(shortcut.meta) !== modified) continue;
+    if (Boolean(shortcut.shift) !== Boolean(event.shiftKey)) continue;
+    return shortcut;
+  }
+
+  return null;
+}
+
+export type SequenceMatch<T extends SequenceShortcut> =
+  /** The keystroke completed a chord. */
+  | { status: "matched"; sequence: T }
+  /** The keystroke started or extended a chord; nothing else may claim it. */
+  | { status: "pending" }
+  /** The keystroke is not part of any chord and is free for a plain binding. */
+  | { status: "none" };
+
+export interface SequenceMatcher<T extends SequenceShortcut> {
+  push(event: ShortcutKeyEvent, now: number): SequenceMatch<T>;
+  reset(): void;
+}
+
+function startsWith(keys: readonly string[], prefix: readonly string[]) {
+  return prefix.every((key, index) => keys[index] === key);
+}
+
+/**
+ * Chord matcher with an explicit clock instead of a timer, so the buffer
+ * expires deterministically and no timeout outlives an unmounted component.
+ * The buffer only ever holds a live prefix, which is what lets a caller tell a
+ * pending chord (`g` before `g t`) apart from a free key (a bare `t`).
+ */
+export function createSequenceMatcher<T extends SequenceShortcut>(
+  sequences: readonly T[],
+  timeoutMs: number = SEQUENCE_SHORTCUT_TIMEOUT_MS,
+): SequenceMatcher<T> {
+  let buffer: string[] = [];
+  let lastKeyAt: number | null = null;
+
+  const clear = () => {
+    buffer = [];
+    lastKeyAt = null;
+  };
+
+  return {
+    push(event, now) {
+      if (shouldIgnoreShortcutTarget(event.target)) {
+        clear();
+        return { status: "none" };
+      }
+      if (event.metaKey || event.ctrlKey || event.altKey) {
+        return { status: "none" };
+      }
+
+      if (lastKeyAt !== null && now - lastKeyAt > timeoutMs) clear();
+      const candidate = [...buffer, event.key.toLowerCase()];
+
+      const matched = sequences.find(
+        (sequence) =>
+          sequence.keys.length === candidate.length &&
+          startsWith(sequence.keys, candidate),
+      );
+      if (matched) {
+        clear();
+        return { status: "matched", sequence: matched };
+      }
+
+      const pending = sequences.some(
+        (sequence) =>
+          sequence.keys.length > candidate.length &&
+          startsWith(sequence.keys, candidate),
+      );
+      if (pending) {
+        buffer = candidate;
+        lastKeyAt = now;
+        return { status: "pending" };
+      }
+
+      clear();
+      return { status: "none" };
+    },
+    reset: clear,
+  };
+}
+
+export interface UseShortcutsOptions {
+  shortcuts?: readonly KeyboardShortcut[];
+  sequences?: readonly SequenceShortcut[];
+  enabled?: boolean;
+  timeoutMs?: number;
+}
+
+/**
+ * One window listener for both plain keys and chords. Chords are resolved
+ * first: without that, pressing `g` then `t` would run the `g t` chord *and*
+ * the bare `t` binding.
+ */
+export function useKeyboardShortcuts({
+  shortcuts = [],
+  sequences = [],
+  enabled = true,
+  timeoutMs = SEQUENCE_SHORTCUT_TIMEOUT_MS,
+}: UseShortcutsOptions) {
+  const shortcutsRef = useRef(shortcuts);
+  const sequencesRef = useRef(sequences);
+  shortcutsRef.current = shortcuts;
+  sequencesRef.current = sequences;
+
+  // Resubscribing rebuilds the matcher and drops an in-flight chord, so the
+  // effect keys on the chord shape only — handlers stay live through the ref.
+  const chordSignature = sequences
+    .map((sequence) => sequence.keys.join("+"))
+    .join("|");
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    const matcher = createSequenceMatcher(
+      sequencesRef.current.map((sequence, index) => ({
+        keys: sequence.keys,
+        handler: () => sequencesRef.current[index]?.handler(),
+      })),
+      timeoutMs,
+    );
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      const shortcutEvent = event as unknown as ShortcutKeyEvent;
+      const chord = matcher.push(shortcutEvent, Date.now());
+
+      if (chord.status === "matched") {
+        event.preventDefault();
+        chord.sequence.handler();
+        return;
+      }
+      if (chord.status === "pending") {
+        event.preventDefault();
+        return;
+      }
+
+      const shortcut = resolveShortcut(shortcutEvent, shortcutsRef.current);
+      if (!shortcut) return;
+      event.preventDefault();
+      shortcut.handler(event);
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [enabled, timeoutMs, chordSignature]);
+}

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

@@ -0,0 +1,48 @@
+import { appPath } from "@agent-native/core/client/api-path";
+import { useAgentRouteState } from "@agent-native/core/client/navigation";
+
+import {
+  crmNavigationPath,
+  viewFromPath,
+  type CrmNavigationTarget,
+  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;
+}
+
+/** Exactly what `navigate` accepts, so no destination is dropped in between. */
+export type CrmNavigateCommand = CrmNavigationTarget;
+
+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) => crmNavigationPath(command),
+  });
+}