# Grok Session Active

> A mid-turn Grok CLI screen: status bar, streaming thought, tool card, write preview, and the working footer with ⇣tokens / [stop].

A shadcn/ui block from the [@brainless](https://brainless.swerdlow.dev) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/brainless/grok-session-active).

- Page, with a live preview: https://shadcn.exchange/r/brainless/grok-session-active
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/brainless/grok-session-active-light-6a851f4851ae1224.png
- Registry item: https://brainless.swerdlow.dev/r/grok-session-active.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://brainless.swerdlow.dev/r/grok-session-active.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://brainless.swerdlow.dev/r/grok-status.json`, `https://brainless.swerdlow.dev/r/grok-message.json`, `https://brainless.swerdlow.dev/r/grok-event.json`, `https://brainless.swerdlow.dev/r/grok-thought.json`, `https://brainless.swerdlow.dev/r/grok-tool.json`, `https://brainless.swerdlow.dev/r/grok-write.json`, `https://brainless.swerdlow.dev/r/grok-working.json`, `https://brainless.swerdlow.dev/r/grok-prompt.json`

## Files

### `registry/brainless/blocks/grok-session-active.tsx`

```tsx
import { GrokStatus } from "@/registry/brainless/grok/grok-status";
import { GrokMessage } from "@/registry/brainless/grok/grok-message";
import { GrokEvent } from "@/registry/brainless/grok/grok-event";
import { GrokThought } from "@/registry/brainless/grok/grok-thought";
import { GrokTool } from "@/registry/brainless/grok/grok-tool";
import { GrokWrite } from "@/registry/brainless/grok/grok-write";
import { GrokWorking } from "@/registry/brainless/grok/grok-working";
import { GrokPrompt } from "@/registry/brainless/grok/grok-prompt";

/**
 * GrokSessionActive — a mid-turn Grok CLI screen: status bar, live transcript
 * (hooks → streaming thought → tool card → write preview), the working footer
 * with token count / stop, and the composer in cancel mode.
 */
export function GrokSessionActive() {
  return (
    <div className="space-y-3 font-mono text-[13px] leading-[1.6] text-[#e8e8e8]">
      <GrokStatus
        branch="main"
        directory="~/dev/acme-app"
        contextUsed="16.6k"
        contextLimit="500K"
        turn={1}
        turnTotal={3}
      />

      <div className="space-y-2 pt-1">
        <GrokMessage role="user" time="4:51 PM">
          overwrite theme-toggle.tsx so the label reads &quot;Dark mode&quot;.
          Nothing else.
        </GrokMessage>

        <GrokEvent label="user_prompt_submit" hooks={3} hooksOk={1} />

        <GrokThought streaming>
          theme-toggle.tsx already exports ThemeToggle. I&apos;ll patch the
          visible label to &quot;Dark mode&quot;, then stop.
        </GrokThought>

        <GrokTool
          variant="card"
          title="Run Write components/theme-toggle.tsx"
          hooks={3}
        />

        <GrokWrite
          before={[{ n: 18, text: 'aria-label="Toggle theme"' }]}
          after={[{ n: 18, text: 'aria-label="Dark mode"' }]}
          hooks={{
            pre: [
              {
                label: "global/settings:pre_tool_use[0].hooks[0]",
                ok: true,
                ms: 11,
              },
            ],
          }}
        />

        <GrokWorking
          diamond
          label="Write components/theme-toggle.tsx…"
          tokens="16.6k"
          showScrollHint
        />
      </div>

      <div className="pt-3">
        <GrokPrompt mode="always-approve" busy showShortcuts />
      </div>
    </div>
  );
}
```