Building a Real-Time AI Agent Dashboard in Angular 21: How We Used Signals, OnPush to Ship a Production-Ready LLM Monitor

Square Bootstrap — Sun, 08 Mar 2026 11:04:49 +0000

AgentOps Pro launches March 10, 2026 — a production-ready Angular 21 template for teams monitoring LLM agents at scale. Here's how we built it, and why every architectural decision matters.

AI teams are deploying agents faster than they can monitor them. You have GPT-4o orchestrating sub-agents, Claude 3.5 handling reasoning chains, Gemini processing retrieval — and your observability stack is a mix of console logs and Grafana panels that weren't designed for agent workflows.

We built AgentOps Pro to close that gap. It's a fully-featured Angular 21 dashboard template with 23 pages, 31 reusable components, real-time WebSocket integration, and a signal-based architecture that delivers 60fps performance even while streaming thousands of agent events per minute.

Here's the complete architecture story.

Why Angular 21 for an AI Dashboard?

When we evaluated frameworks, Angular 21 won on three counts:

Signals are production-stable — Angular's reactive primitive eliminates zone.js overhead. Every state change is precise, targeted, and zero-allocation on unchanged subtrees.
Standalone components are now the default — No NgModules means full tree-shaking. Our initial bundle is under 800kB for 23 routes.
Lazy loading is first-class — Each of our 23 feature pages loads as a separate content-hashed chunk. Users loading the Dashboard don't download the Compliance Audit module.

React would have worked. Vue would have worked. But for a team already comfortable with TypeScript-first tooling and wanting ChangeDetectionStrategy.OnPush baked in everywhere, Angular 21 was the productive choice.

The Signal-Based State Architecture (No NgRx)

This is the architectural decision we're most proud of. We rejected NgRx entirely and built a central AgentStore using Angular's native signal APIs.

@Injectable({ providedIn: 'root' })
export class AgentStore {
  // Private mutable state
  private readonly _agents = signal<Agent[]>([]);
  private readonly _executions = signal<AgentExecution[]>([]);
  private readonly _metrics = signal<SystemMetrics>(defaultMetrics);

  // Public read-only exposure — components can't mutate directly
  readonly agents = this._agents.asReadonly();
  readonly executions = this._executions.asReadonly();
  readonly metrics = this._metrics.asReadonly();

  // Computed derived state — memoized, recalculates only on dependency change
  readonly activeAgents = computed(() =>
    this._agents().filter(a => a.status === 'active')
  );

  readonly totalCost = computed(() =>
    this._executions().reduce((sum, e) => sum + e.cost, 0)
  );

  readonly executionStats = computed<ExecutionStats>(() => {
    const execs = this._executions();
    const completed = execs.filter(e => e.status === 'completed');
    return {
      total: execs.length,
      successRate: completed.length / execs.length,
      avgDuration: avg(completed.map(e => e.duration)),
      totalTokens: execs.reduce((sum, e) => sum + e.tokens, 0),
    };
  });
}

The pattern is simple: private signals, public read-only, computed derivations. No actions. No reducers. No selectors. Just TypeScript.

Every service follows the same convention:

@Injectable({ providedIn: 'root' })
export class CostOptimizerService {
  private readonly store = inject(AgentStore);

  readonly recommendations = computed(() => {
    const executions = this.store.executions();
    // Analyze expensive model usage, caching opportunities, batch patterns
    return this.generateRecommendations(executions);
  });
}

The result: 31 services, zero subscription leaks, and derived state that's always consistent.

OnPush Change Detection Everywhere
Every component in AgentOps Pro uses ChangeDetectionStrategy.OnPush. Not as an optimization pass we added later — as a requirement from day one.

@Component({
  selector: 'app-agent-monitor',
  standalone: true,
  imports: [ExecutionTimeline, AgentQueuePanel, MetricsPanel],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    @for (agent of activeAgents(); track agent.id) {
      <app-execution-timeline [agent]="agent" />
    }
  `
})
export class AgentMonitorComponent {
  private readonly store = inject(AgentStore);
  readonly activeAgents = this.store.activeAgents;
}

When a WebSocket event updates _agents, Angular's signal graph propagates the change to only the components that depend on it. With 200+ agent executions streaming per minute, this is the difference between 60fps and 12fps.

Note the @for control flow — Angular 17+ syntax, not *ngFor. It's faster and catches duplicate tracking key errors at compile time.

Real-Time WebSocket with Dual-Mode Operation
The WebSocketService supports two modes: real WebSocket connection and a fully-simulated mock mode for offline development and the ThemeForest template distribution.

// In environment.themeforest.ts — the $59 template tier
export const environment = {
  mockMode: true,
  realTimeWebSocket: true, // Mock ticker, no actual WS server needed
  features: {
    orchestrationPlanner: true,
    complianceAudit: true,
    halluccinationDetection: true,
    // All 10 showcase features work with zero backend
  }
};

In mock mode, the service generates statistically realistic event sequences — agent status transitions, cost accumulations, completion events — at 2-second intervals. When you flip mockMode: false and point wsUrl at a real endpoint, everything works with zero code changes.

The connection manager handles reconnection with exponential backoff:

readonly connectionStatus = signal<'connected' | 'connecting' | 'disconnected' | 'error'>('disconnected');

private reconnect() {
  const delay = Math.min(3000 * Math.pow(2, this.attempts), 30000);
  setTimeout(() => this.connect(), delay);
}

10 Showcase Features: What's Inside
AgentOps Pro ships with 23 fully implemented pages. Here are the 10 that define the product:

Real-Time Dashboard
Canvas-based 60fps wave animation with particle effects. Live system metrics — token count, cost burn rate, context window utilization — update in real time as agents execute. A force-directed D3.js graph shows agent topology with animated connection edges.
Agent Monitor
Per-agent execution timelines. Queue depth tracking. Phase-by-phase step inspector (planning → executing → responding). Per-execution cost and latency breakdown with token counts.
Orchestration Planner
DAG visualization of multi-agent plans using ngx-graph. Task dependency resolution, blocked task detection, and load distribution across the agent fleet.
Cost Optimizer
Real-time model pricing for GPT-4o, Claude 3.5, Gemini 1.5, and others. Identifies expensive model usage on low-token tasks, recommends batching, and flags caching opportunities.
Prompt Manager
Git-like version history for prompts. A/B testing with configurable traffic splits. Statistical significance tracking. Automatic rollback.
Agent Performance
Benchmark leaderboard. Side-by-side model comparison on latency, cost, and quality. Live load test runner.
Session Replay
Frame-accurate step-through debugger with scrubber timeline. Decision tree visualization at each reasoning step.
Hallucination Detection
Confidence scoring with animated SVG circular gauge. Source citation engine. Side-by-side ground-truth diff viewer.
LLM Playground
Multi-model sandbox with streaming responses, parameter tuning (temperature, topP, max tokens), and tool calling simulation.
Compliance Audit
PII detection. GDPR/HIPAA/SOC2 ruleset enforcement. Immutable audit log. OpenTelemetry trace links per compliance event.

The Design System: 150+ CSS Custom Properties
The dark neon theme is fully token-driven. Zero hardcoded colors anywhere in the codebase. A few examples:

// _tokens.scss
--accent-primary: #00e5ff;    // Cyan — primary actions
--accent-success: #00e676;    // Green — healthy agents
--accent-warning: #ff9100;    // Orange — degraded state
--accent-error: #ff5252;      // Red — critical alerts
--accent-ai: #b388ff;         // Purple — AI/ML features

--glass-bg: rgba(8, 16, 28, 0.9);
--backdrop-blur: blur(8px);

--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);

Glassmorphism panels use layered backgrounds — dark navy base, backdrop-filter: blur, and a 5–15% white border — to create depth without performance cost on modern GPUs.

Lazy Loading: 23 Routes, Each a Separate Chunk

// app.routes.ts
export const routes: Routes = [
  {
    path: 'dashboard-v1',
    loadComponent: () => import('./features/dashboard-v1/dashboard-v1')
      .then(m => m.Dashboardv1Component)
  },
  {
    path: 'compliance-audit',
    loadComponent: () => import('./features/compliance-audit/compliance-audit')
      .then(m => m.ComplianceAuditComponent)
  },
  // ... 21 more routes
];

Each chunk is content-hashed. dashboard-v1.abc123.js. When we ship a fix to the Compliance Audit page, only users who navigate there download the update. The rest hit CDN cache.

31 Shared Components with Barrel Exports

// src/app/shared/components/index.ts
export * from './agent-network/agent-network';
export * from './circular-gauge/circular-gauge';
export * from './execution-timeline/execution-timeline';
export * from './wave-canvas/wave-canvas';
// ... 27 more

// In any feature component:
import { AgentNetwork, CircularGauge, WaveCanvas } from '@app/shared/components';

This is the pattern that makes the 31-component library composable. Feature pages assemble dashboards from atomic components. Each component is standalone — it declares its own imports, has its own SCSS, and is independently tree-shakeable.

What We Learned
Use signals everywhere, not just in stores. We started with signals only in services, but moved them into components too. The result: no AsyncPipe, no subscribe() calls, no manual cleanup.

OnPush is not optional for real-time UIs. During development, we temporarily removed OnPush from the Agent Monitor to debug a rendering issue. Frame rate dropped from 60 to 8fps under normal load. It went back on immediately.

Mock mode pays for itself. Building the full UI against a mock data layer first — before the backend existed — let us validate UX assumptions without API dependencies. When we connected the real backend, the UI worked on the first attempt.

CSS custom properties beat CSS-in-JS for dashboards. Our glassmorphism effects, glow intensities, and animation timings are all tokens. Theming is a variable swap, not a component tree rewrite.

Launch: March 10, 2026
AgentOps Pro v1.0.0 launches on March 10, 2026 on ThemeForest.

23 fully implemented pages
31 reusable Angular 21 components
Signal-based state management (no NgRx)
Real-time WebSocket + mock mode
Dark neon design system with 150+ CSS tokens
Full source code, commercial license
View the live demo → AgentOps AI - Angular Dashboard Template

If you're building an AI product or need a production-ready Angular dashboard foundation, this is worth a look. Questions? Drop them in the comments.

Built with Angular 21, TypeScript 5.9, Chart.js, D3.js, ngx-graph, and a lot of real-time thinking.

DEV Community: Square Bootstrap

Building a Real-Time AI Agent Dashboard in Angular 21: How We Used Signals, OnPush to Ship a Production-Ready LLM Monitor

Why Angular 21 for an AI Dashboard?

The Signal-Based State Architecture (No NgRx)