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

package/components/newsroom-access-gate.tsx

@@ -6,11 +6,13 @@ import { SITE_BRAND } from "../lib/site-brand";
 import type { NewsDeskShellState } from "../lib/news-desk-session";
 import { cn } from "../lib/utils";
 import { NewsroomOpsShell } from "./newsroom-ops-shell";
+import { NewsroomOverviewSkeleton } from "./newsroom-overview-skeleton";
 import { ReaderAuthControl } from "./reader-auth-control";
 import { buttonVariants } from "./ui/button";
 
 export function NewsDeskAccessGate({ shell, showSectionTabs = false }: { shell: NewsDeskShellState | null; showSectionTabs?: boolean }) {
   const accessPhase = shell?.phase ?? "checkingAccess";
+  const pending = accessPhase === "checkingAccess" || accessPhase === "loadingDesk";
 
   return (
     <NewsroomOpsShell
@@ -21,9 +23,20 @@ export function NewsDeskAccessGate({ shell, showSectionTabs = false }: { shell:
       headerActions={(
         <Link className={cn(buttonVariants({ variant: "ghost", size: "sm" }))} href="/settings">Settings</Link>
       )}
-      pageTitle="Newsroom"
+      pageTitle={showSectionTabs ? "Notification Center" : "Newsroom"}
       showNavigation={showSectionTabs}
     >
+      {pending ? (showSectionTabs ? <NewsroomOverviewSkeleton /> : (
+        <div aria-label="Loading newsroom" className="space-y-4" data-newsroom-page-skeleton role="status">
+          <div className="h-6 w-48 rounded bg-muted" />
+          <div className="h-4 w-3/4 rounded bg-muted" />
+          <div className="grid gap-3 sm:grid-cols-2">
+            {Array.from({ length: 4 }, (_, index) => <div className="h-32 rounded-xl border bg-card p-4" key={index}>
+              <div className="h-4 w-2/3 rounded bg-muted" /><div className="mt-4 h-3 w-1/2 rounded bg-muted" />
+            </div>)}
+          </div>
+        </div>
+      )) : (
       <section aria-live="polite" data-news-desk-access={accessPhase} data-news-desk-access-phase={accessPhase}>
         <div className="space-y-3 rounded-xl border border-border bg-card p-6">
           <p className="m-0 text-[0.7rem] font-semibold uppercase tracking-[0.08em] text-muted-foreground">Access</p>
@@ -38,12 +51,13 @@ export function NewsDeskAccessGate({ shell, showSectionTabs = false }: { shell:
           ) : null}
         </div>
       </section>
+      )}
     </NewsroomOpsShell>
   );
 }
 
 function formatAccessTitle(state: NewsDeskShellState | null): string {
-  if (!state || state.phase === "checkingAccess") return "Checking Desk Credentials";
+  if (!state || state.phase === "checkingAccess") return "Checking Credentials";
   if (state.phase === "loadingDesk") return "Loading Newsroom Records";
   if (state.phase === "forbidden") return "Editor Role Required";
   if (state.phase === "error") return "Newsroom Unavailable";

package/components/newsroom-article-editor.tsx

@@ -513,8 +513,10 @@ export function NewsroomArticleEditor({ articleId, demo, embedded = false }: { a
     }
     if (!editor) {
       return (
-        <div className="flex items-center gap-2 text-sm text-muted-foreground">
-          <Spinner /> Loading article…
+        <div aria-label="Loading article" className="space-y-5" role="status">
+          <div className="h-8 w-2/3 rounded bg-muted" />
+          <div className="grid gap-4 sm:grid-cols-2"><div className="h-12 rounded bg-muted" /><div className="h-12 rounded bg-muted" /></div>
+          <div className="h-64 rounded-xl border bg-card p-4"><div className="h-4 w-5/6 rounded bg-muted" /><div className="mt-3 h-4 w-3/4 rounded bg-muted" /></div>
         </div>
       );
     }
@@ -668,21 +670,21 @@ export function NewsroomArticleEditor({ articleId, demo, embedded = false }: { a
                   </Select>
                 </label>
                 <label className="space-y-1 text-sm font-medium">
-                  <span>Desk</span>
+                  <span>Section</span>
                   <Select
                     onValueChange={(value) => {
                       if (typeof value === "string") patchEditor({ section: value === NO_DESK_VALUE ? "" : value });
                     }}
                     value={deskOptions.some(option => option.value === editor.section) ? editor.section : NO_DESK_VALUE}
                   >
-                    <SelectTrigger aria-label="Desk" className="w-full" data-newsroom-article-section>
-                      <SelectValue>{deskOptions.find(option => option.value === editor.section)?.label ?? "No desk"}</SelectValue>
+                    <SelectTrigger aria-label="Section" className="w-full" data-newsroom-article-section>
+                      <SelectValue>{deskOptions.find(option => option.value === editor.section)?.label ?? "No section"}</SelectValue>
                     </SelectTrigger>
                     <SelectContent>
-                      <SelectItem value={NO_DESK_VALUE}>No desk</SelectItem>
+                      <SelectItem value={NO_DESK_VALUE}>No section</SelectItem>
                       {(["core", "rotating"] as const).map((kind) => deskOptions.some(option => option.kind === kind) ? (
                         <SelectGroup key={kind}>
-                          <SelectLabel>{kind === "core" ? "Core desks" : "Rotating desks"}</SelectLabel>
+                          <SelectLabel>{kind === "core" ? "Core sections" : "Rotating sections"}</SelectLabel>
                           {deskOptions.filter(option => option.kind === kind).map((option) => (
                             <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>
                           ))}

package/components/newsroom-articles-view.tsx

@@ -5,7 +5,6 @@ import Link from "next/link";
 import { useEffect, useMemo, useState } from "react";
 import { Badge } from "./ui/badge";
 import { buttonVariants } from "./ui/button";
-import { Spinner } from "./ui/spinner";
 import { Tabs, TabsList, TabsTrigger } from "./ui/tabs";
 import { SITE_BRAND } from "../lib/site-brand";
 import { getNewsroomNavHref } from "../lib/newsroom-nav";
@@ -89,15 +88,16 @@ export function NewsroomArticlesView({ demo }: { demo: boolean }) {
           </TabsList>
         </Tabs>
         {loadError ? <NewsroomOpsStatusBanner tone="error">{loadError}</NewsroomOpsStatusBanner> : null}
-        {rows === null && !loadError ? (
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <Spinner /> Loading articles…
-          </div>
-        ) : null}
         {rows !== null && visibleRows.length === 0 ? (
           <p className="text-sm text-muted-foreground">Nothing here yet.</p>
         ) : null}
         <ul className="divide-y divide-border rounded-xl border border-border bg-card" data-newsroom-articles-list>
+          {rows === null && !loadError ? Array.from({ length: 5 }, (_, index) => (
+            <li aria-hidden="true" className="flex items-center justify-between px-4 py-3" key={index}>
+              <span className="w-2/3"><span className="block h-4 w-3/4 rounded bg-muted" /><span className="mt-2 block h-3 w-1/2 rounded bg-muted" /></span>
+              <span className="h-5 w-16 rounded bg-muted" />
+            </li>
+          )) : null}
           {visibleRows.map((row) => (
             <li key={row.id}>
               <Link

package/components/newsroom-assignment-detail.tsx

@@ -36,7 +36,7 @@ export function NewsroomAssignmentDetail({ assignment, deskOptions = [], onDeskC
   const changeDesk = (value: string) => {
     if (!onDeskChange) return;
     setSavingDesk(true); setDeskError(null);
-    onDeskChange(value === NO_DESK_VALUE ? null : value).catch((reason: unknown) => setDeskError(reason instanceof Error ? reason.message : "Could not save the desk.")).finally(() => setSavingDesk(false));
+    onDeskChange(value === NO_DESK_VALUE ? null : value).catch((reason: unknown) => setDeskError(reason instanceof Error ? reason.message : "Could not save the section.")).finally(() => setSavingDesk(false));
   };
   const facts: DetailField[] = [
     { label: "Status", value: assignment.status },
@@ -58,14 +58,14 @@ export function NewsroomAssignmentDetail({ assignment, deskOptions = [], onDeskC
       {facts.map(field => <div key={field.label}><dt>{field.label}</dt><dd>{field.value}</dd></div>)}
     </dl>
     {onDeskChange && <label className="newsroom-assignment-detail-desk">
-      <span>Desk</span>
+      <span>Section</span>
       <Select onValueChange={(value) => { if (typeof value === "string") changeDesk(value); }} value={deskChoices.some(option => option.value === currentDesk) ? currentDesk : NO_DESK_VALUE} disabled={savingDesk}>
-        <SelectTrigger aria-label="Desk" className="w-full" data-newsroom-assignment-desk>
-          <SelectValue>{deskChoices.find(option => option.value === currentDesk)?.label ?? "No desk"}</SelectValue>
+        <SelectTrigger aria-label="Section" className="w-full" data-newsroom-assignment-desk>
+          <SelectValue>{deskChoices.find(option => option.value === currentDesk)?.label ?? "No section"}</SelectValue>
         </SelectTrigger>
         <SelectContent>
-          <SelectItem value={NO_DESK_VALUE}>No desk</SelectItem>
-          {(["core", "rotating"] as const).map(kind => deskChoices.some(option => option.kind === kind) ? <SelectGroup key={kind}><SelectLabel>{kind === "core" ? "Core desks" : "Rotating desks"}</SelectLabel>{deskChoices.filter(option => option.kind === kind).map(option => <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>)}</SelectGroup> : null)}
+          <SelectItem value={NO_DESK_VALUE}>No section</SelectItem>
+          {(["core", "rotating"] as const).map(kind => deskChoices.some(option => option.kind === kind) ? <SelectGroup key={kind}><SelectLabel>{kind === "core" ? "Core sections" : "Rotating sections"}</SelectLabel>{deskChoices.filter(option => option.kind === kind).map(option => <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>)}</SelectGroup> : null)}
         </SelectContent>
       </Select>
       {currentDesk && !deskChoices.some(option => option.value === currentDesk) ? <small className="newsroom-desk-legacy-value">Old section value: {currentDesk}</small> : null}

package/components/newsroom-board-view.tsx

@@ -160,7 +160,7 @@ export function NewsroomBoardView({ subject, deskId }: { subject: NewsroomBoardS
   if (!allowed) return <NewsDeskAccessGate shell={session?.shell ?? null} />;
   return <NewsroomOpsShell activeTab={subject === "contentItem" ? "articles" : subject === "desk" ? "desks" : "assignments"} appTitle={SITE_BRAND.appTitle} backLabel={SITE_BRAND.backToHomeLabel} pageTitle={pageTitle}
     headerActions={<>
-      <span role="status" className="organizer-board-note">{loading ? "Loading records…" : `${issues.length} records loaded.`}</span>
+      {!loading ? <span role="status" className="organizer-board-note">{issues.length} records loaded.</span> : null}
       <div role="group" aria-label="Record presentation" className="organizer-board-view-toggle"><button type="button" className="organizer-header-button" aria-pressed={view === "board"} onClick={() => setView("board")}>Board</button><button type="button" className="organizer-header-button" aria-pressed={view === "list"} onClick={() => setView("list")}>List</button></div>
       {showsContentItems && (
         <Link className="organizer-header-button" data-newsroom-article-new href={getNewsroomNavHref(newsroomHref("articles", "new"))}>
@@ -174,11 +174,16 @@ export function NewsroomBoardView({ subject, deskId }: { subject: NewsroomBoardS
       {error && <NewsroomOpsStatusBanner tone="error">{error}</NewsroomOpsStatusBanner>}
       {subject === "desk" && <IssueTypeFilter config={config} value={typeFilter} onChange={setTypeFilter} name="Record type" className="organizer-board-type-filter" />}
       <div className="organizer-board-body" data-detail-open={Boolean(issue)} ref={boardBodyRef} onScrollCapture={handleBoardScroll}>
-        <IssueCollection issues={issues} config={config} query={{ type: subject === "desk" ? issueTypeFromFilter(typeFilter) : boardType }} view={view}
+        {loading && !issues.length ? <div aria-label="Loading board records" className="grid w-full grid-cols-1 gap-3 sm:grid-cols-3" role="status">
+          {Array.from({ length: 3 }, (_, column) => <div className="min-h-64 space-y-3 rounded-xl border bg-card p-4" key={column}>
+            <div className="h-4 w-1/2 rounded bg-muted" />
+            {Array.from({ length: 2 }, (_, row) => <div className="h-24 rounded-lg border bg-background p-3" key={row}><div className="h-4 w-3/4 rounded bg-muted" /><div className="mt-3 h-3 w-1/2 rounded bg-muted" /></div>)}
+          </div>)}
+        </div> : <IssueCollection issues={issues} config={config} query={{ type: subject === "desk" ? issueTypeFromFilter(typeFilter) : boardType }} view={view}
           motion={lowMotion ? STATIC_MOTION : undefined}
           collapsedColumns={columnState.collapsedColumns} onToggleCollapse={columnState.toggleColumn} initialScroll="start"
           selectedIssueId={selected} detailOpen={Boolean(issue)} onSelectIssue={item => setSelected(item.id)} ariaLabel={pageTitle}
-          emptyMessage={loading ? "Loading records…" : error ? "Records could not be loaded." : "No records in this selection."} />
+          emptyMessage={error ? "Records could not be loaded." : "No records in this selection."} />}
         {issue && <IssueDetailPanel issue={issue} onClose={() => setSelected(null)} fields={[]}>
           {issue.kind === "contentItem"
             ? <>

package/components/newsroom-curation-bootstrap.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import {useEffect,useState,type ReactNode} from 'react';
+import {loadProspectusAccountState} from '../lib/prospectus-account-client';
+import type {CurationBootstrap} from '../lib/curation-client';
+import {NewsroomCurationProvider} from './newsroom-curation-provider';
+
+type Fetcher=(input:string,init?:RequestInit)=>Promise<Response>;
+const CONTEXT_PATH='/api/newsroom/curation/context';
+
+function validBootstrap(value:unknown):value is CurationBootstrap{
+  const body=value as Partial<CurationBootstrap>|null;
+  const scope=body?.scope;
+  return !!scope&&[scope.accountId,scope.publicationId,scope.bindingRevision].every(item=>typeof item==='string'&&item.trim()!=='')
+    &&(body!.mode==='embedded'||body!.mode==='remote')&&Array.isArray(body!.capabilities);
+}
+
+/**
+ * Ask the server for the curation bootstrap, or null. Only a signed-in person with a selected
+ * account causes a context read; every other outcome (no Prospectus, signed out, no selection,
+ * any refusal or failure) is null, so the released CMS is unchanged.
+ */
+export async function loadCurationBootstrap(returnPath:string,fetcher:Fetcher=fetch):Promise<CurationBootstrap|null>{
+  try{
+    const account=await loadProspectusAccountState(returnPath,fetcher);
+    if(account.status!=='signedIn'||!account.selectedAccountId)return null;
+    const response=await fetcher(CONTEXT_PATH,{credentials:'same-origin',cache:'no-store'});
+    if(!response.ok)return null;
+    const body=await response.json().catch(()=>null);
+    if(!validBootstrap(body)||body.scope.accountId!==account.selectedAccountId)return null;
+    return body;
+  }catch{return null;}
+}
+
+/** Mounts the curation provider for the References tab. Fails closed to no provider content. */
+export function NewsroomCurationBootstrap({enabled=true,children}:{enabled?:boolean;children:ReactNode}){
+  const [bootstrap,setBootstrap]=useState<CurationBootstrap|null>(null);
+  useEffect(()=>{
+    if(!enabled)return;
+    let current=true;
+    void loadCurationBootstrap(window.location.pathname).then(value=>{if(current)setBootstrap(value);});
+    return()=>{current=false;setBootstrap(null);};
+  },[enabled]);
+  return <NewsroomCurationProvider bootstrap={bootstrap}>{children}</NewsroomCurationProvider>;
+}

package/components/newsroom-ops-overview.tsx

@@ -1,24 +1,13 @@
 "use client";
 
-import {
-  BookOpenIcon,
-  ClipboardListIcon,
-  FileTextIcon,
-  LayersIcon,
-  MessageSquareIcon,
-  NetworkIcon,
-  SearchIcon,
-  SettingsIcon,
-} from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useMemo } from "react";
 import { Badge } from "./ui/badge";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card";
-import type { AssignmentRecord, MessageRecord, NewsroomSectionRecord, ReferenceRecord } from "../lib/category-repository";
-import { getNewsroomNavHref, NEWSROOM_OPS_NAV, type NewsroomNavTabId } from "../lib/newsroom-nav";
+import type { AssignmentRecord, NewsroomSectionRecord, ReferenceRecord } from "../lib/category-repository";
+import { getNewsroomNavHref } from "../lib/newsroom-nav";
 import {
-  countReferencesByStatus,
   filterReferencesByStatus,
   formatReferenceListDate,
   referenceDisplayTitle,
@@ -33,57 +22,33 @@ import {
   sortNewsroomSections,
 } from "../lib/newsroom-sections";
 import { newsroomInboxRowClassName } from "../lib/newsroom-list-selection";
+import type { RelevanceDecisionView } from "../lib/relevance-decisions";
+import { NotificationCenter } from "./notification-center";
 
 type NewsroomOpsOverviewProps = {
   assignments: AssignmentRecord[];
+  actorLabel?: string;
+  decisions?: ReadonlyMap<string, RelevanceDecisionView>;
   demo?: boolean;
-  messages: MessageRecord[];
+  humanCuratedReferenceLineageIds?: ReadonlySet<string>;
   newsroomSections: NewsroomSectionRecord[];
   references: ReferenceRecord[];
 };
 
-type DestinationKey = Exclude<NewsroomNavTabId, "overview" | "desks">;
-
-const DESTINATION_ICONS: Record<DestinationKey, typeof BookOpenIcon> = {
-  articles: FileTextIcon,
-  assignments: ClipboardListIcon,
-  references: BookOpenIcon,
-  messages: MessageSquareIcon,
-  topics: LayersIcon,
-  concepts: NetworkIcon,
-  administration: SettingsIcon,
-  search: SearchIcon,
-};
-
-const DESTINATIONS = NEWSROOM_OPS_NAV.filter((item) => item.id !== "overview").map((item) => ({
-  key: item.id as DestinationKey,
-  label: item.label,
-  detail: item.detail,
-  href: item.href,
-  icon: DESTINATION_ICONS[item.id as DestinationKey],
-}));
-
-function openAssignmentCount(assignments: AssignmentRecord[]): number {
-  return assignments.filter((assignment) => {
-    const status = assignment.status?.trim().toLowerCase() ?? "";
-    return status === "open" || status === "claimed" || status === "pending";
-  }).length;
-}
-
-function recentMessageCount(messages: MessageRecord[]): number {
-  return messages.filter((message) => message.status !== "archived").length;
-}
+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,
-  messages,
+  humanCuratedReferenceLineageIds = NO_IDS,
   newsroomSections,
   references,
 }: NewsroomOpsOverviewProps) {
   const pathname = usePathname();
   const canonicalReferences = useMemo(() => selectCanonicalReferenceRecords(references), [references]);
-  const referenceCounts = useMemo(() => countReferencesByStatus(canonicalReferences), [canonicalReferences]);
   const pendingReferences = useMemo(
     () => filterReferencesByStatus(canonicalReferences, "pending").slice(0, 5),
     [canonicalReferences],
@@ -104,12 +69,6 @@ export function NewsroomOpsOverview({
   const coreDesks = useMemo(() => desks.filter(desk => newsroomDeskKind(desk) === "core"), [desks]);
   const rotatingDesks = useMemo(() => desks.filter(desk => newsroomDeskKind(desk) === "rotating"), [desks]);
 
-  const destinationCounts: Partial<Record<DestinationKey, number | null>> = {
-    references: referenceCounts.pending ?? 0,
-    assignments: openAssignmentCount(assignments),
-    messages: recentMessageCount(messages),
-  };
-
   return (
     <div
       className="space-y-8 font-sans"
@@ -117,44 +76,15 @@ export function NewsroomOpsOverview({
       data-newsroom-ops-home="true"
     >
       <div className="space-y-8" data-newsroom-overview-feeds>
-        <section aria-label="Destinations" className="space-y-3">
-          <h2 className="text-sm font-medium text-muted-foreground">Go to</h2>
-          <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
-            {DESTINATIONS.map((meta) => {
-              const key = meta.key;
-              const Icon = meta.icon;
-              const count = destinationCounts[key];
-              const href = getNewsroomNavHref(meta.href, demo);
-              return (
-                <Link
-                  className="group block rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                  data-newsroom-ops-destination={key}
-                  data-newsroom-overview-section={key}
-                  href={href}
-                  key={key}
-                >
-                  <Card className="h-full transition-colors group-hover:border-primary/40">
-                    <CardHeader className="space-y-3 p-4">
-                      <div className="flex items-center justify-between gap-2">
-                        <span className="flex size-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
-                          <Icon className="size-4" aria-hidden="true" />
-                        </span>
-                        {count != null && count > 0 ? (
-                          <Badge variant="default">{count}</Badge>
-                        ) : null}
-                      </div>
-                      <div className="space-y-0.5">
-                        <CardTitle className="text-base font-semibold">{meta.label}</CardTitle>
-                        <CardDescription>{meta.detail}</CardDescription>
-                      </div>
-                    </CardHeader>
-                  </Card>
-                </Link>
-              );
-            })}
-          </div>
-        </section>
-
+        <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}>
+          <NotificationCenter
+            actorLabel={actorLabel}
+            decisions={decisions}
+            demo={demo}
+            humanCuratedReferenceLineageIds={humanCuratedReferenceLineageIds}
+            references={canonicalReferences}
+          />
+        </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 ? (
@@ -208,16 +138,16 @@ export function NewsroomOpsOverview({
           ) : (
             <Card>
               <CardContent className="p-4 text-sm text-muted-foreground">
-                Nothing needs attention right now. Check References for new intake or open Assignments from the destinations above.
+                No pending references or open assignments. Check those destinations for other work.
               </CardContent>
             </Card>
           )}
         </section>
 
         {desks.length ? (
-          <section aria-label="Desks" className="space-y-3" data-newsroom-ops-desks>
-            <h2 className="text-sm font-medium text-muted-foreground">Desks</h2>
-            {coreDesks.length ? <h3 className="newsroom-desk-group-heading" data-newsroom-ops-desk-group="core">Core desks</h3> : null}
+          <section aria-label="Sections" className="space-y-3" data-newsroom-ops-desks>
+            <h2 className="text-sm font-medium text-muted-foreground">Sections</h2>
+            {coreDesks.length ? <h3 className="newsroom-desk-group-heading" data-newsroom-ops-desk-group="core">Core sections</h3> : null}
             <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
               {coreDesks.map((section) => (
                 <Link
@@ -237,7 +167,7 @@ export function NewsroomOpsOverview({
                 </Link>
               ))}
             </div>
-            {rotatingDesks.length ? <h3 className="newsroom-desk-group-heading" data-newsroom-ops-desk-group="rotating">Rotating desks <small>appear for a while, then rotate out</small></h3> : null}
+            {rotatingDesks.length ? <h3 className="newsroom-desk-group-heading" data-newsroom-ops-desk-group="rotating">Rotating sections <small>appear for a while, then rotate out</small></h3> : null}
             {rotatingDesks.length ? <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
               {rotatingDesks.map((section) => (
                 <Link

package/components/newsroom-ops-shell.tsx

@@ -8,7 +8,7 @@ import { cn } from "../lib/utils";
 import { useEffect, useId, useState, type ReactNode } from "react";
 import Link from "next/link";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { BookOpen, ClipboardList, Menu, Search, MessagesSquare, PanelLeftClose, PanelLeftOpen, Settings, UserRound, LogIn, LogOut } from "lucide-react";
+import { BookOpen, ClipboardList, House, Menu, Search, MessagesSquare, PanelLeftClose, PanelLeftOpen, Settings, UserRound, LogIn, LogOut } from "lucide-react";
 import { ORGANIZER_NAV_GROUPS, ORGANIZER_PRIMARY_NAV, ORGANIZER_SETTINGS_DESTINATION } from "../lib/newsroom-organizer-nav";
 import { browserPathToInternalNewsroomPath } from "../lib/newsroom-base-path";
 import { getNewsroomNavHref } from "../lib/newsroom-nav";
@@ -55,7 +55,7 @@ function OrganizerSearch({ demo }: { demo: boolean }) {
   </form>;
 }
 
-const ICONS = { articles: ClipboardList, references: BookOpen, messages: MessagesSquare };
+const ICONS = { overview: House, articles: ClipboardList, references: BookOpen, messages: MessagesSquare };
 
 /** Navigation is a presentation layer; existing route and server authorization still own access. */
 function Navigation({ activePath, demo, admin, surface, onNavigate }: { activePath: string; demo: boolean; admin: boolean; surface: string; onNavigate?: () => void }) {

package/components/newsroom-organizer.css

@@ -23,6 +23,8 @@ body:has(.newsroom-organizer)>[data-staging-banner]{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}
@@ -313,3 +315,34 @@ body:has(.newsroom-organizer)>[data-staging-banner]{flex-shrink:0}
 .news-desk-columns--administration .news-desk-delegation-decision button:focus-visible{outline:2px solid var(--org-ink);outline-offset:2px}
 @container (max-width:640px){.news-desk-columns--administration .news-desk-delegation-pending-list li{grid-template-columns:minmax(0,1fr)}.news-desk-columns--administration .news-desk-delegation-code{font-size:28px}}
 @container (max-width:640px){.news-desk-columns--administration .news-desk-delegation-form{grid-template-columns:minmax(0,1fr)}.news-desk-columns--administration .news-desk-delegation-list li{grid-template-columns:minmax(0,1fr)}}
+.news-desk-columns--administration .news-desk-monitoring__scope{display:flex;flex-wrap:wrap;gap:8px}
+.news-desk-columns--administration .news-desk-monitoring__scope button{min-height:36px;padding:4px 12px;border:1px solid var(--org-line);background:transparent;color:var(--administration-strong);font:600 12px/1.2 var(--kb-theme-ui-font);letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
+.news-desk-columns--administration .news-desk-monitoring__scope button[aria-pressed=true]{border-color:var(--org-ink);border-width:2px;text-decoration:underline;text-underline-offset:4px}
+.news-desk-columns--administration .news-desk-monitoring__list,.news-desk-columns--administration .news-desk-monitoring__queue,.news-desk-columns--administration .news-desk-monitoring__relevance{list-style:none;margin:0;padding:0;display:grid}
+.news-desk-columns--administration .news-desk-monitoring__list li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2fr);gap:4px 16px;align-items:baseline;padding:10px 0;border-top:1px solid var(--org-line);min-width:0;overflow-wrap:anywhere}
+.news-desk-columns--administration .news-desk-monitoring__list li>div{display:grid;gap:2px}
+.news-desk-columns--administration .news-desk-monitoring__queue>li{display:grid;gap:6px;padding:12px 0;border-top:1px solid var(--org-line);min-width:0}
+.news-desk-columns--administration .news-desk-monitoring__queue>li>div{display:grid;gap:2px}
+.news-desk-columns--administration .news-desk-monitoring__queue>li>div>span,.news-desk-columns--administration .news-desk-monitoring__routing{margin:0;font:400 12px/1.4 var(--kb-theme-ui-font);color:var(--administration-quiet)}
+.news-desk-columns--administration .news-desk-monitoring__queue li[data-routing=error]{padding-left:12px;border-left:3px solid var(--org-ink)}
+.news-desk-columns--administration .news-desk-monitoring__relevance{gap:4px;padding-left:12px;border-left:1px solid var(--org-line)}
+.news-desk-columns--administration .news-desk-monitoring__relevance li{display:flex;flex-wrap:wrap;gap:4px 12px;font:400 13px/1.4 var(--kb-theme-ui-font)}
+.news-desk-columns--administration .news-desk-monitoring__relevance li[data-delivery=failed] span:last-child{font-weight:700}
+.news-desk-columns--administration .news-desk-monitoring__usage{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 24px;margin:0}
+.news-desk-columns--administration .news-desk-monitoring__usage dt{font:600 11px/1.4 var(--kb-theme-ui-font);letter-spacing:.07em;text-transform:uppercase;color:var(--administration-quiet)}
+.news-desk-columns--administration .news-desk-monitoring__usage dd{margin:0;font:700 26px/1.1 var(--kb-theme-title-font);font-variant-numeric:tabular-nums}
+@container (max-width:640px){.news-desk-columns--administration .news-desk-monitoring__list li{grid-template-columns:minmax(0,1fr)}}
+
+/* Newsletter panel (components/newsletter-panel.tsx): reuses the administration card, row and button styles above. */
+.news-desk-columns--administration .news-desk-newsletter__quiet{font:400 12px/1.4 var(--kb-theme-ui-font);color:var(--administration-quiet)}
+.news-desk-columns--administration .news-desk-monitoring__usage>div{display:grid;gap:4px;align-content:start}
+.news-desk-columns--administration .news-desk-newsletter__links{display:flex;flex-wrap:wrap;gap:4px 8px}
+.news-desk-columns--administration .news-desk-newsletter__table{width:100%;border-collapse:collapse;font:400 13px/1.4 var(--kb-theme-ui-font)}
+.news-desk-columns--administration .news-desk-newsletter__table td:first-child{word-break:keep-all;overflow-wrap:break-word}
+.news-desk-columns--administration .news-desk-newsletter__table th{text-align:left;padding:6px 8px;border-bottom:2px solid var(--administration-strong);font:600 11px/1.4 var(--kb-theme-ui-font);letter-spacing:.07em;text-transform:uppercase;color:var(--administration-quiet)}
+.news-desk-columns--administration .news-desk-newsletter__table td{padding:8px;border-bottom:1px solid var(--org-line);vertical-align:top}
+.news-desk-columns--administration .news-desk-newsletter__drawer{grid-column:1/-1;display:grid;gap:12px;padding:12px 0 0;border-top:1px dashed var(--org-line);min-width:0}
+.news-desk-columns--administration .news-desk-newsletter__frame{width:100%;height:480px;border:1px solid var(--org-line);background:#fff}
+.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}

package/components/newsroom-overview-skeleton.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import * as React from "react";
+
+/** Placeholder geometry for the overview while private records or access are unresolved. */
+export function NewsroomOverviewSkeleton() {
+  return (
+    <div aria-label="Loading newsroom overview" className="space-y-8 font-sans" data-newsroom-overview-skeleton role="status">
+      <section className="newsroom-overview-feed-frame space-y-4 overflow-hidden rounded-xl border bg-card p-4" aria-label="Notification Center">
+        <div className="h-6 w-48 rounded bg-muted" />
+        <div className="h-4 w-3/4 max-w-xl rounded bg-muted" />
+        <div className="h-4 w-2/3 max-w-lg rounded bg-muted" />
+        <div className="grid gap-3 sm:grid-cols-2">
+          {Array.from({ length: 4 }, (_, index) => <div className="h-28 rounded-xl border bg-card p-4" key={index}>
+            <div className="h-4 w-2/3 rounded bg-muted" /><div className="mt-4 h-3 w-1/2 rounded bg-muted" />
+          </div>)}
+        </div>
+      </section>
+      <section aria-label="Needs attention" className="space-y-3">
+        <div className="h-4 w-32 rounded bg-muted" />
+        <div className="h-16 rounded-xl border bg-card p-4"><div className="h-4 w-1/2 rounded bg-muted" /><div className="mt-2 h-3 w-1/3 rounded bg-muted" /></div>
+      </section>
+    </div>
+  );
+}