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

package/dist/server.meta.json

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

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

@@ -19,12 +19,12 @@ import { chipLabel, rowAriaLabel } from "../model/labels";
 import { rowIndent } from "../model/layout";
 import { rowMenuItems } from "../model/menu";
 import { noteText } from "../model/notes";
-import { pluginStatusWins } from "../model/state";
-import { trailingTime } from "../model/time";
+import { chipTone, pluginStatusWins } from "../model/state";
+import { TRAILING_SLOT_SIZERS, trailingTime } from "../model/time";
 import type { ThreadRow } from "../model/view";
 import type { DraggedThread } from "../model/drag";
 import type { RowController } from "./controller";
-import { ChildDot, GlyphIcon, NoteLine, PluginStatusGlyph } from "./glyphs";
+import { ChipStateGlyph, GlyphIcon, NoteLine, PluginStatusGlyph, TONE_CLASS } from "./glyphs";
 import { ProviderBadge } from "./ProviderBadge";
 import { PullRequestBadge } from "./PullRequestBadge";
 import { RenameEditor } from "./RenameEditor";
@@ -299,8 +299,12 @@ export const ThreadRowView = memo(function ThreadRowView({
   const twoLines = note !== null || row.branchLine !== null;
   const dimmed = row.dimmed && !editing;
   const menuShowing = menuOpen || contextOpen;
-  // Desktop: the actions cross-fade over the harness and age, as bb's
-  // trailing slot does. Compact: "…" always shows beside them.
+  // A pressed shortcut's pill takes the machine's place, as it takes the time's.
+  const showMachine = row.machine !== null && shortcut === null;
+  const badgesShown = row.harness || showMachine;
+  const actionsShown = !compact && shortcut === null;
+  // Desktop: on hover the harness and machine fade out for Mark read and
+  // Archive, and the time for "…". Compact: nothing fades.
   const fadeClass = compact
     ? ""
     : menuShowing
@@ -364,7 +368,6 @@ export const ThreadRowView = memo(function ThreadRowView({
       />
       <span className="pointer-events-none relative flex size-4 shrink-0 items-center justify-center">
         {stateSlot}
-        {row.childDot !== null ? <ChildDot flag={row.childDot} /> : null}
       </span>
       {row.nested ? (
         // Tight against the title, and over the row's gap, so it adds 8px.
@@ -440,141 +443,169 @@ export const ThreadRowView = memo(function ThreadRowView({
           <PullRequestBadge threadId={thread.id} />
         </span>
       ) : null}
-      {chip !== null && !editing ? (
-        <button
-          type="button"
-          aria-expanded={chip.expanded}
-          aria-label={chipLabel(thread.displayTitle, chip.count, chip.expanded)}
-          title={chipLabel(thread.displayTitle, chip.count, chip.expanded)}
-          onClick={(event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            controller.onToggleChip(row);
-          }}
-          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 text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring",
-            dimmed && QUIET_TEXT,
-          )}
-        >
-          {chip.count}
-          <Icon
-            name={ICONS.expand}
-            aria-hidden
-            className={cn("size-3 transition-transform duration-150", chip.expanded && "rotate-90")}
-          />
-        </button>
-      ) : null}
-      {!editing && row.harness ? (
-        <span
-          className={cn(
-            "pointer-events-none relative inline-flex shrink-0 transition-opacity",
-            // The hover actions take this slot too, as bb's trailing slot does.
-            shortcut === null && fadeClass,
-          )}
-        >
-          <ProviderBadge display={provider} mode={controller.harnessIcon} />
-        </span>
-      ) : null}
-      {!editing ? (
-        <span className="relative flex h-6 min-w-8 shrink-0 items-center justify-end gap-1">
-          {shortcut !== null ? (
-            <kbd aria-hidden className="pointer-events-none rounded border border-border px-1 font-sans text-[10px] leading-4 text-muted-foreground">
-              {shortcut.label}
-            </kbd>
-          ) : (
-            <>
-              {row.machine !== null ? (
+      {!editing && (badgesShown || actionsShown) ? (
+        // One cell: the harness and machine at rest, Mark read and Archive
+        // on hover. The actions take no width at rest, so no title is
+        // shorter for them; on hover the title gives up only what they
+        // need beyond the badges they replace.
+        <span className="relative -ml-1.5 grid shrink-0 items-center">
+          {badgesShown ? (
+            <span className={cn("flex items-center gap-1.5 pl-1.5 [grid-area:1/1] transition-opacity", shortcut === null && fadeClass)}>
+              {row.harness ? (
+                <span className="pointer-events-none relative inline-flex shrink-0">
+                  <ProviderBadge display={provider} mode={controller.harnessIcon} />
+                </span>
+              ) : null}
+              {showMachine ? (
                 <span
                   title={`On ${row.machine}`}
                   aria-label={`On ${row.machine}`}
-                  className={cn("pointer-events-none max-w-20 truncate text-[11px] text-muted-foreground transition-opacity", fadeClass)}
+                  className="pointer-events-none max-w-20 truncate text-[11px] text-muted-foreground"
                 >
                   {row.machine}
                 </span>
               ) : null}
-              {time !== null ? (
-                <span
-                  title={time.label}
-                  aria-label={time.label}
-                  className={cn(
-                    "pointer-events-none text-[11px] tabular-nums transition-opacity",
-                    // A running timer reads as work, an age as history.
-                    time.kind === "timer" ? "font-medium text-[var(--timeline-accent)]" : "text-muted-foreground",
-                    fadeClass,
-                  )}
+            </span>
+          ) : null}
+          {actionsShown ? (
+            <span
+              className={cn(
+                "items-center justify-self-end gap-0.5 pl-1.5 [grid-area:1/1]",
+                menuShowing ? "flex" : "hidden group-hover/row:flex group-focus-within/row:flex",
+              )}
+            >
+              {row.treeUnread ? (
+                <button
+                  type="button"
+                  aria-label="Mark read"
+                  title="Mark read"
+                  className={ROW_ICON_BUTTON}
+                  onPointerDown={(event) => event.stopPropagation()}
+                  onClick={(event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    controller.onMenuAction("mark-read", thread);
+                  }}
                 >
-                  {time.text}
-                </span>
+                  <Icon name={ICONS.markRead} aria-hidden className="size-4" />
+                </button>
               ) : null}
-              <span
-                className={cn(
-                  "flex items-center gap-0.5 transition-opacity",
-                  compact
-                    ? "relative"
-                    : menuShowing
-                      ? "absolute right-0 opacity-100"
-                      : "absolute right-0 opacity-0 group-hover/row:opacity-100 group-focus-within/row:opacity-100",
-                )}
+              <button
+                type="button"
+                aria-label={archived ? "Unarchive thread" : "Archive thread"}
+                title={archived ? "Unarchive" : "Archive"}
+                className={ROW_ICON_BUTTON}
+                onPointerDown={(event) => event.stopPropagation()}
+                onClick={(event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  controller.onMenuAction(archived ? "unarchive" : "archive", thread);
+                }}
               >
-                {!compact && row.treeUnread ? (
-                  <button
-                    type="button"
-                    aria-label="Mark read"
-                    title="Mark read"
-                    className={ROW_ICON_BUTTON}
-                    onPointerDown={(event) => event.stopPropagation()}
-                    onClick={(event) => {
-                      event.preventDefault();
-                      event.stopPropagation();
-                      controller.onMenuAction("mark-read", thread);
-                    }}
-                  >
-                    <Icon name={ICONS.markRead} aria-hidden className="size-4" />
-                  </button>
-                ) : null}
-                {!compact ? (
-                  <button
-                    type="button"
-                    aria-label={archived ? "Unarchive thread" : "Archive thread"}
-                    title={archived ? "Unarchive" : "Archive"}
-                    className={ROW_ICON_BUTTON}
-                    onPointerDown={(event) => event.stopPropagation()}
-                    onClick={(event) => {
-                      event.preventDefault();
-                      event.stopPropagation();
-                      controller.onMenuAction(archived ? "unarchive" : "archive", thread);
-                    }}
+                <Icon name={archived ? ICONS.unarchive : ICONS.archive} aria-hidden className="size-4" />
+              </button>
+            </span>
+          ) : null}
+        </span>
+      ) : null}
+      {!editing ? (
+        // The chip sits 4px before the trailing slot, whose width never
+        // changes, so hover never moves it.
+        <span className="relative flex shrink-0 items-center gap-1">
+          {chip !== null ? (
+            <button
+              type="button"
+              aria-expanded={chip.expanded}
+              aria-label={chipLabel(thread.displayTitle, chip)}
+              title={chipLabel(thread.displayTitle, chip)}
+              onClick={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                controller.onToggleChip(row);
+              }}
+              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",
+                chip.flag === null
+                  ? cn("text-muted-foreground hover:text-foreground", dimmed && QUIET_TEXT)
+                  : TONE_CLASS[chipTone(chip.flag)],
+              )}
+            >
+              {chip.flag !== null ? <ChipStateGlyph flag={chip.flag} /> : null}
+              {chip.count > 0 ? chip.count : null}
+              <Icon
+                name={ICONS.expand}
+                aria-hidden
+                className={cn("size-3 transition-transform duration-150", chip.expanded && "rotate-90")}
+              />
+            </button>
+          ) : null}
+          {/* The trailing slot: one grid cell, as wide as "…" or the widest
+              time, whichever is wider, holding the time at rest and "…" on hover. */}
+          <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]">
+                {text}
+              </span>
+            ))}
+            {shortcut !== null ? (
+              <kbd aria-hidden className="pointer-events-none justify-self-end rounded border border-border px-1 font-sans text-[10px] leading-4 text-muted-foreground [grid-area:1/1]">
+                {shortcut.label}
+              </kbd>
+            ) : (
+              <>
+                {time !== null ? (
+                  <span
+                    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]",
+                      // A running timer reads as work, an age as history.
+                      time.kind === "timer" ? "font-medium text-[var(--timeline-accent)]" : "text-muted-foreground",
+                      fadeClass,
+                    )}
                   >
-                    <Icon name={archived ? ICONS.unarchive : ICONS.archive} aria-hidden className="size-4" />
-                  </button>
+                    {time.text}
+                  </span>
                 ) : null}
-                <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
-                  <DropdownMenuTrigger asChild>
-                    <button
-                      type="button"
-                      aria-label="Thread actions"
-                      // Phones open the menu by long-press, as bb's lists do;
-                      // the button stays for keyboards and screen readers.
-                      className={compact ? "sr-only" : ROW_ICON_BUTTON}
-                      onPointerDown={(event) => event.stopPropagation()}
-                      onClick={(event) => event.stopPropagation()}
-                    >
-                      <Icon name={ICONS.more} aria-hidden className="size-4" />
-                    </button>
-                  </DropdownMenuTrigger>
-                  <RowDropdownMenuContent
-                    items={menuItems}
-                    sections={controller.sections}
-                    currentSectionId={thread.sectionId}
-                    onAction={onMenuAction}
-                    onCloseAutoFocus={onMenuCloseAutoFocus}
-                  />
-                </DropdownMenu>
-              </span>
-            </>
-          )}
+                <span
+                  className={cn(
+                    "flex items-center justify-self-end transition-opacity [grid-area:1/1]",
+                    compact
+                      ? "relative"
+                      : menuShowing
+                        ? "opacity-100"
+                        : "opacity-0 group-hover/row:opacity-100 group-focus-within/row:opacity-100",
+                  )}
+                >
+                  <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
+                    <DropdownMenuTrigger asChild>
+                      <button
+                        type="button"
+                        aria-label="Thread actions"
+                        // Phones open the menu by long-press, as bb's lists do;
+                        // the button stays for keyboards and screen readers.
+                        className={compact ? "sr-only" : ROW_ICON_BUTTON}
+                        onPointerDown={(event) => event.stopPropagation()}
+                        onClick={(event) => event.stopPropagation()}
+                      >
+                        <Icon name={ICONS.more} aria-hidden className="size-4" />
+                      </button>
+                    </DropdownMenuTrigger>
+                    <RowDropdownMenuContent
+                      items={menuItems}
+                      sections={controller.sections}
+                      currentSectionId={thread.sectionId}
+                      onAction={onMenuAction}
+                      onCloseAutoFocus={onMenuCloseAutoFocus}
+                    />
+                  </DropdownMenu>
+                </span>
+              </>
+            )}
+          </span>
         </span>
       ) : null}
     </div>

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

@@ -1,11 +1,12 @@
-// State glyphs, the child dot and header counters. They draw what the model
-// decided; tone and animation come from host token classes only.
+// State glyphs, the children chip's state glyph and header counters. They
+// draw what the model decided; tone and animation come from host token
+// classes only.
 import { experimental_Icon as Icon } from "@get-bb/plugin-sdk/app";
 import type { PluginSidebarThreadRowStatus } from "@get-bb/plugin-sdk/app";
 import { cn } from "@/lib/utils";
 import type { Counters } from "../model/counters";
 import type { RowNote } from "../model/notes";
-import { dotTone, FLAG_GLYPHS, type DotTone, type Flag, type Glyph, type Tone } from "../model/state";
+import { FLAG_GLYPHS, type Flag, type Glyph, type Tone } from "../model/state";
 
 export const TONE_CLASS: Record<Tone, string> = {
   attention: "text-attention",
@@ -18,32 +19,6 @@ export const TONE_CLASS: Record<Tone, string> = {
   none: "",
 };
 
-// The child dot's colours: the tone of the state it stands for, and the
-// unread dot's accent for unread.
-const DOT_TONE_CLASS: Record<DotTone, string> = {
-  attention: "bg-attention",
-  destructive: "bg-destructive",
-  working: "bg-[var(--timeline-accent)]",
-  unread: "bg-[var(--timeline-accent)]",
-};
-
-/**
- * The child dot on a parent's status glyph, at its lower right corner. A
- * ring of the sidebar's colour keeps it apart from the glyph under it.
- */
-export function ChildDot({ flag }: { flag: Flag }) {
-  return (
-    <span
-      aria-hidden
-      data-child-dot={flag}
-      className={cn(
-        "pointer-events-none absolute -right-0.5 -bottom-0.5 size-[7px] rounded-full ring-[1.5px] ring-sidebar",
-        DOT_TONE_CLASS[dotTone(flag)],
-      )}
-    />
-  );
-}
-
 const SHINE = "animate-shine-icon motion-reduce:animate-none";
 const SPIN = "animate-spin motion-reduce:animate-none";
 
@@ -139,6 +114,12 @@ export function FlagGlyph({ flag, className }: { flag: Flag; className?: string
   return <GlyphIcon glyph={FLAG_GLYPHS[flag]} className={className} />;
 }
 
+/** The state glyph that leads a children chip, smaller than the Status column's; the chip's label names it. */
+export function ChipStateGlyph({ flag }: { flag: Flag }) {
+  if (FLAG_GLYPHS[flag].icon === "dot") return <UnreadDot className="size-[5px]" />;
+  return <FlagGlyph flag={flag} className="size-3" />;
+}
+
 const COUNTER_ITEMS: readonly {
   key: keyof Counters;
   flag: Flag;

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

@@ -1,6 +1,6 @@
 // Accessible names: everything a tooltip says is in the aria-label.
-import type { OlderRow, SettledRow, ThreadRow } from "./view";
-import { FLAG_GLYPHS, type Flag } from "./state";
+import type { Chip, OlderRow, SettledRow, ThreadRow } from "./view";
+import type { Flag } from "./state";
 import { formatDateTime } from "./details";
 import type { OrganizationMode } from "@/shared/preferences";
 
@@ -20,7 +20,6 @@ export function rowAriaLabel(
 ): string {
   const parts = [stateText(row, options.pluginLabel), options.providerName];
   if (row.parentTitle !== null && row.depth > 0) parts.push(`child of ${row.parentTitle}`);
-  if (row.childDot !== null) parts.push(`child threads: ${FLAG_GLYPHS[row.childDot].label}`);
   if (row.crossGroupLabel !== null) parts.push(row.crossGroupLabel.toLowerCase());
   if (row.hiddenBadge) parts.push("hidden thread");
   if (row.info.unread && row.info.state.kind !== "unread") parts.push("unread");
@@ -28,9 +27,24 @@ export function rowAriaLabel(
   return `Open ${row.info.thread.displayTitle} — ${parts.join("; ")}`;
 }
 
-export function chipLabel(title: string, count: number, expanded: boolean): string {
-  const noun = count === 1 ? "child thread" : "child threads";
-  return `${expanded ? "Collapse" : "Show"} ${count} ${noun} of ${title}`;
+/** What a children chip's state says, uncounted: the state can come from any depth, the count only from direct children. */
+const CHIP_STATE_TEXT: Readonly<Record<Flag, string>> = {
+  "waits-on-you": "waiting on you below",
+  "unread-failed": "failed below",
+  "queue-failed": "queued message failed below",
+  offline: "machine offline below",
+  working: "working below",
+  unread: "unread below",
+};
+
+/**
+ * "Show 2 child threads of Release, working below"; with no visible child,
+ * "Show hidden child threads of Release, waiting on you below".
+ */
+export function chipLabel(title: string, chip: Chip): string {
+  const children = chip.count === 0 ? "hidden child threads" : `${chip.count} ${chip.count === 1 ? "child thread" : "child threads"}`;
+  const state = chip.flag === null ? "" : `, ${CHIP_STATE_TEXT[chip.flag]}`;
+  return `${chip.expanded ? "Collapse" : "Show"} ${children} of ${title}${state}`;
 }
 
 /** The text and accessible name of an open tree's fold row. */

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

@@ -271,17 +271,17 @@ export function hiddenThreadFlags(flags: ReadonlySet<Flag>): Set<Flag> {
   return kept;
 }
 
-/** Flags a hidden thread adds to its parent's child dot: what asks for you or failed, and offline. */
-const HIDDEN_DOT_FLAGS: ReadonlySet<Flag> = new Set<Flag>(["waits-on-you", "unread-failed", "queue-failed", "offline"]);
+/** Flags a hidden thread adds to the children chip above it: what asks for you or failed, and offline. */
+const HIDDEN_CHIP_FLAGS: ReadonlySet<Flag> = new Set<Flag>(["waits-on-you", "unread-failed", "queue-failed", "offline"]);
 
 /**
- * The flags a thread adds to the child dot of the threads above it. A
+ * The flags a thread adds to the children chip of the threads above it. A
  * hidden thread adds only waits-on-you, failed, queued message failed and
  * offline; which trees need attention reads `hiddenThreadFlags` instead,
  * so this leaves it unchanged.
  */
-export function dotFlagsOf(flags: ReadonlySet<Flag>, isHidden: boolean): Set<Flag> {
-  return isHidden ? new Set([...flags].filter((flag) => HIDDEN_DOT_FLAGS.has(flag))) : new Set(flags);
+export function chipFlagsOf(flags: ReadonlySet<Flag>, isHidden: boolean): Set<Flag> {
+  return isHidden ? new Set([...flags].filter((flag) => HIDDEN_CHIP_FLAGS.has(flag))) : new Set(flags);
 }
 
 /** The most urgent flag, or null. */
@@ -289,22 +289,10 @@ export function mostUrgent(flags: ReadonlySet<Flag>): Flag | null {
   return FLAG_ORDER.find((flag) => flags.has(flag)) ?? null;
 }
 
-/** The colour of a child dot, by the most urgent state among the descendants. */
-export type DotTone = "attention" | "destructive" | "working" | "unread";
-
-export function dotTone(flag: Flag): DotTone {
-  switch (flag) {
-    case "waits-on-you":
-    case "offline":
-      return "attention";
-    case "unread-failed":
-    case "queue-failed":
-      return "destructive";
-    case "working":
-      return "working";
-    case "unread":
-      return "unread";
-  }
+/** The tone a children chip takes for a state: its glyph's, and the unread dot's accent for unread. */
+export function chipTone(flag: Flag): Tone {
+  const tone = FLAG_GLYPHS[flag].tone;
+  return tone === "none" ? "working" : tone;
 }
 
 export const FLAG_GLYPHS: Readonly<Record<Flag, Glyph & { label: string }>> = {

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

@@ -105,3 +105,10 @@ export function stateSince(
   if (at === undefined) return null;
   return formatDuration(now - at);
 }
+
+/**
+ * The widest texts `trailingTime` gives up to 99 weeks, one per unit. The
+ * trailing slot is as wide as the widest of them, so times line up down the
+ * list; an older row widens its own.
+ */
+export const TRAILING_SLOT_SIZERS = ["now", "<1m", "59m", "23h", "6d", "99w"] as const;

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

@@ -3,7 +3,7 @@
 import type { PluginSidebarThread } from "@get-bb/plugin-sdk/app";
 import {
   computeState,
-  dotFlagsOf,
+  chipFlagsOf,
   hiddenThreadFlags,
   isQuietThread,
   isUnread,
@@ -29,8 +29,8 @@ export interface ThreadInfo {
   unread: boolean;
   /** Own flags; for hidden threads only waits-on-you and unread-failed. */
   flags: ReadonlySet<Flag>;
-  /** What it adds to the child dot of the threads above it (see `dotFlagsOf`). */
-  dotFlags: ReadonlySet<Flag>;
+  /** What it adds to the children chip of the threads above it (see `chipFlagsOf`). */
+  chipFlags: ReadonlySet<Flag>;
   /**
    * The flags of this thread that make it need attention, for collapsed
    * groups, the counters, the need-you filter and auto-reveal: a child counts
@@ -55,14 +55,14 @@ export interface ThreadInfo {
   note: RowNote | null;
 }
 
-/** What a thread's descendants add up to, for its chip, its child dot and folding. */
+/** What a thread's descendants add up to, for its chip and folding. */
 export interface Subtree {
   /** Descendants, depth-first in creation order, hidden ones included. */
   descendants: ThreadInfo[];
   /** Union of the descendants' Needs attention flags and working, archived ones left out. */
   flags: ReadonlySet<Flag>;
-  /** Union of the descendants' `dotFlags`, archived ones left out: the child dot. */
-  dotFlags: ReadonlySet<Flag>;
+  /** Union of the descendants' `chipFlags`, archived ones left out: the chip's state. */
+  chipFlags: ReadonlySet<Flag>;
   /** Visible descendants at any depth. */
   visibleCount: number;
   /** Visible direct children: the chip's number. */
@@ -167,7 +167,7 @@ export function buildForest(inputs: ForestInputs): Forest {
       state,
       unread,
       flags: thread.isHidden ? hiddenThreadFlags(flags) : flags,
-      dotFlags: dotFlagsOf(flags, thread.isHidden),
+      chipFlags: chipFlagsOf(flags, thread.isHidden),
       attentionFlags: new Set<Flag>(),
       quiet: isQuietThread(state, unread, isActive),
       quietIgnoringOpen: false,
@@ -216,7 +216,7 @@ export function buildForest(inputs: ForestInputs): Forest {
     if (cached !== undefined) return cached;
     const descendants: ThreadInfo[] = [];
     const flags = new Set<Flag>();
-    const dotFlags = new Set<Flag>();
+    const chipFlags = new Set<Flag>();
     let visibleCount = 0;
     let childCount = 0;
     let quietIgnoringOpen = true;
@@ -229,10 +229,10 @@ export function buildForest(inputs: ForestInputs): Forest {
       if (!child.thread.isArchived) {
         for (const flag of child.attentionFlags) flags.add(flag);
         if (child.flags.has("working")) flags.add("working");
-        for (const flag of child.dotFlags) dotFlags.add(flag);
+        for (const flag of child.chipFlags) chipFlags.add(flag);
       }
       for (const flag of below.flags) flags.add(flag);
-      for (const flag of below.dotFlags) dotFlags.add(flag);
+      for (const flag of below.chipFlags) chipFlags.add(flag);
       if (child.thread.isHidden ? child.attentionFlags.size > 0 : !child.quietIgnoringOpen) quietIgnoringOpen = false;
       if (!child.thread.isHidden) {
         visibleCount += 1;
@@ -242,7 +242,7 @@ export function buildForest(inputs: ForestInputs): Forest {
       if (!below.quietIgnoringOpen) quietIgnoringOpen = false;
     }
     path.delete(id);
-    const subtree: Subtree = { descendants, flags, dotFlags, visibleCount, childCount, quietIgnoringOpen };
+    const subtree: Subtree = { descendants, flags, chipFlags, visibleCount, childCount, quietIgnoringOpen };
     subtrees.set(id, subtree);
     return subtree;
   };