Aurora AI Chain of Thought

1"use client"
2 
3import * as React from "react"
4import { Brain, Check, ChevronDown } from "lucide-react"
5import { Button } from "@/registry/aurora/ui/button"
6 
7// ChainOfThought — collapsible reasoning timeline with per-step status + streaming.
8// Visual spec ported 1:1 from the Claude Design source. Axon orange is the
9// AI/automation identity accent here (violet was removed from the system).
10// Status colors come from the semantic token layer (success / error / muted).
11 
12// ---------------------------------------------------------------------------
13// Types
14// ---------------------------------------------------------------------------
15 
16export type CotStepStatus = "pending" | "inprog" | "done" | "error"
17 
18export interface CotStep {
19  /** Primary line of the step. */
20  label: string
21  /** Optional secondary line below the label. */
22  detail?: string
23  /** Step state — drives the status node + tinting. Defaults to "inprog". */
24  status?: CotStepStatus
25  /** Optional right-aligned timing label (e.g. "0.4s"). */
26  duration?: string
27}
28 
29export interface ChainOfThoughtProps
30  extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
31  /** Ordered reasoning steps. */
32  steps?: CotStep[]
33  /** Header summary on the right (e.g. "Thought for 4.2s"). */
34  summary?: string
35  /** Show the orange "AI" identity badge next to the title. */
36  badge?: boolean
37  /** Streaming mode — pulses the orange accent and adds a cursor to the active step. */
38  isStreaming?: boolean
39  /** Whether the timeline starts expanded. Defaults to open. */
40  defaultOpen?: boolean
41  /** Header title. Defaults to "Chain of thought". */
42  title?: string
43}
44 
45// Styles: registry/aurora/styles/aurora-components.css (@layer aurora-components).
46 
47const AXON = "var(--axon-orange)"
48 
49// ---------------------------------------------------------------------------
50// Streaming cursor
51// ---------------------------------------------------------------------------
52 
53function Cursor() {
54  return (
55    <span
56      aria-hidden="true"
57      style={{
58        display: "inline-block",
59        width: "2px",
60        height: "1em",
61        background: AXON,
62        marginLeft: "3px",
63        verticalAlign: "text-bottom",
64        borderRadius: "1px",
65        animation: "aurora-cot-blink 1s step-end infinite",
66      }}
67    />
68  )
69}
70 
71// ---------------------------------------------------------------------------
72// Status node — circular timeline marker
73// … truncated