feat(dashboard): panel v2.1 - #2137
Open
brunod-e wants to merge 76 commits into
Open
Conversation
The panel's TheSectionLayout title/description is replaced by the two-card hero from the Panel v2.1 spec: a judgment headline, a subhead framing the Stage system, and a link to the framework docs beside a "Governance risk, right now" card. DaoProtectionLevels moves from vertical Recharts bars to the horizontal Stage 0/1/2 bars in the design, sized against the busiest stage, with the per-stage hover kept on the design-system tooltip. Treasury Monitoring and Delegated Supply History are retired with no replacement cards, per spec. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
A one-line strip between the hero and the Monitored DAOs table: the LATEST FINDING label, the finding sentence, and a link out to the case write-up. The sentence and its URL come from a mock for now — swapping in a fetch of the newest Paragraph publication only has to replace the two fields the ticker reads. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The v2.1 panel is a scrolling page, not a single viewport: drop the table's fillHeight and the min-h-0/flex-1 chain that made it scroll inside the section, and let main scroll on desktop the way it already does on mobile. The table itself is untouched — same columns, tooltips, and sorting. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Three outcome-framed case cards (ENS, Uniswap, Arbitrum) that link out to the write-ups, and a testimonial carousel below them. ClickableCard grows an optional href so the Figma "Clickable Card" can be what the design annotates it as — a link — instead of a button. Case copy is final; only the ENS post has a published URL, and the testimonial set carries just the wording already verified in the X mentions audit. Both are marked for follow-up rather than filled with invented attributions. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Two equal-height feature cards with bottom-aligned links: Alerts into the in-app /alerts route, and API + MCP out to the docs. The alerts page gets the explainer the spec asks for above the channel cards — what gets pinged and that the triggers are the reader's choice — so the CTA lands on something self-explanatory. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
A single compact row closing the page: the Blockful service lines and a link to the contact page. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Isadora pointed at the source: the X mentions audit already carries the verified wording, handles and links, so the carousel now ships five real testimonials — Ethereum Foundation, Lefteris Karapetsas, @blockbanzai, @cupOJoseph and ENS DAO — instead of one entry waiting on sign-off. Nothing about this data is mocked any more, so it moves out of mocked-data/ into shared/constants/track-record.ts. Each entry keeps the tweet it was lifted from as its link. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Three pixel-level gaps found by measuring the rendered page against the Figma frame: - the hero cards split 597/565 instead of 582/582, because flex items default to `min-width: auto` and the left card's content set the floor; - the row came out 184px tall against the design's 186px; - the mono card title tracked at 0.72px, the fixed value behind `tracking-wider`, where 13px Alternative/Small calls for 0.78px (the token is right for the 12px labels, wrong one step up). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Same one-step-off letter-spacing as the hero card title: `tracking-wider` resolves to a fixed 0.72px, which is the 12px value, not the 0.78px the 13px Alternative/Small style calls for. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The Figma card carries the same 1px borders/default outline as the case cards above it; the class was there but the border width never was, so it rendered flush against the background. Section label tracking corrected to 0.78px alongside. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
…ng it Adds --tracking-alternative-sm alongside the existing --tracking-wider, so the two mono label sizes both have a named value: 0.72px at 12px, 0.78px at 13px. Both are the same 6% the type styles specify — CSS letter-spacing just can't take the percentage. Drops the fixed hero height too. The remaining 2px against the frame comes from the chart card's own rhythm, and pinning it would trade one magic number for another. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
… label Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
BadgeIcon takes the icon's colour from its own iconVariant, which defaults to primary — so the glyphs rendered in the inverted near-black instead of the secondary grey the badge's dimmed variant implies, and read as smudges on the translucent chip. Section label moves to the named 13px tracking token at the same time. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Same BadgeIcon default as the use it now cards: without iconVariant the shield rendered in the inverted near-black rather than the badge's secondary grey. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The hero wrapped DaoProtectionLevels in a bare flex div only to hand it min-w-0 flex-1. The card is used in exactly one place, so fold those classes into the card itself and drop the wrapper. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
…aws it Two divergences from the hero frame, both in the stage chart. The count was in a fixed third grid column, so it hugged the right edge of the card no matter how long its bar was. Figma sizes every bar but the widest one to its own content and lets the count follow immediately, so only Stage 0 was landing where the design puts it. Bar and count now share a flex track and the bar scales against that track less the count and its gap, which reproduces the design's 418px widest bar exactly. The title-to-chart gap was 12px against the design's 14. Figma gets there by pinning the card to 186px and letting justify-between leave the slack; gap-3.5 hits the same 186 without the fixed height. That also settles the 2px noted in fd7e9e0: with the card at 186 the hero's left column stretches to match, putting its text-to-link gap on the design's 24px. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The ticker shipped a hardcoded finding pointing at the publication index, so "Read the case" never opened the post it described. Paragraph exposes no JSON API for a blog's posts, so the newest publication now comes off the public RSS feed, revalidated hourly, falling back to the publication index whenever the feed is unreachable. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The Uniswap and Arbitrum cards pointed at the publication index instead of their own write-ups, Arbitrum fell back to an initial because it is not a monitored DAO, and every testimonial rendered the generic person glyph. - Uniswap and Arbitrum cards link to their Paragraph posts. - ArbitrumIcon carries the avatar the Figma card draws, so cases can supply an icon without a daoConfig entry. - Testimonials ship the profile picture of the account each quote is lifted from, as the design draws them. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Each label carries a leading bullet and the list is pulled left by that lead-in inside an overflow-hidden wrapper, so a bullet landing at a wrapped line start is clipped instead of reading as a list marker. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…p range Column headers wrap between lg and xl, removing the 58px table overflow that forced the pin to xl, so the container can stop being a scrollport from lg up. The pin e2e test now runs at 1024px and 1920px and asserts main gains no horizontal overflow. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…-studies # Conflicts: # apps/dashboard/e2e/panel.spec.ts
brunod-e
requested review from
LeonardoVieira1630,
PedroBinotto,
alextnetto,
isadorable-png and
pikonha
as code owners
August 19, 2026 22:37
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
This was referenced Aug 19, 2026
|
🚅 Deployed to the anticapture-pr-2137 environment in anticapture-infra
|
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: e388432725
ℹ️ 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".
Collaborator
🎨 UI Review
Design context was pulled directly for every named frame (hero, ticker, track record, use-it-now, services) and checked node-by-node against the diff. Spacing, color tokens, and copy match Figma almost line-for-line — flagging the one place they don't. Use it now — API + MCP cardCopy contradicts both Figma and the spec — question for author, not a style nit.
These are opposite claims about whether a key is needed. Compounding it: the CTA links to Question for author: did the API+MCP flow pivot to require a self-service key (in which case Figma's copy and the ClickUp spec need updating to match), or is HeroMatches Figma exactly — see "Validated against Figma" below. Latest finding tickerMatches Figma exactly — see "Validated against Figma" below. Track record + testimonialsMatches Figma exactly, including verbatim card copy — see "Validated against Figma" below. Services rowMatches Figma exactly (down to the 7px bullet gap) — see "Validated against Figma" below. Alerts explainer stripNo dedicated Figma node was provided for this (not in the PR's frame list), so this is diff-only. Copy drops "webhook" from the trigger list ( Nice-to-have — mobile
Validated against Figma — no change needed
Generated by Claude Code |
Contributor
|
🔍 Vercel preview: https://anticapture-cvqgbde2z-ful.vercel.app |
isadorable-png
approved these changes
Aug 21, 2026
isadorable-png
left a comment
isadorable-png
left a comment
Collaborator
There was a problem hiding this comment.
- Break the text like this:
- Create a pattern for names here, maybe always the name on top and the @ at the bottom, this is different on each person.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Panel v2.1 (DEV-1148, spec 🫕 Panel v2.1). This PR combines the whole stack (#2123, #2124, #2125, #2126, #2127, #2128) into a single PR against
dev.The full spec flow lands on the page: hero → latest finding → monitored DAOs → track record → use it now → services → footer.
What changes
1. Hero —
PanelHero.tsxreplaces the old "Panel" title/description: judgment headline +HOW THE FRAMEWORK WORKS →on the left, theGOVERNANCE RISK, RIGHT NOWstage chart on the right (DaoProtectionLevelsmoved to horizontal Stage 0/1/2 bars per Figma). Retired:TreasuryMonitoring,DelegatedSupplyHistory,DaoProtectionLevelsTooltip.2. Latest finding ticker —
LatestFindingTicker.tsx, a one-line strip between the hero and the table, fed live by the newest Paragraph publication (shared/services/paragraph/latestPost.ts).3. Monitored DAOs, no inner scroll — the table wrapper drops its fixed-height viewport so all rows show and the page scrolls as one; the table itself (columns, tooltips, sorting) is untouched. The section header pins while the page scrolls (xl+).
4. Track record —
TrackRecordSection.tsxwith three outcome-framed case cards (ENS, Uniswap, Arbitrum) linking to the blog, plusTestimonialCarousel.tsxwith five verbatim quotes from the X mentions audit, each linking to its source tweet.ClickableCard(design system) gains an optionalhrefso it renders as aLink.5. Use it now —
UseItNowSection.tsx: Alerts card →/alerts(which gains the spec's explainer strip above the channel cards), API + MCP card → docs.6. Services row —
ServicesRow.tsx:SERVICES BY BLOCKFUL+ service lines withTalk to us →to/contact.Figma frames:
3633:96651(hero),3633:96681(ticker),3633:96810(track record),3633:96828(use it now),3633:96848(services).Notes for review
NO STAGE/NOT ASSESSEDare no longer counted in the chart (they remain in the table)./alertshas no webhook button: the spec's explainer mentions webhooks, but there's no webhook route in the repo to point at — left out rather than invented.https://docs.anticapture.com; if a specific quickstart path exists it's a one-line change.Verification
tsc --noEmitclean ·eslintclean · tests pass on every part · rendered locally at 1440px.origin/devmerged in cleanly.🤖 Generated with Claude Code