Grok Permission

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5 
6/**
7 * GrokPermission — Grok CLI's left-border approval card.
8 *
9 * Captured grammar (v0.2.93): a `┃` gutter, title + command, then numbered
10 * `(●)` / `(○)` radios. Footer hint: `1/3:select │ Ctrl+o:yolo │ Ctrl+c:cancel`.
11 */
12const BORDER = "#808080"; // 38;5;8
13const FG = "#e1e1e1";
14const MUTED = "#8b8b90";
15const DIM = "#6c6c6c";
16 
17const DEFAULT_OPTIONS = [
18  "Yes, and don't ask again for anything (always-approve mode)",
19  "Yes, proceed",
20  "No, reject (type to add feedback)",
21];
22 
23export function GrokPermission({
24  title = "Write permission probe output file",
25  command = "echo permission-probe-ok > probe-out.txt",
26  options = DEFAULT_OPTIONS,
27  defaultSelected = 0,
28  onChoose,
29  className,
30}: {
31  title?: string;
32  command?: string;
33  options?: string[];
34  defaultSelected?: number;
35  onChoose?: (index: number) => void;
36  className?: string;
37}) {
38  const [sel, setSel] = React.useState(defaultSelected);
39 
40  function onKey(e: React.KeyboardEvent, i: number) {
41    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
42      e.preventDefault();
43      const next =
44        e.key === "ArrowDown"
45          ? (i + 1) % options.length
46          : (i - 1 + options.length) % options.length;
47      setSel(next);
48      (e.currentTarget.parentElement?.children[next] as HTMLElement)?.focus();
49    } else if (e.key === "Enter" || e.key === " ") {
50      e.preventDefault();
51      setSel(i);
52      onChoose?.(i);
53    }
54  }
55 
56  return (
57    <div className={cn("font-mono text-[13px] leading-[1.55]", className)}>
58      <div
59        className="border-l-2 pl-3"
60        style={{ borderColor: BORDER }}
61        role="group"
62        aria-label={title}
63      >
64        <div className="mb-1" style={{ color: FG }}>
65          {title}
66        </div>
67        <div className="mb-2" style={{ color: MUTED }}>
68          {command}
69        </div>
70 
71        <div role="radiogroup" aria-label={title} className="space-y-0.5">
72          {options.map((opt, i) => {
73            const active = sel === i;
74            return (
75              <div
76                key={i}
77                role="radio"
78                aria-checked={active}
79                tabIndex={active ? 0 : -1}
80                onKeyDown={(e) => onKey(e, i)}
81                onClick={() => {
82                  setSel(i);
83                  onChoose?.(i);
84                }}
85                className={cn(
86// … truncated