@agent-native/core 0.90.11 → 0.91.0

package/corpus/core/src/client/analytics-session.ts

@@ -0,0 +1,70 @@
+const ANONYMOUS_ID_STORAGE_KEY = "agent-native.anonymous_id";
+const SESSION_ID_STORAGE_KEY = "agent-native.session_id";
+const SESSION_LAST_ACTIVITY_STORAGE_KEY = "agent-native.session_last_activity";
+// 30-minute idle timeout matches GA4 / Mixpanel defaults: a tab left open
+// overnight starts a new session in the morning instead of stretching one visit.
+const SESSION_IDLE_TIMEOUT_MS = 30 * 60 * 1000;
+
+function generateVisitorId(): string {
+  try {
+    if (
+      typeof crypto !== "undefined" &&
+      typeof crypto.randomUUID === "function"
+    ) {
+      return crypto.randomUUID();
+    }
+  } catch {
+    // fall through to Math.random
+  }
+  return (
+    Date.now().toString(36) +
+    Math.random().toString(36).slice(2) +
+    Math.random().toString(36).slice(2)
+  );
+}
+
+function safeStorageGet(key: string): string | null {
+  try {
+    return window.localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+
+function safeStorageSet(key: string, value: string): void {
+  try {
+    window.localStorage.setItem(key, value);
+  } catch {
+    // private browsing / storage disabled -- best-effort
+  }
+}
+
+export function getOrCreateAnalyticsAnonymousId(): string | undefined {
+  if (typeof window === "undefined") return undefined;
+  let id = safeStorageGet(ANONYMOUS_ID_STORAGE_KEY);
+  if (!id) {
+    id = generateVisitorId();
+    safeStorageSet(ANONYMOUS_ID_STORAGE_KEY, id);
+  }
+  return id;
+}
+
+export function getOrCreateAnalyticsSessionId(): string | undefined {
+  if (typeof window === "undefined") return undefined;
+  const now = Date.now();
+  const lastActivityRaw = safeStorageGet(SESSION_LAST_ACTIVITY_STORAGE_KEY);
+  const lastActivity = lastActivityRaw
+    ? Number.parseInt(lastActivityRaw, 10)
+    : 0;
+  let id = safeStorageGet(SESSION_ID_STORAGE_KEY);
+  const expired =
+    !lastActivity ||
+    Number.isNaN(lastActivity) ||
+    now - lastActivity > SESSION_IDLE_TIMEOUT_MS;
+  if (!id || expired) {
+    id = generateVisitorId();
+    safeStorageSet(SESSION_ID_STORAGE_KEY, id);
+  }
+  safeStorageSet(SESSION_LAST_ACTIVITY_STORAGE_KEY, String(now));
+  return id;
+}

package/corpus/core/src/client/analytics.ts

@@ -5,13 +5,31 @@ import {
   llmConnectionTrackingProperties,
   type LlmConnectionStatus,
 } from "../shared/llm-connection.js";
+import {
+  getOrCreateAnalyticsAnonymousId,
+  getOrCreateAnalyticsSessionId,
+} from "./analytics-session.js";
 import { agentNativePath } from "./api-path.js";
+import {
+  installErrorCapture,
+  type CapturedExceptionEvent,
+} from "./error-capture.js";
 import type {
   SessionReplayOptions,
   SessionReplayStartResult,
 } from "./session-replay.js";
 import { scrubUrl } from "./url-scrub.js";
 export { scrubUrl } from "./url-scrub.js";
+export {
+  addErrorBreadcrumb,
+  captureException,
+  captureMessage,
+  isErrorCaptureInstalled,
+  type CaptureExceptionContext,
+  type CapturedExceptionEvent,
+  type ExceptionBreadcrumb,
+  type ExceptionLevel,
+} from "./error-capture.js";
 export type {
   SessionReplayConsoleOptions,
   SessionReplayNetworkOptions,
@@ -40,6 +58,25 @@ type PageviewTrackingState = {
   lastPageviewKey: string | null;
 };
 
+/**
+ * First-party, Sentry-style error capture configuration. Pass `true`/`false`
+ * to force on/off, or an options object to tune it. When omitted, error
+ * capture auto-enables whenever a first-party analytics public key is
+ * configured (mirroring pageview + session-replay auto-enable).
+ */
+export type ErrorCaptureConfigOptions = {
+  /** Build/release identifier attached to every captured exception. */
+  release?: string;
+  /** Deployment environment (e.g. "production"). Defaults to Vite MODE. */
+  environment?: string;
+  /** Auto-capture `window.onerror`. Defaults to true. */
+  captureGlobalErrors?: boolean;
+  /** Auto-capture `unhandledrejection`. Defaults to true. */
+  captureUnhandledRejections?: boolean;
+  /** Breadcrumb ring-buffer size. Defaults to 20. */
+  maxBreadcrumbs?: number;
+};
+
 export type ConfigureTrackingOptions = {
   /**
    * Agent Native first-party analytics public key. This mirrors hosted
@@ -53,6 +90,12 @@ export type ConfigureTrackingOptions = {
   endpoint?: string;
   getDefaultProps?: GetDefaultProps;
   sessionReplay?: boolean | SessionReplayOptions;
+  /**
+   * First-party, Sentry-style error capture. Auto-captures uncaught errors
+   * and unhandled rejections and exposes `captureException`/`captureMessage`.
+   * Auto-enables when a public key is present; pass `false` to disable.
+   */
+  errorCapture?: boolean | ErrorCaptureConfigOptions;
 };
 
 type SentryUser = {
@@ -84,6 +127,11 @@ let _sessionReplayOptions: SessionReplayOptions | null = null;
 let _sessionReplayIdentitySnapshot: TrackingIdentity | null = null;
 let _sessionReplayStartPromise: Promise<SessionReplayStartResult | null> | null =
   null;
+let _errorCaptureInstalled = false;
+let _errorCaptureDisposer: (() => void) | null = null;
+let _sessionReplayModuleForCapture:
+  | typeof import("./session-replay.js")
+  | null = null;
 // Buffer for setSentryUser calls made before Sentry has initialized.
 // `undefined` means "no pending update"; `null` means "pending clear".
 let _pendingSentryUser: SentryUser | null | undefined = undefined;
@@ -91,19 +139,19 @@ let _pendingSentryOrgId: string | null | undefined = undefined;
 
 const AGENT_NATIVE_ANALYTICS_DEFAULT_ENDPOINT =
   "https://analytics.agent-native.com/track";
+/**
+ * Dedicated first-party analytics event name for captured exceptions. The
+ * analytics server ingest forks events with this name into the error-capture
+ * tables (error_issues / error_events) while still recording them in
+ * analytics_events for alerting. Keep in sync with the template server ingest.
+ */
+export const AGENT_NATIVE_EXCEPTION_EVENT_NAME = "$exception";
 const PAGEVIEW_TRACKING_STATE_KEY = Symbol.for(
   "agent-native.client.pageviewTracking",
 );
 
-const ANONYMOUS_ID_STORAGE_KEY = "agent-native.anonymous_id";
-const SESSION_ID_STORAGE_KEY = "agent-native.session_id";
-const SESSION_LAST_ACTIVITY_STORAGE_KEY = "agent-native.session_last_activity";
 const LLM_CONNECTION_STORAGE_KEY = "agent-native.llm_connection_status";
 const LLM_CONNECTION_CACHE_TTL_MS = 5 * 60 * 1000;
-// 30-minute idle timeout matches GA4 / Mixpanel defaults — a tab left open
-// overnight starts a new session in the morning rather than stretching one
-// session over multiple visits.
-const SESSION_IDLE_TIMEOUT_MS = 30 * 60 * 1000;
 
 // First-touch referral attribution (viral attribution). Captured once on the
 // visitor's first page load and persisted across the signup boundary so the
@@ -143,24 +191,6 @@ export interface FirstTouchAttribution {
   landed_at?: string;
 }
 
-function generateVisitorId(): string {
-  try {
-    if (
-      typeof crypto !== "undefined" &&
-      typeof crypto.randomUUID === "function"
-    ) {
-      return crypto.randomUUID();
-    }
-  } catch {
-    // fall through to Math.random
-  }
-  return (
-    Date.now().toString(36) +
-    Math.random().toString(36).slice(2) +
-    Math.random().toString(36).slice(2)
-  );
-}
-
 function safeStorageGet(key: string): string | null {
   try {
     return window.localStorage.getItem(key);
@@ -371,13 +401,7 @@ function applyTrackingIdentity(
 }
 
 function getOrCreateAnonymousId(): string | undefined {
-  if (typeof window === "undefined") return undefined;
-  let id = safeStorageGet(ANONYMOUS_ID_STORAGE_KEY);
-  if (!id) {
-    id = generateVisitorId();
-    safeStorageSet(ANONYMOUS_ID_STORAGE_KEY, id);
-  }
-  return id;
+  return getOrCreateAnalyticsAnonymousId();
 }
 
 export function getAnalyticsAnonymousId(): string | undefined {
@@ -385,23 +409,7 @@ export function getAnalyticsAnonymousId(): string | undefined {
 }
 
 function getOrCreateSessionId(): string | undefined {
-  if (typeof window === "undefined") return undefined;
-  const now = Date.now();
-  const lastActivityRaw = safeStorageGet(SESSION_LAST_ACTIVITY_STORAGE_KEY);
-  const lastActivity = lastActivityRaw
-    ? Number.parseInt(lastActivityRaw, 10)
-    : 0;
-  let id = safeStorageGet(SESSION_ID_STORAGE_KEY);
-  const expired =
-    !lastActivity ||
-    Number.isNaN(lastActivity) ||
-    now - lastActivity > SESSION_IDLE_TIMEOUT_MS;
-  if (!id || expired) {
-    id = generateVisitorId();
-    safeStorageSet(SESSION_ID_STORAGE_KEY, id);
-  }
-  safeStorageSet(SESSION_LAST_ACTIVITY_STORAGE_KEY, String(now));
-  return id;
+  return getOrCreateAnalyticsSessionId();
 }
 
 export function getAnalyticsSessionId(): string | undefined {
@@ -978,7 +986,125 @@ export function configureTracking(options: ConfigureTrackingOptions): void {
       endpoint: options.endpoint,
       publicKey,
     });
+    maybeInstallErrorCapture(options.errorCapture);
+  }
+}
+
+/**
+ * Lazily load the session-replay module so error capture can read the active
+ * replay id and surface manual captures on the replay timeline without a
+ * static import (which would create an analytics <-> session-replay import
+ * cycle and pull the replay module into the analytics chunk eagerly).
+ */
+function loadSessionReplayModuleForCapture(): void {
+  if (_sessionReplayModuleForCapture) return;
+  import("./session-replay.js")
+    .then((mod) => {
+      _sessionReplayModuleForCapture = mod;
+    })
+    .catch(() => {
+      // Session linkage is best-effort; capture still works without it.
+    });
+}
+
+function errorCaptureSessionContext(): {
+  sessionId?: string;
+  anonymousId?: string;
+  replayId?: string;
+} {
+  return {
+    sessionId: getOrCreateSessionId(),
+    anonymousId: getOrCreateAnonymousId(),
+    replayId:
+      _sessionReplayModuleForCapture?.getSessionReplayId?.() ?? undefined,
+  };
+}
+
+function exceptionEventProperties(
+  event: CapturedExceptionEvent,
+): Record<string, unknown> {
+  return {
+    exceptionType: event.type,
+    exceptionMessage: event.message,
+    ...(event.stack ? { exceptionStack: event.stack } : {}),
+    handled: event.handled,
+    level: event.level,
+    occurredAt: event.occurredAt,
+    ...(event.url ? { errorUrl: event.url } : {}),
+    ...(event.release ? { release: event.release } : {}),
+    ...(event.environment ? { environment: event.environment } : {}),
+    ...(event.sessionReplayId
+      ? { sessionReplayId: event.sessionReplayId }
+      : {}),
+    ...(event.breadcrumbs?.length ? { breadcrumbs: event.breadcrumbs } : {}),
+    ...(event.tags ? { exceptionTags: event.tags } : {}),
+    ...(event.extra ? { exceptionExtra: event.extra } : {}),
+  };
+}
+
+function sendExceptionEvent(event: CapturedExceptionEvent): void {
+  // Route through the existing first-party analytics ingest as a dedicated
+  // `$exception` event. This reuses the public-key auth + sendBeacon/keepalive
+  // transport; the server forks it into error_issues/error_events and still
+  // records it in analytics_events for alerting.
+  trackEvent(
+    AGENT_NATIVE_EXCEPTION_EVENT_NAME,
+    exceptionEventProperties(event),
+  );
+}
+
+function emitExceptionToReplay(event: CapturedExceptionEvent): void {
+  _sessionReplayModuleForCapture?.emitSessionReplayException?.({
+    type: event.type,
+    message: event.message,
+    level: event.level,
+    ...(event.stack ? { stack: event.stack } : {}),
+    ...(event.url ? { url: event.url } : {}),
+  });
+}
+
+function errorCaptureAutoEnabled(): boolean {
+  const publicKey =
+    _agentNativeAnalyticsPublicKey ||
+    (import.meta.env as Record<string, string | undefined>)
+      ?.VITE_AGENT_NATIVE_ANALYTICS_PUBLIC_KEY;
+  return !!publicKey;
+}
+
+function maybeInstallErrorCapture(
+  config: boolean | ErrorCaptureConfigOptions | undefined,
+): void {
+  if (typeof window === "undefined") return;
+  if (config === false) {
+    _errorCaptureDisposer?.();
+    _errorCaptureDisposer = null;
+    _errorCaptureInstalled = false;
+    return;
   }
+  if (_errorCaptureInstalled && config === undefined) return;
+  const enabled = config === undefined ? errorCaptureAutoEnabled() : true;
+  if (!enabled) return;
+  const options = typeof config === "object" ? config : {};
+  loadSessionReplayModuleForCapture();
+  _errorCaptureDisposer = installErrorCapture({
+    send: sendExceptionEvent,
+    getSessionContext: errorCaptureSessionContext,
+    emitReplayEvent: emitExceptionToReplay,
+    environment:
+      options.environment ||
+      (import.meta.env as Record<string, string | undefined>)?.MODE,
+    ...(options.release ? { release: options.release } : {}),
+    ...(options.captureGlobalErrors !== undefined
+      ? { captureGlobalErrors: options.captureGlobalErrors }
+      : {}),
+    ...(options.captureUnhandledRejections !== undefined
+      ? { captureUnhandledRejections: options.captureUnhandledRejections }
+      : {}),
+    ...(options.maxBreadcrumbs !== undefined
+      ? { maxBreadcrumbs: options.maxBreadcrumbs }
+      : {}),
+  });
+  _errorCaptureInstalled = true;
 }
 
 function sessionReplayEnabledFromEnv(): boolean {

package/corpus/core/src/client/chat/message-components.tsx

@@ -82,6 +82,22 @@ export function displayableUserMessageText(text: string): string {
     .trim();
 }
 
+export function isHiddenUserMessage(message: unknown): boolean {
+  const meta = (message as { metadata?: unknown })?.metadata as
+    | {
+        custom?: {
+          agentNativeHiddenUserMessage?: unknown;
+          agentNativeRecoveryAction?: unknown;
+        };
+      }
+    | undefined;
+  return (
+    meta?.custom?.agentNativeHiddenUserMessage === true ||
+    meta?.custom?.agentNativeRecoveryAction === "continue" ||
+    meta?.custom?.agentNativeRecoveryAction === "retry"
+  );
+}
+
 // ─── Message timestamp helpers ────────────────────────────────────────────────
 
 interface FormattedMessageTimestamp {
@@ -634,13 +650,15 @@ export function UserMessage() {
   const timestamp = formatMessageTimestamp(message.createdAt);
   const isEditing = useComposer((state) => state.isEditing);
   const chatRunning = React.useContext(ChatRunningContext);
+  const hidden = isHiddenUserMessage(message);
   const hasDisplayableText =
-    message.content
+    !hidden &&
+    (message.content
       ?.filter((part): part is { type: "text"; text: string } => {
         return part.type === "text" && typeof part.text === "string";
       })
       .some((part) => displayableUserMessageText(part.text).length > 0) ??
-    false;
+      false);
 
   useEffect(() => {
     const el = contentRef.current;
@@ -656,6 +674,8 @@ export function UserMessage() {
     return () => observer.disconnect();
   }, [hasDisplayableText]);
 
+  if (hidden) return null;
+
   // When in edit mode, show the inline edit composer instead of the message bubble.
   if (isEditing) {
     return (

package/corpus/core/src/client/components/ui/message-scroller.tsx

@@ -0,0 +1,131 @@
+import {
+  MessageScroller as ShadcnMessageScroller,
+  useMessageScroller,
+  useMessageScrollerScrollable,
+  useMessageScrollerVisibility,
+  type MessageScrollerDefaultScrollPosition,
+  type MessageScrollerScrollAlign,
+  type MessageScrollerScrollOptions,
+  type MessageScrollerScrollable,
+  type MessageScrollerVisibilityState,
+} from "@shadcn/react/message-scroller";
+import { IconChevronDown } from "@tabler/icons-react";
+import * as React from "react";
+
+import { cn } from "../../utils.js";
+
+type MessageScrollerProviderProps = React.ComponentProps<
+  typeof ShadcnMessageScroller.Provider
+>;
+type MessageScrollerRootProps = React.ComponentProps<
+  typeof ShadcnMessageScroller.Root
+>;
+type MessageScrollerViewportProps = React.ComponentProps<
+  typeof ShadcnMessageScroller.Viewport
+>;
+type MessageScrollerContentProps = React.ComponentProps<
+  typeof ShadcnMessageScroller.Content
+>;
+type MessageScrollerItemProps = React.ComponentProps<
+  typeof ShadcnMessageScroller.Item
+>;
+type MessageScrollerButtonProps = React.ComponentProps<
+  typeof ShadcnMessageScroller.Button
+>;
+
+function MessageScrollerProvider(props: MessageScrollerProviderProps) {
+  return <ShadcnMessageScroller.Provider {...props} />;
+}
+
+function MessageScroller({ className, ...props }: MessageScrollerRootProps) {
+  return (
+    <ShadcnMessageScroller.Root
+      className={cn("relative flex min-h-0 flex-1 flex-col", className)}
+      {...props}
+    />
+  );
+}
+
+function MessageScrollerViewport({
+  className,
+  ...props
+}: MessageScrollerViewportProps) {
+  return (
+    <ShadcnMessageScroller.Viewport
+      className={cn(
+        "min-h-0 flex-1 overflow-y-auto overflow-x-hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function MessageScrollerContent({
+  className,
+  spacerClassName,
+  ...props
+}: MessageScrollerContentProps) {
+  return (
+    <ShadcnMessageScroller.Content
+      className={cn("flex flex-col", className)}
+      spacerClassName={cn("shrink-0", spacerClassName)}
+      {...props}
+    />
+  );
+}
+
+function MessageScrollerItem(props: MessageScrollerItemProps) {
+  return <ShadcnMessageScroller.Item {...props} />;
+}
+
+function MessageScrollerButton({
+  className,
+  children,
+  render,
+  ...props
+}: MessageScrollerButtonProps) {
+  return (
+    <ShadcnMessageScroller.Button
+      render={
+        render ??
+        ((buttonProps) => (
+          <div className="shrink-0 flex justify-center -mb-1">
+            <button
+              {...buttonProps}
+              className={cn(
+                "flex h-7 w-7 items-center justify-center rounded-full border border-border bg-background shadow-sm hover:bg-accent",
+                "data-[active=false]:hidden",
+                className,
+                buttonProps.className as string | undefined,
+              )}
+              aria-label="Scroll to bottom"
+            >
+              {children ?? (
+                <IconChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+              )}
+            </button>
+          </div>
+        ))
+      }
+      {...props}
+    />
+  );
+}
+
+export {
+  MessageScroller,
+  MessageScrollerButton,
+  MessageScrollerContent,
+  MessageScrollerItem,
+  MessageScrollerProvider,
+  MessageScrollerViewport,
+  useMessageScroller,
+  useMessageScrollerScrollable,
+  useMessageScrollerVisibility,
+  type MessageScrollerDefaultScrollPosition,
+  type MessageScrollerScrollAlign,
+  type MessageScrollerScrollOptions,
+  type MessageScrollerScrollable,
+  type MessageScrollerVisibilityState,
+};

package/corpus/core/src/client/conversation/AgentConversation.tsx

@@ -18,6 +18,14 @@ import {
   resolveBuiltinActionChatRenderer,
   resolveBuiltinFallbackToolRenderer,
 } from "../chat/widgets/builtin-tool-renderers.js";
+import {
+  MessageScroller,
+  MessageScrollerButton,
+  MessageScrollerContent,
+  MessageScrollerItem,
+  MessageScrollerProvider,
+  MessageScrollerViewport,
+} from "../components/ui/message-scroller.js";
 import { HighlightedCodeBlock as SharedHighlightedCodeBlock } from "../HighlightedCodeBlock.js";
 import { McpAppRenderer } from "../mcp-apps/McpAppRenderer.js";
 import { humanizeToolName } from "../tool-display.js";
@@ -30,7 +38,6 @@ import type {
   AgentConversationNotice,
   AgentConversationToolCall,
 } from "./types.js";
-import { useNearBottomAutoscroll } from "./use-near-bottom-autoscroll.js";
 
 export interface AgentConversationProps {
   messages: AgentConversationMessage[];
@@ -48,22 +55,12 @@ export function AgentConversation({
   messages,
   loading = false,
   error,
-  streaming = false,
   className,
   timelineClassName,
   emptyTitle = "No messages yet",
   emptyDescription,
   composer,
 }: AgentConversationProps) {
-  const followKey = `${messages.length}:${
-    messages[messages.length - 1]?.text?.length ?? 0
-  }`;
-  const { scrollRef, showScrollToBottom, scrollToBottom } =
-    useNearBottomAutoscroll<HTMLDivElement>({
-      followKey,
-      streaming,
-    });
-
   return (
     <section className={cn("agent-conversation", className)}>
       {error && (
@@ -72,37 +69,62 @@ export function AgentConversation({
           <span>{error}</span>
         </div>
       )}
-      <div
-        ref={scrollRef}
-        className={cn("agent-conversation__timeline", timelineClassName)}
-      >
-        {loading && messages.length === 0 ? (
-          <ConversationEmpty
-            icon={<IconLoader2 size={17} className="agent-conversation-spin" />}
-            title="Loading session..."
-          />
-        ) : messages.length === 0 ? (
-          <ConversationEmpty
-            icon={<IconClock size={18} />}
-            title={emptyTitle}
-            description={emptyDescription}
+      <MessageScrollerProvider autoScroll>
+        <MessageScroller className="agent-conversation__scroller">
+          <MessageScrollerViewport
+            className={cn("agent-conversation__timeline", timelineClassName)}
+          >
+            <MessageScrollerContent>
+              {loading && messages.length === 0 ? (
+                <MessageScrollerItem>
+                  <ConversationEmpty
+                    icon={
+                      <IconLoader2
+                        size={17}
+                        className="agent-conversation-spin"
+                      />
+                    }
+                    title="Loading session..."
+                  />
+                </MessageScrollerItem>
+              ) : messages.length === 0 ? (
+                <MessageScrollerItem>
+                  <ConversationEmpty
+                    icon={<IconClock size={18} />}
+                    title={emptyTitle}
+                    description={emptyDescription}
+                  />
+                </MessageScrollerItem>
+              ) : (
+                messages.map((message) => (
+                  <MessageScrollerItem
+                    key={message.id}
+                    messageId={message.id}
+                    scrollAnchor={message.role === "user"}
+                  >
+                    <AgentConversationMessageView message={message} />
+                  </MessageScrollerItem>
+                ))
+              )}
+            </MessageScrollerContent>
+          </MessageScrollerViewport>
+          <MessageScrollerButton
+            render={(buttonProps) => (
+              <button
+                {...buttonProps}
+                className={cn(
+                  "agent-conversation__scroll-bottom",
+                  "data-[active=false]:hidden",
+                  buttonProps.className as string | undefined,
+                )}
+                aria-label="Scroll to bottom"
+              >
+                <IconArrowDown size={15} strokeWidth={1.9} />
+              </button>
+            )}
           />
-        ) : (
-          messages.map((message) => (
-            <AgentConversationMessageView key={message.id} message={message} />
-          ))
-        )}
-      </div>
-      {showScrollToBottom && (
-        <button
-          type="button"
-          className="agent-conversation__scroll-bottom"
-          onClick={scrollToBottom}
-          aria-label="Scroll to bottom"
-        >
-          <IconArrowDown size={15} strokeWidth={1.9} />
-        </button>
-      )}
+        </MessageScroller>
+      </MessageScrollerProvider>
       {composer}
     </section>
   );