@agent-native/core 0.90.11 → 0.91.0

package/corpus/templates/analytics/app/pages/monitoring/uptime/types.ts

@@ -0,0 +1,161 @@
+/**
+ * Client-side types for the uptime monitoring feature. These mirror the server
+ * shapes returned by the monitor actions (see server/lib/uptime-monitors.ts).
+ * Kept feature-local so the panel owns its own contract.
+ */
+import type {
+  ResponseTimePoint,
+  UptimeBucket,
+  UptimeWindows,
+} from "@/components/monitoring";
+
+export type MonitorMethod =
+  | "GET"
+  | "HEAD"
+  | "POST"
+  | "PUT"
+  | "PATCH"
+  | "DELETE"
+  | "OPTIONS";
+
+export type MonitorSeverity = "warning" | "critical";
+
+export type MonitorStatus =
+  | "up"
+  | "down"
+  | "degraded"
+  | "error"
+  | "unknown"
+  | "running";
+
+export type AssertionType =
+  | "body_contains"
+  | "body_absent"
+  | "header_contains"
+  | "header_equals"
+  | "max_latency_ms";
+
+export interface Assertion {
+  type: AssertionType;
+  value: string | number;
+  header?: string;
+}
+
+export type StatusMatcher =
+  | { mode: "class"; classes: string[] }
+  | { mode: "list"; codes: number[] }
+  | { mode: "range"; min: number; max: number };
+
+export interface MonitorSummary {
+  id: string;
+  name: string;
+  url: string;
+  method: MonitorMethod;
+  requestHeaders: Record<string, string>;
+  requestBody: string | null;
+  intervalSeconds: number;
+  timeoutMs: number;
+  expectedStatus: StatusMatcher;
+  assertions: Assertion[];
+  followRedirects: boolean;
+  severity: MonitorSeverity;
+  channels: string[];
+  emailRecipients: string[];
+  cooldownMinutes: number;
+  enabled: boolean;
+  lastStatus: MonitorStatus | null;
+  lastCheckedAt: string | null;
+  lastSuccessAt: string | null;
+  lastError: string | null;
+  lastLatencyMs: number | null;
+  lastStatusCode: number | null;
+  consecutiveFailures: number;
+  createdAt: string;
+  updatedAt: string;
+  ownerEmail: string;
+  orgId: string | null;
+  uptime24h: number | null;
+  uptime7d: number | null;
+  checks24h: number;
+}
+
+export interface MonitorCheckResult {
+  id: string;
+  monitorId: string;
+  checkedAt: string;
+  ok: boolean;
+  status: MonitorStatus;
+  statusCode: number | null;
+  latencyMs: number | null;
+  error: string | null;
+  failedAssertions: string[];
+}
+
+export interface MonitorIncident {
+  id: string;
+  monitorId: string;
+  startedAt: string;
+  resolvedAt: string | null;
+  status: MonitorStatus;
+  severity: MonitorSeverity;
+  cause: string;
+  lastError: string | null;
+  notificationId: string | null;
+  checksFailed: number;
+  createdAt: string;
+}
+
+export interface MonitorDetail {
+  monitor: MonitorSummary;
+  recentResults: MonitorCheckResult[];
+  incidents: MonitorIncident[];
+}
+
+/**
+ * Aggregated stats for one monitor, as returned by the `get-monitor-stats`
+ * action (one entry per requested monitor). Structurally identical to the
+ * server `MonitorStats` shape; the reusable chart components consume the
+ * `windows` / `timeline` / `responseSeries` fields directly.
+ */
+export interface MonitorStats {
+  monitorId: string;
+  status: MonitorStatus | null;
+  lastCheckedAt: string | null;
+  lastLatencyMs: number | null;
+  windows: UptimeWindows;
+  timeline: UptimeBucket[];
+  responseSeries: ResponseTimePoint[];
+  avgResponseMs: number | null;
+  incidentCount: number;
+  mtbfMs: number | null;
+}
+
+export interface CheckOutcome {
+  checkedAt: string;
+  status: MonitorStatus;
+  ok: boolean;
+  statusCode: number | null;
+  latencyMs: number | null;
+  error: string | null;
+  failedAssertions: string[];
+}
+
+/** Payload accepted by the save-monitor action. */
+export interface SaveMonitorInput {
+  id?: string;
+  name: string;
+  url: string;
+  method?: MonitorMethod;
+  requestHeaders?: Record<string, string>;
+  requestBody?: string | null;
+  intervalSeconds?: number;
+  timeoutMs?: number;
+  expectedStatus?: StatusMatcher;
+  assertions?: Assertion[];
+  followRedirects?: boolean;
+  severity?: MonitorSeverity;
+  channels?: string[];
+  emailRecipients?: string[];
+  cooldownMinutes?: number;
+  enabled?: boolean;
+}

package/corpus/templates/analytics/app/pages/monitoring/uptime/utils.ts

@@ -0,0 +1,210 @@
+/**
+ * Formatting + presentation helpers for the uptime monitoring UI. Pure
+ * functions only so they can be reused across the list, detail, and dialog.
+ */
+import { fmt } from "./i18n";
+import type { Assertion, MonitorStatus, StatusMatcher } from "./types";
+
+export function hostFromUrl(url: string): string {
+  try {
+    return new URL(url).host;
+  } catch {
+    return url;
+  }
+}
+
+/**
+ * Derive a friendly default monitor name from a URL: the host without a leading
+ * `www.` (e.g. `example.com` from `https://www.example.com/health`). Falls back
+ * to a best-effort parse for partial input so it still works while typing.
+ */
+export function deriveMonitorName(url: string): string {
+  const raw = (url ?? "").trim();
+  if (!raw) return "";
+  try {
+    return new URL(raw).host.replace(/^www\./i, "") || raw;
+  } catch {
+    return (
+      raw
+        .replace(/^[a-z][a-z0-9+.-]*:\/\//i, "")
+        .replace(/^www\./i, "")
+        .split(/[/?#]/, 1)[0]
+        ?.trim() ?? ""
+    );
+  }
+}
+
+export function isHttpUrl(url: string): boolean {
+  try {
+    const parsed = new URL(url);
+    return parsed.protocol === "http:" || parsed.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+
+export function formatRelativeTime(value: string | null): string | null {
+  if (!value) return null;
+  const then = Date.parse(value);
+  if (!Number.isFinite(then)) return null;
+  const diff = Date.now() - then;
+  const abs = Math.abs(diff);
+  const mins = Math.round(abs / 60000);
+  if (mins < 1) return "just now";
+  if (mins < 60) return diff >= 0 ? `${mins}m ago` : `in ${mins}m`;
+  const hours = Math.round(mins / 60);
+  if (hours < 24) return diff >= 0 ? `${hours}h ago` : `in ${hours}h`;
+  const days = Math.round(hours / 24);
+  return diff >= 0 ? `${days}d ago` : `in ${days}d`;
+}
+
+export function formatDateTime(value: string | null): string {
+  if (!value) return "—";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "—";
+  return date.toLocaleString(undefined, {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    second: "2-digit",
+  });
+}
+
+export function formatDuration(ms: number): string {
+  if (!Number.isFinite(ms) || ms < 0) return "—";
+  const secs = Math.round(ms / 1000);
+  if (secs < 60) return `${secs}s`;
+  const mins = Math.round(secs / 60);
+  if (mins < 60) return `${mins}m`;
+  const hours = Math.floor(mins / 60);
+  const rem = mins % 60;
+  if (hours < 24) return rem ? `${hours}h ${rem}m` : `${hours}h`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ${hours % 24}h`;
+}
+
+export function formatLatency(ms: number | null): string {
+  if (ms == null) return "—";
+  if (ms < 1000) return `${ms} ms`;
+  return `${(ms / 1000).toFixed(2)} s`;
+}
+
+export function formatUptime(pct: number | null): string {
+  if (pct == null) return "—";
+  if (pct >= 99.995) return "100%";
+  return `${pct.toFixed(pct >= 99.9 ? 2 : 1)}%`;
+}
+
+/** Health bucket for coloring: 3 states surfaced in the UI. */
+export type HealthTone = "up" | "down" | "degraded" | "neutral";
+
+export function statusTone(status: MonitorStatus | null): HealthTone {
+  switch (status) {
+    case "up":
+      return "up";
+    case "down":
+    case "error":
+      return "down";
+    case "degraded":
+      return "degraded";
+    default:
+      return "neutral";
+  }
+}
+
+export function toneDotClass(tone: HealthTone): string {
+  switch (tone) {
+    case "up":
+      return "bg-emerald-500";
+    case "down":
+      return "bg-red-500";
+    case "degraded":
+      return "bg-amber-500";
+    default:
+      return "bg-muted-foreground/40";
+  }
+}
+
+export function toneTextClass(tone: HealthTone): string {
+  switch (tone) {
+    case "up":
+      return "text-emerald-500";
+    case "down":
+      return "text-red-500";
+    case "degraded":
+      return "text-amber-500";
+    default:
+      return "text-muted-foreground";
+  }
+}
+
+export function statusLabel(
+  status: MonitorStatus | null,
+  t: {
+    statusUp: string;
+    statusDown: string;
+    statusDegraded: string;
+    statusError: string;
+    statusRunning: string;
+    statusUnknown: string;
+  },
+): string {
+  switch (status) {
+    case "up":
+      return t.statusUp;
+    case "down":
+      return t.statusDown;
+    case "degraded":
+      return t.statusDegraded;
+    case "error":
+      return t.statusError;
+    case "running":
+      return t.statusRunning;
+    default:
+      return t.statusUnknown;
+  }
+}
+
+export function describeMatcher(
+  matcher: StatusMatcher,
+  t: { matcherClass: string; matcherList: string; matcherRange: string },
+): string {
+  if (matcher.mode === "class") {
+    return fmt(t.matcherClass, {
+      classes: matcher.classes.join(", ").toUpperCase(),
+    });
+  }
+  if (matcher.mode === "list") {
+    return fmt(t.matcherList, { codes: matcher.codes.join(", ") });
+  }
+  return fmt(t.matcherRange, { min: matcher.min, max: matcher.max });
+}
+
+export function describeAssertion(
+  assertion: Assertion,
+  t: {
+    assertBodyContains: string;
+    assertBodyAbsent: string;
+    assertHeaderContains: string;
+    assertHeaderEquals: string;
+    assertMaxLatency: string;
+  },
+): string {
+  const value = String(assertion.value);
+  const header = assertion.header ?? "";
+  switch (assertion.type) {
+    case "body_contains":
+      return fmt(t.assertBodyContains, { value });
+    case "body_absent":
+      return fmt(t.assertBodyAbsent, { value });
+    case "header_contains":
+      return fmt(t.assertHeaderContains, { header, value });
+    case "header_equals":
+      return fmt(t.assertHeaderEquals, { header, value });
+    case "max_latency_ms":
+      return fmt(t.assertMaxLatency, { value });
+    default:
+      return value;
+  }
+}

package/corpus/templates/analytics/app/pages/sessions/SessionDetailPage.tsx

@@ -1,6 +1,7 @@
 import {
   AgentToggleButton,
   appApiPath,
+  callAction,
   PromptComposer,
   useActionMutation,
   useSendToAgentChat,
@@ -25,6 +26,7 @@ import {
   IconTerminal2,
   IconTimelineEvent,
 } from "@tabler/icons-react";
+import { useQuery } from "@tanstack/react-query";
 import {
   type ReactNode,
   useCallback,
@@ -53,7 +55,10 @@ import { getIdToken } from "@/lib/auth";
 import { cn } from "@/lib/utils";
 
 import { extractReplayDiagnostics } from "./session-replay-devtools";
-import { SessionDevToolsPanel } from "./SessionDevToolsPanel";
+import {
+  type SessionIssueMatch,
+  SessionDevToolsPanel,
+} from "./SessionDevToolsPanel";
 
 type SessionRecordingSummary = {
   id: string;
@@ -167,6 +172,42 @@ const EMPTY_DIAGNOSTICS: ReturnType<typeof extractReplayDiagnostics> = {
   networkFailedCount: 0,
 };
 
+type ReplayConsoleDiagnostics = ReturnType<
+  typeof extractReplayDiagnostics
+>["console"];
+
+type ConsoleErrorSignaturePayload = {
+  key: string;
+  source: string;
+  message: string;
+  stack?: string;
+};
+
+/**
+ * Distill the resolvable error lines from a session's console diagnostics for
+ * issue matching. Only error-level lines are worth sending: window errors,
+ * unhandled rejections, and manual `captureException` all surface at `error`
+ * level with a serialized `Name: message` (+ stack) that the server can
+ * fingerprint back to a captured issue. Non-error console lines are left alone,
+ * and anything without a captured issue simply comes back unmatched.
+ */
+function buildConsoleErrorSignatures(
+  entries: ReplayConsoleDiagnostics,
+): ConsoleErrorSignaturePayload[] {
+  const signatures: ConsoleErrorSignaturePayload[] = [];
+  for (const entry of entries) {
+    if (entry.level !== "error" || !entry.message) continue;
+    signatures.push({
+      key: entry.id,
+      source: entry.source,
+      message: entry.message,
+      ...(entry.stack ? { stack: entry.stack } : {}),
+    });
+    if (signatures.length >= 100) break;
+  }
+  return signatures;
+}
+
 const RRWEB_EVENT_TYPE = {
   FullSnapshot: 2,
   IncrementalSnapshot: 3,
@@ -459,6 +500,39 @@ function ReplayPlayer({
   const devToolsIssueCount = devToolsOpen
     ? diagnostics.consoleErrorCount + diagnostics.networkFailedCount
     : response.recording.errorCount;
+
+  // Resolve captured console errors in this replay to their Sentry-style issue
+  // groups (one batched, access-scoped call, server-computed fingerprints) so
+  // each error can deep-link to its full issue detail. Only runs once devtools
+  // are open and there is at least one error line worth looking up.
+  const errorSignatures = useMemo(
+    () => buildConsoleErrorSignatures(diagnostics.console),
+    [diagnostics.console],
+  );
+  const errorSignaturesKey = useMemo(
+    () => JSON.stringify(errorSignatures),
+    [errorSignatures],
+  );
+  const recordingId = response.recording.id;
+  const issueMatchQuery = useQuery({
+    queryKey: ["match-error-issues", recordingId, errorSignaturesKey],
+    queryFn: () =>
+      callAction<Record<string, SessionIssueMatch>>(
+        "match-error-issues",
+        { signatures: errorSignatures },
+        { method: "POST" },
+      ),
+    enabled: devToolsOpen && errorSignatures.length > 0,
+    staleTime: 60_000,
+  });
+  const issueMatches = useMemo(() => {
+    const map = new Map<string, SessionIssueMatch>();
+    const data = issueMatchQuery.data;
+    if (data) {
+      for (const [key, value] of Object.entries(data)) map.set(key, value);
+    }
+    return map;
+  }, [issueMatchQuery.data]);
   const loadingPercent =
     response.totalChunks > 0
       ? clamp(response.loadedChunks / response.totalChunks, 0, 1)
@@ -929,6 +1003,7 @@ function ReplayPlayer({
               height={devToolsHeight}
               onHeightChange={setDevToolsHeight}
               onSeek={(ms) => seek(ms, true)}
+              issueMatches={issueMatches}
             />
           ) : null}
 

package/corpus/templates/analytics/app/pages/sessions/SessionDevToolsPanel.tsx

@@ -1,5 +1,6 @@
 import { useT } from "@agent-native/core/client";
 import {
+  IconArrowUpRight,
   IconChevronRight,
   IconCloudDataConnection,
   IconPlayerPlay,
@@ -14,11 +15,13 @@ import {
   useRef,
   useState,
 } from "react";
+import { Link } from "react-router";
 
 import { Input } from "@/components/ui/input";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { cn } from "@/lib/utils";
 
+import { useErrorsT } from "../monitoring/errors/i18n";
 import {
   type ConsoleLevelFilter,
   consoleLevelBucket,
@@ -34,6 +37,18 @@ import {
   type ReplayNetworkEntry,
 } from "./session-replay-devtools";
 
+/**
+ * A session console error line resolved to its captured, Sentry-style issue.
+ * Keyed by `ReplayConsoleEntry.id`, computed server-side by `match-error-issues`
+ * so the resolution shares one fingerprint implementation with ingest.
+ */
+export type SessionIssueMatch = { issueId: string; status: string };
+
+/** Deep-link from a session error to the Monitoring → Errors issue detail. */
+function issueDetailPath(issueId: string): string {
+  return `/monitoring?view=errors&issue=${encodeURIComponent(issueId)}`;
+}
+
 /** Pause row auto-follow for a while after the user scrolls the list. */
 const MANUAL_SCROLL_FOLLOW_PAUSE_MS = 4000;
 const DEVTOOLS_ROW_HEIGHT = 34;
@@ -47,12 +62,15 @@ export function SessionDevToolsPanel({
   height,
   onHeightChange,
   onSeek,
+  issueMatches,
 }: {
   diagnostics: ReplayDevToolsDiagnostics;
   currentTime: number;
   height: number;
   onHeightChange: (height: number) => void;
   onSeek: (ms: number) => void;
+  /** Resolved error issues by console entry id, for cross-linking to Errors. */
+  issueMatches?: ReadonlyMap<string, SessionIssueMatch>;
 }) {
   const t = useT();
   const [tab, setTab] = useState<"console" | "network">("console");
@@ -222,6 +240,7 @@ export function SessionDevToolsPanel({
                 entry={entry}
                 active={entry.id === activeConsoleId}
                 selected={entry.id === selectedConsoleId}
+                issueMatch={issueMatches?.get(entry.id) ?? null}
                 onSelect={() =>
                   setSelectedConsoleId((current) =>
                     current === entry.id ? null : entry.id,
@@ -232,7 +251,11 @@ export function SessionDevToolsPanel({
             )}
           />
           {selectedConsole ? (
-            <ConsoleDetailPane entry={selectedConsole} onSeek={onSeek} />
+            <ConsoleDetailPane
+              entry={selectedConsole}
+              issueMatch={issueMatches?.get(selectedConsole.id) ?? null}
+              onSeek={onSeek}
+            />
           ) : null}
         </TabsContent>
 
@@ -550,16 +573,47 @@ function JumpToButton({
   );
 }
 
+/**
+ * Compact link from a captured session error to its Errors issue detail. Kept
+ * outside the row's toggle `<button>` (an anchor nested in a button is invalid)
+ * and stops click propagation so following the link never also toggles/seeks.
+ */
+function ViewIssueLink({
+  issueId,
+  className,
+}: {
+  issueId: string;
+  className?: string;
+}) {
+  const et = useErrorsT();
+  return (
+    <Link
+      to={issueDetailPath(issueId)}
+      title={et.viewIssueTooltip}
+      onClick={(event) => event.stopPropagation()}
+      className={cn(
+        "inline-flex shrink-0 items-center gap-1 rounded border border-primary/40 bg-primary/10 px-1.5 py-0.5 text-[11px] font-medium text-primary transition-colors hover:bg-primary/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        className,
+      )}
+    >
+      <IconArrowUpRight className="h-3 w-3" />
+      {et.viewIssue}
+    </Link>
+  );
+}
+
 function ConsoleRow({
   entry,
   active,
   selected,
+  issueMatch,
   onSelect,
   onSeek,
 }: {
   entry: ReplayConsoleEntry;
   active: boolean;
   selected: boolean;
+  issueMatch: SessionIssueMatch | null;
   onSelect: () => void;
   onSeek: (ms: number) => void;
 }) {
@@ -621,6 +675,7 @@ function ConsoleRow({
           )}
         />
       </button>
+      {issueMatch ? <ViewIssueLink issueId={issueMatch.issueId} /> : null}
       <JumpToButton offsetMs={entry.offsetMs} onSeek={onSeek} />
     </div>
   );
@@ -709,15 +764,20 @@ function NetworkRow({
 
 function ConsoleDetailPane({
   entry,
+  issueMatch,
   onSeek,
 }: {
   entry: ReplayConsoleEntry;
+  issueMatch: SessionIssueMatch | null;
   onSeek: (ms: number) => void;
 }) {
   const t = useT();
   return (
     <DevToolsDetailPane
       title={`${entry.level} at ${formatOffsetClock(entry.offsetMs)}`}
+      action={
+        issueMatch ? <ViewIssueLink issueId={issueMatch.issueId} /> : null
+      }
       onSeek={() => onSeek(entry.offsetMs)}
     >
       <DetailField label={t("sessions.devtoolsMessage")}>
@@ -813,10 +873,12 @@ function NetworkDetailPane({
 function DevToolsDetailPane({
   title,
   onSeek,
+  action,
   children,
 }: {
   title: string;
   onSeek: () => void;
+  action?: ReactNode;
   children: ReactNode;
 }) {
   const t = useT();
@@ -826,14 +888,17 @@ function DevToolsDetailPane({
         <p className="truncate text-xs font-semibold text-foreground">
           {title}
         </p>
-        <button
-          type="button"
-          className="inline-flex shrink-0 items-center gap-1 rounded border px-1.5 py-0.5 text-[11px] font-medium text-muted-foreground hover:bg-muted hover:text-foreground"
-          onClick={onSeek}
-        >
-          <IconPlayerPlay className="h-3 w-3" />
-          {t("sessions.devtoolsJumpTo")}
-        </button>
+        <div className="flex shrink-0 items-center gap-1.5">
+          {action}
+          <button
+            type="button"
+            className="inline-flex shrink-0 items-center gap-1 rounded border px-1.5 py-0.5 text-[11px] font-medium text-muted-foreground hover:bg-muted hover:text-foreground"
+            onClick={onSeek}
+          >
+            <IconPlayerPlay className="h-3 w-3" />
+            {t("sessions.devtoolsJumpTo")}
+          </button>
+        </div>
       </div>
       <div className="space-y-2">{children}</div>
     </div>