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

package/dist/server.meta.json

@@ -3,7 +3,7 @@
   "sdkVersion": "0.5.9",
   "artifactFormatVersion": 1,
   "pluginId": "thread-glance",
-  "pluginVersion": "0.2.1",
+  "pluginVersion": "0.2.3",
   "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 you, and the environment folder row.
+// the "+N more" line in Needs attention, 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,7 +11,6 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
 import { ICONS } from "../icons";
-import { RowRails } from "./Rails";
 import { olderRowText } from "../model/labels";
 import { rowIndent } from "../model/layout";
 import type { EnvironmentRow, LeftOutRow, OlderRow } from "../model/view";
@@ -37,7 +36,6 @@ export const OlderRowView = memo(function OlderRowView({ row, controller }: { ro
       )}
       style={{ paddingLeft: rowIndent(row.depth) + (inFamily ? 0 : 2) }}
     >
-      <RowRails rails={row.rails} />
       {inFamily ? (
         <span aria-hidden className="inline-flex size-4 shrink-0 items-center justify-center">
           <Icon name={ICONS.more} className="size-3.5" />
@@ -50,18 +48,22 @@ export const OlderRowView = memo(function OlderRowView({ row, controller }: { ro
   );
 });
 
-/** The "+N more" line under a family in Needs you: a count, not a control. */
-export const LeftOutRowView = memo(function LeftOutRowView({ row }: { row: LeftOutRow }) {
+/** 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";
   return (
-    <div
-      className="relative flex h-6 w-full items-center gap-1.5 pr-2 text-xs text-muted-foreground"
+    <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) }}
     >
-      <RowRails rails={row.rails} />
       <span aria-hidden className="size-4 shrink-0" />
-      <span title={`${row.count} more ${noun}`}>+{row.count} more</span>
-    </div>
+      +{row.count} more
+    </button>
   );
 });
 
@@ -84,7 +86,6 @@ export const EnvironmentRowView = memo(function EnvironmentRowView({
       className="group/row relative flex h-7 w-full items-center gap-1.5 rounded-md pr-1 text-sm text-muted-foreground hover:bg-sidebar-accent"
       style={{ paddingLeft: rowIndent(row.depth) }}
     >
-      <RowRails rails={row.rails} />
       <button
         type="button"
         aria-expanded={!row.collapsed}

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 you section above every group.
+// in chunks; and the Needs attention section above every group.
 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,7 +14,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
 import { ICONS } from "../icons";
-import { NEEDS_YOU_GROUP_ID, type GroupView, type NeedsYouView, type Row } from "../model/view";
+import { ATTENTION_GROUP_ID, type GroupView, type AttentionView, type Row } from "../model/view";
 import { chunk, windowedNavValue } from "../model/windowing";
 import type { RowController } from "./controller";
 import { EnvironmentRowView, LeftOutRowView, OlderRowView } from "./FoldRows";
@@ -63,15 +63,31 @@ const GroupHeader = memo(function GroupHeader({
   dropActive: boolean;
 }) {
   const [renaming, setRenaming] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
   const label = group.descriptor.label;
   const draggable = useDraggable({
     id: `group:${group.descriptor.id}`,
     data: { kind: "group", groupId: group.descriptor.id },
     disabled: controller.compact || inOverflow || renaming,
   });
-  const actionsClass = controller.compact
+  const compact = controller.compact;
+  // Desktop: the counter sits flush right, and "+" and "…" fade in over its
+  // place on hover or focus, as a row's actions fade over its age. Nothing is
+  // kept for them otherwise. Phones keep them in line, always shown.
+  const counterFade = compact
     ? ""
-    : "opacity-0 group-hover/header:opacity-100 focus-visible:opacity-100 data-[state=open]:opacity-100";
+    : menuOpen
+      ? "opacity-0"
+      : "group-hover/header:opacity-0 group-focus-within/header:opacity-0";
+  const actionsFade = compact
+    ? ""
+    : cn(
+        "absolute top-1/2 right-0 -translate-y-1/2 pl-1",
+        dropActive ? "bg-sidebar-accent" : "bg-sidebar",
+        menuOpen
+          ? "opacity-100"
+          : "pointer-events-none opacity-0 group-hover/header:pointer-events-auto group-hover/header:opacity-100 group-focus-within/header:pointer-events-auto group-focus-within/header:opacity-100",
+      );
   return (
     <div
       ref={draggable.setNodeRef}
@@ -117,98 +133,96 @@ const GroupHeader = memo(function GroupHeader({
         </button>
       )}
       {!renaming ? (
-        <CounterStrip
-          counters={visibleCounters(group.counters, { collapsed: group.collapsed, more: false })}
-          className="ml-auto"
-        />
-      ) : null}
-      {!renaming &&
-      group.descriptor.kind !== "pinned" &&
-      (group.descriptor.newThreadProjectId !== null || group.descriptor.kind === "machine") &&
-      (!controller.compact || controller.activeGroupId === group.descriptor.id) ? (
-        <button
-          type="button"
-          aria-label={`New thread in ${label}`}
-          title={`New thread in ${label}`}
-          data-sidebar-hover-actions-mobile={controller.compact ? "always" : undefined}
-          className={cn(ROW_ICON_BUTTON, actionsClass)}
-          onPointerDown={(event) => event.stopPropagation()}
-          onClick={() => controller.onNewThread(group)}
-        >
-          <Icon name={ICONS.newThread} aria-hidden className="size-4" />
-        </button>
-      ) : !renaming && !controller.compact ? (
-        // Keeps every header's counters on one edge.
-        <span aria-hidden className="size-6 shrink-0" />
-      ) : null}
-      {!renaming ? (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <button
-              type="button"
-              aria-label={`${label} actions`}
-              className={cn(ROW_ICON_BUTTON, actionsClass)}
-              onPointerDown={(event) => event.stopPropagation()}
-            >
-              <Icon name={ICONS.more} aria-hidden className="size-4" />
-            </button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="min-w-48">
-            <DropdownMenuItem onSelect={() => controller.onMarkAllRead(group)}>
-              <Icon name={ICONS.markRead} aria-hidden className="size-4" />
-              Mark all read
-            </DropdownMenuItem>
-            {group.descriptor.kind !== "pinned" && group.descriptor.newThreadProjectId !== null ? (
-              <DropdownMenuItem onSelect={() => controller.onNewThread(group)}>
+        <span className="relative ml-auto flex shrink-0 items-center">
+          <CounterStrip
+            counters={visibleCounters(group.counters, { collapsed: group.collapsed, more: false })}
+            className={cn("transition-opacity", counterFade)}
+          />
+          <span className={cn("flex items-center transition-opacity", actionsFade)}>
+            {group.descriptor.kind !== "pinned" &&
+            (group.descriptor.newThreadProjectId !== null || group.descriptor.kind === "machine") &&
+            (!controller.compact || controller.activeGroupId === group.descriptor.id) ? (
+              <button
+                type="button"
+                aria-label={`New thread in ${label}`}
+                title={`New thread in ${label}`}
+                data-sidebar-hover-actions-mobile={controller.compact ? "always" : undefined}
+                className={ROW_ICON_BUTTON}
+                onPointerDown={(event) => event.stopPropagation()}
+                onClick={() => controller.onNewThread(group)}
+              >
                 <Icon name={ICONS.newThread} aria-hidden className="size-4" />
-                New thread
-              </DropdownMenuItem>
+              </button>
             ) : null}
-            {controller.canCreateSections ? (
-              <DropdownMenuItem onSelect={() => controller.onNewSection()}>
-                <Icon name={ICONS.newSection} aria-hidden className="size-4" />
-                New section
-              </DropdownMenuItem>
-            ) : null}
-            {canRename(group) ? (
-              <DropdownMenuItem onSelect={() => setRenaming(true)}>
-                <Icon name={ICONS.rename} aria-hidden className="size-4" />
-                Rename
-              </DropdownMenuItem>
-            ) : null}
-            <DropdownMenuSeparator />
-            {group.descriptor.kind !== "pinned" ? (
-              group.hidden ? (
-                <DropdownMenuItem onSelect={() => controller.onShow(group)}>
-                  <Icon name={ICONS.show} aria-hidden className="size-4" />
-                  Show in list
+            <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
+              <DropdownMenuTrigger asChild>
+                <button
+                  type="button"
+                  aria-label={`${label} actions`}
+                  className={ROW_ICON_BUTTON}
+                  onPointerDown={(event) => event.stopPropagation()}
+                >
+                  <Icon name={ICONS.more} aria-hidden className="size-4" />
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="min-w-48">
+                <DropdownMenuItem onSelect={() => controller.onMarkAllRead(group)}>
+                  <Icon name={ICONS.markRead} aria-hidden className="size-4" />
+                  Mark all read
                 </DropdownMenuItem>
-              ) : (
-                <DropdownMenuItem onSelect={() => controller.onHide(group)}>
-                  <Icon name={ICONS.hidden} aria-hidden className="size-4" />
-                  Hide from list
+                {group.descriptor.kind !== "pinned" && group.descriptor.newThreadProjectId !== null ? (
+                  <DropdownMenuItem onSelect={() => controller.onNewThread(group)}>
+                    <Icon name={ICONS.newThread} aria-hidden className="size-4" />
+                    New thread
+                  </DropdownMenuItem>
+                ) : null}
+                {controller.canCreateSections ? (
+                  <DropdownMenuItem onSelect={() => controller.onNewSection()}>
+                    <Icon name={ICONS.newSection} aria-hidden className="size-4" />
+                    New section
+                  </DropdownMenuItem>
+                ) : null}
+                {canRename(group) ? (
+                  <DropdownMenuItem onSelect={() => setRenaming(true)}>
+                    <Icon name={ICONS.rename} aria-hidden className="size-4" />
+                    Rename
+                  </DropdownMenuItem>
+                ) : null}
+                <DropdownMenuSeparator />
+                {group.descriptor.kind !== "pinned" ? (
+                  group.hidden ? (
+                    <DropdownMenuItem onSelect={() => controller.onShow(group)}>
+                      <Icon name={ICONS.show} aria-hidden className="size-4" />
+                      Show in list
+                    </DropdownMenuItem>
+                  ) : (
+                    <DropdownMenuItem onSelect={() => controller.onHide(group)}>
+                      <Icon name={ICONS.hidden} aria-hidden className="size-4" />
+                      Hide from list
+                    </DropdownMenuItem>
+                  )
+                ) : null}
+                <DropdownMenuItem onSelect={() => controller.onToggleArchived()}>
+                  <Icon name={controller.showArchived ? ICONS.check : ICONS.archive} aria-hidden className="size-4" />
+                  Show archived threads
                 </DropdownMenuItem>
-              )
-            ) : null}
-            <DropdownMenuItem onSelect={() => controller.onToggleArchived()}>
-              <Icon name={controller.showArchived ? ICONS.check : ICONS.archive} aria-hidden className="size-4" />
-              Show archived threads
-            </DropdownMenuItem>
-            <DropdownMenuItem onSelect={() => controller.onCustomize()}>
-              <Icon name={ICONS.customize} aria-hidden className="size-4" />
-              Customize list
-            </DropdownMenuItem>
-            {group.descriptor.kind === "section" ? (
-              <DropdownMenuItem
-                className="text-destructive focus:text-destructive"
-                onSelect={() => controller.onRemove(group)}
-              >
-                <Icon name={ICONS.remove} aria-hidden className="size-4" />
-                Remove section
-              </DropdownMenuItem>
-            ) : null}
-          </DropdownMenuContent>
-        </DropdownMenu>
+                <DropdownMenuItem onSelect={() => controller.onCustomize()}>
+                  <Icon name={ICONS.customize} aria-hidden className="size-4" />
+                  Customize list
+                </DropdownMenuItem>
+                {group.descriptor.kind === "section" ? (
+                  <DropdownMenuItem
+                    className="text-destructive focus:text-destructive"
+                    onSelect={() => controller.onRemove(group)}
+                  >
+                    <Icon name={ICONS.remove} aria-hidden className="size-4" />
+                    Remove section
+                  </DropdownMenuItem>
+                ) : null}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </span>
+        </span>
       ) : null}
     </div>
   );
@@ -333,7 +347,7 @@ function Rows({
             ) : row.type === "older" ? (
               <OlderRowView key={row.key} row={row} controller={rowController} />
             ) : row.type === "left-out" ? (
-              <LeftOutRowView key={row.key} row={row} />
+              <LeftOutRowView key={row.key} row={row} controller={rowController} />
             ) : (
               <EnvironmentRowView
                 key={row.key}
@@ -382,7 +396,7 @@ export const GroupSection = memo(function GroupSection({
         dropActive={dropTargetGroupId === group.descriptor.id}
       />
       {group.collapsed ? null : group.rows.length === 0 ? (
-        // A group whose every family sits in Needs you draws only its header.
+        // 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
       ) : (
         <Rows
@@ -397,23 +411,40 @@ export const GroupSection = memo(function GroupSection({
   );
 });
 
+// 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 you section: a header with its family count, then its rows. It
- * has no collapse, menu or drag, and no drop target of its own.
+ * 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 NeedsYouSection = memo(function NeedsYouSection({ view, ...rest }: SectionProps & { view: NeedsYouView }) {
+export const AttentionSection = memo(function AttentionSection({ view, ...rest }: SectionProps & { view: AttentionView }) {
   return (
-    <section aria-label="Needs you" className="relative flex w-full min-w-0 flex-col">
+    <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 bg-sidebar pl-2 pr-2 text-xs font-medium text-muted-foreground max-md:pointer-coarse:h-9"
+        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 you</span>
-        <span className="tabular-nums" aria-label={`${view.familyCount} ${view.familyCount === 1 ? "family" : "families"}`}>
-          {view.familyCount}
-        </span>
+        <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={NEEDS_YOU_GROUP_ID} inPinned={false} forceMount={false} />
+      <Rows {...rest} rows={view.rows} groupId={ATTENTION_GROUP_ID} inPinned={false} forceMount={false} />
     </section>
   );
 });

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

@@ -8,7 +8,7 @@ import { lastReply } from "../model/notes";
 import { finishedAtFor, stateSince } from "../model/time";
 import { ICONS } from "../icons";
 import { ListLiveContext, type ModelInfo, type RowController } from "./controller";
-import { GlyphIcon } from "./glyphs";
+import { GlyphIcon, NoteLine } from "./glyphs";
 import { ProviderBadge } from "./ProviderBadge";
 import { pullRequestLabel, pullRequestTone } from "./PullRequestBadge";
 
@@ -87,8 +87,7 @@ export function ThreadDetails({
       </div>
       {info.note !== null ? (
         <p className="break-words leading-snug">
-          <span className={info.note.tone === "destructive" ? "text-destructive" : "text-attention"}>{info.note.prefix}:</span>{" "}
-          {info.note.text}
+          <NoteLine note={info.note} />
         </p>
       ) : null}
       <dl className="flex flex-col gap-1">

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

@@ -29,7 +29,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
 import { cn } from "@/lib/utils";
 import { useAutoExpand } from "../data/useAutoExpand";
 import { useClientPreferences } from "../data/useClientPreferences";
-import { useNeedsYouHold } from "../data/useNeedsYouHold";
+import { useAttentionHold } from "../data/useAttentionHold";
 import { useNow } from "../data/useNow";
 import { usePreferences } from "../data/usePreferences";
 import { useScheduled } from "../data/useScheduled";
@@ -40,7 +40,7 @@ import { moveGroup, ORDER_PREFERENCE } from "../model/groups";
 import { MARK_ALL_CONFIRM_ABOVE, type RowMenuAction } from "../model/menu";
 import { assignProviderMarks, providerMark } from "../model/provider-mark";
 import { isDoneUnseen } from "../model/state";
-import { markAllReadPlan, toggleChip, toggleGroup, toggleOlder, type ToggleOutcome } from "../model/toggles";
+import { markAllReadPlan, openChildren, toggleChip, toggleGroup, toggleOlder, type ToggleOutcome } from "../model/toggles";
 import { buildListView, type GroupView, type ListView } from "../model/view";
 import { shareView } from "../model/share";
 import { ListLiveContext, type ListLive, type ModelInfo, type RowController } from "./controller";
@@ -51,7 +51,7 @@ import { modelDisplayName } from "../model/details";
 import { groupIdForRoot } from "../model/groups";
 import { CounterStrip } from "./glyphs";
 import { cancelPendingCards } from "./row-card";
-import { GroupSection, NeedsYouSection, type DropStates, type GroupController } from "./GroupSection";
+import { GroupSection, AttentionSection, type DropStates, type GroupController } from "./GroupSection";
 import type { ProviderDisplay } from "./ProviderBadge";
 import { ThreadDetails } from "./ThreadDetails";
 import { Toolbar } from "./Toolbar";
@@ -160,7 +160,7 @@ function ThreadListBody({
     [ready, threads, activeThreadId, stamps.finishedAt, stamps.seenAt, draftIds, scheduled, now, notes, prefs.childAttention],
   );
   const { targets, prune } = useAutoExpand(hydrated ? forest : null, activeThreadId);
-  const heldRootId = useNeedsYouHold(forest, activeThreadId);
+  const held = useAttentionHold(forest, activeThreadId);
   // Rows and groups that did not change keep their objects, so their
   // memoized components skip the render.
   const previousView = useRef<ListView | null>(null);
@@ -175,10 +175,10 @@ function ThreadListBody({
             sections: sidebar.sections,
             prefs,
             activeThreadId,
-            heldRootId,
+            held,
             targets,
           })),
-    [forest, threads, sidebar.projects, sidebar.sections, prefs, activeThreadId, heldRootId, targets],
+    [forest, threads, sidebar.projects, sidebar.sections, prefs, activeThreadId, held, targets],
   );
   useLayoutEffect(() => {
     previousView.current = view;
@@ -368,6 +368,7 @@ function ThreadListBody({
         const group = view!.groups.find((candidate) => candidate.descriptor.id === row.scopeId) ?? null;
         applyToggle(toggleOlder(row, prefs, group, forest!));
       },
+      onOpenChildren: (rootId) => applyToggle(openChildren(rootId, latest.current.prefs)),
       onToggleEnvironment: (environmentId) => {
         const { collapsedEnvironments } = latest.current.prefs;
         update({
@@ -523,8 +524,8 @@ function ThreadListBody({
   }, []);
 
   const dropContext = useMemo(() => {
-    // A row in Needs you drops as it would in its home group.
-    const groupOfThread = new Map<string, string>(Object.entries(view?.needsYou?.homeGroupIds ?? {}));
+    // A row in Needs attention drops as it would in its home group.
+    const groupOfThread = new Map<string, string>(Object.entries(view?.attention?.homeGroupIds ?? {}));
     for (const group of [...(view?.groups ?? []), ...(view?.more ?? [])]) {
       for (const row of group.rows) if (row.type === "thread") groupOfThread.set(row.info.thread.id, group.descriptor.id);
     }
@@ -684,9 +685,9 @@ function ThreadListBody({
           <p className="px-3 py-4 text-sm text-muted-foreground">No threads yet.</p>
         ) : (
           <DndContext sensors={sensors} collisionDetection={collision} onDragMove={onDragMove} onDragEnd={onDragEnd} onDragCancel={onDragCancel}>
-            {view.needsYou !== null ? (
-              <NeedsYouSection
-                view={view.needsYou}
+            {view.attention !== null ? (
+              <AttentionSection
+                view={view.attention}
                 rowController={rowController}
                 environmentProviders={environmentProviders}
                 dropStates={dropStates}

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

@@ -16,18 +16,18 @@ import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/h
 import { cn } from "@/lib/utils";
 import { ICONS } from "../icons";
 import { chipLabel, rowAriaLabel } from "../model/labels";
-import { rowIndent, titleTreatment } from "../model/layout";
+import { rowIndent } from "../model/layout";
 import { rowMenuItems } from "../model/menu";
+import { noteText } from "../model/notes";
 import { chipTone, pluginStatusWins } from "../model/state";
 import { trailingTime } from "../model/time";
 import type { ThreadRow } from "../model/view";
 import type { DraggedThread } from "../model/drag";
 import type { RowController } from "./controller";
-import { CHIP_TONE_CLASS, FlagGlyph, GlyphIcon, PluginStatusGlyph } from "./glyphs";
+import { CHIP_TONE_CLASS, FlagGlyph, GlyphIcon, NoteLine, PluginStatusGlyph } from "./glyphs";
 import { ProviderBadge } from "./ProviderBadge";
 import { PullRequestBadge } from "./PullRequestBadge";
 import { RenameEditor } from "./RenameEditor";
-import { RowRails } from "./Rails";
 import { RowContextMenuContent, RowDropdownMenuContent, type ContextMenuInput } from "./RowMenu";
 import { SplitMiniMap, type MiniMapPane } from "./SplitMiniMap";
 import { ThreadDetails } from "./ThreadDetails";
@@ -57,6 +57,14 @@ function swallowNextClick(): void {
   });
 }
 
+/**
+ * A quiet title, and its chip: the foreground mixed toward the surface under
+ * the row (the sidebar, or the Needs attention band) in oklch, which keeps
+ * 4.5:1 in both of bb's themes. Opacity blends in sRGB and lands lower in
+ * the light theme.
+ */
+const QUIET_TEXT = "text-[color:color-mix(in_oklch,var(--foreground)_var(--tg-quiet,68%),var(--tg-surface,var(--sidebar)))]";
+
 export const ROW_ICON_BUTTON =
   "pointer-events-auto relative z-10 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground outline-none hover:bg-state-hover hover:text-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring data-[state=open]:bg-state-active";
 
@@ -291,10 +299,9 @@ export const ThreadRowView = memo(function ThreadRowView({
 
   const chip = row.chip;
   const indent = rowIndent(row.depth);
-  const title = titleTreatment(row.depth, { unread: info.unread, active: isActive });
-  const twoLines = controller.comfortable || info.note !== null;
-  // A parent keeps full colour so its children read as the quieter ones.
-  const dimmed = info.quiet && !isActive && !editing && chip === null;
+  const note = row.note;
+  const twoLines = controller.comfortable || note !== 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.
@@ -359,7 +366,6 @@ export const ThreadRowView = memo(function ThreadRowView({
         }}
         className="absolute inset-0 rounded-md outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring"
       />
-      <RowRails rails={row.rails} />
       <span className="pointer-events-none relative flex size-4 shrink-0 items-center justify-center">{stateSlot}</span>
       {row.nested ? (
         // Tight against the title, and over the row's gap, so it adds 8px.
@@ -402,23 +408,20 @@ export const ThreadRowView = memo(function ThreadRowView({
             title={thread.displayTitle}
             className={cn(
               "min-w-0 truncate",
-              info.unread ? "font-semibold" : "font-normal",
-              // Read, idle threads step back so live ones lead.
-              dimmed && !title.muted && "text-muted-foreground",
-              // Children sit a step below their parent; hover and selection bring them back.
-              title.small && "text-xs",
-              // Foreground thinned toward the sidebar: at least 4.5:1 in both themes, and below a muted root.
-              title.muted && "text-[color:color-mix(in_oklch,var(--foreground)_72%,var(--sidebar))] group-hover/row:text-foreground",
+              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`,
             )}
           >
             {/* Plain text: mention pills lost the truncation fight. */}
             {thread.displayTitle}
           </span>
         )}
-        {!editing && info.note !== null ? (
-          <span className="min-w-0 truncate text-xs leading-4 text-muted-foreground" title={`${info.note.prefix}: ${info.note.text}`}>
-            <span className={info.note.tone === "destructive" ? "text-destructive" : "text-attention"}>{info.note.prefix}:</span>{" "}
-            {info.note.text}
+        {!editing && note !== null ? (
+          <span className="min-w-0 truncate text-xs leading-4 text-muted-foreground" title={noteText(note)}>
+            <NoteLine note={note} />
           </span>
         ) : controller.comfortable && !editing ? (
           <SecondLine row={row} multiHost={controller.multiHost} defaultBranch={controller.defaultBranchOf(thread)} />
@@ -451,6 +454,7 @@ export const ThreadRowView = memo(function ThreadRowView({
           className={cn(
             "pointer-events-auto relative z-10 inline-flex h-5 shrink-0 items-center gap-0.5 rounded-md border px-1 text-[11px] leading-none tabular-nums outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
             CHIP_TONE_CLASS[chipTone(chip.flag)],
+            dimmed && QUIET_TEXT,
           )}
         >
           {chip.count}

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

@@ -199,7 +199,7 @@ export function SettingsPanel({
         />
       </Line>
       <Toggle
-        label="Needs you counts every child"
+        label="Needs attention counts every child"
         description="Every unread or failed child thread; otherwise only those blocked on you."
         checked={countsEveryChild(prefs.childAttention)}
         onChange={(value) => onPrefs({ childAttention: childAttentionFor(value) })}

package/features/thread-list/components/controller.ts

@@ -33,6 +33,8 @@ export interface RowController {
   onNavigate(): void;
   onToggleChip(row: ThreadRow): void;
   onToggleOlder(row: OlderRow): void;
+  /** Opens a family's children from its "+N more" line in Needs attention. */
+  onOpenChildren(rootId: string): void;
   onToggleEnvironment(environmentId: string): void;
   onMenuAction(action: RowMenuAction, thread: PluginSidebarThread, sectionId?: string | null): void;
   onRename(threadId: string, title: string): Promise<void>;

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

@@ -4,6 +4,7 @@ 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 { FLAG_GLYPHS, type ChipTone, type Flag, type Glyph, type Tone } from "../model/state";
 
 export const TONE_CLASS: Record<Tone, string> = {
@@ -92,6 +93,23 @@ export function PluginStatusGlyph({ status }: { status: PluginSidebarThreadRowSt
   );
 }
 
+/** A note's prefix takes the tone of the row's glyph for the same reason. */
+const NOTE_TONE_CLASS: Record<RowNote["tone"], string> = {
+  attention: "text-attention",
+  destructive: "text-destructive",
+  muted: "text-muted-foreground",
+};
+
+/** "Failed: timeout", its prefix in the note's tone, or the prefix alone when there is no text. */
+export function NoteLine({ note }: { note: RowNote }) {
+  return (
+    <>
+      <span className={NOTE_TONE_CLASS[note.tone]}>{note.text === "" ? note.prefix : `${note.prefix}:`}</span>
+      {note.text === "" ? null : ` ${note.text}`}
+    </>
+  );
+}
+
 export function FlagGlyph({ flag, className }: { flag: Flag; className?: string }) {
   return <GlyphIcon glyph={FLAG_GLYPHS[flag]} className={className} />;
 }
@@ -101,7 +119,7 @@ const COUNTER_ITEMS: readonly {
   flag: Flag;
   label: (count: number) => string;
 }[] = [
-  { key: "waitsOnYou", flag: "waits-on-you", label: (n) => `${n} need${n === 1 ? "s" : ""} you` },
+  { key: "waitsOnYou", flag: "waits-on-you", label: (n) => `${n} waiting on you` },
   { key: "failed", flag: "unread-failed", label: (n) => `${n} failed` },
   { key: "offline", flag: "offline", label: (n) => `${n} waiting for an offline machine` },
   { key: "working", flag: "working", label: (n) => `${n} working` },