Portal Community

DevTools vs Embedded Monitors

FeatureEmbedded MonitorsDevTools App
HooksMonitorYesYes
SubscribersMonitorYesYes
ActivityStreamMonitorYesYes
Node ExplorerNoYes
Action InvokerNoYes
ANCP viewNoYes
DeploymentEmbedded in appStandalone app / route
Target audienceQuick in-app debug panelFull developer investigation

DevTools Sections

Activity Stream Monitor

Full ActivityStreamMonitor with complete filtering, export, and timeline views — identical to the embedded component but with more screen real estate.

Hooks Monitor

Full HooksMonitor with the Settings tab to toggle hook logging at runtime.

Subscribers Monitor

Full SubscribersMonitor with topic breakdown and Settings tab for subscriber logging toggle.

Node Explorer

Inspect the live state of all registered servers and their pipelines:

// Node Explorer shows for each server:
// - Server ID and type ('bas' | 'chat')
// - Transport status (connected / reconnecting / error)
// - Incoming pipeline: list of hooks with name and priority
// - Outgoing pipeline: list of hooks with name and priority
// - Active subscriptions: topic patterns and subscriber IDs
// - Message throughput: messages/second received and sent

Action Invoker

Fire test messages into the pipeline without needing a live server connection:

// Action Invoker lets you:
// 1. Select a registered server (bas, chat, ...)
// 2. Set a topic string (e.g. 'workflow.taskCompleted')
// 3. Compose a JSON body
// 4. Inject the message directly into the incoming pipeline
//    (bypasses transport — useful for testing hooks and subscribers)
//
// The message flows through all incoming hooks and is delivered
// to matching subscribers as if it arrived from the transport.

ANCP View

The Adaptive Network Control Protocol view shows EdgeStream's adaptive behavior under load — how pipeline throughput, hook latency, and subscriber queue depth affect message routing decisions.

Running DevTools

// The DevTools app is at:
// C:\BizFirstGO_FI_AI\BizFirstAiStudio\src\edge-stream\apps\edge-stream-dev-tools\

// Development
cd apps/edge-stream-dev-tools
pnpm dev     # starts at http://localhost:5175 (or next available port)

// Or mount as a route in your main app (dev-only)
import { DevToolsApp } from 'edge-stream-dev-tools';

// In your router:
{ path: '/__edge-stream-dev', element: <DevToolsApp /> }
Next: React Bindings Learn how EdgeStreamProvider, useSubscription, useEdgeStream, and useConnectionStatus integrate EdgeStream into React components. See Guide 8: React Bindings.