# Inspiration

AI trading agents are powerful, but without clear guardrails they can make risky or non‑compliant decisions. We wanted a way for everyday users to see, in plain English, how their rules protect them in real time. The playground turns policy enforcement into something you can watch and understand, not just trust blindly.

# What it does

The dashboard runs a session-based simulator where you set a starting balance, start the agent, and watch trades process one by one. Each trade is evaluated against your policies with live visual highlights, then approved, blocked, or auto‑modified. A dynamic chart shows price action with trade markers, and a transaction log captures every signal, decision, and balance change.

# How we built it

We used Next.js and React with a modular UI: SessionConfig, PolicyGrid, TradeIntentCard, DecisionOutcomeCard, and TransactionLog. Market data powers the chart, and trade markers are added as the session progresses. The deterministic policy engine is written in TypeScript and the session state manager ties signals, evaluations, and portfolio updates together.

# Challenges we ran into

Chart libraries changed APIs and caused hydration issues, so we switched to client‑only rendering and tightened the integration. Making the engine “visible” without being noisy took iteration on timing, copy, and motion. We also had to keep the UI sleek while still surfacing detailed violations and suggested fixes.

# Accomplishments that we're proud of

Policy checks now read like a story with clear pass, block, and modify states that line up with the transaction log. Users can configure a starting balance and watch their rules impact P&L in real time. The playground feels modern and approachable while still being accurate and deterministic.

# What we learned

Plain language beats error codes when users want to understand why a trade was blocked. Short, deliberate animations help users follow complex flows without feeling slowed down. Good boundaries between SSR and client components are essential when mixing charts, timers, and real‑time data.

# What’s next for RouteGuard

Package the core as a public SDK with a hosted API, auth, and per‑user policy storage. Add on‑chain execution, WebSocket streaming, and richer policy types like position limits and trading hours. Ship docs, templates, and exportable reports so developers can drop RouteGuard into their bots in minutes.