From 476f367c9d108a79933f00ba40853ddf2bb28b86 Mon Sep 17 00:00:00 2001
From: Neil <4138956+nwparker@users.noreply.github.com>
Date: Sun, 24 May 2026 00:25:27 -0700
Subject: [PATCH] Use square repo badges (#2744)

---
 src/renderer/src/components/TaskPage.tsx      | 20 +++++------
 .../src/components/WorktreeJumpPalette.tsx    | 21 ++----------
 .../activity/ActivityPrototypePage.tsx        |  3 +-
 .../automations/AutomationsPage.tsx           |  6 ++--
 .../github/IssueSourceIndicator.tsx           |  8 ++---
 .../components/github/IssueSourceSelector.tsx |  2 +-
 .../src/components/repo/RepoBadgeLabel.tsx    | 33 +++++++++++++++++++
 .../src/components/repo/RepoCombobox.tsx      |  8 ++---
 .../src/components/repo/RepoDotLabel.tsx      | 23 -------------
 .../components/settings/QuickCommandsPane.tsx | 12 ++-----
 .../settings/RepositoryIconPicker.tsx         |  2 +-
 .../components/settings/SettingsSidebar.tsx   |  9 +++--
 .../sidebar/SetupScriptPromptCard.tsx         |  6 ++--
 .../src/components/sidebar/SidebarFilter.tsx  |  4 +--
 .../SidebarRepositoryFilterSection.tsx        |  8 ++---
 .../sidebar/WorkspaceKanbanCard.tsx           |  6 ++--
 .../src/components/sidebar/WorktreeCard.tsx   |  9 ++---
 .../src/components/sidebar/WorktreeList.tsx   |  6 ++--
 .../TerminalQuickCommandDialog.tsx            |  4 +--
 .../src/components/ui/repo-multi-combobox.tsx | 10 ++++--
 20 files changed, 92 insertions(+), 108 deletions(-)
 create mode 100644 src/renderer/src/components/repo/RepoBadgeLabel.tsx
 delete mode 100644 src/renderer/src/components/repo/RepoDotLabel.tsx

diff --git a/src/renderer/src/components/TaskPage.tsx b/src/renderer/src/components/TaskPage.tsx
index 3408f4267..8ac129ee3 100644
--- a/src/renderer/src/components/TaskPage.tsx
+++ b/src/renderer/src/components/TaskPage.tsx
@@ -72,7 +72,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import RepoMultiCombobox from '@/components/ui/repo-multi-combobox'
 import TeamMultiCombobox from '@/components/ui/team-multi-combobox'
-import RepoDotLabel from '@/components/repo/RepoDotLabel'
+import RepoBadgeLabel from '@/components/repo/RepoBadgeLabel'
 import IssueSourceIndicator, { sameGitHubOwnerRepo } from '@/components/github/IssueSourceIndicator'
 import IssueSourceSelector, { issueSourceChipClass } from '@/components/github/IssueSourceSelector'
 import { reconcileLinearTeamSelection } from '@/components/task-page-linear-team-selection'
@@ -4447,7 +4447,7 @@ export default function TaskPage(): React.JSX.Element {
                       // Why: unify feature 1 (indicator) and feature 2 (selector)
                       // into a single chip per repo. Rendering both separately
                       // produced visually redundant output — two local-repo
-                      // dot-labels, duplicate slugs. The selector's active pill
+                      // badge labels, duplicate slugs. The selector's active pill
                       // + tooltip already announce the source, so the "Issues
                       // from {slug}" chip is only shown when the selector does
                       // not render (no upstream remote — nothing to toggle).
@@ -4461,7 +4461,7 @@ export default function TaskPage(): React.JSX.Element {
                         <div className="mt-2 flex flex-wrap items-center gap-2">
                           {rows.map((s) => {
                             const repo = selectedRepos.find((r) => r.id === s.repoId)
-                            const showDotLabel = selectedRepos.length > 1 && repo
+                            const showRepoBadgeLabel = selectedRepos.length > 1 && repo
                             const selectorRenderable = hasUpstreamCandidateDivergence(s)
                             // Why: the static indicator has its own wrapping
                             // chip styles, so we render it standalone and don't
@@ -4474,7 +4474,7 @@ export default function TaskPage(): React.JSX.Element {
                                   issues={s.sources.issues}
                                   prs={s.sources.prs}
                                   localRepo={
-                                    showDotLabel && repo
+                                    showRepoBadgeLabel && repo
                                       ? { displayName: repo.displayName, color: repo.badgeColor }
                                       : undefined
                                   }
@@ -4492,11 +4492,11 @@ export default function TaskPage(): React.JSX.Element {
                             // uses `inline-flex`, so the visual rendering is identical.
                             return (
                               <div key={s.repoId} className={issueSourceChipClass}>
-                                {showDotLabel ? (
-                                  <RepoDotLabel
+                                {showRepoBadgeLabel ? (
+                                  <RepoBadgeLabel
                                     name={repo.displayName}
                                     color={repo.badgeColor}
-                                    dotClassName="size-1.5"
+                                    badgeClassName="size-1.5"
                                     className="text-[10px] text-muted-foreground"
                                   />
                                 ) : null}
@@ -5008,10 +5008,10 @@ export default function TaskPage(): React.JSX.Element {
                               {selectedRepos.length > 1 && itemRepo ? (
                                 // Why: disambiguate rows when multiple repos are in
                                 // the merged list — a single-repo view doesn't need it.
-                                <RepoDotLabel
+                                <RepoBadgeLabel
                                   name={itemRepo.displayName}
                                   color={itemRepo.badgeColor}
-                                  dotClassName="size-1.5"
+                                  badgeClassName="size-1.5"
                                   className="shrink-0 text-[11px] text-muted-foreground"
                                 />
                               ) : null}
@@ -6002,7 +6002,7 @@ export default function TaskPage(): React.JSX.Element {
                   <SelectContent>
                     {selectedRepos.map((r) => (
                       <SelectItem key={r.id} value={r.id}>
-                        <RepoDotLabel name={r.displayName} color={r.badgeColor} />
+                        <RepoBadgeLabel name={r.displayName} color={r.badgeColor} />
                       </SelectItem>
                     ))}
                   </SelectContent>
diff --git a/src/renderer/src/components/WorktreeJumpPalette.tsx b/src/renderer/src/components/WorktreeJumpPalette.tsx
index 06fbafa27..30785942c 100644
--- a/src/renderer/src/components/WorktreeJumpPalette.tsx
+++ b/src/renderer/src/components/WorktreeJumpPalette.tsx
@@ -46,6 +46,7 @@ import {
   ORCA_BROWSER_FOCUS_REQUEST_EVENT,
   queueBrowserFocusRequest
 } from '@/components/browser-pane/browser-focus'
+import { RepoBadgeMark } from '@/components/repo/RepoBadgeLabel'
 import type { BrowserPage, BrowserWorkspace, Worktree } from '../../../shared/types'
 import { isGitRepoKind } from '../../../shared/repo-kind'
 
@@ -1043,15 +1044,7 @@ export default function WorktreeJumpPalette(): React.JSX.Element | null {
                         <div className="flex shrink-0 flex-col items-end gap-1.5">
                           {repoName && (
                             <span className="inline-flex max-w-[180px] items-center gap-1.5 rounded-md border border-border bg-muted px-2 py-1 text-[11px] font-semibold leading-none text-foreground">
-                              <span
-                                aria-hidden="true"
-                                className="size-1.5 shrink-0 rounded-full"
-                                style={
-                                  repo?.badgeColor
-                                    ? { backgroundColor: repo.badgeColor }
-                                    : undefined
-                                }
-                              />
+                              <RepoBadgeMark color={repo?.badgeColor} />
                               <span className="truncate">
                                 {entry.match.repoRange ? (
                                   <HighlightedText
@@ -1125,15 +1118,7 @@ export default function WorktreeJumpPalette(): React.JSX.Element | null {
                       <div className="flex shrink-0 flex-col items-end gap-1.5">
                         {browserRepoName && (
                           <span className="inline-flex max-w-[180px] items-center gap-1.5 rounded-md border border-border bg-muted px-2 py-1 text-[11px] font-semibold leading-none text-foreground">
-                            <span
-                              aria-hidden="true"
-                              className="size-1.5 shrink-0 rounded-full"
-                              style={
-                                browserRepo?.badgeColor
-                                  ? { backgroundColor: browserRepo.badgeColor }
-                                  : undefined
-                              }
-                            />
+                            <RepoBadgeMark color={browserRepo?.badgeColor} />
                             <span className="truncate">
                               <HighlightedText
                                 text={browserRepoName}
diff --git a/src/renderer/src/components/activity/ActivityPrototypePage.tsx b/src/renderer/src/components/activity/ActivityPrototypePage.tsx
index 3d5937ea6..d1911328d 100644
--- a/src/renderer/src/components/activity/ActivityPrototypePage.tsx
+++ b/src/renderer/src/components/activity/ActivityPrototypePage.tsx
@@ -27,6 +27,7 @@ import type { RetainedAgentEntry } from '@/store/slices/agent-status'
 import { getRepoMapFromState, getWorktreeMapFromState } from '@/store/selectors'
 import { useSidebarResize } from '@/hooks/useSidebarResize'
 import { Button } from '@/components/ui/button'
+import { RepoBadgeMark } from '@/components/repo/RepoBadgeLabel'
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -868,7 +869,7 @@ function EventRepoBadge({ repo }: { repo: Repo | null }): React.JSX.Element | nu
   }
   return (
     <div className="flex min-w-0 shrink-0 items-center gap-1.5 rounded-[4px] border border-border bg-accent px-1.5 py-0.5 dark:border-border/60 dark:bg-accent/50">
-      <div className="size-1.5 rounded-full" style={{ backgroundColor: repo.badgeColor }} />
+      <RepoBadgeMark color={repo.badgeColor} />
       <span className="max-w-[6rem] truncate text-[10px] font-semibold leading-none text-foreground lowercase">
         {repo.displayName}
       </span>
diff --git a/src/renderer/src/components/automations/AutomationsPage.tsx b/src/renderer/src/components/automations/AutomationsPage.tsx
index 3fdef61a9..27cfef31e 100644
--- a/src/renderer/src/components/automations/AutomationsPage.tsx
+++ b/src/renderer/src/components/automations/AutomationsPage.tsx
@@ -36,7 +36,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import { useAppStore } from '@/store'
 import { cn } from '@/lib/utils'
-import RepoDotLabel from '@/components/repo/RepoDotLabel'
+import RepoBadgeLabel from '@/components/repo/RepoBadgeLabel'
 import { AGENT_CATALOG } from '@/lib/agent-catalog'
 import { useRepoMap, useWorktreeMap } from '@/store/selectors'
 import { activateAndRevealWorktree } from '@/lib/worktree-activation'
@@ -1496,10 +1496,10 @@ export default function AutomationsPage(): React.JSX.Element {
                         </span>
                         <span className="mt-1 flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground">
                           {automationRepo ? (
-                            <RepoDotLabel
+                            <RepoBadgeLabel
                               name={automationRepo.displayName}
                               color={automationRepo.badgeColor}
-                              dotClassName="size-1.5"
+                              badgeClassName="size-1.5"
                             />
                           ) : (
                             <span>Unknown project</span>
diff --git a/src/renderer/src/components/github/IssueSourceIndicator.tsx b/src/renderer/src/components/github/IssueSourceIndicator.tsx
index 1abbc879f..a5ce266f6 100644
--- a/src/renderer/src/components/github/IssueSourceIndicator.tsx
+++ b/src/renderer/src/components/github/IssueSourceIndicator.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import type { GitHubOwnerRepo } from '../../../../shared/types'
-import RepoDotLabel from '@/components/repo/RepoDotLabel'
+import RepoBadgeLabel from '@/components/repo/RepoBadgeLabel'
 import { cn } from '@/lib/utils'
 
 export type IssueSourceIndicatorProps = {
@@ -84,13 +84,13 @@ export default function IssueSourceIndicator({
     >
       {localRepo ? (
         // Why: when multiple repos are selected, a bare "Issues from X/Y" chip
-        // doesn't tell the user which local repo it describes. The dot-label
+        // doesn't tell the user which local repo it describes. The badge label
         // prefix pins the chip to the same visual identity used elsewhere in
         // the Tasks view (row disambiguator, composer target dropdown).
-        <RepoDotLabel
+        <RepoBadgeLabel
           name={localRepo.displayName}
           color={localRepo.color}
-          dotClassName="size-1.5"
+          badgeClassName="size-1.5"
           className="text-[10px] text-muted-foreground"
         />
       ) : null}
diff --git a/src/renderer/src/components/github/IssueSourceSelector.tsx b/src/renderer/src/components/github/IssueSourceSelector.tsx
index a92009484..c88567a9c 100644
--- a/src/renderer/src/components/github/IssueSourceSelector.tsx
+++ b/src/renderer/src/components/github/IssueSourceSelector.tsx
@@ -54,7 +54,7 @@ function segmentClass(state: PillState, disabled: boolean | undefined): string {
 }
 
 // Why: exported so the Tasks-header row can wrap the selector (and the
-// optional per-repo dot-label prefix) in the same pill shape used by the
+// optional per-repo badge label prefix) in the same pill shape used by the
 // static `IssueSourceIndicator`. Keeping the styling here means the chip
 // and its segments stay visually consistent.
 export const issueSourceChipClass =
diff --git a/src/renderer/src/components/repo/RepoBadgeLabel.tsx b/src/renderer/src/components/repo/RepoBadgeLabel.tsx
new file mode 100644
index 000000000..eac57abc0
--- /dev/null
+++ b/src/renderer/src/components/repo/RepoBadgeLabel.tsx
@@ -0,0 +1,33 @@
+import type { CSSProperties } from 'react'
+import { cn } from '@/lib/utils'
+
+type RepoBadgeMarkProps = {
+  color: string | null | undefined
+  className?: string
+}
+
+export function RepoBadgeMark({ color, className }: RepoBadgeMarkProps) {
+  const style: CSSProperties | undefined = color ? { backgroundColor: color } : undefined
+
+  return (
+    <span aria-hidden="true" className={cn('block size-1.5 shrink-0', className)} style={style} />
+  )
+}
+
+type RepoBadgeLabelProps = {
+  name: string
+  color: string
+  className?: string
+  badgeClassName?: string
+}
+
+function RepoBadgeLabel({ name, color, className, badgeClassName }: RepoBadgeLabelProps) {
+  return (
+    <span className={cn('inline-flex min-w-0 items-center gap-1.5', className)}>
+      <RepoBadgeMark color={color} className={badgeClassName} />
+      <span className="truncate">{name}</span>
+    </span>
+  )
+}
+
+export default RepoBadgeLabel
diff --git a/src/renderer/src/components/repo/RepoCombobox.tsx b/src/renderer/src/components/repo/RepoCombobox.tsx
index 408db9162..78365c7d7 100644
--- a/src/renderer/src/components/repo/RepoCombobox.tsx
+++ b/src/renderer/src/components/repo/RepoCombobox.tsx
@@ -14,7 +14,7 @@ import { isGitRepoKind } from '../../../../shared/repo-kind'
 import { searchRepos } from '@/lib/repo-search'
 import { cn } from '@/lib/utils'
 import type { Repo } from '../../../../shared/types'
-import RepoDotLabel from './RepoDotLabel'
+import RepoBadgeLabel from './RepoBadgeLabel'
 
 type RepoComboboxProps = {
   repos: Repo[]
@@ -174,10 +174,10 @@ export default function RepoCombobox({
           >
             {selectedRepo ? (
               <span className="inline-flex min-w-0 items-center gap-1.5">
-                <RepoDotLabel
+                <RepoBadgeLabel
                   name={selectedRepo.displayName}
                   color={selectedRepo.badgeColor}
-                  dotClassName="size-1.5"
+                  badgeClassName="size-1.5"
                 />
                 {selectedRepo.connectionId && (
                   <span className="shrink-0 inline-flex items-center gap-0.5 rounded bg-muted px-1 py-0.5 text-[9px] font-medium leading-none text-muted-foreground">
@@ -221,7 +221,7 @@ export default function RepoCombobox({
                   />
                   <div className="min-w-0 flex-1">
                     <span className="inline-flex items-center gap-1.5">
-                      <RepoDotLabel
+                      <RepoBadgeLabel
                         name={repo.displayName}
                         color={repo.badgeColor}
                         className="max-w-full"
diff --git a/src/renderer/src/components/repo/RepoDotLabel.tsx b/src/renderer/src/components/repo/RepoDotLabel.tsx
deleted file mode 100644
index 810f691d4..000000000
--- a/src/renderer/src/components/repo/RepoDotLabel.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { CSSProperties } from 'react'
-import { cn } from '@/lib/utils'
-
-type RepoDotLabelProps = {
-  name: string
-  color: string
-  className?: string
-  dotClassName?: string
-}
-
-function RepoDotLabel({ name, color, className, dotClassName }: RepoDotLabelProps) {
-  return (
-    <span className={cn('inline-flex min-w-0 items-center gap-1.5', className)}>
-      <span
-        className={cn('size-1.5 shrink-0 rounded-full', dotClassName)}
-        style={{ backgroundColor: color } as CSSProperties}
-      />
-      <span className="truncate">{name}</span>
-    </span>
-  )
-}
-
-export default RepoDotLabel
diff --git a/src/renderer/src/components/settings/QuickCommandsPane.tsx b/src/renderer/src/components/settings/QuickCommandsPane.tsx
index 99df91108..ac4f03d5a 100644
--- a/src/renderer/src/components/settings/QuickCommandsPane.tsx
+++ b/src/renderer/src/components/settings/QuickCommandsPane.tsx
@@ -17,7 +17,7 @@ import { Button } from '../ui/button'
 import { Command, CommandItem, CommandList } from '../ui/command'
 import { Label } from '../ui/label'
 import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
-import RepoDotLabel from '../repo/RepoDotLabel'
+import RepoBadgeLabel, { RepoBadgeMark } from '../repo/RepoBadgeLabel'
 import { cn } from '@/lib/utils'
 import { useConfirmationDialog } from '@/components/confirmation-dialog'
 
@@ -270,7 +270,7 @@ export function QuickCommandsPane({
                           isSelected ? 'opacity-70' : 'opacity-0'
                         )}
                       />
-                      <RepoDotLabel
+                      <RepoBadgeLabel
                         name={getRepoLabel(repo)}
                         color={repo.badgeColor}
                         className="max-w-full"
@@ -308,13 +308,7 @@ export function QuickCommandsPane({
                       <Badge variant="outline" className="max-w-44 gap-1.5">
                         {scope.type === 'repo' ? (
                           <>
-                            <span
-                              aria-hidden
-                              className="size-1.5 shrink-0 rounded-full"
-                              style={{
-                                backgroundColor: repoById.get(scope.repoId)?.badgeColor
-                              }}
-                            />
+                            <RepoBadgeMark color={repoById.get(scope.repoId)?.badgeColor} />
                             <span className="truncate">{getScopeLabel(scope, repoById)}</span>
                           </>
                         ) : (
diff --git a/src/renderer/src/components/settings/RepositoryIconPicker.tsx b/src/renderer/src/components/settings/RepositoryIconPicker.tsx
index a0f90a20a..fa08c9601 100644
--- a/src/renderer/src/components/settings/RepositoryIconPicker.tsx
+++ b/src/renderer/src/components/settings/RepositoryIconPicker.tsx
@@ -156,7 +156,7 @@ export function RepositoryIconPicker({
             type="button"
             onClick={() => updateRepo(repo.id, { badgeColor: color })}
             className={cn(
-              'size-7 rounded-full transition-all',
+              'size-7 rounded-[4px] transition-all',
               repo.badgeColor === color
                 ? 'ring-2 ring-foreground ring-offset-2 ring-offset-background'
                 : 'hover:ring-1 hover:ring-muted-foreground hover:ring-offset-2 hover:ring-offset-background'
diff --git a/src/renderer/src/components/settings/SettingsSidebar.tsx b/src/renderer/src/components/settings/SettingsSidebar.tsx
index 253b641a3..4d661efac 100644
--- a/src/renderer/src/components/settings/SettingsSidebar.tsx
+++ b/src/renderer/src/components/settings/SettingsSidebar.tsx
@@ -2,6 +2,7 @@ import type { RefObject } from 'react'
 import { ArrowLeft, Search, Server, type LucideIcon, type LucideProps } from 'lucide-react'
 import { useShortcutLabel } from '@/hooks/useShortcutLabel'
 import { cn } from '@/lib/utils'
+import { RepoBadgeMark } from '../repo/RepoBadgeLabel'
 import { Button } from '../ui/button'
 import { Input } from '../ui/input'
 
@@ -161,14 +162,12 @@ export function SettingsSidebar({
                       }
                       className={navItemClassName(isActive)}
                     >
-                      <span
+                      <RepoBadgeMark
+                        color={section.badgeColor}
                         className={cn(
-                          'size-2.5 shrink-0 rounded-full',
+                          'size-2.5',
                           section.badgeColor ? null : 'bg-muted-foreground'
                         )}
-                        style={
-                          section.badgeColor ? { backgroundColor: section.badgeColor } : undefined
-                        }
                       />
                       <span className="truncate">{section.title}</span>
                       {section.isRemote && (
diff --git a/src/renderer/src/components/sidebar/SetupScriptPromptCard.tsx b/src/renderer/src/components/sidebar/SetupScriptPromptCard.tsx
index e433c0f1c..d0d79c6de 100644
--- a/src/renderer/src/components/sidebar/SetupScriptPromptCard.tsx
+++ b/src/renderer/src/components/sidebar/SetupScriptPromptCard.tsx
@@ -7,6 +7,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip
 import { track } from '@/lib/telemetry'
 import { cn } from '@/lib/utils'
 import { getRepositoryLocalCommandsSectionId } from '@/components/settings/repository-settings-targets'
+import { RepoBadgeMark } from '@/components/repo/RepoBadgeLabel'
 import {
   checkRuntimeHooks,
   inspectRuntimeSetupScriptImports,
@@ -352,10 +353,7 @@ function SetupScriptPromptCard(): React.JSX.Element | null {
             <>
               Automate workspace setup for{' '}
               <span className="inline-flex items-center gap-1.5 align-baseline px-1.5 py-0.5 rounded-[4px] bg-accent border border-border dark:bg-accent/50 dark:border-border/60">
-                <span
-                  className="size-1.5 rounded-full"
-                  style={{ backgroundColor: activeRepo.badgeColor }}
-                />
+                <RepoBadgeMark color={activeRepo.badgeColor} />
                 <span className="text-[10px] font-semibold text-foreground truncate max-w-[8rem] leading-none lowercase">
                   {activeRepo.displayName}
                 </span>
diff --git a/src/renderer/src/components/sidebar/SidebarFilter.tsx b/src/renderer/src/components/sidebar/SidebarFilter.tsx
index 389e20006..38893d394 100644
--- a/src/renderer/src/components/sidebar/SidebarFilter.tsx
+++ b/src/renderer/src/components/sidebar/SidebarFilter.tsx
@@ -16,7 +16,7 @@ import {
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
 import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'
-import RepoDotLabel from '@/components/repo/RepoDotLabel'
+import RepoBadgeLabel from '@/components/repo/RepoBadgeLabel'
 import { searchRepos } from '@/lib/repo-search'
 import { cn } from '@/lib/utils'
 import { DEFAULT_SHOW_SLEEPING_WORKSPACES } from '../../../../shared/constants'
@@ -234,7 +234,7 @@ const SidebarFilter = React.memo(function SidebarFilter({
                       className="mx-1 my-0.5 items-center gap-2 rounded-[7px] px-2 py-1 text-[12px] leading-5 font-medium data-[selected=true]:bg-black/8 dark:data-[selected=true]:bg-white/14"
                     >
                       <span className="inline-flex min-w-0 flex-1 items-center gap-1.5">
-                        <RepoDotLabel
+                        <RepoBadgeLabel
                           name={r.displayName}
                           color={r.badgeColor}
                           className="max-w-full"
diff --git a/src/renderer/src/components/sidebar/SidebarRepositoryFilterSection.tsx b/src/renderer/src/components/sidebar/SidebarRepositoryFilterSection.tsx
index 63cba1a8a..5996f3d15 100644
--- a/src/renderer/src/components/sidebar/SidebarRepositoryFilterSection.tsx
+++ b/src/renderer/src/components/sidebar/SidebarRepositoryFilterSection.tsx
@@ -10,7 +10,7 @@ import {
   CommandItem,
   CommandList
 } from '@/components/ui/command'
-import RepoDotLabel from '@/components/repo/RepoDotLabel'
+import RepoBadgeLabel from '@/components/repo/RepoBadgeLabel'
 import { searchRepos } from '@/lib/repo-search'
 import type { Repo } from '../../../../shared/types'
 
@@ -169,7 +169,7 @@ const SidebarRepositoryFilterSection = React.memo(function SidebarRepositoryFilt
               className="mx-1 my-0.5 items-center gap-2 rounded-[7px] px-2 py-1 text-[12px] leading-5 font-medium data-[selected=true]:bg-black/8 dark:data-[selected=true]:bg-white/14"
             >
               <span className="inline-flex min-w-0 flex-1 items-center gap-1.5">
-                <RepoDotLabel
+                <RepoBadgeLabel
                   name={repo.displayName}
                   color={repo.badgeColor}
                   className="max-w-full"
@@ -208,11 +208,11 @@ function SelectedProjectPills({
           variant="outline"
           className="h-5 max-w-full gap-1 border-border/70 bg-background px-1.5 py-0 text-[11px] font-medium"
         >
-          <RepoDotLabel
+          <RepoBadgeLabel
             name={repo.displayName}
             color={repo.badgeColor}
             className="max-w-[8rem]"
-            dotClassName="size-1.5"
+            badgeClassName="size-1.5"
           />
           <Button
             type="button"
diff --git a/src/renderer/src/components/sidebar/WorkspaceKanbanCard.tsx b/src/renderer/src/components/sidebar/WorkspaceKanbanCard.tsx
index 6588adc45..c78c47ea0 100644
--- a/src/renderer/src/components/sidebar/WorkspaceKanbanCard.tsx
+++ b/src/renderer/src/components/sidebar/WorkspaceKanbanCard.tsx
@@ -5,6 +5,7 @@ import { Badge } from '@/components/ui/badge'
 import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import { activateAndRevealWorktree } from '@/lib/worktree-activation'
+import { RepoBadgeMark } from '@/components/repo/RepoBadgeLabel'
 import { cn } from '@/lib/utils'
 import type { Repo, Worktree } from '../../../../shared/types'
 import WorktreeCard from './WorktreeCard'
@@ -228,10 +229,7 @@ function WorkspaceKanbanCompactCard({
                     className="ml-2 flex max-w-[25%] shrink-0 items-center gap-1 rounded-[4px] border border-border bg-accent px-1.5 py-0.5 leading-none dark:border-border/60 dark:bg-accent/50"
                     data-workspace-board-repo-badge=""
                   >
-                    <span
-                      className="size-1.5 shrink-0 rounded-full"
-                      style={{ backgroundColor: repo.badgeColor }}
-                    />
+                    <RepoBadgeMark color={repo.badgeColor} />
                     <span className="min-w-0 truncate text-[10px] font-semibold lowercase text-foreground">
                       {repo.displayName}
                     </span>
diff --git a/src/renderer/src/components/sidebar/WorktreeCard.tsx b/src/renderer/src/components/sidebar/WorktreeCard.tsx
index 45dc3d546..6123d15dc 100644
--- a/src/renderer/src/components/sidebar/WorktreeCard.tsx
+++ b/src/renderer/src/components/sidebar/WorktreeCard.tsx
@@ -43,6 +43,7 @@ import { WorktreeCardPortsDetails, WorktreeCardPortsTrigger } from './WorktreeCa
 import { writeWorkspaceDragData } from './workspace-status'
 import { getWorktreeCardPrDisplay } from './worktree-card-pr-display'
 import { getWorkspacePortsByWorktreeId } from '@/lib/workspace-port-groups'
+import { RepoBadgeMark } from '@/components/repo/RepoBadgeLabel'
 import { hasActiveWorkspaceActivity } from '@/lib/worktree-activity-state'
 import { installWindowVisibilityInterval, isWindowVisible } from '@/lib/window-visibility-interval'
 import { runWorktreeDelete } from './delete-worktree-flow'
@@ -415,8 +416,7 @@ const WorktreeCard = React.memo(function WorktreeCard({
   )
   // Why: deleting the active/current workspace or one with live activity is a
   // disruptive hover action; keep the quick action delete-only and passive.
-  const showDeleteQuickAction =
-    !isCurrentWorktree && !hasActiveActivity && !worktree.isMainWorktree
+  const showDeleteQuickAction = !isCurrentWorktree && !hasActiveActivity && !worktree.isMainWorktree
   const handleWorkspaceQuickAction = useCallback(
     (event: React.MouseEvent<HTMLButtonElement>) => {
       event.preventDefault()
@@ -718,10 +718,7 @@ const WorktreeCard = React.memo(function WorktreeCard({
           <div className="flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden">
             {repo && !hideRepoBadge && (
               <div className="flex items-center gap-1.5 shrink-0 px-1.5 py-0.5 rounded-[4px] bg-accent border border-border dark:bg-accent/50 dark:border-border/60">
-                <div
-                  className="size-1.5 rounded-full"
-                  style={{ backgroundColor: repo.badgeColor }}
-                />
+                <RepoBadgeMark color={repo.badgeColor} />
                 <span className="text-[10px] font-semibold text-foreground truncate max-w-[6rem] leading-none lowercase">
                   {repo.displayName}
                 </span>
diff --git a/src/renderer/src/components/sidebar/WorktreeList.tsx b/src/renderer/src/components/sidebar/WorktreeList.tsx
index 96dae75de..fa9156a19 100644
--- a/src/renderer/src/components/sidebar/WorktreeList.tsx
+++ b/src/renderer/src/components/sidebar/WorktreeList.tsx
@@ -137,6 +137,7 @@ import {
   isLegacyRepoForExternalWorktreeVisibility
 } from '../../../../shared/worktree-ownership'
 import { RepoIconGlyph } from '@/components/repo/repo-icon'
+import { RepoBadgeMark } from '@/components/repo/RepoBadgeLabel'
 
 // How long to wait after a sortEpoch bump before actually re-sorting.
 // Prevents jarring position shifts when background events (AI starting work,
@@ -2214,10 +2215,7 @@ const VirtualizedWorktreeViewport = React.memo(function VirtualizedWorktreeViewp
                         <div className="mt-1 flex min-w-0 items-center gap-1.5">
                           {child.repo && groupBy !== 'repo' ? (
                             <span className="flex h-[16px] shrink-0 items-center gap-1.5 rounded-[4px] border border-border bg-accent px-1.5 text-[10px] font-semibold leading-none text-foreground dark:bg-accent/50 dark:border-border/60">
-                              <span
-                                className="size-1.5 rounded-full"
-                                style={{ backgroundColor: child.repo.badgeColor }}
-                              />
+                              <RepoBadgeMark color={child.repo.badgeColor} />
                               <span className="max-w-[6rem] truncate lowercase">
                                 {child.repo.displayName}
                               </span>
diff --git a/src/renderer/src/components/terminal-quick-commands/TerminalQuickCommandDialog.tsx b/src/renderer/src/components/terminal-quick-commands/TerminalQuickCommandDialog.tsx
index d1beaebff..fb078b33d 100644
--- a/src/renderer/src/components/terminal-quick-commands/TerminalQuickCommandDialog.tsx
+++ b/src/renderer/src/components/terminal-quick-commands/TerminalQuickCommandDialog.tsx
@@ -25,7 +25,7 @@ import {
   SelectValue
 } from '@/components/ui/select'
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
-import RepoDotLabel from '@/components/repo/RepoDotLabel'
+import RepoBadgeLabel from '@/components/repo/RepoBadgeLabel'
 import { isMacUserAgent } from '@/components/terminal-pane/pane-helpers'
 
 type TerminalQuickCommandDialogMode = 'add' | 'edit'
@@ -187,7 +187,7 @@ export function TerminalQuickCommandDialog({
                     <SelectContent>
                       {repos.map((repo) => (
                         <SelectItem key={repo.id} value={repo.id}>
-                          <RepoDotLabel
+                          <RepoBadgeLabel
                             name={getRepoLabel(repo)}
                             color={repo.badgeColor}
                             className="max-w-full"
diff --git a/src/renderer/src/components/ui/repo-multi-combobox.tsx b/src/renderer/src/components/ui/repo-multi-combobox.tsx
index fbfc8bc4a..f46aa008d 100644
--- a/src/renderer/src/components/ui/repo-multi-combobox.tsx
+++ b/src/renderer/src/components/ui/repo-multi-combobox.tsx
@@ -12,7 +12,7 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover
 import { searchRepos } from '@/lib/repo-search'
 import { cn } from '@/lib/utils'
 import type { Repo } from '../../../../shared/types'
-import RepoDotLabel from '@/components/repo/RepoDotLabel'
+import RepoBadgeLabel from '@/components/repo/RepoBadgeLabel'
 
 type RepoMultiComboboxProps = {
   repos: Repo[]
@@ -42,7 +42,11 @@ function renderTriggerLabel(repos: Repo[], selected: ReadonlySet<string>): React
   return (
     <span className="inline-flex min-w-0 items-center gap-1.5 truncate">
       {first ? (
-        <RepoDotLabel name={first.displayName} color={first.badgeColor} dotClassName="size-1.5" />
+        <RepoBadgeLabel
+          name={first.displayName}
+          color={first.badgeColor}
+          badgeClassName="size-1.5"
+        />
       ) : null}
       {second ? <span className="text-muted-foreground">, {second.displayName}</span> : null}
       {rest.length > 0 ? <span className="text-muted-foreground">+{rest.length}</span> : null}
@@ -181,7 +185,7 @@ export default function RepoMultiCombobox({
                   />
                   <div className="min-w-0 flex-1">
                     <span className="inline-flex items-center gap-1.5 text-xs">
-                      <RepoDotLabel
+                      <RepoBadgeLabel
                         name={repo.displayName}
                         color={repo.badgeColor}
                         className="max-w-full"