@crvouga/atlas 0.4.0 → 0.6.0

package/packages/visualizer/README.md

@@ -23,7 +23,7 @@ the API contract, streaming notifications and adding another transport.
 ## Point it at your project
 
 ```sh
-atlas-visualizer dev --specs ./specs --runs ./atlas-runs
+atlas client dev --specs ./specs --runs ./atlas-runs
 ```
 
 | Flag              | Meaning                                                                                                  |
@@ -45,12 +45,33 @@ manager sets it to where you ran the command, or the current directory). With no
 Editing a spec file or a run publishing a snapshot updates the open page in about a second, without a reload,
 keeping selection, zoom and pan.
 
+### Layered reports for any spec
+
+Besides charts and runs, the client shows the combined result of every spec (Gherkin, Quint, DMN,
+Alloy, OpenSLO, …) from the layers your suites published. Point `ATLAS_REPORTS_MODULE` at a module in
+your project that exports `reportsDevFetch`, built with `reportsHost` from
+`@crvouga/atlas/reports/host`:
+
+```ts
+// atlas.reports.ts
+import { reportsHost } from '@crvouga/atlas/reports/host';
+
+export const reportsDevFetch = reportsHost({ specs: './specs', stores: ['./atlas-reports'] });
+```
+
+```sh
+ATLAS_REPORTS_MODULE="$(pwd)/atlas.reports.ts" atlas client dev --specs ./specs
+```
+
+See [integrating Atlas](../../docs/integrating.md#6-browse-it) for publishing layers and the routes
+this serves.
+
 ### Commands
 
 ```sh
-atlas-visualizer dev          --specs <dir> --runs <dir>             # live, from disk
-atlas-visualizer build        --specs <dir> --runs <dir> --out site  # static site + its data
-atlas-visualizer publish-data --specs <dir> --runs <dir> --out data  # data only
+atlas client dev          --specs <dir> --runs <dir>             # live, from disk
+atlas client build        --specs <dir> --runs <dir> --out site  # static site + its data
+atlas client publish-data --specs <dir> --runs <dir> --out data  # data only
 ```
 
 `build` writes a static site that any file server can host, with the spec and the newest privacy-checked snapshots
@@ -62,14 +83,14 @@ sets how often the site checks for new runs (default 60 s, plus when the tab reg
 ### Inside this repository
 
 ```sh
-bun run viz:dev                          # the full coffee example, charts and layered report
+bun client:dev                          # the full coffee example, charts and layered report
 bun test packages/visualizer/src packages/visualizer/vite   # parsing, composition, statuses, every fixture
-bun run viz:fixtures                     # regenerate the fixtures (needs ImageMagick, cwebp, ffmpeg)
+bun client:fixtures                     # regenerate the fixtures (needs ImageMagick, cwebp, ffmpeg)
 ```
 
-`bun run viz:publish-data` and `bun run viz:build` do the same as the CLI, writing to `public/data` (or
+`bun client:publish-data` and `bun client:build` do the same as the CLI, writing to `public/data` (or
 `ATLAS_OUT`) and `dist`. `ATLAS_SOURCES_FILE` supplies additional sources, and
-`VITE_ATLAS_SOURCES_URL` can point a hosted viewer at a separate source descriptor file.
+`VITE_ATLAS_SOURCES_URL` can point a hosted client at a separate source descriptor file.
 
 ## What it reads
 
@@ -103,7 +124,7 @@ The spec parsing is `@crvouga/atlas/spec`, the browser-safe part of the Atlas co
 ## How it fits together
 
 ```
-bin/atlas-visualizer.mjs   CLI: dev, build and publish-data through Vite's JS API
+bin/atlas-client.mjs   CLI: dev, build and publish-data through Vite's JS API
 vite/atlas-files.ts        node: resolve the roots, find spec files, summarize run directories, safe paths
 vite/atlas-dev-plugin.ts   dev adapter: serves /__atlas/{specs,runs}, range requests, change events over HMR
 vite/publish.ts            lays out specs/ and runs/ (with index.json files) for a static host
@@ -150,8 +171,8 @@ Beside the statechart map, every other kind of spec has its own tab: Gherkin fea
 
 Results come from the Atlas reports API (`/api/reports` in dev, `VITE_ATLAS_REPORTS_URL` when hosted elsewhere) or from a static `data/evidence` export. They combine across backends, branches, versions, environments and layers; **Sources** in the header switches any of them off. While a spec suite is running, the header says so and each finished test appears within a couple of seconds. See [Atlas reports](../reports/README.md) for the API and host configuration.
 
-The coffee example ships those documents and a layered report. `bun run viz:dev` opens that full example, and the same report is the fallback when a working directory has no `specs/` and `ATLAS_REPORTS_MODULE` is unset. `atlas:viz` serves the same kind of report for the todo example, and adds the desktop web layer `example:run` writes. Each built-in report is five layers: an older desktop web run, a mobile web branch, Android from a device lab, a focused iOS run, and a newer desktop web run that repeated one scenario. The same check stays visible on each environment. A feature with no layer stays empty.
+`bun atlas` starts a project-agnostic node. The Todo example publishes into project `todo-app` through `bun example:run`; it never configures the server. A project without specs or reports stays empty. Bundled coffee fixtures are available only through explicit `atlas client` fixture options for client development and tests.
 
 The header title is the product's name, taken from `atlas.yaml`'s `title` up to its first dash or colon, or "Atlas".
 
-`src/evidence/` holds this part of the viewer: `evidence-context.tsx` reads and combines the layers, `spec-index.tsx` is the index, `feature-page.tsx`, `model-page.tsx` and `document-page.tsx` are the three kinds of spec page, `check-detail.tsx` is one check's results, and `recording.tsx` is the recorded timeline. `tests/reports.test.tsx` drives the whole viewer against an in-memory reports API.
+`src/evidence/` holds this part of the client: `evidence-context.tsx` reads and combines the layers, `spec-index.tsx` is the index, `feature-page.tsx`, `model-page.tsx` and `document-page.tsx` are the three kinds of spec page, `check-detail.tsx` is one check's results, and `recording.tsx` is the recorded timeline. `tests/reports.test.tsx` drives the whole client against an in-memory reports API.

package/packages/visualizer/bin/atlas-client.mjs

@@ -0,0 +1,176 @@
+#!/usr/bin/env node
+import { existsSync, readdirSync, statSync } from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { parseArgs } from 'node:util';
+
+const APP_ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const CONFIG_FILE = path.join(APP_ROOT, 'vite.config.ts');
+
+const USAGE = `atlas client: browse project specifications and their test reports
+
+Usage
+  atlas client dev          [--specs <dir>] [--runs <dir>] [--port <n>] [--host <host>]
+  atlas client build        [--specs <dir>] [--runs <dir>] [--out <dir>] [--keep <n>] [--no-data]
+  atlas client publish-data [--specs <dir>] [--runs <dir>] [--out <dir>] [--keep <n>]
+
+Options
+  --specs <dir>    all specs: statecharts, Gherkin, Quint, DMN, Alloy, notes   (default: ./specs)
+  --runs <dir>     run directories, each with a manifest.json                              (default: ./atlas-runs)
+  --sources <file> additional directory, HTTP and streaming API report sources (JSON)
+  --fixture <name> show a bundled example instead (spec-only, partial, full, failures, removed, malformed, large)
+  --out <dir>      build: the static site (default ./atlas-site); publish-data: the data (default ./atlas-data)
+  --keep <n>       how many of the newest runs to publish (default 30)
+  --no-data        build: leave the data out; point the site at it with VITE_ATLAS_BASE_URL
+  --port <n>       dev: port to listen on (default 5180, or the next free one)
+  --host <host>    dev: address to listen on (default localhost)
+
+Relative paths resolve against the directory the command was run from. ATLAS_SPECS_ROOT and
+ATLAS_RUNS_ROOT are read when the flags are absent.
+`;
+
+class UsageError extends Error {}
+
+function parse(argv) {
+  const { values, positionals } = parseArgs({
+    args: argv,
+    allowPositionals: true,
+    strict: true,
+    options: {
+      specs: { type: 'string' },
+      runs: { type: 'string' },
+      sources: { type: 'string' },
+      fixture: { type: 'string' },
+      out: { type: 'string' },
+      keep: { type: 'string' },
+      port: { type: 'string' },
+      host: { type: 'string' },
+      'no-data': { type: 'boolean', default: false },
+      help: { type: 'boolean', short: 'h', default: false }
+    }
+  });
+  return { command: positionals[0], extra: positionals.slice(1), values };
+}
+
+function integer(name, value, min, max) {
+  if (value === undefined) return undefined;
+  const n = Number(value);
+  if (!Number.isInteger(n) || n < min || n > max) throw new UsageError(`--${name} must be a whole number from ${min} to ${max}, got "${value}"`);
+  return n;
+}
+
+/** Point the shared root resolution (vite/atlas-files.ts) at the flags, as absolute paths. */
+function applyRoots(values, base) {
+  if (values.sources) process.env.ATLAS_SOURCES_FILE = path.resolve(base, values.sources);
+  if (values.fixture) {
+    if (values.specs || values.runs) throw new UsageError('--fixture cannot be combined with --specs or --runs');
+    process.env.ATLAS_FIXTURE = values.fixture;
+    return;
+  }
+  if (values.specs || values.runs) delete process.env.ATLAS_FIXTURE;
+  if (values.specs) {
+    const specs = path.resolve(base, values.specs);
+    if (!existsSync(specs) || !statSync(specs).isDirectory()) throw new UsageError(`No specs directory at ${specs}`);
+    process.env.ATLAS_SPECS_ROOT = specs;
+  } else if (process.env.ATLAS_SPECS_ROOT) {
+    process.env.ATLAS_SPECS_ROOT = path.resolve(base, process.env.ATLAS_SPECS_ROOT);
+  }
+  if (values.runs) process.env.ATLAS_RUNS_ROOT = path.resolve(base, values.runs);
+  else if (process.env.ATLAS_RUNS_ROOT) process.env.ATLAS_RUNS_ROOT = path.resolve(base, process.env.ATLAS_RUNS_ROOT);
+  process.env.INIT_CWD = base;
+}
+
+/** Refuse to empty a directory that is not a previous build: the base, its ancestors, home, or anything else with files. */
+function assertSafeOut(out, base) {
+  const rel = path.relative(out, base);
+  if (out === path.parse(out).root || out === os.homedir() || rel === '' || !rel.startsWith('..')) {
+    throw new UsageError(`Refusing to build into ${out}: it holds the directory you ran from. Pass --out <new dir>.`);
+  }
+  if (existsSync(out)) {
+    const entries = readdirSync(out).filter((n) => n !== '.DS_Store');
+    if (entries.length && !entries.includes('index.html')) {
+      throw new UsageError(`Refusing to replace ${out}: it is not empty and is not a previous build. Pass --out <new dir>.`);
+    }
+  }
+}
+
+async function loadNodeSide() {
+  const { runnerImport } = await import('vite');
+  const files = await runnerImport(path.join(APP_ROOT, 'vite/atlas-files.ts'));
+  const publish = await runnerImport(path.join(APP_ROOT, 'vite/publish.ts'));
+  return { resolveRoots: files.module.resolveRoots, publishData: publish.module.publishData };
+}
+
+function publish(publishData, roots, out, keep) {
+  const result = publishData({ roots, out, keep: keep ?? 30 });
+  process.stdout.write(`Published ${result.files.length} spec file(s) and ${result.published.length} run(s) to ${out}\n`);
+  if (result.skipped.length) process.stdout.write(`Not published, privacy check missing or failed: ${result.skipped.join(', ')}\n`);
+}
+
+async function main(argv) {
+  const { command, extra, values } = parse(argv);
+  if (values.help || !command) {
+    process.stdout.write(USAGE);
+    return command || values.help ? 0 : 1;
+  }
+  if (extra.length) throw new UsageError(`Unexpected argument: ${extra.join(' ')}`);
+  const base = process.env.INIT_CWD || process.cwd();
+  const port = integer('port', values.port, 0, 65_535);
+  const keep = integer('keep', values.keep, 0, 10_000);
+  applyRoots(values, base);
+
+  if (command === 'dev') {
+    const { createServer } = await import('vite');
+    const server = await createServer({
+      configFile: CONFIG_FILE,
+      configLoader: 'runner',
+      root: APP_ROOT,
+      server: { ...(port !== undefined ? { port } : {}), ...(values.host ? { host: values.host } : {}), strictPort: false }
+    });
+    await server.listen();
+    server.printUrls();
+    server.bindCLIShortcuts({ print: true });
+    return null;
+  }
+
+  if (command === 'build') {
+    const out = path.resolve(base, values.out ?? 'atlas-site');
+    assertSafeOut(out, base);
+    const { build } = await import('vite');
+    await build({
+      configFile: CONFIG_FILE,
+      configLoader: 'runner',
+      root: APP_ROOT,
+      publicDir: false,
+      build: { outDir: out, emptyOutDir: true }
+    });
+    if (!values['no-data']) {
+      const { resolveRoots, publishData } = await loadNodeSide();
+      publish(publishData, resolveRoots(), path.join(out, 'data'), keep);
+    }
+    process.stdout.write(`Built the site in ${out}; serve it with any static file server.\n`);
+    return 0;
+  }
+
+  if (command === 'publish-data') {
+    const out = path.resolve(base, values.out ?? 'atlas-data');
+    const { resolveRoots, publishData } = await loadNodeSide();
+    publish(publishData, resolveRoots(), out, keep);
+    return 0;
+  }
+
+  throw new UsageError(`Unknown command "${command}"`);
+}
+
+main(process.argv.slice(2)).then(
+  (code) => {
+    if (typeof code === 'number') process.exitCode = code;
+  },
+  (error) => {
+    const usage = error instanceof UsageError || error?.code === 'ERR_PARSE_ARGS_UNKNOWN_OPTION' || error?.code === 'ERR_PARSE_ARGS_INVALID_OPTION_VALUE';
+    process.stderr.write(`atlas client: ${error instanceof Error ? error.message : String(error)}\n`);
+    if (usage) process.stderr.write(`\n${USAGE}`);
+    process.exitCode = 1;
+  }
+);

package/packages/visualizer/bin/atlas-visualizer.mjs

@@ -1,176 +1,3 @@
 #!/usr/bin/env node
-import { existsSync, readdirSync, statSync } from 'node:fs';
-import os from 'node:os';
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { parseArgs } from 'node:util';
-
-const APP_ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
-const CONFIG_FILE = path.join(APP_ROOT, 'vite.config.ts');
-
-const USAGE = `atlas-visualizer: browse statechart specs and the runs that execute them
-
-Usage
-  atlas-visualizer dev          [--specs <dir>] [--runs <dir>] [--port <n>] [--host <host>]
-  atlas-visualizer build        [--specs <dir>] [--runs <dir>] [--out <dir>] [--keep <n>] [--no-data]
-  atlas-visualizer publish-data [--specs <dir>] [--runs <dir>] [--out <dir>] [--keep <n>]
-
-Options
-  --specs <dir>    all specs: statecharts, Gherkin, Quint, DMN, Alloy, notes   (default: ./specs)
-  --runs <dir>     run directories, each with a manifest.json                              (default: ./atlas-runs)
-  --sources <file> additional directory, HTTP and streaming API report sources (JSON)
-  --fixture <name> show a bundled example instead (spec-only, partial, full, failures, removed, malformed, large)
-  --out <dir>      build: the static site (default ./atlas-site); publish-data: the data (default ./atlas-data)
-  --keep <n>       how many of the newest runs to publish (default 30)
-  --no-data        build: leave the data out; point the site at it with VITE_ATLAS_BASE_URL
-  --port <n>       dev: port to listen on (default 5180, or the next free one)
-  --host <host>    dev: address to listen on (default localhost)
-
-Relative paths resolve against the directory the command was run from. ATLAS_SPECS_ROOT and
-ATLAS_RUNS_ROOT are read when the flags are absent.
-`;
-
-class UsageError extends Error {}
-
-function parse(argv) {
-  const { values, positionals } = parseArgs({
-    args: argv,
-    allowPositionals: true,
-    strict: true,
-    options: {
-      specs: { type: 'string' },
-      runs: { type: 'string' },
-      sources: { type: 'string' },
-      fixture: { type: 'string' },
-      out: { type: 'string' },
-      keep: { type: 'string' },
-      port: { type: 'string' },
-      host: { type: 'string' },
-      'no-data': { type: 'boolean', default: false },
-      help: { type: 'boolean', short: 'h', default: false }
-    }
-  });
-  return { command: positionals[0], extra: positionals.slice(1), values };
-}
-
-function integer(name, value, min, max) {
-  if (value === undefined) return undefined;
-  const n = Number(value);
-  if (!Number.isInteger(n) || n < min || n > max) throw new UsageError(`--${name} must be a whole number from ${min} to ${max}, got "${value}"`);
-  return n;
-}
-
-/** Point the shared root resolution (vite/atlas-files.ts) at the flags, as absolute paths. */
-function applyRoots(values, base) {
-  if (values.sources) process.env.ATLAS_SOURCES_FILE = path.resolve(base, values.sources);
-  if (values.fixture) {
-    if (values.specs || values.runs) throw new UsageError('--fixture cannot be combined with --specs or --runs');
-    process.env.ATLAS_FIXTURE = values.fixture;
-    return;
-  }
-  if (values.specs || values.runs) delete process.env.ATLAS_FIXTURE;
-  if (values.specs) {
-    const specs = path.resolve(base, values.specs);
-    if (!existsSync(specs) || !statSync(specs).isDirectory()) throw new UsageError(`No specs directory at ${specs}`);
-    process.env.ATLAS_SPECS_ROOT = specs;
-  } else if (process.env.ATLAS_SPECS_ROOT) {
-    process.env.ATLAS_SPECS_ROOT = path.resolve(base, process.env.ATLAS_SPECS_ROOT);
-  }
-  if (values.runs) process.env.ATLAS_RUNS_ROOT = path.resolve(base, values.runs);
-  else if (process.env.ATLAS_RUNS_ROOT) process.env.ATLAS_RUNS_ROOT = path.resolve(base, process.env.ATLAS_RUNS_ROOT);
-  process.env.INIT_CWD = base;
-}
-
-/** Refuse to empty a directory that is not a previous build: the base, its ancestors, home, or anything else with files. */
-function assertSafeOut(out, base) {
-  const rel = path.relative(out, base);
-  if (out === path.parse(out).root || out === os.homedir() || rel === '' || !rel.startsWith('..')) {
-    throw new UsageError(`Refusing to build into ${out}: it holds the directory you ran from. Pass --out <new dir>.`);
-  }
-  if (existsSync(out)) {
-    const entries = readdirSync(out).filter((n) => n !== '.DS_Store');
-    if (entries.length && !entries.includes('index.html')) {
-      throw new UsageError(`Refusing to replace ${out}: it is not empty and is not a previous build. Pass --out <new dir>.`);
-    }
-  }
-}
-
-async function loadNodeSide() {
-  const { runnerImport } = await import('vite');
-  const files = await runnerImport(path.join(APP_ROOT, 'vite/atlas-files.ts'));
-  const publish = await runnerImport(path.join(APP_ROOT, 'vite/publish.ts'));
-  return { resolveRoots: files.module.resolveRoots, publishData: publish.module.publishData };
-}
-
-function publish(publishData, roots, out, keep) {
-  const result = publishData({ roots, out, keep: keep ?? 30 });
-  process.stdout.write(`Published ${result.files.length} spec file(s) and ${result.published.length} run(s) to ${out}\n`);
-  if (result.skipped.length) process.stdout.write(`Not published, privacy check missing or failed: ${result.skipped.join(', ')}\n`);
-}
-
-async function main(argv) {
-  const { command, extra, values } = parse(argv);
-  if (values.help || !command) {
-    process.stdout.write(USAGE);
-    return command || values.help ? 0 : 1;
-  }
-  if (extra.length) throw new UsageError(`Unexpected argument: ${extra.join(' ')}`);
-  const base = process.env.INIT_CWD || process.cwd();
-  const port = integer('port', values.port, 0, 65_535);
-  const keep = integer('keep', values.keep, 0, 10_000);
-  applyRoots(values, base);
-
-  if (command === 'dev') {
-    const { createServer } = await import('vite');
-    const server = await createServer({
-      configFile: CONFIG_FILE,
-      configLoader: 'runner',
-      root: APP_ROOT,
-      server: { ...(port !== undefined ? { port } : {}), ...(values.host ? { host: values.host } : {}), strictPort: false }
-    });
-    await server.listen();
-    server.printUrls();
-    server.bindCLIShortcuts({ print: true });
-    return null;
-  }
-
-  if (command === 'build') {
-    const out = path.resolve(base, values.out ?? 'atlas-site');
-    assertSafeOut(out, base);
-    const { build } = await import('vite');
-    await build({
-      configFile: CONFIG_FILE,
-      configLoader: 'runner',
-      root: APP_ROOT,
-      publicDir: false,
-      build: { outDir: out, emptyOutDir: true }
-    });
-    if (!values['no-data']) {
-      const { resolveRoots, publishData } = await loadNodeSide();
-      publish(publishData, resolveRoots(), path.join(out, 'data'), keep);
-    }
-    process.stdout.write(`Built the site in ${out}; serve it with any static file server.\n`);
-    return 0;
-  }
-
-  if (command === 'publish-data') {
-    const out = path.resolve(base, values.out ?? 'atlas-data');
-    const { resolveRoots, publishData } = await loadNodeSide();
-    publish(publishData, resolveRoots(), out, keep);
-    return 0;
-  }
-
-  throw new UsageError(`Unknown command "${command}"`);
-}
-
-main(process.argv.slice(2)).then(
-  (code) => {
-    if (typeof code === 'number') process.exitCode = code;
-  },
-  (error) => {
-    const usage = error instanceof UsageError || error?.code === 'ERR_PARSE_ARGS_UNKNOWN_OPTION' || error?.code === 'ERR_PARSE_ARGS_INVALID_OPTION_VALUE';
-    process.stderr.write(`atlas-visualizer: ${error instanceof Error ? error.message : String(error)}\n`);
-    if (usage) process.stderr.write(`\n${USAGE}`);
-    process.exitCode = 1;
-  }
-);
+// Compatibility entry point for already installed clients.
+import './atlas-client.mjs';

package/packages/visualizer/src/app/AppShell.tsx

@@ -1,24 +1,36 @@
 import { Outlet, useLocation, useSearch } from '@tanstack/react-router';
+import { lazy, Suspense } from 'react';
 
+import { LiveRunsProvider } from '../live/live-runs';
 import { Header } from '../components/Header';
 import { EvidenceProvider } from '../evidence/evidence-context';
 import { SourcesPanel } from '../evidence/sources-panel';
 import { SpecIndex } from '../evidence/spec-index';
 import { kindOfAddress } from '../spec-kind';
 import styles from '../views/views.module.css';
-import { Finder } from '../find/Finder';
 import { AtlasProvider, useAtlas } from './atlas-context';
 import { Gazetteer } from './gazetteer';
+import { useEvidence } from '../evidence/evidence-context';
+import { isStatechartFile } from '@crvouga/atlas/schema';
+import { ProjectHome, ProjectSpecIndex } from '../evidence/project-home';
+
+// The finder brings every spec parser with it. It loads as soon as the page has drawn, long before anyone presses ⌘K.
+const loadFinder = () => import('../find/Finder').then((m) => ({ default: m.Finder }));
+const Finder = lazy(loadFinder);
+if (typeof window !== 'undefined') setTimeout(() => void loadFinder(), 0);
 
 function Index() {
+  const evidence = useEvidence();
   const { pathname } = useLocation();
   const kind = kindOfAddress(pathname);
-  return kind ? <SpecIndex kind={kind} /> : pathname.startsWith('/specs/') ? <nav aria-label="Specs" /> : <Gazetteer />;
+  return kind ? <SpecIndex kind={kind} /> : pathname.startsWith('/specs/') ? <nav aria-label="Specs" /> : evidence.ready && !evidence.files.some(isStatechartFile) ? <ProjectSpecIndex /> : <Gazetteer />;
 }
 
 function Body() {
+  const evidence = useEvidence();
   const { view, spec } = useAtlas();
   const { pathname } = useLocation();
+  if (pathname === '/' && evidence.ready && !evidence.filesPending && !evidence.files.some(isStatechartFile)) return <ProjectHome />;
   if (!pathname.startsWith('/specs/') && !view && spec.error) {
     return (
       <div className={styles.message} role="alert">
@@ -36,20 +48,24 @@ function Body() {
 export function AppShell() {
   const { run } = useSearch({ strict: false });
   return (
-    <AtlasProvider run={run}>
-      <EvidenceProvider>
-        <div className={styles.app}>
-          <Header />
-          <div className={styles.frame}>
-            <Index />
-            <main className={styles.main}>
-              <Body />
-            </main>
+    <LiveRunsProvider enabled={!run}>
+      <AtlasProvider run={run}>
+        <EvidenceProvider>
+          <div className={styles.app}>
+            <Header />
+            <div className={styles.frame}>
+              <Index />
+              <main className={styles.main}>
+                <Body />
+              </main>
+            </div>
+            <SourcesPanel />
+            <Suspense fallback={null}>
+              <Finder />
+            </Suspense>
           </div>
-          <SourcesPanel />
-          <Finder />
-        </div>
-      </EvidenceProvider>
-    </AtlasProvider>
+        </EvidenceProvider>
+      </AtlasProvider>
+    </LiveRunsProvider>
   );
 }

package/packages/visualizer/src/app/report-sources.tsx

@@ -9,6 +9,7 @@ import type { ReportBackend } from '../data/adapters/report-backend';
 import { getJson, LoadError } from '../data/adapters';
 import { useAdapter } from '../data/adapters/context';
 import { createReportBackend } from '../data/adapters/report-backend';
+import { runtimeConfig, runtimeUrl } from '../runtime';
 
 const SourceListSchema = z
   .object({ schemaVersion: z.literal(1), sources: z.array(RemoteReportSourceSchema) })
@@ -35,15 +36,17 @@ export function useReportSources() {
 
 export function ReportSourcesProvider({ children }: { children: ReactNode }) {
   const adapter = useAdapter();
+  const server = runtimeUrl(runtimeConfig()?.dataUrl);
   const defaultConfig = useMemo<RemoteReportSource>(
     () => ({
       id: 'workspace',
-      label: adapter.kind === 'dev' ? 'Workspace runs' : 'Published reports',
+      label: server ? 'Atlas server' : adapter.kind === 'dev' ? 'Workspace runs' : 'Published reports',
       type: 'http',
-      baseUrl: adapter.kind === 'dev' ? '/__atlas/' : (import.meta.env.VITE_ATLAS_BASE_URL ?? './data/'),
-      live: adapter.kind === 'dev'
+      baseUrl: server ?? (adapter.kind === 'dev' ? '/__atlas/' : (import.meta.env.VITE_ATLAS_BASE_URL ?? './data/')),
+      live: server !== undefined || adapter.kind === 'dev',
+      ...(server ? { eventsUrl: runtimeUrl(runtimeConfig()?.eventsUrl) } : {})
     }),
-    [adapter]
+    [adapter, server]
   );
   const configBase = defaultConfig.baseUrl.endsWith('/') ? defaultConfig.baseUrl : `${defaultConfig.baseUrl}/`;
   const configUrl = new URL(import.meta.env.VITE_ATLAS_SOURCES_URL ?? 'sources.json', new URL(configBase, window.location.href)).href;

package/packages/visualizer/src/app/router.tsx

@@ -1,8 +1,7 @@
-import { createHashHistory, createRootRoute, createRoute, createRouter, type RouterHistory } from '@tanstack/react-router';
+import { createHashHistory, createRootRoute, createRoute, createRouter, lazyRouteComponent, type RouterHistory } from '@tanstack/react-router';
 import { z } from 'zod/v4';
 
 import { SpecPage } from '../evidence/spec-page';
-import { ChartPage } from '../views/ChartPage';
 import { ProductPage } from '../views/ProductPage';
 import { AppShell } from './AppShell';
 
@@ -44,7 +43,8 @@ function routeTree() {
     getParentRoute: () => rootRoute,
     path: '/chart/$chartId',
     validateSearch: (search) => ChartSearch.parse(search),
-    component: ChartPage
+    // The map (the graph, its layout and its renderer) is the largest part of the page and only this route needs it.
+    component: lazyRouteComponent(() => import('../views/ChartPage'), 'ChartPage')
   });
   const specRoute = createRoute({
     getParentRoute: () => rootRoute,

package/packages/visualizer/src/components/ActivityIndicator.module.css

@@ -0,0 +1,4 @@
+.activity { display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; flex: none; color: var(--place); }
+.ring { box-sizing: border-box; width: 10px; height: 10px; border: 1.5px solid currentColor; border-right-color: transparent; border-bottom-color: transparent; border-radius: 50%; opacity: .65; animation: turn 1.8s linear infinite; }
+@keyframes turn { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .ring { animation: none; } }

package/packages/visualizer/src/components/ActivityIndicator.tsx

@@ -0,0 +1,6 @@
+import styles from './ActivityIndicator.module.css';
+
+/** A quiet indication of active work; reduced motion keeps a static ring. */
+export function ActivityIndicator({ label = 'Working' }: { label?: string }) {
+  return <span className={styles.activity} role="status" aria-label={label} title={label}><span className={styles.ring} aria-hidden="true" /></span>;
+}