@agent-native/core 0.92.0 → 0.92.1

package/corpus/templates/analytics/app/pages/analyses/AnalysisDetail.tsx

@@ -12,15 +12,17 @@ import {
   IconClock,
   IconArrowLeft,
   IconDatabase,
+  IconHistory,
   IconLock,
   IconUsersGroup,
   IconWorld,
 } from "@tabler/icons-react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useParams } from "react-router";
 import { Link, useNavigate } from "react-router";
 
+import { AnalysisHistoryPanel } from "@/components/analysis/AnalysisHistoryPanel";
 import {
   useSetPageTitle,
   useSetHeaderActions,
@@ -104,6 +106,7 @@ export default function AnalysisDetail() {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
   const { send, isGenerating, codeRequiredDialog } = useSendToAgentChat();
+  const [historyOpen, setHistoryOpen] = useState(false);
 
   const analysesSync = useChangeVersions(["analyses", "action"]);
   const { data: analysis, isLoading } = useQuery({
@@ -182,6 +185,14 @@ export default function AnalysisDetail() {
           resourceTitle={analysis.name}
           variant="compact"
         />
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => setHistoryOpen(true)}
+        >
+          <IconHistory className="h-4 w-4" />
+          {t("analyses.historyTitle")}
+        </Button>
         {canEdit ? (
           <Tooltip>
             <TooltipTrigger asChild>
@@ -254,6 +265,12 @@ export default function AnalysisDetail() {
   return (
     <>
       {codeRequiredDialog}
+      <AnalysisHistoryPanel
+        analysisId={analysis.id}
+        open={historyOpen}
+        onOpenChange={setHistoryOpen}
+        canRestore={canEdit}
+      />
       <div
         className={cn(
           "space-y-6",

package/corpus/templates/analytics/app/pages/monitoring/ErrorsPanel.tsx

@@ -59,18 +59,15 @@ export function ErrorsPanel() {
     [status, debouncedSearch],
   );
 
-  const { data, isLoading, isFetching, error, refetch } = useActionQuery<
-    ErrorIssueSummary[]
-  >("list-error-issues", queryArgs, { staleTime: 10_000 });
-
-  const resolveIssue = useActionMutation<
-    { id: string; status: IssueStatus; assignee: string | null },
-    { id: string; status: IssueStatus }
-  >("resolve-error-issue");
-  const sendTest = useActionMutation<{ issueId: string }, { message?: string }>(
-    "capture-test-error",
+  const { data, isLoading, isFetching, error, refetch } = useActionQuery(
+    "list-error-issues",
+    queryArgs,
+    { staleTime: 10_000 },
   );
 
+  const resolveIssue = useActionMutation("resolve-error-issue");
+  const sendTest = useActionMutation("capture-test-error");
+
   const issues = useMemo(() => (Array.isArray(data) ? data : []), [data]);
 
   // Refresh list + detail when a capture or agent edit records an

package/corpus/templates/analytics/app/pages/monitoring/errors/IssueDetail.tsx

@@ -15,8 +15,8 @@ import { cn } from "@/lib/utils";
 
 import { fmt, useErrorsT } from "./i18n";
 import type {
+  ErrorBreadcrumb,
   ErrorEventDetail,
-  ErrorIssueDetail,
   ErrorIssueSummary,
   IssueStatus,
   ParsedStackFrame,
@@ -31,6 +31,8 @@ import {
   useStatusLabel,
 } from "./utils";
 
+const DEFAULT_FREQUENCY_DAYS = 14;
+
 export function IssueDetail({
   issueId,
   fallback,
@@ -47,7 +49,7 @@ export function IssueDetail({
   const t = useErrorsT();
   const statusLabel = useStatusLabel();
 
-  const { data, isLoading, error } = useActionQuery<ErrorIssueDetail>(
+  const { data, isLoading, error } = useActionQuery(
     "get-error-issue",
     { id: issueId },
     { staleTime: 10_000 },
@@ -158,6 +160,7 @@ export function IssueDetail({
       </div>
 
       {issue ? <OverviewGrid issue={issue} latest={latest} /> : null}
+      {issue ? <FrequencyCard issue={issue} /> : null}
 
       {isLoading && !latest ? (
         <Card>
@@ -169,6 +172,7 @@ export function IssueDetail({
       ) : (
         <>
           <StackTraceCard event={latest} />
+          {latest ? <LatestOccurrenceCard event={latest} /> : null}
           <BreadcrumbsCard event={latest} />
           <OccurrencesCard events={events} />
         </>
@@ -177,6 +181,79 @@ export function IssueDetail({
   );
 }
 
+function hasEntries(value: Record<string, unknown>): boolean {
+  return Object.keys(value).length > 0;
+}
+
+function JsonBlock({ value }: { value: Record<string, unknown> }) {
+  return (
+    <pre className="mt-2 max-h-52 overflow-auto rounded-md bg-muted/50 p-3 text-xs leading-relaxed text-foreground">
+      {JSON.stringify(value, null, 2)}
+    </pre>
+  );
+}
+
+function LatestOccurrenceCard({ event }: { event: ErrorEventDetail }) {
+  const t = useErrorsT();
+  const details: Array<{ label: string; value: string }> = [
+    {
+      label: t.occurrenceTime,
+      value: formatDateTime(event.occurredAt),
+    },
+    {
+      label: t.handled,
+      value: event.handled ? t.handled : t.unhandled,
+    },
+  ];
+  if (event.url) details.push({ label: t.url, value: event.url });
+
+  return (
+    <Card>
+      <CardContent className="space-y-4 p-4">
+        <div className="text-sm font-medium">{t.latestOccurrence}</div>
+        {event.message ? (
+          <div>
+            <div className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+              {t.message}
+            </div>
+            <p className="mt-1 whitespace-pre-wrap rounded-md bg-muted/40 p-3 font-mono text-xs text-foreground">
+              {event.message}
+            </p>
+          </div>
+        ) : null}
+        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          {details.map((item) => (
+            <div key={item.label} className="min-w-0">
+              <div className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                {item.label}
+              </div>
+              <div className="mt-0.5 truncate text-sm text-foreground">
+                {item.value}
+              </div>
+            </div>
+          ))}
+        </div>
+        {hasEntries(event.tags) ? (
+          <div>
+            <div className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+              {t.tags}
+            </div>
+            <JsonBlock value={event.tags} />
+          </div>
+        ) : null}
+        {hasEntries(event.extra) ? (
+          <div>
+            <div className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+              {t.additionalData}
+            </div>
+            <JsonBlock value={event.extra} />
+          </div>
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+}
+
 function OverviewGrid({
   issue,
   latest,
@@ -214,55 +291,207 @@ function OverviewGrid({
   );
 }
 
+function FrequencyCard({ issue }: { issue: ErrorIssueSummary }) {
+  const t = useErrorsT();
+  const values = (
+    issue.sparkline?.length
+      ? issue.sparkline
+      : new Array(DEFAULT_FREQUENCY_DAYS).fill(0)
+  ).map((value) => (Number.isFinite(value) ? Math.max(0, value) : 0));
+  const max = Math.max(1, ...values);
+  const total = values.reduce((sum, value) => sum + value, 0);
+  const dayLabels = buildFrequencyDayLabels(values.length);
+  const barClass = frequencyBarClass(issue.level);
+
+  return (
+    <Card>
+      <CardContent className="space-y-4 p-4">
+        <div className="flex flex-wrap items-start justify-between gap-3">
+          <div>
+            <div className="text-sm font-medium">{t.frequency}</div>
+            <div className="text-xs text-muted-foreground">
+              {fmt(t.frequencyWindow, { days: values.length })}
+            </div>
+          </div>
+          <div className="text-end">
+            <div className="text-sm font-semibold text-foreground">
+              {formatNumber(total)}
+            </div>
+            <div className="text-[11px] uppercase tracking-wide text-muted-foreground">
+              {t.recentOccurrences}
+            </div>
+          </div>
+        </div>
+
+        <div className="flex h-28 items-end gap-1 border-b border-border/60 pb-2">
+          {values.map((count, index) => {
+            const height = count === 0 ? 4 : Math.max(12, (count / max) * 100);
+            const label = fmt(t.frequencyBarLabel, {
+              count,
+              date: dayLabels[index]?.long ?? "",
+            });
+            return (
+              <div
+                key={`${dayLabels[index]?.iso ?? index}-${index}`}
+                className="flex h-full flex-1 items-end"
+                title={label}
+                aria-label={label}
+              >
+                <div
+                  className={cn(
+                    "w-full rounded-t-sm transition-colors",
+                    count > 0 ? barClass : "bg-muted-foreground/15",
+                  )}
+                  style={{ height: `${height}%` }}
+                />
+              </div>
+            );
+          })}
+        </div>
+
+        <div className="flex items-center justify-between text-[11px] text-muted-foreground">
+          <span>{dayLabels[0]?.short}</span>
+          {total === 0 ? <span>{t.noRecentVolume}</span> : null}
+          <span>{dayLabels[dayLabels.length - 1]?.short}</span>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function frequencyBarClass(level: ErrorIssueSummary["level"]): string {
+  switch (level) {
+    case "fatal":
+      return "bg-red-500/85 hover:bg-red-400";
+    case "error":
+      return "bg-rose-500/85 hover:bg-rose-400";
+    case "warning":
+      return "bg-amber-400/85 hover:bg-amber-300";
+    case "info":
+      return "bg-sky-400/85 hover:bg-sky-300";
+    case "debug":
+    default:
+      return "bg-violet-400/75 hover:bg-violet-300";
+  }
+}
+
+function buildFrequencyDayLabels(days: number): Array<{
+  iso: string;
+  short: string;
+  long: string;
+}> {
+  const formatter = new Intl.DateTimeFormat(undefined, {
+    month: "short",
+    day: "numeric",
+  });
+  return Array.from({ length: Math.max(1, days) }, (_, index) => {
+    const date = new Date();
+    date.setHours(0, 0, 0, 0);
+    date.setDate(date.getDate() - (days - 1 - index));
+    return {
+      iso: date.toISOString().slice(0, 10),
+      short: formatter.format(date),
+      long: formatter.format(date),
+    };
+  });
+}
+
 function StackTraceCard({ event }: { event?: ErrorEventDetail }) {
   const t = useErrorsT();
   const frames = event?.stack ?? [];
+  const rawStack = event?.rawStack?.trim() ?? "";
+  const headline =
+    rawStack.split("\n")[0]?.trim() ||
+    (event ? `${event.type}: ${event.message}` : "");
 
   return (
     <Card>
       <CardContent className="p-0">
-        <div className="border-b px-4 py-3 text-sm font-medium">
-          {t.stackTrace}
+        <div className="flex flex-wrap items-center justify-between gap-2 border-b px-4 py-3">
+          <div>
+            <div className="text-sm font-medium">{t.stackTrace}</div>
+            {headline ? (
+              <div className="mt-0.5 truncate font-mono text-xs text-muted-foreground">
+                {headline}
+              </div>
+            ) : null}
+          </div>
+          {frames.length > 0 ? (
+            <span className="rounded-full border bg-muted/30 px-2 py-0.5 text-[11px] font-medium text-muted-foreground">
+              {fmt(t.stackFrameCount, { count: frames.length })}
+            </span>
+          ) : null}
         </div>
         {frames.length === 0 ? (
           <p className="p-4 text-sm text-muted-foreground">{t.noStack}</p>
         ) : (
-          <ol className="divide-y divide-border/40 font-mono text-xs">
+          <ol className="divide-y divide-border/40">
             {frames.map((frame, index) => (
-              <StackFrameRow key={index} frame={frame} />
+              <StackFrameRow key={index} frame={frame} index={index} />
             ))}
           </ol>
         )}
+        {rawStack ? (
+          <details className="border-t px-4 py-3">
+            <summary className="cursor-pointer text-xs font-medium text-muted-foreground transition-colors hover:text-foreground">
+              {t.rawStack}
+            </summary>
+            <pre className="mt-3 max-h-72 overflow-auto rounded-md bg-muted/40 p-3 font-mono text-xs leading-relaxed text-foreground">
+              {rawStack}
+            </pre>
+          </details>
+        ) : null}
       </CardContent>
     </Card>
   );
 }
 
-function StackFrameRow({ frame }: { frame: ParsedStackFrame }) {
+function StackFrameRow({
+  frame,
+  index,
+}: {
+  frame: ParsedStackFrame;
+  index: number;
+}) {
   const t = useErrorsT();
+  const location = stackFrameLocation(frame);
+
   return (
     <li
       className={cn(
-        "flex flex-wrap items-baseline gap-x-2 px-4 py-2",
-        frame.inApp ? "bg-transparent" : "bg-muted/20 text-muted-foreground",
+        "grid gap-3 px-4 py-3 sm:grid-cols-[auto_1fr_auto]",
+        frame.inApp ? "bg-background" : "bg-muted/20 text-muted-foreground",
       )}
     >
-      <span
-        className={cn(
-          "font-semibold",
-          frame.inApp ? "text-foreground" : "text-muted-foreground",
-        )}
-      >
-        {frame.function || "<anonymous>"}
-      </span>
-      <span className="text-muted-foreground">
-        {shortFrameFile(frame.file)}
-        {frame.lineno != null ? `:${frame.lineno}` : ""}
-        {frame.colno != null ? `:${frame.colno}` : ""}
+      <span className="flex size-6 shrink-0 items-center justify-center rounded-md bg-muted/35 font-mono text-[11px] text-muted-foreground">
+        {index + 1}
       </span>
+      <div className="min-w-0">
+        <div className="flex flex-wrap items-baseline gap-x-2 gap-y-1 font-mono text-xs">
+          <span
+            className={cn(
+              "font-semibold",
+              frame.inApp ? "text-foreground" : "text-muted-foreground",
+            )}
+          >
+            {frame.function || "<anonymous>"}
+          </span>
+          <span className="min-w-0 truncate text-muted-foreground">
+            {location}
+          </span>
+        </div>
+        {frame.raw ? (
+          <pre className="mt-2 overflow-x-auto rounded-md bg-muted/25 px-3 py-2 font-mono text-[11px] leading-relaxed text-muted-foreground">
+            {frame.raw}
+          </pre>
+        ) : null}
+        {frame.sourceContext?.length ? (
+          <SourceContextBlock lines={frame.sourceContext} />
+        ) : null}
+      </div>
       <span
         className={cn(
-          "ms-auto rounded px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide",
+          "h-fit rounded px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide sm:justify-self-end",
           frame.inApp
             ? "bg-primary/10 text-primary"
             : "bg-muted text-muted-foreground",
@@ -274,9 +503,236 @@ function StackFrameRow({ frame }: { frame: ParsedStackFrame }) {
   );
 }
 
+function SourceContextBlock({
+  lines,
+}: {
+  lines: NonNullable<ParsedStackFrame["sourceContext"]>;
+}) {
+  return (
+    <div className="mt-2 overflow-hidden rounded-md bg-muted/20">
+      <div className="overflow-x-auto font-mono text-[11px] leading-relaxed">
+        {lines.map((line) => (
+          <div
+            key={line.line}
+            className={cn(
+              "grid min-w-max grid-cols-[3rem_1fr]",
+              line.highlight
+                ? "bg-rose-500/10 text-foreground"
+                : "text-muted-foreground",
+            )}
+          >
+            <span
+              className={cn(
+                "select-none px-2 py-0.5 text-end",
+                line.highlight ? "text-rose-300" : "text-muted-foreground/70",
+              )}
+            >
+              {line.line}
+            </span>
+            <code className="whitespace-pre px-3 py-0.5">
+              <HighlightedSourceLine text={line.text || " "} />
+            </code>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+type SourceTokenKind =
+  | "keyword"
+  | "string"
+  | "number"
+  | "comment"
+  | "literal"
+  | "function"
+  | "operator"
+  | "plain";
+
+const JS_KEYWORDS = new Set([
+  "as",
+  "async",
+  "await",
+  "break",
+  "case",
+  "catch",
+  "class",
+  "const",
+  "continue",
+  "default",
+  "do",
+  "else",
+  "export",
+  "extends",
+  "finally",
+  "for",
+  "from",
+  "function",
+  "if",
+  "import",
+  "in",
+  "interface",
+  "let",
+  "new",
+  "of",
+  "return",
+  "switch",
+  "throw",
+  "try",
+  "type",
+  "typeof",
+  "var",
+  "while",
+]);
+
+const JS_LITERALS = new Set(["false", "null", "true", "undefined"]);
+
+function HighlightedSourceLine({ text }: { text: string }) {
+  return (
+    <>
+      {tokenizeSourceLine(text).map((token, index) => (
+        <span
+          key={`${index}-${token.text}`}
+          className={sourceTokenClass(token.kind)}
+        >
+          {token.text}
+        </span>
+      ))}
+    </>
+  );
+}
+
+function tokenizeSourceLine(
+  text: string,
+): Array<{ text: string; kind: SourceTokenKind }> {
+  const tokens: Array<{ text: string; kind: SourceTokenKind }> = [];
+  let index = 0;
+
+  const push = (value: string, kind: SourceTokenKind) => {
+    if (value) tokens.push({ text: value, kind });
+  };
+
+  while (index < text.length) {
+    const rest = text.slice(index);
+
+    if (rest.startsWith("//")) {
+      push(rest, "comment");
+      break;
+    }
+
+    const quote = text[index];
+    if (quote === '"' || quote === "'" || quote === "`") {
+      let end = index + 1;
+      let escaped = false;
+      while (end < text.length) {
+        const char = text[end];
+        if (escaped) {
+          escaped = false;
+        } else if (char === "\\") {
+          escaped = true;
+        } else if (char === quote) {
+          end += 1;
+          break;
+        }
+        end += 1;
+      }
+      push(text.slice(index, end), "string");
+      index = end;
+      continue;
+    }
+
+    const number = rest.match(/^\b\d+(?:\.\d+)?\b/);
+    if (number) {
+      push(number[0], "number");
+      index += number[0].length;
+      continue;
+    }
+
+    const word = rest.match(/^[A-Za-z_$][\w$]*/);
+    if (word) {
+      const value = word[0];
+      const after = text.slice(index + value.length);
+      const kind: SourceTokenKind = JS_KEYWORDS.has(value)
+        ? "keyword"
+        : JS_LITERALS.has(value)
+          ? "literal"
+          : /^\s*\(/.test(after)
+            ? "function"
+            : "plain";
+      push(value, kind);
+      index += value.length;
+      continue;
+    }
+
+    const operator = rest.match(/^[{}()[\].,;:?=+\-*/!<>|&%]+/);
+    if (operator) {
+      push(operator[0], "operator");
+      index += operator[0].length;
+      continue;
+    }
+
+    push(text[index], "plain");
+    index += 1;
+  }
+
+  return tokens.length ? tokens : [{ text: " ", kind: "plain" }];
+}
+
+function sourceTokenClass(kind: SourceTokenKind): string {
+  switch (kind) {
+    case "keyword":
+      return "text-fuchsia-300";
+    case "string":
+      return "text-emerald-300";
+    case "number":
+      return "text-amber-300";
+    case "comment":
+      return "text-muted-foreground/65 italic";
+    case "literal":
+      return "text-orange-300";
+    case "function":
+      return "text-sky-300";
+    case "operator":
+      return "text-muted-foreground";
+    case "plain":
+    default:
+      return "";
+  }
+}
+
+function stackFrameLocation(frame: ParsedStackFrame): string {
+  return [
+    shortFrameFile(frame.file),
+    frame.lineno != null ? frame.lineno : null,
+    frame.colno != null ? frame.colno : null,
+  ]
+    .filter((part) => part !== null && part !== "")
+    .join(":");
+}
+
+function normalizeBreadcrumb(value: unknown): ErrorBreadcrumb | null {
+  if (typeof value === "string" && value.trim()) {
+    return { message: value.trim() };
+  }
+  if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+
+  const record = value as Record<string, unknown>;
+  const timestamp =
+    typeof record.timestamp === "string" ? record.timestamp : undefined;
+  const category =
+    typeof record.category === "string" ? record.category : undefined;
+  const message =
+    typeof record.message === "string" ? record.message : undefined;
+
+  if (!timestamp && !category && !message) return null;
+  return { timestamp, category, message };
+}
+
 function BreadcrumbsCard({ event }: { event?: ErrorEventDetail }) {
   const t = useErrorsT();
-  const crumbs = event?.breadcrumbs ?? [];
+  const crumbs = (event?.breadcrumbs ?? [])
+    .map(normalizeBreadcrumb)
+    .filter((crumb): crumb is ErrorBreadcrumb => Boolean(crumb));
 
   return (
     <Card>

package/corpus/templates/analytics/app/pages/monitoring/errors/IssueList.tsx

@@ -145,15 +145,6 @@ export function IssueList({
               className={cn("size-3.5", isFetching && "animate-spin")}
             />
           </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={onSendTestError}
-            disabled={sendingTest}
-          >
-            <IconBug className="size-3.5" />
-            {sendingTest ? t.sending : t.sendTestError}
-          </Button>
         </div>
       </div>
 

package/corpus/templates/analytics/app/pages/monitoring/errors/i18n.ts

@@ -57,7 +57,18 @@ const MESSAGES = {
     metaUsers: "Users affected",
     metaEnvironment: "Environment",
     metaRelease: "Release",
+    frequency: "Error frequency",
+    frequencyWindow: "Last {days} days",
+    frequencyBarLabel: "{count} occurrences on {date}",
+    recentOccurrences: "recent",
+    noRecentVolume: "No recent volume",
+    latestOccurrence: "Latest occurrence",
+    message: "Message",
+    url: "URL",
+    occurrenceTime: "Occurred",
     stackTrace: "Stack trace",
+    stackFrameCount: "{count} frames",
+    rawStack: "Raw stack",
     noStack: "No stack trace was captured for this error.",
     inApp: "In app",
     vendor: "Vendor",