Aurora AI Task

1"use client"
2 
3import * as React from "react"
4import { CircleCheck, CircleDashed, ListChecks, CircleX } from "lucide-react"
5import { cn } from "@/lib/utils"
6import { Badge, type BadgeTone } from "@/registry/aurora/ui/badge"
7import { Spinner } from "@/registry/aurora/ui/spinner"
8 
9export interface AgentTask {
10  id: string
11  title: string
12  description?: string
13  status: "queued" | "running" | "completed" | "failed"
14}
15 
16export interface TaskListProps extends React.HTMLAttributes<HTMLDivElement> {
17  tasks: AgentTask[]
18}
19 
20type TaskTone = {
21  /** Icon color for the row leading glyph. */
22  color: string
23  /** Leading status icon. */
24  icon: React.ReactNode
25  /** Badge tone for the trailing status chip. */
26  badge: BadgeTone
27  /** Whether the trailing badge renders a status dot. */
28  dot: boolean
29  /** Whether the row is highlighted (active/running). */
30  active: boolean
31}
32 
33const taskTone: Record<AgentTask["status"], TaskTone> = {
34  queued: {
35    color: "var(--aurora-text-muted)",
36    icon: <CircleDashed className="size-[18px]" aria-hidden />,
37    badge: "neutral",
38    dot: false,
39    active: false,
40  },
41  running: {
42    color: "var(--axon-orange)",
43    icon: <Spinner size="sm" tone="muted" style={{ color: "var(--axon-orange)" }} />,
44    badge: "warn",
45    dot: true,
46    active: true,
47  },
48  completed: {
49    color: "var(--aurora-success)",
50    icon: <CircleCheck className="size-[18px]" aria-hidden />,
51    badge: "success",
52    dot: false,
53    active: false,
54  },
55  failed: {
56    color: "var(--aurora-error)",
57    icon: <CircleX className="size-[18px]" aria-hidden />,
58    badge: "error",
59    dot: true,
60    active: true,
61  },
62}
63 
64const TASK_STATUS_LABEL: Record<AgentTask["status"], string> = {
65  queued: "Queued",
66  running: "Running",
67  completed: "Completed",
68  failed: "Failed",
69}
70 
71const TaskList = ({ ref, className, tasks, style, ...props }: TaskListProps & { ref?: React.Ref<HTMLDivElement> }) => {
72    const done = tasks.filter((t) => t.status === "completed").length
73 
74    return (
75      <div
76        ref={ref}
77        className={cn("grid", className)}
78        style={{
79          background: "var(--aurora-surface-raised)",
80          border: "1px solid var(--aurora-border-strong)",
81          borderRadius: "var(--aurora-radius-1)",
82          boxShadow: "var(--aurora-shadow-medium), var(--aurora-highlight-medium)",
83          padding: "18px 22px 20px",
84          ...style,
85        }}
86        {...props}
87      >
88        <div
89// … truncated