@reynsu/reactlens-dashboard-ui

React UI bundle for the reactlens / nativelens test-result dashboard. Ships the static Vite bundle (dist/web/) plus the TypeScript types hosts use to register plugins.

Extracted from the reactlens monorepo so the UI can be reused across reactlens (web E2E) and nativelens (React Native E2E) without forking — per ADR 0007 in nativelens.

What you get

• dist/web/ — the bundled SPA (HTML + JS + CSS). Hosts serve this from their own HTTP server.
• TypeScript exports — DashboardPlugin, FrameRenderer, resolveFrameRenderer, builtinWebPlugin, and the wire-shape types (RunEvent, ComponentNode, ...) so plugin authors get end-to-end typing.

Using it

Serving the bundle (host side)

import { dirname } from 'node:path';
import { fileURLToPath } from 'node:url';
import express from 'express';
import { createRequire } from 'node:module';

const require = createRequire(import.meta.url);
const webDir = dirname(require.resolve('@reynsu/reactlens-dashboard-ui/package.json')) + '/dist/web';

const app = express();
app.use(express.static(webDir));
app.listen(7777);

Authoring a plugin (consumer side)

import type { DashboardPlugin, FrameRenderer } from '@reynsu/reactlens-dashboard-ui';

const DevicePreview: FrameRenderer = ({ frame, test }) => {
  // render a native device preview…
};

export const deviceNativePlugin: DashboardPlugin = {
  name: 'nativelens-native',
  frameRenderers: { native: DevicePreview },
};

The host hands plugins to the bundled SPA via a window.__DASHBOARD_PLUGINS__ global (or by importing App directly and mounting it in its own Vite build with <App plugins={[builtinWebPlugin, deviceNativePlugin]} />).

Status

• 0.1.0 — initial extraction. Web bundle + plugin types. Server logic stays in the consuming hosts (reactlens, nativelens) for now.

Repository layout

src/
  App.tsx               Top-level dashboard component.
  main.tsx              Vite entry for the standalone bundle.
  index.html            HTML shell.
  styles.css            Tailwind-free CSS (already compiled).
  plugins.ts            Public plugin types + pure resolver.
  builtin-plugin.ts     Default `web` plugin (wraps BrowserPreview).
  types.ts              Wire-shape types (RunEvent, ComponentNode, ...).
  components/           BrowserPreview, ComponentInspector, TestList, ...
  replay-timeline.ts    Past-run JSONL parser.
  index.ts              Public API entry.