5d5bd4a3cb
* feat(ui): scoped graph nodes per ticker + MockEngine for LLM-free UI testing
## Summary
Adds a MockEngine that streams scripted agent events with zero real LLM calls,
enabling full UI testing (graph, terminal, drawer, metrics) without API keys or
network. Also fixes the ReactFlow graph so that each ticker/identifier gets its
own visual node — previously an auto run with 5 tickers collapsed all pipelines
into the same node IDs, overwriting each other.
## Changes
- **MockEngine** (`agent_os/backend/services/mock_engine.py`): new class that
generates realistic scripted events for pipeline, scan, and auto run types.
Supports configurable speed divisor (1× realistic → 10× instant). Auto mock
accepts a `tickers` list for multi-ticker runs.
- **POST /api/run/mock** (`runs.py`): new endpoint wiring MockEngine into the
BackgroundTasks + store pattern identical to real run endpoints.
- **WebSocket routing** (`websocket.py`): added `mock` run-type branch so the
WS executor path also dispatches to MockEngine when the background task hasn't
started yet.
- **LangGraphEngine** (`langgraph_engine.py`): added `_run_identifiers` dict to
track ticker/MARKET/portfolio_id per run; all emitted events now carry an
`identifier` field so the frontend can scope them.
- **AgentGraph.tsx**: ReactFlow nodes now keyed by `node_id:identifier` (e.g.
`news_analyst:AAPL`, `news_analyst:NVDA`). Edges scoped to same identifier.
`onNodeClick` passes raw `node_id` + `identifier` separately so the event
drawer can filter without parsing the scoped key.
- **Dashboard.tsx**: Mock button + type/speed controls added. `openNodeDetail`
accepts identifier; `NodeEventsDetail` filters by both `node_id` and
`identifier`. Comma-separated ticker input for mock auto runs (e.g.
`AAPL,NVDA,TSLA`).
- **useAgentStream.ts**: `AgentEvent` interface extended with `identifier?`
field.
## Decision Context
- Scoped node ID format chosen as `node_id:identifier` (colon separator) rather
than embedding identifier in the agent display name — keeps node labels clean
and identifier visible as a coloured badge, not label text.
- Raw `node_id` and `identifier` stored separately in `node.data` so the drawer
filtering (`events.filter(e => e.node_id === nodeId && e.identifier === id)`)
does not need to parse/split the scoped key.
- Parent edges are scoped to the same identifier as the child, assuming intra-
ticker chains. Cross-run topology edges (e.g. scan → pipeline) are implicit
via log events, not ReactFlow edges.
- MockEngine uses `asyncio.sleep` with a speed divisor — higher speed values
give faster replays for rapid iteration during UI development.
## Considerations for Future Agents
- Re-run button on graph nodes already uses `identifier` to dispatch
`startRun('pipeline', { ticker: identifier })` or `startRun('scan')` — no
further changes needed for per-node re-runs to be correctly scoped.
- The `_run_identifiers` dict in LangGraphEngine is keyed by `run_id`; it is
cleaned up after each run. If parallel runs are ever supported per engine
instance, this dict handles them correctly already.
- For run_auto, each sub-run (scan, per-ticker pipeline) calls its own
`run_scan`/`run_pipeline` which sets `_run_identifiers[run_id]`. The outer
`run_auto` does not set it — this is intentional.
- `uv.lock` changes reflect dependency tree after Chainlit removal in the
previous commit; no new runtime dependencies were added by this PR.
---
🤖 Commit Agent | Session: mock-engine + scoped-graph-nodes
* feat(graph): two-phase column layout — scan top, ticker columns below
## Summary
Redesigns the ReactFlow graph layout engine so scan nodes form a centred funnel
at the top and each ticker gets its own vertical column below, matching the
agreed design. Ticker header cards (bold ticker symbol + pulse dot + progress
counter) act as column anchors; agent cards stack beneath each one. Fan-out
dashed edges connect macro_synthesis → each ticker header.
## Changes
- SCAN phase: geopolitical/market-movers/sector scanners placed on the same
horizontal row at x = [0, COL_WIDTH, 2×COL_WIDTH] (aligns with first 3
ticker columns); industry_deep_dive and macro_synthesis centered below.
- TICKER columns: new identifiers get a TickerHeaderNode at tickerStartY;
agent nodes stack beneath using column-based parent tracking
(header → agent0 → agent1 → …) independent of evt.parent_node_id.
- TickerHeaderNode: wide card, bold ticker symbol, animated pulse status dot,
completedCount/agentCount counter updated live as results arrive.
- Tool nodes (node_id starts with "tool_") skipped from graph — visible in
terminal/drawer, not cluttering the column layout.
- Portfolio nodes centred below all ticker columns.
- Layout state extracted into LayoutState ref + freshLayout() for clean resets.
- Node labels use toLabel() (snake_case → Title Case).
- Metrics row shows total tokens (in+out) instead of just latency.
## Decision Context
- Column-based parent edges chosen over evt.parent_node_id because mock engine
emits parent_node_id="start" for all agents; column ordering is reliable.
- Scan phase X positions reuse COL_WIDTH so phase-1 scanners visually align
above first three ticker columns — no arbitrary magic numbers.
- Tool nodes removed from graph (not hidden) — they add noise to column layout
with no actionable meaning; the drawer already shows them per node.
## Considerations for Future Agents
- identifierLastNode tracks scoped ID of previous agent per ticker column —
used for sequential edge chaining; do not remove without replacing edge logic.
- tickerStartY is set once on first ticker arrival; subsequent tickers share
the same Y baseline — only colCount and identifierAgentRow differ per ticker.
- TickerHeaderNode clicks pass node_id='header' + identifier to onNodeClick;
Dashboard NodeEventsDetail filters all events by identifier when node_id is
'header' (shows the full ticker run timeline in the drawer).
---
🤖 Commit Agent | Session: two-phase column graph layout
|
||
|---|---|---|
| .. | ||
| backend | ||
| frontend | ||
| DESIGN.md | ||
| README.md | ||
| __init__.py | ||
README.md
AgentOS: Visual Observability & Command Center
AgentOS is a real-time observability and command center for the TradingAgents framework. It provides a visual interface to monitor multi-agent workflows, analyze portfolio risk metrics, and trigger automated trading pipelines.
System Architecture
- Backend: FastAPI (Python)
- Orchestrates LangGraph executions.
- Streams real-time events via WebSockets.
- Serves portfolio data from Supabase.
- Port:
8088(default)
- Frontend: React (TypeScript) + Vite
- Visualizes agent workflows using React Flow.
- Displays high-fidelity risk metrics (Sharpe, Regime, Drawdown).
- Provides a live terminal for deep tracing.
- Port:
5173(default)
Getting Started
1. Prerequisites
- Python 3.10+
- Node.js 18+
- uv (recommended for Python environment management)
2. Backend Setup
# From the project root
export PYTHONPATH=$PYTHONPATH:.
uv run python agent_os/backend/main.py
The backend will start on http://127.0.0.1:8088.
3. Frontend Setup
cd agent_os/frontend
npm install
npm run dev
The frontend will start on http://localhost:5173.
Key Features
- Literal Graph Visualization: Real-time DAG rendering of agent interactions.
- Top 3 Metrics: High-level summary of Sharpe Ratio, Market Regime, and Risk/Drawdown.
- Live Terminal: Color-coded logs with token usage and latency metrics.
- Run Controls: Trigger Market Scans, Analysis Pipelines, and Portfolio Rebalancing directly from the UI.
Port Configuration
AgentOS uses port 8088 for the backend to avoid conflicts with common macOS services. The frontend is configured to communicate with 127.0.0.1:8088.