Grok Working

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5 
6/**
7 * GrokWorking — Grok's in-turn status line (not the idle braille spinner).
8 *
9 * Captured grammar (v0.2.93):
10 *   `⠹ Waiting for response… 0.1s          1.5s ⇣16.6k [stop]`
11 *   `◆ Write permission probe… 1m17s       1m19s ⇣16.0k [↓][stop]`
12 */
13const FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
14const FG = "#ffffff"; // 38;5;15 — spinner + label
15const MUTED = "#c0c0c0"; // 38;5;7 — elapsed / tokens
16const DIM = "#808080";
17const GREEN = "#00ff00"; // active tool ◆ line
18 
19function formatElapsed(secs: number) {
20  if (secs < 60) return `${secs.toFixed(secs < 10 ? 1 : 0)}s`;
21  const m = Math.floor(secs / 60);
22  const s = Math.round(secs % 60);
23  return `${m}m${String(s).padStart(2, "0")}s`;
24}
25 
26export function GrokWorking({
27  label = "Waiting for response…",
28  tokens = "16.6k",
29  running = true,
30  diamond = false,
31  showScrollHint = false,
32  className,
33}: {
34  label?: string;
35  tokens?: string;
36  running?: boolean;
37  /** Use ◆ instead of the braille spinner (active tool line). */
38  diamond?: boolean;
39  showScrollHint?: boolean;
40  className?: string;
41}) {
42  const [f, setF] = React.useState(0);
43  const [secs, setSecs] = React.useState(0.1);
44 
45  React.useEffect(() => {
46    if (!running) return;
47    const id = setInterval(() => setF((n) => (n + 1) % FRAMES.length), 90);
48    return () => clearInterval(id);
49  }, [running]);
50 
51  React.useEffect(() => {
52    if (!running) return;
53    const id = setInterval(() => setSecs((s) => s + 0.1), 100);
54    return () => clearInterval(id);
55  }, [running]);
56 
57  if (!running) return null;
58 
59  const elapsed = formatElapsed(secs);
60 
61  return (
62    <div
63      role="status"
64      aria-live="polite"
65      className={cn(
66        "flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 font-mono text-[13px]",
67        className,
68      )}
69    >
70      <div className="flex min-w-0 items-baseline gap-2">
71        <span
72          aria-hidden
73          className="inline-block w-[2ch] shrink-0"
74          style={{ color: diamond ? GREEN : FG }}
75        >
76          {diamond ? "◆" : FRAMES[f]}
77        </span>
78        <span style={{ color: diamond ? MUTED : FG }}>{label}</span>
79        <span style={{ color: MUTED }}>{elapsed}</span>
80      </div>
81 
82      <div className="shrink-0 tabular-nums" style={{ color: MUTED }}>
83        <span>{elapsed}</span>
84        <span style={{ color: DIM }}> </span>
85// … truncated