ActivityFeed

1"use client";
2 
3import {
4  ArrowDown01Icon,
5  Copy01Icon,
6  Tick02Icon,
7} from "@hugeicons/core-free-icons";
8import { HugeiconsIcon } from "@hugeicons/react";
9import { useState } from "react";
10import type { ComponentProps, ReactNode } from "react";
11 
12import { EmptyState } from "@/components/empty-state/empty-state";
13import { Button } from "@/components/ui/button";
14import { Skeleton } from "@/components/ui/skeleton";
15import { cn } from "@/lib/utils";
16 
17/** The event's outcome, drawn from the house status vocabulary. */
18export type ActivityStatus = "success" | "error" | "pending" | "info";
19 
20export interface ActivityEntry {
21  id: string;
22  status: ActivityStatus;
23  /** One-line summary, e.g. "Provisioned production database". */
24  title: string;
25  /** Display-ready relative time, e.g. "2m ago". */
26  timestamp: string;
27  /** Who or what caused it, e.g. "agent" or a user name. */
28  source?: string;
29  /** Expandable long detail: an error message, request id, or result. */
30  detail?: string;
31  /** When set, renders an action (e.g. "Retry") that fires onAction. */
32  actionLabel?: string;
33}
34 
35/* Marker color per status; alive states breathe on the shared cadence. */
36const MARKER: Record<ActivityStatus, string> = {
37  error: "bg-destructive",
38  info: "bg-muted-foreground/50",
39  pending:
40    "neon-status-breathe bg-current text-[var(--status-scaling)] motion-reduce:animate-none",
41  success: "bg-primary",
42};
43 
44const ROW_STAGGER_MS = 60;
45const COPY_FLASH_MS = 1500;
46 
47/** Copies the detail text; the icon flashes a primary check. */
48const CopyButton = ({ value }: { value: string }) => {
49  const [copied, setCopied] = useState(false);
50 
51  const copy = async () => {
52    setCopied(true);
53    window.setTimeout(() => setCopied(false), COPY_FLASH_MS);
54 
55    try {
56      await navigator.clipboard.writeText(value);
57    } catch {
58      // Clipboard unavailable; the check still flashes.
59    }
60  };
61 
62  return (
63    <button
64      aria-label={copied ? "Copied" : "Copy details"}
65      className="absolute top-1 right-1 inline-flex size-6 items-center justify-center rounded-md text-muted-foreground/50 outline-none transition-colors hover:bg-muted/40 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50"
66      onClick={copy}
67      type="button"
68    >
69      <HugeiconsIcon
70        className={cn("size-3 transition-colors", copied && "text-primary")}
71        icon={copied ? Tick02Icon : Copy01Icon}
72        strokeWidth={2}
73      />
74    </button>
75  );
76};
77const RISE =
78// … truncated