# refactor\(web\): ChatView's right panel lives in its own component · PR \#22700 · pingdotgg/t3code

[View on GitCafe](https://git.cafe/pingdotgg/t3code/pull/22700)

Repository: [pingdotgg/t3code](https://git.cafe/pingdotgg/t3code)

Visibility: public

State: merged

Source repository: pingdotgg/t3code

Source branch: refactor/chatview-right-panel

Target branch: refactor/chatview-terminal-drawers

Head commit: 9c5f157e3dec5256e9ed593a68c129b41db0ba44

[Discussion and reviews](https://git.cafe/pingdotgg/t3code/pull/22700)

[Commits](https://git.cafe/pingdotgg/t3code/pull/22700/commits?format=markdown)

[Files changed](https://git.cafe/pingdotgg/t3code/pull/22700/diffs?format=markdown)

## Description

---

ChatView wrote out the right panel's ~45-prop `RightPanelTabs` list twice, once for the inline layout and once for the sheet. It also owned the panel's width state, so the commit at the end of every resize drag re-rendered ChatView and the whole chat column.

`chat/ChatRightPanel.tsx` renders the inline or sheet layout from one prop list and owns `usePreviewPanelInlineSize`. `RightPanelTabsProps` is now exported so the wrapper can reuse it.

| | previous layer | this layer |
|---|---|---|
| ChatView.tsx lines | 8,531 | 8,477 |
| Renders when a right-panel resize drag ends | 139 (ChatView 1) | 1 (ChatRightPanel only) |

Renders were counted with the `rc-init.js` fiber counter on a dev server seeded from real data (median of 3 runs; base [6a6c84f](https://github.com/pingdotgg/t3code/commit/6a6c84f990) vs the stack top before its rebase onto current main):

| Interaction | main: commits / renders (ChatView) | stack top: commits / renders (ChatView) |
|---|---|---|
| Type 20 chars in the composer | 22 / 678 (1) | 22 / 678 (1) |
| Switch threads | 14 / 779 (5) | 14 / 777 (5) |
| Open + close the terminal drawer | 15 / 494 (3) | 15 / 497 (3) |
| Open + close the right panel | 21 / 723 (4) | 21 / 726 (4) |
| Drag the right panel's resize handle | 13 / 139 (1) | 1 / 1 (0) |

The +3 renders are the new `ChatTerminalDrawers` and `ChatRightPanel` wrappers. The drag row is the [right panel layer](https://github.com/pingdotgg/t3code/pull/22700): the drag's final width commit used to re-render ChatView and the whole chat column, and now re-renders only `ChatRightPanel`.

Tests: `vp test run src/reactCompilerCoverage.test.ts` for ChatView and every new file (0 bailouts), `vp test run src/components/RightPanelTabs.test.tsx`, `tsc-rs --noEmit` for apps/web, and oxlint on the changed files.

🤖 Generated with [Claude Code](https://claude.com/claude-code)