From c38b59484c66a7c7256f3fa2e2c52e2d46db06df Mon Sep 17 00:00:00 2001 From: Devin Foley Date: Thu, 3 Sep 2026 23:26:08 -0700 Subject: [PATCH] fix(ui): remove the Account badge and version line from the account menu (#12818) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 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 " (or "Paperclip v") 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 " with branch/commit links for source builds, or "Paperclip v" 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 --- ui/src/components/Layout.production.tsx | 4 -- ui/src/components/Layout.tsx | 4 -- .../SidebarAccountMenu.production.tsx | 55 +----------------- ui/src/components/SidebarAccountMenu.test.tsx | 58 ++----------------- ui/src/components/SidebarAccountMenu.tsx | 55 +----------------- .../stories/navigation-layout.stories.tsx | 1 - 6 files changed, 8 insertions(+), 169 deletions(-) diff --git a/ui/src/components/Layout.production.tsx b/ui/src/components/Layout.production.tsx index 2903267e57..12621fca3b 100644 --- a/ui/src/components/Layout.production.tsx +++ b/ui/src/components/Layout.production.tsx @@ -604,8 +604,6 @@ export function Layout() { ) : ( @@ -624,8 +622,6 @@ export function Layout() { )} diff --git a/ui/src/components/Layout.tsx b/ui/src/components/Layout.tsx index b308eb394f..99b7fba771 100644 --- a/ui/src/components/Layout.tsx +++ b/ui/src/components/Layout.tsx @@ -659,8 +659,6 @@ export function Layout() { @@ -684,8 +682,6 @@ export function Layout() { diff --git a/ui/src/components/SidebarAccountMenu.production.tsx b/ui/src/components/SidebarAccountMenu.production.tsx index b592387638..c136d4ea2f 100644 --- a/ui/src/components/SidebarAccountMenu.production.tsx +++ b/ui/src/components/SidebarAccountMenu.production.tsx @@ -8,7 +8,7 @@ import { UserRound, UserRoundPen, } from "lucide-react"; -import type { DeploymentMode, ServerGitInfo } from "@paperclipai/shared"; +import type { DeploymentMode } from "@paperclipai/shared"; import { Link } from "@/lib/router"; import { authApi } from "@/api/auth"; import { queryKeys } from "@/lib/queryKeys"; @@ -20,20 +20,15 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { cn, SIDEBAR_RAIL_HIDDEN_LABEL } from "../lib/utils"; import { ThemeToggle } from "./ThemeToggle"; import { SidebarServerInfo } from "./SidebarServerInfo"; -import { Badge } from "@/components/ui/badge"; const PROFILE_SETTINGS_PATH = "/company/settings/instance/profile"; const DOCS_URL = "https://docs.paperclip.ing/"; const FEEDBACK_URL = "https://paperclip.ing/feedback"; -const SOURCE_REPOSITORY_URL = "https://github.com/paperclipai/paperclip"; -const SOURCE_VERSION_RE = /\+\d+\.git\.([0-9a-f]{7,40})(?:\.dirty)?$/i; interface SidebarAccountMenuProps { deploymentMode?: DeploymentMode; open?: boolean; onOpenChange?: (open: boolean) => void; - serverGit?: ServerGitInfo; - version?: string | null; } interface MenuActionProps { @@ -67,11 +62,6 @@ function deriveUserSlug(name: string | null | undefined, email: string | null | return "me"; } -function sourceVersionSha(version: string): string | null { - const sourceVersion = version.match(SOURCE_VERSION_RE); - return sourceVersion?.[1] ?? null; -} - function MenuAction({ label, description, icon: Icon, onClick, href, external = false }: MenuActionProps) { const className = "flex w-full items-start gap-3 rounded-xl px-3 py-3 text-left transition-colors hover:bg-accent/60"; @@ -115,8 +105,6 @@ export function SidebarAccountMenu({ deploymentMode, open: controlledOpen, onOpenChange, - serverGit, - version, }: SidebarAccountMenuProps) { const [internalOpen, setInternalOpen] = useState(false); const { isMobile, setSidebarOpen, collapsed, peeking } = useSidebar(); @@ -134,15 +122,8 @@ export function SidebarAccountMenu({ const displayName = session?.user.name?.trim() || "Board"; const secondaryLabel = session?.user.email?.trim() || (deploymentMode === "authenticated" ? "Signed in" : "Local workspace board"); - const accountBadge = deploymentMode === "authenticated" ? "Account" : "Local"; const initials = deriveInitials(displayName); const profileHref = `/u/${deriveUserSlug(session?.user.name, session?.user.email, session?.user.id)}`; - const sourceSha = version ? sourceVersionSha(version) : null; - const sourceFullSha = - sourceSha && serverGit?.available && serverGit.fullSha.toLowerCase().startsWith(sourceSha.toLowerCase()) - ? serverGit.fullSha - : sourceSha; - const sourceBranch = sourceSha && serverGit?.available ? serverGit.branchName : null; function closeNavigationChrome() { setOpen(false); @@ -189,40 +170,8 @@ export function SidebarAccountMenu({
-
-

{displayName}

- - {accountBadge} - -
+

{displayName}

{secondaryLabel}

- {sourceSha && sourceFullSha ? ( -
- {sourceBranch ? ( - - {sourceBranch} - - ) : null} -

- Paperclip{" "} - - {sourceSha.slice(0, 7)} - -

-
- ) : version ? ( -

Paperclip v{version}

- ) : null}
diff --git a/ui/src/components/SidebarAccountMenu.test.tsx b/ui/src/components/SidebarAccountMenu.test.tsx index b883af6637..5c4ffe0c02 100644 --- a/ui/src/components/SidebarAccountMenu.test.tsx +++ b/ui/src/components/SidebarAccountMenu.test.tsx @@ -196,10 +196,7 @@ describe("SidebarAccountMenu", () => { root.render( - + , ); @@ -233,7 +230,9 @@ describe("SidebarAccountMenu", () => { const themePos = menuText.indexOf("Switch to"); expect(docsPos).toBeLessThan(themePos); - expect(document.body.textContent).toContain("Paperclip v1.2.3"); + // The popover header stays down to name + email: no "Account" badge, no version line. + expect(popover?.textContent).not.toContain("Account"); + expect(popover?.textContent).not.toContain("Paperclip v"); expect(document.body.textContent).toContain("jane@example.com"); expect(document.body.querySelector('[data-slot="popover-content"]')?.className) .toContain("w-(--sz-277px)"); @@ -331,53 +330,4 @@ describe("SidebarAccountMenu", () => { }); }); - it("shows the short commit sha instead of a version for source builds", async () => { - const root = createRoot(container); - const queryClient = new QueryClient({ - defaultOptions: { queries: { retry: false } }, - }); - - await act(async () => { - root.render( - - - - - , - ); - }); - await flushReact(); - - expect(document.body.textContent).toContain("feature/source-build-labelPaperclip 518fc71"); - expect(document.body.textContent).not.toContain("2026.626.0+58.git.518fc71ce"); - expect(document.body.querySelector('a[href="https://github.com/paperclipai/paperclip/tree/feature%2Fsource-build-label"]')?.textContent).toBe( - "feature/source-build-label", - ); - expect(document.body.querySelector('a[href="https://github.com/paperclipai/paperclip/commit/518fc71ce1234567890abcdef1234567890abcde"]')?.textContent).toBe( - "518fc71", - ); - - await act(async () => { - root.unmount(); - }); - }); }); diff --git a/ui/src/components/SidebarAccountMenu.tsx b/ui/src/components/SidebarAccountMenu.tsx index caec0bbd30..87c2897d51 100644 --- a/ui/src/components/SidebarAccountMenu.tsx +++ b/ui/src/components/SidebarAccountMenu.tsx @@ -9,7 +9,7 @@ import { UserRound, UserRoundPen, } from "lucide-react"; -import type { DeploymentMode, ServerGitInfo } from "@paperclipai/shared"; +import type { DeploymentMode } from "@paperclipai/shared"; import { Link } from "@/lib/router"; import { authApi } from "@/api/auth"; import { queryKeys } from "@/lib/queryKeys"; @@ -21,20 +21,15 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { cn, SIDEBAR_RAIL_HIDDEN_LABEL } from "../lib/utils"; import { ThemeToggle } from "./ThemeToggle"; import { SidebarServerInfo } from "./SidebarServerInfo"; -import { Badge } from "@/components/ui/badge"; const PROFILE_SETTINGS_PATH = "/company/settings/instance/profile"; const DOCS_URL = "https://docs.paperclip.ing/"; const FEEDBACK_URL = "https://paperclip.ing/feedback"; -const SOURCE_REPOSITORY_URL = "https://github.com/paperclipai/paperclip"; -const SOURCE_VERSION_RE = /\+\d+\.git\.([0-9a-f]{7,40})(?:\.dirty)?$/i; interface SidebarAccountMenuProps { deploymentMode?: DeploymentMode; open?: boolean; onOpenChange?: (open: boolean) => void; - serverGit?: ServerGitInfo; - version?: string | null; /** Contextual navigation occupies a full sidebar even if the saved global nav mode is collapsed. */ forceExpanded?: boolean; } @@ -70,11 +65,6 @@ function deriveUserSlug(name: string | null | undefined, email: string | null | return "me"; } -function sourceVersionSha(version: string): string | null { - const sourceVersion = version.match(SOURCE_VERSION_RE); - return sourceVersion?.[1] ?? null; -} - function MenuAction({ label, description, icon: Icon, onClick, href, external = false }: MenuActionProps) { const className = "flex w-full items-start gap-3 rounded-xl px-3 py-3 text-left transition-colors hover:bg-accent/60"; @@ -118,8 +108,6 @@ export function SidebarAccountMenu({ deploymentMode, open: controlledOpen, onOpenChange, - serverGit, - version, forceExpanded = false, }: SidebarAccountMenuProps) { const [internalOpen, setInternalOpen] = useState(false); @@ -138,15 +126,8 @@ export function SidebarAccountMenu({ const displayName = session?.user.name?.trim() || "Board"; const secondaryLabel = session?.user.email?.trim() || (deploymentMode === "authenticated" ? "Signed in" : "Local workspace board"); - const accountBadge = deploymentMode === "authenticated" ? "Account" : "Local"; const initials = deriveInitials(displayName); const profileHref = `/u/${deriveUserSlug(session?.user.name, session?.user.email, session?.user.id)}`; - const sourceSha = version ? sourceVersionSha(version) : null; - const sourceFullSha = - sourceSha && serverGit?.available && serverGit.fullSha.toLowerCase().startsWith(sourceSha.toLowerCase()) - ? serverGit.fullSha - : sourceSha; - const sourceBranch = sourceSha && serverGit?.available ? serverGit.branchName : null; function closeNavigationChrome() { setOpen(false); @@ -193,40 +174,8 @@ export function SidebarAccountMenu({
-
-

{displayName}

- - {accountBadge} - -
+

{displayName}

{secondaryLabel}

- {sourceSha && sourceFullSha ? ( -
- {sourceBranch ? ( - - {sourceBranch} - - ) : null} -

- Paperclip{" "} - - {sourceSha.slice(0, 7)} - -

-
- ) : version ? ( -

Paperclip v{version}

- ) : null}
diff --git a/ui/storybook/stories/navigation-layout.stories.tsx b/ui/storybook/stories/navigation-layout.stories.tsx index c78bdfb879..4eca73816f 100644 --- a/ui/storybook/stories/navigation-layout.stories.tsx +++ b/ui/storybook/stories/navigation-layout.stories.tsx @@ -256,7 +256,6 @@ function NavigationLayoutStories() { deploymentMode="authenticated" open onOpenChange={() => undefined} - version="0.3.1" />