Conversation
|
WalkthroughAdds a theme-aware HeroVideo component and reworks the homepage hero into a responsive two-column layout with gradient overlay, updates dark-mode styles, adds video metadata assets, introduces Playwright theme/hydration tests, removes a VideoDemo unit test, and adds the next-themes dependency. Changes
sequenceDiagram
actor Browser
participant HomePage as "Home Page"
participant HeroVideo as "HeroVideo Component"
participant Theme as "ThemeProvider (next-themes)"
participant Assets as "Video Assets (Mux)"
Browser->>HomePage: Navigate to homepage
HomePage->>HeroVideo: Mount component
HeroVideo->>Theme: Read current theme
Theme-->>HeroVideo: Return light/dark
HeroVideo->>Assets: Select video source (3d-light / 3d-dark)
HeroVideo-->>Browser: Render video(s) (autoplay, loop, muted) with theme-based opacity
Browser->>Theme: User toggles theme
Theme-->>HeroVideo: New theme value
HeroVideo->>HeroVideo: Transition opacity to switch visible video
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (4 warnings)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
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 |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…t.mp4` video assets.
…component and adding `next-themes` dependency.
…nd remove hero video masks.
…h dark and light mode videos with opacity toggling.
…d horizontal padding.
github-actions
bot
added
docs
…gins and max-width.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/www/package.json (1)
15-40: Testnext-themes@0.4.6with React 19.2.0 before production
next-themesv0.4.6 supports the Next.js app router, but React 19 compatibility is not explicitly verified. GitHub issues report compatibility problems with React 19 RC. Add to your testing checklist: verify hydration behavior, client-side script execution, and theme switching with React 19.2.0 in the app router environment. If issues occur, consider forking/patching or using an alternative theme solution.
🧹 Nitpick comments (4)
openspec/changes/update-hero-videos/tasks.md (1)
1-5: Number the checklist items per openspec conventionTasks are correctly using
- [ ]but they’re not numbered in the text. To align withopenspec/changes/*/tasks.mdguidance, consider prefixing each item with an explicit number (e.g.- [ ] 1. Replace …,- [ ] 2. Implement …) so the implementation order is clear.
Based on learnings, this keeps tasks.md consistent with the repo’s checklist style.apps/www/components/page/video-demo.tsx (1)
31-37: Updated glow/hover treatment is fine; keep class string maintainableThe new class list adds smooth transitions and more nuanced light/dark hover shadows while preserving structure (rounded, bordered, full‑width button). Functionally this is solid for the demo. If the styles evolve further, consider extracting these classes to a shared constant or using
clsx/variants to keep the JSX line manageable.openspec/changes/update-hero-videos/specs/hero-video/spec.md (1)
1-33: Tighten normative language in the requirement statementThe structure under
## ADDED Requirementswith multiple#### Scenario:blocks looks good and satisfies the scenario requirement. Minor spec nit: Line 4 mixes “must” and “should”:“must display a looping, autoplaying video … This video should be theme-aware and responsive.”
If theme awareness and responsiveness are normative (not optional), consider changing the second sentence to “This video must be theme-aware and responsive.” to align with the SHALL/MUST guidance for requirements in
openspec/**/spec.md.
Based on learnings, this keeps requirement wording strictly normative.openspec/changes/update-hero-videos/design.md (1)
1-11: Design doc scope matches change; no blocking gapsThis is an appropriate use of a design doc for a cross-cutting visual change with a new dependency and theme behavior. The architecture and considerations match the implemented HeroVideo and homepage layout; nothing here seems misleading or incomplete for this scope. If you iterate further (fallback behavior, reduced motion, loading strategy), consider adding a short “Accessibility & perf trade‑offs” section, but not required for this PR.
Based on learnings, this aligns with when we create
design.md.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
apps/www/public/assets/3d-dark.mp4is excluded by!**/*.mp4apps/www/public/assets/3d-light.mp4is excluded by!**/*.mp4pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (14)
apps/www/app/(home)/page.tsx(2 hunks)apps/www/app/globals.css(1 hunks)apps/www/app/styles/theme/dark.css(1 hunks)apps/www/components/hero-video.tsx(1 hunks)apps/www/components/page/video-demo.test.tsx(0 hunks)apps/www/components/page/video-demo.tsx(1 hunks)apps/www/package.json(1 hunks)apps/www/videos/3d-dark.mp4.json(1 hunks)apps/www/videos/3d-light.mp4.json(1 hunks)openspec/changes/update-hero-videos/design.md(1 hunks)openspec/changes/update-hero-videos/proposal.md(1 hunks)openspec/changes/update-hero-videos/specs/hero-video/spec.md(1 hunks)openspec/changes/update-hero-videos/tasks.md(1 hunks)tooling/playwright-www/tests/responsive.test.ts(2 hunks)
💤 Files with no reviewable changes (1)
- apps/www/components/page/video-demo.test.tsx
🧰 Additional context used
📓 Path-based instructions (13)
**/*.{ts,tsx,json,md}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Biome for linting and formatting instead of ESLint and Prettier
Files:
openspec/changes/update-hero-videos/design.mdapps/www/videos/3d-dark.mp4.jsonapps/www/videos/3d-light.mp4.jsonapps/www/app/(home)/page.tsxapps/www/package.jsonopenspec/changes/update-hero-videos/proposal.mdapps/www/components/page/video-demo.tsxopenspec/changes/update-hero-videos/tasks.mdtooling/playwright-www/tests/responsive.test.tsopenspec/changes/update-hero-videos/specs/hero-video/spec.mdapps/www/components/hero-video.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)
**/*.{ts,tsx}: Prefertypeoverinterfacefor type definitions in TypeScript
Use TypeScript 5.1+ features when appropriate
Leverageconsttype parameters for better inference in TypeScript
Use JSDoc comments for public APIs
Use tabs for indentation (configured in Biome)
Use double quotes for strings (configured in Biome)
Organize imports automatically (Biome handles this)
Avoid explicit types when TypeScript can infer them (noInferrableTypeserror)
Useas constwhere appropriate for immutable values (useAsConstAssertionerror)
Don't reassign function parameters (noParameterAssignerror)
Place default parameters last in function signatures (useDefaultParameterLasterror)
Always initialize enum values (useEnumInitializerserror)
Declare one variable per statement (useSingleVarDeclaratorerror)
Avoid unnecessary template literals (noUnusedTemplateLiteralerror)
PreferNumber.parseIntover globalparseInt(useNumberNamespaceerror)
Use kebab-case for TypeScript filenames (e.g.,create-env.ts)
Use camelCase for function names (e.g.,createEnv)
Use PascalCase for type names (e.g.,ArkEnvError)
Use UPPER_SNAKE_CASE for environment variables and constants
Include examples in JSDoc comments when helpful for public APIs
Document complex type logic with JSDoc comments
UseArkEnvErrorfor environment variable validation errors
Provide clear, actionable error messages that include the variable name and expected type
**/*.{ts,tsx}: UsecreateEnv(schema)as the main function for validated environment objects, available as the default export
Use built-in validators (host, port, url, email) fromsrc/types.tswhen available instead of custom validation
UseArkEnvErrorfor environment variable errors, not generic errors
Environment schema definitions should use built-in validators, ArkType string literals, and support default values in the schema pattern
Use logical grouping for related environment variables in schemas
Use descriptive env...
Files:
apps/www/app/(home)/page.tsxapps/www/components/page/video-demo.tsxtooling/playwright-www/tests/responsive.test.tsapps/www/components/hero-video.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)
Use self-closing JSX elements (
useSelfClosingElementserror)
Files:
apps/www/app/(home)/page.tsxapps/www/components/page/video-demo.tsxapps/www/components/hero-video.tsx
apps/www/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (apps/www/.cursor/rules/posthog-integration.mdc)
apps/www/**/*.{ts,tsx,js,jsx}: If using TypeScript, use an enum to store feature flag names. If using JavaScript, store feature flag names as strings to an object declared as a constant to simulate an enum. Use UPPERCASE_WITH_UNDERSCORE naming convention for enum/const object members.
If a custom property for a person or event is referenced in two or more files or two or more callsites in the same file, use an enum or const object with UPPERCASE_WITH_UNDERSCORE naming convention, similar to feature flags.
Files:
apps/www/app/(home)/page.tsxapps/www/components/page/video-demo.tsxapps/www/components/hero-video.tsx
apps/*/package.json
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Applications in apps/ directory are not published to npm and may depend on workspace packages
Files:
apps/www/package.json
**/package.json
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Use workspace:* protocol for workspace dependencies between packages
Files:
apps/www/package.json
{packages,apps,tooling}/**/package.json
📄 CodeRabbit inference engine (.cursor/rules/pnpm.mdc)
When referencing workspace packages in dependencies, use the
workspace:*protocol instead of version numbers
Files:
apps/www/package.json
openspec/changes/*/proposal.md
📄 CodeRabbit inference engine (openspec/AGENTS.md)
Create proposal.md with sections: Why, What Changes (with BREAKING markers), and Impact
Files:
openspec/changes/update-hero-videos/proposal.md
openspec/changes/*/tasks.md
📄 CodeRabbit inference engine (openspec/AGENTS.md)
Create tasks.md with numbered implementation checklist items as checkboxes (- [ ] format)
Files:
openspec/changes/update-hero-videos/tasks.md
**/*.test.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)
Co-locate tests with components:
Component.tsxnext toComponent.test.tsx
**/*.test.{ts,tsx}: Test individual functions, components, and hooks in isolation with mocked dependencies in unit tests
Keep unit tests fast with execution under 100ms per test
Co-locate unit tests with source files using naming convention:source.ts→source.test.ts
Focus component tests on public API, user behavior, state transitions, and accessibility rather than styling or implementation details
Query component tests by role, name, label, and text using accessibility-first selectors
Use Vitest as the test framework for unit and integration tests
Use Testing Library withuser-eventfor real user simulation in component tests
**/*.test.{ts,tsx}: Test individual functions, components, and hooks in isolation with mocked dependencies using the*.test.tsor*.test.tsxsuffix
Mockprocess.envin tests for different scenarios and save/restore original env inbeforeEach/afterEachhooks
Use Vitest'sdescribe/itstructure in test files
Test edge cases including invalid and missing environment variable values
Use Vitest for testing framework
Files:
tooling/playwright-www/tests/responsive.test.ts
tooling/playwright-www/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
End-to-end tests should be located in
tooling/playwright-www/and test complete user workflows in real browsers with no mocking
Files:
tooling/playwright-www/tests/responsive.test.ts
openspec/changes/*/specs/**/spec.md
📄 CodeRabbit inference engine (openspec/AGENTS.md)
openspec/changes/*/specs/**/spec.md: Use ## ADDED|MODIFIED|REMOVED|RENAMED Requirements as delta headers in spec.md files under changes
Ensure change proposals contain delta specs for each affected capability under changes/[change-id]/specs/[capability]/spec.md
Files:
openspec/changes/update-hero-videos/specs/hero-video/spec.md
openspec/**/spec.md
📄 CodeRabbit inference engine (openspec/AGENTS.md)
openspec/**/spec.md: Include at least one scenario per requirement using #### Scenario: header format with WHEN and THEN bullet points
Use SHALL/MUST for normative requirements rather than should/may unless intentionally non-normative
Files:
openspec/changes/update-hero-videos/specs/hero-video/spec.md
🧠 Learnings (10)
📚 Learning: 2025-11-24T16:05:35.714Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: openspec/AGENTS.md:0-0
Timestamp: 2025-11-24T16:05:35.714Z
Learning: Create design.md only when needed: for cross-cutting changes, new dependencies, significant data model changes, security/performance complexity, or ambiguity
Applied to files:
openspec/changes/update-hero-videos/design.md
📚 Learning: 2025-11-29T08:00:08.031Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/pnpm.mdc:0-0
Timestamp: 2025-11-29T08:00:08.031Z
Learning: Applies to package.json : Configure only built dependencies (native modules) in `pnpm.onlyBuiltDependencies`, including: biomejs/biome, sentry/cli, swc/core, tailwindcss/oxide, vercel/speed-insights, esbuild, and sharp
Applied to files:
apps/www/package.json
📚 Learning: 2025-11-24T16:05:35.714Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: openspec/AGENTS.md:0-0
Timestamp: 2025-11-24T16:05:35.714Z
Learning: Applies to openspec/changes/*/tasks.md : Create tasks.md with numbered implementation checklist items as checkboxes (- [ ] format)
Applied to files:
openspec/changes/update-hero-videos/tasks.md
📚 Learning: 2025-11-24T16:04:36.939Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/test-patterns.mdc:0-0
Timestamp: 2025-11-24T16:04:36.939Z
Learning: Applies to tooling/playwright-www/**/*.spec.ts : Test complete user workflows and validate real browser behavior across Chromium, Firefox, and WebKit in end-to-end tests
Applied to files:
tooling/playwright-www/tests/responsive.test.ts
📚 Learning: 2025-11-24T16:04:36.939Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/test-patterns.mdc:0-0
Timestamp: 2025-11-24T16:04:36.939Z
Learning: Applies to tooling/playwright-www/**/*.spec.ts : Use Playwright for end-to-end tests
Applied to files:
tooling/playwright-www/tests/responsive.test.ts
📚 Learning: 2025-11-29T22:11:39.920Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-29T22:11:39.920Z
Learning: Applies to tooling/playwright-www/**/*.{ts,tsx} : End-to-end tests should be located in `tooling/playwright-www/` and test complete user workflows in real browsers with no mocking
Applied to files:
tooling/playwright-www/tests/responsive.test.ts
📚 Learning: 2025-11-24T16:04:36.939Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/test-patterns.mdc:0-0
Timestamp: 2025-11-24T16:04:36.939Z
Learning: Applies to **/*.test.{ts,tsx} : Query component tests by role, name, label, and text using accessibility-first selectors
Applied to files:
tooling/playwright-www/tests/responsive.test.ts
📚 Learning: 2025-11-24T16:04:36.939Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/test-patterns.mdc:0-0
Timestamp: 2025-11-24T16:04:36.939Z
Learning: Applies to **/*.test.{ts,tsx} : Focus component tests on public API, user behavior, state transitions, and accessibility rather than styling or implementation details
Applied to files:
tooling/playwright-www/tests/responsive.test.ts
📚 Learning: 2025-11-24T16:05:35.714Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: openspec/AGENTS.md:0-0
Timestamp: 2025-11-24T16:05:35.714Z
Learning: Applies to openspec/**/spec.md : Include at least one scenario per requirement using #### Scenario: header format with **WHEN** and **THEN** bullet points
Applied to files:
openspec/changes/update-hero-videos/specs/hero-video/spec.md
📚 Learning: 2025-11-24T16:05:35.714Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: openspec/AGENTS.md:0-0
Timestamp: 2025-11-24T16:05:35.714Z
Learning: For MODIFIED requirements, copy the entire existing requirement block and paste under ## MODIFIED Requirements, then edit to reflect new behavior
Applied to files:
openspec/changes/update-hero-videos/specs/hero-video/spec.md
🧬 Code graph analysis (6)
openspec/changes/update-hero-videos/design.md (1)
apps/www/components/page/video-demo.test.tsx (8)
default(48-84)props(49-83)render(113-130)render(291-313)render(151-171)default(16-45)render(262-272)render(132-140)
apps/www/videos/3d-light.mp4.json (1)
apps/www/components/page/video-demo.test.tsx (1)
props(49-83)
openspec/changes/update-hero-videos/proposal.md (1)
apps/www/components/page/video-demo.test.tsx (8)
default(48-84)render(113-130)props(49-83)render(291-313)render(151-171)default(16-45)render(239-250)render(142-149)
apps/www/components/page/video-demo.tsx (1)
apps/www/components/ui/button.tsx (1)
ButtonProps(37-41)
openspec/changes/update-hero-videos/tasks.md (1)
apps/www/components/page/video-demo.test.tsx (2)
default(48-84)render(151-171)
tooling/playwright-www/tests/responsive.test.ts (1)
apps/www/components/page/video-demo.test.tsx (8)
render(252-260)render(113-130)render(173-181)render(239-250)render(204-217)render(105-111)render(336-342)render(291-313)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: test-e2e (e2e)
- GitHub Check: test-e2e (a11y)
- GitHub Check: test-build (latest)
🔇 Additional comments (6)
apps/www/videos/3d-light.mp4.json (1)
1-23: Hero light video metadata looks consistentMux metadata (status, providerMetadata, HLS source, poster, blurDataURL) and
originalFilePathall look consistent forvideos/3d-light.mp4. No issues from a code/config perspective.apps/www/videos/3d-dark.mp4.json (1)
1-23: Hero dark video metadata looks consistentStructure and fields mirror the light variant and reference a distinct Mux asset for
videos/3d-dark.mp4. This is appropriate for theme-aware switching.apps/www/app/globals.css (1)
25-29: Global dark-mode background override looks good; validate other pagesForcing
.dark body, .dark htmlto usebackground-color: var(--background)andbackground-image: none !importantshould resolve the gradient/hero blending issue and give the video a clean canvas. Just make sure no other dark-mode pages relied on a document‑level background image; if they did, those should move to more local containers.apps/www/app/styles/theme/dark.css (1)
2-15: Dark theme token tweaks look consistentThe updated
--backgroundand standalone comments keep the palette coherent and preserve the documented WCAG contrast for--muted-foreground. No issues from a theming standpoint.tooling/playwright-www/tests/responsive.test.ts (1)
61-63: Scoped media locators improve test robustnessScoping the media locator to the interactive demo button and targeting both
videoandimg[alt*='Demo' i]is a nice improvement: it avoids accidentally matching unrelated media (like the new hero video) and still covers the fallback image path. Assertions below remain valid and focused on responsiveness.Also applies to: 167-174
apps/www/app/(home)/page.tsx (1)
68-103: Hero layout + VideoDemo placement look goodThe two-column hero with text left and
HeroVideoright, plus the constrainedVideoDemosection below, reads cleanly and keeps the primary actions (Sail / Star buttons) prominent. HidingHeroVideobelowmdwhile keepingVideoDemofull-width should work well across breakpoints.
…rective in theme switching test.
…tes to hero video components.
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
apps/www/app/(home)/page.tsx (1)
18-68: Decorative gradient SVG is now correctly hidden from assistive techMarking the top gradient SVG with
aria-hidden="true",role="presentation", andfocusable="false", and dropping the<title>, cleanly treats it as decorative and removes unnecessary screen reader noise while preserving the visual effect.
🧹 Nitpick comments (2)
tooling/playwright-www/tests/theme-switching.test.ts (1)
4-64: Theme switching test bypasses real UI and doesn’t actually switch back to lightRight now this test:
- Forces dark mode via
page.evaluateand directclassList/colorSchemetweaks.- Never toggles back to light.
- Contains a lot of exploratory comments about “not knowing” the UI.
That makes the test name a bit misleading and means you’re not exercising the real theme toggle workflow.
I’d recommend:
- Once the theme toggle UI is settled, drive it via an accessible selector (e.g. a labeled button) instead of mutating
documentElementdirectly.- Either extend the test to switch dark → light (and assert both states) or rename it to reflect that it’s only asserting dark-mode application + no hydration errors.
- Trim the speculative comments so the test reads as intentional rather than exploratory.
Based on learnings, E2E tests here should cover real user workflows and observable behavior rather than internal DOM manipulation.
apps/www/app/(home)/page.tsx (1)
70-105: Hero layout and CTA grouping look solid; consider mobile hero video + decorative video semanticsThe new two-column hero reads well: heading hierarchy is intact, copy + CTAs are prominent, and HeroVideo is visually separated on larger screens.
Two small, optional follow-ups:
HeroVideois entirely hidden on small screens (hidden md:flex). If showcasing the new 3D logo is important on mobile too, consider a simplified mobile placement (e.g. stacked below the text) rather than hiding it completely.- Since the hero video is primarily visual flair, it might be worth marking the video(s) inside
HeroVideoas decorative (e.g.aria-hidden,role="presentation", or appropriate labeling) so screen readers don’t announce an unlabeled media element.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (3)
apps/www/app/(home)/page.tsx(2 hunks)apps/www/package.json(1 hunks)tooling/playwright-www/tests/theme-switching.test.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (9)
apps/*/package.json
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Applications in apps/ directory are not published to npm and may depend on workspace packages
Files:
apps/www/package.json
**/package.json
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Use workspace:* protocol for workspace dependencies between packages
Files:
apps/www/package.json
{packages,apps,tooling}/**/package.json
📄 CodeRabbit inference engine (.cursor/rules/pnpm.mdc)
When referencing workspace packages in dependencies, use the
workspace:*protocol instead of version numbers
Files:
apps/www/package.json
**/*.{ts,tsx,json,md}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Biome for linting and formatting instead of ESLint and Prettier
Files:
apps/www/package.jsontooling/playwright-www/tests/theme-switching.test.tsapps/www/app/(home)/page.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)
**/*.{ts,tsx}: Prefertypeoverinterfacefor type definitions in TypeScript
Use TypeScript 5.1+ features when appropriate
Leverageconsttype parameters for better inference in TypeScript
Use JSDoc comments for public APIs
Use tabs for indentation (configured in Biome)
Use double quotes for strings (configured in Biome)
Organize imports automatically (Biome handles this)
Avoid explicit types when TypeScript can infer them (noInferrableTypeserror)
Useas constwhere appropriate for immutable values (useAsConstAssertionerror)
Don't reassign function parameters (noParameterAssignerror)
Place default parameters last in function signatures (useDefaultParameterLasterror)
Always initialize enum values (useEnumInitializerserror)
Declare one variable per statement (useSingleVarDeclaratorerror)
Avoid unnecessary template literals (noUnusedTemplateLiteralerror)
PreferNumber.parseIntover globalparseInt(useNumberNamespaceerror)
Use kebab-case for TypeScript filenames (e.g.,create-env.ts)
Use camelCase for function names (e.g.,createEnv)
Use PascalCase for type names (e.g.,ArkEnvError)
Use UPPER_SNAKE_CASE for environment variables and constants
Include examples in JSDoc comments when helpful for public APIs
Document complex type logic with JSDoc comments
UseArkEnvErrorfor environment variable validation errors
Provide clear, actionable error messages that include the variable name and expected type
**/*.{ts,tsx}: UsecreateEnv(schema)as the main function for validated environment objects, available as the default export
Use built-in validators (host, port, url, email) fromsrc/types.tswhen available instead of custom validation
UseArkEnvErrorfor environment variable errors, not generic errors
Environment schema definitions should use built-in validators, ArkType string literals, and support default values in the schema pattern
Use logical grouping for related environment variables in schemas
Use descriptive env...
Files:
tooling/playwright-www/tests/theme-switching.test.tsapps/www/app/(home)/page.tsx
**/*.test.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)
Co-locate tests with components:
Component.tsxnext toComponent.test.tsx
**/*.test.{ts,tsx}: Test individual functions, components, and hooks in isolation with mocked dependencies in unit tests
Keep unit tests fast with execution under 100ms per test
Co-locate unit tests with source files using naming convention:source.ts→source.test.ts
Focus component tests on public API, user behavior, state transitions, and accessibility rather than styling or implementation details
Query component tests by role, name, label, and text using accessibility-first selectors
Use Vitest as the test framework for unit and integration tests
Use Testing Library withuser-eventfor real user simulation in component tests
**/*.test.{ts,tsx}: Test individual functions, components, and hooks in isolation with mocked dependencies using the*.test.tsor*.test.tsxsuffix
Mockprocess.envin tests for different scenarios and save/restore original env inbeforeEach/afterEachhooks
Use Vitest'sdescribe/itstructure in test files
Test edge cases including invalid and missing environment variable values
Use Vitest for testing framework
Files:
tooling/playwright-www/tests/theme-switching.test.ts
tooling/playwright-www/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
End-to-end tests should be located in
tooling/playwright-www/and test complete user workflows in real browsers with no mocking
Files:
tooling/playwright-www/tests/theme-switching.test.ts
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)
Use self-closing JSX elements (
useSelfClosingElementserror)
Files:
apps/www/app/(home)/page.tsx
apps/www/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (apps/www/.cursor/rules/posthog-integration.mdc)
apps/www/**/*.{ts,tsx,js,jsx}: If using TypeScript, use an enum to store feature flag names. If using JavaScript, store feature flag names as strings to an object declared as a constant to simulate an enum. Use UPPERCASE_WITH_UNDERSCORE naming convention for enum/const object members.
If a custom property for a person or event is referenced in two or more files or two or more callsites in the same file, use an enum or const object with UPPERCASE_WITH_UNDERSCORE naming convention, similar to feature flags.
Files:
apps/www/app/(home)/page.tsx
🧠 Learnings (8)
📚 Learning: 2025-11-29T08:00:08.031Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/pnpm.mdc:0-0
Timestamp: 2025-11-29T08:00:08.031Z
Learning: Applies to package.json : Configure only built dependencies (native modules) in `pnpm.onlyBuiltDependencies`, including: biomejs/biome, sentry/cli, swc/core, tailwindcss/oxide, vercel/speed-insights, esbuild, and sharp
Applied to files:
apps/www/package.json
📚 Learning: 2025-11-24T16:04:36.939Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/test-patterns.mdc:0-0
Timestamp: 2025-11-24T16:04:36.939Z
Learning: Applies to tooling/playwright-www/**/*.spec.ts : Test complete user workflows and validate real browser behavior across Chromium, Firefox, and WebKit in end-to-end tests
Applied to files:
tooling/playwright-www/tests/theme-switching.test.ts
📚 Learning: 2025-11-24T16:04:36.939Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/test-patterns.mdc:0-0
Timestamp: 2025-11-24T16:04:36.939Z
Learning: Applies to tooling/playwright-www/**/*.spec.ts : Use Playwright for end-to-end tests
Applied to files:
tooling/playwright-www/tests/theme-switching.test.ts
📚 Learning: 2025-11-29T22:11:39.920Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-29T22:11:39.920Z
Learning: Applies to tooling/playwright-www/**/*.{ts,tsx} : End-to-end tests should be located in `tooling/playwright-www/` and test complete user workflows in real browsers with no mocking
Applied to files:
tooling/playwright-www/tests/theme-switching.test.ts
📚 Learning: 2025-11-24T16:04:36.939Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/test-patterns.mdc:0-0
Timestamp: 2025-11-24T16:04:36.939Z
Learning: Applies to **/*.test.{ts,tsx} : Focus component tests on public API, user behavior, state transitions, and accessibility rather than styling or implementation details
Applied to files:
tooling/playwright-www/tests/theme-switching.test.ts
📚 Learning: 2025-11-29T22:11:39.920Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-29T22:11:39.920Z
Learning: Applies to **/*.test.{ts,tsx} : Test edge cases including invalid and missing environment variable values
Applied to files:
tooling/playwright-www/tests/theme-switching.test.ts
📚 Learning: 2025-11-24T16:04:36.939Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/test-patterns.mdc:0-0
Timestamp: 2025-11-24T16:04:36.939Z
Learning: Applies to **/*.integration.test.{ts,tsx} : Test how multiple units (components, hooks, functions) work together without mocking their interactions in integration tests
Applied to files:
tooling/playwright-www/tests/theme-switching.test.ts
📚 Learning: 2025-11-29T08:57:24.044Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: examples/with-bun-react/.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-11-29T08:57:24.044Z
Learning: Applies to examples/with-bun-react/**/*.test.{ts,tsx,js,jsx} : Use test syntax from `bun:test` with `test` and `expect` functions
Applied to files:
tooling/playwright-www/tests/theme-switching.test.ts
🧬 Code graph analysis (1)
apps/www/app/(home)/page.tsx (4)
apps/www/components/page/sail-button.tsx (1)
SailButton(8-69)apps/www/components/page/star-us-button.tsx (1)
StarUsButton(68-221)apps/www/components/hero-video.tsx (1)
HeroVideo(6-42)apps/www/components/page/video-demo.tsx (1)
VideoDemo(15-62)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: test-e2e (e2e)
- GitHub Check: test-e2e (a11y)
- GitHub Check: test-build (latest)
🔇 Additional comments (2)
apps/www/package.json (1)
38-38: next-themes dependency addition looks appropriate for theme-aware hero/videoPinning
next-themeshere aligns with the new theme-aware HeroVideo and theme tests and keeps builds deterministic. Just double-check the version against your Next/React stack and upstream docs when you upgrade frameworks in the future.tooling/playwright-www/tests/theme-switching.test.ts (1)
66-86: Hydration-mismatch console check is well-scopedAttaching the console listener before navigation and then filtering for known hydration-mismatch signatures gives you a clear signal if SSR/CSR diverge, without overfitting to a single exact error string. This is a solid, low-noise E2E safeguard around the new theme/video setup.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/www/components/hero-video.tsx(1 hunks)openspec/changes/update-hero-videos/proposal.md(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- openspec/changes/update-hero-videos/proposal.md
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)
**/*.{ts,tsx}: Prefertypeoverinterfacefor type definitions in TypeScript
Use TypeScript 5.1+ features when appropriate
Leverageconsttype parameters for better inference in TypeScript
Use JSDoc comments for public APIs
Use tabs for indentation (configured in Biome)
Use double quotes for strings (configured in Biome)
Organize imports automatically (Biome handles this)
Avoid explicit types when TypeScript can infer them (noInferrableTypeserror)
Useas constwhere appropriate for immutable values (useAsConstAssertionerror)
Don't reassign function parameters (noParameterAssignerror)
Place default parameters last in function signatures (useDefaultParameterLasterror)
Always initialize enum values (useEnumInitializerserror)
Declare one variable per statement (useSingleVarDeclaratorerror)
Avoid unnecessary template literals (noUnusedTemplateLiteralerror)
PreferNumber.parseIntover globalparseInt(useNumberNamespaceerror)
Use kebab-case for TypeScript filenames (e.g.,create-env.ts)
Use camelCase for function names (e.g.,createEnv)
Use PascalCase for type names (e.g.,ArkEnvError)
Use UPPER_SNAKE_CASE for environment variables and constants
Include examples in JSDoc comments when helpful for public APIs
Document complex type logic with JSDoc comments
UseArkEnvErrorfor environment variable validation errors
Provide clear, actionable error messages that include the variable name and expected type
**/*.{ts,tsx}: UsecreateEnv(schema)as the main function for validated environment objects, available as the default export
Use built-in validators (host, port, url, email) fromsrc/types.tswhen available instead of custom validation
UseArkEnvErrorfor environment variable errors, not generic errors
Environment schema definitions should use built-in validators, ArkType string literals, and support default values in the schema pattern
Use logical grouping for related environment variables in schemas
Use descriptive env...
Files:
apps/www/components/hero-video.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)
Use self-closing JSX elements (
useSelfClosingElementserror)
Files:
apps/www/components/hero-video.tsx
apps/www/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (apps/www/.cursor/rules/posthog-integration.mdc)
apps/www/**/*.{ts,tsx,js,jsx}: If using TypeScript, use an enum to store feature flag names. If using JavaScript, store feature flag names as strings to an object declared as a constant to simulate an enum. Use UPPERCASE_WITH_UNDERSCORE naming convention for enum/const object members.
If a custom property for a person or event is referenced in two or more files or two or more callsites in the same file, use an enum or const object with UPPERCASE_WITH_UNDERSCORE naming convention, similar to feature flags.
Files:
apps/www/components/hero-video.tsx
**/*.{ts,tsx,json,md}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Biome for linting and formatting instead of ESLint and Prettier
Files:
apps/www/components/hero-video.tsx
🪛 GitHub Actions: autofix.ci
apps/www/components/hero-video.tsx
[error] 20-20: lint/a11y/noAriaHiddenOnFocusable: aria-hidden on a focusable element is not allowed.
[error] 32-32: lint/a11y/noInteractiveElementToNoninteractiveRole: Interactive element assigned non-interactive role.
[warning] 32-42: lint/a11y/noAriaHiddenOnFocusable / noInteractiveElementToNoninteractiveRole: Accessibility issues related to video element usage.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: test-e2e (a11y)
- GitHub Check: test-e2e (e2e)
🔇 Additional comments (1)
apps/www/components/hero-video.tsx (1)
6-12: LGTM: Correct hydration pattern.The mounted state guard correctly prevents hydration mismatches when theme values differ between server and client.
1 participant
Closes #471
Summary by CodeRabbit
New Features
Style
Tests
Documentation
✏️ Tip: You can customize this high-level summary in your review settings.