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

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

@@ -1,29 +1,20 @@
-// The top of the scroll area: the filter toggle and the settings
-// popover.
-import { useState } from "react";
+// The top of the scroll area: the settings button and its popover.
 import { experimental_Icon as Icon } from "@get-bb/plugin-sdk/app";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
-import type { ClientPreferences, Lifecycle, Preferences } from "@/shared/preferences";
-import { ATTENTION_EXPLANATION, ATTENTION_SUMMARY } from "../model/counters";
+import type { ClientPreferences, Preferences } from "@/shared/preferences";
+import { childAttentionFor, countsEveryChild, lifecyclesFor, sortArrow, sortFieldPatch, threadsShown } from "../model/settings";
+import { effectiveSortField } from "../model/sort";
 import { ICONS } from "../icons";
+import { TOOLBAR_HEIGHT } from "./GroupSection";
 import { ROW_ICON_BUTTON } from "./ThreadRowView";
 
-type Page = "organize" | "sort" | "display" | "filter";
-
-const PAGES: readonly { id: Page; label: string }[] = [
-  { id: "organize", label: "Organize" },
-  { id: "sort", label: "Sort" },
-  { id: "display", label: "Display" },
-  { id: "filter", label: "Filter" },
-];
-
 // 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 gap-0.5 rounded-md bg-surface-recessed p-0.5";
-const SEGMENT_ITEM = "flex items-center justify-center rounded-sm text-xs outline-none focus-visible:ring-2";
+const SEGMENT_TRACK = "flex min-w-0 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";
 
 function segmentClass(selected: boolean): string {
   return cn(
@@ -34,36 +25,42 @@ function segmentClass(selected: boolean): string {
   );
 }
 
-function Choice<T extends string | boolean>({
+/** A label, then its control, on one line. */
+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>
+  );
+}
+
+function Segmented<T extends string>({
   label,
-  value,
+  options,
   current,
   onSelect,
-  description,
 }: {
   label: string;
-  value: T;
+  options: readonly (readonly [T, string])[];
   current: T;
   onSelect(value: T): void;
-  description?: string;
 }) {
-  const checked = value === current;
   return (
-    <button
-      type="button"
-      role="menuitemradio"
-      aria-checked={checked}
-      onClick={() => onSelect(value)}
-      className="flex w-full items-start gap-2 rounded-md px-2 py-1.5 text-left text-sm outline-none hover:bg-accent focus-visible:bg-accent"
-    >
-      <span className="mt-0.5 inline-flex size-4 shrink-0 items-center justify-center">
-        {checked ? <Icon name={ICONS.check} aria-hidden className="size-4" /> : null}
-      </span>
-      <span className="flex min-w-0 flex-col">
-        <span>{label}</span>
-        {description ? <span className="text-xs text-muted-foreground">{description}</span> : null}
-      </span>
-    </button>
+    <div role="radiogroup" aria-label={label} className={SEGMENT_TRACK}>
+      {options.map(([value, text]) => (
+        <button
+          key={value}
+          type="button"
+          role="radio"
+          aria-checked={value === current}
+          onClick={() => onSelect(value)}
+          className={segmentClass(value === current)}
+        >
+          {text}
+        </button>
+      ))}
+    </div>
   );
 }
 
@@ -81,7 +78,7 @@ function Toggle({
   return (
     <button
       type="button"
-      role="menuitemcheckbox"
+      role="checkbox"
       aria-checked={checked}
       onClick={() => onChange(!checked)}
       className="flex w-full items-start gap-2 rounded-md px-2 py-1.5 text-left text-sm outline-none hover:bg-accent focus-visible:bg-accent"
@@ -104,7 +101,7 @@ function Toggle({
 }
 
 function Heading({ children }: { children: React.ReactNode }) {
-  return <p className="px-2 pb-0.5 pt-2 text-xs font-medium text-muted-foreground first:pt-0">{children}</p>;
+  return <h3 className="px-2 pb-0.5 pt-3 text-xs font-medium text-muted-foreground first:pt-0">{children}</h3>;
 }
 
 export function SettingsPanel({
@@ -118,176 +115,121 @@ export function SettingsPanel({
   onPrefs(patch: Partial<Preferences>): void;
   onClient(patch: Partial<ClientPreferences>): void;
 }) {
-  const [page, setPage] = useState<Page>("organize");
-  const sortField = prefs.chronologicalSort === "none" ? "updated" : prefs.chronologicalSort;
-  const toggleLifecycle = (lifecycle: Lifecycle) => {
-    const has = prefs.threadLifecycles.includes(lifecycle);
-    const next = has
-      ? prefs.threadLifecycles.filter((value) => value !== lifecycle)
-      : [...prefs.threadLifecycles, lifecycle];
-    if (next.length > 0) onPrefs({ threadLifecycles: next });
-  };
+  const arrow = sortArrow(prefs);
   return (
-    <div className="flex flex-col gap-2">
-      <div role="tablist" aria-label="Settings pages" className={SEGMENT_TRACK}>
-        {PAGES.map((candidate) => (
-          <button
-            key={candidate.id}
-            type="button"
-            role="tab"
-            aria-selected={page === candidate.id}
-            onClick={() => setPage(candidate.id)}
-            className={cn(segmentClass(page === candidate.id), "flex-1 px-1.5 py-1 focus-visible:ring-ring")}
-          >
-            {candidate.label}
-          </button>
-        ))}
-      </div>
-      <div role="tabpanel" aria-label={PAGES.find((candidate) => candidate.id === page)?.label} className="flex flex-col">
-        {page === "organize" ? (
-          <>
-            <Heading>Group by</Heading>
-            <Choice label="By project" value="project" current={prefs.organizationMode} onSelect={(value) => onPrefs({ organizationMode: value })} />
-            <Choice label="Custom" description="Your own sections" value="chronological" current={prefs.organizationMode} onSelect={(value) => onPrefs({ organizationMode: value })} />
-            <Choice label="By machine" value="machine" current={prefs.organizationMode} onSelect={(value) => onPrefs({ organizationMode: value })} />
-            <Heading>Child threads</Heading>
-            <Choice label="Folded" description="One flat level behind a chip" value="folded" current={prefs.nesting} onSelect={(value) => onPrefs({ nesting: value })} />
-            <Choice label="Tree" description="bb's indented tree" value="tree" current={prefs.nesting} onSelect={(value) => onPrefs({ nesting: value })} />
-            <Heading>Groups</Heading>
-            <Toggle
-              label="By environment"
-              description="Fold threads sharing a worktree into a folder"
-              checked={prefs.environmentGrouping}
-              onChange={(value) => onPrefs({ environmentGrouping: value })}
-            />
-          </>
-        ) : null}
-        {page === "sort" ? (
-          <>
-            <Heading>Sort by</Heading>
-            <Choice label="Updated" value="updated" current={sortField} onSelect={(value) => onPrefs({ chronologicalSort: value })} />
-            <Choice label="Created" value="created" current={sortField} onSelect={(value) => onPrefs({ chronologicalSort: value })} />
-            <Choice label="Alphabetical" value="alpha" current={sortField} onSelect={(value) => onPrefs({ chronologicalSort: value })} />
-            <Heading>Direction</Heading>
-            <Choice label="Default" value="default" current={prefs.sortDirection} onSelect={(value) => onPrefs({ sortDirection: value })} />
-            <Choice label="Ascending" value="ascending" current={prefs.sortDirection} onSelect={(value) => onPrefs({ sortDirection: value })} />
-            <Choice label="Descending" value="descending" current={prefs.sortDirection} onSelect={(value) => onPrefs({ sortDirection: value })} />
-            <Heading>Order</Heading>
-            <Toggle
-              label="Working first"
-              description="Running threads on top under Updated"
-              checked={prefs.workingFirst}
-              onChange={(value) => onPrefs({ workingFirst: value })}
-            />
-            <Toggle
-              label="Fold older threads"
-              description="Keep the 5 most recent quiet threads per group"
-              checked={prefs.foldOlder}
-              onChange={(value) => onPrefs({ foldOlder: value })}
-            />
-          </>
-        ) : null}
-        {page === "display" ? (
-          <>
-            <Heading>Density</Heading>
-            <Choice label="Compact" description="One line per thread" value="compact" current={client.density} onSelect={(value) => onClient({ density: value })} />
-            <Choice label="Comfortable" description="Adds branch and machine" value="comfortable" current={client.density} onSelect={(value) => onClient({ density: value })} />
-            <Heading>Harness icon</Heading>
-            <Choice label="Muted" description="Monochrome, beside the age" value="muted" current={prefs.harnessIcon} onSelect={(value) => onPrefs({ harnessIcon: value })} />
-            <Choice label="Colour" description="Each provider's own tint" value="colour" current={prefs.harnessIcon} onSelect={(value) => onPrefs({ harnessIcon: value })} />
-            <Choice label="Hidden" description="Shown in the hover card only" value="hidden" current={prefs.harnessIcon} onSelect={(value) => onPrefs({ harnessIcon: value })} />
-            <Heading>Rows</Heading>
-            <Toggle label="Pull requests" checked={prefs.showPullRequests} onChange={(value) => onPrefs({ showPullRequests: value })} />
-          </>
-        ) : null}
-        {page === "filter" ? (
-          <>
-            <Heading>Show</Heading>
-            <Toggle label="Active" checked={prefs.threadLifecycles.includes("active")} onChange={() => toggleLifecycle("active")} />
-            <Toggle label="Archived" checked={prefs.threadLifecycles.includes("archived")} onChange={() => toggleLifecycle("archived")} />
-            <Heading>Child threads in Needs attention</Heading>
-            <Choice
-              label="Blocked and orphaned failures"
-              description="A child that waits on you, is offline, or failed while its manager is idle"
-              value="blocked"
-              current={prefs.childAttention}
-              onSelect={(value) => onPrefs({ childAttention: value })}
-            />
-            <Choice
-              label="Everything"
-              description="Also every failed or unread child"
-              value="everything"
-              current={prefs.childAttention}
-              onSelect={(value) => onPrefs({ childAttention: value })}
-            />
-          </>
-        ) : null}
-      </div>
+    <div className="flex flex-col">
+      <Heading>List</Heading>
+      <Line label="Group by">
+        <Segmented
+          label="Group by"
+          options={[
+            ["project", "Project"],
+            ["chronological", "Custom"],
+            ["machine", "Machine"],
+          ]}
+          current={prefs.organizationMode}
+          onSelect={(value) => onPrefs({ organizationMode: value })}
+        />
+      </Line>
+      <Line label="Sort by">
+        <Segmented
+          label="Sort by"
+          options={[
+            ["updated", "Updated"],
+            ["created", "Created"],
+            ["alpha", "A–Z"],
+          ]}
+          current={effectiveSortField(prefs.chronologicalSort)}
+          onSelect={(value) => onPrefs(sortFieldPatch(value))}
+        />
+        <button
+          type="button"
+          aria-label={`Sort order: ${arrow.label}. Reverse`}
+          title={arrow.label}
+          onClick={() => onPrefs(arrow.patch)}
+          className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-surface-recessed text-xs outline-none hover:bg-state-hover focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          {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 })} />
+      <Heading>Rows</Heading>
+      <Line label="Density">
+        <Segmented
+          label="Density"
+          options={[
+            ["compact", "Compact"],
+            ["comfortable", "Comfortable"],
+          ]}
+          current={client.density}
+          onSelect={(value) => onClient({ density: value })}
+        />
+      </Line>
+      <Line label="Harness icon">
+        <Segmented
+          label="Harness icon"
+          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>
+      <Toggle
+        label="Needs you 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) })}
+      />
     </div>
   );
 }
 
+/** The slim row above the list: ⚙ alone at its right. */
 export function Toolbar({
   prefs,
   client,
-  attentionCount,
-  compact,
   onPrefs,
   onClient,
 }: {
   prefs: Preferences;
   client: ClientPreferences;
-  /** Threads that need attention, for the filter's badge. */
-  attentionCount: number;
-  /** Phone width: the filter's long label would truncate. */
-  compact: boolean;
   onPrefs(patch: Partial<Preferences>): void;
   onClient(patch: Partial<ClientPreferences>): void;
 }) {
   return (
-    // Sticky with the group headers, so the filter stays in reach.
-    <div className="sticky top-0 z-30 flex h-8 items-center gap-1 bg-sidebar pb-1">
-      <TooltipProvider delayDuration={400}>
-        <div role="radiogroup" aria-label="Filter threads" className={cn(SEGMENT_TRACK, "min-w-0 flex-1")}>
-          {(
-            [
-              ["all", "All"],
-              ["attention", "Needs attention"],
-            ] as const
-          ).map(([value, label]) => {
-            const button = (
-              <button
-                key={value}
-                type="button"
-                role="radio"
-                aria-checked={client.filter === value}
-                aria-description={value === "attention" ? ATTENTION_EXPLANATION : undefined}
-                onClick={() => onClient({ filter: value })}
-                className={cn(segmentClass(client.filter === value), "min-w-0 flex-1 gap-1 truncate px-1.5 py-0.5 focus-visible:ring-sidebar-ring")}
-              >
-                <span className="truncate">{value === "attention" && compact ? "Attention" : label}</span>
-                {value === "attention" && attentionCount > 0 ? (
-                  <span className="shrink-0 tabular-nums text-muted-foreground">{attentionCount}</span>
-                ) : null}
-              </button>
-            );
-            if (value !== "attention") return button;
-            return (
-              <Tooltip key={value}>
-                <TooltipTrigger asChild>{button}</TooltipTrigger>
-                <TooltipContent side="bottom">{ATTENTION_SUMMARY}</TooltipContent>
-              </Tooltip>
-            );
-          })}
-        </div>
-      </TooltipProvider>
+    // 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-64 p-2">
+        <PopoverContent align="end" className="w-80 p-2">
           <SettingsPanel prefs={prefs} client={client} onPrefs={onPrefs} onClient={onClient} />
         </PopoverContent>
       </Popover>

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

@@ -4,7 +4,7 @@
 import { createContext } from "react";
 import type { PluginSidebarSection, PluginSidebarThread } from "@get-bb/plugin-sdk/app";
 import type { Stamps } from "@/shared/contract";
-import type { HarnessIcon, Nesting, OrganizationMode } from "@/shared/preferences";
+import type { HarnessIcon, OrganizationMode } from "@/shared/preferences";
 import type { ThreadNotes } from "@/shared/contract";
 import type { Family } from "../model/families";
 import type { RowMenuAction } from "../model/menu";
@@ -30,7 +30,6 @@ export interface RowController {
   provider(providerId: string): ProviderDisplay;
   sections: readonly PluginSidebarSection[];
   mode: OrganizationMode;
-  nesting: Nesting;
   onNavigate(): void;
   onToggleChip(row: ThreadRow): void;
   onToggleOlder(row: OlderRow): void;

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

@@ -101,7 +101,7 @@ const COUNTER_ITEMS: readonly {
   flag: Flag;
   label: (count: number) => string;
 }[] = [
-  { key: "needsYou", flag: "needs-you", label: (n) => `${n} need${n === 1 ? "s" : ""} you` },
+  { key: "waitsOnYou", flag: "waits-on-you", label: (n) => `${n} need${n === 1 ? "s" : ""} 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` },

package/features/thread-list/data/useClientPreferences.ts

@@ -1,4 +1,4 @@
-// Per-client preferences: filter and density, localStorage only.
+// Per-client preferences: density, localStorage only.
 import { useCallback, useState } from "react";
 import {
   CLIENT_PREFERENCES_STORAGE_KEY,

package/features/thread-list/data/useNeedsYouHold.ts

@@ -0,0 +1,19 @@
+// Which family Needs you holds, and which family is open, while one of its threads is open. Diffed
+// render to render, as auto-expansion is; nothing here is persisted.
+import { useRef } from "react";
+import type { Forest } from "../model/families";
+import { holdNeedsYou, NO_HOLD, type NeedsYouHold } from "../model/needs-you";
+
+export function useNeedsYouHold(forest: Forest | null, activeThreadId: string | null): string | null {
+  const held = useRef<NeedsYouHold>(NO_HOLD);
+  const lastForest = useRef<Forest | null>(null);
+  const lastActive = useRef<string | null | undefined>(undefined);
+  // Derived during render, so the family never leaves for a frame. Idempotent:
+  // a repeated render with the same inputs keeps what it stored.
+  if (forest !== null && (forest !== lastForest.current || activeThreadId !== lastActive.current)) {
+    held.current = holdNeedsYou(held.current, activeThreadId === null ? undefined : forest.familyOf.get(activeThreadId));
+    lastForest.current = forest;
+    lastActive.current = activeThreadId;
+  }
+  return held.current.heldRootId;
+}

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

@@ -1,8 +1,8 @@
-// Group header counters and the Needs attention filter test. Pure.
+// Group header counters. Pure.
 import type { Family } from "./families";
 
 export interface Counters {
-  needsYou: number;
+  waitsOnYou: number;
   /** Unread-failed plus queue-failed threads. */
   failed: number;
   offline: number;
@@ -10,21 +10,22 @@ export interface Counters {
   unread: number;
 }
 
-export const EMPTY_COUNTERS: Counters = { needsYou: 0, failed: 0, offline: 0, working: 0, unread: 0 };
+export const EMPTY_COUNTERS: Counters = { waitsOnYou: 0, failed: 0, offline: 0, working: 0, unread: 0 };
 
 /**
- * Counts the threads in the families. A thread counts what its attention
- * flags say, so a child adds to needs-you, failed, offline and unread only as
- * the Child threads in Needs attention setting lets it; working counts every thread that runs. Hidden threads carry
- * only needs-you and unread-failed flags already; archived threads never count.
+ * Counts the threads in the families. A thread counts what its Needs you
+ * flags say, so a child adds to waits-on-you, failed, offline and unread only
+ * as "Needs you counts every child" lets it; working counts every thread that
+ * runs. Hidden threads carry only waits-on-you and unread-failed flags
+ * already; archived threads never count.
  */
 export function countFamilies(families: readonly Family[]): Counters {
   const counters = { ...EMPTY_COUNTERS };
   for (const family of families) {
     for (const info of [family.root, ...family.descendants]) {
       if (info.thread.isArchived) continue;
-      const flags = info.attention;
-      if (flags.has("needs-you")) counters.needsYou += 1;
+      const flags = info.needsYou;
+      if (flags.has("waits-on-you")) counters.waitsOnYou += 1;
       if (flags.has("unread-failed") || flags.has("queue-failed")) counters.failed += 1;
       if (flags.has("offline")) counters.offline += 1;
       if (info.flags.has("working")) counters.working += 1;
@@ -36,7 +37,7 @@ export function countFamilies(families: readonly Family[]): Counters {
 
 export function addCounters(a: Counters, b: Counters): Counters {
   return {
-    needsYou: a.needsYou + b.needsYou,
+    waitsOnYou: a.waitsOnYou + b.waitsOnYou,
     failed: a.failed + b.failed,
     offline: a.offline + b.offline,
     working: a.working + b.working,
@@ -44,21 +45,14 @@ export function addCounters(a: Counters, b: Counters): Counters {
   };
 }
 
-/** The Needs attention tooltip: short enough to read at a glance. */
-export const ATTENTION_SUMMARY = "Waiting on you, failed, offline, or finished and unread. Child threads count only when stuck.";
-
-/** What the Needs attention toggle keeps, in full, for its accessible description. */
-export const ATTENTION_EXPLANATION =
-  "Threads only you can move forward: a question, approval or plan review waiting on you; a machine that is offline; a failed thread or queued message; finished threads you haven't opened. For a child thread, only what waits on you or is offline, or a failure whose manager is idle (Filter settings can widen this).";
-
 /**
- * Which counters a header draws. needs-you, failed and offline
+ * Which counters a header draws. waits-on-you, failed and offline
  * always; working only while collapsed, since the rows show it otherwise;
  * unread only on the More trigger, where the rows are out of sight.
  */
 export function visibleCounters(counters: Counters, where: { collapsed: boolean; more: boolean }): Counters {
   return {
-    needsYou: counters.needsYou,
+    waitsOnYou: counters.waitsOnYou,
     failed: counters.failed,
     offline: counters.offline,
     working: where.collapsed || where.more ? counters.working : 0,

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

@@ -3,7 +3,7 @@ import type { Family, ThreadInfo } from "./families";
 import type { StateKind } from "./state";
 
 const SUMMARY_ORDER: readonly [StateKind, string][] = [
-  ["needs-you", "needing you"],
+  ["waits-on-you", "needing you"],
   ["failed", "failed"],
   ["queue-failed", "queue failed"],
   ["offline", "offline"],
@@ -61,7 +61,7 @@ export function sinceLabel(kind: string, since: string | null): string | null {
     case "working":
     case "background":
       return `started ${ago}`;
-    case "needs-you":
+    case "waits-on-you":
       return `waiting since ${ago}`;
     case "failed":
       return `failed ${ago}`;

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

@@ -1,6 +1,6 @@
 // Auto-expansion: transitions found by diffing snapshots, and the
 // transient targets they leave behind. Pure.
-import { revealsOn } from "./attention";
+import { revealsOn } from "./needs-you";
 import type { Forest } from "./families";
 
 /**
@@ -15,20 +15,20 @@ export type Targets = ReadonlyMap<string, TargetKind>;
 export interface Snapshot {
   activeThreadId: string | null;
   unread: ReadonlySet<string>;
-  /** Threads that wait on you or failed, as Needs attention counts them. */
-  attention: ReadonlySet<string>;
+  /** Threads that wait on you or failed, as Needs you counts them. */
+  needsYou: ReadonlySet<string>;
 }
 
 export function snapshotOf(forest: Forest, activeThreadId: string | null): Snapshot {
   const unread = new Set<string>();
-  const attention = new Set<string>();
+  const needsYou = new Set<string>();
   for (const info of forest.infos.values()) {
     if (info.thread.isArchived) continue;
-    // A finished child that Needs attention does not count never opens anything.
-    if (info.attention.has("unread") && !info.thread.isHidden) unread.add(info.thread.id);
-    if (revealsOn(info.attention, info.parentId === null)) attention.add(info.thread.id);
+    // A finished child that does not need you never opens anything.
+    if (info.needsYou.has("unread") && !info.thread.isHidden) unread.add(info.thread.id);
+    if (revealsOn(info.needsYou, info.parentId === null)) needsYou.add(info.thread.id);
   }
-  return { activeThreadId, unread, attention };
+  return { activeThreadId, unread, needsYou };
 }
 
 /**
@@ -40,8 +40,8 @@ export function detectTransitions(previous: Snapshot | null, next: Snapshot): Ma
   if (next.activeThreadId !== null && next.activeThreadId !== previous?.activeThreadId) {
     found.set(next.activeThreadId, "reveal");
   }
-  for (const id of next.attention) {
-    if (!previous?.attention.has(id)) found.set(id, "reveal");
+  for (const id of next.needsYou) {
+    if (!previous?.needsYou.has(id)) found.set(id, "reveal");
   }
   for (const id of next.unread) {
     if (id === next.activeThreadId || found.has(id)) continue;