1 variant

Agent Console

An AI agent at work in one panel. The run on the left, its output on the right, and the budget it spent along the bottom.

Ship the agent screen, not the scaffolding

The run, the answer and the budget, already talking to each other.

Why is our checkout route returning a 500 for seat counts over ten?

Run

Read the request and drafted a plan, finished0.8s
Searched the codebase for the checkout route, finished1.3s
Read app/api/checkout/route.ts, finished0.2s
Traced the seat discount branch, finished2.2s
Ran the type check, finished4.6s

5 of 5 steps · 9.2s total

Answer

The discount coupon is created on the first request that needs it, and two requests arriving together both find it missing and both try to create it . The second one fails, and because the create is not wrapped the failure becomes a 500 rather than a retry . Creating the coupon ahead of time, or treating an already exists error as success, closes it .

Run budget this month8,500 / 10,000

Reasoning5,200Tools2,400Search900

Upgrade

page.tsx

import { AgentConsole } from "@/components/blocks/agent-console";

export default function Page() {
  return (
    <AgentConsole
      title="Ship the agent screen, not the scaffolding"
      prompt="Why is checkout returning a 500 over ten seats?"
      steps={[
        { id: "plan", label: "Drafted a plan", status: "done", durationMs: 820 },
        { id: "verify", label: "Ran the type check", status: "done", durationMs: 4600 },
      ]}
      answer={{
        text: "Two requests race to create the same coupon [1].",
        sources: [{ publisher: "docs.stripe.com", title: "Coupons", url: "https://docs.stripe.com/api/coupons" }],
      }}
      usage={{
        label: "Run budget this month",
        limit: 10000,
        categories: [{ label: "Reasoning", value: 5200 }],
      }}
    />
  );
}

"use client";

import { type AgentStep, AgentTimeline } from "@/components/registry/agent-timeline";
import { CitationAnswer, type CitationSource } from "@/components/registry/citation-answer";
import { ThinkingLoader } from "@/components/registry/thinking-loader";
import { type UsageCategory, UsageMeter } from "@/components/registry/usage-meter";
import { cn } from "@/lib/utils";

export interface AgentConsoleProps {
  title: string;
  description?: string;
  /** The prompt the run started from, shown at the top of the panel. */

77 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/agent-console