Prism V3 UI
The editor surface that drove 150× homepage scaling
Third-generation editor that replaces the legacy asset-discovery editor and unifies three previously fragmented workflows — Asset Discovery, Asset Requests, and Message Authoring — under a single tenant-aware Next.js 15 shell.
The problem
Editors juggled three disconnected tools to ship a single campaign — one to discover existing creative, another to request new creative from design, a third to author the Message and wire it to pages and audiences. Context loss between tabs cost real editor time and made hand-offs lossy.
Tenant-scoped URLs as a first-class concept
Tenant lives in the URL (e.g. /tenant/WM_GLASS/asset-discovery/assets) rather than in client state, so editors can deep-link to a specific brand/locale without state pollution. Tenant-aware Edge middleware handles /{tenant}/ rewrites across all 38 tenants and reconciles cookies on cross-tenant navigation.
One BFF, six downstream services
A single hardened Fastify proxy consolidates SSRF protection, A2A signature signing, and W3C trace propagation across roughly six downstream services (Tempo Service, Message Asset Service, RMA, CCM2, Pronto, IronBank). Adding a seventh is a ~50-line typed-client template, not a multi-day BFF refactor.
Streaming Suspense for editor responsiveness
TanStack Query’s streaming-Suspense integration on the App Router means the editor shell paints instantly while individual sections (asset gallery, message list, audience picker) stream in independently. Editors stopped looking at full-page spinners between every click.
Super Agent chat drawer
A conversational drawer (api/services/SuperAgentService) lets editors interact with an LLM-backed copilot for content tasks without leaving the workspace — quick translations, alt-text suggestions, copy variants — wired through the same BFF proxy so trace context and tenant identity flow into the LLM call.
What I shipped
- Built the unified asset → message → publish editor shell on Next.js 15 App Router, replacing three previously separate tools.
- Implemented tenant-aware middleware (middleware.ts) so all routes are scoped by /{tenant}/ and authenticate against the right RMA tenant context.
- Designed a hardened Fastify BFF proxy collapsing SSRF protection, A2A signature signing, and W3C trace propagation for every outbound service call.
- Wired typed TanStack Query hooks per downstream service so each form field gets background revalidation and optimistic UI without per-component plumbing.
- Integrated a conversational Super Agent drawer that proxies LLM calls through the same BFF — trace context and tenant identity flow into the LLM provider for auditability.
- Stood up the OpenObserve dashboards, Quantum Metrics RUM, and a Playwright e2e suite hitting live stage.