mirror of
https://github.com/paperclipai/paperclip.git
synced 2026-10-21 16:27:18 +02:00
Vyacheslav ScherbininandClaude Opus 5.5
3b34d45a92
## Thinking Path > - Paperclip is the open source app people use to manage AI agents for work. > - The board UI uses shadcn theme tokens from `ui/src/index.css`. > - Delete and remove dialogs confirm with a red button: `bg-destructive text-destructive-foreground`. > - In the light theme, `--destructive-foreground` has the same value as `--destructive`. The label is red text on a red fill, so it is not visible. > - Operators cannot read the button that deletes data or removes a connection. > - This pull request sets the light `--destructive-foreground` to the near-white value that the dark theme already uses. > - The benefit is that every destructive confirm button shows a readable label in both themes. ## Linked Issues or Issue Description Fixes #14327 I searched open and closed PRs for `destructive-foreground`, "Remove connection" and related terms. I found no PR that changes this token. ## What Changed - `ui/src/index.css`: in `:root`, `--destructive-foreground` changes from `oklch(0.577 0.245 27.325)` (the same as `--destructive`) to `oklch(0.985 0 0)`. This is the value in `.dark`. - Added `ui/src/components/DestructiveThemeTokens.test.ts`. The test converts both tokens from OKLCH to sRGB and computes the WCAG contrast ratio. `:root` must reach 4.5:1 (AA for normal text). `.dark` must reach 3:1, because it keeps the brighter red chosen in the gallery review (about 3.6:1 today). The fix applies to all five buttons that use `text-destructive-foreground`: remove connection (`Browse.tsx`, `Connections.tsx`), delete folder (`FolderControls.tsx`), delete environment (`CompanyEnvironments.tsx`) and remove chat endpoint (`ChatEndpointDetail.tsx`). No other file uses the token. ## Verification - `pnpm exec vitest run src/components/DestructiveThemeTokens.test.ts` in `ui`: 2 tests pass. The light theme contrast is about 4.8:1. - Before the fix, the test fails for `:root` (1:1, red on red). With a light gray foreground `oklch(0.88 0 0)` it also fails (3.3:1 < 4.5:1). - Manual check on a self-hosted instance in the light theme: Apps → connection → **Remove connection** showed a red button with no visible label. After the fix, the label is white and readable. Before and after, light theme (the same classes as the confirm button: `bg-destructive text-destructive-foreground`): <img src="https://gist.githubusercontent.com/gentslava/3aa0d498e2475dd44e12bed11e7d7862/raw/c793570ebd416fe04cc390df8554515b4207590d/remove-connection-before-after.png" alt="Remove connection button before and after the fix" width="520"> ## Risks - Low risk. The change is one token in the light theme. Only the five confirm buttons above read `--destructive-foreground`. ## Model Used - Claude Opus 5.5 (`claude-opus-5-5`) in Claude Code, with tool use (shell, file edits). It found the cause, wrote the fix and the test, and wrote this description. ## 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] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [x] All Paperclip CI gates are green - [x] Greptile is 5/5 with no open P2s, recommendations, or follow-ups - [x] I will address all Greptile and reviewer comments before requesting merge @cryppadotta @devinfoley a tiny one-line theme fix: the delete buttons in the light theme are red-on-red right now, so people can't see what they are about to click. Would be great to get it in when you have a minute 🙏 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
@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.
Editor dependency identity
Keep the root and workspace overrides for @codemirror/state,
@codemirror/view, and @lezer/common aligned. CodeMirror requires shared
extension identity, while Lezer parsers and syntax highlighters require shared
NodeProp IDs. Multiple Lezer copies can crash code-block highlighting with
tags is not iterable. src/lib/codemirror-single-instance.test.ts checks the
installed dependency graph and highlights sample code through the editor's real
language dependencies. GitHub Actions owns regeneration of pnpm-lock.yaml.