@crvouga/atlas 0.4.0 → 0.6.0

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

@@ -1,205 +1,114 @@
 .header {
-  display: flex;
-  align-items: stretch;
-  gap: 20px;
-  min-height: var(--header-h);
-  padding: 0 16px;
-  background: var(--bg);
+  position: relative;
+  z-index: 20;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 16px;
+  min-height: 54px;
+  padding: 8px 16px;
   border-bottom: 1px solid var(--line);
+  background: var(--bg);
 }
-
 .home {
-  display: inline-flex;
-  align-items: center;
   color: var(--ink);
-  font-size: 1.0625rem;
+  font-size: 15px;
   font-weight: 700;
-  letter-spacing: -0.01em;
   text-decoration: none;
-  white-space: nowrap;
 }
-
-.tabs {
-  display: flex;
-  align-items: stretch;
-  gap: 2px;
-  min-width: 0;
-}
-
-.tabs a {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 0 10px;
-  color: var(--ink-3);
-  font-size: 0.9375rem;
-  font-weight: 500;
-  text-decoration: none;
-  white-space: nowrap;
-}
-
-.tabs a:hover {
-  color: var(--ink);
-}
-
-.tabs a[aria-current='page'] {
-  color: var(--ink);
-  font-weight: 600;
-  box-shadow: inset 0 -2px 0 var(--place);
-}
-
-.failing {
-  min-width: 1.125rem;
-  padding: 0 0.3rem;
-  border-radius: var(--pill);
-  background: var(--failed-soft);
-  color: var(--failed-ink);
-  font-size: 0.6875rem;
-  font-weight: 700;
-  line-height: 1.125rem;
-  text-align: center;
-}
-
-.tools {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-left: auto;
-  min-width: 0;
-  padding: 8px 0;
-}
-
-.live {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--place);
-  font-size: 0.8125rem;
-  font-weight: 600;
-  white-space: nowrap;
-}
-
-.liveDot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--place);
-  animation: pulse 1.4s var(--ease) infinite;
-}
-
-@keyframes pulse {
-  50% {
-    opacity: 0.35;
-  }
-}
-
-.sources,
-.select {
-  height: 2.125rem;
-  padding: 0 12px;
-  border: 1px solid var(--line-2);
-  border-radius: var(--pill);
-  background: var(--bg);
+.breadcrumbs, .tools { display: flex; align-items: center; min-width: 0; gap: 6px; }
+.breadcrumbs { color: var(--faint); }
+.tools { justify-content: flex-end; }
+.picker { position: relative; display: inline-flex; min-width: 0; max-width: 100%; }
+.picker::after {
+  position: absolute;
+  right: 10px;
+  top: 12px;
+  width: 5px;
+  height: 5px;
+  border-right: 1.5px solid var(--ink-3);
+  border-bottom: 1.5px solid var(--ink-3);
+  transform: rotate(45deg);
+  pointer-events: none;
+  content: '';
+}
+.select, .search, .menu > summary, .sources {
+  box-sizing: border-box;
+  height: 32px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
   color: var(--ink);
-  font-size: 0.8125rem;
-  font-weight: 600;
-  white-space: nowrap;
+  font: 500 13px var(--font);
   cursor: pointer;
 }
-
-.sources:hover,
-.select:hover {
-  background: var(--bg-2);
-}
-
-.sources span {
-  margin-left: 6px;
-  color: var(--ink-3);
-  font-weight: 400;
-}
-
-.sources[data-filtered] {
-  border-color: var(--place);
-  color: var(--place);
-}
-
-.sources[data-filtered] span {
-  color: var(--place);
-}
-
-.picker {
-  display: inline-flex;
-}
-
 .select {
-  max-width: 15rem;
-  font-weight: 500;
-}
-
-.search {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  width: min(15rem, 28vw);
-  height: 2.125rem;
-  padding: 0 8px 0 14px;
-  border: 1px solid transparent;
-  border-radius: var(--pill);
-  background: var(--bg-2);
-  color: var(--ink-3);
-  font-size: 0.875rem;
-  font-weight: 500;
-  text-align: left;
-  cursor: pointer;
-}
-
-.search kbd {
-  margin-left: auto;
-  padding: 0 0.35rem;
-  border: 1px solid var(--line-2);
-  border-radius: 0.35rem;
-  color: var(--ink-3);
-  font-family: var(--font);
-  font-size: 0.75rem;
-  font-weight: 600;
-  line-height: 1.35rem;
-}
-
-.search:hover,
-.search:focus-visible {
-  border-color: var(--place);
+  appearance: none;
+  min-width: 0;
+  max-width: min(24rem, 30vw);
+  padding: 0 28px 0 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.picker[data-project] .select { max-width: 200px; border-color: var(--line); }
+.select:disabled { color: var(--ink-3); cursor: default; }
+.select:hover:not(:disabled), .search:hover, .menu > summary:hover, .sources:hover { background: var(--bg-2); }
+.select:focus-visible, .search:focus-visible, .menu > summary:focus-visible, .sources:focus-visible, .tabs a:focus-visible {
+  outline: 2px solid var(--place);
+  outline-offset: 2px;
+}
+.search { display: inline-flex; align-items: center; justify-content: center; width: 32px; padding: 0; color: var(--ink-3); }
+.menu { position: relative; min-width: 0; }
+.menu > summary { display: flex; align-items: center; gap: 8px; padding: 0 10px; list-style: none; white-space: nowrap; }
+.menu > summary::-webkit-details-marker { display: none; }
+.menu[data-tools] > summary { width: 32px; justify-content: center; padding: 0; font-size: 16px; letter-spacing: 1px; }
+.menu[open] > summary { background: var(--bg-2); }
+.dropdown {
+  position: absolute;
+  z-index: 100;
+  top: calc(100% + 8px);
+  left: 0;
+  min-width: 200px;
+  max-width: min(320px, calc(100vw - 32px));
+  padding: 6px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
   background: var(--bg);
-  color: var(--ink);
-}
-
-@media (max-width: 760px) {
-  .header {
-    flex-wrap: wrap;
-    gap: 0 16px;
-  }
-
-  .home {
-    min-height: 2.75rem;
-  }
-
-  .tabs {
-    order: 3;
-    flex-basis: 100%;
-    min-height: 2.5rem;
-    overflow-x: auto;
-  }
-
-  .tools {
-    flex: 1;
-    justify-content: flex-end;
-  }
-
-  .live,
-  .picker {
-    display: none;
-  }
-
-  .search {
-    width: min(11rem, 40vw);
-  }
-}
+  box-shadow: 0 8px 24px #00000014;
+}
+.menu:not([open]) > .dropdown { display: none; }
+.menu[data-tools] .dropdown { left: auto; right: 0; width: 260px; }
+.tabs { display: flex; flex-direction: column; }
+.tabs a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 4px; color: var(--ink-3); font-size: 13px; text-decoration: none; }
+.tabs a:hover { background: var(--bg-2); color: var(--ink); }
+.tabs a[aria-current='page'] { background: var(--place-soft); color: var(--ink); font-weight: 600; }
+.failing { color: var(--failed-ink); font-size: 12px; }
+.options { display: flex; flex-direction: column; gap: 4px; }
+.optionGroup { display: flex; flex-direction: column; gap: 4px; padding: 6px 4px 10px; border-bottom: 1px solid var(--line); }
+.optionLabel { padding: 0 6px; color: var(--ink-3); font-size: 11px; }
+.optionGroup .picker, .optionGroup .select { width: 100%; max-width: 100%; }
+.optionGroup .select { border-color: var(--line); }
+.sources { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 0 10px; text-decoration: none; text-align: left; }
+.sources span { color: var(--ink-3); font-weight: 400; }
+.sources[data-filtered], .sources[data-filtered] span { color: var(--place); }
+.connection { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 32px; flex: none; }
+.connectionDot, .liveDot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); flex: none; }
+.connection[data-status='live'] .connectionDot { background: var(--passed); }
+.connection[data-status='reconnecting'] .connectionDot { background: var(--failed-ink); }
+.live { display: flex; align-items: center; gap: 6px; padding: 6px 10px; color: var(--ink-3); font-size: 12px; }
+.liveDot { background: var(--place); }
+.notice { margin-top: 4px; padding: 8px 4px 0; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12px; line-height: 1.5; }
+.notice p { margin: 0 6px 6px; }
+@media (max-width: 700px) {
+  .header { gap: 4px 10px; padding: 6px 12px; }
+  .home { grid-column: 1; grid-row: 1; }
+  .tools { grid-column: 2 / -1; grid-row: 1; }
+  .breadcrumbs { grid-column: 1 / -1; grid-row: 2; }
+  .breadcrumbs .picker { flex: 1; }
+  .breadcrumbs .select { width: 100%; max-width: 100%; }
+  .picker[data-project] .select { max-width: min(180px, 43vw); }
+  .menu[data-tools] .dropdown { position: fixed; top: 44px; left: 12px; right: 12px; width: auto; max-width: none; }
+}
+
+.picker[data-running] .select { padding-left: 28px; }
+.pickerActivity { position: absolute; left: 9px; top: 10px; display: flex; pointer-events: none; }

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

@@ -1,18 +1,23 @@
 import { Link, useLocation, useNavigate, useSearch } from '@tanstack/react-router';
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useRef, type ReactNode } from 'react';
 
 import { useAtlas } from '../app/atlas-context';
-import { commandKey } from '../find/Finder';
 import { setFinderOpen } from '../find/open';
 import type { AtlasView } from '../data/model';
 import { LATEST } from '../data/queries';
 import { useEvidence } from '../evidence/evidence-context';
 import { plural } from '../evidence/format';
 import { excludedCount } from '../evidence/sources-panel';
+import { useLiveStatus } from '../live/live-stream';
 import { kindOfAddress, outlinePath, SPEC_KINDS } from '../spec-kind';
+import { runtimeConfig } from '../runtime';
 import { useUiStore } from '../state/ui-store';
 import { DataIssues } from './DataIssues';
+import { ActivityIndicator } from './ActivityIndicator';
 import styles from './Header.module.css';
+import { ProjectPicker, ProjectNotice } from './ProjectPicker';
+import { isStatechartFile } from '@crvouga/atlas/schema';
+import { SearchIcon, ChevronDownIcon } from './icons';
 
 const dateTime = new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' });
 
@@ -69,6 +74,19 @@ function LiveRuns() {
   );
 }
 
+/** A fixed-size connection indicator; incoming results never change the header's width. */
+function ServerConnection() {
+  const status = useLiveStatus();
+  if (status === 'off') return null;
+  const label = status === 'live' ? 'Live updates connected' : status === 'connecting' ? 'Connecting to live updates' : 'Live updates disconnected; reconnecting';
+  return (
+    <span className={styles.connection} data-status={status} role="status" aria-label={label} title={label}>
+      <span className={styles.connectionDot} aria-hidden="true" />
+      <span className="sr-only">{label}</span>
+    </span>
+  );
+}
+
 function SourcesButton() {
   const { layers, ready, unavailable, excluded } = useEvidence();
   const setOpen = useUiStore((s) => s.setSourcesOpen);
@@ -88,6 +106,7 @@ export function Header() {
   const { pathname } = useLocation();
   const kind = kindOfAddress(pathname);
   const product = productName(view?.title);
+  const hasCharts = evidence.files.some(isStatechartFile);
   useEffect(() => {
     document.title = product;
   }, [product]);
@@ -95,36 +114,92 @@ export function Header() {
     () =>
       SPEC_KINDS.map((entry) => {
         const files = evidence.files.filter(entry.accepts);
-        return { kind: entry, files: files.length, failing: files.filter((file) => (evidence.view.specs.get(outlinePath(file))?.summary.counts.failed ?? 0) > 0).length };
+        return { kind: entry, files: files.length, running: files.some(file => (evidence.view.specs.get(outlinePath(file))?.summary.counts.running ?? 0) > 0), failing: files.filter((file) => (evidence.view.specs.get(outlinePath(file))?.summary.counts.failed ?? 0) > 0).length };
       }).filter((tab) => tab.files > 0 || tab.kind === kind),
     [evidence.files, evidence.view, kind]
   );
   return (
     <header className={styles.header}>
       <Link to="/" search={(prev) => runOnly(prev)} className={styles.home}>
-        {product}
+        Atlas
       </Link>
-      <nav className={styles.tabs} aria-label="Spec type">
+      <div className={styles.breadcrumbs}>
+      <HeaderMenu label="Spec type" working={tabs.some(tab => tab.running)} caption={kind?.label ?? (hasCharts ? 'Statecharts' : 'Specs')}>
+      <nav className={styles.tabs} aria-label="Spec type" onClick={event => event.currentTarget.closest('details')?.removeAttribute('open')}>
         <Link to="/" search={(prev) => runOnly(prev)} aria-current={pathname.startsWith('/specs/') ? undefined : 'page'}>
-          Statecharts
+          {hasCharts || !evidence.ready ? 'Statecharts' : 'Project reports'}
         </Link>
         {tabs.map((tab) => (
           <Link key={tab.kind.id} to="/specs/$kind" params={{ kind: tab.kind.id }} search={{}} aria-current={tab.kind === kind ? 'page' : undefined}>
             {tab.kind.label}
+            {tab.running && <ActivityIndicator label={`${tab.kind.label} tests running`} />}
             {tab.failing > 0 && <span className={styles.failing} aria-label={`${plural(tab.failing, tab.kind.one, tab.kind.many)} failing`}>{tab.failing}</span>}
           </Link>
         ))}
       </nav>
+      </HeaderMenu>
+      <SpecBreadcrumb />
+      </div>
       <div className={styles.tools}>
-        <LiveRuns />
-        {!kind && view && <RunPicker view={view} />}
-        {!kind && view && <DataIssues issues={view.issues} />}
-        <SourcesButton />
-        <button type="button" className={styles.search} aria-keyshortcuts="Meta+K Control+K" onClick={() => setFinderOpen(true)}>
-          Find a flow
-          <kbd>{commandKey()}</kbd>
+        <ServerConnection />
+        <button type="button" className={styles.search} aria-label="Find a flow" title="Search (⌘K / Ctrl+K)" aria-keyshortcuts="Meta+K Control+K" onClick={() => setFinderOpen(true)}>
+          <SearchIcon size={16} />
         </button>
+        <HeaderMenu label="View options" caption="•••" tools>
+          <div className={styles.options}>
+            {!kind && view && <div className={styles.optionGroup}><span className={styles.optionLabel}>Run</span><RunPicker view={view} /></div>}
+            <LiveRuns />
+            <SourcesButton />
+            {!kind && view && <DataIssues issues={view.issues} />}
+            {runtimeConfig()?.api && <a href="/admin" className={styles.sources}>Settings</a>}
+            <ProjectNotice />
+          </div>
+        </HeaderMenu>
+        <ProjectPicker />
       </div>
     </header>
   );
 }
+
+function HeaderMenu({ label, caption, tools = false, working = false, children }: { label: string; caption: string; tools?: boolean; working?: boolean; children: ReactNode }) {
+  const ref = useRef<HTMLDetailsElement>(null);
+  useEffect(() => {
+    const close = (event: Event) => {
+      if (event instanceof KeyboardEvent) {
+        if (event.key === 'Escape' && ref.current?.open) { ref.current.open = false; ref.current.querySelector('summary')?.focus(); }
+      } else if (event.target instanceof Node && !ref.current?.contains(event.target) && ref.current) ref.current.open = false;
+    };
+    document.addEventListener('pointerdown', close);
+    document.addEventListener('keydown', close);
+    return () => { document.removeEventListener('pointerdown', close); document.removeEventListener('keydown', close); };
+  }, []);
+  return <details ref={ref} className={styles.menu} data-tools={tools || undefined} onToggle={event => {
+    if (event.currentTarget.open) for (const other of document.querySelectorAll<HTMLDetailsElement>('header details[open]')) if (other !== event.currentTarget) other.open = false;
+  }}>
+    <summary role="button" aria-label={label}>{working && <ActivityIndicator label="Specs running" />}{caption}{!tools && <ChevronDownIcon size={12} />}</summary>
+    <div className={styles.dropdown}>{children}</div>
+  </details>;
+}
+
+function SpecBreadcrumb() {
+  const evidence = useEvidence();
+  const { view } = useAtlas();
+  const { pathname } = useLocation();
+  const search = useSearch({ strict: false });
+  const navigate = useNavigate();
+  const kind = kindOfAddress(pathname);
+  const chart = pathname.startsWith('/chart/') ? decodeURIComponent(pathname.split('/')[2] ?? '') : null;
+  const options = kind ? evidence.files.filter(kind.accepts).map(file => ({ id: file, name: evidence.titleOf(file), running: (evidence.view.specs.get(outlinePath(file))?.summary.counts.running ?? 0) > 0 }))
+    : [...(view?.charts.values() ?? [])].map(item => ({ id: item.id, name: item.name, running: (evidence.view.specs.get(outlinePath(item.file))?.summary.counts.running ?? 0) > 0 }));
+  if (!options.length) return null;
+  const running = options.some(option => option.running);
+  return <><span aria-hidden="true">›</span><label className={styles.picker} data-running={running || undefined}><span className="sr-only">Spec</span>
+    {running && <span className={styles.pickerActivity}><ActivityIndicator label="Specs running" /></span>}
+    <select aria-label="Spec" className={styles.select} value={kind ? search.spec ?? '' : chart ?? ''} onChange={event => {
+      const value = event.target.value;
+      if (kind) void navigate({ to: '/specs/$kind', params: { kind: kind.id }, search: value ? { spec: value } : {} });
+      else if (value) void navigate({ to: '/chart/$chartId', params: { chartId: value }, search: {} });
+      else void navigate({ to: '/', search: {} });
+    }}><option value="">All specs</option>{options.map(option => <option key={option.id} value={option.id}>{option.name}{option.running ? ' · Running' : ''}</option>)}</select>
+  </label></>;
+}

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

@@ -0,0 +1,64 @@
+import { useEffect } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { ProjectsSchema, type Project } from '@crvouga/atlas/schema';
+import { currentProject, runtimeConfig, runtimeUrl } from '../runtime';
+import { eventsAddress, listenLive, useLiveStatus } from '../live/live-stream';
+import { liveInvalidator } from '../live/live-query';
+import styles from './Header.module.css';
+
+/** Project changes navigate the page so queries, recordings and event streams cannot carry across projects. */
+export function selectProject(slug: string) {
+  const url = new URL(window.location.href);
+  url.searchParams.set('project', slug);
+  url.hash = '#/';
+  window.location.assign(url.href);
+}
+
+function useProjects() {
+  const address = runtimeUrl(runtimeConfig()?.projectsUrl);
+  const client = useQueryClient();
+  const streaming = useLiveStatus() === 'live';
+  useEffect(() => {
+    const events = eventsAddress();
+    if (!address || !events) return;
+    const refresh = liveInvalidator(client, ['projects', address], 250);
+    const stop = listenLive(events, event => { if (event.type === 'open' || event.type === 'projects' || event.type === 'report') refresh(); });
+    return () => { stop(); refresh.cancel(); };
+  }, [address, client]);
+  return useQuery<Project[]>({ queryKey: ['projects', address], enabled: !!address, staleTime: 10_000,
+    refetchInterval: query => query.state.error?.message.includes('(404)') ? false : streaming ? 60_000 : 5000, refetchIntervalInBackground: true, retry: false,
+    queryFn: async ({ signal }) => {
+      const response = await fetch(address!, { signal, cache: 'no-store' });
+      if (!response.ok) throw new Error(`Projects unavailable (${response.status})`);
+      return ProjectsSchema.parse(await response.json()).projects;
+    } });
+}
+
+export function ProjectPicker() {
+  const address = runtimeUrl(runtimeConfig()?.projectsUrl);
+  const selected = currentProject();
+  const query = useProjects();
+  useEffect(() => {
+    if (!selected && query.data?.length && !query.data.some(project => project.slug === 'default')) selectProject(query.data[0]!.slug);
+  }, [selected, query.data]);
+  if (!address) return null;
+  const projects = query.data ?? [];
+  const value = selected ?? 'default';
+  return <label className={styles.picker} data-project="true" title={query.error ? 'Project switching unavailable. Open View options for details.' : 'Switch project'}>
+    <span className="sr-only">Project</span>
+    <select className={styles.select} value={value} disabled={!projects.length} onChange={event => selectProject(event.target.value)} aria-busy={query.isLoading}>
+      {!projects.some(project => project.slug === value) && <option value={value}>{selected ?? (query.isLoading ? 'Loading projects…' : 'Default project')}</option>}
+      {projects.map(project => <option key={project.slug} value={project.slug}>{project.name}</option>)}
+    </select>
+  </label>;
+}
+
+/** One actionable error in the options menu, without duplicating alerts across the navigation. */
+export function ProjectNotice() {
+  const query = useProjects();
+  if (!query.error) return null;
+  return <div className={styles.notice} role="alert">
+    <p>Project switching is unavailable. {query.error.message.includes('(404)') ? 'Restart the Atlas server to load project support.' : 'The last available project list is shown.'}</p>
+    <button type="button" className={styles.sources} onClick={() => void query.refetch()}>Retry projects</button>
+  </div>;
+}

package/packages/visualizer/src/data/adapters/adapter.ts

@@ -1,4 +1,6 @@
-import { AtlasChangeSchema, type AtlasChange } from '@crvouga/atlas/schema';
+import type { AtlasChange } from '@crvouga/atlas/schema';
+
+import { listenChanges } from '../../live/live-stream';
 
 export type { AtlasChange } from '@crvouga/atlas/schema';
 
@@ -93,20 +95,6 @@ export function createHttpAdapter(baseUrl: string, kind: AtlasAdapter['kind'] =
 function subscribeToEvents(url: string): NonNullable<AtlasAdapter['subscribe']> {
   const location = new URL(url);
   if (!['http:', 'https:'].includes(location.protocol) || location.username || location.password) throw new Error('Use an HTTP event URL without credentials.');
-  return (onChange) => {
-    if (typeof EventSource === 'undefined') return () => undefined;
-    const stream = new EventSource(url);
-    const receive = (event: MessageEvent<string>) => {
-      try {
-        const change = AtlasChangeSchema.safeParse(JSON.parse(event.data));
-        if (change.success) onChange(change.data);
-      } catch {
-        return;
-      }
-    };
-    stream.addEventListener('message', receive);
-    stream.addEventListener('atlas:change', receive);
-    stream.addEventListener('open', () => onChange({ scope: 'runs', files: [], runIds: [] }));
-    return () => stream.close();
-  };
+  // One connection per address, however many parts of the page listen to it.
+  return (onChange) => listenChanges(url, onChange);
 }

package/packages/visualizer/src/data/adapters/index.ts

@@ -1,3 +1,4 @@
+import { runtimeConfig, runtimeUrl } from '../../runtime';
 import { createHttpAdapter, type AtlasAdapter, type AtlasChange } from './adapter';
 
 export * from './adapter';
@@ -22,8 +23,16 @@ export function createDevAdapter(base = DEV_PREFIX, label = 'Live from disk', so
   };
 }
 
-/** The dev adapter under `vite dev`, the static adapter everywhere else. */
+/** The server's own files, with its event stream: what a page served by `atlas serve` or `atlas dev` reads. */
+export function createServerAdapter(dataUrl: string, eventsUrl: string | undefined): AtlasAdapter {
+  return { ...createHttpAdapter(dataUrl, 'static', eventsUrl), label: 'Atlas server' };
+}
+
+/** The server's adapter when the page was served by one, the dev adapter under a bare `vite dev`, the static adapter everywhere else. */
 export function createAdapter(): AtlasAdapter {
+  const config = runtimeConfig();
+  const dataUrl = runtimeUrl(config?.dataUrl);
+  if (dataUrl) return createServerAdapter(dataUrl, runtimeUrl(config?.eventsUrl));
   if (import.meta.env.DEV && import.meta.hot) return createDevAdapter();
   return createHttpAdapter(import.meta.env.VITE_ATLAS_BASE_URL ?? './data/');
 }

package/packages/visualizer/src/data/adapters/report-backend.test.ts

@@ -78,18 +78,19 @@ describe('report backends', () => {
       }
     }
     stubGlobal('EventSource', Stream);
-    const adapter = createHttpAdapter('/api/', 'api', './events');
+    const adapter = createReportBackend({ id: 'workspace', label: 'Atlas server', type: 'api', baseUrl: '/api/', live: true, eventsUrl: './events' });
     const receive = vi.fn();
     const unsubscribe = adapter.subscribe!(receive);
     const stream = streams[0]!;
     expect(stream.url).toBe('https://atlas.example.test/api/events');
     stream.dispatchEvent(new Event('open'));
+    expect(receive).toHaveBeenNthCalledWith(1, { scope: 'specs', files: [], runIds: [] });
     expect(receive).toHaveBeenLastCalledWith({ scope: 'runs', files: [], runIds: [] });
     stream.dispatchEvent(new MessageEvent('atlas:change', { data: '{"scope":"runs","runIds":["live"]}' }));
     expect(receive).toHaveBeenLastCalledWith({ scope: 'runs', files: [], runIds: ['live'] });
     stream.dispatchEvent(new MessageEvent('message', { data: '{broken' }));
     stream.dispatchEvent(new MessageEvent('message', { data: '{"scope":"unknown"}' }));
-    expect(receive).toHaveBeenCalledTimes(2);
+    expect(receive).toHaveBeenCalledTimes(3);
     unsubscribe();
     expect(stream.close).toHaveBeenCalledTimes(1);
   });

package/packages/visualizer/src/data/adapters/report-backend.ts

@@ -28,7 +28,7 @@ export function sourceRuns(backend: ReportBackend, runs: RunSummary[]): SourcedR
 
 export function createReportBackend(config: RemoteReportSource): ReportBackend {
   const adapter =
-    config.live && import.meta.hot
+    config.live && !config.eventsUrl && import.meta.hot
       ? createDevAdapter(config.baseUrl, config.label, config.id)
       : createHttpAdapter(config.baseUrl, config.type === 'api' ? 'api' : 'static', config.eventsUrl);
   return {