Claude Permission

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5 
6/**
7 * ClaudePermission — Claude Code's "Do you want to proceed?" approval box.
8 *
9 * In the terminal it's a numbered list you drive with arrow keys; here it's a
10 * real radiogroup — arrow keys move selection, Enter/Space choose, and each
11 * option is a proper radio for assistive tech.
12 */
13const ROSE = "#cd694a";
14 
15export function ClaudePermission({
16  title = "Bash command",
17  command = "rm -rf node_modules",
18  question = "Do you want to proceed?",
19  options = [
20    "Yes",
21    "Yes, and don't ask again this session",
22    "No, and tell Claude what to do (esc)",
23  ],
24  defaultSelected = 0,
25  onChoose,
26  className,
27}: {
28  title?: string;
29  command?: string;
30  question?: string;
31  options?: string[];
32  defaultSelected?: number;
33  onChoose?: (index: number) => void;
34  className?: string;
35}) {
36  const [sel, setSel] = React.useState(defaultSelected);
37 
38  function onKey(e: React.KeyboardEvent, i: number) {
39    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
40      e.preventDefault();
41      const next =
42        e.key === "ArrowDown"
43          ? (i + 1) % options.length
44          : (i - 1 + options.length) % options.length;
45      setSel(next);
46      (e.currentTarget.parentElement?.children[next] as HTMLElement)?.focus();
47    } else if (e.key === "Enter" || e.key === " ") {
48      e.preventDefault();
49      setSel(i);
50      onChoose?.(i);
51    }
52  }
53 
54  return (
55    <fieldset
56      className={cn(
57        "rounded-none border px-3.5 py-2.5 font-mono text-[13px] leading-[1.6]",
58        className,
59      )}
60      style={{ borderColor: ROSE }}
61    >
62      <legend className="px-2" style={{ color: ROSE }}>
63        {title}
64      </legend>
65      <div className="text-[#c0caf5]">{command}</div>
66      <div className="mb-1.5 mt-2 text-[#c0caf5]">{question}</div>
67      <div role="radiogroup" aria-label={question}>
68        {options.map((opt, i) => {
69          const active = sel === i;
70          return (
71            <div
72              key={i}
73              role="radio"
74              aria-checked={active}
75              tabIndex={active ? 0 : -1}
76              onKeyDown={(e) => onKey(e, i)}
77              onClick={() => {
78                setSel(i);
79                onChoose?.(i);
80              }}
81              className="flex cursor-pointer items-baseline gap-2 rounded px-1 py-0.5 outline-none focus-visible:ring-1 focus-visible:ring-[#7dcfff]/60"
82// … truncated