Automation App

Why a Dashboard?

Your workflow engine processes events in milliseconds. But without visibility, you're operating blind. A dashboard answers the questions that matter in production:

The dashboard turns invisible automation into observable automation.

Execution Timeline

The most valuable view is the execution timeline. For each workflow run, it shows:

This is your debugging tool. When a customer reports a misrouted ticket, you look up the execution by event ID and see exactly what the classifier decided, what the extractor found, and what the generator produced.

Event Trigger Panel

The dashboard includes a trigger panel for testing workflows without sending real webhooks:

const res = await fetch("/api/events", {
  method: "POST",
  body: JSON.stringify({ type: "support_ticket.created" }),
});

The API endpoint picks a sample payload, runs it through the full pipeline (normalize → validate → execute → store), and returns the complete execution state. The dashboard adds it to the list and selects it for timeline view — instant feedback.

This is critical for development and QA. You can test every event type and routing path without setting up webhook sources.

API Design

Two endpoints power the dashboard:

GET /api/workflows — Returns recent executions and aggregate stats. The dashboard polls this on mount to populate the execution list.

POST /api/events — Processes a new event through the workflow pipeline. Integrates all five previous modules:

The response includes the full execution state — the dashboard doesn't need to poll for results because the workflow completes synchronously within the API call.

Real-Time Updates

The current dashboard uses a request-response pattern: submit an event, get the result. For long-running workflows (e.g., workflows with AI API calls taking 3-5 seconds per node), you'd add streaming:

// Server-Sent Events (SSE)
const encoder = new TextEncoder();
const stream = new ReadableStream({
  start(controller) {
    onNodeComplete = (nodeId, result) => {
      controller.enqueue(encoder.encode(
        \`data: \${JSON.stringify({ nodeId, result })}\\n\\n\`
      ));
    };
  },
});

Each node completion pushes an SSE event to the client. The timeline view updates in real time — you see nodes light up as they complete.

Dashboard Extensions

Three high-value additions:

Metrics cards — Success rate, avg duration, total executions, active alerts. Displayed as summary cards at the top of the page. Operators can see system health at a glance.

Approval buttons — For nodes that return requiresHumanReview: true, show "Approve" and "Edit" buttons in the timeline. Clicking "Approve" sends the draft response. Clicking "Edit" opens an editor.

Error log panel — Recent errors with severity indicators (critical in red, warning in yellow, info in gray). Links to the corresponding execution for context.

What's Next

In Module 6, you'll add the production infrastructure — rate limiting for AI API costs, metrics aggregation, threshold-based alerting, and an immutable audit trail. The dashboard will surface all of this data.