@anthusai/papyrus 5.44.0 → 5.46.0

package/components/newsroom-ops-overview.tsx

@@ -1,19 +1,13 @@
 "use client";
 
 import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { useMemo } from "react";
+import { usePathname, useRouter } from "next/navigation";
+import { useCallback, useMemo } from "react";
 import { Badge } from "./ui/badge";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card";
-import type { AssignmentRecord, NewsroomSectionRecord, ReferenceRecord } from "../lib/category-repository";
+import type { AssignmentRecord, NewsroomSectionRecord, ReferenceAttachmentRecord, ReferenceRecord } from "../lib/category-repository";
 import { getNewsroomNavHref } from "../lib/newsroom-nav";
-import {
-  filterReferencesByStatus,
-  formatReferenceListDate,
-  referenceDisplayTitle,
-  referenceLineageId,
-  selectCanonicalReferenceRecords,
-} from "../lib/newsroom-references";
+import { referenceLineageId, selectCanonicalReferenceRecords, type ReferenceCurationAction } from "../lib/newsroom-references";
 import {
   buildNewsroomSectionHref,
   displayNewsroomSectionShortTitle,
@@ -23,8 +17,11 @@ import {
 } from "../lib/newsroom-sections";
 import { newsroomInboxRowClassName } from "../lib/newsroom-list-selection";
 import type { RelevanceDecisionView } from "../lib/relevance-decisions";
+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 { CyclotronRow, predictionFromDecision } from "./reference-review-card";
+import type { ReviewChoice } from "./reference-review-card";
 
 type NewsroomOpsOverviewProps = {
   assignments: AssignmentRecord[];
@@ -34,26 +31,58 @@ type NewsroomOpsOverviewProps = {
   humanCuratedReferenceLineageIds?: ReadonlySet<string>;
   newsroomSections: NewsroomSectionRecord[];
   references: ReferenceRecord[];
+  referenceAttachments?: ReferenceAttachmentRecord[];
+  /** True until the References have been read; a saved copy of the last view fills the page meanwhile. */
+  loading?: boolean;
+  savedCopy?: { references: ReferenceRecord[]; previews: Array<[string, ReferencePreview]>; decisions: Array<[string, RelevanceDecisionView]> } | null;
+  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;
+  /** Local real-data preview of the Notification Center (scripts/export-notification-center-fixture.py). */
+  notificationFixture?: NotificationFixture | null;
 };
 
 const NO_DECISIONS: ReadonlyMap<string, RelevanceDecisionView> = new Map();
-const NO_IDS: ReadonlySet<string> = new Set();
 
 export function NewsroomOpsOverview({
   actorLabel = "",
   assignments,
   decisions = NO_DECISIONS,
   demo = false,
-  humanCuratedReferenceLineageIds = NO_IDS,
+  humanCuratedReferenceLineageIds,
+  disabledReason = null,
+  loading = false,
   newsroomSections,
+  notificationFixture = null,
+  onReview,
+  predictionState = "ready",
+  referenceAttachments = [],
   references,
+  savedCopy = null,
 }: NewsroomOpsOverviewProps) {
   const pathname = usePathname();
-  const canonicalReferences = useMemo(() => selectCanonicalReferenceRecords(references), [references]);
-  const pendingReferences = useMemo(
-    () => filterReferencesByStatus(canonicalReferences, "pending").slice(0, 5),
-    [canonicalReferences],
+  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);
+  const canonicalReferences = showingSavedCopy ? savedCopy!.references : liveReferences;
+  const shownDecisions = useMemo(() => (showingSavedCopy && !decisions.size ? new Map(savedCopy!.decisions) : decisions), [decisions, savedCopy, showingSavedCopy]);
+  const previews = useMemo(() => {
+    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 decision = shownDecisions.get(referenceLineageId(reference));
+    await onReview?.(reference, choice, {
+      reasonCode: choice === "reject" ? reasonCode : null,
+      ...(decision ? { decisionRelationId: decision.decisionRelationId, shareable: false } : {}),
+    });
+  }, [onReview, shownDecisions]);
   const attentionAssignments = useMemo(
     () => assignments
       .filter((assignment) => {
@@ -69,55 +98,35 @@ export function NewsroomOpsOverview({
   );
   const coreDesks = useMemo(() => desks.filter(desk => newsroomDeskKind(desk) === "core"), [desks]);
   const rotatingDesks = useMemo(() => desks.filter(desk => newsroomDeskKind(desk) === "rotating"), [desks]);
+  const rateDisabled = disabledReason ?? (showingSavedCopy ? "Confirming your sign-in. You can answer in a moment." : null);
 
   return (
     <div
-      className="space-y-8 font-sans"
+      className="space-y-12 font-sans"
       data-news-desk-section="overview"
       data-newsroom-ops-home="true"
     >
-      <div className="space-y-8" data-newsroom-overview-feeds>
-        <div aria-label="Notification Center feed" className="newsroom-overview-feed-frame rounded-xl border bg-card p-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" data-newsroom-overview-notifications role="region" tabIndex={0}>
+      <div className="space-y-12" data-newsroom-overview-feeds>
+        <div data-newsroom-overview-notifications>
           <NotificationCenter
             actorLabel={actorLabel}
-            decisions={decisions}
+            decisions={shownDecisions}
             demo={demo}
+            fixture={notificationFixture}
             humanCuratedReferenceLineageIds={humanCuratedReferenceLineageIds}
+            onOpenReference={openReference}
+            onRateReference={rateReference}
+            predictionLoading={predictionState === "loading"}
+            previews={previews}
+            referenceDisabledReason={rateDisabled}
             references={canonicalReferences}
+            referencesLoading={loading && !canonicalReferences.length}
           />
         </div>
-        <section aria-label="Needs attention" className="space-y-3">
-          <h2 className="text-sm font-medium text-muted-foreground">Needs attention</h2>
-          {pendingReferences.length || attentionAssignments.length ? (
+        {attentionAssignments.length ? (
+          <section aria-label="Open assignments" className="space-y-3">
+            <h2 className="text-sm font-medium text-muted-foreground">Open assignments</h2>
             <div className="space-y-2">
-              {pendingReferences.map((reference) => {
-                const lineageId = referenceLineageId(reference);
-                const href = getNewsroomNavHref(`/newsroom/references/${encodeURIComponent(lineageId)}`, demo);
-                const active = pathname === href || pathname.startsWith(`${href}/`);
-                return (
-                  <Link
-                    aria-current={active ? "true" : undefined}
-                    className={newsroomInboxRowClassName(active)}
-                    data-newsroom-inbox-item="reference"
-                    data-newsroom-list-row
-                    data-selected={active || undefined}
-                    data-newsroom-card
-                    data-newsroom-card-id={lineageId}
-                    href={href}
-                    key={lineageId}
-                  >
-                    <div className="min-w-0 flex-1 space-y-1">
-                      <p className="truncate text-sm font-medium text-foreground">{referenceDisplayTitle(reference)}</p>
-                      <p className="text-xs text-muted-foreground">Review source intake · {formatReferenceListDate(reference)}</p>
-                      <div data-needs-attention-suggestion={lineageId}>
-                        <CyclotronRow prediction={decisions.get(lineageId) ? predictionFromDecision(decisions.get(lineageId)!) : { state: "none" }} />
-                      </div>
-                      <p className="text-xs font-medium text-foreground">Open it to Accept or Reject in the review queue</p>
-                    </div>
-                    <Badge className="mt-0.5 shrink-0" variant="outline">Pending</Badge>
-                  </Link>
-                );
-              })}
               {attentionAssignments.map((assignment) => {
                 const href = getNewsroomNavHref(`/newsroom/assignments/${encodeURIComponent(assignment.id)}`, demo);
                 const active = pathname === href || pathname.startsWith(`${href}/`);
@@ -140,14 +149,8 @@ export function NewsroomOpsOverview({
                 );
               })}
             </div>
-          ) : (
-            <Card>
-              <CardContent className="p-4 text-sm text-muted-foreground">
-                No pending references or open assignments. Check those destinations for other work.
-              </CardContent>
-            </Card>
-          )}
-        </section>
+          </section>
+        ) : null}
 
         {desks.length ? (
           <section aria-label="Sections" className="space-y-3" data-newsroom-ops-desks>

package/components/newsroom-ops-shell.tsx

@@ -143,6 +143,8 @@ export function NewsroomOpsShell({ activeTab, appTitle, backHref = "/", backLabe
     media.addEventListener("change", change);
     return () => { document.removeEventListener("focusin", remember); media.removeEventListener("change", change); cancelAnimationFrame(frame); };
   }, []);
+  // The mobile top bar prefers the brand's compact mark, then scales the full logo; the serif title is the no-logo fallback.
+  const MastheadLogo = SITE_BRAND.components?.NewsroomLogoCompact ?? SITE_BRAND.components?.NewsroomLogo;
   const activePath = browserPathToInternalNewsroomPath(pathname ?? "/newsroom");
   const sidebarToggleLabel = collapsed ? "Expand sidebar" : "Collapse sidebar";
   const sidebarToggle = <button type="button" className="organizer-toggle" title={sidebarToggleLabel}
@@ -162,10 +164,10 @@ export function NewsroomOpsShell({ activeTab, appTitle, backHref = "/", backLabe
     <div className="organizer-workspace">
       <header className="organizer-topbar" data-newsroom-ops-topbar>
         {showNavigation && collapsed && sidebarToggle}
-        <Link className="organizer-masthead" href={backHref} title={backLabel}>{appTitle}</Link>
+        <Link className="organizer-masthead" href={backHref} title={backLabel}>{MastheadLogo ? <MastheadLogo className="organizer-masthead-logo" /> : appTitle}</Link>
         <h1 data-newsroom-ops-title>{pageTitle}</h1><OrganizerSearch demo={demo} /><div className="organizer-header-actions">{headerActions}</div><Account placement="header" />
       </header>
-      <main className="organizer-main">{demo && <p className="organizer-demo-notice">Demo workspace · synthetic examples</p>}{children}</main>
+      <main className="organizer-main">{demo && !session?.shell.dashboard?.realDataPreview && <p className="organizer-demo-notice">Demo workspace · synthetic examples</p>}{children}</main>
     </div>
     {showNavigation && <NewsroomMobileNavigation activeTab={activeTab} items={ORGANIZER_PRIMARY_NAV.map(item => ({ ...item, href: getNewsroomNavHref(item.path, demo) }))}
       chat={consoleState?.shouldOfferConsole ? { open: consoleState.open, onOpen: consoleState.openConsole } : undefined}

package/components/newsroom-organizer.css

@@ -18,13 +18,12 @@ body:has(.newsroom-organizer)>[data-staging-banner]{flex-shrink:0}
 .organizer-workspace{display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden;padding:0 16px}
 .organizer-topbar{height:48px;min-height:48px;display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--org-line)}
 .organizer-masthead{font:900 28px var(--font-wordmark),Georgia,serif;white-space:nowrap;max-width:30vw;overflow:hidden;text-overflow:ellipsis}
+.organizer-masthead-logo{display:block;height:24px;width:auto;max-width:36vw;overflow:visible}
 .organizer-topbar h1{font:400 12px var(--kb-theme-ui-font);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
 .organizer-toggle{display:flex;align-items:center;justify-content:center;width:36px;min-height:36px;padding:0;border:1px solid var(--org-line);flex-shrink:0}
 .organizer-sidebar-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.organizer-sidebar-head .organizer-brand{flex:1;min-width:0}
 .organizer-header-actions{display:flex;align-items:center;gap:8px;min-width:0;max-width:45%;overflow-x:auto}
 .organizer-main{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;flex:1;padding:16px 0}
-.newsroom-overview-feed-frame{height:auto}
-@media(min-width:640px){.newsroom-overview-feed-frame{height:38rem;overflow-y:auto}}
 .organizer-main>[data-category-steering]{min-height:0}.organizer-demo-notice{font-size:11px;color:var(--org-muted);margin-bottom:12px}
 .organizer-account{display:flex;align-items:center;gap:10px;min-height:44px;flex-shrink:0;border:1px solid var(--org-line);padding:8px;text-align:left;border-radius:3px}
 .organizer-account span{min-width:0}.organizer-account strong{display:block;font:600 11px var(--kb-theme-ui-font);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.organizer-account small{display:block;font-size:9px;color:var(--org-muted);margin-top:2px}
@@ -347,3 +346,51 @@ body:has(.newsroom-organizer)>[data-staging-banner]{flex-shrink:0}
 .news-desk-columns--administration .news-desk-newsletter__text{margin:0;padding:12px;max-height:280px;overflow:auto;border:1px solid var(--org-line);font:400 12px/1.5 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
 .news-desk-columns--administration .news-desk-newsletter__filters{display:flex;flex-wrap:wrap;gap:12px 24px}
 .news-desk-columns--administration .news-desk-newsletter__filters .news-desk-doctrine-card__field{min-width:180px}
+
+/* The References feed is rounded and borderless (Ryan's design rule): flat tones and rounded rectangles instead of lines and boxes.
+   The newsroom chrome squares every "rounded" class above; inside a [data-feed-surface] the rounded classes mean what they say.
+   The repeated attribute raises specificity over the squaring rules without !important escalation. */
+.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface] [class*="rounded-full"],
+.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface][class*="rounded-full"] { border-radius: 9999px !important; }
+.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface] [class*="rounded-[20px]"],
+.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface][class*="rounded-[20px]"] { border-radius: 20px !important; }
+.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface] [class*="rounded-2xl"],
+.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface][class*="rounded-2xl"] { border-radius: 16px !important; }
+.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface] [class*="rounded-[16px]"],
+.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface][class*="rounded-[16px]"] { border-radius: 16px !important; }
+.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface] [class*="rounded-3xl"],
+.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface][class*="rounded-3xl"] { border-radius: 24px !important; }
+
+/* Feed tones. Light: cards a touch lighter than the page, footers between, controls a touch darker. Dark: each step lifts toward the ink.
+   Also set on the portaled mobile sheet, which carries the theme attributes itself. */
+[data-kanbus-theme] [data-feed-surface], [data-kanbus-theme][data-feed-surface] {
+  --feed-card: color-mix(in oklab, var(--kb-theme-paper) 35%, white);
+  --feed-footer: color-mix(in oklab, var(--kb-theme-paper) 70%, white);
+  --feed-control: color-mix(in oklab, var(--kb-theme-paper) 90%, var(--kb-theme-ink));
+}
+[data-kanbus-theme][data-color-mode="dark"] [data-feed-surface], [data-kanbus-theme][data-color-mode="dark"][data-feed-surface] {
+  --feed-card: color-mix(in oklab, var(--kb-theme-paper) 94%, var(--kb-theme-ink));
+  --feed-footer: color-mix(in oklab, var(--kb-theme-paper) 90%, var(--kb-theme-ink));
+  --feed-control: color-mix(in oklab, var(--kb-theme-paper) 80%, var(--kb-theme-ink));
+}
+
+/* Borderless detail pane, Add panel and mobile sheet ([data-feed-flat]): no border, rule or box anywhere inside. Regions are told apart
+   by tone (card, footer, control) and shapes are rounded rectangles. The repeated attribute outranks the newsroom chrome's own rules. */
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat],
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] * { border-width: 0 !important; }
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] *:not(:focus-visible) { box-shadow: none; }
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] :is([data-slot=separator], hr) { display: none !important; }
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] :is(button, [role=button], [data-slot=badge]):not([aria-pressed=true]):not([data-slot=sheet-close]):not([class*="hover:bg-muted"]) {
+  background: var(--feed-control) !important; border-radius: 9999px !important; color: var(--foreground, inherit);
+}
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] :is(button, [role=button])[aria-pressed=true]:not([class*="destructive"]) {
+  background: var(--primary) !important; color: var(--primary-foreground) !important; border-radius: 9999px !important;
+}
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] :is(button, [role=button])[aria-pressed=true][class*="destructive"] { border-radius: 9999px !important; }
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] :is(textarea, input:not([type=radio]):not([type=checkbox]), select, details, [data-cyclotron-choice]:not([data-predicted])) {
+  background: var(--feed-control) !important; border-radius: 16px !important;
+}
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] [data-cyclotron-choice] { border-radius: 9999px !important; }
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] [data-review-queue-bar] { background: var(--feed-footer) !important; }
+/* The rating grid keeps its own rounded rectangles in the borderless panes (not the pill shape the flat rules give other buttons). */
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] [data-rating-grid] :is(button, [data-cyclotron-choice]) { border-radius: 16px !important; }