feat(dashboard): add the latest finding ticker to the panel

.changeset/panel-v21-ticker.md

@@ -0,0 +1,5 @@
+---
+"@anticapture/dashboard": minor
+---
+
+Add the "Latest finding" ticker between the panel hero and the Monitored DAOs table. The strip shows the newest post on the blockful Paragraph publication, read server-side from its RSS feed and revalidated hourly, and links out to that post. If the feed is unreachable it falls back to the publication index, so the ticker always renders.

apps/dashboard/features/panel/PanelSection.tsx

@@ -1,3 +1,4 @@
+import { LatestFindingTicker } from "@/features/panel/components/LatestFindingTicker";
 import { PanelHero } from "@/features/panel/components/PanelHero";
 import { PanelTable } from "@/features/panel/components/PanelTable";
 import {
@@ -10,6 +11,8 @@ export const PanelSection = () => {
     <div className="mt-12 flex h-full w-full flex-col gap-5 px-4 py-5 lg:mt-0 lg:min-h-0 lg:gap-2 lg:p-5">
       <PanelHero />
 
+      <LatestFindingTicker />
+
       <SubSectionsContainer className="gap-3 lg:min-h-0 lg:flex-1">
         <SubSection
           className="gap-0"

apps/dashboard/features/panel/components/LatestFindingTicker.tsx

@@ -0,0 +1,27 @@
+import { ChevronRight } from "lucide-react";
+
+import { DefaultLink } from "@/shared/components/design-system/links/default-link/DefaultLink";
+import { getLatestParagraphPost } from "@/shared/services/paragraph/latestPost";
+
+export const LatestFindingTicker = async () => {
+  const { title: finding, url: caseUrl } = await getLatestParagraphPost();
+
+  return (
+    <div className="bg-surface-default flex flex-col gap-2 px-4 py-3 lg:flex-row lg:items-center lg:gap-3.5">
+      <div className="flex flex-1 flex-col gap-1 lg:min-w-0 lg:flex-row lg:items-center lg:gap-3.5">
+        <h2 className="text-primary text-alternative-sm tracking-alternative-sm shrink-0 font-mono font-medium uppercase leading-5">
+          Latest finding
+        </h2>
+        {/* Post titles come from the feed and run long; the design draws this
+         * strip as a single line on desktop, and wraps it on mobile. */}
+        <p className="text-secondary text-sm font-normal leading-5 lg:min-w-0 lg:truncate">
+          {finding}
+        </p>
+      </div>
+      <DefaultLink href={caseUrl} variant="highlight" size="sm" openInNewTab>
+        Read the case
+        <ChevronRight className="size-4" />
+      </DefaultLink>
+    </div>
+  );
+};

apps/dashboard/features/panel/components/index.ts

@@ -1,4 +1,5 @@
 export * from "@/features/panel/components/PanelTable";
 export * from "@/features/panel/components/PanelHero";
+export * from "@/features/panel/components/LatestFindingTicker";
 export * from "@/features/panel/components/DaoProtectionLevels";
 export * from "@/features/panel/components/TooltipCell";

apps/dashboard/shared/services/paragraph/latestPost.ts

@@ -0,0 +1,83 @@
+// Reader for the blockful publication on Paragraph. Paragraph exposes no JSON
+// API for a blog's posts, so the newest publication is taken from the public
+// RSS 2.0 feed. Server-only: the feed host rejects browser origins.
+
+const FEED_URL = "https://api.paragraph.com/blogs/rss/@blockful";
+
+/** Revalidate window for the feed, in seconds. Posts ship a few times a month. */
+const REVALIDATE_SECONDS = 3600;
+
+/**
+ * Deadline for the feed request. The ticker is awaited while the homepage
+ * renders, so a Paragraph host that accepts the connection and then stalls
+ * would hold the whole page open until the transport gives up. Capped so the
+ * publication fallback is reached in about the time a reader would wait.
+ */
+const FEED_TIMEOUT_MS = 3000;
+
+export type ParagraphPost = {
+  title: string;
+  url: string;
+};
+
+/**
+ * Rendered when the feed is unreachable so the ticker never ships an empty
+ * strip. Points at the publication index, which always resolves.
+ */
+export const PARAGRAPH_PUBLICATION: ParagraphPost = {
+  title: "Research that maps DAO governance risks and capture vectors",
+  url: "https://paragraph.com/@blockful",
+};
+
+const HTML_ENTITIES: Record<string, string> = {
+  "&amp;": "&",
+  "&lt;": "<",
+  "&gt;": ">",
+  "&quot;": '"',
+  "&apos;": "'",
+  "&#39;": "'",
+};
+
+const decode = (value: string) =>
+  value
+    .replace(/<!\[CDATA\[([\s\S]*?)\]\]>/g, "$1")
+    .replace(
+      /&(?:amp|lt|gt|quot|apos|#39);/g,
+      (entity) => HTML_ENTITIES[entity],
+    )
+    .replace(/&#(\d+);/g, (_, code) => String.fromCharCode(Number(code)))
+    .trim();
+
+const readTag = (item: string, tag: string) => {
+  const match = item.match(new RegExp(`<${tag}[^>]*>([\\s\\S]*?)</${tag}>`));
+  return match ? decode(match[1]) : "";
+};
+
+/**
+ * Newest post on the blockful publication. Falls back to the publication index
+ * on any transport, timeout, status or parse failure — the panel ticker must
+ * render.
+ */
+export const getLatestParagraphPost = async (): Promise<ParagraphPost> => {
+  try {
+    const response = await fetch(FEED_URL, {
+      next: { revalidate: REVALIDATE_SECONDS },
+      signal: AbortSignal.timeout(FEED_TIMEOUT_MS),
+    });
+
+    if (!response.ok) return PARAGRAPH_PUBLICATION;
+
+    const feed = await response.text();
+    const [item] = feed.match(/<item[^>]*>[\s\S]*?<\/item>/) ?? [];
+    if (!item) return PARAGRAPH_PUBLICATION;
+
+    const title = readTag(item, "title");
+    const url = readTag(item, "link") || readTag(item, "guid");
+
+    return title && url.startsWith("http")
+      ? { title, url }
+      : PARAGRAPH_PUBLICATION;
+  } catch {
+    return PARAGRAPH_PUBLICATION;
+  }
+};