@gperezmz/bb-plugin-thread-glance 0.2.3 → 0.3.0

package/dist/server.meta.json

@@ -3,7 +3,7 @@
   "sdkVersion": "0.5.9",
   "artifactFormatVersion": 1,
   "pluginId": "thread-glance",
-  "pluginVersion": "0.2.3",
+  "pluginVersion": "0.3.0",
   "builtWith": {
     "bbVersion": "0.43.4",
     "pluginSdkVersion": "0.5.9"

package/features/thread-list/components/FoldRows.tsx

@@ -1,5 +1,5 @@
-// The fold rows (`N older` on a group, `N more child threads` on a family),
-// the "+N more" line in Needs attention, and the environment folder row.
+// The fold rows (a group's settled fold, `N more child threads` in a tree)
+// and the environment folder row.
 import { memo, useState } from "react";
 import { experimental_Icon as Icon, experimental_ProviderIcon as ProviderIcon } from "@get-bb/plugin-sdk/app";
 import type { PluginEnvironmentProvider } from "@get-bb/plugin-sdk/app";
@@ -11,9 +11,9 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
 import { ICONS } from "../icons";
-import { olderRowText } from "../model/labels";
+import { olderRowText, settledRowText } from "../model/labels";
 import { rowIndent } from "../model/layout";
-import type { EnvironmentRow, LeftOutRow, OlderRow } from "../model/view";
+import type { EnvironmentRow, OlderRow, SettledRow } from "../model/view";
 import type { RowController } from "./controller";
 import { FlagGlyph } from "./glyphs";
 import { RenameEditor } from "./RenameEditor";
@@ -21,48 +21,39 @@ import { ROW_ICON_BUTTON } from "./ThreadRowView";
 
 export const OlderRowView = memo(function OlderRowView({ row, controller }: { row: OlderRow; controller: RowController }) {
   const { label, ariaLabel } = olderRowText(row);
-  // A family's fold sits where its children do, with a dots glyph in the
-  // status slot; the group's fold keeps the chevron.
-  const inFamily = row.scope !== "group";
+  // It sits where the children do, with a dots glyph in the Status column.
   return (
     <button
       type="button"
       aria-expanded={row.expanded}
       aria-label={ariaLabel}
       onClick={() => controller.onToggleOlder(row)}
-      className={cn(
-        "relative flex w-full items-center rounded-md pr-2 text-left text-xs text-muted-foreground outline-none hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring",
-        inFamily ? "h-7 gap-1.5 max-md:pointer-coarse:h-9" : "h-6 gap-1",
-      )}
-      style={{ paddingLeft: rowIndent(row.depth) + (inFamily ? 0 : 2) }}
+      className="relative flex h-7 w-full items-center gap-1.5 rounded-md pr-2 text-left text-xs text-muted-foreground outline-none hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring max-md:pointer-coarse:h-9"
+      style={{ paddingLeft: rowIndent(row.depth) }}
     >
-      {inFamily ? (
-        <span aria-hidden className="inline-flex size-4 shrink-0 items-center justify-center">
-          <Icon name={ICONS.more} className="size-3.5" />
-        </span>
-      ) : (
-        <Icon name={ICONS.expand} aria-hidden className={cn("size-3 transition-transform", row.expanded && "-rotate-90")} />
-      )}
+      <span aria-hidden className="inline-flex size-4 shrink-0 items-center justify-center">
+        <Icon name={ICONS.more} className="size-3.5" />
+      </span>
       {label}
     </button>
   );
 });
 
-/** The "+N more" line under a closed family in Needs attention: it opens the family, as the chip does. */
-export const LeftOutRowView = memo(function LeftOutRowView({ row, controller }: { row: LeftOutRow; controller: RowController }) {
-  const noun = row.count === 1 ? "child thread" : "child threads";
+/** The settled fold: a faint label, a hairline to the row's end, and a chevron. */
+export const SettledRowView = memo(function SettledRowView({ row, controller }: { row: SettledRow; controller: RowController }) {
+  const { label, ariaLabel } = settledRowText(row);
   return (
     <button
       type="button"
-      aria-expanded={false}
-      aria-label={`Show ${row.count} more ${noun}`}
-      title={`Show ${row.count} more ${noun}`}
-      onClick={() => controller.onOpenChildren(row.scopeId)}
-      className="relative flex h-6 w-full items-center gap-1.5 rounded-md pr-2 text-left text-xs text-muted-foreground outline-none hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring"
-      style={{ paddingLeft: rowIndent(row.depth) }}
+      aria-expanded={row.expanded}
+      aria-label={ariaLabel}
+      onClick={() => controller.onToggleSettled(row)}
+      className="group/settled relative flex h-6 w-full items-center gap-2 rounded-md pr-1 text-left text-[11px] text-muted-foreground/70 outline-none hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring max-md:pointer-coarse:h-9"
+      style={{ paddingLeft: rowIndent(0) }}
     >
-      <span aria-hidden className="size-4 shrink-0" />
-      +{row.count} more
+      <span className="shrink-0 tabular-nums">{label}</span>
+      <span aria-hidden className="h-px flex-1 bg-border/60" />
+      <Icon name={ICONS.expand} aria-hidden className={cn("size-3 shrink-0 transition-transform duration-150", row.expanded && "rotate-90")} />
     </button>
   );
 });

package/features/thread-list/components/GroupSection.tsx

@@ -1,5 +1,5 @@
 // A top-level group: its header with counters, and its rows, windowed
-// in chunks; and the Needs attention section above every group.
+// in chunks.
 import { memo, useEffect, useRef, useState } from "react";
 import { useDraggable, useDroppable } from "@dnd-kit/core";
 import { experimental_Icon as Icon } from "@get-bb/plugin-sdk/app";
@@ -14,10 +14,10 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
 import { ICONS } from "../icons";
-import { ATTENTION_GROUP_ID, type GroupView, type AttentionView, type Row } from "../model/view";
+import type { GroupView, Row } from "../model/view";
 import { chunk, windowedNavValue } from "../model/windowing";
 import type { RowController } from "./controller";
-import { EnvironmentRowView, LeftOutRowView, OlderRowView } from "./FoldRows";
+import { EnvironmentRowView, OlderRowView, SettledRowView } from "./FoldRows";
 import { CounterStrip } from "./glyphs";
 import { visibleCounters } from "../model/counters";
 import { RenameEditor } from "./RenameEditor";
@@ -43,8 +43,6 @@ export interface GroupController {
 
 export type DropStates = ReadonlyMap<string, "valid" | "blocked" | "unchanged" | "before" | "after">;
 
-/** The sticky toolbar's height; headers stick below it. */
-export const TOOLBAR_HEIGHT = 28;
 const ROW_HEIGHT = { compact: 28, comfortable: 44 };
 
 function canRename(group: GroupView): boolean {
@@ -96,9 +94,8 @@ const GroupHeader = memo(function GroupHeader({
       role={undefined}
       tabIndex={undefined}
       data-sidebar="group-label"
-      style={{ top: inOverflow ? 0 : TOOLBAR_HEIGHT }}
       className={cn(
-        "group/header sticky z-20 flex h-7 items-center gap-1 rounded-md bg-sidebar pl-2 pr-1 text-xs text-muted-foreground max-md:pointer-coarse:h-9",
+        "group/header sticky top-0 z-20 flex h-7 items-center gap-1 rounded-md bg-sidebar pl-2 pr-1 text-xs text-muted-foreground max-md:pointer-coarse:h-9",
         dropActive && "bg-sidebar-accent",
         draggable.isDragging && "opacity-50",
         !controller.compact && !inOverflow && "select-none",
@@ -346,8 +343,8 @@ function Rows({
               />
             ) : row.type === "older" ? (
               <OlderRowView key={row.key} row={row} controller={rowController} />
-            ) : row.type === "left-out" ? (
-              <LeftOutRowView key={row.key} row={row} controller={rowController} />
+            ) : row.type === "settled" ? (
+              <SettledRowView key={row.key} row={row} controller={rowController} />
             ) : (
               <EnvironmentRowView
                 key={row.key}
@@ -395,9 +392,8 @@ export const GroupSection = memo(function GroupSection({
         inOverflow={inOverflow}
         dropActive={dropTargetGroupId === group.descriptor.id}
       />
-      {group.collapsed ? null : group.rows.length === 0 ? (
-        // A group whose every family sits in Needs attention draws only its header.
-        group.rootIds.length === 0 ? <p className="py-1 pl-8 text-xs text-muted-foreground">No threads</p> : null
+      {group.rows.length === 0 ? (
+        group.collapsed || group.rootIds.length > 0 ? null : <p className="py-1 pl-8 text-xs text-muted-foreground">No threads</p>
       ) : (
         <Rows
           {...rest}
@@ -410,41 +406,3 @@ export const GroupSection = memo(function GroupSection({
     </section>
   );
 });
-
-// bb's attention colour, thinned over the sidebar: the one colour the section
-// adds. Opaque, so the sticky header hides the rows scrolling under it. Mixed
-// in oklab: the sidebar's grey has hue 0 in oklch, which would pull the tint
-// toward pink. Set as the surface quiet titles mix toward; the band is
-// lighter than the sidebar in the dark theme, so they keep 70% of the
-// foreground there to stay above 4.5:1 (68% measured 4.44:1).
-const ATTENTION_BAND =
-  "[--tg-surface:color-mix(in_oklab,var(--attention)_8%,var(--sidebar))] [--tg-quiet:70%] bg-[var(--tg-surface)]";
-const ATTENTION_COUNT =
-  "bg-[color-mix(in_oklab,var(--attention)_20%,transparent)] text-[color:color-mix(in_oklab,var(--attention),var(--foreground)_55%)]";
-
-/**
- * The Needs attention section: a header with its family count (none when every
- * family in it is attended), then its rows, on one band of bb's attention
- * colour. It has no collapse, menu or drag, and no drop target of its own.
- */
-export const AttentionSection = memo(function AttentionSection({ view, ...rest }: SectionProps & { view: AttentionView }) {
-  return (
-    <section aria-label="Needs attention" className={cn("relative mb-1 flex w-full min-w-0 flex-col rounded-md pb-0.5", ATTENTION_BAND)}>
-      <h2
-        style={{ top: TOOLBAR_HEIGHT }}
-        className="sticky z-20 flex h-7 items-center gap-1 rounded-t-md bg-[var(--tg-surface)] pl-2 pr-1 text-xs font-medium text-muted-foreground max-md:pointer-coarse:h-9"
-      >
-        <span className="min-w-0 flex-1 truncate">Needs attention</span>
-        {view.familyCount > 0 ? (
-          <span
-            className={cn("rounded-full px-1.5 text-[11px] leading-4 tabular-nums", ATTENTION_COUNT)}
-            aria-label={`${view.familyCount} ${view.familyCount === 1 ? "family" : "families"}`}
-          >
-            {view.familyCount}
-          </span>
-        ) : null}
-      </h2>
-      <Rows {...rest} rows={view.rows} groupId={ATTENTION_GROUP_ID} inPinned={false} forceMount={false} />
-    </section>
-  );
-});

package/features/thread-list/components/ListHeader.tsx

@@ -0,0 +1,79 @@
+// The list header: the grouping's name, the need-you filter, Mark all read
+// and the settings button, above every group.
+import { memo, useState } from "react";
+import { experimental_Icon as Icon } from "@get-bb/plugin-sdk/app";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import type { ClientPreferences, OrganizationMode, Preferences } from "@/shared/preferences";
+import { ICONS } from "../icons";
+import { groupingName } from "../model/labels";
+import { SettingsPanel } from "./SettingsPanel";
+import { ROW_ICON_BUTTON } from "./ThreadRowView";
+
+// bb's attention colour, thinned, as the need-you filter's own: the list's
+// one place to see what waits on you.
+const NEED_YOU =
+  "bg-[color-mix(in_oklab,var(--attention)_14%,transparent)] text-[color:color-mix(in_oklab,var(--attention),var(--foreground)_55%)] hover:bg-[color-mix(in_oklab,var(--attention)_24%,transparent)]";
+const NEED_YOU_ON = "bg-[color-mix(in_oklab,var(--attention)_30%,transparent)] text-foreground";
+
+export interface ListHeaderProps {
+  mode: OrganizationMode;
+  /** Thread trees that need attention; the filter is not drawn at 0. */
+  needYouCount: number;
+  needYouOnly: boolean;
+  onToggleNeedYou(): void;
+  onMarkAllRead(): void;
+  prefs: Preferences;
+  client: ClientPreferences;
+  onPrefs(patch: Partial<Preferences>): void;
+  onClient(patch: Partial<ClientPreferences>): void;
+}
+
+export const ListHeader = memo(function ListHeader({
+  mode,
+  needYouCount,
+  needYouOnly,
+  onToggleNeedYou,
+  onMarkAllRead,
+  prefs,
+  client,
+  onPrefs,
+  onClient,
+}: ListHeaderProps) {
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  return (
+    <div
+      data-sidebar="list-header"
+      className="flex h-7 items-center gap-1 pl-2 pr-1 text-xs text-muted-foreground max-md:pointer-coarse:h-9"
+    >
+      <h2 className="min-w-0 flex-1 truncate font-medium select-none">{groupingName(mode)}</h2>
+      {needYouCount > 0 ? (
+        <button
+          type="button"
+          aria-pressed={needYouOnly}
+          title={needYouOnly ? "Show every thread" : "Show only what needs you"}
+          onClick={onToggleNeedYou}
+          className={cn(
+            "inline-flex h-5 shrink-0 items-center rounded-full px-1.5 text-[11px] leading-none tabular-nums outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+            needYouOnly ? NEED_YOU_ON : NEED_YOU,
+          )}
+        >
+          {needYouCount} need you
+        </button>
+      ) : null}
+      <button type="button" aria-label="Mark all read" title="Mark all read" className={ROW_ICON_BUTTON} onClick={onMarkAllRead}>
+        <Icon name={ICONS.markRead} aria-hidden className="size-4" />
+      </button>
+      <Popover open={settingsOpen} onOpenChange={setSettingsOpen}>
+        <PopoverTrigger asChild>
+          <button type="button" aria-label="Thread Glance settings" title="Settings" className={ROW_ICON_BUTTON}>
+            <Icon name={ICONS.settings} aria-hidden className="size-4" />
+          </button>
+        </PopoverTrigger>
+        <PopoverContent side="bottom" align="end" className="w-80 max-w-[calc(100vw-1rem)] p-1">
+          <SettingsPanel prefs={prefs} client={client} onPrefs={onPrefs} onClient={onClient} />
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+});

package/features/thread-list/components/ProviderBadge.tsx

@@ -26,7 +26,6 @@ export function ProviderBadge({
   mode?: HarnessIcon;
   className?: string;
 }) {
-  if (mode === "hidden") return null;
   const muted = mode === "muted";
   if (display.provider !== null) {
     // Without its tint the logo draws as a currentColor mask.

package/features/thread-list/components/PullRequestProbes.tsx

@@ -0,0 +1,27 @@
+// Looks up the pull request of every thread settling has to know about and
+// reports each answer. Draws nothing: the host shares one lookup per
+// environment with the badges that ask for the same threads.
+import { memo, useEffect } from "react";
+import { experimental_useSidebarThreadPullRequest as usePullRequest } from "@get-bb/plugin-sdk/app";
+import type { PullRequestState } from "../model/settled";
+
+type Answer = (threadId: string, state: PullRequestState | null) => void;
+
+const Probe = memo(function Probe({ threadId, onAnswer }: { threadId: string; onAnswer: Answer }) {
+  const { isLoading, pullRequest } = usePullRequest(threadId);
+  const state = isLoading ? undefined : (pullRequest?.state ?? null);
+  useEffect(() => {
+    if (state !== undefined) onAnswer(threadId, state);
+  }, [threadId, state, onAnswer]);
+  return null;
+});
+
+export function PullRequestProbes({ threadIds, onAnswer }: { threadIds: readonly string[]; onAnswer: Answer }) {
+  return (
+    <>
+      {threadIds.map((threadId) => (
+        <Probe key={threadId} threadId={threadId} onAnswer={onAnswer} />
+      ))}
+    </>
+  );
+}

package/features/thread-list/components/{Toolbar.tsx → SettingsPanel.tsx}

@@ -1,20 +1,19 @@
-// The top of the scroll area: the settings button and its popover.
+// Thread Glance's settings, under the list header's settings button.
 import { experimental_Icon as Icon } from "@get-bb/plugin-sdk/app";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
 import type { ClientPreferences, Preferences } from "@/shared/preferences";
-import { childAttentionFor, countsEveryChild, lifecyclesFor, sortArrow, sortFieldPatch, threadsShown } from "../model/settings";
+import { childAttentionFor, countsEveryChild, sortArrow, sortFieldPatch } from "../model/settings";
 import { effectiveSortField } from "../model/sort";
 import { ICONS } from "../icons";
-import { TOOLBAR_HEIGHT } from "./GroupSection";
-import { ROW_ICON_BUTTON } from "./ThreadRowView";
 
 // bb's own segmented controls (the Reasoning picker, the diff view toggle)
 // mark the chosen item with the state-active token and no shadow. The track
 // is a translucent tint, so the chosen item reads as raised in both themes.
-const SEGMENT_TRACK = "flex min-w-0 flex-1 gap-0.5 rounded-md bg-surface-recessed p-0.5";
+// An item never shrinks below its text: where a line cannot hold its label
+// and its control, the control wraps onto a line of its own.
+const SEGMENT_TRACK = "flex flex-1 gap-0.5 rounded-md bg-surface-recessed p-0.5";
 const SEGMENT_ITEM =
-  "flex min-w-0 flex-1 items-center justify-center whitespace-nowrap rounded-sm px-1 py-0.5 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring";
+  "flex flex-1 items-center justify-center whitespace-nowrap rounded-sm px-1 py-0.5 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring";
 
 function segmentClass(selected: boolean): string {
   return cn(
@@ -25,12 +24,12 @@ function segmentClass(selected: boolean): string {
   );
 }
 
-/** A label, then its control, on one line. */
+/** A label, then its control: on one line where the panel is wide enough, else the control below. */
 function Line({ label, children }: { label: string; children: React.ReactNode }) {
   return (
-    <div className="flex items-center gap-2 px-2 py-1">
-      <span className="w-[5.5rem] shrink-0 text-sm">{label}</span>
-      {children}
+    <div className="flex flex-wrap items-center gap-x-2 gap-y-1 px-2 py-1">
+      <span className="min-w-[5.5rem] shrink-0 whitespace-nowrap text-sm">{label}</span>
+      <div className="flex flex-1 gap-2">{children}</div>
     </div>
   );
 }
@@ -104,6 +103,7 @@ function Heading({ children }: { children: React.ReactNode }) {
   return <h3 className="px-2 pb-0.5 pt-3 text-xs font-medium text-muted-foreground first:pt-0">{children}</h3>;
 }
 
+/** Thread Glance's settings, as the list header's settings button opens them. */
 export function SettingsPanel({
   prefs,
   client,
@@ -152,14 +152,26 @@ export function SettingsPanel({
           {arrow.glyph}
         </button>
       </Line>
-      <Toggle label="Working threads first" checked={prefs.workingFirst} onChange={(value) => onPrefs({ workingFirst: value })} />
       <Toggle
         label="Worktrees as folders"
         description="Threads sharing a worktree fold into one row"
         checked={prefs.environmentGrouping}
         onChange={(value) => onPrefs({ environmentGrouping: value })}
       />
-      <Toggle label="Collapse older threads" checked={prefs.foldOlder} onChange={(value) => onPrefs({ foldOlder: value })} />
+      <Line label="Settle after">
+        <Segmented
+          label="Settle after"
+          options={[
+            ["12h", "12h"],
+            ["1d", "1d"],
+            ["3d", "3d"],
+            ["1w", "1w"],
+            ["never", "Never"],
+          ]}
+          current={prefs.settleAfter}
+          onSelect={(value) => onPrefs({ settleAfter: value })}
+        />
+      </Line>
       <Heading>Rows</Heading>
       <Line label="Density">
         <Segmented
@@ -178,26 +190,12 @@ export function SettingsPanel({
           options={[
             ["muted", "Muted"],
             ["colour", "Colour"],
-            ["hidden", "Hidden"],
           ]}
           current={prefs.harnessIcon}
           onSelect={(value) => onPrefs({ harnessIcon: value })}
         />
       </Line>
-      <Toggle label="Pull request badge" checked={prefs.showPullRequests} onChange={(value) => onPrefs({ showPullRequests: value })} />
-      <Heading>Show</Heading>
-      <Line label="Threads">
-        <Segmented
-          label="Threads"
-          options={[
-            ["active", "Active"],
-            ["archived", "Archived"],
-            ["both", "Both"],
-          ]}
-          current={threadsShown(prefs.threadLifecycles)}
-          onSelect={(value) => onPrefs({ threadLifecycles: lifecyclesFor(value) })}
-        />
-      </Line>
+      <Heading>Attention</Heading>
       <Toggle
         label="Needs attention counts every child"
         description="Every unread or failed child thread; otherwise only those blocked on you."
@@ -207,32 +205,3 @@ export function SettingsPanel({
     </div>
   );
 }
-
-/** The slim row above the list: ⚙ alone at its right. */
-export function Toolbar({
-  prefs,
-  client,
-  onPrefs,
-  onClient,
-}: {
-  prefs: Preferences;
-  client: ClientPreferences;
-  onPrefs(patch: Partial<Preferences>): void;
-  onClient(patch: Partial<ClientPreferences>): void;
-}) {
-  return (
-    // Sticky with the group headers, so the settings stay in reach.
-    <div style={{ height: TOOLBAR_HEIGHT }} className="sticky top-0 z-30 flex items-center justify-end bg-sidebar">
-      <Popover>
-        <PopoverTrigger asChild>
-          <button type="button" aria-label="Thread Glance settings" title="List settings" className={ROW_ICON_BUTTON}>
-            <Icon name={ICONS.settings} aria-hidden className="size-4" />
-          </button>
-        </PopoverTrigger>
-        <PopoverContent align="end" className="w-80 p-2">
-          <SettingsPanel prefs={prefs} client={client} onPrefs={onPrefs} onClient={onClient} />
-        </PopoverContent>
-      </Popover>
-    </div>
-  );
-}

package/features/thread-list/components/ThreadDetails.tsx

@@ -2,7 +2,7 @@
 import { useContext, useEffect, useState } from "react";
 import { experimental_Icon as Icon, experimental_useSidebarThreadPullRequest as usePullRequest } from "@get-bb/plugin-sdk/app";
 import { Button } from "@/components/ui/button";
-import type { ThreadInfo } from "../model/families";
+import type { ThreadInfo } from "../model/trees";
 import { childSummary, descendantsOf, formatDateTime, sinceLabel } from "../model/details";
 import { lastReply } from "../model/notes";
 import { finishedAtFor, stateSince } from "../model/time";
@@ -70,7 +70,7 @@ export function ThreadDetails({
   const model = useModel(controller, info);
   const live = useContext(ListLiveContext);
   const since = sinceLabel(info.state.kind, stateSince(info.state.kind, thread.id, live.stamps, live.now));
-  const children = childSummary(descendantsOf(live.familyOf(thread.id), thread.id));
+  const children = childSummary(descendantsOf(live.treeOf(thread.id), thread.id));
   const environment = thread.environment;
   const finished = finishedAtFor(thread, live.stamps.finishedAt);
   const reply = lastReply(live.notes[thread.id]);
@@ -93,7 +93,7 @@ export function ThreadDetails({
       <dl className="flex flex-col gap-1">
         <Line label="Harness">
           <span className="inline-flex items-center gap-1.5">
-            <ProviderBadge display={provider} mode={controller.harnessIcon === "hidden" ? "muted" : controller.harnessIcon} />
+            <ProviderBadge display={provider} mode={controller.harnessIcon} />
             {provider.name}
           </span>
         </Line>