feat: Add data-driven roadmap slide deck with pagination#1953
Conversation
Create a new slide deck at /slides/roadmap that visualizes the Atmos roadmap as a series of data-driven slides. Includes paginated milestones with keyboard navigation (Shift+Left/Right), progress bars, styled badges, and inline code formatting. Featured initiatives appear first with collapsible milestone pages. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
osterman
added
the
no-release
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 #1953 +/- ##
=======================================
Coverage 74.12% 74.13%
=======================================
Files 772 772
Lines 69744 69744
=======================================
+ Hits 51697 51703 +6
+ Misses 14618 14615 -3
+ Partials 3429 3426 -3
Flags with carried forward coverage won't be shown. Click here to find out more. 🚀 New features to boost your workflow:
|
📝 WalkthroughWalkthroughAdds a new "Atmos Roadmap 2025-2026" MDX slide deck with data-driven slides and presentation components, client-side paginated milestones with Shift+Arrow keyboard handling, accompanying CSS and SlideIndex registration, a small roadmap theme title change, and a minor SlideDeck keyboard guard and styling tweaks. Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant SlideDeck
participant PaginatedMilestones
participant RoadmapConfig
User->>SlideDeck: Key press (Shift+ArrowLeft/Right)
SlideDeck->>SlideDeck: Detect Shift\nsuppress global navigation
SlideDeck->>PaginatedMilestones: Forward inner-pagination key
PaginatedMilestones->>RoadmapConfig: Read/sort/paginate milestones
PaginatedMilestones-->>User: Render updated milestone page
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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: 1
🤖 Fix all issues with AI agents
In @website/docs/slides/roadmap.mdx:
- Around line 103-107: The current sorted array (const sorted) only spreads
featured, shipped, and in-progress milestones and thus omits non-featured
planned milestones; add another spread such as ...milestones.filter(m =>
m.status === 'planned' && m.category !== 'featured') (place it where you want
planned items to appear, e.g., after the in-progress spread) and keep the final
dedupe filter (arr.findIndex...) unchanged so planned milestones are included
and still deduplicated.
📜 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 (5)
website/docs/slides/index.mdxwebsite/docs/slides/roadmap.mdxwebsite/src/components/SlideDeck/SlideContent.csswebsite/src/components/SlideDeck/SlideDeck.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/SlideDeck/SlideDeck.tsxwebsite/docs/slides/index.mdxwebsite/src/data/roadmap.jswebsite/src/components/SlideDeck/SlideContent.csswebsite/docs/slides/roadmap.mdx
🧠 Learnings (2)
📓 Common learnings
Learnt from: CR
Repo: cloudposse/atmos PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-04T00:55:21.720Z
Learning: PRs labeled `minor` or `major` MUST update `website/src/data/roadmap.js` with shipped milestones, status, changelog link, PR number, and initiative progress percentage
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: 2026-01-04T00:55:21.720Z
Learnt from: CR
Repo: cloudposse/atmos PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-04T00:55:21.720Z
Learning: PRs labeled `minor` or `major` MUST update `website/src/data/roadmap.js` with shipped milestones, status, changelog link, PR number, and initiative progress percentage
Applied to files:
website/src/data/roadmap.jswebsite/docs/slides/roadmap.mdx
🪛 LanguageTool
website/docs/slides/index.mdx
[typographical] ~19-~19: Consider using a typographic opening quote here.
Context: ... Roadmap 2025-2026", description: "Product roadmap showcasing current initi...
(EN_QUOTES)
[typographical] ~19-~19: Consider using a typographic close quote here.
Context: ...gh unified infrastructure orchestration.", slideCount: 15, slug: "/sl...
(EN_QUOTES)
[typographical] ~21-~21: Consider using a typographic opening quote here.
Context: ...on.", slideCount: 15, slug: "/slides/roadmap", tags: ["roadmap"...
(EN_QUOTES)
[typographical] ~21-~21: Consider using a typographic close quote here.
Context: ...eCount: 15, slug: "/slides/roadmap", tags: ["roadmap", "features", "p...
(EN_QUOTES)
[typographical] ~22-~22: Consider using typographic quotation marks here.
Context: ... slug: "/slides/roadmap", tags: ["roadmap", "features", "planning"], }, { ...
(EN_QUOTES)
[typographical] ~22-~22: Consider using typographic quotation marks here.
Context: ...lides/roadmap", tags: ["roadmap", "features", "planning"], }, { title:...
(EN_QUOTES)
[typographical] ~22-~22: Consider using typographic quotation marks here.
Context: ...p", tags: ["roadmap", "features", "planning"], }, { title: "Scale Terr...
(EN_QUOTES)
website/docs/slides/roadmap.mdx
[style] ~104-~104: Consider using the typographical ellipsis character here instead.
Context: ...then in-progress const sorted = [ ...milestones.filter(m => m.category === 'f...
(ELLIPSIS)
[style] ~105-~105: Consider using the typographical ellipsis character here instead.
Context: ...er(m => m.category === 'featured'), ...milestones.filter(m => m.category !== 'f...
(ELLIPSIS)
[style] ~106-~106: Consider using the typographical ellipsis character here instead.
Context: ...atured' && m.status === 'shipped'), ...milestones.filter(m => m.status === 'in-...
(ELLIPSIS)
[typographical] ~132-~132: To join two clauses or introduce examples, consider using an em dash.
Context: ... setCurrentPage(p => Math.min(totalPages - 1, p + 1)); } }; window.ad...
(DASH_RULE)
[style] ~282-~282: The verb “check out” can sound colloquial in this context. Consider using a more formal alternative.
Context: ...isit atmos.tools for documentation, check out the roadmap to see what's coming, explo...
(CHECK_OUT_OUR)
⏰ 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). (4)
- GitHub Check: Acceptance Tests (windows)
- GitHub Check: Acceptance Tests (linux)
- GitHub Check: Acceptance Tests (macos)
- GitHub Check: Summary
🔇 Additional comments (8)
website/src/components/SlideDeck/SlideContent.css (2)
1-200: Clean, well-structured CSS with comprehensive theme support.The styling for inline code, badges, milestone lists, status icons, and progress bars follows consistent patterns. Light/dark theme variants are properly handled throughout.
439-506: Pagination styling is solid.Pagination dots and container styles are clean. The keyboard hint styling respects theme context. Good use of subtle transitions for hover states.
website/src/components/SlideDeck/SlideDeck.tsx (1)
259-265: Good coordination with inner pagination.The guards correctly let Shift+Arrow events pass through to
PaginatedMilestones. Clean solution for nested keyboard navigation.website/src/data/roadmap.js (1)
24-28: Theme title update aligns with the new deck.The title change is consistent with the deck's subtitle and index description.
website/docs/slides/roadmap.mdx (3)
22-30: Simple and effective inline code renderer.Clean regex-based parsing for backtick code spans.
117-137: Keyboard navigation implementation looks solid.Visibility check via
offsetParentandgetBoundingClientRectis reasonable for this use case. Effect correctly depends ontotalPages.
160-170: Deck structure is clean and data-driven.Good use of
roadmapConfigfor dynamic content. Slides are well-organized with appropriate notes.website/docs/slides/index.mdx (1)
17-23: slideCount is accurate. The roadmap deck contains exactly 15 slides: 4 static slides (title, vision, theme, highlights), 6 featured initiatives, 4 non-featured initiatives, and 1 closing slide. The value matches the actual deck structure.
- Remove justify-content: space-between to keep meta items left-aligned - Add presentation icon before slide count - Use neutral gray colors for tags instead of primary colors - Add margin-top: auto to push meta to bottom for consistent card heights Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The sorting logic was excluding milestones with status 'planned' (that weren't featured). Now planned milestones appear after in-progress items. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @website/docs/slides/roadmap.mdx:
- Around line 62-70: The external GitHub link rendering block (the JSX Link
element that conditionally renders when milestone.pr is present) uses
target="_blank" but lacks a rel attribute; update that Link (the JSX element
with className "slide-link-badge" and
to={`https://github.com/cloudposse/atmos/pull/${milestone.pr}`}) to include
rel="noopener noreferrer" to prevent window.opener vulnerabilities and ensure
secure external linking.
📜 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/docs/slides/roadmap.mdxwebsite/src/components/SlideDeck/SlideIndex.css
🧰 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/docs/slides/roadmap.mdxwebsite/src/components/SlideDeck/SlideIndex.css
🧠 Learnings (4)
📓 Common learnings
Learnt from: CR
Repo: cloudposse/atmos PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-04T00:55:21.720Z
Learning: PRs labeled `minor` or `major` MUST update `website/src/data/roadmap.js` with shipped milestones, status, changelog link, PR number, and initiative progress percentage
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: 2026-01-04T00:55:21.720Z
Learnt from: CR
Repo: cloudposse/atmos PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-04T00:55:21.720Z
Learning: PRs labeled `minor` or `major` MUST update `website/src/data/roadmap.js` with shipped milestones, status, changelog link, PR number, and initiative progress percentage
Applied to files:
website/docs/slides/roadmap.mdx
📚 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/docs/slides/roadmap.mdx
📚 Learning: 2026-01-04T00:55:21.720Z
Learnt from: CR
Repo: cloudposse/atmos PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-04T00:55:21.720Z
Learning: Applies to website/blog/*.mdx : PRs labeled `minor` or `major` MUST include a blog post at `website/blog/YYYY-MM-DD-feature-name.mdx` with YAML frontmatter, using only tags defined in `website/blog/tags.yml`
Applied to files:
website/docs/slides/roadmap.mdx
🪛 LanguageTool
website/docs/slides/roadmap.mdx
[style] ~104-~104: Consider using the typographical ellipsis character here instead.
Context: ...ss, then planned const sorted = [ ...milestones.filter(m => m.category === 'f...
(ELLIPSIS)
[style] ~105-~105: Consider using the typographical ellipsis character here instead.
Context: ...er(m => m.category === 'featured'), ...milestones.filter(m => m.category !== 'f...
(ELLIPSIS)
[style] ~106-~106: Consider using the typographical ellipsis character here instead.
Context: ...atured' && m.status === 'shipped'), ...milestones.filter(m => m.status === 'in-...
(ELLIPSIS)
[style] ~107-~107: Consider using the typographical ellipsis character here instead.
Context: ...ess' && m.category !== 'featured'), ...milestones.filter(m => m.status === 'pla...
(ELLIPSIS)
[typographical] ~133-~133: To join two clauses or introduce examples, consider using an em dash.
Context: ... setCurrentPage(p => Math.min(totalPages - 1, p + 1)); } }; window.ad...
(DASH_RULE)
[style] ~282-~282: Using many exclamation marks might seem excessive (in this case: 12 exclamation marks for a text that’s 8380 characters long)
Context: ... Thank you for your interest in Atmos! Visit atmos.tools for documentation, ...
(EN_EXCESSIVE_EXCLAMATION)
[style] ~283-~283: The verb “check out” can sound colloquial in this context. Consider using a more formal alternative.
Context: ...isit atmos.tools for documentation, check out the roadmap to see what's coming, explo...
(CHECK_OUT_OUR)
⏰ 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). (4)
- GitHub Check: Acceptance Tests (windows)
- GitHub Check: Acceptance Tests (macos)
- GitHub Check: Acceptance Tests (linux)
- GitHub Check: Summary
🔇 Additional comments (11)
website/src/components/SlideDeck/SlideIndex.css (3)
71-71: Nice layout pattern for consistent card heights.Using
flex: 1on card content combined withmargin-top: autoon the meta section is a clean approach for keeping cards uniform. Solid work.Also applies to: 96-98
106-120: Decorative icon via mask-image looks good.Using
mask-imagewithcurrentColorallows the icon to inherit text color automatically, which works well for theming. The approach is lightweight and avoids extra assets.
129-141: Neutral tag colors are a good choice.Switching from primary colors to emphasis tokens gives tags a more subtle, consistent appearance across themes.
website/docs/slides/roadmap.mdx (8)
22-30: Simple inline code parser.Clean regex-based split for backtick-wrapped text. Works well for the milestone labels.
32-46: Status components are straightforward.Clear mapping from status to visual representation. Good separation between badge (text label) and icon (symbol).
75-82: Progress bar is clean.Straightforward implementation. If progress values from
roadmapConfigare always valid (0-100), this works well.
84-96: LGTM.Using
milestone.labelas key works since labels are unique within each list.
98-138: Pagination logic is well-structured.Good approach with:
- Sorting by priority (featured → shipped → in-progress → planned)
- Deduplication by label
- Functional setState to avoid stale closures in the keyboard handler
- Thorough visibility checks before responding to keyboard events
The
totalPagesdependency is correct since it's recalculated each render.
142-158: Pagination dots have accessible labels.The
aria-labelon each dot is good for screen reader support. The empty array fallback is defensive.
161-244: Data-driven slide structure looks solid.Pulling content from
roadmapConfigkeeps the deck in sync with the roadmap data. The featured/remaining split ensures no duplication.
269-286: Closing slide wraps things up well.Clear CTAs with links to docs, roadmap, GitHub, and community. Good resources for stakeholders.
Security best practice for target="_blank" links to prevent window.opener vulnerabilities. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @website/docs/slides/roadmap.mdx:
- Around line 275-280: The external anchor tags for GitHub and Community in the
inline div (the <a> elements on the "GitHub: github.com/cloudposse/atmos" and
"Community: cloudposse.com/slack" lines) are missing target and rel attributes;
update those <a> elements to include target="_blank" and rel="noopener
noreferrer" (matching MilestoneLinks behavior) so the external links open in a
new tab safely and consistently.
🧹 Nitpick comments (2)
website/docs/slides/roadmap.mdx (2)
76-83: Consider clamping the progress value.If
progressever comes in outside 0-100 range, the bar could render unexpectedly. Likely fine sinceroadmapConfigcontrols the data, but a simple clamp adds resilience.Optional defensive clamping
export const ProgressBar = ({ progress }) => ( + const clampedProgress = Math.max(0, Math.min(100, progress)); <div className="slide-progress-bar"> <div className="slide-progress-bar__track"> - <div className="slide-progress-bar__fill" style={{width: `${progress}%`}} /> + <div className="slide-progress-bar__fill" style={{width: `${clampedProgress}%`}} /> </div> - <span className="slide-progress-bar__label">{progress}%</span> + <span className="slide-progress-bar__label">{clampedProgress}%</span> </div> );
85-97: Potential duplicate key if labels aren't unique.Using
milestone.labelas the React key works if labels are guaranteed unique. If duplicates exist inroadmapConfig, React will warn. Consider a more robust key if needed.Optional: Use index as fallback
- {milestones.map((milestone) => ( - <li key={milestone.label}> + {milestones.map((milestone, index) => ( + <li key={milestone.id || `${milestone.label}-${index}`}>
📜 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 (1)
website/docs/slides/roadmap.mdx
🧰 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/docs/slides/roadmap.mdx
🧠 Learnings (3)
📓 Common learnings
Learnt from: CR
Repo: cloudposse/atmos PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-04T00:55:21.720Z
Learning: PRs labeled `minor` or `major` MUST update `website/src/data/roadmap.js` with shipped milestones, status, changelog link, PR number, and initiative progress percentage
📚 Learning: 2026-01-04T00:55:21.720Z
Learnt from: CR
Repo: cloudposse/atmos PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-04T00:55:21.720Z
Learning: PRs labeled `minor` or `major` MUST update `website/src/data/roadmap.js` with shipped milestones, status, changelog link, PR number, and initiative progress percentage
Applied to files:
website/docs/slides/roadmap.mdx
📚 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/docs/slides/roadmap.mdx
🪛 LanguageTool
website/docs/slides/roadmap.mdx
[style] ~105-~105: Consider using the typographical ellipsis character here instead.
Context: ...ss, then planned const sorted = [ ...milestones.filter(m => m.category === 'f...
(ELLIPSIS)
[style] ~106-~106: Consider using the typographical ellipsis character here instead.
Context: ...er(m => m.category === 'featured'), ...milestones.filter(m => m.category !== 'f...
(ELLIPSIS)
[style] ~107-~107: Consider using the typographical ellipsis character here instead.
Context: ...atured' && m.status === 'shipped'), ...milestones.filter(m => m.status === 'in-...
(ELLIPSIS)
[style] ~108-~108: Consider using the typographical ellipsis character here instead.
Context: ...ess' && m.category !== 'featured'), ...milestones.filter(m => m.status === 'pla...
(ELLIPSIS)
[typographical] ~134-~134: To join two clauses or introduce examples, consider using an em dash.
Context: ... setCurrentPage(p => Math.min(totalPages - 1, p + 1)); } }; window.ad...
(DASH_RULE)
[style] ~283-~283: Using many exclamation marks might seem excessive (in this case: 12 exclamation marks for a text that’s 8416 characters long)
Context: ... Thank you for your interest in Atmos! Visit atmos.tools for documentation, ...
(EN_EXCESSIVE_EXCLAMATION)
[style] ~284-~284: The verb “check out” can sound colloquial in this context. Consider using a more formal alternative.
Context: ...isit atmos.tools for documentation, check out the roadmap to see what's coming, explo...
(CHECK_OUT_OUR)
⏰ 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). (4)
- GitHub Check: Acceptance Tests (macos)
- GitHub Check: Acceptance Tests (windows)
- GitHub Check: Acceptance Tests (linux)
- GitHub Check: Summary
🔇 Additional comments (9)
website/docs/slides/roadmap.mdx (9)
1-8: Frontmatter looks good.Clean configuration for a slide deck page. Hiding TOC and title makes sense for this presentation format.
10-20: Imports are appropriate.All imports are used by the components and slide content below.
22-30: Inline code rendering is solid.The regex split and mapping approach handles backtick-wrapped code segments well.
32-38: StatusBadge component is clean.Simple mapping from status to class and label. Works as expected.
40-46: StatusIcon is straightforward.Unicode characters provide visual cues and remain accessible.
48-74: MilestoneLinks handles external links correctly.Good use of
target="_blank"withrel="noopener noreferrer"on the GitHub PR link.
99-160: PaginatedMilestones is well-structured.Sorting logic correctly prioritizes featured items, then status. Deduplication handles edge cases. Keyboard navigation guards against responding when not visible. Good accessibility with
aria-labelon pagination dots.The static analysis warnings about "ellipsis" are false positives — those are JavaScript spread operators, not typographical ellipses.
222-245: Featured initiatives mapping is solid.Good use of optional chaining on
initiative?.milestones. The.find()returning undefined is handled gracefully.
247-268: Remaining initiatives slides are well-filtered.Correctly excludes featured initiatives and renders progress bars with pagination.
All external links on the closing slide now include target="_blank" and rel="noopener noreferrer" for consistency and security. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @website/docs/slides/roadmap.mdx:
- Around line 247-268: The remaining-initiatives loop can pass undefined
initiative.milestones to PaginatedMilestones causing a runtime error; update the
mapping so you guard or normalize milestones before rendering by checking
initiative.milestones (from roadmapConfig.initiatives) and passing an empty
array (or conditionally rendering PaginatedMilestones) when it’s
falsy/undefined; locate the map that returns <Slide> and adjust the
PaginatedMilestones usage (or add a conditional similar to the featured block’s
milestones.length > 0) to avoid calling it with undefined.
🧹 Nitpick comments (2)
website/docs/slides/roadmap.mdx (2)
118-139: Potential keyboard event collision with multiple instances.Each
PaginatedMilestonesinstance attaches its ownkeydownlistener towindow. The visibility checks help, but during slide transitions or if multiple slides are partially visible, multiple instances could respond to the same keypress.Consider adding
e.stopPropagation()after handling, or tracking which component "owns" focus.Suggested improvement
if (e.key === 'ArrowLeft') { setCurrentPage(p => Math.max(0, p - 1)); + e.stopPropagation(); } else { setCurrentPage(p => Math.min(totalPages - 1, p + 1)); + e.stopPropagation(); }
103-109: Sorting logic is correct but could be clearer.The current approach works because dedupe keeps the first occurrence, but the intent isn't immediately obvious. A comment explaining that featured items may also match status filters (and dedupe handles it) would help future maintainers.
📜 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 (1)
website/docs/slides/roadmap.mdx
🧰 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/docs/slides/roadmap.mdx
🧠 Learnings (6)
📓 Common learnings
Learnt from: CR
Repo: cloudposse/atmos PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-04T00:55:21.720Z
Learning: PRs labeled `minor` or `major` MUST update `website/src/data/roadmap.js` with shipped milestones, status, changelog link, PR number, and initiative progress percentage
📚 Learning: 2026-01-04T00:55:21.720Z
Learnt from: CR
Repo: cloudposse/atmos PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-04T00:55:21.720Z
Learning: PRs labeled `minor` or `major` MUST update `website/src/data/roadmap.js` with shipped milestones, status, changelog link, PR number, and initiative progress percentage
Applied to files:
website/docs/slides/roadmap.mdx
📚 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/docs/slides/roadmap.mdx
📚 Learning: 2025-01-17T00:18:57.769Z
Learnt from: aknysh
Repo: cloudposse/atmos PR: 944
File: go.mod:206-206
Timestamp: 2025-01-17T00:18:57.769Z
Learning: For indirect dependencies with license compliance issues in the cloudposse/atmos repository, the team prefers to handle them in follow-up PRs rather than blocking the current changes, as these issues often require deeper investigation of the dependency tree.
Applied to files:
website/docs/slides/roadmap.mdx
📚 Learning: 2024-11-22T12:38:33.132Z
Learnt from: osterman
Repo: cloudposse/atmos PR: 768
File: internal/exec/vendor_utils.go:496-513
Timestamp: 2024-11-22T12:38:33.132Z
Learning: In the Atmos project, continue to flag path traversal issues in code reviews but acknowledge when they are expected and acceptable in specific cases.
Applied to files:
website/docs/slides/roadmap.mdx
📚 Learning: 2025-01-25T03:51:57.689Z
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.
Applied to files:
website/docs/slides/roadmap.mdx
🪛 LanguageTool
website/docs/slides/roadmap.mdx
[style] ~105-~105: Consider using the typographical ellipsis character here instead.
Context: ...ss, then planned const sorted = [ ...milestones.filter(m => m.category === 'f...
(ELLIPSIS)
[style] ~106-~106: Consider using the typographical ellipsis character here instead.
Context: ...er(m => m.category === 'featured'), ...milestones.filter(m => m.category !== 'f...
(ELLIPSIS)
[style] ~107-~107: Consider using the typographical ellipsis character here instead.
Context: ...atured' && m.status === 'shipped'), ...milestones.filter(m => m.status === 'in-...
(ELLIPSIS)
[style] ~108-~108: Consider using the typographical ellipsis character here instead.
Context: ...ess' && m.category !== 'featured'), ...milestones.filter(m => m.status === 'pla...
(ELLIPSIS)
[typographical] ~134-~134: To join two clauses or introduce examples, consider using an em dash.
Context: ... setCurrentPage(p => Math.min(totalPages - 1, p + 1)); } }; window.ad...
(DASH_RULE)
[style] ~283-~283: Using many exclamation marks might seem excessive (in this case: 12 exclamation marks for a text that’s 8584 characters long)
Context: ... Thank you for your interest in Atmos! Visit atmos.tools for documentation, ...
(EN_EXCESSIVE_EXCLAMATION)
[style] ~284-~284: The verb “check out” can sound colloquial in this context. Consider using a more formal alternative.
Context: ...isit atmos.tools for documentation, check out the roadmap to see what's coming, explo...
(CHECK_OUT_OUR)
⏰ 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 (linux)
- GitHub Check: Acceptance Tests (windows)
- GitHub Check: Summary
🔇 Additional comments (5)
website/docs/slides/roadmap.mdx (5)
22-30: Clean inline code renderer.Logic is solid. The regex split and map pattern works well for this use case.
32-46: Status components look good.Clean, consistent pattern for mapping status values to visual representations.
48-74: Good security posture on external links.The PR link correctly includes
target="_blank"andrel="noopener noreferrer". Internal links appropriately use the DocusaurusLinkcomponent for client-side navigation.
270-287: Closing slide external links are secure.All four external links correctly include
target="_blank"andrel="noopener noreferrer", consistent with the commit message fix.
85-97: Use a unique identifier for milestone keys instead of labels.The milestone label "Seamless first login with provider fallback" is duplicated across the
authanddxinitiatives in the roadmap data. While the component works today (labels are unique within each initiative), the data itself shows redundancy. Adding anidfield to each milestone would prevent accidental collisions if the same initiative ever contains duplicate labels, and it provides a more robust key choice that's independent of content changes.
|
These changes were released in v1.204.0-rc.4. |
2 participants
what
/slides/roadmapthat visualizes the Atmos product roadmapwhy
references
website/src/data/roadmap.jswebsite/src/components/SlideDeck/Summary by CodeRabbit
New Features
Style
Other
✏️ Tip: You can customize this high-level summary in your review settings.