# refactor\(web\): the add environment dialog owns its form state · PR \#22686 · pingdotgg/t3code

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

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

Visibility: public

State: merged

Source repository: pingdotgg/t3code

Source branch: refactor/settings-split-add-environment-dialog

Target branch: main

Head commit: bd8e39916c28cf06c96f3c22ede04cf5ef08dff5

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

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

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

## Description

---

The add environment dialog's form state (mode, host, pairing code, SSH fields, suggestion popup, submitting flag), SSH host discovery, and submit handlers lived in `ConnectionsSettings`. Every keystroke in the dialog re-rendered the whole connections page. They now live in `AddEnvironmentDialog.tsx`. The page still owns the open flag, the route target, and the shared error, because the environment rows set them too (Add route, toggle and remove errors).

| File | Before | After |
|---|---|---|
| ConnectionsSettings.tsx | 2142 | 1538 |
| AddEnvironmentDialog.tsx | - | 649 |

Renders. Measured with `~/.cache/cvlayers/rc-init.js` (counts only the fibers React rendered) on a dev server seeded by `vp run migrate-dev-db`, driven by agent-browser. Main is `6a6c84f990`; after is the stack top, `1da6ebacee`. Each cell is the median of 3 runs, shown as React commits / component renders.

### This layer

| Interaction | main | after |
|---|---|---|
| open Connections | 8 / 325 | 8 / 326 |
| type 20 chars in Add environment host | 20 / 1880 | 20 / 620 |

Typing drops from 94 renders per keystroke to 31 (-67%). Opening the page costs 1 extra render, for the dialog component.

### Whole stack (#22666 to #22686)

| Interaction | main | after |
|---|---|---|
| open General | 9 / 942 | 9 / 943 |
| toggle a setting (Rich text composer) | 1 / 103 | 1 / 104 |
| background activity dialog open + close | 39 / 441 | 39 / 385 |
| open Connections | 8 / 325 | 8 / 326 |
| type 20 chars in Add environment host | 20 / 1880 | 20 / 620 |


Tests run: `tsc-rs --noEmit` for apps/web, `vp lint` on changed files, `vp test run src/reactCompilerCoverage.test.ts -t settings/` (0 bailouts), `SettingsPanels.logic.test.ts`, `ConnectionsSettings.logic.test.ts`.

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