InteractionMonitor Component — Observability

Live Mockup

Interaction Monitor ● Live

Approval: Invoice #INV-2026-0042 usr_jane — 23m ago Pending

Confirmation: Delete Test Records usr_bob — 2m ago confirmed (4.2s)

Approval: PO-2026-0099 usr_alice — 1h ago Timed Out

Notification: Security Policy usr_carol — 5m ago acknowledged (1.1s)

Usage

import { InteractionMonitor } from 'edge-interact-observability';

// Place in an admin dashboard or developer tools panel
function AdminDashboard() {
  return (
    <div>
      <h1>Admin Dashboard</h1>
      <InteractionMonitor
        showInFlight={true}
        showRecent={true}
        recentLimit={20}
        pollIntervalMs={5000} // refresh every 5 seconds
        filterByType={['approval', 'form']} // optional filter
      />
    </div>
  );
}

Props

Prop	Type	Default	Description
`showInFlight`	boolean	true	Show currently pending interactions
`showRecent`	boolean	true	Show recently completed interactions
`recentLimit`	number	10	Max completed interactions to show
`pollIntervalMs`	number	5000	How often to refresh the in-flight list from the server
`filterByType`	string[]	all	Filter to specific interaction types
`filterByUserId`	string	—	Show only interactions for a specific user

Data Source

The InteractionMonitor reads in-flight data from the InteractionPipeline state store via an internal API endpoint (/edge-interact/monitor). This endpoint requires admin authentication. Completed interactions are read from the in-memory history for recent items and from the audit log for historical data.

Admin-Only Component InteractionMonitor exposes all interactions across all users — do not render it in user-facing views. Protect it behind admin role checks.

← Observability Overview Next: Response Time Tracking →