From ece2d96c634ea423fc0d1cb579eee919a956a4a5 Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Fri, 13 Nov 2026 15:48:04 +1100
Subject: [PATCH] feat(staged): show short repo names on the project grid and
 kanban board

The project grid's cards, the board's cards and the filter chips above
both named repos by their full path (`block/builderbot`,
`block/builderbot/apps/staged`), while the sidebar already showed each
repo's badge short name. They now show the same short name.

Where the short-name logic lives:
- New `src/lib/shared/repoShortLabel.ts`. `repoShortLabel()` returns the
  short name and hue of the repo's badge, the rule the sidebar already
  drew, and `repoFullName()` returns the full path for tooltips. No new
  formatting rule is introduced.

Components changed:
- `ProjectCardLabels.svelte` (grid cards and board cards): a badged repo
  shows its short name in its hue.
- `ProjectFilterChips.svelte` (chip bar above the grid and the board): a
  repo chip shows its short name, as the sidebar's Filter menu does.
- `ProjectRowContent.svelte` and `SidebarFilterMenu.svelte` (sidebar rows
  and Filter menu): no visible change, they now call the shared helper
  instead of looking the badge up inline.

How subpaths and collisions render:
- A badge belongs to one (repo, subpath) pair, so a monorepo subpath has
  its own short name: `block/builderbot` + `apps/staged` reads "staged",
  beside "bb" for the repo itself.
- The backend keeps short names unique across all badges (a second
  "goose" is stored as "goose2", and a rename onto a taken name is
  refused), so two repos never share a label and the frontend adds no
  disambiguation.
- A repo with no badge has no short name and keeps its full path. That
  covers a badge that has not loaded yet and a fork-backed repo in the
  filter chips, whose filter key is the head repo. This matches the
  sidebar Filter menu's existing fallback.

Display label only:
- The full path stays as the tooltip (`title`) on every shortened label;
  a fork-backed card label keeps the fork's path there, as before.
- Card repo order (by full path), filter keys, filter chip order, search
  matching and badge lookups are unchanged.

Tests: unit tests for the helper, and the card-label and filter-chip
component tests now cover short names, subpaths, tooltips, the no-badge
fallback and that a chip still filters on the full repo and subpath.

Left alone, still showing full repo paths (via `RepoLabel`), to handle
separately if wanted: `RepoCard` (the home "Repos" row, the sidebar's
pinned repos and the all-repos view), `BranchCardHeaderInfo`,
`DiffModal`, `ProjectTransferRepoRow`, `RepoConfigForm`,
`RepoSearchInput`, `SuggestedRepos`, `HashtagInput`, `NewSessionModal`
and `ActionsSettingsPanel`. `repoBadgeShortName` in
`projectSearchContext.ts` (search matching and the command palette) reads
the same badge field but was not rerouted through the new helper.

Signed-off-by: Matt Toohey <contact@matttoohey.com>
Co-Authored-By: Claude Fable 5.2 <noreply@anthropic.com>
Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 .../ProjectCardLabels.component.test.ts       | 92 ++++++++++++++---
 .../projects/ProjectCardLabels.svelte         | 33 +++----
 .../ProjectFilterChips.component.test.ts      | 73 ++++++++++++--
 .../projects/ProjectFilterChips.svelte        | 18 +++-
 .../projects/ProjectRowContent.svelte         |  6 +-
 .../projects/SidebarFilterMenu.svelte         |  4 +-
 .../src/lib/shared/repoShortLabel.test.ts     | 98 +++++++++++++++++++
 apps/staged/src/lib/shared/repoShortLabel.ts  | 49 ++++++++++
 8 files changed, 323 insertions(+), 50 deletions(-)
 create mode 100644 apps/staged/src/lib/shared/repoShortLabel.test.ts
 create mode 100644 apps/staged/src/lib/shared/repoShortLabel.ts

diff --git a/apps/staged/src/lib/features/projects/ProjectCardLabels.component.test.ts b/apps/staged/src/lib/features/projects/ProjectCardLabels.component.test.ts
index bda8d57d8..285bd6036 100644
--- a/apps/staged/src/lib/features/projects/ProjectCardLabels.component.test.ts
+++ b/apps/staged/src/lib/features/projects/ProjectCardLabels.component.test.ts
@@ -1,7 +1,9 @@
 // Mounts a card's labels (the home grid's and the board's) over the real
 // tagsStore, with the backend commands and the badge store mocked: the
-// project's tags sit as chips in the same cluster as its repos, and a board
-// card leaves out the chip its column already stands for.
+// project's repos show under their badges' short names (the full path in the
+// tooltip, and in place of a repo with no badge), its tags sit as chips in
+// the same cluster, and a board card leaves out the chip its column already
+// stands for.
 import { flushSync, mount, tick, unmount } from 'svelte';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 import type { Project, ProjectRepo, TagState } from '../../types';
@@ -9,7 +11,7 @@ import { tag, tagState } from '../tags/testStubs/tagFixtures';
 
 const { backend, badges } = vi.hoisted(() => ({
   backend: { state: null as unknown as TagState },
-  /** Badges by `githubRepo`. */
+  /** Badges by `githubRepo`, or `githubRepo:subpath` for a subpath's. */
   badges: new Map<string, { shortName: string; hue: number }>(),
 }));
 
@@ -27,7 +29,10 @@ vi.mock('../../stores/projectsData.svelte', () => ({
   projectsDataStore: { liveProjects: [] },
 }));
 vi.mock('../../stores/repoBadges.svelte', () => ({
-  repoBadgeStore: { lookup: (githubRepo: string) => badges.get(githubRepo) ?? null },
+  repoBadgeStore: {
+    lookup: (githubRepo: string, subpath: string | null | undefined) =>
+      badges.get(subpath ? `${githubRepo}:${subpath}` : githubRepo) ?? null,
+  },
 }));
 
 import { tagsStore } from '../../stores/tags.svelte';
@@ -45,9 +50,9 @@ const PROJECT: Project = {
   updatedAt: 1,
 };
 
-function repo(githubRepo: string): ProjectRepo {
+function repo(githubRepo: string, overrides: Partial<ProjectRepo> = {}): ProjectRepo {
   return {
-    id: githubRepo,
+    id: `${githubRepo}:${overrides.subpath ?? ''}`,
     projectId: 'p1',
     githubRepo,
     branchName: 'main',
@@ -57,6 +62,7 @@ function repo(githubRepo: string): ProjectRepo {
     headRepo: null,
     createdAt: 1,
     updatedAt: 1,
+    ...overrides,
   };
 }
 
@@ -67,13 +73,20 @@ const REPOS = [repo('block/goose'), repo('block/builderbot')];
 async function mountLabels(
   tagIds: string[],
   {
+    project = PROJECT,
     repos = REPOS,
     excludeTagGroupId = null,
     state = tagState(),
-  }: { repos?: ProjectRepo[]; excludeTagGroupId?: string | null; state?: TagState } = {}
+  }: {
+    project?: Project;
+    repos?: ProjectRepo[];
+    excludeTagGroupId?: string | null;
+    state?: TagState;
+  } = {}
 ) {
   badges.clear();
   badges.set('block/builderbot', { shortName: 'bb', hue: 200 });
+  badges.set('block/builderbot:apps/staged', { shortName: 'staged', hue: 120 });
   backend.state = { ...state, assignments: tagIds.map((tagId) => ({ projectId: 'p1', tagId })) };
   await tagsStore.load({ force: true });
   await tick();
@@ -81,7 +94,7 @@ async function mountLabels(
   document.body.appendChild(target);
   component = mount(ProjectCardLabels, {
     target,
-    props: { project: PROJECT, repos, excludeTagGroupId },
+    props: { project, repos, excludeTagGroupId },
   });
   flushSync();
   return target;
@@ -92,6 +105,17 @@ function clusterTexts(root: ParentNode): string[] {
   return [...root.querySelector('.card-labels')!.children].map((el) => el.textContent!.trim());
 }
 
+/** The repos' labels, in order: what each shows and its tooltip. */
+function repoLabels(root: ParentNode): { text: string; title: string }[] {
+  return [
+    ...root.querySelectorAll<HTMLElement>('.card-labels > .repo-badge-label, .repo-line'),
+  ].map((el) => ({
+    text: el.textContent!.trim(),
+    // A badge carries the tooltip itself; a plain label's is its RepoLabel's.
+    title: el.title || el.querySelector<HTMLElement>('.repo-label')!.title,
+  }));
+}
+
 function chipNames(root: ParentNode): string[] {
   return [...root.querySelectorAll('.tag-chip-name')].map((el) => el.textContent!.trim());
 }
@@ -106,8 +130,9 @@ describe('ProjectCardLabels', () => {
   it('shows the tags as chips after the repos, in the same cluster', async () => {
     const target = await mountLabels(['infra', 'p0']);
 
-    // Repos sorted, then the chips: grouped tags, then ungrouped.
-    expect(clusterTexts(target)).toEqual(['block/builderbot', 'block/goose', 'P0', 'infra']);
+    // Repos sorted by full path (the badged one under its short name), then
+    // the chips: grouped tags, then ungrouped.
+    expect(clusterTexts(target)).toEqual(['bb', 'block/goose', 'P0', 'infra']);
     expect(target.querySelectorAll('.card-labels > .repo-badge-label')).toHaveLength(1);
     expect(target.querySelectorAll('.card-labels > .repo-line')).toHaveLength(1);
     expect(target.querySelectorAll('.card-labels > .tag-chip')).toHaveLength(2);
@@ -116,11 +141,56 @@ describe('ProjectCardLabels', () => {
   it('adds nothing for a project without tags', async () => {
     const target = await mountLabels([]);
 
-    expect(clusterTexts(target)).toEqual(['block/builderbot', 'block/goose']);
+    expect(clusterTexts(target)).toEqual(['bb', 'block/goose']);
     expect(target.querySelector('.tag-chip')).toBeNull();
     expect(target.querySelector('.tag-chips-more')).toBeNull();
   });
 
+  it('shows a badged repo’s short name, keeping the full path as its tooltip', async () => {
+    const target = await mountLabels([]);
+
+    expect(repoLabels(target)).toEqual([
+      { text: 'bb', title: 'block/builderbot' },
+      // No badge, so no short name: the full path stays.
+      { text: 'block/goose', title: 'block/goose' },
+    ]);
+  });
+
+  it('shows a monorepo subpath under its own short name', async () => {
+    const target = await mountLabels([], {
+      repos: [
+        repo('block/builderbot', { subpath: 'apps/staged' }),
+        repo('block/builderbot'),
+        // A subpath without a badge keeps its full path.
+        repo('block/builderbot', { subpath: 'apps/web' }),
+      ],
+    });
+
+    // Still ordered by full path, whatever the short names are.
+    expect(repoLabels(target)).toEqual([
+      { text: 'bb', title: 'block/builderbot' },
+      { text: 'staged', title: 'block/builderbot/apps/staged' },
+      { text: 'block/builderbot/apps/web', title: 'block/builderbot/apps/web' },
+    ]);
+  });
+
+  it('names a fork-backed repo by its badge, with the fork’s path as the tooltip', async () => {
+    const target = await mountLabels([], {
+      repos: [repo('block/builderbot', { headRepo: 'someone/builderbot' })],
+    });
+
+    expect(repoLabels(target)).toEqual([{ text: 'bb', title: 'someone/builderbot' }]);
+  });
+
+  it('shortens the project’s own repo while its repos haven’t loaded', async () => {
+    const target = await mountLabels([], {
+      project: { ...PROJECT, githubRepo: 'block/builderbot', subpath: 'apps/staged' },
+      repos: [],
+    });
+
+    expect(repoLabels(target)).toEqual([{ text: 'staged', title: 'block/builderbot/apps/staged' }]);
+  });
+
   it('shows the chips beside "No repo attached" for a project with no repo', async () => {
     const target = await mountLabels(['q4'], { repos: [] });
 
diff --git a/apps/staged/src/lib/features/projects/ProjectCardLabels.svelte b/apps/staged/src/lib/features/projects/ProjectCardLabels.svelte
index 2643adbe8..c711ecc02 100644
--- a/apps/staged/src/lib/features/projects/ProjectCardLabels.svelte
+++ b/apps/staged/src/lib/features/projects/ProjectCardLabels.svelte
@@ -1,17 +1,20 @@
 <!--
   ProjectCardLabels.svelte — what a project card is labelled with, as one
-  wrapping cluster: its repos, sorted, each as its badge (the repo's hue) or a
-  plain label, then its tags as chips (see ProjectTagChips). A project whose
-  repos haven't loaded falls back to its own repo, and one with none says so.
+  wrapping cluster: its repos, sorted, each as its badge (the repo's short
+  name in its hue, as the sidebar's rows show it; see repoShortLabel) with the
+  full path as its tooltip, then its tags as chips (see ProjectTagChips). A
+  repo with no badge yet has no short name and shows its full path instead. A
+  project whose repos haven't loaded falls back to its own repo, and one with
+  none says so.
   Shared by the home grid's cards and the board's; a board card leaves out
   the board's group (`excludeTagGroupId`), whose tag its column stands for.
 -->
 <script lang="ts">
   import type { Project, ProjectRepo } from '../../types';
   import { darkMode } from '../../stores/isDark.svelte';
-  import { repoBadgeStore } from '../../stores/repoBadges.svelte';
   import { badgeBg, badgeFg } from '../../shared/badgeColors';
   import RepoLabel from '../../shared/RepoLabel.svelte';
+  import { repoFullName, repoShortLabel } from '../../shared/repoShortLabel';
   import ProjectTagChips from './ProjectTagChips.svelte';
 
   interface Props {
@@ -23,14 +26,12 @@
 
   let { project, repos, excludeTagGroupId = null }: Props = $props();
 
-  function repoKey(repo: Pick<ProjectRepo, 'githubRepo' | 'subpath'>): string {
-    return repo.subpath ? `${repo.githubRepo}/${repo.subpath}` : repo.githubRepo;
-  }
-
+  // Sorted by full path, as before the labels were shortened: the order of a
+  // card's repos doesn't move with their badges' names.
   let labels = $derived(
     repos.length > 0
       ? [...repos]
-          .sort((a, b) => repoKey(a).localeCompare(repoKey(b)))
+          .sort((a, b) => repoFullName(a).localeCompare(repoFullName(b)))
           .map((repo) => ({
             githubRepo: repo.githubRepo,
             shownRepo: repo.headRepo ?? repo.githubRepo,
@@ -50,16 +51,17 @@
 
 <div class="card-labels">
   {#each labels as label, i (i)}
-    {@const badge = repoBadgeStore.lookup(label.githubRepo, label.subpath)}
+    {@const badge = repoShortLabel(label)}
     {#if badge}
       <span
         class="repo-badge-label"
+        title={repoFullName({ githubRepo: label.shownRepo, subpath: label.subpath })}
         style="background: {badgeBg(badge.hue, darkMode.value)}; color: {badgeFg(
           badge.hue,
           darkMode.value
         )};"
       >
-        <RepoLabel githubRepo={label.shownRepo} subpath={label.subpath} />
+        {badge.shortName}
       </span>
     {:else}
       <span class="repo-line">
@@ -106,13 +108,4 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
-
-  .repo-badge-label :global(.repo-label-prefix) {
-    color: inherit;
-    opacity: 0.6;
-  }
-
-  .repo-badge-label :global(.repo-label-emphasis) {
-    color: inherit;
-  }
 </style>
diff --git a/apps/staged/src/lib/features/projects/ProjectFilterChips.component.test.ts b/apps/staged/src/lib/features/projects/ProjectFilterChips.component.test.ts
index 1feb072fd..ea8460b4f 100644
--- a/apps/staged/src/lib/features/projects/ProjectFilterChips.component.test.ts
+++ b/apps/staged/src/lib/features/projects/ProjectFilterChips.component.test.ts
@@ -1,15 +1,18 @@
 // Mounts the real chip bar over the real projectFiltersStore and tagsStore,
-// with the backend commands and the other data stores mocked: tag chips list
-// the tags in use, in catalog order, with counts; clicking them filters; and a
-// deleted tag's filter neither filters nor keeps Clear up.
+// with the backend commands and the other data stores mocked: repo chips show
+// their badges' short names; tag chips list the tags in use, in catalog order,
+// with counts; clicking them filters; and a deleted tag's filter neither
+// filters nor keeps Clear up.
 import { flushSync, mount, tick, unmount } from 'svelte';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import type { Project, TagState } from '../../types';
 import { tagState, withTagAssigned } from '../tags/testStubs/tagFixtures';
 
-const { backend, projects } = vi.hoisted(() => ({
+const { backend, projects, badges } = vi.hoisted(() => ({
   backend: { state: null as unknown as TagState },
   projects: [] as Project[],
+  /** Badges by `githubRepo:subpath`. */
+  badges: new Map<string, { shortName: string; hue: number }>(),
 }));
 
 const commandsMock = vi.hoisted(() => ({
@@ -35,7 +38,12 @@ vi.mock('../../stores/projectsData.svelte', () => ({
 vi.mock('../../stores/projectState.svelte', () => ({
   projectStateStore: { isUnread: () => false },
 }));
-vi.mock('../../stores/repoBadges.svelte', () => ({ repoBadgeStore: { lookup: () => null } }));
+vi.mock('../../stores/repoBadges.svelte', () => ({
+  repoBadgeStore: {
+    lookup: (githubRepo: string, subpath: string | null | undefined) =>
+      badges.get(`${githubRepo}:${subpath ?? ''}`) ?? null,
+  },
+}));
 vi.mock('./projectStatus', () => ({
   getProjectStatus: () => ({ kind: 'idle', runningCount: 0, runActionPhase: null }),
 }));
@@ -47,7 +55,7 @@ import { tagsStore } from '../../stores/tags.svelte';
 import ProjectFilterChips from './ProjectFilterChips.svelte';
 import { projectFiltersStore } from './projectFilters.svelte';
 
-function project(id: string): Project {
+function project(id: string, overrides: Partial<Project> = {}): Project {
   return {
     id,
     name: `Project ${id}`,
@@ -56,6 +64,7 @@ function project(id: string): Project {
     subpath: null,
     createdAt: 1,
     updatedAt: 1,
+    ...overrides,
   };
 }
 
@@ -110,14 +119,32 @@ function tagChip(root: ParentNode, name: string): HTMLButtonElement {
   return found;
 }
 
+function repoChips(root: ParentNode): HTMLButtonElement[] {
+  return [...root.querySelectorAll<HTMLButtonElement>('.repo-filter')];
+}
+
 function clearChip(root: ParentNode): HTMLButtonElement | null {
   return root.querySelector<HTMLButtonElement>('.clear-chip');
 }
 
 const shown = () => projectFiltersStore.filteredProjects.map((p) => p.id);
 
+/** The chips ahead of the tags': the statuses, then one per repo. */
+const STATUS_AND_REPO_CHIPS = ['Unread 0', 'Running 0', 'bb 1', 'staged 1', 'block/goose 1'];
+
+// The same projects and badges for every test: the mocked data store isn't
+// reactive, so the filter store's repo list is whatever it first computed.
 beforeEach(() => {
-  projects.splice(0, projects.length, project('p1'), project('p2'), project('p3'));
+  projects.splice(
+    0,
+    projects.length,
+    project('p1', { githubRepo: 'block/builderbot', subpath: 'apps/staged' }),
+    project('p2', { githubRepo: 'block/builderbot' }),
+    project('p3', { githubRepo: 'block/goose' })
+  );
+  badges.clear();
+  badges.set('block/builderbot:', { shortName: 'bb', hue: 200 });
+  badges.set('block/builderbot:apps/staged', { shortName: 'staged', hue: 120 });
 });
 
 afterEach(() => {
@@ -127,11 +154,37 @@ afterEach(() => {
   document.body.innerHTML = '';
 });
 
+describe('ProjectFilterChips repo chips', () => {
+  it('shows a badged repo’s short name, with the full path as its tooltip', async () => {
+    const root = await mountChips(tagState());
+
+    // Ordered by full path; a subpath has a short name of its own, and a repo
+    // without a badge keeps its path.
+    expect(chips(root)).toEqual(STATUS_AND_REPO_CHIPS);
+    const [bb, staged, goose] = repoChips(root);
+    expect(bb.title).toBe('block/builderbot');
+    expect(staged.title).toBe('block/builderbot/apps/staged');
+    expect(goose.querySelector<HTMLElement>('.repo-label')!.title).toBe('block/goose');
+  });
+
+  it('still filters on the full repo and subpath', async () => {
+    const root = await mountChips(tagState());
+
+    repoChips(root)[1].click();
+    await settle();
+
+    expect(projectFiltersStore.activeFilters).toEqual(
+      new Set(['repo:block/builderbot:apps/staged'])
+    );
+    expect(shown()).toEqual(['p1']);
+  });
+});
+
 describe('ProjectFilterChips tag chips', () => {
-  it('lists the tags in use after the status chips, in catalog order, with counts', async () => {
+  it('lists the tags in use after the repo chips, in catalog order, with counts', async () => {
     const root = await mountChips();
 
-    expect(chips(root)).toEqual(['Unread 0', 'Running 0', 'Doing 2', 'P0 1', 'q4 1']);
+    expect(chips(root)).toEqual([...STATUS_AND_REPO_CHIPS, 'Doing 2', 'P0 1', 'q4 1']);
     // The tooltip names the group, since two groups can share a tag name.
     expect(tagChip(root, 'Doing').title).toBe('Status: Doing');
     expect(tagChip(root, 'q4').title).toBe('q4');
@@ -189,7 +242,7 @@ describe('ProjectFilterChips tag chips', () => {
     deleted.assignments = deleted.assignments.filter((a) => a.tagId !== 'q4');
     await backendChanged(deleted);
 
-    expect(chips(root)).toEqual(['Unread 0', 'Running 0', 'Doing 2', 'P0 1']);
+    expect(chips(root)).toEqual([...STATUS_AND_REPO_CHIPS, 'Doing 2', 'P0 1']);
     expect(shown()).toEqual(['p1', 'p2', 'p3']);
     expect(projectFiltersStore.hasActiveFilters).toBe(false);
     expect(clearChip(root)).toBeNull();
diff --git a/apps/staged/src/lib/features/projects/ProjectFilterChips.svelte b/apps/staged/src/lib/features/projects/ProjectFilterChips.svelte
index 9fe2f7fd6..cf898b425 100644
--- a/apps/staged/src/lib/features/projects/ProjectFilterChips.svelte
+++ b/apps/staged/src/lib/features/projects/ProjectFilterChips.svelte
@@ -1,7 +1,9 @@
 <!--
   ProjectFilterChips.svelte - Shared project-filter chip bar.
 
-  Unread/running status chips, one chip per repo, then one per tag in catalog
+  Unread/running status chips, one chip per repo (its badge's short name, as
+  the sidebar's Filter menu shows it, with the full path as its tooltip; the
+  full path itself for a repo without a badge), then one per tag in catalog
   order (in its own colour, like TagChip), reading and toggling
   projectFiltersStore directly so the landing page and the sidebar's Filter
   menu can never drift. Tag chips OR within a group and AND across groups and
@@ -13,7 +15,7 @@
   import RepoLabel from '../../shared/RepoLabel.svelte';
   import { badgeBg, badgeBgHover, badgeFg } from '../../shared/badgeColors';
   import { darkMode } from '../../stores/isDark.svelte';
-  import { repoBadgeStore } from '../../stores/repoBadges.svelte';
+  import { repoFullName, repoShortLabel } from '../../shared/repoShortLabel';
   import TagIcon from '../tags/TagIcon.svelte';
   import { TAG_COLOR_VARS } from '../tags/tagColors';
   import { projectFiltersStore } from './projectFilters.svelte';
@@ -41,18 +43,26 @@
     <span class="filter-count">{projectFiltersStore.runningCount}</span>
   </button>
   {#each projectFiltersStore.repoFilters as rf}
-    {@const badge = repoBadgeStore.lookup(rf.repo, rf.subpath || undefined)}
+    {@const repo = { githubRepo: rf.repo, subpath: rf.subpath }}
+    {@const badge = repoShortLabel(repo)}
     {@const filter = { repo: rf.repo, subpath: rf.subpath }}
     {@const active = projectFiltersStore.isFilterActive(filter)}
     <button
       class="filter-chip repo-filter"
       class:active
+      title={badge ? repoFullName(repo) : undefined}
       onclick={(e: MouseEvent) => projectFiltersStore.toggleFilter(filter, e)}
       style={badge
         ? `--repo-bg: ${badgeBg(badge.hue, darkMode.value)}; --repo-fg: ${badgeFg(badge.hue, darkMode.value)}; --repo-bg-hover: ${badgeBgHover(badge.hue, darkMode.value)}`
         : ''}
     >
-      <RepoLabel githubRepo={rf.repo} subpath={rf.subpath || null} />
+      <!-- Badges only exist for a repo's githubRepo while filter keys use
+           headRepo ?? githubRepo, so a fork-backed repo keeps its path. -->
+      {#if badge}
+        {badge.shortName}
+      {:else}
+        <RepoLabel githubRepo={rf.repo} subpath={rf.subpath || null} />
+      {/if}
       <span class="filter-count">{rf.count}</span>
     </button>
   {/each}
diff --git a/apps/staged/src/lib/features/projects/ProjectRowContent.svelte b/apps/staged/src/lib/features/projects/ProjectRowContent.svelte
index f51980552..2b4116705 100644
--- a/apps/staged/src/lib/features/projects/ProjectRowContent.svelte
+++ b/apps/staged/src/lib/features/projects/ProjectRowContent.svelte
@@ -19,7 +19,7 @@
   import type { Project } from '../../types';
   import { projectDisplayName, projectSubtitle, projectActivity } from '../../shared/utils';
   import RepoBadge from '../../shared/RepoBadge.svelte';
-  import { repoBadgeStore } from '../../stores/repoBadges.svelte';
+  import { repoShortLabel, type RepoShortLabel } from '../../shared/repoShortLabel';
   import { projectsDataStore } from '../../stores/projectsData.svelte';
   import { projectStateStore } from '../../stores/projectState.svelte';
   import { disconnectedSessionsStore } from '../../stores/disconnectedSessions.svelte';
@@ -57,8 +57,8 @@
   );
   let badges = $derived(
     (projectsDataStore.reposByProject.get(project.id) ?? [])
-      .map((r) => repoBadgeStore.lookup(r.githubRepo, r.subpath))
-      .filter((b): b is NonNullable<typeof b> => Boolean(b))
+      .map((r) => repoShortLabel(r))
+      .filter((b): b is RepoShortLabel => Boolean(b))
       .sort((a, b) => a.shortName.localeCompare(b.shortName))
   );
   let sessionTypes = $derived(projectStateStore.getRunningSessionTypes(project.id));
diff --git a/apps/staged/src/lib/features/projects/SidebarFilterMenu.svelte b/apps/staged/src/lib/features/projects/SidebarFilterMenu.svelte
index d8ed6f672..4e447609c 100644
--- a/apps/staged/src/lib/features/projects/SidebarFilterMenu.svelte
+++ b/apps/staged/src/lib/features/projects/SidebarFilterMenu.svelte
@@ -23,7 +23,7 @@
   import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
   import RepoBadge from '../../shared/RepoBadge.svelte';
   import RepoLabel from '../../shared/RepoLabel.svelte';
-  import { repoBadgeStore } from '../../stores/repoBadges.svelte';
+  import { repoShortLabel } from '../../shared/repoShortLabel';
   import { projectsDataStore } from '../../stores/projectsData.svelte';
   import TagIcon from '../tags/TagIcon.svelte';
   import { projectFiltersStore, type FilterKind } from './projectFilters.svelte';
@@ -150,7 +150,7 @@
       <DropdownMenu.Separator />
       <DropdownMenu.Label>Repo</DropdownMenu.Label>
       {#each projectFiltersStore.repoFilters as rf (rf.repo + '\t' + rf.subpath)}
-        {@const badge = repoBadgeStore.lookup(rf.repo, rf.subpath || undefined)}
+        {@const badge = repoShortLabel({ githubRepo: rf.repo, subpath: rf.subpath })}
         {@const filter = { repo: rf.repo, subpath: rf.subpath }}
         <DropdownMenu.CheckboxItem
           checked={projectFiltersStore.isFilterActive(filter)}
diff --git a/apps/staged/src/lib/shared/repoShortLabel.test.ts b/apps/staged/src/lib/shared/repoShortLabel.test.ts
new file mode 100644
index 000000000..f4ee9061a
--- /dev/null
+++ b/apps/staged/src/lib/shared/repoShortLabel.test.ts
@@ -0,0 +1,98 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import type { RepoBadge } from '../types';
+
+const { badges, store } = vi.hoisted(() => ({
+  /** Badges by `githubRepo:subpath`, as the store keys them. */
+  badges: new Map<string, RepoBadge>(),
+  /** What a lookup answers for a repo without a badge. */
+  store: { missing: undefined as null | undefined },
+}));
+
+vi.mock('../stores/repoBadges.svelte', () => ({
+  repoBadgeStore: {
+    lookup: (githubRepo: string, subpath: string | null | undefined) =>
+      badges.get(`${githubRepo}:${subpath ?? ''}`) ?? store.missing,
+  },
+}));
+
+import { repoFullName, repoShortLabel } from './repoShortLabel';
+
+function addBadge(githubRepo: string, subpath: string, shortName: string, hue: number) {
+  badges.set(`${githubRepo}:${subpath}`, {
+    githubRepo,
+    subpath,
+    shortName,
+    hue,
+    createdAt: 0,
+    pinned: false,
+    pinSortOrder: null,
+    defaultBranch: 'main',
+  });
+}
+
+beforeEach(() => {
+  badges.clear();
+  store.missing = undefined;
+});
+
+describe('repoShortLabel', () => {
+  it('is the short name and hue of the repo’s badge', () => {
+    addBadge('block/goose', '', 'goose', 20);
+
+    expect(repoShortLabel({ githubRepo: 'block/goose' })).toEqual({ shortName: 'goose', hue: 20 });
+  });
+
+  it('treats a missing, null or empty subpath as the repo itself', () => {
+    addBadge('block/goose', '', 'goose', 20);
+
+    expect(repoShortLabel({ githubRepo: 'block/goose', subpath: null })?.shortName).toBe('goose');
+    expect(repoShortLabel({ githubRepo: 'block/goose', subpath: '' })?.shortName).toBe('goose');
+  });
+
+  it('gives a monorepo subpath its own short name, not the repo’s', () => {
+    addBadge('block/builderbot', '', 'bb', 200);
+    addBadge('block/builderbot', 'apps/staged', 'staged', 120);
+
+    expect(repoShortLabel({ githubRepo: 'block/builderbot' })?.shortName).toBe('bb');
+    expect(repoShortLabel({ githubRepo: 'block/builderbot', subpath: 'apps/staged' })).toEqual({
+      shortName: 'staged',
+      hue: 120,
+    });
+  });
+
+  it('keeps two repos with the same name apart by their badges’ names', () => {
+    // The backend dedups on insert; the label shows whatever it stored.
+    addBadge('block/goose', '', 'goose', 20);
+    addBadge('fork/goose', '', 'goose2', 140);
+
+    expect(repoShortLabel({ githubRepo: 'block/goose' })?.shortName).toBe('goose');
+    expect(repoShortLabel({ githubRepo: 'fork/goose' })?.shortName).toBe('goose2');
+  });
+
+  it('is undefined for a repo without a badge, rather than a derived name', () => {
+    addBadge('block/builderbot', '', 'bb', 200);
+
+    expect(repoShortLabel({ githubRepo: 'block/goose' })).toBeUndefined();
+    expect(repoShortLabel({ githubRepo: 'block/builderbot', subpath: 'apps/web' })).toBeUndefined();
+  });
+
+  it('is undefined when the store answers null, as the component tests’ mocks do', () => {
+    store.missing = null;
+
+    expect(repoShortLabel({ githubRepo: 'nobody/nothing' })).toBeUndefined();
+  });
+});
+
+describe('repoFullName', () => {
+  it('is the repo slug without a subpath', () => {
+    expect(repoFullName({ githubRepo: 'block/goose' })).toBe('block/goose');
+    expect(repoFullName({ githubRepo: 'block/goose', subpath: null })).toBe('block/goose');
+    expect(repoFullName({ githubRepo: 'block/goose', subpath: '' })).toBe('block/goose');
+  });
+
+  it('appends the subpath whole', () => {
+    expect(repoFullName({ githubRepo: 'block/builderbot', subpath: 'apps/staged' })).toBe(
+      'block/builderbot/apps/staged'
+    );
+  });
+});
diff --git a/apps/staged/src/lib/shared/repoShortLabel.ts b/apps/staged/src/lib/shared/repoShortLabel.ts
new file mode 100644
index 000000000..17371dfa6
--- /dev/null
+++ b/apps/staged/src/lib/shared/repoShortLabel.ts
@@ -0,0 +1,49 @@
+/**
+ * What a repo is called where its full path would crowd the line: the short
+ * name and hue of its badge.
+ *
+ * A badge belongs to one (githubRepo, subpath) pair, so a monorepo's subpath
+ * has a short name of its own (`block/builderbot` + `apps/staged` → "staged")
+ * rather than a shortened path. The backend keeps short names unique across
+ * every badge (two repos that would both be "goose" get "goose" and "goose2",
+ * and a rename onto a taken name is refused), so nothing here disambiguates:
+ * a short name already stands for exactly one repo.
+ *
+ * Shared by the sidebar (project rows, the Filter menu), the project grid's
+ * cards and the board's, and the filter chips above both, so the surfaces
+ * can't disagree about what a repo's short name is.
+ */
+
+import { repoBadgeStore } from '../stores/repoBadges.svelte';
+
+export interface RepoRef {
+  githubRepo: string;
+  subpath?: string | null;
+}
+
+export interface RepoShortLabel {
+  shortName: string;
+  hue: number;
+}
+
+/**
+ * The repo's short label, or undefined while it has no badge: one that hasn't
+ * loaded or been generated yet, or a fork named by its head repo (badges are
+ * keyed by `githubRepo`). Callers decide what to show then; there is no
+ * second, derived short name to fall back on.
+ *
+ * Reads the badge store, so inside a `$derived` or a template it follows
+ * badges as they load and as they're renamed.
+ */
+export function repoShortLabel(repo: RepoRef): RepoShortLabel | undefined {
+  const badge = repoBadgeStore.lookup(repo.githubRepo, repo.subpath);
+  return badge ? { shortName: badge.shortName, hue: badge.hue } : undefined;
+}
+
+/**
+ * The repo's full path, `org/repo` or `org/repo/subpath`: what a short label's
+ * tooltip says, since the label itself no longer does.
+ */
+export function repoFullName(repo: RepoRef): string {
+  return repo.subpath ? `${repo.githubRepo}/${repo.subpath}` : repo.githubRepo;
+}