Block

Agent Console

An agent at work as one panel rather than four components sitting near each other. The run is on the left, what came out of it is on the right, and the budget it spent runs along the bottom.

Agent Timeline
Citation Answer
Thinking Loader
Usage Meter

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. */

83 more lines ship with an easeUI Pro license.

Buy a license

Install

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

Props

titleRequiredstring

The section heading.

descriptionstring

One line under the heading.

promptRequiredstring

What the run started from, shown along the top of the panel.

stepsRequiredAgentStep[]

The run, newest last. Same shape the Agent Timeline takes.

answer{ text: string; sources: CitationSource[] }

Left off, the right column shows the loader instead, so the panel reads the same mid run as it does when finished.

workingLabelstringDefault "Working"

Status text beside the pixel grid. Only drawn while answer is missing.

usage{ label; categories; limit; upgradeHref? }

The budget strip along the bottom. Left off, the strip is not drawn.

classNamestring

Merged last, so anything passed here wins over the component's own classes.