Grok Session Active

1import { GrokStatus } from "@/registry/brainless/grok/grok-status";
2import { GrokMessage } from "@/registry/brainless/grok/grok-message";
3import { GrokEvent } from "@/registry/brainless/grok/grok-event";
4import { GrokThought } from "@/registry/brainless/grok/grok-thought";
5import { GrokTool } from "@/registry/brainless/grok/grok-tool";
6import { GrokWrite } from "@/registry/brainless/grok/grok-write";
7import { GrokWorking } from "@/registry/brainless/grok/grok-working";
8import { GrokPrompt } from "@/registry/brainless/grok/grok-prompt";
9 
10/**
11 * GrokSessionActive — a mid-turn Grok CLI screen: status bar, live transcript
12 * (hooks → streaming thought → tool card → write preview), the working footer
13 * with token count / stop, and the composer in cancel mode.
14 */
15export function GrokSessionActive() {
16  return (
17    <div className="space-y-3 font-mono text-[13px] leading-[1.6] text-[#e8e8e8]">
18      <GrokStatus
19        branch="main"
20        directory="~/dev/acme-app"
21        contextUsed="16.6k"
22        contextLimit="500K"
23        turn={1}
24        turnTotal={3}
25      />
26 
27      <div className="space-y-2 pt-1">
28        <GrokMessage role="user" time="4:51 PM">
29          overwrite theme-toggle.tsx so the label reads &quot;Dark mode&quot;.
30          Nothing else.
31        </GrokMessage>
32 
33        <GrokEvent label="user_prompt_submit" hooks={3} hooksOk={1} />
34 
35        <GrokThought streaming>
36          theme-toggle.tsx already exports ThemeToggle. I&apos;ll patch the
37          visible label to &quot;Dark mode&quot;, then stop.
38        </GrokThought>
39 
40        <GrokTool
41          variant="card"
42          title="Run Write components/theme-toggle.tsx"
43          hooks={3}
44        />
45 
46        <GrokWrite
47          before={[{ n: 18, text: 'aria-label="Toggle theme"' }]}
48          after={[{ n: 18, text: 'aria-label="Dark mode"' }]}
49          hooks={{
50            pre: [
51              {
52                label: "global/settings:pre_tool_use[0].hooks[0]",
53                ok: true,
54                ms: 11,
55              },
56            ],
57          }}
58        />
59 
60        <GrokWorking
61          diamond
62          label="Write components/theme-toggle.tsx…"
63          tokens="16.6k"
64          showScrollHint
65        />
66      </div>
67 
68      <div className="pt-3">
69        <GrokPrompt mode="always-approve" busy showShortcuts />
70      </div>
71    </div>
72  );
73}