Grok Plan

1"use client";
2 
3import * as React from "react";
4import { GrokPrompt } from "@/registry/brainless/grok/grok-prompt";
5import { cn } from "@/lib/utils";
6 
7/**
8 * GrokPlan — Grok CLI's plan.md approval card.
9 *
10 * Captured grammar (v0.2.93): a framed `plan.md` viewer with line numbers,
11 * an action row (`a approve | s request changes | c comment | q quit plan`),
12 * a yellow `◆ Waiting on plan approval` status (38;5;11 — plan accent only),
13 * and the composer in `· plan approval` mode.
14 */
15const BORDER = "#808080";
16const FG = "#e1e1e1";
17const MUTED = "#8b8b90";
18const DIM = "#6c6c6c";
19const PLAN = "#ffff00"; // 38;5;11 — plan-mode accent only
20 
21const DEFAULT_LINES = [
22  "Plan: Touch planned.txt",
23  "",
24  "Context",
25  "",
26  "Create an empty marker file planned.txt in the workspace root so a planned touch can be verified. No other files or changes.",
27  "",
28  "Steps",
29  "",
30  "1. Create planned.txt — Write (or touch) an empty file at the workspace root.",
31  "2. Verify — Confirm the file exists (e.g. read or ls) and stop.",
32  "",
33  "Critical files",
34  "",
35  "• planned.txt (new) — workspace root",
36];
37 
38const ACTIONS = [
39  { key: "a", label: "approve" },
40  { key: "s", label: "request changes" },
41  { key: "c", label: "comment" },
42  { key: "q", label: "quit plan" },
43] as const;
44 
45export function GrokPlan({
46  filename = "plan.md",
47  lines = DEFAULT_LINES,
48  status = "Waiting on plan approval",
49  onAction,
50  className,
51}: {
52  filename?: string;
53  lines?: string[];
54  status?: string;
55  onAction?: (key: (typeof ACTIONS)[number]["key"]) => void;
56  className?: string;
57}) {
58  return (
59    <div className={cn("space-y-3 font-mono text-[13px] leading-[1.5]", className)}>
60      <div
61        className="overflow-hidden rounded-sm border"
62        style={{ borderColor: BORDER }}
63        role="region"
64        aria-label={`${filename} plan`}
65      >
66        <div
67          className="flex items-center justify-between border-b px-2 py-1 text-[12px]"
68          style={{ borderColor: BORDER, color: MUTED }}
69        >
70          <span>
71            <span aria-hidden>─ </span>
72            {filename}
73          </span>
74          <span aria-hidden title="Open">
75            [↗]
76          </span>
77        </div>
78 
79        <ol className="max-h-[16rem] overflow-auto px-2 py-1.5" style={{ color: FG }}>
80          {lines.map((line, i) => (
81            <li key={i} className="flex gap-2">
82              <span
83                aria-hidden
84// … truncated