Grok Settings

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5 
6/**
7 * GrokSettings — Grok CLI's Settings modal (F2 / Ctrl+,).
8 *
9 * Captured grammar (v0.2.93): section headers (`Appearance`, `Mouse`), rows
10 * with a `▸` marker, current value on the right (`on` / `off` / theme name ›).
11 */
12const BORDER = "#505058";
13const FG = "#e1e1e1";
14const MUTED = "#8b8b90";
15const DIM = "#6c6c6c";
16 
17export type GrokSettingValue = string | boolean;
18 
19export type GrokSetting = {
20  id: string;
21  label: string;
22  value: GrokSettingValue;
23  /** Show a › affordance (nested picker). */
24  expandable?: boolean;
25};
26 
27export type GrokSettingSection = {
28  id: string;
29  label: string;
30  items: GrokSetting[];
31};
32 
33const DEFAULT_SECTIONS: GrokSettingSection[] = [
34  {
35    id: "appearance",
36    label: "Appearance",
37    items: [
38      { id: "compact", label: "Compact mode", value: false },
39      { id: "timestamps", label: "Show timestamps", value: true },
40      { id: "vim-input", label: "Disable vim input mode", value: true },
41      { id: "vim-scroll", label: "Vim scrollback navigation", value: false },
42      { id: "theme", label: "Theme", value: "Grok Night", expandable: true },
43      {
44        id: "auto-dark",
45        label: "Auto dark theme",
46        value: "Grok Night",
47        expandable: true,
48      },
49      {
50        id: "auto-light",
51        label: "Auto light theme",
52        value: "Grok Day",
53        expandable: true,
54      },
55      {
56        id: "mermaid",
57        label: "Render Mermaid diagrams",
58        value: "Auto",
59        expandable: true,
60      },
61      { id: "thoughts-width", label: "Max thoughts width", value: "120" },
62      { id: "thinking-blocks", label: "Show thinking blocks", value: true },
63      { id: "manual-folds", label: "Respect manual folds", value: false },
64      { id: "group-tools", label: "Group tool calls", value: true },
65    ],
66  },
67  {
68    id: "mouse",
69    label: "Mouse",
70    items: [
71      { id: "mouse-support", label: "Enable mouse support", value: true },
72    ],
73  },
74];
75 
76function formatValue(v: GrokSettingValue) {
77  if (typeof v === "boolean") return v ? "on" : "off";
78  return v;
79}
80 
81export function GrokSettings({
82  sections = DEFAULT_SECTIONS,
83  defaultActive = "timestamps",
84  onClose,
85  onToggle,
86  className,
87}: {
88  sections?: GrokSettingSection[];
89  defaultActive?: string;
90  onClose?: () => void;
91  onToggle?: (id: string) => void;
92  className?: string;
93}) {
94  const flat = sections.flatMap((s) => s.items);
95// … truncated