Commit Graph
4 Commits
Author SHA1 Message Date
5b56d430e9 feat(ui): refine core navigation and task detail (#12854)
## Thinking Path

> - Paperclip is the open source app people use to manage AI agents for
work.
> - The main navigation and task detail view are core operator surfaces.
> - Several controls used different hover states, popover layouts, and
spacing rules.
> - Recent task actions also needed a compact menu and correct inbox
archive behavior.
> - These differences made the interface feel inconsistent and caused
some content to look crowded or clipped.
> - This pull request aligns these surfaces with the Paperclip design
tokens and current interaction patterns.
> - The benefit is a simpler and more consistent operator experience in
light and dark modes.

## Linked Issues or Issue Description

**What happened?**

Profile and organization popovers used inconsistent layouts. Navigation
controls used different hover and selected backgrounds. Task warnings
and the composer could crowd nearby content. Archiving a recent task
could also remove it from more than the inbox.

**Expected behavior**

Popover menus should use the same compact visual language. Navigation
controls should share readable hover and selected tokens. Task detail
content should keep consistent spacing. Archiving should hide a task
from the inbox while keeping it in the task list.

**Steps to reproduce**

1. Open the main sidebar in light or dark mode.
2. Open the profile and organization menus.
3. Hover navigation items, the organization trigger, the profile
trigger, and the feedback flag.
4. Open a task with a warning banner and a long thread.
5. Use the recent task overflow menu and archive a task.

**Paperclip version or commit**

Reproduced on `master` before this branch.

**Deployment mode**

Local dev (`pnpm dev`).

## What Changed

- Rebuilt the profile and organization popovers with compact token-based
layouts.
- Matched organization popover width and alignment to the profile
popover.
- Unified sidebar hover and selected states in light and dark modes.
- Added a recent task overflow menu with rename, archive, and pause or
restart actions.
- Kept archived tasks in the task list while removing them from the
inbox.
- Improved warning banner and composer spacing in task detail views.
- Added and updated focused UI tests for the changed behavior.

## Verification

- `pnpm check:token-gates` passed.
- `pnpm --filter @paperclipai/ui typecheck` passed.
- The seven affected UI test files passed with 216 tests.
- `pnpm --filter @paperclipai/ui build` passed.
- GitHub CI passed the full build, typecheck and release registry,
general test, serialized server, canary dry-run, and end-to-end
matrices.
- Greptile reviewed commit `6e296be85` at 5/5 with no outstanding
actionable findings.

## Risks

- Risk is limited to sidebar presentation, recent task actions, and task
detail layout.
- The recent task archive action now follows inbox-only archive
semantics.
- No database schema or public API contract changed.

> I checked [`ROADMAP.md`](ROADMAP.md). This pull request does not
duplicate planned core work.

## Model Used

- OpenAI Codex, GPT-5.6. The model used high reasoning, tool use, and
code execution. The context window size was not exposed.

## 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: Scott Tong <scott@scottsmbpm5max.lan>
Co-authored-by: Paperclip <noreply@paperclip.ing>
2026-09-04 16:15:21 -07:00
Devin Foley c38b59484c fix(ui): remove the Account badge and version line from the account menu (#12818)
## Thinking Path

> - Paperclip is the open source app people use to manage AI agents for
work
> - The web UI has a sidebar account menu that opens from the user's
name in the lower left
> - The menu header shows an "Account"/"Local" badge and a "Paperclip
<sha>" (or "Paperclip v<version>") build line next to the user's
identity
> - These labels add noise to the header and repeat information that is
available elsewhere: the email line already shows the sign-in state, and
the opt-in "Server" debug section in the same menu shows the running
commit
> - This pull request removes the badge and the build line so the header
shows only the user's name and email
> - The benefit is a cleaner account menu that shows only identity
information

## Linked Issues or Issue Description

No existing issue. Related: #9637 (closed) added the source-sha
rendering that this PR removes from the menu header. Description follows
the enhancement template:

**What existing behavior does this improve?**

The sidebar account menu popover. Its header shows the user's name, an
"Account" or "Local" badge, the email, and a build identifier line
("Paperclip <short sha>" with branch/commit links for source builds, or
"Paperclip v<version>" for release builds).

**Current behavior**

The popover header mixes identity information with deployment and build
metadata. The badge and the version line take space and do not help
daily use.

**Proposed behavior**

The popover header shows only the user's name and email. Build
information stays available in the "Server" section at the bottom of the
same menu when the server-info debug view is enabled in experimental
instance settings.

**Reason and benefit**

Less visual noise in a menu that users open often. No information is
lost: sign-in state is clear from the email line, and the running commit
remains visible through the server-info debug view.

**Breaking changes**

None. The `SidebarAccountMenu` components no longer accept the
`serverGit` and `version` props; both call sites in the two `Layout`
variants are updated in this PR.

## What Changed

- `ui/src/components/SidebarAccountMenu.tsx` and
`SidebarAccountMenu.production.tsx`: remove the "Account"/"Local" badge
and the full version block (source-build branch/commit links and the
release-version fallback); drop the now-unused `serverGit`/`version`
props, the sha-parsing helper, and the `Badge` import
- `ui/src/components/Layout.tsx` and `Layout.production.tsx`: stop
passing the removed props at all four call sites
- `ui/src/components/SidebarAccountMenu.test.tsx`: delete the
source-build sha test; the sign-out test now pins that the popover
contains neither "Account" nor "Paperclip v"
- `ui/storybook/stories/navigation-layout.stories.tsx`: stop passing the
removed `version` prop in the account-menu story

## Verification

- `pnpm vitest run ui/src/components/SidebarAccountMenu.test.tsx
ui/src/components/Layout.test.tsx` — 36 tests pass
- `tsc --noEmit` for the `ui` package passes
- Manual: open the app, click your name in the lower left. The popover
header shows only name and email.

## Risks

- Low risk. UI-only removal with no data or API changes.
- Users who relied on the header sha to identify a source build must
enable the experimental server-info debug view to see the running commit
in the same menu.

> 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

- Claude (Anthropic), Claude Fable 5, model ID `claude-fable-5`,
extended thinking enabled, via Claude Code CLI with tool use (file edit,
shell, test runner)

## 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
- [ ] 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
2026-09-03 23:26:08 -07:00
871f7d1124 fix(ui): polish core navigation and task layout (#12793)
<!-- Write all pull request text in Simplified Technical English
(ASD-STE100): short sentences, one instruction per sentence, simple
approved vocabulary, and the active voice. -->

## Thinking Path

> - Paperclip is the open source app people use to manage AI agents for
work.
> - Operators use the main navigation, contextual navigation, and task
chat throughout the product.
> - The recent core UI refactor left uneven spacing and inconsistent
navigation styles.
> - The Apps label also did not match the Connectors product language.
> - The account area did not provide a clear direct path for feedback.
> - This pull request aligns these related core UI surfaces and
preserves their existing behavior.
> - The benefit is a more consistent interface with clearer navigation
and balanced task-chat layout.

## Linked Issues or Issue Description

**What existing behavior does this improve?**

This improves the core sidebar, Settings navigation, Connectors catalog,
task-chat layout, and account controls.

**Subsystem affected**

`ui/` — React and Vite board UI.

**Current behavior**

The task chat had uneven edge treatment. Settings used a separate
contextual-navigation style. Apps used inconsistent product labels. The
account footer did not expose a direct feedback control.

**Proposed behavior**

The task chat keeps balanced content padding while its scrollbar sits at
the properties boundary. Settings replaces the primary sidebar with a
matching navigation surface and a Back to app link. Apps uses Connectors
and Browse labels. The account footer provides a dedicated feedback icon
with a tooltip.

**Reason and benefit**

These changes make related navigation and layout patterns predictable.
They reduce duplicate labels and improve access to feedback.

**Breaking changes**

None. Routes, APIs, and stored data do not change.

## What Changed

- Balanced the task-chat content gutter and moved its scrollbar to the
properties-panel boundary.
- Reworked Settings navigation to replace the main sidebar and use the
shared primary-sidebar style.
- Added a Back to app navigation item to Settings.
- Renamed Apps to Connectors in the main navigation and added the
`Unplug` icon.
- Renamed the Connectors contextual item to Browse.
- Added the Connectors top-level header and aligned the search field
with the connector cards.
- Added account-footer hover states and a direct feedback flag with a
Share feedback tooltip.
- Removed the duplicate Feedback item from the account popover.
- Added regression coverage for each changed UI surface.

## Verification

- `pnpm --filter @paperclipai/ui exec vitest run
src/components/AppsSidebar.test.tsx
src/components/CompanySettingsSidebar.test.tsx
src/components/Layout.test.tsx src/components/Sidebar.test.tsx
src/components/SidebarAccountMenu.test.tsx
src/components/task-chat/TaskMessageScroller.test.tsx
src/pages/apps/Browse.test.tsx` — 90 tests passed.
- `pnpm --filter @paperclipai/ui typecheck` — passed.
- `pnpm --filter @paperclipai/ui build` — passed.
- `pnpm check:token-gates` — passed.
- `git diff --check origin/master...HEAD` — passed.
- `env PAPERCLIP_PLAYWRIGHT_CHANNEL=chrome PAPERCLIP_E2E_PORT=3201 pnpm
exec playwright test --config tests/e2e/playwright.config.ts
tests/e2e/apps-dark-mode-shots.spec.ts
tests/e2e/sidebar-takeover.spec.ts` — 10 tests passed.
- The full workspace typecheck and build reached the Rust runner and
stopped because `cargo` is not installed on this machine.
- The full test suite exposed unrelated server and workspace-runtime
failures and was stopped after the affected suites completed. No changed
UI test failed.
- Manually verified the changed Settings, Connectors, task-chat, and
account-menu surfaces in the running app.

## Risks

- Low risk. The change affects layout and navigation presentation only.
- The Settings sidebar now replaces the main sidebar by design. Users
must use Back to app to return to the application navigation.
- The task scrollbar offset depends on the existing responsive page
gutters. Regression tests cover both narrow and desktop spacing.

> 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.6-sol`, extended reasoning with tool use and code
execution. The host does not expose the 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
- [ ] 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: Scott Tong <scott@scottsmbpm5max.lan>
Co-authored-by: Paperclip <noreply@paperclip.ing>
2026-09-03 15:35:39 -07:00
scotttong 597fd63b61 feat(ui): add streamlined navigation foundation (#12746) 2026-09-02 23:55:43 -07:00