_diff_presenter.txt

diff --git a/dashboard/site/src/presenter.js b/dashboard/site/src/presenter.js
index f9d0973..ab95854 100644
--- a/dashboard/site/src/presenter.js
+++ b/dashboard/site/src/presenter.js
@@ -3,6 +3,7 @@
  */
 
 import { h } from './dom.js';
+import { batch, effect, state } from './reactive.js';
 import { getPrimerStyles } from './styles.js';
 import { octicon } from './octicons.js';
 import { renderDataStateMetrics } from './components/data-state.js';
@@ -99,7 +100,7 @@ import {
  */
 
 /**
- * @typedef {((pageId: string, options: PageSourceLoadOptions) => Promise<Record<string, LogicalSourceInput>>) & { prepare?: (pageId: string) => Promise<void>, subscribeBackgroundSources?: (sourceNames: string[], options: PageSourceLoadOptions) => Promise<Record<string, LogicalSourceInput>> }} PageSourceLoader
+ * @typedef {((pageId: string, options: PageSourceLoadOptions) => Promise<Record<string, LogicalSourceInput>>) & { prepare?: (pageId: string) => Promise<void>, subscribeBackgroundSources?: (sourceNames: string[], options: PageSourceLoadOptions) => Promise<Record<string, LogicalSourceInput>>, subscribeViewSources?: (pageId: string, viewId: string, sourceNames: string[], options: PageSourceLoadOptions) => Promise<Record<string, LogicalSourceInput>> }} PageSourceLoader
  */
 
 /**
@@ -190,8 +191,6 @@ export function renderDashboard(input) {
   const cardTemplates = Object.fromEntries((document.dashboard['card-templates'] ?? []).map((template) => [template.id, template]));
   const reusableViews = document.dashboard.views ?? [];
   const horizonRange = resolveDashboardHorizon(document.dashboard);
-  const hasData = Object.values(rawSources).some((source) => Array.isArray(source?.rows) && source.rows.length > 0);
-  const showInitialLoadingSkeleton = input.loading === true && !hasData;
   const dataHorizon = resolveDataHorizon(rawSources);
   const githubUrlBase = typeof document.dashboard['github-url-base'] === 'string' && document.dashboard['github-url-base'].length > 0
     ? document.dashboard['github-url-base']
@@ -277,6 +276,8 @@ export function renderDashboard(input) {
         const effectiveQueryContext = options.queryContext ?? (initialViewMode ? { viewMode: initialViewMode } : undefined);
         options.queryContext = effectiveQueryContext;
         const rendersBeforePageSources = dashboardPageSourcesAreIndependentlyBound(resolvedPage(), reusableViews);
+        const liveSources = state(sources);
+        const loading = state((input.loading === true || Boolean(input.loadPageSources)) && !rendersBeforePageSources);
         /** @param {Record<string, LogicalSourceInput>} pageSources */
         const updateHorizon = (pageSources) => {
           if (options.signal?.aborted !== true) {
@@ -294,13 +295,11 @@ export function renderDashboard(input) {
           const page = resolvedPage();
           if (!page) throw new Error(`Dashboard page "${pageId}" is not available.`);
           updateHorizon(pageSources);
-          const pageHasData = Object.values(pageSources).some(
-            (source) => Array.isArray(source?.rows) && source.rows.length > 0
-          );
-          const rendered = showInitialLoadingSkeleton
-              && (page.id === 'overview' || !pageHasData)
-            ? renderPageLoadingSkeleton(page)
-            : renderPage(page, pageSources, isPlainObject(document.dashboard.units) ? document.dashboard.units : {}, dashboardDefaults, cardTemplates, reusableViews, effectiveQueryContext, document.dashboard.queries ?? []);
+          const rendered = renderPage(page, pageSources, isPlainObject(document.dashboard.units) ? document.dashboard.units : {}, dashboardDefaults, cardTemplates, reusableViews, effectiveQueryContext, document.dashboard.queries ?? [], {
+            sources: liveSources,
+            loading,
+            signal: options.signal
+          });
           debugPerformance('page render', {
             pageId,
             phase: renderCount++ === 0 ? 'initial' : 'update',
@@ -314,8 +313,60 @@ export function renderDashboard(input) {
           if (rendersBeforePageSources) {
             return render(sources);
           }
-          options.onUpdate = (pageSources) => options.renderUpdate(render(pageSources));
-          return input.loadPageSources(pageId, options).then(render);
+          /** @param {Record<string, LogicalSourceInput>} pageSources @param {boolean} [replace] @param {string[][]} [aliases] */
+          const publish = (pageSources, replace = false, aliases = []) => {
+            if (options.signal.aborted) return;
+            const merged = replace ? pageSources : { ...liveSources.get(), ...pageSources };
+            for (const [alias, authored] of aliases) {
+              if (pageSources[authored] && !pageSources[alias]) delete merged[alias];
+            }
+            updateHorizon(merged);
+            batch(() => {
+              liveSources.set(merged);
+            });
+          };
+          const rendered = render(sources);
+          if (input.loadPageSources.subscribeViewSources) {
+            const payload = getBuiltInPagePayload(resolvedPage(), reusableViews);
+            const bindings = (payload.views ?? []).flatMap((view, index) => {
+              if (!isPlainObject(view) || (typeof view.element === 'string' && elementLoadsSourcesAsync(view.element))) return [];
+              const names = getViewSources(view);
+              return names.length ? [{
+                id: typeof view.id === 'string' ? view.id : `view-${index + 1}`,
+                names,
+                aliases: names.map((name, sourceIndex) => [dashboardViewAliasName(pageId, view, index, name, sourceIndex), name])
+              }] : [];
+            });
+            const remaining = collectDashboardPageSourceNames(document, pageId, effectiveQueryContext?.viewMode)
+              .filter((name) => !bindings.some((binding) => binding.names.includes(name)));
+            if (remaining.length) bindings.push({ id: 'page-chrome', names: remaining, aliases: [] });
+            const subscribeViewSources = input.loadPageSources.subscribeViewSources;
+            const subscriptions = bindings.map(({ id, names, aliases }) => subscribeViewSources(
+              pageId, id, names, { ...options, onUpdate: (next) => publish(next, false, aliases) }
+            ).then((next) => publish(next, false, aliases)));
+            void Promise.allSettled(subscriptions).then((results) => {
+              if (options.signal.aborted) return;
+              for (const result of results) {
+                if (result.status === 'rejected') debugRender('view source binding failed', {
+                  pageId,
+                  message: result.reason instanceof Error ? result.reason.message : String(result.reason)
+                });
+              }
+              if (!input.loading) loading.set(false);
+            });
+          } else {
+            options.onUpdate = (pageSources) => publish(pageSources, true);
+            void input.loadPageSources(pageId, options).then(options.onUpdate).catch((error) => {
+              if (options.signal.aborted) return;
+              debugRender('page source binding failed', {
+                pageId,
+                message: error instanceof Error ? error.message : String(error)
+              });
+            }).finally(() => {
+              if (!options.signal.aborted && !input.loading) loading.set(false);
+            });
+          }
+          return rendered;
         }
         const renderedPage = render(sources);
         /** @param {HTMLElement} rendered */
@@ -665,31 +716,6 @@ function renderPagePlaceholder(page) {
   });
 }
 
-/**
- * @param {PresentableBuiltInPage | PresentableCustomPage} page
- * @returns {HTMLElement}
- */
-function renderPageLoadingSkeleton(page) {
-  const placeholder = renderPagePlaceholder(page);
-  const payload = page.kind === 'built-in' ? getBuiltInPagePayload(page) : page;
-  const routeParameter = typeof payload.route?.['hash-query-parameter'] === 'string'
-    ? payload.route['hash-query-parameter']
-    : undefined;
-  const routeTabs = routeParameter ? declaredRouteTabs(payload.route) : null;
-  placeholder.removeAttribute('data-page-pending');
-  placeholder.setAttribute('aria-busy', 'true');
-  if (routeTabs && routeParameter) {
-    placeholder.append(renderDeclaredRouteTabs({
-      routeParameter,
-      currentTab: routeTabs.currentTab,
-      tabs: routeTabs.tabs,
-      className: routeTabs.className
-    }));
-  }
-  placeholder.append(renderPageSkeleton());
-  return placeholder;
-}
-
 /**
  * @returns {HTMLElement}
  */
@@ -706,12 +732,13 @@ function renderPageSkeleton() {
  * @param {Array<Record<string, unknown>>} reusableViews
  * @param {PageSourceLoadOptions['queryContext']} [queryContext]
  * @param {Array<Record<string, unknown>>} [queries]
+ * @param {{ sources: import('./reactive.js').State<Record<string, LogicalSourceInput>>, loading: import('./reactive.js').State<boolean>, signal: AbortSignal }} [binding]
  * @returns {HTMLElement}
  */
-function renderPage(page, sources, units, dashboardDefaults, cardTemplates, reusableViews, queryContext, queries = []) {
+function renderPage(page, sources, units, dashboardDefaults, cardTemplates, reusableViews, queryContext, queries = [], binding = undefined) {
   const title = getPageTitle(page);
   const payload = getBuiltInPagePayload(page, reusableViews);
-  return renderCustomPage(payload, title, sources, units, dashboardDefaults, cardTemplates, true, queryContext, queries);
+  return renderCustomPage(payload, title, sources, units, dashboardDefaults, cardTemplates, true, queryContext, queries, binding);
 }
 
 /**
@@ -724,9 +751,10 @@ function renderPage(page, sources, units, dashboardDefaults, cardTemplates, reus
  * @param {boolean} [withFilterBar]
  * @param {PageSourceLoadOptions['queryContext']} [queryContext]
  * @param {Array<Record<string, unknown>>} [queries]
+ * @param {{ sources: import('./reactive.js').State<Record<string, LogicalSourceInput>>, loading: import('./reactive.js').State<boolean>, signal: AbortSignal }} [binding]
  * @returns {HTMLElement}
  */
-function renderCustomPage(page, title, sources, units, dashboardDefaults, cardTemplates, withFilterBar = true, queryContext, queries = []) {
+function renderCustomPage(page, title, sources, units, dashboardDefaults, cardTemplates, withFilterBar = true, queryContext, queries = [], binding = undefined) {
   const effectiveDashboardDefaults = inventoryPage(page.id)
     ? { ...dashboardDefaults, time: undefined }
     : dashboardDefaults;
@@ -763,6 +791,14 @@ function renderCustomPage(page, title, sources, units, dashboardDefaults, cardTe
     }
   }
   const renderedViews = views.map((view, index) => {
+    const viewSourceNames = getViewSources(view);
+    const isSelfBound = isPlainObject(view) && typeof view.element === 'string' && elementLoadsSourcesAsync(view.element);
+    /** @param {Record<string, LogicalSourceInput>} current */
+    const viewIsPending = (current) => binding?.loading.get() === true
+      && viewSourceNames.some((name, sourceIndex) => (
+        !current[resolveViewSourceName(current, page.id, view, index, name, sourceIndex)]
+        || current[resolveViewSourceName(current, page.id, view, index, name, sourceIndex)]?.metadata?.availability === 'unavailable'
+      ));
     const viewId = isPlainObject(view) && typeof view.id === 'string' ? view.id : '';
     const headingTag = sections.length > 0 && !standaloneCalloutViewIds.has(viewId) ? 'h4' : 'h3';
     const layout = isPlainObject(view) && typeof view.layout === 'string' ? view.layout : 'full';
@@ -777,14 +813,23 @@ function renderCustomPage(page, title, sources, units, dashboardDefaults, cardTe
       )
     );
     const isNavigationCompositeView = isPlainObject(view) && view.mark === 'element';
-    const render = () => {
-      let rendered = renderCustomView(page.id, view, index, sources, units, cardTemplates, headingTag, routeParameter, queryContext);
+    const render = (viewSources = sources, pending = false) => {
+      const readySources = isSelfBound && binding?.loading.get()
+        ? Object.fromEntries(Object.entries(viewSources).filter(([, source]) => source.metadata?.availability !== 'unavailable'))
+        : viewSources;
+      let rendered = pending && viewSourceNames.length > 0 && !isSelfBound
+        ? renderPageSection(page.id, getViewTitle(view, index), [
+            renderDashboardViewSkeleton(),
+            h('span', { className: 'sr-only' }, `Loading ${getViewTitle(view, index)}`)
+          ], headingTag)
+        : renderCustomView(page.id, view, index, readySources, units, cardTemplates, headingTag, routeParameter, queryContext);
+      if (pending && !isSelfBound) rendered.setAttribute('aria-busy', 'true');
       if (isPlainObject(view)) {
         const semantics = effectiveViewSemantics(view, queries);
         if (view.prompt === 'always' || (view.prompt !== 'none'
           && semantics.subject && semantics.objective && semantics.acceptance)) {
           const selectedSources = Object.fromEntries(getViewSources(view).flatMap((sourceName, sourceIndex) => {
-            const source = sources[resolveViewSourceName(sources, page.id, view, index, sourceName, sourceIndex)];
+            const source = viewSources[resolveViewSourceName(viewSources, page.id, view, index, sourceName, sourceIndex)];
             return source ? [[sourceName, source]] : [];
           }));
           const prompt = renderPromptPreviewAction(
@@ -846,18 +891,64 @@ function renderCustomPage(page, title, sources, units, dashboardDefaults, cardTe
       if (!isNavigationCompositeView && disclosure === 'essential') rendered.dataset.viewModeContent = viewModeForView(view);
       return rendered;
     };
-    const rendered = isRouteView
+    let rendered = isRouteView
+      || (binding && viewIsPending(binding.sources.get()))
       || index === 0
       || (isPlainObject(view) && (view.mark === 'callout' || (
         typeof view.element === 'string' && elementLoadsSourcesAsync(view.element)
       )))
-      ? render()
+      ? render(binding?.sources.get() ?? sources, viewIsPending(binding?.sources.get() ?? sources))
       : renderLazyView({
         label: getViewTitle(view, index),
         headingLevel: headingTag,
         minHeight: layout === 'half' || layout === 'third' ? 180 : 280,
-        render
+        render: () => {
+          const current = binding?.sources.get() ?? sources;
+          const next = render(current, viewIsPending(current));
+          if (disclosure !== 'supplemental') rendered = next;
+          return next;
+        }
       });
+    if (binding && viewSourceNames.length > 0 && !isSelfBound) {
+      let initial = true;
+      let previousSources = binding.sources.get();
+      let previousPending = viewIsPending(previousSources);
+      effect(() => {
+        const current = binding.sources.get();
+        const pending = viewIsPending(current);
+        if (initial) {
+          initial = false;
+          return;
+        }
+        const changed = previousPending !== pending || viewSourceNames.some((name, sourceIndex) => {
+          const resolved = resolveViewSourceName(current, page.id, view, index, name, sourceIndex);
+          return current[resolved] !== previousSources[resolved];
+        });
+        previousSources = current;
+        previousPending = pending;
+        const target = disclosure === 'supplemental'
+          ? rendered.querySelector(':scope > :not(summary)')
+          : rendered;
+        if (!(target instanceof HTMLElement) || !changed || target.hasAttribute('data-lazy-view')) return;
+        const replacement = render(current, pending);
+        for (const attribute of ['data-view-id', 'data-view-layout', 'data-disclosure', 'data-view-mode-content', 'data-view-lazy-list']) {
+          if (target.hasAttribute(attribute)) replacement.setAttribute(attribute, target.getAttribute(attribute) ?? '');
+        }
+        if (target.classList.contains('custom-view')) replacement.classList.add('custom-view');
+        const active = target.ownerDocument.activeElement;
+        const focusedId = active instanceof HTMLElement && target.contains(active) ? active.id : '';
+        if (target.parentNode) target.replaceWith(replacement);
+        if (disclosure !== 'supplemental') rendered = replacement;
+        if (focusedId) {
+          const focusTarget = [...replacement.querySelectorAll('[id]')].find((node) => node.id === focusedId);
+          if (focusTarget instanceof HTMLElement) focusTarget.focus({ preventScroll: true });
+        }
+        const owningPage = replacement.closest('.dashboard-page');
+        if (isRouteView && owningPage instanceof HTMLElement && routeParameter) {
+          dispatchPageRoute(replacement, routeParameter, owningPage.dataset.routeValue ?? '');
+        }
+      }, { signal: binding.signal });
+    }
     rendered.classList.add('custom-view');
     rendered.setAttribute('data-view-id', viewId || `view-${index + 1}`);
     rendered.setAttribute('data-view-layout', layout);
@@ -872,7 +963,8 @@ function renderCustomPage(page, title, sources, units, dashboardDefaults, cardTe
 
     rendered.classList.remove('custom-view');
     rendered.removeAttribute('data-view-layout');
-    return renderViewDisclosure(rendered, layout, disclosure, getViewTitle(view, index));
+    rendered = renderViewDisclosure(rendered, layout, disclosure, getViewTitle(view, index));
+    return rendered;
   });
   const renderedViewsById = new Map(views.map((view, index) => [
     isPlainObject(view) && typeof view.id === 'string' ? view.id : `view-${index + 1}`,
@@ -885,6 +977,21 @@ function renderCustomPage(page, title, sources, units, dashboardDefaults, cardTe
       ...sections.map((section) => renderLayoutSection(page.id, section, renderedViewsById, sources))
     )
     : h('div', { className: 'custom-view-grid' }, ...renderedViews);
+  if (binding) {
+    for (const section of sections) {
+      if (!section['count-source'] && !section['count-sources']?.length) continue;
+      const sectionRoot = [...renderedContent.querySelectorAll('[data-section-id]')]
+        .find((element) => element.getAttribute('data-section-id') === section.id);
+      if (!(sectionRoot instanceof HTMLElement) || !sectionRoot.classList.contains('layout-section')) continue;
+      let initial = true;
+      effect(() => {
+        const current = binding.sources.get();
+        if (initial) { initial = false; return; }
+        const oldChrome = sectionRoot.querySelector(':scope > :first-child');
+        if (oldChrome) oldChrome.replaceWith(renderLayoutSectionChrome(page.id, section, layoutSectionCount(section, current)));
+      }, { signal: binding.signal });
+    }
+  }
   const routeTabs = routeParameter ? declaredRouteTabs(page.route) : null;
   const renderedRouteTabs = routeTabs && routeParameter
     ? renderDeclaredRouteTabs({
@@ -1066,23 +1173,7 @@ function renderHiddenDataStateMetrics(effectiveState) {
  */
 function renderLayoutSection(pageId, section, renderedViews, sources) {
   const headingId = `${pageId}-${section.id}-layout-heading`;
-  const countSourceNames = Array.isArray(section['count-sources'])
-    ? section['count-sources']
-    : section['count-source'] ? [section['count-source']] : [];
-  const countField = typeof section['count-field'] === 'string' ? section['count-field'] : null;
-  const countSources = countSourceNames.map((sourceName) => sources[sourceName]).filter(Boolean);
-  const countValues = countField
-    ? countSources.flatMap((source) => {
-        if (source.metadata?.availability === 'unavailable') return [];
-        const value = Number(source.rows?.[0]?.[countField]);
-        return Number.isFinite(value) ? [value] : [];
-      })
-    : [];
-  const count = countField
-    ? countValues.length > 0 ? countValues.reduce((total, value) => total + value, 0) : null
-    : countSources.length === 1 && Array.isArray(countSources[0]?.rows)
-      ? countSources[0].rows.length
-      : null;
+  const count = layoutSectionCount(section, sources);
   const sectionViews = section.views.map((viewId) => renderedViews.get(viewId)
     ?? renderEmptyMessage(`View unavailable: ${viewId}`, { 'data-missing-view-id': viewId }));
   if (sectionViews.length === 1 && sectionViews[0].classList.contains('dashboard-callout')) {
@@ -1108,6 +1199,27 @@ function renderLayoutSection(pageId, section, renderedViews, sources) {
   );
 }
 
+/** @param {PresentablePageSection} section @param {Record<string, LogicalSourceInput>} sources */
+function layoutSectionCount(section, sources) {
+  const countSourceNames = Array.isArray(section['count-sources'])
+    ? section['count-sources']
+    : section['count-source'] ? [section['count-source']] : [];
+  const countField = typeof section['count-field'] === 'string' ? section['count-field'] : null;
+  const countSources = countSourceNames.map((sourceName) => sources[sourceName]).filter(Boolean);
+  const countValues = countField
+    ? countSources.flatMap((source) => {
+        if (source.metadata?.availability === 'unavailable') return [];
+        const value = Number(source.rows?.[0]?.[countField]);
+        return Number.isFinite(value) ? [value] : [];
+      })
+    : [];
+  return countField
+    ? countValues.length > 0 ? countValues.reduce((total, value) => total + value, 0) : null
+    : countSources.length === 1 && Array.isArray(countSources[0]?.rows)
+      ? countSources[0].rows.length
+      : null;
+}
+
 /**
  * Shows a single dashboard page and keeps sidebar state synchronized with the URL hash.
  * @param {HTMLElement} root
@@ -2176,6 +2288,16 @@ function renderElementView(pageId, title, view, viewIndex, sources, contextDetai
       ? [[sourceName, source]]
       : [];
   }));
+  const hashParameters = new URLSearchParams(globalThis.location?.hash.split('?')[1] ?? '');
+  const declaredParameters = [
+    routeParameter,
+    ...(Array.isArray(viewData?.arguments) ? viewData.arguments.flatMap((argument) => (
+      isPlainObject(argument) && typeof argument.name === 'string' ? [argument.name] : []
+    )) : [])
+  ].filter((parameter) => typeof parameter === 'string');
+  const routeParameters = Object.fromEntries(declaredParameters.flatMap((parameter) => (
+    hashParameters.has(parameter) ? [[parameter, hashParameters.get(parameter) ?? '']] : []
+  )));
 
   if (sourceNames.length === 1) {
     const sourceName = sourceNames[0];
@@ -2208,6 +2330,7 @@ function renderElementView(pageId, title, view, viewIndex, sources, contextDetai
     time: isPlainObject(viewData?.time) ? viewData.time : undefined,
     titleLink: isPlainObject(view['title-link']) ? view['title-link'] : undefined,
     routeParameter,
+    routeParameters,
     queryContext,
     viewId: typeof view.id === 'string' ? view.id : undefined,
     viewIndex,