@agent-native/core 0.84.66 → 0.85.0

package/corpus/core/src/server/ssr-handler.ts

@@ -30,18 +30,11 @@ import {
   AGENT_NATIVE_SOCIAL_IMAGE_WIDTH,
   withAgentNativeSocialImageCacheBuster,
 } from "../shared/social-meta.js";
-import {
-  GA_CSP_CONNECT_HOSTS,
-  GA_CSP_IMG_HOSTS,
-  GA_CSP_SCRIPT_HOSTS,
-  getGaInlineConfigScriptBody,
-} from "./analytics.js";
 import {
   getAppBasePathFromViteEnv,
   stripAppBasePath as canonicalStripAppBasePath,
 } from "./app-base-path.js";
 import { runWithRequestContext } from "./request-context.js";
-import { computeInlineScriptHash } from "./security-headers.js";
 import { getSentryClientConfigScript } from "./sentry-config.js";
 
 export {
@@ -258,376 +251,17 @@ function applyDefaultSpeculationRulesHeader(
 }
 
 /**
- * Extract the plain JS body from a `<script ...>body</script>` string.
- * Returns `null` if the input is falsy or has no recognisable `</script>` end.
- * Used to compute the sha256 hash of framework-injected inline scripts so the
- * hash can be listed in app-owned `script-src` CSP directives.
- */
-function extractScriptBody(scriptTag: string | null): string | null {
-  if (!scriptTag) return null;
-  const start = scriptTag.indexOf(">") + 1;
-  const end = scriptTag.lastIndexOf("</script>");
-  if (start <= 0 || end < start) return null;
-  return scriptTag.slice(start, end);
-}
-
-type CspDirective = {
-  name: string;
-  tokens: string[];
-};
-
-const CSP_DIRECTIVES_WITH_VALUE_TOKENS = new Set([
-  "base-uri",
-  "block-all-mixed-content",
-  "child-src",
-  "connect-src",
-  "default-src",
-  "fenced-frame-src",
-  "font-src",
-  "form-action",
-  "frame-ancestors",
-  "frame-src",
-  "img-src",
-  "manifest-src",
-  "media-src",
-  "navigate-to",
-  "object-src",
-  "plugin-types",
-  "prefetch-src",
-  "referrer",
-  "reflected-xss",
-  "require-sri-for",
-  "require-trusted-types-for",
-  "report-to",
-  "report-uri",
-  "sandbox",
-  "script-src",
-  "script-src-attr",
-  "script-src-elem",
-  "style-src",
-  "style-src-attr",
-  "style-src-elem",
-  "trusted-types",
-  "upgrade-insecure-requests",
-  "webrtc",
-  "worker-src",
-]);
-
-function hasCommaJoinedCspPolicies(policy: string): boolean {
-  let commaIndex = policy.indexOf(",");
-  while (commaIndex !== -1) {
-    const afterComma = policy.slice(commaIndex + 1);
-    const directive = /^\s+([a-z][a-z0-9-]*)(?=\s|;|$)/i.exec(afterComma)?.[1];
-    if (
-      directive &&
-      CSP_DIRECTIVES_WITH_VALUE_TOKENS.has(directive.toLowerCase())
-    ) {
-      return true;
-    }
-    commaIndex = policy.indexOf(",", commaIndex + 1);
-  }
-  return false;
-}
-
-function parseCsp(policy: string): CspDirective[] {
-  return policy
-    .split(";")
-    .map((part) => part.trim())
-    .filter(Boolean)
-    .map((part) => {
-      const [name = "", ...tokens] = part.split(/\s+/);
-      return { name: name.toLowerCase(), tokens };
-    })
-    .filter((directive) => directive.name);
-}
-
-function serializeCsp(directives: CspDirective[]): string {
-  return directives
-    .map((directive) =>
-      [directive.name, ...directive.tokens].filter(Boolean).join(" "),
-    )
-    .join("; ");
-}
-
-function appendCspTokens(
-  tokens: string[],
-  additions: readonly string[],
-): string[] {
-  if (!additions.length) return tokens;
-  const next = tokens.filter((token) => token !== "'none'");
-  const seen = new Set(next);
-  for (const token of additions) {
-    if (!token || seen.has(token)) continue;
-    next.push(token);
-    seen.add(token);
-  }
-  return next;
-}
-
-function findCspDirective(
-  directives: CspDirective[],
-  name: string,
-): CspDirective | undefined {
-  return directives.find((directive) => directive.name === name);
-}
-
-function appendToExistingOrDefaultCspDirective(
-  directives: CspDirective[],
-  name: string,
-  additions: readonly string[],
-): void {
-  if (!additions.length) return;
-  const existing = findCspDirective(directives, name);
-  if (existing) {
-    existing.tokens = appendCspTokens(existing.tokens, additions);
-    return;
-  }
-
-  const defaultSrc = findCspDirective(directives, "default-src");
-  if (!defaultSrc) return;
-  directives.push({
-    name,
-    tokens: appendCspTokens([...defaultSrc.tokens], additions),
-  });
-}
-
-function appendToExistingCspDirective(
-  directives: CspDirective[],
-  name: string,
-  additions: readonly string[],
-): void {
-  const existing = findCspDirective(directives, name);
-  if (!existing) return;
-  existing.tokens = appendCspTokens(existing.tokens, additions);
-}
-
-function ensureCspDirective(
-  directives: CspDirective[],
-  name: string,
-  tokens: readonly string[],
-): void {
-  if (findCspDirective(directives, name)) return;
-  directives.push({ name, tokens: [...tokens] });
-}
-
-function hasStrictNonceScriptPolicy(tokens: readonly string[]): boolean {
-  return tokens.some(
-    (token) => token === "'strict-dynamic'" || token.startsWith("'nonce-"),
-  );
-}
-
-function appendToScriptCspDirective(
-  directives: CspDirective[],
-  name: string,
-  additions: readonly string[],
-): boolean {
-  const existing = findCspDirective(directives, name);
-  if (existing) {
-    if (hasStrictNonceScriptPolicy(existing.tokens)) return false;
-    existing.tokens = appendCspTokens(existing.tokens, additions);
-    return true;
-  }
-
-  const defaultSrc = findCspDirective(directives, "default-src");
-  if (!defaultSrc || hasStrictNonceScriptPolicy(defaultSrc.tokens)) {
-    return false;
-  }
-  directives.push({
-    name,
-    tokens: appendCspTokens([...defaultSrc.tokens], additions),
-  });
-  return true;
-}
-
-function appendToEffectiveScriptElementCspDirective(
-  directives: CspDirective[],
-  additions: readonly string[],
-): boolean {
-  const scriptSrcElem = findCspDirective(directives, "script-src-elem");
-  if (scriptSrcElem) {
-    if (hasStrictNonceScriptPolicy(scriptSrcElem.tokens)) return false;
-    scriptSrcElem.tokens = appendCspTokens(scriptSrcElem.tokens, additions);
-    return true;
-  }
-
-  return appendToScriptCspDirective(directives, "script-src", additions);
-}
-
-function augmentExistingEnforcedCspForFrameworkScripts(
-  policy: string,
-  options: {
-    gaScriptSrcTokens: readonly string[];
-    gaEnabled: boolean;
-  },
-): string {
-  // Multiple CSP headers are surfaced by Headers.get() as one comma-joined
-  // string. CSP is not a comma-list header, so serializing a parsed combined
-  // value would turn two policies into one invalid policy. Leave those headers
-  // app-owned; a comma inside a source/report URL is still safe to parse.
-  if (hasCommaJoinedCspPolicies(policy)) return policy;
-
-  const directives = parseCsp(policy);
-  if (!directives.length) return policy;
-
-  if (options.gaEnabled) {
-    const addedScriptElement = appendToEffectiveScriptElementCspDirective(
-      directives,
-      options.gaScriptSrcTokens,
-    );
-    if (addedScriptElement) {
-      appendToExistingOrDefaultCspDirective(
-        directives,
-        "connect-src",
-        GA_CSP_CONNECT_HOSTS,
-      );
-      appendToExistingOrDefaultCspDirective(
-        directives,
-        "img-src",
-        GA_CSP_IMG_HOSTS,
-      );
-    }
-  }
-
-  ensureCspDirective(directives, "object-src", ["'none'"]);
-  ensureCspDirective(directives, "base-uri", ["'self'"]);
-
-  return serializeCsp(directives);
-}
-
-function augmentExistingReportOnlyCspForFrameworkScripts(
-  policy: string,
-  options: {
-    scriptSrcTokens: readonly string[];
-    gaEnabled: boolean;
-  },
-): string {
-  if (hasCommaJoinedCspPolicies(policy)) return policy;
-
-  const directives = parseCsp(policy);
-  if (!directives.length) return policy;
-
-  appendToExistingOrDefaultCspDirective(
-    directives,
-    "script-src",
-    options.scriptSrcTokens,
-  );
-  appendToExistingCspDirective(
-    directives,
-    "script-src-elem",
-    options.scriptSrcTokens,
-  );
-
-  if (options.gaEnabled) {
-    appendToExistingOrDefaultCspDirective(
-      directives,
-      "connect-src",
-      GA_CSP_CONNECT_HOSTS,
-    );
-    appendToExistingOrDefaultCspDirective(
-      directives,
-      "img-src",
-      GA_CSP_IMG_HOSTS,
-    );
-  }
-
-  return serializeCsp(directives);
-}
-
-/**
- * Apply a Content-Security-Policy header to HTML document responses.
+ * Strip document-level CSP from app HTML responses.
  *
- * Two directives are always enforced in production:
- *
- *   - `object-src 'none'`  — disables Flash / Java / PDF plugin execution,
- *     which are a reliable code-execution vector even in modern browsers.
- *   - `base-uri 'self'`    — prevents a `<base href="...">` injection from
- *     hijacking all relative URLs in the document (a common attack target when
- *     user-controlled content reaches the HTML).
- *
- * A third directive, `script-src`, is emitted via `Content-Security-Policy-
- * Report-Only` rather than enforced when the app has no existing document CSP.
- * The framework injects inline scripts for analytics, Sentry, and template
- * setup, and hosted apps need Google Tag Manager to load without noisy CSP
- * diagnostics. The report-only policy is intentionally permissive for scripts:
- * it includes `'unsafe-inline'` plus the known GA/GTM loader hosts.
- *
- * If an app or host already sends an enforced CSP with `script-src`,
- * `script-src-elem`, `connect-src`, `img-src`, or `default-src`, we merge only
- * GA-specific allowances into existing host/hash policies. Strict nonce or
- * `strict-dynamic` script policies stay app-owned because blindly appending
- * hashes or hosts would widen the policy without reliably loading our injected
- * scripts.
- *
- * Templates additionally render a theme-init inline script whose exact content
- * varies by template (default theme param, custom docs variant, etc.) and which
- * is rendered by React Router, not this handler, so its hash is not available
- * here. Shipping script-src as Report-Only surfaces the remaining violations
- * without breaking template customisations; teams can graduate to enforcement
- * once their hashes are enumerated.
- *
- * Skipped in development (`NODE_ENV !== 'production'`) so HMR eval and Vite
- * dev-server injects are never blocked. Set `AGENT_NATIVE_DISABLE_DOC_CSP=1`
- * to opt out in production for a template with exotic needs.
+ * Hosted templates inject framework bootstrap scripts, analytics, Sentry config,
+ * and app-owned inline scripts whose exact bytes vary by build/template. Any
+ * shared CSP header, even Report-Only, can block or noisily report Google Tag
+ * Manager and those bootstraps. Extension iframes and webviews keep their own
+ * route-specific sandboxes; normal app documents deliberately do not emit CSP.
  */
-function applyDocumentCsp(headers: Headers, sentryScript: string | null): void {
-  if (process.env.NODE_ENV !== "production") return;
-  if (process.env.AGENT_NATIVE_DISABLE_DOC_CSP === "1") return;
-
-  // script-src as Report-Only: keep this deliberately loose so the framework's
-  // injected analytics and template bootstrap scripts do not look blocked in
-  // browser diagnostics.
-  const sentryBody = extractScriptBody(sentryScript);
-  const sentryHash = sentryBody ? computeInlineScriptHash(sentryBody) : null;
-  const gaInlineBody = getGaInlineConfigScriptBody();
-  const gaHash = gaInlineBody ? computeInlineScriptHash(gaInlineBody) : null;
-  const gaHosts = gaInlineBody ? [...GA_CSP_SCRIPT_HOSTS] : [];
-  const gaScriptSrcTokens = [
-    "'unsafe-inline'",
-    ...(gaHash ? [gaHash] : []),
-    ...gaHosts,
-  ];
-  const scriptSrcTokens = [
-    "'self'",
-    "'unsafe-inline'",
-    ...(sentryHash ? [sentryHash] : []),
-    ...(gaHash ? [gaHash] : []),
-    ...gaHosts,
-  ];
-
-  const cspAugmentOptions = {
-    scriptSrcTokens,
-    gaScriptSrcTokens,
-    gaEnabled: Boolean(gaInlineBody),
-  };
-  const existing = headers.get("content-security-policy") ?? "";
-  if (!existing) {
-    headers.set(
-      "content-security-policy",
-      "object-src 'none'; base-uri 'self'",
-    );
-  } else {
-    headers.set(
-      "content-security-policy",
-      augmentExistingEnforcedCspForFrameworkScripts(
-        existing,
-        cspAugmentOptions,
-      ),
-    );
-  }
-
-  const scriptSrc = `script-src ${scriptSrcTokens.join(" ")}`;
-  const existingRo = headers.get("content-security-policy-report-only") ?? "";
-  if (!existingRo) {
-    headers.set("content-security-policy-report-only", scriptSrc);
-  } else {
-    headers.set(
-      "content-security-policy-report-only",
-      augmentExistingReportOnlyCspForFrameworkScripts(
-        existingRo,
-        cspAugmentOptions,
-      ),
-    );
-  }
+function removeDocumentCsp(headers: Headers): void {
+  headers.delete("content-security-policy");
+  headers.delete("content-security-policy-report-only");
 }
 
 function isFrameworkOrAssetPath(pathname: string): boolean {
@@ -665,7 +299,15 @@ async function rewriteMountedResponse(
   }
 
   const contentType = headers.get("content-type") ?? "";
-  if (!contentType.toLowerCase().includes("text/html") || !response.body) {
+  if (!contentType.toLowerCase().includes("text/html")) {
+    return new Response(response.body, {
+      status: response.status,
+      statusText: response.statusText,
+      headers,
+    });
+  }
+  removeDocumentCsp(headers);
+  if (!response.body) {
     return new Response(response.body, {
       status: response.status,
       statusText: response.statusText,
@@ -675,7 +317,6 @@ async function rewriteMountedResponse(
 
   const html = await response.text();
   headers.delete("content-length");
-  applyDocumentCsp(headers, sentryClientConfigScript);
   return new Response(
     injectHeadScript(
       injectDefaultSocialImageMeta(

package/corpus/templates/analytics/.agents/skills/session-replay/SKILL.md

@@ -33,10 +33,62 @@ agent answers about browser recordings in the Analytics template.
   scoped to the recording, embeds a small SSR discovery payload on
   `/sessions/:recordingId`, and advertises
   `/api/session-replay/agent-context.json` plus bounded
-  `/api/session-replay/agent-events.json` reads.
+  `/api/session-replay/agent-events.json` and
+  `/api/session-replay/agent-diagnostics.json` reads.
 - Do not make session recordings public just so an agent can inspect them.
   Tokenized agent links are the intended handoff path.
 
+## Console And Network Capture
+
+- While recording, the core client (`session-replay.ts` in
+  `@agent-native/core`) patches console (`log`/`info`/`warn`/`error`/`debug`),
+  window `error` / `unhandledrejection`, `fetch`, and XHR, and emits rrweb
+  custom events tagged `agent-native.console` and `agent-native.network`.
+- Capture is on by default whenever session replay is enabled. Tune or disable
+  it with the `console` / `network` options on the session replay config; each
+  accepts a boolean or an options object.
+- Privacy bounds: request/response bodies and headers are never captured, URLs
+  are scrubbed, messages are truncated, and recorder self-traffic (the replay
+  ingest and tracking endpoints) is excluded.
+- Per-session budgets: 1000 console events and 2000 network events, with a
+  truncation notice event once a budget is hit.
+- On ingest, `deriveReplaySignals` computes the real `errorCount` from tagged
+  console events plus the additive `networkErrorCount` column on
+  `session_recordings`. Keep new columns additive.
+
+## Agent Diagnostics Surface
+
+- `buildSessionReplayAgentContext` includes a `diagnostics` section: up to 50
+  console entries and 50 network entries, errors/failures first, with totals
+  and truncated flags. Agent-context instructions steer agents to diagnostics
+  as the primary debugging signal.
+- The agent timeline includes `console-error` / `network-error` markers; error
+  markers are kept preferentially under the 200-marker cap.
+- `apis.diagnostics` advertises the fuller bounded list:
+  `GET /api/session-replay/agent-diagnostics.json?id=<recordingId>&agent_access=<token>&kind=console|network|all&level=<level>&limit=<n>`
+  (limit defaults to 200, max 500). It uses the same recording-scoped
+  `agent_access` token as the other agent JSON APIs.
+
+## Dev Tools Panel
+
+- The `/sessions/:recordingId` replay player has a Dev Tools toggle that opens
+  a panel with Console and Network tabs: filter chips, search, an error-count
+  badge, and playback-time highlighting.
+- Rows are Jump-to-seek: clicking one seeks the player to that moment. Extend
+  this panel instead of adding a separate debugging surface.
+
+## Debugging A User-Reported Bug
+
+1. Search the reporting user's email on `/sessions` to find their recordings.
+2. Open the relevant session at `/sessions/:recordingId` and click
+   **Copy for agent** to mint the two-hour tokenized link.
+3. Paste the link to an agent. The agent fetches
+   `/api/session-replay/agent-context.json`, reads the `diagnostics` section
+   and timeline markers first, then drills into `apis.diagnostics` (filtered
+   by `kind`/`level`) and `apis.events` for the fuller bounded lists as needed.
+4. For human verification, open the Dev Tools panel in the replay player and
+   jump-to-seek from the failing console or network row.
+
 ## Capture Defaults
 
 - Replay is off unless enabled by config/env.

package/corpus/templates/analytics/AGENTS.md

@@ -128,6 +128,8 @@ details live in `.agents/skills/`.
   runtimes use the in-process scheduler unless `ANALYTICS_ALERT_JOBS=0` is set.
   External cron callers can POST `/api/analytics-alerts/run` with
   `Authorization: Bearer $ANALYTICS_ALERTS_CRON_SECRET`.
+  Users can view and manage these rules in Settings under the Alerts card, which
+  uses the same action surface as the agent.
 
 ## Application State
 
@@ -153,6 +155,17 @@ details live in `.agents/skills/`.
   scoped to one recording for two hours; SSR embeds an agent discovery payload
   and the JSON APIs expose only summary/timeline metadata plus bounded event
   reads.
+- Recordings also capture console logs and network request metadata (no
+  bodies/headers, scrubbed URLs, truncated messages, per-session budgets);
+  ingest derives `errorCount`/`networkErrorCount` and adds
+  `console-error`/`network-error` timeline markers.
+- The agent context includes a bounded `diagnostics` section (errors first) and
+  advertises `GET /api/session-replay/agent-diagnostics.json` with
+  `kind`/`level`/`limit` params (limit max 500) under the same `agent_access`
+  token — the primary signal when debugging a user-reported issue.
+- The replay player has a Dev Tools panel with Console and Network tabs
+  (filters, search, jump-to-seek, error badge); extend it rather than adding a
+  separate replay debugging surface. See the `session-replay` skill.
 - Dashboard rows that include `recording_id` should link to
   `/sessions/:recordingId`; rows that only include `session_id` can link to a
   filtered `/sessions` search.

package/corpus/templates/analytics/actions/view-screen.ts

@@ -9,6 +9,7 @@ import {
 } from "@agent-native/core/server";
 import { z } from "zod";
 
+import { listAnalyticsAlertRules } from "../server/lib/analytics-alerts";
 import { listDashboardCatalog } from "../server/lib/dashboard-catalog";
 import { getAnalysis, getDashboard } from "../server/lib/dashboards-store";
 import { listAnalyticsPublicKeys } from "../server/lib/first-party-analytics.js";
@@ -195,6 +196,30 @@ export default defineAction({
       }
     } else if (nav?.view === "settings") {
       screen.page = "settings";
+      const email = getRequestUserEmail();
+      if (email) {
+        const orgId = getRequestOrgId() || null;
+        const alertRules = await listAnalyticsAlertRules({ email, orgId });
+        screen.analyticsAlerts = alertRules.map((rule) => ({
+          id: rule.id,
+          name: rule.name,
+          enabled: rule.enabled,
+          severity: rule.severity,
+          eventName: rule.eventName,
+          filters: rule.filters,
+          thresholdMode: rule.thresholdMode,
+          distinctBy: rule.distinctBy,
+          threshold: rule.threshold,
+          windowMinutes: rule.windowMinutes,
+          cooldownMinutes: rule.cooldownMinutes,
+          channels: rule.channels,
+          emailRecipients: rule.emailRecipients,
+          lastStatus: rule.lastStatus,
+          lastEvaluatedAt: rule.lastEvaluatedAt,
+          lastTriggeredAt: rule.lastTriggeredAt,
+          lastError: rule.lastError,
+        }));
+      }
     }
 
     if (Object.keys(screen).length === 0) {

package/corpus/templates/analytics/app/components/layout/Sidebar.tsx

@@ -1233,6 +1233,7 @@ function AnalyticsChatsSection() {
   const {
     threads,
     activeThreadId,
+    isLoading: chatsLoading,
     createThread,
     switchThread,
     pinThread,
@@ -1348,6 +1349,25 @@ function AnalyticsChatsSection() {
 
   return (
     <div className="ms-4 min-w-0 space-y-0.5">
+      {chatsLoading &&
+        visibleThreads.length === 0 &&
+        Array.from({ length: 3 }).map((_, i) => (
+          <div
+            key={`chat-skeleton-${i}`}
+            className="flex items-center gap-2 px-3 py-1"
+          >
+            <Skeleton
+              className={cn(
+                "h-3.5 w-3.5 shrink-0 rounded-sm",
+                SIDEBAR_SKELETON_CLASS,
+              )}
+            />
+            <Skeleton
+              className={cn("h-3 rounded", SIDEBAR_SKELETON_CLASS)}
+              style={{ width: `${60 + ((i * 17) % 30)}%` }}
+            />
+          </div>
+        ))}
       {visibleThreads.map((thread) => {
         const title = threadTitle(thread, t("chat.untitledChat"));
         const isActive =

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

@@ -215,9 +215,64 @@
 }
 
 .an-replay-stage-root .replayer-wrapper {
+  position: relative;
   transform-origin: top left;
 }
 
+/* First-party visitor-cursor styles for rrweb playback. These are bundled
+   statically so the cursor stays visible even if the lazily imported
+   `@rrweb/replay/dist/style.css` sheet fails to load, and they replace the
+   default black arrow sprite with an app-styled indicator. The cursor lives
+   inside `.replayer-wrapper`, so it scales with the fit-to-stage transform. */
+.an-replay-stage-root .replayer-mouse {
+  position: absolute;
+  z-index: 2;
+  width: 0.875rem;
+  height: 0.875rem;
+  border-radius: 9999px;
+  background: hsl(217 91% 60%);
+  background-image: none;
+  box-shadow:
+    0 0 0 2px hsl(0 0% 100% / 0.9),
+    0 1px 6px hsl(0 0% 0% / 0.35);
+  transform: translate(-50%, -50%);
+  transition:
+    left 80ms linear,
+    top 80ms linear;
+  pointer-events: none;
+}
+
+.an-replay-stage-root .replayer-mouse::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 9999px;
+  background: hsl(217 91% 60%);
+  opacity: 0;
+}
+
+/* rrweb toggles `.active` on mouse interactions; pulse a click ripple. */
+.an-replay-stage-root .replayer-mouse.active::after {
+  animation: an-replay-mouse-click 0.4s ease-out 1;
+}
+
+@keyframes an-replay-mouse-click {
+  0% {
+    opacity: 0.5;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(3.5);
+  }
+}
+
+.an-replay-stage-root .replayer-mouse-tail {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
 .analytics-session-snippet .plan-code-surface {
   border: 0;
   border-radius: 0;