Agent Workspace

A visual workspace that tracks agent task execution in real time. Shows a task card with progress bar, an expandable list of tool-call steps with arguments and results, an optional collapsible reasoning panel, and a final output card with a copy button.

Task

Refactor the DataFetcher component to use React Server Components.

Progress2 / 4 steps

Tool calls

import { AgentWorkspace } from "@aetherstack/blocks"

Installation

terminal

npx aether-ui add agent-workspace

Import

import.tsx

import { AgentWorkspace } from "@aetherstack/blocks"

Usage

agent-workspace.tsx

import { AgentWorkspace } from "@aetherstack/blocks"

export function RunningAgent() {
  return (
    <AgentWorkspace
      task="Refactor the DataFetcher component to use React Server Components."
      isRunning
      steps={[
        { id: "s1", toolName: "search_web", status: "done", args: { query: "RSC patterns" }, result: { count: 8 } },
        { id: "s2", toolName: "read_file", status: "done", args: { path: "src/DataFetcher.tsx" } },
        { id: "s3", toolName: "write_code", status: "running", args: { filename: "src/DataFetcher.server.tsx" } },
        { id: "s4", toolName: "run_tests", status: "pending" },
      ]}
      reasoning="The existing component uses useEffect for data fetching which can be replaced with async/await in a Server Component…"
    />
  )
}

Props

Prop	Type	Default	Description
task	string	—	The task description shown at the top of the workspace.
steps	AgentStep[]	[]	Array of tool-call step objects to display.
reasoning	string	—	Optional reasoning text shown in a collapsible side panel.
output	string	—	Final agent output shown in a card with a copy button.
isRunning	boolean	false	When true, shows a progress bar in the task card.
className	string	—	Additional classes on the root element.

* Required

Accessibility

→Step expand/collapse buttons are keyboard-focusable and include an implicit label from the tool name text.
→The reasoning toggle button is keyboard-accessible.
→The 'Copy output' button uses the Clipboard API and is keyboard-reachable.
→Status icons convey state visually; the text label beside each step provides the same information in text form.