feat: Add comprehensive roadmap page #1912
Conversation
- Add Roadmap component with interactive initiative cards - Create MilestoneList, MilestoneDrawer, and ProgressBar components - Add Tooltip component for PR/issue titles with theme-aware styling - Implement responsive design with flexbox alignment fixes - Add extensive roadmap data with documented milestones across 10 initiatives - Add changelog and docs links to all relevant milestones - Update Docusaurus navbar with Roadmap link 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
Warning This PR exceeds the recommended limit of 1,000 lines.Large PRs are difficult to review and may be rejected due to their size. Please verify that this PR does not address multiple issues. |
Dependency Review✅ No vulnerabilities or license issues found.Scanned FilesNone |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #1912 +/- ##
==========================================
- Coverage 73.57% 73.56% -0.01%
==========================================
Files 634 634
Lines 59027 59027
==========================================
- Hits 43430 43425 -5
- Misses 12604 12614 +10
+ Partials 2993 2988 -5
Flags with carried forward coverage won't be shown. Click here to find out more. 🚀 New features to boost your workflow:
|
📝 WalkthroughWalkthroughAdds a complete Roadmap feature: data model, new /roadmap page and navbar link, multiple React UI components (hero, timeline, featured/highlights, initiatives, milestones, drawers, stats, tooltip), styles, maintainer docs, a blog post, and CI workflow enforcing release-docs checks. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant Browser
participant RoadmapPage as Roadmap Page
participant Data as roadmapConfig
participant Timeline as QuarterTimeline
participant Initiative as InitiativeCard
participant MilestoneList as MilestoneList
participant Drawer as MilestoneDrawer
Note over User,Browser: User navigates to /roadmap
User->>Browser: GET /roadmap
Browser->>RoadmapPage: render(roadmapConfig)
RoadmapPage->>Data: import roadmapConfig
RoadmapPage->>Timeline: render(quarters, initiatives)
RoadmapPage->>Initiative: render(initiative list)
User->>Timeline: select quarter
Timeline->>Data: aggregate milestones for quarter
Timeline->>RoadmapPage: show quarter detail
User->>Initiative: expand card
Initiative->>MilestoneList: render(grouped, sorted milestones)
User->>MilestoneList: click milestone
MilestoneList->>Drawer: open(milestone data)
Drawer->>User: display details
User->>Drawer: close (Escape/backdrop)
Drawer->>Initiative: onClose callback
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (13)
website/src/components/Roadmap/Tooltip.tsx (1)
55-58: Consider using CSS variables for colors.The tooltip colors are hardcoded. Using CSS variables would make theme adjustments easier and keep color tokens centralized in the stylesheet.
🔎 Refactor to use CSS variables
In
styles.module.css, add::root { --tooltip-bg-light: #1e1e2e; --tooltip-bg-dark: #2a2a3e; --tooltip-color: #f0f0f0; }Then in the component:
- const tooltipBg = isDark ? '#2a2a3e' : '#1e1e2e'; - const tooltipColor = '#f0f0f0'; + // Remove these lines and use CSS variables directly in the style prop or classNameAlternatively, rely entirely on CSS with data-theme selectors rather than inline styles.
website/src/components/Roadmap/MilestoneDrawer.tsx (2)
140-143: Quarter formatting could be more explicit.The chain of
.replace()calls works but is a bit implicit. Consider a helper function for clarity.🔎 Cleaner quarter formatting
const formatQuarter = (quarter: string) => { // 'q4-2025' → 'Q4 2025' return quarter.toUpperCase().replace('-', ' '); }; // Then use: {formatQuarter(milestone.quarter)}
105-110: Alt text may contain markdown formatting.The milestone label could include backtick code formatting (e.g.,
`atmos` integration), which isn't ideal for alt text. Consider stripping markdown from the label for the alt attribute.🔎 Strip markdown from alt text
<img src={milestone.screenshot} - alt={`Screenshot for ${milestone.label}`} + alt={`Screenshot for ${milestone.label.replace(/`/g, '')}`} loading="lazy" />Or better, add a utility function to strip all markdown:
const stripMarkdown = (text: string) => text.replace(/[`*_~]/g, '');website/src/components/Roadmap/styles.module.css (2)
974-979: Consider centralizing more color tokens as CSS variables.Progress colors are defined as variables, but many other colors are hardcoded throughout the file (e.g.,
#1e5bb8,#538ce9,#38a169). Defining these as CSS variables would improve maintainability and make theme adjustments easier.🔎 Example color token centralization
:root { /* Existing progress colors */ --progress-complete: #38a169; --progress-high: #3182ce; --progress-medium: #dd6b20; --progress-low: #e53e3e; /* Brand colors */ --color-primary: #1e5bb8; --color-primary-dark: #538ce9; --color-success: #38a169; --color-success-dark: #68d391; /* Then use throughout */ background: var(--color-primary); }
1267-1272: Reduced motion support is incomplete.The
prefers-reduced-motionmedia query only targets.initiativeCardand.quarterNode, but many other elements have transitions (.milestoneItem,.scrollButton, hover effects, etc.).While Framer Motion components handle reduced motion automatically, CSS transitions should also respect this preference for consistency.
🔎 Expand reduced motion coverage
@media (prefers-reduced-motion: reduce) { .initiativeCard, .quarterNode, .milestoneItem, .scrollButton, .milestoneLinkBadge, .drawerClose, .progressFill { transition: none; } }Or use a more general approach:
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }website/src/components/Roadmap/utils.tsx (1)
4-16: Inline markdown parser has expected limitations.The regex
/([^]+)/g` handles simple backtick code spans but won't match:
- Empty code spans:
(no characters between backticks)- Unmatched backticks:
This is `code(renders backtick as-is)- Multiple backticks:
(triple backticks)This is fine for the roadmap use case where labels should be simple. Consider adding a comment documenting these limitations to prevent misuse.
🔎 Add documentation comment
/** * Renders basic inline markdown (backtick code spans). * Converts `code` to <code>code</code>. + * + * Limitations: + * - Only supports single backticks (not triple backticks) + * - Empty code spans are not matched + * - Unmatched backticks are rendered as-is */ export function renderInlineMarkdown(text: string): React.ReactNode {website/src/data/roadmap.js (1)
24-31: Quarters data will need periodic updates.The
status: 'current'on Q4 2025 is hardcoded. Consider adding a comment noting when this should be updated, or computingcurrentdynamically based onDate.now().website/src/components/Roadmap/InitiativeCard.tsx (1)
19-31: UnusedchangelogSlugsfield in interface.The
changelogSlugsfield on line 30 isn't used anywhere in this component. If it's not needed, remove it to keep the interface clean.Proposed fix
interface Initiative { id: string; icon: string; title: string; tagline: string; description: string; progress: number; status: 'completed' | 'in-progress' | 'planned'; milestones: Milestone[]; issues: number[]; prs: PRReference[]; - changelogSlugs: string[]; }website/src/components/Roadmap/ProgressBar.tsx (1)
20-25: Consider hoistinggetProgressColoroutside the component.This function is recreated on every render. Moving it outside the component would be a minor optimization.
Proposed refactor
+const getProgressColor = (value: number): string => { + if (value >= 90) return 'var(--progress-complete)'; + if (value >= 70) return 'var(--progress-high)'; + if (value >= 40) return 'var(--progress-medium)'; + return 'var(--progress-low)'; +}; + export default function ProgressBar({ progress, showLabel = true, size = 'medium', animated = true, }: ProgressBarProps): JSX.Element { const clampedProgress = Math.min(100, Math.max(0, progress)); - - const getProgressColor = (value: number): string => { - if (value >= 90) return 'var(--progress-complete)'; - if (value >= 70) return 'var(--progress-high)'; - if (value >= 40) return 'var(--progress-medium)'; - return 'var(--progress-low)'; - };website/src/components/Roadmap/QuarterTimeline.tsx (3)
14-20: DuplicateMilestonetype.This local
Milestoneinterface duplicates the one exported fromMilestoneList.tsx(lines 7-23) but with fewer fields. Consider importing and using the canonical type to avoid drift.Proposed fix
+import { Milestone } from './MilestoneList'; import { renderInlineMarkdown } from './utils'; interface Quarter { id: string; label: string; status: 'completed' | 'current' | 'planned'; } -interface Milestone { - label: string; - status: 'shipped' | 'in-progress' | 'planned'; - quarter: string; - pr?: number; - changelog?: string; -} - interface Initiative {
232-254: Using array index as key.Line 239 uses
idxas the key. If milestones within a group could reorder or change, this may cause rendering issues. Usingmilestone.labelor a composite key would be more stable.Proposed fix
- {group.milestones.map((milestone, idx) => { + {group.milestones.map((milestone) => { const statusDotClass = { shipped: styles.quarterDetailStatusDotShipped, 'in-progress': styles.quarterDetailStatusDotInProgress, planned: styles.quarterDetailStatusDotPlanned, }[milestone.status]; return ( - <li key={idx} className={styles.quarterDetailMilestoneItem}> + <li key={milestone.label} className={styles.quarterDetailMilestoneItem}>
147-152:getMilestonesForQuartercalled during render.This function is called for each quarter during every render (line 152). For larger datasets, consider memoizing the milestone counts.
website/src/components/Roadmap/MilestoneList.tsx (1)
137-145: Using array index as key for milestones.Line 139 uses
indexas key. Since milestones are sorted by status, the list order is stable within a render, but usingmilestone.labelwould be more robust if the sort logic changes.Proposed fix
- <li - key={index} + <li + key={milestone.label}
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (15)
.claude/agents/roadmap.mdwebsite/docusaurus.config.jswebsite/src/components/Roadmap/Highlights.tsxwebsite/src/components/Roadmap/InitiativeCard.tsxwebsite/src/components/Roadmap/MilestoneDrawer.tsxwebsite/src/components/Roadmap/MilestoneList.tsxwebsite/src/components/Roadmap/ProgressBar.tsxwebsite/src/components/Roadmap/QuarterTimeline.tsxwebsite/src/components/Roadmap/RoadmapHero.tsxwebsite/src/components/Roadmap/Tooltip.tsxwebsite/src/components/Roadmap/index.tsxwebsite/src/components/Roadmap/styles.module.csswebsite/src/components/Roadmap/utils.tsxwebsite/src/data/roadmap.jswebsite/src/pages/roadmap.js
🧰 Additional context used
📓 Path-based instructions (1)
website/**
📄 CodeRabbit inference engine (.cursor/rules/atmos-rules.mdc)
website/**: Update website documentation in thewebsite/directory when adding new features, ensure consistency between CLI help text and website documentation, and follow the website's documentation structure and style
Keep website code in thewebsite/directory, follow the existing website architecture and style, and test website changes locally before committing
Keep CLI documentation and website documentation in sync and document new features on the website with examples and use cases
Files:
website/src/components/Roadmap/utils.tsxwebsite/src/components/Roadmap/Tooltip.tsxwebsite/src/pages/roadmap.jswebsite/src/data/roadmap.jswebsite/src/components/Roadmap/index.tsxwebsite/src/components/Roadmap/Highlights.tsxwebsite/src/components/Roadmap/styles.module.csswebsite/src/components/Roadmap/ProgressBar.tsxwebsite/src/components/Roadmap/InitiativeCard.tsxwebsite/src/components/Roadmap/MilestoneList.tsxwebsite/docusaurus.config.jswebsite/src/components/Roadmap/QuarterTimeline.tsxwebsite/src/components/Roadmap/RoadmapHero.tsxwebsite/src/components/Roadmap/MilestoneDrawer.tsx
🧠 Learnings (2)
📚 Learning: 2025-09-24T22:20:39.209Z
Learnt from: osterman
Repo: cloudposse/atmos PR: 1505
File: website/docs/cli/commands/completion.mdx:124-127
Timestamp: 2025-09-24T22:20:39.209Z
Learning: In Docusaurus (specifically the cloudposse/atmos repository), backticks render correctly as code formatting even when used inside HTML elements like <dl>/<dt>/<dd> tags in MDX files. No need to replace with <code> tags.
Applied to files:
website/src/components/Roadmap/utils.tsx
📚 Learning: 2025-11-07T14:52:55.217Z
Learnt from: osterman
Repo: cloudposse/atmos PR: 1761
File: docs/prd/claude-agent-architecture.md:331-439
Timestamp: 2025-11-07T14:52:55.217Z
Learning: In the cloudposse/atmos repository, Claude agents are used as interactive tools, not in automated/headless CI/CD contexts. Agent documentation and patterns should assume synchronous human interaction.
Applied to files:
.claude/agents/roadmap.md
🧬 Code graph analysis (4)
website/src/pages/roadmap.js (1)
website/src/components/Roadmap/index.tsx (1)
Roadmap(9-42)
website/src/components/Roadmap/InitiativeCard.tsx (5)
website/src/components/Roadmap/MilestoneList.tsx (2)
Milestone(7-23)MilestoneList(50-177)website/src/components/Roadmap/ProgressBar.tsx (1)
ProgressBar(12-43)website/src/components/Roadmap/utils.tsx (1)
renderInlineMarkdown(8-16)website/src/components/Roadmap/Tooltip.tsx (1)
Tooltip(10-97)website/src/components/Roadmap/MilestoneDrawer.tsx (1)
MilestoneDrawer(15-160)
website/src/components/Roadmap/QuarterTimeline.tsx (2)
website/src/components/Roadmap/MilestoneList.tsx (1)
Milestone(7-23)website/src/components/Roadmap/utils.tsx (1)
renderInlineMarkdown(8-16)
website/src/components/Roadmap/MilestoneDrawer.tsx (2)
website/src/components/Roadmap/MilestoneList.tsx (1)
Milestone(7-23)website/src/components/Roadmap/utils.tsx (1)
renderInlineMarkdown(8-16)
🪛 LanguageTool
.claude/agents/roadmap.md
[typographical] ~38-~38: To join two clauses or introduce examples, consider using an em dash.
Context: ...data/roadmap.js` | Primary data file - All initiatives, milestones, quarters, p...
(DASH_RULE)
[typographical] ~219-~219: To join two clauses or introduce examples, consider using an em dash.
Context: ...(React Icons Remix set): - RiLockLine - Authentication/Security - `RiFlashlightL...
(DASH_RULE)
⏰ Context from checks skipped due to timeout of 900000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Acceptance Tests (windows)
- GitHub Check: Summary
🔇 Additional comments (17)
website/src/components/Roadmap/Tooltip.tsx (1)
17-34: LGTM! Clean theme detection implementation.The MutationObserver pattern correctly watches for theme changes on the document element and properly cleans up on unmount.
website/src/components/Roadmap/MilestoneDrawer.tsx (3)
23-31: LGTM! Proper escape key handling.Clean implementation with correct cleanup and dependency tracking.
34-46: LGTM! Solid click-outside detection.Using
mousedowninstead ofclickis the right choice, and thecontainscheck properly handles nested elements.
49-58: LGTM! Proper scroll lock implementation.Correctly prevents body scroll while the drawer is open and ensures cleanup restores the original state.
website/docusaurus.config.js (1)
438-442: LGTM! Clean navbar integration.The Roadmap link follows the existing navigation pattern and correctly points to the new
/roadmappage.website/src/pages/roadmap.js (1)
1-14: LGTM! Clean page structure.Follows Docusaurus conventions perfectly. The page properly wraps the Roadmap component with Layout and provides appropriate metadata.
website/src/components/Roadmap/Highlights.tsx (1)
26-42: LGTM! Safe icon resolution with fallback.The dynamic icon lookup uses a type assertion but safely falls back to
RiStarLineif the icon isn't found. The staggered animation timing creates a nice visual effect..claude/agents/roadmap.md (1)
1-251: LGTM! Comprehensive agent documentation.This is well-structured documentation that clearly explains the roadmap data model, common tasks, and maintenance workflows. The examples and quality checklist are particularly helpful.
website/src/components/Roadmap/index.tsx (1)
1-42: Clean component composition.The structure is well organized. Using
MotionConfigwithreducedMotion="user"properly respects user accessibility preferences. Sorting with spread avoids mutating the original array, and keys use stableinitiative.id.website/src/components/Roadmap/RoadmapHero.tsx (1)
1-23: Straightforward hero implementation.Simple, semantic HTML structure with a smooth fade-in animation. No concerns here.
website/src/data/roadmap.js (1)
1-313: Solid data structure for the roadmap.The configuration is comprehensive and well-documented with clear update instructions. The milestone data is rich with docs, changelog references, and descriptions.
website/src/components/Roadmap/InitiativeCard.tsx (2)
46-49: Good defensive icon resolution.The fallback to
RiQuestionLinehandles cases where an invalid icon name is provided in the data. Solid approach.
76-104: Accessible expandable header.Proper
role="button",tabIndex,aria-expanded, and keyboard handling. Well done on the a11y front.website/src/components/Roadmap/ProgressBar.tsx (1)
1-43: Solid progress bar implementation.Proper clamping, CSS variable usage for theming, and conditional animation handling. The component is clean and reusable.
website/src/components/Roadmap/QuarterTimeline.tsx (1)
128-265: Well-structured timeline component.Good accessibility with
aria-labelandaria-expanded. The scroll handling and detail panel animations are smooth. Overall solid work.website/src/components/Roadmap/MilestoneList.tsx (2)
7-23: Well-documented interface.The JSDoc comments on optional fields make the data contract clear. This is the canonical
Milestonetype that other components should import.
137-172: Good accessible list implementation.Conditional
role="button"andtabIndexbased on clickability, proper keyboard handling, andstopPropagationon nested links. The accessibility story is solid.
- Fix type mismatch: use undefined instead of null for selectedMilestone - Make changelogSlugs optional in Initiative interface - Replace fragile status className construction with explicit mapping - Reduce tooltip z-index from 9999 to 1002 (just above drawer) - Add scroll/resize listeners for tooltip position updates - Improve keyboard accessibility with tabIndex, aria-describedby, role="tooltip" 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Focus on custom column views rather than output formats. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Tab completion is more about developer experience than discoverability. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
… list columns' Clarifies that this is an improvement to existing list commands (added Q1 2025), not a new feature. The Q4 2025 milestone added customizable column support. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Rename 'Migration & Code Generation' to 'Feature Parity with Terragrunt' - Rename 'Quality & Community' to 'Code Quality and Community' - Change 'Learning section' to 'New learning section' - Add Native Terraform to migration guides list - Add Roadmap milestone to Documentation initiative 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Changed /design-patterns/design-patterns to /design-patterns 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Adds a prominent link to GitHub feature request issue template for users who want to suggest new features for the roadmap. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Adds a link to browse existing feature requests and issues alongside the 'Request a Feature' link. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Changes to Feature Parity with Terragrunt: - Keep: File-scoped locals - Rename: Stack name field → Imperative stack names - Rename: Generate section inheritance → File generation (generate blocks) - Rename: Backend provisioning → Automatic backend provisioning - Add: AWS context YAML functions (!aws.account-id, !aws.region, etc.) - Remove: Metadata inheritance (merged into other features) Moved to Extensibility & Custom Components: - !literal YAML function - metadata.name for component workspace keys 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
website/blog/2025-12-23-product-roadmap.mdx (2)
12-12: Use typographic (curly) quotes instead of straight quotes.Line 12 uses straight double quotes around "What's the long-term vision?" and "The roadmap answers that question openly". Swap these for typographic curly quotes for better typography.
🔎 Proposed fix
-We're sharing the [Atmos Product Roadmap](/roadmap)—a transparent view of where we've been, where we're headed, and what's coming next. Infrastructure teams evaluating Atmos often ask *"What's the long-term vision?"* The roadmap answers that question openly. +We're sharing the [Atmos Product Roadmap](/roadmap)—a transparent view of where we've been, where we're headed, and what's coming next. Infrastructure teams evaluating Atmos often ask *"What's the long-term vision?"* The roadmap answers that question openly.
30-31: Consider em dashes for better typography.Lines 30–31 use hyphens to join clauses. Replace with em dashes for clearer separation.
🔎 Proposed fix
-- [View the Roadmap](/roadmap) - Browse everything we've shipped and what's planned -- [GitHub Issues](https://github.com/cloudposse/atmos/issues) - Vote on features or request new ones +- [View the Roadmap](/roadmap) — Browse everything we've shipped and what's planned +- [GitHub Issues](https://github.com/cloudposse/atmos/issues) — Vote on features or request new oneswebsite/src/components/Roadmap/InitiativeCard.tsx (1)
56-59: Icon resolution with fallback is solid.The dynamic icon lookup with fallback to
RiQuestionLinehandles missing icons gracefully. Optionally, you could add a dev-mode console warning when the fallback is used, but this is working well as-is.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (6)
website/blog/2025-12-23-product-roadmap.mdxwebsite/src/components/Roadmap/FeaturedDrawer.tsxwebsite/src/components/Roadmap/FeaturedSection.tsxwebsite/src/components/Roadmap/InitiativeCard.tsxwebsite/src/components/Roadmap/RoadmapStats.tsxwebsite/src/data/roadmap.js
🚧 Files skipped from review as they are similar to previous changes (2)
- website/src/components/Roadmap/RoadmapStats.tsx
- website/src/data/roadmap.js
🧰 Additional context used
📓 Path-based instructions (2)
website/**
📄 CodeRabbit inference engine (.cursor/rules/atmos-rules.mdc)
website/**: Update website documentation in thewebsite/directory when adding new features, ensure consistency between CLI help text and website documentation, and follow the website's documentation structure and style
Keep website code in thewebsite/directory, follow the existing website architecture and style, and test website changes locally before committing
Keep CLI documentation and website documentation in sync and document new features on the website with examples and use cases
Files:
website/src/components/Roadmap/FeaturedSection.tsxwebsite/src/components/Roadmap/InitiativeCard.tsxwebsite/src/components/Roadmap/FeaturedDrawer.tsxwebsite/blog/2025-12-23-product-roadmap.mdx
website/blog/**/*.mdx
📄 CodeRabbit inference engine (CLAUDE.md)
website/blog/**/*.mdx: Follow PR template (what/why/references); PRs labeled minor/major MUST include blog post at website/blog/YYYY-MM-DD-feature-name.mdx with YAML front matter, after intro, and only tags from website/blog/tags.yml
Blog posts MUST use only tags defined in website/blog/tags.yml and authors defined in website/blog/authors.yml; valid tags are: feature, enhancement, bugfix, dx, breaking-change, security, documentation, deprecation, core; never invent new tags
Files:
website/blog/2025-12-23-product-roadmap.mdx
🧠 Learnings (3)
📓 Common learnings
Learnt from: osterman
Repo: cloudposse/atmos PR: 1686
File: docs/prd/tool-dependencies-integration.md:58-64
Timestamp: 2025-12-13T06:07:37.766Z
Learning: cloudposse/atmos: For PRD docs (docs/prd/*.md), markdownlint issues like MD040/MD010/MD034 can be handled in a separate documentation cleanup commit and should not block the current PR.
📚 Learning: 2025-12-13T06:07:37.766Z
Learnt from: osterman
Repo: cloudposse/atmos PR: 1686
File: docs/prd/tool-dependencies-integration.md:58-64
Timestamp: 2025-12-13T06:07:37.766Z
Learning: cloudposse/atmos: For PRD docs (docs/prd/*.md), markdownlint issues like MD040/MD010/MD034 can be handled in a separate documentation cleanup commit and should not block the current PR.
Applied to files:
website/src/components/Roadmap/FeaturedSection.tsxwebsite/src/components/Roadmap/InitiativeCard.tsxwebsite/src/components/Roadmap/FeaturedDrawer.tsx
📚 Learning: 2025-12-16T18:20:55.630Z
Learnt from: CR
Repo: cloudposse/atmos PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-16T18:20:55.630Z
Learning: Applies to website/blog/**/*.mdx : Follow PR template (what/why/references); PRs labeled minor/major MUST include blog post at website/blog/YYYY-MM-DD-feature-name.mdx with YAML front matter, <!--truncate--> after intro, and only tags from website/blog/tags.yml
Applied to files:
website/src/components/Roadmap/FeaturedSection.tsxwebsite/blog/2025-12-23-product-roadmap.mdx
🧬 Code graph analysis (1)
website/src/components/Roadmap/FeaturedSection.tsx (1)
website/src/components/Roadmap/FeaturedDrawer.tsx (2)
FeaturedItem(8-21)FeaturedDrawer(35-203)
🪛 LanguageTool
website/blog/2025-12-23-product-roadmap.mdx
[typographical] ~12-~12: Consider using a typographic close quote here.
Context: ...cture teams evaluating Atmos often ask "What's the long-term vision?" The roadm...
(EN_QUOTES)
[typographical] ~12-~12: Consider using a typographic close quote here.
Context: ...often ask "What's the long-term vision?" The roadmap answers that question open...
(EN_QUOTES)
[typographical] ~30-~30: To join two clauses or introduce examples, consider using an em dash.
Context: ...arn More - View the Roadmap - Browse everything we've shipped and what...
(DASH_RULE)
[typographical] ~31-~31: To join two clauses or introduce examples, consider using an em dash.
Context: ...ps://github.com/cloudposse/atmos/issues) - Vote on features or request new ones
(DASH_RULE)
⏰ Context from checks skipped due to timeout of 900000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Acceptance Tests (windows)
- GitHub Check: Summary
🔇 Additional comments (18)
website/blog/2025-12-23-product-roadmap.mdx (2)
14-31: Well-structured blog post that follows guidelines.The post has correct front matter, proper tag selection (feature, documentation), truncate placement, and clear structure that answers what/why/references. Content is actionable and aligns with the roadmap feature rollout.
1-10: Author and tags are valid.
ostermanis registered inwebsite/blog/authors.yml, and bothfeatureanddocumentationtags are defined inwebsite/blog/tags.yml. The front matter is correctly configured.website/src/components/Roadmap/InitiativeCard.tsx (7)
1-11: Imports look solid.All necessary dependencies are imported cleanly. The dual import pattern for react-icons (named icons plus wildcard for dynamic resolution) is appropriate for the icon fallback mechanism used later.
13-17: Clean interface definition.The exported
PRReferenceinterface is well-documented and provides clear typing for PR tooltip data.
19-38: Interfaces are well-defined.Both
InitiativeandInitiativeCardPropsare properly typed with sensible defaults and clear documentation.
40-54: State management looks good.The component state is properly initialized, and the type mismatch from the previous review (null vs undefined) has been addressed. The
expandAllMilestoneseffect appropriately expands the card in response to the prop.
61-75: Event handlers are well-implemented.Keyboard accessibility with Enter and Space keys is properly handled, and
preventDefault()correctly prevents unwanted default behavior.
77-184: Rendering logic is complete and accessible.The component properly implements:
- Smooth animations with Framer Motion
- Full keyboard accessibility with ARIA attributes
- Secure external links with
target="_blank"andrel="noopener noreferrer"(as addressed from previous reviews)All previous concerns about missing security attributes on GitHub links have been resolved.
187-191: Drawer integration is correct.The
MilestoneDrawerreceives properly typed props, and the type consistency issue from the previous review has been addressed.website/src/components/Roadmap/FeaturedSection.tsx (4)
13-32: LGTM! Clean status and sorting configuration.The status config and sorting logic are well-structured. The
parseQuarterfunction correctly converts quarter strings to sortable numbers for chronological ordering.
34-43: LGTM! Proper state management and sorting.State hooks and sorting logic are correctly implemented. Items are sorted by status priority first, then chronologically by quarter.
45-59: LGTM! Excellent keyboard accessibility.Event handlers are well-implemented with proper keyboard support (Enter and Space keys) and
preventDefaultto avoid unintended scrolling.
61-163: LGTM! Comprehensive rendering with proper security and accessibility.The rendering logic is well-structured:
- Animations are smooth with staggered delays
- Keyboard navigation is fully accessible with
role="button"andtabIndex={0}stopPropagationon footer links prevents unintended card clicks- External GitHub links (PRD and PR) correctly include
target="_blank"andrel="noopener noreferrer"website/src/components/Roadmap/FeaturedDrawer.tsx (5)
42-78: LGTM! Excellent effect management.All three effects are properly implemented:
- Escape key handling with cleanup
- Click-outside detection using ref
- Body scroll lock/unlock with restoration in cleanup
Dependencies are correct and cleanup functions prevent memory leaks.
80-83: LGTM! Safe icon resolution with fallback.Dynamic icon resolution is well-implemented with a sensible fallback to
RiQuestionLinewhen the icon is not found or item is undefined.
85-122: LGTM! Smooth drawer animations and structure.The drawer implementation is solid:
- AnimatePresence handles exit animations properly
- Backdrop and drawer use appropriate motion transitions
- Close button includes
aria-labelfor accessibility- Conditional rendering prevents rendering null items
124-202: LGTM! Complete drawer content with proper link handling.The drawer content is comprehensive and well-structured:
- Optional sections (description, benefits) conditionally rendered
- Internal links (changelog, docs) use relative paths appropriately
- External GitHub links (PRD, PR) include
target="_blank"andrel="noopener noreferrer"for security- Metadata rendering uses defensive fallback for unknown statuses
- Quarter and status formatting is clean
29-33: The CSS class namedrawerMetaStatusInprogress(lowercase 'i') in the mapping matches the actual class definition instyles.module.cssat line 1814. No inconsistency here—the naming is intentional and consistent across both FeaturedDrawer.tsx and MilestoneDrawer.tsx.Likely an incorrect or invalid review comment.
Update doc links to use correct paths: - /cli/configuration/configuration → /cli/configuration - /cli/commands/commands → /cli/commands 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
@coderabbitai full review please |
|
@aknysh I'll conduct a full review of all the changes in this PR. 🧠 Learnings used✅ Actions performedFull review triggered. |
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
website/src/data/roadmap.js (1)
109-146: Type mismatch previously identified.The
Initiativeinterface expectschangelogSlugs: string[]but initiatives don't provide this field. Either add empty arrays or make the interface field optional.
🧹 Nitpick comments (1)
website/src/components/Roadmap/MilestoneDrawer.tsx (1)
89-92: Consider using role="dialog" instead of role="tooltip".The drawer behaves like a modal dialog rather than a tooltip. While not critical,
role="dialog"witharia-modal="true"would better communicate the interaction pattern to screen readers.🔎 Optional ARIA refinement
<motion.div ref={drawerRef} className={styles.drawer} + role="dialog" + aria-modal="true" - role="tooltip" initial={{ x: '100%' }} animate={{ x: 0 }} exit={{ x: '100%' }} transition={{ type: 'spring', damping: 25, stiffness: 300 }} >
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (21)
.claude/agents/roadmap.md.github/workflows/changelog-check.ymlCLAUDE.mdwebsite/blog/2025-12-23-product-roadmap.mdxwebsite/docusaurus.config.jswebsite/src/components/Roadmap/FeaturedDrawer.tsxwebsite/src/components/Roadmap/FeaturedSection.tsxwebsite/src/components/Roadmap/Highlights.tsxwebsite/src/components/Roadmap/InitiativeCard.tsxwebsite/src/components/Roadmap/MilestoneDrawer.tsxwebsite/src/components/Roadmap/MilestoneList.tsxwebsite/src/components/Roadmap/ProgressBar.tsxwebsite/src/components/Roadmap/QuarterTimeline.tsxwebsite/src/components/Roadmap/RoadmapHero.tsxwebsite/src/components/Roadmap/RoadmapStats.tsxwebsite/src/components/Roadmap/Tooltip.tsxwebsite/src/components/Roadmap/index.tsxwebsite/src/components/Roadmap/styles.module.csswebsite/src/components/Roadmap/utils.tsxwebsite/src/data/roadmap.jswebsite/src/pages/roadmap.js
🧰 Additional context used
📓 Path-based instructions (3)
website/**
📄 CodeRabbit inference engine (.cursor/rules/atmos-rules.mdc)
website/**: Update website documentation in thewebsite/directory when adding new features, ensure consistency between CLI help text and website documentation, and follow the website's documentation structure and style
Keep website code in thewebsite/directory, follow the existing website architecture and style, and test website changes locally before committing
Keep CLI documentation and website documentation in sync and document new features on the website with examples and use cases
Files:
website/src/pages/roadmap.jswebsite/docusaurus.config.jswebsite/src/components/Roadmap/Highlights.tsxwebsite/src/data/roadmap.jswebsite/src/components/Roadmap/utils.tsxwebsite/src/components/Roadmap/MilestoneDrawer.tsxwebsite/blog/2025-12-23-product-roadmap.mdxwebsite/src/components/Roadmap/QuarterTimeline.tsxwebsite/src/components/Roadmap/InitiativeCard.tsxwebsite/src/components/Roadmap/index.tsxwebsite/src/components/Roadmap/ProgressBar.tsxwebsite/src/components/Roadmap/Tooltip.tsxwebsite/src/components/Roadmap/RoadmapStats.tsxwebsite/src/components/Roadmap/MilestoneList.tsxwebsite/src/components/Roadmap/styles.module.csswebsite/src/components/Roadmap/FeaturedDrawer.tsxwebsite/src/components/Roadmap/FeaturedSection.tsxwebsite/src/components/Roadmap/RoadmapHero.tsx
website/blog/**/*.mdx
📄 CodeRabbit inference engine (CLAUDE.md)
website/blog/**/*.mdx: Follow PR template (what/why/references); PRs labeled minor/major MUST include blog post at website/blog/YYYY-MM-DD-feature-name.mdx with YAML front matter, after intro, and only tags from website/blog/tags.yml
Blog posts MUST use only tags defined in website/blog/tags.yml and authors defined in website/blog/authors.yml; valid tags are: feature, enhancement, bugfix, dx, breaking-change, security, documentation, deprecation, core; never invent new tags
Files:
website/blog/2025-12-23-product-roadmap.mdx
.github/workflows/*.{yml,yaml}
📄 CodeRabbit inference engine (.cursor/rules/atmos-rules.mdc)
Configure CI to run unit tests, integration tests, golangci-lint, and coverage reporting on all pull requests
Files:
.github/workflows/changelog-check.yml
🧠 Learnings (10)
📓 Common learnings
Learnt from: osterman
Repo: cloudposse/atmos PR: 1686
File: docs/prd/tool-dependencies-integration.md:58-64
Timestamp: 2025-12-13T06:07:37.766Z
Learning: cloudposse/atmos: For PRD docs (docs/prd/*.md), markdownlint issues like MD040/MD010/MD034 can be handled in a separate documentation cleanup commit and should not block the current PR.
Learnt from: Listener430
Repo: cloudposse/atmos PR: 934
File: tests/fixtures/scenarios/docs-generate/README.md.gotmpl:99-118
Timestamp: 2025-01-25T03:51:57.689Z
Learning: For the cloudposse/atmos repository, changes to template contents should be handled in dedicated PRs and are typically considered out of scope for PRs focused on other objectives.
📚 Learning: 2025-01-19T15:49:15.593Z
Learnt from: samtholiya
Repo: cloudposse/atmos PR: 955
File: tests/snapshots/TestCLICommands_atmos_validate_editorconfig_--help.stdout.golden:0-0
Timestamp: 2025-01-19T15:49:15.593Z
Learning: In future commits, the help text for Atmos CLI commands should be limited to only show component and stack parameters for commands that actually use them. This applies to the example usage section in command help text.
Applied to files:
website/src/data/roadmap.js
📚 Learning: 2025-09-24T22:20:39.209Z
Learnt from: osterman
Repo: cloudposse/atmos PR: 1505
File: website/docs/cli/commands/completion.mdx:124-127
Timestamp: 2025-09-24T22:20:39.209Z
Learning: In Docusaurus (specifically the cloudposse/atmos repository), backticks render correctly as code formatting even when used inside HTML elements like <dl>/<dt>/<dd> tags in MDX files. No need to replace with <code> tags.
Applied to files:
website/src/components/Roadmap/utils.tsx
📚 Learning: 2025-12-16T18:20:55.630Z
Learnt from: CR
Repo: cloudposse/atmos PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-16T18:20:55.630Z
Learning: Applies to website/blog/**/*.mdx : Follow PR template (what/why/references); PRs labeled minor/major MUST include blog post at website/blog/YYYY-MM-DD-feature-name.mdx with YAML front matter, <!--truncate--> after intro, and only tags from website/blog/tags.yml
Applied to files:
website/blog/2025-12-23-product-roadmap.mdx.github/workflows/changelog-check.ymlwebsite/src/components/Roadmap/FeaturedSection.tsxCLAUDE.md
📚 Learning: 2025-12-13T06:07:37.766Z
Learnt from: osterman
Repo: cloudposse/atmos PR: 1686
File: docs/prd/tool-dependencies-integration.md:58-64
Timestamp: 2025-12-13T06:07:37.766Z
Learning: cloudposse/atmos: For PRD docs (docs/prd/*.md), markdownlint issues like MD040/MD010/MD034 can be handled in a separate documentation cleanup commit and should not block the current PR.
Applied to files:
website/src/components/Roadmap/InitiativeCard.tsx.github/workflows/changelog-check.ymlwebsite/src/components/Roadmap/FeaturedDrawer.tsxwebsite/src/components/Roadmap/FeaturedSection.tsxCLAUDE.md
📚 Learning: 2025-11-07T14:52:55.217Z
Learnt from: osterman
Repo: cloudposse/atmos PR: 1761
File: docs/prd/claude-agent-architecture.md:331-439
Timestamp: 2025-11-07T14:52:55.217Z
Learning: In the cloudposse/atmos repository, Claude agents are used as interactive tools, not in automated/headless CI/CD contexts. Agent documentation and patterns should assume synchronous human interaction.
Applied to files:
.claude/agents/roadmap.md
📚 Learning: 2025-11-24T17:35:37.209Z
Learnt from: CR
Repo: cloudposse/atmos PR: 0
File: .cursor/rules/atmos-rules.mdc:0-0
Timestamp: 2025-11-24T17:35:37.209Z
Learning: Applies to CHANGELOG.md : Follow semantic versioning, update CHANGELOG.md with each release, and create GitHub releases with detailed release notes
Applied to files:
.github/workflows/changelog-check.ymlCLAUDE.md
📚 Learning: 2025-11-24T17:35:37.209Z
Learnt from: CR
Repo: cloudposse/atmos PR: 0
File: .cursor/rules/atmos-rules.mdc:0-0
Timestamp: 2025-11-24T17:35:37.209Z
Learning: Ensure all tests pass, verify code coverage meets targets, run golangci-lint and fix any issues, and update documentation before submitting pull requests
Applied to files:
.github/workflows/changelog-check.yml
📚 Learning: 2025-12-16T18:20:55.630Z
Learnt from: CR
Repo: cloudposse/atmos PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-16T18:20:55.630Z
Learning: Applies to website/blog/**/*.mdx : Blog posts MUST use only tags defined in website/blog/tags.yml and authors defined in website/blog/authors.yml; valid tags are: feature, enhancement, bugfix, dx, breaking-change, security, documentation, deprecation, core; never invent new tags
Applied to files:
CLAUDE.md
📚 Learning: 2025-11-24T17:35:37.209Z
Learnt from: CR
Repo: cloudposse/atmos PR: 0
File: .cursor/rules/atmos-rules.mdc:0-0
Timestamp: 2025-11-24T17:35:37.209Z
Learning: Applies to website/** : Update website documentation in the `website/` directory when adding new features, ensure consistency between CLI help text and website documentation, and follow the website's documentation structure and style
Applied to files:
CLAUDE.md
🧬 Code graph analysis (6)
website/src/pages/roadmap.js (1)
website/src/components/Roadmap/index.tsx (1)
Roadmap(21-91)
website/src/components/Roadmap/QuarterTimeline.tsx (2)
website/src/components/Roadmap/MilestoneList.tsx (1)
Milestone(7-29)website/src/components/Roadmap/utils.tsx (1)
renderInlineMarkdown(8-16)
website/src/components/Roadmap/index.tsx (6)
website/src/data/roadmap.js (2)
roadmapConfig(14-412)roadmapConfig(14-412)website/src/components/Roadmap/RoadmapHero.tsx (1)
RoadmapHero(9-23)website/src/components/Roadmap/QuarterTimeline.tsx (1)
QuarterTimeline(49-266)website/src/components/Roadmap/FeaturedSection.tsx (1)
FeaturedSection(34-163)website/src/components/Roadmap/RoadmapStats.tsx (1)
RoadmapStats(49-99)website/src/components/Roadmap/InitiativeCard.tsx (1)
InitiativeCard(40-194)
website/src/components/Roadmap/RoadmapStats.tsx (1)
website/src/components/Roadmap/MilestoneList.tsx (1)
Milestone(7-29)
website/src/components/Roadmap/MilestoneList.tsx (1)
website/src/components/Roadmap/utils.tsx (1)
renderInlineMarkdown(8-16)
website/src/components/Roadmap/FeaturedSection.tsx (1)
website/src/components/Roadmap/FeaturedDrawer.tsx (2)
FeaturedItem(8-21)FeaturedDrawer(35-203)
🪛 LanguageTool
website/blog/2025-12-23-product-roadmap.mdx
[typographical] ~12-~12: Consider using a typographic close quote here.
Context: ...cture teams evaluating Atmos often ask "What's the long-term vision?" The roadm...
(EN_QUOTES)
[typographical] ~12-~12: Consider using a typographic close quote here.
Context: ...often ask "What's the long-term vision?" The roadmap answers that question open...
(EN_QUOTES)
[typographical] ~30-~30: To join two clauses or introduce examples, consider using an em dash.
Context: ...arn More - View the Roadmap - Browse everything we've shipped and what...
(DASH_RULE)
[typographical] ~31-~31: To join two clauses or introduce examples, consider using an em dash.
Context: ...ps://github.com/cloudposse/atmos/issues) - Vote on features or request new ones
(DASH_RULE)
.claude/agents/roadmap.md
[typographical] ~38-~38: To join two clauses or introduce examples, consider using an em dash.
Context: ...data/roadmap.js` | Primary data file - All initiatives, milestones, quarters, p...
(DASH_RULE)
[typographical] ~219-~219: To join two clauses or introduce examples, consider using an em dash.
Context: ...(React Icons Remix set): - RiLockLine - Authentication/Security - `RiFlashlightL...
(DASH_RULE)
⏰ Context from checks skipped due to timeout of 900000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Acceptance Tests (windows)
- GitHub Check: Summary
🔇 Additional comments (23)
CLAUDE.md (1)
276-283: LGTM!Clear documentation of the new CI-enforced roadmap update requirements. The structure mirrors the existing blog post documentation block, maintaining consistency.
.github/workflows/changelog-check.yml (3)
65-82: LGTM!The roadmap check step mirrors the blog check pattern correctly. Uses git diff for reliable detection without API limitations.
84-133: Well-structured conditional commenting.The dynamic checklist approach (showing ✅ for completed items) gives clear feedback. The fallback from PATCH to comment creation handles edge cases nicely.
195-204: LGTM!The success condition correctly handles both cases: no docs required OR all docs present.
website/docusaurus.config.js (1)
438-442: LGTM!Navbar item follows existing patterns. Route
/roadmapmatches the new page component.website/src/pages/roadmap.js (1)
1-14: LGTM!Clean page component. Follows Docusaurus conventions with proper Layout wrapper and SEO metadata.
website/src/components/Roadmap/utils.tsx (1)
8-16: LGTM!Clean implementation for inline markdown code spans. The regex correctly captures backtick-delimited segments, and using index as key is fine for this static content.
.claude/agents/roadmap.md (1)
1-254: LGTM!Comprehensive agent documentation. The data structures, workflow examples, and quality checks align well with the actual
roadmap.jsimplementation. Good reference material for maintainers.website/src/data/roadmap.js (1)
1-16: LGTM!Well-documented data file with comprehensive roadmap information. The header comments provide clear update instructions.
website/blog/2025-12-23-product-roadmap.mdx (1)
1-14: Post is good to merge.Author
ostermanis properly defined in authors.yml, and both tags (feature,documentation) are valid per tags.yml. Frontmatter structure, truncate placement, and format all check out.website/src/components/Roadmap/RoadmapHero.tsx (1)
1-23: LGTM!Clean hero component with appropriate fade-in animation. The implementation is straightforward and correct.
website/src/components/Roadmap/Highlights.tsx (1)
1-56: LGTM!The highlights grid implementation is solid. Icon resolution with fallback and staggered animations are well-implemented.
website/src/components/Roadmap/Tooltip.tsx (1)
1-116: LGTM!The tooltip implementation addresses previous feedback well—scroll/resize handling and keyboard accessibility are properly implemented. Theme detection and positioning logic are solid.
website/src/components/Roadmap/index.tsx (1)
1-91: LGTM!The main Roadmap composition is well-structured. Priority sorting with fallback to progress is logical, and the
reducedMotion="user"config respects accessibility preferences.website/src/components/Roadmap/RoadmapStats.tsx (1)
1-99: LGTM!The stats computation and progress bar rendering correctly guard against division by zero. The breakdown display with animated bars is well-implemented.
website/src/components/Roadmap/MilestoneDrawer.tsx (1)
15-19: Past fragile className construction is now resolved.The explicit
statusClassMapwith fallback is much clearer than the previous string manipulation approach. Good refactor.Also applies to: 158-158
website/src/components/Roadmap/FeaturedSection.tsx (1)
1-163: LGTM!Featured section is well-implemented with proper keyboard navigation, external link handling (target="_blank" + rel), and accessible card interactions. The drawer integration and sorting logic are solid.
website/src/components/Roadmap/QuarterTimeline.tsx (1)
1-266: LGTM!The quarter timeline is well-architected with proper scroll management, accessibility (ARIA attributes on interactive elements), and smooth animations. The milestone grouping and sorting logic is clear and correct.
website/src/components/Roadmap/ProgressBar.tsx (1)
1-43: LGTM! Clean progress bar implementation.The component is well-structured with proper clamping, smooth animations, and dynamic theming. The conditional animation logic and CSS variable-based coloring are solid choices.
website/src/components/Roadmap/FeaturedDrawer.tsx (1)
1-203: LGTM! Solid drawer implementation.The component handles keyboard events, outside clicks, and scroll locking correctly. Icon resolution with fallback and external link security attributes are all in place. Nice work on the animations and accessibility.
website/src/components/Roadmap/InitiativeCard.tsx (1)
1-194: LGTM! Well-architected initiative card.The component properly handles expansion state, keyboard navigation, and external link security. The integration with MilestoneList and MilestoneDrawer is clean, and the expandAllMilestones propagation works as expected. Good use of event propagation control and accessibility attributes.
website/src/components/Roadmap/styles.module.css (1)
1-1893: LGTM! Comprehensive and well-organized stylesheet.The CSS module provides thorough theme support, proper z-index layering (tooltip at 1002, drawer at 1001), responsive breakpoints, and accessibility features including reduced motion support. The styling is consistent across all roadmap components.
website/src/components/Roadmap/MilestoneList.tsx (1)
1-313: LGTM! Excellent milestone list implementation.The component provides flexible rendering with flat and grouped views, smart sorting by status and priority, and proper handling of rich content interactions. External links include security attributes, keyboard navigation is well-implemented, and the collapsible group logic with expandAll override works cleanly. The integration with renderInlineMarkdown for backtick-style code formatting is a nice touch.
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (2)
website/src/components/Roadmap/MilestoneDrawer.tsx (1)
15-19: Previous concern addressed.The explicit
statusClassMapresolves the fragile string manipulation issue from the prior review. Clear and maintainable.website/src/data/roadmap.js (1)
109-146: Verify type requirements with InitiativeCard interface.A past review noted that the
Initiativeinterface expects achangelogSlugs: string[]field, but no initiatives in this file provide it. If this field is still required by the consuming components, either addchangelogSlugs: []to each initiative or remove/mark the field as optional in the interface.Run the following to check the current interface definition:
#!/bin/bash # Check if changelogSlugs is still required in the Initiative interface rg -n -A5 -B5 'interface.*Initiative' website/src/components/Roadmap/
🧹 Nitpick comments (2)
website/src/components/Roadmap/MilestoneDrawer.tsx (1)
81-103: Consider adding focus management for full accessibility.The ARIA attributes are solid. For a complete accessible modal experience, consider:
- Moving focus to the close button (or first focusable element) when the drawer opens.
- Trapping focus within the drawer while open.
- Returning focus to the triggering element on close.
🔎 Example focus management addition
+ const previousActiveElement = useRef<HTMLElement | null>(null); + // Close on escape key. useEffect(() => { + if (isOpen) { + previousActiveElement.current = document.activeElement as HTMLElement; + // Focus the close button or drawer + drawerRef.current?.focus(); + } const handleKeyDown = (e: KeyboardEvent) => { if (e.key === 'Escape' && isOpen) { onClose(); } }; document.addEventListener('keydown', handleKeyDown); - return () => document.removeEventListener('keydown', handleKeyDown); + return () => { + document.removeEventListener('keydown', handleKeyDown); + if (!isOpen && previousActiveElement.current) { + previousActiveElement.current.focus(); + } + }; }, [isOpen, onClose]);And add
tabIndex={-1}to the drawer div to make it focusable.website/src/data/roadmap.js (1)
339-360: Consider adjusting progress percentage.The
qualityinitiative showsprogress: 85with 6 shipped and 2 in-progress milestones (6/8 = 75%). The 85% seems slightly optimistic, though it may account for partial completion of in-progress work. Consider whether 80% better reflects current state.🔎 Optional adjustment
- progress: 85, + progress: 80,
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
website/src/components/Roadmap/MilestoneDrawer.tsxwebsite/src/data/roadmap.js
🧰 Additional context used
📓 Path-based instructions (1)
website/**
📄 CodeRabbit inference engine (.cursor/rules/atmos-rules.mdc)
website/**: Update website documentation in thewebsite/directory when adding new features, ensure consistency between CLI help text and website documentation, and follow the website's documentation structure and style
Keep website code in thewebsite/directory, follow the existing website architecture and style, and test website changes locally before committing
Keep CLI documentation and website documentation in sync and document new features on the website with examples and use cases
Files:
website/src/components/Roadmap/MilestoneDrawer.tsxwebsite/src/data/roadmap.js
🧠 Learnings (2)
📓 Common learnings
Learnt from: osterman
Repo: cloudposse/atmos PR: 1686
File: docs/prd/tool-dependencies-integration.md:58-64
Timestamp: 2025-12-13T06:07:37.766Z
Learning: cloudposse/atmos: For PRD docs (docs/prd/*.md), markdownlint issues like MD040/MD010/MD034 can be handled in a separate documentation cleanup commit and should not block the current PR.
Learnt from: Listener430
Repo: cloudposse/atmos PR: 934
File: tests/fixtures/scenarios/docs-generate/README.md.gotmpl:99-118
Timestamp: 2025-01-25T03:51:57.689Z
Learning: For the cloudposse/atmos repository, changes to template contents should be handled in dedicated PRs and are typically considered out of scope for PRs focused on other objectives.
📚 Learning: 2025-01-19T15:49:15.593Z
Learnt from: samtholiya
Repo: cloudposse/atmos PR: 955
File: tests/snapshots/TestCLICommands_atmos_validate_editorconfig_--help.stdout.golden:0-0
Timestamp: 2025-01-19T15:49:15.593Z
Learning: In future commits, the help text for Atmos CLI commands should be limited to only show component and stack parameters for commands that actually use them. This applies to the example usage section in command help text.
Applied to files:
website/src/data/roadmap.js
🧬 Code graph analysis (1)
website/src/components/Roadmap/MilestoneDrawer.tsx (2)
website/src/components/Roadmap/MilestoneList.tsx (1)
Milestone(7-29)website/src/components/Roadmap/utils.tsx (1)
renderInlineMarkdown(8-16)
⏰ Context from checks skipped due to timeout of 900000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Acceptance Tests (windows)
- GitHub Check: Summary
🔇 Additional comments (7)
website/src/components/Roadmap/MilestoneDrawer.tsx (4)
29-64: Effects are well-structured.Proper cleanup in all three effects. Dependencies are correct. The body scroll lock correctly resets on cleanup.
119-133: Screenshot and code sections look good.Lazy loading on the image is a nice touch. The code example uses a simple
<code>element which works for short snippets.
135-154: Internal links correctly use Docusaurus Link.Good use of the
Linkcomponent for internal navigation to changelog and docs pages.
156-169: Status mapping and quarter formatting are solid.The
statusClassMapwith fallback and the ternary for display text both align with theMilestonetype's status union ('shipped' | 'in-progress' | 'planned').website/src/data/roadmap.js (3)
1-31: Structure looks solid.The file header provides clear maintainer guidance, and the quarter timeline accurately reflects Q4 2025 as current. Vision and theme are well-articulated.
33-107: Featured section is well-structured.All featured initiatives have comprehensive metadata with proper links to docs, changelogs, PRDs, or PRs. Status values and quarters are consistent.
386-412: Highlights effectively communicate project progress.The highlights section provides clear, quantifiable metrics showing the project's evolution. Test coverage improvement from <20% to 74% is particularly impressive.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
website/src/components/Roadmap/MilestoneDrawer.tsx (2)
15-19: statusClassMap improves maintainability.The explicit mapping addresses the previous review's concern about fragile string manipulation. This is clearer and easier to maintain than dynamic className construction.
One minor note: the values are still string keys that must match CSS module class names exactly. If the CSS changes, this will break silently. Consider using direct style references if possible:
const statusClassMap: Record<string, string> = { shipped: styles.drawerMetaStatusShipped, 'in-progress': styles.drawerMetaStatusInprogress, planned: styles.drawerMetaStatusPlanned, };Then use it as:
statusClassMap[milestone.status]without needingstyles[...]wrapper.
172-185: Status badge rendering is functional.The meta section correctly displays the quarter and status. The statusClassMap lookup with fallback prevents undefined class names.
The nested ternary for status labels (lines 179-183) is readable, but a mapping object would be more maintainable:
const statusLabels = { 'shipped': 'Shipped', 'in-progress': 'In Progress', 'planned': 'Planned', }; // Then use: {statusLabels[milestone.status] || 'Planned'}
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
website/src/components/Roadmap/MilestoneDrawer.tsxwebsite/src/data/roadmap.js
🧰 Additional context used
📓 Path-based instructions (1)
website/**
📄 CodeRabbit inference engine (.cursor/rules/atmos-rules.mdc)
website/**: Update website documentation in thewebsite/directory when adding new features, ensure consistency between CLI help text and website documentation, and follow the website's documentation structure and style
Keep website code in thewebsite/directory, follow the existing website architecture and style, and test website changes locally before committing
Keep CLI documentation and website documentation in sync and document new features on the website with examples and use cases
Files:
website/src/data/roadmap.jswebsite/src/components/Roadmap/MilestoneDrawer.tsx
🧠 Learnings (3)
📓 Common learnings
Learnt from: osterman
Repo: cloudposse/atmos PR: 1686
File: docs/prd/tool-dependencies-integration.md:58-64
Timestamp: 2025-12-13T06:07:37.766Z
Learning: cloudposse/atmos: For PRD docs (docs/prd/*.md), markdownlint issues like MD040/MD010/MD034 can be handled in a separate documentation cleanup commit and should not block the current PR.
📚 Learning: 2025-12-13T06:07:37.766Z
Learnt from: osterman
Repo: cloudposse/atmos PR: 1686
File: docs/prd/tool-dependencies-integration.md:58-64
Timestamp: 2025-12-13T06:07:37.766Z
Learning: cloudposse/atmos: For PRD docs (docs/prd/*.md), markdownlint issues like MD040/MD010/MD034 can be handled in a separate documentation cleanup commit and should not block the current PR.
Applied to files:
website/src/data/roadmap.js
📚 Learning: 2025-01-19T15:49:15.593Z
Learnt from: samtholiya
Repo: cloudposse/atmos PR: 955
File: tests/snapshots/TestCLICommands_atmos_validate_editorconfig_--help.stdout.golden:0-0
Timestamp: 2025-01-19T15:49:15.593Z
Learning: In future commits, the help text for Atmos CLI commands should be limited to only show component and stack parameters for commands that actually use them. This applies to the example usage section in command help text.
Applied to files:
website/src/data/roadmap.js
⏰ Context from checks skipped due to timeout of 900000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Acceptance Tests (macos)
- GitHub Check: Acceptance Tests (windows)
- GitHub Check: Summary
🔇 Additional comments (9)
website/src/data/roadmap.js (6)
1-107: Structure looks solid.The roadmap data model is well-organized with clear sections for vision, quarters, and featured initiatives. The featured items include all necessary metadata for UI rendering.
186-207: Progress percentage now accurate.The
discoverabilityinitiative correctly showsprogress: 100with all 6 milestones marked as shipped. Previous concern resolved.
208-230: Progress percentage now accurate.The
workflowsinitiative correctly showsprogress: 100with all 6 milestones marked as shipped. Previous concern resolved.
361-383: Progress percentage now accurate.The
docsinitiative correctly showsprogress: 100with all 9 milestones marked as shipped. Previous concern resolved.
386-414: Clean data structure and export.The highlights array and export statement are straightforward. No issues detected.
109-146: No action needed. ThechangelogSlugsfield is already marked as optional in theInitiativeinterface (InitiativeCard.tsx line 30), so the data structure is correct as-is.website/src/components/Roadmap/MilestoneDrawer.tsx (3)
30-41: Focus management follows accessibility best practices.Saving the previously focused element and restoring it on close is the correct pattern. The 100ms delay allows the drawer animation to start before focusing the close button.
43-79: Event handlers and scroll lock implemented correctly.The Escape key handler, click-outside detection, and body scroll lock all follow proper React patterns with appropriate cleanup. Dependencies are correct and the logic is sound.
81-150: Drawer UI and accessibility are well implemented.The component uses proper ARIA attributes, conditional rendering for optional fields, and lazy loading for images. The Framer Motion animations are configured appropriately.
|
Warning Release Documentation RequiredThis PR is labeled
|
|
These changes were released in v1.203.0-rc.2. |
what
why
references
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.