@anthusai/papyrus 5.46.0 → 5.48.0

package/components/needs-me-shared.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { CheckIcon, CircleCheckIcon, Loader2Icon } from "lucide-react";
+import { cn } from "../lib/utils";
+import type { NeedsMeEntry } from "../lib/needs-me-items";
+import type { ReviewChoice } from "./reference-review-card";
+
+/** References and captures are rated like the References feed: a reason code is asked for on Reject. */
+export function isReferenceLike(item: Pick<NeedsMeEntry, "type">): boolean {
+  return item.type === "reference" || item.type === "incomplete_capture";
+}
+
+export function decidedChoiceOf(item: Pick<NeedsMeEntry, "decisionState">): ReviewChoice | null {
+  return item.decisionState === "accepted" ? "accept" : item.decisionState === "rejected" ? "reject" : null;
+}
+
+/** A flag is information, not a question: one Acknowledge button in the footer's own tone. */
+export function FlagFooter({ busy, disabledReason, done, error, onAcknowledge }: { busy: boolean; disabledReason: string | null; done: boolean; error: string | null; onAcknowledge: () => void }) {
+  return (
+    <div className="space-y-2" data-flag-footer>
+      {done ? (
+        <p className="inline-flex min-h-12 items-center gap-1.5 text-sm font-medium" data-flag-acknowledged><CircleCheckIcon aria-hidden="true" className="size-4" />Acknowledged</p>
+      ) : (
+        <button
+          aria-disabled={busy || Boolean(disabledReason) || undefined}
+          className={cn("inline-flex min-h-12 w-full items-center justify-center gap-1.5 rounded-[16px] bg-[var(--feed-control)] px-3 text-sm font-semibold text-foreground outline-none transition-colors hover:bg-[var(--feed-control)]/70 focus-visible:ring-2 focus-visible:ring-ring", (busy || disabledReason) && "opacity-60")}
+          data-flag-acknowledge
+          onClick={() => { if (!busy && !disabledReason) onAcknowledge(); }}
+          type="button"
+        >
+          {busy ? <Loader2Icon aria-hidden="true" className="size-4 animate-spin" /> : <CheckIcon aria-hidden="true" className="size-4" />}
+          {busy ? "Saving…" : "Acknowledge"}
+        </button>
+      )}
+      {disabledReason && !done ? <p className="text-xs text-muted-foreground" data-review-disabled-reason>{disabledReason}</p> : null}
+      {error ? <p className="text-xs text-destructive" role="alert">{error}</p> : null}
+    </div>
+  );
+}

package/components/newsroom-ops-overview.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { usePathname, useRouter } from "next/navigation";
+import { usePathname } from "next/navigation";
 import { useCallback, useMemo } from "react";
 import { Badge } from "./ui/badge";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card";
@@ -21,6 +21,7 @@ import type { ReferenceRejectionReasonCode } from "../lib/reference-policy";
 import { referencePreviewsByLineage, type ReferencePreview } from "../lib/reference-preview";
 import type { NotificationFixture } from "./notification-center";
 import { NotificationCenter } from "./notification-center";
+import type { CorrectCaptureAction } from "./reference-capture-client";
 import type { ReviewChoice } from "./reference-review-card";
 
 type NewsroomOpsOverviewProps = {
@@ -38,7 +39,9 @@ type NewsroomOpsOverviewProps = {
   predictionState?: "loading" | "ready" | "error";
   /** Words for why a rating cannot be saved right now, or null. */
   disabledReason?: string | null;
-  onReview?: (reference: ReferenceRecord, action: ReferenceCurationAction, options?: { reasonCode?: ReferenceRejectionReasonCode | null; decisionRelationId?: string; shareable?: boolean }) => Promise<void> | void;
+  onReview?: (reference: ReferenceRecord, action: ReferenceCurationAction, options?: { reasonCode?: ReferenceRejectionReasonCode | null; note?: string; decisionRelationId?: string; shareable?: boolean }) => Promise<void> | void;
+  /** Saves a pasted or corrected capture (the `correctReferenceCapture` action). Without it the capture panel has no edit action. */
+  onCorrectCapture?: CorrectCaptureAction;
   /** Local real-data preview of the Notification Center (scripts/export-notification-center-fixture.py). */
   notificationFixture?: NotificationFixture | null;
 };
@@ -55,6 +58,7 @@ export function NewsroomOpsOverview({
   loading = false,
   newsroomSections,
   notificationFixture = null,
+  onCorrectCapture,
   onReview,
   predictionState = "ready",
   referenceAttachments = [],
@@ -62,7 +66,6 @@ export function NewsroomOpsOverview({
   savedCopy = null,
 }: NewsroomOpsOverviewProps) {
   const pathname = usePathname();
-  const router = useRouter();
   const liveReferences = useMemo(() => selectCanonicalReferenceRecords(references), [references]);
   // Until the live read arrives, a saved copy of the last view fills the page. It is display only.
   const showingSavedCopy = loading && !liveReferences.length && Boolean(savedCopy?.references.length);
@@ -72,14 +75,11 @@ export function NewsroomOpsOverview({
     const live = referencePreviewsByLineage(referenceAttachments);
     return showingSavedCopy && !live.size ? new Map(savedCopy!.previews) : live;
   }, [referenceAttachments, savedCopy, showingSavedCopy]);
-  const openReference = useCallback(
-    (lineageId: string) => router.push(getNewsroomNavHref(`/newsroom/references/${encodeURIComponent(lineageId)}`, demo)),
-    [demo, router],
-  );
-  const rateReference = useCallback(async (reference: ReferenceRecord, choice: ReviewChoice, reasonCode: ReferenceRejectionReasonCode | null) => {
+  const rateReference = useCallback(async (reference: ReferenceRecord, choice: ReviewChoice, reasonCode: ReferenceRejectionReasonCode | null, note?: string) => {
     const decision = shownDecisions.get(referenceLineageId(reference));
     await onReview?.(reference, choice, {
       reasonCode: choice === "reject" ? reasonCode : null,
+      ...(note ? { note } : {}),
       ...(decision ? { decisionRelationId: decision.decisionRelationId, shareable: false } : {}),
     });
   }, [onReview, shownDecisions]);
@@ -114,8 +114,9 @@ export function NewsroomOpsOverview({
             demo={demo}
             fixture={notificationFixture}
             humanCuratedReferenceLineageIds={humanCuratedReferenceLineageIds}
-            onOpenReference={openReference}
+            onCorrectCapture={onCorrectCapture}
             onRateReference={rateReference}
+            referenceAttachments={referenceAttachments}
             predictionLoading={predictionState === "loading"}
             previews={previews}
             referenceDisabledReason={rateDisabled}

package/components/newsroom-organizer.css

@@ -34,6 +34,17 @@ body:has(.newsroom-organizer)>[data-staging-banner]{flex-shrink:0}
 .organizer-bottom-nav{display:none}
 .organizer-bottom-nav button{appearance:none;border:0;background:transparent;color:inherit}
 .organizer-main:has(.organizer-native-board){display:flex;overflow:hidden}
+@media (min-width:768px){
+.organizer-main:has(>[data-category-steering]>[data-news-desk-section=references]){display:flex;flex-direction:column;overflow:hidden;padding-bottom:0}
+.organizer-main>[data-category-steering]:has(>[data-news-desk-section=references]){display:flex;flex-direction:column;flex:1;min-height:0}
+.organizer-main:has(>[data-category-steering]>[data-newsroom-ops-home]){display:flex;flex-direction:column;overflow:hidden;padding-bottom:0}
+.organizer-main>[data-category-steering]:has(>[data-newsroom-ops-home]){display:flex;flex-direction:column;flex:1;min-height:0}
+[data-newsroom-ops-home]{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto}
+[data-newsroom-ops-home]>[data-newsroom-overview-feeds]{display:contents}
+[data-newsroom-overview-notifications]{display:flex;flex-direction:column;flex:0 0 100%;min-height:0}
+[data-newsroom-overview-notifications]>[data-notification-center]{flex:1;min-height:0}
+[data-newsroom-overview-feeds]>:not([data-newsroom-overview-notifications]){flex:none}
+}
 .organizer-native-board{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;gap:8px}
 .organizer-board-view-toggle{display:flex;gap:4px;flex-shrink:0}
 .organizer-header-button{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:4px 12px;border:1px solid var(--org-line);font:inherit;color:inherit;background:transparent;text-decoration:none;white-space:nowrap;cursor:pointer}

package/components/newsroom-references-view.tsx

@@ -42,6 +42,8 @@ import {
 import { normalizeReferenceCurationStatus, referenceReasonCode, type ReferenceRejectionReasonCode } from "../lib/reference-policy";
 import { newsroomListRowClassName } from "../lib/newsroom-list-selection";
 import { ReferenceSourcePreview } from "./reference-source-preview";
+import { useReferencePreviewAttachments } from "./use-reference-preview-attachments";
+import { useMediaQuery } from "./use-media-query";
 import { FEED_SURFACE_PROPS, FEED_SURFACE_STYLE, ReferenceFeed } from "./reference-feed";
 import { ReferenceCapturePanel } from "./reference-capture-panel";
 import { useReferenceCapture, type CorrectCaptureAction } from "./reference-capture-client";
@@ -88,10 +90,6 @@ import { ReferenceCyclotronStatus, type ReviewRateChoice } from "./reference-cyc
 import type { PrimingRequestView } from "../lib/relevance-status";
 import type { CyclotronStatus } from "cyclotron/cyclotron-status";
 import { awaitsEditorReview, type RelevanceCuration, type RelevanceDecisionView } from "../lib/relevance-decisions";
-import {
-  loadReferenceAttachmentsForLineageId,
-  loadStoragePathUrl,
-} from "./news-desk-taxonomy-client";
 
 type NewsroomReferencesViewProps = {
   /** Present only when the host has configured optional example priming. */
@@ -154,18 +152,6 @@ const STATUS_FILTERS: Array<{ key: ReferenceListFilter; label: string }> = [
   { key: "archived", label: "Archived" },
 ];
 
-function useMediaQuery(query: string): boolean {
-  const [matches, setMatches] = useState(false);
-  useEffect(() => {
-    const mediaQuery = window.matchMedia(query);
-    const update = () => setMatches(mediaQuery.matches);
-    update();
-    mediaQuery.addEventListener("change", update);
-    return () => mediaQuery.removeEventListener("change", update);
-  }, [query]);
-  return matches;
-}
-
 function buildReferenceDetailPath(lineageId: string, demo?: boolean): string {
   return getNewsroomNavHref(`/newsroom/references/${encodeURIComponent(lineageId)}`, demo);
 }
@@ -177,100 +163,6 @@ function referenceUrl(reference: ReferenceRecord): string | null {
   return null;
 }
 
-function normalizeReferenceDetailHttpUri(value: string | null | undefined): string | null {
-  const trimmed = value?.trim();
-  if (!trimmed) return null;
-  if (/^https?:\/\//i.test(trimmed)) return trimmed;
-  return null;
-}
-
-function useReferencePreviewAttachments(
-  reference: ReferenceRecord | null,
-  referenceAttachments: ReferenceAttachmentRecord[],
-) {
-  const lineageId = reference ? referenceLineageId(reference) : "";
-  const seededAttachments = useMemo(
-    () => referenceAttachments.filter((attachment) => attachment.referenceLineageId === lineageId),
-    [lineageId, referenceAttachments],
-  );
-  const [attachments, setAttachments] = useState<ReferenceAttachmentRecord[]>(seededAttachments);
-  const [attachmentLinksById, setAttachmentLinksById] = useState<Record<string, string>>({});
-
-  useEffect(() => {
-    setAttachments(seededAttachments);
-  }, [seededAttachments]);
-
-  useEffect(() => {
-    if (!lineageId) return;
-    if (seededAttachments.length > 0) return;
-    let active = true;
-    void loadReferenceAttachmentsForLineageId(lineageId)
-      .then((loaded) => {
-        if (!active || !loaded.length) return;
-        setAttachments(loaded);
-      })
-      .catch(() => undefined);
-    return () => {
-      active = false;
-    };
-  }, [lineageId, seededAttachments.length]);
-
-  useEffect(() => {
-    if (!attachments.length) {
-      setAttachmentLinksById({});
-      return;
-    }
-    let active = true;
-    const staticLinks = new Map<string, string>();
-    const storageLookups: Array<{ id: string; storagePath: string }> = [];
-
-    for (const attachment of attachments) {
-      if (attachment.storagePath) {
-        storageLookups.push({ id: attachment.id, storagePath: attachment.storagePath });
-        continue;
-      }
-      const sourceHref = normalizeReferenceDetailHttpUri(attachment.sourceUri);
-      if (sourceHref) staticLinks.set(attachment.id, sourceHref);
-    }
-
-    if (!storageLookups.length) {
-      setAttachmentLinksById(Object.fromEntries(staticLinks.entries()));
-      return () => {
-        active = false;
-      };
-    }
-
-    setAttachmentLinksById(Object.fromEntries(staticLinks.entries()));
-    void Promise.all(storageLookups.map(async (lookup) => {
-      const result = await loadStoragePathUrl(lookup.storagePath);
-      return { id: lookup.id, url: result.url };
-    }))
-      .then((resolved) => {
-        if (!active) return;
-        const nextLinks = Object.fromEntries(staticLinks.entries());
-        for (const entry of resolved) {
-          if (entry.url) nextLinks[entry.id] = entry.url;
-        }
-        setAttachmentLinksById(nextLinks);
-      })
-      .catch(() => undefined);
-
-    return () => {
-      active = false;
-    };
-  }, [attachments]);
-
-  const previewAttachments = useMemo(
-    () => attachments.map((attachment) => ({
-      ...attachment,
-      sourceUri: attachmentLinksById[attachment.id] ?? attachment.sourceUri,
-    })),
-    [attachmentLinksById, attachments],
-  );
-
-  return previewAttachments;
-}
-
 function needsReview(reference: ReferenceRecord, decision: RelevanceDecisionView | undefined): boolean {
   return awaitsEditorReview(reference.curationStatus, decision);
 }
@@ -770,7 +662,7 @@ export function NewsroomReferencesView({
 
   return (
     <div
-      className="flex min-h-0 flex-1 flex-col gap-4 md:max-h-[calc(100dvh-8.5rem)] md:flex-row"
+      className="flex min-h-0 flex-1 flex-col gap-4 md:max-h-[100dvh] md:flex-row"
       data-detail-reserved={view === "feed" ? "true" : undefined}
       data-news-desk-section="references"
       data-detail-open={selectedReference || routeLineageId ? "true" : "false"}

package/components/notification-cards.tsx

@@ -19,17 +19,22 @@ const CARD = "flex flex-col overflow-hidden rounded-[20px] bg-[var(--feed-card)]
 const PILL_BUTTON = cn(PILL, "min-h-9 bg-[var(--feed-control)] px-3.5 text-foreground hover:bg-[var(--feed-control)]/70");
 
 /** Pulsing placeholder cards in the shape of the real ones, on screen the moment the page opens. */
-export function NotificationSkeleton({ count = 3 }: { count?: number }) {
+export function NotificationSkeleton({ bare = false, count = 3 }: { bare?: boolean; count?: number }) {
   return (
     <div aria-busy="true" aria-label="Loading what needs you" className="space-y-6" data-notification-skeleton role="status" {...FEED_SURFACE_PROPS}>
-      <div className="space-y-3">
-        <div className="h-8 w-2/3 max-w-md animate-pulse rounded-full bg-[var(--feed-control)]" />
-        <div className="h-4 w-1/3 max-w-xs animate-pulse rounded-full bg-[var(--feed-control)]" />
-      </div>
-      <div className="flex gap-2">
-        {[0, 1, 2, 3].map((index) => <div className="h-9 w-24 animate-pulse rounded-full bg-[var(--feed-control)]" key={index} />)}
-      </div>
-      <div className="grid gap-5 sm:grid-cols-2 xl:grid-cols-3">
+      {bare ? null : (
+        <>
+          <div className="space-y-3">
+            <div className="h-8 w-2/3 max-w-md animate-pulse rounded-full bg-[var(--feed-control)]" />
+            <div className="h-4 w-1/3 max-w-xs animate-pulse rounded-full bg-[var(--feed-control)]" />
+          </div>
+          <div className="h-11 animate-pulse rounded-[20px] bg-[var(--feed-card)]" />
+          <div className="flex gap-2">
+            {[0, 1, 2, 3, 4].map((index) => <div className="h-9 w-24 animate-pulse rounded-full bg-[var(--feed-control)]" key={index} />)}
+          </div>
+        </>
+      )}
+      <div className="grid grid-cols-[repeat(auto-fill,minmax(17rem,1fr))] gap-5">
         {Array.from({ length: count }, (_, index) => (
           <div className={CARD} key={index}>
             <div className="aspect-[16/10] animate-pulse bg-[var(--feed-control)]" />