@crvouga/atlas 0.0.0-stage → 0.2.0

package/packages/visualizer/src/views/views.module.css

@@ -0,0 +1,546 @@
+.app {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.frame {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: var(--index-w) minmax(0, 1fr);
+}
+
+.main {
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg);
+}
+
+@media (max-width: 760px) {
+  .app {
+    height: auto;
+    min-height: 100%;
+  }
+
+  .frame {
+    display: flex;
+    flex-direction: column;
+    flex: none;
+    overflow: visible;
+  }
+
+  .main {
+    order: -1;
+    flex: none;
+    min-height: auto;
+  }
+}
+
+.message {
+  max-width: 40rem;
+  margin: 4rem auto;
+  padding: 0 1.25rem;
+  color: var(--ink-2);
+}
+
+.message h1 {
+  font-size: 1.4rem;
+  color: var(--ink);
+}
+
+.button {
+  display: inline-flex;
+  font-size: 0.875rem;
+  font-weight: 600;
+  border: 1px solid var(--line-2);
+  background: var(--card);
+  color: var(--ink);
+  border-radius: var(--pill);
+  padding: 0.4rem 0.9rem;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+/* Chart page */
+
+.mapArea {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.assumedBadge {
+  font-size: 0.72rem;
+  font-weight: 600;
+  border-radius: var(--pill);
+  padding: 0.15rem 0.6rem;
+  color: var(--ink-3);
+  border: 1px dashed var(--faint);
+  background: var(--bg-2);
+}
+
+.lead {
+  margin: 0;
+  color: var(--ink-2);
+}
+
+.statusNote {
+  margin: -0.4rem 0 0;
+  font-size: 0.85rem;
+  color: var(--muted);
+}
+
+.warn {
+  margin: 0;
+  background: var(--failed-soft);
+  color: var(--failed-ink);
+  border-radius: var(--radius-sm);
+  padding: 0.6rem 0.8rem;
+  font-size: 0.875rem;
+}
+
+.bigShot {
+  width: min(100%, 20rem);
+  margin: 0 auto;
+}
+
+.clip {
+  margin: 0;
+}
+
+.video {
+  display: block;
+  width: 100%;
+  max-height: 420px;
+  background: #0f172a;
+  border-radius: 12px;
+}
+
+.clip figcaption,
+.clipPending {
+  font-size: 0.75rem;
+  color: var(--muted);
+  margin: 0.35rem 0 0;
+}
+
+.beforeAfter {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+}
+
+.beforeAfter figure {
+  margin: 0;
+}
+
+.beforeAfter figcaption {
+  font-size: 0.75rem;
+  color: var(--muted);
+  margin-top: 0.35rem;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.sectionTitle {
+  margin: 0;
+  font-size: 0.9rem;
+}
+
+.checks {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  font-size: 0.875rem;
+}
+
+.checks li {
+  display: grid;
+  grid-template-columns: 1rem 1fr;
+  gap: 0.4rem;
+  color: var(--ink-2);
+}
+
+.checks li[data-passed='true'] .checkMark {
+  color: var(--passed-ink);
+}
+
+.checks li[data-passed='false'] {
+  color: var(--failed-ink);
+}
+
+.checkMark {
+  color: var(--faint);
+  font-weight: 700;
+}
+
+.expected {
+  display: block;
+  font-size: 0.78rem;
+  color: var(--muted);
+}
+
+.notes {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.note {
+  background: var(--bg);
+  color: var(--ink-3);
+  border-radius: var(--radius-sm);
+  padding: 0.6rem 0.8rem;
+  margin: 0;
+  font-size: 0.85rem;
+}
+
+.noteMeta {
+  display: block;
+  margin-top: 0.3rem;
+  font-size: 0.78rem;
+  color: var(--muted);
+}
+
+.eventList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+.eventRow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.4rem 1rem;
+  text-decoration: none;
+  color: var(--ink);
+  font-size: 1rem;
+  padding: 12px 0;
+  border-bottom: 1px solid var(--line);
+}
+
+.eventRow[data-status='failed'],
+.eventRow[data-status='failed'] .eventTarget {
+  color: var(--failed);
+  font-weight: 700;
+}
+
+.eventRow:hover {
+  background: var(--bg);
+}
+
+.eventTarget {
+  color: var(--muted);
+}
+
+.inlineChip {
+  display: inline-flex;
+  gap: 0.3rem;
+  align-items: center;
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding: 0.15rem 0.55rem;
+  border-radius: var(--pill);
+  border: 1.5px solid;
+  background: var(--bg);
+  color: var(--muted);
+  border-color: var(--line-2);
+}
+
+.inlineChip[data-kind='user'] {
+  background: var(--user-soft);
+  color: var(--user-ink);
+  border-color: var(--user-line);
+}
+.inlineChip[data-kind='system'] {
+  background: var(--system-soft);
+  color: var(--system-ink);
+  border-color: var(--system-line);
+}
+.inlineChip[data-kind='time'] {
+  background: var(--time-soft);
+  color: var(--time-ink);
+  border-color: var(--time-line);
+}
+.inlineChip[data-kind='hand-off'] {
+  background: var(--handoff-soft);
+  color: var(--handoff-ink);
+  border-color: var(--handoff-line);
+}
+.inlineChip[data-status='not-reached'],
+.inlineChip[data-status='not-yet-run'],
+.inlineChip[data-status='spec-only'] {
+  border-style: dashed;
+}
+.inlineChip[data-status='failed'] {
+  color: var(--failed-ink);
+  border-color: var(--failed);
+  background: var(--failed-soft);
+}
+
+.plateScroll {
+  height: 100%;
+  overflow: auto;
+  padding: 28px 40px 64px;
+  background: var(--card);
+}
+
+.plateTitle {
+  margin: 0;
+  font-size: 1.375rem;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+  line-height: 1.2;
+}
+
+.homeTitle {
+  margin: 0 0 8px;
+  font-size: 1.375rem;
+  letter-spacing: -0.01em;
+  line-height: 1.2;
+}
+
+.plateHead {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.6rem 1rem;
+}
+
+.plateHead .plateTitle {
+  flex-basis: 100%;
+}
+
+.plateSplit {
+  display: grid;
+  grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr);
+  gap: 28px;
+  align-items: start;
+  margin-top: 8px;
+}
+
+.mapLink {
+  display: inline-block;
+  margin-bottom: 12px;
+  color: var(--place);
+  text-decoration: none;
+}
+
+.placeGroup {
+  margin-top: 28px;
+}
+
+.placeGroup h2 {
+  margin: 0 0 8px;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.plateList {
+  list-style: none;
+  margin: 12px 0 0;
+  padding: 0;
+}
+
+.plateList a,
+.handOff {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 0;
+  border-bottom: 1px solid var(--line);
+  color: inherit;
+  text-decoration: none;
+}
+
+.plateList a:hover {
+  color: var(--place);
+}
+
+.mapPlate {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--card);
+  overflow: hidden;
+}
+
+.mapHeading {
+  padding: 20px 40px 12px;
+  border-bottom: 1px solid var(--line);
+}
+
+.mapHeading h1 {
+  margin: 0;
+  font-size: 1.375rem;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+}
+
+.mapHeading p {
+  margin: 6px 0 0;
+  max-width: 62ch;
+  color: var(--ink-2);
+}
+
+.mapScope {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem 1rem;
+  align-items: baseline;
+}
+
+.mapScope a {
+  color: var(--place);
+  text-decoration: none;
+}
+
+@media (max-width: 900px) {
+  .plateSplit {
+    grid-template-columns: 1fr;
+  }
+
+  .plateScroll {
+    padding: 20px 16px 48px;
+  }
+}
+
+.steps {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.steps li[data-here='false'] {
+  opacity: 0.6;
+}
+
+.step {
+  display: flex;
+  gap: 0.55rem;
+  align-items: center;
+  text-decoration: none;
+  color: var(--ink);
+  font-size: 0.82rem;
+  padding: 0.35rem 0.5rem;
+  border-radius: var(--radius-sm);
+}
+
+.step:hover {
+  background: var(--bg);
+}
+
+.stepEvent[data-status='failed'] {
+  color: var(--failed);
+  font-weight: 700;
+}
+
+.checkRow {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  padding: 12px 0;
+  border: 0;
+  border-bottom: 1px solid var(--line);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.checkRow[data-status='failed'] {
+  color: var(--failed);
+}
+
+.stepNo {
+  background: var(--user);
+  color: #fff;
+  border-radius: var(--pill);
+  min-width: 1.3rem;
+  height: 1.3rem;
+  display: inline-grid;
+  place-items: center;
+  font-size: 0.7rem;
+  flex: none;
+}
+
+.dev {
+  border-top: 1px solid var(--line);
+  padding-top: 0.75rem;
+  font-size: 0.82rem;
+}
+
+.devTrigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  border: 0;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  padding: 0;
+}
+
+.devChevron {
+  transition: transform 160ms var(--ease);
+}
+
+.devTrigger[data-state='open'] .devChevron {
+  transform: rotate(90deg);
+}
+
+.devList {
+  margin: 0.5rem 0 0;
+}
+
+.devList dt {
+  font-weight: 600;
+  margin-top: 0.5rem;
+}
+
+.devList dd {
+  margin: 0.15rem 0 0;
+  word-break: break-word;
+  color: var(--ink-3);
+}
+
+.devList ul {
+  margin: 0;
+  padding-left: 1rem;
+}
+
+@media (max-width: 760px) {
+  .plateScroll,
+  .mapPlate {
+    height: auto;
+    overflow: visible;
+  }
+
+  .mapArea {
+    flex: none;
+    height: 70vh;
+    min-height: 24rem;
+  }
+}

package/packages/visualizer/vite/atlas-dev-plugin.ts

@@ -0,0 +1,169 @@
+import { createReadStream, existsSync, statSync } from 'node:fs';
+import type { ServerResponse } from 'node:http';
+import path from 'node:path';
+
+import type { Plugin, ViteDevServer } from 'vite';
+
+import type { AtlasChange, ReportSource } from '@crvouga/atlas/schema';
+
+import { isSpecFile, publicReportSources, resolveReportSources, resolveRoots, runsIndex, safeJoin, specIndex, type AtlasRoots } from './atlas-files';
+
+export const ATLAS_DEV_PREFIX = '/__atlas';
+export const ATLAS_CHANGE_EVENT = 'atlas:change';
+
+export type { AtlasChange } from '@crvouga/atlas/schema';
+
+const CONTENT_TYPES: Record<string, string> = {
+  '.json': 'application/json; charset=utf-8',
+  '.yaml': 'text/yaml; charset=utf-8',
+  '.yml': 'text/yaml; charset=utf-8',
+  '.md': 'text/markdown; charset=utf-8',
+  '.scxml': 'application/scxml+xml; charset=utf-8',
+  '.xml': 'application/xml; charset=utf-8',
+  '.mmd': 'text/plain; charset=utf-8',
+  '.png': 'image/png',
+  '.webp': 'image/webp',
+  '.jpg': 'image/jpeg',
+  '.svg': 'image/svg+xml',
+  '.mp4': 'video/mp4',
+  '.webm': 'video/webm',
+  '.vtt': 'text/vtt; charset=utf-8',
+  '.zip': 'application/zip'
+};
+
+function sendJson(res: ServerResponse, body: unknown) {
+  res.statusCode = 200;
+  res.setHeader('Content-Type', CONTENT_TYPES['.json']!);
+  res.setHeader('Cache-Control', 'no-store');
+  res.end(JSON.stringify(body));
+}
+
+function safeDecode(value: string) {
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return value;
+  }
+}
+
+function notFound(res: ServerResponse) {
+  res.statusCode = 404;
+  res.end('Not found');
+}
+
+function pipe(file: string, res: ServerResponse, range?: { start: number; end: number }) {
+  createReadStream(file, range)
+    .on('error', () => res.destroy())
+    .pipe(res);
+}
+
+/** A file with HTTP range support, so videos stream and seek instead of downloading whole. */
+function sendFile(res: ServerResponse, file: string, range: string | undefined, immutable: boolean) {
+  const stat = statSync(file);
+  res.setHeader('Content-Type', CONTENT_TYPES[path.extname(file)] ?? 'application/octet-stream');
+  res.setHeader('Accept-Ranges', 'bytes');
+  res.setHeader('Cache-Control', immutable ? 'public, max-age=300' : 'no-store');
+  const match = range?.match(/^bytes=(\d*)-(\d*)$/);
+  if (match && (match[1] || match[2])) {
+    const start = match[1] ? Number(match[1]) : Math.max(0, stat.size - Number(match[2]));
+    const end = match[1] && match[2] ? Math.min(Number(match[2]), stat.size - 1) : stat.size - 1;
+    if (start >= stat.size || start > end) {
+      res.statusCode = 416;
+      res.setHeader('Content-Range', `bytes */${stat.size}`);
+      res.end();
+      return;
+    }
+    res.statusCode = 206;
+    res.setHeader('Content-Range', `bytes ${start}-${end}/${stat.size}`);
+    res.setHeader('Content-Length', String(end - start + 1));
+    pipe(file, res, { start, end });
+    return;
+  }
+  res.statusCode = 200;
+  res.setHeader('Content-Length', String(stat.size));
+  pipe(file, res);
+}
+
+function watch(server: ViteDevServer, roots: AtlasRoots, sourceId = 'workspace') {
+  const pending = { specs: new Set<string>(), runs: new Set<string>() };
+  let timer: ReturnType<typeof setTimeout> | null = null;
+  const flush = () => {
+    timer = null;
+    for (const scope of ['specs', 'runs'] as const) {
+      if (pending[scope].size === 0) continue;
+      const files = [...pending[scope]];
+      pending[scope].clear();
+      const runIds = scope === 'runs' ? [...new Set(files.map((f) => f.split('/')[0]!).filter(Boolean))] : [];
+      const change: AtlasChange = { scope, files, runIds, sourceId };
+      server.ws.send({ type: 'custom', event: ATLAS_CHANGE_EVENT, data: change });
+    }
+  };
+  const onFs = (file: string) => {
+    for (const scope of ['specs', 'runs'] as const) {
+      if (scope === 'specs' && sourceId !== 'workspace') continue;
+      const rel = path.relative(roots[scope], file);
+      if (rel.startsWith('..') || path.isAbsolute(rel)) continue;
+      const relPosix = rel.split(path.sep).join('/');
+      if (scope === 'specs' && !isSpecFile(relPosix) && relPosix.includes('.')) return;
+      if (relPosix.split('/').some((part) => part.startsWith('.'))) return;
+      pending[scope].add(relPosix);
+      timer ??= setTimeout(flush, 200);
+    }
+  };
+  server.watcher.add([roots.specs, roots.runs]);
+  for (const event of ['add', 'change', 'unlink', 'addDir', 'unlinkDir'] as const) server.watcher.on(event, onFs);
+  server.httpServer?.once('close', () => {
+    if (timer) clearTimeout(timer);
+    for (const event of ['add', 'change', 'unlink', 'addDir', 'unlinkDir'] as const) server.watcher.off(event, onFs);
+  });
+}
+
+/**
+ * The dev adapter: serves the specs and runs folders under `/__atlas`, in the same layout the
+ * static build publishes, and tells the browser over Vite's HMR channel when either changes.
+ */
+export function atlasDevPlugin(options: { roots?: AtlasRoots; sources?: ReportSource[] } = {}): Plugin {
+  let roots: AtlasRoots;
+  let sources: ReportSource[];
+  return {
+    name: 'atlas-dev',
+    apply: 'serve',
+    configResolved() {
+      roots = options.roots ?? resolveRoots();
+      sources = options.sources ?? resolveReportSources(roots);
+    },
+    configureServer(server) {
+      server.config.logger.info(`  atlas  specs ${roots.specs}\n         runs  ${roots.runs}  (${roots.label})`);
+      watch(server, roots);
+      for (const source of sources) if (source.type === 'directory' && source.id !== 'workspace') watch(server, { ...roots, runs: source.runs }, source.id);
+      server.middlewares.use(ATLAS_DEV_PREFIX, (req, res, next) => {
+        const url = new URL(req.url ?? '/', 'http://localhost');
+        let pathname = url.pathname;
+        let servedRoots = roots;
+        if (pathname === '/sources.json') return sendJson(res, { schemaVersion: 1, sources: publicReportSources(sources) });
+        const sourced = pathname.match(/^\/sources\/([a-zA-Z0-9_-]+)(\/.*)$/);
+        if (sourced) {
+          const source = sources.find((item) => item.id === sourced[1]);
+          if (source?.type !== 'directory') return notFound(res);
+          servedRoots = { ...roots, runs: source.runs };
+          pathname = sourced[2]!;
+          if (!pathname.startsWith('/runs/')) return notFound(res);
+        }
+        if (pathname === '/specs/index.json') return sendJson(res, specIndex(roots.specs, null));
+        if (pathname === '/runs/index.json') return sendJson(res, runsIndex(servedRoots.runs));
+        const [, scope, ...rest] = pathname.split('/');
+        if (scope !== 'specs' && scope !== 'runs') return next();
+        const relative = rest.join('/');
+        if (scope === 'specs' && !isSpecFile(safeDecode(relative))) return notFound(res);
+        const file = safeJoin(servedRoots[scope], relative);
+        if (!file || !existsSync(file) || !statSync(file).isFile()) return notFound(res);
+        const immutable = scope === 'runs' && !relative.endsWith('manifest.json');
+        try {
+          sendFile(res, file, req.headers.range, immutable);
+        } catch {
+          notFound(res);
+        }
+      });
+    }
+  };
+}