# Agent Session: CLI Feature Cards

> Two small terminals with `theme="auto"` and no preview, as feature cards: a hidden key prompt, and a typo that gets a suggestion instead of a write.

A shadcn/ui block from the [@keyframeui](https://keyframeui.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/keyframeui/agent-session-cli-demo).

- Page, with a live preview: https://shadcn.exchange/r/keyframeui/agent-session-cli-demo
- Screenshot: https://shadcn.exchange/shot/keyframeui/agent-session-cli-demo/light.png
- Registry item: https://keyframeui.com/r/agent-session-cli-demo.json
- Categories: ai, code, developer
- Listed: 2026-11-02, source last changed 2026-11-02

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/keyframeui/agent-session-cli-demo.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://keyframeui.com/r/agent-session.json`

## Notes from the registry

Live preview, examples and props: https://keyframeui.com/components/agent-session#agent-session-cli-demo

## Files

### `registry/demos/agent-session-cli-demo.tsx`

```tsx
"use client";

import { AgentSession, type AgentSessionStep } from "@/components/ui/agent-session";

const cards: { title: string; body: string; script: AgentSessionStep[] }[] = [
  {
    title: "Your key stays in your terminal",
    body: "You paste it once at a hidden prompt. The agent only ever runs tern track, so the key never reaches its context or your repo.",
    script: [
      {
        shell: "npx tern login",
        ms: 1400,
        output: [
          { text: "? Project key  ••••••••••••••••••••", tone: "muted" },
          { text: "✓ Signed in as maya@fieldandfold.co", tone: "success" },
          { text: "  key saved to ~/.config/tern/auth.json", tone: "muted" },
        ],
        pace: 360,
      },
    ],
  },
  {
    title: "A typo gets a question, not a write",
    body: "Event names must match. A near miss suggests the real one, and nothing touches your code until the name is right.",
    script: [
      {
        shell: "npx tern track signup_veiwed",
        ms: 700,
        failed: true,
        output: [
          { text: 'error  no event "signup_veiwed"', tone: "error" },
          { text: "       did you mean signup_viewed?", tone: "default" },
          { text: "       nothing was written", tone: "muted" },
        ],
      },
      {
        shell: "npx tern track signup_viewed",
        ms: 900,
        output: [
          { text: '+ app/signup/page.tsx   track("signup_viewed")', tone: "added" },
          { text: "✓ 1 event tracked", tone: "success" },
        ],
      },
    ],
  },
];

export function AgentSessionCliDemo() {
  return (
    <div className="@container w-full max-w-4xl">
      <div className="grid gap-x-6 gap-y-10 @[38rem]:grid-cols-2">
        {cards.map((card) => (
          <div key={card.title} className="flex min-w-0 flex-col gap-4">
            <AgentSession
              script={card.script}
              theme="auto"
              title="~/web"
              className="[--agent-session-height:13.5rem]"
            />
            <div className="px-1">
              <h3 className="text-sm font-semibold tracking-tight text-zinc-900 dark:text-zinc-100">{card.title}</h3>
              <p className="mt-1 text-sm leading-relaxed text-pretty text-zinc-500 dark:text-zinc-400">{card.body}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
```