Files
DottaandPaperclip d6df12cef6 fix(ui): add icons to chat connection choices (#15574)
## Thinking Path

> - Paperclip is the open source app people use to manage AI agents for
work.
> - Connectors let people chat with agents and let agents use external
tools.
> - Slack setup asks the user to choose between those two uses.
> - Both choices currently use text alone.
> - This pull request adds an agent avatar and a hammer to the shared
chooser.
> - The icons help users identify each choice at a glance.

## Linked Issues or Issue Description

**What existing behavior does this improve?**

The chat-or-tools choice in connector setup. Related setup work: Refs
#15413.

**Subsystem affected**

ui/ — React board UI and Storybook.

**Current behavior**

Both choice cards show a title and description with no identity icon.

**Proposed behavior**

Show the existing agent avatar beside chat. Show a hammer beside tools.
Align both icons and keep the existing navigation.

**Reason and benefit**

Users can tell the two choices apart with less reading.

**Breaking changes**

None. The shared chooser applies the icons wherever that choice appears.
Only Slack currently offers both paths in the catalog. Other chat-only
providers keep their direct setup path.

## What Changed

- Add the shared agent avatar to the chat choice.
- Add a decorative hammer icon to the tools choice.
- Add desktop and mobile Storybook stories that render the production
page.

## Verification

- Token gates pass.
- Focused catalog, routing, and UI contract tests pass, including the
new chooser accessibility and navigation test.
- Checked the production chooser in Storybook at desktop and mobile
widths.
- Local repository typecheck, build, and Storybook build pass.
- All 56 checks pass on commit
`0f0673f1bb5cd340084f3a5229983da049f1c8db`, including the full CI test
suite and browser shards. Greptile reports 5/5 with no findings.
- Started the full local test command. Stopped that duplicate run after
the full CI suite passed. The focused local tests completed
successfully.
- In Storybook, open Connections → Slack → Automatic setup → 00 · Choose
connection. The mobile variant is in the same group.

## Risks

Low risk. This changes card layout and decorative images. Existing
button text, click handlers, credentials, and permissions stay the same.
The avatar is generic because the user has not selected an agent yet.

## Model Used

OpenAI GPT-6 through Codex. Used code inspection, edits, shell tools,
and browser tools. The session does not expose the exact runtime model
ID or context window size.

## 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

---------

Co-authored-by: Paperclip <noreply@paperclip.ing>
2026-10-08 09:41:46 -05:00
..