Grok Event

1import * as React from "react";
2import { cn } from "@/lib/utils";
3 
4/**
5 * GrokEvent — a ◆ diamond event line from Grok's transcript.
6 *
7 * Captured examples: `◆ Thought for 0.2s`, `◆ user_prompt_submit  [hooks: 3/1]`,
8 * `◆ stop  [hooks: 3/1]`, `◆ List .  [hooks: 3]`.
9 */
10const SILVER = "#c0c0c0"; // 38;5;7 — ◆ event diamonds
11const FG = "#e1e1e1";
12const MUTED = "#8b8b90";
13const DIM = "#6c6c6c";
14const GREEN = "#00ff00"; // 38;5;10 — successful hook counts
15 
16export function GrokEvent({
17  label,
18  hooks,
19  hooksOk,
20  elapsed,
21  className,
22  children,
23}: {
24  label: string;
25  /** Total hooks fired, e.g. 3. */
26  hooks?: number;
27  /** Successful hooks when shown as `3/1`. */
28  hooksOk?: number;
29  /** Optional elapsed suffix, e.g. `0.2s` → "Thought for 0.2s" style via label. */
30  elapsed?: string;
31  className?: string;
32  children?: React.ReactNode;
33}) {
34  const hooksText =
35    hooks == null
36      ? null
37      : hooksOk != null
38        ? null // rendered with split colors below
39        : (
40            <span style={{ color: DIM }}>
41              [hooks: <span style={{ color: GREEN }}>{hooks}</span>]
42            </span>
43          );
44 
45  return (
46    <div
47      className={cn(
48        "flex flex-wrap items-baseline gap-x-2 font-mono text-[13px] leading-[1.55]",
49        className,
50      )}
51    >
52      <span aria-hidden style={{ color: SILVER }}>
53        ◆
54      </span>
55      <span style={{ color: FG }}>
56        {label}
57        {elapsed ? (
58          <>
59            {" "}
60            <span style={{ color: MUTED }}>{elapsed}</span>
61          </>
62        ) : null}
63      </span>
64      {hooks != null && hooksOk != null ? (
65        <span style={{ color: DIM }}>
66          [hooks:{" "}
67          <span style={{ color: GREEN }}>{hooks}</span>
68          <span>/{hooksOk}</span>]
69        </span>
70      ) : (
71        hooksText
72      )}
73      {children}
74    </div>
75  );
76}