refactor(web): PR loading skeleton shares the detail panel's layout

[flamboh]

Note

🤖 Claude Opus 5.5 on behalf of Oliver

Important

Stacked on #15564. Merge that first. This PR's own change is the top commit, cf4ee0b.

Problem

PullRequestDetailGhost was a hand-written copy of the detail panel's header and tab bar. A layout fix to the panel didn't reach the skeleton unless someone remembered the second copy. That's how #14700 collapsed the checks status in the panel but left the skeleton wrapping, which #15564 fixes by hand.

Fix

The layout both of them need now lives in PullRequestDetailLayout.tsx, and the panel and the skeleton both render it. The skeleton only passes placeholders into the slots:

• PullRequestDetailHeaderBody: the title, author, and branch rows, with slots for each value.
• PullRequestDetailTitleRow: the title row. The panel adds its edit affordance through className.
• PullRequestDetailTabBar: the nav and segmented tabs, plus the trailing slot. The panel's prefetch-on-hover for Code becomes onTabIntent.
• PullRequestChecksStatusLine: the clipped 16px row where the label wraps out of view and leaves its icon.

A future layout fix to any of these reaches the skeleton without anyone having to remember it. GhostBar is now a block span, so a placeholder can sit inside these phrasing-content slots.

Not shared yet: the compact top bar, which has a condensed mode and a crossfade the skeleton doesn't have, and the Summary body below the tabs.

Before / after

The loaded panel is pixel-identical to main at 600px and 1400px. Its header and tab bar render the same markup through the shared components.

The skeleton at a 600px window, before this stack:

The skeleton with the shared layout, next to the loaded panel:

Validation

• Measured in headless Chromium against flamboh/t3-pr-ui-sandbox PRs with passing and failing checks, at 600px and 1400px. The skeleton's tab bar has the same position and height as the loaded panel's in every case. The loaded panel's header screenshots match main byte for byte.
• vp test run src/components/pullRequest/: 21 files, 460 tests pass. apps/web typecheck and lint on the changed files are clean.

Made with Claude Opus 5.5 in Claude Code (via T3 Code).

[macroscopeapp]

Approvability

Verdict: Approved at 9282f15

Macroscope's review found this PR approvable — This is a focused pull-request UI refactor that centralizes existing header and tab-bar markup while making the loading skeleton align with the detail panel. Runtime effects are limited to presentation and loading geometry, with no new workflow, data contract, or sensitive-system behavior.

^{You can add or adjust custom eligibility rules. Learn more.}

[coderabbitai]

Important

Review skipped

We couldn't safely recover the incremental review. No full review was started, and the last reviewed checkpoint was preserved. Retry later, or explicitly request a full review by commenting @coderabbitai full review.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Repository: pingdotgg/t3code/.coderabbit.yaml
• Review profile: CHILL
• Plan: Advanced
• Run ID: aa798131-47a7-43f8-9f8c-34bb7a541154

📥 Commits

Reviewing files that changed from the base of the PR and between eac52f0 and cf4ee0b.

📒 Files selected for processing (3)

• apps/web/src/components/pullRequest/PullRequestDetailLayout.tsx
• apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
• apps/web/src/components/pullRequest/PullRequestGhosts.tsx

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

📝 Walkthrough

Walkthrough

The pull request adds shared components for pull-request detail headers, title rows, tabs, and checks status. The detail panel and its loading placeholder now use these components in place of locally composed layouts.

Changes

Pull request detail layout

Layer / File(s)	Summary
Shared detail components apps/web/src/components/pullRequest/PullRequestDetailLayout.tsx	Adds components for header content, title-row layout, tab selection and intent callbacks, and checks-status display.
Detail panel integration apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx	Uses the shared components for title and metadata, branch information, tabs, and checks status. Existing title editing, branch actions, tab selection, and Code-tab loading on intent remain wired in the panel.
Loading placeholder integration apps/web/src/components/pullRequest/PullRequestGhosts.tsx	Uses the shared header, title row, tab bar, and checks-status components. GhostBar now renders a span instead of a div.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~12 minutes

Change: Refactor

Suggested reviewers: juliusmarminge

Merge Risk: ⚪ Minimal · up to cf4ee

No actionable layout or interaction issue remains identified; the change is mergeable after normal checks.

Security Architecture Review

Security architecture risk: ⚪ Minimal · up to cf4ee

The shared components consolidate layout without gaining repository or mutation authority. Tab selection, lazy loading, and sensitive actions remain owned by the existing detail panel. No introduced or worsened security risk was identified in this change.

Retained concerns
No architecture-level concerns identified.

Security review details

Security Blast Radius

• inferred — The changed reachability is confined to presentation composition in the loaded panel and its placeholder. Inspected delegation preserves existing environment and pull-request identity sources rather than granting new cross-repository authority.

Trust Boundaries and Controls

• observed — PR-derived content remains supplied through React slots and existing rendering components. The shared layout adds no raw-HTML or command-execution sink. Sensitive controls retain their original panel handlers and guards; loading tabs receive no mutation callbacks and remain inert.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 14.29% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 7 functions across 3 files.	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 clearly and concisely describes the main change: sharing the pull-request detail panel layout with its loading skeleton.
Description check	✅ Passed	The description explains the problem and change, includes before-and-after screenshots, and reports focused test, typecheck, lint, and visual validation results. It does not include a Scope and approv…
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.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

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

Dismissing prior approval to re-evaluate 9282f15