@anthusai/papyrus 2.0.0-next.2 → 2.0.0-next.21

package/components/markus-ir-preview.tsx

@@ -1,4 +1,6 @@
-import type { ReactNode } from "react";
+import type { MouseEvent as ReactMouseEvent, ReactNode } from "react";
+import { CITATION_TOKEN, planPreview, selectionToSource, splitByMarks, type BlockAnnotation, type PreviewMark, type PreviewPlan } from "../lib/editorial-preview";
+import type { EditorialCheckResult, EditorialFinding, Span } from "../lib/editorial-checks";
 import {
   parseMarkusDocument,
   type MarkusBlock,
@@ -17,7 +19,20 @@ type PreviewSidecar = {
   bibliography: string[];
 };
 
+/** Editorial findings drawn on the preview (see lib/editorial-preview.ts). */
+export type PreviewEditorial = {
+  /** A check result computed for the same body the preview shows, and the findings to draw from it. */
+  result: EditorialCheckResult;
+  findings: EditorialFinding[];
+  activeFindingIds?: readonly string[];
+  /** A marked passage was clicked. */
+  onOpenMark: (findingIds: string[], anchor: HTMLElement) => void;
+  /** Text was selected inside one prose block: the source span of the sentences it touches. */
+  onSelectSource?: (source: Span, anchor: DOMRect) => void;
+};
+
 type PreviewContext = {
+  editorial?: PreviewEditorial & { plan: PreviewPlan; blocks: Map<string, BlockAnnotation> };
   sidecar: PreviewSidecar;
   citationNumbers: Map<string, number>;
   imageUrls: Record<string, string>;
@@ -91,7 +106,7 @@ function renderText(text: string, context: PreviewContext): ReactNode {
     if (!keys) continue;
     if (index > cursor) parts.push(text.slice(cursor, index));
     parts.push(
-      <sup className="text-primary" key={`${index}-${token}`}>
+      <sup className="text-primary" data-editorial-skip key={`${index}-${token}`}>
         {keys.map((key) => `[${context.citationNumbers.get(key)}]`).join("")}
       </sup>,
     );
@@ -127,7 +142,7 @@ function renderInlines(inlines: MarkusInline[], context: PreviewContext): ReactN
       }
       case "image":
         return (
-          <span className="rounded border border-dashed border-border px-1 text-xs text-muted-foreground" key={index}>
+          <span className="rounded border border-dashed border-border px-1 text-xs text-muted-foreground" data-editorial-skip key={index}>
             {`Image: ${node.src ?? ""} (${node.alt})`}
           </span>
         );
@@ -141,6 +156,92 @@ function renderInlines(inlines: MarkusInline[], context: PreviewContext): ReactN
   });
 }
 
+const MARK_CLASSES: Record<PreviewMark["severity"], string> = {
+  error: "decoration-destructive",
+  warn: "decoration-amber-500",
+  info: "decoration-sky-500",
+};
+
+function markElement(text: string, mark: PreviewMark, key: string, context: PreviewContext): ReactNode {
+  const active = mark.findingIds.some((id) => context.editorial?.activeFindingIds?.includes(id));
+  return (
+    <mark
+      className={`cursor-pointer bg-transparent text-inherit underline underline-offset-4 ${mark.status === "review" ? "decoration-dotted" : "decoration-wavy"} ${MARK_CLASSES[mark.severity]} ${active ? "rounded-sm bg-ring/25" : ""}`}
+      data-editorial-mark={mark.findingIds.join(" ")}
+      key={key}
+      onClick={(event) => {
+        event.preventDefault();
+        context.editorial?.onOpenMark(mark.findingIds, event.currentTarget);
+      }}
+    >
+      {text}
+    </mark>
+  );
+}
+
+/** Like renderInlines, but splits rendered text at editorial marks (offsets as in inlineLeaves). */
+function renderMarkedInlines(inlines: MarkusInline[], context: PreviewContext, marks: PreviewMark[], cursor: { at: number }): ReactNode[] {
+  const marked = (text: string, keyPrefix: string): ReactNode[] => {
+    const start = cursor.at;
+    cursor.at += text.length;
+    return splitByMarks(start, start + text.length, marks).map((piece, pieceIndex) => {
+      const slice = text.slice(piece.start - start, piece.end - start);
+      return piece.mark ? markElement(slice, piece.mark, `${keyPrefix}-${pieceIndex}`, context) : slice;
+    });
+  };
+  return inlines.map((node, index) => {
+    switch (node.type) {
+      case "text": {
+        const parts: ReactNode[] = [];
+        let last = 0;
+        for (const match of node.text.matchAll(CITATION_TOKEN)) {
+          const at = match.index ?? 0;
+          if (at > last) parts.push(...marked(node.text.slice(last, at), `${index}-${last}`));
+          parts.push(<span key={`${index}-t${at}`}>{renderText(match[0], context)}</span>);
+          last = at + match[0].length;
+        }
+        if (last < node.text.length) parts.push(...marked(node.text.slice(last), `${index}-${last}`));
+        return <span key={index}>{parts}</span>;
+      }
+      case "emphasis":
+        return <em key={index}>{renderMarkedInlines(node.children, context, marks, cursor)}</em>;
+      case "strong":
+        return <strong key={index}>{renderMarkedInlines(node.children, context, marks, cursor)}</strong>;
+      case "strikethrough":
+        return <s key={index}>{renderMarkedInlines(node.children, context, marks, cursor)}</s>;
+      case "code_span":
+        return <code className="rounded bg-muted px-1 py-0.5 font-mono text-[0.85em]" key={index}>{marked(node.code, `${index}`)}</code>;
+      case "link": {
+        const children = renderMarkedInlines(node.children, context, marks, cursor);
+        const custom = node.href ? context.renderLink?.(node.href, children) : null;
+        if (custom) return <span key={index}>{custom}</span>;
+        return node.href ? (
+          <a className="text-primary underline" href={node.href} key={index} rel="noopener noreferrer" target="_blank">{children}</a>
+        ) : (
+          <span key={index}>{children}</span>
+        );
+      }
+      case "soft_break":
+        cursor.at += 1;
+        return <span key={index}>{" "}</span>;
+      case "hard_break":
+        cursor.at += 1;
+        return <br key={index} />;
+      default:
+        return renderInlines([node], context)[0];
+    }
+  });
+}
+
+/** Render a prose block's inlines, with editorial marks when the block has an annotation. */
+function proseInlines(block: { inline: MarkusInline[] }, context: PreviewContext): { children: ReactNode[]; blockKey?: string } {
+  const annotation = context.editorial?.plan.get(block);
+  if (!context.editorial || !annotation) return { children: renderInlines(block.inline, context) };
+  const blockKey = String(context.editorial.blocks.size);
+  context.editorial.blocks.set(blockKey, annotation);
+  return { children: renderMarkedInlines(block.inline, context, annotation.marks, { at: 0 }), blockKey };
+}
+
 function soleToken(inlines: MarkusInline[]): string | null {
   if (inlines.length !== 1 || inlines[0].type !== "text") return null;
   const text = inlines[0].text.trim();
@@ -170,12 +271,14 @@ function renderBlock(block: MarkusBlock, index: number, context: PreviewContext)
           </ol>
         );
       }
-      return <p className="my-3 leading-relaxed" key={index}>{renderInlines(block.inline, context)}</p>;
+      const prose = proseInlines(block, context);
+      return <p className="my-3 leading-relaxed" data-editorial-block={prose.blockKey} key={index}>{prose.children}</p>;
     }
     case "heading": {
       const level = Math.min(Math.max(block.level, 1), 6);
       const Tag = `h${level}` as "h1";
-      return <Tag className={HEADING_CLASSES[level - 1]} key={index}>{renderInlines(block.inline, context)}</Tag>;
+      const prose = proseInlines(block, context);
+      return <Tag className={HEADING_CLASSES[level - 1]} data-editorial-block={prose.blockKey} key={index}>{prose.children}</Tag>;
     }
     case "list": {
       const items = block.items.map((item, itemIndex) => (
@@ -310,12 +413,45 @@ function renderBlocks(nodes: MarkusNode[], context: PreviewContext): ReactNode[]
   );
 }
 
+/** Characters of rendered text from the start of `block` to (node, offset), skipping citation and image furniture. */
+function renderedOffset(block: HTMLElement, node: Node, offset: number): number {
+  const walker = document.createTreeWalker(block, NodeFilter.SHOW_TEXT);
+  let total = 0;
+  for (let current = walker.nextNode(); current; current = walker.nextNode()) {
+    const skipped = current.parentElement?.closest("[data-editorial-skip]");
+    if (current === node) return total + (skipped ? 0 : offset);
+    if (!skipped) total += current.textContent?.length ?? 0;
+  }
+  return total;
+}
+
+function previewSelectionHandler(context: PreviewContext) {
+  return (event: ReactMouseEvent<HTMLDivElement>) => {
+    const editorial = context.editorial;
+    if (!editorial?.onSelectSource) return;
+    const selection = window.getSelection();
+    if (!selection || selection.isCollapsed || selection.rangeCount === 0) return;
+    const range = selection.getRangeAt(0);
+    const startBlock = (range.startContainer.parentElement ?? null)?.closest<HTMLElement>("[data-editorial-block]");
+    const endBlock = (range.endContainer.parentElement ?? null)?.closest<HTMLElement>("[data-editorial-block]");
+    if (!startBlock || startBlock !== endBlock || !event.currentTarget.contains(startBlock)) return;
+    const annotation = editorial.blocks.get(startBlock.dataset.editorialBlock ?? "");
+    const source = selectionToSource(annotation, {
+      start: renderedOffset(startBlock, range.startContainer, range.startOffset),
+      end: renderedOffset(startBlock, range.endContainer, range.endOffset),
+    });
+    if (source) editorial.onSelectSource(source, range.getBoundingClientRect());
+  };
+}
+
 export function MarkusIrPreview({
   bodyIr,
   imageUrls = {},
   dynamicDirectives = {},
   renderLink,
+  editorial,
 }: {
+  editorial?: PreviewEditorial;
   bodyIr: unknown;
   imageUrls?: Record<string, string>;
   /** Live components for leaf directives whose content the host app computes, keyed by directive name. */
@@ -333,8 +469,13 @@ export function MarkusIrPreview({
       imageUrls,
       dynamicDirectives,
       renderLink,
+      editorial: editorial ? { ...editorial, plan: planPreview(document, editorial.result, editorial.findings), blocks: new Map() } : undefined,
     };
-    return <div data-markus-preview>{renderBlocks(document.children, context)}</div>;
+    return (
+      <div data-markus-preview onMouseUp={editorial?.onSelectSource ? previewSelectionHandler(context) : undefined}>
+        {renderBlocks(document.children, context)}
+      </div>
+    );
   } catch (error) {
     return (
       <p className="rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive" data-markus-preview-error role="alert">

package/components/monitoring-overview-view.tsx

@@ -0,0 +1,240 @@
+import Link from "next/link";
+import {
+  confidenceText,
+  describeDelivery,
+  describeRelevance,
+  everyText,
+  formatUtc,
+  referenceHref,
+  routingLabel,
+  usageText,
+  type MonitoringItem,
+  type MonitoringOverview,
+  type MonitoringRelevance,
+  type MonitoringResult,
+} from "../lib/monitoring-overview";
+
+export type MonitoringMode = "publication" | "all";
+
+const STATUS_WORDS: Record<string, string> = { complete: "Complete", partial: "Partial", stopped: "Stopped", failed: "Failed", error: "Error" };
+const status = (value: string) => STATUS_WORDS[value] ?? value;
+const STOP_WORDS: Record<string, string> = {
+  request_ceiling_reached: "stopped at the request ceiling",
+  standing_capacity_reached: "stopped: the standing run is full",
+  provider_key_unavailable: "stopped: the Cyclotron has no model key",
+  run_busy: "stopped: the Cyclotron run was busy",
+  time_budget: "stopped for time",
+};
+const MARKS: Record<string, string> = { delivered: "✓", failed: "✕", pending: "…", not_applicable: "–" };
+
+function feedHost(url: string | null): string {
+  try {
+    return url ? new URL(url).host : "unknown source";
+  } catch {
+    return "unknown source";
+  }
+}
+
+function Message({ title, children, kind }: { title: string; children?: React.ReactNode; kind: string }) {
+  return (
+    <div className="category-steering-empty" role={kind === "loading" ? "status" : "alert"} data-monitoring-state={kind}>
+      <strong>{title}</strong>
+      {children ? <p>{children}</p> : null}
+    </div>
+  );
+}
+
+function RelevanceLine({ entry, linkable, demo }: { entry: MonitoringRelevance; linkable: boolean; demo: boolean }) {
+  const lineage = entry.delivery.referenceLineageId ?? entry.delivery.referenceId ?? null;
+  const delivery = describeDelivery(entry);
+  return (
+    <li data-relevance={entry.relevant === null ? "unknown" : entry.relevant ? "yes" : "no"} data-delivery={entry.delivery.state ?? "none"}>
+      <strong>{entry.publicationId}</strong>
+      <span>{describeRelevance(entry)}{entry.relevant !== null ? `, ${confidenceText(entry.confidence)}` : ""}</span>
+      {delivery ? (
+        <span>
+          <span aria-hidden="true">{MARKS[entry.delivery.state ?? ""] ?? ""} </span>
+          {delivery}
+          {entry.delivery.state === "delivered" && lineage && linkable ? (
+            <> <Link href={referenceHref(lineage, demo)} data-monitoring-reference-link>Open in References</Link></>
+          ) : null}
+          {entry.delivery.state === "failed" && entry.delivery.error ? <> ({entry.delivery.error})</> : null}
+        </span>
+      ) : null}
+    </li>
+  );
+}
+
+function QueueItem({ item, ownId, demo }: { item: MonitoringItem; ownId: string | null; demo: boolean }) {
+  return (
+    <li data-monitoring-item={item.sourceId} data-routing={item.routing}>
+      <div>
+        <strong>{item.url ? <a href={item.url} target="_blank" rel="noreferrer noopener">{item.title}</a> : item.title}</strong>
+        <span>
+          {formatUtc(item.observedAt)}
+          {item.discussionUrl ? <> &middot; <a href={item.discussionUrl} target="_blank" rel="noreferrer noopener">Hacker News thread</a></> : null}
+        </span>
+      </div>
+      <p className="news-desk-monitoring__routing">
+        {routingLabel(item.routing)}
+        {item.routingNote ? <>: {item.routingNote}</> : null}
+      </p>
+      {item.relevance.length ? (
+        <ul className="news-desk-monitoring__relevance">
+          {item.relevance.map((entry) => <RelevanceLine key={entry.publicationId} entry={entry} linkable={entry.publicationId === ownId} demo={demo} />)}
+        </ul>
+      ) : null}
+    </li>
+  );
+}
+
+function Ready({ data, demo }: { data: MonitoringOverview; demo: boolean }) {
+  const ceilings = data.usage?.ceilings ?? null;
+  const router = data.router;
+  return (
+    <>
+      {data.notice === "publication_not_routed" ? (
+        <p className="news-desk-delegation-note" data-monitoring-notice>This publication is not one of the router&apos;s outputs, so no relevance is shown for it here.</p>
+      ) : null}
+
+      <article className="news-desk-doctrine-card" data-monitoring-section="router">
+        <div className="news-desk-doctrine-card__header"><div><h3>Router</h3><span>Sends collected items to the shared Cyclotron and delivers relevant ones to References</span></div></div>
+        {router ? (
+          <p data-monitoring-router>
+            <strong>{router.mode === "live" ? "Live" : "Dry run"}</strong>
+            {router.mode === "live" ? " · decisions are made and delivered" : " · requests are checked but nothing is sent"}
+            {" · "}{router.feedback ? "Feedback on" : "Feedback off"}
+            {router.enabled ? "" : " · Paused"}
+          </p>
+        ) : <p>The router has not been configured.</p>}
+      </article>
+
+      <article className="news-desk-doctrine-card" data-monitoring-section="usage">
+        <div className="news-desk-doctrine-card__header"><div><h3>Usage</h3><span>Decisions the router recorded, against the shared Cyclotron&apos;s ceilings (UTC days)</span></div></div>
+        {data.usage ? (
+          <>
+            <dl className="news-desk-monitoring__usage">
+              <div><dt>Decisions today ({data.usage.day})</dt><dd>{usageText(data.usage.decisionsToday, ceilings?.decisionsPerDay)}</dd></div>
+              <div><dt>Decisions in total</dt><dd>{usageText(data.usage.decisionsTotal, ceilings?.decisionsTotal)}</dd></div>
+              {ceilings?.items !== undefined ? <div><dt>Items judged (ceiling)</dt><dd>{usageText(data.usage.decisionsTotal, ceilings.items)}</dd></div> : null}
+            </dl>
+            {ceilings === null ? <p className="news-desk-delegation-note">No ceilings are configured here, so only usage is shown.</p> : null}
+          </>
+        ) : <p>No usage recorded yet.</p>}
+      </article>
+
+      <article className="news-desk-doctrine-card" data-monitoring-section="feeds">
+        <div className="news-desk-doctrine-card__header"><div><h3>Feeds watched</h3><span>What the collector reads</span></div></div>
+        {data.feeds.length ? (
+          <ul className="news-desk-monitoring__list">
+            {data.feeds.map((feed) => (
+              <li key={feed.id} data-monitoring-feed={feed.id}>
+                <div>
+                  <strong>{feed.id}</strong>
+                  <span>{feedHost(feed.sourceUrl)}</span>
+                </div>
+                <span>{feed.enabled ? "Enabled" : "Disabled"} &middot; {everyText(feed.intervalSeconds)}{feed.limit ? ` · up to ${feed.limit} items` : ""}</span>
+                <span>Last run {formatUtc(feed.lastFinishedAt)}{feed.lastStatus ? ` (${status(feed.lastStatus)})` : ""} &middot; next {formatUtc(feed.nextDueAt)}</span>
+              </li>
+            ))}
+          </ul>
+        ) : <p>No feed is configured.</p>}
+      </article>
+
+      <article className="news-desk-doctrine-card" data-monitoring-section="runs">
+        <div className="news-desk-doctrine-card__header"><div><h3>Recent runs</h3><span>Collector receipts, newest first</span></div></div>
+        {data.runs.length ? (
+          <ul className="news-desk-monitoring__list">
+            {data.runs.map((run) => (
+              <li key={run.runId} data-monitoring-run={run.runId}>
+                <strong>{formatUtc(run.startedAt)}</strong>
+                <span>{status(run.status)}</span>
+                <span>{run.new} new &middot; {run.revised} revised &middot; {run.unchanged} unchanged &middot; {run.errorCount} {run.errorCount === 1 ? "error" : "errors"}{run.errors.length ? ` (${run.errors.join("; ")})` : ""}</span>
+              </li>
+            ))}
+          </ul>
+        ) : <p>No collector runs recorded yet.</p>}
+        {data.routerRuns.length ? (
+          <ul className="news-desk-monitoring__list" data-monitoring-router-runs>
+            {data.routerRuns.map((run) => (
+              <li key={run.runId} data-monitoring-router-run={run.runId}>
+                <strong>{formatUtc(run.startedAt)}</strong>
+                <span>Router, {run.mode === "live" ? "live" : "dry run"}: {status(run.status)}{run.stoppedBy ? `, ${STOP_WORDS[run.stoppedBy] ?? run.stoppedBy}` : ""}</span>
+                <span>{run.counts.examined ?? 0} examined &middot; {run.counts.decided ?? 0} judged &middot; {run.counts.delivered ?? 0} delivered &middot; {run.counts.deliveryFailed ?? 0} {(run.counts.deliveryFailed ?? 0) === 1 ? "delivery failure" : "delivery failures"} &middot; {run.errorCount} {run.errorCount === 1 ? "error" : "errors"}</span>
+              </li>
+            ))}
+          </ul>
+        ) : null}
+      </article>
+
+      <article className="news-desk-doctrine-card" data-monitoring-section="queue">
+        <div className="news-desk-doctrine-card__header"><div><h3>Collected queue</h3><span>Newest first, with what the shared Cyclotron decided</span></div></div>
+        {data.items.length ? (
+          <ul className="news-desk-monitoring__queue">
+            {data.items.map((item) => <QueueItem key={`${item.sourceId}-${item.revision}`} item={item} ownId={data.scope.publicationId} demo={demo} />)}
+          </ul>
+        ) : <p>No items in the queue.</p>}
+        {data.hiddenNotRelevant > 0 ? (
+          <p className="news-desk-delegation-note" data-monitoring-hidden>
+            {data.hiddenNotRelevant} {data.hiddenNotRelevant === 1 ? "item" : "items"} judged not relevant to this publication {data.hiddenNotRelevant === 1 ? "is" : "are"} not listed.
+          </p>
+        ) : null}
+      </article>
+    </>
+  );
+}
+
+/** Presentation only: the panel fetches, this renders any result, so every state is testable from fixtures. */
+export function MonitoringOverviewView({
+  result,
+  canViewAll,
+  mode,
+  onModeChange,
+  demo = false,
+}: {
+  result: MonitoringResult | null;
+  canViewAll: boolean;
+  mode: MonitoringMode;
+  onModeChange: (mode: MonitoringMode) => void;
+  demo?: boolean;
+}) {
+  let body: React.ReactNode;
+  if (result === null) {
+    body = <Message kind="loading" title="Loading monitoring" />;
+  } else if ("error" in result) {
+    body = result.error === "forbidden"
+      ? <Message kind="forbidden" title="Monitoring is for editors and admins">Your account does not have access to this page. Ask an admin for the editor role.</Message>
+      : <Message kind="error" title="Monitoring could not be read">The request was not understood. Reload the page.</Message>;
+  } else if (result.state === "not_configured") {
+    body = <Message kind="not-configured" title="Monitoring is not set up for this publication">The monitoring pipeline is not connected to this site&apos;s account, so there is nothing to show.</Message>;
+  } else if (result.state === "unavailable") {
+    body = <Message kind="unavailable" title="Monitoring could not be read right now">The pipeline is not affected. Try again in a minute.</Message>;
+  } else if (result.state === "empty") {
+    body = <Message kind="empty" title="Nothing has been collected yet">No feed is configured and no run has been recorded. Items appear here after the collector&apos;s first run.</Message>;
+  } else {
+    body = <Ready data={result} demo={demo} />;
+  }
+  const scopeLine = result && "scope" in result
+    ? (result.scope.mode === "all" ? "Showing the whole shared pipeline, every publication." : `Showing what is relevant to ${result.scope.publicationId ?? "this publication"}.`)
+    : null;
+  return (
+    <div data-news-desk-admin-panel="monitoring">
+      <article className="news-desk-doctrine-card">
+        <div className="news-desk-doctrine-card__header">
+          <div>
+            <h3>Monitoring</h3>
+            <span>The automated research pipeline: collection, judging and delivery to References. Read only.</span>
+          </div>
+        </div>
+        {canViewAll ? (
+          <div className="news-desk-monitoring__scope" role="group" aria-label="Scope">
+            <button type="button" aria-pressed={mode === "publication"} data-monitoring-scope="publication" onClick={() => onModeChange("publication")}>This publication</button>
+            <button type="button" aria-pressed={mode === "all"} data-monitoring-scope="all" onClick={() => onModeChange("all")}>Whole shared pipeline</button>
+          </div>
+        ) : null}
+        {scopeLine ? <p className="news-desk-delegation-note" data-monitoring-scope-line>{scopeLine} {result && "asOf" in result ? `As of ${formatUtc(result.asOf)}.` : ""}</p> : null}
+      </article>
+      {body}
+    </div>
+  );
+}

package/components/monitoring-panel.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { loadMonitoringOverview } from "../lib/monitoring-client";
+import { FIXTURE_ALL_PIPELINE_OVERVIEW, FIXTURE_MONITORING_OVERVIEW } from "../lib/monitoring-overview-fixture";
+import type { MonitoringResult } from "../lib/monitoring-overview";
+import { MonitoringOverviewView, type MonitoringMode } from "./monitoring-overview-view";
+
+const REFRESH_MILLISECONDS = 60_000;
+
+/** Administration, Monitoring: loads the overview, refreshes it each minute, and lets an admin widen it to the whole pipeline. */
+export function MonitoringPanel({ isAdmin, isDemo }: { isAdmin: boolean; isDemo: boolean }) {
+  const [mode, setMode] = useState<MonitoringMode>("publication");
+  const [result, setResult] = useState<MonitoringResult | null>(null);
+
+  useEffect(() => {
+    if (isDemo) {
+      setResult(mode === "all" ? FIXTURE_ALL_PIPELINE_OVERVIEW : FIXTURE_MONITORING_OVERVIEW);
+      return;
+    }
+    let live = true;
+    const refresh = async () => {
+      try {
+        const next = await loadMonitoringOverview(mode);
+        if (live) setResult(next);
+      } catch {
+        if (live) setResult({ state: "unavailable" });
+      }
+    };
+    setResult(null);
+    void refresh();
+    const timer = window.setInterval(() => void refresh(), REFRESH_MILLISECONDS);
+    return () => {
+      live = false;
+      window.clearInterval(timer);
+    };
+  }, [mode, isDemo]);
+
+  return <MonitoringOverviewView result={result} canViewAll={isAdmin} mode={mode} onModeChange={setMode} demo={isDemo} />;
+}