feat(dashboard): panel v2.1

.changeset/panel-v21-hero.md

@@ -0,0 +1,5 @@
+---
+"@anticapture/dashboard": minor
+---
+
+Replace the Panel section header with the v2.1 hero: a judgment headline, a subhead explaining the Stage framework, a link to the framework docs, and a "Governance risk, right now" card showing Stage 0/1/2 as horizontal bars with per-stage hover detail. Retires the Treasury Monitoring and Delegated Supply History cards.

.changeset/panel-v21-services-row.md

@@ -0,0 +1,5 @@
+---
+"@anticapture/dashboard": minor
+---
+
+Add the Blockful services row at the foot of the panel, listing the service lines with a link to the contact page.

.changeset/panel-v21-table-scroll.md

@@ -0,0 +1,5 @@
+---
+"@anticapture/dashboard": minor
+---
+
+Show every monitored DAO on the panel: the homepage itself now scrolls and the table header stays pinned on desktop.

.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.

.changeset/panel-v21-track-record.md

@@ -0,0 +1,5 @@
+---
+"@anticapture/dashboard": minor
+---
+
+Add the "Track record" section to the panel: three outcome-framed case cards linking to the case write-ups, plus a testimonial carousel carrying the verified quotes from the X mentions audit. `ClickableCard` now accepts an `href` so cards can render as links.

.changeset/panel-v21-use-it-now.md

@@ -0,0 +1,5 @@
+---
+"@anticapture/dashboard": minor
+---
+
+Add the "Use it now" section to the panel and an explainer strip above the channel cards on the alerts page.

apps/dashboard/app/globals.css

@@ -36,7 +36,11 @@
   --font-mono:
     "Roboto Mono", ui-monospace, SFMono-Regular, "Menlo", "Monaco", "Consolas",
     "Liberation Mono", "Courier New", monospace;
+  /* The alternative (mono) styles track at 6% of their size. CSS letter-spacing
+   * takes no percentages, so each size gets its resolved value: wider is the
+   * 12px step (--text-alternative-xs), alternative-sm the 13px one. */
   --tracking-wider: 0.72px;
+  --tracking-alternative-sm: 0.78px;
   --animate-accordion-down: accordion-down 0.2s ease-out;
   --animate-accordion-up: accordion-up 0.2s ease-out;
   --animate-scroll-left: scroll-left 20s linear infinite;

apps/dashboard/app/page.tsx

@@ -51,12 +51,12 @@ export default function Home() {
     <div className="bg-surface-background dark flex h-screen overflow-hidden">
       <JsonLd data={softwareApplicationSchema} />
       <HeaderSidebar />
-      <main className="flex-1 overflow-auto lg:flex lg:min-h-0 lg:flex-col lg:overflow-hidden">
+      <main className="flex-1 overflow-auto">
         <div className="lg:hidden">
           <HeaderMobile className="fixed! top-0" />
         </div>
-        <div className="flex min-h-screen w-full flex-col items-center lg:h-full lg:min-h-0 lg:flex-1">
-          <div className="w-full flex-1 lg:flex lg:min-h-0 lg:flex-col">
+        <div className="flex min-h-screen w-full flex-col items-center">
+          <div className="w-full flex-1">
             <PanelSection />
           </div>
           <Footer />

apps/dashboard/e2e/mobile-smoke.spec.ts

@@ -9,9 +9,13 @@ test.describe("Mobile smoke tests", () => {
 
   test("Panel (/) renders heading on mobile", async ({ goto, page }) => {
     await goto("/");
-    await expect(page.locator("h4").filter({ hasText: "Panel" })).toBeVisible({
-      timeout: 15_000,
-    });
+    // Panel v2.1 dropped the "Panel" section title; the hero h1 is the page
+    // heading on every viewport.
+    await expect(
+      page
+        .locator("h1")
+        .filter({ hasText: "See which DAOs could be captured" }),
+    ).toBeVisible({ timeout: 15_000 });
   });
 
   test("DAO Overview (/ens) renders on mobile", async ({ goto, page }) => {

apps/dashboard/e2e/panel.spec.ts

@@ -1,16 +1,22 @@
 import { test, expect } from "./fixtures";
 
+/* Desktop width, but shorter than the table: the layout-sensitive tests below
+ * all need the page to scroll vertically past the table. */
+const SHORT_DESKTOP_VIEWPORT = { width: 1920, height: 640 };
+
 test.describe("Panel page", () => {
   test(
-    "renders Panel heading and description",
+    "renders the panel hero heading and description",
     { tag: "@smoke" },
     async ({ goto, page }) => {
       await goto("/");
       await expect(
-        page.locator("h4").filter({ hasText: "Panel" }),
+        page
+          .locator("h1")
+          .filter({ hasText: "See which DAOs could be captured" }),
       ).toBeVisible();
       await expect(
-        page.locator("text=Check governance security across DAOs"),
+        page.locator("text=Live governance-security risk for every DAO"),
       ).toBeVisible();
     },
   );
@@ -61,7 +67,7 @@ test.describe("Panel page", () => {
     goto,
     page,
   }) => {
-    await page.setViewportSize({ width: 1920, height: 640 });
+    await page.setViewportSize(SHORT_DESKTOP_VIEWPORT);
     await page.route("**/api/user/api/auth/get-session", (route) =>
       route.fulfill({
         status: 200,
@@ -82,15 +88,83 @@ test.describe("Panel page", () => {
     expect(tableBox).not.toBeNull();
     expect(footerBox).not.toBeNull();
     expect(tableBox!.y + tableBox!.height).toBeLessThanOrEqual(footerBox!.y);
+
+    // The table is no longer an inner scroll box: every row lays out at full
+    // height, past the bottom of this viewport, and `main` is what scrolls.
+    await expect
+      .poll(() => tableContainer.evaluate((element) => element.clientHeight))
+      .toBeGreaterThan(SHORT_DESKTOP_VIEWPORT.height);
     await expect
       .poll(() =>
-        tableContainer.evaluate(
-          (element) => element.scrollHeight > element.clientHeight,
-        ),
+        page
+          .locator("main")
+          .evaluate((element) => element.scrollHeight > element.clientHeight),
       )
       .toBe(true);
   });
 
+  // 1024 exercises the lg band, where the sidebar is up but headers may
+  // wrap; 1920 exercises the roomy layout. The header must pin in both.
+  for (const width of [1024, SHORT_DESKTOP_VIEWPORT.width]) {
+    test(`keeps the table header pinned while the ${width}px desktop page scrolls`, async ({
+      goto,
+      page,
+    }) => {
+      await page.setViewportSize({
+        width,
+        height: SHORT_DESKTOP_VIEWPORT.height,
+      });
+      await page.route("**/api/user/api/auth/get-session", (route) =>
+        route.fulfill({
+          status: 200,
+          contentType: "application/json",
+          body: "null",
+        }),
+      );
+      await goto("/");
+
+      await expect(page.locator("table thead").first()).toBeVisible({
+        timeout: 15_000,
+      });
+
+      // Metric cells stream in after load and keep growing the page, so the
+      // scroll, its precondition, and the header measurement all happen inside
+      // one polled evaluation: park the table top 150px above the scrollport
+      // of `main` (the page scroller) — never "scroll to bottom", sections
+      // after the table would push it entirely off screen — then read where
+      // the sticky header rests.
+      const positions = () =>
+        page.locator("main").evaluate((main) => {
+          const table = main.querySelector("table");
+          const thead = table?.querySelector("thead");
+          if (!table || !thead)
+            return { tableTop: NaN, theadTop: NaN, mainOverflowX: NaN };
+          main.scrollTop +=
+            table.getBoundingClientRect().top -
+            main.getBoundingClientRect().top +
+            150;
+          return {
+            tableTop: table.getBoundingClientRect().top,
+            theadTop: thead.getBoundingClientRect().top,
+            mainOverflowX: main.scrollWidth - main.clientWidth,
+          };
+        });
+
+      await expect
+        .poll(async () => (await positions()).tableTop, { timeout: 15_000 })
+        .toBeLessThan(0);
+
+      const { tableTop, theadTop, mainOverflowX } = await positions();
+      expect(tableTop).toBeLessThan(0);
+      // Pinned means resting at the top of the scrollport (sticky -top-px).
+      expect(theadTop).toBeGreaterThanOrEqual(-2);
+      expect(theadTop).toBeLessThanOrEqual(2);
+      // The un-scrollported table must not leak a page-level horizontal
+      // scrollbar; column headers wrap below xl to keep this true.
+      expect(mainOverflowX).toBe(0);
+    });
+  }
+
   test("sortable column headers respond to clicks", async ({ goto, page }) => {
     await goto("/");
     await expect(page.locator("table").first()).toBeVisible({

apps/dashboard/features/alerts/AlertsSection.tsx

@@ -16,6 +16,18 @@ export const AlertsSection = () => {
       className="bg-surface-background! lg:mt-0! border-b-0!"
     >
       <div className="flex flex-col gap-2">
+        <div className="bg-surface-default flex flex-col gap-1 p-4">
+          {/* Not a heading: the section title above renders as h4, so any
+           * heading here would invert the document outline. */}
+          <p className="text-primary text-alternative-xs font-mono font-medium uppercase leading-4 tracking-wider">
+            What you get pinged about
+          </p>
+          <p className="text-secondary text-sm font-normal leading-5">
+            New proposals on-chain or Snapshot, vote reminders, delegation
+            shifts, and results for the DAOs you track. You choose the triggers;
+            pick a channel below to start.
+          </p>
+        </div>
         <div className="grid grid-cols-1 gap-3 py-5 lg:grid-cols-3">
           {ALERTS_ITEMS.map((alert: AlertItem) => (
             <AlertCard

apps/dashboard/features/panel/PanelSection.tsx

@@ -1,59 +1,43 @@
-import { BarChart4 } from "lucide-react";
-
-import {
-  PanelTable,
-  DelegatedSupplyHistory,
-  DaoProtectionLevels,
-  TreasuryMonitoring,
-} from "@/features/panel/components";
-import { TheSectionLayout } from "@/shared/components";
-import { Carousel } from "@/shared/components/design-system/carousel/Carousel";
-import { DividerDefault } from "@/shared/components/design-system/divider/DividerDefault";
+import { LatestFindingTicker } from "@/features/panel/components/LatestFindingTicker";
+import { PanelHero } from "@/features/panel/components/PanelHero";
+import { PanelTable } from "@/features/panel/components/PanelTable";
+import { ServicesRow } from "@/features/panel/components/ServicesRow";
+import { TrackRecordSection } from "@/features/panel/components/TrackRecordSection";
+import { UseItNowSection } from "@/features/panel/components/UseItNowSection";
 import {
   SubSection,
   SubSectionsContainer,
 } from "@/shared/components/design-system/section";
-import { PAGES_CONSTANTS } from "@/shared/constants/pages-constants";
 
 export const PanelSection = () => {
   return (
-    <TheSectionLayout
-      title={PAGES_CONSTANTS.panel.title}
-      icon={<BarChart4 className="section-layout-icon" />}
-      description={PAGES_CONSTANTS.panel.description}
-      className="mt-12 lg:mt-0 lg:min-h-0"
-    >
-      <div className="flex flex-col gap-8 lg:h-full lg:min-h-0 lg:flex-1 lg:gap-2">
-        <div className="lg:hidden">
-          <Carousel
-            slides={[
-              <DaoProtectionLevels key="dao-protection-levels" />,
-              <TreasuryMonitoring key="treasury-monitoring" />,
-              <DelegatedSupplyHistory key="delegated-supply-history" />,
-            ]}
-          />
-        </div>
-        <div className="hidden gap-2 lg:grid lg:grid-cols-3">
-          <DaoProtectionLevels />
-          <TreasuryMonitoring />
-          <DelegatedSupplyHistory />
-        </div>
+    // Figma spaces the three blocks 32px apart and everything inside them 8px
+    // apart, so the inner wrappers hold the tight gap while the page holds the
+    // section rhythm.
+    <div className="mt-12 flex w-full flex-col gap-5 px-4 py-5 lg:mt-0 lg:gap-8 lg:p-5">
+      <div className="flex flex-col gap-5 lg:gap-2">
+        <PanelHero />
 
-        <div className="block lg:hidden">
-          <DividerDefault isHorizontal />
-        </div>
+        <LatestFindingTicker />
 
-        <SubSectionsContainer className="gap-3 lg:min-h-0 lg:flex-1">
+        <SubSectionsContainer className="gap-3">
           <SubSection
             className="gap-0"
             subsectionTitle={"Monitored DAOs"}
             dateRange=""
-            contentClassName="lg:flex lg:flex-col lg:flex-1 lg:min-h-0"
           >
             <PanelTable />
           </SubSection>
         </SubSectionsContainer>
       </div>
-    </TheSectionLayout>
+
+      <TrackRecordSection />
+
+      <div className="flex flex-col gap-5 lg:gap-2">
+        <UseItNowSection />
+
+        <ServicesRow />
+      </div>
+    </div>
   );
 };