Live Monitoring & DevTools

import { Step, flow, WorkflowEventEmitter } from '@siglo/core';

const monitor = new WorkflowEventEmitter();

// Listen to specific typed events
monitor.on('step:start', ev => {
    console.log(`Starting step ${ev.stepName} (attempt ${ev.attempt})`);
});

monitor.on('step:retry', ev => {
    console.warn(`Retrying step ${ev.stepName} in ${ev.delayMs}ms. Error: ${ev.error.message}`);
});

monitor.on('step:inspection', ev => {
    console.log(`Inspection for ${ev.stepName} (${ev.inspection.kind}): outcome=${ev.inspection.outcome}`);
});

// Wildcard listener receives all execution events
monitor.on('*', ev => {
    console.log(`[Event: ${ev.type}] stackId=${ev.stackId}`);
});

const myFlow = flow(
    Step.create('fetchData', async () => ({ count: 10 })),
    Step.create('processData', async ctx => ({ total: ctx.count * 2 })),
).monitor(monitor);

await myFlow.run({});

import { Step, WorkflowEventEmitter, setDefaultMonitor, getDefaultMonitor } from '@siglo/core';

const globalMonitor = new WorkflowEventEmitter();
globalMonitor.on('flow:error', ev => {
    reportToAlertingSystem(ev);
});

// Sets default monitor for all Step.start() and flow().run() calls in this process
Step.setDefaultMonitor(globalMonitor);
// or: setDefaultMonitor(globalMonitor);

const current = Step.getDefaultMonitor(); // or getDefaultMonitor()
Step.setDefaultMonitor(undefined); // or setDefaultMonitor(undefined)

import { httpStep } from '@siglo/http';
import { InspectionCapturePolicy } from '@siglo/core';

const capturePolicy: InspectionCapturePolicy = {
    // Whitelist specific fields to capture
    fields: ['requestHeaders', 'requestBody', 'responseHeaders', 'responseBody'],
    maxBytes: 1024, // Per-field UTF-8 byte limit (capped at 4096 bytes)
    redact: (field, value) => {
        // Custom redactor: return sanitized representation or undefined to omit
        if (field === 'requestHeaders') {
            return { ...value, authorization: '[REDACTED]' };
        }
        return value;
    },
};

const checkoutStep = httpStep('chargeCard', {
    url: 'https://api.stripe.com/v1/charges',
    method: 'POST',
    capture: capturePolicy,
});

npm install @siglo/monitor @siglo/core

import { createMonitorServer } from '@siglo/monitor';
import { Step, flow } from '@siglo/core';

const monitor = await createMonitorServer({
    port: 4000,
    host: '127.0.0.1',
});

console.log(`DevTools available at http://localhost:${monitor.port}`);

// Register monitor with your workflows
Step.setDefaultMonitor(monitor.emitter);

import { flow, Step } from '@siglo/core';
import { attachToMonitorServer } from '@siglo/monitor';

const myWorkflow = flow(
    Step.create('fetchOrder', async () => ({ orderId: 'ord_123', total: 100 })),
    Step.create('chargeCustomer', async ctx => ({ paid: true })),
).monitor(
    attachToMonitorServer('https://monitor.corp.internal:4000', {
        apiKey: process.env.MONITOR_API_KEY,
    }),
);
// or local dev by port: .monitor(attachToMonitorServer(4000));
// or local dev default: .monitor(attachToMonitorServer());

await myWorkflow.run();

import { createMonitorServer, attachToMonitorServer, getMonitorEmitter } from '@siglo/monitor';
import { flow, Step } from '@siglo/core';

// In server bootstrap (e.g. server.ts):
const monitor = await createMonitorServer({
    port: 4000,
    reuseExisting: true, // Reuses existing instance instead of throwing EADDRINUSE
});

// In any workflow file:
const orderPipeline = flow(stepA, stepB).monitor(attachToMonitorServer()); // Auto-resolves the active in-process server

import { getActiveMonitorServer, getMonitorEmitter } from '@siglo/monitor';

// Get active server instance
const activeServer = getActiveMonitorServer();

// Or get its WorkflowEventEmitter directly
const emitter = getMonitorEmitter();
const orderPipeline = flow(stepA, stepB).monitor(emitter!);

import { createMonitorClient } from '@siglo/monitor';
import { flow, Step } from '@siglo/core';

const client = createMonitorClient({
    url: 'https://monitor-service:4000',
    apiKey: process.env.MONITOR_INGESTION_KEY,
    batchSize: 20, // Default: 10 events
    flushIntervalMs: 50, // Default: 25ms
    maxQueueSize: 1000, // Default: 1000 (drops oldest if queue overflows to protect memory)
    redaction: {
        redactKeys: ['password', 'creditCard'],
    },
});

const workerFlow = flow(stepA, stepB).monitor(client.monitor);
await workerFlow.run();

// Clean up or flush remaining events on shutdown
await client.close();

# Start monitor on default port 4000
siglo monitor

# Specify custom port, host, and optional workflow file to inspect
siglo monitor src/workflows/checkout.ts --port=8080 --host=127.0.0.1 --namespace=production

🚀 Siglo Live Monitor running at http://127.0.0.1:8080
   - Dashboard: http://localhost:8080/
   - SSE Stream: http://localhost:8080/events
   - WebSocket: ws://localhost:8080/ws
   - Prometheus Metrics: http://localhost:8080/metrics

import express from 'express';
import { createExpressMonitorMiddleware } from '@siglo/monitor';
import { Step, WorkflowEventEmitter } from '@siglo/core';

const app = express();
const emitter = new WorkflowEventEmitter();
const monitor = createExpressMonitorMiddleware({ emitter });

// Mounts UI, /events, and /api endpoints under /_siglo
app.use('/_siglo', monitor);
Step.setDefaultMonitor(emitter);

app.listen(3000, () => {
    console.log('Monitor dashboard available at http://localhost:3000/_siglo');
});

import Fastify from 'fastify';
import { fastifyMonitorPlugin } from '@siglo/monitor';
import { Step, WorkflowEventEmitter } from '@siglo/core';

const fastify = Fastify();
const emitter = new WorkflowEventEmitter();

await fastify.register(fastifyMonitorPlugin, { emitter, prefix: '/_siglo' });
Step.setDefaultMonitor(emitter);

await fastify.listen({ port: 3000 });

import { Hono } from 'hono';
import { honoMonitorMiddleware } from '@siglo/monitor';
import { Step, WorkflowEventEmitter } from '@siglo/core';

const app = new Hono();
const emitter = new WorkflowEventEmitter();

app.use('/_siglo/*', honoMonitorMiddleware({ emitter }));
Step.setDefaultMonitor(emitter);

curl -N http://localhost:4000/events?namespace=tenant_alpha

event: step:complete
data: {"type":"step:complete","stackId":"s1","stepId":"st1","stepName":"chargeCard","durationMs":42,"timestamp":1730419200000}

const es = new EventSource('http://localhost:4000/events?namespace=tenant_alpha&token=YOUR_API_KEY');

es.addEventListener('flow:start', e => {
    console.log('Flow started:', JSON.parse(e.data));
});

es.addEventListener('step:complete', e => {
    console.log('Step finished:', JSON.parse(e.data));
});

es.addEventListener('step:inspection', e => {
    console.log('Ecosystem inspection:', JSON.parse(e.data));
});

const ws = new WebSocket('ws://localhost:4000/ws?token=YOUR_API_KEY');

// Filter event stream to a specific tenant
ws.send(JSON.stringify({ action: 'subscribe', namespace: 'eu-west' }));

// Resume a suspended workflow
ws.send(
    JSON.stringify({
        action: 'resume',
        stackId: 'stk_abc123',
        eventName: 'kyc.approved',
        payload: { verifiedBy: 'compliance-officer' },
    }),
);

// Ingest telemetry event from an external client
ws.send(
    JSON.stringify({
        action: 'event',
        event: {
            type: 'step:inspection',
            stackId: 'stk_abc123',
            stepId: 'step_1',
            stepName: 'charge',
            attempt: 1,
            timestamp: Date.now(),
            inspection: { version: 1, kind: 'http', outcome: 'success', status: 200 },
        },
    }),
);

import { RedisMonitoringAdapter, createMonitorServer } from '@siglo/monitor';
import { WorkflowEventEmitter } from '@siglo/core';
import Redis from 'ioredis';

const redisUrl = process.env.REDIS_URL || 'redis://localhost:6379';

// 1. In Worker Process: Publish events to Redis
const publisher = new Redis(redisUrl);
const workerAdapter = new RedisMonitoringAdapter({
    publisher,
    channel: 'siglo:monitor:events',
});

emitter.on('*', event => {
    workerAdapter.publish(event);
});

// 2. In Central Monitor Server: Subscribe to Redis and deliver into server's emitter
const subscriber = new Redis(redisUrl);
const monitor = await createMonitorServer({ port: 4000 });

const serverAdapter = new RedisMonitoringAdapter({
    subscriber,
    channel: 'siglo:monitor:events',
    emitter: monitor.emitter, // Automatically routes incoming Redis events to monitor store & SSE
});

# HELP siglo_active_flows Current number of actively running workflows.
# TYPE siglo_active_flows gauge
siglo_active_flows 3

# HELP siglo_flows_total Total number of workflow executions completed or failed.
# TYPE siglo_flows_total counter
siglo_flows_total{status="completed"} 142
siglo_flows_total{status="failed"} 2

# HELP siglo_flow_duration_seconds Total execution time of workflows in seconds.
# TYPE siglo_flow_duration_seconds summary
siglo_flow_duration_seconds_sum 18.4200
siglo_flow_duration_seconds_count 144

# HELP siglo_step_retries_total Total count of step execution retries.
# TYPE siglo_step_retries_total counter
siglo_step_retries_total 5

# HELP siglo_steps_total Total count of step completions and failures.
# TYPE siglo_steps_total counter
siglo_steps_total{status="completed"} 432
siglo_steps_total{status="failed"} 2

const monitor = await createMonitorServer({
    port: 4000,
    auth: {
        apiKey: 'general-read-token', // Authorizes UI, /events, /metrics, /api/workflows
        ingestionKey: 'worker-token-xyz', // Authorizes POST /api/events and WS event ingestion
        adminKey: 'admin-token-abc', // Authorizes /resume, /replay, /api/workflows
        validator: (token, scope, req) => {
            // Optional custom auth verification hook
            return true;
        },
    },
});

const monitor = await createMonitorServer({
    allowRemoteResume: false, // Rejects resume and replay requests with 403 Forbidden
});

const monitor = await createMonitorServer({
    cors: {
        origin: ['https://devtools.internal.corp', 'http://localhost:3000'],
        credentials: true,
    },
});

const orderFlow = flow(stepA, stepB)
    .networkPolicy({
        defaultPolicy: 'deny',
        allowedHosts: ['api.stripe.com', 'monitor.internal.corp'],
    })
    .monitor(
        attachToMonitorServer('https://monitor.internal.corp:4000', {
            apiKey: process.env.MONITOR_KEY,
        }),
    );

packages/monitor/ui/
├── src/
│   ├── api/workflowApi.ts             # REST client for workflow fetch, resume, and replay
│   ├── constants/                     # Event types (18 SIGLO_EVENT_TYPES) and status filters
│   ├── hooks/                         # useWorkflowMonitor (SSE & state sync), useClipboard, inspectionUpdates
│   ├── types/                         # TypeScript interfaces for workflows, steps, and events
│   ├── utils/formatters.ts            # Time, duration, ID, and JSON formatters
│   ├── components/
│   │   ├── ui/                        # Reusable atoms (StatusBadge, Modal, EmptyState)
│   │   ├── layout/Header.tsx          # Navigation header with Siglo logo & live status
│   │   └── workflows/                 # Feature components
│   │       ├── RunList/               # Left sidebar workflow run selector, filter & search
│   │       ├── Dag/                   # Interactive DAG graph visualizer
│   │       │   ├── DagNode.tsx        # Step node with status icons and retry count
│   │       │   ├── DagView.tsx        # Connected flow layout
│   │       │   ├── StepDetailCard.tsx # Detailed slideout inspector with wait & error details
│   │       │   ├── EcosystemInspector.tsx # HTTP, crypto, notification, AI diagnostics
│   │       │   ├── InspectionContent.tsx  # Sandboxed iframe previews and redacted captures
│   │       │   └── curl.ts            # Sanitized origin-only cURL generator
│   │       ├── Waterfall/             # Step latency waterfall chart
│   │       ├── Context/               # Context state & mutation diff inspector
│   │       ├── Events/                # Live streaming telemetry log with expandable rows
│   │       ├── ResumeModal/           # Signal resumption modal
│   │       ├── Stats/                 # High-level metrics KPI grid
│   │       └── WorkflowDetail.tsx     # Tabbed execution details container
│   ├── App.tsx                        # Root application layout
│   └── main.tsx                       # React DOM entrypoint
├── scripts/embed-html.js              # Inlines dist/index.html into src/ui/dashboard.ts
└── vite.config.ts

# Run Vite dev server with proxy to backend port 4000
npm run dev:ui --workspace=@siglo/monitor

# Build production bundle and embed into dashboard.ts
npm run build:ui --workspace=@siglo/monitor