Aurora AI Plan

1"use client"
2 
3import * as React from "react"
4import { Check, CircleAlert, ListChecks } from "lucide-react"
5 
6// ---------------------------------------------------------------------------
7// Aurora "Plan" — execution-plan card (CD-parity).
8//
9// Self-contained shadcn-registry implementation: a titled card with a progress
10// bar and a vertical status rail (done / inprog / pending / error per step).
11// Axon orange is the AI/automation identity color; success/error use the
12// semantic token layer. No violet.
13// ---------------------------------------------------------------------------
14 
15export type PlanStepStatus = "pending" | "inprog" | "done" | "error"
16 
17export interface PlanStep {
18  label: string
19  status: PlanStepStatus
20  detail?: string
21}
22 
23export interface PlanProps extends React.HTMLAttributes<HTMLDivElement> {
24  title?: string
25  steps?: PlanStep[]
26  /** Show a blinking cursor after the in-progress step's label. */
27  isStreaming?: boolean
28}
29 
30// Accents -------------------------------------------------------------------
31const PLAN_ACCENT = "var(--axon-orange)"
32 
33// Styles: registry/aurora/styles/aurora-components.css (@layer aurora-components).
34 
35// ---------------------------------------------------------------------------
36// Blinking cursor
37// ---------------------------------------------------------------------------
38 
39function Cursor() {
40  return (
41    <span
42      aria-hidden="true"
43      style={{
44        display: "inline-block",
45        width: "2px",
46        height: "1em",
47        background: PLAN_ACCENT,
48        marginLeft: "2px",
49        verticalAlign: "text-bottom",
50        borderRadius: "1px",
51        animation: "aurora-plan-blink 1s step-end infinite",
52      }}
53    />
54  )
55}
56 
57// ---------------------------------------------------------------------------
58// Status node (the rail markers)
59// ---------------------------------------------------------------------------
60 
61const NODE_SIZE = 22
62 
63function StepNode({ status }: { status: PlanStepStatus }) {
64  const base: React.CSSProperties = {
65    width: NODE_SIZE,
66    height: NODE_SIZE,
67    borderRadius: "50%",
68    flexShrink: 0,
69    display: "flex",
70    alignItems: "center",
71    justifyContent: "center",
72    boxSizing: "border-box",
73  }
74 
75  if (status === "done") {
76    return (
77      <span
78        role="img"
79        aria-label="Done"
80        style={{
81          ...base,
82          border: "1.5px solid var(--aurora-success-border)",
83          background: "var(--aurora-success-surface)",
84// … truncated