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

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

@@ -29,31 +29,36 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
 import { cn } from "@/lib/utils";
 import { useAutoExpand } from "../data/useAutoExpand";
 import { useClientPreferences } from "../data/useClientPreferences";
-import { useAttentionHold } from "../data/useAttentionHold";
 import { useNow } from "../data/useNow";
 import { usePreferences } from "../data/usePreferences";
 import { useScheduled } from "../data/useScheduled";
 import { useStamps } from "../data/useStamps";
 import { resolveDrop, type DraggedThread, type DropAction, type DropTarget } from "../model/drag";
-import { buildForest } from "../model/families";
+import { buildForest } from "../model/trees";
 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, openChildren, toggleChip, toggleGroup, toggleOlder, type ToggleOutcome } from "../model/toggles";
-import { buildListView, type GroupView, type ListView } from "../model/view";
+import { markAllReadPlan, markReadPlanFor, toggleChip, toggleGroup, toggleOlder, toggleSettled, type ToggleOutcome } from "../model/toggles";
+import { pullRequestFact, pullRequestLookupIds, type SettleInputs } from "../model/settled";
+import { usePullRequestAnswers } from "../data/usePullRequestAnswers";
+import { PullRequestProbes } from "./PullRequestProbes";
+import { buildListView, countNeedYou, needYouActive, type GroupView, type ListView } from "../model/view";
 import { shareView } from "../model/share";
 import { ListLiveContext, type ListLive, type ModelInfo, type RowController } from "./controller";
 import { ConfirmDialog, CustomizeDialog, DetailsDialog, MoveDialog, NewSectionDialog, type CustomizeItem } from "./Dialogs";
 import { useNotes } from "../data/useNotes";
+import { useDefaultBranches } from "../data/useDefaultBranches";
+import { useSystemFacts } from "../data/useSystemFacts";
 import { moveTargets } from "../model/move";
 import { modelDisplayName } from "../model/details";
 import { groupIdForRoot } from "../model/groups";
 import { CounterStrip } from "./glyphs";
 import { cancelPendingCards } from "./row-card";
-import { GroupSection, AttentionSection, type DropStates, type GroupController } from "./GroupSection";
+import { GroupSection, type DropStates, type GroupController } from "./GroupSection";
 import type { ProviderDisplay } from "./ProviderBadge";
 import { ThreadDetails } from "./ThreadDetails";
+import { ListHeader } from "./ListHeader";
+import type { ThreadTree } from "../model/trees";
 
 const PLUGIN_ID = "thread-glance";
 
@@ -107,8 +112,10 @@ function ThreadListBody({
   onRetry,
 }: PluginThreadListProps & { attempt: number; onRetry(): void }) {
   const { prefs, hydrated, update } = usePreferences();
-  const [client] = useClientPreferences();
-  const sidebar = useSidebarThreads({ experimental_lifecycles: prefs.threadLifecycles });
+  const [client, updateClient] = useClientPreferences();
+  // The need-you filter is per window and starts off on every load.
+  const [needYouOn, setNeedYouOn] = useState(false);
+  const sidebar = useSidebarThreads({ experimental_lifecycles: prefs.showArchived ? ["active", "archived"] : ["active"] });
   const actions = useThreadActions();
   const sdk = useSdk();
   const { providers } = useProviders();
@@ -133,8 +140,6 @@ function ThreadListBody({
   const [confirm, setConfirm] = useState<Confirm | null>(null);
   const [dropStates, setDropStates] = useState<DropStates>(() => new Map());
   const [dropGroupId, setDropGroupId] = useState<string | null>(null);
-  const [defaultBranches, setDefaultBranches] = useState<ReadonlyMap<string, string | null>>(() => new Map());
-  const branchRequests = useRef(new Set<string>());
   const models = useRef(new Map<string, Promise<ModelInfo | null>>());
 
   const ready = sidebar.status === "ready";
@@ -159,7 +164,32 @@ function ThreadListBody({
     [ready, threads, activeThreadId, stamps.finishedAt, stamps.seenAt, draftIds, scheduled, now, notes, prefs.childAttention],
   );
   const { targets, prune } = useAutoExpand(hydrated ? forest : null, activeThreadId);
-  const held = useAttentionHold(forest, activeThreadId);
+  // Projects with a thread on a branch: the rest need no default branch.
+  const branchedProjectIds = useMemo(
+    () => [...new Set(threads.flatMap((thread) => (thread.environment?.branchName ? [thread.projectId] : [])))],
+    [threads],
+  );
+  const defaultBranches = useDefaultBranches(branchedProjectIds);
+  const defaultBranchOf = useCallback(
+    (thread: PluginSidebarThread) => (defaultBranches.has(thread.projectId) ? (defaultBranches.get(thread.projectId) ?? null) : undefined),
+    [defaultBranches],
+  );
+  const [pullRequests, onPullRequest] = usePullRequestAnswers();
+  const system = useSystemFacts();
+  const pullRequestLookups = useMemo(
+    () => (forest === null ? [] : pullRequestLookupIds(forest.infos.values(), defaultBranchOf)),
+    [forest, defaultBranchOf],
+  );
+  const settle: SettleInputs = useMemo(
+    () => ({
+      now,
+      settleAfter: prefs.settleAfter,
+      startedAt: stamps.startedAt,
+      finishedAt: stamps.finishedAt,
+      pullRequestOf: (thread) => pullRequestFact(thread, defaultBranchOf(thread), pullRequests),
+    }),
+    [now, prefs.settleAfter, stamps.startedAt, stamps.finishedAt, defaultBranchOf, pullRequests],
+  );
   // Rows and groups that did not change keep their objects, so their
   // memoized components skip the render.
   const previousView = useRef<ListView | null>(null);
@@ -174,14 +204,37 @@ function ThreadListBody({
             sections: sidebar.sections,
             prefs,
             activeThreadId,
-            held,
             targets,
+            settle,
+            defaultProviderId: system.defaultProviderId,
+            primaryHostId: system.primaryHostId,
+            comfortable: client.density === "comfortable",
+            defaultBranchOf,
+            needYouOnly: needYouActive(needYouOn, countNeedYou(forest)),
           })),
-    [forest, threads, sidebar.projects, sidebar.sections, prefs, activeThreadId, held, targets],
+    [
+      forest,
+      threads,
+      sidebar.projects,
+      sidebar.sections,
+      prefs,
+      activeThreadId,
+      targets,
+      settle,
+      system.defaultProviderId,
+      system.primaryHostId,
+      client.density,
+      defaultBranchOf,
+      needYouOn,
+    ],
   );
   useLayoutEffect(() => {
     previousView.current = view;
   }, [view]);
+  // Nothing left that needs you turns the filter off, so it does not narrow
+  // the list again unasked when something next does. Set during render, as
+  // React adjusts state from a changed input.
+  if (needYouOn && forest !== null && !needYouActive(needYouOn, countNeedYou(forest))) setNeedYouOn(false);
 
   // Viewing a child stamps seenAt, on arrival and on leaving, so a child
   // that finishes while you watch doesn't turn unread behind you.
@@ -197,22 +250,6 @@ function ThreadListBody({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [activeThreadId]);
 
-  // Each project's default branch, fetched once per session.
-  useEffect(() => {
-    if (!prefs.showPullRequests || forest === null) return;
-    for (const family of forest.families) {
-      const thread = family.root.thread;
-      const projectId = thread.projectId;
-      if (thread.environment?.branchName == null || thread.host === null) continue;
-      if (branchRequests.current.has(projectId)) continue;
-      branchRequests.current.add(projectId);
-      sdk.projects.branches({ projectId, hostId: thread.host.id, limit: "1" }).then(
-        (result) => setDefaultBranches((current) => new Map(current).set(projectId, result.defaultBranch)),
-        () => setDefaultBranches((current) => new Map(current).set(projectId, null)),
-      );
-    }
-  }, [prefs.showPullRequests, forest, sdk]);
-
   const marks = useMemo(() => assignProviderMarks(providers), [providers]);
   // One display per harness, built once: rows compare it by identity.
   const providerDisplay = useMemo(() => {
@@ -257,10 +294,13 @@ function ThreadListBody({
         case "copy-id":
           void copyText(thread.id, "Thread ID copied");
           return;
-        case "mark-read":
-          if (isDoneUnseen(thread, context)) markSeen([thread.id]);
-          actions.setRead(thread.id, true).catch(fail("Couldn't mark read"));
+        case "mark-read": {
+          const forest = latest.current.forest;
+          const plan = forest === null ? { read: [thread.id], seen: [] } : markReadPlanFor(thread.id, forest, context);
+          if (plan.seen.length > 0) markSeen(plan.seen);
+          for (const id of plan.read) actions.setRead(id, true).catch(fail("Couldn't mark read"));
           return;
+        }
         case "mark-unread":
           clearSeen([thread.id]);
           actions.setRead(thread.id, false).catch(fail("Couldn't mark unread"));
@@ -341,7 +381,6 @@ function ThreadListBody({
     [sdk],
   );
 
-  const multiHost = view?.multiHost ?? false;
   const built = forest !== null && view !== null;
   const rowController: RowController | null = useMemo(() => {
     if (!built) return null;
@@ -349,11 +388,7 @@ function ThreadListBody({
       compact: isCompactViewport,
       comfortable: client.density === "comfortable",
       setEditingId,
-      showPullRequests: prefs.showPullRequests,
       harnessIcon: prefs.harnessIcon,
-      defaultBranchOf: (thread) =>
-        defaultBranches.has(thread.projectId) ? defaultBranches.get(thread.projectId) ?? null : undefined,
-      multiHost,
       provider: providerDisplay,
       sections: sidebar.sections,
       mode: prefs.organizationMode,
@@ -363,11 +398,10 @@ function ThreadListBody({
         applyToggle(toggleChip(row, prefs, forest!));
       },
       onToggleOlder: (row) => {
-        const { prefs, forest, view } = latest.current;
-        const group = view!.groups.find((candidate) => candidate.descriptor.id === row.scopeId) ?? null;
-        applyToggle(toggleOlder(row, prefs, group, forest!));
+        const { prefs, forest } = latest.current;
+        applyToggle(toggleOlder(row, prefs, forest!));
       },
-      onOpenChildren: (rootId) => applyToggle(openChildren(rootId, latest.current.prefs)),
+      onToggleSettled: (row) => applyToggle(toggleSettled(row, latest.current.prefs)),
       onToggleEnvironment: (environmentId) => {
         const { collapsedEnvironments } = latest.current.prefs;
         update({
@@ -397,11 +431,8 @@ function ThreadListBody({
     built,
     isCompactViewport,
     client.density,
-    prefs.showPullRequests,
     prefs.harnessIcon,
     prefs.organizationMode,
-    defaultBranches,
-    multiHost,
     providerDisplay,
     sidebar.sections,
     onNavigate,
@@ -413,54 +444,58 @@ function ThreadListBody({
   ]);
 
   const live: ListLive = useMemo(
-    () => ({ now, stamps, notes, familyOf: (threadId) => forest?.familyOf.get(threadId) }),
+    () => ({ now, stamps, notes, treeOf: (threadId) => forest?.treeOf.get(threadId) }),
     [now, stamps, notes, forest],
   );
 
   const activeGroupId = useMemo(() => {
-    const family = activeThreadId === null || forest === null ? undefined : forest.familyOf.get(activeThreadId);
-    return family === undefined
+    const tree = activeThreadId === null || forest === null ? undefined : forest.treeOf.get(activeThreadId);
+    return tree === undefined
       ? null
-      : groupIdForRoot(family.root.thread, { mode: prefs.organizationMode, projects: sidebar.projects });
+      : groupIdForRoot(tree.root.thread, { mode: prefs.organizationMode, projects: sidebar.projects });
   }, [activeThreadId, forest, prefs.organizationMode, sidebar.projects]);
-  const showArchived = prefs.threadLifecycles.includes("archived");
+  const showArchived = prefs.showArchived;
 
-  const groupController: GroupController | null = useMemo(() => {
-    if (!built) return null;
-    const markAll = (group: GroupView) => {
-      const { forest, activeThreadId, stamps } = latest.current;
-      // Folded roots count too: every family bucketed in the group.
-      const families = group.rootIds.flatMap((id) => forest!.familyOf.get(id) ?? []);
-      const plan = markAllReadPlan(families, {
-        activeThreadId,
-        finishedAt: stamps.finishedAt,
-        seenAt: stamps.seenAt,
-      });
+  /** Marks every unread thread in the trees read, asking first above MARK_ALL_CONFIRM_ABOVE. `where` names them. */
+  const markTreesRead = useCallback(
+    (trees: readonly ThreadTree[], where: string) => {
+      const { activeThreadId, stamps } = latest.current;
+      const plan = markAllReadPlan(trees, { activeThreadId, finishedAt: stamps.finishedAt, seenAt: stamps.seenAt });
       const run = () => {
         if (plan.seen.length > 0) markSeen(plan.seen);
         for (const id of plan.read) actions.setRead(id, true).catch(() => undefined);
       };
       if (plan.read.length === 0) {
-        toast(`Nothing unread in ${group.descriptor.label}`);
+        toast(`Nothing unread in ${where}`);
       } else if (plan.read.length > MARK_ALL_CONFIRM_ABOVE) {
         setConfirm({
           title: `Mark ${plan.read.length} threads read?`,
-          description: `Every unread thread in ${group.descriptor.label}, child threads included, will be marked read.`,
+          description: `Every unread thread in ${where}, child threads included, will be marked read.`,
           confirmLabel: "Mark all read",
           run,
         });
       } else {
         run();
       }
-    };
+    },
+    [actions, markSeen],
+  );
+  const onMarkListRead = useCallback(() => markTreesRead(latest.current.forest?.trees ?? [], "the list"), [markTreesRead]);
+  const onToggleNeedYou = useCallback(() => setNeedYouOn((on) => !on), []);
+
+  const groupController: GroupController | null = useMemo(() => {
+    if (!built) return null;
+    // Folded roots count too: every tree bucketed in the group.
+    const markAll = (group: GroupView) =>
+      markTreesRead(
+        group.rootIds.flatMap((id) => latest.current.forest!.treeOf.get(id) ?? []),
+        group.descriptor.label,
+      );
     return {
       compact: isCompactViewport,
       activeGroupId,
       showArchived,
-      onToggleArchived: () =>
-        update({
-          threadLifecycles: latest.current.prefs.threadLifecycles.includes("archived") ? ["active"] : ["active", "archived"],
-        }),
+      onToggleArchived: () => update({ showArchived: !latest.current.prefs.showArchived }),
       canCreateSections: prefs.organizationMode === "chronological",
       onToggleCollapse: (group) => {
         const { prefs, forest } = latest.current;
@@ -501,7 +536,7 @@ function ThreadListBody({
       onMarkAllRead: markAll,
       onNewSection: () => setNewSectionOpen(true),
     };
-  }, [built, isCompactViewport, activeGroupId, showArchived, prefs.organizationMode, applyToggle, actions, onNavigate, update, sdk, markSeen]);
+  }, [built, isCompactViewport, activeGroupId, showArchived, prefs.organizationMode, applyToggle, actions, onNavigate, update, sdk, markTreesRead]);
 
   const sensors = useSensors(
     useSensor(MouseSensor, MOUSE_SENSOR),
@@ -523,8 +558,7 @@ function ThreadListBody({
   }, []);
 
   const dropContext = useMemo(() => {
-    // A row in Needs attention drops as it would in its home group.
-    const groupOfThread = new Map<string, string>(Object.entries(view?.attention?.homeGroupIds ?? {}));
+    const groupOfThread = new Map<string, string>();
     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);
     }
@@ -678,23 +712,23 @@ function ThreadListBody({
   return (
     <ListLiveContext.Provider value={live}>
       <div className="flex w-full min-w-0 flex-col px-1.5 pb-2">
+        <ListHeader
+          mode={prefs.organizationMode}
+          needYouCount={view.needYouCount}
+          needYouOnly={needYouOn}
+          onToggleNeedYou={onToggleNeedYou}
+          onMarkAllRead={onMarkListRead}
+          prefs={prefs}
+          client={client}
+          onPrefs={update}
+          onClient={updateClient}
+        />
+        <PullRequestProbes threadIds={pullRequestLookups} onAnswer={onPullRequest} />
         {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>
         ) : (
           <DndContext sensors={sensors} collisionDetection={collision} onDragMove={onDragMove} onDragEnd={onDragEnd} onDragCancel={onDragCancel}>
-            {view.attention !== null ? (
-              <AttentionSection
-                view={view.attention}
-                rowController={rowController}
-                environmentProviders={environmentProviders}
-                dropStates={dropStates}
-                activeThreadId={activeThreadId}
-                editingId={editingId}
-                now={now}
-                stamps={stamps}
-              />
-            ) : null}
             {view.groups.map((group) => (
               <GroupSection
                 key={group.descriptor.id}
@@ -822,7 +856,7 @@ function ThreadListBody({
             <ThreadDetails
               info={details}
               controller={rowController}
-              showPullRequest={prefs.showPullRequests}
+              showPullRequest
               actions={{
                 open: () => {
                   setDetailsId(null);

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 { chipTone, pluginStatusWins } from "../model/state";
+import { 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, NoteLine, PluginStatusGlyph } from "./glyphs";
+import { ChildDot, GlyphIcon, NoteLine, PluginStatusGlyph } from "./glyphs";
 import { ProviderBadge } from "./ProviderBadge";
 import { PullRequestBadge } from "./PullRequestBadge";
 import { RenameEditor } from "./RenameEditor";
@@ -58,12 +58,11 @@ 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.
+ * A quiet title, and its chip: the foreground mixed toward the sidebar 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)))]";
+const QUIET_TEXT = "text-[color:color-mix(in_oklch,var(--foreground)_68%,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";
@@ -175,7 +174,7 @@ export const ThreadRowView = memo(function ThreadRowView({
       );
   const menuItems = rowMenuItems({
     thread,
-    unread: info.unread,
+    unread: row.depth === 0 ? row.treeUnread : info.unread,
     splitAvailable: split.isAvailable,
     isRoot: thread.parentThreadId === null,
     hasSections: controller.mode === "chronological" || controller.sections.length > 0,
@@ -219,10 +218,7 @@ export const ThreadRowView = memo(function ThreadRowView({
     controller.setEditingId(thread.id);
   };
 
-  const defaultBranch = controller.showPullRequests && row.depth === 0 ? controller.defaultBranchOf(thread) : undefined;
-  const branch = thread.environment?.branchName ?? null;
-  const showPullRequest =
-    controller.showPullRequests && row.depth === 0 && branch !== null && defaultBranch !== undefined && branch !== defaultBranch;
+  const showPullRequest = row.pullRequest !== null;
 
   const stateSlot = miniMap ? (
     <SplitMiniMap panes={miniMap} label={`${thread.displayTitle} — open in split; ${info.state.label}`} working={info.flags.has("working")} />
@@ -300,7 +296,7 @@ export const ThreadRowView = memo(function ThreadRowView({
   const chip = row.chip;
   const indent = rowIndent(row.depth);
   const note = row.note;
-  const twoLines = controller.comfortable || note !== null;
+  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
@@ -366,7 +362,10 @@ export const ThreadRowView = memo(function ThreadRowView({
         }}
         className="absolute inset-0 rounded-md outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring"
       />
-      <span className="pointer-events-none relative flex size-4 shrink-0 items-center justify-center">{stateSlot}</span>
+      <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.
         <span
@@ -404,27 +403,31 @@ export const ThreadRowView = memo(function ThreadRowView({
             }}
           />
         ) : (
-          <span
-            title={thread.displayTitle}
-            className={cn(
-              "min-w-0 truncate",
-              row.bold ? "font-semibold" : "font-normal",
-              // Children sit a step below their parent.
-              row.depth > 0 && "text-xs",
-              // Quiet threads step back so live ones lead; hover brings them back.
-              dimmed && `${QUIET_TEXT} group-hover/row:text-foreground`,
-            )}
-          >
-            {/* Plain text: mention pills lost the truncation fight. */}
-            {thread.displayTitle}
+          <span className="flex min-w-0 items-center gap-1.5">
+            <span
+              title={thread.displayTitle}
+              className={cn(
+                "min-w-0 truncate",
+                row.bold ? "font-semibold" : "font-normal",
+                // Children sit a step below their parent.
+                row.depth > 0 && "text-xs",
+                // Quiet threads step back so live ones lead; hover brings them back.
+                dimmed && `${QUIET_TEXT} group-hover/row:text-foreground`,
+              )}
+            >
+              {/* Plain text: mention pills lost the truncation fight. */}
+              {thread.displayTitle}
+            </span>
+            {/* On a two-line row the badge stays on the title's line, not centred beside both. */}
+            {row.pullRequest === "title" && twoLines ? <PullRequestBadge threadId={thread.id} /> : null}
           </span>
         )}
         {!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)} />
+        ) : row.branchLine !== null && !editing ? (
+          <BranchLine row={row} branch={row.branchLine} />
         ) : null}
       </span>
       {row.hiddenBadge ? (
@@ -432,7 +435,7 @@ export const ThreadRowView = memo(function ThreadRowView({
           <Icon name={ICONS.hidden} aria-hidden className="size-3.5" />
         </span>
       ) : null}
-      {showPullRequest && !editing ? (
+      {row.pullRequest === "title" && !twoLines && !editing ? (
         <span className="pointer-events-none relative">
           <PullRequestBadge threadId={thread.id} />
         </span>
@@ -441,8 +444,8 @@ export const ThreadRowView = memo(function ThreadRowView({
         <button
           type="button"
           aria-expanded={chip.expanded}
-          aria-label={chipLabel(thread.displayTitle, chip.count, chip.flag, chip.expanded)}
-          title={chipLabel(thread.displayTitle, chip.count, chip.flag, 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();
@@ -450,20 +453,12 @@ export const ThreadRowView = memo(function ThreadRowView({
           }}
           onPointerDown={(event) => event.stopPropagation()}
           onKeyDown={(event) => event.stopPropagation()}
-          data-tone={chipTone(chip.flag)}
           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)],
+            "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}
-          {chip.flag !== null ? <FlagGlyph flag={chip.flag} className="size-3" /> : null}
-          {controller.harnessIcon !== "hidden"
-            ? chip.providerIds.map((providerId) => (
-                <ProviderBadge key={providerId} display={controller.provider(providerId)} className="size-3 [&_*]:size-3" />
-              ))
-            : null}
           <Icon
             name={ICONS.expand}
             aria-hidden
@@ -471,7 +466,7 @@ export const ThreadRowView = memo(function ThreadRowView({
           />
         </button>
       ) : null}
-      {!editing ? (
+      {!editing && row.harness ? (
         <span
           className={cn(
             "pointer-events-none relative inline-flex shrink-0 transition-opacity",
@@ -490,14 +485,16 @@ export const ThreadRowView = memo(function ThreadRowView({
             </kbd>
           ) : (
             <>
-              {row.homeGroupLabel !== null ? (
+              {row.machine !== null ? (
                 <span
-                  title={`In ${row.homeGroupLabel}`}
-                  className={cn("pointer-events-none max-w-24 truncate text-[11px] text-muted-foreground transition-opacity", fadeClass)}
+                  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)}
                 >
-                  {row.homeGroupLabel}
+                  {row.machine}
                 </span>
-              ) : time !== null ? (
+              ) : null}
+              {time !== null ? (
                 <span
                   title={time.label}
                   aria-label={time.label}
@@ -521,6 +518,22 @@ export const ThreadRowView = memo(function ThreadRowView({
                       : "absolute right-0 opacity-0 group-hover/row:opacity-100 group-focus-within/row:opacity-100",
                 )}
               >
+                {!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"
@@ -601,38 +614,17 @@ export const ThreadRowView = memo(function ThreadRowView({
   );
 });
 
-function SecondLine({
-  row,
-  multiHost,
-  defaultBranch,
-}: {
-  row: ThreadRow;
-  multiHost: boolean;
-  defaultBranch: string | null | undefined;
-}) {
-  const thread = row.info.thread;
-  const environment = thread.environment;
-  const parts: React.ReactNode[] = [];
-  // The branch earns the line only when it isn't the project's default:
-  // "main" on every row said nothing.
-  const branch = environment?.branchName ?? null;
-  if (branch !== null && branch !== defaultBranch) {
-    parts.push(
-      <span key="branch" className="inline-flex min-w-0 items-center gap-0.5">
+/** The Comfortable second line: the branch, then its pull request badge. */
+function BranchLine({ row, branch }: { row: ThreadRow; branch: string }) {
+  const environment = row.info.thread.environment;
+  return (
+    <span className="flex min-w-0 items-center gap-1.5 text-xs leading-4 text-muted-foreground">
+      <span className="inline-flex min-w-0 items-center gap-0.5">
         <Icon name={environment?.isWorktree ? ICONS.worktree : ICONS.branch} aria-hidden className="size-3 shrink-0" />
         <span className="truncate">{branch}</span>
         {environment?.isWorktree ? <span className="sr-only"> (worktree)</span> : null}
-      </span>,
-    );
-  }
-  if (multiHost && thread.host !== null) {
-    parts.push(
-      <span key="host" className="inline-flex shrink-0 items-center gap-0.5">
-        <Icon name={ICONS.machine} aria-hidden className="size-3" />
-        {thread.host.name}
-      </span>,
-    );
-  }
-  if (parts.length === 0) return null;
-  return <span className="flex min-w-0 items-center gap-2 text-xs leading-4 text-muted-foreground">{parts}</span>;
+      </span>
+      {row.pullRequest === "second-line" ? <PullRequestBadge threadId={row.info.thread.id} /> : null}
+    </span>
+  );
 }