@gperezmz/bb-plugin-thread-glance 0.2.2 → 0.2.4

package/dist/server.meta.json

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

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

@@ -22,7 +22,7 @@ import { ROW_ICON_BUTTON } from "./ThreadRowView";
 export const OlderRowView = memo(function OlderRowView({ row, controller }: { row: OlderRow; controller: RowController }) {
   const { label, ariaLabel } = olderRowText(row);
   // A family's fold sits where its children do, with a dots glyph in the
-  // status slot; the group's fold keeps the chevron.
+  // Status column; the group's fold keeps the chevron.
   const inFamily = row.scope !== "group";
   return (
     <button

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

@@ -43,8 +43,6 @@ export interface GroupController {
 
 export type DropStates = ReadonlyMap<string, "valid" | "blocked" | "unchanged" | "before" | "after">;
 
-/** The sticky toolbar's height; headers stick below it. */
-export const TOOLBAR_HEIGHT = 28;
 const ROW_HEIGHT = { compact: 28, comfortable: 44 };
 
 function canRename(group: GroupView): boolean {
@@ -96,9 +94,8 @@ const GroupHeader = memo(function GroupHeader({
       role={undefined}
       tabIndex={undefined}
       data-sidebar="group-label"
-      style={{ top: inOverflow ? 0 : TOOLBAR_HEIGHT }}
       className={cn(
-        "group/header sticky z-20 flex h-7 items-center gap-1 rounded-md bg-sidebar pl-2 pr-1 text-xs text-muted-foreground max-md:pointer-coarse:h-9",
+        "group/header sticky top-0 z-20 flex h-7 items-center gap-1 rounded-md bg-sidebar pl-2 pr-1 text-xs text-muted-foreground max-md:pointer-coarse:h-9",
         dropActive && "bg-sidebar-accent",
         draggable.isDragging && "opacity-50",
         !controller.compact && !inOverflow && "select-none",
@@ -423,24 +420,25 @@ const ATTENTION_COUNT =
   "bg-[color-mix(in_oklab,var(--attention)_20%,transparent)] text-[color:color-mix(in_oklab,var(--attention),var(--foreground)_55%)]";
 
 /**
- * The Needs attention section: a header with its family count, 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.
+ * The Needs attention section: a header with its family count (none when every
+ * family in it is attended), then its rows, on one band of bb's attention
+ * colour. It has no collapse, menu or drag, and no drop target of its own.
  */
 export const AttentionSection = memo(function AttentionSection({ view, ...rest }: SectionProps & { view: AttentionView }) {
   return (
     <section aria-label="Needs attention" className={cn("relative mb-1 flex w-full min-w-0 flex-col rounded-md pb-0.5", ATTENTION_BAND)}>
       <h2
-        style={{ top: TOOLBAR_HEIGHT }}
-        className="sticky z-20 flex h-7 items-center gap-1 rounded-t-md bg-[var(--tg-surface)] pl-2 pr-1 text-xs font-medium text-muted-foreground max-md:pointer-coarse:h-9"
+        className="sticky top-0 z-20 flex h-7 items-center gap-1 rounded-t-md bg-[var(--tg-surface)] pl-2 pr-1 text-xs font-medium text-muted-foreground max-md:pointer-coarse:h-9"
       >
         <span className="min-w-0 flex-1 truncate">Needs attention</span>
-        <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>
+        {view.familyCount > 0 ? (
+          <span
+            className={cn("rounded-full px-1.5 text-[11px] leading-4 tabular-nums", ATTENTION_COUNT)}
+            aria-label={`${view.familyCount} ${view.familyCount === 1 ? "family" : "families"}`}
+          >
+            {view.familyCount}
+          </span>
+        ) : null}
       </h2>
       <Rows {...rest} rows={view.rows} groupId={ATTENTION_GROUP_ID} inPinned={false} forceMount={false} />
     </section>

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

@@ -1,20 +1,21 @@
-// 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";
+// Thread Glance's settings, shown by its item in bb's sidebar footer.
+import { experimental_Icon as Icon, type ExperimentalSidebarFooterDisclosureProps } from "@get-bb/plugin-sdk/app";
 import { cn } from "@/lib/utils";
 import type { ClientPreferences, Preferences } from "@/shared/preferences";
 import { childAttentionFor, countsEveryChild, lifecyclesFor, sortArrow, sortFieldPatch, threadsShown } from "../model/settings";
 import { effectiveSortField } from "../model/sort";
+import { useClientPreferences } from "../data/useClientPreferences";
+import { usePreferences } from "../data/usePreferences";
 import { ICONS } from "../icons";
-import { TOOLBAR_HEIGHT } from "./GroupSection";
-import { ROW_ICON_BUTTON } from "./ThreadRowView";
 
 // bb's own segmented controls (the Reasoning picker, the diff view toggle)
 // mark the chosen item with the state-active token and no shadow. The track
 // is a translucent tint, so the chosen item reads as raised in both themes.
-const SEGMENT_TRACK = "flex min-w-0 flex-1 gap-0.5 rounded-md bg-surface-recessed p-0.5";
+// An item never shrinks below its text: where a line cannot hold its label
+// and its control, the control wraps onto a line of its own.
+const SEGMENT_TRACK = "flex flex-1 gap-0.5 rounded-md bg-surface-recessed p-0.5";
 const SEGMENT_ITEM =
-  "flex min-w-0 flex-1 items-center justify-center whitespace-nowrap rounded-sm px-1 py-0.5 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring";
+  "flex flex-1 items-center justify-center whitespace-nowrap rounded-sm px-1 py-0.5 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring";
 
 function segmentClass(selected: boolean): string {
   return cn(
@@ -25,12 +26,12 @@ function segmentClass(selected: boolean): string {
   );
 }
 
-/** A label, then its control, on one line. */
+/** A label, then its control: on one line where the panel is wide enough, else the control below. */
 function Line({ label, children }: { label: string; children: React.ReactNode }) {
   return (
-    <div className="flex items-center gap-2 px-2 py-1">
-      <span className="w-[5.5rem] shrink-0 text-sm">{label}</span>
-      {children}
+    <div className="flex flex-wrap items-center gap-x-2 gap-y-1 px-2 py-1">
+      <span className="min-w-[5.5rem] shrink-0 whitespace-nowrap text-sm">{label}</span>
+      <div className="flex flex-1 gap-2">{children}</div>
     </div>
   );
 }
@@ -104,7 +105,7 @@ function Heading({ children }: { children: React.ReactNode }) {
   return <h3 className="px-2 pb-0.5 pt-3 text-xs font-medium text-muted-foreground first:pt-0">{children}</h3>;
 }
 
-export function SettingsPanel({
+function SettingsPanel({
   prefs,
   client,
   onPrefs,
@@ -208,31 +209,13 @@ export function SettingsPanel({
   );
 }
 
-/** The slim row above the list: ⚙ alone at its right. */
-export function Toolbar({
-  prefs,
-  client,
-  onPrefs,
-  onClient,
-}: {
-  prefs: Preferences;
-  client: ClientPreferences;
-  onPrefs(patch: Partial<Preferences>): void;
-  onClient(patch: Partial<ClientPreferences>): void;
-}) {
+/** The footer item's panel, reading and writing the preferences the list reads. */
+export function SettingsDisclosure(_props: ExperimentalSidebarFooterDisclosureProps) {
+  const { prefs, update } = usePreferences();
+  const [client, updateClient] = useClientPreferences();
   return (
-    // Sticky with the group headers, so the settings stay in reach.
-    <div style={{ height: TOOLBAR_HEIGHT }} className="sticky top-0 z-30 flex items-center justify-end bg-sidebar">
-      <Popover>
-        <PopoverTrigger asChild>
-          <button type="button" aria-label="Thread Glance settings" title="List settings" className={ROW_ICON_BUTTON}>
-            <Icon name={ICONS.settings} aria-hidden className="size-4" />
-          </button>
-        </PopoverTrigger>
-        <PopoverContent align="end" className="w-80 p-2">
-          <SettingsPanel prefs={prefs} client={client} onPrefs={onPrefs} onClient={onClient} />
-        </PopoverContent>
-      </Popover>
+    <div className="p-1">
+      <SettingsPanel prefs={prefs} client={client} onPrefs={update} onClient={updateClient} />
     </div>
   );
 }

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

@@ -54,7 +54,6 @@ import { cancelPendingCards } from "./row-card";
 import { GroupSection, AttentionSection, type DropStates, type GroupController } from "./GroupSection";
 import type { ProviderDisplay } from "./ProviderBadge";
 import { ThreadDetails } from "./ThreadDetails";
-import { Toolbar } from "./Toolbar";
 
 const PLUGIN_ID = "thread-glance";
 
@@ -108,7 +107,7 @@ function ThreadListBody({
   onRetry,
 }: PluginThreadListProps & { attempt: number; onRetry(): void }) {
   const { prefs, hydrated, update } = usePreferences();
-  const [client, updateClient] = useClientPreferences();
+  const [client] = useClientPreferences();
   const sidebar = useSidebarThreads({ experimental_lifecycles: prefs.threadLifecycles });
   const actions = useThreadActions();
   const sdk = useSdk();
@@ -160,7 +159,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 = useAttentionHold(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 +174,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;
@@ -679,7 +678,6 @@ function ThreadListBody({
   return (
     <ListLiveContext.Provider value={live}>
       <div className="flex w-full min-w-0 flex-col px-1.5 pb-2">
-        <Toolbar prefs={prefs} client={client} onPrefs={update} onClient={updateClient} />
         {threads.length === 0 ? (
           // bb's own pinned New thread button covers the empty list.
           <p className="px-3 py-4 text-sm text-muted-foreground">No threads yet.</p>

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

@@ -408,7 +408,7 @@ export const ThreadRowView = memo(function ThreadRowView({
             title={thread.displayTitle}
             className={cn(
               "min-w-0 truncate",
-              info.unread ? "font-semibold" : "font-normal",
+              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.

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

@@ -47,6 +47,18 @@ 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.
+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)}
+    />
+  );
+}
+
 export function GlyphIcon({
   glyph,
   label,
@@ -56,7 +68,7 @@ export function GlyphIcon({
   label?: string;
   className?: string;
 }) {
-  if (glyph.icon === null) return null;
+  if (glyph.icon === "ring") return <IdleRing className={TONE_CLASS[glyph.tone]} />;
   if (glyph.icon === "dot") return <UnreadDot label={label} />;
   return (
     <Icon

package/features/thread-list/data/same-window.ts

@@ -0,0 +1,34 @@
+// The list and the settings panel mount apart, each with its own copy of the
+// preferences. A change made in one reaches the other here, in the same
+// window, at once; the server and localStorage stay what other windows read.
+import { useCallback, useEffect } from "react";
+
+type Apply<Patch> = (patch: Patch) => void;
+
+export function sameWindow<Patch>(): Set<Apply<Patch>> {
+  return new Set();
+}
+
+/**
+ * Joins this copy to `copies` for as long as it is mounted.
+ *
+ * Returns the call that hands a patch this copy made to every other copy.
+ */
+export function useSameWindow<State extends object>(
+  copies: Set<Apply<Partial<State>>>,
+  setState: (update: (current: State) => State) => void,
+): Apply<Partial<State>> {
+  const apply = useCallback((patch: Partial<State>) => setState((current) => ({ ...current, ...patch })), [setState]);
+  useEffect(() => {
+    copies.add(apply);
+    return () => {
+      copies.delete(apply);
+    };
+  }, [copies, apply]);
+  return useCallback(
+    (patch: Partial<State>) => {
+      for (const other of copies) if (other !== apply) other(patch);
+    },
+    [copies, apply],
+  );
+}

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

@@ -1,19 +1,19 @@
-// Which family Needs attention 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.
+// Which family Needs attention holds, as it was when opened, 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 { holdAttention, NO_HOLD, type AttentionHold } from "../model/attention";
+import { holdAttention, NO_HOLD, type AttentionHold, type SectionFamily } from "../model/attention";
 
-export function useAttentionHold(forest: Forest | null, activeThreadId: string | null): string | null {
-  const held = useRef<AttentionHold>(NO_HOLD);
+export function useAttentionHold(forest: Forest | null, activeThreadId: string | null): SectionFamily | null {
+  const hold = useRef<AttentionHold>(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 = holdAttention(held.current, activeThreadId === null ? undefined : forest.familyOf.get(activeThreadId));
+    hold.current = holdAttention(hold.current, forest, activeThreadId);
     lastForest.current = forest;
     lastActive.current = activeThreadId;
   }
-  return held.current.heldRootId;
+  return hold.current.held;
 }

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

@@ -5,16 +5,24 @@ import {
   parseClientPreferences,
   type ClientPreferences,
 } from "@/shared/preferences";
+import { sameWindow, useSameWindow } from "./same-window";
 import { readJson, writeJson } from "./storage";
 
+const copies = sameWindow<Partial<ClientPreferences>>();
+
 export function useClientPreferences(): [ClientPreferences, (patch: Partial<ClientPreferences>) => void] {
   const [value, setValue] = useState(() => parseClientPreferences(readJson(CLIENT_PREFERENCES_STORAGE_KEY)));
-  const update = useCallback((patch: Partial<ClientPreferences>) => {
-    setValue((current) => {
-      const next = { ...current, ...patch };
-      writeJson(CLIENT_PREFERENCES_STORAGE_KEY, next);
-      return next;
-    });
-  }, []);
+  const tellOthers = useSameWindow(copies, setValue);
+  const update = useCallback(
+    (patch: Partial<ClientPreferences>) => {
+      setValue((current) => {
+        const next = { ...current, ...patch };
+        writeJson(CLIENT_PREFERENCES_STORAGE_KEY, next);
+        return next;
+      });
+      tellOthers(patch);
+    },
+    [tellOthers],
+  );
   return [value, update];
 }

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

@@ -14,10 +14,16 @@ import {
   type PreferenceKey,
   type Preferences,
 } from "@/shared/preferences";
+import { sameWindow, useSameWindow } from "./same-window";
 import { readJson, writeJson } from "./storage";
 
 const WRITE_DEBOUNCE_MS = 150;
 
+const copies = sameWindow<Partial<Preferences>>();
+// Writes not yet sent, whichever copy made them: a reload or an echo in any
+// copy must not put back the value one of them replaced.
+const pending = new Map<PreferenceKey, unknown>();
+
 export interface PreferencesState {
   prefs: Preferences;
   /** The server's values have arrived (or failed; the mirror stands in). */
@@ -31,7 +37,6 @@ export function usePreferences(): PreferencesState {
     coercePreferences(readJson(PREFERENCES_MIRROR_STORAGE_KEY)),
   );
   const [hydrated, setHydrated] = useState(false);
-  const pending = useRef(new Map<PreferenceKey, unknown>());
   const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const connection = useRealtimeConnectionState();
   const wasConnected = useRef(false);
@@ -41,7 +46,7 @@ export function usePreferences(): PreferencesState {
       const { preferences } = await rpc.call("listPreferences", null);
       const next = coercePreferences(preferences);
       // Keys with a write in flight keep the local value.
-      for (const [key, value] of pending.current) (next as Record<string, unknown>)[key] = value;
+      for (const [key, value] of pending) (next as Record<string, unknown>)[key] = value;
       setPrefs(next);
       writeJson(PREFERENCES_MIRROR_STORAGE_KEY, next);
     } finally {
@@ -73,7 +78,7 @@ export function usePreferences(): PreferencesState {
 
   useRealtime(CHANNELS.preferences, (payload) => {
     const signal = payload as PreferenceSignal;
-    if (!isPreferenceKey(signal?.key) || pending.current.has(signal.key)) return;
+    if (!isPreferenceKey(signal?.key) || pending.has(signal.key)) return;
     const parsed = parsePreference(signal.key, signal.value);
     if (!parsed.success) return;
     setPrefs((current) => {
@@ -84,8 +89,8 @@ export function usePreferences(): PreferencesState {
   });
 
   const flush = useCallback(() => {
-    const writes = [...pending.current];
-    pending.current.clear();
+    const writes = [...pending];
+    pending.clear();
     for (const [key, value] of writes) {
       rpc.call("setPreference", { key, value }).catch((error: unknown) => {
         toast.error(`Couldn't save the ${key} setting`, {
@@ -103,6 +108,9 @@ export function usePreferences(): PreferencesState {
     [flush],
   );
 
+  // Another copy's change arrives already mirrored and on its way to the server.
+  const tellOthers = useSameWindow(copies, setPrefs);
+
   const update = useCallback(
     (patch: Partial<Preferences>) => {
       setPrefs((current) => {
@@ -110,8 +118,9 @@ export function usePreferences(): PreferencesState {
         writeJson(PREFERENCES_MIRROR_STORAGE_KEY, next);
         return next;
       });
+      tellOthers(patch);
       for (const [key, value] of Object.entries(patch)) {
-        if (isPreferenceKey(key)) pending.current.set(key, value);
+        if (isPreferenceKey(key)) pending.set(key, value);
       }
       if (timer.current !== null) clearTimeout(timer.current);
       timer.current = setTimeout(() => {
@@ -119,7 +128,7 @@ export function usePreferences(): PreferencesState {
         flush();
       }, WRITE_DEBOUNCE_MS);
     },
-    [flush],
+    [flush, tellOthers],
   );
 
   return { prefs, hydrated, update };

package/features/thread-list/icons.ts

@@ -24,7 +24,6 @@ export const ICONS = {
   moveUp: "ChevronUp",
   newThread: "Plus",
   newSection: "SectionAdd",
-  settings: "Settings",
   customize: "SlidersHorizontal",
   check: "Check",
   pullRequest: "GitPullRequest",

package/features/thread-list/index.ts

@@ -1,2 +1,3 @@
 // The sidebar thread list feature: what the app entry may use.
 export { ThreadList } from "./components/ThreadList";
+export { SettingsDisclosure } from "./components/SettingsPanel";

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

@@ -3,7 +3,7 @@
 // builds. Pure.
 import type { PluginSidebarThread } from "@get-bb/plugin-sdk/app";
 import type { ChildAttention } from "@/shared/preferences";
-import type { Family } from "./families";
+import type { Family, Forest } from "./families";
 import { type Flag, type StateKind, type ThreadState } from "./state";
 
 /** The flags that count for a root thread. Working is not one. */
@@ -90,17 +90,20 @@ export function revealsOn(attention: ReadonlySet<Flag>, isRoot: boolean): boolea
 }
 
 /** What the section reads of a family. */
-type SectionFamily = Pick<Family, "root" | "attentionFlags">;
+export type SectionFamily = Pick<Family, "root" | "attentionFlags" | "latestAttentionAt">;
 
 /** What Needs attention remembers between renders: the family it holds, and the family that was open. */
 export interface AttentionHold {
-  /** The root of the family held in the section, if any. */
-  heldRootId: string | null;
+  /**
+   * The family held in the section, if any, as it was when opened. The section
+   * orders it by this, so nothing that happens inside it moves it.
+   */
+  held: SectionFamily | null;
   /** The root of the family the open thread belonged to at the last render, if any. */
   openRootId: string | null;
 }
 
-export const NO_HOLD: AttentionHold = { heldRootId: null, openRootId: null };
+export const NO_HOLD: AttentionHold = { held: null, openRootId: null };
 
 /**
  * Whether a family is in the Needs attention section: it is the held family, or one
@@ -114,20 +117,37 @@ export function inAttention(family: SectionFamily, heldRootId: string | null, op
   return family.attentionFlags.size > 0 && rootId !== openRootId;
 }
 
+/**
+ * Whether a family is attended: held in the section with nothing in it needing
+ * attention any more. It keeps its place and draws and counts as in its home group.
+ */
+export function isAttended(family: SectionFamily, heldRootId: string | null): boolean {
+  return family.root.thread.id === heldRootId && family.attentionFlags.size === 0;
+}
+
 /**
  * The hold after a render. A family is judged when a thread in it is opened
  * from outside it: it is held if something in it needs attention then, and it stays
  * held while one of its threads is open, after nothing in it needs attention any
- * more, until a thread outside it is opened. A family that does not need attention
+ * more, until none of its threads is open. An attended family whose open thread
+ * is archived counts as closed. A family that does not need attention
  * when opened is not pulled in later, whatever happens in it; nor is one
  * that never needed attention. Opening another thread of the open family judges
  * nothing again.
  */
-export function holdAttention(previous: AttentionHold, openFamily: SectionFamily | undefined): AttentionHold {
+export function holdAttention(
+  previous: AttentionHold,
+  forest: Pick<Forest, "infos" | "familyOf">,
+  activeThreadId: string | null,
+): AttentionHold {
+  if (activeThreadId === null) return NO_HOLD;
+  const openFamily = forest.familyOf.get(activeThreadId);
   if (openFamily === undefined) return NO_HOLD;
   const openRootId = openFamily.root.thread.id;
   if (openRootId === previous.openRootId) {
-    return { heldRootId: previous.heldRootId === openRootId ? openRootId : null, openRootId };
+    const archived = forest.infos.get(activeThreadId)?.thread.isArchived ?? false;
+    const held = previous.held?.root.thread.id === openRootId && !(archived && openFamily.attentionFlags.size === 0);
+    return held ? previous : { held: null, openRootId };
   }
-  return { heldRootId: openFamily.attentionFlags.size > 0 ? openRootId : null, openRootId };
+  return { held: openFamily.attentionFlags.size > 0 ? openFamily : null, openRootId };
 }

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

@@ -1,9 +1,12 @@
 // How far a row sits from the list's left edge. Pure, so a test can
 // call it without rendering.
-/** Left padding of a root row, as in bb's list. */
+/**
+ * Left padding of a root row: its Status column starts where the group
+ * header's text does.
+ */
 export const ROOT_INDENT = 8;
 /**
- * A child's status slot starts this far right of its parent's, so the
+ * A child's Status column starts this far right of its parent's, so the
  * child's title sits this far right of the parent's title.
  */
 export const FOLDED_STEP = 12;

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

@@ -1,4 +1,4 @@
-// What the settings popover's controls show and write. Pure.
+// What the settings panel's controls show and write. Pure.
 import type { ChildAttention, Lifecycle, Preferences, SortField } from "@/shared/preferences";
 import { effectiveDirection, effectiveSortField, naturalDirection } from "./sort";
 

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

@@ -48,9 +48,12 @@ const NEEDS: Record<NeedsKind, { icon: string; label: string }> = {
   input: { icon: "MessageQuestion", label: "Needs your input" },
 };
 
-/** How a glyph is drawn. `dot` is the unread dot; everything else a host icon. */
+/**
+ * How a glyph is drawn. `dot` is the unread dot, `ring` the Idle state's
+ * faint ring; everything else a host icon.
+ */
 export interface Glyph {
-  icon: string | "dot" | null;
+  icon: string | "dot" | "ring";
   tone: Tone;
   spin: boolean;
   shine: boolean;
@@ -231,7 +234,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(null, "none"), ...none };
+  return { kind: "idle", label: "Idle", glyph: glyph("ring", "muted"), ...none };
 }
 
 /**