Skip to content

feat: tree aside when browsing repo - #11

Merged
Floffah merged 2 commits into
mainfrom
feature/browse-tree-aside
Jun 8, 2026
Merged

feat: tree aside when browsing repo#11
Floffah merged 2 commits into
mainfrom
feature/browse-tree-aside

Conversation

@Floffah

@Floffah Floffah commented Jun 8, 2026

Copy link
Copy Markdown
Owner

What this changes

  • Adds a file tree to the left side
  • Adds a recursive option to the git tree endpoint

How I tested this

  • Unit tests

Notes

  • UX is currently not ideal for the tree. The pierre computer tree component seems to lack some basic customisation & control functionality, or maybe its not the best solution for this kind of file tree. I will keep it in for now but probably will eventually roll my own or piggy back off shadcn/radix components. There are issues open related to my frustrations

Checklist

  • I have read CONTRIBUTING.md and this PR follows the guidelines
  • A human has reviewed the entire diff of this PR, every line of code
  • A human understands the changes and can explain why this approach is correct
  • Tests pass
  • This PR doesn't have AI-generated boilerplate or co-author lines
  • This PR was authored and submitted by an AI agent without human review

@coderabbitai

coderabbitai Bot commented Jun 8, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@Floffah, we couldn't start this review because you've reached your PR review rate limit.

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 @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

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 configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: f1193e90-40c0-491c-b6a4-c47bfdcb660b

📥 Commits

Reviewing files that changed from the base of the PR and between 0a957f2 and 63f8c5f.

📒 Files selected for processing (3)
  • internal/pkg/git/git.go
  • internal/pkg/gitstore/gitstore_test.go
  • web/src/components/views/RepositoryFileTree/index.tsx
📝 Walkthrough

Walkthrough

This 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.

Changes

Recursive tree listing feature

Layer / File(s) Summary
API contract: recursive parameter and 413 response
README.md, api/api.v1.openapi.yaml
OpenAPI spec declares recursive query parameter for tree endpoint and 413 PayloadTooLarge response. README documents Catena's positioning and updates footnote references.
Configuration and low-level git operations
internal/pkg/environment/config.go, internal/pkg/git/git.go, internal/pkg/gitstore/gitstore.go
Environment config adds tree-limit tuning (max entries, max bytes, timeout). Git.LsTreeRecursive streams and enforces byte/entry limits with context cancellation. Gitstore gains TreeLimits, ErrTreeTooLarge, and updated GetTree(recursive bool) signature.
API handler: recursive parameter and error handling
internal/app/api/repositories.go
Handler extracts recursive parameter and passes to gitstore.GetTree. Returns HTTP 413 when ErrTreeTooLarge is encountered.
Backend testing: tree operations and limits
internal/app/api/repositories_test.go, internal/pkg/gitstore/gitstore_test.go, go.mod
New TestGetRepositoryTree verifies recursive/non-recursive paths, limit-exceeded HTTP 413 responses, and that non-recursive bypasses limits. Gitstore tests add recursion flags and timeout assertions. Go module dependencies updated (pgx v5.10.0, sonic v1.15.2, quic-go v0.60.0; pgxmock indirect comment removed).
Frontend server function: recursive parameter wiring
web/src/lib/server/repository.ts
serverGetRepositoryTree adds optional recursive parameter (default false) passed through to API query parameters.
Frontend UI: RepositoryBrowseView and file-tree components
web/src/app/(site)/[...path]/page.tsx, web/src/components/views/RepositoryBrowseView.tsx, web/src/components/views/RepositoryFileTree/index.tsx, web/src/components/views/RepositoryFileTree/inner.tsx, web/src/components/views/RepositoryHomepage/RepositoryFileList.tsx, web/src/components/views/RepositorySubTree.tsx
New RepositoryBrowseView orchestrates two-column layout with Suspense-bounded file tree (left) and conditional subtree/file viewer (right). RepositoryFileTree fetches non-recursive tree and computes initial expansion. RepositoryFileTreeInner wires @pierre/trees with router navigation. Page route simplified to use browse view.
Frontend styling, optimisation and dependency updates
web/src/app/globals.css, web/src/components/ShikiCodeBlock.tsx, package.json, web/package.json
CSS component file-tree-container added with light/dark theme tokens. ShikiCodeBlock refactored to initialise highlighter once at module load. Web and root package dependencies updated to latest versions (Clerk, TanStack React Query, Next.js, TypeScript, Tailwind).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title 'feat: tree aside when browsing repo' clearly describes the main change: adding a file tree UI to the side of the repository browsing interface.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description check ✅ Passed The PR description covers the main changes, testing approach, and checklist items, but lacks detail on implementation specifics and architectural decisions.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature/browse-tree-aside

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@socket-security

socket-security Bot commented Jun 8, 2026

Copy link
Copy Markdown

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:

  • npm/@clerk/ui@1.15.0
  • npm/happy-dom@20.10.2

View full report

@Floffah

Floffah commented Jun 8, 2026

Copy link
Copy Markdown
Owner Author

@SocketSecurity ignore npm/happy-dom@20.10.2
@SocketSecurity ignore npm/@clerk/ui@1.15.0

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

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 | 🟡 Minor

Confirm 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/nextjs 7.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/trees 1.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 value

Consider 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/trees theming 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 of rgba(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

📥 Commits

Reviewing files that changed from the base of the PR and between 7ef150a and 0a957f2.

⛔ Files ignored due to path filters (4)
  • bun.lock is excluded by !**/*.lock
  • go.sum is excluded by !**/*.sum
  • internal/app/api/api.gen.go is excluded by !**/*.gen.go
  • web/types/api.d.ts is excluded by !**/*.d.ts
📒 Files selected for processing (20)
  • README.md
  • api/api.v1.openapi.yaml
  • go.mod
  • internal/app/api/repositories.go
  • internal/app/api/repositories_test.go
  • internal/pkg/environment/config.go
  • internal/pkg/git/git.go
  • internal/pkg/gitstore/gitstore.go
  • internal/pkg/gitstore/gitstore_test.go
  • package.json
  • web/package.json
  • web/src/app/(site)/[ownerName]/[repoName]/browse/[...path]/page.tsx
  • web/src/app/globals.css
  • web/src/components/ShikiCodeBlock.tsx
  • web/src/components/views/RepositoryBrowseView.tsx
  • web/src/components/views/RepositoryFileTree/index.tsx
  • web/src/components/views/RepositoryFileTree/inner.tsx
  • web/src/components/views/RepositoryHomepage/RepositoryFileList.tsx
  • web/src/components/views/RepositorySubTree.tsx
  • web/src/lib/server/repository.ts

Comment thread internal/pkg/git/git.go Outdated
Comment thread web/src/components/views/RepositoryFileTree/index.tsx Outdated
Comment thread web/src/components/views/RepositoryFileTree/index.tsx
Comment thread web/src/components/views/RepositorySubTree.tsx Outdated
@Floffah
Floffah merged commit 6005130 into main Jun 8, 2026
6 checks passed
@Floffah
Floffah deleted the feature/browse-tree-aside branch June 8, 2026 14:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant