Files
PaperClipAI/ui
ac8f3eb143 feat(ui): remove star and leave buttons from agent index (#15400)
## Thinking Path

> - Paperclip is the open source app people use to manage AI agents for
work
> - The Agents index page (`/agents/all`) shows one row per agent in
both the streamlined and production sides of the UI
> - Each row had a star toggle and a leave/join button that write
per-user state through the resource-memberships API (`agent_memberships`
table)
> - The default streamlined sidebar no longer lists agents, so the star
and leave actions on the index no longer feed a visible pinned list
> - This pull request removes the star toggle and the leave/join button
from agent index rows and org-tree nodes
> - The backend resource-memberships endpoints and the
`agent_memberships` table stay live because the agent detail page and
the legacy sidebar still use them
> - The benefit is a cleaner index page with no redundant actions for
state that is not surfaced on the page itself

## Linked Issues or Issue Description

No public GitHub issue exists for this change; the description follows
the feature request issue template inline.

**Subsystem affected**
ui/ — React + Vite board UI. The change is presentational only; no
backend or schema code is touched.

**Problem or motivation**
The agent index rows show a star toggle and a leave/join button. Those
two buttons write per-user membership state that the default streamlined
UI no longer surfaces anywhere on the page itself. The default sidebar
shows a plain "Agents" nav item and does not list agents. The buttons
are now redundant on the index.

**Proposed solution**
Remove both buttons from the agent index list rows and org-tree nodes in
both UI variants. Keep the data layer. The agent detail page still
renders the header star toggle and the join/leave banner, and the legacy
sidebar still renders star and leave rows for instances that opt out of
the streamlined UI.

**Alternatives considered**
- Remove the backend endpoints too. Rejected: the agent detail page and
the legacy sidebar still read and write the same state.
- Keep the buttons hidden behind a setting. Rejected: no product need,
and the plan approved the straightforward removal.

**Roadmap alignment**
This is a small presentational change. It does not overlap any section
in `ROADMAP.md`.

**Additional context**
Rows whose membership state is `left` keep their dimmed styling on the
index.

## What Changed

- Removed the `StarToggle` component from agent index list rows in
`ui/src/pages/Agents.tsx` and `ui/src/pages/Agents.production.tsx`
- Removed the `MembershipAction` (Leave/Join) component from agent index
list rows in both files
- Removed both actions from the org-tree nodes in both files
- Dropped now-unused imports and derived values (`StarToggle`,
`MembershipAction`, `isStarred`, `useResourceMembershipMutation`, and
the per-row pending/starred variables)
- Kept `useResourceMemberships` and the dim-on-left row styling so rows
whose membership is `left` remain visually identified
- Updated `ui/src/pages/Agents.test.tsx`: a new test asserts both modes
omit star and leave/join actions from list and org-chart views; the
dim-on-left tests are kept

## Verification

- `pnpm --filter @paperclipai/ui typecheck` passes
- `pnpm --filter @paperclipai/ui build` passes
- UI Vitest suite for `Agents.test.tsx` passes (21 tests)
- `pnpm check:token-gates` is clean
- Manual check on `/agents/all`: no star and no Leave/Join buttons in
the list view or the org-chart view; star/leave still work on the agent
detail page

## Risks

Low risk. This is a presentational UI change with no backend or schema
changes. Star/leave remain available on the agent detail page and the
legacy sidebar. No migration is involved.

## Model Used

- Provider: DeepSeek (via the Paperclip opencode_local adapter, model
`openrouter/~deepseek/deepseek-v4-flash-latest`)
- Model: deepseek-v4-flash (OpenRouter
`openrouter/~deepseek/deepseek-v4-flash-latest`)
- Context window: 128K; used with tool use in the repository
- Assisted with the code change and this PR body; the plan and scope
came from the tracking work item

## 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)
- [ ] 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
- [ ] 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
- [ ] 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: devinfoley <139239+devinfoley@users.noreply.github.com>
Co-authored-by: Paperclip <noreply@paperclip.ing>
2026-10-06 17:25:41 -07:00
..

@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.