Aurora AI Context

1"use client"
2 
3import * as React from "react"
4import { Layers2, X, CircleAlert } from "lucide-react"
5import { Button } from "@/registry/aurora/ui/button"
6 
7export interface ContextSegment {
8  /** Display label, e.g. "System" */
9  label: string
10  /** Token count for this segment */
11  value: number
12  /** Optional explicit swatch color (defaults to the Aurora segment palette by index) */
13  color?: string
14}
15 
16export interface ContextPanelProps extends React.HTMLAttributes<HTMLDivElement> {
17  /** Heading label (default "Context") */
18  label?: string
19  /** Total context window size in tokens */
20  limit?: number
21  /** Pre-summed used tokens. Ignored when `segments` is provided (sum is used instead). */
22  used?: number
23  /** Per-bucket breakdown that drives the segmented bar + legend */
24  segments?: ContextSegment[]
25  /** Tokens reserved for output — drawn as a hatched slice and surfaced in the legend/warning */
26  reserved?: number
27  /** Render the streaming shimmer on the leading segment */
28  streaming?: boolean
29  /** When provided, shows the "Compact" affordance in the header */
30  onCompact?: () => void
31  /** "default" (full panel) or "compact" (single inline row) */
32  variant?: "default" | "compact"
33  /** Token usage ratio (0–1) that flips the panel into its near-limit warning state. Default 0.9 */
34  warnThreshold?: number
35}
36 
37function panelStyle(style?: React.CSSProperties): React.CSSProperties {
38  return {
39    background: "var(--aurora-surface-raised)",
40    border: "1px solid var(--aurora-border-strong)",
41    borderRadius: "var(--aurora-radius-1)",
42    boxShadow: "var(--aurora-shadow-medium), var(--aurora-highlight-medium)",
43    ...style,
44  }
45}
46 
47function formatTokenCount(value: number) {
48  if (value >= 1000) return `${(value / 1000).toFixed(value >= 10000 ? 0 : 1)}k`
49  return `${value}`
50}
51 
52/** Aurora segment palette: cyan → teal → sand(axon-orange) → neutral, cycling. Violet dropped. */
53const SEGMENT_COLORS = [
54  "var(--aurora-accent-primary)",
55  "var(--aurora-success)",
56  "var(--axon-orange)",
57  "var(--aurora-neutral)",
58]
59 
60const HATCH_FILL =
61  "repeating-linear-gradient(45deg, color-mix(in srgb, var(--aurora-text-muted) 22%, transparent) 0 4px, transparent 4px 8px)"
62 
63const ContextPanel = (
64    { ref,
65      label = "Context",
66      limit = 128000,
67      used,
68      segments,
69      reserved = 0,
70      streaming = false,
71      onCompact,
72      variant = "default",
73      warnThreshold = 0.9,
74      className,
75      style,
76      ...props
77// … truncated