feat(dashboard): add the use it now section to the panel

[brunod-e]

Part 5/6 of the Panel v2.1 stack (DEV-1148). Base: feat/panel-v2.1-case-studies (#2126).

What changes

Section 5 of the spec — USE IT NOW, two equal-height cards with bottom-aligned links:

• UseItNowSection.tsx (new) — Alerts card (BadgeIcon + bell) → in-app /alerts; API + MCP card (BadgeIcon + code) → docs. Equal heights come from the grid; justify-between keeps the CTAs on the baseline regardless of body length.
• AlertsSection.tsx — adds the explainer strip the spec asks for above the channel cards: what gets pinged (new proposals on-chain or Snapshot, vote reminders, delegation shifts, results) and that the triggers are the reader's choice. This is what satisfies the acceptance criterion "Alerts CTA lands on /alerts with the explainer visible above the fold."

Figma: 3633:96828.

Notes for review

• No webhook button on /alerts. The spec's explainer mentions "Telegram/Slack/webhook buttons", but the page's channels are Telegram, Slack, and Discord (coming soon) — there's no webhook route or bot link in the repo to point at. Left alone rather than invented; worth a follow-up if webhooks are meant to be self-serve.
• API + MCP CTA goes to https://docs.anticapture.com (the URL already used elsewhere in the app). The spec says "docs/quickstart" — if there's a specific quickstart path, tell me and it's a one-line change.

Verification

tsc --noEmit clean · eslint clean · 527 tests / 54 suites pass · rendered locally at 1440px.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
anticapture-storybook	Ready	Preview	Aug 17, 2026 4:20pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
anticapture	Ignored		Aug 17, 2026 4:20pm

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 0452245c35

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

[isadorable-png]

🎨 UI Review

Automated review · Spec: DEV-1148 (Panel v2.1) · Figma frame referenced: 3633:96828
⚠️ Same config gap as the rest of this stack — Figma MCP couldn't resolve this file's frames and ClickUp was rate-limited this run. Reviewed via diff + repo conventions + UX-expert evaluation only.

---

Use It Now section

• Must-fix — copy contradicts its own CTA: the "API + MCP" card reads "Your AI agent can read every number on this page for free, no key required.", but its CTA ("Connect your agent") links to /api-keys — the app's real API-key management page. The copy promises no key is needed while the button sends the user straight to key setup. Either soften the copy or point the CTA at docs/onboarding instead of /api-keys. (apps/dashboard/features/panel/components/UseItNowSection.tsx)
• Must-fix — advertises a channel that doesn't exist: the Alerts card copy says "Telegram, Slack, or webhook pings", but per this same PR's own description, /alerts only ships Telegram, Slack, and Discord (coming soon) — there's no webhook route or bot link anywhere in the app. Drop "webhook" from this card's copy (the new AlertsSection explainer strip added in this same PR correctly omits it — just this card is out of sync). (UseItNowSection.tsx)

Findings: 2 total — 2 must-fix, 0 nice-to-have

---

Generated by Claude Code

[isadorable-png]

🎨 UI Review

Automated review · Figma: 🛰️ Product Design — Usage Prompt · Spec: DEV-1148
⚠️ ClickUp is rate-limited for this run (~19h cooldown) — spec text cross-check and task image attachments were skipped. ⚠️ The anticapture (dashboard) Vercel preview is Ignored for this PR stack — only Storybook deployed. Review is grounded in Figma + diff only.

---

Question for author: the PR description says the API + MCP CTA goes to https://docs.anticapture.com, but UseItNowSection.tsx points it at /api-keys — which is a real route (apps/dashboard/app/api-keys/page.tsx, "Create and manage API keys to query Anticapture from Claude, Cursor, or Codex"). That's arguably a better destination for "Connect your agent" than a generic docs link, but it contradicts the description — confirm this was an intentional late change rather than a stray edit. [Code-only]

Validated against Figma — no change needed

• "Use It Now" heading + 2-card grid with gap-2 (8px) matches the Figma feature-cards row (page/sections/inner-gap-sm).
• Both card copy blocks ("Telegram, Slack, or webhook pings…" / "Your AI agent can read every number on this page…") match the Figma text verbatim.
• BadgeIcon dimmed variant, text-alternative-xs mono labels (12px/16/6% tracking via the existing tracking-wider token) match the Figma type styles exactly.
• justify-between on each card achieves the same "CTA pinned to the bottom regardless of body length" effect the Figma spacer construction is going for — the grid's default equal-height stretch does the rest. Reasonable implementation choice, not a literal copy of the Figma spacer mechanism but the same visual outcome.
• Figma bundles a services-row (SERVICES BY BLOCKFUL) as a third child under the same "Usage Prompt"/modules-grid container as these two cards, with an 8px gap — worth confirming in feat(dashboard): add the services row to the panel #2128's review that the gap between UseItNowSection and ServicesRow in PanelSection.tsx reproduces that same 8px, since they're now two separate sibling components instead of one Figma group.

Mobile

The alerts explainer strip on /alerts has no Figma reference to check against; its typography (text-alternative-xs mono label + text-sm secondary body) is consistent with the same pattern used elsewhere on this panel, so no issues found.

---

Generated by Claude Code

[isadorable-png]

🎨 UI Review

Automated review · Figma: 🛰️ Product-Design — Usage Prompt · Spec (DEV-1148) · Preview: only anticapture-storybook deployed for this branch — no live dashboard preview, diff + Figma review only.
⚠️ ClickUp API is rate-limited for this run, so the task's attachments/comments weren't pulled independently.

---

Panel — Use It Now section

Question for author

• The PR description says the API + MCP card's CTA "goes to https://docs.anticapture.com", but FEATURE_CARDS in the diff sets href: "/api-keys" — an internal route, not the docs site. These are very different destinations for a user clicking "Connect your agent." Please confirm which is intended before merging. (apps/dashboard/features/panel/components/UseItNowSection.tsx)

Validated against Figma — no change needed

• Card copy for both Alerts and API + MCP (label, description, CTA label) matches the Figma frame verbatim.
• gap-1.5 (6px) between badge icon and label matches Figma's text-gap-md exactly; BadgeIcon at default 24px matches the Figma badge size.
• The two cards use flex-col justify-between uniformly in code. Figma's own export shows the same mechanism on card 2 (justify-between + self-stretch) even though card 1 was authored with a manual 8px gap + spacer — so justify-between is the real design intent here, not a fixed-gap spec. No change needed despite the literal pixel difference.
• New /alerts explainer strip (AlertsSection.tsx) uses the same text-alternative-xs mono-uppercase header pattern already used for card labels elsewhere in this stack — consistent, and it satisfies the acceptance criterion of the explainer being visible above the fold.

---

Generated by Claude Code

[brunod-e]

The "no key required" claim is wrong — but it's spec copy, so this needs a product call

Codex's P2 on UseItNowSection.tsx is factually correct. I'm not changing the string here because it comes verbatim from the Panel v2.1 spec (DEV-1148 / task 86aehhuqw, section 5), so correcting it is a product decision rather than a bug fix. Evidence, so whoever decides has it in one place:

Every data route requires a bearer token.

• apps/gateful/src/index.ts:74 — the entire public allowlist is ["/docs", "/docs/json", "/health", "/metrics"]. No data route is public.
• apps/gateful/src/auth/token-auth.ts:63-68 — missing bearer → 401, unknown token → 401, auth service unreachable → 503 (fail-closed).
• apps/gateful/src/index.ts:81-85 — gateful refuses to boot without TOKEN_SERVICE_URL unless GATEFUL_AUTH_DISABLED=true, which is documented as local-dev only.
• There is no anonymous tier: apps/gateful/src/auth/rate-limit.ts:25 reads c.get("auth"), so rate limiting presupposes an authenticated principal.

MCP is not an exception. mcp.anticapture.com/mcp has no inbound gate, so initialize and tools/list succeed keyless — but every tool call proxies to gateful and 401s. packages/anticapture-client/src/configure-upstream-client.ts:11-14 deliberately closes the shared-key loophole.

Our own surfaces already contradict the card. apps/dashboard/features/api-keys/components/ConnectAgentSection.tsx:13-43 hardcodes Authorization: Bearer in all three snippets, and the signed-out copy tells the reader to "replace the API key placeholder". packages/anticapture-client/docs/docs/getting-started.md:23-30 states "All endpoints require a bearer token".

What is actually true: the key is free, self-service at /api-keys, and dashboard-minted keys get rateLimitPerMin: 0 (unlimited). So "for free" holds; "no key required" does not. Something like "free, self-service key — no rate limit" would be accurate, but I'd rather @isadorable-png or whoever owns the copy pick the wording than have me quietly diverge from the spec.

Separate finding worth its own ticket: the published docs are stale. They still say "contact the Anticapture team for an API key" even though keys are self-service now, and getting-started.md:16 still advertises https://gateful.up.railway.app as the base URL.

---

Everything else codex and the UI review raised on this stack has been addressed and pushed — see the sibling PRs. The remaining open items are the four design questions on #2123 (headline hard-break, text-[15px]/23px off the type scale, text-h3 weight, and the 28px mobile tap target), which are also design calls rather than defects.

🤖 Generated with Claude Code

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 65a53e9f37

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

[brunod-e]

Second copy problem on the same card: the Alerts card promises webhooks we do not ship

Codex's newer P2 on UseItNowSection.tsx:23 is also correct, and it is the same class of problem as the "no key required" one above — Figma-verbatim spec copy that the product does not currently back. Not changing the string for the same reason.

The claim. The Alerts card says "Telegram, Slack, or webhook pings when a DAO you track moves", and its CTA is "Set up alerts" → /alerts.

What /alerts actually offers. apps/dashboard/features/alerts/utils/alerts-constants.tsx:26-48 is the whole list: Telegram (available), Slack (available), Discord (Coming Soon). There is no webhook entry, no webhook card, and no link out to one. AlertsSection.tsx:29-39 renders exactly that array and nothing else, and the new explainer strip this PR adds ends with "pick a channel below to start" — so a reader who came for webhooks is told to pick from three channels that do not include it.

Webhooks do exist, just not here. The only registration instructions in the repo are packages/anticapture-client/docs/docs/webhooks/index.md, i.e. the API docs site, which /alerts never mentions. So the capability is real but the CTA leads away from it.

Options, in rough order of effort:

1. Drop "or webhook" from the card description — smallest change, makes the copy true today.
2. Add a webhook entry to ALERTS_ITEMS linking to the docs page (matching the Discord "Coming Soon" pattern if the self-service flow is not ready).
3. Leave it and accept that one of three advertised channels has no path from the CTA.

All three are product calls on DEV-1148 copy, not defects I should decide. Flagging alongside the "no key required" item so both land in the same review pass — they are the same two cards.

Also, minor and non-blocking: the PR description says the API + MCP CTA "goes to https://docs.anticapture.com", but the code sets href: "/api-keys". /api-keys is a real route and is the better destination for "Connect your agent" given keys are self-service there, so the code looks right and the description is just stale.

🤖 Generated with Claude Code

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: e5bb40f2b9

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

[brunod-e]

Superseded by #2137, which combines the whole panel v2.1 stack into a single PR against dev.