From d7077bee72070b63bdc67281ff693c2241bca860 Mon Sep 17 00:00:00 2001
From: "sentry-junior[bot]"
 <264270552+sentry-junior[bot]@users.noreply.github.com>
Date: Fri, 14 Aug 2026 01:21:29 +0000
Subject: [PATCH 01/12] feat(dashboard): Stack sidebar annotations

Co-Authored-By: David Cramer <david@sentry.io>

Co-Authored-By: David Cramer <david@sentry.io>
---
 .../client/conversations/ConversationMeta.tsx |  61 +++++++--
 .../tests/telemetry-components.test.tsx       |  16 ++-
 packages/junior-github/src/annotations.ts     |  73 ++++-------
 packages/junior-github/src/plugin.ts          |   8 +-
 .../junior-github/tests/annotations.test.ts   | 122 ++++++++++--------
 packages/junior-plugin-api/src/annotations.ts |   6 +-
 6 files changed, 155 insertions(+), 131 deletions(-)

diff --git a/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx b/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx
index 8d2b8057e2..5f9619bc31 100644
--- a/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx
+++ b/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx
@@ -96,23 +96,55 @@ export function hasConversationAnnotations(
   );
 }
 
-/** Render annotations selected by plugins for a conversation row. */
+/** Render plugin annotations as a newest-first stack in a conversation row. */
 export function ConversationSidebarAnnotations(props: {
   annotations: ConversationDetailReport["sidebarAnnotations"] | undefined;
 }) {
-  if (!props.annotations?.length) return null;
-  return props.annotations.map((summary) => (
-    <span
-      className="inline-flex min-w-0 max-w-full items-center gap-1 truncate"
-      key={summary.key}
-      title={summary.label}
+  const annotations = props.annotations;
+  if (!annotations?.length) return null;
+  const labels = annotations.map((annotation) => annotation.label).join(", ");
+  return (
+    <Tooltip
+      align="left"
+      content={
+        <ul className="m-0 list-none space-y-1 p-0">
+          {annotations.map((annotation, index) => (
+            <li
+              className="flex items-center gap-1.5"
+              key={`${annotation.key}:${index}`}
+            >
+              {annotation.icon ? (
+                <SidebarAnnotationIcon icon={annotation.icon} />
+              ) : null}
+              <span>{annotation.label}</span>
+            </li>
+          ))}
+        </ul>
+      }
+      label="Linked work"
+      triggerClassName="min-w-0"
     >
-      {summary.icon ? <SidebarAnnotationIcon icon={summary.icon} /> : null}
-      <span className="min-w-0 truncate whitespace-nowrap font-sans text-dashboard-text-muted">
-        {summary.label}
+      <span
+        aria-label={`Linked work, newest first: ${labels}`}
+        className="inline-flex min-w-0 items-center pl-2"
+      >
+        {annotations.map((annotation, index) => (
+          <span
+            className="inline-flex min-w-0 max-w-28 items-center gap-1 truncate rounded-full border border-white/15 bg-dashboard-surface px-2 py-0.5 font-sans text-dashboard-text-muted shadow-sm shadow-black/40 [&:not(:first-child)]:-ml-2"
+            key={`${annotation.key}:${index}`}
+            style={{ zIndex: annotations.length - index }}
+          >
+            {annotation.icon ? (
+              <SidebarAnnotationIcon icon={annotation.icon} />
+            ) : null}
+            <span className="min-w-0 truncate whitespace-nowrap">
+              {annotation.label}
+            </span>
+          </span>
+        ))}
       </span>
-    </span>
-  ));
+    </Tooltip>
+  );
 }
 
 type SidebarAnnotationIconName = NonNullable<
@@ -149,7 +181,10 @@ function SidebarAnnotationIcon(props: {
 }) {
   const presentation = SIDEBAR_ICON_PRESENTATION[props.icon];
   return (
-    <span className={`shrink-0 ${presentation.className}`} title={presentation.label}>
+    <span
+      className={`shrink-0 ${presentation.className}`}
+      title={presentation.label}
+    >
       <presentation.Icon
         aria-hidden="true"
         size={props.size ?? 11}
diff --git a/packages/junior-dashboard/tests/telemetry-components.test.tsx b/packages/junior-dashboard/tests/telemetry-components.test.tsx
index 6b8990da5b..edd2cbab26 100644
--- a/packages/junior-dashboard/tests/telemetry-components.test.tsx
+++ b/packages/junior-dashboard/tests/telemetry-components.test.tsx
@@ -586,19 +586,23 @@ describe("dashboard canonical-event components", () => {
     expect(html).toContain('title="Open pull request"');
   });
 
-  it("renders plugin-selected sidebar annotations", () => {
+  it("renders plugin-selected sidebar annotations in order", () => {
     const html = renderToStaticMarkup(
       <ConversationSidebarAnnotations
         annotations={[
-          { icon: "git-merge", key: "github", label: "2 repos" },
-          { icon: "git-pull-request", key: "open-pr", label: "junior" },
+          { icon: "circle-dot", key: "new", label: "getsentry/junior#2" },
+          { icon: "git-merge", key: "old", label: "getsentry/junior#1" },
         ]}
       />,
     );
-    expect(html).toContain("2 repos");
+    expect(html).toContain(
+      'aria-label="Linked work, newest first: getsentry/junior#2, getsentry/junior#1"',
+    );
+    expect(html.indexOf("getsentry/junior#2")).toBeLessThan(
+      html.indexOf("getsentry/junior#1"),
+    );
+    expect(html).toContain("Open");
     expect(html).toContain("Merged");
-    expect(html).toContain("Open pull request");
-    expect(html).toContain("min-w-0 truncate whitespace-nowrap font-sans");
   });
 
   it("distinguishes initial detail failures from stale refresh failures", () => {
diff --git a/packages/junior-github/src/annotations.ts b/packages/junior-github/src/annotations.ts
index e610223305..b7ac3be463 100644
--- a/packages/junior-github/src/annotations.ts
+++ b/packages/junior-github/src/annotations.ts
@@ -3,14 +3,6 @@ import type {
   ConversationSidebarAnnotation,
 } from "@sentry/junior-plugin-api";
 
-const STATUS_RANK = {
-  warning: 5,
-  open: 4,
-  draft: 3,
-  merged: 2,
-  closed: 1,
-} as const;
-
 const STATUS_ICON = {
   warning: "triangle-alert",
   open: "circle-dot",
@@ -19,18 +11,7 @@ const STATUS_ICON = {
   closed: "circle-x",
 } as const;
 
-type GitHubAnnotationStatus = keyof typeof STATUS_RANK;
-
-function repositoryScope(
-  annotation: ConversationAnnotation,
-): { key: string; label: string } | undefined {
-  try {
-    const [, owner, repo] = new URL(annotation.url).pathname.split("/");
-    return owner && repo ? { key: `${owner}/${repo}`, label: repo } : undefined;
-  } catch {
-    return undefined;
-  }
-}
+type GitHubAnnotationStatus = keyof typeof STATUS_ICON;
 
 function isPullRequestUrl(url: string): boolean {
   try {
@@ -42,38 +23,32 @@ function isPullRequestUrl(url: string): boolean {
 
 function sidebarIconForStatus(
   status: GitHubAnnotationStatus,
-  links: Array<{ isPullRequest: boolean; status: GitHubAnnotationStatus }>,
+  url: string,
 ): ConversationSidebarAnnotation["icon"] {
-  if (
-    status === "open" &&
-    links.some((link) => link.status === "open" && link.isPullRequest)
-  ) {
-    return "git-pull-request";
-  }
+  if (status === "open" && isPullRequestUrl(url)) return "git-pull-request";
   return STATUS_ICON[status];
 }
 
-/** Select the one GitHub annotation summary shown in a conversation row. */
-export function githubSidebarAnnotation(
+/** Return GitHub annotations for a conversation row, newest first. */
+export function githubSidebarAnnotations(
   annotations: ConversationAnnotation[],
-): ConversationSidebarAnnotation | undefined {
-  const links = annotations.flatMap((annotation) => {
-    const repo = repositoryScope(annotation);
-    const status = annotation.status as GitHubAnnotationStatus | undefined;
-    return repo && status
-      ? [{ isPullRequest: isPullRequestUrl(annotation.url), repo, status }]
-      : [];
-  });
-  if (links.length === 0) return undefined;
-  const repos = new Map(links.map((link) => [link.repo.key, link.repo.label]));
-  const status = links.reduce<GitHubAnnotationStatus>(
-    (current, link) =>
-      STATUS_RANK[link.status] > STATUS_RANK[current] ? link.status : current,
-    "closed",
-  );
-  return {
-    icon: sidebarIconForStatus(status, links),
-    key: "github",
-    label: repos.size === 1 ? [...repos.values()][0]! : `${repos.size} repos`,
-  };
+): ConversationSidebarAnnotation[] {
+  return annotations
+    .flatMap((annotation) => {
+      const status = annotation.status as GitHubAnnotationStatus | undefined;
+      return status
+        ? [
+            {
+              annotation: {
+                icon: sidebarIconForStatus(status, annotation.url),
+                key: annotation.key,
+                label: annotation.label,
+              },
+              updatedAt: annotation.updatedAt,
+            },
+          ]
+        : [];
+    })
+    .sort((left, right) => right.updatedAt.localeCompare(left.updatedAt))
+    .map(({ annotation }) => annotation);
 }
diff --git a/packages/junior-github/src/plugin.ts b/packages/junior-github/src/plugin.ts
index 0af6b8071e..e27f78741b 100644
--- a/packages/junior-github/src/plugin.ts
+++ b/packages/junior-github/src/plugin.ts
@@ -40,7 +40,7 @@ import type { GitHubDb } from "./db/database.js";
 import { buildGitHubProfileReport } from "./outcomes/profile-report.js";
 import { buildGitHubOutcomeReport } from "./outcomes/report.js";
 import { classifyGitHubPullRequestCommitComposition } from "./pull-request-outcomes/commit-composition.js";
-import { githubSidebarAnnotation } from "./annotations.js";
+import { githubSidebarAnnotations } from "./annotations.js";
 import {
   listGitHubAssignedWork,
   listGitHubFinishedWork,
@@ -742,10 +742,12 @@ export function githubPlugin(
         return {
           annotationsByConversationId: Object.fromEntries(
             ctx.conversationIds.flatMap((conversationId) => {
-              const annotation = githubSidebarAnnotation(
+              const annotations = githubSidebarAnnotations(
                 ctx.annotationsByConversationId[conversationId] ?? [],
               );
-              return annotation ? [[conversationId, [annotation]]] : [];
+              return annotations.length > 0
+                ? [[conversationId, annotations]]
+                : [];
             }),
           ),
         };
diff --git a/packages/junior-github/tests/annotations.test.ts b/packages/junior-github/tests/annotations.test.ts
index 9734fc0a53..e15dbe1980 100644
--- a/packages/junior-github/tests/annotations.test.ts
+++ b/packages/junior-github/tests/annotations.test.ts
@@ -3,13 +3,14 @@ import {
   type ConversationAnnotation,
 } from "@sentry/junior-plugin-api";
 import { describe, expect, it } from "vitest";
-import { githubSidebarAnnotation } from "../src/annotations";
+import { githubSidebarAnnotations } from "../src/annotations";
 
 function annotation(
   repo: string,
   number: number,
   status: NonNullable<ConversationAnnotation["status"]>,
   owner = "getsentry",
+  updatedAt = "2026-01-01T00:00:01.000Z",
   kind: "pull" | "issues" = "pull",
 ): ConversationAnnotation {
   return {
@@ -19,73 +20,82 @@ function annotation(
     label: `${owner}/${repo}#${number}`,
     plugin: "github",
     status,
-    updatedAt: "2026-01-01T00:00:01.000Z",
+    updatedAt,
     url: `https://github.com/${owner}/${repo}/${kind}/${number}`,
   };
 }
 
 describe("GitHub conversation sidebar", () => {
-  it("selects repository scope and final status", () => {
-    expect(
-      githubSidebarAnnotation([
-        annotation("junior", 1, "merged"),
-        annotation("junior", 2, "closed"),
-      ]),
-    ).toEqual({ icon: "git-merge", key: "github", label: "junior" });
-    expect(
-      githubSidebarAnnotation([
-        annotation("junior", 1, "merged"),
-        annotation("payments", 2, "open"),
-      ]),
-    ).toEqual({ icon: "git-pull-request", key: "github", label: "2 repos" });
-    expect(
-      githubSidebarAnnotation([
-        annotation("junior", 1, "closed"),
-        annotation("junior", 2, "closed"),
-      ]),
-    ).toEqual({ icon: "circle-x", key: "github", label: "junior" });
+  it("returns every annotation newest first", () => {
+    const sidebar = githubSidebarAnnotations([
+      annotation(
+        "junior",
+        1,
+        "merged",
+        "getsentry",
+        "2026-01-01T00:00:01.000Z",
+      ),
+      annotation(
+        "payments",
+        2,
+        "open",
+        "getsentry",
+        "2026-01-01T00:00:02.000Z",
+      ),
+      annotation(
+        "junior",
+        3,
+        "closed",
+        "getsentry",
+        "2026-01-01T00:00:03.000Z",
+      ),
+    ]);
+
+    expect(sidebar).toEqual([
+      {
+        icon: "circle-x",
+        key: "getsentry/junior#3",
+        label: "getsentry/junior#3",
+      },
+      {
+        icon: "git-pull-request",
+        key: "getsentry/payments#2",
+        label: "getsentry/payments#2",
+      },
+      {
+        icon: "git-merge",
+        key: "getsentry/junior#1",
+        label: "getsentry/junior#1",
+      },
+    ]);
+    expect(() =>
+      conversationSidebarAnnotationSchema.array().parse(sidebar),
+    ).not.toThrow();
   });
 
   it("uses the pull request icon for open pull requests", () => {
-    expect(githubSidebarAnnotation([annotation("junior", 1, "open")])).toEqual({
-      icon: "git-pull-request",
-      key: "github",
-      label: "junior",
-    });
+    expect(githubSidebarAnnotations([annotation("junior", 1, "open")])).toEqual(
+      [
+        {
+          icon: "git-pull-request",
+          key: "getsentry/junior#1",
+          label: "getsentry/junior#1",
+        },
+      ],
+    );
   });
 
   it("keeps the issue icon for open issues", () => {
     expect(
-      githubSidebarAnnotation([annotation("junior", 1, "open", "getsentry", "issues")]),
-    ).toEqual({ icon: "circle-dot", key: "github", label: "junior" });
-  });
-
-  it("prefers the pull request icon when open issues and pull requests mix", () => {
-    expect(
-      githubSidebarAnnotation([
-        annotation("junior", 1, "open", "getsentry", "issues"),
-        annotation("junior", 2, "open"),
-      ]),
-    ).toEqual({ icon: "git-pull-request", key: "github", label: "junior" });
-  });
-
-  it("counts repositories with the same name under different owners", () => {
-    expect(
-      githubSidebarAnnotation([
-        annotation("shared", 1, "merged", "getsentry"),
-        annotation("shared", 2, "open", "example"),
+      githubSidebarAnnotations([
+        annotation("junior", 1, "open", "getsentry", undefined, "issues"),
       ]),
-    ).toEqual({ icon: "git-pull-request", key: "github", label: "2 repos" });
-  });
-
-  it("keeps valid 100-character GitHub repository names", () => {
-    const repo = "r".repeat(100);
-    const sidebar = githubSidebarAnnotation([annotation(repo, 1, "open")]);
-    expect(sidebar).toEqual({
-      icon: "git-pull-request",
-      key: "github",
-      label: repo,
-    });
-    expect(() => conversationSidebarAnnotationSchema.parse(sidebar)).not.toThrow();
+    ).toEqual([
+      {
+        icon: "circle-dot",
+        key: "getsentry/junior#1",
+        label: "getsentry/junior#1",
+      },
+    ]);
   });
 });
diff --git a/packages/junior-plugin-api/src/annotations.ts b/packages/junior-plugin-api/src/annotations.ts
index 3595c12220..904427a700 100644
--- a/packages/junior-plugin-api/src/annotations.ts
+++ b/packages/junior-plugin-api/src/annotations.ts
@@ -73,8 +73,6 @@ export interface ConversationSidebarHookContext extends PluginContext {
 }
 
 export interface ConversationSidebarResult {
-  annotationsByConversationId: Record<
-    string,
-    ConversationSidebarAnnotation[]
-  >;
+  /** Sidebar annotations in display order. Put the newest annotation first. */
+  annotationsByConversationId: Record<string, ConversationSidebarAnnotation[]>;
 }

From 59e90e19d757f9bf71fd538e9e9e1970f664c50d Mon Sep 17 00:00:00 2001
From: "sentry-junior[bot]"
 <264270552+sentry-junior[bot]@users.noreply.github.com>
Date: Fri, 14 Aug 2026 01:29:12 +0000
Subject: [PATCH 02/12] feat(dashboard): Prefer repo names in stacked
 annotations

Show compact repository names on stacked sidebar chips and keep the full resource key in the desktop tooltip.

Co-Authored-By: David Cramer <david@sentry.io>

Co-Authored-By: David Cramer <david@sentry.io>
---
 .../client/conversations/ConversationMeta.tsx | 25 +++++++--
 .../src/mock-reporting/fixtures.ts            | 55 +++++++++++++++++--
 .../tests/dashboard-mock-routes.test.ts       | 11 +++-
 .../tests/telemetry-components.test.tsx       | 20 +++++--
 packages/junior-github/src/annotations.ts     | 16 +++++-
 .../junior-github/tests/annotations.test.ts   | 19 +++++--
 6 files changed, 121 insertions(+), 25 deletions(-)

diff --git a/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx b/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx
index 5f9619bc31..23219be11b 100644
--- a/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx
+++ b/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx
@@ -102,7 +102,9 @@ export function ConversationSidebarAnnotations(props: {
 }) {
   const annotations = props.annotations;
   if (!annotations?.length) return null;
-  const labels = annotations.map((annotation) => annotation.label).join(", ");
+  const labels = annotations
+    .map((annotation) => sidebarAnnotationDetail(annotation))
+    .join(", ");
   return (
     <Tooltip
       align="left"
@@ -110,13 +112,15 @@ export function ConversationSidebarAnnotations(props: {
         <ul className="m-0 list-none space-y-1 p-0">
           {annotations.map((annotation, index) => (
             <li
-              className="flex items-center gap-1.5"
+              className="flex min-w-0 items-center gap-1.5"
               key={`${annotation.key}:${index}`}
             >
               {annotation.icon ? (
                 <SidebarAnnotationIcon icon={annotation.icon} />
               ) : null}
-              <span>{annotation.label}</span>
+              <span className="min-w-0 truncate">
+                {sidebarAnnotationDetail(annotation)}
+              </span>
             </li>
           ))}
         </ul>
@@ -126,11 +130,11 @@ export function ConversationSidebarAnnotations(props: {
     >
       <span
         aria-label={`Linked work, newest first: ${labels}`}
-        className="inline-flex min-w-0 items-center pl-2"
+        className="inline-flex min-w-0 max-w-full items-center pl-2"
       >
         {annotations.map((annotation, index) => (
           <span
-            className="inline-flex min-w-0 max-w-28 items-center gap-1 truncate rounded-full border border-white/15 bg-dashboard-surface px-2 py-0.5 font-sans text-dashboard-text-muted shadow-sm shadow-black/40 [&:not(:first-child)]:-ml-2"
+            className="inline-flex min-w-0 max-w-24 shrink items-center gap-1 truncate rounded-full border border-white/15 bg-dashboard-surface px-2 py-0.5 font-sans text-dashboard-text-muted shadow-sm shadow-black/40 first:max-w-28 first:shrink-0 [&:not(:first-child)]:-ml-2"
             key={`${annotation.key}:${index}`}
             style={{ zIndex: annotations.length - index }}
           >
@@ -147,6 +151,17 @@ export function ConversationSidebarAnnotations(props: {
   );
 }
 
+function sidebarAnnotationDetail(annotation: {
+  key: string;
+  label: string;
+}): string {
+  // Prefer the plugin key when it carries a fuller resource identity than the
+  // compact stack label (for example owner/repo#123 vs repo).
+  return annotation.key.includes("/") || annotation.key.includes("#")
+    ? annotation.key
+    : annotation.label;
+}
+
 type SidebarAnnotationIconName = NonNullable<
   NonNullable<ConversationDetailReport["sidebarAnnotations"]>[number]["icon"]
 >;
diff --git a/packages/junior-dashboard/src/mock-reporting/fixtures.ts b/packages/junior-dashboard/src/mock-reporting/fixtures.ts
index 40ff7a1063..f43f5b1feb 100644
--- a/packages/junior-dashboard/src/mock-reporting/fixtures.ts
+++ b/packages/junior-dashboard/src/mock-reporting/fixtures.ts
@@ -133,7 +133,13 @@ function activeConversation(nowMs: number): ConversationDetailReport {
     assignedWork: true,
     unfinishedWork: true,
     isPriority: true,
-    sidebarAnnotations: [{ icon: "git-pull-request", key: "github", label: "payments" }],
+    sidebarAnnotations: [
+      {
+        icon: "git-pull-request",
+        key: "getsentry/payments#42",
+        label: "payments",
+      },
+    ],
     annotations: [
       {
         kind: "resource_link",
@@ -331,7 +337,18 @@ function dashboardQaConversation(nowMs: number): ConversationDetailReport {
     assignedWork: true,
     unfinishedWork: true,
     isPriority: true,
-    sidebarAnnotations: [{ icon: "git-pull-request", key: "github", label: "junior" }],
+    sidebarAnnotations: [
+      {
+        icon: "git-pull-request",
+        key: "getsentry/junior#1081",
+        label: "junior",
+      },
+      {
+        icon: "circle-dot",
+        key: "getsentry/junior#1090",
+        label: "junior",
+      },
+    ],
     annotations: [
       {
         kind: "resource_link",
@@ -763,7 +780,23 @@ function longConversation(nowMs: number): ConversationDetailReport {
     assignedWork: true,
     unfinishedWork: true,
     isPriority: true,
-    sidebarAnnotations: [{ icon: "git-pull-request", key: "github", label: "2 repos" }],
+    sidebarAnnotations: [
+      {
+        icon: "circle-dashed",
+        key: "getsentry/junior#2201",
+        label: "junior",
+      },
+      {
+        icon: "git-pull-request",
+        key: "getsentry/payments#91",
+        label: "payments",
+      },
+      {
+        icon: "git-pull-request",
+        key: "getsentry/payments#88",
+        label: "payments",
+      },
+    ],
     annotations: [
       {
         kind: "resource_link",
@@ -839,7 +872,18 @@ function incidentConversation(nowMs: number): ConversationDetailReport {
     // Finished links show the final annotation state in the sidebar.
     assignedWork: true,
     finishedWorkAt: iso(nowMs, -42 * 60_000),
-    sidebarAnnotations: [{ icon: "git-merge", key: "github", label: "payments" }],
+    sidebarAnnotations: [
+      {
+        icon: "git-merge",
+        key: "getsentry/payments#77",
+        label: "payments",
+      },
+      {
+        icon: "circle-x",
+        key: "getsentry/payments#61",
+        label: "payments",
+      },
+    ],
     annotations: [
       {
         kind: "resource_link",
@@ -1736,7 +1780,8 @@ export function readMockPeoplePluginReports(
             id: "pull-requests-created",
             type: "bar_chart",
             title: "Pull requests opened",
-            description: "Junior-owned pull requests opened for this person per day",
+            description:
+              "Junior-owned pull requests opened for this person per day",
             timeRangeDays: [7, 30, 90],
             series: [{ key: "created", label: "Opened" }],
             categories: days,
diff --git a/packages/junior-dashboard/tests/dashboard-mock-routes.test.ts b/packages/junior-dashboard/tests/dashboard-mock-routes.test.ts
index c7449b85d9..0d62b924b9 100644
--- a/packages/junior-dashboard/tests/dashboard-mock-routes.test.ts
+++ b/packages/junior-dashboard/tests/dashboard-mock-routes.test.ts
@@ -262,7 +262,16 @@ describe("dashboard canonical-event mock routes", () => {
     );
     expect(dashboardQa.annotations).toHaveLength(2);
     expect(dashboardQa.sidebarAnnotations).toEqual([
-      { icon: "git-pull-request", key: "github", label: "junior" },
+      {
+        icon: "git-pull-request",
+        key: "getsentry/junior#1081",
+        label: "junior",
+      },
+      {
+        icon: "circle-dot",
+        key: "getsentry/junior#1090",
+        label: "junior",
+      },
     ]);
     expect(dashboardQa.unfinishedWork).toBe(true);
 
diff --git a/packages/junior-dashboard/tests/telemetry-components.test.tsx b/packages/junior-dashboard/tests/telemetry-components.test.tsx
index edd2cbab26..ddbd49934d 100644
--- a/packages/junior-dashboard/tests/telemetry-components.test.tsx
+++ b/packages/junior-dashboard/tests/telemetry-components.test.tsx
@@ -590,17 +590,25 @@ describe("dashboard canonical-event components", () => {
     const html = renderToStaticMarkup(
       <ConversationSidebarAnnotations
         annotations={[
-          { icon: "circle-dot", key: "new", label: "getsentry/junior#2" },
-          { icon: "git-merge", key: "old", label: "getsentry/junior#1" },
+          {
+            icon: "circle-dot",
+            key: "getsentry/junior#2",
+            label: "junior",
+          },
+          {
+            icon: "git-merge",
+            key: "getsentry/payments#1",
+            label: "payments",
+          },
         ]}
       />,
     );
     expect(html).toContain(
-      'aria-label="Linked work, newest first: getsentry/junior#2, getsentry/junior#1"',
-    );
-    expect(html.indexOf("getsentry/junior#2")).toBeLessThan(
-      html.indexOf("getsentry/junior#1"),
+      'aria-label="Linked work, newest first: getsentry/junior#2, getsentry/payments#1"',
     );
+    expect(html.indexOf(">junior<")).toBeLessThan(html.indexOf(">payments<"));
+    expect(html).toContain("getsentry/junior#2");
+    expect(html).toContain("getsentry/payments#1");
     expect(html).toContain("Open");
     expect(html).toContain("Merged");
   });
diff --git a/packages/junior-github/src/annotations.ts b/packages/junior-github/src/annotations.ts
index b7ac3be463..d47e24ef47 100644
--- a/packages/junior-github/src/annotations.ts
+++ b/packages/junior-github/src/annotations.ts
@@ -29,6 +29,17 @@ function sidebarIconForStatus(
   return STATUS_ICON[status];
 }
 
+function repositoryName(
+  annotation: ConversationAnnotation,
+): string | undefined {
+  try {
+    const [, , repo] = new URL(annotation.url).pathname.split("/");
+    return repo || undefined;
+  } catch {
+    return undefined;
+  }
+}
+
 /** Return GitHub annotations for a conversation row, newest first. */
 export function githubSidebarAnnotations(
   annotations: ConversationAnnotation[],
@@ -36,13 +47,14 @@ export function githubSidebarAnnotations(
   return annotations
     .flatMap((annotation) => {
       const status = annotation.status as GitHubAnnotationStatus | undefined;
-      return status
+      const label = repositoryName(annotation);
+      return status && label
         ? [
             {
               annotation: {
                 icon: sidebarIconForStatus(status, annotation.url),
                 key: annotation.key,
-                label: annotation.label,
+                label,
               },
               updatedAt: annotation.updatedAt,
             },
diff --git a/packages/junior-github/tests/annotations.test.ts b/packages/junior-github/tests/annotations.test.ts
index e15dbe1980..08caef1f63 100644
--- a/packages/junior-github/tests/annotations.test.ts
+++ b/packages/junior-github/tests/annotations.test.ts
@@ -55,17 +55,17 @@ describe("GitHub conversation sidebar", () => {
       {
         icon: "circle-x",
         key: "getsentry/junior#3",
-        label: "getsentry/junior#3",
+        label: "junior",
       },
       {
         icon: "git-pull-request",
         key: "getsentry/payments#2",
-        label: "getsentry/payments#2",
+        label: "payments",
       },
       {
         icon: "git-merge",
         key: "getsentry/junior#1",
-        label: "getsentry/junior#1",
+        label: "junior",
       },
     ]);
     expect(() =>
@@ -79,7 +79,7 @@ describe("GitHub conversation sidebar", () => {
         {
           icon: "git-pull-request",
           key: "getsentry/junior#1",
-          label: "getsentry/junior#1",
+          label: "junior",
         },
       ],
     );
@@ -88,13 +88,20 @@ describe("GitHub conversation sidebar", () => {
   it("keeps the issue icon for open issues", () => {
     expect(
       githubSidebarAnnotations([
-        annotation("junior", 1, "open", "getsentry", undefined, "issues"),
+        annotation(
+          "junior",
+          1,
+          "open",
+          "getsentry",
+          "2026-01-01T00:00:01.000Z",
+          "issues",
+        ),
       ]),
     ).toEqual([
       {
         icon: "circle-dot",
         key: "getsentry/junior#1",
-        label: "getsentry/junior#1",
+        label: "junior",
       },
     ]);
   });

From 9cc6737687b302f13b685f41f337149dbea3a732 Mon Sep 17 00:00:00 2001
From: "sentry-junior[bot]"
 <264270552+sentry-junior[bot]@users.noreply.github.com>
Date: Fri, 14 Aug 2026 01:37:14 +0000
Subject: [PATCH 03/12] feat(dashboard): Use icon-only stacked annotations

Keep sidebar linked-work chips as a compact icon stack and move labels into the desktop tooltip. Hide channel location when annotations already own the meta row.

Co-Authored-By: David Cramer <david@sentry.io>

Co-Authored-By: David Cramer <david@sentry.io>
---
 .../client/conversations/ConversationMeta.tsx | 33 +++++++++----------
 .../conversations/ConversationSidebar.tsx     | 15 ++++-----
 .../tests/telemetry-components.test.tsx       |  6 ++--
 3 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx b/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx
index 23219be11b..12aebe4894 100644
--- a/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx
+++ b/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx
@@ -96,15 +96,15 @@ export function hasConversationAnnotations(
   );
 }
 
-/** Render plugin annotations as a newest-first stack in a conversation row. */
+/** Render plugin annotations as a newest-first icon stack in a conversation row. */
 export function ConversationSidebarAnnotations(props: {
   annotations: ConversationDetailReport["sidebarAnnotations"] | undefined;
 }) {
   const annotations = props.annotations;
   if (!annotations?.length) return null;
-  const labels = annotations
-    .map((annotation) => sidebarAnnotationDetail(annotation))
-    .join(", ");
+  const details = annotations.map((annotation) =>
+    sidebarAnnotationDetail(annotation),
+  );
   return (
     <Tooltip
       align="left"
@@ -118,32 +118,31 @@ export function ConversationSidebarAnnotations(props: {
               {annotation.icon ? (
                 <SidebarAnnotationIcon icon={annotation.icon} />
               ) : null}
-              <span className="min-w-0 truncate">
-                {sidebarAnnotationDetail(annotation)}
-              </span>
+              <span className="min-w-0 truncate">{details[index]}</span>
             </li>
           ))}
         </ul>
       }
       label="Linked work"
-      triggerClassName="min-w-0"
+      triggerClassName="min-w-0 shrink-0"
     >
       <span
-        aria-label={`Linked work, newest first: ${labels}`}
-        className="inline-flex min-w-0 max-w-full items-center pl-2"
+        aria-label={`Linked work, newest first: ${details.join(", ")}`}
+        className="inline-flex shrink-0 items-center pl-1.5"
       >
         {annotations.map((annotation, index) => (
           <span
-            className="inline-flex min-w-0 max-w-24 shrink items-center gap-1 truncate rounded-full border border-white/15 bg-dashboard-surface px-2 py-0.5 font-sans text-dashboard-text-muted shadow-sm shadow-black/40 first:max-w-28 first:shrink-0 [&:not(:first-child)]:-ml-2"
+            className="inline-flex size-5 shrink-0 items-center justify-center rounded-full border border-white/15 bg-dashboard-surface shadow-sm shadow-black/40 [&:not(:first-child)]:-ml-1.5"
             key={`${annotation.key}:${index}`}
             style={{ zIndex: annotations.length - index }}
           >
             {annotation.icon ? (
-              <SidebarAnnotationIcon icon={annotation.icon} />
-            ) : null}
-            <span className="min-w-0 truncate whitespace-nowrap">
-              {annotation.label}
-            </span>
+              <SidebarAnnotationIcon icon={annotation.icon} size={12} />
+            ) : (
+              <span className="px-1 font-sans text-2xs text-dashboard-text-muted">
+                {annotation.label.slice(0, 1)}
+              </span>
+            )}
           </span>
         ))}
       </span>
@@ -156,7 +155,7 @@ function sidebarAnnotationDetail(annotation: {
   label: string;
 }): string {
   // Prefer the plugin key when it carries a fuller resource identity than the
-  // compact stack label (for example owner/repo#123 vs repo).
+  // compact label (for example owner/repo#123 vs repo).
   return annotation.key.includes("/") || annotation.key.includes("#")
     ? annotation.key
     : annotation.label;
diff --git a/packages/junior-dashboard/src/client/conversations/ConversationSidebar.tsx b/packages/junior-dashboard/src/client/conversations/ConversationSidebar.tsx
index 26cdf7f3de..1719fd7893 100644
--- a/packages/junior-dashboard/src/client/conversations/ConversationSidebar.tsx
+++ b/packages/junior-dashboard/src/client/conversations/ConversationSidebar.tsx
@@ -190,10 +190,14 @@ function ConversationSidebarRow(props: {
     includeId: false,
   });
   const title = conversationDisplayTitle(props.conversation);
+  const hasAnnotations = Boolean(props.conversation.sidebarAnnotations?.length);
+  // Linked work is denser and more actionable than channel; hide channel when
+  // annotations own the meta row.
+  const showLocation = Boolean(location) && !hasAnnotations;
   const hasMeta =
-    Boolean(location) ||
+    showLocation ||
     props.conversation.visibility === "private" ||
-    Boolean(props.conversation.sidebarAnnotations?.length);
+    hasAnnotations;
   return (
     <div className="group relative min-w-0">
       <Link
@@ -229,12 +233,7 @@ function ConversationSidebarRow(props: {
                 className="size-3 shrink-0"
               />
             ) : null}
-            {location ? <span className="truncate">{location}</span> : null}
-            {location && props.conversation.sidebarAnnotations?.length ? (
-              <span aria-hidden="true" className="shrink-0 opacity-50">
-                ·
-              </span>
-            ) : null}
+            {showLocation ? <span className="truncate">{location}</span> : null}
             <ConversationSidebarAnnotations
               annotations={props.conversation.sidebarAnnotations}
             />
diff --git a/packages/junior-dashboard/tests/telemetry-components.test.tsx b/packages/junior-dashboard/tests/telemetry-components.test.tsx
index ddbd49934d..718ec2fc73 100644
--- a/packages/junior-dashboard/tests/telemetry-components.test.tsx
+++ b/packages/junior-dashboard/tests/telemetry-components.test.tsx
@@ -586,7 +586,7 @@ describe("dashboard canonical-event components", () => {
     expect(html).toContain('title="Open pull request"');
   });
 
-  it("renders plugin-selected sidebar annotations in order", () => {
+  it("renders plugin-selected sidebar annotations as an icon stack", () => {
     const html = renderToStaticMarkup(
       <ConversationSidebarAnnotations
         annotations={[
@@ -606,7 +606,9 @@ describe("dashboard canonical-event components", () => {
     expect(html).toContain(
       'aria-label="Linked work, newest first: getsentry/junior#2, getsentry/payments#1"',
     );
-    expect(html.indexOf(">junior<")).toBeLessThan(html.indexOf(">payments<"));
+    // Stack chips stay icon-only; labels live in the desktop tooltip body.
+    expect(html).not.toContain(">junior<");
+    expect(html).not.toContain(">payments<");
     expect(html).toContain("getsentry/junior#2");
     expect(html).toContain("getsentry/payments#1");
     expect(html).toContain("Open");

From 739ad72498679adbf31a97923edde4eede445c46 Mon Sep 17 00:00:00 2001
From: "sentry-junior[bot]"
 <264270552+sentry-junior[bot]@users.noreply.github.com>
Date: Fri, 14 Aug 2026 01:39:09 +0000
Subject: [PATCH 04/12] test(dashboard): Scope cost tooltip away from
 linked-work stack

The stacked annotation tooltip can stay open on the selected row, so the e2e cost-metric assertion must match the cost tooltip specifically.

Co-Authored-By: David Cramer <david@sentry.io>
---
 packages/junior-dashboard/e2e/conversations.spec.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/junior-dashboard/e2e/conversations.spec.ts b/packages/junior-dashboard/e2e/conversations.spec.ts
index c8a0fcf129..032a6aa326 100644
--- a/packages/junior-dashboard/e2e/conversations.spec.ts
+++ b/packages/junior-dashboard/e2e/conversations.spec.ts
@@ -134,7 +134,8 @@ test("opens a conversation in the built dashboard", async ({ page }) => {
     .filter({ hasText: /^\$0\.03$/ });
   await expect(costMetric).toHaveCount(1);
   await costMetric.focus();
-  const costTooltip = page.getByRole("tooltip");
+  // Scope past sidebar linked-work tooltips that can stay open on the selected row.
+  const costTooltip = page.getByRole("tooltip").filter({ hasText: /\$/ });
   await expect(costTooltip).toBeVisible();
   const tooltipId = await costTooltip.getAttribute("id");
   expect(tooltipId).toBeTruthy();

From 50548b0f79040387ad0e9676ba2a62c3d841be14 Mon Sep 17 00:00:00 2001
From: "sentry-junior[bot]"
 <264270552+sentry-junior[bot]@users.noreply.github.com>
Date: Fri, 14 Aug 2026 01:48:35 +0000
Subject: [PATCH 05/12] feat(dashboard): Label one or two sidebar annotation
 scopes

Keep single and dual-repo stacks readable with repo names, collapse same-repo chips, and only fall back to icon peeks for longer stacks. Tooltip still lists every annotation.

Co-Authored-By: David Cramer <david@sentry.io>

Co-Authored-By: David Cramer <david@sentry.io>
---
 .../client/conversations/ConversationMeta.tsx | 69 ++++++++++++-----
 .../tests/telemetry-components.test.tsx       | 77 ++++++++++++++++---
 2 files changed, 118 insertions(+), 28 deletions(-)

diff --git a/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx b/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx
index 12aebe4894..3de96b9169 100644
--- a/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx
+++ b/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx
@@ -96,7 +96,7 @@ export function hasConversationAnnotations(
   );
 }
 
-/** Render plugin annotations as a newest-first icon stack in a conversation row. */
+/** Render plugin annotations as a newest-first stack in a conversation row. */
 export function ConversationSidebarAnnotations(props: {
   annotations: ConversationDetailReport["sidebarAnnotations"] | undefined;
 }) {
@@ -105,6 +105,13 @@ export function ConversationSidebarAnnotations(props: {
   const details = annotations.map((annotation) =>
     sidebarAnnotationDetail(annotation),
   );
+  // Collapse same-label scopes for the stack so one repo doesn't become two
+  // chips. The tooltip still lists every annotation.
+  const stack = collapseSidebarAnnotationStack(annotations);
+  // One or two distinct scopes stay labeled. Longer stacks keep the newest
+  // label and tuck the rest under as icon peeks.
+  const dualDistinctLabels =
+    stack.length === 2 && stack[0]!.label !== stack[1]!.label;
   return (
     <Tooltip
       align="left"
@@ -124,32 +131,58 @@ export function ConversationSidebarAnnotations(props: {
         </ul>
       }
       label="Linked work"
-      triggerClassName="min-w-0 shrink-0"
+      triggerClassName="min-w-0"
     >
       <span
         aria-label={`Linked work, newest first: ${details.join(", ")}`}
-        className="inline-flex shrink-0 items-center pl-1.5"
+        className="inline-flex min-w-0 max-w-full items-center pl-1.5"
       >
-        {annotations.map((annotation, index) => (
-          <span
-            className="inline-flex size-5 shrink-0 items-center justify-center rounded-full border border-white/15 bg-dashboard-surface shadow-sm shadow-black/40 [&:not(:first-child)]:-ml-1.5"
-            key={`${annotation.key}:${index}`}
-            style={{ zIndex: annotations.length - index }}
-          >
-            {annotation.icon ? (
-              <SidebarAnnotationIcon icon={annotation.icon} size={12} />
-            ) : (
-              <span className="px-1 font-sans text-2xs text-dashboard-text-muted">
-                {annotation.label.slice(0, 1)}
-              </span>
-            )}
-          </span>
-        ))}
+        {stack.map((annotation, index) => {
+          const showLabel = index === 0 || (dualDistinctLabels && index === 1);
+          return (
+            <span
+              className={
+                showLabel
+                  ? "inline-flex min-w-0 max-w-28 shrink items-center gap-1 truncate rounded-full border border-white/15 bg-dashboard-surface px-2 py-0.5 font-sans text-dashboard-text-muted shadow-sm shadow-black/40 first:shrink-0 [&:not(:first-child)]:-ml-2"
+                  : "inline-flex size-5 shrink-0 items-center justify-center rounded-full border border-white/15 bg-dashboard-surface shadow-sm shadow-black/40 [&:not(:first-child)]:-ml-1.5"
+              }
+              key={`${annotation.key}:${index}`}
+              style={{ zIndex: stack.length - index }}
+            >
+              {annotation.icon ? (
+                <SidebarAnnotationIcon
+                  icon={annotation.icon}
+                  size={showLabel ? 11 : 12}
+                />
+              ) : showLabel ? null : (
+                <span className="px-1 font-sans text-2xs text-dashboard-text-muted">
+                  {annotation.label.slice(0, 1)}
+                </span>
+              )}
+              {showLabel ? (
+                <span className="min-w-0 truncate whitespace-nowrap">
+                  {annotation.label}
+                </span>
+              ) : null}
+            </span>
+          );
+        })}
       </span>
     </Tooltip>
   );
 }
 
+function collapseSidebarAnnotationStack(
+  annotations: NonNullable<ConversationDetailReport["sidebarAnnotations"]>,
+): NonNullable<ConversationDetailReport["sidebarAnnotations"]> {
+  const seen = new Set<string>();
+  return annotations.filter((annotation) => {
+    if (seen.has(annotation.label)) return false;
+    seen.add(annotation.label);
+    return true;
+  });
+}
+
 function sidebarAnnotationDetail(annotation: {
   key: string;
   label: string;
diff --git a/packages/junior-dashboard/tests/telemetry-components.test.tsx b/packages/junior-dashboard/tests/telemetry-components.test.tsx
index 718ec2fc73..94a05edae6 100644
--- a/packages/junior-dashboard/tests/telemetry-components.test.tsx
+++ b/packages/junior-dashboard/tests/telemetry-components.test.tsx
@@ -586,8 +586,22 @@ describe("dashboard canonical-event components", () => {
     expect(html).toContain('title="Open pull request"');
   });
 
-  it("renders plugin-selected sidebar annotations as an icon stack", () => {
-    const html = renderToStaticMarkup(
+  it("labels one or two distinct scopes and peeks the rest as icons", () => {
+    const single = renderToStaticMarkup(
+      <ConversationSidebarAnnotations
+        annotations={[
+          {
+            icon: "circle-dot",
+            key: "getsentry/junior#2",
+            label: "junior",
+          },
+        ]}
+      />,
+    );
+    expect(single).toContain(">junior<");
+    expect(single).toContain("getsentry/junior#2");
+
+    const dual = renderToStaticMarkup(
       <ConversationSidebarAnnotations
         annotations={[
           {
@@ -603,16 +617,59 @@ describe("dashboard canonical-event components", () => {
         ]}
       />,
     );
-    expect(html).toContain(
+    expect(dual).toContain(
       'aria-label="Linked work, newest first: getsentry/junior#2, getsentry/payments#1"',
     );
-    // Stack chips stay icon-only; labels live in the desktop tooltip body.
-    expect(html).not.toContain(">junior<");
-    expect(html).not.toContain(">payments<");
-    expect(html).toContain("getsentry/junior#2");
-    expect(html).toContain("getsentry/payments#1");
-    expect(html).toContain("Open");
-    expect(html).toContain("Merged");
+    expect(dual.indexOf(">junior<")).toBeLessThan(dual.indexOf(">payments<"));
+    expect(dual).toContain("Open");
+    expect(dual).toContain("Merged");
+
+    const stacked = renderToStaticMarkup(
+      <ConversationSidebarAnnotations
+        annotations={[
+          {
+            icon: "circle-dashed",
+            key: "getsentry/junior#3",
+            label: "junior",
+          },
+          {
+            icon: "circle-dot",
+            key: "getsentry/payments#2",
+            label: "payments",
+          },
+          {
+            icon: "git-merge",
+            key: "getsentry/relay#1",
+            label: "relay",
+          },
+        ]}
+      />,
+    );
+    expect(stacked).toContain(">junior<");
+    expect(stacked).not.toContain(">payments<");
+    expect(stacked).not.toContain(">relay<");
+    expect(stacked).toContain("getsentry/payments#2");
+    expect(stacked).toContain("getsentry/relay#1");
+
+    const sameRepo = renderToStaticMarkup(
+      <ConversationSidebarAnnotations
+        annotations={[
+          {
+            icon: "circle-dot",
+            key: "getsentry/junior#2",
+            label: "junior",
+          },
+          {
+            icon: "git-merge",
+            key: "getsentry/junior#1",
+            label: "junior",
+          },
+        ]}
+      />,
+    );
+    expect(sameRepo).toContain(">junior<");
+    expect(sameRepo.match(/>junior</g)).toHaveLength(1);
+    expect(sameRepo).toContain("getsentry/junior#1");
   });
 
   it("distinguishes initial detail failures from stale refresh failures", () => {

From 9c1b4105114b82318a8625910dd07b2cc03d95ca Mon Sep 17 00:00:00 2001
From: "sentry-junior[bot]"
 <264270552+sentry-junior[bot]@users.noreply.github.com>
Date: Fri, 14 Aug 2026 02:24:39 +0000
Subject: [PATCH 06/12] feat(dashboard): Cluster overflow sidebar annotations

On desktop, keep one or two repo labels and move extra scopes into a separate +N icon cluster. On mobile, render a compact status facepile only. Tooltip still lists every annotation.

Co-Authored-By: David Cramer <david@sentry.io>

Co-Authored-By: David Cramer <david@sentry.io>
---
 .../client/conversations/ConversationMeta.tsx | 152 ++++++++++++++----
 .../src/mock-reporting/fixtures.ts            |  24 +--
 .../tests/telemetry-components.test.tsx       |   5 +-
 3 files changed, 135 insertions(+), 46 deletions(-)

diff --git a/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx b/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx
index 3de96b9169..3cab2716d2 100644
--- a/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx
+++ b/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx
@@ -8,6 +8,7 @@ import {
   LockKeyhole,
   TriangleAlert,
 } from "lucide-react";
+import { useSyncExternalStore } from "react";
 import { Link } from "react-router";
 import type { ConversationDetailReport } from "@sentry/junior/api/schema";
 
@@ -22,9 +23,12 @@ import {
 } from "../format";
 import { Tooltip } from "../components/Tooltip";
 import { MetricList, type MetricListItem } from "../components/Metric";
+import { cn } from "../styles";
 import { CostMetric, DurationMetric, TokenMetric } from "./TelemetryMetrics";
 import type { Conversation } from "../types";
 
+const MOBILE_MEDIA_QUERY = "(max-width: 767px)";
+
 /** Show a pending OAuth authorization call-to-action above the composer. */
 export function PendingAuthorization(props: {
   authorization: {
@@ -101,17 +105,16 @@ export function ConversationSidebarAnnotations(props: {
   annotations: ConversationDetailReport["sidebarAnnotations"] | undefined;
 }) {
   const annotations = props.annotations;
+  const isMobile = useIsMobileViewport();
   if (!annotations?.length) return null;
+
   const details = annotations.map((annotation) =>
     sidebarAnnotationDetail(annotation),
   );
   // Collapse same-label scopes for the stack so one repo doesn't become two
   // chips. The tooltip still lists every annotation.
   const stack = collapseSidebarAnnotationStack(annotations);
-  // One or two distinct scopes stay labeled. Longer stacks keep the newest
-  // label and tuck the rest under as icon peeks.
-  const dualDistinctLabels =
-    stack.length === 2 && stack[0]!.label !== stack[1]!.label;
+
   return (
     <Tooltip
       align="left"
@@ -137,41 +140,124 @@ export function ConversationSidebarAnnotations(props: {
         aria-label={`Linked work, newest first: ${details.join(", ")}`}
         className="inline-flex min-w-0 max-w-full items-center pl-1.5"
       >
-        {stack.map((annotation, index) => {
-          const showLabel = index === 0 || (dualDistinctLabels && index === 1);
-          return (
-            <span
-              className={
+        {isMobile ? (
+          <SidebarAnnotationIconFacepile annotations={stack} />
+        ) : stack.length <= 2 ? (
+          <span className="inline-flex min-w-0 items-center gap-1">
+            {stack.map((annotation) => (
+              <SidebarAnnotationChip
+                annotation={annotation}
+                key={annotation.key}
                 showLabel
-                  ? "inline-flex min-w-0 max-w-28 shrink items-center gap-1 truncate rounded-full border border-white/15 bg-dashboard-surface px-2 py-0.5 font-sans text-dashboard-text-muted shadow-sm shadow-black/40 first:shrink-0 [&:not(:first-child)]:-ml-2"
-                  : "inline-flex size-5 shrink-0 items-center justify-center rounded-full border border-white/15 bg-dashboard-surface shadow-sm shadow-black/40 [&:not(:first-child)]:-ml-1.5"
-              }
-              key={`${annotation.key}:${index}`}
-              style={{ zIndex: stack.length - index }}
-            >
-              {annotation.icon ? (
-                <SidebarAnnotationIcon
-                  icon={annotation.icon}
-                  size={showLabel ? 11 : 12}
-                />
-              ) : showLabel ? null : (
-                <span className="px-1 font-sans text-2xs text-dashboard-text-muted">
-                  {annotation.label.slice(0, 1)}
-                </span>
-              )}
-              {showLabel ? (
-                <span className="min-w-0 truncate whitespace-nowrap">
-                  {annotation.label}
-                </span>
-              ) : null}
-            </span>
-          );
-        })}
+              />
+            ))}
+          </span>
+        ) : (
+          <>
+            <SidebarAnnotationChip annotation={stack[0]!} showLabel />
+            <SidebarAnnotationOverflowCluster annotations={stack.slice(1)} />
+          </>
+        )}
       </span>
     </Tooltip>
   );
 }
 
+function SidebarAnnotationIconFacepile(props: {
+  annotations: NonNullable<ConversationDetailReport["sidebarAnnotations"]>;
+}) {
+  return (
+    <span className="inline-flex items-center">
+      {props.annotations.map((annotation, index) => (
+        <SidebarAnnotationChip
+          annotation={annotation}
+          key={annotation.key}
+          showLabel={false}
+          stacked={index > 0}
+          zIndex={props.annotations.length - index}
+        />
+      ))}
+    </span>
+  );
+}
+
+function SidebarAnnotationOverflowCluster(props: {
+  annotations: NonNullable<ConversationDetailReport["sidebarAnnotations"]>;
+}) {
+  if (props.annotations.length === 0) return null;
+  return (
+    <span className="ml-1.5 inline-flex h-5 shrink-0 items-center gap-1 rounded-full border border-white/15 bg-dashboard-surface py-0 pl-1.5 pr-1 font-mono text-2xs text-dashboard-text-muted shadow-sm shadow-black/40">
+      <span>+{props.annotations.length}</span>
+      <span className="inline-flex items-center">
+        {props.annotations.map((annotation, index) => (
+          <SidebarAnnotationChip
+            annotation={annotation}
+            key={annotation.key}
+            showLabel={false}
+            stacked={index > 0}
+            zIndex={props.annotations.length - index}
+          />
+        ))}
+      </span>
+    </span>
+  );
+}
+
+function SidebarAnnotationChip(props: {
+  annotation: NonNullable<
+    ConversationDetailReport["sidebarAnnotations"]
+  >[number];
+  showLabel: boolean;
+  /** Overlap this chip under the previous one like an avatar stack. */
+  stacked?: boolean;
+  zIndex?: number;
+}) {
+  return (
+    <span
+      className={
+        props.showLabel
+          ? "inline-flex min-w-0 max-w-28 shrink-0 items-center gap-1 truncate rounded-full border border-white/15 bg-dashboard-surface px-2 py-0.5 font-sans text-dashboard-text-muted shadow-sm shadow-black/40"
+          : cn(
+              "inline-flex size-5 shrink-0 items-center justify-center rounded-full border border-white/15 bg-dashboard-surface shadow-sm shadow-black/40",
+              props.stacked && "-ml-1.5",
+            )
+      }
+      style={props.zIndex === undefined ? undefined : { zIndex: props.zIndex }}
+    >
+      {props.annotation.icon ? (
+        <SidebarAnnotationIcon
+          icon={props.annotation.icon}
+          size={props.showLabel ? 11 : 12}
+        />
+      ) : props.showLabel ? null : (
+        <span className="px-1 font-sans text-2xs text-dashboard-text-muted">
+          {props.annotation.label.slice(0, 1)}
+        </span>
+      )}
+      {props.showLabel ? (
+        <span className="min-w-0 truncate whitespace-nowrap">
+          {props.annotation.label}
+        </span>
+      ) : null}
+    </span>
+  );
+}
+
+function useIsMobileViewport(): boolean {
+  return useSyncExternalStore(
+    (onStoreChange) => {
+      if (typeof window === "undefined") return () => {};
+      const media = window.matchMedia(MOBILE_MEDIA_QUERY);
+      media.addEventListener("change", onStoreChange);
+      return () => media.removeEventListener("change", onStoreChange);
+    },
+    () =>
+      typeof window !== "undefined" &&
+      window.matchMedia(MOBILE_MEDIA_QUERY).matches,
+    () => false,
+  );
+}
+
 function collapseSidebarAnnotationStack(
   annotations: NonNullable<ConversationDetailReport["sidebarAnnotations"]>,
 ): NonNullable<ConversationDetailReport["sidebarAnnotations"]> {
diff --git a/packages/junior-dashboard/src/mock-reporting/fixtures.ts b/packages/junior-dashboard/src/mock-reporting/fixtures.ts
index f43f5b1feb..3fe9bbbc73 100644
--- a/packages/junior-dashboard/src/mock-reporting/fixtures.ts
+++ b/packages/junior-dashboard/src/mock-reporting/fixtures.ts
@@ -792,9 +792,9 @@ function longConversation(nowMs: number): ConversationDetailReport {
         label: "payments",
       },
       {
-        icon: "git-pull-request",
-        key: "getsentry/payments#88",
-        label: "payments",
+        icon: "git-merge",
+        key: "getsentry/relay#44",
+        label: "relay",
       },
     ],
     annotations: [
@@ -810,23 +810,23 @@ function longConversation(nowMs: number): ConversationDetailReport {
       },
       {
         kind: "resource_link",
-        key: "getsentry/payments#88",
-        label: "getsentry/payments#88",
+        key: "getsentry/payments#91",
+        label: "getsentry/payments#91",
         plugin: "github",
         status: "open",
-        url: "https://github.com/getsentry/payments/issues/88",
+        url: "https://github.com/getsentry/payments/pull/91",
         createdAt: startedAt,
-        updatedAt: iso(Date.parse(startedAt), 70_000),
+        updatedAt: iso(Date.parse(startedAt), 75_000),
       },
       {
         kind: "resource_link",
-        key: "getsentry/payments#91",
-        label: "getsentry/payments#91",
+        key: "getsentry/relay#44",
+        label: "getsentry/relay#44",
         plugin: "github",
-        status: "open",
-        url: "https://github.com/getsentry/payments/pull/91",
+        status: "merged",
+        url: "https://github.com/getsentry/relay/pull/44",
         createdAt: startedAt,
-        updatedAt: iso(Date.parse(startedAt), 75_000),
+        updatedAt: iso(Date.parse(startedAt), 70_000),
       },
     ],
     cumulativeDurationMs: 552_761,
diff --git a/packages/junior-dashboard/tests/telemetry-components.test.tsx b/packages/junior-dashboard/tests/telemetry-components.test.tsx
index 94a05edae6..c73524f2d8 100644
--- a/packages/junior-dashboard/tests/telemetry-components.test.tsx
+++ b/packages/junior-dashboard/tests/telemetry-components.test.tsx
@@ -586,7 +586,7 @@ describe("dashboard canonical-event components", () => {
     expect(html).toContain('title="Open pull request"');
   });
 
-  it("labels one or two distinct scopes and peeks the rest as icons", () => {
+  it("labels one or two scopes and clusters the rest on desktop", () => {
     const single = renderToStaticMarkup(
       <ConversationSidebarAnnotations
         annotations={[
@@ -621,6 +621,7 @@ describe("dashboard canonical-event components", () => {
       'aria-label="Linked work, newest first: getsentry/junior#2, getsentry/payments#1"',
     );
     expect(dual.indexOf(">junior<")).toBeLessThan(dual.indexOf(">payments<"));
+    expect(dual).not.toContain(">+1<");
     expect(dual).toContain("Open");
     expect(dual).toContain("Merged");
 
@@ -646,6 +647,7 @@ describe("dashboard canonical-event components", () => {
       />,
     );
     expect(stacked).toContain(">junior<");
+    expect(stacked).toContain(">+2<");
     expect(stacked).not.toContain(">payments<");
     expect(stacked).not.toContain(">relay<");
     expect(stacked).toContain("getsentry/payments#2");
@@ -669,6 +671,7 @@ describe("dashboard canonical-event components", () => {
     );
     expect(sameRepo).toContain(">junior<");
     expect(sameRepo.match(/>junior</g)).toHaveLength(1);
+    expect(sameRepo).not.toContain(">+1<");
     expect(sameRepo).toContain("getsentry/junior#1");
   });
 

From c973954ca886bf4a8065d7ff17188b13c553c5ac Mon Sep 17 00:00:00 2001
From: "sentry-junior[bot]"
 <264270552+sentry-junior[bot]@users.noreply.github.com>
Date: Fri, 14 Aug 2026 02:45:37 +0000
Subject: [PATCH 07/12] fix(dashboard): Pixel-perfect facepile stacking for
 sidebar annotations

Use opaque status-color discs with a 2px box-shadow cutout and fixed
16px geometry so stacked annotations read as a clean avatar facepile
instead of nested stroke icons fighting each other.

Co-Authored-By: David Cramer <david@sentry.io>

Co-Authored-By: David Cramer <david@sentry.io>
---
 .../client/conversations/ConversationMeta.tsx | 167 ++++++++++++------
 .../tests/telemetry-components.test.tsx       |   5 +-
 2 files changed, 116 insertions(+), 56 deletions(-)

diff --git a/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx b/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx
index 3cab2716d2..7f2b446be1 100644
--- a/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx
+++ b/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx
@@ -138,41 +138,58 @@ export function ConversationSidebarAnnotations(props: {
     >
       <span
         aria-label={`Linked work, newest first: ${details.join(", ")}`}
-        className="inline-flex min-w-0 max-w-full items-center pl-1.5"
+        className="inline-flex min-w-0 max-w-full items-center"
       >
         {isMobile ? (
-          <SidebarAnnotationIconFacepile annotations={stack} />
+          <SidebarAnnotationIconFacepile
+            annotations={stack}
+            // Discs sit on the sidebar panel / row surface (#09090b).
+            cutoutColor="var(--color-dashboard-surface-panel)"
+          />
         ) : stack.length <= 2 ? (
           <span className="inline-flex min-w-0 items-center gap-1">
             {stack.map((annotation) => (
               <SidebarAnnotationChip
                 annotation={annotation}
                 key={annotation.key}
-                showLabel
               />
             ))}
           </span>
         ) : (
-          <>
-            <SidebarAnnotationChip annotation={stack[0]!} showLabel />
+          <span className="inline-flex min-w-0 items-center gap-1.5">
+            <SidebarAnnotationChip annotation={stack[0]!} />
             <SidebarAnnotationOverflowCluster annotations={stack.slice(1)} />
-          </>
+          </span>
         )}
       </span>
     </Tooltip>
   );
 }
 
+/** Compact overlapping status discs used by mobile and overflow clusters. */
 function SidebarAnnotationIconFacepile(props: {
   annotations: NonNullable<ConversationDetailReport["sidebarAnnotations"]>;
+  /**
+   * CSS color for the avatar-stack cutout ring. Must match the surface under
+   * the facepile so lower discs read as clean silhouettes.
+   */
+  cutoutColor: string;
+  className?: string;
 }) {
   return (
-    <span className="inline-flex items-center">
+    <span
+      className={cn(
+        // Isolate stacking context so z-index only orders discs inside the pile.
+        "relative isolate inline-flex h-4 items-center",
+        props.className,
+      )}
+    >
       {props.annotations.map((annotation, index) => (
-        <SidebarAnnotationChip
+        <SidebarAnnotationStatusDisc
           annotation={annotation}
+          cutoutColor={props.cutoutColor}
           key={annotation.key}
-          showLabel={false}
+          // 16px disc with -6px pull → 10px advance / 37.5% overlap.
           stacked={index > 0}
           zIndex={props.annotations.length - index}
         />
@@ -186,19 +203,15 @@ function SidebarAnnotationOverflowCluster(props: {
 }) {
   if (props.annotations.length === 0) return null;
   return (
-    <span className="ml-1.5 inline-flex h-5 shrink-0 items-center gap-1 rounded-full border border-white/15 bg-dashboard-surface py-0 pl-1.5 pr-1 font-mono text-2xs text-dashboard-text-muted shadow-sm shadow-black/40">
-      <span>+{props.annotations.length}</span>
-      <span className="inline-flex items-center">
-        {props.annotations.map((annotation, index) => (
-          <SidebarAnnotationChip
-            annotation={annotation}
-            key={annotation.key}
-            showLabel={false}
-            stacked={index > 0}
-            zIndex={props.annotations.length - index}
-          />
-        ))}
+    <span className="inline-flex h-5 shrink-0 items-center gap-1 rounded-full border border-white/10 bg-dashboard-control py-0 pl-1.5 pr-1 font-mono text-2xs leading-none text-dashboard-text-muted">
+      <span className="tabular-nums leading-none">
+        +{props.annotations.length}
       </span>
+      <SidebarAnnotationIconFacepile
+        annotations={props.annotations}
+        // Discs live on the cluster fill (#111114).
+        cutoutColor="var(--color-dashboard-control)"
+      />
     </span>
   );
 }
@@ -207,42 +220,53 @@ function SidebarAnnotationChip(props: {
   annotation: NonNullable<
     ConversationDetailReport["sidebarAnnotations"]
   >[number];
-  showLabel: boolean;
-  /** Overlap this chip under the previous one like an avatar stack. */
-  stacked?: boolean;
-  zIndex?: number;
 }) {
   return (
-    <span
-      className={
-        props.showLabel
-          ? "inline-flex min-w-0 max-w-28 shrink-0 items-center gap-1 truncate rounded-full border border-white/15 bg-dashboard-surface px-2 py-0.5 font-sans text-dashboard-text-muted shadow-sm shadow-black/40"
-          : cn(
-              "inline-flex size-5 shrink-0 items-center justify-center rounded-full border border-white/15 bg-dashboard-surface shadow-sm shadow-black/40",
-              props.stacked && "-ml-1.5",
-            )
-      }
-      style={props.zIndex === undefined ? undefined : { zIndex: props.zIndex }}
-    >
+    <span className="inline-flex h-5 min-w-0 max-w-28 shrink-0 items-center gap-1 truncate rounded-full border border-white/10 bg-dashboard-control px-1.5 font-sans text-2xs leading-none text-dashboard-text-muted">
       {props.annotation.icon ? (
         <SidebarAnnotationIcon
+          decorative
           icon={props.annotation.icon}
-          size={props.showLabel ? 11 : 12}
+          size={11}
         />
-      ) : props.showLabel ? null : (
-        <span className="px-1 font-sans text-2xs text-dashboard-text-muted">
-          {props.annotation.label.slice(0, 1)}
-        </span>
-      )}
-      {props.showLabel ? (
-        <span className="min-w-0 truncate whitespace-nowrap">
-          {props.annotation.label}
-        </span>
       ) : null}
+      <span className="min-w-0 truncate whitespace-nowrap">
+        {props.annotation.label}
+      </span>
     </span>
   );
 }
 
+function SidebarAnnotationStatusDisc(props: {
+  annotation: NonNullable<
+    ConversationDetailReport["sidebarAnnotations"]
+  >[number];
+  cutoutColor: string;
+  stacked?: boolean;
+  zIndex: number;
+}) {
+  const tone = props.annotation.icon
+    ? SIDEBAR_ICON_PRESENTATION[props.annotation.icon]
+    : undefined;
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        // Pure status color + box-shadow cutout. No nested glyph — at 16px the
+        // color is the signal; tooltip carries identity.
+        "relative inline-flex size-4 shrink-0 rounded-full",
+        props.stacked && "-ml-1.5",
+      )}
+      style={{
+        backgroundColor: tone?.disc ?? "#3a3a42",
+        boxShadow: `0 0 0 2px ${props.cutoutColor}`,
+        zIndex: props.zIndex,
+      }}
+      title={tone?.label}
+    />
+  );
+}
+
 function useIsMobileViewport(): boolean {
   return useSyncExternalStore(
     (onStoreChange) => {
@@ -285,45 +309,80 @@ type SidebarAnnotationIconName = NonNullable<
 >;
 
 const SIDEBAR_ICON_PRESENTATION = {
-  "circle-dot": { className: "text-[#3fb950]", Icon: CircleDot, label: "Open" },
+  "circle-dot": {
+    className: "text-[#3fb950]",
+    disc: "#3fb950",
+    Icon: CircleDot,
+    label: "Open",
+  },
   "circle-dashed": {
     className: "text-[#8c959f]",
+    disc: "#8c959f",
     Icon: CircleDashed,
     label: "Draft",
   },
-  "circle-x": { className: "text-[#f85149]", Icon: CircleX, label: "Closed" },
-  "git-merge": { className: "text-[#a371f7]", Icon: GitMerge, label: "Merged" },
+  "circle-x": {
+    className: "text-[#f85149]",
+    disc: "#f85149",
+    Icon: CircleX,
+    label: "Closed",
+  },
+  "git-merge": {
+    className: "text-[#a371f7]",
+    disc: "#a371f7",
+    Icon: GitMerge,
+    label: "Merged",
+  },
   "git-pull-request": {
     className: "text-[#3fb950]",
+    disc: "#3fb950",
     Icon: GitPullRequest,
     label: "Open pull request",
   },
   "triangle-alert": {
     className: "text-[#d29922]",
+    disc: "#d29922",
     Icon: TriangleAlert,
     label: "Needs attention",
   },
 } satisfies Record<
   SidebarAnnotationIconName,
-  { className: string; Icon: typeof CircleDot; label: string }
+  {
+    className: string;
+    disc: string;
+    Icon: typeof CircleDot;
+    label: string;
+  }
 >;
 
 function SidebarAnnotationIcon(props: {
   icon: SidebarAnnotationIconName;
   size?: number;
+  /** Hide accessible name when a parent already labels the control. */
+  decorative?: boolean;
 }) {
   const presentation = SIDEBAR_ICON_PRESENTATION[props.icon];
+  const size = props.size ?? 11;
   return (
     <span
-      className={`shrink-0 ${presentation.className}`}
-      title={presentation.label}
+      aria-hidden={props.decorative ? true : undefined}
+      className={cn(
+        "inline-flex shrink-0 items-center justify-center leading-none",
+        presentation.className,
+      )}
+      // Fixed box stops lucide/svg metrics from shifting chip/disc baselines.
+      style={{ width: size, height: size }}
+      title={props.decorative ? undefined : presentation.label}
     >
       <presentation.Icon
         aria-hidden="true"
-        size={props.size ?? 11}
+        className="block"
+        size={size}
         strokeWidth={2.25}
       />
-      <span className="sr-only">{presentation.label}</span>
+      {props.decorative ? null : (
+        <span className="sr-only">{presentation.label}</span>
+      )}
     </span>
   );
 }
diff --git a/packages/junior-dashboard/tests/telemetry-components.test.tsx b/packages/junior-dashboard/tests/telemetry-components.test.tsx
index c73524f2d8..9cc0790c82 100644
--- a/packages/junior-dashboard/tests/telemetry-components.test.tsx
+++ b/packages/junior-dashboard/tests/telemetry-components.test.tsx
@@ -622,8 +622,9 @@ describe("dashboard canonical-event components", () => {
     );
     expect(dual.indexOf(">junior<")).toBeLessThan(dual.indexOf(">payments<"));
     expect(dual).not.toContain(">+1<");
-    expect(dual).toContain("Open");
-    expect(dual).toContain("Merged");
+    // Chip icons are decorative; the parent aria-label carries the identity.
+    expect(dual).toContain("lucide-circle-dot");
+    expect(dual).toContain("lucide-git-merge");
 
     const stacked = renderToStaticMarkup(
       <ConversationSidebarAnnotations

From 249655bbd9d1488916eac6c996721f96350ef043 Mon Sep 17 00:00:00 2001
From: "sentry-junior[bot]"
 <264270552+sentry-junior[bot]@users.noreply.github.com>
Date: Fri, 14 Aug 2026 02:58:14 +0000
Subject: [PATCH 08/12] fix(dashboard): Show status icons in stacked annotation
 facepile

Keep the solid disc geometry and cutout ring, but put the colored
status glyphs back on each disc so the stack matches labeled chips.

Co-Authored-By: David Cramer <david@sentry.io>

Co-Authored-By: David Cramer <david@sentry.io>
---
 .../client/conversations/ConversationMeta.tsx | 52 +++++++------------
 1 file changed, 20 insertions(+), 32 deletions(-)

diff --git a/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx b/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx
index 7f2b446be1..a5b466196d 100644
--- a/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx
+++ b/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx
@@ -252,18 +252,29 @@ function SidebarAnnotationStatusDisc(props: {
     <span
       aria-hidden="true"
       className={cn(
-        // Pure status color + box-shadow cutout. No nested glyph — at 16px the
-        // color is the signal; tooltip carries identity.
-        "relative inline-flex size-4 shrink-0 rounded-full",
+        // Raised face + colored status glyph. Face must differ from cutoutColor
+        // or the ring disappears and stacked discs mush together.
+        "relative inline-flex size-4 shrink-0 items-center justify-center rounded-full bg-dashboard-surface-hover",
         props.stacked && "-ml-1.5",
       )}
       style={{
-        backgroundColor: tone?.disc ?? "#3a3a42",
         boxShadow: `0 0 0 2px ${props.cutoutColor}`,
         zIndex: props.zIndex,
       }}
       title={tone?.label}
-    />
+    >
+      {props.annotation.icon ? (
+        <SidebarAnnotationIcon
+          decorative
+          icon={props.annotation.icon}
+          size={11}
+        />
+      ) : (
+        <span className="font-sans text-[9px] font-semibold leading-none text-dashboard-text-muted">
+          {props.annotation.label.slice(0, 1)}
+        </span>
+      )}
+    </span>
   );
 }
 
@@ -309,50 +320,27 @@ type SidebarAnnotationIconName = NonNullable<
 >;
 
 const SIDEBAR_ICON_PRESENTATION = {
-  "circle-dot": {
-    className: "text-[#3fb950]",
-    disc: "#3fb950",
-    Icon: CircleDot,
-    label: "Open",
-  },
+  "circle-dot": { className: "text-[#3fb950]", Icon: CircleDot, label: "Open" },
   "circle-dashed": {
     className: "text-[#8c959f]",
-    disc: "#8c959f",
     Icon: CircleDashed,
     label: "Draft",
   },
-  "circle-x": {
-    className: "text-[#f85149]",
-    disc: "#f85149",
-    Icon: CircleX,
-    label: "Closed",
-  },
-  "git-merge": {
-    className: "text-[#a371f7]",
-    disc: "#a371f7",
-    Icon: GitMerge,
-    label: "Merged",
-  },
+  "circle-x": { className: "text-[#f85149]", Icon: CircleX, label: "Closed" },
+  "git-merge": { className: "text-[#a371f7]", Icon: GitMerge, label: "Merged" },
   "git-pull-request": {
     className: "text-[#3fb950]",
-    disc: "#3fb950",
     Icon: GitPullRequest,
     label: "Open pull request",
   },
   "triangle-alert": {
     className: "text-[#d29922]",
-    disc: "#d29922",
     Icon: TriangleAlert,
     label: "Needs attention",
   },
 } satisfies Record<
   SidebarAnnotationIconName,
-  {
-    className: string;
-    disc: string;
-    Icon: typeof CircleDot;
-    label: string;
-  }
+  { className: string; Icon: typeof CircleDot; label: string }
 >;
 
 function SidebarAnnotationIcon(props: {

From 2b5e4a0801e1dfcfd023056859dff991f810fa8b Mon Sep 17 00:00:00 2001
From: "sentry-junior[bot]"
 <264270552+sentry-junior[bot]@users.noreply.github.com>
Date: Fri, 14 Aug 2026 03:14:56 +0000
Subject: [PATCH 09/12] fix(dashboard): Use type scale for facepile letter
 fallback

Dashboard style check rejects absolute arbitrary font sizes below the
named scale, so the no-icon disc letter uses text-2xs.
---
 .../src/client/conversations/ConversationMeta.tsx               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx b/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx
index a5b466196d..224c613994 100644
--- a/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx
+++ b/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx
@@ -270,7 +270,7 @@ function SidebarAnnotationStatusDisc(props: {
           size={11}
         />
       ) : (
-        <span className="font-sans text-[9px] font-semibold leading-none text-dashboard-text-muted">
+        <span className="font-sans text-2xs font-semibold leading-none text-dashboard-text-muted">
           {props.annotation.label.slice(0, 1)}
         </span>
       )}

From 79a6fde1445310d06f5cf05ccea4efdadec6bc57 Mon Sep 17 00:00:00 2001
From: "sentry-junior[bot]"
 <264270552+sentry-junior[bot]@users.noreply.github.com>
Date: Fri, 14 Aug 2026 03:29:02 +0000
Subject: [PATCH 10/12] fix(dashboard): Give stacked annotation facepile real
 chip chrome

Match labeled-chip border/fill on icon-only stack members and increase
overlap so the overflow cluster reads as nested chips, not floating
glyphs.

Co-Authored-By: David Cramer <david@sentry.io>
---
 .../client/conversations/ConversationMeta.tsx | 30 +++++++++++--------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx b/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx
index 224c613994..d8808bb639 100644
--- a/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx
+++ b/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx
@@ -166,12 +166,12 @@ export function ConversationSidebarAnnotations(props: {
   );
 }
 
-/** Compact overlapping status discs used by mobile and overflow clusters. */
+/** Compact overlapping status chips used by mobile and overflow clusters. */
 function SidebarAnnotationIconFacepile(props: {
   annotations: NonNullable<ConversationDetailReport["sidebarAnnotations"]>;
   /**
    * CSS color for the avatar-stack cutout ring. Must match the surface under
-   * the facepile so lower discs read as clean silhouettes.
+   * the facepile so lower chips read as clean silhouettes.
    */
   cutoutColor: string;
   className?: string;
@@ -179,17 +179,18 @@ function SidebarAnnotationIconFacepile(props: {
   return (
     <span
       className={cn(
-        // Isolate stacking context so z-index only orders discs inside the pile.
-        "relative isolate inline-flex h-4 items-center",
+        // Isolate stacking context so z-index only orders chips inside the pile.
+        // Extra right pad keeps the last chip's cutout ring from clipping.
+        "relative isolate inline-flex h-[18px] items-center pr-0.5",
         props.className,
       )}
     >
       {props.annotations.map((annotation, index) => (
-        <SidebarAnnotationStatusDisc
+        <SidebarAnnotationStatusChip
           annotation={annotation}
           cutoutColor={props.cutoutColor}
           key={annotation.key}
-          // 16px disc with -6px pull → 10px advance / 37.5% overlap.
+          // 18px chip with -8px pull → 10px advance / ~44% overlap.
           stacked={index > 0}
           zIndex={props.annotations.length - index}
         />
@@ -203,13 +204,13 @@ function SidebarAnnotationOverflowCluster(props: {
 }) {
   if (props.annotations.length === 0) return null;
   return (
-    <span className="inline-flex h-5 shrink-0 items-center gap-1 rounded-full border border-white/10 bg-dashboard-control py-0 pl-1.5 pr-1 font-mono text-2xs leading-none text-dashboard-text-muted">
+    <span className="inline-flex h-5 shrink-0 items-center gap-1 overflow-visible rounded-full border border-white/10 bg-dashboard-control py-0 pl-1.5 pr-1 font-mono text-2xs leading-none text-dashboard-text-muted">
       <span className="tabular-nums leading-none">
         +{props.annotations.length}
       </span>
       <SidebarAnnotationIconFacepile
         annotations={props.annotations}
-        // Discs live on the cluster fill (#111114).
+        // Chips live on the cluster fill (#111114).
         cutoutColor="var(--color-dashboard-control)"
       />
     </span>
@@ -237,7 +238,8 @@ function SidebarAnnotationChip(props: {
   );
 }
 
-function SidebarAnnotationStatusDisc(props: {
+/** Icon-only chip that matches labeled-chip chrome and stacks like a facepile. */
+function SidebarAnnotationStatusChip(props: {
   annotation: NonNullable<
     ConversationDetailReport["sidebarAnnotations"]
   >[number];
@@ -252,10 +254,12 @@ function SidebarAnnotationStatusDisc(props: {
     <span
       aria-hidden="true"
       className={cn(
-        // Raised face + colored status glyph. Face must differ from cutoutColor
-        // or the ring disappears and stacked discs mush together.
-        "relative inline-flex size-4 shrink-0 items-center justify-center rounded-full bg-dashboard-surface-hover",
-        props.stacked && "-ml-1.5",
+        // Same border + fill language as labeled chips so the stack reads as
+        // real chips, not floating glyphs. Box-shadow cutout (not border) keeps
+        // layout at 18px while punching a surface-colored ring through the chip
+        // underneath — classic avatar-facepile silhouette.
+        "relative box-border inline-flex size-[18px] shrink-0 items-center justify-center rounded-full border border-white/12 bg-dashboard-control",
+        props.stacked && "-ml-2",
       )}
       style={{
         boxShadow: `0 0 0 2px ${props.cutoutColor}`,

From ce1cffe29f0d31ced2f5da2eee61859fbd8a445f Mon Sep 17 00:00:00 2001
From: "sentry-junior[bot]"
 <264270552+sentry-junior[bot]@users.noreply.github.com>
Date: Fri, 14 Aug 2026 03:34:15 +0000
Subject: [PATCH 11/12] fix(dashboard): Put overflow count after stacked chips

Co-Authored-By: David Cramer <david@sentry.io>
---
 .../src/client/conversations/ConversationMeta.tsx      | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx b/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx
index d8808bb639..6cef7cbfcb 100644
--- a/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx
+++ b/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx
@@ -204,15 +204,15 @@ function SidebarAnnotationOverflowCluster(props: {
 }) {
   if (props.annotations.length === 0) return null;
   return (
-    <span className="inline-flex h-5 shrink-0 items-center gap-1 overflow-visible rounded-full border border-white/10 bg-dashboard-control py-0 pl-1.5 pr-1 font-mono text-2xs leading-none text-dashboard-text-muted">
-      <span className="tabular-nums leading-none">
-        +{props.annotations.length}
-      </span>
+    <span className="inline-flex h-5 shrink-0 items-center gap-1 overflow-visible rounded-full border border-white/10 bg-dashboard-control py-0 pl-1 pr-1.5 font-mono text-2xs leading-none text-dashboard-text-muted">
       <SidebarAnnotationIconFacepile
         annotations={props.annotations}
-        // Chips live on the cluster fill (#111114).
+        // Every chip belongs to one continuous stack on the cluster fill.
         cutoutColor="var(--color-dashboard-control)"
       />
+      <span className="tabular-nums leading-none">
+        +{props.annotations.length}
+      </span>
     </span>
   );
 }

From 484944507c5220721379dec1a8e5141b95c9c95e Mon Sep 17 00:00:00 2001
From: "sentry-junior[bot]"
 <264270552+sentry-junior[bot]@users.noreply.github.com>
Date: Fri, 14 Aug 2026 03:39:11 +0000
Subject: [PATCH 12/12] fix(dashboard): Stack every overflow annotation chip

Co-Authored-By: David Cramer <david@sentry.io>
---
 .../client/conversations/ConversationMeta.tsx | 42 ++++++++++++-------
 1 file changed, 26 insertions(+), 16 deletions(-)

diff --git a/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx b/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx
index 6cef7cbfcb..04c5bdd516 100644
--- a/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx
+++ b/packages/junior-dashboard/src/client/conversations/ConversationMeta.tsx
@@ -156,10 +156,7 @@ export function ConversationSidebarAnnotations(props: {
             ))}
           </span>
         ) : (
-          <span className="inline-flex min-w-0 items-center gap-1.5">
-            <SidebarAnnotationChip annotation={stack[0]!} />
-            <SidebarAnnotationOverflowCluster annotations={stack.slice(1)} />
-          </span>
+          <SidebarAnnotationOverflowStack annotations={stack} />
         )}
       </span>
     </Tooltip>
@@ -190,28 +187,41 @@ function SidebarAnnotationIconFacepile(props: {
           annotation={annotation}
           cutoutColor={props.cutoutColor}
           key={annotation.key}
-          // 18px chip with -8px pull → 10px advance / ~44% overlap.
+          // Each chip to the right layers above the chip before it.
           stacked={index > 0}
-          zIndex={props.annotations.length - index}
+          zIndex={index + 1}
         />
       ))}
     </span>
   );
 }
 
-function SidebarAnnotationOverflowCluster(props: {
+/** One continuous stack: labeled chip, icon chips, then the count chip. */
+function SidebarAnnotationOverflowStack(props: {
   annotations: NonNullable<ConversationDetailReport["sidebarAnnotations"]>;
 }) {
-  if (props.annotations.length === 0) return null;
+  const [primary, ...overflow] = props.annotations;
+  if (!primary || overflow.length === 0) return null;
   return (
-    <span className="inline-flex h-5 shrink-0 items-center gap-1 overflow-visible rounded-full border border-white/10 bg-dashboard-control py-0 pl-1 pr-1.5 font-mono text-2xs leading-none text-dashboard-text-muted">
-      <SidebarAnnotationIconFacepile
-        annotations={props.annotations}
-        // Every chip belongs to one continuous stack on the cluster fill.
-        cutoutColor="var(--color-dashboard-control)"
-      />
-      <span className="tabular-nums leading-none">
-        +{props.annotations.length}
+    <span className="isolate inline-flex h-5 min-w-0 items-center pr-0.5">
+      <SidebarAnnotationChip annotation={primary} />
+      {overflow.map((annotation, index) => (
+        <SidebarAnnotationStatusChip
+          annotation={annotation}
+          cutoutColor="var(--color-dashboard-surface-panel)"
+          key={annotation.key}
+          stacked
+          zIndex={index + 1}
+        />
+      ))}
+      <span
+        className="relative -ml-1.5 inline-flex h-5 min-w-7 shrink-0 items-center justify-center rounded-full border border-white/12 bg-dashboard-control px-1.5 font-mono text-2xs leading-none text-dashboard-text-muted"
+        style={{
+          boxShadow: "0 0 0 2px var(--color-dashboard-surface-panel)",
+          zIndex: overflow.length + 1,
+        }}
+      >
+        +{overflow.length}
       </span>
     </span>
   );