Approval Request

1"use client";
2 
3import { useEffect, useId, useState, type ReactNode } from "react";
4import { CheckIcon, ChevronDownIcon, Loader2Icon, RotateCcwIcon, XIcon } from "lucide-react";
5import { AnimatePresence, motion, useReducedMotion } from "motion/react";
6 
7import { Button } from "@/components/ui/button";
8import { spring } from "@/lib/springs";
9import { cn } from "@/lib/utils";
10 
11export type ApprovalRequestStatus = "pending" | "approved" | "denied" | "expired" | "cancelled";
12 
13export interface ApprovalRequestDetail {
14  summary: ReactNode;
15  /** Compact key:value parameters, rendered in mono — counts, paths, filters. */
16  items?: readonly ReactNode[];
17  /** Full-sentence content (a message draft, a diff) rendered as body copy instead of mono. */
18  preview?: ReactNode;
19}
20 
21export interface ApprovalRequestProps {
22  id: string;
23  /** The action being approved, stated as what will happen — not a question. */
24  title: ReactNode;
25  /** One-line requester context: which agent or tool call, and where in the run. */
26  context?: ReactNode;
27  detail?: ApprovalRequestDetail;
28  /** Freeform label for whichever category applies ("Irreversible," "Customer-facing," …). No fixed vocabulary — the caller writes it. */
29  flag?: ReactNode;
30  /** Binary, not a severity scale: trove/cn has one semantic warning colour. */
31  flagTone?: "default" | "critical";
32  /** Caller-owned source of truth. This component renders it; it never sets it itself. */
33  status: ApprovalRequestStatus;
34  /** Renders a static deadline label. Not a timer — the caller still drives the transition to "expired". */
35  expiresAt?: Date;
36  decidedBy?: ReactNode;
37  decidedAt?: ReactNode;
38  /** A rejected promise renders the anchored inline error state with Retry — never a toast. */
39  onApprove?: () => void | Promise<void>;
40  onDeny?: () => void | Promise<void>;
41  /**
42   * "card" (default) is the standalone, persistent-in-stream surface this
43   * component is built for. "embedded" strips its own card chrome for the
44   * one sanctioned nesting case — ToolRun handing its body off to this
45   * component for the needs-approval status — so the pause reads as one
46   * card, not two stacked shadows.
47   */
48  variant?: "card" | "embedded";
49  className?: string;
50}
51 
52type DecisionAction = "approve" | "deny";
53type Phase = "pending" | "submitting" | "error" | "resolved";
54 
55const RESOLVED_COPY: Record<
56  Exclude<ApprovalRequestStatus, "pending">,
57// … truncated