[AGE-3766] feat(frontend): Make collapse headers sticky in PrettyJsonView

[Sanket2329]

Context

When scrolling through large JSON objects in the trace span detail view (PrettyJsonView), the collapsible headers and context actions (such as copying or collapsing parent sections) would scroll out of the viewport. This made it difficult to keep track of the current path and perform collapse/copy operations on parent levels.

Changes

• Modified PrettyJsonView.tsx to pass a depth property down the JSON tree rendering nodes.
• Updated NodeRow to accept depth and dynamically set style={{top: ${depth * 28}px }} for sticky header positioning, using a precise row height of 28px (h-[28px] min-h-[28px] py-0.5).
• Centered the CopyButton vertically inside the fixed-height row using self-center.
• Removed intermediate overflow-hidden and overflow-y-auto style properties from wrapper elements in TraceSpanDrillInView.tsx that previously broke the CSS sticky positioning context.

Tests / notes

• Ran pnpm lint-fix within the web folder to ensure all TypeScript and React code formatting and rules pass successfully.

[CLAassistant]

All committers have signed the CLA.

[vercel]

@Sanket2329 is attempting to deploy a commit to the agenta projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 14834bc7-0c72-4efe-9407-3a193def27e9

📥 Commits

Reviewing files that changed from the base of the PR and between 6d279c4 and a469ce9.

📒 Files selected for processing (2)

• web/oss/src/components/DrillInView/PrettyJsonView.tsx
• web/oss/src/components/DrillInView/TraceSpanDrillInView.tsx

🚧 Files skipped from review as they are similar to previous changes (2)

• web/oss/src/components/DrillInView/TraceSpanDrillInView.tsx
• web/oss/src/components/DrillInView/PrettyJsonView.tsx

---

📝 Walkthrough

Summary by CodeRabbit

• Bug Fixes

  • Improved alignment and sticky positioning of nested JSON/chat rows so collapsible offsets align with nesting.
  • Ensured nested message/thread rendering maintains correct stacking and spacing.

• Style

  • Removed always-visible border from copy buttons so borders appear only on hover/focus.
  • Simplified overflow handling in the trace drill-in view by removing unnecessary wrappers.

Walkthrough

This PR threads a numeric depth through PrettyJsonView row components so collapsible sticky rows compute inline top: depth * ROW_HEIGHT_PX, and removes overflow wrapper/hidden classes in TraceSpanDrillInView so the new depth-based layout renders correctly.

Changes

JSON View Depth-Based Layout

Layer / File(s)	Summary
NodeRow constants, depth prop, and CopyButton web/oss/src/components/DrillInView/PrettyJsonView.tsx	Introduce row-height constants and optional depth prop on NodeRow; collapsible rows set style.top from depth * ROW_HEIGHT_PX. CopyButton no longer applies an always-on border class.
MessageNodeRow depth prop and propagation web/oss/src/components/DrillInView/PrettyJsonView.tsx	MessageNodeRow accepts an optional depth prop and passes depth + 1 into nested RecursiveNode invocations; wrapper NodeRow is called with depth={depth}.
RecursiveNode chat rendering depth wiring web/oss/src/components/DrillInView/PrettyJsonView.tsx	Both chat branches thread depth into the outer NodeRow; mapped message children use depth + 1, and the viaKey branch uses depth + 1 for the key row and depth + 2 for message children.
RecursiveNode non-chat value depth forwarding web/oss/src/components/DrillInView/PrettyJsonView.tsx	All non-chat rendering paths (short leaves, strings, depth-limited objects, containers, fallback) forward depth into NodeRow so sticky offsets are consistent across the tree.
TraceSpanDrillInView overflow cleanup and typing fix web/oss/src/components/DrillInView/TraceSpanDrillInView.tsx	Removed overflow-hidden from root and wrapper elements and removed the overflow-y-auto wrapper around PrettyJsonView; corrected the entityWithDrillIn drill-in typing to use traceSpanMolecule.

---

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Agenta-AI/agenta#4343: Related refactor that consolidated recursive row-tree primitives in a sibling Pretty/Beautified JSON view, sharing similar depth/sticky layout concerns.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main objective of the PR: making collapse headers sticky in PrettyJsonView, which aligns with the primary changes shown in the summary.
Description check	✅ Passed	The description is directly related to the changeset, clearly explaining the problem, changes made, and testing performed across both modified files.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

web/oss/src/components/DrillInView/TraceSpanDrillInView.tsx (1)

656-658: ⚠️ Potential issue | 🔴 Critical | ⚡ Quick win

Fix broken entity type assertion identifiers (build blocker).

Line 656 references traceSpan (undefined), and Line 657 references traceSpanMoleculeMolecule (typo/undefined). This won’t type-check/compile.

💡 Proposed fix

-        const entityWithDrillIn = traceSpan as typeof traceSpanMolecule & {
-            drillIn: NonNullable<typeof traceSpanMoleculeMolecule.drillIn>
+        const entityWithDrillIn = traceSpanMolecule as typeof traceSpanMolecule & {
+            drillIn: NonNullable<typeof traceSpanMolecule.drillIn>
         }

🧹 Nitpick comments (1)

web/oss/src/components/DrillInView/PrettyJsonView.tsx (1)

597-599: ⚡ Quick win

Extract row height into a shared constant to prevent sticky-offset drift.

Line 597 hardcodes h-[28px]/min-h-[28px] while Line 598 separately hardcodes depth * 28. A future style tweak can silently break sticky alignment.

Proposed refactor

+const ROW_HEIGHT_PX = 28
+const ROW_HEIGHT_CLASS = "min-h-[28px] h-[28px]"
+
 const NodeRow = memo(function NodeRow({
 ...
-                className={`group/row flex items-baseline gap-2 py-0.5 px-1 rounded-sm min-h-[28px] h-[28px] select-none ${collapsible ? "cursor-pointer sticky z-[1] bg-[var(--ant-color-bg-container)]" : ""} hover:bg-[var(--ant-color-fill-quaternary)] focus-visible:ring-1 focus-visible:ring-[var(--ant-color-primary)] focus-visible:outline-none`}
-                style={collapsible ? {top: `${depth * 28}px`} : undefined}
+                className={`group/row flex items-baseline gap-2 py-0.5 px-1 rounded-sm ${ROW_HEIGHT_CLASS} select-none ${collapsible ? "cursor-pointer sticky z-[1] bg-[var(--ant-color-bg-container)]" : ""} hover:bg-[var(--ant-color-fill-quaternary)] focus-visible:ring-1 focus-visible:ring-[var(--ant-color-primary)] focus-visible:outline-none`}
+                style={collapsible ? {top: `${depth * ROW_HEIGHT_PX}px`} : undefined}

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 93db98ae-a23f-4ca8-ac70-ef47d727c0be

📥 Commits

Reviewing files that changed from the base of the PR and between 98b8a9d and 6d279c4.

📒 Files selected for processing (2)

• web/oss/src/components/DrillInView/PrettyJsonView.tsx
• web/oss/src/components/DrillInView/TraceSpanDrillInView.tsx