FutureEval Branding & Page Updates #4001
Conversation
…write into futureeval-branding
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 12
🤖 Fix all issues with AI agents
In
`@front_end/src/app/`(futureeval)/futureeval/components/benchmark/futureeval-model-bar.tsx:
- Around line 46-49: The clickable container div (the element using onClick and
located in futureeval-model-bar.tsx) is not keyboard accessible; update that div
to be focusable and operable via keyboard by adding tabIndex={0}, role="button"
(and an appropriate aria-label if needed), and a keyDown handler that calls the
same handler (handleClick) when Enter or Space is pressed; ensure the keyDown
logic checks for event.key === "Enter" or " " / "Spacebar" and calls handleClick
(or delegates to the existing handleClick) so mouse and keyboard activation
behave identically.
- Around line 117-123: Replace the manual fixed positioning that uses
mousePos.x/y (+12) with Floating UI so the tooltip won't overflow: import
useFloating and middleware (offset, shift, flip) and create a virtual reference
element from the current mouse coordinates (a virtual element whose
getBoundingClientRect returns a rect centered at mousePos) then call
useFloating({placement: "top-start" (or desired), middleware: [offset(12),
shift(), flip()], while passing the virtual reference as reference}); apply the
returned floating styles/strategy to the tooltip container and use floating ref
for the element instead of the inline left/top style in the component
(futureeval-model-bar component / tooltip div) so Floating UI handles viewport
collision automatically.
In
`@front_end/src/app/`(futureeval)/futureeval/components/futureeval-leaderboard-table.tsx:
- Around line 32-40: The scrolling effect that uses useEffect with highlightId
and highlightedRowRef should also depend on the data so it runs after entries
are populated; update the dependency array to include the entries (or the
computed rows) used to render the table, or move this useEffect to after the
rows computation and depend on rows, so when entries change and the
highlightedRowRef becomes available it will call
highlightedRowRef.current.scrollIntoView({ behavior: "smooth", block: "center"
}).
- Around line 110-119: The table row is only clickable by mouse; make it
keyboard-accessible by adding role="button" and a dynamic tabIndex (0 when
isClickable, -1 otherwise) to the <tr>, and add an onKeyDown handler that
triggers router.push(profileHref) when Enter or Space is pressed (only when
isClickable). Keep the existing onClick behavior using router.push(profileHref),
preserve highlightedRowRef, and include focus styles in the className (e.g., add
focus:outline-none / focus-visible ring classes) so keyboard focus is visible;
ensure nothing changes when isClickable is false.
- Around line 15-22: The file currently uses a hardcoded mockTranslate function
(mockTranslate) passed to entryLabel, bypassing localization; replace
mockTranslate with the real useTranslations() hook from next-intl (import and
call useTranslations in the component) and pass the resulting t function into
entryLabel so it resolves the existing keys communityPrediction and
aibLegendPros; also update the other occurrence of mockTranslate (the second use
of entryLabel) to use the same t function instead of the mock.
In
`@front_end/src/app/`(futureeval)/futureeval/components/futureeval-methodology-content.tsx:
- Around line 163-169: The "Learn more" Link uses generic text and should have
an accessible, descriptive label: update the Link element that checks linkHref
(the Link component instance with className using FE_TYPOGRAPHY.link and
FE_COLORS.textAccent) to include an aria-label that incorporates the card title
(e.g., using the component's title or card.title variable) such as "Learn more
about {title}" so screen readers get context; keep the visible text unchanged
and ensure aria-label is only added when linkHref is present.
- Around line 14-17: The top doc comment in futureeval-methodology-content.tsx
incorrectly states the content uses monospace fonts; update that comment to
reflect the actual typography used (Newsreader and sans styles) and the
FutureEval theme colors so it matches the component's classes (e.g., the
Newsreader/sans font utility classes applied in this component); ensure the
brief summary accurately describes typography and theme usage and remove any
mention of monospace.
In
`@front_end/src/app/`(futureeval)/futureeval/components/futureeval-participate-tab.tsx:
- Around line 42-57: The "here" button inside the submitSteps JSX is not
accessible because its visible text is ambiguous to screen readers; update the
button element rendered in submitSteps to include a descriptive accessible label
(e.g., add an aria-label like "Create a new bot account" or change the button
text to that phrase) so screen readers convey the action, keeping the existing
onClick behavior that uses router.push("/accounts/settings/bots/#create") or
setCurrentModal({ type: "signup" }) when user is absent.
In
`@front_end/src/app/`(futureeval)/futureeval/components/futureeval-tournaments.tsx:
- Around line 51-59: The heading is semantically an h4 but uses FE_TYPOGRAPHY.h2
styling; replace the <h4> element containing "Benchmarking Tournaments" with an
appropriate semantic heading (use <h2> to match FE_TYPOGRAPHY.h2) so the element
tag and visual typography align, keeping the same className expression (cn(...,
FE_TYPOGRAPHY.h2, FE_COLORS.textHeading)) unchanged.
In
`@front_end/src/app/`(futureeval)/futureeval/components/news/futureeval-news-feed.tsx:
- Line 149: The FormErrorMessage currently renders error?.digest (an opaque
server-side ID) which is not user-friendly; update the component usage in
futureeval-news-feed.tsx to display a human-readable string such as
error?.message or a generic fallback like "An unexpected error occurred" and
keep the digest for diagnostics by logging it (e.g., console.error or the app
logger) alongside the user message; locate the occurrence of FormErrorMessage
and change the prop to error?.message || "An unexpected error occurred" while
emitting the digest to logs for debugging.
- Around line 38-41: The pageNumber initialization can produce NaN when
pageNumberParam is non-numeric; update the logic that computes pageNumber
(currently using Number(params.get(POST_PAGE_FILTER))) to coerce and validate
the value (e.g., parseInt or Number followed by isNaN check) and fallback to 1
when invalid, then use that validated value to initialize clientPageNumber via
useState; change the computation referenced by pageNumberParam,
params.get(POST_PAGE_FILTER), POST_PAGE_FILTER, pageNumber, and clientPageNumber
so PostsFeedScrollRestoration never receives NaN.
In
`@front_end/src/app/`(main)/aib/components/aib/tabs/benchmark/performance-over-time/aib-benchmark-performance-chart.tsx:
- Around line 298-311: getStarOpacity currently only checks hoveredCompany and
ignores selectedCompany, causing star markers to dim incorrectly when a company
is selected; update getStarOpacity (which uses normalizeToCompany and
hoveredCompany) to mirror getPointOpacity behavior by first checking
selectedCompany and, if present, returning full opacity for the selected company
and reduced opacity for others, otherwise fall back to the existing
hoveredCompany logic so hover-only state still applies.
♻️ Duplicate comments (2)
front_end/src/app/(futureeval)/futureeval/components/news/futureeval-news-feed.tsx (1)
72-76: State not reset when filters change.When
filterschange, the analytics event is sent, butpaginatedPosts,offset,hasMoreData, anderrorare not reset. This could lead to stale data being displayed if filters change after initial render.front_end/src/app/(main)/aib/components/aib/tabs/benchmark/performance-over-time/aib-benchmark-performance-chart.tsx (1)
72-75: Incomplete model-to-company normalization remains unaddressed.Per the previous review comment,
normalizeToCompanyonly handles GPT→OpenAI but misses other model families. Grok models will display as "Grok-X" instead of "xAI", and any future models with similar patterns will also be inconsistent.Consider using the existing
detectFamilymapping frombot_meta.tsor extending this function to handle additional model families.
🧹 Nitpick comments (8)
front_end/src/app/(futureeval)/futureeval/components/futureeval-tournaments.tsx (1)
15-47: Hoist static data outside the component.
CARDS_DATAis a static constant that gets recreated on every render. Move it outside the component to avoid unnecessary allocations.Also, verify that
isLive: truefor "Fall 2025" is still accurate given the current date is January 2026.♻️ Suggested refactor
+const CARDS_DATA = [ + { + title: "Fall 2025", + href: "/aib/2025/fall", + imgUrl: "https://cdn.metaculus.com/aib-q3.webp", + prize: "$58,000", + isLive: true, + }, + { + title: "Q2 2025", + href: "/aib/2025/q2", + imgUrl: "https://cdn.metaculus.com/aib-q2.webp", + prize: "$30,000", + }, + { + title: "Q1 2025", + href: "/aib/2025/q1", + imgUrl: "https://cdn.metaculus.com/2025-q1.webp", + prize: "$30,000", + }, + { + title: "Q4 2024", + href: "/aib/2024/q4", + imgUrl: "https://cdn.metaculus.com/hires-q4.webp", + prize: "$30,000", + }, + { + title: "Q3 2024", + href: "/aib/2024/q3", + imgUrl: "https://cdn.metaculus.com/hires-bw.webp", + prize: "$30,000", + }, +]; + const FutureEvalTournaments: React.FC = () => { - const CARDS_DATA = [ - { - title: "Fall 2025", - ... - }, - ... - ]; - return (front_end/src/app/(futureeval)/futureeval/components/futureeval-methodology-content.tsx (2)
18-72: Hoist staticCARDSoutside the component.This array is constant and re-created on every render. Moving it to module scope keeps referential stability and avoids unnecessary allocations.
♻️ Suggested refactor
-const FutureEvalMethodologyContent: React.FC = () => { - const CARDS = [ +const CARDS = [ /* ... */ - ] as const; + ] as const; + +const FutureEvalMethodologyContent: React.FC = () => {
112-121: Prefer an explicit stable key instead oftitle.
titleis optional (Line 133) and could change or duplicate; adding anidavoids React key warnings later.♻️ Suggested refactor
- const CARDS = [ + const CARDS = [ { + id: "model-leaderboard", icon: faCircleDot, title: "Model Leaderboard", /* ... */ }, { + id: "bots-vs-humans", icon: faBullseye, title: "Bots vs Humans", /* ... */ }, { + id: "reasoning-beyond-memorization", icon: faBrain, title: "Reasoning Beyond Memorization", /* ... */ }, ] as const; - {CARDS.map((card) => ( + {CARDS.map((card) => ( <FutureEvalIdeaCard - key={card.title} + key={card.id} icon={card.icon} title={card.title} linkHref={card.linkHref} >front_end/src/app/(futureeval)/futureeval/components/news/futureeval-news-feed.tsx (1)
130-135: Redundant type assertion.The
isNotebookPost(p)function is a type guard that narrowsptoNotebookPost. The explicit castp as NotebookPoston line 133 is unnecessary.Suggested simplification
{paginatedPosts.map( (p) => - isNotebookPost(p) && ( - <FutureEvalNewsCard key={p.id} post={p as NotebookPost} /> - ) + isNotebookPost(p) && <FutureEvalNewsCard key={p.id} post={p} /> )}Alternatively, filter first for cleaner rendering:
{paginatedPosts .filter(isNotebookPost) .map((p) => <FutureEvalNewsCard key={p.id} post={p} />)}front_end/src/app/(futureeval)/futureeval/components/benchmark/futureeval-model-bar.tsx (1)
30-30: ConsidertoFixed(2)for consistent decimal display.
Math.round(model.score * 100) / 100may display1.1instead of1.10. If consistent two-decimal formatting is desired for visual alignment, consider:- const score = Math.round(model.score * 100) / 100; + const score = model.score.toFixed(2);This ensures scores like
1.10display with trailing zeros for tabular alignment.front_end/src/app/(futureeval)/futureeval/components/orbit/orbit-circle.tsx (2)
272-279: Consider handling container resize for responsive width.The width calculation runs only when
containerRefchanges, but if the container resizes (e.g., device rotation), the card width won't update. Consider usingResizeObserveror recalculating on window resize if responsive behavior is needed.♻️ Optional: Add resize handling
// Calculate 90% of container width React.useEffect(() => { if (!containerRef?.current) return; - const containerRect = containerRef.current.getBoundingClientRect(); - setWidth(containerRect.width * 0.9); - }, [containerRef]); + const updateWidth = () => { + const containerRect = containerRef.current?.getBoundingClientRect(); + if (containerRect) { + setWidth(containerRect.width * 0.9); + } + }; + updateWidth(); + + const resizeObserver = new ResizeObserver(updateWidth); + resizeObserver.observe(containerRef.current); + return () => resizeObserver.disconnect(); + }, [containerRef]);
335-375: Minor duplication between ExpandedCard and MobileExpandedCard.Both components share similar rendering logic for title, description, carousel, and link. This is acceptable given the structural differences (portal vs inline, close button), but could be extracted into a shared content component if the duplication grows.
front_end/src/app/(futureeval)/futureeval/components/futureeval-participate-tab.tsx (1)
160-179: Hoist static resources data to module scope.
RESOURCES_DATAis static; defining it outside the component avoids re-allocations on every render.♻️ Proposed refactor
+const RESOURCES_DATA = [ + { + icon: faBook, + title: "Full Benchmark Information", + description: "Benchmark deep dive, scoring, analysis, etc", + href: "/notebooks/38928/futureeval-resources-page/", + }, + { + icon: faBookOpen, + title: "Research Highlights", + description: "Key findings and methodology papers from our research.", + href: "/notebooks/38928/futureeval-resources-page/#research-reports-and-overview-of-the-field", + }, + { + icon: faTrophy, + title: "Full Leaderboards", + description: "Complete rankings across all questions and time periods.", + href: "/futureeval/leaderboard", + }, +] as const; + const FutureEvalResources: React.FC = () => { - const RESOURCES_DATA = [ - { - icon: faBook, - title: "Full Benchmark Information", - description: "Benchmark deep dive, scoring, analysis, etc", - href: "/notebooks/38928/futureeval-resources-page/", - }, - { - icon: faBookOpen, - title: "Research Highlights", - description: "Key findings and methodology papers from our research.", - href: "/notebooks/38928/futureeval-resources-page/#research-reports-and-overview-of-the-field", - }, - { - icon: faTrophy, - title: "Full Leaderboards", - description: "Complete rankings across all questions and time periods.", - href: "/futureeval/leaderboard", - }, - ] as const; - return (
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
front_end/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (17)
front_end/src/app/(futureeval)/futureeval/components/benchmark/futureeval-benchmark-headers.tsxfront_end/src/app/(futureeval)/futureeval/components/benchmark/futureeval-model-bar.tsxfront_end/src/app/(futureeval)/futureeval/components/benchmark/futureeval-model-benchmark.tsxfront_end/src/app/(futureeval)/futureeval/components/futureeval-hero-banner.tsxfront_end/src/app/(futureeval)/futureeval/components/futureeval-leaderboard-hero.tsxfront_end/src/app/(futureeval)/futureeval/components/futureeval-leaderboard-table.tsxfront_end/src/app/(futureeval)/futureeval/components/futureeval-methodology-content.tsxfront_end/src/app/(futureeval)/futureeval/components/futureeval-participate-tab.tsxfront_end/src/app/(futureeval)/futureeval/components/futureeval-tabs.tsxfront_end/src/app/(futureeval)/futureeval/components/futureeval-tournaments.tsxfront_end/src/app/(futureeval)/futureeval/components/news/futureeval-news-card.tsxfront_end/src/app/(futureeval)/futureeval/components/news/futureeval-news-feed.tsxfront_end/src/app/(futureeval)/futureeval/components/orbit/futureeval-orbit.tsxfront_end/src/app/(futureeval)/futureeval/components/orbit/orbit-circle.tsxfront_end/src/app/(futureeval)/futureeval/components/orbit/orbit-constants.tsfront_end/src/app/(futureeval)/futureeval/components/orbit/orbit-utils.tsfront_end/src/app/(main)/aib/components/aib/tabs/benchmark/performance-over-time/aib-benchmark-performance-chart.tsx
🚧 Files skipped from review as they are similar to previous changes (4)
- front_end/src/app/(futureeval)/futureeval/components/futureeval-tabs.tsx
- front_end/src/app/(futureeval)/futureeval/components/benchmark/futureeval-model-benchmark.tsx
- front_end/src/app/(futureeval)/futureeval/components/futureeval-hero-banner.tsx
- front_end/src/app/(futureeval)/futureeval/components/news/futureeval-news-card.tsx
🧰 Additional context used
🧬 Code graph analysis (11)
front_end/src/app/(futureeval)/futureeval/components/news/futureeval-news-feed.tsx (6)
front_end/src/types/post.ts (2)
PostWithForecasts(214-218)NotebookPost(197-202)front_end/src/services/api/posts/posts.shared.ts (1)
PostsParams(18-46)front_end/src/utils/core/errors.ts (1)
logError(117-151)front_end/src/app/(futureeval)/futureeval/theme.ts (2)
FE_TYPOGRAPHY(153-177)FE_COLORS(38-145)front_end/src/utils/questions/helpers.ts (1)
isNotebookPost(48-50)front_end/src/components/ui/form_field.tsx (1)
FormErrorMessage(82-109)
front_end/src/app/(futureeval)/futureeval/components/futureeval-participate-tab.tsx (2)
front_end/src/contexts/modal_context.tsx (1)
useModal(90-90)front_end/src/app/(futureeval)/futureeval/theme.ts (2)
FE_COLORS(38-145)FE_TYPOGRAPHY(153-177)
front_end/src/app/(futureeval)/futureeval/components/orbit/orbit-utils.ts (2)
front_end/src/app/(futureeval)/futureeval/components/orbit/orbit-auto-carousel.tsx (1)
CarouselChip(14-19)front_end/src/app/(futureeval)/futureeval/components/orbit/orbit-constants.ts (3)
MODEL_BENCHMARK_CHIPS(72-108)BOT_TOURNAMENTS_CHIPS(113-116)OrbitItem(15-24)
front_end/src/app/(futureeval)/futureeval/components/futureeval-leaderboard-hero.tsx (1)
front_end/src/app/(futureeval)/futureeval/theme.ts (2)
FE_COLORS(38-145)FE_TYPOGRAPHY(153-177)
front_end/src/app/(futureeval)/futureeval/components/futureeval-leaderboard-table.tsx (3)
front_end/src/types/scoring.ts (1)
LeaderboardDetails(116-119)front_end/src/app/(main)/aib/components/aib/leaderboard/utils.ts (2)
shouldDisplayEntry(72-82)entryLabel(30-45)front_end/src/app/(main)/aib/components/aib/light-dark-icon.tsx (1)
LightDarkIcon(12-42)
front_end/src/app/(futureeval)/futureeval/components/benchmark/futureeval-model-bar.tsx (2)
front_end/src/app/(futureeval)/futureeval/theme.ts (1)
FE_COLORS(38-145)front_end/src/app/(main)/aib/components/aib/light-dark-icon.tsx (1)
LightDarkIcon(12-42)
front_end/src/app/(futureeval)/futureeval/components/orbit/orbit-constants.ts (1)
front_end/src/app/(futureeval)/futureeval/components/orbit/orbit-auto-carousel.tsx (1)
CarouselChip(14-19)
front_end/src/app/(futureeval)/futureeval/components/futureeval-tournaments.tsx (1)
front_end/src/app/(futureeval)/futureeval/theme.ts (2)
FE_TYPOGRAPHY(153-177)FE_COLORS(38-145)
front_end/src/app/(futureeval)/futureeval/components/benchmark/futureeval-benchmark-headers.tsx (1)
front_end/src/app/(futureeval)/futureeval/theme.ts (2)
FE_TYPOGRAPHY(153-177)FE_COLORS(38-145)
front_end/src/app/(futureeval)/futureeval/components/futureeval-methodology-content.tsx (1)
front_end/src/app/(futureeval)/futureeval/theme.ts (2)
FE_TYPOGRAPHY(153-177)FE_COLORS(38-145)
front_end/src/app/(futureeval)/futureeval/components/orbit/orbit-circle.tsx (3)
front_end/src/app/(futureeval)/futureeval/components/orbit/orbit-constants.ts (1)
OrbitItem(15-24)front_end/src/app/(futureeval)/futureeval/theme.ts (1)
FE_COLORS(38-145)front_end/src/app/(futureeval)/futureeval/components/orbit/orbit-utils.ts (2)
getCarouselChips(11-20)getLinkInfo(25-41)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Build Docker Image
- GitHub Check: integration-tests
🔇 Additional comments (23)
front_end/src/app/(futureeval)/futureeval/components/futureeval-leaderboard-hero.tsx (1)
11-56: Clean, on-brand hero component.Layout, theming, and responsiveness look consistent and clear.
front_end/src/app/(futureeval)/futureeval/components/futureeval-tournaments.tsx (2)
61-66: LGTM!Carousel is properly typed and uses theme constants consistently.
68-85: LGTM!The banner section uses theme constants consistently and the link styling is appropriate.
front_end/src/app/(futureeval)/futureeval/components/benchmark/futureeval-benchmark-headers.tsx (3)
18-51: Reusable header component is clean and cohesive.
Nice, minimal composition using shared theme tokens and cn utility.
56-63: Simple wrapper reuse looks good.
Clear, focused composition of the base header.
68-86: Inline linked subtitle is well composed.
Good use of shared link and accent styles for consistency.front_end/src/app/(futureeval)/futureeval/components/news/futureeval-news-feed.tsx (1)
78-114: LGTM!The
loadMorePostsfunction properly manages loading state, handles errors with logging, and updates pagination state atomically. The defensive check combiningresponse.nextandnewPosts.lengthfor determininghasNextPageis a good practice.front_end/src/app/(futureeval)/futureeval/components/benchmark/futureeval-model-bar.tsx (1)
28-148: Well-structured component with clean conditional styling.The component demonstrates good practices:
- Proper use of
FloatingPortalfor tooltip rendering outside the DOM hierarchy- Clean conditional styling between aggregate and standard bars using theme constants
- Appropriate use of
encodeURIComponentfor URL parametersfront_end/src/app/(futureeval)/futureeval/components/orbit/orbit-utils.ts (1)
1-41: LGTM!Clean utility functions with proper switch statements and safe defaults. The separation of carousel chip retrieval and link info generation follows single responsibility principle well.
front_end/src/app/(futureeval)/futureeval/components/orbit/orbit-circle.tsx (3)
21-39: LGTM!Well-structured props type with clear separation of desktop and mobile-specific properties. The optional props have sensible defaults.
126-148: LGTM!Good accessibility implementation on the orbit button with proper
tabIndexandaria-hiddenhandling when expanded, pluspointer-events-noneto prevent interaction with the hidden element.
170-249: LGTM!Clean implementation with proper event handling for scroll actions and conditional rendering of carousel and link elements.
front_end/src/app/(futureeval)/futureeval/components/orbit/futureeval-orbit.tsx (4)
44-52: LGTM!Good approach using
(hover: hover)media query for capability detection rather than touch detection. This correctly handles hybrid devices like laptops with touchscreens.
58-79: LGTM!Switch statement properly uses block scope for the "scroll" case, addressing the previous lint concern. Action handling logic is correct.
91-112: LGTM!Clean position calculation using trigonometry. Container click handler properly distinguishes direct clicks from bubbled events to avoid unintended closures.
163-234: LGTM! CSS animation approach is performant with GPU acceleration viawillChange: "transform". The counter-rotation wrapper elegantly keeps content upright during orbit rotation. Animation properly pauses when items are expanded. Keyframesorbit-rotateandorbit-counter-rotateare properly defined infront_end/src/app/globals.css.front_end/src/app/(futureeval)/futureeval/components/orbit/orbit-constants.ts (3)
15-24: LGTM!Well-defined type with clear action discriminant. The union type for action.type provides good type safety for different navigation behaviors.
30-62: LGTM!Clean data structure for orbit items. The action configurations properly match their respective types (scroll, tab-scroll, navigate).
124-157: LGTM!Well-documented configuration with clear comments explaining each value. The animation duration calculation correctly derives the full rotation time from the speed constant.
front_end/src/app/(main)/aib/components/aib/tabs/benchmark/performance-over-time/aib-benchmark-performance-chart.tsx (1)
763-805: LGTM: Accessibility improvements properly implemented.The nested interactive element issue has been correctly resolved by implementing a single button with toggle behavior. The
aria-pressedand dynamicaria-labelattributes provide good screen reader support, and the X icon is now properly marked as decorative (aria-hidden).front_end/src/app/(futureeval)/futureeval/components/futureeval-participate-tab.tsx (3)
25-32: Clean, minimal composition.
The wrapper component is straightforward and easy to follow.
135-154: Nice, focused step rendering.
The step layout and styling are clear and consistent.
214-255: Resource card component looks solid.
Good structure, semantics, and styling consistency.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
front_end/src/app/(futureeval)/futureeval/components/benchmark/futureeval-model-bar.tsx
Show resolved
Hide resolved
front_end/src/app/(futureeval)/futureeval/components/benchmark/futureeval-model-bar.tsx
Show resolved
Hide resolved
front_end/src/app/(futureeval)/futureeval/components/futureeval-leaderboard-table.tsx
Show resolved
Hide resolved
front_end/src/app/(futureeval)/futureeval/components/futureeval-leaderboard-table.tsx
Outdated
Show resolved
Hide resolved
front_end/src/app/(futureeval)/futureeval/components/futureeval-leaderboard-table.tsx
Show resolved
Hide resolved
front_end/src/app/(futureeval)/futureeval/components/futureeval-participate-tab.tsx
Show resolved
Hide resolved
front_end/src/app/(futureeval)/futureeval/components/futureeval-tournaments.tsx
Show resolved
Hide resolved
front_end/src/app/(futureeval)/futureeval/components/news/futureeval-news-feed.tsx
Show resolved
Hide resolved
front_end/src/app/(futureeval)/futureeval/components/news/futureeval-news-feed.tsx
Outdated
Show resolved
Hide resolved
.../aib/components/aib/tabs/benchmark/performance-over-time/aib-benchmark-performance-chart.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In
`@front_end/src/app/`(futureeval)/futureeval/components/benchmark/futureeval-model-bar.tsx:
- Around line 81-83: The tooltip flashes at (12,12) because onMouseEnter sets
isHovered via setIsHovered(true) before mousePos is initialized; update the
onMouseEnter handler in the component so it captures the pointer location from
the enter event (e.g., call handleMouseMove or setMousePos using
event.clientX/event.clientY or compute relative coords) before/when calling
setIsHovered(true), ensuring mousePos is valid on first hover; reference the
onMouseEnter/onMouseLeave handlers, setIsHovered, mousePos state, and
handleMouseMove to locate and modify the code.
In
`@front_end/src/app/`(main)/aib/components/aib/tabs/benchmark/performance-over-time/aib-benchmark-performance-chart.tsx:
- Around line 170-183: The trend line logic in the trend useMemo currently
prefers sotaPoints when sotaPoints.length >= 2 but the MIN_TREND_POINTS is 3,
which can hide the trend even if plotPoints meets the threshold; update the
selection so base is chosen by checking against MIN_TREND_POINTS: use sotaPoints
if sotaPoints.length >= MIN_TREND_POINTS, otherwise fall back to plotPoints (and
still bail out if base.length < MIN_TREND_POINTS), keeping the early return when
selectedCompany is set; change the selection logic inside the trend function
(referencing MIN_TREND_POINTS, trend, useMemo, selectedCompany, sotaPoints,
plotPoints) accordingly.
♻️ Duplicate comments (1)
front_end/src/app/(main)/aib/components/aib/tabs/benchmark/performance-over-time/aib-benchmark-performance-chart.tsx (1)
71-75: Company normalization only covers GPT → OpenAI.Other families (e.g., Grok → xAI) will still display as the raw first token. Consider using the existing family mapping to keep legend grouping consistent.
🧹 Nitpick comments (5)
front_end/src/app/(futureeval)/futureeval/components/futureeval-participate-tab.tsx (1)
160-180: Consider movingRESOURCES_DATAoutside the component.The
RESOURCES_DATAarray is static and gets recreated on each render. Moving it outside the component scope avoids unnecessary object allocations.♻️ Suggested refactor
+const RESOURCES_DATA = [ + { + icon: faBook, + title: "Full Benchmark Information", + description: "Benchmark deep dive, scoring, analysis, etc", + href: "/notebooks/38928/futureeval-resources-page/", + }, + { + icon: faBookOpen, + title: "Research Highlights", + description: "Key findings and methodology papers from our research.", + href: "/notebooks/38928/futureeval-resources-page/#research-reports-and-overview-of-the-field", + }, + { + icon: faTrophy, + title: "Full Leaderboards", + description: "Complete rankings across all questions and time periods.", + href: "/futureeval/leaderboard", + }, +] as const; + const FutureEvalResources: React.FC = () => { - const RESOURCES_DATA = [ - { - icon: faBook, - ... - }, - ] as const; - return (front_end/src/app/(futureeval)/futureeval/components/benchmark/futureeval-model-bar.tsx (1)
28-32: ClampheightPctdefensively to avoid overflow/collapse.
If upstream data ever sends <0 or >100, the bar can mis-render. Clamping keeps layout stable.♻️ Proposed change
- const score = Math.round(model.score * 100) / 100; + const score = Math.round(model.score * 100) / 100; + const clampedHeightPct = Math.min(100, Math.max(0, heightPct)); ... - style={{ height: `${heightPct}%`, minHeight: "48px" }} + style={{ height: `${clampedHeightPct}%`, minHeight: "48px" }}Also applies to: 80-80
front_end/src/app/(futureeval)/futureeval/components/futureeval-methodology-content.tsx (3)
20-73: Hoist staticCARDSdata to module scope to avoid per-render allocation.
This data is static and can live outside the component.♻️ Suggested refactor
-const FutureEvalMethodologyContent: React.FC = () => { - const CARDS = [ +const CARDS = [ { icon: faCircleDot, title: "Model Leaderboard", linkHref: "/notebooks/38928/futureeval-resources-page/#what-is-the-model-leaderboard", content: ( <> <p> We run all major models with a simple prompt on most open Metaculus forecasting questions, and collect their forecasts. As questions resolve, we score the models' forecasts and continuously update our leaderboard to rank them against each other. We also plot trends in model release date and score over time. </p> </> ), }, { icon: faBullseye, title: "Bots vs Humans", linkHref: "/notebooks/38928/futureeval-resources-page/#what-do-the-tournaments-look-like", content: ( <> <p> We also run seasonal and biweekly Benchmarking Tournaments with $175k in combined prizes. They are open to all, and the best scaffold builders compete to share the prize pool in proportion to their bot's accuracy. Some of the forecasting questions are also submitted to our top human forecasters, allowing a direct comparison. </p> </> ), }, { icon: faBrain, title: "Reasoning Beyond Memorization", linkHref: "/notebooks/38928/futureeval-resources-page/#what-is-unique-about-futureeval", content: ( <> <p> Our diverse question topics range from economics, politics, tech, sports, war, elections, society, and more. It forces models to generalize beyond memorization on actively evolving interdisciplinary domains relevant to the world. This correlates with skill in long-term planning and decision-making. </p> </> ), }, - ] as const; + ] as const; + +const FutureEvalMethodologyContent: React.FC = () => {
19-19: Verify React namespace is in scope forReact.FCusage.
IfReactisn’t globally available in TS config, add a type-only import or switch toFC.🔧 Minimal fix (type-only import)
-import { PropsWithChildren } from "react"; +import type React from "react"; +import type { PropsWithChildren } from "react";Also applies to: 138-138
132-135: Maketitlerequired inIdeaCardPropsto match usage.
It’s used forkey, heading text, and the link label, so optional typing is misleading.✅ Suggested change
type IdeaCardProps = PropsWithChildren<{ icon: IconDefinition; - title?: string; + title: string; linkHref?: string; }>;Also applies to: 115-118
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
front_end/src/app/(futureeval)/futureeval/components/benchmark/futureeval-model-bar.tsxfront_end/src/app/(futureeval)/futureeval/components/futureeval-leaderboard-table.tsxfront_end/src/app/(futureeval)/futureeval/components/futureeval-methodology-content.tsxfront_end/src/app/(futureeval)/futureeval/components/futureeval-participate-tab.tsxfront_end/src/app/(futureeval)/futureeval/components/news/futureeval-news-feed.tsxfront_end/src/app/(main)/aib/components/aib/tabs/benchmark/performance-over-time/aib-benchmark-performance-chart.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- front_end/src/app/(futureeval)/futureeval/components/news/futureeval-news-feed.tsx
🧰 Additional context used
🧠 Learnings (3)
📓 Common learnings
Learnt from: aseckin
Repo: Metaculus/metaculus PR: 4001
File: front_end/src/app/(futureeval)/futureeval/components/futureeval-leaderboard-table.tsx:15-22
Timestamp: 2026-01-20T16:49:33.775Z
Learning: FutureEval pages and components deliberately use hardcoded English strings instead of translations/i18n. Do not suggest adding useTranslations() or other translation hooks to FutureEval components.
📚 Learning: 2026-01-20T16:49:33.775Z
Learnt from: aseckin
Repo: Metaculus/metaculus PR: 4001
File: front_end/src/app/(futureeval)/futureeval/components/futureeval-leaderboard-table.tsx:15-22
Timestamp: 2026-01-20T16:49:33.775Z
Learning: The mockTranslate function in front_end/src/app/(futureeval)/futureeval/components/futureeval-leaderboard-table.tsx is an intentional workaround to satisfy the entryLabel function signature from shared AIB utils while keeping FutureEval translation-free.
Applied to files:
front_end/src/app/(futureeval)/futureeval/components/benchmark/futureeval-model-bar.tsxfront_end/src/app/(futureeval)/futureeval/components/futureeval-leaderboard-table.tsxfront_end/src/app/(main)/aib/components/aib/tabs/benchmark/performance-over-time/aib-benchmark-performance-chart.tsxfront_end/src/app/(futureeval)/futureeval/components/futureeval-participate-tab.tsxfront_end/src/app/(futureeval)/futureeval/components/futureeval-methodology-content.tsx
📚 Learning: 2026-01-20T16:49:33.775Z
Learnt from: aseckin
Repo: Metaculus/metaculus PR: 4001
File: front_end/src/app/(futureeval)/futureeval/components/futureeval-leaderboard-table.tsx:15-22
Timestamp: 2026-01-20T16:49:33.775Z
Learning: In FutureEval UI components (files under front_end/src/app/**/futureeval/), hardcode English strings and do not introduce i18n translations or useTranslations() hooks. Treat these components as non-translated by design; avoid proposing or wiring translation logic (no translation hooks) in these files.
Applied to files:
front_end/src/app/(futureeval)/futureeval/components/benchmark/futureeval-model-bar.tsxfront_end/src/app/(futureeval)/futureeval/components/futureeval-leaderboard-table.tsxfront_end/src/app/(futureeval)/futureeval/components/futureeval-participate-tab.tsxfront_end/src/app/(futureeval)/futureeval/components/futureeval-methodology-content.tsx
🧬 Code graph analysis (3)
front_end/src/app/(main)/aib/components/aib/tabs/benchmark/performance-over-time/aib-benchmark-performance-chart.tsx (2)
front_end/src/constants/colors.ts (1)
METAC_COLORS(1-199)front_end/src/utils/charts/helpers.ts (1)
fitTrend(151-180)
front_end/src/app/(futureeval)/futureeval/components/futureeval-participate-tab.tsx (4)
front_end/src/contexts/modal_context.tsx (1)
useModal(90-90)front_end/src/contexts/auth_context.tsx (1)
useAuth(57-57)front_end/__mocks__/next/navigation.ts (1)
useRouter(19-19)front_end/src/app/(futureeval)/futureeval/theme.ts (2)
FE_COLORS(38-145)FE_TYPOGRAPHY(153-177)
front_end/src/app/(futureeval)/futureeval/components/futureeval-methodology-content.tsx (1)
front_end/src/app/(futureeval)/futureeval/theme.ts (2)
FE_TYPOGRAPHY(153-177)FE_COLORS(38-145)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: Build Docker Image
- GitHub Check: Frontend Checks
- GitHub Check: Backend Checks
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: integration-tests
🔇 Additional comments (10)
front_end/src/app/(futureeval)/futureeval/components/futureeval-participate-tab.tsx (5)
1-19: LGTM!Imports are well-organized and all are utilized within the component. The "use client" directive is correctly placed for a component using React hooks.
21-32: LGTM!Clean component composition with clear documentation. The separation into FutureEvalSubmitSteps and FutureEvalResources sub-components promotes maintainability.
37-74: LGTM!The authentication flow correctly handles both logged-in and logged-out states. The accessibility improvements from previous reviews are properly implemented (aria-label on button, proper rel attributes on external links).
136-155: LGTM!Clean presentational component with proper theming integration. The
shrink-0class on the step number ensures consistent layout.
215-258: LGTM!The resource card has proper accessibility attributes:
aria-hiddenon the decorative icon, descriptivearia-labelon the link, and focus-visible styles correctly placed on the interactive Link element. Thegroup-hoverpattern for the hover animation is well-implemented.front_end/src/app/(futureeval)/futureeval/components/benchmark/futureeval-model-bar.tsx (1)
53-60: Accessibility wiring looks good.
Role, tabIndex, key handling, and aria-label make this element keyboard-friendly.front_end/src/app/(futureeval)/futureeval/components/futureeval-leaderboard-table.tsx (4)
15-22: Mock translation shim aligns with the English-only FutureEval decision.
Looks good as-is. Based on learnings, this translation-free approach is intentional.
32-67: Row derivation + highlight scroll flow looks solid.
The scroll guard waits until rows exist and reacts to highlight changes cleanly.
104-133: Interactive row handling is complete.
Mouse click, keyboard activation, and focus styling for clickable rows are covered.
184-207: Helper formatting/components are clean and reusable.
No issues spotted.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
front_end/src/app/(futureeval)/futureeval/components/benchmark/futureeval-model-bar.tsx
Show resolved
Hide resolved
.../aib/components/aib/tabs/benchmark/performance-over-time/aib-benchmark-performance-chart.tsx
Show resolved
Hide resolved
🚀 Preview EnvironmentYour preview environment is ready!
Details
ℹ️ Preview Environment InfoIsolation:
Limitations:
Cleanup:
|
Summary by CodeRabbit
New Features
Improvements
Bug Fixes
✏️ Tip: You can customize this high-level summary in your review settings.