@gperezmz/bb-plugin-thread-glance 0.4.2 → 0.5.0

package/dist/server.meta.json

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

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

@@ -39,7 +39,7 @@ export const OlderRowView = memo(function OlderRowView({ row, controller }: { ro
   );
 });
 
-/** The settled fold: a faint label, a hairline to the row's end, and a chevron. */
+/** The settled fold: a muted 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 (
@@ -48,7 +48,7 @@ export const SettledRowView = memo(function SettledRowView({ row, controller }:
       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"
+      className="group/settled relative flex h-6 w-full items-center gap-2 rounded-md pr-1 text-left text-xs text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring max-md:pointer-coarse:h-9"
       style={{ paddingLeft: rowIndent(0) }}
     >
       <span className="shrink-0 tabular-nums">{label}</span>
@@ -102,7 +102,7 @@ export const EnvironmentRowView = memo(function EnvironmentRowView({
         <span className="pointer-events-none relative min-w-0 flex-1 truncate">{row.label}</span>
       )}
       {row.flag !== null ? <FlagGlyph flag={row.flag} className="pointer-events-none relative size-3.5" /> : null}
-      <span className="pointer-events-none relative text-[11px] tabular-nums">{row.threadIds.length}</span>
+      <span className="pointer-events-none relative text-xs tabular-nums">{row.threadIds.length}</span>
       <Icon
         name={ICONS.expand}
         aria-hidden

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

@@ -57,7 +57,7 @@ export const ListHeader = memo(function ListHeader({
           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",
+            "inline-flex h-5 shrink-0 items-center rounded-full px-1.5 text-xs leading-none tabular-nums outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
             needYouOnly ? NEED_YOU_ON : NEED_YOU,
           )}
         >

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

@@ -45,7 +45,7 @@ export function ProviderBadge({
       aria-label={display.name}
       title={display.name}
       className={cn(
-        "inline-flex h-3.5 min-w-3.5 shrink-0 items-center justify-center rounded-[3px] border border-border px-px text-[8px] font-semibold leading-none tracking-tight text-muted-foreground",
+        "inline-flex h-3.5 min-w-3.5 shrink-0 items-center justify-center rounded-[3px] border border-border px-px text-[10px] font-semibold leading-none tracking-tight text-muted-foreground",
         muted && "opacity-60",
         className,
       )}

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

@@ -42,7 +42,7 @@ export function PullRequestBadge({ threadId }: { threadId: string }) {
     <span
       title={pullRequestLabel(pullRequest)}
       aria-label={pullRequestLabel(pullRequest)}
-      className={cn("shrink-0 text-[11px] tabular-nums", pullRequestTone(pullRequest.attention))}
+      className={cn("shrink-0 text-xs tabular-nums", pullRequestTone(pullRequest.attention))}
     >
       #{pullRequest.number}
     </span>

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

@@ -413,8 +413,6 @@ export const ThreadRowView = memo(function ThreadRowView({
               className={cn(
                 "min-w-0 truncate",
                 row.bold ? "font-semibold" : "font-normal",
-                // Children sit a step below their parent.
-                row.depth > 0 && "text-xs",
                 // Quiet threads step back so live ones lead; hover brings them back.
                 dimmed && `${QUIET_TEXT} group-hover/row:text-foreground`,
               )}
@@ -461,7 +459,7 @@ export const ThreadRowView = memo(function ThreadRowView({
                 <span
                   title={`On ${row.machine}`}
                   aria-label={`On ${row.machine}`}
-                  className="pointer-events-none max-w-20 truncate text-[11px] text-muted-foreground"
+                  className="pointer-events-none max-w-20 truncate text-xs text-muted-foreground"
                 >
                   {row.machine}
                 </span>
@@ -527,7 +525,7 @@ export const ThreadRowView = memo(function ThreadRowView({
               onPointerDown={(event) => event.stopPropagation()}
               onKeyDown={(event) => event.stopPropagation()}
               className={cn(
-                "pointer-events-auto relative z-10 inline-flex h-5 shrink-0 items-center gap-0.5 rounded-md px-0.5 text-[11px] leading-none tabular-nums outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+                "pointer-events-auto relative z-10 inline-flex h-5 shrink-0 items-center gap-0.5 rounded-md px-0.5 text-xs leading-none tabular-nums outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
                 chip.flag === null
                   ? cn("text-muted-foreground hover:text-foreground", dimmed && QUIET_TEXT)
                   : TONE_CLASS[chipTone(chip.flag)],
@@ -547,7 +545,7 @@ export const ThreadRowView = memo(function ThreadRowView({
           <span data-trailing-slot="" className="relative grid h-6 shrink-0 items-center">
             <span aria-hidden className="invisible w-6 [grid-area:1/1]" />
             {TRAILING_SLOT_SIZERS.map((text) => (
-              <span key={text} aria-hidden className="invisible text-[11px] font-medium tabular-nums [grid-area:1/1]">
+              <span key={text} aria-hidden className="invisible text-xs font-medium tabular-nums [grid-area:1/1]">
                 {text}
               </span>
             ))}
@@ -562,7 +560,7 @@ export const ThreadRowView = memo(function ThreadRowView({
                     title={time.label}
                     aria-label={time.label}
                     className={cn(
-                      "pointer-events-none justify-self-end text-[11px] tabular-nums transition-opacity [grid-area:1/1]",
+                      "pointer-events-none justify-self-end text-xs tabular-nums transition-opacity [grid-area:1/1]",
                       // A running timer reads as work, an age as history.
                       time.kind === "timer" ? "font-medium text-[var(--timeline-accent)]" : "text-muted-foreground",
                       fadeClass,

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

@@ -13,7 +13,9 @@ export const TONE_CLASS: Record<Tone, string> = {
   destructive: "text-destructive",
   // bb's timeline accent: blue, readable on the sidebar in both themes.
   working: "text-[var(--timeline-accent)]",
-  background: "text-muted-foreground/50",
+  // Full muted: bb's shine dims the glyph by about a third, and at 75% its
+  // dim frames fell below 3:1 against the light sidebar.
+  background: "text-muted-foreground",
   "muted-strong": "text-muted-foreground/75",
   muted: "text-muted-foreground",
   none: "",
@@ -36,13 +38,14 @@ export function UnreadDot({ label, className }: { label?: string; className?: st
 }
 
 // The Idle state's ring: uncoloured, smaller than the column and thinned, so
-// it reads as status yet stays fainter than the unread dot and the draft
-// pencil. Screen readers skip it, so an Idle row announces what it did before.
+// it reads as status yet stays fainter than every other glyph. Its tone alone
+// sets its colour, so it keeps 3:1 against the sidebar. Screen readers skip
+// it, so an Idle row announces what it did before.
 export function IdleRing({ className }: { className?: string }) {
   return (
     <span
       aria-hidden
-      className={cn("inline-block size-2.5 shrink-0 rounded-full border-[1.5px] border-current opacity-50", className)}
+      className={cn("inline-block size-2.5 shrink-0 rounded-full border-[1.5px] border-current", className)}
     />
   );
 }

package/features/thread-list/model/state.ts

@@ -33,8 +33,8 @@ export const FLAG_ORDER: readonly Flag[] = [
 
 /**
  * `working` is bb's timeline accent, so a running thread stands out in both
- * themes; `background` keeps bb's faint tone for background
- * activity, so the two stay apart.
+ * themes; `background` draws background activity in the grey `muted` has,
+ * and its glyph shines, which keeps it apart from a draft.
  */
 export type Tone = "attention" | "destructive" | "working" | "background" | "muted" | "muted-strong" | "none";
 
@@ -247,7 +247,7 @@ export function computeState(thread: PluginSidebarThread, inputs: StateInputs):
   }
   if (inputs.unread) return { kind: "unread", label: "Unread", glyph: glyph("dot", "none"), ...none };
   if (inputs.hasDraft) return { kind: "draft", label: "Unsubmitted draft", glyph: glyph("Edit", "muted"), ...none };
-  return { kind: "idle", label: "Idle", glyph: glyph("ring", "muted"), ...none };
+  return { kind: "idle", label: "Idle", glyph: glyph("ring", "muted-strong"), ...none };
 }
 
 /**

package/features/thread-list/model/view.ts

@@ -113,7 +113,7 @@ export interface EnvironmentRow {
   depth: number;
 }
 
-/** A group's settled fold: the faint "Settled (N)" divider at its end. */
+/** A group's settled fold: the muted "Settled (N)" divider at its end. */
 export interface SettledRow {
   type: "settled";
   key: string;

package/features/thread-list/testing/browser.css

@@ -11,3 +11,10 @@
 [data-icon] {
   display: inline-block;
 }
+
+/* bb's colour utilities read its palette variables; a test sets the ones it needs. */
+@theme inline {
+  --color-sidebar: var(--sidebar);
+  --color-foreground: var(--foreground);
+  --color-muted-foreground: var(--muted-foreground);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gperezmz/bb-plugin-thread-glance",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "type": "module",
   "engines": {
     "bb": ">=0.43",