Grok Shortcuts

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5 
6/**
7 * GrokShortcuts — Grok CLI's Keyboard Shortcuts modal (Ctrl+x).
8 *
9 * Nested categories with ◆ rows for expanded sections and › for collapsed
10 * ones. Arrow keys / e expand; Esc closes.
11 */
12const BORDER = "#808080";
13const FG = "#e1e1e1";
14const MUTED = "#8b8b90";
15const DIM = "#6c6c6c";
16const MARK = "#808080"; // 38;5;8 — ◆ / › markers
17 
18export type GrokShortcut = { action: string; keys: string };
19export type GrokShortcutGroup = {
20  id: string;
21  label: string;
22  items: GrokShortcut[];
23  /** Display count when collapsed; defaults to items.length. */
24  count?: number;
25};
26 
27const DEFAULT_GROUPS: GrokShortcutGroup[] = [
28  {
29    id: "essentials",
30    label: "Essentials",
31    items: [
32      { action: "Send", keys: "Enter" },
33      { action: "Focus scrollback", keys: "Tab" },
34      { action: "Cancel turn", keys: "Ctrl+c" },
35      { action: "Cycle mode (Normal / Plan / Always-approve)", keys: "Shift+Tab" },
36      { action: "Quit", keys: "Ctrl+q / Ctrl+d" },
37      { action: "Command palette", keys: "Ctrl+p / ?" },
38      { action: "Keyboard shortcuts", keys: "Ctrl+x / Ctrl+." },
39      { action: "Open the settings modal", keys: "F2 / Ctrl+, / Cmd+," },
40    ],
41  },
42  {
43    id: "input",
44    label: "Input",
45    items: [
46      {
47        action: "Send now while running (interject)",
48        keys: "Ctrl+Enter / Ctrl+i",
49      },
50      {
51        action: "Voice dictation (Ctrl+Space / F8)",
52        keys: "Ctrl+Space / F8",
53      },
54      { action: "Search prompt history", keys: "Ctrl+r" },
55      { action: "Toggle multiline", keys: "Ctrl+m" },
56      {
57        action: "Shell mode (type ! on empty prompt)",
58        keys: "!",
59      },
60    ],
61  },
62  // Counts confirmed live; item lists need a re-auth pass (probe hit /logout).
63  { id: "nav", label: "Conversation Navigation", count: 10, items: [] },
64  { id: "actions", label: "Conversation Actions", count: 4, items: [] },
65  { id: "panels", label: "Panels", count: 6, items: [] },
66  {
67    id: "session",
68    label: "Session",
69    items: [
70      { action: "New session", keys: "Ctrl+n" },
71      { action: "Resume session", keys: "Ctrl+s" },
72      { action: "New worktree", keys: "Ctrl+w" },
73    ],
74  },
75  { id: "dashboard", label: "Dashboard", count: 17, items: [] },
76];
77 
78export function GrokShortcuts({
79  groups = DEFAULT_GROUPS,
80  defaultExpanded = "essentials",
81  onClose,
82  className,
83}: {
84  groups?: GrokShortcutGroup[];
85// … truncated