Live Agent Execution Viewer

The Live Agent Execution Viewer gives you real-time, terminal-style visibility into what the AI agent is doing as it builds your product. It is accessible from the Live Preview section of any product dashboard.

Overview

Instead of seeing only a status badge (implementing, testing), you now get a full feed of every tool call, file write, reasoning step, and build event — streamed live as the agent works.

Accessing the Viewer

Open a product from the dashboard.
Navigate to Live Preview.
The Live Agent Execution tab is selected by default.
Switch to Design Previews at any time to return to the previous visual preview.

Pipeline Selector

At the top of the viewer, pill buttons show the 8 most recent pipeline runs for the product.

A green pulse dot indicates an actively running pipeline.
The viewer auto-selects the currently running pipeline on load.
Selecting a completed run replays its full event log.

Status Bar

Below the pipeline selector, the status bar shows:

Field	Description
Connection badge	`Live`, `Reconnecting`, or `Ended`
Feature title	The feature being implemented
Status badge	Current pipeline status
Counters	Tool calls made, files written, errors encountered
Full view link	Deep link to the full pipeline detail page

Running Agent Strip

When multiple agent jobs are running concurrently, each is shown as a spinning pill with its agent type label and elapsed time.

Supported agent type labels include: Research, Design, Implementation, Testing, Release, Marketing, Documentation, Security, UI/UX, Dependency, Migration, Architect, and more.

Run Summary Bar

A compact 5-stat bar displays aggregate metrics for the selected run:

Input tokens
Output tokens
Total tokens
Estimated cost
Duration

Pipeline Timeline

A visual timeline shows the current phase of the pipeline (e.g. research → design → implementation → testing → release).

Content Feed Tabs

Activity

The default tab. Shows every event emitted during the run in chronological order.

Filter options: All · Tool Calls · Reasoning · Errors

Tool call rows:

Each tool call is shown as an expandable row with an icon, tool name, and inline context (e.g. file path for write_file, search query for search_code, PR title for create_pull_request).
Execution time in milliseconds is shown when available.
A green checkmark or red warning icon indicates success or failure.
Expanding a write_file call renders a full inline diff viewer for the written file.
Expanding any other call shows the raw JSON input and output.

Thinking steps:

Displayed in purple italic text, clearly distinguished from tool calls.

Errors:

Shown with a red background; expandable to reveal the full stack trace.

Auto-scroll:

The feed scrolls to the latest event automatically.
A Resume button appears if you have manually scrolled up, letting you jump back to the bottom.

Reasoning

A dedicated view of all thinking steps emitted by the agent, rendered as a ReasoningChain. Useful for understanding why the agent made a particular decision.

Files

A full diff view of every file written during the run, grouped by file path with agent attribution. Useful for reviewing all code changes in one place without expanding individual tool call rows.

Empty State

If no pipeline runs exist for the product yet, the viewer shows a prompt with links to the Pipelines and Queue pages to get started.

Technical Details

Streams events over the existing SSE endpoint (/api/pipelines/[id]/stream) — no additional backend setup required.
Polls for new pipeline runs every 10 seconds to automatically surface newly started jobs.
Both the AgentLiveExecution and DesignPreviews components are loaded as dynamic ssr: false imports — the page bundle stays lean.
Reuses existing components: DiffViewer, DiffBadge, ReasoningChain, PipelineTimeline, StatusBadge.