MOS Monitoring & Editor Tools: Software case study

At a glance

Starting point

An internal monitor for the render pipeline behind Blonde Waterfall: every job is a live DAG, every output can be inspected, every failure is typed and traced.

What we built

Every render job as a live DAG, plus safe template authoring and test renders.

Stack

React 19, TypeScript 5.7, Vite 6, Tailwind CSS v4, shadcn/ui + Radix, TanStack Query v5, Zustand v5, React Router v7, React Hook Form + Zod, React Flow + dagre, Firebase v11, AWS S3, CloudWatch, Claude API

Outcome

Under 60 seconds to diagnose a known failing job.

An internal monitor for the render pipeline behind Blonde Waterfall: every job is a live DAG, every output can be inspected, every failure is typed and traced.

Overview

A single web app for Blonde Waterfall's ops and editorial teams. It does two jobs: monitor and triage the MOS rendering pipeline, and give editors a safe place to author templates.

Job monitoring & triage

Each job renders as a live task graph (React Flow + dagre).
Inspect intermediate outputs at any step.
Diagnose typed errors without digging through CloudWatch logs.
Retry or cancel work, with an audit trail.

Template authoring

Edit template metadata and preprocessing details, with versioning.
Optimize prompt markdown with Claude.
Re-ingest packaged ZIPs and run test renders before promoting a template, with no production deploy.

Success criteria

Under 60 seconds to diagnose a known failing job.
About 30-second data freshness.
Template changes are tested safely before they reach customers.

Stack

FRAMEWORK: React 19, TypeScript 5.7, Vite 6
UI: Tailwind CSS v4, shadcn/ui + Radix
STATE: TanStack Query v5, Zustand v5, React Router v7
FORMS: React Hook Form + Zod
GRAPH: React Flow (@xyflow/react) + dagre
DATA / AI: Firebase v11, AWS S3, CloudWatch, Claude API
TESTING: Vitest, Testing Library, MSW, Playwright