50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:T1a7b,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; /** * GrokSettings — Grok CLI's Settings modal (F2 / Ctrl+,). * * Captured grammar (v0.2.93): section headers (`Appearance`, `Mouse`), rows * with a `▸` marker, current value on the right (`on` / `off` / theme name ›). */ const BORDER = "#505058"; const FG = "#e1e1e1"; const MUTED = "#8b8b90"; const DIM = "#6c6c6c"; export type GrokSettingValue = string | boolean; export type GrokSetting = { id: string; label: string; value: GrokSettingValue; /** Show a › affordance (nested picker). */ expandable?: boolean; }; export type GrokSettingSection = { id: string; label: string; items: GrokSetting[]; }; const DEFAULT_SECTIONS: GrokSettingSection[] = [ { id: "appearance", label: "Appearance", items: [ { id: "compact", label: "Compact mode", value: false }, { id: "timestamps", label: "Show timestamps", value: true }, { id: "vim-input", label: "Disable vim input mode", value: true }, { id: "vim-scroll", label: "Vim scrollback navigation", value: false }, { id: "theme", label: "Theme", value: "Grok Night", expandable: true }, { id: "auto-dark", label: "Auto dark theme", value: "Grok Night", expandable: true, }, { id: "auto-light", label: "Auto light theme", value: "Grok Day", expandable: true, }, { id: "mermaid", label: "Render Mermaid diagrams", value: "Auto", expandable: true, }, { id: "thoughts-width", label: "Max thoughts width", value: "120" }, { id: "thinking-blocks", label: "Show thinking blocks", value: true }, { id: "manual-folds", label: "Respect manual folds", value: false }, { id: "group-tools", label: "Group tool calls", value: true }, ], }, { id: "mouse", label: "Mouse", items: [ { id: "mouse-support", label: "Enable mouse support", value: true }, ], }, ]; function formatValue(v: GrokSettingValue) { if (typeof v === "boolean") return v ? "on" : "off"; return v; } export function GrokSettings({ sections = DEFAULT_SECTIONS, defaultActive = "timestamps", onClose, onToggle, className, }: { sections?: GrokSettingSection[]; defaultActive?: string; onClose?: () => void; onToggle?: (id: string) => void; className?: string; }) { const flat = sections.flatMap((s) => s.items); const [active, setActive] = React.useState(defaultActive); const [values, setValues] = React.useState>( () => Object.fromEntries(flat.map((i) => [i.id, i.value])), ); function activate(id: string) { setActive(id); } function toggle(id: string) { setValues((prev) => { const cur = prev[id]; if (typeof cur === "boolean") { const next = !cur; onToggle?.(id); return { ...prev, [id]: next }; } onToggle?.(id); return prev; }); } return ( ); } 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L50",null,{"registryDependencies":[]}]]}],["$","$L51",null,{"sourceUrl":"https://brainless.swerdlow.dev/r/grok-settings.json","proxyUrl":"https://shadcnregistry.com/r/brainless/grok-settings","itemId":"@brainless/grok-settings"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"registry/brainless/grok/grok-settings.tsx","content":"$53","type":"registry:ui","target":"components/brainless/grok/grok-settings.tsx"}]}]]}],"$L54"]}]

Grok Settings

Installation

Files

components

Styles