Grok Write

1import * as React from "react";
2import { cn } from "@/lib/utils";
3 
4/**
5 * GrokWrite — Grok CLI's inline write/edit chrome.
6 *
7 * Captured grammar (v0.2.93): a `┃` gutter with line-numbered before/after
8 * rows, a `───` rule, then optional hook sections with ✓ / ✗ results.
9 */
10export type GrokWriteLine = {
11  n?: number;
12  text: string;
13  kind?: "before" | "after";
14};
15 
16export type GrokHookResult = {
17  label: string;
18  ok: boolean;
19  detail?: string;
20  ms?: number;
21};
22 
23const BORDER = "#808080";
24const FG = "#e1e1e1";
25const MUTED = "#8b8b90";
26const DIM = "#6c6c6c";
27const OK = "#00ff00"; // 38;5;10
28const BAD = "#ff0000"; // 38;5;9
29 
30export function GrokWrite({
31  before = [{ n: 1, text: "hello" }],
32  after = [{ n: 1, text: "world" }],
33  hooks,
34  className,
35}: {
36  before?: GrokWriteLine[];
37  after?: GrokWriteLine[];
38  hooks?: { pre?: GrokHookResult[]; post?: GrokHookResult[] };
39  className?: string;
40}) {
41  return (
42    <div
43      className={cn(
44        "min-w-0 border-l-2 pl-3 font-mono text-[13px] leading-[1.55]",
45        className,
46      )}
47      style={{ borderColor: BORDER }}
48      role="region"
49      aria-label="Write preview"
50    >
51      <div className="min-w-0 space-y-0.5" style={{ color: MUTED }}>
52        {before.map((l, i) => (
53          <div key={`b-${i}`} className="flex min-w-0 gap-2">
54            <span
55              aria-hidden
56              className="w-4 shrink-0 select-none text-right tabular-nums"
57              style={{ color: DIM }}
58            >
59              {l.n ?? ""}
60            </span>
61            <span className="sr-only">before: </span>
62            <span className="min-w-0 break-all" style={{ color: FG }}>
63              {l.text}
64            </span>
65          </div>
66        ))}
67        {after.map((l, i) => (
68          <div key={`a-${i}`} className="flex min-w-0 gap-2">
69            <span
70              aria-hidden
71              className="w-4 shrink-0 select-none text-right tabular-nums"
72              style={{ color: DIM }}
73            >
74              {l.n ?? ""}
75            </span>
76            <span className="sr-only">after: </span>
77            <span className="min-w-0 break-all" style={{ color: FG }}>
78              {l.text}
79            </span>
80          </div>
81        ))}
82      </div>
83 
84      {hooks ? (
85        <div className="mt-2 space-y-1" style={{ color: MUTED }}>
86          <div aria-hidden style={{ color: DIM }}>
87            ───
88          </div>
89          {hooks.pre?.length ? (
90// … truncated