@anthusai/papyrus 2.0.0-next.11 → 2.0.0-next.110

package/app/api/newsletter/unsubscribe/route.ts

@@ -0,0 +1,13 @@
+import type { NextRequest } from "next/server";
+import { handleNewsletterUnsubscribe } from "../../../../lib/newsletter-api";
+
+export const dynamic = "force-dynamic";
+export const runtime = "nodejs";
+
+export function GET(request: NextRequest) {
+  return handleNewsletterUnsubscribe(request);
+}
+
+export function POST(request: NextRequest) {
+  return handleNewsletterUnsubscribe(request);
+}

package/app/api/newsroom/chat/[...path]/route.ts

@@ -0,0 +1,17 @@
+import type { NextRequest } from "next/server";
+import { handlePapyrusHostedChatRequest } from "../../../../../lib/papyrus-hosted-chat";
+
+export const dynamic = "force-dynamic";
+export const runtime = "nodejs";
+
+type RouteContext = { params: Promise<{ path: string[] }> };
+
+export async function GET(request: NextRequest, context: RouteContext) {
+  const { path } = await context.params;
+  return handlePapyrusHostedChatRequest(request, path);
+}
+
+export async function POST(request: NextRequest, context: RouteContext) {
+  const { path } = await context.params;
+  return handlePapyrusHostedChatRequest(request, path);
+}

package/app/api/newsroom/curation/context/route.ts

@@ -0,0 +1,9 @@
+import type { NextRequest } from "next/server";
+import { handleCurationRoute } from "../../../../../lib/curation-routes";
+
+export const dynamic = "force-dynamic";
+export const runtime = "nodejs";
+
+export function GET(request: NextRequest) {
+  return handleCurationRoute(request, "context");
+}

package/app/api/newsroom/curation/priming/route.ts

@@ -0,0 +1,9 @@
+import type { NextRequest } from "next/server";
+import { handleCurationRoute } from "../../../../../lib/curation-routes";
+
+export const dynamic = "force-dynamic";
+export const runtime = "nodejs";
+
+export function POST(request: NextRequest) {
+  return handleCurationRoute(request, "priming");
+}

package/app/api/newsroom/curation/publication/route.ts

@@ -0,0 +1,9 @@
+import type { NextRequest } from "next/server";
+import { handleCurationRoute } from "../../../../../lib/curation-routes";
+
+export const dynamic = "force-dynamic";
+export const runtime = "nodejs";
+
+export function POST(request: NextRequest) {
+  return handleCurationRoute(request, "publication");
+}

package/app/api/reader/comment/delete/route.ts

@@ -0,0 +1,9 @@
+import type { NextRequest } from "next/server";
+import { handleReaderRequest } from "../../../../../lib/reader-api";
+
+export const dynamic = "force-dynamic";
+export const runtime = "nodejs";
+
+export function POST(request: NextRequest) {
+  return handleReaderRequest(request, "comment-delete");
+}

package/app/api/reader/comment/edit/route.ts

@@ -0,0 +1,9 @@
+import type { NextRequest } from "next/server";
+import { handleReaderRequest } from "../../../../../lib/reader-api";
+
+export const dynamic = "force-dynamic";
+export const runtime = "nodejs";
+
+export function POST(request: NextRequest) {
+  return handleReaderRequest(request, "comment-edit");
+}

package/app/api/reader/comment/route.ts

@@ -0,0 +1,9 @@
+import type { NextRequest } from "next/server";
+import { handleReaderRequest } from "../../../../lib/reader-api";
+
+export const dynamic = "force-dynamic";
+export const runtime = "nodejs";
+
+export function POST(request: NextRequest) {
+  return handleReaderRequest(request, "comment");
+}

package/app/api/reader/flag/route.ts

@@ -0,0 +1,9 @@
+import type { NextRequest } from "next/server";
+import { handleReaderRequest } from "../../../../lib/reader-api";
+
+export const dynamic = "force-dynamic";
+export const runtime = "nodejs";
+
+export function POST(request: NextRequest) {
+  return handleReaderRequest(request, "flag");
+}

package/app/api/reader/handle/route.ts

@@ -0,0 +1,9 @@
+import type { NextRequest } from "next/server";
+import { handleReaderRequest } from "../../../../lib/reader-api";
+
+export const dynamic = "force-dynamic";
+export const runtime = "nodejs";
+
+export function POST(request: NextRequest) {
+  return handleReaderRequest(request, "handle");
+}

package/app/api/reader/me/route.ts

@@ -0,0 +1,9 @@
+import type { NextRequest } from "next/server";
+import { handleReaderRequest } from "../../../../lib/reader-api";
+
+export const dynamic = "force-dynamic";
+export const runtime = "nodejs";
+
+export function GET(request: NextRequest) {
+  return handleReaderRequest(request, "me");
+}

package/app/api/reader/rating/route.ts

@@ -0,0 +1,9 @@
+import type { NextRequest } from "next/server";
+import { handleReaderRequest } from "../../../../lib/reader-api";
+
+export const dynamic = "force-dynamic";
+export const runtime = "nodejs";
+
+export function POST(request: NextRequest) {
+  return handleReaderRequest(request, "rating");
+}

package/app/api/reader/report/route.ts

@@ -0,0 +1,9 @@
+import type { NextRequest } from "next/server";
+import { handleReaderRequest } from "../../../../lib/reader-api";
+
+export const dynamic = "force-dynamic";
+export const runtime = "nodejs";
+
+export function POST(request: NextRequest) {
+  return handleReaderRequest(request, "report");
+}

package/app/api/reader/retired/route.ts

@@ -0,0 +1,9 @@
+import type { NextRequest } from "next/server";
+import { handleReaderRetiredSubjects } from "../../../../lib/reader-retirement-route";
+
+export const dynamic = "force-dynamic";
+export const runtime = "nodejs";
+
+export function GET(request: NextRequest) {
+  return handleReaderRetiredSubjects(request);
+}

package/app/api/reader/submit/route.ts

@@ -0,0 +1,9 @@
+import type { NextRequest } from "next/server";
+import { handleReaderRequest } from "../../../../lib/reader-api";
+
+export const dynamic = "force-dynamic";
+export const runtime = "nodejs";
+
+export function POST(request: NextRequest) {
+  return handleReaderRequest(request, "submit");
+}

package/app/api/reader/vote/route.ts

@@ -0,0 +1,9 @@
+import type { NextRequest } from "next/server";
+import { handleReaderRequest } from "../../../../lib/reader-api";
+
+export const dynamic = "force-dynamic";
+export const runtime = "nodejs";
+
+export function POST(request: NextRequest) {
+  return handleReaderRequest(request, "vote");
+}

package/app/layout.tsx

@@ -1,3 +1,5 @@
+import "chatticus/chat.css";
+import "../components/papyrus-console-conversation.css";
 import type { Metadata } from "next";
 import { Playfair_Display, Plus_Jakarta_Sans } from "next/font/google";
 import Script from "next/script";
@@ -152,7 +154,9 @@ export default async function RootLayout({ children }: Readonly<{ children: Reac
         {showStagingBanner() ? <StagingBanner /> : null}
         <AmplifyClientProvider>
           <TooltipProvider>
-            <PapyrusConsoleShell>{children}</PapyrusConsoleShell>
+            <PapyrusConsoleShell privateChatEnabled={process.env.PAPYRUS_PRIVATE_CHAT_ENABLED === "true"}>
+              {children}
+            </PapyrusConsoleShell>
           </TooltipProvider>
         </AmplifyClientProvider>
       </body>

package/bin/papyrus-infra.mjs

@@ -19,6 +19,7 @@ const USAGE = [
   "       papyrus-infra synth --account-stack github-oidc [--out cdk.out] [--account A] [--region R]",
   "       papyrus-infra print-buildspec --site infra/site.json --app cms-production|cms-staging|reader",
   "       papyrus-infra deploy-edge --stack NAME --template FILE [--adoption-template FILE --adopt-resources FILE] [--parameter KEY=VALUE]... [--delete-function NAME] [--only-branch main] [--only-app-id ID] [--region R]",
+  "       papyrus-infra compile-edge-function --static-dir web [--out FILE]",
   "       papyrus-infra deploy --site infra/site.json [--only-branch main] [--only-app-id ID] [--out cdk.out] [--account A] [--region R]",
 ].join("\n");
 
@@ -36,11 +37,29 @@ const resolveEnvironmentOrExit = () => {
   }
 };
 const command = args[0];
-if (command !== "synth" && command !== "print-buildspec" && command !== "deploy" && command !== "deploy-edge") {
+if (command !== "synth" && command !== "print-buildspec" && command !== "deploy" && command !== "deploy-edge" && command !== "compile-edge-function") {
   console.error(USAGE);
   process.exit(command ? 1 : 0);
 }
 
+if (command === "compile-edge-function") {
+  // The viewer-request CloudFront Function with the site's projection.json rules compiled in: for an edge stack that is
+  // not deployed by the CMS backend, so that no site writes its own redirect function.
+  const staticDir = opt("static-dir");
+  if (!staticDir) {
+    console.error(USAGE);
+    process.exit(1);
+  }
+  const { compileRedirectFunctionSource, readEdgeConfig } = await import("../amplify/publication/redirect-rules.js");
+  const functionSource = fs.readFileSync(new URL("../amplify/publication/redirect-and-index.js", import.meta.url), "utf8");
+  const config = readEdgeConfig(staticDir);
+  const compiled = compileRedirectFunctionSource(functionSource, config.rules, { negotiateMarkdown: config.negotiateMarkdown, directoryTwins: config.directoryTwins });
+  const out = opt("out");
+  if (out) fs.writeFileSync(path.resolve(out), compiled);
+  else process.stdout.write(compiled);
+  process.exit(0);
+}
+
 if (command === "deploy-edge") {
   const buildAppId = process.env.AWS_APP_ID;
   const buildBranch = process.env.AWS_BRANCH;

package/components/automation-panel.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { loadAutomationOverview, runAutomationNow } from "../lib/automation-client";
+import { FIXTURE_AUTOMATION_OVERVIEW } from "../lib/automation-fixture";
+import type { AutomationResult } from "../lib/automation-overview";
+import { AutomationView } from "./automation-view";
+
+const REFRESH_MILLISECONDS = 60_000;
+
+/** Administration, Automation: loads the records and their recent runs, and refreshes each minute. */
+export function AutomationPanel({ isDemo }: { isDemo: boolean }) {
+  const [result, setResult] = useState<AutomationResult | null>(null);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (isDemo) {
+      setResult(FIXTURE_AUTOMATION_OVERVIEW);
+      return;
+    }
+    let live = true;
+    const refresh = async () => {
+      try {
+        const next = await loadAutomationOverview();
+        if (live) setResult(next);
+      } catch {
+        if (live) setResult({ state: "unavailable" });
+      }
+    };
+    void refresh();
+    const timer = window.setInterval(() => void refresh(), REFRESH_MILLISECONDS);
+    return () => {
+      live = false;
+      window.clearInterval(timer);
+    };
+  }, [isDemo]);
+
+  const runNow = isDemo ? undefined : async (automationId: string, input: Record<string, unknown> | null) => {
+    const outcome = await runAutomationNow(automationId, input);
+    try {
+      setResult(await loadAutomationOverview());   // show the new run without waiting for the minute
+    } catch {
+      /* the next refresh will */
+    }
+    return outcome;
+  };
+
+  return <AutomationView result={result} selectedId={selectedId} onSelect={setSelectedId} demo={isDemo} onRunNow={runNow} />;
+}

package/components/automation-run-now.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { useState } from "react";
+import {
+  atATimeText,
+  inputTemplateText,
+  parseRunInput,
+  runNowMessage,
+  type AutomationRecord,
+  type RunNowResult,
+} from "../lib/automation-overview";
+
+export type RunNowPhase = "idle" | "confirming" | "running" | "done";
+
+/**
+ * "Run now": a button, then a confirm step that says what will start and, when the record's input names
+ * placeholders for an item, asks for the input of this run. Starting costs money (the procedure calls a model),
+ * so nothing starts on the first click. `initialPhase` and `initialMessage` exist so every step renders from a test.
+ */
+export function RunNowControl({
+  record,
+  demo = false,
+  onRun,
+  initialPhase = "idle",
+  initialMessage = null,
+}: {
+  record: Pick<AutomationRecord, "id" | "title" | "procedureKey" | "runNow" | "limits">;
+  demo?: boolean;
+  onRun?: (automationId: string, input: Record<string, unknown> | null) => Promise<RunNowResult>;
+  initialPhase?: RunNowPhase;
+  initialMessage?: string | null;
+}) {
+  const [phase, setPhase] = useState<RunNowPhase>(initialPhase);
+  const [message, setMessage] = useState<string | null>(initialMessage);
+  const [text, setText] = useState(record.runNow.needsInput ? inputTemplateText(record.runNow.inputNames) : "");
+  const [problem, setProblem] = useState<string | null>(null);
+
+  if (!record.runNow.available) {
+    return (
+      <p className="news-desk-delegation-note" data-automation-run-now-unavailable>
+        Run now is not available: {record.runNow.reason === "disabled" ? "the automation is disabled. Enable it first." : (record.runNow.reason ?? "not supported")}.
+      </p>
+    );
+  }
+
+  async function confirm() {
+    const parsed = parseRunInput(text);
+    if (!parsed.ok) {
+      setProblem(parsed.message);
+      return;
+    }
+    if (record.runNow.needsInput && parsed.value === null) {
+      setProblem("This automation's input names an item, so give the input for this run.");
+      return;
+    }
+    setProblem(null);
+    setPhase("running");
+    try {
+      const result = onRun ? await onRun(record.id, parsed.value) : ({ state: "unavailable" } as RunNowResult);
+      setMessage(runNowMessage(result));
+    } catch {
+      setMessage(runNowMessage({ state: "unavailable" }));
+    }
+    setPhase("done");
+  }
+
+  return (
+    <div data-automation-run-now={record.id} data-run-now-phase={phase}>
+      {phase === "idle" || phase === "done" ? (
+        <button type="button" data-automation-run-now-start onClick={() => { setMessage(null); setPhase("confirming"); }}>
+          Run now
+        </button>
+      ) : null}
+      {phase === "confirming" || phase === "running" ? (
+        <div role="group" aria-label={`Confirm Run now for ${record.title}`} data-automation-run-now-confirm>
+          <p>
+            Run <strong>{record.procedureKey}</strong> now? It calls a model, which costs money, and it counts against the
+            limit ({atATimeText(record.limits)}). The run is linked to this automation.
+          </p>
+          {demo ? <p className="news-desk-delegation-note">This is the demo, so nothing will start.</p> : null}
+          <label>
+            Input for this run{record.runNow.needsInput ? " (required)" : " (optional; blank uses the record's input)"}
+            <textarea rows={4} value={text} onChange={(event) => setText(event.target.value)} disabled={phase === "running"} data-automation-run-now-input />
+          </label>
+          {problem ? <p role="alert" data-automation-run-now-problem>{problem}</p> : null}
+          <button type="button" onClick={() => void confirm()} disabled={phase === "running" || demo} data-automation-run-now-confirm-button>
+            {phase === "running" ? "Starting…" : "Confirm: start the run"}
+          </button>{" "}
+          <button type="button" onClick={() => { setPhase("idle"); setProblem(null); }} disabled={phase === "running"} data-automation-run-now-cancel>
+            Cancel
+          </button>
+        </div>
+      ) : null}
+      {message ? <p role="status" data-automation-run-now-message>{message}</p> : null}
+    </div>
+  );
+}

package/components/automation-view.tsx

@@ -0,0 +1,195 @@
+import Link from "next/link";
+import { RunNowControl } from "./automation-run-now";
+import {
+  ENABLED_NOTE,
+  OUTSIDE_NOTICE,
+  atATimeText,
+  costText,
+  durationText,
+  enabledText,
+  formatUtc,
+  linkText,
+  noticeText,
+  proceduresHref,
+  statusMark,
+  statusText,
+  storyHref,
+  triggerText,
+  toolsText,
+  whoText,
+  type AutomationOutsideRun,
+  type AutomationRecord,
+  type AutomationResult,
+  type AutomationRun,
+  type RunNowResult,
+} from "../lib/automation-overview";
+
+function Message({ title, children, kind }: { title: string; children?: React.ReactNode; kind: string }) {
+  return (
+    <div className="category-steering-empty" role={kind === "loading" ? "status" : "alert"} data-automation-state={kind}>
+      <strong>{title}</strong>
+      {children ? <p>{children}</p> : null}
+    </div>
+  );
+}
+
+function RunLine({ run, demo }: { run: AutomationRun; demo: boolean }) {
+  return (
+    <li data-automation-run={run.runId ?? run.sourceId ?? "unlinked"} data-run-status={run.status ?? "unknown"}>
+      <strong>{formatUtc(run.startedAt)}</strong>
+      <span><span aria-hidden="true">{statusMark(run.status)} </span>Status: {statusText(run.status)} &middot; {durationText(run.durationSeconds)}</span>
+      <span>{whoText(run)}</span>
+      {run.reason ? <span data-automation-run-reason>Reason: {run.reason}</span> : null}
+      {run.error ? <span data-automation-run-error>Error: {run.error}</span> : null}
+      <span>
+        {run.runId ? <>Run {run.runId} (<Link href={proceduresHref(demo)}>Procedures</Link>)</> : run.triggerStatus === "started" ? "Run record not linked yet" : "No run record"}
+        {run.runRecord === "missing" ? " (the run record was not found)" : ""}
+        {run.runRecord === "unavailable" ? " (the run record could not be read)" : ""}
+      </span>
+      <span>
+        {run.storyId && run.storyExists === false ? <>Story: {run.storyTitle ?? run.storyId} (story deleted)</>
+          : run.storyId ? <>Story: <Link href={storyHref(run.storyId, demo)} data-automation-story-link>{run.storyTitle ?? run.storyId}</Link></> : "Story: none recorded"}
+      </span>
+      <span data-automation-run-tools>{toolsText(run)}</span>
+      <span data-automation-run-cost data-over-budget={run.overBudget || undefined}>
+        <span aria-hidden="true">{run.overBudget ? "! " : ""}</span>{costText(run)}
+      </span>
+    </li>
+  );
+}
+
+function OutsideRunLine({ run, demo }: { run: AutomationOutsideRun; demo: boolean }) {
+  return (
+    <li data-automation-outside-run={run.runId ?? "unlinked"} data-run-status={run.status ?? "unknown"}>
+      <strong>{formatUtc(run.startedAt)}</strong>
+      <span><span aria-hidden="true">{statusMark(run.status)} </span>Status: {statusText(run.status)} &middot; {durationText(run.durationSeconds)}</span>
+      <span>Started by: {run.requestedBy ?? "unknown"}</span>
+      {run.error ? <span data-automation-run-error>Error: {run.error}</span> : null}
+      <span>{run.runId ? <>Run {run.runId} (<Link href={proceduresHref(demo)}>Procedures</Link>)</> : "No run id"}</span>
+      <span>
+        {run.storyId ? <>Story: <Link href={storyHref(run.storyId, demo)}>{run.storyTitle ?? run.storyId}</Link></> : "Story: none recorded"}
+      </span>
+      <span data-automation-run-cost>{costText({ ...run, budgetUsd: null })}</span>
+    </li>
+  );
+}
+
+function Detail({ record, demo, onRunNow }: { record: AutomationRecord; demo: boolean; onRunNow?: RunNowHandler }) {
+  const notice = noticeText(record.notice);
+  return (
+    <article className="news-desk-doctrine-card" data-automation-detail={record.id}>
+      <div className="news-desk-doctrine-card__header"><div><h3>{record.title}</h3><span>{record.description ?? record.id}</span></div></div>
+      <dl className="news-desk-monitoring__usage">
+        <div><dt>Trigger</dt><dd>{triggerText(record.trigger)}{record.supported ? "" : ` (${record.supportNote ?? "not yet supported"})`}</dd></div>
+        <div><dt>Procedure</dt><dd>{record.procedureKey}</dd></div>
+        <div><dt>Input</dt><dd>{Object.keys(record.inputTemplate).length ? Object.entries(record.inputTemplate).map(([name, template]) => `${name} = ${template}`).join("; ") : "none"}</dd></div>
+        <div><dt>Enabled</dt><dd>{enabledText(record)} ({ENABLED_NOTE})</dd></div>
+        <div><dt>Limits</dt><dd>timeout {record.limits.timeoutSeconds ?? "?"} s, {atATimeText(record.limits)}{record.limits.budgetUsdPerRun !== undefined ? `, about $${record.limits.budgetUsdPerRun} per run, advisory` : ""} ({record.limitsNote})</dd></div>
+        <div><dt>Router</dt><dd data-automation-link={record.link?.state ?? "unchecked"}>{linkText(record.link)}</dd></div>
+      </dl>
+      {notice ? <p className="news-desk-delegation-note" data-automation-notice>{notice}</p> : null}
+      <RunNowControl record={record} demo={demo} onRun={onRunNow} />
+      <h4>Recent runs</h4>
+      {record.runs.length ? (
+        <ul className="news-desk-monitoring__list" data-automation-runs>
+          {record.runs.map((run) => <RunLine key={run.runId ?? `${run.sourceId}-${run.startedAt}`} run={run} demo={demo} />)}
+        </ul>
+      ) : <p data-automation-no-runs>No runs yet.</p>}
+      {record.skippedAlreadyHadReference > 0 ? (
+        <p className="news-desk-delegation-note" data-automation-skipped>
+          {record.skippedAlreadyHadReference} {record.skippedAlreadyHadReference === 1 ? "item was" : "items were"} not started because the Reference already existed.
+        </p>
+      ) : null}
+      {record.outsideRuns.length || record.outsideNotice ? (
+        <>
+          <h4>Started outside this automation</h4>
+          <p className="news-desk-delegation-note">Other runs of {record.procedureKey} that this automation did not start.</p>
+          {record.outsideNotice ? <p className="news-desk-delegation-note" data-automation-notice>{OUTSIDE_NOTICE}</p> : null}
+          {record.outsideRuns.length ? (
+            <ul className="news-desk-monitoring__list" data-automation-outside-runs>
+              {record.outsideRuns.map((run) => <OutsideRunLine key={run.runId ?? run.startedAt ?? "run"} run={run} demo={demo} />)}
+            </ul>
+          ) : null}
+        </>
+      ) : null}
+    </article>
+  );
+}
+
+function ListItem({ record, selected, onSelect }: { record: AutomationRecord; selected: boolean; onSelect: (id: string) => void }) {
+  const last = record.lastRun;
+  return (
+    <li data-automation={record.id}>
+      <div>
+        <strong>{record.title}</strong>
+        <span>{triggerText(record.trigger)}{record.supported ? "" : ` (${record.supportNote ?? "not yet supported"})`}</span>
+      </div>
+      <span>Procedure: {record.procedureKey}</span>
+      <span>{enabledText(record)} ({ENABLED_NOTE})</span>
+      <span data-automation-last-run>
+        Last run: <span aria-hidden="true">{statusMark(last?.status)} </span>{statusText(last?.status)}{last ? `, ${formatUtc(last.startedAt)}` : ""}
+      </span>
+      <button type="button" aria-pressed={selected} data-automation-select={record.id} onClick={() => onSelect(record.id)}>
+        {selected ? "Showing runs" : "Show runs"}
+      </button>
+    </li>
+  );
+}
+
+/** Presentation only: the panel fetches, this renders any result, so every state is testable from fixtures. */
+export type RunNowHandler = (automationId: string, input: Record<string, unknown> | null) => Promise<RunNowResult>;
+
+export function AutomationView({
+  result,
+  selectedId,
+  onSelect,
+  demo = false,
+  onRunNow,
+}: {
+  result: AutomationResult | null;
+  selectedId: string | null;
+  onSelect: (id: string) => void;
+  demo?: boolean;
+  onRunNow?: RunNowHandler;
+}) {
+  let body: React.ReactNode;
+  if (result === null) {
+    body = <Message kind="loading" title="Loading automations" />;
+  } else if ("error" in result) {
+    body = result.error === "forbidden"
+      ? <Message kind="forbidden" title="Automations are 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="Automations could not be read">The request was not understood. Reload the page.</Message>;
+  } else if (result.state === "unavailable") {
+    body = <Message kind="unavailable" title="Automations could not be read right now">Nothing is affected. Try again in a minute.</Message>;
+  } else if (result.state === "empty") {
+    body = <Message kind="empty" title="No automations yet">An operator creates one with <code>papyrus automations create</code>. Nothing is configured to run on its own from this page.</Message>;
+  } else {
+    const selected = result.automations.find((record) => record.id === selectedId) ?? (result.automations.length === 1 ? result.automations[0] : null);
+    body = (
+      <>
+        <article className="news-desk-doctrine-card" data-automation-section="list">
+          <div className="news-desk-doctrine-card__header"><div><h3>Automations</h3><span>What starts a procedure by itself</span></div></div>
+          <ul className="news-desk-monitoring__list">
+            {result.automations.map((record) => <ListItem key={record.id} record={record} selected={selected?.id === record.id} onSelect={onSelect} />)}
+          </ul>
+          {result.monitoring === "not_configured" ? <p className="news-desk-delegation-note" data-automation-notice>{noticeText("monitoring_not_configured")}</p> : null}
+        </article>
+        {selected ? <Detail record={selected} demo={demo} onRunNow={onRunNow} /> : <p className="news-desk-delegation-note" data-automation-pick>Choose an automation to see its recent runs.</p>}
+      </>
+    );
+  }
+  return (
+    <div data-news-desk-admin-panel="automations">
+      <article className="news-desk-doctrine-card">
+        <div className="news-desk-doctrine-card__header">
+          <div>
+            <h3>Automation</h3>
+            <span>Procedures that start on their own. Editors and admins can run one now; an operator changes the settings with the command line.</span>
+          </div>
+        </div>
+        {result && "asOf" in result ? <p className="news-desk-delegation-note" data-automation-as-of>As of {formatUtc(result.asOf)}. Enabled: {ENABLED_NOTE}.</p> : null}
+      </article>
+      {body}
+    </div>
+  );
+}