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

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

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

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

@@ -6,9 +6,9 @@ import type { PluginSidebarSection, PluginSidebarThread } from "@get-bb/plugin-s
 import type { Stamps } from "@/shared/contract";
 import type { HarnessIcon, OrganizationMode } from "@/shared/preferences";
 import type { ThreadNotes } from "@/shared/contract";
-import type { Family } from "../model/families";
+import type { ThreadTree } from "../model/trees";
 import type { RowMenuAction } from "../model/menu";
-import type { OlderRow, ThreadRow } from "../model/view";
+import type { OlderRow, SettledRow, ThreadRow } from "../model/view";
 import type { ProviderDisplay } from "./ProviderBadge";
 
 export interface ModelInfo {
@@ -21,11 +21,7 @@ export interface RowController {
   compact: boolean;
   comfortable: boolean;
   setEditingId(id: string | null): void;
-  showPullRequests: boolean;
   harnessIcon: HarnessIcon;
-  /** Undefined while unknown; the lookup starts on first ask. */
-  defaultBranchOf(thread: PluginSidebarThread): string | null | undefined;
-  multiHost: boolean;
   /** One object per harness, the same one on every call. */
   provider(providerId: string): ProviderDisplay;
   sections: readonly PluginSidebarSection[];
@@ -33,8 +29,7 @@ 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;
+  onToggleSettled(row: SettledRow): void;
   onToggleEnvironment(environmentId: string): void;
   onMenuAction(action: RowMenuAction, thread: PluginSidebarThread, sectionId?: string | null): void;
   onRename(threadId: string, title: string): Promise<void>;
@@ -54,12 +49,12 @@ export interface ListLive {
   now: number;
   stamps: Stamps;
   notes: Readonly<Record<string, ThreadNotes>>;
-  familyOf(threadId: string): Family | undefined;
+  treeOf(threadId: string): ThreadTree | undefined;
 }
 
 export const ListLiveContext = createContext<ListLive>({
   now: 0,
   stamps: { startedAt: {}, finishedAt: {}, pendingAt: {}, seenAt: {} },
   notes: {},
-  familyOf: () => undefined,
+  treeOf: () => undefined,
 });

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

@@ -1,11 +1,12 @@
-// State glyphs, chip glyphs and header counters. They draw what the model
-// decided; tone and animation come from host token classes only.
+// State glyphs, the children chip's state glyph and header counters. They
+// draw what the model decided; tone and animation come from host token
+// classes only.
 import { experimental_Icon as Icon } from "@get-bb/plugin-sdk/app";
 import type { PluginSidebarThreadRowStatus } from "@get-bb/plugin-sdk/app";
 import { cn } from "@/lib/utils";
 import type { Counters } from "../model/counters";
 import type { RowNote } from "../model/notes";
-import { FLAG_GLYPHS, type ChipTone, type Flag, type Glyph, type Tone } from "../model/state";
+import { FLAG_GLYPHS, type Flag, type Glyph, type Tone } from "../model/state";
 
 export const TONE_CLASS: Record<Tone, string> = {
   attention: "text-attention",
@@ -18,19 +19,6 @@ export const TONE_CLASS: Record<Tone, string> = {
   none: "",
 };
 
-// The tone colour is one of bb's tokens, mixed toward the foreground for the
-// text so it clears 4.5:1 on the sidebar in both themes; the border and fill
-// are the same colour, thinned. Written out in full so the class scan sees them.
-export const CHIP_TONE_CLASS: Record<ChipTone, string> = {
-  attention:
-    "border-[color:color-mix(in_oklch,var(--attention)_45%,transparent)] bg-[color-mix(in_oklch,var(--attention)_10%,transparent)] text-[color:color-mix(in_oklch,var(--attention),var(--foreground)_55%)] hover:bg-[color-mix(in_oklch,var(--attention)_20%,transparent)]",
-  destructive:
-    "border-[color:color-mix(in_oklch,var(--destructive-text)_45%,transparent)] bg-[color-mix(in_oklch,var(--destructive-text)_10%,transparent)] text-[color:color-mix(in_oklch,var(--destructive-text),var(--foreground)_55%)] hover:bg-[color-mix(in_oklch,var(--destructive-text)_20%,transparent)]",
-  working:
-    "border-[color:color-mix(in_oklch,var(--timeline-accent)_45%,transparent)] bg-[color-mix(in_oklch,var(--timeline-accent)_10%,transparent)] text-[color:color-mix(in_oklch,var(--timeline-accent),var(--foreground)_55%)] hover:bg-[color-mix(in_oklch,var(--timeline-accent)_20%,transparent)]",
-  neutral: "border-border/70 text-muted-foreground hover:bg-state-hover hover:text-foreground",
-};
-
 const SHINE = "animate-shine-icon motion-reduce:animate-none";
 const SPIN = "animate-spin motion-reduce:animate-none";
 
@@ -126,6 +114,12 @@ export function FlagGlyph({ flag, className }: { flag: Flag; className?: string
   return <GlyphIcon glyph={FLAG_GLYPHS[flag]} className={className} />;
 }
 
+/** The state glyph that leads a children chip, smaller than the Status column's; the chip's label names it. */
+export function ChipStateGlyph({ flag }: { flag: Flag }) {
+  if (FLAG_GLYPHS[flag].icon === "dot") return <UnreadDot className="size-[5px]" />;
+  return <FlagGlyph flag={flag} className="size-3" />;
+}
+
 const COUNTER_ITEMS: readonly {
   key: keyof Counters;
   flag: Flag;

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

@@ -1,7 +1,7 @@
 // Transient auto-expansion. Transitions are diffed against the previous
 // render, as bb does; nothing here is persisted.
 import { useCallback, useRef, useState } from "react";
-import type { Forest } from "../model/families";
+import type { Forest } from "../model/trees";
 import {
   detectTransitions,
   mergeTargets,

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

@@ -0,0 +1,35 @@
+// Each project's default branch, looked up once per list through the
+// machine of the project's default source.
+//
+// Debt: the answers are kept in component state, with no refresh, because
+// the SDK offers no cached query for a project's branches. It clears when
+// the SDK does, or when a default branch changing mid-session matters.
+import { useEffect, useRef, useState } from "react";
+import { useSdk } from "@get-bb/plugin-sdk/app";
+import { defaultSourceHostId } from "../model/branches";
+
+/** Project id → default branch; undefined while unknown, null when the lookup found none. */
+export type DefaultBranches = ReadonlyMap<string, string | null>;
+
+export function useDefaultBranches(projectIds: readonly string[]): DefaultBranches {
+  const sdk = useSdk();
+  const [branches, setBranches] = useState<DefaultBranches>(() => new Map());
+  const requested = useRef(new Set<string>());
+  useEffect(() => {
+    for (const projectId of projectIds) {
+      if (requested.current.has(projectId)) continue;
+      requested.current.add(projectId);
+      const settle = (branch: string | null) => setBranches((current) => new Map(current).set(projectId, branch));
+      sdk.projects
+        .get({ projectId })
+        .then(async (project) => {
+          const hostId = defaultSourceHostId(project.sources);
+          if (hostId === null) return null;
+          const result = await sdk.projects.branches({ projectId, hostId, limit: "1" });
+          return result.defaultBranch ?? null;
+        })
+        .then(settle, () => settle(null));
+    }
+  }, [projectIds, sdk]);
+  return branches;
+}

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

@@ -0,0 +1,36 @@
+// The pull request lookups that answered, by thread id. Answers arriving in
+// one burst (a list's worth of lookups on load) land in one state update.
+//
+// Debt: this copies server state the host's per-row pull request hook owns,
+// because settling reads every thread's pull request at once and the SDK
+// offers no query over many threads. It clears when the SDK does.
+import { useCallback, useRef, useState } from "react";
+import type { PullRequestState } from "../model/settled";
+
+export type PullRequestAnswers = ReadonlyMap<string, PullRequestState | null>;
+
+export function usePullRequestAnswers(): [PullRequestAnswers, (threadId: string, state: PullRequestState | null) => void] {
+  const [answers, setAnswers] = useState<PullRequestAnswers>(() => new Map());
+  const pending = useRef(new Map<string, PullRequestState | null>());
+  const scheduled = useRef(false);
+  const onAnswer = useCallback((threadId: string, state: PullRequestState | null) => {
+    pending.current.set(threadId, state);
+    if (scheduled.current) return;
+    scheduled.current = true;
+    setTimeout(() => {
+      scheduled.current = false;
+      const batch = pending.current;
+      pending.current = new Map();
+      setAnswers((current) => {
+        let next: Map<string, PullRequestState | null> | null = null;
+        for (const [id, value] of batch) {
+          if (current.has(id) && current.get(id) === value) continue;
+          next ??= new Map(current);
+          next.set(id, value);
+        }
+        return next ?? current;
+      });
+    }, 0);
+  }, []);
+  return [answers, onAnswer];
+}