Grok Status

1import * as React from "react";
2import { cn } from "@/lib/utils";
3 
4/**
5 * GrokStatus — Grok CLI's top status bar.
6 *
7 * Captured grammar (v0.2.93): branch glyph + cwd on the left; optional MCP
8 * spinner (`⠴ MCP (2/3)`), context usage (`16K / 500K`), and turn progress
9 * (`│ 2/3 ✓`) on the right.
10 */
11const FG = "#e1e1e1";
12const MUTED = "#8b8b90";
13const DIM = "#808080"; // 38;5;8 — MCP spinner
14const OK = "#00ff00"; // 38;5;10 — turn ✓
15 
16export function GrokStatus({
17  branch = "main",
18  directory = "~/dev/brainless",
19  contextUsed = "16K",
20  contextLimit = "500K",
21  turn,
22  turnTotal,
23  mcp,
24  mcpTotal,
25  className,
26}: {
27  branch?: string;
28  directory?: string;
29  contextUsed?: string;
30  contextLimit?: string;
31  /** Completed steps in the current turn, e.g. 2 of 3. */
32  turn?: number;
33  turnTotal?: number;
34  /** Connected MCP servers so far (shows spinner while loading). */
35  mcp?: number;
36  mcpTotal?: number;
37  className?: string;
38}) {
39  const showTurn =
40    typeof turn === "number" && typeof turnTotal === "number" && turnTotal > 0;
41  const showMcp =
42    typeof mcp === "number" && typeof mcpTotal === "number" && mcpTotal > 0;
43 
44  return (
45    <div
46      className={cn(
47        "flex min-w-0 flex-wrap items-baseline justify-between gap-x-4 gap-y-1 font-mono text-[12px]",
48        className,
49      )}
50      role="status"
51      aria-label="Session status"
52    >
53      <div className="min-w-0 max-w-full truncate" style={{ color: MUTED }}>
54        <span aria-hidden style={{ color: FG }}>
55          {" "}
56        </span>
57        <span style={{ color: FG }}>{branch}</span>
58        <span style={{ color: DIM }}> </span>
59        <span>{directory}</span>
60      </div>
61 
62      <div
63        className="flex min-w-0 flex-wrap items-baseline gap-x-2 tabular-nums"
64        style={{ color: MUTED }}
65      >
66        {showMcp ? (
67          <span style={{ color: DIM }}>
68            <span aria-hidden>⠴ </span>
69            MCP ({mcp}/{mcpTotal})
70          </span>
71        ) : null}
72        <span>
73          {contextUsed}
74          <span style={{ color: DIM }}> / </span>
75          {contextLimit}
76        </span>
77        {showTurn ? (
78          <>
79            <span style={{ color: DIM }}>│</span>
80            <span>
81              {turn}/{turnTotal}
82            </span>{" "}
83            <span aria-hidden style={{ color: OK }}>
84              ✓
85            </span>
86            <span className="sr-only"> steps complete</span>
87          </>
88        ) : null}
89      </div>
90// … truncated