# Black Box: Agent Decision

> A support agent's refund, opened up: what it read, how it reasoned and what it did, one face at a time.

A shadcn/ui block from the [@keyframeui](https://keyframeui.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/keyframeui/black-box-demo).

- Page, with a live preview: https://shadcn.exchange/r/keyframeui/black-box-demo
- Screenshot: https://shadcn.exchange/shot/keyframeui/black-box-demo/light.png
- Registry item: https://keyframeui.com/r/black-box-demo.json
- Categories: 3d, hero, ai, diagram
- Listed: 2026-11-02, source last changed 2026-11-02

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/keyframeui/black-box-demo.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://keyframeui.com/r/black-box.json`

## Notes from the registry

Live preview, examples and props: https://keyframeui.com/components/black-box#black-box-demo

## Files

### `registry/demos/black-box-demo.tsx`

```tsx
"use client";

import { BlackBox, type BlackBoxFace } from "@/components/ui/black-box";

// A support agent's decision, opened up: what it read, how it reasoned, what it did.
const FACES: BlackBoxFace[] = [
  {
    id: "read",
    label: "Read",
    detail: "Order #4471, the refund policy and two earlier tickets from the same customer.",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.6} strokeLinecap="round" strokeLinejoin="round">
        <path d="M4 5.5A1.5 1.5 0 0 1 5.5 4H11v16H5.5A1.5 1.5 0 0 1 4 18.5z" />
        <path d="M20 5.5A1.5 1.5 0 0 0 18.5 4H13v16h5.5a1.5 1.5 0 0 0 1.5-1.5z" />
      </svg>
    ),
  },
  {
    id: "reason",
    label: "Reason",
    detail: "Delivered 9 days ago, inside the 14-day window. Item unopened, so no restocking fee.",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.6} strokeLinecap="round" strokeLinejoin="round">
        <circle cx="6" cy="6" r="2" />
        <circle cx="18" cy="12" r="2" />
        <circle cx="6" cy="18" r="2" />
        <path d="M8 6h3a3 3 0 0 1 3 3v0a3 3 0 0 0 3 3M8 18h3a3 3 0 0 0 3-3v0a3 3 0 0 1 3-3" />
      </svg>
    ),
  },
  {
    id: "act",
    label: "Act",
    detail: "Refunded $48.00 to the original card and replied in the customer's language.",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.6} strokeLinecap="round" strokeLinejoin="round">
        <path d="M5 12.5l4.5 4.5L19 7.5" />
      </svg>
    ),
  },
];

export function BlackBoxDemo() {
  return (
    <div className="w-full max-w-3xl">
      <div className="mx-auto flex w-fit items-center gap-2.5 rounded-full bg-white py-1.5 pr-4 pl-1.5 text-[13px] text-zinc-600 shadow-sm ring-1 ring-zinc-950/[0.07] dark:bg-zinc-900 dark:text-zinc-300 dark:ring-white/10">
        <span className="grid size-6 place-items-center rounded-full bg-zinc-950 text-[11px] font-semibold text-white dark:bg-white dark:text-zinc-950">
          M
        </span>
        <span>
          <span className="font-medium text-zinc-950 dark:text-white">Why did order #4471 get a refund?</span>
        </span>
      </div>
      <BlackBox faces={FACES} className="mt-2" aria-label="How the support agent decided" />
    </div>
  );
}
```