Grok Session

1import { GrokStatus } from "@/registry/brainless/grok/grok-status";
2import { GrokHeader } from "@/registry/brainless/grok/grok-header";
3import { GrokMessage } from "@/registry/brainless/grok/grok-message";
4import { GrokEvent } from "@/registry/brainless/grok/grok-event";
5import { GrokThought } from "@/registry/brainless/grok/grok-thought";
6import { GrokTool } from "@/registry/brainless/grok/grok-tool";
7import { GrokWrite } from "@/registry/brainless/grok/grok-write";
8import { GrokPermission } from "@/registry/brainless/grok/grok-permission";
9import { GrokTurnEnd } from "@/registry/brainless/grok/grok-turn-end";
10import { GrokPrompt } from "@/registry/brainless/grok/grok-prompt";
11 
12/**
13 * GrokSession — a complete Grok CLI screen: status bar, launch card, a full
14 * turn (prompt → hooks → thought → tools → write → approval → stop) and the
15 * rounded composer.
16 */
17export function GrokSession() {
18  return (
19    <div className="space-y-3 font-mono text-[13px] leading-[1.6] text-[#e8e8e8]">
20      <GrokStatus
21        branch="main"
22        directory="~/dev/acme-app"
23        contextUsed="16K"
24        contextLimit="500K"
25        turn={2}
26        turnTotal={3}
27      />
28 
29      <GrokHeader />
30 
31      <div className="text-[#6c6c6c]">
32        Tip: Use Shift+Tab to cycle between modes, like Plan mode.
33      </div>
34 
35      <div className="space-y-2 pt-1">
36        <GrokMessage role="user" time="4:38 PM">
37          add a dark-mode toggle to the settings page and run the tests
38        </GrokMessage>
39 
40        <GrokEvent label="user_prompt_submit" hooks={3} hooksOk={1} />
41        <GrokThought elapsed="0.4s" />
42 
43        <GrokMessage time="4:38 PM">
44          I&apos;ll inspect the settings page, drop in a toggle, then run the
45          suite.
46        </GrokMessage>
47 
48        <GrokTool verb="read" path="app/settings/page.tsx" />
49        <GrokTool
50          variant="card"
51          title="Run Write components/theme-toggle.tsx"
52          hooks={3}
53        />
54        <GrokWrite
55          before={[{ n: 12, text: "return <SettingsForm />" }]}
56          after={[{ n: 12, text: "return <SettingsForm showThemeToggle />" }]}
57        />
58 
59        <GrokPermission
60          title="Edit app/settings/page.tsx"
61          command="apply patch (+1 −1)"
62        />
63 
64        <GrokEvent label="stop" hooks={3} hooksOk={1} />
65        <GrokTurnEnd elapsed="12.4s" />
66      </div>
67 
68      <div className="pt-3">
69        <GrokPrompt mode="always-approve" showShortcuts={false} />
70      </div>
71// … truncated