feat: tree aside when browsing repo - #11
Conversation
|
Warning Review limit reached
More reviews will be available in 41 minutes and 38 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughThis PR adds recursive directory tree listing to Catena's repository browser. The backend implements git-level streaming with configurable entry/byte limits and timeout protection. The frontend introduces a new file-tree browsing UI with a split-pane layout, integrating server-side tree fetching with client-side navigation. Dependencies are updated throughout. ChangesRecursive tree listing feature
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 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 |
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
|
All alerts resolved. Learn more about Socket for GitHub. This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored. Ignoring alerts on:
|
|
@SocketSecurity ignore npm/happy-dom@20.10.2 I am not particularly concerned as they are both open source - the happy-dom package is not obfuscated, but DOES include a weird certificate that hasn't been edited in 3 years (surely if it was a problem it would've been reported by now). Not sure why thats in there but I don't think this is a risk. And clerk is being clerk |
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
web/package.json (1)
17-68:⚠️ Potential issue | 🟡 MinorConfirm Next.js 16.2.7 + React 19.2.7 compatibility for the stack
- Next.js 16.2.7 works with React 19.2.x for the App Router (16.2.7 itself is a backport bug-fix release).
@clerk/nextjs7.4.3 lists peer support for React 18/19 and Next.js 15.2.8+, so React 19.2.7 on Next.js 16.2.7 should satisfy it.@pierre/trees1.0.0-beta.4 peer deps include React ^19.0.0, so the React 19 upgrade matches.- Radix: I can’t find authoritative npm metadata for a “radix-ui 1.5.0” package, so the safe move is to inspect the peerDependencies of the exact
@radix-ui/*packages you’re actually using (themes/primitives/icons) to avoid peer-warning surprises.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@web/package.json` around lines 17 - 68, Confirm the Next/React compatibility by verifying the package.json entries "next": "^16.2.7" and "react"/"react-dom": "19.2.7" are intentional, then explicitly check peerDependencies for "`@clerk/nextjs`", "`@pierre/trees`" and each actual Radix package you use (replace the ambiguous "radix-ui": "^1.5.0" with the real `@radix-ui/`* package names you import) to ensure no peer warnings; if any peer dep mismatches appear, pin or upgrade the offending package versions (or add resolutions) to match React 19 and Next 16, and update package.json accordingly.
🧹 Nitpick comments (1)
web/src/app/globals.css (1)
207-220: 💤 Low valueConsider using design tokens for consistency.
The theme colours are hardcoded (e.g.,
#4c4f69,#f1f3f3) rather than referencing the existing design tokens from:root(e.g.,var(--card-foreground),var(--muted)). Whilst this might be required by the@pierre/treestheming API, using design tokens would make future theme changes easier and ensure visual consistency across the application.If the library allows, consider mapping these to existing tokens. For example:
--trees-theme-sidebar-fg: var(--card-foreground)instead of#4c4f69--trees-theme-list-hover-bg: var(--muted)instead ofrgba(0, 0, 0, 0.06)🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@web/src/app/globals.css` around lines 207 - 220, The CSS file defines tree-theme variables using hardcoded colors; replace those hardcoded values with existing design tokens so themes stay consistent (e.g., change --trees-theme-sidebar-fg, --trees-theme-sidebar-header-fg, --trees-theme-list-active-selection-fg from literal `#4c4f69` to the appropriate token like var(--card-foreground); swap --trees-theme-list-hover-bg and --trees-theme-input-bg from rgba/hex to var(--muted) or var(--muted-foreground) as appropriate; use var(--card) for --trees-theme-sidebar-bg and var(--card-foreground)/var(--muted) for borders/inputs/scrollbar/thumb / git colors if you have semantic tokens for success/warning/error, map --trees-theme-git-added-fg, --trees-theme-git-modified-fg, --trees-theme-git-deleted-fg to those tokens; ensure each replacement uses the correct token name from :root so the `@pierre/trees` theming API receives token values instead of raw hex.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@internal/pkg/git/git.go`:
- Around line 219-224: The off-by-one in the ls-tree entry collection allows one
extra entry because the check uses len(entries) > maxEntries; change the
condition to len(entries) >= maxEntries to enforce the exact limit. Update the
check located where entries are appended (the entries slice handling in the
ls-tree reader), so that after appending an entry you call cancel(), wait on
cmd.Wait(), and return ErrLsTreeLimitExceeded when len(entries) >= maxEntries
(referencing entries, maxEntries, cancel(), cmd.Wait(), ErrLsTreeLimitExceeded).
In `@web/src/components/views/RepositoryFileTree/index.tsx`:
- Around line 48-56: The current logic computes initialExpandedPaths from path
segments but when isTree is true it pushes only lastSeg (the final segment)
which is incorrect for directory selections; change the behavior so that when
isTree && lastSeg you push the full path (the original path string) into
initialExpandedPaths (or the normalized directory path) instead of lastSeg;
update the code around initialExpandedPaths, path, isTree, and lastSeg to append
the full path so the tree expands correctly.
- Line 28: Remove the leftover debug console.log by deleting the
console.log(path) call inside the RepositoryFileTree component (where the
variable/path is used), ensuring no other behavior is changed; search for the
exact console.log(path) statement in the RepositoryFileTree component (or its
useEffect/handler) and remove that line so the component no longer prints to
stdout before committing.
In `@web/src/components/views/RepositorySubTree.tsx`:
- Around line 19-24: RepositoryFileList is an async server component that awaits
serverGetRepositoryTree and is currently rendered directly in RepositorySubTree,
which blocks streaming of RepositoryReadme; wrap the <RepositoryFileList ... />
usage in RepositorySubTree with a React <Suspense fallback={null}> (matching
RepositoryHomepage) so RepositoryFileList is suspended independently — locate
the RepositorySubTree render where RepositoryFileList is used and wrap that
element in Suspense, keeping the same props (ownerName, repoName, currentRef,
path).
---
Outside diff comments:
In `@web/package.json`:
- Around line 17-68: Confirm the Next/React compatibility by verifying the
package.json entries "next": "^16.2.7" and "react"/"react-dom": "19.2.7" are
intentional, then explicitly check peerDependencies for "`@clerk/nextjs`",
"`@pierre/trees`" and each actual Radix package you use (replace the ambiguous
"radix-ui": "^1.5.0" with the real `@radix-ui/`* package names you import) to
ensure no peer warnings; if any peer dep mismatches appear, pin or upgrade the
offending package versions (or add resolutions) to match React 19 and Next 16,
and update package.json accordingly.
---
Nitpick comments:
In `@web/src/app/globals.css`:
- Around line 207-220: The CSS file defines tree-theme variables using hardcoded
colors; replace those hardcoded values with existing design tokens so themes
stay consistent (e.g., change --trees-theme-sidebar-fg,
--trees-theme-sidebar-header-fg, --trees-theme-list-active-selection-fg from
literal `#4c4f69` to the appropriate token like var(--card-foreground); swap
--trees-theme-list-hover-bg and --trees-theme-input-bg from rgba/hex to
var(--muted) or var(--muted-foreground) as appropriate; use var(--card) for
--trees-theme-sidebar-bg and var(--card-foreground)/var(--muted) for
borders/inputs/scrollbar/thumb / git colors if you have semantic tokens for
success/warning/error, map --trees-theme-git-added-fg,
--trees-theme-git-modified-fg, --trees-theme-git-deleted-fg to those tokens;
ensure each replacement uses the correct token name from :root so the
`@pierre/trees` theming API receives token values instead of raw hex.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 25033581-37a9-4775-a8ba-b515a0df941f
⛔ Files ignored due to path filters (4)
bun.lockis excluded by!**/*.lockgo.sumis excluded by!**/*.suminternal/app/api/api.gen.gois excluded by!**/*.gen.goweb/types/api.d.tsis excluded by!**/*.d.ts
📒 Files selected for processing (20)
README.mdapi/api.v1.openapi.yamlgo.modinternal/app/api/repositories.gointernal/app/api/repositories_test.gointernal/pkg/environment/config.gointernal/pkg/git/git.gointernal/pkg/gitstore/gitstore.gointernal/pkg/gitstore/gitstore_test.gopackage.jsonweb/package.jsonweb/src/app/(site)/[ownerName]/[repoName]/browse/[...path]/page.tsxweb/src/app/globals.cssweb/src/components/ShikiCodeBlock.tsxweb/src/components/views/RepositoryBrowseView.tsxweb/src/components/views/RepositoryFileTree/index.tsxweb/src/components/views/RepositoryFileTree/inner.tsxweb/src/components/views/RepositoryHomepage/RepositoryFileList.tsxweb/src/components/views/RepositorySubTree.tsxweb/src/lib/server/repository.ts
What this changes
How I tested this
Notes
Checklist