* 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:
- Extract full prompt from all LLM messages (not just first)
- Add prompt/response fields to streamed event payloads
- Improve model name extraction with multiple fallback strategies
- Add run_portfolio and run_auto streaming methods
- Wire portfolio/auto in websocket router
- New tool_result event type for tool completion
Frontend:
- Add full event detail modal with tabs (Prompt, Response, Summary, Metrics)
- Show actual prompt content in drawer instead of "Prompting unknown..."
- Add Scan, Pipeline, Portfolio, Auto buttons to control panel
- Fix node animation: completed nodes never revert to running
- Handle tool_result type for marking tool nodes as done
- Drawer events have "Full Detail →" button to open modal
Co-authored-by: aguzererler <6199053+aguzererler@users.noreply.github.com>
Agent-Logs-Url: https://github.com/aguzererler/TradingAgents/sessions/7997c579-ab7e-4071-afd0-18703a8e5618
Backend:
- Replace bare print() with structured logging module
- Include LLM prompt snippets and response content in streamed events
- Extract proper node names from LangGraph metadata (langgraph_node)
- Add latency tracking (start/end time per node)
- Add tool input/output content in events
- Add system log event type for informational messages
- Stream on_tool_end events for tool results
Frontend:
- Fix node disappearing/reappearing: use useNodesState/useEdgesState + useEffect
for incremental updates instead of useMemo that rebuilt all nodes on each event
- Fix duplicate node creation: use useRef to track seen node IDs persistently
- Fix useAgentStream reconnection loop: remove stale `status` from connect deps
- Use statusRef to avoid stale closure in onclose handler
- Add auto-scroll to terminal, event count, type labels/colors
- Show prompt snippets, tool I/O, and response content in terminal
- Handle 'log' event type
Packages:
- Update all npm deps to latest compatible minor versions
- Remove node_modules from git tracking, add to .gitignore
Co-authored-by: aguzererler <6199053+aguzererler@users.noreply.github.com>
Agent-Logs-Url: https://github.com/aguzererler/TradingAgents/sessions/5c511c4e-5172-4eda-b6de-aefa1859e8ac
- scaffold Vite + React + TypeScript frontend with Chakra UI and React Flow
- implement AgentGraph, MetricHeader, and Dashboard components
- connect FastAPI to live LangGraph events via astream_events
- implement real-time event mapping for 'scan' and 'pipeline'
- refactor run storage for shared access between REST and WebSockets
- implement FastAPI backend with REST and WebSocket streaming
- add node-level metrics (tokens, latency) to event protocol
- design literal graph and top 3 metrics (Sharpe, Regime, Drawdown)
- scaffold React frontend with Chakra UI and useAgentStream hook
- add DESIGN.md and .env.example
Copilot
ahmet guzererler