Aurora AI Queue

1"use client"
2 
3import * as React from "react"
4import { CheckCircle2, ListChecks, LoaderCircle } from "lucide-react"
5import { Badge } from "@/registry/aurora/ui/badge"
6 
7/**
8 * Queue — a live processing queue: a titled panel with a running-count summary
9 * and a list of jobs. Each job carries a status:
10 *   - `done`     dimmed title, teal check ring, outlined "DONE" badge
11 *   - `running`  the "head" job — highlighted with Axon-orange automation
12 *                identity and a live "RUNNING" badge
13 *   - `queued`   numbered by queue position, plain muted "QUEUED" trailing label
14 *
15 * Self-contained, CD-parity implementation. No violet/purple AI emphasis.
16 */
17 
18export type QueueStatus = "done" | "running" | "queued"
19 
20export interface QueueItem {
21  id: string | number
22  title: string
23  status: QueueStatus
24  /** Secondary line under the title (counts, ETA, timing). */
25  meta?: string
26}
27 
28export interface QueueProps extends React.HTMLAttributes<HTMLDivElement> {
29  title: string
30  items: QueueItem[]
31}
32 
33const Queue = ({ ref, title, items, className, style, ...props }: QueueProps & { ref?: React.Ref<HTMLDivElement> }) => {
34    const runningCount = items.filter((i) => i.status === "running").length
35    const queuedCount = items.filter((i) => i.status === "queued").length
36 
37    // Queue positions: the running "head" is 1; queued items number from there.
38    const positionBase = runningCount > 0 ? runningCount : 0
39 
40    return (
41      <div
42        ref={ref}
43        className={["aurora-queue", className].filter(Boolean).join(" ")}
44        style={
45          {
46            boxSizing: "border-box",
47            display: "grid",
48            gap: "14px",
49            width: "100%",
50            minWidth: 0,
51            padding: "20px 22px",
52            background: "var(--aurora-panel-medium)",
53            border: "1px solid var(--aurora-border-default)",
54            borderRadius: "var(--aurora-radius-3)",
55            boxShadow: "var(--aurora-shadow-medium), var(--aurora-highlight-medium)",
56            ...style,
57          } as React.CSSProperties
58        }
59        {...props}
60      >
61        {/* Header: list icon + title, running/queued summary */}
62        <div
63          style={{
64            display: "flex",
65            alignItems: "center",
66            justifyContent: "space-between",
67            gap: "16px",
68          }}
69        >
70          <div style={{ display: "flex", alignItems: "center", gap: "10px", minWidth: 0 }}>
71// … truncated