Summary

Real-time agent activity dashboard showing what the agent is doing behind the scenes — execution tree, tool calls, thinking steps, and timeline — replacing the current black-box experience.

Problem to solve

The current Control UI provides post-hoc views (logs, sessions, usage) but no live visibility into what the agent is doing right now. When an agent is processing a request — reasoning, calling tools, delegating to sub-agents, waiting on external APIs — the user sees nothing until the final response arrives. This creates a black-box experience that makes it hard to:

• Debug: understand why a response is slow, stuck, or wrong
• Trust: know the agent is working and not looping or erroring silently
• Learn: see how the agent breaks down problems and uses tools
• Intervene: cancel or redirect a runaway execution before it burns tokens

This is especially painful for multi-step tasks, cron jobs running in the background, and multi-agent routing scenarios where execution spans multiple agents and tool chains.

Proposed solution

A new Agent Activity panel in the Control UI (new sidebar tab or overlay accessible from Overview) with three layers:

1. Execution Tree (live)

A real-time tree/graph view of the current execution:

[agent:main] Processing user request
  ├─ [thinking] Analyzing code structure...
  ├─ [tool:file_read] src/gateway/config.ts ✓ (120ms)
  ├─ [tool:web_search] "openclaw gateway auth" ✓ (850ms)
  ├─ [thinking] Comparing approaches...
  └─ [tool:file_write] src/gateway/auth.ts ⏳ (in progress)

Each node shows: agent ID, action type (thinking/tool/delegation/output), status (pending/running/done/error), duration, and token cost.

2. Timeline (chronological)

A time-ordered event stream with filtering by event type, agent, and session:

• agent.start / agent.end with duration and iteration count
• agent.thinking with content preview (collapsible)
• tool.call / tool.result with input/output summaries
• agent.error with recovery status
• agent.delegation for multi-agent handoffs

3. Metrics sidebar

Live counters during execution:

• Tokens consumed (input/output/cache)
• Tool calls count and latency histogram
• Active agents and delegation depth
• Error count and rate

Architecture approach

OpenClaw's gateway already emits structured events over WebSocket. The proposal extends this with a typed event envelope that the Control UI can subscribe to:

// New event types on the gateway WS protocol
interface AgentActivityEvent {
  type: 'agent.start' | 'agent.end' | 'agent.thinking' | 'agent.iteration'
      | 'tool.call' | 'tool.result' | 'agent.error' | 'agent.delegation';
  metadata: {
    eventId: string;
    timestamp: Date;
    correlationId: string;   // ties events to a single request
    sessionKey: string;
    agentId: string;
    traceId?: string;        // for distributed tracing
  };
  payload: Record<string, unknown>;  // type-specific data
}

Gateway side:

• Instrument the Pi agent loop to emit AgentActivityEvent at each phase (thinking start/end, tool dispatch/return, delegation, completion)
• Events flow through the existing WS broadcast mechanism (same path as chat SSE)
• Events are ephemeral by default (not persisted), with an opt-in flag to write to session history for post-hoc inspection

Control UI side:

• New AgentActivity panel component (Svelte/Lit) subscribing to the activity event stream
• ExecutionTree component rendering a live-updating tree with expand/collapse
• Timeline component with virtual scrolling and event-type filters
• MetricsSidebar with live counters derived from the event stream
• All rendering is client-side from the WS stream — no new API endpoints needed

Prior art / reference implementation

I've built a similar system, a multi-tenant AI agent orchestration platform, which has:

• EventBus (src/lib/agent-core/events/EventBus.ts): Typed pub/sub with correlation IDs, wildcard subscriptions, and async handlers — emits agent.start, agent.end, agent.thinking, tool.call, tool.result, agent.error events
• ExecutionTree (src/lib/agent-core/execution/ExecutionTree.ts): Tree structure tracking agent delegation chains with depth limits, cycle detection, and per-node cost rollups
• ExecutionVisualizer (src/lib/agent-core/visualization/ExecutionVisualizer.ts): Converts execution state into timeline events and graph layouts for the UI
• Metrics (src/lib/agent-core/observability/Metrics.ts): Counter/Gauge/Histogram collectors with label support and exporters

The key architectural difference is that system is a monolithic SvelteKit app where events flow in-process, while OpenClaw's gateway architecture means events need to flow over the existing WebSocket protocol. But the event taxonomy and UI patterns map directly.

I'd be happy to contribute a proof-of-concept implementation adapting these patterns to OpenClaw's gateway protocol and Control UI.

Alternatives considered

• Expanding the existing Logs tab: The logs tab shows raw gateway log lines, which are too noisy and unstructured for understanding agent behavior. A structured activity view is fundamentally different from log tailing.
• Adding more detail to the Chat view: The chat already shows tool calls when toggled, but it's interleaved with conversation flow and doesn't show thinking, delegation, or timing. A dedicated panel keeps concerns separated.
• External observability (Grafana/OTEL): OpenClaw already has some OTEL instrumentation, but this requires a separate stack and doesn't integrate into the Control UI for real-time visibility. The proposal is complementary — OTEL for ops teams, Activity panel for end users.

Impact

• Affected: All gateway users, especially those running multi-agent workspaces, cron jobs, or complex tool-heavy workflows
• Severity: High — the black-box problem is the single biggest UX gap when operating an agent gateway
• Frequency: Every interaction where the agent takes more than a few seconds
• Consequence: Users can't tell if the agent is working, stuck, or erroring; they end up resubmitting messages, checking logs manually, or waiting blindly. Power users who run background cron agents have zero visibility without SSH-ing into logs.

Evidence/examples

• What i did implements this pattern successfully with its EventBus + ExecutionTree + ExecutionVisualizer stack
• Claude Code's own terminal UI shows thinking/tool-call progress in real time — the same experience should be available in OpenClaw's web dashboard
• Cursor and Windsurf IDEs both show live agent activity panels, validating the UX pattern

Additional information

• The existing Event Log section on the Overview page (visible in the current UI) already shows tick/health events — this proposal extends that pattern to agent-level granularity
• The gateway WS protocol (src/gateway/protocol/) supports additive evolution per the repo's boundary guidelines, so new event types can be added without breaking existing clients
• Happy to start with a scoped PR covering just the event emission from the agent loop + a minimal tree view component, then iterate