mirror of
https://github.com/paperclipai/paperclip.git
synced 2026-10-30 21:49:18 +01:00
71e7799bc1d77efb4a7f114b99a3a14a9c1dfd50
12
Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
|
c07e650cd7 |
feat(ui): single-source design tokens, visual regression suite, and theme retune (#9134)
## Thinking Path > - Paperclip is the open source app people use to manage AI agents for work > - Its UI is the operator's daily surface: task lists, boards, budgets, agent status — all built on shadcn components and Tailwind > - Visual values (colors, spacing, type sizes, radii) were hardcoded at ~1,600 call sites: the same "small gray label" was 9/10/11px depending on the file, charts disagreed with chips about status colors, two toggle-switch implementations coexisted in two greens, and there was no visual regression coverage > - This made the UI drift-prone and made any restyle a hundreds-of-files project, which discourages design iteration > - This pull request extracts visual values into a single token layer in `ui/src/index.css`, adds a Storybook visual regression suite backed by external immutable baseline archives, and then applies a deliberate retune reviewed change-by-change on screenshot diffs > - The benefit is that Paperclip's look becomes a config surface: retheming is a token edit reviewed as a snapshot diff, drift is blocked by a token gate, and future UI PRs can prove exactly what changed visually without committing hundreds of PNGs ## Linked Issues or Issue Description No existing public issue covers this work (searched "design tokens", "visual regression", "design system" across issues and PRs). Related in spirit: Refs #8982 (theming a hardcoded panel — a one-off instance of the same problem class this PR addresses systematically). **Problem (feature-request form):** UI visual values are hardcoded per call site with no source of truth and no regression coverage; consistency depends on reviewer memory, and restyling requires mass file edits. **Proposed solution (this PR):** a single token layer + enforcement gate + externally stored visual snapshot suite, then an intentional restyle on top of that foundation. ## What Changed - **Token extraction (zero visual change, machine-verified during development):** committed codemods (`scripts/codemod-*.mjs`) moved ~1,600 hardcoded color/type/spacing/radius/shadow/misc values into named tokens in a non-inline `:root` block of `ui/src/index.css`. - **Visual regression suite:** `pnpm test:storybook-visual` covers 255 stories × light/dark = 510 Playwright screenshots at `maxDiffPixels: 0`, plus new primitive-coverage stories and deterministic-render fixes. - **External visual baselines:** committed PNG snapshots were removed. `tests/storybook-visual/baseline-manifest.json` pins an immutable archive URL/hash/size/count, and `scripts/storybook-visual-baseline.mjs` handles `download`, `verify`, `pack`, and trusted maintainer `upload` flows. - **Opt-in visual CI artifacts:** added a `Storybook Visual` workflow that runs on manual dispatch or PRs labeled `storybook-visual`, downloads/verifies the baseline, runs Playwright, and uploads Playwright report/test-result artifacts for review. Normal PR runs do not mutate baseline objects. - **Token gate:** `pnpm check:token-gates` — zero hex literals, zero arbitrary bracket values, zero raw font-sizes in `ui/src/components/**` and `ui/src/pages/**`, with a documented inline allowlist for legitimate opt-outs. - **Theme retune (intentional, snapshot-reviewed):** new base theme values; radius ladder derived from a single `--radius` knob; micro-type cluster collapsed to a named ladder (`--text-nano/micro/compact` + Tailwind `text-xs`/`text-sm`); letter-spacing collapsed to named steps. - **One status-color vocabulary:** charts, quota/budget bar fills, RUNNING/live chips, and liveness indicators all use the canonical `--status-*` hues. Light-mode legibility fixes for red alert surfaces that used dark-tuned text classes. - **One switch:** `ToggleSwitch` restyled to the registry capsule form, second hand-rolled implementation removed, and all call sites unified. - **Docs:** `DESIGN.md` is the design contract; `doc/design/` holds audit reports, decision logs, and updated guidance for external baseline review/update workflows. - Dead code removed (`agentStatusBadge` duplicate map), byte-identical contrast constants consolidated, semantic renames (`--project-seed`/`--project-none`, `--liveness-blue`). ## Verification - `pnpm check:token-gates` — 3/3 gates CLEAN during the design-system run - `pnpm typecheck` && `pnpm --filter @paperclipai/ui build` — green during the design-system run - `node --test scripts/__tests__/storybook-visual-baseline.test.mjs` — pass after external-baseline rework - `pnpm exec tsc --noEmit --pretty false --module NodeNext --moduleResolution NodeNext --target ES2022 --types node,@playwright/test tests/storybook-visual/playwright.config.ts tests/storybook-visual/storybook-visual.spec.ts` — pass after external-baseline rework - `git diff --check origin/pr/9134..HEAD` — pass after external-baseline rework - `find tests/storybook-visual -type f -name '*.png' -print | wc -l` — `0` - `node scripts/storybook-visual-baseline.mjs verify` — intentionally fails closed until the first trusted maintainer publishes the baseline archive and updates `baseline-manifest.json` ## Risks - **Large but shallow:** the PR still touches many UI files due to mechanical token extraction and retune work, but committed PNG snapshot churn has been removed from the branch. - **Baseline publication required before the visual suite can pass in clean clones:** the manifest currently has placeholder archive metadata. A trusted maintainer must publish the first immutable archive, then update `baseline-manifest.json`. - **Rendering platform variance:** the external baseline should be captured in the documented Linux/Chromium environment. Future CI runs verify against the pinned archive and fail closed on checksum/count mismatch. - **Visual CI is opt-in while stabilizing:** add the `storybook-visual` label or dispatch the workflow manually to produce downloadable Playwright report/test-result artifacts. - **Scheduled follow-ups, deliberately out of scope:** Tailwind palette classes map to semantic tokens in a dedicated pass; card/pill component consolidation; ESLint ratchet. Tracked in `doc/design/DECISION-SHEET.md`. ## Model Used Claude Fable 5 (Anthropic, `claude-fable-5`, Mythos-class tier) with extended thinking, running in Claude Code with tool use; mechanical phases delegated to Claude Sonnet subagents. Follow-up external-baseline rework assisted by OpenAI Codex (`gpt-5` coding agent with repository, terminal, and GitHub tool use). All bulk rewrites executed via deterministic, idempotent scripts committed in `scripts/`; intentional visual changes were human-reviewed on screenshot contact sheets. ## 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 targeted local verification and documented the intentional baseline-publication failure above - [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 - [ ] All Paperclip CI gates are green *(pending new CI run after this rework)* - [ ] Greptile is 5/5 with no open P2s, recommendations, or follow-ups *(pending review)* - [x] I will address all Greptile and reviewer comments before requesting merge 🤖 Generated with [Claude Code](https://claude.com/claude-code) and OpenAI Codex --------- Co-authored-by: Claude Fable 5 <noreply@anthropic.com> Co-authored-by: Dotta <bippadotta@protonmail.com> Co-authored-by: Paperclip <noreply@paperclip.ing> |
||
|
DottaandPaperclip
|
bb880d9948 |
[codex] Polish issue interaction selectors (#7668)
## Thinking Path > - Paperclip is the open source control plane people use to manage AI agents for work. > - Issue-thread interactions are the board/agent handoff surface for structured decisions and confirmations. > - Accepted checkbox confirmations can include many selected labels, and inline selectors must stay usable across desktop and mobile devices. > - The existing accepted checkbox summary capped labels behind a static `+N more` chip, so operators could not inspect the hidden selections from the card. > - The inline selector also skipped search focus on coarse pointers, which made mobile selection slower and less predictable. > - This pull request makes the hidden checkbox selections expandable and restores search focus when the selector opens. > - The benefit is a more inspectable, faster interaction UI without changing the interaction API contract. ## Linked Issues or Issue Description Internal source work: [PAP-10488](/PAP/issues/PAP-10488), split from [PAP-10495](/PAP/issues/PAP-10495). ### Subsystem affected ui/ - React + Vite board UI ### Problem or motivation Accepted checkbox confirmations hide selected values behind a static count, and inline selector search does not focus on mobile/coarse pointer devices. That makes accepted interaction cards less inspectable and makes mobile selection slower than it needs to be. ### Proposed solution Make hidden accepted checkbox selections expandable/collapsible directly in the interaction card, and focus the inline selector search input whenever the selector opens, including coarse pointer environments. ### Alternatives considered Leaving the static `+N more` chip avoids UI state, but it keeps selected values hidden from operators. Only restoring desktop focus keeps the old mobile/coarse pointer gap, so the focus behavior should be consistent across pointer types. ### Roadmap alignment This is a small board UI polish change for the existing issue interaction surface. It does not add a new core roadmap capability or change the API contract. ## What Changed - Converted the accepted checkbox `+N more` chip into an expandable button with a `Show less` control. - Restored search input focus whenever `InlineEntitySelector` opens, including coarse pointer environments. - Updated focused component tests for the expanded selection summary and mobile/coarse-pointer focus path. - Adjusted the interaction card test harness to use the same `flushSync` act helper style used by nearby focused component tests. ## Verification - `pnpm exec vitest run ui/src/components/IssueThreadInteractionCard.test.tsx ui/src/components/InlineEntitySelector.test.tsx` passed in `~paperclipai/paperclip/.paperclip/worktrees/PAP-10495-interaction-selector-polish`. ## Risks - Low risk. The change is limited to UI state and focus behavior in existing components. - Restoring focus on coarse pointers may open a virtual keyboard on mobile, but that is intentional for the faster search workflow requested by this branch. > For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and discuss it in `#dev` before opening the PR. Feature PRs that overlap with planned core work may need to be redirected - check the roadmap first. See `CONTRIBUTING.md`. ## Model Used - OpenAI Codex coding agent based on GPT-5, with local repository inspection, shell execution, git, and GitHub CLI tool use. Runtime context window was not exposed by the environment. ## 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 run tests locally and they pass - [x] I have added or updated tests where applicable - [ ] If this change affects the UI, I have included before/after screenshots - [x] 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> |
||
|
DottaandPaperclip
|
d0bdbe11a9 |
Stabilize inline selector keyboard handling (#4617)
## Thinking Path > - Paperclip's board UI relies on compact selectors for frequent issue and agent edits. > - Inline selectors often live inside larger keyboard-aware surfaces such as composers and popovers. > - Arrow, enter, tab, and escape keys handled by the selector should not leak to parent document shortcuts. > - Stale company selection should also stay hidden until the company list confirms it is valid. > - This pull request tightens inline selector keyboard handling and adds regression coverage for stale company bootstrap behavior. > - The benefit is fewer accidental parent interactions and safer company-scoped UI initialization. ## What Changed - Added a stable empty `recentOptionIds` default so selector filtering does not get a new array every render. - Mirrored highlighted option state into a ref so Enter/Tab commits the current highlighted option reliably after keyboard navigation. - Stopped propagation for selector-owned navigation/commit/escape keys. - Added jsdom regressions for inline selector keyboard handling and CompanyProvider stale selection behavior. ## Verification - `pnpm exec vitest run ui/src/components/InlineEntitySelector.test.tsx ui/src/context/CompanyContext.test.tsx` - Targeted selector and CompanyProvider tests pass cleanly without React `act(...)` warnings. - Screenshots not attached: this is keyboard/state behavior covered by component tests. ## Risks - Low risk: changes are scoped to inline selector key handling and tests. The main behavior shift is intentionally preventing handled selector keys from reaching parent listeners. > For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and discuss it in `#dev` before opening the PR. Feature PRs that overlap with planned core work may need to be redirected — check the roadmap first. See `CONTRIBUTING.md`. ## Model Used - OpenAI Codex coding agent based on GPT-5, tool-enabled local repository and shell access, Paperclip heartbeat context. ## 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 run tests locally and they pass - [x] I have added or updated tests where applicable - [ ] If this change affects the UI, I have included before/after screenshots - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [x] I will address all Greptile and reviewer comments before requesting merge --------- Co-authored-by: Paperclip <noreply@paperclip.ing> |
||
|
|
057fee4836 |
[codex] Polish issue and operator workflow UI (#4090)
## Thinking Path > - Paperclip operators spend much of their time in issues, inboxes, selectors, and rich comment threads. > - Small interaction problems in those surfaces slow down supervision of AI-agent work. > - The branch included related operator quality-of-life fixes for issue layout, inbox actions, recent selectors, mobile inputs, and chat rendering stability. > - These changes are UI-focused and can land independently from workspace navigation and access-profile work. > - This pull request groups the operator QoL fixes into one standalone branch. > - The benefit is a more stable and efficient board workflow for issue triage and task editing. ## What Changed - Widened issue detail content and added a desktop inbox archive action. - Fixed mobile text-field zoom by keeping touch input font sizes at 16px. - Prioritized recent picker selections for assignees/projects in issue and routine flows. - Showed actionable approvals in the Mine inbox model. - Fixed issue chat renderer state crashes and hardened tests. ## Verification - `pnpm install --frozen-lockfile` - `pnpm exec vitest run ui/src/components/IssueChatThread.test.tsx ui/src/lib/inbox.test.ts ui/src/lib/recent-selections.test.ts` - Split integration check: merged last after the other [PAP-1614](/PAP/issues/PAP-1614) branches with no merge conflicts. - Confirmed this branch does not include `pnpm-lock.yaml`. ## Risks - Low to medium risk: mostly UI state, layout, and selection-priority behavior. - Visual layout and mobile zoom behavior may need browser/device QA beyond component tests. - No database migrations are included. > For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and discuss it in `#dev` before opening the PR. Feature PRs that overlap with planned core work may need to be redirected — check the roadmap first. See `CONTRIBUTING.md`. ## Model Used - OpenAI Codex, GPT-5.4 tool-enabled coding model, agentic code-editing/runtime with local shell and GitHub CLI access; exact context window and reasoning mode are not exposed by the Paperclip harness. ## 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 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 - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [x] I will address all Greptile and reviewer comments before requesting merge --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: Paperclip <noreply@paperclip.ing> |
||
|
dotta
|
5d021583be | Add draft routine defaults and run-time overrides | ||
|
DottaandClaude Opus 4.6
|
9d570b3ed7 |
fix(ui): enable scroll wheel in selectors inside dialogs
Radix Dialog wraps content in react-remove-scroll, which blocks wheel events on portaled Popover content (rendered outside the Dialog DOM tree). Add a disablePortal option to PopoverContent and use it for all InlineEntitySelector instances inside NewIssueDialog so the Popover stays in the Dialog's DOM tree and scrolling works. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> |
||
|
DottaandClaude Opus 4.6
|
d4eb502389 |
feat(ui): unify comment assignee selector with icons and fix click flash
Add renderTriggerValue/renderOption to the comment thread's assignee selector so it shows agent icons, matching the new issue dialog. Fix the InlineEntitySelector flash on click by only auto-opening on keyboard focus (not pointer-triggered focus). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> |
||
|
DottaandClaude Opus 4.6
|
5134cac993 |
fix(ui): fix mobile popover issues in InlineEntitySelector
Force popover to always open downward (side="bottom") to prevent it from flipping upward and going off-screen on mobile. Skip auto-focusing the search input on touch devices so the virtual keyboard doesn't open and reshape the viewport. Add touch-manipulation on option buttons to remove tap delays and improve scroll gesture recognition. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> |
||
|
Dotta
|
c486bad2dd |
fix(ui): restore mobile touch scroll in popover dropdowns inside dialogs
Radix Dialog's modal DismissableLayer calls preventDefault() on pointerdown events originating outside the Dialog DOM tree. Popover portals render at the body level (outside the Dialog), so touch events on popover content were treated as 'outside' — killing scroll gesture recognition on mobile. Fix: add onPointerDownOutside to NewIssueDialog's DialogContent that detects events from Radix popper wrappers and calls event.preventDefault() on the Radix event (not the native event), which skips the Dialog's native preventDefault and restores touch scrolling. Also cleans up previous CSS-only workarounds (-webkit-overflow-scrolling, touch-pan-y on individual buttons) that couldn't override JS preventDefault. |
||
|
Dotta
|
8ee063c4e5 | feat(ui): reconcile backup UI changes with current routing and interaction features | ||
|
ForgottenandClaude Opus 4.6
|
20176d9d60 |
fix(ui): resume lost runs, activity feed fixes, and selector focus
Add resume button for process_lost runs on agent detail page. Fix activity row text overflow with truncation. Pass entityTitleMap to Dashboard activity feed. Fix InlineEntitySelector stealing focus on close when advancing to next field. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> |
||
|
Forgotten
|
3709901db3 | commit |