Aurora AI Stack Trace

1"use client"
2 
3import * as React from "react"
4import { CircleAlert } from "lucide-react"
5import { cn } from "@/lib/utils"
6import { Badge } from "@/registry/aurora/ui/badge"
7 
8/**
9 * StackTrace — an error stack-trace panel.
10 *
11 * Architecture is the canonical shadcn-registry pattern: a self-contained
12 * `forwardRef` component with a typed prop API. Visuals match the Aurora /
13 * Claude Design source 1:1 — a raised panel with a rose-tinted alert tile, a
14 * bold display title, the error message in monospace, then numbered frames.
15 * Each frame shows its index, the function name (cyan for app frames, dimmed
16 * for vendor frames), an optional VENDOR tag, and the file:line:column origin.
17 * Vendor frames (anything under `node_modules`) are dimmed and tagged.
18 */
19 
20export interface StackFrame {
21  /** Function / method name for this frame. */
22  fn?: string
23  /** Source file path. */
24  file: string
25  /** 1-based line number. */
26  line?: number
27  /** 1-based column number. */
28  column?: number
29  /**
30   * Force the vendor treatment (dimmed row + VENDOR tag). When omitted it is
31   * inferred from the file path (`node_modules`).
32   */
33  vendor?: boolean
34  /** Optional secondary label rendered under the origin. */
35  label?: string
36}
37 
38export interface StackTraceProps extends React.HTMLAttributes<HTMLDivElement> {
39  /** Title shown beside the alert tile. */
40  title?: string
41  /** The error message rendered under the title. */
42  error?: string
43  /** Ordered stack frames, top of stack first. */
44  frames: StackFrame[]
45}
46 
47function isVendorFrame(frame: StackFrame): boolean {
48  if (typeof frame.vendor === "boolean") return frame.vendor
49  return /(^|\/)node_modules\//.test(frame.file)
50}
51 
52function formatOrigin(frame: StackFrame): string {
53  const line = frame.line != null ? `:${frame.line}` : ""
54  const column = frame.column != null ? `:${frame.column}` : ""
55  return `${frame.file}${line}${column}`
56}
57 
58const StackTrace = ({ ref, className, title = "Stack Trace", error, frames, style, ...props }: StackTraceProps & { ref?: React.Ref<HTMLDivElement> }) => (
59    <div
60      ref={ref}
61      className={cn("grid gap-3.5 p-4", className)}
62      style={{
63        background: "var(--aurora-surface-raised)",
64        border: "1px solid var(--aurora-border-strong)",
65        borderRadius: "var(--aurora-radius-1)",
66        boxShadow: "var(--aurora-shadow-medium), var(--aurora-highlight-medium)",
67        ...style,
68      }}
69      {...props}
70    >
71      <div className="flex items-start gap-3">
72// … truncated