@anthusai/papyrus 2.0.0-next.7 → 2.0.0-next.71

package/components/editorial-checks-admin-panel.tsx

@@ -12,6 +12,7 @@ import {
   draftQuestions,
   importStarterPack,
   listPolicies,
+  listStarterPacks,
   loadSettings,
   recalibrate,
   savePolicy,
@@ -19,9 +20,9 @@ import {
   tryPolicy,
   type EditorialPolicyRecord,
   type EditorialSettings,
+  type StarterPackSummary,
 } from "../lib/editorial-checks-client";
 
-const STARTER_PACK = "ai-writing-tells";
 const POLICY_KEY = /^[a-z0-9][a-z0-9._-]*$/;
 
 type Draft = {
@@ -63,8 +64,8 @@ function lines(text: string): string[] {
   return text.split("\n").map((line) => line.trim()).filter(Boolean);
 }
 
-/** The policy as Limatus sees it (its key is the policy id). Throws on invalid detector JSON. */
-function limatusPolicy(draft: Draft): Record<string, unknown> {
+/** The policy as Humanus sees it (its key is the policy id). Throws on invalid detector JSON. */
+function humanusPolicy(draft: Draft): Record<string, unknown> {
   const detectors = JSON.parse(draft.detectorsText || "[]") as unknown;
   if (!Array.isArray(detectors)) throw new Error("Detectors must be a JSON list.");
   const violates = lines(draft.violatesText);
@@ -87,6 +88,8 @@ export function EditorialChecksAdminPanel() {
   const [settings, setSettings] = useState<EditorialSettings>(DEFAULT_EDITORIAL_SETTINGS);
   const [settingsExist, setSettingsExist] = useState(false);
   const [draft, setDraft] = useState<Draft | null>(null);
+  const [starterPacks, setStarterPacks] = useState<StarterPackSummary[]>([]);
+  const [starterPack, setStarterPack] = useState<string>("");
   const [message, setMessage] = useState<string | null>(null);
   const [working, setWorking] = useState<string | null>(null);
   const [tryText, setTryText] = useState("");
@@ -94,7 +97,9 @@ export function EditorialChecksAdminPanel() {
 
   const refresh = useCallback(async () => {
     try {
-      const [loadedPolicies, loadedSettings] = await Promise.all([listPolicies(), loadSettings()]);
+      const [loadedPolicies, loadedSettings, catalog] = await Promise.all([listPolicies(), loadSettings(), listStarterPacks()]);
+      setStarterPacks(catalog.packs);
+      setStarterPack((current) => current || catalog.packs[0]?.name || "");
       setPolicies(loadedPolicies);
       setSettings(loadedSettings.settings);
       setSettingsExist(loadedSettings.exists);
@@ -128,7 +133,7 @@ export function EditorialChecksAdminPanel() {
       const key = draft.record.policyKey.trim();
       if (!POLICY_KEY.test(key)) throw new Error("The key must be lowercase letters, digits, dots, hyphens or underscores.");
       if (!draft.record.title.trim() || !draft.record.guidance.trim()) throw new Error("A policy needs a title and guidance.");
-      const policy = limatusPolicy(draft);
+      const policy = humanusPolicy(draft);
       const record: EditorialPolicyRecord = {
         ...draft.record,
         id: draft.isNew ? `${draft.record.scope}#${key}` : draft.record.id,
@@ -157,19 +162,38 @@ export function EditorialChecksAdminPanel() {
       <h4>Policies</h4>
       <div className="flex flex-wrap gap-2">
         <Button onClick={() => { setDraft(draftFrom(emptyPolicy(), true)); setTryResult(null); }} size="sm" type="button">New policy</Button>
+        <select aria-label="Starter pack" onChange={(event) => setStarterPack(event.target.value)} value={starterPack}>
+          {starterPacks.map((pack) => (
+            <option key={pack.name} value={pack.name}>
+              {pack.title} ({pack.importedCount} of {pack.policyCount} added)
+            </option>
+          ))}
+        </select>
         <Button
-          disabled={working !== null}
+          disabled={working !== null || !starterPack}
           onClick={() => run("import", async () => {
-            const outcome = await importStarterPack(STARTER_PACK);
+            const outcome = await importStarterPack(starterPack);
             await refresh();
-            return `Starter pack: ${outcome.created} policies added, ${outcome.skipped} already present.`;
+            const label = starterPacks.find((pack) => pack.name === starterPack)?.title ?? starterPack;
+            return `${label}: ${outcome.created} policies added, ${outcome.skipped} already present.`;
           })}
           size="sm"
           type="button"
           variant="outline"
         >
-          Add AI-writing tells starter pack
+          Add starter pack
         </Button>
+      </div>
+      {(() => {
+        const selected = starterPacks.find((pack) => pack.name === starterPack);
+        return selected ? (
+          <p className="text-sm text-muted-foreground">
+            {selected.title}{selected.version ? ` ${selected.version}` : ""}: {selected.policyCount} policies
+            {selected.isDefault ? " (added to every new site)" : ""}. {selected.guidance}
+          </p>
+        ) : null;
+      })()}
+      <div className="flex flex-wrap gap-2">
         <Button
           disabled={working !== null}
           onClick={() => run("recalibrate", async () => {
@@ -243,7 +267,7 @@ export function EditorialChecksAdminPanel() {
           <label>Examples that break it (one per line) <Textarea onChange={(event) => setDraft({ ...draft, violatesText: event.target.value })} rows={3} value={draft.violatesText} /></label>
           <label>Examples that follow it (one per line) <Textarea onChange={(event) => setDraft({ ...draft, compliesText: event.target.value })} rows={3} value={draft.compliesText} /></label>
           <label>
-            Detectors (JSON; see <code>limatus schema policy-pack-v1</code>)
+            Detectors (JSON; see <code>humanus schema policy-pack-v1</code>)
             <Textarea className="font-mono text-xs" onChange={(event) => setDraft({ ...draft, detectorsText: event.target.value })} rows={10} value={draft.detectorsText} />
           </label>
           <div className="flex flex-wrap gap-2">
@@ -284,7 +308,7 @@ export function EditorialChecksAdminPanel() {
             <Button
               disabled={working !== null || !tryText.trim()}
               onClick={() => run("try", async () => {
-                setTryResult(await tryPolicy(limatusPolicy(draft), tryText));
+                setTryResult(await tryPolicy(humanusPolicy(draft), tryText));
               })}
               size="sm"
               type="button"
@@ -320,6 +344,7 @@ export function EditorialChecksAdminPanel() {
           });
         }}
       >
+        <label><input checked={settings.enabled} data-editorial-enabled onChange={(event) => setSettings({ ...settings, enabled: event.target.checked })} type="checkbox" /> Run editorial checks for this publication (turning this off stops checks and rewrites; policies are kept)</label>
         <label><input checked={settings.lanes.rules} onChange={(event) => setSettings({ ...settings, lanes: { ...settings.lanes, rules: event.target.checked } })} type="checkbox" /> Rule checks</label>
         <label><input checked={settings.lanes.classifier} onChange={(event) => setSettings({ ...settings, lanes: { ...settings.lanes, classifier: event.target.checked } })} type="checkbox" /> Judgment checks (decision model)</label>
         <label><input checked={settings.checkWhileTyping} onChange={(event) => setSettings({ ...settings, checkWhileTyping: event.target.checked })} type="checkbox" /> Check while editors type (after a short pause)</label>

package/components/moderation-panel.tsx

@@ -0,0 +1,248 @@
+"use client";
+
+import { generateClient } from "aws-amplify/data";
+import amplifyOutputs from "papyrus-amplify-outputs";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { pluginSettings, type PluginOutputs } from "../lib/plugin-settings";
+import {
+  buildActionLog,
+  buildHidden,
+  buildQueue,
+  moderationModeText,
+  receiptMessage,
+  shortReader,
+  type ActionEntry,
+  type ActionRow,
+  type CommentRow,
+  type ModerationActionName,
+  type ModerationRow,
+  type ModerationTarget,
+  type Receipt,
+  type ReportRow,
+  type SubmissionRow,
+} from "../lib/reader-moderation";
+
+const SUBMISSION_FIELDS = "id canonicalUrl domain title kind note readerId state moderation reportCount signals itemId createdAt";
+const COMMENT_FIELDS = "id subjectKey readerId body parentId state moderation reportCount signals createdAt";
+
+const QUEUE_SUBMISSIONS = `query Queue($nextToken: String) { listReaderSubmissionsByModerationAndCreatedAt(moderation: "new", sortDirection: DESC, limit: 100, nextToken: $nextToken) { items { ${SUBMISSION_FIELDS} } nextToken } }`;
+const QUEUE_COMMENTS = `query Queue($nextToken: String) { listReaderCommentsByModerationAndCreatedAt(moderation: "new", sortDirection: DESC, limit: 100, nextToken: $nextToken) { items { ${COMMENT_FIELDS} } nextToken } }`;
+const HIDDEN_SUBMISSIONS = `query Hidden($nextToken: String) { listReaderSubmissions(filter: { state: { eq: "hidden" } }, limit: 500, nextToken: $nextToken) { items { ${SUBMISSION_FIELDS} } nextToken } }`;
+const HIDDEN_COMMENTS = `query Hidden($nextToken: String) { listReaderComments(filter: { state: { eq: "hidden" } }, limit: 500, nextToken: $nextToken) { items { ${COMMENT_FIELDS} } nextToken } }`;
+const OPEN_REPORTS = `query Reports($nextToken: String) { listReaderReports(filter: { state: { eq: "open" } }, limit: 500, nextToken: $nextToken) { items { id targetType target reporterReaderId reason state createdAt } nextToken } }`;
+const ACTIONS = `query Actions($nextToken: String) { listModerationActions(limit: 500, nextToken: $nextToken) { items { id by actorSub action targetType target reason fromState toState undoOf undoneBy at } nextToken } }`;
+const HANDLES = `query Handles($nextToken: String) { listReaderHandles(limit: 1000, nextToken: $nextToken) { items { id readerId } nextToken } }`;
+const MODERATE = `mutation Moderate($action: String!, $targetType: String!, $target: String!, $reason: String, $undoOf: String) { moderateReader(action: $action, targetType: $targetType, target: $target, reason: $reason, undoOf: $undoOf) { status id error message } }`;
+
+type GraphResult = { data?: Record<string, { items: unknown[]; nextToken?: string | null } | Receipt | null>; errors?: { message?: string }[] };
+const MAXIMUM_PAGES = 20;
+
+async function loadAll<T>(query: string, field: string): Promise<T[]> {
+  const client = generateClient({ authMode: "userPool" });
+  const rows: T[] = [];
+  let nextToken: string | null | undefined;
+  for (let page = 0; page < MAXIMUM_PAGES; page += 1) {
+    const result = (await client.graphql({ query, variables: { nextToken } })) as GraphResult;
+    if (result.errors?.length) throw new Error(result.errors[0]?.message ?? "Could not load moderation data.");
+    const connection = result.data?.[field] as { items: T[]; nextToken?: string | null } | undefined;
+    rows.push(...(connection?.items ?? []).filter(Boolean));
+    nextToken = connection?.nextToken;
+    if (!nextToken) break;
+  }
+  return rows;
+}
+
+async function moderate(variables: Record<string, string | undefined>): Promise<Receipt> {
+  const client = generateClient({ authMode: "userPool" });
+  const result = (await client.graphql({ query: MODERATE, variables })) as GraphResult;
+  if (result.errors?.length) return { status: "refused", message: result.errors[0]?.message ?? "The action failed." };
+  return (result.data?.moderateReader as Receipt | null) ?? { status: "refused", message: "The action did not answer." };
+}
+
+export type ModerationViewProps = {
+  mode: unknown;
+  queue: ModerationRow[];
+  hidden: ModerationRow[];
+  log: ActionEntry[];
+  tab: "queue" | "hidden" | "log";
+  busy: boolean;
+  status: string;
+  reason: string;
+  onTab: (tab: "queue" | "hidden" | "log") => void;
+  onReason: (reason: string) => void;
+  onAction: (action: ModerationActionName, targetType: ModerationTarget, target: string, undoOf?: string) => void;
+  onRefresh: () => void;
+};
+
+function Row({ row, busy, onAction, listed }: { row: ModerationRow; busy: boolean; onAction: ModerationViewProps["onAction"]; listed: "queue" | "hidden" }) {
+  const kind = row.kind === "submission" ? "Submission" : "Comment";
+  return (
+    <li data-moderation-row={row.id}>
+      <article aria-label={`${kind} by ${shortReader(row.readerId, row.handle)}`}>
+        <p>
+          <strong>{kind}</strong> by {shortReader(row.readerId, row.handle)} <time dateTime={row.createdAt}>{row.createdAt}</time> ({row.state}
+          {row.reports.length > 0 ? `, ${row.reports.length} ${row.reports.length === 1 ? "report" : "reports"}` : ""})
+        </p>
+        {row.kind === "submission" ? (
+          <p>
+            {row.url ? (
+              <a href={row.url} target="_blank" rel="noopener noreferrer nofollow">{row.title}</a>
+            ) : (
+              <span>{row.title}</span>
+            )}
+          </p>
+        ) : null}
+        {row.text ? <p style={{ whiteSpace: "pre-wrap", overflowWrap: "anywhere" }}>{row.text}</p> : null}
+        {row.signals.length > 0 ? (
+          <ul aria-label="Automatic signals">
+            {row.signals.map((signal, index) => (
+              <li key={`${signal.detector}-${index}`}>Signal ({signal.severity}): {signal.policy} / {signal.detector}{signal.excerpt ? ` — “${signal.excerpt}”` : ""}</li>
+            ))}
+          </ul>
+        ) : null}
+        {row.reports.length > 0 ? (
+          <ul aria-label="Reports">
+            {row.reports.map((report) => (
+              <li key={report.id}>Reported: {report.reason}</li>
+            ))}
+          </ul>
+        ) : null}
+        <p>
+          {listed === "queue" ? (
+            <button type="button" disabled={busy} onClick={() => onAction("approve", row.kind, row.id)}>Approve</button>
+          ) : (
+            <button type="button" disabled={busy} onClick={() => onAction("unhide", row.kind, row.id)}>Show again</button>
+          )}{" "}
+          {row.state !== "hidden" ? <button type="button" disabled={busy} onClick={() => onAction("hide", row.kind, row.id)}>Hide</button> : null}{" "}
+          {row.canPromote ? <button type="button" disabled={busy} onClick={() => onAction("promote", row.kind, row.id)}>Promote to a draft</button> : null}{" "}
+          <button type="button" disabled={busy} onClick={() => onAction("ban", "reader", row.readerId)}>Ban reader</button>{" "}
+          <button type="button" disabled={busy} onClick={() => onAction("limit", "reader", row.readerId)}>Limit reader</button>
+        </p>
+      </article>
+    </li>
+  );
+}
+
+export function ModerationView(props: ModerationViewProps) {
+  const { queue, hidden, log, tab, busy } = props;
+  return (
+    <section aria-labelledby="newsroom-moderation-title" data-news-desk-admin-panel="moderation">
+      <h3 id="newsroom-moderation-title">Moderation</h3>
+      <p>{moderationModeText(props.mode)} Only editors and admins can see this.</p>
+      <p role="tablist" aria-label="Moderation views">
+        <button type="button" role="tab" aria-selected={tab === "queue"} onClick={() => props.onTab("queue")}>Queue ({queue.length})</button>{" "}
+        <button type="button" role="tab" aria-selected={tab === "hidden"} onClick={() => props.onTab("hidden")}>Hidden ({hidden.length})</button>{" "}
+        <button type="button" role="tab" aria-selected={tab === "log"} onClick={() => props.onTab("log")}>Recent actions</button>{" "}
+        <button type="button" onClick={props.onRefresh} disabled={busy}>Refresh</button>
+      </p>
+      <label>
+        Reason for the next action (optional){" "}
+        <input type="text" value={props.reason} maxLength={500} onChange={(event) => props.onReason(event.target.value)} />
+      </label>
+      <p role="status" aria-live="polite">{props.status}</p>
+      {tab === "queue" ? (
+        queue.length === 0 ? <p>Nothing is waiting for a decision.</p> : <ul>{queue.map((row) => <Row key={row.id} row={row} busy={busy} onAction={props.onAction} listed="queue" />)}</ul>
+      ) : null}
+      {tab === "hidden" ? (
+        hidden.length === 0 ? <p>Nothing is hidden.</p> : <ul>{hidden.map((row) => <Row key={row.id} row={row} busy={busy} onAction={props.onAction} listed="hidden" />)}</ul>
+      ) : null}
+      {tab === "log" ? (
+        log.length === 0 ? <p>No moderation actions yet.</p> : (
+          <table>
+            <thead>
+              <tr><th scope="col">When</th><th scope="col">Action</th><th scope="col">Target</th><th scope="col">By</th><th scope="col">Reason</th><th scope="col"><span>Undo</span></th></tr>
+            </thead>
+            <tbody>
+              {log.map((entry) => (
+                <tr key={entry.id}>
+                  <td>{entry.at}</td>
+                  <td>{entry.label} ({entry.fromState} to {entry.toState}){entry.undoneBy ? ", undone" : ""}</td>
+                  <td>{entry.targetType} {entry.target.slice(0, 12)}</td>
+                  <td>{entry.byLabel}</td>
+                  <td>{entry.reason}</td>
+                  <td>
+                    {entry.undoable ? (
+                      <button type="button" disabled={busy} onClick={() => props.onAction("undo", entry.targetType as ModerationTarget, entry.target, entry.id)}>Undo</button>
+                    ) : null}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )
+      ) : null}
+    </section>
+  );
+}
+
+export function ModerationPanel() {
+  const mode = useMemo(() => pluginSettings(amplifyOutputs as PluginOutputs, "reader-steering")?.moderation, []);
+  const [tab, setTab] = useState<"queue" | "hidden" | "log">("queue");
+  const [data, setData] = useState<{ queue: ModerationRow[]; hidden: ModerationRow[]; log: ActionEntry[] } | null>(null);
+  const [status, setStatus] = useState("Loading...");
+  const [busy, setBusy] = useState(false);
+  const [reason, setReason] = useState("");
+
+  const refresh = useCallback(async (quiet = false) => {
+    setBusy(true);
+    try {
+      const [newSubmissions, newComments, hiddenSubmissions, hiddenComments, reports, actions, handleRows] = await Promise.all([
+        loadAll<SubmissionRow>(QUEUE_SUBMISSIONS, "listReaderSubmissionsByModerationAndCreatedAt"),
+        loadAll<CommentRow>(QUEUE_COMMENTS, "listReaderCommentsByModerationAndCreatedAt"),
+        loadAll<SubmissionRow>(HIDDEN_SUBMISSIONS, "listReaderSubmissions"),
+        loadAll<CommentRow>(HIDDEN_COMMENTS, "listReaderComments"),
+        loadAll<ReportRow>(OPEN_REPORTS, "listReaderReports"),
+        loadAll<ActionRow>(ACTIONS, "listModerationActions"),
+        loadAll<{ id: string; readerId: string }>(HANDLES, "listReaderHandles"),
+      ]);
+      const handles = Object.fromEntries(handleRows.map((row) => [row.readerId, row.id]));
+      setData({
+        queue: buildQueue({ submissions: newSubmissions, comments: newComments, reports, handles }),
+        hidden: buildHidden({ submissions: hiddenSubmissions, comments: hiddenComments, reports, handles }),
+        log: buildActionLog(actions),
+      });
+      if (!quiet) setStatus("");
+    } catch (error) {
+      setStatus(`Error: ${error instanceof Error ? error.message : "Could not load moderation data."}`);
+    } finally {
+      setBusy(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  const onAction = useCallback(
+    async (action: ModerationActionName, targetType: ModerationTarget, target: string, undoOf?: string) => {
+      setBusy(true);
+      setStatus("Working...");
+      try {
+        const receipt = await moderate({ action, targetType, target, ...(reason.trim() ? { reason: reason.trim() } : {}), ...(undoOf ? { undoOf } : {}) });
+        setStatus(receiptMessage(receipt));
+        if (receipt.status === "ok") setReason("");
+      } catch (error) {
+        setStatus(`Error: ${error instanceof Error ? error.message : "The action failed."}`);
+      }
+      await refresh(true);
+    },
+    [reason, refresh],
+  );
+
+  return (
+    <ModerationView
+      mode={mode}
+      queue={data?.queue ?? []}
+      hidden={data?.hidden ?? []}
+      log={data?.log ?? []}
+      tab={tab}
+      busy={busy}
+      status={status}
+      reason={reason}
+      onTab={setTab}
+      onReason={setReason}
+      onAction={(action, targetType, target, undoOf) => void onAction(action, targetType, target, undoOf)}
+      onRefresh={() => void refresh()}
+    />
+  );
+}

package/components/monitoring-overview-view.tsx

@@ -0,0 +1,241 @@
+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>
+                {run.waitingForClassifier?.length ? <span data-monitoring-waiting-for-classifier>Waiting for classifier: {run.waitingForClassifier.join(", ")} (skipped, not an error; probed on a 30 minute to 6 hour backoff)</span> : null}
+              </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} />;
+}