Agent Session: CLI Feature Cards

"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>
  );
}