Devin Foley
e9931f116a
## Thinking Path > - Paperclip is the open source control plane people use to manage AI agents and the work they do. > - This change lives in the board UI, specifically the instance environments settings page where operators define reusable execution targets. > - That page currently rendered the create/edit environment form inline near the bottom of the screen. > - Because the form appeared away from the action that triggered it, it was easy to miss and felt inconsistent with the rest of the UI. > - This pull request moves environment creation and editing into a proper centered dialog with the existing form behavior preserved. > - The benefit is a more obvious, consistent, and easier-to-complete settings flow for environment management. ## Linked Issues or Issue Description No public GitHub issue matched this exact UI problem when I searched related issues and PRs. ### Pre-submission checklist - [x] I have searched existing open and closed issues and this is not a duplicate. - [x] I am on the latest released version of Paperclip (or can reproduce on `master`). - [x] I have confirmed the issue originates in Paperclip itself, not adapter or local configuration. ### What happened? On `Settings -> Instance settings -> Environments`, clicking create or edit revealed the environment form inline near the bottom of the page. Because the form appeared away from the action that triggered it, it was easy to miss. ### Expected behavior Create and edit should open a centered modal dialog with a dimmed backdrop and the same form controls. ### Steps to reproduce 1. Open `Settings -> Instance settings -> Environments`. 2. Click the create or edit action for an environment. 3. Observe that the form expands inline on the page instead of opening in a modal. ### Paperclip version or commit Observed on current `master` before this PR, for example [`e93d78b46`](https://github.com/paperclipai/paperclip/commit/e93d78b46). ### Deployment mode Local dev (`pnpm dev`). ### Installation method Built from source (`pnpm dev` / `pnpm build`). ### Agent adapter(s) involved - [x] Not adapter-specific (core bug) ### Database mode Embedded PGlite (default, `DATABASE_URL` unset). ### Access context Board (human operator). ### Node.js version Node.js 25.6.1 in the local contributor environment. ### Operating system macOS local development environment. ### Relevant logs or output None. This was a visible UI behavior issue rather than a logged server/runtime error. ### Relevant config (if applicable) Not config-related. ### Additional context Related PR/search context checked before opening this fix. UI preview screenshots are attached below. ### Privacy checklist - [x] I have reviewed all pasted output for PII and redacted where necessary. ## What Changed - Moved the environment create/edit form in `ui/src/pages/CompanyEnvironments.tsx` into a shared dialog. - Added an explicit `Add environment` action near the saved environments list and wired row edit actions to open the same dialog in prefilled mode. - Preserved existing save/test behavior while resetting dialog-local mutation state when the modal opens or closes. - Extended `ui/src/pages/CompanyEnvironments.test.tsx` to cover add-open/cancel and edit-open/save dialog flows. - Updated `ui/src/pages/CompanySettings.test.tsx` so the existing environments coverage opens and inspects the dialog through the Radix portal. ## Verification - `node node_modules/vitest/vitest.mjs run ui/src/pages/CompanyEnvironments.test.tsx` - `node node_modules/vitest/vitest.mjs run ui/src/pages/CompanySettings.test.tsx` - Manual review: - Open `Settings -> Instance settings -> Environments` - Click `Add environment` and confirm the form opens in a centered dialog - Click `Edit` on an existing environment and confirm the dialog opens with existing values - Confirm `Cancel`, `Test`, and save actions still behave as expected - Before/after screenshots: - [Cancel environment creation/edit](https://artifacts.cutter.sh/8391/run-1175b5c-2026-06-20T18-47-11/preview/clip-01.mp4) - [Add a new environment](https://artifacts.cutter.sh/8391/run-1175b5c-2026-06-20T18-47-11/preview/change-02.png) - [Save an environment](https://artifacts.cutter.sh/8391/run-1175b5c-2026-06-20T18-47-11/preview/change-03.png) ## Risks - Low risk overall because the change is contained to the environments page and keeps the existing form fields and mutations. - The main behavior change is modal layout, so the biggest risk is regressions in tall-form scrolling or smaller-screen dialog ergonomics. > I checked [`ROADMAP.md`](ROADMAP.md). This is a tightly scoped UI polish fix, not duplicate roadmap-level core feature work. ## Model Used - OpenAI GPT-5.4 via the `codex_local` Paperclip adapter - High reasoning mode with tool use, shell execution, git operations, and targeted test execution - Model-assisted authoring and verification of the UI and test changes ## Checklist - [x] I have included a thinking path that traces from project context to this change - [x] I have specified the model used (with version and capability details) - [x] I have checked ROADMAP.md and confirmed this PR does not duplicate planned core work - [x] I have searched GitHub for duplicate or related PRs and linked them above - [x] I have either (a) linked existing issues with `Fixes: #` / `Closes #` / `Refs #` OR (b) described the issue in-PR following the relevant issue template - [x] I have not referenced internal/instance-local Paperclip issues or links (only public GitHub `#NNN` / `github.com/paperclipai/paperclip` URLs) - [x] My branch name describes the change (e.g. `docs/...`, `fix/...`) and contains no internal Paperclip ticket id or instance-derived details - [x] I have run tests locally and they pass - [x] I have added or updated tests where applicable - [x] If this change affects the UI, I have included before/after screenshots - [ ] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [ ] All Paperclip CI gates are green - [ ] Greptile is 5/5 with no open P2s, recommendations, or follow-ups - [x] I will address all Greptile and reviewer comments before requesting merge --------- Co-authored-by: Paperclip <noreply@paperclip.ing>
@paperclipai/ui
Published static assets for the Paperclip board UI.
What gets published
The npm package contains the production build under dist/. It does not ship the UI source tree or workspace-only dependencies.
Storybook
Storybook config, stories, and fixtures live under ui/storybook/.
pnpm --filter @paperclipai/ui storybook
pnpm --filter @paperclipai/ui build-storybook
Typical use
Install the package, then serve or copy the built files from node_modules/@paperclipai/ui/dist.