@anthusai/papyrus 1.9.0 → 1.11.0

package/components/newsroom-article-editor.tsx

@@ -14,10 +14,15 @@ import {
   DialogTitle,
 } from "./ui/dialog";
 import { Input } from "./ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
+import { isLocalPreviewEnabled } from "../lib/local-preview";
+import { newsroomDeskOptions } from "../lib/newsroom-sections";
+import { StoryReportingTrailView } from "./story-reporting-trail";
+import { loadStoryReportingTrail } from "./story-reporting-trail-client";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "./ui/select";
 import { Spinner } from "./ui/spinner";
 import { Tabs, TabsList, TabsTrigger } from "./ui/tabs";
 import { Textarea } from "./ui/textarea";
+import { FRONT_MATTER_BLURB_KEY, FRONT_MATTER_SUBTITLE_KEY, FRONT_MATTER_TITLE_KEY, readFrontMatterText, writeFrontMatterText } from "../lib/front-matter-fields";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
 import { ContentActionFailure, type ContentActionError } from "../lib/content-actions-client";
 import { newsroomHref } from "../lib/newsroom-base-path";
@@ -59,7 +64,7 @@ type ValidationState =
   | { status: "unavailable"; message: string };
 
 type Notice = { tone: "ok" | "error" | "info"; text: string };
-type MobileTab = "edit" | "preview";
+type MobileTab = "edit" | "preview" | "trail" | "references";
 
 function lineStartIndex(text: string, line: number): number {
   let index = 0;
@@ -91,10 +96,15 @@ function failureMessage(error: unknown): string {
   return error instanceof Error ? error.message : "The request failed.";
 }
 
-export function NewsroomArticleEditor({ articleId, demo }: { articleId: string; demo: boolean }) {
+const NO_DESK_VALUE = "__no-desk__";
+
+export function NewsroomArticleEditor({ articleId, demo, embedded = false }: { articleId: string; demo: boolean; embedded?: boolean }) {
   const session = useOptionalNewsDeskClient();
-  const blocked = !demo && articlesAccessBlocked(session?.shell.phase);
-  const backend: ArticlesBackend = useMemo(() => resolveArticlesBackend(demo), [demo]);
+  const blocked = !(demo || isLocalPreviewEnabled()) && articlesAccessBlocked(session?.shell.phase);
+  const previewMode = demo || isLocalPreviewEnabled();
+  const backend: ArticlesBackend = useMemo(() => resolveArticlesBackend(previewMode), [previewMode]);
+  const [activeArticleId, setActiveArticleId] = useState(articleId);
+  useEffect(() => { setActiveArticleId(articleId); }, [articleId]);
   const isNew = articleId === "new";
 
   const [editor, setEditor] = useState<NewsroomArticleEditorState | null>(isNew ? emptyArticle() : null);
@@ -108,8 +118,15 @@ export function NewsroomArticleEditor({ articleId, demo }: { articleId: string;
   const [notice, setNotice] = useState<Notice | null>(null);
   const [conflictOpen, setConflictOpen] = useState(false);
   const [unpublishOpen, setUnpublishOpen] = useState(false);
-  const [mobileTab, setMobileTab] = useState<MobileTab>("edit");
+  const [mobileTab, setMobileTab] = useState<MobileTab>("preview");
+  const [focusedReferenceId, setFocusedReferenceId] = useState<string | null>(null);
+  const [lineageId, setLineageId] = useState<string | null>(null);
+  const [latestVersion, setLatestVersion] = useState<{ id: string; number: number } | null>(null);
+  const latestVersionNumber = latestVersion?.number ?? null;
+  const [changeReason, setChangeReason] = useState("");
+  const citedKeys = useMemo(() => Object.values(((bodyIr as { papyrus?: { citations?: Record<string, string[]> } } | null)?.papyrus?.citations) ?? {}).flat(), [bodyIr]);
   const [sections, setSections] = useState<string[]>([]);
+  const deskOptions = useMemo(() => newsroomDeskOptions(session?.shell.dashboard?.newsroomSections ?? []), [session?.shell.dashboard?.newsroomSections]);
   const [reloadToken, setReloadToken] = useState(0);
   const [imageUrls, setImageUrls] = useState<Record<string, string>>({});
   const [imageUploading, setImageUploading] = useState(false);
@@ -118,17 +135,18 @@ export function NewsroomArticleEditor({ articleId, demo }: { articleId: string;
   const frontMatterRef = useRef<HTMLTextAreaElement | null>(null);
   const bodyRef = useRef<HTMLTextAreaElement | null>(null);
   const imageInputRef = useRef<HTMLInputElement | null>(null);
-  const mediaBackend = useMemo(() => resolveMediaBackend(demo), [demo]);
+  const mediaBackend = useMemo(() => resolveMediaBackend(previewMode), [previewMode]);
   const validationSequence = useRef(0);
 
   useEffect(() => {
     if (blocked || isNew) return;
     let cancelled = false;
     backend
-      .loadArticle(articleId)
+      .loadArticle(activeArticleId)
       .then((article) => {
         if (cancelled) return;
         setEditor(stateFromArticle(article));
+        setLineageId(article.lineageId ?? null);
         setAliases(article.aliases);
         setEverPublished(article.everPublished);
         setSlugEdited(true);
@@ -140,7 +158,7 @@ export function NewsroomArticleEditor({ articleId, demo }: { articleId: string;
     return () => {
       cancelled = true;
     };
-  }, [articleId, backend, blocked, isNew, reloadToken]);
+  }, [activeArticleId, backend, blocked, isNew, reloadToken]);
 
   useEffect(() => {
     if (blocked) return;
@@ -234,8 +252,12 @@ export function NewsroomArticleEditor({ articleId, demo }: { articleId: string;
     patchEditor(patch);
   };
 
+  const changeFrontMatterField = (key: string, value: string) => {
+    if (editor) changeFrontMatter(writeFrontMatterText(editor.frontMatterYaml, key, value));
+  };
+
   const goToLine = (location: ErrorLocation) => {
-    setMobileTab("edit");
+    setMobileTab("preview");
     window.setTimeout(() => {
       const target = location.field === "frontMatterYaml" ? frontMatterRef.current : bodyRef.current;
       if (!target) return;
@@ -274,6 +296,41 @@ export function NewsroomArticleEditor({ articleId, demo }: { articleId: string;
     }
   };
 
+  useEffect(() => {
+    if (!lineageId || isNew) { setLatestVersion(null); return; }
+    let cancelled = false;
+    loadStoryReportingTrail(lineageId, activeArticleId)
+      .then(trail => { if (!cancelled) { const newest = trail.versions[0]; setLatestVersion(newest ? { id: newest.id, number: newest.versionNumber } : null); } })
+      .catch(() => { if (!cancelled) setLatestVersion(null); });
+    return () => { cancelled = true; };
+  }, [activeArticleId, isNew, lineageId, reloadToken]);
+
+  const saveNewVersion = useCallback(async () => {
+    if (!editor || editor.id === null) return;
+    setBusy("save");
+    try {
+      const result = await backend.actions.saveItemDraft({
+        id: editor.id,
+        type: editor.type,
+        slug: editor.slug,
+        section: editor.section.trim() ? editor.section.trim() : null,
+        frontMatterYaml: editor.frontMatterYaml,
+        bodyMarkus: editor.bodyMarkus,
+        aliases,
+        expectedContentHash: editor.contentHash,
+        newVersion: true,
+        changeReason: changeReason.trim() || null,
+      });
+      setChangeReason("");
+      setActiveArticleId(result.item.id);
+      setNotice({ tone: "ok", text: `Saved as version ${result.item.versionNumber ?? ""}.` });
+    } catch (error) {
+      setNotice({ tone: "error", text: failureMessage(error) });
+    } finally {
+      setBusy(null);
+    }
+  }, [aliases, backend, changeReason, editor]);
+
   const saveDraft = useCallback(async (): Promise<string | null> => {
     if (!editor) return null;
     setBusy("save");
@@ -400,8 +457,9 @@ export function NewsroomArticleEditor({ articleId, demo }: { articleId: string;
 
     const slugLocked = everPublished;
     const invalid = validation.status === "invalid" || validation.status === "unavailable";
-    const publishBlocked = invalid || validation.status === "checking" || busy !== null || !editor.slug.trim();
-    const saveBlocked = invalid || busy !== null || !editor.slug.trim() || (!editor.dirty && editor.id !== null);
+    const isOlderVersion = latestVersionNumber !== null && editor.versionNumber !== null && editor.versionNumber < latestVersionNumber;
+    const publishBlocked = isOlderVersion || invalid || validation.status === "checking" || busy !== null || !editor.slug.trim();
+    const saveBlocked = isOlderVersion || invalid || busy !== null || !editor.slug.trim() || (!editor.dirty && editor.id !== null);
     const stagingUrl = stagingPreviewUrl(
       process.env.NEXT_PUBLIC_PAPYRUS_STAGING_URL,
       editor.type,
@@ -480,6 +538,16 @@ export function NewsroomArticleEditor({ articleId, demo }: { articleId: string;
                 {busy === "save" ? <Spinner /> : null}
                 Save draft
               </Button>
+              <Button
+                data-newsroom-article-save-version
+                disabled={isOlderVersion || invalid || busy !== null || editor.id === null || !editor.dirty}
+                onClick={() => void saveNewVersion()}
+                size="sm"
+                type="button"
+                variant="outline"
+              >
+                Save as new version
+              </Button>
               <Button
                 data-newsroom-article-publish
                 disabled={publishBlocked}
@@ -493,7 +561,7 @@ export function NewsroomArticleEditor({ articleId, demo }: { articleId: string;
               {editor.status === "published" ? (
                 <Button
                   data-newsroom-article-unpublish
-                  disabled={busy !== null}
+                  disabled={isOlderVersion || busy !== null}
                   onClick={() => setUnpublishOpen(true)}
                   size="sm"
                   type="button"
@@ -511,16 +579,9 @@ export function NewsroomArticleEditor({ articleId, demo }: { articleId: string;
             </div>
           ) : null}
 
-          <Tabs className="lg:hidden" defaultValue="edit" onValueChange={(value) => setMobileTab(value as MobileTab)} value={mobileTab}>
-            <TabsList>
-              <TabsTrigger className="min-w-[6rem]" value="edit">Edit</TabsTrigger>
-              <TabsTrigger className="min-w-[6rem]" value="preview">Preview</TabsTrigger>
-            </TabsList>
-          </Tabs>
-
-          <div className="grid gap-6 lg:grid-cols-2">
+          <div className="grid gap-6">
             <div
-              className={cn("min-w-0 space-y-4", mobileTab === "edit" ? "block" : "hidden", "lg:block")}
+              className="min-w-0 space-y-4"
               data-newsroom-article-edit-column
             >
               <div className="grid gap-3 sm:grid-cols-3">
@@ -543,18 +604,29 @@ export function NewsroomArticleEditor({ articleId, demo }: { articleId: string;
                   </Select>
                 </label>
                 <label className="space-y-1 text-sm font-medium">
-                  <span>Section</span>
-                  <Input
-                    data-newsroom-article-section
-                    list="newsroom-article-sections"
-                    onChange={(event) => patchEditor({ section: event.target.value })}
-                    value={editor.section}
-                  />
-                  <datalist id="newsroom-article-sections">
-                    {sections.map((section) => (
-                      <option key={section} value={section} />
-                    ))}
-                  </datalist>
+                  <span>Desk</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>
+                    <SelectContent>
+                      <SelectItem value={NO_DESK_VALUE}>No desk</SelectItem>
+                      {(["core", "rotating"] as const).map((kind) => deskOptions.some(option => option.kind === kind) ? (
+                        <SelectGroup key={kind}>
+                          <SelectLabel>{kind === "core" ? "Core desks" : "Rotating desks"}</SelectLabel>
+                          {deskOptions.filter(option => option.kind === kind).map((option) => (
+                            <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>
+                          ))}
+                        </SelectGroup>
+                      ) : null)}
+                    </SelectContent>
+                  </Select>
+                  {editor.section.trim() && !deskOptions.some(option => option.value === editor.section) ? <small className="newsroom-desk-legacy-value">Old section value: {editor.section.trim()}</small> : null}
                 </label>
                 <label className="space-y-1 text-sm font-medium">
                   <span>Slug</span>
@@ -571,8 +643,27 @@ export function NewsroomArticleEditor({ articleId, demo }: { articleId: string;
                 </label>
               </div>
 
+                {isOlderVersion ? <p className="newsroom-article-older-version" data-newsroom-article-older-version role="status">
+                This is version {editor.versionNumber} of {latestVersionNumber}, shown read-only. <button className="newsroom-article-link-button" onClick={() => setActiveArticleId(latestVersion?.id ?? activeArticleId)} type="button">Open the latest version</button>
+              </p> : null}
+              <div aria-label="Story view" className="newsroom-article-view-toggle" role="group">
+              <button aria-pressed={mobileTab === "preview"} className="organizer-header-button" data-newsroom-article-view="preview" onClick={() => setMobileTab("preview")} type="button">Preview</button>
+              <button aria-pressed={mobileTab === "edit"} className="organizer-header-button" data-newsroom-article-view="edit" onClick={() => setMobileTab("edit")} type="button">Edit</button>
+              <button aria-pressed={mobileTab === "trail"} className="organizer-header-button" data-newsroom-article-view="trail" onClick={() => setMobileTab("trail")} type="button">Messages</button>
+              <button aria-pressed={mobileTab === "references"} className="organizer-header-button" data-newsroom-article-view="references" onClick={() => { setFocusedReferenceId(null); setMobileTab("references"); }} type="button">References</button>
+            </div>
+              {(mobileTab === "trail" || mobileTab === "references") && editor.id ? <StoryReportingTrailView focusedReferenceId={focusedReferenceId} onShowReference={(referenceId) => { setFocusedReferenceId(referenceId); setMobileTab("references"); }} view={mobileTab === "references" ? "references" : "messages"} citedKeys={citedKeys} demo={previewMode} itemId={editor.id} lineageId={lineageId} onOpenVersion={(versionId) => { setActiveArticleId(versionId); setMobileTab("preview"); }} /> : null}
+              <div className={cn("space-y-4", mobileTab === "edit" ? "block" : "hidden")} data-newsroom-article-raw-code>
+              <div className="newsroom-article-front-matter-fields" data-newsroom-article-fields>
+                <label><span>Title</span><Input data-newsroom-article-field="title" onChange={(event) => changeFrontMatterField(FRONT_MATTER_TITLE_KEY, event.target.value)} value={readFrontMatterText(editor.frontMatterYaml, FRONT_MATTER_TITLE_KEY)} /></label>
+                <label><span>Subtitle</span><Input data-newsroom-article-field="subtitle" onChange={(event) => changeFrontMatterField(FRONT_MATTER_SUBTITLE_KEY, event.target.value)} placeholder="A line under the headline" value={readFrontMatterText(editor.frontMatterYaml, FRONT_MATTER_SUBTITLE_KEY)} /></label>
+                <label><span>Blurb</span><Textarea data-newsroom-article-field="blurb" onChange={(event) => changeFrontMatterField(FRONT_MATTER_BLURB_KEY, event.target.value)} placeholder="Two or three lines that describe the story on the board and in listings" rows={3} value={readFrontMatterText(editor.frontMatterYaml, FRONT_MATTER_BLURB_KEY)} /></label>
+              </div>
+              <Input aria-label="What changed in this version" className="max-w-xl" onChange={(event) => setChangeReason(event.target.value)} placeholder="What changed? Recorded when you save as a new version." value={changeReason} />
+              <details className="newsroom-article-front-matter" data-newsroom-article-front-matter-details>
+                <summary>Front matter (YAML)</summary>
               <label className="block space-y-1 text-sm font-medium">
-                <span>Front matter (YAML)</span>
+                <span className="sr-only">Front matter (YAML)</span>
                 <Textarea
                   className={TEXTAREA_CLASS}
                   data-newsroom-article-front-matter
@@ -583,10 +674,11 @@ export function NewsroomArticleEditor({ articleId, demo }: { articleId: string;
                   value={editor.frontMatterYaml}
                 />
               </label>
+              </details>
 
               <div className="space-y-1 text-sm font-medium">
                 <div className="flex flex-wrap items-center justify-between gap-2">
-                  <label htmlFor="newsroom-article-body">Body (Markus)</label>
+                  <label className="sr-only" htmlFor="newsroom-article-body">Story body</label>
                   <Button
                     data-newsroom-article-insert-image
                     disabled={editor.id === null || imageUploading || busy !== null}
@@ -664,16 +756,20 @@ export function NewsroomArticleEditor({ articleId, demo }: { articleId: string;
                   })}
                 </ul>
               ) : null}
+              </div>
             </div>
 
             <div
-              className={cn("min-w-0", mobileTab === "preview" ? "block" : "hidden", "lg:block")}
+              className={cn("min-w-0", mobileTab === "preview" ? "block" : "hidden")}
               data-newsroom-article-preview-column
             >
               <div className="rounded-xl border border-border bg-card p-4" data-newsroom-article-preview>
-                <p className="mb-2 text-[0.7rem] font-semibold uppercase tracking-[0.08em] text-muted-foreground">
-                  Preview
-                </p>
+                {(readFrontMatterText(editor.frontMatterYaml, FRONT_MATTER_SUBTITLE_KEY) || readFrontMatterText(editor.frontMatterYaml, FRONT_MATTER_BLURB_KEY)) ? (
+                  <div className="newsroom-article-summary" data-newsroom-article-summary>
+                    {readFrontMatterText(editor.frontMatterYaml, FRONT_MATTER_SUBTITLE_KEY) ? <p className="newsroom-article-subtitle">{readFrontMatterText(editor.frontMatterYaml, FRONT_MATTER_SUBTITLE_KEY)}</p> : null}
+                    {readFrontMatterText(editor.frontMatterYaml, FRONT_MATTER_BLURB_KEY) ? <p className="newsroom-article-blurb">{readFrontMatterText(editor.frontMatterYaml, FRONT_MATTER_BLURB_KEY)}</p> : null}
+                  </div>
+                ) : null}
                 {invalid && bodyIr ? (
                   <p className="mb-2 text-xs text-muted-foreground">Showing the last valid version.</p>
                 ) : null}
@@ -725,6 +821,8 @@ export function NewsroomArticleEditor({ articleId, demo }: { articleId: string;
     );
   })();
 
+  if (embedded) return <div className="newsroom-embedded-article">{body}</div>;
+
   return (
     <NewsroomOpsShell
       activeTab="articles"

package/components/newsroom-assignment-detail.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import Link from "next/link";
+import { useState } from "react";
+import type { AssignmentRecord } from "../lib/category-repository";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "./ui/select";
+
+export type AssignmentDeskOption = { value: string; label: string; kind: "core" | "rotating" };
+const NO_DESK_VALUE = "__no-desk__";
+
+const assignmentDateFormat = new Intl.DateTimeFormat(undefined, { dateStyle: "medium", timeStyle: "short" });
+
+function formattedTimestamp(value: string | null | undefined): string | null {
+  if (!value) return null;
+  const parsed = new Date(value);
+  return Number.isNaN(parsed.getTime()) ? value : assignmentDateFormat.format(parsed);
+}
+
+type DetailField = { label: string; value: string | null | undefined };
+
+/**
+ * The whole assignment, laid out by container width: one column in a narrow Board panel, labelled
+ * columns when the container is wide, such as the dedicated page on a large monitor.
+ */
+export function NewsroomAssignmentDetail({ assignment, deskOptions = [], onDeskChange, pageHref, showTitle = true }: {
+  assignment: AssignmentRecord;
+  deskOptions?: AssignmentDeskOption[];
+  onDeskChange?: (deskId: string | null) => Promise<void>;
+  pageHref?: string;
+  showTitle?: boolean;
+}) {
+  const [deskError, setDeskError] = useState<string | null>(null);
+  const [savingDesk, setSavingDesk] = useState(false);
+  const currentDesk = assignment.sectionId || assignment.sectionKey || "";
+  const deskChoices = deskOptions;
+  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));
+  };
+  const facts: DetailField[] = [
+    { label: "Status", value: assignment.status },
+    { label: "Type", value: assignment.assignmentTypeKey },
+    { label: "Assignee", value: assignment.assigneeId ?? assignment.assigneeKey },
+    { label: "Section", value: assignment.sectionKey },
+    { label: "Created", value: formattedTimestamp(assignment.createdAt) },
+    { label: "Updated", value: formattedTimestamp(assignment.updatedAt) },
+    { label: "Completed", value: formattedTimestamp(assignment.completedAt) },
+  ].filter(field => field.value);
+  const prose: DetailField[] = [
+    { label: "Summary", value: assignment.summary },
+    { label: "Brief", value: assignment.brief },
+    { label: "Instructions", value: assignment.instructions },
+  ].filter(field => field.value);
+  return <article className="newsroom-assignment-detail">
+    {showTitle && <h2 className="newsroom-assignment-detail-title">{assignment.title}</h2>}
+    <dl className="newsroom-assignment-detail-facts">
+      {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>
+      <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>
+        <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)}
+        </SelectContent>
+      </Select>
+      {currentDesk && !deskChoices.some(option => option.value === currentDesk) ? <small className="newsroom-desk-legacy-value">Old section value: {currentDesk}</small> : null}
+      {deskError && <p role="alert" className="newsroom-assignment-detail-error">{deskError}</p>}
+    </label>}
+    <div className="newsroom-assignment-detail-prose">
+      {prose.map(field => <section key={field.label}><h3>{field.label}</h3><p>{field.value}</p></section>)}
+    </div>
+    {pageHref && <Link className="organizer-header-button" href={pageHref}>Open full page</Link>}
+  </article>;
+}

package/components/newsroom-board-view.tsx

@@ -1,10 +1,12 @@
 "use client";
 
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import Link from "next/link";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { IssueCollection, IssueDetailPanel, IssueTypeFilter, issueTypeFromFilter, useBoardColumnState } from "@kanbus/ui";
 import "@kanbus/ui/styles/kanban.css";
 import "./newsroom-newsprint-board.css";
+import { BoardCardExcerpts } from "./board-card-excerpts";
 import { PlusIcon } from "lucide-react";
 import { newsroomHref } from "../lib/newsroom-base-path";
 import {
@@ -21,18 +23,23 @@ import {
   type NativeBoardIssue,
 } from "../lib/newsroom-board";
 import type { AssignmentRecord, NewsroomSectionRecord } from "../lib/category-repository";
-import { displayNewsroomSectionShortTitle } from "../lib/newsroom-sections";
+import { displayNewsroomSectionShortTitle, newsroomDeskOptions } from "../lib/newsroom-sections";
 import { getContentItemName, getContentItemStageDefinitions, SITE_BRAND } from "../lib/site-brand";
 import { getNewsroomNavHref } from "../lib/newsroom-nav";
-import { loadNewsroomAssignmentPage, loadNewsroomPublishedContentItemVersions } from "./news-desk-taxonomy-client";
+import { loadNewsroomAssignmentPage, loadNewsroomPublishedContentItemVersions, saveNewsroomAssignmentDesk } from "./news-desk-taxonomy-client";
 import { usePagedContentItemVersions } from "./use-paged-content-item-versions";
 import type { ContentItemVersionRecord } from "../lib/content-item-lifecycle";
 import { useOptionalNewsDeskClient } from "./news-desk-client-provider";
 import { NewsDeskAccessGate } from "./newsroom-access-gate";
+import { isLocalPreviewEnabled } from "../lib/local-preview";
+import { NewsroomArticleEditor } from "./newsroom-article-editor";
+import { NewsroomAssignmentDetail } from "./newsroom-assignment-detail";
 import { NewsroomOpsShell, NewsroomOpsStatusBanner } from "./newsroom-ops-shell";
 import { useResolvedPapyrusTheme } from "./use-resolved-papyrus-theme";
 import { readLocalReaderSettings, subscribeReaderSettingsChanges } from "./reader-settings";
 
+/** A board with a story or assignment open lives at `?open=<id>`, distinct from the standalone page for that record. */
+const SELECTED_ISSUE_PARAMETER = "open";
 const STATIC_MOTION = { mode: "static" } as const;
 const BOARD_REFRESH_INTERVAL_MILLISECONDS = 30_000;
 const COLUMN_LOAD_MORE_DISTANCE_PIXELS = 240;
@@ -60,11 +67,21 @@ export function NewsroomBoardView({ subject, deskId }: { subject: NewsroomBoardS
   const [publishedVersions, setPublishedVersions] = useState<ContentItemVersionRecord[]>([]);
   const [assignments, setAssignments] = useState<AssignmentRecord[]>([]);
   const [view, setView] = useState<"board" | "list">("board");
-  const [selected, setSelected] = useState<string | null>(null);
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const selected = searchParams.get(SELECTED_ISSUE_PARAMETER);
+  const setSelected = useCallback((issueId: string | null) => {
+    const next = new URLSearchParams(searchParams.toString());
+    if (issueId) next.set(SELECTED_ISSUE_PARAMETER, issueId); else next.delete(SELECTED_ISSUE_PARAMETER);
+    const query = next.toString();
+    router.push(query ? `${pathname}?${query}` : pathname, { scroll: false });
+  }, [pathname, router, searchParams]);
   const [supportingRecordsLoading, setSupportingRecordsLoading] = useState(false);
   const [supportingRecordsError, setSupportingRecordsError] = useState<string | null>(null);
   const generation = useRef(0);
   const boardBodyRef = useRef<HTMLDivElement | null>(null);
+  const [boardBodyElement, setBoardBodyElement] = useState<HTMLDivElement | null>(null);
   const [typeFilter, setTypeFilter] = useState<string | null>("all");
   const showsContentItems = subject !== "assignment";
   const contentItemColumnKeyPrefix = `${contentItemBoardType()}/`;
@@ -85,14 +102,14 @@ export function NewsroomBoardView({ subject, deskId }: { subject: NewsroomBoardS
   }, []);
   useEffect(() => {
     const request = ++generation.current;
-    setAssignmentBoardIssues([]); setPublishedVersions([]); setAssignments([]); setSelected(null); setSupportingRecordsError(null);
+    setAssignmentBoardIssues([]); setPublishedVersions([]); setAssignments([]); setSupportingRecordsError(null);
     if (!allowed) { setSupportingRecordsLoading(false); return; }
     const loadSupportingRecords = () => subject !== "assignment"
       ? Promise.all([loadNewsroomPublishedContentItemVersions(), loadEveryNewsroomAssignment()]).then(([published, everyAssignment]) => {
         if (generation.current === request) { setPublishedVersions(published); setAssignments(everyAssignment); }
       })
       : loadEveryNewsroomAssignment().then(everyAssignment => {
-        if (generation.current === request) setAssignmentBoardIssues(projectAssignmentBoard(everyAssignment));
+        if (generation.current === request) { setAssignments(everyAssignment); setAssignmentBoardIssues(projectAssignmentBoard(everyAssignment)); }
       });
     const refresh = (initial: boolean) => {
       if (initial) setSupportingRecordsLoading(true);
@@ -136,6 +153,13 @@ export function NewsroomBoardView({ subject, deskId }: { subject: NewsroomBoardS
   });
   const deskTitle = session?.shell.dashboard?.newsroomSections?.find(section => section.id === deskId)?.title ?? (deskId ? displayNewsroomSectionShortTitle({ id: deskId } as NewsroomSectionRecord) : "Desk");
   const pageTitle = subject === "contentItem" ? getContentItemName().plural : subject === "desk" ? deskTitle : "Assignments";
+  const deskOptions = useMemo(() => newsroomDeskOptions(session?.shell.dashboard?.newsroomSections ?? []), [session?.shell.dashboard?.newsroomSections]);
+  const changeAssignmentDesk = async (record: AssignmentRecord, deskId: string | null) => {
+    await saveNewsroomAssignmentDesk(record.id, deskId);
+    const moved = { ...record, sectionId: deskId, sectionKey: deskId };
+    setAssignments(current => current.map(candidate => candidate.id === record.id ? moved : candidate));
+    setAssignmentBoardIssues(current => current.map(candidate => candidate.nativeId === record.id ? { ...candidate } : candidate));
+  };
   const issue = issues.find(item => item.id === selected);
   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}
@@ -152,14 +176,25 @@ export function NewsroomBoardView({ subject, deskId }: { subject: NewsroomBoardS
     <div className="organizer-native-board papyrus-newsprint-board" data-color-mode={theme}>
       {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}>
+      <div className="organizer-board-body" data-detail-open={Boolean(issue)} ref={node => { boardBodyRef.current = node; setBoardBodyElement(node); }} onScrollCapture={handleBoardScroll}>
+        <BoardCardExcerpts excerpts={issues.flatMap(item => item.kind === "contentItem" && item.excerpt ? [{ issueId: item.id, text: item.excerpt }] : [])} scope={boardBodyElement} />
         <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."} />
-        {issue && <IssueDetailPanel issue={issue} onClose={() => setSelected(null)} fields={[{ label: "CMS record ID", value: issue.nativeId }, { label: "Status", value: issue.nativeStatus }]}>
-          <Link href={getNewsroomNavHref(issue.href)}>Open {issue.type}</Link>
+        {issue && <IssueDetailPanel issue={issue} onClose={() => setSelected(null)} fields={[]}>
+          {issue.kind === "contentItem"
+            ? <>
+              <NewsroomArticleEditor key={issue.id} articleId={decodeURIComponent(issue.href.split("/").pop() ?? "")} demo={isLocalPreviewEnabled()} embedded />
+              <Link className="organizer-header-button" href={getNewsroomNavHref(issue.href)}>Open full page</Link>
+            </>
+            : (() => {
+              const record = assignments.find(candidate => candidate.id === issue.nativeId);
+              return record
+                ? <NewsroomAssignmentDetail assignment={record} deskOptions={deskOptions} onDeskChange={deskId => changeAssignmentDesk(record, deskId)} pageHref={getNewsroomNavHref(issue.href)} showTitle={false} />
+                : <Link href={getNewsroomNavHref(issue.href)}>Open {issue.type}</Link>;
+            })()}
         </IssueDetailPanel>}
       </div>
     </div>

package/components/newsroom-newsprint-board.css

@@ -36,10 +36,11 @@
   --issue-priority-bg: var(--org-paper) !important;
   background: transparent !important;
   border-radius: 0;
-  border-bottom: 1px solid var(--org-line) !important;
+  border: 0 !important;
   box-shadow: none !important;
 }
-.papyrus-newsprint-board .issue-accent-bar { border-bottom: 1px solid var(--org-line); background: var(--org-paper) !important; color: var(--org-ink) !important; }
+.papyrus-newsprint-board .issue-card + .issue-card { border-top: 1px solid var(--org-line) !important; }
+.papyrus-newsprint-board .issue-accent-bar { border-bottom: 0; background: var(--org-paper) !important; color: var(--org-ink) !important; }
 .papyrus-newsprint-board .issue-accent-id { font: 400 9px Newsroom UI, system-ui, sans-serif; letter-spacing: .8px; white-space: nowrap; color: var(--org-ink) !important; }
 .papyrus-newsprint-board .issue-accent-priority { border-radius: 0; color: var(--org-muted) !important; background: transparent !important; font-size: 8px; }
 .papyrus-newsprint-board .issue-card h3 { font: 700 19px/1.2 Newsroom Display, Georgia, serif !important; letter-spacing: -.2px; }
@@ -47,3 +48,9 @@
 .papyrus-newsprint-board .issue-card[data-selected=true] h3 { color: var(--org-ink) !important; }
 .papyrus-newsprint-board .kb-issue-detail { background: var(--org-paper); border: 1px solid var(--org-line); border-radius: 0; box-shadow: none; }
 .papyrus-newsprint-board .kb-issue-detail h2 { font: 700 28px/1.2 Newsroom Display, Georgia, serif; border-bottom: 3px double var(--org-ink); padding-bottom: 12px; }
+.papyrus-newsprint-board .issue-card .issue-accent-bar { height: auto !important; margin: 0 !important; width: 100% !important; padding: 0 !important; min-height: 0; }
+.papyrus-newsprint-board .issue-card .issue-card-content { padding-top: 2px !important; gap: 4px; }
+.papyrus-newsprint-board .issue-card h3 { margin: 0; }
+.board-card-excerpt p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--org-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+.board-card-excerpt[data-expanded="true"] p { display: block; -webkit-line-clamp: unset; }
+.board-card-excerpt button { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; color: var(--org-ink); cursor: pointer; }