@anthusai/papyrus 5.49.0 → 5.51.0

package/app/api/newsroom/source-frameable/route.ts

@@ -0,0 +1,12 @@
+import { NextResponse } from "next/server";
+import { checkSourceFrameable } from "../../../../lib/source-frameable";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+/** GET ?url=<source page> -> { frameable }: whether the newsroom can show that page's live preview. Cached for a day. */
+export async function GET(request: Request) {
+  const url = new URL(request.url).searchParams.get("url") ?? "";
+  const frameable = url ? await checkSourceFrameable(url) : false;
+  return NextResponse.json({ frameable }, { headers: { "cache-control": "public, max-age=86400" } });
+}

package/app/api/newsroom/source-icon/route.ts

@@ -0,0 +1,20 @@
+import { fetchSourceIcon } from "../../../../lib/source-icon";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+/** GET ?host=<source host> -> the source's own icon, or 404 so the newsroom shows its letter mark. Cached for a week. */
+export async function GET(request: Request) {
+  const host = (new URL(request.url).searchParams.get("host") ?? "").toLowerCase();
+  const icon = host ? await fetchSourceIcon(host) : null;
+  if (!icon) return new Response(null, { status: 404, headers: { "cache-control": "public, max-age=86400" } });
+  return new Response(icon.body, {
+    headers: {
+      "cache-control": "public, max-age=604800",
+      "content-type": icon.contentType,
+      // An SVG icon is shown only through <img>, but never let it run as a document on our origin.
+      "content-security-policy": "default-src 'none'; style-src 'unsafe-inline'; sandbox",
+      "x-content-type-options": "nosniff",
+    },
+  });
+}

package/app/newsroom/[section]/[...selection]/page.tsx

@@ -41,6 +41,8 @@ export default async function NewsDeskNestedSectionPage({ params, searchParams }
   if (section === "users") redirect(toPublicNewsroomPath("/newsroom/administration/users"));
   if (section === "doctrine") redirect(toPublicNewsroomPath("/newsroom/administration/policies"));
   if (section === "administration" && selection[0] === "analysis") redirect(toPublicNewsroomPath("/newsroom/assignments"));
+  // A Notification Center deep link (`/needs-me/<item id>`): the console home, which opens that item from the address.
+  if (section === "needs-me") return <NewsDeskPage searchParams={searchParams} />;
   if (!NEWS_DESK_ROUTE_SECTIONS.has(section as NewsDeskTab)) notFound();
   return <NewsDeskPage section={section} selectionPath={selection} searchParams={searchParams} />;
 }

package/app/newsroom/[section]/page.tsx

@@ -43,6 +43,7 @@ const NEWS_DESK_ROUTE_SECTIONS = new Set<NewsDeskTab>([
 export default async function NewsDeskSectionPage({ params, searchParams }: NewsDeskSectionPageProps) {
   const { section } = await params;
   if (section === "work") redirect(toPublicNewsroomPath(`/newsroom/${contentItemBoardPathSegment()}`));
+  if (section === "needs-me") redirect(toPublicNewsroomPath("/newsroom"));
   if (section === "users") redirect(toPublicNewsroomPath("/newsroom/administration/users"));
   if (section === "doctrine") redirect(toPublicNewsroomPath("/newsroom/administration/policies"));
   if (section === contentItemBoardPathSegment()) return <NewsroomBoardView subject="contentItem" />;

package/components/markdown-context.tsx

@@ -0,0 +1,412 @@
+import { useMemo, type ReactNode } from "react";
+
+/** Renders Markdown as React elements (headings, lists, tables, code, links), never as HTML, so stored text cannot inject markup.
+ *  Links open in a new tab and only http(s) and mailto destinations become links. */
+export function MarkdownContext({ className, text }: { className?: string; text: string }) {
+  const blocks = useMemo(() => parseMarkdownBlocks(normalizeMarkdownForRendering(text)), [text]);
+  return (
+    <div className={className ? `news-desk-markdown-context ${className}` : "news-desk-markdown-context"}>
+      {blocks.map((block, index) => renderMarkdownBlock(block, index))}
+    </div>
+  );
+}
+
+type MarkdownBlock =
+  | { type: "code"; text: string }
+  | { type: "heading"; depth: number; text: string }
+  | { type: "list"; items: string[]; ordered: boolean }
+  | { type: "table"; headers: string[]; rows: string[][] }
+  | { type: "paragraph"; text: string };
+
+function normalizeMarkdownForRendering(text: string): string {
+  const trimmed = text.trim();
+  const fencedMarkdown = /^```(?:markdown|md|mdx)?\s*\n([\s\S]*?)\n```$/i.exec(trimmed);
+  const unwrapped = fencedMarkdown ? (fencedMarkdown[1] ?? "") : text;
+  return normalizeMultilineMarkdownLinks(unwrapped);
+}
+
+function parseMarkdownBlocks(text: string): MarkdownBlock[] {
+  const blocks: MarkdownBlock[] = [];
+  const lines = text.split(/\r?\n/);
+  let paragraph: string[] = [];
+  let list: string[] = [];
+  let listOrdered = false;
+  let code: string[] = [];
+  let inCode = false;
+  const flushParagraph = () => {
+    if (paragraph.length) {
+      blocks.push({ type: "paragraph", text: paragraph.join(" ").trim() });
+      paragraph = [];
+    }
+  };
+  const flushList = () => {
+    if (list.length) {
+      blocks.push({ type: "list", items: list, ordered: listOrdered });
+      list = [];
+      listOrdered = false;
+    }
+  };
+  for (let lineIndex = 0; lineIndex < lines.length; lineIndex += 1) {
+    const line = lines[lineIndex];
+    if (line.trim().startsWith("```")) {
+      if (inCode) {
+        blocks.push({ type: "code", text: code.join("\n") });
+        code = [];
+        inCode = false;
+      } else {
+        flushParagraph();
+        flushList();
+        inCode = true;
+      }
+      continue;
+    }
+    if (inCode) {
+      code.push(line);
+      continue;
+    }
+    const trimmed = line.trim();
+    if (!trimmed) {
+      flushParagraph();
+      flushList();
+      continue;
+    }
+    if (
+      lineIndex + 1 < lines.length
+      && looksLikeMarkdownTableHeaderLine(line)
+      && isMarkdownTableDividerLine(lines[lineIndex + 1] ?? "")
+    ) {
+      flushParagraph();
+      flushList();
+      const headerCells = splitMarkdownTableCells(line);
+      const dividerCells = splitMarkdownTableCells(lines[lineIndex + 1] ?? "");
+      const columnCount = Math.max(headerCells.length, dividerCells.length, 1);
+      const headers = normalizeMarkdownTableCells(headerCells, columnCount);
+      const rows: string[][] = [];
+      lineIndex += 2;
+      while (lineIndex < lines.length) {
+        const rowLine = lines[lineIndex] ?? "";
+        if (!looksLikeMarkdownTableRowLine(rowLine)) {
+          lineIndex -= 1;
+          break;
+        }
+        rows.push(normalizeMarkdownTableCells(splitMarkdownTableCells(rowLine), columnCount));
+        lineIndex += 1;
+      }
+      if (lineIndex >= lines.length) lineIndex -= 1;
+      blocks.push({ type: "table", headers, rows });
+      continue;
+    }
+    const heading = /^(#{1,4})\s+(.+)$/.exec(trimmed);
+    if (heading) {
+      flushParagraph();
+      flushList();
+      blocks.push({ type: "heading", depth: heading[1].length, text: heading[2].trim() });
+      continue;
+    }
+    const bullet = /^(?:([-*+])\s+|(\d+)[.)]\s+)(.+)$/.exec(trimmed);
+    if (bullet) {
+      flushParagraph();
+      const ordered = Boolean(bullet[2]);
+      if (list.length && listOrdered !== ordered) flushList();
+      listOrdered = ordered;
+      list.push((bullet[3] ?? "").trim());
+      continue;
+    }
+    flushList();
+    paragraph.push(trimmed);
+  }
+  flushParagraph();
+  flushList();
+  if (code.length) blocks.push({ type: "code", text: code.join("\n") });
+  return blocks;
+}
+
+function renderMarkdownBlock(block: MarkdownBlock, index: number): ReactNode {
+  const key = `${block.type}-${index}`;
+  if (block.type === "code") return <pre className="news-desk-analysis-command" key={key}>{block.text}</pre>;
+  if (block.type === "list") {
+    const ListTag = block.ordered ? "ol" : "ul";
+    return (
+      <ListTag key={key}>
+        {block.items.map((item, itemIndex) => <li key={`${key}-${itemIndex}`}>{renderInlineMarkdown(item)}</li>)}
+      </ListTag>
+    );
+  }
+  if (block.type === "heading") {
+    if (block.depth <= 1) return <h3 key={key}>{block.text}</h3>;
+    if (block.depth === 2) return <h4 key={key}>{block.text}</h4>;
+    return <h5 key={key}>{block.text}</h5>;
+  }
+  if (block.type === "table") {
+    return (
+      <table key={key}>
+        <thead>
+          <tr>
+            {block.headers.map((header, headerIndex) => (
+              <th key={`${key}-head-${headerIndex}`} scope="col">{renderInlineMarkdown(header)}</th>
+            ))}
+          </tr>
+        </thead>
+        {block.rows.length ? (
+          <tbody>
+            {block.rows.map((row, rowIndex) => (
+              <tr key={`${key}-row-${rowIndex}`}>
+                {row.map((cell, cellIndex) => (
+                  <td key={`${key}-row-${rowIndex}-cell-${cellIndex}`}>{renderInlineMarkdown(cell)}</td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        ) : null}
+      </table>
+    );
+  }
+  return <p key={key}>{renderInlineMarkdown(block.text)}</p>;
+}
+
+function renderInlineMarkdown(text: string): ReactNode[] {
+  const nodes: ReactNode[] = [];
+  let index = 0;
+  let plain = "";
+  const flushPlain = () => {
+    if (!plain) return;
+    nodes.push(plain);
+    plain = "";
+  };
+
+  while (index < text.length) {
+    const linkLike = parseMarkdownLinkLikeAt(text, index);
+    if (linkLike) {
+      flushPlain();
+      if (!linkLike.image) {
+        const href = normalizeInlineMarkdownHref(linkLike.hrefRaw);
+        const label = collapseMarkdownLinkLabel(linkLike.label);
+        if (href) {
+          nodes.push(
+            <a href={href} key={`${index}-link`} rel="noopener noreferrer" target="_blank">
+              {renderInlineMarkdown(label)}
+            </a>,
+          );
+        } else {
+          nodes.push(linkLike.raw);
+        }
+      }
+      index += linkLike.length;
+      continue;
+    }
+
+    if (text.startsWith("**", index) || text.startsWith("__", index)) {
+      const marker = text.slice(index, index + 2);
+      const end = text.indexOf(marker, index + 2);
+      if (end > index + 2) {
+        flushPlain();
+        nodes.push(<strong key={`${index}-strong`}>{renderInlineMarkdown(text.slice(index + 2, end))}</strong>);
+        index = end + 2;
+        continue;
+      }
+    }
+
+    if (text.startsWith("~~", index)) {
+      const end = text.indexOf("~~", index + 2);
+      if (end > index + 2) {
+        flushPlain();
+        nodes.push(<del key={`${index}-strike`}>{renderInlineMarkdown(text.slice(index + 2, end))}</del>);
+        index = end + 2;
+        continue;
+      }
+    }
+
+    if (text[index] === "*" || text[index] === "_") {
+      const marker = text[index];
+      const end = text.indexOf(marker, index + 1);
+      if (end > index + 1) {
+        flushPlain();
+        nodes.push(<em key={`${index}-em`}>{renderInlineMarkdown(text.slice(index + 1, end))}</em>);
+        index = end + 1;
+        continue;
+      }
+    }
+
+    if (text[index] === "`") {
+      const end = text.indexOf("`", index + 1);
+      if (end > index + 1) {
+        flushPlain();
+        nodes.push(<code key={`${index}-code`}>{text.slice(index + 1, end)}</code>);
+        index = end + 1;
+        continue;
+      }
+    }
+
+    const autolinkMatch = /^(<https?:\/\/[^>\s]+>|https?:\/\/[^\s<]+)/.exec(text.slice(index));
+    if (autolinkMatch) {
+      flushPlain();
+      const token = autolinkMatch[1];
+      const href = normalizeInlineMarkdownHref(token);
+      if (href) {
+        nodes.push(
+          <a href={href} key={`${index}-autolink`} rel="noopener noreferrer" target="_blank">
+            {href}
+          </a>,
+        );
+      } else {
+        nodes.push(token);
+      }
+      index += token.length;
+      continue;
+    }
+
+    plain += text[index];
+    index += 1;
+  }
+
+  flushPlain();
+  return nodes;
+}
+
+function normalizeInlineMarkdownHref(rawHref: string): string | null {
+  const href = extractMarkdownHrefDestination(rawHref);
+  if (!href) return null;
+  if (/^(https?:\/\/|mailto:)/i.test(href)) return href;
+  return null;
+}
+
+function normalizeMultilineMarkdownLinks(text: string): string {
+  let normalized = "";
+  let index = 0;
+  while (index < text.length) {
+    const linkLike = parseMarkdownLinkLikeAt(text, index);
+    if (!linkLike || linkLike.image || !linkLike.raw.includes("\n")) {
+      normalized += text[index];
+      index += 1;
+      continue;
+    }
+    const href = extractMarkdownHrefDestination(linkLike.hrefRaw);
+    const label = collapseMarkdownLinkLabel(linkLike.label);
+    if (!href || !label) {
+      normalized += linkLike.raw;
+      index += linkLike.length;
+      continue;
+    }
+    normalized += `[${label}](${href})`;
+    index += linkLike.length;
+  }
+  return normalized;
+}
+
+function collapseMarkdownLinkLabel(label: string): string {
+  const withoutImages = label.replace(/!\[[^\]]*\]\((?:[^)(]|\([^)(]*\))*\)/g, " ");
+  return withoutImages
+    .replace(/\r?\n+/g, " ")
+    .replace(/(^|\s)#{1,6}\s+/g, "$1")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+function extractMarkdownHrefDestination(rawHref: string): string {
+  const trimmed = rawHref.trim();
+  if (!trimmed) return "";
+  if (trimmed.startsWith("<")) {
+    const closing = trimmed.indexOf(">");
+    if (closing > 1) return trimmed.slice(1, closing).trim();
+  }
+  const match = /^(\S+)/.exec(trimmed);
+  return match?.[1]?.trim() ?? "";
+}
+
+function parseMarkdownLinkLikeAt(
+  source: string,
+  startIndex: number,
+): { hrefRaw: string; image: boolean; label: string; length: number; raw: string } | null {
+  const image = source.startsWith("![", startIndex);
+  const link = source[startIndex] === "[";
+  if (!image && !link) return null;
+  const labelStart = startIndex + (image ? 2 : 1);
+  const labelEnd = findMatchingBracketIndex(source, labelStart, "[", "]");
+  if (labelEnd < 0) return null;
+  let next = labelEnd + 1;
+  while (next < source.length && /\s/.test(source[next])) next += 1;
+  if (source[next] !== "(") return null;
+  const hrefStart = next + 1;
+  const hrefEnd = findMatchingBracketIndex(source, hrefStart, "(", ")");
+  if (hrefEnd < 0) return null;
+  const raw = source.slice(startIndex, hrefEnd + 1);
+  return {
+    image,
+    label: source.slice(labelStart, labelEnd),
+    hrefRaw: source.slice(hrefStart, hrefEnd),
+    length: raw.length,
+    raw,
+  };
+}
+
+function findMatchingBracketIndex(source: string, contentStart: number, open: string, close: string): number {
+  let depth = 1;
+  for (let index = contentStart; index < source.length; index += 1) {
+    const ch = source[index];
+    if (ch === "\\") {
+      index += 1;
+      continue;
+    }
+    if (ch === open) {
+      depth += 1;
+      continue;
+    }
+    if (ch !== close) continue;
+    depth -= 1;
+    if (depth === 0) return index;
+  }
+  return -1;
+}
+
+function looksLikeMarkdownTableHeaderLine(line: string): boolean {
+  return /\|/.test(line.trim());
+}
+
+function looksLikeMarkdownTableRowLine(line: string): boolean {
+  const trimmed = line.trim();
+  if (!trimmed) return false;
+  if (!/\|/.test(trimmed)) return false;
+  if (isMarkdownTableDividerLine(trimmed)) return false;
+  return true;
+}
+
+function isMarkdownTableDividerLine(line: string): boolean {
+  const cells = splitMarkdownTableCells(line);
+  if (!cells.length) return false;
+  return cells.every((cell) => /^:?-{3,}:?$/.test(cell.trim()));
+}
+
+function splitMarkdownTableCells(line: string): string[] {
+  const trimmed = line.trim().replace(/^\|/, "").replace(/\|$/, "");
+  if (!trimmed) return [];
+  const cells: string[] = [];
+  let current = "";
+  let escaping = false;
+  for (let index = 0; index < trimmed.length; index += 1) {
+    const ch = trimmed[index];
+    if (escaping) {
+      current += ch;
+      escaping = false;
+      continue;
+    }
+    if (ch === "\\") {
+      escaping = true;
+      current += ch;
+      continue;
+    }
+    if (ch === "|") {
+      cells.push(current.trim());
+      current = "";
+      continue;
+    }
+    current += ch;
+  }
+  cells.push(current.trim());
+  return cells;
+}
+
+function normalizeMarkdownTableCells(cells: string[], columnCount: number): string[] {
+  const normalized = cells.slice(0, columnCount);
+  while (normalized.length < columnCount) normalized.push("");
+  return normalized;
+}

package/components/needs-me-bodies.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { AutoGrowTextarea } from "./ui/auto-grow-textarea";
 import { CheckIcon, CircleCheckIcon, CircleXIcon, ExternalLinkIcon, FileSearchIcon, Loader2Icon, LockIcon, MailIcon } from "lucide-react";
 import Link from "next/link";
 import { useEffect, useState, type ReactNode } from "react";
@@ -95,9 +96,9 @@ export function DecisionPanel({ item, ratings, extras, onExtras, disabledReason,
 
   return (
     <section aria-label="Your decision" className="space-y-3 rounded-[20px] bg-[var(--feed-footer)] p-3" data-needs-me-decision {...(locked ? {} : { "data-review-controls": "" })}>
-      <textarea
+      <AutoGrowTextarea
         aria-label="Why? (optional)"
-        className="block min-h-20 w-full resize-y rounded-[16px] bg-[var(--feed-control)] p-3 text-sm outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring"
+        className="block min-h-20 w-full rounded-[16px] bg-[var(--feed-control)] p-3 text-sm outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring"
         data-needs-me-why
         onBlur={() => { if (!disabledReason) ratings.commitNote(item.id); }}
         onChange={(event) => ratings.setNote(item.id, event.target.value)}

package/components/needs-me-detail.tsx

@@ -12,7 +12,8 @@ export function NeedsMeDetail(props: DetailProps) {
   const { payload } = item;
   return (
     <div className="flex flex-col gap-4 p-4 font-sans" data-needs-me-detail={item.id} data-needs-me-detail-type={item.type}>
-      <Heading item={item} />
+      {/* A Reference puts its title first and carries these badges under it. */}
+      {payload.kind === "reference" ? null : <Heading item={item} />}
       {payload.kind === "reference" && isReferenceLike(item) ? <ReferenceBody {...props} payload={payload} /> : null}
       {payload.kind === "draft" ? <DraftBody {...props} payload={payload} /> : null}
       {payload.kind === "request" ? <RequestBody {...props} payload={payload} /> : null}

package/components/needs-me-feed.tsx

@@ -5,6 +5,7 @@ import {
   Loader2Icon, LockIcon, MailIcon, NewspaperIcon, SlidersHorizontalIcon, Undo2Icon, type LucideIcon,
 } from "lucide-react";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { useEffect, useId, useMemo, useRef, useState, type ReactNode } from "react";
 import { ScrollArea } from "./ui/scroll-area";
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from "./ui/sheet";
@@ -20,13 +21,15 @@ import { cannotMoveReason } from "../lib/review-drafts";
 import type { CyclotronEntry } from "../lib/review-requests";
 import { referenceReasonCode, REFERENCE_REJECTION_REASON_CODES, normalizeReferenceCurationStatus, type ReferenceRejectionReasonCode } from "../lib/reference-policy";
 import { formatFeedAge } from "../lib/reference-preview";
+import { buildNeedsMeItemPath, parseNeedsMeItemIdFromNewsroomPathname } from "../lib/newsroom-index-filters";
+import { getNewsroomNavHref } from "../lib/newsroom-nav";
 import type { FeedFreshness } from "../lib/reference-feed-ranking";
 import type { RecentDecision } from "../lib/notification-feed";
 import { getKanbusTheme, SITE_BRAND } from "../lib/site-brand";
 import { NeedsMeDetail, type DecisionExtras } from "./needs-me-detail";
 import { FlagFooter, decidedChoiceOf, isReferenceLike, recordedAnswer } from "./needs-me-shared";
 import { NotificationSkeleton, RecentDecisions } from "./notification-cards";
-import { FEED_GRID, FEED_SURFACE_PROPS, FeedImage, PILL, REASON_LABELS, SourceMark } from "./reference-feed";
+import { FEED_GRID, FEED_SURFACE_PROPS, FeedImage, PILL, REASON_LABELS, SELECTED_RING, SourceMark } from "./reference-feed";
 import { predictionFromDecision, ReviewQueueBar, useQueueGestures, type CardPrediction, type ReviewChoice } from "./reference-review-card";
 import type { CorrectCaptureAction } from "./reference-capture-client";
 import { RatingGrid } from "./review-rating-grid";
@@ -118,18 +121,18 @@ export function NeedsMeCard({ item, now, onOpen, predictionLoading, ratings, sel
       aria-labelledby={titleId}
       className={cn(
         "relative flex flex-col overflow-hidden rounded-[20px] text-card-foreground transition-[background-color,box-shadow] duration-200",
-        selected ? "bg-[var(--feed-control)] shadow-xl" : "bg-[var(--feed-card)]",
+        selected ? "bg-[var(--feed-control)]" : "bg-[var(--feed-card)]",
       )}
       data-feed-card={item.id}
       data-feed-rated={decided ?? undefined}
       data-feed-selected={selected || undefined}
+      style={selected ? SELECTED_RING : undefined}
       data-needs-me-card={item.type}
       data-needs-me-state={item.decisionState}
       data-newsroom-card-id={item.id}
       data-review-draft={draftId}
       data-review-request={requestId}
     >
-      {selected ? <span aria-hidden="true" className="absolute inset-y-0 left-0 z-10 w-1.5 bg-[var(--primary)]" data-feed-selected-bar /> : null}
       <button
         aria-label={`Open: ${item.title}`}
         className="flex flex-1 flex-col text-left outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
@@ -301,7 +304,10 @@ export function NeedsMeView({
   const themeAttributes = { "data-kanbus-theme": getKanbusTheme(SITE_BRAND), "data-color-mode": themeMode };
   const isMobile = useMediaQuery("(max-width: 767px)");
   const [filter, setFilter] = useState<NeedsMeFilter>(initialFilter);
-  const [selectedId, setSelectedId] = useState("");
+  // The open item lives in the address (`/needs-me/<id>`), so it can be linked, bookmarked and reopened with Back.
+  const pathname = usePathname() ?? (typeof window === "undefined" ? null : window.location.pathname);
+  const routeId = useMemo(() => parseNeedsMeItemIdFromNewsroomPathname(pathname) ?? "", [pathname]);
+  const [selectedId, setSelectedId] = useState(routeId);
   const [caughtUp, setCaughtUp] = useState(false);
   const [sheetOpen, setSheetOpen] = useState(false);
   const [recipeOpen, setRecipeOpen] = useState(false);
@@ -357,21 +363,37 @@ export function NeedsMeView({
   const previousId = caughtUp ? queue[queue.length - 1] ?? null : selectedIndex > 0 ? queue[selectedIndex - 1] : null;
   const nextId = selectedIndex >= 0 && selectedIndex < queue.length - 1 ? queue[selectedIndex + 1] : null;
 
+  const showInAddress = (id: string, mode: "push" | "replace") => {
+    if (demo || typeof window === "undefined") return;
+    const next = id ? buildNeedsMeItemPath(id) : getNewsroomNavHref("/newsroom");
+    if (`${window.location.pathname}${window.location.search}` === next) return;
+    if (mode === "push") window.history.pushState(null, "", next);
+    else window.history.replaceState(null, "", next);
+  };
   const select = (item: NeedsMeEntry) => {
     setCaughtUp(false);
     setSelectedId(item.id);
     if (isMobile) setSheetOpen(true);
+    showInAddress(item.id, "push");
     onOpened?.(item);
   };
   const goNext = () => {
-    if (nextId) { setCaughtUp(false); setSelectedId(nextId); setScrollTarget({ id: nextId, nonce: Date.now() }); const next = byId.get(nextId); if (next) onOpened?.(next); }
-    else if (!caughtUp) { setCaughtUp(true); setSelectedId(""); }
+    if (nextId) { setCaughtUp(false); setSelectedId(nextId); showInAddress(nextId, "replace"); setScrollTarget({ id: nextId, nonce: Date.now() }); const next = byId.get(nextId); if (next) onOpened?.(next); }
+    else if (!caughtUp) { setCaughtUp(true); setSelectedId(""); showInAddress("", "replace"); }
   };
   const goPrevious = () => {
-    if (previousId) { setCaughtUp(false); setSelectedId(previousId); setScrollTarget({ id: previousId, nonce: Date.now() }); }
+    if (previousId) { setCaughtUp(false); setSelectedId(previousId); showInAddress(previousId, "replace"); setScrollTarget({ id: previousId, nonce: Date.now() }); }
   };
   const gestures = useQueueGestures({ onNext: goNext, onPrevious: goPrevious });
-  const closeDetail = () => { setCaughtUp(false); setSheetOpen(false); setSelectedId(""); };
+  const closeDetail = () => { setCaughtUp(false); setSheetOpen(false); setSelectedId(""); showInAddress("", "replace"); };
+
+  // Back and Forward (and a link opened in place) follow the address.
+  useEffect(() => {
+    setSelectedId(routeId);
+    if (routeId) { setCaughtUp(false); if (isMobile) setSheetOpen(true); }
+  }, [routeId, isMobile]);
+  // A linked item that is not waiting any more (decided, or not yours) says so once everything is read, instead of an empty pane.
+  const linkedGone = Boolean(routeId) && settled && !byId.has(routeId);
 
   // Previous / Next scrolls the feed to the same card, smoothly. Selecting a card by clicking it never scrolls.
   useEffect(() => {
@@ -404,14 +426,15 @@ export function NeedsMeView({
   ) : null;
 
   return (
-    <div className="flex flex-col gap-5 md:h-full md:flex-row md:items-stretch" data-detail-reserved="true" data-notification-center {...FEED_SURFACE_PROPS}>
-      <div className="@container min-w-0 flex-1 space-y-6 pb-6 md:min-h-0 md:overflow-y-auto md:pr-1" data-needs-me-main data-needs-me-scroll>
+    <div className="flex flex-col gap-5 md:h-full md:flex-row md:items-stretch" data-notification-center {...FEED_SURFACE_PROPS}>
+      <div className="@container min-w-0 flex-1 space-y-6 pb-6 md:min-h-0 md:overflow-y-auto px-1.5 pt-1.5 md:pr-2.5" data-needs-me-main data-needs-me-scroll>
         <header className="space-y-4">
           <div className="space-y-1.5">
             <h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl" data-notification-title>What needs me?</h1>
             <p className="text-lg text-muted-foreground" data-notification-summary role="status">{waitingTextFor(counts)}</p>
           </div>
           <ShapingStrip stats={shaping} />
+          {linkedGone ? <Note data-needs-me-link-gone role="status">The item in this link is not waiting for you any more: it was decided, or it is not yours to decide.</Note> : null}
           <div className="flex flex-wrap items-center justify-between gap-2">
             <div aria-label="Show" className="inline-flex max-w-full overflow-x-auto rounded-full bg-[var(--feed-card)] p-1" data-notification-filters role="group">
               {NEEDS_ME_FILTERS.map((key) => {
@@ -542,9 +565,10 @@ export function NeedsMeView({
         {below}
       </div>
 
+      {/* The pane appears once something is selected (or when the queue is done); until then the feed has the whole width. */}
       <aside
         aria-label="Detail"
-        className="hidden min-h-0 w-full shrink-0 flex-col overflow-hidden rounded-[20px] bg-[var(--feed-card)] md:flex md:h-full md:w-[min(100%,24rem)] md:pb-16 lg:w-[min(100%,28rem)]"
+        className={cn("hidden min-h-0 w-full shrink-0 flex-col overflow-hidden rounded-[20px] bg-[var(--feed-card)] md:h-full", (selected || caughtUp) && "md:flex", " md:w-[min(100%,24rem)] md:pb-16 lg:w-[min(100%,28rem)]")}
         data-feed-flat=""
         data-needs-me-detail-shell
         data-detail-open={selected ? "true" : "false"}
@@ -552,9 +576,7 @@ export function NeedsMeView({
         <div className="flex shrink-0 items-center justify-between gap-2 px-4 pb-1 pt-3"><span className="text-sm font-medium text-foreground">Detail</span></div>
         <div className="flex min-h-0 flex-1 flex-col" data-review-gestures onPointerDown={gestures.onPointerDown} onPointerUp={gestures.onPointerUp} style={gestures.style}>
           <ScrollArea className="min-h-0 flex-1">
-            {isMobile ? null : selected ? <div key={selected.id}>{detailBody(selected)}</div> : caughtUp ? caughtUpPanel : (
-              <p className="p-4 text-sm text-muted-foreground" data-needs-me-detail-empty>Select an item to read it here and decide.</p>
-            )}
+            {isMobile ? null : selected ? <div key={selected.id}>{detailBody(selected)}</div> : caughtUp ? caughtUpPanel : null}
           </ScrollArea>
         </div>
         {queueBar}